feat: Add shadows and missing colors

emerald-dao · Dec 13, 2022 · 4b04893 · 4b04893
1 parent b53e0ce
commit 4b04893
Show file tree

Hide file tree

Showing 7 changed files with 447 additions and 33 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,3 +3,4 @@ node_modules
 .env
 .env.*
 !.env.example
+build
diff --git a/build/variables-dark.css b/build/variables-dark.css
@@ -1,5 +1,19 @@
 :root[data-theme=dark] {
-        --clr-alert-off: #f0757599;
+        --clr-success-badge: rgba(143,231,54,0.1);
+  --clr-success-off: rgba(133,231,35,0.5);
+  --clr-success-main: #8fe736;
+  --clr-success-900: #264408;
+  --clr-success-800: #335c0a;
+  --clr-success-700: #47810e;
+  --clr-success-600: #5ca512;
+  --clr-success-500: #70ca16;
+  --clr-success-400: #85e723;
+  --clr-success-300: #99eb47;
+  --clr-success-200: #adef6c;
+  --clr-success-100: #c2f391;
+  --clr-success-50: #d1f6ac;
+  --clr-alert-badge: #f075751a;
+  --clr-alert-off: #f0757599;
   --clr-alert-main: #f07575;
   --clr-alert-900: #5c0a0a;
   --clr-alert-800: #5c0a0a;
@@ -11,7 +25,6 @@
   --clr-alert-200: #ef6c6c;
   --clr-alert-100: #f39191;
   --clr-alert-50: #f6acac;
-  --clr-gradient-linear: linear-gradient(90deg, #23e6c0 0%, #7733ff 100%);
   --clr-surface-secondary: #313131;
   --clr-surface-primary: #222222;
   --clr-heading-off: #ffffff73;
@@ -24,6 +37,7 @@
   --clr-text-main: #ffffff99;
   --clr-shade-1: #000000;
   --clr-shade-0: #ffffff;
+  --clr-neutral-badge: #8585851a;
   --clr-neutral-900: #1a1a1a;
   --clr-neutral-800: #1a1a1a;
   --clr-neutral-700: #484848;
@@ -34,6 +48,7 @@
   --clr-neutral-200: #adadad;
   --clr-neutral-100: #d1d1d1;
   --clr-neutral-50: #d1d1d1;
+  --clr-tertiary-badge: #ff66c41a;
   --clr-tertiary-off: #ff66c499;
   --clr-tertiary-main: #ff66c4;
   --clr-tertiary-900: #33001f;
@@ -46,6 +61,7 @@
   --clr-tertiary-200: #ff5cc0;
   --clr-tertiary-100: #ff85d0;
   --clr-tertiary-50: #ffa3dc;
+  --clr-secondary-badge: #5216ca1a;
   --clr-secondary-off: #b191f399;
   --clr-secondary-main: #5216ca;
   --clr-secondary-900: #13052e;

diff --git a/build/variables-light.css b/build/variables-light.css
@@ -1,5 +1,45 @@
 :root[data-theme=light] {
-        --clr-alert-off: #f0757599;
+        --shadow-xlarge-type: dropShadow;
+  --shadow-xlarge-spread: -5;
+  --shadow-xlarge-blur: 25;
+  --shadow-xlarge-y: 20;
+  --shadow-xlarge-x: 0;
+  --shadow-large-type: dropShadow;
+  --shadow-large-spread: -3;
+  --shadow-large-blur: 15;
+  --shadow-large-y: 10;
+  --shadow-large-x: 0;
+  --shadow-medium-type: dropShadow;
+  --shadow-medium-spread: -1;
+  --shadow-medium-blur: 6;
+  --shadow-medium-y: 4;
+  --shadow-medium-x: 0;
+  --shadow-small-type: dropShadow;
+  --shadow-small-spread: 0;
+  --shadow-small-blur: 3;
+  --shadow-small-y: 1;
+  --shadow-small-x: 0;
+  --shadow-xsmall-type: dropShadow;
+  --shadow-xsmall-spread: 0;
+  --shadow-xsmall-blur: 2;
+  --shadow-xsmall-y: 1;
+  --shadow-xsmall-x: 0;
+  --clr-success-badge: rgba(143,231,54,0.1);
+  --clr-success-off: rgba(133,231,35,0.5);
+  --clr-success-main: #5ca512;
+  --clr-success-900: #d1f6ac;
+  --clr-success-800: #c2f391;
+  --clr-success-700: #adef6c;
+  --clr-success-600: #99eb47;
+  --clr-success-500: #85e723;
+  --clr-success-400: #70ca16;
+  --clr-success-300: #5ca512;
+  --clr-success-200: #47810e;
+  --clr-success-100: #335c0a;
+  --clr-success-50: #335c0a;
+  --clr-shadow-primary: rgba(50,50,50,0.1);
+  --clr-alert-badge: rgba(240,117,117,0.1);
+  --clr-alert-off: #f0757599;
   --clr-alert-main: #f07575;
   --clr-alert-900: #f6acac;
   --clr-alert-800: #f39191;
@@ -13,6 +53,7 @@
   --clr-alert-50: #5c0a0a;
   --clr-shade-1: #ffffff;
   --clr-shade-0: #000000;
+  --clr-neutral-badge: #8585851a;
   --clr-neutral-900: #d1d1d1;
   --clr-neutral-800: #d1d1d1;
   --clr-neutral-700: #adadad;
@@ -23,6 +64,20 @@
   --clr-neutral-200: #484848;
   --clr-neutral-100: #1a1a1a;
   --clr-neutral-50: #1a1a1a;
+  --clr-tertiary-badge: #ff66c41a;
+  --clr-tertiary-off: #ff66c499;
+  --clr-tertiary-main: #ff66c4;
+  --clr-tertiary-900: #ffa3dc;
+  --clr-tertiary-800: #ff85d0;
+  --clr-tertiary-700: #ff5cc0;
+  --clr-tertiary-600: #ff33b1;
+  --clr-tertiary-500: #ff0aa1;
+  --clr-tertiary-400: #e0008a;
+  --clr-tertiary-300: #b80071;
+  --clr-tertiary-200: #8f0058;
+  --clr-tertiary-100: #33001f;
+  --clr-tertiary-50: #33001f;
+  --clr-secondary-badge: rgba(177,145,243,0.1);
   --clr-secondary-off: #b191f399;
   --clr-secondary-main: #986cef;
   --clr-secondary-900: #c5acf6;
@@ -35,8 +90,9 @@
   --clr-secondary-200: #340e81;
   --clr-secondary-100: #13052e;
   --clr-secondary-50: #13052e;
+  --clr-primary-badge: #38e8c61a;
   --clr-primary-off: #23e7bf80;
-  --clr-primary-main: #38e8c6;
+  --clr-primary-main: #12a588;
   --clr-primary-900: #acf6e7;
   --clr-primary-800: #91f3df;
   --clr-primary-700: #6cefd5;
@@ -48,13 +104,20 @@
   --clr-primary-100: #0a5c4b;
   --clr-primary-50: #0a5c4b;
   --clr-text-inverse: #ffffff99;
-  --clr-text-off: #00000073;
-  --clr-text-main: #000000c7;
-  --clr-heading-off: #00000099;
+  --clr-text-off: #999;
+  --clr-text-main: #666;
+  --clr-heading-off: #999;
   --clr-heading-inverse: #ffffff;
   --clr-heading-main: #000000;
-  --clr-surface-secondary: #d1d1d1;
-  --clr-surface-primary: #e1e1e1;
-  --clr-background-secondary: #e6e6e6;
-  --clr-background-primary: #ffffff;
+  --clr-surface-secondary: #ffffff;
+  --clr-surface-primary: #fcfcfc;
+  --clr-background-secondary: #f5f5f5;
+  --clr-background-primary: #fafafa;
+  --shadow-xlarge-color: var(--clr-shadow-primary);
+  --shadow-large-color: var(--clr-shadow-primary);
+  --shadow-medium-color: var(--clr-shadow-primary);
+  --shadow-small-color: var(--clr-shadow-primary);
+  --shadow-xsmall-color: var(--clr-shadow-primary);
+  --clr-border-secondary: var(--clr-neutral-700);
+  --clr-border-primary: var(--clr-neutral-800);
     }
diff --git a/build/variables.css b/build/variables.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 23 Nov 2022 20:57:48 GMT
+ * Generated on Tue, 13 Dec 2022 14:51:25 GMT
  */
 
 :root {
@@ -58,7 +58,7 @@
   --letter-spacing-3: 0.01em;
   --letter-spacing-2: 0em;
   --letter-spacing-1: -0.01em;
-  --letter-spacing-0: -0.025em;
+  --letter-spacing-0: -2.5%;
   --font-size-12: 8rem;
   --font-size-11: 6rem;
   --font-size-10: 4.5rem;
@@ -72,8 +72,8 @@
   --font-size-2: 1rem;
   --font-size-1: 0.875rem;
   --font-size-0: 0.75rem;
-  --line-heights-1: 1.4em;
-  --line-heights-0: 1.2em;
+  --line-heights-1: 140%;
+  --line-heights-0: 120%;
   --ff-jetbrains-mono: JetBrains Mono;
   --ff-inter: Inter;
   --ff-satoshi: Satoshi;

diff --git a/tokens/dark.json b/tokens/dark.json
@@ -102,6 +102,10 @@
       "off": {
         "value": "#b191f399",
         "type": "color"
+      },
+      "badge": {
+        "value": "#5216ca1a",
+        "type": "color"
       }
     },
     "tertiary": {
@@ -152,6 +156,10 @@
       "off": {
         "value": "#ff66c499",
         "type": "color"
+      },
+      "badge": {
+        "value": "#ff66c41a",
+        "type": "color"
       }
     },
     "neutral": {
@@ -194,6 +202,10 @@
       "900": {
         "value": "#1a1a1a",
         "type": "color"
+      },
+      "badge": {
+        "value": "#8585851a",
+        "type": "color"
       }
     },
     "shade": {
@@ -254,12 +266,6 @@
         "type": "color"
       }
     },
-    "gradient": {
-      "linear": {
-        "value": "linear-gradient(90deg, #23e6c0 0%, #7733ff 100%)",
-        "type": "color"
-      }
-    },
     "alert": {
       "50": {
         "value": "#f6acac",
@@ -308,6 +314,10 @@
       "off": {
         "value": "#f0757599",
         "type": "color"
+      },
+      "badge": {
+        "value": "#f075751a",
+        "type": "color"
       }
     },
     "border": {
@@ -319,6 +329,60 @@
         "value": "{clr.neutral.500}",
         "type": "color"
       }
+    },
+    "success": {
+      "50": {
+        "value": "#d1f6ac",
+        "type": "color"
+      },
+      "100": {
+        "value": "#c2f391",
+        "type": "color"
+      },
+      "200": {
+        "value": "#adef6c",
+        "type": "color"
+      },
+      "300": {
+        "value": "#99eb47",
+        "type": "color"
+      },
+      "400": {
+        "value": "#85e723",
+        "type": "color"
+      },
+      "500": {
+        "value": "#70ca16",
+        "type": "color"
+      },
+      "600": {
+        "value": "#5ca512",
+        "type": "color"
+      },
+      "700": {
+        "value": "#47810e",
+        "type": "color"
+      },
+      "800": {
+        "value": "#335c0a",
+        "type": "color"
+      },
+      "900": {
+        "value": "#264408",
+        "type": "color"
+      },
+      "main": {
+        "value": "#8fe736",
+        "type": "color"
+      },
+      "off": {
+        "value": "rgba(133,231,35,0.5)",
+        "type": "color"
+      },
+      "badge": {
+        "value": "rgba(143,231,54,0.1)",
+        "type": "color"
+      }
     }
   }
 }
diff --git a/tokens/global.json b/tokens/global.json
@@ -15,11 +15,11 @@
   },
   "lineHeights": {
     "0": {
-      "value": "1.2em",
+      "value": "120%",
       "type": "lineHeights"
     },
     "1": {
-      "value": "1.4em",
+      "value": "140%",
       "type": "lineHeights"
     }
   },
@@ -79,7 +79,7 @@
   },
   "letterSpacing": {
     "0": {
-      "value": "-0.025em",
+      "value": "-2.5%",
       "type": "letterSpacing"
     },
     "1": {
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,3 +3,4 @@ node_modules @@
     .env
     .env.*
     !.env.example
+    build