@rokkit/themes 1.0.2 → 1.0.4

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/LICENSE +21 -0
  2. package/build.mjs +1 -5
  3. package/dist/base.css +132 -4
  4. package/dist/index.css +132 -4
  5. package/package.json +2 -2
  6. package/src/base/density.css +3 -3
  7. package/src/base/gradient-border.css +32 -0
  8. package/src/base/index.css +3 -0
  9. package/src/base/item.css +13 -0
  10. package/src/base/layout.css +17 -0
  11. package/src/base/radius.css +41 -0
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025 Jerry Thomas
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/build.mjs CHANGED
@@ -118,7 +118,6 @@ function fixModeSelectors(css) {
118
118
  let i = 0
119
119
 
120
120
  while (i < css.length) {
121
- // Find next { (opening of a declarations block)
122
121
  const braceOpen = css.indexOf('{', i)
123
122
  if (braceOpen === -1) {
124
123
  result += css.slice(i)
@@ -127,9 +126,7 @@ function fixModeSelectors(css) {
127
126
 
128
127
  const selectorText = css.slice(i, braceOpen)
129
128
 
130
- // Only expand selectors that contain the problematic pattern
131
129
  if (modePattern.test(selectorText)) {
132
- // Split on comma, but only top-level commas (not inside :not(), :is(), etc.)
133
130
  const parts = splitTopLevelSelectors(selectorText)
134
131
  const expanded = []
135
132
 
@@ -140,7 +137,7 @@ function fixModeSelectors(css) {
140
137
  // Compound form: [data-mode="X"][data-style="Y"]rest (same-element match)
141
138
  expanded.push(`${ws}${modeSelector}${styleSelector}${rest}`)
142
139
  }
143
- // Always include original descendant form
140
+ // Always include original :is() form
144
141
  expanded.push(part)
145
142
  }
146
143
 
@@ -149,7 +146,6 @@ function fixModeSelectors(css) {
149
146
  result += selectorText + '{'
150
147
  }
151
148
 
152
- // Find the matching closing brace, handling nesting
153
149
  let depth = 1
154
150
  let j = braceOpen + 1
155
151
  while (j < css.length && depth > 0) {
package/dist/base.css CHANGED
@@ -2,7 +2,7 @@
2
2
  :root {
3
3
  --scroll-width: 0.5rem;
4
4
  --tab-size: 2;
5
- --color-surface:148,163,184;--color-surface-50:248,250,252;--color-surface-100:241,245,249;--color-surface-200:226,232,240;--color-surface-300:203,213,225;--color-surface-400:148,163,184;--color-surface-500:100,116,139;--color-surface-600:71,85,105;--color-surface-700:51,65,85;--color-surface-800:30,41,59;--color-surface-900:15,23,42;--color-surface-950:2,6,23;--color-primary:251,146,60;--color-primary-50:255,247,237;--color-primary-100:255,237,213;--color-primary-200:254,215,170;--color-primary-300:253,186,116;--color-primary-400:251,146,60;--color-primary-500:249,115,22;--color-primary-600:234,88,12;--color-primary-700:194,65,12;--color-primary-800:154,52,18;--color-primary-900:124,45,18;--color-primary-950:67,20,7;--color-secondary:244,114,182;--color-secondary-50:253,242,248;--color-secondary-100:252,231,243;--color-secondary-200:251,207,232;--color-secondary-300:249,168,212;--color-secondary-400:244,114,182;--color-secondary-500:236,72,153;--color-secondary-600:219,39,119;--color-secondary-700:190,24,93;--color-secondary-800:157,23,77;--color-secondary-900:131,24,67;--color-secondary-950:80,7,36;--color-accent:56,189,248;--color-accent-50:240,249,255;--color-accent-100:224,242,254;--color-accent-200:186,230,253;--color-accent-300:125,211,252;--color-accent-400:56,189,248;--color-accent-500:14,165,233;--color-accent-600:2,132,199;--color-accent-700:3,105,161;--color-accent-800:7,89,133;--color-accent-900:12,74,110;--color-accent-950:8,47,73;--color-success:74,222,128;--color-success-50:240,253,244;--color-success-100:220,252,231;--color-success-200:187,247,208;--color-success-300:134,239,172;--color-success-400:74,222,128;--color-success-500:34,197,94;--color-success-600:22,163,74;--color-success-700:21,128,61;--color-success-800:22,101,52;--color-success-900:20,83,45;--color-success-950:5,46,22;--color-warning:250,204,21;--color-warning-50:254,252,232;--color-warning-100:254,249,195;--color-warning-200:254,240,138;--color-warning-300:253,224,71;--color-warning-400:250,204,21;--color-warning-500:234,179,8;--color-warning-600:202,138,4;--color-warning-700:161,98,7;--color-warning-800:133,77,14;--color-warning-900:113,63,18;--color-warning-950:66,32,6;--color-danger:248,113,113;--color-danger-50:254,242,242;--color-danger-100:254,226,226;--color-danger-200:254,202,202;--color-danger-300:252,165,165;--color-danger-400:248,113,113;--color-danger-500:239,68,68;--color-danger-600:220,38,38;--color-danger-700:185,28,28;--color-danger-800:153,27,27;--color-danger-900:127,29,29;--color-danger-950:69,10,10;--color-error:248,113,113;--color-error-50:254,242,242;--color-error-100:254,226,226;--color-error-200:254,202,202;--color-error-300:252,165,165;--color-error-400:248,113,113;--color-error-500:239,68,68;--color-error-600:220,38,38;--color-error-700:185,28,28;--color-error-800:153,27,27;--color-error-900:127,29,29;--color-error-950:69,10,10;--color-info:34,211,238;--color-info-50:236,254,255;--color-info-100:207,250,254;--color-info-200:165,243,252;--color-info-300:103,232,249;--color-info-400:34,211,238;--color-info-500:6,182,212;--color-info-600:8,145,178;--color-info-700:14,116,144;--color-info-800:21,94,117;--color-info-900:22,78,99;--color-info-950:8,51,68;
5
+ --color-surface:148,163,184;--color-surface-50:248,250,252;--color-surface-100:241,245,249;--color-surface-200:226,232,240;--color-surface-300:203,213,225;--color-surface-400:148,163,184;--color-surface-500:100,116,139;--color-surface-600:71,85,105;--color-surface-700:51,65,85;--color-surface-800:30,41,59;--color-surface-900:15,23,42;--color-surface-950:2,6,23;--color-primary:251,146,60;--color-primary-50:255,247,237;--color-primary-100:255,237,213;--color-primary-200:254,215,170;--color-primary-300:253,186,116;--color-primary-400:251,146,60;--color-primary-500:249,115,22;--color-primary-600:234,88,12;--color-primary-700:194,65,12;--color-primary-800:154,52,18;--color-primary-900:124,45,18;--color-primary-950:67,20,7;--color-secondary:244,114,182;--color-secondary-50:253,242,248;--color-secondary-100:252,231,243;--color-secondary-200:251,207,232;--color-secondary-300:249,168,212;--color-secondary-400:244,114,182;--color-secondary-500:236,72,153;--color-secondary-600:219,39,119;--color-secondary-700:190,24,93;--color-secondary-800:157,23,77;--color-secondary-900:131,24,67;--color-secondary-950:80,7,36;--color-tertiary:167,139,250;--color-tertiary-50:245,243,255;--color-tertiary-100:237,233,254;--color-tertiary-200:221,214,254;--color-tertiary-300:196,181,253;--color-tertiary-400:167,139,250;--color-tertiary-500:139,92,246;--color-tertiary-600:124,58,237;--color-tertiary-700:109,40,217;--color-tertiary-800:91,33,182;--color-tertiary-900:76,29,149;--color-tertiary-950:46,16,101;--color-accent:56,189,248;--color-accent-50:240,249,255;--color-accent-100:224,242,254;--color-accent-200:186,230,253;--color-accent-300:125,211,252;--color-accent-400:56,189,248;--color-accent-500:14,165,233;--color-accent-600:2,132,199;--color-accent-700:3,105,161;--color-accent-800:7,89,133;--color-accent-900:12,74,110;--color-accent-950:8,47,73;--color-success:74,222,128;--color-success-50:240,253,244;--color-success-100:220,252,231;--color-success-200:187,247,208;--color-success-300:134,239,172;--color-success-400:74,222,128;--color-success-500:34,197,94;--color-success-600:22,163,74;--color-success-700:21,128,61;--color-success-800:22,101,52;--color-success-900:20,83,45;--color-success-950:5,46,22;--color-warning:250,204,21;--color-warning-50:254,252,232;--color-warning-100:254,249,195;--color-warning-200:254,240,138;--color-warning-300:253,224,71;--color-warning-400:250,204,21;--color-warning-500:234,179,8;--color-warning-600:202,138,4;--color-warning-700:161,98,7;--color-warning-800:133,77,14;--color-warning-900:113,63,18;--color-warning-950:66,32,6;--color-danger:248,113,113;--color-danger-50:254,242,242;--color-danger-100:254,226,226;--color-danger-200:254,202,202;--color-danger-300:252,165,165;--color-danger-400:248,113,113;--color-danger-500:239,68,68;--color-danger-600:220,38,38;--color-danger-700:185,28,28;--color-danger-800:153,27,27;--color-danger-900:127,29,29;--color-danger-950:69,10,10;--color-error:248,113,113;--color-error-50:254,242,242;--color-error-100:254,226,226;--color-error-200:254,202,202;--color-error-300:252,165,165;--color-error-400:248,113,113;--color-error-500:239,68,68;--color-error-600:220,38,38;--color-error-700:185,28,28;--color-error-800:153,27,27;--color-error-900:127,29,29;--color-error-950:69,10,10;--color-info:34,211,238;--color-info-50:236,254,255;--color-info-100:207,250,254;--color-info-200:165,243,252;--color-info-300:103,232,249;--color-info-400:34,211,238;--color-info-500:6,182,212;--color-info-600:8,145,178;--color-info-700:14,116,144;--color-info-800:21,94,117;--color-info-900:22,78,99;--color-info-950:8,51,68;
6
6
  }
7
7
  }
8
8
 
@@ -40,6 +40,17 @@
40
40
  --color-secondary-z8: var(--color-secondary-800);
41
41
  --color-secondary-z9: var(--color-secondary-900);
42
42
  --color-secondary-z10: var(--color-secondary-950);
43
+ --color-tertiary-z0: var(--color-tertiary-50);
44
+ --color-tertiary-z1: var(--color-tertiary-100);
45
+ --color-tertiary-z2: var(--color-tertiary-200);
46
+ --color-tertiary-z3: var(--color-tertiary-300);
47
+ --color-tertiary-z4: var(--color-tertiary-400);
48
+ --color-tertiary-z5: var(--color-tertiary-500);
49
+ --color-tertiary-z6: var(--color-tertiary-600);
50
+ --color-tertiary-z7: var(--color-tertiary-700);
51
+ --color-tertiary-z8: var(--color-tertiary-800);
52
+ --color-tertiary-z9: var(--color-tertiary-900);
53
+ --color-tertiary-z10: var(--color-tertiary-950);
43
54
  --color-accent-z0: var(--color-accent-50);
44
55
  --color-accent-z1: var(--color-accent-100);
45
56
  --color-accent-z2: var(--color-accent-200);
@@ -141,6 +152,17 @@
141
152
  --color-secondary-z8: var(--color-secondary-200);
142
153
  --color-secondary-z9: var(--color-secondary-100);
143
154
  --color-secondary-z10: var(--color-secondary-50);
155
+ --color-tertiary-z0: var(--color-tertiary-950);
156
+ --color-tertiary-z1: var(--color-tertiary-900);
157
+ --color-tertiary-z2: var(--color-tertiary-800);
158
+ --color-tertiary-z3: var(--color-tertiary-700);
159
+ --color-tertiary-z4: var(--color-tertiary-600);
160
+ --color-tertiary-z5: var(--color-tertiary-500);
161
+ --color-tertiary-z6: var(--color-tertiary-400);
162
+ --color-tertiary-z7: var(--color-tertiary-300);
163
+ --color-tertiary-z8: var(--color-tertiary-200);
164
+ --color-tertiary-z9: var(--color-tertiary-100);
165
+ --color-tertiary-z10: var(--color-tertiary-50);
144
166
  --color-accent-z0: var(--color-accent-950);
145
167
  --color-accent-z1: var(--color-accent-900);
146
168
  --color-accent-z2: var(--color-accent-800);
@@ -268,7 +290,7 @@
268
290
  --density-line-height: 1.5;
269
291
  --density-icon-size: 1.25rem;
270
292
  --density-border-width: 1px;
271
- --density-radius-base: var(--radius-md, 0.375rem);
293
+ --density-radius-base: var(--radius-md);
272
294
  }
273
295
 
274
296
  [data-density='compact'] {
@@ -282,7 +304,7 @@
282
304
  --density-line-height: 1.375;
283
305
  --density-icon-size: 1rem;
284
306
  --density-border-width: 1px;
285
- --density-radius-base: var(--radius-sm, 0.25rem);
307
+ --density-radius-base: var(--radius-sm);
286
308
  }
287
309
 
288
310
  [data-density='cozy'] {
@@ -296,7 +318,100 @@
296
318
  --density-line-height: 1.75;
297
319
  --density-icon-size: 1.5rem;
298
320
  --density-border-width: 1px;
299
- --density-radius-base: var(--radius-lg, 0.5rem);
321
+ --density-radius-base: var(--radius-lg);
322
+ }
323
+
324
+ /**
325
+ * Roundedness Axis — CSS Custom Property Scale
326
+ *
327
+ * Decoupled from density. Place data-radius on any container;
328
+ * descendants inherit automatically.
329
+ *
330
+ * Presets: sharp → soft (default) → rounded → pill
331
+ */
332
+
333
+ :root,
334
+ [data-radius='soft'] {
335
+ --radius-sm: 0.125rem;
336
+ --radius-md: 0.375rem;
337
+ --radius-lg: 0.625rem;
338
+ --radius-xl: 0.75rem;
339
+ --radius-full: 9999px;
340
+ }
341
+
342
+ [data-radius='sharp'] {
343
+ --radius-sm: 0;
344
+ --radius-md: 0;
345
+ --radius-lg: 0;
346
+ --radius-xl: 0;
347
+ --radius-full: 9999px;
348
+ }
349
+
350
+ [data-radius='rounded'] {
351
+ --radius-sm: 0.25rem;
352
+ --radius-md: 0.5rem;
353
+ --radius-lg: 0.75rem;
354
+ --radius-xl: 1rem;
355
+ --radius-full: 9999px;
356
+ }
357
+
358
+ [data-radius='pill'] {
359
+ --radius-sm: 9999px;
360
+ --radius-md: 9999px;
361
+ --radius-lg: 9999px;
362
+ --radius-xl: 9999px;
363
+ --radius-full: 9999px;
364
+ }
365
+
366
+ /**
367
+ * Layout Tokens — App-Level Spacing
368
+ *
369
+ * Structural layout dimensions for app shells.
370
+ * Override per-app by redefining these custom properties.
371
+ */
372
+
373
+ :root {
374
+ --layout-sidebar-width: 240px;
375
+ --layout-sidebar-collapsed: 64px;
376
+ --layout-header-height: 56px;
377
+ --layout-content-max-width: 1280px;
378
+ --layout-section-gap: 2rem;
379
+ --layout-section-padding: 1.5rem;
380
+ --layout-content-padding: 2rem;
381
+ --layout-card-gap: 1rem;
382
+ }
383
+
384
+ /**
385
+ * Gradient Border Wrapper — Base Structural CSS
386
+ *
387
+ * Usage:
388
+ * <div data-gradient-border>
389
+ * <div data-gradient-border-inner>content</div>
390
+ * </div>
391
+ *
392
+ * Themes set the gradient on [data-gradient-border] background.
393
+ * Non-gradient themes set background: transparent and use regular border.
394
+ */
395
+
396
+ [data-gradient-border] {
397
+ padding: var(--density-border-width, 1px);
398
+ border-radius: var(--density-radius-base, var(--radius-md));
399
+ background: var(--gradient-border-bg, transparent);
400
+ }
401
+
402
+ [data-gradient-border-inner] {
403
+ border-radius: calc(var(--density-radius-base, var(--radius-md)) - var(--density-border-width, 1px));
404
+ background: var(--gradient-border-inner-bg, inherit);
405
+ }
406
+
407
+ /* Fallback: when no gradient, use a standard border */
408
+ [data-gradient-border]:not([style*='--gradient-border-bg']) {
409
+ padding: 0;
410
+ border: var(--density-border-width, 1px) solid var(--gradient-border-color, currentColor);
411
+ }
412
+
413
+ [data-gradient-border]:not([style*='--gradient-border-bg']) [data-gradient-border-inner] {
414
+ border-radius: var(--density-radius-base, var(--radius-md));
300
415
  }
301
416
 
302
417
  /**
@@ -569,6 +684,19 @@
569
684
  flex-shrink: 0;
570
685
  }
571
686
 
687
+
688
+ /* =============================================================================
689
+ Item Icon — Literal (kanji, emoji, text)
690
+ ============================================================================= */
691
+
692
+ [data-item-icon-literal] {
693
+ flex-shrink: 0;
694
+ width: var(--density-icon-size, 1.25rem);
695
+ text-align: center;
696
+ line-height: 1;
697
+ font-size: var(--density-icon-size, 1.25rem);
698
+ }
699
+
572
700
  /* =============================================================================
573
701
  Item Avatar
574
702
  ============================================================================= */
package/dist/index.css CHANGED
@@ -2,7 +2,7 @@
2
2
  :root {
3
3
  --scroll-width: 0.5rem;
4
4
  --tab-size: 2;
5
- --color-surface:148,163,184;--color-surface-50:248,250,252;--color-surface-100:241,245,249;--color-surface-200:226,232,240;--color-surface-300:203,213,225;--color-surface-400:148,163,184;--color-surface-500:100,116,139;--color-surface-600:71,85,105;--color-surface-700:51,65,85;--color-surface-800:30,41,59;--color-surface-900:15,23,42;--color-surface-950:2,6,23;--color-primary:251,146,60;--color-primary-50:255,247,237;--color-primary-100:255,237,213;--color-primary-200:254,215,170;--color-primary-300:253,186,116;--color-primary-400:251,146,60;--color-primary-500:249,115,22;--color-primary-600:234,88,12;--color-primary-700:194,65,12;--color-primary-800:154,52,18;--color-primary-900:124,45,18;--color-primary-950:67,20,7;--color-secondary:244,114,182;--color-secondary-50:253,242,248;--color-secondary-100:252,231,243;--color-secondary-200:251,207,232;--color-secondary-300:249,168,212;--color-secondary-400:244,114,182;--color-secondary-500:236,72,153;--color-secondary-600:219,39,119;--color-secondary-700:190,24,93;--color-secondary-800:157,23,77;--color-secondary-900:131,24,67;--color-secondary-950:80,7,36;--color-accent:56,189,248;--color-accent-50:240,249,255;--color-accent-100:224,242,254;--color-accent-200:186,230,253;--color-accent-300:125,211,252;--color-accent-400:56,189,248;--color-accent-500:14,165,233;--color-accent-600:2,132,199;--color-accent-700:3,105,161;--color-accent-800:7,89,133;--color-accent-900:12,74,110;--color-accent-950:8,47,73;--color-success:74,222,128;--color-success-50:240,253,244;--color-success-100:220,252,231;--color-success-200:187,247,208;--color-success-300:134,239,172;--color-success-400:74,222,128;--color-success-500:34,197,94;--color-success-600:22,163,74;--color-success-700:21,128,61;--color-success-800:22,101,52;--color-success-900:20,83,45;--color-success-950:5,46,22;--color-warning:250,204,21;--color-warning-50:254,252,232;--color-warning-100:254,249,195;--color-warning-200:254,240,138;--color-warning-300:253,224,71;--color-warning-400:250,204,21;--color-warning-500:234,179,8;--color-warning-600:202,138,4;--color-warning-700:161,98,7;--color-warning-800:133,77,14;--color-warning-900:113,63,18;--color-warning-950:66,32,6;--color-danger:248,113,113;--color-danger-50:254,242,242;--color-danger-100:254,226,226;--color-danger-200:254,202,202;--color-danger-300:252,165,165;--color-danger-400:248,113,113;--color-danger-500:239,68,68;--color-danger-600:220,38,38;--color-danger-700:185,28,28;--color-danger-800:153,27,27;--color-danger-900:127,29,29;--color-danger-950:69,10,10;--color-error:248,113,113;--color-error-50:254,242,242;--color-error-100:254,226,226;--color-error-200:254,202,202;--color-error-300:252,165,165;--color-error-400:248,113,113;--color-error-500:239,68,68;--color-error-600:220,38,38;--color-error-700:185,28,28;--color-error-800:153,27,27;--color-error-900:127,29,29;--color-error-950:69,10,10;--color-info:34,211,238;--color-info-50:236,254,255;--color-info-100:207,250,254;--color-info-200:165,243,252;--color-info-300:103,232,249;--color-info-400:34,211,238;--color-info-500:6,182,212;--color-info-600:8,145,178;--color-info-700:14,116,144;--color-info-800:21,94,117;--color-info-900:22,78,99;--color-info-950:8,51,68;
5
+ --color-surface:148,163,184;--color-surface-50:248,250,252;--color-surface-100:241,245,249;--color-surface-200:226,232,240;--color-surface-300:203,213,225;--color-surface-400:148,163,184;--color-surface-500:100,116,139;--color-surface-600:71,85,105;--color-surface-700:51,65,85;--color-surface-800:30,41,59;--color-surface-900:15,23,42;--color-surface-950:2,6,23;--color-primary:251,146,60;--color-primary-50:255,247,237;--color-primary-100:255,237,213;--color-primary-200:254,215,170;--color-primary-300:253,186,116;--color-primary-400:251,146,60;--color-primary-500:249,115,22;--color-primary-600:234,88,12;--color-primary-700:194,65,12;--color-primary-800:154,52,18;--color-primary-900:124,45,18;--color-primary-950:67,20,7;--color-secondary:244,114,182;--color-secondary-50:253,242,248;--color-secondary-100:252,231,243;--color-secondary-200:251,207,232;--color-secondary-300:249,168,212;--color-secondary-400:244,114,182;--color-secondary-500:236,72,153;--color-secondary-600:219,39,119;--color-secondary-700:190,24,93;--color-secondary-800:157,23,77;--color-secondary-900:131,24,67;--color-secondary-950:80,7,36;--color-tertiary:167,139,250;--color-tertiary-50:245,243,255;--color-tertiary-100:237,233,254;--color-tertiary-200:221,214,254;--color-tertiary-300:196,181,253;--color-tertiary-400:167,139,250;--color-tertiary-500:139,92,246;--color-tertiary-600:124,58,237;--color-tertiary-700:109,40,217;--color-tertiary-800:91,33,182;--color-tertiary-900:76,29,149;--color-tertiary-950:46,16,101;--color-accent:56,189,248;--color-accent-50:240,249,255;--color-accent-100:224,242,254;--color-accent-200:186,230,253;--color-accent-300:125,211,252;--color-accent-400:56,189,248;--color-accent-500:14,165,233;--color-accent-600:2,132,199;--color-accent-700:3,105,161;--color-accent-800:7,89,133;--color-accent-900:12,74,110;--color-accent-950:8,47,73;--color-success:74,222,128;--color-success-50:240,253,244;--color-success-100:220,252,231;--color-success-200:187,247,208;--color-success-300:134,239,172;--color-success-400:74,222,128;--color-success-500:34,197,94;--color-success-600:22,163,74;--color-success-700:21,128,61;--color-success-800:22,101,52;--color-success-900:20,83,45;--color-success-950:5,46,22;--color-warning:250,204,21;--color-warning-50:254,252,232;--color-warning-100:254,249,195;--color-warning-200:254,240,138;--color-warning-300:253,224,71;--color-warning-400:250,204,21;--color-warning-500:234,179,8;--color-warning-600:202,138,4;--color-warning-700:161,98,7;--color-warning-800:133,77,14;--color-warning-900:113,63,18;--color-warning-950:66,32,6;--color-danger:248,113,113;--color-danger-50:254,242,242;--color-danger-100:254,226,226;--color-danger-200:254,202,202;--color-danger-300:252,165,165;--color-danger-400:248,113,113;--color-danger-500:239,68,68;--color-danger-600:220,38,38;--color-danger-700:185,28,28;--color-danger-800:153,27,27;--color-danger-900:127,29,29;--color-danger-950:69,10,10;--color-error:248,113,113;--color-error-50:254,242,242;--color-error-100:254,226,226;--color-error-200:254,202,202;--color-error-300:252,165,165;--color-error-400:248,113,113;--color-error-500:239,68,68;--color-error-600:220,38,38;--color-error-700:185,28,28;--color-error-800:153,27,27;--color-error-900:127,29,29;--color-error-950:69,10,10;--color-info:34,211,238;--color-info-50:236,254,255;--color-info-100:207,250,254;--color-info-200:165,243,252;--color-info-300:103,232,249;--color-info-400:34,211,238;--color-info-500:6,182,212;--color-info-600:8,145,178;--color-info-700:14,116,144;--color-info-800:21,94,117;--color-info-900:22,78,99;--color-info-950:8,51,68;
6
6
  }
7
7
  }
8
8
 
@@ -40,6 +40,17 @@
40
40
  --color-secondary-z8: var(--color-secondary-800);
41
41
  --color-secondary-z9: var(--color-secondary-900);
42
42
  --color-secondary-z10: var(--color-secondary-950);
43
+ --color-tertiary-z0: var(--color-tertiary-50);
44
+ --color-tertiary-z1: var(--color-tertiary-100);
45
+ --color-tertiary-z2: var(--color-tertiary-200);
46
+ --color-tertiary-z3: var(--color-tertiary-300);
47
+ --color-tertiary-z4: var(--color-tertiary-400);
48
+ --color-tertiary-z5: var(--color-tertiary-500);
49
+ --color-tertiary-z6: var(--color-tertiary-600);
50
+ --color-tertiary-z7: var(--color-tertiary-700);
51
+ --color-tertiary-z8: var(--color-tertiary-800);
52
+ --color-tertiary-z9: var(--color-tertiary-900);
53
+ --color-tertiary-z10: var(--color-tertiary-950);
43
54
  --color-accent-z0: var(--color-accent-50);
44
55
  --color-accent-z1: var(--color-accent-100);
45
56
  --color-accent-z2: var(--color-accent-200);
@@ -141,6 +152,17 @@
141
152
  --color-secondary-z8: var(--color-secondary-200);
142
153
  --color-secondary-z9: var(--color-secondary-100);
143
154
  --color-secondary-z10: var(--color-secondary-50);
155
+ --color-tertiary-z0: var(--color-tertiary-950);
156
+ --color-tertiary-z1: var(--color-tertiary-900);
157
+ --color-tertiary-z2: var(--color-tertiary-800);
158
+ --color-tertiary-z3: var(--color-tertiary-700);
159
+ --color-tertiary-z4: var(--color-tertiary-600);
160
+ --color-tertiary-z5: var(--color-tertiary-500);
161
+ --color-tertiary-z6: var(--color-tertiary-400);
162
+ --color-tertiary-z7: var(--color-tertiary-300);
163
+ --color-tertiary-z8: var(--color-tertiary-200);
164
+ --color-tertiary-z9: var(--color-tertiary-100);
165
+ --color-tertiary-z10: var(--color-tertiary-50);
144
166
  --color-accent-z0: var(--color-accent-950);
145
167
  --color-accent-z1: var(--color-accent-900);
146
168
  --color-accent-z2: var(--color-accent-800);
@@ -268,7 +290,7 @@
268
290
  --density-line-height: 1.5;
269
291
  --density-icon-size: 1.25rem;
270
292
  --density-border-width: 1px;
271
- --density-radius-base: var(--radius-md, 0.375rem);
293
+ --density-radius-base: var(--radius-md);
272
294
  }
273
295
 
274
296
  [data-density='compact'] {
@@ -282,7 +304,7 @@
282
304
  --density-line-height: 1.375;
283
305
  --density-icon-size: 1rem;
284
306
  --density-border-width: 1px;
285
- --density-radius-base: var(--radius-sm, 0.25rem);
307
+ --density-radius-base: var(--radius-sm);
286
308
  }
287
309
 
288
310
  [data-density='cozy'] {
@@ -296,7 +318,100 @@
296
318
  --density-line-height: 1.75;
297
319
  --density-icon-size: 1.5rem;
298
320
  --density-border-width: 1px;
299
- --density-radius-base: var(--radius-lg, 0.5rem);
321
+ --density-radius-base: var(--radius-lg);
322
+ }
323
+
324
+ /**
325
+ * Roundedness Axis — CSS Custom Property Scale
326
+ *
327
+ * Decoupled from density. Place data-radius on any container;
328
+ * descendants inherit automatically.
329
+ *
330
+ * Presets: sharp → soft (default) → rounded → pill
331
+ */
332
+
333
+ :root,
334
+ [data-radius='soft'] {
335
+ --radius-sm: 0.125rem;
336
+ --radius-md: 0.375rem;
337
+ --radius-lg: 0.625rem;
338
+ --radius-xl: 0.75rem;
339
+ --radius-full: 9999px;
340
+ }
341
+
342
+ [data-radius='sharp'] {
343
+ --radius-sm: 0;
344
+ --radius-md: 0;
345
+ --radius-lg: 0;
346
+ --radius-xl: 0;
347
+ --radius-full: 9999px;
348
+ }
349
+
350
+ [data-radius='rounded'] {
351
+ --radius-sm: 0.25rem;
352
+ --radius-md: 0.5rem;
353
+ --radius-lg: 0.75rem;
354
+ --radius-xl: 1rem;
355
+ --radius-full: 9999px;
356
+ }
357
+
358
+ [data-radius='pill'] {
359
+ --radius-sm: 9999px;
360
+ --radius-md: 9999px;
361
+ --radius-lg: 9999px;
362
+ --radius-xl: 9999px;
363
+ --radius-full: 9999px;
364
+ }
365
+
366
+ /**
367
+ * Layout Tokens — App-Level Spacing
368
+ *
369
+ * Structural layout dimensions for app shells.
370
+ * Override per-app by redefining these custom properties.
371
+ */
372
+
373
+ :root {
374
+ --layout-sidebar-width: 240px;
375
+ --layout-sidebar-collapsed: 64px;
376
+ --layout-header-height: 56px;
377
+ --layout-content-max-width: 1280px;
378
+ --layout-section-gap: 2rem;
379
+ --layout-section-padding: 1.5rem;
380
+ --layout-content-padding: 2rem;
381
+ --layout-card-gap: 1rem;
382
+ }
383
+
384
+ /**
385
+ * Gradient Border Wrapper — Base Structural CSS
386
+ *
387
+ * Usage:
388
+ * <div data-gradient-border>
389
+ * <div data-gradient-border-inner>content</div>
390
+ * </div>
391
+ *
392
+ * Themes set the gradient on [data-gradient-border] background.
393
+ * Non-gradient themes set background: transparent and use regular border.
394
+ */
395
+
396
+ [data-gradient-border] {
397
+ padding: var(--density-border-width, 1px);
398
+ border-radius: var(--density-radius-base, var(--radius-md));
399
+ background: var(--gradient-border-bg, transparent);
400
+ }
401
+
402
+ [data-gradient-border-inner] {
403
+ border-radius: calc(var(--density-radius-base, var(--radius-md)) - var(--density-border-width, 1px));
404
+ background: var(--gradient-border-inner-bg, inherit);
405
+ }
406
+
407
+ /* Fallback: when no gradient, use a standard border */
408
+ [data-gradient-border]:not([style*='--gradient-border-bg']) {
409
+ padding: 0;
410
+ border: var(--density-border-width, 1px) solid var(--gradient-border-color, currentColor);
411
+ }
412
+
413
+ [data-gradient-border]:not([style*='--gradient-border-bg']) [data-gradient-border-inner] {
414
+ border-radius: var(--density-radius-base, var(--radius-md));
300
415
  }
301
416
 
302
417
  /**
@@ -569,6 +684,19 @@
569
684
  flex-shrink: 0;
570
685
  }
571
686
 
687
+
688
+ /* =============================================================================
689
+ Item Icon — Literal (kanji, emoji, text)
690
+ ============================================================================= */
691
+
692
+ [data-item-icon-literal] {
693
+ flex-shrink: 0;
694
+ width: var(--density-icon-size, 1.25rem);
695
+ text-align: center;
696
+ line-height: 1;
697
+ font-size: var(--density-icon-size, 1.25rem);
698
+ }
699
+
572
700
  /* =============================================================================
573
701
  Item Avatar
574
702
  ============================================================================= */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rokkit/themes",
3
- "version": "1.0.2",
3
+ "version": "1.0.4",
4
4
  "description": "Theme styles for @rokkit/ui components",
5
5
  "repository": {
6
6
  "type": "git",
@@ -212,7 +212,7 @@
212
212
  "build": "bun run build.mjs"
213
213
  },
214
214
  "dependencies": {
215
- "@rokkit/core": "1.0.2"
215
+ "@rokkit/core": "1.0.4"
216
216
  },
217
217
  "devDependencies": {
218
218
  "magic-string": "^0.30.21",
package/src/base/density.css CHANGED
@@ -19,7 +19,7 @@
19
19
  --density-line-height: 1.5;
20
20
  --density-icon-size: 1.25rem;
21
21
  --density-border-width: 1px;
22
- --density-radius-base: var(--radius-md, 0.375rem);
22
+ --density-radius-base: var(--radius-md);
23
23
  }
24
24
 
25
25
  [data-density='compact'] {
@@ -33,7 +33,7 @@
33
33
  --density-line-height: 1.375;
34
34
  --density-icon-size: 1rem;
35
35
  --density-border-width: 1px;
36
- --density-radius-base: var(--radius-sm, 0.25rem);
36
+ --density-radius-base: var(--radius-sm);
37
37
  }
38
38
 
39
39
  [data-density='cozy'] {
@@ -47,5 +47,5 @@
47
47
  --density-line-height: 1.75;
48
48
  --density-icon-size: 1.5rem;
49
49
  --density-border-width: 1px;
50
- --density-radius-base: var(--radius-lg, 0.5rem);
50
+ --density-radius-base: var(--radius-lg);
51
51
  }
package/src/base/gradient-border.css ADDED
@@ -0,0 +1,32 @@
1
+ /**
2
+ * Gradient Border Wrapper — Base Structural CSS
3
+ *
4
+ * Usage:
5
+ * <div data-gradient-border>
6
+ * <div data-gradient-border-inner>content</div>
7
+ * </div>
8
+ *
9
+ * Themes set the gradient on [data-gradient-border] background.
10
+ * Non-gradient themes set background: transparent and use regular border.
11
+ */
12
+
13
+ [data-gradient-border] {
14
+ padding: var(--density-border-width, 1px);
15
+ border-radius: var(--density-radius-base, var(--radius-md));
16
+ background: var(--gradient-border-bg, transparent);
17
+ }
18
+
19
+ [data-gradient-border-inner] {
20
+ border-radius: calc(var(--density-radius-base, var(--radius-md)) - var(--density-border-width, 1px));
21
+ background: var(--gradient-border-inner-bg, inherit);
22
+ }
23
+
24
+ /* Fallback: when no gradient, use a standard border */
25
+ [data-gradient-border]:not([style*='--gradient-border-bg']) {
26
+ padding: 0;
27
+ border: var(--density-border-width, 1px) solid var(--gradient-border-color, currentColor);
28
+ }
29
+
30
+ [data-gradient-border]:not([style*='--gradient-border-bg']) [data-gradient-border-inner] {
31
+ border-radius: var(--density-radius-base, var(--radius-md));
32
+ }
package/src/base/index.css CHANGED
@@ -7,6 +7,9 @@
7
7
 
8
8
  @import './typography.css';
9
9
  @import './density.css';
10
+ @import './radius.css';
11
+ @import './layout.css';
12
+ @import './gradient-border.css';
10
13
  @import './button.css';
11
14
  @import './item.css';
12
15
  @import './menu.css';
package/src/base/item.css CHANGED
@@ -13,6 +13,19 @@
13
13
  flex-shrink: 0;
14
14
  }
