@astro-my/design-systems-gempak

Astro Design System 💅

✨ Component library based on our design system 🛠

Installation

$ yarn add @astro-my/design-system

# or

$ npm install --save @astro-my/design-system

This component library comes with some peer dependencies which are required to be available in any project consuming it. These include but may not be limited to: moment, moment-timezone, react, react-dom, react-intl,@material-ui/core,@material-ui/icons and react-router-dom. An up-to-date list with their respective version ranges can be found in the package.json. Please make sure all packages are installed within your application for the component library to be able to work as expected.

Importing

The package's main export contains all UI components.

import {
  Header,
  Article,
  Grid,
  Footer,
  // etc.
} from '@astro-my/design-system';

Importing CSS variables

When you are developing your application using UI Kit components, chances you want to use the same design tokens as our design system. We provide them through both CSS variables and JavaScript variables.

Show details

We expose the CSS variables from the @astro-my/design-system/materials/custom-properties.css file.

Importing css variables in css files

You will need a postcss-import plugin, and a postcss variable plugin: either postcss-custom-properties or postcss-css-variables would work.

@import '@astro-my/design-system/materials/custom-properties.css';

.container {
  padding: var(--spacing-l);
}

// wherever you process your CSS
postcss([postcssImportPlugin(), postcssCustomProperties()]);

Using postcss-custom-properties and importFrom

The ui-kit css variables can also be injected using postcss-custom-properties, removing the need to import them directly inside your css files.

/* no import required! */
.container {
  padding: var(--spacing-l);
}

// wherever you process your CSS
postcss([
  postcssCustomProperties({
    preserve: false,
    importFrom: require.resolve(
      '@astro-my/design-system/materials/custom-properties.css'
    ),
  }),
]);

Accessing JavaScript variables and design tokens

You can also access the JavaScript variables like this

import { customProperties } from '@astro-my/design-system';

const primary = customProperties.colorPrimary;

Please look at the file itself to inspect which variables are available (documentation will be provided in the future).

Motivation

Declarative components serving as a design guide
Shared independently from the application's code base
Used across different apps consumed by different teams
Shared language between developers and designers

Documentation and Storybook

Available at http://designsystem.eco.astro.com.my.