@rokkit/themes 1.0.0-next.99 → 1.0.2

package/src/base/input.css

@@ -0,0 +1,290 @@
+/* Base structural styles for form fields and inputs */
+
+/* Form root: vertical stack */
+[data-form-root] {
+  @apply flex flex-col gap-3;
+}
+
+/* Form field container */
+[data-form-field] {
+  @apply flex flex-col;
+}
+
+/* Separator between form fields */
+[data-form-separator] {
+  @apply border-surface-z2 my-1 border-t;
+}
+
+/* Form group (fieldset for nested objects) */
+[data-form-group] {
+  @apply border-surface-z2 m-0 flex flex-col gap-3 border-l border-none p-0 pl-3;
+}
+
+[data-form-group-label] {
+  @apply pb-1 text-xs font-semibold;
+}
+
+/* Validation report */
+[data-validation-report] {
+  @apply flex flex-col gap-2;
+}
+
+[data-validation-group] {
+  @apply flex flex-col gap-0.5;
+}
+
+[data-validation-group-header] {
+  @apply flex items-center gap-1.5 py-1 text-xs font-semibold;
+}
+
+[data-validation-count] {
+  @apply inline-flex h-[18px] min-w-[18px] items-center justify-center rounded-full px-1 text-[10px] font-bold;
+}
+
+[data-severity='error'] > [data-validation-group-header] {
+  @apply text-error;
+}
+
+[data-severity='error'] [data-validation-count] {
+  @apply bg-error-z1 text-error-z7;
+}
+
+[data-severity='warning'] > [data-validation-group-header] {
+  @apply text-warning;
+}
+
+[data-severity='warning'] [data-validation-count] {
+  @apply bg-warning-z1 text-warning-z7;
+}
+
+[data-severity='info'] > [data-validation-group-header] {
+  @apply text-info;
+}
+
+[data-severity='info'] [data-validation-count] {
+  @apply bg-info-z1 text-info-z7;
+}
+
+[data-severity='success'] > [data-validation-group-header] {
+  @apply text-success;
+}
+
+[data-severity='success'] [data-validation-count] {
+  @apply bg-success-z1 text-success-z7;
+}
+
+[data-validation-item] {
+  @apply rounded px-2 py-0.5 text-left text-xs;
+}
+
+button[data-validation-item] {
+  @apply hover:bg-surface-z1 cursor-pointer border-none bg-transparent;
+}
+
+/* Form actions (submit/reset buttons) */
+[data-form-actions] {
+  @apply flex flex-row justify-end gap-2 pt-2;
+}
+
+button[data-form-submit],
+button[data-form-reset] {
+  @apply border-surface-z3 bg-surface-z1 hover:bg-surface-z2 cursor-pointer rounded border px-4 py-1.5 text-sm transition-colors;
+}
+
+button[data-form-submit] {
+  @apply bg-primary text-on-primary border-primary hover:opacity-90;
+}
+
+button[data-form-submit]:disabled,
+button[data-form-reset]:disabled {
+  @apply cursor-not-allowed opacity-50;
+}
+
+/* Submitting state: reduce interactivity */
+[data-form-submitting] > :not([data-form-actions]) {
+  @apply pointer-events-none opacity-60;
+}
+
+/* Field root container */
+[data-field-root] {
+  @apply box-border flex flex-col;
+}
+
+/* Field wrapper: vertical by default */
+[data-field-root] > [data-field] {
+  @apply flex flex-col gap-1;
+}
+
+/* Checkbox, switch and toggle: inline layout (label left, control right) */
+[data-field-type='switch'] > [data-field],
+[data-field-type='checkbox'] > [data-field],
+[data-field-type='toggle'] > [data-field] {
+  @apply flex-row items-center justify-between gap-2;
+}
+
+/* Select: stretch to fill input wrapper — display:flex eliminates inline-block gap */
+[data-input-root] [data-select] {
+  @apply flex-1 self-stretch;
+  display: flex;
+}
+
+[data-input-root] [data-select] [data-select-trigger] {
+  @apply flex-1 self-stretch;
+  min-width: 0;
+}
+
+/* Checkbox icon */
+[data-checkbox-root] {
+  @apply flex items-center;
+}
+
+/* Label: fills available space */
+[data-field] > label {
+  @apply flex-1 text-xs;
+}
+
+/* Info field: horizontal layout */
+[data-field-type='info'] > [data-field] {
+  @apply flex-row items-center justify-between;
+}
+
+[data-field-info] {
+  @apply font-mono text-xs;
+}
+
+/* Numeric/date input alignment */
+[data-field-type='number'] input,
+[data-field-type='integer'] input,
+[data-field-type='date'] input,
+[data-field-type='time'] input {
+  @apply text-right;
+}
+
+/* Input wrapper: horizontal for input + icon */
+[data-input-root] {
+  @apply flex flex-row items-center;
+}
+
+/* Input elements fill available width */
+[data-input-root] input,
+[data-input-root] textarea,
+[data-input-root] select {
+  @apply m-0 min-w-0 flex-1 leading-loose transition-all;
+}
+
+/* Icons inside inputs */
+[data-input-root] [data-icon] {
+  @apply aspect-square min-h-full flex-shrink-0;
+}
+
+/* Description below input */
+[data-description] {
+  @apply text-xs leading-snug;
+}
+
+/* Validation message */
+[data-message] {
+  @apply text-xs leading-snug;
+}
+
+/* Checkbox icon: focus handling */
+[data-checkbox-icon] {
+  @apply focus:outline-none;
+}
+
+/* Range slider thumb */
+input[type='range']::-webkit-slider-thumb {
+  appearance: none;
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+  background: rgba(var(--color-primary-500));
+  cursor: pointer;
+}
+
+input[type='range']::-moz-range-thumb {
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+  background: rgba(var(--color-primary-500));
+  cursor: pointer;
+  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;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background: none;
+  @apply p-0;
+}
+
+[data-input-root] [data-input-icon] {
+  @apply mx-2 aspect-square min-h-full flex-shrink-0;
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  [data-field-root] {
+    @apply p-1;
+  }
+  [data-field] {
+    @apply min-h-7 gap-1;
+  }
+  [data-description],
+  [data-message] {
+    @apply text-sm;
+  }
+}

