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

package/src/daisy-ui/upload-progress.css

@@ -0,0 +1,102 @@
+/**
+ * UploadProgress - DaisyUI Theme Styles
+ *
+ * Status colors, primary progress fill, pill-rounded action buttons.
+ */
+
+/* =============================================================================
+   Header
+   ============================================================================= */
+
+[data-style='daisy-ui'] [data-upload-header] {
+  @apply text-surface-z7;
+}
+
+[data-style='daisy-ui'] [data-upload-clear] {
+  @apply border-surface-z4 text-surface-z6 rounded-full;
+}
+
+[data-style='daisy-ui'] [data-upload-clear]:hover {
+  @apply bg-surface-z3 text-surface-z9;
+}
+
+/* =============================================================================
+   File Rows
+   ============================================================================= */
+
+[data-style='daisy-ui'] [data-upload-file-status] {
+  @apply text-surface-z7 rounded-lg;
+}
+
+[data-style='daisy-ui'] [data-upload-file-status]:hover {
+  @apply bg-surface-z1;
+}
+
+/* =============================================================================
+   File Elements
+   ============================================================================= */
+
+[data-style='daisy-ui'] [data-upload-file-icon] {
+  @apply text-surface-z5;
+}
+
+[data-style='daisy-ui'] [data-upload-file-size] {
+  @apply text-surface-z5;
+}
+
+/* =============================================================================
+   Progress Bar
+   ============================================================================= */
+
+[data-style='daisy-ui'] [data-upload-bar] {
+  @apply bg-surface-z3 rounded-full;
+}
+
+[data-style='daisy-ui'] [data-upload-fill] {
+  @apply bg-primary-z5 rounded-full;
+}
+
+/* =============================================================================
+   Status Colors
+   ============================================================================= */
+
+[data-style='daisy-ui'] [data-upload-file-status][data-status='uploading'] [data-upload-status] {
+  @apply text-primary-z6;
+}
+
+[data-style='daisy-ui'] [data-upload-file-status][data-status='done'] [data-upload-status] {
+  @apply text-success-z6;
+}
+
+[data-style='daisy-ui'] [data-upload-file-status][data-status='error'] [data-upload-status] {
+  @apply text-danger-z5;
+}
+
+[data-style='daisy-ui'] [data-upload-file-status][data-status='pending'] [data-upload-status] {
+  @apply text-surface-z5;
+}
+
+/* Status-based file icon tinting */
+[data-style='daisy-ui'] [data-upload-file-status][data-status='done'] [data-upload-file-icon] {
+  @apply text-success-z6;
+}
+
+[data-style='daisy-ui'] [data-upload-file-status][data-status='error'] [data-upload-file-icon] {
+  @apply text-danger-z5;
+}
+
+/* =============================================================================
+   Action Buttons
+   ============================================================================= */
+
+[data-style='daisy-ui'] [data-upload-actions] button {
+  @apply text-surface-z5 rounded-full;
+}
+
+[data-style='daisy-ui'] [data-upload-actions] button:hover {
+  @apply bg-surface-z3 text-surface-z9;
+}
+
+[data-style='daisy-ui'] [data-upload-file-status][data-status='error'] [data-upload-retry]:hover {
+  @apply text-primary-z7;
+}

package/src/daisy-ui/upload-target.css

