@rokkit/themes 1.0.0-next.147 → 1.0.0-next.149

package/dist/rokkit.css

@@ -35,6 +35,12 @@
   border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-secondary-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-secondary-400),1) 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:rgba(var(--color-secondary-300),1) 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-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));
 }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="default"][data-variant="secondary"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="default"][data-variant="secondary"],[data-mode="dark"][data-style="rokkit"] [data-button]:not([data-style])[data-variant="secondary"],[data-mode="dark"] [data-style="rokkit"] [data-button]:not([data-style])[data-variant="secondary"]{--un-border-opacity:1;border-color:rgba(var(--color-secondary-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-secondary-600),1) 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:rgba(var(--color-secondary-700),1) var(--un-gradient-to-position);}
 
+/* 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-border-opacity:1;border-color:rgba(var(--color-accent-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-accent-400),1) 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:rgba(var(--color-accent-300),1) 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-text-opacity:1;color:rgba(var(--color-accent-50),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-button][data-style="default"][data-variant="accent"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="default"][data-variant="accent"],[data-mode="dark"][data-style="rokkit"] [data-button]:not([data-style])[data-variant="accent"],[data-mode="dark"] [data-style="rokkit"] [data-button]:not([data-style])[data-variant="accent"]{--un-border-opacity:1;border-color:rgba(var(--color-accent-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-accent-600),1) 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:rgba(var(--color-accent-700),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-accent-50),var(--un-text-opacity));}
+
 /* Danger variant */
 [data-style='rokkit'] [data-button][data-style='default'][data-variant='danger'],
 [data-style='rokkit'] [data-button]:not([data-style])[data-variant='danger'] {
@@ -58,6 +64,10 @@
   border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-secondary-400),var(--un-border-opacity));background-color:transparent;--un-text-opacity:1;color:rgba(var(--color-secondary-600),var(--un-text-opacity));
 }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="outline"][data-variant="secondary"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="outline"][data-variant="secondary"]{--un-border-opacity:1;border-color:rgba(var(--color-secondary-600),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-secondary-400),var(--un-text-opacity));}
 
+[data-style='rokkit'] [data-button][data-style='outline'][data-variant='accent'] {
+  border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-accent-400),var(--un-border-opacity));background-color:transparent;--un-text-opacity:1;color:rgba(var(--color-accent-600),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-button][data-style="outline"][data-variant="accent"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="outline"][data-variant="accent"]{--un-border-opacity:1;border-color:rgba(var(--color-accent-600),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-accent-400),var(--un-text-opacity));}
+
 [data-style='rokkit'] [data-button][data-style='outline'][data-variant='danger'] {
   border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-danger-400),var(--un-border-opacity));background-color:transparent;--un-text-opacity:1;color:rgba(var(--color-danger-400),var(--un-text-opacity));
 }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="outline"][data-variant="danger"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="outline"][data-variant="danger"]{--un-border-opacity:1;border-color:rgba(var(--color-danger-600),var(--un-border-opacity));--un-text-opacity:1;color:rgba(var(--color-danger-600),var(--un-text-opacity));}
@@ -83,6 +93,10 @@
   --un-text-opacity:1;color:rgba(var(--color-secondary-600),var(--un-text-opacity));
 }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="ghost"][data-variant="secondary"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="ghost"][data-variant="secondary"]{--un-text-opacity:1;color:rgba(var(--color-secondary-400),var(--un-text-opacity));}
 
+[data-style='rokkit'] [data-button][data-style='ghost'][data-variant='accent'] {
+  --un-text-opacity:1;color:rgba(var(--color-accent-600),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-button][data-style="ghost"][data-variant="accent"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="ghost"][data-variant="accent"]{--un-text-opacity:1;color:rgba(var(--color-accent-400),var(--un-text-opacity));}
+
 [data-style='rokkit'] [data-button][data-style='ghost'][data-variant='danger'] {
   --un-text-opacity:1;color:rgba(var(--color-danger-400),var(--un-text-opacity));
 }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="ghost"][data-variant="danger"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="ghost"][data-variant="danger"]{--un-text-opacity:1;color:rgba(var(--color-danger-600),var(--un-text-opacity));}
@@ -104,6 +118,10 @@
   --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-secondary-500),1) 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:rgba(var(--color-secondary-300),1) 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:rgba(var(--color-surface-50),var(--un-text-opacity));
 }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="gradient"][data-variant="secondary"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="gradient"][data-variant="secondary"]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-secondary-500),1) 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:rgba(var(--color-secondary-700),1) var(--un-gradient-to-position);}
 
