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

package/styles/common.css

@@ -1,14 +1,82 @@
 @charset "UTF-8";
 :root {
-  --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-color-neutral-70: #f9f9fb;
+  --en-color-neutral-80: #f2f1f1;
+  --en-color-neutral-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-black: #000;
+  --en-color-white: #fff;
+  --en-color-ads: #00d0aa;
+}
+
+:root {
+  --en-color-blue: #0085f2;
+  --en-color-green: #009a46;
+  --en-color-yellow: #928700;
+  --en-color-red: #d30038;
+  --en-color-violet: #9b65ff;
+  --en-color-pink: #d00058;
+  --en-color-blue-10: #dce2f2;
+  --en-color-blue-20: #c1cff1;
+  --en-color-blue-30: #8cb4ff;
+  --en-color-blue-40: #5e9eff;
+  --en-color-blue-50: #0085f2;
+  --en-color-blue-60: #0069c2;
+  --en-color-blue-70: #004d92;
+  --en-color-blue-80: #003465;
+  --en-color-blue-90: #001b3a;
+  --en-color-green-10: #a9f3ba;
+  --en-color-green-20: #73e693;
+  --en-color-green-30: #00d061;
+  --en-color-green-40: #00b755;
+  --en-color-green-50: #009a46;
+  --en-color-green-60: #007936;
+  --en-color-green-70: #005a26;
+  --en-color-green-80: #003d18;
+  --en-color-green-90: #00210a;
+  --en-color-yellow-10: #f0e498;
+  --en-color-yellow-20: #dfd172;
+  --en-color-yellow-30: #c7b700;
+  --en-color-yellow-40: #afa100;
+  --en-color-yellow-50: #938700;
+  --en-color-yellow-60: #746a00;
+  --en-color-yellow-70: #564e00;
+  --en-color-yellow-80: #3a3500;
+  --en-color-yellow-90: #1f1c00;
+  --en-color-red-10: #ffd9dc;
+  --en-color-red-20: #ffc0c4;
+  --en-color-red-30: #ff97a0;
+  --en-color-red-40: #ff707f;
+  --en-color-red-50: #ff2a51;
+  --en-color-red-60: #d30038;
+  --en-color-red-70: #9e0027;
+  --en-color-red-80: #6f0019;
+  --en-color-red-90: #40000a;
+  --en-color-violet-10: #e6deff;
+  --en-color-violet-20: #d4c5ff;
+  --en-color-violet-30: #bea5ff;
+  --en-color-violet-40: #ae8aff;
+  --en-color-violet-50: #9b65ff;
+  --en-color-violet-60: #872bff;
+  --en-color-violet-70: #6800cf;
+  --en-color-violet-80: #480091;
+  --en-color-violet-90: #280056;
+  --en-color-blue: #0085f2;
+  --en-color-green: #009a46;
+  --en-color-yellow: #928700;
+  --en-color-red: #d30038;
+  --en-color-violet: #9b65ff;
+  --en-color-pink: #d00058;
+  --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);
@@ -34,15 +102,64 @@
 
 @media (prefers-color-scheme: light) {
   :root:not(.en-light):not(.en-dark) {
-    --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-color-blue: #0085f2;
+    --en-color-green: #009a46;
+    --en-color-yellow: #928700;
+    --en-color-red: #d30038;
+    --en-color-violet: #9b65ff;
+    --en-color-pink: #d00058;
+    --en-color-blue-10: #dce2f2;
+    --en-color-blue-20: #c1cff1;
+    --en-color-blue-30: #8cb4ff;
+    --en-color-blue-40: #5e9eff;
+    --en-color-blue-50: #0085f2;
+    --en-color-blue-60: #0069c2;
+    --en-color-blue-70: #004d92;
+    --en-color-blue-80: #003465;
+    --en-color-blue-90: #001b3a;
+    --en-color-green-10: #a9f3ba;
+    --en-color-green-20: #73e693;
+    --en-color-green-30: #00d061;
+    --en-color-green-40: #00b755;
+    --en-color-green-50: #009a46;
+    --en-color-green-60: #007936;
+    --en-color-green-70: #005a26;
+    --en-color-green-80: #003d18;
+    --en-color-green-90: #00210a;
+    --en-color-yellow-10: #f0e498;
+    --en-color-yellow-20: #dfd172;
+    --en-color-yellow-30: #c7b700;
+    --en-color-yellow-40: #afa100;
+    --en-color-yellow-50: #938700;
+    --en-color-yellow-60: #746a00;
+    --en-color-yellow-70: #564e00;
+    --en-color-yellow-80: #3a3500;
+    --en-color-yellow-90: #1f1c00;
+    --en-color-red-10: #ffd9dc;
+    --en-color-red-20: #ffc0c4;
+    --en-color-red-30: #ff97a0;
+    --en-color-red-40: #ff707f;
+    --en-color-red-50: #ff2a51;
+    --en-color-red-60: #d30038;
+    --en-color-red-70: #9e0027;
+    --en-color-red-80: #6f0019;
+    --en-color-red-90: #40000a;
+    --en-color-violet-10: #e6deff;
+    --en-color-violet-20: #d4c5ff;
+    --en-color-violet-30: #bea5ff;
+    --en-color-violet-40: #ae8aff;
+    --en-color-violet-50: #9b65ff;
+    --en-color-violet-60: #872bff;
+    --en-color-violet-70: #6800cf;
+    --en-color-violet-80: #480091;
+    --en-color-violet-90: #280056;
+    --en-color-blue: #0085f2;
+    --en-color-green: #009a46;
+    --en-color-yellow: #928700;
+    --en-color-red: #d30038;
+    --en-color-violet: #9b65ff;
+    --en-color-pink: #d00058;
+    --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);
@@ -68,13 +185,63 @@
 }
 @media (prefers-color-scheme: dark) {
   :root:not(.en-light):not(.en-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: #0085f2;
+    --en-color-green: #009a46;
+    --en-color-yellow: #928700;
+    --en-color-red: #d30038;
+    --en-color-violet: #9b65ff;
+    --en-color-pink: #d00058;
+    --en-color-blue-10: #dce2f2;
+    --en-color-blue-20: #c1cff1;
+    --en-color-blue-30: #8cb4ff;
+    --en-color-blue-40: #5e9eff;
+    --en-color-blue-50: #0085f2;
+    --en-color-blue-60: #0069c2;
+    --en-color-blue-70: #004d92;
+    --en-color-blue-80: #003465;
+    --en-color-blue-90: #001b3a;
+    --en-color-green-10: #a9f3ba;
+    --en-color-green-20: #73e693;
+    --en-color-green-30: #00d061;
+    --en-color-green-40: #00b755;
+    --en-color-green-50: #009a46;
+    --en-color-green-60: #007936;
+    --en-color-green-70: #005a26;
+    --en-color-green-80: #003d18;
+    --en-color-green-90: #00210a;
+    --en-color-yellow-10: #f0e498;
+    --en-color-yellow-20: #dfd172;
+    --en-color-yellow-30: #c7b700;
+    --en-color-yellow-40: #afa100;
+    --en-color-yellow-50: #938700;
+    --en-color-yellow-60: #746a00;
+    --en-color-yellow-70: #564e00;
+    --en-color-yellow-80: #3a3500;
+    --en-color-yellow-90: #1f1c00;
+    --en-color-red-10: #ffd9dc;
+    --en-color-red-20: #ffc0c4;
+    --en-color-red-30: #ff97a0;
+    --en-color-red-40: #ff707f;
+    --en-color-red-50: #ff2a51;
+    --en-color-red-60: #d30038;
+    --en-color-red-70: #9e0027;
+    --en-color-red-80: #6f0019;
+    --en-color-red-90: #40000a;
+    --en-color-violet-10: #e6deff;
+    --en-color-violet-20: #d4c5ff;
+    --en-color-violet-30: #bea5ff;
+    --en-color-violet-40: #ae8aff;
+    --en-color-violet-50: #9b65ff;
+    --en-color-violet-60: #872bff;
+    --en-color-violet-70: #6800cf;
+    --en-color-violet-80: #480091;
+    --en-color-violet-90: #280056;
+    --en-color-blue: #0085f2;
+    --en-color-green: #009a46;
+    --en-color-yellow: #928700;
+    --en-color-red: #d30038;
+    --en-color-violet: #9b65ff;
+    --en-color-pink: #d00058;
     --en-text-primary: #fff;
     --en-text-secondary: #cdcdcd;
     --en-text-invert: var(--en-primary-black);
@@ -97,15 +264,64 @@
   }
 }
 .en-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-color-blue: #0085f2;
