jellyfish_designtokens/dist/jellyfish/light.css

Ultimate design tokens from Jelly Fish Design System

/**
 * Do not edit directly
 * Generated on Wed, 30 Aug 2023 01:46:53 GMT
 */

:root, html[data-theme="light"] {
  --jf-component-dimension-xs3: 0.5rem;
  --jf-component-dimension-xs2: 1rem;
  --jf-component-dimension-xs: 1.25rem;
  --jf-component-dimension-sm: 1.5rem;
  --jf-component-dimension-md: 2rem;
  --jf-component-dimension-lg: 2.25rem;
  --jf-component-dimension-xl: 2.5rem;
  --jf-component-dimension-xl2: 2.75rem;
  --jf-component-dimension-xl3: 3rem;
  --jf-component-dimension-g: 3.5rem;
  --jf-component-dimension-xg: 4rem;
  --jf-component-dimension-xg2: 4.5rem;
  --jf-component-dimension-xg3: 5rem;
  --jf-component-dimension-none: 0rem;
  --jf-spacing-gap-xs2: 0.25rem;
  --jf-spacing-gap-xs: 0.5rem;
  --jf-spacing-gap-sm: 0.75rem;
  --jf-spacing-gap-md: 1rem;
  --jf-spacing-gap-lg: 1.25rem;
  --jf-spacing-gap-xl: 1.5rem;
  --jf-spacing-gap-xl2: 2rem;
  --jf-spacing-gap-xl3: 2.5rem;
  --jf-spacing-gap-g: 3.5rem;
  --jf-spacing-gap-none: 0rem;
  --jf-spacing-padding-xs3: 0.125rem;
  --jf-spacing-padding-xs2: 0.25rem;
  --jf-spacing-padding-xs: 0.5rem;
  --jf-spacing-padding-sm: 0.75rem;
  --jf-spacing-padding-md: 1rem;
  --jf-spacing-padding-lg: 1.25rem;
  --jf-spacing-padding-xl: 1.5rem;
  --jf-spacing-padding-xl2: 2rem;
  --jf-spacing-padding-xl3: 2.5rem;
  --jf-spacing-padding-g: 4rem;
  --jf-spacing-padding-xg: 4.5rem;
  --jf-spacing-padding-xg2: 7rem;
  --jf-spacing-padding-xg3: 8rem;
  --jf-spacing-padding-none: 0rem;
  --jf-spacing-margin-xs3: 0.125rem;
  --jf-spacing-margin-xs2: 0.25rem;
  --jf-spacing-margin-xs: 0.5rem;
  --jf-spacing-margin-sm: 0.75rem;
  --jf-spacing-margin-md: 1rem;
  --jf-spacing-margin-lg: 1.25rem;
  --jf-spacing-margin-xl: 1.5rem;
  --jf-spacing-margin-xl2: 2rem;
  --jf-spacing-margin-xl3: 2.5rem;
  --jf-spacing-margin-g: 4rem;
  --jf-spacing-margin-xg: 4.5rem;
  --jf-spacing-margin-xg2: 7rem;
  --jf-spacing-margin-xg3: 8rem;
  --jf-spacing-margin-none: 0rem;
  --jf-spacing-margin-paragraph-sm: 1rem;
  --jf-spacing-margin-paragraph-md: 1.25rem;
  --jf-spacing-margin-paragraph-lg: 1.5rem;
  --jf-spacing-margin-paragraph-none: 0;
  --jf-border-radius-shaped: 0;
  --jf-border-radius-rounded: 8px;
  --jf-border-radius-semi-rounded: 4px;
  --jf-border-radius-pill: 999px;
  --jf-border-radius-circle: 50%;
  --jf-border-width-default: 1px;
  --jf-border-width-skinny: 2px;
  --jf-border-width-medium: 4px;
  --jf-border-width-semi-bold: 6px;
  --jf-border-width-bold: 8px;
  --jf-opacity-state-dragged: 0.5;
  --jf-opacity-state-overlay: 0.8;
  --jf-opacity-state-disabled: 0.1;
  --jf-bg-modifier-amount-focus: 0.15;
  --jf-bg-modifier-amount-selected: 0.2;
  --jf-bg-modifier-amount-hover: 0.2;
  --jf-shadow-state-focus: 0 0 0 4px hsl(260 65.1% 90.2%);
  --jf-shadow-neutral-xs: 0 2px 8px -2px rgba(hsl(212 17.4% 8.09%) , 0.3);
  --jf-shadow-neutral-sm: 0 8px 16px -4px rgba(hsl(212 17.4% 8.09%) , 0.1);
  --jf-shadow-neutral-md: 0 4px 8px -4px rgba(hsl(212 17.4% 8.09%) , 0.1), 0 8px 16px 0 rgba(hsl(212 17.4% 8.09%) , 0.1);
  --jf-shadow-neutral-lg: 0 4px 12px -4px rgba(hsl(212 17.4% 8.09%), 0.16 ), 0 16px 32px 0 rgba(hsl(212 17.4% 8.09%), 0.12 );
  --jf-shadow-neutral-xl: 0 4px 4px 0 rgba(hsl(212 17.4% 8.09%), 0.08), 0 4px 24px 0 rgba(hsl(212 17.4% 8.09%), 0.08), 0 24px 24px 0 rgba(hsl(212 17.4% 8.09%), 0.04), 0 32px 32px 0 rgba(hsl(212 17.4% 8.09%), 0.04), 0 64px 64px 0 rgba(hsl(212 17.4% 8.09%), 0.08), 0 120px 120px 0 rgba(hsl(212 17.4% 8.09%), 0.04);
  --jf-shadow-neutral-inset: inset 0 2px 5px 0 rgba( hsl(212 17.4% 8.09%), 0.5), inset 0 4px 8px -2px rgba( hsl(212 17.4% 8.09%), 0.1);
  --jf-shadow-primary-xs: 0 2px 8px -2px rgba(hsl(260 65.1% 60.8%) , 1);
  --jf-shadow-primary-sm: 0 8px 16px -4px rgba(hsl(260 65.1% 60.8%) , 0.5);
  --jf-shadow-primary-md: 0 4px 12px -4px rgba(hsl(260 65.1% 60.8%) , 0.8), 0 8px 16px 0 rgba(hsl(260 65.1% 60.8%) , 0.5);
  --jf-shadow-primary-lg: 0 4px 12px -4px rgba(hsl(260 65.1% 60.8%), 0.8 ), 0 16px 32px 0 rgba(hsl(260 65.1% 60.8%), 0.5 );
  --jf-shadow-primary-xl: 0 4px 4px 0 rgba(hsl(260 65.1% 60.8%), 0.3), 0 4px 24px 0 rgba(hsl(260 65.1% 60.8%), 0.3), 0 24px 24px 0 rgba(hsl(260 65.1% 60.8%), 0.1), 0 32px 32px 0 rgba(hsl(260 65.1% 60.8%), 0.1), 0 64px 64px 0 rgba(hsl(260 65.1% 60.8%), 0.1), 0 120px 120px 0 rgba(hsl(260 65.1% 60.8%), 0.1);
  --jf-shadow-primary-inset: inset 0 2px 5px 0 rgba( hsl(260 65.1% 60.8%), 0.5), inset 0 4px 8px -2px rgba( hsl(260 65.1% 60.8%), 0.1);
  --jf-color-primary: #703DD6;
  --jf-color-secondary: #D63D96;
  --jf-color-success: hsl(94.9 65.1% 28%);
  --jf-color-critical: #F43D2A;
  --jf-color-warning: #D19A42;
  --jf-color-neutral: #75889E;
  --jf-color-white: #ffffff;
  --jf-color-black: #000000;
  --jf-color-bg-regular-default: hsl(212 17.4% 93.1%);
  --jf-color-bg-regular-alt: hsl(212 17.4% 83.9%);
  --jf-color-bg-regular-inverted: hsl(212 17.4% 13.5%);
  --jf-color-bg-regular-primary: hsl(260 65.1% 60.8%);
  --jf-color-bg-regular-secondary: #D63D96;
  --jf-color-bg-regular-success: hsl(94.9 65.1% 38.8%);
  --jf-color-bg-regular-critical: #F43D2A;
  --jf-color-bg-regular-warning: #D19A42;
  --jf-color-bg-subtle-default: hsl(212 17.4% 98.3%);
  --jf-color-bg-subtle-alt: hsl(212 17.4% 94.4%);
  --jf-color-bg-subtle-inverted: hsl(212 17.4% 78.4%);
  --jf-color-bg-subtle-primary: hsl(260 65.1% 90.2%);
  --jf-color-bg-subtle-secondary: hsl(325 65.1% 88.5%);
  --jf-color-bg-subtle-success: hsl(94.9 65.1% 84.7%);
  --jf-color-bg-subtle-critical: hsl(5.64 90.2% 89%);
  --jf-color-bg-subtle-warning: hsl(36.9 60.9% 88.5%);
  --jf-color-border-default: hsl(212 17.4% 18.9%);
  --jf-color-border-muted: lch(84.5 5.09 257);
  --jf-color-border-inverted: #ffffff;
  --jf-color-border-primary: #703DD6;
  --jf-color-border-secondary: #D63D96;
  --jf-color-border-success: hsl(94.9 65.1% 28%);
  --jf-color-border-critical: #F43D2A;
  --jf-color-border-warning: #D19A42;
  --jf-color-fg-default: hsl(212 17.4% 13.5%);
  --jf-color-fg-muted: hsl(212 17.4% 28%);
  --jf-color-fg-subtle: hsl(212 17.4% 45.8%);
  --jf-color-fg-inverted: #ffffff;
  --jf-color-fg-primary: hsl(260 65.1% 45.8%);
  --jf-color-fg-secondary: hsl(325 65.1% 45.8%);
  --jf-color-fg-success: hsl(94.9 65.1% 23.8%);
  --jf-color-fg-critical: hsl(5.64 90.2% 47.7%);
  --jf-color-fg-warning: hsl(36.9 60.9% 28%);
  --jf-color-fg-white: #ffffff;
  --jf-color-shadow-neutral: hsl(212 17.4% 8.09%);
  --jf-color-shadow-primary: hsl(260 65.1% 60.8%);
  --jf-font-family-brand: Poppins;
  --jf-font-family-plain: Poppins;
  --jf-font-family-alt: 'Fira Code';
  --jf-font-family-code: 'Fira Code';
  --jf-font-family-title: Poppins;
  --jf-font-family-display: Poppins;
  --jf-font-family-subtitle: Poppins;
  --jf-font-family-body: Poppins;
  --jf-font-family-label: Poppins;
  --jf-font-family-navigation: Poppins;
  --jf-font-size-display-lg-max: 8;
  --jf-font-size-display-lg-min: 2.5;
  --jf-font-size-display-lg-slope: 4;
  --jf-font-size-display-lg-yintersection: 1.6;
  --jf-font-size-display-lg-preferred: clamp(2.5rem, 1.6rem + 4vh ,8rem);
  --jf-font-size-display-md-max: 6;
  --jf-font-size-display-md-min: 2;
  --jf-font-size-display-md-slope: 2.909;
  --jf-font-size-display-md-yintersection: 1.345;
  --jf-font-size-display-md-preferred: clamp(2rem, 1.345rem + 2.909vh ,6rem);
  --jf-font-size-display-sm-max: 4;
  --jf-font-size-display-sm-min: 1.75;
  --jf-font-size-display-sm-slope: 1.636;
  --jf-font-size-display-sm-yintersection: 1.382;
  --jf-font-size-display-sm-preferred: clamp(1.75rem, 1.382rem + 1.636vh ,4rem);
  --jf-font-size-headline-lg-max: 3;
  --jf-font-size-headline-lg-min: 1.75;
  --jf-font-size-headline-lg-slope: 0.909;
  --jf-font-size-headline-lg-yintersection: 1.545;
  --jf-font-size-headline-lg-preferred: clamp(1.75rem, 1.545rem + 0.909vh ,3rem);
  --jf-font-size-headline-md-max: 2.5;
  --jf-font-size-headline-md-min: 1.5;
  --jf-font-size-headline-md-slope: 0.727;
  --jf-font-size-headline-md-yintersection: 1.336;
  --jf-font-size-headline-md-preferred: clamp(1.5rem, 1.336rem + 0.727vh ,2.5rem);
  --jf-font-size-headline-sm-max: 2;
  --jf-font-size-headline-sm-min: 1.25;
  --jf-font-size-headline-sm-slope: 0.545;
  --jf-font-size-headline-sm-yintersection: 1.127;
  --jf-font-size-headline-sm-preferred: clamp(1.25rem, 1.127rem + 0.545vh ,2rem);
  --jf-font-size-headline-xs-max: 1.75;
  --jf-font-size-headline-xs-min: 1;
  --jf-font-size-headline-xs-slope: 0.545;
  --jf-font-size-headline-xs-yintersection: 1.127;
  --jf-font-size-headline-xs-preferred: clamp(1.25rem, 1.127rem + 0.545vh ,2rem);
  --jf-font-size-body-lg: 1.25rem;
  --jf-font-size-body-md: 1rem;
  --jf-font-size-body-sm: 0.875rem;
  --jf-font-size-label-lg: 1rem;
  --jf-font-size-label-md: 0.875rem;
  --jf-font-size-label-sm: 0.75rem;
  --jf-font-line-height-headline-lg: 1;
  --jf-font-line-height-headline-md: 1;
  --jf-font-line-height-headline-sm: 1;
  --jf-font-line-height-display-lg: 1;
  --jf-font-line-height-display-md: 1;
  --jf-font-line-height-display-sm: 1;
  --jf-font-line-height-body-lg: 1.5;
  --jf-font-line-height-body-md: 1.8;
  --jf-font-line-height-body-sm: 1.8;
  --jf-font-line-height-subtitle-lg: 1.3;
  --jf-font-line-height-subtitle-md: 1.3;
  --jf-font-line-height-subtitle-sm: 1.3;
  --jf-font-line-height-navigation-lg: 1.5;
  --jf-font-line-height-navigation-md: 1.5;
  --jf-font-line-height-navigation-sm: 1.5;
  --jf-font-line-height-label-lg: 1.5;
  --jf-font-line-height-label-md: 1.8;
  --jf-font-line-height-label-sm: 1.8;
  --jf-font-letter-spacing-headline-lg: 0em;
  --jf-font-letter-spacing-headline-md: 0em;
  --jf-font-letter-spacing-headline-sm: 0em;
  --jf-font-letter-spacing-display-lg: 0em;
  --jf-font-letter-spacing-display-md: 0em;
  --jf-font-letter-spacing-display-sm: 0em;
  --jf-font-letter-spacing-body-lg: -0.05em;
  --jf-font-letter-spacing-body-md: -0.05em;
  --jf-font-letter-spacing-body-sm: -0.05em;
  --jf-font-letter-spacing-label-lg: -0.05em;
  --jf-font-letter-spacing-label-md: -0.05em;
  --jf-font-letter-spacing-label-sm: 0em;
  --jf-font-weight-display: 900;
  --jf-font-weight-title: 700;
  --jf-font-weight-subtitle: 400;
  --jf-font-weight-body-regular: 400;
  --jf-font-weight-body-medium: 500;
  --jf-font-weight-body-bold: 700;
  --jf-font-weight-caption: 400;
  --jf-font-weight-navigation: 500;
  --jf-font-weight-label: 500;
  --jf-font-case-display: uppercase;
  --jf-font-case-body: astyped;
  --jf-font-case-navigation: astyped;
  --jf-font-case-caption: astyped;
  --jf-font-case-label: astyped;
  --jf-font-case-subtitle: astyped;
  --jf-font-case-title: astyped;
}