+[data-style='rokkit'] [data-button][data-style='gradient'][data-variant='accent'] {
+  --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-accent-500),1) 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:rgba(var(--color-accent-300),1) 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:rgba(var(--color-accent-50),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-button][data-style="gradient"][data-variant="accent"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="gradient"][data-variant="accent"]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-accent-500),1) 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:rgba(var(--color-accent-700),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-accent-50),var(--un-text-opacity));}
+
 [data-style='rokkit'] [data-button][data-style='gradient'][data-variant='danger'] {
   --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-danger-500),1) 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:rgba(var(--color-danger-300),1) 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:rgba(var(--color-danger-50),var(--un-text-opacity));
 }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="gradient"][data-variant="danger"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="gradient"][data-variant="danger"]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-danger-500),1) 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:rgba(var(--color-danger-700),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-danger-50),var(--un-text-opacity));}
@@ -130,6 +148,10 @@
   --un-text-opacity:1;color:rgba(var(--color-secondary-600),var(--un-text-opacity));
 }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="link"][data-variant="secondary"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="link"][data-variant="secondary"]{--un-text-opacity:1;color:rgba(var(--color-secondary-400),var(--un-text-opacity));}
 
+[data-style='rokkit'] [data-button][data-style='link'][data-variant='accent'] {
+  --un-text-opacity:1;color:rgba(var(--color-accent-600),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-button][data-style="link"][data-variant="accent"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="link"][data-variant="accent"]{--un-text-opacity:1;color:rgba(var(--color-accent-400),var(--un-text-opacity));}
+
 [data-style='rokkit'] [data-button][data-style='link'][data-variant='danger'] {
   --un-text-opacity:1;color:rgba(var(--color-danger-400),var(--un-text-opacity));
 }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="link"][data-variant="danger"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="link"][data-variant="danger"]{--un-text-opacity:1;color:rgba(var(--color-danger-600),var(--un-text-opacity));}
@@ -174,6 +196,13 @@
   --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-secondary-200),1) 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:rgba(var(--color-secondary-100),1) 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-mode="dark"][data-style="rokkit"] [data-button][data-style="outline"]:hover:not(:disabled):not([data-disabled])[data-variant="secondary"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="outline"]:hover:not(:disabled):not([data-disabled])[data-variant="secondary"]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-secondary-800),1) 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:rgba(var(--color-secondary-900),1) var(--un-gradient-to-position);}
 
+[data-style='rokkit']
+  [data-button][data-style='outline']:hover:not(:disabled):not(
+    [data-disabled]
+  )[data-variant='accent'] {
+  --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-accent-200),1) 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:rgba(var(--color-accent-100),1) 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-mode="dark"][data-style="rokkit"] [data-button][data-style="outline"]:hover:not(:disabled):not([data-disabled])[data-variant="accent"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="outline"]:hover:not(:disabled):not([data-disabled])[data-variant="accent"]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-accent-800),1) 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:rgba(var(--color-accent-900),1) var(--un-gradient-to-position);}
+
 [data-style='rokkit']
   [data-button][data-style='outline']:hover:not(:disabled):not(
     [data-disabled]
@@ -205,6 +234,13 @@
   --un-bg-opacity:1;background-color:rgba(var(--color-secondary-100),var(--un-bg-opacity));
 }[data-mode="dark"][data-style="rokkit"] [data-button][data-style="ghost"]:hover:not(:disabled):not([data-disabled])[data-variant="secondary"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="ghost"]:hover:not(:disabled):not([data-disabled])[data-variant="secondary"]{--un-bg-opacity:1;background-color:rgba(var(--color-secondary-900),var(--un-bg-opacity));}
 
+[data-style='rokkit']
+  [data-button][data-style='ghost']:hover:not(:disabled):not(
+    [data-disabled]
+  )[data-variant='accent'] {
+  --un-bg-opacity:1;background-color:rgba(var(--color-accent-100),var(--un-bg-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-button][data-style="ghost"]:hover:not(:disabled):not([data-disabled])[data-variant="accent"],[data-mode="dark"] [data-style="rokkit"] [data-button][data-style="ghost"]:hover:not(:disabled):not([data-disabled])[data-variant="accent"]{--un-bg-opacity:1;background-color:rgba(var(--color-accent-900),var(--un-bg-opacity));}
+
 [data-style='rokkit']
   [data-button][data-style='ghost']:hover:not(:disabled):not(
     [data-disabled]
@@ -520,9 +556,10 @@
   border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) 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:rgba(var(--color-surface-200),1) 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-mode="dark"][data-style="rokkit"] [data-switch-track],[data-mode="dark"] [data-style="rokkit"] [data-switch-track]{--un-border-opacity:1;border-color:rgba(var(--color-surface-600),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-700),1) 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:rgba(var(--color-surface-800),1) var(--un-gradient-to-position);}
 
