npm - @abgov/design-tokens - Versions diffs - 1.4.3 → 1.5.0 - Mend

@abgov/design-tokens 1.4.3 → 1.5.0

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 (35) hide show

package/data/component-design-tokens/radio-design-tokens.json ADDED Viewed

@@ -0,0 +1,138 @@
+{
+  "radio-border": {
+    "value": {
+      "width": "{borderWidth.s}",
+      "style": "solid",
+      "color": "{color.greyscale.700}"
+    },
+    "type": "border"
+  },
+  "radio-border-checked": {
+    "value": {
+      "width": "7px",
+      "style": "solid",
+      "color": "{color.interactive.default}"
+    },
+    "type": "border"
+  },
+  "radio-border-checked-disabled": {
+    "value": {
+      "width": "7px",
+      "style": "solid",
+      "color": "{color.interactive.disabled}"
+    },
+    "type": "border"
+  },
+  "radio-border-checked-error": {
+    "value": {
+      "width": "7px",
+      "style": "solid",
+      "color": "{color.interactive.error}"
+    },
+    "type": "border"
+  },
+  "radio-border-checked-error-disabled": {
+    "value": {
+      "width": "7px",
+      "style": "solid",
+      "color": "#f58185"
+    },
+    "type": "border"
+  },
+  "radio-border-checked-error-hover": {
+    "value": {
+      "width": "7px",
+      "style": "solid",
+      "color": "#ba0000"
+    },
+    "type": "border"
+  },
+  "radio-border-checked-hover": {
+    "value": {
+      "width": "7px",
+      "style": "solid",
+      "color": "{color.interactive.hover}"
+    },
+    "type": "border"
+  },
+  "radio-border-disabled": {
+    "value": {
+      "width": "{borderWidth.s}",
+      "style": "solid",
+      "color": "{color.greyscale.400}"
+    },
+    "type": "border"
+  },
+  "radio-border-error": {
+    "value": {
+      "width": "{borderWidth.m}",
+      "style": "solid",
+      "color": "{color.interactive.error}"
+    },
+    "type": "border"
+  },
+  "radio-border-error-disabled": {
+    "value": {
+      "width": "{borderWidth.m}",
+      "style": "solid",
+      "color": "#f58185"
+    },
+    "type": "border"
+  },
+  "radio-border-error-hover": {
+    "value": {
+      "width": "{borderWidth.m}",
+      "style": "solid",
+      "color": "#ba0000"
+    },
+    "type": "border"
+  },
+  "radio-border-focus": {
+    "value": {
+      "width": "{borderWidth.l}",
+      "style": "solid",
+      "color": "{color.interactive.focus}"
+    },
+    "type": "border"
+  },
+  "radio-border-hover": {
+    "value": {
+      "width": "{borderWidth.m}",
+      "style": "solid",
+      "color": "{color.interactive.hover}"
+    },
+    "type": "border"
+  },
+  "radio-color-bg": {
+    "value": "{color.greyscale.white}",
+    "type": "color"
+  },
+  "radio-description": {
+    "value": "{typography.body.xs}",
+    "type": "other"
+  },
+  "radio-group-gap-horizontal": {
+    "value": "{space.l}",
+    "type": "spacing"
+  },
+  "radio-group-gap-vertical": {
+    "value": "{space.m}",
+    "type": "spacing"
+  },
+  "radio-label": {
+    "value": "{typography.body.m}",
+    "type": "other"
+  },
+  "radio-label-color-disabled": {
+    "value": "{color.greyscale.500}",
+    "type": "color"
+  },
+  "radio-size": {
+    "value": "{space.l}",
+    "type": "sizing"
+  },
+  "radio-border-radius": {
+    "value": "50%",
+    "type": "borderRadius"
+  }
+}

package/data/component-design-tokens/scrollable-design-tokens.json ADDED Viewed

@@ -0,0 +1,12 @@
+{
+  "scrollable-padding-desktop": {
+    "value": "2rem",
+    "type": "spacing",
+    "description": "32px"
+  },
+  "scrollable-padding-mobile": {
+    "value": "1.5rem",
+    "type": "spacing",
+    "description": "24px"
+  }
+}

package/data/component-design-tokens/side-menu-design-tokens.json CHANGED Viewed

