@oleksandr-94/aura-css 0.1.0

package/src/_tokens.scss

@@ -0,0 +1,65 @@
+// ============================================================
+// Aura — tokens
+// Emits static scales + generates every theme from config.
+// Components must only ever reference these CSS variables.
+// ============================================================
+@use "sass:map";
+@use "./config" as cfg;
+@use "./functions" as fn;
+
+// ---- Static, theme-independent scales ----
+:root {
+  // radius
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-pill: 999px;
+  // spacing (4pt)
+  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
+  --space-4: 16px; --space-6: 24px; --space-8: 32px;
+  // type
+  --font: "Plus Jakarta Sans", system-ui, sans-serif;
+  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 20px;
+  // surface effects
+  --blur: 20px;
+  // general brand gradient (auto-adapts to each theme's accents).
+  // Per-colour button gradients are derived inline from the button's own colour.
+  --gradient: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+  --gradient-tint: #ffd23f;   // warm highlight mixed into the light end of button gradients
+  // z-index scale
+  --z-dropdown: 1000;
+  --z-sticky:   1020;
+  --z-modal:    1050;
+  --z-toast:    1080;
+}
+
+// ---- Per-theme colour roles ----
+@mixin emit-theme($c) {
+  // accents + status: derive on-* (content) and *-container automatically
+  @each $role in (primary, secondary, accent, success, warning, error, info) {
+    $val: map.get($c, $role);
+    @if $val {
+      --#{$role}: #{$val};
+      --on-#{$role}: #{fn.on-color($val)};
+      // subtle tinted fill for badges/alerts + its content colour
+      --#{$role}-container: color-mix(in srgb, #{$val} 16%, transparent);
+      --on-#{$role}-container: #{$val};
+    }
+  }
+  // surfaces + lines + elevation (provided explicitly)
+  @each $role in (surface, surface-1, surface-2, on-surface, on-surface-muted,
+                  outline, outline-strong, glass-film, glass-film-2,
+                  tip-bg, tip-text, shadow-1, shadow-2) {
+    $val: map.get($c, $role);
+    @if $val { --#{$role}: #{$val}; }
+  }
+}
+
+@each $name, $colors in cfg.$themes {
+  @if $name == cfg.$default-theme {
+    :root,
+    [data-theme="#{$name}"] { @include emit-theme($colors); }
+  } @else {
+    [data-theme="#{$name}"] { @include emit-theme($colors); }
+  }
+}

package/src/base/_a11y.scss

@@ -0,0 +1,31 @@
+// ============================================================
+// Aura — accessibility base
+// In the last cascade layer so it overrides Aura's own component
+// motion, but stays below the host app's unlayered styles (we never
+// clobber the host's animations).
+// ============================================================
+@use "../config" as cfg;
+$p: cfg.$prefix;
+
+@layer a11y {
+  // Respect the user's reduced-motion preference for Aura components.
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after {
+      animation-duration: 1ms;
+      animation-iteration-count: 1;
+      transition-duration: 1ms;
+      scroll-behavior: auto;
+    }
+  }
+
+  // Screen-reader-only helper (visually hidden, still announced).
+  .#{$p}sr-only {
+    position: absolute !important;
+    width: 1px; height: 1px;
+    padding: 0; margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+}

package/src/base/_reset.scss

@@ -0,0 +1,7 @@
+// ============================================================
+// Aura — minimal, non-destructive reset (scoped to a layer so a
+// host app's styles always win over it).
+// ============================================================
+@layer base {
+  *, *::before, *::after { box-sizing: border-box; }
+}

package/src/components/_accordion.scss

