css-is-awesome 1.1.0

package/scss/_system.scss

@@ -0,0 +1,291 @@
+// ============================================================================
+// SYSTEM - Universal Constants (Same across ALL projects)
+// ============================================================================
+// Compile-time values. NOT themed. NOT imported from Figma.
+// Breakpoints, z-index, spacing scale, font sizes, weights, line heights.
+// These feed into the generator and mixin API.
+// ============================================================================
+@use 'sass:map';
+
+// ----------------------------------------------------------------------------
+// SPACING - 4px base unit system
+// Numbered scale 1..9 is the source of truth (matches Radix, Open Props, IBM
+// Carbon). T-shirt aliases layer on top for readability.
+//
+// Mapping:
+//   xs  -> 1   (0.5rem / 8px)
+//   sm  -> 2   (0.75rem / 12px)
+//   --  -> 3   (0.875rem / 14px, gap — no t-shirt alias)
+//   md  -> 4   (1rem / 16px)
+//   lg  -> 5   (1.5rem / 24px)
+//   xl  -> 6   (2rem / 32px)
+//   2xl -> 7   (3rem / 48px)
+//   3xl -> 8   (4rem / 64px)
+//   4xl -> 9   (6rem / 96px)
+//
+// Extras (outside the numbered scale but retained as aliases): 0, none, 2xs.
+// All values in rem for accessibility (scales with user preferences).
+// ----------------------------------------------------------------------------
+
+// Numbered scale — source of truth
+$spacing-scale: (
+  1: 0.5rem,      // 8px
+  2: 0.75rem,     // 12px
+  3: 0.875rem,    // 14px  (gap — intentional, no t-shirt alias)
+  4: 1rem,        // 16px
+  5: 1.5rem,      // 24px
+  6: 2rem,        // 32px
+  7: 3rem,        // 48px
+  8: 4rem,        // 64px
+  9: 6rem,        // 96px
+) !default;
+
+// T-shirt aliases — numeric key each t-shirt resolves to
+$spacing-aliases: (
+  xs:  1,
+  sm:  2,
+  md:  4,
+  lg:  5,
+  xl:  6,
+  2xl: 7,
+  3xl: 8,
+  4xl: 9,
+) !default;
+
+// Combined lookup: numbered scale + t-shirt aliases + legacy extras.
+// Both `space(4)` and `space(md)` resolve to 1rem.
+$spacing: map.merge(
+  $spacing-scale,
+  (
+    // Legacy / extra aliases (not on the numbered scale)
+    0:   0,
+    none: 0,
+    2xs: 0.25rem,
+
+    // T-shirt aliases resolve to the same value as the numeric key
+    xs:  map.get($spacing-scale, map.get($spacing-aliases, xs)),
+    sm:  map.get($spacing-scale, map.get($spacing-aliases, sm)),
+    md:  map.get($spacing-scale, map.get($spacing-aliases, md)),
+    lg:  map.get($spacing-scale, map.get($spacing-aliases, lg)),
+    xl:  map.get($spacing-scale, map.get($spacing-aliases, xl)),
+    2xl: map.get($spacing-scale, map.get($spacing-aliases, 2xl)),
+    3xl: map.get($spacing-scale, map.get($spacing-aliases, 3xl)),
+    4xl: map.get($spacing-scale, map.get($spacing-aliases, 4xl)),
+  )
+) !default;
+
+// ----------------------------------------------------------------------------
+// FONT SIZES - Type scale
+// Numbered scale 1..10 is the source of truth; t-shirt aliases layer on top.
+//
+// Mapping:
+//   xs   -> 1   (0.75rem)
+//   sm   -> 2   (0.875rem)
+//   base -> 3   (1rem)
+//   lg   -> 4   (1.125rem)
+//   xl   -> 5   (1.25rem)
+//   2xl  -> 6   (1.5rem)
+//   3xl  -> 7   (1.875rem)
+//   4xl  -> 8   (2.25rem)
+//   5xl  -> 9   (3rem)
+//   6xl  -> 10  (3.75rem)
+// ----------------------------------------------------------------------------
+
+$font-sizes-scale: (
+  1:  0.75rem,    // 12px
+  2:  0.875rem,   // 14px
+  3:  1rem,       // 16px
+  4:  1.125rem,   // 18px
+  5:  1.25rem,    // 20px
+  6:  1.5rem,     // 24px
+  7:  1.875rem,   // 30px
+  8:  2.25rem,    // 36px
+  9:  3rem,       // 48px
+  10: 3.75rem,    // 60px
+) !default;
+
+$font-sizes-aliases: (
+  xs:   1,
+  sm:   2,
+  base: 3,
+  lg:   4,
+  xl:   5,
+  2xl:  6,
+  3xl:  7,
+  4xl:  8,
+  5xl:  9,
+  6xl:  10,
+) !default;
+
+$font-sizes: map.merge(
+  $font-sizes-scale,
+  (
+    xs:   map.get($font-sizes-scale, map.get($font-sizes-aliases, xs)),
+    sm:   map.get($font-sizes-scale, map.get($font-sizes-aliases, sm)),
+    base: map.get($font-sizes-scale, map.get($font-sizes-aliases, base)),
+    lg:   map.get($font-sizes-scale, map.get($font-sizes-aliases, lg)),
+    xl:   map.get($font-sizes-scale, map.get($font-sizes-aliases, xl)),
+    2xl:  map.get($font-sizes-scale, map.get($font-sizes-aliases, 2xl)),
+    3xl:  map.get($font-sizes-scale, map.get($font-sizes-aliases, 3xl)),
+    4xl:  map.get($font-sizes-scale, map.get($font-sizes-aliases, 4xl)),
+    5xl:  map.get($font-sizes-scale, map.get($font-sizes-aliases, 5xl)),
+    6xl:  map.get($font-sizes-scale, map.get($font-sizes-aliases, 6xl)),
+  )
+) !default;
+
+// ----------------------------------------------------------------------------
+// FONT WEIGHTS
+// ----------------------------------------------------------------------------
+$font-weights: (
+  light:    300,
+  normal:   400,
+  medium:   500,
+  semibold: 600,
+  bold:     700,
+  "black":  900,
+) !default;
+
+// ----------------------------------------------------------------------------
+// LINE HEIGHTS
+// Numbered scale 1..6 is the source of truth; named aliases layer on top.
+//
+// Mapping:
+//   none    -> 1  (1.0)
+//   tight   -> 2  (1.25)
+//   snug    -> 3  (1.375)
+//   normal  -> 4  (1.5)
+//   relaxed -> 5  (1.625)
+//   loose   -> 6  (2.0)
+// ----------------------------------------------------------------------------
+
+$line-heights-scale: (
+  1: 1,
+  2: 1.25,
+  3: 1.375,
+  4: 1.5,
+  5: 1.625,
+  6: 2,
+) !default;
+
+$line-heights-aliases: (
+  none:    1,
+  tight:   2,
+  snug:    3,
+  normal:  4,
+  relaxed: 5,
+  loose:   6,
+) !default;
+
+$line-heights: map.merge(
+  $line-heights-scale,
+  (
+    none:    map.get($line-heights-scale, map.get($line-heights-aliases, none)),
+    tight:   map.get($line-heights-scale, map.get($line-heights-aliases, tight)),
+    snug:    map.get($line-heights-scale, map.get($line-heights-aliases, snug)),
+    normal:  map.get($line-heights-scale, map.get($line-heights-aliases, normal)),
+    relaxed: map.get($line-heights-scale, map.get($line-heights-aliases, relaxed)),
+    loose:   map.get($line-heights-scale, map.get($line-heights-aliases, loose)),
+  )
+) !default;
+
+// ----------------------------------------------------------------------------
+// LETTER SPACING
+// ----------------------------------------------------------------------------
+$letter-spacings: (
+  tighter: -0.05em,
+  tight:   -0.025em,
+  normal:  0em,
+  wide:    0.025em,
+  wider:   0.05em,
+  widest:  0.1em,
+) !default;
+
+// ----------------------------------------------------------------------------
+// BREAKPOINTS — direction-agnostic (rem for accessibility)
+// Pair with m.media / m.media-down / m.media-between per design intent;
+// cia is responsive, not mobile-first.
+// IMPORTANT: These MUST stay as SCSS values (not CSS vars).
+// @media queries cannot use CSS custom properties.
+// ----------------------------------------------------------------------------
+$breakpoints: (
+  sm:  40rem,   // 640px
+  md:  48rem,   // 768px
+  lg:  64rem,   // 1024px
+  xl:  80rem,   // 1280px
+  2xl: 96rem,   // 1536px
+) !default;
+
+// Convenience aliases
+$bp-tablet: map.get($breakpoints, md) !default;
+$bp-desktop: map.get($breakpoints, lg) !default;
+
+// ----------------------------------------------------------------------------
+// Z-INDEX - Layer system
+// ----------------------------------------------------------------------------
+$z-layers: (
+  hide:     -1,
+  base:     0,
+  dropdown: 1000,
+  sticky:   1100,
+  fixed:    1200,
+  backdrop: 1300,
+  modal:    1400,
+  popover:  1500,
+  tooltip:  1600,
+  toast:    1700,
+) !default;
+
+// ----------------------------------------------------------------------------
+// BORDER WIDTHS
+// ----------------------------------------------------------------------------
+$border-widths: (
+  0: 0,
+  1: 1px,
+  2: 2px,
+  4: 4px,
+) !default;
+
+// ----------------------------------------------------------------------------
+// DURATIONS - Animation timing
+// ----------------------------------------------------------------------------
+$durations: (
+  instant: 0ms,
+  fast:    150ms,
+  normal:  250ms,
+  slow:    400ms,
+  slower:  600ms,
+) !default;
+
+// ----------------------------------------------------------------------------
+// EASINGS
+// ----------------------------------------------------------------------------
+$easings: (
+  linear:     linear,
+  ease:       ease,
+  ease-in:    ease-in,
+  ease-out:   ease-out,
+  ease-in-out: ease-in-out,
+  bounce:     cubic-bezier(0.68, -0.55, 0.265, 1.55),
+  smooth:     cubic-bezier(0.4, 0, 0.2, 1),
+) !default;
+
+// ----------------------------------------------------------------------------
+// OPACITY
+// ----------------------------------------------------------------------------
+$opacities: (
+  0:    0,
+  5:    0.05,
+  10:   0.1,
+  20:   0.2,
+  25:   0.25,
+  30:   0.3,
+  40:   0.4,
+  50:   0.5,
+  60:   0.6,
+  70:   0.7,
+  75:   0.75,
+  80:   0.8,
+  90:   0.9,
+  95:   0.95,
+  100:  1,
+) !default;

