@rokkit/themes 1.1.16 → 1.1.18

package/dist/rokkit/button.css

@@ -0,0 +1,308 @@
+/**
+ * Button - Rokkit Theme Styles
+ *
+ * Rich gradients and glowing borders.
+ */
+
+/* =============================================================================
+   Default Style (filled)
+   ============================================================================= */
+
+/*
+ * Branded fills use an explicit `linear-gradient(var(--primary),
+ * var(--accent))` rather than `@apply from-X to-Y bg-gradient-to-r` —
+ * preset-wind3's gradient utilities silently drop during @apply in
+ * `tokens: 'core'` mode, so the @apply path produces empty stops and an
+ * invisible button. Writing the gradient directly bypasses that bug.
+ *
+ * Skin can map accent === primary (the default for libraries that don't
+ * declare accent); the gradient then flattens to one tone, which is the
+ * expected fallback. The demo skin declares accent: 'hisui' so this
+ * surface gradients across saffron → jade.
+ */
+
+/* Default variant */
+[data-style='rokkit'] [data-button][data-style='default'][data-variant='default'],
+[data-style='rokkit'] [data-button]:not([data-style])[data-variant='default'],
+[data-style='rokkit'] [data-button][data-style='default']:not([data-variant]),
+[data-style='rokkit'] [data-button]:not([data-style]):not([data-variant]) {
+  border-width:1px;border-color:var(--paper-edge);color:var(--ink-mute);
+  background: var(--paper-mute);
+}
+
+/* Primary variant */
+[data-style='rokkit'] [data-button][data-style='default'][data-variant='primary'],
+[data-style='rokkit'] [data-button]:not([data-style])[data-variant='primary'] {
+  border-width:1px;border-color:var(--primary);color:var(--on-primary);
+  background: linear-gradient(to right, var(--primary), var(--accent));
+}
+
+/* Secondary variant */
+[data-style='rokkit'] [data-button][data-style='default'][data-variant='secondary'],
+[data-style='rokkit'] [data-button]:not([data-style])[data-variant='secondary'] {
+  border-width:1px;border-color:var(--accent);color:var(--on-primary);
+  background: linear-gradient(to bottom, var(--accent), var(--accent));
+}
+
+/* Accent variant */
+[data-style='rokkit'] [data-button][data-style='default'][data-variant='accent'],
+[data-style='rokkit'] [data-button]:not([data-style])[data-variant='accent'] {
+  border-width:1px;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));border-color:var(--accent);
+  background: linear-gradient(to bottom, var(--accent), var(--accent));
+}
+
+/* Danger variant */
+[data-style='rokkit'] [data-button][data-style='default'][data-variant='danger'],
+[data-style='rokkit'] [data-button]:not([data-style])[data-variant='danger'] {
+  border-width:1px;--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));border-color:var(--danger);
+  background: linear-gradient(to bottom, var(--danger), var(--danger));
+}
+
+/* =============================================================================
+   Outline Style
+   ============================================================================= */
+
+[data-style='rokkit'] [data-button][data-style='outline'][data-variant='default'],
+[data-style='rokkit'] [data-button][data-style='outline']:not([data-variant]) {
+  border-width:1px;background-color:transparent;border-color:var(--paper-edge);color:var(--ink-mute);
+}
+
+[data-style='rokkit'] [data-button][data-style='outline'][data-variant='primary'] {
+  border-width:1px;background-color:transparent;border-color:var(--primary);color:var(--primary);
+}
+
+[data-style='rokkit'] [data-button][data-style='outline'][data-variant='secondary'] {
+  border-width:1px;background-color:transparent;border-color:var(--accent);color:var(--accent);
+}
+
+[data-style='rokkit'] [data-button][data-style='outline'][data-variant='accent'] {
+  border-width:1px;background-color:transparent;border-color:var(--accent);color:var(--accent);
+}
+
+[data-style='rokkit'] [data-button][data-style='outline'][data-variant='danger'] {
+  border-width:1px;background-color:transparent;border-color:var(--danger);color:var(--danger);
+}
+
+/* =============================================================================
+   Ghost Style
+   ============================================================================= */
+
+[data-style='rokkit'] [data-button][data-style='ghost'] {
+  border-color:transparent;background-color:transparent;
+}
+
+[data-style='rokkit'] [data-button][data-style='ghost'][data-variant='default'],
+[data-style='rokkit'] [data-button][data-style='ghost']:not([data-variant]) {
+  color:var(--ink-mute);
+}
+
+[data-style='rokkit'] [data-button][data-style='ghost'][data-variant='primary'] {
+  color:var(--primary);
+}
+
+[data-style='rokkit'] [data-button][data-style='ghost'][data-variant='secondary'] {
+  color:var(--accent);
+}
+
+[data-style='rokkit'] [data-button][data-style='ghost'][data-variant='accent'] {
+  color:var(--accent);
+}
+
+[data-style='rokkit'] [data-button][data-style='ghost'][data-variant='danger'] {
+  color:var(--danger);
+}
+
+/* =============================================================================
+   Gradient Style
+   ============================================================================= */
+
+[data-style='rokkit'] [data-button][data-style='gradient'][data-variant='default'],
+[data-style='rokkit'] [data-button][data-style='gradient']:not([data-variant]) {
+  --un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));color:var(--ink);
+}
+
+[data-style='rokkit'] [data-button][data-style='gradient'][data-variant='primary'] {
+  --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-primary) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-primary) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));color:var(--on-primary);
+}
+
+[data-style='rokkit'] [data-button][data-style='gradient'][data-variant='secondary'] {
+  --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));color:var(--on-primary);
+}
+
+[data-style='rokkit'] [data-button][data-style='gradient'][data-variant='accent'] {
+  --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
+}
+
+[data-style='rokkit'] [data-button][data-style='gradient'][data-variant='danger'] {
+  --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-danger) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-danger) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgb(22 22 22 / var(--un-text-opacity));
+}
+
+[data-style='rokkit']
+  [data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
+  filter: brightness(1.1);
+}
+
+/* =============================================================================
+   Link Style
+   ============================================================================= */
+
+[data-style='rokkit'] [data-button][data-style='link'][data-variant='default'],
+[data-style='rokkit'] [data-button][data-style='link']:not([data-variant]) {
+  color:var(--ink-mute);
+}
+
+[data-style='rokkit'] [data-button][data-style='link'][data-variant='primary'] {
+  color:var(--primary);
+}
+
+[data-style='rokkit'] [data-button][data-style='link'][data-variant='secondary'] {
+  color:var(--accent);
+}
+
+[data-style='rokkit'] [data-button][data-style='link'][data-variant='accent'] {
+  color:var(--accent);
+}
+
+[data-style='rokkit'] [data-button][data-style='link'][data-variant='danger'] {
+  color:var(--danger);
+}
+
+[data-style='rokkit'] [data-button][data-style='link']:hover:not(:disabled):not([data-disabled]) {
+  color:var(--primary);
+}
+
+/* =============================================================================
+   Hover States
+   ============================================================================= */
+
+/* Default style hover */
+[data-style='rokkit'] [data-button][data-style='default']:hover:not(:disabled):not([data-disabled]),
+[data-style='rokkit'] [data-button]:not([data-style]):hover:not(:disabled):not([data-disabled]) {
+  opacity:0.9;
+}
+
+/* Outline style hover */
+[data-style='rokkit']
+  [data-button][data-style='outline']:hover:not(:disabled):not(
+    [data-disabled]
+  )[data-variant='default'],
+[data-style='rokkit']
+  [data-button][data-style='outline']:hover:not(:disabled):not([data-disabled]):not(
+    [data-variant]
+  ) {
+  --un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
+}
+
+[data-style='rokkit']
+  [data-button][data-style='outline']:hover:not(:disabled):not(
+    [data-disabled]
+  )[data-variant='primary'] {
+  --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-primary) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-primary) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
+}
+
+[data-style='rokkit']
+  [data-button][data-style='outline']:hover:not(:disabled):not(
+    [data-disabled]
+  )[data-variant='secondary'] {
+  --un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
+}
+
+[data-style='rokkit']
+  [data-button][data-style='outline']:hover:not(:disabled):not(
+    [data-disabled]
+  )[data-variant='accent'] {
+  --un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
+}
+
+[data-style='rokkit']
+  [data-button][data-style='outline']:hover:not(:disabled):not(
+    [data-disabled]
+  )[data-variant='danger'] {
+  --un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
+}
+
+/* Ghost style hover */
+[data-style='rokkit']
+  [data-button][data-style='ghost']:hover:not(:disabled):not(
+    [data-disabled]
+  )[data-variant='default'],
+[data-style='rokkit']
+  [data-button][data-style='ghost']:hover:not(:disabled):not([data-disabled]):not([data-variant]) {
+  background-color:var(--paper-mute);
+}
+
+[data-style='rokkit']
+  [data-button][data-style='ghost']:hover:not(:disabled):not(
+    [data-disabled]
+  )[data-variant='primary'] {
+  background-color: var(--primary);
+}
+
+[data-style='rokkit']
+  [data-button][data-style='ghost']:hover:not(:disabled):not(
+    [data-disabled]
+  )[data-variant='secondary'] {
+  background-color:var(--accent-soft);
+}
+
+[data-style='rokkit']
+  [data-button][data-style='ghost']:hover:not(:disabled):not(
+    [data-disabled]
+  )[data-variant='accent'] {
+  background-color:var(--accent-soft);
+}
+
+[data-style='rokkit']
+  [data-button][data-style='ghost']:hover:not(:disabled):not(
+    [data-disabled]
+  )[data-variant='danger'] {
+  background-color:var(--danger-soft);
+}
+
+/* =============================================================================
+   Active/Pressed State
+   ============================================================================= */
+
+[data-style='rokkit'] [data-button]:active:not(:disabled):not([data-disabled]) {
+  --un-scale-x:0.95;--un-scale-y:0.95;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));
+  animation: button-pop 0.25s ease-out;
+}
+
+/* =============================================================================
+   Focus
+   ============================================================================= */
+
+[data-style='rokkit'] [data-button]:focus-visible {
+  outline:2px solid transparent;outline-offset:2px;--un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:var(--primary);
+}
+
+/* =============================================================================
+   Icon Colors
+   ============================================================================= */
+
+[data-style='rokkit'] [data-button] [data-item-icon],
+[data-style='rokkit'] [data-button] [data-button-icon-right] {
+  color: inherit;
+  opacity: 0.8;
+}
+
+[data-style='rokkit'] [data-button]:hover [data-item-icon],
+[data-style='rokkit'] [data-button]:hover [data-button-icon-right] {
+  opacity: 1;
+}
+
+/* =============================================================================
+   Button Group
+   ============================================================================= */
+
+[data-style='rokkit'] [data-button-group] {
+  gap:1px;
+}
+
+[data-style='rokkit'] [data-button-group] [data-button]:first-child {
+  border-top-left-radius:0.5rem;border-bottom-left-radius:0.5rem;border-top-right-radius:0;border-bottom-right-radius:0;
+}
+
+[data-style='rokkit'] [data-button-group] [data-button]:last-child {
+  border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:0.5rem;border-bottom-right-radius:0.5rem;
+}

