@halfmanhalfape/hmha-tokens 0.0.0-stage → 1.0.1

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.
Files changed (10) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +100 -2
  3. package/package.json +33 -4
  4. package/src/lib/_all.css +249 -0
  5. package/src/lib/_base.css +128 -0
  6. package/src/lib/_density-comfortable.css +9 -0
  7. package/src/lib/_density-compact.css +9 -0
  8. package/src/lib/_mode-dark.css +31 -0
  9. package/src/lib/_mode-light.css +31 -0
  10. package/src/lib/hmha-tokens.ts +38 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2026 Christopher Wilson
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,3 +1,101 @@
1
- # Temporary Holding Version
1
+ # @halfmanhalfape/hmha-tokens
2
2
 
3
- This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
3
+ The design tokens behind the Half Man Half Ape design system — plain
4
+ CSS custom properties and matching TypeScript types. Pure CSS, zero
5
+ dependencies, **no Angular required.** This is what
6
+ `@halfmanhalfape/hmha-ui`'s components all consume, but it's published
7
+ separately so you can use the design language — colours, spacing,
8
+ typography, the light/dark and comfortable/compact theming axes — in
9
+ any project, Angular or not.
10
+
11
+ ## Install
12
+
13
+ ```bash
14
+ npm install @halfmanhalfape/hmha-tokens
15
+ ```
16
+
17
+ ## Usage
18
+
19
+ **Plain CSS** — import the stylesheet once, globally:
20
+
21
+ ```css
22
+ @import '@halfmanhalfape/hmha-tokens/src/lib/_all.css';
23
+ ```
24
+
25
+ Or in an Angular app's `angular.json`:
26
+
27
+ ```json
28
+ "styles": ["node_modules/@halfmanhalfape/hmha-tokens/src/lib/_all.css"]
29
+ ```
30
+
31
+ Every token is now a real custom property on `:root` — use any of them
32
+ directly:
33
+
34
+ ```css
35
+ .card {
36
+ background: var(--hmha-color-surface-raised);
37
+ color: var(--hmha-color-text);
38
+ padding: var(--hmha-control-padding-y) var(--hmha-control-padding-x);
39
+ border-radius: var(--hmha-radius-surface);
40
+ }
41
+ ```
42
+
43
+ **TypeScript** — typed accessors and role unions, for anywhere you'd
44
+ rather reference a role by name than type out a `var()` string by
45
+ hand:
46
+
47
+ ```ts
48
+ import { hmhaColor, type HmhaColorRole, type HmhaMode, type HmhaDensity } from '@halfmanhalfape/hmha-tokens';
49
+
50
+ const bg = hmhaColor('surface-raised'); // "var(--hmha-color-surface-raised)"
51
+ ```
52
+
53
+ `HmhaColorRole` is a union of all 29 semantic colour role names —
54
+ useful for typing a prop/parameter that should only ever accept a real
55
+ role (`'action' | 'danger' | 'surface' | …`), so a typo gets caught at
56
+ compile time instead of silently rendering nothing.
57
+
58
+ ## Theming: two axes, set as attributes
59
+
60
+ ```html
61
+ <html data-hmha-mode="dark" data-hmha-density="compact">
62
+ ```
63
+
64
+ | Attribute | Values | Re-points |
65
+ | --- | --- | --- |
66
+ | `data-hmha-mode` | `light` (default) \| `dark` | All 29 semantic colour roles. |
67
+ | `data-hmha-density` | `comfortable` (default) \| `compact` | 7 control-sizing roles. |
68
+
69
+ Both nest — set either on any ancestor, and everything underneath
70
+ resolves from its nearest one. Leave `data-hmha-mode` off entirely and
71
+ the page follows the OS's `prefers-color-scheme` until you pin a value.
72
+
73
+ ## Overriding tokens
74
+
75
+ Every token is a plain custom property — redeclare it anywhere
76
+ downstream and everything consuming it (every `hmha-ui` component,
77
+ your own CSS) picks up the new value immediately:
78
+
79
+ ```css
80
+ :root {
81
+ --hmha-color-action: oklch(0.55 0.2 300); /* your own brand colour instead of the default blue */
82
+ }
83
+ ```
84
+
85
+ No new package version, no rebuild — this works because the build
86
+ deliberately keeps `var()` chains in the output instead of flattening
87
+ them to literal values.
88
+
89
+ ## What's inside
90
+
91
+ Three tiers — primitive (raw ramps/scales, not meant to be consumed
92
+ directly), semantic (the tier above — colour/spacing/type *roles*,
93
+ these are what you actually use), and component (declared by individual
94
+ `hmha-ui` components for their own override surface, documented in
95
+ each component's own README).
96
+
97
+ For the full architecture writeup — why three tiers, the complete
98
+ colour/type/font role reference, and the deeper override story — see
99
+ `@halfmanhalfape/hmha-ui`'s **[theming guide](https://github.com/C-Dub1978/DS_HalfManHalfApe/blob/main/libs/ui/docs/theming.md)**.
100
+ That doc is written against the components package, but every token it
101
+ describes lives here and works the same with or without Angular.
package/package.json CHANGED
@@ -1,6 +1,35 @@
1
1
  {
2
2
  "name": "@halfmanhalfape/hmha-tokens",
3
- "version": "0.0.0-stage",
4
- "stub": true,
5
- "description": "Temporary package placeholder for staged publishing"
6
- }
3
+ "version": "1.0.1",
4
+ "license": "MIT",
5
+ "publishConfig": {
6
+ "access": "public"
7
+ },
8
+ "description": "DTCG-built CSS custom properties and TypeScript types for the Half Man Half Ape design system. Pure CSS, zero dependencies — no Angular required. The Angular components that consume these tokens are @halfmanhalfape/hmha-ui.",
9
+ "keywords": [
10
+ "design-tokens",
11
+ "css-custom-properties",
12
+ "design-system",
13
+ "dtcg",
14
+ "theming",
15
+ "dark-mode"
16
+ ],
17
+ "homepage": "https://github.com/C-Dub1978/DS_HalfManHalfApe/tree/main/libs/tokens#readme",
18
+ "bugs": {
19
+ "url": "https://github.com/C-Dub1978/DS_HalfManHalfApe/issues"
20
+ },
21
+ "repository": {
22
+ "type": "git",
23
+ "url": "git+https://github.com/C-Dub1978/DS_HalfManHalfApe.git",
24
+ "directory": "libs/tokens"
25
+ },
26
+ "type": "module",
27
+ "style": "./src/lib/_all.css",
28
+ "types": "./src/lib/hmha-tokens.ts",
29
+ "files": [
30
+ "src/lib"
31
+ ],
32
+ "sideEffects": [
33
+ "*.css"
34
+ ]
35
+ }
package/src/lib/_all.css ADDED
@@ -0,0 +1,249 @@
1
+ /* tokens — GENERATED. Do not edit. Source: every *.json file under tokens/, recursively */
2
+
3
+ :root, :host {
4
+ --hmha-color-neutral-0: #ffffff;
5
+ --hmha-color-neutral-50: oklch(0.985 0.002 260);
6
+ --hmha-color-neutral-100: oklch(0.968 0.003 260);
7
+ --hmha-color-neutral-200: oklch(0.929 0.005 260);
8
+ --hmha-color-neutral-300: oklch(0.869 0.007 260);
9
+ --hmha-color-neutral-400: oklch(0.714 0.011 260);
10
+ --hmha-color-neutral-500: oklch(0.596 0.014 260);
11
+ --hmha-color-neutral-600: oklch(0.506 0.016 260);
12
+ --hmha-color-neutral-700: oklch(0.429 0.016 260);
13
+ --hmha-color-neutral-800: oklch(0.322 0.014 260);
14
+ --hmha-color-neutral-900: oklch(0.244 0.012 260);
15
+ --hmha-color-neutral-950: oklch(0.176 0.011 260);
16
+ --hmha-color-blue-50: oklch(0.970 0.017 255);
17
+ --hmha-color-blue-100: oklch(0.940 0.035 255);
18
+ --hmha-color-blue-200: oklch(0.890 0.062 255);
19
+ --hmha-color-blue-300: oklch(0.810 0.098 255);
20
+ --hmha-color-blue-400: oklch(0.710 0.145 255);
21
+ --hmha-color-blue-500: oklch(0.620 0.178 255);
22
+ --hmha-color-blue-600: oklch(0.550 0.192 255);
23
+ --hmha-color-blue-700: oklch(0.480 0.172 255);
24
+ --hmha-color-blue-800: oklch(0.400 0.138 255);
25
+ --hmha-color-blue-900: oklch(0.330 0.105 255);
26
+ --hmha-color-red-100: oklch(0.940 0.035 25);
27
+ --hmha-color-red-300: oklch(0.800 0.115 25);
28
+ --hmha-color-red-500: oklch(0.580 0.205 25);
29
+ --hmha-color-red-700: oklch(0.470 0.175 25);
30
+ --hmha-color-red-900: oklch(0.320 0.090 25);
31
+ --hmha-color-amber-100: oklch(0.950 0.045 85);
32
+ --hmha-color-amber-300: oklch(0.870 0.100 80);
33
+ --hmha-color-amber-500: oklch(0.750 0.155 75);
34
+ --hmha-color-amber-700: oklch(0.530 0.125 65);
35
+ --hmha-color-amber-900: oklch(0.350 0.070 60);
36
+ --hmha-color-green-100: oklch(0.940 0.040 150);
37
+ --hmha-color-green-300: oklch(0.820 0.090 150);
38
+ --hmha-color-green-500: oklch(0.540 0.135 150);
39
+ --hmha-color-green-700: oklch(0.480 0.110 150);
40
+ --hmha-color-green-900: oklch(0.320 0.065 150);
41
+ --hmha-space-0: 0;
42
+ --hmha-space-1: 4px;
43
+ --hmha-space-2: 8px;
44
+ --hmha-space-3: 12px;
45
+ --hmha-space-4: 16px;
46
+ --hmha-space-5: 20px;
47
+ --hmha-space-6: 24px;
48
+ --hmha-space-8: 32px;
49
+ --hmha-space-10: 40px;
50
+ --hmha-space-12: 48px;
51
+ --hmha-space-80: 320px;
52
+ --hmha-size-7: 28px;
53
+ --hmha-size-8: 32px;
54
+ --hmha-size-10: 40px;
55
+ --hmha-size-12: 48px;
56
+ --hmha-radius-sm: 4px;
57
+ --hmha-radius-md: 8px;
58
+ --hmha-radius-lg: 12px;
59
+ --hmha-radius-full: 999px;
60
+ --hmha-border-1: 1px;
61
+ --hmha-border-2: 2px;
62
+ --hmha-shadow-sm: 0 1px 2px 0 oklch(0.176 0.011 260 / 0.06);
63
+ --hmha-shadow-md: 0 4px 12px -2px oklch(0.176 0.011 260 / 0.10);
64
+ --hmha-shadow-lg: 0 12px 32px -8px oklch(0.176 0.011 260 / 0.16);
65
+ --hmha-duration-fast: 120ms;
66
+ --hmha-duration-base: 200ms;
67
+ --hmha-easing-standard: cubic-bezier(0.2, 0, 0, 1);
68
+ --hmha-scrim: oklch(0.176 0.011 260 / 0.5);
69
+ --hmha-font-family-raleway: 'Raleway', sans-serif;
70
+ --hmha-font-family-geist: 'Geist', sans-serif;
71
+ --hmha-font-family-cormorant: 'Cormorant', serif;
72
+ --hmha-font-family-fraunces: 'Fraunces', serif;
73
+ --hmha-font-family-recursive: 'Recursive', monospace;
74
+ --hmha-font-family-geist-mono: 'Geist Mono', monospace;
75
+ --hmha-font-family-jetbrains-mono: 'JetBrains Mono', monospace;
76
+ --hmha-font-family-ibm-plex-mono: 'IBM Plex Mono', monospace;
77
+ --hmha-font-size-xs: 12px;
78
+ --hmha-font-size-sm: 14px;
79
+ --hmha-font-size-md: 16px;
80
+ --hmha-font-size-lg: 18px;
81
+ --hmha-font-size-xl: 20px;
82
+ --hmha-font-size-2xl: 24px;
83
+ --hmha-font-size-3xl: 30px;
84
+ --hmha-font-weight-regular: 400;
85
+ --hmha-font-weight-medium: 500;
86
+ --hmha-font-weight-semibold: 600;
87
+ --hmha-font-weight-bold: 700;
88
+ --hmha-line-height-tight: 1.2;
89
+ --hmha-line-height-normal: 1.5;
90
+ --hmha-line-height-relaxed: 1.65;
91
+ --hmha-color-backdrop: var(--hmha-scrim);
92
+ --hmha-radius-control: var(--hmha-radius-md);
93
+ --hmha-radius-surface: var(--hmha-radius-lg);
94
+ --hmha-radius-pill: var(--hmha-radius-full);
95
+ --hmha-border-width: var(--hmha-border-1);
96
+ --hmha-focus-width: var(--hmha-border-2);
97
+ --hmha-focus-offset: var(--hmha-space-1);
98
+ --hmha-icon-sm: var(--hmha-space-4);
99
+ --hmha-icon-md: var(--hmha-space-5);
100
+ --hmha-icon-lg: var(--hmha-space-6);
101
+ --hmha-layout-drawer-width: var(--hmha-space-80);
102
+ --hmha-type-heading-lg-size: var(--hmha-font-size-3xl);
103
+ --hmha-type-heading-lg-line: var(--hmha-line-height-tight);
104
+ --hmha-type-heading-lg-weight: var(--hmha-font-weight-bold);
105
+ --hmha-type-heading-md-size: var(--hmha-font-size-xl);
106
+ --hmha-type-heading-md-line: var(--hmha-line-height-tight);
107
+ --hmha-type-heading-md-weight: var(--hmha-font-weight-semibold);
108
+ --hmha-type-heading-sm-size: var(--hmha-font-size-lg);
109
+ --hmha-type-heading-sm-line: var(--hmha-line-height-tight);
110
+ --hmha-type-heading-sm-weight: var(--hmha-font-weight-semibold);
111
+ --hmha-type-body-md-size: var(--hmha-font-size-md);
112
+ --hmha-type-body-md-line: var(--hmha-line-height-normal);
113
+ --hmha-type-body-md-weight: var(--hmha-font-weight-regular);
114
+ --hmha-type-body-sm-size: var(--hmha-font-size-sm);
115
+ --hmha-type-body-sm-line: var(--hmha-line-height-normal);
116
+ --hmha-type-body-sm-weight: var(--hmha-font-weight-regular);
117
+ --hmha-type-label-md-size: var(--hmha-font-size-sm);
118
+ --hmha-type-label-md-line: var(--hmha-line-height-tight);
119
+ --hmha-type-label-md-weight: var(--hmha-font-weight-medium);
120
+ --hmha-type-label-sm-size: var(--hmha-font-size-xs);
121
+ --hmha-type-label-sm-line: var(--hmha-line-height-tight);
122
+ --hmha-type-label-sm-weight: var(--hmha-font-weight-medium);
123
+ --hmha-type-caption-size: var(--hmha-font-size-xs);
124
+ --hmha-type-caption-line: var(--hmha-line-height-normal);
125
+ --hmha-type-caption-weight: var(--hmha-font-weight-regular);
126
+ --hmha-font-family: var(--hmha-font-family-raleway);
127
+ --hmha-font-family-heading: var(--hmha-font-family-fraunces);
128
+ --hmha-font-family-mono: var(--hmha-font-family-recursive);
129
+ --hmha-elevation-raised: var(--hmha-shadow-sm);
130
+ }
131
+
132
+ :root, [data-hmha-mode="light"] {
133
+ --hmha-color-bg: var(--hmha-color-neutral-50);
134
+ --hmha-color-bg-subtle: var(--hmha-color-neutral-100);
135
+ --hmha-color-surface: var(--hmha-color-neutral-0);
136
+ --hmha-color-surface-raised: var(--hmha-color-neutral-0);
137
+ --hmha-color-surface-sunken: var(--hmha-color-neutral-100);
138
+ --hmha-color-text: var(--hmha-color-neutral-900);
139
+ --hmha-color-text-muted: var(--hmha-color-neutral-700);
140
+ --hmha-color-text-subtle: var(--hmha-color-neutral-500);
141
+ --hmha-color-text-on-action: var(--hmha-color-neutral-0);
142
+ --hmha-color-border: var(--hmha-color-neutral-200);
143
+ --hmha-color-border-strong: var(--hmha-color-neutral-500);
144
+ --hmha-color-action: var(--hmha-color-blue-600);
145
+ --hmha-color-action-hover: var(--hmha-color-blue-700);
146
+ --hmha-color-action-active: var(--hmha-color-blue-800);
147
+ --hmha-color-action-subtle: var(--hmha-color-blue-50);
148
+ --hmha-color-action-disabled: var(--hmha-color-neutral-200);
149
+ --hmha-color-focus: var(--hmha-color-blue-600);
150
+ --hmha-color-danger: var(--hmha-color-red-500);
151
+ --hmha-color-danger-subtle: var(--hmha-color-red-100);
152
+ --hmha-color-danger-text: var(--hmha-color-red-700);
153
+ --hmha-color-text-on-danger: var(--hmha-color-neutral-0);
154
+ --hmha-color-warning: var(--hmha-color-amber-500);
155
+ --hmha-color-warning-subtle: var(--hmha-color-amber-100);
156
+ --hmha-color-warning-text: var(--hmha-color-amber-700);
157
+ --hmha-color-text-on-warning: var(--hmha-color-neutral-950);
158
+ --hmha-color-success: var(--hmha-color-green-500);
159
+ --hmha-color-success-subtle: var(--hmha-color-green-100);
160
+ --hmha-color-success-text: var(--hmha-color-green-700);
161
+ --hmha-color-text-on-success: var(--hmha-color-neutral-0);
162
+ }
163
+
164
+ [data-hmha-mode="dark"] {
165
+ --hmha-color-bg: var(--hmha-color-neutral-950);
166
+ --hmha-color-bg-subtle: var(--hmha-color-neutral-900);
167
+ --hmha-color-surface: var(--hmha-color-neutral-900);
168
+ --hmha-color-surface-raised: var(--hmha-color-neutral-800);
169
+ --hmha-color-surface-sunken: var(--hmha-color-neutral-950);
170
+ --hmha-color-text: var(--hmha-color-neutral-50);
171
+ --hmha-color-text-muted: var(--hmha-color-neutral-300);
172
+ --hmha-color-text-subtle: var(--hmha-color-neutral-400);
173
+ --hmha-color-text-on-action: var(--hmha-color-neutral-950);
174
+ --hmha-color-border: var(--hmha-color-neutral-800);
175
+ --hmha-color-border-strong: var(--hmha-color-neutral-500);
176
+ --hmha-color-action: var(--hmha-color-blue-400);
177
+ --hmha-color-action-hover: var(--hmha-color-blue-300);
178
+ --hmha-color-action-active: var(--hmha-color-blue-200);
179
+ --hmha-color-action-subtle: var(--hmha-color-blue-900);
180
+ --hmha-color-action-disabled: var(--hmha-color-neutral-800);
181
+ --hmha-color-focus: var(--hmha-color-blue-400);
182
+ --hmha-color-danger: var(--hmha-color-red-500);
183
+ --hmha-color-danger-subtle: var(--hmha-color-red-900);
184
+ --hmha-color-danger-text: var(--hmha-color-red-300);
185
+ --hmha-color-text-on-danger: var(--hmha-color-neutral-0);
186
+ --hmha-color-warning: var(--hmha-color-amber-500);
187
+ --hmha-color-warning-subtle: var(--hmha-color-amber-900);
188
+ --hmha-color-warning-text: var(--hmha-color-amber-300);
189
+ --hmha-color-text-on-warning: var(--hmha-color-neutral-950);
190
+ --hmha-color-success: var(--hmha-color-green-500);
191
+ --hmha-color-success-subtle: var(--hmha-color-green-900);
192
+ --hmha-color-success-text: var(--hmha-color-green-300);
193
+ --hmha-color-text-on-success: var(--hmha-color-neutral-0);
194
+ }
195
+
196
+ :root, [data-hmha-density="comfortable"] {
197
+ --hmha-space-stack: var(--hmha-space-4);
198
+ --hmha-control-height: var(--hmha-size-10);
199
+ --hmha-control-height-sm: var(--hmha-size-8);
200
+ --hmha-control-height-lg: var(--hmha-size-12);
201
+ --hmha-control-padding-x: var(--hmha-space-4);
202
+ --hmha-control-padding-y: var(--hmha-space-2);
203
+ --hmha-control-gap: var(--hmha-space-2);
204
+ }
205
+
206
+ [data-hmha-density="compact"] {
207
+ --hmha-space-stack: var(--hmha-space-3);
208
+ --hmha-control-height: var(--hmha-size-8);
209
+ --hmha-control-height-sm: var(--hmha-size-7);
210
+ --hmha-control-height-lg: var(--hmha-size-10);
211
+ --hmha-control-padding-x: var(--hmha-space-3);
212
+ --hmha-control-padding-y: var(--hmha-space-1);
213
+ --hmha-control-gap: var(--hmha-space-1);
214
+ }
215
+
216
+ @media (prefers-color-scheme: dark) {
217
+ :root:not([data-hmha-mode]) {
218
+ --hmha-color-bg: var(--hmha-color-neutral-950);
219
+ --hmha-color-bg-subtle: var(--hmha-color-neutral-900);
220
+ --hmha-color-surface: var(--hmha-color-neutral-900);
221
+ --hmha-color-surface-raised: var(--hmha-color-neutral-800);
222
+ --hmha-color-surface-sunken: var(--hmha-color-neutral-950);
223
+ --hmha-color-text: var(--hmha-color-neutral-50);
224
+ --hmha-color-text-muted: var(--hmha-color-neutral-300);
225
+ --hmha-color-text-subtle: var(--hmha-color-neutral-400);
226
+ --hmha-color-text-on-action: var(--hmha-color-neutral-950);
227
+ --hmha-color-border: var(--hmha-color-neutral-800);
228
+ --hmha-color-border-strong: var(--hmha-color-neutral-500);
229
+ --hmha-color-action: var(--hmha-color-blue-400);
230
+ --hmha-color-action-hover: var(--hmha-color-blue-300);
231
+ --hmha-color-action-active: var(--hmha-color-blue-200);
232
+ --hmha-color-action-subtle: var(--hmha-color-blue-900);
233
+ --hmha-color-action-disabled: var(--hmha-color-neutral-800);
234
+ --hmha-color-focus: var(--hmha-color-blue-400);
235
+ --hmha-color-danger: var(--hmha-color-red-500);
236
+ --hmha-color-danger-subtle: var(--hmha-color-red-900);
237
+ --hmha-color-danger-text: var(--hmha-color-red-300);
238
+ --hmha-color-text-on-danger: var(--hmha-color-neutral-0);
239
+ --hmha-color-warning: var(--hmha-color-amber-500);
240
+ --hmha-color-warning-subtle: var(--hmha-color-amber-900);
241
+ --hmha-color-warning-text: var(--hmha-color-amber-300);
242
+ --hmha-color-text-on-warning: var(--hmha-color-neutral-950);
243
+ --hmha-color-success: var(--hmha-color-green-500);
244
+ --hmha-color-success-subtle: var(--hmha-color-green-900);
245
+ --hmha-color-success-text: var(--hmha-color-green-300);
246
+ --hmha-color-text-on-success: var(--hmha-color-neutral-0);
247
+ }
248
+
249
+ }
package/src/lib/_base.css ADDED
@@ -0,0 +1,128 @@
1
+ :root, :host {
2
+ --hmha-color-neutral-0: #ffffff;
3
+ --hmha-color-neutral-50: oklch(0.985 0.002 260);
4
+ --hmha-color-neutral-100: oklch(0.968 0.003 260);
5
+ --hmha-color-neutral-200: oklch(0.929 0.005 260);
6
+ --hmha-color-neutral-300: oklch(0.869 0.007 260);
7
+ --hmha-color-neutral-400: oklch(0.714 0.011 260);
8
+ --hmha-color-neutral-500: oklch(0.596 0.014 260);
9
+ --hmha-color-neutral-600: oklch(0.506 0.016 260);
10
+ --hmha-color-neutral-700: oklch(0.429 0.016 260);
11
+ --hmha-color-neutral-800: oklch(0.322 0.014 260);
12
+ --hmha-color-neutral-900: oklch(0.244 0.012 260);
13
+ --hmha-color-neutral-950: oklch(0.176 0.011 260);
14
+ --hmha-color-blue-50: oklch(0.970 0.017 255);
15
+ --hmha-color-blue-100: oklch(0.940 0.035 255);
16
+ --hmha-color-blue-200: oklch(0.890 0.062 255);
17
+ --hmha-color-blue-300: oklch(0.810 0.098 255);
18
+ --hmha-color-blue-400: oklch(0.710 0.145 255);
19
+ --hmha-color-blue-500: oklch(0.620 0.178 255);
20
+ --hmha-color-blue-600: oklch(0.550 0.192 255);
21
+ --hmha-color-blue-700: oklch(0.480 0.172 255);
22
+ --hmha-color-blue-800: oklch(0.400 0.138 255);
23
+ --hmha-color-blue-900: oklch(0.330 0.105 255);
24
+ --hmha-color-red-100: oklch(0.940 0.035 25);
25
+ --hmha-color-red-300: oklch(0.800 0.115 25);
26
+ --hmha-color-red-500: oklch(0.580 0.205 25);
27
+ --hmha-color-red-700: oklch(0.470 0.175 25);
28
+ --hmha-color-red-900: oklch(0.320 0.090 25);
29
+ --hmha-color-amber-100: oklch(0.950 0.045 85);
30
+ --hmha-color-amber-300: oklch(0.870 0.100 80);
31
+ --hmha-color-amber-500: oklch(0.750 0.155 75);
32
+ --hmha-color-amber-700: oklch(0.530 0.125 65);
33
+ --hmha-color-amber-900: oklch(0.350 0.070 60);
34
+ --hmha-color-green-100: oklch(0.940 0.040 150);
35
+ --hmha-color-green-300: oklch(0.820 0.090 150);
36
+ --hmha-color-green-500: oklch(0.540 0.135 150);
37
+ --hmha-color-green-700: oklch(0.480 0.110 150);
38
+ --hmha-color-green-900: oklch(0.320 0.065 150);
39
+ --hmha-space-0: 0;
40
+ --hmha-space-1: 4px;
41
+ --hmha-space-2: 8px;
42
+ --hmha-space-3: 12px;
43
+ --hmha-space-4: 16px;
44
+ --hmha-space-5: 20px;
45
+ --hmha-space-6: 24px;
46
+ --hmha-space-8: 32px;
47
+ --hmha-space-10: 40px;
48
+ --hmha-space-12: 48px;
49
+ --hmha-space-80: 320px;
50
+ --hmha-size-7: 28px;
51
+ --hmha-size-8: 32px;
52
+ --hmha-size-10: 40px;
53
+ --hmha-size-12: 48px;
54
+ --hmha-radius-sm: 4px;
55
+ --hmha-radius-md: 8px;
56
+ --hmha-radius-lg: 12px;
57
+ --hmha-radius-full: 999px;
58
+ --hmha-border-1: 1px;
59
+ --hmha-border-2: 2px;
60
+ --hmha-shadow-sm: 0 1px 2px 0 oklch(0.176 0.011 260 / 0.06);
61
+ --hmha-shadow-md: 0 4px 12px -2px oklch(0.176 0.011 260 / 0.10);
62
+ --hmha-shadow-lg: 0 12px 32px -8px oklch(0.176 0.011 260 / 0.16);
63
+ --hmha-duration-fast: 120ms;
64
+ --hmha-duration-base: 200ms;
65
+ --hmha-easing-standard: cubic-bezier(0.2, 0, 0, 1);
66
+ --hmha-scrim: oklch(0.176 0.011 260 / 0.5);
67
+ --hmha-font-family-raleway: 'Raleway', sans-serif;
68
+ --hmha-font-family-geist: 'Geist', sans-serif;
69
+ --hmha-font-family-cormorant: 'Cormorant', serif;
70
+ --hmha-font-family-fraunces: 'Fraunces', serif;
71
+ --hmha-font-family-recursive: 'Recursive', monospace;
72
+ --hmha-font-family-geist-mono: 'Geist Mono', monospace;
73
+ --hmha-font-family-jetbrains-mono: 'JetBrains Mono', monospace;
74
+ --hmha-font-family-ibm-plex-mono: 'IBM Plex Mono', monospace;
75
+ --hmha-font-size-xs: 12px;
76
+ --hmha-font-size-sm: 14px;
77
+ --hmha-font-size-md: 16px;
78
+ --hmha-font-size-lg: 18px;
79
+ --hmha-font-size-xl: 20px;
80
+ --hmha-font-size-2xl: 24px;
81
+ --hmha-font-size-3xl: 30px;
82
+ --hmha-font-weight-regular: 400;
83
+ --hmha-font-weight-medium: 500;
84
+ --hmha-font-weight-semibold: 600;
85
+ --hmha-font-weight-bold: 700;
86
+ --hmha-line-height-tight: 1.2;
87
+ --hmha-line-height-normal: 1.5;
88
+ --hmha-line-height-relaxed: 1.65;
89
+ --hmha-color-backdrop: var(--hmha-scrim);
90
+ --hmha-radius-control: var(--hmha-radius-md);
91
+ --hmha-radius-surface: var(--hmha-radius-lg);
92
+ --hmha-radius-pill: var(--hmha-radius-full);
93
+ --hmha-border-width: var(--hmha-border-1);
94
+ --hmha-focus-width: var(--hmha-border-2);
95
+ --hmha-focus-offset: var(--hmha-space-1);
96
+ --hmha-icon-sm: var(--hmha-space-4);
97
+ --hmha-icon-md: var(--hmha-space-5);
98
+ --hmha-icon-lg: var(--hmha-space-6);
99
+ --hmha-layout-drawer-width: var(--hmha-space-80);
100
+ --hmha-type-heading-lg-size: var(--hmha-font-size-3xl);
101
+ --hmha-type-heading-lg-line: var(--hmha-line-height-tight);
102
+ --hmha-type-heading-lg-weight: var(--hmha-font-weight-bold);
103
+ --hmha-type-heading-md-size: var(--hmha-font-size-xl);
104
+ --hmha-type-heading-md-line: var(--hmha-line-height-tight);
105
+ --hmha-type-heading-md-weight: var(--hmha-font-weight-semibold);
106
+ --hmha-type-heading-sm-size: var(--hmha-font-size-lg);
107
+ --hmha-type-heading-sm-line: var(--hmha-line-height-tight);
108
+ --hmha-type-heading-sm-weight: var(--hmha-font-weight-semibold);
109
+ --hmha-type-body-md-size: var(--hmha-font-size-md);
110
+ --hmha-type-body-md-line: var(--hmha-line-height-normal);
111
+ --hmha-type-body-md-weight: var(--hmha-font-weight-regular);
112
+ --hmha-type-body-sm-size: var(--hmha-font-size-sm);
113
+ --hmha-type-body-sm-line: var(--hmha-line-height-normal);
114
+ --hmha-type-body-sm-weight: var(--hmha-font-weight-regular);
115
+ --hmha-type-label-md-size: var(--hmha-font-size-sm);
116
+ --hmha-type-label-md-line: var(--hmha-line-height-tight);
117
+ --hmha-type-label-md-weight: var(--hmha-font-weight-medium);
118
+ --hmha-type-label-sm-size: var(--hmha-font-size-xs);
119
+ --hmha-type-label-sm-line: var(--hmha-line-height-tight);
120
+ --hmha-type-label-sm-weight: var(--hmha-font-weight-medium);
121
+ --hmha-type-caption-size: var(--hmha-font-size-xs);
122
+ --hmha-type-caption-line: var(--hmha-line-height-normal);
123
+ --hmha-type-caption-weight: var(--hmha-font-weight-regular);
124
+ --hmha-font-family: var(--hmha-font-family-raleway);
125
+ --hmha-font-family-heading: var(--hmha-font-family-fraunces);
126
+ --hmha-font-family-mono: var(--hmha-font-family-recursive);
127
+ --hmha-elevation-raised: var(--hmha-shadow-sm);
128
+ }
package/src/lib/_density-comfortable.css ADDED
@@ -0,0 +1,9 @@
1
+ :root, [data-hmha-density="comfortable"] {
2
+ --hmha-space-stack: var(--hmha-space-4);
3
+ --hmha-control-height: var(--hmha-size-10);
4
+ --hmha-control-height-sm: var(--hmha-size-8);
5
+ --hmha-control-height-lg: var(--hmha-size-12);
6
+ --hmha-control-padding-x: var(--hmha-space-4);
7
+ --hmha-control-padding-y: var(--hmha-space-2);
8
+ --hmha-control-gap: var(--hmha-space-2);
9
+ }
package/src/lib/_density-compact.css ADDED
@@ -0,0 +1,9 @@
1
+ [data-hmha-density="compact"] {
2
+ --hmha-space-stack: var(--hmha-space-3);
3
+ --hmha-control-height: var(--hmha-size-8);
4
+ --hmha-control-height-sm: var(--hmha-size-7);
5
+ --hmha-control-height-lg: var(--hmha-size-10);
6
+ --hmha-control-padding-x: var(--hmha-space-3);
7
+ --hmha-control-padding-y: var(--hmha-space-1);
8
+ --hmha-control-gap: var(--hmha-space-1);
9
+ }
package/src/lib/_mode-dark.css ADDED
@@ -0,0 +1,31 @@
1
+ [data-hmha-mode="dark"] {
2
+ --hmha-color-bg: var(--hmha-color-neutral-950);
3
+ --hmha-color-bg-subtle: var(--hmha-color-neutral-900);
4
+ --hmha-color-surface: var(--hmha-color-neutral-900);
5
+ --hmha-color-surface-raised: var(--hmha-color-neutral-800);
6
+ --hmha-color-surface-sunken: var(--hmha-color-neutral-950);
7
+ --hmha-color-text: var(--hmha-color-neutral-50);
8
+ --hmha-color-text-muted: var(--hmha-color-neutral-300);
9
+ --hmha-color-text-subtle: var(--hmha-color-neutral-400);
10
+ --hmha-color-text-on-action: var(--hmha-color-neutral-950);
11
+ --hmha-color-border: var(--hmha-color-neutral-800);
12
+ --hmha-color-border-strong: var(--hmha-color-neutral-500);
13
+ --hmha-color-action: var(--hmha-color-blue-400);
14
+ --hmha-color-action-hover: var(--hmha-color-blue-300);
15
+ --hmha-color-action-active: var(--hmha-color-blue-200);
16
+ --hmha-color-action-subtle: var(--hmha-color-blue-900);
17
+ --hmha-color-action-disabled: var(--hmha-color-neutral-800);
18
+ --hmha-color-focus: var(--hmha-color-blue-400);
19
+ --hmha-color-danger: var(--hmha-color-red-500);
20
+ --hmha-color-danger-subtle: var(--hmha-color-red-900);
21
+ --hmha-color-danger-text: var(--hmha-color-red-300);
22
+ --hmha-color-text-on-danger: var(--hmha-color-neutral-0);
23
+ --hmha-color-warning: var(--hmha-color-amber-500);
24
+ --hmha-color-warning-subtle: var(--hmha-color-amber-900);
25
+ --hmha-color-warning-text: var(--hmha-color-amber-300);
26
+ --hmha-color-text-on-warning: var(--hmha-color-neutral-950);
27
+ --hmha-color-success: var(--hmha-color-green-500);
28
+ --hmha-color-success-subtle: var(--hmha-color-green-900);
29
+ --hmha-color-success-text: var(--hmha-color-green-300);
30
+ --hmha-color-text-on-success: var(--hmha-color-neutral-0);
31
+ }
package/src/lib/_mode-light.css ADDED
@@ -0,0 +1,31 @@
1
+ :root, [data-hmha-mode="light"] {
2
+ --hmha-color-bg: var(--hmha-color-neutral-50);
3
+ --hmha-color-bg-subtle: var(--hmha-color-neutral-100);
4
+ --hmha-color-surface: var(--hmha-color-neutral-0);
5
+ --hmha-color-surface-raised: var(--hmha-color-neutral-0);
6
+ --hmha-color-surface-sunken: var(--hmha-color-neutral-100);
7
+ --hmha-color-text: var(--hmha-color-neutral-900);
8
+ --hmha-color-text-muted: var(--hmha-color-neutral-700);
9
+ --hmha-color-text-subtle: var(--hmha-color-neutral-500);
10
+ --hmha-color-text-on-action: var(--hmha-color-neutral-0);
11
+ --hmha-color-border: var(--hmha-color-neutral-200);
12
+ --hmha-color-border-strong: var(--hmha-color-neutral-500);
13
+ --hmha-color-action: var(--hmha-color-blue-600);
14
+ --hmha-color-action-hover: var(--hmha-color-blue-700);
15
+ --hmha-color-action-active: var(--hmha-color-blue-800);
16
+ --hmha-color-action-subtle: var(--hmha-color-blue-50);
17
+ --hmha-color-action-disabled: var(--hmha-color-neutral-200);
18
+ --hmha-color-focus: var(--hmha-color-blue-600);
19
+ --hmha-color-danger: var(--hmha-color-red-500);
20
+ --hmha-color-danger-subtle: var(--hmha-color-red-100);
21
+ --hmha-color-danger-text: var(--hmha-color-red-700);
22
+ --hmha-color-text-on-danger: var(--hmha-color-neutral-0);
23
+ --hmha-color-warning: var(--hmha-color-amber-500);
24
+ --hmha-color-warning-subtle: var(--hmha-color-amber-100);
25
+ --hmha-color-warning-text: var(--hmha-color-amber-700);
26
+ --hmha-color-text-on-warning: var(--hmha-color-neutral-950);
27
+ --hmha-color-success: var(--hmha-color-green-500);
28
+ --hmha-color-success-subtle: var(--hmha-color-green-100);
29
+ --hmha-color-success-text: var(--hmha-color-green-700);
30
+ --hmha-color-text-on-success: var(--hmha-color-neutral-0);
31
+ }
package/src/lib/hmha-tokens.ts ADDED
@@ -0,0 +1,38 @@
1
+ // GENERATED by Style Dictionary. Do not edit.
2
+
3
+ export type HmhaColorRole =
4
+ | 'bg'
5
+ | 'bg-subtle'
6
+ | 'surface'
7
+ | 'surface-raised'
8
+ | 'surface-sunken'
9
+ | 'text'
10
+ | 'text-muted'
11
+ | 'text-subtle'
12
+ | 'text-on-action'
13
+ | 'border'
14
+ | 'border-strong'
15
+ | 'action'
16
+ | 'action-hover'
17
+ | 'action-active'
18
+ | 'action-subtle'
19
+ | 'action-disabled'
20
+ | 'focus'
21
+ | 'danger'
22
+ | 'danger-subtle'
23
+ | 'danger-text'
24
+ | 'text-on-danger'
25
+ | 'warning'
26
+ | 'warning-subtle'
27
+ | 'warning-text'
28
+ | 'text-on-warning'
29
+ | 'success'
30
+ | 'success-subtle'
31
+ | 'success-text'
32
+ | 'text-on-success'
33
+ ;
34
+
35
+ export type HmhaMode = 'light' | 'dark';
36
+ export type HmhaDensity = 'comfortable' | 'compact';
37
+
38
+ export const hmhaColor = (role: HmhaColorRole) => `var(--hmha-color-${role})`;