@wot-ui/ui 1.0.0 → 2.0.0-alpha.4

package/styles/theme/base/font.scss

@@ -0,0 +1,13 @@
+:root,
+page,
+.wd-root-portal {
+  /* 字重 */
+  --wot-font-weight-ultra-light: 100;
+  --wot-font-weight-thin: 200;
+  --wot-font-weight-light: 300;
+  --wot-font-weight-regular: 400;
+  --wot-font-weight-medium: 600;
+  --wot-font-weight-semibold: 700;
+}
+
+ 

package/styles/theme/base/index.scss

@@ -0,0 +1,8 @@
+@use 'color.scss' as *;
+@use 'number.scss' as *;
+@use 'font.scss' as *;
+@use 'opacity.scss' as *;
+@use 'radius.scss' as *;
+@use 'insets.scss' as *;
+@use 'stroke.scss' as *;
+@use 'typography.scss' as *;

package/styles/theme/base/insets.scss

@@ -0,0 +1,32 @@
+:root,
+page,
+.wd-root-portal {
+  --wot-spacing-zero: var(--wot-number-n0);
+  --wot-padding-zero: var(--wot-number-n0);
+  --wot-padding-ultra-tight: var(--wot-number-n2);
+  --wot-padding-super-tight: var(--wot-number-n4);
+  --wot-padding-extra-tight: var(--wot-number-n6);
+  --wot-padding-tight: var(--wot-number-n8);
+  --wot-padding-main: var(--wot-number-n10);
+  --wot-padding-loose: var(--wot-number-n12);
+  --wot-padding-extra-loose: var(--wot-number-n16);
+  --wot-padding-super-loose: var(--wot-number-n20);
+  --wot-padding-ultra-loose: var(--wot-number-n24);
+  --wot-padding-spacious: var(--wot-number-n28);
+  --wot-padding-extra-spacious: var(--wot-number-n32);
+  --wot-padding-super-spacious: var(--wot-number-n40);
+  --wot-padding-ultra-spacious: var(--wot-number-n48);
+  --wot-spacing-ultra-tight: var(--wot-number-n2);
+  --wot-spacing-super-tight: var(--wot-number-n4);
+  --wot-spacing-extra-tight: var(--wot-number-n6);
+  --wot-spacing-tight: var(--wot-number-n8);
+  --wot-spacing-main: var(--wot-number-n10);
+  --wot-spacing-loose: var(--wot-number-n12);
+  --wot-spacing-extra-loose: var(--wot-number-n16);
+  --wot-spacing-super-loose: var(--wot-number-n20);
+  --wot-spacing-ultra-loose: var(--wot-number-n24);
+  --wot-spacing-spacious: var(--wot-number-n28);
+  --wot-spacing-extra-spacious: var(--wot-number-n32);
+  --wot-spacing-super-spacious: var(--wot-number-n40);
+  --wot-spacing-ultra-spacious: var(--wot-number-n48);
+}

package/styles/theme/base/number.scss

@@ -0,0 +1,36 @@
+:root,
+page,
+.wd-root-portal {
+  --wot-n-0: 0px;
+  --wot-n-05: 0.5px;
+  --wot-n-1: 1px;
+  --wot-n-2: 2px;
+  --wot-n-3: 3px;
+  --wot-n-4: 4px;
+  --wot-n-5: 5px;
+  --wot-n-6: 6px;
+  --wot-n-8: 8px;
+  --wot-n-9: 9px;
+  --wot-n-10: 10px;
+  --wot-n-11: 11px;
+  --wot-n-12: 12px;
+  --wot-n-14: 14px;
+  --wot-n-15: 15px;
+  --wot-n-16: 16px;
+  --wot-n-17: 17px;
+  --wot-n-18: 18px;
+  --wot-n-20: 20px;
+  --wot-n-22: 22px;
+  --wot-n-24: 24px;
+  --wot-n-26: 26px;
+  --wot-n-28: 28px;
+  --wot-n-32: 32px;
+  --wot-n-34: 34px;
+  --wot-n-36: 36px;
+  --wot-n-40: 40px;
+  --wot-n-48: 48px;
+  --wot-n-56: 56px;
+  --wot-n-60: 60px;
+  --wot-n-375: 375px;
+  --wot-nFull: 9999px;
+}

