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

package/src/styles/input/checkbox.scss

@@ -0,0 +1,110 @@
+@layer components.ui {
+  // checkbox 和 radio 结构性样式
+  .ui-checkbox,
+  .ui-radio {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 1.25rem;
+    block-size: 1.25rem;
+
+    border-radius: var(--ui-radius, 0);
+    border: 1px solid var(--ui-border);
+    background: var(--ui-fill);
+
+    color: var(--color-white);
+
+    cursor: pointer;
+    transition:
+      border-color var(--transition),
+      background-color var(--transition),
+      box-shadow var(--transition);
+  }
+
+  // checkbox 和 radio 基本外观
+  .ui-checkbox,
+  .ui-radio {
+    --ui-color: var(--color-primary, grey);
+    --ui-border: var(--color-border);
+    --ui-fill: var(--color-background);
+    --ui-text: var(--color-foreground);
+    --ui-fill-checked: var(--ui-color);
+    --ui-ring: oklch(from var(--ui-color) l c h / 10%);
+  }
+
+  .ui-checkbox {
+    --ui-radius: var(--radius-sm);
+  }
+  .ui-radio {
+    --ui-radius: 1000px;
+  }
+
+  .ui-radio::before,
+  .ui-checkbox::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    margin: auto;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    transition:
+      opacity var(--transition),
+      transform var(--transition),
+      background-color var(--transition);
+    transform: scale(0.6);
+  }
+
+  .ui-radio::before {
+    width: 0.4rem;
+    height: 0.4rem;
+    border-radius: 50%;
+    background-color: currentColor;
+    color: var(--color-white);
+  }
+
+  .ui-checkbox::before {
+    width: 0.875rem;
+    height: 0.875rem;
+    background-color: currentColor;
+    // 描边绘制两段勾线，避免未闭合的填充路径被绘制成三角形。
+    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8l3.5 3.5L13 4.5' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>")
+      center/contain no-repeat;
+    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8l3.5 3.5L13 4.5' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>")
+      center/contain no-repeat;
+  }
+
+  .ui-checkbox:is(:checked, :indeterminate)::before,
+  .ui-radio:checked::before {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  .ui-checkbox:is(:checked, :indeterminate),
+  .ui-radio:checked {
+    background: var(--ui-fill-checked);
+    border-color: var(--ui-fill-checked);
+  }
+
+  // 不确定状态独立于 checked，优先显示居中的圆端点横线。
+  .ui-checkbox:indeterminate::before {
+    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8h8' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'/></svg>")
+      center/contain no-repeat;
+    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8h8' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round'/></svg>")
+      center/contain no-repeat;
+  }
+
+  .ui-checkbox:focus-visible,
+  .ui-radio:focus-visible {
+    outline: none;
+    border-color: var(--ui-color);
+    box-shadow: 0 0 0 4px var(--ui-ring);
+  }
+
+  :is(.ui-checkbox, .ui-radio):is(:disabled, [aria-disabled="true"]) {
+    color: var(--color-disabled);
+    border-color: var(--ui-border);
+    background: color-mix(in oklch, var(--color-foreground) 2%, var(--color-background));
+    cursor: not-allowed;
+  }
+}

package/src/styles/input/index.scss

@@ -0,0 +1,11 @@
+@use "./base";
+@use "./input";
+@use "./button";
+@use "./checkbox";
+@use "./switch";
+@use "./slider";
+@use "./native";
+@use "./indicators";
+@use "./options";
+@use "./label-wrapper";
+@use "./tabs";

package/src/styles/input/indicators.scss

