@primer/primitives 10.2.0 → 10.3.0-rc.22c9c6cf

package/dist/build/formats/cssCustomMedia.js

@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
     });
 };
 import { format } from 'prettier';
-import { fileHeader } from 'style-dictionary/utils';
+import { fileHeader, sortByName } from 'style-dictionary/utils';
 /**
  * @description Converts `StyleDictionary.dictionary.tokens` to css with @custom-media
  * @param arguments [FormatterArguments](https://github.com/amzn/style-dictionary/blob/main/types/Format.d.ts)
@@ -18,7 +18,7 @@ export const cssCustomMedia = (_a) => __awaiter(void 0, [_a], void 0, function*
     // add file header
     const output = [yield fileHeader({ file })];
     // add single theme css
-    dictionary.allTokens.map(({ name, $value }) => {
+    dictionary.allTokens.sort(sortByName).map(({ name, $value }) => {
         output.push(`@custom-media --${name} ${$value};`);
     });
     // return prettified

package/dist/build/formats/jsonOneDimensional.js

@@ -1,5 +1,6 @@
 import { format } from 'prettier';
 import { jsonToFlat } from './utilities/jsonToFlat.js';
+import { sortByName } from 'style-dictionary/utils';
 /**
  * @description Takes a style dictionary token dictionary and converts it to a one dimensional json object.
  * @param FormatFnArguments
@@ -9,7 +10,7 @@ import { jsonToFlat } from './utilities/jsonToFlat.js';
 export const jsonOneDimensional = ({ dictionary, file: _file, options }) => {
     // option to allow verbose output (object) or just the value
     const { outputVerbose, propertyConversion } = options;
-    const tokens = jsonToFlat(dictionary.allTokens, outputVerbose);
+    const tokens = jsonToFlat(dictionary.allTokens.sort(sortByName), outputVerbose);
     if (propertyConversion === undefined) {
         //
         const output = JSON.stringify(tokens, null, 2);

package/dist/build/platforms/css.js

@@ -1,4 +1,5 @@
 import { isFromFile, isSource } from '../filters/index.js';
+import { outputReferencesTransformed, outputReferencesFilter } from 'style-dictionary/utils';
 const getCssSelectors = (outputFile) => {
     // check for dark in the beginning of the output filename
     const lastSlash = outputFile.lastIndexOf('/');
@@ -49,7 +50,7 @@ export const css = (outputFile, prefix, buildPath, options) => {
                         'src/tokens/functional/size/size-coarse.json5',
                         'src/tokens/functional/size/size-fine.json5',
                     ]),
-                options: Object.assign({ showFileHeader: false, outputReferences: false, descriptions: false, queries: getCssSelectors(outputFile) }, options === null || options === void 0 ? void 0 : options.options),
+                options: Object.assign({ showFileHeader: false, outputReferences: (token, platformOptions) => outputReferencesFilter(token, platformOptions) && outputReferencesTransformed(token, platformOptions), descriptions: false, queries: getCssSelectors(outputFile) }, options === null || options === void 0 ? void 0 : options.options),
             },
             {
                 destination: `${outputFile}`,
@@ -61,7 +62,7 @@ export const css = (outputFile, prefix, buildPath, options) => {
                         'src/tokens/functional/size/size-coarse.json5',
                         'src/tokens/functional/size/size-fine.json5',
                     ]),
-                options: Object.assign({ showFileHeader: false, descriptions: false }, options === null || options === void 0 ? void 0 : options.options),
+                options: Object.assign({ showFileHeader: false, outputReferences: (token, platformOptions) => outputReferencesFilter(token, platformOptions) && outputReferencesTransformed(token, platformOptions), descriptions: false }, options === null || options === void 0 ? void 0 : options.options),
             },
             {
                 destination: `${outputFile}`,
@@ -69,6 +70,7 @@ export const css = (outputFile, prefix, buildPath, options) => {
                 filter: token => isSource(token) && (options === null || options === void 0 ? void 0 : options.themed) !== true && token.$type === 'custom-viewportRange',
                 options: {
                     showFileHeader: false,
+                    outputReferences: (token, platformOptions) => outputReferencesFilter(token, platformOptions) && outputReferencesTransformed(token, platformOptions),
                 },
             },
             {
@@ -81,6 +83,7 @@ export const css = (outputFile, prefix, buildPath, options) => {
                     ]),
                 options: {
                     descriptions: false,
+                    outputReferences: (token, platformOptions) => outputReferencesFilter(token, platformOptions) && outputReferencesTransformed(token, platformOptions),
                     showFileHeader: false,
                     queries: [
                         {

package/dist/build/platforms/figma.js

@@ -24,40 +24,44 @@ const validFigmaToken = (token, options) => __awaiter(void 0, void 0, void 0, fu
     // is a color or dimension type
     return validTypes.includes(token.$type);
 });
-export const figma = (outputFile, prefix, buildPath, options) => ({
-    prefix,
-    buildPath,
-    preprocessors: ['themeOverrides'],
-    transforms: [
-        'color/rgbaFloat',
-        'fontFamily/figma',
-        'float/pixelUnitless',
-        'dimension/pixelUnitless',
-        // 'border/figma',
-        // 'typography/figma',
-        'fontWeight/number',
-        'figma/attributes',
-        'name/pathToFigma',
-    ],
-    options: Object.assign(Object.assign({ basePxFontSize: 16, fontFamilies: {
-            'fontStack/system': 'SF Pro Text',
-            'fontStack/sansSerif': 'SF Pro Text',
-            'fontStack/sansSerifDisplay': 'SF Pro Display',
-            'fontStack/monospace': 'SF Mono',
-        } }, options), { themeOverrides: {
-            theme: options === null || options === void 0 ? void 0 : options.theme,
-        } }),
-    files: [
-        {
-            destination: outputFile,
-            filter: (token, config) => {
-                return validFigmaToken(token, config);
+export const figma = (outputFile, prefix, buildPath, options = {}) => {
+    const { theme } = options;
+    const figmaTheme = ((theme === null || theme === void 0 ? void 0 : theme[0]) || '').replaceAll('-', ' ');
+    return {
+        prefix,
+        buildPath,
+        preprocessors: ['themeOverrides'],
+        transforms: [
+            'color/rgbaFloat',
+            'fontFamily/figma',
+            'float/pixelUnitless',
+            'dimension/pixelUnitless',
+            // 'border/figma',
+            // 'typography/figma',
+            'fontWeight/number',
+            'figma/attributes',
+            'name/pathToFigma',
+        ],
+        options: Object.assign(Object.assign({ basePxFontSize: 16, fontFamilies: {
+                'fontStack/system': 'SF Pro Text',
+                'fontStack/sansSerif': 'SF Pro Text',
+                'fontStack/sansSerifDisplay': 'SF Pro Display',
+                'fontStack/monospace': 'SF Mono',
+            } }, options), { theme: figmaTheme, themeOverrides: {
+                theme: options.theme,
+            } }),
+        files: [
+            {
+                destination: outputFile,
+                filter: (token, config) => {
+                    return validFigmaToken(token, config);
+                },
+                format: `json/figma`,
+                options: {
+                    outputReferences: true,
+                    theme: figmaTheme,
+                },
             },
-            format: `json/figma`,
-            options: {
-                outputReferences: true,
-                theme: options === null || options === void 0 ? void 0 : options.theme,
-            },
-        },
-    ],
-});
+        ],
+    };
+};

package/dist/build/preprocessors/themeOverrides.js

@@ -1,19 +1,22 @@
 import { transformTokens } from './utilities/transformTokens.js';
+import { asArray } from '../utilities/asArray.js';
 export const themeOverrides = {
     name: 'themeOverrides',
     preprocessor: (dictionary, config) => {
         var _a, _b, _c, _d, _e, _f;
         const extensionProp = ((_b = (_a = config.options) === null || _a === void 0 ? void 0 : _a.themeOverrides) === null || _b === void 0 ? void 0 : _b.extensionProp) || 'org.primer.overrides';
         const valueProp = ((_d = (_c = config.options) === null || _c === void 0 ? void 0 : _c.themeOverrides) === null || _d === void 0 ? void 0 : _d.valueProp) || '$value';
-        const currentTheme = (_f = (_e = config.options) === null || _e === void 0 ? void 0 : _e.themeOverrides) === null || _f === void 0 ? void 0 : _f.theme;
+        const [currentTheme, fallbackTheme] = asArray((_f = (_e = config.options) === null || _e === void 0 ? void 0 : _e.themeOverrides) === null || _f === void 0 ? void 0 : _f.theme);
         const tokens = transformTokens(dictionary, token => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d, _e;
             // return early if no theme value is set
-            if (!currentTheme || !((_a = token.$extensions) === null || _a === void 0 ? void 0 : _a[extensionProp]) || !((_b = token.$extensions) === null || _b === void 0 ? void 0 : _b[extensionProp][currentTheme])) {
+            if (!currentTheme ||
+                !((_a = token.$extensions) === null || _a === void 0 ? void 0 : _a[extensionProp]) ||
+                (!((_b = token.$extensions) === null || _b === void 0 ? void 0 : _b[extensionProp][currentTheme]) && !((_c = token.$extensions) === null || _c === void 0 ? void 0 : _c[extensionProp][fallbackTheme]))) {
                 return token;
             }
             // get override
-            const override = (_c = token.$extensions) === null || _c === void 0 ? void 0 : _c[extensionProp][currentTheme];
+            const override = ((_d = token.$extensions) === null || _d === void 0 ? void 0 : _d[extensionProp][currentTheme]) || ((_e = token.$extensions) === null || _e === void 0 ? void 0 : _e[extensionProp][fallbackTheme]);
             // token an theme value exist
             return Object.assign(Object.assign({}, token), (typeof override === 'object' ? override : { [valueProp]: override }));
         });

package/dist/build/schemas/collections.d.ts

@@ -1,6 +1,6 @@
 import { z } from 'zod';
 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 declare const collection: (collections: Collections[]) => z.ZodEffects<z.ZodString, string, string>;
-type Modes = 'light' | 'dark' | 'dark dimmed' | 'light high contrast' | 'dark high contrast' | 'light colorblind' | 'dark colorblind' | 'light tritanopia' | 'dark tritanopia';
+type Modes = 'light' | 'dark' | 'dark dimmed' | 'light high contrast' | 'dark high contrast' | 'light protanopia deuteranopia' | 'dark protanopia deuteranopia' | 'light tritanopia' | 'dark tritanopia';
 export declare const mode: (modes: Modes[]) => z.ZodEffects<z.ZodString, string, string>;
 export {};