@primer/primitives 7.16.0 → 7.17.0-rc.1685583f

package/src/tokens/removed/color.json

@@ -0,0 +1,421 @@
+{
+  "auto.black": null,
+  "auto.white": null,
+  "auto.gray.0": null,
+  "auto.gray.1": null,
+  "auto.gray.2": null,
+  "auto.gray.3": null,
+  "auto.gray.4": null,
+  "auto.gray.5": null,
+  "auto.gray.6": null,
+  "auto.gray.7": null,
+  "auto.gray.8": null,
+  "auto.gray.9": null,
+  "auto.blue.0": null,
+  "auto.blue.1": null,
+  "auto.blue.2": null,
+  "auto.blue.3": null,
+  "auto.blue.4": null,
+  "auto.blue.5": null,
+  "auto.blue.6": null,
+  "auto.blue.7": null,
+  "auto.blue.8": null,
+  "auto.blue.9": null,
+  "auto.green.0": null,
+  "auto.green.1": null,
+  "auto.green.2": null,
+  "auto.green.3": null,
+  "auto.green.4": null,
+  "auto.green.5": null,
+  "auto.green.6": null,
+  "auto.green.7": null,
+  "auto.green.8": null,
+  "auto.green.9": null,
+  "auto.yellow.0": null,
+  "auto.yellow.1": null,
+  "auto.yellow.2": null,
+  "auto.yellow.3": null,
+  "auto.yellow.4": null,
+  "auto.yellow.5": null,
+  "auto.yellow.6": null,
+  "auto.yellow.7": null,
+  "auto.yellow.8": null,
+  "auto.yellow.9": null,
+  "auto.orange.0": null,
+  "auto.orange.1": null,
+  "auto.orange.2": null,
+  "auto.orange.3": null,
+  "auto.orange.4": null,
+  "auto.orange.5": null,
+  "auto.orange.6": null,
+  "auto.orange.7": null,
+  "auto.orange.8": null,
+  "auto.orange.9": null,
+  "auto.red.0": null,
+  "auto.red.1": null,
+  "auto.red.2": null,
+  "auto.red.3": null,
+  "auto.red.4": null,
+  "auto.red.5": null,
+  "auto.red.6": null,
+  "auto.red.7": null,
+  "auto.red.8": null,
+  "auto.red.9": null,
+  "auto.purple.0": null,
+  "auto.purple.1": null,
+  "auto.purple.2": null,
+  "auto.purple.3": null,
+  "auto.purple.4": null,
+  "auto.purple.5": null,
+  "auto.purple.6": null,
+  "auto.purple.7": null,
+  "auto.purple.8": null,
+  "auto.purple.9": null,
+  "auto.pink.0": null,
+  "auto.pink.1": null,
+  "auto.pink.2": null,
+  "auto.pink.3": null,
+  "auto.pink.4": null,
+  "auto.pink.5": null,
+  "auto.pink.6": null,
+  "auto.pink.7": null,
+  "auto.pink.8": null,
+  "auto.pink.9": null,
+  "text.primary": "fg.default",
+  "text.secondary": "fg.muted",
+  "text.tertiary": "fg.muted",
+  "text.placeholder": "fg.subtle",
+  "text.disabled": "fg.muted",
+  "text.inverse": "fg.onEmphasis",
+  "text.link": "accent.fg",
+  "text.danger": "danger.fg",
+  "text.success": "success.fg",
+  "text.warning": "attention.fg",
+  "text.white": null,
+  "icon.primary": "fg.default",
+  "icon.secondary": "fg.muted",
+  "icon.tertiary": "fg.muted",
+  "icon.info": "accent.fg",
+  "icon.danger": "danger.fg",
+  "icon.success": "success.fg",
+  "icon.warning": "attention.fg",
+  "border.primary": "border.default",
+  "border.secondary": "border.muted",
+  "border.tertiary": "border.default",
+  "border.overlay": "border.default",
+  "border.inverse": "fg.onEmphasis",
+  "border.info": "accent.emphasis",
+  "border.danger": "danger.emphasis",
+  "border.success": "success.emphasis",
+  "border.warning": "attention.emphasis",
+  "bg.canvas": "canvas.default",
+  "bg.canvasMobile": null,
+  "bg.canvasInverse": "neutral.emphasis",
+  "bg.canvasInset": "canvas.inset",
+  "bg.primary": "canvas.default",
+  "bg.secondary": "canvas.subtle",
+  "bg.tertiary": "canvas.subtle",
+  "bg.overlay": "canvas.overlay",
+  "bg.backdrop": "primer.canvas.backdrop",
+  "bg.info": "accent.subtle",
+  "bg.infoInverse": "accent.emphasis",
+  "bg.danger": "danger.subtle",
+  "bg.dangerInverse": "danger.emphasis",
+  "bg.success": "success.subtle",
+  "bg.successInverse": "success.emphasis",
+  "bg.warning": "attention.subtle",
+  "bg.warningInverse": "attention.emphasis",
+  "shadow.highlight": "primer.shadow.highlight",
+  "shadow.inset": "primer.shadow.inset",
+  "state.hover.primaryBg": "accent.emphasis",
+  "state.hover.primaryBorder": "accent.emphasis",
+  "state.hover.primaryText": "fg.onEmphasis",
+  "state.hover.primaryIcon": "fg.onEmphasis",
+  "state.hover.secondaryBg": "neutral.subtle",
+  "state.hover.secondaryBorder": "neutral.subtle",
+  "state.selected.primaryBg": "accent.emphasis",
+  "state.selected.primaryBorder": "accent.emphasis",
+  "state.selected.primaryText": "fg.onEmphasis",
+  "state.selected.primaryIcon": "fg.onEmphasis",
+  "state.focus.border": "accent.emphasis",
+  "state.focus.shadow": "primer.shadow.focus",
+  "fade.fg10": null,
+  "fade.fg15": null,
+  "fade.fg30": null,
+  "fade.fg50": null,
+  "fade.fg70": null,
+  "fade.fg85": null,
+  "fade.black10": null,
+  "fade.black15": null,
+  "fade.black30": null,
+  "fade.black50": null,
+  "fade.black70": null,
+  "fade.black85": null,
+  "fade.white10": null,
+  "fade.white15": null,
+  "fade.white30": null,
+  "fade.white50": null,
+  "fade.white70": null,
+  "fade.white85": null,
+  "alert.info.text": "fg.default",
+  "alert.info.icon": "accent.fg",
+  "alert.info.bg": "accent.subtle",
+  "alert.info.border": "accent.muted",
+  "alert.warn.text": "fg.default",
+  "alert.warn.icon": "attention.fg",
+  "alert.warn.bg": "attention.subtle",
+  "alert.warn.border": "attention.muted",
+  "alert.error.text": "fg.default",
+  "alert.error.icon": "danger.fg",
+  "alert.error.bg": "danger.subtle",
+  "alert.error.border": "danger.muted",
+  "alert.success.text": "fg.default",
+  "alert.success.icon": "success.fg",
+  "alert.success.bg": "success.subtle",
+  "alert.success.border": "success.muted",
+  "autocomplete.shadow": "shadow.medium",
+  "autocomplete.rowBorder": "border.muted",
+  "blankslate.icon": "fg.muted",
+  "counter.text": "fg.default",
+  "counter.bg": "neutral.muted",
+  "counter.primary.text": "fg.onEmphasis",
+  "counter.primary.bg": "neutral.emphasis",
+  "counter.secondary.text": "fg.muted",
+  "counter.secondary.bg": "neutral.subtle",
+  "box.blueBorder": "accent.muted",
+  "box.rowYellowBg": "attention.subtle",
+  "box.rowBlueBg": "accent.subtle",
+  "box.headerBlueBg": "accent.subtle",
+  "box.headerBlueBorder": "accent.muted",
+  "box.borderInfo": "accent.muted",
+  "box.bgInfo": "accent.subtle",
+  "box.borderWarning": "attention.muted",
+  "box.bgWarning": "attention.subtle",
+  "branchName.text": "fg.muted",
+  "branchName.icon": "fg.muted",
+  "branchName.bg": "accent.subtle",
+  "branchName.link.text": "accent.fg",
+  "branchName.link.icon": "accent.fg",
+  "branchName.link.bg": "accent.subtle",
+  "markdown.codeBg": "neutral.muted",
+  "markdown.frameBorder": "border.default",
+  "markdown.blockquoteBorder": "border.default",
+  "markdown.tableBorder": "border.default",
+  "markdown.tableTrBorder": "border.muted",
+  "filterItem.barBg": "neutral.subtle",
+  "hiddenTextExpander.bg": "neutral.muted",
+  "hiddenTextExpander.bgHover": "accent.muted",
+  "dragAndDrop.border": "border.default",
+  "uploadEnabled.border": "border.default",
+  "uploadEnabled.borderFocused": "accent.emphasis",
+  "previewableCommentForm.border": "border.default",
+  "verifiedBadge.text": "success.fg",
+  "verifiedBadge.bg": "canvas.default",
+  "verifiedBadge.border": "border.default",
+  "socialCount.bg": "canvas.default",
+  "tooltip.text": "fg.onEmphasis",
+  "tooltip.bg": "neutral.emphasisPlus",
+  "filesExplorerIcon": "accent.fg",
+  "hlAuthorBg": "accent.subtle",
+  "hlAuthorBorder": "accent.muted",
+  "logoSubdued": "neutral.muted",
+  "discussionBorder": "success.muted",
+  "discussionBgSuccess": "success.emphasis",
+  "actionsWorkflowTableStickyBg": "primer.canvas.sticky",
+  "repoLanguageColorBorder": "primer.border.contrast",
+  "codeSelectionBg": "accent.muted",
+  "highlight.text": "fg.default",
+  "highlight.bg": "attention.subtle",
+  "blob.lineHighlightBg": "attention.subtle",
+  "blob.lineHighlightBorder": "attention.muted",
+  "topicTag.text": "accent.fg",
+  "topicTag.bg": "accent.subtle",
+  "topicTag.hoverBg": "accent.emphasis",
+  "topicTag.activeBg": "accent.subtle",
+  "footerInvertocat.octicon": "fg.subtle",
+  "footerInvertocat.octiconHover": "fg.muted",
+  "dropdown.shadow": "shadow.large",
+  "label.border": "border.default",
+  "label.primary.text": "fg.default",
+  "label.primary.border": "neutral.emphasis",
+  "label.secondary.text": "fg.muted",
+  "label.secondary.border": "border.default",
+  "label.info.text": "accent.fg",
+  "label.info.border": "accent.emphasis",
+  "label.success.text": "success.fg",
+  "label.success.border": "success.emphasis",
+  "label.warning.text": "attention.fg",
+  "label.warning.border": "attention.emphasis",
+  "label.danger.text": "danger.fg",
+  "label.danger.border": "danger.emphasis",
+  "label.orange.text": "severe.fg",
+  "label.orange.border": "severe.emphasis",
+  "input.bg": "canvas.default",
+  "input.contrastBg": "canvas.inset",
+  "input.border": "border.default",
+  "input.shadow": "primer.shadow.inset",
+  "input.disabledBorder": "border.default",
+  "input.warningBorder": "attention.emphasis",
+  "input.errorBorder": "danger.emphasis",
+  "input.tooltip.success.text": "fg.default",
+  "input.tooltip.success.bg": "success.subtle",
+  "input.tooltip.success.border": "success.muted",
+  "input.tooltip.warning.text": "fg.default",
+  "input.tooltip.warning.bg": "attention.subtle",
+  "input.tooltip.warning.border": "attention.muted",
+  "input.tooltip.error.text": "fg.default",
+  "input.tooltip.error.bg": "danger.subtle",
+  "input.tooltip.error.border": "danger.muted",
+  "toast.text": "fg.default",
+  "toast.bg": "canvas.default",
+  "toast.border": "border.default",
+  "toast.shadow": "shadow.large",
+  "toast.icon": "fg.onEmphasis",
+  "toast.iconBg": "accent.emphasis",
+  "toast.iconBorder": null,
+  "toast.success.text": "fg.default",
+  "toast.success.border": "border.default",
+  "toast.success.icon": "fg.onEmphasis",
+  "toast.success.iconBg": "success.emphasis",
+  "toast.success.iconBorder": null,
+  "toast.warning.text": "fg.default",
+  "toast.warning.border": "border.default",
+  "toast.warning.icon": "fg.default",
+  "toast.warning.iconBg": "attention.emphasis",
+  "toast.warning.iconBorder": null,
+  "toast.danger.text": "fg.default",
+  "toast.danger.border": "border.default",
+  "toast.danger.icon": "fg.onEmphasis",
+  "toast.danger.iconBg": "danger.emphasis",
+  "toast.danger.iconBorder": null,
+  "toast.loading.text": "fg.default",
+  "toast.loading.border": "border.default",
+  "toast.loading.icon": "fg.onEmphasis",
+  "toast.loading.iconBg": "neutral.emphasis",
+  "toast.loading.iconBorder": null,
+  "timeline.text": "fg.muted",
+  "timeline.badgeSuccessBorder": null,
+  "timeline.targetBadgeBorder": "accent.emphasis",
+  "timeline.targetBadgeShadow": "accent.muted",
+  "diffstat.neutralBg": "neutral.muted",
+  "diffstat.neutralBorder": "border.subtle",
+  "diffstat.deletionBg": "danger.emphasis",
+  "diff.addition.text": "fg.default",
+  "diff.addition.bg": "success.subtle",
+  "diff.addition.border": "success.muted",
+  "diff.deletion.text": "fg.default",
+  "diff.deletion.bg": "danger.subtle",
+  "diff.deletion.border": "danger.muted",
+  "diff.change.text": "attention.fg",
+  "diff.change.bg": "attention.subtle",
+  "diff.change.border": "attention.muted",
+  "mergeBox.successIconBg": "success.emphasis",
+  "mergeBox.successIconText": "fg.onEmphasis",
+  "mergeBox.successIconBorder": null,
+  "mergeBox.successIndicatorBg": "success.emphasis",
+  "mergeBox.successIndicatorBorder": null,
+  "mergeBox.mergedIconBg": "done.emphasis",
+  "mergeBox.mergedIconText": "fg.onEmphasis",
+  "mergeBox.mergedIconBorder": null,
+  "mergeBox.mergedBoxBorder": "done.emphasis",
+  "mergeBox.neutralIconBg": "neutral.emphasis",
+  "mergeBox.neutralIconText": "fg.onEmphasis",
+  "mergeBox.neutralIconBorder": null,
+  "mergeBox.neutralIndicatorBg": "neutral.emphasis",
+  "mergeBox.neutralIndicatorBorder": null,
+  "mergeBox.warningIconBg": "attention.emphasis",
+  "mergeBox.warningIconText": "fg.onEmphasis",
+  "mergeBox.warningIconBorder": null,
+  "mergeBox.warningBoxBorder": "attention.emphasis",
+  "mergeBox.warningMergeHighlight": null,
+  "mergeBox.errorIconBg": "danger.emphasis",
+  "mergeBox.errorIconText": "fg.onEmphasis",
+  "mergeBox.errorIconBorder": null,
+  "mergeBox.errorIndicatorBg": "danger.emphasis",
+  "mergeBox.errorIndicatorBorder": null,
+  "underlinenav.border": null,
+  "underlinenav.borderActive": "primer.border.active",
+  "underlinenav.text": "fg.default",
+  "underlinenav.textHover": "fg.default",
+  "underlinenav.textActive": "fg.default",
+  "underlinenav.iconHover": "fg.subtle",
+  "underlinenav.iconActive": "fg.default",
+  "underlinenav.counterText": "fg.default",
+  "underlinenav.counterBg": "neutral.muted",
+  "selectMenu.borderSecondary": "border.muted",
+  "selectMenu.shadow": "shadow.large",
+  "selectMenu.backdropBg": "primer.canvas.backdrop",
+  "sidenav.borderActive": "primer.border.active",
+  "menu.headingText": "fg.default",
+  "menu.borderActive": "primer.border.active",
+  "project.cardBg": "canvas.overlay",
+  "prState.draft.text": "fg.onEmphasis",
+  "prState.draft.bg": "neutral.emphasis",
+  "prState.draft.border": null,
+  "prState.open.text": "fg.onEmphasis",
+  "prState.open.bg": "success.emphasis",
+  "prState.open.border": null,
+  "prState.merged.text": "fg.onEmphasis",
+  "prState.merged.bg": "done.emphasis",
+  "prState.merged.border": null,
+  "prState.closed.text": "fg.onEmphasis",
+  "prState.closed.bg": "danger.emphasis",
+  "prState.closed.border": null,
+  "diffBlob.numText": "fg.subtle",
+  "diffBlob.numHoverText": "fg.default",
+  "diffBlob.addition.numHoverText": "fg.default",
+  "diffBlob.deletion.numHoverText": "fg.default",
+  "diffBlob.hunk.text": "fg.muted",
+  "diffBlob.hunk.lineBg": "accent.subtle",
+  "diffBlob.emptyBlockBg": "neutral.subtle",
+  "diffBlob.selectedLineHighlightBg": "attention.subtle",
+  "diffBlob.selectedLineHighlightBorder": "attention.muted",
+  "diffBlob.expander.hoverIcon": "fg.onEmphasis",
+  "diffBlob.expander.hoverBg": "accent.emphasis",
+  "diffBlob.commentButton.icon": "fg.onEmphasis",
+  "diffBlob.commentButton.bg": "accent.emphasis",
+  "diffBlob.commentButton.gradientBg": null,
+  "globalNav.logo": null,
+  "globalNav.bg": null,
+  "globalNav.text": null,
+  "globalNav.icon": null,
+  "globalNav.inputBg": null,
+  "globalNav.inputBorder": null,
+  "globalNav.inputIcon": null,
+  "globalNav.inputPlaceholder": null,
+  "introShelf.gradientLeft": "accent.subtle",
+  "introShelf.gradientRight": "success.subtle",
+  "introShelf.gradientIn": "canvas.default",
+  "introShelf.gradientOut": null,
+  "mktg.success": null,
+  "mktg.info": null,
+  "mktg.bgShadeGradient.top": null,
+  "mktg.bgShadeGradient.bottom": null,
+  "mktg.btn.bg.top": null,
+  "mktg.btn.bg.bottom": null,
+  "mktg.btn.bgOverlay.top": null,
+  "mktg.btn.bgOverlay.bottom": null,
+  "mktg.btn.text": null,
+  "mktg.btn.primary.bg.top": null,
+  "mktg.btn.primary.bg.bottom": null,
+  "mktg.btn.primary.bgOverlay.top": null,
+  "mktg.btn.primary.bgOverlay.bottom": null,
+  "mktg.btn.primary.text": null,
+  "mktg.btn.enterprise.bg.top": null,
+  "mktg.btn.enterprise.bg.bottom": null,
+  "mktg.btn.enterprise.bgOverlay.top": null,
+  "mktg.btn.enterprise.bgOverlay.bottom": null,
+  "mktg.btn.enterprise.text": null,
+  "mktg.btn.outline.text": null,
+  "mktg.btn.outline.border": null,
+  "mktg.btn.outline.hover.text": null,
+  "mktg.btn.outline.hover.border": null,
+  "mktg.btn.outline.focus.border": null,
+  "mktg.btn.outline.focus.borderInset": null,
+  "mktg.btn.dark.text": null,
+  "mktg.btn.dark.border": null,
+  "mktg.btn.dark.hover.text": null,
+  "mktg.btn.dark.hover.border": null,
+  "mktg.btn.dark.focus.border": null,
+  "mktg.btn.dark.focus.borderInset": null
+}

