@recoui/style 0.0.0-stage → 0.1.0-alpha.0

package/src/styles/input/native.scss

@@ -0,0 +1,154 @@
+@layer components.ui {
+  // 数字与日期时间控件保留原生编辑、步进和选择器行为。
+  :is(input.ui-input, .ui-input > input):is(
+      [type="number"],
+      [type="date"],
+      [type="time"],
+      [type="datetime-local"],
+      [type="month"],
+      [type="week"]
+    ) {
+    appearance: auto;
+    font-variant-numeric: tabular-nums;
+  }
+
+  :is(input.ui-input, .ui-input > input)::-webkit-datetime-edit {
+    padding-block: 0;
+  }
+
+  // 文件按钮沿用 Button 的默认背景、内边距和悬停色，外边框由输入框提供。
+  .ui-input[type="file"] {
+    display: block;
+    padding: 0;
+    overflow: hidden;
+    cursor: pointer;
+  }
+
+  .ui-input:has(> input[type="file"]) {
+    padding-inline: 0;
+    overflow: hidden;
+  }
+
+  .ui-input > input[type="file"] {
+    padding: 0;
+    cursor: pointer;
+  }
+
+  :is(input.ui-input, .ui-input > input)[type="file"] {
+    &::file-selector-button {
+      box-sizing: border-box;
+      min-block-size: calc(var(--ui-height) - 2px);
+      margin-inline-end: 0.625rem;
+      padding-block: 0;
+      padding-inline: 1rem;
+      border: 0;
+      border-inline-end: 1px solid var(--color-border);
+      background: var(--color-background);
+      color: inherit;
+      font: inherit;
+      cursor: inherit;
+      transition: background-color var(--transition);
+    }
+
+    &:is(:disabled, [aria-disabled="true"])::file-selector-button {
+      background: var(--color-input-fill);
+    }
+  }
+
+  input.ui-input[type="file"]:not(
+      :disabled,
+      [aria-disabled="true"],
+      [data-variant="filled"],
+      [data-variant="unstyled"]
+    )::file-selector-button:hover,
+  .ui-input:not([aria-disabled="true"], [data-variant="filled"], [data-variant="unstyled"])
+    > input[type="file"]:not(:disabled, [aria-disabled="true"])::file-selector-button:hover {
+    background: color-mix(
+      in oklch,
+      oklch(from var(--color-foreground) calc(l * 0.1 + 0.9) calc(c * 0.2) h) 20%,
+      var(--color-background)
+    );
+  }
+
+  // 融合外观不保留按钮底色和分隔线，悬停时也保持输入框的整体背景。
+  input.ui-input[type="file"]:is(
+      [data-variant="filled"],
+      [data-variant="unstyled"]
+    )::file-selector-button,
+  .ui-input:is([data-variant="filled"], [data-variant="unstyled"])
+    > input[type="file"]::file-selector-button {
+    border-inline-end: 0;
+    background: transparent;
+  }
+
+  input.ui-input[type="file"][data-variant="unstyled"]::file-selector-button,
+  .ui-input[data-variant="unstyled"] > input[type="file"]::file-selector-button {
+    min-block-size: var(--ui-height);
+    padding-inline-start: 0;
+  }
+
+  .ui-input:is([type="color"], :has(> input[type="color"])) {
+    inline-size: 4rem;
+    padding: 0.25rem;
+    cursor: pointer;
+  }
+
+  .ui-input > input[type="color"] {
+    padding: 0;
+  }
+
+  :is(input.ui-input, .ui-input > input)[type="color"] {
+    &::-webkit-color-swatch-wrapper {
+      padding: 0;
+    }
+
+    &::-webkit-color-swatch {
+      border: 0;
+      border-radius: var(--radius-sm);
+    }
+
+    &::-moz-color-swatch {
+      border: 0;
+      border-radius: var(--radius-sm);
+    }
+  }
+
+  .ui-input:is([type="color"], :has(> input[type="color"])):is(
+      :disabled,
+      [aria-disabled="true"],
+      :has(> input:is(:disabled, [aria-disabled="true"]))
+    ) {
+    --ui-display-color: var(--color-disabled);
+    opacity: 0.6;
+  }
+
+  .ui-input:is(
+      :disabled,
+      [aria-disabled="true"],
+      :has(> input:is(:disabled, [aria-disabled="true"]))
+    ),
+  .ui-input > input:is(:disabled, [aria-disabled="true"]) {
+    cursor: not-allowed;
+  }
+
+  .ui-input[type="image"] {
+    inline-size: auto;
+    max-inline-size: 100%;
+    min-block-size: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+  }
+
+  .ui-input[type="hidden"] {
+    display: none;
+  }
+
+  // 列表选择器使用原生列表布局，不应用单选下拉框的 base-select 外观。
+  select.ui-input:is([multiple], [size]) {
+    appearance: auto;
+    display: block;
+    padding-block: 0.25rem;
+  }
+}

