@abgov/design-tokens 1.0.5-dev.3 → 1.0.5-dev.5

package/css/index.css

@@ -0,0 +1,100 @@
+/**
+ * Do not edit directly
+ * Generated on Thu, 05 Jan 2023 22:44:54 GMT
+ */
+
+:root {
+  --goa-color-brand-default: #0081a2;
+  --goa-color-brand-dark: #005072;
+  --goa-color-brand-light: #c8eefa;
+  --goa-color-interactive-default: #0070c4;
+  --goa-color-interactive-disabled: #80b7e1;
+  --goa-color-interactive-hover: #004f84;
+  --goa-color-interactive-error: #ec040b;
+  --goa-color-interactive-focus: #feba35;
+  --goa-color-text-default: #333333;
+  --goa-color-text-secondary: #666666;
+  --goa-color-text-light: #ffffff;
+  --goa-color-info-default: #005daa;
+  --goa-color-info-background: #eff8ff;
+  --goa-color-info-light: #b2d4ed;
+  --goa-color-info-dark: #00347a;
+  --goa-color-caution-background: #fff6e5;
+  --goa-color-caution-default: #feba35;
+  --goa-color-caution-light: #fcefd0;
+  --goa-color-caution-dark: #c68a00;
+  --goa-color-emergency-background: #fff1f2;
+  --goa-color-emergency-default: #ec040b;
+  --goa-color-emergency-light: #ffcecf;
+  --goa-color-emergency-dark: #b00000;
+  --goa-color-success-background: #eef9f3;
+  --goa-color-success-default: #00853f;
+  --goa-color-success-light: #c6e0d0;
+  --goa-color-success-dark: #005715;
+  --goa-color-greyscale-100: #f1f1f1;
+  --goa-color-greyscale-200: #dcdcdc;
+  --goa-color-greyscale-400: #adadad;
+  --goa-color-greyscale-500: #949494;
+  --goa-color-greyscale-600: #858585;
+  --goa-color-greyscale-700: #666666;
+  --goa-color-greyscale-black: #333333;
+  --goa-color-greyscale-white: #ffffff;
+  --goa-font-weight-regular: 400;
+  --goa-font-weight-medium: 500;
+  --goa-font-weight-bold: 700;
+  --goa-font-size-1: 0.75rem;
+  --goa-font-size-2: 0.875rem;
+  --goa-font-size-3: 1rem;
+  --goa-font-size-4: 1.125rem;
+  --goa-font-size-5: 1.25rem;
+  --goa-font-size-6: 1.375rem;
+  --goa-font-size-7: 1.5rem;
+  --goa-font-size-8: 2rem;
+  --goa-font-size-9: 2.25rem;
+  --goa-font-size-10: 3rem;
+  --goa-spacing-none: 0rem;
+  --goa-spacing-3xs: 0.125rem;
+  --goa-spacing-2xs: 0.25rem;
+  --goa-spacing-xs: 0.5rem;
+  --goa-spacing-s: 0.75rem;
+  --goa-spacing-m: 1rem;
+  --goa-spacing-l: 1.5rem;
+  --goa-spacing-xl: 2rem;
+  --goa-spacing-2xl: 3rem;
+  --goa-spacing-3xl: 4rem;
+  --goa-spacing-4xl: 8rem;
+  --goa-border-radius-0: 0rem;
+  --goa-border-radius-4: 0.25rem;
+  --goa-border-radius-pill: 999px;
+  --goa-border-radius-circle: 50%;
+  --goa-opacity-3: 30%;
+  --goa-opacity-5: 50%;
+  --goa-opacity-8: 80%;
+  --goa-line-height-1: 1.25rem;
+  --goa-line-height-2: 1.5rem;
+  --goa-line-height-3: 1.75rem;
+  --goa-line-height-4: 2rem;
+  --goa-line-height-5: 2.5rem;
+  --goa-line-height-6: 2.75rem;
+  --goa-line-height-7: 3.5rem;
+  --goa-font-families-default: Acumin-pro-semi-condensed;
+  --goa-font-families-numbers: roboto-mono;
+  --goa-typography-heading-xl: 700 3rem/3.5rem Acumin-pro-semi-condensed;
+  --goa-typography-heading-l: 400 2.25rem/2.75rem Acumin-pro-semi-condensed;
+  --goa-typography-heading-m: 400 1.5rem/2rem Acumin-pro-semi-condensed;
+  --goa-typography-heading-s: 700 1.125rem/1.75rem Acumin-pro-semi-condensed;
+  --goa-typography-heading-xs: 700 1rem/1.5rem Acumin-pro-semi-condensed;
+  --goa-typography-body-l: 400 1.5rem/2rem Acumin-pro-semi-condensed;
+  --goa-typography-body-m: 400 1.125rem/1.75rem Acumin-pro-semi-condensed;
+  --goa-typography-body-s: 400 1rem/1.5rem Acumin-pro-semi-condensed;
+  --goa-typography-body-xs: 400 0.875rem/1.25rem Acumin-pro-semi-condensed;
+  --goa-typography-button-default: 400 1.125rem/1.25rem Acumin-pro-semi-condensed;
+  --goa-border-width-s: 1px;
+  --goa-border-width-m: 2px;
+  --goa-border-width-l: 3px;
+  --goa-letter-spacing-1: 0.0125rem;
+  --goa-icon-size-s: 1rem;
+  --goa-icon-size-m: 1.25rem;
+  --goa-icon-size-l: 1.5rem;
+  --goa-drop-shadow-modal: 6px 6px 6px 0px rgba(0,0,0,0.16);
+}