15
15
 
16
+
17
+ /* =============================================================================
18
+ Item Icon — Literal (kanji, emoji, text)
19
+ ============================================================================= */
20
+
21
+ [data-item-icon-literal] {
22
+ flex-shrink: 0;
23
+ width: var(--density-icon-size, 1.25rem);
24
+ text-align: center;
25
+ line-height: 1;
26
+ font-size: var(--density-icon-size, 1.25rem);
27
+ }
28
+
16
29
  /* =============================================================================
17
30
  Item Avatar
18
31
  ============================================================================= */
package/src/base/layout.css ADDED
@@ -0,0 +1,17 @@
1
+ /**
2
+ * Layout Tokens — App-Level Spacing
3
+ *
4
+ * Structural layout dimensions for app shells.
5
+ * Override per-app by redefining these custom properties.
6
+ */
7
+
8
+ :root {
9
+ --layout-sidebar-width: 240px;
10
+ --layout-sidebar-collapsed: 64px;
11
+ --layout-header-height: 56px;
12
+ --layout-content-max-width: 1280px;
13
+ --layout-section-gap: 2rem;
14
+ --layout-section-padding: 1.5rem;
15
+ --layout-content-padding: 2rem;
16
+ --layout-card-gap: 1rem;
17
+ }
package/src/base/radius.css ADDED
@@ -0,0 +1,41 @@
1
+ /**
2
+ * Roundedness Axis — CSS Custom Property Scale
3
+ *
4
+ * Decoupled from density. Place data-radius on any container;
5
+ * descendants inherit automatically.
6
+ *
7
+ * Presets: sharp → soft (default) → rounded → pill
8
+ */
9
+
10
+ :root,
11
+ [data-radius='soft'] {
12
+ --radius-sm: 0.125rem;
13
+ --radius-md: 0.375rem;
14
+ --radius-lg: 0.625rem;
15
+ --radius-xl: 0.75rem;
16
+ --radius-full: 9999px;
17
+ }
18
+
19
+ [data-radius='sharp'] {
20
+ --radius-sm: 0;
21
+ --radius-md: 0;
22
+ --radius-lg: 0;
23
+ --radius-xl: 0;
24
+ --radius-full: 9999px;
25
+ }
26
+
27
+ [data-radius='rounded'] {
28
+ --radius-sm: 0.25rem;
29
+ --radius-md: 0.5rem;
30
+ --radius-lg: 0.75rem;
31
+ --radius-xl: 1rem;
32
+ --radius-full: 9999px;
33
+ }
34
+
35
+ [data-radius='pill'] {
36
+ --radius-sm: 9999px;
37
+ --radius-md: 9999px;
38
+ --radius-lg: 9999px;
39
+ --radius-xl: 9999px;
40
+ --radius-full: 9999px;
41
+ }