package/dist/rokkit/card.css

@@ -0,0 +1,102 @@
+/**
+ * Card - Rokkit Theme Styles
+ *
+ * Rich gradients, elevated shadows, and vibrant surface styling.
+ */
+
+/* =============================================================================
+   Base Card Styles
+   ============================================================================= */
+
+[data-style='rokkit'] [data-card] {
+  border-width:1px;--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);border-color:var(--ink-soft);color:var(--ink);
+}
+
+/* Interactive cards (buttons) */
+[data-style='rokkit'] [data-card][data-card-interactive] {
+  cursor: pointer;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+}
+
+[data-style='rokkit'] [data-card][data-card-interactive]:hover {
+  --un-shadow:var(--un-shadow-inset) 0 20px 25px -5px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 8px 10px -6px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
+  transform: translateY(-2px);
+}
+
+[data-style='rokkit'] [data-card][data-card-interactive]:active {
+  --un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
+  transform: translateY(0);
+}
+
+/* =============================================================================
+   Card Sections
+   ============================================================================= */
+
+[data-style='rokkit'] [data-card-header] {
+  border-bottom-width:1px;border-color:var(--paper-edge);
+}
+
+[data-style='rokkit'] [data-card-body] {
+  color:var(--ink-mute);
+}
+
+[data-style='rokkit'] [data-card-footer] {
+  border-top-width:1px;border-color:var(--paper-edge);color:var(--ink-mute);
+}
+
+/* =============================================================================
+   Focus States
+   ============================================================================= */
+
+[data-style='rokkit'] [data-card][data-card-interactive]:focus-visible {
+  outline:2px solid transparent;outline-offset:2px;--un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:var(--primary);
+}
+
+/* =============================================================================
+   Disabled State
+   ============================================================================= */
+
+[data-style='rokkit'] [data-card][data-card-interactive][data-disabled],
+[data-style='rokkit'] [data-card][data-card-interactive]:disabled {
+  cursor:not-allowed;opacity:0.5;
+  transform: none;
+}
+
+/* =============================================================================
+   Variants
+   ============================================================================= */
+
+/* Primary — gradient from primary to secondary */
+[data-style='rokkit'] [data-card][data-variant='primary'] {
+  --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-primary) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);border-color:var(--primary);color:var(--on-primary);
+}
+
+[data-style='rokkit'] [data-card][data-variant='primary'] [data-card-header],
+[data-style='rokkit'] [data-card][data-variant='primary'] [data-card-footer] {
+  border-color:color-mix(in srgb, var(--color-primary) calc(0.4 * 100%), transparent);
+}
+
+[data-style='rokkit'] [data-card][data-variant='primary'] [data-card-body] {
+  color:rgb(22 22 22 / 0.8);
+}
+
+/* Secondary — muted secondary surface */
+[data-style='rokkit'] [data-card][data-variant='secondary'] {
+  --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-shadow:var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);border-color:var(--accent);color:var(--on-primary);
+}
+
+[data-style='rokkit'] [data-card][data-variant='secondary'] [data-card-header],
+[data-style='rokkit'] [data-card][data-variant='secondary'] [data-card-footer] {
+  border-color:color-mix(in srgb, var(--color-accent) calc(0.4 * 100%), transparent);
+}
+
+[data-style='rokkit'] [data-card][data-variant='secondary'] [data-card-body] {
+  color:rgb(22 22 22 / 0.8);
+}
+
+/* Tertiary — elevated surface, no color accent */
+[data-style='rokkit'] [data-card][data-variant='tertiary'] {
+  --un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-shadow:var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);border-color:var(--paper-edge);color:var(--ink-mute);
+}