package/css/tokens.css

@@ -1,58 +1,42 @@
 /**
  * Do not edit directly
- * Generated on Tue, 08 Nov 2022 20:58:21 GMT
+ * Generated on Thu, 05 Jan 2023 22:31:12 GMT
  */
 
 :root {
-  --goa-information-background-color: #f1f1f1;
-  --goa-information-text-color: #005daa;
-  --goa-information-icon-color: #005daa;
-  --goa-font-family: Acumin-pro-semi-condensed;
-  --goa-font-size: 0.875rem;
-  --goa-font-weight: 400;
-  --goa-important-background-color: #feba35;
-  --goa-important-text-color: #333333;
-  --goa-important-icon-color: #333333;
-  --goa-padding-left: 0.5rem;
-  --goa-padding-right: 0.5rem;
-  --goa-padding-top: 0.25rem;
-  --goa-padding-bottom: 0.25rem;
-  --goa-icon-size: 1rem;
-  --goa-emergency-background-color: #ec040b;
-  --goa-emergency-text-color: #ffffff;
-  --goa-emergency-icon-color: #ffffff;
-  --goa-success-background-colour: #00853f;
-  --goa-success-text-color: #ffffff;
-  --goa-success-icon-color: #ffffff;
-  --goa-space-between: 0.25rem;
-  --goa-border-radius: 0.25rem;
   --goa-color-brand-default: #0081a2;
   --goa-color-brand-dark: #005072;
   --goa-color-brand-light: #c8eefa;
   --goa-color-interactive-default: #0070c4;
+  --goa-color-interactive-disabled: #80b7e1;
   --goa-color-interactive-hover: #004f84;
   --goa-color-interactive-error: #ec040b;
   --goa-color-interactive-focus: #feba35;
   --goa-color-text-default: #333333;
   --goa-color-text-secondary: #666666;
   --goa-color-text-light: #ffffff;
-  --goa-color-status-info-default: #005daa;
-  --goa-color-status-info-light: #b2d4ed;
-  --goa-color-status-info-dark: #00347a;
-  --goa-color-status-warning-default: #feba35;
-  --goa-color-status-warning-light: #fcefd0;
-  --goa-color-status-warning-dark: #c68a00;
-  --goa-color-status-emergency-default: #ec040b;
-  --goa-color-status-emergency-light: #ffcecf;
-  --goa-color-status-emergency-dark: #b00000;
-  --goa-color-status-success-default: #00853f;
-  --goa-color-status-success-light: #c6e0d0;
-  --goa-color-status-success-dark: #005715;
+  --goa-color-info-default: #005daa;
+  --goa-color-info-background: #eff8ff;
+  --goa-color-info-light: #b2d4ed;
+  --goa-color-info-dark: #00347a;
+  --goa-color-caution-background: #fff6e5;
+  --goa-color-caution-default: #feba35;
+  --goa-color-caution-light: #fcefd0;
+  --goa-color-caution-dark: #c68a00;
+  --goa-color-emergency-background: #fff1f2;
+  --goa-color-emergency-default: #ec040b;
+  --goa-color-emergency-light: #ffcecf;
+  --goa-color-emergency-dark: #b00000;
+  --goa-color-success-background: #eef9f3;
+  --goa-color-success-default: #00853f;
+  --goa-color-success-light: #c6e0d0;
+  --goa-color-success-dark: #005715;
   --goa-color-greyscale-100: #f1f1f1;
   --goa-color-greyscale-200: #dcdcdc;
   --goa-color-greyscale-400: #adadad;
   --goa-color-greyscale-500: #949494;
-  --goa-color-greyscale-600: #666666;
+  --goa-color-greyscale-600: #858585;
+  --goa-color-greyscale-700: #666666;
   --goa-color-greyscale-black: #333333;
   --goa-color-greyscale-white: #ffffff;
   --goa-font-weight-regular: 400;
@@ -108,8 +92,9 @@
   --goa-border-width-s: 1px;
   --goa-border-width-m: 2px;
   --goa-border-width-l: 3px;
-  --goa-letter-spacing-1: 1%;
+  --goa-letter-spacing-1: 0.0125rem;
   --goa-icon-size-s: 1rem;
   --goa-icon-size-m: 1.25rem;
   --goa-icon-size-l: 1.5rem;
+  --goa-drop-shadow-modal: 6px 6px 6px 0px rgba(0,0,0,0.16);
 }

