@rokkit/themes 1.0.3 → 1.0.5

package/src/grada-ui/button.css

@@ -1,249 +0,0 @@
-/**
- * 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

@@ -1,96 +0,0 @@
-/**
- * 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

@@ -1,34 +0,0 @@
-/**
- * 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

@@ -1,58 +0,0 @@
-/**
- * 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

@@ -1,66 +0,0 @@
-/**
- * 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

@@ -1,69 +0,0 @@
-/**
- * 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;
-}