one-design-next 0.0.4-alpha.100

package/dist/slider/style/index.css

@@ -0,0 +1,210 @@
+html {
+  --odn-slider-margin-inline-start: 5px;
+  --odn-slider-margin-inline-end: 5px;
+  --odn-slider-padding-block: 4px;
+  --odn-slider-track-height: 4px;
+  --odn-slider-track-background: var(--odn-color-primary);
+  --odn-slider-rail-background: var(--odn-color-black-3);
+  --odn-slider-border-radius: 4px;
+  --odn-slider-handle-width: 12px;
+  --odn-slider-handle-height: 12px;
+  --odn-slider-handle-border-radius: 12px;
+  --odn-slider-tooltip-padding-block: 10px;
+  --odn-slider-tooltip-padding-inline: 16px;
+  --odn-slider-tooltip-font-size: 13px;
+  --odn-slider-tooltip-background-color: #393939;
+  --odn-slider-tooltip-border-radius: 6px;
+}
+
+@layer components {
+  [data-odn-slider-wrapper] {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    white-space: nowrap;
+    user-select: none;
+    --odn-input-number-width: 90px;
+  }
+  .odn-slider {
+    flex: 1;
+    list-style: none;
+    position: relative;
+    z-index: 1;
+    margin-left: var(--odn-slider-margin-inline-start);
+    margin-right: var(--odn-slider-margin-inline-end);
+    padding: var(--odn-slider-padding-block) 0;
+    height: calc(var(--odn-slider-track-height) + var(--odn-slider-padding-block) * 2);
+    cursor: pointer;
+  }
+  .odn-slider-hasMarks {
+    padding-bottom: 12px;
+  }
+  .odn-slider-rail {
+    position: absolute;
+    width: 100%;
+    height: var(--odn-slider-track-height);
+    background: var(--odn-slider-rail-background);
+    border-radius: var(--odn-slider-border-radius);
+    transition: background-color 0.25s cubic-bezier(0.32, 0.72, 0, 1);
+  }
+  .odn-slider-track {
+    position: absolute;
+    height: var(--odn-slider-track-height);
+    background: var(--odn-slider-track-background);
+    border-radius: var(--odn-slider-border-radius);
+    transition: background-color 0.25s cubic-bezier(0.32, 0.72, 0, 1);
+  }
+  [data-odn-slider-handle-wrapper] {
+    position: relative;
+  }
+  .odn-slider-handle {
+    position: absolute;
+    top: calc(50% - var(--odn-slider-handle-height) / 2);
+    cursor: pointer;
+    width: var(--odn-slider-handle-width);
+    height: var(--odn-slider-handle-height);
+    background-color: #fff;
+    border-radius: var(--odn-slider-handle-border-radius);
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
+    transition: border-color 0.25s cubic-bezier(0.32, 0.72, 0, 1), transform 0.25s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.25s cubic-bezier(0.32, 0.72, 0, 1);
+  }
+  .odn-slider-handle.odn-slider-handle-dragging {
+    box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1);
+  }
+  .odn-slider-handle:hover {
+    transform: scale(1.2);
+  }
+  .odn-slider-handle:focus {
+    outline: none;
+  }
+  .odn-slider-handle.ant-tooltip-open {
+    border-color: #1890ff;
+  }
+  .odn-slider:hover .odn-slider-rail {
+    background: var(--odn-slider-rail-background);
+  }
+  .odn-slider:hover .odn-slider-handle:not(.ant-tooltip-open) {
+    border-color: #69c0ff;
+  }
+  .odn-slider-step {
+    position: absolute;
+    width: 100%;
+    height: var(--odn-slider-track-height);
+    background: transparent;
+  }
+  .odn-slider-mark-text {
+    position: absolute;
+    top: 14px;
+    font-size: 13px;
+    line-height: 20px;
+    text-align: center;
+    color: #1f1f1f;
+    word-break: keep-all;
+    cursor: pointer;
+  }
+  .odn-slider-disabled {
+    cursor: not-allowed;
+  }
+  .odn-slider-disabled .odn-slider-mark-text,
+  .odn-slider-disabled .odn-slider-handle {
+    cursor: not-allowed;
+  }
+  [data-odn-slider-handle-tooltip] {
+    position: absolute;
+    left: 50%;
+    bottom: 22px;
+    padding: var(--odn-slider-tooltip-padding-block) var(--odn-slider-tooltip-padding-inline);
+    font-size: var(--odn-slider-tooltip-font-size);
+    color: #fff;
+    background-color: var(--odn-slider-tooltip-background-color);
+    border-radius: var(--odn-slider-tooltip-border-radius);
+    transform: translate3d(-50%, 0, 0) scale(0.8);
+    opacity: 0;
+    visibility: hidden;
+    transform-origin: 50% calc(100% + 4px);
+    transition: all 0.15s cubic-bezier(0.32, 0.72, 0, 1) 0.1s;
+  }
+  [data-odn-slider-handle-tooltip]::before {
+    content: "";
+    position: absolute;
+    bottom: -5px;
+    left: 50%;
+    margin-left: -5px;
+    width: 0;
+    height: 0;
+    border-width: 5px 5px 0;
+    border-color: rgba(0, 0, 0, 0);
+    border-top-color: var(--odn-slider-tooltip-background-color);
+    border-style: solid;
+  }
+  [data-odn-slider-handle-tooltip-visible=true] {
+    opacity: 1;
+    visibility: visible;
+    transform: translate3d(-50%, 0, 0) scale(1);
+    transition: all 0.15s cubic-bezier(0.32, 0.72, 0, 1);
+  }
+  [data-odn-slider-range-tooltip-wrapper] {
+    position: absolute;
+    inset: 0 5px;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.15s cubic-bezier(0.32, 0.72, 0, 1);
+  }
+  [data-odn-slider-range-tooltip-wrapper][data-odn-slider-range-tooltip-wrapper-visible=true] {
+    opacity: 1;
+    visibility: visible;
+  }
+  [data-odn-slider-range-tooltip-wrapper-visible][data-odn-slider-range-tooltip-wrapper-combined=true] [data-odn-slider-range-tooltip] {
+    color: transparent;
+  }
+  [data-odn-slider-range-tooltip-wrapper-visible][data-odn-slider-range-tooltip-wrapper-combined=true] [data-odn-slider-range-tooltip-left] {
+    border-radius: 6px 0 0 6px;
+  }
+  [data-odn-slider-range-tooltip-wrapper-visible][data-odn-slider-range-tooltip-wrapper-combined=true] [data-odn-slider-range-tooltip-right] {
+    border-radius: 0 6px 6px 0;
+  }
+  [data-odn-slider-range-tooltip-wrapper-visible][data-odn-slider-range-tooltip-wrapper-combined=true] [data-odn-slider-range-tooltip-combined] {
+    opacity: 1;
+    visibility: visible;
+  }
+  [data-odn-slider-handle-tooltip-wrapper-visible][data-odn-slider-handle-tooltip-wrapper-overlapped=true] [data-odn-slider-handle-tooltip-left] {
+    opacity: 0;
+    visibility: hidden;
+  }
+  [data-odn-slider-range-tooltip] {
+    position: absolute;
+    bottom: 22px;
+    padding: var(--odn-slider-tooltip-padding-block) var(--odn-slider-tooltip-padding-inline);
+    font-size: var(--odn-slider-tooltip-font-size);
+    color: #fff;
+    background-color: var(--odn-slider-tooltip-background-color);
+    border-radius: var(--odn-slider-tooltip-border-radius);
+    transform: translate3d(-50%, 0, 0);
+  }
+  [data-odn-slider-range-tooltip]::before {
+    content: "";
+    position: absolute;
+    bottom: -5px;
+    left: 50%;
+    margin-left: -5px;
+    width: 0;
+    height: 0;
+    border-width: 5px 5px 0;
+    border-color: transparent;
+    border-top-color: var(--odn-slider-tooltip-background-color);
+    border-style: solid;
+  }
+  [data-odn-slider-range-tooltip-combined] {
+    position: absolute;
+    bottom: 22px;
+    display: flex;
+    padding: var(--odn-slider-tooltip-padding-block) 0;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    opacity: 0;
+    visibility: hidden;
+    font-size: var(--odn-slider-tooltip-font-size);
+  }
+}

