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

package/dist/base.css

@@ -2307,7 +2307,7 @@ button[data-list-item] {
   align-self: center;
   flex: 1;
   min-width: 0;
-  padding: 0.25rem 0.375rem;
+  padding: 0.25rem 0.375rem 0.25rem 0;
   border: none;
   background: transparent;
   text-align: left;
@@ -2873,10 +2873,11 @@ button[data-form-reset]:disabled {
   display:flex;flex-direction:column;gap:0.25rem;
 }
 
-/* Checkbox and switch: inline layout */
+/* Checkbox, switch and toggle: inline layout (label left, control right) */
 [data-field-type='switch'] > [data-field],
-[data-field-type='checkbox'] > [data-field] {
-  flex-direction:row;align-items:center;gap:0.5rem;
+[data-field-type='checkbox'] > [data-field],
+[data-field-type='toggle'] > [data-field] {
+  flex-direction:row;align-items:center;justify-content:space-between;gap:0.5rem;
 }
 
 /* Select: stretch to fill input wrapper — display:flex eliminates inline-block gap */
@@ -2968,6 +2969,55 @@ input[type='range']::-moz-range-thumb {
   border: none;
 }
 
+/* Date / time / datetime-local — inherit theme text color, match sizing */
+input[type='date'],
+input[type='time'],
+input[type='datetime-local'] {
+  color: inherit;
+  color-scheme: inherit;
+}
+
+/* Calendar/time picker indicator — inherit text color so it matches theme */
+input[type='date']::-webkit-calendar-picker-indicator,
+input[type='time']::-webkit-calendar-picker-indicator,
+input[type='datetime-local']::-webkit-calendar-picker-indicator {
+  opacity: 0.6;
+  cursor: pointer;
+  color: inherit;
+  filter: var(--picker-indicator-filter, none);
+}
+
+/* Radio inputs — remove native appearance for theme styling */
+input[type='radio'] {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 50%;
+  border: 2px solid currentColor;
+  flex-shrink: 0;
+  cursor: pointer;
+  position: relative;
+  transition: border-color 150ms ease, background-color 150ms ease;
+}
+
+input[type='radio']:checked {
+  border-color: rgba(var(--color-primary-500), 1);
+}
+
+input[type='radio']:checked::before {
+  content: '';
+  display: block;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background: rgba(var(--color-primary-500), 1);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
 /* Color input */
 input[type='color'] {
   appearance: none;
@@ -5333,3 +5383,178 @@ a[data-card] {
   flex-direction: column-reverse;
 }
 
+/**
+ * Chart - Base Structural Styles
+ *
+ * Layout, typography, pointer-events.
+ * No colors — those live in theme-specific chart.css files.
+ */
+
+[data-chart] {
+  position: relative;
+  display: block;
+  width: 100%;
+  overflow: visible;
+}
+
+[data-chart-canvas] {
+  overflow: visible;
+}
+
+[data-chart-axis-line] {
+  fill: none;
+}
+
+[data-chart-tick] line {
+  fill: none;
+}
+
+[data-chart-tick-label] {
+  font-size: 0.75rem;
+  font-family: inherit;
+  user-select: none;
+}
+
+[data-chart-grid-line] {
+  fill: none;
+}
+
+[data-chart-legend] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  margin-top: 0.5rem;
+}
+
+[data-chart-legend-item] {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  user-select: none;
+}
+
+[data-chart-legend-swatch] {
+  width: 0.75rem;
+  height: 0.75rem;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
+[data-chart-legend-label] {
+  color: currentColor;
+}
+
+[data-chart-label] {
+  font-size: 0.6875rem;
+  font-family: inherit;
+  pointer-events: none;
+  user-select: none;
+}
+
+[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;
+}
+
+[data-facet-grid] {
+  display: grid;
+  grid-template-columns: repeat(var(--facet-cols, 3), 1fr);
+  gap: 1rem;
+}
+
+[data-facet-panel] {
+  display: flex;
+  flex-direction: column;
+}
+
+[data-facet-title] {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-align: center;
+  margin-bottom: 0.25rem;
+}
+
+/* =============================================================================
+   InputSwatch / Swatch — Base structural styles
+   ============================================================================= */
+
+/* Container */
+[data-swatch] {
+  display:flex;flex-wrap:wrap;gap:0.5rem;padding:0.25rem;
+}
+
+/* Button: padding creates the ring gap; background is the gradient ring */
+[data-swatch-item] {
+  cursor:pointer;border-width:0px;background-color:transparent;padding:0.125rem;line-height:1;
+  transition: background 120ms ease, outline-color 120ms ease;
+  outline: 2px solid transparent;
+  outline-offset: 0;
+}
+
+/* Border-radius follows shape */
+[data-swatch][data-swatch-shape='circle'] [data-swatch-item] {
+  border-radius:9999px;
+}
+
+[data-swatch][data-swatch-shape='square'] [data-swatch-item] {
+  border-radius:0.25rem;
+}
+
+/* ── Selected: gradient shows through the padding gap as a ring ────────────── */
+
+[data-swatch-item][data-selected] {
+  background: linear-gradient(135deg, var(--swatch-fill, currentColor), var(--swatch-stroke, currentColor));
+}
+
+/* ── Hover + keyboard focus: same visual treatment ────────────────────────── */
+
+[data-swatch-item]:hover:not(:disabled):not([data-disabled]):not([data-selected]),
+[data-swatch-item]:focus-visible:not(:disabled):not([data-disabled]):not([data-selected]) {
+  outline-color: var(--swatch-stroke, currentColor);
+}
+
+/* Focus on selected item: show outline so keyboard position is still visible */
+[data-swatch-item][data-selected]:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 3px;
+}
+
+/* ── Disabled ─────────────────────────────────────────────────────────────── */
+
+[data-swatch-item]:disabled,
+[data-swatch-item][data-disabled] {
+  cursor:not-allowed;opacity:0.4;
+}
+
+/* ── Default cells (fill the button's content box) ───────────────────────── */
+
+[data-swatch-square],
+[data-swatch-circle] {
+  display: block;
+  background-color: var(--swatch-fill, currentColor);
+}
+
+[data-swatch-square] {
+  width:1.5rem;height:1.5rem;border-radius:0.125rem;
+}
+
+[data-swatch-circle] {
+  width:1.5rem;height:1.5rem;border-radius:9999px;
+}
+
+/* ── Size variants ─────────────────────────────────────────────────────────── */
+
+[data-swatch][data-swatch-size='sm'] [data-swatch-square],
+[data-swatch][data-swatch-size='sm'] [data-swatch-circle] {
+  width:1.25rem;height:1.25rem;
+}
+
+[data-swatch][data-swatch-size='lg'] [data-swatch-square],
+[data-swatch][data-swatch-size='lg'] [data-swatch-circle] {
+  width:2rem;height:2rem;
+}
+