@rokkit/themes 1.1.15 → 1.1.17

package/dist/frosted/tabs.css

@@ -0,0 +1,61 @@
+/**
+ * Tabs - Glass Theme Styles
+ *
+ * Glassmorphism styling with blur and transparency.
+ */
+
+/* =============================================================================
+   Tab List
+   ============================================================================= */
+
+[data-style='frosted'] [data-tabs-list] {
+  border-width:0px;border-bottom-width:1px;border-top-left-radius:0.5rem;border-top-right-radius:0.5rem;padding-left:0;padding-right:0;--un-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
+  background-color: color-mix(in oklch, var(--paper-soft) 70%, transparent);
+  border-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
+}
+
+[data-style='frosted'] [data-tabs][data-position='after'] [data-tabs-list] {
+  border-top-width:1px;border-bottom-width:0px;border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0.5rem;border-bottom-right-radius:0.5rem;
+}
+
+/* =============================================================================
+   Tab Triggers
+   ============================================================================= */
+
+[data-style='frosted'] [data-tabs-trigger] {
+  background-color:transparent;color:var(--ink-soft);
+}
+
+[data-style='frosted'] [data-tabs-trigger]:hover:not(:disabled):not([data-disabled]) {
+  color:var(--ink-mute);
+  background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
+}
+
+/* Selected state */
+[data-style='frosted'] [data-tabs-trigger][data-selected] {
+  border-width:1px;border-color:color-mix(in srgb, var(--color-primary) calc(0.5 * 100%), transparent);background-color:color-mix(in srgb, var(--color-primary) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--primary);
+}
+
+/* =============================================================================
+   Tab Icon
+   ============================================================================= */
+
+[data-style='frosted'] [data-tabs-trigger] [data-tabs-icon] {
+  color:var(--ink-soft);
+}
+
+[data-style='frosted'] [data-tabs-trigger]:hover:not(:disabled) [data-tabs-icon] {
+  color:var(--ink-mute);
+}
+
+[data-style='frosted'] [data-tabs-trigger][data-selected] [data-tabs-icon] {
+  color:var(--primary);
+}
+
+/* =============================================================================
+   Tab Panel
+   ============================================================================= */
+
+[data-style='frosted'] [data-tabs-content] {
+  color:var(--ink-mute);
+}

package/dist/frosted/timeline.css

