@oleksandr-94/aura-css 0.1.0

package/src/components/_input.scss

@@ -0,0 +1,85 @@
+// ============================================================
+// Aura — Input / Select / Textarea (+ field wrapper)
+// Controls render their "well" through the field() mixin, so they
+// pick up the active skin (glass / flat / neu) automatically.
+// ============================================================
+@use "../config" as cfg;
+@use "../surface" as s;
+$p: cfg.$prefix;
+
+@layer components {
+  // ---- labelled wrapper ----
+  .#{$p}field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+  }
+  .#{$p}field__label {
+    font-size: var(--fs-xs);
+    font-weight: 600;
+    color: var(--on-surface);
+  }
+  .#{$p}field__label--required::after { content: " *"; color: var(--error); }
+  .#{$p}field__hint {
+    font-size: var(--fs-xs);
+    color: var(--on-surface-muted);
+  }
+  .#{$p}field__hint--error   { color: var(--error); }
+  .#{$p}field__hint--success { color: var(--success); }
+
+  // ---- controls ----
+  .#{$p}input,
+  .#{$p}select,
+  .#{$p}textarea {
+    @include s.field;
+    font: inherit;
+    font-size: var(--fs-md);
+    color: var(--on-surface);
+    width: 100%;
+    padding: 10px 14px;
+    border-radius: var(--radius-md);
+    transition: border-color .15s ease;
+
+    &::placeholder { color: var(--on-surface-muted); }
+    &:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
+    &:disabled { opacity: .5; cursor: not-allowed; }
+  }
+
+  .#{$p}textarea {
+    min-height: 84px;
+    resize: vertical;
+  }
+
+  // native select: custom chevron, no OS arrow
+  .#{$p}select {
+    appearance: none;
+    -webkit-appearance: none;
+    padding-inline-end: 34px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' fill='none' stroke='%238b93a1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 12px center;
+  }
+
+  // ---- validation states ----
+  .#{$p}input--error,
+  .#{$p}select--error,
+  .#{$p}textarea--error {
+    border-color: var(--error);
+    &:focus-visible { outline-color: var(--error); }
+  }
+  .#{$p}input--success,
+  .#{$p}select--success,
+  .#{$p}textarea--success {
+    border-color: var(--success);
+    &:focus-visible { outline-color: var(--success); }
+  }
+
+  // ---- sizes (input / select / textarea) ----
+  .#{$p}input--sm, .#{$p}select--sm, .#{$p}textarea--sm {
+    padding-block: 7px; padding-inline: 11px; font-size: var(--fs-sm); border-radius: var(--radius-sm);
+  }
+  .#{$p}input--lg, .#{$p}select--lg, .#{$p}textarea--lg {
+    padding-block: 13px; padding-inline: 16px; font-size: var(--fs-lg);
+  }
+  .#{$p}select--sm, .#{$p}select--lg { padding-inline-end: 34px; }   // keep room for the chevron
+}

package/src/components/_modal.scss

@@ -0,0 +1,43 @@
+// ============================================================
+// Aura — Modal
+// Driven by [data-state] on the overlay (mark it data-overlay so the
+// JS applies scroll-lock + focus-trap + backdrop-close). The dialog
+// is a solid surface for readability (not translucent).
+// ============================================================
+@use "../config" as cfg;
+$p: cfg.$prefix;
+
+@layer components {
+  .#{$p}modal-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: var(--z-modal);
+    display: grid;
+    place-items: center;
+    padding: 20px;
+    background: rgba(4, 10, 20, .5);
+    -webkit-backdrop-filter: blur(4px);
+    backdrop-filter: blur(4px);
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity .2s ease, visibility .2s ease;
+  }
+  .#{$p}modal-overlay[data-state="open"] { opacity: 1; visibility: visible; }
+
+  .#{$p}modal {
+    width: 100%;
+    max-width: 440px;
+    padding: 24px;
+    border-radius: var(--radius-lg);
+    background: var(--surface-1);
+    border: 1px solid var(--outline);
+    box-shadow: var(--shadow-2);
+    transform: translateY(10px) scale(.98);
+    transition: transform .2s ease;
+  }
+  .#{$p}modal-overlay[data-state="open"] .#{$p}modal { transform: none; }
+
+  .#{$p}modal__title   { margin: 0 0 8px; font-size: var(--fs-xl); font-weight: 800; }
+  .#{$p}modal__body    { margin: 0 0 20px; color: var(--on-surface-muted); font-size: var(--fs-md); line-height: 1.5; }
+  .#{$p}modal__actions { display: flex; gap: 10px; justify-content: flex-end; }
+}

