@hemerson/design-system 0.0.0-stage → 0.2.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.
Files changed (40) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +91 -2
  3. package/dist/components/Badge/Badge.d.ts +14 -0
  4. package/dist/components/Button/Button.d.ts +17 -0
  5. package/dist/components/Button/index.d.ts +2 -0
  6. package/dist/components/Card/Card.d.ts +19 -0
  7. package/dist/components/Checkbox/Checkbox.d.ts +8 -0
  8. package/dist/components/Container/Container.d.ts +9 -0
  9. package/dist/components/Dialog/Dialog.d.ts +18 -0
  10. package/dist/components/FloatingButton/FloatingButton.d.ts +9 -0
  11. package/dist/components/GlassPanel/GlassPanel.d.ts +13 -0
  12. package/dist/components/GlowAvatar/GlowAvatar.d.ts +10 -0
  13. package/dist/components/Input/Input.d.ts +12 -0
  14. package/dist/components/Loading/Loading.d.ts +11 -0
  15. package/dist/components/Menu/Menu.d.ts +25 -0
  16. package/dist/components/NavBar/NavBar.d.ts +20 -0
  17. package/dist/components/ScrollArea/ScrollArea.d.ts +8 -0
  18. package/dist/components/SectionTitle/SectionTitle.d.ts +12 -0
  19. package/dist/components/SegmentedControl/SegmentedControl.d.ts +21 -0
  20. package/dist/components/Select/Select.d.ts +16 -0
  21. package/dist/components/Separator/Separator.d.ts +8 -0
  22. package/dist/components/Sidebar/Sidebar.d.ts +21 -0
  23. package/dist/components/Table/Table.d.ts +26 -0
  24. package/dist/components/Toast/Toast.d.ts +16 -0
  25. package/dist/enableGlassRefraction-CgDeg-2E.js +88 -0
  26. package/dist/enableGlassRefraction-CgDeg-2E.js.map +1 -0
  27. package/dist/glass/enableGlassRefraction.d.ts +10 -0
  28. package/dist/glass/index.d.ts +1 -0
  29. package/dist/glass/lens.d.ts +15 -0
  30. package/dist/glass.js +1 -0
  31. package/dist/index.d.ts +42 -0
  32. package/dist/index.js +680 -0
  33. package/dist/index.js.map +1 -0
  34. package/dist/internal/Icon.d.ts +17 -0
  35. package/dist/internal/cx.d.ts +2 -0
  36. package/dist/internal/field.d.ts +16 -0
  37. package/dist/styles.css +1297 -0
  38. package/dist/tokens.css +190 -0
  39. package/dist/tokens.json +538 -0
  40. package/package.json +95 -4
