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

package/src/schemas/dimensionToken.ts

@@ -1,34 +0,0 @@
-import {z} from 'zod'
-import {baseToken} from './baseToken'
-import {referenceValue} from './referenceValue'
-import {collection} from './collections'
-import {scopes} from './scopes'
-import {dimensionValue} from './dimensionValue'
-import {tokenType} from './tokenType'
-
-export const dimensionToken = baseToken
-  .extend({
-    $value: z.union([dimensionValue, referenceValue]),
-    $type: tokenType('dimension'),
-    $extensions: z
-      .object({
-        'org.primer.figma': z.object({
-          collection: collection(['base/size', 'functional/size', 'pattern/size', 'typography']),
-          scopes: scopes([
-            'all',
-            'size',
-            'gap',
-            'radius',
-            'borderColor',
-            'effectFloat',
-            'fontSize',
-            'letterSpacing',
-            'lineHeight',
-            'paragraphSpacing',
-            'paragraphIndent',
-          ]),
-        }),
-      })
-      .optional(),
-  })
-  .strict()

package/src/schemas/dimensionValue.ts

@@ -1,16 +0,0 @@
-import {z} from 'zod'
-import {schemaErrorMessage} from '../utilities/schemaErrorMessage'
-
-export const dimensionValue = z.union([
-  z.string().refine(
-    dim => /(^-?[0-9]+(px|rem)$|^-?[0-9]+\.?[0-9]*em$)/.test(dim),
-    val => ({
-      message: schemaErrorMessage(
-        `Invalid dimension: "${val}"`,
-        `Dimension must be a string with a unit (px, rem or em) or 0`,
-      ),
-    }),
-  ),
-  z.literal('0'),
-  z.literal(0),
-])

package/src/schemas/durationToken.ts

@@ -1,12 +0,0 @@
-import {z} from 'zod'
-import {baseToken} from './baseToken'
-import {referenceValue} from './referenceValue'
-import {durationValue} from './durationValue'
-import {tokenType} from './tokenType'
-
-export const durationToken = baseToken
-  .extend({
-    $value: z.union([durationValue, referenceValue]),
-    $type: tokenType('duration'),
-  })
-  .strict()

package/src/schemas/durationValue.ts

@@ -1,9 +0,0 @@
-import {z} from 'zod'
-import {schemaErrorMessage} from '../utilities/schemaErrorMessage'
-
-export const durationValue = z.string().refine(
-  duration => /(^[0-9]+ms$)/.test(duration),
-  val => ({
-    message: schemaErrorMessage(`Invalid duration: "${val}"`, `A duration must be a string with an "ms"`),
-  }),
-)

package/src/schemas/fontFamilyToken.ts

@@ -1,21 +0,0 @@
-import {z} from 'zod'
-import {referenceValue} from './referenceValue'
-import {baseToken} from './baseToken'
-import {tokenType} from './tokenType'
-import {collection} from './collections'
-import {scopes} from './scopes'
-
-export const fontFamilyToken = baseToken
-  .extend({
-    $value: z.union([z.string(), referenceValue]),
-    $type: tokenType('fontFamily'),
-    $extensions: z
-      .object({
-        'org.primer.figma': z.object({
-          collection: collection(['base/typography', 'typography']).optional(),
-          scopes: scopes(['fontFamily']).optional(),
-        }),
-      })
-      .optional(),
-  })
-  .strict()

package/src/schemas/fontWeightToken.ts

@@ -1,22 +0,0 @@
-import {z} from 'zod'
-import {fontWeightValue} from './fontWeightValue'
-import {referenceValue} from './referenceValue'
-import {baseToken} from './baseToken'
-import {tokenType} from './tokenType'
-import {collection} from './collections'
-import {scopes} from './scopes'
-
-export const fontWeightToken = baseToken
-  .extend({
-    $type: tokenType('fontWeight'),
-    $value: z.union([fontWeightValue, referenceValue]),
-    $extensions: z
-      .object({
-        'org.primer.figma': z.object({
-          collection: collection(['base/typography', 'typography']).optional(),
-          scopes: scopes(['fontWeight']).optional(),
-        }),
-      })
-      .optional(),
-  })
-  .strict()

package/src/schemas/fontWeightValue.ts

