@rokkit/themes 1.0.0-next.99 → 1.0.2

package/src/grada-ui/button.css

@@ -0,0 +1,249 @@
+/**
+ * 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-surface-z2 text-surface-z8 bg-none 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-image: linear-gradient(
+    to right,
+    rgba(var(--color-primary-500), 1),
+    rgba(var(--color-secondary-500), 1)
+  );
+  background-color: transparent;
+  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'] {
+  @apply bg-secondary-z5 shadow-md;
+  color: white;
+  border-radius: 20px;
+}
+
+[data-style='grada-ui'] [data-button][data-style='default'][data-variant='accent'],
+[data-style='grada-ui'] [data-button]:not([data-style])[data-variant='accent'] {
+  @apply bg-accent-z5 shadow-md;
+  color: white;
+  border-radius: 20px;
+}
+
+[data-style='grada-ui'] [data-button][data-style='default'][data-variant='danger'],
+[data-style='grada-ui'] [data-button]:not([data-style])[data-variant='danger'] {
+  @apply bg-danger-z5 shadow-md;
+  color: white;
+  border-radius: 20px;
+}
+
+/* =============================================================================
+   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'] {
+  @apply border-primary-z5 text-primary-z5 border-2 bg-transparent;
+  border-radius: 20px;
+}
+
+[data-style='grada-ui'] [data-button][data-style='outline'][data-variant='secondary'] {
+  @apply border-secondary-z5 text-secondary-z5 border-2 bg-transparent;
+  border-radius: 20px;
+}
+
+[data-style='grada-ui'] [data-button][data-style='outline'][data-variant='accent'] {
+  @apply border-accent-z5 text-accent-z5 border-2 bg-transparent;
+  border-radius: 20px;
+}
+
+[data-style='grada-ui'] [data-button][data-style='outline'][data-variant='danger'] {
+  @apply border-danger-z5 text-danger-z5 border-2 bg-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'] {
+  @apply text-primary-z5;
+}
+
+[data-style='grada-ui'] [data-button][data-style='ghost'][data-variant='secondary'] {
+  @apply text-secondary-z5;
+}
+
+[data-style='grada-ui'] [data-button][data-style='ghost'][data-variant='accent'] {
+  @apply text-accent-z5;
+}
+
+[data-style='grada-ui'] [data-button][data-style='ghost'][data-variant='danger'] {
+  @apply text-danger-z5;
+}
+
+/* =============================================================================
+   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-image: linear-gradient(
+    to right,
+    rgba(var(--color-primary-500), 1),
+    rgba(var(--color-secondary-500), 1)
+  );
+  background-color: transparent;
+  color: white;
+  border-radius: 20px;
+  @apply shadow-md;
+}
+
+[data-style='grada-ui'] [data-button][data-style='gradient'][data-variant='accent'] {
+  background-image: linear-gradient(
+    to right,
+    rgba(var(--color-accent-500), 1),
+    rgba(var(--color-accent-400), 1)
+  );
+  background-color: transparent;
+  color: white;
+  border-radius: 20px;
+  @apply shadow-md;
+}
+
+[data-style='grada-ui'] [data-button][data-style='gradient'][data-variant='danger'] {
+  @apply bg-danger-z5 shadow-md;
+  color: white;
+  border-radius: 20px;
+}
+
+/* =============================================================================
+   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'] {
+  @apply text-primary-z5;
+}
+
+[data-style='grada-ui'] [data-button][data-style='link'][data-variant='secondary'] {
+  @apply text-secondary-z5;
+}
+
+[data-style='grada-ui'] [data-button][data-style='link'][data-variant='accent'] {
+  @apply text-accent-z5;
+}
+
+[data-style='grada-ui'] [data-button][data-style='link'][data-variant='danger'] {
+  @apply text-danger-z5;
+}
+
+/* =============================================================================
+   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 {
+  @apply outline-primary-z5 outline outline-2 outline-offset-2;
+}
+
+/* =============================================================================
+   Button Group — override pill radius for connected appearance
+   ============================================================================= */
+
+[data-style='grada-ui'] [data-button-group] [data-button] {
+  border-radius: 0;
+}
+
+[data-style='grada-ui'] [data-button-group] [data-button]:first-child {
+  border-top-left-radius: 20px;
+  border-bottom-left-radius: 20px;
+}
+
+[data-style='grada-ui'] [data-button-group] [data-button]:last-child {
+  border-top-right-radius: 20px;
+  border-bottom-right-radius: 20px;
+}