@@ -0,0 +1,62 @@
+// ============================================================
+// Aura — Accordion
+// Built on native <details>/<summary> — zero JS, accessible,
+// keyboard-friendly. Frameworks bind the `open` attribute.
+// ============================================================
+@use "../config" as cfg;
+@use "../surface" as s;
+$p: cfg.$prefix;
+
+@layer components {
+  .#{$p}accordion {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .#{$p}accordion__item {
+    border-radius: var(--radius-md);
+    overflow: hidden;
+    @include s.surface(1);
+  }
+
+  .#{$p}accordion__head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 14px 16px;
+    font-weight: 700;
+    font-size: var(--fs-md);
+    cursor: pointer;
+    list-style: none;
+    user-select: none;
+
+    &::-webkit-details-marker { display: none; }
+    // CSS chevron (crisp, scales with border-width)
+    &::after {
+      content: "";
+      flex: none;
+      width: 9px;
+      height: 9px;
+      margin-inline-start: 8px;
+      border-right: 2px solid var(--on-surface-muted);
+      border-bottom: 2px solid var(--on-surface-muted);
+      border-bottom-right-radius: 2px;
+      transform: translateY(-2px) rotate(45deg);
+      transition: transform .2s ease;
+    }
+    &:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
+  }
+
+  .#{$p}accordion__item[open] > .#{$p}accordion__head::after {
+    transform: translateY(2px) rotate(-135deg);
+  }
+
+  .#{$p}accordion__body {
+    padding: 0 16px 16px;
+    color: var(--on-surface-muted);
+    font-size: var(--fs-sm);
+    line-height: 1.5;
+  }
+}

package/src/components/_alert.scss

@@ -0,0 +1,43 @@
+// ============================================================
+// Aura — Alert
+// Message panel with an accent bar + icon. The accent colour lives
+// in --_c so variants are one line. Colour tint is constant; the
+// skin only adds surface feel via chip().
+// ============================================================
+@use "../config" as cfg;
+@use "../surface" as s;
+$p: cfg.$prefix;
+
+@layer components {
+  .#{$p}alert {
+    --_c: var(--primary);
+
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 14px 16px;
+    border-radius: var(--radius-md);
+    background: color-mix(in srgb, var(--_c) 13%, var(--surface-1));
+    color: var(--on-surface);
+    border: 1px solid var(--outline);
+    border-left: 3px solid var(--_c);
+    font-size: var(--fs-md);
+
+    @include s.chip;            // glass gloss / neu extrusion / flat
+
+    // ---- colour variants ----
+    &.#{$p}alert--success { --_c: var(--success); }
+    &.#{$p}alert--warning { --_c: var(--warning); }
+    &.#{$p}alert--error   { --_c: var(--error); }
+    &.#{$p}alert--info    { --_c: var(--info); }
+  }
+
+  .#{$p}alert__icon {
+    color: var(--_c);
+    font-size: 18px;
+    line-height: 1.35;
+    flex: none;
+  }
+  .#{$p}alert__title { font-weight: 700; }
+  .#{$p}alert__body  { color: var(--on-surface-muted); font-size: var(--fs-sm); margin-top: 2px; }
+}

package/src/components/_avatar.scss

@@ -0,0 +1,50 @@
+// ============================================================
+// Aura — Avatar (+ group, + status dot)
+// ============================================================
+@use "../config" as cfg;
+$p: cfg.$prefix;
+
+@layer components {
+  .#{$p}avatar {
+    position: relative;
+    display: inline-grid;
+    place-items: center;
+    width: 40px;
+    height: 40px;
+    flex: none;
+    border-radius: 50%;
+    overflow: hidden;
+    font-weight: 700;
+    font-size: var(--fs-md);
+    color: var(--on-surface);
+    background: color-mix(in srgb, var(--primary) 22%, var(--surface-2));
+    border: 2px solid var(--surface-1);
+  }
+  .#{$p}avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: inherit;
+  }
+  .#{$p}avatar--sm { width: 30px; height: 30px; font-size: var(--fs-xs); }
+  .#{$p}avatar--lg { width: 56px; height: 56px; font-size: var(--fs-xl); }
+  .#{$p}avatar--square { border-radius: var(--radius-md); }
+
+  // ---- status dot ----
+  .#{$p}avatar__status {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 11px;
+    height: 11px;
+    border-radius: 50%;
+    background: var(--on-surface-muted);
+    border: 2px solid var(--surface-1);
+  }
+  .#{$p}avatar__status--online { background: var(--success); }
+  .#{$p}avatar__status--busy   { background: var(--error); }
+
+  // ---- overlapping group ----
+  .#{$p}avatar-group { display: inline-flex; }
+  .#{$p}avatar-group .#{$p}avatar:not(:first-child) { margin-left: -12px; }
+}

