earthnut 0.2.3-alpha.1 → 0.2.3-alpha.2

package/styles/common.scss

@@ -1,12 +1,58 @@
-@use "./root";
-@use "./reset.scss";
+@use "./vars-color.scss" as *;
 @use "./respond" as rp;
+@use "root.scss";
 
 .en-full-container {
   width: 100%;
   height: 100%;
 }
 
+@for $i from 1 through 10 {
+  $v: #{calc($i * 4)};
+  // 水平方向的 padding
+  .en-padding-horizontal-#{$v} {
+    padding-left: #{$v}px;
+    padding-right: #{$v}px;
+  }
+
+  // 垂直方向的 padding
+  .en-padding-vertical-#{$v} {
+    padding-top: #{$v}px;
+    padding-bottom: #{$v}px;
+  }
+
+  // 全方向的 padding 值
+  .en-padding-#{$v} {
+    padding: #{$v}px;
+  }
+
+  // 水平方向的 margin
+  .en-margin-horizontal-#{$v} {
+    margin-left: #{$v}px;
+    margin-right: #{$v}px;
+  }
+
+  // 垂直方向的 margin
+  .en-margin-vertical-#{$v} {
+    margin-top: #{$v}px;
+    margin-bottom: #{$v}px;
+  }
+
+  // 全方向的 margin 值
+  .en-margin-#{$v} {
+    margin: #{$v}px;
+  }
+
+  // 圆角
+  .en-border-radius-#{$v} {
+    border-radius: #{$v}px;
+  }
+}
+
+.en-inline-block {
+  display: inline-block;
+}
+
 .en-relative {
   position: relative;
 }

package/styles/reset.scss

@@ -1,4 +1,4 @@
-@use "./root.scss";
+@use "./vars-color.scss" as *;
 
 /* 盒模型 规则 */
 *,
@@ -28,7 +28,7 @@ body {
   font-family: var(--en-font-body);
   font-size: var(--en-base-font-size);
   line-height: var(--en-font-content-line-height);
-  text-rendering: optimizeSpeed;
+  text-rendering: optimizeSpeed; // 文本渲染，是快速还是清晰
 }
 
 /*  链接元素没有 class 类时的展示 */

package/styles/respond.scss

