@rokkit/themes 1.0.0-next.14 → 1.0.0-next.140

package/src/glass/toolbar.css

@@ -0,0 +1,84 @@
+/**
+ * Toolbar - Glass Theme Styles
+ *
+ * Glassmorphism styling with blur and transparency.
+ */
+
+/* =============================================================================
+   Toolbar Container
+   ============================================================================= */
+
+[data-style='glass'] [data-toolbar] {
+  @apply bg-surface-z1/70 backdrop-blur-md;
+}
+
+/* Position-based borders */
+[data-style='glass'] [data-toolbar][data-toolbar-position='top'],
+[data-style='glass'] [data-toolbar]:not([data-toolbar-position]) {
+  @apply border-surface-z5/20 border-b;
+}
+
+[data-style='glass'] [data-toolbar][data-toolbar-position='bottom'] {
+  @apply border-surface-z5/20 border-t;
+}
+
+[data-style='glass'] [data-toolbar][data-toolbar-position='left'] {
+  @apply border-surface-z5/20 border-r;
+}
+
+[data-style='glass'] [data-toolbar][data-toolbar-position='right'] {
+  @apply border-surface-z5/20 border-l;
+}
+
+/* =============================================================================
+   Toolbar Items
+   ============================================================================= */
+
+[data-style='glass'] [data-toolbar-item] {
+  @apply text-surface-z7;
+}
+
+[data-style='glass'] [data-toolbar-item]:hover:not(:disabled):not([data-disabled='true']) {
+  @apply text-surface-z10 bg-surface-z2/15;
+}
+
+[data-style='glass'] [data-toolbar-item]:focus-visible:not(:disabled):not([data-disabled='true']) {
+  @apply text-surface-z10 ring-surface-z5/40 bg-surface-z2/15 ring-1 outline-none;
+}
+
+/* Active/pressed state */
+[data-style='glass'] [data-toolbar-item][data-active='true'] {
+  @apply bg-primary-z5/30 text-primary-z9;
+}
+
+[data-style='glass'] [data-toolbar-item][data-active='true']:hover:not(:disabled) {
+  @apply bg-primary-z5/40 text-primary-z10;
+}
+
+/* =============================================================================
+   Toolbar Icon
+   ============================================================================= */
+
+[data-style='glass'] [data-toolbar-item] [data-toolbar-icon] {
+  @apply text-surface-z6;
+}
+
+[data-style='glass'] [data-toolbar-item]:hover:not(:disabled) [data-toolbar-icon] {
+  @apply text-surface-z9;
+}
+
+[data-style='glass'] [data-toolbar-item][data-active='true'] [data-toolbar-icon] {
+  @apply text-primary-z7;
+}
+
+/* =============================================================================
+   Separator & Divider
+   ============================================================================= */
+
+[data-style='glass'] [data-toolbar-separator] {
+  @apply bg-surface-z5/20;
+}
+
+[data-style='glass'] [data-toolbar-divider] {
+  @apply bg-surface-z5/20;
+}

package/src/glass/tree.css