package/styles/theme/base/opacity.scss

@@ -0,0 +1,9 @@
+:root,
+page,
+.wd-root-portal {
+  --wot-opacity-disabled: 0.4;
+  --wot-opacity-dimmer: 0.6;
+  --wot-opacity-oveylay: 0.75;
+  --wot-opacity-main: 1;
+  --wot-opacity-backdrop: 0.3;
+}

package/styles/theme/base/radius.scss

@@ -0,0 +1,13 @@
+:root,
+page,
+.wd-root-portal {
+  /* 圆角 */
+  --wot-radius-zero: var(--wot-n-0);
+  --wot-radius-small: var(--wot-n-2);
+  --wot-radius-main: var(--wot-n-4);
+  --wot-radius-large: var(--wot-n-8);
+  --wot-radius-extra-large: var(--wot-n-12);
+  --wot-radius-super-large: var(--wot-n-16);
+  --wot-radius-ultra-large: var(--wot-n-20);
+  --wot-radius-radius-full: var(--wot-nFull);
+}

package/styles/theme/base/stroke.scss

@@ -0,0 +1,9 @@
+:root,
+page,
+.wd-root-portal {
+  /* 边框线系列 */
+  --wot-stroke-light: var(--wot-number-n05);
+  --wot-stroke-zero: var(--wot-number-n0);
+  --wot-stroke-main: var(--wot-number-n1);
+  --wot-stroke-blod: var(--wot-number-n2);
+}

package/styles/theme/base/typography.scss

@@ -0,0 +1,44 @@
+:root,
+page,
+.wd-root-portal {
+  /* title */
+  --wot-typography-title-font-family: PingFang SC;
+  --wot-typography-title-size-main: var(--wot-n-18);
+  --wot-typography-title-size-large: var(--wot-n-20);
+  --wot-typography-title-size-extra-large: var(--wot-n-24);
+  --wot-typography-title-font-weight-light: var(--wot-font-weight-regular);
+  --wot-typography-title-font-weight-main: var(--wot-font-weight-medium);
+  --wot-typography-title-font-weight-strong: var(--wot-font-weight-semibold);
+  --wot-typography-title-line--height-size-main: var(--wot-n-26);
+  --wot-typography-title-line--height-size-large: var(--wot-n-28);
+  --wot-typography-title-line--height-size-extra-large: var(--wot-n-34);
+  /* body */
+  --wot-typography-body-font-family: PingFang SC;
+  --wot-typography-body-size-main: var(--wot-n-14);
+  --wot-typography-body-size-large: var(--wot-n-15);
+  --wot-typography-body-size-extra-large: var(--wot-n-16);
+  --wot-typography-body-size-super-large: var(--wot-n-17);
+  --wot-typography-body-size-ultra-large: var(--wot-n-18);
+  --wot-typography-body-font-weight-main: var(--wot-font-weight-regular);
+  --wot-typography-body-font-weight-strong: var(--wot-font-weight-medium);
+  --wot-typography-body-font-weight-extra-strong: var(--wot-font-weight-semibold);
+  --wot-typography-body-line--height-size-main: var(--wot-n-20);
+  --wot-typography-body-line--height-size-large: var(--wot-n-22);
+  --wot-typography-body-line--height-size-extra-large: var(--wot-n-24);
+  --wot-typography-body-line--height-size-super-large: var(--wot-n-24);
+  --wot-typography-body-line--height-size-ultra-large: var(--wot-n-26);
+  /* label */
+  --wot-typography-label-font-family: PingFang SC;
+  --wot-typography-label-size-super-small: var(--wot-n-9);
+  --wot-typography-label-size-extra-small: var(--wot-n-10);
+  --wot-typography-label-size-small: var(--wot-n-11);
+  --wot-typography-label-size-main: var(--wot-n-12);
+  --wot-typography-label-size-large: var(--wot-n-14);
+  --wot-typography-label-font-weight-main: var(--wot-font-weight-regular);
+  --wot-typography-label-font-weight-strong: var(--wot-font-weight-medium);
+  --wot-typography-label-line--height-size-super-small: var(--wot-n-14);
+  --wot-typography-label-line--height-size-extra-small: var(--wot-n-16);
+  --wot-typography-label-line--height-size-small:  var(--wot-n-16);
+  --wot-typography-label-line--height-size-main: var(--wot-n-18);
+  --wot-typography-label-line--height-size-large: var(--wot-n-18);
+}

