highsoft-design-tokens

v2.7.0

Published

a month 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

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);
}

Using Animations

The package provides three animation types:

When to Use Each Type

Bounce: For playful effects, slides, and drawers
Fade: For smooth transitions and overlays
Classic: For standard UI transitions

Usage Examples

/* Button hover with bounce animation */
button:hover {
  transform: translateY(-2px);
  animation: var(--animations-bounce-fast);
}

/* Modal fade in/out */
.modal {
  opacity: 0;
  animation: var(--animations-fade-default);
}

/* Menu slide animation */
.menu {
  transform: translateX(-100%);
  animation: var(--animations-classic-default);
}

Using Links

The package provides a link mixin that can be used to style links with either a native or fancy appearance.

Usage

@use "highsoft-design-tokens/dist/scss/mixins/links" as *;

// Native link style (default)
a {
  @include link();
}

// Fancy link style with gradient underline
a.fancy {
  @include link(fancy);
}

Using Breakpoint Mixins

Use the breakpoint mixin to apply responsive styles with sizes phone, tablet, laptop, desktop, and desktop-plus. Each breakpoint uses a max-width media query to apply styles for that screen size and below:

@use "highsoft-design-tokens/dist/scss/mixins/breakpoints" as *;

.element {
  @include for-size(phone) {
    width: 100%;
  }
  @include for-size(tablet) {
    width: 50%;
  }
  @include for-size(laptop) {
    width: 33%;
  }
}

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

Animations

animations-bounce-instant: 0.1s cubic-bezier(0.6, 1, 0.2, 1.2)
animations-bounce-fast: 0.2s cubic-bezier(0.6, 1, 0.2, 1.2)
animations-bounce-default: 0.3s cubic-bezier(0.6, 1, 0.2, 1.2)
animations-bounce-slow: 0.4s cubic-bezier(0.6, 1, 0.2, 1.2)
animations-bounce-long: 0.5s cubic-bezier(0.6, 1, 0.2, 1.2)
animations-fade-instant: 0.1s cubic-bezier(0.85, 0, 0.15, 1)
animations-fade-fast: 0.2s cubic-bezier(0.85, 0, 0.15, 1)
animations-fade-default: 0.3s cubic-bezier(0.85, 0, 0.15, 1)
animations-fade-slow: 0.4s cubic-bezier(0.85, 0, 0.15, 1)
animations-fade-long: 0.5s cubic-bezier(0.85, 0, 0.15, 1)
animations-classic-instant: 0.1s cubic-bezier(0.65, 0, 0.35, 1)
animations-classic-fast: 0.2s cubic-bezier(0.65, 0, 0.35, 1)
animations-classic-default: 0.3s cubic-bezier(0.65, 0, 0.35, 1)
animations-classic-slow: 0.4s cubic-bezier(0.65, 0, 0.35, 1)
animations-classic-long: 0.5s cubic-bezier(0.65, 0, 0.35, 1)

Primitives

primitives-neutral-0: #FFFFFF
primitives-neutral-25: #F7F7F8
primitives-neutral-50: #F2F1F4
primitives-neutral-100: #E3E3E8
primitives-neutral-200: #C8C7D1
primitives-neutral-300: #ACABBA
primitives-neutral-400: #918FA3
primitives-neutral-500: #75738C
primitives-neutral-600: #5E5C70
primitives-neutral-700: #474554
primitives-neutral-750: #3B3A46
primitives-neutral-800: #2F2E38
primitives-neutral-900: #18171C
primitives-neutral-950: #0A090D
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: #626BD0
primitives-brand-700: #4A55C9
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)