package/src/components/_pagination.scss

@@ -0,0 +1,87 @@
+// ============================================================
+// Aura — Pagination
+// ============================================================
+@use "../config" as cfg;
+@use "../surface" as s;
+$p: cfg.$prefix;
+
+@layer components {
+  .#{$p}pagination {
+    display: inline-flex;
+    gap: 4px;
+  }
+
+  .#{$p}pagination__item {
+    min-width: 36px;
+    height: 36px;
+    padding: 0 8px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--radius-md);
+    border: 1px solid var(--outline);
+    background: var(--surface-1);
+    color: var(--on-surface);
+    font: inherit;
+    font-size: var(--fs-sm);
+    font-weight: 600;
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover:not(.#{$p}pagination__item--active):not(:disabled):not(.#{$p}pagination__item--disabled) {
+      background: color-mix(in srgb, var(--on-surface) 8%, transparent);
+    }
+    &:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
+    &:disabled,
+    &.#{$p}pagination__item--disabled { opacity: .5; cursor: not-allowed; }
+  }
+
+  .#{$p}pagination__item--active {
+    --_bg: var(--primary);
+    --_fg: var(--on-primary);
+    @include s.control;
+    border-color: transparent;
+  }
+
+  // ---- joined (button-group) style ----
+  .#{$p}pagination--joined {
+    gap: 0;
+
+    .#{$p}pagination__item {
+      position: relative;
+      border-radius: 0;
+    }
+    .#{$p}pagination__item:not(:first-child) { margin-inline-start: -1px; }
+    .#{$p}pagination__item:hover:not(:disabled):not(.#{$p}pagination__item--disabled),
+    .#{$p}pagination__item:focus-visible,
+    .#{$p}pagination__item--active { z-index: 1; }
+    .#{$p}pagination__item:first-child {
+      border-start-start-radius: var(--radius-md);
+      border-end-start-radius: var(--radius-md);
+    }
+    .#{$p}pagination__item:last-child {
+      border-start-end-radius: var(--radius-md);
+      border-end-end-radius: var(--radius-md);
+    }
+  }
+
+  // ---- small ----
+  .#{$p}pagination--sm .#{$p}pagination__item {
+    min-width: 30px;
+    height: 30px;
+    font-size: var(--fs-xs);
+  }
+
+  // ---- ellipsis (non-interactive gap marker) ----
+  .#{$p}pagination__ellipsis {
+    min-width: 24px;
+    height: 36px;
+    display: inline-flex;
+    align-items: flex-end;
+    justify-content: center;
+    padding-bottom: 6px;
+    color: var(--on-surface-muted);
+    user-select: none;
+  }
+  .#{$p}pagination--sm .#{$p}pagination__ellipsis { height: 30px; }
+}

package/src/components/_progress.scss

@@ -0,0 +1,44 @@
+// ============================================================
+// Aura — Progress (bar + spinner)
+// Track is a skin-aware well; the fill uses the accent colour.
+// ============================================================
+@use "../config" as cfg;
+@use "../surface" as s;
+$p: cfg.$prefix;
+
+@layer components {
+  .#{$p}progress {
+    --_c: var(--primary);
+    display: block;
+    width: 100%;
+    height: 8px;
+    border-radius: var(--radius-pill);
+    overflow: hidden;
+    @include s.field;
+  }
+  .#{$p}progress__bar {
+    display: block;
+    height: 100%;
+    border-radius: inherit;
+    background: var(--_c);
+    transition: width .3s ease;
+  }
+  .#{$p}progress--success { --_c: var(--success); }
+  .#{$p}progress--warning { --_c: var(--warning); }
+  .#{$p}progress--error   { --_c: var(--error); }
+
+  // ---- spinner ----
+  .#{$p}spinner {
+    display: inline-block;
+    width: 28px;
+    height: 28px;
+    border: 3px solid var(--outline-strong);
+    border-top-color: var(--primary);
+    border-radius: 50%;
+    animation: #{$p}spin .8s linear infinite;
+  }
+  .#{$p}spinner--sm { width: 18px; height: 18px; border-width: 2px; }
+  .#{$p}spinner--lg { width: 40px; height: 40px; border-width: 4px; }
+
+  @keyframes #{$p}spin { to { transform: rotate(360deg); } }
+}

package/src/components/_radio.scss