package/dist/slider/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';

package/dist/slider/style/index.js

@@ -0,0 +1,2 @@
+import "../../style";
+import "./index.css";

package/dist/style/base.css

@@ -0,0 +1,296 @@
+@layer theme, base, components, utilities;
+
+html {
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+
+  --odn-z-index-modal: 1040;
+  --odn-z-index-popup: 1050;
+  --odn-z-index-select: 1060;
+  --odn-z-index-message: 1070;
+
+  /* 基础 */
+  --odn-font-family:
+    -apple-system, system-ui, 'Helvetica Neue', 'PingFang SC',
+    'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', arial,
+    sans-serif;
+  --odn-border-radius: 4px;
+  --odn-icon-size: 16px;
+  --odn-font-size: 14px;
+  --odn-control-height: 36px;
+  /* stylelint-disable-next-line number-max-precision */
+  --odn-line-height: 1.57142857;
+  --odn-color-icon: var(--odn-color-black-9);
+  --odn-color-icon-hover: var(--odn-color-black-10);
+  --odn-control-padding-horizontal: 12px;
+  --odn-line-width: 1px;
+  --odn-line-type: solid;
+  --odn-motion-duration-slow: 0.25s;
+  --odn-padding-xxs: 4px;
+  --odn-padding-xs: 8px;
+
+  /* 主色 */
+  --odn-color-primary: var(--odn-color-brand-6);
+  --odn-color-primary-hover: var(--odn-color-brand-7);
+  --odn-color-primary-active: var(--odn-color-brand-8);
+  --odn-primary-color: var(--odn-color-primary);
+
+  /* 逻辑颜色 */
+  --odn-color-text: var(--odn-color-solid-black-12);
+  --odn-color-text-placeholder: var(--odn-color-solid-black-9);
+  --odn-color-text-disabled: var(--odn-color-solid-black-8);
+  --odn-color-bg-container-disabled: var(--odn-color-solid-black-3);
+  --odn-color-border: var(--odn-color-black-6);
+  --odn-color-border-hover: var(--odn-color-black-7);
+  --odn-color-border-active: var(--odn-color-primary);
+
+  /* 文字 */
+  --odn-color-info: rgba(41, 107, 239, 100%);
+  --odn-color-link: rgba(41, 107, 239, 100%);
+  --odn-color-success: rgba(7, 193, 96, 100%);
+  --odn-color-warn: rgba(250, 142, 0, 100%);
+  --odn-color-error: rgba(230, 61, 46, 100%);
+  --odn-color-white: rgba(255, 255, 255, 100%);
+  --odn-color-black: rgba(0, 0, 0, 100%);
+
+  /* 拷贝自 blue 1-10，后续支持动态生成 */
+  --odn-color-brand-1: rgba(245, 248, 255, 100%);
+  --odn-color-brand-2: rgba(212, 225, 252, 100%);
+  --odn-color-brand-3: rgba(191, 211, 250, 100%);
+  --odn-color-brand-4: rgba(148, 181, 247, 100%);
+  --odn-color-brand-5: rgba(105, 151, 244, 100%);
+  --odn-color-brand-6: rgba(41, 107, 239, 100%);
+  --odn-color-brand-7: rgba(17, 84, 219, 100%);
+  --odn-color-brand-8: rgba(1, 66, 195, 100%);
+  --odn-color-brand-9: rgba(4, 54, 154, 100%);
+  --odn-color-brand-10: rgba(0, 33, 99, 100%);
+
+  /* 拷贝自 black 1-10，后续支持动态生成 */
+  --odn-color-black-1: rgba(73, 90, 122, 3%);
+  --odn-color-black-2: rgba(73, 89, 122, 5%);
+  --odn-color-black-3: rgba(74, 97, 143, 8%);
+  --odn-color-black-4: rgba(73, 90, 122, 10%);
+  --odn-color-black-5: rgba(73, 90, 122, 12%);
+  --odn-color-black-6: rgba(73, 90, 122, 16%);
+  --odn-color-black-7: rgba(69, 80, 102, 25%);
+  --odn-color-black-8: rgba(62, 69, 82, 36%);
+  --odn-color-black-9: rgba(51, 55, 61, 58%);
+  --odn-color-black-10: rgba(38, 38, 41, 72%);
+  --odn-color-black-11: rgba(38, 39, 41, 85%);
+  --odn-color-black-12: rgba(0, 0, 0, 95%);
+
+  /* 拷贝自 solid-black 1-12，后续支持动态生成 */
+  --odn-color-solid-black-1: rgba(250, 250, 251, 100%);
+  --odn-color-solid-black-2: rgba(246, 247, 248, 100%);
+  --odn-color-solid-black-3: rgba(241, 242, 246, 100%);
+  --odn-color-solid-black-4: rgba(237, 238, 242, 100%);
+  --odn-color-solid-black-5: rgba(233, 235, 239, 100%);
+  --odn-color-solid-black-6: rgba(226, 229, 234, 100%);
+  --odn-color-solid-black-7: rgba(209, 211, 217, 100%);
+  --odn-color-solid-black-8: rgba(186, 188, 193, 100%);
+  --odn-color-solid-black-9: rgba(137, 139, 143, 100%);
+  --odn-color-solid-black-10: rgba(98, 99, 101, 100%);
+  --odn-color-solid-black-11: rgba(70, 71, 73, 100%);
+  --odn-color-solid-black-12: rgba(13, 13, 13, 100%);
+
+  /* 拷贝自 blue 1-10，后续支持动态生成 */
+  --odn-color-blue-1: rgba(245, 248, 255, 100%);
+  --odn-color-blue-2: rgba(212, 225, 252, 100%);
+  --odn-color-blue-3: rgba(191, 211, 250, 100%);
+  --odn-color-blue-4: rgba(148, 181, 247, 100%);
+  --odn-color-blue-5: rgba(105, 151, 244, 100%);
+  --odn-color-blue-6: rgba(41, 107, 239, 100%);
+  --odn-color-blue-7: rgba(17, 84, 219, 100%);
+  --odn-color-blue-8: rgba(1, 66, 195, 100%);
+  --odn-color-blue-9: rgba(4, 54, 154, 100%);
+  --odn-color-blue-10: rgba(0, 33, 99, 100%);
+
+  /* 拷贝自 green 1-10，后续支持动态生成 */
+  --odn-color-green-1: rgba(243, 252, 247, 100%);
+  --odn-color-green-2: rgba(205, 243, 223, 100%);
+  --odn-color-green-3: rgba(156, 230, 191, 100%);
+  --odn-color-green-4: rgba(131, 224, 175, 100%);
+  --odn-color-green-5: rgba(81, 212, 144, 100%);
+  --odn-color-green-6: rgba(7, 193, 96, 100%);
+  --odn-color-green-7: rgba(6, 164, 82, 100%);
+  --odn-color-green-8: rgba(5, 135, 67, 100%);
+  --odn-color-green-9: rgba(3, 96, 48, 100%);
+  --odn-color-green-10: rgba(2, 68, 34, 100%);
+
+  /* 拷贝自 orange 1-10，后续支持动态生成 */
+  --odn-color-orange-1: rgba(255, 248, 240, 100%);
+  --odn-color-orange-2: rgba(254, 232, 204, 100%);
+  --odn-color-orange-3: rgba(254, 221, 178, 100%);
+  --odn-color-orange-4: rgba(253, 199, 128, 100%);
+  --odn-color-orange-5: rgba(252, 176, 76, 100%);
+  --odn-color-orange-6: rgba(250, 142, 0, 100%);
+  --odn-color-orange-7: rgba(230, 131, 0, 100%);
+  --odn-color-orange-8: rgba(211, 120, 0, 100%);
+  --odn-color-orange-9: rgba(169, 96, 0, 100%);
+  --odn-color-orange-10: rgba(133, 76, 0, 100%);
+
+  /* 拷贝自 red 1-10，后续支持动态生成 */
+  --odn-color-red-1: rgba(255, 248, 247, 100%);
+  --odn-color-red-2: rgba(251, 221, 218, 100%);
+  --odn-color-red-3: rgba(248, 195, 190, 100%);
+  --odn-color-red-4: rgba(242, 158, 151, 100%);
+  --odn-color-red-5: rgba(237, 119, 109, 100%);
+  --odn-color-red-6: rgba(230, 61, 46, 100%);
+  --odn-color-red-7: rgba(195, 52, 39, 100%);
+  --odn-color-red-8: rgba(161, 43, 32, 100%);
+  --odn-color-red-9: rgba(115, 30, 23, 100%);
+  --odn-color-red-10: rgba(87, 10, 4, 100%);
+
+  /* typography */
+  --odn-font-size-comment: 12px;
+  --odn-font-leading-comment: 20px;
+  --odn-font-size-text-mn: 12px;
+  --odn-font-leading-text-mn: 20px;
+  --odn-font-size-text-sm: 13px;
+  --odn-font-leading-text-sm: 22px;
+  --odn-font-size-text-md: 14px;
+  --odn-font-leading-text-md: 22px;
+  --odn-font-size-text-lg: 16px;
+  --odn-font-leading-text-lg: 24px;
+  --odn-font-size-headline-6: 14px;
+  --odn-font-leading-headline-6: 22px;
+  --odn-font-size-headline-5: 16px;
+  --odn-font-leading-headline-5: 24px;
+  --odn-font-size-headline-4: 18px;
+  --odn-font-leading-headline-4: 26px;
+  --odn-font-size-headline-3: 24px;
+  --odn-font-leading-headline-3: 32px;
+  --odn-font-size-headline-2: 30px;
+  --odn-font-leading-headline-2: 38px;
+  --odn-font-size-headline-1: 36px;
+  --odn-font-leading-headline-1: 44px;
+
+  /* shadow */
+  --odn-shadow-1: 0 3px 6px 0 rgba(0, 0, 0, 4%);
+  --odn-shadow-2: 0 3px 5px 0 rgba(0, 0, 0, 5%), 0 6px 15px 0 rgba(0, 0, 0, 5%);
+  --odn-shadow-3:
+    0 4px 10px 0 rgba(0, 0, 0, 7%), 0 12px 24px 0 rgba(0, 0, 0, 8%);
+  --odn-shadow-4:
+    0 6px 15px 0 rgba(0, 0, 0, 7%), 0 10 36px 0 rgba(0, 0, 0, 16%);
+
+  /* 通用组件 */
+  --odn-color-bg-elevated: #fff;
+
+  /* popup */
+  --odn-popup-max-width: 250px;
+  --odn-popup-control-height: 36px;
+  --odn-popup-font-size: 13px;
+  --odn-popup-line-height: 20px;
+  --odn-popup-border-radius: 6px;
+  --odn-popup-border: none;
+  --odn-popup-box-shadow: 0 0 0 1px rgba(0, 0, 0, 6%);
+  --odn-popup-filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 5%))
+    drop-shadow(0 6px 15px rgba(0, 0, 0, 5%));
+
+  /* popover */
+  --odn-popover-padding-block: 16px;
+  --odn-popover-padding-inline: 16px;
+
+  /* tooltip */
+  --odn-tooltip-padding-block: 10px;
+  --odn-tooltip-padding-inline: 12px;
+}
+
+@layer components {
+  html * {
+    box-sizing: inherit;
+  }
+
+  html *::before,
+  html *::after {
+    box-sizing: inherit;
+  }
+
+  html[class*='od-focus-disabled'] :focus {
+    outline: none !important;
+  }
+
+  ul,
+  ol,
+  li {
+    list-style: none;
+  }
+
+  a[disabled] {
+    pointer-events: none;
+  }
+
+  [data-scrollbar-custom]::-webkit-scrollbar {
+    width: 14px;
+    height: 14px;
+  }
+
+  [data-scrollbar-custom]::-webkit-scrollbar-thumb {
+    min-width: 14px;
+    min-height: 14px;
+    background-color: rgba(0, 0, 0, 10%);
+    background-clip: content-box;
+    border: 4px solid transparent;
+    border-radius: 14px;
+  }
+
+  [data-scrollbar-custom]::-webkit-scrollbar-track {
+    background-color: rgba(0, 0, 0, 0%);
+  }
+
+  [data-scrollbar-custom]::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(0, 0, 0, 20%);
+  }
+
+  [data-scrollbar-custom]::-webkit-scrollbar-thumb:active {
+    background-color: rgba(0, 0, 0, 30%);
+  }
+
+  @keyframes odn-slide-up-in {
+    0% {
+      opacity: 0;
+      transform: translate3d(0, -4px, 0);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes odn-slide-up-out {
+    0% {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
+
+    100% {
+      opacity: 0;
+      transform: translate3d(0, -4px, 0);
+    }
+  }
+
+  @keyframes odn-slide-down-in {
+    0% {
+      opacity: 0;
+      transform: translate3d(0, 4px, 0);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  @keyframes odn-slide-down-out {
+    0% {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
+
+    100% {
+      opacity: 0;
+      transform: translate3d(0, 4px, 0);
+    }
+  }
+}

package/dist/style/index.d.ts

@@ -0,0 +1,7 @@
+import './base.css';
+import './theme-adui.css';
+declare global {
+    interface Window {
+        odnInitialized: boolean | undefined;
+    }
+}

package/dist/style/index.js

@@ -0,0 +1,18 @@
+import { queueMicrotaskPolyfill } from "../_util/queueMtPolyfill";
+import { FocusManager } from "../_util/focusManager";
+import "./base.css";
+import "./theme-adui.css";
+
+// 使用全局变量确保基础逻辑只执行一次
+
+if (typeof window !== 'undefined' && !window.odnInitialized) {
+  window.odnInitialized = true;
+  queueMicrotaskPolyfill();
+  var fakeFocusEngine = {
+    start: function start() {
+      return true;
+    }
+  };
+  var focusEngine = typeof document !== 'undefined' ? new FocusManager(document.documentElement, 'aragakey-focus-disabled') : fakeFocusEngine;
+  focusEngine.start();
+}