diff --git a/design-guidelines/design-tokens/color.md b/design-guidelines/design-tokens/color.md index 47ade558d..ddf6376e8 100644 --- a/design-guidelines/design-tokens/color.md +++ b/design-guidelines/design-tokens/color.md @@ -1,14 +1,13 @@ - ## All Colors | Swatch | Js variable name | Value | -| ------------------------------------------------------------------------------------------ | ----------------- | ------- | +| :----------------------------------------------------------------------------------------- | :---------------- | :------ | | ![white color swatch](https://via.placeholder.com/100x33/FFF/000000?text=+) | white | #FFF | | ![black color swatch](https://via.placeholder.com/100x33/000/000000?text=+) | black | #000 | | ![cyan color swatch](https://via.placeholder.com/100x33/20D5FF/000000?text=+) | cyan | #20D5FF | @@ -106,7 +105,7 @@ ## Text | Swatch | Js variable name | Value | Alias for | -| --------------------------------------------------------------------------------------------------- | -------------------------- | ------- | ---------------- | +| :-------------------------------------------------------------------------------------------------- | :------------------------- | :------ | :--------------- | | ![textColorPrimary color swatch](https://via.placeholder.com/100x33/1B2029/000000?text=+) | textColorPrimary | #1B2029 | greyDark | | ![textColorPrimaryInverted color swatch](https://via.placeholder.com/100x33/DADDE2/000000?text=+) | textColorPrimaryInverted | #DADDE2 | greyLight | | ![textColorSecondary color swatch](https://via.placeholder.com/100x33/76797E/000000?text=+) | textColorSecondary | #76797E | greyDarkLighten4 | @@ -117,7 +116,7 @@ ## Borders | Swatch | Js variable name | Value | Alias for | -| --------------------------------------------------------------------------------------------------- | -------------------------- | ------- | ---------------- | +| :-------------------------------------------------------------------------------------------------- | :------------------------- | :------ | :--------------- | | ![borderColorDefault color swatch](https://via.placeholder.com/100x33/DADDE2/000000?text=+) | borderColorDefault | #DADDE2 | greyLight | | ![borderColorDefaultInverted color swatch](https://via.placeholder.com/100x33/32363E/000000?text=+) | borderColorDefaultInverted | #32363E | greyDarkLighten2 | @@ -126,7 +125,7 @@ ## Other Aliases | Swatch | Js variable name | Value | Alias for | -| -------------------------------------------------------------------------------- | ---------------- | ------- | --------- | +| :------------------------------------------------------------------------------- | :--------------- | :------ | :-------- | | ![accent color swatch](https://via.placeholder.com/100x33/7D58FF/000000?text=+) | accent | #7D58FF | purple | | ![error color swatch](https://via.placeholder.com/100x33/EB293A/000000?text=+) | error | #EB293A | red | | ![success color swatch](https://via.placeholder.com/100x33/14C684/000000?text=+) | success | #14C684 | green | diff --git a/design-guidelines/design-tokens/font.md b/design-guidelines/design-tokens/font.md index 7ce3a175b..fde397e33 100644 --- a/design-guidelines/design-tokens/font.md +++ b/design-guidelines/design-tokens/font.md @@ -1,12 +1,11 @@ - | Js variable name | Value | -| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | +| :-------------------- | :---------------------------------------------------------------------------------------------------------------------------------------- | | fontFamilySansSerif | -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica', 'Arial', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' | | fontFamilyMonospace | 'Menlo', 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', 'Monaco', 'Consolas', monospace | | fontLineHeightDefault | 1.4 | diff --git a/design-guidelines/design-tokens/layout.md b/design-guidelines/design-tokens/layout.md index 362670137..1f69f6776 100644 --- a/design-guidelines/design-tokens/layout.md +++ b/design-guidelines/design-tokens/layout.md @@ -1,14 +1,13 @@ - ## Breakpoints | Js variable name | Value | -| ---------------- | ------ | +| :--------------- | :----- | | breakpointSmall | 600px | | breakpointMedium | 900px | | breakpointLarge | 1200px | @@ -19,7 +18,7 @@ ## Container Widths | Js variable name | Value | -| ---------------------- | ------ | +| :--------------------- | :----- | | containerWidthDefault | 550px | | containerWidthAtMedium | 800px | | containerWidthAtLarge | 900px | @@ -30,7 +29,7 @@ ## Icon Sizes | Swatch | Js variable name | Value | -| ------------------------------------ | ---------------- | ----- | +| :----------------------------------- | :--------------- | :---- | | ![](https://via.placeholder.com/12/) | iconSizeXxs | 12px | | ![](https://via.placeholder.com/16/) | iconSizeXs | 16px | | ![](https://via.placeholder.com/24/) | iconSizeS | 24px | @@ -44,7 +43,7 @@ ## Spacing | Js variable name | Value | -| ---------------- | ----- | +| :--------------- | :---- | | spaceXxs | 4px | | spaceXs | 8px | | spaceS | 12px | @@ -58,9 +57,11 @@ ## Other | Js variable name | Value | -| ------------------- | ----- | -| borderRadiusSmall | 4px | -| borderRadiusDefault | 6px | +| :------------------ | :---- | +| borderRadiusSmall | 2px | +| borderRadiusDefault | 4px | +| borderRadiusLarge | 8px | +| borderRadiusCircle | 50% | | textBlockWidth | 65ch | | zIndexContent | 0 | | zIndexModal | 1 | diff --git a/packages/design-tokens/scripts/formats.mjs b/packages/design-tokens/scripts/formats.mjs index 4acd65864..37fc951d4 100644 --- a/packages/design-tokens/scripts/formats.mjs +++ b/packages/design-tokens/scripts/formats.mjs @@ -1,8 +1,10 @@ import tablemark from "tablemark"; + const dateHeader = ` Do not edit directly Generated by style-dictionary on ${new Date()} `; + const getSwatch = prop => { if (prop.attributes.category === "color") { return { diff --git a/packages/design-tokens/scripts/transforms.js b/packages/design-tokens/scripts/transforms.js index dda0322c0..ae0f17157 100644 --- a/packages/design-tokens/scripts/transforms.js +++ b/packages/design-tokens/scripts/transforms.js @@ -103,7 +103,7 @@ const JS_originalFromAlias = { type: "attribute", matcher: prop => prop.isAlias, transformer: prop => { - const propAttributes = prop.value.replace(/[{}]/g, "").split("."); + const propAttributes = prop.original.value.replace(/[{}]/g, "").split("."); const originalProp = { attributes: { category: propAttributes[0],