@rokkit/themes 1.0.3 → 1.0.4

package/dist/base.css

@@ -2,7 +2,7 @@
   :root {
     --scroll-width: 0.5rem;
     --tab-size: 2;
-    --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;
+    --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;
   }
 }
 
@@ -40,6 +40,17 @@
   --color-secondary-z8: var(--color-secondary-800);
   --color-secondary-z9: var(--color-secondary-900);
   --color-secondary-z10: var(--color-secondary-950);
+  --color-tertiary-z0: var(--color-tertiary-50);
+  --color-tertiary-z1: var(--color-tertiary-100);
+  --color-tertiary-z2: var(--color-tertiary-200);
+  --color-tertiary-z3: var(--color-tertiary-300);
+  --color-tertiary-z4: var(--color-tertiary-400);
+  --color-tertiary-z5: var(--color-tertiary-500);
+  --color-tertiary-z6: var(--color-tertiary-600);
+  --color-tertiary-z7: var(--color-tertiary-700);
+  --color-tertiary-z8: var(--color-tertiary-800);
+  --color-tertiary-z9: var(--color-tertiary-900);
+  --color-tertiary-z10: var(--color-tertiary-950);
   --color-accent-z0: var(--color-accent-50);
   --color-accent-z1: var(--color-accent-100);
   --color-accent-z2: var(--color-accent-200);
@@ -141,6 +152,17 @@
   --color-secondary-z8: var(--color-secondary-200);
   --color-secondary-z9: var(--color-secondary-100);
   --color-secondary-z10: var(--color-secondary-50);
+  --color-tertiary-z0: var(--color-tertiary-950);
+  --color-tertiary-z1: var(--color-tertiary-900);
+  --color-tertiary-z2: var(--color-tertiary-800);
+  --color-tertiary-z3: var(--color-tertiary-700);
+  --color-tertiary-z4: var(--color-tertiary-600);
+  --color-tertiary-z5: var(--color-tertiary-500);
+  --color-tertiary-z6: var(--color-tertiary-400);
+  --color-tertiary-z7: var(--color-tertiary-300);
+  --color-tertiary-z8: var(--color-tertiary-200);
+  --color-tertiary-z9: var(--color-tertiary-100);
+  --color-tertiary-z10: var(--color-tertiary-50);
   --color-accent-z0: var(--color-accent-950);
   --color-accent-z1: var(--color-accent-900);
   --color-accent-z2: var(--color-accent-800);
@@ -268,7 +290,7 @@
   --density-line-height: 1.5;
   --density-icon-size: 1.25rem;
   --density-border-width: 1px;
