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

package/src/grada-ui/button.css

@@ -0,0 +1,197 @@
+/**
+ * Button - Grada UI Theme Styles
+ *
+ * Gradient brand identity with pill-shape primary actions,
+ * uppercase Montserrat Bold labels.
+ */
+
+/* =============================================================================
+   Shared Base
+   ============================================================================= */
+
+[data-style='grada-ui'] [data-button] {
+  font-family: 'Montserrat', sans-serif;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  font-size: 0.625rem;
+  font-weight: 700;
+  transition: filter 0.15s ease, box-shadow 0.15s ease;
+}
+
+/* =============================================================================
+   Default Style (filled)
+   ============================================================================= */
+
+[data-style='grada-ui'] [data-button][data-style='default'][data-variant='default'],
+[data-style='grada-ui'] [data-button]:not([data-style])[data-variant='default'],
+[data-style='grada-ui'] [data-button][data-style='default']:not([data-variant]),
+[data-style='grada-ui'] [data-button]:not([data-style]):not([data-variant]) {
+  @apply bg-none bg-surface-z2 text-surface-z8 shadow-sm;
+  border-radius: 20px;
+}
+
+[data-style='grada-ui'] [data-button][data-style='default'][data-variant='primary'],
+[data-style='grada-ui'] [data-button]:not([data-style])[data-variant='primary'] {
+  background: var(--gd-gradient);
+  color: white;
+  border-radius: 20px;
+  @apply shadow-md;
+}
+
+[data-style='grada-ui'] [data-button][data-style='default'][data-variant='secondary'],
+[data-style='grada-ui'] [data-button]:not([data-style])[data-variant='secondary'] {
+  background-color: var(--gd-secondary);
+  color: white;
+  border-radius: 20px;
+  @apply shadow-md;
+}
+
+[data-style='grada-ui'] [data-button][data-style='default'][data-variant='danger'],
+[data-style='grada-ui'] [data-button]:not([data-style])[data-variant='danger'] {
+  background-color: var(--gd-error);
+  color: white;
+  border-radius: 20px;
+  @apply shadow-md;
+}
+
+/* =============================================================================
+   Outline Style
+   ============================================================================= */
+
+[data-style='grada-ui'] [data-button][data-style='outline'][data-variant='default'],
+[data-style='grada-ui'] [data-button][data-style='outline']:not([data-variant]) {
+  @apply border-surface-z4 text-surface-z7 border bg-transparent;
+  border-radius: 20px;
+}
+
+[data-style='grada-ui'] [data-button][data-style='outline'][data-variant='primary'] {
+  border: 2px solid var(--gd-primary);
+  color: var(--gd-primary);
+  background: transparent;
+  border-radius: 20px;
+}
+
+[data-style='grada-ui'] [data-button][data-style='outline'][data-variant='secondary'] {
+  border: 2px solid var(--gd-secondary);
+  color: var(--gd-secondary);
+  background: transparent;
+  border-radius: 20px;
+}
+
+[data-style='grada-ui'] [data-button][data-style='outline'][data-variant='danger'] {
+  border: 2px solid var(--gd-error);
+  color: var(--gd-error);
+  background: transparent;
+  border-radius: 20px;
+}
+
+/* =============================================================================
+   Ghost Style
+   ============================================================================= */
+
+[data-style='grada-ui'] [data-button][data-style='ghost'] {
+  background: transparent;
+  border-color: transparent;
+  border-radius: 20px;
+}
+
+[data-style='grada-ui'] [data-button][data-style='ghost'][data-variant='default'],
+[data-style='grada-ui'] [data-button][data-style='ghost']:not([data-variant]) {
+  @apply text-surface-z7;
+}
+
+[data-style='grada-ui'] [data-button][data-style='ghost'][data-variant='primary'] {
+  color: var(--gd-primary);
+}
+
+[data-style='grada-ui'] [data-button][data-style='ghost'][data-variant='secondary'] {
+  color: var(--gd-secondary);
+}
+
+[data-style='grada-ui'] [data-button][data-style='ghost'][data-variant='danger'] {
+  color: var(--gd-error);
+}
+
+/* =============================================================================
+   Gradient Style
+   ============================================================================= */
+
+[data-style='grada-ui'] [data-button][data-style='gradient'][data-variant='default'],
+[data-style='grada-ui'] [data-button][data-style='gradient']:not([data-variant]) {
+  @apply from-surface-z3 to-surface-z1 text-surface-z10 bg-gradient-to-br shadow-md;
+  border-radius: 20px;
+}
+
+[data-style='grada-ui'] [data-button][data-style='gradient'][data-variant='primary'],
+[data-style='grada-ui'] [data-button][data-style='gradient'][data-variant='secondary'] {
+  background: var(--gd-gradient);
+  color: white;
+  border-radius: 20px;
+  @apply shadow-md;
+}
+
+[data-style='grada-ui'] [data-button][data-style='gradient'][data-variant='danger'] {
+  background-color: var(--gd-error);
+  color: white;
+  border-radius: 20px;
+  @apply shadow-md;
+}
+
+/* =============================================================================
+   Link Style
+   ============================================================================= */
+
+[data-style='grada-ui'] [data-button][data-style='link'][data-variant='default'],
+[data-style='grada-ui'] [data-button][data-style='link']:not([data-variant]) {
+  @apply text-surface-z7;
+}
+
+[data-style='grada-ui'] [data-button][data-style='link'][data-variant='primary'] {
+  color: var(--gd-primary);
+}
+
+[data-style='grada-ui'] [data-button][data-style='link'][data-variant='secondary'] {
+  color: var(--gd-secondary);
+}
+
+[data-style='grada-ui'] [data-button][data-style='link'][data-variant='danger'] {
+  color: var(--gd-error);
+}
+
+/* =============================================================================
+   Hover States
+   ============================================================================= */
+
+[data-style='grada-ui']
+  [data-button][data-variant='primary']:hover:not(:disabled):not([data-disabled]),
+[data-style='grada-ui']
+  [data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
+  filter: brightness(1.1);
+  @apply shadow-lg;
+}
+
+[data-style='grada-ui']
+  [data-button][data-style='default']:hover:not(:disabled):not([data-disabled]),
+[data-style='grada-ui'] [data-button]:not([data-style]):hover:not(:disabled):not([data-disabled]) {
+  @apply shadow-md;
+  filter: brightness(1.05);
+}
+
+[data-style='grada-ui']
+  [data-button][data-style='outline']:hover:not(:disabled):not([data-disabled]) {
+  @apply bg-surface-z1;
+}
+
+[data-style='grada-ui']
+  [data-button][data-style='ghost']:hover:not(:disabled):not([data-disabled]) {
+  @apply bg-surface-z1;
+}
+
+/* =============================================================================
+   Focus
+   ============================================================================= */
+
+[data-style='grada-ui'] [data-button]:focus-visible {
+  outline: 2px solid var(--gd-primary);
+  outline-offset: 2px;
+}