@@ -0,0 +1,42 @@
+// ============================================================
+// Aura — Radio
+// Custom control (appearance:none). Circle is a skin-aware well via
+// field(); checked fills with --_c + white centre dot.
+// ============================================================
+@use "../config" as cfg;
+@use "../surface" as s;
+$p: cfg.$prefix;
+
+@layer components {
+  .#{$p}radio {
+    --_c: var(--primary);
+    appearance: none;
+    -webkit-appearance: none;
+    margin: 0;
+    flex: none;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    cursor: pointer;
+    position: relative;
+    vertical-align: middle;
+    transition: background .15s ease, border-color .15s ease;
+    @include s.field;
+
+    &:checked { --_bg: var(--_c); --_fg: #fff; @include s.control; }
+    &:checked::after {
+      content: "";
+      position: absolute;
+      inset: 4px;
+      border-radius: 50%;
+      background: #fff;
+    }
+
+    &:focus-visible { outline: 2px solid var(--_c); outline-offset: 2px; }
+    &:disabled { opacity: .5; cursor: not-allowed; }
+
+    &.#{$p}radio--success { --_c: var(--success); }
+    &.#{$p}radio--warning { --_c: var(--warning); }
+    &.#{$p}radio--error   { --_c: var(--error); }
+  }
+}

package/src/components/_range.scss

@@ -0,0 +1,27 @@
+// ============================================================
+// Aura — Range / slider
+// Native <input type="range"> themed via accent-color: auto-fills,
+// keyboard-accessible, zero JS. Colour follows --_c.
+// ============================================================
+@use "../config" as cfg;
+$p: cfg.$prefix;
+
+@layer components {
+  .#{$p}range {
+    --_c: var(--primary);
+    width: 100%;
+    height: 22px;
+    accent-color: var(--_c);
+    cursor: pointer;
+
+    &:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
+    &:disabled { opacity: .5; cursor: not-allowed; }
+
+    &.#{$p}range--success { --_c: var(--success); }
+    &.#{$p}range--warning { --_c: var(--warning); }
+    &.#{$p}range--error   { --_c: var(--error); }
+
+    &.#{$p}range--sm { height: 16px; }
+    &.#{$p}range--lg { height: 28px; }
+  }
+}

package/src/components/_rating.scss

@@ -0,0 +1,43 @@
+// ============================================================
+// Aura — Rating (radio-powered stars)
+// CSS-only, keyboard-accessible (arrow keys), form-submittable.
+// Uses row-reverse so `:checked ~ label` fills the star and all
+// lower ones. Hover previews.
+// ============================================================
+@use "../config" as cfg;
+$p: cfg.$prefix;
+
+@layer components {
+  .#{$p}rating {
+    --_c: var(--warning);
+    display: inline-flex;
+    flex-direction: row-reverse;
+    justify-content: flex-end;
+    gap: 2px;
+
+    input {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      opacity: 0;
+      margin: 0;
+    }
+    label {
+      font-size: 24px;
+      line-height: 1;
+      color: var(--outline-strong);
+      cursor: pointer;
+      transition: color .12s ease, transform .12s ease;
+    }
+    label:hover { transform: scale(1.1); }
+
+    // fill the checked star + every lower one (they follow in the reversed DOM)
+    input:checked ~ label,
+    label:hover,
+    label:hover ~ label { color: var(--_c); }
+
+    input:focus-visible + label { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
+    &.#{$p}rating--sm label { font-size: 18px; }
+    &.#{$p}rating--lg label { font-size: 32px; }
+  }
+}

package/src/components/_segmented.scss

@@ -0,0 +1,60 @@
+// ============================================================
+// Aura — Segmented control (radio-powered)
+// A single-select group built on native radios: CSS-only, keyboard
+// accessible (arrow keys) and form-submittable. The checked option
+// becomes a skin-aware filled pill via control().
+// ============================================================
+@use "../config" as cfg;
+@use "../surface" as s;
+$p: cfg.$prefix;
+
+@layer components {
+  .#{$p}segmented {
+    display: inline-flex;
+    gap: 4px;
+    padding: 4px;
+    border-radius: var(--radius-md);
+    @include s.field;              // recessed well (like tabs)
+  }
+  .#{$p}segmented--block { display: flex; width: 100%; }
+  .#{$p}segmented--block .#{$p}segmented__option { flex: 1; }
+
+  .#{$p}segmented__option {
+    position: relative;
+    display: inline-flex;
+    flex: none;
+
+    input {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      margin: 0;
+      opacity: 0;
+      cursor: pointer;
+    }
+    span {
+      flex: 1;
+      text-align: center;
+      padding: 8px 14px;
+      border-radius: var(--radius-sm);
+      font-weight: 700;
+      font-size: var(--fs-sm);
+      color: var(--on-surface-muted);
+      white-space: nowrap;
+      user-select: none;
+      transition: color .15s ease;
+    }
+
+    input:checked + span {
+      --_c: var(--primary);
+      --_bg: var(--_c);
+      --_fg: var(--on-primary);
+      @include s.control;          // active pill — glass glow / flat / neu
+      color: var(--_fg);
+    }
+    input:focus-visible + span {
+      outline: 2px solid var(--primary);
+      outline-offset: 2px;
+    }
+  }
+}

