@resolve-components/theme 1.0.0 → 1.2.1

package/checkbox/rc-checkbox.scss

@@ -0,0 +1,163 @@
+// =============================================================================
+// rc-checkbox  Resolve Components Checkbox (Themed)
+// =============================================================================
+
+@use '../styles/theming/get-value' as *;
+@use '../styles/theming/install' as *;
+@use '../styles/theming/animation' as *;
+
+@include rc-install-component() {
+  // ── Host wrapper ───────────────────────────────────────────────────────────
+  .rc-checkbox {
+    display: inline-flex;
+    align-items: center;
+    gap: rc-theme('checkbox-gap');
+    cursor: pointer;
+    user-select: none;
+    font-family: rc-theme('checkbox-font-family');
+    font-size: rc-theme('checkbox-md-font-size');
+    color: rc-theme('checkbox-text-color');
+    position: relative;
+
+    // ── Sizes ────────────────────────────────────────────────────────────────
+    &.rc-checkbox-sm {
+      font-size: rc-theme('checkbox-sm-font-size');
+
+      .rc-checkbox-box {
+        width: rc-theme('checkbox-sm-size');
+        height: rc-theme('checkbox-sm-size');
+      }
+    }
+
+    &.rc-checkbox-md {
+      font-size: rc-theme('checkbox-md-font-size');
+
+      .rc-checkbox-box {
+        width: rc-theme('checkbox-md-size');
+        height: rc-theme('checkbox-md-size');
+      }
+    }
+
+    &.rc-checkbox-lg {
+      font-size: rc-theme('checkbox-lg-font-size');
+
+      .rc-checkbox-box {
+        width: rc-theme('checkbox-lg-size');
+        height: rc-theme('checkbox-lg-size');
+      }
+    }
+
+    // ── Hover (non-disabled) ──────────────────────────────────────────────────
+    &:not(.rc-checkbox-disabled):hover .rc-checkbox-box {
+      border-color: rc-theme('checkbox-hover-border-color');
+      background: rc-theme('checkbox-hover-background');
+    }
+
+    // ── Checked state ────────────────────────────────────────────────────────
+    &.rc-checkbox-checked .rc-checkbox-box,
+    &.rc-checkbox-indeterminate .rc-checkbox-box {
+      background: rc-theme('checkbox-checked-background');
+      border-color: rc-theme('checkbox-checked-border-color');
+      color: rc-theme('checkbox-checked-icon-color');
+    }
+
+    &.rc-checkbox-checked:not(.rc-checkbox-disabled):hover .rc-checkbox-box,
+    &.rc-checkbox-indeterminate:not(.rc-checkbox-disabled):hover
+      .rc-checkbox-box {
+      background: rc-theme('checkbox-checked-hover-background');
+      border-color: rc-theme('checkbox-checked-hover-background');
+    }
+
+    // ── Disabled ─────────────────────────────────────────────────────────────
+    &.rc-checkbox-disabled {
+      cursor: not-allowed;
+      opacity: rc-theme('checkbox-disabled-opacity');
+    }
+
+    // ── Status variants ───────────────────────────────────────────────────────
+    &.rc-checkbox-success .rc-checkbox-box {
+      border-color: rc-theme('checkbox-success-border-color');
+    }
+
+    &.rc-checkbox-success.rc-checkbox-checked .rc-checkbox-box,
+    &.rc-checkbox-success.rc-checkbox-indeterminate .rc-checkbox-box {
+      background: rc-theme('checkbox-success-checked-background');
+      border-color: rc-theme('checkbox-success-checked-background');
+    }
+
+    &.rc-checkbox-warning .rc-checkbox-box {
+      border-color: rc-theme('checkbox-warning-border-color');
+    }
+
+    &.rc-checkbox-warning.rc-checkbox-checked .rc-checkbox-box,
+    &.rc-checkbox-warning.rc-checkbox-indeterminate .rc-checkbox-box {
+      background: rc-theme('checkbox-warning-checked-background');
+      border-color: rc-theme('checkbox-warning-checked-background');
+      color: rc-theme('checkbox-warning-icon-color');
+    }
+
+    &.rc-checkbox-danger .rc-checkbox-box {
+      border-color: rc-theme('checkbox-danger-border-color');
+    }
+
+    &.rc-checkbox-danger.rc-checkbox-checked .rc-checkbox-box,
+    &.rc-checkbox-danger.rc-checkbox-indeterminate .rc-checkbox-box {
+      background: rc-theme('checkbox-danger-checked-background');
+      border-color: rc-theme('checkbox-danger-checked-background');
+    }
+
+    // ── Focus ring (via native input focus-visible) ────────────────────────
+    &:has(.rc-checkbox-input:focus-visible) .rc-checkbox-box {
+      outline: 2px solid rc-theme('checkbox-focus-outline-color');
+      outline-offset: 2px;
+    }
+
+    // ── Label left variant ────────────────────────────────────────────────────
+    &.rc-checkbox-label-left {
+      flex-direction: row-reverse;
+    }
+  }
+
+  // ── Visual checkbox box ────────────────────────────────────────────────────
+  .rc-checkbox-box {
+    flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: 1.5px solid rc-theme('checkbox-border-color');
+    border-radius: rc-theme('checkbox-border-radius');
+    background: rc-theme('checkbox-background');
+    color: rc-theme('checkbox-icon-color');
+    @include rc-component-animation(background border-color);
+
+    // Default md size (fallback when no size class)
+    width: rc-theme('checkbox-md-size');
+    height: rc-theme('checkbox-md-size');
+  }
+
+  // ── Checkmark / indeterminate SVG ─────────────────────────────────────────
+  .rc-checkbox-icon {
+    display: block;
+    flex-shrink: 0;
+  }
+
+  // ── Label text ─────────────────────────────────────────────────────────────
+  .rc-checkbox-label {
+    line-height: 1.5;
+  }
+
+  // ── Native input — invisible overlay covering the full host ──────────────
+  // Opacity-0 instead of clip so the input remains a real click/keyboard
+  // target (browser-native toggle, Space key, focus ring all work for free).
+  .rc-checkbox-input {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    margin: 0;
+    padding: 0;
+    cursor: inherit;
+    z-index: 1;
+  }
+}