package/src/base/item.css

@@ -0,0 +1,78 @@
+/**
+ * Item Content - Base Structural Styles
+ *
+ * Shared styles for icon, text, description, and badge elements
+ * used by List, Tree, and other components.
+ */
+
+/* =============================================================================
+   Item Icon
+   ============================================================================= */
+
+[data-item-icon] {
+  flex-shrink: 0;
+}
+
+/* =============================================================================
+   Item Avatar
+   ============================================================================= */
+
+[data-item-avatar] {
+  flex-shrink: 0;
+  width: 1.5em;
+  height: 1.5em;
+  border-radius: 9999px;
+  object-fit: cover;
+}
+
+/* =============================================================================
+   Item Text Container
+   ============================================================================= */
+
+[data-item-text] {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+
+[data-item-label] {
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+[data-item-description] {
+  font-size: 0.75em;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* =============================================================================
+   Item Badge
+   ============================================================================= */
+
+[data-item-badge] {
+  flex-shrink: 0;
+  margin-left: auto;
+  padding: 0.125rem 0.375rem;
+  font-size: 0.75em;
+  font-weight: 500;
+  border-radius: 9999px;
+}
+
+/* =============================================================================
+   Item Shortcut
+   ============================================================================= */
+
+[data-item-shortcut] {
+  flex-shrink: 0;
+  margin-left: auto;
+  padding: 0.125rem 0.375rem;
+  font-family: var(--font-mono);
+  font-size: 0.75em;
+  font-weight: 500;
+  border-radius: 0.25rem;
+}

package/src/base/list.css

@@ -0,0 +1,188 @@
+/**
+ * List - Base Structural Styles
+ *
+ * These styles provide layout, positioning, and basic structure.
+ * No colors, shadows, or visual theming - those belong in theme styles.
+ */
+
+/* =============================================================================
+   List Container
+   ============================================================================= */
+
+[data-list] {
+  display: flex;
+  flex-direction: column;
+}
+
+[data-list][data-disabled='true'] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+[dir='rtl'] [data-list] [data-list-item] {
+  flex-direction: row-reverse;
+  text-align: right;
+}
+
+/* =============================================================================
+   List Items (shared for links and buttons)
+   ============================================================================= */
+
+[data-list-item] {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    background-color 150ms ease,
+    color 150ms ease;
+}
+
+a[data-list-item],
+button[data-list-item] {
+  display: flex;
+  align-items: center;
+  gap: var(--density-spacing-md);
+  padding-block: var(--density-spacing-xs);
+  padding-inline: var(--density-spacing-md);
+  font-size: 0.875rem;
+  line-height: var(--density-line-height);
+  text-decoration: none;
+  cursor: pointer;
+  transition:
+    background-color 150ms ease,
+    color 150ms ease;
+}
+
+[data-list-item][data-disabled='true'],
+[data-list-item]:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+[data-list-item]:focus {
+  outline: none;
+}
+
+/* Size variants for items */
+[data-list][data-size='sm'] [data-list-item],
+[data-list][data-size='sm'] a[data-list-item],
+[data-list][data-size='sm'] button[data-list-item] {
+  gap: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+}
+
+[data-list][data-size='md'] [data-list-item],
+[data-list]:not([data-size]) [data-list-item],
+[data-list][data-size='md'] a[data-list-item],
+[data-list]:not([data-size]) a[data-list-item],
+[data-list][data-size='md'] button[data-list-item],
+[data-list]:not([data-size]) button[data-list-item] {
+  gap: var(--density-spacing-md);
+  padding-block: var(--density-spacing-xs);
+  padding-inline: var(--density-spacing-md);
+  font-size: 0.875rem;
+  line-height: var(--density-line-height);
+}
+
+[data-list][data-size='lg'] [data-list-item],
+[data-list][data-size='lg'] a[data-list-item],
+[data-list][data-size='lg'] button[data-list-item] {
+  gap: 0.75rem;
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+}
+
+/* =============================================================================
+   Item Elements - uses shared [data-item-*] from item.css
+   ============================================================================= */
+
+/* =============================================================================
+   Groups
+   ============================================================================= */
+
+[data-list-group] {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: var(--density-spacing-sm);
+  padding-block: var(--density-spacing-xs);
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-align: left;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  cursor: pointer;
+  transition: color 150ms ease;
+}
+
+/* Non-collapsible group labels are not interactive */
+[data-list]:not([data-collapsible='true']) [data-list-group] {
+  cursor: default;
+}
+
+[data-list-group]:focus {
+  outline: none;
+}
+
+/* Group label sizes */
+[data-list][data-size='sm'] [data-list-group] {
+  padding: 0.25rem 0.5rem;
+}
+[data-list][data-size='md'] [data-list-group],
+[data-list]:not([data-size]) [data-list-group] {
+  padding-block: var(--density-spacing-xs);
+  padding-inline: var(--density-spacing-md);
+}
+[data-list][data-size='lg'] [data-list-group] {
+  padding: 0.5rem 1rem;
+}
+
+/* Group item content — icon slightly muted, text stacks label + description */
+[data-list-group] > [data-item-icon] {
+  opacity: 0.7;
+}
+
+[data-list-group] [data-item-label] {
+  font-weight: inherit;
+}
+
+[data-list-group] [data-item-description] {
+  text-transform: none;
+  letter-spacing: normal;
+  font-weight: 400;
+  opacity: 0.8;
+}
+
+/* Expand/collapse chevron — pushed to the right edge */
+[data-list-expand-icon] {
+  flex-shrink: 0;
+  margin-left: auto;
+  transition: transform 150ms ease;
+}
+
+/* =============================================================================
+   Multi-selection
+   ============================================================================= */
+
+[data-list][data-multiselect='true'] [data-list-item] {
+  user-select: none;
+}
+
+/* =============================================================================
+   Separator / Spacer
+   ============================================================================= */
+
+[data-list-separator] {
+  height: 1px;
+  margin-block: 0.25rem;
+  border: none;
+}
+
+[data-list-spacer] {
+  height: 0.5rem;
+}