package/src/styles/input/options.scss

@@ -0,0 +1,99 @@
+@layer components.ui {
+  %ui-option {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    box-sizing: border-box;
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0.375rem 0.5rem;
+    border: 0;
+    border-radius: max(0px, calc(var(--ui-radius, var(--radius)) - 0.125rem));
+    outline: 0 solid transparent;
+    outline-offset: -2px;
+    background: transparent;
+    color: var(--color-foreground);
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: 400;
+    line-height: 1.5;
+    text-align: start;
+    text-decoration: none;
+    white-space: normal;
+    overflow-wrap: anywhere;
+    cursor: pointer;
+
+    &:is(:hover, :focus-visible, [data-highlighted="true"]):not(:disabled, [aria-disabled="true"]) {
+      background: var(--color-background-hover, var(--color-input-fill));
+    }
+
+    &:is(:checked, [aria-selected="true"], [aria-checked="true"]) {
+      background: var(--color-input-fill);
+    }
+
+    &:focus-visible {
+      outline-width: 2px;
+      outline-color: var(--ui-color, var(--color-primary));
+    }
+  }
+
+  %ui-option-disabled {
+    background: transparent;
+    color: var(--color-disabled);
+    cursor: not-allowed;
+  }
+
+  %ui-optgroup {
+    display: block;
+    box-sizing: border-box;
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0.25rem 0;
+    border: 0;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: 600;
+    line-height: 1.5;
+
+    &:is(:disabled, [aria-disabled="true"]) {
+      color: var(--color-disabled);
+    }
+  }
+
+  %ui-optgroup-legend {
+    display: block;
+    box-sizing: border-box;
+    inline-size: 100%;
+    margin: 0;
+    padding: 0.25rem 0.5rem;
+    font-family: inherit;
+    font-size: inherit;
+    font-weight: 600;
+    line-height: 1.5;
+    overflow-wrap: anywhere;
+  }
+
+  .ui-option,
+  select.ui-input option {
+    @extend %ui-option;
+
+    &:is(:disabled, [aria-disabled="true"]) {
+      @extend %ui-option-disabled;
+    }
+  }
+
+  .ui-optgroup,
+  select.ui-input optgroup {
+    @extend %ui-optgroup;
+  }
+
+  .ui-optgroup-legend,
+  select.ui-input legend {
+    @extend %ui-optgroup-legend;
+  }
+
+  .ui-optgroup:is(:disabled, [aria-disabled="true"]) .ui-option,
+  select.ui-input optgroup:is(:disabled, [aria-disabled="true"]) option {
+    @extend %ui-option-disabled;
+  }
+}

package/src/styles/input/slider.scss

