@spaethtech/svelte-ui 0.7.1-dev.40.3d22ac0 → 0.7.1-dev.41.d01009c
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.
|
@@ -67,6 +67,8 @@ variant token at shared strengths, so every tinted surface is calculated identic
|
|
|
67
67
|
|
|
68
68
|
```
|
|
69
69
|
--ui-tint-soft 12% soft resting fill (Badge fill, Alert `filled`)
|
|
70
|
+
--ui-tint-divider 30% soft internal divider (CardHeader/CardFooter separators; the default
|
|
71
|
+
secondary divider is `--ui-border-color`)
|
|
70
72
|
--ui-tint-border 50% bordered surface, REST (Badge/Alert/Banner ring · Card/DataTable/Input/
|
|
71
73
|
TextArea frame · Button outline)
|
|
72
74
|
--ui-tint-border-hover 80% bordered field, HOVER (Input/TextArea/Card/DataTable/Button — the
|
|
@@ -78,6 +80,8 @@ e.g. `color-mix(in srgb, var(<variant-token>) var(--ui-tint-soft), transparent)`
|
|
|
78
80
|
primary@these; a `neutral` one is text@these. Theme-independent (a theme MAY override them to tune the
|
|
79
81
|
whole tint language). **Every bordered surface uses ONE calc** — `--ui-tint-border` at rest,
|
|
80
82
|
`--ui-tint-border-hover` on hover/focus, from the variant token — with **no `secondary` special case**.
|
|
83
|
+
Internal **dividers** (Card header/footer separators) use the softer `--ui-tint-divider` (30%) tier,
|
|
84
|
+
likewise one calc per variant — so a divider always reads lighter than the frame at any variant.
|
|
81
85
|
`--ui-border-color-strong`/`-strong-hover` have been **REMOVED** (migrate any consumer use to
|
|
82
86
|
`color-mix(in srgb, var(--ui-color-secondary) var(--ui-tint-border), transparent)`, hover →
|
|
83
87
|
`--ui-tint-border-hover`). (Distinct from the interactive tints above, which mix from `--ui-accent`.)
|
|
@@ -36,11 +36,10 @@
|
|
|
36
36
|
const sepGap: Record<Size, string> = { sm: "mt-2", md: "mt-3", lg: "mt-4" };
|
|
37
37
|
// The separator is a SOFT internal divider, consistent with the other section splits/footers in the
|
|
38
38
|
// library (DatePicker/TimePicker/TimeRangeInput) — deliberately lighter than the Card frame + fields.
|
|
39
|
-
//
|
|
39
|
+
// One calc for EVERY variant: the variant's token mixed at `--ui-tint-divider` (30%), not the 50%
|
|
40
|
+
// frame strength. `secondary` resolves identically to the shared `--ui-border-color`.
|
|
40
41
|
const sepColor = $derived(
|
|
41
|
-
variant
|
|
42
|
-
? "var(--ui-border-color)"
|
|
43
|
-
: `color-mix(in srgb, var(${variantToken[variant]}) var(--ui-tint-border), transparent)`,
|
|
42
|
+
`color-mix(in srgb, var(${variantToken[variant]}) var(--ui-tint-divider), transparent)`,
|
|
44
43
|
);
|
|
45
44
|
</script>
|
|
46
45
|
|
|
@@ -36,11 +36,10 @@
|
|
|
36
36
|
const sepGap: Record<Size, string> = { sm: "mb-2", md: "mb-3", lg: "mb-4" };
|
|
37
37
|
// The separator is a SOFT internal divider, consistent with the other section splits/footers in the
|
|
38
38
|
// library (DatePicker/TimePicker/TimeRangeInput) — deliberately lighter than the Card frame + fields.
|
|
39
|
-
//
|
|
39
|
+
// One calc for EVERY variant: the variant's token mixed at `--ui-tint-divider` (30%), not the 50%
|
|
40
|
+
// frame strength. `secondary` resolves identically to the shared `--ui-border-color`.
|
|
40
41
|
const sepColor = $derived(
|
|
41
|
-
variant
|
|
42
|
-
? "var(--ui-border-color)"
|
|
43
|
-
: `color-mix(in srgb, var(${variantToken[variant]}) var(--ui-tint-border), transparent)`,
|
|
42
|
+
`color-mix(in srgb, var(${variantToken[variant]}) var(--ui-tint-divider), transparent)`,
|
|
44
43
|
);
|
|
45
44
|
</script>
|
|
46
45
|
|
package/dist/theme.css
CHANGED
|
@@ -67,9 +67,10 @@
|
|
|
67
67
|
* Fixed, NOT scaled by `size`, so different-size controls share a
|
|
68
68
|
* corner. (Pills like Toggle/Badge use rounded-full; the tiny
|
|
69
69
|
* Checkbox box keeps its own small radius — not worth a token.)
|
|
70
|
-
* --ui-border-color soft internal divider (row separators, section splits)
|
|
70
|
+
* --ui-border-color soft internal divider (row separators, section splits) —
|
|
71
|
+
* the default (secondary) divider, mixed at `--ui-tint-divider` */
|
|
71
72
|
--ui-border-radius: 0.375rem;
|
|
72
|
-
--ui-border-color: color-mix(in srgb, var(--ui-color-secondary)
|
|
73
|
+
--ui-border-color: color-mix(in srgb, var(--ui-color-secondary) var(--ui-tint-divider), transparent);
|
|
73
74
|
}
|
|
74
75
|
|
|
75
76
|
/* One interactive-surface language, library-wide. A subtle tint of the ACCENT colour, so it lightens on
|
|
@@ -104,15 +105,17 @@
|
|
|
104
105
|
/* Tint SCALE for a variant-tinted surface (Badge chip, Card frame, `filled` Alert…). The colour is
|
|
105
106
|
* always the component's own variant token; these are the shared STRENGTHS it's mixed at, so every
|
|
106
107
|
* tinted surface is calculated the same way — change one number here, every component follows:
|
|
107
|
-
* fill:
|
|
108
|
-
*
|
|
109
|
-
*
|
|
110
|
-
*
|
|
108
|
+
* fill: color-mix(in srgb, var(<token>) var(--ui-tint-soft), transparent) soft resting fill
|
|
109
|
+
* divider: color-mix(in srgb, var(<token>) var(--ui-tint-divider), transparent) soft internal divider
|
|
110
|
+
* border: color-mix(in srgb, var(<token>) var(--ui-tint-border), transparent) frame / field border (rest)
|
|
111
|
+
* hover: color-mix(in srgb, var(<token>) var(--ui-tint-border-hover), transparent) bordered field, hover/focus
|
|
112
|
+
* text: color-mix(in srgb, var(<token>) var(--ui-tint-strong), var(--ui-color-text)) foreground
|
|
111
113
|
* A primary badge is primary@soft/border/strong; a neutral one is text@… — one calculation, any
|
|
112
114
|
* variant. `--ui-tint-border-hover` is the STRONGER step an interactive bordered field (Input,
|
|
113
115
|
* TextArea, an outline Button) moves to on hover/focus. Theme-independent constants (no colour → no
|
|
114
116
|
* per-theme scope needed) — but a theme MAY override these to tune the whole tint language. */
|
|
115
117
|
--ui-tint-soft: 12%;
|
|
118
|
+
--ui-tint-divider: 30%; /* soft internal dividers — deliberately lighter than the 50% frame/field border */
|
|
116
119
|
--ui-tint-border: 50%;
|
|
117
120
|
--ui-tint-border-hover: 80%;
|
|
118
121
|
--ui-tint-strong: 80%;
|