css-is-awesome 1.1.0

package/scss/components/_overlay.scss

@@ -0,0 +1,259 @@
+// ============================================================================
+// OVERLAY — Modal, Tooltip, Popover, Dropdown
+// ============================================================================
+@use 'sass:map';
+@use '../theme' as t;
+@use '../system' as s;
+@use '../mixins' as m;
+
+// ----------------------------------------------------------------------------
+// MODAL
+// ----------------------------------------------------------------------------
+@mixin modal-backdrop($bg: rgba(0, 0, 0, 0.5)) {
+  position: fixed;
+  inset: 0;
+  background: $bg;
+  z-index: m.z(backdrop);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin modal-base(
+  $p: 5,
+  $r: xl,
+  $shadow: 5,
+  $max-width: 500px
+) {
+  padding: var(--modal-padding, #{m.space($p)});
+  border-radius: var(--modal-radius, #{m.radius($r)});
+  background: m.color(surface-default);
+  box-shadow: var(--modal-shadow, #{m.shadow($shadow)});
+  width: 90%;
+  max-width: $max-width;
+  max-height: 90vh;
+  overflow-y: auto;
+  z-index: m.z(modal);
+}
+
+@mixin modal-header($pb: 2) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-block-end: m.space($pb);
+  border-block-end: 1px solid m.color(border-default);
+  margin-block-end: m.space(4);
+}
+
+@mixin modal-footer($pt: 2) {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: m.space(2);
+  padding-block-start: m.space($pt);
+  border-block-start: 1px solid m.color(border-default);
+  margin-block-start: m.space(4);
+}
+
+// ----------------------------------------------------------------------------
+// MODAL — public mixin (wraps modal-base for <dialog> semantics)
+// ----------------------------------------------------------------------------
+// Usage (mixin):
+//   .my-dialog { @include modal; }
+//
+// Usage (utility class, opt-in convenience):
+//   <dialog class="cia-modal">…</dialog>
+//
+// Consumer triggers via native DOM: dialog.showModal() / dialog.close().
+// Escape-to-close, focus trapping, background-inert are all native browser
+// behavior — Baseline since 2022. cia ships zero JS for this.
+// ----------------------------------------------------------------------------
+@mixin modal {
+  @include modal-base;
+
+  /* Reset <dialog> browser defaults */
+  border: 0;
+  margin: auto;
+
+  /* Backdrop — native ::backdrop pseudo styles the dimmed background */
+  &::backdrop {
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(2px);
+  }
+
+  /* Open animation — only emits when [open] mounts */
+  &[open] {
+    animation: cia-modal-open var(--duration-normal, 240ms) var(--ease, ease) both;
+  }
+  &[open]::backdrop {
+    animation: cia-modal-backdrop var(--duration-normal, 240ms) var(--ease, ease) both;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &[open], &[open]::backdrop { animation: none; }
+  }
+
+  /* Keyframes scoped via @at-root — emit only when the mixin is called */
+  @at-root {
+    @keyframes cia-modal-open {
+      from { opacity: 0; transform: scale(0.96) translateY(8px); }
+      to   { opacity: 1; transform: scale(1) translateY(0); }
+    }
+    @keyframes cia-modal-backdrop {
+      from { opacity: 0; }
+      to   { opacity: 1; }
+    }
+  }
+}
+
+// ----------------------------------------------------------------------------
+// TOOLTIP
+// ----------------------------------------------------------------------------
+@mixin tooltip-base(
+  $py: 1,
+  $px: 1,
+  $r: md,
+  $bg: text-primary,
+  $color: text-inverse
+) {
+  padding: var(--tooltip-padding-y, #{m.space($py)}) var(--tooltip-padding-x, #{m.space($px)});
+  border-radius: var(--tooltip-radius, #{m.radius($r)});
+  background: m.color($bg);
+  color: m.color($color);
+  @include m.font(reg, 1);
+  white-space: nowrap;
+  z-index: m.z(tooltip);
+}
+
+// ----------------------------------------------------------------------------
+// TOOLTIP — public mixin (wraps tooltip-base for [popover] semantics)
+// ----------------------------------------------------------------------------
+// Usage (mixin):
+//   .info-tip { @include tooltip; }
+//
+// Usage (utility class):
+//   <div popover="hint" class="cia-tooltip">…</div>
+//
+// Consumer pairs with a trigger button:
+//   <button popovertarget="tip-1" type="button" aria-describedby="tip-1">?</button>
+//
+// Browser handles show/close/Escape natively. cia ships zero JS.
+// Position is the consumer's responsibility — anchor() + position-area
+// recipes documented separately.
+// ----------------------------------------------------------------------------
+@mixin tooltip {
+  @include tooltip-base;
+
+  /* Reset [popover] browser defaults */
+  &[popover] {
+    margin: 0;
+    border: 0;
+    inset: unset;
+    overflow: visible;
+  }
+
+  &:popover-open {
+    animation: cia-tooltip-show var(--duration-fast, 180ms) var(--ease, ease) both;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &:popover-open { animation: none; }
+  }
+
+  @at-root {
+    @keyframes cia-tooltip-show {
+      from { opacity: 0; transform: translateY(4px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+  }
+}
+
+// ----------------------------------------------------------------------------
+// POPOVER
+// ----------------------------------------------------------------------------
+@mixin popover-base($p: 4, $r: lg, $shadow: 3, $max-width: 320px) {
+  padding: var(--popover-padding, #{m.space($p)});
+  border-radius: var(--popover-radius, #{m.radius($r)});
+  background: m.color(surface-default);
+  box-shadow: var(--popover-shadow, #{m.shadow($shadow)});
+  border: 1px solid m.color(border-default);
+  max-width: $max-width;
+  z-index: m.z(popover);
+}
+
+// ----------------------------------------------------------------------------
+// DROPDOWN
+// ----------------------------------------------------------------------------
+@mixin dropdown-menu($py: 1, $r: md, $shadow: 2, $min-width: 12rem) {
+  display: flex;
+  flex-direction: column;
+  padding: m.space($py) 0;
+  border-radius: var(--dropdown-radius, #{m.radius($r)});
+  background: m.color(surface-default);
+  box-shadow: var(--dropdown-shadow, #{m.shadow($shadow)});
+  border: 1px solid m.color(border-default);
+  min-width: $min-width;
+  z-index: m.z(dropdown);
+}
+
+@mixin dropdown-item($py: 1, $px: 4) {
+  display: flex;
+  align-items: center;
+  gap: m.space(2);
+  padding: m.space($py) m.space($px);
+  @include m.font(reg, 2);
+  color: m.color(text-primary);
+  text-decoration: none;
+  cursor: pointer;
+  @include m.transition(background-color);
+
+  &:hover { background: m.color(interactive-hover); }
+  &:active { background: m.color(interactive-active); }
+}
+
+@mixin dropdown-divider($spacing: 1) {
+  border: none;
+  border-top: 1px solid m.color(border-default);
+  margin: m.space($spacing) 0;
+}
+
+// ----------------------------------------------------------------------------
+// DROPDOWN — public mixin (wraps dropdown-menu for [popover] semantics)
+// ----------------------------------------------------------------------------
+// Usage (mixin):
+//   .user-menu { @include dropdown; }
+//
+// Usage (utility class):
+//   <div popover class="cia-dropdown">…</div>
+//
+// Consumer pairs with a trigger:
+//   <button popovertarget="user-menu" type="button">Menu</button>
+//
+// Browser handles auto-dismiss (click outside), Escape, focus. Zero cia JS.
+// Anchor positioning (anchor() + position-area) covered in a separate docs
+// recipe for browsers that support it.
+// ----------------------------------------------------------------------------
+@mixin dropdown {
+  @include dropdown-menu;
+
+  /* Reset [popover] browser defaults */
+  &[popover] {
+    margin: 0;
+    inset: unset;
+  }
+
+  &:popover-open {
+    animation: cia-dropdown-show var(--duration-fast, 180ms) var(--ease, ease) both;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    &:popover-open { animation: none; }
+  }
+
+  @at-root {
+    @keyframes cia-dropdown-show {
+      from { opacity: 0; transform: translateY(-4px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+  }
+}

package/scss/components/_stepper.scss

@@ -0,0 +1,159 @@
+// ============================================================================
+// STEPPER — multi-step progress indicator with status-driven styling
+// ============================================================================
+// Mixin-first surface — consumer owns the markup (which React component goes
+// in each slot, how status is computed). cia provides the geometry + status
+// palette via [data-status="upcoming|active|completed|warning|error"] on the
+// <li> element.
+//
+// Three composable mixins:
+//   - stepper-circle($size, $r) — single step indicator (default = upcoming look)
+//   - stepper-connector         — line between two steps (default = neutral)
+//   - stepper($orientation, $size, $gap) — composed router. Wraps circles +
+//     connectors + labels and applies the FULL status palette via parent
+//     [data-status] on each <li>.
+//
+// Usage:
+//   <ol class="checkout-stepper">
+//     <li data-status="completed"><span data-slot="circle">✓</span><span data-slot="label">Account</span></li>
+//     <li data-status="active"   ><span data-slot="circle">2</span><span data-slot="label">Profile</span></li>
+//     <li data-status="upcoming" ><span data-slot="circle">3</span><span data-slot="label">Review</span></li>
+//   </ol>
+//   .checkout-stepper { @include stepper; }
+//
+// Colorblind-friendly status shapes (check / triangle / diamond) are
+// React-side concerns; pair this mixin with a Status component that swaps
+// the data-status icon. The mixin only ships the color palette.
+// ============================================================================
+@use 'sass:map';
+@use '../theme' as t;
+@use '../system' as s;
+@use '../mixins' as m;
+
+// ----------------------------------------------------------------------------
+// STEPPER-CIRCLE — single indicator (default "upcoming" appearance)
+// ----------------------------------------------------------------------------
+// Status palette is applied by stepper() at the composer level where the
+// parent [data-status] context exists. Standalone use gives you the
+// upcoming look — override the status palette in your own SCSS.
+@mixin stepper-circle(
+  $size: 36px,
+  $r: full,
+) {
+  inline-size: $size;
+  block-size: $size;
+  border-radius: m.radius($r);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  @include m.transition(background-color, border-color, color);
+
+  // Default = upcoming status
+  background: m.color(surface-default);
+  border: 2px solid m.color(border-default);
+  color: m.color(text-muted);
+}
+
+// ----------------------------------------------------------------------------
+// STEPPER-CONNECTOR — line between steps (default neutral)
+// ----------------------------------------------------------------------------
+@mixin stepper-connector($thickness: 2px) {
+  flex-grow: 1;
+  block-size: $thickness;
+  background: m.color(border-default);
+  @include m.transition(background-color);
+}
+
+// ----------------------------------------------------------------------------
+// STEPPER — composed router (applies the full status palette)
+// ----------------------------------------------------------------------------
+@mixin stepper(
+  $orientation: horizontal,
+  $size: 36px,
+  $gap: 2,
+) {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  gap: m.space($gap);
+
+  @if $orientation == horizontal {
+    flex-direction: row;
+    align-items: center;
+  } @else if $orientation == vertical {
+    flex-direction: column;
+    align-items: flex-start;
+  } @else {
+    @error "stepper(): unknown orientation '#{$orientation}'. Known: horizontal, vertical";
+  }
+
+  > li {
+    display: inline-flex;
+    align-items: center;
+    gap: m.space($gap);
+    flex-shrink: 0;
+
+    @if $orientation == horizontal {
+      flex-grow: 1;
+      &:last-child { flex-grow: 0; }
+    }
+  }
+
+  // Slot primitives — defaults
+  [data-slot='circle']    { @include stepper-circle($size); }
+  [data-slot='connector'] { @include stepper-connector; }
+  [data-slot='label'] {
+    @include m.font(medium, 2);
+    color: m.color(text-secondary);
+  }
+
+  // Status palette — applied at the composer level so the parent <li>
+  // [data-status] context is available without selector contortions.
+  > li[data-status='active'] {
+    > [data-slot='circle'] {
+      background: m.color(action-primary-default);
+      border-color: transparent;
+      color: m.color(text-inverse);
+      box-shadow: 0 0 0 4px color-mix(in oklch, m.color(action-primary-default), transparent 80%);
+    }
+    > [data-slot='label'] {
+      color: m.color(text-primary);
+    }
+  }
+
+  > li[data-status='completed'] {
+    > [data-slot='circle'] {
+      background: m.color(success-default);
+      border-color: transparent;
+      color: m.color(text-inverse);
+    }
+    > [data-slot='label'] {
+      color: m.color(success-text);
+    }
+  }
+
+  > li[data-status='warning'] {
+    > [data-slot='circle'] {
+      background: m.color(warning-subtle);
+      border-color: m.color(warning-text);
+      color: m.color(warning-text);
+    }
+  }
+
+  > li[data-status='error'] {
+    > [data-slot='circle'] {
+      background: m.color(error-subtle);
+      border-color: m.color(error-text);
+      color: m.color(error-text);
+    }
+  }
+
+  // Connector palette — only the connector IMMEDIATELY after a completed
+  // step gets the success color. Adjacent sibling (+), not general sibling (~),
+  // so connectors after an "upcoming" step don't get over-greened.
+  > li[data-status='completed'] + li > [data-slot='connector'] {
+    background: m.color(success-default);
+  }
+}

package/scss/components/_tabs.scss

@@ -0,0 +1,72 @@
+// ============================================================================
+// TABS
+// ============================================================================
+// Native <input type="radio"> state + :has() + :nth-of-type() pattern.
+// Zero JavaScript for panel-switching.
+//
+// Usage:
+//   <div class="cia-tabs">
+//     <input type="radio" name="t" id="t1" checked>
+//     <input type="radio" name="t" id="t2">
+//     <div class="cia-tab-list" role="tablist">
+//       <label for="t1" role="tab">Tab 1</label>
+//       <label for="t2" role="tab">Tab 2</label>
+//     </div>
+//     <div class="cia-tab-panel" role="tabpanel">Content 1</div>
+//     <div class="cia-tab-panel" role="tabpanel">Content 2</div>
+//   </div>
+//
+// A11y baseline: keyboard nav (Tab + arrows + Space) and screen-reader text
+// are native. For full aria-selected sync ship the tiny opt-in JS shim
+// documented at /docs/components/tabs#aria.
+//
+// :has() Baseline Dec 2023; :nth-of-type() universal.
+// ============================================================================
+@use '../mixins' as m;
+
+@mixin tabs($max-tabs: 12) {
+  display: flex;
+  flex-direction: column;
+
+  /* Hide radios — functional only, not visual */
+  > input[type="radio"] {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  > .cia-tab-list {
+    display: flex;
+    gap: m.space(1);
+    border-block-end: 1px solid m.color(border-default);
+
+    > label {
+      padding: m.space(2) m.space(3);
+      cursor: pointer;
+      color: m.color(text-secondary);
+      border-block-end: 2px solid transparent;
+      margin-block-end: -1px;
+      min-height: var(--touch-target-min, 24px);
+      @include m.transition(border-color, color);
+
+      &:hover { color: m.color(text-primary); }
+      @include m.focus-ring;
+    }
+  }
+
+  > .cia-tab-panel {
+    display: none;
+    padding-block-start: m.space(4);
+  }
+
+  /* For each (nth input checked) → show nth panel + style nth label */
+  @for $i from 1 through $max-tabs {
+    &:has(> input:nth-of-type(#{$i}):checked) > .cia-tab-panel:nth-of-type(#{$i}) {
+      display: block;
+    }
+    &:has(> input:nth-of-type(#{$i}):checked) > .cia-tab-list > label:nth-of-type(#{$i}) {
+      color: m.color(text-primary);
+      border-block-end-color: m.color(action-primary-default);
+    }
+  }
+}

package/scss/core.scss

@@ -0,0 +1,54 @@
+// ============================================================================
+// CORE - Tokens + resets only (no utilities)
+// ============================================================================
+@use './generator';
+@use './mixins' as m;
+
+@include generator.generate-theme;
+
+// WCAG 2.2 SC 2.5.8 — minimum touch-target size. Themes can override.
+:root {
+  --touch-target-min: 24px;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  margin: 0;
+  font-family: m.font-family(primary);
+  font-size: m.font-size(base);
+  line-height: m.line-height(normal);
+  color: m.color(text-primary);
+  background: m.color(surface-default);
+}
+
+@include m.header-reset;
+@include m.form-reset;
+
+a {
+  color: m.color(text-link);
+  text-decoration: none;
+  @include m.transition(color);
+
+  &:hover {
+    color: m.color(text-link-hover);
+  }
+}
+
+:focus-visible {
+  outline: 2px solid m.color(border-focus);
+  outline-offset: 2px;
+}
+
+:focus:not(:focus-visible) {
+  outline: none;
+}

package/scss/examples/_theming.scss

@@ -0,0 +1,107 @@
+// ============================================================================
+// THEMING EXAMPLES
+// ============================================================================
+// Shows how consumers can customize css-is-awesome without forking.
+// ============================================================================
+
+// ---------------------------------------------------------------------------
+// METHOD 1: CSS Custom Property Overrides (easiest, runtime-capable)
+// ---------------------------------------------------------------------------
+// Just set CSS custom properties at :root to remap any token.
+// This works with the compiled CSS — no SCSS needed.
+//
+// :root {
+//   --brand-primary: #E11D48;
+//   --brand-primary-hover: #BE123C;
+//   --brand-primary-active: #9F1239;
+//   --action-primary-default: #E11D48;
+//   --action-primary-hover: #BE123C;
+//   --action-primary-active: #9F1239;
+//   --font-primary: "Poppins", sans-serif;
+//   --radius-md: 0.5rem;
+// }
+
+// ---------------------------------------------------------------------------
+// METHOD 2: SCSS-Level Overrides (full control, compile-time)
+// ---------------------------------------------------------------------------
+// Override the theme maps before importing the generator.
+//
+// @use "css-is-awesome/scss/theme" with (
+//   $brand: (
+//     primary:        #E11D48,
+//     primary-hover:  #BE123C,
+//     primary-active: #9F1239,
+//     secondary:      #8B5CF6,
+//     secondary-hover:#7C3AED,
+//     secondary-active:#6D28D9,
+//     accent:         #06B6D4,
+//     accent-hover:   #0891B2,
+//   )
+// );
+// @use "css-is-awesome/scss/generator";
+// @include generator.generate-theme;
+
+// ---------------------------------------------------------------------------
+// METHOD 3: Multi-Brand Theming
+// ---------------------------------------------------------------------------
+// Use data-theme attributes for brand + mode combinations.
+
+// Brand A — Rose theme
+[data-theme="brand-a-light"] {
+  --brand-primary: #E11D48;
+  --brand-primary-hover: #BE123C;
+  --brand-primary-active: #9F1239;
+  --action-primary-default: #E11D48;
+  --action-primary-hover: #BE123C;
+  --action-primary-active: #9F1239;
+  --brand-secondary: #8B5CF6;
+  --brand-secondary-hover: #7C3AED;
+  --brand-secondary-active: #6D28D9;
+  --action-secondary-default: #8B5CF6;
+  --action-secondary-hover: #7C3AED;
+  --action-secondary-active: #6D28D9;
+}
+
+[data-theme="brand-a-dark"] {
+  --brand-primary: #FB7185;
+  --brand-primary-hover: #F43F5E;
+  --brand-primary-active: #E11D48;
+  --action-primary-default: #FB7185;
+  --action-primary-hover: #F43F5E;
+  --action-primary-active: #E11D48;
+  --brand-secondary: #A78BFA;
+  --brand-secondary-hover: #8B5CF6;
+  --brand-secondary-active: #7C3AED;
+  --action-secondary-default: #A78BFA;
+  --action-secondary-hover: #8B5CF6;
+  --action-secondary-active: #7C3AED;
+  --background-default: #0A0A0A;
+  --surface-default: #151515;
+  --text-primary: #FFF;
+  --text-secondary: #B8B8B8;
+  --border-default: #2A2A2A;
+}
+
+// Brand B — Teal theme
+[data-theme="brand-b-light"] {
+  --brand-primary: #0D9488;
+  --brand-primary-hover: #0F766E;
+  --brand-primary-active: #115E59;
+  --action-primary-default: #0D9488;
+  --action-primary-hover: #0F766E;
+  --action-primary-active: #115E59;
+}
+
+[data-theme="brand-b-dark"] {
+  --brand-primary: #2DD4BF;
+  --brand-primary-hover: #14B8A6;
+  --brand-primary-active: #0D9488;
+  --action-primary-default: #2DD4BF;
+  --action-primary-hover: #14B8A6;
+  --action-primary-active: #0D9488;
+  --background-default: #0A0A0A;
+  --surface-default: #151515;
+  --text-primary: #FFF;
+  --text-secondary: #B8B8B8;
+  --border-default: #2A2A2A;
+}