@primer/primitives 7.16.0 → 7.17.0-rc.086cd658

package/src/transformers/utilities/isRgbaFloat.ts

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

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

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

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

package/src/types/BorderTokenValue.d.ts

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

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

package/src/types/PlatformInitializer.d.ts

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

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

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, '')
+}