-[data-style='rokkit'] [data-switch-thumb] {
+[data-style='rokkit'] [data-switch] [data-switch-thumb] {
+  --switch-thumb-travel: 1.125rem;
   --un-bg-opacity:1;background-color:rgba(var(--color-surface-600),var(--un-bg-opacity));--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
-}[data-mode="dark"][data-style="rokkit"] [data-switch-thumb],[data-mode="dark"] [data-style="rokkit"] [data-switch-thumb]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-400),var(--un-bg-opacity));}
+}[data-mode="dark"][data-style="rokkit"] [data-switch] [data-switch-thumb],[data-mode="dark"] [data-style="rokkit"] [data-switch] [data-switch-thumb]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-400),var(--un-bg-opacity));}
 
 [data-style='rokkit'] [data-switch]:focus-visible [data-switch-track] {
   --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-offset-width:1px;--un-ring-opacity:1;--un-ring-color:rgba(var(--color-primary-500),var(--un-ring-opacity));
@@ -656,14 +693,32 @@
   --un-border-opacity:1;border-color:rgba(var(--color-primary-600),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-600),1) 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:rgba(var(--color-primary-500),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));
 }[data-mode="dark"][data-style="rokkit"] [data-list]:focus-within [data-list-item][data-active="true"] [data-item-badge],[data-mode="dark"] [data-style="rokkit"] [data-list]:focus-within [data-list-item][data-active="true"] [data-item-badge]{--un-border-opacity:1;border-color:rgba(var(--color-primary-400),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-400),1) 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:rgba(var(--color-primary-500),1) var(--un-gradient-to-position);}
 
+/* =============================================================================
+   Indentation by nesting level
+   ============================================================================= */
+
+[data-style='rokkit'] [data-list] [data-list-item][data-level='2'],
+[data-style='rokkit'] [data-list] [data-list-group][data-level='2'] {
+  padding-left: 1.25rem;
+}
+
+[data-style='rokkit'] [data-list] [data-list-item][data-level='3'],
+[data-style='rokkit'] [data-list] [data-list-group][data-level='3'] {
+  padding-left: 2rem;
+}
+
 /* =============================================================================
    Groups
    ============================================================================= */
 
 [data-style='rokkit'] [data-list] [data-list-group] {
-  --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
+  margin-top:0.5rem;--un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
 }[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-group],[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-group]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
 
+[data-style='rokkit'] [data-list] [data-list-group]:first-child {
+  margin-top:0;
+}
+
 [data-style='rokkit'] [data-list] [data-list-group] [data-item-icon] {
   font-size: 1rem;
 }
@@ -1974,7 +2029,8 @@
   --un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-500),var(--un-border-left-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
 }[data-mode="dark"][data-style="rokkit"] [data-toc] [data-toc-item][data-toc-active],[data-mode="dark"] [data-style="rokkit"] [data-toc] [data-toc-item][data-toc-active]{--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-500),var(--un-border-left-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
 
-* Card - Rokkit Theme Styles
+/**
+ * Card - Rokkit Theme Styles
  *
  * Rich gradients, elevated shadows, and vibrant surface styling.
  */
@@ -1985,16 +2041,7 @@
 
 [data-style='rokkit'] [data-card] {
   border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-200),1) 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:rgba(var(--color-surface-100),1) 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-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));--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);
-}* Card - Rokkit Theme Styles
- *
- * Rich gradients, elevated shadows, and vibrant surface styling.
- */
-
-/* =============================================================================
-   Base Card Styles
-   ============================================================================= */
-
-[data-style='rokkit'] [data-card]{--un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-800),1) 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:rgba(var(--color-surface-900),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
+}[data-mode="dark"][data-style="rokkit"] [data-card],[data-mode="dark"] [data-style="rokkit"] [data-card]{--un-border-opacity:1;border-color:rgba(var(--color-surface-500),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-800),1) 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:rgba(var(--color-surface-900),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
 
 /* Interactive cards (buttons) */
 [data-style='rokkit'] [data-card][data-card-interactive] {
@@ -2199,3 +2246,61 @@
   --un-bg-opacity:1;background-color:rgba(var(--color-surface-300),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));font-weight:600;
 }[data-mode="dark"][data-style="rokkit"] [data-status-count],[data-mode="dark"] [data-style="rokkit"] [data-status-count]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-700),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
 
