@omni-design/components 0.7.0

package/public/styles/README.md

@@ -0,0 +1,93 @@
+# `@omni-design/components` CSS files
+
+This folder ships as `@omni-design/components/public/styles/` in the published npm package.
+The files split into two categories — STATIC and DYNAMIC — and they should be treated very differently.
+
+## DYNAMIC — regenerated per design system
+
+These files contain values specific to one design system (brand colors, fonts, etc.).
+They are produced by the **studio's** `exportToCSS.ts` and replaced wholesale on every export.
+
+| File | What's in it |
+|---|---|
+| `base.css` | Brand-specific font families, button defaults, primary-background mappings |
+| `Light-Mode.css` | Full per-brand color palette + per-surface hover/active (light mode) |
+| `Dark-Mode.css` | Same as Light-Mode for dark |
+| `core.css` | Platform font overrides **and the chosen faces** (`--Set-Font-Family-*`) |
+| `typography-tokens.css` | The per-style ramp, sizes, weights and variable-font axes |
+
+**If you copy a fresh studio export into this folder, overwrite these five files.**
+
+## STATIC — lib-owned, do not regenerate
+
+These files have no brand-specific values. They're the same for every consumer of the lib.
+**Never overwrite them from a studio export.** They are hand-edited (or generated upstream from a template), checked into the lib repo, and shipped as-is.
+
+| File | What's in it |
+|---|---|
+| `foundation.css` | Primitive sizing tokens (button/card radius defaults) |
+| `styles.css` | Final overrides slot (loads last). Add hand-edited overrides here. |
+
+### `foundations.css` was removed — use `foundation.css`
+
+Two files one character apart, both shipped. `foundations.css` held a strict
+SUBSET of `foundation.css` — 44 of its 47 variables, nothing unique — but six
+shared names carried DIFFERENT values:
+
+| | foundation.css | foundations.css |
+|---|---|---|
+| `--Button-Radius` | `4px` | `34px` |
+| `--Button-Icon-Radius` | `4px` | `61px` |
+| `--Button-Bevel-Px` | `0px` | `4px` |
+| `--Button-Bevel-Shadow` | `none` | full inset bevel |
+
+So the two files disagreed about whether a button is a flat square or a bevelled
+pill, and which one you got depended on how you imported. Worse, every reference
+in the codebase named `foundation.css` while the package `exports` map only
+permitted `foundations.css` — so the one file a consumer could import by name
+was the one nothing else used.
+
+The three variables missing from the plural version were `--Input-Radius`,
+`--Input-Inner-Focus-Visible` and `--Sizing-Negative-2`. `--Input-Radius` is the
+base of the `Dropdown-Frame-Radius` chain, so consumers on the plural file had
+no input radius at all.
+
+**If you are updating from a version that loaded `foundations.css`, buttons will
+change from a 34px bevelled pill to a 4px flat square.** That is the correct
+default — it is what every other reference in the lib and every studio export
+already assumed — but it is a visible change, not a silent cleanup.
+
+### Why `core.css` and `typography-tokens.css` moved to DYNAMIC
+
+They used to be listed as static, on the grounds that they held no brand
+values. That stopped being true: studio exports write the chosen faces
+(`--Set-Font-Family-Display` / `-Eyebrow` / `-Header`), the header face's
+variable-font axes (`--Font-Slant-Header`, `--Font-Roundness-Header`, …) and
+the full per-style ramp into both.
+
+The old wording — overwrite only base/Light/Dark — therefore gave a consumer
+the brand's colours but not its fonts or axes, silently. A design system with a
+header weight of 857 rendered at 600 because the lib's bundled copy won.
+
+**The checked-in copies here are SEEDS, not the authority.** They define the
+same token names with neutral values: faces fall back to what the design system
+rendered before faces existed, and `--Font-Variation-Header` is `normal`, so
+nothing is applied until a real design system supplies values. That makes them
+a safe default for local development and for the showcase — nothing more.
+
+At runtime the authority is the design system's own export. `theme.json` now
+carries a `typography` slot alongside `foundation` / `core` / `lightMode` /
+`darkMode` / `base` / `styles`, so the Provider fetches the brand's ramp
+directly and the bundled copy is never consulted.
+
+## How files are referenced
+
+Consumers of `@omni-design/components` import these files directly, e.g.:
+
+```js
+import '@omni-design/components/public/styles/Light-Mode.css';
+import '@omni-design/components/public/styles/core.css';
+// etc.
+```
+
+The list of importable paths is whitelisted by the lib's `package.json` `exports` field.

