@resolve-components/theme 1.0.0 → 1.2.1

package/spinner/rc-spinner.scss

@@ -0,0 +1,106 @@
+@use '../styles/theming' as *;
+
+@include rc-install-component() {
+  // ── Container ────────────────────────────────────────────────────────────────
+  // Applied to the host when [rcSpinner] is truthy.
+  .rc-spinner-container {
+    position: relative;
+  }
+
+  // ── Overlay ──────────────────────────────────────────────────────────────────
+  // The rc-spinner host when used as an overlay (created by the directive).
+  // When used standalone (inline), it renders without position:absolute.
+  .rc-spinner-container > .rc-spinner {
+    position: absolute;
+    inset: 0;
+    z-index: 9;
+    border-radius: inherit;
+    overflow: hidden;
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: rc-theme('spinner-overlay-background');
+      opacity: 0.88;
+    }
+  }
+
+  // ── Base spinner ─────────────────────────────────────────────────────────────
+  .rc-spinner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: rc-theme('spinner-gap');
+  }
+
+  // Spinning arc circle
+  .rc-spinner-icon {
+    position: relative;
+    z-index: 1;
+    flex-shrink: 0;
+    border-radius: 50%;
+    border-style: solid;
+    border-color: transparent;
+    border-top-color: currentColor;
+    animation: rc-spin 0.75s linear infinite;
+  }
+
+  // Optional message below the circle
+  .rc-spinner-message {
+    position: relative;
+    z-index: 1;
+    font-family: rc-theme('spinner-font-family');
+    font-size: rc-theme('spinner-message-font-size');
+    color: rc-theme('spinner-message-color');
+    line-height: 1.4;
+    text-align: center;
+  }
+
+  // ── Sizes ────────────────────────────────────────────────────────────────────
+  .rc-spinner-sm .rc-spinner-icon {
+    width: rc-theme('spinner-sm-size');
+    height: rc-theme('spinner-sm-size');
+    border-width: rc-theme('spinner-sm-border-width');
+  }
+
+  .rc-spinner-md .rc-spinner-icon {
+    width: rc-theme('spinner-md-size');
+    height: rc-theme('spinner-md-size');
+    border-width: rc-theme('spinner-md-border-width');
+  }
+
+  .rc-spinner-lg .rc-spinner-icon {
+    width: rc-theme('spinner-lg-size');
+    height: rc-theme('spinner-lg-size');
+    border-width: rc-theme('spinner-lg-border-width');
+  }
+
+  // ── Status colors ───────────────────────────────────────────────────────────
+  .rc-spinner-primary {
+    color: rc-theme('spinner-primary-color');
+  }
+  .rc-spinner-info {
+    color: rc-theme('spinner-info-color');
+  }
+  .rc-spinner-success {
+    color: rc-theme('spinner-success-color');
+  }
+  .rc-spinner-warning {
+    color: rc-theme('spinner-warning-color');
+  }
+  .rc-spinner-danger {
+    color: rc-theme('spinner-danger-color');
+  }
+  .rc-spinner-basic {
+    color: rc-theme('spinner-basic-color');
+  }
+
+  // ── Keyframes ────────────────────────────────────────────────────────────────
+  @keyframes rc-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}

package/{src/lib/styles → styles}/theming/_mapping.scss

@@ -9,7 +9,7 @@
 // Users can override any of these in their custom theme definition.
 // =============================================================================
 