@@ -0,0 +1,270 @@
+@use "./button";
+
+// 沿用 Tabler 的 24px 画布、2px 描边和圆端点；不引入图标库依赖。
+@function native-icon($path, $stroke: "%23fff", $view-box: "0 0 24 24") {
+  @return url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='#{$view-box}' fill='none' stroke='#{$stroke}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='#{$path}'/%3E%3C/svg%3E");
+}
+
+@function chevron-down($stroke) {
+  @return native-icon("M6 9l6 6l6 -6", $stroke);
+}
+
+// 缩短斜线长度，不缩放描边：与 16px Tabler 图标相同的 1⅓px 描边。
+@function stepper-stroke($angle) {
+  @return linear-gradient(
+    $angle,
+    transparent calc(50% - 1rem / 24),
+    currentColor calc(50% - 1rem / 24),
+    currentColor calc(50% + 1rem / 24),
+    transparent calc(50% + 1rem / 24)
+  );
+}
+
+@layer components.ui {
+  .ui-input {
+    --ui-input-chevron-mask: #{chevron-down("%23fff")};
+    --ui-input-chevron-image: #{chevron-down("%2322222a")};
+  }
+
+  // 组合式输入框的外侧留白由根元素提供。
+  .ui-input > input[list] {
+    --ui-input-indicator-padding: 0px;
+  }
+
+  // 不支持原生图标伪元素的浏览器使用同形背景图，并为文字预留空间。
+  %ui-chevron-background {
+    padding-inline-end: calc(var(--ui-input-indicator-padding, var(--ui-padding-inline)) + 1.5rem);
+    background-image: var(--ui-input-chevron-image);
+    background-repeat: no-repeat;
+    background-size: 1rem 1rem;
+    background-position: right var(--ui-input-indicator-padding, var(--ui-padding-inline)) center;
+
+    &:dir(rtl) {
+      background-position: left var(--ui-input-indicator-padding, var(--ui-padding-inline)) center;
+    }
+
+    &:is(:disabled, [aria-disabled="true"]) {
+      --ui-input-chevron-image: #{chevron-down("%23818198")};
+    }
+  }
+
+  select.ui-input:not([multiple]):not([size]) {
+    @extend %ui-chevron-background;
+    appearance: none;
+  }
+
+  :is(input.ui-input, .ui-input > input)[list]:is(
+      :not([type]),
+      [type="text"],
+      [type="search"],
+      [type="email"],
+      [type="url"],
+      [type="tel"],
+      [type="number"]
+    ) {
+    @extend %ui-chevron-background;
+
+    &::-webkit-calendar-picker-indicator {
+      // Chromium 为 datalist 图标写入内联 list-item 和 1em 高度，需显式覆盖。
+      display: block !important;
+      flex: 0 0 auto;
+      box-sizing: content-box;
+      inline-size: 1rem;
+      block-size: 1rem !important;
+      margin: 0;
+      margin-inline-start: 0.5rem;
+      padding: 0;
+      border: 0;
+      list-style: none !important;
+      background: currentColor;
+      color: inherit;
+      mask: var(--ui-input-chevron-mask) center / contain no-repeat;
+      opacity: 1;
+      cursor: inherit;
+    }
+  }
+
+  @supports selector(input::-webkit-calendar-picker-indicator) {
+    :is(input.ui-input, .ui-input > input)[list]:is(
+        :not([type]),
+        [type="text"],
+        [type="search"],
+        [type="email"],
+        [type="url"],
+        [type="tel"],
+        [type="number"]
+      ) {
+      padding-inline-end: var(--ui-input-indicator-padding, var(--ui-padding-inline));
+      background-image: none;
+
+      // 禁用时浏览器不生成 datalist 图标，使用相同的背景图保留外观。
+      &:disabled {
+        padding-inline-end: calc(
+          var(--ui-input-indicator-padding, var(--ui-padding-inline)) + 1.5rem
+        );
+        background-image: var(--ui-input-chevron-image);
+      }
+    }
+  }
+
+  @supports (appearance: base-select) {
+    select.ui-input:not([multiple]):not([size]) {
+      appearance: base-select;
+      column-gap: 0.5rem;
+      padding-inline-end: var(--ui-padding-inline);
+      background-image: none;
+    }
+
+    // 与 WebKit 伪元素分别声明，避免不支持的选择器使另一条规则失效。
+    select.ui-input:not([multiple]):not([size])::picker-icon {
+      content: "";
+      display: block;
+      flex: 0 0 auto;
+      box-sizing: content-box;
+      inline-size: 1rem;
+      block-size: 1rem;
+      margin: 0;
+      margin-inline-start: auto;
+      padding: 0;
+      border: 0;
+      background: currentColor;
+      color: inherit;
+      mask: var(--ui-input-chevron-mask) center / contain no-repeat;
+      opacity: 1;
+    }
+  }
+
+  // 仅修饰已存在的原生按钮，不创建额外点击层或改变其可用状态。
+  // 同组只包含 WebKit/Blink 伪元素，避免其他引擎的选择器使整组失效。
+  %ui-native-input-indicator {
+    appearance: none;
+    flex: 0 0 auto;
+    align-self: center;
+    box-sizing: content-box;
+    inline-size: 1rem;
+    block-size: 1rem;
+    margin: 0;
+    margin-inline-start: 0.5rem;
+    padding: 0;
+    border: 0;
+    color: inherit;
+    background: currentColor;
+    mask: var(--ui-input-indicator-mask) center / contain no-repeat;
+    cursor: pointer;
+
+    @media (forced-colors: active) {
+      forced-color-adjust: none;
+      background: ButtonText;
+    }
+  }
+
+  :is(input.ui-input, .ui-input > input):is(
+      [type="date"],
+      [type="datetime-local"],
+      [type="month"],
+      [type="week"],
+      [type="time"]
+    ) {
+    // 原生日期编辑区域已有内部 flex 布局，宿主使用 flex 会令其收缩到文字宽度。
+    display: inline-block;
+    --ui-block-display: block;
+  }
+
+  :is(input.ui-input, .ui-input > input):is(
+      [type="date"],
+      [type="datetime-local"],
+      [type="month"],
+      [type="week"]
+    ) {
+    --ui-input-indicator-mask: #{native-icon(
+        "M4 7a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12M16 3v4M8 3v4M4 11h16M7 14h.013M10.01 14h.005M13.01 14h.005M16.015 14h.005M13.015 17h.005M7.01 17h.005M10.01 17h.005"
+      )};
+  }
+
+  :is(input.ui-input, .ui-input > input)[type="time"] {
+    --ui-input-indicator-mask: #{native-icon("M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0M12 7v5l3 3")};
+  }
+
+  :is(input.ui-input, .ui-input > input):is(
+      [type="date"],
+      [type="datetime-local"],
+      [type="month"],
+      [type="week"],
+      [type="time"]
+    )::-webkit-calendar-picker-indicator {
+    @extend %ui-native-input-indicator;
+    opacity: 1;
+  }
+
+  :is(input.ui-input, .ui-input > input)[type="number"] {
+    &::-webkit-inner-spin-button {
+      // 一组等于一个 icon 型 addon-button；上下半区由浏览器原生处理。
+      appearance: none;
+      flex: 0 0 auto;
+      align-self: center;
+      box-sizing: border-box;
+      inline-size: var(--ui-addon-height);
+      block-size: var(--ui-addon-height);
+      margin: 0;
+      margin-inline-start: 0.5rem;
+      padding: 0;
+      border: 1px solid transparent;
+      border-radius: max(0px, calc(var(--radius) - 0.125rem));
+      color: inherit;
+      --ui-display-color: var(--color-foreground, currentColor);
+      cursor: pointer;
+      background-color: transparent;
+      // 四条等粗斜线绘制小 Chevron，底色不受图标 mask 裁切。
+      background-image: stepper-stroke(135deg), stepper-stroke(45deg), stepper-stroke(45deg),
+        stepper-stroke(135deg);
+      background-repeat: no-repeat;
+      background-origin: border-box;
+      background-size: 0.1875rem 0.1875rem;
+      background-position:
+        calc(50% - 0.09375rem) calc(25% - 0.046875rem),
+        calc(50% + 0.09375rem) calc(25% - 0.046875rem),
+        calc(50% - 0.09375rem) calc(75% + 0.046875rem),
+        calc(50% + 0.09375rem) calc(75% + 0.046875rem);
+      transition: background-color var(--transition);
+
+      &:hover {
+        @extend %ui-ghost-button-hover;
+      }
+
+      @media (forced-colors: active) {
+        forced-color-adjust: none;
+        color: ButtonText;
+      }
+    }
+  }
+
+  :is(input.ui-input, .ui-input > input)[type="search"] {
+    --ui-input-indicator-mask: #{native-icon("M18 6l-12 12M6 6l12 12")};
+
+    &::-webkit-search-cancel-button {
+      @extend %ui-native-input-indicator;
+    }
+  }
+
+  // 保留 Edge 原生眼睛及其状态切换：::-ms-reveal 没有对应的状态选择器。
+  :is(input.ui-input, .ui-input > input)[type="password"]::-ms-reveal {
+    box-sizing: border-box;
+    inline-size: 1rem;
+    block-size: 1rem;
+    margin: 0;
+    margin-inline-start: 0.5rem;
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius-sm);
+    color: inherit;
+    background-color: transparent;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    cursor: pointer;
+  }
+
+  :is(input.ui-input, .ui-input > input)[type="password"]::-ms-reveal:hover {
+    background-color: color-mix(in oklch, currentColor 10%, transparent);
+  }
+}

