@primer/primitives 10.0.0-rc.fd912e08 → 10.0.0

package/dist/build/platforms/css.js

@@ -0,0 +1,96 @@
+import { isFromFile, isSource } from '../filters/index.js';
+const getCssSelectors = (outputFile) => {
+    // check for dark in the beginning of the output filename
+    const lastSlash = outputFile.lastIndexOf('/');
+    const outputBasename = outputFile.substring(lastSlash + 1, outputFile.indexOf('.'));
+    const themeName = outputBasename.replace(/-/g, '_');
+    const mode = outputBasename.substring(0, 4) === 'dark' ? 'dark' : 'light';
+    return [
+        {
+            selector: `[data-color-mode="${mode}"][data-${mode}-theme="${themeName}"], [data-color-mode="${mode}"][data-${mode}-theme="${themeName}"] ::backdrop, [data-color-mode="auto"][data-light-theme="${themeName}"], [data-color-mode="auto"][data-light-theme="${themeName}"] ::backdrop`,
+        },
+        {
+            query: '@media (prefers-color-scheme: dark)',
+            selector: `[data-color-mode="auto"][data-dark-theme="${themeName}"], [data-color-mode="auto"][data-dark-theme="${themeName}"] ::backdrop`,
+        },
+    ];
+};
+export const css = (outputFile, prefix, buildPath, options) => {
+    return {
+        prefix,
+        buildPath,
+        transforms: [
+            'name/pathToKebabCase',
+            'color/hex',
+            'color/hexMix',
+            'cubicBezier/css',
+            'dimension/rem',
+            'duration/css',
+            'shadow/css',
+            'border/css',
+            'typography/css',
+            'fontFamily/css',
+            'fontWeight/number',
+        ],
+        options: {
+            basePxFontSize: 16,
+        },
+        files: [
+            {
+                destination: `${outputFile}`,
+                format: `css/advanced`,
+                filter: token => isSource(token) &&
+                    (options === null || options === void 0 ? void 0 : options.themed) === true &&
+                    token.$type !== 'custom-viewportRange' &&
+                    !isFromFile(token, [
+                        'src/tokens/functional/size/size-coarse.json',
+                        'src/tokens/functional/size/size-fine.json',
+                    ]),
+                options: Object.assign({ showFileHeader: false, outputReferences: false, descriptions: false, queries: getCssSelectors(outputFile) }, options === null || options === void 0 ? void 0 : options.options),
+            },
+            {
+                destination: `${outputFile}`,
+                format: `css/advanced`,
+                filter: token => isSource(token) &&
+                    (options === null || options === void 0 ? void 0 : options.themed) !== true &&
+                    token.$type !== 'custom-viewportRange' &&
+                    !isFromFile(token, [
+                        'src/tokens/functional/size/size-coarse.json',
+                        'src/tokens/functional/size/size-fine.json',
+                    ]),
+                options: Object.assign({ showFileHeader: false, descriptions: false }, options === null || options === void 0 ? void 0 : options.options),
+            },
+            {
+                destination: `${outputFile}`,
+                format: `css/customMedia`,
+                filter: token => isSource(token) && (options === null || options === void 0 ? void 0 : options.themed) !== true && token.$type === 'custom-viewportRange',
+                options: {
+                    showFileHeader: false,
+                },
+            },
+            {
+                destination: `${outputFile}`,
+                format: `css/advanced`,
+                filter: token => isSource(token) &&
+                    isFromFile(token, [
+                        'src/tokens/functional/size/size-coarse.json',
+                        'src/tokens/functional/size/size-fine.json',
+                    ]),
+                options: {
+                    descriptions: false,
+                    showFileHeader: false,
+                    queries: [
+                        {
+                            query: '@media (pointer: fine)',
+                            matcher: (token) => token.filePath.includes('size-fine'),
+                        },
+                        {
+                            query: '@media (pointer: coarse)',
+                            matcher: (token) => token.filePath.includes('size-coarse'),
+                        },
+                    ],
+                },
+            },
+        ],
+    };
+};

package/dist/build/platforms/deprecatedJson.d.ts

@@ -0,0 +1,2 @@
+import type { PlatformInitializer } from '../types/PlatformInitializer.js';
+export declare const deprecatedJson: PlatformInitializer;

package/dist/build/platforms/deprecatedJson.js

