enr 0.2.3-alpha.3 → 1.0.0

package/styles/root.scss

@@ -1,86 +1,326 @@
-@use "./vars-color.scss" as color;
-@use "./mixin-color-light.scss" as light;
-@use "./mixin-color-dark.scss" as dark;
+@use './vars-color.scss' as color;
+@use './root-normal-light.scss' as light;
+@use './root-normal-dark.scss' as dark;
+@use './root-weird-dark.scss' as weirdDark;
+@use './vars-size.scss' as size;
 
 :root {
-  --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-darkness-10: #{color.$en-color-darkness-10};
+  --en-color-darkness-10-rgb: #{color.$en-color-darkness-10-rgb};
+  --en-color-darkness-15: #{color.$en-color-darkness-15};
+  --en-color-darkness-15-rgb: #{color.$en-color-darkness-15-rgb};
+  --en-color-darkness-20: #{color.$en-color-darkness-20};
+  --en-color-darkness-20-rgb: #{color.$en-color-darkness-20-rgb};
+  --en-color-darkness-25: #{color.$en-color-darkness-25};
+  --en-color-darkness-25-rgb: #{color.$en-color-darkness-25-rgb};
+  --en-color-darkness-30: #{color.$en-color-darkness-30};
+  --en-color-darkness-30-rgb: #{color.$en-color-darkness-30-rgb};
+  --en-color-darkness-35: #{color.$en-color-darkness-35};
+  --en-color-darkness-35-rgb: #{color.$en-color-darkness-35-rgb};
+  --en-color-darkness-40: #{color.$en-color-darkness-40};
+  --en-color-darkness-40-rgb: #{color.$en-color-darkness-40-rgb};
+  --en-color-darkness-45: #{color.$en-color-darkness-45};
+  --en-color-darkness-45-rgb: #{color.$en-color-darkness-45-rgb};
+  --en-color-darkness-50: #{color.$en-color-darkness-50};
+  --en-color-darkness-50-rgb: #{color.$en-color-darkness-50-rgb};
+  --en-color-darkness-55: #{color.$en-color-darkness-55};
+  --en-color-darkness-55-rgb: #{color.$en-color-darkness-55-rgb};
+  --en-color-darkness-60: #{color.$en-color-darkness-60};
+  --en-color-darkness-60-rgb: #{color.$en-color-darkness-60-rgb};
+  --en-color-darkness-65: #{color.$en-color-darkness-65};
+  --en-color-darkness-65-rgb: #{color.$en-color-darkness-65-rgb};
+  --en-color-darkness-70: #{color.$en-color-darkness-70};
+  --en-color-darkness-70-rgb: #{color.$en-color-darkness-70-rgb};
+  --en-color-darkness-75: #{color.$en-color-darkness-75};
+  --en-color-darkness-75-rgb: #{color.$en-color-darkness-75-rgb};
+  --en-color-darkness-80: #{color.$en-color-darkness-80};
+  --en-color-darkness-80-rgb: #{color.$en-color-darkness-80-rgb};
+  --en-color-darkness-85: #{color.$en-color-darkness-85};
+  --en-color-darkness-85-rgb: #{color.$en-color-darkness-85-rgb};
+  --en-color-darkness-90: #{color.$en-color-darkness-90};
+  --en-color-darkness-90-rgb: #{color.$en-color-darkness-90-rgb};
   --en-color-blue: #{color.$en-color-blue};
+  --en-color-blue-rgb: #{color.$en-color-blue-rgb};
+  --en-color-cyan: #{color.$en-color-cyan};
+  --en-color-cyan-rgb: #{color.$en-color-cyan-rgb};
+  --en-color-lime: #{color.$en-color-lime};
+  --en-color-lime-rgb: #{color.$en-color-lime-rgb};
   --en-color-green: #{color.$en-color-green};
+  --en-color-green-rgb: #{color.$en-color-green-rgb};
   --en-color-yellow: #{color.$en-color-yellow};
+  --en-color-yellow-rgb: #{color.$en-color-yellow-rgb};
+  --en-color-volcano: #{color.$en-color-volcano};
+  --en-color-volcano-rgb: #{color.$en-color-volcano-rgb};
+  --en-color-gold: #{color.$en-color-gold};
+  --en-color-gold-rgb: #{color.$en-color-gold-rgb};
+  --en-color-orange: #{color.$en-color-orange};
+  --en-color-orange-rgb: #{color.$en-color-orange-rgb};
   --en-color-red: #{color.$en-color-red};
+  --en-color-red-rgb: #{color.$en-color-red-rgb};
   --en-color-violet: #{color.$en-color-violet};
+  --en-color-violet-rgb: #{color.$en-color-violet-rgb};
   --en-color-pink: #{color.$en-color-pink};
+  --en-color-pink-rgb: #{color.$en-color-pink-rgb};
   --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-color-beige-rgb: #{color.$en-color-beige-rgb};
+  --en-color-black: #{color.$en-color-black};
+  --en-color-black-rgb: #{color.$en-color-black-rgb};
+  --en-color-white: #{color.$en-color-white};
+  --en-color-white-rgb: #{color.$en-color-white-rgb};
+  --en-color-blue-10: #{color.$en-color-blue-10};
+  --en-color-blue-10-rgb: #{color.$en-color-blue-10-rgb};
+  --en-color-blue-20: #{color.$en-color-blue-20};
+  --en-color-blue-20-rgb: #{color.$en-color-blue-20-rgb};
+  --en-color-blue-30: #{color.$en-color-blue-30};
+  --en-color-blue-30-rgb: #{color.$en-color-blue-30-rgb};
+  --en-color-blue-40: #{color.$en-color-blue-40};
+  --en-color-blue-40-rgb: #{color.$en-color-blue-40-rgb};
+  --en-color-blue-50: #{color.$en-color-blue-50};
+  --en-color-blue-50-rgb: #{color.$en-color-blue-50-rgb};
+  --en-color-blue-60: #{color.$en-color-blue-60};
+  --en-color-blue-60-rgb: #{color.$en-color-blue-60-rgb};
+  --en-color-blue-70: #{color.$en-color-blue-70};
+  --en-color-blue-70-rgb: #{color.$en-color-blue-70-rgb};
+  --en-color-blue-80: #{color.$en-color-blue-80};
+  --en-color-blue-80-rgb: #{color.$en-color-blue-80-rgb};
+  --en-color-blue-90: #{color.$en-color-blue-90};
+  --en-color-blue-90-rgb: #{color.$en-color-blue-90-rgb};
+  --en-color-volcano-10: #{color.$en-color-volcano-10};
+  --en-color-volcano-10-rgb: #{color.$en-color-volcano-10-rgb};
+  --en-color-volcano-20: #{color.$en-color-volcano-20};
+  --en-color-volcano-20-rgb: #{color.$en-color-volcano-20-rgb};
+  --en-color-volcano-30: #{color.$en-color-volcano-30};
+  --en-color-volcano-30-rgb: #{color.$en-color-volcano-30-rgb};
+  --en-color-volcano-40: #{color.$en-color-volcano-40};
+  --en-color-volcano-40-rgb: #{color.$en-color-volcano-40-rgb};
+  --en-color-volcano-50: #{color.$en-color-volcano-50};
+  --en-color-volcano-50-rgb: #{color.$en-color-volcano-50-rgb};
+  --en-color-volcano-60: #{color.$en-color-volcano-60};
+  --en-color-volcano-60-rgb: #{color.$en-color-volcano-60-rgb};
+  --en-color-volcano-70: #{color.$en-color-volcano-70};
+  --en-color-volcano-70-rgb: #{color.$en-color-volcano-70-rgb};
+  --en-color-volcano-80: #{color.$en-color-volcano-80};
+  --en-color-volcano-80-rgb: #{color.$en-color-volcano-80-rgb};
+  --en-color-volcano-90: #{color.$en-color-volcano-90};
+  --en-color-volcano-90-rgb: #{color.$en-color-volcano-90-rgb};
+  --en-color-orange-10: #{color.$en-color-orange-10};
+  --en-color-orange-10-rgb: #{color.$en-color-orange-10-rgb};
+  --en-color-orange-20: #{color.$en-color-orange-20};
+  --en-color-orange-20-rgb: #{color.$en-color-orange-20-rgb};
+  --en-color-orange-30: #{color.$en-color-orange-30};
+  --en-color-orange-30-rgb: #{color.$en-color-orange-30-rgb};
+  --en-color-orange-40: #{color.$en-color-orange-40};
+  --en-color-orange-40-rgb: #{color.$en-color-orange-40-rgb};
+  --en-color-orange-50: #{color.$en-color-orange-50};
+  --en-color-orange-50-rgb: #{color.$en-color-orange-50-rgb};
+  --en-color-orange-60: #{color.$en-color-orange-60};
+  --en-color-orange-60-rgb: #{color.$en-color-orange-60-rgb};
+  --en-color-orange-70: #{color.$en-color-orange-70};
+  --en-color-orange-70-rgb: #{color.$en-color-orange-70-rgb};
+  --en-color-orange-80: #{color.$en-color-orange-80};
+  --en-color-orange-80-rgb: #{color.$en-color-orange-80-rgb};
+  --en-color-orange-90: #{color.$en-color-orange-90};
+  --en-color-orange-90-rgb: #{color.$en-color-orange-90-rgb};
+  --en-color-cyan-10: #{color.$en-color-cyan-10};
+  --en-color-cyan-10-rgb: #{color.$en-color-cyan-10-rgb};
+  --en-color-cyan-20: #{color.$en-color-cyan-20};
+  --en-color-cyan-20-rgb: #{color.$en-color-cyan-20-rgb};
+  --en-color-cyan-30: #{color.$en-color-cyan-30};
+  --en-color-cyan-30-rgb: #{color.$en-color-cyan-30-rgb};
+  --en-color-cyan-40: #{color.$en-color-cyan-40};
+  --en-color-cyan-40-rgb: #{color.$en-color-cyan-40-rgb};
+  --en-color-cyan-50: #{color.$en-color-cyan-50};
+  --en-color-cyan-50-rgb: #{color.$en-color-cyan-50-rgb};
+  --en-color-cyan-60: #{color.$en-color-cyan-60};
+  --en-color-cyan-60-rgb: #{color.$en-color-cyan-60-rgb};
+  --en-color-cyan-70: #{color.$en-color-cyan-70};
+  --en-color-cyan-70-rgb: #{color.$en-color-cyan-70-rgb};
+  --en-color-cyan-80: #{color.$en-color-cyan-80};
+  --en-color-cyan-80-rgb: #{color.$en-color-cyan-80-rgb};
+  --en-color-cyan-90: #{color.$en-color-cyan-90};
+  --en-color-cyan-90-rgb: #{color.$en-color-cyan-90-rgb};
+  --en-color-lime-10: #{color.$en-color-lime-10};
+  --en-color-lime-10-rgb: #{color.$en-color-lime-10-rgb};
+  --en-color-lime-20: #{color.$en-color-lime-20};
+  --en-color-lime-20-rgb: #{color.$en-color-lime-20-rgb};
+  --en-color-lime-30: #{color.$en-color-lime-30};
+  --en-color-lime-30-rgb: #{color.$en-color-lime-30-rgb};
+  --en-color-lime-40: #{color.$en-color-lime-40};
+  --en-color-lime-40-rgb: #{color.$en-color-lime-40-rgb};
+  --en-color-lime-50: #{color.$en-color-lime-50};
+  --en-color-lime-50-rgb: #{color.$en-color-lime-50-rgb};
+  --en-color-lime-60: #{color.$en-color-lime-60};
+  --en-color-lime-60-rgb: #{color.$en-color-lime-60-rgb};
+  --en-color-lime-70: #{color.$en-color-lime-70};
+  --en-color-lime-70-rgb: #{color.$en-color-lime-70-rgb};
+  --en-color-lime-80: #{color.$en-color-lime-80};
+  --en-color-lime-80-rgb: #{color.$en-color-lime-80-rgb};
+  --en-color-lime-90: #{color.$en-color-lime-90};
+  --en-color-lime-90-rgb: #{color.$en-color-lime-90-rgb};
+  --en-color-green-10: #{color.$en-color-green-10};
+  --en-color-green-10-rgb: #{color.$en-color-green-10-rgb};
+  --en-color-green-20: #{color.$en-color-green-20};
+  --en-color-green-20-rgb: #{color.$en-color-green-20-rgb};
+  --en-color-green-30: #{color.$en-color-green-30};
+  --en-color-green-30-rgb: #{color.$en-color-green-30-rgb};
+  --en-color-green-40: #{color.$en-color-green-40};
+  --en-color-green-40-rgb: #{color.$en-color-green-40-rgb};
+  --en-color-green-50: #{color.$en-color-green-50};
+  --en-color-green-50-rgb: #{color.$en-color-green-50-rgb};
+  --en-color-green-60: #{color.$en-color-green-60};
+  --en-color-green-60-rgb: #{color.$en-color-green-60-rgb};
+  --en-color-green-70: #{color.$en-color-green-70};
+  --en-color-green-70-rgb: #{color.$en-color-green-70-rgb};
+  --en-color-green-80: #{color.$en-color-green-80};
+  --en-color-green-80-rgb: #{color.$en-color-green-80-rgb};
+  --en-color-green-90: #{color.$en-color-green-90};
+  --en-color-green-90-rgb: #{color.$en-color-green-90-rgb};
+  --en-color-yellow-10: #{color.$en-color-yellow-10};
+  --en-color-yellow-10-rgb: #{color.$en-color-yellow-10-rgb};
+  --en-color-yellow-20: #{color.$en-color-yellow-20};
+  --en-color-yellow-20-rgb: #{color.$en-color-yellow-20-rgb};
+  --en-color-yellow-30: #{color.$en-color-yellow-30};
+  --en-color-yellow-30-rgb: #{color.$en-color-yellow-30-rgb};
+  --en-color-yellow-40: #{color.$en-color-yellow-40};
+  --en-color-yellow-40-rgb: #{color.$en-color-yellow-40-rgb};
+  --en-color-yellow-50: #{color.$en-color-yellow-50};
+  --en-color-yellow-50-rgb: #{color.$en-color-yellow-50-rgb};
+  --en-color-yellow-60: #{color.$en-color-yellow-60};
+  --en-color-yellow-60-rgb: #{color.$en-color-yellow-60-rgb};
+  --en-color-yellow-70: #{color.$en-color-yellow-70};
+  --en-color-yellow-70-rgb: #{color.$en-color-yellow-70-rgb};
+  --en-color-yellow-80: #{color.$en-color-yellow-80};
+  --en-color-yellow-80-rgb: #{color.$en-color-yellow-80-rgb};
+  --en-color-yellow-90: #{color.$en-color-yellow-90};
+  --en-color-yellow-90-rgb: #{color.$en-color-yellow-90-rgb};
+  --en-color-gold-10: #{color.$en-color-gold-10};
+  --en-color-gold-10-rgb: #{color.$en-color-gold-10-rgb};
+  --en-color-gold-20: #{color.$en-color-gold-20};
+  --en-color-gold-20-rgb: #{color.$en-color-gold-20-rgb};
+  --en-color-gold-30: #{color.$en-color-gold-30};
+  --en-color-gold-30-rgb: #{color.$en-color-gold-30-rgb};
+  --en-color-gold-40: #{color.$en-color-gold-40};
+  --en-color-gold-40-rgb: #{color.$en-color-gold-40-rgb};
+  --en-color-gold-50: #{color.$en-color-gold-50};
+  --en-color-gold-50-rgb: #{color.$en-color-gold-50-rgb};
+  --en-color-gold-60: #{color.$en-color-gold-60};
+  --en-color-gold-60-rgb: #{color.$en-color-gold-60-rgb};
+  --en-color-gold-70: #{color.$en-color-gold-70};
+  --en-color-gold-70-rgb: #{color.$en-color-gold-70-rgb};
+  --en-color-gold-80: #{color.$en-color-gold-80};
+  --en-color-gold-80-rgb: #{color.$en-color-gold-80-rgb};
+  --en-color-gold-90: #{color.$en-color-gold-90};
+  --en-color-gold-90-rgb: #{color.$en-color-gold-90-rgb};
+  --en-color-red-10: #{color.$en-color-red-10};
+  --en-color-red-10-rgb: #{color.$en-color-red-10-rgb};
+  --en-color-red-20: #{color.$en-color-red-20};
+  --en-color-red-20-rgb: #{color.$en-color-red-20-rgb};
+  --en-color-red-30: #{color.$en-color-red-30};
+  --en-color-red-30-rgb: #{color.$en-color-red-30-rgb};
+  --en-color-red-40: #{color.$en-color-red-40};
+  --en-color-red-40-rgb: #{color.$en-color-red-40-rgb};
+  --en-color-red-50: #{color.$en-color-red-50};
+  --en-color-red-50-rgb: #{color.$en-color-red-50-rgb};
+  --en-color-red-60: #{color.$en-color-red-60};
+  --en-color-red-60-rgb: #{color.$en-color-red-60-rgb};
+  --en-color-red-70: #{color.$en-color-red-70};
+  --en-color-red-70-rgb: #{color.$en-color-red-70-rgb};
+  --en-color-red-80: #{color.$en-color-red-80};
+  --en-color-red-80-rgb: #{color.$en-color-red-80-rgb};
+  --en-color-red-90: #{color.$en-color-red-90};
+  --en-color-red-90-rgb: #{color.$en-color-red-90-rgb};
+  --en-color-violet-10: #{color.$en-color-violet-10};
+  --en-color-violet-10-rgb: #{color.$en-color-violet-10-rgb};
+  --en-color-violet-20: #{color.$en-color-violet-20};
+  --en-color-violet-20-rgb: #{color.$en-color-violet-20-rgb};
+  --en-color-violet-30: #{color.$en-color-violet-30};
+  --en-color-violet-30-rgb: #{color.$en-color-violet-30-rgb};
+  --en-color-violet-40: #{color.$en-color-violet-40};
+  --en-color-violet-40-rgb: #{color.$en-color-violet-40-rgb};
+  --en-color-violet-50: #{color.$en-color-violet-50};
+  --en-color-violet-50-rgb: #{color.$en-color-violet-50-rgb};
+  --en-color-violet-60: #{color.$en-color-violet-60};
+  --en-color-violet-60-rgb: #{color.$en-color-violet-60-rgb};
+  --en-color-violet-70: #{color.$en-color-violet-70};
+  --en-color-violet-70-rgb: #{color.$en-color-violet-70-rgb};
+  --en-color-violet-80: #{color.$en-color-violet-80};
+  --en-color-violet-80-rgb: #{color.$en-color-violet-80-rgb};
+  --en-color-violet-90: #{color.$en-color-violet-90};
+  --en-color-violet-90-rgb: #{color.$en-color-violet-90-rgb};
+  --en-color-pink-10: #{color.$en-color-pink-10};
+  --en-color-pink-10-rgb: #{color.$en-color-pink-10-rgb};
+  --en-color-pink-20: #{color.$en-color-pink-20};
+  --en-color-pink-20-rgb: #{color.$en-color-pink-20-rgb};
+  --en-color-pink-30: #{color.$en-color-pink-30};
+  --en-color-pink-30-rgb: #{color.$en-color-pink-30-rgb};
+  --en-color-pink-40: #{color.$en-color-pink-40};
+  --en-color-pink-40-rgb: #{color.$en-color-pink-40-rgb};
+  --en-color-pink-50: #{color.$en-color-pink-50};
+  --en-color-pink-50-rgb: #{color.$en-color-pink-50-rgb};
+  --en-color-pink-60: #{color.$en-color-pink-60};
+  --en-color-pink-60-rgb: #{color.$en-color-pink-60-rgb};
+  --en-color-pink-70: #{color.$en-color-pink-70};
+  --en-color-pink-70-rgb: #{color.$en-color-pink-70-rgb};
+  --en-color-pink-80: #{color.$en-color-pink-80};
+  --en-color-pink-80-rgb: #{color.$en-color-pink-80-rgb};
+  --en-color-pink-90: #{color.$en-color-pink-90};
+  --en-color-pink-90-rgb: #{color.$en-color-pink-90-rgb};
+  --en-color-close-button: #{color.$en-color-close-button};
+  --en-color-close-button-rgb: #{color.$en-color-close-button-rgb};
+  --en-color-mini-size-button: #{color.$en-color-mini-size-button};
+  --en-color-mini-size-button-rgb: #{color.$en-color-mini-size-button-rgb};
+  --en-color-full-size-button: #{color.$en-color-full-size-button};
+  --en-color-full-size-button-rgb: #{color.$en-color-full-size-button-rgb};
+
+  --en-spacing-base: #{size.$en-spacing-base};
+
+  @for $i from 1 through 32 {
+    --en-spacing-#{$i}: calc(var(--en-spacing-base) * #{calc($i / 2)});
+  }
+
+  --en-font-size-base: #{size.$en-font-size-base};
+  --en-font-size-small: calc(var(--en-font-size-base) * 0.875);
+  --en-font-size-middle: calc(var(--en-font-size-base) * 1.125);
+  --en-font-size-large: calc(var(--en-font-size-base) * 1.5);
+  --en-font-size-extra-large: calc(var(--en-font-size-base) * 2.25);
+  --en-font-size-two-extra-large: calc(var(--en-font-size-base) * 3);
+  --en-radius-small: calc(var(--en-font-size-base) * 0.25);
   --en-border-radius-small: var(--en-radius-small);
-  --en-radius-middle: 0.5rem;
+  --en-radius-middle: calc(var(--en-font-size-base) * 0.5);
   --en-border-radius-middle: var(--en-radius-middle);
-  --en-radius-card: 0.75rem;
-  --en-border-radius-card: var(--en-border-radius-card);
+  --en-radius-card: calc(var(--en-font-size-base) * 0.75);
+  --en-border-radius-card: var(--en-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;
+  --en-transition-fast: #{size.$en-transition-base};
+  --en-transition-medium: calc(var(--en-transition-fast) * 2);
+  --en-transition-slow: calc(var(--en-transition-fast) * 3);
 }
 
 @media (prefers-color-scheme: light) {
-  :root:not(.en-light):not(.en-dark) {
+  :root:not([data-theme='dark']):not([data-theme='light']) {
     @include light.light();
   }
 }
+
 @media (prefers-color-scheme: dark) {
-  :root:not(.en-light):not(.en-dark) {
+  :root:not([data-theme='dark']):not([data-theme='light']) {
     @include dark.dark();
   }
 }
 
-.en-light {
+.en-light,
+:root[data-theme='light'] {
   @include light.light();
 }
 
-.en-dark {
+.en-dark,
+:root[data-theme='dark'] {
   @include dark.dark();
 }
+
+// 怪异黑模式
+.en-weird-dark {
+  background-color: var(--en-background-weird);
+  color: var(--en-text-tertiary);
+}

package/styles/text.scss

@@ -0,0 +1,61 @@
+// 文本剧中
+.en-text-center {
+  text-align: center;
+}
+
+// 文本靠右
+.en-text-right {
+  text-align: end;
+}
+
+//小文本
+.en-text-small {
+  font-size: 0.6rem;
+}
+
+
+/** 文本显示一行，超出点点点 */
+.en-text-in-one-line {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  word-break: break-all;
+}
+
+.en-text-in-one-line-hide {
+  white-space: nowrap;
+  text-overflow: clip;
+  overflow: hidden;
+  word-break: break-all;
+}
+
+/** 文本显示两行，超出点点点 */
+.en-text-in-two-line {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+/*  彩色字 */
+.en-color-text {
+  color: transparent;
+  background-image: linear-gradient(45deg, #ff0, #0f0, #f00, #0ff, #00f, #f0f, #ff0);
+  background-position: 0% 0%;
+  background-size: 400% 200%;
+  background-clip: text;
+  animation: 6s ease-in 0s infinite colorText alternate;
+}
+
+
+@keyframes colorText {
+  0% {
+    background-position: 400% 0%;
+  }
+
+  100% {
+    background-position: 0% 0%;
+  }
+}