package/src/grada-ui/card.css

@@ -0,0 +1,96 @@
+/**
+ * Card - Grada UI Theme Styles
+ *
+ * Dark surface cards with subtle borders and 3px radius.
+ */
+
+[data-style='grada-ui'] [data-card] {
+  @apply bg-surface-z2 border-surface-z4 text-surface-z9 border;
+  background-image: none;
+  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 border-primary-z5 shadow-md;
+}
+
+[data-style='grada-ui'] [data-card][data-card-interactive]:active {
+  @apply shadow-sm;
+}
+
+/* =============================================================================
+   Card Sections
+   ============================================================================= */
+
+[data-style='grada-ui'] [data-card-header] {
+  @apply border-surface-z4;
+  border-bottom-width: 1px;
+}
+
+[data-style='grada-ui'] [data-card-body] {
+  @apply text-surface-z8;
+}
+
+[data-style='grada-ui'] [data-card-footer] {
+  @apply text-surface-z7 border-surface-z4;
+  border-top-width: 1px;
+}
+
+/* =============================================================================
+   Focus States
+   ============================================================================= */
+
+[data-style='grada-ui'] [data-card][data-card-interactive]:focus-visible {
+  @apply outline-primary-z5 outline outline-2 outline-offset-2;
+}
+
+/* =============================================================================
+   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'] {
+  @apply from-primary-z5 to-secondary-z5 text-surface-z1 border-0;
+  background-image: linear-gradient(
+    to right,
+    rgba(var(--color-primary-500), 1),
+    rgba(var(--color-secondary-500), 1)
+  );
+  background-color: transparent;
+  border-radius: 3px;
+}
+
+[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'] {
+  @apply bg-secondary-z5 text-surface-z1 border-0;
+  background-image: none;
+  border-radius: 3px;
+}
+
+[data-style='grada-ui'] [data-card][data-variant='tertiary'] {
+  @apply bg-surface-z1 border-surface-z3 text-surface-z7 border bg-none shadow-none;
+  border-radius: 3px;
+}

package/src/grada-ui/chart.css

@@ -0,0 +1,34 @@
+/**
+ * Chart - Grada UI Theme Styles
+ */
+
+[data-style='grada-ui'] [data-chart-axis-line],
+[data-style='grada-ui'] [data-chart-tick] line {
+  @apply stroke-surface-z3;
+}
+
+[data-style='grada-ui'] [data-chart-tick-label] {
+  @apply fill-surface-z5;
+}
+
+[data-style='grada-ui'] [data-chart-grid-line] {
+  @apply stroke-surface-z3;
+  stroke-opacity: 0.5;
+  stroke-dasharray: 2 4;
+}
+
+[data-style='grada-ui'] [data-chart-legend-label] {
+  @apply fill-surface-z5;
+}
+
+[data-style='grada-ui'] [data-chart-legend-item]:hover {
+  @apply text-surface-z8;
+}
+
+[data-style='grada-ui'] [data-plot-element='bar'][data-dimmed],
+[data-style='grada-ui'] [data-plot-element='point'][data-dimmed],
+[data-style='grada-ui'] [data-plot-element='arc'][data-dimmed],
+[data-style='grada-ui'] [data-plot-element='line'][data-dimmed],
+[data-style='grada-ui'] [data-plot-element='area'][data-dimmed] {
+  opacity: 0.15;
+}

package/src/grada-ui/dropdown.css

