@resolve-components/theme 1.0.0 → 1.2.0

package/select/rc-select.scss

@@ -0,0 +1,197 @@
+// =============================================================================
+// rc-select  Resolve Components Select (Single & Multi, CDK Overlay, Themed)
+// =============================================================================
+
+@use '../styles/theming/get-value' as *;
+@use '../styles/theming/install' as *;
+@use '../styles/theming/animation' as *;
+
+@include rc-install-component() {
+  // ── Trigger (host element) ─────────────────────────────────────────────────
+  rc-select {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.5rem;
+    width: 100%;
+    box-sizing: border-box;
+    position: relative;
+    cursor: pointer;
+    user-select: none;
+
+    font-family: rc-theme('select-font-family');
+    font-weight: rc-theme('select-font-weight');
+    font-size: rc-theme('select-md-font-size');
+    color: rc-theme('select-text-color');
+    background: rc-theme('select-background-color');
+    border: 1.5px solid rc-theme('select-border-color');
+    border-radius: rc-theme('select-border-radius');
+    padding: rc-theme('select-md-padding');
+    height: rc-theme('select-md-height');
+    outline: none;
+    @include rc-component-animation(border-color box-shadow background);
+
+    &:hover:not(.rc-select-disabled) {
+      border-color: rc-theme('select-hover-border-color');
+    }
+
+    &.rc-select-focused:not(.rc-select-disabled),
+    &:focus:not(.rc-select-disabled) {
+      border-color: rc-theme('select-focus-border-color');
+      box-shadow: rc-theme('select-focus-shadow');
+    }
+
+    &.rc-select-disabled {
+      background: rc-theme('select-disabled-background-color');
+      border-color: rc-theme('select-disabled-border-color');
+      color: rc-theme('select-disabled-text-color');
+      cursor: not-allowed;
+      opacity: 0.7;
+    }
+
+    // ── Status variants ──────────────────────────────────────────────────────
+    &.rc-select-success {
+      border-color: rc-theme('select-success-border-color');
+
+      &.rc-select-focused,
+      &:focus {
+        box-shadow: rc-theme('select-success-focus-shadow');
+      }
+    }
+
+    &.rc-select-warning {
+      border-color: rc-theme('select-warning-border-color');
+
+      &.rc-select-focused,
+      &:focus {
+        box-shadow: rc-theme('select-warning-focus-shadow');
+      }
+    }
+
+    &.rc-select-danger {
+      border-color: rc-theme('select-danger-border-color');
+
+      &.rc-select-focused,
+      &:focus {
+        box-shadow: rc-theme('select-danger-focus-shadow');
+      }
+    }
+
+    // ── Sizes ────────────────────────────────────────────────────────────────
+    &.rc-select-sm {
+      font-size: rc-theme('select-sm-font-size');
+      padding: rc-theme('select-sm-padding');
+      height: rc-theme('select-sm-height');
+    }
+
+    &.rc-select-md {
+      font-size: rc-theme('select-md-font-size');
+      padding: rc-theme('select-md-padding');
+      height: rc-theme('select-md-height');
+    }
+
+    &.rc-select-lg {
+      font-size: rc-theme('select-lg-font-size');
+      padding: rc-theme('select-lg-padding');
+      height: rc-theme('select-lg-height');
+    }
+  }
+
+  // ── Trigger value text ─────────────────────────────────────────────────────
+  .rc-select-value {
+    flex: 1 1 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    min-width: 0;
+  }
+
+  .rc-select-placeholder {
+    color: rc-theme('select-placeholder-color');
+  }
+
+  // ── Arrow indicator ────────────────────────────────────────────────────────
+  .rc-select-arrow {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    color: rc-theme('select-arrow-color');
+    @include rc-component-animation(transform);
+
+    &.rc-select-arrow-open {
+      transform: rotate(180deg);
+    }
+  }
+
+  // ── Dropdown panel (rendered inside CDK overlay) ───────────────────────────
+  .rc-select-panel {
+    background: rc-theme('select-panel-background');
+    border: 1px solid rc-theme('select-panel-border-color');
+    border-radius: rc-theme('select-panel-border-radius');
+    box-shadow: rc-theme('select-panel-shadow');
+    overflow-y: auto;
+    max-height: rc-theme('select-panel-max-height');
+    padding: rc-theme('select-panel-padding');
+    width: 100%;
+  }
+
+  // ── Option row ─────────────────────────────────────────────────────────────
+  .rc-select-option {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: rc-theme('select-option-padding');
+    font-size: rc-theme('select-option-font-size');
+    color: rc-theme('select-option-text-color');
+    border-radius: rc-theme('select-option-border-radius');
+    cursor: pointer;
+    @include rc-component-animation(background);
+
+    &:hover:not(.rc-select-option-disabled) {
+      background: rc-theme('select-option-hover-background');
+    }
+
+    &.rc-select-option-active:not(.rc-select-option-disabled) {
+      background: rc-theme('select-option-hover-background');
+      outline: 2px solid rc-theme('select-focus-border-color');
+      outline-offset: -2px;
+    }
+
+    &.rc-select-option-selected {
+      background: rc-theme('select-option-selected-background');
+      color: rc-theme('select-option-selected-text-color');
+      font-weight: rc-theme('select-option-selected-font-weight');
+    }
+
+    &.rc-select-option-selected:hover:not(.rc-select-option-disabled) {
+      background: rc-theme('select-option-selected-hover-background');
+    }
+
+    &.rc-select-option-disabled {
+      color: rc-theme('select-disabled-text-color');
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  }
+
+  .rc-select-option-label {
+    flex: 1 1 0;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  // ── Multi-select checkbox (rc-checkbox) ────────────────────────────────────
+  .rc-select-option rc-checkbox {
+    pointer-events: none;
+    flex-shrink: 0;
+  }
+
+  // ── Empty state ────────────────────────────────────────────────────────────
+  .rc-select-no-options {
+    padding: rc-theme('select-option-padding');
+    font-size: rc-theme('select-option-font-size');
+    color: rc-theme('select-placeholder-color');
+    text-align: center;
+  }
+}

package/sidenav/rc-sidenav.scss

@@ -0,0 +1,154 @@
+// =============================================================================
+// rc-sidenav  Resolve Components Sidenav (Themed)
+// =============================================================================
+
+@use '../styles/theming/get-value' as *;
+@use '../styles/theming/install' as *;
+@use '../styles/theming/animation' as *;
+
+@include rc-install-component() {
+  // ── Container ──────────────────────────────────────────────────────────────
+  .rc-sidenav-container {
+    position: relative;
+    // Always flex — over/push sidenavs are position:absolute so they're out of
+    // flow; side sidenavs become flex items alongside the content.
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+
+  // ── Backdrop ───────────────────────────────────────────────────────────────
+  .rc-sidenav-backdrop {
+    position: absolute;
+    inset: 0;
+    z-index: rc-theme('sidenav-backdrop-z-index');
+    background: rc-theme('sidenav-backdrop-color');
+
+    @media (prefers-reduced-motion: no-preference) {
+      animation: rc-sidenav-backdrop-in rc-theme('sidenav-transition-duration')
+        rc-theme('sidenav-transition-timing') both;
+    }
+
+    pointer-events: auto;
+  }
+
+  @keyframes rc-sidenav-backdrop-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  // ── Sidenav panel (shared) ─────────────────────────────────────────────────
+  .rc-sidenav {
+    background: rc-theme('sidenav-background');
+    color: rc-theme('sidenav-text-color');
+    box-shadow: rc-theme('sidenav-shadow');
+    overflow-y: auto;
+    overflow-x: hidden;
+    box-sizing: border-box;
+    will-change: transform;
+    // Only transitions in side mode (width) and over/push (transform)
+    @include rc-component-animation(
+      transform width,
+      $duration: rc-theme('sidenav-transition-duration'),
+      $timing: rc-theme('sidenav-transition-timing')
+    );
+    z-index: rc-theme('sidenav-z-index');
+  }
+
+  // ── Over mode ──────────────────────────────────────────────────────────────
+  .rc-sidenav.rc-sidenav-mode-over,
+  .rc-sidenav.rc-sidenav-mode-push {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: rc-theme('sidenav-z-index');
+    width: var(--rc-sidenav-width, rc-theme('sidenav-width'));
+    // Ensure no flex-item sizing
+    flex: none;
+  }
+
+  // Start position (left in LTR)
+  .rc-sidenav.rc-sidenav-mode-over.rc-sidenav-start,
+  .rc-sidenav.rc-sidenav-mode-push.rc-sidenav-start {
+    left: 0;
+    transform: translateX(-100%);
+    border-right: 1px solid rc-theme('sidenav-border-color');
+  }
+
+  // End position (right in LTR)
+  .rc-sidenav.rc-sidenav-mode-over.rc-sidenav-end,
+  .rc-sidenav.rc-sidenav-mode-push.rc-sidenav-end {
+    right: 0;
+    transform: translateX(100%);
+    border-left: 1px solid rc-theme('sidenav-border-color');
+  }
+
+  // Open state — slide panel into view
+  .rc-sidenav.rc-sidenav-mode-over.rc-sidenav-open,
+  .rc-sidenav.rc-sidenav-mode-push.rc-sidenav-open {
+    transform: translateX(0);
+    box-shadow: rc-theme('sidenav-shadow');
+  }
+
+  // ── Side mode ──────────────────────────────────────────────────────────────
+  .rc-sidenav.rc-sidenav-mode-side {
+    position: relative;
+    flex: 0 0 auto;
+    width: var(--rc-sidenav-width, rc-theme('sidenav-width'));
+    overflow: hidden; // needed for width-collapse animation
+  }
+
+  // Side + start → first column
+  .rc-sidenav.rc-sidenav-mode-side.rc-sidenav-start {
+    order: 0;
+    border-right: 1px solid rc-theme('sidenav-border-color');
+  }
+
+  // Side + end → last column
+  .rc-sidenav.rc-sidenav-mode-side.rc-sidenav-end {
+    order: 2;
+    border-left: 1px solid rc-theme('sidenav-border-color');
+  }
+
+  // Closed side sidenav: collapse width to zero
+  .rc-sidenav.rc-sidenav-mode-side:not(.rc-sidenav-open) {
+    width: 0;
+    border-color: transparent;
+  }
+
+  // ── Main content slot ──────────────────────────────────────────────────────
+  .rc-sidenav-content {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow: auto;
+    order: 1;
+    // Push mode offset is handled below via a CSS custom property
+    @include rc-component-animation(
+      margin-left margin-right,
+      $duration: rc-theme('sidenav-transition-duration'),
+      $timing: rc-theme('sidenav-transition-timing')
+    );
+  }
+
+  // ── Push mode — offset the content ────────────────────────────────────────
+  .rc-sidenav-container-push-open.rc-sidenav-container-push-start
+    .rc-sidenav-content,
+  .rc-sidenav-container-push-open.rc-sidenav-container-push-start
+    > *:not(rc-sidenav):not(.rc-sidenav-backdrop) {
+    margin-left: var(--rc-sidenav-push-width, rc-theme('sidenav-width'));
+  }
+
+  .rc-sidenav-container-push-open.rc-sidenav-container-push-end
+    .rc-sidenav-content,
+  .rc-sidenav-container-push-open.rc-sidenav-container-push-end
+    > *:not(rc-sidenav):not(.rc-sidenav-backdrop) {
+    margin-right: var(--rc-sidenav-push-width, rc-theme('sidenav-width'));
+  }
+}

package/slider/rc-slider.scss

@@ -0,0 +1,311 @@
+// =============================================================================
+// rc-slider  Resolve Components Slider (Themed)
+// =============================================================================
+
+@use '../styles/theming/get-value' as *;
+@use '../styles/theming/install' as *;
+@use '../styles/theming/animation' as *;
+
+@include rc-install-component() {
+  // ── Host ───────────────────────────────────────────────────────────────────
+  .rc-slider {
+    display: flex;
+    flex-direction: column;
+    gap: rc-theme('slider-label-gap');
+    font-family: rc-theme('slider-font-family');
+    width: 100%;
+
+    &.rc-slider-disabled {
+      opacity: rc-theme('slider-disabled-opacity');
+      cursor: not-allowed;
+
+      .rc-slider-input {
+        cursor: not-allowed;
+        pointer-events: none;
+      }
+    }
+  }
+
+  // ── Value / min-max row ────────────────────────────────────────────────────
+  .rc-slider-value-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: rc-theme('slider-value-font-size');
+    color: rc-theme('slider-value-color');
+  }
+
+  .rc-slider-current-value {
+    font-weight: rc-theme('slider-value-font-weight');
+    color: rc-theme('slider-value-active-color');
+  }
+
+  .rc-slider-min-label,
+  .rc-slider-max-label {
+    color: rc-theme('slider-hint-color');
+    font-size: rc-theme('slider-hint-font-size');
+  }
+
+  // ── Track wrapper (relative container for track + input) ──────────────────
+  .rc-slider-track-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 0; // vertical hit area
+  }
+
+  // ── Visual track ──────────────────────────────────────────────────────────
+  .rc-slider-track {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: rc-theme('slider-md-track-height');
+    background: rc-theme('slider-track-background');
+    border-radius: rc-theme('slider-track-border-radius');
+    overflow: hidden;
+    pointer-events: none;
+
+    .rc-slider-sm & {
+      height: rc-theme('slider-sm-track-height');
+    }
+
+    .rc-slider-lg & {
+      height: rc-theme('slider-lg-track-height');
+    }
+  }
+
+  // ── Fill ──────────────────────────────────────────────────────────────────
+  .rc-slider-fill {
+    height: 100%;
+    background: rc-theme('slider-fill-color');
+    border-radius: inherit;
+    transition: width 0ms; // instant update while dragging
+  }
+
+  // ── Tick marks ────────────────────────────────────────────────────────────
+  .rc-slider-ticks {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+  }
+
+  .rc-slider-tick {
+    position: absolute;
+    width: rc-theme('slider-tick-size');
+    height: rc-theme('slider-tick-size');
+    border-radius: 50%;
+    background: rc-theme('slider-tick-color');
+    transform: translateX(-50%);
+
+    &.rc-slider-tick-active {
+      background: rc-theme('slider-tick-active-color');
+    }
+  }
+
+  // ── Native range input ─────────────────────────────────────────────────────
+  // Sits on top of the visual track; transparent background so visual track
+  // shows through. Only the thumb styled here.
+  .rc-slider-input {
+    -webkit-appearance: none;
+    appearance: none;
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    height: rc-theme('slider-md-thumb-size');
+    background: transparent;
+    cursor: pointer;
+    margin: 0;
+
+    .rc-slider-sm & {
+      height: rc-theme('slider-sm-thumb-size');
+    }
+
+    .rc-slider-lg & {
+      height: rc-theme('slider-lg-thumb-size');
+    }
+
+    // ── WebKit thumb ────────────────────────────────────────────────────────
+    &::-webkit-slider-runnable-track {
+      background: transparent;
+      height: rc-theme('slider-md-track-height');
+    }
+
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: rc-theme('slider-md-thumb-size');
+      height: rc-theme('slider-md-thumb-size');
+      border-radius: 50%;
+      background: rc-theme('slider-thumb-background');
+      border: rc-theme('slider-thumb-border-width') solid
+        rc-theme('slider-thumb-border-color');
+      box-shadow: rc-theme('slider-thumb-shadow');
+      @include rc-component-animation(
+        transform,
+        $duration: rc-theme('slider-transition-duration'),
+        $timing: rc-theme('slider-transition-timing')
+      );
+      cursor: pointer;
+      margin-top: calc(
+        (
+            #{rc-theme('slider-md-track-height')} -
+              #{rc-theme('slider-md-thumb-size')}
+          ) /
+          2
+      );
+    }
+
+    // ── Firefox thumb ───────────────────────────────────────────────────────
+    &::-moz-range-track {
+      background: transparent;
+      height: rc-theme('slider-md-track-height');
+    }
+
+    &::-moz-range-thumb {
+      width: rc-theme('slider-md-thumb-size');
+      height: rc-theme('slider-md-thumb-size');
+      border-radius: 50%;
+      background: rc-theme('slider-thumb-background');
+      border: rc-theme('slider-thumb-border-width') solid
+        rc-theme('slider-thumb-border-color');
+      box-shadow: rc-theme('slider-thumb-shadow');
+      cursor: pointer;
+    }
+
+    // ── Small size ──────────────────────────────────────────────────────────
+    .rc-slider-sm &::-webkit-slider-thumb {
+      width: rc-theme('slider-sm-thumb-size');
+      height: rc-theme('slider-sm-thumb-size');
+      margin-top: calc(
+        (
+            #{rc-theme('slider-sm-track-height')} -
+              #{rc-theme('slider-sm-thumb-size')}
+          ) /
+          2
+      );
+    }
+
+    .rc-slider-sm &::-moz-range-thumb {
+      width: rc-theme('slider-sm-thumb-size');
+      height: rc-theme('slider-sm-thumb-size');
+    }
+
+    // ── Large size ──────────────────────────────────────────────────────────
+    .rc-slider-lg &::-webkit-slider-thumb {
+      width: rc-theme('slider-lg-thumb-size');
+      height: rc-theme('slider-lg-thumb-size');
+      margin-top: calc(
+        (
+            #{rc-theme('slider-lg-track-height')} -
+              #{rc-theme('slider-lg-thumb-size')}
+          ) /
+          2
+      );
+    }
+
+    .rc-slider-lg &::-moz-range-thumb {
+      width: rc-theme('slider-lg-thumb-size');
+      height: rc-theme('slider-lg-thumb-size');
+    }
+
+    // ── Hover (both browsers) ────────────────────────────────────────────────
+    &:not(:disabled):hover::-webkit-slider-thumb {
+      transform: scale(rc-theme('slider-thumb-hover-scale'));
+    }
+
+    &:not(:disabled):hover::-moz-range-thumb {
+      transform: scale(rc-theme('slider-thumb-hover-scale'));
+    }
+
+    // ── Focus ring ───────────────────────────────────────────────────────────
+    &:focus-visible {
+      outline: none;
+    }
+
+    &:focus-visible::-webkit-slider-thumb {
+      outline: 2px solid rc-theme('slider-focus-outline-color');
+      outline-offset: 2px;
+    }
+
+    &:focus-visible::-moz-range-thumb {
+      outline: 2px solid rc-theme('slider-focus-outline-color');
+      outline-offset: 2px;
+    }
+  }
+
+  // ── Status variants ───────────────────────────────────────────────────────
+  .rc-slider-success {
+    .rc-slider-fill {
+      background: rc-theme('slider-success-fill-color');
+    }
+    .rc-slider-tick-active {
+      background: rc-theme('slider-success-fill-color');
+    }
+    .rc-slider-input::-webkit-slider-thumb {
+      background: rc-theme('slider-success-thumb-background');
+    }
+    .rc-slider-input::-moz-range-thumb {
+      background: rc-theme('slider-success-thumb-background');
+    }
+    .rc-slider-current-value {
+      color: rc-theme('slider-success-fill-color');
+    }
+    .rc-slider-input:focus-visible::-webkit-slider-thumb {
+      outline-color: rc-theme('slider-success-focus-outline-color');
+    }
+    .rc-slider-input:focus-visible::-moz-range-thumb {
+      outline-color: rc-theme('slider-success-focus-outline-color');
+    }
+  }
+
+  .rc-slider-warning {
+    .rc-slider-fill {
+      background: rc-theme('slider-warning-fill-color');
+    }
+    .rc-slider-tick-active {
+      background: rc-theme('slider-warning-fill-color');
+    }
+    .rc-slider-input::-webkit-slider-thumb {
+      background: rc-theme('slider-warning-thumb-background');
+    }
+    .rc-slider-input::-moz-range-thumb {
+      background: rc-theme('slider-warning-thumb-background');
+    }
+    .rc-slider-current-value {
+      color: rc-theme('slider-warning-fill-color');
+    }
+    .rc-slider-input:focus-visible::-webkit-slider-thumb {
+      outline-color: rc-theme('slider-warning-focus-outline-color');
+    }
+    .rc-slider-input:focus-visible::-moz-range-thumb {
+      outline-color: rc-theme('slider-warning-focus-outline-color');
+    }
+  }
+
+  .rc-slider-danger {
+    .rc-slider-fill {
+      background: rc-theme('slider-danger-fill-color');
+    }
+    .rc-slider-tick-active {
+      background: rc-theme('slider-danger-fill-color');
+    }
+    .rc-slider-input::-webkit-slider-thumb {
+      background: rc-theme('slider-danger-thumb-background');
+    }
+    .rc-slider-input::-moz-range-thumb {
+      background: rc-theme('slider-danger-thumb-background');
+    }
+    .rc-slider-current-value {
+      color: rc-theme('slider-danger-fill-color');
+    }
+    .rc-slider-input:focus-visible::-webkit-slider-thumb {
+      outline-color: rc-theme('slider-danger-focus-outline-color');
+    }
+    .rc-slider-input:focus-visible::-moz-range-thumb {
+      outline-color: rc-theme('slider-danger-focus-outline-color');
+    }
+  }
+}