@hilum/ui 1.0.0 → 2.0.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 (11) hide show
  1. package/dist/{chunk-M5N5LGRG.js → chunk-H6JZQWX3.js} +60 -15
  2. package/dist/chunk-H6JZQWX3.js.map +1 -0
  3. package/dist/index.js +2 -2
  4. package/dist/index.js.map +1 -1
  5. package/dist/tokens.css +49 -16
  6. package/dist/tokens.d.ts +39 -8
  7. package/dist/tokens.js +1 -1
  8. package/package.json +1 -1
  9. package/src/components/sidebar.tsx +1 -1
  10. package/src/tokens/tokens.ts +37 -9
  11. package/dist/chunk-M5N5LGRG.js.map +0 -1
package/dist/tokens.css CHANGED
@@ -120,21 +120,21 @@
120
120
 
121
121
  @media (prefers-color-scheme: dark) {
122
122
  :root:not([data-theme="light"]) {
123
- --background: #0a0a0a;
123
+ --background: #171717;
124
124
  --foreground: #fafafa;
125
- --card: #171717;
125
+ --card: #262626;
126
126
  --card-foreground: #fafafa;
127
- --surface: #171717;
127
+ --surface: #1a1a1a;
128
128
  --surface-foreground: #f5f5f5;
129
- --border: #262626;
129
+ --border: #404040;
130
130
  --input: #262626;
131
- --muted: #171717;
131
+ --muted: #262626;
132
132
  --muted-foreground: #a3a3a3;
133
- --accent: #330040;
134
- --accent-foreground: #f5d6ff;
133
+ --accent: #404040;
134
+ --accent-foreground: #fafafa;
135
135
  --primary: #c100f1;
136
136
  --primary-foreground: #ffffff;
137
- --secondary: #171717;
137
+ --secondary: #262626;
138
138
  --secondary-foreground: #f5f5f5;
139
139
  --destructive: #ef4444;
140
140
  --destructive-foreground: #ffffff;
@@ -147,21 +147,21 @@
147
147
  }
148
148
 
149
149
  [data-theme="dark"] {
150
- --background: #0a0a0a;
150
+ --background: #171717;
151
151
  --foreground: #fafafa;
152
- --card: #171717;
152
+ --card: #262626;
153
153
  --card-foreground: #fafafa;
154
- --surface: #171717;
154
+ --surface: #1a1a1a;
155
155
  --surface-foreground: #f5f5f5;
156
- --border: #262626;
156
+ --border: #404040;
157
157
  --input: #262626;
158
- --muted: #171717;
158
+ --muted: #262626;
159
159
  --muted-foreground: #a3a3a3;
160
- --accent: #330040;
161
- --accent-foreground: #f5d6ff;
160
+ --accent: #404040;
161
+ --accent-foreground: #fafafa;
162
162
  --primary: #c100f1;
163
163
  --primary-foreground: #ffffff;
164
- --secondary: #171717;
164
+ --secondary: #262626;
165
165
  --secondary-foreground: #f5f5f5;
166
166
  --destructive: #ef4444;
167
167
  --destructive-foreground: #ffffff;
@@ -172,6 +172,32 @@
172
172
  --ring: #c100f1;
173
173
  }
174
174
 
175
+ [data-theme="mid"] {
176
+ --background: #737373;
177
+ --foreground: #fafafa;
178
+ --card: #525252;
179
+ --card-foreground: #fafafa;
180
+ --surface: #525252;
181
+ --surface-foreground: #fafafa;
182
+ --border: #a3a3a3;
183
+ --input: #404040;
184
+ --muted: #525252;
185
+ --muted-foreground: #e5e5e5;
186
+ --accent: #404040;
187
+ --accent-foreground: #fafafa;
188
+ --primary: #c100f1;
189
+ --primary-foreground: #ffffff;
190
+ --secondary: #525252;
191
+ --secondary-foreground: #fafafa;
192
+ --destructive: #ef4444;
193
+ --destructive-foreground: #ffffff;
194
+ --success: #CDEA19;
195
+ --success-foreground: #171717;
196
+ --warning: #fff5bf;
197
+ --warning-foreground: #171717;
198
+ --ring: #c100f1;
199
+ }
200
+
175
201
  @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *, .dark, .dark *));
176
202
 
177
203
  @utility display-xl {
@@ -223,6 +249,13 @@
223
249
  line-height: 1.625;
224
250
  }
225
251
 