@@ -0,0 +1,50 @@
+/**
+ * UploadTarget - DaisyUI Theme Styles
+ *
+ * Rounded-xl drop zone, bold primary on drag-over.
+ */
+
+/* =============================================================================
+   Drop Zone
+   ============================================================================= */
+
+[data-style='daisy-ui'] [data-upload-target] {
+  @apply border-surface-z4 text-surface-z6 rounded-xl;
+}
+
+[data-style='daisy-ui'] [data-upload-target]:hover:not([data-disabled]) {
+  @apply border-surface-z5 text-surface-z7 bg-surface-z2;
+}
+
+[data-style='daisy-ui'] [data-upload-target]:focus-visible:not([data-disabled]) {
+  @apply outline-2 outline-offset-2 outline-primary-z5 outline;
+}
+
+/* Drag-over highlight */
+[data-style='daisy-ui'] [data-upload-target][data-dragging] {
+  @apply border-primary-z5 bg-primary-z2 text-primary-z7;
+}
+
+/* =============================================================================
+   Upload Icon
+   ============================================================================= */
+
+[data-style='daisy-ui'] [data-upload-target] [data-upload-icon] {
+  @apply text-surface-z5;
+}
+
+[data-style='daisy-ui'] [data-upload-target][data-dragging] [data-upload-icon] {
+  @apply text-primary-z6;
+}
+
+/* =============================================================================
+   Browse Button
+   ============================================================================= */
+
+[data-style='daisy-ui'] [data-upload-target] [data-upload-button] {
+  @apply border-surface-z4 text-surface-z7 rounded-full;
+}
+
+[data-style='daisy-ui'] [data-upload-target] [data-upload-button]:hover:not(:disabled) {
+  @apply bg-primary-z5 text-on-primary border-primary-z5;
+}

package/src/glass/button.css

@@ -25,6 +25,11 @@
   @apply bg-secondary-z4/80 text-on-secondary shadow-sm backdrop-blur-md;
 }
 
+[data-style='glass'] [data-button][data-style='default'][data-variant='accent'],
+[data-style='glass'] [data-button]:not([data-style])[data-variant='accent'] {
+  @apply bg-accent-z4/80 text-on-accent shadow-sm backdrop-blur-md;
+}
+
 [data-style='glass'] [data-button][data-style='default'][data-variant='danger'],
 [data-style='glass'] [data-button]:not([data-style])[data-variant='danger'] {
   @apply bg-danger-z4/80 text-on-danger shadow-sm backdrop-blur-md;
@@ -47,6 +52,10 @@
   @apply border-secondary-z4/40 text-secondary-z6 border bg-transparent;
 }
 
+[data-style='glass'] [data-button][data-style='outline'][data-variant='accent'] {
+  @apply border-accent-z4/40 text-accent-z6 border bg-transparent;
+}
+
 [data-style='glass'] [data-button][data-style='outline'][data-variant='danger'] {
   @apply border-danger-z4/40 text-danger-z4 border bg-transparent;
 }
@@ -72,6 +81,10 @@
   @apply text-secondary-z6;
 }
 
+[data-style='glass'] [data-button][data-style='ghost'][data-variant='accent'] {
+  @apply text-accent-z6;
+}
+
 [data-style='glass'] [data-button][data-style='ghost'][data-variant='danger'] {
   @apply text-danger-z4;
 }
@@ -93,6 +106,10 @@
   @apply from-secondary-z5/80 to-secondary-z3/60 text-on-secondary bg-gradient-to-br backdrop-blur-md;
 }
 
+[data-style='glass'] [data-button][data-style='gradient'][data-variant='accent'] {
+  @apply from-accent-z5/80 to-accent-z3/60 text-on-accent bg-gradient-to-br backdrop-blur-md;
+}
+
 [data-style='glass'] [data-button][data-style='gradient'][data-variant='danger'] {
   @apply from-danger-z5/80 to-danger-z3/60 text-on-danger bg-gradient-to-br backdrop-blur-md;
 }
@@ -119,6 +136,10 @@
   @apply text-secondary-z6;
 }
 
+[data-style='glass'] [data-button][data-style='link'][data-variant='accent'] {
+  @apply text-accent-z6;
+}
+
 [data-style='glass'] [data-button][data-style='link'][data-variant='danger'] {
   @apply text-danger-z4;
 }

package/src/glass/chart.css

