@rokkit/themes 1.0.0-next.151 → 1.0.0-next.153

package/src/ant-design/table.css

@@ -9,7 +9,7 @@
    ============================================================================= */
 
 [data-style='ant-design'] [data-table-header] th {
-  @apply text-surface-z7 border-surface-z3 border-b bg-surface-z1;
+  @apply text-surface-z7 border-surface-z3 bg-surface-z1 border-b;
 }
 
 [data-style='ant-design'] [data-table-header-cell][data-sortable='true']:hover {
@@ -25,7 +25,9 @@
   @apply text-surface-z4;
 }
 
-[data-style='ant-design'] [data-table-header-cell][data-sort-order='ascending'] [data-table-sort-icon],
+[data-style='ant-design']
+  [data-table-header-cell][data-sort-order='ascending']
+  [data-table-sort-icon],
 [data-style='ant-design']
   [data-table-header-cell][data-sort-order='descending']
   [data-table-sort-icon] {
@@ -49,22 +51,22 @@
 }
 
 [data-style='ant-design'] [data-table-row]:hover {
-  @apply bg-none bg-primary-z1 text-surface-z9;
+  @apply bg-primary-z1 text-surface-z9 bg-none;
 }
 
 [data-style='ant-design'] [data-table-row]:focus {
-  @apply bg-none bg-primary-z1 text-surface-z9 ring-primary-z3 ring-1 outline-none;
+  @apply bg-primary-z1 text-surface-z9 ring-primary-z3 bg-none ring-1 outline-none;
 }
 
 [data-style='ant-design'] [data-table-row][data-selected='true'] {
-  @apply bg-none bg-primary-z1 text-primary-z7;
+  @apply bg-primary-z1 text-primary-z7 bg-none;
 }
 
 /* =============================================================================
    Striped
    ============================================================================= */
 
-[data-style='ant-design'] [data-striped='true'] [data-table-body] tr:nth-child(even) {
+[data-style='ant-design'] [data-table-striped] [data-table-body] tr:nth-child(even) {
   @apply bg-surface-z1;
 }
 

package/src/ant-design/tabs.css

@@ -32,9 +32,11 @@
    ============================================================================= */
 
 [data-style='ant-design'] [data-tabs-trigger] {
-  @apply bg-transparent text-surface-z6 border-b-2 border-b-transparent;
+  @apply text-surface-z6 border-b-2 border-b-transparent bg-transparent;
   font-weight: 400;
-  transition: color 150ms ease, border-color 150ms ease;
+  transition:
+    color 150ms ease,
+    border-color 150ms ease;
 }
 
 [data-style='ant-design'] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
@@ -42,7 +44,7 @@
 }
 
 [data-style='ant-design'] [data-tabs-trigger][data-selected] {
-  @apply bg-none text-primary-z6 border-b-primary-z5;
+  @apply text-primary-z6 border-b-primary-z5 bg-none;
   font-weight: 500;
 }
 
@@ -67,7 +69,7 @@
 
 /* Horizontal after (tabs below content): top border */
 [data-style='ant-design'] [data-tabs][data-position='after'] [data-tabs-trigger] {
-  @apply border-b-0 border-t-2 border-t-transparent;
+  @apply border-t-2 border-b-0 border-t-transparent;
 }
 
 [data-style='ant-design']
@@ -90,7 +92,7 @@
 
 /* Vertical before (tabs on left): right border */
 [data-style='ant-design'] [data-tabs][data-orientation='vertical'] [data-tabs-trigger] {
-  @apply border-b-0 border-r-2 border-r-transparent rounded-none rounded-l;
+  @apply rounded-none rounded-l border-r-2 border-b-0 border-r-transparent;
 }
 
 [data-style='ant-design']
@@ -99,7 +101,9 @@
   @apply border-r-primary-z3;
 }
 