package/src/transformers/borderToCss.ts

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

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

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

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

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

package/src/transformers/colorToRgbaFloat.ts

@@ -0,0 +1,45 @@
+import {toHex} from 'color2k'
+import {isColor} from '../filters'
+import type StyleDictionary from 'style-dictionary'
+import {getTokenValue} from './utilities/getTokenValue'
+import {rgbaFloatToHex} from './utilities/rgbaFloatToHex'
+import mix from './utilities/mix'
+import {hexToRgbaFloat} from './utilities/hexToRgbaFloat'
+import {isRgbaFloat} from './utilities/isRgbaFloat'
+
+const toRgbaFloat = (token: StyleDictionary.TransformedToken, alpha?: number) => {
+  let tokenValue = getTokenValue(token)
+  let tokenMixColor = token.mix?.color
+  // get hex value from color string
+  if (isRgbaFloat(tokenValue)) {
+    tokenValue = rgbaFloatToHex(tokenValue, false)
+  }
+  if (tokenMixColor && isRgbaFloat(tokenMixColor)) {
+    tokenMixColor = rgbaFloatToHex(tokenMixColor, false)
+  }
+  let hex = toHex(tokenValue)
+  // mix color with mix color and weight
+  if (token.mix && token.mix.color && token.mix.weight) {
+    hex = toHex(mix(tokenValue, tokenMixColor, token.mix.weight))
+  }
+  // return color as RgbaFloat
+  return hexToRgbaFloat(hex, alpha)
+}
+
+/**
+ * @description converts color tokens rgba float with values from 0 - 1
+ * @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 `rgb` float object
+ */
+export const colorToRgbaFloat: StyleDictionary.Transform = {
+  type: `value`,
+  transitive: true,
+  matcher: isColor,
+  transformer: (token: StyleDictionary.TransformedToken) => {
+    // skip if value is already rgb float
+    if (isRgbaFloat(token.value) && !('mix' in token) && !('alpha' in token)) return token.value
+    // convert hex or rgb values to rgba float
+    return toRgbaFloat(token, token.alpha)
+  },
+}

