@justin_evo/evo-ui 1.1.0 → 1.2.1

package/src/css/base/_variables.scss

@@ -1,161 +1,161 @@
-@use './color' as *;
-
-// ==========================================================
-// EVO-UI SCSS VARIABLES
-// ----------------------------------------------------------
-// Two kinds of variables live in this file:
-//
-//  1. SEMANTIC (theme-aware) — emit `var(--evo-*)` so the
-//     same component code resolves to light or dark values
-//     based on the current `data-theme`.
-//
-//  2. STATIC (sizes, radii, transitions, typography) — plain
-//     SCSS literals. These don't change between themes.
-//
-// To override a theme color, set the CSS variable in your
-// app — never reassign these SCSS variables directly.
-// ==========================================================
-
-// ---------- Semantic colors (theme-aware) ----------
-
-// Primary
-$evo-primary-color:    var(--evo-color-primary);
-$evo-primary-hover:    var(--evo-color-primary-hover);
-$evo-primary-active:   var(--evo-color-primary-active);
-$evo-primary-focus:    var(--evo-color-primary-focus);
-$evo-primary-fg:       var(--evo-color-primary-fg);
-$evo-primary-soft:     var(--evo-color-primary-soft);
-$evo-primary-rgb:      var(--evo-color-primary-rgb);
-
-// Secondary
-$evo-secondary-bg:      var(--evo-color-secondary);
-$evo-secondary-color:   var(--evo-color-secondary);
-$evo-secondary-border:  var(--evo-color-secondary-border);
-$evo-secondary-hover:   var(--evo-color-secondary-hover);
-$evo-secondary-active:  var(--evo-color-secondary-active);
-$evo-secondary-text:    var(--evo-color-secondary-fg);
-$evo-secondary-focus:   var(--evo-color-secondary-border);
-
-// Danger
-$evo-danger-color:     var(--evo-color-danger);
-$evo-danger-hover:     var(--evo-color-danger-hover);
-$evo-danger-active:    var(--evo-color-danger-active);
-$evo-danger-focus:     var(--evo-color-danger-focus);
-$evo-danger-fg:        var(--evo-color-danger-fg);
-$evo-danger-soft:      var(--evo-color-danger-soft);
-$evo-danger-rgb:       var(--evo-color-danger-rgb);
-
-// Warning
-$evo-warning-color:    var(--evo-color-warning);
-$evo-warning-hover:    var(--evo-color-warning-hover);
-$evo-warning-active:   var(--evo-color-warning-active);
-$evo-warning-focus:    var(--evo-color-warning-focus);
-$evo-warning-text:     var(--evo-color-warning-fg);
-$evo-warning-soft:     var(--evo-color-warning-soft);
-
-// Success
-$evo-success-color:    var(--evo-color-success);
-$evo-success-hover:    var(--evo-color-success-hover);
-$evo-success-active:   var(--evo-color-success-active);
-$evo-success-focus:    var(--evo-color-success-focus);
-$evo-success-fg:       var(--evo-color-success-fg);
-$evo-success-soft:     var(--evo-color-success-soft);
-
-// Info
-$evo-info-color:       var(--evo-color-info);
-$evo-info-hover:       var(--evo-color-info-hover);
-$evo-info-active:      var(--evo-color-info-active);
-$evo-info-focus:       var(--evo-color-info-focus);
-$evo-info-fg:          var(--evo-color-info-fg);
-$evo-info-soft:        var(--evo-color-info-soft);
-
-// Surfaces, borders, text — the semantic foundation
-$color-background:         var(--evo-color-bg);
-$color-surface:            var(--evo-color-surface);
-$color-surface-elevated:   var(--evo-color-surface-elevated);
-$color-surface-sunken:     var(--evo-color-surface-sunken);
-$color-surface-hover:      var(--evo-color-surface-hover);
-$color-surface-active:     var(--evo-color-surface-active);
-$color-border:             var(--evo-color-border);
-$color-border-strong:      var(--evo-color-border-strong);
-$color-border-subtle:      var(--evo-color-border-subtle);
-$color-text-primary:       var(--evo-color-text);
-$color-text-secondary:     var(--evo-color-text-secondary);
-$color-text-muted:         var(--evo-color-text-muted);
-$color-text-inverted:      var(--evo-color-text-inverted);
-$color-overlay:            var(--evo-color-overlay);
-$color-backdrop:           var(--evo-color-backdrop);
-
-// Skeleton
-$color-skeleton-base:      var(--evo-color-skeleton-base);
-$color-skeleton-highlight: var(--evo-color-skeleton-highlight);
-
-// ---------- Card defaults (theme-aware) ----------
-$evo-card-bg:        $color-surface-elevated;
-$evo-card-border:    $color-border;
-$evo-card-padding:   1rem 0.5rem;
-
-// ---------- Static design tokens (theme-independent) ----------
-
-// Button sizing
-$evo-btn-padding-y:       0.25rem;
-$evo-btn-padding-x:       0.63rem;
-$evo-btn-padding-y-sm:    0.13rem;
-$evo-btn-padding-x-sm:    0.38rem;
-$evo-btn-padding-y-lg:    0.37rem;
-$evo-btn-padding-x-lg:    0.88rem;
-
-$evo-btn-font-size:       0.875rem;
-$evo-btn-font-size-sm:    0.75rem;
-$evo-btn-font-size-lg:    1rem;
-$evo-btn-font-weight:     600;
-$evo-btn-line-height:     1.5;
-
-// Card sizing
-$card-width: 280px;
-$card-height: 380px;
-$card-padding: 1.25rem;
-
-// Border radius
-$radius-sm:   6px;
-$radius-md:   12px;
-$radius-lg:   16px;
-$radius-xl:   20px;
-$radius-full: 9999px;
-
-// Shadows — read `--evo-shadow-color` and `--evo-shadow-strength`
-// so they automatically deepen in dark mode.
-$shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
-$shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10);
-$shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
-$shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10);
-$shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-
-// Transitions
-$transition-fast:   150ms ease;
-$transition-normal: 250ms ease;
-$transition-slow:   400ms ease;
-$transition-spring: 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
-
-// Typography
-$font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
-$font-display: 'Cal Sans', 'Inter', sans-serif;
-
-$text-xs:  0.75rem;
-$text-sm:  0.875rem;
-$text-base: 1rem;
-$text-lg:  1.125rem;
-$text-xl:  1.25rem;
-$text-2xl: 1.5rem;
-$text-3xl: 1.875rem;
-
-// Shape & motion
-$evo-border-radius:        8px;
-$evo-border-radius-sm:     4px;
-$evo-border-radius-lg:     12px;
-$evo-border-radius-pill:   9999px;
-
-$evo-btn-transition:       150ms ease;
-$evo-btn-disabled-opacity: 0.5;
-$evo-btn-outline-offset:   2px;
-$evo-btn-outline-width:    2px;
+@use './color' as *;
+
+// ==========================================================
+// EVO-UI SCSS VARIABLES
+// ----------------------------------------------------------
+// Two kinds of variables live in this file:
+//
+//  1. SEMANTIC (theme-aware) — emit `var(--evo-*)` so the
+//     same component code resolves to light or dark values
+//     based on the current `data-theme`.
+//
+//  2. STATIC (sizes, radii, transitions, typography) — plain
+//     SCSS literals. These don't change between themes.
+//
+// To override a theme color, set the CSS variable in your
+// app — never reassign these SCSS variables directly.
+// ==========================================================
+
+// ---------- Semantic colors (theme-aware) ----------
+
+// Primary
+$evo-primary-color:    var(--evo-color-primary);
+$evo-primary-hover:    var(--evo-color-primary-hover);
+$evo-primary-active:   var(--evo-color-primary-active);
+$evo-primary-focus:    var(--evo-color-primary-focus);
+$evo-primary-fg:       var(--evo-color-primary-fg);
+$evo-primary-soft:     var(--evo-color-primary-soft);
+$evo-primary-rgb:      var(--evo-color-primary-rgb);
+
+// Secondary
+$evo-secondary-bg:      var(--evo-color-secondary);
+$evo-secondary-color:   var(--evo-color-secondary);
+$evo-secondary-border:  var(--evo-color-secondary-border);
+$evo-secondary-hover:   var(--evo-color-secondary-hover);
+$evo-secondary-active:  var(--evo-color-secondary-active);
+$evo-secondary-text:    var(--evo-color-secondary-fg);
+$evo-secondary-focus:   var(--evo-color-secondary-border);
+
+// Danger
+$evo-danger-color:     var(--evo-color-danger);
+$evo-danger-hover:     var(--evo-color-danger-hover);
+$evo-danger-active:    var(--evo-color-danger-active);
+$evo-danger-focus:     var(--evo-color-danger-focus);
+$evo-danger-fg:        var(--evo-color-danger-fg);
+$evo-danger-soft:      var(--evo-color-danger-soft);
+$evo-danger-rgb:       var(--evo-color-danger-rgb);
+
+// Warning
+$evo-warning-color:    var(--evo-color-warning);
+$evo-warning-hover:    var(--evo-color-warning-hover);
+$evo-warning-active:   var(--evo-color-warning-active);
+$evo-warning-focus:    var(--evo-color-warning-focus);
+$evo-warning-text:     var(--evo-color-warning-fg);
+$evo-warning-soft:     var(--evo-color-warning-soft);
+
+// Success
+$evo-success-color:    var(--evo-color-success);
+$evo-success-hover:    var(--evo-color-success-hover);
+$evo-success-active:   var(--evo-color-success-active);
+$evo-success-focus:    var(--evo-color-success-focus);
+$evo-success-fg:       var(--evo-color-success-fg);
+$evo-success-soft:     var(--evo-color-success-soft);
+
+// Info
+$evo-info-color:       var(--evo-color-info);
+$evo-info-hover:       var(--evo-color-info-hover);
+$evo-info-active:      var(--evo-color-info-active);
+$evo-info-focus:       var(--evo-color-info-focus);
+$evo-info-fg:          var(--evo-color-info-fg);
+$evo-info-soft:        var(--evo-color-info-soft);
+
+// Surfaces, borders, text — the semantic foundation
+$color-background:         var(--evo-color-bg);
+$color-surface:            var(--evo-color-surface);
+$color-surface-elevated:   var(--evo-color-surface-elevated);
+$color-surface-sunken:     var(--evo-color-surface-sunken);
+$color-surface-hover:      var(--evo-color-surface-hover);
+$color-surface-active:     var(--evo-color-surface-active);
+$color-border:             var(--evo-color-border);
+$color-border-strong:      var(--evo-color-border-strong);
+$color-border-subtle:      var(--evo-color-border-subtle);
+$color-text-primary:       var(--evo-color-text);
+$color-text-secondary:     var(--evo-color-text-secondary);
+$color-text-muted:         var(--evo-color-text-muted);
+$color-text-inverted:      var(--evo-color-text-inverted);
+$color-overlay:            var(--evo-color-overlay);
+$color-backdrop:           var(--evo-color-backdrop);
+
+// Skeleton
+$color-skeleton-base:      var(--evo-color-skeleton-base);
+$color-skeleton-highlight: var(--evo-color-skeleton-highlight);
+
+// ---------- Card defaults (theme-aware) ----------
+$evo-card-bg:        $color-surface-elevated;
+$evo-card-border:    $color-border;
+$evo-card-padding:   1rem 0.5rem;
+
+// ---------- Static design tokens (theme-independent) ----------
+
+// Button sizing
+$evo-btn-padding-y:       0.25rem;
+$evo-btn-padding-x:       0.63rem;
+$evo-btn-padding-y-sm:    0.13rem;
+$evo-btn-padding-x-sm:    0.38rem;
+$evo-btn-padding-y-lg:    0.37rem;
+$evo-btn-padding-x-lg:    0.88rem;
+
+$evo-btn-font-size:       0.875rem;
+$evo-btn-font-size-sm:    0.75rem;
+$evo-btn-font-size-lg:    1rem;
+$evo-btn-font-weight:     600;
+$evo-btn-line-height:     1.5;
+
+// Card sizing
+$card-width: 280px;
+$card-height: 380px;
+$card-padding: 1.25rem;
+
+// Border radius
+$radius-sm:   6px;
+$radius-md:   12px;
+$radius-lg:   16px;
+$radius-xl:   20px;
+$radius-full: 9999px;
+
+// Shadows — read `--evo-shadow-color` and `--evo-shadow-strength`
+// so they automatically deepen in dark mode.
+$shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.05);
+$shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10);
+$shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10);
+$shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10);
+$shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+
+// Transitions
+$transition-fast:   150ms ease;
+$transition-normal: 250ms ease;
+$transition-slow:   400ms ease;
+$transition-spring: 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
+
+// Typography
+$font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+$font-display: 'Cal Sans', 'Inter', sans-serif;
+
+$text-xs:  0.75rem;
+$text-sm:  0.875rem;
+$text-base: 1rem;
+$text-lg:  1.125rem;
+$text-xl:  1.25rem;
+$text-2xl: 1.5rem;
+$text-3xl: 1.875rem;
+
+// Shape & motion
+$evo-border-radius:        8px;
+$evo-border-radius-sm:     4px;
+$evo-border-radius-lg:     12px;
+$evo-border-radius-pill:   9999px;
+
+$evo-btn-transition:       150ms ease;
+$evo-btn-disabled-opacity: 0.5;
+$evo-btn-outline-offset:   2px;
+$evo-btn-outline-width:    2px;