@@ -0,0 +1,46 @@
+/**
+ * Timeline - Glass Theme Styles
+ *
+ * Glassmorphism styling with blur and transparency.
+ */
+
+/* =============================================================================
+   Circle
+   ============================================================================= */
+
+[data-style='frosted'] [data-timeline-circle] {
+  color:var(--ink-soft);
+  border-color: color-mix(in oklch, var(--ink-soft) 30%, transparent);
+}
+
+[data-style='frosted'] [data-timeline-item][data-completed] [data-timeline-circle] {
+  border-color:color-mix(in srgb, var(--color-primary) calc(0.5 * 100%), transparent);background-color:color-mix(in srgb, var(--color-primary) calc(0.8 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--on-primary);
+}
+
+[data-style='frosted'] [data-timeline-item][data-active] [data-timeline-circle] {
+  border-color:color-mix(in srgb, var(--color-primary) calc(0.6 * 100%), transparent);--un-ring-width:3px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-color:color-mix(in srgb, var(--color-primary) calc(0.15 * 100%), transparent);color:var(--primary);
+}
+
+/* =============================================================================
+   Connector
+   ============================================================================= */
+
+[data-style='frosted'] [data-timeline-connector] {
+  background-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
+}
+
+[data-style='frosted'] [data-timeline-item][data-completed] [data-timeline-connector] {
+  background-color:color-mix(in srgb, var(--color-primary) calc(0.4 * 100%), transparent);
+}
+
+/* =============================================================================
+   Body
+   ============================================================================= */
+
+[data-style='frosted'] [data-timeline-title] {
+  color:var(--ink-mute);
+}
+
+[data-style='frosted'] [data-timeline-description] {
+  color:var(--ink-soft);
+}

package/dist/frosted/toc.css

@@ -0,0 +1,19 @@
+/* TableOfContents — Glass theme */
+
+[data-style='frosted'] [data-toc] [data-toc-label] {
+  color:var(--ink-soft);
+}
+
+[data-style='frosted'] [data-toc] [data-toc-item] {
+  color:var(--ink-mute);
+}
+
+[data-style='frosted'] [data-toc] [data-toc-item]:hover,
+[data-style='frosted'] [data-toc] [data-toc-item][data-toc-focused] {
+  outline:2px solid transparent;outline-offset:2px;color:var(--ink);
+  background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
+}
+
+[data-style='frosted'] [data-toc] [data-toc-item][data-toc-active] {
+  color:var(--primary);border-left-color:var(--primary);
+}

package/dist/frosted/toggle.css

@@ -0,0 +1,77 @@
+/**
+ * Toggle - Glass Theme Styles
+ *
+ * Glassmorphism styling with blur and transparency.
+ */
+
+/* =============================================================================
+   Toggle Container
+   ============================================================================= */
+
+[data-style='frosted'] [data-toggle] {
+  border-width:1px;border-radius:0.5rem;--un-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
+  background-color: color-mix(in oklch, var(--paper-soft) 70%, transparent);
+  border-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
+}
+
+/* =============================================================================
+   Toggle Options
+   ============================================================================= */
+
+[data-style='frosted'] [data-toggle-option] {
+  color:var(--ink-soft);
+}
+
+[data-style='frosted'] [data-toggle-option]:hover:not(:disabled):not([data-disabled='true']),
+[data-style='frosted'] [data-toggle-option]:focus:not(:disabled):not([data-disabled='true']) {
+  color:var(--ink-mute);
+  background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
+}
+
+/* Selected state */
+[data-style='frosted'] [data-toggle-option][data-selected='true'] {
+  border-width:1px;border-color:color-mix(in srgb, var(--color-primary) calc(0.5 * 100%), transparent);background-color:color-mix(in srgb, var(--color-primary) calc(0.4 * 100%), transparent);--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);color:var(--primary);
+}
+
+/* =============================================================================
+   Toggle Icon
+   ============================================================================= */
+
+[data-style='frosted'] [data-toggle-option] [data-toggle-icon] {
+  color:var(--ink-soft);
+}
+
+[data-style='frosted'] [data-toggle-option]:hover:not(:disabled) [data-toggle-icon],
+[data-style='frosted'] [data-toggle-option]:focus:not(:disabled) [data-toggle-icon] {
+  color:var(--ink-mute);
+}
+
+[data-style='frosted'] [data-toggle-option][data-selected='true'] [data-toggle-icon] {
+  color:var(--primary);
+}
+
+/* =============================================================================
+   Button Variant — single cycling control (variant-agnostic color)
+   Higher specificity than the [data-toggle] container rule above, so it
+   neutralises the group-pill chrome and gives the single button the same
+   flipping icon treatment an unselected option gets.
+   ============================================================================= */
+
+[data-style='frosted'] [data-toggle][data-toggle-variant='button'] {
+  border-color:transparent;background-color:transparent;color:var(--ink-soft);
+  background-image: none;
+}
+
+[data-style='frosted'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled):not([data-toggle-disabled='true']),
+[data-style='frosted'] [data-toggle][data-toggle-variant='button']:focus-visible:not(:disabled):not([data-toggle-disabled='true']) {
+  background-color:var(--paper-mute);color:var(--ink-mute);
+}
+
+[data-style='frosted'] [data-toggle][data-toggle-variant='button'] [data-toggle-icon] {
+  color:var(--ink-soft);
+}
+
+[data-style='frosted'] [data-toggle][data-toggle-variant='button']:hover:not(:disabled) [data-toggle-icon],
+[data-style='frosted'] [data-toggle][data-toggle-variant='button']:focus-visible:not(:disabled) [data-toggle-icon] {
+  color:var(--ink-mute);
+}

