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

package/src/styles/display/tooltip.scss

@@ -0,0 +1,161 @@
+@layer components.ui {
+  // tooltip 显示样式
+  %ui-tooltip {
+    z-index: var(--ui-tooltip-z-index, 1100);
+    box-sizing: border-box;
+    inline-size: max-content;
+    max-inline-size: min(var(--ui-tooltip-max-width, 20rem), calc(100vw - 2rem));
+    margin: 0;
+    padding: 0.375rem 0.5rem;
+    border: 0;
+    border-radius: var(--radius-sm);
+    background: var(--color-foreground);
+    color: var(--color-background);
+    box-shadow: var(--shadow-sm);
+    font-family: var(--font-family, inherit);
+    font-size: 0.75rem;
+    font-weight: 400;
+    line-height: 1.5;
+    letter-spacing: normal;
+    text-align: start;
+    text-decoration: none;
+    text-transform: none;
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+
+  // Portal / 浮层定位库可以直接设置 top、left 或 transform。
+  .ui-tooltip {
+    @extend %ui-tooltip;
+    position: fixed;
+    display: block;
+    opacity: 1;
+    visibility: visible;
+    transition:
+      opacity var(--transition),
+      visibility var(--transition),
+      display var(--transition);
+    transition-behavior: allow-discrete;
+
+    &[hidden] {
+      display: none;
+      opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+    }
+  }
+
+  @starting-style {
+    .ui-tooltip {
+      opacity: 0;
+    }
+  }
+
+  .ui-tooltip-wrapper {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    inline-size: fit-content;
+    vertical-align: middle;
+
+    &::before,
+    &::after {
+      position: absolute;
+      opacity: 0;
+      visibility: hidden;
+      pointer-events: none;
+      transition:
+        opacity var(--transition),
+        visibility var(--transition);
+    }
+
+    &::after {
+      @extend %ui-tooltip;
+      content: attr(data-tooltip);
+      bottom: calc(100% + var(--ui-tooltip-offset, 0.5rem));
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    // 透明区域连接目标和提示，鼠标跨过间隙时仍可保持显示。
+    &::before {
+      content: "";
+      z-index: var(--ui-tooltip-z-index, 1100);
+      bottom: 100%;
+      left: 0;
+      inline-size: 100%;
+      block-size: var(--ui-tooltip-offset, 0.5rem);
+    }
+
+    &[data-side="bottom"] {
+      &::after {
+        top: calc(100% + var(--ui-tooltip-offset, 0.5rem));
+        bottom: auto;
+      }
+      &::before {
+        top: 100%;
+        bottom: auto;
+      }
+    }
+
+    &:is([data-side="left"], [data-side="right"]) {
+      &::after {
+        top: 50%;
+        bottom: auto;
+        transform: translateY(-50%);
+      }
+      &::before {
+        top: 0;
+        bottom: auto;
+        inline-size: var(--ui-tooltip-offset, 0.5rem);
+        block-size: 100%;
+      }
+    }
+
+    &[data-side="left"] {
+      &::after {
+        right: calc(100% + var(--ui-tooltip-offset, 0.5rem));
+        left: auto;
+      }
+      &::before {
+        right: 100%;
+        left: auto;
+      }
+    }
+
+    &[data-side="right"] {
+      &::after {
+        left: calc(100% + var(--ui-tooltip-offset, 0.5rem));
+      }
+      &::before {
+        left: 100%;
+      }
+    }
+
+    &:not([data-state="closed"]):is(:hover, :focus-within, [data-state="open"]) {
+      &::before,
+      &::after {
+        opacity: 1;
+        visibility: visible;
+        pointer-events: auto;
+      }
+    }
+
+    &:not([data-tooltip]),
+    &[data-tooltip=""] {
+      &::before,
+      &::after {
+        content: none;
+      }
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-tooltip,
+    .ui-tooltip-wrapper::before,
+    .ui-tooltip-wrapper::after {
+      transition: none;
+    }
+  }
+}

package/src/styles/form/field.scss

@@ -0,0 +1,74 @@
+@layer components.ui {
+  // 只组织字段结构，不限定控件类型，也不覆盖控件本身的尺寸和交互。
+  .ui-field {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.375rem;
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-inline-size: 0;
+    margin: 0;
+    font-family: inherit;
+    font-size: var(--font-size-input, 0.875rem);
+    color: var(--color-foreground);
+  }
+
+  .ui-field[data-orientation="horizontal"] {
+    flex-direction: row;
+    gap: 0.5rem;
+
+    > :is(.ui-checkbox, .ui-radio, .ui-switch, input[type="checkbox"], input[type="radio"]) {
+      flex-shrink: 0;
+    }
+
+    > :is(.ui-checkbox, .ui-radio, .ui-switch) {
+      margin-block-start: max(
+        0px,
+        calc((var(--font-size-input, 0.875rem) * 1.5 - var(--ui-switch-height, 1.25rem)) / 2)
+      );
+    }
+
+    > .ui-field-content {
+      flex: 1 1 auto;
+    }
+  }
+
+  .ui-field-content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.25rem;
+    box-sizing: border-box;
+    min-inline-size: 0;
+  }
+
+  :is(.ui-field, .ui-field > .ui-field-content) > .ui-field-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    max-inline-size: 100%;
+    margin: 0;
+    font-family: inherit;
+    font-size: var(--font-size-input, 0.875rem);
+    font-weight: 500;
+    line-height: 1.5;
+    color: inherit;
+    overflow-wrap: anywhere;
+  }
+
+  :is(.ui-field, .ui-field > .ui-field-content) > .ui-field-description {
+    align-self: stretch;
+    min-inline-size: 0;
+    margin: 0;
+    font-family: inherit;
+    font-size: 0.75rem;
+    line-height: 1.5;
+    color: var(--color-disabled);
+    overflow-wrap: anywhere;
+
+    &:empty {
+      display: none;
+    }
+  }
+}

package/src/styles/form/form.scss

@@ -0,0 +1,131 @@
+@layer components.ui {
+  :where(.ui-form, .ui-fieldset, .ui-legend, .ui-progress, .ui-meter) {
+    box-sizing: border-box;
+    font-family: inherit;
+    font-size: 0.875rem;
+    color: var(--color-foreground);
+  }
+
+  .ui-form {
+    display: grid;
+    gap: 1rem;
+    min-inline-size: 0;
+    margin: 0;
+    text-align: start;
+  }
+
+  .ui-fieldset {
+    min-inline-size: 0;
+    margin: 0;
+    padding: 1rem;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius);
+
+    &:disabled {
+      background: color-mix(in oklch, var(--color-foreground) 2%, var(--color-background));
+    }
+
+    &:disabled :is(.ui-label, .ui-legend) {
+      color: var(--color-disabled);
+    }
+  }
+
+  .ui-legend {
+    padding-inline: 0.375rem;
+    font-weight: 600;
+    line-height: 1.5;
+  }
+
+  .ui-datalist {
+    display: none;
+  }
+
+  .ui-progress,
+  .ui-meter {
+    --ui-color: var(--color-primary);
+    appearance: none;
+    display: block;
+    inline-size: 100%;
+    block-size: 0.5rem;
+    overflow: hidden;
+    border: 0;
+    border-radius: var(--radius);
+    background: var(--color-input-fill);
+    accent-color: var(--ui-color);
+  }
+
+  .ui-progress::-webkit-progress-bar {
+    border-radius: inherit;
+    background: var(--color-input-fill);
+  }
+
+  .ui-progress::-webkit-progress-value {
+    border-radius: inherit;
+    background: var(--ui-color);
+  }
+
+  .ui-progress::-moz-progress-bar {
+    border-radius: inherit;
+    background: var(--ui-color);
+  }
+
+  .ui-progress:indeterminate::-webkit-progress-bar {
+    background: var(--ui-color);
+    clip-path: inset(0 32.5% round var(--radius));
+    animation: ui-progress-indeterminate 1.4s linear infinite;
+  }
+
+  .ui-meter {
+    --ui-color: var(--color-success);
+  }
+
+  .ui-meter::-webkit-meter-bar {
+    block-size: 0.5rem;
+    border: 0;
+    border-radius: inherit;
+    background: var(--color-input-fill);
+    box-shadow: none;
+  }
+
+  .ui-meter::-webkit-meter-optimum-value {
+    border-radius: inherit;
+    background: var(--ui-color);
+  }
+
+  .ui-meter::-webkit-meter-suboptimum-value {
+    border-radius: inherit;
+    background: var(--color-warning);
+  }
+
+  .ui-meter::-webkit-meter-even-less-good-value {
+    border-radius: inherit;
+    background: var(--color-error);
+  }
+
+  .ui-meter:-moz-meter-optimum::-moz-meter-bar {
+    background: var(--ui-color);
+  }
+
+  .ui-meter:-moz-meter-sub-optimum::-moz-meter-bar {
+    background: var(--color-warning);
+  }
+
+  .ui-meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+    background: var(--color-error);
+  }
+
+  @keyframes ui-progress-indeterminate {
+    from {
+      clip-path: inset(0 100% 0 -35% round var(--radius));
+    }
+    to {
+      clip-path: inset(0 -35% 0 100% round var(--radius));
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .ui-progress:indeterminate::-webkit-progress-bar {
+      animation: none;
+    }
+  }
+}