package/src/components/_badge.scss

@@ -0,0 +1,61 @@
+// ============================================================
+// Aura — Badge
+// Small status / label pill. Colour variants use the *-container
+// tokens (soft tint + readable content colour), so contrast is
+// guaranteed. The colour tint is constant; the active skin only adds
+// surface feel via chip() (flat / glass gloss / neu extrusion).
+// ============================================================
+@use "../config" as cfg;
+@use "../surface" as s;
+$p: cfg.$prefix;
+
+@layer components {
+  .#{$p}badge {
+    --_bg: color-mix(in srgb, var(--on-surface) 10%, transparent);
+    --_fg: var(--on-surface);
+
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 3px 10px;
+    font-size: var(--fs-xs);
+    font-weight: 700;
+    line-height: 1.5;
+    white-space: nowrap;
+    border-radius: var(--radius-pill);
+    border: 1px solid transparent;
+    background: var(--_bg);
+    color: var(--_fg);
+
+    @include s.chip;            // skin feel (glass gloss / neu extrusion)
+
+    // ---- colour variants (soft) ----
+    &.#{$p}badge--primary   { --_bg: var(--primary-container);   --_fg: var(--on-primary-container); }
+    &.#{$p}badge--secondary { --_bg: var(--secondary-container); --_fg: var(--on-secondary-container); }
+    &.#{$p}badge--accent    { --_bg: var(--accent-container);    --_fg: var(--on-accent-container); }
+    &.#{$p}badge--success   { --_bg: var(--success-container);   --_fg: var(--on-success-container); }
+    &.#{$p}badge--warning   { --_bg: var(--warning-container);   --_fg: var(--on-warning-container); }
+    &.#{$p}badge--error     { --_bg: var(--error-container);     --_fg: var(--on-error-container); }
+    &.#{$p}badge--info      { --_bg: var(--info-container);      --_fg: var(--on-info-container); }
+
+    // ---- style variant ----
+    &.#{$p}badge--outline {
+      background: transparent;
+      border-color: color-mix(in srgb, var(--_fg) 45%, transparent);
+      box-shadow: none;
+    }
+
+    // ---- sizes ----
+    &.#{$p}badge--sm { padding: 2px 8px;  font-size: 11px; }
+    &.#{$p}badge--lg { padding: 5px 13px; font-size: var(--fs-sm); }
+  }
+
+  // Optional leading status dot: <span class="badge badge--success"><i class="badge__dot"></i> Active</span>
+  .#{$p}badge__dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: currentColor;
+    flex: none;
+  }
+}

package/src/components/_button.scss