package/dist/frosted/toolbar.css

@@ -0,0 +1,92 @@
+/**
+ * Toolbar - Glass Theme Styles
+ *
+ * Glassmorphism styling with blur and transparency.
+ */
+
+/* =============================================================================
+   Toolbar Container
+   ============================================================================= */
+
+[data-style='frosted'] [data-toolbar] {
+  --un-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);
+  background-color: color-mix(in oklch, var(--paper-soft) 70%, transparent);
+}
+
+/* Position-based borders */
+[data-style='frosted'] [data-toolbar][data-toolbar-position='top'],
+[data-style='frosted'] [data-toolbar]:not([data-toolbar-position]) {
+  border-bottom-width:1px;
+  border-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
+}
+
+[data-style='frosted'] [data-toolbar][data-toolbar-position='bottom'] {
+  border-top-width:1px;
+  border-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
+}
+
+[data-style='frosted'] [data-toolbar][data-toolbar-position='left'] {
+  border-right-width:1px;
+  border-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
+}
+
+[data-style='frosted'] [data-toolbar][data-toolbar-position='right'] {
+  border-left-width:1px;
+  border-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
+}
+
+/* =============================================================================
+   Toolbar Items
+   ============================================================================= */
+
+[data-style='frosted'] [data-toolbar-item] {
+  color:var(--ink-mute);
+}
+
+[data-style='frosted'] [data-toolbar-item]:hover:not(:disabled):not([data-disabled='true']) {
+  color:var(--ink);
+  background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
+}
+
+[data-style='frosted'] [data-toolbar-item]:focus-visible:not(:disabled):not([data-disabled='true']) {
+  outline:2px solid transparent;outline-offset:2px;--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);color:var(--ink);
+  --un-ring-color: color-mix(in oklch, var(--ink-soft) 40%, transparent);
+  background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
+}
+
+/* Active/pressed state */
+[data-style='frosted'] [data-toolbar-item][data-active='true'] {
+  background-color:color-mix(in srgb, var(--color-primary) calc(0.3 * 100%), transparent);color:var(--primary);
+}
+
+[data-style='frosted'] [data-toolbar-item][data-active='true']:hover:not(:disabled) {
+  background-color:color-mix(in srgb, var(--color-primary) calc(0.4 * 100%), transparent);color:var(--primary);
+}
+
+/* =============================================================================
+   Toolbar Icon
+   ============================================================================= */
+
+[data-style='frosted'] [data-toolbar-item] [data-toolbar-icon] {
+  color:var(--ink-soft);
+}
+
+[data-style='frosted'] [data-toolbar-item]:hover:not(:disabled) [data-toolbar-icon] {
+  color:var(--ink);
+}
+
+[data-style='frosted'] [data-toolbar-item][data-active='true'] [data-toolbar-icon] {
+  color:var(--primary);
+}
+
+/* =============================================================================
+   Separator & Divider
+   ============================================================================= */
+
+[data-style='frosted'] [data-toolbar-separator] {
+  background-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
+}
+
+[data-style='frosted'] [data-toolbar-divider] {
+  background-color: color-mix(in oklch, var(--ink-soft) 20%, transparent);
+}

package/dist/frosted/tooltip.css

@@ -0,0 +1,7 @@
+/**
+ * Tooltip - Glass Theme Styles
+ */
+
+[data-style='frosted'] [data-tooltip-content] {
+  background-color:var(--ink);color:var(--paper);
+}

package/dist/frosted/tree.css