package/dist/tokens.css ADDED
@@ -0,0 +1,190 @@
1
+ /* Generated from tokens/tokens.json by scripts/build-tokens.mjs. Do not edit. */
2
+
3
+ :root,
4
+ [data-theme="dark"] {
5
+ color-scheme: dark;
6
+ --dark-900: #1b1b1b;
7
+ --light-200: #e4e3de;
8
+ --light-400: #c4c6bb;
9
+ --primary-500: #7ea8a7;
10
+ --secondary-500: #78718e;
11
+ --surface: var(--dark-900);
12
+ --surface-raised: #262626;
13
+ --surface-sunken: #141414;
14
+ --ink: var(--light-200);
15
+ --ink-muted: var(--light-400);
16
+ --accent: var(--primary-500);
17
+ --accent-fill: var(--primary-500);
18
+ --on-accent: var(--dark-900);
19
+ --accent-soft: #7ea8a71f;
20
+ --secondary: #a49dba;
21
+ --secondary-fill: var(--secondary-500);
22
+ --on-secondary: #ffffff;
23
+ --line: #ffffff26;
24
+ --line-strong: var(--secondary-500);
25
+ --focus-ring: var(--accent);
26
+ --glass-regular-tint: #1b1b1b4d;
27
+ --glass-thick-tint: #1b1b1bf0;
28
+ --glass-solid: var(--surface-raised);
29
+ --glass-clear-tint: #e4e3de12;
30
+ --glass-sheen: #ffffff2e;
31
+ --glass-rim: #ffffffd9;
32
+ --glass-rim-low: #ffffff80;
33
+ --glass-edge: #ffffff1f;
34
+ --glass-accent-tint: #7ea8a71f;
35
+ --glass-accent-sheen: #b9d8d759;
36
+ --success: #8ab4d8;
37
+ --warning: #e3c47b;
38
+ --danger: #f19b90;
39
+ --on-danger: var(--dark-900);
40
+ --scrim: #0000008c;
41
+ --shadow-glass: inset 0 1px 1px rgba(255,255,255,0.45), inset 0 -1px 1px rgba(255,255,255,0.12), inset 0 0 20px rgba(255,255,255,0.08), 0 10px 30px -8px rgba(0,0,0,0.45);
42
+ --shadow-glow: 0 0 14px rgba(126,168,167,0.55);
43
+ --shadow-raised: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
44
+ --glass-text-shadow: 0 1px 2px rgba(0,0,0,0.35);
45
+ }
46
+
47
+ [data-theme="light"] {
48
+ color-scheme: light;
49
+ --dark-900: #1b1b1b;
50
+ --light-200: #e4e3de;
51
+ --light-400: #c4c6bb;
52
+ --primary-500: #7ea8a7;
53
+ --secondary-500: #78718e;
54
+ --surface: #f2f1ec;
55
+ --surface-raised: #faf9f6;
56
+ --surface-sunken: var(--light-200);
57
+ --ink: var(--dark-900);
58
+ --ink-muted: #55574f;
59
+ --accent: #3f6b6a;
60
+ --accent-fill: var(--primary-500);
61
+ --on-accent: var(--dark-900);
62
+ --accent-soft: #3f6b6a1f;
63
+ --secondary: #5a5374;
64
+ --secondary-fill: var(--secondary-500);
65
+ --on-secondary: #ffffff;
66
+ --line: #1b1b1b26;
67
+ --line-strong: var(--secondary-500);
68
+ --focus-ring: var(--accent);
69
+ --glass-regular-tint: #f2f1ec33;
70
+ --glass-thick-tint: #f2f1ecf0;
71
+ --glass-solid: var(--surface-raised);
72
+ --glass-clear-tint: #ffffff8c;
73
+ --glass-sheen: #ffffff66;
74
+ --glass-rim: #ffffff;
75
+ --glass-rim-low: #ffffffb3;
76
+ --glass-edge: #1b1b1b29;
77
+ --glass-accent-tint: #7ea8a71f;
78
+ --glass-accent-sheen: #b9d8d759;
79
+ --success: #2d5b86;
80
+ --warning: #765811;
81
+ --danger: #a1342a;
82
+ --on-danger: #ffffff;
83
+ --scrim: #1b1b1b59;
84
+ --shadow-glass: inset 0 1px 1px rgba(255,255,255,0.9), inset 0 -1px 1px rgba(255,255,255,0.4), inset 0 0 20px rgba(255,255,255,0.25), 0 10px 30px -8px rgba(27,27,27,0.25);
85
+ --shadow-glow: 0 0 14px rgba(63,107,106,0.35);
86
+ --shadow-raised: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
87
+ --glass-text-shadow: 0 1px 1px rgba(255,255,255,0.6);
88
+ }
89
+
90
+ :root {
91
+ --space-1: 4px;
92
+ --space-2: 8px;
93
+ --space-3: 12px;
94
+ --space-4: 16px;
95
+ --space-6: 24px;
96
+ --space-8: 32px;
97
+ --space-10: 40px;
98
+ --space-20: 80px;
99
+ --radius-sm: 2px;
100
+ --radius-md: 6px;
101
+ --radius-lg: 8px;
102
+ --radius-xl: 12px;
103
+ --radius-full: 9999px;
104
+ --radius-2xl: 24px;
105
+ --content-max: 1152px;
106
+ --sidebar-width: 64px;
107
+ --glass-blur: blur(6px) saturate(180%);
108
+ --glass-thick-blur: blur(20px) saturate(150%);
109
+ --glass-accent-blur: blur(6px) saturate(200%);
110
+ --font-sans: Raleway, "Segoe UI", system-ui, sans-serif;
111
+ --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
112
+ }
113
+
114
+ .hds-text-title-xl {
115
+ font-family: var(--font-sans);
116
+ font-size: 36px;
117
+ line-height: 40px;
118
+ font-weight: 700;
119
+ }
120
+
121
+ .hds-text-title-lg {
122
+ font-family: var(--font-sans);
123
+ font-size: 24px;
124
+ line-height: 32px;
125
+ font-weight: 700;
126
+ }
127
+
128
+ .hds-text-title-md {
129
+ font-family: var(--font-sans);
130
+ font-size: 20px;
131
+ line-height: 28px;
132
+ font-weight: 600;
133
+ }
134
+
135
+ .hds-text-body-lg {
136
+ font-family: var(--font-sans);
137
+ font-size: 18px;
138
+ line-height: 28px;
139
+ font-weight: 500;
140
+ }
141
+
142
+ .hds-text-body {
143
+ font-family: var(--font-sans);
144
+ font-size: 16px;
145
+ line-height: 24px;
146
+ font-weight: 400;
147
+ }
148
+
149
+ .hds-text-body-sm {
150
+ font-family: var(--font-sans);
151
+ font-size: 14px;
152
+ line-height: 20px;
153
+ font-weight: 400;
154
+ }
155
+
156
+ .hds-text-caption {
157
+ font-family: var(--font-sans);
158
+ font-size: 12px;
159
+ line-height: 16px;
160
+ font-weight: 500;
161
+ }
162
+
163
+ .hds-text-button {
164
+ font-family: var(--font-sans);
165
+ font-size: 16px;
166
+ line-height: 24px;
167
+ font-weight: 700;
168
+ }
169
+
170
+ .hds-text-eyebrow {
171
+ font-family: var(--font-sans);
172
+ font-size: 14px;
173
+ line-height: 20px;
174
+ font-weight: 700;
175
+ letter-spacing: 0.025em;
176
+ }
177
+
178
+ .hds-text-section-index {
179
+ font-family: var(--font-mono);
180
+ font-size: 20px;
181
+ line-height: 28px;
182
+ font-weight: 700;
183
+ }
184
+
185
+ .hds-text-mono-sm {
186
+ font-family: var(--font-mono);
187
+ font-size: 14px;
188
+ line-height: 20px;
189
+ font-weight: 500;
190
+ }