package/dist/rokkit/chart.css

@@ -0,0 +1,38 @@
+/**
+ * Chart - Rokkit Theme Styles
+ */
+
+[data-style='rokkit'] [data-chart-axis-line],
+[data-style='rokkit'] [data-chart-tick] line {
+  stroke:var(--paper-edge);
+}
+
+[data-style='rokkit'] [data-chart-tick-label] {
+  fill:var(--ink-soft);
+}
+
+[data-style='rokkit'] [data-chart-grid-line] {
+  stroke:var(--paper-mute);
+  stroke-dasharray: 4 4;
+  stroke-opacity: 0.5;
+}
+
+[data-style='rokkit'] [data-chart-legend-label] {
+  fill:var(--ink-soft);
+}
+
+[data-style='rokkit'] [data-chart-legend-item]:hover {
+  color:var(--ink);
+}
+
+[data-style='rokkit'] [data-plot-element='bar'][data-dimmed],
+[data-style='rokkit'] [data-plot-element='point'][data-dimmed],
+[data-style='rokkit'] [data-plot-element='arc'][data-dimmed],
+[data-style='rokkit'] [data-plot-element='line'][data-dimmed],
+[data-style='rokkit'] [data-plot-element='area'][data-dimmed] {
+  opacity: 0.15;
+}
+
+[data-style='rokkit'] [data-facet-title] {
+  color:var(--ink-soft);
+}

