oops-ui 0.0.13 → 1.0.0

package/styles/root-normal-light.scss

@@ -0,0 +1,83 @@
+@use './vars-color.scss' as color;
+
+@mixin light {
+  // 主要文本色（正文、标题）
+  --en-text-primary: var(--en-color-darkness-85);
+  --en-text-primary-rgb: var(--en-color-darkness-85-rgb);
+  // 次要文本色（辅助说明）
+  --en-text-secondary: var(--en-color-darkness-70);
+  --en-text-secondary-rgb: var(--en-color-darkness-70-rgb);
+  // 备注、浇注的文本色
+  --en-text-tertiary: var(--en-color-darkness-40);
+  --en-text-tertiary-rgb: var(--en-color-darkness-40-rgb);
+  --en-text-active: var(--en-color-darkness-50);
+  --en-text-active-rgb: var(--en-color-darkness-50-rgb);
+  --en-text-inactive: rgba(var(--en-color-darkness-40-rgb), 0.76);
+  --en-text-inactive-rgb: var(--en-color-darkness-40-rgb);
+  --en-text-link: var(--en-color-blue-70);
+  --en-text-link-rgb: var(--en-color-blue-70-rgb);
+  --en-text-invert: var(--en-color-white); // 文本反转色
+  --en-text-invert-rgb: var(--en-color-white-rgb); // 文本反转色
+  --en-text-muted: var(--en-color-darkness-65); // 温和文本色
+  --en-text-muted-rgb: var(--en-color-darkness-65-rgb); // 温和文本色
+  // 背景色
+  --en-background-primary: var(--en-color-darkness-10);
+  --en-background-primary-rgb: var(--en-color-darkness-10-rgb);
+  --en-background-secondary: var(--en-color-darkness-15);
+  --en-background-secondary-rgb: var(--en-color-darkness-15-rgb);
+  --en-background-tertiary: var(--en-color-darkness-20);
+  --en-background-tertiary-rgb: var(--en-color-darkness-20-rgb);
+  --en-background-weird: var(--en-color-black);
+  --en-background-weird-rgb: var(--en-color-black-rgb);
+  // 边框
+  --en-border-primary: var(--en-color-darkness-10);
+  --en-border-primary-rgb: var(--en-color-darkness-10-rgb);
+  --en-border-secondary: var(--en-color-darkness-15);
+  --en-border-secondary-rgb: var(--en-color-darkness-15-rgb);
+  // 成功盒子的提示框
+  --en-border-success: var(--en-color-green-20);
+  --en-border-success-rgb: var(--en-color-green-20-rgb);
+  // 按钮
+  --en-button-primary: var(--en-color-darkness-85);
+  --en-button-primary-rgb: var(--en-color-darkness-85-rgb);
+  --en-button-primary-hover: var(--en-color-darkness-60);
+  --en-button-primary-hover-rgb: var(--en-color-darkness-60-rgb);
+  --en-button-primary-active: var(--en-color-darkness-40);
+  --en-button-primary-active-rgb: var(--en-color-darkness-40-rgb);
+  --en-button-primary-inactive: var(--en-color-darkness-85);
+  --en-button-primary-inactive-rgb: var(--en-color-darkness-85-rgb);
+  --en-button-secondary: var(--en-color-white);
+  --en-button-secondary-rgb: var(--en-color-white-rgb);
+  --en-button-secondary-hover: var(--en-color-darkness-20);
+  --en-button-secondary-hover-rgb: var(--en-color-darkness-20-rgb);
+  --en-button-secondary-active: var(--en-color-darkness-20);
+  --en-button-secondary-active-rgb: var(--en-color-darkness-20-rgb);
+  --en-button-secondary-inactive: var(--en-color-darkness-15);
+  --en-button-secondary-inactive-rgb: var(--en-color-darkness-15-rgb);
+  --en-button-secondary-border-focus: var(--en-color-blue-50);
+  --en-button-secondary-border-focus-rgb: var(--en-color-blue-50-rgb);
+  // 红框按钮
+  --en-button-secondary-border-red: var(--en-color-red-30);
+  --en-button-secondary-border-red-rgb: var(--en-color-red-30-rgb);
+  --en-button-secondary-border-red-focus: var(--en-color-red-10);
+  --en-button-secondary-border-red-focus-rgb: var(--en-color-red-10-rgb);
+  --en-box-shadow-light: 0 1px 2px rgba(var(--en-color-darkness-80), 0.05);
+  --en-box-shadow-dark: 0 1px 6px rgba(var(--en-color-darkness-80), 0.1);
+  // 输入框
+  --en-input-primary-text: var(--en-text-primary);
+  --en-input-primary-text-rgb: var(--en-text-primary-rgb);
+  --en-input-primary-background: var(--en-background-primary);
+  --en-input-primary-background-rgb: var(--en-background-primary-rgb);
+  --en-input-primary-placeholder-text: var(--en-color-darkness-50);
+  --en-input-primary-focus-visible-outline: var(--en-color-blue-60) solid 2px;
+  --en-input-revers-text: var(--en-color-green-20);
+  --en-input-revers-text-rgb: var(--en-color-green-20-rgb);
+  --en-input-revers-background: var(--en-color-darkness-90);
+  --en-input-revers-background-rgb: var(--en-color-darkness-90-rgb);
+  --en-input-revers-placeholder-text: var(--en-color-darkness-50);
+  --en-input-revers-focus-visible-outline: var(--en-color-green-60) solid 2px;
+
+  color-scheme: light;
+  color: var(--en-text-primary, #3a3b3f);
+  background-color: var(--en-background-primary, #f0f2e6);
+}

package/styles/root-weird-dark.scss

@@ -0,0 +1 @@
+// 怪异黑模式

package/styles/root.scss

@@ -0,0 +1,326 @@
+@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-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-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: 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([data-theme='dark']):not([data-theme='light']) {
+    @include light.light();
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='dark']):not([data-theme='light']) {
+    @include dark.dark();
+  }
+}
+
+.en-light,
+:root[data-theme='light'] {
+  @include light.light();
+}
+
+.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%;
+  }
+}