@rokkit/themes 1.0.5 → 1.1.0

package/build.mjs

@@ -19,6 +19,7 @@
 
 import { createGenerator, presetWind3, transformerDirectives } from 'unocss'
 import { Theme } from '@rokkit/core'
+import { buildNamedShortcuts } from '@rokkit/unocss'
 import { readFileSync, writeFileSync, mkdirSync } from 'fs'
 import { resolve, dirname, join } from 'path'
 import { fileURLToPath } from 'url'
@@ -40,7 +41,7 @@ const uno = await createGenerator({
     })
   ],
   shortcuts: [
-    ['skin-default', theme.getPalette()],
+    ['skin-default', { ...theme.getPalette(), ...theme.getNamedTokens() }],
     ...theme.getShortcuts('surface'),
     ...theme.getShortcuts('primary'),
     ...theme.getShortcuts('secondary'),
@@ -49,7 +50,8 @@ const uno = await createGenerator({
     ...theme.getShortcuts('warning'),
     ...theme.getShortcuts('danger'),
     ...theme.getShortcuts('error'),
-    ...theme.getShortcuts('info')
+    ...theme.getShortcuts('info'),
+    ...buildNamedShortcuts()
   ],
   theme: {
     colors: theme.getColorRules()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/themes",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "description": "Theme styles for @rokkit/ui components",
   "repository": {
     "type": "git",
@@ -103,9 +103,10 @@
   "build": "bun run build.mjs"
 },
 "dependencies": {
-  "@rokkit/core": "1.0.5"
+  "@rokkit/core": "1.1.0"
 },
 "devDependencies": {
+  "@rokkit/unocss": "1.1.0",
   "magic-string": "^0.30.21",
   "unocss": "^66.5.1"
 },

package/src/base/carousel.css

@@ -71,7 +71,8 @@
   border: none;
   border-radius: 9999px;
   cursor: pointer;
-  @apply bg-surface-z10/30 text-surface-z0;
+  background-color: color-mix(in srgb, var(--ink) 30%, transparent);
+  color: var(--paper);
   font-size: 1.25rem;
   z-index: 1;
   opacity: 0.7;

package/src/base/code-block.css

@@ -0,0 +1,76 @@
+/**
+ * CodeBlock — base structural styles for the internals.
+ *
+ * The outer chrome (border, radius, header divider) is Frame's job.
+ * This file just lays out what CodeBlock puts INSIDE the frame header
+ * (icon, filename, lang chip, action buttons) and body (<pre>/<code>).
+ * Per-theme files add colour and typography accents.
+ */
+
+[data-code-block-header] {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: var(--density-spacing-sm);
+}
+
+[data-code-block-title] {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--density-spacing-sm);
+}
+
+[data-code-block-icon] {
+	display: inline-block;
+	width: 13px;
+	height: 13px;
+}
+
+[data-code-block-lang] {
+	padding: 2px 6px;
+	border-radius: 3px;
+	letter-spacing: 0.12em;
+	text-transform: uppercase;
+}
+
+[data-code-block-actions] {
+	display: inline-flex;
+	gap: 2px;
+}
+
+[data-code-block-actions] button {
+	display: inline-flex;
+	align-items: center;
+	gap: 5px;
+	height: 22px;
+	padding: 0 8px;
+	border: 0;
+	background: transparent;
+	cursor: pointer;
+	border-radius: 3px;
+	letter-spacing: 0.02em;
+}
+
+[data-code-block-actions] button > span:first-child {
+	display: inline-block;
+	width: 12px;
+	height: 12px;
+}
+
+[data-code-block-body] {
+	overflow: auto;
+}
+
+[data-code-block-body] pre {
+	margin: 0;
+	padding: 10px 12px;
+	overflow-x: auto;
+	background: transparent;
+}
+
+[data-code-block-body] code {
+	font: inherit;
+	background: transparent;
+	border: 0;
+	padding: 0;
+}

package/src/base/display.css

@@ -6,7 +6,8 @@
 }
 
 [data-display-title] {
-  @apply text-on-surface text-sm font-semibold;
+  color: var(--ink);
+  @apply text-sm font-semibold;
 }
 
 [data-display-field] {
@@ -14,16 +15,19 @@
 }
 
 [data-display-label] {
-  @apply text-on-surface/70 shrink-0 text-sm;
+  color: color-mix(in srgb, var(--ink) 70%, transparent);
+  @apply shrink-0 text-sm;
 }
 
 [data-display-value] {
-  @apply text-on-surface text-right text-sm;
+  color: var(--ink);
+  @apply text-right text-sm;
 }
 
 /* Badge format: pill style */
 [data-display-value][data-format='badge'] {
-  @apply bg-surface-z2 rounded-full px-2 py-0.5 text-xs font-medium;
+  background-color: var(--paper-mute);
+  @apply rounded-full px-2 py-0.5 text-xs font-medium;
 }
 
 /* Boolean format */
@@ -58,11 +62,14 @@
 }
 
 [data-display-card] {
-  @apply border-surface-z2 bg-surface flex flex-col gap-1 rounded border p-3;
+  border-color: var(--paper-mute);
+  background-color: var(--paper-edge);
+  @apply flex flex-col gap-1 rounded border p-3;
 }
 
 [data-display-card][data-selected] {
-  @apply border-primary ring-primary ring-1;
+  border-color: var(--primary);
+  @apply ring-primary ring-1;
 }
 
 [data-selectable] [data-display-card] {
@@ -70,7 +77,7 @@
 }
 
 [data-selectable] [data-display-card]:hover {
-  @apply bg-surface-z1;
+  background-color: var(--paper-soft);
 }
 
 /* Display list */