package/src/components/_switch.scss

@@ -0,0 +1,79 @@
+// ============================================================
+// Aura — Switch (toggle)
+// The track is a control well via field() (skin-aware); when
+// checked it fills with the accent colour (--_c). White thumb on
+// the coloured track — never colour-on-colour.
+// ============================================================
+@use "../config" as cfg;
+@use "../surface" as s;
+$p: cfg.$prefix;
+
+@layer components {
+  .#{$p}switch {
+    --_c: var(--primary);
+    position: relative;
+    display: inline-flex;
+    flex: none;
+    width: 46px;
+    height: 26px;
+    vertical-align: middle;
+    cursor: pointer;
+  }
+
+  .#{$p}switch input {
+    position: absolute;
+    inset: 0;
+    opacity: 0;
+    margin: 0;
+    cursor: pointer;
+  }
+
+  .#{$p}switch__track {
+    position: absolute;
+    inset: 0;
+    border-radius: var(--radius-pill);
+    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
+    @include s.field;
+  }
+
+  .#{$p}switch__thumb {
+    position: absolute;
+    top: 4px;
+    left: 4px;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+    background: var(--on-surface-muted);
+    transition: transform .2s ease, background .2s ease;
+  }
+
+  .#{$p}switch input:checked ~ .#{$p}switch__track {
+    --_bg: var(--_c);
+    --_fg: #fff;
+    @include s.control;
+  }
+  .#{$p}switch input:checked ~ .#{$p}switch__thumb {
+    transform: translateX(20px);
+    background: #fff;
+  }
+  .#{$p}switch input:focus-visible ~ .#{$p}switch__track {
+    outline: 2px solid var(--_c);
+    outline-offset: 2px;
+  }
+  .#{$p}switch input:disabled ~ .#{$p}switch__track,
+  .#{$p}switch input:disabled ~ .#{$p}switch__thumb { opacity: .5; }
+
+  // ---- colours ----
+  .#{$p}switch--success { --_c: var(--success); }
+  .#{$p}switch--warning { --_c: var(--warning); }
+  .#{$p}switch--error   { --_c: var(--error); }
+
+  // ---- sizes ----
+  .#{$p}switch--sm { width: 38px; height: 22px; }
+  .#{$p}switch--sm .#{$p}switch__thumb { width: 14px; height: 14px; }
+  .#{$p}switch--sm input:checked ~ .#{$p}switch__thumb { transform: translateX(16px); }
+
+  .#{$p}switch--lg { width: 56px; height: 32px; }
+  .#{$p}switch--lg .#{$p}switch__thumb { width: 24px; height: 24px; }
+  .#{$p}switch--lg input:checked ~ .#{$p}switch__thumb { transform: translateX(24px); }
+}

package/src/components/_table.scss

@@ -0,0 +1,38 @@
+// ============================================================
+// Aura — Table
+// Transparent by design — place inside a .card for a surface.
+// Uses outline tokens for rules; skin-independent.
+// ============================================================
+@use "../config" as cfg;
+$p: cfg.$prefix;
+
+@layer components {
+  .#{$p}table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--fs-md);
+    color: var(--on-surface);
+
+    th, td {
+      text-align: left;
+      padding: 11px 14px;
+      border-bottom: 1px solid var(--outline);
+    }
+    th {
+      font-size: var(--fs-xs);
+      text-transform: uppercase;
+      letter-spacing: .05em;
+      font-weight: 700;
+      color: var(--on-surface-muted);
+    }
+    tbody tr:last-child td { border-bottom: none; }
+    tbody tr:hover { background: color-mix(in srgb, var(--on-surface) 5%, transparent); }
+  }
+
+  // ---- variants ----
+  .#{$p}table--zebra tbody tr:nth-child(even) {
+    background: color-mix(in srgb, var(--on-surface) 4%, transparent);
+  }
+  .#{$p}table--compact th,
+  .#{$p}table--compact td { padding: 7px 10px; }
+}