@primer/primitives 7.16.0 → 7.17.0-rc.132f02a7

package/src/tokens/functional/size/viewport.json

@@ -0,0 +1,28 @@
+{
+  "viewportRange": {
+    "narrow": {
+      "$value": "(max-width: calc({breakpoint.medium} - 0.02px))",
+      "$type": "custom-viewportRange"
+    },
+    "narrowLandscape": {
+      "$value": "(max-width: calc({breakpoint.large} - 0.02px) and (max-height: calc({breakpoint.small} - 0.02px)) and (orientation: landscape))",
+      "$type": "custom-viewportRange"
+    },
+    "regular": {
+      "$value": "(min-width: {breakpoint.medium})",
+      "$type": "custom-viewportRange"
+    },
+    "wide": {
+      "$value": "(min-width: {breakpoint.xxlarge})",
+      "$type": "custom-viewportRange"
+    },
+    "portrait": {
+      "$value": "(orientation: portrait)",
+      "$type": "custom-viewportRange"
+    },
+    "landscape": {
+      "$value": "(orientation: landscape)",
+      "$type": "custom-viewportRange"
+    }
+  }
+}

package/src/tokens/functional/typography/typography.json

@@ -0,0 +1,279 @@
+{
+  "fontStack": {
+    "system": {
+      "$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+      "$type": "fontFamily"
+    },
+    "sansSerif": {
+      "$value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+      "$type": "fontFamily"
+    },
+    "monospace": {
+      "$value": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
+      "$type": "fontFamily"
+    }
+  },
+  "text": {
+    "display": {
+      "lineBoxHeight": {
+        "$value": "56px",
+        "$type": "dimension"
+      },
+      "size": {
+        "$value": "40px",
+        "$type": "dimension"
+      },
+      "lineHeight": {
+        "$value": 1.4,
+        "$type": "number"
+      },
+      "weight": {
+        "$value": "{base.text.weight.medium}",
+        "$type": "fontWeight"
+      },
+      "shorthand": {
+        "$value": {
+          "fontWeight": "{text.display.weight}",
+          "fontSize": "{text.display.size}",
+          "lineHeight": "{text.display.lineHeight}",
+          "fontFamily": "{fontStack.sansSerif}"
+        },
+        "$type": "typography",
+        "$description": "Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports."
+      }
+    },
+    "title": {
+      "size": {
+        "large": {
+          "$value": "32px",
+          "$type": "dimension"
+        },
+        "medium": {
+          "$value": "20px",
+          "$type": "dimension"
+        },
+        "small": {
+          "$value": "16px",
+          "$type": "dimension"
+        }
+      },
+      "lineHeight": {
+        "large": {
+          "$value": 1.5,
+          "$type": "number"
+        },
+        "medium": {
+          "$value": 1.6,
+          "$type": "number"
+        },
+        "small": {
+          "$value": 1.5,
+          "$type": "number"
+        }
+      },
+      "weight": {
+        "large": {
+          "$value": "{base.text.weight.semibold}",
+          "$type": "fontWeight"
+        },
+        "medium": {
+          "$value": "{base.text.weight.semibold}",
+          "$type": "fontWeight"
+        },
+        "small": {
+          "$value": "{base.text.weight.semibold}",
+          "$type": "fontWeight"
+        }
+      },
+      "shorthand": {
+        "large": {
+          "$value": {
+            "fontWeight": "{text.title.weight.large}",
+            "fontSize": "{text.title.size.large}",
+            "lineHeight": "{text.title.lineHeight.large}",
+            "fontFamily": "{fontStack.sansSerif}"
+          },
+          "$type": "typography",
+          "$description": "Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports."
+        },
+        "medium": {
+          "$value": {
+            "fontWeight": "{text.title.weight.medium}",
+            "fontSize": "{text.title.size.medium}",
+            "lineHeight": "{text.title.lineHeight.medium}",
+            "fontFamily": "{fontStack.sansSerif}"
+          },
+          "$type": "typography",
+          "$description": "Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition."
+        },
+        "small": {
+          "$value": {
+            "fontWeight": "{text.title.weight.small}",
+            "fontSize": "{text.title.size.small}",
+            "lineHeight": "{text.title.lineHeight.small}",
+            "fontFamily": "{fontStack.sansSerif}"
+          },
+          "$type": "typography",
+          "$description": "Uses the same size as body (large) with a heavier weight of semibold (600)."
+        }
+      }
+    },
+    "subtitle": {
+      "size": {
+        "$value": "20px",
+        "$type": "dimension"
+      },
+      "lineHeight": {
+        "$value": 1.6,
+        "$type": "number"
+      },
+      "weight": {
+        "$value": "{base.text.weight.normal}",
+        "$type": "fontWeight"
+      },
+      "shorthand": {
+        "$value": {
+          "fontWeight": "{text.subtitle.weight}",
+          "fontSize": "{text.subtitle.size}",
+          "lineHeight": "{text.subtitle.lineHeight}",
+          "fontFamily": "{fontStack.sansSerif}"
+        },
+        "$type": "typography",
+        "$description": "Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium)."
+      }
+    },
+    "body": {
+      "size": {
+        "large": {
+          "$value": "16px",
+          "$type": "dimension"
+        },
+        "medium": {
+          "$value": "14px",
+          "$type": "dimension"
+        },
+        "small": {
+          "$value": "12px",
+          "$type": "dimension"
+        }
+      },
+      "lineHeight": {
+        "large": {
+          "$value": 1.5,
+          "$type": "number"
+        },
+        "medium": {
+          "$value": 1.4285,
+          "$type": "number"
+        },
+        "small": {
+          "$value": 1.6666,
+          "$type": "number"
+        }
+      },
+      "weight": {
+        "$value": "{base.text.weight.normal}",
+        "$type": "fontWeight"
+      },
+      "shorthand": {
+        "large": {
+          "$value": {
+            "fontWeight": "{text.body.weight}",
+            "fontSize": "{text.body.size.large}",
+            "lineHeight": "{text.body.lineHeight.large}",
+            "fontFamily": "{fontStack.sansSerif}"
+          },
+          "$type": "typography",
+          "$description": "User-generated content, markdown rendering."
+        },
+        "medium": {
+          "$value": {
+            "fontWeight": "{text.body.weight}",
+            "fontSize": "{text.body.size.medium}",
+            "lineHeight": "{text.body.lineHeight.medium}",
+            "fontFamily": "{fontStack.sansSerif}"
+          },
+          "$type": "typography",
+          "$description": "Default UI font. Most commonly used for body text."
+        },
+        "small": {
+          "$value": {
+            "fontWeight": "{text.body.weight}",
+            "fontSize": "{text.body.size.small}",
+            "lineHeight": "{text.body.lineHeight.small}",
+            "fontFamily": "{fontStack.sansSerif}"
+          },
+          "$type": "typography",
+          "$description": "Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px."
+        }
+      }
+    },
+    "caption": {
+      "size": {
+        "$value": "12px",
+        "$type": "dimension"
+      },
+      "lineHeight": {
+        "$value": 1.3333,
+        "$type": "number"
+      },
+      "weight": {
+        "$value": "{base.text.weight.normal}",
+        "$type": "fontWeight"
+      },
+      "shorthand": {
+        "$value": {
+          "fontWeight": "{text.caption.weight}",
+          "fontSize": "{text.caption.size}",
+          "lineHeight": "{text.caption.lineHeight}",
+          "fontFamily": "{fontStack.sansSerif}"
+        },
+        "$type": "typography",
+        "$description": "Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements."
+      }
+    },
+    "codeBlock": {
+      "size": {
+        "$value": "13px",
+        "$type": "dimension"
+      },
+      "lineHeight": {
+        "$value": 1.5385,
+        "$type": "number"
+      },
+      "weight": {
+        "$value": "{base.text.weight.normal}",
+        "$type": "fontWeight"
+      },
+      "shorthand": {
+        "$value": {
+          "fontWeight": "{text.codeBlock.weight}",
+          "fontSize": "{text.codeBlock.size}",
+          "lineHeight": "{text.codeBlock.lineHeight}",
+          "fontFamily": "{fontStack.monospace}"
+        },
+        "$type": "typography",
+        "$description": "Default style for rendering code blocks."
+      }
+    },
+    "codeInline": {
+      "size": {
+        "$value": "0.9285em",
+        "$type": "dimension"
+      },
+      "weight": {
+        "$value": "{base.text.weight.normal}",
+        "$type": "fontWeight"
+      },
+      "shorthand": {
+        "$value": {
+          "fontWeight": "{text.codeInline.weight}",
+          "fontSize": "{text.codeInline.size}",
+          "fontFamily": "{fontStack.monospace}"
+        },
+        "$type": "typography",
+        "$description": "Inline code blocks using em units to inherit size from its parent."
+      }
+    }
+  }
+}

