adding new colors and fix shadow (#14)

* chore: add black and samoyed color * chore: add black and samoyed color issue #13 * fix(token): value of shodow issue #11 * chore: update packages version * fix: typo in prettierignore
workleap · Nov 16, 2021 · 0c6e6ed · 0c6e6ed
1 parent 1e3a517
commit 0c6e6ed
Show file tree

Hide file tree

Showing 7 changed files with 1,606 additions and 1,487 deletions.
diff --git a/.prettierignore → .prettierignore b/.prettierignore → .prettierignore
diff --git a/docs/tokens.json b/docs/tokens.json
@@ -186,6 +186,12 @@
       },
       {
         "grey-900": "#19222F"
+      },
+      {
+        "black": "#000000"
+      },
+      {
+        "samoyed": "#ffffff"
       }
     ]
   },
@@ -324,13 +330,13 @@
   {
     "shadow": [
       {
-        "shadow-6": "0 0.1rem 0.6rem 0 rgba(#233043, 0.1)"
+        "shadow-6": "0 0.1rem 0.6rem 0 rgba(35, 48, 67, 0.1)"
       },
       {
-        "shadow-12": "0 0.4rem 1rem 0.4rem rgba(#233043, 0.1)"
+        "shadow-12": "0 0.4rem 1rem 0.4rem rgba(35, 48, 67, 0.1)"
       },
       {
-        "shadow-24": "0 1rem 1.8rem 0.8rem rgba(#233043, 0.1)"
+        "shadow-24": "0 1rem 1.8rem 0.8rem rgba(35, 48, 67, 0.1)"
       }
     ]
   },

diff --git a/docs/tokens.scss b/docs/tokens.scss
@@ -65,6 +65,8 @@ $grey-600: #606B79;
 $grey-700: #32455B;
 $grey-800: #233043;
 $grey-900: #19222F;
+$black: #000000;
+$samoyed: #ffffff;
 
 /**
  * @tokens FontFamily
@@ -134,9 +136,9 @@ $border-radius-card: 0.4rem;
 /**
  * @tokens Shadow 
  */
-$shadow-6: 0 0.1rem 0.6rem 0 rgba(#233043, 0.1);
-$shadow-12: 0 0.4rem 1rem 0.4rem rgba(#233043, 0.1);
-$shadow-24: 0 1rem 1.8rem 0.8rem rgba(#233043, 0.1);
+$shadow-6: 0 0.1rem 0.6rem 0 rgba(35, 48, 67, 0.1);
+$shadow-12: 0 0.4rem 1rem 0.4rem rgba(35, 48, 67, 0.1);
+$shadow-24: 0 1rem 1.8rem 0.8rem rgba(35, 48, 67, 0.1);
 
 /**
  * @tokens Spacing

diff --git a/stories/acceuil.stories.mdx b/stories/acceuil.stories.mdx
@@ -35,7 +35,7 @@ In Sass, you can import the files by doing:
 In CSS, you can import the files by doing:
 
 ```
-@import '@igloo-ui/tokens/dist/variables.css';
+@import ~'@igloo-ui/tokens/dist/variables.css';
 ```
 
 ### Fonts

diff --git a/tokens/colors.json b/tokens/colors.json
@@ -76,5 +76,7 @@
     "700": { "value": "#32455B", "group": "color" },
     "800": { "value": "#233043", "group": "color" },
     "900": { "value": "#19222F", "group": "color" }
-  }
+  },
+  "black": { "value": "#000000", "group": "color" },
+  "samoyed": { "value": "#ffffff", "group": "color" }
 }
diff --git a/tokens/shadow.json b/tokens/shadow.json
@@ -1,15 +1,15 @@
 {
   "shadow": {
     "6": {
-      "value": "0 0.1rem 0.6rem 0 rgba({grey.800.value}, 0.1)",
+      "value": "0 0.1rem 0.6rem 0 rgba(35, 48, 67, 0.1)",
       "group": "shadow"
     },
     "12": {
-      "value": "0 0.4rem 1rem 0.4rem rgba({grey.800.value}, 0.1)",
+      "value": "0 0.4rem 1rem 0.4rem rgba(35, 48, 67, 0.1)",
       "group": "shadow"
     },
     "24": {
-      "value": "0 1rem 1.8rem 0.8rem rgba({grey.800.value}, 0.1)",
+      "value": "0 1rem 1.8rem 0.8rem rgba(35, 48, 67, 0.1)",
       "group": "shadow"
     }
   }

diff --git a/yarn.lock b/yarn.lock