@@ -0,0 +1,38 @@
+/**
+ * Chart - Glass Theme Styles
+ */
+
+[data-style='glass'] [data-chart-axis-line],
+[data-style='glass'] [data-chart-tick] line {
+  @apply stroke-surface-z3;
+}
+
+[data-style='glass'] [data-chart-tick-label] {
+  @apply fill-surface-z5;
+}
+
+[data-style='glass'] [data-chart-grid-line] {
+  @apply stroke-surface-z3;
+  stroke-opacity: 0.5;
+  stroke-dasharray: 2 4;
+}
+
+[data-style='glass'] [data-chart-legend-label] {
+  @apply fill-surface-z5;
+}
+
+[data-style='glass'] [data-chart-legend-item]:hover {
+  @apply text-surface-z8;
+}
+
+[data-style='glass'] [data-plot-element="bar"][data-dimmed],
+[data-style='glass'] [data-plot-element="point"][data-dimmed],
+[data-style='glass'] [data-plot-element="arc"][data-dimmed],
+[data-style='glass'] [data-plot-element="line"][data-dimmed],
+[data-style='glass'] [data-plot-element="area"][data-dimmed] {
+  opacity: 0.15;
+}
+
+[data-style='glass'] [data-facet-title] {
+  @apply text-surface-z5;
+}

package/src/glass/index.css

@@ -26,3 +26,5 @@
 @import './card.css';
 @import './message.css';
 @import './status-list.css';
+@import './chart.css';
+@import './swatch.css';

package/src/glass/input.css

