Mercurial
comparison design_system/src/styles/semantic.css @ 258:60a876c4587a
[ui] Add semantic primitive ownership
Build a layered Zenbu token and sizing system, make authored controls use native-underneath primitives, migrate mrjunejune without imposing visual surfaces, and document/enforce HTML ownership in the catalog and wiki.
Co-authored-by: Copilot <[email protected]>
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Wed, 05 Aug 2026 05:25:40 -0700 |
| parents | |
| children | 667156fcd3e3 |
comparison
equal
deleted
inserted
replaced
| 257:609d3c6aff4e | 258:60a876c4587a |
|---|---|
| 1 :root { | |
| 2 --zenbu-font-editorial: var(--zenbu-ref-font-family-sans); | |
| 3 --zenbu-font-playful: var(--zenbu-ref-font-family-sans); | |
| 4 --zenbu-sys-font-family-ui: var(--zenbu-ref-font-family-sans); | |
| 5 --zenbu-sys-font-family-content: var(--zenbu-ref-font-family-sans); | |
| 6 --zenbu-sys-font-family-code: var(--zenbu-ref-font-family-mono); | |
| 7 --zenbu-sys-font-weight-regular: var(--zenbu-ref-font-weight-regular); | |
| 8 --zenbu-sys-font-weight-medium: var(--zenbu-ref-font-weight-medium); | |
| 9 --zenbu-sys-font-weight-strong: var(--zenbu-ref-font-weight-strong); | |
| 10 --zenbu-sys-font-weight-bold: var(--zenbu-ref-font-weight-bold); | |
| 11 --zenbu-sys-font-weight-display: var(--zenbu-ref-font-weight-bold); | |
| 12 --zenbu-sys-font-size-xs: var(--zenbu-ref-font-size-xs); | |
| 13 --zenbu-sys-font-size-sm: var(--zenbu-ref-font-size-sm); | |
| 14 --zenbu-sys-font-size-md: var(--zenbu-ref-font-size-md); | |
| 15 --zenbu-sys-font-size-lg: var(--zenbu-ref-font-size-lg); | |
| 16 --zenbu-sys-font-size-xl: var(--zenbu-ref-font-size-xl); | |
| 17 --zenbu-sys-font-size-2xl: var(--zenbu-ref-font-size-2xl); | |
| 18 --zenbu-sys-font-size-3xl: var(--zenbu-ref-font-size-3xl); | |
| 19 --zenbu-sys-line-height-xs: 1.25; | |
| 20 --zenbu-sys-line-height-sm: var(--zenbu-ref-line-height-ui); | |
| 21 --zenbu-sys-line-height-md: var(--zenbu-ref-line-height-body); | |
| 22 --zenbu-sys-line-height-lg: 1.5; | |
| 23 --zenbu-sys-line-height-xl: var(--zenbu-ref-line-height-ui); | |
| 24 | |
| 25 --zenbu-sys-type-caption-family: var(--zenbu-sys-font-family-ui); | |
| 26 --zenbu-sys-type-caption-size: var(--zenbu-ref-font-size-xs); | |
| 27 --zenbu-sys-type-caption-weight: var(--zenbu-sys-font-weight-regular); | |
| 28 --zenbu-sys-type-caption-line-height: var(--zenbu-ref-line-height-ui); | |
| 29 --zenbu-sys-type-label-family: var(--zenbu-sys-font-family-ui); | |
| 30 --zenbu-sys-type-label-size: var(--zenbu-ref-font-size-sm); | |
| 31 --zenbu-sys-type-label-weight: var(--zenbu-sys-font-weight-medium); | |
| 32 --zenbu-sys-type-label-line-height: var(--zenbu-ref-line-height-ui); | |
| 33 --zenbu-sys-type-body-family: var(--zenbu-sys-font-family-ui); | |
| 34 --zenbu-sys-type-body-size: var(--zenbu-ref-font-size-md); | |
| 35 --zenbu-sys-type-body-weight: var(--zenbu-sys-font-weight-regular); | |
| 36 --zenbu-sys-type-body-line-height: var(--zenbu-ref-line-height-body); | |
| 37 --zenbu-sys-type-body-large-family: var(--zenbu-sys-font-family-ui); | |
| 38 --zenbu-sys-type-body-large-size: var(--zenbu-ref-font-size-lg); | |
| 39 --zenbu-sys-type-body-large-weight: var(--zenbu-sys-font-weight-regular); | |
| 40 --zenbu-sys-type-body-large-line-height: var(--zenbu-ref-line-height-body); | |
| 41 --zenbu-sys-type-subtitle-family: var(--zenbu-sys-font-family-ui); | |
| 42 --zenbu-sys-type-subtitle-size: var(--zenbu-ref-font-size-xl); | |
| 43 --zenbu-sys-type-subtitle-weight: var(--zenbu-sys-font-weight-strong); | |
| 44 --zenbu-sys-type-subtitle-line-height: var(--zenbu-ref-line-height-heading); | |
| 45 --zenbu-sys-type-title-family: var(--zenbu-sys-font-family-ui); | |
| 46 --zenbu-sys-type-title-size: var(--zenbu-ref-font-size-2xl); | |
| 47 --zenbu-sys-type-title-weight: var(--zenbu-sys-font-weight-strong); | |
| 48 --zenbu-sys-type-title-line-height: var(--zenbu-ref-line-height-heading); | |
| 49 --zenbu-sys-type-page-title-family: var(--zenbu-sys-font-family-ui); | |
| 50 --zenbu-sys-type-page-title-size: | |
| 51 clamp(var(--zenbu-ref-font-size-3xl), 1.5rem + 2cqi, var(--zenbu-ref-font-size-display)); | |
| 52 --zenbu-sys-type-page-title-weight: var(--zenbu-sys-font-weight-strong); | |
| 53 --zenbu-sys-type-page-title-line-height: var(--zenbu-ref-line-height-tight); | |
| 54 --zenbu-sys-type-reading-family: var(--zenbu-sys-font-family-content); | |
| 55 --zenbu-sys-type-reading-size: var(--zenbu-ref-font-size-md); | |
| 56 --zenbu-sys-type-reading-weight: var(--zenbu-sys-font-weight-regular); | |
| 57 --zenbu-sys-type-reading-line-height: var(--zenbu-ref-line-height-reading); | |
| 58 --zenbu-sys-type-code-family: var(--zenbu-sys-font-family-code); | |
| 59 --zenbu-sys-type-code-size: var(--zenbu-ref-font-size-sm); | |
| 60 --zenbu-sys-type-code-weight: var(--zenbu-sys-font-weight-regular); | |
| 61 --zenbu-sys-type-code-line-height: var(--zenbu-ref-line-height-body); | |
| 62 | |
| 63 --zenbu-sys-space-icon-label: var(--zenbu-ref-space-1); | |
| 64 --zenbu-sys-space-related: var(--zenbu-ref-space-2); | |
| 65 --zenbu-sys-space-control: var(--zenbu-ref-space-3); | |
| 66 --zenbu-sys-space-group: var(--zenbu-ref-space-4); | |
| 67 --zenbu-sys-space-container: var(--zenbu-ref-space-6); | |
| 68 --zenbu-sys-space-content: var(--zenbu-ref-space-8); | |
| 69 --zenbu-sys-space-section: var(--zenbu-ref-space-12); | |
| 70 --zenbu-sys-space-page: var(--zenbu-ref-space-16); | |
| 71 --zenbu-sys-padding-xs: var(--zenbu-ref-space-2); | |
| 72 --zenbu-sys-padding-sm: var(--zenbu-ref-space-3); | |
| 73 --zenbu-sys-padding-md: var(--zenbu-ref-space-4); | |
| 74 --zenbu-sys-padding-lg: var(--zenbu-ref-space-6); | |
| 75 --zenbu-sys-padding-xl: var(--zenbu-ref-space-8); | |
| 76 | |
| 77 --zenbu-sys-radius-control-small: var(--zenbu-ref-radius-1); | |
| 78 --zenbu-sys-radius-control: var(--zenbu-ref-radius-2); | |
| 79 --zenbu-sys-radius-control-large: var(--zenbu-ref-radius-3); | |
| 80 --zenbu-sys-radius-container: var(--zenbu-ref-radius-3); | |
| 81 --zenbu-sys-radius-panel: var(--zenbu-ref-radius-4); | |
| 82 --zenbu-sys-radius-dialog: var(--zenbu-ref-radius-5); | |
| 83 --zenbu-sys-radius-pill: var(--zenbu-ref-radius-round); | |
| 84 --zenbu-sys-stroke-width: var(--zenbu-ref-stroke-1); | |
| 85 --zenbu-sys-stroke-width-emphasis: var(--zenbu-ref-stroke-2); | |
| 86 --zenbu-sys-focus-width: var(--zenbu-ref-stroke-3); | |
| 87 --zenbu-sys-focus-offset: var(--zenbu-ref-space-0-5); | |
| 88 --zenbu-sys-shadow-rest: none; | |
| 89 --zenbu-sys-shadow-subtle: var(--zenbu-ref-shadow-1); | |
| 90 --zenbu-sys-shadow-raised: var(--zenbu-ref-shadow-2); | |
| 91 --zenbu-sys-shadow-overlay: var(--zenbu-ref-shadow-3); | |
| 92 --zenbu-sys-shadow-dialog: var(--zenbu-ref-shadow-4); | |
| 93 | |
| 94 --zenbu-sys-motion-duration-feedback: var(--zenbu-ref-duration-fast); | |
| 95 --zenbu-sys-motion-duration-state: var(--zenbu-ref-duration-normal); | |
| 96 --zenbu-sys-motion-duration-enter: var(--zenbu-ref-duration-normal); | |
| 97 --zenbu-sys-motion-duration-exit: var(--zenbu-ref-duration-fast); | |
| 98 --zenbu-sys-motion-duration-layout: var(--zenbu-ref-duration-slow); | |
| 99 --zenbu-sys-motion-ease-state: var(--zenbu-ref-ease-standard); | |
| 100 --zenbu-sys-motion-ease-enter: var(--zenbu-ref-ease-enter); | |
| 101 --zenbu-sys-motion-ease-exit: var(--zenbu-ref-ease-exit); | |
| 102 --zenbu-sys-motion-ease-layout: var(--zenbu-ref-ease-emphasized); | |
| 103 --zenbu-sys-opacity-disabled: var(--zenbu-ref-opacity-disabled); | |
| 104 | |
| 105 --zenbu-sys-control-height-xs: var(--zenbu-ref-size-control-xs); | |
| 106 --zenbu-sys-control-height-sm: var(--zenbu-ref-size-control-sm); | |
| 107 --zenbu-sys-control-height-md: var(--zenbu-ref-size-control-md); | |
| 108 --zenbu-sys-control-height-lg: var(--zenbu-ref-size-control-lg); | |
| 109 --zenbu-sys-control-height-xl: var(--zenbu-ref-size-control-xl); | |
| 110 --zenbu-sys-control-padding-block-xs: var(--zenbu-ref-space-1); | |
| 111 --zenbu-sys-control-padding-block-sm: var(--zenbu-ref-space-1-5); | |
| 112 --zenbu-sys-control-padding-block-md: var(--zenbu-ref-space-2); | |
| 113 --zenbu-sys-control-padding-block-lg: var(--zenbu-ref-space-3); | |
| 114 --zenbu-sys-control-padding-block-xl: var(--zenbu-ref-space-4); | |
| 115 --zenbu-sys-control-padding-inline-xs: var(--zenbu-ref-space-2-5); | |
| 116 --zenbu-sys-control-padding-inline-sm: var(--zenbu-ref-space-3); | |
| 117 --zenbu-sys-control-padding-inline-md: var(--zenbu-ref-space-4); | |
| 118 --zenbu-sys-control-padding-inline-lg: var(--zenbu-ref-space-5); | |
| 119 --zenbu-sys-control-padding-inline-xl: var(--zenbu-ref-space-6); | |
| 120 --zenbu-sys-control-gap-xs: var(--zenbu-ref-space-1); | |
| 121 --zenbu-sys-control-gap-sm: var(--zenbu-ref-space-1-5); | |
| 122 --zenbu-sys-control-gap-md: var(--zenbu-ref-space-2); | |
| 123 --zenbu-sys-control-gap-lg: var(--zenbu-ref-space-3); | |
| 124 --zenbu-sys-control-gap-xl: var(--zenbu-ref-space-4); | |
| 125 --zenbu-sys-control-font-size-xs: var(--zenbu-ref-font-size-xs); | |
| 126 --zenbu-sys-control-font-size-sm: var(--zenbu-ref-font-size-sm); | |
| 127 --zenbu-sys-control-font-size-md: var(--zenbu-ref-font-size-md); | |
| 128 --zenbu-sys-control-font-size-lg: var(--zenbu-ref-font-size-lg); | |
| 129 --zenbu-sys-control-font-size-xl: var(--zenbu-ref-font-size-xl); | |
| 130 --zenbu-sys-control-line-height-xs: 1; | |
| 131 --zenbu-sys-control-line-height-sm: 1; | |
| 132 --zenbu-sys-control-line-height-md: 1; | |
| 133 --zenbu-sys-control-line-height-lg: 1; | |
| 134 --zenbu-sys-control-line-height-xl: 1; | |
| 135 --zenbu-sys-icon-size-xs: var(--zenbu-ref-size-icon-xs); | |
| 136 --zenbu-sys-icon-size-sm: var(--zenbu-ref-size-icon-sm); | |
| 137 --zenbu-sys-icon-size-md: var(--zenbu-ref-size-icon-md); | |
| 138 --zenbu-sys-icon-size-lg: var(--zenbu-ref-size-icon-lg); | |
| 139 --zenbu-sys-icon-size-xl: var(--zenbu-ref-size-icon-xl); | |
| 140 --zenbu-sys-size-target-min: var(--zenbu-ref-size-target-min); | |
| 141 --zenbu-sys-width-reading: 45rem; | |
| 142 --zenbu-sys-width-content: 64rem; | |
| 143 --zenbu-sys-width-page: 90rem; | |
| 144 --zenbu-sys-z-sticky: var(--zenbu-ref-z-sticky); | |
| 145 --zenbu-sys-z-dropdown: var(--zenbu-ref-z-dropdown); | |
| 146 --zenbu-sys-z-popover: var(--zenbu-ref-z-popover); | |
| 147 --zenbu-sys-z-notification: var(--zenbu-ref-z-notification); | |
| 148 --zenbu-sys-z-modal: var(--zenbu-ref-z-modal); | |
| 149 | |
| 150 --zenbu-sys-color-surface-page: var(--zenbu-ref-color-neutral-100); | |
| 151 --zenbu-sys-color-surface-canvas: var(--zenbu-ref-color-neutral-100); | |
| 152 --zenbu-sys-color-surface-default: var(--zenbu-ref-color-neutral-50); | |
| 153 --zenbu-sys-color-surface-subtle: var(--zenbu-ref-color-neutral-200); | |
| 154 --zenbu-sys-color-surface-raised: var(--zenbu-ref-color-white); | |
| 155 --zenbu-sys-color-surface-overlay: var(--zenbu-ref-color-white); | |
| 156 --zenbu-sys-color-surface-sunken: var(--zenbu-ref-color-neutral-200); | |
| 157 --zenbu-sys-color-scrim: var(--zenbu-ref-color-black-alpha-60); | |
| 158 --zenbu-sys-color-text-primary: var(--zenbu-ref-color-neutral-950); | |
| 159 --zenbu-sys-color-text-secondary: var(--zenbu-ref-color-neutral-700); | |
| 160 --zenbu-sys-color-text-tertiary: var(--zenbu-ref-color-neutral-600); | |
| 161 --zenbu-sys-color-text-placeholder: var(--zenbu-ref-color-neutral-500); | |
| 162 --zenbu-sys-color-text-disabled: var(--zenbu-ref-color-neutral-400); | |
| 163 --zenbu-sys-color-text-inverse: var(--zenbu-ref-color-white); | |
| 164 --zenbu-sys-color-text-link: var(--zenbu-ref-color-brand-600); | |
| 165 --zenbu-sys-color-link-decoration: var(--zenbu-ref-color-link-decoration); | |
| 166 --zenbu-sys-color-icon-primary: var(--zenbu-ref-color-neutral-900); | |
| 167 --zenbu-sys-color-icon-secondary: var(--zenbu-ref-color-neutral-600); | |
| 168 --zenbu-sys-color-border-subtle: var(--zenbu-ref-color-neutral-300); | |
| 169 --zenbu-sys-color-border-default: var(--zenbu-ref-color-neutral-500); | |
| 170 --zenbu-sys-color-border-strong: var(--zenbu-ref-color-neutral-800); | |
| 171 --zenbu-sys-color-action-primary-background: var(--zenbu-ref-color-accent); | |
| 172 --zenbu-sys-color-action-primary-background-hover: var(--zenbu-ref-color-accent-hover); | |
| 173 --zenbu-sys-color-action-primary-background-pressed: var(--zenbu-ref-color-accent-pressed); | |
| 174 --zenbu-sys-color-action-primary-foreground: var(--zenbu-ref-color-neutral-950); | |
| 175 --zenbu-sys-color-action-primary-border: var(--zenbu-sys-color-border-strong); | |
| 176 --zenbu-sys-color-action-neutral-background: var(--zenbu-sys-color-surface-default); | |
| 177 --zenbu-sys-color-action-neutral-background-hover: var(--zenbu-sys-color-surface-subtle); | |
| 178 --zenbu-sys-color-action-neutral-background-pressed: var(--zenbu-sys-color-surface-sunken); | |
| 179 --zenbu-sys-color-action-neutral-foreground: var(--zenbu-sys-color-text-primary); | |
| 180 --zenbu-sys-color-action-neutral-border: var(--zenbu-sys-color-border-default); | |
| 181 --zenbu-sys-color-action-danger-background: var(--zenbu-ref-color-danger); | |
| 182 --zenbu-sys-color-action-danger-background-hover: var(--zenbu-ref-color-danger-700); | |
| 183 --zenbu-sys-color-action-danger-background-pressed: var(--zenbu-ref-color-danger-900); | |
| 184 --zenbu-sys-color-action-danger-foreground: var(--zenbu-ref-color-white); | |
| 185 --zenbu-sys-color-action-danger-border: var(--zenbu-ref-color-danger); | |
| 186 --zenbu-sys-color-focus-inner: var(--zenbu-sys-color-surface-default); | |
| 187 --zenbu-sys-color-focus-outer: var(--zenbu-ref-color-focus); | |
| 188 --zenbu-sys-color-selection-background: var(--zenbu-ref-color-warning-300); | |
| 189 --zenbu-sys-color-selection-foreground: var(--zenbu-sys-color-text-primary); | |
| 190 --zenbu-sys-color-info-background: var(--zenbu-ref-color-brand-100); | |
| 191 --zenbu-sys-color-info-foreground: var(--zenbu-ref-color-brand-700); | |
| 192 --zenbu-sys-color-info-border: var(--zenbu-ref-color-brand-400); | |
| 193 --zenbu-sys-color-success-background: var(--zenbu-ref-color-success-100); | |
| 194 --zenbu-sys-color-success-foreground: var(--zenbu-ref-color-success); | |
| 195 --zenbu-sys-color-success-border: var(--zenbu-ref-color-success-500); | |
| 196 --zenbu-sys-color-warning-background: var(--zenbu-ref-color-warning-100); | |
| 197 --zenbu-sys-color-warning-foreground: var(--zenbu-ref-color-warning); | |
| 198 --zenbu-sys-color-warning-border: var(--zenbu-ref-color-warning-500); | |
| 199 --zenbu-sys-color-danger-background: var(--zenbu-ref-color-danger-100); | |
| 200 --zenbu-sys-color-danger-foreground: var(--zenbu-ref-color-danger); | |
| 201 --zenbu-sys-color-danger-border: var(--zenbu-ref-color-danger-500); | |
| 202 --zenbu-sys-color-code-surface: var(--zenbu-ref-color-neutral-950); | |
| 203 --zenbu-sys-color-code-text: var(--zenbu-ref-color-neutral-50); | |
| 204 --zenbu-sys-color-gridline: var(--zenbu-ref-color-black-alpha-8); | |
| 205 --zenbu-sys-color-data-1: var(--zenbu-ref-color-brand-600); | |
| 206 --zenbu-sys-color-data-2: var(--zenbu-ref-color-warning-500); | |
| 207 --zenbu-sys-color-data-3: var(--zenbu-ref-color-success-600); | |
| 208 --zenbu-sys-color-data-4: var(--zenbu-ref-color-violet-500); | |
| 209 --zenbu-sys-color-data-5: var(--zenbu-ref-color-amber-600); | |
| 210 } | |
| 211 | |
| 212 @media (forced-colors: active) { | |
| 213 :root { | |
| 214 --zenbu-sys-color-surface-page: Canvas; | |
| 215 --zenbu-sys-color-surface-canvas: Canvas; | |
| 216 --zenbu-sys-color-surface-default: Canvas; | |
| 217 --zenbu-sys-color-surface-subtle: Canvas; | |
| 218 --zenbu-sys-color-surface-raised: Canvas; | |
| 219 --zenbu-sys-color-surface-overlay: Canvas; | |
| 220 --zenbu-sys-color-text-primary: CanvasText; | |
| 221 --zenbu-sys-color-text-secondary: CanvasText; | |
| 222 --zenbu-sys-color-text-tertiary: GrayText; | |
| 223 --zenbu-sys-color-text-disabled: GrayText; | |
| 224 --zenbu-sys-color-text-link: LinkText; | |
| 225 --zenbu-sys-color-border-subtle: CanvasText; | |
| 226 --zenbu-sys-color-border-default: CanvasText; | |
| 227 --zenbu-sys-color-border-strong: CanvasText; | |
| 228 --zenbu-sys-color-focus-inner: Canvas; | |
| 229 --zenbu-sys-color-focus-outer: CanvasText; | |
| 230 --zenbu-sys-shadow-subtle: none; | |
| 231 --zenbu-sys-shadow-raised: none; | |
| 232 --zenbu-sys-shadow-overlay: none; | |
| 233 --zenbu-sys-shadow-dialog: none; | |
| 234 } | |
| 235 } | |
| 236 | |
| 237 @media (prefers-reduced-motion: reduce) { | |
| 238 :root { | |
| 239 --zenbu-sys-motion-duration-feedback: 1ms; | |
| 240 --zenbu-sys-motion-duration-state: 1ms; | |
| 241 --zenbu-sys-motion-duration-enter: 1ms; | |
| 242 --zenbu-sys-motion-duration-exit: 1ms; | |
| 243 --zenbu-sys-motion-duration-layout: 1ms; | |
| 244 } | |
| 245 } |