@cyberskill/design 2.8.0 → 2.9.0

package/base/forms.css

@@ -4,10 +4,13 @@
 /* Select — reuses .cs-field label/description/error */
 .cs-select { position: relative; display: block; }
 .cs-select select.cs-field__control { appearance: none; -webkit-appearance: none; width: 100%; padding-inline-end: 38px; cursor: pointer; background: var(--cs-color-surface-panel); }
+.cs-select__trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; inline-size: 100%; min-block-size: 44px; font: 500 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-component-textfield-border-default, var(--cs-color-border-default)); border-radius: var(--cs-radius-md); padding: 8px 12px; cursor: pointer; box-sizing: border-box; }
 .cs-select__chevron { position: absolute; inset-inline-end: 12px; inset-block-start: 50%; transform: translateY(-50%); pointer-events: none; color: var(--cs-color-text-muted); display: grid; place-items: center; }
-.cs-select select.cs-field__control:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; border-color: var(--cs-color-brand-ochre); box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
+.cs-select select.cs-field__control:focus-visible, .cs-select__trigger:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; border-color: var(--cs-color-brand-ochre); box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
+.cs-select.is-invalid .cs-select__trigger, .is-invalid .cs-select__trigger, .cs-select__trigger.is-invalid, .cs-select__trigger[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
 
 /* NativeSelect — lean progressive-enhancement companion beside Select */
+.cs-native-select-field { display: grid; }
 .cs-native-select { position: relative; display: block; }
 .cs-native-select select.cs-field__control { appearance: none; -webkit-appearance: none; width: 100%; padding-inline-end: 38px; cursor: pointer; background: var(--cs-color-surface-panel); }
 .cs-native-select__chevron { position: absolute; inset-inline-end: 12px; inset-block-start: 50%; transform: translateY(-50%); pointer-events: none; color: var(--cs-color-text-muted); display: grid; place-items: center; }
@@ -26,13 +29,13 @@
 
 /* Switch — custom track/knob */
 .cs-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-family: var(--cs-font-family-ui); color: var(--cs-color-text-primary); }
+.cs-switch__label { font: inherit; color: inherit; }
 .cs-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
