/* rhm/ui. Built by scripts/build-css.ts. Do not edit; change css/ and spec/tokens/ instead. */ /* rhm/ui tokens. Generated by scripts/build-tokens.ts from spec/tokens/. Do not edit. */ @layer rhm.reset, rhm.tokens, rhm.base, rhm.layout, rhm.components, rhm.utilities; @layer rhm.tokens { :where(:root) { color-scheme: light dark; } [data-rhm-scheme="light"] { color-scheme: light; } [data-rhm-scheme="dark"] { color-scheme: dark; } [data-rhm-scheme="system"] { color-scheme: light dark; } :where(:root, [data-rhm-skin], [data-rhm-theme]) { --rhm-color-accent-hover: oklch(from var(--rhm-color-accent) calc(l + .03) c h); --rhm-color-accent-pressed: oklch(from var(--rhm-color-accent) calc(l - .04) c h); --rhm-color-control-hover: oklch(from var(--rhm-color-control) calc(l + .03) c h); --rhm-color-control-pressed: oklch(from var(--rhm-color-control) calc(l - .035) c h); --rhm-color-selection: var(--rhm-color-accent-subtle); --rhm-color-text-on-accent: contrast-color(var(--rhm-color-accent)); --rhm-color-text-on-danger: contrast-color(var(--rhm-color-danger-solid)); --rhm-color-text-on-indicator: contrast-color(var(--rhm-color-indicator)); --rhm-color-text-on-selected: contrast-color(var(--rhm-color-selected)); --rhm-color-surface-code: var(--rhm-color-surface-display); --rhm-color-text-on-code: var(--rhm-color-text-on-display); --rhm-color-text-on-code-muted: var(--rhm-color-text-on-display-muted); --rhm-color-link: var(--rhm-color-text-accent); --rhm-color-link-visited: var(--rhm-color-link); --rhm-color-lamp-ok: var(--rhm-color-success-solid); --rhm-color-lamp-warn: var(--rhm-color-warning-solid); --rhm-color-lamp-info: var(--rhm-color-info-solid); } :where(:root) { --rhm-space-1: 4px; --rhm-space-2: 8px; --rhm-space-3: 12px; --rhm-space-4: 16px; --rhm-space-5: 24px; --rhm-space-6: 32px; --rhm-space-7: 48px; --rhm-space-8: 72px; --rhm-font-size-xs: .75rem; --rhm-font-size-sm: .8125rem; --rhm-font-size-md: .9375rem; --rhm-font-size-lg: 1.0625rem; --rhm-font-size-xl: 1.25rem; --rhm-font-size-2xl: 1.5625rem; --rhm-font-size-3xl: 1.953rem; --rhm-font-size-4xl: 2.441rem; --rhm-font-line-height-tight: 1.2; --rhm-font-line-height-snug: 1.3; --rhm-font-line-height-body: 1.45; --rhm-font-line-height-code: 1.65; --rhm-duration-fast: 110ms; --rhm-duration-base: 180ms; --rhm-easing-standard: cubic-bezier(.2, 0, 0, 1); --rhm-easing-exit: cubic-bezier(.4, 0, 1, 1); --rhm-radius-pill: 999px; --rhm-target-min: 24px; } :where(:root), [data-rhm-density="compact"] { --rhm-space-inline: 10px; --rhm-space-panel: 14px; --rhm-space-tile: 10px; --rhm-space-gap-tight: 6px; --rhm-space-gap: 8px; --rhm-space-gap-loose: 16px; --rhm-size-control-sm: 24px; --rhm-size-control-md: 28px; --rhm-size-control-lg: 34px; --rhm-size-row: 28px; --rhm-size-knob: 46px; --rhm-size-fader: 112px; } [data-rhm-density="regular"] { --rhm-space-inline: 14px; --rhm-space-panel: 20px; --rhm-space-tile: 16px; --rhm-space-gap-tight: 8px; --rhm-space-gap: 12px; --rhm-space-gap-loose: 24px; --rhm-size-control-sm: 28px; --rhm-size-control-md: 34px; --rhm-size-control-lg: 42px; --rhm-size-row: 36px; --rhm-size-knob: 58px; --rhm-size-fader: 136px; } /* skin: home-computer */ :where(:root), [data-rhm-skin="home-computer"] { --rhm-font-family-ui: "Recursive", system-ui, sans-serif; --rhm-font-family-display: "Recursive", system-ui, sans-serif; --rhm-font-family-mono: "Recursive", ui-monospace, monospace; --rhm-font-family-legend: var(--rhm-font-family-ui); --rhm-font-family-readout: var(--rhm-font-family-mono); --rhm-font-weight-body: 400; --rhm-font-weight-control: 600; --rhm-font-weight-display: 800; --rhm-font-weight-heading: 700; --rhm-font-weight-legend: 700; --rhm-font-tracking-display: -.01em; --rhm-font-tracking-legend: .01em; --rhm-font-display-scale: 1.04; --rhm-radius-control: 9px; --rhm-radius-field: 8px; --rhm-radius-tile: 12px; --rhm-radius-panel: 18px; --rhm-radius-overlay: 12px; --rhm-color-text-on-accent: oklch(22% .02 55); --rhm-color-text-on-danger: oklch(100% 0 0); --rhm-color-text-on-display: oklch(83% .14 75); --rhm-color-text-on-display-muted: oklch(66% .09 72); --rhm-color-text: light-dark(oklch(25% .015 55), oklch(94% .01 85)); --rhm-color-text-muted: light-dark(oklch(48% .02 62), oklch(75% .015 80)); --rhm-color-text-disabled: light-dark(oklch(64% .012 70), oklch(50% .01 60)); --rhm-color-text-accent: light-dark(oklch(50% .14 48), oklch(80% .13 62)); --rhm-color-text-on-indicator: light-dark(oklch(95% .01 85), oklch(22% .02 55)); --rhm-color-text-on-selected: light-dark(oklch(95% .01 85), oklch(22% .02 55)); --rhm-color-text-on-code: light-dark(oklch(25% .015 55), oklch(83% .14 75)); --rhm-color-text-on-code-muted: light-dark(oklch(48% .02 62), oklch(66% .09 72)); --rhm-color-link: var(--rhm-color-text-accent); --rhm-color-link-visited: var(--rhm-color-link); --rhm-color-display-accent: oklch(80% .16 58); --rhm-color-accent: oklch(74% .165 55); --rhm-color-accent-subtle: light-dark(oklch(92% .045 70), oklch(34% .05 50)); --rhm-color-info-solid: oklch(68% .13 245); --rhm-color-info-fg: light-dark(oklch(47% .12 255), oklch(80% .09 250)); --rhm-color-info-bg: light-dark(oklch(93.5% .025 250), oklch(29% .04 250)); --rhm-color-success-solid: oklch(72% .19 145); --rhm-color-success-fg: light-dark(oklch(47% .13 148), oklch(80% .15 148)); --rhm-color-success-bg: light-dark(oklch(93% .04 150), oklch(29% .05 150)); --rhm-color-warning-solid: oklch(80% .16 80); --rhm-color-warning-fg: light-dark(oklch(50% .11 75), oklch(84% .13 80)); --rhm-color-warning-bg: light-dark(oklch(94% .05 88), oklch(30% .05 80)); --rhm-color-danger-solid: oklch(50% .18 28); --rhm-color-danger-fg: light-dark(oklch(50% .18 28), oklch(76% .14 28)); --rhm-color-danger-bg: light-dark(oklch(94% .03 30), oklch(30% .06 28)); --rhm-color-lamp-ok: var(--rhm-color-success-solid); --rhm-color-lamp-warn: var(--rhm-color-warning-solid); --rhm-color-lamp-bad: oklch(62% .22 28); --rhm-color-lamp-info: var(--rhm-color-info-solid); --rhm-color-lamp-off: oklch(30% .02 140); --rhm-color-surface-1: light-dark(oklch(97.8% .006 88), oklch(24% .009 60)); --rhm-color-surface-2: light-dark(oklch(95% .008 85), oklch(28% .01 60)); --rhm-color-surface-3: light-dark(oklch(92.2% .01 82), oklch(32% .011 60)); --rhm-color-surface-canvas: light-dark(oklch(92.5% .011 80), oklch(19.5% .008 60)); --rhm-color-surface-sunken: light-dark(oklch(89.5% .013 78), oklch(16.5% .008 60)); --rhm-color-surface-overlay: light-dark(oklch(98.5% .005 88), oklch(28% .01 60)); --rhm-color-surface-display: light-dark(oklch(23% .018 70), oklch(13% .01 70)); --rhm-color-surface-code: light-dark(oklch(96.5% .008 85), oklch(13% .01 70)); --rhm-color-indicator: light-dark(oklch(34% .012 60), oklch(74% .165 55)); --rhm-color-selected: light-dark(oklch(34% .012 60), oklch(92% .01 85)); --rhm-color-focus: light-dark(oklch(50% .17 262), oklch(80% .12 255)); --rhm-color-edge: light-dark(oklch(56% .02 70), oklch(62% .015 70)); --rhm-color-control: light-dark(oklch(99% .004 90), oklch(33% .01 60)); --rhm-color-track: light-dark(oklch(82% .014 75), oklch(14% .008 60)); --rhm-color-syntax-keyword: light-dark(oklch(50% .16 40), oklch(76% .15 50)); --rhm-color-syntax-function: light-dark(oklch(45% .12 262), oklch(86% .09 90)); --rhm-color-syntax-type: light-dark(oklch(46% .07 200), oklch(80% .08 190)); --rhm-color-syntax-string: light-dark(oklch(47% .11 148), oklch(82% .12 140)); --rhm-color-syntax-number: light-dark(oklch(50% .11 65), oklch(84% .13 75)); --rhm-color-syntax-comment: light-dark(oklch(48% .02 62), oklch(70% .03 75)); --rhm-color-syntax-property: light-dark(oklch(32% .02 55), oklch(90% .03 80)); --rhm-color-syntax-punctuation: light-dark(oklch(45% .015 60), oklch(76% .02 75)); --rhm-color-syntax-diff-add: light-dark(oklch(93% .045 150), oklch(25% .05 150)); --rhm-color-syntax-diff-delete: light-dark(oklch(93% .035 28), oklch(25% .06 28)); --rhm-color-syntax-line-current: light-dark(oklch(93% .05 88), oklch(22% .015 70)); --rhm-color-syntax-ansi-red: light-dark(oklch(50% .18 28), oklch(76% .15 28)); --rhm-switch-track-on: var(--rhm-color-surface-sunken); --rhm-switch-thumb: var(--rhm-color-control); --rhm-switch-thumb-on: var(--rhm-color-control); --rhm-switch-thumb-shadow: 0px 0px 0px 1px var(--rhm-color-edge), 0px 1px 2px 0px oklch(0% 0 0 / .3); --rhm-switch-thumb-shadow-on: 0px 0px 0px 1px var(--rhm-color-edge), 0px 1px 2px 0px oklch(0% 0 0 / .3); --rhm-switch-radius: 6px; --rhm-switch-thumb-radius: 4px; --rhm-lamp-bezel: oklch(22% .01 60); --rhm-meter-low: var(--rhm-color-lamp-ok); --rhm-meter-mid: var(--rhm-color-lamp-warn); --rhm-meter-high: var(--rhm-color-lamp-bad); --rhm-piano-legend: oklch(32% .015 55); --rhm-piano-key-shadow: inset 0px -3px 0px 0px oklch(0% 0 0 / .12), 0px 1px 1px 0px oklch(0% 0 0 / .2); --rhm-piano-ivory: light-dark(oklch(98.5% .005 88), oklch(90% .008 85)); --rhm-piano-ebony: light-dark(oklch(30% .012 60), oklch(15% .008 60)); --rhm-piano-gap: light-dark(oklch(70% .015 70), oklch(10% .006 60)); --rhm-label-tape-bg: oklch(27% .01 60); --rhm-label-tape-blue: oklch(42% .11 255); --rhm-label-tape-green: oklch(42% .08 155); --rhm-label-tape-teak: oklch(42% .08 50); --rhm-label-tape-fg: oklch(97% .01 90); --rhm-device-cheek-width: 18px; --rhm-device-cheek-width-narrow: 10px; --rhm-device-cheek-shade: light-dark(oklch(40% .08 50), oklch(28% .06 45)); --rhm-device-cheek: light-dark(oklch(56% .1 55), oklch(44% .085 50)); --rhm-device-cheek-light: light-dark(oklch(64% .1 62), oklch(50% .085 55)); --rhm-shadow-selected: inset 0px 1px 3px 0px oklch(0% 0 0 / .35); --rhm-shadow-thumb: 0px 0px 0px 1px var(--rhm-color-edge), 0px 2px 3px 0px oklch(0% 0 0 / .3); --rhm-shadow-control: inset 0px 1px 0px 0px light-dark(oklch(100% 0 0 / .9), oklch(100% 0 0 / .1)), 0px 0px 0px 1px var(--rhm-color-edge), 0px 2px 0px 1px light-dark(oklch(80% .018 75), oklch(14% .008 60)), 0px 5px 9px -3px light-dark(oklch(25% .03 55 / .35), oklch(25% .03 55 / .7)); --rhm-shadow-control-pressed: inset 0px 1px 3px 0px light-dark(oklch(0% 0 0 / .22), oklch(0% 0 0 / .5)), 0px 0px 0px 1px var(--rhm-color-edge), 0px 0px 0px 1px light-dark(oklch(80% .018 75), oklch(14% .008 60)); --rhm-shadow-panel: inset 0px 1px 0px 0px light-dark(oklch(100% 0 0 / .7), oklch(100% 0 0 / .06)), 0px 1px 2px 0px light-dark(oklch(30% .03 60 / .12), oklch(30% .03 60 / .4)), 0px 10px 24px -14px light-dark(oklch(30% .04 60 / .35), oklch(30% .04 60 / .7)); --rhm-shadow-well: inset 0px 2px 3px 0px light-dark(oklch(30% .03 60 / .16), oklch(30% .03 60 / .5)), inset 0px 0px 0px 1px var(--rhm-color-edge); --rhm-shadow-slot: inset 0px 1px 2px 0px light-dark(oklch(0% 0 0 / .25), oklch(0% 0 0 / .6)); --rhm-shadow-display: inset 0px 2px 8px 0px oklch(0% 0 0 / .7), 0px 0px 0px 3px light-dark(oklch(36% .016 66), oklch(10% .006 60)), 0px 1px 0px 4px light-dark(oklch(100% 0 0 / .4), oklch(100% 0 0 / .06)); --rhm-shadow-code: inset 0px 2px 6px 0px light-dark(oklch(30% .03 60 / .14), oklch(0% 0 0 / .7)), inset 0px 0px 0px 1px light-dark(oklch(56% .02 70), oklch(0% 0 0 / 0)), 0px 0px 0px 3px light-dark(oklch(0% 0 0 / 0), oklch(10% .006 60)), 0px 1px 0px 4px light-dark(oklch(0% 0 0 / 0), oklch(100% 0 0 / .06)); --rhm-shadow-overlay: inset 0px 1px 0px 0px light-dark(oklch(100% 0 0 / .8), oklch(100% 0 0 / .08)), 0px 2px 4px 0px oklch(25% .03 55 / .18), 0px 18px 36px -12px light-dark(oklch(25% .03 55 / .38), oklch(25% .03 55 / .75)); --rhm-shadow-knob: inset 0px 1px 0px 0px light-dark(oklch(100% 0 0 / .9), oklch(100% 0 0 / .1)), 0px 0px 0px 1px var(--rhm-color-edge), 0px 3px 5px -1px light-dark(oklch(25% .03 55 / .35), oklch(25% .03 55 / .7)); --rhm-face-accent: linear-gradient(180deg, oklch(100% 0 0 / .25) 0%, oklch(100% 0 0 / 0) 40%, oklch(0% 0 0 / .07) 100%); --rhm-face-danger: linear-gradient(180deg, oklch(100% 0 0 / .08) 0%, oklch(100% 0 0 / 0) 40%, oklch(0% 0 0 / .07) 100%); --rhm-face-selected: linear-gradient(180deg, oklch(100% 0 0 / .1) 0%, oklch(100% 0 0 / 0) 50%); --rhm-face-display: linear-gradient(118deg, oklch(100% 0 0 / .06) 0%, oklch(100% 0 0 / .06) 30%, oklch(100% 0 0 / 0) 30.5%, oklch(100% 0 0 / 0) 100%); --rhm-face-control: linear-gradient(180deg, light-dark(oklch(100% 0 0 / .7), oklch(100% 0 0 / .08)) 0%, oklch(100% 0 0 / 0) 40%, light-dark(oklch(0% 0 0 / .05), oklch(0% 0 0 / .14)) 100%); --rhm-face-code: linear-gradient(118deg, light-dark(oklch(100% 0 0 / 0), oklch(100% 0 0 / .06)) 0%, light-dark(oklch(100% 0 0 / 0), oklch(100% 0 0 / .06)) 30%, oklch(100% 0 0 / 0) 30.5%, oklch(100% 0 0 / 0) 100%); --rhm-press-offset: 2px; --rhm-press-scale: 1; --rhm-font-ui-axes: "MONO" 0, "CASL" 0; --rhm-font-display-axes: "MONO" 0, "CASL" 1; --rhm-font-legend-axes: "MONO" 0, "CASL" 0; --rhm-font-mono-axes: "MONO" 1, "CASL" 0; --rhm-font-readout-axes: "MONO" 1, "CASL" 0; --rhm-legend-case: none; --rhm-readout-case: none; --rhm-icon-weight: bold; --rhm-switch-label: printed; --rhm-switch-thumb-style: lamp; --rhm-lamp-style: led; --rhm-device-cheeks: teak; --rhm-meter-style: segmented; --rhm-knob-face: knurled; } @media (prefers-contrast: more) { :where(:root:not([data-rhm-contrast="standard"])), [data-rhm-skin="home-computer"]:not([data-rhm-contrast="standard"]) { --rhm-color-text-on-display-muted: oklch(74% .09 72); --rhm-color-text-muted: light-dark(oklch(40% .02 62), oklch(82% .015 80)); --rhm-color-text-on-code-muted: light-dark(oklch(40% .02 62), oklch(74% .09 72)); --rhm-color-edge: light-dark(oklch(45% .02 70), oklch(72% .015 70)); --rhm-color-syntax-comment: light-dark(oklch(40% .02 62), oklch(78% .03 75)); } } :where(:root[data-rhm-contrast="more"]), [data-rhm-skin="home-computer"][data-rhm-contrast="more"], [data-rhm-skin="home-computer"] [data-rhm-contrast="more"] { --rhm-color-text-on-display-muted: oklch(74% .09 72); --rhm-color-text-muted: light-dark(oklch(40% .02 62), oklch(82% .015 80)); --rhm-color-text-on-code-muted: light-dark(oklch(40% .02 62), oklch(74% .09 72)); --rhm-color-edge: light-dark(oklch(45% .02 70), oklch(72% .015 70)); --rhm-color-syntax-comment: light-dark(oklch(40% .02 62), oklch(78% .03 75)); } @media (prefers-reduced-motion: reduce) { :root { --rhm-duration-fast: 0ms; --rhm-duration-base: 0ms; } } } @layer rhm.reset { *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; } img, svg, video, canvas { max-inline-size: 100%; block-size: auto; } button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; } /* Components set display; hidden must still hide them. The first layer's !important beats every later layer. */ [hidden]:not([hidden="until-found"]) { display: none !important; } } @layer rhm.base { /* Body text: the UI cut of the brand family, on the canvas */ :where(:root) { font-family: var(--rhm-font-family-ui); font-variation-settings: var(--rhm-font-ui-axes); font-weight: var(--rhm-font-weight-body); line-height: var(--rhm-font-line-height-body); color: var(--rhm-color-text); background-color: var(--rhm-color-surface-canvas); font-size-adjust: from-font; -webkit-font-smoothing: antialiased; } /* Headings: the casual display cut */ :where(h1, h2, h3, h4) { font-family: var(--rhm-font-family-display); font-variation-settings: var(--rhm-font-display-axes); font-weight: var(--rhm-font-weight-display); letter-spacing: var(--rhm-font-tracking-display); line-height: var(--rhm-font-line-height-tight); text-wrap: balance; } :where(h3, h4) { font-weight: var(--rhm-font-weight-heading); } /* Links: the theme's text accent, underlined in their own colour; the underline thickens on hover */ :where(a:not([class])) { color: var(--rhm-color-link); text-decoration-line: underline; text-decoration-color: currentColor; text-decoration-thickness: max(1px, .0625rem); text-underline-offset: .18em; &:visited { color: var(--rhm-color-link-visited); } @media (hover: hover) { &:hover { text-decoration-thickness: max(3px, .1875rem, .12em); } } } /* Links that stand alone (navigation, link lists) are underlined only on hover. Running text keeps the underline (spec 8.2, WCAG 1.4.1) */ :where(nav, [data-rhm-links="standalone"]) :where(a:not([class])) { text-decoration-line: none; @media (hover: hover) { &:hover { text-decoration-line: underline; } } } :where(code, kbd, samp, pre) { font-family: var(--rhm-font-family-mono); font-variation-settings: var(--rhm-font-mono-axes); } ::selection { background-color: var(--rhm-color-selection); color: var(--rhm-color-text); } ::target-text { background-color: var(--rhm-color-selection); color: var(--rhm-color-text); } :focus-visible { outline: 2px solid var(--rhm-color-focus); outline-offset: 2px; } :where(html) { scrollbar-color: var(--rhm-color-edge) transparent; } /* The shared hit-area rule (spec 5.8) */ :where([data-rhm-hit]) { position: relative; } :where([data-rhm-hit])::after { content: ""; position: absolute; inset-inline-start: 50%; inset-block-start: 50%; inline-size: max(100%, var(--rhm-target-min)); block-size: max(100%, var(--rhm-target-min)); translate: -50% -50%; } } @layer rhm.layout { /* Prose: plain HTML content such as blog posts (spec 6.4, primitives) */ @scope (.rhm-prose) to ([data-slot] > *, .rhm-code-block, .rhm-screen) { :scope { max-inline-size: 70ch; text-wrap: pretty; } :where(p, ul, ol, blockquote, pre, table, figure) { margin-block: 0 1em; } :where(h2, h3, h4) { margin-block: 1.8em .5em; } :where(li) { margin-block: .25em; } :where(blockquote) { margin-inline: 0; padding-inline-start: 1em; border-inline-start: 3px solid var(--rhm-color-edge); color: var(--rhm-color-text-muted); } :where(img) { border-radius: var(--rhm-radius-tile); } :where(hr) { border: 0; border-block-start: 1px solid var(--rhm-color-edge); margin-block: 2em; } /* inline code */ :where(:not(pre) > code) { font-size: .9em; padding: .1em .35em; border-radius: 4px; background-color: var(--rhm-color-surface-sunken); } /* code blocks that aren't CodeBlock components: the code surface */ :where(pre) { overflow-x: auto; padding: var(--rhm-space-3) var(--rhm-space-4); border-radius: var(--rhm-radius-tile); background-color: var(--rhm-color-surface-code); background-image: var(--rhm-face-code); background-size: min(100%, 16rem) min(100%, 16rem); background-repeat: no-repeat; box-shadow: var(--rhm-shadow-code); color: var(--rhm-color-text-on-code); font-size: var(--rhm-font-size-sm); line-height: var(--rhm-font-line-height-code); scrollbar-gutter: stable; @media (forced-colors: active) { border: 1px solid CanvasText; } } :where(table) { border-collapse: collapse; inline-size: 100%; } :where(th, td) { text-align: start; padding: .4em .6em; border-block-end: 1px solid var(--rhm-color-edge); } } } /* badge.css */ /* Badge (atom): a category or a count. As a link, it gets the highlighter on hover. */ @layer rhm.components { @scope (.rhm-badge) { :scope { display: inline-flex; align-items: center; gap: .4em; padding: .15em .6em; border-radius: var(--rhm-radius-pill); background-color: var(--rhm-color-surface-sunken); box-shadow: inset 0 0 0 1px var(--rhm-color-edge); color: var(--rhm-color-text); font-size: var(--rhm-font-size-sm); font-weight: var(--rhm-font-weight-control); line-height: 1.5; text-decoration: none; white-space: nowrap; &[data-variant="warn"] { background-color: var(--rhm-color-warning-bg); color: var(--rhm-color-warning-fg); box-shadow: none; } /* As a link, the badge is a target: at least 24px tall (spec 5.8) */ &:is(a) { min-block-size: var(--rhm-target-min); cursor: pointer; } @media (hover: hover) { &:is(a):hover { background-color: var(--rhm-color-selection); } } &:focus-visible { outline: 2px solid var(--rhm-color-focus); outline-offset: 2px; } } [data-part="count"] { color: var(--rhm-color-text-muted); font-variant-numeric: tabular-nums; } } } /* device.css */ /* Device (spec 7.8): a frame with an optional head and a body; teak end cheeks when the skin asks for them. */ @layer rhm.components { @scope (.rhm-device) to ([data-slot] > *) { :scope { container: rhm-device / inline-size; --_rhm-cheek: 0px; @container style(--rhm-device-cheeks: teak) { --_rhm-cheek: var(--rhm-device-cheek-width, 0px); } position: relative; isolation: isolate; display: grid; align-content: start; min-inline-size: 0; border-radius: var(--rhm-device-radius, var(--rhm-radius-panel)); background-color: var(--rhm-device-bg, var(--rhm-color-surface-1)); background-image: linear-gradient(175deg, light-dark(oklch(100% 0 0 / .35), oklch(100% 0 0 / .05)), oklch(100% 0 0 / 0) 40%, oklch(0% 0 0 / .03)); box-shadow: var(--rhm-device-shadow, var(--rhm-shadow-panel)); } [data-slot] { min-inline-size: 0; padding-inline: calc(var(--_rhm-cheek) + var(--rhm-device-padding, var(--rhm-space-panel))); } /* A narrow device gets narrow cheeks. The slots and the cheeks query the root. */ @container rhm-device (inline-size < 35rem) { @container style(--rhm-device-cheeks: teak) { [data-slot], :scope::before, :scope::after { --_rhm-cheek: var(--rhm-device-cheek-width-narrow, 0px); } } } [data-slot="head"] { padding-block: var(--rhm-device-padding, var(--rhm-space-panel)) 0; } [data-slot="body"] { padding-block: var(--rhm-device-padding, var(--rhm-space-panel)); } @container style(--rhm-device-cheeks: teak) { :scope::before, :scope::after { content: ""; position: absolute; inset-block: 0; inline-size: var(--_rhm-cheek); z-index: 1; pointer-events: none; background: linear-gradient(90deg, oklch(100% 0 0 / 0) 20%, oklch(95% .04 70 / .22) 38%, oklch(100% 0 0 / 0) 55%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='600'%3E%3Cfilter id='g' x='0' y='0' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.12 0.007' numOctaves='4' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.08 0 0 0 0 0.03 3 0 0 0 -1.25'/%3E%3C/filter%3E%3Crect width='80' height='600' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 80px 600px, linear-gradient(90deg, var(--rhm-device-cheek-shade), var(--rhm-device-cheek) 22%, var(--rhm-device-cheek-light) 50%, var(--rhm-device-cheek) 78%, var(--rhm-device-cheek-shade)); } :scope::before { inset-inline-start: 0; border-start-start-radius: inherit; border-end-start-radius: inherit; box-shadow: 3px 0 6px -2px oklch(0% 0 0 / .35); } :scope::after { inset-inline-end: 0; border-start-end-radius: inherit; border-end-end-radius: inherit; background-position: 0 0, -30px -240px, 0 0; box-shadow: -3px 0 6px -2px oklch(0% 0 0 / .35); } } @media (forced-colors: active) { :scope { border: 1px solid CanvasText; } :scope::before, :scope::after { display: none; } } } } /* kbd.css */ @layer rhm.components { @scope (.rhm-kbd) { :scope { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 1.7em; padding: .1em .45em .15em; border: 1px solid transparent; border-radius: 5px; background-color: var(--rhm-color-control); background-image: var(--rhm-face-control); box-shadow: var(--rhm-shadow-control); color: var(--rhm-color-text); font-family: var(--rhm-font-family-mono); font-variation-settings: var(--rhm-font-mono-axes); font-size: .82em; line-height: 1.3; white-space: nowrap; } } } /* key.css */ /* Key and IconKey (spec 7.2). IconKey is a square key with an icon and a required label. */ @layer rhm.components { @scope (:is(.rhm-key, .rhm-icon-key)) to (.rhm-kbd) { :scope { --_rhm-bg: var(--rhm-key-bg, var(--rhm-color-control)); --_rhm-bg-hover: var(--rhm-key-bg-hover, var(--rhm-color-control-hover)); --_rhm-bg-pressed: var(--rhm-key-bg-pressed, var(--rhm-color-control-pressed)); --_rhm-fg: var(--rhm-key-fg, var(--rhm-color-text)); --_rhm-face: var(--rhm-key-face, var(--rhm-face-control)); display: inline-flex; align-items: center; justify-content: center; gap: var(--rhm-key-gap, var(--rhm-space-1)); block-size: var(--rhm-size-control-md); min-inline-size: var(--rhm-size-control-md); padding-block: 0; padding-inline: var(--rhm-space-inline); margin: 0; border: 1px solid transparent; border-radius: var(--rhm-key-radius, var(--rhm-radius-control)); background-color: var(--_rhm-bg); background-image: var(--_rhm-face); box-shadow: var(--rhm-key-shadow, var(--rhm-shadow-control)); color: var(--_rhm-fg); font-family: var(--rhm-font-family-ui); font-variation-settings: var(--rhm-font-ui-axes); font-size: var(--rhm-font-size-md); font-weight: var(--rhm-font-weight-control); line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition-property: background-color, translate, scale, box-shadow; transition-duration: var(--rhm-duration-fast); transition-timing-function: var(--rhm-easing-standard); &[data-variant="primary"] { --_rhm-bg: var(--rhm-key-primary-bg, var(--rhm-color-accent)); --_rhm-bg-hover: var(--rhm-color-accent-hover); --_rhm-bg-pressed: var(--rhm-color-accent-pressed); --_rhm-fg: var(--rhm-color-text-on-accent); --_rhm-face: var(--rhm-face-accent); } &[data-variant="danger"] { --_rhm-bg: var(--rhm-color-danger-solid); --_rhm-bg-hover: oklch(from var(--rhm-color-danger-solid) calc(l + .03) c h); --_rhm-bg-pressed: oklch(from var(--rhm-color-danger-solid) calc(l - .04) c h); --_rhm-fg: var(--rhm-color-text-on-danger); --_rhm-face: var(--rhm-face-danger); } &[data-variant="quiet"] { background: none; box-shadow: none; text-decoration: underline max(1px, .0625rem) currentColor; text-underline-offset: .18em; @media (hover: hover) { &:hover { text-decoration-thickness: max(3px, .1875rem, .12em); } } } &[data-size="sm"] { block-size: var(--rhm-size-control-sm); min-inline-size: var(--rhm-size-control-sm); font-size: var(--rhm-font-size-sm); } &[data-size="lg"] { block-size: var(--rhm-size-control-lg); min-inline-size: var(--rhm-size-control-lg); font-size: var(--rhm-font-size-lg); } @media (hover: hover) { &:hover:not(:disabled, [aria-disabled="true"]) { --_rhm-bg: var(--_rhm-bg-hover); } } &:active:not(:disabled, [aria-disabled="true"]) { --_rhm-bg: var(--_rhm-bg-pressed); translate: 0 var(--rhm-press-offset); scale: var(--rhm-press-scale); box-shadow: var(--rhm-key-shadow-pressed, var(--rhm-shadow-control-pressed)); } &[data-variant="quiet"]:active { translate: none; box-shadow: none; } &:focus-visible { outline: 2px solid var(--rhm-color-focus); outline-offset: 2px; } &:is(:disabled, [aria-disabled="true"]) { --_rhm-bg: var(--rhm-color-control); --_rhm-fg: var(--rhm-color-text-disabled); --_rhm-face: none; box-shadow: none; cursor: not-allowed; } @media (forced-colors: active) { border-color: ButtonText; } } :scope.rhm-icon-key { padding-inline: 0; inline-size: var(--rhm-size-control-md); } :scope.rhm-icon-key[data-size="sm"] { inline-size: var(--rhm-size-control-sm); } svg { inline-size: 1.15em; block-size: 1.15em; flex: none; } } } /* label-tape.css */ /* LabelTape (atom): embossed tape for project tags and name plates only (brand D9). */ @layer rhm.components { @scope (.rhm-label-tape) { :scope { --_rhm-tape: var(--rhm-label-tape-bg); &[data-variant="blue"] { --_rhm-tape: var(--rhm-label-tape-blue); } &[data-variant="green"] { --_rhm-tape: var(--rhm-label-tape-green); } &[data-variant="teak"] { --_rhm-tape: var(--rhm-label-tape-teak); } display: inline-block; padding: .2em .65em .25em; border-radius: 3px; rotate: -1.2deg; background-color: var(--_rhm-tape); background-image: linear-gradient(oklch(100% 0 0 / .14), oklch(100% 0 0 / 0) 45%, oklch(0% 0 0 / .12)); box-shadow: 0 1px 2px oklch(0% 0 0 / .3); color: var(--rhm-label-tape-fg); font-family: var(--rhm-font-family-ui); font-variation-settings: var(--rhm-font-ui-axes); font-size: var(--rhm-font-size-sm); font-weight: var(--rhm-font-weight-display); letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 -1px 0 oklch(0% 0 0 / .45), 0 1px 0 oklch(100% 0 0 / .25); line-height: 1.2; white-space: nowrap; &[data-size="sm"] { font-size: var(--rhm-font-size-xs); letter-spacing: .12em; padding: .15em .55em .2em; } &[data-variant="plate"] { rotate: -.6deg; } @media (forced-colors: active) { border: 1px solid CanvasText; } } } } /* lamp.css */ /* Lamp (atom) and StatusLight (molecule), spec 7.3 */ @layer rhm.components { @scope (.rhm-lamp) { :scope { --_rhm-c: var(--rhm-color-lamp-off); &[data-variant="ok"] { --_rhm-c: var(--rhm-color-lamp-ok); } &[data-variant="warn"] { --_rhm-c: var(--rhm-color-lamp-warn); } &[data-variant="bad"] { --_rhm-c: var(--rhm-color-lamp-bad); } &[data-variant="info"] { --_rhm-c: var(--rhm-color-lamp-info); } display: inline-block; flex: none; inline-size: var(--rhm-lamp-size, calc(var(--rhm-font-size-xs) * .85)); aspect-ratio: 1; border-radius: var(--rhm-radius-pill); color: var(--_rhm-c); background-color: currentColor; &[data-variant="off"], &:not([data-variant]) { background-color: transparent; box-shadow: inset 0 0 0 1.5px var(--rhm-color-edge); } @container style(--rhm-lamp-style: led) { background-color: currentColor; background-image: radial-gradient(circle at 38% 32%, oklch(100% 0 0 / .7) 0 1px, oklch(100% 0 0 / 0) 3px); box-shadow: 0 0 0 1.5px var(--rhm-lamp-bezel, var(--rhm-color-edge)), 0 0 0 2.5px oklch(100% 0 0 / .25), 0 0 6px 1px currentColor; &:is([data-variant="off"], :not([data-variant])) { background-color: var(--rhm-color-lamp-off); background-image: radial-gradient(circle at 38% 32%, oklch(100% 0 0 / .45) 0 1px, oklch(100% 0 0 / 0) 2.6px); box-shadow: 0 0 0 1.5px var(--rhm-lamp-bezel, var(--rhm-color-edge)), 0 0 0 2.5px oklch(100% 0 0 / .25), inset 0 -2px 3px oklch(0% 0 0 / .5); } } &[data-state="alert"] { animation: rhm-lamp-blink 1s steps(1) infinite; } @media (prefers-reduced-motion: reduce) { &[data-state="alert"] { animation: none; } } @media (forced-colors: active) { forced-color-adjust: none; background: CanvasText; box-shadow: none; &:is([data-variant="off"], :not([data-variant])) { background: Canvas; box-shadow: inset 0 0 0 1.5px CanvasText; } } } } @keyframes rhm-lamp-blink { 50% { opacity: .25; } } @scope (.rhm-status-light) to (.rhm-lamp) { :scope { display: inline-flex; align-items: center; gap: var(--rhm-status-light-gap, var(--rhm-space-2)); } } } /* pixel-mark.css */ @layer rhm.components { @scope (.rhm-pixel-mark) { :scope { display: block; flex: none; image-rendering: pixelated; shape-rendering: crispEdges; } } } /* screen.css */ /* Screen (atom): dark glass with amber phosphor, for readouts and status. */ @layer rhm.components { @scope (.rhm-screen) to ([data-slot] > *) { :scope { display: block; border-radius: var(--rhm-radius-tile); background-color: var(--rhm-color-surface-display); background-image: var(--rhm-face-display); /* The glare is a reflection, not a light: it covers at most a 16rem square corner (spec 5.11) */ background-size: min(100%, 16rem) min(100%, 16rem); background-repeat: no-repeat; box-shadow: var(--rhm-shadow-display); color: var(--rhm-color-text-on-display); font-family: var(--rhm-font-family-readout); font-variation-settings: var(--rhm-font-readout-axes); font-variant-numeric: tabular-nums; text-shadow: var(--rhm-readout-glow, none); @media (forced-colors: active) { border: 1px solid CanvasText; } } [data-part="muted"] { color: var(--rhm-color-text-on-display-muted); text-shadow: none; } [data-part="accent"] { color: var(--rhm-color-display-accent); } } } /* select.css */ /* Select (atom): a native