package/dist/rokkit/code-block.css

@@ -0,0 +1,33 @@
+/**
+ * CodeBlock — rokkit theme.
+ * Frame supplies the chrome; this adds typography + muted tokens for
+ * the title row, lang chip, action buttons, and pre/code body.
+ */
+
+[data-style='rokkit'] [data-code-block-icon] {
+	color:var(--ink-soft);
+}
+
+[data-style='rokkit'] [data-code-block-filename] {
+	font: 500 11.5px var(--font-mono);
+	color:var(--ink-mute);
+}
+
+[data-style='rokkit'] [data-code-block-lang] {
+	font: 500 10px var(--font-mono);
+	border-width:1px;color:var(--ink-soft);border-color:var(--paper-edge);
+}
+
+[data-style='rokkit'] [data-code-block-actions] button {
+	font: 500 11px var(--font-mono);
+	color:var(--ink-soft);
+}
+
+[data-style='rokkit'] [data-code-block-actions] button:hover {
+	background-color:var(--paper-mute);color:var(--ink);
+}
+
+[data-style='rokkit'] [data-code-block-body] pre {
+	font: 400 12px/1.65 var(--font-mono);
+	color:var(--ink);
+}

package/dist/rokkit/command-palette.css

@@ -0,0 +1,37 @@
+/**
+ * CommandPalette - Rokkit Theme Styles
+ *
+ * Rich gradients and glowing borders.
+ */
+
+[data-style='rokkit'] [data-command-backdrop] {
+	background: rgb(0 0 0 / 0.4);
+}
+
+[data-style='rokkit'] [data-command-palette] {
+	border-width:1px;background-color:var(--paper-soft);border-color:var(--paper-edge);
+}
+
+[data-style='rokkit'] [data-command-input] {
+	color:var(--ink);
+}[data-style='rokkit'] [data-command-input]::placeholder{color:var(--ink-faint);}
+
+[data-style='rokkit'] [data-command-item] {
+	color:var(--ink);
+}
+
+[data-style='rokkit'] [data-command-item][data-active] {
+	background-color:var(--primary);color:var(--on-primary);
+}
+
+[data-style='rokkit'] [data-command-shortcut] {
+	color:var(--ink-mute);
+}
+
+[data-style='rokkit'] [data-command-label] {
+	font-size:0.75rem;line-height:1rem;font-weight:500;color:var(--ink-soft);
+}
+
+[data-style='rokkit'] [data-command-empty] {
+	color:var(--ink-mute);
+}