@@ -0,0 +1,79 @@
+// ============================================================
+// Aura — Button
+// Colour comes from --_bg / --_fg locals (one-line variants).
+// Chrome (fill / shadow / press) comes from the active skin via
+// control() — so buttons are glassy / flat / neumorphic to match.
+// ============================================================
+@use "../config" as cfg;
+@use "../surface" as s;
+$p: cfg.$prefix;
+
+@layer components {
+  .#{$p}btn {
+    --_c: var(--primary);        // semantic colour (drives fill + gradient + outline)
+    --_bg: var(--_c);            // solid fill by default
+    --_fg: var(--on-primary);
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    font: inherit;
+    font-weight: 700;
+    font-size: var(--fs-md);
+    line-height: 1;
+    padding: 10px 18px;
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: filter .15s ease, transform .05s ease, box-shadow .15s ease;
+
+    @include s.control;            // skin-aware fill / shadow
+
+    &:hover   { filter: brightness(1.06); }
+    &:active  { @include s.control-active; }
+    &:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
+    &:disabled,
+    &.#{$p}btn--disabled { opacity: .5; cursor: not-allowed; filter: none; }
+
+    // ---- colour variants ----
+    &.#{$p}btn--secondary { --_c: var(--secondary); --_fg: var(--on-secondary); }
+    &.#{$p}btn--accent    { --_c: var(--accent);    --_fg: var(--on-accent); }
+    &.#{$p}btn--success   { --_c: var(--success);   --_fg: var(--on-success); }
+    &.#{$p}btn--warning   { --_c: var(--warning);   --_fg: var(--on-warning); }
+    &.#{$p}btn--error     { --_c: var(--error);     --_fg: var(--on-error); }
+    &.#{$p}btn--info      { --_c: var(--info);      --_fg: var(--on-info); }
+
+    // gradient fill — derived from the current colour (--_c). Combine with any
+    // colour modifier: .btn--gradient.btn--success, .btn--gradient.btn--error, …
+    &.#{$p}btn--gradient {
+      --_bg: linear-gradient(135deg,
+        color-mix(in srgb, var(--_c) 62%, var(--gradient-tint)) 0%,
+        var(--_c) 48%,
+        color-mix(in srgb, var(--_c) 84%, #000) 100%);
+      --_shadow-color: var(--_c);
+    }
+
+    // ---- style variants (skin chrome removed) ----
+    &.#{$p}btn--ghost {
+      background: transparent;
+      color: var(--on-surface);
+      border: 1px solid var(--outline-strong);
+      box-shadow: none;
+      &:hover  { background: color-mix(in srgb, var(--on-surface) 8%, transparent); filter: none; }
+      &:active { box-shadow: none; transform: translateY(1px); }
+    }
+    &.#{$p}btn--outline {
+      background: transparent;
+      color: var(--_c);
+      border: 1px solid var(--_c);
+      box-shadow: none;
+      &:hover  { background: color-mix(in srgb, var(--_c) 12%, transparent); filter: none; }
+      &:active { box-shadow: none; transform: translateY(1px); }
+    }
+
+    // ---- sizes ----
+    &.#{$p}btn--sm { padding: 7px 12px;  font-size: var(--fs-sm); border-radius: var(--radius-sm); }
+    &.#{$p}btn--lg { padding: 13px 22px; font-size: var(--fs-lg); }
+    &.#{$p}btn--block { display: flex; width: 100%; }
+  }
+}

package/src/components/_card.scss

@@ -0,0 +1,58 @@
+// ============================================================
+// Aura — Card
+// Surface container rendered through the active skin. Optional
+// status accent (coloured left bar) and gradient fill, both driven
+// by --_c so they follow the colour and stay themeable.
+// ============================================================
+@use "../config" as cfg;
+@use "../surface" as s;
+$p: cfg.$prefix;
+
+@layer components {
+  .#{$p}card {
+    --_c: var(--primary);
+    @include s.surface(1);
+    border-radius: var(--radius-lg);
+    padding: var(--space-6);
+    color: var(--on-surface);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+  }
+
+  .#{$p}card__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+  }
+  .#{$p}card__title { margin: 0; font-size: var(--fs-xl); font-weight: 800; }
+  .#{$p}card__body  { margin: 0; color: var(--on-surface-muted); font-size: var(--fs-md); line-height: 1.5; }
+  .#{$p}card__actions { display: flex; gap: var(--space-2); margin-top: auto; }
+
+  // ---- status accent (coloured left bar) ----
+  .#{$p}card--primary { --_c: var(--primary); }
+  .#{$p}card--success { --_c: var(--success); }
+  .#{$p}card--warning { --_c: var(--warning); }
+  .#{$p}card--error   { --_c: var(--error); }
+  .#{$p}card--info    { --_c: var(--info); }
+  .#{$p}card--primary,
+  .#{$p}card--success,
+  .#{$p}card--warning,
+  .#{$p}card--error,
+  .#{$p}card--info {
+    border-inline-start: 3px solid var(--_c);
+  }
+
+  // ---- gradient fill (follows --_c; combine with a colour modifier) ----
+  .#{$p}card--gradient {
+    background: linear-gradient(135deg,
+      color-mix(in srgb, var(--_c) 62%, var(--gradient-tint)) 0%,
+      var(--_c) 48%,
+      color-mix(in srgb, var(--_c) 84%, #000) 100%);
+    border: none;
+    color: #fff;
+
+    .#{$p}card__body { color: rgba(255, 255, 255, .82); }
+  }
+}

