@primer/primitives 9.0.3 → 9.1.0-rc.56a8ee48

package/src/transformers/shadowToCss.ts

@@ -1,37 +0,0 @@
-import {toHex} from 'color2k'
-import {isShadow} from '../filters'
-import {alpha} from './utilities/alpha'
-import {checkRequiredTokenProperties} from './utilities/checkRequiredTokenProperties'
-import type {ShadowTokenValue} from '../types/ShadowTokenValue'
-import type StyleDictionary from 'style-dictionary'
-import {getTokenValue} from './utilities/getTokenValue'
-
-/**
- * @description converts w3c shadow tokens in css shadow string
- * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
- * @matcher matches all tokens of $type `shadow`
- * @transformer returns css shadow `string`
- */
-export const shadowToCss: StyleDictionary.Transform = {
-  type: `value`,
-  transitive: true,
-  matcher: isShadow,
-  transformer: (token: StyleDictionary.TransformedToken) => {
-    // extract value
-    const {value}: {value: ShadowTokenValue | ShadowTokenValue[]} = token
-    // turn value into array
-    const shadowValues = !Array.isArray(value) ? [value] : value
-
-    return shadowValues
-      .map((shadow: ShadowTokenValue) => {
-        // if value === string it was probably already transformed
-        if (typeof shadow === 'string') return shadow
-        checkRequiredTokenProperties(shadow, ['color', 'offsetX', 'offsetY', 'blur', 'spread'])
-        /*css box shadow:  inset? | offset-x | offset-y | blur-radius | spread-radius | color */
-        return `${shadow.inset === true ? 'inset ' : ''}${shadow.offsetX} ${shadow.offsetY} ${shadow.blur} ${
-          shadow.spread
-        } ${toHex(alpha(getTokenValue({...token, ...{value: shadow}}, 'color'), shadow.alpha || 1, token))}`
-      })
-      .join(', ')
-  },
-}

package/src/transformers/typographyToCss.ts

@@ -1,31 +0,0 @@
-import type StyleDictionary from 'style-dictionary'
-import {isTypography} from '../filters'
-import type {TypographyTokenValue} from '../types/TypographyTokenValue'
-import {checkRequiredTokenProperties} from './utilities/checkRequiredTokenProperties'
-import {parseFontFamily} from './fontFamilyToCss'
-import {parseFontWeight} from './fontWeightToNumber'
-import {getTokenValue} from './utilities/getTokenValue'
-
-/**
- * @description converts typograhy token value to css font shorthand
- * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
- * @matcher matches all tokens of $type `typography`
- * @transformer returns a css font string
- */
-export const typographyToCss: StyleDictionary.Transform = {
-  type: `value`,
-  transitive: true,
-  matcher: isTypography,
-  transformer: (token: StyleDictionary.TransformedToken) => {
-    // extract value
-    const value: TypographyTokenValue = getTokenValue(token)
-    // validate token properties
-    checkRequiredTokenProperties(value, ['fontWeight', 'fontSize', 'fontFamily'])
-    // format output
-    return `${value.fontStyle || ''} ${parseFontWeight(getTokenValue(token, 'fontWeight'))} ${value.fontSize}${
-      value.lineHeight ? `/${value.lineHeight}` : ''
-    } ${parseFontFamily(getTokenValue(token, 'fontFamily'))}`
-      .trim()
-      .replace(/\s\s+/g, ' ')
-  },
-}

package/src/transformers/utilities/alpha.ts

@@ -1,23 +0,0 @@
-import {rgba, parseToRgba} from 'color2k'
-import type {TransformedToken} from 'style-dictionary'
-/**
- * alpha
- * @description takes a colors string like hex or rgba and returns an rgba color with the specified alpha value
- * @param color color string like a `#334455` or `rgb(255,200,100)`
- * @param desiredAlpha number
- * @returns rgba value
- */
-export const alpha = (color: string, desiredAlpha: number, token?: TransformedToken): string => {
-  const [r, g, b, a] = parseToRgba(color)
-
-  if (a < 1 && desiredAlpha < 1) {
-    // eslint-disable-next-line no-console
-    console.warn(
-      `🚨 You are setting an alpha value of "${desiredAlpha}" for a color with an alpha value (${color}). The previous alpha value will be disregarded as if the color would have been 100% opaque.${
-        token !== undefined ? `\n ↳ Token: "${token.name}" in file: "${token.filePath}"` : ''
-      }`,
-    )
-  }
-
-  return rgba(r, g, b, desiredAlpha)
-}