-  --density-radius-base: var(--radius-md, 0.375rem);
+  --density-radius-base: var(--radius-md);
 }
 
 [data-density='compact'] {
@@ -282,7 +304,7 @@
   --density-line-height: 1.375;
   --density-icon-size: 1rem;
   --density-border-width: 1px;
-  --density-radius-base: var(--radius-sm, 0.25rem);
+  --density-radius-base: var(--radius-sm);
 }
 
 [data-density='cozy'] {
@@ -296,7 +318,100 @@
   --density-line-height: 1.75;
   --density-icon-size: 1.5rem;
   --density-border-width: 1px;
-  --density-radius-base: var(--radius-lg, 0.5rem);
+  --density-radius-base: var(--radius-lg);
+}
+
+/**
+ * Roundedness Axis — CSS Custom Property Scale
+ *
+ * Decoupled from density. Place data-radius on any container;
+ * descendants inherit automatically.
+ *
+ * Presets: sharp → soft (default) → rounded → pill
+ */
+
+:root,
+[data-radius='soft'] {
+  --radius-sm: 0.125rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.625rem;
+  --radius-xl: 0.75rem;
+  --radius-full: 9999px;
+}
+
+[data-radius='sharp'] {
+  --radius-sm: 0;
+  --radius-md: 0;
+  --radius-lg: 0;
+  --radius-xl: 0;
+  --radius-full: 9999px;
+}
+
+[data-radius='rounded'] {
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
+}
+
+[data-radius='pill'] {
+  --radius-sm: 9999px;
+  --radius-md: 9999px;
+  --radius-lg: 9999px;
+  --radius-xl: 9999px;
+  --radius-full: 9999px;
+}
+
+/**
+ * Layout Tokens — App-Level Spacing
+ *
+ * Structural layout dimensions for app shells.
+ * Override per-app by redefining these custom properties.
+ */
+
+:root {
+  --layout-sidebar-width: 240px;
+  --layout-sidebar-collapsed: 64px;
+  --layout-header-height: 56px;
+  --layout-content-max-width: 1280px;
+  --layout-section-gap: 2rem;
+  --layout-section-padding: 1.5rem;
+  --layout-content-padding: 2rem;
+  --layout-card-gap: 1rem;
+}
+
+/**
+ * Gradient Border Wrapper — Base Structural CSS
+ *
+ * Usage:
+ *   <div data-gradient-border>
+ *     <div data-gradient-border-inner>content</div>
+ *   </div>
+ *
+ * Themes set the gradient on [data-gradient-border] background.
+ * Non-gradient themes set background: transparent and use regular border.
+ */
+
+[data-gradient-border] {
+  padding: var(--density-border-width, 1px);
+  border-radius: var(--density-radius-base, var(--radius-md));
+  background: var(--gradient-border-bg, transparent);
+}
+
+[data-gradient-border-inner] {
+  border-radius: calc(var(--density-radius-base, var(--radius-md)) - var(--density-border-width, 1px));
+  background: var(--gradient-border-inner-bg, inherit);
+}
+
+/* Fallback: when no gradient, use a standard border */
+[data-gradient-border]:not([style*='--gradient-border-bg']) {
+  padding: 0;
+  border: var(--density-border-width, 1px) solid var(--gradient-border-color, currentColor);
+}
+
+[data-gradient-border]:not([style*='--gradient-border-bg']) [data-gradient-border-inner] {
+  border-radius: var(--density-radius-base, var(--radius-md));
 }
 
 /**
@@ -569,6 +684,19 @@
   flex-shrink: 0;
 }
 
+
+/* =============================================================================
+   Item Icon — Literal (kanji, emoji, text)
+   ============================================================================= */
+
+[data-item-icon-literal] {
+  flex-shrink: 0;
+  width: var(--density-icon-size, 1.25rem);
+  text-align: center;
+  line-height: 1;
+  font-size: var(--density-icon-size, 1.25rem);
+}
+
 /* =============================================================================
    Item Avatar
    ============================================================================= */

package/dist/index.css

@@ -2,7 +2,7 @@
   :root {
     --scroll-width: 0.5rem;
     --tab-size: 2;
-    --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;
+    --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;
   }
 }
 
@@ -40,6 +40,17 @@
   --color-secondary-z8: var(--color-secondary-800);
   --color-secondary-z9: var(--color-secondary-900);
   --color-secondary-z10: var(--color-secondary-950);
+  --color-tertiary-z0: var(--color-tertiary-50);
+  --color-tertiary-z1: var(--color-tertiary-100);
+  --color-tertiary-z2: var(--color-tertiary-200);
+  --color-tertiary-z3: var(--color-tertiary-300);
+  --color-tertiary-z4: var(--color-tertiary-400);
+  --color-tertiary-z5: var(--color-tertiary-500);
+  --color-tertiary-z6: var(--color-tertiary-600);
+  --color-tertiary-z7: var(--color-tertiary-700);
+  --color-tertiary-z8: var(--color-tertiary-800);
+  --color-tertiary-z9: var(--color-tertiary-900);
+  --color-tertiary-z10: var(--color-tertiary-950);
   --color-accent-z0: var(--color-accent-50);
   --color-accent-z1: var(--color-accent-100);
   --color-accent-z2: var(--color-accent-200);
@@ -141,6 +152,17 @@
   --color-secondary-z8: var(--color-secondary-200);
   --color-secondary-z9: var(--color-secondary-100);
   --color-secondary-z10: var(--color-secondary-50);
+  --color-tertiary-z0: var(--color-tertiary-950);
+  --color-tertiary-z1: var(--color-tertiary-900);
+  --color-tertiary-z2: var(--color-tertiary-800);
+  --color-tertiary-z3: var(--color-tertiary-700);
+  --color-tertiary-z4: var(--color-tertiary-600);
+  --color-tertiary-z5: var(--color-tertiary-500);
+  --color-tertiary-z6: var(--color-tertiary-400);
+  --color-tertiary-z7: var(--color-tertiary-300);
+  --color-tertiary-z8: var(--color-tertiary-200);
+  --color-tertiary-z9: var(--color-tertiary-100);
+  --color-tertiary-z10: var(--color-tertiary-50);
   --color-accent-z0: var(--color-accent-950);
   --color-accent-z1: var(--color-accent-900);
   --color-accent-z2: var(--color-accent-800);
@@ -268,7 +290,7 @@
   --density-line-height: 1.5;
   --density-icon-size: 1.25rem;
   --density-border-width: 1px;