@@ -0,0 +1,110 @@
+/**
+ * Tree - Glass Theme Styles
+ *
+ * Glassmorphism styling with blur and transparency.
+ */
+
+/* =============================================================================
+   Tree Container
+   ============================================================================= */
+
+[data-style='glass'] [data-tree]:focus-within {
+  @apply ring-surface-z5/40 rounded ring-1;
+}
+
+/* =============================================================================
+   Tree Toggle Button
+   ============================================================================= */
+
+[data-style='glass'] [data-tree-toggle-btn] {
+  @apply text-surface-z5;
+}
+
+[data-style='glass'] [data-tree-toggle-btn]:hover {
+  @apply text-surface-z7 bg-surface-z2/15;
+}
+
+/* =============================================================================
+   Tree Item Content
+   ============================================================================= */
+
+[data-style='glass'] [data-tree-item-content] {
+  @apply text-surface-z8;
+}
+
+[data-style='glass'] [data-tree-item-content]:hover:not(:disabled),
+[data-style='glass'] [data-tree-item-content]:focus:not(:disabled) {
+  @apply text-surface-z10 bg-surface-z2/15 outline-none;
+}
+
+/* Focus visible for keyboard navigation */
+[data-style='glass'] [data-tree-item-content]:focus-visible {
+  @apply ring-surface-z5/40 ring-1 outline-none;
+}
+
+/* Active/selected state */
+[data-style='glass'] [data-tree-item-content][data-active='true'] {
+  @apply bg-primary-z5/30 text-primary-z9;
+}
+
+[data-style='glass'] [data-tree-item-content][data-active='true']:hover:not(:disabled) {
+  @apply bg-primary-z5/40;
+}
+
+/* =============================================================================
+   Item Elements
+   ============================================================================= */
+
+[data-style='glass'] [data-tree-item-content] [data-item-icon] {
+  @apply text-surface-z5;
+}
+
+[data-style='glass'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
+  @apply text-surface-z7;
+}
+
+[data-style='glass'] [data-tree-item-content][data-active='true'] [data-item-icon] {
+  @apply text-primary-z6;
+}
+
+[data-style='glass'] [data-tree-item-content] [data-item-description] {
+  @apply text-surface-z5;
+}
+
+[data-style='glass'] [data-tree-item-content][data-active='true'] [data-item-description] {
+  @apply text-primary-z7;
+}
+
+[data-style='glass'] [data-tree-item-content] [data-item-badge] {
+  @apply text-surface-z6 bg-surface-z2/15;
+}
+
+[data-style='glass'] [data-tree-item-content][data-active='true'] [data-item-badge] {
+  @apply text-primary-z8 bg-primary-z5/25;
+}
+
+/* =============================================================================
+   Multi-Selection
+   ============================================================================= */
+
+[data-style='glass'] [data-tree-node][data-selected='true'] [data-tree-node-row] {
+  @apply bg-primary-z5/20;
+}
+
+[data-style='glass']
+  [data-tree]:focus-within
+  [data-tree-node][data-selected='true']
+  [data-tree-node-row] {
+  @apply bg-primary-z5/30;
+}
+
+[data-style='glass'] [data-tree-node][data-selected='true'] [data-tree-item-content] {
+  @apply text-primary-z9;
+}
+
+[data-style='glass']
+  [data-tree-node][data-selected='true']
+  [data-tree-item-content]
+  [data-item-icon] {
+  @apply text-primary-z6;
+}

package/src/index.css

@@ -0,0 +1,18 @@
+/**
+ * @rokkit/themes - Complete Theme Bundle
+ *
+ * Includes base structural styles + all theme variants.
+ * For custom themes, import base only and add your own theme styles.
+ *
+ * Theme Usage:
+ * - rokkit: Default theme (no wrapper needed — gradients + borders)
+ * - minimal: Use data-style="minimal" wrapper (clean + subtle)
+ * - material: Use data-style="material" wrapper (elevation + shadows)
+ * - glass: Use data-style="glass" wrapper (blur + transparency)
+ */
+
+@import './base/index.css';
+@import './rokkit/index.css';
+@import './minimal/index.css';
+@import './material/index.css';
+@import './glass/index.css';

package/src/index.js

@@ -1,2 +1,25 @@
-export * from './utils'
-export * from './constants'
+import { Theme } from '@rokkit/core'
+
+export {
+	Theme,
+	themeRules,
+	shadesOf,
+	semanticShortcuts,
+	contrastShortcuts,
+	iconShortcuts,
+	DEFAULT_ICONS,
+	DEFAULT_THEME_MAPPING,
+	defaultColors
+} from '@rokkit/core'
+
+/**
+ * Generates a UnoCSS `theme.colors` object mapping semantic variant names
+ * to CSS variable-backed color scales.
+ *
+ * @param {Object} [mapping] - Override the default theme variant→color mapping.
+ * @param {Object} [colors]  - Override the default color palette.
+ * @returns {Object} UnoCSS theme colors object.
+ */
+export function themeColors(mapping, colors) {
+	return new Theme({ mapping, colors }).getColorRules()
+}

package/src/material/button.css