package/data/global-ddi.json

@@ -23,27 +23,32 @@
         "type": "color",
         "description": "Default color for interactive elements."
       },
+      "disabled": {
+        "value": "#80B7E1",
+        "type": "color",
+        "description": "Color for disabled interactive elements."
+      },
       "hover": {
         "value": "#004F84",
         "type": "color",
-        "description": "Hover state for interactive elements."
+        "description": "Hover state color for interactive elements."
       },
       "error": {
         "value": "#EC040B",
         "type": "color",
-        "description": "Error state for interactive elements."
+        "description": "Error state color for interactive elements."
       },
       "focus": {
         "value": "#FEBA35",
         "type": "color",
-        "description": "Focus state for interactive elements."
+        "description": "Focus state color for interactive elements."
       }
     },
     "text": {
       "default": {
         "value": "#333333",
         "type": "color",
-        "description": "Default colour for most text (such as body, headings, subheadings)."
+        "description": "Default color for most text (such as body, headings, subheadings)."
       },
       "secondary": {
         "value": "#666666",
@@ -56,66 +61,84 @@
         "description": "Use as the text color on dark backgrounds."
       }
     },
-    "status": {
-      "info": {
-        "default": {
-          "value": "#005DAA",
-          "type": "color",
-          "description": "Use this color to indicate information to the user."
-        },
-        "light": {
-          "value": "#B2D4ED",
-          "type": "color"
-        },
-        "dark": {
-          "value": "#00347A",
-          "type": "color"
-        }
-      },
-      "warning": {
-        "default": {
-          "value": "#FEBA35",
-          "type": "color",
-          "description": "Use this color to indicate a warning to the user."
-        },
-        "light": {
-          "value": "#FCEFD0",
-          "type": "color"
-        },
-        "dark": {
-          "value": "#C68A00",
-          "type": "color"
-        }
-      },
-      "emergency": {
-        "default": {
-          "value": "#EC040B",
-          "type": "color",
-          "description": "Use this color to indicate an emergency to the user."
-        },
-        "light": {
-          "value": "#FFCECF",
-          "type": "color"
-        },
-        "dark": {
-          "value": "#B00000",
-          "type": "color"
-        }
-      },
-      "success": {
-        "default": {
-          "value": "#00853F",
-          "type": "color",
-          "description": "Use this color to indicate success to the user."
-        },
-        "light": {
-          "value": "#C6E0D0",
-          "type": "color"
-        },
-        "dark": {
-          "value": "#005715",
-          "type": "color"
-        }
+    "info": {
+      "default": {
+        "value": "#005DAA",
+        "type": "color",
+        "description": "Use this color to indicate information to the user."
+      },
+      "background": {
+        "value": "#EFF8FF",
+        "type": "color",
+        "description": "Use this color as a background when indicating information to the user such as within a container or small callout."
+      },
+      "light": {
+        "value": "#B2D4ED",
+        "type": "color"
+      },
+      "dark": {
+        "value": "#00347A",
+        "type": "color"
+      }
+    },
+    "caution": {
+      "background": {
+        "value": "#FFF6E5",
+        "type": "color",
+        "description": "Use this color as a background when indicating caution to the user such as within a container or small callout."
+      },
+      "default": {
+        "value": "#FEBA35",
+        "type": "color",
+        "description": "Use this color to indicate a warning to the user."
+      },
+      "light": {
+        "value": "#FCEFD0",
+        "type": "color"
+      },
+      "dark": {
+        "value": "#C68A00",
+        "type": "color"
+      }
+    },
+    "emergency": {
+      "background": {
+        "value": "#FFF1F2",
+        "type": "color",
+        "description": "Use this color as a background when indicating emergency to the user such as within a container or small callout."
+      },
+      "default": {
+        "value": "#EC040B",
+        "type": "color",
+        "description": "Use this color to indicate an emergency to the user."
+      },
+      "light": {
+        "value": "#FFCECF",
+        "type": "color"
+      },
+      "dark": {
+        "value": "#B00000",
+        "type": "color"
+      }
+    },
+    "success": {
+      "background": {
+        "value": "#EEF9F3",
+        "type": "color",
+        "description": "Use this color as a background when indicating success to the user such as within a container or small callout."
+      },
+      "default": {
+        "value": "#00853F",
+        "type": "color",
+        "description": "Use this color to indicate success to the user."
+      },
+      "light": {
+        "value": "#C6E0D0",
+        "type": "color"
+      },
+      "dark": {
+        "value": "#005715",
+        "type": "color"
       }
     },
     "greyscale": {
@@ -136,6 +159,10 @@
         "type": "color"
       },
       "600": {
+        "value": "#858585",
+        "type": "color"
+      },
+      "700": {
         "value": "#666666",
         "type": "color"
       },
@@ -487,7 +514,7 @@
   },
   "letterSpacing": {
     "1": {
-      "value": "1%",
+      "value": "0.0125rem",
       "type": "letterSpacing",
       "description": "small letter spacing adjustment to slightly kern letters out for readability on buttons"
     }
@@ -508,5 +535,19 @@
       "type": "sizing",
       "description": "24px"
     }
+  },
+  "dropShadow": {
+    "modal": {
+      "value": {
+        "x": "6",
+        "y": "6",
+        "blur": "6",
+        "spread": "0",
+        "color": "rgba(0,0,0,0.16)",
+        "type": "dropShadow"
+      },
+      "type": "boxShadow",
+      "description": "Drop shadow for modals."
+    }
   }
 }