package/src/transformers/utilities/checkRequiredTokenProperties.ts

@@ -1,16 +0,0 @@
-/**
- * checks if all required properties exist on token
- * @param object - tokenValue
- * @param array - property names
- * @returns void or throws error
- */
-export const checkRequiredTokenProperties = (
-  tokenValue: Record<string, unknown>,
-  requiredProperties: readonly string[],
-) => {
-  for (const prop of requiredProperties) {
-    if (prop in tokenValue === false) {
-      throw new Error(`Missing property: ${prop} on token with value ${JSON.stringify(tokenValue)}`)
-    }
-  }
-}

package/src/transformers/utilities/getTokenValue.ts

@@ -1,18 +0,0 @@
-import type StyleDictionary from 'style-dictionary'
-import {invalidTokenValueError, invalidTokenValuePropertyError} from './invalidTokenError'
-
-export const getTokenValue = (token: StyleDictionary.TransformedToken, property?: string) => {
-  if (token.value === undefined) {
-    throw new invalidTokenValueError(token)
-  }
-  // for composite token if subproperty is needed
-  if (typeof property === 'string' && token.value[property] === undefined) {
-    throw new invalidTokenValuePropertyError(token, property)
-  }
-
-  if (typeof property === 'string') {
-    return token.value[property]
-  }
-
-  return token.value
-}

package/src/transformers/utilities/hasSpaceInString.ts

@@ -1,6 +0,0 @@
-export const hasSpaceInString = (string: string): boolean => {
-  if (typeof string !== 'string') {
-    throw new TypeError(`Invalid input. Input must be a string, ${typeof string} provided`)
-  }
-  return /\s/g.test(string)
-}

package/src/transformers/utilities/hexToRgbaFloat.ts

@@ -1,31 +0,0 @@
-import type {RgbaFloat} from './isRgbaFloat'
-
-export const hexToRgbaFloat = (hex: string, alpha?: number): RgbaFloat => {
-  // retrieve spots from hex value (hex 3, hex 4, hex 6 or hex 8)
-  let result
-  if (hex.length > 5) {
-    result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(hex)
-  } else {
-    result = /^#?([a-f\d]{1})([a-f\d]{1})([a-f\d]{1})([a-f\d]{1})?$/i.exec(hex)
-  }
-
-  if (result === null) {
-    throw new Error('Invalid hex value in "hexToRgbaFloat". Please provide a valid hex3, hex4, hex6 or hex8 value.')
-  }
-  // doule characters if hex 3 or hex 4
-  if (hex.length < 6) {
-    result[1] = `${result[1]}${result[1]}` // double the character
-    result[2] = `${result[2]}${result[2]}` // double the character
-    result[3] = `${result[3]}${result[3]}` // double the character
-    if (result[4]) {
-      result[4] = `${result[4]}${result[4]}` // double the character
-    }
-  }
-  // return parsed rgba float object using alpha value from token, from hex code or defaults to 1
-  return {
-    r: parseInt(result[1], 16) / 255,
-    g: parseInt(result[2], 16) / 255,
-    b: parseInt(result[3], 16) / 255,
-    a: alpha !== undefined ? alpha : result[4] ? parseInt(result[4], 16) / 255 : 1,
-  }
-}

package/src/transformers/utilities/invalidTokenError.ts