package/src/grada-ui/card.css

@@ -0,0 +1,92 @@
+/**
+ * Card - Grada UI Theme Styles
+ *
+ * Dark surface cards with subtle borders and 3px radius.
+ */
+
+[data-style='grada-ui'] [data-card] {
+  @apply bg-none border text-surface-z9;
+  background-color: var(--gd-surface-a);
+  border-color: var(--gd-grey-a);
+  border-radius: 3px;
+}
+
+[data-style='grada-ui'] [data-card][data-card-interactive] {
+  cursor: pointer;
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
+}
+
+[data-style='grada-ui'] [data-card][data-card-interactive]:hover {
+  @apply shadow-md;
+  border-color: var(--gd-primary);
+}
+
+[data-style='grada-ui'] [data-card][data-card-interactive]:active {
+  @apply shadow-sm;
+}
+
+/* =============================================================================
+   Card Sections
+   ============================================================================= */
+
+[data-style='grada-ui'] [data-card-header] {
+  border-bottom: 1px solid var(--gd-grey-a);
+}
+
+[data-style='grada-ui'] [data-card-body] {
+  @apply text-surface-z8;
+}
+
+[data-style='grada-ui'] [data-card-footer] {
+  @apply text-surface-z7;
+  border-top: 1px solid var(--gd-grey-a);
+}
+
+/* =============================================================================
+   Focus States
+   ============================================================================= */
+
+[data-style='grada-ui'] [data-card][data-card-interactive]:focus-visible {
+  outline: 2px solid var(--gd-primary);
+  outline-offset: 2px;
+}
+
+/* =============================================================================
+   Disabled
+   ============================================================================= */
+
+[data-style='grada-ui'] [data-card][data-card-interactive][data-disabled],
+[data-style='grada-ui'] [data-card][data-card-interactive]:disabled {
+  @apply cursor-not-allowed opacity-50 shadow-none;
+}
+
+/* =============================================================================
+   Variants
+   ============================================================================= */
+
+[data-style='grada-ui'] [data-card][data-variant='primary'] {
+  background: var(--gd-gradient);
+  color: white;
+  border: none;
+}
+
+[data-style='grada-ui'] [data-card][data-variant='primary'] [data-card-header],
+[data-style='grada-ui'] [data-card][data-variant='primary'] [data-card-footer] {
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+[data-style='grada-ui'] [data-card][data-variant='primary'] [data-card-body] {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+[data-style='grada-ui'] [data-card][data-variant='secondary'] {
+  background-color: var(--gd-secondary);
+  color: white;
+  border: none;
+  border-radius: 3px;
+}
+
+[data-style='grada-ui'] [data-card][data-variant='tertiary'] {
+  @apply bg-none bg-surface-z1 border-surface-z3 text-surface-z7 border shadow-none;
+  border-radius: 3px;
+}

package/src/grada-ui/dropdown.css

@@ -0,0 +1,53 @@
+/**
+ * Dropdown - Grada UI Theme Styles
+ */
+
+[data-style='grada-ui'] [data-dropdown-trigger] {
+  @apply bg-white text-surface-z8 border-surface-z4 border;
+  border-radius: 3px;
+}
+
+[data-style='grada-ui'] [data-dropdown-trigger]:hover:not(:disabled) {
+  @apply text-surface-z10 border-surface-z5;
+  border-color: var(--gd-primary);
+}
+
+[data-style='grada-ui'] [data-dropdown-trigger]:focus-visible {
+  outline: 2px solid var(--gd-primary);
+  outline-offset: -2px;
+}
+
+[data-style='grada-ui'] [data-dropdown][data-open='true'] [data-dropdown-trigger] {
+  border-color: var(--gd-primary);
+}
+
+[data-style='grada-ui'] [data-dropdown-trigger] [data-dropdown-icon] {
+  @apply text-surface-z5;
+}
+
+[data-style='grada-ui'] [data-dropdown-trigger] [data-dropdown-arrow] {
+  @apply text-surface-z5;
+}
+
+[data-style='grada-ui'] [data-dropdown-panel] {
+  @apply bg-white border-surface-z3 border shadow-lg;
+  border-radius: 3px;
+}
+
+[data-style='grada-ui'] [data-dropdown-option] {
+  @apply text-surface-z8;
+}
+
+[data-style='grada-ui'] [data-dropdown-option]:hover:not(:disabled),
+[data-style='grada-ui'] [data-dropdown-option]:focus:not(:disabled) {
+  @apply bg-surface-z1 text-surface-z10 outline-none;
+}
+
+[data-style='grada-ui'] [data-dropdown-option][data-active='true'] {
+  background: var(--gd-gradient);
+  color: white;
+}
+
+[data-style='grada-ui'] [data-dropdown-separator] {
+  @apply bg-surface-z3;
+}

package/src/grada-ui/floating-action.css

@@ -0,0 +1,58 @@
+/**
+ * FloatingAction - Grada UI Theme Styles
+ *
+ * Gradient FAB trigger, pill-shaped action items.
+ */
+
+[data-style='grada-ui'] [data-fab-trigger] {
+  background: var(--gd-gradient);
+  color: white;
+  @apply shadow-lg;
+  border-radius: 50%;
+  transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+[data-style='grada-ui'] [data-fab-trigger]:hover:not(:disabled) {
+  filter: brightness(1.1);
+  @apply shadow-xl;
+  transform: scale(1.05);
+}
+
+[data-style='grada-ui'] [data-fab-trigger]:focus-visible {
+  outline: 2px solid var(--gd-primary);
+  outline-offset: 2px;
+}
+
+[data-style='grada-ui'] [data-fab][data-open='true'] [data-fab-trigger] {
+  @apply bg-none bg-surface-z4 text-surface-z10 shadow-lg;
+  background: none;
+  transform: rotate(45deg);
+}
+
+/* FAB Items */
+[data-style='grada-ui'] [data-fab-item] {
+  @apply bg-white text-surface-z8 shadow-md;
+  border-radius: 20px;
+}
+
+[data-style='grada-ui'] [data-fab-item]:hover:not(:disabled) {
+  @apply bg-surface-z1 text-surface-z10 shadow-lg;
+}
+
+[data-style='grada-ui'] [data-fab-item]:focus-visible {
+  outline: 2px solid var(--gd-primary);
+  outline-offset: -2px;
+}
+
+[data-style='grada-ui'] [data-fab-item] [data-fab-item-icon] {
+  color: var(--gd-primary);
+}
+
+[data-style='grada-ui'] [data-fab-item]:hover:not(:disabled) [data-fab-item-icon] {
+  color: var(--gd-secondary);
+}
+
+/* Backdrop */
+[data-style='grada-ui'] [data-fab-backdrop] {
+  background: rgba(0, 0, 0, 0.5);
+}

package/src/grada-ui/floating-navigation.css

@@ -0,0 +1,64 @@
+/**
+ * FloatingNavigation - Grada UI Theme Styles
+ */
+
+[data-style='grada-ui'] [data-floating-nav] {
+  @apply bg-white shadow-xl;
+  border-right: 1px solid var(--gd-grey-a);
+}
+
+[data-style='grada-ui'] [data-floating-nav-title] {
+  @apply text-surface-z6;
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 700;
+  font-size: 0.625rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+[data-style='grada-ui'] [data-floating-nav-pin] {
+  @apply text-surface-z6;
+}
+
+[data-style='grada-ui'] [data-floating-nav-pin]:hover {
+  color: var(--gd-primary);
+}
+
+[data-style='grada-ui'] [data-floating-nav-pin][aria-pressed='true'] {
+  color: var(--gd-primary);
+}
+
+[data-style='grada-ui'] [data-floating-nav-item] {
+  @apply text-surface-z8;
+  border-radius: 3px;
+}
+
+[data-style='grada-ui'] [data-floating-nav-item]:hover {
+  @apply bg-surface-z1 text-surface-z10;
+}
+
+[data-style='grada-ui'] [data-floating-nav-item][data-active] {
+  color: var(--gd-primary);
+  background: color-mix(in srgb, var(--gd-primary) 10%, transparent);
+}
+
+[data-style='grada-ui'] [data-floating-nav-item]:focus-visible {
+  outline: 2px solid var(--gd-primary);
+  outline-offset: -2px;
+}
+
+[data-style='grada-ui'] [data-floating-nav-icon] {
+  @apply text-surface-z6;
+}
+
+[data-style='grada-ui'] [data-floating-nav-item]:hover [data-floating-nav-icon] {
+  color: var(--gd-primary);
+}
+
+[data-style='grada-ui'] [data-floating-nav-item][data-active] [data-floating-nav-icon] {
+  color: var(--gd-primary);
+}
+
+[data-style='grada-ui'] [data-floating-nav-indicator] {
+  background: var(--gd-gradient);
+}

package/src/grada-ui/index.css

@@ -0,0 +1,54 @@
+/**
+ * @rokkit/themes - Grada UI Theme
+ *
+ * Coral/purple gradient identity with Montserrat typography.
+ * Clean white form elements, pill buttons, left-border accent states.
+ * Use with data-style="grada-ui" wrapper.
+ */
+
+/* =============================================================================
+   Grada UI Design Tokens
+   ============================================================================= */
+
+[data-style='grada-ui'] {
+  /* Brand colors (from Figma) */
+  --gd-primary: #f27a54;
+  --gd-secondary: #a154f2;
+  --gd-gradient: linear-gradient(to right, #f27a54, #a154f2);
+
+  /* Semantic colors */
+  --gd-success: #6fcf97;
+  --gd-error-border: #cf6f8a;
+  --gd-error-text: #f27474;
+
+  /* Surface palette */
+  --gd-dark: #30363d;
+  --gd-surface-a: #3c444c;
+  --gd-surface-b: #747d88;
+  --gd-grey-c: #cbcfd4;
+
+  /* Typography */
+  font-family: 'Montserrat', sans-serif;
+}
+
+@import './button.css';
+@import './input.css';
+@import './toolbar.css';
+@import './tabs.css';
+@import './toggle.css';
+@import './switch.css';
+@import './list.css';
+@import './tree.css';
+@import './select.css';
+@import './menu.css';
+@import './dropdown.css';
+@import './floating-action.css';
+@import './table.css';
+@import './search-filter.css';
+@import './range.css';
+@import './timeline.css';
+@import './floating-navigation.css';
+@import './toc.css';
+@import './card.css';
+@import './message.css';
+@import './status-list.css';

package/src/grada-ui/input.css

@@ -0,0 +1,155 @@
+/**
+ * Input - Grada UI Theme Styles
+ *
+ * Clean white inputs with 3px radius, accent left border for valid/invalid states,
+ * Montserrat labels.
+ */
+
+/* =============================================================================
+   Base Input
+   ============================================================================= */
+
+[data-style='grada-ui'] [data-input-root] {
+  @apply border-surface-z4 flex items-center border bg-white p-0 transition-all;
+  border-radius: 3px;
+  background-image: none;
+}
+
+[data-style='grada-ui'] [data-input-root]:hover {
+  @apply border-surface-z6;
+}
+
+[data-style='grada-ui'] [data-input-root]:focus-within {
+  border-color: var(--gd-primary);
+  background-image: none;
+  @apply bg-white;
+}
+
+/* Inputs inside wrapper */
+[data-style='grada-ui']
+  [data-input-root]
+  input:not([type='checkbox'], [type='radio'], [type='color']),
+[data-style='grada-ui'] [data-input-root] textarea,
+[data-style='grada-ui'] [data-input-root] select {
+  @apply text-surface-z9 w-full border-none bg-transparent px-3 py-2.5 transition-all outline-none;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+[data-style='grada-ui'] [data-input-root] textarea {
+  @apply resize-vertical min-h-20;
+}
+
+/* Select inside input-root */
+[data-style='grada-ui'] [data-input-root] [data-select-trigger] {
+  @apply text-surface-z9 border-none bg-transparent px-3 shadow-none ring-0 focus:outline-none;
+  border-radius: 3px;
+  font-size: 0.875rem;
+}
+
+[data-style='grada-ui'] [data-input-root] [data-select][data-open='true'] [data-select-trigger] {
+  @apply border-none shadow-none ring-0;
+}
+
+/* =============================================================================
+   Labels
+   ============================================================================= */
+
+[data-style='grada-ui'] [data-field-root] label {
+  @apply text-surface-z6 text-sm font-medium;
+  font-family: 'Montserrat', sans-serif;
+}
+
+[data-style='grada-ui'] [data-form-root] label {
+  @apply text-surface-z6 text-sm;
+  font-family: 'Montserrat', sans-serif;
+}
+
+/* Checkbox fields */
+[data-style='grada-ui'] [data-field-type='checkbox'] [data-field] {
+  @apply flex flex-row items-center gap-2;
+}
+
+[data-style='grada-ui'] [data-field-type='checkbox'] [data-field] > label {
+  @apply text-surface-z7 text-sm;
+}
+
+/* =============================================================================
+   Valid State — 4px left border mint green
+   ============================================================================= */
+
+[data-style='grada-ui'] [data-field-state='pass'] [data-input-root] {
+  border-left: 4px solid var(--gd-success);
+}
+
+/* =============================================================================
+   Invalid / Error State — 4px left border error pink
+   ============================================================================= */
+
+[data-style='grada-ui'] [data-field-state='fail'] [data-input-root] {
+  border-left: 4px solid var(--gd-error-border);
+}
+
+[data-style='grada-ui'] [data-field-state='fail'] label {
+  color: var(--gd-error-text);
+}
+
+/* =============================================================================
+   Disabled State
+   ============================================================================= */
+
+[data-style='grada-ui'] [data-field-disabled] [data-input-root] {
+  @apply border-surface-z3 bg-surface-z1 cursor-not-allowed opacity-60;
+}
+
+/* =============================================================================
+   Info Field
+   ============================================================================= */
+
+[data-style='grada-ui'] [data-field-info] {
+  color: var(--gd-primary);
+}
+
+/* =============================================================================
+   Separator
+   ============================================================================= */
+
+[data-style='grada-ui'] [data-form-separator] {
+  @apply border-surface-z3;
+}
+
+/* =============================================================================
+   Description & Messages
+   ============================================================================= */
+
+[data-style='grada-ui'] [data-description] {
+  @apply text-surface-z5 mt-1 px-1 text-xs;
+}
+
+[data-style='grada-ui'] [data-message] {
+  @apply mt-1 px-1 text-xs;
+  color: var(--gd-error-text);
+}
+
+/* =============================================================================
+   Placeholder
+   ============================================================================= */
+
+[data-style='grada-ui'] [data-input-root] input::placeholder,
+[data-style='grada-ui'] [data-input-root] textarea::placeholder {
+  color: var(--gd-grey-c);
+}
+
+/* =============================================================================
+   Checkbox
+   ============================================================================= */
+
+[data-style='grada-ui'] [data-checkbox-icon] {
+  @apply text-surface-z5 text-lg;
+}
+
+[data-style='grada-ui']
+  [data-checkbox-root][data-variant='custom']:has(input:checked)
+  [data-checkbox-icon] {
+  color: var(--gd-primary);
+}