feat(box-shadow): Add tokens

Adds our box-shadow tokens and box-shadow colour token to the light, dark, and Emerson themes
Fullscript · May 18, 2023 · 449cbb8 · 449cbb8
2 parents 313630e + 4bfff21
commit 449cbb8
Show file tree

Hide file tree

Showing 54 changed files with 553 additions and 86 deletions.
diff --git a/build.js b/build.js
@@ -55,21 +55,27 @@ const getStyleDictionaryConfig = (theme) => {
             destination: "typography.d.ts",
             filter: "custom/filter/typography",
           },
+          {
+            format: "javascript/module-flat",
+            destination: "borders.js",
+            filter: "custom/filter/borders",
+          },
+          {
+            format: "typescript/es6-declarations",
+            destination: "borders.d.ts",
+            filter: "custom/filter/borders",
+          },
           {
             format: "custom/format/javascript-colors",
             destination: isCore ? `${theme}-colors.js` : `themes/${theme}.js`,
-            filter: {
-              type: "color",
-            },
+            filter: "custom/filter/themeTokens",
           },
           {
             format: "custom/format/typescript-color-declarations",
             destination: isCore
               ? `${theme}-colors.d.ts`
               : `themes/${theme}.d.ts`,
-            filter: {
-              type: "color",
-            },
+            filter: "custom/filter/themeTokens",
           },
         ],
       },
@@ -97,21 +103,27 @@ const getStyleDictionaryConfig = (theme) => {
             destination: "typography.d.ts",
             filter: "custom/filter/typography",
           },
+          {
+            format: "javascript/module-flat",
+            destination: "borders.js",
+            filter: "custom/filter/borders",
+          },
+          {
+            format: "typescript/es6-declarations",
+            destination: "borders.d.ts",
+            filter: "custom/filter/borders",
+          },
           {
             format: "custom/format/javascript-colors",
             destination: isCore ? `${theme}-colors.js` : `themes/${theme}.js`,
-            filter: {
-              type: "color",
-            },
+            filter: "custom/filter/themeTokens",
           },
           {
             format: "custom/format/typescript-color-declarations",
             destination: isCore
               ? `${theme}-colors.d.ts`
               : `themes/${theme}.d.ts`,
-            filter: {
-              type: "color",
-            },
+            filter: "custom/filter/themeTokens",
           },
         ],
       },

