misp-ui-library-test 0.0.1

package/src/styles/themes/variables.scss

@@ -0,0 +1,233 @@
+// 导入各个主题配置
+@import './light.scss';
+@import './dark.scss';
+@import './blue.scss';
+
+// 合并所有主题
+$themes: (
+  "light": $light-theme,
+  "dark": $dark-theme,
+  "blue": $blue-theme
+);
+
+// 生成 CSS 变量
+:root {
+  // 默认使用 light 主题
+  @each $key, $value in map-get($themes, "light") {
+    --#{'' + $key}: #{$value};
+  }
+
+  @each $theme-name, $theme-map in $themes {
+    &[data-theme="#{$theme-name}"] {
+      @each $key, $value in $theme-map {
+        --#{'' + $key}: #{$value};
+      }
+    }
+  }
+}
+
+// 文本颜色
+$primary-text: var(--primary-text);
+$sd-text: var(--sd-text);
+$td-text: var(--td-text);
+$fr-text: var(--fr-text);
+$disable-text: var(--disable-text);
+$click-text: var(--click-text);
+$click-disable-text: var(--click-disable-text);
+$white: var(--white);
+
+// 蓝色系列
+$primary-blue: var(--primary-blue);
+$primary-blue-light: var(--primary-blue-light);
+$sd-blue: var(--sd-blue);
+$md-blue: var(--md-blue);
+$fr-blue: var(--fr-blue);
+$fifth-blue: var(--fifth-blue);
+$blue-bg: var(--blue-bg);
+$blue-bg-2: var(--blue-bg-2);
+$tg-bg: var(--tg-bg);
+$popup-bg: var(--popup-bg);
+$box-shadow-3: var(--box-shadow-3);
+
+// 背景色
+$base-bg: var(--base-bg);
+$sd-bg: var(--sd-bg);
+$md-bg: var(--md-bg);
+$fr-bg: var(--fr-bg);
+
+// 边框线
+$primary-line: var(--primary-line);
+
+// 状态颜色
+$success: var(--success);
+$success-light: var(--success-light);
+$danger: var(--danger);
+$danger-light: var(--danger-light);
+$warning: var(--warning);
+$warning-light: var(--warning-light);
+
+// z-index
+$index-normal: 1;
+$index-top: 1000;
+$index-popover: 2000;
+$index-modal: 3000;
+$index-notification: 4000;
+$index-message: 5000;
+
+// 图表颜色系列
+// 蓝色图表
+$blue-1: var(--blue-1);
+$blue-2: var(--blue-2);
+$blue-3: var(--blue-3);
+$blue-4: var(--blue-4);
+$blue-5: var(--blue-5);
+$blue-6: var(--blue-6);
+
+// 绿色图表
+$green-1: var(--green-1);
+$green-2: var(--green-2);
+$green-3: var(--green-3);
+$green-4: var(--green-4);
+$green-5: var(--green-5);
+$green-6: var(--green-6);
+
+// 青色图表
+$aquamarine-1: var(--aquamarine-1);
+$aquamarine-2: var(--aquamarine-2);
+$aquamarine-3: var(--aquamarine-3);
+$aquamarine-4: var(--aquamarine-4);
+$aquamarine-5: var(--aquamarine-5);
+$aquamarine-6: var(--aquamarine-6);
+
+// 黄色图表
+$yellow-1: var(--yellow-1);
+$yellow-2: var(--yellow-2);
+$yellow-3: var(--yellow-3);
+$yellow-4: var(--yellow-4);
+$yellow-5: var(--yellow-5);
+$yellow-6: var(--yellow-6);
+
+// 橙色图表
+$orange-1: var(--orange-1);
+$orange-2: var(--orange-2);
+$orange-3: var(--orange-3);
+$orange-4: var(--orange-4);
+$orange-5: var(--orange-5);
+$orange-6: var(--orange-6);
+
+// 红色图表
+$red-1: var(--red-1);
+$red-2: var(--red-2);
+$red-3: var(--red-3);
+$red-4: var(--red-4);
+$red-5: var(--red-5);
+$red-6: var(--red-6);
+
+// 紫色图表
+$purple-1: var(--purple-1);
+$purple-2: var(--purple-2);
+$purple-3: var(--purple-3);
+$purple-4: var(--purple-4);
+$purple-5: var(--purple-5);
+$purple-6: var(--purple-6);
+
+// 导出变量给 JavaScript 使用
+:export {
+  // 文本颜色
+  primaryText: $primary-text;
+  sdText: $sd-text;
+  tdText: $td-text;
+  frText: $fr-text;
+  disableText: $disable-text;
+  clickText: $click-text;
+  clickDisableText: $click-disable-text;
+  white: $white;
+
+  // 蓝色系列
+  primaryBlue: $primary-blue;
+  primaryBlueLight: $primary-blue-light;
+  sdBlue: $sd-blue;
+  mdBlue: $md-blue;
+  frBlue: $fr-blue;
+  fifthBlue: $fifth-blue;
+
+  // 背景色
+  baseBg: $base-bg;
+  sdBg: $sd-bg;
+  mdBg: $md-bg;
+  frBg: $fr-bg;
+  blueBg: $blue-bg;
+  blueBg2: $blue-bg-2;
+  tgBg: $tg-bg;
+
+  popupBg: $popup-bg;
+  boxShadow3: $box-shadow-3;
+
+  // 边框线
+  primaryLine: $primary-line;
+
+  // 状态颜色
+  success: $success;
+  successLight: $success-light;
+  danger: $danger;
+  dangerLight: $danger-light;
+  warning: $warning;
+  warningLight: $warning-light;
+
+  // 图表颜色系列
+  // 蓝色图表
+  blue1: $blue-1;
+  blue2: $blue-2;
+  blue3: $blue-3;
+  blue4: $blue-4;
+  blue5: $blue-5;
+  blue6: $blue-6;
+
+  // 绿色图表
+  green1: $green-1;
+  green2: $green-2;
+  green3: $green-3;
+  green4: $green-4;
+  green5: $green-5;
+  green6: $green-6;
+
+  // 青色图表
+  aquamarine1: $aquamarine-1;
+  aquamarine2: $aquamarine-2;
+  aquamarine3: $aquamarine-3;
+  aquamarine4: $aquamarine-4;
+  aquamarine5: $aquamarine-5;
+  aquamarine6: $aquamarine-6;
+
+  // 黄色图表
+  yellow1: $yellow-1;
+  yellow2: $yellow-2;
+  yellow3: $yellow-3;
+  yellow4: $yellow-4;
+  yellow5: $yellow-5;
+  yellow6: $yellow-6;
+
+  // 橙色图表
+  orange1: $orange-1;
+  orange2: $orange-2;
+  orange3: $orange-3;
+  orange4: $orange-4;
+  orange5: $orange-5;
+  orange6: $orange-6;
+
+  // 红色图表
+  red1: $red-1;
+  red2: $red-2;
+  red3: $red-3;
+  red4: $red-4;
+  red5: $red-5;
+  red6: $red-6;
+
+  // 紫色图表
+  purple1: $purple-1;
+  purple2: $purple-2;
+  purple3: $purple-3;
+  purple4: $purple-4;
+  purple5: $purple-5;
+  purple6: $purple-6;
+}

