@loadsmart/miranda-tokens/dist/tokens/web/loadsmart/variables.css

Design tokens for the Miranda Design System

/**
 * Do not edit directly, this file was auto-generated.
 */

:root {
  --m-brand-color-brand: 20, 214, 77; /* rgb(20, 214, 77) */
  --m-brand-color-brand-accent-1: 0, 215, 215; /* rgb(0, 215, 215) */
  --m-brand-color-brand-accent-2: 132, 241, 30; /* rgb(132, 241, 30) */
  --m-border-radius-none: 0px;
  --m-border-radius-s: 4px;
  --m-border-radius-m: 8px;
  --m-border-radius-l: 16px;
  --m-border-radius-circle: 50%;
  --m-border-none: 0;
  --m-border-thin: 1px;
  --m-border-medium: 2px;
  --m-border-thick: 4px;
  --m-color-primary-20: 202, 219, 221; /* rgb(202, 219, 221) */
  --m-color-primary-60: 0, 84, 84; /* rgb(0, 84, 84) */
  --m-color-primary-100: 0, 51, 51; /* rgb(0, 51, 51) */
  --m-color-accent-20: 229, 245, 255; /* rgb(229, 245, 255) */
  --m-color-accent-60: 0, 98, 159; /* rgb(0, 98, 159) */
  --m-color-accent-100: 15, 66, 97; /* rgb(15, 66, 97) */
  --m-color-neutral-0: 252, 252, 255; /* rgb(252, 252, 255) */
  --m-color-neutral-10: 248, 249, 251; /* rgb(248, 249, 251) */
  --m-color-neutral-20: 230, 237, 242; /* rgb(230, 237, 242) */
  --m-color-neutral-40: 193, 206, 217; /* rgb(193, 206, 217) */
  --m-color-neutral-60: 94, 118, 138; /* rgb(94, 118, 138) */
  --m-color-neutral-80: 92, 106, 118; /* rgb(92, 106, 118) */
  --m-color-neutral-90: 61, 74, 85; /* rgb(61, 74, 85) */
  --m-color-neutral-100: 32, 41, 49; /* rgb(32, 41, 49) */
  --m-color-success-20: 227, 247, 239; /* rgb(227, 247, 239) */
  --m-color-success-60: 3, 124, 94; /* rgb(3, 124, 94) */
  --m-color-success-100: 0, 94, 71; /* rgb(0, 94, 71) */
  --m-color-danger-20: 255, 233, 230; /* rgb(255, 233, 230) */
  --m-color-danger-60: 186, 27, 27; /* rgb(186, 27, 27) */
  --m-color-danger-100: 104, 0, 3; /* rgb(104, 0, 3) */
  --m-color-warning-20: 255, 243, 214; /* rgb(255, 243, 214) */
  --m-color-warning-60: 248, 182, 14; /* rgb(248, 182, 14) */
  --m-color-warning-100: 102, 63, 25; /* rgb(102, 63, 25) */
  --m-font-size-1: 0.625rem; /* 10px */
  --m-font-size-2: 0.75rem; /* 12px */
  --m-font-size-3: 0.875rem; /* 14px */
  --m-font-size-4: 1rem; /* 16px */
  --m-font-size-5: 1.25rem; /* 20px */
  --m-font-size-6: 1.625rem; /* 26px */
  --m-font-size-7: 2.375rem; /* 38px */
  --m-font-size-8: 3rem; /* 48px */
  --m-font-size-9: 3.625rem; /* 58px */
  --m-font-weight-regular: 500;
  --m-font-weight-medium: 600;
  --m-font-weight-bold: 700;
  --m-line-height-1: 100%;
  --m-line-height-2: 125%;
  --m-line-height-3: 130%;
  --m-line-height-4: 140%;
  --m-line-height-5: 150%;
  --m-line-height-6: 180%;
  --m-global-height-small: 1.75rem; /* 28px */
  --m-global-height-default: 2.5rem; /* 40px */
  --m-global-height-large: 3rem; /* 48px */
  --m-media-screen-desktop: 1025px;
  --m-media-screen-tablet: 481px;
  --m-opacity-0: 0%;
  --m-opacity-20: 20%;
  --m-opacity-40: 40%;
  --m-opacity-60: 60%;
  --m-opacity-100: 100%;
  --m-elevation-1: 0px 0px 2px rgba(94, 118, 138, 0.1), 0px 1px 6px 2px rgba(61, 74, 85, 0.15);
  --m-elevation-2: 0px 1px 3px rgba(94, 118, 138, 0.2), 0px 4px 8px 3px rgba(61, 74, 85, 0.15);
  --m-elevation-3: 0px 0px 4px rgba(94, 118, 138, 0.2), 0px 6px 12px 6px rgba(61, 74, 85, 0.15);
  --m-elevation-4: 0px 5px 6px 4px rgba(94, 118, 138, 0.2), 0px 8px 10px rgba(61, 74, 85, 0.1);
  --m-glow-primary: 0.0px 0.0px 4.0px 0px rgba(3, 124, 94, .5);
  --m-glow-warning: 0.0px 0.0px 4.0px 0px rgba(255, 206, 79, 1.0);
  --m-spacing-1: 4px;
  --m-spacing-2: 8px;
  --m-spacing-3: 12px;
  --m-spacing-4: 16px;
  --m-spacing-5: 20px;
  --m-spacing-6: 24px;
  --m-spacing-8: 32px;
  --m-spacing-10: 40px;
  --m-spacing-12: 48px;
  --m-spacing-14: 56px;
  --m-spacing-16: 64px;
  --m-spacing-20: 80px;
  --m-spacing-30: 120px;
  --m-spacing-0-5: 2px;
  --m-platform-font-default: 'Manrope', sans-serif;
  --m-platform-font-title: 'Plus Jakarta Sans', 'Manrope', sans-serif;
  --m-color-background-primary: var(--m-color-neutral-0);
  --m-color-background-secondary: var(--m-color-neutral-10);
  --m-color-background-tertiary: var(--m-color-neutral-20);
  --m-color-background-highlight: var(--m-color-primary-20);
  --m-color-background-inverted: var(--m-color-neutral-100);
  --m-color-background-secondary-inverted: var(--m-color-neutral-90);
  --m-color-border-input: var(--m-color-neutral-40);
  --m-color-border: var(--m-color-neutral-20);
  --m-color-divider: var(--m-color-neutral-20);
  --m-color-brand: var(--m-brand-color-brand);
  --m-color-brand-accent-1: var(--m-brand-color-brand-accent-1);
  --m-color-brand-accent-2: var(--m-brand-color-brand-accent-2);
  --m-color-text-primary: var(--m-color-neutral-100);
  --m-color-text-secondary: var(--m-color-neutral-90);
  --m-color-text-tertiary: var(--m-color-neutral-80);
  --m-color-text-placeholder: var(--m-color-neutral-60);
  --m-color-text-disabled: var(--m-color-neutral-40);
  --m-color-text-inverted: var(--m-color-neutral-0);
  --m-color-text-secondary-inverted: var(--m-color-neutral-40);
  --m-color-text-error: var(--m-color-danger-60);
  --m-color-text-highlight: var(--m-color-accent-60);
  --m-color-text-link: var(--m-color-primary-60);
  --m-font-family-default: var(--m-platform-font-default);
  --m-font-family-title: var(--m-platform-font-title);
}