@rokkit/themes 1.0.0-next.99 → 1.0.1

package/src/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/src/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/src/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;
+}

package/src/base/index.css

@@ -0,0 +1,55 @@
+/**
+ * @rokkit/themes - Base Styles
+ *
+ * Structural styles for all components.
+ * Import individual files for tree-shaking, or this file for all base styles.
+ */
+
+@import './typography.css';
+@import './density.css';
+@import './button.css';
+@import './item.css';
+@import './menu.css';
+@import './dropdown.css';
+@import './select.css';
+@import './toolbar.css';
+@import './tabs.css';
+@import './toggle.css';
+@import './list.css';
+@import './connector.css';
+@import './tree.css';
+@import './floating-action.css';
+@import './input.css';
+@import './display.css';
+@import './tilt.css';
+@import './shine.css';
+@import './breadcrumbs.css';
+@import './card.css';
+@import './progress.css';
+@import './carousel.css';
+@import './pill.css';
+@import './rating.css';
+@import './stepper.css';
+@import './switch.css';
+@import './table.css';
+@import './search-filter.css';
+@import './range.css';
+@import './timeline.css';
+@import './reveal.css';
+@import './graph-paper.css';
+@import './floating-navigation.css';
+@import './grid.css';
+@import './upload-target.css';
+@import './upload-progress.css';
+@import './toc.css';
+@import './status-list.css';
+@import './step-indicator.css';
+@import './message.css';
+@import './alert-list.css';
+@import './chart.css';
+@import './swatch.css';
+@import './divider.css';
+@import './stack.css';
+@import './badge.css';
+@import './avatar.css';
+@import './tooltip.css';