@rokkit/themes 1.0.0-next.132 → 1.0.0-next.135

package/src/base/timeline.css

@@ -10,8 +10,8 @@
    ============================================================================= */
 
 [data-timeline] {
-	display: flex;
-	flex-direction: column;
+  display: flex;
+  flex-direction: column;
 }
 
 /* =============================================================================
@@ -19,9 +19,9 @@
    ============================================================================= */
 
 [data-timeline-item] {
-	display: grid;
-	grid-template-columns: 2.5rem 1fr;
-	gap: 0.75rem;
+  display: grid;
+  grid-template-columns: 2.5rem 1fr;
+  gap: 0.75rem;
 }
 
 /* =============================================================================
@@ -29,33 +29,33 @@
    ============================================================================= */
 
 [data-timeline-marker] {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 [data-timeline-circle] {
-	width: 2rem;
-	height: 2rem;
-	min-height: 2rem;
-	border-radius: 9999px;
-	border: 2px solid currentColor;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-weight: 600;
-	font-size: 0.75rem;
-	transition:
-		background-color 0.2s ease,
-		border-color 0.2s ease,
-		color 0.2s ease;
+  width: 2rem;
+  height: 2rem;
+  min-height: 2rem;
+  border-radius: 9999px;
+  border: 2px solid currentColor;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  font-size: 0.75rem;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    color 0.2s ease;
 }
 
 [data-timeline-connector] {
-	width: 2px;
-	flex: 1;
-	min-height: 1.5rem;
-	transition: background-color 0.2s ease;
+  width: 2px;
+  flex: 1;
+  min-height: 1.5rem;
+  transition: background-color 0.2s ease;
 }
 
 /* =============================================================================
@@ -63,22 +63,22 @@
    ============================================================================= */
 
 [data-timeline-body] {
-	padding-bottom: 1.5rem;
-	min-height: 2rem;
-	display: flex;
-	flex-direction: column;
-	justify-content: flex-start;
-	padding-top: 0.25rem;
+  padding-bottom: 1.5rem;
+  min-height: 2rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  padding-top: 0.25rem;
 }
 
 [data-timeline-title] {
-	font-weight: 600;
-	font-size: 0.9375rem;
-	line-height: 1.4;
+  font-weight: 600;
+  font-size: 0.9375rem;
+  line-height: 1.4;
 }
 
 [data-timeline-description] {
-	margin-top: 0.25rem;
-	font-size: 0.8125rem;
-	line-height: 1.5;
+  margin-top: 0.25rem;
+  font-size: 0.8125rem;
+  line-height: 1.5;
 }

package/src/base/tree.css

@@ -111,25 +111,58 @@
 }
 
 /* Solid (default visible style) */
-[data-tree][data-line-style='solid'] [data-connector-v] { border-right-style: solid; }
-[data-tree][data-line-style='solid'] [data-connector-h] { border-bottom-style: solid; }
-[data-tree][data-line-style='solid'] [data-connector-corner] { border-bottom-style: solid; border-right-style: solid; }
-[data-tree][data-line-style='solid'] [data-connector-rtl] [data-connector-v] { border-left-style: solid; }
-[data-tree][data-line-style='solid'] [data-connector-rtl] [data-connector-corner] { border-left-style: solid; }
+[data-tree][data-line-style='solid'] [data-connector-v] {
+  border-right-style: solid;
+}
+[data-tree][data-line-style='solid'] [data-connector-h] {
+  border-bottom-style: solid;
+}
+[data-tree][data-line-style='solid'] [data-connector-corner] {
+  border-bottom-style: solid;
+  border-right-style: solid;
+}
+[data-tree][data-line-style='solid'] [data-connector-rtl] [data-connector-v] {
+  border-left-style: solid;
+}
+[data-tree][data-line-style='solid'] [data-connector-rtl] [data-connector-corner] {
+  border-left-style: solid;
+}
 
 /* Dashed */
