earthnut 0.1.7 → 0.2.1

package/styles/reset.scss

@@ -0,0 +1,103 @@
+@use "./root.scss";
+
+/* 盒模型 规则 */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* 移除默认的 margin 外边距 */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+
+ul,
+ol {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* 设置根元素 html 默认样式 */
+html {
+  scroll-behavior: smooth;
+}
+
+/* 设置默认的 body 元素的样式 */
+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;
+}
+
+/*  链接元素没有 class 类时的展示 */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+
+a {
+  text-decoration: none;
+}
+
+/* 设置图片样式 */
+img,
+picture {
+  display: block;
+  max-width: 100%;
+}
+
+/* Fix Inter font bug: 'em' not slanted in Safari. See issue: https://github.com/mdn/yari/issues/7203 */
+em {
+  font-variation-settings: "slnt" -10;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* 自动填充的密码的背景色设置动画已取消背景色  */
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  transition-delay: 99999s;
+  transition:
+    color 99999s ease-out,
+    background-color 99999s ease-out;
+  -webkit-transition-delay: 99999s;
+  -webkit-transition:
+    color 99999s ease-out,
+    background-color 99999s ease-out;
+  -webkit-text-fill-color: var(--text-primary);
+}
+
+/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/styles/respond.scss

@@ -0,0 +1,54 @@
+@use "./root.scss";
+
+//  响应式断点变量
+$breakpoints: (
+  // 手机竖屏
+  sm: 576px,
+  // 平板，大手机
+  md: 768px,
+  // 小桌面
+  lg: 992px,
+  // 标准桌面
+  xl: 1200px,
+  // 大桌面
+  xxl: 1400px
+);
+
+// 移动优先
+// 基础媒体查询混入
+@mixin respond-to($breakpoint) {
+  $value: map-get($breakpoints, $breakpoint);
+
+  @if $value {
+    @media screen and (min-width: $value) {
+      @content;
+    }
+  } @else {
+    @error "为定义的断点：`#{$breakpoint}`。";
+  }
+}
+
+// 悬停能力检测混入  - 移动优先
+@mixin hover-supported {
+  @media (hover: hover) and (pointer: fine) {
+    &:hover {
+      @content;
+    }
+  }
+}
+
+// 混合响应式和悬停的复合混入
+@mixin respond-with-hover($breakpoint) {
+  @include respond-to($breakpoint) {
+    @include hover-supported {
+      @content;
+    }
+  }
+}
+
+// 禁用动画
+@mixin hover-forbidden {
+  @media (hover: none) {
+    @content;
+  }
+}

package/styles/root.scss

@@ -0,0 +1,94 @@
+$color-white: #ffffff;
+
+@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-text-primary: #1b1b1b;
+  --en-text-secondary: #4e4e4e;
+  --en-text-invert: var(--en-primary-white); // 文本反转色
+  --en-text-muted: var(--en-primary-dust); // 温和文本色
+  // 链接文本色
+  --en-text-link: #0069c2;
+  --en-text-visited: #551a8b;
+  --en-text-hover: var(--en-primary-red);
+  --en-text-visited: #551a8b;
+  --en-text-active: #858585;
+  --en-text-inactive: #9e9e9ea6; // 无效链接色
+  // 背景色
+  --en-background-primary: var(--en-primary-white);
+  --en-background-tab-level-1: var(--en-primary-black);
+  --en-background-tab-level-2: var(--en-primary-dust);
+  --en-background-tab-transparent: #6666;
+  --en-table-border-color: #000;
+  --en-curriculum-shadow: 4px 4px 8px 0 #b3b3b32e, -4px 4px 8px 0 #b3b3b326;
+  --en-curriculum-shadow-landing-about-ul: 0 4px 10px 0 #e3642a0f, 0 -2px 4px 0 #b25c350f;
+  --en-box-shadow: 1px 1px 12px #6666;
+  --en-box-shadow-primary: 1px 1px 12px #6666;
+  --en-box-shadow-primary-small: 1px 1px 3px #6666;
+  --en-box-shadow-primary-large: 1px 1px 24px #6666;
+  color-scheme: light;
+}
+
+@mixin dark {
+  // 基色
+  --en-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-text-primary: #fff;
+  --en-text-secondary: #cdcdcd;
+  --en-text-invert: var(--en-primary-black); // 文本反转色
+  --en-text-muted: var(--en-primary-dust); // 温和文本色
+  // 普通链接文本色
+  --en-text-link: #8cb4ff;
+  --en-text-visited: #ffadff;
+  --en-text-hover: var(--en-primary-red);
+  --en-text-active: #858585;
+  --en-text-inactive: #cdcdcda6; // 无效链接色
+  //  背景色
+  --en-background-primary: var(--en-primary-black);
+  --en-background-tab-level-1: #666666;
+  --en-background-tab-level-2: var(--en-primary-dust);
+  --en-background-tab-transparent: #6666;
+  --en-table-border-color: #ff3663;
+  --en-box-shadow: 1px 1px 12px #6666;
+  --en-box-shadow-primary: 1px 1px 12px #6666;
+  --en-box-shadow-primary-small: 1px 1px 3px #6666;
+  --en-box-shadow-primary-large: 1px 1px 24px #6666;
+  color-scheme: dark;
+}
+
+:root {
+  @include light();
+}
+
+@media (prefers-color-scheme: light) {
+  :root:not(.en-light):not(.en-dark) {
+    @include light();
+  }
+}
+@media (prefers-color-scheme: dark) {
+  :root:not(.en-light):not(.en-dark) {
+    @include dark();
+  }
+}
+
+.en-light {
+  @include light();
+}
+
+.en-dark {
+  @include dark();
+}

package/styles/vars.scss

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