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

package/src/base/stepper.css

@@ -1,140 +1,140 @@
 /* Stepper — base structural styles */
 
 [data-stepper] {
-	display: flex;
-	align-items: flex-start;
-	width: 100%;
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
 }
 
 [data-stepper][data-orientation='vertical'] {
-	flex-direction: column;
+  flex-direction: column;
 }
 
 /* ─── Step container ─── */
 
 [data-stepper-step] {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 0 0 auto;
 }
 
 /* ─── Step circle ─── */
 
 [data-stepper-circle] {
-	width: 2.5rem;
-	height: 2.5rem;
-	border-radius: 9999px;
-	border: 2px solid currentColor;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	cursor: pointer;
-	font-weight: 600;
-	font-size: 0.875rem;
-	background: transparent;
-	color: inherit;
-	padding: 0;
-	transition:
-		background-color 0.2s ease,
-		border-color 0.2s ease,
-		color 0.2s ease;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 9999px;
+  border: 2px solid currentColor;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 0.875rem;
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    color 0.2s ease;
 }
 
 [data-stepper-circle]:disabled {
-	cursor: default;
-	opacity: 0.4;
+  cursor: default;
+  opacity: 0.4;
 }
 
 [data-stepper-step][data-completed] [data-stepper-circle] {
-	background-color: var(--color-primary-500, #3b82f6);
-	border-color: var(--color-primary-500, #3b82f6);
-	color: white;
+  background-color: var(--color-primary-500, #3b82f6);
+  border-color: var(--color-primary-500, #3b82f6);
+  color: white;
 }
 
 [data-stepper-step][data-active] [data-stepper-circle] {
-	border-color: var(--color-primary-500, #3b82f6);
-	color: var(--color-primary-500, #3b82f6);
-	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500, #3b82f6) 20%, transparent);
+  border-color: var(--color-primary-500, #3b82f6);
+  color: var(--color-primary-500, #3b82f6);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary-500, #3b82f6) 20%, transparent);
 }
 
 /* ─── Connector line ─── */
 
 [data-stepper-connector] {
-	flex: 1;
-	height: 2px;
-	min-width: 2rem;
-	align-self: center;
-	/* Vertically center with the circle (half of 2.5rem) */
-	margin-top: 1.25rem;
-	background-color: var(--color-surface-300, #d1d5db);
-	transition: background-color 0.2s ease;
+  flex: 1;
+  height: 2px;
+  min-width: 2rem;
+  align-self: center;
+  /* Vertically center with the circle (half of 2.5rem) */
+  margin-top: 1.25rem;
+  background-color: var(--color-surface-300, #d1d5db);
+  transition: background-color 0.2s ease;
 }
 
 [data-stepper-connector][data-completed] {
-	background-color: var(--color-primary-500, #3b82f6);
+  background-color: var(--color-primary-500, #3b82f6);
 }
 
 /* Vertical orientation connectors */
 [data-stepper][data-orientation='vertical'] [data-stepper-connector] {
-	width: 2px;
-	height: 2rem;
-	min-width: auto;
-	margin-top: 0;
-	margin-left: 1.25rem;
-	align-self: flex-start;
+  width: 2px;
+  height: 2rem;
+  min-width: auto;
+  margin-top: 0;
+  margin-left: 1.25rem;
+  align-self: flex-start;
 }
 
 /* ─── Label ─── */
 
 [data-stepper-label] {
-	margin-top: 0.5rem;
-	font-size: 0.8125rem;
-	text-align: center;
-	max-width: 6rem;
-	line-height: 1.3;
+  margin-top: 0.5rem;
+  font-size: 0.8125rem;
+  text-align: center;
+  max-width: 6rem;
+  line-height: 1.3;
 }
 
 /* ─── Sub-stage dots ─── */
 
 [data-stepper-dots] {
-	display: flex;
-	gap: 0.25rem;
-	margin-top: 0.375rem;
+  display: flex;
+  gap: 0.25rem;
+  margin-top: 0.375rem;
 }
 
 [data-stepper-dot] {
-	width: 0.5rem;
-	height: 0.5rem;
-	border-radius: 9999px;
-	border: 1px solid var(--color-surface-400, #9ca3af);
-	background: transparent;
-	cursor: pointer;
-	padding: 0;
-	transition:
-		background-color 0.2s ease,
-		border-color 0.2s ease;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 9999px;
+  border: 1px solid var(--color-surface-400, #9ca3af);
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease;
 }
 
 [data-stepper-dot]:disabled {
-	cursor: default;
-	opacity: 0.4;
+  cursor: default;
+  opacity: 0.4;
 }
 
 [data-stepper-dot][data-completed] {
-	background-color: var(--color-primary-500, #3b82f6);
-	border-color: var(--color-primary-500, #3b82f6);
+  background-color: var(--color-primary-500, #3b82f6);
+  border-color: var(--color-primary-500, #3b82f6);
 }
 
 [data-stepper-dot][data-active] {
-	border-color: var(--color-primary-500, #3b82f6);
-	background-color: var(--color-primary-500, #3b82f6);
-	box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary-500, #3b82f6) 25%, transparent);
+  border-color: var(--color-primary-500, #3b82f6);
+  background-color: var(--color-primary-500, #3b82f6);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary-500, #3b82f6) 25%, transparent);
 }
 
 /* ─── Content area ─── */
 
 [data-stepper-content] {
-	width: 100%;
-	margin-top: 1.5rem;
+  width: 100%;
+  margin-top: 1.5rem;
 }

package/src/base/switch.css

@@ -10,24 +10,24 @@
    ============================================================================= */
 
 [data-switch] {
-	display: inline-flex;
-	align-items: center;
-	gap: 0.5rem;
-	cursor: pointer;
-	border: none;
-	background: transparent;
-	padding: 0;
-	user-select: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  padding: 0;
+  user-select: none;
 }
 
 [data-switch]:focus {
-	outline: none;
+  outline: none;
 }
 
 [data-switch][data-switch-disabled] {
-	pointer-events: none;
-	opacity: 0.5;
-	cursor: not-allowed;
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
 /* =============================================================================
@@ -35,11 +35,11 @@
    ============================================================================= */
 
 [data-switch-track] {
-	position: relative;
-	display: inline-block;
-	border-radius: 9999px;
-	transition: background-color 200ms ease;
-	flex-shrink: 0;
+  position: relative;
+  display: inline-block;
+  border-radius: 9999px;
+  transition: background-color 200ms ease;
+  flex-shrink: 0;
 }
 
 /* =============================================================================
@@ -47,20 +47,20 @@
    ============================================================================= */
 
 [data-switch-thumb] {
-	position: absolute;
-	top: 50%;
-	transform: translateY(-50%) translateX(0);
-	border-radius: 9999px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	transition:
-		transform 200ms ease,
-		background-color 200ms ease;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%) translateX(0);
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition:
+    transform 200ms ease,
+    background-color 200ms ease;
 }
 
 [data-switch][aria-checked='true'] [data-switch-thumb] {
-	transform: translateY(-50%) translateX(var(--switch-thumb-travel));
+  transform: translateY(-50%) translateX(var(--switch-thumb-travel));
 }
 
 /* =============================================================================
@@ -69,69 +69,69 @@
 
 /* Small: track 28×16, thumb 12px */
 [data-switch][data-switch-size='sm'] [data-switch-track] {
-	width: 1.75rem;
-	height: 1rem;
+  width: 1.75rem;
+  height: 1rem;
 }
 
 [data-switch][data-switch-size='sm'] [data-switch-thumb] {
-	width: 0.75rem;
-	height: 0.75rem;
-	left: 0.125rem;
-	--switch-thumb-travel: 0.75rem;
+  width: 0.75rem;
+  height: 0.75rem;
+  left: 0.125rem;
+  --switch-thumb-travel: 0.75rem;
 }
 
 [data-switch][data-switch-size='sm'] [data-switch-icon] {
-	font-size: 0.5rem;
+  font-size: 0.5rem;
 }
 
 [data-switch][data-switch-size='sm'] [data-switch-label] {
-	font-size: 0.75rem;
+  font-size: 0.75rem;
 }
 
 /* Medium (default): track 44×24, thumb 18px */
 [data-switch][data-switch-size='md'] [data-switch-track],
 [data-switch]:not([data-switch-size]) [data-switch-track] {
-	width: 2.75rem;
-	height: 1.5rem;
+  width: 2.75rem;
+  height: 1.5rem;
 }
 
 [data-switch][data-switch-size='md'] [data-switch-thumb],
 [data-switch]:not([data-switch-size]) [data-switch-thumb] {
-	width: 1.125rem;
-	height: 1.125rem;
-	left: 0.1875rem;
-	--switch-thumb-travel: 1.25rem;
+  width: 1.125rem;
+  height: 1.125rem;
+  left: 0.1875rem;
+  --switch-thumb-travel: 1.25rem;
 }
 
 [data-switch][data-switch-size='md'] [data-switch-icon],
 [data-switch]:not([data-switch-size]) [data-switch-icon] {
-	font-size: 0.625rem;
+  font-size: 0.625rem;
 }
 
 [data-switch][data-switch-size='md'] [data-switch-label],
 [data-switch]:not([data-switch-size]) [data-switch-label] {
-	font-size: 0.875rem;
+  font-size: 0.875rem;
 }
 
 /* Large: track 56×32, thumb 24px */
 [data-switch][data-switch-size='lg'] [data-switch-track] {
-	width: 3.5rem;
-	height: 2rem;
+  width: 3.5rem;
+  height: 2rem;
 }
 
 [data-switch][data-switch-size='lg'] [data-switch-thumb] {
-	width: 1.5rem;
-	height: 1.5rem;
-	left: 0.25rem;
-	--switch-thumb-travel: 1.5rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  left: 0.25rem;
+  --switch-thumb-travel: 1.5rem;
 }
 
 [data-switch][data-switch-size='lg'] [data-switch-icon] {
-	font-size: 0.75rem;
+  font-size: 0.75rem;
 }
 
 [data-switch][data-switch-size='lg'] [data-switch-label] {
-	font-size: 1rem;
+  font-size: 1rem;
 }
 
 /* =============================================================================
@@ -139,8 +139,8 @@
    ============================================================================= */
 
 [data-switch-label] {
-	font-weight: 500;
-	user-select: none;
+  font-weight: 500;
+  user-select: none;
 }
 
 /* =============================================================================
@@ -148,5 +148,5 @@
    ============================================================================= */
 
 [data-switch-icon] {
-	flex-shrink: 0;
+  flex-shrink: 0;
 }

package/src/base/table.css

@@ -10,18 +10,18 @@
    ============================================================================= */
 
 [data-table] {
-	overflow-x: auto;
+  overflow-x: auto;
 }
 
 [data-table][data-disabled='true'] {
-	pointer-events: none;
-	opacity: 0.5;
+  pointer-events: none;
+  opacity: 0.5;
 }
 
 [data-table] table {
-	width: 100%;
-	border-collapse: collapse;
-	table-layout: auto;
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: auto;
 }
 
 /* =============================================================================
@@ -29,10 +29,10 @@
    ============================================================================= */
 
 [data-table-caption] {
-	text-align: left;
-	font-weight: 600;
-	padding: 0.5rem 0.75rem;
-	caption-side: top;
+  text-align: left;
+  font-weight: 600;
+  padding: 0.5rem 0.75rem;
+  caption-side: top;
 }
 
 /* =============================================================================
@@ -40,36 +40,36 @@
    ============================================================================= */
 
 [data-table-header] th {
-	text-align: left;
-	font-weight: 600;
-	white-space: nowrap;
-	user-select: none;
+  text-align: left;
+  font-weight: 600;
+  white-space: nowrap;
+  user-select: none;
 }
 
 [data-table-header-cell] {
-	display: table-cell;
-	cursor: default;
+  display: table-cell;
+  cursor: default;
 }
 
 [data-table-header-cell][data-sortable='true'] {
-	cursor: pointer;
+  cursor: pointer;
 }
 
 [data-table-header-text] {
-	vertical-align: middle;
+  vertical-align: middle;
 }
 
 [data-table-sort-icon] {
-	display: inline-block;
-	vertical-align: middle;
-	margin-left: 0.25rem;
-	opacity: 0.4;
-	transition: opacity 150ms ease;
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 0.25rem;
+  opacity: 0.4;
+  transition: opacity 150ms ease;
 }
 
 [data-table-header-cell][data-sort-order='ascending'] [data-table-sort-icon],
 [data-table-header-cell][data-sort-order='descending'] [data-table-sort-icon] {
-	opacity: 1;
+  opacity: 1;
 }
 
 /* =============================================================================
@@ -77,12 +77,12 @@
    ============================================================================= */
 
 [data-table-row] {
-	cursor: pointer;
-	transition: background-color 150ms ease;
+  cursor: pointer;
+  transition: background-color 150ms ease;
 }
 
 [data-table-row]:focus {
-	outline: none;
+  outline: none;
 }
 
 /* =============================================================================
@@ -90,18 +90,18 @@
    ============================================================================= */
 
 [data-table-cell] {
-	vertical-align: middle;
+  vertical-align: middle;
 }
 
 [data-cell-icon] {
-	display: inline-block;
-	vertical-align: middle;
-	margin-right: 0.375rem;
-	flex-shrink: 0;
+  display: inline-block;
+  vertical-align: middle;
+  margin-right: 0.375rem;
+  flex-shrink: 0;
 }
 
 [data-cell-value] {
-	vertical-align: middle;
+  vertical-align: middle;
 }
 
 /* =============================================================================
@@ -109,9 +109,9 @@
    ============================================================================= */
 
 [data-table-empty] {
-	text-align: center;
-	font-style: italic;
-	opacity: 0.6;
+  text-align: center;
+  font-style: italic;
+  opacity: 0.6;
 }
 
 /* =============================================================================
@@ -120,40 +120,40 @@
 
 [data-table][data-size='sm'] [data-table-header-cell],
 [data-table][data-size='sm'] [data-table-cell] {
-	padding: 0.25rem 0.5rem;
-	font-size: 0.75rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
 }
 
 [data-table][data-size='sm'] [data-table-caption] {
-	padding: 0.25rem 0.5rem;
-	font-size: 0.75rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
 }
 
 [data-table][data-size='md'] [data-table-header-cell],
 [data-table]:not([data-size]) [data-table-header-cell],
 [data-table][data-size='md'] [data-table-cell],
 [data-table]:not([data-size]) [data-table-cell] {
-	padding: 0.5rem 0.75rem;
-	font-size: 0.875rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
 }
 
 [data-table][data-size='md'] [data-table-caption],
 [data-table]:not([data-size]) [data-table-caption] {
-	padding: 0.5rem 0.75rem;
-	font-size: 0.875rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
 }
 
 [data-table][data-size='lg'] [data-table-header-cell],
 [data-table][data-size='lg'] [data-table-cell] {
-	padding: 0.625rem 1rem;
-	font-size: 1rem;
+  padding: 0.625rem 1rem;
+  font-size: 1rem;
 }
 
 [data-table][data-size='lg'] [data-table-caption] {
-	padding: 0.625rem 1rem;
-	font-size: 1rem;
+  padding: 0.625rem 1rem;
+  font-size: 1rem;
 }
 
 [data-table-empty] {
-	padding: 1.5rem 0.75rem;
+  padding: 1.5rem 0.75rem;
 }

package/src/base/tilt.css

@@ -1,14 +1,14 @@
 /* Tilt — base structural styles */
 
 [data-tilt] {
-	perspective: var(--tilt-perspective, 600px);
+  perspective: var(--tilt-perspective, 600px);
 }
 
 [data-tilt] > * {
-	transform: rotateX(var(--tilt-rotate-x, 0deg)) rotateY(var(--tilt-rotate-y, 0deg));
-	transition: transform 0.1s ease-out;
+  transform: rotateX(var(--tilt-rotate-x, 0deg)) rotateY(var(--tilt-rotate-y, 0deg));
+  transition: transform 0.1s ease-out;
 }
 
 [data-tilt][data-tilt-brightness] > * {
-	filter: brightness(var(--tilt-brightness, 1));
+  filter: brightness(var(--tilt-brightness, 1));
 }