-[data-style='ant-design'] [data-tabs][data-orientation='vertical'] [data-tabs-trigger][data-selected] {
+[data-style='ant-design']
+  [data-tabs][data-orientation='vertical']
+  [data-tabs-trigger][data-selected] {
   @apply border-r-primary-z5;
   font-weight: 500;
 }
@@ -108,19 +112,19 @@
 [data-style='ant-design']
   [data-tabs][data-orientation='vertical'][data-position='after']
   [data-tabs-trigger] {
-  @apply border-t-0 border-b-0 border-r-0 border-l-2 border-l-transparent rounded-none rounded-r;
+  @apply rounded-none rounded-r border-t-0 border-r-0 border-b-0 border-l-2 border-l-transparent;
 }
 
 [data-style='ant-design']
   [data-tabs][data-orientation='vertical'][data-position='after']
   [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
-  @apply border-t-0 border-b-0 border-r-0 border-l-primary-z3;
+  @apply border-l-primary-z3 border-t-0 border-r-0 border-b-0;
 }
 
 [data-style='ant-design']
   [data-tabs][data-orientation='vertical'][data-position='after']
   [data-tabs-trigger][data-selected] {
-  @apply border-t-0 border-b-0 border-r-0 border-l-primary-z5;
+  @apply border-l-primary-z5 border-t-0 border-r-0 border-b-0;
   font-weight: 500;
 }
 

package/src/ant-design/toggle.css

@@ -9,7 +9,7 @@
    ============================================================================= */
 
 [data-style='ant-design'] [data-toggle] {
-  @apply bg-none border-surface-z3 rounded border bg-transparent;
+  @apply border-surface-z3 rounded border bg-transparent bg-none;
 }
 
 /* =============================================================================
@@ -22,12 +22,12 @@
 
 [data-style='ant-design'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
 [data-style='ant-design'] [data-toggle-option]:focus:not(:disabled):not([data-disabled='true']) {
-  @apply bg-none text-primary-z5 border-b-primary-z3 border-b-2;
+  @apply text-primary-z5 border-b-primary-z3 border-b-2 bg-none;
 }
 
 /* Selected state */
 [data-style='ant-design'] [data-toggle-option][data-selected='true'] {
-  @apply bg-none text-primary-z6 border-b-primary-z5 border-b-2;
+  @apply text-primary-z6 border-b-primary-z5 border-b-2 bg-none;
 }
 
 /* =============================================================================

package/src/ant-design/toolbar.css

@@ -9,7 +9,7 @@
    ============================================================================= */
 
 [data-style='ant-design'] [data-toolbar] {
-  @apply bg-none bg-transparent;
+  @apply bg-transparent bg-none;
 }
 
 /* Position-based borders */
@@ -39,21 +39,21 @@
 }
 
 [data-style='ant-design'] [data-toolbar-item]:hover:not(:disabled):not([data-disabled='true']) {
-  @apply bg-none text-primary-z5;
+  @apply text-primary-z5 bg-none;
 }
 
 [data-style='ant-design']
   [data-toolbar-item]:focus-visible:not(:disabled):not([data-disabled='true']) {
-  @apply bg-none text-primary-z5 ring-primary-z3 ring-1 outline-none;
+  @apply text-primary-z5 ring-primary-z3 bg-none ring-1 outline-none;
 }
 
 /* Active/pressed state */
 [data-style='ant-design'] [data-toolbar-item][data-active='true'] {
-  @apply bg-none text-primary-z6;
+  @apply text-primary-z6 bg-none;
 }
 
 [data-style='ant-design'] [data-toolbar-item][data-active='true']:hover:not(:disabled) {
-  @apply bg-none text-primary-z7;
+  @apply text-primary-z7 bg-none;
 }
 
 /* =============================================================================
@@ -77,9 +77,9 @@
    ============================================================================= */
 
 [data-style='ant-design'] [data-toolbar-separator] {
-  @apply bg-none bg-surface-z3;
+  @apply bg-surface-z3 bg-none;
 }
 
 [data-style='ant-design'] [data-toolbar-divider] {
-  @apply bg-none bg-surface-z3;
+  @apply bg-surface-z3 bg-none;
 }

package/src/ant-design/tree.css

@@ -21,7 +21,7 @@
 }
 
 [data-style='ant-design'] [data-tree-toggle-btn]:hover {
-  @apply bg-none text-primary-z5;
+  @apply text-primary-z5 bg-none;
 }
 
 /* =============================================================================
@@ -34,7 +34,7 @@
 
 [data-style='ant-design'] [data-tree-item-content]:hover:not(:disabled),
 [data-style='ant-design'] [data-tree-item-content]:focus:not(:disabled) {
-  @apply bg-none bg-primary-z1 text-primary-z6 outline-none rounded;
+  @apply bg-primary-z1 text-primary-z6 rounded bg-none outline-none;
 }
 
 /* Focus visible for keyboard navigation */
@@ -44,11 +44,11 @@
 
 /* Active/selected state */
 [data-style='ant-design'] [data-tree-item-content][data-active='true'] {
-  @apply bg-none bg-primary-z1 text-primary-z6 rounded;
+  @apply bg-primary-z1 text-primary-z6 rounded bg-none;
 }
 
 [data-style='ant-design'] [data-tree-item-content][data-active='true']:hover:not(:disabled) {
-  @apply bg-none bg-primary-z2 text-primary-z7;
+  @apply bg-primary-z2 text-primary-z7 bg-none;
 }
 
 /* Reset gradients bleeding in */