package/public/styles/base.css

@@ -0,0 +1,261 @@
+@import url('https://fonts.googleapis.com/css2?family=Prata&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');
+
+/* ========================================
+ * Base CSS Variables
+ * Generated from DynoDesign JSON
+ * Auto-generated - do not edit manually
+ * ======================================== */
+
+/* ========================================
+ * Root Button Colors
+ * Global button color variables
+ * ======================================== */
+
+:root {
+  --Surface: var(--Primary-Background-11-Surface);
+  --Surface-Dim: var(--Primary-Background-11-Surface-Dim);
+  --Surface-Bright: var(--Primary-Background-11-Surface-Bright);
+  --Container: var(--Primary-Background-11-Container);
+  --Container-Lowest: var(--Primary-Background-11-Container-Lowest);
+  --Container-Low: var(--Primary-Background-11-Container-Low);
+  --Container-High: var(--Primary-Background-11-Container-High);
+  --Container-Highest: var(--Primary-Background-11-Container-Highest);
+  /* Default Theme */
+  --Background: var(--Primary-Background-11-Surface);
+  --Surface-Dim: var(--Primary-Background-11-Surface-Dim);
+  --Surface-Bright: var(--Primary-Background-11-Surface-Bright);
+  --Header: var(--Header-Surfaces-Primary-Color-11);
+  --Text: var(--Text-Surfaces-Primary-Color-11);
+  --Quiet: var(--Quiet-Surfaces-Primary-Color-11);
+  --Border: var(--Border-Surfaces-Primary-Color-11);
+  --Border-Variant: var(--Border-Variant-Surfaces-Primary-Color-11);
+  --Hotlink: var(--Text-Surfaces-Info-Color-11);
+  --Hotlink-Visited: var(--Text-Surfaces-Hotlink-Visited-Color-11);
+  --Hover: var(--Hover-Primary-Color-11);
+  --Active: var(--Active-Primary-Color-11);
+  --Focus-Visible: var(--Focus-Visible-Surfaces-Color-11);
+  --Buttons-Primary-Hover: #fbfdf9;
+  --Buttons-Primary-Active: #fbfdf9;
+  --Buttons-Primary-Light-Button: var(--Primary-Color-12);
+  --Buttons-Primary-Light-Text: var(--Text-Surfaces-Primary-Color-12);
+  --Buttons-Primary-Light-Border: var(--Border-Surfaces-Primary-Color-12);
+  --Buttons-Primary-Light-Hover: #FFFFFF;
+  --Buttons-Primary-Light-Active: #FFFFFF;
+  --Buttons-Secondary-Button: var(--Secondary-Color-9);
+  --Buttons-Secondary-Text: var(--Text-Surfaces-Secondary-Color-9);
+  --Buttons-Secondary-Border: var(--Border-Surfaces-Secondary-Color-11);
+  --Buttons-Secondary-Hover: #fceded;
+  --Buttons-Secondary-Active: #fceded;
+  --Buttons-Secondary-Light-Button: var(--Secondary-Color-12);
+  --Buttons-Secondary-Light-Text: var(--Text-Surfaces-Secondary-Color-12);
+  --Buttons-Secondary-Light-Border: var(--Border-Surfaces-Secondary-Color-11);
+  --Buttons-Secondary-Light-Hover: #FFFFFF;
+  --Buttons-Secondary-Light-Active: #FFFFFF;
+  --Buttons-Tertiary-Button: var(--Tertiary-Color-9);
+  --Buttons-Tertiary-Text: var(--Text-Surfaces-Tertiary-Color-9);
+  --Buttons-Tertiary-Border: var(--Border-Surfaces-Tertiary-Color-11);
+  --Buttons-Tertiary-Hover: #f7efe9;
+  --Buttons-Tertiary-Active: #f7efe9;
+  --Buttons-Tertiary-Light-Button: var(--Tertiary-Color-12);
+  --Buttons-Tertiary-Light-Text: var(--Text-Surfaces-Tertiary-Color-12);
+  --Buttons-Tertiary-Light-Border: var(--Border-Surfaces-Tertiary-Color-11);
+  --Buttons-Tertiary-Light-Hover: #FFFFFF;
+  --Buttons-Tertiary-Light-Active: #FFFFFF;
+  --Buttons-Primary-Button: var(--Primary-Button-Containers-Background-11-Button);
+  --Buttons-Primary-Text: var(--Primary-Button-Containers-Background-11-Text);
+  --Buttons-Primary-Border: var(--Border-Containers-Primary-Color-11);
+  --Buttons-Primary-Hover: #fbfdf9;
+  --Buttons-Primary-Active: #fbfdf9;
+  --Buttons-Primary-Light-Border: var(--Border-Containers-Primary-Color-12);
+  --Buttons-Secondary-Border: var(--Border-Containers-Secondary-Color-11);
+  --Buttons-Secondary-Light-Border: var(--Border-Containers-Secondary-Color-11);
+  --Buttons-Tertiary-Border: var(--Border-Containers-Tertiary-Color-11);
+  --Buttons-Tertiary-Light-Border: var(--Border-Containers-Tertiary-Color-11);
+  --Buttons-Neutral-Button: var(--Neutral-Color-9);
+  --Buttons-Neutral-Text: var(--Text-Surfaces-Neutral-Color-9);
+  --Buttons-Neutral-Border: var(--Border-Containers-Neutral-Color-11);
+  --Buttons-Neutral-Hover: #f1f1f1;
+  --Buttons-Neutral-Active: #f1f1f1;
+  --Buttons-Neutral-Light-Button: var(--Neutral-Color-12);
+  --Buttons-Neutral-Light-Text: var(--Text-Surfaces-Neutral-Color-12);
+  --Buttons-Neutral-Light-Border: var(--Border-Containers-Neutral-Color-11);
+  --Buttons-Neutral-Light-Hover: #FFFFFF;
+  --Buttons-Neutral-Light-Active: #FFFFFF;
+  --Buttons-Info-Button: var(--Info-Color-9);
+  --Buttons-Info-Text: var(--Text-Surfaces-Info-Color-9);
+  --Buttons-Info-Border: var(--Border-Containers-Info-Color-11);
+  --Buttons-Info-Hover: #eeefff;
+  --Buttons-Info-Active: #eeefff;
+  --Buttons-Info-Light-Button: var(--Info-Color-12);
+  --Buttons-Info-Light-Text: var(--Text-Surfaces-Info-Color-12);
+  --Buttons-Info-Light-Border: var(--Border-Containers-Info-Color-11);
+  --Buttons-Info-Light-Hover: #FFFFFF;
+  --Buttons-Info-Light-Active: #FFFFFF;
+  --Buttons-Success-Button: var(--Success-Color-9);
+  --Buttons-Success-Text: var(--Text-Surfaces-Success-Color-9);
+  --Buttons-Success-Border: var(--Border-Containers-Success-Color-11);
+  --Buttons-Success-Hover: #dff7e4;
+  --Buttons-Success-Active: #dff7e4;
+  --Buttons-Success-Light-Button: var(--Success-Color-12);
+  --Buttons-Success-Light-Text: var(--Text-Surfaces-Success-Color-12);
+  --Buttons-Success-Light-Border: var(--Border-Containers-Success-Color-11);
+  --Buttons-Success-Light-Hover: #FFFFFF;
+  --Buttons-Success-Light-Active: #FFFFFF;
+  --Buttons-Warning-Button: var(--Warning-Color-9);
+  --Buttons-Warning-Text: var(--Text-Surfaces-Warning-Color-9);
+  --Buttons-Warning-Border: var(--Border-Containers-Warning-Color-11);
+  --Buttons-Warning-Hover: #ffedd3;
+  --Buttons-Warning-Active: #ffedd3;
+  --Buttons-Warning-Light-Button: var(--Warning-Color-12);
+  --Buttons-Warning-Light-Text: var(--Text-Surfaces-Warning-Color-12);
+  --Buttons-Warning-Light-Border: var(--Border-Containers-Warning-Color-11);
+  --Buttons-Warning-Light-Hover: #FFFFFF;
+  --Buttons-Warning-Light-Active: #FFFFFF;
+  --Buttons-Error-Button: var(--Error-Color-9);
+  --Buttons-Error-Text: var(--Text-Surfaces-Error-Color-9);
+  --Buttons-Error-Border: var(--Border-Containers-Error-Color-11);
+  --Buttons-Error-Hover: #ffe8e3;
+  --Buttons-Error-Active: #ffe8e3;
+  --Buttons-Error-Light-Button: var(--Error-Color-12);
+  --Buttons-Error-Light-Text: var(--Text-Surfaces-Error-Color-12);
+  --Buttons-Error-Light-Border: var(--Border-Containers-Error-Color-11);
+  --Buttons-Error-Light-Hover: #FFFFFF;
+  --Buttons-Error-Light-Active: #FFFFFF;
+  --Buttons-BlackWhite-Light-Button: var(--White);
+  --Buttons-BlackWhite-Light-Text: var(--Text-Surfaces-BW-Button-Color-1);
+  --Buttons-BlackWhite-Light-Hover: #FFFFFF;
+  --Buttons-BlackWhite-Light-Active: #FFFFFF;
+  --Buttons-BlackWhite-Medium-Button: var(--Neutral-Color-1);
+  --Buttons-BlackWhite-Medium-Text: var(--Text-Surfaces-BW-Button-Color-12);
+  --Buttons-BlackWhite-Medium-Hover: #000000;
+  --Buttons-BlackWhite-Medium-Active: #000000;
+  --Buttons-Default-Button: var(--Default-Button-Default-Medium-Button);
+  --Buttons-Default-Text: var(--Default-Button-Default-Medium-Text);
+  --Buttons-Default-Border: var(--Default-Button-Border-Surfaces-Default-Color-11);
+  --Buttons-Default-Hover: #f5dddd;
+  --Buttons-Default-Active: #f5dddd;
+  --Icons-Default: var(--Icon-Surfaces-Neutral-Color-11);
+  --Icons-Default-Variant: var(--Icon-Variant-Surfaces-Neutral-Color-11);
+  --Icons-Primary: var(--Icon-Surfaces-Primary-Color-11);
+  --Icons-Primary-Variant: var(--Icon-Variant-Surfaces-Primary-Color-11);
+  --Icons-Secondary: var(--Icon-Surfaces-Secondary-Color-11);
+  --Icons-Secondary-Variant: var(--Icon-Variant-Surfaces-Secondary-Color-11);
+  --Icons-Tertiary: var(--Icon-Surfaces-Tertiary-Color-11);
+  --Icons-Tertiary-Variant: var(--Icon-Variant-Surfaces-Tertiary-Color-11);
+  --Icons-Neutral: var(--Icon-Surfaces-Neutral-Color-11);
+  --Icons-Neutral-Variant: var(--Icon-Variant-Surfaces-Neutral-Color-11);
+  --Icons-Info: var(--Icon-Surfaces-Info-Color-11);
+  --Icons-Info-Variant: var(--Icon-Variant-Surfaces-Info-Color-11);
+  --Icons-Success: var(--Icon-Surfaces-Success-Color-11);
+  --Icons-Success-Variant: var(--Icon-Variant-Surfaces-Success-Color-11);
+  --Icons-Warning: var(--Icon-Surfaces-Warning-Color-11);
+  --Icons-Warning-Variant: var(--Icon-Variant-Surfaces-Warning-Color-11);
+  --Icons-Error: var(--Icon-Surfaces-Error-Color-11);
+  --Icons-Error-Variant: var(--Icon-Variant-Surfaces-Error-Color-11);
+}
+
+:root {
+  /* ========================================
+   * Chart Colors
+   * Direct hex values for data visualization
+   * ======================================== */
+
+  --Chart-BG: #ffffff;
+  --Chart-Lines: #e2e2e2;
+
+  /* Solid Chart Colors */
+  --Chart-1: #eef2ea;
+  --Chart-2: #fceded;
+  --Chart-3: #f7efe9;
+  --Chart-4: #eeefff;
+  --Chart-5: #dff7e4;
+  --Chart-6: #ffedd3;
+  --Chart-7: #ffe8e3;
+  --Chart-8: #f1f1f1;
+  --Chart-9: #dfe4d9;
+  --Chart-10: #f5dddd;
+
+  /* Opaque Chart Colors (50% opacity) */
+  --Chart-1-Opaque: rgba(238, 242, 234, 0.5);
+  --Chart-2-Opaque: rgba(252, 237, 237, 0.5);
+  --Chart-3-Opaque: rgba(247, 239, 233, 0.5);
+  --Chart-4-Opaque: rgba(238, 239, 255, 0.5);
+  --Chart-5-Opaque: rgba(223, 247, 228, 0.5);
+  --Chart-6-Opaque: rgba(255, 237, 211, 0.5);
+  --Chart-7-Opaque: rgba(255, 232, 227, 0.5);
+  --Chart-8-Opaque: rgba(241, 241, 241, 0.5);
+  --Chart-9-Opaque: rgba(223, 228, 217, 0.5);
+  --Chart-10-Opaque: rgba(245, 221, 221, 0.5);
+
+  /* ========================================
+   * Effect Levels (Box Shadows)
+   * ======================================== */
+
+  /* Per-elevation dropshadow tokens — defaults pre-computed for a white
+     surface using the studio's shared Comeau-style math (drop L,
+     ascending alpha). Brand CSS overrides --Dropshadow-Color-1..5 per
+     surface scope at runtime; the Effect-Level recipes below pick up the
+     overridden values automatically via var(). */
+  --Dropshadow-Color-1: #8c8c8c1a;   /* L=55, S=0, alpha 0.10 */
+  --Dropshadow-Color-2: #73737329;   /* L=45, S=0, alpha 0.16 */
+  --Dropshadow-Color-3: #59595938;   /* L=35, S=0, alpha 0.22 */
+  --Dropshadow-Color-4: #4040404d;   /* L=25, S=0, alpha 0.30 */
+  --Dropshadow-Color-5: #2e2e2e66;   /* L=18, S=0, alpha 0.40 */
+
+  /* Layered shadow recipes — each level stacks its own atmospheric shadow
+     on top of the previous level's contact shadow. Higher elevations read
+     as more dramatic, not weaker. Shared with the studio's per-design-
+     system CSS export so generated systems and the lib's defaults agree. */
+  --Effect-Level-0: none;
+  --Effect-Level-1: 0 1px 2px var(--Dropshadow-Color-1);
+  --Effect-Level-2: 0 2px 4px var(--Dropshadow-Color-2), 0 1px 2px var(--Dropshadow-Color-1);
+  --Effect-Level-3: 0 4px 8px var(--Dropshadow-Color-3), 0 2px 4px var(--Dropshadow-Color-2);
+  --Effect-Level-4: 0 8px 16px var(--Dropshadow-Color-4), 0 4px 8px var(--Dropshadow-Color-3);
+  --Effect-Level-5: 0 16px 32px var(--Dropshadow-Color-5), 0 8px 16px var(--Dropshadow-Color-4);
+
+ --Set-Font-Family-Header: "Prata", serif;
+ --Set-Font-Family-Header-Weight: 200;
+ --Set-Font-Family-Body: "Roboto", sans-serif;
+ --Set-Font-Family-Body-Weight: 400;
+ --Set-Font-Family-Body-Semibold-Weight: 600;
+ --Set-Font-Family-Body-Bold-Weight: 700;
+ --Set-Font-Family-Decorative: "Permanent Marker", sans-serif;
+ --Set-Font-Family-Decorative-Weight: 200;
+}
+
+
+:root {
+  --Button-Radius: 8px;
+  /* Structural default so outline borders render even when no brand CSS is
+     loaded (the studio chrome). A brand's generated base.css overrides this. */
+  --Button-Border-Width: 1px;
+  --Card-Radius: 11px;
+  --Card-Padding: 16px;
+}
+
+
+/* ========================================
+ * Surface Background Mapping
+ * Maps --Background to surface types
+ * ======================================== */
+
+[data-surface="Container"] {
+  --Background: var(--Container);
+}
+
+[data-surface="Container-Low"] {
+  --Background: var(--Container-Low);
+}
+
+[data-surface="Container-Lowest"] {
+  --Background: var(--Container-Lowest);
+}
+
+[data-surface="Container-High"] {
+  --Background: var(--Container-High);
+}
+
+[data-surface="Container-Highest"] {
+  --Background: var(--Container-Highest);
+}