@@ -0,0 +1,58 @@
+/**
+ * Dropdown - Grada UI Theme Styles
+ */
+
+[data-style='grada-ui'] [data-dropdown-trigger] {
+  @apply text-surface-z8 border-surface-z4 border bg-white;
+  border-radius: 3px;
+}
+
+[data-style='grada-ui'] [data-dropdown-trigger]:hover:not(:disabled) {
+  @apply text-surface-z10 border-surface-z5;
+  border-color: rgba(var(--color-primary-500), 1);
+}
+
+[data-style='grada-ui'] [data-dropdown-trigger]:focus-visible {
+  outline: 2px solid rgba(var(--color-primary-500), 1);
+  outline-offset: -2px;
+}
+
+[data-style='grada-ui'] [data-dropdown][data-open='true'] [data-dropdown-trigger] {
+  border-color: rgba(var(--color-primary-500), 1);
+}
+
+[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 border-surface-z3 border bg-white 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-image: linear-gradient(
+    to right,
+    rgba(var(--color-primary-500), 1),
+    rgba(var(--color-secondary-500), 1)
+  );
+  background-color: transparent;
+  color: white;
+}
+
+[data-style='grada-ui'] [data-dropdown-separator] {
+  @apply bg-surface-z3;
+}

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

@@ -0,0 +1,66 @@
+/**
+ * FloatingAction - Grada UI Theme Styles
+ *
+ * Gradient FAB trigger, pill-shaped action items.
+ */
+
+[data-style='grada-ui'] [data-fab-trigger] {
+  background-image: linear-gradient(
+    to right,
+    rgba(var(--color-primary-500), 1),
+    rgba(var(--color-secondary-500), 1)
+  );
+  background-color: transparent;
+  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 rgba(var(--color-primary-500), 1);
+  outline-offset: 2px;
+}
+
+[data-style='grada-ui'] [data-fab][data-open='true'] [data-fab-trigger] {
+  @apply bg-surface-z4 text-surface-z10 bg-none shadow-lg;
+  background: none;
+  transform: rotate(45deg);
+}
+
+/* FAB Items */
+[data-style='grada-ui'] [data-fab-item] {
+  @apply text-surface-z8 bg-white 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 rgba(var(--color-primary-500), 1);
+  outline-offset: -2px;
+}
+
+[data-style='grada-ui'] [data-fab-item] [data-fab-item-icon] {
+  color: rgba(var(--color-primary-500), 1);
+}
+
+[data-style='grada-ui'] [data-fab-item]:hover:not(:disabled) [data-fab-item-icon] {
+  color: rgba(var(--color-secondary-500), 1);
+}
+
+/* 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,69 @@
+/**
+ * FloatingNavigation - Grada UI Theme Styles
+ */
+
+[data-style='grada-ui'] [data-floating-nav] {
+  @apply bg-white shadow-xl;
+  border-right: 1px solid rgba(var(--color-surface-z300), 1);
+}
+
+[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: rgba(var(--color-primary-500), 1);
+}
+
+[data-style='grada-ui'] [data-floating-nav-pin][aria-pressed='true'] {
+  color: rgba(var(--color-primary-500), 1);
+}
+
+[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: rgba(var(--color-primary-500), 1);
+  background: rgba(var(--color-primary-500), 0.1);
+}
+
+[data-style='grada-ui'] [data-floating-nav-item]:focus-visible {
+  outline: 2px solid rgba(var(--color-primary-500), 1);
+  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: rgba(var(--color-primary-500), 1);
+}
+
+[data-style='grada-ui'] [data-floating-nav-item][data-active] [data-floating-nav-icon] {
+  color: rgba(var(--color-primary-500), 1);
+}
+
+[data-style='grada-ui'] [data-floating-nav-indicator] {
+  background-image: linear-gradient(
+    to right,
+    rgba(var(--color-primary-500), 1),
+    rgba(var(--color-secondary-500), 1)
+  );
+  background-color: transparent;
+}

package/src/grada-ui/index.css

@@ -0,0 +1,56 @@
+/**
+ * @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';
+@import './step-indicator.css';
+@import './chart.css';