package/src/transformers/dimensionToPixelUnitless.ts

@@ -0,0 +1,60 @@
+import {isDimension} from '../filters'
+import type StyleDictionary from 'style-dictionary'
+import type {Platform} from 'style-dictionary'
+
+/**
+ * @description base font size from options or 16
+ * @param options
+ * @returns number
+ */
+const getBasePxFontSize = (options?: Platform): number => (options && options.basePxFontSize) || 16
+
+/**
+ * @description checks if token value has a specific unit
+ * @param value token value
+ * @param unit unit string like px or value
+ * @returns boolean
+ */
+const hasUnit = (value: string | number, unit: string): boolean => {
+  if (typeof value === 'number') {
+    return false
+  }
+
+  return value.indexOf(unit) > -1
+}
+
+/**
+ * @description converts dimension tokens value to pixel value without unit, ignores `em` as they are relative to the font size of the parent element
+ * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
+ * @matcher matches all tokens of $type `dimension`
+ * @transformer returns a float number
+ */
+export const dimensionToPixelUnitless: StyleDictionary.Transform = {
+  type: `value`,
+  transitive: true,
+  matcher: isDimension,
+  transformer: (token: StyleDictionary.TransformedToken, options?: Platform) => {
+    const baseFont = getBasePxFontSize(options)
+    const floatVal = parseFloat(token.value)
+
+    if (isNaN(floatVal)) {
+      throw new Error(
+        `Invalid dimension token: '${token.name}: ${token.value}' is not valid and cannot be transform to 'float' \n`,
+      )
+    }
+
+    if (floatVal === 0) {
+      return 0
+    }
+
+    if (hasUnit(token.value, 'rem')) {
+      return floatVal * baseFont
+    }
+
+    if (hasUnit(token.value, 'px')) {
+      return floatVal
+    }
+
+    return token.value
+  },
+}