@@ -1,34 +1,186 @@
 {
-  "side-menu-group-color-bg": {
+  "side-menu-border-right": {
+    "value": {
+      "width": "{borderWidth.s}",
+      "style": "solid",
+      "color": "{color.greyscale.200}"
+    },
+    "type": "border"
+  },
+  "side-menu-color-bg": {
     "value": "{color.greyscale.white}",
     "type": "color"
   },
-  "side-menu-group-padding": {
+  "side-menu-color-bg-menu-item-current": {
+    "value": "#cedfee",
+    "type": "color"
+  },
+  "side-menu-color-bg-menu-item-hover": {
+    "value": "#cedfee",
+    "type": "color"
+  },
+  "side-menu-color-menu-item": {
+    "value": "{color.text.default}",
+    "type": "color"
+  },
+  "side-menu-heading-border": {
+    "value": {
+      "width": "{borderWidth.m}",
+      "style": "solid",
+      "color": "{color.greyscale.200}"
+    },
+    "type": "border"
+  },
+  "side-menu-heading-color": {
+    "value": "{color.text.secondary}",
+    "type": "color"
+  },
+  "side-menu-heading-color-bg": {
+    "value": "{color.greyscale.100}",
+    "type": "color"
+  },
+  "side-menu-heading-icon-gap": {
+    "value": "{space.xs}",
+    "type": "spacing"
+  },
+  "side-menu-heading-margin": {
+    "value": "{space.none} 0 0 0",
+    "type": "spacing"
+  },
+  "side-menu-heading-padding": {
+    "value": "{space.s} {space.s} {space.xs} {space.l}",
+    "type": "spacing"
+  },
+  "side-menu-heading-typography": {
+    "value": "{typography.heading.s}",
+    "type": "other"
+  },
+  "side-menu-icon-color": {
+    "value": "{color.text.secondary}",
+    "type": "color"
+  },
+  "side-menu-icon-size": {
+    "value": "{iconSize.l}",
+    "type": "sizing"
+  },
+  "side-menu-items-gap": {
     "value": "{space.none}",
     "type": "spacing"
   },
-  "side-menu-sub-group-padding": {
-    "value": "{space.none} {space.none} {space.none} {space.none}",
+  "side-menu-item-focus-border": {
+    "value": {
+      "width": "{borderWidth.l}",
+      "style": "solid",
+      "color": "{color.interactive.focus}"
+    },
+    "type": "border"
+  },
+  "side-menu-padding": {
+    "value": "{space.m} {space.none} {space.l} {space.none}",
     "type": "spacing"
   },
+  "side-menu-padding-item": {
+    "value": "{space.xs} {space.s} 10px {space.xl}",
+    "type": "spacing"
+  },
+  "side-menu-padding-child": {
+    "value": "{space.xs} {space.s} 10px {space.m}",
+    "type": "spacing"
+  },
+  "side-menu-parent-color-bg-hover": {
+    "value": "#cedfee",
+    "type": "color"
+  },
+  "side-menu-parent-color-bg-selected": {
+    "value": "#cedfee",
+    "type": "color"
+  },
   "side-menu-parent-padding": {
-    "value": "{space.xs} {space.m} {space.xs} {space.xl}",
+    "value": "{space.xs} {space.s} 10px {space.xl}",
     "type": "spacing"
   },
+  "side-menu-sub-group-padding": {
+    "value": "{space.none} {space.none} {space.none} {space.none}",
+    "type": "spacing"
+  },
+  "side-menu-sub-item-border-left": {
+    "value": {
+      "width": "{borderWidth.xl}",
+      "style": "solid",
+      "color": "{color.greyscale.100}"
+    },
+    "type": "border"
+  },
+  "side-menu-sub-item-border-left-hover": {
+    "value": {
+      "width": "{borderWidth.xl}",
+      "style": "solid",
+      "color": "{color.greyscale.200}"
+    },
+    "type": "border"
+  },
+  "side-menu-sub-item-border-left-current": {
+    "value": {
+      "width": "{borderWidth.xl}",
+      "style": "solid",
+      "color": "{color.interactive.disabled}"
+    },
+    "type": "border"
+  },
+  "side-menu-sub-item-color-bg": {
+    "value": "none",
+    "type": "color"
+  },
+  "side-menu-sub-item-color-bg-current": {
+    "value": "{color.info.background}",
+    "type": "color"
+  },
+  "side-menu-sub-item-color-bg-hover": {
+    "value": "{color.info.background}",
+    "type": "color"
+  },
+  "side-menu-width": {
+    "value": "256px",
+    "type": "sizing"
+  },
   "side-menu-group-border-radius": {
     "value": "{borderRadius.none}",
     "type": "borderRadius"
   },
-  "side-menu-child-border-width": {
-    "value": "4px",
-    "type": "borderWidth"
-  },
-  "side-menu-parent-color-bg-hover": {
-    "value": "#CEDFEE",
+  "side-menu-group-color-bg": {
+    "value": "{color.greyscale.white}",
     "type": "color"
   },
-  "side-menu-parent-color-bg-selected": {
-    "value": "#CEDFEE",
+  "side-menu-group-padding": {
+    "value": "{space.none}",
+    "type": "spacing"
+  },
+  "side-menu-child-border-left": {
+    "value": {
+      "width": "{borderWidth.xl}",
+      "style": "solid",
+      "color": "{color.greyscale.100}"
+    },
+    "type": "border"
+  },
+  "side-menu-child-border-left-hover": {
+    "value": {
+      "width": "{borderWidth.xl}",
+      "style": "solid",
+      "color": "{color.greyscale.200}"
+    },
+    "type": "border"
+  },
+  "side-menu-child-border-left-selected": {
+    "value": {
+      "width": "{borderWidth.xl}",
+      "style": "solid",
+      "color": "{color.interactive.disabled}"
+    },
+    "type": "border"
+  },
+  "side-menu-child-color-bg": {
+    "value": "none",
     "type": "color"
   },
   "side-menu-child-color-bg-hover": {
@@ -43,12 +195,17 @@
     "value": "{color.text.default}",
     "type": "color"
   },
-  "side-menu-parent-text": {
+  "side-menu-typography-item": {
     "value": "{typography.body.m}",
     "type": "other"
   },
-  "side-menu-parent-text-active": {
-    "value": "{typography.body.m}",
+  "side-menu-typography-item-current": {
+    "value": "{typography.heading.s}",
     "type": "other"
+  },
+  "side-menu-child-border-width": {
+    "value": "{borderWidth.xl}",
+    "type": "borderWidth",
+    "description": "4px"
   }
-}
+}

package/data/component-design-tokens/skeleton-loading-design-tokens.json ADDED Viewed

@@ -0,0 +1,6 @@
+{
+  "skeleton-loading-color-bg": {
+    "value": "{color.greyscale.100}",
+    "type": "color"
+  }
+}

package/data/component-design-tokens/table-design-tokens.json CHANGED Viewed

@@ -6,5 +6,9 @@
   "table-color-border-heading": {
     "value": "{color.greyscale.600}",
     "type": "color"
+  },
+  "goa-table-header-padding": {
+    "value": "{space.m}",
+    "type": "sizing"
   }
 }

package/data/component-design-tokens/tabs-design-tokens.json ADDED Viewed

@@ -0,0 +1,78 @@
+{
+  "tab-border-focus": {
+    "value": {
+      "width": "{borderWidth.l}",
+      "style": "solid",
+      "color": "{color.interactive.focus}"
+    },
+    "type": "border"
+  },
+  "tab-border-hover": {
+    "value": {
+      "width": "{borderWidth.xl}",
+      "style": "solid",
+      "color": "{color.greyscale.200}"
+    },
+    "type": "border"
+  },
+  "tab-border-not-selected": {
+    "value": {
+      "width": "{borderWidth.xl}",
+      "style": "solid",
+      "color": "transparent"
+    },
+    "type": "border"
+  },
+  "tab-border-selected": {
+    "value": {
+      "width": "{borderWidth.xl}",
+      "style": "solid",
+      "color": "{color.interactive.default}"
+    },
+    "type": "border"
+  },
+  "tab-color-bg-selected": {
+    "value": "transparent",
+    "type": "color"
+  },
+  "tab-color-bg-selected-small-screen": {
+    "value": "{color.info.background}",
+    "type": "color"
+  },
+  "tab-padding": {
+    "value": "{space.xs} {space.m}",
+    "type": "spacing"
+  },
+  "tab-padding-mobile": {
+    "value": "6px {space.m}",
+    "type": "spacing"
+  },
+  "tab-text-color": {
+    "value": "{color.text.default}",
+    "type": "color"
+  },
+  "tab-typography": {
+    "value": "{typography.body.m}",
+    "type": "other"
+  },
+  "tab-typography-selected": {
+    "value": "{typography.heading.s}",
+    "type": "other"
+  },
+  "tabs-bottom-border": {
+    "value": {
+      "width": "{borderWidth.s}",
+      "style": "solid",
+      "color": "{color.greyscale.200}"
+    },
+    "type": "border"
+  },
+  "tabs-gap": {
+    "value": "{space.xl}",
+    "type": "spacing"
+  },
+  "tabs-gap-small-screen": {
+    "value": "{space.2xs}",
+    "type": "spacing"
+  }
+}

package/data/component-design-tokens/text-area-design-tokens.json ADDED Viewed

@@ -0,0 +1,67 @@
+{
+  "text-area-border": {
+    "value": "inset 0 0 0 {borderWidth.s} {color.greyscale.700}",
+    "type": "other"
+  },
+  "text-area-border-disabled": {
+    "value": "inset 0 0 0 {borderWidth.s} {color.greyscale.200}",
+    "type": "other"
+  },
+  "text-area-border-error": {
+    "value": "inset 0 0 0 {borderWidth.m} {color.interactive.error}",
+    "type": "other"
+  },
+  "text-area-border-focus": {
+    "value": "0 0 0 {borderWidth.l} {color.interactive.focus}",
+    "type": "other"
+  },
+  "text-area-border-hover": {
+    "value": "inset 0 0 0 {borderWidth.m} {color.interactive.hover}",
+    "type": "other"
+  },
+  "text-area-border-radius": {
+    "value": "{borderRadius.m}",
+    "type": "borderRadius"
+  },
+  "text-area-color-bg": {
+    "value": "{color.greyscale.white}",
+    "type": "color"
+  },
+  "text-area-color-bg-disabled": {
+    "value": "{color.greyscale.100}",
+    "type": "color"
+  },
+  "text-area-color-text": {
+    "value": "{color.text.default}",
+    "type": "color"
+  },
+  "text-area-color-text-counter": {
+    "value": "{color.text.default}",
+    "type": "color"
+  },
+  "text-area-color-text-counter-error": {
+    "value": "{color.interactive.error}",
+    "type": "color"
+  },
+  "text-area-color-text-disabled": {
+    "value": "{color.text.disabled}",
+    "type": "color"
+  },
+  "text-area-color-text-placeholder": {
+    "value": "{color.text.secondary}",
+    "type": "color"
+  },
+  "text-area-padding": {
+    "value": "0.625rem {space.s}",
+    "type": "spacing",
+    "description": "10px {space.s}"
+  },
+  "text-area-typography": {
+    "value": "{typography.body.m}",
+    "type": "other"
+  },
+  "text-area-typography-counter": {
+    "value": "{typography.body.xs}",
+    "type": "other"
+  }
+}

package/data/component-design-tokens/tooltip-design-tokens.json ADDED Viewed

@@ -0,0 +1,38 @@
+{
+  "tooltip-border-focus": {
+    "value": {
+      "width": "{borderWidth.l}",
+      "style": "solid",
+      "color": "{color.interactive.focus}"
+    },
+    "type": "border"
+  },
+  "tooltip-border-radius": {
+    "value": "{borderRadius.m}",
+    "type": "borderRadius"
+  },
+  "tooltip-color-bg": {
+    "value": "{color.greyscale.700}",
+    "type": "color"
+  },
+  "tooltip-color-text": {
+    "value": "{color.text.light}",
+    "type": "color"
+  },
+  "tooltip-gap": {
+    "value": "{space.2xs}",
+    "type": "spacing"
+  },
+  "tooltip-max-width": {
+    "value": "400px",
+    "type": "dimension"
+  },
+  "tooltip-padding": {
+    "value": "6px {space.m} 10px {space.m}",
+    "type": "spacing"
+  },
+  "tooltip-text-size": {
+    "value": "{typography.body.m}",
+    "type": "other"
+  }
+}