most design system

The most design system is a meticulously crafted experience which delivers a user-centric, approachable and modernistic user experience across more retail's digital platforms.

Installation

You can install the most design system as a regular dev dependency.

npm install --save-dev most-design-system

Or with yarn

yarn add most-design-system --dev

Usage

Most Design Tokens

The most design tokens express micro design decisions that frames the most design system's visual style.

JavaScript

To use most design tokens in JavaScript frameworks, import most's design tokens as JavaScript objects.

import tokens from "most-design-system/tokens/js";

And use the tokens according to your framework's styling syntax.

// src/App.jsx
<h1
  style={{
    color: tokens.colors.orange[60],
    fontSize: tokens.typography.head[10].fontSize,
  }}
>
  Most Design System
</h1>

You can also use the tokens to style in vanilla JavaScript if required.

React Native

Import most design tokens as JavaScript objects formatted for React Native.

import tokens from "most-design-system/tokens/react-native";

And use the tokens as you want.

// src/App.jsx
<Text
  style={{
    color: tokens.colors.orange[60],
    fontSize: tokens.typography.head[10].fontSize,
  }}
>
  Most Design System
</Text>

CSS

Import most design tokens as CSS variables

/* src/App.css */
@import "most-design-system/tokens/css";

And start using them anywhere where you can use CSS variables

/* src/App.css */
h1 {
  color: var(--colors-orange-60);
  font: var(--typography-para-30);
}

Tailwind

In your tailwind.config.js, import and set up all the regular and composite tokens.

// tailwind.config.js

// Import JS tokens for regular tokens
import jsTokens from "most-design-system/tokens/js";
// Import CSS-in-JS tokens for composite tokens
import cssInJsTokens from "most-design-system/tokens/css-in-js";
// Import the plugin function to be able to add your composite tokens
import plugin from "tailwindcss/plugin";

export default {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  // To completely replace the default values, for example, color, add the
  // tokens directly under the theme property. Here, for colors, we are also
  // adding two defaults back - "transparent" and "currentColor"
  theme: {
    colors: {
      transparent: "transparent",
      current: "currentColor",
      ...jsTokens.colors,
    },
  },
  // To add and use composite tokens, register them as new styles in
  // Tailwind's "utility" layer
  plugins: [
    plugin(({ addUtilities }) => {
      addUtilities(cssInJsTokens);
    }),
  ],
};

And start using most design tokens as Tailwind utility classes.

// src/App.jsx

function App() {
  return {
    <>
      <h1 className="text-orange-60 typography-label-10">Most Design System</h1>
    </>
  }
}

Components

Coming soon!

License

MIT