-[data-tree][data-line-style='dashed'] [data-connector-v] { border-right-style: dashed; }
-[data-tree][data-line-style='dashed'] [data-connector-h] { border-bottom-style: dashed; }
-[data-tree][data-line-style='dashed'] [data-connector-corner] { border-bottom-style: dashed; border-right-style: dashed; }
-[data-tree][data-line-style='dashed'] [data-connector-rtl] [data-connector-v] { border-left-style: dashed; }
-[data-tree][data-line-style='dashed'] [data-connector-rtl] [data-connector-corner] { border-left-style: dashed; }
+[data-tree][data-line-style='dashed'] [data-connector-v] {
+  border-right-style: dashed;
+}
+[data-tree][data-line-style='dashed'] [data-connector-h] {
+  border-bottom-style: dashed;
+}
+[data-tree][data-line-style='dashed'] [data-connector-corner] {
+  border-bottom-style: dashed;
+  border-right-style: dashed;
+}
+[data-tree][data-line-style='dashed'] [data-connector-rtl] [data-connector-v] {
+  border-left-style: dashed;
+}
+[data-tree][data-line-style='dashed'] [data-connector-rtl] [data-connector-corner] {
+  border-left-style: dashed;
+}
 
 /* Dotted */
-[data-tree][data-line-style='dotted'] [data-connector-v] { border-right-style: dotted; }
-[data-tree][data-line-style='dotted'] [data-connector-h] { border-bottom-style: dotted; }
-[data-tree][data-line-style='dotted'] [data-connector-corner] { border-bottom-style: dotted; border-right-style: dotted; }
-[data-tree][data-line-style='dotted'] [data-connector-rtl] [data-connector-v] { border-left-style: dotted; }
-[data-tree][data-line-style='dotted'] [data-connector-rtl] [data-connector-corner] { border-left-style: dotted; }
+[data-tree][data-line-style='dotted'] [data-connector-v] {
+  border-right-style: dotted;
+}
+[data-tree][data-line-style='dotted'] [data-connector-h] {
+  border-bottom-style: dotted;
+}
+[data-tree][data-line-style='dotted'] [data-connector-corner] {
+  border-bottom-style: dotted;
+  border-right-style: dotted;
+}
+[data-tree][data-line-style='dotted'] [data-connector-rtl] [data-connector-v] {
+  border-left-style: dotted;
+}
+[data-tree][data-line-style='dotted'] [data-connector-rtl] [data-connector-corner] {
+  border-left-style: dotted;
+}
 
 /* =============================================================================
    Tree Item Content

package/src/glass/button.css

@@ -12,22 +12,22 @@
 [data-style='glass'] [data-button]:not([data-style])[data-variant='default'],
 [data-style='glass'] [data-button][data-style='default']:not([data-variant]),
 [data-style='glass'] [data-button]:not([data-style]):not([data-variant]) {
-  @apply backdrop-blur-md border shadow-sm bg-surface-z2/70 border-surface-z5/20 text-surface-z9;
+  @apply bg-surface-z2/70 border-surface-z5/20 text-surface-z9 border shadow-sm backdrop-blur-md;
 }
 
 [data-style='glass'] [data-button][data-style='default'][data-variant='primary'],
 [data-style='glass'] [data-button]:not([data-style])[data-variant='primary'] {
-  @apply backdrop-blur-md shadow-sm bg-primary-z5/80 text-on-primary;
+  @apply bg-primary-z5/80 text-on-primary shadow-sm backdrop-blur-md;
 }
 
 [data-style='glass'] [data-button][data-style='default'][data-variant='secondary'],
 [data-style='glass'] [data-button]:not([data-style])[data-variant='secondary'] {
-  @apply backdrop-blur-md shadow-sm bg-secondary-z4/80 text-on-secondary;
+  @apply bg-secondary-z4/80 text-on-secondary 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 backdrop-blur-md shadow-sm bg-danger-z4/80 text-on-danger;
+  @apply bg-danger-z4/80 text-on-danger shadow-sm backdrop-blur-md;
 }
 
 /* =============================================================================
@@ -82,22 +82,23 @@
 
 [data-style='glass'] [data-button][data-style='gradient'][data-variant='default'],
 [data-style='glass'] [data-button][data-style='gradient']:not([data-variant]) {
-  @apply from-surface-z3/80 to-surface-z1/60 text-surface-z10 backdrop-blur-md bg-gradient-to-br;
+  @apply from-surface-z3/80 to-surface-z1/60 text-surface-z10 bg-gradient-to-br backdrop-blur-md;
 }
 
 [data-style='glass'] [data-button][data-style='gradient'][data-variant='primary'] {
-  @apply from-primary-z5/80 to-primary-z3/60 text-on-primary backdrop-blur-md bg-gradient-to-br;
+  @apply from-primary-z5/80 to-primary-z3/60 text-on-primary bg-gradient-to-br backdrop-blur-md;
 }
 
 [data-style='glass'] [data-button][data-style='gradient'][data-variant='secondary'] {
-  @apply from-secondary-z5/80 to-secondary-z3/60 text-on-secondary backdrop-blur-md bg-gradient-to-br;
+  @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='danger'] {
-  @apply from-danger-z5/80 to-danger-z3/60 text-on-danger backdrop-blur-md bg-gradient-to-br;
+  @apply from-danger-z5/80 to-danger-z3/60 text-on-danger bg-gradient-to-br backdrop-blur-md;
 }
 
-[data-style='glass'] [data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
+[data-style='glass']
+  [data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
   filter: brightness(1.1);
 }
 
@@ -148,5 +149,5 @@
    ============================================================================= */
 
 [data-style='glass'] [data-button]:focus-visible {
-  @apply outline-none ring-2 ring-surface-z5/40;
+  @apply ring-surface-z5/40 ring-2 outline-none;
 }