package/src/components/_checkbox.scss

@@ -0,0 +1,51 @@
+// ============================================================
+// Aura — Checkbox
+// Custom control (appearance:none). Box is a skin-aware well via
+// field(); checked/indeterminate fill with --_c + white mark.
+// ============================================================
+@use "../config" as cfg;
+@use "../surface" as s;
+$p: cfg.$prefix;
+
+@layer components {
+  .#{$p}checkbox {
+    --_c: var(--primary);
+    appearance: none;
+    -webkit-appearance: none;
+    margin: 0;
+    flex: none;
+    width: 18px;
+    height: 18px;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    position: relative;
+    vertical-align: middle;
+    transition: background .15s ease, border-color .15s ease;
+    @include s.field;
+
+    &:checked,
+    &:indeterminate { --_bg: var(--_c); --_fg: #fff; @include s.control; }
+
+    &:checked::after {
+      content: "";
+      position: absolute;
+      left: 50%; top: 50%;
+      width: 5px; height: 9px;
+      border: solid #fff; border-width: 0 2px 2px 0;
+      transform: translate(-50%, -58%) rotate(45deg);
+    }
+    &:indeterminate::after {
+      content: "";
+      position: absolute;
+      left: 3px; right: 3px; top: calc(50% - 1px);
+      height: 2px; background: #fff; border-radius: 1px;
+    }
+
+    &:focus-visible { outline: 2px solid var(--_c); outline-offset: 2px; }
+    &:disabled { opacity: .5; cursor: not-allowed; }
+
+    &.#{$p}checkbox--success { --_c: var(--success); }
+    &.#{$p}checkbox--warning { --_c: var(--warning); }
+    &.#{$p}checkbox--error   { --_c: var(--error); }
+  }
+}

package/src/components/_dropdown.scss

@@ -0,0 +1,73 @@
+// ============================================================
+// Aura — Dropdown
+// Driven by [data-state] on the .dropdown root. A trigger with
+// data-toggle flips it; the JS handles outside-click + Esc + aria.
+// The menu is a skin-aware elevated surface.
+// ============================================================
+@use "../config" as cfg;
+@use "../surface" as s;
+$p: cfg.$prefix;
+
+@layer components {
+  .#{$p}dropdown {
+    position: relative;
+    display: inline-block;
+  }
+
+  .#{$p}dropdown__menu {
+    position: absolute;
+    top: calc(100% + 6px);
+    left: 0;
+    z-index: var(--z-dropdown);
+    min-width: 180px;
+    padding: 6px;
+    border-radius: var(--radius-md);
+    @include s.surface(2);
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-4px);
+    transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
+  }
+  .#{$p}dropdown__menu--end { left: auto; right: 0; }
+
+  .#{$p}dropdown[data-state="open"] .#{$p}dropdown__menu {
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+  }
+
+  .#{$p}dropdown__item {
+    display: block;
+    width: 100%;
+    text-align: left;
+    padding: 9px 12px;
+    border: none;
+    border-radius: var(--radius-sm);
+    background: none;
+    color: var(--on-surface);
+    font: inherit;
+    font-size: var(--fs-sm);
+    font-weight: 600;
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover { background: color-mix(in srgb, var(--on-surface) 8%, transparent); }
+  }
+  .#{$p}dropdown__divider { height: 1px; margin: 6px 4px; background: var(--outline); }
+
+  // CSS caret for the trigger — rotates when the dropdown is open
+  .#{$p}dropdown__caret {
+    display: inline-block;
+    width: 8px;
+    height: 8px;
+    margin-inline-start: 6px;
+    border-right: 2px solid currentColor;
+    border-bottom: 2px solid currentColor;
+    border-bottom-right-radius: 2px;
+    transform: translateY(-2px) rotate(45deg);
+    transition: transform .2s ease;
+  }
+  .#{$p}dropdown[data-state="open"] .#{$p}dropdown__caret {
+    transform: translateY(1px) rotate(-135deg);
+  }
+}