@@ -36,6 +36,7 @@
  * The semi-transparent background provides the frosted glass look. */
 [data-style='glass'] [data-input-root] {
   @apply bg-surface-z1/70 border-surface-z5/20 flex items-center rounded-md border p-0.5 transition-all;
+  background-image: none;
 }
 
 [data-style='glass'] [data-input-root]:hover {
@@ -44,6 +45,7 @@
 
 [data-style='glass'] [data-input-root]:focus-within {
   @apply border-primary-z5/50 bg-surface-z1/70;
+  background-image: none;
 }
 
 /* Standard inputs inside wrapper */

package/src/glass/swatch.css

@@ -0,0 +1,19 @@
+/**
+ * Swatch — Glass Theme
+ * Selected: secondary outline ring. Hover/focus: primary outline ring.
+ */
+
+[data-style='glass'] [data-swatch-item][data-selected] {
+  background: transparent;
+  @apply outline-secondary-z5;
+}
+
+[data-style='glass'] [data-swatch-item]:hover:not(:disabled):not([data-disabled]):not([data-selected]),
+[data-style='glass'] [data-swatch-item]:focus-visible:not(:disabled):not([data-disabled]):not([data-selected]) {
+  @apply outline-primary-z4;
+}
+
+[data-style='glass'] [data-swatch-item][data-selected]:focus-visible {
+  @apply outline-secondary-z6;
+  outline-offset: 3px;
+}

package/src/glass/tabs.css

@@ -9,7 +9,7 @@
    ============================================================================= */
 
 [data-style='glass'] [data-tabs-list] {
-  @apply bg-surface-z1/70 border-surface-z5/20 rounded-t-lg border-b backdrop-blur-md;
+  @apply bg-surface-z1/70 border-surface-z5/20 rounded-t-lg border-0 border-b px-0 backdrop-blur-md;
 }
 
 [data-style='glass'] [data-tabs][data-position='after'] [data-tabs-list] {
@@ -21,7 +21,7 @@
    ============================================================================= */
 
 [data-style='glass'] [data-tabs-trigger] {
-  @apply text-surface-z6;
+  @apply bg-transparent text-surface-z6;
 }
 
 [data-style='glass'] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {

package/src/grada-ui/button.css

@@ -32,7 +32,8 @@
 
 [data-style='grada-ui'] [data-button][data-style='default'][data-variant='primary'],
 [data-style='grada-ui'] [data-button]:not([data-style])[data-variant='primary'] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
   color: white;
   border-radius: 20px;
   @apply shadow-md;
@@ -40,18 +41,23 @@
 
 [data-style='grada-ui'] [data-button][data-style='default'][data-variant='secondary'],
 [data-style='grada-ui'] [data-button]:not([data-style])[data-variant='secondary'] {
-  background-color: var(--gd-secondary);
+  @apply bg-secondary-z5 shadow-md;
+  color: white;
+  border-radius: 20px;
+}
+
+[data-style='grada-ui'] [data-button][data-style='default'][data-variant='accent'],
+[data-style='grada-ui'] [data-button]:not([data-style])[data-variant='accent'] {
+  @apply bg-accent-z5 shadow-md;
   color: white;
   border-radius: 20px;
-  @apply shadow-md;
 }
 
 [data-style='grada-ui'] [data-button][data-style='default'][data-variant='danger'],
 [data-style='grada-ui'] [data-button]:not([data-style])[data-variant='danger'] {
-  background-color: var(--gd-error);
+  @apply bg-danger-z5 shadow-md;
   color: white;
   border-radius: 20px;
-  @apply shadow-md;
 }
 
 /* =============================================================================
@@ -65,23 +71,22 @@
 }
 
 [data-style='grada-ui'] [data-button][data-style='outline'][data-variant='primary'] {
-  border: 2px solid var(--gd-primary);
-  color: var(--gd-primary);
-  background: transparent;
+  @apply border-primary-z5 text-primary-z5 border-2 bg-transparent;
   border-radius: 20px;
 }
 
 [data-style='grada-ui'] [data-button][data-style='outline'][data-variant='secondary'] {
-  border: 2px solid var(--gd-secondary);
-  color: var(--gd-secondary);
-  background: transparent;
+  @apply border-secondary-z5 text-secondary-z5 border-2 bg-transparent;
+  border-radius: 20px;
+}
+
+[data-style='grada-ui'] [data-button][data-style='outline'][data-variant='accent'] {
+  @apply border-accent-z5 text-accent-z5 border-2 bg-transparent;
   border-radius: 20px;
 }
 
 [data-style='grada-ui'] [data-button][data-style='outline'][data-variant='danger'] {
-  border: 2px solid var(--gd-error);
-  color: var(--gd-error);
-  background: transparent;
+  @apply border-danger-z5 text-danger-z5 border-2 bg-transparent;
   border-radius: 20px;
 }
 
@@ -101,15 +106,19 @@
 }
 
 [data-style='grada-ui'] [data-button][data-style='ghost'][data-variant='primary'] {
-  color: var(--gd-primary);
+  @apply text-primary-z5;
 }
 
 [data-style='grada-ui'] [data-button][data-style='ghost'][data-variant='secondary'] {
-  color: var(--gd-secondary);
+  @apply text-secondary-z5;
+}
+
+[data-style='grada-ui'] [data-button][data-style='ghost'][data-variant='accent'] {
+  @apply text-accent-z5;
 }
 
 [data-style='grada-ui'] [data-button][data-style='ghost'][data-variant='danger'] {
-  color: var(--gd-error);
+  @apply text-danger-z5;
 }
 
 /* =============================================================================
@@ -124,19 +133,27 @@
 
 [data-style='grada-ui'] [data-button][data-style='gradient'][data-variant='primary'],
 [data-style='grada-ui'] [data-button][data-style='gradient'][data-variant='secondary'] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
   color: white;
   border-radius: 20px;
   @apply shadow-md;
 }
 
-[data-style='grada-ui'] [data-button][data-style='gradient'][data-variant='danger'] {
-  background-color: var(--gd-error);
+[data-style='grada-ui'] [data-button][data-style='gradient'][data-variant='accent'] {
+  background-image: linear-gradient(to right, rgba(var(--color-accent-500), 1), rgba(var(--color-accent-400), 1));
+  background-color: transparent;
   color: white;
   border-radius: 20px;
   @apply shadow-md;
 }
 
+[data-style='grada-ui'] [data-button][data-style='gradient'][data-variant='danger'] {
+  @apply bg-danger-z5 shadow-md;
+  color: white;
+  border-radius: 20px;
+}
+
 /* =============================================================================
    Link Style
    ============================================================================= */
@@ -147,15 +164,19 @@
 }
 
 [data-style='grada-ui'] [data-button][data-style='link'][data-variant='primary'] {
-  color: var(--gd-primary);
+  @apply text-primary-z5;
 }
 
 [data-style='grada-ui'] [data-button][data-style='link'][data-variant='secondary'] {
-  color: var(--gd-secondary);
+  @apply text-secondary-z5;
+}
+
+[data-style='grada-ui'] [data-button][data-style='link'][data-variant='accent'] {
+  @apply text-accent-z5;
 }
 
 [data-style='grada-ui'] [data-button][data-style='link'][data-variant='danger'] {
-  color: var(--gd-error);
+  @apply text-danger-z5;
 }
 
 /* =============================================================================
@@ -192,6 +213,23 @@
    ============================================================================= */
 
 [data-style='grada-ui'] [data-button]:focus-visible {
-  outline: 2px solid var(--gd-primary);
-  outline-offset: 2px;
+  @apply outline-2 outline-offset-2 outline outline-primary-z5;
+}
+
+/* =============================================================================
+   Button Group — override pill radius for connected appearance
+   ============================================================================= */
+
+[data-style='grada-ui'] [data-button-group] [data-button] {
+  border-radius: 0;
+}
+
+[data-style='grada-ui'] [data-button-group] [data-button]:first-child {
+  border-top-left-radius: 20px;
+  border-bottom-left-radius: 20px;
+}
+
+[data-style='grada-ui'] [data-button-group] [data-button]:last-child {
+  border-top-right-radius: 20px;
+  border-bottom-right-radius: 20px;
 }

package/src/grada-ui/card.css

@@ -5,9 +5,8 @@
  */
 
 [data-style='grada-ui'] [data-card] {
-  @apply bg-none border text-surface-z9;
-  background-color: var(--gd-surface-a);
-  border-color: var(--gd-grey-a);
+  @apply bg-surface-z2 border border-surface-z4 text-surface-z9;
+  background-image: none;
   border-radius: 3px;
 }
 
@@ -17,8 +16,7 @@
 }
 
 [data-style='grada-ui'] [data-card][data-card-interactive]:hover {
-  @apply shadow-md;
-  border-color: var(--gd-primary);
+  @apply shadow-md border-primary-z5;
 }
 
 [data-style='grada-ui'] [data-card][data-card-interactive]:active {
@@ -30,7 +28,8 @@
    ============================================================================= */
 
 [data-style='grada-ui'] [data-card-header] {
-  border-bottom: 1px solid var(--gd-grey-a);
+  @apply border-surface-z4;
+  border-bottom-width: 1px;
 }
 
 [data-style='grada-ui'] [data-card-body] {
@@ -38,8 +37,8 @@
 }
 
 [data-style='grada-ui'] [data-card-footer] {
-  @apply text-surface-z7;
-  border-top: 1px solid var(--gd-grey-a);
+  @apply text-surface-z7 border-surface-z4;
+  border-top-width: 1px;
 }
 
 /* =============================================================================
@@ -47,8 +46,7 @@
    ============================================================================= */
 
 [data-style='grada-ui'] [data-card][data-card-interactive]:focus-visible {
-  outline: 2px solid var(--gd-primary);
-  outline-offset: 2px;
+  @apply outline-2 outline-offset-2 outline outline-primary-z5;
 }
 
 /* =============================================================================
@@ -65,9 +63,10 @@
    ============================================================================= */
 
 [data-style='grada-ui'] [data-card][data-variant='primary'] {
-  background: var(--gd-gradient);
-  color: white;
-  border: none;
+  @apply from-primary-z5 to-secondary-z5 text-surface-z1 border-0;
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
+  border-radius: 3px;
 }
 
 [data-style='grada-ui'] [data-card][data-variant='primary'] [data-card-header],
@@ -80,9 +79,8 @@
 }
 
 [data-style='grada-ui'] [data-card][data-variant='secondary'] {
-  background-color: var(--gd-secondary);
-  color: white;
-  border: none;
+  @apply bg-secondary-z5 text-surface-z1 border-0;
+  background-image: none;
   border-radius: 3px;
 }
 

package/src/grada-ui/chart.css

@@ -0,0 +1,34 @@
+/**
+ * Chart - Grada UI Theme Styles
+ */
+
+[data-style='grada-ui'] [data-chart-axis-line],
+[data-style='grada-ui'] [data-chart-tick] line {
+  @apply stroke-surface-z3;
+}
+
+[data-style='grada-ui'] [data-chart-tick-label] {
+  @apply fill-surface-z5;
+}
+
+[data-style='grada-ui'] [data-chart-grid-line] {
+  @apply stroke-surface-z3;
+  stroke-opacity: 0.5;
+  stroke-dasharray: 2 4;
+}
+
+[data-style='grada-ui'] [data-chart-legend-label] {
+  @apply fill-surface-z5;
+}
+
+[data-style='grada-ui'] [data-chart-legend-item]:hover {
+  @apply text-surface-z8;
+}
+
+[data-style='grada-ui'] [data-plot-element="bar"][data-dimmed],
+[data-style='grada-ui'] [data-plot-element="point"][data-dimmed],
+[data-style='grada-ui'] [data-plot-element="arc"][data-dimmed],
+[data-style='grada-ui'] [data-plot-element="line"][data-dimmed],
+[data-style='grada-ui'] [data-plot-element="area"][data-dimmed] {
+  opacity: 0.15;
+}

package/src/grada-ui/dropdown.css

@@ -9,16 +9,16 @@
 
 [data-style='grada-ui'] [data-dropdown-trigger]:hover:not(:disabled) {
   @apply text-surface-z10 border-surface-z5;
-  border-color: var(--gd-primary);
+  border-color: rgba(var(--color-primary-500), 1);
 }
 
 [data-style='grada-ui'] [data-dropdown-trigger]:focus-visible {
-  outline: 2px solid var(--gd-primary);
+  outline: 2px solid rgba(var(--color-primary-500), 1);
   outline-offset: -2px;
 }
 
 [data-style='grada-ui'] [data-dropdown][data-open='true'] [data-dropdown-trigger] {
-  border-color: var(--gd-primary);
+  border-color: rgba(var(--color-primary-500), 1);
 }
 
 [data-style='grada-ui'] [data-dropdown-trigger] [data-dropdown-icon] {
@@ -44,7 +44,8 @@
 }
 
 [data-style='grada-ui'] [data-dropdown-option][data-active='true'] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
   color: white;
 }
 

