@rokkit/themes 1.0.4 → 1.1.0

package/README.md

@@ -16,19 +16,14 @@ bun add @rokkit/themes
 
 Available themes:
 
-| Theme        | Description                                                          |
-| ------------ | -------------------------------------------------------------------- |
-| `rokkit`     | Default — gradients and glowing borders                              |
-| `minimal`    | Clean and subtle                                                     |
-| `material`   | Elevation and shadows                                                |
-| `frosted`    | Frosted glass and blur                                               |
-| `shadcn`     | Flat borders and ring focus                                          |
-| `daisy-ui`   | Rounded-full and bold fills                                          |
-| `bits-ui`    | Rounded-lg and shadow-sm                                             |
-| `carbon`     | Square corners and bottom-border inputs                              |
-| `ant-design` | Thin borders and dense layout                                        |
-| `grada-ui`   | Coral/purple gradient identity                                       |
-| `base`       | Structural styles only (layout and positioning, no visual treatment) |
+| Theme      | Description                                                          |
+| ---------- | -------------------------------------------------------------------- |
+| `rokkit`   | Default — gradients and glowing borders                              |
+| `minimal`  | Clean and subtle                                                     |
+| `material` | Elevation and shadows                                                |
+| `frosted`  | Frosted glass and blur                                               |
+| `zen-sumi` | Ink on paper — no shadows, no gradients                              |
+| `base`     | Structural styles only (layout and positioning, no visual treatment) |
 
 ## Usage
 
@@ -54,6 +49,8 @@ import '@rokkit/themes'
 @import '@rokkit/themes/material.css';
 /* or */
 @import '@rokkit/themes/frosted.css';