package/src/styles/input/input.scss

@@ -0,0 +1,203 @@
+@layer components.ui {
+  // input + button 结构性样式
+  .ui-input,
+  .ui-button,
+  .ui-addon-button {
+    display: inline-flex;
+    font-size: var(--font-size-input, 0.875rem);
+    min-block-size: var(--ui-height);
+    --ui-height: var(--height-input);
+  }
+
+  // label 结构性样式
+  .ui-label {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+
+  // input 结构性样式
+  .ui-input {
+    --ui-padding-inline: 0.625rem;
+    --ui-addon-height: max(0px, calc(var(--ui-height) - 0.5rem));
+    align-items: center;
+    inline-size: 100%;
+    min-inline-size: 0;
+    padding-inline: var(--ui-padding-inline);
+    padding-block: 0;
+
+    border: 1px solid var(--color-border, transparent);
+    border-radius: var(--ui-radius, 0);
+
+    --ui-display-color: var(--ui-color);
+
+    outline: 0 solid transparent;
+
+    transition:
+      border-color var(--transition),
+      box-shadow var(--transition),
+      background-color var(--transition),
+      outline var(--transition);
+
+    &:is(:focus-visible, select:open, select:focus),
+    &:has(> input:focus-visible),
+    &:has(> .ui-pill .ui-pill-button:focus-visible) {
+      outline-width: 4px;
+      border-color: var(--ui-display-color);
+      outline-color: oklch(from var(--ui-display-color) l c h / 20%);
+    }
+  }
+
+  .ui-input > input:not([type="hidden"]) {
+    flex: 1 1 0%;
+    align-self: stretch;
+    inline-size: 0;
+    min-inline-size: 0;
+    min-block-size: 0;
+    padding-block: 0;
+    // padding-inline: var(--ui-padding-inline);
+    border: 0;
+    border-radius: inherit;
+    outline: none;
+    background: transparent;
+    box-shadow: none;
+    color: inherit;
+    font: inherit;
+    text-align: inherit;
+    cursor: inherit;
+  }
+
+  .ui-input[data-width="icon"] {
+    --ui-padding-inline: 0;
+  }
+
+  // 前后修饰组按 DOM 顺序排列，输入区域收缩时修饰内容保持原有尺寸。
+  .ui-input:has(> .ui-addon) {
+    column-gap: 0.5rem;
+  }
+
+  .ui-input > .ui-addon {
+    display: inline-flex;
+    align-items: center;
+    flex: 0 0 auto;
+    gap: 0.25rem;
+    white-space: nowrap;
+    cursor: default;
+  }
+
+  .ui-input:is([aria-disabled="true"], :has(> input:disabled)) > .ui-addon {
+    cursor: not-allowed;
+  }
+
+  // 多值输入保留直接嵌套关系，值标签和编辑区域可自然换行。
+  .ui-input:has(> .ui-pill) {
+    flex-wrap: wrap;
+    gap: 0.25rem;
+    padding-block: 0.125rem;
+
+    > input:not([type="hidden"]) {
+      flex: 1 1 4rem;
+      align-self: center;
+      min-inline-size: min(4rem, 100%);
+      block-size: 1.25rem;
+    }
+
+    > .ui-addon:last-child {
+      margin-inline-start: auto;
+    }
+  }
+
+  // textarea 结构性样式
+  textarea.ui-input {
+    // 多行编辑区域保留原有布局，不应用单行控件的垂直居中。
+    // align-items: normal;
+    padding-block: 0.5rem;
+    min-block-size: calc(var(--ui-height) + 0.5rem);
+    resize: vertical;
+  }
+
+  // select 结构性样式
+  @supports (appearance: base-select) {
+    select.ui-input:not([multiple]):not([size]) {
+      appearance: base-select;
+      align-items: center;
+    }
+    select.ui-input::picker(select) {
+      appearance: base-select;
+      border-radius: var(--ui-radius);
+      border-color: var(--color-border);
+      box-shadow: var(--shadow-sm);
+      padding: 0.25rem;
+    }
+  }
+
+  // input 基本外观
+  .ui-input {
+    --ui-color: var(--color-primary, grey);
+    --ui-radius: var(--radius);
+    background: var(--color-background, transparent);
+    color: var(--color-foreground, currentColor);
+  }
+  .ui-input:is(
+      :disabled,
+      [aria-disabled="true"],
+      :has(> input:is(:disabled, [aria-disabled="true"]))
+    ) {
+    color: var(--color-disabled);
+    background: color-mix(in oklch, var(--color-foreground) 2%, var(--color-background));
+    cursor: not-allowed;
+  }
+  .ui-input:is(
+      :invalid,
+      [aria-invalid="true"],
+      [data-warning],
+      :has(> input:is(:invalid, [aria-invalid="true"], [data-warning]))
+    ) {
+    border-color: var(--ui-display-color);
+  }
+  .ui-input:is([data-warning], :has(> input[data-warning])) {
+    --ui-display-color: var(--color-warning);
+  }
+  .ui-input:is(:invalid, [aria-invalid="true"], :has(> input:is(:invalid, [aria-invalid="true"]))) {
+    --ui-display-color: var(--color-error);
+  }
+
+  .ui-input[data-variant="filled"] {
+    border-color: transparent;
+    background: var(--color-input-fill);
+
+    &:is(
+        :invalid,
+        [aria-invalid="true"],
+        [data-warning],
+        :has(> input:is(:invalid, [aria-invalid="true"], [data-warning]))
+      ) {
+      border-color: var(--ui-display-color);
+    }
+    &:is(:disabled, [aria-disabled="true"], :has(> input:is(:disabled, [aria-disabled="true"]))) {
+      background: oklch(from var(--color-input-fill) l c h / 50%);
+    }
+  }
+
+  .ui-input[data-variant="unstyled"] {
+    --ui-padding-inline: 0;
+    padding-inline: 0;
+
+    border: 0 none transparent;
+    outline: 0 none transparent;
+    background: transparent;
+
+    &:is(
+        :invalid,
+        [aria-invalid="true"],
+        [data-warning],
+        :has(> input:is(:invalid, [aria-invalid="true"], [data-warning]))
+      ) {
+      color: var(--ui-display-color);
+    }
+  }
+
+  .ui-input :where(input:not([type="hidden"]), textarea, select) {
+    display: inline-flex;
+    font-size: 0.875rem;
+  }
+}

package/src/styles/input/label-wrapper.scss

@@ -0,0 +1,37 @@
+@layer components.ui {
+  .ui-label-wrapper {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    box-sizing: border-box;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    margin: 0;
+    vertical-align: middle;
+    font-family: inherit;
+    font-size: var(--font-size-input, 0.875rem);
+    color: var(--color-foreground);
+
+    > :is(.ui-checkbox, .ui-radio, .ui-switch, input[type="checkbox"], input[type="radio"]) {
+      flex-shrink: 0;
+    }
+
+    > .ui-label {
+      min-inline-size: 0;
+      font-family: inherit;
+      font-size: inherit;
+      line-height: 1.5;
+      color: inherit;
+      overflow-wrap: anywhere;
+    }
+  }
+
+  .ui-label-wrapper:has(
+      > :not(.ui-label):is(:disabled, [aria-disabled="true"]),
+      > :not(.ui-label) > :is(input, select, textarea):is(:disabled, [aria-disabled="true"]),
+      > .ui-switch input:is(:disabled, [aria-disabled="true"])
+    )
+    > .ui-label {
+    color: var(--color-disabled);
+  }
+}