diff --git a/CHANGELOG.md b/CHANGELOG.md index fa44ac3..c5382ad 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,12 @@ # Changelog +## [Unreleased] + +### Changed + +- All three default themes now have distinct status colors. Status UIs can now distinguish caution, error, info, and success states without token overrides. +- `dust` theme background lightened slightly to improve contrast ratios with the updated color palette. + ## [0.2.0] - 2026-05-25 ### Added @@ -48,5 +55,6 @@ theming guide - `examples/playground.html` for visual review of all components and states +[Unreleased]: https://github.com/baudsmithstudios/elumkit/compare/v0.2.0...HEAD [0.2.0]: https://github.com/baudsmithstudios/elumkit/releases/tag/v0.2.0 [0.1.0]: https://github.com/baudsmithstudios/elumkit/releases/tag/v0.1.0 diff --git a/assets/theme-dust.svg b/assets/theme-dust.svg index 5e8dd70..b9c5f52 100644 --- a/assets/theme-dust.svg +++ b/assets/theme-dust.svg @@ -7,14 +7,14 @@ .muted { fill: #5f5648; } .accent { fill: #a3341b; } .accent-fill { fill: #a3341b; } - .success { fill: #2e6048; } - .warn { fill: #7a4800; } + .success { fill: #006b2d; } + .warn { fill: #8a4900; } .idle { fill: #5f5648; } .frame { fill: none; stroke: #3d2f20; stroke-width: 2; } .accent-frame { fill: none; stroke: #a3341b; stroke-width: 2; } - + STATUS diff --git a/assets/theme-iron.svg b/assets/theme-iron.svg index 670931c..5e27f57 100644 --- a/assets/theme-iron.svg +++ b/assets/theme-iron.svg @@ -8,7 +8,7 @@ .accent { fill: #f08550; } .accent-fill { fill: #f08550; } .success { fill: #4ec898; } - .warn { fill: #e05252; } + .warn { fill: #e3a008; } .idle { fill: #8a9eac; } .frame { fill: none; stroke: #4a6275; stroke-width: 2; } .accent-frame { fill: none; stroke: #f08550; stroke-width: 2; } diff --git a/docs/theming.md b/docs/theming.md index 74405c9..d281eb2 100644 --- a/docs/theming.md +++ b/docs/theming.md @@ -57,7 +57,7 @@ Defined in `packages/core-css/src/tokens.css`: `--elum-color-bg` and `--elum-color-surface` are separate tokens; the default themes assign them the same value for a flat, frameless look. You can override `--elum-color-surface` for additional card depth. -`--elum-color-muted` and `--elum-color-border` are distinct: muted is for de-emphasized text, border is for layout structure. `--elum-color-warn` and `--elum-color-error` are separate tokens from `--elum-color-accent`; the default themes assign them the same value, but they can be overridden independently. +`--elum-color-muted` and `--elum-color-border` are distinct: muted is for de-emphasized text, border is for layout structure. The four status tokens — `--elum-color-success`, `--elum-color-info`, `--elum-color-warn`, and `--elum-color-error` — each carry a distinct hue in every default theme, and can be overridden independently. ## Layout tokens diff --git a/packages/core-css/src/tokens.css b/packages/core-css/src/tokens.css index 0fe4a65..35dbcb5 100644 --- a/packages/core-css/src/tokens.css +++ b/packages/core-css/src/tokens.css @@ -38,9 +38,9 @@ --elum-color-border: #4a6275; --elum-color-accent: #f08550; --elum-color-success: #4ec898; - --elum-color-warn: #e05252; + --elum-color-warn: #e3a008; --elum-color-error: #e05252; - --elum-color-info: #4ec898; + --elum-color-info: #5aa7ff; --elum-color-focus: #f08550; } @@ -55,24 +55,24 @@ --elum-color-accent: #00e5ff; --elum-color-success: #00ff87; --elum-color-warn: #ffbe0b; - --elum-color-error: #ffbe0b; - --elum-color-info: #00ff87; + --elum-color-error: #ff5d73; + --elum-color-info: #b794ff; --elum-color-focus: #00e5ff; } [data-theme="dust"] { color-scheme:light; - --elum-color-bg: #ddd6c4; - --elum-color-surface: #ddd6c4; + --elum-color-bg: #e7e0ce; + --elum-color-surface: #e7e0ce; --elum-color-fg: #0e0e0e; --elum-color-muted: #5f5648; --elum-color-border: #3d2f20; --elum-color-accent: #a3341b; - --elum-color-success: #2e6048; - --elum-color-warn: #7a4800; - --elum-color-error: #7a4800; - --elum-color-info: #2e6048; + --elum-color-success: #006b2d; + --elum-color-warn: #8a4900; + --elum-color-error: #b01030; + --elum-color-info: #0058bd; --elum-color-focus: #a3341b; }