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

package/src/types/ShadowTokenValue.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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

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

package/src/types/SizePx.d.ts

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

package/src/types/SizeRem.d.ts

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

package/src/types/StyleDictionaryConfigGenerator.d.ts

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

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

@@ -0,0 +1,12 @@
+/**
+ * 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

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

@@ -0,0 +1,21 @@
+/* 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/getFlag.ts

@@ -0,0 +1,12 @@
+/**
+ * Get the value of a flag from the command line
+ * @param flag name of the flag to get
+ * @param prefix default `--` but can be changed to `-` the part to the left of the flag name
+ * @returns null if flag is not found, otherwise the value of the flag or the flag name if the flag has no value
+ * @example `getFlag('--silent')` returns `null` if `--silent` is not found, `--silent` if `--silent` is found with no value, and `true` if `--silent=true` is found
+ */
+export const getFlag = (flag: string, prefix = '--') => {
+  flag = `${prefix}${flag.replace(prefix, '')}`
+  const index = process.argv.findIndex(arg => arg === flag || arg.startsWith(`${flag}=`))
+  return index === -1 ? null : process.argv[index].replace(`${flag}=`, '')
+}

package/src/utilities/index.ts

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

package/src/utilities/joinFriendly.ts

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

package/src/utilities/schemaErrorMessage.ts

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

package/src/utilities/toCamelCase.ts

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

@@ -0,0 +1,27 @@
+/**
+ * @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
+}

package/src/utilities/upperCaseFirstCharacter.ts

@@ -0,0 +1,10 @@
+/**
+ * upperCaseFirstCharacter
+ * @scope custom implementation should only be used within `name path to ...` transformer
+ * @description changes first letter to uppercase but keeps the rest of the word as is
+ * @param string
+ * @returns string
+ */
+export const upperCaseFirstCharacter = ([firstLetter, ...restOfWord]: string): string => {
+  return firstLetter.toUpperCase() + restOfWord.join('')
+}

package/src/utils-v1.ts

@@ -0,0 +1,36 @@
+import {lighten as _lighten, transparentize, darken as _darken} from 'color2k'
+import deepmerge from 'deepmerge'
+import _get from 'lodash/get'
+import isFunction from 'lodash/isFunction'
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Value = string | ((obj: any) => string)
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function resolveValue(value: Value, obj: any): string {
+  return isFunction(value) ? resolveValue(value(obj), obj) : value
+}
+
+export function merge(...objects: object[]) {
+  return deepmerge.all(objects, {arrayMerge: (target, source) => source})
+}
+
+export function get(path: string) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return (obj: any) => _get(obj, path)
+}
+
+export function alpha(value: Value, amount: number) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return (obj: any) => transparentize(resolveValue(value, obj), 1 - amount).replace(/ /g, '')
+}
+
+export function lighten(value: Value, amount: number) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return (obj: any) => _lighten(resolveValue(value, obj), amount).replace(/ /g, '')
+}
+
+export function darken(value: Value, amount: number) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return (obj: any) => _darken(resolveValue(value, obj), amount).replace(/ /g, '')
+}

