/* ============================================================================= FROK / Bosch Digital Design System — framework-neutral token layer ----------------------------------------------------------------------------- Plain CSS custom properties + @font-face. No framework, no build step, no component classes. Wire these into whatever styling layer the app uses (Tailwind theme, shadcn vars, MUI palette, CSS modules, styled-components…) — see reference/adapters.md. Layer 1 raw tokens --frok-* leaf values Layer 2 semantic roles --frok--* what components consume Layer 3 your framework (adapters.md) map layer 2 into it Dark mode: put `.-dark-mode` OR `[data-theme="dark"]` on or any ancestor. Tokens cascade; component code does not change. ============================================================================= */ /* Layer order, declared before either file's rules so it holds whatever order the s land in. Later layers win, and UNLAYERED CSS beats every layer — which is the point: an application stylesheet overrides both of these without !important and without a specificity fight. The custom properties below stay OUTSIDE the layers deliberately. A token is meant to be overridable from anywhere, including an inline style, and putting :root in a layer would put it below any unlayered :root an app happens to have. Only the opinionated rules — the base reset, the focus ring, the supergraphic and icon helpers — are layered. */ @layer frok-base, frok-components; /* --- BoschSans (official brand face) --------------------------------------- Adjust the url() prefix to wherever you copied assets/fonts/. --------------------------------------------------------------------------- */ @font-face { font-family: 'BoschSans'; src: url('fonts/boschsans_regular.woff2') format('woff2'), url('fonts/boschsans_regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'BoschSans'; src: url('fonts/boschsans_regularItalic.woff2') format('woff2'), url('fonts/boschsans_regularItalic.woff') format('woff'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'BoschSans'; src: url('fonts/boschsans_medium.woff2') format('woff2'), url('fonts/boschsans_medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'BoschSans'; src: url('fonts/boschsans_mediumItalic.woff2') format('woff2'), url('fonts/boschsans_mediumItalic.woff') format('woff'); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: 'BoschSans'; src: url('fonts/boschsans_bold.woff2') format('woff2'), url('fonts/boschsans_bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'BoschSans'; src: url('fonts/boschsans_boldItalic.woff2') format('woff2'), url('fonts/boschsans_boldItalic.woff') format('woff'); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: 'BoschSans'; src: url('fonts/boschsans_black.woff2') format('woff2'), url('fonts/boschsans_black.woff') format('woff'); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: 'BoschSans'; src: url('fonts/boschsans_blackItalic.woff2') format('woff2'), url('fonts/boschsans_blackItalic.woff') format('woff'); font-weight: 900; font-style: italic; font-display: swap; } /* --- Bosch icon fonts — the ONLY sanctioned icon source; see reference/icons.md */ @font-face { font-family: 'Bosch-Icon'; src: url('fonts/bosch_icon.woff2') format('woff2'), url('fonts/bosch_icon.woff') format('woff'); font-weight: normal; font-style: normal; font-display: block; } @font-face { font-family: 'Bosch-UI-Icon'; src: url('fonts/bosch_ui_icon.woff2') format('woff2'), url('fonts/bosch_ui_icon.woff') format('woff'); font-weight: normal; font-style: normal; font-display: block; } @font-face { font-family: 'Bosch-UI-Icon-RTL'; src: url('fonts/bosch_ui_icon_rtl.woff2') format('woff2'), url('fonts/bosch_ui_icon_rtl.woff') format('woff'); font-weight: normal; font-style: normal; font-display: block; } :root { /* ====== 1. RAW TOKENS ==================================================== */ /* Brand blue */ --frok-blue-major: #007bc0; /* Bosch Engineered Blue — the accent */ --frok-blue-hovered: #00629a; --frok-blue-pressed: #004975; --frok-blue-luminous: #0096e8; /* dark-mode brand */ --frok-blue-ice: #d1e4ff; /* (FROK) accent-minor fill — see below */ --frok-blue-pale: #9dc9ff; /* (FROK) accent-minor hovered */ --frok-blue-bright: #56b0ff; /* (FROK) accent-minor pressed */ --frok-blue-abyss: #003253; /* (FROK) accent-minor fill, dark */ /* Brand accent hues. THESE ARE NOT THE SUPERGRAPHIC. Earlier versions of this file described them as a "brand stripe ramp" and built the top-of-page stripe out of them with a linear-gradient. That was wrong twice over: the Supergraphic is a registered trademark that may not be redrawn, and its spectrum runs red to *green* — this ramp stops at turquoise. The real stripe is a crop of the official asset; see .frok-supergraphic below and reference/brand-assets.md. Kept because they are genuine Bosch palette colours and apps reference them. Do not assemble a stripe from them. */ --frok-stripe-red: #ed0007; --frok-stripe-magenta: #b90276; --frok-stripe-violet: #50237f; --frok-stripe-blue-dark: #00629a; --frok-stripe-blue: #007bc0; --frok-stripe-blue-light: #008ecf; --frok-stripe-turquoise: #00a8b0; /* Deprecated aliases for the hues above. Kept so apps built against the old tokens keep resolving; prefer --frok-stripe-* in new code. */ --frok-super-red: var(--frok-stripe-red); --frok-super-magenta: var(--frok-stripe-magenta); --frok-super-violet: var(--frok-stripe-violet); --frok-super-blue-dark: var(--frok-stripe-blue-dark); --frok-super-blue: var(--frok-stripe-blue); --frok-super-blue-light: var(--frok-stripe-blue-light); --frok-super-turquoise: var(--frok-stripe-turquoise); /* Cool neutrals (blue undertone — never warm) */ --frok-white: #ffffff; --frok-gray-100: #f4f5f6; /* App canvas */ --frok-gray-200: #eff1f2; /* Frost — muted surface, card border */ --frok-gray-300: #e0e2e5; /* Silver Fog — borders, input fill */ --frok-gray-400: #d1d4d8; /* Input fill hover/active */ --frok-gray-425: #c1c7cc; /* (FROK) base-minor hovered fill */ --frok-gray-450: #b2b6ba; /* Input bottom rule */ --frok-gray-500: #a4abb3; /* Pewter — disabled, muted text */ --frok-gray-600: #71767c; --frok-gray-625: #595e62; /* (FROK) base-minor pressed, dark */ --frok-gray-650: #525a61; /* Secondary body text, input label */ --frok-gray-700: #43464a; /* (FROK) base-minor hovered, dark; also the contrast-background fill */ --frok-gray-800: #2e3033; /* Dark-mode surface */ --frok-gray-850: #2b2b2b; /* Sidebar surface */ --frok-gray-880: #353535; /* Sidebar item hover */ --frok-gray-900: #1a1a1a; /* Sidebar brand block */ --frok-gray-550: #8a9097; /* (FROK) base-major fill, dark */ --frok-gray-960: #1a1c1d; /* (FROK) major disabled fill, dark */ --frok-gray-950: #101112; /* (FROK) disabled fill, dark */ --frok-gray-440: #b2b9c0; /* (UI Kit) disabled front on transparent */ --frok-gray-525: #979ea4; /* (UI Kit) disabled front on a fill */ --frok-gray-675: #4e5256; /* (UI Kit) …dark counterpart of 525 */ --frok-gray-750: #383b3e; /* (UI Kit) …dark counterpart of 440 */ --frok-black: #000000; /* Signal — `signal-*-major` fill. (UI Kit) */ --frok-signal-error: #ed0007; --frok-signal-success: #00884a; --frok-signal-warning: #ffcf00; --frok-signal-info: #007bc0; /* …and the text that goes ON them. Warning is BLACK on yellow in BOTH themes — every other major is white-on-colour in light mode. Do not normalise it; white would fail contrast. reference/feedback.md */ --frok-on-signal-error: #ffffff; --frok-on-signal-success: #ffffff; --frok-on-signal-warning: #000000; --frok-on-signal-info: #ffffff; /* Banner tints = `signal-*-minor` fill (solid, not alpha). (UI Kit) These four were reverse-engineered from previews and were all 1–3 steps off; the values below are the shipped ones. */ --frok-tint-error: #ffd9d9; --frok-tint-success: #b8efc9; --frok-tint-warning: #ffdf95; --frok-tint-info: #d1e4ff; /* `signal-*-minor` front — black on every tint in light mode. */ --frok-on-tint: #000000; /* Emphasis — the badge/accent-graphic palette. `emphasis-*-major` fill. -00 is also the veil grey; -03/-04 drive the activity indicator. (UI Kit) reference/feedback.md */ --frok-emphasis-00: #71767c; --frok-emphasis-01: #007bc0; --frok-emphasis-02: #00884a; --frok-emphasis-03: #9e2896; --frok-emphasis-04: #18837e; --frok-on-emphasis: #ffffff; /* Disabled. FROK never uses `opacity` — every disabled state resolves a real token pair, and there are TWO: one for a filled control, one for a transparent one. (UI Kit) reference/buttons.md */ --frok-disabled-fill: var(--frok-gray-300); /* #e0e2e5 */ --frok-disabled-on-fill: var(--frok-gray-525); /* #979ea4 */ --frok-disabled-on-flat: var(--frok-gray-440); /* #b2b9c0 */ /* Neutral button — the DDS's recommended default in a dense app. Rests on a near-black fill and hands over to the ACCENT ramp on interaction, which is the one place a grey control stops being grey. (UI Kit) */ --frok-neutral-fill: var(--frok-gray-800); /* #2e3033 */ --frok-on-neutral-fill: var(--frok-white); --frok-neutral-fill-hovered: var(--frok-blue-hovered); /* #00629a */ --frok-neutral-fill-pressed: var(--frok-blue-major); /* #007bc0 */ /* The unfilled rail behind a slider or a progress bar. This is `base MINOR` (#e0e2e5), not the `base major` #71767c used for an unchecked control — getting these two confused makes the rail far too dark. (UI Kit) reference/controls.md, feedback.md */ --frok-track: var(--frok-gray-300); /* Destructive button — the `signal error` ramp. (UI Kit) */ --frok-error-hovered: #be0004; --frok-error-pressed: #920002; --frok-error-wash: var(--frok-tint-error); /* #ffd9d9 */ --frok-error-wash-pressed: #ffb2b2; /* Data visualization — use in this order */ --frok-chart-1: #007bc0; --frok-chart-2: #004975; --frok-chart-3: #9e2896; --frok-chart-4: #551151; --frok-chart-5: #18837e; /* Overlay + shadow pigment. --frok-veil is defined once, in the semantic section below, next to --frok-veil-blur that always travels with it. */ --frok-shadow-pigment: #00000026; /* 15% black */ /* ====== 2. SEMANTIC ROLES ================================================ */ /* Surfaces & text */ --frok-canvas: var(--frok-gray-100); --frok-surface: var(--frok-white); --frok-surface-muted: var(--frok-gray-200); --frok-on-surface: var(--frok-black); --frok-on-surface-muted: var(--frok-gray-650); --frok-on-surface-disabled: var(--frok-gray-500); --frok-border: var(--frok-gray-300); --frok-border-subtle: var(--frok-gray-200); /* Accent (primary action, focus, active state) */ --frok-accent: var(--frok-blue-major); --frok-accent-hovered: var(--frok-blue-hovered); --frok-accent-pressed: var(--frok-blue-pressed); --frok-on-accent: var(--frok-white); /* DEPRECATED — use --frok-accent-minor. This name was coined by an early version of this skill for what it thought was an "outline hover wash"; the UI Kit scheme files later showed the real token is `accent-minor`, with a far bigger role. Kept resolving for apps already on it, but it has no `on-` partner, which is exactly the trap: a framework bridge that maps a surface to --frok-accent-wash has nothing correct to map its text colour to. Pair --frok-accent-minor with --frok-on-accent-minor instead. */ --frok-accent-wash: var(--frok-blue-ice); /* Accent minor — FROK's low-emphasis accent surface, from the scheme files bundled with the DDS UI Kit exports (--accent-minor__*). This skill only had --frok-blue-ice, described as an "outline hover wash"; the raw colour was right but the role is much bigger. It is the FOCUS FILL of every receptacle (text field, date field, dropdown), the highlight on a focused date segment, and any low-emphasis accent surface. reference/date-picker.md. */ --frok-accent-minor: var(--frok-blue-ice); /* #d1e4ff */ --frok-accent-minor-hovered: var(--frok-blue-pale); /* #9dc9ff */ --frok-accent-minor-pressed: var(--frok-blue-bright); /* #56b0ff */ --frok-accent-minor-disabled: var(--frok-gray-200); /* #eff1f2 */ --frok-on-accent-minor: var(--frok-black); /* Secondary action */ --frok-secondary: var(--frok-gray-300); --frok-on-secondary: var(--frok-black); /* Inputs (filled, label-inside, bottom-rule) */ --frok-input-fill: var(--frok-gray-300); --frok-input-fill-active: var(--frok-gray-400); --frok-input-rule: var(--frok-gray-450); --frok-input-rule-focus: var(--frok-accent); --frok-input-label: var(--frok-gray-650); /* Dropdown — the "base minor" scheme. These are FROK's own shipped values, taken from frontend-kit-atoms.css + the light/dark scheme files bundled with the DDS Bosch UI Kit → Dropdown export, not reverse-engineered from a screenshot. Full spec: reference/dropdown.md. A dropdown carries NO bottom rule — that is what distinguishes it from a text field — and disabled greys the FOREGROUND only, leaving the fill alone. Note base-minor resolves against the background it sits on: these are the primary-background values. On a secondary background the fill is #d0d4d8, on a contrast background #43464a with white text. */ --frok-dropdown-fill: var(--frok-gray-300); /* #e0e2e5 */ --frok-dropdown-fill-hovered: var(--frok-gray-425); /* #c1c7cc */ --frok-dropdown-fill-pressed: var(--frok-gray-500); /* #a4abb3 */ --frok-dropdown-on-surface: var(--frok-black); --frok-dropdown-on-disabled: var(--frok-gray-500); /* #a4abb3 */ /* Dropdown flyout. Single-select marks the current option by inverting it to the dark surface; multiselect uses a leading checkmark and NO inversion. */ --frok-dropdown-flyout-surface: var(--frok-white); --frok-dropdown-item-surface-active: var(--frok-gray-800); /* #2e3033 */ --frok-dropdown-item-on-active: var(--frok-white); /* Date / time field — .a-date-input, .a-time-input, .a-datetime-input, .a-month-input. Also "base minor", so the fills are the dropdown's; what differs is that a date field DOES carry a 1px bottom rule in the FOREGROUND colour (a dropdown carries none — that rule is the only visual difference between them), and it has NO hover state at all. Focus swaps the fill to the accent wash. Disabled and readonly both HIDE the trigger button. Full spec: reference/date-picker.md. */ --frok-date-fill: var(--frok-dropdown-fill); /* #e0e2e5 */ --frok-date-fill-hovered: var(--frok-dropdown-fill-hovered); /* #c1c7cc */ --frok-date-fill-pressed: var(--frok-dropdown-fill-pressed); /* #a4abb3 */ --frok-date-fill-focus: var(--frok-accent-minor); /* #d1e4ff */ --frok-date-fill-disabled: var(--frok-gray-200); /* #eff1f2 */ --frok-date-on-surface: var(--frok-black); --frok-date-on-disabled: var(--frok-gray-500); /* #a4abb3 */ --frok-date-rule: var(--frok-black); /* the FOREGROUND colour */ /* The DDS figures draw the focused rule in accent blue; the shipped CSS sets it to accent-minor's FRONT colour, i.e. black. The two disagree. We keep the blue — it matches the drawing and it is the stronger focus signal. */ --frok-date-rule-focus: var(--frok-accent); /* #007bc0 */ --frok-date-segment-highlight: var(--frok-accent-minor); /* #d1e4ff */ /* Date-picker panel. NOT shipped by FROK — there is no calendar component in the Frontend Kit at all, so these are the DDS's annotated and measured values for a panel you build yourself. reference/date-picker.md. */ --frok-datepicker-surface: var(--frok-white); --frok-datepicker-marker-fill: var(--frok-accent); /* selected day/range */ --frok-datepicker-marker-on: var(--frok-on-accent); --frok-datepicker-day-muted: var(--frok-gray-500); /* adjacent / disabled */ /* Selection controls — checkbox, radio, toggle, option bar, chip. Off/inactive is `base major`; on/checked is `accent major`. The option bar and the chip use `base minor` instead for their inactive surface. reference/controls.md */ --frok-control-off: var(--frok-gray-600); /* #71767c base major */ --frok-control-off-hovered: var(--frok-gray-625); /* #595e62 */ --frok-control-off-pressed: var(--frok-gray-700); /* #43464a */ --frok-control-off-disabled: var(--frok-secondary); /* #e0e2e5 */ --frok-on-control-off: var(--frok-white); --frok-control-on: var(--frok-accent); /* #007bc0 accent major */ --frok-control-on-hovered: var(--frok-accent-hovered); --frok-control-on-pressed: var(--frok-accent-pressed); --frok-control-on-disabled: var(--frok-secondary); /* #e0e2e5 */ --frok-on-control-on: var(--frok-on-accent); /* the tick / the dot */ /* Chip — a PILL, 2rem tall. Not square. reference/components.md */ --frok-chip-fill: var(--frok-dropdown-fill); /* #e0e2e5 */ --frok-chip-fill-hovered: var(--frok-dropdown-fill-hovered); /* #c1c7cc */ --frok-chip-fill-pressed: var(--frok-dropdown-fill-pressed); /* #a4abb3 */ --frok-chip-fill-selected: var(--frok-control-on); /* #007bc0 */ /* Floating things. The outline replaces a border on dialogs, tooltips and the popover caret; the dimmer is the dialog scrim. reference/overlays.md */ --frok-floating-outline: #0000000d; /* 5% black */ --frok-veil: #71767c80; /* the dialog ::backdrop */ --frok-veil-blur: 0.25rem; /* FROK DOES blur its scrim — the one place it breaks the skill's own no-blur rule. Shipped. */ /* Rating — `emphasis 01 major`. Bosch BLUE, never gold. The DDS: "Rating must not be used in other colors." reference/controls.md */ --frok-rating: var(--frok-accent); /* #007bc0 */ --frok-rating-hovered: var(--frok-accent-hovered); /* #00629a */ --frok-rating-pressed: var(--frok-accent-pressed); /* #004975 */ /* Table. Two rule colours: the thead underline is full contrast and doubles as the freeze indicator; body rules are lighter. reference/table.md */ --frok-table-rule-header: var(--frok-black); --frok-table-rule-body: var(--frok-gray-600); /* #71767c */ /* Navigation (dark rail) */ --frok-nav-surface: var(--frok-gray-850); --frok-nav-surface-brand: var(--frok-gray-900); --frok-nav-surface-hovered: var(--frok-gray-880); --frok-nav-on-surface: var(--frok-white); --frok-nav-active-surface: var(--frok-white); --frok-nav-active-on-surface: var(--frok-black); --frok-nav-divider: rgba(255, 255, 255, 0.04); /* Signals, foreground pairs */ --frok-on-error: var(--frok-white); --frok-on-success: var(--frok-white); --frok-on-warning: var(--frok-black); /* the one dark-on-color */ --frok-on-info: var(--frok-white); /* ====== 3. GEOMETRY, ELEVATION, MOTION =================================== */ --frok-radius: 0; /* everything. no exceptions but pills */ --frok-radius-pill: 999px; /* FAB, status chip, avatar — and the date picker's selected-day marker, which is a circle for a single date and a stadium for a range. That is a real sanctioned exception in an otherwise square language; reference/date-picker.md */ /* DEPRECATED. Offset drop shadows, kept only so apps already on this token layer keep resolving. Nothing in the skill uses them any more — the dialog was the last holdout and now uses --frok-shadow-float-s / -l. Do not reach for these in new work; see the offsetless scale immediately below. */ --frok-shadow-sm: 0 1px 2px var(--frok-shadow-pigment); --frok-shadow-md: 0 2px 6px var(--frok-shadow-pigment); --frok-shadow-lg: 0 8px 24px var(--frok-shadow-pigment); /* (FROK) The real elevation scale, from the Frontend Kit CSS bundled with the DDS Dropdown export: --sem__box-shadow__small|medium|large. It is OFFSETLESS — a centred ambient glow, no downward drop. The three tokens above are not FROK-derived and do not match; prefer these on anything that floats. See the note in reference/components.md. */ --frok-shadow-float-s: 0 0 16px var(--frok-shadow-pigment); /* flyouts */ --frok-shadow-float-m: 0 0 32px var(--frok-shadow-pigment); --frok-shadow-float-l: 0 0 64px var(--frok-shadow-pigment); /* Dropdown geometry (DDS + FROK). One 3rem cell, like the side nav — and the flyout's options use the same cell, so a dropdown and its list share one rhythm. The 44px right padding keeps the value clear of the chevron. */ --frok-dropdown-height: 48px; /* 3rem — labelled AND unlabelled */ --frok-dropdown-pad-inline: 16px; /* 1rem */ --frok-dropdown-pad-icon: 44px; /* 2.75rem — right side, clears icon */ --frok-dropdown-icon-size: 24px; /* 1.5rem */ --frok-dropdown-icon-inset: 11.2px; /* 0.7rem (CSS) — DDS annotates 12px */ --frok-dropdown-item-height: 48px; /* 3rem — flyout option */ /* Date / time field geometry (FROK, shipped). Same 3rem cell and same off-grid 18/5px label padding as the dropdown. The min-widths are per input type and are real declarations, not suggestions — a date field narrower than 8.5rem truncates its own value. reference/date-picker.md */ --frok-date-height: 48px; /* 3rem — labelled AND unlabelled */ --frok-date-pad-inline: 16px; /* 1rem, both sides */ --frok-date-button-size: 48px; /* 3rem square trigger */ --frok-date-rule-width: 1px; /* 0.0625rem — a dropdown has none */ --frok-date-icon-size: 24px; /* 1.5rem */ --frok-date-min-width: 136px; /* 8.5rem — type=date */ --frok-time-min-width: 128px; /* 8rem — type=time */ --frok-datetime-min-width: 184px; /* 11.5rem — type=datetime-local */ --frok-month-min-width: 224px; /* 14rem — type=month */ /* Date-picker panel geometry (DDS annotations + pixel measurement of the DDS figures). Nothing here is shipped — see reference/date-picker.md. */ --frok-datepicker-width: 320px; /* 20rem — annotated */ --frok-datepicker-pad-block: 12px; /* 0.75rem top, 1rem bottom */ --frok-datepicker-pad-inline: 16px; /* 1rem — leaves an 18rem content box */ --frok-datepicker-caret-w: 32px; /* 2rem base (measured) */ --frok-datepicker-caret-h: 16px; /* 1rem tall (measured) */ --frok-datepicker-day-row: 36px; /* 2.25rem row pitch (measured) */ --frok-datepicker-day-marker: 32px; /* 2rem circle/stadium (measured) */ --frok-datepicker-time-col: 56px; /* 3.5rem — annotated */ --frok-datepicker-time-h: 144px; /* 9rem = 3 x 3rem — annotated */ --frok-duration-state: 150ms; /* hover / press / color change */ --frok-duration-dialog: 200ms; /* dialog + popover enter/exit */ --frok-duration-drawer: 300ms; /* off-canvas nav, page transition */ --frok-ease-enter: ease-out; --frok-ease-exit: ease-in; /* ====== 4. SPACING (8px base) ============================================ */ --frok-space-1: 4px; --frok-space-2: 8px; --frok-space-3: 12px; --frok-space-4: 16px; --frok-space-6: 24px; --frok-space-8: 32px; --frok-space-12: 48px; --frok-space-16: 64px; /* ====== 5. LAYOUT ======================================================== */ /* Values marked (DDS) come from the Bosch Digital Design System, Software section — Design principles / Side Navigation / Header. See reference/layout.md. */ /* Side navigation. Two states, and they are two different measurements — do not conflate the rail's width with the content's left margin: closed rail 48px, content margin 80px (48 rail + 32 page margin) open rail 304px, content margin 288px (as the DDS states it) The closed rail is 48px, NOT 80px: "the Side Navigation is only visible as a narrow sidebar of 48 px width", and the item geometry agrees (24px icon + 2 × 12px margin = 48). Earlier versions of this file had 80px here, which is the offset. See reference/layout.md for the open-state arithmetic. */ --frok-sidebar-width: 304px; /* (DDS) side nav, open — 19rem */ --frok-sidebar-width-open: 304px; /* (DDS) 19rem */ --frok-sidebar-width-closed: 48px; /* (DDS) 3rem — icon rail only */ --frok-sidebar-offset-open: 288px; /* (DDS) content left margin when open */ --frok-sidebar-offset-closed: 80px; /* (DDS) content left margin when closed */ /* Side-nav item geometry (DDS). One 48px cell per item at every level; the icon is 24px with a 12px margin, which is what makes the closed rail 48px wide. Second-level items indent by a whole cell. */ --frok-nav-item-height: 48px; /* (DDS) 3rem — every item, both states */ --frok-nav-icon-size: 24px; /* (DDS) 1.5rem */ --frok-nav-icon-margin: 12px; /* (DDS) 0.75rem */ --frok-nav-indent-level-2: 48px; /* (DDS) 3rem — second-level label inset */ --frok-topbar-height: 48px; /* (DDS) header — 3rem */ --frok-content-max: 896px; /* skill convention — the DDS sets no fixed max, it fills the 12-col grid */ /* Supergraphic stripe. 0.375rem (6px) is the Digital Design System's size for web apps; the Brand Guide's print rule (1/4 of the "H" in the logotype) explicitly defers to the DDS for digital. Do not thicken it to make it visible — it is an accent, not a banner. */ --frok-supergraphic-height: 0.375rem; --frok-supergraphic-src: url("bosch-supergraphic.svg"); --frok-stripe-height: var(--frok-supergraphic-height); /* deprecated alias */ /* Responsive layout grid (DDS). 12 columns on desktop and tablet, 4 on mobile. Margins and gutters are flexible: 1, 1.5 or 2rem, never below 1rem. */ --frok-grid-columns: 12; --frok-grid-columns-mobile: 4; --frok-gutter-min: 16px; /* 1rem — the floor */ --frok-gutter: 16px; /* mobile/tablet */ --frok-gutter-desktop: 32px; /* 2rem */ /* Break points (DDS). The value is where the band *starts*. */ --frok-bp-mobile: 320px; /* reference width; band is < 768px */ --frok-bp-tablet: 768px; /* 48rem */ --frok-bp-desktop: 1194px; /* 74.625rem — "small desktop" */ --frok-bp-desktop-large: 1920px; /* 120rem */ /* Layout spacing (DDS). Distinct from the component-internal --frok-space-* scale above: these are the gaps the page layout is built from. */ --frok-layout-gap-within-v: 48px; /* 3rem — vertical, inside a component */ --frok-layout-gap-within-h: 80px; /* 5rem — horizontal, inside */ --frok-layout-gap-within-h-sm: 32px; /* 2rem — horizontal, tighter */ --frok-layout-gap-between: 32px; /* 2rem — vertical, between components */ /* Stacking order. Not a DDS table — the DDS never publishes one, and that is precisely the problem: every app invents its own numbers and they collide the first time something is portalled. Use these instead of literals. Two of the bands are counter-intuitive on purpose: - ANCHORED sits ABOVE MODAL. A tooltip or a popover raised from inside a dialog has to clear that dialog. Headless libraries (Radix, Floating UI, Headless UI) portal those layers to , so they become siblings of the dialog rather than descendants — DOM order stops being a reliable tie-breaker and the value has to win outright. Do not "correct" this. - NOTIFY clears everything, including a modal. A banner reporting that the save failed is useless underneath the dialog you were saving from. Leave STICKY low. A sticky app bar that outranks the veil paints straight over a modal — the classic version of this bug is a four-digit z-index on the header. reference/layout.md */ --frok-z-sticky: 10; /* sticky app bar, sticky table header */ --frok-z-nav: 20; /* side rail, above content */ --frok-z-stripe: 70; /* supergraphic, above the app chrome */ --frok-z-veil: 80; /* modal backdrop / scrim */ --frok-z-modal: 90; /* dialog panel, mobile nav panel, drawer */ --frok-z-anchored: 100; /* dropdown, popover, tooltip — clears a dialog */ --frok-z-notify: 110; /* banner, toast — clears everything */ /* ====== 6. TYPOGRAPHY ==================================================== */ --frok-font: 'BoschSans', 'Helvetica Neue', Helvetica, Arial, sans-serif; /* shorthand: weight size/line-height family */ --frok-type-s: 400 12px/16px var(--frok-font); /* caption, meta */ --frok-type-sm: 400 14px/20px var(--frok-font); /* labels, table cells */ --frok-type-m: 400 16px/24px var(--frok-font); /* body (base) */ --frok-type-l: 400 18px/28px var(--frok-font); /* lead */ --frok-type-xl: 400 20px/28px var(--frok-font); /* section intro */ --frok-type-2xl: 700 24px/32px var(--frok-font); /* card header */ --frok-type-3xl: 700 30px/36px var(--frok-font); /* page title */ --frok-type-4xl: 700 36px/40px var(--frok-font); /* section hero */ --frok-type-5xl: 700 48px/52px var(--frok-font); /* display */ --frok-type-6xl: 700 60px/64px var(--frok-font); /* large display */ --frok-tracking-title: -0.01em; --frok-tracking-meta: 0.06em; /* UPPERCASE meta labels only */ } /* ============================================================================ DARK MODE — near-black canvas, black surfaces, luminous blue. ============================================================================ */ .-dark-mode, [data-theme='dark'] { /* The canvas is gray-900, not pure black. The Brand Guide sanctions either, so this is a choice rather than a correction — but it is the better default, and the reason is structural: with a black canvas AND black surfaces the two are the same colour, so every card, panel and table loses its edge and survives only on its 1px border. Lifting the canvas one step puts the surfaces back in relief. Note the relationship inverts against light mode — a surface is LIGHTER than the canvas in light mode and DARKER in dark mode. That is intended; the card recedes instead of floating. Set it back with `--frok-canvas: var(--frok-black)` in an app stylesheet if a specific design calls for the flat black page. */ --frok-canvas: var(--frok-gray-900); --frok-surface: var(--frok-black); --frok-surface-muted: var(--frok-gray-800); --frok-on-surface: var(--frok-white); --frok-on-surface-muted: var(--frok-gray-500); --frok-border: var(--frok-gray-800); --frok-border-subtle: var(--frok-gray-800); --frok-accent: var(--frok-blue-luminous); --frok-accent-hovered: var(--frok-blue-major); --frok-accent-pressed: var(--frok-blue-hovered); --frok-accent-wash: var(--frok-gray-800); /* DEPRECATED — see light */ --frok-secondary: var(--frok-gray-800); --frok-on-secondary: var(--frok-white); --frok-input-fill: var(--frok-gray-800); --frok-input-fill-active: var(--frok-gray-880); --frok-input-rule: var(--frok-gray-600); --frok-input-label: var(--frok-gray-500); /* Signal, dark. The tints were NOT overridden before this — a dark-mode banner was painting a light-mode pastel. reference/feedback.md */ --frok-signal-error: #ff2124; --frok-signal-success: #37a264; --frok-signal-warning: #eec100; --frok-signal-info: #0096e8; --frok-on-signal-error: #000000; --frok-on-signal-success: #000000; --frok-on-signal-warning: #000000; /* black in both themes */ --frok-on-signal-info: #000000; --frok-tint-error: #680001; --frok-tint-success: #00381b; --frok-tint-warning: #564400; --frok-tint-info: #003253; --frok-on-tint: #ffffff; /* inverts with the tint */ --frok-emphasis-00: #8a9097; --frok-emphasis-01: #0096e8; --frok-emphasis-02: #37a264; --frok-emphasis-03: #e552da; --frok-emphasis-04: #419e98; --frok-on-emphasis: #000000; --frok-disabled-fill: var(--frok-gray-960); /* #1a1c1d */ --frok-disabled-on-fill: var(--frok-gray-675); /* #4e5256 */ --frok-disabled-on-flat: var(--frok-gray-750); /* #383b3e */ /* Neutral inverts in dark: a LIGHT fill with black text. */ --frok-neutral-fill: var(--frok-gray-300); /* #e0e2e5 */ --frok-on-neutral-fill: var(--frok-black); --frok-neutral-fill-hovered: var(--frok-blue-bright); /* #56b0ff */ --frok-neutral-fill-pressed: var(--frok-blue-luminous); /* #0096e8 */ --frok-track: var(--frok-gray-800); /* #2e3033 */ --frok-error-hovered: #ff6e6f; --frok-error-pressed: #ff9d9d; --frok-error-wash: var(--frok-tint-error); /* #680001 */ --frok-error-wash-pressed: #410000; /* Selection controls, dark. base-major and accent-major both INVERT their foreground to black, because both fills get lighter in dark mode. reference/controls.md */ --frok-control-off: var(--frok-gray-550); /* #8a9097 */ --frok-control-off-hovered: var(--frok-gray-500); /* #a4abb3 */ --frok-control-off-pressed: var(--frok-gray-425); /* #c1c7cc */ --frok-control-off-disabled: var(--frok-gray-960); /* #1a1c1d */ --frok-on-control-off: var(--frok-black); --frok-control-on: var(--frok-accent); /* #0096e8 */ --frok-control-on-hovered: var(--frok-accent-hovered); /* #56b0ff */ --frok-control-on-pressed: var(--frok-accent-pressed); /* #9dc9ff */ --frok-control-on-disabled: var(--frok-gray-960); /* #1a1c1d */ --frok-on-control-on: var(--frok-black); /* Chip, dark */ --frok-chip-fill: var(--frok-gray-800); /* #2e3033 */ --frok-chip-fill-hovered: var(--frok-gray-700); /* #43464a */ --frok-chip-fill-pressed: var(--frok-gray-625); /* #595e62 */ --frok-chip-fill-selected: var(--frok-control-on); /* Floating things, dark. The outline flips from 5% black to 25% white so a panel still separates from a black canvas; the veil does not change. */ --frok-floating-outline: #ffffff40; --frok-veil: #71767c80; --frok-rating: var(--frok-accent); --frok-rating-hovered: var(--frok-accent-hovered); --frok-rating-pressed: var(--frok-accent-pressed); --frok-table-rule-header: var(--frok-white); --frok-table-rule-body: var(--frok-gray-550); /* #8a9097 */ /* Dropdown, dark. FROK's shipped dark base-minor ramp. */ --frok-dropdown-fill: var(--frok-gray-800); /* #2e3033 */ --frok-dropdown-fill-hovered: var(--frok-gray-700); /* #43464a */ --frok-dropdown-fill-pressed: var(--frok-gray-625); /* #595e62 */ --frok-dropdown-on-surface: var(--frok-white); --frok-dropdown-on-disabled: var(--frok-gray-700); /* #43464a */ --frok-dropdown-flyout-surface: var(--frok-black); /* INFERRED, not sourced. The DDS only ever draws the flyout in light mode, and FROK ships no selected-option styling at all (its dropdown is a native select, so the OS draws the list). Light-mode selected = #2e3033 is measured off the figure; the dark equivalent is an inversion by analogy with the side nav's active item. Verify before relying on it. */ --frok-dropdown-item-surface-active: var(--frok-white); --frok-dropdown-item-on-active: var(--frok-black); /* Accent minor, dark. FROK's shipped dark ramp — note it runs the opposite way from light mode: dark navy up to mid blue, rather than pale blue down. */ --frok-accent-minor: var(--frok-blue-abyss); /* #003253 */ --frok-accent-minor-hovered: var(--frok-blue-pressed); /* #004975 */ --frok-accent-minor-pressed: var(--frok-blue-hovered); /* #00629a */ --frok-accent-minor-disabled: var(--frok-gray-950); /* #101112 */ --frok-on-accent-minor: var(--frok-white); /* Date / time field, dark. Fills follow the dropdown's dark base-minor ramp; the rule follows the foreground, which in dark mode means WHITE. */ --frok-date-fill: var(--frok-gray-800); /* #2e3033 */ --frok-date-fill-hovered: var(--frok-gray-700); /* #43464a */ --frok-date-fill-pressed: var(--frok-gray-625); /* #595e62 */ --frok-date-fill-focus: var(--frok-accent-minor); /* #003253 */ --frok-date-fill-disabled: var(--frok-gray-950); /* #101112 */ --frok-date-on-surface: var(--frok-white); --frok-date-on-disabled: var(--frok-gray-700); /* #43464a */ --frok-date-rule: var(--frok-white); --frok-date-rule-focus: var(--frok-accent); /* #0096e8 */ --frok-date-segment-highlight: var(--frok-accent-minor); /* Date-picker panel, dark. INFERRED, not sourced — both DDS date-picker pages draw every figure in light mode only, and FROK ships no calendar to fall back on. The marker pair is safe (it is FROK's own dark accent-major pair); the panel surface follows the same white->black inversion as the dropdown flyout, which is itself an inference. Verify before relying on it. */ --frok-datepicker-surface: var(--frok-black); --frok-datepicker-marker-fill: var(--frok-accent); /* #0096e8 */ --frok-datepicker-marker-on: var(--frok-black); --frok-datepicker-day-muted: var(--frok-gray-700); /* #43464a */ /* (FROK) In dark mode the shadow pigment inverts to 30% WHITE — a floating panel glows rather than casting, which is the only way it separates from a black canvas. --shadow-fill: #ffffff4d. */ --frok-shadow-pigment: #ffffff4d; } /* ============================================================================ MINIMAL BASE — the two things every FROK app needs. Everything else is yours to build in your framework of choice. ============================================================================ */ @layer frok-base { html { font-size: 16px; } /* Tell the browser which theme its OWN chrome should be drawn in. Without this, everything the UA paints itself ignores the token layer entirely: the native date/time picker panel, a