@@ -1,34 +0,0 @@
-import type {TransformedToken} from 'style-dictionary'
-import {namePathToDotNotation} from '../namePathToDotNotation'
-
-const composeValueErrorMessage = (token: TransformedToken) => {
-  // eslint-disable-next-line i18n-text/no-en
-  return `Invalid token "${namePathToDotNotation.transformer(token, {})}" in file "${
-    token.filePath
-  }". Transformed value: "${JSON.stringify(token.value)}". ${
-    token.original.value ? `Original value: "${JSON.stringify(token.original.value)}" ` : ''
-  }This may be due to referencing a token that does not exists.`
-}
-
-const composeValuePropertyErrorMessage = (token: TransformedToken, property: string) => {
-  // eslint-disable-next-line i18n-text/no-en
-  return `Invalid property "${property}" of token "${namePathToDotNotation.transformer(token, {})}" in file "${
-    token.filePath
-  }". Transformed property value: "${token.value[property]}". ${
-    token.original.value ? `Original value: "${token.original.value[property]}" ` : ''
-  }This may be due to referencing a token that does not exists.`
-}
-
-export class invalidTokenValueError extends Error {
-  constructor(token: TransformedToken) {
-    super(composeValueErrorMessage(token))
-    Error.captureStackTrace(this, invalidTokenValueError)
-  }
-}
-
-export class invalidTokenValuePropertyError extends Error {
-  constructor(token: TransformedToken, property: string) {
-    super(composeValuePropertyErrorMessage(token, property))
-    Error.captureStackTrace(this, invalidTokenValuePropertyError)
-  }
-}

package/src/transformers/utilities/isRgbaFloat.ts

@@ -1,29 +0,0 @@
-export type RgbaFloat = {
-  r: number
-  g: number
-  b: number
-  a?: number
-}
-
-// check if a value is an rgba float object
-export const isRgbaFloat = (value: unknown): value is RgbaFloat => {
-  if (
-    value &&
-    typeof value === `object` &&
-    'r' in value &&
-    typeof value.r === `number` &&
-    'g' in value &&
-    typeof value.g === `number` &&
-    'b' in value &&
-    typeof value.b === `number` &&
-    value.r >= 0 &&
-    value.r <= 1 &&
-    value.g >= 0 &&
-    value.g <= 1 &&
-    value.b >= 0 &&
-    value.b <= 1
-  ) {
-    return true
-  }
-  return false
-}

package/src/transformers/utilities/mix.ts

@@ -1,46 +0,0 @@
-import {rgba, parseToRgba} from 'color2k'
-
-/**
- * Mixes two colors together. Taken from sass's implementation.
- */
-function mix(color1: string, color2: string, weight: number): string {
-  const normalize = (n: number, index: number) =>
-    // 3rd index is alpha channel which is already normalized
-    index === 3 ? n : n / 255
-
-  const [r1, g1, b1, a1] = parseToRgba(color1).map(normalize)
-  const [r2, g2, b2, a2] = parseToRgba(color2).map(normalize)
-
-  // The formula is copied from the original Sass implementation:
-  // http://sass-lang.com/documentation/Sass/Script/Functions.html#mix-instance_method
-  const normalizedWeight = 2 * weight - 1
-  const alphaDelta = a1 - a2
-
-  const combinedWeight =
-    normalizedWeight * alphaDelta === -1
-      ? normalizedWeight
-      : (normalizedWeight + alphaDelta) / (1 + normalizedWeight * alphaDelta)
-
-  const weight2 = (combinedWeight + 1) / 2
-  const weight1 = 1 - weight2
-  const r = Math.round((r1 * weight1 + r2 * weight2) * 255)
-  const g = Math.round((g1 * weight1 + g2 * weight2) * 255)
-  const b = Math.round((b1 * weight1 + b2 * weight2) * 255)
-  const a = a2 * weight + a1 * (1 - weight)
-  return rgba(r, g, b, a)
-}
-
-export default mix
-// Number* weight = ARGR("$weight", Number, 0, 100);
-// double p = weight->value()/100;
-// double w = 2*p - 1;
-// double a = color1->a() - color2->a();
-// double nW = ((w * a == -1) ? w : (w + a)/(1 + w*a))
-// double w1 = (nW + 1)/2.0;
-// double w2 = 1 - w1;
-
-// return new (ctx.mem) Color(pstate,
-//                            std::round(w1*color1->r() + w2*color2->r()),
-//                            std::round(w1*color1->g() + w2*color2->g()),
-//                            std::round(w1*color1->b() + w2*color2->b()),
-//                            color1->a()*p + color2->a()*(1-p));

package/src/transformers/utilities/rgbaFloatToHex.ts