@@ -0,0 +1,157 @@
+/**
+ * Button - Material Theme Styles
+ *
+ * Material Design inspired with elevation and shadows.
+ */
+
+/* =============================================================================
+   Default Style (filled)
+   ============================================================================= */
+
+[data-style='material'] [data-button][data-style='default'][data-variant='default'],
+[data-style='material'] [data-button]:not([data-style])[data-variant='default'],
+[data-style='material'] [data-button][data-style='default']:not([data-variant]),
+[data-style='material'] [data-button]:not([data-style]):not([data-variant]) {
+  @apply bg-surface-z2 text-surface-z8 shadow-sm;
+}
+
+[data-style='material'] [data-button][data-style='default'][data-variant='primary'],
+[data-style='material'] [data-button]:not([data-style])[data-variant='primary'] {
+  @apply bg-primary-z5 text-on-primary shadow-md;
+}
+
+[data-style='material'] [data-button][data-style='default'][data-variant='secondary'],
+[data-style='material'] [data-button]:not([data-style])[data-variant='secondary'] {
+  @apply bg-secondary-z4 text-on-secondary shadow-md;
+}
+
+[data-style='material'] [data-button][data-style='default'][data-variant='danger'],
+[data-style='material'] [data-button]:not([data-style])[data-variant='danger'] {
+  @apply bg-danger-z4 text-on-danger shadow-md;
+}
+
+/* =============================================================================
+   Outline Style
+   ============================================================================= */
+
+[data-style='material'] [data-button][data-style='outline'][data-variant='default'],
+[data-style='material'] [data-button][data-style='outline']:not([data-variant]) {
+  @apply border-surface-z4 text-surface-z7 border bg-transparent;
+}
+
+[data-style='material'] [data-button][data-style='outline'][data-variant='primary'] {
+  @apply border-primary-z4 text-primary-z6 border bg-transparent;
+}
+
+[data-style='material'] [data-button][data-style='outline'][data-variant='secondary'] {
+  @apply border-secondary-z4 text-secondary-z6 border bg-transparent;
+}
+
+[data-style='material'] [data-button][data-style='outline'][data-variant='danger'] {
+  @apply border-danger-z4 text-danger-z4 border bg-transparent;
+}
+
+/* =============================================================================
+   Ghost Style
+   ============================================================================= */
+
+[data-style='material'] [data-button][data-style='ghost'] {
+  @apply border-transparent bg-transparent;
+}
+
+[data-style='material'] [data-button][data-style='ghost'][data-variant='default'],
+[data-style='material'] [data-button][data-style='ghost']:not([data-variant]) {
+  @apply text-surface-z7;
+}
+
+[data-style='material'] [data-button][data-style='ghost'][data-variant='primary'] {
+  @apply text-primary-z6;
+}
+
+[data-style='material'] [data-button][data-style='ghost'][data-variant='secondary'] {
+  @apply text-secondary-z6;
+}
+
+[data-style='material'] [data-button][data-style='ghost'][data-variant='danger'] {
+  @apply text-danger-z4;
+}
+
+/* =============================================================================
+   Gradient Style
+   ============================================================================= */
+
+[data-style='material'] [data-button][data-style='gradient'][data-variant='default'],
+[data-style='material'] [data-button][data-style='gradient']:not([data-variant]) {
+  @apply from-surface-z3 to-surface-z1 text-surface-z10 bg-gradient-to-br shadow-md;
+}
+
+[data-style='material'] [data-button][data-style='gradient'][data-variant='primary'] {
+  @apply from-primary-z5 to-primary-z3 text-on-primary bg-gradient-to-br shadow-md;
+}
+
+[data-style='material'] [data-button][data-style='gradient'][data-variant='secondary'] {
+  @apply from-secondary-z5 to-secondary-z3 text-on-secondary bg-gradient-to-br shadow-md;
+}
+
+[data-style='material'] [data-button][data-style='gradient'][data-variant='danger'] {
+  @apply from-danger-z5 to-danger-z3 text-on-danger bg-gradient-to-br shadow-md;
+}
+
+[data-style='material']
+  [data-button][data-style='gradient']:hover:not(:disabled):not([data-disabled]) {
+  filter: brightness(1.08);
+  @apply shadow-lg;
+}
+
+/* =============================================================================
+   Link Style
+   ============================================================================= */
+
+[data-style='material'] [data-button][data-style='link'][data-variant='default'],
+[data-style='material'] [data-button][data-style='link']:not([data-variant]) {
+  @apply text-surface-z7;
+}
+
+[data-style='material'] [data-button][data-style='link'][data-variant='primary'] {
+  @apply text-primary-z6;
+}
+
+[data-style='material'] [data-button][data-style='link'][data-variant='secondary'] {
+  @apply text-secondary-z6;
+}
+
+[data-style='material'] [data-button][data-style='link'][data-variant='danger'] {
+  @apply text-danger-z4;
+}
+
+[data-style='material'] [data-button][data-style='link']:hover:not(:disabled):not([data-disabled]) {
+  @apply text-primary-z7;
+}
+
+/* =============================================================================
+   Hover States
+   ============================================================================= */
+
+[data-style='material']
+  [data-button][data-style='default']:hover:not(:disabled):not([data-disabled]),
+[data-style='material'] [data-button]:not([data-style]):hover:not(:disabled):not([data-disabled]) {
+  @apply shadow-md;
+}
+
+[data-style='material']
+  [data-button][data-style='outline']:hover:not(:disabled):not([data-disabled]) {
+  @apply bg-surface-z1;
+}
+
+[data-style='material']
+  [data-button][data-style='ghost']:hover:not(:disabled):not([data-disabled]) {
+  @apply bg-surface-z2;
+}
+
+/* =============================================================================
+   Focus
+   ============================================================================= */
+
+[data-style='material'] [data-button]:focus-visible {
+  @apply ring-primary-z4 ring-2 ring-offset-2 outline-none;
+}