package/src/glass/card.css

@@ -9,23 +9,26 @@
    ============================================================================= */
 
 [data-style='glass'] [data-card] {
-	@apply backdrop-blur-md border shadow-lg bg-surface-z2/60 border-surface-z5/20 text-surface-z9;
+  @apply bg-surface-z2/60 border-surface-z5/20 text-surface-z9 border shadow-lg backdrop-blur-md;
 }
 
 /* Interactive cards (buttons) */
 [data-style='glass'] [data-card][data-card-interactive] {
-	cursor: pointer;
-	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
+  cursor: pointer;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease,
+    background-color 0.2s ease;
 }
 
 [data-style='glass'] [data-card][data-card-interactive]:hover {
-	@apply shadow-xl bg-surface-z2/80;
-	transform: translateY(-2px);
+  @apply bg-surface-z2/80 shadow-xl;
+  transform: translateY(-2px);
 }
 
 [data-style='glass'] [data-card][data-card-interactive]:active {
-	@apply shadow-lg;
-	transform: translateY(0);
+  @apply shadow-lg;
+  transform: translateY(0);
 }
 
 /* =============================================================================
@@ -33,15 +36,15 @@
    ============================================================================= */
 
 [data-style='glass'] [data-card-header] {
-	@apply border-surface-z5/20 border-b;
+  @apply border-surface-z5/20 border-b;
 }
 
 [data-style='glass'] [data-card-body] {
-	@apply text-surface-z8;
+  @apply text-surface-z8;
 }
 
 [data-style='glass'] [data-card-footer] {
-	@apply border-surface-z5/20 border-t text-surface-z7;
+  @apply border-surface-z5/20 text-surface-z7 border-t;
 }
 
 /* =============================================================================
@@ -49,7 +52,7 @@
    ============================================================================= */
 
 [data-style='glass'] [data-card][data-card-interactive]:focus-visible {
-	@apply outline-none ring-2 ring-surface-z5/40;
+  @apply ring-surface-z5/40 ring-2 outline-none;
 }
 
 /* =============================================================================
@@ -58,6 +61,6 @@
 
 [data-style='glass'] [data-card][data-card-interactive][data-disabled],
 [data-style='glass'] [data-card][data-card-interactive]:disabled {
-	@apply opacity-50 cursor-not-allowed;
-	transform: none;
+  @apply cursor-not-allowed opacity-50;
+  transform: none;
 }

package/src/glass/floating-action.css

@@ -9,21 +9,21 @@
    ============================================================================= */
 
 [data-style='glass'] [data-fab-trigger] {
-	@apply text-white backdrop-blur-md bg-primary-z5/80 shadow-lg;
+  @apply bg-primary-z5/80 text-white shadow-lg backdrop-blur-md;
 }
 
 [data-style='glass'] [data-fab-trigger]:hover:not(:disabled) {
-	@apply bg-primary-z5/90 shadow-xl;
-	transform: scale(1.05);
+  @apply bg-primary-z5/90 shadow-xl;
+  transform: scale(1.05);
 }
 
 [data-style='glass'] [data-fab-trigger]:focus-visible {
-	@apply outline-none ring-2 ring-surface-z5/40;
+  @apply ring-surface-z5/40 ring-2 outline-none;
 }
 
 [data-style='glass'] [data-fab][data-open='true'] [data-fab-trigger] {
-	@apply bg-surface-z6/80;
-	transform: rotate(45deg);
+  @apply bg-surface-z6/80;
+  transform: rotate(45deg);
 }
 
 /* =============================================================================
@@ -31,24 +31,24 @@
    ============================================================================= */
 
 [data-style='glass'] [data-fab-item] {
-	@apply text-surface-z9 backdrop-blur-md border shadow-md bg-surface-z1/70 border-surface-z5/20;
+  @apply text-surface-z9 bg-surface-z1/70 border-surface-z5/20 border shadow-md backdrop-blur-md;
 }
 
 [data-style='glass'] [data-fab-item]:hover:not(:disabled) {
-	@apply text-surface-z10 bg-surface-z2/80 shadow-lg;
+  @apply text-surface-z10 bg-surface-z2/80 shadow-lg;
 }
 
 [data-style='glass'] [data-fab-item]:focus-visible {
-	@apply outline-none ring-2 ring-surface-z5/40;
+  @apply ring-surface-z5/40 ring-2 outline-none;
 }
 
 /* Item icon */
 [data-style='glass'] [data-fab-item] [data-fab-item-icon] {
-	@apply text-primary-z6;
+  @apply text-primary-z6;
 }
 
 [data-style='glass'] [data-fab-item]:hover:not(:disabled) [data-fab-item-icon] {
-	@apply text-primary-z7;
+  @apply text-primary-z7;
 }
 
 /* =============================================================================
@@ -56,6 +56,6 @@
    ============================================================================= */
 
 [data-style='glass'] [data-fab-backdrop] {
-	background: rgba(0, 0, 0, 0.3);
-	backdrop-filter: blur(4px);
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(4px);
 }