+/* or */
+@import '@rokkit/themes/zen-sumi.css';
 ```
 
 ### Base structural styles only
@@ -108,12 +105,7 @@ src/
   minimal/     -- Clean + subtle theme
   material/    -- Elevation + shadows theme
   frosted/     -- Frosted glass + blur theme
-  shadcn/      -- Flat borders + ring focus theme
-  daisy-ui/    -- Rounded-full + bold fills theme
-  bits-ui/     -- Rounded-lg + shadow-sm theme
-  carbon/      -- Square + bottom-border inputs theme
-  ant-design/  -- Thin borders + dense layout theme
-  grada-ui/    -- Coral/purple gradient identity theme
+  zen-sumi/    -- Ink on paper theme (no shadows, no gradients)
   index.css    -- Full bundle entry point
 ```
 

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'),
@@ -50,13 +51,7 @@ const uno = await createGenerator({
     ...theme.getShortcuts('danger'),
     ...theme.getShortcuts('error'),
     ...theme.getShortcuts('info'),
-    [/^text-on-primary(\/\d+)?$/, ([, end]) => `text-surface-50${end || ''}`],
-    [/^text-on-secondary(\/\d+)?$/, ([, end]) => `text-surface-50${end || ''}`],
-    [/^text-on-info(\/\d+)?$/, ([, end]) => `text-surface-50${end || ''}`],
-    [/^text-on-success(\/\d+)?$/, ([, end]) => `text-surface-50${end || ''}`],
-    [/^text-on-warning(\/\d+)?$/, ([, end]) => `text-surface-50${end || ''}`],
-    [/^text-on-error(\/\d+)?$/, ([, end]) => `text-surface-50${end || ''}`],
-    [/^text-on-surface(\/\d+)?$/, ([, end]) => `text-surface-50${end || ''}`]
+    ...buildNamedShortcuts()
   ],
   theme: {
     colors: theme.getColorRules()
@@ -190,7 +185,7 @@ async function buildFile(inputPath, outputName, label) {
   const fullCSS = resolveImports(inputPath)
   const compiled = await processCSS(fullCSS, outputName)
   const fixed = fixModeSelectors(compiled)
-  writeFileSync(join(distDir, outputName), fixed, 'utf-8')
+  writeFileSync(join(distDir, outputName), fixed, 'utf-8') // nosemgrep: javascript.lang.security.audit.path-traversal.path-join-resolve-traversal.path-join-resolve-traversal — outputName is derived from a hardcoded string array, not user input
   console.log(`✓ dist/${outputName} (${label})`)
 }
 
@@ -213,12 +208,7 @@ async function build() {
     ['minimal', 'clean + subtle'],
     ['material', 'elevation + shadows'],
     ['frosted', 'frosted glass + blur'],
-    ['grada-ui', 'coral/purple gradient identity'],
-    ['shadcn', 'flat borders + ring focus'],
-    ['daisy-ui', 'rounded-full + bold fills'],
-    ['bits-ui', 'rounded-lg + shadow-sm'],
-    ['carbon', 'square + bottom-border inputs'],
-    ['ant-design', 'thin borders + dense layout']
+    ['zen-sumi', 'ink on paper — no shadows, no gradients']
   ]) {
     await buildFile(join(srcDir, name, 'index.css'), `${name}.css`, label)
   }
@@ -230,13 +220,9 @@ async function build() {
     'minimal',
     'material',
     'frosted',
-    'grada-ui',
-    'shadcn',
-    'daisy-ui',
-    'bits-ui',
-    'carbon',
-    'ant-design'
+    'zen-sumi'
   ]
+  // nosemgrep: javascript.lang.security.audit.path-traversal.path-join-resolve-traversal.path-join-resolve-traversal — name is from a hardcoded string array, not user input
   const bundleParts = allThemes.map((name) => readFileSync(join(distDir, `${name}.css`), 'utf-8'))
   writeFileSync(join(distDir, 'index.css'), bundleParts.join('\n'), 'utf-8')
   console.log('✓ dist/index.css (full bundle)')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/themes",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "Theme styles for @rokkit/ui components",
   "repository": {
     "type": "git",
@@ -18,97 +18,29 @@
     "style": "./src/index.css",
     "default": "./src/index.css"
   },
-  "./dist": {
-  "style": "./dist/index.css",
-  "default": "./dist/index.css"
-},
-"./dist/base": {
-"style": "./dist/base.css",
-"default": "./dist/base.css"
-},
-"./dist/rokkit": {
-"style": "./dist/rokkit.css",
-"default": "./dist/rokkit.css"
-},
-"./dist/minimal": {
-"style": "./dist/minimal.css",
-"default": "./dist/minimal.css"
-},
-"./dist/material": {
-"style": "./dist/material.css",
-"default": "./dist/material.css"
-},
-"./dist/frosted": {
-"style": "./dist/frosted.css",
-"default": "./dist/frosted.css"
-},
-"./dist/grada-ui": {
-"style": "./dist/grada-ui.css",
-"default": "./dist/grada-ui.css"
-},
-"./dist/daisy-ui": {
-"style": "./dist/daisy-ui.css",
-"default": "./dist/daisy-ui.css"
-},
-"./dist/shadcn": {
-"style": "./dist/shadcn.css",
-"default": "./dist/shadcn.css"
-},
-"./dist/bits-ui": {
-"style": "./dist/bits-ui.css",
-"default": "./dist/bits-ui.css"
-},
-"./dist/carbon": {
-"style": "./dist/carbon.css",
-"default": "./dist/carbon.css"
-},
-"./dist/ant-design": {
-"style": "./dist/ant-design.css",
-"default": "./dist/ant-design.css"
-},
-"./base.css": {
-"style": "./dist/base.css",
-"default": "./dist/base.css"
+  "./base.css": {
+  "style": "./src/base/index.css",
+  "default": "./src/base/index.css"
 },
 "./rokkit.css": {
-"style": "./dist/rokkit.css",
-"default": "./dist/rokkit.css"
+"style": "./src/rokkit/index.css",
+"default": "./src/rokkit/index.css"
 },
 "./minimal.css": {
-"style": "./dist/minimal.css",
-"default": "./dist/minimal.css"
+"style": "./src/minimal/index.css",
+"default": "./src/minimal/index.css"
 },
 "./material.css": {
-"style": "./dist/material.css",
-"default": "./dist/material.css"
+"style": "./src/material/index.css",
+"default": "./src/material/index.css"
 },
 "./frosted.css": {
-"style": "./dist/frosted.css",
-"default": "./dist/frosted.css"
-},
-"./grada-ui.css": {
-"style": "./dist/grada-ui.css",
-"default": "./dist/grada-ui.css"
-},
-"./daisy-ui.css": {
-"style": "./dist/daisy-ui.css",
-"default": "./dist/daisy-ui.css"
-},
-"./shadcn.css": {
-"style": "./dist/shadcn.css",
-"default": "./dist/shadcn.css"
-},
-"./bits-ui.css": {
-"style": "./dist/bits-ui.css",
-"default": "./dist/bits-ui.css"
-},
-"./carbon.css": {
-"style": "./dist/carbon.css",
-"default": "./dist/carbon.css"
+"style": "./src/frosted/index.css",
+"default": "./src/frosted/index.css"
 },
-"./ant-design.css": {
-"style": "./dist/ant-design.css",
-"default": "./dist/ant-design.css"
+"./zen-sumi.css": {
+"style": "./src/zen-sumi/index.css",
+"default": "./src/zen-sumi/index.css"
 },
 "./base": {
 "style": "./src/base/index.css",
@@ -150,71 +82,31 @@
 "style": "./src/frosted/*.css",
 "default": "./src/frosted/*.css"
 },
-"./grada-ui": {
-"style": "./src/grada-ui/index.css",
-"default": "./src/grada-ui/index.css"
-},
-"./grada-ui/*": {
-"style": "./src/grada-ui/*.css",
-"default": "./src/grada-ui/*.css"
-},
-"./daisy-ui": {
-"style": "./src/daisy-ui/index.css",
-"default": "./src/daisy-ui/index.css"
-},
-"./daisy-ui/*": {
-"style": "./src/daisy-ui/*.css",
-"default": "./src/daisy-ui/*.css"
-},
-"./shadcn": {
-"style": "./src/shadcn/index.css",
-"default": "./src/shadcn/index.css"
-},
-"./shadcn/*": {
-"style": "./src/shadcn/*.css",
-"default": "./src/shadcn/*.css"
-},
-"./bits-ui": {
-"style": "./src/bits-ui/index.css",
-"default": "./src/bits-ui/index.css"
-},
-"./bits-ui/*": {
-"style": "./src/bits-ui/*.css",
-"default": "./src/bits-ui/*.css"
-},
-"./carbon": {
-"style": "./src/carbon/index.css",
-"default": "./src/carbon/index.css"
-},
-"./carbon/*": {
-"style": "./src/carbon/*.css",
-"default": "./src/carbon/*.css"
-},
-"./ant-design": {
-"style": "./src/ant-design/index.css",
-"default": "./src/ant-design/index.css"
+"./zen-sumi": {
+"style": "./src/zen-sumi/index.css",
+"default": "./src/zen-sumi/index.css"
 },
-"./ant-design/*": {
-"style": "./src/ant-design/*.css",
-"default": "./src/ant-design/*.css"
+"./zen-sumi/*": {
+"style": "./src/zen-sumi/*.css",
+"default": "./src/zen-sumi/*.css"
 }
 },
 "files": [
   "src",
-  "dist",
   "build.mjs",
   "README.md",
   "LICENSE"
 ],
 "scripts": {
-  "prepublishOnly": "cp ../../LICENSE . && bun run build.mjs",
+  "prepublishOnly": "cp ../../LICENSE .",
   "postpublish": "rm -f LICENSE",
   "build": "bun run build.mjs"
 },
 "dependencies": {
-  "@rokkit/core": "1.0.4"
+  "@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,8 +71,8 @@
   border: none;
   border-radius: 9999px;
   cursor: pointer;
-  background: rgba(0, 0, 0, 0.3);
-  color: white;
+  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';