enr 0.2.3-alpha.2 → 0.2.3-alpha.3

package/styles/common.scss

@@ -7,6 +7,14 @@
   height: 100%;
 }
 
+@for $i from 1 through 10 {
+  $v: #{calc($i * 10)};
+
+  .en-box-shadow-light-red-#{$v} {
+    box-shadow: 0 1px 2px rgb(var(--en-color-red-#{$v}-rgb));
+  }
+}
+
 @for $i from 1 through 10 {
   $v: #{calc($i * 4)};
   // 水平方向的 padding
@@ -44,7 +52,8 @@
   }
 
   // 圆角
-  .en-border-radius-#{$v} {
+  .en-border-radius-#{$v},
+  .en-radius-#{$v} {
     border-radius: #{$v}px;
   }
 }

package/styles/mixin-color-dark.scss

@@ -0,0 +1,150 @@
+@use "./vars-color.scss" as color;
+
+@mixin dark {
+  // 基色
+  --en-color-blue-10: #{color.$en-color-dark-blue-10};
+  --en-color-blue-10-rgb: #{color.$en-color-dark-blue-10-rgb};
+  --en-color-blue-20: #{color.$en-color-dark-blue-20};
+  --en-color-blue-20-rgb: #{color.$en-color-dark-blue-20-rgb};
+  --en-color-blue-30: #{color.$en-color-dark-blue-30};
+  --en-color-blue-30-rgb: #{color.$en-color-dark-blue-30-rgb};
+  --en-color-blue-40: #{color.$en-color-dark-blue-40};
+  --en-color-blue-40-rgb: #{color.$en-color-dark-blue-40-rgb};
+  --en-color-blue-50: #{color.$en-color-dark-blue-50};
+  --en-color-blue-50-rgb: #{color.$en-color-dark-blue-50-rgb};
+  --en-color-blue-60: #{color.$en-color-dark-blue-60};
+  --en-color-blue-60-rgb: #{color.$en-color-dark-blue-60-rgb};
+  --en-color-blue-70: #{color.$en-color-dark-blue-70};
+  --en-color-blue-70-rgb: #{color.$en-color-dark-blue-70-rgb};
+  --en-color-blue-80: #{color.$en-color-dark-blue-80};
+  --en-color-blue-80-rgb: #{color.$en-color-dark-blue-80-rgb};
+  --en-color-blue-90: #{color.$en-color-dark-blue-90};
+  --en-color-blue-90-rgb: #{color.$en-color-dark-blue-90-rgb};
+  --en-color-green-10: #{color.$en-color-dark-green-10};
+  --en-color-green-10-rgb: #{color.$en-color-dark-green-10-rgb};
+  --en-color-green-20: #{color.$en-color-dark-green-20};
+  --en-color-green-20-rgb: #{color.$en-color-dark-green-20-rgb};
+  --en-color-green-30: #{color.$en-color-dark-green-30};
+  --en-color-green-30-rgb: #{color.$en-color-dark-green-30-rgb};
+  --en-color-green-40: #{color.$en-color-dark-green-40};
+  --en-color-green-40-rgb: #{color.$en-color-dark-green-40-rgb};
+  --en-color-green-50: #{color.$en-color-dark-green-50};
+  --en-color-green-50-rgb: #{color.$en-color-dark-green-50-rgb};
+  --en-color-green-60: #{color.$en-color-dark-green-60};
+  --en-color-green-60-rgb: #{color.$en-color-dark-green-60-rgb};
+  --en-color-green-70: #{color.$en-color-dark-green-70};
+  --en-color-green-70-rgb: #{color.$en-color-dark-green-70-rgb};
+  --en-color-green-80: #{color.$en-color-dark-green-80};
+  --en-color-green-80-rgb: #{color.$en-color-dark-green-80-rgb};
+  --en-color-green-90: #{color.$en-color-dark-green-90};
+  --en-color-green-90-rgb: #{color.$en-color-dark-green-90-rgb};
+  --en-color-yellow-10: #{color.$en-color-dark-yellow-10};
+  --en-color-yellow-10-rgb: #{color.$en-color-dark-yellow-10-rgb};
+  --en-color-yellow-20: #{color.$en-color-dark-yellow-20};
+  --en-color-yellow-20-rgb: #{color.$en-color-dark-yellow-20-rgb};
+  --en-color-yellow-30: #{color.$en-color-dark-yellow-30};
+  --en-color-yellow-30-rgb: #{color.$en-color-dark-yellow-30-rgb};
+  --en-color-yellow-40: #{color.$en-color-dark-yellow-40};
+  --en-color-yellow-40-rgb: #{color.$en-color-dark-yellow-40-rgb};
+  --en-color-yellow-50: #{color.$en-color-dark-yellow-50};
+  --en-color-yellow-50-rgb: #{color.$en-color-dark-yellow-50-rgb};
+  --en-color-yellow-60: #{color.$en-color-dark-yellow-60};
+  --en-color-yellow-60-rgb: #{color.$en-color-dark-yellow-60-rgb};
+  --en-color-yellow-70: #{color.$en-color-dark-yellow-70};
+  --en-color-yellow-70-rgb: #{color.$en-color-dark-yellow-70-rgb};
+  --en-color-yellow-80: #{color.$en-color-dark-yellow-80};
+  --en-color-yellow-80-rgb: #{color.$en-color-dark-yellow-80-rgb};
+  --en-color-yellow-90: #{color.$en-color-dark-yellow-90};
+  --en-color-yellow-90-rgb: #{color.$en-color-dark-yellow-90-rgb};
+  --en-color-red-10: #{color.$en-color-dark-red-10};
+  --en-color-red-10-rgb: #{color.$en-color-dark-red-10-rgb};
+  --en-color-red-20: #{color.$en-color-dark-red-20};
+  --en-color-red-20-rgb: #{color.$en-color-dark-red-20-rgb};
+  --en-color-red-30: #{color.$en-color-dark-red-30};
+  --en-color-red-30-rgb: #{color.$en-color-dark-red-30-rgb};
+  --en-color-red-40: #{color.$en-color-dark-red-40};
+  --en-color-red-40-rgb: #{color.$en-color-dark-red-40-rgb};
+  --en-color-red-50: #{color.$en-color-dark-red-50};
+  --en-color-red-50-rgb: #{color.$en-color-dark-red-50-rgb};
+  --en-color-red-60: #{color.$en-color-dark-red-60};
+  --en-color-red-60-rgb: #{color.$en-color-dark-red-60-rgb};
+  --en-color-red-70: #{color.$en-color-dark-red-70};
+  --en-color-red-70-rgb: #{color.$en-color-dark-red-70-rgb};
+  --en-color-red-80: #{color.$en-color-dark-red-80};
+  --en-color-red-80-rgb: #{color.$en-color-dark-red-80-rgb};
+  --en-color-red-90: #{color.$en-color-dark-red-90};
+  --en-color-red-90-rgb: #{color.$en-color-dark-red-90-rgb};
+  --en-color-violet-10: #{color.$en-color-dark-violet-10};
+  --en-color-violet-10-rgb: #{color.$en-color-dark-violet-10-rgb};
+  --en-color-violet-20: #{color.$en-color-dark-violet-20};
+  --en-color-violet-20-rgb: #{color.$en-color-dark-violet-20-rgb};
+  --en-color-violet-30: #{color.$en-color-dark-violet-30};
+  --en-color-violet-30-rgb: #{color.$en-color-dark-violet-30-rgb};
+  --en-color-violet-40: #{color.$en-color-dark-violet-40};
+  --en-color-violet-40-rgb: #{color.$en-color-dark-violet-40-rgb};
+  --en-color-violet-50: #{color.$en-color-dark-violet-50};
+  --en-color-violet-50-rgb: #{color.$en-color-dark-violet-50-rgb};
+  --en-color-violet-60: #{color.$en-color-dark-violet-60};
+  --en-color-violet-60-rgb: #{color.$en-color-dark-violet-60-rgb};
+  --en-color-violet-70: #{color.$en-color-dark-violet-70};
+  --en-color-violet-70-rgb: #{color.$en-color-dark-violet-70-rgb};
+  --en-color-violet-80: #{color.$en-color-dark-violet-80};
+  --en-color-violet-80-rgb: #{color.$en-color-dark-violet-80-rgb};
+  --en-color-violet-90: #{color.$en-color-dark-violet-90};
+  --en-color-violet-90-rgb: #{color.$en-color-dark-violet-90-rgb};
+  --en-color-pink-10: #{color.$en-color-dark-pink-10};
+  --en-color-pink-10-rgb: #{color.$en-color-dark-pink-10-rgb};
+  --en-color-pink-20: #{color.$en-color-dark-pink-20};
+  --en-color-pink-20-rgb: #{color.$en-color-dark-pink-20-rgb};
+  --en-color-pink-30: #{color.$en-color-dark-pink-30};
+  --en-color-pink-30-rgb: #{color.$en-color-dark-pink-30-rgb};
+  --en-color-pink-40: #{color.$en-color-dark-pink-40};
+  --en-color-pink-40-rgb: #{color.$en-color-dark-pink-40-rgb};
+  --en-color-pink-50: #{color.$en-color-dark-pink-50};
+  --en-color-pink-50-rgb: #{color.$en-color-dark-pink-50-rgb};
+  --en-color-pink-60: #{color.$en-color-dark-pink-60};
+  --en-color-pink-60-rgb: #{color.$en-color-dark-pink-60-rgb};
+  --en-color-pink-70: #{color.$en-color-dark-pink-70};
+  --en-color-pink-70-rgb: #{color.$en-color-dark-pink-70-rgb};
+  --en-color-pink-80: #{color.$en-color-dark-pink-80};
+  --en-color-pink-80-rgb: #{color.$en-color-dark-pink-80-rgb};
+  --en-color-pink-90: #{color.$en-color-dark-pink-90};
+  --en-color-pink-90-rgb: #{color.$en-color-dark-pink-90-rgb};
+
+  // 文本色
+  --en-text-primary: var(--en-color-beige);
+  --en-text-secondary: var(--en-color-brightness-20);
+  --en-text-active: var(--en-color-brightness-50);
+  --en-text-inactive: rgba(var(--en-color-bright-20-rgb), 0.76);
+  --en-text-link: var(--en-color-blue-30);
+  --en-text-invert: var(--en-color-brightness-90); // 文本反转色
+  --en-text-muted: var(--en-color-brightness-60); // 温和文本色
+  // 背景色
+  --en-background-primary: var(--en-color-brightness-90);
+  --en-background-secondary: var(--en-color-brightness-75);
+  --en-background-tertiary: var(--en-color-brightness-60);
+  // 边框
+  --en-border-primary: var(--en-color-brightness-50);
+  --en-border-secondary: var(--en-color-brightness-60);
+  // 成功盒子的提示框
+  --en-border-success: var(--en-color-green-20);
+  // 按钮
+  --en-button-primary: var(--en-color-bright-10);
+  --en-button-primary-hover: var(--en-color-brightness-15);
+  --en-button-primary-active: var(--en-color-brightness-30);
+  --en-button-primary-inactive: var(--en-color-white);
+  --en-button-secondary: var(--en-color-bright-70);
+  --en-button-secondary-hover: var(--en-color-brightness-50);
+  --en-button-secondary-active: var(--en-color-brightness-40);
+  --en-button-secondary-inactive: var(--en-color-brightness-70);
+  --en-button-secondary-border-focus: var(--en-color-light-blue-60);
+  // 红框按钮
+  --en-button-secondary-border-red: var(--en-color-light-red-30);
+  --en-button-secondary-border-red-focus: var(--en-color-light-red-10);
+  --en-box-shadow-light: 0 1px 2px rgba(var(--en-color-brightness-10), 0.2);
+  --en-box-shadow-dark: 0 1px 6px rgba(var(--en-color-brightness-10), 0.2);
+
+  color-scheme: dark;
+  color: var(--en--color-text-primary, #f0f2e5);
+  background-color: var(--en-color-background-primary, #333333);
+}

package/styles/mixin-color-light.scss

@@ -0,0 +1,148 @@
+@use "./vars-color.scss" as color;
+
+@mixin light {
+  // 基色
+  --en-color-blue-10: #{color.$en-color-light-blue-10};
+  --en-color-blue-10-rgb: #{color.$en-color-light-blue-10-rgb};
+  --en-color-blue-20: #{color.$en-color-light-blue-20};
+  --en-color-blue-20-rgb: #{color.$en-color-light-blue-20-rgb};
+  --en-color-blue-30: #{color.$en-color-light-blue-30};
+  --en-color-blue-30-rgb: #{color.$en-color-light-blue-30-rgb};
+  --en-color-blue-40: #{color.$en-color-light-blue-40};
+  --en-color-blue-40-rgb: #{color.$en-color-light-blue-40-rgb};
+  --en-color-blue-50: #{color.$en-color-light-blue-50};
+  --en-color-blue-50-rgb: #{color.$en-color-light-blue-50-rgb};
+  --en-color-blue-60: #{color.$en-color-light-blue-60};
+  --en-color-blue-60-rgb: #{color.$en-color-light-blue-60-rgb};
+  --en-color-blue-70: #{color.$en-color-light-blue-70};
+  --en-color-blue-70-rgb: #{color.$en-color-light-blue-70-rgb};
+  --en-color-blue-80: #{color.$en-color-light-blue-80};
+  --en-color-blue-80-rgb: #{color.$en-color-light-blue-80-rgb};
+  --en-color-blue-90: #{color.$en-color-light-blue-90};
+  --en-color-blue-90-rgb: #{color.$en-color-light-blue-90-rgb};
+  --en-color-green-10: #{color.$en-color-light-green-10};
+  --en-color-green-10-rgb: #{color.$en-color-light-green-10-rgb};
+  --en-color-green-20: #{color.$en-color-light-green-20};
+  --en-color-green-20-rgb: #{color.$en-color-light-green-20-rgb};
+  --en-color-green-30: #{color.$en-color-light-green-30};
+  --en-color-green-30-rgb: #{color.$en-color-light-green-30-rgb};
+  --en-color-green-40: #{color.$en-color-light-green-40};
+  --en-color-green-40-rgb: #{color.$en-color-light-green-40-rgb};
+  --en-color-green-50: #{color.$en-color-light-green-50};
+  --en-color-green-50-rgb: #{color.$en-color-light-green-50-rgb};
+  --en-color-green-60: #{color.$en-color-light-green-60};
+  --en-color-green-60-rgb: #{color.$en-color-light-green-60-rgb};
+  --en-color-green-70: #{color.$en-color-light-green-70};
+  --en-color-green-70-rgb: #{color.$en-color-light-green-70-rgb};
+  --en-color-green-80: #{color.$en-color-light-green-80};
+  --en-color-green-80-rgb: #{color.$en-color-light-green-80-rgb};
+  --en-color-green-90: #{color.$en-color-light-green-90};
+  --en-color-green-90-rgb: #{color.$en-color-light-green-90-rgb};
+  --en-color-yellow-10: #{color.$en-color-light-yellow-10};
+  --en-color-yellow-10-rgb: #{color.$en-color-light-yellow-10-rgb};
+  --en-color-yellow-20: #{color.$en-color-light-yellow-20};
+  --en-color-yellow-20-rgb: #{color.$en-color-light-yellow-20-rgb};
+  --en-color-yellow-30: #{color.$en-color-light-yellow-30};
+  --en-color-yellow-30-rgb: #{color.$en-color-light-yellow-30-rgb};
+  --en-color-yellow-40: #{color.$en-color-light-yellow-40};
+  --en-color-yellow-40-rgb: #{color.$en-color-light-yellow-40-rgb};
+  --en-color-yellow-50: #{color.$en-color-light-yellow-50};
+  --en-color-yellow-50-rgb: #{color.$en-color-light-yellow-50-rgb};
+  --en-color-yellow-60: #{color.$en-color-light-yellow-60};
+  --en-color-yellow-60-rgb: #{color.$en-color-light-yellow-60-rgb};
+  --en-color-yellow-70: #{color.$en-color-light-yellow-70};
+  --en-color-yellow-70-rgb: #{color.$en-color-light-yellow-70-rgb};
+  --en-color-yellow-80: #{color.$en-color-light-yellow-80};
+  --en-color-yellow-80-rgb: #{color.$en-color-light-yellow-80-rgb};
+  --en-color-yellow-90: #{color.$en-color-light-yellow-90};
+  --en-color-yellow-90-rgb: #{color.$en-color-light-yellow-90-rgb};
+  --en-color-red-10: #{color.$en-color-light-red-10};
+  --en-color-red-10-rgb: #{color.$en-color-light-red-10-rgb};
+  --en-color-red-20: #{color.$en-color-light-red-20};
+  --en-color-red-20-rgb: #{color.$en-color-light-red-20-rgb};
+  --en-color-red-30: #{color.$en-color-light-red-30};
+  --en-color-red-30-rgb: #{color.$en-color-light-red-30-rgb};
+  --en-color-red-40: #{color.$en-color-light-red-40};
+  --en-color-red-40-rgb: #{color.$en-color-light-red-40-rgb};
+  --en-color-red-50: #{color.$en-color-light-red-50};
+  --en-color-red-50-rgb: #{color.$en-color-light-red-50-rgb};
+  --en-color-red-60: #{color.$en-color-light-red-60};
+  --en-color-red-60-rgb: #{color.$en-color-light-red-60-rgb};
+  --en-color-red-70: #{color.$en-color-light-red-70};
+  --en-color-red-70-rgb: #{color.$en-color-light-red-70-rgb};
+  --en-color-red-80: #{color.$en-color-light-red-80};
+  --en-color-red-80-rgb: #{color.$en-color-light-red-80-rgb};
+  --en-color-red-90: #{color.$en-color-light-red-90};
+  --en-color-red-90-rgb: #{color.$en-color-light-red-90-rgb};
+  --en-color-violet-10: #{color.$en-color-light-violet-10};
+  --en-color-violet-10-rgb: #{color.$en-color-light-violet-10-rgb};
+  --en-color-violet-20: #{color.$en-color-light-violet-20};
+  --en-color-violet-20-rgb: #{color.$en-color-light-violet-20-rgb};
+  --en-color-violet-30: #{color.$en-color-light-violet-30};
+  --en-color-violet-30-rgb: #{color.$en-color-light-violet-30-rgb};
+  --en-color-violet-40: #{color.$en-color-light-violet-40};
+  --en-color-violet-40-rgb: #{color.$en-color-light-violet-40-rgb};
+  --en-color-violet-50: #{color.$en-color-light-violet-50};
+  --en-color-violet-50-rgb: #{color.$en-color-light-violet-50-rgb};
+  --en-color-violet-60: #{color.$en-color-light-violet-60};
+  --en-color-violet-60-rgb: #{color.$en-color-light-violet-60-rgb};
+  --en-color-violet-70: #{color.$en-color-light-violet-70};
+  --en-color-violet-70-rgb: #{color.$en-color-light-violet-70-rgb};
+  --en-color-violet-80: #{color.$en-color-light-violet-80};
+  --en-color-violet-80-rgb: #{color.$en-color-light-violet-80-rgb};
+  --en-color-violet-90: #{color.$en-color-light-violet-90};
+  --en-color-violet-90-rgb: #{color.$en-color-light-violet-90-rgb};
+  --en-color-pink-10: #{color.$en-color-light-pink-10};
+  --en-color-pink-10-rgb: #{color.$en-color-light-pink-10-rgb};
+  --en-color-pink-20: #{color.$en-color-light-pink-20};
+  --en-color-pink-20-rgb: #{color.$en-color-light-pink-20-rgb};
+  --en-color-pink-30: #{color.$en-color-light-pink-30};
+  --en-color-pink-30-rgb: #{color.$en-color-light-pink-30-rgb};
+  --en-color-pink-40: #{color.$en-color-light-pink-40};
+  --en-color-pink-40-rgb: #{color.$en-color-light-pink-40-rgb};
+  --en-color-pink-50: #{color.$en-color-light-pink-50};
+  --en-color-pink-50-rgb: #{color.$en-color-light-pink-50-rgb};
+  --en-color-pink-60: #{color.$en-color-light-pink-60};
+  --en-color-pink-60-rgb: #{color.$en-color-light-pink-60-rgb};
+  --en-color-pink-70: #{color.$en-color-light-pink-70};
+  --en-color-pink-70-rgb: #{color.$en-color-light-pink-70-rgb};
+  --en-color-pink-80: #{color.$en-color-light-pink-80};
+  --en-color-pink-80-rgb: #{color.$en-color-light-pink-80-rgb};
+  --en-color-pink-90: #{color.$en-color-light-pink-90};
+  --en-color-pink-90-rgb: #{color.$en-color-light-pink-90-rgb};
+  // 文本色
+  --en-text-primary: var(--en-color-brightness-85);
+  --en-text-secondary: var(--en-color-brightness-70);
+  --en-text-active: var(--en-color-brightness-50);
+  --en-text-inactive: rgba(var(--en-color-bright-40-rgb), 0.76);
+  --en-text-link: var(--en-color-blue-70);
+  --en-text-invert: var(--en-color-white); // 文本反转色
+  --en-text-muted: var(--en-color-brightness-65); // 温和文本色
+  // 背景色
+  --en-background-primary: var(--en-color-brightness-10);
+  --en-background-secondary: var(--en-color-brightness-15);
+  --en-background-tertiary: var(--en-color-brightness-20);
+  // 边框
+  --en-border-primary: var(--en-color-brightness-10);
+  --en-border-secondary: var(--en-color-brightness-15);
+  // 成功盒子的提示框
+  --en-border-success: var(--en-color-green-20);
+  // 按钮
+  --en-button-primary: var(--en-color-brightness-85);
+  --en-button-primary-hover: var(--en-color-brightness-60);
+  --en-button-primary-active: var(--en-color-brightness-40);
+  --en-button-primary-inactive: var(--en-color-brightness-85);
+  --en-button-secondary: var(--en-color-white);
+  --en-button-secondary-hover: var(--en-color-brightness-20);
+  --en-button-secondary-active: var(--en-color-brightness-20);
+  --en-button-secondary-inactive: var(--en-color-brightness-15);
+  --en-button-secondary-border-focus: var(--en-color-light-blue-50);
+  // 红框按钮
+  --en-button-secondary-border-red: var(--en-color-light-red-30);
+  --en-button-secondary-border-red-focus: var(--en-color-light-red-10);
+  --en-box-shadow-light: 0 1px 2px rgba(var(--en-color-brightness-80), 0.05);
+  --en-box-shadow-dark: 0 1px 6px rgba(var(--en-color-brightness-80), 0.1);
+  color-scheme: light;
+  color: var(--en-text-primary, #3a3b3f);
+  background-color: var(--en-background-primary, #f0f2e6);
+}

package/styles/root.scss

@@ -1,212 +1,86 @@
 @use "./vars-color.scss" as color;
+@use "./mixin-color-light.scss" as light;
+@use "./mixin-color-dark.scss" as dark;
 
 :root {
-  --en-color-neutral-70: #{color.$en-color-neutral-light-70};
-  --en-color-neutral-80: #{color.$en-color-neutral-light-80};
-  --en-color-neutral-90: #{color.$en-color-neutral-light-90};
-  --en-color-neutral-10: #{color.$en-color-neutral-10};
-  --en-color-neutral-20: #{color.$en-color-neutral-20};
-  --en-color-neutral-30: #{color.$en-color-neutral-30};
-  --en-color-neutral-40: #{color.$en-color-neutral-40};
-  --en-color-neutral-50: #{color.$en-color-neutral-50};
-  --en-color-neutral-60: #{color.$en-color-neutral-60};
-  --en-color-neutral-70: #{color.$en-color-neutral-70};
-  --en-color-neutral-75: #{color.$en-color-neutral-75};
-  --en-color-neutral-80: #{color.$en-color-neutral-80};
-  --en-color-neutral-90: #{color.$en-color-neutral-90};
+  --en-color-brightness-10: #{color.$en-color-brightness-10};
+  --en-color-brightness-20: #{color.$en-color-brightness-20};
+  --en-color-brightness-30: #{color.$en-color-brightness-30};
+  --en-color-brightness-40: #{color.$en-color-brightness-40};
+  --en-color-brightness-50: #{color.$en-color-brightness-50};
+  --en-color-brightness-60: #{color.$en-color-brightness-60};
+  --en-color-brightness-70: #{color.$en-color-brightness-70};
+  --en-color-brightness-75: #{color.$en-color-brightness-75};
+  --en-color-brightness-80: #{color.$en-color-brightness-80};
+  --en-color-brightness-90: #{color.$en-color-brightness-90};
   --en-color-black: #{color.$en-color-black};
   --en-color-white: #{color.$en-color-white};
-  --en-color-ads: #{color.$en-color-ads};
-}
-
-@mixin light {
-  // 基色
-  --en-color-blue: #{color.$en-color-light-blue};
-  --en-color-green: #{color.$en-color-light-green};
-  --en-color-yellow: #{color.$en-color-light-yellow};
-  --en-color-red: #{color.$en-color-light-red};
-  --en-color-violet: #{color.$en-color-light-violet};
-  --en-color-pink: #{color.$en-color-light-pink};
-  --en-color-blue-10: #{color.$en-color-light-blue-10};
-  --en-color-blue-20: #{color.$en-color-light-blue-20};
-  --en-color-blue-30: #{color.$en-color-light-blue-30};
-  --en-color-blue-40: #{color.$en-color-light-blue-40};
-  --en-color-blue-50: #{color.$en-color-light-blue-50};
-  --en-color-blue-60: #{color.$en-color-light-blue-60};
-  --en-color-blue-70: #{color.$en-color-light-blue-70};
-  --en-color-blue-80: #{color.$en-color-light-blue-80};
-  --en-color-blue-90: #{color.$en-color-light-blue-90};
-  --en-color-green-10: #{color.$en-color-light-green-10};
-  --en-color-green-20: #{color.$en-color-light-green-20};
-  --en-color-green-30: #{color.$en-color-light-green-30};
-  --en-color-green-40: #{color.$en-color-light-green-40};
-  --en-color-green-50: #{color.$en-color-light-green-50};
-  --en-color-green-60: #{color.$en-color-light-green-60};
-  --en-color-green-70: #{color.$en-color-light-green-70};
-  --en-color-green-80: #{color.$en-color-light-green-80};
-  --en-color-green-90: #{color.$en-color-light-green-90};
-  --en-color-yellow-10: #{color.$en-color-light-yellow-10};
-  --en-color-yellow-20: #{color.$en-color-light-yellow-20};
-  --en-color-yellow-30: #{color.$en-color-light-yellow-30};
-  --en-color-yellow-40: #{color.$en-color-light-yellow-40};
-  --en-color-yellow-50: #{color.$en-color-light-yellow-50};
-  --en-color-yellow-60: #{color.$en-color-light-yellow-60};
-  --en-color-yellow-70: #{color.$en-color-light-yellow-70};
-  --en-color-yellow-80: #{color.$en-color-light-yellow-80};
-  --en-color-yellow-90: #{color.$en-color-light-yellow-90};
-  --en-color-red-10: #{color.$en-color-light-red-10};
-  --en-color-red-20: #{color.$en-color-light-red-20};
-  --en-color-red-30: #{color.$en-color-light-red-30};
-  --en-color-red-40: #{color.$en-color-light-red-40};
-  --en-color-red-50: #{color.$en-color-light-red-50};
-  --en-color-red-60: #{color.$en-color-light-red-60};
-  --en-color-red-70: #{color.$en-color-light-red-70};
-  --en-color-red-80: #{color.$en-color-light-red-80};
-  --en-color-red-90: #{color.$en-color-light-red-90};
-  --en-color-violet-10: #{color.$en-color-light-violet-10};
-  --en-color-violet-20: #{color.$en-color-light-violet-20};
-  --en-color-violet-30: #{color.$en-color-light-violet-30};
-  --en-color-violet-40: #{color.$en-color-light-violet-40};
-  --en-color-violet-50: #{color.$en-color-light-violet-50};
-  --en-color-violet-60: #{color.$en-color-light-violet-60};
-  --en-color-violet-70: #{color.$en-color-light-violet-70};
-  --en-color-violet-80: #{color.$en-color-light-violet-80};
-  --en-color-violet-90: #{color.$en-color-light-violet-90};
-  --en-color-blue: #{color.$en-color-light-blue};
-  --en-color-green: #{color.$en-color-light-green};
-  --en-color-yellow: #{color.$en-color-light-yellow};
-  --en-color-red: #{color.$en-color-light-red};
-  --en-color-violet: #{color.$en-color-light-violet};
-  --en-color-pink: #{color.$en-color-light-pink};
-  // 文本色
-  --en-text-primary: var(--en-color-light-blue-30);
-  --en-text-secondary: #4e4e4e;
-  --en-text-invert: var(--en-primary-white); // 文本反转色
-  --en-text-muted: var(--en-primary-dust); // 温和文本色
-  // 链接文本色
-  --en-text-link: #0069c2;
-  --en-text-visited: #551a8b;
-  --en-text-hover: var(--en-primary-red);
-  --en-text-visited: #551a8b;
-  --en-text-active: #858585;
-  --en-text-inactive: #9e9e9ea6; // 无效链接色
-  // 背景色
-  --en-background-primary: var(--en-primary-white);
-  --en-background-tab-level-1: var(--en-primary-black);
-  --en-background-tab-level-2: var(--en-primary-dust);
-  --en-background-tab-transparent: #6666;
-  --en-table-border-color: #000;
-  --en-curriculum-shadow: 4px 4px 8px 0 #b3b3b32e, -4px 4px 8px 0 #b3b3b326;
-  --en-curriculum-shadow-landing-about-ul: 0 4px 10px 0 #e3642a0f, 0 -2px 4px 0 #b25c350f;
-  --en-box-shadow: 1px 1px 12px #6666;
-  --en-box-shadow-primary: 1px 1px 12px #6666;
-  --en-box-shadow-primary-small: 1px 1px 3px #6666;
-  --en-box-shadow-primary-large: 1px 1px 24px #6666;
-  color-scheme: light;
-}
-
-@mixin dark {
-  // 基色
-  --en-color-blue: #{color.$en-color-dark-blue};
-  --en-color-green: #{color.$en-color-dark-green};
-  --en-color-yellow: #{color.$en-color-dark-yellow};
-  --en-color-red: #{color.$en-color-dark-red};
-  --en-color-violet: #{color.$en-color-dark-violet};
-  --en-color-pink: #{color.$en-color-dark-pink};
-  --en-color-blue-10: #{color.$en-color-dark-blue-10};
-  --en-color-blue-20: #{color.$en-color-dark-blue-20};
-  --en-color-blue-30: #{color.$en-color-dark-blue-30};
-  --en-color-blue-40: #{color.$en-color-dark-blue-40};
-  --en-color-blue-50: #{color.$en-color-dark-blue-50};
-  --en-color-blue-60: #{color.$en-color-dark-blue-60};
-  --en-color-blue-70: #{color.$en-color-dark-blue-70};
-  --en-color-blue-80: #{color.$en-color-dark-blue-80};
-  --en-color-blue-90: #{color.$en-color-dark-blue-90};
-  --en-color-green-10: #{color.$en-color-dark-green-10};
-  --en-color-green-20: #{color.$en-color-dark-green-20};
-  --en-color-green-30: #{color.$en-color-dark-green-30};
-  --en-color-green-40: #{color.$en-color-dark-green-40};
-  --en-color-green-50: #{color.$en-color-dark-green-50};
-  --en-color-green-60: #{color.$en-color-dark-green-60};
-  --en-color-green-70: #{color.$en-color-dark-green-70};
-  --en-color-green-80: #{color.$en-color-dark-green-80};
-  --en-color-green-90: #{color.$en-color-dark-green-90};
-  --en-color-yellow-10: #{color.$en-color-dark-yellow-10};
-  --en-color-yellow-20: #{color.$en-color-dark-yellow-20};
-  --en-color-yellow-30: #{color.$en-color-dark-yellow-30};
-  --en-color-yellow-40: #{color.$en-color-dark-yellow-40};
-  --en-color-yellow-50: #{color.$en-color-dark-yellow-50};
-  --en-color-yellow-60: #{color.$en-color-dark-yellow-60};
-  --en-color-yellow-70: #{color.$en-color-dark-yellow-70};
-  --en-color-yellow-80: #{color.$en-color-dark-yellow-80};
-  --en-color-yellow-90: #{color.$en-color-dark-yellow-90};
-  --en-color-red-10: #{color.$en-color-dark-red-10};
-  --en-color-red-20: #{color.$en-color-dark-red-20};
-  --en-color-red-30: #{color.$en-color-dark-red-30};
-  --en-color-red-40: #{color.$en-color-dark-red-40};
-  --en-color-red-50: #{color.$en-color-dark-red-50};
-  --en-color-red-60: #{color.$en-color-dark-red-60};
-  --en-color-red-70: #{color.$en-color-dark-red-70};
-  --en-color-red-80: #{color.$en-color-dark-red-80};
-  --en-color-red-90: #{color.$en-color-dark-red-90};
-  --en-color-violet-10: #{color.$en-color-dark-violet-10};
-  --en-color-violet-20: #{color.$en-color-dark-violet-20};
-  --en-color-violet-30: #{color.$en-color-dark-violet-30};
-  --en-color-violet-40: #{color.$en-color-dark-violet-40};
-  --en-color-violet-50: #{color.$en-color-dark-violet-50};
-  --en-color-violet-60: #{color.$en-color-dark-violet-60};
-  --en-color-violet-70: #{color.$en-color-dark-violet-70};
-  --en-color-violet-80: #{color.$en-color-dark-violet-80};
-  --en-color-violet-90: #{color.$en-color-dark-violet-90};
-  --en-color-blue: #{color.$en-color-dark-blue};
-  --en-color-green: #{color.$en-color-dark-green};
-  --en-color-yellow: #{color.$en-color-dark-yellow};
-  --en-color-red: #{color.$en-color-dark-red};
-  --en-color-violet: #{color.$en-color-dark-violet};
-  --en-color-pink: #{color.$en-color-dark-pink};
-  // 文本色
-  --en-text-primary: #fff;
-  --en-text-secondary: #cdcdcd;
-  --en-text-invert: var(--en-primary-black); // 文本反转色
-  --en-text-muted: var(--en-primary-dust); // 温和文本色
-  // 普通链接文本色
-  --en-text-link: #8cb4ff;
-  --en-text-visited: #ffadff;
-  --en-text-hover: var(--en-primary-red);
-  --en-text-active: #858585;
-  --en-text-inactive: #cdcdcda6; // 无效链接色
-  //  背景色
-  --en-background-primary: var(--en-primary-black);
-  --en-background-tab-level-1: #666666;
-  --en-background-tab-level-2: var(--en-primary-dust);
-  --en-background-tab-transparent: #6666;
-  --en-table-border-color: #ff3663;
-  --en-box-shadow: 1px 1px 12px #6666;
-  --en-box-shadow-primary: 1px 1px 12px #6666;
-  --en-box-shadow-primary-small: 1px 1px 3px #6666;
-  --en-box-shadow-primary-large: 1px 1px 24px #6666;
-  color-scheme: dark;
-}
-
-:root {
-  @include light();
+  --en-color-blue: #{color.$en-color-blue};
+  --en-color-green: #{color.$en-color-green};
+  --en-color-yellow: #{color.$en-color-yellow};
+  --en-color-red: #{color.$en-color-red};
+  --en-color-violet: #{color.$en-color-violet};
+  --en-color-pink: #{color.$en-color-pink};
+  --en-color-beige: #{color.$en-color-beige};
+  --en-spacing-unit: 8px;
+  --en-spacing-1: calc(var(--en-spacing-unit) * 0.5);
+  --en-spacing-2: var(--en-spacing-unit);
+  --en-spacing-3: calc(var(--en-spacing-unit) * 1.5);
+  --en-spacing-4: calc(var(--en-spacing-unit) * 2);
+  --en-spacing-5: calc(var(--en-spacing-unit) * 2.5);
+  --en-spacing-6: calc(var(--en-spacing-unit) * 3);
+  --en-spacing-7: calc(var(--en-spacing-unit) * 3.5);
+  --en-spacing-8: calc(var(--en-spacing-unit) * 4);
+  --en-spacing-9: calc(var(--en-spacing-unit) * 4.5);
+  --en-spacing-10: calc(var(--en-spacing-unit) * 5);
+  --en-spacing-11: calc(var(--en-spacing-unit) * 5.5);
+  --en-spacing-12: calc(var(--en-spacing-unit) * 6);
+  --en-spacing-13: calc(var(--en-spacing-unit) * 6.5);
+  --en-spacing-14: calc(var(--en-spacing-unit) * 7);
+  --en-spacing-15: calc(var(--en-spacing-unit) * 7.5);
+  --en-spacing-16: calc(var(--en-spacing-unit) * 8);
+  --en-spacing-17: calc(var(--en-spacing-unit) * 8.5);
+  --en-spacing-18: calc(var(--en-spacing-unit) * 9);
+  --en-spacing-19: calc(var(--en-spacing-unit) * 9.5);
+  --en-spacing-20: calc(var(--en-spacing-unit) * 10);
+  --en-spacing-21: calc(var(--en-spacing-unit) * 10.5);
+  --en-spacing-22: calc(var(--en-spacing-unit) * 11);
+  --en-spacing-23: calc(var(--en-spacing-unit) * 11.5);
+  --en-spacing-24: calc(var(--en-spacing-unit) * 12);
+  --en-font-size-base: 1rem;
+  --en-font-size-small: 0.875rem;
+  --en-font-size-middle: 1.125rem;
+  --en-font-size-large: 1.5rem;
+  --en-font-size-extra-large: 2.25rem;
+  --en-font-size-two-extra-large: 3rem;
+  --en-radius-small: 0.25rem;
+  --en-border-radius-small: var(--en-radius-small);
+  --en-radius-middle: 0.5rem;
+  --en-border-radius-middle: var(--en-radius-middle);
+  --en-radius-card: 0.75rem;
+  --en-border-radius-card: var(--en-border-radius-card);
+  --en-radius-full: 100vmax;
+  --en-border-radius-full: var(--en-radius-full);
+  --en-transition-fast: 0.1s;
+  --en-transition-medium: 0.2s;
+  --en-transition-slow: 0.3s;
 }
 
 @media (prefers-color-scheme: light) {
   :root:not(.en-light):not(.en-dark) {
-    @include light();
+    @include light.light();
   }
 }
 @media (prefers-color-scheme: dark) {
   :root:not(.en-light):not(.en-dark) {
-    @include dark();
+    @include dark.dark();
   }
 }
 
 .en-light {
-  @include light();
+  @include light.light();
 }
 
 .en-dark {
-  @include dark();
+  @include dark.dark();
 }