package/scss/_utilities.scss

@@ -0,0 +1,377 @@
+// ============================================================================
+// UTILITIES - Drop-in utility classes (cia- prefix)
+// ============================================================================
+// Generated from existing design tokens. No SCSS knowledge required to use.
+// Usage: <div class="cia-flex cia-p-md cia-bg-surface-subtle cia-rounded-lg">
+// ============================================================================
+@use 'sass:map';
+@use 'sass:list';
+@use 'sass:meta';
+@use './system' as s;
+@use './theme' as t;
+@use './mixins' as m;
+
+// ============================================================================
+// SPACING: margin & padding
+// ============================================================================
+// .cia-m-md, .cia-mt-lg, .cia-mx-xl, .cia-p-sm, .cia-py-2xl, etc.
+// ============================================================================
+
+$_space-props: (
+  m:  margin,
+  mt: margin-top,
+  mr: margin-right,
+  mb: margin-bottom,
+  ml: margin-left,
+  p:  padding,
+  pt: padding-top,
+  pr: padding-right,
+  pb: padding-bottom,
+  pl: padding-left,
+);
+
+$_space-axis: (
+  mx: (margin-left, margin-right),
+  my: (margin-top, margin-bottom),
+  px: (padding-left, padding-right),
+  py: (padding-top, padding-bottom),
+);
+
+@each $key, $value in s.$spacing {
+  @each $prefix, $prop in $_space-props {
+    .cia-#{$prefix}-#{$key} { #{$prop}: $value; }
+  }
+  @each $prefix, $props in $_space-axis {
+    .cia-#{$prefix}-#{$key} {
+      @each $prop in $props { #{$prop}: $value; }
+    }
+  }
+}
+
+// ============================================================================
+// ACCESSIBILITY UTILITIES
+// ============================================================================
+.cia-sr-only { @include m.sr-only; }
+
+// Auto margin utilities
+.cia-m-auto { margin: auto; }
+.cia-mx-auto { margin-left: auto; margin-right: auto; }
+.cia-my-auto { margin-top: auto; margin-bottom: auto; }
+.cia-ml-auto { margin-left: auto; }
+.cia-mr-auto { margin-right: auto; }
+.cia-mt-auto { margin-top: auto; }
+.cia-mb-auto { margin-bottom: auto; }
+
+// Gap utilities
+@each $key, $value in s.$spacing {
+  .cia-gap-#{$key} { gap: $value; }
+  .cia-gap-x-#{$key} { column-gap: $value; }
+  .cia-gap-y-#{$key} { row-gap: $value; }
+}
+
+// ============================================================================
+// TYPOGRAPHY
+// ============================================================================
+
+@each $key, $value in s.$font-sizes {
+  .cia-text-#{$key} { font-size: var(--font-size-#{$key}, #{$value}); }
+}
+
+@each $key, $value in s.$font-weights {
+  .cia-font-#{$key} { font-weight: var(--font-weight-#{$key}, #{$value}); }
+}
+
+@each $key, $value in s.$line-heights {
+  .cia-leading-#{$key} { line-height: $value; }
+}
+
+@each $key, $value in s.$letter-spacings {
+  .cia-tracking-#{$key} { letter-spacing: $value; }
+}
+
+.cia-text-left { text-align: left; }
+.cia-text-center { text-align: center; }
+.cia-text-right { text-align: right; }
+.cia-text-justify { text-align: justify; }
+
+.cia-uppercase { text-transform: uppercase; }
+.cia-lowercase { text-transform: lowercase; }
+.cia-capitalize { text-transform: capitalize; }
+.cia-normal-case { text-transform: none; }
+
+.cia-underline { text-decoration: underline; }
+.cia-line-through { text-decoration: line-through; }
+.cia-no-underline { text-decoration: none; }
+
+.cia-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cia-whitespace-nowrap { white-space: nowrap; }
+.cia-whitespace-normal { white-space: normal; }
+.cia-break-words { overflow-wrap: break-word; }
+
+// ============================================================================
+// COLORS (semantic tokens via CSS custom properties)
+// ============================================================================
+
+$_color-tokens: (
+  // Text
+  text-primary, text-secondary, text-muted, text-inverse, text-link,
+  // Status text
+  success-text, warning-text, error-text, info-text,
+);
+
+@each $token in $_color-tokens {
+  .cia-text-#{$token} { color: var(--#{$token}); }
+}
+
+$_bg-tokens: (
+  // Backgrounds
+  background-default, background-subtle, background-navbar,
+  // Surfaces
+  surface-default, surface-subtle, surface-muted, surface-emphasis,
+  // Status
+  success-subtle, warning-subtle, error-subtle, info-subtle,
+  // Actions
+  action-primary-default, action-secondary-default,
+);
+
+@each $token in $_bg-tokens {
+  .cia-bg-#{$token} { background-color: var(--#{$token}); }
+}
+
+$_border-tokens: (border-default, border-subtle, border-emphasis, border-focus);
+
+@each $token in $_border-tokens {
+  .cia-border-#{$token} { border-color: var(--#{$token}); }
+}
+
+// ============================================================================
+// LAYOUT: display
+// ============================================================================
+
+.cia-block { display: block; }
+.cia-inline-block { display: inline-block; }
+.cia-inline { display: inline; }
+.cia-flex { display: flex; }
+.cia-inline-flex { display: inline-flex; }
+.cia-grid { display: grid; }
+.cia-inline-grid { display: inline-grid; }
+.cia-hidden { display: none; }
+.cia-contents { display: contents; }
+
+// ============================================================================
+// LAYOUT: flexbox
+// ============================================================================
+
+.cia-flex-row { flex-direction: row; }
+.cia-flex-row-reverse { flex-direction: row-reverse; }
+.cia-flex-col { flex-direction: column; }
+.cia-flex-col-reverse { flex-direction: column-reverse; }
+
+.cia-flex-wrap { flex-wrap: wrap; }
+.cia-flex-nowrap { flex-wrap: nowrap; }
+.cia-flex-wrap-reverse { flex-wrap: wrap-reverse; }
+
+.cia-flex-1 { flex: 1 1 0%; }
+.cia-flex-auto { flex: 1 1 auto; }
+.cia-flex-initial { flex: 0 1 auto; }
+.cia-flex-none { flex: none; }
+.cia-flex-grow { flex-grow: 1; }
+.cia-flex-grow-0 { flex-grow: 0; }
+.cia-flex-shrink { flex-shrink: 1; }
+.cia-flex-shrink-0 { flex-shrink: 0; }
+
+// ============================================================================
+// LAYOUT: alignment
+// ============================================================================
+
+.cia-items-start { align-items: flex-start; }
+.cia-items-end { align-items: flex-end; }
+.cia-items-center { align-items: center; }
+.cia-items-baseline { align-items: baseline; }
+.cia-items-stretch { align-items: stretch; }
+
+.cia-justify-start { justify-content: flex-start; }
+.cia-justify-end { justify-content: flex-end; }
+.cia-justify-center { justify-content: center; }
+.cia-justify-between { justify-content: space-between; }
+.cia-justify-around { justify-content: space-around; }
+.cia-justify-evenly { justify-content: space-evenly; }
+
+.cia-self-auto { align-self: auto; }
+.cia-self-start { align-self: flex-start; }
+.cia-self-end { align-self: flex-end; }
+.cia-self-center { align-self: center; }
+.cia-self-stretch { align-self: stretch; }
+
+// Composition shortcuts
+.cia-flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cia-flex-between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.cia-stack {
+  display: flex;
+  flex-direction: column;
+}
+
+// ============================================================================
+// LAYOUT: grid
+// ============================================================================
+
+.cia-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.cia-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.cia-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.cia-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.cia-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+.cia-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+
+.cia-col-span-1 { grid-column: span 1 / span 1; }
+.cia-col-span-2 { grid-column: span 2 / span 2; }
+.cia-col-span-3 { grid-column: span 3 / span 3; }
+.cia-col-span-4 { grid-column: span 4 / span 4; }
+.cia-col-span-6 { grid-column: span 6 / span 6; }
+.cia-col-span-12 { grid-column: span 12 / span 12; }
+.cia-col-span-full { grid-column: 1 / -1; }
+
+// ============================================================================
+// POSITION
+// ============================================================================
+
+.cia-static { position: static; }
+.cia-relative { position: relative; }
+.cia-absolute { position: absolute; }
+.cia-fixed { position: fixed; }
+.cia-sticky { position: sticky; }
+
+.cia-inset-0 { inset: 0; }
+.cia-top-0 { top: 0; }
+.cia-right-0 { right: 0; }
+.cia-bottom-0 { bottom: 0; }
+.cia-left-0 { left: 0; }
+
+// ============================================================================
+// SIZING
+// ============================================================================
+
+.cia-w-full { width: 100%; }
+.cia-w-screen { width: 100vw; }
+.cia-w-auto { width: auto; }
+.cia-w-fit { width: fit-content; }
+.cia-w-min { width: min-content; }
+.cia-w-max { width: max-content; }
+.cia-min-w-0 { min-width: 0; }
+.cia-min-w-full { min-width: 100%; }
+.cia-max-w-none { max-width: none; }
+.cia-max-w-full { max-width: 100%; }
+
+.cia-h-full { height: 100%; }
+.cia-h-screen { height: 100vh; }
+.cia-h-auto { height: auto; }
+.cia-h-fit { height: fit-content; }
+.cia-min-h-0 { min-height: 0; }
+.cia-min-h-screen { min-height: 100vh; }
+.cia-min-h-full { min-height: 100%; }
+
+// ============================================================================
+// BORDER & RADIUS
+// ============================================================================
+
+.cia-border { border: 1px solid var(--border-default); }
+.cia-border-0 { border: 0; }
+.cia-border-t { border-top: 1px solid var(--border-default); }
+.cia-border-r { border-right: 1px solid var(--border-default); }
+.cia-border-b { border-bottom: 1px solid var(--border-default); }
+.cia-border-l { border-left: 1px solid var(--border-default); }
+
+@each $key, $value in t.$theme-radius {
+  .cia-rounded-#{$key} { border-radius: var(--radius-#{$key}, #{$value}); }
+}
+
+// ============================================================================
+// SHADOWS
+// ============================================================================
+
+@each $key, $value in t.$theme-shadows-light {
+  .cia-shadow-#{$key} { box-shadow: var(--shadow-#{$key}, #{$value}); }
+}
+
+// ============================================================================
+// OPACITY
+// ============================================================================
+
+@each $key, $value in s.$opacities {
+  .cia-opacity-#{$key} { opacity: $value; }
+}
+
+// ============================================================================
+// Z-INDEX
+// ============================================================================
+
+@each $key, $value in s.$z-layers {
+  .cia-z-#{$key} { z-index: $value; }
+}
+
+// ============================================================================
+// OVERFLOW
+// ============================================================================
+
+.cia-overflow-auto { overflow: auto; }
+.cia-overflow-hidden { overflow: hidden; }
+.cia-overflow-visible { overflow: visible; }
+.cia-overflow-scroll { overflow: scroll; }
+.cia-overflow-x-auto { overflow-x: auto; }
+.cia-overflow-y-auto { overflow-y: auto; }
+.cia-overflow-x-hidden { overflow-x: hidden; }
+.cia-overflow-y-hidden { overflow-y: hidden; }
+
+// ============================================================================
+// CURSOR & INTERACTION
+// ============================================================================
+
+.cia-cursor-pointer { cursor: pointer; }
+.cia-cursor-default { cursor: default; }
+.cia-cursor-not-allowed { cursor: not-allowed; }
+.cia-pointer-events-none { pointer-events: none; }
+.cia-pointer-events-auto { pointer-events: auto; }
+.cia-select-none { user-select: none; }
+.cia-select-text { user-select: text; }
+.cia-select-all { user-select: all; }
+
+// ============================================================================
+// ACCESSIBILITY
+// ============================================================================
+
+.cia-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.cia-not-sr-only {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  border: 0;
+}
+