package/tokens-v2-private/css/tokens/base/size/size.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:38:52 GMT
+ * Generated on Thu, 18 Apr 2024 08:59:04 GMT
  */
 
 :root {

package/tokens-v2-private/css/tokens/base/typography/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:38:52 GMT
+ * Generated on Thu, 18 Apr 2024 08:59:04 GMT
  */
 
 :root {

package/tokens-v2-private/css/tokens/functional/size/border.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:38:52 GMT
+ * Generated on Thu, 18 Apr 2024 08:59:04 GMT
  */
 
 :root {

package/tokens-v2-private/css/tokens/functional/size/breakpoints.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:38:52 GMT
+ * Generated on Thu, 18 Apr 2024 08:59:04 GMT
  */
 
 :root {

package/tokens-v2-private/css/tokens/functional/size/size-coarse.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:38:52 GMT
+ * Generated on Thu, 18 Apr 2024 08:59:04 GMT
  */
 
 

package/tokens-v2-private/css/tokens/functional/size/size-fine.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:38:52 GMT
+ * Generated on Thu, 18 Apr 2024 08:59:04 GMT
  */
 
 

package/tokens-v2-private/css/tokens/functional/size/size.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:38:52 GMT
+ * Generated on Thu, 18 Apr 2024 08:59:04 GMT
  */
 
 :root {

package/tokens-v2-private/css/tokens/functional/typography/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:38:52 GMT
+ * Generated on Thu, 18 Apr 2024 08:59:04 GMT
  */
 
 :root {

package/tokens-v2-private/js/module/tokens/base/size/size.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:38:52 GMT
+ * Generated on Thu, 18 Apr 2024 08:59:04 GMT
  */
 
 module.exports = {

package/tokens-v2-private/js/module/tokens/base/typography/typography.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:38:52 GMT
+ * Generated on Thu, 18 Apr 2024 08:59:04 GMT
  */
 
 module.exports = {

package/tokens-v2-private/js/module/tokens/functional/size/border.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:38:52 GMT
+ * Generated on Thu, 18 Apr 2024 08:59:04 GMT
  */
 
 module.exports = {

package/tokens-v2-private/js/module/tokens/functional/size/breakpoints.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:38:52 GMT
+ * Generated on Thu, 18 Apr 2024 08:59:04 GMT
  */
 
 module.exports = {

package/tokens-v2-private/js/module/tokens/functional/size/size-coarse.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:38:52 GMT
+ * Generated on Thu, 18 Apr 2024 08:59:04 GMT
  */
 
 module.exports = {

package/tokens-v2-private/js/module/tokens/functional/size/size-fine.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:38:52 GMT
+ * Generated on Thu, 18 Apr 2024 08:59:04 GMT
  */
 
 module.exports = {

package/tokens-v2-private/js/module/tokens/functional/size/size.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:38:52 GMT
+ * Generated on Thu, 18 Apr 2024 08:59:04 GMT
  */
 
 module.exports = {

package/tokens-v2-private/js/module/tokens/functional/size/viewport.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:38:52 GMT
+ * Generated on Thu, 18 Apr 2024 08:59:04 GMT
  */
 
 module.exports = {

package/tokens-v2-private/js/module/tokens/functional/typography/typography.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:38:52 GMT
+ * Generated on Thu, 18 Apr 2024 08:59:04 GMT
  */
 
 module.exports = {

package/tokens-v2-private/js/tokens/base/size/size.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:38:52 GMT
+ * Generated on Thu, 18 Apr 2024 08:59:04 GMT
  */
 
 export const BaseSize4 = "0.25rem";

package/tokens-v2-private/js/tokens/base/typography/typography.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:38:52 GMT
+ * Generated on Thu, 18 Apr 2024 08:59:04 GMT
  */
 
 export const BaseTextWeightLight = "300";

package/tokens-v2-private/js/tokens/functional/size/border.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:38:52 GMT
+ * Generated on Thu, 18 Apr 2024 08:59:04 GMT
  */
 
 export const PrimerBorderInsetThin = "inset 0 0 0 max(1px, 0.0625rem)";

package/tokens-v2-private/js/tokens/functional/size/breakpoints.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:38:52 GMT
+ * Generated on Thu, 18 Apr 2024 08:59:04 GMT
  */
 
 export const PrimerBreakpointXsmall = "20rem";

package/tokens-v2-private/js/tokens/functional/size/size-coarse.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:38:52 GMT
+ * Generated on Thu, 18 Apr 2024 08:59:04 GMT
  */
 
 export const PrimerControlMinTargetAuto = "2.75rem";

package/tokens-v2-private/js/tokens/functional/size/size-fine.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:38:52 GMT
+ * Generated on Thu, 18 Apr 2024 08:59:04 GMT
  */
 
 export const PrimerControlMinTargetAuto = "1rem";

package/tokens-v2-private/js/tokens/functional/size/size.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:38:52 GMT
+ * Generated on Thu, 18 Apr 2024 08:59:04 GMT
  */
 
 export const PrimerControlMinTargetFine = "1rem";

package/tokens-v2-private/js/tokens/functional/size/viewport.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:38:52 GMT
+ * Generated on Thu, 18 Apr 2024 08:59:04 GMT
  */
 
 export const PrimerViewportRangeNarrow = "(max-width: calc(48rem - 0.02px))";

package/tokens-v2-private/js/tokens/functional/typography/typography.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:38:52 GMT
+ * Generated on Thu, 18 Apr 2024 08:59:04 GMT
  */
 
 export const PrimerFontStackSystem = "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'";

package/tokens-v2-private/scss/tokens/base/size/size.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 09 Apr 2024 14:38:52 GMT
+// Generated on Thu, 18 Apr 2024 08:59:04 GMT
 
 $base-size-128: 8rem;
 $base-size-112: 7rem;

package/tokens-v2-private/scss/tokens/base/typography/typography.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 09 Apr 2024 14:38:52 GMT
+// Generated on Thu, 18 Apr 2024 08:59:04 GMT
 
 $base-text-weight-semibold: 600;
 $base-text-weight-medium: 500;

package/tokens-v2-private/scss/tokens/functional/size/border.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 09 Apr 2024 14:38:52 GMT
+// Generated on Thu, 18 Apr 2024 08:59:04 GMT
 
 $primer-borderRadius-full: 100vh;
 $primer-borderRadius-large: 0.75rem;

package/tokens-v2-private/scss/tokens/functional/size/breakpoints.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 09 Apr 2024 14:38:52 GMT
+// Generated on Thu, 18 Apr 2024 08:59:04 GMT
 
 $primer-breakpoint-xxlarge: 90rem;
 $primer-breakpoint-xlarge: 80rem;

package/tokens-v2-private/scss/tokens/functional/size/size-coarse.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 09 Apr 2024 14:38:52 GMT
+// Generated on Thu, 18 Apr 2024 08:59:04 GMT
 
 $primer-controlStack-medium-gap-auto: $base-size-12;
 $primer-controlStack-small-gap-auto: $base-size-16;

package/tokens-v2-private/scss/tokens/functional/size/size-fine.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 09 Apr 2024 14:38:52 GMT
+// Generated on Thu, 18 Apr 2024 08:59:04 GMT
 
 $primer-controlStack-medium-gap-auto: $base-size-8;
 $primer-controlStack-small-gap-auto: $base-size-8;

package/tokens-v2-private/scss/tokens/functional/size/size.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 09 Apr 2024 14:38:52 GMT
+// Generated on Thu, 18 Apr 2024 08:59:04 GMT
 
 $primer-controlStack-large-gap-spacious: $base-size-12;
 $primer-controlStack-large-gap-condensed: $base-size-8;

package/tokens-v2-private/scss/tokens/functional/size/viewport.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 09 Apr 2024 14:38:52 GMT
+// Generated on Thu, 18 Apr 2024 08:59:04 GMT
 
 $primer-viewportRange-landscape: (orientation: landscape);
 $primer-viewportRange-portrait: (orientation: portrait);

package/tokens-v2-private/scss/tokens/functional/typography/typography.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 09 Apr 2024 14:38:52 GMT
+// Generated on Thu, 18 Apr 2024 08:59:04 GMT
 
 $primer-text-codeInline-size: 0.9285em;
 $primer-text-codeBlock-lineHeight: calc(20/13);

package/tokens-v2-private/ts/tokens/base/size/size.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:38:52 GMT
+ * Generated on Thu, 18 Apr 2024 08:59:04 GMT
  */
 
 

package/tokens-v2-private/ts/tokens/base/size/size.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:38:52 GMT
+ * Generated on Thu, 18 Apr 2024 08:59:04 GMT
  */
 
 

package/tokens-v2-private/ts/tokens/base/typography/typography.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:38:52 GMT
+ * Generated on Thu, 18 Apr 2024 08:59:04 GMT
  */
 
 

package/tokens-v2-private/ts/tokens/base/typography/typography.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:38:52 GMT
+ * Generated on Thu, 18 Apr 2024 08:59:04 GMT
  */
 
 

package/tokens-v2-private/ts/tokens/functional/size/border.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:38:52 GMT
+ * Generated on Thu, 18 Apr 2024 08:59:04 GMT
  */
 
 

package/tokens-v2-private/ts/tokens/functional/size/border.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:38:52 GMT
+ * Generated on Thu, 18 Apr 2024 08:59:04 GMT
  */
 
 

package/tokens-v2-private/ts/tokens/functional/size/breakpoints.d.ts

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:38:52 GMT
+ * Generated on Thu, 18 Apr 2024 08:59:04 GMT
  */
 
 

package/tokens-v2-private/ts/tokens/functional/size/breakpoints.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 09 Apr 2024 14:38:52 GMT
+ * Generated on Thu, 18 Apr 2024 08:59:04 GMT
  */