+  --en-color-green: #009a46;
+  --en-color-yellow: #928700;
+  --en-color-red: #d30038;
+  --en-color-violet: #9b65ff;
+  --en-color-pink: #d00058;
+  --en-color-blue-10: #dce2f2;
+  --en-color-blue-20: #c1cff1;
+  --en-color-blue-30: #8cb4ff;
+  --en-color-blue-40: #5e9eff;
+  --en-color-blue-50: #0085f2;
+  --en-color-blue-60: #0069c2;
+  --en-color-blue-70: #004d92;
+  --en-color-blue-80: #003465;
+  --en-color-blue-90: #001b3a;
+  --en-color-green-10: #a9f3ba;
+  --en-color-green-20: #73e693;
+  --en-color-green-30: #00d061;
+  --en-color-green-40: #00b755;
+  --en-color-green-50: #009a46;
+  --en-color-green-60: #007936;
+  --en-color-green-70: #005a26;
+  --en-color-green-80: #003d18;
+  --en-color-green-90: #00210a;
+  --en-color-yellow-10: #f0e498;
+  --en-color-yellow-20: #dfd172;
+  --en-color-yellow-30: #c7b700;
+  --en-color-yellow-40: #afa100;
+  --en-color-yellow-50: #938700;
+  --en-color-yellow-60: #746a00;
+  --en-color-yellow-70: #564e00;
+  --en-color-yellow-80: #3a3500;
+  --en-color-yellow-90: #1f1c00;
+  --en-color-red-10: #ffd9dc;
+  --en-color-red-20: #ffc0c4;
+  --en-color-red-30: #ff97a0;
+  --en-color-red-40: #ff707f;
+  --en-color-red-50: #ff2a51;
+  --en-color-red-60: #d30038;
+  --en-color-red-70: #9e0027;
+  --en-color-red-80: #6f0019;
+  --en-color-red-90: #40000a;
+  --en-color-violet-10: #e6deff;
+  --en-color-violet-20: #d4c5ff;
+  --en-color-violet-30: #bea5ff;
+  --en-color-violet-40: #ae8aff;
+  --en-color-violet-50: #9b65ff;
+  --en-color-violet-60: #872bff;
+  --en-color-violet-70: #6800cf;
+  --en-color-violet-80: #480091;
+  --en-color-violet-90: #280056;
+  --en-color-blue: #0085f2;
+  --en-color-green: #009a46;
+  --en-color-yellow: #928700;
+  --en-color-red: #d30038;
+  --en-color-violet: #9b65ff;
+  --en-color-pink: #d00058;
+  --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);
@@ -130,13 +346,63 @@
 }
 
 .en-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: #0085f2;
