This library contains the StackSpot theme (css) and many utilities to use and manipulate it.
npm install @stack-spot/portal-themeAttention: this is not Citric, our design system (DS), instead, it's a configuration that we pass to it.
Platforms: this library is compatible with the web (browser) and VSCode (used by the StackSpot AI extension).
1. Import the css into your main project file:
``ts`
import '@stack-spot/portal-theme/dist/theme.css'`
2. Setup the theme provider for Citric.tsx
import { CSSToCitricAdapter } '@stack-spot/portal-theme'
const App = () => ( Hello World!
// Your content goes here. Every component of Citric will be aware of the theme from this point on.
)
``
3. You can now use the theme in your jsx to define colors:tsx``
4. You can also use the css variables defined by the theme in your css files:css`
.my-class {
background-color: var(--light-400);
}
: gets the current theme name.
- getThemeKind(): returns "dark" if the theme is mostly dark or "light" if the theme is mostly light. This can be different than the theme name.
- useThemeName(): a React Hook to get the current theme name. Use this if you need your content to update when the theme changes.
- useThemeKind(): a React Hook to get the current theme kind. Use this if you need your content to update when the theme changes.
- loadTheme(): loads the theme from the cookie "theme".
- setTheme(themeName): changes the current theme.Observations:
- The default theme is "dark".
- The theme is always defined by the attributes
data-theme-name and data-theme-kind on the tag body.
- The theme automatically updates across multiple windows.Utilities
- withOpacity(variableName): applies an opacity to a theme css color variable.
- contrastColor(color, level): gets the ideal contrast color for the color passed as parameter.
- createColorSequence(options): generates a pre-defined, cyclic, set of ideally spread colors from the theme palette.
- paletteSequence(options): same as createColorSequence, but generates the css variable instead.
- valueOf(variableName): gets the value of a CSS variable.
- listToClass(classList)`: removes all falsy values from the array and joins every item into a valid class string.