@kubex/zinc 1.1.185 → 2.0.0

package/scss/themes/_light.scss

@@ -106,6 +106,34 @@
   --zn-color-neutral-800: var(--zn-color-gray-800); // used: src/components/checkbox/checkbox.scss:332 (+7 more)
   --zn-color-neutral-900: var(--zn-color-gray-900); // used: docs/assets/scripts/code-previews.js:215 (+33 more)
 
+  /* Status roles: fg = text/icon on a tint, bg = tint, line = border, solid = fill.
+     Derived from the RGB triplets so every mode and theme follows; a theme may pin
+     exact values instead. */
+  --zn-color-success-fg: rgb(var(--zn-color-success));
+  --zn-color-success-bg: rgba(var(--zn-color-success), 0.1);
+  --zn-color-success-line: rgba(var(--zn-color-success), 0.3);
+  --zn-color-success-solid: rgb(var(--zn-color-success));
+  --zn-color-warning-fg: rgb(var(--zn-color-warning));
+  --zn-color-warning-bg: rgba(var(--zn-color-warning), 0.1);
+  --zn-color-warning-line: rgba(var(--zn-color-warning), 0.3);
+  --zn-color-warning-solid: rgb(var(--zn-color-warning));
+  --zn-color-danger-fg: rgb(var(--zn-color-error));
+  --zn-color-danger-bg: rgba(var(--zn-color-error), 0.1);
+  --zn-color-danger-line: rgba(var(--zn-color-error), 0.3);
+  --zn-color-danger-solid: rgb(var(--zn-color-error));
+  --zn-color-info-fg: rgb(var(--zn-color-info));
+  --zn-color-info-bg: rgba(var(--zn-color-info), 0.1);
+  --zn-color-info-line: rgba(var(--zn-color-info), 0.3);
+  --zn-color-info-solid: rgb(var(--zn-color-info));
+  --zn-color-ai-fg: rgb(var(--zn-color-ai));
+  --zn-color-ai-bg: rgba(var(--zn-color-ai), 0.1);
+  --zn-color-ai-line: rgba(var(--zn-color-ai), 0.3);
+  --zn-color-ai-solid: rgb(var(--zn-color-ai));
+  --zn-color-neutral-fg: var(--zn-color-neutral-700);
+  --zn-color-neutral-bg: var(--zn-color-neutral-100);
+  --zn-color-neutral-line: var(--zn-color-neutral-200);
+  --zn-color-neutral-solid: var(--zn-color-neutral-500);
+
   /* Neutral one-offs */
   --zn-color-neutral-0: hsl(0, 0%, 100%); // used: src/components/checkbox/checkbox.scss:31 (+15 more)
   --zn-color-neutral-1000: hsl(0, 0%, 0%); // used: docs/assets/styles/docs.css:502 (+2 more)
@@ -116,6 +144,11 @@
   --zn-border-radius-x-large: var(--zn-border-radius); // For backwards compat modal border radius
   --zn-border-radius-circle: 50%;
   --zn-border-radius-pill: 9999px;
+  --zn-border-radius-medium: var(--zn-border-radius);
+  --zn-border-radius-large: var(--zn-border-radius);
+  --zn-panel-border-radius: var(--zn-border-radius);
+  --zn-dialog-border-radius: var(--zn-border-radius);
+  --zn-chip-border-radius: var(--zn-border-radius-x-large);
 
   --zn-shadow-x-small: 0 1px 4px rgba(0, 0, 0, 0.10);
   --zn-shadow-small: 0 3px 9px rgba(0, 0, 0, 0.15);
@@ -131,7 +164,7 @@
   --zn-container-ph: 600px;
   --zn-container-md: 768px;
   --zn-container-lg: 1100px;
-  --zn-container-hd: 1400px;
+  --zn-container-hd: 1745px;
   --zn-container-3k: 1960px;
   --zn-container-4k: 2560px;
 
@@ -142,6 +175,10 @@
   --zn-transition-fast: 150ms;
   --zn-transition-x-fast: 50ms;
 
+  --zn-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+  --zn-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
+  --zn-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
+
   /** Gap */
   --zn-gap: var(--zn-base-gap, var(--zn-spacing-medium, 4px));
 