package/src/transformers/borderToCss.ts

@@ -0,0 +1,38 @@
+import {isBorder} from '../filters/isBorder'
+import type StyleDictionary from 'style-dictionary'
+import type {BorderTokenValue} from '../types/BorderTokenValue'
+
+/**
+ * checks if all required properties exist on shadow token
+ * @param object - BorderTokenValue
+ * @returns void or throws error
+ */
+const checkForBorderTokenProperties = (border: BorderTokenValue) => {
+  const requiredProperties = ['color', 'width', 'style']
+  for (const prop of requiredProperties) {
+    if (prop in border === false) {
+      throw new Error(`Missing propery: ${prop} on border token ${JSON.stringify(border)}`)
+    }
+  }
+}
+/**
+ * @description converts w3c border tokens in css border string
+ * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
+ * @matcher matches all tokens of $type `border`
+ * @transformer returns css border `string`
+ */
+export const borderToCss: StyleDictionary.Transform = {
+  type: `value`,
+  transitive: true,
+  matcher: isBorder,
+  transformer: ({value}: {value: BorderTokenValue}) => {
+    //
+    checkForBorderTokenProperties(value)
+    // if value === string it was probably already transformed
+    if (typeof value === 'string') {
+      return value
+    }
+    /* color | style | width */
+    return `${value.color} ${value.style} ${value.width}`
+  },
+}