-  --density-radius-base: var(--radius-md, 0.375rem);
+  --density-radius-base: var(--radius-md);
 }
 
 [data-density='compact'] {
@@ -282,7 +304,7 @@
   --density-line-height: 1.375;
   --density-icon-size: 1rem;
   --density-border-width: 1px;
-  --density-radius-base: var(--radius-sm, 0.25rem);
+  --density-radius-base: var(--radius-sm);
 }
 
 [data-density='cozy'] {
@@ -296,7 +318,100 @@
   --density-line-height: 1.75;
   --density-icon-size: 1.5rem;
   --density-border-width: 1px;
-  --density-radius-base: var(--radius-lg, 0.5rem);
+  --density-radius-base: var(--radius-lg);
+}
+
+/**
+ * Roundedness Axis — CSS Custom Property Scale
+ *
+ * Decoupled from density. Place data-radius on any container;
+ * descendants inherit automatically.
+ *
+ * Presets: sharp → soft (default) → rounded → pill
+ */
+
+:root,
+[data-radius='soft'] {
+  --radius-sm: 0.125rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.625rem;
+  --radius-xl: 0.75rem;
+  --radius-full: 9999px;
+}
+
+[data-radius='sharp'] {
+  --radius-sm: 0;
+  --radius-md: 0;
+  --radius-lg: 0;
+  --radius-xl: 0;
+  --radius-full: 9999px;
+}
+
+[data-radius='rounded'] {
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
+}
+
+[data-radius='pill'] {
+  --radius-sm: 9999px;
+  --radius-md: 9999px;
+  --radius-lg: 9999px;
+  --radius-xl: 9999px;
+  --radius-full: 9999px;
+}
+
+/**
+ * Layout Tokens — App-Level Spacing
+ *
+ * Structural layout dimensions for app shells.
+ * Override per-app by redefining these custom properties.
+ */
+
+:root {
+  --layout-sidebar-width: 240px;
+  --layout-sidebar-collapsed: 64px;
+  --layout-header-height: 56px;
+  --layout-content-max-width: 1280px;
+  --layout-section-gap: 2rem;
+  --layout-section-padding: 1.5rem;
+  --layout-content-padding: 2rem;
+  --layout-card-gap: 1rem;
+}
+
+/**
+ * Gradient Border Wrapper — Base Structural CSS
+ *
+ * Usage:
+ *   <div data-gradient-border>
+ *     <div data-gradient-border-inner>content</div>
+ *   </div>
+ *
+ * Themes set the gradient on [data-gradient-border] background.
+ * Non-gradient themes set background: transparent and use regular border.
+ */
+
+[data-gradient-border] {
+  padding: var(--density-border-width, 1px);
+  border-radius: var(--density-radius-base, var(--radius-md));
+  background: var(--gradient-border-bg, transparent);
+}
+
+[data-gradient-border-inner] {
+  border-radius: calc(var(--density-radius-base, var(--radius-md)) - var(--density-border-width, 1px));
+  background: var(--gradient-border-inner-bg, inherit);
+}
+
+/* Fallback: when no gradient, use a standard border */
+[data-gradient-border]:not([style*='--gradient-border-bg']) {
+  padding: 0;
+  border: var(--density-border-width, 1px) solid var(--gradient-border-color, currentColor);
+}
+
+[data-gradient-border]:not([style*='--gradient-border-bg']) [data-gradient-border-inner] {
+  border-radius: var(--density-radius-base, var(--radius-md));
 }
 
 /**
@@ -569,6 +684,19 @@
   flex-shrink: 0;
 }
 
+
+/* =============================================================================
+   Item Icon — Literal (kanji, emoji, text)
+   ============================================================================= */
+
+[data-item-icon-literal] {
+  flex-shrink: 0;
+  width: var(--density-icon-size, 1.25rem);
+  text-align: center;
+  line-height: 1;
+  font-size: var(--density-icon-size, 1.25rem);
+}
+
 /* =============================================================================
    Item Avatar
    ============================================================================= */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/themes",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Theme styles for @rokkit/ui components",
   "repository": {
     "type": "git",
@@ -212,7 +212,7 @@
   "build": "bun run build.mjs"
 },
 "dependencies": {
-  "@rokkit/core": "1.0.3"
+  "@rokkit/core": "1.0.4"
 },
 "devDependencies": {
   "magic-string": "^0.30.21",

package/src/base/density.css

@@ -19,7 +19,7 @@
   --density-line-height: 1.5;
   --density-icon-size: 1.25rem;
   --density-border-width: 1px;
-  --density-radius-base: var(--radius-md, 0.375rem);
+  --density-radius-base: var(--radius-md);
 }
 
 [data-density='compact'] {
@@ -33,7 +33,7 @@
   --density-line-height: 1.375;
   --density-icon-size: 1rem;
   --density-border-width: 1px;
-  --density-radius-base: var(--radius-sm, 0.25rem);
+  --density-radius-base: var(--radius-sm);
 }
 
 [data-density='cozy'] {
@@ -47,5 +47,5 @@
   --density-line-height: 1.75;
   --density-icon-size: 1.5rem;
   --density-border-width: 1px;
-  --density-radius-base: var(--radius-lg, 0.5rem);
+  --density-radius-base: var(--radius-lg);
 }