diff --git a/dist/documentation/core-dark-colors.d.ts b/dist/documentation/core-dark-colors.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 05 May 2023 14:00:05 GMT
+ * Generated on Fri, 12 May 2023 16:40:48 GMT
  */
 
 export const green : {100:{

diff --git a/dist/documentation/core-dark-colors.js b/dist/documentation/core-dark-colors.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 05 May 2023 14:00:05 GMT
+ * Generated on Fri, 12 May 2023 16:40:48 GMT
  */
 
 module.exports = {green : {100:{

diff --git a/dist/documentation/core-light-colors.d.ts b/dist/documentation/core-light-colors.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 05 May 2023 14:00:05 GMT
+ * Generated on Fri, 12 May 2023 16:40:48 GMT
  */
 
 export const green : {100:{

diff --git a/dist/documentation/core-light-colors.js b/dist/documentation/core-light-colors.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 05 May 2023 14:00:05 GMT
+ * Generated on Fri, 12 May 2023 16:40:48 GMT
  */
 
 module.exports = {green : {100:{

diff --git a/dist/documentation/themes/dark.d.ts b/dist/documentation/themes/dark.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 05 May 2023 14:00:05 GMT
+ * Generated on Fri, 12 May 2023 16:40:48 GMT
  */
 
 export const text : {emphasis:{
@@ -502,4 +502,9 @@ export const light : {backgroundBase:{
             name: string,
             hex: string,
             description: string
+          }};
+export const shadow : {base:{
+            name: string,
+            hex: string,
+            description: string
           }};
diff --git a/dist/documentation/themes/dark.js b/dist/documentation/themes/dark.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 05 May 2023 14:00:05 GMT
+ * Generated on Fri, 12 May 2023 16:40:48 GMT
  */
 
 module.exports = {text : {emphasis:{
@@ -502,4 +502,9 @@ light : {backgroundBase:{
             name: "light.linkMutedHover",
             hex: "#FFFFFF",
             description: "Used for link hover colour for light profile components on contrasting surface backgrounds"
+          }},
+shadow : {base:{
+            name: "shadow.base",
+            hex: "#000000",
+            description: "For use only with box shadow tokens"
           }},};
diff --git a/dist/documentation/themes/emerson.d.ts b/dist/documentation/themes/emerson.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 05 May 2023 14:00:05 GMT
+ * Generated on Fri, 12 May 2023 16:40:48 GMT
  */
 
 export const text : {emphasis:{
@@ -502,4 +502,9 @@ export const light : {backgroundBase:{
             name: string,
             hex: string,
             description: string
+          }};
+export const shadow : {base:{
+            name: string,
+            hex: string,
+            description: string
           }};
diff --git a/dist/documentation/themes/emerson.js b/dist/documentation/themes/emerson.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 05 May 2023 14:00:05 GMT
+ * Generated on Fri, 12 May 2023 16:40:48 GMT
  */
 
 module.exports = {text : {emphasis:{
@@ -502,4 +502,9 @@ light : {backgroundBase:{
             name: "light.linkMutedHover",
             hex: "#FFFFFF",
             description: "Used for link hover colour for light profile components on contrasting surface backgrounds"
+          }},
+shadow : {base:{
+            name: "shadow.base",
+            hex: "#000000",
+            description: "For use only with box shadow tokens"
           }},};
diff --git a/dist/documentation/themes/light.d.ts b/dist/documentation/themes/light.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 05 May 2023 14:00:05 GMT
+ * Generated on Fri, 12 May 2023 16:40:48 GMT
  */
 
 export const text : {emphasis:{
@@ -502,4 +502,9 @@ export const light : {backgroundBase:{
             name: string,
             hex: string,
             description: string
+          }};
+export const shadow : {base:{
+            name: string,
+            hex: string,
+            description: string
           }};
diff --git a/dist/documentation/themes/light.js b/dist/documentation/themes/light.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 05 May 2023 14:00:05 GMT
+ * Generated on Fri, 12 May 2023 16:40:48 GMT
  */
 
 module.exports = {text : {emphasis:{
@@ -502,4 +502,9 @@ light : {backgroundBase:{
             name: "light.linkMutedHover",
             hex: "#FFFFFF",
             description: "Used for link hover colour for light profile components on contrasting surface backgrounds"
+          }},
+shadow : {base:{
+            name: "shadow.base",
+            hex: "#36485C",
+            description: "For use only with box shadow tokens"
           }},};
diff --git a/dist/tokens/native/borders.d.ts b/dist/tokens/native/borders.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 05 May 2023 14:00:05 GMT
+ * Generated on Fri, 12 May 2023 16:40:48 GMT
  */
 
 export const radiusBase : number;

diff --git a/dist/tokens/native/borders.js b/dist/tokens/native/borders.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 05 May 2023 14:00:05 GMT
+ * Generated on Fri, 12 May 2023 16:40:48 GMT
  */
 
 module.exports = {

diff --git a/dist/tokens/native/core-dark-colors.d.ts b/dist/tokens/native/core-dark-colors.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 05 May 2023 14:00:05 GMT
+ * Generated on Fri, 12 May 2023 16:40:48 GMT
  */
 
 export const green : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string};
@@ -9,4 +9,4 @@ export const red : {100 : string,200 : string,300 : string,400 : string,500 : st
 export const purple : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string};
 export const orange : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string};
 export const grey : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string};
-export const shades : {white : string,black : string,transparent : string};
+export const shades : {white : string,black : string,transparent : string};export const boxShadows: {};
diff --git a/dist/tokens/native/core-dark-colors.js b/dist/tokens/native/core-dark-colors.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 05 May 2023 14:00:05 GMT
+ * Generated on Fri, 12 May 2023 16:40:48 GMT
  */
 
 module.exports = {green : {100 : "#0C291E",200 : "#13402F",300 : "#1A5740",400 : "#256E53",500 : "#288563",600 : "#42AD86",700 : "#86D6B9",800 : "#DBFFF1"},
@@ -9,4 +9,4 @@ red : {100 : "#290F16",200 : "#451522",300 : "#611D30",400 : "#8F2843",500 : "#B
 purple : {100 : "#200F29",200 : "#33193F",300 : "#432652",400 : "#542F66",500 : "#693B80",600 : "#865C99",700 : "#B990CC",800 : "#F0F1FF"},
 orange : {100 : "#29170C",200 : "#4A2915",300 : "#663A1E",400 : "#8A4E29",500 : "#AD6234",600 : "#CF7945",700 : "#E7AA84",800 : "#FFE3D1"},
 grey : {100 : "#101012",200 : "#1A1D21",300 : "#22272B",400 : "#2D3238",500 : "#515357",600 : "#616568",700 : "#98999B",800 : "#E8E9EA"},
-shades : {white : "#FFFFFF",black : "#000000",transparent : "transparent"},};
+shades : {white : "#FFFFFF",black : "#000000",transparent : "transparent"},boxShadows: {},};
diff --git a/dist/tokens/native/core-light-colors.d.ts b/dist/tokens/native/core-light-colors.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 05 May 2023 14:00:05 GMT
+ * Generated on Fri, 12 May 2023 16:40:48 GMT
  */
 
 export const green : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string};
@@ -10,4 +10,4 @@ export const purple : {100 : string,200 : string,300 : string,400 : string,500 :
 export const orange : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string};
 export const grey : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string};
 export const shades : {white : string,black : string,transparent : string};
-export const yellow : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string};
+export const yellow : {100 : string,200 : string,300 : string,400 : string,500 : string,600 : string,700 : string,800 : string};export const boxShadows: {};
diff --git a/dist/tokens/native/core-light-colors.js b/dist/tokens/native/core-light-colors.js
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 05 May 2023 14:00:05 GMT
+ * Generated on Fri, 12 May 2023 16:40:48 GMT
  */
 
 module.exports = {green : {100 : "#FAFFFC",200 : "#EBF2EF",300 : "#D1E0D9",400 : "#B6CFC2",500 : "#86B09B",600 : "#307553",700 : "#275E43",800 : "#244C38"},
@@ -10,4 +10,4 @@ purple : {100 : "#FCFAFF",200 : "#F2ECFE",300 : "#D7CEE9",400 : "#B9ABD5",500 :
 orange : {100 : "#FFFAF5",200 : "#FFF3E8",300 : "#F3D8C0",400 : "#E7B88F",500 : "#CF8545",600 : "#B4631D",700 : "#8E4D14",800 : "#784213"},
 grey : {100 : "#FCFEFF",200 : "#F5F7FA",300 : "#E6EDF5",400 : "#C8D3E0",500 : "#596D84",600 : "#475A70",700 : "#36485C",800 : "#2E3A47"},
 shades : {white : "#FFFFFF",black : "#000000",transparent : "transparent"},
-yellow : {100 : "#faf8f2",200 : "#fcf3dd",300 : "#fce7b1",400 : "#fcd97e",500 : "#fccb4c",600 : "#ffc121",700 : "#f7b200",800 : "#e5a500"},};
+yellow : {100 : "#faf8f2",200 : "#fcf3dd",300 : "#fce7b1",400 : "#fcd97e",500 : "#fccb4c",600 : "#ffc121",700 : "#f7b200",800 : "#e5a500"},boxShadows: {},};
diff --git a/dist/tokens/native/themes/dark.d.ts b/dist/tokens/native/themes/dark.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 05 May 2023 14:00:05 GMT
+ * Generated on Fri, 12 May 2023 16:40:48 GMT
  */
 
 export const theme: string;
@@ -15,4 +15,5 @@ export const highlight : {textBase : string,textHover : string,textActive : stri
 export const disabled : {text : string,background : string,nakedBackground : string,border : string,inputBackground : string,inputLabelText : string};
 export const input : {backgroundBase : string,backgroundHover : string,backgroundInformation : string,textBase : string,textInformation : string,textInformationError : string,textLabel : string,textFloatingLabel : string,textFloatingLabelError : string,textPlaceholder : string,textActive : string,borderBase : string,borderError : string,borderHover : string,borderEmphasized : string,borderEmphasizedHover : string,borderActive : string};
 export const separator : {base : string};
-export const light : {backgroundBase : string,backgroundContrast : string,backgroundHover : string,backgroundActive : string,textBase : string,linkMutedBase : string,linkMutedHover : string};
+export const light : {backgroundBase : string,backgroundContrast : string,backgroundHover : string,backgroundActive : string,textBase : string,linkMutedBase : string,linkMutedHover : string};
+export const shadow : {base : string};export const boxShadows: {cardBase : string,cardHover : string,popoverBase : string,modalBase : string};
diff --git a/dist/tokens/native/themes/dark.js b/dist/tokens/native/themes/dark.js
diff --git a/dist/tokens/native/themes/emerson.d.ts b/dist/tokens/native/themes/emerson.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 05 May 2023 14:00:05 GMT
+ * Generated on Fri, 12 May 2023 16:40:48 GMT
  */
 
 export const theme: string;
@@ -15,4 +15,5 @@ export const highlight : {textBase : string,textHover : string,textActive : stri
 export const disabled : {text : string,background : string,nakedBackground : string,border : string,inputBackground : string,inputLabelText : string};
 export const input : {backgroundBase : string,backgroundHover : string,backgroundInformation : string,textBase : string,textInformation : string,textInformationError : string,textLabel : string,textFloatingLabel : string,textFloatingLabelError : string,textPlaceholder : string,textActive : string,borderBase : string,borderError : string,borderHover : string,borderEmphasized : string,borderEmphasizedHover : string,borderActive : string};
 export const separator : {base : string};
-export const light : {backgroundBase : string,backgroundContrast : string,backgroundHover : string,backgroundActive : string,textBase : string,linkMutedBase : string,linkMutedHover : string};
+export const light : {backgroundBase : string,backgroundContrast : string,backgroundHover : string,backgroundActive : string,textBase : string,linkMutedBase : string,linkMutedHover : string};
+export const shadow : {base : string};export const boxShadows: {cardBase : string,cardHover : string,popoverBase : string,modalBase : string};
diff --git a/dist/tokens/native/themes/emerson.js b/dist/tokens/native/themes/emerson.js
diff --git a/dist/tokens/native/themes/light.d.ts b/dist/tokens/native/themes/light.d.ts
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Fri, 05 May 2023 14:00:05 GMT
+ * Generated on Fri, 12 May 2023 16:40:48 GMT
  */
 
 export const theme: string;
@@ -15,4 +15,5 @@ export const highlight : {textBase : string,textHover : string,textActive : stri
 export const disabled : {text : string,background : string,nakedBackground : string,border : string,inputBackground : string,inputLabelText : string};
 export const input : {backgroundBase : string,backgroundHover : string,backgroundInformation : string,textBase : string,textInformation : string,textInformationError : string,textLabel : string,textFloatingLabel : string,textFloatingLabelError : string,textPlaceholder : string,textActive : string,borderBase : string,borderError : string,borderHover : string,borderEmphasized : string,borderEmphasizedHover : string,borderActive : string};
 export const separator : {base : string};
-export const light : {backgroundBase : string,backgroundContrast : string,backgroundHover : string,backgroundActive : string,textBase : string,linkMutedBase : string,linkMutedHover : string};
+export const light : {backgroundBase : string,backgroundContrast : string,backgroundHover : string,backgroundActive : string,textBase : string,linkMutedBase : string,linkMutedHover : string};
+export const shadow : {base : string};export const boxShadows: {cardBase : string,cardHover : string,popoverBase : string,modalBase : string};
diff --git a/dist/tokens/native/themes/light.js b/dist/tokens/native/themes/light.js