package/src/transformers/colorToHex.ts

@@ -0,0 +1,16 @@
+import {toHex} from 'color2k'
+import {isColor} from '../filters'
+import type StyleDictionary from 'style-dictionary'
+import {getTokenValue} from './utilities/getTokenValue'
+/**
+ * @description converts color tokens value to `hex6` or `hex8`
+ * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
+ * @matcher matches all tokens of $type `color`
+ * @transformer returns a `hex` string
+ */
+export const colorToHex: StyleDictionary.Transform = {
+  type: `value`,
+  transitive: true,
+  matcher: isColor,
+  transformer: (token: StyleDictionary.TransformedToken) => toHex(getTokenValue(token)),
+}

package/src/transformers/colorToHexAlpha.ts

@@ -0,0 +1,23 @@
+import {toHex} from 'color2k'
+import {alpha} from './utilities/alpha'
+import {isColorWithAlpha} from '../filters'
+import type StyleDictionary from 'style-dictionary'
+import {getTokenValue} from './utilities/getTokenValue'
+/**
+ * @description replaces tokens value with `hex8` color using the tokens `alpha` property to specify the value used for alpha
+ * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
+ * @matcher matches all tokens of $type `color` with an `alpha` property
+ * @transformer returns `hex8` string
+ */
+export const colorToHexAlpha: StyleDictionary.Transform = {
+  type: `value`,
+  transitive: true,
+  matcher: isColorWithAlpha,
+  transformer: (token: StyleDictionary.TransformedToken) => {
+    // don't change if alpha is null
+    if (token.alpha === null) {
+      return toHex(getTokenValue(token))
+    }
+    return toHex(alpha(getTokenValue(token), token.alpha, token))
+  },
+}

package/src/transformers/colorToHexMix.ts

@@ -0,0 +1,19 @@
+import {toHex} from 'color2k'
+import {isColorWithMix} from '../filters'
+import type StyleDictionary from 'style-dictionary'
+import {getTokenValue} from './utilities/getTokenValue'
+import mix from './utilities/mix'
+/**
+ * @description replaces tokens value with `hex8` color using the tokens `alpha` property to specify the value used for alpha
+ * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
+ * @matcher matches all tokens of $type `color` with an `alpha` property
+ * @transformer returns `hex8` string
+ */
+export const colorToHexMix: StyleDictionary.Transform = {
+  type: `value`,
+  transitive: true,
+  matcher: isColorWithMix,
+  transformer: (token: StyleDictionary.TransformedToken) => {
+    return toHex(mix(getTokenValue(token), token.mix?.color || getTokenValue(token), token.mix?.weight || 0))
+  },
+}

package/src/transformers/colorToRgbAlpha.ts

@@ -0,0 +1,19 @@
+import {isColorWithAlpha} from '../filters'
+import {alpha} from './utilities/alpha'
+import type StyleDictionary from 'style-dictionary'
+import {getTokenValue} from './utilities/getTokenValue'
+/**
+ * @description replaces tokens value with `rgba` color using the tokens `alpha` property to specify the value used for alpha
+ * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
+ * @matcher matches all tokens of $type `color` with an `alpha` property
+ * @transformer returns `rgba` string
+ */
+export const colorToRgbAlpha: StyleDictionary.Transform = {
+  type: `value`,
+  transitive: true,
+  matcher: isColorWithAlpha,
+  transformer: (token: StyleDictionary.TransformedToken) => {
+    if (token.alpha === null) return getTokenValue(token)
+    return alpha(getTokenValue(token), token.alpha, token)
+  },
+}