package/index.spec.js

@@ -12,24 +12,26 @@ describe("GoA Design Tokens", () => {
     SC.generate("./tmp");
     const dirs = fs.readdirSync("./tmp");
     expect(dirs.length).toBe(2);
-    expect(dirs).toContain("css");
-    expect(dirs).toContain("scss");
+    expect(dirs[0]).toContain("css");
+    expect(dirs[1]).toContain("scss");
 
-    for (const dir of dirs) {
-      const files = fs.readdirSync("./tmp/" + dir);
-      expect(files.length).toBe(1);
-      expect(files[0]).toBe(`tokens.${dir}`);
-    }
+    const cssfiles = fs.readdirSync("./tmp/css");
+    expect(cssfiles.length).toBe(1);
+    expect(cssfiles[0]).toBe(`index.css`);
+
+    const scssfiles = fs.readdirSync("./tmp/scss");
+    expect(scssfiles.length).toBe(1);
+    expect(scssfiles[0]).toBe(`index.scss`);
   });
 
   it("should create valid css output", async () => {
     SC.generate("./tmp");
-    const raw = fs.readFileSync("./tmp/css/tokens.css", { encoding: "utf8" });
-    expect(raw).toContain("--goa-color-brand-default");
+    const raw = fs.readFileSync("./tmp/css/index.css", { encoding: "utf8" });
+    expect(raw).not.toContain("[object Object]");
   });
   it("should create valid scss output", async () => {
     SC.generate("./tmp");
-    const raw = fs.readFileSync("./tmp/scss/tokens.scss", { encoding: "utf8" });
-    expect(raw).toContain("$goa-color-brand-default");
+    const raw = fs.readFileSync("./tmp/scss/index.scss", { encoding: "utf8" });
+    expect(raw).not.toContain("[object Object]");
   });
 });