+/**
+ * Chart - Rokkit Theme Styles
+ */
+
+[data-style='rokkit'] [data-chart-axis-line],
+[data-style='rokkit'] [data-chart-tick] line {
+  --un-stroke-opacity:1;stroke:rgba(var(--color-surface-400),var(--un-stroke-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-chart-axis-line],[data-mode="dark"] [data-style="rokkit"] [data-chart-axis-line],[data-mode="dark"][data-style="rokkit"] [data-chart-tick] line,[data-mode="dark"] [data-style="rokkit"] [data-chart-tick] line{--un-stroke-opacity:1;stroke:rgba(var(--color-surface-600),var(--un-stroke-opacity));}
+
+[data-style='rokkit'] [data-chart-tick-label] {
+  --un-fill-opacity:1;fill:rgba(var(--color-surface-600),var(--un-fill-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-chart-tick-label],[data-mode="dark"] [data-style="rokkit"] [data-chart-tick-label]{--un-fill-opacity:1;fill:rgba(var(--color-surface-400),var(--un-fill-opacity));}
+
+[data-style='rokkit'] [data-chart-grid-line] {
+  --un-stroke-opacity:1;stroke:rgba(var(--color-surface-300),var(--un-stroke-opacity));
+  stroke-dasharray: 4 4;
+  stroke-opacity: 0.5;
+}[data-mode="dark"][data-style="rokkit"] [data-chart-grid-line],[data-mode="dark"] [data-style="rokkit"] [data-chart-grid-line]{--un-stroke-opacity:1;stroke:rgba(var(--color-surface-700),var(--un-stroke-opacity));}
+
+[data-style='rokkit'] [data-chart-legend-label] {
+  --un-fill-opacity:1;fill:rgba(var(--color-surface-600),var(--un-fill-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-chart-legend-label],[data-mode="dark"] [data-style="rokkit"] [data-chart-legend-label]{--un-fill-opacity:1;fill:rgba(var(--color-surface-400),var(--un-fill-opacity));}
+
+[data-style='rokkit'] [data-chart-legend-item]:hover {
+  --un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-chart-legend-item]:hover,[data-mode="dark"] [data-style="rokkit"] [data-chart-legend-item]:hover{--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
+
+[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] {
+  --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-facet-title],[data-mode="dark"] [data-style="rokkit"] [data-facet-title]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
+
+/**
+ * Swatch — Rokkit Theme
+ * Selected ring uses primary→secondary gradient, matching input focus ring.
+ */
+
+[data-style='rokkit'] [data-swatch-item][data-selected] {
+  --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) 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:rgba(var(--color-secondary-500),1) 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));
+}
+
+[data-style='rokkit'] [data-swatch-item]:hover:not(:disabled):not([data-disabled]):not([data-selected]),
+[data-style='rokkit'] [data-swatch-item]:focus-visible:not(:disabled):not([data-disabled]):not([data-selected]) {
+  --un-outline-color-opacity:1;outline-color:rgba(var(--color-primary-400),var(--un-outline-color-opacity));
+}[data-mode="dark"][data-style="rokkit"] [data-swatch-item]:hover:not(:disabled):not([data-disabled]):not([data-selected]),[data-mode="dark"] [data-style="rokkit"] [data-swatch-item]:hover:not(:disabled):not([data-disabled]):not([data-selected]),[data-mode="dark"][data-style="rokkit"] [data-swatch-item]:focus-visible:not(:disabled):not([data-disabled]):not([data-selected]),[data-mode="dark"] [data-style="rokkit"] [data-swatch-item]:focus-visible:not(:disabled):not([data-disabled]):not([data-selected]){--un-outline-color-opacity:1;outline-color:rgba(var(--color-primary-600),var(--un-outline-color-opacity));}
+
+[data-style='rokkit'] [data-swatch-item][data-selected]:focus-visible {
+  --un-outline-color-opacity:1;outline-color:rgba(var(--color-primary-600),var(--un-outline-color-opacity));
+  outline-offset: 3px;
+}[data-mode="dark"][data-style="rokkit"] [data-swatch-item][data-selected]:focus-visible,[data-mode="dark"] [data-style="rokkit"] [data-swatch-item][data-selected]:focus-visible{--un-outline-color-opacity:1;outline-color:rgba(var(--color-primary-400),var(--un-outline-color-opacity));}
+