diff --git a/core/states.css b/core/states.css
index 4b9814c9..c4320a03 100644
--- a/core/states.css
+++ b/core/states.css
@@ -143,37 +143,37 @@
.is-valid {
--sf-field-border-color: var(--sf-color-success);
- --sf-field-text-color: var(--sf-status-success-text);
+ --sf-field-text-color: var(--sf-color-success-strong);
}
.is-invalid {
--sf-field-border-color: var(--sf-color-error);
- --sf-field-text-color: var(--sf-status-error-text);
+ --sf-field-text-color: var(--sf-color-error-strong);
}
.is-warning {
--sf-field-border-color: var(--sf-color-warning);
- --sf-field-text-color: var(--sf-status-warning-text);
+ --sf-field-text-color: var(--sf-color-warning-strong);
}
.is-success {
--sf-field-border-color: var(--sf-color-success);
- --sf-field-text-color: var(--sf-status-success-text);
+ --sf-field-text-color: var(--sf-color-success-strong);
}
.is-error {
--sf-field-border-color: var(--sf-color-error);
- --sf-field-text-color: var(--sf-status-error-text);
+ --sf-field-text-color: var(--sf-color-error-strong);
}
.is-info {
--sf-field-border-color: var(--sf-color-info);
- --sf-field-text-color: var(--sf-status-info-text);
+ --sf-field-text-color: var(--sf-color-info-strong);
}
.is-danger {
--sf-field-border-color: var(--sf-color-danger);
- --sf-field-text-color: var(--sf-status-danger-text);
+ --sf-field-text-color: var(--sf-color-danger-strong);
}
/* ============================================================
diff --git a/core/tokens.css b/core/tokens.css
index 1e640d5d..3abee89a 100644
--- a/core/tokens.css
+++ b/core/tokens.css
@@ -234,40 +234,40 @@
error = form validation, input errors
danger = destructive actions (delete, remove)
---------------------------------------------------------- */
- --sf-status-success-bg: oklch(from var(--sf-color-success) l c h / 0.12);
- --sf-status-success-text: light-dark(
+ --sf-color-success-subtle: oklch(from var(--sf-color-success) l c h / 0.12);
+ --sf-color-success-strong: light-dark(
oklch(from var(--sf-color-success-light) calc(l - 0.15) c h),
oklch(from var(--sf-color-success-dark) clamp(0.70, calc(l + 0.15), 1) c h)
);
- --sf-status-success-border: oklch(from var(--sf-color-success) l c h / 0.3);
+ --sf-color-success-muted: oklch(from var(--sf-color-success) l c h / 0.3);
- --sf-status-warning-bg: oklch(from var(--sf-color-warning) l c h / 0.12);
- --sf-status-warning-text: light-dark(
+ --sf-color-warning-subtle: oklch(from var(--sf-color-warning) l c h / 0.12);
+ --sf-color-warning-strong: light-dark(
oklch(from var(--sf-color-warning-light) calc(l - 0.25) c h),
oklch(from var(--sf-color-warning-dark) clamp(0.70, calc(l + 0.05), 1) c h)
);
- --sf-status-warning-border: oklch(from var(--sf-color-warning) l c h / 0.3);
+ --sf-color-warning-muted: oklch(from var(--sf-color-warning) l c h / 0.3);
- --sf-status-error-bg: oklch(from var(--sf-color-error) l c h / 0.1);
- --sf-status-error-text: light-dark(
+ --sf-color-error-subtle: oklch(from var(--sf-color-error) l c h / 0.1);
+ --sf-color-error-strong: light-dark(
oklch(from var(--sf-color-error-light) calc(l - 0.1) c h),
oklch(from var(--sf-color-error-dark) clamp(0.70, calc(l + 0.15), 1) c h)
);
- --sf-status-error-border: oklch(from var(--sf-color-error) l c h / 0.3);
+ --sf-color-error-muted: oklch(from var(--sf-color-error) l c h / 0.3);
- --sf-status-info-bg: oklch(from var(--sf-color-info) l c h / 0.1);
- --sf-status-info-text: light-dark(
+ --sf-color-info-subtle: oklch(from var(--sf-color-info) l c h / 0.1);
+ --sf-color-info-strong: light-dark(
oklch(from var(--sf-color-info-light) calc(l - 0.1) c h),
oklch(from var(--sf-color-info-dark) clamp(0.70, calc(l + 0.15), 1) c h)
);
- --sf-status-info-border: oklch(from var(--sf-color-info) l c h / 0.3);
+ --sf-color-info-muted: oklch(from var(--sf-color-info) l c h / 0.3);
- --sf-status-danger-bg: oklch(from var(--sf-color-danger) l c h / 0.1);
- --sf-status-danger-text: light-dark(
+ --sf-color-danger-subtle: oklch(from var(--sf-color-danger) l c h / 0.1);
+ --sf-color-danger-strong: light-dark(
oklch(from var(--sf-color-danger-light) calc(l - 0.1) c h),
oklch(from var(--sf-color-danger-dark) clamp(0.70, calc(l + 0.15), 1) c h)
);
- --sf-status-danger-border: oklch(from var(--sf-color-danger) l c h / 0.3);
+ --sf-color-danger-muted: oklch(from var(--sf-color-danger) l c h / 0.3);
/* ----------------------------------------------------------
diff --git a/dist/slashed.essential.css b/dist/slashed.essential.css
index afbcc4b6..d3f61a09 100644
--- a/dist/slashed.essential.css
+++ b/dist/slashed.essential.css
@@ -21,8 +21,33 @@
slashed.overrides;
/* ─── core/tokens.css ─── */
-/* SLASHED — core/tokens.css
- @layer slashed.tokens */
+/* ============================================================
+ SLASHED — core/tokens.css
+ @layer slashed.tokens
+
+ ARCHITEKTURA — 3 warstwy:
+ 1. @property source tokens — animowalne, 11 par (6 brand + 5 status) do nadpisania przy themowaniu
+ 2. Resolved semantic tokens — light-dark() auto-switch bez JS
+ 3. Derived tokens — relative color syntax (auto-kontrast, odcienie)
+
+ THEMOWANIE — nadpisz źródłowe pary -light/-dark (6 brand + 5 status):
+ :root {
+ --sf-color-primary-light: oklch(0.45 0.20 264);
+ --sf-color-primary-dark: oklch(0.70 0.15 264);
+ }
+ Wszystkie pochodne tokeny dostosują się automatycznie.
+
+ BEM CONSUMER API — większość tokenów jest celowo nieużywana przez
+ framework. Tokeny takie jak --sf-shadow-*, --sf-blur-*, --sf-gap,
+ --sf-gradient-* itd. są przeznaczone do użycia w autorskich klasach BEM:
+ .card { box-shadow: var(--sf-shadow-m); gap: var(--sf-gap); }
+ Brak użycia wewnątrz frameworka NIE oznacza martwego kodu.
+
+ RELACJA Z tokens.layout.css — aliasy spacing w sekcji "Spacing aliases"
+ są source of truth dla --sf-space-gap i --sf-space-content w
+ tokens.layout.css. Nadpisując --sf-gap zmieniasz gapy we wszystkich
+ layout primitives (cluster, grid, sidebar itd.).
+ ============================================================ */
@layer slashed.tokens {
@@ -183,10 +208,7 @@
oklch(from var(--sf-color-neutral-dark) clamp(0.38, calc(l - 0.1), 0.65) 0.02 h)
);
--sf-color-border--focus: var(--sf-color-action);
- --sf-color-border--disabled: light-dark(
- oklch(from var(--sf-color-neutral-light) clamp(0.70, calc(l + 0.35), 0.95) 0.005 h),
- oklch(from var(--sf-color-neutral-dark) clamp(0.25, calc(l - 0.3), 0.55) 0.005 h)
- );
+ --sf-color-border--disabled: oklch(from var(--sf-color-border--subtle) l 0 h / 0.5);
--sf-color-border--translucent: oklch(from var(--sf-color-neutral) l c h / 0.15);
@@ -198,6 +220,7 @@
--sf-color-link--active: oklch(from var(--sf-color-action) calc(l + 0.15) c h);
--sf-color-link--visited: oklch(from var(--sf-color-action) l c calc(h + 40));
--sf-color-link--underline: oklch(from var(--sf-color-action) l c h / 0.3);
+ --sf-color-link--disabled: var(--sf-color-text--disabled);
/* ----------------------------------------------------------
@@ -216,47 +239,58 @@
---------------------------------------------------------- */
--sf-color-selection-bg: oklch(from var(--sf-color-action) l c h / 0.22);
--sf-color-selection-text: inherit;
+ --sf-color-mark-bg: oklch(from var(--sf-color-warning) l c h / 0.25);
+ --sf-color-mark-text: inherit;
--sf-color-dim: oklch(0 0 0 / 0.5);
+ /* ----------------------------------------------------------
+ Scrollbar
+ ---------------------------------------------------------- */
+ --sf-scrollbar-thumb: var(--sf-color-neutral);
+ --sf-scrollbar-track: transparent;
+
+
/* ----------------------------------------------------------
Status triplets — bg/border use same formula both modes;
text is direction-dependent so uses source tokens.
+ error = form validation, input errors
+ danger = destructive actions (delete, remove)
---------------------------------------------------------- */
- --sf-status-success-bg: oklch(from var(--sf-color-success) l c h / 0.12);
- --sf-status-success-text: light-dark(
+ --sf-color-success-subtle: oklch(from var(--sf-color-success) l c h / 0.12);
+ --sf-color-success-strong: light-dark(
oklch(from var(--sf-color-success-light) calc(l - 0.15) c h),
oklch(from var(--sf-color-success-dark) clamp(0.70, calc(l + 0.15), 1) c h)
);
- --sf-status-success-border: oklch(from var(--sf-color-success) l c h / 0.3);
+ --sf-color-success-muted: oklch(from var(--sf-color-success) l c h / 0.3);
- --sf-status-warning-bg: oklch(from var(--sf-color-warning) l c h / 0.12);
- --sf-status-warning-text: light-dark(
+ --sf-color-warning-subtle: oklch(from var(--sf-color-warning) l c h / 0.12);
+ --sf-color-warning-strong: light-dark(
oklch(from var(--sf-color-warning-light) calc(l - 0.25) c h),
oklch(from var(--sf-color-warning-dark) clamp(0.70, calc(l + 0.05), 1) c h)
);
- --sf-status-warning-border: oklch(from var(--sf-color-warning) l c h / 0.3);
+ --sf-color-warning-muted: oklch(from var(--sf-color-warning) l c h / 0.3);
- --sf-status-error-bg: oklch(from var(--sf-color-error) l c h / 0.1);
- --sf-status-error-text: light-dark(
+ --sf-color-error-subtle: oklch(from var(--sf-color-error) l c h / 0.1);
+ --sf-color-error-strong: light-dark(
oklch(from var(--sf-color-error-light) calc(l - 0.1) c h),
oklch(from var(--sf-color-error-dark) clamp(0.70, calc(l + 0.15), 1) c h)
);
- --sf-status-error-border: oklch(from var(--sf-color-error) l c h / 0.3);
+ --sf-color-error-muted: oklch(from var(--sf-color-error) l c h / 0.3);
- --sf-status-info-bg: oklch(from var(--sf-color-info) l c h / 0.1);
- --sf-status-info-text: light-dark(
+ --sf-color-info-subtle: oklch(from var(--sf-color-info) l c h / 0.1);
+ --sf-color-info-strong: light-dark(
oklch(from var(--sf-color-info-light) calc(l - 0.1) c h),
oklch(from var(--sf-color-info-dark) clamp(0.70, calc(l + 0.15), 1) c h)
);
- --sf-status-info-border: oklch(from var(--sf-color-info) l c h / 0.3);
+ --sf-color-info-muted: oklch(from var(--sf-color-info) l c h / 0.3);
- --sf-status-danger-bg: oklch(from var(--sf-color-danger) l c h / 0.1);
- --sf-status-danger-text: light-dark(
+ --sf-color-danger-subtle: oklch(from var(--sf-color-danger) l c h / 0.1);
+ --sf-color-danger-strong: light-dark(
oklch(from var(--sf-color-danger-light) calc(l - 0.1) c h),
oklch(from var(--sf-color-danger-dark) clamp(0.70, calc(l + 0.15), 1) c h)
);
- --sf-status-danger-border: oklch(from var(--sf-color-danger) l c h / 0.3);
+ --sf-color-danger-muted: oklch(from var(--sf-color-danger) l c h / 0.3);
/* ----------------------------------------------------------
@@ -449,9 +483,10 @@
/* ----------------------------------------------------------
- Shadows
+ Shadows — BEM consumer API
+ Używaj w autorskich klasach: .card { box-shadow: var(--sf-shadow-m); }
---------------------------------------------------------- */
- --sf-shadow-color: 220 40% 2%;
+ --sf-shadow-color: 220 40% 2%; /* WIP: surowe wartości HSL do integracji z definicjami cieni */
--sf-shadow-none: none;
--sf-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / calc(var(--sf-shadow-strength) * 0.5));
@@ -491,6 +526,7 @@
/* ----------------------------------------------------------
Motion & easing
---------------------------------------------------------- */
+ --sf-duration-none: 0ms;
--sf-duration-instant: calc(100ms * var(--sf-motion-scale));
--sf-duration-fast: calc(150ms * var(--sf-motion-scale));
--sf-duration-normal: calc(250ms * var(--sf-motion-scale));
@@ -604,13 +640,16 @@
/* ----------------------------------------------------------
- Spacing aliases
+ Spacing aliases — BEM consumer API
+ Używaj w autorskich klasach BEM: .nav { gap: var(--sf-gap); }
+ Source of truth dla tokens.layout.css:
+ --sf-space-gap → var(--sf-gap) (wszystkie layout primitives)
+ --sf-space-content → var(--sf-content-gap) (stack, prose)
---------------------------------------------------------- */
- --sf-gap: var(--sf-space-m);
- --sf-content-gap: var(--sf-space-s);
- --sf-component-pad: var(--sf-space-m);
- --sf-field-block: var(--sf-space-l);
- --sf-prose-paragraph: var(--sf-space-m);
+ --sf-gap: var(--sf-space-m); /* odstęp między elementami BEM */
+ --sf-content-gap: var(--sf-space-s); /* rytm wewnątrz komponentu */
+ --sf-component-pad: var(--sf-space-m); /* standardowy padding komponentu */
+ --sf-field-block: var(--sf-space-l); /* blokowy odstęp pola formularza */
/* ----------------------------------------------------------
@@ -642,6 +681,16 @@
Load before: core/layout.css
Layer: slashed.tokens
Prefix: --sf-
+
+ ZALEŻNOŚCI — wymaga tokens.css (załadowanego wcześniej).
+ Aliasy spacing dziedziczą z BEM consumer API w tokens.css:
+ --sf-space-gap → var(--sf-gap) z tokens.css
+ --sf-space-content → var(--sf-content-gap) z tokens.css
+ Nadpisz --sf-gap lub --sf-content-gap żeby zmienić gapy
+ we wszystkich layout primitives jednocześnie.
+
+ Każdy layout primitive (cluster, grid, sidebar…) ma własne
+ tokeny (--sf-cluster-gap itd.) do lokalnego nadpisania.
============================================================ */
@layer slashed.tokens {
@@ -650,8 +699,8 @@
/* ----------------------------------------------------------
Shared spacing aliases
---------------------------------------------------------- */
- --sf-space-gap: var(--sf-space-m); /* component-level gap */
- --sf-space-content: var(--sf-space-s); /* within-component rhythm */
+ --sf-space-gap: var(--sf-gap); /* component-level gap */
+ --sf-space-content: var(--sf-content-gap); /* within-component rhythm */
/* ----------------------------------------------------------
Stack
@@ -1048,7 +1097,7 @@
}
::backdrop {
- background-color: var(--sf-color-backdrop, var(--sf-color-dim));
+ background-color: var(--sf-color-dim);
}
optgroup { font: inherit; }
@@ -1654,37 +1703,37 @@
.is-valid {
--sf-field-border-color: var(--sf-color-success);
- --sf-field-text-color: var(--sf-status-success-text);
+ --sf-field-text-color: var(--sf-color-success-strong);
}
.is-invalid {
--sf-field-border-color: var(--sf-color-error);
- --sf-field-text-color: var(--sf-status-error-text);
+ --sf-field-text-color: var(--sf-color-error-strong);
}
.is-warning {
--sf-field-border-color: var(--sf-color-warning);
- --sf-field-text-color: var(--sf-status-warning-text);
+ --sf-field-text-color: var(--sf-color-warning-strong);
}
.is-success {
--sf-field-border-color: var(--sf-color-success);
- --sf-field-text-color: var(--sf-status-success-text);
+ --sf-field-text-color: var(--sf-color-success-strong);
}
.is-error {
--sf-field-border-color: var(--sf-color-error);
- --sf-field-text-color: var(--sf-status-error-text);
+ --sf-field-text-color: var(--sf-color-error-strong);
}
.is-info {
--sf-field-border-color: var(--sf-color-info);
- --sf-field-text-color: var(--sf-status-info-text);
+ --sf-field-text-color: var(--sf-color-info-strong);
}
.is-danger {
--sf-field-border-color: var(--sf-color-danger);
- --sf-field-text-color: var(--sf-status-danger-text);
+ --sf-field-text-color: var(--sf-color-danger-strong);
}
/* ============================================================
diff --git a/docs/demo.html b/docs/demo.html
index 8fc4f731..374adc9e 100644
--- a/docs/demo.html
+++ b/docs/demo.html
@@ -338,9 +338,9 @@
.demo-motion-warning {
display: none;
padding: var(--sf-space-s);
- background: var(--sf-status-warning-bg);
- color: var(--sf-status-warning-text);
- border: 1px solid var(--sf-status-warning-border);
+ background: var(--sf-color-warning-subtle);
+ color: var(--sf-color-warning-strong);
+ border: 1px solid var(--sf-color-warning-muted);
border-radius: var(--sf-radius-m);
font-size: var(--sf-text-s);
}
@@ -709,11 +709,11 @@ Status Colors
Status Triplets
-
Success
-
Warning
-
Error
-
Info
-
Danger
+
Success
+
Warning
+
Error
+
Info
+
Danger
Text Hierarchy
diff --git a/optional/tokens.palette.css b/optional/tokens.palette.css
index cdff0e89..fa086676 100644
--- a/optional/tokens.palette.css
+++ b/optional/tokens.palette.css
@@ -3,7 +3,7 @@
Optional module. Auto-generates tints, shades, and alpha
variants for the 6 brand color tokens using color-mix(in oklch).
No build step required.
- Status colors use --sf-status-X-bg/text/border in core/tokens.css.
+ Status colors use --sf-color-{status}-subtle/muted/strong in core/tokens.css.
Load after core/tokens.css:
@import "optional/tokens.palette.css";