css-is-awesome 1.1.0

package/scss/theme/_colors-dark.scss

@@ -0,0 +1,68 @@
+// ============================================================================
+// SEMANTIC COLORS - Dark Mode
+// ============================================================================
+
+$colors-dark: (
+  // Backgrounds
+  background-default: #0a0a0a,
+  background-subtle:  #151515,
+  background-navbar:  #1a1a1a,
+
+  // Surfaces
+  surface-default:    #151515,
+  surface-subtle:     #1f1f1f,
+  surface-muted:      #2a2a2a,
+  surface-emphasis:   #353535,
+
+  // Text
+  text-primary:       #FFF,
+  text-secondary:     #b8b8b8,
+  text-muted:         #768194,
+  text-inverse:       #0a0a0a,
+  text-link:          #09f,
+  text-link-hover:    #5ebbff,
+
+  // Borders
+  border-default:     #2a2a2a,
+  border-subtle:      #1f1f1f,
+  border-emphasis:    #404040,
+  border-focus:       #09f,
+
+  // Interactive states
+  interactive-hover:  rgba(255, 255, 255, 0.05),
+  interactive-active: rgba(255, 255, 255, 0.1),
+
+  // Action - Primary
+  action-primary-default: #6B8FE8,
+  action-primary-hover:   #8BABF5,
+  action-primary-active:  #3A5FCD,
+
+  // Action - Secondary
+  action-secondary-default: #FF8A8A,
+  action-secondary-hover:   #FFACAC,
+  action-secondary-active:  #FF6B6B,
+
+  // Status - Success
+  success-default:    #34d399,
+  success-hover:      #10b981,
+  success-subtle:     #064e3b,
+  success-text:       #6ee7b7,
+
+  // Status - Warning
+  warning-default:    #fbbf24,
+  warning-hover:      #f59e0b,
+  warning-subtle:     #451a03,
+  warning-text:       #fcd34d,
+
+  // Status - Error
+  error-default:      #f87171,
+  error-hover:        #ef4444,
+  error-subtle:       #450a0a,
+  error-text:         #fca5a5,
+
+  // Status - Info
+  info-default:       #60a5fa,
+  info-hover:         #3b82f6,
+  info-subtle:        #172554,
+  info-text:          #93c5fd,
+) !default;

package/scss/theme/_colors-light.scss

@@ -0,0 +1,70 @@
+// ============================================================================
+// SEMANTIC COLORS - Light Mode
+// ============================================================================
+// Inspired by zeroheight + Trueform: warm, professional, accessible
+// ============================================================================
+
+$colors-light: (
+  // Backgrounds
+  background-default: #FFF,
+  background-subtle:  #F8F6F0,
+  background-navbar:  #FAFAFA,
+
+  // Surfaces
+  surface-default:    #FFF,
+  surface-subtle:     #F8F6F0,
+  surface-muted:      #F5F5F5,
+  surface-emphasis:   #E5E5E5,
+
+  // Text
+  text-primary:       #0f0f0f,
+  text-secondary:     #525252,
+  text-muted:         #6b6b6b,
+  text-inverse:       #fff,
+  text-link:          #384fff,
+  text-link-hover:    #2a3acc,
+
+  // Borders
+  border-default:     #e5e5e5,
+  border-subtle:      #f5f5f5,
+  border-emphasis:    #d4d4d4,
+  border-focus:       #384fff,
+
+  // Interactive states
+  interactive-hover:  rgba(0, 0, 0, 0.03),
+  interactive-active: rgba(0, 0, 0, 0.06),
+
+  // Action - Primary
+  action-primary-default: #3A5FCD,
+  action-primary-hover:   #2E4A99,
+  action-primary-active:  #1E3A8A,
+
+  // Action - Secondary
+  action-secondary-default: #FF6B6B,
+  action-secondary-hover:   #E85555,
+  action-secondary-active:  #C55,
+
+  // Status - Success
+  success-default:    #10b981,
+  success-hover:      #059669,
+  success-subtle:     #ecfdf5,
+  success-text:       #065f46,
+
+  // Status - Warning
+  warning-default:    #f59e0b,
+  warning-hover:      #d97706,
+  warning-subtle:     #fffbeb,
+  warning-text:       #92400e,
+
+  // Status - Error
+  error-default:      #DC2626,
+  error-hover:        #B91C1C,
+  error-subtle:       #FEF2F2,
+  error-text:         #991B1B,
+
+  // Status - Info
+  info-default:       #3A5FCD,
+  info-hover:         #2E4A99,
+  info-subtle:        #EFF6FF,
+  info-text:          #1E3A8A,
+) !default;