package/chip/rc-chip.scss

@@ -0,0 +1,172 @@
+// =============================================================================
+// rc-chip  Resolve Components Chip (Themed)
+// =============================================================================
+
+@use '../styles/theming/get-value' as *;
+@use '../styles/theming/install' as *;
+@use '../styles/theming/animation' as *;
+
+@include rc-install-component() {
+  .rc-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: rc-theme('chip-gap');
+    border-radius: rc-theme('chip-border-radius');
+    border: 1px solid rc-theme('chip-default-border-color');
+    background: rc-theme('chip-default-background-color');
+    color: rc-theme('chip-default-text-color');
+    font-family: rc-theme('chip-font-family');
+    font-weight: rc-theme('chip-font-weight');
+    white-space: nowrap;
+    cursor: default;
+    user-select: none;
+    @include rc-component-animation(background color border-color box-shadow);
+
+    // ── Sizes ──────────────────────────────────────────────────────────────
+
+    &-sm {
+      font-size: rc-theme('chip-sm-font-size');
+      padding: rc-theme('chip-sm-padding');
+
+      .rc-chip-icon,
+      .rc-chip-close rc-icon {
+        width: 0.875rem;
+        height: 0.875rem;
+        font-size: 0.875rem;
+      }
+    }
+
+    &-md {
+      font-size: rc-theme('chip-md-font-size');
+      padding: rc-theme('chip-md-padding');
+
+      .rc-chip-icon,
+      .rc-chip-close rc-icon {
+        width: 1rem;
+        height: 1rem;
+        font-size: 1rem;
+      }
+    }
+
+    // ── Variants ───────────────────────────────────────────────────────────
+
+    &-primary {
+      background: rc-theme('chip-primary-background-color');
+      color: rc-theme('chip-primary-text-color');
+      border-color: transparent;
+    }
+
+    &-success {
+      background: rc-theme('chip-success-background-color');
+      color: rc-theme('chip-success-text-color');
+      border-color: transparent;
+    }
+
+    &-warning {
+      background: rc-theme('chip-warning-background-color');
+      color: rc-theme('chip-warning-text-color');
+      border-color: transparent;
+    }
+
+    &-danger {
+      background: rc-theme('chip-danger-background-color');
+      color: rc-theme('chip-danger-text-color');
+      border-color: transparent;
+    }
+
+    &-info {
+      background: rc-theme('chip-info-background-color');
+      color: rc-theme('chip-info-text-color');
+      border-color: transparent;
+    }
+
+    // ── Clickable state ────────────────────────────────────────────────────
+
+    &-clickable {
+      cursor: pointer;
+
+      &:hover:not(.rc-chip-disabled) {
+        background: rc-theme('chip-hover-background-color');
+        border-color: rc-theme('chip-hover-border-color');
+      }
+
+      &:focus-visible {
+        outline: 2px solid rc-theme('chip-focus-outline-color');
+        outline-offset: 2px;
+      }
+
+      &.rc-chip-primary:hover:not(.rc-chip-disabled) {
+        filter: brightness(0.9);
+      }
+
+      &.rc-chip-success:hover:not(.rc-chip-disabled) {
+        filter: brightness(0.9);
+      }
+      &.rc-chip-warning:hover:not(.rc-chip-disabled) {
+        filter: brightness(0.9);
+      }
+      &.rc-chip-danger:hover:not(.rc-chip-disabled) {
+        filter: brightness(0.9);
+      }
+      &.rc-chip-info:hover:not(.rc-chip-disabled) {
+        filter: brightness(0.9);
+      }
+    }
+
+    // ── Selected state ─────────────────────────────────────────────────────
+
+    &-selected {
+      background: rc-theme('chip-selected-background-color');
+      color: rc-theme('chip-selected-text-color');
+      border-color: transparent;
+    }
+
+    // ── Disabled state ─────────────────────────────────────────────────────
+
+    &-disabled {
+      opacity: rc-theme('chip-disabled-opacity');
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    // ── Parts ──────────────────────────────────────────────────────────────
+
+    &-icon {
+      display: inline-flex;
+      align-items: center;
+      flex-shrink: 0;
+      opacity: 0.8;
+    }
+
+    &-label {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    &-close {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background: none;
+      border: none;
+      padding: 0;
+      margin: 0;
+      margin-left: 0.125rem;
+      cursor: pointer;
+      color: inherit;
+      opacity: 0.65;
+      border-radius: 50%;
+      line-height: 0;
+      @include rc-component-animation(opacity background);
+
+      &:hover:not(:disabled) {
+        opacity: 1;
+        background: rc-theme('chip-close-hover-background-color');
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+      }
+    }
+  }
+}

package/datepicker/rc-datepicker.scss

@@ -0,0 +1,322 @@
+@use '../styles/theming/get-value' as *;
+@use '../styles/theming/install' as *;
+@use '../styles/theming/animation' as *;
+
+@include rc-install-component() {
+  // ── Host / Trigger ──────────────────────────────────────────────────────────
+  .rc-datepicker {
+    display: inline-flex;
+    flex-direction: column;
+    position: relative;
+    width: 100%;
+  }
+
+  .rc-datepicker-trigger {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+    width: 100%;
+    box-sizing: border-box;
+    background: rc-theme('datepicker-background');
+    border: 1.5px solid rc-theme('datepicker-border-color');
+    border-radius: rc-theme('datepicker-border-radius');
+    padding: rc-theme('datepicker-padding-md');
+    font-size: rc-theme('datepicker-font-size-md');
+    color: rc-theme('datepicker-text-color');
+    @include rc-component-animation(
+      border-color box-shadow background,
+      $duration: rc-theme('datepicker-transition-duration'),
+      $timing: rc-theme('datepicker-transition-timing')
+    );
+    height: rc-theme('datepicker-height-md');
+
+    &:hover:not(.rc-datepicker-disabled .rc-datepicker-trigger) {
+      border-color: rc-theme('datepicker-hover-border-color');
+    }
+
+    &:focus-visible,
+    .rc-datepicker-open & {
+      outline: none;
+      border-color: rc-theme('datepicker-focus-border-color');
+      box-shadow: rc-theme('datepicker-focus-shadow');
+    }
+  }
+
+  // ── Disabled ────────────────────────────────────────────────────────────────
+  .rc-datepicker-disabled .rc-datepicker-trigger {
+    background: rc-theme('datepicker-disabled-background');
+    border-color: rc-theme('datepicker-disabled-border-color');
+    color: rc-theme('datepicker-disabled-text-color');
+    cursor: not-allowed;
+    pointer-events: none;
+    opacity: 0.7;
+  }
+
+  // ── Status variants ─────────────────────────────────────────────────────────
+  .rc-datepicker-success .rc-datepicker-trigger {
+    border-color: rc-theme('datepicker-success-border-color');
+    &:focus-visible,
+    .rc-datepicker-open.rc-datepicker-success & {
+      box-shadow: rc-theme('datepicker-success-focus-shadow');
+    }
+  }
+
+  .rc-datepicker-warning .rc-datepicker-trigger {
+    border-color: rc-theme('datepicker-warning-border-color');
+    &:focus-visible,
+    .rc-datepicker-open.rc-datepicker-warning & {
+      box-shadow: rc-theme('datepicker-warning-focus-shadow');
+    }
+  }
+
+  .rc-datepicker-danger .rc-datepicker-trigger {
+    border-color: rc-theme('datepicker-danger-border-color');
+    &:focus-visible,
+    .rc-datepicker-open.rc-datepicker-danger & {
+      box-shadow: rc-theme('datepicker-danger-focus-shadow');
+    }
+  }
+
+  // ── Size variants ───────────────────────────────────────────────────────────
+  .rc-datepicker-sm .rc-datepicker-trigger {
+    padding: rc-theme('datepicker-padding-sm');
+    font-size: rc-theme('datepicker-font-size-sm');
+    height: rc-theme('datepicker-height-sm');
+  }
+
+  .rc-datepicker-lg .rc-datepicker-trigger {
+    padding: rc-theme('datepicker-padding-lg');
+    font-size: rc-theme('datepicker-font-size-lg');
+    height: rc-theme('datepicker-height-lg');
+  }
+
+  // ── Trigger internals ───────────────────────────────────────────────────────
+  .rc-datepicker-trigger-text {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    line-height: 1.25;
+  }
+
+  .rc-datepicker-trigger-placeholder {
+    color: rc-theme('datepicker-placeholder-color');
+  }
+
+  .rc-datepicker-icon {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    color: rc-theme('datepicker-icon-color');
+    line-height: 1;
+  }
+
+  .rc-datepicker-clear {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.125rem;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    color: rc-theme('datepicker-icon-color');
+    border-radius: rc-theme('datepicker-border-radius');
+    line-height: 1;
+
+    &:hover {
+      color: rc-theme('datepicker-text-color');
+    }
+  }
+
+  // ── Panel ───────────────────────────────────────────────────────────────────
+  .rc-datepicker-panel {
+    background: rc-theme('datepicker-panel-background');
+    border: 1px solid rc-theme('datepicker-panel-border-color');
+    border-radius: rc-theme('datepicker-panel-border-radius');
+    box-shadow: rc-theme('datepicker-panel-shadow');
+    padding: 0.75rem;
+    min-width: 16rem;
+    width: 16rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  // ── Calendar ─────────────────────────────────────────────────────────────────
+  .rc-datepicker-calendar {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+  }
+
+  .rc-datepicker-cal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.25rem;
+  }
+
+  // month-label: make the ghost button span full available width
+  .rc-datepicker-month-label {
+    flex: 1;
+    justify-content: center;
+    font-weight: 500;
+  }
+
+  // ── Weekday labels ───────────────────────────────────────────────────────────
+  .rc-datepicker-weekdays {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    text-align: center;
+  }
+
+  .rc-datepicker-weekday {
+    font-size: 0.6875rem;
+    font-weight: 600;
+    color: rc-theme('datepicker-weekday-color');
+    padding: 0.25rem 0;
+    text-align: center;
+  }
+
+  // ── Day grid ─────────────────────────────────────────────────────────────────
+  .rc-datepicker-days {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+    gap: 0.0625rem;
+  }
+
+  .rc-datepicker-day {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    aspect-ratio: 1;
+    height: 2rem;
+    padding: 0;
+    font-size: 0.8125rem;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: rc-theme('datepicker-day-border-radius');
+    cursor: pointer;
+    color: rc-theme('datepicker-text-color');
+    @include rc-component-animation(background color);
+
+    &:hover:not(.rc-datepicker-day-disabled) {
+      background: rc-theme('datepicker-day-hover-background');
+    }
+
+    &:focus-visible {
+      outline: 2px solid rc-theme('datepicker-focus-border-color');
+      outline-offset: -1px;
+    }
+  }
+
+  .rc-datepicker-day-other {
+    color: rc-theme('datepicker-day-other-color');
+  }
+
+  .rc-datepicker-day-today {
+    border-color: rc-theme('datepicker-day-today-border-color');
+    font-weight: 600;
+  }
+
+  .rc-datepicker-day-selected {
+    background: rc-theme('datepicker-day-selected-background') !important;
+    color: rc-theme('datepicker-day-selected-color') !important;
+    font-weight: 600;
+  }
+
+  .rc-datepicker-day-disabled {
+    color: rc-theme('datepicker-day-disabled-color');
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  // ── Month / Year grids ────────────────────────────────────────────────────────
+  .rc-datepicker-month-grid,
+  .rc-datepicker-year-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 0.25rem;
+  }
+
+  .rc-datepicker-month-cell,
+  .rc-datepicker-year-cell {
+    padding: 0.375rem 0.25rem;
+    background: transparent;
+    border: 1px solid transparent;
+    border-radius: rc-theme('datepicker-border-radius');
+    cursor: pointer;
+    font-size: 0.8125rem;
+    text-align: center;
+    color: rc-theme('datepicker-text-color');
+    @include rc-component-animation(background);
+
+    &:hover {
+      background: rc-theme('datepicker-day-hover-background');
+    }
+    &:focus-visible {
+      outline: 2px solid rc-theme('datepicker-focus-border-color');
+      outline-offset: -1px;
+    }
+  }
+
+  .rc-datepicker-cell-active {
+    background: rc-theme('datepicker-day-selected-background') !important;
+    color: rc-theme('datepicker-day-selected-color') !important;
+    font-weight: 600;
+  }
+
+  // ── Time picker ──────────────────────────────────────────────────────────────
+  .rc-datepicker-time-picker {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.375rem 0;
+    border-top: 1px solid rc-theme('datepicker-panel-border-color');
+  }
+
+  .rc-datepicker-time-picker-standalone {
+    border-top: none;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  .rc-datepicker-time-sep {
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: rc-theme('datepicker-text-color');
+    padding-bottom: 0.25rem;
+  }
+
+  .rc-datepicker-spinner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.125rem;
+  }
+
+  .rc-datepicker-spinner-value {
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: rc-theme('datepicker-text-color');
+    min-width: 2rem;
+    text-align: center;
+    line-height: 1.5;
+    font-variant-numeric: tabular-nums;
+  }
+
+  // ── Footer ───────────────────────────────────────────────────────────────────
+  .rc-datepicker-footer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding-top: 0.375rem;
+    border-top: 1px solid rc-theme('datepicker-panel-border-color');
+  }
+}