ui-style-kit-css 2.4.1 → 2.6.0
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/CHANGELOG.md +75 -0
- package/README.md +92 -48
- package/dist/ui-style-kit.css +4117 -3544
- package/dist/ui-style-kit.min.css +3 -3
- package/dist/ui-style-kit.visual.css +4117 -3544
- package/dist/ui-style-kit.visual.min.css +3 -3
- package/dist/ui-style-kit.with-bridge.css +4117 -3544
- package/dist/ui-style-kit.with-bridge.min.css +3 -3
- package/dist/visual/art-deco.css +709 -288
- package/dist/visual/bauhaus.css +2 -2
- package/dist/visual/bento.css +2 -2
- package/dist/visual/brutalism.css +494 -100
- package/dist/visual/clay.css +2 -2
- package/dist/visual/cyberpunk.css +587 -193
- package/dist/visual/data-terminal.css +586 -192
- package/dist/visual/editorial-luxe.css +589 -195
- package/dist/visual/industrial-utility.css +653 -259
- package/dist/visual/maximalist.css +571 -177
- package/dist/visual/minimal-saas.css +520 -126
- package/dist/visual/neo-noir.css +2 -2
- package/dist/visual/neumorphism.css +543 -149
- package/dist/visual/organic-modern.css +2 -2
- package/dist/visual/paper-editorial.css +668 -274
- package/dist/visual/retro-glass.css +600 -206
- package/dist/visual/retrofuturism.css +548 -154
- package/dist/visual/tactile.css +561 -167
- package/dist/visual/technical-blueprint.css +627 -225
- package/dist/visual/y2k.css +543 -137
- package/docs/ART-DECO.md +2 -2
- package/docs/BRIDGE-MIGRATION.md +38 -0
- package/docs/ECOSYSTEM.md +11 -11
- package/docs/PUBLISHING.md +12 -12
- package/docs/RELEASE-2.4.2.md +37 -0
- package/docs/RELEASE-2.5.0.md +34 -0
- package/docs/RELEASE-2.6.0.md +36 -0
- package/docs/STYLE-GUIDE.md +10 -0
- package/manifest.json +466 -240
- package/package.json +32 -4
- package/styles/art-deco.css +68 -22
- package/styles/bauhaus.css +8 -0
- package/styles/bento.css +19 -6
- package/styles/brutalism.css +8 -0
- package/styles/clay.css +11 -3
- package/styles/clean-defaults.css +295 -0
- package/styles/component-composition.css +829 -0
- package/styles/components.css +79 -0
- package/styles/cyberpunk.css +8 -0
- package/styles/data-terminal.css +8 -0
- package/styles/editorial-luxe.css +8 -0
- package/styles/industrial-utility.css +8 -0
- package/styles/interactive-surface-theme.css +23 -23
- package/styles/maximalist.css +8 -0
- package/styles/minimal-saas.css +8 -0
- package/styles/native-elements.css +7 -0
- package/styles/neo-noir.css +8 -0
- package/styles/neumorphism.css +8 -0
- package/styles/organic-modern.css +8 -1
- package/styles/paper-editorial.css +8 -0
- package/styles/retro-glass.css +9 -1
- package/styles/retrofuturism.css +8 -0
- package/styles/tactile.css +8 -0
- package/styles/technical-blueprint.css +16 -1
- package/styles/theme-colors.css +3 -0
- package/styles/y2k.css +25 -3
package/docs/ART-DECO.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# Art Deco Element System
|
|
2
2
|
|
|
3
|
-
The Art Deco preset implements the retained light and dark **Art Deco UI Element System** boards using the canonical `deco-*` namespace. No public `ad-*` source aliases are introduced. All shared semantic components remain part of the unchanged `.
|
|
3
|
+
The Art Deco preset implements the retained light and dark **Art Deco UI Element System** boards using the canonical `deco-*` namespace. No public `ad-*` source aliases are introduced. All shared semantic components remain part of the unchanged `.usk-*` API.
|
|
4
4
|
|
|
5
5
|
## Loading And Palettes
|
|
6
6
|
|
|
@@ -77,4 +77,4 @@ Focused coverage lives in `tests/art-deco-template.test.js` and `tests/e2e/art-d
|
|
|
77
77
|
|
|
78
78
|
Full-demo Art Deco accessibility states are included in `tests/e2e/accessibility.spec.js`. Reference screenshots are written to the operating system's temporary `usk-art-deco-template` directory. Repository build, CSS lint, palette contrast, compatibility, ownership, and package checks remain the project's standard commands.
|
|
79
79
|
|
|
80
|
-
The semantic authored-hook test currently detects additional `.
|
|
80
|
+
The semantic authored-hook test currently detects additional `.usk-*` hooks in existing Retrofuturism source, independent of this Art Deco implementation. That source is not changed here. Generated declaration fingerprints and the distinct preset-extras count are updated for the intentional Art Deco expansion; no release, commit, push, or full CI run is implied.
|
package/docs/BRIDGE-MIGRATION.md
CHANGED
|
@@ -18,3 +18,41 @@ import "ui-style-kit-css/with-bridge.css";
|
|
|
18
18
|
```
|
|
19
19
|
|
|
20
20
|
Do not combine a deprecated bridge import with `interactive-surface-theme.css`; select the legacy stateful path during migration or the canonical token-only path for new integration work.
|
|
21
|
+
|
|
22
|
+
## Replace preset-prefixed runtime hooks
|
|
23
|
+
|
|
24
|
+
Preset-prefixed classes remain supported advanced entrypoints for applications
|
|
25
|
+
that never switch visual systems. They should not be used as application state
|
|
26
|
+
or queried by runtime logic. Replace markup such as:
|
|
27
|
+
|
|
28
|
+
```html
|
|
29
|
+
<button class="saas-button saas-button-primary variant-active">Save</button>
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
with stable semantic markup:
|
|
33
|
+
|
|
34
|
+
```html
|
|
35
|
+
<button class="ui-button" data-ui-variant="primary" aria-pressed="true">Save</button>
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
Keep `data-ui` and `data-mode` on the owning scope and use `data-theme` only
|
|
39
|
+
when selecting a shared palette. The semantic class stays unchanged when the
|
|
40
|
+
preset changes.
|
|
41
|
+
|
|
42
|
+
## Replace preset-private tokens
|
|
43
|
+
|
|
44
|
+
Application CSS must not depend on tokens such as `--saas-*`, `--bento-*`, or
|
|
45
|
+
another preset's internal material variables. Use the documented `--ui-*`
|
|
46
|
+
semantic handshake for portable control paint and geometry, or the public
|
|
47
|
+
`--usk-*` theme roles when the application intentionally integrates with UI
|
|
48
|
+
Style Kit. Preset-private values may change as a visual system is refined.
|
|
49
|
+
|
|
50
|
+
## Replace legacy `variant-*` state classes
|
|
51
|
+
|
|
52
|
+
UI Style Kit does not define a generic `variant-*` class API. Use
|
|
53
|
+
`data-ui-variant` only on the selectors and values declared in
|
|
54
|
+
`manifest.json#semanticComponentApi.variantAttribute`. Use native or ARIA state
|
|
55
|
+
for interaction state, such as `disabled`, `aria-pressed`, `aria-selected`,
|
|
56
|
+
`aria-current`, and `aria-busy`. When Interactive Surface is present, its
|
|
57
|
+
documented `data-surface-variant` and `data-surface-level` attributes own state
|
|
58
|
+
surface behavior; they do not replace `data-ui-variant` paint semantics.
|
package/docs/ECOSYSTEM.md
CHANGED
|
@@ -4,21 +4,21 @@ UI Style Kit CSS is the visual layer in the three-library CSS ecosystem. It can
|
|
|
4
4
|
|
|
5
5
|
`ecosystem-compatibility.json` is the authoritative source for supported ranges, validated combinations, canonical imports, and deprecated bridge metadata. UI Style Kit owns this file temporarily until a dedicated ecosystem fixture repository is introduced.
|
|
6
6
|
|
|
7
|
-
Its companion source records pin the
|
|
7
|
+
Its companion source records pin the reviewed Interactive Surface 1.7.3 and Layout Style 3.2.3 release commits used by integration and release verification. These immutable revisions must remain remotely reachable; never replace them with mutable branches or dirty working trees.
|
|
8
8
|
|
|
9
9
|
## Remote Validation Sequence
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
Before a UI branch or pull request is expected to validate, verify the reviewed Interactive Surface 1.7.3 and Layout 3.2.3 commit objects remain fetchable from their GitHub repositories. The CI and publish workflows intentionally fail rather than silently substituting a mutable branch, dirty checkout, or stale registry artifact.
|
|
12
12
|
|
|
13
13
|
## Aligned Versions
|
|
14
14
|
|
|
15
15
|
| Library | Current aligned version | Owns |
|
|
16
16
|
|---|---:|---|
|
|
17
|
-
| `ui-style-kit-css@2.
|
|
18
|
-
| `interactive-surface-css@1.7.
|
|
19
|
-
| `layout-style-css@3.
|
|
17
|
+
| `ui-style-kit-css@2.6.0` | current release | visual identity, color themes, UI paint, native HTML styling, content wrapping, and bridge tokens |
|
|
18
|
+
| `interactive-surface-css@1.7.3` | compatible state release | interaction-state primitives, surface behavior, state layers, and input affordances |
|
|
19
|
+
| `layout-style-css@3.2.3` | compatible structural release | structural wrappers, grids, sections, app shells, and layout recipes |
|
|
20
20
|
|
|
21
|
-
The current combination is `ui-style-kit-css@2.
|
|
21
|
+
The current combination is `ui-style-kit-css@2.6.0`, `interactive-surface-css@1.7.3`, and `layout-style-css@3.2.3`. UI Style Kit `2.6.0` is the current release; the companion versions are reviewed releases. Layout Style `3.2.3` is the compatible structural release. The validated minimum remains `ui-style-kit-css@2.1.0`, `interactive-surface-css@1.5.0`, and `layout-style-css@3.0.0`.
|
|
22
22
|
|
|
23
23
|
## Layout-to-visual pairing matrix
|
|
24
24
|
|
|
@@ -50,7 +50,7 @@ UI Style Kit can use the same portable path by loading `ui-style-kit-css/visual.
|
|
|
50
50
|
Use UI Style Kit by itself when an app needs visual identity, theme roles, native element styling, and long-text containment without layout primitives or richer interaction-state behavior.
|
|
51
51
|
|
|
52
52
|
```js
|
|
53
|
-
import "ui-style-kit-css/minimal-saas.css";
|
|
53
|
+
import "ui-style-kit-css/presets/minimal-saas.css";
|
|
54
54
|
```
|
|
55
55
|
|
|
56
56
|
### Use two
|
|
@@ -58,7 +58,7 @@ import "ui-style-kit-css/minimal-saas.css";
|
|
|
58
58
|
Pair UI Style Kit with Interactive Surface CSS when controls need the sibling interaction-state primitives. Import UI paint first, its public token bridge second, and the sibling state core third.
|
|
59
59
|
|
|
60
60
|
```js
|
|
61
|
-
import "ui-style-kit-css/
|
|
61
|
+
import "ui-style-kit-css/presets/minimal-saas.css";
|
|
62
62
|
import "ui-style-kit-css/interactive-surface-theme.css";
|
|
63
63
|
import "interactive-surface-css/state-core.css";
|
|
64
64
|
```
|
|
@@ -66,7 +66,7 @@ import "interactive-surface-css/state-core.css";
|
|
|
66
66
|
Pair UI Style Kit with Layout Style CSS when the app already has interaction behavior but needs structural wrappers, grids, and sections.
|
|
67
67
|
|
|
68
68
|
```js
|
|
69
|
-
import "ui-style-kit-css/
|
|
69
|
+
import "ui-style-kit-css/presets/minimal-saas.css";
|
|
70
70
|
import "layout-style-css";
|
|
71
71
|
```
|
|
72
72
|
|
|
@@ -87,8 +87,8 @@ import "layout-style-css";
|
|
|
87
87
|
- Interactive Surface CSS owns interaction-state semantics, input affordances, state layers, and surface behavior.
|
|
88
88
|
- Layout Style CSS owns structural wrappers, layout recipes, grids, app shells, and section composition.
|
|
89
89
|
|
|
90
|
-
The canonical theme bridge does not make Interactive Surface a dependency of UI Style Kit. It
|
|
90
|
+
The canonical theme bridge does not make Interactive Surface a dependency of UI Style Kit. It maps resolved `--usk-native-*` paint pairs and radius geometry to `--interactive-surface-*` tokens, falling back to shared `--usk-*` roles only when needed; this keeps reference palettes readable and preserves preset-specific clipped or squared controls when `data-theme` is omitted. `state-core.css` continues to own interaction mechanics. The older `interactive-surface-bridge` and `with-bridge` exports are deprecated compatibility paths whose stateful behavior remains unchanged.
|
|
91
91
|
|
|
92
92
|
## Canonical ownership order
|
|
93
93
|
|
|
94
|
-
Load UI visual CSS first, UI interaction-theme paint second, Interactive Surface state core third, Layout CSS fourth, and application overrides last. Layout `3.
|
|
94
|
+
Load UI visual CSS first, UI interaction-theme paint second, Interactive Surface state core third, Layout CSS fourth, and application overrides last. Layout `3.2.3` does not export `integrations/ui-style-kit.css` or `legacy.css`; use its root or supported `foundation.css`, wrapper, primitive, recipe, utility, and personality entrypoints.
|
package/docs/PUBLISHING.md
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
# Publishing Guide
|
|
2
2
|
|
|
3
|
-
## 2.
|
|
3
|
+
## 2.6.0 release workflow
|
|
4
4
|
|
|
5
|
-
The current checkout is a release candidate. [Release preparation notes](RELEASE-2.
|
|
5
|
+
The current checkout is a release candidate. [Release preparation notes](RELEASE-2.6.0.md)
|
|
6
6
|
record the current local scope and gates; existing visual-QA documents are historical
|
|
7
|
-
evidence, not proof that subsequent edits passed browser validation. The 2.
|
|
7
|
+
evidence, not proof that subsequent edits passed browser validation. The 2.6.0
|
|
8
8
|
changelog entry must carry the approved publication date before tagging.
|
|
9
9
|
|
|
10
10
|
Update the tracked `wiki/` sources with the README and docs. Publishing those pages
|
|
@@ -13,9 +13,9 @@ documentation generator is configured in this package; reusable JavaScript helpe
|
|
|
13
13
|
use JSDoc-compatible comments, and the checked-in build owns generated CSS, manifests,
|
|
14
14
|
icons, README size measurements, and demo asset hashes.
|
|
15
15
|
|
|
16
|
-
Prepare `ui-style-kit-css@2.
|
|
16
|
+
Prepare `ui-style-kit-css@2.6.0` on its release branch, open a pull request against `main`, and merge only after the fast automated gate is green and any requested manual demo review is complete. The aligned companion releases are `layout-style-css@3.2.3` and `interactive-surface-css@1.7.3`.
|
|
17
17
|
|
|
18
|
-
Do not push `v2.
|
|
18
|
+
Do not push `v2.6.0` before the reviewed release commit is on `main`. A pushed version tag runs Release Version Alignment, which validates the tag/package/changelog contract and creates the GitHub Release; publishing that release triggers the protected npm workflow.
|
|
19
19
|
|
|
20
20
|
Release Version Alignment owns the fast automated release gate: lint, build, unit checks, the tagged Chromium release-smoke Playwright suite, and packed ecosystem preflight with `--skip-clean-install`. The visual-baseline suite, full UI matrix, and clean-install ecosystem matrix are manual escalation tools, not default push or publish blockers. The protected npm workflow intentionally does not rerun browser gates; it revalidates the immutable tag, package contracts, browser-free compatibility checks, companion commit reachability, the explicit release preflight with `--skip-clean-install`, npm token presence, npm owner authorization, and registry state before publishing.
|
|
21
21
|
|
|
@@ -33,7 +33,7 @@ Manual release review should open the checked-in demo, exercise the changed pres
|
|
|
33
33
|
|
|
34
34
|
The local UI matrix stops after the first failing 100-case block. Every case has a stable global number, so diagnose each failure with `npm run test:matrix:case -- --case N`. The rest of that block has already completed; after its targeted failures pass, continue at the next untested block with `npm run test:matrix -- --from-block B`. Already green blocks do not run again. `npm run test:matrix:block -- --block B` and `npm run test:matrix:range -- --from N --to M` provide bounded alternatives. `test:matrix:raw` is reserved for the manual sharded automation workflow.
|
|
35
35
|
|
|
36
|
-
`npm run release:preflight` validates the shared manifests and compatibility contract, queries npm for every exact minimum/current version, resolves every export from the candidate tarball, checks maintained documentation against installed packages, and can run the current/minimum clean-install browser matrix when `--skip-clean-install` is omitted.
|
|
36
|
+
`npm run release:preflight` validates the shared manifests and compatibility contract, queries npm for every exact minimum/current version, resolves every export from the candidate tarball, checks maintained documentation against installed packages, and can run the current/minimum clean-install browser matrix when `--skip-clean-install` is omitted. The release verification scripts pass `--candidate-package ui-style-kit-css --companion-candidate-root ../Layout-Style-CSS --companion-candidate-root ../Interactive-Surface-CSS`. Those explicit roots exempt only local packages whose name and version exactly match the exact versions in the current compatibility matrix; minimum versions remain registry-backed. Omitting the companion flags preserves the registry-only default, and a mismatched or duplicate local candidate fails closed. The gate performs no publish, tag, release, or deployment mutation and is therefore safe to execute on pull requests.
|
|
37
37
|
|
|
38
38
|
`npm run check` rebuilds dist CSS, runs stylelint, executes package and API contracts, validates all theme/mode contrast pairs, enforces the Browserslist compatibility contract through `check:compat`, verifies CSS ownership, and confirms package metadata. Default browser gates cover the release-smoke Playwright set; visual-baseline and full matrix checks are explicit manual gates. `npm run check:ecosystem:packs` remains the full standalone, pairwise, and all-three packed package compatibility proof for canonical visual/theme/state/layout imports and deprecated bridge imports in both supported matrices. `npm run pack:dry-run` shows the exact files that would publish without re-entering `prepack`.
|
|
39
39
|
|
|
@@ -41,18 +41,18 @@ The local UI matrix stops after the first failing 100-case block. Every case has
|
|
|
41
41
|
|
|
42
42
|
`npm run check:ecosystem:minimum` downloads and repacks the declared minimum published runtime versions: `ui-style-kit-css@2.1.0`, `interactive-surface-css@1.5.0`, and `layout-style-css@3.0.0`. Those tarballs predate the additive shared-manifest policy introduced on the coordinated branches, so the minimum matrix validates their exact installed versions and published CSS entry points; current packed heads retain the stricter manifest-schema and current-documentation checks. `npm run check:ecosystem:packs` runs current first and minimum second.
|
|
43
43
|
|
|
44
|
-
The current matrix checks
|
|
44
|
+
The current matrix checks the candidate UI tarball with `interactive-surface-css@1.7.3` and `layout-style-css@3.2.3`. The minimum published matrix remains `ui-style-kit-css@2.1.0`, `interactive-surface-css@1.5.0`, and `layout-style-css@3.0.0`.
|
|
45
45
|
|
|
46
46
|
Both matrices install fresh tarball consumers for UI only, Interaction only, Layout only, every pair, and all three. Chromium then checks selected theme paint, native and prefixed components, interaction focus/disabled/loading/selected/persistent states, Layout wrappers/primitives/recipes/personalities, console cleanliness, and an empty external-request log. Three text-free baselines under `tests/snapshots/clean-install/` cover the highest-risk integrated combinations.
|
|
47
47
|
|
|
48
48
|
Snapshot verification decodes PNG pixels, requires exact dimensions, ignores pixelmatch-classified antialias noise, uses a `0.1` color threshold, and permits at most `0.25%` differing pixels. The committed fixtures render at 720-721 by 261 pixels and therefore allow 469-470 changed pixels while rejecting the tested 42% meaningful change. A mismatch retains both `SCENARIO-actual.png` and `SCENARIO-diff.png` in the reported safe temporary directory. CI only validates committed baselines and never passes the generation flag. To intentionally refresh them locally, run the current checker with `--update-snapshots`, inspect all three images, and rerun without that flag.
|
|
49
49
|
|
|
50
|
-
The PR integration and npm-publish workflows read the companion repository and immutable revision pins from `ecosystem-compatibility.json`, then pack those coordinated reviewed artifacts.
|
|
50
|
+
The PR integration and npm-publish workflows read the companion repository and immutable revision pins from `ecosystem-compatibility.json`, then pack those coordinated reviewed artifacts. The current values identify the reviewed Interactive 1.7.3 and Layout 3.2.3 release commits. Do not replace them with dirty working-tree SHAs or mutable branches.
|
|
51
51
|
|
|
52
52
|
Use this exact bootstrap and merge sequence:
|
|
53
53
|
|
|
54
|
-
1.
|
|
55
|
-
2. Update and review the final UI companion pins against those immutable
|
|
54
|
+
1. Create and review stable Interactive Surface CSS and Layout Style CSS candidate commits.
|
|
55
|
+
2. Update and review the final UI companion pins against those immutable candidate commits, then verify both objects are remotely reachable.
|
|
56
56
|
3. Push the final UI branch, rerun its explicit UI-candidate ecosystem preflight, and merge UI with a merge commit.
|
|
57
57
|
4. Do not squash or rebase away reviewed release commits that remain part of the pinned verification history.
|
|
58
58
|
|
|
@@ -76,7 +76,7 @@ npm run check:ecosystem:packs -- --layout-repo ../Layout-Style-CSS --interactive
|
|
|
76
76
|
npm publish
|
|
77
77
|
```
|
|
78
78
|
|
|
79
|
-
`prepublishOnly` runs `npm run release:verify`, so a direct `npm publish` still has the default fast release gate. For GitHub releases, push or dispatch the matching package tag, such as `v2.
|
|
79
|
+
`prepublishOnly` runs `npm run release:verify`, so a direct `npm publish` still has the default fast release gate. For GitHub releases, push or dispatch the matching package tag, such as `v2.6.0`, only after the release PR is merged. The release workflows verify that `package.json`, `package-lock.json`, `CHANGELOG.md`, generated dist banners, and ecosystem pins are aligned before publishing. Dispatch the protected npm workflow from the current `main` workflow file when recovering publication for a release that has already passed Release Version Alignment.
|
|
80
80
|
|
|
81
81
|
The repository `NPM_TOKEN` secret must authenticate to npm as a user that appears in `npm owner ls ui-style-kit-css`. If the token belongs to another npm account or lacks package publish rights, npm may report a misleading registry `E404` at publish time.
|
|
82
82
|
|
|
@@ -88,4 +88,4 @@ npm run release:minor
|
|
|
88
88
|
npm run release:major
|
|
89
89
|
```
|
|
90
90
|
|
|
91
|
-
Use patch for compatible fixes, minor for new themes, presets, component capabilities, or browser-support contracts, and major for incompatible public API changes. Version `2.
|
|
91
|
+
Use patch for compatible fixes, minor for new themes, presets, component capabilities, or browser-support contracts, and major for incompatible public API changes. Version `2.6.0` is the current compatible candidate for self-contained preset delivery and the hardened semantic component API; future feature versioning continues to follow this policy.
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
# v2.4.2 release preparation
|
|
2
|
+
|
|
3
|
+
UI Style Kit CSS 2.4.2 is a backward-compatible release candidate focused on
|
|
4
|
+
consumer composition. It does not add a preset, theme, selector, component
|
|
5
|
+
variant, or package export.
|
|
6
|
+
|
|
7
|
+
## Candidate scope
|
|
8
|
+
|
|
9
|
+
- Preserve consumer-owned width, sticky-position, and internal-scroll rules
|
|
10
|
+
when the visual bundle loads after application CSS.
|
|
11
|
+
- Verify semantic cards at 320px and 390px with selects, ranges, progress,
|
|
12
|
+
wide tables, icon-only controls, and long content.
|
|
13
|
+
- Verify a short-height card keeps its toolbar sticky and its content region
|
|
14
|
+
internally scrollable.
|
|
15
|
+
- Verify representative icon-only actions retain neutral or subtle preset paint
|
|
16
|
+
and do not inherit the primary action treatment.
|
|
17
|
+
- Expand migration guidance for preset-prefixed hooks, preset-private tokens,
|
|
18
|
+
and legacy `variant-*` state classes.
|
|
19
|
+
|
|
20
|
+
## Ecosystem alignment
|
|
21
|
+
|
|
22
|
+
The coordinated local candidate train is `ui-style-kit-css@2.4.2`,
|
|
23
|
+
`interactive-surface-css@1.7.1`, and `layout-style-css@3.2.1`. The checked-in
|
|
24
|
+
companion revisions remain the last reviewed immutable release baselines until
|
|
25
|
+
the candidate packages have stable commits. They must be refreshed to those
|
|
26
|
+
commits before remote release workflows can treat the candidate train as
|
|
27
|
+
publishable.
|
|
28
|
+
|
|
29
|
+
The supported minimum remains `ui-style-kit-css@2.1.0`,
|
|
30
|
+
`interactive-surface-css@1.5.0`, and `layout-style-css@3.0.0`.
|
|
31
|
+
|
|
32
|
+
## Verification boundary
|
|
33
|
+
|
|
34
|
+
Local build, lint, unit, focused browser, package, and candidate-tarball checks
|
|
35
|
+
are evidence for preparation only. They do not prove a commit, pull request,
|
|
36
|
+
tag, registry publication, or deployed site. Those external mutations require
|
|
37
|
+
separate approval and immutable companion revisions.
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
# v2.5.0 release notes
|
|
2
|
+
|
|
3
|
+
UI Style Kit CSS 2.5.0 is a backward-compatible minor release that
|
|
4
|
+
expands the stable semantic component API from 29 to 75 selectors.
|
|
5
|
+
|
|
6
|
+
## Scope
|
|
7
|
+
|
|
8
|
+
- Tier A promotes tabs, pagination, breadcrumb, skeleton, empty state, metric,
|
|
9
|
+
chip, avatar, stepper, and toast patterns.
|
|
10
|
+
- Tier B promotes popover, menu, segmented-control, file-upload, dropzone, and
|
|
11
|
+
listbox patterns.
|
|
12
|
+
- Semantic chip and toast variants continue to use `data-ui-variant`.
|
|
13
|
+
- Skeleton shape and step workflow state use explicit, documented data hooks.
|
|
14
|
+
- Preset-prefixed classes remain supported for compatibility and advanced use.
|
|
15
|
+
|
|
16
|
+
Every stable `.ui-*` selector maps to a universal preset-prefixed source suffix.
|
|
17
|
+
The build emits specificity-safe aliases beneath the active `data-ui` root, and
|
|
18
|
+
the shared foundation resolves visual paint through that preset's native tokens.
|
|
19
|
+
React or application code continues to own selection, focus, dismissal, file
|
|
20
|
+
handling, and other behavior.
|
|
21
|
+
|
|
22
|
+
The reviewed companion release set is `interactive-surface-css@1.7.3` and
|
|
23
|
+
`layout-style-css@3.2.3`. The compatibility manifest pins their immutable
|
|
24
|
+
release commits so CI and publication cannot silently substitute branch heads,
|
|
25
|
+
dirty working trees, or stale registry artifacts.
|
|
26
|
+
|
|
27
|
+
## Verification boundary
|
|
28
|
+
|
|
29
|
+
Focused semantic source, generated alias, runtime-markup, artifact-integrity,
|
|
30
|
+
and pairwise identity checks are required before the full release gate. The
|
|
31
|
+
identity metric uses a one-percent perceptual threshold and viewport-specific
|
|
32
|
+
component floors so restrained preset palettes remain measurable without
|
|
33
|
+
pair-specific exceptions. Browser matrix, package preflight, registry
|
|
34
|
+
publication, tag creation, and deployment remain separate proofs.
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
# v2.6.0 release notes
|
|
2
|
+
|
|
3
|
+
UI Style Kit CSS 2.6.0 is a backward-compatible minor release that improves
|
|
4
|
+
component quality and makes every UI style available through a canonical,
|
|
5
|
+
self-contained preset import.
|
|
6
|
+
|
|
7
|
+
## Delivery contract
|
|
8
|
+
|
|
9
|
+
- Import `ui-style-kit-css` or `ui-style-kit-css/visual.css` when an application
|
|
10
|
+
needs all 20 styles and runtime `data-ui` switching.
|
|
11
|
+
- Import `ui-style-kit-css/presets/<name>.css` when an application needs one
|
|
12
|
+
style. Each generated preset file includes its shared foundations and contains
|
|
13
|
+
no unresolved CSS imports.
|
|
14
|
+
- Existing `visual/<name>.css`, raw preset, bridge, and v2 compatibility exports
|
|
15
|
+
remain available.
|
|
16
|
+
- Runtime selection continues to use `data-ui`; `data-theme` and `data-mode`
|
|
17
|
+
remain independent.
|
|
18
|
+
|
|
19
|
+
## Component and visual fixes
|
|
20
|
+
|
|
21
|
+
- Added clean spacing defaults plus explicit `.usk-flush` and `.usk-underline`; Technical Blueprint remains exempt so its measured, adjoining geometry is preserved
|
|
22
|
+
overrides.
|
|
23
|
+
- Kept decorative underlines opt-in while preserving semantic edit notation.
|
|
24
|
+
- Corrected reference-palette foreground and background pairs, including late
|
|
25
|
+
Bento and Clay contrast cases.
|
|
26
|
+
- Repaired semantic checkbox, radio, switch, avatar, chip, icon, and pagination
|
|
27
|
+
geometry without framework-specific CSS.
|
|
28
|
+
- Preserved preset-owned radius and clipped-corner identities through the
|
|
29
|
+
Interactive Surface bridge.
|
|
30
|
+
|
|
31
|
+
## Verification boundary
|
|
32
|
+
|
|
33
|
+
The release candidate requires focused public-export, manifest, package,
|
|
34
|
+
contrast, ownership, semantic-component, and browser checks before the final
|
|
35
|
+
release gate. Pull-request checks, the merge commit, GitHub Release, npm
|
|
36
|
+
publication, and registry availability are verified as separate stages.
|
package/docs/STYLE-GUIDE.md
CHANGED
|
@@ -32,6 +32,16 @@ without assigning a shared theme or changing geometry.
|
|
|
32
32
|
|
|
33
33
|
Use `data-mode="contrast"` for high-contrast variants and pair it with semantic HTML for best accessibility outcomes.
|
|
34
34
|
|
|
35
|
+
## Clean spacing and decoration defaults
|
|
36
|
+
|
|
37
|
+
Every element inside a themed UI root starts with a 2px margin and padding fallback unless a preset supplies a roomier value. Technical Blueprint is exempt because its measured drafting structures intentionally adjoin. Use `.usk-flush` (recommended) or `.flush` only for an intentionally edge-to-edge element in the remaining styles. Buttons and badges retain at least 2px of block padding and 4px of inline padding.
|
|
38
|
+
|
|
39
|
+
Links and component text are not underlined by default. Apply `.usk-underline` when an underline is deliberately part of the design. Semantic edit notation remains available through native `u`, `ins`, `del`, and `s` elements.
|
|
40
|
+
|
|
41
|
+
Semantic choice wrappers expose one visual affordance. Their native checkbox or radio remains focusable and form-associated, while `.usk-check-control`, `.usk-radio-control`, or `.usk-switch-track` owns the visible, vertically centered geometry. The wrapper supplies its own inset so the affordance never touches the painted edge. Do not reveal both surfaces with a local override.
|
|
42
|
+
|
|
43
|
+
Mark reusable SVG artwork with `data-ui-icon`. The library supplies `1em` square geometry, block alignment, and visible overflow so React, Vue, and plain-HTML consumers do not need framework-specific icon CSS. Nested chip remove controls remain 24px square with a 12px glyph. Use `data-pagination-kind="page"` for compact number controls and `data-pagination-kind="direction"` for the larger Previous and Next bookends.
|
|
44
|
+
|
|
35
45
|
## Preset identity and component roles
|
|
36
46
|
|
|
37
47
|
UI presets own geometry, material, spacing, depth, and typographic character. Color schemes own semantic color roles. A preset should therefore remain recognizable when its `data-theme` changes, while every component continues to consume the active theme tokens instead of fixed artwork colors.
|