package/src/glass/floating-navigation.css

@@ -9,7 +9,7 @@
    ============================================================================= */
 
 [data-style='glass'] [data-floating-nav] {
-  @apply backdrop-blur-xl border shadow-xl bg-surface-z1/70 border-surface-z5/20;
+  @apply bg-surface-z1/70 border-surface-z5/20 border shadow-xl backdrop-blur-xl;
 }
 
 /* =============================================================================
@@ -49,7 +49,7 @@
 }
 
 [data-style='glass'] [data-floating-nav-item]:focus-visible {
-  @apply outline-none ring-2 ring-surface-z5/40;
+  @apply ring-surface-z5/40 ring-2 outline-none;
 }
 
 /* Icon */

package/src/glass/input.css

@@ -4,121 +4,123 @@
 
 /* Field root: text color, spacing */
 [data-style='glass'] [data-field-root] {
-	@apply text-surface-z9 gap-1 rounded-md transition-all;
+  @apply text-surface-z9 gap-1 rounded-md transition-all;
 }
 
 /* Disabled state */
 [data-style='glass'] [data-field-root][data-field-disabled] [data-input-root] {
-	@apply cursor-not-allowed opacity-50;
+  @apply cursor-not-allowed opacity-50;
 }
 
 /* Labels */
 [data-style='glass'] [data-field] > label {
-	@apply text-surface-z7;
+  @apply text-surface-z7;
 }
 
 [data-style='glass'] [data-form-root] label {
-	@apply text-surface-z7;
+  @apply text-surface-z7;
 }
 
 /* Info field value */
 [data-style='glass'] [data-field-info] {
-	@apply text-primary-z6 font-medium;
+  @apply text-primary-z6 font-medium;
 }
 
 /* Separator */
 [data-style='glass'] [data-form-separator] {
-	@apply border-surface-z5/20;
+  @apply border-surface-z5/20;
 }
 
 /* Input root: glass container — p-0.5 gives a small gap between border and content.
  * No backdrop-blur here: it creates a stacking context that traps select dropdowns.
  * The semi-transparent background provides the frosted glass look. */
 [data-style='glass'] [data-input-root] {
-	@apply flex items-center rounded-md p-0.5 transition-all border bg-surface-z1/70 border-surface-z5/20;
+  @apply bg-surface-z1/70 border-surface-z5/20 flex items-center rounded-md border p-0.5 transition-all;
 }
 
 [data-style='glass'] [data-input-root]:hover {
-	@apply border-surface-z5/30;
+  @apply border-surface-z5/30;
 }
 
 [data-style='glass'] [data-input-root]:focus-within {
-	@apply border-primary-z5/50 bg-surface-z1/70;
+  @apply border-primary-z5/50 bg-surface-z1/70;
 }
 
 /* Standard inputs inside wrapper */
 [data-style='glass'] [data-input-root] input:not([type='checkbox'], [type='radio'], [type='color']),
 [data-style='glass'] [data-input-root] select {
-	@apply bg-transparent text-surface-z8 rounded-md border-none px-3 focus:outline-none;
-	font-size: 0.875rem;
-	height: 2.25rem;
+  @apply text-surface-z8 rounded-md border-none bg-transparent px-3 focus:outline-none;
+  font-size: 0.875rem;
+  height: 2.25rem;
 }
 
 [data-style='glass'] [data-input-root] textarea {
-	@apply bg-transparent text-surface-z8 rounded-md border-none px-3 py-2 focus:outline-none;
-	font-size: 0.875rem;
+  @apply text-surface-z8 rounded-md border-none bg-transparent px-3 py-2 focus:outline-none;
+  font-size: 0.875rem;
 }
 
 /* Select inside input-root: suppress standalone glass select styles */
 [data-style='glass'] [data-input-root] [data-select-trigger] {
-	@apply border-none bg-transparent text-surface-z8 rounded-md shadow-none ring-0 focus:outline-none;
-	background-image: none;
-	backdrop-filter: none;
+  @apply text-surface-z8 rounded-md border-none bg-transparent shadow-none ring-0 focus:outline-none;
+  background-image: none;
+  backdrop-filter: none;
 }
 
 /* Suppress standalone select open-state when inside input-root */
 [data-style='glass'] [data-input-root] [data-select][data-open='true'] [data-select-trigger] {
-	@apply border-none ring-0 shadow-none;
+  @apply border-none shadow-none ring-0;
 }
 
 /* Placeholders */
 [data-style='glass'] [data-input-root] input::placeholder,
 [data-style='glass'] [data-input-root] textarea::placeholder {
-	@apply text-surface-z5;
+  @apply text-surface-z5;
 }
 
 /* Checkbox field */
 [data-style='glass'] [data-field-type='checkbox'] [data-field] {
-	@apply flex items-center leading-loose;
+  @apply flex items-center leading-loose;
 }
 
 /* Checkbox icon */
 [data-style='glass'] [data-checkbox-icon] {
-	@apply text-surface-z5 cursor-pointer transition-colors text-lg rounded;
+  @apply text-surface-z5 cursor-pointer rounded text-lg transition-colors;
 }
 
 [data-style='glass'] [data-checkbox-icon]:focus-visible {
-	@apply outline-2 outline-primary-z4 outline-offset-2;
+  @apply outline-primary-z4 outline-2 outline-offset-2;
 }
 
