most-design-system
v0.2.1
Published
A design system crafted for more retail's digital products
Downloads
7
Maintainers
Readme
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