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

package/src/parsers/w3cJsonParser.ts

@@ -1,25 +0,0 @@
-import {parse as json5Parse} from 'json5'
-import type StyleDictionary from 'style-dictionary'
-
-/**
- * @description Parses a valid [json5](https://json5.org) file and replaces `$value` with `value` and `$description` with `comment` to make a w3c standard file compatible with style dictionary
- * @pattern supported file extensions `.json` or `.json5`
- */
-export const w3cJsonParser: StyleDictionary.Parser = {
-  pattern: /\.json5?$/,
-  parse: ({filePath, contents}: {filePath: string; contents: string}) => {
-    // replace $value with value so that style dictionary recognizes it
-    try {
-      contents = contents
-        .replace(/["|']?\$value["|']?:/g, '"value":')
-        // convert $description to comment
-        .replace(/["|']?\$?description["|']?:/g, '"comment":')
-        .replace(/["|']?\$?type["|']?:/g, '"$type":')
-        .replace(/["|']?\$?extensions["|']?:/g, '"$extensions":')
-      //
-      return json5Parse(contents)
-    } catch (e) {
-      throw new Error(`Invalid json5 file "${filePath}".`)
-    }
-  },
-}

package/src/platforms/css.ts

@@ -1,101 +0,0 @@
-import {isFromFile, isSource} from '../filters'
-import type StyleDictionary from 'style-dictionary'
-import type {PlatformInitializer} from '../types/PlatformInitializer'
-import type {TransformedToken} from 'style-dictionary'
-
-const getCssSelectors = (outputFile: string) => {
-  // check for dark in the beginning of the output filename
-  const lastSlash = outputFile.lastIndexOf('/')
-  const outputBasename = outputFile.substring(lastSlash + 1, outputFile.indexOf('.'))
-  const themeName = outputBasename.replace(/-/g, '_')
-  const mode = outputBasename.substring(0, 4) === 'dark' ? 'dark' : 'light'
-
-  return [
-    {
-      selector: `[data-color-mode="${mode}"][data-${mode}-theme="${themeName}"], [data-color-mode="${mode}"][data-${mode}-theme="${themeName}"] ::backdrop, [data-color-mode="auto"][data-light-theme="${themeName}"], [data-color-mode="auto"][data-light-theme="${themeName}"] ::backdrop`,
-    },
-    {
-      query: '@media (prefers-color-scheme: dark)',
-      selector: `[data-color-mode="auto"][data-dark-theme="${themeName}"], [data-color-mode="auto"][data-dark-theme="${themeName}"] ::backdrop`,
-    },
-  ]
-}
-
-export const css: PlatformInitializer = (outputFile, prefix, buildPath, options): StyleDictionary.Platform => {
-  return {
-    prefix,
-    buildPath,
-    transforms: [
-      'name/pathToKebabCase',
-      'color/hex',
-      'color/hexAlpha',
-      'color/hexMix',
-      'dimension/rem',
-      'duration/css',
-      'shadow/css',
-      'border/css',
-      'typography/css',
-      'fontFamily/css',
-      'fontWeight/number',
-    ],
-    options: {
-      basePxFontSize: 16,
-    },
-    files: [
-      {
-        destination: `${outputFile}`,
-        format: `css/advanced`,
-        filter: token => isSource(token) && options?.themed === true,
-        options: {
-          showFileHeader: false,
-          outputReferences: false,
-          descriptions: false,
-          queries: getCssSelectors(outputFile),
-          ...options?.options,
-        },
-      },
-      {
-        destination: `${outputFile}`,
-        format: `css/advanced`,
-        filter: token => isSource(token) && options?.themed !== true,
-        options: {
-          showFileHeader: false,
-          descriptions: false,
-          ...options?.options,
-        },
-      },
-      {
-        destination: `${outputFile}`,
-        format: `css/customMedia`,
-        filter: token => isSource(token) && options?.themed !== true && token.$type === 'custom-viewportRange',
-        options: {
-          showFileHeader: false,
-        },
-      },
-      {
-        destination: `${outputFile}`,
-        format: `css/advanced`,
-        filter: token =>
-          isSource(token) &&
-          isFromFile(token, [
-            'src/tokens/functional/size/size-coarse.json',
-            'src/tokens/functional/size/size-fine.json',
-          ]),
-        options: {
-          descriptions: false,
-          showFileHeader: false,
-          queries: [
-            {
-              query: '@media (pointer: fine)',
-              matcher: (token: TransformedToken) => token.filePath.includes('size-fine'),
-            },
-            {
-              query: '@media (pointer: coarse)',
-              matcher: (token: TransformedToken) => token.filePath.includes('size-coarse'),
-            },
-          ],
-        },
-      },
-    ],
-  }
-}

package/src/platforms/deprecatedJson.ts

@@ -1,16 +0,0 @@
-import type StyleDictionary from 'style-dictionary'
-import type {PlatformInitializer} from '../types/PlatformInitializer'
-import {isDeprecated} from '../filters'
-
-export const deprecatedJson: PlatformInitializer = (outputFile, prefix, buildPath): StyleDictionary.Platform => ({
-  prefix,
-  buildPath,
-  transforms: ['name/pathToDotNotation', 'json/deprecated'],
-  files: [
-    {
-      destination: outputFile,
-      format: `json/flat`,
-      filter: isDeprecated,
-    },
-  ],
-})

package/src/platforms/docJson.ts

@@ -1,34 +0,0 @@
-import type StyleDictionary from 'style-dictionary'
-import type {PlatformInitializer} from '../types/PlatformInitializer'
-import {isSource} from '../filters'
-
-export const docJson: PlatformInitializer = (outputFile, prefix, buildPath): StyleDictionary.Platform => ({
-  prefix,
-  buildPath,
-  transforms: [
-    'name/pathToKebabCase',
-    'color/hex',
-    'color/hexMix',
-    'color/hexAlpha',
-    'dimension/rem',
-    'shadow/css',
-    'border/css',
-    'typography/css',
-    'fontFamily/css',
-    'fontWeight/number',
-  ],
-  options: {
-    basePxFontSize: 16,
-  },
-  files: [
-    {
-      destination: outputFile,
-      format: `json/one-dimensional`,
-      filter: isSource,
-      options: {
-        outputReferences: false,
-        outputVerbose: true,
-      },
-    },
-  ],
-})

package/src/platforms/fallbacks.ts

@@ -1,34 +0,0 @@
-import type StyleDictionary from 'style-dictionary'
-import type {PlatformInitializer} from '../types/PlatformInitializer'
-import {isSource} from '../filters'
-
-export const fallbacks: PlatformInitializer = (outputFile, prefix, buildPath): StyleDictionary.Platform => ({
-  prefix,
-  buildPath,
-  transforms: [
-    'name/pathToKebabCase',
-    'color/hex',
-    'color/hexMix',
-    'color/hexAlpha',
-    'dimension/rem',
-    'shadow/css',
-    'border/css',
-    'typography/css',
-    'fontFamily/css',
-    'fontWeight/number',
-  ],
-  options: {
-    basePxFontSize: 16,
-  },
-  files: [
-    {
-      destination: outputFile,
-      format: `json/postCss-fallback`,
-      filter: isSource,
-      options: {
-        outputReferences: false,
-        outputVerbose: true,
-      },
-    },
-  ],
-})

package/src/platforms/figma.ts

@@ -1,58 +0,0 @@
-import type StyleDictionary from 'style-dictionary'
-import type {PlatformInitializer} from '../types/PlatformInitializer'
-import {isSource} from '../filters'
-
-const validFigmaToken = (token: StyleDictionary.TransformedToken) => {
-  const validTypes = ['color', 'dimension', 'shadow', 'fontWeight', 'fontFamily', 'number']
-  // is a siource token, not an included one
-  if (!isSource(token)) return false
-
-  if (`${token.value}`.substring(token.value.length - 2) === 'em') return false
-  // has a collection attribute
-  if (
-    !('$extensions' in token) ||
-    !('org.primer.figma' in token.$extensions) ||
-    !('collection' in token.$extensions['org.primer.figma'])
-  )
-    return false
-  // is a color or dimension type
-  return validTypes.includes(token.$type)
-}
-
-export const figma: PlatformInitializer = (outputFile, prefix, buildPath, options): StyleDictionary.Platform => ({
-  prefix,
-  buildPath,
-  transforms: [
-    'color/rgbaFloat',
-    'name/pathToFigma',
-    // 'name/pathToSlashNotation',
-    'figma/attributes',
-    'fontFamily/figma',
-    'float/pixelUnitless',
-    'dimension/pixelUnitless',
-    // 'border/figma',
-    // 'typography/figma',
-    'fontWeight/number',
-  ],
-  options: {
-    basePxFontSize: 16,
-    fontFamilies: {
-      'fontStack/system': 'SF Pro Text',
-      'fontStack/sansSerif': 'SF Pro Text',
-      'fontStack/sansSerifDisplay': 'SF Pro Display',
-      'fontStack/monospace': 'SF Mono',
-    },
-    ...options,
-  },
-  files: [
-    {
-      destination: outputFile,
-      filter: validFigmaToken,
-      format: `json/figma`,
-      options: {
-        outputReferences: true,
-        mode: options?.mode,
-      },
-    },
-  ],
-})

package/src/platforms/index.ts

@@ -1,10 +0,0 @@
-export {css} from './css'
-export {deprecatedJson} from './deprecatedJson'
-export {docJson} from './docJson'
-export {fallbacks} from './fallbacks'
-export {figma} from './figma'
-export {javascript} from './javascript'
-export {json} from './json'
-export {styleLint} from './styleLint'
-export {typeDefinitions} from './typeDefinitions'
-export {typescript} from './typescript'

package/src/platforms/javascript.ts

@@ -1,30 +0,0 @@
-import type StyleDictionary from 'style-dictionary'
-import type {PlatformInitializer} from '../types/PlatformInitializer'
-import {isSource} from '../filters'
-
-export const javascript: PlatformInitializer = (outputFile, prefix, buildPath): StyleDictionary.Platform => ({
-  prefix,
-  buildPath,
-  transforms: [
-    'color/hex',
-    'color/hexMix',
-    'color/hexAlpha',
-    'dimension/rem',
-    'shadow/css',
-    'border/css',
-    'typography/css',
-    'fontFamily/css',
-    'fontWeight/number',
-  ],
-  options: {
-    showFileHeader: false,
-    basePxFontSize: 16,
-  },
-  files: [
-    {
-      format: 'javascript/commonJs',
-      destination: outputFile,
-      filter: isSource,
-    },
-  ],
-})

package/src/platforms/json.ts

@@ -1,32 +0,0 @@
-import type StyleDictionary from 'style-dictionary'
-import type {PlatformInitializer} from '../types/PlatformInitializer'
-import {isSource} from '../filters'
-
-export const json: PlatformInitializer = (outputFile, prefix, buildPath): StyleDictionary.Platform => ({
-  prefix,
-  buildPath,
-  transforms: [
-    'color/hex',
-    'color/hexMix',
-    'color/hexAlpha',
-    'dimension/rem',
-    'shadow/css',
-    'border/css',
-    'typography/css',
-    'fontFamily/css',
-    'fontWeight/number',
-  ],
-  options: {
-    basePxFontSize: 16,
-  },
-  files: [
-    {
-      destination: outputFile,
-      filter: isSource,
-      format: `json/nested-prefixed`,
-      options: {
-        outputReferences: false,
-      },
-    },
-  ],
-})

package/src/platforms/styleLint.ts

@@ -1,34 +0,0 @@
-import type StyleDictionary from 'style-dictionary'
-import type {PlatformInitializer} from '../types/PlatformInitializer'
-import {isSource} from '../filters'
-
-export const styleLint: PlatformInitializer = (outputFile, prefix, buildPath): StyleDictionary.Platform => ({
-  prefix,
-  buildPath,
-  transforms: [
-    'name/pathToKebabCase',
-    'color/hex',
-    'color/hexMix',
-    'color/hexAlpha',
-    'dimension/remPxArray',
-    'shadow/css',
-    'border/css',
-    'typography/css',
-    'fontFamily/css',
-    'fontWeight/number',
-  ],
-  options: {
-    basePxFontSize: 16,
-  },
-  files: [
-    {
-      destination: outputFile,
-      format: `json/one-dimensional`,
-      filter: isSource,
-      options: {
-        outputReferences: false,
-        outputVerbose: true,
-      },
-    },
-  ],
-})

package/src/platforms/typeDefinitions.ts

@@ -1,30 +0,0 @@
-import type StyleDictionary from 'style-dictionary'
-import type {PlatformInitializer} from '../types/PlatformInitializer'
-import {isSource} from '../filters'
-import {upperCaseFirstCharacter} from '../utilities'
-
-export const typeDefinitions: PlatformInitializer = (outputFile, prefix, buildPath): StyleDictionary.Platform => ({
-  prefix,
-  buildPath,
-  transforms: [
-    'color/hex',
-    'color/hexAlpha',
-    'shadow/css',
-    'border/css',
-    'dimension/rem',
-    'typography/css',
-    'fontFamily/css',
-    'fontWeight/number',
-  ],
-  files: [
-    {
-      format: 'typescript/export-definition',
-      destination: `${upperCaseFirstCharacter(outputFile)}DesignTokens.d.ts`,
-      filter: isSource,
-      options: {
-        tokenTypesPath: './src/types/',
-        moduleName: `${upperCaseFirstCharacter(outputFile)}DesignTokens`,
-      },
-    },
-  ],
-})

package/src/platforms/typescript.ts

@@ -1,30 +0,0 @@
-import type StyleDictionary from 'style-dictionary'
-import type {PlatformInitializer} from '../types/PlatformInitializer'
-import {isSource} from '../filters'
-
-export const typescript: PlatformInitializer = (outputFile, prefix, buildPath): StyleDictionary.Platform => ({
-  prefix,
-  buildPath,
-  transforms: [
-    'color/hex',
-    'color/hexMix',
-    'color/hexAlpha',
-    'dimension/rem',
-    'shadow/css',
-    'border/css',
-    'typography/css',
-    'fontFamily/css',
-    'fontWeight/number',
-  ],
-  options: {
-    showFileHeader: false,
-    basePxFontSize: 16,
-  },
-  files: [
-    {
-      format: 'javascript/esm',
-      destination: outputFile,
-      filter: isSource,
-    },
-  ],
-})

package/src/schemas/alphaValue.ts

@@ -1,12 +0,0 @@
-import {z} from 'zod'
-import {schemaErrorMessage} from '../utilities/schemaErrorMessage'
-
-export const alphaValue = z.any().refine(
-  value => typeof value === 'number' && value >= 0 && value <= 1,
-  value => ({
-    message: schemaErrorMessage(
-      `Invalid alpha value: "${value}" (${typeof value})`,
-      'Alpha value must be a number between 0 and 1.',
-    ),
-  }),
-)

package/src/schemas/baseToken.ts

@@ -1,8 +0,0 @@
-import {z} from 'zod'
-
-export const baseToken = z
-  .object({
-    $description: z.string().optional(),
-    deprecated: z.union([z.string(), z.boolean()]).optional(),
-  })
-  .strict()

package/src/schemas/borderToken.ts

@@ -1,19 +0,0 @@
-import {z} from 'zod'
-import {baseToken} from './baseToken'
-import {referenceValue} from './referenceValue'
-import {colorHexValue} from './colorHexValue'
-import {dimensionValue} from './dimensionValue'
-import {tokenType} from './tokenType'
-
-export const borderValue = z.object({
-  color: z.union([colorHexValue, referenceValue]),
-  style: z.enum(['solid', 'dashed', 'dotted', 'double', 'groove', 'ridge', 'outset', 'inset']),
-  width: z.union([dimensionValue, referenceValue]),
-})
-
-export const borderToken = baseToken
-  .extend({
-    $value: z.union([borderValue, referenceValue]),
-    $type: tokenType('border'),
-  })
-  .strict()

package/src/schemas/collections.ts

@@ -1,49 +0,0 @@
-import {z} from 'zod'
-import {joinFriendly} from '../utilities/joinFriendly'
-import {schemaErrorMessage} from '../utilities/schemaErrorMessage'
-
-type Collections =
-  | 'base/color/light'
-  | 'base/color/light-high-contrast'
-  | 'base/color/dark'
-  | 'base/color/dark-dimmed'
-  | 'base/color/dark-high-contrast'
-  | 'base/typography'
-  | 'mode'
-  | 'pattern/mode'
-  | 'base/size'
-  | 'functional/size'
-  | 'pattern/size'
-  | 'typography'
-
-export const collection = (collections: Collections[]) => {
-  return z.string().refine(
-    value => collections.includes(value as Collections),
-    value => ({
-      message: schemaErrorMessage(
-        `Invalid collection: "${value}"`,
-        `Valid collections are ${joinFriendly(collections)}`,
-      ),
-    }),
-  )
-}
-
-type Modes =
-  | 'light'
-  | 'dark'
-  | 'dark dimmed'
-  | 'light high contrast'
-  | 'dark high contrast'
-  | 'light colorblind'
-  | 'dark colorblind'
-  | 'light tritanopia'
-  | 'dark tritanopia'
-
-export const mode = (modes: Modes[]) => {
-  return z.string().refine(
-    value => modes.includes(value as Modes),
-    value => ({
-      message: schemaErrorMessage(`Invalid mode: "${value}"`, `Valid modes are ${joinFriendly(modes)}`),
-    }),
-  )
-}

package/src/schemas/colorHexValue.ts

@@ -1,18 +0,0 @@
-import {z} from 'zod'
-import {schemaErrorMessage} from '../utilities/schemaErrorMessage'
-
-const colorHex3RegEx = '^#[0-9a-f]{3}$'
-const colorHex6RegEx = '^#[0-9a-f]{6}$'
-const colorHex8RegEx = '^#[0-9a-f]{8}$'
-
-const colorHexRegex = new RegExp(`(${colorHex3RegEx})|(${colorHex6RegEx})|(${colorHex8RegEx})`, 'i')
-
-export const colorHexValue = z.string().refine(
-  color => colorHexRegex.test(color),
-  color => ({
-    message: schemaErrorMessage(
-      `Invalid color: "${color}"`,
-      'Color must be a hex string or a reference to a color token.',
-    ),
-  }),
-)

package/src/schemas/colorToken.ts

@@ -1,50 +0,0 @@
-import {z} from 'zod'
-import {colorHexValue} from './colorHexValue'
-import {referenceValue} from './referenceValue'
-import {alphaValue} from './alphaValue'
-import {baseToken} from './baseToken'
-import {collection, mode} from './collections'
-import {scopes} from './scopes'
-import {tokenType} from './tokenType'
-
-export const colorToken = baseToken
-  .extend({
-    $value: z.union([colorHexValue, referenceValue]),
-    $type: tokenType('color'),
-    alpha: alphaValue.optional().nullable(),
-    mix: z
-      .object({
-        color: z.string(),
-        weight: z.number().min(0).max(1),
-      })
-      .nullable()
-      .optional(),
-    $extensions: z
-      .object({
-        'org.primer.figma': z.object({
-          collection: collection([
-            'base/color/light',
-            'base/color/light-high-contrast',
-            'base/color/dark',
-            'base/color/dark-dimmed',
-            'base/color/dark-high-contrast',
-            'mode',
-            'pattern/mode',
-          ]).optional(),
-          mode: mode([
-            'light',
-            'dark',
-            'dark dimmed',
-            'light high contrast',
-            'dark high contrast',
-            'light colorblind',
-            'dark colorblind',
-            'light tritanopia',
-            'dark tritanopia',
-          ]).optional(),
-          scopes: scopes(['all', 'bgColor', 'fgColor', 'borderColor', 'effectColor']).optional(),
-        }),
-      })
-      .optional(),
-  })
-  .strict()

package/src/schemas/designToken.ts

@@ -1,38 +0,0 @@
-import {z} from 'zod'
-import {tokenName} from './tokenName'
-import {stringToken} from './stringToken'
-import {viewportRangeToken} from './viewportRangeToken'
-import {numberToken} from './numberToken'
-import {fontWeightToken} from './fontWeightToken'
-import {typographyToken} from './typographyToken'
-import {borderToken} from './borderToken'
-import {dimensionToken} from './dimensionToken'
-import {colorToken} from './colorToken'
-import {fontFamilyToken} from './fontFamilyToken'
-import {shadowToken} from './shadowToken'
-import {durationToken} from './durationToken'
-
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore: TODO: fix this
-export const designToken = z.record(
-  tokenName,
-  z.lazy((): z.ZodTypeAny => {
-    return z.union([
-      z.discriminatedUnion('$type', [
-        colorToken,
-        dimensionToken,
-        shadowToken,
-        borderToken,
-        fontFamilyToken,
-        fontWeightToken,
-        typographyToken,
-        viewportRangeToken,
-        numberToken,
-        durationToken,
-        stringToken,
-      ]),
-      // referenceToken,
-      designToken,
-    ])
-  }),
-)