@@ -0,0 +1,13 @@
+import { isDeprecated } from '../filters/index.js';
+export const deprecatedJson = (outputFile, prefix, buildPath) => ({
+    prefix,
+    buildPath,
+    transforms: ['name/pathToDotNotation', 'json/deprecated'],
+    files: [
+        {
+            destination: outputFile,
+            format: `json/flat`,
+            filter: isDeprecated,
+        },
+    ],
+});

package/dist/build/platforms/docJson.d.ts

@@ -0,0 +1,2 @@
+import type { PlatformInitializer } from '../types/PlatformInitializer.js';
+export declare const docJson: PlatformInitializer;

package/dist/build/platforms/docJson.js

@@ -0,0 +1,35 @@
+import { isSource } from '../filters/index.js';
+export const docJson = (outputFile, prefix, buildPath) => ({
+    prefix,
+    buildPath,
+    transforms: [
+        'name/pathToKebabCase',
+        'color/hex',
+        'color/hexMix',
+        'dimension/rem',
+        'shadow/css',
+        'border/css',
+        'typography/css',
+        'fontFamily/css',
+        'fontWeight/number',
+    ],
+    options: {
+        basePxFontSize: 16,
+        propertyConversion: {
+            $value: 'value',
+            $type: 'type',
+            $description: 'description',
+        },
+    },
+    files: [
+        {
+            destination: outputFile,
+            format: `json/one-dimensional`,
+            filter: isSource,
+            options: {
+                outputReferences: false,
+                outputVerbose: true,
+            },
+        },
+    ],
+});

package/dist/build/platforms/fallbacks.d.ts

@@ -0,0 +1,2 @@
+import type { PlatformInitializer } from '../types/PlatformInitializer.js';
+export declare const fallbacks: PlatformInitializer;

package/dist/build/platforms/fallbacks.js

@@ -0,0 +1,30 @@
+import { isSource } from '../filters/index.js';
+export const fallbacks = (outputFile, prefix, buildPath) => ({
+    prefix,
+    buildPath,
+    transforms: [
+        'name/pathToKebabCase',
+        'color/hex',
+        'color/hexMix',
+        'dimension/rem',
+        'shadow/css',
+        'border/css',
+        'typography/css',
+        'fontFamily/css',
+        'fontWeight/number',
+    ],
+    options: {
+        basePxFontSize: 16,
+    },
+    files: [
+        {
+            destination: outputFile,
+            format: `json/postCss-fallback`,
+            filter: isSource,
+            options: {
+                outputReferences: false,
+                outputVerbose: true,
+            },
+        },
+    ],
+});

package/dist/build/platforms/figma.d.ts

@@ -0,0 +1,2 @@
+import type { PlatformInitializer } from '../types/PlatformInitializer.js';
+export declare const figma: PlatformInitializer;

package/dist/build/platforms/figma.js

@@ -0,0 +1,60 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { isSource } from '../filters/index.js';
+const validFigmaToken = (token, options) => __awaiter(void 0, void 0, void 0, function* () {
+    const valueProp = options.usesDtcg ? '$value' : 'value';
+    const validTypes = ['color', 'dimension', 'shadow', 'fontWeight', 'fontFamily', 'number'];
+    // is a siource token, not an included one
+    if (!isSource(token) || !token.$type)
+        return false;
+    if (`${token[valueProp]}`.substring(token[valueProp].length - 2) === 'em')
+        return false;
+    // has a collection attribute
+    if (!('$extensions' in token) ||
+        !('org.primer.figma' in token.$extensions) ||
+        !('collection' in token.$extensions['org.primer.figma']))
+        return false;
+    // is a color or dimension type
+    return validTypes.includes(token.$type);
+});
+export const figma = (outputFile, prefix, buildPath, options) => ({
+    prefix,
+    buildPath,
+    transforms: [
+        'color/rgbaFloat',
+        'fontFamily/figma',
+        'float/pixelUnitless',
+        'dimension/pixelUnitless',
+        // 'border/figma',
+        // 'typography/figma',
+        'fontWeight/number',
+        'figma/attributes',
+        'name/pathToFigma',
+    ],
+    options: 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),
+    files: [
+        {
+            destination: outputFile,
+            filter: (token, config) => {
+                return validFigmaToken(token, config);
+            },
+            format: `json/figma`,
+            options: {
+                outputReferences: true,
+                mode: options === null || options === void 0 ? void 0 : options.mode,
+            },
+        },
+    ],
+});

