/* design-md bundle: palette=modern shape=rounded. Add fonts.css separately. */ /* design-md tokens: spacing, type, motion, elevation. Generated by build.py from src/tokens.json. */ :root { --ds-spacing-0: 0px; --ds-spacing-50: 2px; --ds-spacing-100: 4px; --ds-spacing-150: 6px; --ds-spacing-200: 8px; --ds-spacing-300: 12px; --ds-spacing-400: 16px; --ds-spacing-500: 20px; --ds-spacing-600: 24px; --ds-spacing-800: 32px; --ds-spacing-1000: 40px; --ds-spacing-1200: 48px; --ds-spacing-1600: 64px; --ds-spacing-2400: 96px; --ds-border-width-none: 0px; --ds-border-width-s: 1px; --ds-border-width-m: 2px; --ds-border-radius-none: 0px; --ds-opacity-disabled: 0.4; --ds-opacity-hover: 0.08; --ds-opacity-pressed: 0.16; --ds-opacity-backdrop: 0.5; --ds-font-family-primary: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --ds-font-family-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Consolas, 'Liberation Mono', monospace; --ds-font-weight-light: 300; --ds-font-weight-normal: 400; --ds-font-weight-medium: 500; --ds-font-weight-bold: 700; --ds-font-size-250: 10px; --ds-font-size-300: 12px; --ds-font-size-350: 14px; --ds-font-size-375: 15px; --ds-font-size-400: 16px; --ds-font-size-450: 18px; --ds-font-size-500: 20px; --ds-font-size-550: 22px; --ds-font-size-600: 24px; --ds-font-size-650: 26px; --ds-font-size-700: 28px; --ds-font-size-750: 30px; --ds-font-size-800: 32px; --ds-font-size-850: 34px; --ds-font-size-900: 36px; --ds-font-size-1000: 40px; --ds-font-size-1200: 48px; --ds-font-size-1250: 50px; --ds-font-size-1400: 56px; --ds-font-size-1500: 60px; --ds-font-size-1800: 72px; --ds-line-height-xs: 1.0; --ds-line-height-s: 1.1; --ds-line-height-m: 1.2; --ds-line-height-l: 1.3; --ds-line-height-xl: 1.4; --ds-line-height-xxl: 1.5; --ds-letter-spacing-tight: -0.01em; --ds-letter-spacing-regular: 0; --ds-letter-spacing-heading: 0.01em; --ds-text-display-1-size: var(--ds-font-size-1200); --ds-text-display-1-line-height: var(--ds-line-height-l); --ds-text-display-1-weight: var(--ds-font-weight-bold); --ds-text-display-1-letter-spacing: var(--ds-letter-spacing-heading); --ds-text-display-2-size: var(--ds-font-size-1000); --ds-text-display-2-line-height: var(--ds-line-height-l); --ds-text-display-2-weight: var(--ds-font-weight-bold); --ds-text-display-2-letter-spacing: var(--ds-letter-spacing-heading); --ds-text-display-3-size: var(--ds-font-size-800); --ds-text-display-3-line-height: var(--ds-line-height-l); --ds-text-display-3-weight: var(--ds-font-weight-bold); --ds-text-display-3-letter-spacing: var(--ds-letter-spacing-heading); --ds-text-h1-size: var(--ds-font-size-800); --ds-text-h1-line-height: var(--ds-line-height-l); --ds-text-h1-weight: var(--ds-font-weight-bold); --ds-text-h1-letter-spacing: var(--ds-letter-spacing-heading); --ds-text-h2-size: var(--ds-font-size-700); --ds-text-h2-line-height: var(--ds-line-height-l); --ds-text-h2-weight: var(--ds-font-weight-bold); --ds-text-h2-letter-spacing: var(--ds-letter-spacing-heading); --ds-text-h3-size: var(--ds-font-size-600); --ds-text-h3-line-height: var(--ds-line-height-l); --ds-text-h3-weight: var(--ds-font-weight-bold); --ds-text-h3-letter-spacing: var(--ds-letter-spacing-heading); --ds-text-h4-size: var(--ds-font-size-500); --ds-text-h4-line-height: var(--ds-line-height-xl); --ds-text-h4-weight: var(--ds-font-weight-bold); --ds-text-h4-letter-spacing: var(--ds-letter-spacing-heading); --ds-text-h5-size: var(--ds-font-size-450); --ds-text-h5-line-height: var(--ds-line-height-xl); --ds-text-h5-weight: var(--ds-font-weight-bold); --ds-text-h5-letter-spacing: var(--ds-letter-spacing-heading); --ds-text-h6-size: var(--ds-font-size-400); --ds-text-h6-line-height: var(--ds-line-height-xxl); --ds-text-h6-weight: var(--ds-font-weight-bold); --ds-text-h6-letter-spacing: var(--ds-letter-spacing-heading); --ds-text-body-1-size: var(--ds-font-size-400); --ds-text-body-1-line-height: var(--ds-line-height-xxl); --ds-text-body-1-weight: var(--ds-font-weight-normal); --ds-text-body-1-letter-spacing: var(--ds-letter-spacing-regular); --ds-text-body-2-size: var(--ds-font-size-350); --ds-text-body-2-line-height: var(--ds-line-height-xxl); --ds-text-body-2-weight: var(--ds-font-weight-normal); --ds-text-body-2-letter-spacing: var(--ds-letter-spacing-regular); --ds-text-caption-size: var(--ds-font-size-300); --ds-text-caption-line-height: var(--ds-line-height-xxl); --ds-text-caption-weight: var(--ds-font-weight-normal); --ds-text-caption-letter-spacing: var(--ds-letter-spacing-regular); --ds-text-label-size: var(--ds-font-size-300); --ds-text-label-line-height: var(--ds-line-height-xxl); --ds-text-label-weight: var(--ds-font-weight-medium); --ds-text-label-letter-spacing: var(--ds-letter-spacing-regular); --ds-motion-duration-fast: 100ms; --ds-motion-duration-normal: 200ms; --ds-motion-duration-slow: 300ms; --ds-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --ds-motion-easing-enter: cubic-bezier(0, 0, 0, 1); --ds-motion-easing-exit: cubic-bezier(0.3, 0, 1, 1); --ds-z-index-content-layer: 100; --ds-z-index-navigation: 300; --ds-z-index-popover: 400; --ds-z-index-tooltip: 500; --ds-z-index-toast: 600; --ds-z-index-backdrop: 700; --ds-z-index-modal: 800; --ds-z-index-process-indicator: 900; --ds-shadow-none: none; --ds-shadow-m: 0 4px 16px rgba(10, 26, 63, 0.14), 0 1px 3px rgba(10, 26, 63, 0.10); --ds-layout-max-width: 1600px; } [data-theme='light'] { --ds-shadow-m: 0 4px 16px rgba(10, 26, 63, 0.14), 0 1px 3px rgba(10, 26, 63, 0.10) } [data-theme='dark'] { --ds-shadow-m: 0 4px 16px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.45); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --ds-shadow-m: 0 4px 16px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.45); } } /* text styles: larger steps from 960px */ @media (min-width: 960px) { :root { --ds-text-display-1-size: var(--ds-font-size-1500); --ds-text-display-2-size: var(--ds-font-size-1200); --ds-text-display-3-size: var(--ds-font-size-1000); --ds-text-h1-size: var(--ds-font-size-850); --ds-text-h2-size: var(--ds-font-size-750); --ds-text-h3-size: var(--ds-font-size-650); --ds-text-h4-size: var(--ds-font-size-550); --ds-text-h5-size: var(--ds-font-size-500); --ds-text-h6-size: var(--ds-font-size-450); } } /* text styles: larger steps from 1600px */ @media (min-width: 1600px) { :root { --ds-text-display-1-size: var(--ds-font-size-1800); --ds-text-display-2-size: var(--ds-font-size-1400); --ds-text-display-3-size: var(--ds-font-size-1200); --ds-text-h1-size: var(--ds-font-size-900); --ds-text-h2-size: var(--ds-font-size-800); --ds-text-h3-size: var(--ds-font-size-700); --ds-text-h4-size: var(--ds-font-size-600); --ds-text-h5-size: var(--ds-font-size-550); --ds-text-h6-size: var(--ds-font-size-500); } } /* palette: modern. */ :root, [data-theme='light'] { --ds-color-background-page: #F6F7F9; --ds-color-background-surface: #FFFFFF; --ds-color-background-subtle: #ECEEF2; --ds-color-background-brand: #0A1A3F; --ds-color-background-brand-hover: #10295E; --ds-color-background-overlay: #14181F; --ds-color-text-normal: #14181F; --ds-color-text-weak: #4B5361; --ds-color-text-weaker: #646E7D; --ds-color-text-disabled: #98A1AE; --ds-color-text-link: #1F5AD0; --ds-color-text-link-hover: #1948A8; --ds-color-text-on-brand: #FFFFFF; --ds-color-text-on-brand-selected: #8CB1FF; --ds-color-text-on-overlay: #FFFFFF; --ds-color-line-weak: #DDE1E7; --ds-color-line-normal: #C5CBD4; --ds-color-line-strong: #646E7D; --ds-color-line-focus: #3470E8; --ds-color-line-on-brand-selected: #5B8DF7; --ds-color-action-primary: #1F5AD0; --ds-color-action-primary-hover: #1948A8; --ds-color-action-primary-pressed: #153B86; --ds-color-action-on-primary: #FFFFFF; --ds-color-action-subtle: #EDF3FF; --ds-color-action-subtle-hover: #DAE6FF; --ds-color-action-on-subtle: #1948A8; --ds-color-action-disabled: #DDE1E7; --ds-color-action-on-disabled: #98A1AE; --ds-color-status-success: #1B7F4B; --ds-color-status-on-success: #FFFFFF; --ds-color-status-success-bg: #E8F6EE; --ds-color-status-on-success-bg: #146239; --ds-color-status-warning: #B45F06; --ds-color-status-on-warning: #FFFFFF; --ds-color-status-warning-bg: #FEF3D6; --ds-color-status-on-warning-bg: #7A4A00; --ds-color-status-danger: #C62839; --ds-color-status-on-danger: #FFFFFF; --ds-color-status-danger-bg: #FDECEE; --ds-color-status-on-danger-bg: #9B1C2B; --ds-color-status-info: #1F5AD0; --ds-color-status-on-info: #FFFFFF; --ds-color-status-info-bg: #EDF3FF; --ds-color-status-on-info-bg: #153B86; --ds-color-status-neutral: #4B5361; --ds-color-status-on-neutral: #FFFFFF; --ds-color-status-neutral-bg: #ECEEF2; --ds-color-status-on-neutral-bg: #353C48; color-scheme: light; } [data-theme='dark'] { --ds-color-background-page: #0C0F14; --ds-color-background-surface: #14181F; --ds-color-background-subtle: #222730; --ds-color-background-brand: #0A1A3F; --ds-color-background-brand-hover: #10295E; --ds-color-background-overlay: #FFFFFF; --ds-color-text-normal: #F6F7F9; --ds-color-text-weak: #C5CBD4; --ds-color-text-weaker: #98A1AE; --ds-color-text-disabled: #4B5361; --ds-color-text-link: #8CB1FF; --ds-color-text-link-hover: #BAD1FF; --ds-color-text-on-brand: #FFFFFF; --ds-color-text-on-brand-selected: #8CB1FF; --ds-color-text-on-overlay: #14181F; --ds-color-line-weak: #222730; --ds-color-line-normal: #353C48; --ds-color-line-strong: #98A1AE; --ds-color-line-focus: #8CB1FF; --ds-color-line-on-brand-selected: #5B8DF7; --ds-color-action-primary: #5B8DF7; --ds-color-action-primary-hover: #8CB1FF; --ds-color-action-primary-pressed: #BAD1FF; --ds-color-action-on-primary: #0C0F14; --ds-color-action-subtle: #10295E; --ds-color-action-subtle-hover: #153B86; --ds-color-action-on-subtle: #BAD1FF; --ds-color-action-disabled: #222730; --ds-color-action-on-disabled: #646E7D; --ds-color-status-success: #4CC187; --ds-color-status-on-success: #0C0F14; --ds-color-status-success-bg: #222730; --ds-color-status-on-success-bg: #4CC187; --ds-color-status-warning: #F2B93B; --ds-color-status-on-warning: #0C0F14; --ds-color-status-warning-bg: #222730; --ds-color-status-on-warning-bg: #F2B93B; --ds-color-status-danger: #F0707D; --ds-color-status-on-danger: #0C0F14; --ds-color-status-danger-bg: #222730; --ds-color-status-on-danger-bg: #F0707D; --ds-color-status-info: #5B8DF7; --ds-color-status-on-info: #0C0F14; --ds-color-status-info-bg: #222730; --ds-color-status-on-info-bg: #8CB1FF; --ds-color-status-neutral: #98A1AE; --ds-color-status-on-neutral: #0C0F14; --ds-color-status-neutral-bg: #222730; --ds-color-status-on-neutral-bg: #DDE1E7; color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --ds-color-background-page: #0C0F14; --ds-color-background-surface: #14181F; --ds-color-background-subtle: #222730; --ds-color-background-brand: #0A1A3F; --ds-color-background-brand-hover: #10295E; --ds-color-background-overlay: #FFFFFF; --ds-color-text-normal: #F6F7F9; --ds-color-text-weak: #C5CBD4; --ds-color-text-weaker: #98A1AE; --ds-color-text-disabled: #4B5361; --ds-color-text-link: #8CB1FF; --ds-color-text-link-hover: #BAD1FF; --ds-color-text-on-brand: #FFFFFF; --ds-color-text-on-brand-selected: #8CB1FF; --ds-color-text-on-overlay: #14181F; --ds-color-line-weak: #222730; --ds-color-line-normal: #353C48; --ds-color-line-strong: #98A1AE; --ds-color-line-focus: #8CB1FF; --ds-color-line-on-brand-selected: #5B8DF7; --ds-color-action-primary: #5B8DF7; --ds-color-action-primary-hover: #8CB1FF; --ds-color-action-primary-pressed: #BAD1FF; --ds-color-action-on-primary: #0C0F14; --ds-color-action-subtle: #10295E; --ds-color-action-subtle-hover: #153B86; --ds-color-action-on-subtle: #BAD1FF; --ds-color-action-disabled: #222730; --ds-color-action-on-disabled: #646E7D; --ds-color-status-success: #4CC187; --ds-color-status-on-success: #0C0F14; --ds-color-status-success-bg: #222730; --ds-color-status-on-success-bg: #4CC187; --ds-color-status-warning: #F2B93B; --ds-color-status-on-warning: #0C0F14; --ds-color-status-warning-bg: #222730; --ds-color-status-on-warning-bg: #F2B93B; --ds-color-status-danger: #F0707D; --ds-color-status-on-danger: #0C0F14; --ds-color-status-danger-bg: #222730; --ds-color-status-on-danger-bg: #F0707D; --ds-color-status-info: #5B8DF7; --ds-color-status-on-info: #0C0F14; --ds-color-status-info-bg: #222730; --ds-color-status-on-info-bg: #8CB1FF; --ds-color-status-neutral: #98A1AE; --ds-color-status-on-neutral: #0C0F14; --ds-color-status-neutral-bg: #222730; --ds-color-status-on-neutral-bg: #DDE1E7; color-scheme: dark; } } /* shape: rounded. GroupUI default (vwgroup brand): pill interactive, 8px cards, 4px form fields */ :root { --ds-border-radius-xl: 999px; /* interactive: button, tag, chip, switch */ --ds-border-radius-m: 8px; /* cards, modal, popover, menu */ --ds-border-radius-s: 4px; /* form fields, checkbox, notification */ --ds-border-radius-round: 50%; /* avatar, switch knob, icon-button hover */ } /* design-md components: plain CSS on the --ds-* tokens. Derived from the scraped GroupUI "Modern UI" components, renamed .mui- -> .ds-. */ /* base: put class="ds-root" on (or any wrapper) */ .ds-root, .ds-root *, .ds-root *::before, .ds-root *::after { box-sizing: border-box; } .ds-root { margin: 0; font-family: var(--ds-font-family-primary); font-size: var(--ds-text-body-1-size); line-height: var(--ds-text-body-1-line-height); color: var(--ds-color-text-normal); background: var(--ds-color-background-page); -webkit-font-smoothing: antialiased; } .ds-text-display-1 { font-size: var(--ds-text-display-1-size); line-height: var(--ds-text-display-1-line-height); font-weight: var(--ds-text-display-1-weight); letter-spacing: var(--ds-text-display-1-letter-spacing); } .ds-text-display-2 { font-size: var(--ds-text-display-2-size); line-height: var(--ds-text-display-2-line-height); font-weight: var(--ds-text-display-2-weight); letter-spacing: var(--ds-text-display-2-letter-spacing); } .ds-text-display-3 { font-size: var(--ds-text-display-3-size); line-height: var(--ds-text-display-3-line-height); font-weight: var(--ds-text-display-3-weight); letter-spacing: var(--ds-text-display-3-letter-spacing); } .ds-text-h1 { font-size: var(--ds-text-h1-size); line-height: var(--ds-text-h1-line-height); font-weight: var(--ds-text-h1-weight); letter-spacing: var(--ds-text-h1-letter-spacing); } .ds-text-h2 { font-size: var(--ds-text-h2-size); line-height: var(--ds-text-h2-line-height); font-weight: var(--ds-text-h2-weight); letter-spacing: var(--ds-text-h2-letter-spacing); } .ds-text-h3 { font-size: var(--ds-text-h3-size); line-height: var(--ds-text-h3-line-height); font-weight: var(--ds-text-h3-weight); letter-spacing: var(--ds-text-h3-letter-spacing); } .ds-text-h4 { font-size: var(--ds-text-h4-size); line-height: var(--ds-text-h4-line-height); font-weight: var(--ds-text-h4-weight); letter-spacing: var(--ds-text-h4-letter-spacing); } .ds-text-h5 { font-size: var(--ds-text-h5-size); line-height: var(--ds-text-h5-line-height); font-weight: var(--ds-text-h5-weight); letter-spacing: var(--ds-text-h5-letter-spacing); } .ds-text-h6 { font-size: var(--ds-text-h6-size); line-height: var(--ds-text-h6-line-height); font-weight: var(--ds-text-h6-weight); letter-spacing: var(--ds-text-h6-letter-spacing); } .ds-text-body-1 { font-size: var(--ds-text-body-1-size); line-height: var(--ds-text-body-1-line-height); font-weight: var(--ds-text-body-1-weight); letter-spacing: var(--ds-text-body-1-letter-spacing); } .ds-text-body-2 { font-size: var(--ds-text-body-2-size); line-height: var(--ds-text-body-2-line-height); font-weight: var(--ds-text-body-2-weight); letter-spacing: var(--ds-text-body-2-letter-spacing); } .ds-text-caption { font-size: var(--ds-text-caption-size); line-height: var(--ds-text-caption-line-height); font-weight: var(--ds-text-caption-weight); letter-spacing: var(--ds-text-caption-letter-spacing); } .ds-text-label { font-size: var(--ds-text-label-size); line-height: var(--ds-text-label-line-height); font-weight: var(--ds-text-label-weight); letter-spacing: var(--ds-text-label-letter-spacing); } /* ---------------------------------------------------------------- focus */ .ds-btn:focus-visible, .ds-link:focus-visible, .ds-input:focus-visible, .ds-select:focus-visible, .ds-check:focus-visible, .ds-switch:focus-visible, .ds-tabs__tab:focus-visible { outline: var(--ds-border-width-m) solid var(--ds-color-line-focus); outline-offset: 2px; } /* ---------------------------------------------------------------- button * (also on ) * Optional icon: before/after the label; icon-only: add .ds-btn--icon and an aria-label. */ .ds-btn { --_pad-y: calc(var(--ds-spacing-200) - var(--ds-border-width-s)); --_pad-x: calc(var(--ds-spacing-500) - var(--ds-border-width-s)); display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-spacing-200); padding: var(--_pad-y) var(--_pad-x); border: var(--ds-border-width-s) solid var(--ds-color-action-primary); border-radius: var(--ds-border-radius-xl); font: inherit; font-size: var(--ds-font-size-400); font-weight: var(--ds-font-weight-medium); line-height: var(--ds-line-height-xxl); letter-spacing: var(--ds-letter-spacing-regular); text-decoration: none; white-space: nowrap; cursor: pointer; background: var(--ds-color-action-primary); color: var(--ds-color-action-on-primary); transition: background var(--ds-motion-duration-fast) var(--ds-motion-easing-standard), border-color var(--ds-motion-duration-fast) var(--ds-motion-easing-standard); } .ds-btn:hover { background: var(--ds-color-action-primary-hover); border-color: var(--ds-color-action-primary-hover); } .ds-btn:active { background: var(--ds-color-action-primary-pressed); border-color: var(--ds-color-action-primary-pressed); } .ds-btn--secondary { background: transparent; color: var(--ds-color-action-primary); } .ds-btn--secondary:hover { background: var(--ds-color-action-subtle); border-color: var(--ds-color-action-primary); } .ds-btn--secondary:active { background: var(--ds-color-action-subtle-hover); border-color: var(--ds-color-action-primary); } .ds-btn--tertiary { background: transparent; border-color: transparent; color: var(--ds-color-action-primary); } .ds-btn--tertiary:hover { background: var(--ds-color-action-subtle); border-color: transparent; } .ds-btn--tertiary:active { background: var(--ds-color-action-subtle-hover); border-color: transparent; } .ds-btn--s { --_pad-x: calc(var(--ds-spacing-400) - var(--ds-border-width-s)); font-size: var(--ds-font-size-350); line-height: var(--ds-line-height-m); } .ds-btn--l { --_pad-x: calc(var(--ds-spacing-600) - var(--ds-border-width-s)); font-size: var(--ds-font-size-450); } .ds-btn--icon { --_pad-x: var(--_pad-y); } .ds-btn .ds-icon { --ds-icon-size: 24px; margin-block: -2px; } .ds-btn--s .ds-icon { --ds-icon-size: 16px; margin-block: 0; } .ds-btn:disabled, .ds-btn[aria-disabled='true'] { background: var(--ds-color-action-disabled); border-color: var(--ds-color-action-disabled); color: var(--ds-color-action-on-disabled); cursor: not-allowed; } .ds-btn--secondary:disabled { background: transparent; border-color: var(--ds-color-line-normal); } .ds-btn--tertiary:disabled { background: transparent; border-color: transparent; } /* ---------------------------------------------------------------- link * Text medium weight, underlined (links in running text must not rely on colour alone, WCAG 1.4.1) * no underline until hover: only for navigation-like lists where the context makes the link obvious * text colour instead of link colour */ .ds-link { color: var(--ds-color-text-link); font-weight: var(--ds-font-weight-medium); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; border-radius: var(--ds-border-radius-s); } .ds-link:hover { color: var(--ds-color-text-link-hover); text-decoration-thickness: 2px; } .ds-link--plain { text-decoration: none; } .ds-link--plain:hover { text-decoration: underline; } .ds-link--secondary { color: var(--ds-color-text-normal); } .ds-link--secondary:hover { color: var(--ds-color-text-link-hover); } /* ---------------------------------------------------------------- tag * Variants: (default) solid | --secondary subtle background + border | --tertiary subtle background, no border * Colours: (default) info | --success | --warning | --danger | --neutral Shape: pill (default) | --square * Optional icon: as first child (inherits the status colour in secondary/tertiary). */ .ds-tag { --_strong: var(--ds-color-status-info); --_on: var(--ds-color-status-on-info); --_subtle: var(--ds-color-status-info-bg); display: inline-flex; align-items: center; gap: var(--ds-spacing-100); padding-inline: var(--ds-spacing-200); border: var(--ds-border-width-s) solid var(--_strong); border-radius: var(--ds-border-radius-xl); background: var(--_strong); color: var(--_on); font-size: var(--ds-font-size-300); font-weight: var(--ds-font-weight-medium); line-height: calc(var(--ds-spacing-600) - 2 * var(--ds-border-width-s)); letter-spacing: var(--ds-letter-spacing-regular); white-space: nowrap; } .ds-tag--success { --_strong: var(--ds-color-status-success); --_on: var(--ds-color-status-on-success); --_subtle: var(--ds-color-status-success-bg); } .ds-tag--warning { --_strong: var(--ds-color-status-warning); --_on: var(--ds-color-status-on-warning); --_subtle: var(--ds-color-status-warning-bg); } .ds-tag--danger { --_strong: var(--ds-color-status-danger); --_on: var(--ds-color-status-on-danger); --_subtle: var(--ds-color-status-danger-bg); } .ds-tag--neutral { --_strong: var(--ds-color-status-neutral); --_on: var(--ds-color-status-on-neutral); --_subtle: var(--ds-color-status-neutral-bg); } .ds-tag--secondary { background: var(--_subtle); color: var(--ds-color-text-normal); } .ds-tag--tertiary { background: var(--_subtle); border-color: transparent; color: var(--ds-color-text-normal); } .ds-tag--square { border-radius: var(--ds-border-radius-s); } .ds-tag__icon { width: 16px; height: 16px; flex: none; } .ds-tag--secondary .ds-tag__icon, .ds-tag--tertiary .ds-tag__icon { color: var(--_strong); } /* ---------------------------------------------------------------- card */ .ds-card { padding: var(--ds-spacing-600); border: var(--ds-border-width-s) solid var(--ds-color-line-weak); border-radius: var(--ds-border-radius-m); background: var(--ds-color-background-surface); color: var(--ds-color-text-normal); box-shadow: var(--ds-shadow-none); } .ds-card--interactive { cursor: pointer; transition: box-shadow var(--ds-motion-duration-normal) var(--ds-motion-easing-standard); } .ds-card--interactive:hover { box-shadow: var(--ds-shadow-m); } .ds-card__title { margin: 0; font-size: var(--ds-text-h5-size); line-height: var(--ds-text-h5-line-height); font-weight: var(--ds-text-h5-weight); } .ds-card__text { margin: 0; color: var(--ds-color-text-normal); font-size: var(--ds-text-body-2-size); line-height: var(--ds-text-body-2-line-height); } /* ---------------------------------------------------------------- form fields * Field: LabelHint * error: add .ds-field--error, aria-invalid="true" on the control and Message * Select:
* Check: * Switch: */ .ds-field { display: flex; flex-direction: column; gap: var(--ds-spacing-100); } .ds-field__label { font-size: var(--ds-text-body-2-size); line-height: var(--ds-line-height-xxl); font-weight: var(--ds-font-weight-bold); color: var(--ds-color-text-normal); } .ds-field__hint { font-size: var(--ds-text-caption-size); line-height: var(--ds-text-caption-line-height); color: var(--ds-color-text-weak); } .ds-field__error { display: flex; gap: var(--ds-spacing-100); align-items: center; font-size: var(--ds-text-caption-size); color: var(--ds-color-status-on-danger-bg); } .ds-field--error .ds-input, .ds-field--error .ds-select { border-color: var(--ds-color-status-danger); } .ds-input, .ds-select { width: 100%; height: 40px; padding: 0 calc(var(--ds-spacing-300) - var(--ds-border-width-s)); border: var(--ds-border-width-s) solid var(--ds-color-line-strong); border-radius: var(--ds-border-radius-s); background: var(--ds-color-background-surface); color: var(--ds-color-text-normal); font: inherit; font-size: var(--ds-text-body-1-size); line-height: var(--ds-text-body-1-line-height); } .ds-input::placeholder { color: var(--ds-color-text-weaker); } .ds-input:hover, .ds-select:hover { border-color: var(--ds-color-text-normal); } .ds-input:focus, .ds-select:focus { border-color: var(--ds-color-line-focus); outline: var(--ds-border-width-m) solid var(--ds-color-line-focus); outline-offset: -2px; } .ds-input:disabled, .ds-select:disabled { background: var(--ds-color-background-subtle); color: var(--ds-color-text-disabled); border-color: var(--ds-color-line-normal); cursor: not-allowed; } .ds-input[aria-invalid='true'], .ds-select[aria-invalid='true'] { border-color: var(--ds-color-status-danger); } .ds-field:has(:disabled) .ds-field__label { color: var(--ds-color-text-disabled); } .ds-select:has(option[value='']:checked) { color: var(--ds-color-text-weaker); } .ds-select option { color: var(--ds-color-text-normal); } .ds-select-wrap { position: relative; display: block; } .ds-select { appearance: none; padding-right: var(--ds-spacing-1200); cursor: pointer; } .ds-select-wrap > .ds-icon { --ds-icon-size: 24px; position: absolute; top: 50%; right: var(--ds-spacing-300); transform: translateY(-50%); color: var(--ds-color-action-primary); pointer-events: none; } .ds-check-label { display: inline-flex; align-items: center; gap: var(--ds-spacing-200); min-height: 24px; cursor: pointer; } .ds-check-label:has(:disabled) { color: var(--ds-color-text-disabled); cursor: not-allowed; } /* checkbox and radio: 24 px */ .ds-check { appearance: none; position: relative; flex: none; width: 24px; height: 24px; margin: 0; border: var(--ds-border-width-s) solid var(--ds-color-line-strong); border-radius: var(--ds-border-radius-s); background: var(--ds-color-background-surface); cursor: inherit; } .ds-check[type='radio'] { border-radius: 50%; } .ds-check:hover:not(:disabled) { border-color: var(--ds-color-action-primary); } .ds-check:checked, .ds-check:indeterminate { background: var(--ds-color-action-primary); border-color: var(--ds-color-action-primary); } .ds-check::after { content: ''; position: absolute; inset: 3px; background: var(--ds-color-action-on-primary); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; opacity: 0; } .ds-check:checked::after, .ds-check:indeterminate::after { opacity: 1; } .ds-check:indeterminate::after { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' d='M6 12h12'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='3' stroke-linecap='round' d='M6 12h12'/%3E%3C/svg%3E"); } .ds-check[type='radio']:checked { background: var(--ds-color-background-surface); } .ds-check[type='radio']::after { inset: 5px; border-radius: 50%; background: var(--ds-color-action-primary); -webkit-mask: none; mask: none; } .ds-check:disabled { background: var(--ds-color-action-disabled); border-color: var(--ds-color-line-normal); } .ds-check:disabled:checked::after { background: var(--ds-color-action-on-disabled); } .ds-check[type='radio']:disabled:checked { background: var(--ds-color-action-disabled); } /* switch: 56 x 32, knob 28 */ .ds-switch { appearance: none; position: relative; flex: none; width: 56px; height: 32px; margin: 0; border-radius: var(--ds-border-radius-xl); background: var(--ds-color-line-strong); cursor: inherit; transition: background var(--ds-motion-duration-fast) var(--ds-motion-easing-standard); } .ds-switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 28px; height: 28px; border-radius: var(--ds-border-radius-round); background: var(--ds-color-background-surface); transition: transform var(--ds-motion-duration-fast) var(--ds-motion-easing-standard); } .ds-switch:checked { background: var(--ds-color-action-primary); } .ds-switch:checked::after { transform: translateX(24px); background: var(--ds-color-action-on-primary); } .ds-switch:disabled { opacity: var(--ds-opacity-disabled); } /* ---------------------------------------------------------------- icon */ .ds-icon { width: var(--ds-icon-size, 24px); height: var(--ds-icon-size, 24px); flex: none; fill: currentColor; } /* ---------------------------------------------------------------- notification (inline) * Markup: * Severities: (default) information | --success | --warning | --danger. Icons: info, success, warning, error. */ .ds-notification { --_strong: var(--ds-color-status-info); --_bg: var(--ds-color-status-info-bg); display: flex; align-items: flex-start; gap: var(--ds-spacing-200); padding: var(--ds-spacing-400); border-radius: var(--ds-border-radius-s); background: var(--_bg); color: var(--ds-color-text-normal); font-size: var(--ds-text-body-1-size); line-height: var(--ds-text-body-1-line-height); } .ds-notification--success { --_strong: var(--ds-color-status-success); --_bg: var(--ds-color-status-success-bg); } .ds-notification--warning { --_strong: var(--ds-color-status-warning); --_bg: var(--ds-color-status-warning-bg); } .ds-notification--danger { --_strong: var(--ds-color-status-danger); --_bg: var(--ds-color-status-danger-bg); } .ds-notification__icon { color: var(--_strong); } .ds-notification__body { display: flex; flex: 1; flex-direction: column; gap: var(--ds-spacing-100); min-width: 0; align-self: center; } .ds-notification__title { font-weight: var(--ds-font-weight-bold); } .ds-notification__close { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--ds-border-radius-s); background: transparent; color: var(--ds-color-text-weak); cursor: pointer; } .ds-notification__close:hover { color: var(--ds-color-text-normal); background: var(--ds-color-background-subtle); } .ds-notification__close:focus-visible { outline: var(--ds-border-width-m) solid var(--ds-color-line-focus); outline-offset: 1px; } .ds-notification__close .ds-icon { --ds-icon-size: 16px; } /* ---------------------------------------------------------------- divider, avatar, badge */ .ds-divider { height: 0; margin: 0; border: 0; border-top: var(--ds-border-width-s) solid var(--ds-color-line-weak); } /* avatar: MW (initials) or an */ .ds-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border: var(--ds-border-width-s) solid var(--ds-color-background-surface); border-radius: var(--ds-border-radius-round); background: var(--ds-color-action-primary); color: var(--ds-color-action-on-primary); font-size: var(--ds-font-size-300); font-weight: var(--ds-font-weight-normal); line-height: 1; object-fit: cover; overflow: hidden; } .ds-avatar--s { width: 24px; height: 24px; font-size: var(--ds-font-size-250); } .ds-avatar--l { width: 48px; height: 48px; font-size: var(--ds-font-size-400); } .ds-avatar--inverted { background: var(--ds-color-text-on-brand); color: var(--ds-color-background-brand); border-color: var(--ds-color-background-brand); } .ds-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 var(--ds-spacing-150); border-radius: var(--ds-border-radius-xl); background: var(--ds-color-status-danger); color: var(--ds-color-background-surface); font-size: var(--ds-text-caption-size); font-weight: var(--ds-font-weight-bold); line-height: 1; } /* ---------------------------------------------------------------- tabs (markup: role=tablist > button.ds-tabs__tab[aria-selected]) */ .ds-tabs { display: flex; gap: var(--ds-spacing-100); border-bottom: var(--ds-border-width-s) solid var(--ds-color-line-weak); } .ds-tabs__tab { padding: var(--ds-spacing-300) var(--ds-spacing-400); margin-bottom: -1px; border: 0; border-bottom: var(--ds-border-width-m) solid transparent; background: transparent; color: var(--ds-color-text-weak); font: inherit; font-weight: var(--ds-font-weight-medium); cursor: pointer; } .ds-tabs__tab:hover { color: var(--ds-color-text-normal); } .ds-tabs__tab[aria-selected='true'] { color: var(--ds-color-action-primary); border-bottom-color: var(--ds-color-action-primary); } /* ================================================================ navigation */ /* ---------------------------------------------------------------- brand lockup * Modern UIApplication * The mark is a placeholder; the real logo files are defined by the brand owners. */ .ds-brand { display: inline-flex; align-items: center; gap: var(--ds-spacing-300); color: inherit; text-decoration: none; } .ds-brand__mark { position: relative; width: 28px; height: 28px; border-radius: var(--ds-border-radius-m); background: var(--ds-color-line-on-brand-selected); } .ds-brand__mark::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--ds-color-background-brand); } .ds-brand__name { white-space: nowrap; font-size: var(--ds-font-size-450); font-weight: var(--ds-font-weight-bold); letter-spacing: var(--ds-letter-spacing-heading); } .ds-brand__app { padding-left: var(--ds-spacing-300); border-left: var(--ds-border-width-s) solid currentColor; font-size: var(--ds-text-body-1-size); line-height: var(--ds-spacing-800); opacity: 0.85; } /* ---------------------------------------------------------------- global top navigation *
* ... * *
...
* *
* Small screens (< 720 px): the items collapse behind the burger; add .ds-nav-top--open (and aria-expanded="true") to show them. */ .ds-nav-top { position: relative; display: flex; align-items: stretch; gap: var(--ds-spacing-400); height: 64px; padding: 0 var(--ds-spacing-600); background: var(--ds-color-background-brand); color: var(--ds-color-text-on-brand); } .ds-nav-top .ds-brand { align-self: center; margin-right: var(--ds-spacing-200); } .ds-nav-top__items { display: flex; flex: 1; align-items: stretch; justify-content: flex-end; } .ds-nav-top__item { position: relative; display: inline-flex; align-items: center; padding: 0 var(--ds-spacing-300); color: inherit; font-size: var(--ds-text-body-1-size); font-weight: var(--ds-font-weight-medium); text-decoration: none; white-space: nowrap; } .ds-nav-top__item:hover { background: var(--ds-color-background-brand-hover); } .ds-nav-top__item[aria-current='page'] { color: var(--ds-color-text-on-brand-selected); } .ds-nav-top__item[aria-current='page']::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--ds-color-line-on-brand-selected); } .ds-nav-top__item:focus-visible, .ds-nav-top__utility:focus-visible, .ds-nav-top__burger:focus-visible { outline: var(--ds-border-width-m) solid var(--ds-color-text-on-brand); outline-offset: -2px; } .ds-nav-top__utilities { display: flex; align-items: stretch; padding-left: var(--ds-spacing-400); border-left: var(--ds-border-width-s) solid var(--ds-color-background-brand-hover); margin-block: var(--ds-spacing-400); } .ds-nav-top__utility { display: inline-flex; align-items: center; justify-content: center; width: 48px; margin-block: calc(var(--ds-spacing-400) * -1); padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; } .ds-nav-top__utility:hover { background: var(--ds-color-background-brand-hover); } .ds-nav-top__burger { display: none; margin-left: auto; width: 48px; border: 0; background: transparent; color: inherit; cursor: pointer; } @media (max-width: 719px) { .ds-nav-top { padding-inline: var(--ds-spacing-400); } .ds-nav-top__utilities { display: none; } .ds-nav-top__burger { display: inline-flex; align-items: center; justify-content: center; } .ds-nav-top__items { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: var(--ds-z-index-navigation); flex-direction: column; background: var(--ds-color-background-brand); box-shadow: var(--ds-shadow-m); } .ds-nav-top--open .ds-nav-top__items { display: flex; } .ds-nav-top__item { height: 48px; padding-inline: var(--ds-spacing-400); } .ds-nav-top__item[aria-current='page']::after { top: 0; right: auto; width: 4px; height: auto; } } /* ---------------------------------------------------------------- local side navigation * */ .ds-nav-side { display: flex; flex-direction: column; width: 320px; max-width: 100%; border-right: var(--ds-border-width-s) solid var(--ds-color-line-weak); background: var(--ds-color-background-surface); } .ds-nav-side__category { padding: var(--ds-spacing-600) var(--ds-spacing-600) var(--ds-spacing-200); color: var(--ds-color-text-weak); font-size: var(--ds-text-caption-size); font-weight: var(--ds-font-weight-bold); letter-spacing: 0.06em; text-transform: uppercase; } .ds-nav-side__item { position: relative; display: flex; align-items: center; gap: var(--ds-spacing-200); min-height: 48px; padding: var(--ds-spacing-300) var(--ds-spacing-600) calc(var(--ds-spacing-300) - 1px); border-bottom: var(--ds-border-width-s) solid var(--ds-color-line-weak); color: var(--ds-color-text-normal); font-size: var(--ds-text-body-1-size); font-weight: var(--ds-font-weight-medium); text-decoration: none; } .ds-nav-side__item:hover { background: var(--ds-color-background-subtle); } .ds-nav-side__item[aria-current='page'] { color: var(--ds-color-action-primary); } .ds-nav-side__item[aria-current='page']::after { content: ''; position: absolute; top: 0; right: calc(var(--ds-border-width-s) * -1); bottom: 0; width: 4px; background: var(--ds-color-action-primary); } .ds-nav-side__item[aria-disabled='true'] { color: var(--ds-color-text-disabled); pointer-events: none; } .ds-nav-side__item--sub { padding-left: calc(var(--ds-spacing-600) + var(--ds-spacing-300)); } .ds-nav-side__item:focus-visible { outline: var(--ds-border-width-m) solid var(--ds-color-line-focus); outline-offset: -2px; } /* ---------------------------------------------------------------- local top navigation * */ .ds-nav-local { display: flex; align-items: stretch; height: 48px; padding: 0 var(--ds-spacing-600); border-bottom: var(--ds-border-width-s) solid var(--ds-color-line-weak); justify-content: center; background: var(--ds-color-background-surface); overflow-x: auto; overflow-y: hidden; } .ds-nav-local__item { position: relative; display: inline-flex; align-items: center; padding: 0 var(--ds-spacing-300); color: var(--ds-color-text-normal); font-size: var(--ds-text-body-1-size); font-weight: var(--ds-font-weight-medium); text-decoration: none; white-space: nowrap; } .ds-nav-local__item:hover { background: var(--ds-color-background-subtle); } .ds-nav-local__item[aria-current='page'] { color: var(--ds-color-action-primary); } .ds-nav-local__item[aria-current='page']::after { content: ''; position: absolute; left: 0; right: 0; bottom: calc(var(--ds-border-width-s) * -1); height: 4px; background: var(--ds-color-action-primary); } .ds-nav-local__item:focus-visible { outline: var(--ds-border-width-m) solid var(--ds-color-line-focus); outline-offset: -2px; } /* ---------------------------------------------------------------- breadcrumbs * * The separator is drawn by CSS. */ .ds-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; font-size: var(--ds-text-body-1-size); line-height: 24px; } .ds-breadcrumbs li { display: inline-flex; align-items: center; } .ds-breadcrumbs li + li::before { content: ''; width: 16px; height: 16px; margin-inline: var(--ds-spacing-200); background: var(--ds-color-text-weaker); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; } .ds-breadcrumbs a { color: var(--ds-color-text-link); font-weight: var(--ds-font-weight-medium); text-decoration: none; border-radius: var(--ds-border-radius-s); } .ds-breadcrumbs a:hover { color: var(--ds-color-text-link-hover); text-decoration: underline; } .ds-breadcrumbs a:focus-visible { outline: var(--ds-border-width-m) solid var(--ds-color-line-focus); outline-offset: 2px; } .ds-breadcrumbs [aria-current='page'] { color: var(--ds-color-text-weak); font-weight: var(--ds-font-weight-medium); } /* ================================================================ page shell */ /* *
*
optional banner
*
...
*
optional
*
(omit for pages without side navigation) *
...content...
*
* * Default: the page scrolls as a whole, header and side navigation stay in view (sticky). * --app: fixed to its container (give the container a height, e.g. body { height: 100vh }); only the content scrolls. * Below 960 px the side navigation is hidden; add .ds-page--nav-open to show it as a panel (use a burger button in the header). */ .ds-page { --_header: 64px; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; grid-template-areas: 'banner banner' 'header header' 'local local' 'nav content'; min-height: 100%; background: var(--ds-color-background-page); color: var(--ds-color-text-normal); } .ds-page__banner { grid-area: banner; } .ds-page__header { grid-area: header; position: sticky; top: 0; z-index: var(--ds-z-index-navigation); } .ds-page__local { grid-area: local; position: sticky; top: var(--_header); z-index: var(--ds-z-index-navigation); } .ds-page__nav { grid-area: nav; position: sticky; top: var(--_header); align-self: start; max-height: calc(100vh - var(--_header)); overflow-x: hidden; overflow-y: auto; background: var(--ds-color-background-surface); border-right: var(--ds-border-width-s) solid var(--ds-color-line-weak); z-index: var(--ds-z-index-navigation); } .ds-page__nav .ds-nav-side { border-right: 0; min-height: 100%; } .ds-page:not(:has(.ds-page__nav)) { grid-template-areas: 'banner banner' 'header header' 'local local' 'content content'; } .ds-page__content { grid-area: content; min-width: 0; background: var(--ds-color-background-page); } .ds-page__inner { --_margin: var(--ds-spacing-400); max-width: var(--ds-layout-max-width); margin-inline: auto; padding: var(--ds-spacing-600) var(--_margin); } @media (min-width: 600px) { .ds-page__inner { --_margin: var(--ds-spacing-600); } } @media (min-width: 960px) { .ds-page__inner { --_margin: var(--ds-spacing-1200); } } @media (min-width: 1280px) { .ds-page__inner { --_margin: 72px; } } @media (min-width: 1600px) { .ds-page__inner { --_margin: var(--ds-spacing-2400); } } .ds-page--app { height: 100%; min-height: 0; grid-template-rows: auto auto auto minmax(0, 1fr); } .ds-page--app .ds-page__header, .ds-page--app .ds-page__local, .ds-page--app .ds-page__nav { position: static; } .ds-page--app .ds-page__nav { max-height: none; } .ds-page--app .ds-page__content { overflow: auto; } @media (max-width: 959px) { .ds-page { grid-template-areas: 'banner' 'header' 'local' 'content'; grid-template-columns: minmax(0, 1fr); } .ds-page:not(:has(.ds-page__nav)) { grid-template-areas: 'banner' 'header' 'local' 'content'; } .ds-page__nav { display: none; } .ds-page--nav-open .ds-page__nav { display: block; position: fixed; inset: var(--_header) 0 0 0; max-height: none; z-index: var(--ds-z-index-modal); box-shadow: var(--ds-shadow-m); } .ds-page--nav-open .ds-nav-side { width: 100%; } } /* ================================================================ batch 2: pagination, accordion, global side navigation */ /* ---------------------------------------------------------------- pagination * * With page size: wrap in
and add Showing 1 - 25, * a
with a select and a label. */ .ds-pagination { display: inline-flex; align-items: center; gap: var(--ds-spacing-100); } .ds-pagination__page, .ds-pagination__nav { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 var(--ds-spacing-200); border: 0; border-radius: var(--ds-border-radius-xl); background: transparent; color: var(--ds-color-action-primary); font: inherit; font-size: var(--ds-font-size-350); font-weight: var(--ds-font-weight-medium); line-height: 1; cursor: pointer; } .ds-pagination__page:hover, .ds-pagination__nav:hover:not(:disabled) { background: var(--ds-color-action-subtle); } .ds-pagination__page[aria-current='page'] { background: var(--ds-color-action-primary); color: var(--ds-color-action-on-primary); cursor: default; } .ds-pagination__page:focus-visible, .ds-pagination__nav:focus-visible { outline: var(--ds-border-width-m) solid var(--ds-color-line-focus); outline-offset: 1px; } .ds-pagination__nav { padding: 0; } .ds-pagination__nav .ds-icon { --ds-icon-size: 20px; } .ds-pagination__nav:disabled { color: var(--ds-color-text-disabled); cursor: not-allowed; } .ds-pagination__gap { min-width: 24px; text-align: center; color: var(--ds-color-text-weak); font-size: var(--ds-font-size-350); } .ds-pagination-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%; gap: var(--ds-spacing-300) var(--ds-spacing-600); } .ds-pagination__summary { color: var(--ds-color-text-normal); font-size: var(--ds-text-body-2-size); } .ds-pagination__size { display: inline-flex; align-items: center; gap: var(--ds-spacing-200); padding-left: var(--ds-spacing-600); border-left: var(--ds-border-width-s) solid var(--ds-color-line-weak); font-size: var(--ds-text-body-2-size); } .ds-pagination__size .ds-select-wrap { width: 88px; } /* ---------------------------------------------------------------- accordion (native
, works without JavaScript) *
*
* Titlechevron-down *
Content
*
*
* Disabled item: aria-disabled="true" on the
. Exclusive (only one open): give all
the same name="group" attribute. */ .ds-accordion { border-top: var(--ds-border-width-s) solid var(--ds-color-line-weak); } .ds-accordion__item { border-bottom: var(--ds-border-width-s) solid var(--ds-color-line-weak); } .ds-accordion__header { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-spacing-300); padding: var(--ds-spacing-300) 0; cursor: pointer; list-style: none; color: var(--ds-color-text-normal); } .ds-accordion__header::-webkit-details-marker { display: none; } .ds-accordion__title { font-size: var(--ds-text-h6-size); line-height: var(--ds-text-h6-line-height); font-weight: var(--ds-text-h6-weight); letter-spacing: var(--ds-letter-spacing-heading); } .ds-accordion__header .ds-icon { color: var(--ds-color-action-primary); transition: transform var(--ds-motion-duration-normal) var(--ds-motion-easing-standard); } .ds-accordion__item[open] .ds-accordion__header .ds-icon { transform: rotate(180deg); } .ds-accordion__header:hover .ds-accordion__title { color: var(--ds-color-action-primary); } .ds-accordion__header:focus-visible { outline: var(--ds-border-width-m) solid var(--ds-color-line-focus); outline-offset: 2px; border-radius: var(--ds-border-radius-s); } .ds-accordion__content { padding: 0 0 var(--ds-spacing-300); color: var(--ds-color-text-normal); } .ds-accordion__item[aria-disabled='true'] .ds-accordion__header { color: var(--ds-color-text-disabled); pointer-events: none; } .ds-accordion__item[aria-disabled='true'] .ds-icon { color: var(--ds-color-text-disabled); } /* ---------------------------------------------------------------- global side navigation * * --rail: icon only (72 px wide); keep the label in the markup for screen readers, it is hidden visually; add title/aria-label. */ .ds-nav-global { display: flex; flex-direction: column; gap: var(--ds-spacing-600); width: 320px; max-width: 100%; min-height: 100%; background: var(--ds-color-background-brand); color: var(--ds-color-text-on-brand); } .ds-nav-global > .ds-brand { height: 64px; padding: 0 var(--ds-spacing-600); } .ds-nav-global__items { display: flex; flex-direction: column; } .ds-nav-global__item { position: relative; display: flex; align-items: center; gap: var(--ds-spacing-200); min-height: 48px; padding: var(--ds-spacing-300) var(--ds-spacing-600); color: inherit; font-size: var(--ds-text-body-1-size); font-weight: var(--ds-font-weight-medium); text-decoration: none; } .ds-nav-global__item:hover { background: var(--ds-color-background-brand-hover); } .ds-nav-global__item[aria-current='page'] { color: var(--ds-color-text-on-brand-selected); } .ds-nav-global__item[aria-current='page']::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 4px; background: var(--ds-color-line-on-brand-selected); } .ds-nav-global__item:focus-visible { outline: var(--ds-border-width-m) solid var(--ds-color-text-on-brand); outline-offset: -2px; } .ds-nav-global--rail { width: 72px; } .ds-nav-global--rail > .ds-brand { justify-content: center; padding: 0; } .ds-nav-global--rail .ds-brand__name, .ds-nav-global--rail .ds-brand__app { display: none; } .ds-nav-global--rail .ds-nav-global__item { justify-content: center; padding-inline: 0; } .ds-nav-global--rail .ds-nav-global__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ================================================================ batch 3: nested side navigation, burger menu */ /* ---------------------------------------------------------------- nested items in the (local or global) side navigation *
* ...Parentchevron-down * Sub item ... *
*/ .ds-nav-side__group > summary { list-style: none; cursor: pointer; } .ds-nav-side__group > summary::-webkit-details-marker { display: none; } .ds-nav-side__chevron { margin-left: auto; transition: transform var(--ds-motion-duration-normal) var(--ds-motion-easing-standard); } .ds-nav-side__group[open] > summary .ds-nav-side__chevron { transform: rotate(180deg); } /* ---------------------------------------------------------------- burger menu (panel of the small-screen navigation) * Place the panel directly below the header; the header has the toggle (.ds-nav-top__burger). *
data-open shows the panel (set it from the toggle) * *
*/ .ds-burger { position: relative; } .ds-burger__panel { display: none; position: absolute; top: 0; left: 0; right: 0; z-index: var(--ds-z-index-navigation); min-height: 330px; padding: var(--ds-spacing-600) 0; background: var(--ds-color-background-brand); color: var(--ds-color-text-on-brand); overflow-y: auto; } .ds-burger[data-open] .ds-burger__panel { display: block; } .ds-burger__level { display: flex; flex-direction: column; min-height: 100%; } .ds-burger__level[hidden] { display: none; } .ds-burger__item { position: relative; display: flex; align-items: center; gap: var(--ds-spacing-200); width: 100%; min-height: 48px; padding: var(--ds-spacing-300) var(--ds-spacing-600); border: 0; background: transparent; color: inherit; font: inherit; font-size: var(--ds-text-body-1-size); font-weight: var(--ds-font-weight-medium); text-align: left; text-decoration: none; cursor: pointer; } .ds-burger__item:hover { background: var(--ds-color-background-brand-hover); } .ds-burger__item[aria-current='page'] { color: var(--ds-color-text-on-brand-selected); } .ds-burger__item[aria-current='page']::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 4px; background: var(--ds-color-line-on-brand-selected); } .ds-burger__item--drill { justify-content: space-between; } .ds-burger__item:focus-visible { outline: var(--ds-border-width-m) solid var(--ds-color-text-on-brand); outline-offset: -2px; } .ds-burger__category { padding: var(--ds-spacing-300) var(--ds-spacing-600); font-size: var(--ds-text-caption-size); font-weight: var(--ds-font-weight-bold); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.7; } .ds-burger__utilities { margin-top: auto; padding-top: var(--ds-spacing-1200); } /* ================================================================ batch 4: tooltip, toast, modal */ /* ---------------------------------------------------------------- button on dark surfaces (toast, header, banner) * add .ds-btn--inverted to a secondary / tertiary / primary button */ .ds-btn--inverted.ds-btn--secondary { color: var(--ds-color-text-on-brand); border-color: var(--ds-color-text-on-brand); } .ds-btn--inverted.ds-btn--secondary:hover { background: var(--ds-color-background-brand-hover); border-color: var(--ds-color-text-on-brand); } .ds-btn--inverted.ds-btn--tertiary { color: var(--ds-color-text-on-brand); } .ds-btn--inverted.ds-btn--tertiary:hover { background: var(--ds-color-background-brand-hover); } .ds-btn--inverted:not(.ds-btn--secondary):not(.ds-btn--tertiary) { background: var(--ds-color-text-on-brand); border-color: var(--ds-color-text-on-brand); color: var(--ds-color-background-brand); } .ds-btn--inverted:not(.ds-btn--secondary):not(.ds-btn--tertiary):hover { background: var(--ds-color-action-subtle-hover); border-color: var(--ds-color-action-subtle-hover); } .ds-btn--inverted:focus-visible { outline-color: var(--ds-color-text-on-brand); } /* ---------------------------------------------------------------- tooltip * * * Text * * Opens on hover and keyboard focus (CSS only); data-visible forces it open. Keep the text short; no interactive content. */ .ds-tooltip { position: relative; display: inline-flex; } .ds-tooltip__content { position: absolute; z-index: var(--ds-z-index-tooltip); width: max-content; max-width: 280px; padding: var(--ds-spacing-300); border-radius: var(--ds-border-radius-s); background: var(--ds-color-background-brand); color: var(--ds-color-text-on-brand); box-shadow: var(--ds-shadow-m); font-size: var(--ds-text-body-2-size); font-weight: var(--ds-font-weight-normal); line-height: var(--ds-text-body-2-line-height); text-align: left; visibility: hidden; opacity: 0; pointer-events: none; transition: opacity var(--ds-motion-duration-fast) var(--ds-motion-easing-standard); } .ds-tooltip__content::after { content: ''; position: absolute; width: 10px; height: 10px; background: inherit; transform: rotate(45deg); } .ds-tooltip:hover .ds-tooltip__content, .ds-tooltip:focus-within .ds-tooltip__content, .ds-tooltip[data-visible] .ds-tooltip__content { visibility: visible; opacity: 1; } .ds-tooltip, .ds-tooltip[data-position='top'] { --_x: -50%; } .ds-tooltip .ds-tooltip__content, .ds-tooltip[data-position='top'] .ds-tooltip__content { bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); } .ds-tooltip .ds-tooltip__content::after, .ds-tooltip[data-position='top'] .ds-tooltip__content::after { bottom: -5px; left: calc(50% - 5px); } .ds-tooltip[data-position='bottom'] .ds-tooltip__content { top: calc(100% + 10px); bottom: auto; left: 50%; transform: translateX(-50%); } .ds-tooltip[data-position='bottom'] .ds-tooltip__content::after { top: -5px; bottom: auto; left: calc(50% - 5px); } .ds-tooltip[data-position='right'] .ds-tooltip__content { top: 50%; bottom: auto; left: calc(100% + 10px); transform: translateY(-50%); } .ds-tooltip[data-position='right'] .ds-tooltip__content::after { top: calc(50% - 5px); bottom: auto; left: -5px; } .ds-tooltip[data-position='left'] .ds-tooltip__content { top: 50%; bottom: auto; left: auto; right: calc(100% + 10px); transform: translateY(-50%); } .ds-tooltip[data-position='left'] .ds-tooltip__content::after { top: calc(50% - 5px); bottom: auto; left: auto; right: -5px; } /* ---------------------------------------------------------------- toast *
* Your changes were saved. * (optional action) * *
* Add .ds-toast--fixed to place it at the bottom centre of the viewport. Auto-dismiss is up to the script (about 5 s, longer with an action). */ .ds-toast { display: inline-grid; width: max-content; max-width: 100%; grid-auto-flow: column; align-items: center; gap: var(--ds-spacing-300); padding: var(--ds-spacing-300) var(--ds-spacing-400); border-radius: var(--ds-border-radius-s); background: var(--ds-color-background-brand); color: var(--ds-color-text-on-brand); box-shadow: var(--ds-shadow-m); font-size: var(--ds-text-body-1-size); line-height: var(--ds-text-body-1-line-height); } .ds-toast--fixed { position: fixed; bottom: var(--ds-spacing-600); left: 50%; transform: translateX(-50%); z-index: var(--ds-z-index-toast); max-width: calc(100vw - 32px); } .ds-toast__close { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--ds-border-radius-s); background: transparent; color: inherit; cursor: pointer; } .ds-toast__close:hover { background: var(--ds-color-background-brand-hover); } .ds-toast__close:focus-visible { outline: var(--ds-border-width-m) solid var(--ds-color-text-on-brand); outline-offset: 1px; } .ds-toast__close .ds-icon { --ds-icon-size: 16px; } /* ---------------------------------------------------------------- modal (native : top layer, focus trap, Escape come from the browser) * *

Headline

*
Content
*
* last in the markup (it is positioned top right) so the browser focuses the first action, not the X * * Open with dialog.showModal(), close with dialog.close(). Closing on a backdrop click: if (event.target === dialog) dialog.close(). */ .ds-modal { position: fixed; inset: 0; width: 100%; max-width: min(520px, calc(100vw - 2 * var(--ds-spacing-600))); max-height: calc(100vh - 2 * var(--ds-spacing-600)); margin: var(--ds-spacing-600) auto auto; padding: var(--ds-spacing-1000); border: 0; border-radius: var(--ds-border-radius-m); background: var(--ds-color-background-surface); color: var(--ds-color-text-normal); box-shadow: var(--ds-shadow-m); overflow: auto; } .ds-modal:not([open]) { display: none; } .ds-modal::backdrop { background: color-mix(in srgb, var(--ds-color-background-brand) 60%, transparent); } .ds-modal--s { max-width: min(400px, calc(100vw - 2 * var(--ds-spacing-600))); } .ds-modal--l { max-width: min(720px, calc(100vw - 2 * var(--ds-spacing-600))); } .ds-modal--xl { max-width: min(960px, calc(100vw - 2 * var(--ds-spacing-600))); } .ds-modal--centered { margin-block: auto; } .ds-modal__title { margin: 0 var(--ds-spacing-600) var(--ds-spacing-200) 0; font-size: var(--ds-text-h3-size); line-height: var(--ds-text-h3-line-height); font-weight: var(--ds-text-h3-weight); letter-spacing: var(--ds-letter-spacing-heading); } .ds-modal__body { font-size: var(--ds-text-body-1-size); line-height: var(--ds-text-body-1-line-height); } .ds-modal__actions { display: flex; flex-wrap: wrap; gap: var(--ds-spacing-400); margin-top: var(--ds-spacing-600); } .ds-modal__close { position: absolute; top: var(--ds-spacing-300); right: var(--ds-spacing-300); display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--ds-border-radius-s); background: transparent; color: var(--ds-color-text-normal); cursor: pointer; } .ds-modal__close:hover { background: var(--ds-color-background-subtle); } .ds-modal__close:focus-visible { outline: var(--ds-border-width-m) solid var(--ds-color-line-focus); outline-offset: 1px; } .ds-modal__close .ds-icon { --ds-icon-size: 20px; } /* ================================================================ batch 5: chip, banner, search field, menu, table */ /* ---------------------------------------------------------------- chip (interactive tag: link, filter or toggle) * (also on ) * Toggle/filter: aria-pressed="true" fills a secondary chip. Removable: add x icon as last child. */ .ds-chip { --_strong: var(--ds-color-status-info); --_on: var(--ds-color-status-on-info); --_subtle: var(--ds-color-status-info-bg); display: inline-flex; align-items: center; gap: var(--ds-spacing-100); padding: 0 var(--ds-spacing-200); border: var(--ds-border-width-s) solid var(--_strong); border-radius: var(--ds-border-radius-xl); background: var(--_strong); color: var(--_on); font: inherit; font-size: var(--ds-font-size-300); font-weight: var(--ds-font-weight-medium); line-height: calc(var(--ds-spacing-600) - 2 * var(--ds-border-width-s)); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background var(--ds-motion-duration-fast) var(--ds-motion-easing-standard); } .ds-chip--success { --_strong: var(--ds-color-status-success); --_on: var(--ds-color-status-on-success); --_subtle: var(--ds-color-status-success-bg); } .ds-chip--warning { --_strong: var(--ds-color-status-warning); --_on: var(--ds-color-status-on-warning); --_subtle: var(--ds-color-status-warning-bg); } .ds-chip--danger { --_strong: var(--ds-color-status-danger); --_on: var(--ds-color-status-on-danger); --_subtle: var(--ds-color-status-danger-bg); } .ds-chip--neutral { --_strong: var(--ds-color-status-neutral); --_on: var(--ds-color-status-on-neutral); --_subtle: var(--ds-color-status-neutral-bg); } .ds-chip:hover { filter: brightness(0.92); } .ds-chip--secondary { background: transparent; color: var(--_strong); } .ds-chip--secondary:hover { filter: none; background: var(--_subtle); } .ds-chip--secondary[aria-pressed='true'] { background: var(--_strong); color: var(--_on); } .ds-chip:focus-visible { outline: var(--ds-border-width-m) solid var(--ds-color-line-focus); outline-offset: 2px; } .ds-chip:disabled, .ds-chip[aria-disabled='true'] { background: var(--ds-color-action-disabled); border-color: var(--ds-color-action-disabled); color: var(--ds-color-action-on-disabled); cursor: not-allowed; filter: none; } .ds-chip__remove { display: inline-flex; margin-right: calc(var(--ds-spacing-100) * -1); border-radius: var(--ds-border-radius-round); } .ds-chip__remove .ds-icon { --ds-icon-size: 16px; } .ds-chip__remove:hover { background: color-mix(in srgb, currentColor 18%, transparent); } /* ---------------------------------------------------------------- banner (page level message: a full width notification) * Same markup as the notification, plus the modifier:
... * Place it at the top of the page (in .ds-page__banner). */ .ds-notification--banner { padding: var(--ds-spacing-300); border-radius: 0; } /* ---------------------------------------------------------------- menu / list of options (search suggestions, select list, context menu) *
  • Option
    • ...
* Put the label (with any highlight) in one : the item is a flex row, loose text nodes would get the icon gap. * Items can be / only visible while the field has text * *
* Type to filter *
*/ .ds-search__control { position: relative; } .ds-search__input { padding-left: 44px; padding-right: 44px; } .ds-search__input::-webkit-search-cancel-button { display: none; } .ds-search__icon { --ds-icon-size: 24px; position: absolute; top: 8px; left: var(--ds-spacing-300); color: var(--ds-color-action-primary); pointer-events: none; } .ds-search__clear { position: absolute; top: 8px; right: var(--ds-spacing-300); display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--ds-border-radius-s); background: transparent; color: var(--ds-color-text-weak); cursor: pointer; } .ds-search__clear .ds-icon { --ds-icon-size: 16px; } .ds-search__clear:hover { color: var(--ds-color-text-normal); background: var(--ds-color-background-subtle); } .ds-search__input:placeholder-shown ~ .ds-search__clear { display: none; } .ds-search__input:disabled ~ .ds-search__icon { color: var(--ds-color-text-disabled); } .ds-search__suggestions { position: absolute; top: calc(100% + 4px); left: 0; right: 0; } /* ---------------------------------------------------------------- table (semantic ) *
* *
Date
......
* Sort: the script sets aria-sort on the active column; the icon shows the state. Numbers: .ds-table__num (right aligned). */ .ds-table-wrap { overflow-x: auto; background: var(--ds-color-background-surface); } .ds-table { width: 100%; border-collapse: collapse; font-size: var(--ds-text-body-1-size); line-height: var(--ds-text-body-1-line-height); color: var(--ds-color-text-normal); } .ds-table th, .ds-table td { padding: var(--ds-spacing-200) var(--ds-spacing-300); border-bottom: var(--ds-border-width-s) solid var(--ds-color-line-weak); text-align: left; vertical-align: top; } .ds-table th { font-weight: var(--ds-font-weight-bold); white-space: nowrap; } .ds-table .ds-table__num { text-align: right; font-variant-numeric: tabular-nums; } .ds-table--striped tbody tr:nth-child(even) { background: color-mix(in srgb, var(--ds-color-background-subtle) 55%, transparent); } .ds-table--hover tbody tr:hover { background: var(--ds-color-background-subtle); } .ds-table__sort { display: inline-flex; align-items: center; gap: var(--ds-spacing-100); padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; } .ds-table__sort .ds-icon { --ds-icon-size: 16px; color: var(--ds-color-line-normal); } .ds-table__sort:hover .ds-icon { color: var(--ds-color-text-weak); } th[aria-sort='ascending'] .ds-table__sort .ds-icon, th[aria-sort='descending'] .ds-table__sort .ds-icon { color: var(--ds-color-action-primary); } th[aria-sort='descending'] .ds-table__sort .ds-icon { transform: scaleY(-1); } .ds-table__sort:focus-visible { outline: var(--ds-border-width-m) solid var(--ds-color-line-focus); outline-offset: 2px; border-radius: var(--ds-border-radius-s); }