highsoft-design-tokens

v2.0.0

Published

5 months ago

This package ensures a seamless integration of design principles into your codebase, making your development process more efficient and your end product more cohesive and visually appealing

Downloads

0High
0Medium
0Low

kennethknudsen

👨🏼‍🎨 Highsoft Design Tokens

cover This package provides a comprehensive set of CSS custom properties (variables) derived from our design system, ensuring a seamless integration of design principles into your codebase. This approach makes your development process more efficient and your end product more cohesive and visually appealing.

Figma resources

You can find the design tokens in the following Figma files (you need to be logged in with SSO to access them)

🎨 Color system (Figma) 🔠 Typography (Figma) 🪄 Effects (Figma)

Installation

To install this package, run the following command:

npm install highsoft-design-tokens --save

Using a CSS preprocessor like Sass, or a module bundler like Webpack, you can import the CSS file directly into your CSS/Sass files:

@import "highsoft-design-tokens/dist/css/tokens";

You need to add the --load-path=node_modules option to your Sass command. This directs Sass to look inside the node_modules directory for any @import statements.

"css-compile": "sass --load-path=node_modules //the rest of your code goes here"

Using CSS Variables

The package contains a set of predefined CSS custom properties encapsulated within the :root selector. This makes them globally available across your entire application. You can use them in your CSS/Sass files like this:

body {
  background-color: var(--primitives-brand-600);
  color: var(--primitives-neutral-900);
}

button {
  background-color: var(--primitives-success-500);
  border-radius: var(--border_radius-size-4);
}

Bugs and feature requests

Please use [GitHub issues] to report bugs or request features. If you have any questions about the tokens, please contact @kennethknudsen

All tokens

Primitives

primitives-neutral-0: #FFFFFF
primitives-neutral-25: #F6F6F8
primitives-neutral-50: #F1F1F3
primitives-neutral-100: #E3E2E8
primitives-neutral-200: #C8C7D1
primitives-neutral-300: #ACABBA
primitives-neutral-400: #908EA3
primitives-neutral-500: #75728C
primitives-neutral-600: #5D5B70
primitives-neutral-700: #464553
primitives-neutral-800: #2F2E37
primitives-neutral-900: #17171B
primitives-neutral-1000: #000000
primitives-brand-50: #F6F8FF
primitives-brand-100: #F0F1FF
primitives-brand-200: #E1E3FF
primitives-brand-300: #C3C8FF
primitives-brand-400: #A5ACFF
primitives-brand-500: #8791FF
primitives-brand-600: #6975FF
primitives-brand-700: #545ECC
primitives-brand-800: #3F4699
primitives-brand-900: #2A2F66
primitives-brand-1000: #151733
primitives-success-50: #ECFDF5
primitives-success-100: #D1FAE5
primitives-success-200: #A7F3D0
primitives-success-300: #6EE7B7
primitives-success-400: #34D399
primitives-success-500: #10B981
primitives-success-600: #059669
primitives-success-700: #047857
primitives-success-800: #065F46
primitives-success-900: #064E3B
primitives-success-1000: #033427
primitives-attention-50: #FFFBEB
primitives-attention-100: #FEF3C7
primitives-attention-200: #FDE68A
primitives-attention-300: #FCD34D
primitives-attention-400: #FBBF24
primitives-attention-500: #F59E0B
primitives-attention-600: #D97706
primitives-attention-700: #B45309
primitives-attention-800: #92400E
primitives-attention-900: #78350F
primitives-attention-1000: #592507
primitives-danger-50: #FEF2F2
primitives-danger-100: #FEE2E2
primitives-danger-200: #FECACA
primitives-danger-300: #FCA5A5
primitives-danger-400: #F87171
primitives-danger-500: #EF4444
primitives-danger-600: #DC2626
primitives-danger-700: #B91C1C
primitives-danger-800: #991B1B
primitives-danger-900: #7F1D1D
primitives-danger-1000: #570D0D

Shadow

shadow-size-50: 0px 0px 1px 0px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(0, 0, 0, 0.09), 0px 3px 2px 0px rgba(0, 0, 0, 0.05), 0px 6px 2px 0px rgba(0, 0, 0, 0.01)
shadow-size-100: 0px 1px 2px 0px rgba(0, 0, 0, 0.06), 0px 3px 3px 0px rgba(0, 0, 0, 0.05), 0px 7px 4px 0px rgba(0, 0, 0, 0.03), 0px 13px 5px 0px rgba(0, 0, 0, 0.01)
shadow-size-200: 0px 1px 2px 0px rgba(0, 0, 0, 0.08), 0px 4px 4px 0px rgba(0, 0, 0, 0.07), 0px 10px 6px 0px rgba(0, 0, 0, 0.04), 0px 18px 7px 0px rgba(0, 0, 0, 0.01)
shadow-size-300: 0px 2px 4px 0px rgba(0, 0, 0, 0.08), 0px 7px 7px 0px rgba(0, 0, 0, 0.07), 0px 17px 10px 0px rgba(0, 0, 0, 0.04), 0px 30px 12px 0px rgba(0, 0, 0, 0.01)