+  --en-color-green: #009a46;
+  --en-color-yellow: #928700;
+  --en-color-red: #d30038;
+  --en-color-violet: #9b65ff;
+  --en-color-pink: #d00058;
+  --en-color-blue-10: #dce2f2;
+  --en-color-blue-20: #c1cff1;
+  --en-color-blue-30: #8cb4ff;
+  --en-color-blue-40: #5e9eff;
+  --en-color-blue-50: #0085f2;
+  --en-color-blue-60: #0069c2;
+  --en-color-blue-70: #004d92;
+  --en-color-blue-80: #003465;
+  --en-color-blue-90: #001b3a;
+  --en-color-green-10: #a9f3ba;
+  --en-color-green-20: #73e693;
+  --en-color-green-30: #00d061;
+  --en-color-green-40: #00b755;
+  --en-color-green-50: #009a46;
+  --en-color-green-60: #007936;
+  --en-color-green-70: #005a26;
+  --en-color-green-80: #003d18;
+  --en-color-green-90: #00210a;
+  --en-color-yellow-10: #f0e498;
+  --en-color-yellow-20: #dfd172;
+  --en-color-yellow-30: #c7b700;
+  --en-color-yellow-40: #afa100;
+  --en-color-yellow-50: #938700;
+  --en-color-yellow-60: #746a00;
+  --en-color-yellow-70: #564e00;
+  --en-color-yellow-80: #3a3500;
+  --en-color-yellow-90: #1f1c00;
+  --en-color-red-10: #ffd9dc;
+  --en-color-red-20: #ffc0c4;
+  --en-color-red-30: #ff97a0;
+  --en-color-red-40: #ff707f;
+  --en-color-red-50: #ff2a51;
+  --en-color-red-60: #d30038;
+  --en-color-red-70: #9e0027;
+  --en-color-red-80: #6f0019;
+  --en-color-red-90: #40000a;
+  --en-color-violet-10: #e6deff;
+  --en-color-violet-20: #d4c5ff;
+  --en-color-violet-30: #bea5ff;
+  --en-color-violet-40: #ae8aff;
+  --en-color-violet-50: #9b65ff;
+  --en-color-violet-60: #872bff;
+  --en-color-violet-70: #6800cf;
+  --en-color-violet-80: #480091;
+  --en-color-violet-90: #280056;
+  --en-color-blue: #0085f2;
+  --en-color-green: #009a46;
+  --en-color-yellow: #928700;
+  --en-color-red: #d30038;
+  --en-color-violet: #9b65ff;
+  --en-color-pink: #d00058;
   --en-text-primary: #fff;
   --en-text-secondary: #cdcdcd;
   --en-text-invert: var(--en-primary-black);