@@ -0,0 +1,218 @@
+%slider-track {
+  block-size: 0.375rem;
+  border-radius: 9999px;
+  background: var(--color-input-fill);
+}
+
+// 跨引擎原生伪元素必须保留独立选择器，避免 @extend 将它们合并后失效。
+@mixin slider-native-track {
+  block-size: 0.375rem;
+  border-radius: 9999px;
+  background: linear-gradient(
+    var(--ui-slider-direction),
+    var(--ui-slider-color) 0 var(--ui-slider-progress),
+    var(--color-input-fill) var(--ui-slider-progress) 100%
+  );
+}
+
+@mixin slider-thumb {
+  box-sizing: border-box;
+  inline-size: var(--ui-thumb-width, 1rem);
+  block-size: var(--ui-thumb-width, 1rem);
+  padding: 0;
+  border: 1px solid var(--color-border);
+  border-radius: 50%;
+  outline: 0 solid transparent;
+  outline-offset: 0;
+  background: var(--color-background);
+  transition:
+    outline var(--transition),
+    border var(--transition);
+}
+
+%slider-thumb {
+  @include slider-thumb;
+}
+
+@mixin slider-thumb-focus {
+  border-color: var(--ui-slider-color);
+  outline-width: 4px;
+  outline-color: oklch(from var(--ui-slider-color) l c h / 20%);
+}
+
+%slider-thumb-focus {
+  @include slider-thumb-focus;
+}
+
+@layer components.ui {
+  .ui-slider {
+    --ui-color: var(--color-primary);
+    --ui-slider-color: var(--ui-color);
+    --ui-slider-progress: clamp(0%, var(--ui-slider-position, 0%), 100%);
+
+    position: relative;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-inline-size: var(--ui-thumb-width, 1rem);
+    block-size: max(var(--height-input, 2rem), var(--ui-thumb-width, 1rem));
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    user-select: none;
+
+    &:is(:disabled, [aria-disabled="true"], :has(> input:is(:disabled, [aria-disabled="true"]))) {
+      --ui-slider-color: var(--color-disabled);
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+
+  .ui-slider > .ui-slider-track {
+    @extend %slider-track;
+    position: relative;
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    // margin-inline: calc(var(--ui-thumb-width, 1rem) / 2);
+    overflow: hidden;
+    pointer-events: none;
+  }
+
+  .ui-slider-range {
+    inline-size: var(--ui-slider-progress);
+    block-size: 100%;
+    border-radius: inherit;
+    background: var(--ui-slider-color);
+  }
+
+  .ui-slider-thumb {
+    @extend %slider-thumb;
+    position: absolute;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inset-block-start: 50%;
+    inset-inline-start: var(--ui-slider-progress);
+    transform: translateX(calc(-1 * var(--ui-slider-progress))) translateY(-50%);
+    pointer-events: auto;
+  }
+
+  // 原生 range 位于 thumb 上方，将其悬停反馈映射到可见 thumb，并保留拖动能力。
+  .ui-slider:not([aria-disabled="true"], :has(> input:is(:disabled, [aria-disabled="true"]))) {
+    > .ui-slider-thumb:hover,
+    &:has(> input[type="range"]:hover) > .ui-slider-thumb {
+      border-color: var(--ui-slider-color);
+    }
+  }
+
+  // 位移百分比相对于 thumb 自身，保证不同宽度下两端都留在容器内。
+  .ui-slider:dir(rtl) > .ui-slider-thumb {
+    transform: translateX(var(--ui-slider-progress)) translateY(-50%);
+  }
+
+  .ui-slider:focus-visible > .ui-slider-thumb,
+  .ui-slider:has(> input:focus-visible) > .ui-slider-thumb {
+    @extend %slider-thumb-focus;
+  }
+
+  // 透明覆盖层保留原生 range 的拖动、键盘、表单提交及 disabled 行为。
+  .ui-slider > input[type="range"] {
+    position: absolute;
+    z-index: 1;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    min-block-size: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    opacity: 0;
+    cursor: inherit;
+  }
+
+  // 隐藏的原生 thumb 与可见 thumb 使用相同宽度，使指针和值的位置一致。
+  .ui-slider > input[type="range"]::-webkit-slider-runnable-track {
+    block-size: 0.375rem;
+  }
+
+  .ui-slider > input[type="range"]::-webkit-slider-thumb {
+    appearance: none;
+    inline-size: var(--ui-thumb-width, 1rem);
+    block-size: var(--ui-thumb-width, 1rem);
+    margin-block-start: calc((0.375rem - var(--ui-thumb-width, 1rem)) / 2);
+  }
+
+  .ui-slider > input[type="range"]::-moz-range-thumb {
+    inline-size: var(--ui-thumb-width, 1rem);
+    block-size: var(--ui-thumb-width, 1rem);
+    border: 0;
+  }
+
+  .ui-slider > input:not([type="range"]) {
+    display: none;
+  }
+
+  // 原生 range 同样使用 .ui-slider；与组合式滑块共用位置、thumb 尺寸和颜色变量。
+  input.ui-slider[type="range"] {
+    --ui-slider-direction: to right;
+    display: block;
+    appearance: none;
+    outline: none;
+
+    &:dir(rtl) {
+      --ui-slider-direction: to left;
+    }
+
+    // 各引擎的伪元素分别声明，避免不支持的选择器使整条规则失效。
+    &::-webkit-slider-runnable-track {
+      @include slider-native-track;
+    }
+
+    &::-moz-range-track {
+      @include slider-native-track;
+    }
+
+    &::-webkit-slider-thumb {
+      @include slider-thumb;
+    }
+
+    &::-moz-range-thumb {
+      @include slider-thumb;
+    }
+
+    &::-webkit-slider-thumb {
+      appearance: none;
+      margin-block-start: calc((0.375rem - var(--ui-thumb-width, 1rem)) / 2);
+    }
+
+    &:hover:not(:disabled, [aria-disabled="true"])::-webkit-slider-thumb {
+      border-color: var(--ui-slider-color);
+    }
+
+    &:hover:not(:disabled, [aria-disabled="true"])::-moz-range-thumb {
+      border-color: var(--ui-slider-color);
+    }
+
+    &:focus-visible::-webkit-slider-thumb {
+      @include slider-thumb-focus;
+    }
+
+    &:focus-visible::-moz-range-thumb {
+      @include slider-thumb-focus;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-slider > .ui-slider-thumb {
+      transition: none;
+    }
+    input.ui-slider[type="range"]::-webkit-slider-thumb {
+      transition: none;
+    }
+    input.ui-slider[type="range"]::-moz-range-thumb {
+      transition: none;
+    }
+  }
+}

package/src/styles/input/switch.scss

@@ -0,0 +1,111 @@
+@layer components.ui {
+  .ui-switch {
+    --ui-color: var(--color-primary);
+    --ui-switch-width: 2.25rem;
+    --ui-switch-height: 1.25rem;
+    --ui-switch-padding: 2px;
+    --ui-switch-border: 1px;
+    --ui-switch-thumb-size: calc(
+      var(--ui-switch-height) - 2 * var(--ui-switch-border) - 2 * var(--ui-switch-padding)
+    );
+    --ui-switch-thumb-start: var(--ui-switch-padding);
+
+    position: relative;
+    display: inline-block;
+    box-sizing: border-box;
+    flex: 0 0 auto;
+    inline-size: var(--ui-switch-width);
+    block-size: var(--ui-switch-height);
+    margin: 0;
+    padding: var(--ui-switch-padding);
+    appearance: none;
+    vertical-align: middle;
+    border: var(--ui-switch-border) solid var(--color-border);
+    border-radius: 9999px;
+    outline: 0 solid transparent;
+    outline-offset: 0;
+    background: var(--color-border);
+    color: var(--color-foreground);
+    font: inherit;
+    cursor: pointer;
+    user-select: none;
+    transition:
+      background-color var(--transition),
+      border-color var(--transition),
+      box-shadow var(--transition),
+      outline var(--transition);
+
+    // 没有 input 时使用元素自身的状态；有 input 时以原生 checked 状态为准。
+    &:is(:checked, [aria-checked="true"], [aria-pressed="true"]):not(:has(input)),
+    &:has(input:checked) {
+      --ui-switch-thumb-start: calc(100% - var(--ui-switch-thumb-size) - var(--ui-switch-padding));
+      border-color: var(--ui-color);
+      background: var(--ui-color);
+    }
+
+    &:focus-visible,
+    &:has(input:focus-visible) {
+      outline-width: 4px;
+      border-color: var(--ui-color);
+      outline-color: oklch(from var(--ui-color) l c h / 20%);
+    }
+
+    &:is(:disabled, [aria-disabled="true"], :has(input:is(:disabled, [aria-disabled="true"]))) {
+      --ui-color: var(--color-disabled);
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+  }
+
+  // 显式 thumb 与自动生成的 thumb 共用尺寸、位置和动画规则。
+  .ui-switch .ui-switch-thumb,
+  .ui-switch:not(:has(.ui-switch-thumb))::after {
+    position: absolute;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    inset-block-start: 50%;
+    inset-inline-start: var(--ui-switch-thumb-start);
+    inline-size: var(--ui-switch-thumb-size);
+    block-size: var(--ui-switch-thumb-size);
+    border: 0;
+    border-radius: 9999px;
+    background: var(--color-white, white);
+    // box-shadow: 0 1px 2px rgb(0 0 0 / 15%);
+    pointer-events: none;
+    transform: translateY(-50%);
+    transition: inset-inline-start var(--transition);
+  }
+
+  .ui-switch:not(:has(.ui-switch-thumb))::after {
+    content: "";
+  }
+
+  // 中间包裹元素不作为定位参照，嵌套 input 和 thumb 均以开关自身定位。
+  .ui-switch :has(:is(input, .ui-switch-thumb)):not(.ui-switch-thumb) {
+    position: static;
+  }
+
+  // 视觉隐藏但保留原生输入的点击区域、键盘聚焦、disabled 和表单行为。
+  .ui-switch input {
+    position: absolute;
+    z-index: 1;
+    inset: 0;
+    box-sizing: border-box;
+    inline-size: 100%;
+    block-size: 100%;
+    margin: 0;
+    padding: 0;
+    opacity: 0;
+    cursor: inherit;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-switch,
+    .ui-switch .ui-switch-thumb,
+    .ui-switch::after {
+      transition: none;
+    }
+  }
+}