@@ -83,7 +90,8 @@
 }
 
 [data-display-list-item] {
-  @apply border-surface-z2 flex items-baseline gap-4 border-b py-1 last:border-0;
+  border-color: var(--paper-mute);
+  @apply flex items-baseline gap-4 border-b py-1 last:border-0;
 }
 
 [data-display-list-item] [data-display-field] {

package/src/base/frame.css

@@ -0,0 +1,36 @@
+/**
+ * Frame — base structural styles.
+ *
+ * Layout / spacing only. Per-theme files (zen-sumi/frame.css,
+ * material/frame.css, …) add the visual decoration (border, background,
+ * shadow) using the same `[data-frame-*]` hooks.
+ */
+
+[data-frame] {
+	display: flex;
+	flex-direction: column;
+	border-radius: var(--density-radius-base);
+	overflow: hidden;
+}
+
+[data-frame-header] {
+	padding-block: var(--density-spacing-sm);
+	padding-inline: var(--density-spacing-md);
+}
+
+[data-frame-body] {
+	padding: var(--density-spacing-md);
+	flex: 1;
+	min-height: 0;
+}
+
+/* Artifacts that own their padding (charts, <pre> blocks, tables) opt
+ * out of the body padding via `flush`. */
+[data-frame-body][data-flush] {
+	padding: 0;
+}
+
+[data-frame-footer] {
+	padding-block: var(--density-spacing-sm);
+	padding-inline: var(--density-spacing-md);
+}

package/src/base/index.css

@@ -28,6 +28,8 @@
 @import './shine.css';
 @import './breadcrumbs.css';
 @import './card.css';
+@import './frame.css';
+@import './code-block.css';
 @import './progress.css';
 @import './carousel.css';
 @import './pill.css';

package/src/base/input.css

@@ -12,12 +12,14 @@
 
 /* Separator between form fields */
 [data-form-separator] {
-  @apply border-surface-z2 my-1 border-t;
+  border-top-color: var(--paper-mute);
+  @apply my-1 border-t;
 }
 
 /* Form group (fieldset for nested objects) */
 [data-form-group] {
-  @apply border-surface-z2 m-0 flex flex-col gap-3 border-l border-none p-0 pl-3;
+  border-left-color: var(--paper-mute);
+  @apply m-0 flex flex-col gap-3 border-l border-none p-0 pl-3;
 }
 
 [data-form-group-label] {
@@ -46,7 +48,8 @@
 }
 
 [data-severity='error'] [data-validation-count] {
-  @apply bg-error-z1 text-error-z7;
+  background-color: var(--error-soft);
+  color: var(--error);
 }
 
 [data-severity='warning'] > [data-validation-group-header] {
@@ -54,7 +57,8 @@
 }
 
 [data-severity='warning'] [data-validation-count] {
-  @apply bg-warning-z1 text-warning-z7;
+  background-color: var(--warning-soft);
+  color: var(--warning);
 }
 
 [data-severity='info'] > [data-validation-group-header] {
@@ -62,7 +66,8 @@
 }
 
 [data-severity='info'] [data-validation-count] {
-  @apply bg-info-z1 text-info-z7;
+  background-color: var(--info-soft);
+  color: var(--info);
 }
 
 [data-severity='success'] > [data-validation-group-header] {
@@ -70,7 +75,8 @@
 }
 
 [data-severity='success'] [data-validation-count] {
-  @apply bg-success-z1 text-success-z7;
+  background-color: var(--success-soft);
+  color: var(--success);
 }
 
 [data-validation-item] {
@@ -78,7 +84,11 @@
 }
 
 button[data-validation-item] {
-  @apply hover:bg-surface-z1 cursor-pointer border-none bg-transparent;
+  @apply cursor-pointer border-none bg-transparent;
+}
+
+button[data-validation-item]:hover {
+  background-color: var(--paper-soft);
 }
 
 /* Form actions (submit/reset buttons) */
@@ -88,11 +98,21 @@ button[data-validation-item] {
 
 button[data-form-submit],
 button[data-form-reset] {
-  @apply border-surface-z3 bg-surface-z1 hover:bg-surface-z2 cursor-pointer rounded border px-4 py-1.5 text-sm transition-colors;
+  border-color: var(--paper-mute);
+  background-color: var(--paper-soft);
+  @apply cursor-pointer rounded border px-4 py-1.5 text-sm transition-colors;
+}
+
+button[data-form-submit]:hover,
+button[data-form-reset]:hover {
+  background-color: var(--paper-mute);
 }
 
 button[data-form-submit] {
-  @apply bg-primary text-on-primary border-primary hover:opacity-90;
+  background-color: var(--primary);
+  color: var(--on-primary);
+  border-color: var(--primary);
+  @apply hover:opacity-90;
 }
 
 button[data-form-submit]:disabled,
@@ -122,6 +142,24 @@ button[data-form-reset]:disabled {
   @apply flex-row items-center justify-between gap-2;
 }
 
+/* Inline layout variant — opt in per field via the `variant='inline'`
+   prop on InputField (or the equivalent `variant` field on a
+   FormRenderer layout element). Label sits in a fixed leading column,
+   the input takes the remaining row. Useful for control-panel
+   contexts (playground knobs, settings dialogs, tweak editors) where
+   the form-page rhythm reads as overkill. */
+[data-field-root][data-field-layout='inline'] > [data-field] {
+  @apply flex-row items-center gap-3;
+}
+
+[data-field-root][data-field-layout='inline'] > [data-field] > label {
+  @apply flex-none w-32 text-xs;
+}
+
+[data-field-root][data-field-layout='inline'] > [data-field] > :not(label) {
+  @apply flex-1 min-w-0;
+}
+
 /* Select: stretch to fill input wrapper — display:flex eliminates inline-block gap */
 [data-input-root] [data-select] {
   @apply flex-1 self-stretch;
@@ -250,7 +288,8 @@ input[type='radio'] {
 }
 
 input[type='radio']:checked {
-  @apply border-primary-z5 text-primary-z5;
+  border-color: var(--primary);
+  color: var(--primary);
 }
 
 input[type='radio']:checked::before {

package/src/base/nav-content.css

@@ -21,11 +21,11 @@
 
 [data-nav-content][data-orientation='horizontal'] [data-nav-content-nav] {
 	width: var(--nav-size, 280px);
-	@apply border-r border-surface-z3;
+	border-right: 1px solid var(--paper-mute);
 }
 
 [data-nav-content][data-orientation='vertical'] [data-nav-content-nav] {
-	@apply border-b border-surface-z3;
+	border-bottom: 1px solid var(--paper-mute);
 }
 
 [data-nav-content-main] {
@@ -43,6 +43,6 @@
 	[data-nav-content][data-collapsible][data-orientation='horizontal'] [data-nav-content-nav] {
 		width: 100%;
 		border-right: none;
-		@apply border-b border-surface-z3;
+		border-bottom: 1px solid var(--paper-mute);
 	}
 }

package/src/base/stepper.css

@@ -47,17 +47,21 @@
 }
 
 [data-stepper-step][data-completed] [data-stepper-circle] {
-  @apply bg-primary-z5 border-primary-z5 text-surface-z0;
+  background-color: var(--primary);
+  border-color: var(--primary);
+  color: var(--paper);
 }
 
 [data-stepper-step][data-active] [data-stepper-circle] {
-  @apply border-primary-z5 text-primary-z5 ring-primary-z5/20 ring-3;
+  border-color: var(--primary);
+  color: var(--primary);
+  @apply ring-primary/20 ring-3;
 }
 
 /* ─── Connector line ─── */
 
 [data-stepper-connector] {
-  @apply bg-surface-z3;
+  background-color: var(--paper-mute);
   flex: 1;
   height: 2px;
   min-width: 2rem;
@@ -68,7 +72,7 @@
 }
 
 [data-stepper-connector][data-completed] {
-  @apply bg-primary-z5;
+  background-color: var(--primary);
 }
 
 /* Vertical orientation connectors */
@@ -100,7 +104,7 @@
 }
 
 [data-stepper-dot] {
-  @apply border-surface-z4;
+  border-color: var(--paper-edge);
   width: 0.5rem;
   height: 0.5rem;
   border-radius: 9999px;
@@ -120,11 +124,14 @@
 }
 
 [data-stepper-dot][data-completed] {
-  @apply bg-primary-z5 border-primary-z5;
+  background-color: var(--primary);
+  border-color: var(--primary);
 }
 
 [data-stepper-dot][data-active] {
-  @apply bg-primary-z5 border-primary-z5 ring-primary-z5/25 ring-2;
+  background-color: var(--primary);
+  border-color: var(--primary);
+  @apply ring-primary/25 ring-2;
 }
 
 /* ─── Content area ─── */

package/src/base/tabs.css

@@ -45,9 +45,15 @@
 
 [data-tabs][data-orientation='vertical'] [data-tabs-list] {
   flex-direction: column;
+  /* In vertical mode the list is a flex item perpendicular to the
+   * row-direction parent. Stretching it gives `justify-content` a
+   * height to distribute — without this the column collapses to
+   * fit-content and `align=center / end` have no spare space to
+   * move the tabs into. */
+  align-self: stretch;
 }
 
-/* Alignment */
+/* Alignment — main-axis distribution within the list */
 [data-tabs][data-align='center'] [data-tabs-list] {
   justify-content: center;
 }
@@ -66,7 +72,14 @@
   gap: 0.375rem;
   padding: 0.5rem 0.75rem;
   cursor: pointer;
-  border: none;
+  /* `border: none` expands to `border-width: medium` (= 3px) which leaks
+   * a 3px ring on every side as soon as a theme sets `border-style: solid`.
+   * Spell the safe baseline out: zero width on all sides, solid style so
+   * any `border-{side}-[Npx]` from a theme renders without needing to
+   * re-declare the style. */
+  border-width: 0;
+  border-style: solid;
+  border-color: currentcolor;
   background: transparent;
   font-weight: 500;
   font-size: 0.875rem;

package/src/base/typography.css

@@ -2,25 +2,37 @@
  * Typography & Shape Tokens
  *
  * CSS custom properties for font families and border-radius scale.
- * Override these in your application stylesheet to customize typography and shape.
+ *
+ * Canonical names match the named-token vocabulary's semantic intent:
+ *   --font-display — heading / display typeface
+ *   --font-ui      — body / UI typeface
+ *   --font-mono    — code, eyebrows, kbd shortcuts
+ *
+ * Legacy aliases `--font-heading` and `--font-sans` are emitted as
+ * `var(--font-display)` and `var(--font-ui)` for backward compatibility
+ * with any consumer that still reads the old names. Both stay in sync.
+ *
+ * Override these in your application stylesheet or via the preset's
+ * `typography: { display, ui, mono }` config to customize.
  *
  * @example
  * :root {
- *   --font-sans: 'Inter', system-ui, sans-serif;
- *   --font-mono: 'JetBrains Mono', monospace;
- *   --font-heading: 'Cal Sans', 'Inter', sans-serif;
- *
- *   --radius-sm: 0;        --* sharp corners *--
- *   --radius-md: 0;
- *   --radius-lg: 0;
+ *   --font-display: 'Fraunces', serif;
+ *   --font-ui:      'Inter', system-ui, sans-serif;
+ *   --font-mono:    'JetBrains Mono', monospace;
  * }
  */
 
-:root {
-  /* Font families */
-  --font-sans: 'Open Sans', -apple-system, system-ui, 'Segoe UI', ui-serif, sans-serif;
-  --font-mono: 'Victor Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
-  --font-heading: 'Open Sans', sans-serif;
+/* Defaults wrapped in :where() so specificity is 0 — any explicit :root
+   declaration (from the preset emit, an app stylesheet, or another theme)
+   wins without needing extra weight. Without :where(), this file would
+   override later preset emissions since both are :root, same specificity,
+   and the source order has this CSS loading after the preset preflight. */
+:where(:root) {
+  /* Font families — canonical names */
+  --font-display: 'Open Sans', sans-serif;
+  --font-ui:      'Open Sans', -apple-system, system-ui, 'Segoe UI', ui-serif, sans-serif;
+  --font-mono:    'Victor Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
 
   /* Border-radius scale */
   --radius-sm: 0.25rem;
@@ -29,3 +41,10 @@
   --radius-xl: 0.75rem;
   --radius-full: 9999px;
 }
+
+/* Legacy aliases — outside the :where() so they ALWAYS reflect whichever
+   --font-display / --font-ui value won in the cascade (default or preset). */
+:root {
+  --font-heading: var(--font-display);
+  --font-sans:    var(--font-ui);
+}