package/src/transformers/colorToRgbaFloat.ts

@@ -0,0 +1,45 @@
+import {toHex} from 'color2k'
+import {isColor} from '../filters'
+import type StyleDictionary from 'style-dictionary'
+import {getTokenValue} from './utilities/getTokenValue'
+import {rgbaFloatToHex} from './utilities/rgbaFloatToHex'
+import mix from './utilities/mix'
+import {hexToRgbaFloat} from './utilities/hexToRgbaFloat'
+import {isRgbaFloat} from './utilities/isRgbaFloat'
+
+const toRgbaFloat = (token: StyleDictionary.TransformedToken, alpha?: number) => {
+  let tokenValue = getTokenValue(token)
+  let tokenMixColor = token.mix?.color
+  // get hex value from color string
+  if (isRgbaFloat(tokenValue)) {
+    tokenValue = rgbaFloatToHex(tokenValue, false)
+  }
+  if (tokenMixColor && isRgbaFloat(tokenMixColor)) {
+    tokenMixColor = rgbaFloatToHex(tokenMixColor, false)
+  }
+  let hex = toHex(tokenValue)
+  // mix color with mix color and weight
+  if (token.mix && token.mix.color && token.mix.weight) {
+    hex = toHex(mix(tokenValue, tokenMixColor, token.mix.weight))
+  }
+  // return color as RgbaFloat
+  return hexToRgbaFloat(hex, alpha)
+}
+
+/**
+ * @description converts color tokens rgba float with values from 0 - 1
+ * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
+ * @matcher matches all tokens of $type `color`
+ * @transformer returns a `rgb` float object
+ */
+export const colorToRgbaFloat: StyleDictionary.Transform = {
+  type: `value`,
+  transitive: true,
+  matcher: isColor,
+  transformer: (token: StyleDictionary.TransformedToken) => {
+    // skip if value is already rgb float
+    if (isRgbaFloat(token.value) && !('mix' in token) && !('alpha' in token)) return token.value
+    // convert hex or rgb values to rgba float
+    return toRgbaFloat(token, token.alpha)
+  },
+}

package/src/transformers/dimensionToPixelUnitless.ts

@@ -0,0 +1,60 @@
+import {isDimension} from '../filters'
+import type StyleDictionary from 'style-dictionary'
+import type {Platform} from 'style-dictionary'
+
+/**
+ * @description base font size from options or 16
+ * @param options
+ * @returns number
+ */
+const getBasePxFontSize = (options?: Platform): number => (options && options.basePxFontSize) || 16
+
+/**
+ * @description checks if token value has a specific unit
+ * @param value token value
+ * @param unit unit string like px or value
+ * @returns boolean
+ */
+const hasUnit = (value: string | number, unit: string): boolean => {
+  if (typeof value === 'number') {
+    return false
+  }
+
+  return value.indexOf(unit) > -1
+}
+
+/**
+ * @description converts dimension tokens value to pixel value without unit, ignores `em` as they are relative to the font size of the parent element
+ * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
+ * @matcher matches all tokens of $type `dimension`
+ * @transformer returns a float number
+ */
+export const dimensionToPixelUnitless: StyleDictionary.Transform = {
+  type: `value`,
+  transitive: true,
+  matcher: isDimension,
+  transformer: (token: StyleDictionary.TransformedToken, options?: Platform) => {
+    const baseFont = getBasePxFontSize(options)
+    const floatVal = parseFloat(token.value)
+
+    if (isNaN(floatVal)) {
+      throw new Error(
+        `Invalid dimension token: '${token.name}: ${token.value}' is not valid and cannot be transform to 'float' \n`,
+      )
+    }
+
+    if (floatVal === 0) {
+      return 0
+    }
+
+    if (hasUnit(token.value, 'rem')) {
+      return floatVal * baseFont
+    }
+
+    if (hasUnit(token.value, 'px')) {
+      return floatVal
+    }
+
+    return token.value
+  },
+}

package/src/transformers/dimensionToRem.ts

