/* * Muthirai kit — one stylesheet: fonts, eight themes, type and components. * Fonts: loads RobotoMono-Variable.woff2, RobotoMono-Italic-Variable.woff2 and Roboto-Variable.woff2 * (Apache 2.0) from the fonts/ folder next to this file. Keep the two together. * * Themes: — explicit theme * — palette, light/dark follows the OS * — palette, mode pinned * Generated from the Muthirai design system. Edit tokens there, not here. */ @font-face { font-family: "Roboto Mono"; src: url("fonts/RobotoMono-Variable.woff2") format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto Mono"; src: url("fonts/RobotoMono-Italic-Variable.woff2") format("woff2"); font-weight: 100 700; font-style: italic; font-display: swap; } @font-face { font-family: "Roboto"; src: url("fonts/Roboto-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root, [data-theme="concrete-light"], [data-palette="concrete"] { --ground: #d8d8d4; --surface: #ededea; --surface-sunken: #c9c9c4; --ink: #111111; --ink-muted: #45453f; --hairline: #9d9d97; --inverse: var(--ink); --on-inverse: var(--surface); --accent: #ff4d12; --on-accent: #111111; --accent-ink: #8f2a00; --focus: #111111; --positive: #0a5a75; --caution: #6e4700; --critical: #a8141b; color-scheme: light; } [data-theme="concrete-dark"], [data-palette="concrete"][data-mode="dark"] { --ground: #111111; --surface: #1b1b1a; --surface-sunken: #0a0a0a; --ink: #ecebe5; --ink-muted: #a2a19a; --hairline: #3c3c39; --inverse: var(--ink); --on-inverse: var(--surface); --accent: #ff5a1f; --on-accent: #111111; --accent-ink: #ff8052; --focus: #ff8052; --positive: #5cc8ee; --caution: #f2b33d; --critical: #ff6b61; color-scheme: dark; } @media (prefers-color-scheme: dark) { [data-palette="concrete"]:not([data-mode="light"]) { --ground: #111111; --surface: #1b1b1a; --surface-sunken: #0a0a0a; --ink: #ecebe5; --ink-muted: #a2a19a; --hairline: #3c3c39; --inverse: var(--ink); --on-inverse: var(--surface); --accent: #ff5a1f; --on-accent: #111111; --accent-ink: #ff8052; --focus: #ff8052; --positive: #5cc8ee; --caution: #f2b33d; --critical: #ff6b61; color-scheme: dark; } } [data-theme="lab-light"], [data-palette="lab"] { --ground: #b3bbb2; --surface: #c8cfc6; --surface-sunken: #a3aba2; --ink: #0e1310; --ink-muted: #28302a; --hairline: #7f897f; --inverse: var(--ink); --on-inverse: var(--surface); --accent: #d6f06a; --on-accent: #0e1310; --accent-ink: #1f3a17; --focus: #0e1310; --positive: #063f55; --caution: #4a3100; --critical: #6e0a10; color-scheme: light; } [data-theme="lab-dark"], [data-palette="lab"][data-mode="dark"] { --ground: #14201b; --surface: #1b2923; --surface-sunken: #0e1713; --ink: #cfe0b4; --ink-muted: #8fa38a; --hairline: #33453b; --inverse: var(--ink); --on-inverse: var(--surface); --accent: #c2e27f; --on-accent: #14201b; --accent-ink: #c9ea86; --focus: #c9ea86; --positive: #7ccfe6; --caution: #f0c060; --critical: #ff8a7a; color-scheme: dark; } @media (prefers-color-scheme: dark) { [data-palette="lab"]:not([data-mode="light"]) { --ground: #14201b; --surface: #1b2923; --surface-sunken: #0e1713; --ink: #cfe0b4; --ink-muted: #8fa38a; --hairline: #33453b; --inverse: var(--ink); --on-inverse: var(--surface); --accent: #c2e27f; --on-accent: #14201b; --accent-ink: #c9ea86; --focus: #c9ea86; --positive: #7ccfe6; --caution: #f0c060; --critical: #ff8a7a; color-scheme: dark; } } [data-theme="dither-light"], [data-palette="dither"] { --ground: #e6e6e3; --surface: #f4f4f1; --surface-sunken: #d6d6d8; --ink: #171a52; --ink-muted: #4b4f7e; --hairline: #a7a9bf; --inverse: var(--ink); --on-inverse: var(--surface); --accent: #2b33e6; --on-accent: #f4f4f1; --accent-ink: #262ed0; --focus: #262ed0; --positive: #0a5a6b; --caution: #6a4700; --critical: #a3131d; color-scheme: light; } [data-theme="dither-dark"], [data-palette="dither"][data-mode="dark"] { --ground: #0f1135; --surface: #171a45; --surface-sunken: #0a0c28; --ink: #e7e7ef; --ink-muted: #a5a8cc; --hairline: #34386a; --inverse: var(--ink); --on-inverse: var(--surface); --accent: #8c95ff; --on-accent: #0f1135; --accent-ink: #9aa2ff; --focus: #9aa2ff; --positive: #6fd3ea; --caution: #f3c15a; --critical: #ff8f86; color-scheme: dark; } @media (prefers-color-scheme: dark) { [data-palette="dither"]:not([data-mode="light"]) { --ground: #0f1135; --surface: #171a45; --surface-sunken: #0a0c28; --ink: #e7e7ef; --ink-muted: #a5a8cc; --hairline: #34386a; --inverse: var(--ink); --on-inverse: var(--surface); --accent: #8c95ff; --on-accent: #0f1135; --accent-ink: #9aa2ff; --focus: #9aa2ff; --positive: #6fd3ea; --caution: #f3c15a; --critical: #ff8f86; color-scheme: dark; } } [data-theme="blueprint-light"], [data-palette="blueprint"] { --ground: #e8e3d6; --surface: #f3f0e8; --surface-sunken: #dcd5c4; --ink: #1c2a3b; --ink-muted: #4a596b; --hairline: #b3ab98; --inverse: var(--ink); --on-inverse: var(--surface); --accent: #4b6a8f; --on-accent: #f3f0e8; --accent-ink: #39577b; --focus: #39577b; --positive: #11585d; --caution: #654500; --critical: #9c1f18; color-scheme: light; } [data-theme="blueprint-dark"], [data-palette="blueprint"][data-mode="dark"] { --ground: #2b4260; --surface: #334c6c; --surface-sunken: #22364f; --ink: #efe9da; --ink-muted: #c7cfd8; --hairline: #5a7291; --inverse: var(--ink); --on-inverse: var(--surface); --accent: #e3d3a8; --on-accent: #1c2a3b; --accent-ink: #ecdcb0; --focus: #ecdcb0; --positive: #a6e6ee; --caution: #ffd98a; --critical: #ffc2b9; color-scheme: dark; } @media (prefers-color-scheme: dark) { [data-palette="blueprint"]:not([data-mode="light"]) { --ground: #2b4260; --surface: #334c6c; --surface-sunken: #22364f; --ink: #efe9da; --ink-muted: #c7cfd8; --hairline: #5a7291; --inverse: var(--ink); --on-inverse: var(--surface); --accent: #e3d3a8; --on-accent: #1c2a3b; --accent-ink: #ecdcb0; --focus: #ecdcb0; --positive: #a6e6ee; --caution: #ffd98a; --critical: #ffc2b9; color-scheme: dark; } } :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --radius-0: 0; --radius-s: 4px; --radius-l: 12px; --radius-pill: 999px; --border-hair: 1px; --border-rule: 2px; --border-heavy: 6px; --control-s: 28px; --control-m: 36px; --control-l: 44px; --font-mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --font-sans: Roboto, "Helvetica Neue", Arial, sans-serif; } .display-xl { font-family: var(--font-sans); font-size: 96px; line-height: 0.9; font-weight: 800; letter-spacing: -0.045em; } .display-l { font-family: var(--font-sans); font-size: 64px; line-height: 0.92; font-weight: 700; letter-spacing: -0.035em; } .display-m { font-family: var(--font-sans); font-size: 40px; line-height: 0.95; font-weight: 700; letter-spacing: -0.025em; } .headline { font-family: var(--font-sans); font-size: 24px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; } .figure-xl { font-family: var(--font-mono); font-size: 72px; line-height: 0.9; font-weight: 300; letter-spacing: -0.04em; } .figure-l { font-family: var(--font-mono); font-size: 40px; line-height: 1; font-weight: 300; letter-spacing: -0.03em; } .figure-m { font-family: var(--font-mono); font-size: 24px; line-height: 28px; font-weight: 400; letter-spacing: -0.02em; } .title { font-family: var(--font-mono); font-size: 16px; line-height: 22px; font-weight: 500; letter-spacing: normal; } .body { font-family: var(--font-mono); font-size: 14px; line-height: 22px; font-weight: 400; letter-spacing: normal; } .body-s { font-family: var(--font-mono); font-size: 12px; line-height: 18px; font-weight: 400; letter-spacing: normal; } .label { font-family: var(--font-mono); font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: 0.08em; } .micro { font-family: var(--font-mono); font-size: 10px; line-height: 12px; font-weight: 400; letter-spacing: 0.04em; } /* Muthirai — component styles. Needs tokens.css (colours, type classes, spacing) loaded first. */ body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-mono); font-size: 14px; line-height: 22px; -webkit-font-smoothing: antialiased; } .mu-condensed { font-variation-settings: "wdth" 75; } .mu-upper { text-transform: uppercase; } .mu-vertical { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; } .mu-muted { color: var(--ink-muted); } [data-theme$="-light"] { color-scheme: light; } [data-theme$="-dark"] { color-scheme: dark; } .mu-grain { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .mu-glyph { display: inline-block; flex: none; vertical-align: -0.125em; } :where(.mu-btn, .mu-seg__opt, .mu-field__input, .mu-check__input):focus-visible { outline: var(--border-rule) solid var(--focus); outline-offset: 2px; } /* Button */ .mu-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-m); padding: 0 var(--space-4); border: var(--border-hair) solid var(--ink); border-radius: var(--radius-0); background: transparent; color: var(--ink); font-family: var(--font-mono); font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; white-space: nowrap; } .mu-btn--s { height: var(--control-s); padding: 0 var(--space-3); gap: var(--space-1); } .mu-btn--l { height: var(--control-l); padding: 0 var(--space-5); font-size: 12px; } .mu-btn--primary { background: var(--inverse); color: var(--on-inverse); } .mu-btn--accent { background: var(--accent); color: var(--on-accent); } .mu-btn--ghost { border-color: transparent; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .mu-btn--outline:hover, .mu-btn--ghost:hover { background: var(--inverse); color: var(--on-inverse); border-color: var(--ink); text-decoration: none; } .mu-btn--primary:hover { background: var(--accent); color: var(--on-accent); } .mu-btn--accent:hover { background: var(--inverse); color: var(--on-inverse); } .mu-btn:active { transform: translate(1px, 1px); } .mu-btn:disabled { cursor: not-allowed; transform: none; color: var(--ink-muted); background: repeating-linear-gradient(-45deg, var(--surface-sunken) 0 3px, transparent 3px 7px); border-color: var(--ink-muted); } /* Segmented */ .mu-seg { display: inline-flex; border: var(--border-hair) solid var(--ink); background: var(--surface); } .mu-seg__opt { min-width: var(--control-m); height: var(--control-m); padding: 0 var(--space-3); border: 0; border-left: var(--border-hair) solid var(--ink); background: transparent; color: var(--ink); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; } .mu-seg__opt:first-child { border-left: 0; } .mu-seg__opt:hover { background: var(--surface-sunken); } .mu-seg__opt.is-on { background: var(--inverse); color: var(--on-inverse); } /* Field */ .mu-field { display: grid; gap: var(--space-1); min-width: 0; } .mu-field__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); } .mu-field__label { font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); } .mu-field__code { font-size: 10px; line-height: 12px; letter-spacing: .04em; color: var(--ink-muted); } .mu-field__input { box-sizing: border-box; width: 100%; height: var(--control-m); padding: 0 var(--space-3); border: var(--border-hair) solid var(--ink); border-radius: var(--radius-0); background: var(--surface); color: var(--ink); font-family: var(--font-mono); font-size: 14px; line-height: 22px; } textarea.mu-field__input { height: auto; min-height: 88px; padding: var(--space-2) var(--space-3); resize: vertical; } .mu-field__input::placeholder { color: var(--ink-muted); } .mu-field__input:disabled { background: var(--surface-sunken); color: var(--ink-muted); border-color: var(--ink-muted); } .mu-field.is-error .mu-field__input { border: var(--border-rule) solid var(--critical); } .mu-field__msg { margin: 0; display: flex; gap: var(--space-1); align-items: center; font-size: 12px; line-height: 18px; color: var(--ink-muted); } .mu-field__msg--error { color: var(--critical); } /* Checkbox */ .mu-check { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: 14px; line-height: 22px; color: var(--ink); position: relative; } .mu-check__input { position: absolute; opacity: 0; width: 16px; height: 16px; margin: 0; } .mu-check__box { box-sizing: border-box; width: 16px; height: 16px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: var(--border-hair) solid var(--ink); background: var(--surface); color: transparent; } .mu-check__input:checked + .mu-check__box { background: var(--inverse); color: var(--on-inverse); } .mu-check__input:focus-visible + .mu-check__box { outline: var(--border-rule) solid var(--focus); outline-offset: 2px; } .mu-check.is-disabled { cursor: not-allowed; color: var(--ink-muted); } .mu-check.is-disabled .mu-check__box { border-color: var(--ink-muted); background: var(--surface-sunken); } /* Tag */ .mu-tag { display: inline-flex; align-items: center; gap: var(--space-1); height: 20px; padding: 0 6px; box-sizing: border-box; font-family: var(--font-mono); font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--ink); } .mu-tag--outline { border: var(--border-hair) solid currentColor; } .mu-tag--solid { background: var(--inverse); color: var(--on-inverse); } .mu-tag--accent { background: var(--accent); color: var(--on-accent); } .mu-tag--bracket { padding: 0; gap: 6px; } .mu-tag--pill { height: 28px; padding: 0 var(--space-4); border-radius: var(--radius-pill); background: var(--inverse); color: var(--on-inverse); font-size: 16px; line-height: 20px; font-weight: 700; letter-spacing: .06em; } .mu-tone--positive { color: var(--positive); } .mu-tone--caution { color: var(--caution); } .mu-tone--critical { color: var(--critical); } .mu-tag--solid.mu-tone--positive, .mu-tag--solid.mu-tone--caution, .mu-tag--solid.mu-tone--critical { color: var(--on-inverse); } /* Figure */ .mu-figure { display: grid; gap: var(--space-1); } .mu-figure--end { justify-items: end; text-align: right; } .mu-figure__label { text-transform: uppercase; color: var(--ink-muted); } .mu-figure__value { display: flex; align-items: flex-start; color: var(--ink); white-space: nowrap; } .mu-figure__unit { font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: .08em; margin-left: .2em; margin-top: .15em; } .mu-figure__note { color: var(--ink-muted); } /* Readout */ .mu-readout { margin: 0; display: grid; gap: 2px; font-size: 12px; line-height: 18px; } .mu-readout__row { display: flex; align-items: baseline; gap: var(--space-2); text-transform: uppercase; letter-spacing: .04em; } .mu-readout dt { color: var(--ink); } .mu-readout dd { margin: 0; color: var(--ink); text-align: right; } .mu-readout__row.mu-tone--positive dd { color: var(--positive); } .mu-readout__row.mu-tone--caution dd { color: var(--caution); } .mu-readout__row.mu-tone--critical dd { color: var(--critical); } .mu-readout__leader { flex: 1; min-width: var(--space-4); align-self: flex-end; margin-bottom: 5px; height: 2px; background: radial-gradient(circle, var(--ink-muted) 0.9px, transparent 1.2px) 0 50% / 6px 2px repeat-x; } .mu-readout--plain .mu-readout__leader { background: none; } .mu-readout__unit { margin-left: .35em; color: var(--ink-muted); } /* Meter */ .mu-meter { display: grid; gap: var(--space-1); } .mu-meter__head { display: flex; justify-content: space-between; align-items: baseline; } .mu-meter__head .label { text-transform: uppercase; } .mu-meter__value { font-size: 12px; line-height: 18px; } .mu-meter__track { display: flex; gap: 2px; height: 14px; } .mu-meter__seg { flex: 1; box-sizing: border-box; border: var(--border-hair) solid var(--ink); background: transparent; } .mu-meter__seg.is-lit { background: var(--ink); } .mu-meter--accent .mu-meter__seg.is-lit { background: var(--accent); } /* SpecSheet */ .mu-spec { border: var(--border-hair) solid var(--ink); background: var(--surface); color: var(--ink); font-size: 11px; line-height: 16px; letter-spacing: .04em; text-transform: uppercase; } .mu-spec__section { display: grid; grid-template-columns: 28px 1fr; border-top: var(--border-hair) solid var(--ink); } .mu-spec__section:first-child { border-top: 0; } .mu-spec__side { border-right: var(--border-hair) solid var(--ink); display: flex; align-items: center; justify-content: center; padding: var(--space-2) 0; } .mu-spec__side span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px; letter-spacing: .12em; color: var(--ink-muted); } .mu-spec__row { display: grid; grid-template-columns: 64px 1fr auto; border-top: var(--border-hair) solid var(--ink); } .mu-spec__row:first-child { border-top: 0; } .mu-spec__key, .mu-spec__text, .mu-spec__mark { padding: var(--space-2) var(--space-3); } .mu-spec__key { font-weight: 500; } .mu-spec__mark { border-left: var(--border-hair) solid var(--ink); display: flex; align-items: center; } .mu-spec__foot { display: flex; border-top: var(--border-hair) solid var(--ink); } .mu-spec__foot > div { flex: 1; padding: var(--space-2) var(--space-3); border-left: var(--border-hair) solid var(--ink); font-size: 10px; } .mu-spec__foot > div:first-child { border-left: 0; flex: 2; } /* Panel */ .mu-panel { position: relative; border: var(--border-hair) solid var(--ink); background: var(--surface); color: var(--ink); } .mu-panel--plain { background: transparent; } .mu-panel__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: 28px; padding: 0 var(--space-3); background: var(--inverse); color: var(--on-inverse); font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; } .mu-panel__code { font-weight: 400; } .mu-panel__body { padding: var(--space-4); } .mu-panel__foot { display: flex; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-top: var(--border-hair) dashed var(--ink); font-size: 10px; line-height: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); } .mu-panel--marks { margin: 10px; } .mu-mark { position: absolute; width: 8px; height: 8px; border: 0 solid var(--ink); pointer-events: none; } .mu-mark--tl { top: -10px; left: -10px; border-top-width: 1px; border-left-width: 1px; } .mu-mark--tr { top: -10px; right: -10px; border-top-width: 1px; border-right-width: 1px; } .mu-mark--bl { bottom: -10px; left: -10px; border-bottom-width: 1px; border-left-width: 1px; } .mu-mark--br { bottom: -10px; right: -10px; border-bottom-width: 1px; border-right-width: 1px; } /* Barcode */ .mu-barcode { margin: 0; display: grid; gap: 2px; min-width: 0; } .mu-barcode svg { display: block; fill: var(--ink); } .mu-barcode figcaption { color: var(--ink); letter-spacing: .3em; } /* Rule */ .mu-rule { border: 0; margin: var(--space-3) 0; height: 0; } .mu-rule--hair { border-top: var(--border-hair) solid var(--hairline); } .mu-rule--ink { border-top: var(--border-hair) solid var(--ink); } .mu-rule--heavy { border-top: var(--border-heavy) solid var(--ink); } .mu-rule--dashed { border-top: var(--border-hair) dashed var(--ink); } .mu-rule--dots { height: 2px; background: radial-gradient(circle, var(--ink) 0.9px, transparent 1.2px) 0 50% / 6px 2px repeat-x; } .mu-rule--hatch { height: 10px; background: repeating-linear-gradient(-45deg, var(--ink) 0 2px, transparent 2px 6px); } .mu-rule--barcode { margin: var(--space-3) 0; } /* Pattern */ .mu-pattern { --mu-pat: var(--ink); color: var(--mu-pat); box-sizing: border-box; } .mu-pattern--accent { --mu-pat: var(--accent); } .mu-pattern--muted { --mu-pat: var(--ink-muted); } .mu-pattern--hatch { background: repeating-linear-gradient(-45deg, var(--mu-pat) 0 3px, transparent 3px 9px); } .mu-pattern--dots { background: radial-gradient(circle, var(--mu-pat) 1.4px, transparent 1.8px) 0 0 / 8px 8px; } .mu-pattern--checker { background: conic-gradient(var(--mu-pat) 25%, transparent 0 50%, var(--mu-pat) 0 75%, transparent 0) 0 0 / 12px 12px; } .mu-pattern--grid { background: linear-gradient(var(--mu-pat) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, var(--mu-pat) 1px, transparent 1px) 0 0 / 16px 16px; } .mu-pattern--crossed { position: relative; border: var(--border-hair) solid var(--mu-pat); } .mu-pattern__x { position: absolute; inset: 0; width: 100%; height: 100%; } .mu-pattern__x path { stroke: var(--mu-pat); stroke-width: 1; fill: none; } .mu-pattern--plus { background-color: var(--mu-pat); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.5 5h1v2.5H11v1H8.5V11h-1V8.5H5v-1h2.5z'/%3E%3C/svg%3E") 0 0 / 16px 16px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M7.5 5h1v2.5H11v1H8.5V11h-1V8.5H5v-1h2.5z'/%3E%3C/svg%3E") 0 0 / 16px 16px; } /* Label: die-cut stock */ .mu-label { --mu-label-bg: var(--surface); --mu-label-fg: var(--ink); position: relative; box-sizing: border-box; color: var(--mu-label-fg); font-family: var(--font-mono); } .mu-ltone--plain { --mu-label-bg: var(--ground); } .mu-ltone--inverse { --mu-label-bg: var(--inverse); --mu-label-fg: var(--on-inverse); } .mu-ltone--accent { --mu-label-bg: var(--accent); --mu-label-fg: var(--on-accent); } .mu-label--rect, .mu-label--tag { display: flex; border: var(--border-hair) solid var(--ink); background: var(--mu-label-bg); } .mu-label--tag { border-radius: var(--radius-l); overflow: hidden; } .mu-label--notch { background: var(--ink); padding: 1px; clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%); } .mu-label__inner { display: flex; background: var(--mu-label-bg); clip-path: polygon(0 0, calc(100% - 19.414px) 0, 100% 19.414px, 100% 100%, 0 100%); } .mu-label__band { flex: none; width: 28px; background: var(--inverse); color: var(--on-inverse); display: flex; align-items: center; justify-content: center; } .mu-label__band span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10px; line-height: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; } .mu-label__body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .mu-label--pad-m .mu-label__body { padding: var(--space-3); gap: var(--space-2); } .mu-label--pad-s .mu-label__body { padding: var(--space-2); gap: var(--space-1); } .mu-label--seal { aspect-ratio: 1; border-radius: 50%; border: var(--border-hair) solid var(--ink); background: var(--mu-label-bg); display: flex; overflow: hidden; } .mu-label--seal.mu-label--ring { box-shadow: inset 0 0 0 6px var(--mu-label-bg), inset 0 0 0 7px var(--ink); } .mu-label--seal .mu-label__body { align-items: center; justify-content: center; text-align: center; padding: 16%; gap: var(--space-1); } .mu-label--diamond { aspect-ratio: 2.5; } .mu-label--triangle { aspect-ratio: 2; } .mu-label__shape { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .mu-label__shape path { fill: var(--mu-label-bg); stroke: var(--ink); stroke-width: 1; } .mu-label__content { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: var(--space-1); } .mu-label--diamond .mu-label__content { inset: 16% 24%; } .mu-label--triangle .mu-label__content { top: 7%; bottom: 40%; left: 22%; right: 22%; } .mu-label .label, .mu-label .micro, .mu-cells .label, .mu-cells .micro { text-transform: uppercase; } /* Cells: ruled grid */ .mu-cells { display: grid; gap: 1px; background: var(--ink); } .mu-cells--frame { border: var(--border-hair) solid var(--ink); } .mu-label__body > .mu-cells { flex: 1; } .mu-cell { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); background: var(--mu-label-bg, var(--surface)); color: var(--mu-label-fg, var(--ink)); } .mu-cell--row { flex-direction: row; align-items: center; gap: var(--space-2); } .mu-cell--pad-m { padding: var(--space-2) var(--space-3); } .mu-cell--pad-s { padding: var(--space-1) var(--space-2); } .mu-cell--pad-none { padding: 0; } .mu-cell--inverse { background: var(--inverse); color: var(--on-inverse); } .mu-cell--accent { background: var(--accent); color: var(--on-accent); } .mu-cell--sunken { background: var(--surface-sunken); color: var(--ink); } .mu-cell--align-start { align-items: flex-start; } .mu-cell--align-center { align-items: center; } .mu-cell--align-end { align-items: flex-end; } .mu-cell--justify-start { justify-content: flex-start; } .mu-cell--justify-center { justify-content: center; } .mu-cell--justify-end { justify-content: flex-end; } .mu-cell--justify-between { justify-content: space-between; } .mu-cell--inverse .mu-barcode svg, .mu-cell--inverse .mu-matrix { fill: var(--on-inverse); } .mu-cell--inverse .mu-muted, .mu-cell--accent .mu-muted, .mu-ltone--inverse .mu-muted, .mu-ltone--accent .mu-muted { color: inherit; } /* Matrix */ .mu-matrix { display: block; flex: none; fill: var(--ink); } .mu-matrix--accent { fill: var(--accent); } .mu-matrix--muted { fill: var(--ink-muted); } .mu-ltone--inverse .mu-matrix, .mu-ltone--inverse .mu-barcode svg { fill: var(--on-inverse); } .mu-ltone--inverse .mu-barcode figcaption { color: var(--on-inverse); } /* Ticket */ .mu-ticket { display: flex; align-items: stretch; border: var(--border-hair) solid var(--ink); border-radius: var(--radius-s); background: var(--surface); color: var(--ink); overflow: hidden; } .mu-ticket__band { flex: none; width: 36px; background: var(--inverse); color: var(--on-inverse); display: flex; align-items: center; justify-content: center; } .mu-ticket__band span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; } .mu-ticket__main { flex: 1; min-width: 0; padding: var(--space-4); display: grid; gap: var(--space-3); align-content: start; } .mu-ticket__stub { flex: none; width: 34%; min-width: 160px; padding: var(--space-4); display: grid; gap: var(--space-3); align-content: start; border-left: var(--border-rule) dashed var(--ink); } .mu-ticket__head { display: flex; align-items: center; gap: var(--space-2); text-transform: uppercase; } .mu-ticket__serial { margin-left: auto; color: var(--ink-muted); } .mu-ticket__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); } .mu-ticket__grid--stub { grid-template-columns: 1fr; } .mu-ticket__field { min-width: 0; display: grid; gap: 2px; } .mu-span-2 { grid-column: span 2; } .mu-span-3 { grid-column: 1 / -1; } .mu-ticket__label { color: var(--ink-muted); text-transform: uppercase; } .mu-ticket__value { color: var(--ink); white-space: nowrap; } .mu-ticket__value.body { text-transform: uppercase; font-size: 12px; line-height: 18px; white-space: normal; } .mu-ticket__unit { font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: .08em; vertical-align: top; margin-left: .15em; top: 0; } .mu-ticket__code { max-width: 280px; } /* ThemeSwitcher */ .mu-themes { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; } .mu-themes__group { display: grid; gap: var(--space-1); } .mu-themes__group > .label { text-transform: uppercase; color: var(--ink-muted); } .mu-swatch-opt { display: inline-flex; align-items: center; gap: var(--space-2); } .mu-swatch { display: inline-flex; border: var(--border-hair) solid var(--ink); } .mu-swatch i { display: block; width: 8px; height: 12px; } .mu-swatch__ground { background: var(--ground); } .mu-swatch__ink { background: var(--ink); } .mu-swatch__accent { background: var(--accent); } /* Table: plain HTML */ .mu-table { width: 100%; border-collapse: collapse; border: var(--border-hair) solid var(--ink); background: var(--surface); color: var(--ink); font-family: var(--font-mono); font-size: 12px; line-height: 18px; } .mu-table th, .mu-table td { border: var(--border-hair) solid var(--ink); padding: var(--space-2) var(--space-3); text-align: left; vertical-align: top; } .mu-table th { background: var(--surface-sunken); font-size: 11px; line-height: 14px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; } .mu-table td.num, .mu-table th.num { text-align: right; font-variant-numeric: tabular-nums; } .mu-table tbody tr:hover td { background: var(--surface-sunken); } .mu-table caption { caption-side: top; text-align: left; padding: 0 0 var(--space-2); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); } @media (prefers-reduced-motion: reduce) { .mu-btn:active { transform: none; } }