@@ -1,15 +0,0 @@
-export const rgbaFloatToHex = ({r, g, b, a}: {r: number; g: number; b: number; a?: number}, alpha = true): string => {
-  const values = [r, g, b, alpha === true && a && a < 1 ? a : undefined].filter(item => item !== undefined) as number[]
-
-  if (r > 1 || r < 0 || g > 1 || g < 0 || b > 1 || b < 0) {
-    throw new Error('Invalid RgbaFloat value. R, G and B values must be between 0 and 1.')
-  }
-
-  return `#${values
-    .map(v =>
-      Number(parseInt(`${v * 255}`, 10))
-        .toString(16)
-        .padStart(2, '0'),
-    )
-    .join('')}`
-}

package/src/types/Border.d.ts

@@ -1,5 +0,0 @@
-/**
- * @description a css border string
- * @format color | style | width
- */
-type Border = `${ColorHex} ${string} ${string}`

package/src/types/BorderTokenValue.d.ts

@@ -1,10 +0,0 @@
-/**
- * Type definition for w3c border composite token value
- * @link https://design-tokens.github.io/community-group/format/#border
- */
-export type StrokeStyleString = 'solid' | 'dashed' | 'dotted' | 'double' | 'groove' | 'ridge' | 'outset' | 'inset'
-export type BorderTokenValue = {
-  color: string
-  width: string
-  style: StrokeStyleString
-}

package/src/types/ColorHex.d.ts

@@ -1,4 +0,0 @@
-/**
- * @description hex string (6 or 8-digit)
- */
-type ColorHex = string

package/src/types/PlatformInitializer.d.ts

@@ -1,11 +0,0 @@
-import type StyleDictionary from 'style-dictionary'
-
-export type PlatformInitializer = (
-  // the filename including the extension (e.g. `.css`) and any subfolders after the buildPath (e.g. `functional`)
-  outputFile: string,
-  // the prefix is prepended to all tokens
-  prefix: string | undefined,
-  // the build path in which the `outputFile` is placed
-  buildPath: string,
-  options?: StyleDictionary.Options,
-) => StyleDictionary.Platform

package/src/types/Shadow.d.ts

@@ -1,5 +0,0 @@
-/**
- * @description a css shadow
- * @format inset? | offset-x | offset-y | blur-radius? | spread-radius? | color?
- */
-type Shadow = string

package/src/types/ShadowTokenValue.d.ts

@@ -1,14 +0,0 @@
-/**
- * Type definition for w3c shadow composite token value
- * @link https://design-tokens.github.io/community-group/format/#shadow
- */
-export type ShadowTokenValue = {
-  color: string
-  offsetX: string
-  offsetY: string
-  blur: string
-  spread: string
-  // custom non w3c values
-  inset?: boolean
-  alpha?: number
-}

package/src/types/SizeEm.d.ts

@@ -1,4 +0,0 @@
-/**
- * @description size in em
- */
-type SizeEm = `${number}em`

package/src/types/SizePx.d.ts

@@ -1,4 +0,0 @@
-/**
- * @description size in px
- */
-type SizePx = `${number}px`

package/src/types/SizeRem.d.ts

@@ -1,4 +0,0 @@
-/**
- * @description size in rem
- */
-type SizeRem = `${number}rem`

package/src/types/StyleDictionaryConfigGenerator.d.ts

@@ -1,15 +0,0 @@
-import type StyleDictionary from 'style-dictionary'
-
-export type ConfigGeneratorOptions = {
-  buildPath: string
-  prefix?: string
-  themed?: boolean
-}
-
-export type StyleDictionaryConfigGenerator = (
-  outputName: string,
-  source: string[],
-  include: string[],
-  options: ConfigGeneratorOptions,
-  platforms?: Record<string, StyleDictionary.Platform | undefined>,
-) => StyleDictionary.Config

package/src/types/TokenBuildInput.d.ts

@@ -1,8 +0,0 @@
-export type TokenBuildInput = {
-  // The output filename WITHOUT the extension
-  filename: string
-  // Array of `filepaths` to token files that should be converted and included in the output. Accepts relative or glob paths.
-  source: string[]
-  // Array of `filepaths` to token fils that should NOT be included in the output, but should be available to reference during compilation e.g. base color scales
-  include: string[]
-}

package/src/types/TypographyTokenValue.d.ts

@@ -1,12 +0,0 @@
-/**
- * Type definition for w3c typography composite token value
- * @link https://design-tokens.github.io/community-group/format/#typography
- */
-export type TypographyTokenValue = {
-  fontFamily: string
-  fontSize: number
-  fontWeight: number
-  lineHeight: number
-  fontStyle?: string
-  letterSpacing?: number
-}