package/src/styles/variables.scss

@@ -0,0 +1,146 @@
+// Color System
+// -----------
+
+// Brand colors
+$--color-primary: #409eff;
+$--color-success: #67c23a;
+$--color-warning: #e6a23c;
+$--color-danger: #f56c6c;
+$--color-info: #909399;
+
+// Text colors
+$--color-text-primary: #303133;
+$--color-text-regular: #606266;
+$--color-text-secondary: #909399;
+$--color-text-placeholder: #c0c4cc;
+$--color-text-disabled: #c0c4cc;
+
+// Border colors
+$--border-color-base: #dcdfe6;
+$--border-color-light: #e4e7ed;
+$--border-color-lighter: #ebeef5;
+$--border-color-extra-light: #f2f6fc;
+
+// Background colors
+$--background-color-base: #ffffff;
+$--background-color-light: #f5f7fa;
+
+// Font family
+$--font-path: '~vue2-ui-library/theme-chalk/fonts';
+
+// Typography
+$--font-size-base: 14px;
+$--font-size-small: 13px;
+$--font-size-large: 16px;
+$--font-weight-primary: 500;
+$--font-line-height-primary: 1.5;
+
+// Border radius
+$--border-radius-base: 4px;
+$--border-radius-small: 2px;
+$--border-radius-large: 8px;
+$--border-radius-round: 20px;
+$--border-radius-circle: 100%;
+
+// Spacing
+$--spacing-base: 4px;
+$--spacing-small: 2px;
+$--spacing-large: 8px;
+$--spacing-extra-large: 16px;
+
+// Shadows
+$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .12);
+
+// Transitions
+$--transition-duration: 0.3s;
+$--transition-timing: ease;
+
+// Z-index
+$--index-normal: 1;
+$--index-top: 1000;
+$--index-popper: 2000;
+
+// Component specific variables
+// --------------------------
+
+// Button
+$--button-padding-vertical: 12px;
+$--button-padding-horizontal: 20px;
+$--button-border-radius: $--border-radius-base;
+$--button-font-size: $--font-size-base;
+$--button-border-width: 1px;
+
+// Input
+$--input-height: 40px;
+$--input-border-radius: $--border-radius-base;
+$--input-padding-horizontal: 15px;
+$--input-font-size: $--font-size-base;
+$--input-line-height: 1.5;
+
+// Select
+$--select-height: $--input-height;
+$--select-border-radius: $--border-radius-base;
+$--select-padding-horizontal: $--input-padding-horizontal;
+
+// CSS Variables for theme customization
+:root {
+  // Colors
+  --ui-color-primary: #{$--color-primary};
+  --ui-color-success: #{$--color-success};
+  --ui-color-warning: #{$--color-warning};
+  --ui-color-danger: #{$--color-danger};
+  --ui-color-info: #{$--color-info};
+
+  // Text colors
+  --ui-color-text-primary: #{$--color-text-primary};
+  --ui-color-text-regular: #{$--color-text-regular};
+  --ui-color-text-secondary: #{$--color-text-secondary};
+  --ui-color-text-placeholder: #{$--color-text-placeholder};
+  --ui-color-text-disabled: #{$--color-text-disabled};
+
+  // Border colors
+  --ui-border-color-base: #{$--border-color-base};
+  --ui-border-color-light: #{$--border-color-light};
+  --ui-border-color-lighter: #{$--border-color-lighter};
+  --ui-border-color-extra-light: #{$--border-color-extra-light};
+
+  // Background
+  --ui-background-color-base: #{$--background-color-base};
+  --ui-background-color-light: #{$--background-color-light};
+
+  // Font
+  --ui-font-size-base: #{$--font-size-base};
+  --ui-font-size-small: #{$--font-size-small};
+  --ui-font-size-large: #{$--font-size-large};
+  --ui-font-weight-primary: #{$--font-weight-primary};
+  --ui-font-line-height-primary: #{$--font-line-height-primary};
+
+  // Spacing
+  --ui-spacing-base: #{$--spacing-base};
+  --ui-spacing-small: #{$--spacing-small};
+  --ui-spacing-large: #{$--spacing-large};
+  --ui-spacing-extra-large: #{$--spacing-extra-large};
+
+  // Border radius
+  --ui-border-radius-base: #{$--border-radius-base};
+  --ui-border-radius-small: #{$--border-radius-small};
+  --ui-border-radius-large: #{$--border-radius-large};
+  --ui-border-radius-round: #{$--border-radius-round};
+  --ui-border-radius-circle: #{$--border-radius-circle};
+
+  // Shadows
+  --ui-box-shadow-base: #{$--box-shadow-base};
+  --ui-box-shadow-light: #{$--box-shadow-light};
+  --ui-box-shadow-dark: #{$--box-shadow-dark};
+
+  // Transitions
+  --ui-transition-duration: #{$--transition-duration};
+  --ui-transition-timing: #{$--transition-timing};
+
+  // Z-index
+  --ui-index-normal: #{$--index-normal};
+  --ui-index-top: #{$--index-top};
+  --ui-index-popper: #{$--index-popper};
+}