@@ -1,4 +1,4 @@
-@use "./root.scss";
+@use "./vars-color.scss" as *;
 
 //  响应式断点变量
 $breakpoints: (

package/styles/root.scss

@@ -1,17 +1,85 @@
-$color-white: #ffffff;
+@use "./vars-color.scss" as color;
+
+: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-black: #{color.$en-color-black};
+  --en-color-white: #{color.$en-color-white};
+  --en-color-ads: #{color.$en-color-ads};
+}
 
 @mixin light {
   // 基色
-  --en-primary-white: $color-white;
-  --en-primary-black: #1b1b1b;
-  --en-primary-dust: #6f6f6f;
-  --en-primary-red: #d30038;
-  --en-primary-green: #007936;
-  --en-primary-blue: #0069c2;
-  --en-primary-yellow: #746a00;
-  --en-primary-super-yellow: #ffff00;
+  --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: #1b1b1b;
+  --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); // 温和文本色
@@ -39,13 +107,63 @@ $color-white: #ffffff;
 
 @mixin dark {
   // 基色
-  --en-primary-white: #ffffff;
-  --en-primary-black: #1b1b1b;
-  --en-primary-dust: #858585;
-  --en-primary-red: #ff97a0;
-  --en-primary-green: #00d061;
-  --en-primary-blue: #8cb4ff;
-  --en-primary-yellow: #c7b700;
+  --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;

package/styles/vars-color.scss

@@ -0,0 +1,247 @@
+$color-white: #ffffff;
+$en-color-neutral-light-70: #f9f9fb;
+$en-color-neutral-light-80: #f2f1f1;
+$en-color-neutral-light-90: #ebeaea;
+
+$en-color-neutral-10: #e2e2e2;
+$en-color-neutral-20: #cdcdcd;
+$en-color-neutral-30: #b3b3b3;
+$en-color-neutral-40: #9e9e9e;
+$en-color-neutral-50: #858585;
+$en-color-neutral-60: #696969;
+$en-color-neutral-70: #4e4e4e;
+$en-color-neutral-75: #313131;
+$en-color-neutral-80: #343434;
+$en-color-neutral-90: #1b1b1b;
+
+$en-color-light-blue: #0085f2;
+$en-color-light-green: #009a46;
+$en-color-light-yellow: #928700;
+$en-color-light-red: #d30038;
+$en-color-light-violet: #9b65ff;
+$en-color-light-pink: #d00058;
+
+$en-color-dark-blue: $en-color-light-blue;
+$en-color-dark-green: $en-color-light-green;
+$en-color-dark-yellow: $en-color-light-yellow;
+$en-color-dark-red: $en-color-light-red;
+$en-color-dark-violet: $en-color-light-violet;
+$en-color-dark-pink: $en-color-light-pink;
+
+$en-color-black: #000;
+$en-color-white: #fff;
+$en-color-ads: #00d0aa;
+$en-color-light-blue-10: #dce2f2;
+$en-color-light-blue-20: #c1cff1;
+$en-color-light-blue-30: #8cb4ff;
+$en-color-light-blue-40: #5e9eff;
+$en-color-light-blue-50: #0085f2;
+$en-color-light-blue-60: #0069c2;
+$en-color-light-blue-70: #004d92;
+$en-color-light-blue-80: #003465;
+$en-color-light-blue-90: #001b3a;
+
+$en-color-dark-blue-10: $en-color-light-blue-10;
+$en-color-dark-blue-20: $en-color-light-blue-20;
+$en-color-dark-blue-30: $en-color-light-blue-30;
+$en-color-dark-blue-40: $en-color-light-blue-40;
+$en-color-dark-blue-50: $en-color-light-blue-50;
+$en-color-dark-blue-60: $en-color-light-blue-60;
+$en-color-dark-blue-70: $en-color-light-blue-70;
+$en-color-dark-blue-80: $en-color-light-blue-80;
+$en-color-dark-blue-90: $en-color-light-blue-90;
+
+$en-color-light-green-10: #a9f3ba;
+$en-color-light-green-20: #73e693;
+$en-color-light-green-30: #00d061;
+$en-color-light-green-40: #00b755;
+$en-color-light-green-50: #009a46;
+$en-color-light-green-60: #007936;
+$en-color-light-green-70: #005a26;
+$en-color-light-green-80: #003d18;
+$en-color-light-green-90: #00210a;
+
+$en-color-dark-green-10: $en-color-light-green-10;
+$en-color-dark-green-20: $en-color-light-green-20;
+$en-color-dark-green-30: $en-color-light-green-30;
+$en-color-dark-green-40: $en-color-light-green-40;
+$en-color-dark-green-50: $en-color-light-green-50;
+$en-color-dark-green-60: $en-color-light-green-60;
+$en-color-dark-green-70: $en-color-light-green-70;
+$en-color-dark-green-80: $en-color-light-green-80;
+$en-color-dark-green-90: $en-color-light-green-90;
+
+$en-color-light-yellow-10: #f0e498;
+$en-color-light-yellow-20: #dfd172;
+$en-color-light-yellow-30: #c7b700;
+$en-color-light-yellow-40: #afa100;
+$en-color-light-yellow-50: #938700;
+$en-color-light-yellow-60: #746a00;
+$en-color-light-yellow-70: #564e00;
+$en-color-light-yellow-80: #3a3500;
+$en-color-light-yellow-90: #1f1c00;
+
+$en-color-dark-yellow-10: $en-color-light-yellow-10;
+$en-color-dark-yellow-20: $en-color-light-yellow-20;
+$en-color-dark-yellow-30: $en-color-light-yellow-30;
+$en-color-dark-yellow-40: $en-color-light-yellow-40;
+$en-color-dark-yellow-50: $en-color-light-yellow-50;
+$en-color-dark-yellow-60: $en-color-light-yellow-60;
+$en-color-dark-yellow-70: $en-color-light-yellow-70;
+$en-color-dark-yellow-80: $en-color-light-yellow-80;
+$en-color-dark-yellow-90: $en-color-light-yellow-90;
+
+$en-color-light-red-10: #ffd9dc;
+$en-color-light-red-20: #ffc0c4;
+$en-color-light-red-30: #ff97a0;
+$en-color-light-red-40: #ff707f;
+$en-color-light-red-50: #ff2a51;
+$en-color-light-red-60: #d30038;
+$en-color-light-red-70: #9e0027;
+$en-color-light-red-80: #6f0019;
+$en-color-light-red-90: #40000a;
+
+$en-color-dark-red-10: $en-color-light-red-10;
+$en-color-dark-red-20: $en-color-light-red-20;
+$en-color-dark-red-30: $en-color-light-red-30;
+$en-color-dark-red-40: $en-color-light-red-40;
+$en-color-dark-red-50: $en-color-light-red-50;
+$en-color-dark-red-60: $en-color-light-red-60;
+$en-color-dark-red-70: $en-color-light-red-70;
+$en-color-dark-red-80: $en-color-light-red-80;
+$en-color-dark-red-90: $en-color-light-red-90;
+
+$en-color-light-violet-10: #e6deff;
+$en-color-light-violet-20: #d4c5ff;
+$en-color-light-violet-30: #bea5ff;
+$en-color-light-violet-40: #ae8aff;
+$en-color-light-violet-50: #9b65ff;
+$en-color-light-violet-60: #872bff;
+$en-color-light-violet-70: #6800cf;
+$en-color-light-violet-80: #480091;
+$en-color-light-violet-90: #280056;
+
+$en-color-dark-violet-10: $en-color-light-violet-10;
+$en-color-dark-violet-20: $en-color-light-violet-20;
+$en-color-dark-violet-30: $en-color-light-violet-30;
+$en-color-dark-violet-40: $en-color-light-violet-40;
+$en-color-dark-violet-50: $en-color-light-violet-50;
+$en-color-dark-violet-60: $en-color-light-violet-60;
+$en-color-dark-violet-70: $en-color-light-violet-70;
+$en-color-dark-violet-80: $en-color-light-violet-80;
+$en-color-dark-violet-90: $en-color-light-violet-90;
+
+$en-color-light-pink-10: #ffd9df;
+$en-color-light-pink-20: #ffbbc8;
+$en-color-light-pink-30: #ff93aa;
+$en-color-light-pink-40: #ff6d91;
+$en-color-light-pink-50: #ff1f72;
+$en-color-light-pink-60: #d00058;
+$en-color-light-pink-70: #9e0041;
+$en-color-light-pink-80: #6d002b;
+$en-color-light-pink-90: #3f0015;
+
+$en-color-dark-pink-10: $en-color-light-pink-10;
+$en-color-dark-pink-20: $en-color-light-pink-20;
+$en-color-dark-pink-30: $en-color-light-pink-30;
+$en-color-dark-pink-40: $en-color-light-pink-40;
+$en-color-dark-pink-50: $en-color-light-pink-50;
+$en-color-dark-pink-60: $en-color-light-pink-60;
+$en-color-dark-pink-70: $en-color-light-pink-70;
+$en-color-dark-pink-80: $en-color-light-pink-80;
+$en-color-dark-pink-90: $en-color-light-pink-90;
+$en-light-text-primary: $en-color-neutral-90;
+$en-light-text-secondary: $en-color-neutral-70;
+$en-light-text-active: #{$en-color-neutral-50};
+$en-light-text-inactive: #{$en-color-neutral-40}a6;
+$en-light-text-link: $en-color-light-blue-60;
+$en-light-text-invert: $en-color-white;
+$en-light-text-muted: #6f6f6f;
+$en-light-background-primary: $en-color-white;
+$en-light-background-secondary: $en-color-neutral-light-70;
+$en-light-background-tertiary: #ebeaea;
+$en-light-background-toc-active: $en-color-neutral-light-90;
+$en-light-border-primary: $en-color-neutral-20;
+$en-light-border-secondary: $en-color-neutral-20;
+$en-light-border-success: $en-color-light-green-20;
+$en-light-button-primary-default: $en-color-neutral-90;
+$en-light-button-primary-hover: $en-color-neutral-60;
+$en-light-button-primary-active: $en-color-neutral-40;
+$en-light-button-primary-inactive: $en-color-neutral-90;
+$en-light-button-secondary-default: $en-color-white;
+$en-light-button-secondary-hover: $en-color-neutral-20;
+$en-light-button-secondary-active: $en-color-neutral-20;
+$en-light-button-secondary-inactive: $en-color-neutral-light-70;
+$en-light-button-secondary-border-focus: $en-color-light-blue-50;
+$en-light-button-secondary-border-red: $en-color-light-red-30;
+$en-light-button-secondary-border-red-focus: $en-color-light-red-10;
+$en-light-icon-primary: $en-color-neutral-60;
+$en-light-icon-secondary: $en-color-neutral-30;
+$en-light-icon-information: $en-color-light-blue-50;
+$en-light-icon-warning: $en-color-light-red-50;
+$en-light-icon-critical: $en-color-light-red-60;
+$en-light-icon-success: $en-color-light-green-60;
+$en-light-accent-primary: $en-color-light-blue-50;
+$en-light-accent-secondary: $en-color-light-blue-50;
+$en-light-field-focus-border: $en-color-light-blue-50;
+$en-light-focus-01: 0 0 0 3px rgba(0, 144, 237, 0.4);
+$en-light-shadow-01: 0 1px 2px rgba(43, 42, 51, 0.05);
+$en-light-shadow-02: 0 1px 6px rgba(43, 42, 51, 0.1);
+
+$en-light-code-token-tag: $en-color-light-blue-60;
+$en-light-code-token-punctuation: $en-color-neutral-50;
+$en-light-code-token-attribute-name: $en-color-light-red-60;
+$en-light-code-token-attribute-value: $en-color-light-green-60;
+$en-light-code-token-comment: $en-color-neutral-50;
+$en-light-code-token-default: $en-color-neutral-90;
+$en-light-code-token-selector: $en-color-light-violet-60;
+$en-light-code-background-inline: $en-color-neutral-light-80;
+$en-light-code-background-block: $en-color-neutral-light-80;
+
+$en-dark-text-primary: $en-color-white;
+$en-dark-text-secondary: $en-color-neutral-20;
+$en-dark-text-active: #{$en-color-neutral-50};
+$en-dark-text-inactive: #{$en-color-neutral-20}a6;
+$en-dark-text-link: $en-color-dark-blue-30;
+$en-dark-text-invert: $en-color-neutral-90;
+$en-dark-text-muted: #858585;
+$en-dark-background-primary: $en-color-neutral-90;
+$en-dark-background-secondary: $en-color-neutral-75;
+$en-dark-background-tertiary: #858585;
+$en-dark-background-toc-active: $en-color-neutral-80;
+$en-dark-border-primary: $en-color-neutral-50;
+$en-dark-border-secondary: $en-color-neutral-60;
+$en-dark-border-success: $en-color-dark-green-20;
+$en-dark-button-primary-default: $en-color-white;
+$en-dark-button-primary-hover: $en-color-neutral-20;
+$en-dark-button-primary-active: $en-color-neutral-40;
+$en-dark-button-primary-inactive: $en-color-white;
+$en-dark-button-secondary-default: $en-color-neutral-70;
+$en-dark-button-secondary-hover: $en-color-neutral-50;
+$en-dark-button-secondary-active: $en-color-neutral-40;
+$en-dark-button-secondary-inactive: $en-color-neutral-70;
+$en-dark-shadow-01: 0 1px 2px rgba(251, 251, 254, 0.2);
+$en-dark-shadow-02: 0 1px 6px rgba(251, 251, 254, 0.2);
+$en-dark-icon-primary: $en-color-white;
+$en-dark-icon-secondary: $en-color-neutral-30;
+$en-dark-icon-information: $en-color-dark-blue-40;
+$en-dark-icon-warning: $en-color-dark-yellow-40;
+$en-dark-icon-critical: $en-color-dark-red-40;
+$en-dark-icon-success: $en-color-dark-green-40;
+$en-dark-accent-primary: $en-color-dark-blue-40;
+$en-dark-accent-secondary: $en-color-dark-blue-40;
+$en-dark-field-focus-border: $en-color-white;
+$en-dark-focus-01: 0 0 0 3px rgba(251, 251, 254, 0.5);
+
+$en-dark-code-token-tag: $en-color-dark-blue-20;
+$en-dark-code-token-punctuation: $en-color-neutral-30;
+$en-dark-code-token-attribute-name: $en-color-dark-red-30;
+$en-dark-code-token-attribute-value: $en-color-dark-green-30;
+$en-dark-code-token-comment: $en-color-neutral-30;
+$en-dark-code-token-default: $en-color-white;
+$en-dark-code-token-selector: $en-color-dark-violet-30;
+$en-dark-code-background-inline: $en-color-neutral-80;
+$en-dark-code-background-block: $en-color-neutral-80;
+
+// screen is to small for sticky placement
+$screen-height-place-limit: 44rem;

package/utilities/cookie.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @license MIT
+ * earthnut@utilities/cookie.d.ts 
+ * Copyright (c) 2025 earthnut.dev
+ * 请在项目根参看详细许可证明
+ */
+/**
+ *  @Author earthnut
+ *  @Email earthnut.dev@outlook.com
+ *  @ProjectName nest
+ *  @FileName cookie.ts
+ *  @CreateDate  周五  01/10/2025
+ *  @Description cookie 管理
+ */
+export declare const manageCookie: {
+    getItem(keyItem: string): string | null;
+    setItem(option: {
+        keyItem: string;
+        value: string;
+        end?: string | number | Date;
+        path?: string;
+        domain?: string;
+        secure?: string;
+    }): boolean;
+    deleteItem(key: string, path: string, domain: string): false | undefined;
+    exist(key: string): boolean;
+    keys(): string[];
+};

package/utilities/sys.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @license MIT
+ * earthnut@utilities/sys.d.ts 
+ * Copyright (c) 2025 earthnut.dev
+ * 请在项目根参看详细许可证明
+ */
+declare class SysInfo {
+    #private;
+    /**
+     * 设备振动
+     **/
+    vibrate(): void;
+    /**
+     * 分享网站
+     * @param [url='https://letmiseesee.pages.dev'] 网页地址 默认值 https://letmiseesee.pages.dev
+     * @param [text='']  text  文本
+     * @param [title='随笔记余生']  title  网站标题，缺省值
+     * @description
+     **/
+    share(url?: string, text?: string, title?: string): void;
+    /**
+     * 当前是否为手机设备
+     **/
+    isPhone(): boolean;
+    /**
+     * 当前设备是否为小平设备
+     **/
+    get isSmallScreen(): 'small' | 'middle' | 'large';
+    /**
+     * 是否为暗黑模式
+     **/
+    get isDark(): boolean;
+    /**
+     * 设备当前的旋转状态
+     *
+     * 只返回是否旋转
+     **/
+    get isOrientation(): boolean;
+}
+export declare const sysInfo: SysInfo;
+export {};