From c4f68e167e2dd0eeaf2ec3747019e0aee6080977 Mon Sep 17 00:00:00 2001 From: Sheng Kun Chang Date: Fri, 19 Jun 2026 07:56:52 +0800 Subject: [PATCH 1/2] feat(theme): make the `secondary` tonal family the brand teal MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The secondary family was the M3-generated blue-grey (light #39656b / dark #b6c9d8), visibly off-brand next to the teal primary/accent. Shift the whole secondary ramp to brand teal — light #006973, a luminous #5bc2cd on dark — with its container/on/fixed tones moved into the same teal ramp. `color="secondary"` now reads as teal in both modes, giving a clean on-brand accent. Primary and the neutrals are untouched. Co-Authored-By: Claude Opus 4.8 (1M context) --- CHANGELOG.md | 9 +++++++++ package.json | 2 +- src/theme.css | 18 +++++++++--------- 3 files changed, 19 insertions(+), 10 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index fc432fd2e..f5972b2fa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,15 @@ Notable API additions and breaking changes. For the full commit log, see [GitHub Releases](https://github.com/mirrorstack-ai/web-ui-kit/releases). +## 0.5.11 + +- **`secondary` is now the brand teal.** The secondary tonal family shifts from + the M3-generated blue-grey to the brand teal — light `#006973`, a luminous + `#5bc2cd` on dark — with its container/on/fixed tones moved into the same teal + ramp. This gives apps a second on-brand accent (the dark `primary` remains the + M3 light-blue); `color="secondary"` now reads as teal in both modes. Only the + secondary family changes; primary and the neutrals are untouched. + ## 0.5.10 - **Warm dark theme.** The dark-mode neutral tokens shift from cool near-black diff --git a/package.json b/package.json index 344230f7d..9255dd2be 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@mirrorstack-ai/web-ui-kit", "packageManager": "pnpm@10.29.3", - "version": "0.5.10", + "version": "0.5.11", "main": "./dist/index.js", "types": "./dist/index.d.ts", "exports": { diff --git a/src/theme.css b/src/theme.css index 9ebda96b3..10b43cbb8 100644 --- a/src/theme.css +++ b/src/theme.css @@ -10,11 +10,11 @@ --color-primary-fixed: #c7e7ff; --color-on-primary-fixed: #001e2e; - --color-secondary: #39656b; + --color-secondary: #006973; --color-on-secondary: #ffffff; - --color-secondary-container: #beecf3; - --color-on-secondary-container: #224f55; - --color-secondary-fixed-dim: #b4dfe6; + --color-secondary-container: #9ceaf0; + --color-on-secondary-container: #00474e; + --color-secondary-fixed-dim: #82d3db; --color-tertiary: #7a4a97; --color-on-tertiary: #ffffff; @@ -86,11 +86,11 @@ --color-primary-fixed: #c7e7ff; --color-on-primary-fixed: #001e2e; - --color-secondary: #b6c9d8; - --color-on-secondary: #21323e; - --color-secondary-container: #384956; - --color-on-secondary-container: #d2e5f5; - --color-secondary-fixed-dim: #154a51; + --color-secondary: #5bc2cd; + --color-on-secondary: #00363b; + --color-secondary-container: #094a50; + --color-on-secondary-container: #a7e9f0; + --color-secondary-fixed-dim: #00525a; --color-tertiary: #cdc0e9; --color-on-tertiary: #342b4b; From aefeb01ebc56ad83b3eacf20a75ffeedf4469a86 Mon Sep 17 00:00:00 2001 From: Sheng Kun Chang Date: Fri, 19 Jun 2026 08:18:13 +0800 Subject: [PATCH 2/2] fix(theme): use a solid dark secondary (#0e8a97) with white on-secondary The first pass used the M3 light tone (#5bc2cd) on dark, so filled secondary buttons looked pale. Use a deeper teal with white text so filled secondary reads like a solid teal CTA while staying readable as outline/text on the dark canvas. Co-Authored-By: Claude Opus 4.8 (1M context) --- CHANGELOG.md | 9 +++++---- src/theme.css | 4 ++-- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index f5972b2fa..c868ad1c0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,10 +6,11 @@ Notable API additions and breaking changes. For the full commit log, see ## 0.5.11 - **`secondary` is now the brand teal.** The secondary tonal family shifts from - the M3-generated blue-grey to the brand teal — light `#006973`, a luminous - `#5bc2cd` on dark — with its container/on/fixed tones moved into the same teal - ramp. This gives apps a second on-brand accent (the dark `primary` remains the - M3 light-blue); `color="secondary"` now reads as teal in both modes. Only the + the M3-generated blue-grey to the brand teal — light `#006973`, a solid + `#0e8a97` on dark (white `on-secondary`, so filled secondary buttons read like + a deep-teal CTA) — with its container/on/fixed tones in the same teal ramp. + This gives apps a second on-brand accent (the dark `primary` remains the M3 + light-blue); `color="secondary"` now reads as teal in both modes. Only the secondary family changes; primary and the neutrals are untouched. ## 0.5.10 diff --git a/src/theme.css b/src/theme.css index 10b43cbb8..199295b14 100644 --- a/src/theme.css +++ b/src/theme.css @@ -86,8 +86,8 @@ --color-primary-fixed: #c7e7ff; --color-on-primary-fixed: #001e2e; - --color-secondary: #5bc2cd; - --color-on-secondary: #00363b; + --color-secondary: #0e8a97; + --color-on-secondary: #ffffff; --color-secondary-container: #094a50; --color-on-secondary-container: #a7e9f0; --color-secondary-fixed-dim: #00525a;