package/src/types/w3cTransformedToken.d.ts

@@ -1,8 +0,0 @@
-import type StyleDictionary from 'style-dictionary'
-
-export type w3cTokenType = 'color' | 'dimension' | 'fontFamily' | 'fontWeight' | 'duration' | 'cubicBezier'
-export type w3cCompositeTokenType = 'shadow' | 'border' | 'gradient' | 'transition' | 'strokeStyle' | 'typography'
-
-export interface w3cTransformedToken extends StyleDictionary.TransformedToken {
-  $type?: w3cTokenType | w3cCompositeTokenType
-}

package/src/utilities/copyFromDir.ts

@@ -1,21 +0,0 @@
-/* istanbul ignore file */
-import {copyFile, readdir, mkdir} from 'fs/promises'
-/**
- * copyFromDir
- * @description Copies all files from source folder to destination
- * @param source path
- * @param destination path
- * @returns promise
- */
-export const copyFromDir = async (source: string, destination: string) => {
-  // adjust trailing slash
-  const src = `${source.replace(/\/$/, '')}`
-  const dest = `${destination.replace(/\/$/, '')}`
-  // create dest if it does not exists
-  await mkdir(dest, {recursive: true})
-  // read files from source
-  const files = await readdir(src)
-  for (const file of files) {
-    copyFile(`${src}/${file}`, `${dest}/${file}`)
-  }
-}

package/src/utilities/index.ts

@@ -1,3 +0,0 @@
-export {copyFromDir} from './copyFromDir'
-export {upperCaseFirstCharacter} from './upperCaseFirstCharacter'
-export {toCamelCase} from './toCamelCase'

package/src/utilities/joinFriendly.ts

@@ -1,2 +0,0 @@
-export const joinFriendly = (array: string[], lastJoin = 'and') =>
-  array.length > 1 ? `${array.slice(0, -1).join(', ')} ${lastJoin} ${array.slice(-1)}` : `${array[0]}`

package/src/utilities/schemaErrorMessage.ts

@@ -1,2 +0,0 @@
-export const schemaErrorMessage = (title: string, description?: string): string =>
-  `**${title}**${description ? `\n${description}` : ``}`

package/src/utilities/toCamelCase.ts

@@ -1,29 +0,0 @@
-import {upperCaseFirstCharacter} from './upperCaseFirstCharacter'
-
-export const toCamelCase = (string: string | string[]) => {
-  if (!Array.isArray(string)) {
-    string = [string]
-  }
-  // match unsupported characters
-  const regex = /[^a-zA-Z0-9]+/g
-  // replace any non-letter and non-number character and split into word array
-  const stringArray = string
-    .filter(part => part !== '@')
-    .filter(Boolean)
-    .join(' ')
-    .replace(regex, ' ')
-    .split(' ')
-  return (
-    stringArray
-      // remove undefined if exists
-      .filter((part: unknown): part is string => typeof part === 'string')
-      // ucFirst all but first part
-      .map((part: string, index: number) => {
-        if (index > 0) {
-          return upperCaseFirstCharacter(part)
-        }
-        return part
-      })
-      .join('')
-  )
-}

package/src/utilities/treeWalker.ts

@@ -1,27 +0,0 @@
-/**
- * @description converts tokens to type and returns array with used type
- * @param tree object
- * @param callback function to be run on valid items
- * @param validItem function to test if a node is a validItem to be transformed
- * @returns object
- */
-export const treeWalker = (
-  tree: unknown,
-  callback: <T>(argument: T) => unknown,
-  isValidItem: (argument: unknown) => boolean,
-): unknown => {
-  // is a valid item -> pass through callback
-  if (isValidItem(tree)) {
-    return callback(tree)
-  }
-  // is non-object value -> ignore
-  if (typeof tree !== 'object' || tree === null) {
-    return
-  }
-  // is obj -> continue
-  const nextObj: Record<string, unknown> = {}
-  for (const [prop, value] of Object.entries(tree) as [prop: string, value: unknown][]) {
-    nextObj[prop] = treeWalker(value, callback, isValidItem)
-  }
-  return nextObj
-}