@@ -158,95 +424,333 @@
   color-scheme: dark;
 }
 
-/* 盒模型 规则 */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
+.en-full-container {
+  width: 100%;
+  height: 100%;
 }
 
-/* 移除默认的 margin 外边距 */
-html,
-body,
-p,
-figure,
-blockquote,
-dl,
-dd {
-  margin: 0;
+.en-padding-horizontal-4 {
+  padding-left: 4px;
+  padding-right: 4px;
 }
 
-/* 设置根元素 html 默认样式 */
-html {
-  scroll-behavior: smooth;
+.en-padding-vertical-4 {
+  padding-top: 4px;
+  padding-bottom: 4px;
 }
 
-/* 设置默认的 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;
+.en-padding-4 {
+  padding: 4px;
 }
 
-/*  链接元素没有 class 类时的展示 */
-a:not([class]) {
-  text-decoration-skip-ink: auto;
+.en-margin-horizontal-4 {
+  margin-left: 4px;
+  margin-right: 4px;
 }
 
-a {
-  text-decoration: none;
+.en-margin-vertical-4 {
+  margin-top: 4px;
+  margin-bottom: 4px;
 }
 
-/* 设置图片样式 */
-img,
-picture {
-  display: block;
-  max-width: 100%;
+.en-margin-4 {
+  margin: 4px;
 }
 
-/* Fix Inter font bug: 'em' not slanted in Safari. See issue: https://github.com/mdn/yari/issues/7203 */
-em {
-  font-variation-settings: "slnt" -10;
+.en-border-radius-4 {
+  border-radius: 4px;
 }
 
-/* Inherit fonts for inputs and buttons */
-input,
-button,
-textarea,
-select {
-  font: inherit;
+.en-padding-horizontal-8 {
+  padding-left: 8px;
+  padding-right: 8px;
 }
 
-/* 自动填充的密码的背景色设置动画已取消背景色  */
-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);
+.en-padding-vertical-8 {
+  padding-top: 8px;
+  padding-bottom: 8px;
 }
 
-/* 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;
-  }
+.en-padding-8 {
+  padding: 8px;
 }
-.en-full-container {
-  width: 100%;
-  height: 100%;
+
+.en-margin-horizontal-8 {
+  margin-left: 8px;
+  margin-right: 8px;
+}
+
+.en-margin-vertical-8 {
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+
+.en-margin-8 {
+  margin: 8px;
+}
+
+.en-border-radius-8 {
+  border-radius: 8px;
+}
+
+.en-padding-horizontal-12 {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.en-padding-vertical-12 {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
+.en-padding-12 {
+  padding: 12px;
+}
+
+.en-margin-horizontal-12 {
+  margin-left: 12px;
+  margin-right: 12px;
+}
+
+.en-margin-vertical-12 {
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+
+.en-margin-12 {
+  margin: 12px;
+}
+
+.en-border-radius-12 {
+  border-radius: 12px;
+}
+
+.en-padding-horizontal-16 {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+
+.en-padding-vertical-16 {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+
+.en-padding-16 {
+  padding: 16px;
+}
+
+.en-margin-horizontal-16 {
+  margin-left: 16px;
+  margin-right: 16px;
+}
+
+.en-margin-vertical-16 {
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+
+.en-margin-16 {
+  margin: 16px;
+}
+
+.en-border-radius-16 {
+  border-radius: 16px;
+}
+
+.en-padding-horizontal-20 {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+
+.en-padding-vertical-20 {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+
+.en-padding-20 {
+  padding: 20px;
+}
+
+.en-margin-horizontal-20 {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.en-margin-vertical-20 {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.en-margin-20 {
+  margin: 20px;
+}
+
+.en-border-radius-20 {
+  border-radius: 20px;
+}
+
+.en-padding-horizontal-24 {
+  padding-left: 24px;
+  padding-right: 24px;
+}
+
+.en-padding-vertical-24 {
+  padding-top: 24px;
+  padding-bottom: 24px;
+}
+
+.en-padding-24 {
+  padding: 24px;
+}
+
+.en-margin-horizontal-24 {
+  margin-left: 24px;
+  margin-right: 24px;
+}
+
+.en-margin-vertical-24 {
+  margin-top: 24px;
+  margin-bottom: 24px;
+}
+
+.en-margin-24 {
+  margin: 24px;
+}
+
+.en-border-radius-24 {
+  border-radius: 24px;
+}
+
+.en-padding-horizontal-28 {
+  padding-left: 28px;
+  padding-right: 28px;
+}
+
+.en-padding-vertical-28 {
+  padding-top: 28px;
+  padding-bottom: 28px;
+}
+
+.en-padding-28 {
+  padding: 28px;
+}
+
+.en-margin-horizontal-28 {
+  margin-left: 28px;
+  margin-right: 28px;
+}
+
+.en-margin-vertical-28 {
+  margin-top: 28px;
+  margin-bottom: 28px;
+}
+
+.en-margin-28 {
+  margin: 28px;
+}
+
+.en-border-radius-28 {
+  border-radius: 28px;
+}
+
+.en-padding-horizontal-32 {
+  padding-left: 32px;
+  padding-right: 32px;
+}
+
+.en-padding-vertical-32 {
+  padding-top: 32px;
+  padding-bottom: 32px;
+}
+
+.en-padding-32 {
+  padding: 32px;
+}
+
+.en-margin-horizontal-32 {
+  margin-left: 32px;
+  margin-right: 32px;
+}
+
+.en-margin-vertical-32 {
+  margin-top: 32px;
+  margin-bottom: 32px;
+}
+
+.en-margin-32 {
+  margin: 32px;
+}
+
+.en-border-radius-32 {
+  border-radius: 32px;
+}
+
+.en-padding-horizontal-36 {
+  padding-left: 36px;
+  padding-right: 36px;
+}
+
+.en-padding-vertical-36 {
+  padding-top: 36px;
+  padding-bottom: 36px;
+}
+
+.en-padding-36 {
+  padding: 36px;
+}
+
+.en-margin-horizontal-36 {
+  margin-left: 36px;
+  margin-right: 36px;
+}
+
+.en-margin-vertical-36 {
+  margin-top: 36px;
+  margin-bottom: 36px;
+}
+
+.en-margin-36 {
+  margin: 36px;
+}
+
+.en-border-radius-36 {
+  border-radius: 36px;
+}
+
+.en-padding-horizontal-40 {
+  padding-left: 40px;
+  padding-right: 40px;
+}
+
+.en-padding-vertical-40 {
+  padding-top: 40px;
+  padding-bottom: 40px;
+}
+
+.en-padding-40 {
+  padding: 40px;
+}
+
+.en-margin-horizontal-40 {
+  margin-left: 40px;
+  margin-right: 40px;
+}
+
+.en-margin-vertical-40 {
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+
+.en-margin-40 {
+  margin: 40px;
+}
+
+.en-border-radius-40 {
+  border-radius: 40px;
+}
+
+.en-inline-block {
+  display: inline-block;
 }
 
 .en-relative {