package/dist/build/platforms/index.d.ts

@@ -0,0 +1,10 @@
+export { css } from './css.js';
+export { deprecatedJson } from './deprecatedJson.js';
+export { docJson } from './docJson.js';
+export { fallbacks } from './fallbacks.js';
+export { figma } from './figma.js';
+export { javascript } from './javascript.js';
+export { json } from './json.js';
+export { styleLint } from './styleLint.js';
+export { typeDefinitions } from './typeDefinitions.js';
+export { typescript } from './typescript.js';

package/dist/build/platforms/index.js

@@ -0,0 +1,10 @@
+export { css } from './css.js';
+export { deprecatedJson } from './deprecatedJson.js';
+export { docJson } from './docJson.js';
+export { fallbacks } from './fallbacks.js';
+export { figma } from './figma.js';
+export { javascript } from './javascript.js';
+export { json } from './json.js';
+export { styleLint } from './styleLint.js';
+export { typeDefinitions } from './typeDefinitions.js';
+export { typescript } from './typescript.js';

package/dist/build/platforms/javascript.d.ts

@@ -0,0 +1,2 @@
+import type { PlatformInitializer } from '../types/PlatformInitializer.js';
+export declare const javascript: PlatformInitializer;

package/dist/build/platforms/javascript.js

@@ -0,0 +1,26 @@
+import { isSource } from '../filters/index.js';
+export const javascript = (outputFile, prefix, buildPath) => ({
+    prefix,
+    buildPath,
+    transforms: [
+        'color/hex',
+        'color/hexMix',
+        'dimension/rem',
+        'shadow/css',
+        'border/css',
+        'typography/css',
+        'fontFamily/css',
+        'fontWeight/number',
+    ],
+    options: {
+        showFileHeader: false,
+        basePxFontSize: 16,
+    },
+    files: [
+        {
+            format: 'javascript/commonJs',
+            destination: outputFile,
+            filter: isSource,
+        },
+    ],
+});

package/dist/build/platforms/json.d.ts

@@ -0,0 +1,2 @@
+import type { PlatformInitializer } from '../types/PlatformInitializer.js';
+export declare const json: PlatformInitializer;

package/dist/build/platforms/json.js

@@ -0,0 +1,28 @@
+import { isSource } from '../filters/index.js';
+export const json = (outputFile, prefix, buildPath) => ({
+    prefix,
+    buildPath,
+    transforms: [
+        'color/hex',
+        'color/hexMix',
+        'dimension/rem',
+        'shadow/css',
+        'border/css',
+        'typography/css',
+        'fontFamily/css',
+        'fontWeight/number',
+    ],
+    options: {
+        basePxFontSize: 16,
+    },
+    files: [
+        {
+            destination: outputFile,
+            filter: isSource,
+            format: `json/nested-prefixed`,
+            options: {
+                outputReferences: false,
+            },
+        },
+    ],
+});

package/dist/build/platforms/styleLint.d.ts

@@ -0,0 +1,2 @@
+import type { PlatformInitializer } from '../types/PlatformInitializer.js';
+export declare const styleLint: PlatformInitializer;

package/dist/build/platforms/styleLint.js

@@ -0,0 +1,30 @@
+import { isSource } from '../filters/index.js';
+export const styleLint = (outputFile, prefix, buildPath) => ({
+    prefix,
+    buildPath,
+    transforms: [
+        'name/pathToKebabCase',
+        'color/hex',
+        'color/hexMix',
+        'dimension/remPxArray',
+        'shadow/css',
+        'border/css',
+        'typography/css',
+        'fontFamily/css',
+        'fontWeight/number',
+    ],
+    options: {
+        basePxFontSize: 16,
+    },
+    files: [
+        {
+            destination: outputFile,
+            format: `json/one-dimensional`,
+            filter: isSource,
+            options: {
+                outputReferences: false,
+                outputVerbose: true,
+            },
+        },
+    ],
+});

package/dist/build/platforms/typeDefinitions.d.ts

@@ -0,0 +1,2 @@
+import type { PlatformInitializer } from '../types/PlatformInitializer.js';
+export declare const typeDefinitions: PlatformInitializer;

package/dist/build/platforms/typeDefinitions.js