package/src/styles/form/index.scss

@@ -0,0 +1,2 @@
+@use "./form.scss";
+@use "./field.scss";

package/src/styles/group/group.scss

@@ -0,0 +1,15 @@
+@layer components.ui {
+  .ui-group {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 1rem;
+    box-sizing: border-box;
+    min-inline-size: 0;
+
+    &[data-orientation="vertical"] {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  }
+}

package/src/styles/group/index.scss

@@ -0,0 +1,2 @@
+@use "./group.scss";
+@use "./join.scss";

package/src/styles/group/join.scss

@@ -0,0 +1,64 @@
+@layer components.ui {
+  .ui-join {
+    display: inline-flex;
+    align-items: stretch;
+    gap: 0;
+    box-sizing: border-box;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    vertical-align: middle;
+    isolation: isolate;
+
+    // 混合输入框时填满可用宽度，按钮保留内容宽度，输入区域占据剩余空间。
+    &:has(> .ui-input:not([type="hidden"])) {
+      inline-size: 100%;
+    }
+
+    > :is(.ui-button, .ui-input):not([type="hidden"]) {
+      position: relative;
+      z-index: 0;
+      flex: 0 0 auto;
+      min-inline-size: 0;
+
+      // 只计算实际控件，避免隐藏字段影响首尾圆角和边框拼接。
+      &:not(:nth-child(1 of :is(.ui-button, .ui-input):not([type="hidden"]))) {
+        margin-inline-start: -1px;
+        border-start-start-radius: 0;
+        border-end-start-radius: 0;
+      }
+
+      &:not(:nth-last-child(1 of :is(.ui-button, .ui-input):not([type="hidden"]))) {
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
+      }
+
+      &:is(
+          :hover,
+          :invalid,
+          [aria-invalid="true"],
+          [data-warning],
+          :has(> input:is(:invalid, [aria-invalid="true"], [data-warning]))
+        ) {
+        z-index: 1;
+      }
+
+      &:is(:focus-visible, :focus-within) {
+        z-index: 2;
+      }
+    }
+
+    > .ui-input:not([type="hidden"]):is(
+        :not([data-width]),
+        [data-width="default"],
+        [data-width=""]
+      ) {
+      flex: 1 1 0%;
+      inline-size: 0;
+    }
+
+    // 保持拼接边框稳定，按下按钮时不做单独的纵向位移。
+    > .ui-button:active {
+      transform: none;
+    }
+  }
+}

package/src/styles/index.scss

@@ -0,0 +1,6 @@
+@use "./variables";
+@use "./input";
+@use "./display";
+@use "./container";
+@use "./form";
+@use "./group";

package/src/styles/input/base.scss

@@ -0,0 +1,99 @@
+@layer components.ui {
+  // 表单元素基础设置
+  :where(
+      .ui-button,
+      .ui-addon-button,
+      .ui-checkbox,
+      .ui-radio,
+      .ui-switch,
+      .ui-slider,
+      .ui-tabs-list,
+      .ui-tab,
+      .ui-input,
+      .ui-label
+    ) {
+    &,
+    & * {
+      box-sizing: border-box;
+      font-family: inherit;
+      appearance: none;
+      position: relative;
+      margin: 0;
+    }
+  }
+
+  // 共用 --ui-radius，让原生元素及其选择器弹层沿用同一圆角设置。
+  :is(.ui-input, .ui-button)[data-radius] {
+    --ui-radius: attr(data-radius type(*), var(--radius));
+
+    &:is([data-radius="default"], [data-radius=""]) {
+      --ui-radius: var(--radius);
+    }
+
+    &[data-radius="rounded"] {
+      --ui-radius: 9999px;
+    }
+  }
+
+  // 默认值保留各控件原有宽度；显式尺寸优先于原生输入类型的专用宽度。
+  :is(.ui-input, .ui-button, .ui-addon-button)[data-width]:not(
+      [data-width="default"],
+      [data-width=""],
+      [type="hidden"]
+    ) {
+    inline-size: attr(data-width type(*));
+
+    &[data-width="block"] {
+      display: var(--ui-block-display, flex);
+      inline-size: 100%;
+    }
+
+    &[data-width="icon"] {
+      inline-size: var(--ui-height);
+      block-size: var(--ui-height);
+      min-block-size: var(--ui-height);
+      padding: 0;
+      flex-shrink: 0;
+      text-align: center;
+    }
+  }
+
+  :is(
+      .ui-button,
+      .ui-addon-button,
+      .ui-input,
+      .ui-radio,
+      .ui-checkbox,
+      .ui-switch,
+      .ui-slider,
+      .ui-tabs-list,
+      .ui-tab,
+      .ui-progress,
+      .ui-meter,
+      .ui-badge,
+      .ui-pill
+    )[data-color] {
+    --ui-color: attr(data-color type(<color>));
+    &[data-color="neutral"] {
+      --ui-color: var(--color-foreground);
+    }
+    &[data-color="primary"] {
+      --ui-color: var(--color-primary);
+    }
+    &[data-color="success"] {
+      --ui-color: var(--color-success);
+    }
+    &[data-color="danger"] {
+      --ui-color: var(--color-danger);
+    }
+    &[data-color="error"] {
+      --ui-color: var(--color-error);
+    }
+    &[data-color="warning"] {
+      --ui-color: var(--color-warning);
+    }
+    &[data-color="info"] {
+      --ui-color: var(--color-info);
+    }
+  }
+}

package/src/styles/input/button.scss

@@ -0,0 +1,147 @@
+@layer components.ui {
+  %ui-ghost-button-hover {
+    background-color: oklch(from var(--ui-display-color) calc(l * 0.1 + 0.9) calc(c * 0.2) h / 20%);
+  }
+
+  // button 结构性样式
+  .ui-button,
+  .ui-addon-button {
+    align-items: center;
+    justify-content: center;
+    min-block-size: var(--ui-height);
+    padding-block: 0;
+    padding-inline: 1rem;
+    cursor: pointer;
+
+    border: 1px solid transparent;
+    background: transparent;
+    border-radius: var(--ui-radius, 0);
+
+    --ui-display-color: var(--ui-color);
+
+    transition:
+      border-color var(--transition),
+      box-shadow var(--transition),
+      background-color var(--transition),
+      transform var(--transition),
+      outline var(--transition);
+  }
+
+  // button 通用外观
+  .ui-button,
+  .ui-addon-button {
+    --ui-radius: var(--radius);
+    --ui-color: var(--color-foreground, currentColor);
+    outline: 0 solid transparent;
+    &:focus-visible {
+      outline-width: 4px;
+      border-color: var(--ui-display-color);
+      outline-color: oklch(from var(--ui-display-color) l c h / 20%);
+    }
+  }
+
+  // button 按下位移
+  .ui-button {
+    &:active:not(:disabled, [aria-disabled="true"]) {
+      transform: translateY(1px);
+    }
+  }
+
+  // button 默认外观
+  .ui-button:is([data-variant="default"], [data-variant=""], :not([data-variant])) {
+    border-color: var(--color-border);
+    background: var(--color-background);
+    color: var(--ui-display-color);
+
+    &:hover:not(:disabled, [aria-disabled="true"]) {
+      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)
+      );
+    }
+  }
+
+  // button 特殊外观
+  .ui-button[data-variant="outline"] {
+    background: transparent;
+    border-color: var(--ui-display-color);
+    color: var(--ui-display-color);
+
+    &:hover:not(:disabled, [aria-disabled="true"]) {
+      background: oklch(from var(--ui-display-color) calc(l * 0.1 + 0.9) calc(c * 0.2) h / 20%);
+    }
+  }
+
+  .ui-button[data-variant="filled"] {
+    background: var(--ui-display-color);
+    border-color: transparent;
+    color: var(--color-white, white);
+
+    &:hover:not(:disabled, [aria-disabled="true"]) {
+      background: oklch(from var(--ui-display-color) calc(l + 0.1) c h);
+    }
+    &:focus-visible {
+      border-color: var(--color-white, white);
+      outline-color: oklch(from var(--ui-display-color) l c h / 40%);
+    }
+  }
+
+  .ui-button[data-variant="light"] {
+    background: oklch(from var(--ui-display-color) calc(l * 0.05 + 0.95) calc(c * 0.1) h);
+    border-color: transparent;
+    color: var(--ui-display-color);
+
+    &:hover:not(:disabled, [aria-disabled="true"]) {
+      background: oklch(from var(--ui-display-color) calc(l * 0.05 + 0.925) calc(c * 0.15) h);
+    }
+    &:focus-visible {
+      border-color: var(--ui-display-color);
+    }
+  }
+
+  .ui-button[data-variant="ghost"],
+  .ui-addon-button {
+    background: transparent;
+    border-color: transparent;
+    color: var(--ui-display-color);
+
+    &:hover:not(:disabled, [aria-disabled="true"]) {
+      @extend %ui-ghost-button-hover;
+    }
+  }
+
+  .ui-button[data-variant="text"] {
+    background: transparent;
+    border-color: transparent;
+    color: var(--ui-display-color);
+  }
+
+  :is(.ui-button, .ui-addon-button):is(:disabled, [aria-disabled="true"]) {
+    border-color: var(--color-border);
+    background: var(--color-input-fill);
+    color: var(--color-disabled);
+    cursor: not-allowed;
+  }
+
+  // 复用 Ghost 按钮的交互，缩小高度、内边距和焦点环以适配输入框内部。
+  .ui-addon-button {
+    --ui-height: var(--ui-addon-height, max(0px, calc(var(--height-input) - 0.5rem)));
+    --ui-radius: max(0px, calc(var(--radius) - 0.125rem));
+    block-size: var(--ui-height);
+    flex: 0 0 auto;
+    gap: 0.25rem;
+    padding-inline: 0.5rem;
+    font-size: 0.8125rem;
+    white-space: nowrap;
+
+    &:focus-visible {
+      outline-width: 2px;
+    }
+
+    &:is(:disabled, [aria-disabled="true"]) {
+      border-color: transparent;
+      background: transparent;
+    }
+  }
+}