package/dist/rokkit/connector.css

@@ -0,0 +1,11 @@
+/**
+ * Connector - Rokkit Theme Styles
+ *
+ * Visual theming for tree line connectors.
+ */
+
+[data-style='rokkit'] [data-connector] [data-connector-v],
+[data-style='rokkit'] [data-connector] [data-connector-h],
+[data-style='rokkit'] [data-connector] [data-connector-corner] {
+  border-color:var(--paper-mute);
+}

package/dist/rokkit/divider.css

@@ -0,0 +1,26 @@
+/**
+ * Divider - Rokkit Theme Styles
+ */
+
+[data-style='rokkit'] [data-divider][data-orientation='horizontal']::before,
+[data-style='rokkit'] [data-divider][data-orientation='horizontal']::after {
+  background-color:var(--paper-edge);
+}
+
+[data-style='rokkit'] [data-divider][data-orientation='vertical']::before,
+[data-style='rokkit'] [data-divider][data-orientation='vertical']::after {
+  background-color:var(--paper-edge);
+}
+
+/* No-label horizontal divider — color the element itself */
+[data-style='rokkit'] [data-divider][data-orientation='horizontal']:not(:has([data-divider-label])) {
+  background-color:var(--paper-edge);
+}
+
+[data-style='rokkit'] [data-divider][data-orientation='vertical']:not(:has([data-divider-label])) {
+  background-color:var(--paper-edge);
+}
+
+[data-style='rokkit'] [data-divider-label] {
+  color:var(--ink-mute);
+}

package/dist/rokkit/dropdown.css

@@ -0,0 +1,70 @@
+/**
+ * Dropdown - Rokkit Theme Styles
+ *
+ * Rich gradients and glowing borders.
+ */
+
+/* =============================================================================
+   Trigger
+   ============================================================================= */
+
+[data-style='rokkit'] [data-dropdown-trigger] {
+  border-width:1px;--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));border-color:var(--paper-edge);color:var(--ink-mute);
+}
+
+[data-style='rokkit'] [data-dropdown-trigger]:hover:not(:disabled) {
+  --un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));color:var(--ink);border-color:var(--ink-soft);
+}
+
+[data-style='rokkit'] [data-dropdown-trigger]:focus-visible {
+  outline:2px solid transparent;outline-offset:2px;
+}
+
+[data-style='rokkit'] [data-dropdown][data-open='true'] [data-dropdown-trigger] {
+  --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-primary) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));border-color:var(--primary);
+}
+
+[data-style='rokkit'] [data-dropdown-trigger] [data-dropdown-icon] {
+  color:var(--ink-mute);
+}
+
+[data-style='rokkit'] [data-dropdown-trigger]:hover:not(:disabled) [data-dropdown-icon] {
+  color:var(--ink-mute);
+}
+
+[data-style='rokkit'] [data-dropdown-trigger] [data-dropdown-arrow] {
+  color:var(--ink-mute);
+}
+
+/* =============================================================================
+   Panel
+   ============================================================================= */
+
+[data-style='rokkit'] [data-dropdown-panel] {
+  border-width:1px;--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);border-color:var(--paper-edge);
+}
+
+/* =============================================================================
+   Options
+   ============================================================================= */
+
+[data-style='rokkit'] [data-dropdown-option] {
+  color:var(--ink-mute);
+}
+
+[data-style='rokkit'] [data-dropdown-option]:hover:not(:disabled),
+[data-style='rokkit'] [data-dropdown-option]:focus:not(:disabled) {
+  --un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));outline:2px solid transparent;outline-offset:2px;color:var(--ink);
+}
+
+[data-style='rokkit'] [data-dropdown-option][data-active='true'] {
+  --un-gradient-from-position:0%;--un-gradient-from:color-mix(in srgb, var(--color-primary) calc(1 * 100%), transparent) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:color-mix(in srgb, var(--color-accent) calc(1 * 100%), transparent) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));color:var(--primary);
+}
+
+/* =============================================================================
+   Separator
+   ============================================================================= */
+
+[data-style='rokkit'] [data-dropdown-separator] {
+  --un-gradient-from-position:0%;--un-gradient-from:transparent var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:transparent var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
+}