@cyberskill/design 2.3.1 → 2.5.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/DESIGN.md +7 -7
- package/README.md +3 -3
- package/VERSION +1 -1
- package/_ds_bundle.js +2 -2
- package/_ds_bundle.js.map +1 -1
- package/_ds_manifest.json +15 -7
- package/_esm/cs.mjs +2 -2
- package/base/a11y.css +1 -1
- package/base/ai.css +3 -2
- package/base/collections.css +2 -2
- package/base/components.css +3 -3
- package/base/controls.css +19 -10
- package/base/data.css +2 -1
- package/base/feedback.css +5 -5
- package/base/glass.css +2 -2
- package/base/shell.css +2 -2
- package/base/typography.css +1 -0
- package/components/prompt-api.json +1 -1
- package/components/release-compatibility.json +1 -1
- package/components/specifications.json +1 -1
- package/components/static-html-reference.json +19 -19
- package/dist/esm/build.json +1 -1
- package/dist/styles.min.css +1 -1
- package/docs/consuming.md +1 -1
- package/docs/contrast-report.md +1 -1
- package/docs/conventions.md +1 -1
- package/docs/reference-catalog.json +19 -19
- package/docs/release-notes.md +1 -1
- package/docs/static-html-reference.md +18 -18
- package/docs/template-inventory.json +4 -4
- package/docs/vi/consuming.md +1 -1
- package/docs/vi/contrast-report.md +1 -1
- package/docs/vi/conventions.md +1 -1
- package/docs/vi/entrypoints/DESIGN.md +7 -7
- package/docs/vi/entrypoints/README.md +3 -3
- package/docs/vi/release-notes.md +1 -1
- package/docs/vi/static-html-reference.md +18 -18
- package/guidelines/documents.html +1 -1
- package/package.json +2 -1
- package/styles/components/manifest.json +132 -132
- package/styles.layered.css +17 -18
- package/styles.layered.provenance.json +11 -11
- package/templates/vn-appointment-transfer/VnAppointmentTransfer.dc.html +3 -3
- package/templates/vn-termination-decision/VnTerminationDecision.dc.html +3 -3
- package/tokens/declarations.json +29 -29
- package/tokens/element-seeds.json +1 -1
- package/tokens/modes/dark__default__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/dark__default__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/dark__default__compact__high.dtcg.json +1 -1
- package/tokens/modes/dark__default__compact__standard.dtcg.json +1 -1
- package/tokens/modes/dark__hoa-lava__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/dark__hoa-lava__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/dark__hoa-lava__compact__high.dtcg.json +1 -1
- package/tokens/modes/dark__hoa-lava__compact__standard.dtcg.json +1 -1
- package/tokens/modes/dark__hoa-plasma__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/dark__hoa-plasma__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/dark__hoa-plasma__compact__high.dtcg.json +1 -1
- package/tokens/modes/dark__hoa-plasma__compact__standard.dtcg.json +1 -1
- package/tokens/modes/dark__hoa__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/dark__hoa__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/dark__hoa__compact__high.dtcg.json +1 -1
- package/tokens/modes/dark__hoa__compact__standard.dtcg.json +1 -1
- package/tokens/modes/dark__kim-steel__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/dark__kim-steel__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/dark__kim-steel__compact__high.dtcg.json +1 -1
- package/tokens/modes/dark__kim-steel__compact__standard.dtcg.json +1 -1
- package/tokens/modes/dark__kim-titanium__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/dark__kim-titanium__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/dark__kim-titanium__compact__high.dtcg.json +1 -1
- package/tokens/modes/dark__kim-titanium__compact__standard.dtcg.json +1 -1
- package/tokens/modes/dark__kim__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/dark__kim__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/dark__kim__compact__high.dtcg.json +1 -1
- package/tokens/modes/dark__kim__compact__standard.dtcg.json +1 -1
- package/tokens/modes/dark__moc-bamboo__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/dark__moc-bamboo__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/dark__moc-bamboo__compact__high.dtcg.json +1 -1
- package/tokens/modes/dark__moc-bamboo__compact__standard.dtcg.json +1 -1
- package/tokens/modes/dark__moc-forest__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/dark__moc-forest__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/dark__moc-forest__compact__high.dtcg.json +1 -1
- package/tokens/modes/dark__moc-forest__compact__standard.dtcg.json +1 -1
- package/tokens/modes/dark__moc__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/dark__moc__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/dark__moc__compact__high.dtcg.json +1 -1
- package/tokens/modes/dark__moc__compact__standard.dtcg.json +1 -1
- package/tokens/modes/dark__tho-clay__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/dark__tho-clay__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/dark__tho-clay__compact__high.dtcg.json +1 -1
- package/tokens/modes/dark__tho-clay__compact__standard.dtcg.json +1 -1
- package/tokens/modes/dark__tho-sand__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/dark__tho-sand__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/dark__tho-sand__compact__high.dtcg.json +1 -1
- package/tokens/modes/dark__tho-sand__compact__standard.dtcg.json +1 -1
- package/tokens/modes/dark__tho__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/dark__tho__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/dark__tho__compact__high.dtcg.json +1 -1
- package/tokens/modes/dark__tho__compact__standard.dtcg.json +1 -1
- package/tokens/modes/dark__thuy-mist__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/dark__thuy-mist__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/dark__thuy-mist__compact__high.dtcg.json +1 -1
- package/tokens/modes/dark__thuy-mist__compact__standard.dtcg.json +1 -1
- package/tokens/modes/dark__thuy-ocean__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/dark__thuy-ocean__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/dark__thuy-ocean__compact__high.dtcg.json +1 -1
- package/tokens/modes/dark__thuy-ocean__compact__standard.dtcg.json +1 -1
- package/tokens/modes/dark__thuy__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/dark__thuy__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/dark__thuy__compact__high.dtcg.json +1 -1
- package/tokens/modes/dark__thuy__compact__standard.dtcg.json +1 -1
- package/tokens/modes/index.json +268 -268
- package/tokens/modes/light__default__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/light__default__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/light__default__compact__high.dtcg.json +1 -1
- package/tokens/modes/light__default__compact__standard.dtcg.json +1 -1
- package/tokens/modes/light__hoa-lava__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/light__hoa-lava__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/light__hoa-lava__compact__high.dtcg.json +1 -1
- package/tokens/modes/light__hoa-lava__compact__standard.dtcg.json +1 -1
- package/tokens/modes/light__hoa-plasma__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/light__hoa-plasma__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/light__hoa-plasma__compact__high.dtcg.json +1 -1
- package/tokens/modes/light__hoa-plasma__compact__standard.dtcg.json +1 -1
- package/tokens/modes/light__hoa__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/light__hoa__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/light__hoa__compact__high.dtcg.json +1 -1
- package/tokens/modes/light__hoa__compact__standard.dtcg.json +1 -1
- package/tokens/modes/light__kim-steel__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/light__kim-steel__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/light__kim-steel__compact__high.dtcg.json +1 -1
- package/tokens/modes/light__kim-steel__compact__standard.dtcg.json +1 -1
- package/tokens/modes/light__kim-titanium__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/light__kim-titanium__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/light__kim-titanium__compact__high.dtcg.json +1 -1
- package/tokens/modes/light__kim-titanium__compact__standard.dtcg.json +1 -1
- package/tokens/modes/light__kim__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/light__kim__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/light__kim__compact__high.dtcg.json +1 -1
- package/tokens/modes/light__kim__compact__standard.dtcg.json +1 -1
- package/tokens/modes/light__moc-bamboo__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/light__moc-bamboo__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/light__moc-bamboo__compact__high.dtcg.json +1 -1
- package/tokens/modes/light__moc-bamboo__compact__standard.dtcg.json +1 -1
- package/tokens/modes/light__moc-forest__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/light__moc-forest__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/light__moc-forest__compact__high.dtcg.json +1 -1
- package/tokens/modes/light__moc-forest__compact__standard.dtcg.json +1 -1
- package/tokens/modes/light__moc__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/light__moc__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/light__moc__compact__high.dtcg.json +1 -1
- package/tokens/modes/light__moc__compact__standard.dtcg.json +1 -1
- package/tokens/modes/light__tho-clay__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/light__tho-clay__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/light__tho-clay__compact__high.dtcg.json +1 -1
- package/tokens/modes/light__tho-clay__compact__standard.dtcg.json +1 -1
- package/tokens/modes/light__tho-sand__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/light__tho-sand__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/light__tho-sand__compact__high.dtcg.json +1 -1
- package/tokens/modes/light__tho-sand__compact__standard.dtcg.json +1 -1
- package/tokens/modes/light__tho__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/light__tho__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/light__tho__compact__high.dtcg.json +1 -1
- package/tokens/modes/light__tho__compact__standard.dtcg.json +1 -1
- package/tokens/modes/light__thuy-mist__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/light__thuy-mist__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/light__thuy-mist__compact__high.dtcg.json +1 -1
- package/tokens/modes/light__thuy-mist__compact__standard.dtcg.json +1 -1
- package/tokens/modes/light__thuy-ocean__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/light__thuy-ocean__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/light__thuy-ocean__compact__high.dtcg.json +1 -1
- package/tokens/modes/light__thuy-ocean__compact__standard.dtcg.json +1 -1
- package/tokens/modes/light__thuy__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/light__thuy__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/light__thuy__compact__high.dtcg.json +1 -1
- package/tokens/modes/light__thuy__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__default__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__default__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__default__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__default__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__hoa-lava__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__hoa-lava__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__hoa-lava__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__hoa-lava__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__hoa-plasma__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__hoa-plasma__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__hoa-plasma__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__hoa-plasma__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__hoa__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__hoa__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__hoa__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__hoa__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__kim-steel__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__kim-steel__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__kim-steel__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__kim-steel__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__kim-titanium__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__kim-titanium__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__kim-titanium__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__kim-titanium__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__kim__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__kim__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__kim__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__kim__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__moc-bamboo__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__moc-bamboo__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__moc-bamboo__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__moc-bamboo__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__moc-forest__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__moc-forest__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__moc-forest__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__moc-forest__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__moc__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__moc__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__moc__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__moc__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__tho-clay__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__tho-clay__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__tho-clay__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__tho-clay__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__tho-sand__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__tho-sand__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__tho-sand__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__tho-sand__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__tho__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__tho__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__tho__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__tho__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__thuy-mist__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__thuy-mist__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__thuy-mist__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__thuy-mist__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__thuy-ocean__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__thuy-ocean__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__thuy-ocean__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__thuy-ocean__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__thuy__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__thuy__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-dark__thuy__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-dark__thuy__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__default__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-light__default__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__default__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-light__default__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__hoa-lava__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-light__hoa-lava__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__hoa-lava__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-light__hoa-lava__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__hoa-plasma__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-light__hoa-plasma__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__hoa-plasma__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-light__hoa-plasma__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__hoa__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-light__hoa__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__hoa__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-light__hoa__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__kim-steel__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-light__kim-steel__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__kim-steel__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-light__kim-steel__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__kim-titanium__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-light__kim-titanium__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__kim-titanium__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-light__kim-titanium__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__kim__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-light__kim__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__kim__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-light__kim__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__moc-bamboo__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-light__moc-bamboo__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__moc-bamboo__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-light__moc-bamboo__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__moc-forest__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-light__moc-forest__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__moc-forest__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-light__moc-forest__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__moc__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-light__moc__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__moc__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-light__moc__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__tho-clay__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-light__tho-clay__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__tho-clay__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-light__tho-clay__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__tho-sand__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-light__tho-sand__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__tho-sand__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-light__tho-sand__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__tho__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-light__tho__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__tho__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-light__tho__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__thuy-mist__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-light__thuy-mist__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__thuy-mist__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-light__thuy-mist__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__thuy-ocean__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-light__thuy-ocean__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__thuy-ocean__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-light__thuy-ocean__compact__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__thuy__comfortable__high.dtcg.json +1 -1
- package/tokens/modes/system-light__thuy__comfortable__standard.dtcg.json +1 -1
- package/tokens/modes/system-light__thuy__compact__high.dtcg.json +1 -1
- package/tokens/modes/system-light__thuy__compact__standard.dtcg.json +1 -1
- package/tokens/native/CSModes.kt +3 -3
- package/tokens/native/CSModes.swift +3 -3
- package/tokens/native/CSTokens.kt +1 -1
- package/tokens/native/CSTokens.swift +1 -1
- package/tokens/native/cs_modes.dart +3 -3
- package/tokens/native/cs_tokens.dart +1 -1
- package/tokens/native/mode-provenance.json +6 -6
- package/tokens/provenance.json +6 -6
- package/tokens/tokens.dtcg.json +2 -2
- package/tokens/tokens.js +3 -3
- package/tokens/tokens.json +2 -2
- package/tokens/variables.css +2 -2
- package/ui_kits/deck/index.html +1 -1
package/_ds_manifest.json
CHANGED
|
@@ -5750,7 +5750,7 @@
|
|
|
5750
5750
|
"scope": ".cs-display-face",
|
|
5751
5751
|
"important": false,
|
|
5752
5752
|
"declarationOrder": 1050,
|
|
5753
|
-
"sourceLine":
|
|
5753
|
+
"sourceLine": 25
|
|
5754
5754
|
},
|
|
5755
5755
|
{
|
|
5756
5756
|
"name": "--cs-term-border",
|
|
@@ -5760,7 +5760,7 @@
|
|
|
5760
5760
|
"scope": ".cs-terminal",
|
|
5761
5761
|
"important": false,
|
|
5762
5762
|
"declarationOrder": 1053,
|
|
5763
|
-
"sourceLine":
|
|
5763
|
+
"sourceLine": 355
|
|
5764
5764
|
},
|
|
5765
5765
|
{
|
|
5766
5766
|
"name": "--cs-term-bar",
|
|
@@ -5770,7 +5770,7 @@
|
|
|
5770
5770
|
"scope": ".cs-terminal",
|
|
5771
5771
|
"important": false,
|
|
5772
5772
|
"declarationOrder": 1054,
|
|
5773
|
-
"sourceLine":
|
|
5773
|
+
"sourceLine": 356
|
|
5774
5774
|
},
|
|
5775
5775
|
{
|
|
5776
5776
|
"name": "--cs-term-dot",
|
|
@@ -5780,7 +5780,7 @@
|
|
|
5780
5780
|
"scope": ".cs-terminal",
|
|
5781
5781
|
"important": false,
|
|
5782
5782
|
"declarationOrder": 1055,
|
|
5783
|
-
"sourceLine":
|
|
5783
|
+
"sourceLine": 357
|
|
5784
5784
|
},
|
|
5785
5785
|
{
|
|
5786
5786
|
"name": "--cs-term-bg",
|
|
@@ -5790,7 +5790,7 @@
|
|
|
5790
5790
|
"scope": ".cs-terminal",
|
|
5791
5791
|
"important": false,
|
|
5792
5792
|
"declarationOrder": 1056,
|
|
5793
|
-
"sourceLine":
|
|
5793
|
+
"sourceLine": 358
|
|
5794
5794
|
},
|
|
5795
5795
|
{
|
|
5796
5796
|
"name": "--cs-term-fg",
|
|
@@ -5800,7 +5800,7 @@
|
|
|
5800
5800
|
"scope": ".cs-terminal",
|
|
5801
5801
|
"important": false,
|
|
5802
5802
|
"declarationOrder": 1057,
|
|
5803
|
-
"sourceLine":
|
|
5803
|
+
"sourceLine": 359
|
|
5804
5804
|
},
|
|
5805
5805
|
{
|
|
5806
5806
|
"name": "--cs-term-muted",
|
|
@@ -5810,7 +5810,7 @@
|
|
|
5810
5810
|
"scope": ".cs-terminal",
|
|
5811
5811
|
"important": false,
|
|
5812
5812
|
"declarationOrder": 1058,
|
|
5813
|
-
"sourceLine":
|
|
5813
|
+
"sourceLine": 360
|
|
5814
5814
|
},
|
|
5815
5815
|
{
|
|
5816
5816
|
"name": "--cs-code-bg",
|
|
@@ -5857,6 +5857,7 @@
|
|
|
5857
5857
|
"value": "color-mix(in oklab, var(--cs-color-surface-page, #fffdf8) var(--cs-glass-whisper-opacity, 60%), transparent)",
|
|
5858
5858
|
"kind": "css-expression",
|
|
5859
5859
|
"definedIn": "base/glass.css",
|
|
5860
|
+
"scope": ":root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast]",
|
|
5860
5861
|
"important": false,
|
|
5861
5862
|
"declarationOrder": 1066,
|
|
5862
5863
|
"sourceLine": 15
|
|
@@ -5866,6 +5867,7 @@
|
|
|
5866
5867
|
"value": "transparent",
|
|
5867
5868
|
"kind": "css-expression",
|
|
5868
5869
|
"definedIn": "base/glass.css",
|
|
5870
|
+
"scope": ":root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast]",
|
|
5869
5871
|
"important": false,
|
|
5870
5872
|
"declarationOrder": 1067,
|
|
5871
5873
|
"sourceLine": 16
|
|
@@ -5875,6 +5877,7 @@
|
|
|
5875
5877
|
"value": "color-mix(in oklab, var(--cs-color-surface-panel, #fff) var(--cs-glass-light-opacity, 70%), transparent)",
|
|
5876
5878
|
"kind": "css-expression",
|
|
5877
5879
|
"definedIn": "base/glass.css",
|
|
5880
|
+
"scope": ":root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast]",
|
|
5878
5881
|
"important": false,
|
|
5879
5882
|
"declarationOrder": 1068,
|
|
5880
5883
|
"sourceLine": 17
|
|
@@ -5884,6 +5887,7 @@
|
|
|
5884
5887
|
"value": "color-mix(in oklab, var(--cs-color-border-default, #e7d9c6) 50%, transparent)",
|
|
5885
5888
|
"kind": "css-expression",
|
|
5886
5889
|
"definedIn": "base/glass.css",
|
|
5890
|
+
"scope": ":root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast]",
|
|
5887
5891
|
"important": false,
|
|
5888
5892
|
"declarationOrder": 1069,
|
|
5889
5893
|
"sourceLine": 18
|
|
@@ -5893,6 +5897,7 @@
|
|
|
5893
5897
|
"value": "color-mix(in oklab, var(--cs-color-surface-panel, #fff) var(--cs-glass-standard-opacity, 80%), transparent)",
|
|
5894
5898
|
"kind": "css-expression",
|
|
5895
5899
|
"definedIn": "base/glass.css",
|
|
5900
|
+
"scope": ":root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast]",
|
|
5896
5901
|
"important": false,
|
|
5897
5902
|
"declarationOrder": 1070,
|
|
5898
5903
|
"sourceLine": 19
|
|
@@ -5902,6 +5907,7 @@
|
|
|
5902
5907
|
"value": "color-mix(in oklab, var(--cs-color-border-default, #e7d9c6) 60%, transparent)",
|
|
5903
5908
|
"kind": "css-expression",
|
|
5904
5909
|
"definedIn": "base/glass.css",
|
|
5910
|
+
"scope": ":root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast]",
|
|
5905
5911
|
"important": false,
|
|
5906
5912
|
"declarationOrder": 1071,
|
|
5907
5913
|
"sourceLine": 20
|
|
@@ -5911,6 +5917,7 @@
|
|
|
5911
5917
|
"value": "color-mix(in oklab, var(--cs-color-surface-raised, #fbf4e9) var(--cs-glass-heavy-opacity, 90%), transparent)",
|
|
5912
5918
|
"kind": "css-expression",
|
|
5913
5919
|
"definedIn": "base/glass.css",
|
|
5920
|
+
"scope": ":root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast]",
|
|
5914
5921
|
"important": false,
|
|
5915
5922
|
"declarationOrder": 1072,
|
|
5916
5923
|
"sourceLine": 21
|
|
@@ -5920,6 +5927,7 @@
|
|
|
5920
5927
|
"value": "color-mix(in oklab, var(--cs-color-border-default, #e7d9c6) 80%, transparent)",
|
|
5921
5928
|
"kind": "css-expression",
|
|
5922
5929
|
"definedIn": "base/glass.css",
|
|
5930
|
+
"scope": ":root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast]",
|
|
5923
5931
|
"important": false,
|
|
5924
5932
|
"declarationOrder": 1073,
|
|
5925
5933
|
"sourceLine": 22
|
package/_esm/cs.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
// CyberSkill Design System — ESM entry point (GENERATED by scripts/generate-export-catalog.mjs at v2.
|
|
1
|
+
// CyberSkill Design System — ESM entry point (GENERATED by scripts/generate-export-catalog.mjs at v2.5.0).
|
|
2
2
|
// No build step: import this module directly in a browser. It loads the pinned umd-react@19.2.8
|
|
3
3
|
// distribution; its retained React and ReactDOM files report runtime version 19.2.4.
|
|
4
4
|
// (official React 19 dropped UMD; pinned + SRI; skipped when window.React already exists), side-loads
|
|
@@ -33,7 +33,7 @@ if (!found()) await ensureScript("../_ds_bundle.js");
|
|
|
33
33
|
export const CS = g[found()];
|
|
34
34
|
if (!CS) throw new Error("cs.js: bundle loaded but no CyberSkillDesignSystem_* namespace found");
|
|
35
35
|
export default CS;
|
|
36
|
-
export const VERSION = "2.
|
|
36
|
+
export const VERSION = "2.5.0";
|
|
37
37
|
export const AIDisclosureBadge = CS.AIDisclosureBadge;
|
|
38
38
|
export const Accordion = CS.Accordion;
|
|
39
39
|
export const Alert = CS.Alert;
|
package/base/a11y.css
CHANGED
|
@@ -111,7 +111,7 @@
|
|
|
111
111
|
background: radial-gradient(circle, var(--cs-color-border-default) 4.5px, transparent 5px);
|
|
112
112
|
}
|
|
113
113
|
.cs-carousel__dots button[aria-current="true"] {
|
|
114
|
-
background: radial-gradient(circle, var(--cs-accent) 4.5px, transparent 5px);
|
|
114
|
+
background: radial-gradient(circle, var(--cs-color-text-accent) 4.5px, transparent 5px);
|
|
115
115
|
}
|
|
116
116
|
.cs-carousel__dots button::before { content: none; }
|
|
117
117
|
/* The container's two 1px borders must not clip a short requested divider. */
|
package/base/ai.css
CHANGED
|
@@ -4,6 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
/* PromptInput */
|
|
6
6
|
.cs-prompt { border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); background: var(--cs-color-surface-panel); padding: 10px 12px; display: grid; gap: 8px; }
|
|
7
|
+
.cs-prompt.is-invalid, .is-invalid .cs-prompt, .cs-prompt[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
|
|
7
8
|
.cs-prompt:focus-within {
|
|
8
9
|
border-color: var(--cs-color-text-primary);
|
|
9
10
|
outline: 2px solid var(--cs-color-text-primary);
|
|
@@ -22,14 +23,14 @@
|
|
|
22
23
|
.cs-chat-msg--user { flex-direction: row-reverse; }
|
|
23
24
|
.cs-chat-msg__avatar { flex: none; inline-size: 32px; block-size: 32px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; }
|
|
24
25
|
.cs-chat-msg--lumi .cs-chat-msg__avatar { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); }
|
|
25
|
-
.cs-chat-msg--user .cs-chat-msg__avatar { background: var(--cs-color-brand-umber); color: #fff; /* on-brand-umber ink */ font-weight: 700; font-size: var(--cs-font-size-sm); font-family: var(--cs-font-family-ui); }
|
|
26
|
+
.cs-chat-msg--user .cs-chat-msg__avatar { background: var(--cs-color-brand-umber); color: #fff; /* on-brand-umber ink */ font-weight: 700; font-size: var(--cs-font-size-sm); font-family: var(--cs-font-family-ui); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cs-color-border-default) 32%, transparent); }
|
|
26
27
|
.cs-chat-msg__avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
|
|
27
28
|
.cs-chat-msg__col { display: grid; gap: 3px; max-inline-size: 80%; }
|
|
28
29
|
.cs-chat-msg--user .cs-chat-msg__col { justify-items: end; }
|
|
29
30
|
.cs-chat-msg__name { font-size: var(--cs-font-size-xs); font-weight: 700; color: var(--cs-color-text-muted); }
|
|
30
31
|
.cs-chat-msg__bubble { padding: 10px 14px; border-radius: 14px; font-size: var(--cs-font-size-sm); line-height: var(--cs-font-lineHeight-body); }
|
|
31
32
|
.cs-chat-msg--lumi .cs-chat-msg__bubble { background: var(--cs-color-surface-raised); border: 1px solid var(--cs-color-border-default); border-end-start-radius: 4px; color: var(--cs-color-text-primary); }
|
|
32
|
-
.cs-chat-msg--user .cs-chat-msg__bubble { background: var(--cs-color-brand-umber); color: #fff; /* on-brand-umber ink */ border-end-end-radius: 4px; }
|
|
33
|
+
.cs-chat-msg--user .cs-chat-msg__bubble { background: var(--cs-color-brand-umber); color: #fff; /* on-brand-umber ink */ border-end-end-radius: 4px; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cs-color-border-default) 32%, transparent); }
|
|
33
34
|
|
|
34
35
|
/* ConfidenceMeter */
|
|
35
36
|
.cs-confidence { display: grid; gap: 6px; font-family: var(--cs-font-family-ui); }
|
package/base/collections.css
CHANGED
|
@@ -27,7 +27,7 @@ button.cs-item--interactive { border: 1px solid transparent; background: var(--c
|
|
|
27
27
|
.cs-item--interactive:hover { background: var(--cs-color-surface-raised); border-color: var(--cs-color-border-default); }
|
|
28
28
|
}
|
|
29
29
|
.cs-item--interactive:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
|
|
30
|
-
.cs-item.is-selected { border-color: var(--cs-accent); background: var(--cs-accent
|
|
30
|
+
.cs-item.is-selected { border-color: var(--cs-color-text-accent); background: color-mix(in oklab, var(--cs-accent) 18%, var(--cs-color-surface-panel)); }
|
|
31
31
|
.cs-item.is-disabled, .cs-item[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
|
|
32
32
|
/* Static Item text remains information, rather than an inactive control. */
|
|
33
33
|
div.cs-item.is-disabled { opacity: 1; }
|
|
@@ -47,7 +47,7 @@ div.cs-item.is-disabled { opacity: 1; }
|
|
|
47
47
|
.cs-timeline__item { display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding-block-end: var(--cs-space-5); position: relative; }
|
|
48
48
|
.cs-timeline__item:not(:last-child)::before { content: ""; position: absolute; inset-block: 26px 0; inset-inline-start: 12px; inline-size: 2px; background: var(--cs-color-border-default); }
|
|
49
49
|
.cs-timeline__marker { inline-size: 26px; block-size: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--cs-color-semantic-success); color: var(--cs-color-semantic-success-fg, #fff); font-size: var(--cs-font-size-xs); font-weight: 700; z-index: 1; }
|
|
50
|
-
.cs-timeline__item--now .cs-timeline__marker { background: var(--cs-accent-bright); color: var(--cs-color-brand-umber); }
|
|
50
|
+
.cs-timeline__item--now .cs-timeline__marker { background: var(--cs-accent-bright); color: var(--cs-color-brand-umber); box-shadow: inset 0 0 0 2px var(--cs-accent-strong); }
|
|
51
51
|
.cs-timeline__item--todo .cs-timeline__marker { background: var(--cs-color-surface-raised); color: var(--cs-color-text-muted); border: 1px solid var(--cs-color-border-default); }
|
|
52
52
|
.cs-timeline__title { font-weight: 700; margin: 2px 0 2px; }
|
|
53
53
|
.cs-timeline__meta { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); font-family: var(--cs-font-family-mono); }
|
package/base/components.css
CHANGED
|
@@ -91,8 +91,8 @@
|
|
|
91
91
|
.cs-button--full { inline-size: 100%; }
|
|
92
92
|
|
|
93
93
|
.cs-button.is-disabled,
|
|
94
|
-
.cs-button.is-loading,
|
|
95
94
|
.cs-field.is-disabled { opacity: 0.58; cursor: not-allowed; }
|
|
95
|
+
.cs-button.is-loading { opacity: 0.88; cursor: progress; }
|
|
96
96
|
|
|
97
97
|
.cs-button__spinner {
|
|
98
98
|
inline-size: 1em; block-size: 1em; border-radius: 999px;
|
|
@@ -124,7 +124,7 @@
|
|
|
124
124
|
padding-inline: var(--cs-component-textfield-paddingX, 12px);
|
|
125
125
|
}
|
|
126
126
|
.cs-field__control::placeholder { color: var(--cs-color-text-muted, #3f2d21); opacity: 0.7; }
|
|
127
|
-
.cs-field.is-invalid .cs-field__control { border-color: var(--cs-color-semantic-danger, #b42318); }
|
|
127
|
+
.cs-field.is-invalid .cs-field__control, .cs-field__control.is-invalid, .cs-field__control[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger, #b42318); }
|
|
128
128
|
.cs-field__error { color: var(--cs-color-semantic-danger-text, #4b0502); font-size: 0.875rem; }
|
|
129
129
|
|
|
130
130
|
/* ---- Dialog ---- */
|
|
@@ -132,7 +132,7 @@
|
|
|
132
132
|
.cs-dialog__overlay { background: var(--cs-color-surface-scrim, var(--_cs-surface-scrim)); inset: 0; position: absolute; }
|
|
133
133
|
.cs-dialog {
|
|
134
134
|
background: var(--cs-color-surface-panel, #ffffff);
|
|
135
|
-
border-radius: var(--cs-radius-
|
|
135
|
+
border-radius: var(--cs-radius-lg, 14px);
|
|
136
136
|
box-shadow: var(--cs-shadow-xl, 0 24px 80px rgba(31, 19, 11, 0.26));
|
|
137
137
|
color: var(--cs-color-text-primary, #45210e);
|
|
138
138
|
left: 0;
|
package/base/controls.css
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
/* SearchField */
|
|
4
4
|
.cs-search { display: flex; align-items: center; gap: var(--cs-space-2); border: 1px solid var(--cs-component-textfield-border-default); border-radius: var(--cs-radius-full); padding: 0 14px; min-height: 44px; background: var(--cs-color-surface-panel); }
|
|
5
|
+
.cs-search.is-invalid, .is-invalid .cs-search, .cs-search[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
|
|
5
6
|
.cs-search:focus-within {
|
|
6
7
|
border-color: var(--cs-color-text-primary);
|
|
7
8
|
outline: 2px solid var(--cs-color-text-primary);
|
|
@@ -16,6 +17,7 @@
|
|
|
16
17
|
|
|
17
18
|
/* NumberField / stepper */
|
|
18
19
|
.cs-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--cs-component-textfield-border-default); border-radius: var(--cs-radius-md); overflow: hidden; background: var(--cs-color-surface-panel); }
|
|
20
|
+
.cs-stepper.is-invalid, .is-invalid .cs-stepper, .cs-stepper[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
|
|
19
21
|
.cs-stepper:focus-within {
|
|
20
22
|
border-color: var(--cs-color-text-primary);
|
|
21
23
|
outline: 2px solid var(--cs-color-text-primary);
|
|
@@ -65,11 +67,12 @@
|
|
|
65
67
|
.cs-toggle:disabled { opacity: .5; cursor: not-allowed; }
|
|
66
68
|
.cs-rating { display: inline-flex; gap: 4px; }
|
|
67
69
|
.cs-rating button { background: none; border: 0; padding: 2px; cursor: pointer; color: var(--cs-color-border-default); display: grid; place-items: center; }
|
|
68
|
-
.cs-rating button.on { color: var(--cs-accent); }
|
|
70
|
+
.cs-rating button.on { color: var(--cs-color-text-accent); }
|
|
69
71
|
.cs-rating[data-readonly="true"] button { cursor: default; }
|
|
70
72
|
.cs-rating button:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; border-radius: 4px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
|
|
71
73
|
.cs-otp { display: inline-flex; gap: 8px; }
|
|
72
74
|
.cs-otp input { inline-size: 44px; block-size: 52px; text-align: center; font: 700 22px var(--cs-font-family-mono); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); }
|
|
75
|
+
.cs-otp.is-invalid input, .is-invalid .cs-otp input, .cs-otp input.is-invalid, .cs-otp input[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
|
|
73
76
|
.cs-otp input:focus { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; border-color: var(--cs-accent); box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
|
|
74
77
|
.cs-otp input:disabled { opacity: .5; cursor: not-allowed; background: var(--cs-color-surface-raised); }
|
|
75
78
|
.cs-btngroup { display: inline-flex; }
|
|
@@ -81,6 +84,7 @@
|
|
|
81
84
|
/* ---- v3 Batch 2 part 2 (Jul 2026): Combobox · InputGroup · TagInput ---- */
|
|
82
85
|
.cs-combobox { position: relative; display: inline-block; min-inline-size: 260px; }
|
|
83
86
|
.cs-combobox input { inline-size: 100%; box-sizing: border-box; font: 500 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 10px 34px 10px var(--cs-space-3); min-block-size: 44px; }
|
|
87
|
+
.is-invalid .cs-combobox input, .cs-combobox.is-invalid input, .cs-combobox input.is-invalid, .cs-combobox[aria-invalid="true"] input, .cs-combobox input[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger, #b42318); }
|
|
84
88
|
.cs-combobox input:focus { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
|
|
85
89
|
.cs-combobox__caret { position: absolute; inset-inline-end: 10px; inset-block-start: 50%; translate: 0 -50%; pointer-events: none; color: var(--cs-color-text-muted); }
|
|
86
90
|
.cs-combobox__popup { color: var(--cs-color-text-primary); position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-inline: 0; inset-block-start: calc(100% + 6px); max-block-size: 240px; overflow: auto; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 6px; margin: 0; }
|
|
@@ -89,6 +93,7 @@
|
|
|
89
93
|
.cs-combobox__opt[aria-selected="true"], .cs-combobox__opt.hl { background: var(--_cs-light, var(--cs-accent-tint))var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel))); color: var(--_cs-light, var(--cs-color-text-primary))var(--_cs-dark, var(--cs-accent-bright)); }
|
|
90
94
|
.cs-combobox__empty { padding: 10px; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); }
|
|
91
95
|
.cs-igroup { display: inline-flex; align-items: stretch; min-inline-size: 260px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); overflow: hidden; }
|
|
96
|
+
.cs-igroup.is-invalid, .is-invalid .cs-igroup, .cs-igroup[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
|
|
92
97
|
.cs-igroup:focus-within { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
|
|
93
98
|
.cs-igroup > input { flex: 1; min-inline-size: 0; border: 0; background: transparent; color: var(--cs-color-text-primary); font: 500 14px var(--cs-font-family-ui); padding: 10px 12px; min-block-size: 44px; box-sizing: border-box; }
|
|
94
99
|
.cs-igroup > input:focus { outline: none; }
|
|
@@ -97,6 +102,7 @@
|
|
|
97
102
|
.cs-igroup__btn { border: 0; background: none; color: var(--cs-color-text-muted); cursor: pointer; display: grid; place-items: center; padding: 0 10px; }
|
|
98
103
|
.cs-igroup__btn:hover { color: var(--cs-color-text-primary); }
|
|
99
104
|
.cs-taginput { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-inline-size: 280px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 6px var(--cs-space-2); min-block-size: 44px; box-sizing: border-box; }
|
|
105
|
+
.cs-taginput.is-invalid, .is-invalid .cs-taginput, .cs-taginput[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
|
|
100
106
|
.cs-taginput:focus-within { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
|
|
101
107
|
.cs-taginput > input { flex: 1; min-inline-size: 120px; border: 0; background: transparent; color: var(--cs-color-text-primary); font: 500 14px var(--cs-font-family-ui); padding: 6px var(--cs-space-1); }
|
|
102
108
|
.cs-taginput > input:focus { outline: none; }
|
|
@@ -113,16 +119,18 @@
|
|
|
113
119
|
.cs-cal__wd span { text-align: center; font: 700 10.5px/2 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .04em; color: var(--cs-color-text-muted); }
|
|
114
120
|
.cs-cal__grid button { border: 0; background: none; color: var(--cs-color-text-primary); font: 500 13px var(--cs-font-family-ui); block-size: 34px; border-radius: var(--cs-radius-sm); cursor: pointer; }
|
|
115
121
|
.cs-cal__grid button:hover { background: var(--cs-color-surface-raised); }
|
|
116
|
-
.cs-cal__grid button.today { box-shadow: inset 0 0 0 1px var(--cs-accent); }
|
|
117
|
-
.cs-cal__grid button.sel { background: var(--cs-accent-bright); color: var(--cs-color-brand-umber); font-weight: 700; }
|
|
122
|
+
.cs-cal__grid button.today { box-shadow: inset 0 0 0 1px var(--cs-color-text-accent); }
|
|
123
|
+
.cs-cal__grid button.sel { background: var(--cs-accent-bright); color: var(--cs-color-brand-umber); font-weight: 700; box-shadow: inset 0 0 0 2px var(--cs-accent-strong); }
|
|
118
124
|
.cs-cal__grid button:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
|
|
119
125
|
.cs-datepicker { position: relative; display: inline-block; max-inline-size: 100%; }
|
|
120
126
|
.cs-datepicker__field { display: inline-flex; align-items: center; gap: var(--cs-space-2); min-inline-size: 220px; min-block-size: 44px; font: 500 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: var(--cs-space-2) var(--cs-space-3); cursor: pointer; }
|
|
127
|
+
.cs-datepicker.is-invalid .cs-datepicker__field, .is-invalid .cs-datepicker__field, .cs-datepicker__field.is-invalid, .cs-datepicker__field[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
|
|
121
128
|
.cs-datepicker__field:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
|
|
122
129
|
.cs-datepicker__field .ph { color: var(--cs-color-text-muted); }
|
|
123
130
|
.cs-datepicker__pop { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 6px); inset-inline-start: var(--_cs-panel-inline-offset, 0px); inline-size: max-content; max-inline-size: var(--_cs-panel-max-inline-size, calc(100vw - 16px)); }
|
|
124
131
|
.cs-datepicker__pop .cs-cal { min-inline-size: 0; max-inline-size: 100%; box-sizing: border-box; overflow-x: auto; }
|
|
125
132
|
.cs-timepicker { display: inline-flex; align-items: center; gap: 8px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 0 10px; min-block-size: 44px; color: var(--cs-color-text-muted); }
|
|
133
|
+
.cs-timepicker.is-invalid, .is-invalid .cs-timepicker, .cs-timepicker[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
|
|
126
134
|
.cs-timepicker:focus-within { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
|
|
127
135
|
.cs-timepicker select { border: 0; background: transparent; color: var(--cs-color-text-primary); font: 600 14px var(--cs-font-family-mono); padding: 8px 2px; cursor: pointer; }
|
|
128
136
|
.cs-timepicker select:focus { outline: none; }
|
|
@@ -137,14 +145,14 @@
|
|
|
137
145
|
.cs-ctxmenu-zone { position: relative; }
|
|
138
146
|
.cs-fab { position: fixed; inset-inline-end: 24px; inset-block-end: 24px; z-index: var(--cs-depth-overlay, 80); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
|
|
139
147
|
.cs-fab--static { position: static; align-items: flex-start; }
|
|
140
|
-
.cs-fab__main { inline-size: 56px; block-size: 56px; border-radius: 999px; border: 0; background: var(--cs-accent-bright); color: var(--cs-color-brand-umber); display: grid; place-items: center; cursor: pointer; box-shadow: var(--cs-shadow-lg); }
|
|
148
|
+
.cs-fab__main { inline-size: 56px; block-size: 56px; border-radius: 999px; border: 0; background: var(--cs-accent-bright); color: var(--cs-color-brand-umber); display: grid; place-items: center; cursor: pointer; box-shadow: inset 0 0 0 2px var(--cs-accent-strong), var(--cs-shadow-lg); }
|
|
141
149
|
.cs-fab__main:hover { filter: brightness(1.05); }
|
|
142
150
|
.cs-fab__main:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre), var(--cs-shadow-md); }
|
|
143
151
|
.cs-fab__dial { display: flex; flex-direction: column; gap: 8px; align-items: center; }
|
|
144
152
|
.cs-fab--static .cs-fab__dial, .cs-fab__dial--static { flex-direction: row; }
|
|
145
153
|
.cs-fab__mini { inline-size: 42px; block-size: 42px; border-radius: 999px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); display: grid; place-items: center; cursor: pointer; box-shadow: var(--cs-shadow-sm); }
|
|
146
154
|
.cs-result { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 44px 24px; }
|
|
147
|
-
.cs-result__icon { inline-size: 64px; block-size: 64px; border-radius: 999px; display: grid; place-items: center; background: var(--cs-accent-
|
|
155
|
+
.cs-result__icon { inline-size: 64px; block-size: 64px; border-radius: 999px; display: grid; place-items: center; background: color-mix(in oklab, var(--cs-accent) 18%, var(--cs-color-surface-panel)); color: var(--cs-color-text-accent); }
|
|
148
156
|
.cs-result--success .cs-result__icon { background: color-mix(in oklab, var(--cs-color-semantic-success) 14%, var(--cs-color-surface-panel)); color: var(--cs-color-semantic-success-text); }
|
|
149
157
|
.cs-result--error .cs-result__icon { background: color-mix(in oklab, var(--cs-color-semantic-danger) 12%, var(--cs-color-surface-panel)); color: var(--cs-color-semantic-danger-text); }
|
|
150
158
|
.cs-result--warning .cs-result__icon { background: color-mix(in oklab, var(--cs-color-semantic-warning) 14%, var(--cs-color-surface-panel)); color: var(--cs-color-semantic-warning-text); }
|
|
@@ -198,7 +206,7 @@
|
|
|
198
206
|
.cs-navmenu__top:hover, .cs-navmenu__top.is-open { background: var(--cs-color-surface-raised); }
|
|
199
207
|
.cs-navmenu__panel { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-inline-start: var(--_cs-panel-inline-offset, 0px); inline-size: 468px; max-inline-size: var(--_cs-panel-max-inline-size, calc(100vw - 16px)); box-sizing: border-box; inset-block-start: calc(100% + 8px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-md); padding: 10px; }
|
|
200
208
|
.cs-navmenu__card { min-inline-size: 0; overflow-wrap: anywhere; display: grid; gap: 3px; padding: 10px 12px; border-radius: var(--cs-radius-md); text-decoration: none; color: var(--cs-color-text-primary); }
|
|
201
|
-
.cs-navmenu__card:hover { background: var(--cs-accent-
|
|
209
|
+
.cs-navmenu__card:hover { background: color-mix(in oklab, var(--cs-accent) 18%, var(--cs-color-surface-panel)); }
|
|
202
210
|
.cs-navmenu__card b { font-size: var(--cs-font-size-sm); }
|
|
203
211
|
.cs-navmenu__card small { color: var(--cs-color-text-muted); font-size: var(--cs-font-size-xs); line-height: 1.45; }
|
|
204
212
|
.cs-carousel { display: grid; gap: 10px; }
|
|
@@ -214,7 +222,7 @@
|
|
|
214
222
|
.cs-carousel__dots { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
|
|
215
223
|
.cs-carousel__dots button { inline-size: 24px; block-size: 24px; flex: 0 0 24px; border-radius: 999px; border: 0; background: none; cursor: pointer; padding: 0; position: relative; }
|
|
216
224
|
.cs-carousel__dots button::before { content: ""; position: absolute; inset: 0; margin: auto; inline-size: 9px; block-size: 9px; border-radius: inherit; background: var(--cs-color-border-default); pointer-events: none; }
|
|
217
|
-
.cs-carousel__dots button[aria-current="true"]::before { background: var(--cs-accent); }
|
|
225
|
+
.cs-carousel__dots button[aria-current="true"]::before { background: var(--cs-color-text-accent); }
|
|
218
226
|
@media (prefers-reduced-motion: reduce) { .cs-carousel__track { transition: none; } }
|
|
219
227
|
.cs-comment { display: flex; gap: 10px; }
|
|
220
228
|
.cs-comment__main { flex: 1; min-inline-size: 0; }
|
|
@@ -241,7 +249,7 @@
|
|
|
241
249
|
.cs-formfield__label em { color: var(--cs-color-semantic-danger-text); font-style: normal; }
|
|
242
250
|
.cs-formfield__hint { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); }
|
|
243
251
|
.cs-formfield__error { font-size: var(--cs-font-size-xs); color: var(--cs-color-semantic-danger-text); font-weight: 600; }
|
|
244
|
-
.cs-formfield.has-error input, .cs-formfield.has-error textarea, .cs-formfield.has-error select { border-color: var(--cs-color-semantic-danger); }
|
|
252
|
+
.cs-formfield.has-error input, .cs-formfield.has-error textarea, .cs-formfield.has-error select, .cs-formfield.is-invalid input, .cs-formfield.is-invalid textarea, .cs-formfield.is-invalid select, .cs-formfield input[aria-invalid="true"], .cs-formfield textarea[aria-invalid="true"], .cs-formfield select[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
|
|
245
253
|
.cs-tree { list-style: none; margin: 0; padding: 0; font-size: var(--cs-font-size-sm); }
|
|
246
254
|
.cs-tree ul { list-style: none; margin: 0; padding: 0; }
|
|
247
255
|
.cs-tree__row { display: flex; align-items: center; gap: 2px; border-radius: var(--cs-radius-sm); }
|
|
@@ -256,6 +264,7 @@
|
|
|
256
264
|
/* ---- v3 Batch 6b (Jul 2026): TreeSelect · Cascader · Transfer · Mentions ---- */
|
|
257
265
|
.cs-treeselect, .cs-cascader { position: relative; display: inline-block; min-inline-size: 240px; }
|
|
258
266
|
.cs-treeselect__field { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; inline-size: 100%; min-block-size: 44px; font: 500 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 8px 12px; cursor: pointer; box-sizing: border-box; }
|
|
267
|
+
.cs-treeselect.is-invalid .cs-treeselect__field, .cs-cascader.is-invalid .cs-treeselect__field, .is-invalid .cs-treeselect__field, .cs-treeselect__field.is-invalid, .cs-treeselect__field[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
|
|
259
268
|
.cs-treeselect__field:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
|
|
260
269
|
.cs-treeselect__field .ph { color: var(--cs-color-text-muted); }
|
|
261
270
|
.cs-treeselect__pop, .cs-cascader__pop { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 6px); inset-inline-start: 0; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 8px; min-inline-size: 100%; }
|
|
@@ -302,7 +311,7 @@
|
|
|
302
311
|
.cs-splitter { display: flex; align-items: stretch; border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); overflow: hidden; background: var(--cs-color-surface-panel); }
|
|
303
312
|
.cs-splitter__pane { overflow: auto; padding: 14px; min-inline-size: 0; }
|
|
304
313
|
.cs-splitter__bar { inline-size: 8px; cursor: col-resize; background: var(--cs-color-surface-raised); border-inline: 1px solid var(--cs-color-border-default); touch-action: none; }
|
|
305
|
-
.cs-splitter__bar:hover { background: var(--cs-accent-
|
|
314
|
+
.cs-splitter__bar:hover { background: color-mix(in oklab, var(--cs-accent) 18%, var(--cs-color-surface-panel)); }
|
|
306
315
|
.cs-splitter__bar:focus-visible { background: var(--cs-color-surface-raised); outline: 2px solid var(--cs-color-text-primary); outline-offset: -2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
|
|
307
316
|
.cs-hotkeys__sheet { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 100); background: var(--cs-color-surface-scrim, var(--_cs-surface-scrim)); display: grid; place-items: center; }
|
|
308
317
|
.cs-hotkeys__card { background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-xl); padding: 18px 20px; min-inline-size: 300px; }
|
|
@@ -311,7 +320,7 @@
|
|
|
311
320
|
.cs-hotkeys__card li { display: flex; justify-content: space-between; gap: 20px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); }
|
|
312
321
|
.cs-dock { display: inline-flex; align-items: flex-end; gap: 8px; background: color-mix(in oklab, var(--cs-color-surface-panel) 82%, transparent); border: 1px solid var(--cs-color-border-default); border-radius: 18px; padding: 8px 12px; backdrop-filter: blur(10px); }
|
|
313
322
|
.cs-dock__item { inline-size: 44px; block-size: 44px; border-radius: 12px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); display: grid; place-items: center; cursor: pointer; transition: transform var(--cs-duration-fast, 120ms); position: relative; }
|
|
314
|
-
.cs-dock__item.is-active::after { content: ""; position: absolute; inset-block-end: -6px; inline-size: 4px; block-size: 4px; border-radius: 999px; background: var(--cs-accent); }
|
|
323
|
+
.cs-dock__item.is-active::after { content: ""; position: absolute; inset-block-end: -6px; inline-size: 4px; block-size: 4px; border-radius: 999px; background: var(--cs-color-text-accent); }
|
|
315
324
|
@media (prefers-reduced-motion: reduce) { .cs-dock__item { transition: none; } }
|
|
316
325
|
|
|
317
326
|
/* ---- v3 Batch 7b (Jul 2026): DataGrid · TreeTable · Sortable ---- */
|
package/base/data.css
CHANGED
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
.cs-stat { display: grid; gap: 3px; }
|
|
24
24
|
.cs-stat__label { font-size: var(--cs-font-size-xs); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-muted); }
|
|
25
25
|
.cs-stat__value { font-size: var(--cs-font-size-3xl); font-weight: 800; line-height: 1.1; letter-spacing: var(--cs-letter-spacing-tight); font-variant-numeric: tabular-nums; }
|
|
26
|
+
.cs-stat__value:lang(vi) { line-height: 1.22; }
|
|
26
27
|
.cs-stat__delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--cs-font-size-sm); font-weight: 700; }
|
|
27
28
|
.cs-stat__delta--up { color: var(--cs-color-semantic-success-text); }
|
|
28
29
|
.cs-stat__delta--down { color: var(--cs-color-semantic-danger-text); }
|
|
@@ -41,7 +42,7 @@
|
|
|
41
42
|
|
|
42
43
|
/* Tooltip */
|
|
43
44
|
.cs-tooltip { position: relative; display: inline-flex; }
|
|
44
|
-
.cs-tooltip__bubble { position: absolute; inset-block-end: calc(100% + 8px); inset-inline-start: 50%; transform: translateX(-50%) translateY(4px); background: var(--cs-color-brand-umber); color: #fff; /* on-brand-umber ink */ font-size: var(--cs-font-size-xs); font-weight: 600; line-height: 1.35; padding: 6px 10px; border-radius: var(--cs-radius-sm); white-space:
|
|
45
|
+
.cs-tooltip__bubble { position: absolute; inset-block-end: calc(100% + 8px); inset-inline-start: 50%; transform: translateX(-50%) translateY(4px); background: var(--cs-color-brand-umber); color: #fff; /* on-brand-umber ink */ font-size: var(--cs-font-size-xs); font-weight: 600; line-height: 1.35; padding: 6px 10px; border-radius: var(--cs-radius-sm); white-space: normal; inline-size: max-content; max-inline-size: 240px; overflow-wrap: break-word; opacity: 0; pointer-events: none; transition: opacity var(--cs-duration-fast) var(--cs-ease-standard), transform var(--cs-duration-fast) var(--cs-ease-standard); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cs-color-border-default) 32%, transparent), var(--cs-shadow-md); z-index: var(--cs-depth-dropdown, 60); }
|
|
45
46
|
.cs-tooltip__bubble::after { content: ""; position: absolute; inset-block-start: 100%; inset-inline-start: 50%; transform: translateX(-50%); border: 5px solid transparent; border-block-start-color: var(--cs-color-brand-umber); }
|
|
46
47
|
.cs-tooltip:not([data-managed]):hover .cs-tooltip__bubble, .cs-tooltip:not([data-managed]):focus-within .cs-tooltip__bubble, .cs-tooltip[data-open="true"] .cs-tooltip__bubble { opacity: 1; transform: translateX(-50%) translateY(0); }
|
|
47
48
|
|
package/base/feedback.css
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/* CyberSkill — feedback + status (.cs-*). Semantic colour never the only signal. */
|
|
2
2
|
|
|
3
3
|
/* Badge — compact status label */
|
|
4
|
-
.cs-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-xs); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; padding:
|
|
5
|
-
.cs-badge--solid { border-color: transparent; color: #fff; /* on-brand-umber ink (allowlisted; text-inverse flips in dark) */ background: var(--cs-color-brand-umber); }
|
|
4
|
+
.cs-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-xs); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; padding: 3px 9px; border-radius: var(--cs-radius-full); text-transform: uppercase; letter-spacing: 0.04em; background: var(--cs-color-surface-raised); color: var(--cs-color-text-accent); border: 1px solid var(--cs-color-border-default); }
|
|
5
|
+
.cs-badge--solid { border-color: transparent; color: #fff; /* on-brand-umber ink (allowlisted; text-inverse flips in dark) */ background: var(--cs-color-brand-umber); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cs-color-border-default) 32%, transparent); }
|
|
6
6
|
.cs-badge--ochre { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); border-color: transparent; }
|
|
7
7
|
[data-cs-element]:not([data-cs-element="tho"]:not([data-cs-variant]), [data-cs-element="tho"][data-cs-variant=""]) .cs-badge--solid { background: var(--cs-accent-strong); color: var(--cs-accent-on-strong); }
|
|
8
8
|
[data-cs-element]:not([data-cs-element="tho"]:not([data-cs-variant]), [data-cs-element="tho"][data-cs-variant=""]) .cs-badge--ochre { background: var(--cs-accent-tint); color: var(--cs-color-text-accent); border-color: color-mix(in oklab, var(--cs-accent) 55%, transparent); }
|
|
@@ -56,9 +56,9 @@
|
|
|
56
56
|
|
|
57
57
|
/* Progress bar */
|
|
58
58
|
.cs-progress { inline-size: 100%; block-size: 10px; border-radius: var(--cs-radius-full); background: var(--cs-color-surface-raised); overflow: hidden; }
|
|
59
|
-
.cs-progress__fill { display: block; block-size: 100%; border-radius: inherit; background: var(--cs-accent); transition: inline-size var(--cs-duration-slow) var(--cs-ease-standard); }
|
|
60
|
-
.cs-progress--umber .cs-progress__fill { background: var(--cs-color-brand-umber); }
|
|
61
|
-
.cs-progress--success .cs-progress__fill { background: var(--cs-color-semantic-success); }
|
|
59
|
+
.cs-progress__fill { display: block; block-size: 100%; border-radius: inherit; background: var(--cs-accent); box-shadow: inset 0 0 0 1px var(--cs-color-text-accent); transition: inline-size var(--cs-duration-slow) var(--cs-ease-standard); }
|
|
60
|
+
.cs-progress--umber .cs-progress__fill { background: var(--cs-color-brand-umber); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cs-color-border-default) 32%, transparent); }
|
|
61
|
+
.cs-progress--success .cs-progress__fill { background: var(--cs-color-semantic-success); box-shadow: none; }
|
|
62
62
|
|
|
63
63
|
/* Skeleton */
|
|
64
64
|
.cs-skeleton { display: block; border-radius: var(--cs-radius-sm); background: linear-gradient(90deg, var(--cs-color-surface-raised) 25%, color-mix(in oklab, var(--cs-color-surface-raised) 55%, var(--cs-color-surface-panel)) 37%, var(--cs-color-surface-raised) 63%); background-size: 400% 100%; animation: cs-shimmer 1.4s ease infinite; }
|
package/base/glass.css
CHANGED
|
@@ -8,10 +8,10 @@
|
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
10
|
/* ---- 1. Composition from token scalars ---- */
|
|
11
|
-
:root {
|
|
11
|
+
:root, [data-theme], [data-cs-element], [data-element], [data-cs-contrast] {
|
|
12
12
|
--_cs-border-subtle: color-mix(in oklab, var(--cs-color-border-default, #e7d9c6) 76%, transparent);
|
|
13
13
|
--_cs-border-strong: color-mix(in oklab, var(--cs-color-border-default, #e7d9c6) 65%, var(--cs-color-text-primary, #45210e));
|
|
14
|
-
--_cs-surface-scrim: color-mix(in oklab, var(--cs-color-
|
|
14
|
+
--_cs-surface-scrim: color-mix(in oklab, color-mix(in oklab, var(--cs-color-surface-page, #fffdf8) 25%, #050403) 68%, transparent); /* light: umber-led veil · dark: near-black veil so modals dim dark surfaces (v2.4.0 audit D2) */
|
|
15
15
|
--cs-glass-whisper-bg: color-mix(in oklab, var(--cs-color-surface-page, #fffdf8) var(--cs-glass-whisper-opacity, 60%), transparent);
|
|
16
16
|
--cs-glass-whisper-border: transparent;
|
|
17
17
|
--cs-glass-light-bg: color-mix(in oklab, var(--cs-color-surface-panel, #fff) var(--cs-glass-light-opacity, 70%), transparent);
|
package/base/shell.css
CHANGED
|
@@ -16,8 +16,8 @@
|
|
|
16
16
|
.cs-step:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 13px; inset-inline-start: 34px; inline-size: calc(100% - 46px); block-size: 2px; background: var(--cs-color-border-default); }
|
|
17
17
|
.cs-step__marker { inline-size: 28px; block-size: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--cs-font-family-mono); font-weight: 700; font-size: var(--cs-font-size-sm); background: var(--cs-color-surface-raised); color: var(--cs-color-text-muted); border: 1px solid var(--cs-color-border-default); z-index: 1; }
|
|
18
18
|
.cs-step--done .cs-step__marker { background: var(--cs-accent-strong); color: var(--cs-accent-on-strong); border-color: transparent; }
|
|
19
|
-
.cs-step--done:not(:last-child)::after { background: var(--cs-accent
|
|
20
|
-
.cs-step--active .cs-step__marker { background: var(--cs-accent-bright); color: var(--cs-color-brand-umber); border-color: transparent; box-shadow: 0 0 0 4px color-mix(in oklab, var(--cs-accent) 28%, transparent); }
|
|
19
|
+
.cs-step--done:not(:last-child)::after { background: var(--cs-color-text-accent); }
|
|
20
|
+
.cs-step--active .cs-step__marker { background: var(--cs-accent-bright); color: var(--cs-color-brand-umber); border-color: transparent; box-shadow: inset 0 0 0 2px var(--cs-accent-strong), 0 0 0 4px color-mix(in oklab, var(--cs-accent) 28%, transparent); }
|
|
21
21
|
.cs-step__title { font-weight: 700; font-size: var(--cs-font-size-sm); }
|
|
22
22
|
.cs-step__body { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); }
|
|
23
23
|
|
package/base/typography.css
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
* Built on the semantic aliases in tokens/typography.css. */
|
|
4
4
|
.cs-display { font-family: var(--cs-heading-family); font-size: var(--cs-text-display); line-height: var(--cs-font-lineHeight-tight); font-weight: var(--cs-heading-weight-strong); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; overflow-wrap: break-word; }
|
|
5
5
|
.cs-display--fluid { font-family: var(--cs-heading-family); font-size: clamp(2.25rem, 1.5rem + 3.5vw, var(--cs-text-display)); line-height: var(--cs-font-lineHeight-tight); font-weight: var(--cs-heading-weight-strong); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; overflow-wrap: break-word; }
|
|
6
|
+
:is(.cs-display, .cs-display--fluid):lang(vi) { line-height: 1.22; } /* element's own language: EN display inside a VI page keeps 1.15 */
|
|
6
7
|
.cs-h1 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h1); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight-strong); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; overflow-wrap: break-word; }
|
|
7
8
|
.cs-h1--fluid { font-family: var(--cs-heading-family); font-size: clamp(1.75rem, 1.25rem + 2vw, var(--cs-text-h1)); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight-strong); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; overflow-wrap: break-word; }
|
|
8
9
|
.cs-h2 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h2); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; overflow-wrap: break-word; }
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"sourceHashes": {
|
|
5
5
|
"components/api-index.json": "468afbb6e09f78a1be6fe2b2b06bbd6ea30f4fa06abb835c191eb6490082854a",
|
|
6
6
|
"components/contracts.json": "e4ebe085e32dc639dea36cb032155c6aa557e61411bec7fa800691dd61a2ce03",
|
|
7
|
-
"_ds_manifest.json": "
|
|
7
|
+
"_ds_manifest.json": "8f7b007bfb71572e3846ba9540fce7f104ea146a476100723c62c4b7a42e8a0e",
|
|
8
8
|
"scripts/generate-component-contracts.mjs": "a94d0d58b3d0b6f629bf2cdc2a53bdfc8b43b8fa1479434b770f0cd8dc53187c",
|
|
9
9
|
"scripts/lib/component-export.mjs": "9f6fd3df4a9e0366fef8c384a0926e050bd8fbcb3887bf5e6ffaed5c0622cd15",
|
|
10
10
|
"scripts/generate-prompt-api.mjs": "e67709ad813a46330d2825912334244050422c16f05021890cc6b41b73acd602"
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"sourceHashes": {
|
|
6
6
|
"_audit/a11y-gate.html": "68c798ba1261c5bca4da7eefd67a045ba3048711a5f8a9fe9d35eacb4e8b06da",
|
|
7
7
|
"_audit/component-behavior-test.html": "5d1a1dafba237dcec4144e2dd0059f7fdce54306d9b42bc7af09030d11fbcb5b",
|
|
8
|
-
"_ds_manifest.json": "
|
|
8
|
+
"_ds_manifest.json": "8f7b007bfb71572e3846ba9540fce7f104ea146a476100723c62c4b7a42e8a0e",
|
|
9
9
|
"components/_i18n/i18n.js": "ea69f4f438162cf0e9770d529ec3b9f1107183885c71aa83f2ceff3763a34d2f",
|
|
10
10
|
"components/_i18n/strings.js": "ffedd19ed9eacd22223e1387ab7eedca5cb385182d9a4ada469ef2711a0bae73",
|
|
11
11
|
"components/_utils/cx.js": "ad6a747ea116bb2521a5cfa094580d2259d841ac9965d10310e83e8e839bab42",
|