package/src/material/card.css

@@ -0,0 +1,61 @@
+* Card - Material Theme Styles
+ *
+ * Material Design inspired with elevation and shadows.
+ */
+
+/* =============================================================================
+   Base Card Styles
+   ============================================================================= */
+
+[data-style='material'] [data-card] {
+  @apply bg-surface-z1 border-surface-z4 text-surface-z9 border shadow-sm;
+}
+
+/* Interactive cards (buttons) */
+[data-style='material'] [data-card][data-card-interactive] {
+  cursor: pointer;
+  transition:
+    box-shadow 0.2s ease,
+    transform 0.2s ease;
+}
+
+[data-style='material'] [data-card][data-card-interactive]:hover {
+  @apply shadow-md;
+}
+
+[data-style='material'] [data-card][data-card-interactive]:active {
+  @apply shadow-sm;
+}
+
+/* =============================================================================
+   Card Sections
+   ============================================================================= */
+
+[data-style='material'] [data-card-header] {
+  @apply border-surface-z3 border-b;
+}
+
+[data-style='material'] [data-card-body] {
+  @apply text-surface-z8;
+}
+
+[data-style='material'] [data-card-footer] {
+  @apply border-surface-z3 text-surface-z7 border-t;
+}
+
+/* =============================================================================
+   Focus States
+   ============================================================================= */
+
+[data-style='material'] [data-card][data-card-interactive]:focus-visible {
+  @apply ring-primary-z4 ring-2 ring-offset-2 outline-none;
+}
+
+/* =============================================================================
+   Disabled State
+   ============================================================================= */
+
+[data-style='material'] [data-card][data-card-interactive][data-disabled],
+[data-style='material'] [data-card][data-card-interactive]:disabled {
+  @apply cursor-not-allowed opacity-50 shadow-none;
+}

package/src/material/floating-action.css

