npm - @abgov/design-tokens - Versions diffs - 1.3.0 → 1.4.0-dev.1 - Mend

@abgov/design-tokens 1.3.0 → 1.4.0-dev.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/data/component-design-tokens/accordion-design-tokens.json +54 -0
package/data/component-design-tokens/button-design-tokens.json +26 -0
package/data/component-design-tokens/callout-design-tokens.json +122 -0
package/data/component-design-tokens/container-design-tokens.json +18 -0
package/data/component-design-tokens/side-menu-design-tokens.json +46 -0
package/data/component-design-tokens/table-design-tokens.json +10 -0
package/data/goa-global-design-tokens.json +756 -0
package/dist/tokens.css +116 -67
package/dist/tokens.scss +117 -68
package/lib/design-tokens.js +16 -0
package/package.json +1 -1
package/data/global-ddi.json +0 -851

package/data/global-ddi.json DELETED Viewed

@@ -1,851 +0,0 @@
-{
-  "color": {
-    "brand": {
-      "default": {
-        "value": "#0081A2",
-        "type": "color",
-        "description": "Teal GOA color"
-      },
-      "dark": {
-        "value": "#005072",
-        "type": "color",
-        "description": "Dark GOA brand color"
-      },
-      "light": {
-        "value": "#C8EEFA",
-        "type": "color",
-        "description": "Light GOA brand color"
-      }
-    },
-    "interactive": {
-      "default": {
-        "value": "#0070C4",
-        "type": "color",
-        "description": "Default color for interactive elements."
-      },
-      "hover": {
-        "value": "#004F84",
-        "type": "color",
-        "description": "Hover state color for interactive elements."
-      },
-      "error": {
-        "value": "#EC040B",
-        "type": "color",
-        "description": "Error state color for interactive elements."
-      },
-      "focus": {
-        "value": "#FEBA35",
-        "type": "color",
-        "description": "Focus state color for interactive elements."
-      },
-      "disabled": {
-        "value": "#80B7E1",
-        "type": "color",
-        "description": "Color for disabled interactive elements."
-      }
-    },
-    "text": {
-      "default": {
-        "value": "{color.greyscale.black}",
-        "type": "color",
-        "description": "Default color for most text (such as body, headings, subheadings)."
-      },
-      "secondary": {
-        "value": "{color.greyscale.700}",
-        "type": "color",
-        "description": "Default colour for secondary text labels such as “optional” or “required”."
-      },
-      "light": {
-        "value": "{color.greyscale.white}",
-        "type": "color",
-        "description": "Use as the text color on dark backgrounds."
-      },
-      "disabled": {
-        "value": "{color.greyscale.700}",
-        "type": "color",
-        "description": "Default color for text on a grey background within the disabled text input, text area, combobox, and dropdown."
-      }
-    },
-    "info": {
-      "default": {
-        "value": "#004A8F",
-        "type": "color",
-        "description": "Use this color to indicate information to the user."
-      },
-      "light": {
-        "value": "#AAC9E7",
-        "type": "color"
-      },
-      "dark": {
-        "value": "#003B70",
-        "type": "color"
-      },
-      "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."
-      }
-    },
-    "warning": {
-      "default": {
-        "value": "#F9CE2D",
-        "type": "color",
-        "description": "Use this color to indicate a warning to the user."
-      },
-      "light": {
-        "value": "#FFEAB6",
-        "type": "color"
-      },
-      "dark": {
-        "value": "#BF8D23",
-        "type": "color"
-      },
-      "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."
-      }
-    },
-    "emergency": {
-      "default": {
-        "value": "#DA291C",
-        "type": "color",
-        "description": "Use this color to indicate an emergency to the user."
-      },
-      "light": {
-        "value": "#FBD1CE",
-        "type": "color"
-      },
-      "dark": {
-        "value": "#A91A10",
-        "type": "color"
-      },
-      "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."
-      }
-    },
-    "success": {
-      "default": {
-        "value": "#006F4C",
-        "type": "color",
-        "description": "Use this color to indicate success to the user."
-      },
-      "light": {
-        "value": "#CCE4DC",
-        "type": "color"
-      },
-      "dark": {
-        "value": "#00563A",
-        "type": "color"
-      },
-      "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."
-      }
-    },
-    "greyscale": {
-      "50": {
-        "value": "#F8F8F8",
-        "type": "color"
-      },
-      "100": {
-        "value": "#F1F1F1",
-        "type": "color"
-      },
-      "200": {
-        "value": "#DCDCDC",
-        "type": "color"
-      },
-      "400": {
-        "value": "#ADADAD",
-        "type": "color"
-      },
-      "500": {
-        "value": "#949494",
-        "type": "color"
-      },
-      "600": {
-        "value": "#858585",
-        "type": "color"
-      },
-      "700": {
-        "value": "#666666",
-        "type": "color"
-      },
-      "black": {
-        "value": "#333333",
-        "type": "color"
-      },
-      "white": {
-        "value": "#FFFFFF",
-        "type": "color"
-      }
-    }
-  },
-  "fontWeight": {
-    "regular": {
-      "value": "400",
-      "type": "fontWeights"
-    },
-    "medium": {
-      "value": "500",
-      "type": "fontWeights"
-    },
-    "bold": {
-      "value": "700",
-      "type": "fontWeights"
-    }
-  },
-  "fontSize": {
-    "1": {
-      "value": "0.75rem",
-      "type": "fontSizes",
-      "description": "12px"
-    },
-    "2": {
-      "value": "0.875rem",
-      "type": "fontSizes",
-      "description": "14px"
-    },
-    "3": {
-      "value": "1rem",
-      "type": "fontSizes",
-      "description": "16px"
-    },
-    "4": {
-      "value": "1.125rem",
-      "type": "fontSizes",
-      "description": "18px"
-    },
-    "5": {
-      "value": "1.25rem",
-      "type": "fontSizes",
-      "description": "20px"
-    },
-    "6": {
-      "value": "1.375rem",
-      "type": "fontSizes",
-      "description": "22px"
-    },
-    "7": {
-      "value": "1.5rem",
-      "type": "fontSizes",
-      "description": "24px"
-    },
-    "8": {
-      "value": "2rem",
-      "type": "fontSizes",
-      "description": "32px"
-    },
-    "9": {
-      "value": "2.25rem",
-      "type": "fontSizes",
-      "description": "2.25rem"
-    },
-    "10": {
-      "value": "3rem",
-      "type": "fontSizes",
-      "description": "48px"
-    }
-  },
-  "space": {
-    "none": {
-      "value": "0rem",
-      "type": "spacing",
-      "description": "0px | 0rem"
-    },
-    "3xs": {
-      "value": "0.125rem",
-      "type": "spacing",
-      "description": "2px"
-    },
-    "2xs": {
-      "value": "0.25rem",
-      "type": "spacing",
-      "description": "4px"
-    },
-    "xs": {
-      "value": "0.5rem",
-      "type": "spacing",
-      "description": "8px"
-    },
-    "s": {
-      "value": "0.75rem",
-      "type": "spacing",
-      "description": "12px"
-    },
-    "m": {
-      "value": "1rem",
-      "type": "spacing",
-      "description": "16px"
-    },
-    "l": {
-      "value": "1.5rem",
-      "type": "spacing",
-      "description": "24px"
-    },
-    "xl": {
-      "value": "2rem",
-      "type": "spacing",
-      "description": "32px"
-    },
-    "2xl": {
-      "value": "3rem",
-      "type": "spacing",
-      "description": "48px"
-    },
-    "3xl": {
-      "value": "4rem",
-      "type": "spacing",
-      "description": "64px"
-    },
-    "4xl": {
-      "value": "8rem",
-      "type": "spacing",
-      "description": "128px"
-    }
-  },
-  "borderRadius": {
-    "none": {
-      "value": "0rem",
-      "type": "borderRadius",
-      "description": "0px, square corner"
-    },
-    "m": {
-      "value": "0.25rem",
-      "type": "borderRadius",
-      "description": "4px"
-    }
-  },
-  "opacity": {
-    "background": {
-      "modal": {
-        "value": "50%",
-        "type": "opacity",
-        "description": "50% opacity for black scrim behind modal to disable the rest of the screen."
-      },
-      "loading": {
-        "value": "90%",
-        "type": "opacity",
-        "description": "90% opacity for white scrum behind loading indicator."
-      }
-    }
-  },
-  "lineHeight": {
-    "1": {
-      "value": "1.25rem",
-      "type": "lineHeights",
-      "description": "20px"
-    },
-    "2": {
-      "value": "1.5rem",
-      "type": "lineHeights",
-      "description": "24px"
-    },
-    "3": {
-      "value": "1.75rem",
-      "type": "lineHeights",
-      "description": "28px"
-    },
-    "4": {
-      "value": "2rem",
-      "type": "lineHeights",
-      "description": "32px"
-    },
-    "5": {
-      "value": "2.5rem",
-      "type": "lineHeights",
-      "description": "40px"
-    },
-    "6": {
-      "value": "2.75rem",
-      "type": "lineHeights",
-      "description": "44px"
-    },
-    "7": {
-      "value": "3.5rem",
-      "type": "lineHeights",
-      "description": "56px"
-    },
-    "05": {
-      "value": "1.125rem",
-      "type": "lineHeights",
-      "description": "18px"
-    }
-  },
-  "fontFamily": {
-    "sans": {
-      "value": "acumin-pro-semi-condensed, helvetica-neue, arial, sans-serif",
-      "type": "fontFamilies",
-      "description": "Deafult font family and fallback fonts when unavailable"
-    },
-    "number": {
-      "value": "roboto-mono, monospace",
-      "type": "fontFamilies",
-      "description": "monospace typeface for numbers and fallback fonts when unavailable"
-    }
-  },
-  "typography": {
-    "heading": {
-      "xs": {
-        "value": {
-          "fontFamily": "{fontFamily.sans}",
-          "fontWeight": "{fontWeight.bold}",
-          "lineHeight": "{lineHeight.2}",
-          "fontSize": "{fontSize.3}"
-        },
-        "type": "typography",
-        "description": "Heading XS"
-      },
-      "s": {
-        "value": {
-          "fontFamily": "{fontFamily.sans}",
-          "fontWeight": "{fontWeight.bold}",
-          "lineHeight": "{lineHeight.3}",
-          "fontSize": "{fontSize.4}"
-        },
-        "type": "typography",
-        "description": "Heading S"
-      },
-      "m": {
-        "value": {
-          "fontFamily": "{fontFamily.sans}",
-          "fontWeight": "{fontWeight.regular}",
-          "lineHeight": "{lineHeight.4}",
-          "fontSize": "{fontSize.7}"
-        },
-        "type": "typography",
-        "description": "Heading M"
-      },
-      "l": {
-        "value": {
-          "fontFamily": "{fontFamily.sans}",
-          "fontWeight": "{fontWeight.regular}",
-          "lineHeight": "{lineHeight.6}",
-          "fontSize": "{fontSize.9}"
-        },
-        "type": "typography",
-        "description": "Heading L"
-      },
-      "xl": {
-        "value": {
-          "fontFamily": "{fontFamily.sans}",
-          "fontWeight": "{fontWeight.bold}",
-          "lineHeight": "{lineHeight.7}",
-          "fontSize": "{fontSize.10}"
-        },
-        "type": "typography",
-        "description": "Heading XL"
-      }
-    },
-    "body": {
-      "xs": {
-        "value": {
-          "fontFamily": "{fontFamily.sans}",
-          "fontWeight": "{fontWeight.regular}",
-          "lineHeight": "{lineHeight.1}",
-          "fontSize": "{fontSize.2}"
-        },
-        "type": "typography",
-        "description": "Micro text"
-      },
-      "s": {
-        "value": {
-          "fontFamily": "{fontFamily.sans}",
-          "fontWeight": "{fontWeight.regular}",
-          "lineHeight": "{lineHeight.2}",
-          "fontSize": "{fontSize.3}"
-        },
-        "type": "typography",
-        "description": "Small text"
-      },
-      "m": {
-        "value": {
-          "fontFamily": "{fontFamily.sans}",
-          "fontWeight": "{fontWeight.regular}",
-          "lineHeight": "{lineHeight.3}",
-          "fontSize": "{fontSize.4}"
-        },
-        "type": "typography",
-        "description": "Body text"
-      },
-      "l": {
-        "value": {
-          "fontFamily": "{fontFamily.sans}",
-          "fontWeight": "{fontWeight.regular}",
-          "lineHeight": "{lineHeight.4}",
-          "fontSize": "{fontSize.7}"
-        },
-        "type": "typography",
-        "description": "Large text"
-      }
-    },
-    "button": {
-      "default": {
-        "value": {
-          "fontFamily": "{fontFamily.sans}",
-          "fontWeight": "{fontWeight.regular}",
-          "lineHeight": "{lineHeight.1}",
-          "fontSize": "{fontSize.4}",
-          "letterSpacing": "{letterSpacing.button}"
-        },
-        "type": "typography"
-      }
-    },
-    "number": {
-      "m": {
-        "value": {
-          "fontFamily": "{fontFamily.number}",
-          "fontWeight": "{fontWeight.medium}",
-          "lineHeight": "{lineHeight.3}",
-          "fontSize": "{fontSize.4}",
-          "letterSpacing": ""
-        },
-        "type": "typography"
-      }
-    }
-  },
-  "borderWidth": {
-    "none": {
-      "value": "0px",
-      "type": "borderWidth",
-      "description": "No border"
-    },
-    "s": {
-      "value": "1px",
-      "type": "borderWidth",
-      "description": "Small border width"
-    },
-    "m": {
-      "value": "2px",
-      "type": "borderWidth",
-      "description": "Medium border width"
-    },
-    "l": {
-      "value": "3px",
-      "type": "borderWidth",
-      "description": "Large border width"
-    }
-  },
-  "letterSpacing": {
-    "button": {
-      "value": "0.0125rem",
-      "type": "letterSpacing",
-      "description": "small letter spacing adjustment to slightly kern letters out for readability on buttons."
-    }
-  },
-  "iconSize": {
-    "s": {
-      "value": "1rem",
-      "type": "sizing",
-      "description": "16px"
-    },
-    "m": {
-      "value": "1.25rem",
-      "type": "sizing",
-      "description": "20px"
-    },
-    "l": {
-      "value": "1.5rem",
-      "type": "sizing",
-      "description": "24px"
-    }
-  },
-  "Shadow": {
-    "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."
-    }
-  },
-  "button": {
-    "border-radius": {
-      "value": "{borderRadius.m.value}",
-      "type": "borderRadius",
-      "description": "Button border radius"
-    },
-    "text": {
-      "value": "{typography.button.default.value}",
-      "type": "fontFamily",
-      "description": "Button text style"
-    },
-    "padding-lr": {
-      "value": "{space.s.value}",
-      "type": "spacing",
-      "description": "Padding for the left and right sides of a regular button"
-    },
-    "padding-lr-compact": {
-      "value": "{space.xs.value}",
-      "type": "spacing",
-      "description": "Padding for the left and right sides of a compact button"
-    },
-    "height": {
-      "value": "2.625rem",
-      "type": "spacing",
-      "description": "Button regular height (42px)"
-    },
-    "height-compact": {
-      "value": "2rem",
-      "type": "spacing",
-      "description": "Button compact height (36px)"
-    },
-    "height-start": {
-      "value": "3.25rem",
-      "type": "spacing",
-      "description": "Height for the start button type (52px)"
-    }
-  },
-  "accordion": {
-    "color-bg-heading": {
-      "value": "{color.greyscale.100.value}",
-      "type": "color",
-      "description": "Background color of accordion heading"
-    },
-    "color-bg-content": {
-      "value": "{color.greyscale.white.value}",
-      "type": "color",
-      "description": "Background color of accordion content"
-    },
-    "color-heading": {
-      "value": "{color.text.default.value}",
-      "type": "color",
-      "description": "Color of accordion heading text"
-    },
-    "border": {
-      "value": "{borderWidth.s.value} solid {color.greyscale.200.value}",
-      "type": "border",
-      "description": "Border of accordion"
-    },
-    "border-radius": {
-      "value": "{borderRadius.m.value}",
-      "type": "borderRadius",
-      "description": "Border radius of accordion"
-    },
-    "padding-heading": {
-      "value": "{space.s.value} {space.m.value} {space.s.value} 0",
-      "type": "spacing",
-      "description": "Padding of accordion heading"
-    },
-    "heading-s": {
-      "value": "{typography.heading.s.value}",
-      "type": "fontFamily",
-      "description": "Typography of accordion heading"
-    },
-    "heading-m": {
-      "value": "{typography.heading.m.value}",
-      "type": "fontFamily",
-      "description": "Typography of accordion heading"
-    },
-    "padding-content-wide": {
-      "value": "{space.l.value} {space.l.value} {space.xl.value} 56px",
-      "type": "spacing",
-      "description": "Padding of accordion content"
-    },
-    "padding-content-narrow": {
-      "value": "{space.l.value}",
-      "type": "spacing",
-      "description": "Padding of accordion content"
-    },
-    "color-bg-heading-hover": {
-      "value": "{color.greyscale.200.value}",
-      "type": "color",
-      "description": "Background color of accordion heading on hover"
-    },
-    "color-heading-hover": {
-      "value": "{color.text.default.value}",
-      "type": "color",
-      "description": "Color of accordion heading text on hover"
-    }
-  },
-  "callout": {
-    "border-radius": {
-      "value": "{borderRadius.none.value}",
-      "type": "borderRadius",
-      "description": "Border radius of callout"
-    },
-    "l-border-width": {
-      "value": "{borderWidth.none.value}",
-      "type": "borderWidth",
-      "description": "Border width of callout"
-    },
-    "l-heading-size": {
-      "value": "{typography.heading.m.value}",
-      "type": "fontSizes",
-      "description": "Large heading size"
-    },
-    "l-text-size": {
-      "value": "{typography.body.m.value}",
-      "type": "fontSizes",
-      "description": "Large text size"
-    },
-    "l-content-padding": {
-      "value": "{space.l.value}",
-      "type": "spacing",
-      "description": "Large content padding"
-    },
-    "l-content-gap": {
-      "value": "{space.m.value}",
-      "type": "spacing",
-      "description": "Large content gap"
-    },
-    "l-statusbar-padding": {
-      "value": "{space.l.value} {space.s.value}",
-      "type": "spacing",
-      "description": "Large status bar padding"
-    },
-    "m-border-width": {
-      "value": "{borderWidth.none.value}",
-      "type": "borderWidth",
-      "description": "Border width of callout"
-    },
-    "m-heading-size": {
-      "value": "{typography.heading.xs.value}",
-      "type": "fontSizes",
-      "description": "Medium heading size"
-    },
-    "m-text-size": {
-      "value": "{typography.body.s.value}",
-      "type": "fontSizes",
-      "description": "Medium text size"
-    },
-    "m-content-padding": {
-      "value": "{space.s.value}",
-      "type": "spacing",
-      "description": "Medium content padding"
-    },
-    "m-content-gap": {
-      "value": "{space.2xs.value}",
-      "type": "spacing",
-      "description": "Medium content gap"
-    },
-    "m-statusbar-padding": {
-      "value": "{space.s.value} {space.2xs.value}",
-      "type": "spacing",
-      "description": "Medium status bar padding"
-    },
-    "info-color-bg-content": {
-      "value": "{color.greyscale.100.value}",
-      "type": "color",
-      "description": "Background color of info callout content"
-    },
-    "info-icon-color": {
-      "value": "{color.greyscale.white.value}",
-      "type": "color",
-      "description": "Icon color of info callout"
-    },
-    "info-color-bg-statusbar": {
-      "value": "{color.info.default.value}",
-      "type": "color",
-      "description": "Background color of info callout status bar"
-    },
-    "info-border-color": {
-      "value": "none",
-      "type": "color",
-      "description": "Border color of info callout"
-    },
-    "warning-color-bg-content": {
-      "value": "{color.greyscale.100.value}",
-      "type": "color",
-      "description": "Background color of warning callout content"
-    },
-    "warning-color-bg-statusbar": {
-      "value": "{color.warning.default.value}",
-      "type": "color",
-      "description": "Background color of warning callout status bar"
-    },
-    "warning-icon-color": {
-      "value": "{color.greyscale.black.value}",
-      "type": "color",
-      "description": "Icon color of warning callout"
-    },
-    "warning-border-color": {
-      "value": "none",
-      "type": "color",
-      "description": "Border color of warning callout"
-    },
-    "success-color-bg-content": {
-      "value": "{color.greyscale.100.value}",
-      "type": "color",
-      "description": "Background color of success callout content"
-    },
-    "success-color-bg-statusbar": {
-      "value": "{color.success.default.value}",
-      "type": "color",
-      "description": "Background color of success callout status bar"
-    },
-    "success-icon-color": {
-      "value": "{color.greyscale.white.value}",
-      "type": "color",
-      "description": "Icon color of success callout"
-    },
-    "success-border-color": {
-      "value": "none",
-      "type": "color",
-      "description": "Border color of success callout"
-    },
-    "emergency-color-bg-content": {
-      "value": "{color.greyscale.100.value}",
-      "type": "color",
-      "description": "Background color of emergency callout content"
-    },
-    "emergency-color-bg-statusbar": {
-      "value": "{color.emergency.default.value}",
-      "type": "color",
-      "description": "Background color of emergency callout status bar"
-    },
-    "emergency-icon-color": {
-      "value": "{color.greyscale.white.value}",
-      "type": "color",
-      "description": "Icon color of emergency callout"
-    },
-    "emergency-border-color": {
-      "value": "none",
-      "type": "color",
-      "description": "Border color of emergency callout"
-    },
-    "event-icon-color": {
-      "value": "{color.greyscale.white.value}",
-      "type": "color",
-      "description": "Icon color of event callout"
-    }
-  },
-  "container": {
-    "border-radius": {
-      "value": "{borderRadius.m.value}",
-      "type": "borderRadius",
-      "description": "Border radius of container"
-    },
-    "border": {
-      "value": "{borderWidth.s.value} solid {color.greyscale.200.value}",
-      "type": "border",
-      "description": "Border of container"
-    },
-    "padding": {
-      "value": "{space.l.value}",
-      "type": "spacing",
-      "description": "Padding of container"
-    }
-  },
-  "table": {
-    "color-heading": {
-      "value": "{color.text.secondary.value}",
-      "type": "color",
-      "description": "Color of table heading text"
-    },
-    "color-border-heading": {
-      "value": "{color.greyscale.600.value}",
-      "type": "color",
-      "description": "Color of table heading border"
-    }
-  }
-}