@nudge-coach/tokens/build/web/variables.css

Tokens for the Nudge Coach design system.

/**
 * Do not edit directly
 * Generated on Wed, 23 Nov 2022 16:52:38 GMT
 */

:root {
  --theme-color-highlight-lightness: 65%;
  --theme-color-highlight-saturation: 83%;
  --theme-color-highlight-hue: 223;
  --core-size-32: 256px;
  --core-size-31: 248px;
  --core-size-30: 240px;
  --core-size-29: 232px;
  --core-size-28: 224px;
  --core-size-27: 216px;
  --core-size-26: 208px;
  --core-size-25: 200px;
  --core-size-24: 192px;
  --core-size-23: 184px;
  --core-size-22: 176px;
  --core-size-21: 168px;
  --core-size-20: 160px;
  --core-size-19: 152px;
  --core-size-18: 144px;
  --core-size-17: 136px;
  --core-size-16: 128px;
  --core-size-15: 120px;
  --core-size-14: 112px;
  --core-size-13: 104px;
  --core-size-12: 96px;
  --core-size-11: 88px;
  --core-size-10: 80px;
  --core-size-9: 72px;
  --core-size-8: 64px;
  --core-size-7: 56px;
  --core-size-6: 48px;
  --core-size-5: 40px;
  --core-size-4: 32px;
  --core-size-3: 24px;
  --core-size-2: 16px;
  --core-size-1: 8px;
  --core-size-0: 4px;
  --core-font-weight-3: 800;
  --core-font-weight-2: 500;
  --core-font-weight-1: 400;
  --core-font-size-3: 20px;
  --core-font-size-2: 16px;
  --core-font-size-1: 13px;
  --core-color-black-alpha-05: rgba(0,0,0,.025);
  --core-color-black-alpha-00: rgba(0,0,0,0);
  --core-color-black-alpha-50: rgba(0,0,0,.25);
  --core-color-black-alpha-40: rgba(0,0,0,.2);
  --core-color-black-alpha-30: rgba(0,0,0,.15);
  --core-color-black-alpha-20: rgba(0,0,0,.1);
  --core-color-black-alpha-10: rgba(0,0,0,.05);
  --core-color-blue: #5983F0;
  --core-color-green: #66BB66;
  --core-color-yellow: #FEDF63;
  --core-color-orange: #FF7744;
  --core-color-red: #EE4444;
  --core-color-grayscale-16: rgb(20,20,20);
  --core-color-grayscale-15: rgb(35,35,35);
  --core-color-grayscale-14: rgb(50,50,50);
  --core-color-grayscale-13: rgb(65,65,65);
  --core-color-grayscale-12: rgb(80,80,80);
  --core-color-grayscale-11: rgb(95,95,95);
  --core-color-grayscale-10: rgb(110,110,110);
  --core-color-grayscale-9: rgb(125,125,125);
  --core-color-grayscale-8: rgb(140,140,140);
  --core-color-grayscale-7: rgb(155,155,155);
  --core-color-grayscale-6: rgb(170,170,170);
  --core-color-grayscale-5: rgb(185,185,185);
  --core-color-grayscale-4: rgb(200,200,200);
  --core-color-grayscale-3: rgb(215,215,215);
  --core-color-grayscale-2: rgb(230,230,230);
  --core-color-grayscale-1: rgb(245,245,245);
  --core-color-grayscale-0: rgb(255,255,255);
  --core-color-white: #FFFFFF;
  --core-color-black: #000000;
  --platform-font-family: Inter;
  --core-font-family: var(--platform-font-family);
  --core-color-highlight: hsl(var(--theme-color-highlight-hue), var(--theme-color-highlight-saturation), var(--theme-color-highlight-lightness));
  --component-modal-color-background-shade: var(--core-color-black-alpha-30);
  --component-input-color-background-disabled: var(--core-color-black-alpha-10);
  --component-navigation-size-header-height: var(--core-size-8);
  --component-navigation-color-background-selected: var(--core-color-black-alpha-20);
  --component-navigation-color-background-hovered: var(--core-color-black-alpha-10);
  --component-navigation-color-background-default: var(--core-color-black-alpha-00);
  --component-action-size-minimal: var(--core-size-4);
  --component-action-size-default: var(--core-size-5);
  --component-action-color-background-hover-destructive: #eb1f1f;
  --component-action-color-background-hover-highlight: hsl(var(--theme-color-highlight-hue), var(--theme-color-highlight-saturation), calc(var(--theme-color-highlight-lightness) - 5%));
  --component-action-color-background-hover-transparent: var(--core-color-black-alpha-10);
  --semantic-spacing-large: var(--core-size-8);
  --semantic-spacing-base: var(--core-size-5); /* This is the same size as the height of a standard button. */
  --semantic-spacing-medium: var(--core-size-3);
  --semantic-spacing-small: var(--core-size-2);
  --semantic-spacing-tiny: var(--core-size-1);
  --semantic-spacing-minimal: var(--core-size-0);
  --semantic-radius-large: var(--core-size-2);
  --semantic-radius-medium: var(--core-size-1);
  --semantic-radius-small: var(--core-size-0);
  --semantic-shadow-elevation-three: 0px 3px 6px 0px var(--core-color-black-alpha-50);
  --semantic-shadow-elevation-two: 0px 2px 4px 0px var(--core-color-black-alpha-50);
  --semantic-shadow-elevation-one: 0px 1px 3px 0px var(--core-color-black-alpha-50);
  --semantic-text-color-contrast: var(--core-color-white);
  --semantic-text-color-success: var(--core-color-green);
  --semantic-text-color-destructive: var(--core-color-red);
  --semantic-text-color-critical: var(--core-color-red);
  --semantic-text-color-secondary: var(--core-color-grayscale-8);
  --semantic-text-color-primary: var(--core-color-black);
  --semantic-icon-size-default: var(--core-size-3);
  --semantic-icon-color-contrast: var(--core-color-white);
  --semantic-icon-color-secondary: var(--core-color-grayscale-8);
  --semantic-icon-color-primary: var(--core-color-black);
  --semantic-border-color-default: var(--core-color-black-alpha-30);
  --semantic-background-success: var(--core-color-green);
  --semantic-background-warning: var(--core-color-yellow);
  --semantic-background-destructive: var(--core-color-red);
  --semantic-background-contrast: var(--core-color-black);
  --semantic-background-shade: var(--core-color-black-alpha-20);
  --semantic-background-layer-4: var(--core-color-grayscale-4);
  --semantic-background-layer-3: var(--core-color-grayscale-3);
  --semantic-background-layer-2: var(--core-color-grayscale-2);
  --semantic-background-layer-1: var(--core-color-grayscale-1);
  --semantic-background-layer-0: var(--core-color-grayscale-0);
  --component-label-size-margin: var(--semantic-spacing-tiny);
  --component-label-color-disabled: var(--semantic-text-color-secondary);
  --component-label-color-default: var(--semantic-text-color-primary);
  --component-input-size-padding: var(--semantic-spacing-small);
  --component-input-size-height: var(--component-action-size-default);
  --component-input-color-background-default: var(--semantic-background-layer-0);
  --component-navigation-color-text-selected: var(--semantic-text-color-primary);
  --component-navigation-color-text-hovered: var(--semantic-text-color-secondary);
  --component-navigation-color-text-default: var(--semantic-text-color-secondary);
  --component-navigation-color-icon-selected: var(--semantic-icon-color-primary);
  --component-navigation-color-icon-hovered: var(--semantic-icon-color-primary);
  --component-navigation-color-icon-default: var(--semantic-icon-color-primary);
  --semantic-text-styles-large: var(--core-font-weight-3) var(--core-font-size-3) var(--core-font-family);
  --semantic-text-styles-medium: var(--core-font-weight-2) var(--core-font-size-2) var(--core-font-family);
  --semantic-text-styles-default: var(--core-font-weight-1) var(--core-font-size-2) var(--core-font-family);
  --semantic-text-styles-small: var(--core-font-weight-1) var(--core-font-size-1) var(--core-font-family);
  --semantic-text-color-highlight: var(--core-color-highlight);
  --semantic-icon-color-highlight: var(--core-color-highlight);
  --semantic-background-highlight: var(--core-color-highlight);
  --component-label-style: var(--semantic-text-styles-medium);
}