package/src/components/_file.scss

@@ -0,0 +1,42 @@
+// ============================================================
+// Aura — File input
+// Styles the native ::file-selector-button as an Aura button; the
+// filename text is muted. Colour follows --_c.
+// ============================================================
+@use "../config" as cfg;
+$p: cfg.$prefix;
+
+@layer components {
+  .#{$p}file {
+    --_c: var(--primary);
+    max-width: 100%;
+    font: inherit;
+    font-size: var(--fs-sm);
+    color: var(--on-surface-muted);
+    cursor: pointer;
+
+    &::file-selector-button {
+      font: inherit;
+      font-weight: 700;
+      font-size: var(--fs-sm);
+      margin-inline-end: 12px;
+      padding: 8px 14px;
+      border: none;
+      border-radius: var(--radius-md);
+      background: var(--_c);
+      color: var(--on-primary);
+      cursor: pointer;
+      transition: filter .15s ease;
+    }
+    &::file-selector-button:hover { filter: brightness(1.06); }
+
+    &:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-md); }
+    &:disabled { opacity: .5; cursor: not-allowed; }
+
+    &.#{$p}file--ghost::file-selector-button {
+      background: transparent;
+      color: var(--on-surface);
+      border: 1px solid var(--outline-strong);
+    }
+  }
+}

package/src/components/_group.scss

@@ -0,0 +1,51 @@
+// ============================================================
+// Aura — Group (join)
+// Joins adjacent controls — buttons AND form fields — into one
+// segmented unit: square inner corners, rounded outer corners, a
+// single shared border (adjacent borders overlap, never doubled).
+// `.btn-group` is kept as an alias.
+// ============================================================
+@use "../config" as cfg;
+$p: cfg.$prefix;
+
+@layer components {
+  .#{$p}group,
+  .#{$p}btn-group {
+    display: inline-flex;
+    align-items: stretch;
+    border-radius: var(--radius-md);
+
+    > * {
+      position: relative;
+      border-radius: 0;
+      box-shadow: none;       // flatten per-item chrome inside the group
+    }
+    // overlap adjacent borders → one seam, not two
+    > :not(:first-child) { margin-inline-start: -1px; }
+    // bring the active item's border above its neighbours
+    > :hover,
+    > :focus-visible,
+    > :focus-within { z-index: 1; }
+
+    // round only the outermost corners
+    > :first-child {
+      border-start-start-radius: var(--radius-md);
+      border-end-start-radius: var(--radius-md);
+    }
+    > :last-child {
+      border-start-end-radius: var(--radius-md);
+      border-end-end-radius: var(--radius-md);
+    }
+
+    // fields grow to fill; buttons keep their natural width
+    > .#{$p}input,
+    > .#{$p}select { flex: 1; width: auto; min-width: 0; }
+  }
+
+  .#{$p}group--block,
+  .#{$p}btn-group--block {
+    display: flex;
+    width: 100%;
+    > * { flex: 1; }
+  }
+}