-[data-style='glass'] [data-checkbox-root][data-variant='custom']:has(input:checked) [data-checkbox-icon] {
-	@apply text-primary-z6;
+[data-style='glass']
+  [data-checkbox-root][data-variant='custom']:has(input:checked)
+  [data-checkbox-icon] {
+  @apply text-primary-z6;
 }
 
 [data-style='glass'] [data-field] textarea {
-	@apply resize-vertical min-h-20 py-2;
+  @apply resize-vertical min-h-20 py-2;
 }
 
 /* Color input */
 [data-style='glass'] [data-field-type='color'] [data-input-root] {
-	@apply overflow-hidden;
+  @apply overflow-hidden;
 }
 
 [data-style='glass'] [data-field-type='color'] input[type='color'] {
-	@apply bg-transparent flex min-h-11 flex-1 rounded-md focus:outline-none;
+  @apply flex min-h-11 flex-1 rounded-md bg-transparent focus:outline-none;
 }
 
 /* Description and message */
 [data-style='glass'] [data-description],
 [data-style='glass'] [data-message] {
-	@apply text-surface-z6;
+  @apply text-surface-z6;
 }
 
 [data-style='glass'] [data-message] {
-	@apply rounded-md px-2 py-1;
+  @apply rounded-md px-2 py-1;
 }
 
 /* Error state */
 [data-style='glass'] [data-field-root][data-field-state='fail'] [data-input-root] {
-	@apply border-danger-z5/50;
+  @apply border-danger-z5/50;
 }