Security News
NVD Backlog Tops 20,000 CVEs Awaiting Analysis as NIST Prepares System Updates
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
@logrock/pebbles
Advanced tools
[![Coverage Status](https://coveralls.io/repos/github/LogRock/pebbles/badge.svg?branch=main)](https://coveralls.io/github/LogRock/pebbles?branch=main)
Welcome to our Component Library! This is an implementation of our Asphalt Design System.
Here are some useful links:
About us: https://logrock.com
This library is meant to be used in React projects. To use it, you will have to setup your prefered React environment and add a few other dependencies first:
# styled components
yarn add styled-components
yarn add styled-breakpoints
yarn add react-select
# fonts
yarn add @fontsource/archivo
# icons
yarn add react-icons
Make the Archivo font available in your project by importing it
import "@fontsource/archivo/400.css";
import "@fontsource/archivo/500.css";
import "@fontsource/archivo/600.css";
import "@fontsource/archivo/700.css";
import "@fontsource/archivo/800.css";
You can, alternatively, make it available as a Variable font if you want. The only requirement is having all weights from 400 to 800 available for the default theme to work best.
If you customize the theme by changing any of the fontFamily properties, make sure that the font you want to use is also made available, by exposing it in any ways you like (fontsource is the best!)
Install this lib:
yarn add @logrock/pebbles
Now, wrap your app (or whatever components you plan on using this library at) with a styled-components' ThemeProvider
, passing along a theme.
Also, this is a google place for the global icon configuration, using react-select's IconContext.Provider
you can specify the global settings for the icons. This is optional but recommended.
import { ThemeProvider } from "styled-components";
import { lightTheme } from "@logrock/pebbles";
const MyApp = () => {
return (
<ThemeProvider theme={lightTheme}>
<IconContext.Provider
value={{
style: {
fontSize: lightTheme.icons.size,
color: lightTheme.icons.color,
},
}}
>
<MyAppContent />
</IconContext.Provider>
</ThemeProvider>
);
};
For your convenience, we currently provide a light and a dark theme that you can use and override as you see fit. Check out all it's options at theme.ts
We also expose a Theme
type if you use Typescript, autocomplete at will!
import { Theme } from "@logrock/pebbles";
And you are all set! From now on, just import and use any components you want. You can also access the theme variables using styled-components' own ThemeContext anywhere (and also as a theme prop in your custom styled components)
Thank you for your interest, check out CONTRIBUTING.md for more info.
FAQs
[![Coverage Status](https://coveralls.io/repos/github/LogRock/pebbles/badge.svg?branch=main)](https://coveralls.io/github/LogRock/pebbles?branch=main)
The npm package @logrock/pebbles receives a total of 7 weekly downloads. As such, @logrock/pebbles popularity was classified as not popular.
We found that @logrock/pebbles demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.