yarn add @atb-as/theme
Import through ts
/js
:
import {createThemesFor,ThemeVariant} from '@atb-as/theme';
const themes = createThemesFor(ThemeVariant.AtB)
console.log(themes.light.colors.background_0);
Or you could import CSS files or as CSS Modules. The actual content is currently the same, but named differently to be imported by CSS modules.
// When using imports from bundlers
// With CSS Modules for atb-theme
import * as classNamesTheme from '@atb-as/theme/lib/themes/atb-theme/theme.module.css';
import * as classNamesTypo from '@atb-as/theme/lib/typography.module.css';
// Without CSS Modules for atb-theme
import '@atb-as/theme/lib/themes/atb-theme/theme.css';
import '@atb-as/theme/lib/typography.css';
/* Using css/postcss/bundlers */
@import '@atb-as/theme/lib/themes/atb-theme/theme.module.css';
@import '@atb-as/theme/lib/typography.module.css';
/* or without modules */
@import '@atb-as/theme/lib/themes/atb-theme/theme.css';
@import '@atb-as/theme/lib/typography.css';
/* And potentially */
@value myClassname from "@atb-as/theme/lib/themes/atb-theme/theme.css";
(note: This all depends on how you setup bundlers and consumes styles.)
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 class light
or dark
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 class="light">
<!-- My content -->
</body>
<body class="dark">
<!-- My content -->
</body>
You must set either light
or dark
for themes to work.
With regular CSS.
<!-- Named same as theme objects -->
<div class="colors-primary_2">
<!-- background color and text color set -->
</div>
<div class="colors-transport_city" />
.mySpecificClassName {
composes: colors-primary_2 from 'theme.modules.css';
}
@import 'theme.modules.css';
.mySpecificClassName {
composes: colors-transport_train;
}
Create new themes (light/dark) with optinally overriden defaults
const themesVariant = createThemesFor(ThemeVariant.AtB)
const themes = createThemes(
themesVariant,
{
light: {
spacings: {
medium: 20,
},
},
});
themes.dark.spacings.medium;
//=> 20
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 _themes = createExtendedThemes<FooExtension>(
themesVariant,
{
light: {statusBarStyle: 'dark'},
dark: {statusBarStyle: 'light'}
});
_themes.dark.statusBarStyle;
//=> (property) statusBarStyle: "dark" | "light"
Create new text type style with optinally overriden defaults.
createTextTypeStyles({
paragraphHeadline: {
fontWeight: Platform.select({
ios: '600',
android: 'bold'
})
}
})
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);
//=> (property) additional: boolean
From monorepo root, to generate CSS run:
yarn workspace @atb-as/theme create-css
or from project root:
yarn create-css