@rokkit/themes 1.1.16 → 1.1.18

package/dist/base/input.css

@@ -0,0 +1,342 @@
+/* Base structural styles for form fields and inputs */
+
+/* Form root: vertical stack */
+[data-form-root] {
+  display:flex;flex-direction:column;gap:0.75rem;
+}
+
+/* Form field container */
+[data-form-field] {
+  display:flex;flex-direction:column;
+}
+
+/* Separator between form fields */
+[data-form-separator] {
+  border-top-color: var(--paper-mute);
+  margin-top:0.25rem;margin-bottom:0.25rem;border-top-width:1px;
+}
+
+/* Form group (fieldset for nested objects) */
+[data-form-group] {
+  border-left-color: var(--paper-mute);
+  margin:0;display:flex;flex-direction:column;gap:0.75rem;border-left-width:1px;border-style:none;padding:0;padding-left:0.75rem;
+}
+
+[data-form-group-label] {
+  padding-bottom:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:600;
+}
+
+/* Validation report */
+[data-validation-report] {
+  display:flex;flex-direction:column;gap:0.5rem;
+}
+
+[data-validation-group] {
+  display:flex;flex-direction:column;gap:0.125rem;
+}
+
+[data-validation-group-header] {
+  display:flex;align-items:center;gap:0.375rem;padding-top:0.25rem;padding-bottom:0.25rem;font-size:0.75rem;line-height:1rem;font-weight:600;
+}
+
+[data-validation-count] {
+  height:18px;min-width:18px;display:inline-flex;align-items:center;justify-content:center;border-radius:9999px;padding-left:0.25rem;padding-right:0.25rem;font-size:10px;font-weight:700;
+}
+
+[data-severity='error'] > [data-validation-group-header] {
+  color:var(--error);
+}
+
+[data-severity='error'] [data-validation-count] {
+  background-color: var(--error-soft);
+  color: var(--error);
+}
+
+[data-severity='warning'] > [data-validation-group-header] {
+  color:var(--warning);
+}
+
+[data-severity='warning'] [data-validation-count] {
+  background-color: var(--warning-soft);
+  color: var(--warning);
+}
+
+[data-severity='info'] > [data-validation-group-header] {
+  color:var(--info);
+}
+
+[data-severity='info'] [data-validation-count] {
+  background-color: var(--info-soft);
+  color: var(--info);
+}
+
+[data-severity='success'] > [data-validation-group-header] {
+  color:var(--success);
+}
+
+[data-severity='success'] [data-validation-count] {
+  background-color: var(--success-soft);
+  color: var(--success);
+}
+
+[data-validation-item] {
+  border-radius:0.25rem;padding-left:0.5rem;padding-right:0.5rem;padding-top:0.125rem;padding-bottom:0.125rem;text-align:left;font-size:0.75rem;line-height:1rem;
+}
+
+button[data-validation-item] {
+  cursor:pointer;border-style:none;background-color:transparent;
+}
+
+button[data-validation-item]:hover {
+  background-color: var(--paper-soft);
+}
+
+/* Form actions (submit/reset buttons) */
+[data-form-actions] {
+  display:flex;flex-direction:row;justify-content:flex-end;gap:0.5rem;padding-top:0.5rem;
+}
+
+button[data-form-submit],
+button[data-form-reset] {
+  border-color: var(--paper-mute);
+  background-color: var(--paper-soft);
+  cursor:pointer;border-width:1px;border-radius:0.25rem;padding-left:1rem;padding-right:1rem;padding-top:0.375rem;padding-bottom:0.375rem;font-size:0.875rem;line-height:1.25rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;
+}
+
+button[data-form-submit]:hover,
+button[data-form-reset]:hover {
+  background-color: var(--paper-mute);
+}
+
+button[data-form-submit] {
+  background-color: var(--primary);
+  color: var(--on-primary);
+  border-color: var(--primary);
+  
+}button[data-form-submit]:hover{opacity:0.9;}
+
+button[data-form-submit]:disabled,
+button[data-form-reset]:disabled {
+  cursor:not-allowed;opacity:0.5;
+}
+
+/* Submitting state: reduce interactivity */
+[data-form-submitting] > :not([data-form-actions]) {
+  pointer-events:none;opacity:0.6;
+}
+
+/* Field root container */
+[data-field-root] {
+  box-sizing:border-box;display:flex;flex-direction:column;
+}
+
+/* Field wrapper: vertical by default */
+[data-field-root] > [data-field] {
+  display:flex;flex-direction:column;gap:0.25rem;
+}
+
+/* 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] {
+  flex-direction:row;align-items:center;justify-content:space-between;gap:0.5rem;
+}
+
+/* Inline layout variant — opt in per field via the `variant='inline'`
+   prop on InputField (or the equivalent `variant` field on a
+   FormRenderer layout element). Label sits in a fixed leading column,
+   the input takes the remaining row. Useful for control-panel
+   contexts (playground knobs, settings dialogs, tweak editors) where
+   the form-page rhythm reads as overkill. */
+[data-field-root][data-field-layout='inline'] > [data-field] {
+  flex-direction:row;align-items:center;gap:0.75rem;
+}
+
+[data-field-root][data-field-layout='inline'] > [data-field] > label {
+  width:8rem;flex:none;font-size:0.75rem;line-height:1rem;
+}
+
+[data-field-root][data-field-layout='inline'] > [data-field] > :not(label) {
+  min-width:0;flex:1 1 0%;
+}
+
+/* Select: stretch to fill input wrapper — display:flex eliminates inline-block gap */
+[data-input-root] [data-select] {
+  flex:1 1 0%;align-self:stretch;
+  display: flex;
+}
+
+[data-input-root] [data-select] [data-select-trigger] {
+  flex:1 1 0%;align-self:stretch;
+  min-width: 0;
+  /* Fill the field (via self-stretch) instead of imposing the standalone control
+     height — so a control embedded in a form field is the same height as a plain
+     field (the wrapper owns the height). Any control embedded in [data-input-root]
+     should follow this contract. */
+  height: auto;
+}
+
+/* Checkbox icon */
+[data-checkbox-root] {
+  display:flex;align-items:center;
+}
+
+/* Label: fills available space */
+[data-field] > label {
+  flex:1 1 0%;font-size:0.75rem;line-height:1rem;
+}
+
+/* Info field: horizontal layout */
+[data-field-type='info'] > [data-field] {
+  flex-direction:row;align-items:center;justify-content:space-between;
+}
+
+[data-field-info] {
+  font-size:0.75rem;line-height:1rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+}
+
+/* Numeric/date input alignment */
+[data-field-type='number'] input,
+[data-field-type='integer'] input,
+[data-field-type='date'] input,
+[data-field-type='time'] input {
+  text-align:right;
+}
+
+/* Input wrapper: horizontal for input + icon */
+[data-input-root] {
+  display:flex;flex-direction:row;align-items:center;
+  /* Align to the shared control-height scale so a text field lines up with
+     buttons/selects/etc. at the default (md) size. min-height (not height) so
+     a textarea still grows past one line. */
+  min-height: var(--control-h-md);
+}
+
+/* Input elements fill available width */
+[data-input-root] input,
+[data-input-root] textarea,
+[data-input-root] select {
+  margin:0;min-width:0;flex:1 1 0%;line-height:2;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;
+}
+
+/* Icons inside inputs */
+[data-input-root] [data-icon] {
+  aspect-ratio:1/1;min-height:100%;flex-shrink:0;
+}
+
+/* Description below input */
+[data-description] {
+  font-size:0.75rem;line-height:1rem;line-height:1.375;
+}
+
+/* Validation message */
+[data-message] {
+  font-size:0.75rem;line-height:1rem;line-height:1.375;
+}
+
+/* Checkbox icon: focus handling */
+[data-checkbox-icon] {
+  
+}[data-checkbox-icon]:focus{outline:2px solid transparent;outline-offset:2px;}
+
+/* Range slider thumb — theme layer sets --range-thumb via @apply on [data-range-thumb] */
+input[type='range'] {
+  --range-thumb: var(--color-primary);
+}
+
+input[type='range']::-webkit-slider-thumb {
+  appearance: none;
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+  background: var(--range-thumb);
+  cursor: pointer;
+}
+
+input[type='range']::-moz-range-thumb {
+  height: 16px;
+  width: 16px;
+  border-radius: 50%;
+  background: var(--range-thumb);
+  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: var(--primary);
+  color: var(--primary);
+}
+
+input[type='radio']:checked::before {
+  content: '';
+  display: block;
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background: currentColor;
+  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;
+  padding:0;
+}
+
+[data-input-root] [data-input-icon] {
+  margin-left:0.5rem;margin-right:0.5rem;aspect-ratio:1/1;min-height:100%;flex-shrink:0;
+}
+
+/* Responsive adjustments */
+@media (max-width: 640px) {
+  [data-field-root] {
+    padding:0.25rem;
+  }
+  [data-field] {
+    min-height:1.75rem;gap:0.25rem;
+  }
+  [data-description],
+  [data-message] {
+    font-size:0.875rem;line-height:1.25rem;
+  }
+}

package/dist/base/item.css

@@ -0,0 +1,91 @@
+/**
+ * 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 Icon — Literal (kanji, emoji, text)
+   ============================================================================= */
+
+[data-item-icon-literal] {
+  flex-shrink: 0;
+  width: var(--density-icon-size, 1.25rem);
+  text-align: center;
+  line-height: 1;
+  font-size: var(--density-icon-size, 1.25rem);
+}
+
+/* =============================================================================
+   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/dist/base/layout.css

@@ -0,0 +1,17 @@
+/**
+ * Layout Tokens — App-Level Spacing
+ *
+ * Structural layout dimensions for app shells.
+ * Override per-app by redefining these custom properties.
+ */
+
+:root {
+  --layout-sidebar-width: 240px;
+  --layout-sidebar-collapsed: 64px;
+  --layout-header-height: 56px;
+  --layout-content-max-width: 1280px;
+  --layout-section-gap: 2rem;
+  --layout-section-padding: 1.5rem;
+  --layout-content-padding: 2rem;
+  --layout-card-gap: 1rem;
+}

package/dist/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;
+}