:host, :root { /* ===================== */ /* PRIMITIVES */ /* ===================== */ /* COLORS */ /* White */ --ff-color-white: #ffffff; /* Black */ --ff-color-black: #030712; --ff-color-black-1: #fcfcfd; --ff-color-black-5: #f8fafc; --ff-color-black-10: #f1f5f9; --ff-color-black-20: #e2e8f0; --ff-color-black-30: #cad5e2; --ff-color-black-40: #90a1b9; --ff-color-black-50: #62748e; --ff-color-black-60: #45556c; --ff-color-black-70: #314158; --ff-color-black-80: #1d293d; --ff-color-black-90: #0f172b; /* Primary */ --ff-color-primary: var(--ff-color-primary-70); --ff-color-primary-70: #1447e6; --ff-color-primary-30: #8ec5ff; /* Secondary */ --ff-color-secondary: var(--ff-color-secondary-60); --ff-color-secondary-60: #f54900; --ff-color-secondary-30: #ffb86a; /* Accent */ --ff-color-accent: var(--ff-color-accent-60); --ff-color-accent-60: #c800de; --ff-color-accent-30: #f4a8ff; /* Error */ --ff-color-error: var(--ff-color-error-70); --ff-color-error-70: #c10007; --ff-color-error-30: #ffa1ad; /* Success */ --ff-color-success: var(--ff-color-success-70); --ff-color-success-70: #008236; --ff-color-success-30: #7bf1a8; /* Warning */ --ff-color-warning: var(--ff-color-warning-40); --ff-color-warning-40: #fdc700; --ff-color-warning-20: #fee685; /* Info */ --ff-color-info: var(--ff-color-info-40); --ff-color-info-40: #00d3f2; --ff-color-info-25: #a2f4fd; /* TYPOGRAPHY */ /*FIXME - adjust accordingly */ /* Font Family */ --ff-font-family-text: "Inter"; /* Font Weights */ --ff-font-weight-bold: 700; --ff-font-weight-semibold: 600; --ff-font-weight-regular: 400; /* Font Sizes */ --ff-font-size-xxsmall: 0.625rem; /* 10px */ --ff-font-size-xsmall: 0.75rem; /* 12px */ --ff-font-size-small: 0.875rem; /* 14px */ --ff-font-size-medium: 1rem; /* 16px */ --ff-font-size-large: 1.125rem; /* 18px */ --ff-font-size-xlarge: 1.25rem; /* 20px */ --ff-font-size-xxlarge: 1.5rem; /* 24px */ --ff-font-size-p: var(--ff-font-size-medium); --ff-font-size-h6: 1.125rem; --ff-font-size-h5: 1.25rem; --ff-font-size-h4: 1.44rem; --ff-font-size-h3: 1.75rem; --ff-font-size-h2: 2.44rem; --ff-font-size-h1: 3rem; --ff-font-size-stage: 3.5rem; /* Line Heights */ --ff-line-height-xxsmall: 1rem; /* 16px */ --ff-line-height-xsmall: 1rem; /* 16px */ --ff-line-height-small: 1.25rem; /* 20px */ --ff-line-height-medium: 1.5rem; /* 24px */ --ff-line-height-large: 1.75rem; /* 28px */ --ff-line-height-xlarge: 2rem; /* 32px */ --ff-line-height-xxlarge: 2.25rem; /* 36px */ /*REVIEW - no new value to replace */ --ff-line-height-p: var(--ff-line-height-medium); --ff-line-height-h6: 1.75rem; /* 28px */ --ff-line-height-h5: 1.75rem; /* 28px */ --ff-line-height-h4: 2rem ; /* 32px */ --ff-line-height-h3: 2.5rem; /* 40px */ --ff-line-height-h2: 3rem; /* 48px */ --ff-line-height-h1: 3.5rem; /* 56px */ --ff-line-height-stage: 4rem; /* 64px */ /* DIMENSION */ /* Border */ --ff-border-radius-1: 0.25rem; --ff-border-radius-2: 0.5rem; --ff-border-radius-0: 0rem; /* 0px */ --ff-border-radius-05: 0.125rem; /* 2px */ --ff-border-radius-1000: 62.5rem; /* Spacing */ --ff-spacing-1: 0.25rem; /* 4px */ --ff-spacing-2: 0.5rem; /* 8px */ --ff-spacing-3: 0.75rem; /* 12px */ --ff-spacing-4: 1rem; /* 16px */ --ff-spacing-5: 1.25rem; /* 20px */ --ff-spacing-6: 1.5rem; /* 24px */ --ff-spacing-7: 1.75rem; /* 28px */ --ff-spacing-8: 2rem; /* 32px */ --ff-spacing-9: 2.25rem; /* 36px */ --ff-spacing-10: 2.5rem; /* 40px */ --ff-spacing-12: 3rem; /* 48px */ --ff-spacing-14: 3.5rem; /* 56px */ --ff-spacing-16: 4rem; /* 64px */ --ff-spacing-18: 4.5rem; /* 72px */ --ff-spacing-20: 5rem; /* 80px */ /* Opacities */ --ff-opacity-disabled: 0.4; --ff-opacity-fog: 0.5; --ff-fog-color: light-dark(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5)); --ff-fog-blur: 8px; --ff-list-hanging-indentation: 0; --ff-focus-offset: 0.125rem; /* 2px */ --ff-focus-width: 0.1875rem; /* 3px */ --ff-color-overlay: light-dark(var(--ff-color-white), var(--ff-color-black-90)); --ff-color-background-section: light-dark(var(--ff-color-white), var(--ff-color-black)); --ff-color-background-component: light-dark(var(--ff-color-white), var(--ff-color-black)); /* Typography */ --ff-color-headline: light-dark(var(--ff-color-black), var(--ff-color-black-5)); --ff-color-text: light-dark(var(--ff-color-black), var(--ff-color-black-5)); --ff-color-text-inverted: light-dark(var(--ff-color-black-5), var(--ff-color-black)); --ff-color-text-muted: light-dark(var(--ff-color-black-70), var(--ff-color-black-30)); --ff-color-text-error: light-dark(var(--ff-color-error), var(--ff-color-error-30)); --ff-color-text-success: light-dark(var(--ff-color-success), var(--ff-color-success-30)); --ff-inputfield-color-background: light-dark(var(--ff-color-white), var(--ff-color-black)); --ff-inputfield-color-border: light-dark(var(--ff-color-black-40), var(--ff-color-black-60)); /* Interaction */ --ff-interaction-color-focus-ring: light-dark(var(--ff-color-primary), var(--ff-color-primary-30)); --ff-interaction-color-background-active: light-dark(rgba(0, 0, 80, 0.07), rgba(255, 255, 255, 0.1)); --ff-interaction-color-background-focus: light-dark(var(--ff-color-primary), var(--ff-color-primary-30)); --ff-interaction-color-background-hover: light-dark(rgba(0, 0, 80, 0.05), rgba(255, 255, 255, 0.1)); --ff-interaction-color-decoration: light-dark(var(--ff-color-primary), var(--ff-color-primary-30)); --ff-interaction-color-decoration-mono: light-dark(var(--ff-color-black-90), var(--ff-color-black-10)); --ff-interaction-color-icon: light-dark(var(--ff-color-primary), var(--ff-color-primary)); --ff-interaction-color-icon-mono-active: light-dark(var(--ff-color-black), var(--ff-color-white)); --ff-interaction-color-icon-mono-default: light-dark(var(--ff-color-black-90), var(--ff-color-black-10)); --ff-interaction-color-icon-mono-focus: light-dark(var(--ff-color-white), var(--ff-color-white)); /* if focus background is applied */ --ff-interaction-color-icon-mono-hover: light-dark(var(--ff-color-black), var(--ff-color-white)); --ff-interaction-color-icon-muted: var(--ff-color-text-muted); --ff-interaction-color-text-active: light-dark(var(--ff-color-black), var(--ff-color-white)); --ff-interaction-color-text-default: var(--ff-color-text); --ff-interaction-color-text-focus: light-dark(var(--ff-color-white), var(--ff-color-black));; /* if focus background is applied */ --ff-interaction-color-text-hover: light-dark(var(--ff-color-black), var(--ff-color-white)); --ff-grid-container-max-width: 1560px; --ff-grid-gutter: var(--ff-spacing-6); --ff-grid-margin: var(--ff-spacing-15); --device-width: 1920px; /* Component Border Radius Variables */ --ff-component-border-radius-small: var(--ff-border-radius-05); --ff-component-border-radius-medium: var(--ff-border-radius-1); /* Component Padding Variables */ --ff-component-medium-padding-x: var(--ff-spacing-4); /*16px*/ --ff-component-small-padding-x: var(--ff-spacing-2); /*8px*/ --ff-component-medium-padding-y: var(--ff-spacing-2); /*8px*/ --ff-component-small-padding-y: var(--ff-spacing-1); /*4px*/ --ff-color-border-component: light-dark(var(--ff-color-black-20), var(--ff-color-black-70)); /* Buttons */ --ff-interaction-color-text-primary: light-dark(var(--ff-color-white), var(--ff-color-black)); --ff-interaction-color-background-primary: light-dark(var(--ff-color-black), var(--ff-color-white)); --ff-interaction-color-text-cta: light-dark(var(--ff-color-white), var(--ff-color-black)); --ff-interaction-color-background-cta: light-dark(var(--ff-color-primary), var(--ff-color-primary-30)); /* Inputfields */ /* Elevation */ --elevation-flat-color-spread: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05)); --elevation-notifications-color-spread: light-dark(rgba(0, 0, 80, 0.03), rgba(0, 0, 80, 0.05)); --elevation-raised-color-spread: light-dark(rgba(0, 0, 80, 0.03), rgba(0, 0, 80, 0.05)); --elevation-navigation-color-spread: light-dark(rgba(0, 0, 80, 0.02), rgba(0, 0, 80, 0.07)); --elevation-popover-color-spread: light-dark(rgba(0, 0, 80, 0.01), rgba(0, 0, 80, 0.1)); --elevation-popover-color-shadow: light-dark(rgba(0, 0, 80, 0.1), rgba(0, 0, 80, 0.25)); --elevation-raised-color-shadow: light-dark(rgba(0, 0, 80, 0.05), rgba(0, 0, 80, 0.2)); --elevation-navigation-color-shadow: light-dark(rgba(0, 0, 80, 0.07), rgba(0, 0, 80, 0.2)); --elevation-notifications-color-shadow: light-dark(rgba(0, 0, 80, 0.04), rgba(0, 0, 80, 0.2)); --ff-color-border-tint: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)); --ff-color-background-component: light-dark(#ffffff, #000000); /* Viewport & Typography */ /* SHADOWS */ --ff-shadow-flat: var(--ff-shadow-1); --ff-shadow-notifications: var(--ff-shadow-2); --ff-shadow-raised: var(--ff-shadow-3); --ff-shadow-navigation: var(--ff-shadow-4); --ff-shadow-popover: var(--ff-shadow-5); /* Aspect Ratios */ --ff-aspect-ratio-square: 1; --ff-aspect-ratio-portrait: 4/5; --ff-aspect-ratio-landscape: 3/2; --ff-aspect-ratio-video: 16/9; --ff-aspect-ratio-panorama: 21/9; /* Links */ --ff-link-underline-thickness-1: 0.0625em; /* 1px */ --ff-link-underline-thickness-2: 0.125em; /* 2px */ --ff-link-underline-offset: 0.4em; --ff-link-underline-color: var(--ff-interaction-color-decoration); /* Discuss: Elevation ? */ /* Transition */ --ff-transition-base-duration: 300ms; --ff-transition-base-easing: ease-in-out; --ff-transition-base: var(--ff-transition-base-duration) var(--ff-transition-base-easing); --ff-transition-fade-duration: calc(var(--ff-transition-base-duration) * 0.7); --ff-transition-fade-easing: ease-out; --ff-transition-fade: var(--ff-transition-fade-duration) var(--ff-transition-fade-easing); --ff-transition-slide-duration: calc(var(--ff-transition-base-duration) * 1.5); --ff-transition-slide-easing: ease; --ff-transition-slide: var(--ff-transition-slide-duration) var(--ff-transition-slide-easing); --ff-transition-move-duration: calc(var(--ff-transition-base-duration) * 0.8); --ff-transition-move-easing: ease; --ff-transition-move: var(--ff-transition-move-duration) var(--ff-transition-move-easing); --ff-transition-show-duration: calc(var(--ff-transition-base-duration) * 1); --ff-transition-show-easing: ease-out; --ff-transition-show: var(--ff-transition-show-duration) var(--ff-transition-show-easing); --ff-transition-hide-duration: calc(var(--ff-transition-base-duration) * 0.8); --ff-transition-hide-easing: ease-in; --ff-transition-hide: var(--ff-transition-hide-duration) var(--ff-transition-hide-easing); /* easing */ --ff-transition-ease: cubic-bezier(0.3, 0.14, 0.3, 1); --ff-transition-ease-in: cubic-bezier(0.4, 0.1, 1, 1); --ff-transition-ease-out: cubic-bezier(0, 0, 0.3, 1); /* duration */ --ff-transition-duration-fast-1: 80ms; /* Micro-interactions Radio Buttons, Checkboxes*/ --ff-transition-duration-fast-2: 120ms; /* Micro-interactions Pagination */ --ff-transition-duration-medium-1: 180ms; /* Small Components Dropdown hide, Buttons, Links */ --ff-transition-duration-medium-2: 220ms; /* Containers & Movements Dropdown show, Cards, Collections, Tab Navigation */ --ff-transition-duration-slow-1: 360ms; /* Large contraction Lateral Animations: Carousel */ --ff-transition-duration-slow-2: 480ms; /* Large expansion: Mega Menu, Sheets, Toggle Switch, Toggle Button Switch, */ --ff-transition-duration-ambient: 800ms; /* Complete Screen Fades */ /* On Screen transitions */ /* Radio Buttons, Checkboxes */ --ff-transition-components-fast: var(--ff-transition-duration-fast-1) var(--ff-transition-ease); /* Pagination */ --ff-transition-components-medium: var(--ff-transition-duration-fast-2) var(--ff-transition-ease); /* Buttons, Links */ --ff-transition-components-slow: var(--ff-transition-duration-medium-1) var(--ff-transition-ease); /* Cards, Collections */ --ff-transition-container: var(--ff-transition-duration-medium-2) var(--ff-transition-ease); /* Carousels */ --ff-transition-lateral: var(--ff-transition-duration-slow-1) var(--ff-transition-ease); /* Components appearing Dropdowns, Language Selector */ --ff-transition-show-fast: var(--ff-transition-duration-medium-2) var(--ff-transition-ease-out); --ff-transition-hide-fast: var(--ff-transition-duration-medium-1) var(--ff-transition-ease-in); /* Sheets and Megadropdowns */ --ff-transition-show-slow: var(--ff-transition-duration-slow-2) var(--ff-transition-ease-out); --ff-transition-hide-slow: var(--ff-transition-duration-slow-1) var(--ff-transition-ease-in); /* Shadows */ --ff-shadow-1: 0 0 0 1px light-dark(hsl(0 0% 0% / 0.05), hsl(0 0% 0% / 0.05)); --ff-shadow-2: 0 0 0 1px light-dark(hsl(0 0% 0% / 0.03), hsl(0 0% 0% / 0.05)), 0 2px 4px 0 light-dark(hsl(0 0% 0% / 0.04), hsl(0 0% 0% / 0.2)); --ff-shadow-3: 0 0 0 1px light-dark(hsl(0 0% 0% / 0.03), hsl(0 0% 0% / 0.05)), 0 4px 8px 0 light-dark(hsl(0 0% 0% / 0.05), hsl(0 0% 0% / 0.2)); --ff-shadow-4: 0 0 0 1px light-dark(hsl(0 0% 0% / 0.02), hsl(0 0% 0% / 0.07)), 0 8px 18px 0 light-dark(hsl(0 0% 0% / 0.07), hsl(0 0% 0% / 0.2)); --ff-shadow-5: 0 0 0 1px light-dark(hsl(0 0% 0% / 0.01), hsl(0 0% 0% / 0.1)), 0 10px 30px 0 light-dark(hsl(0 0% 0% / 0.1), hsl(0 0% 0% / 0.25)); /* Z-index levels */ --ff-z-index-fullscreen: 32768; /* above all */ --ff-z-index-tooltip: 9999; /* for tooltips, autocomplete, selects */ --ff-z-index-dropdown: 8888; /* for dropdown boxes */ --ff-z-index-dialog: 4444; /* for modal dialogs, lightboxes, user notifications, … */ --ff-z-index-navigation: 2222; /* for navigations, off-canvas, flyouts, … */ --ff-z-index-sticky: 1111; /* for blocks that are sticky in the browser window */ --ff-z-index-controls: 900; /* for controls for sliders and scrolling */ --ff-z-index-content-layer: 100; /* for special content layers use 100-900 */ --ff-z-index-content-raised: 1; /* for content elements use freely between 1-99 */ } /* width = 768px (md) */ @media (min-width: 48rem) { :host, :root { /* TYPOGRAPHY */ /* Font Size */ --ff-font-size-p: var(--ff-font-size-medium); --ff-font-size-h6: 1.0625rem; --ff-font-size-h5: 1.125rem; --ff-font-size-h4: 1.25rem; --ff-font-size-h3: 1.375rem; --ff-font-size-h2: 1.8125rem; --ff-font-size-h1: 2rem; --ff-font-size-stage: 2.5rem; /* Line Height */ --ff-line-height-p: var(--ff-line-height-medium); --ff-line-height-h6: 1.5rem; --ff-line-height-h5: 1.5rem; --ff-line-height-h4: 2rem; --ff-line-height-h3: 2rem; --ff-line-height-h2: 2.25rem; --ff-line-height-h1: 2.5rem; --ff-line-height-stage: 3rem; } } /* width = 1024 (lg) */ @media (min-width: 64rem) { :host, :root { /* TYPOGRAPHY */ /* Font Size */ --ff-font-size-p: var(--ff-font-size-medium); --ff-font-size-h6: 1.125rem; --ff-font-size-h5: 1.25rem; --ff-font-size-h4: 1.4375rem; --ff-font-size-h3: 1.75rem; --ff-font-size-h2: 2.4375rem; --ff-font-size-h1: 3.0625rem; --ff-font-size-stage: 3.5rem; /* Line Height */ --ff-line-height-p: var(--ff-line-height-medium); --ff-line-height-h6: 1.75rem; --ff-line-height-h5: 1.75rem; --ff-line-height-h4: 2rem; --ff-line-height-h3: 2.5rem; --ff-line-height-h2: 3rem; --ff-line-height-h1: 3.5rem; --ff-line-height-stage: 4rem; } } /* GRID SYSTEM */ :host, :root { --ff-grid-margin: 1rem; --ff-grid-gutter-size: 1.5rem; --ff-grid-max-width: 90rem; --ff-grid-content-width: 12/12; /* width = 768px (md) */ @media only screen and (min-width: 48em) { --ff-grid-margin: 2rem; --ff-grid-gutter-size: var(--ff-spacing-6); --ff-grid-content-width: 10/12; /* relative to main width */ } /* width = 1024 (lg) */ @media (min-width: 64rem) { --ff-grid-content-width: 8/12; } /* width = 1280px (xl) */ @media only screen and (min-width: 80em) { --ff-grid-margin: 3.75rem; } /* width = 1280px (xl) */ @media only screen and (min-width: 120.0625em) { --ff-grid-max-width: 100rem; } --ff-grid-side-width: calc((1 - var(--ff-grid-content-width, 1)) / 2); --ff-grid-template-columns: [full-start] minmax(var(--ff-grid-margin, 1rem), auto) [main-start] minmax( 0, min( calc(var(--ff-grid-side-width) * 100%), calc(var(--ff-grid-max-width, 90rem) * var(--ff-grid-side-width)) ) ) [content-start] minmax( 0, min( calc(var(--ff-grid-content-width, 1) * 100%), calc(var(--ff-grid-max-width, 90rem) * var(--ff-grid-content-width, 1)) ) ) [content-end] minmax( 0, min( calc(var(--ff-grid-side-width) * 100%), calc(var(--ff-grid-max-width, 90rem) * var(--ff-grid-side-width)) ) ) [main-end] minmax(var(--ff-grid-margin, 1rem), auto) [full-end]; }