@@ -0,0 +1,60 @@
+/**
+ * FloatingAction - Material Theme Styles
+ *
+ * Material Design inspired with elevation and shadows.
+ */
+
+/* =============================================================================
+   FAB Trigger Button
+   ============================================================================= */
+
+[data-style='material'] [data-fab-trigger] {
+  @apply bg-primary-z5 text-white shadow-lg;
+}
+
+[data-style='material'] [data-fab-trigger]:hover:not(:disabled) {
+  @apply bg-primary-z6 shadow-xl;
+  transform: scale(1.05);
+}
+
+[data-style='material'] [data-fab-trigger]:focus-visible {
+  @apply ring-primary-z4 ring-2 ring-offset-2 outline-none;
+}
+
+[data-style='material'] [data-fab][data-open='true'] [data-fab-trigger] {
+  @apply bg-surface-z4 text-surface-z10 shadow-lg;
+  transform: rotate(45deg);
+}
+
+/* =============================================================================
+   FAB Items
+   ============================================================================= */
+
+[data-style='material'] [data-fab-item] {
+  @apply bg-surface-z1 text-surface-z8 shadow-md;
+}
+
+[data-style='material'] [data-fab-item]:hover:not(:disabled) {
+  @apply bg-surface-z2 text-surface-z10 shadow-lg;
+}
+
+[data-style='material'] [data-fab-item]:focus-visible {
+  @apply ring-primary-z4 ring-2 outline-none;
+}
+
+/* Item icon */
+[data-style='material'] [data-fab-item] [data-fab-item-icon] {
+  @apply text-primary-z6;
+}
+
+[data-style='material'] [data-fab-item]:hover:not(:disabled) [data-fab-item-icon] {
+  @apply text-primary-z7;
+}
+
+/* =============================================================================
+   Backdrop
+   ============================================================================= */
+
+[data-style='material'] [data-fab-backdrop] {
+  background: rgba(0, 0, 0, 0.5);
+}

package/src/material/floating-navigation.css

@@ -0,0 +1,74 @@
+/**
+ * FloatingNavigation - Material Theme Styles
+ *
+ * Material Design inspired with elevation and shadows.
+ */
+
+/* =============================================================================
+   Container
+   ============================================================================= */
+
+[data-style='material'] [data-floating-nav] {
+  @apply bg-surface-z1 shadow-xl;
+}
+
+/* =============================================================================
+   Header
+   ============================================================================= */
+
+[data-style='material'] [data-floating-nav-title] {
+  @apply text-surface-z6;
+}
+
+[data-style='material'] [data-floating-nav-pin] {
+  @apply text-surface-z6;
+}
+
+[data-style='material'] [data-floating-nav-pin]:hover {
+  @apply text-primary-z6;
+}
+
+[data-style='material'] [data-floating-nav-pin][aria-pressed='true'] {
+  @apply text-primary-z7;
+}
+
+/* =============================================================================
+   Items
+   ============================================================================= */
+
+[data-style='material'] [data-floating-nav-item] {
+  @apply text-surface-z8;
+}
+
+[data-style='material'] [data-floating-nav-item]:hover {
+  @apply bg-surface-z2 text-surface-z10;
+}
+
+[data-style='material'] [data-floating-nav-item][data-active] {
+  @apply text-primary-z7 bg-primary-z5/10;
+}
+
+[data-style='material'] [data-floating-nav-item]:focus-visible {
+  @apply ring-primary-z4 ring-2 outline-none;
+}
+
+/* Icon */
+[data-style='material'] [data-floating-nav-icon] {
+  @apply text-surface-z6;
+}
+
+[data-style='material'] [data-floating-nav-item]:hover [data-floating-nav-icon] {
+  @apply text-primary-z6;
+}
+
+[data-style='material'] [data-floating-nav-item][data-active] [data-floating-nav-icon] {
+  @apply text-primary-z7;
+}
+
+/* =============================================================================
+   Active Indicator
+   ============================================================================= */
+
+[data-style='material'] [data-floating-nav-indicator] {
+  @apply bg-primary-z5 shadow-sm;
+}

package/src/material/index.css

@@ -0,0 +1,23 @@
+/**
+ * @rokkit/themes - Material Theme
+ *
+ * Material Design inspired styling with elevation shadows and ripple effects.
+ * Use with data-style="material" wrapper.
+ */
+
+@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 './floating-action.css';
+@import './table.css';
+@import './search-filter.css';
+@import './range.css';
+@import './timeline.css';
+@import './floating-navigation.css';