package/src/grada-ui/floating-action.css

@@ -5,7 +5,8 @@
  */
 
 [data-style='grada-ui'] [data-fab-trigger] {
-  background: var(--gd-gradient);
+  background-image: linear-gradient(to right, rgba(var(--color-primary-500), 1), rgba(var(--color-secondary-500), 1));
+  background-color: transparent;
   color: white;
   @apply shadow-lg;
   border-radius: 50%;
@@ -19,7 +20,7 @@
 }
 
 [data-style='grada-ui'] [data-fab-trigger]:focus-visible {
-  outline: 2px solid var(--gd-primary);
+  outline: 2px solid rgba(var(--color-primary-500), 1);
   outline-offset: 2px;
 }
 
@@ -40,16 +41,16 @@
 }
 
 [data-style='grada-ui'] [data-fab-item]:focus-visible {
-  outline: 2px solid var(--gd-primary);
+  outline: 2px solid rgba(var(--color-primary-500), 1);
   outline-offset: -2px;
 }
 
 [data-style='grada-ui'] [data-fab-item] [data-fab-item-icon] {
-  color: var(--gd-primary);
+  color: rgba(var(--color-primary-500), 1);
 }
 
 [data-style='grada-ui'] [data-fab-item]:hover:not(:disabled) [data-fab-item-icon] {
-  color: var(--gd-secondary);
+  color: rgba(var(--color-secondary-500), 1);
 }
 
 /* Backdrop */