:host, :root { /* ===================== */ /* PRIMITIVES */ /* ===================== */ /* COLORS */ /* White */ --uimc-color-white: hsl(0 0 100%); /* #FFFFFF */ /* Black */ --uimc-color-black: hsl(0 0 0%); /* #000000 */ --uimc-color-black-5: hsl(0 0 95%); /* #F2F2F2 */ --uimc-color-black-7: hsl(0 0 93%); /* #EDEDED */ --uimc-color-black-10: hsl(0 0 90%); /* #E6E6E6 */ --uimc-color-black-20: hsl(0 0 80%); /* #CCCCCC */ --uimc-color-black-30: hsl(0 0 70%); /* #B3B3B3 */ --uimc-color-black-40: hsl(0 0 60%); /* #999999 */ --uimc-color-black-50: hsl(0 0 50%); /* #808080 */ --uimc-color-black-60: hsl(0 0 40%); /* #666666 */ --uimc-color-black-70: hsl(0 0 30%); /* #4D4D4D */ --uimc-color-black-80: hsl(0 0 20%); /* #333333 */ --uimc-color-black-90: hsl(0 0 10%); /* #1A1A1A */ /* Berry */ --uimc-color-berry: hsl(346 69% 28%); /* #6E2D4A */ --uimc-color-berry-25: hsl(353 35% 87%); /* #F0D4E1 */ --uimc-color-berry-50: hsl(356 27% 69%); /* #C4A3B1 */ /* Blue */ --uimc-color-blue: hsl(244 57% 33%); /* #2A6EBB */ --uimc-color-blue-25: hsl(245 28% 83%); /* #D6E9F7 */ --uimc-color-blue-50: hsl(244 27% 66%); /* #8DB9D9 */ /* Cyan */ --uimc-color-cyan: hsl(195 83% 58%); /* #00A6A6 */ --uimc-color-cyan-25: hsl(196 85% 90%); /* #E6F9F9 */ --uimc-color-cyan-50: hsl(196 83% 79%); /* #B3E6E6 */ /* Green */ --uimc-color-green: hsl(142 100% 30%); /* #2E854B */ --uimc-color-green-25: hsl(142 44% 83%); /* #C1E1D4 */ --uimc-color-green-50: hsl(142 44% 65%); /* #8CB8A7 */ --uimc-color-green-dark: hsl(140 66% 29%); /* #197C3A */ /* Orange */ --uimc-color-orange: hsl(26 98% 47%); /* #FF6F00 */ --uimc-color-orange-25: hsl(22 93% 89%); /* #FDE6D9 */ --uimc-color-orange-50: hsl(21 90% 77%); /* #F7C9A6 */ --uimc-color-orange-dark: hsl(22 100% 41%); /* #FF5C00 */ /* Black */ --uimc-color-petrol: hsl(180 100% 30%); /* #006778 */ --uimc-color-petrol-25: hsl(180 38% 84%); /* #C1E6ED */ --uimc-color-petrol-50: hsl(180 45% 68%); /* #8CB9C2 */ --uimc-color-petrol-dark: hsl(182 97% 25%); /* #005A66 */ --uimc-color-petrol-extra-light: hsl(180 100% 36%); /* #007A8A */ --uimc-color-petrol-light: hsl(180 100% 33%); /* #00707A */ /* Red */ --uimc-color-red: hsl(352 100% 45%); /* #A80000 */ --uimc-color-red-25: hsl(352 83% 86%); /* #F2DADA */ --uimc-color-red-50: hsl(353 83% 73%); /* #E6B5B5 */ --uimc-color-red-dark: hsl(352 100% 42.55%); /* #D9001D */ /* do not round HSL */ /* Yellow */ --uimc-color-yellow: hsl(49 100% 50%); /* #FFD700 */ --uimc-color-yellow-25: hsl(49 100% 87%); /* #FFF4CC */ --uimc-color-yellow-50: hsl(50 100% 75%); /* #FFE680 */ /* TYPOGRAPHY */ /* Font Family */ --uimc-font-family-headline: "SH Headline", "Arial Black", "Calibri", sans-serif; --uimc-font-family-text: "Siemens Sans Pro", "Siemens Sans", "SH-Bree-Text", "Open Sans", "Roboto", "Droid Sans", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif; /* Font Weights */ --uimc-font-weight-bold: 700; --uimc-font-weight-semibold: 600; --uimc-font-weight-regular: 400; /* Font Sizes */ --uimc-font-size-xxsmall: 0.625rem; /* 10px */ --uimc-font-size-xsmall: 0.75rem; /* 12px */ --uimc-font-size-small: 0.875rem; /* 14px */ --uimc-font-size-medium: 1rem; /* 16px */ --uimc-font-size-large: 1.125rem; /* 18px */ --uimc-font-size-xlarge: 1.25rem; /* 20px */ --uimc-font-size-xxlarge: 1.5rem; /* 24px */ /* Line Heights */ --uimc-line-height-xxsmall: 1rem; /* 16px */ --uimc-line-height-xsmall: 1rem; /* 16px */ --uimc-line-height-small: 1.25rem; /* 20px */ --uimc-line-height-medium: 1.5rem; /* 24px */ --uimc-line-height-large: 1.75rem; /* 28px */ --uimc-line-height-xlarge: 2rem; /* 32px */ --uimc-line-height-xxlarge: 2.25rem; /* 36px */ /* DIMENSION */ /* Border */ --uimc-border-width-1: 0.0625rem; /* 1px */ --uimc-border-width-2: 0.125rem; /* 2px */ --uimc-border-radius-1: 0.25rem; /* 4px */ --uimc-border-radius-2: 0.5rem; /* 8px */ /* Spacing */ --uimc-spacing-1: 0.25rem; /* 4px */ --uimc-spacing-2: 0.5rem; /* 8px */ --uimc-spacing-3: 0.75rem; /* 12px */ --uimc-spacing-4: 1rem; /* 16px */ --uimc-spacing-5: 1.25rem; /* 20px */ --uimc-spacing-6: 1.5rem; /* 24px */ --uimc-spacing-7: 1.75rem; /* 28px */ --uimc-spacing-8: 2rem; /* 32px */ --uimc-spacing-9: 2.25rem; /* 36px */ --uimc-spacing-10: 2.5rem; /* 40px */ --uimc-spacing-12: 3rem; /* 48px */ --uimc-spacing-14: 3.5rem; /* 56px */ --uimc-spacing-16: 4rem; /* 64px */ --uimc-spacing-18: 4.5rem; /* 72px */ --uimc-spacing-20: 5rem; /* 80px */ /* Aspect Ratios */ --uimc-aspect-ratio-square: 1; --uimc-aspect-ratio-portrait: 4/5; --uimc-aspect-ratio-landscape: 3/2; --uimc-aspect-ratio-video: 16/9; --uimc-aspect-ratio-panorama: 21/9; /* Links */ --uimc-link-underline-thickness-1: 0.0625em; /* 1px */ --uimc-link-underline-thickness-2: 0.125em; /* 2px */ --uimc-link-underline-offset: 0.4em; --uimc-link-underline-color: var(--uimc-interaction-color-decoration); --uimc-link-underline-color-hover: var(--uimc-interaction-color-decoration); /* Discuss: Elevation ? */ /* Transition */ /* Lagacy: UI MarCom 3 Transition */ --uimc-transition-base-duration: 300ms; --uimc-transition-base-easing: ease-in-out; --uimc-transition-base: var(--transition-base-duration) var(transition-base-easing); --uimc-transition-fade-duration: calc(var(--transition-base-duration) * 0.7); --uimc-transition-fade-easing: ease-out; --uimc-transition-fade: var(--transition-fade-duration) var(transition-fade-easing); --uimc-transition-slide-duration: calc(var(--transition-base-duration) * 1.5); --uimc-transition-slide-easing: ease; --uimc-transition-slide: var(--transition-slide-duration) var(transition-slide-easing); --uimc-transition-move-duration: calc(var(--transition-base-duration) * 0.8); --uimc-transition-move-easing: ease; --uimc-transition-move: var(--transition-move-duration) var(transition-move-easing); --uimc-transition-show-duration: calc(var(--transition-base-duration) * 1); --uimc-transition-show-easing: ease-out; --uimc-transition-show: var(--transition-show-duration) var(transition-show-easing); --uimc-transition-hide-duration: calc(var(--transition-base-duration) * 0.8); --uimc-transition-hide-easing: ease-in; --uimc-transition-hide: var(--transition-hide-duration) var(transition-hide-easing); /* easing */ --uimc-transition-ease: cubic-bezier(0.3, 0.14, 0.3, 1); --uimc-transition-ease-in: cubic-bezier(0.4, 0.1, 1, 1); --uimc-transition-ease-out: cubic-bezier(0, 0, 0.3, 1); /* duration */ --uimc-transition-duration-fast-1: 80ms; /* Micro-interactions Radio Buttons, Checkboxes*/ --uimc-transition-duration-fast-2: 120ms; /* Micro-interactions Pagination */ --uimc-transition-duration-medium-1: 180ms; /* Small Components Dropdown hide, Buttons, Links */ --uimc-transition-duration-medium-2: 220ms; /* Containers & Movements Dropdown show, Cards, Collections, Tab Navigation */ --uimc-transition-duration-slow-1: 360ms; /* Large contraction Lateral Animations: Carousel */ --uimc-transition-duration-slow-2: 480ms; /* Large expansion: Mega Menu, Sheets, Toggle Switch, Toggle Button Switch, */ --uimc-transition-duration-ambient: 800ms; /* Complete Screen Fades */ /* On Screen transitions */ /* Radio Buttons, Checkboxes */ --uimc-transition-components-fast: var(--uimc-transition-duration-fast-1) var(--uimc-transition-ease); /* Pagination */ --uimc-transition-components-medium: var(--uimc-transition-duration-fast-2) var(--uimc-transition-ease); /* Buttons, Links */ --uimc-transition-components-slow: var(--uimc-transition-duration-medium-1) var(--uimc-transition-ease); /* Cards, Collections */ --uimc-transition-container: var(--uimc-transition-duration-medium-2) var(--uimc-transition-ease); /* Carousels */ --uimc-transition-lateral: var(--uimc-transition-duration-slow-1) var(--uimc-transition-ease); /* Components appearing Dropdowns, Language Selector */ --uimc-transition-show-fast: var(--uimc-transition-duration-medium-2) var(--uimc-transition-ease-out); --uimc-transition-hide-fast: var(--uimc-transition-duration-medium-1) var(--uimc-transition-ease-in); /* Sheets and Megadropdowns */ --uimc-transition-show-slow: var(--uimc-transition-duration-slow-2) var(--uimc-transition-ease-out); --uimc-transition-hide-slow: var(--uimc-transition-duration-slow-1) var(--uimc-transition-ease-in); /* Shadows */ --uimc-shadow-1: 0 0 0 1px light-dark(hsl(0 0% 0% / 0.05), hsl(0 0% 0% / 0.05)); --uimc-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)); --uimc-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)); --uimc-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)); --uimc-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)); --uimc-fog-color: rgba(0, 0, 0, 0.50); --uimc-fog-blur: 4px; /* Z-index levels */ --uimc-z-index-fullscreen: 32768; /* above all */ --uimc-z-index-tooltip: 9999; /* for tooltips, autocomplete, selects */ --uimc-z-index-dropdown: 8888; /* for dropdown boxes */ --uimc-z-index-dialog: 4444; /* for modal dialogs, lightboxes, user notifications, … */ --uimc-z-index-navigation: 2222; /* for navigations, off-canvas, flyouts, … */ --uimc-z-index-sticky: 1111; /* for blocks that are sticky in the browser window */ --uimc-z-index-controls: 900; /* for controls for sliders and scrolling */ --uimc-z-index-content-layer: 100; /* for special content layers use 100-900 */ --uimc-z-index-content-raised: 1; /* for content elements use freely between 1-99 */ /* Opacities */ --uimc-opacity-disabled: 0.4; /* ===================== */ /* SEMANTICS */ /* ===================== */ /* THEMING */ /* Shapes & Texts */ /* Backgrounds */ --uimc-color-background: light-dark(var(--uimc-color-white), var(--uimc-color-black)); /* default backgrounds for sections on light and dark scheme */ --uimc-color-background-outlined: light-dark(var(--uimc-color-white), transparent); --uimc-color-background-filled: light-dark(hsl(0 0 0% / 0.05), hsl(0 0 100% / 0.103)); --uimc-color-background-inverted: light-dark(var(--uimc-color-black), var(--uimc-color-white)); --uimc-color-background-overlay: light-dark(var(--uimc-color-white), hsl(0 0 18% / 1)); --uimc-color-background-section: var(--uimc-color-background); /* Border */ --uimc-color-border: light-dark(var(--uimc-color-black-30), var(--uimc-color-black-70)); --uimc-color-border-active: light-dark(var(--uimc-color-black-70), var(--uimc-color-black-30)); --uimc-color-border-tint: light-dark(hsl(0 0% 0% / 0.1), hsl(0 0% 100% / 0.103)); --uimc-color-border-shade: light-dark(hsl(0 0 0% / 0.3), hsl(0 0 100% / 0.3)); /* Typography */ --uimc-color-headline: light-dark(var(--uimc-color-black), var(--uimc-color-white)); --uimc-color-text: light-dark(var(--uimc-color-black-90), var(--uimc-color-black-10)); --uimc-color-text-muted: light-dark(var(--uimc-color-black-70), var(--uimc-color-black-30)); --uimc-color-text-error: light-dark(var(--uimc-color-red-dark), hsl(353, 100%, 55%)); --uimc-color-text-success: light-dark(var(--uimc-color-green-dark), var(--uimc-color-green)); --uimc-inputfield-color-background: light-dark(var(--uimc-color-white), var(--uimc-color-black-90)); --uimc-inputfield-color-border: light-dark(var(--uimc-color-black-50), var(--uimc-color-black-50)); --uimc-inputfield-color-border-active: var(--uimc-color-border-active); /* Interaction */ --uimc-interaction-color-focus-ring: var(--uimc-color-petrol); --uimc-interaction-color-background-active: light-dark(hsl(0 0 0% / 0.1), hsl(0 0 100% / 0.103)); --uimc-interaction-color-background-focus: light-dark(var(--uimc-color-petrol-dark), var(--uimc-color-petrol-dark)); --uimc-interaction-color-background-hover: light-dark(hsl(0 0 0% / 0.05), hsl(0 0 100% / 0.05)); --uimc-interaction-color-background-inverted-active: light-dark(hsl(0 0 100% / 0.103), hsl(0 0 0% / 0.1)); --uimc-interaction-color-background-inverted-hover: light-dark(hsl(0 0 100% / 0.05), hsl(0 0 0% / 0.05)); --uimc-interaction-color-decoration: light-dark(var(--uimc-color-petrol-dark), var(--uimc-color-petrol-dark)); --uimc-interaction-color-decoration-mono: light-dark(var(--uimc-color-black-90), var(--uimc-color-black-10)); --uimc-interaction-color-icon: light-dark(var(--uimc-color-petrol-dark), var(--uimc-color-petrol-dark)); --uimc-interaction-color-icon-mono-active: light-dark(var(--uimc-color-black), var(--uimc-color-white)); --uimc-interaction-color-icon-mono-default: light-dark(var(--uimc-color-black-90), var(--uimc-color-black-10)); --uimc-interaction-color-icon-mono-focus: light-dark(var(--uimc-color-white), var(--uimc-color-white)); /* if focus background is applied */ --uimc-interaction-color-icon-mono-hover: light-dark(var(--uimc-color-black), var(--uimc-color-white)); --uimc-interaction-color-icon-muted: var(--uimc-color-text-muted); --uimc-interaction-color-text-active: light-dark(var(--uimc-color-black), var(--uimc-color-white)); --uimc-interaction-color-text-default: var(--uimc-color-text); --uimc-interaction-color-text-focus: var(--uimc-color-white); /* if focus background is applied */ --uimc-interaction-color-text-hover: light-dark(var(--uimc-color-black), var(--uimc-color-white)); /* SHADOWS */ --uimc-shadow-flat: var(--uimc-shadow-1); --uimc-shadow-notifications: var(--uimc-shadow-2); --uimc-shadow-raised: var(--uimc-shadow-3); --uimc-shadow-navigation: var(--uimc-shadow-4); --uimc-shadow-popover: var(--uimc-shadow-5); /* DIMENSION */ --uimc-focus-ring-offset: 0.125rem; --uimc-focus-ring-width: 0.1875rem; /* TYPOGRAPHY */ /* Font Size */ --uimc-font-size-p: var(--uimc-font-size-medium); --uimc-font-size-h6: 1.0625rem; --uimc-font-size-h5: 1.125rem; --uimc-font-size-h4: 1.25rem; --uimc-font-size-h3: 1.375rem; --uimc-font-size-h2: 1.8125rem; --uimc-font-size-h1: 2rem; --uimc-font-size-stage: 2rem; /* Line Height */ --uimc-line-height-p: var(--uimc-line-height-medium); --uimc-line-height-h6: 1.5rem; --uimc-line-height-h5: 1.5rem; --uimc-line-height-h4: 1.75rem; --uimc-line-height-h3: 2rem; --uimc-line-height-h2: 2.25rem; --uimc-line-height-h1: 2.5rem; --uimc-line-height-stage: 2.5rem; } /* width = 768px (md) */ @media (min-width: 48rem) { :host, :root { /* TYPOGRAPHY */ /* Font Size */ --uimc-font-size-p: var(--uimc-font-size-medium); --uimc-font-size-h6: 1.0625rem; --uimc-font-size-h5: 1.125rem; --uimc-font-size-h4: 1.25rem; --uimc-font-size-h3: 1.375rem; --uimc-font-size-h2: 1.8125rem; --uimc-font-size-h1: 2rem; --uimc-font-size-stage: 2.5rem; /* Line Height */ --uimc-line-height-p: var(--uimc-line-height-medium); --uimc-line-height-h6: 1.5rem; --uimc-line-height-h5: 1.5rem; --uimc-line-height-h4: 2rem; --uimc-line-height-h3: 2rem; --uimc-line-height-h2: 2.25rem; --uimc-line-height-h1: 2.5rem; --uimc-line-height-stage: 3rem; } } /* width = 1024 (lg) */ @media (min-width: 64rem) { :host, :root { /* TYPOGRAPHY */ /* Font Size */ --uimc-font-size-p: var(--uimc-font-size-medium); --uimc-font-size-h6: 1.125rem; --uimc-font-size-h5: 1.25rem; --uimc-font-size-h4: 1.4375rem; --uimc-font-size-h3: 1.75rem; --uimc-font-size-h2: 2.4375rem; --uimc-font-size-h1: 3.0625rem; --uimc-font-size-stage: 3.5rem; /* Line Height */ --uimc-line-height-p: var(--uimc-line-height-medium); --uimc-line-height-h6: 1.75rem; --uimc-line-height-h5: 1.75rem; --uimc-line-height-h4: 2rem; --uimc-line-height-h3: 2.5rem; --uimc-line-height-h2: 3rem; --uimc-line-height-h1: 3.5rem; --uimc-line-height-stage: 4rem; } } /* GRID SYSTEM */ :host, :root { --uimc-grid-margin: 1rem; --uimc-grid-gutter-size: 1.5rem; --uimc-grid-max-width: 90rem; --uimc-grid-content-width: 12/12; /* width = 768px (md) */ @media only screen and (min-width: 48em) { --uimc-grid-margin: 2rem; --uimc-grid-gutter-size: var(--uimc-spacing-6); --uimc-grid-content-width: 10/12; /* relative to main width */ } /* width = 1024 (lg) */ @media (min-width: 64rem) { --uimc-grid-content-width: 8/12; } /* width = 1280px (xl) */ @media only screen and (min-width: 80em) { --uimc-grid-margin: 3.75rem; } /* width = 1280px (xl) */ @media only screen and (min-width: 120.0625em) { --uimc-grid-max-width: 100rem; } --uimc-grid-side-width: calc((1 - var(--uimc-grid-content-width, 1)) / 2); --uimc-grid-template-columns: [full-start] minmax(var(--uimc-grid-margin, 1rem), auto) [main-start] minmax( 0, min( calc(var(--uimc-grid-side-width) * 100%), calc(var(--uimc-grid-max-width, 90rem) * var(--uimc-grid-side-width)) ) ) [content-start] minmax( 0, min( calc(var(--uimc-grid-content-width, 1) * 100%), calc(var(--uimc-grid-max-width, 90rem) * var(--uimc-grid-content-width, 1)) ) ) [content-end] minmax( 0, min( calc(var(--uimc-grid-side-width) * 100%), calc(var(--uimc-grid-max-width, 90rem) * var(--uimc-grid-side-width)) ) ) [main-end] minmax(var(--uimc-grid-margin, 1rem), auto) [full-end]; }