@primer/primitives 10.0.0-rc.fd912e08 → 10.0.0
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/README.md +2 -2
- package/dist/build/PrimerStyleDictionary.d.ts +8 -0
- package/dist/build/PrimerStyleDictionary.js +80 -0
- package/dist/build/filters/index.d.ts +14 -0
- package/dist/build/filters/index.js +14 -0
- package/dist/build/filters/isBorder.d.ts +7 -0
- package/dist/build/filters/isBorder.js +8 -0
- package/dist/build/filters/isColor.d.ts +7 -0
- package/dist/build/filters/isColor.js +13 -0
- package/dist/build/filters/isColorWithAlpha.d.ts +7 -0
- package/dist/build/filters/isColorWithAlpha.js +9 -0
- package/dist/build/filters/isColorWithMix.d.ts +7 -0
- package/dist/build/filters/isColorWithMix.js +24 -0
- package/dist/build/filters/isCubicBezier.d.ts +7 -0
- package/dist/build/filters/isCubicBezier.js +10 -0
- package/dist/build/filters/isDeprecated.d.ts +7 -0
- package/dist/build/filters/isDeprecated.js +8 -0
- package/dist/build/filters/isDimension.d.ts +7 -0
- package/dist/build/filters/isDimension.js +8 -0
- package/dist/build/filters/isDuration.d.ts +7 -0
- package/dist/build/filters/isDuration.js +8 -0
- package/dist/build/filters/isFontFamily.d.ts +7 -0
- package/dist/build/filters/isFontFamily.js +8 -0
- package/dist/build/filters/isFontWeight.d.ts +7 -0
- package/dist/build/filters/isFontWeight.js +8 -0
- package/dist/build/filters/isFromFile.d.ts +8 -0
- package/dist/build/filters/isFromFile.js +10 -0
- package/dist/build/filters/isNumber.d.ts +7 -0
- package/dist/build/filters/isNumber.js +8 -0
- package/dist/build/filters/isShadow.d.ts +7 -0
- package/dist/build/filters/isShadow.js +8 -0
- package/dist/build/filters/isSource.d.ts +7 -0
- package/dist/build/filters/isSource.js +8 -0
- package/dist/build/filters/isTypography.d.ts +7 -0
- package/dist/build/filters/isTypography.js +8 -0
- package/dist/build/formats/cssAdvanced.d.ts +2 -0
- package/dist/build/formats/cssAdvanced.js +86 -0
- package/dist/build/formats/cssCustomMedia.d.ts +7 -0
- package/dist/build/formats/cssCustomMedia.js +26 -0
- package/dist/build/formats/index.d.ts +9 -0
- package/dist/build/formats/index.js +9 -0
- package/dist/build/formats/javascriptCommonJs.d.ts +7 -0
- package/dist/build/formats/javascriptCommonJs.js +26 -0
- package/dist/build/formats/javascriptEsm.d.ts +7 -0
- package/dist/build/formats/javascriptEsm.js +26 -0
- package/dist/build/formats/jsonFigma.d.ts +7 -0
- package/dist/build/formats/jsonFigma.js +121 -0
- package/dist/build/formats/jsonNestedPrefixed.d.ts +8 -0
- package/dist/build/formats/jsonNestedPrefixed.js +30 -0
- package/dist/build/formats/jsonOneDimensional.d.ts +8 -0
- package/dist/build/formats/jsonOneDimensional.js +32 -0
- package/dist/build/formats/jsonPostCssFallback.d.ts +8 -0
- package/dist/build/formats/jsonPostCssFallback.js +14 -0
- package/dist/build/formats/typescriptExportDefinition.d.ts +7 -0
- package/dist/build/formats/typescriptExportDefinition.js +170 -0
- package/dist/build/formats/utilities/getPropName.d.ts +1 -0
- package/dist/build/formats/utilities/getPropName.js +16 -0
- package/dist/build/formats/utilities/jsonToFlat.d.ts +11 -0
- package/dist/build/formats/utilities/jsonToFlat.js +8 -0
- package/dist/build/formats/utilities/jsonToNestedValue.d.ts +8 -0
- package/dist/build/formats/utilities/jsonToNestedValue.js +23 -0
- package/dist/build/formats/utilities/prefixTokens.d.ts +8 -0
- package/dist/build/formats/utilities/prefixTokens.js +13 -0
- package/dist/build/parsers/index.d.ts +1 -0
- package/dist/build/parsers/index.js +1 -0
- package/dist/build/parsers/w3cJsonParser.d.ts +6 -0
- package/dist/build/parsers/w3cJsonParser.js +25 -0
- package/dist/build/platforms/css.d.ts +2 -0
- package/dist/build/platforms/css.js +96 -0
- package/dist/build/platforms/deprecatedJson.d.ts +2 -0
- package/dist/build/platforms/deprecatedJson.js +13 -0
- package/dist/build/platforms/docJson.d.ts +2 -0
- package/dist/build/platforms/docJson.js +35 -0
- package/dist/build/platforms/fallbacks.d.ts +2 -0
- package/dist/build/platforms/fallbacks.js +30 -0
- package/dist/build/platforms/figma.d.ts +2 -0
- package/dist/build/platforms/figma.js +60 -0
- package/dist/build/platforms/index.d.ts +10 -0
- package/dist/build/platforms/index.js +10 -0
- package/dist/build/platforms/javascript.d.ts +2 -0
- package/dist/build/platforms/javascript.js +26 -0
- package/dist/build/platforms/json.d.ts +2 -0
- package/dist/build/platforms/json.js +28 -0
- package/dist/build/platforms/styleLint.d.ts +2 -0
- package/dist/build/platforms/styleLint.js +30 -0
- package/dist/build/platforms/typeDefinitions.d.ts +2 -0
- package/dist/build/platforms/typeDefinitions.js +26 -0
- package/dist/build/platforms/typescript.d.ts +2 -0
- package/dist/build/platforms/typescript.js +26 -0
- package/dist/build/schemas/alphaValue.d.ts +2 -0
- package/dist/build/schemas/alphaValue.js +5 -0
- package/dist/build/schemas/baseToken.d.ts +11 -0
- package/dist/build/schemas/baseToken.js +7 -0
- package/dist/build/schemas/borderToken.d.ts +51 -0
- package/dist/build/schemas/borderToken.js +17 -0
- package/dist/build/schemas/collections.d.ts +6 -0
- package/dist/build/schemas/collections.js +12 -0
- package/dist/build/schemas/colorHexValue.d.ts +2 -0
- package/dist/build/schemas/colorHexValue.js +9 -0
- package/dist/build/schemas/colorToken.d.ts +92 -0
- package/dist/build/schemas/colorToken.js +53 -0
- package/dist/build/schemas/cubicBezierToken.d.ts +18 -0
- package/dist/build/schemas/cubicBezierToken.js +8 -0
- package/dist/build/schemas/designToken.d.ts +2 -0
- package/dist/build/schemas/designToken.js +35 -0
- package/dist/build/schemas/dimensionToken.d.ts +59 -0
- package/dist/build/schemas/dimensionToken.js +34 -0
- package/dist/build/schemas/dimensionValue.d.ts +2 -0
- package/dist/build/schemas/dimensionValue.js +9 -0
- package/dist/build/schemas/durationToken.d.ts +18 -0
- package/dist/build/schemas/durationToken.js +11 -0
- package/dist/build/schemas/durationValue.d.ts +2 -0
- package/dist/build/schemas/durationValue.js +5 -0
- package/dist/build/schemas/fontFamilyToken.d.ts +52 -0
- package/dist/build/schemas/fontFamilyToken.js +20 -0
- package/dist/build/schemas/fontWeightToken.d.ts +52 -0
- package/dist/build/schemas/fontWeightToken.js +21 -0
- package/dist/build/schemas/fontWeightValue.d.ts +2 -0
- package/dist/build/schemas/fontWeightValue.js +6 -0
- package/dist/build/schemas/numberToken.d.ts +71 -0
- package/dist/build/schemas/numberToken.js +27 -0
- package/dist/build/schemas/referenceValue.d.ts +2 -0
- package/dist/build/schemas/referenceValue.js +5 -0
- package/dist/build/schemas/scopes.d.ts +5 -0
- package/dist/build/schemas/scopes.js +29 -0
- package/dist/build/schemas/shadowToken.d.ts +164 -0
- package/dist/build/schemas/shadowToken.js +46 -0
- package/dist/build/schemas/stringToken.d.ts +18 -0
- package/dist/build/schemas/stringToken.js +10 -0
- package/dist/build/schemas/tokenName.d.ts +2 -0
- package/dist/build/schemas/tokenName.js +5 -0
- package/dist/build/schemas/tokenType.d.ts +3 -0
- package/dist/build/schemas/tokenType.js +2 -0
- package/dist/build/schemas/typographyToken.d.ts +59 -0
- package/dist/build/schemas/typographyToken.js +18 -0
- package/dist/build/schemas/validTokenType.d.ts +5 -0
- package/dist/build/schemas/validTokenType.js +31 -0
- package/dist/build/schemas/viewportRangeToken.d.ts +18 -0
- package/dist/build/schemas/viewportRangeToken.js +10 -0
- package/dist/build/transformers/borderToCss.d.ts +8 -0
- package/dist/build/transformers/borderToCss.js +38 -0
- package/dist/build/transformers/colorToHex.d.ts +8 -0
- package/dist/build/transformers/colorToHex.js +24 -0
- package/dist/build/transformers/colorToHexMix.d.ts +8 -0
- package/dist/build/transformers/colorToHexMix.js +20 -0
- package/dist/build/transformers/colorToRgbAlpha.d.ts +8 -0
- package/dist/build/transformers/colorToRgbAlpha.js +20 -0
- package/dist/build/transformers/colorToRgbaFloat.d.ts +8 -0
- package/dist/build/transformers/colorToRgbaFloat.js +46 -0
- package/dist/build/transformers/cubicBezierToCss.d.ts +8 -0
- package/dist/build/transformers/cubicBezierToCss.js +23 -0
- package/dist/build/transformers/dimensionToPixelUnitless.d.ts +8 -0
- package/dist/build/transformers/dimensionToPixelUnitless.js +49 -0
- package/dist/build/transformers/dimensionToRem.d.ts +8 -0
- package/dist/build/transformers/dimensionToRem.js +46 -0
- package/dist/build/transformers/dimensionToRemPxArray.d.ts +8 -0
- package/dist/build/transformers/dimensionToRemPxArray.js +46 -0
- package/dist/build/transformers/durationToCss.d.ts +8 -0
- package/dist/build/transformers/durationToCss.js +29 -0
- package/dist/build/transformers/figmaAttributes.d.ts +8 -0
- package/dist/build/transformers/figmaAttributes.js +55 -0
- package/dist/build/transformers/floatToPixel.d.ts +15 -0
- package/dist/build/transformers/floatToPixel.js +39 -0
- package/dist/build/transformers/fontFamilyToCss.d.ts +14 -0
- package/dist/build/transformers/fontFamilyToCss.js +37 -0
- package/dist/build/transformers/fontFamilyToFigma.d.ts +14 -0
- package/dist/build/transformers/fontFamilyToFigma.js +44 -0
- package/dist/build/transformers/fontWeightToNumber.d.ts +9 -0
- package/dist/build/transformers/fontWeightToNumber.js +50 -0
- package/dist/build/transformers/index.d.ts +25 -0
- package/dist/build/transformers/index.js +25 -0
- package/dist/build/transformers/jsonDeprecated.d.ts +8 -0
- package/dist/build/transformers/jsonDeprecated.js +14 -0
- package/dist/build/transformers/namePathToCamelCase.d.ts +8 -0
- package/dist/build/transformers/namePathToCamelCase.js +12 -0
- package/dist/build/transformers/namePathToDotNotation.d.ts +8 -0
- package/dist/build/transformers/namePathToDotNotation.js +31 -0
- package/dist/build/transformers/namePathToFigma.d.ts +9 -0
- package/dist/build/transformers/namePathToFigma.js +21 -0
- package/dist/build/transformers/namePathToKebabCase.d.ts +8 -0
- package/dist/build/transformers/namePathToKebabCase.js +16 -0
- package/dist/build/transformers/namePathToPascalCase.d.ts +8 -0
- package/dist/build/transformers/namePathToPascalCase.js +12 -0
- package/dist/build/transformers/namePathToSlashNotation.d.ts +8 -0
- package/dist/build/transformers/namePathToSlashNotation.js +16 -0
- package/dist/build/transformers/shadowToCss.d.ts +8 -0
- package/dist/build/transformers/shadowToCss.js +34 -0
- package/dist/build/transformers/typographyToCss.d.ts +8 -0
- package/dist/build/transformers/typographyToCss.js +27 -0
- package/dist/build/transformers/utilities/alpha.d.ts +9 -0
- package/dist/build/transformers/utilities/alpha.js +16 -0
- package/dist/build/transformers/utilities/checkRequiredTokenProperties.d.ts +7 -0
- package/dist/build/transformers/utilities/checkRequiredTokenProperties.js +13 -0
- package/dist/build/transformers/utilities/getTokenValue.d.ts +2 -0
- package/dist/build/transformers/utilities/getTokenValue.js +16 -0
- package/dist/build/transformers/utilities/hasSpaceInString.d.ts +1 -0
- package/dist/build/transformers/utilities/hasSpaceInString.js +6 -0
- package/dist/build/transformers/utilities/hexToRgbaFloat.d.ts +2 -0
- package/dist/build/transformers/utilities/hexToRgbaFloat.js +29 -0
- package/dist/build/transformers/utilities/invalidTokenError.d.ts +7 -0
- package/dist/build/transformers/utilities/invalidTokenError.js +27 -0
- package/dist/build/transformers/utilities/isRgbaFloat.d.ts +7 -0
- package/dist/build/transformers/utilities/isRgbaFloat.js +20 -0
- package/dist/build/transformers/utilities/mix.d.ts +5 -0
- package/dist/build/transformers/utilities/mix.js +38 -0
- package/dist/build/transformers/utilities/rgbaFloatToHex.d.ts +6 -0
- package/dist/build/transformers/utilities/rgbaFloatToHex.js +11 -0
- package/dist/build/types/Border.d.ts +5 -0
- package/dist/build/types/BorderTokenValue.d.ts +10 -0
- package/dist/build/types/ColorHex.d.ts +4 -0
- package/dist/build/types/PlatformInitializer.d.ts +11 -0
- package/dist/build/types/Shadow.d.ts +5 -0
- package/dist/build/types/ShadowTokenValue.d.ts +14 -0
- package/dist/build/types/SizeEm.d.ts +4 -0
- package/dist/build/types/SizePx.d.ts +4 -0
- package/dist/build/types/SizeRem.d.ts +4 -0
- package/dist/build/types/StyleDictionaryConfigGenerator.d.ts +15 -0
- package/dist/build/types/TokenBuildInput.d.ts +8 -0
- package/dist/build/types/TypographyTokenValue.d.ts +12 -0
- package/dist/build/types/w3cTransformedToken.d.ts +8 -0
- package/dist/build/utilities/copyFromDir.d.ts +8 -0
- package/dist/build/utilities/copyFromDir.js +31 -0
- package/dist/build/utilities/filterStringArray.d.ts +1 -0
- package/dist/build/utilities/filterStringArray.js +13 -0
- package/dist/build/utilities/getFlag.d.ts +8 -0
- package/dist/build/utilities/getFlag.js +12 -0
- package/dist/build/utilities/index.d.ts +9 -0
- package/dist/build/utilities/index.js +9 -0
- package/dist/build/utilities/joinFriendly.d.ts +1 -0
- package/dist/build/utilities/joinFriendly.js +1 -0
- package/dist/build/utilities/schemaErrorMessage.d.ts +1 -0
- package/dist/build/utilities/schemaErrorMessage.js +1 -0
- package/dist/build/utilities/toCamelCase.d.ts +1 -0
- package/dist/build/utilities/toCamelCase.js +16 -0
- package/dist/build/utilities/toPascalCase.d.ts +1 -0
- package/dist/build/utilities/toPascalCase.js +13 -0
- package/dist/build/utilities/treeWalker.d.ts +8 -0
- package/dist/build/utilities/treeWalker.js +23 -0
- package/dist/build/utilities/upperCaseFirstCharacter.d.ts +8 -0
- package/dist/build/utilities/upperCaseFirstCharacter.js +10 -0
- package/dist/css/base/motion/motion.css +17 -0
- package/dist/css/functional/motion/motion.css +4 -3
- package/dist/css/functional/themes/dark-colorblind.css +58 -38
- package/dist/css/functional/themes/dark-dimmed.css +44 -24
- package/dist/css/functional/themes/dark-high-contrast.css +42 -22
- package/dist/css/functional/themes/dark-tritanopia.css +44 -24
- package/dist/css/functional/themes/dark.css +42 -22
- package/dist/css/functional/themes/light-colorblind.css +60 -40
- package/dist/css/functional/themes/light-high-contrast.css +44 -24
- package/dist/css/functional/themes/light-tritanopia.css +42 -22
- package/dist/css/functional/themes/light.css +42 -22
- package/dist/css/functional/typography/typography.css +43 -43
- package/dist/css/primitives.css +64 -46
- package/dist/docs/base/motion/motion.json +205 -0
- package/dist/docs/functional/motion/motion.json +18 -3
- package/dist/docs/functional/themes/dark-colorblind.json +350 -1114
- package/dist/docs/functional/themes/dark-dimmed.json +364 -1152
- package/dist/docs/functional/themes/dark-high-contrast.json +312 -922
- package/dist/docs/functional/themes/dark-tritanopia.json +344 -1138
- package/dist/docs/functional/themes/dark.json +346 -1206
- package/dist/docs/functional/themes/light-colorblind.json +366 -1140
- package/dist/docs/functional/themes/light-high-contrast.json +335 -949
- package/dist/docs/functional/themes/light-tritanopia.json +311 -1135
- package/dist/docs/functional/themes/light.json +336 -1202
- package/dist/fallbacks/base/motion/motion.json +17 -0
- package/dist/fallbacks/functional/motion/motion.json +1 -0
- package/dist/figma/dimension/dimension.json +518 -518
- package/dist/figma/figma.json +19 -19
- package/dist/figma/scales/dark-dimmed.json +3536 -656
- package/dist/figma/scales/dark-high-constrast.json +3535 -655
- package/dist/figma/scales/dark.json +3371 -491
- package/dist/figma/scales/light-high-constrast.json +3533 -653
- package/dist/figma/scales/light.json +3370 -490
- package/dist/figma/shadows/dark-colorblind.json +285 -285
- package/dist/figma/shadows/dark-dimmed.json +285 -285
- package/dist/figma/shadows/dark-high-contrast.json +285 -285
- package/dist/figma/shadows/dark-tritanopia.json +285 -285
- package/dist/figma/shadows/dark.json +285 -285
- package/dist/figma/shadows/light-colorblind.json +254 -254
- package/dist/figma/shadows/light-high-contrast.json +254 -254
- package/dist/figma/shadows/light-tritanopia.json +254 -254
- package/dist/figma/shadows/light.json +254 -254
- package/dist/figma/themes/dark-colorblind.json +5197 -5068
- package/dist/figma/themes/dark-dimmed.json +5526 -5351
- package/dist/figma/themes/dark-high-contrast.json +4361 -4251
- package/dist/figma/themes/dark-tritanopia.json +5315 -5187
- package/dist/figma/themes/dark.json +5740 -5581
- package/dist/figma/themes/light-colorblind.json +5104 -4929
- package/dist/figma/themes/light-high-contrast.json +4462 -4319
- package/dist/figma/themes/light-tritanopia.json +5176 -5050
- package/dist/figma/themes/light.json +5657 -5500
- package/dist/figma/typography/typography.json +162 -162
- package/dist/internalCss/dark-colorblind.css +58 -38
- package/dist/internalCss/dark-dimmed.css +44 -24
- package/dist/internalCss/dark-high-contrast.css +42 -22
- package/dist/internalCss/dark-tritanopia.css +44 -24
- package/dist/internalCss/dark.css +42 -22
- package/dist/internalCss/light-colorblind.css +60 -40
- package/dist/internalCss/light-high-contrast.css +44 -24
- package/dist/internalCss/light-tritanopia.css +42 -22
- package/dist/internalCss/light.css +42 -22
- package/dist/styleLint/base/motion/motion.json +205 -0
- package/dist/styleLint/functional/motion/motion.json +18 -3
- package/dist/styleLint/functional/themes/dark-colorblind.json +350 -1114
- package/dist/styleLint/functional/themes/dark-dimmed.json +364 -1152
- package/dist/styleLint/functional/themes/dark-high-contrast.json +311 -921
- package/dist/styleLint/functional/themes/dark-tritanopia.json +344 -1138
- package/dist/styleLint/functional/themes/dark.json +346 -1206
- package/dist/styleLint/functional/themes/light-colorblind.json +366 -1140
- package/dist/styleLint/functional/themes/light-high-contrast.json +335 -949
- package/dist/styleLint/functional/themes/light-tritanopia.json +311 -1135
- package/dist/styleLint/functional/themes/light.json +336 -1202
- package/package.json +23 -30
- package/src/tokens/base/motion/easing.json5 +26 -0
- package/src/tokens/base/motion/timing.json5 +50 -0
- package/src/tokens/functional/color/dark/app-dark.json5 +236 -121
- package/src/tokens/functional/color/dark/data-vis-dark.json5 +40 -40
- package/src/tokens/functional/color/dark/display-dark.json5 +95 -95
- package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +1 -9
- package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +40 -27
- package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +56 -30
- package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +37 -14
- package/src/tokens/functional/color/dark/patterns-dark.json +3963 -0
- package/src/tokens/functional/color/dark/patterns-dark.json5 +126 -277
- package/src/tokens/functional/color/dark/primitives-dark.json5 +78 -78
- package/src/tokens/functional/color/dark/syntax-dark.json5 +47 -47
- package/src/tokens/functional/color/light/app-light.json5 +179 -118
- package/src/tokens/functional/color/light/data-vis-light.json5 +40 -40
- package/src/tokens/functional/color/light/display-light.json5 +0 -95
- package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +25 -27
- package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +58 -33
- package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +59 -10
- package/src/tokens/functional/color/light/patterns-light.json5 +126 -276
- package/src/tokens/functional/color/light/primitives-light.json5 +0 -78
- package/src/tokens/functional/color/light/syntax-light.json5 +0 -47
- package/src/tokens/functional/motion/loading.json5 +1 -1
- package/src/tokens/functional/motion/patterns.json5 +9 -2
- package/src/tokens/functional/shadow/dark.json5 +0 -14
- package/src/tokens/functional/shadow/light.json5 +0 -13
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { FormatFn } from 'style-dictionary/types';
|
|
2
|
+
/**
|
|
3
|
+
* @description Converts `StyleDictionary.dictionary.tokens` to javascript esm (javascript export statement)
|
|
4
|
+
* @param arguments [FormatterArguments](https://github.com/amzn/style-dictionary/blob/main/types/Format.d.ts)
|
|
5
|
+
* @returns formatted `string`
|
|
6
|
+
*/
|
|
7
|
+
export declare const javascriptEsm: FormatFn;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
import { format } from 'prettier';
|
|
11
|
+
import { jsonToNestedValue } from './utilities/jsonToNestedValue.js';
|
|
12
|
+
import { prefixTokens } from './utilities/prefixTokens.js';
|
|
13
|
+
import { fileHeader } from 'style-dictionary/utils';
|
|
14
|
+
/**
|
|
15
|
+
* @description Converts `StyleDictionary.dictionary.tokens` to javascript esm (javascript export statement)
|
|
16
|
+
* @param arguments [FormatterArguments](https://github.com/amzn/style-dictionary/blob/main/types/Format.d.ts)
|
|
17
|
+
* @returns formatted `string`
|
|
18
|
+
*/
|
|
19
|
+
export const javascriptEsm = (_a) => __awaiter(void 0, [_a], void 0, function* ({ dictionary, file, platform }) {
|
|
20
|
+
// add prefix if defined
|
|
21
|
+
const tokens = prefixTokens(dictionary.tokens, platform);
|
|
22
|
+
// add file header and convert output
|
|
23
|
+
const output = `${yield fileHeader({ file })}export default \n${JSON.stringify(jsonToNestedValue(tokens), null, 2)}\n`;
|
|
24
|
+
// return prettified
|
|
25
|
+
return format(output, { parser: 'typescript', printWidth: 500 });
|
|
26
|
+
});
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { FormatFn } from 'style-dictionary/types';
|
|
2
|
+
/**
|
|
3
|
+
* @description Converts `StyleDictionary.dictionary.tokens` to javascript esm (javascript export statement)
|
|
4
|
+
* @param arguments [FormatterArguments](https://github.com/amzn/style-dictionary/blob/main/types/Format.d.ts)
|
|
5
|
+
* @returns formatted `string`
|
|
6
|
+
*/
|
|
7
|
+
export declare const jsonFigma: FormatFn;
|
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
import { format } from 'prettier';
|
|
11
|
+
import { transformNamePathToFigma } from '../transformers/namePathToFigma.js';
|
|
12
|
+
import { hexToRgbaFloat } from '../transformers/utilities/hexToRgbaFloat.js';
|
|
13
|
+
import { isRgbaFloat } from '../transformers/utilities/isRgbaFloat.js';
|
|
14
|
+
import { getReferences, sortByReference } from 'style-dictionary/utils';
|
|
15
|
+
const isReference = (string) => /^\{([^\\]*)\}$/g.test(string);
|
|
16
|
+
const getReference = (dictionary, refString, platform) => {
|
|
17
|
+
var _a;
|
|
18
|
+
if (isReference(refString)) {
|
|
19
|
+
// retrieve reference token
|
|
20
|
+
const refToken = getReferences(refString, dictionary.tokens, { unfilteredTokens: dictionary.unfilteredTokens })[0];
|
|
21
|
+
// return full reference
|
|
22
|
+
return [(_a = refToken.attributes) === null || _a === void 0 ? void 0 : _a.collection, transformNamePathToFigma(refToken, platform)].filter(Boolean).join('/');
|
|
23
|
+
}
|
|
24
|
+
};
|
|
25
|
+
const getFigmaType = (type) => {
|
|
26
|
+
const validTypes = {
|
|
27
|
+
color: 'COLOR',
|
|
28
|
+
dimension: 'FLOAT',
|
|
29
|
+
fontWeight: 'FLOAT',
|
|
30
|
+
number: 'FLOAT',
|
|
31
|
+
fontFamily: 'STRING',
|
|
32
|
+
};
|
|
33
|
+
if (type in validTypes)
|
|
34
|
+
return validTypes[type];
|
|
35
|
+
throw new Error(`Invalid type: ${type}`);
|
|
36
|
+
};
|
|
37
|
+
const shadowToVariables = (name, values, token) => {
|
|
38
|
+
// floatValue
|
|
39
|
+
const floatValue = (property) => ({
|
|
40
|
+
name: `${name}/${property}`,
|
|
41
|
+
value: parseInt(values[property].replace('px', '')),
|
|
42
|
+
type: 'FLOAT',
|
|
43
|
+
scopes: ['EFFECT_FLOAT'],
|
|
44
|
+
mode,
|
|
45
|
+
collection,
|
|
46
|
+
group,
|
|
47
|
+
});
|
|
48
|
+
const { attributes } = token;
|
|
49
|
+
const { mode, collection, group } = attributes || {};
|
|
50
|
+
return [
|
|
51
|
+
floatValue('offsetX'),
|
|
52
|
+
floatValue('offsetY'),
|
|
53
|
+
floatValue('blur'),
|
|
54
|
+
floatValue('spread'),
|
|
55
|
+
{
|
|
56
|
+
name: `${name}/color`,
|
|
57
|
+
value: isRgbaFloat(values.color)
|
|
58
|
+
? Object.assign(Object.assign({}, values.color), (values.alpha ? { a: values.alpha } : {})) : hexToRgbaFloat(values.color, values.alpha),
|
|
59
|
+
type: 'COLOR',
|
|
60
|
+
scopes: ['EFFECT_COLOR'],
|
|
61
|
+
mode,
|
|
62
|
+
collection,
|
|
63
|
+
group,
|
|
64
|
+
},
|
|
65
|
+
];
|
|
66
|
+
};
|
|
67
|
+
/**
|
|
68
|
+
* @description Converts `StyleDictionary.dictionary.tokens` to javascript esm (javascript export statement)
|
|
69
|
+
* @param arguments [FormatterArguments](https://github.com/amzn/style-dictionary/blob/main/types/Format.d.ts)
|
|
70
|
+
* @returns formatted `string`
|
|
71
|
+
*/
|
|
72
|
+
export const jsonFigma = (_a) => __awaiter(void 0, [_a], void 0, function* ({ dictionary, file: _file, platform }) {
|
|
73
|
+
// array to store tokens in
|
|
74
|
+
const tokens = [];
|
|
75
|
+
const sortedTokens = [...dictionary.allTokens].sort(sortByReference(dictionary.tokens, { unfilteredTokens: dictionary.unfilteredTokens }));
|
|
76
|
+
// loop through tokens sorted by reference
|
|
77
|
+
for (const token of sortedTokens) {
|
|
78
|
+
// deconstruct token
|
|
79
|
+
const { attributes, $value: value, $type, $description: description, original, alpha, mix } = token;
|
|
80
|
+
const { mode, collection, scopes, group, codeSyntax } = attributes || {};
|
|
81
|
+
// early escape if no type is present
|
|
82
|
+
if (!$type)
|
|
83
|
+
return;
|
|
84
|
+
// shadows need to be specifically dealt with
|
|
85
|
+
if ($type === 'shadow') {
|
|
86
|
+
const shadowValues = !Array.isArray(value) ? [value] : value;
|
|
87
|
+
// if only one set of shadow values is present
|
|
88
|
+
if (shadowValues.length === 1) {
|
|
89
|
+
tokens.push(...shadowToVariables(token.name, shadowValues[0], Object.assign(Object.assign({}, token), (platform.mode ? { mode: platform.mode } : {}))));
|
|
90
|
+
}
|
|
91
|
+
else {
|
|
92
|
+
// if multiple shadow sets values are present we need loop through them and add the index to the name
|
|
93
|
+
for (const [index, stepValue] of shadowValues.entries()) {
|
|
94
|
+
tokens.push(...shadowToVariables(`${token.name}/${index + 1}`, stepValue, Object.assign(Object.assign({}, token), (platform.mode ? { mode: platform.mode } : {}))));
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
// other tokens just get added to tokens array
|
|
98
|
+
}
|
|
99
|
+
else {
|
|
100
|
+
tokens.push({
|
|
101
|
+
name: token.name,
|
|
102
|
+
value,
|
|
103
|
+
type: getFigmaType($type),
|
|
104
|
+
alpha,
|
|
105
|
+
isMix: mix ? true : undefined,
|
|
106
|
+
description,
|
|
107
|
+
refId: [collection, token.name].filter(Boolean).join('/'),
|
|
108
|
+
reference: getReference(dictionary, original.$value, platform),
|
|
109
|
+
collection,
|
|
110
|
+
mode,
|
|
111
|
+
group,
|
|
112
|
+
scopes,
|
|
113
|
+
codeSyntax,
|
|
114
|
+
});
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
// add file header and convert output
|
|
118
|
+
const output = JSON.stringify(tokens, null, 2);
|
|
119
|
+
// return prettified
|
|
120
|
+
return format(output, { parser: 'json', printWidth: 500 });
|
|
121
|
+
});
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { FormatFn } from 'style-dictionary/types';
|
|
2
|
+
/**
|
|
3
|
+
* @description Takes a style dictionary token dictionary and converts it to a nested json string.
|
|
4
|
+
* In contrast to the `json/nested` this formatter does add a prefix if provided
|
|
5
|
+
* @param FormatFnArguments
|
|
6
|
+
* @returns formatted json `string`
|
|
7
|
+
*/
|
|
8
|
+
export declare const jsonNestedPrefixed: FormatFn;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
import { format } from 'prettier';
|
|
11
|
+
import { prefixTokens } from './utilities/prefixTokens.js';
|
|
12
|
+
import { jsonToNestedValue } from './utilities/jsonToNestedValue.js';
|
|
13
|
+
/**
|
|
14
|
+
* @description Takes a style dictionary token dictionary and converts it to a nested json string.
|
|
15
|
+
* In contrast to the `json/nested` this formatter does add a prefix if provided
|
|
16
|
+
* @param FormatFnArguments
|
|
17
|
+
* @returns formatted json `string`
|
|
18
|
+
*/
|
|
19
|
+
export const jsonNestedPrefixed = (_a) => __awaiter(void 0, [_a], void 0, function* ({ dictionary, file: _file, options, platform }) {
|
|
20
|
+
const { outputVerbose } = options;
|
|
21
|
+
// add prefix if defined
|
|
22
|
+
let tokens = prefixTokens(dictionary.tokens, platform);
|
|
23
|
+
if (!outputVerbose) {
|
|
24
|
+
tokens = jsonToNestedValue(tokens);
|
|
25
|
+
}
|
|
26
|
+
// add file header and convert output
|
|
27
|
+
const output = JSON.stringify(tokens, null, 2);
|
|
28
|
+
// return prettified
|
|
29
|
+
return format(output, { parser: 'json', printWidth: 500 });
|
|
30
|
+
});
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { FormatFn } from 'style-dictionary/types';
|
|
2
|
+
/**
|
|
3
|
+
* @description Takes a style dictionary token dictionary and converts it to a one dimensional json object.
|
|
4
|
+
* @param FormatFnArguments
|
|
5
|
+
* @param options.nameSeparator - separator to use for nested token name
|
|
6
|
+
* @returns formatted json `string`
|
|
7
|
+
*/
|
|
8
|
+
export declare const jsonOneDimensional: FormatFn;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { format } from 'prettier';
|
|
2
|
+
import { jsonToFlat } from './utilities/jsonToFlat.js';
|
|
3
|
+
/**
|
|
4
|
+
* @description Takes a style dictionary token dictionary and converts it to a one dimensional json object.
|
|
5
|
+
* @param FormatFnArguments
|
|
6
|
+
* @param options.nameSeparator - separator to use for nested token name
|
|
7
|
+
* @returns formatted json `string`
|
|
8
|
+
*/
|
|
9
|
+
export const jsonOneDimensional = ({ dictionary, file: _file, options }) => {
|
|
10
|
+
// option to allow verbose output (object) or just the value
|
|
11
|
+
const { outputVerbose, propertyConversion } = options;
|
|
12
|
+
const tokens = jsonToFlat(dictionary.allTokens, outputVerbose);
|
|
13
|
+
if (propertyConversion === undefined) {
|
|
14
|
+
//
|
|
15
|
+
const output = JSON.stringify(tokens, null, 2);
|
|
16
|
+
// return prettified
|
|
17
|
+
return format(output, { parser: 'json', printWidth: 500 });
|
|
18
|
+
}
|
|
19
|
+
// replace property names
|
|
20
|
+
const convertedTokens = Object.fromEntries(Object.entries(tokens).map(([name, token]) => {
|
|
21
|
+
for (const [from, to] of Object.entries(propertyConversion)) {
|
|
22
|
+
if (from in token) {
|
|
23
|
+
token[to] = token[from];
|
|
24
|
+
delete token[from];
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
return [name, token];
|
|
28
|
+
}));
|
|
29
|
+
const output = JSON.stringify(convertedTokens, null, 2);
|
|
30
|
+
// return prettified
|
|
31
|
+
return format(output, { parser: 'json', printWidth: 500 });
|
|
32
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { FormatFn } from 'style-dictionary/types';
|
|
2
|
+
/**
|
|
3
|
+
* @description Takes a style dictionary token dictionary and converts it to a one dimensional json object.
|
|
4
|
+
* @param FormatFnArguments
|
|
5
|
+
* @param options.nameSeparator - separator to use for nested token name
|
|
6
|
+
* @returns formatted json `string`
|
|
7
|
+
*/
|
|
8
|
+
export declare const jsonPostCssFallback: FormatFn;
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { format } from 'prettier';
|
|
2
|
+
/**
|
|
3
|
+
* @description Takes a style dictionary token dictionary and converts it to a one dimensional json object.
|
|
4
|
+
* @param FormatFnArguments
|
|
5
|
+
* @param options.nameSeparator - separator to use for nested token name
|
|
6
|
+
* @returns formatted json `string`
|
|
7
|
+
*/
|
|
8
|
+
export const jsonPostCssFallback = ({ dictionary, file: _file }) => {
|
|
9
|
+
const tokens = Object.fromEntries(dictionary.allTokens.map(token => [`--${token.name}`, token.$value]));
|
|
10
|
+
// add file header and convert output
|
|
11
|
+
const output = JSON.stringify(tokens, null, 2);
|
|
12
|
+
// return prettified
|
|
13
|
+
return format(output, { parser: 'json', printWidth: 500 });
|
|
14
|
+
};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { FormatFn } from 'style-dictionary/types';
|
|
2
|
+
/**
|
|
3
|
+
* @description Converts `StyleDictionary.dictionary.tokens` to typescript definition
|
|
4
|
+
* @param arguments [FormatterArguments](https://github.com/amzn/style-dictionary/blob/main/types/Format.d.ts)
|
|
5
|
+
* @returns formatted `string`
|
|
6
|
+
*/
|
|
7
|
+
export declare const typescriptExportDefinition: FormatFn;
|
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
2
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
3
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
4
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
5
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
6
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
7
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
import { format } from 'prettier';
|
|
11
|
+
import { readFileSync } from 'fs';
|
|
12
|
+
import { resolve as resolvePath } from 'path';
|
|
13
|
+
import { treeWalker } from '../utilities/treeWalker.js';
|
|
14
|
+
import { prefixTokens } from './utilities/prefixTokens.js';
|
|
15
|
+
import { fileHeader } from 'style-dictionary/utils';
|
|
16
|
+
import { getPropName } from './utilities/getPropName.js';
|
|
17
|
+
/**
|
|
18
|
+
* unquoteTypes
|
|
19
|
+
* @description extract types from designTokenTypes (string with type definitions from file) and replace quoted types "Color" with unquoted Color
|
|
20
|
+
* @param output
|
|
21
|
+
* @param designTokenTypes
|
|
22
|
+
* @returns string with unquoted types
|
|
23
|
+
*/
|
|
24
|
+
const unquoteTypes = (output, designTokenTypes) => {
|
|
25
|
+
// join types for replacement
|
|
26
|
+
const regex = `"(${['number', 'string', 'any', ...designTokenTypes].join('|')})"`;
|
|
27
|
+
// remove strings
|
|
28
|
+
return output.replace(new RegExp(regex, 'g'), '$1');
|
|
29
|
+
};
|
|
30
|
+
/**
|
|
31
|
+
* getTokenType
|
|
32
|
+
* @description extract content from token files
|
|
33
|
+
* @param path string
|
|
34
|
+
*/
|
|
35
|
+
const getTokenType = (tokenTypesPath) => {
|
|
36
|
+
try {
|
|
37
|
+
const designTokenType = readFileSync(resolvePath(tokenTypesPath), { encoding: 'utf-8' });
|
|
38
|
+
return designTokenType;
|
|
39
|
+
}
|
|
40
|
+
catch (error) {
|
|
41
|
+
// eslint-disable-next-line no-console
|
|
42
|
+
throw new Error(`Error trying to load design token type from file "${tokenTypesPath}". Error: ${error}`);
|
|
43
|
+
}
|
|
44
|
+
};
|
|
45
|
+
/**
|
|
46
|
+
* @description throws an error stating the token name, type and invalid value
|
|
47
|
+
* @param token w3cTransformedToken
|
|
48
|
+
*/
|
|
49
|
+
const invalidTokenValueError = (token, options) => {
|
|
50
|
+
throw new Error(`Invalid token: "${token.name}" with type "${token[getPropName('type', options.usesDtcg)]}" can not have a value of "${token[getPropName('value', options.usesDtcg)]}"`);
|
|
51
|
+
};
|
|
52
|
+
/**
|
|
53
|
+
* convertPropToType
|
|
54
|
+
* @description return take type attribute and return correct typescript type as string
|
|
55
|
+
* @param type
|
|
56
|
+
* @returns
|
|
57
|
+
*/
|
|
58
|
+
const convertPropToType = (tree, options) => {
|
|
59
|
+
const valueProp = getPropName('value', options.usesDtcg);
|
|
60
|
+
if (!Object.prototype.hasOwnProperty.call(tree, valueProp)) {
|
|
61
|
+
throw new Error(`Invalid token: ${tree}`);
|
|
62
|
+
}
|
|
63
|
+
switch (tree.$type) {
|
|
64
|
+
case 'color':
|
|
65
|
+
if (typeof tree[valueProp] === 'string' && tree[valueProp][0] === '#') {
|
|
66
|
+
return 'ColorHex';
|
|
67
|
+
}
|
|
68
|
+
return invalidTokenValueError(tree, options);
|
|
69
|
+
case 'dimension':
|
|
70
|
+
if (typeof tree[valueProp] === 'string' && tree[valueProp].substring(tree[valueProp].length - 3) === 'rem')
|
|
71
|
+
return 'SizeRem';
|
|
72
|
+
if (typeof tree[valueProp] === 'string' && tree[valueProp].substring(tree[valueProp].length - 2) === 'em')
|
|
73
|
+
return 'SizeEm';
|
|
74
|
+
if (typeof tree[valueProp] === 'string' && tree[valueProp].substring(tree[valueProp].length - 2) === 'px')
|
|
75
|
+
return 'SizePx';
|
|
76
|
+
return invalidTokenValueError(tree, options);
|
|
77
|
+
case 'shadow':
|
|
78
|
+
return 'Shadow';
|
|
79
|
+
case 'border':
|
|
80
|
+
return 'Border';
|
|
81
|
+
default:
|
|
82
|
+
if (typeof tree[valueProp] === 'number')
|
|
83
|
+
return 'number';
|
|
84
|
+
if (typeof tree[valueProp] === 'string')
|
|
85
|
+
return 'string';
|
|
86
|
+
if (typeof tree[valueProp] === 'boolean')
|
|
87
|
+
return 'boolean';
|
|
88
|
+
return 'any';
|
|
89
|
+
}
|
|
90
|
+
};
|
|
91
|
+
/**
|
|
92
|
+
* a valid token node has a `value` property
|
|
93
|
+
* @param item object
|
|
94
|
+
* @returns boolean
|
|
95
|
+
*/
|
|
96
|
+
const validTokenNode = (usesDtcg) => (item) => {
|
|
97
|
+
return typeof item === 'object' && item !== null && getPropName('value', usesDtcg) in item;
|
|
98
|
+
};
|
|
99
|
+
/**
|
|
100
|
+
* returns a set with every used token type
|
|
101
|
+
* @param item object
|
|
102
|
+
* @param validTypes array, all other types will be removed
|
|
103
|
+
* @returns set of all used token types
|
|
104
|
+
*/
|
|
105
|
+
const getUsedTokenTypes = (tokens, validTypes, options) => {
|
|
106
|
+
// using a set to assure every value only exists once
|
|
107
|
+
const usedTypes = new Set();
|
|
108
|
+
// adds type to set
|
|
109
|
+
const callback = (tree) => usedTypes.add(convertPropToType(tree, options));
|
|
110
|
+
// tree walker adds to usedTypes
|
|
111
|
+
treeWalker(tokens, callback, validTokenNode(options.usesDtcg));
|
|
112
|
+
// clean up types
|
|
113
|
+
for (const type of usedTypes) {
|
|
114
|
+
if (!validTypes.includes(type)) {
|
|
115
|
+
usedTypes.delete(type);
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
return usedTypes;
|
|
119
|
+
};
|
|
120
|
+
/**
|
|
121
|
+
* returns the entire token object structure but instead of token values each token just has a typescript type
|
|
122
|
+
* @param item object
|
|
123
|
+
* @returns object
|
|
124
|
+
*/
|
|
125
|
+
const getTokenObjectWithTypes = (tokens, options) => {
|
|
126
|
+
const callback = (tree) => convertPropToType(tree, options);
|
|
127
|
+
// TODO: FIX typescript issues
|
|
128
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
129
|
+
// @ts-ignore
|
|
130
|
+
return treeWalker(tokens, callback, validTokenNode(options.usesDtcg));
|
|
131
|
+
};
|
|
132
|
+
/**
|
|
133
|
+
* getTypeDefinition
|
|
134
|
+
* @description returns type definitions as string
|
|
135
|
+
* @param tokens
|
|
136
|
+
* @param moduleName
|
|
137
|
+
* @param tokenTypesPath
|
|
138
|
+
* @returns string
|
|
139
|
+
*/
|
|
140
|
+
const getTypeDefinition = (tokens, options) => {
|
|
141
|
+
// extract options
|
|
142
|
+
const { moduleName = `tokens`, tokenTypesPath = `./src/types/` } = options;
|
|
143
|
+
const usedTypes = getUsedTokenTypes(tokens, ['Shadow', 'ColorHex', 'Border', 'SizeEm', 'SizeRem', 'SizePx'], options);
|
|
144
|
+
const tokenObjectWithTypes = getTokenObjectWithTypes(tokens, options);
|
|
145
|
+
// get token type declaration from file
|
|
146
|
+
const designTokenTypes = [];
|
|
147
|
+
for (const type of usedTypes) {
|
|
148
|
+
// path to type files without trailing slash
|
|
149
|
+
const typePath = tokenTypesPath.replace(new RegExp(/\/$/, 'g'), '');
|
|
150
|
+
designTokenTypes.push(getTokenType(`${typePath}/${type}.d.ts`));
|
|
151
|
+
}
|
|
152
|
+
// build output
|
|
153
|
+
const output = `${designTokenTypes.join('\n')}
|
|
154
|
+
export type ${moduleName} = ${JSON.stringify(tokenObjectWithTypes, null, 2)}`;
|
|
155
|
+
// JSON stringify will quote strings, because this is a type we need it unquoted.
|
|
156
|
+
return unquoteTypes(output, [...usedTypes]);
|
|
157
|
+
};
|
|
158
|
+
/**
|
|
159
|
+
* @description Converts `StyleDictionary.dictionary.tokens` to typescript definition
|
|
160
|
+
* @param arguments [FormatterArguments](https://github.com/amzn/style-dictionary/blob/main/types/Format.d.ts)
|
|
161
|
+
* @returns formatted `string`
|
|
162
|
+
*/
|
|
163
|
+
export const typescriptExportDefinition = (_a) => __awaiter(void 0, [_a], void 0, function* ({ dictionary, file, options = {}, platform, }) {
|
|
164
|
+
// add prefix if defined
|
|
165
|
+
const tokens = prefixTokens(dictionary.tokens, platform);
|
|
166
|
+
// add file header and convert output
|
|
167
|
+
const output = `${yield fileHeader({ file })}\n${getTypeDefinition(tokens, options)}\n`;
|
|
168
|
+
// return prettified
|
|
169
|
+
return format(output, { parser: 'typescript', printWidth: 500 });
|
|
170
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const getPropName: (prop: "value" | "type" | "description", usesDtcg?: boolean) => "type" | "value" | "$value" | "$type" | "$description" | "comment";
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
const props = {
|
|
2
|
+
dtcg: {
|
|
3
|
+
value: '$value',
|
|
4
|
+
type: '$type',
|
|
5
|
+
description: '$description',
|
|
6
|
+
},
|
|
7
|
+
legacy: {
|
|
8
|
+
value: 'value',
|
|
9
|
+
type: 'type',
|
|
10
|
+
description: 'comment',
|
|
11
|
+
},
|
|
12
|
+
};
|
|
13
|
+
export const getPropName = (prop, usesDtcg) => {
|
|
14
|
+
const type = usesDtcg ? 'dtcg' : 'legacy';
|
|
15
|
+
return props[type][prop];
|
|
16
|
+
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { TransformedToken } from 'style-dictionary/types';
|
|
2
|
+
/**
|
|
3
|
+
* jsonToFlat
|
|
4
|
+
* @description creates a one dimensional json structure with either a single value or an token object as the value
|
|
5
|
+
* @param token StyleDictionary.DesignToken
|
|
6
|
+
* @param returnObject - boolean
|
|
7
|
+
* @returns flat json three
|
|
8
|
+
*/
|
|
9
|
+
export declare const jsonToFlat: (tokens: TransformedToken[], returnObject?: boolean) => {
|
|
10
|
+
[k: string]: any;
|
|
11
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* jsonToFlat
|
|
3
|
+
* @description creates a one dimensional json structure with either a single value or an token object as the value
|
|
4
|
+
* @param token StyleDictionary.DesignToken
|
|
5
|
+
* @param returnObject - boolean
|
|
6
|
+
* @returns flat json three
|
|
7
|
+
*/
|
|
8
|
+
export const jsonToFlat = (tokens, returnObject = false) => Object.fromEntries(tokens.map(token => [token.name, returnObject ? token : token.$value]));
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { DesignToken } from 'style-dictionary/types';
|
|
2
|
+
/**
|
|
3
|
+
* jsonToNestedValue
|
|
4
|
+
* @description creates a nested json tree where every final value is the `.value` prop
|
|
5
|
+
* @param token StyleDictionary.DesignToken
|
|
6
|
+
* @returns nested json three
|
|
7
|
+
*/
|
|
8
|
+
export declare const jsonToNestedValue: (token: DesignToken | Record<string, unknown>) => any;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* jsonToNestedValue
|
|
3
|
+
* @description creates a nested json tree where every final value is the `.value` prop
|
|
4
|
+
* @param token StyleDictionary.DesignToken
|
|
5
|
+
* @returns nested json three
|
|
6
|
+
*/
|
|
7
|
+
export const jsonToNestedValue = (token) => {
|
|
8
|
+
// is non-object value
|
|
9
|
+
if (typeof token !== 'object')
|
|
10
|
+
return token;
|
|
11
|
+
// is design token
|
|
12
|
+
if ('$value' in token)
|
|
13
|
+
return token.$value;
|
|
14
|
+
if ('value' in token)
|
|
15
|
+
return token.value;
|
|
16
|
+
// is obj
|
|
17
|
+
const nextObj = {};
|
|
18
|
+
for (const [prop, value] of Object.entries(token)) {
|
|
19
|
+
// @ts-expect-error: can't predict type
|
|
20
|
+
nextObj[prop] = jsonToNestedValue(value);
|
|
21
|
+
}
|
|
22
|
+
return nextObj;
|
|
23
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { PlatformConfig, TransformedTokens } from 'style-dictionary/types';
|
|
2
|
+
/**
|
|
3
|
+
* @description extract prefix from platform and add to tokens array if defined
|
|
4
|
+
* @param tokens StyleDictionary.TransformedTokens
|
|
5
|
+
* @param platform StyleDictionary.Platform
|
|
6
|
+
* @return StyleDictionary.TransformedTokens
|
|
7
|
+
*/
|
|
8
|
+
export declare const prefixTokens: (tokens: TransformedTokens, platform?: PlatformConfig) => TransformedTokens;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @description extract prefix from platform and add to tokens array if defined
|
|
3
|
+
* @param tokens StyleDictionary.TransformedTokens
|
|
4
|
+
* @param platform StyleDictionary.Platform
|
|
5
|
+
* @return StyleDictionary.TransformedTokens
|
|
6
|
+
*/
|
|
7
|
+
export const prefixTokens = (tokens, platform = {}) => {
|
|
8
|
+
const { prefix } = platform;
|
|
9
|
+
if (typeof prefix === 'string') {
|
|
10
|
+
tokens = { [prefix]: tokens };
|
|
11
|
+
}
|
|
12
|
+
return tokens;
|
|
13
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { w3cJsonParser } from './w3cJsonParser.js';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { w3cJsonParser } from './w3cJsonParser.js';
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { Parser } from 'style-dictionary/types';
|
|
2
|
+
/**
|
|
3
|
+
* @description Parses a valid [json5](https://json5.org) file and replaces `$value` with `value` and `$description` with `comment` to make a w3c standard file compatible with style dictionary
|
|
4
|
+
* @pattern supported file extensions `.json` or `.json5`
|
|
5
|
+
*/
|
|
6
|
+
export declare const w3cJsonParser: Parser;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import JSON5 from 'json5';
|
|
2
|
+
/**
|
|
3
|
+
* @description Parses a valid [json5](https://json5.org) file and replaces `$value` with `value` and `$description` with `comment` to make a w3c standard file compatible with style dictionary
|
|
4
|
+
* @pattern supported file extensions `.json` or `.json5`
|
|
5
|
+
*/
|
|
6
|
+
export const w3cJsonParser = {
|
|
7
|
+
name: 'w3cJsonParser',
|
|
8
|
+
pattern: /\.json5?$/,
|
|
9
|
+
parser: ({ filePath, contents }) => {
|
|
10
|
+
// replace $value with value so that style dictionary recognizes it
|
|
11
|
+
try {
|
|
12
|
+
contents = contents
|
|
13
|
+
.replace(/["|']?\$value["|']?:/g, '"value":')
|
|
14
|
+
// convert $description to comment
|
|
15
|
+
.replace(/["|']?\$?description["|']?:/g, '"comment":')
|
|
16
|
+
.replace(/["|']?\$?type["|']?:/g, '"$type":')
|
|
17
|
+
.replace(/["|']?\$?extensions["|']?:/g, '"$extensions":');
|
|
18
|
+
//
|
|
19
|
+
return JSON5.parse(contents);
|
|
20
|
+
}
|
|
21
|
+
catch (error) {
|
|
22
|
+
throw new Error(`Invalid json5 file "${filePath}". Error: ${error}`);
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
};
|