@@ -0,0 +1,26 @@
+import { isSource } from '../filters/index.js';
+import { upperCaseFirstCharacter } from '../utilities/index.js';
+export const typeDefinitions = (outputFile, prefix, buildPath) => ({
+    prefix,
+    buildPath,
+    transforms: [
+        'color/hex',
+        'shadow/css',
+        'border/css',
+        'dimension/rem',
+        'typography/css',
+        'fontFamily/css',
+        'fontWeight/number',
+    ],
+    files: [
+        {
+            format: 'typescript/export-definition',
+            destination: `${upperCaseFirstCharacter(outputFile)}DesignTokens.d.ts`,
+            filter: isSource,
+            options: {
+                tokenTypesPath: './src/types/',
+                moduleName: `${upperCaseFirstCharacter(outputFile)}DesignTokens`,
+            },
+        },
+    ],
+});

package/dist/build/platforms/typescript.d.ts

@@ -0,0 +1,2 @@
+import type { PlatformInitializer } from '../types/PlatformInitializer.js';
+export declare const typescript: PlatformInitializer;

package/dist/build/platforms/typescript.js

@@ -0,0 +1,26 @@
+import { isSource } from '../filters/index.js';
+export const typescript = (outputFile, prefix, buildPath) => ({
+    prefix,
+    buildPath,
+    transforms: [
+        'color/hex',
+        'color/hexMix',
+        'dimension/rem',
+        'shadow/css',
+        'border/css',
+        'typography/css',
+        'fontFamily/css',
+        'fontWeight/number',
+    ],
+    options: {
+        showFileHeader: false,
+        basePxFontSize: 16,
+    },
+    files: [
+        {
+            format: 'javascript/esm',
+            destination: outputFile,
+            filter: isSource,
+        },
+    ],
+});

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

@@ -0,0 +1,2 @@
+import { z } from 'zod';
+export declare const alphaValue: z.ZodEffects<z.ZodAny, any, any>;

package/dist/build/schemas/alphaValue.js

@@ -0,0 +1,5 @@
+import { z } from 'zod';
+import { schemaErrorMessage } from '../utilities/index.js';
+export const alphaValue = z.any().refine(value => typeof value === 'number' && value >= 0 && value <= 1, value => ({
+    message: schemaErrorMessage(`Invalid alpha value: "${value}" (${typeof value})`, 'Alpha value must be a number between 0 and 1.'),
+}));

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

@@ -0,0 +1,11 @@
+import { z } from 'zod';
+export declare const baseToken: z.ZodObject<{
+    $description: z.ZodOptional<z.ZodString>;
+    $deprecated: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodBoolean]>>;
+}, "strict", z.ZodTypeAny, {
+    $description?: string | undefined;
+    $deprecated?: string | boolean | undefined;
+}, {
+    $description?: string | undefined;
+    $deprecated?: string | boolean | undefined;
+}>;

package/dist/build/schemas/baseToken.js

@@ -0,0 +1,7 @@
+import { z } from 'zod';
+export const baseToken = z
+    .object({
+    $description: z.string().optional(),
+    $deprecated: z.union([z.string(), z.boolean()]).optional(),
+})
+    .strict();

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