package/scss/theme/_components.scss

@@ -0,0 +1,94 @@
+// ============================================================================
+// COMPONENT TOKENS — Per-component runtime overrides (Epic 1 Feature 1.3)
+// ----------------------------------------------------------------------------
+// Every entry in this map is emitted by _generator.scss as a CSS custom
+// property on :root, using the raw CSS value recorded here as its default.
+// Library mixins read the same tokens via `var(--key, <default>)`, so a
+// theme can override a single property (e.g. `--btn-radius: 0`) on its
+// own :root without touching the library SCSS or rebuilding.
+//
+// VALUE FORMAT
+// Each value is a RAW CSS string — already wrapped in `var(…)` when it
+// references another library token. That value is
+//   1. emitted as the CSS variable default on :root, AND
+//   2. used as the fallback inside `var(--key, …)` in the component mixin.
+// Keep these in sync with the mixin defaults in scss/_mixins.scss and
+// scss/components/*.scss so library output is semantically identical
+// when no theme override is present.
+// ============================================================================
+
+$components: (
+  // ----------------------------------------------------------
+  // Buttons
+  // ----------------------------------------------------------
+  btn-padding-y:       var(--space-1, 0.5rem),
+  btn-padding-x:       var(--space-4, 1rem),
+  btn-radius:          var(--radius-md, 0.25rem),
+  btn-font-weight:     var(--font-weight-medium, 500),
+  btn-font-size:       var(--font-size-base, 1rem),
+  btn-border-width:    1px,
+
+  // ----------------------------------------------------------
+  // Cards
+  // ----------------------------------------------------------
+  card-padding:        var(--space-4, 1rem),
+  card-radius:         var(--radius-lg, 0.5rem),
+  card-shadow:         var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05)),
+  card-border:         1px solid var(--border-default),
+
+  // ----------------------------------------------------------
+  // Inputs
+  // ----------------------------------------------------------
+  input-padding-y:     var(--space-1, 0.5rem),
+  input-padding-x:     var(--space-2, 0.75rem),
+  input-radius:        var(--radius-md, 0.25rem),
+  input-border-width:  1px,
+
+  // ----------------------------------------------------------
+  // Alerts
+  // ----------------------------------------------------------
+  alert-padding-y:     var(--space-2, 0.75rem),
+  alert-padding-x:     var(--space-4, 1rem),
+  alert-radius:        var(--radius-md, 0.25rem),
+
+  // ----------------------------------------------------------
+  // Badges
+  // ----------------------------------------------------------
+  badge-padding-y:     var(--space-1, 0.5rem),
+  badge-padding-x:     var(--space-1, 0.5rem),
+  badge-radius:        var(--radius-full, 9999px),
+
+  // ----------------------------------------------------------
+  // Tags / Chips
+  // ----------------------------------------------------------
+  tag-padding-y:       var(--space-2xs, 0.25rem),
+  tag-padding-x:       var(--space-2, 0.75rem),
+  tag-radius:          var(--radius-md, 0.25rem),
+
+  // ----------------------------------------------------------
+  // Modals
+  // ----------------------------------------------------------
+  modal-padding:       var(--space-5, 1.5rem),
+  modal-radius:        var(--radius-xl, 0.75rem),
+  modal-shadow:        var(--shadow-2xl, 0 25px 50px -12px rgb(0 0 0 / 0.25)),
+
+  // ----------------------------------------------------------
+  // Popovers
+  // ----------------------------------------------------------
+  popover-padding:     var(--space-4, 1rem),
+  popover-radius:      var(--radius-lg, 0.5rem),
+  popover-shadow:      var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1)),
+
+  // ----------------------------------------------------------
+  // Tooltips
+  // ----------------------------------------------------------
+  tooltip-padding-y:   var(--space-1, 0.5rem),
+  tooltip-padding-x:   var(--space-1, 0.5rem),
+  tooltip-radius:      var(--radius-md, 0.25rem),
+
+  // ----------------------------------------------------------
+  // Dropdowns
+  // ----------------------------------------------------------
+  dropdown-radius:     var(--radius-md, 0.25rem),
+  dropdown-shadow:     var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1)),
+) !default;

package/scss/theme/_icons.scss

