@resolve-components/theme 1.0.0 → 1.2.1

package/accordion/rc-accordion.scss

@@ -0,0 +1,141 @@
+// =============================================================================
+// rc-accordion  Resolve Components Accordion (Themed)
+// =============================================================================
+
+@use '../styles/theming/get-value' as *;
+@use '../styles/theming/install' as *;
+@use '../styles/theming/animation' as *;
+
+@include rc-install-component() {
+  // ── Accordion container ────────────────────────────────────────────────────
+  .rc-accordion {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid rc-theme('accordion-border-color');
+    border-radius: rc-theme('accordion-border-radius');
+    overflow: hidden;
+    font-family: rc-theme('accordion-font-family');
+    background: rc-theme('accordion-background');
+
+    // Gap between items — achieved by border-top on all but first
+    > .rc-accordion-item + .rc-accordion-item {
+      border-top: 1px solid rc-theme('accordion-border-color');
+    }
+
+    // ── Filled variant ───────────────────────────────────────────────────────
+    &.rc-accordion-filled {
+      > .rc-accordion-item .rc-accordion-header {
+        background: rc-theme('accordion-filled-header-background');
+
+        &:hover:not(:disabled) {
+          background: rc-theme('accordion-filled-header-hover-background');
+        }
+      }
+
+      > .rc-accordion-item.rc-accordion-item-expanded .rc-accordion-header {
+        background: rc-theme('accordion-filled-header-background');
+      }
+    }
+  }
+
+  // ── Accordion item ─────────────────────────────────────────────────────────
+  .rc-accordion-item {
+    display: block;
+
+    // Expanded state — animate via CSS grid trick (height: auto animatable)
+    &.rc-accordion-item-expanded .rc-accordion-body {
+      grid-template-rows: 1fr;
+    }
+
+    &.rc-accordion-item-expanded .rc-accordion-icon {
+      transform: rotate(180deg);
+    }
+
+    &.rc-accordion-item-disabled {
+      opacity: rc-theme('accordion-disabled-opacity');
+    }
+  }
+
+  // ── Header button ──────────────────────────────────────────────────────────
+  .rc-accordion-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    padding: rc-theme('accordion-header-padding');
+    font-family: rc-theme('accordion-font-family');
+    font-size: rc-theme('accordion-header-font-size');
+    font-weight: rc-theme('accordion-header-font-weight');
+    color: rc-theme('accordion-header-text-color');
+    background: rc-theme('accordion-header-background');
+    border: none;
+    cursor: pointer;
+    text-align: left;
+    @include rc-component-animation(
+      background,
+      $duration: rc-theme('accordion-transition-duration'),
+      $timing: rc-theme('accordion-transition-timing')
+    );
+
+    &:hover:not(:disabled) {
+      background: rc-theme('accordion-header-hover-background');
+    }
+
+    &:focus-visible {
+      outline: 2px solid rc-theme('accordion-focus-outline-color');
+      outline-offset: -2px;
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  // ── Header title ───────────────────────────────────────────────────────────
+  .rc-accordion-title {
+    flex: 1;
+    min-width: 0;
+  }
+
+  // ── Chevron icon ───────────────────────────────────────────────────────────
+  .rc-accordion-icon {
+    flex-shrink: 0;
+    margin-left: 0.75rem;
+    color: rc-theme('accordion-icon-color');
+    @include rc-component-animation(
+      transform,
+      $duration: rc-theme('accordion-transition-duration'),
+      $timing: rc-theme('accordion-transition-timing')
+    );
+  }
+
+  // ── Body (animated collapse) ───────────────────────────────────────────────
+  // Uses the CSS grid row height trick: 0fr → 1fr smoothly animates height.
+  .rc-accordion-body {
+    display: grid;
+    grid-template-rows: 0fr;
+    @include rc-component-animation(
+      grid-template-rows,
+      $duration: rc-theme('accordion-transition-duration'),
+      $timing: rc-theme('accordion-transition-timing')
+    );
+    overflow: hidden;
+  }
+
+  // ── Content area ──────────────────────────────────────────────────────────
+  // min-height: 0 is required for the 0fr → 1fr grid trick to work.
+  // IMPORTANT: padding must live on the inner wrapper, not here — padding
+  // bleeds past min-height: 0 and makes the panel visible even when collapsed.
+  .rc-accordion-content {
+    overflow: hidden;
+    min-height: 0;
+  }
+
+  // ── Inner wrapper — holds padding so it collapses cleanly ─────────────────
+  .rc-accordion-inner {
+    padding: rc-theme('accordion-content-padding');
+    font-size: rc-theme('accordion-content-font-size');
+    color: rc-theme('accordion-content-text-color');
+    line-height: 1.6;
+  }
+}

package/alert/rc-alert.scss

@@ -0,0 +1,158 @@
+// =============================================================================
+// rc-alert  Resolve Components Alert (Themed)
+// =============================================================================
+
+@use '../styles/theming/get-value' as *;
+@use '../styles/theming/install' as *;
+@use '../styles/theming/animation' as *;
+
+@include rc-install-component() {
+  .rc-alert {
+    display: flex;
+    align-items: flex-start;
+    gap: rc-theme('alert-gap');
+    padding: rc-theme('alert-padding');
+    border-radius: rc-theme('alert-border-radius');
+    border: 1px solid transparent;
+    font-size: rc-theme('alert-font-size');
+    line-height: 1.5;
+
+    // ─── Layout ───────────────────────────────────────────────────────────
+
+    &-icon {
+      flex-shrink: 0;
+      font-size: 1.125rem;
+      margin-top: 0.05em;
+    }
+
+    &-body {
+      flex: 1;
+      min-width: 0;
+    }
+
+    &-title {
+      margin: 0 0 0.25rem;
+      font-size: rc-theme('alert-title-font-size');
+      font-weight: rc-theme('alert-title-font-weight');
+      line-height: 1.4;
+    }
+
+    &-message {
+      margin: 0;
+    }
+
+    &-close {
+      flex-shrink: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background: none;
+      border: none;
+      padding: 0;
+      cursor: pointer;
+      opacity: 0.6;
+      font-size: rc-theme('alert-close-size');
+      color: inherit;
+      border-radius: rc-theme('radius-sm');
+      line-height: 1;
+      @include rc-component-animation(opacity, $speed: 'medium');
+      margin-top: 0.05em;
+
+      &:hover {
+        opacity: 1;
+      }
+
+      &:focus-visible {
+        outline: 2px solid currentColor;
+        outline-offset: 2px;
+        opacity: 1;
+      }
+    }
+
+    // ─── Status × Variant matrix ──────────────────────────────────────────
+
+    // INFO
+    &-info {
+      &.rc-alert-subtle {
+        background: rc-theme('alert-info-subtle-background');
+        color: rc-theme('alert-info-subtle-color');
+        border-color: rc-theme('alert-info-subtle-border');
+      }
+
+      &.rc-alert-filled {
+        background: rc-theme('alert-info-filled-background');
+        color: rc-theme('alert-info-filled-color');
+        border-color: rc-theme('alert-info-filled-border');
+      }
+
+      &.rc-alert-outline {
+        background: rc-theme('alert-info-outline-background');
+        color: rc-theme('alert-info-outline-color');
+        border-color: rc-theme('alert-info-outline-border');
+      }
+    }
+
+    // SUCCESS
+    &-success {
+      &.rc-alert-subtle {
+        background: rc-theme('alert-success-subtle-background');
+        color: rc-theme('alert-success-subtle-color');
+        border-color: rc-theme('alert-success-subtle-border');
+      }
+
+      &.rc-alert-filled {
+        background: rc-theme('alert-success-filled-background');
+        color: rc-theme('alert-success-filled-color');
+        border-color: rc-theme('alert-success-filled-border');
+      }
+
+      &.rc-alert-outline {
+        background: rc-theme('alert-success-outline-background');
+        color: rc-theme('alert-success-outline-color');
+        border-color: rc-theme('alert-success-outline-border');
+      }
+    }
+
+    // WARNING
+    &-warning {
+      &.rc-alert-subtle {
+        background: rc-theme('alert-warning-subtle-background');
+        color: rc-theme('alert-warning-subtle-color');
+        border-color: rc-theme('alert-warning-subtle-border');
+      }
+
+      &.rc-alert-filled {
+        background: rc-theme('alert-warning-filled-background');
+        color: rc-theme('alert-warning-filled-color');
+        border-color: rc-theme('alert-warning-filled-border');
+      }
+
+      &.rc-alert-outline {
+        background: rc-theme('alert-warning-outline-background');
+        color: rc-theme('alert-warning-outline-color');
+        border-color: rc-theme('alert-warning-outline-border');
+      }
+    }
+
+    // DANGER
+    &-danger {
+      &.rc-alert-subtle {
+        background: rc-theme('alert-danger-subtle-background');
+        color: rc-theme('alert-danger-subtle-color');
+        border-color: rc-theme('alert-danger-subtle-border');
+      }
+
+      &.rc-alert-filled {
+        background: rc-theme('alert-danger-filled-background');
+        color: rc-theme('alert-danger-filled-color');
+        border-color: rc-theme('alert-danger-filled-border');
+      }
+
+      &.rc-alert-outline {
+        background: rc-theme('alert-danger-outline-background');
+        color: rc-theme('alert-danger-outline-color');
+        border-color: rc-theme('alert-danger-outline-border');
+      }
+    }
+  }
+}

package/autocomplete/rc-autocomplete.scss

@@ -0,0 +1,64 @@
+@use '../styles/theming/install' as *;
+@use '../styles/theming/animation' as *;
+
+@include rc-install-component() {
+  // ── Host ────────────────────────────────────────────────────────────────────
+  .rc-autocomplete {
+    position: relative;
+    display: block;
+    width: 100%;
+
+    // Make the inner rcInput fill the host completely
+    input.rc-input {
+      width: 100%;
+      box-sizing: border-box;
+    }
+
+    // Shift right padding when clear button is present so text doesn't overlap
+    &.rc-autocomplete-has-value input.rc-input {
+      padding-right: 2rem;
+    }
+  }
+
+  // ── Clear button ─────────────────────────────────────────────────────────────
+  .rc-autocomplete-clear {
+    position: absolute;
+    top: 50%;
+    right: 0.5rem;
+    transform: translateY(-50%);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background: transparent;
+    color: rc-theme('autocomplete-clear-color');
+    cursor: pointer;
+    @include rc-component-animation(color background, $speed: 'medium');
+
+    &:hover {
+      color: rc-theme('autocomplete-clear-hover-color');
+      background: rc-theme('autocomplete-clear-hover-background');
+    }
+
+    &:focus-visible {
+      outline: 2px solid rc-theme('autocomplete-clear-hover-color');
+      outline-offset: 1px;
+    }
+
+    svg {
+      display: block;
+      pointer-events: none;
+    }
+  }
+
+  // ── Open state ────────────────────────────────────────────────────────────────
+  .rc-autocomplete-open input.rc-input {
+    // Keep focused ring while panel is open
+    border-color: rc-theme('input-focus-border-color');
+    box-shadow: 0 0 0 3px rc-theme('input-focus-shadow-color');
+  }
+}

package/badge/rc-badge.scss

@@ -0,0 +1,57 @@
+// =============================================================================
+// rc-badge  Resolve Components Badge (Themed)
+// =============================================================================
+
+@use '../styles/theming/get-value' as *;
+@use '../styles/theming/install' as *;
+
+@include rc-install-component() {
+  .rc-badge {
+    display: inline-flex;
+    align-items: center;
+    font-family: rc-theme('badge-font-family');
+    font-weight: rc-theme('badge-font-weight');
+    border-radius: rc-theme('badge-border-radius');
+    white-space: nowrap;
+    line-height: 1;
+
+    // -- Sizes --
+
+    &-sm {
+      font-size: rc-theme('badge-sm-font-size');
+      padding: rc-theme('badge-sm-padding');
+    }
+
+    &-md {
+      font-size: rc-theme('badge-md-font-size');
+      padding: rc-theme('badge-md-padding');
+    }
+
+    // -- Statuses --
+
+    &-default {
+      background: rc-theme('badge-default-background-color');
+      color: rc-theme('badge-default-text-color');
+    }
+
+    &-primary {
+      background: rc-theme('badge-primary-background-color');
+      color: rc-theme('badge-primary-text-color');
+    }
+
+    &-success {
+      background: rc-theme('badge-success-background-color');
+      color: rc-theme('badge-success-text-color');
+    }
+
+    &-warning {
+      background: rc-theme('badge-warning-background-color');
+      color: rc-theme('badge-warning-text-color');
+    }
+
+    &-danger {
+      background: rc-theme('badge-danger-background-color');
+      color: rc-theme('badge-danger-text-color');
+    }
+  }
+}

package/button/rc-button.scss

@@ -0,0 +1,198 @@
+// =============================================================================
+// rc-button  Resolve Components Button (Themed)
+// =============================================================================
+
+@use '../styles/theming/get-value' as *;
+@use '../styles/theming/install' as *;
+@use '../styles/theming/animation' as *;
+
+@include rc-install-component() {
+  // Shared base for all rcButton host elements
+  [rcButton] {
+    // -------------------------------------------------------------------------
+    // CSS custom property palette — overridden by status modifier classes.
+    // Variant classes consume these vars so every shape works with every status.
+    // -------------------------------------------------------------------------
+    --rcb-color: #{rc-theme('button-filled-primary-background-color')};
+    --rcb-color-hover: #{rc-theme(
+        'button-filled-primary-hover-background-color'
+      )};
+    --rcb-color-active: #{rc-theme(
+        'button-filled-primary-active-background-color'
+      )};
+    --rcb-text-on: #{rc-theme('button-filled-primary-text-color')};
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: rc-theme('spacing-xs');
+    font-family: rc-theme('button-font-family');
+    font-weight: rc-theme('button-font-weight');
+    border: 1px solid transparent;
+    border-radius: rc-theme('button-border-radius');
+    cursor: pointer;
+    text-decoration: none;
+    @include rc-component-animation(
+      background-color,
+      border-color,
+      box-shadow,
+      color
+    );
+    line-height: 1;
+    white-space: nowrap;
+    user-select: none;
+
+    &:focus-visible {
+      outline: rc-theme('focus-ring-width') solid
+        rc-theme('button-focus-outline-color');
+      outline-offset: rc-theme('focus-ring-offset');
+    }
+
+    &:disabled,
+    &[aria-disabled='true'] {
+      opacity: rc-theme('button-disabled-opacity');
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    // ── Sizes ─────────────────────────────────────────────────────────────────
+    &.rc-button-sm {
+      font-size: rc-theme('button-sm-font-size');
+      padding: rc-theme('button-sm-padding');
+      height: rc-theme('button-sm-height');
+    }
+
+    &.rc-button-md {
+      font-size: rc-theme('button-md-font-size');
+      padding: rc-theme('button-md-padding');
+      height: rc-theme('button-md-height');
+    }
+
+    &.rc-button-lg {
+      font-size: rc-theme('button-lg-font-size');
+      padding: rc-theme('button-lg-padding');
+      height: rc-theme('button-lg-height');
+    }
+
+    // ── Icon-only ─────────────────────────────────────────────────────────────
+    &.rc-button-icon-only {
+      padding: 0;
+      aspect-ratio: 1;
+    }
+
+    // ── Status — sets the color palette vars ─────────────────────────────────
+    &.rc-button-primary {
+      --rcb-color: #{rc-theme('button-filled-primary-background-color')};
+      --rcb-color-hover: #{rc-theme(
+          'button-filled-primary-hover-background-color'
+        )};
+      --rcb-color-active: #{rc-theme(
+          'button-filled-primary-active-background-color'
+        )};
+      --rcb-text-on: #{rc-theme('button-filled-primary-text-color')};
+    }
+
+    &.rc-button-secondary {
+      --rcb-color: #{rc-theme('button-filled-secondary-background-color')};
+      --rcb-color-hover: #{rc-theme(
+          'button-filled-secondary-hover-background-color'
+        )};
+      --rcb-color-active: #{rc-theme(
+          'button-filled-secondary-active-background-color'
+        )};
+      --rcb-text-on: #{rc-theme('button-filled-secondary-text-color')};
+    }
+
+    &.rc-button-danger {
+      --rcb-color: #{rc-theme('button-filled-danger-background-color')};
+      --rcb-color-hover: #{rc-theme(
+          'button-filled-danger-hover-background-color'
+        )};
+      --rcb-color-active: #{rc-theme(
+          'button-filled-danger-active-background-color'
+        )};
+      --rcb-text-on: #{rc-theme('button-filled-danger-text-color')};
+    }
+
+    &.rc-button-info {
+      --rcb-color: #{rc-theme('button-filled-info-background-color')};
+      --rcb-color-hover: #{rc-theme(
+          'button-filled-info-hover-background-color'
+        )};
+      --rcb-color-active: #{rc-theme(
+          'button-filled-info-active-background-color'
+        )};
+      --rcb-text-on: #{rc-theme('button-filled-info-text-color')};
+    }
+
+    &.rc-button-success {
+      --rcb-color: #{rc-theme('button-filled-success-background-color')};
+      --rcb-color-hover: #{rc-theme(
+          'button-filled-success-hover-background-color'
+        )};
+      --rcb-color-active: #{rc-theme(
+          'button-filled-success-active-background-color'
+        )};
+      --rcb-text-on: #{rc-theme('button-filled-success-text-color')};
+    }
+
+    &.rc-button-warning {
+      --rcb-color: #{rc-theme('button-filled-warning-background-color')};
+      --rcb-color-hover: #{rc-theme(
+          'button-filled-warning-hover-background-color'
+        )};
+      --rcb-color-active: #{rc-theme(
+          'button-filled-warning-active-background-color'
+        )};
+      --rcb-text-on: #{rc-theme('button-filled-warning-text-color')};
+    }
+
+    // ── Variant — consumes palette vars ───────────────────────────────────────
+    &.rc-button-filled {
+      background: var(--rcb-color);
+      color: var(--rcb-text-on);
+      border-color: transparent;
+
+      &:hover:not(:disabled):not([aria-disabled='true']) {
+        background: var(--rcb-color-hover);
+      }
+
+      &:active:not(:disabled):not([aria-disabled='true']) {
+        background: var(--rcb-color-active);
+      }
+    }
+
+    &.rc-button-outline {
+      background: transparent;
+      color: var(--rcb-color);
+      border-color: var(--rcb-color);
+
+      &:hover:not(:disabled):not([aria-disabled='true']) {
+        background: var(--rcb-color);
+        color: var(--rcb-text-on);
+        border-color: var(--rcb-color);
+      }
+
+      &:active:not(:disabled):not([aria-disabled='true']) {
+        background: var(--rcb-color-active);
+        color: var(--rcb-text-on);
+        border-color: var(--rcb-color-active);
+      }
+    }
+
+    &.rc-button-ghost {
+      background: transparent;
+      color: var(--rcb-color);
+      border-color: transparent;
+
+      &:hover:not(:disabled):not([aria-disabled='true']) {
+        background: rc-theme('button-ghost-hover-background-color');
+      }
+
+      &:active:not(:disabled):not([aria-disabled='true']) {
+        background: var(--rcb-color);
+        color: var(--rcb-text-on);
+      }
+    }
+  }
+}

package/card/rc-card.scss

@@ -0,0 +1,31 @@
+// =============================================================================
+// rc-card — Resolve Components Card (Themed)
+// =============================================================================
+
+@use '../styles/theming/get-value' as *;
+@use '../styles/theming/install' as *;
+@use '../styles/theming/animation' as *;
+
+@include rc-install-component() {
+  .rc-card {
+    font-family: rc-theme('card-header-font-family');
+    background: rc-theme('card-background-color');
+    color: rc-theme('card-text-color');
+    border-radius: rc-theme('card-border-radius');
+    overflow: hidden;
+    @include rc-component-animation(box-shadow);
+
+    &-padded {
+      padding: rc-theme('card-padding');
+      height: 100%;
+    }
+
+    &-bordered {
+      border: 1px solid rc-theme('card-border-color');
+    }
+
+    &-shadow {
+      box-shadow: rc-theme('card-shadow');
+    }
+  }
+}