@@ -1,14 +0,0 @@
-import {z} from 'zod'
-import {schemaErrorMessage} from '../utilities/schemaErrorMessage'
-
-const allowed = [100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
-
-export const fontWeightValue = z.number().refine(
-  value => allowed.includes(value),
-  value => ({
-    message: schemaErrorMessage(
-      `Invalid font weight value: "${value}"`,
-      `Font weight must be one of ${allowed.join(', ')}`,
-    ),
-  }),
-)

package/src/schemas/numberToken.ts

@@ -1,28 +0,0 @@
-import {z} from 'zod'
-import {baseToken} from './baseToken'
-import {referenceValue} from './referenceValue'
-import {tokenType} from './tokenType'
-import {scopes} from './scopes'
-import {collection} from './collections'
-
-export const numberToken = baseToken
-  .extend({
-    $value: z.union([z.number(), referenceValue]),
-    $type: tokenType('number'),
-    $extensions: z
-      .object({
-        'org.primer.data': z
-          .object({
-            fontSize: z.number().optional(),
-          })
-          .optional(),
-        'org.primer.figma': z
-          .object({
-            collection: collection(['typography']).optional(),
-            scopes: scopes(['fontWeight', 'lineHeight']).optional(),
-          })
-          .optional(),
-      })
-      .optional(),
-  })
-  .strict()

package/src/schemas/referenceValue.ts

@@ -1,12 +0,0 @@
-import {z} from 'zod'
-import {schemaErrorMessage} from '../utilities/schemaErrorMessage'
-
-export const referenceValue = z.string().refine(
-  ref => /^{\w+(\.\w+)*(\.\w+|\.@)}$/.test(ref),
-  ref => ({
-    message: schemaErrorMessage(
-      `Invalid reference: "${ref}"`,
-      'Reference must be a string in the format "{path.to.token}".',
-    ),
-  }),
-)

package/src/schemas/scopes.ts

@@ -1,40 +0,0 @@
-import {z} from 'zod'
-import {joinFriendly} from '../utilities/joinFriendly'
-import {schemaErrorMessage} from '../utilities/schemaErrorMessage'
-
-const validScopes = [
-  'all',
-  'bgColor',
-  'fgColor',
-  'borderColor',
-  'borderWidth',
-  'size',
-  'gap',
-  'radius',
-  'effectColor',
-  'effectFloat',
-  'opacity',
-  'fontFamily',
-  'fontStyle',
-  'fontWeight',
-  'fontSize',
-  'lineHeight',
-  'letterSpacing',
-  'paragraphSpacing',
-  'paragraphIndent',
-] as const
-
-export type ValidScope = (typeof validScopes)[number]
-
-export const scopes = (scopeSubset?: ValidScope[]) => {
-  const scopeArray = scopeSubset ?? validScopes
-  return z.array(z.string()).refine(
-    value => value.every(item => scopeArray.includes(item as ValidScope)),
-    value => ({
-      message: schemaErrorMessage(
-        `Invalid scope: "${value}"`,
-        `Valid scopes are: ${joinFriendly(scopeArray as string[])}`,
-      ),
-    }),
-  )
-}

package/src/schemas/shadowToken.ts

@@ -1,45 +0,0 @@
-import {z} from 'zod'
-import {baseToken} from './baseToken'
-import {referenceValue} from './referenceValue'
-import {colorHexValue} from './colorHexValue'
-import {alphaValue} from './alphaValue'
-import {dimensionValue} from './dimensionValue'
-import {tokenType} from './tokenType'
-import {collection, mode} from './collections'
-
-export const shadowValue = z
-  .object({
-    color: z.union([colorHexValue, referenceValue]),
-    alpha: z.union([alphaValue, referenceValue]),
-    offsetX: z.union([dimensionValue, referenceValue]),
-    offsetY: z.union([dimensionValue, referenceValue]),
-    blur: z.union([dimensionValue, referenceValue]),
-    spread: z.union([dimensionValue, referenceValue]),
-    inset: z.boolean().optional(),
-  })
-  .strict()
-
-export const shadowToken = baseToken
-  .extend({
-    $value: z.union([shadowValue, z.array(shadowValue), referenceValue]),
-    $type: tokenType('shadow'),
-    $extensions: z
-      .object({
-        'org.primer.figma': z.object({
-          collection: collection(['mode']).optional(),
-          mode: mode([
-            'light',
-            'dark',
-            'dark dimmed',
-            'light high contrast',
-            'dark high contrast',
-            'light colorblind',
-            'dark colorblind',
-            'light tritanopia',
-            'dark tritanopia',
-          ]).optional(),
-        }),
-      })
-      .optional(),
-  })
-  .strict()

package/src/schemas/stringToken.ts

@@ -1,11 +0,0 @@
-import {z} from 'zod'
-import {baseToken} from './baseToken'
-import {referenceValue} from './referenceValue'
-import {tokenType} from './tokenType'
-
-export const stringToken = baseToken
-  .extend({
-    $value: z.union([z.string(), referenceValue]),
-    $type: tokenType('string'),
-  })
-  .strict()

package/src/schemas/tokenName.ts

@@ -1,12 +0,0 @@
-import {z} from 'zod'
-import {schemaErrorMessage} from '../utilities/schemaErrorMessage'
-
-export const tokenName = z.string().refine(
-  name => /(^[a-z0-9][A-Za-z0-9-]*$|^@$)/.test(name),
-  name => ({
-    message: schemaErrorMessage(
-      `Invalid token name: "${name}"`,
-      'Token name must be kebab-case or camelCase, and start with a lowercase letter or number and consist only of letters, numbers, and hyphens.',
-    ),
-  }),
-)

package/src/schemas/tokenType.ts

@@ -1,4 +0,0 @@
-import {z} from 'zod'
-import type {TokenType} from './validTokenType'
-
-export const tokenType = ($type: TokenType) => z.literal($type)

package/src/schemas/typographyToken.ts

@@ -1,20 +0,0 @@
-import {z} from 'zod'
-import {referenceValue} from './referenceValue'
-import {dimensionValue} from './dimensionValue'
-import {baseToken} from './baseToken'
-import {fontWeightValue} from './fontWeightValue'
-import {tokenType} from './tokenType'
-
-export const typographyValue = z.object({
-  fontSize: z.union([dimensionValue, referenceValue]),
-  lineHeight: z.union([dimensionValue, referenceValue]).optional(),
-  fontWeight: z.union([fontWeightValue, referenceValue]),
-  fontFamily: z.union([z.string().min(1), referenceValue]),
-})
-
-export const typographyToken = baseToken
-  .extend({
-    $value: z.union([typographyValue, referenceValue]),
-    $type: tokenType('typography'),
-  })
-  .strict()

package/src/schemas/validTokenType.ts

@@ -1,44 +0,0 @@
-import {z} from 'zod'
-import {joinFriendly} from '../utilities/joinFriendly'
-import {schemaErrorMessage} from '../utilities/schemaErrorMessage'
-
-const validTypes = [
-  'color',
-  'typography',
-  'dimension',
-  'duration',
-  'border',
-  'shadow',
-  'fontFamily',
-  'fontWeight',
-  'number',
-  'string',
-  'custom-viewportRange',
-] as const
-
-export type TokenType = (typeof validTypes)[number]
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore: TODO: fix this
-export const validateType = z.record(
-  z.string(),
-  z.lazy((): z.ZodTypeAny => {
-    return z.union([
-      z
-        .object({
-          $value: z.any(),
-          $type: z.string().refine(
-            type => validTypes.includes(type as TokenType),
-            val => ({
-              message: schemaErrorMessage(
-                `Invalid token $type: "${val}"`,
-                `Must be one of the following: ${joinFriendly([...validTypes], 'or')}`,
-              ),
-            }),
-          ),
-        })
-        .required(),
-      validateType,
-    ])
-  }),
-)

package/src/schemas/viewportRangeToken.ts

@@ -1,11 +0,0 @@
-import {z} from 'zod'
-import {baseToken} from './baseToken'
-import {referenceValue} from './referenceValue'
-import {tokenType} from './tokenType'
-
-export const viewportRangeToken = baseToken
-  .extend({
-    $value: z.union([z.string(), referenceValue]),
-    $type: tokenType('custom-viewportRange'),
-  })
-  .strict()

package/src/test-utilities/getMockDictionary.ts

@@ -1,22 +0,0 @@
-import type StyleDictionary from 'style-dictionary'
-import {getMockToken} from './getMockToken'
-
-const mockDictionaryDefault = {
-  tokens: {
-    subgroup: {
-      red: getMockToken({
-        name: 'red',
-        path: ['tokens', 'subgroup', 'red'],
-      }),
-    },
-  },
-}
-
-export const getMockDictionary = (tokens?: StyleDictionary.TransformedTokens): StyleDictionary.Dictionary => ({
-  allTokens: Object.values((tokens || mockDictionaryDefault).tokens.subgroup),
-  tokens: tokens || mockDictionaryDefault,
-  allProperties: Object.values((tokens || mockDictionaryDefault).tokens.subgroup),
-  properties: tokens || mockDictionaryDefault,
-  usesReference: _value => false,
-  getReferences: _value => [],
-})

package/src/test-utilities/getMockFormatterArguments.ts

@@ -1,21 +0,0 @@
-import type {FormatterArguments} from 'style-dictionary/types/Format'
-import {getMockDictionary} from './'
-
-const defaultFormatterArguments: FormatterArguments = {
-  dictionary: getMockDictionary(),
-  file: {
-    destination: 'tokens.ts',
-    options: {
-      showFileHeader: false,
-    },
-  },
-  options: {},
-  platform: {},
-}
-
-export const getMockFormatterArguments = (overrides?: Partial<FormatterArguments>): FormatterArguments => {
-  return {
-    ...defaultFormatterArguments,
-    ...(overrides || {}),
-  }
-}

package/src/test-utilities/getMockParserInput.ts

@@ -1,72 +0,0 @@
-export const parserOutput = {
-  color: {
-    value: 'red',
-    comment: 'a red color',
-    $type: 'color',
-    $extensions: {},
-    alpha: 0.5,
-  },
-}
-
-const parserInput: {[Property in jsonFormats]: string} = {
-  'json.w3c': `{
-    "color": {
-      "$value": 'red',
-      "$description": "a red color",
-      "$type": "color",
-      "$extensions": {},
-      "alpha": 0.5
-    }
-  }`,
-  'json.default': `{
-    "color": {
-      "value": 'red',
-      "description": "a red color",
-      "type": "color",
-      "extensions": {},
-      "alpha": 0.5
-    }
-  }`,
-  'json5.w3c': `{
-    "color": {
-      // comment
-      $value: 'red',
-      "$description": "a red color",
-      '$type': "color",
-      "$extensions": {},
-      alpha: 0.5,
-    }
-  }`,
-  'json5.default': `{
-    "color": {
-      // comment
-      value: 'red',
-      "description": "a red color",
-      'type': "color",
-      "extensions": {},
-      alpha: 0.5,
-    }
-  }`,
-}
-
-type jsonFormats = 'json5.default' | 'json5.w3c' | 'json.default' | 'json.w3c'
-
-/**
- *
- * @param contents jsonFormats or string taht replaces content in return
- * @returns predefined json string or override
- */
-export const getMockParserInput = (
-  contents: jsonFormats | string,
-  filePath?: string,
-): {filePath: string; contents: string} => {
-  // use predefined if no override
-  if (['json5.default', 'json5.w3c', 'json.default', 'json.w3c'].includes(contents)) {
-    contents = parserInput[contents as jsonFormats]
-  }
-
-  return {
-    filePath: filePath || `path/to/file/token.json`,
-    contents,
-  }
-}

package/src/test-utilities/getMockToken.ts

@@ -1,25 +0,0 @@
-import type StyleDictionary from 'style-dictionary'
-
-const mockTokenDefaults = {
-  name: 'tokenName',
-  path: ['path'],
-  original: {
-    value: 'originalValue',
-    attributes: {},
-  },
-  filePath: 'file.json',
-  isSource: true,
-  value: 'transformedValue',
-  attributes: {},
-}
-/**
- *
- * @param valueOverrides partial StyleDictionary.TransformedToken
- * @returns StyleDictionary.TransformedToken - a merge of {@link mockTokenDefaults} and any valid properties provided in the valueOverrides param
- */
-export const getMockToken = (valueOverrides: {
-  [key: keyof StyleDictionary.TransformedToken]: unknown
-}): StyleDictionary.TransformedToken => ({
-  ...mockTokenDefaults,
-  ...valueOverrides,
-})

package/src/test-utilities/index.ts

@@ -1,4 +0,0 @@
-export {getMockDictionary} from './getMockDictionary'
-export {getMockToken} from './getMockToken'
-export {getMockParserInput, parserOutput} from './getMockParserInput'
-export {getMockFormatterArguments} from './getMockFormatterArguments'

package/src/transformers/borderToCss.ts

@@ -1,38 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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)
-  },
-}