package/styles/theme/dark.scss

@@ -0,0 +1,101 @@
+@mixin dark-theme-vars {
+  /* 深色模式语义变量 */
+  /* 主色 */
+  --wot-primary-1: var(--wot-blue-10);
+  --wot-primary-2: var(--wot-blue-9);
+  --wot-primary-3: var(--wot-blue-8);
+  --wot-primary-4: var(--wot-blue-7);
+  --wot-primary-5: var(--wot-blue-6);
+  --wot-primary-6: var(--wot-blue-5);
+  --wot-primary-7: var(--wot-blue-4);
+  --wot-primary-8: var(--wot-blue-3);
+  --wot-primary-9: var(--wot-blue-2);
+  --wot-primary-10: var(--wot-blue-1);
+  /* 危险色 */
+  --wot-danger-main: var(--wot-red-5);
+  --wot-danger-hover: var(--wot-red-6);
+  --wot-danger-clicked: var(--wot-red-4);
+  --wot-danger-disabled: var(--wot-red-8);
+  --wot-danger-particular: var(--wot-red-9);
+  --wot-danger-surface: var(--wot-red-10);
+  /* 成功色 */
+  --wot-success-main: var(--wot-green-5);
+  --wot-success-hover: var(--wot-green-6);
+  --wot-success-clicked: var(--wot-green-4);
+  --wot-success-disabled: var(--wot-green-8);
+  --wot-success-particular: var(--wot-green-9);
+  --wot-success-surface: var(--wot-green-10);
+  /* 警告色 */
+  --wot-warning-main: var(--wot-orange-5);
+  --wot-warning-hover: var(--wot-orange-6);
+  --wot-warning-clicked: var(--wot-orange-4);
+  --wot-warning-disabled: var(--wot-orange-8);
+  --wot-warning-particular: var(--wot-orange-9);
+  --wot-warning-surface: var(--wot-orange-10);
+  /* 中性色 */
+  /* 文字 */
+  --wot-text-main: var(--wot-coolgrey-1);
+  --wot-text-secondary: var(--wot-coolgrey-3);
+  --wot-text-auxiliary: var(--wot-coolgrey-5);
+  --wot-text-disabled: var(--wot-coolgrey-7);
+  --wot-text-placeholder: var(--wot-coolgrey-6);
+  --wot-text-white: var(--wot-base-white);
+  /* 图标 */
+  --wot-icon-main: var(--wot-coolgrey-1);
+  --wot-icon-secondary: var(--wot-coolgrey-3);
+  --wot-icon-auxiliary: var(--wot-coolgrey-5);
+  --wot-icon-disabled: var(--wot-coolgrey-7);
+  --wot-icon-placeholder: var(--wot-coolgrey-6);
+  --wot-icon-white: var(--wot-base-white);
+  /* 边框 */
+  --wot-border-extra-strong: var(--wot-coolgrey-3);
+  --wot-border-strong: var(--wot-coolgrey-5);
+  --wot-border-main: var(--wot-coolgrey-7);
+  --wot-border-light: var(--wot-coolgrey-9);
+  --wot-border-white: var(--wot-base-white);
+  --wot-border-zero: var(--wot-base-transparent);
+  /* 填充 */
+  --wot-filled-extra-strong: var(--wot-coolgrey-7);
+  --wot-filled-strong: var(--wot-coolgrey-8);
+  --wot-filled-content: var(--wot-coolgrey-9);
+  --wot-filled-bottom: var(--wot-coolgrey-10);
+  --wot-filled-oppo: var(--wot-base-black);
+  --wot-filled-zero: var(--wot-base-transparent);
+  /* 分割线 */
+  --wot-divider-main: var(--wot-opacwhite-3_08);
+  --wot-divider-light: var(--wot-opacwhite-2_04);
+  --wot-divider-strong: var(--wot-opacwhite-4_15);
+  --wot-divider-white: var(--wot-base-white);
+  /* 反馈 */
+  --wot-feedback-hover: var(--wot-opacwhite-2_04);
+  --wot-feedback-active: var(--wot-opacwhite-3_08);
+  --wot-feedback-accent: var(--wot-blue-opac);
+  /* 填充色-透明度 */
+  --wot-opacfilled-tooltip-toast-cover: var(--wot-opac-9_75);
+  --wot-opacfilled-main-cover: var(--wot-opac-7_55);
+  --wot-opacfilled-light-cover: var(--wot-opac-6_30);
+  /* Picker View Mask */
+  --wot-picker-view-mask-start-color: var(--wot-opac-10_85);
+  --wot-picker-view-mask-end-color: var(--wot-opac-5_20);
+  /* 分类色 */
+  /* 黄色 */
+  --wot-classifyapplication-yellow-background: var(--wot-yellow-10);
+  --wot-classifyapplication-yellow-border: var(--wot-yellow-8);
+  --wot-classifyapplication-yellow-content: var(--wot-yellow-5);
+  /* 蓝色 */
+  --wot-classifyapplication-cyan-background: var(--wot-cyan-10);
+  --wot-classifyapplication-cyan-border: var(--wot-cyan-8);
+  --wot-classifyapplication-cyan-content: var(--wot-cyan-5);
+  /* 紫色 */
+  --wot-classifyapplication-purple-background: var(--wot-purple-10);
+  --wot-classifyapplication-purple-border: var(--wot-purple-8);
+  --wot-classifyapplication-purple-content: var(--wot-purple-5);
+  /* 靛色 */
+  --wot-classifyapplication-grape-background: var(--wot-grape-10);
+  --wot-classifyapplication-grape-border: var(--wot-grape-8);
+  --wot-classifyapplication-grape-content: var(--wot-grape-5);
+  /* 粉色 */
+  --wot-classifyapplication-pink-background: var(--wot-pink-10);
+  --wot-classifyapplication-pink-border: var(--wot-pink-8);
+  --wot-classifyapplication-pink-content: var(--wot-pink-5);
+}