@@ -0,0 +1,115 @@
+/**
+ * Tree - Glass Theme Styles
+ *
+ * Glassmorphism styling with blur and transparency.
+ */
+
+/* =============================================================================
+   Tree Container
+   ============================================================================= */
+
+[data-style='frosted'] [data-tree]:focus-within {
+  border-radius:0.25rem;--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
+  --un-ring-color: color-mix(in oklch, var(--ink-soft) 40%, transparent);
+}
+
+/* =============================================================================
+   Tree Toggle Button
+   ============================================================================= */
+
+[data-style='frosted'] [data-tree-toggle-btn] {
+  color:var(--ink-soft);
+}
+
+[data-style='frosted'] [data-tree-toggle-btn]:hover {
+  color:var(--ink-mute);
+  background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
+}
+
+/* =============================================================================
+   Tree Item Content
+   ============================================================================= */
+
+[data-style='frosted'] [data-tree-item-content] {
+  color:var(--ink-mute);
+}
+
+[data-style='frosted'] [data-tree-item-content]:hover:not(:disabled),
+[data-style='frosted'] [data-tree-item-content]:focus:not(:disabled) {
+  outline:2px solid transparent;outline-offset:2px;color:var(--ink);
+  background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
+}
+
+/* Focus visible for keyboard navigation */
+[data-style='frosted'] [data-tree-item-content]:focus-visible {
+  outline:2px solid transparent;outline-offset:2px;--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
+  --un-ring-color: color-mix(in oklch, var(--ink-soft) 40%, transparent);
+}
+
+/* Active/selected state */
+[data-style='frosted'] [data-tree-item-content][data-active='true'] {
+  background-color:color-mix(in srgb, var(--color-primary) calc(0.3 * 100%), transparent);color:var(--primary);
+}
+
+[data-style='frosted'] [data-tree-item-content][data-active='true']:hover:not(:disabled) {
+  background-color:color-mix(in srgb, var(--color-primary) calc(0.4 * 100%), transparent);
+}
+
+/* =============================================================================
+   Item Elements
+   ============================================================================= */
+
+[data-style='frosted'] [data-tree-item-content] [data-item-icon] {
+  color:var(--ink-soft);
+}
+
+[data-style='frosted'] [data-tree-item-content]:hover:not(:disabled) [data-item-icon] {
+  color:var(--ink-mute);
+}
+
+[data-style='frosted'] [data-tree-item-content][data-active='true'] [data-item-icon] {
+  color:var(--primary);
+}
+
+[data-style='frosted'] [data-tree-item-content] [data-item-description] {
+  color:var(--ink-soft);
+}
+
+[data-style='frosted'] [data-tree-item-content][data-active='true'] [data-item-description] {
+  color:var(--primary);
+}
+
+[data-style='frosted'] [data-tree-item-content] [data-item-badge] {
+  color:var(--ink-soft);
+  background-color: color-mix(in oklch, var(--paper-mute) 15%, transparent);
+}
+
+[data-style='frosted'] [data-tree-item-content][data-active='true'] [data-item-badge] {
+  background-color:color-mix(in srgb, var(--color-primary) calc(0.25 * 100%), transparent);color:var(--primary);
+}
+
+/* =============================================================================
+   Multi-Selection
+   ============================================================================= */
+
+[data-style='frosted'] [data-tree-node][data-selected='true'] [data-tree-node-row] {
+  background-color:color-mix(in srgb, var(--color-primary) calc(0.2 * 100%), transparent);
+}
+
+[data-style='frosted']
+  [data-tree]:focus-within
+  [data-tree-node][data-selected='true']
+  [data-tree-node-row] {
+  background-color:color-mix(in srgb, var(--color-primary) calc(0.3 * 100%), transparent);
+}
+
+[data-style='frosted'] [data-tree-node][data-selected='true'] [data-tree-item-content] {
+  color:var(--primary);
+}
+
+[data-style='frosted']
+  [data-tree-node][data-selected='true']
+  [data-tree-item-content]
+  [data-item-icon] {
+  color:var(--primary);
+}