Socket
Socket
Sign inDemoInstall

@atb-as/theme

Package Overview
Dependencies
2
Maintainers
0
Versions
80
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@atb-as/theme

AtB Design System Colors


Version published
Weekly downloads
296
decreased by-38.59%
Maintainers
0
Created
Weekly downloads
 

Readme

Source

@atb-as/theme

Install

yarn add @atb-as/theme

Usage

Import through ts/js:

import {createThemesFor,ThemeVariant} from '@atb-as/theme';
const themes = createThemesFor(ThemeVariant.AtB)
console.log(themes.light.colors.background_0);

Usage CSS

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.)

Theming with CSS

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.

Regular CSS

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" />
CSS Modules
.mySpecificClassName {
  composes: colors-primary_2 from 'theme.modules.css';
}
@import 'theme.modules.css';

.mySpecificClassName {
  composes: colors-transport_train;
}

Theme API

createThemes(themes: Themes,overrides?: ConfigurationOverride<Theme>): Themes

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
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 _themes = createExtendedThemes<FooExtension>(
  themesVariant,
  {
  light: {statusBarStyle: 'dark'},
  dark: {statusBarStyle: 'light'}
});
_themes.dark.statusBarStyle;
//=> (property) statusBarStyle: "dark" | "light"

Typography API

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);
//=> (property) additional: boolean

Building locally

From monorepo root, to generate CSS run:

yarn workspace @atb-as/theme create-css

or from project root:

yarn create-css

FAQs

Package last updated on 15 Jul 2024

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc