@primer/primitives 10.2.0 → 10.3.0-rc.37645a3a
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/build/formats/cssCustomMedia.js +2 -2
- package/dist/build/formats/jsonOneDimensional.js +2 -1
- package/dist/build/platforms/css.js +5 -2
- package/dist/build/platforms/figma.js +2 -2
- package/dist/build/preprocessors/themeOverrides.js +7 -4
- package/dist/build/schemas/collections.d.ts +1 -1
- package/dist/build/schemas/colorToken.d.ts +471 -65
- package/dist/build/schemas/colorToken.js +18 -15
- package/dist/build/schemas/shadowToken.js +2 -2
- package/dist/build/transformers/colorAlphaToCss.d.ts +1 -1
- package/dist/build/transformers/figmaAttributes.js +2 -1
- package/dist/build/types/styleDictionaryConfigGenerator.d.ts +1 -1
- package/dist/build/utilities/asArray.d.ts +1 -0
- package/dist/build/utilities/asArray.js +1 -0
- package/dist/css/functional/size/border.css +5 -5
- package/dist/css/functional/size/size.css +15 -15
- package/dist/css/functional/size/viewport.css +2 -2
- package/dist/css/functional/themes/dark-colorblind.css +408 -408
- package/dist/css/functional/themes/dark-dimmed.css +390 -390
- package/dist/css/functional/themes/dark-high-contrast.css +412 -412
- package/dist/css/functional/themes/dark-tritanopia.css +406 -406
- package/dist/css/functional/themes/dark.css +416 -416
- package/dist/css/functional/themes/light-colorblind.css +444 -444
- package/dist/css/functional/themes/light-high-contrast.css +438 -438
- package/dist/css/functional/themes/light-tritanopia.css +432 -432
- package/dist/css/functional/themes/light.css +444 -444
- package/dist/css/primitives.css +20 -20
- package/dist/docs/base/motion/motion.json +88 -73
- package/dist/docs/base/size/size.json +94 -75
- package/dist/docs/base/typography/typography.json +14 -10
- package/dist/docs/functional/motion/motion.json +19 -15
- package/dist/docs/functional/size/border.json +139 -125
- package/dist/docs/functional/size/breakpoints.json +31 -25
- package/dist/docs/functional/size/size-coarse.json +13 -10
- package/dist/docs/functional/size/size-fine.json +9 -6
- package/dist/docs/functional/size/size.json +499 -433
- package/dist/docs/functional/size/viewport.json +32 -26
- package/dist/docs/functional/themes/dark-colorblind.json +7175 -6545
- package/dist/docs/functional/themes/dark-dimmed.json +7181 -6473
- package/dist/docs/functional/themes/dark-high-contrast.json +7445 -6789
- package/dist/docs/functional/themes/dark-tritanopia.json +7164 -6498
- package/dist/docs/functional/themes/dark.json +7202 -6494
- package/dist/docs/functional/themes/light-colorblind.json +7096 -6466
- package/dist/docs/functional/themes/light-high-contrast.json +7326 -6660
- package/dist/docs/functional/themes/light-tritanopia.json +7109 -6479
- package/dist/docs/functional/themes/light.json +7159 -6451
- package/dist/docs/functional/typography/typography.json +518 -472
- package/dist/figma/figma.json +3 -3
- package/dist/figma/shadows/dark-colorblind.json +115 -115
- package/dist/figma/shadows/light-colorblind.json +105 -105
- package/dist/figma/themes/dark-colorblind.json +5553 -5553
- package/dist/figma/themes/dark-dimmed.json +5162 -5162
- package/dist/figma/themes/dark-high-contrast.json +4196 -4196
- package/dist/figma/themes/dark-tritanopia.json +5211 -5211
- package/dist/figma/themes/dark.json +5537 -5537
- package/dist/figma/themes/light-colorblind.json +5501 -5501
- package/dist/figma/themes/light-high-contrast.json +4176 -4176
- package/dist/figma/themes/light-tritanopia.json +5077 -5077
- package/dist/figma/themes/light.json +1950 -1950
- package/dist/internalCss/dark-colorblind.css +1148 -1148
- package/dist/internalCss/dark-dimmed.css +1138 -1138
- package/dist/internalCss/dark-high-contrast.css +1154 -1154
- package/dist/internalCss/dark-tritanopia.css +1148 -1148
- package/dist/internalCss/dark.css +1150 -1150
- package/dist/internalCss/light-colorblind.css +1152 -1152
- package/dist/internalCss/light-high-contrast.css +1166 -1166
- package/dist/internalCss/light-tritanopia.css +1156 -1156
- package/dist/internalCss/light.css +1158 -1158
- package/dist/styleLint/base/motion/motion.json +97 -82
- package/dist/styleLint/base/size/size.json +102 -83
- package/dist/styleLint/base/typography/typography.json +16 -12
- package/dist/styleLint/functional/motion/motion.json +22 -18
- package/dist/styleLint/functional/size/border.json +140 -126
- package/dist/styleLint/functional/size/breakpoints.json +32 -26
- package/dist/styleLint/functional/size/size-coarse.json +14 -11
- package/dist/styleLint/functional/size/size-fine.json +10 -7
- package/dist/styleLint/functional/size/size.json +486 -420
- package/dist/styleLint/functional/size/viewport.json +36 -30
- package/dist/styleLint/functional/themes/dark-colorblind.json +6927 -6297
- package/dist/styleLint/functional/themes/dark-dimmed.json +7372 -6664
- package/dist/styleLint/functional/themes/dark-high-contrast.json +7472 -6816
- package/dist/styleLint/functional/themes/dark-tritanopia.json +7051 -6385
- package/dist/styleLint/functional/themes/dark.json +7180 -6472
- package/dist/styleLint/functional/themes/light-colorblind.json +7042 -6412
- package/dist/styleLint/functional/themes/light-high-contrast.json +7418 -6752
- package/dist/styleLint/functional/themes/light-tritanopia.json +6926 -6296
- package/dist/styleLint/functional/themes/light.json +7093 -6385
- package/dist/styleLint/functional/typography/typography.json +520 -474
- package/package.json +2 -2
- package/src/tokens/component/diffBlob.json5 +293 -0
- package/src/tokens/component/highlight.json5 +23 -0
- package/src/tokens/functional/color/dark/app-dark.json5 +0 -302
- package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +5 -5
- package/src/tokens/functional/color/light/app-light.json5 +1 -274
- package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +5 -5
|
@@ -8,7 +8,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
|
|
|
8
8
|
});
|
|
9
9
|
};
|
|
10
10
|
import { format } from 'prettier';
|
|
11
|
-
import { fileHeader } from 'style-dictionary/utils';
|
|
11
|
+
import { fileHeader, sortByName } from 'style-dictionary/utils';
|
|
12
12
|
/**
|
|
13
13
|
* @description Converts `StyleDictionary.dictionary.tokens` to css with @custom-media
|
|
14
14
|
* @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*
|
|
|
18
18
|
// add file header
|
|
19
19
|
const output = [yield fileHeader({ file })];
|
|
20
20
|
// add single theme css
|
|
21
|
-
dictionary.allTokens.map(({ name, $value }) => {
|
|
21
|
+
dictionary.allTokens.sort(sortByName).map(({ name, $value }) => {
|
|
22
22
|
output.push(`@custom-media --${name} ${$value};`);
|
|
23
23
|
});
|
|
24
24
|
// return prettified
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { format } from 'prettier';
|
|
2
2
|
import { jsonToFlat } from './utilities/jsonToFlat.js';
|
|
3
|
+
import { sortByName } from 'style-dictionary/utils';
|
|
3
4
|
/**
|
|
4
5
|
* @description Takes a style dictionary token dictionary and converts it to a one dimensional json object.
|
|
5
6
|
* @param FormatFnArguments
|
|
@@ -9,7 +10,7 @@ import { jsonToFlat } from './utilities/jsonToFlat.js';
|
|
|
9
10
|
export const jsonOneDimensional = ({ dictionary, file: _file, options }) => {
|
|
10
11
|
// option to allow verbose output (object) or just the value
|
|
11
12
|
const { outputVerbose, propertyConversion } = options;
|
|
12
|
-
const tokens = jsonToFlat(dictionary.allTokens, outputVerbose);
|
|
13
|
+
const tokens = jsonToFlat(dictionary.allTokens.sort(sortByName), outputVerbose);
|
|
13
14
|
if (propertyConversion === undefined) {
|
|
14
15
|
//
|
|
15
16
|
const output = JSON.stringify(tokens, null, 2);
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { isFromFile, isSource } from '../filters/index.js';
|
|
2
|
+
import { outputReferencesTransformed, outputReferencesFilter } from 'style-dictionary/utils';
|
|
2
3
|
const getCssSelectors = (outputFile) => {
|
|
3
4
|
// check for dark in the beginning of the output filename
|
|
4
5
|
const lastSlash = outputFile.lastIndexOf('/');
|
|
@@ -49,7 +50,7 @@ export const css = (outputFile, prefix, buildPath, options) => {
|
|
|
49
50
|
'src/tokens/functional/size/size-coarse.json5',
|
|
50
51
|
'src/tokens/functional/size/size-fine.json5',
|
|
51
52
|
]),
|
|
52
|
-
options: Object.assign({ showFileHeader: false, outputReferences:
|
|
53
|
+
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),
|
|
53
54
|
},
|
|
54
55
|
{
|
|
55
56
|
destination: `${outputFile}`,
|
|
@@ -61,7 +62,7 @@ export const css = (outputFile, prefix, buildPath, options) => {
|
|
|
61
62
|
'src/tokens/functional/size/size-coarse.json5',
|
|
62
63
|
'src/tokens/functional/size/size-fine.json5',
|
|
63
64
|
]),
|
|
64
|
-
options: Object.assign({ showFileHeader: false, descriptions: false }, options === null || options === void 0 ? void 0 : options.options),
|
|
65
|
+
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),
|
|
65
66
|
},
|
|
66
67
|
{
|
|
67
68
|
destination: `${outputFile}`,
|
|
@@ -69,6 +70,7 @@ export const css = (outputFile, prefix, buildPath, options) => {
|
|
|
69
70
|
filter: token => isSource(token) && (options === null || options === void 0 ? void 0 : options.themed) !== true && token.$type === 'custom-viewportRange',
|
|
70
71
|
options: {
|
|
71
72
|
showFileHeader: false,
|
|
73
|
+
outputReferences: (token, platformOptions) => outputReferencesFilter(token, platformOptions) && outputReferencesTransformed(token, platformOptions),
|
|
72
74
|
},
|
|
73
75
|
},
|
|
74
76
|
{
|
|
@@ -81,6 +83,7 @@ export const css = (outputFile, prefix, buildPath, options) => {
|
|
|
81
83
|
]),
|
|
82
84
|
options: {
|
|
83
85
|
descriptions: false,
|
|
86
|
+
outputReferences: (token, platformOptions) => outputReferencesFilter(token, platformOptions) && outputReferencesTransformed(token, platformOptions),
|
|
84
87
|
showFileHeader: false,
|
|
85
88
|
queries: [
|
|
86
89
|
{
|
|
@@ -44,7 +44,7 @@ export const figma = (outputFile, prefix, buildPath, options) => ({
|
|
|
44
44
|
'fontStack/sansSerif': 'SF Pro Text',
|
|
45
45
|
'fontStack/sansSerifDisplay': 'SF Pro Display',
|
|
46
46
|
'fontStack/monospace': 'SF Mono',
|
|
47
|
-
} }, options), { themeOverrides: {
|
|
47
|
+
} }, options), { theme: options === null || options === void 0 ? void 0 : options.theme[0].replaceAll('-', ' '), themeOverrides: {
|
|
48
48
|
theme: options === null || options === void 0 ? void 0 : options.theme,
|
|
49
49
|
} }),
|
|
50
50
|
files: [
|
|
@@ -56,7 +56,7 @@ export const figma = (outputFile, prefix, buildPath, options) => ({
|
|
|
56
56
|
format: `json/figma`,
|
|
57
57
|
options: {
|
|
58
58
|
outputReferences: true,
|
|
59
|
-
theme: options === null || options === void 0 ? void 0 : options.theme,
|
|
59
|
+
theme: options === null || options === void 0 ? void 0 : options.theme[0].replaceAll('-', ' '),
|
|
60
60
|
},
|
|
61
61
|
},
|
|
62
62
|
],
|
|
@@ -1,19 +1,22 @@
|
|
|
1
1
|
import { transformTokens } from './utilities/transformTokens.js';
|
|
2
|
+
import { asArray } from '../utilities/asArray.js';
|
|
2
3
|
export const themeOverrides = {
|
|
3
4
|
name: 'themeOverrides',
|
|
4
5
|
preprocessor: (dictionary, config) => {
|
|
5
6
|
var _a, _b, _c, _d, _e, _f;
|
|
6
7
|
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';
|
|
7
8
|
const valueProp = ((_d = (_c = config.options) === null || _c === void 0 ? void 0 : _c.themeOverrides) === null || _d === void 0 ? void 0 : _d.valueProp) || '$value';
|
|
8
|
-
const currentTheme = (_f = (_e = config.options) === null || _e === void 0 ? void 0 : _e.themeOverrides) === null || _f === void 0 ? void 0 : _f.theme;
|
|
9
|
+
const [currentTheme, fallbackTheme] = asArray((_f = (_e = config.options) === null || _e === void 0 ? void 0 : _e.themeOverrides) === null || _f === void 0 ? void 0 : _f.theme);
|
|
9
10
|
const tokens = transformTokens(dictionary, token => {
|
|
10
|
-
var _a, _b, _c;
|
|
11
|
+
var _a, _b, _c, _d, _e;
|
|
11
12
|
// return early if no theme value is set
|
|
12
|
-
if (!currentTheme ||
|
|
13
|
+
if (!currentTheme ||
|
|
14
|
+
!((_a = token.$extensions) === null || _a === void 0 ? void 0 : _a[extensionProp]) ||
|
|
15
|
+
(!((_b = token.$extensions) === null || _b === void 0 ? void 0 : _b[extensionProp][currentTheme]) && !((_c = token.$extensions) === null || _c === void 0 ? void 0 : _c[extensionProp][fallbackTheme]))) {
|
|
13
16
|
return token;
|
|
14
17
|
}
|
|
15
18
|
// get override
|
|
16
|
-
const override = (
|
|
19
|
+
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]);
|
|
17
20
|
// token an theme value exist
|
|
18
21
|
return Object.assign(Object.assign({}, token), (typeof override === 'object' ? override : { [valueProp]: override }));
|
|
19
22
|
});
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { z } from 'zod';
|
|
2
2
|
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';
|
|
3
3
|
export declare const collection: (collections: Collections[]) => z.ZodEffects<z.ZodString, string, string>;
|
|
4
|
-
type Modes = 'light' | 'dark' | 'dark dimmed' | 'light high contrast' | 'dark high contrast' | 'light
|
|
4
|
+
type Modes = 'light' | 'dark' | 'dark dimmed' | 'light high contrast' | 'dark high contrast' | 'light protanopia deuteranopia' | 'dark protanopia deuteranopia' | 'light tritanopia' | 'dark tritanopia';
|
|
5
5
|
export declare const mode: (modes: Modes[]) => z.ZodEffects<z.ZodString, string, string>;
|
|
6
6
|
export {};
|