@@ -259,6 +296,8 @@
 
   /* Focus rings */
   --zn-input-focus-ring-color: hsl(256 91% 59%/ 40%);
+  --zn-input-focus-ring-color-invalid: rgba(var(--zn-color-error), 0.25);
+  --zn-input-border-color-invalid: rgb(var(--zn-color-error));
   --zn-input-focus-ring-offset: 0;
 
   --zn-input-label-font-size-small: var(--zn-font-size-small);
@@ -287,12 +326,13 @@
   --zn-panel-border-width: 1px;
 
   --zn-tooltip-border-radius: var(--zn-border-radius);
-  --zn-tooltip-background-color: var(--zn-color-neutral-900);
-  --zn-tooltip-color: var(--zn-color-neutral-0);
+  // An inverted bubble: text colour as the surface, base colour as the ink.
+  --zn-tooltip-background-color: rgb(var(--zn-color-text));
+  --zn-tooltip-color: rgb(var(--zn-color-base));
   --zn-tooltip-font-family: var(--zn-font-sans);
-  --zn-tooltip-font-weight: var(--zn-font-weight-normal);
-  --zn-tooltip-font-size: var(--zn-font-size-small);
-  --zn-tooltip-line-height: var(--zn-line-height-dense);
+  --zn-tooltip-font-weight: var(--zn-text-paragraph-font-weight);
+  --zn-tooltip-font-size: var(--zn-text-paragraph-font-size);
+  --zn-tooltip-line-height: var(--zn-text-paragraph-line-height);
   --zn-tooltip-padding: var(--zn-spacing-x-small) var(--zn-spacing-small);
   --zn-tooltip-arrow-size: 6px;
 

package/scss/themes/_modes.scss

@@ -1,7 +1,7 @@
 // Light / dark mode selectors.
 //
 // Theming has two independent dimensions on the root element:
-//   `t` — the theme (base, aura, ...), carrying the identity and palette.
+//   `t` — a legacy theme name. OpenByte is the only theme and applies without it.
 //   `m` — the mode ('light' | 'dark') that theme is currently drawn in.
 //
 // **The `m` hooks are deliberately scoped with `:root`.** ZincElement reflects
@@ -13,20 +13,20 @@
 // would reset `--zn-text` back to the theme default and render dark-on-dark.
 // Never write a bare `[m="..."]` (or `[t="..."]`) rule that sets a token.
 //
-// `[t="light"]` / `[t="dark"]` / `.theme-light` / `.theme-dark` are kept as
-// legacy aliases, so a standalone consumer that sets only `t` still resolves to a
-// full palette. They carry the same hazard, which is why light mode is expressed
-// as plain `:root` — light is the default palette, so it needs no `m` hook.
+// `data-density` is safe as a descendant selector only because ZincElement does
+// not reflect it; reflecting it would bring the same hazard.
+//
+// `t="light"` / `t="dark"` / `.theme-light` / `.theme-dark` are legacy aliases on the root, so a consumer that sets
+// only `t` still resolves to a full palette. They are root-qualified like everything else: ZincElement reflects
+// the root's `t` onto every component, and a bare `[t="dark"]` would re-declare the base dark tokens on each one,
+// over the OpenByte tokens they inherit.
 //
 // A theme that ships a light palette *only* must be excluded from $dark, or
-// `t="<theme>" m="dark"` layers its tokens over the dark primitives and renders
-// a hybrid. Themes are dark-capable by default; add an exclusion here only while
-// a theme has no dark palette, and drop it when it gains one. Every theme
-// currently ships both palettes, so the list is empty:
+// `m="dark"` layers its tokens over the dark primitives and renders a hybrid:
 //
 //   $light-only: '[t="newtheme"]';
 //   $dark: ':root[m="dark"]:not(#{$light-only}), ...';
 $light-only: null;
 
-$light: ':root, [t="light"], .theme-light';
-$dark: ':root[m="dark"], [t="dark"], .theme-dark';
+$light: ':root';
+$dark: ':root[m="dark"], :root[t="dark"], :root.theme-dark';