-.cs-switch__track { inline-size: 44px; block-size: 26px; border-radius: 999px; background: var(--cs-color-border-default); position: relative; transition: background var(--cs-duration-fast) var(--cs-ease-standard); flex: none; }
+.cs-switch__track { inline-size: 44px; block-size: 26px; border-radius: 999px; background: var(--cs-color-border-default); box-shadow: inset 0 0 0 1px var(--cs-component-textfield-border-default, var(--cs-color-border-default)); position: relative; transition: background var(--cs-duration-fast) var(--cs-ease-standard), box-shadow var(--cs-duration-fast) var(--cs-ease-standard); flex: none; }
 .cs-switch__track::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 20px; block-size: 20px; border-radius: 50%; background: var(--cs-color-surface-panel, #fff); box-shadow: var(--cs-shadow-xs); transition: transform var(--cs-duration-fast) var(--cs-ease-standard); }
-.cs-switch input:checked + .cs-switch__track { background: var(--_cs-light, var(--cs-accent-strong))var(--_cs-dark, var(--cs-accent)); }
+.cs-switch input:checked + .cs-switch__track { background: var(--_cs-light, var(--cs-accent-strong))var(--_cs-dark, var(--cs-accent)); box-shadow: none; }
 .cs-switch input:checked + .cs-switch__track::after { transform: translateX(18px); }
 .cs-switch input:focus-visible + .cs-switch__track { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
-.cs-switch:focus-within { outline-style: solid; outline-width: 2px; outline-color: var(--cs-color-text-primary); outline-offset: 4px; border-radius: 6px; }
 .cs-switch.is-disabled { opacity: 0.55; cursor: not-allowed; }
 
 /* Textarea reuses .cs-field; give it sane sizing */

package/base/glass.css

@@ -130,3 +130,98 @@
   pointer-events: none; border: 0; box-shadow: none; background: transparent;
 }
 .cs-overlay-surface::before { display: none; }
+
+/* ---- 7. Perceptual-chroma semantic variant aliases (gold, champagne, silver, jade, leaf, ember, river, studio, ochre) ----
+ * Canonical [data-cs-element] rules in tokens/elements.css provide the base elemental tokens;
+ * these variant selectors boost primary CTA, active segment, selected row and badge vibrancy. */
+:is([data-cs-element="kim"][data-cs-variant="gold"], [data-cs-element="kim"][data-cs-variant="champagne"]) :is(.cs-button:not(.cs-button--secondary):not(.cs-button--tertiary):not(.cs-button--ghost):not(.cs-button--danger):not(.cs-button--danger-ghost), .cs-segmented button[aria-selected="true"], .cs-segmented button[aria-pressed="true"], .cs-segmented button[aria-checked="true"]) {
+  background: color-mix(in oklab, var(--cs-color-brand-ochre, #f4ba17) 64%, var(--cs-component-button-primary-bg, #374151));
+  border-color: color-mix(in oklab, var(--cs-color-brand-ochre, #f4ba17) 75%, var(--cs-color-border-default));
+}
+:is([data-cs-element="kim"][data-cs-variant="gold"], [data-cs-element="kim"][data-cs-variant="champagne"]) :is(.cs-item.is-selected, .cs-datagrid tr.is-selected td, .cs-table tr.is-selected td, tr.cs-item.is-selected > td) {
+  background: color-mix(in oklab, var(--cs-color-brand-ochre, #f4ba17) 20%, var(--cs-color-surface-panel));
+  border-color: color-mix(in oklab, var(--cs-color-brand-ochre, #f4ba17) 72%, var(--cs-color-border-default));
+}
+:is([data-cs-element="moc"][data-cs-variant="jade"], [data-cs-element="moc"][data-cs-variant="leaf"]) :is(.cs-button:not(.cs-button--secondary):not(.cs-button--tertiary):not(.cs-button--ghost):not(.cs-button--danger):not(.cs-button--danger-ghost), .cs-segmented button[aria-selected="true"], .cs-segmented button[aria-pressed="true"], .cs-segmented button[aria-checked="true"]) {
+  background: color-mix(in oklab, #109464 58%, var(--cs-component-button-primary-bg, #1f5c3a));
+}
+:is([data-cs-element="moc"][data-cs-variant="jade"], [data-cs-element="moc"][data-cs-variant="leaf"]) :is(.cs-item.is-selected, .cs-datagrid tr.is-selected td, .cs-table tr.is-selected td, tr.cs-item.is-selected > td) {
+  background: color-mix(in oklab, #109464 20%, var(--cs-color-surface-panel));
+  border-color: color-mix(in oklab, #109464 72%, var(--cs-color-border-default));
+}
+[data-cs-element="hoa"][data-cs-variant="ember"] :is(.cs-button:not(.cs-button--secondary):not(.cs-button--tertiary):not(.cs-button--ghost):not(.cs-button--danger):not(.cs-button--danger-ghost), .cs-segmented button[aria-selected="true"], .cs-segmented button[aria-pressed="true"], .cs-segmented button[aria-checked="true"]) {
+  background: color-mix(in oklab, #e04819 55%, var(--cs-component-button-primary-bg, #992515));
+}
+[data-cs-element="thuy"][data-cs-variant="river"] :is(.cs-button:not(.cs-button--secondary):not(.cs-button--tertiary):not(.cs-button--ghost):not(.cs-button--danger):not(.cs-button--danger-ghost), .cs-segmented button[aria-selected="true"], .cs-segmented button[aria-pressed="true"], .cs-segmented button[aria-checked="true"]) {
+  background: color-mix(in oklab, #0284c7 55%, var(--cs-component-button-primary-bg, #0d5a8a));
+}
+
+/* ---- 8. Style pack: matte-paper (opaque crisp paper/ledger surfaces, zero backdrop blur) ----
+ * Consumes the exact 10 --cs-accent-* roles and nested theme tokens; nested [data-cs-style="liquid-glass"]
+ * cleanly restores frosted glass composition. */
+[data-cs-style="matte-paper"] :is(.cs-surface-whisper, .cs-surface-light, .cs-surface-standard, .cs-glass-card, .cs-surface-heavy, .cs-overlay-surface) {
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+}
+[data-cs-style="matte-paper"] .cs-surface-whisper {
+  background: var(--cs-color-surface-page, #fffdf8);
+  border: 1px solid var(--cs-color-border-default, #e7d9c6);
+}
+[data-cs-style="matte-paper"] :is(.cs-surface-light, .cs-surface-standard, .cs-glass-card) {
+  background: var(--cs-color-surface-panel, #ffffff);
+  border: 1px solid var(--cs-color-border-default, #e7d9c6);
+  box-shadow: var(--cs-shadow-xs);
+}
+[data-cs-style="matte-paper"] .cs-surface-heavy {
+  background: var(--cs-color-surface-raised, #fbf4e9);
+  border: 1px solid var(--cs-color-border-default, #e7d9c6);
+  box-shadow: var(--cs-shadow-sm);
+}
+[data-cs-style="matte-paper"] :is(.cs-surface-standard, .cs-surface-heavy, .cs-glass-card)::before {
+  display: none;
+}
+[data-cs-style="matte-paper"] .cs-card:not(.cs-card--flat) {
+  box-shadow: var(--cs-shadow-xs);
+}
+[data-cs-style="matte-paper"] .cs-aurora {
+  background-image: linear-gradient(180deg, color-mix(in oklab, var(--cs-accent, var(--cs-color-brand-ochre)) 18%, var(--cs-color-brand-umber)), var(--cs-color-brand-umber));
+}
+[data-cs-style="matte-paper"] [data-cs-style="liquid-glass"] .cs-surface-whisper {
+  background: var(--cs-glass-whisper-bg);
+  border: 0;
+  -webkit-backdrop-filter: blur(var(--cs-glass-whisper-blur, 8px)) saturate(var(--cs-glass-whisper-saturate, 110%));
+  backdrop-filter: blur(var(--cs-glass-whisper-blur, 8px)) saturate(var(--cs-glass-whisper-saturate, 110%));
+}
+[data-cs-style="matte-paper"] [data-cs-style="liquid-glass"] .cs-surface-light {
+  background: var(--cs-glass-light-bg);
+  border-color: var(--cs-glass-light-border);
+  box-shadow: none;
+  -webkit-backdrop-filter: blur(var(--cs-glass-light-blur, 12px)) saturate(var(--cs-glass-light-saturate, 130%));
+  backdrop-filter: blur(var(--cs-glass-light-blur, 12px)) saturate(var(--cs-glass-light-saturate, 130%));
+}
+[data-cs-style="matte-paper"] [data-cs-style="liquid-glass"] :is(.cs-surface-standard, .cs-glass-card) {
+  background: var(--cs-glass-standard-bg);
+  border-color: var(--cs-glass-standard-border);
+  box-shadow: var(--cs-shadow-sm);
+  -webkit-backdrop-filter: blur(var(--cs-glass-standard-blur, 16px)) saturate(var(--cs-glass-standard-saturate, 150%));
+  backdrop-filter: blur(var(--cs-glass-standard-blur, 16px)) saturate(var(--cs-glass-standard-saturate, 150%));
+}
+[data-cs-style="matte-paper"] [data-cs-style="liquid-glass"] .cs-surface-heavy {
+  background: var(--cs-glass-heavy-bg);
+  border-color: var(--cs-glass-heavy-border);
+  box-shadow: var(--cs-shadow-lg);
+  -webkit-backdrop-filter: blur(var(--cs-glass-heavy-blur, 24px)) saturate(var(--cs-glass-heavy-saturate, 180%));
+  backdrop-filter: blur(var(--cs-glass-heavy-blur, 24px)) saturate(var(--cs-glass-heavy-saturate, 180%));
+}
+[data-cs-style="matte-paper"] [data-cs-style="liquid-glass"] :is(.cs-surface-standard, .cs-surface-heavy, .cs-glass-card)::before {
+  display: block;
+}
+[data-cs-style="matte-paper"] [data-cs-style="liquid-glass"] .cs-card:not(.cs-card--flat) {
+  box-shadow: var(--cs-shadow-sm);
+}
+[data-cs-style="matte-paper"] [data-cs-style="liquid-glass"] .cs-aurora {
+  background-image:
+    radial-gradient(90% 120% at 12% -10%, color-mix(in oklab, var(--cs-accent, var(--cs-color-brand-ochre)) 46%, transparent), transparent 55%),
+    radial-gradient(70% 90% at 88% 8%, color-mix(in oklab, var(--cs-accent-grad-b, #ffcf5c) 32%, transparent), transparent 60%),
+    radial-gradient(120% 120% at 50% 120%, color-mix(in oklab, #1a1108 60%, transparent), transparent 60%);
+}

package/base/navigation.css

@@ -13,7 +13,7 @@
 .cs-breadcrumb li { display: inline-flex; align-items: center; gap: 8px; }
 .cs-breadcrumb a { color: var(--cs-color-text-muted); text-decoration: none; }
 .cs-breadcrumb a:hover { color: var(--cs-color-text-accent); }
-.cs-breadcrumb__sep { color: var(--cs-color-border-default); }
+.cs-breadcrumb__sep { color: var(--cs-color-text-muted); }
 .cs-breadcrumb__current { color: var(--cs-color-text-primary); font-weight: 600; }
 
 /* Pagination */
@@ -35,3 +35,11 @@
 .cs-menu__item--danger:hover { background: color-mix(in oklab, var(--cs-color-semantic-danger) 10%, transparent); }
 .cs-menu__sep { block-size: 1px; background: var(--cs-color-border-default); margin: 4px 2px; }
 .cs-menu__label { font-size: var(--cs-font-size-xs); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-muted); padding: 6px 10px 2px; }
+
+/* Compact density scope (coarse-pointer 44px hit floors in base/a11y.css still apply) */
+[data-cs-density="compact"] .cs-tab { padding: 7px 10px; gap: 5px; }
+[data-cs-density="compact"] .cs-menu__list { padding: 4px; }
+[data-cs-density="compact"] .cs-menu__item { padding: 6px 8px; gap: 8px; }
+[data-cs-density="compact"] [data-cs-density="comfortable"] .cs-tab { padding: 10px 14px; gap: 7px; }
+[data-cs-density="compact"] [data-cs-density="comfortable"] .cs-menu__list { padding: 6px; }
+[data-cs-density="compact"] [data-cs-density="comfortable"] .cs-menu__item { padding: 8px 10px; gap: 10px; }

package/base/responsive.css

@@ -154,7 +154,7 @@ img, svg, video, canvas { max-width: 100%; height: auto; }
  * ordinary prose is untouched. Scoped to the print-doc wrapper; the print @page is
  * wide, so this screen breakpoint never fires during export. */
 @media screen and (max-width: 768px) {
-  .cs-desk, .cs-sheet { overflow-wrap: anywhere; }
+  .cs-desk, .cs-sheet, .cs-avoid { overflow-wrap: anywhere; }
 }
 
 /* 10 — App-shell layout: sidebar + main is a fixed two-column INLINE grid
@@ -170,7 +170,12 @@ img, svg, video, canvas { max-width: 100%; height: auto; }
   [style*="grid-template-columns:248px 1fr"] { grid-template-columns: 1fr !important; }
   main { min-width: 0; }
   main > * { min-width: 0; }
-  .cs-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+  .cs-table-wrap, main .cs-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
+  .cs-steps { flex-wrap: wrap; }
+}
+
+@media (max-width: 640px) {
+  .cs-otp, .cs-input-otp { display: flex; inline-size: 100%; justify-content: space-between; }
 }
 
 /* ---- 320 reflow (UX-003 / WCAG 1.4.10) ---- */
@@ -178,7 +183,7 @@ img, svg, video, canvas { max-width: 100%; height: auto; }
   .cs-tabs { overflow-x: auto; overscroll-behavior-x: contain; }
   .cs-pagination { flex-wrap: wrap; max-inline-size: 100%; }
   /* Keep the inherited 44px coarse-pointer floor; wrap controls instead of shrinking targets. */
-  .cs-otp { flex-wrap: wrap; gap: 4px; }
+  .cs-otp, .cs-input-otp { flex-wrap: wrap; gap: 4px; }
   .cs-dl { grid-template-columns: 1fr; }
   .cs-field { min-inline-size: 0; }
   .cs-field__control { min-inline-size: 0; }
@@ -188,5 +193,5 @@ img, svg, video, canvas { max-width: 100%; height: auto; }
 /* Preserve the narrow fine-pointer scrollbar without overriding coarse hit regions. */
 @media (max-width: 360px) and (pointer: fine) {
   .cs-tabs { scrollbar-width: thin; }
-  .cs-otp input { inline-size: 36px; block-size: 40px; font-size: var(--cs-font-size-base); }
+  .cs-otp input, .cs-input-otp input { inline-size: 44px; block-size: 44px; font-size: var(--cs-font-size-base); }
 }