@bitgune/itx-styles v1.0.2

@bitgune/itx-styles

Styles for the Bitgune Itxura Design System

Getting started

To install @bitgune/itx-styles in your project, you will need to run the following command using npm:

npm install -S @bitgune/itx-styles

This package requires Dart Sass in order to compile. It uses Sass modules to organize the codebase and provide exports to use.

Once you get Sass up and running in your project, make sure to configure Sass to include node_modules in its includePaths option. For more information, checkout the configuration section in our Sass docs.

Usage

You can bring in all the styles for the ITX Design System by including @bitgune/itx-styles in your Sass files. For example:

@use '@bitgune/itx-styles';

If you only would like to bring in specific components from ITX, you can import them in a similar way:

@use '@bitgune/itx-styles/scss/reset';
@use '@bitgune/itx-styles/scss/components/accordion';
@use '@bitgune/itx-styles/scss/components/button';
@use '@bitgune/itx-styles/scss/components/checkbox';

There are various helpers that you can include from ITX, as well, such as a CSS reset, grid, breakpoint helpers, and more. You can include these similar to how you bring in components:

// Bring in the CSS Reset
@use '@bitgune/itx-styles/scss/reset';

// Bring in the CSS Grid
@use '@bitgune/itx-styles/scss/grid';

To learn more about the various helpers that @bitgune/itx-styles provides, checkout the overview of the files available to use in our Sass docs.

Theming

You can change the default theme of ITX by doing the following:

@use '@bitgune/itx-styles/scss/themes';
@use '@bitgune/itx-styles/scss/theme' with (
  $theme: themes.$g100,
);

This example uses a built-in theme from ITX provided by the scss/themes entrypoint. You can also use a custom theme, or add your own custom tokens to extend the theme.

// Configure with a custom theme
@use '@bitgune/itx-styles/scss/theme' with (
  $theme: (
    background: #e2e2e2,
    text-primary: #ffffff,
  ),
);

// Extend the g100 theme with your own tokens
@use '@bitgune/itx-styles/scss/themes';
@use '@bitgune/itx-styles/scss/theme' with (
  $fallback: themes.$g100,
  $theme: (
    custom-token-01: #000000,
  ),
);

Design tokens

You can access the design tokens defined by the ITX Design System through the @bitgune/itx-styles/scss/theme entrypoint. This file will allow you to refer to tokens using Sass Variables as well as get the current value for any token in the current theme. For example:

@use '@bitgune/itx-styles/scss/theme';

body {
  background: theme.$background;
}

For a full list of tokens available for you to use, check out our theming documentation.

📖 API Documentation

If you're looking for @bitgune/itx-styles API documentation, check out:

• Sass