package/src/css/breadcrumb.module.scss

@@ -1,50 +1,50 @@
-@use 'base/variables' as *;
-@use 'base/color' as *;
-
-.breadcrumb {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  gap: 0;
-  font-family: $font-sans;
-}
-
-.item {
-  display: flex;
-  align-items: center;
-  list-style: none;
-}
-
-.separator {
-  display: flex;
-  align-items: center;
-  color: $color-text-muted;
-  font-size: $text-sm;
-  padding: 0 0.375rem;
-  list-style: none;
-  user-select: none;
-}
-
-.link {
-  font-size: $text-sm;
-  color: $evo-primary-color;
-  text-decoration: none;
-  transition: color $transition-fast;
-  border-radius: $radius-sm;
-
-  &:hover { color: $evo-primary-hover; text-decoration: underline; }
-  &:focus-visible { outline: 2px solid $evo-primary-focus; outline-offset: 2px; }
-}
-
-.text {
-  font-size: $text-sm;
-  color: $color-text-secondary;
-}
-
-.current {
-  color: $color-text-primary;
-  font-weight: 500;
-}
+@use 'base/variables' as *;
+@use 'base/color' as *;
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  gap: 0;
+  font-family: $font-sans;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  list-style: none;
+}
+
+.separator {
+  display: flex;
+  align-items: center;
+  color: $color-text-muted;
+  font-size: $text-sm;
+  padding: 0 0.375rem;
+  list-style: none;
+  user-select: none;
+}
+
+.link {
+  font-size: $text-sm;
+  color: $evo-primary-color;
+  text-decoration: none;
+  transition: color $transition-fast;
+  border-radius: $radius-sm;
+
+  &:hover { color: $evo-primary-hover; text-decoration: underline; }
+  &:focus-visible { outline: 2px solid $evo-primary-focus; outline-offset: 2px; }
+}
+
+.text {
+  font-size: $text-sm;
+  color: $color-text-secondary;
+}
+
+.current {
+  color: $color-text-primary;
+  font-weight: 500;
+}