Merge branch 'main' into contrast-poc

Author: langermank

.changeset/quiet-cougars-glow.md

@@ -18,7 +18,7 @@ export default {
 
 export const HighchartsAccentColors = () => {
   const data = getTokensByName(colorTokens, 'data')
-    .filter(({type}) => type === 'color')
+    .filter(({type, name}) => type === 'color' && !name.includes('muted'))
     .map(token => {
       return {
         id: token.name,
@@ -64,12 +64,10 @@ export const HighchartsAccentColors = () => {
   )
 }
 
-export const HighchartsGradients = () => {
+export const HighchartsMutedColors = () => {
   const data = getTokensByName(colorTokens, 'data')
-    .filter(({type}) => type === 'gradient')
+    .filter(({type, name}) => type === 'color' && name.includes('muted'))
     .map(token => {
-      console.log(token)
-
       return {
         id: token.name,
         ...token,
@@ -78,7 +76,7 @@ export const HighchartsGradients = () => {
   return (
     <Table.Container>
       <Table.Title as="h1" id="pattern">
-        Data visualization gradients
+        Data visualization colors
       </Table.Title>
       <DataTable
         aria-labelledby="pattern"
@@ -89,7 +87,7 @@ export const HighchartsGradients = () => {
             field: 'name',
             rowHeader: true,
             renderCell: row => {
-              return <ColorTokenSwatch gradientStops={row.value} />
+              return <ColorTokenSwatch bgColor={row.name} />
             },
           },
           {
@@ -105,7 +103,7 @@ export const HighchartsGradients = () => {
             field: 'value',
             rowHeader: true,
             renderCell: row => {
-              return <p>{row.value.map(({color, position}) => `${color} ${position * 100}%`).join(', ')}</p>
+              return <p>{row.value}</p>
             },
           },
         ]}

.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-data-auburn-color-gradientStop-1-linux.png

@@ -8,8 +8,6 @@ export type ColorTokenSwatchProps = {
   shadowColor?: string
   outlineColor?: string
   selectionColor?: string
-  gradientStops?: Record<string, number>[]
-  gradientAngle?: number
   size?: 'default' | 'large'
 }
 
@@ -20,8 +18,6 @@ export function ColorTokenSwatch({
   shadowColor,
   outlineColor,
   selectionColor,
-  gradientStops,
-  gradientAngle = 180,
   size = 'default',
 }: ColorTokenSwatchProps) {
   return (
@@ -33,14 +29,6 @@ export function ColorTokenSwatch({
       )}
       {borderColor && <div style={{borderColor: `var(--${borderColor})`}} className="ColorTokenSwatch-border"></div>}
       {bgColor && <div style={{backgroundColor: `var(--${bgColor})`}} className="ColorTokenSwatch-bg"></div>}
-      {gradientStops && (
-        <div
-          style={{
-            background: `linear-gradient(${gradientAngle}deg, ${gradientStops.map(({color, position}) => `${color} ${position * 100}%`).join(', ')})`,
-          }}
-          className="ColorTokenSwatch-bg"
-        ></div>
-      )}
       {shadowColor && <div style={{boxShadow: `var(--${shadowColor})`}} className="ColorTokenSwatch-shadow"></div>}
       {outlineColor && (
         <div style={{outlineColor: `var(--${outlineColor})`}} className="ColorTokenSwatch-outline"></div>

.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-data-auburn-color-gradientStop-2-linux.png

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "10.5.0",
+  "version": "10.6.0",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "type": "module",
   "files": [

.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-data-blue-color-gradientStop-1-linux.png

@@ -9,7 +9,7 @@ export default defineConfig({
   testDir: 'e2e',
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 2 : 0,
+  retries: 0,
   workers: process.env.CI ? 1 : undefined,
   reporter: [
     ['line'],

.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-data-blue-color-gradientStop-2-linux.png

@@ -12,3 +12,4 @@ export {isNumber} from './isNumber.js'
 export {isShadow} from './isShadow.js'
 export {isSource} from './isSource.js'
 export {isTypography} from './isTypography.js'
+export {isTransition} from './isTransition.js'

.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-data-brown-color-gradientStop-1-linux.png

@@ -0,0 +1,22 @@
+import {getMockToken} from '../test-utilities/index.js'
+import {isTransition} from './isTransition.js'
+
+describe('Filter: isTransition', () => {
+  it('returns true if $type property is `transition`', () => {
+    expect(isTransition(getMockToken({$type: 'transition'}))).toStrictEqual(true)
+  })
+
+  it('returns false if $type property is not `transition`', () => {
+    expect(isTransition(getMockToken({$type: 'pumpkin'}))).toStrictEqual(false)
+  })
+
+  it('returns false if $type property is missing', () => {
+    expect(isTransition(getMockToken({alpha: 0.4}))).toStrictEqual(false)
+  })
+
+  it('returns false if $type property is falsy', () => {
+    expect(isTransition(getMockToken({$type: false}))).toStrictEqual(false)
+    expect(isTransition(getMockToken({$type: undefined}))).toStrictEqual(false)
+    expect(isTransition(getMockToken({$type: null}))).toStrictEqual(false)
+  })
+})

.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-data-brown-color-gradientStop-2-linux.png

@@ -0,0 +1,10 @@
+import type {TransformedToken} from 'style-dictionary/types'
+
+/**
+ * @description Checks if token is of $type `transition`
+ * @param token [TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts)
+ * @returns boolean
+ */
+export const isTransition = (token: TransformedToken): boolean => {
+  return token.$type === 'transition'
+}

.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-data-coral-color-gradientStop-1-linux.png

@@ -35,6 +35,7 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
       'shadow/css',
       'border/css',
       'typography/css',
+      'transition/css',
       'fontFamily/css',
       'fontWeight/number',
       'gradient/css',

.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-data-coral-color-gradientStop-2-linux.png

@@ -42,10 +42,10 @@ export const figma: PlatformInitializer = (outputFile, prefix, buildPath, option
     options: {
       basePxFontSize: 16,
       fontFamilies: {
-        'fontStack/system': 'SF Pro Text',
-        'fontStack/sansSerif': 'SF Pro Text',
-        'fontStack/sansSerifDisplay': 'SF Pro Display',
-        'fontStack/monospace': 'SF Mono',
+        system: 'SF Pro Text',
+        sansSerif: 'SF Pro Text',
+        sansSerifDisplay: 'SF Pro Display',
+        monospace: 'SF Mono',
       },
       // should this object be spread here?
       ...options,

.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-data-gray-color-gradientStop-1-linux.png

@@ -25,6 +25,7 @@ import {
   dimensionToRemPxArray,
   floatToPixel,
   floatToPixelUnitless,
+  transitionToCss,
 } from './transformers/index.js'
 import {
   javascriptCommonJs,
@@ -152,6 +153,8 @@ PrimerStyleDictionary.registerTransform(borderToCss)
 
 PrimerStyleDictionary.registerTransform(typographyToCss)
 
+PrimerStyleDictionary.registerTransform(transitionToCss)
+
 PrimerStyleDictionary.registerTransform(fontWeightToNumber)
 
 PrimerStyleDictionary.registerTransform(fontFamilyToCss)

.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-data-gray-color-gradientStop-2-linux.png

@@ -13,6 +13,7 @@ import {shadowToken} from './shadowToken.js'
 import {durationToken} from './durationToken.js'
 import {cubicBezierToken} from './cubicBezierToken.js'
 import {gradientToken} from './gradientToken.js'
+import {transitionToken} from './transitionToken.js'
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore: TODO: fix this
@@ -34,6 +35,7 @@ export const designToken = z.record(
         numberToken,
         durationToken,
         stringToken,
+        transitionToken,
       ]),
       designToken,
     ])

.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-data-green-color-gradientStop-1-linux.png

@@ -20,6 +20,7 @@ export const dimensionToken = baseToken
             'gap',
             'radius',
             'borderColor',
+            'borderWidth',
             'effectFloat',
             'fontSize',
             'letterSpacing',

.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-data-green-color-gradientStop-2-linux.png

@@ -6,10 +6,12 @@ const validScopes: ValidScope[] = [
   'bgColor',
   'fgColor',
   'borderColor',
+  'borderWidth',
   'size',
   'gap',
   'radius',
   'effectColor',
+  'effectFloat',
   'opacity',
   'fontFamily',
   'fontStyle',
@@ -28,10 +30,12 @@ describe('Schema: scopes', () => {
     expect(scopeSchema.safeParse(['bgColor']).success).toStrictEqual(true)
     expect(scopeSchema.safeParse(['fgColor']).success).toStrictEqual(true)
     expect(scopeSchema.safeParse(['borderColor']).success).toStrictEqual(true)
+    expect(scopeSchema.safeParse(['borderWidth']).success).toStrictEqual(true)
     expect(scopeSchema.safeParse(['size']).success).toStrictEqual(true)
     expect(scopeSchema.safeParse(['gap']).success).toStrictEqual(true)
     expect(scopeSchema.safeParse(['radius']).success).toStrictEqual(true)
     expect(scopeSchema.safeParse(['effectColor']).success).toStrictEqual(true)
+    expect(scopeSchema.safeParse(['effectFloat']).success).toStrictEqual(true)
     expect(scopeSchema.safeParse(['opacity']).success).toStrictEqual(true)
     expect(scopeSchema.safeParse(['fontFamily']).success).toStrictEqual(true)
     expect(scopeSchema.safeParse(['fontStyle']).success).toStrictEqual(true)
@@ -47,10 +51,12 @@ describe('Schema: scopes', () => {
         'bgColor',
         'fgColor',
         'borderColor',
+        'borderWidth',
         'size',
         'gap',
         'radius',
         'effectColor',
+        'effectFloat',
         'opacity',
         'fontFamily',
         'fontStyle',

.playwright/snapshots/storybook.test.ts-snapshots/storybook-all-color-swatches-dark-colorblind-data-lemon-color-gradientStop-1-linux.png

@@ -0,0 +1,20 @@
+import {z} from 'zod'
+import {baseToken} from './baseToken.js'
+import {referenceValue} from './referenceValue.js'
+import {durationToken} from './durationToken.js'
+import {cubicBezierToken} from './cubicBezierToken.js'
+import {tokenType} from './tokenType.js'
+
+export const transitionToken = baseToken
+  .extend({
+    $value: z.union([
+      z.object({
+        duration: z.union([durationToken.shape.$value, referenceValue]),
+        timingFunction: z.union([cubicBezierToken.shape.$value, referenceValue]),
+        delay: z.union([durationToken.shape.$value, referenceValue]).optional(),
+      }),
+      referenceValue,
+    ]),
+    $type: tokenType('transition'),
+  })
+  .strict()