@atb-as/theme
Advanced tools
@atb-as/themeyarn add @atb-as/theme
TS/JS importImport through ts/js:
import {createThemesFor, ThemeVariant} from '@atb-as/theme';
const { light, dark } = createThemesFor(ThemeVariant.AtB)
console.log(light.color.background.neutral[0].background);
// #000000
Colors can be imported as CSS files. Typography styles can be imported as CSS Modules.
To retrieve CSS files depending on your organization, we recommend setting up aliasing in your bundler. An example is provided for Webpack. This process is similar for other bundlers
const orgID = process.env.ORG_ID
webpack(config) {
config.resolve.alias = {
...config.resolve.alias,
'@atb/theme/theme.css': `@atb-as/theme/lib/generated/themes/${orgId}-theme/theme.css`,
'@atb/theme/typography.css': '@atb-as/theme/lib/generated/typography.css',
'@atb/theme/typography.module.css':
'@atb-as/theme/lib/generated/typography.module.css',
};
}
Then import CSS files using the alias above.
// When using imports from bundlers
// With CSS Modules for atb-theme
import * as classNamesTypo from '@atb/theme/typography.module.css';
// Without CSS Modules for atb-theme
import '@atb/theme/theme.css';
import '@atb/theme/typography.css';
/* Using css/postcss/bundlers */
@import '@atb/theme/typography.module.css';
/* or without modules */
@import '@atb/theme/themes/theme.css';
@import '@atb/theme/typography.css';
/* You can also import from an organization directly */
@value myClassname from "@atb-as/theme/lib/themes/atb-theme/theme.css";
(note: This all depends on how you setup bundlers and consumes styles.)
For CSS, we recommend our token plugin, which provides typesafety and an easy interfacing for accessing CSS variables (design tokens).
Uses CSS Custom Properties to do theming. This means by default it only support newer browsers. This needs to be compansated for by the consumer if wanted.
By setting the attribute data-theme to light, dark or auto on a parent component the cascading of custom props will change the theme. This means we can set what level we want the theming to operate on.
<body data-theme="light">
<!-- My content -->
</body>
<body data-theme="dark">
<!-- My content -->
</body>
<body data-theme="auto">
<!-- My content -->
</body>
data-theme="auto" follows the device preferences.
createThemes(themes: Themes, overrides?: ConfigurationOverride<Theme>): ThemesCreate new themes (light/dark) with optionally overriden defaults
const themesVariant = createThemesFor(ThemeVariant.AtB)
const { light, dark } = createThemes(
themesVariant,
{
light: {
spacings: {
medium: 20,
},
},
});
console.log(light.spacing.medium);
// 20
createExtendedThemes<T>(themes: Themes, extension: T)Use Theme as base and extend with new properties. Properties can be nested and will be deep merged.
type FooExtension = {
statusBarStyle: 'dark' | 'light';
}
const themesVariant = createThemesFor(ThemeVariant.AtB)
const { light, dark } = createExtendedThemes<FooExtension>(
themesVariant,
{
light: {statusBarStyle: 'dark'},
dark: {statusBarStyle: 'light'}
});
console.log(light.statusBarStyle);
// dark
createTextTypeStyles(PlatformTypes, ConfigurationOverride<TextTypeStyles>)Create new text type style with optinally overriden defaults.
createTextTypeStyles({
paragraphHeadline: {
fontWeight: Platform.select({
ios: '600',
android: 'bold'
})
}
})
extendTextTypeStyles<T>(type: PlatformTypes, extension: T)Use text type style as base and extend with new properties. Properties can be nested and will be deep merged.
type Foo = {
paragraphHeadline: {
additional: boolean;
};
};
const foo = extendTextTypeStyles<Foo>({
paragraphHeadline: {
additional: true,
},
});
console.log(foo.paragraphHeadline.additional);
// true
Figma is the source of truth of variables. Changes should therefore be made in Figma only and imported into code afterwards through a GitHub Action.
`Use workflow from`: `main`
`Which org did you make changes for?`: `orgId` // or `all`
If you want to make changes to variables, we recommend making changes in Figma and import them into code using the steps above.
If you want to fetch new variables from Figma, you need to set environment variables.
$ Replace [id_of_figma_file] with the actual ID of the file
export FIGMA_VARIABLES_URL=https://api.figma.com/v1/files/[id_of_figma_file]/variables/local
$ Create access token with Figma Variables read access
$ https://help.figma.com/hc/en-us/articles/8085703771159-Manage-personal-access-tokens
export FIGMA_REST_API_KEY=personal_access_token
yarn
$ Only if you want to fetch new variables
$ Not need when just building the design system from source
yarn workspace @atb-as/theme fetch-variables
yarn workspace @atb-as/theme build
FAQs
AtB Design System Colors
The npm package @atb-as/theme receives a total of 212 weekly downloads. As such, @atb-as/theme popularity was classified as not popular.
We found that @atb-as/theme demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers 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
TC39 met in Seattle and advanced 9 JavaScript proposals, including three to Stage 4, introducing new features and enhancements for a future ECMAScript release.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.