package/lib/design-tokens.js

@@ -1,6 +1,8 @@
 const StyleDictionary = require("style-dictionary");
 
 function generate(outputPath) {
+
+  // Typography
   StyleDictionary.registerTransform({
     name: "typography/shorthand",
     type: "value",
@@ -15,6 +17,20 @@ function generate(outputPath) {
     },
   });
 
+  // Drop Shadow
+  StyleDictionary.registerTransform({
+    name: "box-shadow",
+    type: "value",
+    transitive: true,
+    matcher: function(token) {
+      return token.type === "boxShadow";
+    },
+    transformer: function(token) {
+      const { x, y, blur, spread, color } = token.original.value;
+      return `${x}px ${y}px ${blur}px ${spread}px ${color}`;
+    },
+  });
+
   try {
     StyleDictionary.extend({
       source: [`./data/**/*.json`],
@@ -24,11 +40,12 @@ function generate(outputPath) {
           transforms: [
             ...StyleDictionary.transformGroup.scss,
             "typography/shorthand",
+            "box-shadow",
           ],
           buildPath: `${outputPath}/scss/`,
           files: [
             {
-              destination: "tokens.scss",
+              destination: "index.scss",
               format: "scss/variables",
             },
           ],
@@ -38,11 +55,12 @@ function generate(outputPath) {
           transforms: [
             ...StyleDictionary.transformGroup.css,
             "typography/shorthand",
+            "box-shadow",
           ],
           buildPath: `${outputPath}/css/`,
           files: [
             {
-              destination: "tokens.css",
+              destination: "index.css",
               format: "css/variables",
             },
           ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/design-tokens",
-  "version": "1.0.5-dev.3",
+  "version": "1.0.5-dev.5",
   "main": "./index.js",
   "repository": {
     "type": "git",

package/scss/index.scss

@@ -0,0 +1,97 @@
+
+// Do not edit directly
+// Generated on Thu, 05 Jan 2023 22:44:54 GMT
+
+$goa-color-brand-default: #0081a2;
+$goa-color-brand-dark: #005072;
+$goa-color-brand-light: #c8eefa;
+$goa-color-interactive-default: #0070c4;
+$goa-color-interactive-disabled: #80b7e1;
+$goa-color-interactive-hover: #004f84;
+$goa-color-interactive-error: #ec040b;
+$goa-color-interactive-focus: #feba35;
+$goa-color-text-default: #333333;
+$goa-color-text-secondary: #666666;
+$goa-color-text-light: #ffffff;
+$goa-color-info-default: #005daa;
+$goa-color-info-background: #eff8ff;
+$goa-color-info-light: #b2d4ed;
+$goa-color-info-dark: #00347a;
+$goa-color-caution-background: #fff6e5;
+$goa-color-caution-default: #feba35;
+$goa-color-caution-light: #fcefd0;
+$goa-color-caution-dark: #c68a00;
+$goa-color-emergency-background: #fff1f2;
+$goa-color-emergency-default: #ec040b;
+$goa-color-emergency-light: #ffcecf;
+$goa-color-emergency-dark: #b00000;
+$goa-color-success-background: #eef9f3;
+$goa-color-success-default: #00853f;
+$goa-color-success-light: #c6e0d0;
+$goa-color-success-dark: #005715;
+$goa-color-greyscale-100: #f1f1f1;
+$goa-color-greyscale-200: #dcdcdc;
+$goa-color-greyscale-400: #adadad;
+$goa-color-greyscale-500: #949494;
+$goa-color-greyscale-600: #858585;
+$goa-color-greyscale-700: #666666;
+$goa-color-greyscale-black: #333333;
+$goa-color-greyscale-white: #ffffff;
+$goa-font-weight-regular: 400;
+$goa-font-weight-medium: 500;
+$goa-font-weight-bold: 700;
+$goa-font-size-1: 0.75rem;
+$goa-font-size-2: 0.875rem;
+$goa-font-size-3: 1rem;
+$goa-font-size-4: 1.125rem;
+$goa-font-size-5: 1.25rem;
+$goa-font-size-6: 1.375rem;
+$goa-font-size-7: 1.5rem;
+$goa-font-size-8: 2rem;
+$goa-font-size-9: 2.25rem;
+$goa-font-size-10: 3rem;
+$goa-spacing-none: 0rem;
+$goa-spacing-3xs: 0.125rem;
+$goa-spacing-2xs: 0.25rem;
+$goa-spacing-xs: 0.5rem;
+$goa-spacing-s: 0.75rem;
+$goa-spacing-m: 1rem;
+$goa-spacing-l: 1.5rem;
+$goa-spacing-xl: 2rem;
+$goa-spacing-2xl: 3rem;
+$goa-spacing-3xl: 4rem;
+$goa-spacing-4xl: 8rem;
+$goa-border-radius-0: 0rem;
+$goa-border-radius-4: 0.25rem;
+$goa-border-radius-pill: 999px;
+$goa-border-radius-circle: 50%;
+$goa-opacity-3: 30%;
+$goa-opacity-5: 50%;
+$goa-opacity-8: 80%;
+$goa-line-height-1: 1.25rem;
+$goa-line-height-2: 1.5rem;
+$goa-line-height-3: 1.75rem;
+$goa-line-height-4: 2rem;
+$goa-line-height-5: 2.5rem;
+$goa-line-height-6: 2.75rem;
+$goa-line-height-7: 3.5rem;
+$goa-font-families-default: Acumin-pro-semi-condensed;
+$goa-font-families-numbers: roboto-mono;
+$goa-typography-heading-xl: 700 3rem/3.5rem Acumin-pro-semi-condensed;
+$goa-typography-heading-l: 400 2.25rem/2.75rem Acumin-pro-semi-condensed;
+$goa-typography-heading-m: 400 1.5rem/2rem Acumin-pro-semi-condensed;
+$goa-typography-heading-s: 700 1.125rem/1.75rem Acumin-pro-semi-condensed;
+$goa-typography-heading-xs: 700 1rem/1.5rem Acumin-pro-semi-condensed;
+$goa-typography-body-l: 400 1.5rem/2rem Acumin-pro-semi-condensed;
+$goa-typography-body-m: 400 1.125rem/1.75rem Acumin-pro-semi-condensed;
+$goa-typography-body-s: 400 1rem/1.5rem Acumin-pro-semi-condensed;
+$goa-typography-body-xs: 400 0.875rem/1.25rem Acumin-pro-semi-condensed;
+$goa-typography-button-default: 400 1.125rem/1.25rem Acumin-pro-semi-condensed;
+$goa-border-width-s: 1px;
+$goa-border-width-m: 2px;
+$goa-border-width-l: 3px;
+$goa-letter-spacing-1: 0.0125rem;
+$goa-icon-size-s: 1rem;
+$goa-icon-size-m: 1.25rem;
+$goa-icon-size-l: 1.5rem;
+$goa-drop-shadow-modal: 6px 6px 6px 0px rgba(0,0,0,0.16);

package/scss/tokens.scss

@@ -1,56 +1,40 @@
 
 // Do not edit directly
-// Generated on Tue, 08 Nov 2022 20:58:21 GMT
+// Generated on Thu, 05 Jan 2023 22:31:12 GMT
 
-$goa-information-background-color: #f1f1f1;
-$goa-information-text-color: #005daa;
-$goa-information-icon-color: #005daa;
-$goa-font-family: Acumin-pro-semi-condensed;
-$goa-font-size: 0.875rem;
-$goa-font-weight: 400;
-$goa-important-background-color: #feba35;
-$goa-important-text-color: #333333;
-$goa-important-icon-color: #333333;
-$goa-padding-left: 0.5rem;
-$goa-padding-right: 0.5rem;
-$goa-padding-top: 0.25rem;
-$goa-padding-bottom: 0.25rem;
-$goa-icon-size: 1rem;
-$goa-emergency-background-color: #ec040b;
-$goa-emergency-text-color: #ffffff;
-$goa-emergency-icon-color: #ffffff;
-$goa-success-background-colour: #00853f;
-$goa-success-text-color: #ffffff;
-$goa-success-icon-color: #ffffff;
-$goa-space-between: 0.25rem;
-$goa-border-radius: 0.25rem;
 $goa-color-brand-default: #0081a2;
 $goa-color-brand-dark: #005072;
 $goa-color-brand-light: #c8eefa;
 $goa-color-interactive-default: #0070c4;
+$goa-color-interactive-disabled: #80b7e1;
 $goa-color-interactive-hover: #004f84;
 $goa-color-interactive-error: #ec040b;
 $goa-color-interactive-focus: #feba35;
 $goa-color-text-default: #333333;
 $goa-color-text-secondary: #666666;
 $goa-color-text-light: #ffffff;
-$goa-color-status-info-default: #005daa;
-$goa-color-status-info-light: #b2d4ed;
-$goa-color-status-info-dark: #00347a;
-$goa-color-status-warning-default: #feba35;
-$goa-color-status-warning-light: #fcefd0;
-$goa-color-status-warning-dark: #c68a00;
-$goa-color-status-emergency-default: #ec040b;
-$goa-color-status-emergency-light: #ffcecf;
-$goa-color-status-emergency-dark: #b00000;
-$goa-color-status-success-default: #00853f;
-$goa-color-status-success-light: #c6e0d0;
-$goa-color-status-success-dark: #005715;
+$goa-color-info-default: #005daa;
+$goa-color-info-background: #eff8ff;
+$goa-color-info-light: #b2d4ed;
+$goa-color-info-dark: #00347a;
+$goa-color-caution-background: #fff6e5;
+$goa-color-caution-default: #feba35;
+$goa-color-caution-light: #fcefd0;
+$goa-color-caution-dark: #c68a00;
+$goa-color-emergency-background: #fff1f2;
+$goa-color-emergency-default: #ec040b;
+$goa-color-emergency-light: #ffcecf;
+$goa-color-emergency-dark: #b00000;
+$goa-color-success-background: #eef9f3;
+$goa-color-success-default: #00853f;
+$goa-color-success-light: #c6e0d0;
+$goa-color-success-dark: #005715;
 $goa-color-greyscale-100: #f1f1f1;
 $goa-color-greyscale-200: #dcdcdc;
 $goa-color-greyscale-400: #adadad;
 $goa-color-greyscale-500: #949494;
-$goa-color-greyscale-600: #666666;
+$goa-color-greyscale-600: #858585;
+$goa-color-greyscale-700: #666666;
 $goa-color-greyscale-black: #333333;
 $goa-color-greyscale-white: #ffffff;
 $goa-font-weight-regular: 400;
@@ -106,7 +90,8 @@ $goa-typography-button-default: 400 1.125rem/1.25rem Acumin-pro-semi-condensed;
 $goa-border-width-s: 1px;
 $goa-border-width-m: 2px;
 $goa-border-width-l: 3px;
-$goa-letter-spacing-1: 1%;
+$goa-letter-spacing-1: 0.0125rem;
 $goa-icon-size-s: 1rem;
 $goa-icon-size-m: 1.25rem;
-$goa-icon-size-l: 1.5rem;
+$goa-icon-size-l: 1.5rem;
+$goa-drop-shadow-modal: 6px 6px 6px 0px rgba(0,0,0,0.16);

package/data/badge.json

@@ -1,98 +0,0 @@
-{
-  "information": {
-    "background-color": {
-      "value": "{color.greyscale.100}",
-      "type": "color"
-    },
-    "text-color": {
-      "value": "{color.status.info.default}",
-      "type": "color"
-    },
-    "icon-color": {
-      "value": "{color.status.info.default}",
-      "type": "color"
-    }
-  },
-  "font-family": {
-    "value": "{fontFamilies.default}",
-    "type": "fontFamilies"
-  },
-  "font-size": {
-    "value": "{fontSize.2}",
-    "type": "fontSizes"
-  },
-  "font-weight": {
-    "value": "{fontWeight.regular}",
-    "type": "fontWeights"
-  },
-  "important": {
-    "background-color": {
-      "value": "{color.status.warning.default}",
-      "type": "color"
-    },
-    "text-color": {
-      "value": "{color.text.default}",
-      "type": "color"
-    },
-    "icon-color": {
-      "value": "{color.greyscale.black}",
-      "type": "color"
-    }
-  },
-  "padding-left": {
-    "value": "{spacing.xs}",
-    "type": "spacing"
-  },
-  "padding-right": {
-    "value": "{spacing.xs}",
-    "type": "spacing"
-  },
-  "padding-top": {
-    "value": "{spacing.2xs}",
-    "type": "spacing"
-  },
-  "padding-bottom": {
-    "value": "{spacing.2xs}",
-    "type": "spacing"
-  },
-  "icon-size": {
-    "value": "{iconSize.s}",
-    "type": "sizing"
-  },
-  "emergency": {
-    "background-color": {
-      "value": "{color.status.emergency.default}",
-      "type": "color"
-    },
-    "text-color": {
-      "value": "{color.text.light}",
-      "type": "color"
-    },
-    "icon-color": {
-      "value": "{color.greyscale.white}",
-      "type": "color"
-    }
-  },
-  "success": {
-    "background-colour": {
-      "value": "{color.status.success.default}",
-      "type": "color"
-    },
-    "text-color": {
-      "value": "{color.text.light}",
-      "type": "color"
-    },
-    "icon-color": {
-      "value": "{color.greyscale.white}",
-      "type": "color"
-    }
-  },
-  "space-between": {
-    "value": "{spacing.2xs}",
-    "type": "spacing"
-  },
-  "border-radius": {
-    "value": "{borderRadius.4}",
-    "type": "borderRadius"
-  }
-}

package/data/button.json

@@ -1 +0,0 @@
-{}