earthnut 0.2.3-alpha.2 → 1.0.0

package/styles/root.scss

@@ -1,212 +1,326 @@
-@use "./vars-color.scss" as color;
+@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-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-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-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-ads: #{color.$en-color-ads};
-}
+  --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};
 
-@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;
-}
+  --en-spacing-base: #{size.$en-spacing-base};
 
-@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;
-}
+  @for $i from 1 through 32 {
+    --en-spacing-#{$i}: calc(var(--en-spacing-base) * #{calc($i / 2)});
+  }
 
-:root {
-  @include light();
+  --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: calc(var(--en-font-size-base) * 0.5);
+  --en-border-radius-middle: var(--en-radius-middle);
+  --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: #{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) {
-    @include light();
+  :root:not([data-theme='dark']):not([data-theme='light']) {
+    @include light.light();
   }
 }
+
 @media (prefers-color-scheme: dark) {
-  :root:not(.en-light):not(.en-dark) {
-    @include dark();
+  :root:not([data-theme='dark']):not([data-theme='light']) {
+    @include dark.dark();
   }
 }
 
-.en-light {
-  @include light();
+.en-light,
+:root[data-theme='light'] {
+  @include light.light();
+}
+
+.en-dark,
+:root[data-theme='dark'] {
+  @include dark.dark();
 }
 
-.en-dark {
-  @include 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%;
+  }
+}