@@ -56,11 +56,15 @@
   @apply bg-primary-z1;
 }
 
-[data-style='ant-design'] [data-tree]:focus-within [data-tree-item-content][data-active='true']:hover:not(:disabled) {
+[data-style='ant-design']
+  [data-tree]:focus-within
+  [data-tree-item-content][data-active='true']:hover:not(:disabled) {
   @apply bg-primary-z2;
 }
 
-[data-style='ant-design'] [data-tree]:not(:focus-within) [data-tree-item-content][data-active='true'] {
+[data-style='ant-design']
+  [data-tree]:not(:focus-within)
+  [data-tree-item-content][data-active='true'] {
   @apply bg-primary-z1;
 }
 
@@ -89,18 +93,24 @@
 }
 
 [data-style='ant-design'] [data-tree-item-content] [data-item-badge] {
-  @apply bg-none text-surface-z6 border-surface-z4 border bg-transparent rounded;
+  @apply text-surface-z6 border-surface-z4 rounded border bg-transparent bg-none;
 }
 
 [data-style='ant-design'] [data-tree-item-content][data-active='true'] [data-item-badge] {
   @apply text-primary-z6 border-primary-z4;
 }
 
-[data-style='ant-design'] [data-tree]:focus-within [data-tree-item-content][data-active='true'] [data-item-badge] {
+[data-style='ant-design']
+  [data-tree]:focus-within
+  [data-tree-item-content][data-active='true']
+  [data-item-badge] {
   @apply bg-transparent;
 }
 
-[data-style='ant-design'] [data-tree]:not(:focus-within) [data-tree-item-content][data-active='true'] [data-item-badge] {
+[data-style='ant-design']
+  [data-tree]:not(:focus-within)
+  [data-tree-item-content][data-active='true']
+  [data-item-badge] {
   @apply bg-transparent;
 }
 
@@ -109,14 +119,14 @@
    ============================================================================= */
 
 [data-style='ant-design'] [data-tree-node][data-selected='true'] [data-tree-item-content] {
-  @apply bg-none bg-primary-z1 text-primary-z6 rounded;
+  @apply bg-primary-z1 text-primary-z6 rounded bg-none;
 }
 
 [data-style='ant-design']
   [data-tree]:focus-within
   [data-tree-node][data-selected='true']
   [data-tree-item-content] {
-  @apply bg-none bg-primary-z1 text-primary-z6 rounded;
+  @apply bg-primary-z1 text-primary-z6 rounded bg-none;
 }
 
 [data-style='ant-design']

package/src/ant-design/upload-progress.css

@@ -13,7 +13,7 @@
 }
 
 [data-style='ant-design'] [data-upload-clear] {
-  @apply border-surface-z4 text-surface-z6 border rounded;
+  @apply border-surface-z4 text-surface-z6 rounded border;
 }
 
 [data-style='ant-design'] [data-upload-clear]:hover {

package/src/ant-design/upload-target.css

@@ -42,7 +42,7 @@
    ============================================================================= */
 
 [data-style='ant-design'] [data-upload-target] [data-upload-button] {
-  @apply border-primary-z4 text-primary-z5 border rounded;
+  @apply border-primary-z4 text-primary-z5 rounded border;
 }
 
 [data-style='ant-design'] [data-upload-target] [data-upload-button]:hover:not(:disabled) {

package/src/base/avatar.css

@@ -0,0 +1,82 @@
+/* Avatar — base structural styles */
+
+[data-avatar] {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  overflow: hidden;
+  user-select: none;
+}
+
+/* Shape */
+[data-avatar][data-shape='circle'] {
+  border-radius: 9999px;
+}
+
+[data-avatar][data-shape='square'] {
+  border-radius: 0.375rem;
+}
+
+/* Size variants */
+[data-avatar][data-size='xs'] {
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 0.5rem;
+}
+
+[data-avatar][data-size='sm'] {
+  width: 2rem;
+  height: 2rem;
+  font-size: 0.625rem;
+}
+
+[data-avatar][data-size='md'] {
+  width: 2.5rem;
+  height: 2.5rem;
+  font-size: 0.75rem;
+}
+
+[data-avatar][data-size='lg'] {
+  width: 3rem;
+  height: 3rem;
+  font-size: 0.875rem;
+}
+
+[data-avatar][data-size='xl'] {
+  width: 4rem;
+  height: 4rem;
+  font-size: 1.125rem;
+}
+
+[data-avatar-img] {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+[data-avatar-initials] {
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  line-height: 1;
+}
+
+/* Status indicator dot */
+[data-avatar-status] {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 25%;
+  height: 25%;
+  min-width: 0.5rem;
+  min-height: 0.5rem;
+  border-radius: 9999px;
+  border: 2px solid transparent;
+}
+
+[data-avatar][data-shape='square'] [data-avatar-status] {
+  border-radius: 9999px;
+  bottom: -0.125rem;
+  right: -0.125rem;
+}

package/src/base/badge.css

@@ -0,0 +1,41 @@
+/* Badge — base structural styles */
+
+[data-badge-wrapper] {
+  position: relative;
+  display: inline-flex;
+}
+
+[data-badge] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  padding: 0 0.375rem;
+  border-radius: 9999px;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+/* Dot mode — small circle with no content */
+[data-badge][data-dot] {
+  min-width: 0.5rem;
+  width: 0.5rem;
+  height: 0.5rem;
+  padding: 0;
+}
+
+/* Positioned inside a wrapper */
+[data-badge-wrapper] [data-badge] {
+  position: absolute;
+  top: -0.375rem;
+  right: -0.375rem;
+  z-index: 1;
+}
+
+[data-badge-wrapper] [data-badge][data-dot] {
+  top: -0.125rem;
+  right: -0.125rem;
+}

package/src/base/button.css

@@ -82,25 +82,25 @@
   font-size: 1.25rem;
 }
 
-/* Medium (default) */
+/* Medium (default) — responds to density */
 [data-button][data-size='md'],
 [data-button]:not([data-size]) {
-  height: 2.25rem;
-  padding-inline: 1rem;
+  height: calc(var(--density-icon-size) + var(--density-spacing-sm) * 2);
+  padding-inline: var(--density-spacing-lg);
   font-size: 0.875rem;
-  gap: 0.5rem;
+  gap: var(--density-spacing-sm);
 }
 
 [data-button][data-size='md'][data-icon-only],
 [data-button]:not([data-size])[data-icon-only] {
-  width: 2.25rem;
+  width: calc(var(--density-icon-size) + var(--density-spacing-sm) * 2);
 }
 
 [data-button][data-size='md'] [data-item-icon],
 [data-button][data-size='md'] [data-button-icon-right],
 [data-button]:not([data-size]) [data-item-icon],
 [data-button]:not([data-size]) [data-button-icon-right] {
-  font-size: 1.5rem;
+  font-size: var(--density-icon-size);
 }
 
 /* Large */

package/src/base/card.css

@@ -3,7 +3,7 @@
 [data-card] {
   display: flex;
   flex-direction: column;
-  border-radius: 0.5rem;
+  border-radius: var(--density-radius-base);
   overflow: hidden;
   text-decoration: none;
   color: inherit;
@@ -23,14 +23,17 @@ a[data-card] {
 }
 
 [data-card-header] {
-  padding: 1rem 1rem 0.5rem;
+  padding-block: var(--density-spacing-md) var(--density-spacing-sm);
+  padding-inline: var(--density-spacing-lg);
 }
 
 [data-card-body] {
-  padding: 0.5rem 1rem;
+  padding-block: var(--density-spacing-sm);
+  padding-inline: var(--density-spacing-lg);
   flex: 1;
 }
 
 [data-card-footer] {
-  padding: 0.5rem 1rem 1rem;
+  padding-block: var(--density-spacing-sm) var(--density-spacing-md);
+  padding-inline: var(--density-spacing-lg);
 }

package/src/base/chart.css

@@ -67,11 +67,11 @@
   user-select: none;
 }
 
-[data-plot-element="bar"],
-[data-plot-element="line"],
-[data-plot-element="area"],
-[data-plot-element="point"],
-[data-plot-element="arc"] {
+[data-plot-element='bar'],
+[data-plot-element='line'],
+[data-plot-element='area'],
+[data-plot-element='point'],
+[data-plot-element='arc'] {
   transition: opacity 0.15s ease;
 }
 

package/src/base/density.css

@@ -0,0 +1,51 @@
+/**
+ * Density System — CSS Custom Property Scale
+ *
+ * Sets the spatial rhythm tokens inherited by all components.
+ * Place data-density on any container; descendants inherit automatically.
+ *
+ * Axes: compact → comfortable (default) → cozy
+ */
+
+:root,
+[data-density='comfortable'] {
+  --density-spacing-base: 1rem;
+  --density-spacing-xs: 0.25rem;
+  --density-spacing-sm: 0.5rem;
+  --density-spacing-md: 0.75rem;
+  --density-spacing-lg: 1rem;
+  --density-spacing-xl: 1.5rem;
+
+  --density-line-height: 1.5;
+  --density-icon-size: 1.25rem;
+  --density-border-width: 1px;
+  --density-radius-base: var(--radius-md, 0.375rem);
+}
+
+[data-density='compact'] {
+  --density-spacing-base: 0.75rem;
+  --density-spacing-xs: 0.125rem;
+  --density-spacing-sm: 0.25rem;
+  --density-spacing-md: 0.5rem;
+  --density-spacing-lg: 0.75rem;
+  --density-spacing-xl: 1rem;
+
+  --density-line-height: 1.375;
+  --density-icon-size: 1rem;
+  --density-border-width: 1px;
+  --density-radius-base: var(--radius-sm, 0.25rem);
+}
+
+[data-density='cozy'] {
+  --density-spacing-base: 1.25rem;
+  --density-spacing-xs: 0.375rem;
+  --density-spacing-sm: 0.625rem;
+  --density-spacing-md: 1rem;
+  --density-spacing-lg: 1.25rem;
+  --density-spacing-xl: 2rem;
+
+  --density-line-height: 1.75;
+  --density-icon-size: 1.5rem;
+  --density-border-width: 1px;
+  --density-radius-base: var(--radius-lg, 0.5rem);
+}

package/src/base/divider.css

@@ -0,0 +1,49 @@
+/* Divider — base structural styles */
+
+[data-divider] {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+[data-divider][data-orientation='horizontal'] {
+  flex-direction: row;
+  height: 1px;
+}
+
+[data-divider][data-orientation='vertical'] {
+  flex-direction: column;
+  width: 1px;
+  height: 100%;
+  align-self: stretch;
+}
+
+[data-divider-label] {
+  flex-shrink: 0;
+  padding: 0 0.75rem;
+  font-size: 0.75rem;
+  white-space: nowrap;
+}
+
+[data-divider][data-orientation='horizontal']::before,
+[data-divider][data-orientation='horizontal']::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+}
+
+[data-divider][data-orientation='vertical']::before,
+[data-divider][data-orientation='vertical']::after {
+  content: '';
+  flex: 1;
+  width: 1px;
+}
+
+/* Without label, the element itself is the line */
+[data-divider]:not(:has([data-divider-label]))[data-orientation='horizontal'] {
+  height: 1px;
+}
+
+[data-divider]:not(:has([data-divider-label]))[data-orientation='vertical'] {
+  width: 1px;
+}

package/src/base/dropdown.css

@@ -54,8 +54,8 @@
 
 [data-dropdown][data-size='md'] [data-dropdown-trigger],
 [data-dropdown]:not([data-size]) [data-dropdown-trigger] {
-  height: 2rem;
-  padding-inline: 0.625rem;
+  height: calc(var(--density-icon-size) + var(--density-spacing-xs) * 2);
+  padding-inline: var(--density-spacing-md);
   font-size: 0.875rem;
 }
 
@@ -128,9 +128,10 @@
   display: flex;
   align-items: center;
   width: 100%;
-  padding-block: 0.375rem;
-  padding-inline: 0.75rem;
+  padding-block: var(--density-spacing-xs);
+  padding-inline: var(--density-spacing-md);
   font-size: 0.875rem;
+  line-height: var(--density-line-height);
   text-align: left;
   cursor: pointer;
   border: none;

package/src/base/index.css

@@ -5,6 +5,7 @@
  * Import individual files for tree-shaking, or this file for all base styles.
  */
 
+@import './density.css';
 @import './button.css';
 @import './item.css';
 @import './menu.css';
@@ -41,7 +42,12 @@
 @import './upload-progress.css';
 @import './toc.css';
 @import './status-list.css';
+@import './step-indicator.css';
 @import './message.css';
 @import './alert-list.css';
 @import './chart.css';
 @import './swatch.css';
+@import './divider.css';
+@import './stack.css';
+@import './badge.css';
+@import './avatar.css';

package/src/base/input.css

@@ -240,7 +240,9 @@ input[type='radio'] {
   flex-shrink: 0;
   cursor: pointer;
   position: relative;
-  transition: border-color 150ms ease, background-color 150ms ease;
+  transition:
+    border-color 150ms ease,
+    background-color 150ms ease;
 }
 
 input[type='radio']:checked {