252
+ @utility body-sm {
253
+ font-family: var(--font-sans);
254
+ font-size: 0.75rem;
255
+ font-weight: 500;
256
+ line-height: 1.625;
257
+ }
258
+
226
259
  @utility caption {
227
260
  font-family: var(--font-sans);
228
261
  font-size: 0.75rem;
package/dist/tokens.d.ts CHANGED
@@ -69,22 +69,47 @@ declare const tokens: {
69
69
  readonly warningForeground: "#171717";
70
70
  readonly ring: "#c100f1";
71
71
  };
72
+ readonly mid: {
73
+ readonly background: "#737373";
74
+ readonly foreground: "#fafafa";
75
+ readonly card: "#525252";
76
+ readonly cardForeground: "#fafafa";
77
+ readonly surface: "#525252";
78
+ readonly surfaceForeground: "#fafafa";
79
+ readonly border: "#a3a3a3";
80
+ readonly input: "#404040";
81
+ readonly muted: "#525252";
82
+ readonly mutedForeground: "#e5e5e5";
83
+ readonly accent: "#404040";
84
+ readonly accentForeground: "#fafafa";
85
+ readonly primary: "#c100f1";
86
+ readonly primaryForeground: "#ffffff";
87
+ readonly secondary: "#525252";
88
+ readonly secondaryForeground: "#fafafa";
89
+ readonly destructive: "#ef4444";
90
+ readonly destructiveForeground: "#ffffff";
91
+ readonly success: "#CDEA19";
92
+ readonly successForeground: "#171717";
93
+ readonly warning: "#fff5bf";
94
+ readonly warningForeground: "#171717";
95
+ readonly ring: "#c100f1";
96
+ };
72
97
  readonly dark: {
73
- readonly background: "#0a0a0a";
98
+ readonly background: "#171717";
74
99
  readonly foreground: "#fafafa";
75
- readonly card: "#171717";
100
+ readonly card: "#262626";
76
101
  readonly cardForeground: "#fafafa";
77
- readonly surface: "#171717";
102
+ readonly surface: "#1a1a1a";
78
103
  readonly surfaceForeground: "#f5f5f5";
79
- readonly border: "#262626";
104
+ readonly border: "#404040";
80
105
  readonly input: "#262626";
81
- readonly muted: "#171717";
106
+ readonly muted: "#262626";
82
107
  readonly mutedForeground: "#a3a3a3";
83
- readonly accent: "#330040";
84
- readonly accentForeground: "#f5d6ff";
108
+ readonly accent: "#404040";
109
+ readonly accentForeground: "#fafafa";
85
110
  readonly primary: "#c100f1";
86
111
  readonly primaryForeground: "#ffffff";
87
- readonly secondary: "#171717";
112
+ readonly secondary: "#262626";
88
113
  readonly secondaryForeground: "#f5f5f5";
89
114
  readonly destructive: "#ef4444";
90
115
  readonly destructiveForeground: "#ffffff";
@@ -144,6 +169,12 @@ declare const tokens: {
144
169
  readonly weight: 400;
145
170
  readonly lineHeight: "1.625";
146
171
  };
172
+ readonly "body-sm": {
173
+ readonly family: "sans";
174
+ readonly size: "0.75rem";
175
+ readonly weight: 500;
176
+ readonly lineHeight: "1.625";
177
+ };
147
178
  readonly caption: {
148
179
  readonly family: "sans";
149
180
  readonly size: "0.75rem";
package/dist/tokens.js CHANGED
@@ -1,3 +1,3 @@
1
- export { tokens } from './chunk-M5N5LGRG.js';
1
+ export { tokens } from './chunk-H6JZQWX3.js';
2
2
  //# sourceMappingURL=tokens.js.map
3
3
  //# sourceMappingURL=tokens.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hilum/ui",
3
- "version": "1.0.0",
3
+ "version": "2.0.0",
4
4
  "private": false,
5
5
  "description": "Hilum UI — design system primitives (Button, Input, Dialog, Combobox, …) + tokens + fonts + icons",
6
6
  "license": "MIT",
package/src/components/sidebar.tsx CHANGED
@@ -412,7 +412,7 @@ function SidebarMenuButton({
412
412
  data-size={size}
413
413
  className={cn(
414
414
  // Base
415
- "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 body text-left",
415
+ "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 body-sm text-left",
416
416
  "outline-none ring-ground-900",
417
417
  "transition-[width,height,padding] duration-150",
418
418
  "hover:bg-ground-100 hover:text-ground-900",
package/src/tokens/tokens.ts CHANGED
@@ -102,22 +102,49 @@ export const tokens = {
102
102
  warningForeground: "#171717", // ground-900
103
103
  ring: "#c100f1", // purple-500 = brand.primary
104
104
  },
105
+ // Mid — a neutral medium-gray theme (from the Pappery designer "mid" palette,
106
+ // mapped onto the ground scale). Sits between light and dark.
107
+ mid: {
108
+ background: "#737373", // ground-500 — main surface (designer panel)
109
+ foreground: "#fafafa", // ground-50
110
+ card: "#525252", // ground-600 — elevated items (designer item-bg)
111
+ cardForeground: "#fafafa",
112
+ surface: "#525252", // ground-600 (designer canvas/pane)
113
+ surfaceForeground: "#fafafa",
114
+ border: "#a3a3a3", // ground-400 (designer border — lighter so it reads on the gray)
115
+ input: "#404040", // ground-700 (designer input-bg)
116
+ muted: "#525252", // ground-600
117
+ mutedForeground: "#e5e5e5", // ground-200 (designer text-secondary)
118
+ accent: "#404040", // ground-700 (designer item-hover-bg)
119
+ accentForeground: "#fafafa",
120
+ primary: "#c100f1", // brand stays consistent across themes
121
+ primaryForeground: "#ffffff",
122
+ secondary: "#525252", // ground-600
123
+ secondaryForeground: "#fafafa",
124
+ destructive: "#ef4444", // red-500
125
+ destructiveForeground: "#ffffff",
126
+ success: "#CDEA19", // lime — functional semantic only
127
+ successForeground: "#171717",
128
+ warning: "#fff5bf", // butter-200
129
+ warningForeground: "#171717",
130
+ ring: "#c100f1",
131
+ },
105
132
  dark: {
106
- background: "#0a0a0a", // ground-950
133
+ background: "#171717", // ground-900 — designer canvas (deepest)
107
134
  foreground: "#fafafa", // ground-50
108
- card: "#171717", // ground-900
135
+ card: "#262626", // ground-800 — designer panel-bg (elevated over bg)
109
136
  cardForeground: "#fafafa",
110
- surface: "#171717",
137
+ surface: "#1a1a1a", // designer item-hover depth
111
138
  surfaceForeground: "#f5f5f5",
112
- border: "#262626", // ground-800
113
- input: "#262626",
114
- muted: "#171717",
139
+ border: "#404040", // ground-700 — designer border (reads on the dark)
140
+ input: "#262626", // ground-800
141
+ muted: "#262626", // ground-800
115
142
  mutedForeground: "#a3a3a3", // ground-400
116
- accent: "#330040", // purple-900
117
- accentForeground: "#f5d6ff", // purple-100
143
+ accent: "#404040", // ground-700 — neutral elevated/hover (designer item-hover)
144
+ accentForeground: "#fafafa",
118
145
  primary: "#c100f1", // purple-500 — brand stays consistent (D8)
119
146
  primaryForeground: "#ffffff",
120
- secondary: "#171717",
147
+ secondary: "#262626", // ground-800
121
148
  secondaryForeground: "#f5f5f5",
122
149
  destructive: "#ef4444", // red-500 (slightly lighter for dark)
123
150
  destructiveForeground: "#ffffff",
@@ -148,6 +175,7 @@ export const tokens = {
148
175
  subheading: { family: "serif", size: "1.25rem", weight: 400, lineHeight: "1.4" },
149
176
  "body-lg": { family: "sans", size: "1rem", weight: 400, lineHeight: "1.625" },
150
177
  body: { family: "sans", size: "0.875rem", weight: 400, lineHeight: "1.625" },
178
+ "body-sm": { family: "sans", size: "0.75rem", weight: 500, lineHeight: "1.625" },
151
179
  caption: { family: "sans", size: "0.75rem", weight: 400, lineHeight: "1.625" },
152
180
  "caption-xs": { family: "sans", size: "0.625rem", weight: 400, lineHeight: "1.625" },
153
181
 
package/dist/chunk-M5N5LGRG.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/tokens/tokens.ts"],"names":[],"mappings":"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","file":"chunk-M5N5LGRG.js","sourcesContent":["// @hilum/ui/tokens — JS-first design tokens (D6).\n//\n// This module is the single source of truth for the Hilum visual identity.\n// A build step (scripts/build-tokens.mjs) reads the compiled output of this\n// file and emits dist/tokens.css for consumers to `@import`.\n//\n// Brand model: D8 — base palette is fixed here. Per-product overrides are\n// applied at runtime via createTheme() in @hilum/ui/create-theme.\n// Color modes: D7 — light + dark, both auto (`prefers-color-scheme`) and\n// explicit via `[data-theme]`.\n//\n// Core brand colors:\n// brand.primary #C100F1 — vivid purple — purple-500 on the scale below\n// brand.secondary #FFF5BF — pale lemon — butter-200 on the scale below\n//\n// ground — neutral spine for text, borders, and structure (values: Tailwind neutral)\n\nexport const tokens = {\n /* ============================================================== *\n * PALETTE — concrete colors *\n * ============================================================== */\n\n ground: {\n 50: \"#fafafa\",\n 100: \"#f5f5f5\",\n 200: \"#e5e5e5\",\n 300: \"#d4d4d4\",\n 400: \"#a3a3a3\",\n 500: \"#737373\",\n 600: \"#525252\",\n 700: \"#404040\",\n 800: \"#262626\",\n 900: \"#171717\",\n 950: \"#0a0a0a\",\n },\n\n // Pale lemon — anchor: butter-200 = #FFF5BF\n butter: {\n 50: \"#ffffe8\",\n 100: \"#fffad0\",\n 200: \"#fff5bf\",\n 300: \"#fde870\",\n 400: \"#f6d42a\",\n 500: \"#dab010\",\n 600: \"#a88008\",\n 700: \"#7c5c04\",\n 800: \"#543e02\",\n 900: \"#382801\",\n 950: \"#221600\",\n },\n\n // Vivid purple — anchor: purple-500 = #C100F1 (brand.primary)\n purple: {\n 50: \"#fdf0ff\",\n 100: \"#f5d6ff\",\n 200: \"#e8a8ff\",\n 300: \"#d870f9\",\n 400: \"#c840f6\",\n 500: \"#c100f1\",\n 600: \"#9c00c0\",\n 700: \"#740092\",\n 800: \"#4e0062\",\n 900: \"#330040\",\n 950: \"#200028\",\n },\n\n // Legacy functional colors — used by components not yet migrated to the new palette.\n brand: {\n primary: \"#C100F1\", // purple-500\n secondary: \"#FFF5BF\", // butter-200\n },\n\n destructive: \"#dc2626\", // red-600\n\n /* ============================================================== *\n * SEMANTIC — what components reference *\n * ============================================================== */\n\n semantic: {\n light: {\n background: \"#ffffff\",\n foreground: \"#171717\", // ground-900\n card: \"#ffffff\",\n cardForeground: \"#171717\",\n surface: \"#fafafa\", // ground-50\n surfaceForeground: \"#262626\", // ground-800\n border: \"#f5f5f5\", // ground-100\n input: \"#f5f5f5\",\n muted: \"#fafafa\",\n mutedForeground: \"#737373\", // ground-500\n accent: \"#fdf0ff\", // purple-50\n accentForeground: \"#740092\", // purple-700\n primary: \"#c100f1\", // purple-500 = brand.primary\n primaryForeground: \"#ffffff\",\n secondary: \"#fafafa\", // ground-50\n secondaryForeground: \"#404040\", // ground-700\n destructive: \"#dc2626\",\n destructiveForeground: \"#ffffff\",\n success: \"#CDEA19\", // lime — functional semantic only\n successForeground: \"#171717\",\n warning: \"#fff5bf\", // butter-200 = brand.secondary\n warningForeground: \"#171717\", // ground-900\n ring: \"#c100f1\", // purple-500 = brand.primary\n },\n dark: {\n background: \"#0a0a0a\", // ground-950\n foreground: \"#fafafa\", // ground-50\n card: \"#171717\", // ground-900\n cardForeground: \"#fafafa\",\n surface: \"#171717\",\n surfaceForeground: \"#f5f5f5\",\n border: \"#262626\", // ground-800\n input: \"#262626\",\n muted: \"#171717\",\n mutedForeground: \"#a3a3a3\", // ground-400\n accent: \"#330040\", // purple-900\n accentForeground: \"#f5d6ff\", // purple-100\n primary: \"#c100f1\", // purple-500 — brand stays consistent (D8)\n primaryForeground: \"#ffffff\",\n secondary: \"#171717\",\n secondaryForeground: \"#f5f5f5\",\n destructive: \"#ef4444\", // red-500 (slightly lighter for dark)\n destructiveForeground: \"#ffffff\",\n success: \"#CDEA19\", // lime — functional semantic only\n successForeground: \"#0a0a0a\",\n warning: \"#221600\", // butter-950 surface\n warningForeground: \"#fffad0\", // butter-100\n ring: \"#c100f1\", // purple-500 = brand.primary\n },\n },\n\n /* ============================================================== *\n * TYPOGRAPHY *\n * ============================================================== */\n\n fontFamily: {\n sans: 'Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif',\n serif: '\"Instrument Serif\", ui-serif, Georgia, serif',\n mono: 'ui-monospace, \"SFMono-Regular\", \"Menlo\", \"Consolas\", monospace',\n },\n\n /** Type scale utilities — emitted as Tailwind v4 `@utility` blocks. */\n typeScale: {\n \"display-xl\": { family: \"serif\", size: \"3rem\", weight: 400, lineHeight: \"1.15\" },\n display: { family: \"serif\", size: \"2.25rem\", weight: 400, lineHeight: \"1.15\" },\n \"heading-xl\": { family: \"serif\", size: \"1.875rem\", weight: 400, lineHeight: \"1.2\" },\n heading: { family: \"serif\", size: \"1.5rem\", weight: 400, lineHeight: \"1.2\" },\n subheading: { family: \"serif\", size: \"1.25rem\", weight: 400, lineHeight: \"1.4\" },\n \"body-lg\": { family: \"sans\", size: \"1rem\", weight: 400, lineHeight: \"1.625\" },\n body: { family: \"sans\", size: \"0.875rem\", weight: 400, lineHeight: \"1.625\" },\n caption: { family: \"sans\", size: \"0.75rem\", weight: 400, lineHeight: \"1.625\" },\n \"caption-xs\": { family: \"sans\", size: \"0.625rem\", weight: 400, lineHeight: \"1.625\" },\n\n /* --- \"Eyebrow\" family — uppercase tracked label used above headlines, --- *\n * on badges, and on section markers. `eyebrow` is the canonical name; *\n * `overline` (Material parlance), `kicker` (editorial parlance) and *\n * `label` (legacy) are aliases of the same scale so consumers can pick *\n * whichever vocabulary reads best in their context. `eyebrow-sm` is *\n * the compact variant for badge-sized chips and tiny status pills. */\n eyebrow: {\n family: \"sans\",\n size: \"0.75rem\",\n weight: 600,\n lineHeight: \"1\",\n letterSpacing: \"0.1em\",\n textTransform: \"uppercase\" as const,\n },\n \"eyebrow-sm\": {\n family: \"sans\",\n size: \"0.625rem\",\n weight: 600,\n lineHeight: \"1\",\n letterSpacing: \"0.1em\",\n textTransform: \"uppercase\" as const,\n },\n overline: {\n family: \"sans\",\n size: \"0.75rem\",\n weight: 600,\n lineHeight: \"1\",\n letterSpacing: \"0.1em\",\n textTransform: \"uppercase\" as const,\n },\n kicker: {\n family: \"sans\",\n size: \"0.75rem\",\n weight: 600,\n lineHeight: \"1\",\n letterSpacing: \"0.1em\",\n textTransform: \"uppercase\" as const,\n },\n label: {\n family: \"sans\",\n size: \"0.75rem\",\n weight: 600,\n lineHeight: \"1\",\n letterSpacing: \"0.1em\",\n textTransform: \"uppercase\" as const,\n },\n },\n\n /* ============================================================== *\n * GEOMETRY *\n * ============================================================== */\n\n radius: {\n base: \"0.5rem\",\n sm: \"calc(0.5rem - 4px)\",\n md: \"calc(0.5rem - 2px)\",\n lg: \"calc(0.5rem + 2px)\",\n xl: \"calc(0.5rem + 4px)\",\n full: \"9999px\",\n },\n\n /* ============================================================== *\n * Z-INDEX — semantic layering scale *\n * ============================================================== */\n\n zIndex: {\n dropdown: 40,\n sticky: 50,\n fixed: 60,\n modal: 100,\n popover: 110,\n tooltip: 120,\n },\n\n shadow: {\n natural:\n \"0 0px 0px 1px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06)\",\n elevated:\n \"0 0px 0px 1px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06), 0 6px 6px -3px rgba(0, 0, 0, 0.06), 0 12px 12px -6px rgba(0, 0, 0, 0.04), 0 24px 24px -12px rgba(0, 0, 0, 0.04), 0 24px 24px 2px rgba(0, 0, 0, 0.1)\",\n },\n\n /* ============================================================== *\n * ANIMATION *\n * ============================================================== */\n\n animation: {\n \"accordion-down\": \"accordion-down 0.2s ease-out\",\n \"accordion-up\": \"accordion-up 0.2s ease-out\",\n \"caret-blink\": \"caret-blink 1.25s ease-out infinite\",\n },\n} as const;\n\nexport type Tokens = typeof tokens;\nexport type SemanticTokens = typeof tokens.semantic.light;\n"]}