@@ -0,0 +1,104 @@
+// ============================================================================
+// ICONS - SVG + Font Awesome Configuration
+// ============================================================================
+
+// SVG Icons
+//
+// The default `core` icon pack ships at /icons/core/. Glyphs are vendored
+// from Lucide (ISC + MIT, see LICENSE-third-party). Per-theme overrides
+// resolve at runtime through CSS custom properties — see `m.svg` for the
+// resolver pattern and CONTRACT.md → "Icons contract" for the full story.
+$icon-path: '/icons' !default;
+$icon-pack: 'core' !default;
+$icon-size: 24px !default;
+
+$icon-svg-alias: (
+  delete: 'trash',
+  close:  'x',
+) !default;
+
+// Font Awesome
+$fa-path: '/webfonts' !default;
+$fa-style: solid !default;
+
+// Set to `true` if you've licensed Font Awesome 6 Pro and want the Pro
+// families wired in automatically. When enabled, `fa-load` emits
+// @font-face rules for Light / Thin / Duotone alongside Solid / Regular /
+// Brands, and `fa()` resolves to the Pro family name. Drop the woff2 files
+// for whichever weights you ship at $fa-path — missing files are harmless,
+// they just won't render until you add them.
+$fa-pro: false !default;
+
+$icon-fa-map: (
+  // Navigation
+  menu:           '\f0c9',
+  close:          '\f00d',
+  search:         '\f002',
+  home:           '\f015',
+
+  // Actions
+  plus:           '\f067',
+  minus:          '\f068',
+  edit:           '\f044',
+  delete:         '\f1f8',
+  save:           '\f0c7',
+  download:       '\f019',
+  upload:         '\f093',
+  copy:           '\f0c5',
+
+  // Arrows
+  arrow-up:       '\f062',
+  arrow-down:     '\f063',
+  arrow-left:     '\f060',
+  arrow-right:    '\f061',
+  chevron-up:     '\f077',
+  chevron-down:   '\f078',
+  chevron-left:   '\f053',
+  chevron-right:  '\f054',
+
+  // Status
+  check:          '\f00c',
+  info:           '\f129',
+  warning:        '\f071',
+  error:          '\f06a',
+
+  // UI
+  user:           '\f007',
+  settings:       '\f013',
+  bell:           '\f0f3',
+  calendar:       '\f133',
+  clock:          '\f017',
+  lock:           '\f023',
+  unlock:         '\f09c',
+  eye:            '\f06e',
+  eye-off:        '\f070',
+  star:           '\f005',
+  heart:          '\f004',
+  filter:         '\f0b0',
+  sort:           '\f0dc',
+
+  // Media
+  play:           '\f04b',
+  pause:          '\f04c',
+  stop:           '\f04d',
+
+  // Communication
+  mail:           '\f0e0',
+  phone:          '\f095',
+
+  // Misc
+  spinner:        '\f110',
+  external:       '\f35d',
+  link:           '\f0c1',
+  refresh:        '\f021',
+  more:           '\f142',
+  grip:           '\f58e',
+
+  // Brands
+  github:         '\f09b',
+  twitter:        '\f099',
+  facebook:       '\f09a',
+  linkedin:       '\f0e1',
+  youtube:        '\f167',
+  instagram:      '\f16d',
+) !default;

package/scss/theme/_index.scss

@@ -0,0 +1,62 @@
+// ============================================================================
+// THEME BARREL - Re-exports all theme parts
+// ============================================================================
+// This file is what _generator.scss, _mixins.scss, and _icons.scss import.
+// Variable names here match what the rest of the system expects.
+// ============================================================================
+@use 'sass:map';
+@use '../system' as s;
+@use './brand' as *;
+@use './colors-light' as *;
+@use './colors-dark' as *;
+@use './typography' as *;
+@use './shape' as *;
+@use './shadows' as *;
+@use './components' as *;
+@use './icons' as *;
+
+// Theme identity
+$theme-name: 'royal-blue' !default;
+
+// Re-export with expected names
+$theme-brand: $brand !default;
+$theme-light: $colors-light !default;
+$theme-dark: $colors-dark !default;
+$theme-fonts: $fonts !default;
+$theme-radius: $radius !default;
+$theme-shadows-light: $shadows-light !default;
+$theme-shadows-dark: $shadows-dark !default;
+$theme-components: $components !default;
+
+// Spacing tokens (theme-level) — deferred to scss/_system.scss as the
+// single source of truth. Theme authors override via the system layer.
+$space-scale: s.$spacing-scale   !default;
+$space-aliases: s.$spacing-aliases !default;
+$space: s.$spacing         !default;
+
+// Semantic spacing aliases
+$gap: (
+  normal:  map.get($space, 4),
+  compact: map.get($space, 2),
+) !default;
+
+$padding: (
+  compact: map.get($space, 2),
+  normal:  map.get($space, 4),
+  relaxed: map.get($space, 5),
+) !default;
+
+$margin: (
+  section: map.get($space, 8),
+) !default;
+
+// Icon re-exports (no !default — must override the @use 'icons' as * import)
+$theme-icon-path: $icon-path;
+$theme-icon-pack: $icon-pack;
+$theme-icon-size: $icon-size;
+$theme-icon-svg-alias: $icon-svg-alias;
+$theme-fa-path: $fa-path;
+$theme-fa-style: $fa-style;
+$theme-fa-pro: $fa-pro;
+$theme-icon-fa-map: $icon-fa-map;
+