package/styles/theme/index.scss

@@ -0,0 +1,16 @@
+@use './base/index.scss'as *;
+@use './light.scss'as light;
+@use './dark.scss'as dark;
+
+page,
+.wot-theme-dark,
+.wot-theme-dark .wd-root-portal {
+  @include dark.dark-theme-vars;
+}
+
+
+page,
+.wot-theme-light,
+.wot-theme-light .wd-root-portal {
+  @include light.light-theme-vars;
+}

package/styles/theme/light.scss

@@ -0,0 +1,101 @@
+@mixin light-theme-vars {
+  /* 浅色模式颜色语义变量 */
+  /* 主色 */
+  --wot-primary-1: var(--wot-blue-1);
+  --wot-primary-2: var(--wot-blue-2);
+  --wot-primary-3: var(--wot-blue-3);
+  --wot-primary-4: var(--wot-blue-4);
+  --wot-primary-5: var(--wot-blue-5);
+  --wot-primary-6: var(--wot-blue-6);
+  --wot-primary-7: var(--wot-blue-7);
+  --wot-primary-8: var(--wot-blue-8);
+  --wot-primary-9: var(--wot-blue-9);
+  --wot-primary-10: var(--wot-blue-10);
+  /* 危险色 */
+  --wot-danger-main: var(--wot-red-6);
+  --wot-danger-hover: var(--wot-red-5);
+  --wot-danger-clicked: var(--wot-red-7);
+  --wot-danger-disabled: var(--wot-red-3);
+  --wot-danger-particular: var(--wot-red-2);
+  --wot-danger-surface: var(--wot-red-1);
+  /* 成功色 */
+  --wot-success-main: var(--wot-green-6);
+  --wot-success-hover: var(--wot-green-5);
+  --wot-success-clicked: var(--wot-green-7);
+  --wot-success-disabled: var(--wot-green-3);
+  --wot-success-particular: var(--wot-green-2);
+  --wot-success-surface: var(--wot-green-1);
+  /* 警告色 */
+  --wot-warning-main: var(--wot-orange-6);
+  --wot-warning-hover: var(--wot-orange-5);
+  --wot-warning-clicked: var(--wot-orange-7);
+  --wot-warning-disabled: var(--wot-orange-3);
+  --wot-warning-particular: var(--wot-orange-2);
+  --wot-warning-surface: var(--wot-orange-1);
+  /* 中性色 */
+  /* 文字 */
+  --wot-text-main: var(--wot-coolgrey-10);
+  --wot-text-secondary: var(--wot-coolgrey-8);
+  --wot-text-auxiliary: var(--wot-coolgrey-6);
+  --wot-text-disabled: var(--wot-coolgrey-4);
+  --wot-text-placeholder: var(--wot-coolgrey-5);
+  --wot-text-white: var(--wot-base-white);
+  /* 图标 */
+  --wot-icon-main: var(--wot-coolgrey-10);
+  --wot-icon-secondary: var(--wot-coolgrey-8);
+  --wot-icon-auxiliary: var(--wot-coolgrey-6);
+  --wot-icon-disabled: var(--wot-coolgrey-4);
+  --wot-icon-placeholder: var(--wot-coolgrey-5);
+  --wot-icon-white: var(--wot-base-white);
+  /* 边框 */
+  --wot-border-extra-strong: var(--wot-coolgrey-6);
+  --wot-border-strong: var(--wot-coolgrey-4);
+  --wot-border-main: var(--wot-coolgrey-3);
+  --wot-border-light: var(--wot-coolgrey-2);
+  --wot-border-white: var(--wot-base-white);
+  --wot-border-zero: var(--wot-base-transparent);
+  /* 填充 */
+  --wot-filled-extra-strong: var(--wot-coolgrey-4);
+  --wot-filled-strong: var(--wot-coolgrey-3);
+  --wot-filled-content: var(--wot-coolgrey-2);
+  --wot-filled-bottom: var(--wot-coolgrey-1);
+  --wot-filled-oppo: var(--wot-base-white);
+  --wot-filled-zero: var(--wot-base-transparent);
+  /* 分割线 */
+  --wot-divider-main: var(--wot-opac-3_08);
+  --wot-divider-light: var(--wot-opac-2_04);
+  --wot-divider-strong: var(--wot-opac-4_15);
+  --wot-divider-white: var(--wot-base-white);
+  /* 反馈 */
+  --wot-feedback-hover: var(--wot-opac-2_04);
+  --wot-feedback-active: var(--wot-opac-3_08);
+  --wot-feedback-accent: var(--wot-blue-opac);
+  /* 填充色-透明度 */
+  --wot-opacfilled-tooltip-toast-cover: var(--wot-opac-9_75);
+  --wot-opacfilled-main-cover: var(--wot-opac-7_55);
+  --wot-opacfilled-light-cover: var(--wot-opac-6_30);
+  /* Picker View Mask */
+  --wot-picker-view-mask-start-color: var(--wot-opacwhite-10_85);
+  --wot-picker-view-mask-end-color: var(--wot-opacwhite-5_20);
+  /* 分类色 */
+  /* 黄色 */
+  --wot-classifyapplication-yellow-background: var(--wot-yellow-1);
+  --wot-classifyapplication-yellow-border: var(--wot-yellow-3);
+  --wot-classifyapplication-yellow-content: var(--wot-yellow-6);
+  /* 蓝色 */
+  --wot-classifyapplication-cyan-background: var(--wot-cyan-1);
+  --wot-classifyapplication-cyan-border: var(--wot-cyan-3);
+  --wot-classifyapplication-cyan-content: var(--wot-cyan-6);
+  /* 紫色 */
+  --wot-classifyapplication-purple-background: var(--wot-purple-1);
+  --wot-classifyapplication-purple-border: var(--wot-purple-3);
+  --wot-classifyapplication-purple-content: var(--wot-purple-6);
+  /* 靛色 */
+  --wot-classifyapplication-grape-background: var(--wot-grape-1);
+  --wot-classifyapplication-grape-border: var(--wot-grape-3);
+  --wot-classifyapplication-grape-content: var(--wot-grape-6);
+  /* 粉色 */
+  --wot-classifyapplication-pink-background: var(--wot-pink-1);
+  --wot-classifyapplication-pink-border: var(--wot-pink-3);
+  --wot-classifyapplication-pink-content: var(--wot-pink-6);
+}