@@ -0,0 +1,51 @@
+import { z } from 'zod';
+export declare const borderValue: z.ZodObject<{
+    color: z.ZodUnion<[z.ZodEffects<z.ZodString, string, string>, z.ZodEffects<z.ZodString, string, string>]>;
+    style: z.ZodEnum<["solid", "dashed", "dotted", "double", "groove", "ridge", "outset", "inset"]>;
+    width: z.ZodUnion<[z.ZodUnion<[z.ZodEffects<z.ZodString, string, string>, z.ZodLiteral<"0">, z.ZodLiteral<0>]>, z.ZodEffects<z.ZodString, string, string>]>;
+}, "strip", z.ZodTypeAny, {
+    width: string | 0;
+    color: string;
+    style: "inset" | "solid" | "dashed" | "dotted" | "double" | "groove" | "ridge" | "outset";
+}, {
+    width: string | 0;
+    color: string;
+    style: "inset" | "solid" | "dashed" | "dotted" | "double" | "groove" | "ridge" | "outset";
+}>;
+export declare const borderToken: z.ZodObject<z.objectUtil.extendShape<{
+    $description: z.ZodOptional<z.ZodString>;
+    $deprecated: z.ZodOptional<z.ZodUnion<[z.ZodString, z.ZodBoolean]>>;
+}, {
+    $value: z.ZodUnion<[z.ZodObject<{
+        color: z.ZodUnion<[z.ZodEffects<z.ZodString, string, string>, z.ZodEffects<z.ZodString, string, string>]>;
+        style: z.ZodEnum<["solid", "dashed", "dotted", "double", "groove", "ridge", "outset", "inset"]>;
+        width: z.ZodUnion<[z.ZodUnion<[z.ZodEffects<z.ZodString, string, string>, z.ZodLiteral<"0">, z.ZodLiteral<0>]>, z.ZodEffects<z.ZodString, string, string>]>;
+    }, "strip", z.ZodTypeAny, {
+        width: string | 0;
+        color: string;
+        style: "inset" | "solid" | "dashed" | "dotted" | "double" | "groove" | "ridge" | "outset";
+    }, {
+        width: string | 0;
+        color: string;
+        style: "inset" | "solid" | "dashed" | "dotted" | "double" | "groove" | "ridge" | "outset";
+    }>, z.ZodEffects<z.ZodString, string, string>]>;
+    $type: z.ZodLiteral<"string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange">;
+}>, "strict", z.ZodTypeAny, {
+    $value: string | {
+        width: string | 0;
+        color: string;
+        style: "inset" | "solid" | "dashed" | "dotted" | "double" | "groove" | "ridge" | "outset";
+    };
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $description?: string | undefined;
+    $deprecated?: string | boolean | undefined;
+}, {
+    $value: string | {
+        width: string | 0;
+        color: string;
+        style: "inset" | "solid" | "dashed" | "dotted" | "double" | "groove" | "ridge" | "outset";
+    };
+    $type: "string" | "number" | "border" | "color" | "fontFamily" | "fontWeight" | "dimension" | "duration" | "shadow" | "typography" | "cubicBezier" | "custom-viewportRange";
+    $description?: string | undefined;
+    $deprecated?: string | boolean | undefined;
+}>;

package/dist/build/schemas/borderToken.js

@@ -0,0 +1,17 @@
+import { z } from 'zod';
+import { baseToken } from './baseToken.js';
+import { referenceValue } from './referenceValue.js';
+import { colorHexValue } from './colorHexValue.js';
+import { dimensionValue } from './dimensionValue.js';
+import { tokenType } from './tokenType.js';
+export const borderValue = z.object({
+    color: z.union([colorHexValue, referenceValue]),
+    style: z.enum(['solid', 'dashed', 'dotted', 'double', 'groove', 'ridge', 'outset', 'inset']),
+    width: z.union([dimensionValue, referenceValue]),
+});
+export const borderToken = baseToken
+    .extend({
+    $value: z.union([borderValue, referenceValue]),
+    $type: tokenType('border'),
+})
+    .strict();

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

@@ -0,0 +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';
+export declare const mode: (modes: Modes[]) => z.ZodEffects<z.ZodString, string, string>;
+export {};

package/dist/build/schemas/collections.js

@@ -0,0 +1,12 @@
+import { z } from 'zod';
+import { joinFriendly, schemaErrorMessage } from '../utilities/index.js';
+export const collection = (collections) => {
+    return z.string().refine(value => collections.includes(value), value => ({
+        message: schemaErrorMessage(`Invalid collection: "${value}"`, `Valid collections are ${joinFriendly(collections)}`),
+    }));
+};
+export const mode = (modes) => {
+    return z.string().refine(value => modes.includes(value), value => ({
+        message: schemaErrorMessage(`Invalid mode: "${value}"`, `Valid modes are ${joinFriendly(modes)}`),
+    }));
+};

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

@@ -0,0 +1,2 @@
+import { z } from 'zod';
+export declare const colorHexValue: z.ZodEffects<z.ZodString, string, string>;

package/dist/build/schemas/colorHexValue.js

@@ -0,0 +1,9 @@
+import { z } from 'zod';
+import { schemaErrorMessage } from '../utilities/index.js';
+const colorHex3RegEx = '^#[0-9a-f]{3}$';
+const colorHex6RegEx = '^#[0-9a-f]{6}$';
+const colorHex8RegEx = '^#[0-9a-f]{8}$';
+const colorHexRegex = new RegExp(`(${colorHex3RegEx})|(${colorHex6RegEx})|(${colorHex8RegEx})`, 'i');
+export const colorHexValue = z.string().refine(color => colorHexRegex.test(color), color => ({
+    message: schemaErrorMessage(`Invalid color: "${color}"`, 'Color must be a hex string or a reference to a color token.'),
+}));