@rokkit/themes 1.1.16 → 1.1.18

package/dist/base/floating-navigation.css

@@ -0,0 +1,405 @@
+/**
+ * FloatingNavigation - Base Structural Styles
+ *
+ * Layout, positioning, transitions, and animations.
+ * No colors, shadows, or visual theming - those belong in theme styles.
+ */
+
+/* =============================================================================
+   Container
+   ============================================================================= */
+
+[data-floating-nav] {
+  position: fixed;
+  z-index: 40;
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+  overflow: hidden;
+  transition:
+    width var(--fn-expand-duration, 300ms) var(--fn-expand-easing, cubic-bezier(0.4, 0, 0.2, 1)),
+    height var(--fn-expand-duration, 300ms) var(--fn-expand-easing, cubic-bezier(0.4, 0, 0.2, 1));
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  [data-floating-nav] {
+    animation: none !important;
+    transition-duration: 0ms !important;
+  }
+  [data-floating-nav] * {
+    animation: none !important;
+    transition-duration: 0ms !important;
+  }
+}
+
+/* =============================================================================
+   Position Variants
+   ============================================================================= */
+
+/* Right edge — vertically centered */
+[data-floating-nav][data-position='right'] {
+  right: 1rem;
+  top: 50%;
+  translate: 0 -50%;
+  border-radius: 0.75rem;
+  animation: fn-slide-in-right 0.5s ease-out 0.5s both;
+}
+
+/* Left edge — vertically centered */
+[data-floating-nav][data-position='left'] {
+  left: 1rem;
+  top: 50%;
+  translate: 0 -50%;
+  border-radius: 0.75rem;
+  animation: fn-slide-in-left 0.5s ease-out 0.5s both;
+}
+
+/* Top edge — horizontally centered */
+[data-floating-nav][data-position='top'] {
+  top: 1rem;
+  left: 50%;
+  translate: -50% 0;
+  flex-direction: row;
+  border-radius: 0.75rem;
+  animation: fn-slide-in-top 0.5s ease-out 0.5s both;
+}
+
+/* Bottom edge — horizontally centered */
+[data-floating-nav][data-position='bottom'] {
+  bottom: 1rem;
+  left: 50%;
+  translate: -50% 0;
+  flex-direction: row;
+  border-radius: 0.75rem;
+  animation: fn-slide-in-bottom 0.5s ease-out 0.5s both;
+}
+
+/* =============================================================================
+   Entrance Animations
+   ============================================================================= */
+
+@keyframes fn-slide-in-right {
+  from {
+    opacity: 0;
+    transform: translateX(4rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes fn-slide-in-left {
+  from {
+    opacity: 0;
+    transform: translateX(-4rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes fn-slide-in-top {
+  from {
+    opacity: 0;
+    transform: translateY(-4rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fn-slide-in-bottom {
+  from {
+    opacity: 0;
+    transform: translateY(4rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* =============================================================================
+   Header (Title + Pin)
+   ============================================================================= */
+
+[data-floating-nav-header] {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  min-height: 2rem;
+}
+
+/* Vertical positions: header above items */
+[data-floating-nav][data-position='left'] [data-floating-nav-header],
+[data-floating-nav][data-position='right'] [data-floating-nav-header] {
+  flex-direction: row;
+  justify-content: center;
+}
+
+/* When expanded, push pin to end */
+[data-floating-nav][data-expanded] [data-floating-nav-header] {
+  justify-content: space-between;
+}
+
+/* Horizontal positions: header before items */
+[data-floating-nav][data-position='top'] [data-floating-nav-header],
+[data-floating-nav][data-position='bottom'] [data-floating-nav-header] {
+  flex-direction: column;
+  justify-content: center;
+}
+
+[data-floating-nav-title] {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity var(--fn-label-duration, 200ms) ease;
+}
+
+[data-floating-nav][data-expanded] [data-floating-nav-title] {
+  opacity: 1;
+}
+
+[data-floating-nav-pin] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  border: none;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  background: transparent;
+  font-size: 0.875rem;
+  flex-shrink: 0;
+  transition: transform 150ms ease;
+}
+
+[data-floating-nav-pin]:hover {
+  transform: scale(1.1);
+}
+
+[data-floating-nav-pin]:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+/* =============================================================================
+   Items Container
+   ============================================================================= */
+
+[data-floating-nav-items] {
+  position: relative;
+  display: flex;
+  padding: 0.25rem;
+  gap: 0.125rem;
+}
+
+/* Vertical layout (left/right positions) */
+[data-floating-nav][data-position='left'] [data-floating-nav-items],
+[data-floating-nav][data-position='right'] [data-floating-nav-items] {
+  flex-direction: column;
+}
+
+/* Horizontal layout (top/bottom positions) */
+[data-floating-nav][data-position='top'] [data-floating-nav-items],
+[data-floating-nav][data-position='bottom'] [data-floating-nav-items] {
+  flex-direction: row;
+}
+
+/* =============================================================================
+   Navigation Items
+   ============================================================================= */
+
+[data-floating-nav-item] {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  border: none;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  white-space: nowrap;
+  text-decoration: none;
+  background: transparent;
+  transition:
+    transform 150ms ease,
+    background-color 150ms ease;
+  animation: fn-item-enter 0.3s ease both;
+  animation-delay: calc(var(--fn-index, 0) * 60ms + 0.6s);
+}
+
+@keyframes fn-item-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+[data-floating-nav-item]:hover {
+  transform: scale(1.02);
+}
+
+[data-floating-nav-item]:active {
+  transform: scale(0.98);
+}
+
+[data-floating-nav-item]:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: -2px;
+  border-radius: 0.5rem;
+}
+
+/* =============================================================================
+   Size Variants — Items
+   ============================================================================= */
+
+/* Small */
+[data-floating-nav][data-size='sm'] [data-floating-nav-item] {
+  min-width: 2rem;
+  min-height: 2rem;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.8125rem;
+}
+
+[data-floating-nav][data-size='sm'] [data-floating-nav-icon] {
+  font-size: 1rem;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+/* Medium (default) */
+[data-floating-nav][data-size='md'] [data-floating-nav-item],
+[data-floating-nav]:not([data-size]) [data-floating-nav-item] {
+  min-width: 2.5rem;
+  min-height: 2.5rem;
+  padding: 0.375rem 0.625rem;
+  font-size: 0.875rem;
+}
+
+[data-floating-nav][data-size='md'] [data-floating-nav-icon],
+[data-floating-nav]:not([data-size]) [data-floating-nav-icon] {
+  font-size: 1.125rem;
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+/* Large */
+[data-floating-nav][data-size='lg'] [data-floating-nav-item] {
+  min-width: 3rem;
+  min-height: 3rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 1rem;
+}
+
+[data-floating-nav][data-size='lg'] [data-floating-nav-icon] {
+  font-size: 1.25rem;
+  width: 1.75rem;
+  height: 1.75rem;
+}
+
+/* =============================================================================
+   Icon & Label
+   ============================================================================= */
+
+[data-floating-nav-icon] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+[data-floating-nav-label] {
+  overflow: hidden;
+  max-width: 0;
+  opacity: 0;
+  transition:
+    max-width var(--fn-expand-duration, 300ms) var(--fn-expand-easing, cubic-bezier(0.4, 0, 0.2, 1)),
+    opacity var(--fn-label-duration, 200ms) ease;
+}
+
+/* Expanded: reveal labels */
+[data-floating-nav][data-expanded] [data-floating-nav-label] {
+  max-width: 12rem;
+  opacity: 1;
+}
+
+/* =============================================================================
+   Active Indicator
+   ============================================================================= */
+
+[data-floating-nav-indicator] {
+  position: absolute;
+  border-radius: 0.25rem;
+  pointer-events: none;
+  transition:
+    top var(--fn-indicator-duration, 300ms) cubic-bezier(0.4, 0, 0.2, 1),
+    left var(--fn-indicator-duration, 300ms) cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Vertical indicator (left/right positions) — bar on the side */
+[data-floating-nav][data-position='left'] [data-floating-nav-indicator] {
+  right: 0;
+  width: 3px;
+  height: 1.5rem;
+  top: calc(var(--fn-active-index, 0) * (2.5rem + 0.125rem) + 0.5rem + 0.25rem);
+}
+
+[data-floating-nav][data-position='right'] [data-floating-nav-indicator] {
+  left: 0;
+  width: 3px;
+  height: 1.5rem;
+  top: calc(var(--fn-active-index, 0) * (2.5rem + 0.125rem) + 0.5rem + 0.25rem);
+}
+
+/* Horizontal indicator (top/bottom positions) — bar on the edge */
+[data-floating-nav][data-position='top'] [data-floating-nav-indicator] {
+  bottom: 0;
+  height: 3px;
+  width: 1.5rem;
+  left: calc(var(--fn-active-index, 0) * (2.5rem + 0.125rem) + 0.5rem + 0.25rem);
+}
+
+[data-floating-nav][data-position='bottom'] [data-floating-nav-indicator] {
+  top: 0;
+  height: 3px;
+  width: 1.5rem;
+  left: calc(var(--fn-active-index, 0) * (2.5rem + 0.125rem) + 0.5rem + 0.25rem);
+}
+
+/* Size adjustments for indicator position */
+[data-floating-nav][data-size='sm'][data-position='left'] [data-floating-nav-indicator],
+[data-floating-nav][data-size='sm'][data-position='right'] [data-floating-nav-indicator] {
+  height: 1.25rem;
+  top: calc(var(--fn-active-index, 0) * (2rem + 0.125rem) + 0.375rem + 0.25rem);
+}
+
+[data-floating-nav][data-size='lg'][data-position='left'] [data-floating-nav-indicator],
+[data-floating-nav][data-size='lg'][data-position='right'] [data-floating-nav-indicator] {
+  height: 1.75rem;
+  top: calc(var(--fn-active-index, 0) * (3rem + 0.125rem) + 0.625rem + 0.25rem);
+}
+
+[data-floating-nav][data-size='sm'][data-position='top'] [data-floating-nav-indicator],
+[data-floating-nav][data-size='sm'][data-position='bottom'] [data-floating-nav-indicator] {
+  width: 1.25rem;
+  left: calc(var(--fn-active-index, 0) * (2rem + 0.125rem) + 0.375rem + 0.25rem);
+}
+
+[data-floating-nav][data-size='lg'][data-position='top'] [data-floating-nav-indicator],
+[data-floating-nav][data-size='lg'][data-position='bottom'] [data-floating-nav-indicator] {
+  width: 1.75rem;
+  left: calc(var(--fn-active-index, 0) * (3rem + 0.125rem) + 0.625rem + 0.25rem);
+}

package/dist/base/frame.css

@@ -0,0 +1,36 @@
+/**
+ * Frame — base structural styles.
+ *
+ * Layout / spacing only. Per-theme files (zen-sumi/frame.css,
+ * material/frame.css, …) add the visual decoration (border, background,
+ * shadow) using the same `[data-frame-*]` hooks.
+ */
+
+[data-frame] {
+	display: flex;
+	flex-direction: column;
+	border-radius: var(--density-radius-base);
+	overflow: hidden;
+}
+
+[data-frame-header] {
+	padding-block: var(--density-spacing-sm);
+	padding-inline: var(--density-spacing-md);
+}
+
+[data-frame-body] {
+	padding: var(--density-spacing-md);
+	flex: 1;
+	min-height: 0;
+}
+
+/* Artifacts that own their padding (charts, <pre> blocks, tables) opt
+ * out of the body padding via `flush`. */
+[data-frame-body][data-flush] {
+	padding: 0;
+}
+
+[data-frame-footer] {
+	padding-block: var(--density-spacing-sm);
+	padding-inline: var(--density-spacing-md);
+}

package/dist/base/gradient-border.css

@@ -0,0 +1,32 @@
+/**
+ * Gradient Border Wrapper — Base Structural CSS
+ *
+ * Usage:
+ *   <div data-gradient-border>
+ *     <div data-gradient-border-inner>content</div>
+ *   </div>
+ *
+ * Themes set the gradient on [data-gradient-border] background.
+ * Non-gradient themes set background: transparent and use regular border.
+ */
+
+[data-gradient-border] {
+  padding: var(--density-border-width, 1px);
+  border-radius: var(--density-radius-base, var(--radius-md));
+  background: var(--gradient-border-bg, transparent);
+}
+
+[data-gradient-border-inner] {
+  border-radius: calc(var(--density-radius-base, var(--radius-md)) - var(--density-border-width, 1px));
+  background: var(--gradient-border-inner-bg, inherit);
+}
+
+/* Fallback: when no gradient, use a standard border */
+[data-gradient-border]:not([style*='--gradient-border-bg']) {
+  padding: 0;
+  border: var(--density-border-width, 1px) solid var(--gradient-border-color, currentColor);
+}
+
+[data-gradient-border]:not([style*='--gradient-border-bg']) [data-gradient-border-inner] {
+  border-radius: var(--density-radius-base, var(--radius-md));
+}

package/dist/base/graph-paper.css

@@ -0,0 +1,83 @@
+/* Graph paper — minor + major grid background utility
+ *
+ * Override any variable on the element or a parent to customise:
+ *   --unit              minor cell size       (default 0.5rem)
+ *   --size              major cell size       (default calc(5 * --unit))
+ *   --minor-grid        minor line thickness  (default 0.5px)
+ *   --major-grid        major line thickness  (default 0.5px)
+ *   --graph-paper-color line color            (default currentColor)
+ */
+
+/* Grid paper — simple H+V grid (no major/minor distinction)
+ *
+ * Override any variable on the element or a parent to customise:
+ *   --unit              cell size             (default 0.5rem)
+ *   --grid-line         line thickness        (default 0.5px)
+ *   --grid-paper-color  line color            (default currentColor)
+ */
+
+/* Ruled paper — horizontal lines only
+ *
+ * Override any variable on the element or a parent to customise:
+ *   --unit              line spacing          (default 1.5rem)
+ *   --rule-size         line thickness        (default 0.5px)
+ *   --ruled-paper-color line color            (default currentColor)
+ */
+
+[data-graph-paper] {
+  background-image:
+    linear-gradient(
+      var(--graph-paper-color, currentColor) var(--major-grid, 0.5px),
+      transparent var(--major-grid, 0.5px)
+    ),
+    linear-gradient(
+      90deg,
+      var(--graph-paper-color, currentColor) var(--major-grid, 0.5px),
+      transparent var(--major-grid, 0.5px)
+    ),
+    linear-gradient(
+      var(--graph-paper-color, currentColor) var(--minor-grid, 0.5px),
+      transparent var(--minor-grid, 0.5px)
+    ),
+    linear-gradient(
+      90deg,
+      var(--graph-paper-color, currentColor) var(--minor-grid, 0.5px),
+      transparent var(--minor-grid, 0.5px)
+    );
+  background-size:
+    var(--size, calc(5 * var(--unit, 0.5rem))) var(--size, calc(5 * var(--unit, 0.5rem))),
+    var(--size, calc(5 * var(--unit, 0.5rem))) var(--size, calc(5 * var(--unit, 0.5rem))),
+    var(--unit, 0.5rem) var(--unit, 0.5rem),
+    var(--unit, 0.5rem) var(--unit, 0.5rem);
+  background-position:
+    calc(-1 * var(--minor-grid, 0.5px)) calc(-1 * var(--minor-grid, 0.5px)),
+    calc(-1 * var(--minor-grid, 0.5px)) calc(-1 * var(--minor-grid, 0.5px)),
+    calc(-1 * var(--minor-grid, 0.5px)) calc(-1 * var(--minor-grid, 0.5px)),
+    calc(-1 * var(--minor-grid, 0.5px)) calc(-1 * var(--minor-grid, 0.5px));
+}
+
+[data-grid-paper] {
+  background-image:
+    linear-gradient(
+      var(--grid-paper-color, currentColor) var(--grid-line, 0.5px),
+      transparent var(--grid-line, 0.5px)
+    ),
+    linear-gradient(
+      90deg,
+      var(--grid-paper-color, currentColor) var(--grid-line, 0.5px),
+      transparent var(--grid-line, 0.5px)
+    );
+  background-size: var(--unit, 0.5rem) var(--unit, 0.5rem);
+  background-position:
+    calc(-1 * var(--grid-line, 0.5px)) calc(-1 * var(--grid-line, 0.5px)),
+    calc(-1 * var(--grid-line, 0.5px)) calc(-1 * var(--grid-line, 0.5px));
+}
+
+[data-ruled-paper] {
+  background-image: linear-gradient(
+    var(--ruled-paper-color, currentColor) var(--rule-size, 0.5px),
+    transparent var(--rule-size, 0.5px)
+  );
+  background-size: 100% var(--unit, 1.5rem);
+  background-position: 0 calc(-1 * var(--rule-size, 0.5px));
+}

package/dist/base/grid.css

@@ -0,0 +1,93 @@
+/**
+ * Grid - Base Structural Styles
+ *
+ * Layout: CSS grid with auto-fill, tile padding/sizing.
+ * No colors or visual theming - those belong in theme styles.
+ */
+
+/* =============================================================================
+   Grid Container
+   ============================================================================= */
+
+[data-grid] {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--grid-min-size, 120px), 1fr));
+  gap: var(--grid-gap, 1rem);
+}
+
+[data-grid][data-disabled] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+
+/* =============================================================================
+   Grid Tiles
+   ============================================================================= */
+
+[data-grid-item] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 1rem;
+  border: 1px solid transparent;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  transition:
+    background-color 150ms ease,
+    border-color 150ms ease;
+  background: transparent;
+  text-align: center;
+  word-break: break-word;
+}
+
+[data-grid-item]:focus {
+  outline: none;
+}
+
+[data-grid-item][data-disabled],
+[data-grid-item]:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* =============================================================================
+   Size Variants
+   ============================================================================= */
+
+[data-grid][data-size='sm'] [data-grid-item] {
+  padding: 0.5rem;
+  gap: 0.25rem;
+  font-size: 0.75rem;
+}
+
+[data-grid][data-size='md'] [data-grid-item],
+[data-grid]:not([data-size]) [data-grid-item] {
+  padding: 1rem;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+}
+
+[data-grid][data-size='lg'] [data-grid-item] {
+  padding: 1.5rem;
+  gap: 0.75rem;
+  font-size: 1rem;
+}
+
+/* =============================================================================
+   Item Elements (reuse shared data-item-* from item.css)
+   ============================================================================= */
+
+[data-grid-item] [data-item-icon] {
+  font-size: 1.5rem;
+}
+
+[data-grid][data-size='sm'] [data-grid-item] [data-item-icon] {
+  font-size: 1.25rem;
+}
+
+[data-grid][data-size='lg'] [data-grid-item] [data-item-icon] {
+  font-size: 2rem;
+}