round="{{ r }}"
-
+
Round Button
-
+
Round Button
-
+
Round Button
diff --git a/packages/opendesign/src/components/button/style/index.scss b/packages/opendesign/src/components/button/style/index.scss
index c927724f084b16cba49ef98bbe5c69f7c2baa344..9032e6f6689e4deb3dbeb93d69d64504632458c6 100644
--- a/packages/opendesign/src/components/button/style/index.scss
+++ b/packages/opendesign/src/components/button/style/index.scss
@@ -6,14 +6,16 @@
border: 1px solid transparent;
transition: all var(--o-duration-s) var(--o-easing-standard);
white-space: nowrap;
- cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
-}
-.o-btn-disabled {
- cursor: not-allowed;
+ &:hover {
+ cursor: pointer;
+ }
+ &.o-btn-disabled {
+ cursor: not-allowed;
+ }
}
.o-btn-outline {
@@ -35,7 +37,7 @@
}
}
-.o-btn-fill {
+.o-btn-solid {
color: var(--btn-color);
border: 1px solid var(--btn-bd);
background-color: var(--btn-bg);
@@ -43,7 +45,7 @@
&:hover {
color: var(--btn-color-hover);
border: 1px solid var(--btn-bd-hover);
- background-color: var(--btn-bg-active);
+ background-color: var(--btn-bg-hover);
}
&:active {
@@ -58,6 +60,7 @@
}
.o-btn-text {
color: var(--btn-color);
+ background-color: transparent;
&:not(.o-btn-disabled) {
&:hover {
diff --git a/packages/opendesign/src/components/button/style/var.scss b/packages/opendesign/src/components/button/style/var.scss
index 1fb355be75d6d5dafc53009f100b7463b5503dd8..dff05dfedc20d9605fe8ffd0a4f77c8a35e9ad35 100644
--- a/packages/opendesign/src/components/button/style/var.scss
+++ b/packages/opendesign/src/components/button/style/var.scss
@@ -1,87 +1,170 @@
.o-btn-normal {
- --btn-color: var(--o-color-text2);
- --btn-color-hover: var(--o-color-primary2);
- --btn-color-active: var(--o-color-primary3);
+ --btn-color: var(--o-color-info1);
+ --btn-color-hover: var(--o-color-info1);
+ --btn-color-active: var(--o-color-info1);
- --btn-bg: var(--o-color-normal1);
- --btn-bg-hover: var(--o-color-primary2);
- --btn-bg-active: var(--o-color-primary3);
+ --btn-bd: var(--o-color-control1);
+ --btn-bd-hover: var(--o-color-control2);
+ --btn-bd-active: var(--o-color-control3);
- --btn-bd: var(--o-color-normal1);
- --btn-bd-hover: var(--o-color-primary2);
- --btn-bd-active: var(--o-color-primary3);
+ &.o-btn-solid {
+ --btn-bg: var(--o-color-control1-light);
+ --btn-bg-hover: var(--o-color-control2-light);
+ --btn-bg-active: var(--o-color-control3-light);
+
+ --btn-bd: var(--o-color-control1-light);
+ --btn-bd-hover: var(--o-color-control2-light);
+ --btn-bd-active: var(--o-color-control3-light);
+ }
+
+ &.o-btn-text {
+ --btn-bg-hover: var(--o-color-control1-light);
+ --btn-bg-active: var(--o-color-control2-light);
+ }
+
+ &.o-btn-disabled {
+ --btn-color: var(--o-color-info4);
+ --btn-bg: var(--o-color-control4-light);
+ --btn-bd: var(--o-color-control4-light);
+ }
}
.o-btn-primary {
--btn-color: var(--o-color-primary1);
- --btn-color-hover: var(--o-color-primary2);
- --btn-color-active: var(--o-color-primary3);
-
- --btn-bg: var(--o-color-primary1);
- --btn-bg-hover: var(--o-color-primary2);
- --btn-bg-active: var(--o-color-primary3);
+ --btn-color-hover: var(--o-color-primary1);
+ --btn-color-active: var(--o-color-primary1);
--btn-bd: var(--o-color-primary1);
--btn-bd-hover: var(--o-color-primary2);
--btn-bd-active: var(--o-color-primary3);
+
+ &.o-btn-solid {
+ --btn-bg: var(--o-color-primary1);
+ --btn-bg-hover: var(--o-color-primary2);
+ --btn-bg-active: var(--o-color-primary3);
+
+ --btn-bd: var(--o-color-primary1);
+ --btn-bd-hover: var(--o-color-primary2);
+ --btn-bd-active: var(--o-color-primary3);
+ }
+
+ &.o-btn-text {
+ --btn-bg-hover: var(--o-color-primary1-light);
+ --btn-bg-active: var(--o-color-primary2-light);
+ }
+
+ &.o-btn-disabled {
+ --btn-color: var(--o-color-primary4);
+ --btn-bg: var(--o-color-primary4);
+ --btn-bd: var(--o-color-primary4);
+ }
}
.o-btn-success {
--btn-color: var(--o-color-success1);
- --btn-color-hover: var(--o-color-success2);
- --btn-color-active: var(--o-color-success3);
-
- --btn-bg: var(--o-color-success1);
- --btn-bg-hover: var(--o-color-success2);
- --btn-bg-active: var(--o-color-success3);
+ --btn-color-hover: var(--o-color-success1);
+ --btn-color-active: var(--o-color-success1);
--btn-bd: var(--o-color-success1);
--btn-bd-hover: var(--o-color-success2);
--btn-bd-active: var(--o-color-success3);
+
+ &.o-btn-solid {
+ --btn-bg: var(--o-color-success1);
+ --btn-bg-hover: var(--o-color-success2);
+ --btn-bg-active: var(--o-color-success3);
+
+ --btn-bd: var(--o-color-success1);
+ --btn-bd-hover: var(--o-color-success2);
+ --btn-bd-active: var(--o-color-success3);
+ }
+
+ &.o-btn-text {
+ --btn-bg-hover: var(--o-color-success1-light);
+ --btn-bg-active: var(--o-color-success2-light);
+ }
+
+ &.o-btn-disabled {
+ --btn-color: var(--o-color-success4);
+ --btn-bg: var(--o-color-success4);
+ --btn-bd: var(--o-color-success4);
+ }
}
.o-btn-warning {
--btn-color: var(--o-color-warning1);
- --btn-color-hover: var(--o-color-warning2);
- --btn-color-active: var(--o-color-warning3);
-
- --btn-bg: var(--o-color-warning1);
- --btn-bg-hover: var(--o-color-warning2);
- --btn-bg-active: var(--o-color-warning3);
+ --btn-color-hover: var(--o-color-warning1);
+ --btn-color-active: var(--o-color-warning1);
--btn-bd: var(--o-color-warning1);
--btn-bd-hover: var(--o-color-warning2);
--btn-bd-active: var(--o-color-warning3);
+
+ &.o-btn-solid {
+ --btn-bg: var(--o-color-warning1);
+ --btn-bg-hover: var(--o-color-warning2);
+ --btn-bg-active: var(--o-color-warning3);
+
+ --btn-bd: var(--o-color-warning1);
+ --btn-bd-hover: var(--o-color-warning2);
+ --btn-bd-active: var(--o-color-warning3);
+ }
+
+ &.o-btn-text {
+ --btn-bg-hover: var(--o-color-warning1-light);
+ --btn-bg-active: var(--o-color-warning2-light);
+ }
+
+ &.o-btn-disabled {
+ --btn-color: var(--o-color-warning4);
+ --btn-bg: var(--o-color-warning4);
+ --btn-bd: var(--o-color-warning4);
+ }
}
.o-btn-danger {
--btn-color: var(--o-color-danger1);
- --btn-color-hover: var(--o-color-danger2);
- --btn-color-active: var(--o-color-danger3);
-
- --btn-bg: var(--o-color-danger1);
- --btn-bg-hover: var(--o-color-danger2);
- --btn-bg-active: var(--o-color-danger3);
+ --btn-color-hover: var(--o-color-danger1);
+ --btn-color-active: var(--o-color-danger1);
--btn-bd: var(--o-color-danger1);
--btn-bd-hover: var(--o-color-danger2);
--btn-bd-active: var(--o-color-danger3);
-}
-.o-btn-fill {
- --btn-color: var(--o-color-text1-inverse);
- --btn-color-hover: var(--o-color-text1-inverse);
- --btn-color-active: var(--o-color-text1-inverse);
+ &.o-btn-solid {
+ --btn-bg: var(--o-color-danger1);
+ --btn-bg-hover: var(--o-color-danger2);
+ --btn-bg-active: var(--o-color-danger3);
- &.o-btn-normal:not(.o-btn-disabled) {
- --btn-color: var(--o-color-text2);
+ --btn-bd: var(--o-color-danger1);
+ --btn-bd-hover: var(--o-color-danger2);
+ --btn-bd-active: var(--o-color-danger3);
}
-}
-.o-btn-disabled {
- --btn-color: var(--o-color-text4);
- --btn-bg: var(--o-color-normal4);
- --btn-bd: var(--o-color-normal4);
+ &.o-btn-text {
+ --btn-bg-hover: var(--o-color-danger1-light);
+ --btn-bg-active: var(--o-color-danger2-light);
+ }
+
+ &.o-btn-disabled {
+ --btn-color: var(--o-color-danger4);
+ --btn-bg: var(--o-color-danger4);
+ --btn-bd: var(--o-color-danger4);
+ }
}
-.o-btn-text {
- --btn-color-hover: var(--o-color-text1-inverse);
- --btn-color-active: var(--o-color-text1-inverse);
+
+.o-btn-solid {
+ --btn-color: var(--o-color-info1-inverse);
+ --btn-color-hover: var(--o-color-info1-inverse);
+ --btn-color-active: var(--o-color-info1-inverse);
+
+ &.o-btn-normal:not(.o-btn-disabled) {
+ --btn-color: var(--o-color-info1);
+ --btn-color-hover: var(--o-color-info1);
+ --btn-color-active: var(--o-color-info1);
+ }
+ &.o-btn-disabled {
+ --btn-color: var(--o-color-info1-inverse);
+ &.o-btn-normal {
+ --btn-color: var(--o-color-info4);
+ }
+ }
}
.o-btn-small {
diff --git a/packages/opendesign/src/components/button/types.ts b/packages/opendesign/src/components/button/types.ts
index 71b02fa760ab0388f9a3e113edd405ec3bf2bcd3..7a86e12f7b1e20ae80d5efed881eded93b688778 100644
--- a/packages/opendesign/src/components/button/types.ts
+++ b/packages/opendesign/src/components/button/types.ts
@@ -1,5 +1,5 @@
import { ExtractPropTypes, PropType } from 'vue';
-import { SizeT, RoundT, ColorT, VariantT } from '../_shared/global';
+import { SizeT, RoundT, VariantT } from '../_shared/global';
export type ButtonTypeT = 'primary' | 'outline' | 'text' | 'link'
@@ -8,7 +8,7 @@ export const buttonProps = {
* 颜色类型：ColorT
*/
color: {
- type: String as PropType
,
+ type: String as PropType<'normal' | 'primary' | 'success' | 'warning' | 'danger'>,
default: 'normal'
},
/**
diff --git a/packages/opendesign/src/components/input-number/OInputNumber.vue b/packages/opendesign/src/components/input-number/OInputNumber.vue
index 973cccfda0735ccae55ef5fd78299b41fad022f2..3dfc5f43d372832af42345f8647a2e0bf5bb22a8 100644
--- a/packages/opendesign/src/components/input-number/OInputNumber.vue
+++ b/packages/opendesign/src/components/input-number/OInputNumber.vue
@@ -1,96 +1,13 @@
- Basic
+ Color
val1:{{ val1 }}
@@ -27,6 +27,25 @@ const val4 = ref('1px');
+ Color
+
readonly:
@@ -52,15 +71,28 @@ const val4 = ref('1px');
-
Shape
+
Round
Disabled
diff --git a/packages/opendesign/src/components/input-number/index.ts b/packages/opendesign/src/components/input-number/index.ts
index a5f64acd19c4701c740d2b445bb6fc237c33fe75..e1a463aa3ca90427c49d543b8cc41ec308c4c0d9 100644
--- a/packages/opendesign/src/components/input-number/index.ts
+++ b/packages/opendesign/src/components/input-number/index.ts
@@ -7,3 +7,4 @@ const OInputNumber = Object.assign(_OInputNumber, {
},
});
export { OInputNumber };
+export * from './types';
diff --git a/packages/opendesign/src/components/input-number/style/index.scss b/packages/opendesign/src/components/input-number/style/index.scss
index 666fea56a30e27fce31360a3989a70a312f5b1c5..7943e6c45e987a357fe78d7a5022a039f738a05f 100644
--- a/packages/opendesign/src/components/input-number/style/index.scss
+++ b/packages/opendesign/src/components/input-number/style/index.scss
@@ -3,7 +3,7 @@
.o-input-number {
.o-input-prepend,
.o-input-append {
- font-size: 14px;
+ font-size: var(--o-font_size-text);
padding: 0;
align-items: stretch;
overflow: hidden;
@@ -21,15 +21,17 @@
justify-content: center;
display: flex;
min-width: var(--input-height);
- font-size: var(--input-number-icon-size);
+ font-size: 16px;
flex-wrap: wrap;
color: var(--input-number-btn-color);
&.both-left,
&.both-right {
+ background-color: var(--input-number-btn-bg);
+
&:hover {
color: var(--input-number-btn-color-hover);
- background-color: var(--input-number-btn-bg);
+ background-color: var(--input-number-btn-bg-hover);
}
&.is-disabled {
cursor: not-allowed;
@@ -38,7 +40,7 @@
}
}
- .o-input-shape-round & {
+ .o-input-round-pill & {
&.both-right {
padding-right: 2px;
}
@@ -57,9 +59,11 @@
font-size: 16px;
overflow: hidden;
position: relative;
+ background-color: var(--input-number-btn-bg);
+
&:hover {
color: var(--input-number-btn-color-hover);
- background-color: var(--input-number-btn-bg);
+ background-color: var(--input-number-btn-bg-hover);
}
&.is-disabled {
cursor: not-allowed;
@@ -79,7 +83,7 @@
.o-input-number-size-small {
width: 90px;
}
-.o-input-number-size-normal {
+.o-input-number-size-medium {
width: 120px;
}
.o-input-number-size-large {
diff --git a/packages/opendesign/src/components/input-number/style/var.scss b/packages/opendesign/src/components/input-number/style/var.scss
index bea38d1458d7bae84a0982b85e91823cb6f2db05..499a7735cb4f7cbf50f79165fb93a40315770170 100644
--- a/packages/opendesign/src/components/input-number/style/var.scss
+++ b/packages/opendesign/src/components/input-number/style/var.scss
@@ -1,8 +1,8 @@
.o-input-number {
- --input-number-icon-size: 16px;
--input-number-btn-color: var(--o-color-text3);
--input-number-btn-color-hover: var(--o-color-primary1);
- --input-number-btn-bg: var(--o-color-bg2);
- --input-number-btn-bg-disabled: var(--o-color-info4);
--input-number-btn-color-disabled: var(--o-color-text4);
+ --input-number-btn-bg: var(--o-color-bg2);
+ --input-number-btn-bg-hover: var(--o-color-normal1);
+ --input-number-btn-bg-disabled: var(--o-color-normal4);
}
diff --git a/packages/opendesign/src/components/input-number/types.ts b/packages/opendesign/src/components/input-number/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..916981831810e7b2c96af976c5c206003604bc5b
--- /dev/null
+++ b/packages/opendesign/src/components/input-number/types.ts
@@ -0,0 +1,202 @@
+import { ExtractPropTypes, PropType } from 'vue';
+import { SizeT, RoundT } from '../_shared/global';
+
+// interface InputPropT {
+// /**
+// * 数字输入框的值
+// * v-model
+// */
+// modelValue?: string | number;
+// /**
+// * 数字输入框的默认值
+// * 非受控
+// */
+// defaultValue?: string | number;
+// /**
+// * 按钮点击时步长
+// */
+// step?: number;
+// /**
+// * 最小值
+// */
+// min?: number;
+// /**
+// * 最大值
+// */
+// max?: number;
+// /**
+// * 样式尺寸
+// */
+// size?: SizeT;
+// /**
+// * 形状
+// */
+// shape?: ShapeT;
+// /**
+// * 提示文本
+// */
+// placeholder?: string;
+// /**
+// * 状态，显示指定，用于非表单场景
+// */
+// status?: 'success' | 'warning' | 'error';
+// /**
+// * 是否禁用
+// */
+// disabled?: boolean;
+// /**
+// * 是否只读
+// */
+// readonly?: boolean;
+// /**
+// * 是否可以清除
+// */
+// clearable?: boolean;
+// /**
+// * 控制按钮位置
+// */
+// controls?: 'both' | 'right' | 'left' | 'none';
+// /**
+// * 是否在输入合法时，更新modelvalue
+// */
+// updateOnInput?: boolean;
+// /**
+// * 解析输入框的值
+// */
+// parse?: (value: string) => string;
+// /**
+// * 对值格式化，控制显示格式
+// * 需搭配parse处理，保证值的正确性
+// */
+// format?: (value: string | number) => string | number;
+// }
+// const props = withDefaults(defineProps(), {
+// modelValue: undefined,
+// defaultValue: undefined,
+// step: 1,
+// min: undefined,
+// max: undefined,
+// size: undefined,
+// shape: undefined,
+// placeholder: '',
+// clearable: true,
+// parse: undefined,
+// format: undefined,
+// status: undefined,
+// controls: 'both',
+// updateOnInput: true,
+// });
+export const inputNumberPorps = {
+ /**
+ * 下拉框的值
+ * v-model
+ */
+ modelValue: {
+ type: [String, Number] as PropType,
+ },
+ /**
+ * 下拉框的默认值
+ * 非受控
+ */
+ defaultValue: {
+ type: [String, Number],
+ },
+ /**
+ * 按钮点击时步长
+ */
+ step: {
+ type: Number,
+ default: 1
+ },
+ /**
+ * 最小值
+ */
+ min: {
+ type: Number,
+ },
+ /**
+ * 最大值
+ */
+ max: {
+ type: Number,
+ },
+ /**
+ * 大小
+ */
+ size: {
+ type: String as PropType,
+ },
+ /**
+ * 控制按钮位置
+ */
+ controls: {
+ type: String as PropType<'both' | 'right' | 'left' | 'none'>,
+ default: 'both'
+ },
+ /**
+ * 圆角值
+ */
+ round: {
+ type: String as PropType
+ },
+ /**
+ * 颜色类型：ColorT
+ */
+ color: {
+ type: String as PropType<'normal' | 'success' | 'warning' | 'danger'>,
+ default: 'normal'
+ },
+ /**
+ * 提示文本
+ */
+ placeholder: {
+ type: String,
+ },
+ /**
+ * 是否禁用
+ */
+ disabled: {
+ type: Boolean,
+ },
+ /**
+ * 是否只读
+ */
+ readonly: {
+ type: Boolean,
+ },
+ /**
+ * 是否可以清除
+ */
+ clearable: {
+ type: Boolean,
+ default: true
+ },
+ /**
+ * 是否自动增加宽度
+ */
+ autoWidth: {
+ type: Boolean,
+ },
+ /**
+ * 是否是密码输入
+ */
+ type: {
+ type: String as PropType<'text' | 'password'>,
+ default: 'text'
+ },
+ /**
+ * 解析输入框的值
+ */
+ parse: {
+ type: Function as PropType<(value: string) => string>,
+ },
+ /**
+ * 对值格式化，控制显示格式
+ * 需搭配parse处理，保证值的正确性
+ */
+ format: {
+ type: Function as PropType<(value: string | number) => string | number>,
+ },
+};
+
+export type InputNumberPorpsT = ExtractPropTypes;
diff --git a/packages/opendesign/src/components/input/OInput.vue b/packages/opendesign/src/components/input/OInput.vue
index 4a33ae5174fcc95c54a9e32916e6f1c8b934a551..2c364e0dd154fdd641b2ed87b054a5ab11a69414 100644
--- a/packages/opendesign/src/components/input/OInput.vue
+++ b/packages/opendesign/src/components/input/OInput.vue
@@ -7,10 +7,10 @@ import { trigger } from '../_shared/event';
import { Enter } from '../_shared/keycode';
import { toInputString } from './input';
import { OResizeObserver } from '../resize-observer';
-import { inputPorps } from './types';
+import { inputProps } from './types';
import { getRoundClass } from '../_shared/style-class';
-const props = defineProps(inputPorps);
+const props = defineProps(inputProps);
const emits = defineEmits<{
(e: 'update:modelValue', value: string): void;
@@ -48,6 +48,7 @@ const displayValue = computed(() => {
// 是否聚焦状态
const isFocus = ref(false);
let lastValue: string = realValue.value;
+const isClearable = computed(() => props.clearable && !props.disabled && !props.readonly);
function updateValue(val: string) {
const value = isFunction(props.parse) ? props.parse(val) : val;
@@ -142,7 +143,6 @@ const onMirrorResize = (en: ResizeObserverEntry) => {
inputWidth.value = en.target.clientWidth;
};
const round = getRoundClass(props, 'input');
-console.log(round.class.value);
Readonly
+
+ val1:{{ val1 }}
+
+
+
+
+
+
+
+
+
+
+
+
+ 元
+
+
Disabled
val1:{{ val1 }}
diff --git a/packages/opendesign/src/components/input/index.ts b/packages/opendesign/src/components/input/index.ts
index ab9ff6759b6ec3d5868cd45a261b134ff518f6da..8b7f59f5418bef9c0384b17f5a8c519d5fcac682 100644
--- a/packages/opendesign/src/components/input/index.ts
+++ b/packages/opendesign/src/components/input/index.ts
@@ -7,3 +7,4 @@ const OInput = Object.assign(_OInput, {
},
});
export { OInput };
+export * from './types';
diff --git a/packages/opendesign/src/components/input/style/index.scss b/packages/opendesign/src/components/input/style/index.scss
index 76a127cab13e99fa6d86aedc9efad7e37db2c8f5..b5c7237b08ea9997685ec795d214de18e351e748 100644
--- a/packages/opendesign/src/components/input/style/index.scss
+++ b/packages/opendesign/src/components/input/style/index.scss
@@ -18,13 +18,15 @@
border: 1px solid var(--input-bd);
background-color: var(--input-bg);
- &:hover {
- border-color: var(--input-bd-hover);
- background-color: var(--input-bg-hover);
- }
- &.is-focus {
- border-color: var(--input-bd-focus);
- background-color: var(--input-bg-focus);
+ &:not(.is-readonly) {
+ &:hover {
+ border-color: var(--input-bd-hover);
+ background-color: var(--input-bg-hover);
+ }
+ &.is-focus {
+ border-color: var(--input-bd-focus);
+ background-color: var(--input-bg-focus);
+ }
}
&.has-prepend {
@@ -78,9 +80,6 @@
}
.o-input-disabled {
- .o-input-clear {
- display: none;
- }
.o-input-wrap {
color: var(--input-color-disabled);
cursor: not-allowed;
diff --git a/packages/opendesign/src/components/input/types.ts b/packages/opendesign/src/components/input/types.ts
index f03e64bbcc7cd72788cfa6a680baa5e92c05d9cd..2ce3efbb591af31126ccbafc370b337430daf83b 100644
--- a/packages/opendesign/src/components/input/types.ts
+++ b/packages/opendesign/src/components/input/types.ts
@@ -1,7 +1,7 @@
import { ExtractPropTypes, PropType } from 'vue';
-import { SizeT, ShapeT, ColorT, RoundT } from '../_shared/global';
+import type { SizeT, ShapeT, RoundT } from '../_shared/global';
-export const inputPorps = {
+export const inputProps = {
/**
* 下拉框的值
* v-model
@@ -35,10 +35,10 @@ export const inputPorps = {
type: String as PropType
},
/**
- * 颜色类型：ColorT
+ * 颜色类型
*/
color: {
- type: String as PropType,
+ type: String as PropType<'normal' | 'success' | 'warning' | 'danger'>,
default: 'normal'
},
/**
@@ -47,12 +47,6 @@ export const inputPorps = {
placeholder: {
type: String,
},
- /**
- * 状态，显示指定，用于非表单场景
- */
- status: {
- type: String as PropType<'success' | 'warning' | 'error'>,
- },
/**
* 是否禁用
*/
@@ -100,4 +94,4 @@ export const inputPorps = {
},
};
-export type InputPorpsT = ExtractPropTypes;
+export type InputPropsT = ExtractPropTypes;
diff --git a/packages/opendesign/src/components/select/style/index.scss b/packages/opendesign/src/components/select/style/index.scss
index b66148cce1248ea5ed8a102050e5137fa40ff0c0..122ad90c9b5785a97c5e4f20e62b7e498efc4736 100644
--- a/packages/opendesign/src/components/select/style/index.scss
+++ b/packages/opendesign/src/components/select/style/index.scss
@@ -30,7 +30,7 @@
border-radius: var(--select-radius-s);
}
-.o-select-size-normal {
+.o-select-size-medium {
padding: 4px 8px 4px 12px;
height: var(--select-height-m);
border-radius: var(--select-radius-m);
diff --git a/packages/opendesign/src/components/style/dark.token.css b/packages/opendesign/src/components/style/dark.token.css
index b5711226a8c97e665bbcfb2d67c3f563e6b54653..72e07e8bbf0b961965f28a5ed46b3f92856b8709 100644
--- a/packages/opendesign/src/components/style/dark.token.css
+++ b/packages/opendesign/src/components/style/dark.token.css
@@ -1,320 +1,894 @@
/* theme: dark */
:root[theme="dark"] {
/**
- * @name 常规色
+ * @name
+ * @type palette
+ * @group blue
+ * @description
+ */
+ --o-blue-1: 0, 13, 77;
+ /**
+ * @name
+ * @type palette
+ * @group blue
+ * @description
+ */
+ --o-blue-2: 4, 27, 121;
+ /**
+ * @name
+ * @type palette
+ * @group blue
+ * @description
+ */
+ --o-blue-3: 14, 50, 166;
+ /**
+ * @name
+ * @type palette
+ * @group blue
+ * @description
+ */
+ --o-blue-4: 29, 77, 210;
+ /**
+ * @name
+ * @type palette
+ * @group blue
+ * @description
+ */
+ --o-blue-5: 48, 111, 255;
+ /**
+ * @name
+ * @type palette
+ * @group blue
+ * @description
+ */
+ --o-blue-6: 60, 126, 255;
+ /**
+ * @name
+ * @type palette
+ * @group blue
+ * @description
+ */
+ --o-blue-7: 104, 159, 255;
+ /**
+ * @name
+ * @type palette
+ * @group blue
+ * @description
+ */
+ --o-blue-8: 147, 190, 255;
+ /**
+ * @name
+ * @type palette
+ * @group blue
+ * @description
+ */
+ --o-blue-9: 190, 218, 255;
+ /**
+ * @name
+ * @type palette
+ * @group blue
+ * @description
+ */
+ --o-blue-10: 234, 244, 255;
+ /**
+ * @name
+ * @type palette
+ * @group yellow
+ * @description
+ */
+ --o-yellow-1: 77, 56, 0;
+ /**
+ * @name
+ * @type palette
+ * @group yellow
+ * @description
+ */
+ --o-yellow-2: 120, 94, 7;
+ /**
+ * @name
+ * @type palette
+ * @group yellow
+ * @description
+ */
+ --o-yellow-3: 163, 134, 20;
+ /**
+ * @name
+ * @type palette
+ * @group yellow
+ * @description
+ */
+ --o-yellow-4: 207, 179, 37;
+ /**
+ * @name
+ * @type palette
+ * @group yellow
+ * @description
+ */
+ --o-yellow-5: 250, 225, 60;
+ /**
+ * @name
+ * @type palette
+ * @group yellow
+ * @description
+ */
+ --o-yellow-6: 251, 233, 75;
+ /**
+ * @name
+ * @type palette
+ * @group yellow
+ * @description
+ */
+ --o-yellow-7: 252, 243, 116;
+ /**
+ * @name
+ * @type palette
+ * @group yellow
+ * @description
+ */
+ --o-yellow-8: 253, 250, 157;
+ /**
+ * @name
+ * @type palette
+ * @group yellow
+ * @description
+ */
+ --o-yellow-9: 254, 254, 198;
+ /**
+ * @name
+ * @type palette
+ * @group yellow
+ * @description
+ */
+ --o-yellow-10: 254, 255, 240;
+ /**
+ * @name
+ * @type palette
+ * @group green
+ * @description
+ */
+ --o-green-1: 0, 77, 28;
+ /**
+ * @name
+ * @type palette
+ * @group green
+ * @description
+ */
+ --o-green-2: 4, 102, 37;
+ /**
+ * @name
+ * @type palette
+ * @group green
+ * @description
+ */
+ --o-green-3: 10, 128, 45;
+ /**
+ * @name
+ * @type palette
+ * @group green
+ * @description
+ */
+ --o-green-4: 18, 154, 55;
+ /**
+ * @name
+ * @type palette
+ * @group green
+ * @description
+ */
+ --o-green-5: 29, 180, 64;
+ /**
+ * @name
+ * @type palette
+ * @group green
+ * @description
+ */
+ --o-green-6: 39, 195, 70;
+ /**
+ * @name
+ * @type palette
+ * @group green
+ * @description
+ */
+ --o-green-7: 80, 210, 102;
+ /**
+ * @name
+ * @type palette
+ * @group green
+ * @description
+ */
+ --o-green-8: 126, 225, 139;
+ /**
+ * @name
+ * @type palette
+ * @group green
+ * @description
+ */
+ --o-green-9: 178, 240, 183;
+ /**
+ * @name
+ * @type palette
+ * @group green
+ * @description
+ */
+ --o-green-10: 235, 255, 236;
+ /**
+ * @name
+ * @type palette
+ * @group orange
+ * @description
+ */
+ --o-orange-1: 77, 27, 0;
+ /**
+ * @name
+ * @type palette
+ * @group orange
+ * @description
+ */
+ --o-orange-2: 121, 48, 4;
+ /**
+ * @name
+ * @type palette
+ * @group orange
+ * @description
+ */
+ --o-orange-3: 166, 75, 10;
+ /**
+ * @name
+ * @type palette
+ * @group orange
+ * @description
+ */
+ --o-orange-4: 210, 105, 19;
+ /**
+ * @name
+ * @type palette
+ * @group orange
+ * @description
+ */
+ --o-orange-5: 255, 141, 31;
+ /**
+ * @name
+ * @type palette
+ * @group orange
+ * @description
+ */
+ --o-orange-6: 255, 150, 38;
+ /**
+ * @name
+ * @type palette
+ * @group orange
+ * @description
+ */
+ --o-orange-7: 255, 179, 87;
+ /**
+ * @name
+ * @type palette
+ * @group orange
+ * @description
+ */
+ --o-orange-8: 255, 205, 135;
+ /**
+ * @name
+ * @type palette
+ * @group orange
+ * @description
+ */
+ --o-orange-9: 255, 227, 184;
+ /**
+ * @name
+ * @type palette
+ * @group orange
+ * @description
+ */
+ --o-orange-10: 255, 247, 232;
+ /**
+ * @name
+ * @type palette
+ * @group red
+ * @description
+ */
+ --o-red-1: 77, 0, 10;
+ /**
+ * @name
+ * @type palette
+ * @group red
+ * @description
+ */
+ --o-red-2: 119, 6, 17;
+ /**
+ * @name
+ * @type palette
+ * @group red
+ * @description
+ */
+ --o-red-3: 161, 22, 31;
+ /**
+ * @name
+ * @type palette
+ * @group red
+ * @description
+ */
+ --o-red-4: 203, 46, 52;
+ /**
+ * @name
+ * @type palette
+ * @group red
+ * @description
+ */
+ --o-red-5: 245, 78, 78;
+ /**
+ * @name
+ * @type palette
+ * @group red
+ * @description
+ */
+ --o-red-6: 247, 105, 101;
+ /**
+ * @name
+ * @type palette
+ * @group red
+ * @description
+ */
+ --o-red-7: 249, 141, 134;
+ /**
+ * @name
+ * @type palette
+ * @group red
+ * @description
+ */
+ --o-red-8: 251, 176, 167;
+ /**
+ * @name
+ * @type palette
+ * @group red
+ * @description
+ */
+ --o-red-9: 253, 209, 202;
+ /**
+ * @name
+ * @type palette
+ * @group red
+ * @description
+ */
+ --o-red-10: 255, 240, 236;
+ /**
+ * @name
+ * @type palette
+ * @group gray
+ * @description
+ */
+ --o-gray-1: 0, 0, 0;
+ /**
+ * @name
+ * @type palette
+ * @group gray
+ * @description
+ */
+ --o-gray-2: 36, 36, 36;
+ /**
+ * @name
+ * @type palette
+ * @group gray
+ * @description
+ */
+ --o-gray-3: 57, 57, 57;
+ /**
+ * @name
+ * @type palette
+ * @group gray
+ * @description
+ */
+ --o-gray-4: 94, 94, 94;
+ /**
+ * @name
+ * @type palette
+ * @group gray
+ * @description
+ */
+ --o-gray-5: 119, 119, 122;
+ /**
+ * @name
+ * @type palette
+ * @group gray
+ * @description
+ */
+ --o-gray-6: 166, 166, 166;
+ /**
+ * @name
+ * @type palette
+ * @group gray
+ * @description
+ */
+ --o-gray-7: 221, 221, 221;
+ /**
+ * @name
+ * @type palette
+ * @group gray
+ * @description
+ */
+ --o-gray-8: 238, 238, 238;
+ /**
+ * @name
+ * @type palette
+ * @group gray
+ * @description
+ */
+ --o-gray-9: 243, 243, 243;
+ /**
+ * @name
+ * @type palette
+ * @group gray
+ * @description
+ */
+ --o-gray-10: 255, 255, 255;
+ /**
+ * @name
+ * @type palette
+ * @group mixedgray
+ * @description
+ */
+ --o-mixedgray-1: 23, 23, 26;
+ /**
+ * @name
+ * @type palette
+ * @group mixedgray
+ * @description
+ */
+ --o-mixedgray-2: 46, 46, 48;
+ /**
+ * @name
+ * @type palette
+ * @group mixedgray
+ * @description
+ */
+ --o-mixedgray-3: 72, 72, 73;
+ /**
+ * @name
+ * @type palette
+ * @group mixedgray
+ * @description
+ */
+ --o-mixedgray-4: 95, 95, 96;
+ /**
+ * @name
+ * @type palette
+ * @group mixedgray
+ * @description
+ */
+ --o-mixedgray-5: 120, 120, 122;
+ /**
+ * @name
+ * @type palette
+ * @group mixedgray
+ * @description
+ */
+ --o-mixedgray-6: 146, 146, 147;
+ /**
+ * @name
+ * @type palette
+ * @group mixedgray
+ * @description
+ */
+ --o-mixedgray-7: 171, 171, 172;
+ /**
+ * @name
+ * @type palette
+ * @group mixedgray
+ * @description
+ */
+ --o-mixedgray-8: 197, 197, 197;
+ /**
+ * @name
+ * @type palette
+ * @group mixedgray
+ * @description
+ */
+ --o-mixedgray-9: 223, 223, 223;
+ /**
+ * @name
+ * @type palette
+ * @group mixedgray
+ * @description
+ */
+ --o-mixedgray-10: 246, 246, 246;
+ /**
+ * @name
* @type color
- * @group primary
- * @description 用于按钮、文本、链接强调状态时常规颜色
+ * @group info
+ * @description 一级/强调/标题
*/
- --o-color-primary1: #406fe7;
+ --o-color-info1: rgb(var(--o-gray-10));
/**
- * @name 悬浮色
+ * @name
* @type color
- * @group primary
- * @description 用于按钮、文本、链接强调状态时悬浮颜色
+ * @group info
+ * @description 二级/次强调/正文
*/
- --o-color-primary2: #5988ff;
+ --o-color-info2: rgb(var(--o-gray-8));
/**
- * @name 聚焦色
+ * @name
* @type color
- * @group primary
- * @description 用于按钮、文本、链接强调状态时聚焦颜色
+ * @group info
+ * @description 三级/辅助信息
*/
- --o-color-primary3: #002fa7;
+ --o-color-info3: rgb(var(--o-gray-6));
/**
- * @name 禁用色
+ * @name
* @type color
- * @group primary
- * @description 用于按钮、文本、链接强调状态时禁用颜色
+ * @group info
+ * @description 置灰/禁用
+ */
+ --o-color-info4: rgb(var(--o-gray-4));
+ /**
+ * @name
+ * @type color
+ * @group info
+ * @description 一级/次强调/正文反色
*/
- --o-color-primary4: #0c2360;
+ --o-color-info1-inverse: rgb(var(--o-gray-1));
/**
- * @name 常规色
+ * @name
* @type color
- * @group major
- * @description 用于按钮、文本、链接major状态时文本颜色
+ * @group info
+ * @description 二级/辅助信息反色
*/
- --o-color-major1: #feb32a;
+ --o-color-info2-inverse: rgb(var(--o-gray-3));
/**
- * @name 常规色
+ * @name
* @type color
- * @group normal
- * @description 用于按钮、文本、链接常态时常规颜色
+ * @group info
+ * @description 三级/辅助信息反色
*/
- --o-color-normal1: var(--o-color-info1);
+ --o-color-info3-inverse: rgb(var(--o-gray-5));
/**
- * @name 悬浮色
+ * @name
* @type color
- * @group normal
- * @description 用于按钮、文本、链接常态时悬浮颜色
+ * @group info
+ * @description 置灰/禁用反色
*/
- --o-color-normal2: var(--o-color-primary2);
+ --o-color-info4-inverse: rgb(var(--o-gray-7));
/**
- * @name 聚焦色
+ * @name
* @type color
- * @group normal
- * @description 用于按钮、文本、链接常态时聚焦颜色
+ * @group mask
+ * @description 全局遮罩
*/
- --o-color-normal3: var(--o-color-primary3);
+ --o-color-mask1: rgba(var(--o-gray-10), .2);
/**
- * @name 禁用色
+ * @name
* @type color
- * @group normal
- * @description 用于按钮、文本、链接常态时禁用颜色
+ * @group mask
+ * @description 局部遮罩
*/
- --o-color-normal4: var(--o-color-info4);
+ --o-color-mask2: rgba(var(--o-gray-10), .1);
/**
- * @name 常规色
+ * @name
* @type color
- * @group success
- * @description 用于按钮、文本、链接成功状态时常规颜色
+ * @group fill
+ * @description 一级填充/页面背景
*/
- --o-color-success1: #6dc335;
+ --o-color-fill1: rgb(var(--o-mixedgray-1));
/**
- * @name 悬浮色
+ * @name
* @type color
- * @group success
- * @description 用于按钮、文本、链接成功状态时悬浮颜色
+ * @group fill
+ * @description 二级填充/区块、卡片
*/
- --o-color-success2: #93e95b;
+ --o-color-fill2: rgb(var(--o-gray-1));
/**
- * @name 聚焦色
+ * @name
* @type color
- * @group success
- * @description 用于按钮、文本、链接成功状态时聚焦颜色
+ * @group fill
+ * @description 三级填充/卡片
*/
- --o-color-success3: #62af30;
+ --o-color-fill3: rgb(var(--o-mixedgray-3));
/**
- * @name 禁用色
+ * @name
* @type color
- * @group success
- * @description 用于按钮、文本、链接成功状态时禁用颜色
+ * @group fill
+ * @description 四级填充/禁用
*/
- --o-color-success4: #355f1a;
+ --o-color-fill4: rgb(var(--o-mixedgray-4));
/**
- * @name 常规色
+ * @name
* @type color
- * @group warning
- * @description 用于按钮、文本、链接告警状态时常规颜色
+ * @group control
+ * @description 常规
*/
- --o-color-warning1: #ff8e36;
+ --o-color-control1: rgb(var(--o-mixedgray-3));
/**
- * @name 悬浮色
+ * @name
* @type color
- * @group warning
- * @description 用于按钮、文本、链接告警状态时悬浮颜色
+ * @group control
+ * @description 悬浮
*/
- --o-color-warning2: #ffb45c;
+ --o-color-control2: rgb(var(--o-mixedgray-4));
/**
- * @name 聚焦色
+ * @name
* @type color
- * @group warning
- * @description 用于按钮、文本、链接告警状态时聚焦颜色
+ * @group control
+ * @description 激活
*/
- --o-color-warning3: #ff801c;
+ --o-color-control3: rgb(var(--o-mixedgray-6));
/**
- * @name 禁用色
+ * @name
* @type color
- * @group warning
- * @description 用于按钮、文本、链接告警状态时禁用颜色
+ * @group control
+ * @description 禁用
*/
- --o-color-warning4: #b54f00;
+ --o-color-control4: rgb(var(--o-mixedgray-5));
/**
- * @name 常规色
+ * @name
* @type color
- * @group danger
- * @description 用于按钮、文本、链接错误状态时常规颜色
+ * @group control
+ * @description 浅/控件常规
*/
- --o-color-danger1: #f3524d;
+ --o-color-control1-light: rgb(var(--o-mixedgray-3));
/**
- * @name 悬浮色
+ * @name
* @type color
- * @group danger
- * @description 用于按钮、文本、链接错误状态时悬浮颜色
+ * @group control
+ * @description 浅/控件悬浮
*/
- --o-color-danger2: #ff7873;
+ --o-color-control2-light: rgb(var(--o-mixedgray-4));
/**
- * @name 聚焦色
+ * @name
* @type color
- * @group danger
- * @description 用于按钮、文本、链接错误状态时聚焦颜色
+ * @group control
+ * @description 浅/控件激活
*/
- --o-color-danger3: #f13b35;
+ --o-color-control3-light: rgb(var(--o-mixedgray-5));
/**
- * @name 禁用色
+ * @name
* @type color
- * @group danger
- * @description 用于按钮、文本、链接错误状态时禁用颜色
+ * @group control
+ * @description 浅/控件禁用
*/
- --o-color-danger4: #850d09;
+ --o-color-control4-light: rgb(var(--o-mixedgray-2));
/**
- * @name 常规色
+ * @name
* @type color
- * @group info
- * @description 用于按钮、文本、链接信息状态时常规颜色
+ * @group primary
+ * @description 常规
*/
- --o-color-info1: #242424;
+ --o-color-primary1: rgb(var(--o-blue-6));
/**
- * @name 悬浮色
+ * @name
* @type color
- * @group info
- * @description 用于按钮、文本、链接信息状态时悬浮颜色
+ * @group primary
+ * @description 悬浮
*/
- --o-color-info2: #2e2e2e;
+ --o-color-primary2: rgb(var(--o-blue-5));
/**
- * @name 聚焦色
+ * @name
* @type color
- * @group info
- * @description 用于按钮、文本、链接信息状态时聚焦颜色
+ * @group primary
+ * @description 激活
*/
- --o-color-info3: #1e1e1e;
+ --o-color-primary3: rgb(var(--o-blue-7));
/**
- * @name 禁用色
+ * @name
* @type color
- * @group info
- * @description 用于按钮、文本、链接信息状态时禁用颜色
+ * @group primary
+ * @description 禁用
+ */
+ --o-color-primary4: rgb(var(--o-blue-3));
+ /**
+ * @name
+ * @type color
+ * @group primary
+ * @description 浅/常规
*/
- --o-color-info4: #151515;
+ --o-color-primary1-light: rgb(var(--o-blue-2));
/**
- * @name 一级容器背景色
+ * @name
* @type color
- * @group background
- * @description 用于页面整体背景色
+ * @group primary
+ * @description 浅/悬浮
*/
- --o-color-bg1: #121212;
+ --o-color-primary2-light: rgb(var(--o-blue-3));
/**
- * @name 二级容器背景色
+ * @name
* @type color
- * @group background
- * @description 用于区块、卡片、弹出框、tooltip背景色
+ * @group primary
+ * @description 浅/激活
*/
- --o-color-bg2: #1e1e1e;
+ --o-color-primary3-light: rgb(var(--o-blue-4));
/**
- * @name 三级容器背景色
+ * @name
* @type color
- * @group background
- * @description 用于区块卡片背景色
+ * @group primary
+ * @description 浅/禁用
*/
- --o-color-bg3: #242424;
+ --o-color-primary4-light: rgb(var(--o-blue-1));
/**
- * @name 四级容器背景色
+ * @name
* @type color
- * @group background
- * @description 用于区块、卡片、表头背景色
+ * @group success
+ * @description 常规
*/
- --o-color-bg4: #2e2e2e;
+ --o-color-success1: rgb(var(--o-green-6));
/**
- * @name 标题色
+ * @name
* @type color
- * @group text
- * @description 用于强调、标题颜色
+ * @group success
+ * @description 悬浮
*/
- --o-color-text1: #ffffff;
+ --o-color-success2: rgb(var(--o-green-5));
/**
- * @name 标题反色
+ * @name
* @type color
- * @group text
- * @description 用于强调、标题颜色的反色，例如浅色模式下的深色背景上的标题
+ * @group success
+ * @description 激活
+ */
+ --o-color-success3: rgb(var(--o-green-7));
+ /**
+ * @name
+ * @type color
+ * @group success
+ * @description 禁用
+ */
+ --o-color-success4: rgb(var(--o-green-3));
+ /**
+ * @name
+ * @type color
+ * @group success
+ * @description 浅/常规
*/
- --o-color-text1-inverse: #000000;
+ --o-color-success1-light: rgb(var(--o-green-2));
/**
- * @name 正文色
+ * @name
* @type color
- * @group text
- * @description 用于次强调、次级标题、正文颜色
+ * @group success
+ * @description 浅/悬浮
*/
- --o-color-text2: #e5e5e5;
+ --o-color-success2-light: rgb(var(--o-green-3));
/**
- * @name 正文反色
+ * @name
* @type color
- * @group text
- * @description 用于次强调、次级标题、正文颜色的反色，例如浅色模式下的深色背景上的正文
+ * @group success
+ * @description 浅/激活
*/
- --o-color-text2-inverse: #3f3f3f;
+ --o-color-success3-light: rgb(var(--o-green-4));
/**
- * @name 提示色
+ * @name
* @type color
- * @group text
- * @description 用于提示文本颜色
+ * @group success
+ * @description 浅/禁用
*/
- --o-color-text3: #b2b2b2;
+ --o-color-success4-light: rgb(var(--o-green-1));
/**
- * @name 提示反色
+ * @name
* @type color
- * @group text
- * @description 用于提示文本颜色的反色，例如浅色模式下的深色背景上的提示
+ * @group warning
+ * @description 常规
*/
- --o-color-text3-inverse: #707070;
+ --o-color-warning1: rgb(var(--o-orange-6));
/**
- * @name 置灰色
+ * @name
* @type color
- * @group text
- * @description 用于禁用文本颜色
+ * @group warning
+ * @description 悬浮
*/
- --o-color-text4: #555555;
+ --o-color-warning2: rgb(var(--o-orange-5));
/**
- * @name 置灰反色
+ * @name
* @type color
- * @group text
- * @description 用于禁用文本颜色的反色，例如浅色模式下的深色背景上的禁用文本
+ * @group warning
+ * @description 激活
*/
- --o-color-text4-inverse: #2d2d2d;
+ --o-color-warning3: rgb(var(--o-orange-7));
/**
- * @name 边框色
+ * @name
* @type color
- * @group border
- * @description 较明显的边框
+ * @group warning
+ * @description 禁用
*/
- --o-color-border1: #b2b2b2;
+ --o-color-warning4: rgb(var(--o-orange-3));
/**
- * @name 弱边框色
+ * @name
* @type color
- * @group border
- * @description 较弱的边框
+ * @group warning
+ * @description 浅/常规
*/
- --o-color-border2: #2d2d2d;
+ --o-color-warning1-light: rgb(var(--o-orange-2));
/**
- * @name 分隔线色1
+ * @name
* @type color
- * @group division
- * @description 用于分隔线颜色
+ * @group warning
+ * @description 浅/悬浮
*/
- --o-color-division1: #b2b2b2;
+ --o-color-warning2-light: rgb(var(--o-orange-3));
/**
- * @name 遮罩色1
+ * @name
* @type color
- * @group mask
- * @description 用于弹窗遮罩色
+ * @group warning
+ * @description 浅/激活
*/
- --o-color-mask1: rgba(0, 0, 0, 0.5);
+ --o-color-warning3-light: rgb(var(--o-orange-4));
/**
- * @name 遮罩色2
+ * @name
* @type color
- * @group mask
- * @description 用于loading遮罩色
+ * @group warning
+ * @description 浅/禁用
+ */
+ --o-color-warning4-light: rgb(var(--o-orange-1));
+ /**
+ * @name
+ * @type color
+ * @group danger
+ * @description 常规
+ */
+ --o-color-danger1: rgb(var(--o-red-6));
+ /**
+ * @name
+ * @type color
+ * @group danger
+ * @description 悬浮
+ */
+ --o-color-danger2: rgb(var(--o-red-5));
+ /**
+ * @name
+ * @type color
+ * @group danger
+ * @description 激活
+ */
+ --o-color-danger3: rgb(var(--o-red-7));
+ /**
+ * @name
+ * @type color
+ * @group danger
+ * @description 禁用
+ */
+ --o-color-danger4: rgb(var(--o-red-3));
+ /**
+ * @name
+ * @type color
+ * @group danger
+ * @description 浅/常规
+ */
+ --o-color-danger1-light: rgb(var(--o-red-2));
+ /**
+ * @name
+ * @type color
+ * @group danger
+ * @description 浅/悬浮
+ */
+ --o-color-danger2-light: rgb(var(--o-red-3));
+ /**
+ * @name
+ * @type color
+ * @group danger
+ * @description 浅/激活
+ */
+ --o-color-danger3-light: rgb(var(--o-red-4));
+ /**
+ * @name
+ * @type color
+ * @group danger
+ * @description 浅/禁用
*/
- --o-color-mask2: rgba(0, 0, 0, 0.1);
+ --o-color-danger4-light: rgb(var(--o-red-1));
/**
* @name 阴影1
* @type shadow
* @group shadow
* @description 用于卡片、小弹窗、楼层阴影
*/
- --o-shadow-1: 0 1px 7px rgba(0, 0, 0, 0.3);
+ --o-shadow-1: 0 1px 7px rgba(var(--o-gray-10), 0.3);
/**
* @name 阴影2
* @type shadow
* @group shadow
* @description 用于卡片悬浮阴影
*/
- --o-shadow-2: 0 6px 18px rgba(0, 0, 0, 0.42);
+ --o-shadow-2: 0 6px 18px rgba(var(--o-gray-10), 0.42);
/**
* @name 阴影3
* @type shadow
* @group shadow
* @description 用于提示阴影
*/
- --o-shadow-3: 0 10px 32px rgba(0, 0, 0, 0.54);
+ --o-shadow-3: 0 10px 32px rgba(var(--o-gray-10), 0.54);
/**
* @name 间距1
* @type gap
diff --git a/packages/opendesign/src/components/style/default-light.token.css b/packages/opendesign/src/components/style/default-light.token.css
index 6985f044064d6db9ee77eeb667be9d6fa950bc59..0f947c26b12ef5f01f15a8f53d9fb0ebbddc8471 100644
--- a/packages/opendesign/src/components/style/default-light.token.css
+++ b/packages/opendesign/src/components/style/default-light.token.css
@@ -2,320 +2,894 @@
:root,
:root[theme="light"] {
/**
- * @name 常规色
+ * @name
+ * @type palette
+ * @group blue
+ * @description
+ */
+ --o-blue-1: 232, 243, 255;
+ /**
+ * @name
+ * @type palette
+ * @group blue
+ * @description
+ */
+ --o-blue-2: 190, 218, 255;
+ /**
+ * @name
+ * @type palette
+ * @group blue
+ * @description
+ */
+ --o-blue-3: 148, 191, 255;
+ /**
+ * @name
+ * @type palette
+ * @group blue
+ * @description
+ */
+ --o-blue-4: 106, 161, 255;
+ /**
+ * @name
+ * @type palette
+ * @group blue
+ * @description
+ */
+ --o-blue-5: 64, 128, 255;
+ /**
+ * @name
+ * @type palette
+ * @group blue
+ * @description
+ */
+ --o-blue-6: 22, 93, 255;
+ /**
+ * @name
+ * @type palette
+ * @group blue
+ * @description
+ */
+ --o-blue-7: 14, 66, 210;
+ /**
+ * @name
+ * @type palette
+ * @group blue
+ * @description
+ */
+ --o-blue-8: 7, 44, 166;
+ /**
+ * @name
+ * @type palette
+ * @group blue
+ * @description
+ */
+ --o-blue-9: 3, 26, 121;
+ /**
+ * @name
+ * @type palette
+ * @group blue
+ * @description
+ */
+ --o-blue-10: 0, 13, 77;
+ /**
+ * @name
+ * @type palette
+ * @group yellow
+ * @description
+ */
+ --o-yellow-1: 254, 255, 232;
+ /**
+ * @name
+ * @type palette
+ * @group yellow
+ * @description
+ */
+ --o-yellow-2: 254, 254, 190;
+ /**
+ * @name
+ * @type palette
+ * @group yellow
+ * @description
+ */
+ --o-yellow-3: 253, 250, 148;
+ /**
+ * @name
+ * @type palette
+ * @group yellow
+ * @description
+ */
+ --o-yellow-4: 252, 242, 107;
+ /**
+ * @name
+ * @type palette
+ * @group yellow
+ * @description
+ */
+ --o-yellow-5: 251, 232, 66;
+ /**
+ * @name
+ * @type palette
+ * @group yellow
+ * @description
+ */
+ --o-yellow-6: 250, 220, 25;
+ /**
+ * @name
+ * @type palette
+ * @group yellow
+ * @description
+ */
+ --o-yellow-7: 207, 175, 15;
+ /**
+ * @name
+ * @type palette
+ * @group yellow
+ * @description
+ */
+ --o-yellow-8: 163, 132, 8;
+ /**
+ * @name
+ * @type palette
+ * @group yellow
+ * @description
+ */
+ --o-yellow-9: 120, 93, 3;
+ /**
+ * @name
+ * @type palette
+ * @group yellow
+ * @description
+ */
+ --o-yellow-10: 77, 56, 0;
+ /**
+ * @name
+ * @type palette
+ * @group green
+ * @description
+ */
+ --o-green-1: 232, 255, 234;
+ /**
+ * @name
+ * @type palette
+ * @group green
+ * @description
+ */
+ --o-green-2: 175, 240, 181;
+ /**
+ * @name
+ * @type palette
+ * @group green
+ * @description
+ */
+ --o-green-3: 123, 225, 136;
+ /**
+ * @name
+ * @type palette
+ * @group green
+ * @description
+ */
+ --o-green-4: 76, 210, 99;
+ /**
+ * @name
+ * @type palette
+ * @group green
+ * @description
+ */
+ --o-green-5: 35, 195, 67;
+ /**
+ * @name
+ * @type palette
+ * @group green
+ * @description
+ */
+ --o-green-6: 0, 180, 42;
+ /**
+ * @name
+ * @type palette
+ * @group green
+ * @description
+ */
+ --o-green-7: 0, 154, 41;
+ /**
+ * @name
+ * @type palette
+ * @group green
+ * @description
+ */
+ --o-green-8: 0, 128, 38;
+ /**
+ * @name
+ * @type palette
+ * @group green
+ * @description
+ */
+ --o-green-9: 0, 102, 34;
+ /**
+ * @name
+ * @type palette
+ * @group green
+ * @description
+ */
+ --o-green-10: 0, 77, 28;
+ /**
+ * @name
+ * @type palette
+ * @group orange
+ * @description
+ */
+ --o-orange-1: 255, 247, 232;
+ /**
+ * @name
+ * @type palette
+ * @group orange
+ * @description
+ */
+ --o-orange-2: 255, 228, 186;
+ /**
+ * @name
+ * @type palette
+ * @group orange
+ * @description
+ */
+ --o-orange-3: 255, 207, 139;
+ /**
+ * @name
+ * @type palette
+ * @group orange
+ * @description
+ */
+ --o-orange-4: 255, 182, 93;
+ /**
+ * @name
+ * @type palette
+ * @group orange
+ * @description
+ */
+ --o-orange-5: 255, 154, 46;
+ /**
+ * @name
+ * @type palette
+ * @group orange
+ * @description
+ */
+ --o-orange-6: 255, 125, 0;
+ /**
+ * @name
+ * @type palette
+ * @group orange
+ * @description
+ */
+ --o-orange-7: 210, 95, 0;
+ /**
+ * @name
+ * @type palette
+ * @group orange
+ * @description
+ */
+ --o-orange-8: 166, 69, 0;
+ /**
+ * @name
+ * @type palette
+ * @group orange
+ * @description
+ */
+ --o-orange-9: 121, 46, 0;
+ /**
+ * @name
+ * @type palette
+ * @group orange
+ * @description
+ */
+ --o-orange-10: 77, 27, 0;
+ /**
+ * @name
+ * @type palette
+ * @group red
+ * @description
+ */
+ --o-red-1: 255, 236, 232;
+ /**
+ * @name
+ * @type palette
+ * @group red
+ * @description
+ */
+ --o-red-2: 253, 205, 197;
+ /**
+ * @name
+ * @type palette
+ * @group red
+ * @description
+ */
+ --o-red-3: 251, 172, 163;
+ /**
+ * @name
+ * @type palette
+ * @group red
+ * @description
+ */
+ --o-red-4: 249, 137, 129;
+ /**
+ * @name
+ * @type palette
+ * @group red
+ * @description
+ */
+ --o-red-5: 247, 101, 96;
+ /**
+ * @name
+ * @type palette
+ * @group red
+ * @description
+ */
+ --o-red-6: 245, 63, 63;
+ /**
+ * @name
+ * @type palette
+ * @group red
+ * @description
+ */
+ --o-red-7: 203, 39, 45;
+ /**
+ * @name
+ * @type palette
+ * @group red
+ * @description
+ */
+ --o-red-8: 161, 21, 30;
+ /**
+ * @name
+ * @type palette
+ * @group red
+ * @description
+ */
+ --o-red-9: 119, 8, 19;
+ /**
+ * @name
+ * @type palette
+ * @group red
+ * @description
+ */
+ --o-red-10: 77, 0, 10;
+ /**
+ * @name
+ * @type palette
+ * @group gray
+ * @description
+ */
+ --o-gray-1: 255, 255, 255;
+ /**
+ * @name
+ * @type palette
+ * @group gray
+ * @description
+ */
+ --o-gray-2: 238, 238, 238;
+ /**
+ * @name
+ * @type palette
+ * @group gray
+ * @description
+ */
+ --o-gray-3: 221, 221, 221;
+ /**
+ * @name
+ * @type palette
+ * @group gray
+ * @description
+ */
+ --o-gray-4: 198, 198, 198;
+ /**
+ * @name
+ * @type palette
+ * @group gray
+ * @description
+ */
+ --o-gray-5: 139, 139, 139;
+ /**
+ * @name
+ * @type palette
+ * @group gray
+ * @description
+ */
+ --o-gray-6: 119, 119, 119;
+ /**
+ * @name
+ * @type palette
+ * @group gray
+ * @description
+ */
+ --o-gray-7: 94, 94, 94;
+ /**
+ * @name
+ * @type palette
+ * @group gray
+ * @description
+ */
+ --o-gray-8: 75, 75, 75;
+ /**
+ * @name
+ * @type palette
+ * @group gray
+ * @description
+ */
+ --o-gray-9: 44, 44, 44;
+ /**
+ * @name
+ * @type palette
+ * @group gray
+ * @description
+ */
+ --o-gray-10: 0, 0, 0;
+ /**
+ * @name
+ * @type palette
+ * @group mixedgray
+ * @description
+ */
+ --o-mixedgray-1: 247, 248, 250;
+ /**
+ * @name
+ * @type palette
+ * @group mixedgray
+ * @description
+ */
+ --o-mixedgray-2: 242, 243, 245;
+ /**
+ * @name
+ * @type palette
+ * @group mixedgray
+ * @description
+ */
+ --o-mixedgray-3: 229, 230, 235;
+ /**
+ * @name
+ * @type palette
+ * @group mixedgray
+ * @description
+ */
+ --o-mixedgray-4: 201, 205, 212;
+ /**
+ * @name
+ * @type palette
+ * @group mixedgray
+ * @description
+ */
+ --o-mixedgray-5: 169, 174, 184;
+ /**
+ * @name
+ * @type palette
+ * @group mixedgray
+ * @description
+ */
+ --o-mixedgray-6: 134, 144, 156;
+ /**
+ * @name
+ * @type palette
+ * @group mixedgray
+ * @description
+ */
+ --o-mixedgray-7: 107, 119, 133;
+ /**
+ * @name
+ * @type palette
+ * @group mixedgray
+ * @description
+ */
+ --o-mixedgray-8: 78, 89, 105;
+ /**
+ * @name
+ * @type palette
+ * @group mixedgray
+ * @description
+ */
+ --o-mixedgray-9: 39, 46, 59;
+ /**
+ * @name
+ * @type palette
+ * @group mixedgray
+ * @description
+ */
+ --o-mixedgray-10: 29, 33, 41;
+ /**
+ * @name
* @type color
- * @group primary
- * @description 用于按钮、文本、链接强调状态时常规颜色
+ * @group info
+ * @description 一级/强调/标题
*/
- --o-color-primary1: #002fa7;
+ --o-color-info1: rgb(var(--o-gray-10));
/**
- * @name 悬浮色
+ * @name
* @type color
- * @group primary
- * @description 用于按钮、文本、链接强调状态时悬浮颜色
+ * @group info
+ * @description 二级/次强调/正文
*/
- --o-color-primary2: #406fe7;
+ --o-color-info2: rgb(var(--o-gray-8));
/**
- * @name 聚焦色
+ * @name
* @type color
- * @group primary
- * @description 用于按钮、文本、链接强调状态时聚焦颜色
+ * @group info
+ * @description 三级/辅助信息
*/
- --o-color-primary3: #00288d;
+ --o-color-info3: rgb(var(--o-gray-6));
/**
- * @name 禁用色
+ * @name
* @type color
- * @group primary
- * @description 用于按钮、文本、链接强调状态时禁用颜色
+ * @group info
+ * @description 置灰/禁用
+ */
+ --o-color-info4: rgb(var(--o-gray-4));
+ /**
+ * @name
+ * @type color
+ * @group info
+ * @description 一级/次强调/正文反色
*/
- --o-color-primary4: #b2c0e4;
+ --o-color-info1-inverse: rgb(var(--o-gray-1));
/**
- * @name 常规色
+ * @name
* @type color
- * @group major
- * @description 用于按钮、文本、链接major状态时文本颜色
+ * @group info
+ * @description 二级/辅助信息反色
*/
- --o-color-major1: #feb32a;
+ --o-color-info2-inverse: rgb(var(--o-gray-3));
/**
- * @name 常规色
+ * @name
* @type color
- * @group normal
- * @description 用于按钮、文本、链接常态时常规颜色
+ * @group info
+ * @description 三级/辅助信息反色
*/
- --o-color-normal1: var(--o-color-info1);
+ --o-color-info3-inverse: rgb(var(--o-gray-5));
/**
- * @name 悬浮色
+ * @name
* @type color
- * @group normal
- * @description 用于按钮、文本、链接常态时悬浮颜色
+ * @group info
+ * @description 置灰/禁用反色
*/
- --o-color-normal2: var(--o-color-primary2);
+ --o-color-info4-inverse: rgb(var(--o-gray-7));
/**
- * @name 聚焦色
+ * @name
* @type color
- * @group normal
- * @description 用于按钮、文本、链接常态时聚焦颜色
+ * @group mask
+ * @description 全局遮罩
*/
- --o-color-normal3: var(--o-color-primary3);
+ --o-color-mask1: rgba(var(--o-gray-10), .2);
/**
- * @name 禁用色
+ * @name
* @type color
- * @group normal
- * @description 用于按钮、文本、链接常态时禁用颜色
+ * @group mask
+ * @description 局部遮罩
*/
- --o-color-normal4: var(--o-color-info4);
+ --o-color-mask2: rgba(var(--o-gray-10), .1);
/**
- * @name 常规色
+ * @name
* @type color
- * @group success
- * @description 用于按钮、文本、链接成功状态时常规颜色
+ * @group fill
+ * @description 一级填充/页面背景
*/
- --o-color-success1: #6dc335;
+ --o-color-fill1: rgb(var(--o-mixedgray-1));
/**
- * @name 悬浮色
+ * @name
* @type color
- * @group success
- * @description 用于按钮、文本、链接成功状态时悬浮颜色
+ * @group fill
+ * @description 二级填充/区块、卡片
*/
- --o-color-success2: #93e95b;
+ --o-color-fill2: rgb(var(--o-gray-1));
/**
- * @name 聚焦色
+ * @name
* @type color
- * @group success
- * @description 用于按钮、文本、链接成功状态时聚焦颜色
+ * @group fill
+ * @description 三级填充/卡片
*/
- --o-color-success3: #62af30;
+ --o-color-fill3: rgb(var(--o-mixedgray-3));
/**
- * @name 禁用色
+ * @name
* @type color
- * @group success
- * @description 用于按钮、文本、链接成功状态时禁用颜色
+ * @group fill
+ * @description 四级填充/禁用
*/
- --o-color-success4: #c5e7ae;
+ --o-color-fill4: rgb(var(--o-mixedgray-4));
/**
- * @name 常规色
+ * @name
* @type color
- * @group warning
- * @description 用于按钮、文本、链接告警状态时常规颜色
+ * @group control
+ * @description 常规
*/
- --o-color-warning1: #ff8e36;
+ --o-color-control1: rgb(var(--o-mixedgray-3));
/**
- * @name 悬浮色
+ * @name
* @type color
- * @group warning
- * @description 用于按钮、文本、链接告警状态时悬浮颜色
+ * @group control
+ * @description 悬浮
*/
- --o-color-warning2: #ffb45c;
+ --o-color-control2: rgb(var(--o-mixedgray-4));
/**
- * @name 聚焦色
+ * @name
* @type color
- * @group warning
- * @description 用于按钮、文本、链接告警状态时聚焦颜色
+ * @group control
+ * @description 激活
*/
- --o-color-warning3: #ff801c;
+ --o-color-control3: rgb(var(--o-mixedgray-6));
/**
- * @name 禁用色
+ * @name
* @type color
- * @group warning
- * @description 用于按钮、文本、链接告警状态时禁用颜色
+ * @group control
+ * @description 禁用
*/
- --o-color-warning4: #ffd2af;
+ --o-color-control4: rgb(var(--o-mixedgray-5));
/**
- * @name 常规色
+ * @name
* @type color
- * @group danger
- * @description 用于按钮、文本、链接错误状态时常规颜色
+ * @group control
+ * @description 浅/控件常规
*/
- --o-color-danger1: #f3524d;
+ --o-color-control1-light: rgb(var(--o-mixedgray-3));
/**
- * @name 悬浮色
+ * @name
* @type color
- * @group danger
- * @description 用于按钮、文本、链接错误状态时悬浮颜色
+ * @group control
+ * @description 浅/控件悬浮
*/
- --o-color-danger2: #ff7873;
+ --o-color-control2-light: rgb(var(--o-mixedgray-4));
/**
- * @name 聚焦色
+ * @name
* @type color
- * @group danger
- * @description 用于按钮、文本、链接错误状态时聚焦颜色
+ * @group control
+ * @description 浅/控件激活
*/
- --o-color-danger3: #f13b35;
+ --o-color-control3-light: rgb(var(--o-mixedgray-5));
/**
- * @name 禁用色
+ * @name
* @type color
- * @group danger
- * @description 用于按钮、文本、链接错误状态时禁用颜色
+ * @group control
+ * @description 浅/控件禁用
*/
- --o-color-danger4: #fabab8;
+ --o-color-control4-light: rgb(var(--o-mixedgray-2));
/**
- * @name 常规色
+ * @name
* @type color
- * @group info
- * @description 用于按钮、文本、链接信息状态时常规颜色
+ * @group primary
+ * @description 常规
*/
- --o-color-info1: #e5e5e5;
+ --o-color-primary1: rgb(var(--o-blue-6));
/**
- * @name 悬浮色
+ * @name
* @type color
- * @group info
- * @description 用于按钮、文本、链接信息状态时悬浮颜色
+ * @group primary
+ * @description 悬浮
*/
- --o-color-info2: #e5e8f0;
+ --o-color-primary2: rgb(var(--o-blue-5));
/**
- * @name 聚焦色
+ * @name
* @type color
- * @group info
- * @description 用于按钮、文本、链接信息状态时聚焦颜色
+ * @group primary
+ * @description 激活
*/
- --o-color-info3: #cccccc;
+ --o-color-primary3: rgb(var(--o-blue-7));
/**
- * @name 禁用色
+ * @name
* @type color
- * @group info
- * @description 用于按钮、文本、链接信息状态时禁用颜色
+ * @group primary
+ * @description 禁用
+ */
+ --o-color-primary4: rgb(var(--o-blue-3));
+ /**
+ * @name
+ * @type color
+ * @group primary
+ * @description 浅/常规
*/
- --o-color-info4: #f7f8fa;
+ --o-color-primary1-light: rgb(var(--o-blue-2));
/**
- * @name 一级容器背景色
+ * @name
* @type color
- * @group background
- * @description 用于页面整体背景色
+ * @group primary
+ * @description 浅/悬浮
*/
- --o-color-bg1: #f5f6f8;
+ --o-color-primary2-light: rgb(var(--o-blue-3));
/**
- * @name 二级容器背景色
+ * @name
* @type color
- * @group background
- * @description 用于区块、卡片、弹出框、tooltip背景色
+ * @group primary
+ * @description 浅/激活
*/
- --o-color-bg2: #ffffff;
+ --o-color-primary3-light: rgb(var(--o-blue-4));
/**
- * @name 三级容器背景色
+ * @name
* @type color
- * @group background
- * @description 用于区块卡片背景色
+ * @group primary
+ * @description 浅/禁用
*/
- --o-color-bg3: #f7f8fa;
+ --o-color-primary4-light: rgb(var(--o-blue-1));
/**
- * @name 四级容器背景色
+ * @name
* @type color
- * @group background
- * @description 用于区块、卡片、表头背景色
+ * @group success
+ * @description 常规
*/
- --o-color-bg4: #e5e8f0;
+ --o-color-success1: rgb(var(--o-green-6));
/**
- * @name 标题色
+ * @name
* @type color
- * @group text
- * @description 用于强调、标题颜色
+ * @group success
+ * @description 悬浮
*/
- --o-color-text1: #000000;
+ --o-color-success2: rgb(var(--o-green-5));
/**
- * @name 标题反色
+ * @name
* @type color
- * @group text
- * @description 用于强调、标题颜色的反色，例如浅色模式下的深色背景上的标题
+ * @group success
+ * @description 激活
+ */
+ --o-color-success3: rgb(var(--o-green-7));
+ /**
+ * @name
+ * @type color
+ * @group success
+ * @description 禁用
+ */
+ --o-color-success4: rgb(var(--o-green-3));
+ /**
+ * @name
+ * @type color
+ * @group success
+ * @description 浅/常规
*/
- --o-color-text1-inverse: #ffffff;
+ --o-color-success1-light: rgb(var(--o-green-2));
/**
- * @name 正文色
+ * @name
* @type color
- * @group text
- * @description 用于次强调、次级标题、正文颜色
+ * @group success
+ * @description 浅/悬浮
*/
- --o-color-text2: #3f3f3f;
+ --o-color-success2-light: rgb(var(--o-green-3));
/**
- * @name 正文反色
+ * @name
* @type color
- * @group text
- * @description 用于次强调、次级标题、正文颜色的反色，例如浅色模式下的深色背景上的正文
+ * @group success
+ * @description 浅/激活
*/
- --o-color-text2-inverse: #e5e5e5;
+ --o-color-success3-light: rgb(var(--o-green-4));
/**
- * @name 提示色
+ * @name
* @type color
- * @group text
- * @description 用于提示文本颜色
+ * @group success
+ * @description 浅/禁用
*/
- --o-color-text3: #707070;
+ --o-color-success4-light: rgb(var(--o-green-1));
/**
- * @name 提示反色
+ * @name
* @type color
- * @group text
- * @description 用于提示文本颜色的反色，例如浅色模式下的深色背景上的提示
+ * @group warning
+ * @description 常规
*/
- --o-color-text3-inverse: #b2b2b2;
+ --o-color-warning1: rgb(var(--o-orange-6));
/**
- * @name 置灰色
+ * @name
* @type color
- * @group text
- * @description 用于禁用文本颜色
+ * @group warning
+ * @description 悬浮
*/
- --o-color-text4: #cccccc;
+ --o-color-warning2: rgb(var(--o-orange-5));
/**
- * @name 置灰反色
+ * @name
* @type color
- * @group text
- * @description 用于禁用文本颜色的反色，例如浅色模式下的深色背景上的禁用文本
+ * @group warning
+ * @description 激活
*/
- --o-color-text4-inverse: #e5e5e5;
+ --o-color-warning3: rgb(var(--o-orange-7));
/**
- * @name 边框色
+ * @name
* @type color
- * @group border
- * @description 较明显的边框
+ * @group warning
+ * @description 禁用
*/
- --o-color-border1: #707070;
+ --o-color-warning4: rgb(var(--o-orange-3));
/**
- * @name 弱边框色
+ * @name
* @type color
- * @group border
- * @description 较弱的边框
+ * @group warning
+ * @description 浅/常规
*/
- --o-color-border2: #e5e5e5;
+ --o-color-warning1-light: rgb(var(--o-orange-2));
/**
- * @name 分隔线色1
+ * @name
* @type color
- * @group division
- * @description 用于分隔线颜色
+ * @group warning
+ * @description 浅/悬浮
*/
- --o-color-division1: #707070;
+ --o-color-warning2-light: rgb(var(--o-orange-3));
/**
- * @name 遮罩色1
+ * @name
* @type color
- * @group mask
- * @description 用于弹窗遮罩色
+ * @group warning
+ * @description 浅/激活
*/
- --o-color-mask1: rgba(0, 0, 0, 0.5);
+ --o-color-warning3-light: rgb(var(--o-orange-4));
/**
- * @name 遮罩色2
+ * @name
* @type color
- * @group mask
- * @description 用于loading遮罩色
+ * @group warning
+ * @description 浅/禁用
+ */
+ --o-color-warning4-light: rgb(var(--o-orange-1));
+ /**
+ * @name
+ * @type color
+ * @group danger
+ * @description 常规
+ */
+ --o-color-danger1: rgb(var(--o-red-6));
+ /**
+ * @name
+ * @type color
+ * @group danger
+ * @description 悬浮
+ */
+ --o-color-danger2: rgb(var(--o-red-5));
+ /**
+ * @name
+ * @type color
+ * @group danger
+ * @description 激活
+ */
+ --o-color-danger3: rgb(var(--o-red-7));
+ /**
+ * @name
+ * @type color
+ * @group danger
+ * @description 禁用
+ */
+ --o-color-danger4: rgb(var(--o-red-3));
+ /**
+ * @name
+ * @type color
+ * @group danger
+ * @description 浅/常规
+ */
+ --o-color-danger1-light: rgb(var(--o-red-2));
+ /**
+ * @name
+ * @type color
+ * @group danger
+ * @description 浅/悬浮
+ */
+ --o-color-danger2-light: rgb(var(--o-red-3));
+ /**
+ * @name
+ * @type color
+ * @group danger
+ * @description 浅/激活
+ */
+ --o-color-danger3-light: rgb(var(--o-red-4));
+ /**
+ * @name
+ * @type color
+ * @group danger
+ * @description 浅/禁用
*/
- --o-color-mask2: rgba(0, 0, 0, 0.1);
+ --o-color-danger4-light: rgb(var(--o-red-1));
/**
* @name 阴影1
* @type shadow
* @group shadow
* @description 用于卡片、小弹窗、楼层阴影
*/
- --o-shadow-1: 0 1px 5px rgba(45, 47, 51, 0.1);
+ --o-shadow-1: 0 1px 5px rgba(var(--o-gray-10), 0.1);
/**
* @name 阴影2
* @type shadow
* @group shadow
* @description 用于卡片悬浮阴影
*/
- --o-shadow-2: 0 6px 18px rgba(0, 47, 167, 0.14);
+ --o-shadow-2: 0 6px 18px rgba(var(--o-gray-10), 0.14);
/**
* @name 阴影3
* @type shadow
* @group shadow
* @description 用于提示阴影
*/
- --o-shadow-3: 0 10px 32px rgba(45, 47, 51, 0.18);
+ --o-shadow-3: 0 10px 32px rgba(var(--o-gray-10), 0.18);
/**
* @name 间距1
* @type gap
diff --git a/packages/opendesign/src/components/switch/style/index.scss b/packages/opendesign/src/components/switch/style/index.scss
index f8a15e73de78874f0658cc91d3c1338f4917c2b6..9642e003841e5c23ce2e06f4adfd4e6494e3d980 100644
--- a/packages/opendesign/src/components/switch/style/index.scss
+++ b/packages/opendesign/src/components/switch/style/index.scss
@@ -64,7 +64,7 @@
}
}
-.o-switch-size-normal {
+.o-switch-size-medium {
min-width: 40px;
height: 20px;
border-radius: 2px;
@@ -94,7 +94,7 @@
}
}
-.o-switch-size-normal.o-switch-shape-round {
+.o-switch-size-medium.o-switch-shape-round {
border-radius: 10px;
}
diff --git a/packages/opendesign/src/components/tag/style/index.scss b/packages/opendesign/src/components/tag/style/index.scss
index 18bb1c1a00f52b01a6d385158d25a15a0d4d5190..2476fe195fffe3d9ba41e7f40400849701fdb695 100644
--- a/packages/opendesign/src/components/tag/style/index.scss
+++ b/packages/opendesign/src/components/tag/style/index.scss
@@ -23,7 +23,7 @@
--tag-radius: var(--tag-radius-s);
}
-.o-tag-size-normal {
+.o-tag-size-medium {
--tag-padding: 4px 15px;
--tag-height: var(--tag-height-m);
--tag-radius: var(--tag-radius-m);
diff --git a/packages/opendesign/src/components/textarea/style/index.scss b/packages/opendesign/src/components/textarea/style/index.scss
index 1ce6ab2769e4c1fa992d7eabbfee18af7a200828..491ac990e9885cd077d8c147ca7c05603b323a42 100644
--- a/packages/opendesign/src/components/textarea/style/index.scss
+++ b/packages/opendesign/src/components/textarea/style/index.scss
@@ -131,7 +131,7 @@
--textarea-radius: 12px;
}
}
-.o-textarea-size-normal {
+.o-textarea-size-medium {
--textarea-text-size: var(--textarea-text-size-m);
--textarea-text-height: var(--textarea-text-height-m);
--textarea-padding-v: 4px;
diff --git a/packages/opendesign/src/tokens/opendesign-token.json b/packages/opendesign/src/tokens/opendesign-token.json
new file mode 100644
index 0000000000000000000000000000000000000000..74b6839efdb831f456c8bf8a6fbc09fc41614dc7
--- /dev/null
+++ b/packages/opendesign/src/tokens/opendesign-token.json
@@ -0,0 +1,1666 @@
+{
+ "blue": {
+ "name": "蓝色",
+ "type": "palette",
+ "typeName": "色盘",
+ "value": [
+ {
+ "key": "blue-1",
+ "colorType": "Blue",
+ "value": {
+ "light": "232, 243, 255",
+ "dark": "0, 13, 77"
+ }
+ },
+ {
+ "key": "blue-2",
+ "colorType": "Blue",
+ "value": {
+ "light": "190, 218, 255",
+ "dark": "4, 27, 121"
+ }
+ },
+ {
+ "key": "blue-3",
+ "colorType": "Blue",
+ "value": {
+ "light": "148, 191, 255",
+ "dark": "14, 50, 166"
+ }
+ },
+ {
+ "key": "blue-4",
+ "colorType": "Blue",
+ "value": {
+ "light": "106, 161, 255",
+ "dark": "29, 77, 210"
+ }
+ },
+ {
+ "key": "blue-5",
+ "colorType": "Blue",
+ "value": {
+ "light": "64, 128, 255",
+ "dark": "48, 111, 255"
+ }
+ },
+ {
+ "key": "blue-6",
+ "colorType": "Blue",
+ "value": {
+ "light": "22, 93, 255",
+ "dark": "60, 126, 255"
+ }
+ },
+ {
+ "key": "blue-7",
+ "colorType": "Blue",
+ "value": {
+ "light": "14, 66, 210",
+ "dark": "104, 159, 255"
+ }
+ },
+ {
+ "key": "blue-8",
+ "colorType": "Blue",
+ "value": {
+ "light": "7, 44, 166",
+ "dark": "147, 190, 255"
+ }
+ },
+ {
+ "key": "blue-9",
+ "colorType": "Blue",
+ "value": {
+ "light": "3, 26, 121",
+ "dark": "190, 218, 255"
+ }
+ },
+ {
+ "key": "blue-10",
+ "colorType": "Blue",
+ "value": {
+ "light": "0, 13, 77",
+ "dark": "234, 244, 255"
+ }
+ }
+ ]
+ },
+ "yellow": {
+ "name": "黄色",
+ "type": "palette",
+ "typeName": "色盘",
+ "value": [
+ {
+ "key": "yellow-1",
+ "colorType": "Yellow",
+ "value": {
+ "light": "254, 255, 232",
+ "dark": "77, 56, 0"
+ }
+ },
+ {
+ "key": "yellow-2",
+ "colorType": "Yellow",
+ "value": {
+ "light": "254, 254, 190",
+ "dark": "120, 94, 7"
+ }
+ },
+ {
+ "key": "yellow-3",
+ "colorType": "Yellow",
+ "value": {
+ "light": "253, 250, 148",
+ "dark": "163, 134, 20"
+ }
+ },
+ {
+ "key": "yellow-4",
+ "colorType": "Yellow",
+ "value": {
+ "light": "252, 242, 107",
+ "dark": "207, 179, 37"
+ }
+ },
+ {
+ "key": "yellow-5",
+ "colorType": "Yellow",
+ "value": {
+ "light": "251, 232, 66",
+ "dark": "250, 225, 60"
+ }
+ },
+ {
+ "key": "yellow-6",
+ "colorType": "Yellow",
+ "value": {
+ "light": "250, 220, 25",
+ "dark": "251, 233, 75"
+ }
+ },
+ {
+ "key": "yellow-7",
+ "colorType": "Yellow",
+ "value": {
+ "light": "207, 175, 15",
+ "dark": "252, 243, 116"
+ }
+ },
+ {
+ "key": "yellow-8",
+ "colorType": "Yellow",
+ "value": {
+ "light": "163, 132, 8",
+ "dark": "253, 250, 157"
+ }
+ },
+ {
+ "key": "yellow-9",
+ "colorType": "Yellow",
+ "value": {
+ "light": "120, 93, 3",
+ "dark": "254, 254, 198"
+ }
+ },
+ {
+ "key": "yellow-10",
+ "colorType": "Yellow",
+ "value": {
+ "light": "77, 56, 0",
+ "dark": "254, 255, 240"
+ }
+ }
+ ]
+ },
+ "green": {
+ "name": "绿色",
+ "type": "palette",
+ "typeName": "色盘",
+ "value": [
+ {
+ "key": "green-1",
+ "colorType": "Green",
+ "value": {
+ "light": "232, 255, 234",
+ "dark": "0, 77, 28"
+ }
+ },
+ {
+ "key": "green-2",
+ "colorType": "Green",
+ "value": {
+ "light": "175, 240, 181",
+ "dark": "4, 102, 37"
+ }
+ },
+ {
+ "key": "green-3",
+ "colorType": "Green",
+ "value": {
+ "light": "123, 225, 136",
+ "dark": "10, 128, 45"
+ }
+ },
+ {
+ "key": "green-4",
+ "colorType": "Green",
+ "value": {
+ "light": "76, 210, 99",
+ "dark": "18, 154, 55"
+ }
+ },
+ {
+ "key": "green-5",
+ "colorType": "Green",
+ "value": {
+ "light": "35, 195, 67",
+ "dark": "29, 180, 64"
+ }
+ },
+ {
+ "key": "green-6",
+ "colorType": "Green",
+ "value": {
+ "light": "0, 180, 42",
+ "dark": "39, 195, 70"
+ }
+ },
+ {
+ "key": "green-7",
+ "colorType": "Green",
+ "value": {
+ "light": "0, 154, 41",
+ "dark": "80, 210, 102"
+ }
+ },
+ {
+ "key": "green-8",
+ "colorType": "Green",
+ "value": {
+ "light": "0, 128, 38",
+ "dark": "126, 225, 139"
+ }
+ },
+ {
+ "key": "green-9",
+ "colorType": "Green",
+ "value": {
+ "light": "0, 102, 34",
+ "dark": "178, 240, 183"
+ }
+ },
+ {
+ "key": "green-10",
+ "colorType": "Green",
+ "value": {
+ "light": "0, 77, 28",
+ "dark": "235, 255, 236"
+ }
+ }
+ ]
+ },
+ "orange": {
+ "name": "橘红色",
+ "type": "palette",
+ "typeName": "色盘",
+ "value": [
+ {
+ "key": "orange-1",
+ "colorType": "Orange",
+ "value": {
+ "light": "255, 247, 232",
+ "dark": "77, 27, 0"
+ }
+ },
+ {
+ "key": "orange-2",
+ "colorType": "Orange",
+ "value": {
+ "light": "255, 228, 186",
+ "dark": "121, 48, 4"
+ }
+ },
+ {
+ "key": "orange-3",
+ "colorType": "Orange",
+ "value": {
+ "light": "255, 207, 139",
+ "dark": "166, 75, 10"
+ }
+ },
+ {
+ "key": "orange-4",
+ "colorType": "Orange",
+ "value": {
+ "light": "255, 182, 93",
+ "dark": "210, 105, 19"
+ }
+ },
+ {
+ "key": "orange-5",
+ "colorType": "Orange",
+ "value": {
+ "light": "255, 154, 46",
+ "dark": "255, 141, 31"
+ }
+ },
+ {
+ "key": "orange-6",
+ "colorType": "Orange",
+ "value": {
+ "light": "255, 125, 0",
+ "dark": "255, 150, 38"
+ }
+ },
+ {
+ "key": "orange-7",
+ "colorType": "Orange",
+ "value": {
+ "light": "210, 95, 0",
+ "dark": "255, 179, 87"
+ }
+ },
+ {
+ "key": "orange-8",
+ "colorType": "Orange",
+ "value": {
+ "light": "166, 69, 0",
+ "dark": "255, 205, 135"
+ }
+ },
+ {
+ "key": "orange-9",
+ "colorType": "Orange",
+ "value": {
+ "light": "121, 46, 0",
+ "dark": "255, 227, 184"
+ }
+ },
+ {
+ "key": "orange-10",
+ "colorType": "Orange",
+ "value": {
+ "light": "77, 27, 0",
+ "dark": "255, 247, 232"
+ }
+ }
+ ]
+ },
+ "red": {
+ "name": "红色",
+ "type": "palette",
+ "typeName": "色盘",
+ "value": [
+ {
+ "key": "red-1",
+ "colorType": "Red",
+ "value": {
+ "light": "255, 236, 232",
+ "dark": "77, 0, 10"
+ }
+ },
+ {
+ "key": "red-2",
+ "colorType": "Red",
+ "value": {
+ "light": "253, 205, 197",
+ "dark": "119, 6, 17"
+ }
+ },
+ {
+ "key": "red-3",
+ "colorType": "Red",
+ "value": {
+ "light": "251, 172, 163",
+ "dark": "161, 22, 31"
+ }
+ },
+ {
+ "key": "red-4",
+ "colorType": "Red",
+ "value": {
+ "light": "249, 137, 129",
+ "dark": "203, 46, 52"
+ }
+ },
+ {
+ "key": "red-5",
+ "colorType": "Red",
+ "value": {
+ "light": "247, 101, 96",
+ "dark": "245, 78, 78"
+ }
+ },
+ {
+ "key": "red-6",
+ "colorType": "Red",
+ "value": {
+ "light": "245, 63, 63",
+ "dark": "247, 105, 101"
+ }
+ },
+ {
+ "key": "red-7",
+ "colorType": "Red",
+ "value": {
+ "light": "203, 39, 45",
+ "dark": "249, 141, 134"
+ }
+ },
+ {
+ "key": "red-8",
+ "colorType": "Red",
+ "value": {
+ "light": "161, 21, 30",
+ "dark": "251, 176, 167"
+ }
+ },
+ {
+ "key": "red-9",
+ "colorType": "Red",
+ "value": {
+ "light": "119, 8, 19",
+ "dark": "253, 209, 202"
+ }
+ },
+ {
+ "key": "red-10",
+ "colorType": "Red",
+ "value": {
+ "light": "77, 0, 10",
+ "dark": "255, 240, 236"
+ }
+ }
+ ]
+ },
+ "gray": {
+ "name": "中性灰",
+ "type": "palette",
+ "typeName": "色盘",
+ "value": [
+ {
+ "key": "gray-1",
+ "colorType": "Gray",
+ "value": {
+ "light": "255, 255, 255",
+ "dark": "0, 0, 0"
+ }
+ },
+ {
+ "key": "gray-2",
+ "colorType": "Gray",
+ "value": {
+ "light": "238, 238, 238",
+ "dark": "36, 36, 36"
+ }
+ },
+ {
+ "key": "gray-3",
+ "colorType": "Gray",
+ "value": {
+ "light": "221, 221, 221",
+ "dark": "57, 57, 57"
+ }
+ },
+ {
+ "key": "gray-4",
+ "colorType": "Gray",
+ "value": {
+ "light": "198, 198, 198",
+ "dark": "94, 94, 94"
+ }
+ },
+ {
+ "key": "gray-5",
+ "colorType": "Gray",
+ "value": {
+ "light": "139, 139, 139",
+ "dark": "119, 119, 122"
+ }
+ },
+ {
+ "key": "gray-6",
+ "colorType": "Gray",
+ "value": {
+ "light": "119, 119, 119",
+ "dark": "166, 166, 166"
+ }
+ },
+ {
+ "key": "gray-7",
+ "colorType": "Gray",
+ "value": {
+ "light": "94, 94, 94",
+ "dark": "221, 221, 221"
+ }
+ },
+ {
+ "key": "gray-8",
+ "colorType": "Gray",
+ "value": {
+ "light": "75, 75, 75",
+ "dark": "238, 238, 238"
+ }
+ },
+ {
+ "key": "gray-9",
+ "colorType": "Gray",
+ "value": {
+ "light": "44, 44, 44",
+ "dark": "243, 243, 243"
+ }
+ },
+ {
+ "key": "gray-10",
+ "colorType": "Gray",
+ "value": {
+ "light": "0, 0, 0",
+ "dark": "255, 255, 255"
+ }
+ }
+ ]
+ },
+ "mixedgray": {
+ "name": "混合中性色",
+ "type": "palette",
+ "typeName": "色盘",
+ "value": [
+ {
+ "key": "mixedgray-1",
+ "colorType": "Mixedgray",
+ "value": {
+ "light": "247, 248, 250",
+ "dark": "23, 23, 26"
+ }
+ },
+ {
+ "key": "mixedgray-2",
+ "colorType": "Mixedgray",
+ "value": {
+ "light": "242, 243, 245",
+ "dark": "46, 46, 48"
+ }
+ },
+ {
+ "key": "mixedgray-3",
+ "colorType": "Mixedgray",
+ "value": {
+ "light": "229, 230, 235",
+ "dark": "72, 72, 73"
+ }
+ },
+ {
+ "key": "mixedgray-4",
+ "colorType": "Mixedgray",
+ "value": {
+ "light": "201, 205, 212",
+ "dark": "95, 95, 96"
+ }
+ },
+ {
+ "key": "mixedgray-5",
+ "colorType": "Mixedgray",
+ "value": {
+ "light": "169, 174, 184",
+ "dark": "120, 120, 122"
+ }
+ },
+ {
+ "key": "mixedgray-6",
+ "colorType": "Mixedgray",
+ "value": {
+ "light": "134, 144, 156",
+ "dark": "146, 146, 147"
+ }
+ },
+ {
+ "key": "mixedgray-7",
+ "colorType": "Mixedgray",
+ "value": {
+ "light": "107, 119, 133",
+ "dark": "171, 171, 172"
+ }
+ },
+ {
+ "key": "mixedgray-8",
+ "colorType": "Mixedgray",
+ "value": {
+ "light": "78, 89, 105",
+ "dark": "197, 197, 197"
+ }
+ },
+ {
+ "key": "mixedgray-9",
+ "colorType": "Mixedgray",
+ "value": {
+ "light": "39, 46, 59",
+ "dark": "223, 223, 223"
+ }
+ },
+ {
+ "key": "mixedgray-10",
+ "colorType": "Mixedgray",
+ "value": {
+ "light": "29, 33, 41",
+ "dark": "246, 246, 246"
+ }
+ }
+ ]
+ },
+ "info": {
+ "name": "信息色",
+ "type": "color",
+ "typeName": "颜色",
+ "value": [
+ {
+ "key": "color-info1",
+ "description": "一级/强调/标题",
+ "value": {
+ "light": "rgb(var(--o-gray-10))",
+ "dark": "rgb(var(--o-gray-10))"
+ }
+ },
+ {
+ "key": "color-info2",
+ "description": "二级/次强调/正文",
+ "value": {
+ "light": "rgb(var(--o-gray-8))",
+ "dark": "rgb(var(--o-gray-8))"
+ }
+ },
+ {
+ "key": "color-info3",
+ "description": "三级/辅助信息",
+ "value": {
+ "light": "rgb(var(--o-gray-6))",
+ "dark": "rgb(var(--o-gray-6))"
+ }
+ },
+ {
+ "key": "color-info4",
+ "description": "置灰/禁用",
+ "value": {
+ "light": "rgb(var(--o-gray-4))",
+ "dark": "rgb(var(--o-gray-4))"
+ }
+ },
+ {
+ "key": "color-info1-inverse",
+ "description": "一级/次强调/正文反色",
+ "value": {
+ "light": "rgb(var(--o-gray-1))",
+ "dark": "rgb(var(--o-gray-1))"
+ }
+ },
+ {
+ "key": "color-info2-inverse",
+ "description": "二级/辅助信息反色",
+ "value": {
+ "light": "rgb(var(--o-gray-3))",
+ "dark": "rgb(var(--o-gray-3))"
+ }
+ },
+ {
+ "key": "color-info3-inverse",
+ "description": "三级/辅助信息反色",
+ "value": {
+ "light": "rgb(var(--o-gray-5))",
+ "dark": "rgb(var(--o-gray-5))"
+ }
+ },
+ {
+ "key": "color-info4-inverse",
+ "description": "置灰/禁用反色",
+ "value": {
+ "light": "rgb(var(--o-gray-7))",
+ "dark": "rgb(var(--o-gray-7))"
+ }
+ }
+ ]
+ },
+ "mask": {
+ "name": "遮罩色",
+ "type": "color",
+ "typeName": "颜色",
+ "value": [
+ {
+ "key": "color-mask1",
+ "description": "全局遮罩",
+ "value": {
+ "light": "rgba(var(--o-gray-10), .2)",
+ "dark": "rgba(var(--o-gray-10), .2)"
+ }
+ },
+ {
+ "key": "color-mask2",
+ "description": "局部遮罩",
+ "value": {
+ "light": "rgba(var(--o-gray-10), .1)",
+ "dark": "rgba(var(--o-gray-10), .1)"
+ }
+ }
+ ]
+ },
+ "fill": {
+ "name": "填充色",
+ "type": "color",
+ "typeName": "颜色",
+ "value": [
+ {
+ "key": "color-fill1",
+ "description": "一级填充/页面背景",
+ "value": {
+ "light": "rgb(var(--o-mixedgray-1))",
+ "dark": "rgb(var(--o-mixedgray-1))"
+ }
+ },
+ {
+ "key": "color-fill2",
+ "description": "二级填充/区块、卡片",
+ "value": {
+ "light": "rgb(var(--o-gray-1))",
+ "dark": "rgb(var(--o-gray-1))"
+ }
+ },
+ {
+ "key": "color-fill3",
+ "description": "三级填充/卡片",
+ "value": {
+ "light": "rgb(var(--o-mixedgray-3))",
+ "dark": "rgb(var(--o-mixedgray-3))"
+ }
+ },
+ {
+ "key": "color-fill4",
+ "description": "四级填充/禁用",
+ "value": {
+ "light": "rgb(var(--o-mixedgray-4))",
+ "dark": "rgb(var(--o-mixedgray-4))"
+ }
+ }
+ ]
+ },
+ "control": {
+ "name": "控件色",
+ "type": "color",
+ "typeName": "颜色",
+ "value": [
+ {
+ "key": "color-control1",
+ "description": "常规",
+ "value": {
+ "light": "rgb(var(--o-mixedgray-3))",
+ "dark": "rgb(var(--o-mixedgray-3))"
+ }
+ },
+ {
+ "key": "color-control2",
+ "description": "悬浮",
+ "value": {
+ "light": "rgb(var(--o-mixedgray-4))",
+ "dark": "rgb(var(--o-mixedgray-4))"
+ }
+ },
+ {
+ "key": "color-control3",
+ "description": "激活",
+ "value": {
+ "light": "rgb(var(--o-mixedgray-6))",
+ "dark": "rgb(var(--o-mixedgray-6))"
+ }
+ },
+ {
+ "key": "color-control4",
+ "description": "禁用",
+ "value": {
+ "light": "rgb(var(--o-mixedgray-5))",
+ "dark": "rgb(var(--o-mixedgray-5))"
+ }
+ },
+ {
+ "key": "color-control1-light",
+ "description": "浅/控件常规",
+ "value": {
+ "light": "rgb(var(--o-mixedgray-3))",
+ "dark": "rgb(var(--o-mixedgray-3))"
+ }
+ },
+ {
+ "key": "color-control2-light",
+ "description": "浅/控件悬浮",
+ "value": {
+ "light": "rgb(var(--o-mixedgray-4))",
+ "dark": "rgb(var(--o-mixedgray-4))"
+ }
+ },
+ {
+ "key": "color-control3-light",
+ "description": "浅/控件激活",
+ "value": {
+ "light": "rgb(var(--o-mixedgray-5))",
+ "dark": "rgb(var(--o-mixedgray-5))"
+ }
+ },
+ {
+ "key": "color-control4-light",
+ "description": "浅/控件禁用",
+ "value": {
+ "light": "rgb(var(--o-mixedgray-2))",
+ "dark": "rgb(var(--o-mixedgray-2))"
+ }
+ }
+ ]
+ },
+ "primary": {
+ "name": "强调色",
+ "type": "color",
+ "typeName": "颜色",
+ "value": [
+ {
+ "key": "color-primary1",
+ "description": "常规",
+ "value": {
+ "light": "rgb(var(--o-blue-6))",
+ "dark": "rgb(var(--o-blue-6))"
+ }
+ },
+ {
+ "key": "color-primary2",
+ "description": "悬浮",
+ "value": {
+ "light": "rgb(var(--o-blue-5))",
+ "dark": "rgb(var(--o-blue-5))"
+ }
+ },
+ {
+ "key": "color-primary3",
+ "description": "激活",
+ "value": {
+ "light": "rgb(var(--o-blue-7))",
+ "dark": "rgb(var(--o-blue-7))"
+ }
+ },
+ {
+ "key": "color-primary4",
+ "description": "禁用",
+ "value": {
+ "light": "rgb(var(--o-blue-3))",
+ "dark": "rgb(var(--o-blue-3))"
+ }
+ },
+ {
+ "key": "color-primary1-light",
+ "description": "浅/常规",
+ "value": {
+ "light": "rgb(var(--o-blue-2))",
+ "dark": "rgb(var(--o-blue-2))"
+ }
+ },
+ {
+ "key": "color-primary2-light",
+ "description": "浅/悬浮",
+ "value": {
+ "light": "rgb(var(--o-blue-3))",
+ "dark": "rgb(var(--o-blue-3))"
+ }
+ },
+ {
+ "key": "color-primary3-light",
+ "description": "浅/激活",
+ "value": {
+ "light": "rgb(var(--o-blue-4))",
+ "dark": "rgb(var(--o-blue-4))"
+ }
+ },
+ {
+ "key": "color-primary4-light",
+ "description": "浅/禁用",
+ "value": {
+ "light": "rgb(var(--o-blue-1))",
+ "dark": "rgb(var(--o-blue-1))"
+ }
+ }
+ ]
+ },
+ "success": {
+ "name": "成功色",
+ "type": "color",
+ "typeName": "颜色",
+ "value": [
+ {
+ "key": "color-success1",
+ "description": "常规",
+ "value": {
+ "light": "rgb(var(--o-green-6))",
+ "dark": "rgb(var(--o-green-6))"
+ }
+ },
+ {
+ "key": "color-success2",
+ "description": "悬浮",
+ "value": {
+ "light": "rgb(var(--o-green-5))",
+ "dark": "rgb(var(--o-green-5))"
+ }
+ },
+ {
+ "key": "color-success3",
+ "description": "激活",
+ "value": {
+ "light": "rgb(var(--o-green-7))",
+ "dark": "rgb(var(--o-green-7))"
+ }
+ },
+ {
+ "key": "color-success4",
+ "description": "禁用",
+ "value": {
+ "light": "rgb(var(--o-green-3))",
+ "dark": "rgb(var(--o-green-3))"
+ }
+ },
+ {
+ "key": "color-success1-light",
+ "description": "浅/常规",
+ "value": {
+ "light": "rgb(var(--o-green-2))",
+ "dark": "rgb(var(--o-green-2))"
+ }
+ },
+ {
+ "key": "color-success2-light",
+ "description": "浅/悬浮",
+ "value": {
+ "light": "rgb(var(--o-green-3))",
+ "dark": "rgb(var(--o-green-3))"
+ }
+ },
+ {
+ "key": "color-success3-light",
+ "description": "浅/激活",
+ "value": {
+ "light": "rgb(var(--o-green-4))",
+ "dark": "rgb(var(--o-green-4))"
+ }
+ },
+ {
+ "key": "color-success4-light",
+ "description": "浅/禁用",
+ "value": {
+ "light": "rgb(var(--o-green-1))",
+ "dark": "rgb(var(--o-green-1))"
+ }
+ }
+ ]
+ },
+ "warning": {
+ "name": "告警色",
+ "type": "color",
+ "typeName": "颜色",
+ "value": [
+ {
+ "key": "color-warning1",
+ "description": "常规",
+ "value": {
+ "light": "rgb(var(--o-orange-6))",
+ "dark": "rgb(var(--o-orange-6))"
+ }
+ },
+ {
+ "key": "color-warning2",
+ "description": "悬浮",
+ "value": {
+ "light": "rgb(var(--o-orange-5))",
+ "dark": "rgb(var(--o-orange-5))"
+ }
+ },
+ {
+ "key": "color-warning3",
+ "description": "激活",
+ "value": {
+ "light": "rgb(var(--o-orange-7))",
+ "dark": "rgb(var(--o-orange-7))"
+ }
+ },
+ {
+ "key": "color-warning4",
+ "description": "禁用",
+ "value": {
+ "light": "rgb(var(--o-orange-3))",
+ "dark": "rgb(var(--o-orange-3))"
+ }
+ },
+ {
+ "key": "color-warning1-light",
+ "description": "浅/常规",
+ "value": {
+ "light": "rgb(var(--o-orange-2))",
+ "dark": "rgb(var(--o-orange-2))"
+ }
+ },
+ {
+ "key": "color-warning2-light",
+ "description": "浅/悬浮",
+ "value": {
+ "light": "rgb(var(--o-orange-3))",
+ "dark": "rgb(var(--o-orange-3))"
+ }
+ },
+ {
+ "key": "color-warning3-light",
+ "description": "浅/激活",
+ "value": {
+ "light": "rgb(var(--o-orange-4))",
+ "dark": "rgb(var(--o-orange-4))"
+ }
+ },
+ {
+ "key": "color-warning4-light",
+ "description": "浅/禁用",
+ "value": {
+ "light": "rgb(var(--o-orange-1))",
+ "dark": "rgb(var(--o-orange-1))"
+ }
+ }
+ ]
+ },
+ "danger": {
+ "name": "危险色",
+ "type": "color",
+ "typeName": "颜色",
+ "value": [
+ {
+ "key": "color-danger1",
+ "description": "常规",
+ "value": {
+ "light": "rgb(var(--o-red-6))",
+ "dark": "rgb(var(--o-red-6))"
+ }
+ },
+ {
+ "key": "color-danger2",
+ "description": "悬浮",
+ "value": {
+ "light": "rgb(var(--o-red-5))",
+ "dark": "rgb(var(--o-red-5))"
+ }
+ },
+ {
+ "key": "color-danger3",
+ "description": "激活",
+ "value": {
+ "light": "rgb(var(--o-red-7))",
+ "dark": "rgb(var(--o-red-7))"
+ }
+ },
+ {
+ "key": "color-danger4",
+ "description": "禁用",
+ "value": {
+ "light": "rgb(var(--o-red-3))",
+ "dark": "rgb(var(--o-red-3))"
+ }
+ },
+ {
+ "key": "color-danger1-light",
+ "description": "浅/常规",
+ "value": {
+ "light": "rgb(var(--o-red-2))",
+ "dark": "rgb(var(--o-red-2))"
+ }
+ },
+ {
+ "key": "color-danger2-light",
+ "description": "浅/悬浮",
+ "value": {
+ "light": "rgb(var(--o-red-3))",
+ "dark": "rgb(var(--o-red-3))"
+ }
+ },
+ {
+ "key": "color-danger3-light",
+ "description": "浅/激活",
+ "value": {
+ "light": "rgb(var(--o-red-4))",
+ "dark": "rgb(var(--o-red-4))"
+ }
+ },
+ {
+ "key": "color-danger4-light",
+ "description": "浅/禁用",
+ "value": {
+ "light": "rgb(var(--o-red-1))",
+ "dark": "rgb(var(--o-red-1))"
+ }
+ }
+ ]
+ },
+ "shadow": {
+ "name": "阴影",
+ "type": "shadow",
+ "typeName": "阴影",
+ "value": [
+ {
+ "key": "shadow-1",
+ "name": "阴影1",
+ "description": "用于卡片、小弹窗、楼层阴影",
+ "value": {
+ "light": "0 1px 5px rgba(var(--o-gray-10), 0.1)",
+ "dark": "0 1px 7px rgba(var(--o-gray-10), 0.3)"
+ }
+ },
+ {
+ "key": "shadow-2",
+ "name": "阴影2",
+ "description": "用于卡片悬浮阴影",
+ "value": {
+ "light": "0 6px 18px rgba(var(--o-gray-10), 0.14)",
+ "dark": "0 6px 18px rgba(var(--o-gray-10), 0.42)"
+ }
+ },
+ {
+ "key": "shadow-3",
+ "name": "阴影3",
+ "description": "用于提示阴影",
+ "value": {
+ "light": "0 10px 32px rgba(var(--o-gray-10), 0.18)",
+ "dark": "0 10px 32px rgba(var(--o-gray-10), 0.54)"
+ }
+ }
+ ]
+ },
+ "gap": {
+ "name": "间距",
+ "type": "gap",
+ "typeName": "间距",
+ "value": [
+ {
+ "key": "gap-1",
+ "name": "间距1",
+ "description": "用于组件之间的间距1",
+ "value": {
+ "light": "4px",
+ "dark": "4px"
+ }
+ },
+ {
+ "key": "gap-2",
+ "name": "间距2",
+ "description": "用于组件之间的间距2",
+ "value": {
+ "light": "8px",
+ "dark": "8px"
+ }
+ },
+ {
+ "key": "gap-3",
+ "name": "间距3",
+ "description": "用于组件之间的间距3",
+ "value": {
+ "light": "12px",
+ "dark": "12px"
+ }
+ },
+ {
+ "key": "gap-4",
+ "name": "间距4",
+ "description": "用于组件之间的间距4",
+ "value": {
+ "light": "16px",
+ "dark": "16px"
+ }
+ },
+ {
+ "key": "gap-5",
+ "name": "间距5",
+ "description": "用于组件之间的间距5",
+ "value": {
+ "light": "24px",
+ "dark": "24px"
+ }
+ },
+ {
+ "key": "gap-6",
+ "name": "间距6",
+ "description": "用于组件之间的间距6",
+ "value": {
+ "light": "32px",
+ "dark": "32px"
+ }
+ },
+ {
+ "key": "gap-7",
+ "name": "间距7",
+ "description": "用于组件之间的间距7",
+ "value": {
+ "light": "40px",
+ "dark": "40px"
+ }
+ },
+ {
+ "key": "gap-8",
+ "name": "间距8",
+ "description": "用于组件之间的间距8",
+ "value": {
+ "light": "64px",
+ "dark": "64px"
+ }
+ }
+ ]
+ },
+ "size": {
+ "name": "组件尺寸",
+ "type": "size",
+ "typeName": "尺寸",
+ "value": [
+ {
+ "key": "size-l",
+ "name": "大尺寸",
+ "description": "尺寸",
+ "value": {
+ "light": "40px",
+ "dark": "40px"
+ }
+ },
+ {
+ "key": "size-m",
+ "name": "中尺寸",
+ "description": "尺寸",
+ "value": {
+ "light": "32px",
+ "dark": "32px"
+ }
+ },
+ {
+ "key": "size-s",
+ "name": "小尺寸",
+ "description": "小尺寸",
+ "value": {
+ "light": "24px",
+ "dark": "24px"
+ }
+ }
+ ]
+ },
+ "icon_size": {
+ "name": "图标尺寸",
+ "type": "size",
+ "typeName": "尺寸",
+ "value": [
+ {
+ "key": "icon_size-l",
+ "name": "大尺寸图标",
+ "description": "尺寸",
+ "value": {
+ "light": "48px",
+ "dark": "48px"
+ }
+ },
+ {
+ "key": "icon_size-m",
+ "name": "中尺寸图标",
+ "description": "尺寸",
+ "value": {
+ "light": "32px",
+ "dark": "32px"
+ }
+ },
+ {
+ "key": "icon_size-s",
+ "name": "小尺寸图标",
+ "description": "小尺寸",
+ "value": {
+ "light": "24px",
+ "dark": "24px"
+ }
+ },
+ {
+ "key": "icon_size-xs",
+ "name": "超小尺寸图标",
+ "description": "小尺寸",
+ "value": {
+ "light": "16px",
+ "dark": "16px"
+ }
+ }
+ ]
+ },
+ "font_size": {
+ "name": "字体尺寸",
+ "type": "font",
+ "typeName": "字体",
+ "value": [
+ {
+ "key": "font_size-display1",
+ "name": "一级数据展示",
+ "description": "一级数据展示",
+ "value": {
+ "light": "64px",
+ "dark": "64px"
+ }
+ },
+ {
+ "key": "font_size-display2",
+ "name": "二级数据展示",
+ "description": "二级数据展示",
+ "value": {
+ "light": "54px",
+ "dark": "54px"
+ }
+ },
+ {
+ "key": "font_size-display3",
+ "name": "三级数据展示",
+ "description": "三级数据展示",
+ "value": {
+ "light": "36px",
+ "dark": "36px"
+ }
+ },
+ {
+ "key": "font_size-display4",
+ "name": "四级数据展示",
+ "description": "四级数据展示",
+ "value": {
+ "light": "28px",
+ "dark": "28px"
+ }
+ },
+ {
+ "key": "font_size-h1",
+ "name": "一级标题",
+ "description": "一级标题",
+ "value": {
+ "light": "24px",
+ "dark": "24px"
+ }
+ },
+ {
+ "key": "font_size-h2",
+ "name": "二级标题",
+ "description": "二级标题",
+ "value": {
+ "light": "20px",
+ "dark": "20px"
+ }
+ },
+ {
+ "key": "font_size-h3",
+ "name": "三级标题",
+ "description": "三级标题",
+ "value": {
+ "light": "18px",
+ "dark": "18px"
+ }
+ },
+ {
+ "key": "font_size-h4",
+ "name": "四级标题",
+ "description": "四级标题",
+ "value": {
+ "light": "16px",
+ "dark": "16px"
+ }
+ },
+ {
+ "key": "font_size-text",
+ "name": "正文",
+ "description": "正文",
+ "value": {
+ "light": "14px",
+ "dark": "14px"
+ }
+ },
+ {
+ "key": "font_size-tip1",
+ "name": "提示文本1",
+ "description": "提示文本1",
+ "value": {
+ "light": "12px",
+ "dark": "12px"
+ }
+ },
+ {
+ "key": "font_size-tip2",
+ "name": "提示文本2",
+ "description": "提示文本2",
+ "value": {
+ "light": "10px",
+ "dark": "10px"
+ }
+ }
+ ]
+ },
+ "line_height": {
+ "name": "字体行高",
+ "type": "font",
+ "typeName": "字体",
+ "value": [
+ {
+ "key": "line_height-display1",
+ "name": "一级数据展示",
+ "description": "一级数据展示",
+ "value": {
+ "light": "84px",
+ "dark": "84px"
+ }
+ },
+ {
+ "key": "line_height-display2",
+ "name": "二级数据展示",
+ "description": "二级数据展示",
+ "value": {
+ "light": "76px",
+ "dark": "76px"
+ }
+ },
+ {
+ "key": "line_height-display3",
+ "name": "三级数据展示",
+ "description": "三级数据展示",
+ "value": {
+ "light": "48px",
+ "dark": "48px"
+ }
+ },
+ {
+ "key": "line_height-display4",
+ "name": "四级数据展示",
+ "description": "四级数据展示",
+ "value": {
+ "light": "36px",
+ "dark": "36px"
+ }
+ },
+ {
+ "key": "line_height-h1",
+ "name": "一级标题",
+ "description": "一级标题",
+ "value": {
+ "light": "32px",
+ "dark": "32px"
+ }
+ },
+ {
+ "key": "line_height-h2",
+ "name": "二级标题",
+ "description": "二级标题",
+ "value": {
+ "light": "28px",
+ "dark": "28px"
+ }
+ },
+ {
+ "key": "line_height-h3",
+ "name": "三级标题",
+ "description": "三级标题",
+ "value": {
+ "light": "26px",
+ "dark": "26px"
+ }
+ },
+ {
+ "key": "line_height-h4",
+ "name": "四级标题",
+ "description": "四级标题",
+ "value": {
+ "light": "24px",
+ "dark": "24px"
+ }
+ },
+ {
+ "key": "line_height-text",
+ "name": "正文",
+ "description": "正文",
+ "value": {
+ "light": "22px",
+ "dark": "22px"
+ }
+ },
+ {
+ "key": "line_height-tip1",
+ "name": "提示文本1",
+ "description": "提示文本1",
+ "value": {
+ "light": "18px",
+ "dark": "18px"
+ }
+ },
+ {
+ "key": "line_height-tip2",
+ "name": "提示文本2",
+ "description": "提示文本2",
+ "value": {
+ "light": "14px",
+ "dark": "14px"
+ }
+ }
+ ]
+ },
+ "radius": {
+ "name": "圆角尺寸",
+ "type": "size",
+ "typeName": "尺寸",
+ "value": [
+ {
+ "key": "radius-l",
+ "name": "大尺寸圆角",
+ "description": "大尺寸圆角",
+ "value": {
+ "light": "8px",
+ "dark": "8px"
+ }
+ },
+ {
+ "key": "radius-m",
+ "name": "中尺寸圆角",
+ "description": "中尺寸圆角",
+ "value": {
+ "light": "4px",
+ "dark": "4px"
+ }
+ },
+ {
+ "key": "radius-s",
+ "name": "小尺寸圆角",
+ "description": "小尺寸圆角",
+ "value": {
+ "light": "2px",
+ "dark": "2px"
+ }
+ }
+ ]
+ },
+ "duration": {
+ "name": "动画持续时间",
+ "type": "animation",
+ "typeName": "动画",
+ "value": [
+ {
+ "key": "duration-s",
+ "name": "持续时间",
+ "description": "用于退出屏幕的动画",
+ "value": {
+ "light": "200ms",
+ "dark": "200ms"
+ }
+ },
+ {
+ "key": "duration-m1",
+ "name": "持续时间",
+ "description": "用于当曲线为standard-in时进入屏幕的动画",
+ "value": {
+ "light": "250ms",
+ "dark": "250ms"
+ }
+ },
+ {
+ "key": "duration-m2",
+ "name": "持续时间",
+ "description": "用于当曲线为standard时开始、结束的动画",
+ "value": {
+ "light": "300ms",
+ "dark": "300ms"
+ }
+ },
+ {
+ "key": "duration-m3",
+ "name": "持续时间",
+ "description": "用于当曲线为emphasized-in时进入屏幕的动画",
+ "value": {
+ "light": "400ms",
+ "dark": "400ms"
+ }
+ },
+ {
+ "key": "duration-l",
+ "name": "持续时间",
+ "description": "用于当曲线为emphasized时开始、结束的动画",
+ "value": {
+ "light": "500ms",
+ "dark": "500ms"
+ }
+ },
+ {
+ "key": "duration-xl",
+ "name": "持续时间",
+ "description": "用于当曲线为emphasized时，轮播切换动画",
+ "value": {
+ "light": "1000ms",
+ "dark": "1000ms"
+ }
+ }
+ ]
+ },
+ "easing": {
+ "name": "动画曲线",
+ "type": "animation",
+ "typeName": "动画",
+ "value": [
+ {
+ "key": "easing-linear",
+ "name": "线性动画曲线",
+ "description": "线性曲线",
+ "value": {
+ "light": "cubic-bezier(0, 0, 1, 1)",
+ "dark": "cubic-bezier(0, 0, 1, 1)"
+ }
+ },
+ {
+ "key": "easing-standard",
+ "name": "动画曲线",
+ "description": "用于组件",
+ "value": {
+ "light": "cubic-bezier(0.2, 0, 0, 1)",
+ "dark": "cubic-bezier(0.2, 0, 0, 1)"
+ }
+ },
+ {
+ "key": "easing-standard-in",
+ "name": "动画曲线",
+ "description": "用于组件",
+ "value": {
+ "light": "cubic-bezier(0, 0, 0, 1)",
+ "dark": "cubic-bezier(0, 0, 0, 1)"
+ }
+ },
+ {
+ "key": "easing-standard-out",
+ "name": "动画曲线",
+ "description": "用于组件",
+ "value": {
+ "light": "cubic-bezier(0.3, 0, 1, 1)",
+ "dark": "cubic-bezier(0.3, 0, 1, 1)"
+ }
+ },
+ {
+ "key": "easing-emphasized",
+ "name": "动画曲线",
+ "description": "用于大卡片、场景切换",
+ "value": {
+ "light": "cubic-bezier(0.2, 0, 0, 1)",
+ "dark": "cubic-bezier(0.2, 0, 0, 1)"
+ }
+ },
+ {
+ "key": "easing-emphasized-in",
+ "name": "动画曲线",
+ "description": "用于大卡片、场景切换",
+ "value": {
+ "light": "cubic-bezier(0.3, 0, 0.8, 0.15)",
+ "dark": "cubic-bezier(0.3, 0, 0.8, 0.15)"
+ }
+ },
+ {
+ "key": "easing-emphasized-out",
+ "name": "动画曲线",
+ "description": "用于大卡片、场景切换",
+ "value": {
+ "light": "cubic-bezier(0.05, 0.7, 0.1, 1)",
+ "dark": "cubic-bezier(0.05, 0.7, 0.1, 1)"
+ }
+ }
+ ]
+ }
+}
diff --git a/packages/opendesign/src/tokens/token.config.ts b/packages/opendesign/src/tokens/token.config.ts
index 062a84cbcac2e3f8f7a1ece699d6f07f75d54fc9..ad571baa1674dee5bc523c93d5d16df8a18b423e 100644
--- a/packages/opendesign/src/tokens/token.config.ts
+++ b/packages/opendesign/src/tokens/token.config.ts
@@ -3,6 +3,6 @@ module.exports = {
output: '../components/style/',
themes: ['light', 'dark'],
defaultTheme: 'light',
- tokenFile: ['./tokens.json'],
+ tokenFile: ['./opendesign-token.json'],
codeSnippetsFile: '../../../../.vscode/opendesign.token.code-snippets'
};
\ No newline at end of file
diff --git a/packages/opendesign/src/tokens/tokens.json b/packages/opendesign/src/tokens/tokens.json
index 6d7dadb1b74a01f880d9b56c3eff39d06f6dd8e3..d2927c45f2786303e0c8a79961c0a5ce3ce77b28 100644
--- a/packages/opendesign/src/tokens/tokens.json
+++ b/packages/opendesign/src/tokens/tokens.json
@@ -188,7 +188,7 @@
]
},
"danger": {
- "name": "错误色",
+ "name": "危险色",
"type": "color",
"typeName": "颜色",
"value": [
diff --git a/packages/portal/src/components/TheAside.vue b/packages/portal/src/components/TheAside.vue
index eb47250e9a778dd4b73bf071b78de292fff2313c..0ed71f7e481fafc305b1e7080f52a64596440744 100644
--- a/packages/portal/src/components/TheAside.vue
+++ b/packages/portal/src/components/TheAside.vue
@@ -43,26 +43,26 @@ const navClick = (item: typeof navList[0]) => {
diff --git a/packages/portal/src/components/TheHeader.vue b/packages/portal/src/components/TheHeader.vue
index 53473da4568ad287b05c04a8a4554230f59766f2..25d59026706c486fe0b7c18e1727f1b3a3d75fca 100644
--- a/packages/portal/src/components/TheHeader.vue
+++ b/packages/portal/src/components/TheHeader.vue
@@ -19,12 +19,12 @@ const globalSetting = () => {