package/src/base/gradient-border.css

@@ -0,0 +1,32 @@
+/**
+ * Gradient Border Wrapper — Base Structural CSS
+ *
+ * Usage:
+ *   <div data-gradient-border>
+ *     <div data-gradient-border-inner>content</div>
+ *   </div>
+ *
+ * Themes set the gradient on [data-gradient-border] background.
+ * Non-gradient themes set background: transparent and use regular border.
+ */
+
+[data-gradient-border] {
+  padding: var(--density-border-width, 1px);
+  border-radius: var(--density-radius-base, var(--radius-md));
+  background: var(--gradient-border-bg, transparent);
+}
+
+[data-gradient-border-inner] {
+  border-radius: calc(var(--density-radius-base, var(--radius-md)) - var(--density-border-width, 1px));
+  background: var(--gradient-border-inner-bg, inherit);
+}
+
+/* Fallback: when no gradient, use a standard border */
+[data-gradient-border]:not([style*='--gradient-border-bg']) {
+  padding: 0;
+  border: var(--density-border-width, 1px) solid var(--gradient-border-color, currentColor);
+}
+
+[data-gradient-border]:not([style*='--gradient-border-bg']) [data-gradient-border-inner] {
+  border-radius: var(--density-radius-base, var(--radius-md));
+}

package/src/base/index.css

@@ -7,6 +7,9 @@
 
 @import './typography.css';
 @import './density.css';
+@import './radius.css';
+@import './layout.css';
+@import './gradient-border.css';
 @import './button.css';
 @import './item.css';
 @import './menu.css';

package/src/base/item.css

@@ -13,6 +13,19 @@
   flex-shrink: 0;
 }
 
+
+/* =============================================================================
+   Item Icon — Literal (kanji, emoji, text)
+   ============================================================================= */
+
+[data-item-icon-literal] {
+  flex-shrink: 0;
+  width: var(--density-icon-size, 1.25rem);
+  text-align: center;
+  line-height: 1;
+  font-size: var(--density-icon-size, 1.25rem);
+}
+
 /* =============================================================================
    Item Avatar
    ============================================================================= */

package/src/base/layout.css

@@ -0,0 +1,17 @@
+/**
+ * Layout Tokens — App-Level Spacing
+ *
+ * Structural layout dimensions for app shells.
+ * Override per-app by redefining these custom properties.
+ */
+
+:root {
+  --layout-sidebar-width: 240px;
+  --layout-sidebar-collapsed: 64px;
+  --layout-header-height: 56px;
+  --layout-content-max-width: 1280px;
+  --layout-section-gap: 2rem;
+  --layout-section-padding: 1.5rem;
+  --layout-content-padding: 2rem;
+  --layout-card-gap: 1rem;
+}

package/src/base/radius.css

@@ -0,0 +1,41 @@
+/**
+ * Roundedness Axis — CSS Custom Property Scale
+ *
+ * Decoupled from density. Place data-radius on any container;
+ * descendants inherit automatically.
+ *
+ * Presets: sharp → soft (default) → rounded → pill
+ */
+
+:root,
+[data-radius='soft'] {
+  --radius-sm: 0.125rem;
+  --radius-md: 0.375rem;
+  --radius-lg: 0.625rem;
+  --radius-xl: 0.75rem;
+  --radius-full: 9999px;
+}
+
+[data-radius='sharp'] {
+  --radius-sm: 0;
+  --radius-md: 0;
+  --radius-lg: 0;
+  --radius-xl: 0;
+  --radius-full: 9999px;
+}
+
+[data-radius='rounded'] {
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-full: 9999px;
+}
+
+[data-radius='pill'] {
+  --radius-sm: 9999px;
+  --radius-md: 9999px;
+  --radius-lg: 9999px;
+  --radius-xl: 9999px;
+  --radius-full: 9999px;
+}