haus-tokens 2.3.0 → 2.4.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/dist/brands/drift.css +118 -0
- package/package.json +1 -1
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
/* ─── haus / brand · drift ────────────────────────────────────────────────────
|
|
2
|
+
Drift's palette, stated as brand inputs.
|
|
3
|
+
|
|
4
|
+
Until 2026-09-08 these fifty-four lived in drift's own semantics.css as role
|
|
5
|
+
overrides, resolved through cascade order rather than supplied through the
|
|
6
|
+
contract. That shape had already produced one defect on the record: Badge and
|
|
7
|
+
Input rendered in haus's aronia purple inside a cool blue product, because
|
|
8
|
+
drift declared --color-surface-default and haus-components read
|
|
9
|
+
--haus-color-surface-default, so the cascade order decided nothing.
|
|
10
|
+
|
|
11
|
+
It is a cool, editorial reading of the same primitives haus ships. It invents
|
|
12
|
+
no colour: every value here is a step of a haus ramp, which is what makes it a
|
|
13
|
+
brand rather than a second palette. Drift's own faces and its four --shadow-*
|
|
14
|
+
steps stay in the product, because those are not colour and the brand contract
|
|
15
|
+
covers colour, radius, elevation and modal width. The radius and elevation
|
|
16
|
+
halves arrive with drift#53 / D3.
|
|
17
|
+
|
|
18
|
+
backdrop reads --haus-opacity-60 rather than the --haus-opacity-overlay role
|
|
19
|
+
it used in drift: a brand supplies inputs and may not read the role layer it
|
|
20
|
+
feeds. Same value, correct layer.
|
|
21
|
+
|
|
22
|
+
The feedback tier is supplied in full. Drift has all four notification
|
|
23
|
+
semantics and uses them on the audit screen, so the optional half of the
|
|
24
|
+
contract is not optional here.
|
|
25
|
+
─────────────────────────────────────────────────────────────────────────── */
|
|
26
|
+
|
|
27
|
+
@layer haus.brand {
|
|
28
|
+
|
|
29
|
+
[data-haus-theme='drift'] {
|
|
30
|
+
|
|
31
|
+
/* ── Surfaces ────────────────────────────────────────────────────────── */
|
|
32
|
+
--haus-brand-surface-default: var(--haus-damson-0);
|
|
33
|
+
--haus-brand-surface-subtle: var(--haus-damson-100);
|
|
34
|
+
--haus-brand-surface-raised: var(--haus-damson-0); /* elevation via shadow, not colour */
|
|
35
|
+
--haus-brand-surface-overlay: var(--haus-damson-50); /* modal / popover, barely off-white */
|
|
36
|
+
--haus-brand-surface-sunken: var(--haus-damson-200);
|
|
37
|
+
--haus-brand-surface-inverse: var(--haus-damson-900); /* dark chip, tooltip bg in light mode */
|
|
38
|
+
--haus-brand-surface-disabled: var(--haus-damson-100); /* ── Ink (text) ───────────────────────────────────────────────────────── */
|
|
39
|
+
--haus-brand-surface-inverse-hover: oklch(from var(--haus-damson-0) l c h / 0.10); /* ── Spacing ──────────────────────────────────────────────────────────── */
|
|
40
|
+
|
|
41
|
+
/* ── Ink ─────────────────────────────────────────────────────────────── */
|
|
42
|
+
--haus-brand-ink-primary: var(--haus-damson-900);
|
|
43
|
+
--haus-brand-ink-secondary: var(--haus-damson-700);
|
|
44
|
+
--haus-brand-ink-tertiary: var(--haus-damson-500);
|
|
45
|
+
--haus-brand-ink-disabled: var(--haus-damson-400);
|
|
46
|
+
--haus-brand-ink-inverse: var(--haus-damson-0);
|
|
47
|
+
--haus-brand-ink-link: var(--haus-aronia-500);
|
|
48
|
+
--haus-brand-ink-on-primary: var(--haus-damson-0); /* ── Border ───────────────────────────────────────────────────────────── */
|
|
49
|
+
|
|
50
|
+
/* ── Borders ─────────────────────────────────────────────────────────── */
|
|
51
|
+
--haus-brand-border-subtle: var(--haus-damson-100);
|
|
52
|
+
--haus-brand-border-default: var(--haus-damson-200);
|
|
53
|
+
--haus-brand-border-strong: var(--haus-damson-300);
|
|
54
|
+
--haus-brand-border-disabled: var(--haus-damson-200); /* ── Primary, Aronia ─────────────────────────────────────────────────── */
|
|
55
|
+
--haus-brand-border-inverse: oklch(from var(--haus-damson-0) l c h / 0.30);
|
|
56
|
+
--haus-brand-border-inverse-hover: oklch(from var(--haus-damson-0) l c h / 0.50);
|
|
57
|
+
|
|
58
|
+
/* ── Primary ─────────────────────────────────────────────────────────── */
|
|
59
|
+
--haus-brand-primary-default: var(--haus-aronia-500);
|
|
60
|
+
--haus-brand-primary-hover: var(--haus-aronia-600);
|
|
61
|
+
--haus-brand-primary-pressed: var(--haus-aronia-700);
|
|
62
|
+
--haus-brand-primary-subtle: var(--haus-aronia-100);
|
|
63
|
+
--haus-brand-primary-on-subtle: var(--haus-aronia-700);
|
|
64
|
+
--haus-brand-primary-disabled: var(--haus-damson-200); /* ── Feedback, Info (Elderberry · Indigo) ────────────────────────────── */
|
|
65
|
+
|
|
66
|
+
/* ── Backdrop ────────────────────────────────────────────────────────── */
|
|
67
|
+
--haus-brand-backdrop: oklch(from var(--haus-damson-950) l c h / var(--haus-opacity-60)); /* ── Inverse surface interactions (UI placed on dark/inverted surfaces) ── */
|
|
68
|
+
|
|
69
|
+
/* ── Info ────────────────────────────────────────────────────────────── */
|
|
70
|
+
--haus-brand-info-subtle: var(--haus-elderberry-100);
|
|
71
|
+
--haus-brand-info-border: var(--haus-elderberry-200);
|
|
72
|
+
--haus-brand-info-default: var(--haus-elderberry-500);
|
|
73
|
+
--haus-brand-info-on-subtle: var(--haus-elderberry-700);
|
|
74
|
+
--haus-brand-info-on-default: var(--haus-damson-0);
|
|
75
|
+
--haus-brand-info-emphasis: var(--haus-elderberry-900); /* ── Feedback, Success (Greengage · Green) ───────────────────────────── */
|
|
76
|
+
|
|
77
|
+
/* ── Success ─────────────────────────────────────────────────────────── */
|
|
78
|
+
--haus-brand-success-subtle: var(--haus-greengage-100);
|
|
79
|
+
--haus-brand-success-border: var(--haus-greengage-200);
|
|
80
|
+
--haus-brand-success-default: var(--haus-greengage-500);
|
|
81
|
+
--haus-brand-success-on-subtle: var(--haus-greengage-700);
|
|
82
|
+
--haus-brand-success-on-default: var(--haus-damson-900); /* dark text, greengage-500 fails with white */
|
|
83
|
+
--haus-brand-success-solid: var(--haus-greengage-700); /* 700-level: white text passes at 6.82:1 */
|
|
84
|
+
--haus-brand-success-emphasis: var(--haus-greengage-900); /* ── Feedback, Warning (Mango · Golden) ──────────────────────────────── */
|
|
85
|
+
|
|
86
|
+
/* ── Warning ─────────────────────────────────────────────────────────── */
|
|
87
|
+
--haus-brand-warning-subtle: var(--haus-mango-100);
|
|
88
|
+
--haus-brand-warning-border: var(--haus-mango-200);
|
|
89
|
+
--haus-brand-warning-default: var(--haus-mango-500);
|
|
90
|
+
--haus-brand-warning-on-subtle: var(--haus-mango-700);
|
|
91
|
+
--haus-brand-warning-on-default: var(--haus-damson-900); /* dark text, mango-500 fails with white */
|
|
92
|
+
--haus-brand-warning-solid: var(--haus-mango-700); /* 700-level: white text passes at 7.05:1 */
|
|
93
|
+
--haus-brand-warning-emphasis: var(--haus-mango-900); /* ── Feedback, Error (Cherry · Red) ─────────────────────────────────── */
|
|
94
|
+
|
|
95
|
+
/* ── Error ───────────────────────────────────────────────────────────── */
|
|
96
|
+
--haus-brand-error-subtle: var(--haus-cherry-100);
|
|
97
|
+
--haus-brand-error-border: var(--haus-cherry-200);
|
|
98
|
+
--haus-brand-error-default: var(--haus-cherry-500);
|
|
99
|
+
--haus-brand-error-on-subtle: var(--haus-cherry-700);
|
|
100
|
+
--haus-brand-error-on-default: var(--haus-damson-0);
|
|
101
|
+
--haus-brand-error-emphasis: var(--haus-cherry-900); /* ── Backdrop (Modal, Drawer, etc.) ──────────────────────────────────── */
|
|
102
|
+
|
|
103
|
+
/* ── Radius, the form tier ───────────────────────────────────────────── */
|
|
104
|
+
/* Drift sits one step tighter than haus at all three sizes: a 6px control
|
|
105
|
+
against 8px, an 8px surface against 12px, a 12px overlay against 16px.
|
|
106
|
+
That is the whole of its shape difference and it is deliberate.
|
|
107
|
+
|
|
108
|
+
marker is stated at haus's own value because the form tier is all or
|
|
109
|
+
nothing per group. Drift does not disagree about a checkbox's corner; the
|
|
110
|
+
rule exists so that a brand cannot supply half a group and leave the other
|
|
111
|
+
half inheriting, which renders as two shapes with nothing reporting it. */
|
|
112
|
+
--haus-brand-radius-control: var(--haus-radius-sm);
|
|
113
|
+
--haus-brand-radius-surface: var(--haus-radius-md);
|
|
114
|
+
--haus-brand-radius-overlay: var(--haus-radius-lg);
|
|
115
|
+
--haus-brand-radius-marker: var(--haus-radius-sm); /* haus's value, stated by the group rule */
|
|
116
|
+
|
|
117
|
+
}
|
|
118
|
+
}
|
package/package.json
CHANGED