package/scss/theme/_shadows.scss

@@ -0,0 +1,65 @@
+// ============================================================================
+// SHADOWS - Light & Dark
+// ============================================================================
+// Numbered scale 1..5 is the source of truth; t-shirt aliases layer on top.
+// The semantic values `inner` and `none` aren't on the numbered scale — they
+// stay as named entries.
+//
+// Mapping:
+//   sm  -> 1
+//   md  -> 2
+//   lg  -> 3
+//   xl  -> 4
+//   2xl -> 5
+// ============================================================================
+@use 'sass:map';
+
+$shadows-aliases: (
+  sm:  1,
+  md:  2,
+  lg:  3,
+  xl:  4,
+  2xl: 5,
+) !default;
+
+$shadows-light-scale: (
+  1: (0 1px 2px 0 rgb(0 0 0 / 0.05)),
+  2: (0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)),
+  3: (0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)),
+  4: (0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)),
+  5: (0 25px 50px -12px rgb(0 0 0 / 0.25)),
+) !default;
+
+$shadows-light: map.merge(
+  $shadows-light-scale,
+  (
+    sm:    map.get($shadows-light-scale, map.get($shadows-aliases, sm)),
+    md:    map.get($shadows-light-scale, map.get($shadows-aliases, md)),
+    lg:    map.get($shadows-light-scale, map.get($shadows-aliases, lg)),
+    xl:    map.get($shadows-light-scale, map.get($shadows-aliases, xl)),
+    2xl:   map.get($shadows-light-scale, map.get($shadows-aliases, 2xl)),
+    inner: (inset 0 2px 4px 0 rgb(0 0 0 / 0.05)),
+    none:  none,
+  )
+) !default;
+
+$shadows-dark-scale: (
+  1: (0 1px 2px 0 rgb(0 0 0 / 0.3)),
+  2: (0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3)),
+  3: (0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4)),
+  4: (0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.4)),
+  5: (0 25px 50px -12px rgb(0 0 0 / 0.6)),
+) !default;
+
+$shadows-dark: map.merge(
+  $shadows-dark-scale,
+  (
+    sm:    map.get($shadows-dark-scale, map.get($shadows-aliases, sm)),
+    md:    map.get($shadows-dark-scale, map.get($shadows-aliases, md)),
+    lg:    map.get($shadows-dark-scale, map.get($shadows-aliases, lg)),
+    xl:    map.get($shadows-dark-scale, map.get($shadows-aliases, xl)),
+    2xl:   map.get($shadows-dark-scale, map.get($shadows-aliases, 2xl)),
+    inner: (inset 0 2px 4px 0 rgb(0 0 0 / 0.3)),
+    none:  none,
+  )
+) !default;

package/scss/theme/_shape.scss

@@ -0,0 +1,13 @@
+// ============================================================================
+// SHAPE - Border Radii
+// ============================================================================
+
+$radius: (
+  none: 0,
+  sm:   0.25rem,
+  md:   0.375rem,
+  lg:   0.5rem,
+  xl:   0.75rem,
+  2xl:  1rem,
+  full: 9999px,
+) !default;

package/scss/theme/_typography.scss

@@ -0,0 +1,9 @@
+// ============================================================================
+// TYPOGRAPHY - Font Families
+// ============================================================================
+
+$fonts: (
+  primary: ('Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif),
+  secondary: ('Georgia', 'Times New Roman', serif),
+  mono: ('Fira Code', 'Consolas', 'Monaco', monospace),
+) !default;