zeus-css 1.0.10 → 1.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -0
- package/dist/zeus.css +1 -1
- package/package.json +5 -3
- package/scss/cheatsheet.md +249 -249
- package/scss/llms.txt +247 -247
- package/scss/zeus.config.scss +1 -1
- package/scss/zeus.tokens.json +687 -687
- package/scss/CHANGELOG.md +0 -287
package/scss/CHANGELOG.md
DELETED
|
@@ -1,287 +0,0 @@
|
|
|
1
|
-
# Changelog
|
|
2
|
-
|
|
3
|
-
All notable changes to Zeus CSS are documented here. This project follows
|
|
4
|
-
[Semantic Versioning](https://semver.org/) against the public API surface
|
|
5
|
-
documented in [`API.md`](API.md).
|
|
6
|
-
|
|
7
|
-
## [Unreleased]
|
|
8
|
-
|
|
9
|
-
## [1.0.10] — 2026-08-05
|
|
10
|
-
|
|
11
|
-
Published to npm as `zeus-css`. [`API.md`](API.md) documents the public API
|
|
12
|
-
surface this changelog's semver contract is now binding against.
|
|
13
|
-
|
|
14
|
-
### Removed (since first written)
|
|
15
|
-
- **Dark mode**, entirely — `$zeus-dark-mode-strategy` and
|
|
16
|
-
`$zeus-enable-auto-dark-mode` (both mentioned as "Added" just below when
|
|
17
|
-
this entry was still labeled `1.0.0`) no longer exist. Architecture
|
|
18
|
-
decision: the framework ships one fixed, WCAG-passing light palette;
|
|
19
|
-
`semantic-colors.scss` emits a single `:root` block, no strategy branching.
|
|
20
|
-
- `$zeus-breakpoint-strategy` and its `"desktop-first"` reserved value —
|
|
21
|
-
removed rather than implemented; only mobile-first ever existed as a real
|
|
22
|
-
strategy, so the config knob offered no real choice. See `API.md`.
|
|
23
|
-
- The `.zeus-*` utility class prefix — renamed to bare class names
|
|
24
|
-
(`.surface`, `.glass`, `.sr-only`, etc.); `.z-*` is now reserved
|
|
25
|
-
exclusively for the framework's fixed BEM components (card, modal, form
|
|
26
|
-
controls) and does not participate in `$zeus-use-prefix`.
|
|
27
|
-
|
|
28
|
-
### Added
|
|
29
|
-
- **Component library, 3 → 14 components.** Phase 1: `.z-badge`, `.z-alert`,
|
|
30
|
-
`.z-avatar` (+ `.z-avatar-group`), `.z-table`, `.z-breadcrumb`,
|
|
31
|
-
`.z-pagination`. Phase 2: `.z-tabs`, `.z-tooltip`, `.z-dropdown`,
|
|
32
|
-
`.z-toast-region`/`.z-toast`, `.z-skeleton` — the floating ones built on the
|
|
33
|
-
native `popover` attribute plus CSS anchor positioning (same
|
|
34
|
-
"let the platform do it" approach as `.z-modal`'s `<dialog>`), with
|
|
35
|
-
`prefers-reduced-motion` guards and graceful degradation when anchor
|
|
36
|
-
positioning is unavailable. All are listed in [`API.md`](API.md) §5 and
|
|
37
|
-
therefore covered by the semver contract.
|
|
38
|
-
- **`derive-on-color()`** (`design/colors/_color-derivation.scss`) — derives a
|
|
39
|
-
readable foreground for text sitting on any brand color by switching on that
|
|
40
|
-
color's OKLCH lightness, entirely in CSS so it keeps following runtime
|
|
41
|
-
overrides. Fixes `.z-badge--solid`, which previously hardcoded white text
|
|
42
|
-
and so shipped 2.20:1 on the default secondary, 2.34:1 on warning and
|
|
43
|
-
2.79:1 on success. All six solid variants now clear WCAG AA
|
|
44
|
-
(4.55–7.40:1, browser-verified). Documented non-guarantee: a single
|
|
45
|
-
lightness threshold cannot clear AA for *every* possible input color.
|
|
46
|
-
- **CI hardening** (`scripts/test-compile.mjs`, 4 → 8 checks) — public-API
|
|
47
|
-
smoke test that invokes every public mixin/function, config-variable usage
|
|
48
|
-
analysis (catches orphaned config surface), CLI-bridge template integrity,
|
|
49
|
-
and a WCAG AA contrast regression guard over all 10 shipped color pairings.
|
|
50
|
-
- **Form components** (`_form.scss`): `.z-field`, `.z-label`, `.z-input`,
|
|
51
|
-
`.z-textarea`, `.z-select`, `.z-checkbox`, `.z-radio`, `.z-field-group`, with
|
|
52
|
-
hover/`:focus-visible`/`:disabled`/invalid states, native `accent-color`
|
|
53
|
-
theming for checkboxes/radios, and a CSS-only select chevron.
|
|
54
|
-
- **Z-index scale** — `$zeus-z-index` config map, `--z-*` custom properties,
|
|
55
|
-
and `.layer-{name}` utility classes; `.z-modal`/`.z-modal-backdrop` now use
|
|
56
|
-
the scale instead of hardcoded `z-index: 999/1000`.
|
|
57
|
-
- New utility class families: sizing (`w-*`, `h-*`, `min-w-*`, `max-w-*`,
|
|
58
|
-
fraction widths), position (`static`/`relative`/`absolute`/`fixed`/`sticky`,
|
|
59
|
-
`inset-*`, `top-*`/`bottom-*`, logical `inset-inline-start/end-*`), misc
|
|
60
|
-
(`opacity-*` in steps of 5, `overflow-*`, `object-*`, `flex-grow/shrink-*`,
|
|
61
|
-
`order-*`), and `hover:`/`focus:` state variants for every `bg-*`/`color-*`/
|
|
62
|
-
`border-color-*` class.
|
|
63
|
-
- **`zeus.tokens.json`** — every design token (colors, spacing, typography,
|
|
64
|
-
shadows, radii, borders, icon sizes, z-index, custom vars) in W3C Design
|
|
65
|
-
Tokens format, generated straight from compiled CSS by `npm run gen:tokens`
|
|
66
|
-
so it cannot drift from what actually ships.
|
|
67
|
-
- **`llms.txt` / `cheatsheet.md`** — auto-generated catalog of every public
|
|
68
|
-
mixin, function, and utility class family, via `npm run gen:cheatsheet`.
|
|
69
|
-
Both regenerate automatically on `npm run prepack`.
|
|
70
|
-
- **`scripts/test-compile.mjs`** — a 4-check compile matrix (default build,
|
|
71
|
-
module zero-emission, prefix build, config-override contract) using the
|
|
72
|
-
Sass JS API, run via `npm run test:compile`.
|
|
73
|
-
- **`.stylelintrc.json`** + `npm run lint:scss`, tuned to this codebase's
|
|
74
|
-
established conventions rather than generic defaults.
|
|
75
|
-
- A GitHub Actions workflow (`zeus-css-ci.yml`) running the compile matrix and
|
|
76
|
-
lint on every push/PR touching `zeus-css/**`.
|
|
77
|
-
- Shared color-derivation functions (`_color-derivation.scss`:
|
|
78
|
-
`derive-light`, `derive-dark`, `derive-surface`, `derive-muted`,
|
|
79
|
-
`derive-border`, `derive-border-strong`, `derive-surface-subtle`,
|
|
80
|
-
`derive-warning-subtle`) used by both `semantic-colors.scss` and
|
|
81
|
-
`theme-builder.scss`, closing the gap where `zeus-theme()` previously
|
|
82
|
-
produced incomplete token sets compared to the default palette.
|
|
83
|
-
- `API.md` — the documented public API surface required for a `1.0.0` tag.
|
|
84
|
-
|
|
85
|
-
### Changed
|
|
86
|
-
- Shadow presets (`primary`, `secondary`, `glow`, `glow-lg`, `outline`) now
|
|
87
|
-
derive from `var(--color-primary)` via `oklch(from ... l c h / N)` instead
|
|
88
|
-
of a hardcoded blue `rgba()`, so they follow custom brand colors.
|
|
89
|
-
- `col-start-*`/`col-end-*` grid utilities generated via `@for` loop instead
|
|
90
|
-
of hand-written rules.
|
|
91
|
-
|
|
92
|
-
### Fixed
|
|
93
|
-
- **`engine/shadows.scss`'s mixins didn't follow the codebase's own
|
|
94
|
-
CSS-Var-First pattern.** `padding()`/`border-radius()`/`text()` all
|
|
95
|
-
reference the already-emitted `:root` custom property (`var(--space-md)`,
|
|
96
|
-
etc.) instead of recomputing the value — documented as a deliberate
|
|
97
|
-
pattern in `layout.scss`/`typographics.scss`, for two reasons: the value
|
|
98
|
-
stays runtime-overridable (JS, `[data-theme]`), and the literal value
|
|
99
|
-
lives once instead of being repeated at every call site. Every shadow
|
|
100
|
-
mixin (`apply-shadow()`, `elevation()`, `hover-shadow()`, `focus-shadow()`,
|
|
101
|
-
`interactive-shadow()`, `card-shadow()`, `semantic-shadow()`,
|
|
102
|
-
`inner-shadow()`, `layered-shadow()`, `conditional-shadow()`) instead
|
|
103
|
-
called a Sass function (`shadow($key)`) that inlined the raw
|
|
104
|
-
`box-shadow` value at compile time — e.g. `.z-card` had a literal
|
|
105
|
-
`box-shadow: 0px 2px 8px 0px rgba(...), ...;` sitting right next to a
|
|
106
|
-
correctly-referenced `border-radius: var(--border-radius-md);`. A
|
|
107
|
-
component styled with `card-shadow()` would not pick up a runtime change
|
|
108
|
-
to `--shadow-card`, unlike every other token-driven mixin in the
|
|
109
|
-
framework. Added a private `_shadow-var($key)` helper
|
|
110
|
-
(`var(--shadow-#{$key})`) and switched all 16 call sites to it — same
|
|
111
|
-
compiled visual result under default config, now consistent with the
|
|
112
|
-
rest of the engine, and the repeated literal value is gone from the
|
|
113
|
-
compiled output (each shadow's value now appears once, at `:root`,
|
|
114
|
-
instead of once per component using it).
|
|
115
|
-
- **Focus indicators could disappear entirely under Windows High Contrast
|
|
116
|
-
Mode (`forced-colors`), a WCAG 2.4.7 Focus Visible risk.** Five call sites
|
|
117
|
-
removed the native focus outline (`outline: none`) and relied solely on
|
|
118
|
-
`box-shadow`/`border-color` to show `:focus-visible` —
|
|
119
|
-
`_form.scss`'s `_z-control-base()`, the `focus-shadow()`,
|
|
120
|
-
`interactive-shadow()`, and `conditional-shadow()` mixins in
|
|
121
|
-
`engine/shadows.scss`, and the `.focus:shadow-outline`/`.focus:shadow-primary`
|
|
122
|
-
utility classes. `forced-colors` mode strips `box-shadow` entirely, so
|
|
123
|
-
keyboard focus had no visible indicator left in that mode. Changed
|
|
124
|
-
`outline: none` to `outline: 2px solid transparent` at each site: fully
|
|
125
|
-
invisible in normal rendering (box-shadow remains the visible affordance),
|
|
126
|
-
but browsers paint outlines with a system color under `forced-colors`
|
|
127
|
-
regardless of the author-specified color, so focus stays visible exactly
|
|
128
|
-
when it's needed. `button-base-reset()` and the link reset in
|
|
129
|
-
`typography.scss` already used the correct pattern (`outline: revert` /
|
|
130
|
-
a real `outline` on `:focus-visible`) and needed no change.
|
|
131
|
-
- `btn-size()` emitted physical `padding-left`/`padding-right` for its
|
|
132
|
-
horizontal padding while every other spacing mixin in the framework already
|
|
133
|
-
uses logical properties — the one RTL leak in an otherwise RTL-clean
|
|
134
|
-
codebase. Now `padding-inline` (and, for consistency, `padding-block`
|
|
135
|
-
instead of `padding-top`/`padding-bottom`).
|
|
136
|
-
- `_tooltip.scss`'s anchor-positioning fallback comment claimed an
|
|
137
|
-
`@supports` guard "protects the whole feature" — no such block exists
|
|
138
|
-
anywhere in the codebase. The actual mechanism (browsers ignore the
|
|
139
|
-
unrecognized `position-anchor`/`position-area` values and fall back to
|
|
140
|
-
default top-layer placement) needed no guard; the comment now says so.
|
|
141
|
-
- `API.md` referenced `foundation/core/design/_fluid-core.scss` twice (§3,
|
|
142
|
-
§7) — the file has always lived in `foundation/core/engine/`.
|
|
143
|
-
- `API.md` §7 listed "the CI workflow" among excluded tooling; no CI workflow
|
|
144
|
-
exists in this repository. Reworded to reference the compile-matrix test
|
|
145
|
-
suite that does.
|
|
146
|
-
- `README.md`'s "Learn more" section said a docs site was "planned for a
|
|
147
|
-
future release" while one already existed — corrected to stop disclaiming
|
|
148
|
-
it.
|
|
149
|
-
- **Package name unified to `zeus-css`.** The source manifest and all docs
|
|
150
|
-
said `@lazaris/zeus-css` while the published package `scripts/build-package.ts`
|
|
151
|
-
actually generates is — and always was — unscoped `zeus-css`, which is also
|
|
152
|
-
what the `zeus-css init` bridge imports (`@use "zeus-css/scss/zeus.scss"`).
|
|
153
|
-
Following the README's `npm install @lazaris/zeus-css` therefore produced a
|
|
154
|
-
bridge file that could not resolve. `package.json`, `README.md`, and
|
|
155
|
-
`API.md` §1 now all say `zeus-css`.
|
|
156
|
-
- **The four documented entry points now actually resolve.** README/`API.md` §1
|
|
157
|
-
document `zeus-css/foundation`, `zeus-css/zeus`, `zeus-css/config`, and
|
|
158
|
-
`zeus-css/customize`, but the generated package's `exports` map only carried
|
|
159
|
-
`.`, `./config`, and the raw `./scss/*` passthrough — so three of the four
|
|
160
|
-
documented specifiers failed to resolve against the published package.
|
|
161
|
-
Explicit aliases for all four are now emitted.
|
|
162
|
-
- **`zeus-css/css` and `zeus-css/min` were real, shipped exports
|
|
163
|
-
(`package.json` → `exports`) with no entry in README or `API.md` §1** — a
|
|
164
|
-
dev with no Sass pipeline had no documented way to just import the
|
|
165
|
-
precompiled CSS, and the two specifiers carried no semver contract despite
|
|
166
|
-
already being public. README now leads with them for the no-build-step
|
|
167
|
-
path; `API.md` §1 lists both, with a note that they're static builds of
|
|
168
|
-
`foundation.scss` with default tokens baked in and cannot reflect
|
|
169
|
-
`zeus.customize.scss` overrides.
|
|
170
|
-
- `$zeus-outer-padding` was declared twice in `zeus.config.scss` — an older
|
|
171
|
-
`(mobile, desktop)`-shaped default (used internally to auto-derive
|
|
172
|
-
`$container-bounds`) and a newer `(floor, ceil)`-shaped default (the public
|
|
173
|
-
config that drives `--padding-outer`) reused the same variable name. Because
|
|
174
|
-
the first `!default` assignment wins, the second declaration was always
|
|
175
|
-
dead: `--padding-outer` compiled with a `128px` → `64px` max instead of the
|
|
176
|
-
documented `128px`, and overriding the public var via its documented
|
|
177
|
-
`(floor, ceil)` shape crashed the build (`null` arithmetic) in
|
|
178
|
-
`core/design/core/basic.scss`. The internal default is now its own
|
|
179
|
-
variable, `$zeus-viewport-gutter` (the gutter between the viewport edge and
|
|
180
|
-
the container at each reference width), and both it and `$zeus-viewports`
|
|
181
|
-
(which was never forwarded at all) are now included in the `zeus-css init`
|
|
182
|
-
CLI bridge template.
|
|
183
|
-
- **Six silent-failure gaps in the token pipeline, closed after an internal
|
|
184
|
-
audit.** All were "malformed override compiles anyway, producing broken CSS
|
|
185
|
-
or a confusing low-level error" — none were reachable through the shipped
|
|
186
|
-
defaults, only through a bad override:
|
|
187
|
-
- `_validate.scss`'s validators (written for exactly this) were never
|
|
188
|
-
`@include`d anywhere. Now wired into every token module that assembles a
|
|
189
|
-
`(floor, ceil)`/typography/button-size map — `design/dimensions/spaces.scss`,
|
|
190
|
-
`design/dimensions/sizes.scss`, `design/borders/border-radius.scss`,
|
|
191
|
-
`design/borders/border-line.scss`, `design/layout/grid.scss`
|
|
192
|
-
(`$column-gaps`), `design/typography/typography.scss`, and
|
|
193
|
-
`design/buttons/sizes.scss` — so a malformed entry now fails loudly, by
|
|
194
|
-
name, at the point it's declared.
|
|
195
|
-
- `zeus-resolve-type()` (`views/render/root-generator.scss`) duck-typed the
|
|
196
|
-
token pipeline's dictionary by checking for `floor`+`ceil` or
|
|
197
|
-
`weight`+`lh`; a map with only one of either pair silently fell through to
|
|
198
|
-
"nested map" and emitted a wrong CSS variable instead of the intended one.
|
|
199
|
-
Now `@error`s on a partial match, for any dictionary entry — not just the
|
|
200
|
-
six categories the validators above cover.
|
|
201
|
-
- `zeus-transform-value()`'s typography branch resolved a token's `family`
|
|
202
|
-
key against `$font-family` with no existence check, so a typo'd family
|
|
203
|
-
silently compiled a literal `null` into the emitted `font` shorthand. Now
|
|
204
|
-
`@error`s with the available family names.
|
|
205
|
-
- `btn-size()`'s missing-nested-key case (a size entry with `font`/`py`/`px`
|
|
206
|
-
present but no `floor`/`ceil` inside) is now unreachable — the
|
|
207
|
-
`design/buttons/sizes.scss` validator above rejects the malformed
|
|
208
|
-
`$zeus-button-sizes` entry before `btn-size()` ever sees it.
|
|
209
|
-
- `_c()` (`design/colors/semantic-colors.scss`) intentionally falls back to
|
|
210
|
-
a built-in default when a `$zeus-colors` key is absent — but that made a
|
|
211
|
-
typo'd key (e.g. `primry`) indistinguishable from "not set", with no
|
|
212
|
-
signal at all. `$zeus-colors` is now checked against the exact set of keys
|
|
213
|
-
this file reads; an unrecognized key `@warn`s by name instead of vanishing
|
|
214
|
-
silently.
|
|
215
|
-
- The custom-vars responsive loop (`zeus-root-vars()`) assumed
|
|
216
|
-
`$zeus-breakpoints` was already in ascending pixel order and iterated it
|
|
217
|
-
as-written; an override that appended a new breakpoint out of numeric
|
|
218
|
-
order would cascade it last instead of where its pixel value puts it. The
|
|
219
|
-
loop now sorts breakpoint keys by pixel value before iterating.
|
|
220
|
-
- Duplicate `.inset-0` rule (one hardcoded, one loop-generated) in the new
|
|
221
|
-
position utilities.
|
|
222
|
-
- `_form.scss`'s `&:hover:not(:disabled):not(:focus-visible)` rewritten to
|
|
223
|
-
the `:not(a, b)` complex-selector notation required by the new lint config.
|
|
224
|
-
|
|
225
|
-
## [0.9.0] — 2026-07-20
|
|
226
|
-
|
|
227
|
-
First public beta. Prior versions were internal-only; this changelog starts
|
|
228
|
-
here rather than reconstructing an inaccurate pre-history.
|
|
229
|
-
|
|
230
|
-
### Added
|
|
231
|
-
- `LICENSE` (MIT), `package.json` with a proper `exports` map, and this
|
|
232
|
-
`CHANGELOG.md` — the framework can now be installed via npm.
|
|
233
|
-
- `README.md` with install instructions and a 5-minute quickstart.
|
|
234
|
-
- Opt-in `.no-overflow-x` utility (replaces the old global `overflow-x: hidden`
|
|
235
|
-
on `html`/`body`, which hid real layout overflow instead of surfacing it).
|
|
236
|
-
- `@warn` diagnostic when `$zeus-breakpoint-strategy` is set to an
|
|
237
|
-
unimplemented value (previously silently ignored).
|
|
238
|
-
|
|
239
|
-
### Changed
|
|
240
|
-
- **Single source of truth for color tokens.** Any `*-light`, `*-dark`,
|
|
241
|
-
`surface`, `text-inverse`, `text-muted`, `border`, or `border-strong` key
|
|
242
|
-
defined in `$zeus-colors` is now respected as-is; automatic OKLCH derivation
|
|
243
|
-
only runs for keys the developer did **not** define. Previously, derived
|
|
244
|
-
values silently overwrote explicit config values.
|
|
245
|
-
- Cascade layer order (`reset, tokens, base, layout, components, utilities`)
|
|
246
|
-
is now established before any layer receives rules, and `html`/`body`,
|
|
247
|
-
typography defaults, components (`.z-card`, `.z-modal`), and patterns
|
|
248
|
-
(`.z-hero`, `.z-sidebar-layout`) are now emitted inside their proper layer —
|
|
249
|
-
utility classes can reliably override component styles without `!important`.
|
|
250
|
-
- `zeus.scss` (the module-only entry point used via `@use "zeus" as *` in
|
|
251
|
-
component files) is now truly zero-emission: animation `@keyframes` and the
|
|
252
|
-
scroll-driven `.z-scroll-*` classes moved to the render layer, so importing
|
|
253
|
-
it no longer leaks ~150 lines of duplicate CSS into every component.
|
|
254
|
-
- Config schema unified to `(floor, ceil)` everywhere. `$zeus-column-gaps` and
|
|
255
|
-
`$zeus-outer-padding` previously used `(min, max)` keys that the engine
|
|
256
|
-
silently ignored — overrides now apply correctly.
|
|
257
|
-
- Grid utilities (`.grid-cols-*`, `.grid-split`, `.grid-thirds`,
|
|
258
|
-
`.grid-sidebar`, `.z-sidebar-layout`) use `minmax(0, 1fr)` instead of bare
|
|
259
|
-
`1fr`, preventing grid blowout (a page-level horizontal scrollbar) when a
|
|
260
|
-
grid child contains wide unbreakable content such as code blocks.
|
|
261
|
-
- `$zeus-use-prefix` now applies consistently across every utility generator
|
|
262
|
-
(shadows, containers, compounds, aspect-ratio, animations, grid patterns) —
|
|
263
|
-
previously only some class families respected it.
|
|
264
|
-
- `color()` alpha blending now uses `color.change()` instead of `rgba()`,
|
|
265
|
-
which crashed on OKLCH input in modern Dart Sass.
|
|
266
|
-
|
|
267
|
-
### Fixed
|
|
268
|
-
- `<dialog class="z-modal">` no longer renders visible when closed (the base
|
|
269
|
-
rule set `display` unconditionally; it's now scoped to `&[open]`).
|
|
270
|
-
- `:where(li) { list-style: none }` and the accompanying `padding-left: 0`
|
|
271
|
-
reset — both applied globally — have been removed; only lists explicitly
|
|
272
|
-
marked `[role="list"]` opt out of native bullets, preserving list semantics
|
|
273
|
-
for assistive technology.
|
|
274
|
-
- `outline: none` on shadow-based focus styles now only applies under
|
|
275
|
-
`:focus-visible`, never plain `:focus`, so keyboard users always retain a
|
|
276
|
-
visible focus indicator.
|
|
277
|
-
- `html { font-size: 16px }` → `font-size: 100%`, respecting the user's
|
|
278
|
-
browser font-size preference instead of overriding it.
|
|
279
|
-
- `scroll-behavior: smooth` no longer applied unconditionally outside the
|
|
280
|
-
`prefers-reduced-motion` guard already present in the reset.
|
|
281
|
-
- `--color-surface-subtle` and `--color-warning-subtle` (referenced by
|
|
282
|
-
`:where(code)` / `:where(mark)`) are now actually defined.
|
|
283
|
-
- An impossible/dead media query combination
|
|
284
|
-
(`min-width: 2560px` together with an inner `max-width` below it) that could
|
|
285
|
-
never match has been removed from the responsive utility loop.
|
|
286
|
-
- Stale `(min, max)` references in comments and validator error messages
|
|
287
|
-
corrected to the actual `(floor, ceil)` schema.
|