@@ -0,0 +1,56 @@
+import {isDimension} from '../filters'
+import type StyleDictionary from 'style-dictionary'
+import type {Platform} from 'style-dictionary'
+
+/**
+ * @description base font size from options or 16
+ * @param options
+ * @returns number
+ */
+const getBasePxFontSize = (options?: Platform): number => (options && options.basePxFontSize) || 16
+
+/**
+ * @description checks if token value has a specific unit
+ * @param value token value
+ * @param unit unit string like px or value
+ * @returns boolean
+ */
+const hasUnit = (value: string | number, unit: string): boolean => {
+  if (typeof value === 'number') {
+    return false
+  }
+
+  return value.indexOf(unit) > -1
+}
+
+/**
+ * @description converts dimension tokens value to `rem`, ignores `em` as they are relative to the font size of the parent element
+ * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
+ * @matcher matches all tokens of $type `dimension`
+ * @transformer returns a `rem` string
+ */
+export const dimensionToRem: StyleDictionary.Transform = {
+  type: `value`,
+  transitive: true,
+  matcher: isDimension,
+  transformer: (token: StyleDictionary.TransformedToken, options?: Platform) => {
+    const baseFont = getBasePxFontSize(options)
+    const floatVal = parseFloat(token.value)
+
+    if (isNaN(floatVal)) {
+      throw new Error(
+        `Invalid dimension token: '${token.name}: ${token.value}' is not valid and cannot be transform to 'rem' \n`,
+      )
+    }
+
+    if (floatVal === 0) {
+      return '0'
+    }
+
+    if (hasUnit(token.value, 'rem') || hasUnit(token.value, 'em')) {
+      return token.value
+    }
+
+    return `${floatVal / baseFont}rem`
+  },
+}

package/src/transformers/dimensionToRemPxArray.ts

@@ -0,0 +1,60 @@
+import {isDimension} from '../filters'
+import type StyleDictionary from 'style-dictionary'
+import type {Platform} from 'style-dictionary'
+
+type SizePx = '0' | `${number}px`
+type SizeRem = '0' | `${number}rem`
+type SizeEm = '0' | `${number}em`
+
+/**
+ * @description base font size from options or 16
+ * @param options
+ * @returns number
+ */
+const getBasePxFontSize = (options?: Platform): number => (options && options.basePxFontSize) || 16
+
+/**
+ * @description checks if token value has a specific unit
+ * @param value token value
+ * @param unit unit string like px or value
+ * @returns boolean
+ */
+const hasUnit = (value: string | number, unit: string): boolean => {
+  if (typeof value === 'number') {
+    return false
+  }
+
+  return value.indexOf(unit) > -1
+}
+
+/**
+ * @description converts dimension tokens value to `rem`, ignores `em` as they are relative to the font size of the parent element
+ * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
+ * @matcher matches all tokens of $type `dimension`
+ * @transformer returns an array with the `rem` and `pixel` string
+ */
+export const dimensionToRemPxArray: StyleDictionary.Transform = {
+  type: `value`,
+  transitive: true,
+  matcher: isDimension,
+  transformer: (token: StyleDictionary.TransformedToken, options?: Platform): [SizeRem | SizeEm, SizePx] => {
+    const baseFont = getBasePxFontSize(options)
+    const floatVal = parseFloat(token.value)
+
+    if (isNaN(floatVal)) {
+      throw new Error(
+        `Invalid dimension token: '${token.name}: ${token.value}' is not valid and cannot be transform to 'rem' \n`,
+      )
+    }
+
+    if (floatVal === 0) {
+      return ['0', '0']
+    }
+
+    if (hasUnit(token.value, 'rem') || hasUnit(token.value, 'em')) {
+      return [token.value, `${floatVal * baseFont}px`]
+    }
+
+    return [`${floatVal / baseFont}rem`, `${floatVal}px`]
+  },
+}

package/src/transformers/durationToCss.ts

@@ -0,0 +1,29 @@
+import type StyleDictionary from 'style-dictionary'
+import {isDuration} from '../filters/isDuration'
+
+/**
+ * @description converts duration tokens string value to number with `ms` unit
+ * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
+ * @matcher matches all tokens of $type `duration`
+ * @transformer returns a css duration
+ */
+export const durationToCss: StyleDictionary.Transform = {
+  type: `value`,
+  transitive: true,
+  matcher: isDuration,
+  transformer: (token: StyleDictionary.TransformedToken, _options?: StyleDictionary.Platform) => {
+    // throw an error if token value is not a string or does not end with `ms`
+    if (typeof token.value !== `string` || !token.value.endsWith(`ms`)) {
+      throw new Error(`duration token value must be a string with an "ms" unit`)
+    }
+    // get value
+    let value = parseInt(token.value.replace('ms', ''))
+    let unit = `ms`
+    if (value >= 1000) {
+      value = value / 1000
+      unit = `s`
+    }
+    // return value
+    return `${value}${unit}`
+  },
+}