-@use 'sass:string';
+@use 'sass:string';
 /// Master component mapping. Merged into every registered theme as the base layer.
 $rc-mapping: (
   // ── Button ────────────────────────────────────────────────────────────────
@@ -649,6 +649,7 @@ $rc-mapping: (
   file-upload-item-error-background: color-danger-100,
 
   // ── Virtual Scroll ─────────────────────────────────────────────
+  virtual-scroll-background-color: background-basic-color-1,
   virtual-scroll-border-color: border-basic-color,
   virtual-scroll-border-radius: border-radius,
   virtual-scroll-track-color: background-basic-color-3,

package/table/rc-table.scss

@@ -0,0 +1,147 @@
+@use '../styles/theming' as *;
+
+@include rc-install-component() {
+  // ── Table wrapper ──────────────────────────────────────────────────────────
+
+  .rc-table,
+  table[rcTable] {
+    width: 100%;
+    border-collapse: collapse;
+    background: rc-theme('table-background');
+    color: rc-theme('table-text-color');
+    font-family: inherit;
+    font-size: 0.9375rem;
+    border: 1px solid rc-theme('table-border-color');
+    border-radius: rc-theme('table-border-radius');
+    overflow: hidden;
+
+    // Allow border-radius to clip contents
+    display: table;
+  }
+
+  // ── Header row ─────────────────────────────────────────────────────────────
+
+  tr.rc-header-row,
+  .rc-header-row {
+    background: rc-theme('table-header-background');
+  }
+
+  // ── Header cells ───────────────────────────────────────────────────────────
+
+  .rc-header-cell {
+    padding: rc-theme('table-cell-padding');
+    color: rc-theme('table-header-text-color');
+    font-size: 0.6875rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    border-bottom: 1px solid rc-theme('table-border-color');
+    white-space: nowrap;
+    text-align: left;
+    vertical-align: middle;
+  }
+
+  // ── Data rows ──────────────────────────────────────────────────────────────
+
+  tr.rc-row,
+  .rc-row {
+    @include rc-component-animation(background-color);
+
+    &:last-child .rc-cell {
+      border-bottom: none;
+    }
+
+    &:hover {
+      background: rc-theme('table-row-hover-background');
+    }
+  }
+
+  // ── Data cells ─────────────────────────────────────────────────────────────
+
+  .rc-cell {
+    padding: rc-theme('table-cell-padding');
+    border-bottom: 1px solid rc-theme('table-border-color');
+    vertical-align: middle;
+    color: rc-theme('table-text-color');
+  }
+
+  // ── Footer row ─────────────────────────────────────────────────────────────
+
+  tr.rc-footer-row,
+  .rc-footer-row {
+    background: rc-theme('table-header-background');
+  }
+
+  .rc-footer-cell {
+    padding: rc-theme('table-cell-padding');
+    border-top: 2px solid rc-theme('table-border-color');
+    font-weight: 600;
+    vertical-align: middle;
+    color: rc-theme('table-text-color');
+  }
+
+  // ── No-data row ────────────────────────────────────────────────────────────
+
+  .rc-table-no-data-row td,
+  .rc-table-no-data-row .rc-cell {
+    padding: rc-theme('table-cell-padding');
+    text-align: center;
+    color: rc-theme('table-header-text-color');
+    font-style: italic;
+  }
+
+  // ── Sticky columns ─────────────────────────────────────────────────────────
+
+  .rc-table-sticky {
+    position: sticky;
+    z-index: 1;
+    background: inherit;
+  }
+
+  // ── Sort header ────────────────────────────────────────────────────────────
+
+  .rc-sort-header {
+    // Keep display: table-cell (browser default for <th>) — do NOT override it.
+    cursor: pointer;
+    user-select: none;
+    @include rc-component-animation(color);
+    outline: none;
+
+    &:hover {
+      color: rc-theme('table-sort-active-color');
+    }
+
+    &:focus-visible {
+      outline: 2px solid rc-theme('table-sort-active-color');
+      outline-offset: 2px;
+      border-radius: 2px;
+    }
+
+    &.rc-sort-header-active {
+      color: rc-theme('table-sort-active-color');
+    }
+  }
+
+  // Inner wrapper carries the flex layout so the host <th> stays display:table-cell.
+  .rc-sort-header-inner {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    width: 100%;
+  }
+
+  .rc-sort-header-content {
+    flex: 1;
+  }
+
+  .rc-sort-header-arrow {
+    display: inline-flex;
+    align-items: center;
+    flex-shrink: 0;
+    color: inherit;
+  }
+
+  .rc-sort-header-unsorted {
+    opacity: 0.3;
+  }
+}

package/tabs/rc-tabs.scss

@@ -0,0 +1,155 @@
+// =============================================================================
+// rc-tabs  Resolve Components Tabs
+// =============================================================================
+
+@use '../styles/theming/get-value' as *;
+@use '../styles/theming/install' as *;
+@use '../styles/theming/animation' as *;
+
+@include rc-install-component() {
+  rc-tabs {
+    display: block;
+  }
+
+  .rc-tabs {
+    display: flex;
+    flex-direction: column;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Nav bar
+  // ---------------------------------------------------------------------------
+
+  .rc-tabs-nav {
+    display: flex;
+    flex-wrap: nowrap;
+    border-bottom: 2px solid rc-theme('border-basic-color');
+    gap: 0;
+    overflow-x: auto;
+    scrollbar-width: none; // Firefox
+
+    &::-webkit-scrollbar {
+      display: none; // Chrome/Safari
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Tab button
+  // ---------------------------------------------------------------------------
+
+  .rc-tabs-tab {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4em;
+    background: none;
+    border: none;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -2px; // overlap nav border
+    cursor: pointer;
+    color: rc-theme('text-hint-color');
+    font-family: rc-theme('button-font-family');
+    font-weight: 500;
+    white-space: nowrap;
+    @include rc-component-animation(color border-color background);
+
+    // Default size (md)
+    font-size: 0.875rem;
+    padding: 0.625rem 1rem;
+
+    &:hover:not(.rc-tabs-tab-disabled):not(.rc-tabs-tab-active) {
+      color: rc-theme('text-basic-color');
+      background: rc-theme('background-basic-color-2');
+    }
+
+    &:focus-visible {
+      outline: rc-theme('focus-ring-width') solid
+        rc-theme('button-focus-outline-color');
+      outline-offset: -2px;
+      border-radius: 3px 3px 0 0;
+    }
+
+    // Active state — default indicator color
+    &-active {
+      color: rc-theme('color-primary-default');
+      border-bottom-color: rc-theme('color-primary-default');
+    }
+
+    // Status indicator colors (override the active indicator)
+    &-active#{&}-primary {
+      color: rc-theme('color-primary-default');
+      border-bottom-color: rc-theme('color-primary-default');
+    }
+    &-active#{&}-success {
+      color: rc-theme('color-success-default');
+      border-bottom-color: rc-theme('color-success-default');
+    }
+    &-active#{&}-warning {
+      color: rc-theme('color-warning-default');
+      border-bottom-color: rc-theme('color-warning-default');
+    }
+    &-active#{&}-danger {
+      color: rc-theme('color-danger-default');
+      border-bottom-color: rc-theme('color-danger-default');
+    }
+    &-active#{&}-info {
+      color: rc-theme('color-info-default');
+      border-bottom-color: rc-theme('color-info-default');
+    }
+
+    // Disabled
+    &-disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Tab icon
+  // ---------------------------------------------------------------------------
+
+  .rc-tabs-tab-icon {
+    font-size: 1em; // inherit from tab
+    flex-shrink: 0;
+  }
+
+  // ---------------------------------------------------------------------------
+  // Sizes
+  // ---------------------------------------------------------------------------
+
+  .rc-tabs-sm .rc-tabs-tab {
+    font-size: 0.75rem;
+    padding: 0.375rem 0.75rem;
+
+    .rc-tabs-tab-icon {
+      font-size: 0.875rem;
+    }
+  }
+
+  .rc-tabs-lg .rc-tabs-tab {
+    font-size: 1rem;
+    padding: 0.75rem 1.25rem;
+
+    .rc-tabs-tab-icon {
+      font-size: 1.125rem;
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+  // Panels
+  // ---------------------------------------------------------------------------
+
+  .rc-tabs-panels {
+    flex: 1;
+  }
+
+  .rc-tabs-panel {
+    display: none;
+    padding-top: 1.5rem;
+
+    &-active {
+      display: block;
+    }
+  }
+}

package/toast/rc-toast.scss

@@ -0,0 +1,228 @@
+// =============================================================================
+// rc-toast  Resolve Components Toast (Global — CDK Overlay)
+// =============================================================================
+// These styles must be global because the toast pane is rendered by the CDK
+// overlay outside any Angular component's shadow DOM.
+// =============================================================================
+
+@use '../styles/theming/get-value' as *;
+@use '../styles/theming/install' as *;
+@use '../styles/theming/animation' as *;
+
+@include rc-install-component() {
+  // ─── CDK overlay pane sizing ──────────────────────────────────────────────
+
+  .rc-toast-pane {
+    pointer-events: none;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    z-index: 1100;
+
+    // Position variants that stack from the bottom up
+    &-bottom-right,
+    &-bottom-left,
+    &-bottom-center {
+      flex-direction: column-reverse;
+    }
+  }
+
+  // ─── Container ────────────────────────────────────────────────────────────
+
+  .rc-toast-container {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    pointer-events: none;
+
+    &-bottom-right,
+    &-bottom-left,
+    &-bottom-center {
+      flex-direction: column-reverse;
+    }
+  }
+
+  // ─── Wrapper (slide-in via CSS animation — no JS class toggle needed) ──────
+
+  .rc-toast-wrapper {
+    pointer-events: auto;
+
+    @media (prefers-reduced-motion: no-preference) {
+      animation: rc-toast-enter rc-theme('transition-duration-normal')
+        rc-theme('transition-timing') both;
+    }
+  }
+
+  @keyframes rc-toast-enter {
+    from {
+      transform: translateX(2rem);
+      opacity: 0;
+    }
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+  // ─── Toast card ───────────────────────────────────────────────────────────
+
+  .rc-toast {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    gap: rc-theme('toast-gap');
+    padding: rc-theme('toast-padding');
+    min-width: rc-theme('toast-min-width');
+    max-width: rc-theme('toast-max-width');
+    border-radius: rc-theme('toast-border-radius');
+    border: 1px solid rc-theme('toast-border-color');
+    background: rc-theme('toast-background');
+    color: rc-theme('toast-color');
+    box-shadow: rc-theme('toast-shadow');
+    font-size: rc-theme('toast-font-size');
+    overflow: hidden;
+
+    // ── Accent stripe ──────────────────────────────────────────────────────
+
+    &-accent {
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 4px;
+      height: 100%;
+    }
+
+    // ── Icon ───────────────────────────────────────────────────────────────
+
+    &-icon {
+      flex-shrink: 0;
+      font-size: 1.125rem;
+      margin-top: 0.05em;
+    }
+
+    // ── Content ────────────────────────────────────────────────────────────
+
+    &-body {
+      flex: 1;
+      min-width: 0;
+    }
+
+    &-title {
+      margin: 0 0 0.2rem;
+      font-size: rc-theme('toast-title-font-size');
+      font-weight: rc-theme('toast-title-font-weight');
+      line-height: 1.4;
+    }
+
+    &-message {
+      margin: 0;
+      line-height: 1.5;
+    }
+
+    // ── Close button ───────────────────────────────────────────────────────
+
+    &-close {
+      flex-shrink: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background: none;
+      border: none;
+      padding: 0;
+      cursor: pointer;
+      opacity: 0.5;
+      font-size: rc-theme('toast-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;
+      }
+    }
+
+    // ── Progress bar ───────────────────────────────────────────────────────
+
+    &-progress {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      height: rc-theme('toast-progress-height');
+      width: 100%;
+      transform-origin: left center;
+      animation: rc-toast-progress linear forwards;
+    }
+
+    // ─── Status colors ────────────────────────────────────────────────────
+
+    &-info {
+      .rc-toast-accent,
+      .rc-toast-icon {
+        color: rc-theme('toast-info-accent');
+      }
+      .rc-toast-accent {
+        background: rc-theme('toast-info-accent');
+      }
+      .rc-toast-progress {
+        background: rc-theme('toast-info-accent');
+      }
+    }
+
+    &-success {
+      .rc-toast-accent,
+      .rc-toast-icon {
+        color: rc-theme('toast-success-accent');
+      }
+      .rc-toast-accent {
+        background: rc-theme('toast-success-accent');
+      }
+      .rc-toast-progress {
+        background: rc-theme('toast-success-accent');
+      }
+    }
+
+    &-warning {
+      .rc-toast-accent,
+      .rc-toast-icon {
+        color: rc-theme('toast-warning-accent');
+      }
+      .rc-toast-accent {
+        background: rc-theme('toast-warning-accent');
+      }
+      .rc-toast-progress {
+        background: rc-theme('toast-warning-accent');
+      }
+    }
+
+    &-danger {
+      .rc-toast-accent,
+      .rc-toast-icon {
+        color: rc-theme('toast-danger-accent');
+      }
+      .rc-toast-accent {
+        background: rc-theme('toast-danger-accent');
+      }
+      .rc-toast-progress {
+        background: rc-theme('toast-danger-accent');
+      }
+    }
+  }
+
+  @keyframes rc-toast-progress {
+    from {
+      transform: scaleX(1);
+    }
+    to {
+      transform: scaleX(0);
+    }
+  }
+}