From 7d5d2d7493c7a7663d489b0f909a61568f1d719c Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Thu, 8 Sep 2022 22:31:41 +0200 Subject: [PATCH 01/10] draft of w3c update --- src/config/format.ts | 27 ++ src/transformer/standardTransformer.ts | 480 +++++++++++++------------ src/transformer/tokenExtensions.ts | 5 +- src/utilities/prefixTokenName.ts | 9 +- src/utilities/prepareExport.ts | 6 +- types/standardToken.d.ts | 44 ++- 6 files changed, 309 insertions(+), 262 deletions(-) create mode 100644 src/config/format.ts diff --git a/src/config/format.ts b/src/config/format.ts new file mode 100644 index 00000000..9217c4d2 --- /dev/null +++ b/src/config/format.ts @@ -0,0 +1,27 @@ +export type formatKeysType = { + VALUE: '$value' | 'value', + DESCRIPTION: '$description' | 'description', + TYPE: '$type' | 'type', + EXTENSIONS: '$extensions' | 'extensions', + NAME: 'name' +} + +export const formatKeys: { + standardDeprecated: formatKeysType, + standard: formatKeysType +} = { + standardDeprecated: { + VALUE: 'value', + DESCRIPTION: 'description', + TYPE: 'type', + EXTENSIONS: 'extensions', + NAME: 'name' + }, + standard: { + VALUE: '$value', + DESCRIPTION: '$description', + TYPE: '$type', + EXTENSIONS: '$extensions', + NAME: 'name' + } +} diff --git a/src/transformer/standardTransformer.ts b/src/transformer/standardTransformer.ts index bc51e4c5..3650c2ba 100644 --- a/src/transformer/standardTransformer.ts +++ b/src/transformer/standardTransformer.ts @@ -4,276 +4,278 @@ import { StandardTokenInterface, StandardTokenTypes, StandardTokenDataInterface, import roundWithDecimals from '../utilities/roundWithDecimals' import { tokenExtensions } from './tokenExtensions' import config from '@config/config' +import { formatKeysType } from '@config/format' -const lineHeightToDimension = (values): number => { - if (values.lineHeight.unit === 'pixel') { - return roundWithDecimals(values.lineHeight.value, 3) - } - if (values.lineHeight.unit === 'percent') { - return roundWithDecimals(values.fontSize.value * (values.lineHeight.value / 100), 3) +const getStandardTransformer = (formatKeys: formatKeysType) => { + const lineHeightToDimension = (values): number => { + if (values.lineHeight.unit === 'pixel') { + return roundWithDecimals(values.lineHeight.value, 3) + } + if (values.lineHeight.unit === 'percent') { + return roundWithDecimals(values.fontSize.value * (values.lineHeight.value / 100), 3) + } + return roundWithDecimals(values.fontSize.value * 1.2, 3) } - return roundWithDecimals(values.fontSize.value * 1.2, 3) -} -const letterSpacingToDimensions = (values): number => { - if (values.letterSpacing.unit === 'pixel') { - return roundWithDecimals(values.letterSpacing.value, 3) - } - if (values.letterSpacing.unit === 'percent') { - return roundWithDecimals(values.fontSize.value * (values.letterSpacing.value / 100), 3) + const letterSpacingToDimensions = (values): number => { + if (values.letterSpacing.unit === 'pixel') { + return roundWithDecimals(values.letterSpacing.value, 3) + } + if (values.letterSpacing.unit === 'percent') { + return roundWithDecimals(values.fontSize.value * (values.letterSpacing.value / 100), 3) + } } -} -const widthToDimensionTransformer = ({ values }): StandardTokenDataInterface => ({ - value: values.width.value, - type: 'dimension' as StandardTokenTypes -}) + const widthToDimensionTransformer = ({ values }) => ({ + [formatKeys.VALUE]: values.width.value, + [formatKeys.TYPE]: 'dimension' as StandardTokenTypes + }) -const opacityValueTransformer = ({ values }): StandardTokenDataInterface => ({ - value: values.opacity.value, - type: 'custom-opacity' as StandardTokenTypes -}) + const opacityValueTransformer = ({ values }) => ({ + [formatKeys.VALUE]: values.opacity.value, + [formatKeys.TYPE]: 'custom-opacity' as StandardTokenTypes + }) -const radiusValueTransformer = ({ values }): StandardTokenDataInterface => ({ - type: 'custom-radius' as StandardTokenTypes, - value: { - smoothing: values.smoothing.value, - topLeft: values.radii.topLeft.value, - topRight: values.radii.topRight.value, - bottomLeft: values.radii.bottomLeft.value, - bottomRight: values.radii.bottomRight.value - } -}) + const radiusValueTransformer = ({ values }) => ({ + [formatKeys.TYPE]: 'custom-radius' as StandardTokenTypes, + [formatKeys.VALUE]: { + smoothing: values.smoothing.value, + topLeft: values.radii.topLeft.value, + topRight: values.radii.topRight.value, + bottomLeft: values.radii.bottomLeft.value, + bottomRight: values.radii.bottomRight.value + } + }) -const gridValueTransformer = ({ values } /*: {values: extractedGridValues[]} */): StandardTokenDataInterface | StandardTokenGroup => { - const grids = values.map(grid => ({ - type: 'custom-grid' as StandardTokenTypes, - value: { - pattern: grid.pattern.value, - ...(grid.sectionSize ? { sectionSize: grid.sectionSize.value } : {}), - ...(grid.gutterSize ? { gutterSize: grid.gutterSize.value } : {}), - ...(grid.alignment ? { alignment: grid.alignment.value } : {}), - ...(grid.count ? { count: grid.count.value } : {}), - ...(grid.offset ? { offset: grid.offset.value } : {}) + const gridValueTransformer = ({ values } /*: {values: extractedGridValues[]} */): StandardTokenDataInterface | StandardTokenGroup => { + const grids = values.map(grid => ({ + [formatKeys.TYPE]: 'custom-grid' as StandardTokenTypes, + [formatKeys.VALUE]: { + pattern: grid.pattern.value, + ...(grid.sectionSize ? { sectionSize: grid.sectionSize.value } : {}), + ...(grid.gutterSize ? { gutterSize: grid.gutterSize.value } : {}), + ...(grid.alignment ? { alignment: grid.alignment.value } : {}), + ...(grid.count ? { count: grid.count.value } : {}), + ...(grid.offset ? { offset: grid.offset.value } : {}) + } + })) + // only one grid + if (grids.length === 1) { + return grids[0] } - })) - // only one grid - if (grids.length === 1) { - return grids[0] - } - // return multiple grids - return { ...grids } -} -const spacingValueTransformer = ({ values }): StandardTokenDataInterface => ({ - type: 'custom-spacing' as StandardTokenTypes, - value: { - top: values.top.value, - bottom: values.bottom.value, - left: values.left.value, - right: values.right.value + // return multiple grids + return { ...grids } } -}) + const spacingValueTransformer = ({ values }) => ({ + [formatKeys.TYPE]: 'custom-spacing' as StandardTokenTypes, + [formatKeys.VALUE]: { + top: values.top.value, + bottom: values.bottom.value, + left: values.left.value, + right: values.right.value + } + }) -const fontStyleValueTransformer = ({ values }): StandardTokenDataInterface => ({ - type: 'custom-fontStyle' as StandardTokenTypes, - value: { - fontSize: values.fontSize.value, - textDecoration: values.textDecoration.value, - fontFamily: values.fontFamily.value, - fontWeight: values.fontWeight.value, - fontStyle: values.fontStyle.value, - fontStretch: values.fontStretch.value, - letterSpacing: letterSpacingToDimensions(values), - lineHeight: lineHeightToDimension(values), - paragraphIndent: values.paragraphIndent.value, - paragraphSpacing: values.paragraphSpacing.value, - textCase: values.textCase.value - } -}) + const fontStyleValueTransformer = ({ values }) => ({ + [formatKeys.TYPE]: 'custom-fontStyle' as StandardTokenTypes, + [formatKeys.VALUE]: { + fontSize: values.fontSize.value, + textDecoration: values.textDecoration.value, + fontFamily: values.fontFamily.value, + fontWeight: values.fontWeight.value, + fontStyle: values.fontStyle.value, + fontStretch: values.fontStretch.value, + letterSpacing: letterSpacingToDimensions(values), + lineHeight: lineHeightToDimension(values), + paragraphIndent: values.paragraphIndent.value, + paragraphSpacing: values.paragraphSpacing.value, + textCase: values.textCase.value + } + }) -const typographyValueTransformer = ({ name, values }) => ({ - fontSize: { - type: 'dimension' as StandardTokenTypes, - value: values.fontSize.value - }, - textDecoration: { - type: 'string' as StandardTokenTypes, - value: values.textDecoration.value - }, - fontFamily: { - type: 'string' as StandardTokenTypes, - value: values.fontFamily.value - }, - fontWeight: { - type: 'number' as StandardTokenTypes, - value: values.fontWeight.value - }, - fontStyle: { - type: 'string' as StandardTokenTypes, - value: values.fontStyle.value - }, - fontStretch: { - type: 'string' as StandardTokenTypes, - value: values.fontStretch.value - }, - letterSpacing: { - type: 'dimension' as StandardTokenTypes, - value: letterSpacingToDimensions(values) - }, - lineHeight: { - type: 'dimension' as StandardTokenTypes, - value: lineHeightToDimension(values) - }, - paragraphIndent: { - type: 'dimension' as StandardTokenTypes, - value: values.paragraphIndent.value - }, - paragraphSpacing: { - type: 'dimension' as StandardTokenTypes, - value: values.paragraphSpacing.value - }, - textCase: { - type: 'string' as StandardTokenTypes, - value: values.textCase.value - } -}) + const typographyValueTransformer = ({ name, values }) => ({ + fontSize: { + [formatKeys.TYPE]: 'dimension' as StandardTokenTypes, + [formatKeys.VALUE]: values.fontSize.value + }, + textDecoration: { + [formatKeys.TYPE]: 'string' as StandardTokenTypes, + [formatKeys.VALUE]: values.textDecoration.value + }, + fontFamily: { + [formatKeys.TYPE]: 'string' as StandardTokenTypes, + [formatKeys.VALUE]: values.fontFamily.value + }, + fontWeight: { + [formatKeys.TYPE]: 'number' as StandardTokenTypes, + [formatKeys.VALUE]: values.fontWeight.value + }, + fontStyle: { + [formatKeys.TYPE]: 'string' as StandardTokenTypes, + [formatKeys.VALUE]: values.fontStyle.value + }, + fontStretch: { + [formatKeys.TYPE]: 'string' as StandardTokenTypes, + [formatKeys.VALUE]: values.fontStretch.value + }, + letterSpacing: { + [formatKeys.TYPE]: 'dimension' as StandardTokenTypes, + [formatKeys.VALUE]: letterSpacingToDimensions(values) + }, + lineHeight: { + [formatKeys.TYPE]: 'dimension' as StandardTokenTypes, + [formatKeys.VALUE]: lineHeightToDimension(values) + }, + paragraphIndent: { + [formatKeys.TYPE]: 'dimension' as StandardTokenTypes, + [formatKeys.VALUE]: values.paragraphIndent.value + }, + paragraphSpacing: { + [formatKeys.TYPE]: 'dimension' as StandardTokenTypes, + [formatKeys.VALUE]: values.paragraphSpacing.value + }, + textCase: { + [formatKeys.TYPE]: 'string' as StandardTokenTypes, + [formatKeys.VALUE]: values.textCase.value + } + }) -const colorValueTransformer = ({ fill }): StandardTokenDataInterface => ({ - type: 'color' as StandardTokenTypes, - value: rgbaObjectToHex8(fill.value), - blendMode: fill.blendMode?.toLowerCase() || 'normal' -}) + const colorValueTransformer = ({ fill }) => ({ + [formatKeys.TYPE]: 'color' as StandardTokenTypes, + [formatKeys.VALUE]: rgbaObjectToHex8(fill.value), + blendMode: fill.blendMode?.toLowerCase() || 'normal' + }) -const gradientValueTransformer = ({ gradientType, rotation, stops, opacity }): StandardTokenDataInterface => ({ - type: 'custom-gradient' as StandardTokenTypes, - value: { - gradientType: gradientType.value, - rotation: rotation.value, - stops: stops.map(stop => ({ - position: stop.position.value, - color: rgbaObjectToHex8({ - ...stop.color.value, - // calculate actual alpha - ...{ a: stop.color.value.a * opacity.value } - }) - })) - } -}) + const gradientValueTransformer = ({ gradientType, rotation, stops, opacity }) => ({ + [formatKeys.TYPE]: 'custom-gradient' as StandardTokenTypes, + [formatKeys.VALUE]: { + gradientType: gradientType.value, + rotation: rotation.value, + stops: stops.map(stop => ({ + position: stop.position.value, + color: rgbaObjectToHex8({ + ...stop.color.value, + // calculate actual alpha + ...{ a: stop.color.value.a * opacity.value } + }) + })) + } + }) -const fillValueTransformer = (token): StandardTokenDataInterface | StandardTokenGroup => { - // check for alias - if (token.extensions && token.extensions[config.key.extensionPluginData] && token.extensions[config.key.extensionPluginData].alias) { - return { - type: Object.hasOwnProperty.call(token.values[0], 'fill') ? 'color' : 'custom-gradient', - value: `{${token.extensions[config.key.extensionPluginData].alias}}`, - blendMode: token.values[0]?.fill?.blendMode?.toLowerCase() || 'normal' + const fillValueTransformer = (token): StandardTokenDataInterface | StandardTokenGroup => { + // check for alias + if (token.extensions && token.extensions[config.key.extensionPluginData] && token.extensions[config.key.extensionPluginData].alias) { + return { + [formatKeys.TYPE]: Object.hasOwnProperty.call(token.values[0], 'fill') ? 'color' : 'custom-gradient', + [formatKeys.VALUE]: `{${token.extensions[config.key.extensionPluginData].alias}}`, + blendMode: token.values[0]?.fill?.blendMode?.toLowerCase() || 'normal' + } } + // no alias, use value + const fills = token.values.map(fill => { + if (Object.hasOwnProperty.call(fill, 'fill')) { + return colorValueTransformer(fill) + } + return gradientValueTransformer(fill) + }) + // only one fill + if (fills.length === 1) { + return fills[0] + } + // multiple fills + return { ...fills } } - // no alias, use value - const fills = token.values.map(fill => { - if (Object.hasOwnProperty.call(fill, 'fill')) { - return colorValueTransformer(fill) + + const borderValueTransformer = ({ values }) => ({ + [formatKeys.TYPE]: 'custom-stroke' as StandardTokenTypes, + [formatKeys.VALUE]: { + align: values.strokeAlign.value, + dashPattern: values.dashPattern.value, + lineCap: values.strokeCap.value, + lineJoin: values.strokeJoin.value, + miterLimit: values.strokeMiterLimit.value, + weight: values.strokeWeight.value, + color: rgbaObjectToHex8(values.stroke.value) } - return gradientValueTransformer(fill) }) - // only one fill - if (fills.length === 1) { - return fills[0] - } - // multiple fills - return { ...fills } -} -const borderValueTransformer = ({ values }): StandardTokenDataInterface => ({ - type: 'custom-stroke' as StandardTokenTypes, - value: { - align: values.strokeAlign.value, - dashPattern: values.dashPattern.value, - lineCap: values.strokeCap.value, - lineJoin: values.strokeJoin.value, - miterLimit: values.strokeMiterLimit.value, - weight: values.strokeWeight.value, - color: rgbaObjectToHex8(values.stroke.value) - } -}) + const shadowValueTransformer = (value) => ({ + [formatKeys.TYPE]: 'custom-shadow' as StandardTokenTypes, + [formatKeys.VALUE]: { + shadowType: value.effectType.value, + radius: value.radius.value, + color: rgbaObjectToHex8(value.color.value), + offsetX: value.offset.x.value, + offsetY: value.offset.y.value, + spread: value.spread.value + } + }) -const shadowValueTransformer = (value): StandardTokenDataInterface => ({ - type: 'custom-shadow' as StandardTokenTypes, - value: { - shadowType: value.effectType.value, - radius: value.radius.value, - color: rgbaObjectToHex8(value.color.value), - offsetX: value.offset.x.value, - offsetY: value.offset.y.value, - spread: value.spread.value + const effectValueTransformer = ({ values }): StandardTokenDataInterface | StandardTokenGroup => { + const effects = values.map(effect => { + if (['dropShadow', 'innerShadow'].includes(effect.effectType.value)) { + return shadowValueTransformer(effect) + } + // blur not implemented + return null + }) + // single effect + if (effects.length === 1) { + return effects[0] + } + // multiple effects + return { ...effects } } -}) -const effectValueTransformer = ({ values }): StandardTokenDataInterface | StandardTokenGroup => { - const effects = values.map(effect => { - if (['dropShadow', 'innerShadow'].includes(effect.effectType.value)) { - return shadowValueTransformer(effect) + const motionValueTransformer = ({ values }) => ({ + [formatKeys.TYPE]: 'custom-transition' as StandardTokenTypes, + [formatKeys.VALUE]: { + transitionType: values.transitionType.value, + duration: values.duration.value, + ...(values.direction ? { direction: values.direction.value } : {}), + easingType: values.easingCurveType.value, + easingFunction: Object.fromEntries( + Object.entries(values.easingFunction).map(prop => { + // @ts-ignore + return [prop[0], prop[1].value] + } + )) } - // blur not implemented - return null }) - // single effect - if (effects.length === 1) { - return effects[0] - } - // multiple effects - return { ...effects } -} -const motionValueTransformer = ({ values }): StandardTokenDataInterface => ({ - type: 'custom-transition' as StandardTokenTypes, - value: { - transitionType: values.transitionType.value, - duration: values.duration.value, - ...(values.direction ? { direction: values.direction.value } : {}), - easingType: values.easingCurveType.value, - easingFunction: Object.fromEntries( - Object.entries(values.easingFunction).map(prop => { - // @ts-ignore - return [prop[0], prop[1].value] - } - )) + const valueTransformer = { + size: widthToDimensionTransformer, + color: fillValueTransformer, + gradient: fillValueTransformer, + font: fontStyleValueTransformer, + effect: effectValueTransformer, + grid: gridValueTransformer, + border: borderValueTransformer, + breakpoint: widthToDimensionTransformer, + radius: radiusValueTransformer, + spacing: spacingValueTransformer, + motion: motionValueTransformer, + opacity: opacityValueTransformer } -}) -const valueTransformer = { - size: widthToDimensionTransformer, - color: fillValueTransformer, - gradient: fillValueTransformer, - font: fontStyleValueTransformer, - effect: effectValueTransformer, - grid: gridValueTransformer, - border: borderValueTransformer, - breakpoint: widthToDimensionTransformer, - radius: radiusValueTransformer, - spacing: spacingValueTransformer, - motion: motionValueTransformer, - opacity: opacityValueTransformer -} - -const transformTokens = (token: internalTokenInterface): StandardTokenDataInterface | StandardTokenGroup => valueTransformer[token.category](token) + const transformTokens = (token: internalTokenInterface): StandardTokenDataInterface | StandardTokenGroup => valueTransformer[token.category](token) -const transformer = (token: internalTokenInterface): StandardTokenInterface | StandardTokenGroup => { - if (token.category === 'typography') { + return (token: internalTokenInterface): StandardTokenInterface | StandardTokenGroup => { + if (token.category === 'typography') { + // @ts-ignore + return { + [formatKeys.NAME]: token.name, + [formatKeys.DESCRIPTION]: token.description, + ...typographyValueTransformer(token) + } + } // @ts-ignore return { - name: token.name, - description: token.description, - ...typographyValueTransformer(token) + [formatKeys.NAME]: token.name, + [formatKeys.DESCRIPTION]: token.description, + ...transformTokens(token), + ...tokenExtensions(token, formatKeys) } } - // @ts-ignore - return { - name: token.name, - description: token.description, - ...transformTokens(token), - ...tokenExtensions(token) - } } - -export { transformer } +export { getStandardTransformer } diff --git a/src/transformer/tokenExtensions.ts b/src/transformer/tokenExtensions.ts index 25904451..d097365e 100644 --- a/src/transformer/tokenExtensions.ts +++ b/src/transformer/tokenExtensions.ts @@ -1,9 +1,10 @@ +import { formatKeysType } from '@config/format' import { internalTokenInterface } from '@typings/propertyObject' import { StandardTokenExtensionsInterface } from '@typings/standardToken' -export const tokenExtensions = (token: internalTokenInterface): { extensions: StandardTokenExtensionsInterface; } => { +export const tokenExtensions = (token: internalTokenInterface, formatKeys: formatKeysType): { [key: string]: StandardTokenExtensionsInterface; } => { return { - extensions: { + [formatKeys.EXTENSIONS]: { ...token.extensions } } diff --git a/src/utilities/prefixTokenName.ts b/src/utilities/prefixTokenName.ts index 2141b43d..81883f60 100644 --- a/src/utilities/prefixTokenName.ts +++ b/src/utilities/prefixTokenName.ts @@ -5,9 +5,16 @@ import { StandardTokenInterface } from '@typings/standardToken' const getExportKey = (token: OriginalFormatTokenInterface | StandardTokenInterface) => { // standard token + // @ts-ignore if (token.extensions?.[config.key.extensionPluginData]?.exportKey !== undefined) { + // @ts-ignore return token.extensions[config.key.extensionPluginData].exportKey } + // @ts-ignore + if (token.$extensions?.[config.key.extensionPluginData]?.exportKey !== undefined) { + // @ts-ignore + return token.$extensions[config.key.extensionPluginData].exportKey + } return 'missingExportKey' } @@ -31,7 +38,7 @@ export const prefixTokenName = (tokenArray: OriginalFormatTokenInterface[] | Sta // add exportKey to token if (token.extensions?.[config.key.extensionPluginData]?.alias !== undefined) { token.extensions[config.key.extensionPluginData].alias = `${getExportKey(token)}.${token.extensions[config.key.extensionPluginData].alias -}` + }` } } diff --git a/src/utilities/prepareExport.ts b/src/utilities/prepareExport.ts index 886c32b1..42ead0c9 100644 --- a/src/utilities/prepareExport.ts +++ b/src/utilities/prepareExport.ts @@ -1,17 +1,19 @@ import { internalTokenInterface } from '@typings/propertyObject' import { Settings } from '../../types/settings' import { transformer as originalFormatTransformer } from '@src/transformer/originalFormatTransformer' -import { transformer as standardTransformer } from '@src/transformer/standardTransformer' +import { getStandardTransformer } from '@src/transformer/standardTransformer' import { groupByKeyAndName } from '@utils/groupByName' import { tokenTypes } from '@config/tokenTypes' import { tokenCategoryType } from '@typings/tokenCategory' import { tokenExportKeyType } from '@typings/tokenExportKey' import config from '@config/config' import { prefixTokenName } from './prefixTokenName' +import { formatKeys } from '@config/format' const tokenTransformer = { original: originalFormatTransformer, - standard: standardTransformer + standardDeprecated: getStandardTransformer(formatKeys.standardDeprecated), + standard: getStandardTransformer(formatKeys.standard) } const createTypographyTokens = (tokens: internalTokenInterface[], format) => { diff --git a/types/standardToken.d.ts b/types/standardToken.d.ts index e6ea2c11..f93e2cca 100644 --- a/types/standardToken.d.ts +++ b/types/standardToken.d.ts @@ -1,25 +1,25 @@ import type { BlendType } from './valueTypes' export type customTokenTypes = 'custom-spacing' | -'custom-radius' | -'custom-fontStyle' | -'custom-shadow' | -'custom-transition' | -'custom-stroke' | -'custom-grid' | -'custom-gradient' | -'custom-opacity' + 'custom-radius' | + 'custom-fontStyle' | + 'custom-shadow' | + 'custom-transition' | + 'custom-stroke' | + 'custom-grid' | + 'custom-gradient' | + 'custom-opacity' export type StandardTokenTypes = 'string' | -'number' | -'object' | -'array' | -'boolean' | -'null' | -'color' | -'dimension' | -'font' | -customTokenTypes + 'number' | + 'object' | + 'array' | + 'boolean' | + 'null' | + 'color' | + 'dimension' | + 'font' | + customTokenTypes export type StandardTokenValueType = string | number | Array | Object | Boolean | null @@ -46,7 +46,7 @@ export type StandardTokenExtensionsInterface = { } } -export type StandardTokenDataInterface = { +export type StandardDeprecatedTokenDataInterface = { description?: string, value: StandardTokenValueType | StandardCompositeTokenValueType, type: StandardTokenTypes, @@ -54,6 +54,14 @@ export type StandardTokenDataInterface = { extensions?: StandardTokenExtensionsInterface } +export type StandardTokenDataInterface = { + $description?: string, + $value: StandardTokenValueType | StandardCompositeTokenValueType, + $type: StandardTokenTypes, + $extensions?: StandardTokenExtensionsInterface + blendMode?: BlendType, +} | StandardDeprecatedTokenDataInterface + export type StandardTokenInterface = { name: string } & StandardTokenDataInterface From b75e5be84d1482e34994b0e2d4fe4f79ae4696aa Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Sat, 10 Sep 2022 12:32:23 +0200 Subject: [PATCH 02/10] added standard deprecated to dropdown --- README.md | 16 ++++++++++++++++ src/ui/components/GeneralSettings.tsx | 8 ++++++-- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index c8d199f4..6d61ac00 100644 --- a/README.md +++ b/README.md @@ -273,6 +273,22 @@ This format is based on the current spec draft of the [Design Tokens W3C Communi It is much simpler and makes it easier to define custom transformers for amazon style dictionary. Every token follows this structure ([learn more](https://github.com/lukasoppermann/design-tokens/blob/main/types/standardToken.d.ts)): +```js +type StandardTokenInterface = { + name: string, + $description?: string, + $value: StandardTokenValueType | StandardCompositeTokenValueType, + $type: StandardTokenTypes, + $extensions?: StandardTokenExtensionsInterface +} +``` + +#### Standard deprecated (previous W3C draft) +The standard format has been updated. To make migration easier, the old version was moved into standard deprecated. +This version will be removed in the future, we highly encourage to update to the `standard` version. + +The only difference between this and the updated standard version is that the property keys of `value`, `type`,`description` and `extension` haven beend prefixed with a `$` in the new version. + ```js type StandardTokenInterface = { name: string, diff --git a/src/ui/components/GeneralSettings.tsx b/src/ui/components/GeneralSettings.tsx index ec5f1e81..db5d18fb 100644 --- a/src/ui/components/GeneralSettings.tsx +++ b/src/ui/components/GeneralSettings.tsx @@ -46,7 +46,7 @@ const isStyle = (key: string): boolean => ['color', 'gradient', 'grid', 'effect' export const GeneralSettings = () => { const [isStandard, setStandard] = useState(false) const { figmaUIApi, figmaMetaData } = useContext(FigmaContext) - const { settings, updateSettings } = useContext<{settings: Settings, updateSettings: any}>(SettingsContext) + const { settings, updateSettings } = useContext<{ settings: Settings, updateSettings: any }>(SettingsContext) const handleFormSubmit = (event) => { event.preventDefault() // Prevent form submit triggering navigation @@ -63,7 +63,7 @@ export const GeneralSettings = () => { accessToken: accessToken } } - // @ts-ignore + // @ts-ignore }, '*') } } @@ -138,6 +138,10 @@ export const GeneralSettings = () => { label: 'Standard (W3C draft)', value: 'standard' }, + { + label: 'Standard deprecated (previous W3C draft)', + value: 'standardDeprecated' + }, { label: 'Original (deprecated)', value: 'original' From 3607a3ef301567b1bb4ffcce58574a112873a516 Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Sat, 24 Sep 2022 18:37:48 +0200 Subject: [PATCH 03/10] update dropdown text --- src/ui/components/GeneralSettings.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/components/GeneralSettings.tsx b/src/ui/components/GeneralSettings.tsx index db5d18fb..89a8f4f3 100644 --- a/src/ui/components/GeneralSettings.tsx +++ b/src/ui/components/GeneralSettings.tsx @@ -135,7 +135,7 @@ export const GeneralSettings = () => { placeholder='Token format' options={[ { - label: 'Standard (W3C draft)', + label: 'Standard (W3C draft — 31.08.22)', value: 'standard' }, { From b408070d1883373727029b0deb0ffe4e281f195f Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Sun, 25 Sep 2022 20:57:22 +0200 Subject: [PATCH 04/10] fixed tests --- src/config/format.ts | 1 + .../data/transformedOldStandardTokens.data.ts | 541 ++++++++++++++++++ .../transformedOriginalFormatTokens.data.ts | 2 +- .../data/transformedStandardTokens.data.ts | 278 ++++----- ...transformer.oldStandardTransformer.test.ts | 40 ++ .../transformer.standardTransformer.test.ts | 15 +- 6 files changed, 735 insertions(+), 142 deletions(-) create mode 100644 tests/unit/data/transformedOldStandardTokens.data.ts create mode 100644 tests/unit/transformer.oldStandardTransformer.test.ts diff --git a/src/config/format.ts b/src/config/format.ts index 9217c4d2..8abfa955 100644 --- a/src/config/format.ts +++ b/src/config/format.ts @@ -1,3 +1,4 @@ +/* istanbul ignore file */ export type formatKeysType = { VALUE: '$value' | 'value', DESCRIPTION: '$description' | 'description', diff --git a/tests/unit/data/transformedOldStandardTokens.data.ts b/tests/unit/data/transformedOldStandardTokens.data.ts new file mode 100644 index 00000000..9791e9bd --- /dev/null +++ b/tests/unit/data/transformedOldStandardTokens.data.ts @@ -0,0 +1,541 @@ +// import { StandardTokenGroup, StandardTokenInterface } from '../../../types/standardToken' +// Tokens transformed to the "standard" format +export const transformedStandardTokens = { + /** + * size + */ + size: { + name: 'size token 16px (height: 24px)', + value: 16, + description: 'a size description', + type: 'dimension', + extensions: { + 'org.lukasoppermann.figmaDesignTokens': { + exportKey: 'size' + } + } + }, + /** + * breakpoint + */ + breakpoint: { + name: 'breakpoint token 1024px (height: 20px)', + value: 1024, + description: 'a breakpoint description', + type: 'dimension', + extensions: { + 'org.lukasoppermann.figmaDesignTokens': { + exportKey: 'breakpoint' + } + } + }, + /** + * opacity + */ + opacity: { + name: 'disabled button opacity', + value: 0.3, + description: 'an opacity description', + type: 'custom-opacity', + extensions: { + 'org.lukasoppermann.figmaDesignTokens': { + exportKey: 'opacity' + } + } + }, + /** + * spacing + */ + spacing: { + name: 'spacing 24, 20,16, 8', + description: 'a spacing token', + type: 'custom-spacing', + extensions: { + 'org.lukasoppermann.figmaDesignTokens': { + exportKey: 'spacing' + } + }, + value: { + top: 24, + bottom: 16, + right: 20, + left: 8 + } + }, + /** + * radiusMixed + */ + radiusMixed: { + name: 'radius 1,2,3,4', + description: 'a mixed radius token', + type: 'custom-radius', + extensions: { + 'org.lukasoppermann.figmaDesignTokens': { + exportKey: 'radius' + } + }, + value: { + topLeft: 1, + topRight: 2, + bottomRight: 3, + bottomLeft: 4, + smoothing: 0.5 + } + }, + /** + * radiusSingle + */ + radiusSingle: { + name: 'radius 5', + description: 'a single radius token', + type: 'custom-radius', + extensions: { + 'org.lukasoppermann.figmaDesignTokens': { + exportKey: 'radius' + } + }, + value: { + topLeft: 5, + topRight: 5, + bottomLeft: 5, + bottomRight: 5, + smoothing: 0.0 + } + }, + /** + * grid + */ + grid: { + name: 'grid', + description: 'a grid token', + type: 'custom-grid', + extensions: { + 'org.lukasoppermann.figmaDesignTokens': { + exportKey: 'grid' + } + }, + value: { + pattern: 'columns', + sectionSize: 8, + gutterSize: 8, + alignment: 'center', + count: 6, + offset: 16 + } + }, + multiGrid: { + name: 'multiGrid', + extensions: { + 'org.lukasoppermann.figmaDesignTokens': { + exportKey: 'grid' + } + }, + description: 'a multiGrid token', + 0: { + type: 'custom-grid', + value: { + pattern: 'columns', + sectionSize: 8, + gutterSize: 8, + alignment: 'center', + count: 6, + offset: 16 + } + }, + 1: { + type: 'custom-grid', + value: { + pattern: 'columns', + sectionSize: 8, + gutterSize: 8, + alignment: 'center', + count: 6, + offset: 16 + } + } + }, + /** + * font + */ + font: { + name: 'font 16', + description: 'a font token', + type: 'custom-fontStyle', + extensions: { + 'org.lukasoppermann.figmaDesignTokens': { + exportKey: 'font' + } + }, + value: { + fontSize: 16, + textDecoration: 'underline', + fontFamily: 'Helvetica', + fontWeight: 700, + fontStyle: 'italic', + fontStretch: 'normal', + letterSpacing: 19.2, + lineHeight: 19.2, + paragraphIndent: 0, + paragraphSpacing: 12, + textCase: 'none' + } + }, + typography: { + name: 'typography 16', + description: 'a typography token', + fontFamily: { + type: 'string', + value: 'Helvetica' + }, + fontSize: { + type: 'dimension', + value: 16 + }, + fontStretch: { + type: 'string', + value: 'normal' + }, + fontStyle: { + type: 'string', + value: 'italic' + }, + fontWeight: { + type: 'number', + value: 700 + }, + letterSpacing: { + type: 'dimension', + value: 0.3 + }, + lineHeight: { + type: 'dimension', + value: 18 + }, + paragraphIndent: { + type: 'dimension', + value: 0 + }, + paragraphSpacing: { + type: 'dimension', + value: 12 + }, + textCase: { + type: 'string', + value: 'none' + }, + textDecoration: { + type: 'string', + value: 'underline' + } + }, + + fontLhPercent: { + name: 'font-lh-percent', + description: 'Font with lineheight in percent', + fontSize: { + value: 16, + type: 'dimension' + }, + textDecoration: { + value: 'underline', + type: 'string' + }, + fontFamily: { + value: 'Helvetica', + type: 'string' + }, + fontWeight: { + value: 700, + type: 'number' + }, + fontStyle: { + value: 'italic', + type: 'string' + }, + fontStretch: { + value: 'normal', + type: 'string' + }, + letterSpacing: { + value: 0.3, + type: 'dimension' + }, + lineHeight: { + // @ts-ignore + value: 24, + type: 'dimension' + }, + paragraphIndent: { + value: 0, + type: 'dimension' + }, + paragraphSpacing: { + value: 12, + type: 'dimension' + }, + textCase: { + value: 'none', + type: 'string' + } + }, + /** + * border + */ + border: { + name: 'border', + description: 'a border token', + type: 'custom-stroke', + extensions: { + 'org.lukasoppermann.figmaDesignTokens': { + exportKey: 'border' + } + }, + value: { + color: '#ffe600ff', + weight: 4, + miterLimit: 0, + lineJoin: 'round', + lineCap: 'none', + dashPattern: [5, 5], + align: 'center' + } + }, + /** + * gradient + */ + gradient: { + name: 'gradient', + description: 'a gradient token', + type: 'custom-gradient', + extensions: { + 'org.lukasoppermann.figmaDesignTokens': { + exportKey: 'gradient' + } + }, + value: { + gradientType: 'linear', + rotation: 45, + stops: [{ + position: 0, + color: '#ffe60040' + }, { + position: 1, + color: '#0064fa80' + }] + } + }, + /** + * color + */ + color: { + name: 'background', + description: 'a color token', + type: 'color', + value: '#ffe600ff', + blendMode: 'normal', + extensions: { + 'org.lukasoppermann.figmaDesignTokens': { + exportKey: 'color' + } + } + }, + aliasColor: { + name: 'aliasColor', + description: 'a color token', + type: 'color', + value: '{{color}}', + blendMode: 'normal', + extensions: { + 'org.lukasoppermann.figmaDesignTokens': { + exportKey: 'color', + alias: '{color}' + } + } + }, + multiColor: { + name: 'multiColor', + extensions: { + 'org.lukasoppermann.figmaDesignTokens': { + exportKey: 'color' + } + }, + description: 'a multi color token', + 0: { + type: 'color', + value: '#ffe600ff', + blendMode: 'normal' + }, + 1: { + type: 'color', + value: '#0064ff80', + blendMode: 'normal' + } + }, + /** + * gradient and color + */ + gradientAndColor: { + name: 'gradientAndColor', + extensions: { + 'org.lukasoppermann.figmaDesignTokens': { + exportKey: 'gradient' + } + }, + description: 'a gradient and color token', + 0: { + type: 'custom-gradient', + value: { + gradientType: 'linear', + rotation: 45, + stops: [{ + position: 0, + color: '#ffe600ff' + }, { + position: 1, + color: '#0064faff' + }] + } + }, + 1: { + value: '#0064ff80', + type: 'color', + blendMode: 'normal' + } + }, + colorAndGradient: { + name: 'colorAndGradient', + extensions: { + 'org.lukasoppermann.figmaDesignTokens': { + exportKey: 'color' + } + }, + description: 'a color and gradient token', + 0: { + value: '#ffe600ff', + type: 'color', + blendMode: 'normal' + }, + 1: { + type: 'custom-gradient', + value: { + gradientType: 'linear', + rotation: 45, + stops: [{ + position: 0, + color: '#ffe600ff' + }, { + position: 1, + color: '#0064faff' + }] + } + } + }, + /** + * effect + */ + effect: { + name: 'effect', + extensions: { + 'org.lukasoppermann.figmaDesignTokens': { + exportKey: 'effect' + } + }, + description: 'an effect token', + type: 'custom-shadow', + value: { + shadowType: 'dropShadow', + radius: 0, + color: '#0a0c0e1a', + offsetX: 2, + offsetY: 4, + spread: 0 + } + }, + blurEffect: { + name: 'blur effect', + extensions: { + 'org.lukasoppermann.figmaDesignTokens': { + exportKey: 'effect' + } + }, + description: 'an effect token' + }, + multiEffect: { + name: 'multiEffect', + extensions: { + 'org.lukasoppermann.figmaDesignTokens': { + exportKey: 'effect' + } + }, + description: 'a multi effect token', + 0: { + type: 'custom-shadow', + value: { + shadowType: 'dropShadow', + radius: 0, + color: '#0a0c0e1a', + offsetX: 2, + offsetY: 4, + spread: 0 + } + }, + 1: { + type: 'custom-shadow', + value: { + shadowType: 'dropShadow', + radius: 0, + color: '#0a0c0e33', + offsetX: 2, + offsetY: 4, + spread: 0 + } + } + }, + /** + * motion + */ + motion: { + name: 'motion', + description: 'a motion token', + type: 'custom-transition', + extensions: { + 'org.lukasoppermann.figmaDesignTokens': { + exportKey: 'motion' + } + }, + value: { + transitionType: 'slide_in', + duration: 0.2, + direction: 'top', + easingType: 'cubicBezier', + easingFunction: { + x1: 0.41999998688697815, + x2: 0, + y1: 1, + y2: 1 + } + } + }, + springMotion: { + name: 'springMotion', + description: 'a springMotion token', + type: 'custom-transition', + extensions: { + 'org.lukasoppermann.figmaDesignTokens': { + exportKey: 'motion' + } + }, + value: { + transitionType: 'slide_out', + duration: 0.3, + direction: 'top', + easingType: 'spring', + easingFunction: { + mass: 1, + damping: 300, + stiffness: 15 + } + } + } +// END of object +} diff --git a/tests/unit/data/transformedOriginalFormatTokens.data.ts b/tests/unit/data/transformedOriginalFormatTokens.data.ts index c7d9b8c6..7ea7ff9e 100644 --- a/tests/unit/data/transformedOriginalFormatTokens.data.ts +++ b/tests/unit/data/transformedOriginalFormatTokens.data.ts @@ -30,7 +30,7 @@ export const transformedOriginalTokens = { exportKey: 'opacity', name: 'disabled button opacity', type: 'number', - value: 0.3, + value: 0.3 }, /** * spacing diff --git a/tests/unit/data/transformedStandardTokens.data.ts b/tests/unit/data/transformedStandardTokens.data.ts index 9791e9bd..904e822e 100644 --- a/tests/unit/data/transformedStandardTokens.data.ts +++ b/tests/unit/data/transformedStandardTokens.data.ts @@ -1,4 +1,4 @@ -// import { StandardTokenGroup, StandardTokenInterface } from '../../../types/standardToken' +// import { StandardTokenGroup, StandardTokenInterface } from '../../../$types/standardToken' // Tokens transformed to the "standard" format export const transformedStandardTokens = { /** @@ -6,10 +6,10 @@ export const transformedStandardTokens = { */ size: { name: 'size token 16px (height: 24px)', - value: 16, - description: 'a size description', - type: 'dimension', - extensions: { + $value: 16, + $description: 'a size description', + $type: 'dimension', + $extensions: { 'org.lukasoppermann.figmaDesignTokens': { exportKey: 'size' } @@ -20,10 +20,10 @@ export const transformedStandardTokens = { */ breakpoint: { name: 'breakpoint token 1024px (height: 20px)', - value: 1024, - description: 'a breakpoint description', - type: 'dimension', - extensions: { + $value: 1024, + $description: 'a breakpoint description', + $type: 'dimension', + $extensions: { 'org.lukasoppermann.figmaDesignTokens': { exportKey: 'breakpoint' } @@ -34,10 +34,10 @@ export const transformedStandardTokens = { */ opacity: { name: 'disabled button opacity', - value: 0.3, - description: 'an opacity description', - type: 'custom-opacity', - extensions: { + $value: 0.3, + $description: 'an opacity description', + $type: 'custom-opacity', + $extensions: { 'org.lukasoppermann.figmaDesignTokens': { exportKey: 'opacity' } @@ -48,14 +48,14 @@ export const transformedStandardTokens = { */ spacing: { name: 'spacing 24, 20,16, 8', - description: 'a spacing token', - type: 'custom-spacing', - extensions: { + $description: 'a spacing token', + $type: 'custom-spacing', + $extensions: { 'org.lukasoppermann.figmaDesignTokens': { exportKey: 'spacing' } }, - value: { + $value: { top: 24, bottom: 16, right: 20, @@ -67,14 +67,14 @@ export const transformedStandardTokens = { */ radiusMixed: { name: 'radius 1,2,3,4', - description: 'a mixed radius token', - type: 'custom-radius', - extensions: { + $description: 'a mixed radius token', + $type: 'custom-radius', + $extensions: { 'org.lukasoppermann.figmaDesignTokens': { exportKey: 'radius' } }, - value: { + $value: { topLeft: 1, topRight: 2, bottomRight: 3, @@ -87,14 +87,14 @@ export const transformedStandardTokens = { */ radiusSingle: { name: 'radius 5', - description: 'a single radius token', - type: 'custom-radius', - extensions: { + $description: 'a single radius token', + $type: 'custom-radius', + $extensions: { 'org.lukasoppermann.figmaDesignTokens': { exportKey: 'radius' } }, - value: { + $value: { topLeft: 5, topRight: 5, bottomLeft: 5, @@ -107,14 +107,14 @@ export const transformedStandardTokens = { */ grid: { name: 'grid', - description: 'a grid token', - type: 'custom-grid', - extensions: { + $description: 'a grid token', + $type: 'custom-grid', + $extensions: { 'org.lukasoppermann.figmaDesignTokens': { exportKey: 'grid' } }, - value: { + $value: { pattern: 'columns', sectionSize: 8, gutterSize: 8, @@ -125,15 +125,15 @@ export const transformedStandardTokens = { }, multiGrid: { name: 'multiGrid', - extensions: { + $extensions: { 'org.lukasoppermann.figmaDesignTokens': { exportKey: 'grid' } }, - description: 'a multiGrid token', + $description: 'a multiGrid token', 0: { - type: 'custom-grid', - value: { + $type: 'custom-grid', + $value: { pattern: 'columns', sectionSize: 8, gutterSize: 8, @@ -143,8 +143,8 @@ export const transformedStandardTokens = { } }, 1: { - type: 'custom-grid', - value: { + $type: 'custom-grid', + $value: { pattern: 'columns', sectionSize: 8, gutterSize: 8, @@ -159,14 +159,14 @@ export const transformedStandardTokens = { */ font: { name: 'font 16', - description: 'a font token', - type: 'custom-fontStyle', - extensions: { + $description: 'a font token', + $type: 'custom-fontStyle', + $extensions: { 'org.lukasoppermann.figmaDesignTokens': { exportKey: 'font' } }, - value: { + $value: { fontSize: 16, textDecoration: 'underline', fontFamily: 'Helvetica', @@ -182,100 +182,100 @@ export const transformedStandardTokens = { }, typography: { name: 'typography 16', - description: 'a typography token', + $description: 'a typography token', fontFamily: { - type: 'string', - value: 'Helvetica' + $type: 'string', + $value: 'Helvetica' }, fontSize: { - type: 'dimension', - value: 16 + $type: 'dimension', + $value: 16 }, fontStretch: { - type: 'string', - value: 'normal' + $type: 'string', + $value: 'normal' }, fontStyle: { - type: 'string', - value: 'italic' + $type: 'string', + $value: 'italic' }, fontWeight: { - type: 'number', - value: 700 + $type: 'number', + $value: 700 }, letterSpacing: { - type: 'dimension', - value: 0.3 + $type: 'dimension', + $value: 0.3 }, lineHeight: { - type: 'dimension', - value: 18 + $type: 'dimension', + $value: 18 }, paragraphIndent: { - type: 'dimension', - value: 0 + $type: 'dimension', + $value: 0 }, paragraphSpacing: { - type: 'dimension', - value: 12 + $type: 'dimension', + $value: 12 }, textCase: { - type: 'string', - value: 'none' + $type: 'string', + $value: 'none' }, textDecoration: { - type: 'string', - value: 'underline' + $type: 'string', + $value: 'underline' } }, fontLhPercent: { name: 'font-lh-percent', - description: 'Font with lineheight in percent', + $description: 'Font with lineheight in percent', fontSize: { - value: 16, - type: 'dimension' + $value: 16, + $type: 'dimension' }, textDecoration: { - value: 'underline', - type: 'string' + $value: 'underline', + $type: 'string' }, fontFamily: { - value: 'Helvetica', - type: 'string' + $value: 'Helvetica', + $type: 'string' }, fontWeight: { - value: 700, - type: 'number' + $value: 700, + $type: 'number' }, fontStyle: { - value: 'italic', - type: 'string' + $value: 'italic', + $type: 'string' }, fontStretch: { - value: 'normal', - type: 'string' + $value: 'normal', + $type: 'string' }, letterSpacing: { - value: 0.3, - type: 'dimension' + $value: 0.3, + $type: 'dimension' }, lineHeight: { // @ts-ignore - value: 24, - type: 'dimension' + $value: 24, + $type: 'dimension' }, paragraphIndent: { - value: 0, - type: 'dimension' + $value: 0, + $type: 'dimension' }, paragraphSpacing: { - value: 12, - type: 'dimension' + $value: 12, + $type: 'dimension' }, textCase: { - value: 'none', - type: 'string' + $value: 'none', + $type: 'string' } }, /** @@ -283,14 +283,14 @@ export const transformedStandardTokens = { */ border: { name: 'border', - description: 'a border token', - type: 'custom-stroke', - extensions: { + $description: 'a border token', + $type: 'custom-stroke', + $extensions: { 'org.lukasoppermann.figmaDesignTokens': { exportKey: 'border' } }, - value: { + $value: { color: '#ffe600ff', weight: 4, miterLimit: 0, @@ -305,14 +305,14 @@ export const transformedStandardTokens = { */ gradient: { name: 'gradient', - description: 'a gradient token', - type: 'custom-gradient', - extensions: { + $description: 'a gradient token', + $type: 'custom-gradient', + $extensions: { 'org.lukasoppermann.figmaDesignTokens': { exportKey: 'gradient' } }, - value: { + $value: { gradientType: 'linear', rotation: 45, stops: [{ @@ -329,11 +329,11 @@ export const transformedStandardTokens = { */ color: { name: 'background', - description: 'a color token', - type: 'color', - value: '#ffe600ff', + $description: 'a color token', + $type: 'color', + $value: '#ffe600ff', blendMode: 'normal', - extensions: { + $extensions: { 'org.lukasoppermann.figmaDesignTokens': { exportKey: 'color' } @@ -341,11 +341,11 @@ export const transformedStandardTokens = { }, aliasColor: { name: 'aliasColor', - description: 'a color token', - type: 'color', - value: '{{color}}', + $description: 'a color token', + $type: 'color', + $value: '{{color}}', blendMode: 'normal', - extensions: { + $extensions: { 'org.lukasoppermann.figmaDesignTokens': { exportKey: 'color', alias: '{color}' @@ -354,20 +354,20 @@ export const transformedStandardTokens = { }, multiColor: { name: 'multiColor', - extensions: { + $extensions: { 'org.lukasoppermann.figmaDesignTokens': { exportKey: 'color' } }, - description: 'a multi color token', + $description: 'a multi color token', 0: { - type: 'color', - value: '#ffe600ff', + $type: 'color', + $value: '#ffe600ff', blendMode: 'normal' }, 1: { - type: 'color', - value: '#0064ff80', + $type: 'color', + $value: '#0064ff80', blendMode: 'normal' } }, @@ -376,15 +376,15 @@ export const transformedStandardTokens = { */ gradientAndColor: { name: 'gradientAndColor', - extensions: { + $extensions: { 'org.lukasoppermann.figmaDesignTokens': { exportKey: 'gradient' } }, - description: 'a gradient and color token', + $description: 'a gradient and color token', 0: { - type: 'custom-gradient', - value: { + $type: 'custom-gradient', + $value: { gradientType: 'linear', rotation: 45, stops: [{ @@ -397,27 +397,27 @@ export const transformedStandardTokens = { } }, 1: { - value: '#0064ff80', - type: 'color', + $value: '#0064ff80', + $type: 'color', blendMode: 'normal' } }, colorAndGradient: { name: 'colorAndGradient', - extensions: { + $extensions: { 'org.lukasoppermann.figmaDesignTokens': { exportKey: 'color' } }, - description: 'a color and gradient token', + $description: 'a color and gradient token', 0: { - value: '#ffe600ff', - type: 'color', + $value: '#ffe600ff', + $type: 'color', blendMode: 'normal' }, 1: { - type: 'custom-gradient', - value: { + $type: 'custom-gradient', + $value: { gradientType: 'linear', rotation: 45, stops: [{ @@ -435,14 +435,14 @@ export const transformedStandardTokens = { */ effect: { name: 'effect', - extensions: { + $extensions: { 'org.lukasoppermann.figmaDesignTokens': { exportKey: 'effect' } }, - description: 'an effect token', - type: 'custom-shadow', - value: { + $description: 'an effect token', + $type: 'custom-shadow', + $value: { shadowType: 'dropShadow', radius: 0, color: '#0a0c0e1a', @@ -453,24 +453,24 @@ export const transformedStandardTokens = { }, blurEffect: { name: 'blur effect', - extensions: { + $extensions: { 'org.lukasoppermann.figmaDesignTokens': { exportKey: 'effect' } }, - description: 'an effect token' + $description: 'an effect token' }, multiEffect: { name: 'multiEffect', - extensions: { + $extensions: { 'org.lukasoppermann.figmaDesignTokens': { exportKey: 'effect' } }, - description: 'a multi effect token', + $description: 'a multi effect token', 0: { - type: 'custom-shadow', - value: { + $type: 'custom-shadow', + $value: { shadowType: 'dropShadow', radius: 0, color: '#0a0c0e1a', @@ -480,8 +480,8 @@ export const transformedStandardTokens = { } }, 1: { - type: 'custom-shadow', - value: { + $type: 'custom-shadow', + $value: { shadowType: 'dropShadow', radius: 0, color: '#0a0c0e33', @@ -496,14 +496,14 @@ export const transformedStandardTokens = { */ motion: { name: 'motion', - description: 'a motion token', - type: 'custom-transition', - extensions: { + $description: 'a motion token', + $type: 'custom-transition', + $extensions: { 'org.lukasoppermann.figmaDesignTokens': { exportKey: 'motion' } }, - value: { + $value: { transitionType: 'slide_in', duration: 0.2, direction: 'top', @@ -518,14 +518,14 @@ export const transformedStandardTokens = { }, springMotion: { name: 'springMotion', - description: 'a springMotion token', - type: 'custom-transition', - extensions: { + $description: 'a springMotion token', + $type: 'custom-transition', + $extensions: { 'org.lukasoppermann.figmaDesignTokens': { exportKey: 'motion' } }, - value: { + $value: { transitionType: 'slide_out', duration: 0.3, direction: 'top', diff --git a/tests/unit/transformer.oldStandardTransformer.test.ts b/tests/unit/transformer.oldStandardTransformer.test.ts new file mode 100644 index 00000000..de8994c3 --- /dev/null +++ b/tests/unit/transformer.oldStandardTransformer.test.ts @@ -0,0 +1,40 @@ +import { getStandardTransformer } from '../../src/transformer/standardTransformer' +import { extractedFigmaTokens } from './data/extractedFigmaTokens.data' +import { transformedStandardTokens } from './data/transformedOldStandardTokens.data' +import { formatKeysType } from '../../src/config/format' + +const w3cFormatKeys: formatKeysType = { + VALUE: 'value', + DESCRIPTION: 'description', + TYPE: 'type', + EXTENSIONS: 'extensions', + NAME: 'name' +} + +describe('old w3c draft standard Transfomer', () => { + const transformer = getStandardTransformer(w3cFormatKeys) + // + test('size token', () => expect(transformer(extractedFigmaTokens.size)).toStrictEqual(transformedStandardTokens.size)) + test('breakpoint token', () => expect(transformer(extractedFigmaTokens.breakpoint)).toStrictEqual(transformedStandardTokens.breakpoint)) + test('spacing token', () => expect(transformer(extractedFigmaTokens.spacing)).toStrictEqual(transformedStandardTokens.spacing)) + test('radius mixed token', () => expect(transformer(extractedFigmaTokens.radiusMixed)).toStrictEqual(transformedStandardTokens.radiusMixed)) + test('radius single token', () => expect(transformer(extractedFigmaTokens.radiusSingle)).toStrictEqual(transformedStandardTokens.radiusSingle)) + test('grid token', () => expect(transformer(extractedFigmaTokens.grid)).toStrictEqual(transformedStandardTokens.grid)) + test('multi grid token', () => expect(transformer(extractedFigmaTokens.multiGrid)).toStrictEqual(transformedStandardTokens.multiGrid)) + test('font token', () => expect(transformer(extractedFigmaTokens.font)).toStrictEqual(transformedStandardTokens.font)) + test('typography token', () => expect(transformer(extractedFigmaTokens.typography)).toStrictEqual(transformedStandardTokens.typography)) + test('font with lineheight percent', () => expect(transformer(extractedFigmaTokens.fontLhPercent)).toStrictEqual(transformedStandardTokens.fontLhPercent)) + test('color token', () => expect(transformer(extractedFigmaTokens.color)).toStrictEqual(transformedStandardTokens.color)) + test('alias color token', () => expect(transformer(extractedFigmaTokens.aliasColor)).toStrictEqual(transformedStandardTokens.aliasColor)) + test('multi color token', () => expect(transformer(extractedFigmaTokens.multiColor)).toStrictEqual(transformedStandardTokens.multiColor)) + test('gradient token', () => expect(transformer(extractedFigmaTokens.gradient)).toStrictEqual(transformedStandardTokens.gradient)) + test('color and gradient token', () => expect(transformer(extractedFigmaTokens.colorAndGradient)).toStrictEqual(transformedStandardTokens.colorAndGradient)) + test('gradient and color', () => expect(transformer(extractedFigmaTokens.gradientAndColor)).toStrictEqual(transformedStandardTokens.gradientAndColor)) + test('border token', () => expect(transformer(extractedFigmaTokens.border)).toStrictEqual(transformedStandardTokens.border)) + test('effect token', () => expect(transformer(extractedFigmaTokens.effect)).toStrictEqual(transformedStandardTokens.effect)) + test('blur effect token', () => expect(transformer(extractedFigmaTokens.blurEffect)).toStrictEqual(transformedStandardTokens.blurEffect)) + test('multi effect token', () => expect(transformer(extractedFigmaTokens.multiEffect)).toStrictEqual(transformedStandardTokens.multiEffect)) + test('motion token', () => expect(transformer(extractedFigmaTokens.motion)).toStrictEqual(transformedStandardTokens.motion)) + test('motion token', () => expect(transformer(extractedFigmaTokens.springMotion)).toStrictEqual(transformedStandardTokens.springMotion)) + test('opacity token', () => expect(transformer(extractedFigmaTokens.opacity)).toStrictEqual(transformedStandardTokens.opacity)) +}) diff --git a/tests/unit/transformer.standardTransformer.test.ts b/tests/unit/transformer.standardTransformer.test.ts index 41d07c47..9278ca2d 100644 --- a/tests/unit/transformer.standardTransformer.test.ts +++ b/tests/unit/transformer.standardTransformer.test.ts @@ -1,8 +1,19 @@ -import { transformer } from '../../src/transformer/standardTransformer' +import { getStandardTransformer } from '../../src/transformer/standardTransformer' import { extractedFigmaTokens } from './data/extractedFigmaTokens.data' import { transformedStandardTokens } from './data/transformedStandardTokens.data' +import { formatKeysType } from '../../src/config/format' -describe('standard Transfomer', () => { +const w3cFormatKeys: formatKeysType = { + VALUE: '$value', + DESCRIPTION: '$description', + TYPE: '$type', + EXTENSIONS: '$extensions', + NAME: 'name' +} + +describe('w3c draft standard Transfomer', () => { + const transformer = getStandardTransformer(w3cFormatKeys) + // test('size token', () => expect(transformer(extractedFigmaTokens.size)).toStrictEqual(transformedStandardTokens.size)) test('breakpoint token', () => expect(transformer(extractedFigmaTokens.breakpoint)).toStrictEqual(transformedStandardTokens.breakpoint)) test('spacing token', () => expect(transformer(extractedFigmaTokens.spacing)).toStrictEqual(transformedStandardTokens.spacing)) From d7ce0344e6ec490f0d3ac28ec7b8a9468076011f Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Sun, 25 Sep 2022 21:22:31 +0200 Subject: [PATCH 05/10] finalize tests --- package.json | 4 +- tests/data/variables.css | 8 - tests/files/previous-standard-tokens.json | 1333 +++++++++++++++++ tests/files/standard-tokens.json | 752 +++++----- tests/integration/cssOutput.test.ts | 17 +- .../data/previous-standard.variables.css | 135 ++ tests/integration/jsonOutput.test.ts | 2 +- tests/integration/previous-standard.build.js | 42 + .../{data => spec_data}/cssOutput.data.ts | 0 .../cssStandardOutput.data.ts | 0 .../jsonOriginalFormat.data.ts | 0 tests/integration/standard.build.js | 11 + 12 files changed, 1915 insertions(+), 389 deletions(-) delete mode 100644 tests/data/variables.css create mode 100644 tests/files/previous-standard-tokens.json create mode 100644 tests/integration/data/previous-standard.variables.css create mode 100644 tests/integration/previous-standard.build.js rename tests/integration/{data => spec_data}/cssOutput.data.ts (100%) rename tests/integration/{data => spec_data}/cssStandardOutput.data.ts (100%) rename tests/integration/{data => spec_data}/jsonOriginalFormat.data.ts (100%) diff --git a/package.json b/package.json index 78260b6d..e65f46c5 100644 --- a/package.json +++ b/package.json @@ -14,8 +14,8 @@ "test": "npm run lint ; npm run test:unit ; npm run test:integration", "test:unit": "jest tests/unit", "test:originalTokens": "style-dictionary build --config ./tests/integration/original.config.json", - "test:standardTokens": "node ./tests/integration/standard.build.js", - "test:integration": "rm ./tests/integration/data/original.variables.css & rm ./tests/integration/data/standard.variables.css && npm run test:originalTokens & npm run test:standardTokens && jest tests/integration --coverage=false", + "test:standardTokens": "node ./tests/integration/standard.build.js && node ./tests/integration/previous-standard.build.js", + "test:integration": "rm -rf ./tests/integration/data && npm run test:originalTokens & npm run test:standardTokens && jest tests/integration --coverage=false", "lint": "standardx src/**/*.ts src/*.ts | snazzy", "examples": "rm -rf ./examples/build && node ./examples/build.js", "set-version": "replace-in-files --regex='\\d+\\.\\d+\\.\\d+' --replacement=$npm_package_version src/utilities/version.ts", diff --git a/tests/data/variables.css b/tests/data/variables.css deleted file mode 100644 index e278a052..00000000 --- a/tests/data/variables.css +++ /dev/null @@ -1,8 +0,0 @@ -/** - * Do not edit directly - * Generated on Fri, 02 Oct 2020 06:55:39 GMT - */ - -:root { - -} diff --git a/tests/files/previous-standard-tokens.json b/tests/files/previous-standard-tokens.json new file mode 100644 index 00000000..29ff2901 --- /dev/null +++ b/tests/files/previous-standard-tokens.json @@ -0,0 +1,1333 @@ +{ + "sizes": { + "32": { + "description": "32.72px spacer component", + "value": 32.72, + "type": "dimension", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "exportKey": "size" + } + } + }, + "40": { + "description": null, + "value": 40, + "type": "dimension", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "exportKey": "size" + } + } + }, + "60": { + "description": null, + "value": 60, + "type": "dimension", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "exportKey": "size" + } + } + }, + "80": { + "description": null, + "value": 80, + "type": "dimension", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "exportKey": "size" + } + } + }, + "plain token": { + "description": null, + "value": 200, + "type": "dimension", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "exportKey": "size" + } + } + }, + "token in frame": { + "description": null, + "value": 200, + "type": "dimension", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "exportKey": "size" + } + } + }, + "token in group": { + "description": null, + "value": 200, + "type": "dimension", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "exportKey": "size" + } + } + }, + "in variant 60": { + "description": null, + "value": 60, + "type": "dimension", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "exportKey": "size" + } + } + }, + "in variant 90": { + "description": null, + "value": 90, + "type": "dimension", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "exportKey": "size" + } + } + }, + "in variant 120": { + "description": null, + "value": 120, + "type": "dimension", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "exportKey": "size" + } + } + }, + "frame": { + "description": null, + "value": 32, + "type": "dimension", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "exportKey": "size" + } + } + }, + "rect": { + "description": null, + "value": 32, + "type": "dimension", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "exportKey": "size" + } + } + }, + "shape in component": { + "description": "Should use 32px not 20 from inside shape", + "value": 32, + "type": "dimension", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "exportKey": "size" + } + } + } + }, + "breakpoints": { + "lg": { + "description": null, + "value": 1280, + "type": "dimension", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "exportKey": "breakpoint" + } + } + }, + "sm": { + "description": null, + "value": 768, + "type": "dimension", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "exportKey": "breakpoint" + } + } + }, + "md": { + "description": null, + "value": 1024, + "type": "dimension", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "exportKey": "breakpoint" + } + } + } + }, + "spacing": { + "10": { + "description": null, + "type": "custom-spacing", + "value": { + "top": 10, + "bottom": 10, + "left": 10, + "right": 10 + }, + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "exportKey": "spacing" + } + } + }, + "mixed": { + "description": null, + "type": "custom-spacing", + "value": { + "top": 10, + "bottom": 30, + "left": 20, + "right": 20 + }, + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "exportKey": "spacing" + } + } + }, + "top": { + "description": null, + "type": "custom-spacing", + "value": { + "top": 10, + "bottom": 0, + "left": 0, + "right": 0 + }, + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "exportKey": "spacing" + } + } + } + }, + "borders": { + "single": { + "description": null, + "type": "custom-stroke", + "value": { + "align": "inside", + "dashPattern": [ + 0, + 0 + ], + "lineCap": "none", + "lineJoin": "miter", + "miterLimit": 4, + "weight": 5, + "color": "#000000ff" + }, + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "exportKey": "border" + } + } + }, + "dashed outside": { + "description": null, + "type": "custom-stroke", + "value": { + "align": "outside", + "dashPattern": [ + 5, + 5, + 3, + 3 + ], + "lineCap": "none", + "lineJoin": "miter", + "miterLimit": 4, + "weight": 5, + "color": "#000000ff" + }, + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "exportKey": "border" + } + } + }, + "single (style)": { + "description": null, + "type": "custom-stroke", + "value": { + "align": "inside", + "dashPattern": [ + 0, + 0 + ], + "lineCap": "none", + "lineJoin": "miter", + "miterLimit": 4, + "weight": 5, + "color": "#044affff" + }, + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "exportKey": "border" + } + } + }, + "unsupported": { + "multiple borders": { + "description": null, + "type": "custom-stroke", + "value": { + "align": "inside", + "dashPattern": [ + 5, + 10 + ], + "lineCap": "none", + "lineJoin": "miter", + "miterLimit": 4, + "weight": 5, + "color": "#ffe600ff" + }, + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "exportKey": "border" + } + } + } + } + }, + "radius": { + "5": { + "description": null, + "type": "custom-radius", + "value": { + "smoothing": 0, + "topLeft": 5, + "topRight": 5, + "bottomLeft": 5, + "bottomRight": 5 + }, + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "exportKey": "radius" + } + } + } + }, + "radii": { + "smoothing": { + "description": null, + "type": "custom-radius", + "value": { + "smoothing": 0.75, + "topLeft": 10, + "topRight": 10, + "bottomLeft": 10, + "bottomRight": 10 + }, + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "exportKey": "radius" + } + } + }, + "mixed": { + "description": null, + "type": "custom-radius", + "value": { + "smoothing": 0, + "topLeft": 5.5, + "topRight": 10, + "bottomLeft": 20, + "bottomRight": 15 + }, + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "exportKey": "radius" + } + } + } + }, + "motion": { + "move in": { + "description": null, + "type": "custom-transition", + "value": { + "transitionType": "move_in", + "duration": 0.5, + "direction": "left", + "easingType": "cubicBezier", + "easingFunction": { + "x1": 0.41999998688697815, + "x2": 1, + "y1": 0, + "y2": 1 + } + }, + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "exportKey": "motion" + } + } + }, + "dissolve": { + "description": null, + "type": "custom-transition", + "value": { + "transitionType": "dissolve", + "duration": 0.45, + "easingType": "cubicBezier", + "easingFunction": { + "x1": 0.6968395709991455, + "x2": 0.06683959811925888, + "y1": 0.052326660603284836, + "y2": 0.9323266744613647 + } + }, + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "exportKey": "motion" + } + } + }, + "smart": { + "description": null, + "type": "custom-transition", + "value": { + "transitionType": "smart_animate", + "duration": 0.5, + "easingType": "cubicBezier", + "easingFunction": { + "x1": 0, + "x2": 1, + "y1": 0, + "y2": 1 + } + }, + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "exportKey": "motion" + } + } + }, + "push": { + "description": null, + "type": "custom-transition", + "value": { + "transitionType": "push", + "duration": 0.5, + "direction": "left", + "easingType": "cubicBezier", + "easingFunction": { + "x1": 0.30000001192092896, + "x2": 0.699999988079071, + "y1": -0.05000000074505806, + "y2": -0.5 + } + }, + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "exportKey": "motion" + } + } + }, + "bouncy": { + "description": null, + "type": "custom-transition", + "value": { + "transitionType": "push", + "duration": 0.958, + "direction": "left", + "easingType": "spring", + "easingFunction": { + "mass": 1, + "stiffness": 600, + "damping": 15 + } + }, + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "exportKey": "motion" + } + } + }, + "custom spring": { + "description": null, + "type": "custom-transition", + "value": { + "transitionType": "push", + "duration": 0.744, + "direction": "left", + "easingType": "spring", + "easingFunction": { + "mass": 1, + "stiffness": 300, + "damping": 20 + } + }, + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "exportKey": "motion" + } + } + } + }, + "opacities": { + "0.25": { + "description": null, + "value": 0.25, + "type": "custom-opacity", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "exportKey": "opacity" + } + } + } + }, + "opacity": { + "full": { + "description": null, + "value": 1, + "type": "custom-opacity", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "exportKey": "opacity" + } + } + }, + "half": { + "description": null, + "value": 0.5, + "type": "custom-opacity", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "exportKey": "opacity" + } + } + } + }, + "gradient": { + "gradient": { + "single with multiple color stops": { + "description": "Four color stops from yellow to red", + "type": "custom-gradient", + "value": { + "gradientType": "radial", + "rotation": 180, + "stops": [ + { + "position": 0, + "color": "#ffb800ff" + }, + { + "position": 0.34, + "color": "#ff8a00ff" + }, + { + "position": 0.65, + "color": "#ff2e00ff" + }, + { + "position": 1, + "color": "#ff0000ff" + } + ] + }, + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "styleId": "S:86b7ea8e4f88825c7ab660ae5f7cbbadfe6eb72f,", + "exportKey": "gradient" + } + } + }, + "multiplegrad": { + "0": { + "type": "custom-gradient", + "value": { + "gradientType": "linear", + "rotation": 180, + "stops": [ + { + "position": 0, + "color": "#ffb800ff" + }, + { + "position": 1, + "color": "#ffb80000" + } + ] + } + }, + "1": { + "type": "custom-gradient", + "value": { + "gradientType": "radial", + "rotation": 180, + "stops": [ + { + "position": 0, + "color": "#ffffffff" + }, + { + "position": 1, + "color": "#ffffff00" + } + ] + } + }, + "2": { + "type": "custom-gradient", + "value": { + "gradientType": "angular", + "rotation": 180, + "stops": [ + { + "position": 0, + "color": "#cf3030ff" + }, + { + "position": 1, + "color": "#ffffff00" + } + ] + } + }, + "3": { + "type": "custom-gradient", + "value": { + "gradientType": "diamond", + "rotation": 180, + "stops": [ + { + "position": 0, + "color": "#4a4fccff" + }, + { + "position": 0.23, + "color": "#ffffff00" + } + ] + } + }, + "description": "", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "styleId": "S:8ecc948b0d4487a6c702db3a947317e19be8fe7c,", + "exportKey": "gradient" + } + } + } + } + }, + "color": { + "colors": { + "semi red": { + "description": "A red with a 50% opacity", + "type": "color", + "value": "#ff5f0480", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "styleId": "S:73ee61b85a05b803a735041e06d604cf5b5e396c,", + "exportKey": "color" + } + } + }, + "multiple fills": { + "0": { + "type": "color", + "value": "#40ffbaff", + "blendMode": "normal" + }, + "1": { + "type": "color", + "value": "#0000001a", + "blendMode": "normal" + }, + "description": "", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "styleId": "S:4a3029d323d8fb0c05dee39a983dafea20d7221e,", + "exportKey": "color" + } + } + }, + "single blue": { + "description": "", + "type": "color", + "value": "#044affff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "styleId": "S:41c3b1bbb20c349db5198426c9f21eee91270703,", + "exportKey": "color" + } + } + }, + "ref blue": { + "description": "Some other description", + "type": "color", + "value": "{color.colors.single blue}", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "styleId": "S:a466a5c4f753617558885425bf0c42b7a53fcda4,", + "exportKey": "color", + "alias": "color.colors.single blue" + } + } + }, + "empty": { + "description": "", + "type": "color", + "value": "#00000000", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "styleId": "S:5e1d174ea8c7f59af7d8eeb52856a48cfe285856,", + "exportKey": "color" + } + } + }, + "special characters": { + "😅": { + "description": "Emoji", + "type": "color", + "value": "#40df50ff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "styleId": "S:0eca3633c52956ddb97940c7445007a90b937be1,", + "exportKey": "color" + } + } + }, + "änderung": { + "description": "", + "type": "color", + "value": "#3456afff", + "blendMode": "normal", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "styleId": "S:79e9a7afce7078dc29994d2791959ebf9f45efa5,", + "exportKey": "color" + } + } + } + } + } + }, + "grid": { + "multiple": { + "0": { + "type": "custom-grid", + "value": { + "pattern": "columns", + "sectionSize": 1, + "gutterSize": 20, + "alignment": "max", + "count": 7, + "offset": 3 + } + }, + "1": { + "type": "custom-grid", + "value": { + "pattern": "columns", + "sectionSize": 12, + "gutterSize": 20, + "alignment": "center", + "count": 6 + } + }, + "2": { + "type": "custom-grid", + "value": { + "pattern": "columns", + "gutterSize": 20, + "alignment": "stretch", + "count": 5, + "offset": 10 + } + }, + "3": { + "type": "custom-grid", + "value": { + "pattern": "columns", + "sectionSize": 34, + "gutterSize": 20, + "alignment": "min", + "count": 4, + "offset": 13 + } + }, + "4": { + "type": "custom-grid", + "value": { + "pattern": "rows", + "sectionSize": 8, + "gutterSize": 20, + "alignment": "max", + "count": 5, + "offset": 10 + } + }, + "5": { + "type": "custom-grid", + "value": { + "pattern": "rows", + "sectionSize": 8, + "gutterSize": 10, + "alignment": "center", + "count": 4 + } + }, + "6": { + "type": "custom-grid", + "value": { + "pattern": "rows", + "sectionSize": 8, + "gutterSize": 20, + "alignment": "min", + "count": 3, + "offset": 10 + } + }, + "7": { + "type": "custom-grid", + "value": { + "pattern": "grid", + "sectionSize": 8 + } + }, + "description": "Grid / multiple description text", + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "styleId": "S:9431d2997261a6e36216749d0d5927407d95c07f,", + "exportKey": "grid" + } + } + }, + "single": { + "description": null, + "type": "custom-grid", + "value": { + "pattern": "columns", + "sectionSize": 11, + "gutterSize": 20, + "alignment": "center", + "count": 5 + }, + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "styleId": "S:8892f13476c0db3092e552a57f31a286640fc9d5,", + "exportKey": "grid" + } + } + } + }, + "font": { + "body": { + "h3": { + "description": "Comment for text style", + "type": "custom-fontStyle", + "value": { + "fontSize": 20, + "textDecoration": "none", + "fontFamily": "Akzidenz-Grotesk Pro", + "fontWeight": 700, + "fontStyle": "normal", + "fontStretch": "condensed", + "letterSpacing": 0.4, + "lineHeight": 32, + "paragraphIndent": 5, + "paragraphSpacing": 8, + "textCase": "uppercase" + }, + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "styleId": "S:a63c53704c21e63e557974232108ecd0ef16f3e2,", + "exportKey": "font" + } + } + }, + "h4 strike through": { + "description": "With stylisitc options", + "type": "custom-fontStyle", + "value": { + "fontSize": 16, + "textDecoration": "line-through", + "fontFamily": "Roboto", + "fontWeight": 500, + "fontStyle": "italic", + "fontStretch": "normal", + "letterSpacing": 0, + "lineHeight": 19.2, + "paragraphIndent": 0, + "paragraphSpacing": 0, + "textCase": "none" + }, + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "styleId": "S:c9389cf45c1db49fd46f961809ca352488397f7d,", + "exportKey": "font" + } + } + }, + "italic": { + "type": "custom-fontStyle", + "value": { + "fontSize": 12, + "textDecoration": "none", + "fontFamily": "Roboto", + "fontWeight": 400, + "fontStyle": "italic", + "fontStretch": "normal", + "letterSpacing": 0, + "lineHeight": 14, + "paragraphIndent": 0, + "paragraphSpacing": 0, + "textCase": "none" + }, + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "styleId": "S:9928779749ba4b821d81880d1e41ccefd2b76951,", + "exportKey": "font" + } + } + }, + "extra bold condensed italic": { + "type": "custom-fontStyle", + "value": { + "fontSize": 12, + "textDecoration": "none", + "fontFamily": "Akzidenz-Grotesk Pro", + "fontWeight": 800, + "fontStyle": "italic", + "fontStretch": "condensed", + "letterSpacing": 0, + "lineHeight": 14.4, + "paragraphIndent": 0, + "paragraphSpacing": 0, + "textCase": "none" + }, + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "styleId": "S:2eab5c798e7b6de010927c757b69f3d605097439,", + "exportKey": "font" + } + } + }, + "medium extended italic": { + "type": "custom-fontStyle", + "value": { + "fontSize": 20, + "textDecoration": "none", + "fontFamily": "Akzidenz-Grotesk Pro", + "fontWeight": 500, + "fontStyle": "italic", + "fontStretch": "expanded", + "letterSpacing": 0, + "lineHeight": 24, + "paragraphIndent": 0, + "paragraphSpacing": 0, + "textCase": "none" + }, + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "styleId": "S:65286eb024a509b4cfaef329affbae773fb73a5e,", + "exportKey": "font" + } + } + }, + "super": { + "type": "custom-fontStyle", + "value": { + "fontSize": 22, + "textDecoration": "none", + "fontFamily": "Akzidenz-Grotesk Pro", + "fontWeight": 900, + "fontStyle": "normal", + "fontStretch": "normal", + "letterSpacing": 0, + "lineHeight": 26.4, + "paragraphIndent": 0, + "paragraphSpacing": 0, + "textCase": "none" + }, + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "styleId": "S:32eb85f3238ccaa59c15d6de911c57afa96ba58a,", + "exportKey": "font" + } + } + } + } + }, + "effect": { + "drop shadow (single)": { + "description": "Drop shadow single description", + "type": "custom-shadow", + "value": { + "shadowType": "dropShadow", + "radius": 4, + "color": "#00000040", + "offsetX": 0, + "offsetY": 4, + "spread": 0 + }, + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "styleId": "S:cef90a92a0f669207251e8e2da214b6393abc44c,", + "exportKey": "effect" + } + } + }, + "inner shadow (multiple)": { + "0": { + "type": "custom-shadow", + "value": { + "shadowType": "innerShadow", + "radius": 4, + "color": "#00000040", + "offsetX": 0, + "offsetY": 4, + "spread": 0 + } + }, + "1": { + "type": "custom-shadow", + "value": { + "shadowType": "innerShadow", + "radius": 1, + "color": "#000000ff", + "offsetX": 10, + "offsetY": 100, + "spread": 0.5 + } + }, + "2": { + "type": "custom-shadow", + "value": { + "shadowType": "innerShadow", + "radius": 3, + "color": "#00000040", + "offsetX": -4, + "offsetY": 2, + "spread": 11 + } + }, + "description": null, + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "styleId": "S:23c7adc38dc6cf8e157c05f8885409d3e1cf4de2,", + "exportKey": "effect" + } + } + }, + "layer blur": { + "description": null, + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "styleId": "S:8a600422767982ef9e712451bb9f60a9d2c0e04f,", + "exportKey": "effect" + } + } + }, + "background blur": { + "description": null, + "extensions": { + "org.lukasoppermann.figmaDesignTokens": { + "styleId": "S:d9246d6c5234e471b17585324379ec19abcf03f4,", + "exportKey": "effect" + } + } + } + }, + "typography": { + "body": { + "h3": { + "description": "Comment for text style", + "fontSize": { + "type": "dimension", + "value": 20 + }, + "textDecoration": { + "type": "string", + "value": "none" + }, + "fontFamily": { + "type": "string", + "value": "Akzidenz-Grotesk Pro" + }, + "fontWeight": { + "type": "number", + "value": 700 + }, + "fontStyle": { + "type": "string", + "value": "normal" + }, + "fontStretch": { + "type": "string", + "value": "condensed" + }, + "letterSpacing": { + "type": "dimension", + "value": 0.4 + }, + "lineHeight": { + "type": "dimension", + "value": 32 + }, + "paragraphIndent": { + "type": "dimension", + "value": 5 + }, + "paragraphSpacing": { + "type": "dimension", + "value": 8 + }, + "textCase": { + "type": "string", + "value": "uppercase" + } + }, + "h4 strike through": { + "description": "With stylisitc options", + "fontSize": { + "type": "dimension", + "value": 16 + }, + "textDecoration": { + "type": "string", + "value": "line-through" + }, + "fontFamily": { + "type": "string", + "value": "Roboto" + }, + "fontWeight": { + "type": "number", + "value": 500 + }, + "fontStyle": { + "type": "string", + "value": "italic" + }, + "fontStretch": { + "type": "string", + "value": "normal" + }, + "letterSpacing": { + "type": "dimension", + "value": 0 + }, + "lineHeight": { + "type": "dimension", + "value": 19.2 + }, + "paragraphIndent": { + "type": "dimension", + "value": 0 + }, + "paragraphSpacing": { + "type": "dimension", + "value": 0 + }, + "textCase": { + "type": "string", + "value": "none" + } + }, + "italic": { + "fontSize": { + "type": "dimension", + "value": 12 + }, + "textDecoration": { + "type": "string", + "value": "none" + }, + "fontFamily": { + "type": "string", + "value": "Roboto" + }, + "fontWeight": { + "type": "number", + "value": 400 + }, + "fontStyle": { + "type": "string", + "value": "italic" + }, + "fontStretch": { + "type": "string", + "value": "normal" + }, + "letterSpacing": { + "type": "dimension", + "value": 0 + }, + "lineHeight": { + "type": "dimension", + "value": 14 + }, + "paragraphIndent": { + "type": "dimension", + "value": 0 + }, + "paragraphSpacing": { + "type": "dimension", + "value": 0 + }, + "textCase": { + "type": "string", + "value": "none" + } + }, + "extra bold condensed italic": { + "fontSize": { + "type": "dimension", + "value": 12 + }, + "textDecoration": { + "type": "string", + "value": "none" + }, + "fontFamily": { + "type": "string", + "value": "Akzidenz-Grotesk Pro" + }, + "fontWeight": { + "type": "number", + "value": 800 + }, + "fontStyle": { + "type": "string", + "value": "italic" + }, + "fontStretch": { + "type": "string", + "value": "condensed" + }, + "letterSpacing": { + "type": "dimension", + "value": 0 + }, + "lineHeight": { + "type": "dimension", + "value": 14.4 + }, + "paragraphIndent": { + "type": "dimension", + "value": 0 + }, + "paragraphSpacing": { + "type": "dimension", + "value": 0 + }, + "textCase": { + "type": "string", + "value": "none" + } + }, + "medium extended italic": { + "fontSize": { + "type": "dimension", + "value": 20 + }, + "textDecoration": { + "type": "string", + "value": "none" + }, + "fontFamily": { + "type": "string", + "value": "Akzidenz-Grotesk Pro" + }, + "fontWeight": { + "type": "number", + "value": 500 + }, + "fontStyle": { + "type": "string", + "value": "italic" + }, + "fontStretch": { + "type": "string", + "value": "expanded" + }, + "letterSpacing": { + "type": "dimension", + "value": 0 + }, + "lineHeight": { + "type": "dimension", + "value": 24 + }, + "paragraphIndent": { + "type": "dimension", + "value": 0 + }, + "paragraphSpacing": { + "type": "dimension", + "value": 0 + }, + "textCase": { + "type": "string", + "value": "none" + } + }, + "super": { + "fontSize": { + "type": "dimension", + "value": 22 + }, + "textDecoration": { + "type": "string", + "value": "none" + }, + "fontFamily": { + "type": "string", + "value": "Akzidenz-Grotesk Pro" + }, + "fontWeight": { + "type": "number", + "value": 900 + }, + "fontStyle": { + "type": "string", + "value": "normal" + }, + "fontStretch": { + "type": "string", + "value": "normal" + }, + "letterSpacing": { + "type": "dimension", + "value": 0 + }, + "lineHeight": { + "type": "dimension", + "value": 26.4 + }, + "paragraphIndent": { + "type": "dimension", + "value": 0 + }, + "paragraphSpacing": { + "type": "dimension", + "value": 0 + }, + "textCase": { + "type": "string", + "value": "none" + } + } + } + } +} \ No newline at end of file diff --git a/tests/files/standard-tokens.json b/tests/files/standard-tokens.json index 29ff2901..ca8655d9 100644 --- a/tests/files/standard-tokens.json +++ b/tests/files/standard-tokens.json @@ -1,130 +1,130 @@ { "sizes": { "32": { - "description": "32.72px spacer component", - "value": 32.72, - "type": "dimension", - "extensions": { + "$description": "32.72px spacer component", + "$value": 32.72, + "$type": "dimension", + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "exportKey": "size" } } }, "40": { - "description": null, - "value": 40, - "type": "dimension", - "extensions": { + "$description": null, + "$value": 40, + "$type": "dimension", + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "exportKey": "size" } } }, "60": { - "description": null, - "value": 60, - "type": "dimension", - "extensions": { + "$description": null, + "$value": 60, + "$type": "dimension", + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "exportKey": "size" } } }, "80": { - "description": null, - "value": 80, - "type": "dimension", - "extensions": { + "$description": null, + "$value": 80, + "$type": "dimension", + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "exportKey": "size" } } }, "plain token": { - "description": null, - "value": 200, - "type": "dimension", - "extensions": { + "$description": null, + "$value": 200, + "$type": "dimension", + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "exportKey": "size" } } }, "token in frame": { - "description": null, - "value": 200, - "type": "dimension", - "extensions": { + "$description": null, + "$value": 200, + "$type": "dimension", + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "exportKey": "size" } } }, "token in group": { - "description": null, - "value": 200, - "type": "dimension", - "extensions": { + "$description": null, + "$value": 200, + "$type": "dimension", + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "exportKey": "size" } } }, "in variant 60": { - "description": null, - "value": 60, - "type": "dimension", - "extensions": { + "$description": null, + "$value": 60, + "$type": "dimension", + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "exportKey": "size" } } }, "in variant 90": { - "description": null, - "value": 90, - "type": "dimension", - "extensions": { + "$description": null, + "$value": 90, + "$type": "dimension", + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "exportKey": "size" } } }, "in variant 120": { - "description": null, - "value": 120, - "type": "dimension", - "extensions": { + "$description": null, + "$value": 120, + "$type": "dimension", + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "exportKey": "size" } } }, "frame": { - "description": null, - "value": 32, - "type": "dimension", - "extensions": { + "$description": null, + "$value": 32, + "$type": "dimension", + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "exportKey": "size" } } }, "rect": { - "description": null, - "value": 32, - "type": "dimension", - "extensions": { + "$description": null, + "$value": 32, + "$type": "dimension", + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "exportKey": "size" } } }, "shape in component": { - "description": "Should use 32px not 20 from inside shape", - "value": 32, - "type": "dimension", - "extensions": { + "$description": "Should use 32px not 20 from inside shape", + "$value": 32, + "$type": "dimension", + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "exportKey": "size" } @@ -133,30 +133,30 @@ }, "breakpoints": { "lg": { - "description": null, - "value": 1280, - "type": "dimension", - "extensions": { + "$description": null, + "$value": 1280, + "$type": "dimension", + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "exportKey": "breakpoint" } } }, "sm": { - "description": null, - "value": 768, - "type": "dimension", - "extensions": { + "$description": null, + "$value": 768, + "$type": "dimension", + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "exportKey": "breakpoint" } } }, "md": { - "description": null, - "value": 1024, - "type": "dimension", - "extensions": { + "$description": null, + "$value": 1024, + "$type": "dimension", + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "exportKey": "breakpoint" } @@ -165,45 +165,45 @@ }, "spacing": { "10": { - "description": null, - "type": "custom-spacing", - "value": { + "$description": null, + "$type": "custom-spacing", + "$value": { "top": 10, "bottom": 10, "left": 10, "right": 10 }, - "extensions": { + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "exportKey": "spacing" } } }, "mixed": { - "description": null, - "type": "custom-spacing", - "value": { + "$description": null, + "$type": "custom-spacing", + "$value": { "top": 10, "bottom": 30, "left": 20, "right": 20 }, - "extensions": { + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "exportKey": "spacing" } } }, "top": { - "description": null, - "type": "custom-spacing", - "value": { + "$description": null, + "$type": "custom-spacing", + "$value": { "top": 10, "bottom": 0, "left": 0, "right": 0 }, - "extensions": { + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "exportKey": "spacing" } @@ -212,9 +212,9 @@ }, "borders": { "single": { - "description": null, - "type": "custom-stroke", - "value": { + "$description": null, + "$type": "custom-stroke", + "$value": { "align": "inside", "dashPattern": [ 0, @@ -226,16 +226,16 @@ "weight": 5, "color": "#000000ff" }, - "extensions": { + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "exportKey": "border" } } }, "dashed outside": { - "description": null, - "type": "custom-stroke", - "value": { + "$description": null, + "$type": "custom-stroke", + "$value": { "align": "outside", "dashPattern": [ 5, @@ -249,16 +249,16 @@ "weight": 5, "color": "#000000ff" }, - "extensions": { + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "exportKey": "border" } } }, "single (style)": { - "description": null, - "type": "custom-stroke", - "value": { + "$description": null, + "$type": "custom-stroke", + "$value": { "align": "inside", "dashPattern": [ 0, @@ -270,7 +270,7 @@ "weight": 5, "color": "#044affff" }, - "extensions": { + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "exportKey": "border" } @@ -278,9 +278,9 @@ }, "unsupported": { "multiple borders": { - "description": null, - "type": "custom-stroke", - "value": { + "$description": null, + "$type": "custom-stroke", + "$value": { "align": "inside", "dashPattern": [ 5, @@ -292,7 +292,7 @@ "weight": 5, "color": "#ffe600ff" }, - "extensions": { + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "exportKey": "border" } @@ -302,16 +302,16 @@ }, "radius": { "5": { - "description": null, - "type": "custom-radius", - "value": { + "$description": null, + "$type": "custom-radius", + "$value": { "smoothing": 0, "topLeft": 5, "topRight": 5, "bottomLeft": 5, "bottomRight": 5 }, - "extensions": { + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "exportKey": "radius" } @@ -320,32 +320,32 @@ }, "radii": { "smoothing": { - "description": null, - "type": "custom-radius", - "value": { + "$description": null, + "$type": "custom-radius", + "$value": { "smoothing": 0.75, "topLeft": 10, "topRight": 10, "bottomLeft": 10, "bottomRight": 10 }, - "extensions": { + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "exportKey": "radius" } } }, "mixed": { - "description": null, - "type": "custom-radius", - "value": { + "$description": null, + "$type": "custom-radius", + "$value": { "smoothing": 0, "topLeft": 5.5, "topRight": 10, "bottomLeft": 20, "bottomRight": 15 }, - "extensions": { + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "exportKey": "radius" } @@ -354,9 +354,9 @@ }, "motion": { "move in": { - "description": null, - "type": "custom-transition", - "value": { + "$description": null, + "$type": "custom-transition", + "$value": { "transitionType": "move_in", "duration": 0.5, "direction": "left", @@ -368,16 +368,16 @@ "y2": 1 } }, - "extensions": { + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "exportKey": "motion" } } }, "dissolve": { - "description": null, - "type": "custom-transition", - "value": { + "$description": null, + "$type": "custom-transition", + "$value": { "transitionType": "dissolve", "duration": 0.45, "easingType": "cubicBezier", @@ -388,16 +388,16 @@ "y2": 0.9323266744613647 } }, - "extensions": { + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "exportKey": "motion" } } }, "smart": { - "description": null, - "type": "custom-transition", - "value": { + "$description": null, + "$type": "custom-transition", + "$value": { "transitionType": "smart_animate", "duration": 0.5, "easingType": "cubicBezier", @@ -408,16 +408,16 @@ "y2": 1 } }, - "extensions": { + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "exportKey": "motion" } } }, "push": { - "description": null, - "type": "custom-transition", - "value": { + "$description": null, + "$type": "custom-transition", + "$value": { "transitionType": "push", "duration": 0.5, "direction": "left", @@ -429,16 +429,16 @@ "y2": -0.5 } }, - "extensions": { + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "exportKey": "motion" } } }, "bouncy": { - "description": null, - "type": "custom-transition", - "value": { + "$description": null, + "$type": "custom-transition", + "$value": { "transitionType": "push", "duration": 0.958, "direction": "left", @@ -449,16 +449,16 @@ "damping": 15 } }, - "extensions": { + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "exportKey": "motion" } } }, "custom spring": { - "description": null, - "type": "custom-transition", - "value": { + "$description": null, + "$type": "custom-transition", + "$value": { "transitionType": "push", "duration": 0.744, "direction": "left", @@ -469,7 +469,7 @@ "damping": 20 } }, - "extensions": { + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "exportKey": "motion" } @@ -478,10 +478,10 @@ }, "opacities": { "0.25": { - "description": null, - "value": 0.25, - "type": "custom-opacity", - "extensions": { + "$description": null, + "$value": 0.25, + "$type": "custom-opacity", + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "exportKey": "opacity" } @@ -490,20 +490,20 @@ }, "opacity": { "full": { - "description": null, - "value": 1, - "type": "custom-opacity", - "extensions": { + "$description": null, + "$value": 1, + "$type": "custom-opacity", + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "exportKey": "opacity" } } }, "half": { - "description": null, - "value": 0.5, - "type": "custom-opacity", - "extensions": { + "$description": null, + "$value": 0.5, + "$type": "custom-opacity", + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "exportKey": "opacity" } @@ -513,9 +513,9 @@ "gradient": { "gradient": { "single with multiple color stops": { - "description": "Four color stops from yellow to red", - "type": "custom-gradient", - "value": { + "$description": "Four color stops from yellow to red", + "$type": "custom-gradient", + "$value": { "gradientType": "radial", "rotation": 180, "stops": [ @@ -537,7 +537,7 @@ } ] }, - "extensions": { + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "styleId": "S:86b7ea8e4f88825c7ab660ae5f7cbbadfe6eb72f,", "exportKey": "gradient" @@ -546,8 +546,8 @@ }, "multiplegrad": { "0": { - "type": "custom-gradient", - "value": { + "$type": "custom-gradient", + "$value": { "gradientType": "linear", "rotation": 180, "stops": [ @@ -563,8 +563,8 @@ } }, "1": { - "type": "custom-gradient", - "value": { + "$type": "custom-gradient", + "$value": { "gradientType": "radial", "rotation": 180, "stops": [ @@ -580,8 +580,8 @@ } }, "2": { - "type": "custom-gradient", - "value": { + "$type": "custom-gradient", + "$value": { "gradientType": "angular", "rotation": 180, "stops": [ @@ -597,8 +597,8 @@ } }, "3": { - "type": "custom-gradient", - "value": { + "$type": "custom-gradient", + "$value": { "gradientType": "diamond", "rotation": 180, "stops": [ @@ -613,8 +613,8 @@ ] } }, - "description": "", - "extensions": { + "$description": "", + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "styleId": "S:8ecc948b0d4487a6c702db3a947317e19be8fe7c,", "exportKey": "gradient" @@ -626,11 +626,11 @@ "color": { "colors": { "semi red": { - "description": "A red with a 50% opacity", - "type": "color", - "value": "#ff5f0480", + "$description": "A red with a 50% opacity", + "$type": "color", + "$value": "#ff5f0480", "blendMode": "normal", - "extensions": { + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "styleId": "S:73ee61b85a05b803a735041e06d604cf5b5e396c,", "exportKey": "color" @@ -639,17 +639,17 @@ }, "multiple fills": { "0": { - "type": "color", - "value": "#40ffbaff", + "$type": "color", + "$value": "#40ffbaff", "blendMode": "normal" }, "1": { - "type": "color", - "value": "#0000001a", + "$type": "color", + "$value": "#0000001a", "blendMode": "normal" }, - "description": "", - "extensions": { + "$description": "", + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "styleId": "S:4a3029d323d8fb0c05dee39a983dafea20d7221e,", "exportKey": "color" @@ -657,11 +657,11 @@ } }, "single blue": { - "description": "", - "type": "color", - "value": "#044affff", + "$description": "", + "$type": "color", + "$value": "#044affff", "blendMode": "normal", - "extensions": { + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "styleId": "S:41c3b1bbb20c349db5198426c9f21eee91270703,", "exportKey": "color" @@ -669,11 +669,11 @@ } }, "ref blue": { - "description": "Some other description", - "type": "color", - "value": "{color.colors.single blue}", + "$description": "Some other description", + "$type": "color", + "$value": "{color.colors.single blue}", "blendMode": "normal", - "extensions": { + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "styleId": "S:a466a5c4f753617558885425bf0c42b7a53fcda4,", "exportKey": "color", @@ -682,11 +682,11 @@ } }, "empty": { - "description": "", - "type": "color", - "value": "#00000000", + "$description": "", + "$type": "color", + "$value": "#00000000", "blendMode": "normal", - "extensions": { + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "styleId": "S:5e1d174ea8c7f59af7d8eeb52856a48cfe285856,", "exportKey": "color" @@ -695,11 +695,11 @@ }, "special characters": { "😅": { - "description": "Emoji", - "type": "color", - "value": "#40df50ff", + "$description": "Emoji", + "$type": "color", + "$value": "#40df50ff", "blendMode": "normal", - "extensions": { + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "styleId": "S:0eca3633c52956ddb97940c7445007a90b937be1,", "exportKey": "color" @@ -707,11 +707,11 @@ } }, "änderung": { - "description": "", - "type": "color", - "value": "#3456afff", + "$description": "", + "$type": "color", + "$value": "#3456afff", "blendMode": "normal", - "extensions": { + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "styleId": "S:79e9a7afce7078dc29994d2791959ebf9f45efa5,", "exportKey": "color" @@ -724,8 +724,8 @@ "grid": { "multiple": { "0": { - "type": "custom-grid", - "value": { + "$type": "custom-grid", + "$value": { "pattern": "columns", "sectionSize": 1, "gutterSize": 20, @@ -735,8 +735,8 @@ } }, "1": { - "type": "custom-grid", - "value": { + "$type": "custom-grid", + "$value": { "pattern": "columns", "sectionSize": 12, "gutterSize": 20, @@ -745,8 +745,8 @@ } }, "2": { - "type": "custom-grid", - "value": { + "$type": "custom-grid", + "$value": { "pattern": "columns", "gutterSize": 20, "alignment": "stretch", @@ -755,8 +755,8 @@ } }, "3": { - "type": "custom-grid", - "value": { + "$type": "custom-grid", + "$value": { "pattern": "columns", "sectionSize": 34, "gutterSize": 20, @@ -766,8 +766,8 @@ } }, "4": { - "type": "custom-grid", - "value": { + "$type": "custom-grid", + "$value": { "pattern": "rows", "sectionSize": 8, "gutterSize": 20, @@ -777,8 +777,8 @@ } }, "5": { - "type": "custom-grid", - "value": { + "$type": "custom-grid", + "$value": { "pattern": "rows", "sectionSize": 8, "gutterSize": 10, @@ -787,8 +787,8 @@ } }, "6": { - "type": "custom-grid", - "value": { + "$type": "custom-grid", + "$value": { "pattern": "rows", "sectionSize": 8, "gutterSize": 20, @@ -798,14 +798,14 @@ } }, "7": { - "type": "custom-grid", - "value": { + "$type": "custom-grid", + "$value": { "pattern": "grid", "sectionSize": 8 } }, - "description": "Grid / multiple description text", - "extensions": { + "$description": "Grid / multiple description text", + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "styleId": "S:9431d2997261a6e36216749d0d5927407d95c07f,", "exportKey": "grid" @@ -813,16 +813,16 @@ } }, "single": { - "description": null, - "type": "custom-grid", - "value": { + "$description": null, + "$type": "custom-grid", + "$value": { "pattern": "columns", "sectionSize": 11, "gutterSize": 20, "alignment": "center", "count": 5 }, - "extensions": { + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "styleId": "S:8892f13476c0db3092e552a57f31a286640fc9d5,", "exportKey": "grid" @@ -833,9 +833,9 @@ "font": { "body": { "h3": { - "description": "Comment for text style", - "type": "custom-fontStyle", - "value": { + "$description": "Comment for text style", + "$type": "custom-fontStyle", + "$value": { "fontSize": 20, "textDecoration": "none", "fontFamily": "Akzidenz-Grotesk Pro", @@ -848,7 +848,7 @@ "paragraphSpacing": 8, "textCase": "uppercase" }, - "extensions": { + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "styleId": "S:a63c53704c21e63e557974232108ecd0ef16f3e2,", "exportKey": "font" @@ -856,9 +856,9 @@ } }, "h4 strike through": { - "description": "With stylisitc options", - "type": "custom-fontStyle", - "value": { + "$description": "With stylisitc options", + "$type": "custom-fontStyle", + "$value": { "fontSize": 16, "textDecoration": "line-through", "fontFamily": "Roboto", @@ -871,7 +871,7 @@ "paragraphSpacing": 0, "textCase": "none" }, - "extensions": { + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "styleId": "S:c9389cf45c1db49fd46f961809ca352488397f7d,", "exportKey": "font" @@ -879,8 +879,8 @@ } }, "italic": { - "type": "custom-fontStyle", - "value": { + "$type": "custom-fontStyle", + "$value": { "fontSize": 12, "textDecoration": "none", "fontFamily": "Roboto", @@ -893,7 +893,7 @@ "paragraphSpacing": 0, "textCase": "none" }, - "extensions": { + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "styleId": "S:9928779749ba4b821d81880d1e41ccefd2b76951,", "exportKey": "font" @@ -901,8 +901,8 @@ } }, "extra bold condensed italic": { - "type": "custom-fontStyle", - "value": { + "$type": "custom-fontStyle", + "$value": { "fontSize": 12, "textDecoration": "none", "fontFamily": "Akzidenz-Grotesk Pro", @@ -915,7 +915,7 @@ "paragraphSpacing": 0, "textCase": "none" }, - "extensions": { + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "styleId": "S:2eab5c798e7b6de010927c757b69f3d605097439,", "exportKey": "font" @@ -923,8 +923,8 @@ } }, "medium extended italic": { - "type": "custom-fontStyle", - "value": { + "$type": "custom-fontStyle", + "$value": { "fontSize": 20, "textDecoration": "none", "fontFamily": "Akzidenz-Grotesk Pro", @@ -937,7 +937,7 @@ "paragraphSpacing": 0, "textCase": "none" }, - "extensions": { + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "styleId": "S:65286eb024a509b4cfaef329affbae773fb73a5e,", "exportKey": "font" @@ -945,8 +945,8 @@ } }, "super": { - "type": "custom-fontStyle", - "value": { + "$type": "custom-fontStyle", + "$value": { "fontSize": 22, "textDecoration": "none", "fontFamily": "Akzidenz-Grotesk Pro", @@ -959,7 +959,7 @@ "paragraphSpacing": 0, "textCase": "none" }, - "extensions": { + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "styleId": "S:32eb85f3238ccaa59c15d6de911c57afa96ba58a,", "exportKey": "font" @@ -970,9 +970,9 @@ }, "effect": { "drop shadow (single)": { - "description": "Drop shadow single description", - "type": "custom-shadow", - "value": { + "$description": "Drop shadow single description", + "$type": "custom-shadow", + "$value": { "shadowType": "dropShadow", "radius": 4, "color": "#00000040", @@ -980,7 +980,7 @@ "offsetY": 4, "spread": 0 }, - "extensions": { + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "styleId": "S:cef90a92a0f669207251e8e2da214b6393abc44c,", "exportKey": "effect" @@ -989,8 +989,8 @@ }, "inner shadow (multiple)": { "0": { - "type": "custom-shadow", - "value": { + "$type": "custom-shadow", + "$value": { "shadowType": "innerShadow", "radius": 4, "color": "#00000040", @@ -1000,8 +1000,8 @@ } }, "1": { - "type": "custom-shadow", - "value": { + "$type": "custom-shadow", + "$value": { "shadowType": "innerShadow", "radius": 1, "color": "#000000ff", @@ -1011,8 +1011,8 @@ } }, "2": { - "type": "custom-shadow", - "value": { + "$type": "custom-shadow", + "$value": { "shadowType": "innerShadow", "radius": 3, "color": "#00000040", @@ -1021,8 +1021,8 @@ "spread": 11 } }, - "description": null, - "extensions": { + "$description": null, + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "styleId": "S:23c7adc38dc6cf8e157c05f8885409d3e1cf4de2,", "exportKey": "effect" @@ -1030,8 +1030,8 @@ } }, "layer blur": { - "description": null, - "extensions": { + "$description": null, + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "styleId": "S:8a600422767982ef9e712451bb9f60a9d2c0e04f,", "exportKey": "effect" @@ -1039,8 +1039,8 @@ } }, "background blur": { - "description": null, - "extensions": { + "$description": null, + "$extensions": { "org.lukasoppermann.figmaDesignTokens": { "styleId": "S:d9246d6c5234e471b17585324379ec19abcf03f4,", "exportKey": "effect" @@ -1051,281 +1051,281 @@ "typography": { "body": { "h3": { - "description": "Comment for text style", + "$description": "Comment for text style", "fontSize": { - "type": "dimension", - "value": 20 + "$type": "dimension", + "$value": 20 }, "textDecoration": { - "type": "string", - "value": "none" + "$type": "string", + "$value": "none" }, "fontFamily": { - "type": "string", - "value": "Akzidenz-Grotesk Pro" + "$type": "string", + "$value": "Akzidenz-Grotesk Pro" }, "fontWeight": { - "type": "number", - "value": 700 + "$type": "number", + "$value": 700 }, "fontStyle": { - "type": "string", - "value": "normal" + "$type": "string", + "$value": "normal" }, "fontStretch": { - "type": "string", - "value": "condensed" + "$type": "string", + "$value": "condensed" }, "letterSpacing": { - "type": "dimension", - "value": 0.4 + "$type": "dimension", + "$value": 0.4 }, "lineHeight": { - "type": "dimension", - "value": 32 + "$type": "dimension", + "$value": 32 }, "paragraphIndent": { - "type": "dimension", - "value": 5 + "$type": "dimension", + "$value": 5 }, "paragraphSpacing": { - "type": "dimension", - "value": 8 + "$type": "dimension", + "$value": 8 }, "textCase": { - "type": "string", - "value": "uppercase" + "$type": "string", + "$value": "uppercase" } }, "h4 strike through": { - "description": "With stylisitc options", + "$description": "With stylisitc options", "fontSize": { - "type": "dimension", - "value": 16 + "$type": "dimension", + "$value": 16 }, "textDecoration": { - "type": "string", - "value": "line-through" + "$type": "string", + "$value": "line-through" }, "fontFamily": { - "type": "string", - "value": "Roboto" + "$type": "string", + "$value": "Roboto" }, "fontWeight": { - "type": "number", - "value": 500 + "$type": "number", + "$value": 500 }, "fontStyle": { - "type": "string", - "value": "italic" + "$type": "string", + "$value": "italic" }, "fontStretch": { - "type": "string", - "value": "normal" + "$type": "string", + "$value": "normal" }, "letterSpacing": { - "type": "dimension", - "value": 0 + "$type": "dimension", + "$value": 0 }, "lineHeight": { - "type": "dimension", - "value": 19.2 + "$type": "dimension", + "$value": 19.2 }, "paragraphIndent": { - "type": "dimension", - "value": 0 + "$type": "dimension", + "$value": 0 }, "paragraphSpacing": { - "type": "dimension", - "value": 0 + "$type": "dimension", + "$value": 0 }, "textCase": { - "type": "string", - "value": "none" + "$type": "string", + "$value": "none" } }, "italic": { "fontSize": { - "type": "dimension", - "value": 12 + "$type": "dimension", + "$value": 12 }, "textDecoration": { - "type": "string", - "value": "none" + "$type": "string", + "$value": "none" }, "fontFamily": { - "type": "string", - "value": "Roboto" + "$type": "string", + "$value": "Roboto" }, "fontWeight": { - "type": "number", - "value": 400 + "$type": "number", + "$value": 400 }, "fontStyle": { - "type": "string", - "value": "italic" + "$type": "string", + "$value": "italic" }, "fontStretch": { - "type": "string", - "value": "normal" + "$type": "string", + "$value": "normal" }, "letterSpacing": { - "type": "dimension", - "value": 0 + "$type": "dimension", + "$value": 0 }, "lineHeight": { - "type": "dimension", - "value": 14 + "$type": "dimension", + "$value": 14 }, "paragraphIndent": { - "type": "dimension", - "value": 0 + "$type": "dimension", + "$value": 0 }, "paragraphSpacing": { - "type": "dimension", - "value": 0 + "$type": "dimension", + "$value": 0 }, "textCase": { - "type": "string", - "value": "none" + "$type": "string", + "$value": "none" } }, "extra bold condensed italic": { "fontSize": { - "type": "dimension", - "value": 12 + "$type": "dimension", + "$value": 12 }, "textDecoration": { - "type": "string", - "value": "none" + "$type": "string", + "$value": "none" }, "fontFamily": { - "type": "string", - "value": "Akzidenz-Grotesk Pro" + "$type": "string", + "$value": "Akzidenz-Grotesk Pro" }, "fontWeight": { - "type": "number", - "value": 800 + "$type": "number", + "$value": 800 }, "fontStyle": { - "type": "string", - "value": "italic" + "$type": "string", + "$value": "italic" }, "fontStretch": { - "type": "string", - "value": "condensed" + "$type": "string", + "$value": "condensed" }, "letterSpacing": { - "type": "dimension", - "value": 0 + "$type": "dimension", + "$value": 0 }, "lineHeight": { - "type": "dimension", - "value": 14.4 + "$type": "dimension", + "$value": 14.4 }, "paragraphIndent": { - "type": "dimension", - "value": 0 + "$type": "dimension", + "$value": 0 }, "paragraphSpacing": { - "type": "dimension", - "value": 0 + "$type": "dimension", + "$value": 0 }, "textCase": { - "type": "string", - "value": "none" + "$type": "string", + "$value": "none" } }, "medium extended italic": { "fontSize": { - "type": "dimension", - "value": 20 + "$type": "dimension", + "$value": 20 }, "textDecoration": { - "type": "string", - "value": "none" + "$type": "string", + "$value": "none" }, "fontFamily": { - "type": "string", - "value": "Akzidenz-Grotesk Pro" + "$type": "string", + "$value": "Akzidenz-Grotesk Pro" }, "fontWeight": { - "type": "number", - "value": 500 + "$type": "number", + "$value": 500 }, "fontStyle": { - "type": "string", - "value": "italic" + "$type": "string", + "$value": "italic" }, "fontStretch": { - "type": "string", - "value": "expanded" + "$type": "string", + "$value": "expanded" }, "letterSpacing": { - "type": "dimension", - "value": 0 + "$type": "dimension", + "$value": 0 }, "lineHeight": { - "type": "dimension", - "value": 24 + "$type": "dimension", + "$value": 24 }, "paragraphIndent": { - "type": "dimension", - "value": 0 + "$type": "dimension", + "$value": 0 }, "paragraphSpacing": { - "type": "dimension", - "value": 0 + "$type": "dimension", + "$value": 0 }, "textCase": { - "type": "string", - "value": "none" + "$type": "string", + "$value": "none" } }, "super": { "fontSize": { - "type": "dimension", - "value": 22 + "$type": "dimension", + "$value": 22 }, "textDecoration": { - "type": "string", - "value": "none" + "$type": "string", + "$value": "none" }, "fontFamily": { - "type": "string", - "value": "Akzidenz-Grotesk Pro" + "$type": "string", + "$value": "Akzidenz-Grotesk Pro" }, "fontWeight": { - "type": "number", - "value": 900 + "$type": "number", + "$value": 900 }, "fontStyle": { - "type": "string", - "value": "normal" + "$type": "string", + "$value": "normal" }, "fontStretch": { - "type": "string", - "value": "normal" + "$type": "string", + "$value": "normal" }, "letterSpacing": { - "type": "dimension", - "value": 0 + "$type": "dimension", + "$value": 0 }, "lineHeight": { - "type": "dimension", - "value": 26.4 + "$type": "dimension", + "$value": 26.4 }, "paragraphIndent": { - "type": "dimension", - "value": 0 + "$type": "dimension", + "$value": 0 }, "paragraphSpacing": { - "type": "dimension", - "value": 0 + "$type": "dimension", + "$value": 0 }, "textCase": { - "type": "string", - "value": "none" + "$type": "string", + "$value": "none" } } } diff --git a/tests/integration/cssOutput.test.ts b/tests/integration/cssOutput.test.ts index 7bf9e24b..f928f1c6 100644 --- a/tests/integration/cssOutput.test.ts +++ b/tests/integration/cssOutput.test.ts @@ -1,6 +1,6 @@ import fs from 'fs' -import cssOutputData from './data/cssOutput.data' -import cssStandardOutputData from './data/cssStandardOutput.data' +import cssOutputData from './spec_data/cssOutput.data' +import cssStandardOutputData from './spec_data/cssStandardOutput.data' describe('Compare css converterd file to data set', () => { test('original css data', () => { @@ -28,4 +28,17 @@ describe('Compare css converterd file to data set', () => { // compare to data expect(convertedCss).toStrictEqual(cssStandardOutputData) }) + + test('previous standard css data', () => { + // read files + const css = fs.readFileSync('./tests/integration/data/previous-standard.variables.css', 'utf8').replace(/^\s+|\s+$/g, '') + // remove starting comment + const lines = css.split('\n') + // remove comment from start + lines.splice(0, lines.findIndex(line => line === ':root {')) + // join the array back into a single string + const convertedCss = lines.join('\n') + // compare to data + expect(convertedCss).toStrictEqual(cssStandardOutputData) + }) }) diff --git a/tests/integration/data/previous-standard.variables.css b/tests/integration/data/previous-standard.variables.css new file mode 100644 index 00000000..45166298 --- /dev/null +++ b/tests/integration/data/previous-standard.variables.css @@ -0,0 +1,135 @@ +:root { + --sizes-32: 32.72px; /* 32.72px spacer component */ + --sizes-40: 40px; + --sizes-60: 60px; + --sizes-80: 80px; + --sizes-plain-token: 200px; + --sizes-token-in-frame: 200px; + --sizes-token-in-group: 200px; + --sizes-in-variant-60: 60px; + --sizes-in-variant-90: 90px; + --sizes-in-variant-120: 120px; + --sizes-frame: 32px; + --sizes-rect: 32px; + --sizes-shape-in-component: 32px; /* Should use 32px not 20 from inside shape */ + --breakpoints-lg: 1280px; + --breakpoints-sm: 768px; + --breakpoints-md: 1024px; + --spacing-10: 10px; + --spacing-mixed: 10px 20px 30px 20px; + --spacing-top: 10px 0px 0px 0px; + --borders-single: [object Object]; + --borders-dashed-outside: [object Object]; + --borders-single-style: [object Object]; + --borders-unsupported-multiple-borders: [object Object]; + --radius-5: 5px; + --radii-smoothing: 10px; + --radii-mixed: 5.5px 10px 20px 15px; + --motion-move-in: [object Object]; + --motion-dissolve: [object Object]; + --motion-smart: [object Object]; + --motion-push: [object Object]; + --motion-bouncy: [object Object]; + --motion-custom-spring: [object Object]; + --opacities-0-25: 0.25; + --opacity-full: 1; + --opacity-half: 0.5; + --gradient-gradient-single-with-multiple-color-stops: radial-gradient(rgb(255, 184, 0) 0%, rgb(255, 138, 0) 34%, rgb(255, 46, 0) 65%, rgb(255, 0, 0) 100%); /* Four color stops from yellow to red */ + --gradient-gradient-multiplegrad-0: linear-gradient(180deg, rgb(255, 184, 0) 0%, rgba(255, 184, 0, 0) 100%); + --gradient-gradient-multiplegrad-1: radial-gradient(rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%); + --gradient-gradient-multiplegrad-2: undefined; + --gradient-gradient-multiplegrad-3: undefined; + --color-colors-semi-red: rgba(255, 95, 4, 0.5); /* A red with a 50% opacity */ + --color-colors-multiple-fills-0: rgb(64, 255, 186); + --color-colors-multiple-fills-1: rgba(0, 0, 0, 0.1); + --color-colors-single-blue: rgb(4, 74, 255); + --color-colors-ref-blue: rgb(4, 74, 255); /* Some other description */ + --color-colors-empty: rgba(0, 0, 0, 0); + --color-colors-special-characters: rgb(64, 223, 80); /* Emoji */ + --color-colors-special-characters-nderung: rgb(52, 86, 175); + --grid-multiple-0: [object Object]; + --grid-multiple-1: [object Object]; + --grid-multiple-2: [object Object]; + --grid-multiple-3: [object Object]; + --grid-multiple-4: [object Object]; + --grid-multiple-5: [object Object]; + --grid-multiple-6: [object Object]; + --grid-multiple-7: [object Object]; + --grid-single: [object Object]; + --font-body-h3: condensed 700 20/32 Akzidenz-Grotesk Pro; /* Comment for text style */ + --font-body-h4-strike-through: italic 500 16/19.2 Roboto; /* With stylisitc options */ + --font-body-italic: italic 400 12/14 Roboto; + --font-body-extra-bold-condensed-italic: condensed italic 800 12/14.4 Akzidenz-Grotesk Pro; + --font-body-medium-extended-italic: expanded italic 500 20/24 Akzidenz-Grotesk Pro; + --font-body-super: 900 22/26.4 Akzidenz-Grotesk Pro; + --effect-drop-shadow-single: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); /* Drop shadow single description */ + --effect-inner-shadow-multiple-0: inset 0px 4px 4px 0px rgba(0, 0, 0, 0.25); + --effect-inner-shadow-multiple-1: inset 10px 100px 1px 0.5px rgb(0, 0, 0); + --effect-inner-shadow-multiple-2: inset -4px 2px 3px 11px rgba(0, 0, 0, 0.25); + --typography-body-h3-font-size: 20px; + --typography-body-h3-text-decoration: none; + --typography-body-h3-font-family: Akzidenz-Grotesk Pro; + --typography-body-h3-font-weight: 700; + --typography-body-h3-font-style: normal; + --typography-body-h3-font-stretch: condensed; + --typography-body-h3-letter-spacing: 0.4px; + --typography-body-h3-line-height: 32px; + --typography-body-h3-paragraph-indent: 5px; + --typography-body-h3-paragraph-spacing: 8px; + --typography-body-h3-text-case: uppercase; + --typography-body-h4-strike-through-font-size: 16px; + --typography-body-h4-strike-through-text-decoration: line-through; + --typography-body-h4-strike-through-font-family: Roboto; + --typography-body-h4-strike-through-font-weight: 500; + --typography-body-h4-strike-through-font-style: italic; + --typography-body-h4-strike-through-font-stretch: normal; + --typography-body-h4-strike-through-letter-spacing: 0; + --typography-body-h4-strike-through-line-height: 19.2px; + --typography-body-h4-strike-through-paragraph-indent: 0; + --typography-body-h4-strike-through-paragraph-spacing: 0; + --typography-body-h4-strike-through-text-case: none; + --typography-body-italic-font-size: 12px; + --typography-body-italic-text-decoration: none; + --typography-body-italic-font-family: Roboto; + --typography-body-italic-font-weight: 400; + --typography-body-italic-font-style: italic; + --typography-body-italic-font-stretch: normal; + --typography-body-italic-letter-spacing: 0; + --typography-body-italic-line-height: 14px; + --typography-body-italic-paragraph-indent: 0; + --typography-body-italic-paragraph-spacing: 0; + --typography-body-italic-text-case: none; + --typography-body-extra-bold-condensed-italic-font-size: 12px; + --typography-body-extra-bold-condensed-italic-text-decoration: none; + --typography-body-extra-bold-condensed-italic-font-family: Akzidenz-Grotesk Pro; + --typography-body-extra-bold-condensed-italic-font-weight: 800; + --typography-body-extra-bold-condensed-italic-font-style: italic; + --typography-body-extra-bold-condensed-italic-font-stretch: condensed; + --typography-body-extra-bold-condensed-italic-letter-spacing: 0; + --typography-body-extra-bold-condensed-italic-line-height: 14.4px; + --typography-body-extra-bold-condensed-italic-paragraph-indent: 0; + --typography-body-extra-bold-condensed-italic-paragraph-spacing: 0; + --typography-body-extra-bold-condensed-italic-text-case: none; + --typography-body-medium-extended-italic-font-size: 20px; + --typography-body-medium-extended-italic-text-decoration: none; + --typography-body-medium-extended-italic-font-family: Akzidenz-Grotesk Pro; + --typography-body-medium-extended-italic-font-weight: 500; + --typography-body-medium-extended-italic-font-style: italic; + --typography-body-medium-extended-italic-font-stretch: expanded; + --typography-body-medium-extended-italic-letter-spacing: 0; + --typography-body-medium-extended-italic-line-height: 24px; + --typography-body-medium-extended-italic-paragraph-indent: 0; + --typography-body-medium-extended-italic-paragraph-spacing: 0; + --typography-body-medium-extended-italic-text-case: none; + --typography-body-super-font-size: 22px; + --typography-body-super-text-decoration: none; + --typography-body-super-font-family: Akzidenz-Grotesk Pro; + --typography-body-super-font-weight: 900; + --typography-body-super-font-style: normal; + --typography-body-super-font-stretch: normal; + --typography-body-super-letter-spacing: 0; + --typography-body-super-line-height: 26.4px; + --typography-body-super-paragraph-indent: 0; + --typography-body-super-paragraph-spacing: 0; + --typography-body-super-text-case: none; +} diff --git a/tests/integration/jsonOutput.test.ts b/tests/integration/jsonOutput.test.ts index ec4d30fc..bffa668b 100644 --- a/tests/integration/jsonOutput.test.ts +++ b/tests/integration/jsonOutput.test.ts @@ -1,5 +1,5 @@ import fs from 'fs' -import jsonExpectedOutput from './data/jsonOriginalFormat.data' +import jsonExpectedOutput from './spec_data/jsonOriginalFormat.data' describe('Verify json output for style dictionary', () => { // read files diff --git a/tests/integration/previous-standard.build.js b/tests/integration/previous-standard.build.js new file mode 100644 index 00000000..be5389c5 --- /dev/null +++ b/tests/integration/previous-standard.build.js @@ -0,0 +1,42 @@ +const StyleDictionary = require('style-dictionary') + +const StyleDictionaryExtended = StyleDictionary.extend({ + source: ['./tests/files/previous-standard-tokens.json'], + transform: { + 'size/px': require('./libs/standard/web/sizePx'), + 'web/shadow': require('./libs/standard/web/webShadows'), + 'web/radius': require('./libs/standard/web/webRadius'), + 'web/padding': require('./libs/standard/web/webPadding'), + 'web/font': require('./libs/standard/web/webFont'), + 'web/gradient': require('./libs/standard/web/webGradient'), + 'color/hex8ToRgba': require('./libs/standard/web/colorToRgbaString') + }, + format: { + css: require('./libs/standard/web/formatWeb') + }, + platforms: { + css: { + transforms: StyleDictionary.transformGroup.css.concat([ + 'size/px', + 'web/shadow', + 'web/radius', + 'web/padding', + 'web/font', + 'web/gradient', + 'color/hex8ToRgba' + ]), + buildPath: './tests/integration/data/', + files: [ + { + destination: 'previous-standard.variables.css', + format: 'css', + options: { + showFileHeader: false + } + } + ] + } + } +}) + +StyleDictionaryExtended.buildAllPlatforms() diff --git a/tests/integration/data/cssOutput.data.ts b/tests/integration/spec_data/cssOutput.data.ts similarity index 100% rename from tests/integration/data/cssOutput.data.ts rename to tests/integration/spec_data/cssOutput.data.ts diff --git a/tests/integration/data/cssStandardOutput.data.ts b/tests/integration/spec_data/cssStandardOutput.data.ts similarity index 100% rename from tests/integration/data/cssStandardOutput.data.ts rename to tests/integration/spec_data/cssStandardOutput.data.ts diff --git a/tests/integration/data/jsonOriginalFormat.data.ts b/tests/integration/spec_data/jsonOriginalFormat.data.ts similarity index 100% rename from tests/integration/data/jsonOriginalFormat.data.ts rename to tests/integration/spec_data/jsonOriginalFormat.data.ts diff --git a/tests/integration/standard.build.js b/tests/integration/standard.build.js index 32a8349d..2eb30226 100644 --- a/tests/integration/standard.build.js +++ b/tests/integration/standard.build.js @@ -1,6 +1,17 @@ const StyleDictionary = require('style-dictionary') const StyleDictionaryExtended = StyleDictionary.extend({ + parsers: [{ + pattern: /\.json$/, + parse: ({ filePath, contents }) => { + contents = contents + .replace(/"\$value":/g, '"value":') + .replace(/"\$type":/g, '"type":') + .replace(/"\$description":/g, '"description":') + .replace(/"\$extension":/g, '"extension":') + return JSON.parse(contents) + } + }], source: ['./tests/files/standard-tokens.json'], transform: { 'size/px': require('./libs/standard/web/sizePx'), From 46ca6cb0fcb8f61c36dc827fd2e4b719ad2ce59f Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Sun, 25 Sep 2022 22:55:54 +0200 Subject: [PATCH 06/10] add custom parser for w3c standard json --- examples/build.js | 12 + .../input/outdated-draft-standard-tokens.json | 681 ++++++++++++++++++ examples/input/standard-tokens.json | 336 ++++----- 3 files changed, 861 insertions(+), 168 deletions(-) create mode 100644 examples/input/outdated-draft-standard-tokens.json diff --git a/examples/build.js b/examples/build.js index 6af32798..360715aa 100644 --- a/examples/build.js +++ b/examples/build.js @@ -12,6 +12,18 @@ const buildPath = basePath + 'build/' const StyleDictionaryExtended = StyleDictionary.extend({ // adding imported configs ...deepMerge.all([androidConfig, iosConfig, webConfig]), + // custom parser for new standard token josn + parsers: [{ + pattern: /\.json$/, + parse: ({ filePath, contents }) => { + contents = contents + .replace(/"\$value":/g, '"value":') + .replace(/"\$type":/g, '"type":') + .replace(/"\$description":/g, '"description":') + .replace(/"\$extension":/g, '"extension":') + return JSON.parse(contents) + } + }], source: [basePath + 'input/*.json'], platforms: { css: { diff --git a/examples/input/outdated-draft-standard-tokens.json b/examples/input/outdated-draft-standard-tokens.json new file mode 100644 index 00000000..4451631a --- /dev/null +++ b/examples/input/outdated-draft-standard-tokens.json @@ -0,0 +1,681 @@ +{ + "sizes": { + "32": { + "description": "32.72px spacer component", + "value": 32.72, + "type": "dimension" + }, + "40": { + "description": null, + "value": 40, + "type": "dimension" + }, + "60": { + "description": null, + "value": 60, + "type": "dimension" + }, + "80": { + "description": null, + "value": 80, + "type": "dimension" + }, + "plain token": { + "description": null, + "value": 200, + "type": "dimension" + }, + "token in frame": { + "description": null, + "value": 200, + "type": "dimension" + }, + "token in group": { + "description": null, + "value": 200, + "type": "dimension" + }, + "in variant 60": { + "description": null, + "value": 60, + "type": "dimension" + }, + "in variant 90": { + "description": null, + "value": 90, + "type": "dimension" + }, + "in variant 120": { + "description": null, + "value": 120, + "type": "dimension" + }, + "frame": { + "description": null, + "value": 32, + "type": "dimension" + }, + "rect": { + "description": null, + "value": 32, + "type": "dimension" + }, + "shape in component": { + "description": "Should use 32px not 20 from inside shape", + "value": 32, + "type": "dimension" + } + }, + "breakpoints": { + "lg": { + "description": null, + "value": 1280, + "type": "dimension" + }, + "sm": { + "description": null, + "value": 768, + "type": "dimension" + }, + "md": { + "description": null, + "value": 1024, + "type": "dimension" + } + }, + "spacing": { + "10": { + "description": null, + "type": "custom-spacing", + "value": { + "top": 10, + "bottom": 10, + "left": 10, + "right": 10 + } + }, + "mixed": { + "description": null, + "type": "custom-spacing", + "value": { + "top": 10, + "bottom": 30, + "left": 20, + "right": 20 + } + }, + "top": { + "description": null, + "type": "custom-spacing", + "value": { + "top": 10, + "bottom": 0, + "left": 0, + "right": 0 + } + } + }, + "borders": { + "single": { + "description": null, + "type": "custom-stroke", + "value": { + "align": "inside", + "dashPattern": [], + "lineCap": "none", + "lineJoin": "miter", + "miterLimit": 4, + "weight": 5, + "color": "#000000ff" + } + }, + "dashed outside": { + "description": null, + "type": "custom-stroke", + "value": { + "align": "outside", + "dashPattern": [ + 5, + 5, + 3, + 3 + ], + "lineCap": "none", + "lineJoin": "miter", + "miterLimit": 4, + "weight": 5, + "color": "#000000ff" + } + }, + "single (style)": { + "description": null, + "type": "custom-stroke", + "value": { + "align": "inside", + "dashPattern": [], + "lineCap": "none", + "lineJoin": "miter", + "miterLimit": 4, + "weight": 5, + "color": "#044affff" + } + }, + "unsupported": { + "multiple borders": { + "description": null, + "type": "custom-stroke", + "value": { + "align": "inside", + "dashPattern": [ + 5, + 10 + ], + "lineCap": "none", + "lineJoin": "miter", + "miterLimit": 4, + "weight": 5, + "color": "#ffe600ff" + } + } + } + }, + "radius": { + "5": { + "description": null, + "type": "custom-radius", + "value": { + "smoothing": 0, + "topLeft": 5, + "topRight": 5, + "bottomLeft": 5, + "bottomRight": 5 + } + } + }, + "radii": { + "smoothing": { + "description": null, + "type": "custom-radius", + "value": { + "smoothing": 0.75, + "topLeft": 10, + "topRight": 10, + "bottomLeft": 10, + "bottomRight": 10 + } + }, + "mixed": { + "description": null, + "type": "custom-radius", + "value": { + "smoothing": 0, + "topLeft": 5.5, + "topRight": 10, + "bottomLeft": 20, + "bottomRight": 15 + } + } + }, + "motion": { + "move in": { + "description": null, + "type": "custom-transition", + "value": { + "transitionType": "move_in", + "duration": 0.5, + "direction": "left", + "easingFunction": { + "x1": 0.41999998688697815, + "x2": 1, + "y1": 0, + "y2": 1 + } + } + }, + "dissolve": { + "description": null, + "type": "custom-transition", + "value": { + "transitionType": "dissolve", + "duration": 0.45, + "easingFunction": { + "x1": 0.6968395709991455, + "x2": 0.06683959811925888, + "y1": 0.052326660603284836, + "y2": 0.9323266744613647 + } + } + }, + "smart": { + "description": null, + "type": "custom-transition", + "value": { + "transitionType": "smart_animate", + "duration": 0.5, + "easingFunction": { + "x1": 0, + "x2": 1, + "y1": 0, + "y2": 1 + } + } + }, + "push": { + "description": null, + "type": "custom-transition", + "value": { + "transitionType": "push", + "duration": 0.5, + "direction": "left", + "easingFunction": { + "x1": 0.30000001192092896, + "x2": 0.699999988079071, + "y1": -0.05000000074505806, + "y2": -0.5 + } + } + } + }, + "gradient": { + "gradient": { + "single with multiple color stops": { + "description": "Four color stops from yellow to red", + "type": "custom-gradient", + "value": { + "gradientType": "radial", + "rotation": 180, + "stops": [ + { + "position": 0, + "color": "#ffb800ff" + }, + { + "position": 0.34, + "color": "#ff8a00ff" + }, + { + "position": 0.65, + "color": "#ff2e00ff" + }, + { + "position": 1, + "color": "#ff0000ff" + } + ] + } + }, + "multiple": { + "0": { + "type": "custom-gradient", + "value": { + "gradientType": "linear", + "rotation": 180, + "stops": [ + { + "position": 0, + "color": "#ffb800ff" + }, + { + "position": 1, + "color": "#ffb800ff" + } + ] + } + }, + "1": { + "type": "custom-gradient", + "value": { + "gradientType": "radial", + "rotation": 180, + "stops": [ + { + "position": 0, + "color": "#ffffffff" + }, + { + "position": 1, + "color": "#ffffffff" + } + ] + } + }, + "2": { + "type": "custom-gradient", + "value": { + "gradientType": "angular", + "rotation": 180, + "stops": [ + { + "position": 0, + "color": "#cf3030ff" + }, + { + "position": 1, + "color": "#ffffffff" + } + ] + } + }, + "3": { + "type": "custom-gradient", + "value": { + "gradientType": "diamond", + "rotation": 180, + "stops": [ + { + "position": 0, + "color": "#4a4fccff" + }, + { + "position": 1, + "color": "#ffffffff" + } + ] + } + }, + "description": null + } + } + }, + "color": { + "colors": { + "multiple fills": { + "0": { + "type": "color", + "value": "#40ffbaff" + }, + "1": { + "type": "color", + "value": "#0000001a" + }, + "description": null + }, + "single blue": { + "description": null, + "type": "color", + "value": "#044affff" + }, + "special characters": { + "😅": { + "description": "Emoji", + "type": "color", + "value": "#40df50ff" + }, + "änderung": { + "description": null, + "type": "color", + "value": "#3456afff" + } + } + }, + "light": { + "background": { + "description": null, + "type": "color", + "value": "#ffffffff" + } + }, + "dark": { + "background": { + "description": null, + "type": "color", + "value": "#000000ff" + } + } + }, + "grid": { + "multiple": { + "0": { + "type": "custom-grid", + "value": { + "pattern": "columns", + "sectionSize": 1, + "gutterSize": 20, + "alignment": "max", + "count": 7, + "offset": 3 + } + }, + "1": { + "type": "custom-grid", + "value": { + "pattern": "columns", + "sectionSize": 12, + "gutterSize": 20, + "alignment": "center", + "count": 6 + } + }, + "2": { + "type": "custom-grid", + "value": { + "pattern": "columns", + "gutterSize": 20, + "alignment": "stretch", + "count": 5, + "offset": 10 + } + }, + "3": { + "type": "custom-grid", + "value": { + "pattern": "columns", + "sectionSize": 34, + "gutterSize": 20, + "alignment": "min", + "count": 4, + "offset": 13 + } + }, + "4": { + "type": "custom-grid", + "value": { + "pattern": "rows", + "sectionSize": 8, + "gutterSize": 20, + "alignment": "max", + "count": 5, + "offset": 10 + } + }, + "5": { + "type": "custom-grid", + "value": { + "pattern": "rows", + "sectionSize": 8, + "gutterSize": 10, + "alignment": "center", + "count": 4 + } + }, + "6": { + "type": "custom-grid", + "value": { + "pattern": "rows", + "sectionSize": 8, + "gutterSize": 20, + "alignment": "min", + "count": 3, + "offset": 10 + } + }, + "7": { + "type": "custom-grid", + "value": { + "pattern": "grid", + "sectionSize": 8 + } + }, + "description": "Grid / multiple description text" + }, + "single": { + "description": null, + "type": "custom-grid", + "value": { + "pattern": "columns", + "sectionSize": 11, + "gutterSize": 20, + "alignment": "center", + "count": 5 + } + } + }, + "font": { + "body": { + "h3": { + "description": "Comment for text style", + "type": "custom-fontStyle", + "value": { + "fontSize": 20, + "textDecoration": "none", + "fontFamily": "Akzidenz-Grotesk Pro", + "fontWeight": 700, + "fontStyle": "normal", + "fontStretch": "condensed", + "letterSpacing": 0.4, + "lineHeight": 32, + "paragraphIndent": 5, + "paragraphSpacing": 8, + "textCase": "uppercase" + } + }, + "h4 strike through": { + "description": "With stylisitc options", + "type": "custom-fontStyle", + "value": { + "fontSize": 16, + "textDecoration": "line-through", + "fontFamily": "Roboto", + "fontWeight": 500, + "fontStyle": "italic", + "fontStretch": "normal", + "letterSpacing": 0, + "lineHeight": 19.2, + "paragraphIndent": 0, + "paragraphSpacing": 0, + "textCase": "none" + } + }, + "italic": { + "type": "custom-fontStyle", + "value": { + "fontSize": 12, + "textDecoration": "none", + "fontFamily": "Roboto", + "fontWeight": 400, + "fontStyle": "italic", + "fontStretch": "normal", + "letterSpacing": 0, + "lineHeight": 14, + "paragraphIndent": 0, + "paragraphSpacing": 0, + "textCase": "none" + } + }, + "extra bold condensed italic": { + "type": "custom-fontStyle", + "value": { + "fontSize": 12, + "textDecoration": "none", + "fontFamily": "Akzidenz-Grotesk Pro", + "fontWeight": 800, + "fontStyle": "italic", + "fontStretch": "condensed", + "letterSpacing": 0, + "lineHeight": 14.4, + "paragraphIndent": 0, + "paragraphSpacing": 0, + "textCase": "none" + } + }, + "medium extended italic": { + "type": "custom-fontStyle", + "value": { + "fontSize": 20, + "textDecoration": "none", + "fontFamily": "Akzidenz-Grotesk Pro", + "fontWeight": 500, + "fontStyle": "italic", + "fontStretch": "expanded", + "letterSpacing": 0, + "lineHeight": 24, + "paragraphIndent": 0, + "paragraphSpacing": 0, + "textCase": "none" + } + }, + "super": { + "type": "custom-fontStyle", + "value": { + "fontSize": 22, + "textDecoration": "none", + "fontFamily": "Akzidenz-Grotesk Pro", + "fontWeight": 900, + "fontStyle": "normal", + "fontStretch": "normal", + "letterSpacing": 0, + "lineHeight": 26.4, + "paragraphIndent": 0, + "paragraphSpacing": 0, + "textCase": "none" + } + } + } + }, + "effect": { + "drop shadow (single)": { + "description": "Drop shadow single description", + "type": "custom-shadow", + "value": { + "shadowType": "dropShadow", + "radius": 4, + "color": "#00000040", + "offsetX": 0, + "offsetY": 4, + "spread": 0 + } + }, + "inner shadow (multiple)": { + "0": { + "type": "custom-shadow", + "value": { + "shadowType": "innerShadow", + "radius": 4, + "color": "#00000040", + "offsetX": 0, + "offsetY": 4, + "spread": 0 + } + }, + "1": { + "type": "custom-shadow", + "value": { + "shadowType": "innerShadow", + "radius": 1, + "color": "#000000ff", + "offsetX": 10, + "offsetY": 100, + "spread": 0.5 + } + }, + "2": { + "type": "custom-shadow", + "value": { + "shadowType": "innerShadow", + "radius": 3, + "color": "#00000040", + "offsetX": -4, + "offsetY": 2, + "spread": 11 + } + }, + "description": null + }, + "layer blur": { + "description": null + }, + "background blur": { + "description": null + } + } +} \ No newline at end of file diff --git a/examples/input/standard-tokens.json b/examples/input/standard-tokens.json index 4451631a..81c4662a 100644 --- a/examples/input/standard-tokens.json +++ b/examples/input/standard-tokens.json @@ -1,93 +1,93 @@ { "sizes": { "32": { - "description": "32.72px spacer component", - "value": 32.72, - "type": "dimension" + "$description": "32.72px spacer component", + "$value": 32.72, + "$type": "dimension" }, "40": { - "description": null, - "value": 40, - "type": "dimension" + "$description": null, + "$value": 40, + "$type": "dimension" }, "60": { - "description": null, - "value": 60, - "type": "dimension" + "$description": null, + "$value": 60, + "$type": "dimension" }, "80": { - "description": null, - "value": 80, - "type": "dimension" + "$description": null, + "$value": 80, + "$type": "dimension" }, "plain token": { - "description": null, - "value": 200, - "type": "dimension" + "$description": null, + "$value": 200, + "$type": "dimension" }, "token in frame": { - "description": null, - "value": 200, - "type": "dimension" + "$description": null, + "$value": 200, + "$type": "dimension" }, "token in group": { - "description": null, - "value": 200, - "type": "dimension" + "$description": null, + "$value": 200, + "$type": "dimension" }, "in variant 60": { - "description": null, - "value": 60, - "type": "dimension" + "$description": null, + "$value": 60, + "$type": "dimension" }, "in variant 90": { - "description": null, - "value": 90, - "type": "dimension" + "$description": null, + "$value": 90, + "$type": "dimension" }, "in variant 120": { - "description": null, - "value": 120, - "type": "dimension" + "$description": null, + "$value": 120, + "$type": "dimension" }, "frame": { - "description": null, - "value": 32, - "type": "dimension" + "$description": null, + "$value": 32, + "$type": "dimension" }, "rect": { - "description": null, - "value": 32, - "type": "dimension" + "$description": null, + "$value": 32, + "$type": "dimension" }, "shape in component": { - "description": "Should use 32px not 20 from inside shape", - "value": 32, - "type": "dimension" + "$description": "Should use 32px not 20 from inside shape", + "$value": 32, + "$type": "dimension" } }, "breakpoints": { "lg": { - "description": null, - "value": 1280, - "type": "dimension" + "$description": null, + "$value": 1280, + "$type": "dimension" }, "sm": { - "description": null, - "value": 768, - "type": "dimension" + "$description": null, + "$value": 768, + "$type": "dimension" }, "md": { - "description": null, - "value": 1024, - "type": "dimension" + "$description": null, + "$value": 1024, + "$type": "dimension" } }, "spacing": { "10": { - "description": null, - "type": "custom-spacing", - "value": { + "$description": null, + "$type": "custom-spacing", + "$value": { "top": 10, "bottom": 10, "left": 10, @@ -95,9 +95,9 @@ } }, "mixed": { - "description": null, - "type": "custom-spacing", - "value": { + "$description": null, + "$type": "custom-spacing", + "$value": { "top": 10, "bottom": 30, "left": 20, @@ -105,9 +105,9 @@ } }, "top": { - "description": null, - "type": "custom-spacing", - "value": { + "$description": null, + "$type": "custom-spacing", + "$value": { "top": 10, "bottom": 0, "left": 0, @@ -117,9 +117,9 @@ }, "borders": { "single": { - "description": null, - "type": "custom-stroke", - "value": { + "$description": null, + "$type": "custom-stroke", + "$value": { "align": "inside", "dashPattern": [], "lineCap": "none", @@ -130,9 +130,9 @@ } }, "dashed outside": { - "description": null, - "type": "custom-stroke", - "value": { + "$description": null, + "$type": "custom-stroke", + "$value": { "align": "outside", "dashPattern": [ 5, @@ -148,9 +148,9 @@ } }, "single (style)": { - "description": null, - "type": "custom-stroke", - "value": { + "$description": null, + "$type": "custom-stroke", + "$value": { "align": "inside", "dashPattern": [], "lineCap": "none", @@ -162,9 +162,9 @@ }, "unsupported": { "multiple borders": { - "description": null, - "type": "custom-stroke", - "value": { + "$description": null, + "$type": "custom-stroke", + "$value": { "align": "inside", "dashPattern": [ 5, @@ -181,9 +181,9 @@ }, "radius": { "5": { - "description": null, - "type": "custom-radius", - "value": { + "$description": null, + "$type": "custom-radius", + "$value": { "smoothing": 0, "topLeft": 5, "topRight": 5, @@ -194,9 +194,9 @@ }, "radii": { "smoothing": { - "description": null, - "type": "custom-radius", - "value": { + "$description": null, + "$type": "custom-radius", + "$value": { "smoothing": 0.75, "topLeft": 10, "topRight": 10, @@ -205,9 +205,9 @@ } }, "mixed": { - "description": null, - "type": "custom-radius", - "value": { + "$description": null, + "$type": "custom-radius", + "$value": { "smoothing": 0, "topLeft": 5.5, "topRight": 10, @@ -218,9 +218,9 @@ }, "motion": { "move in": { - "description": null, - "type": "custom-transition", - "value": { + "$description": null, + "$type": "custom-transition", + "$value": { "transitionType": "move_in", "duration": 0.5, "direction": "left", @@ -233,9 +233,9 @@ } }, "dissolve": { - "description": null, - "type": "custom-transition", - "value": { + "$description": null, + "$type": "custom-transition", + "$value": { "transitionType": "dissolve", "duration": 0.45, "easingFunction": { @@ -247,9 +247,9 @@ } }, "smart": { - "description": null, - "type": "custom-transition", - "value": { + "$description": null, + "$type": "custom-transition", + "$value": { "transitionType": "smart_animate", "duration": 0.5, "easingFunction": { @@ -261,9 +261,9 @@ } }, "push": { - "description": null, - "type": "custom-transition", - "value": { + "$description": null, + "$type": "custom-transition", + "$value": { "transitionType": "push", "duration": 0.5, "direction": "left", @@ -279,9 +279,9 @@ "gradient": { "gradient": { "single with multiple color stops": { - "description": "Four color stops from yellow to red", - "type": "custom-gradient", - "value": { + "$description": "Four color stops from yellow to red", + "$type": "custom-gradient", + "$value": { "gradientType": "radial", "rotation": 180, "stops": [ @@ -306,8 +306,8 @@ }, "multiple": { "0": { - "type": "custom-gradient", - "value": { + "$type": "custom-gradient", + "$value": { "gradientType": "linear", "rotation": 180, "stops": [ @@ -323,8 +323,8 @@ } }, "1": { - "type": "custom-gradient", - "value": { + "$type": "custom-gradient", + "$value": { "gradientType": "radial", "rotation": 180, "stops": [ @@ -340,8 +340,8 @@ } }, "2": { - "type": "custom-gradient", - "value": { + "$type": "custom-gradient", + "$value": { "gradientType": "angular", "rotation": 180, "stops": [ @@ -357,8 +357,8 @@ } }, "3": { - "type": "custom-gradient", - "value": { + "$type": "custom-gradient", + "$value": { "gradientType": "diamond", "rotation": 180, "stops": [ @@ -373,7 +373,7 @@ ] } }, - "description": null + "$description": null } } }, @@ -381,53 +381,53 @@ "colors": { "multiple fills": { "0": { - "type": "color", - "value": "#40ffbaff" + "$type": "color", + "$value": "#40ffbaff" }, "1": { - "type": "color", - "value": "#0000001a" + "$type": "color", + "$value": "#0000001a" }, - "description": null + "$description": null }, "single blue": { - "description": null, - "type": "color", - "value": "#044affff" + "$description": null, + "$type": "color", + "$value": "#044affff" }, "special characters": { "😅": { - "description": "Emoji", - "type": "color", - "value": "#40df50ff" + "$description": "Emoji", + "$type": "color", + "$value": "#40df50ff" }, "änderung": { - "description": null, - "type": "color", - "value": "#3456afff" + "$description": null, + "$type": "color", + "$value": "#3456afff" } } }, "light": { "background": { - "description": null, - "type": "color", - "value": "#ffffffff" + "$description": null, + "$type": "color", + "$value": "#ffffffff" } }, "dark": { "background": { - "description": null, - "type": "color", - "value": "#000000ff" + "$description": null, + "$type": "color", + "$value": "#000000ff" } } }, "grid": { "multiple": { "0": { - "type": "custom-grid", - "value": { + "$type": "custom-grid", + "$value": { "pattern": "columns", "sectionSize": 1, "gutterSize": 20, @@ -437,8 +437,8 @@ } }, "1": { - "type": "custom-grid", - "value": { + "$type": "custom-grid", + "$value": { "pattern": "columns", "sectionSize": 12, "gutterSize": 20, @@ -447,8 +447,8 @@ } }, "2": { - "type": "custom-grid", - "value": { + "$type": "custom-grid", + "$value": { "pattern": "columns", "gutterSize": 20, "alignment": "stretch", @@ -457,8 +457,8 @@ } }, "3": { - "type": "custom-grid", - "value": { + "$type": "custom-grid", + "$value": { "pattern": "columns", "sectionSize": 34, "gutterSize": 20, @@ -468,8 +468,8 @@ } }, "4": { - "type": "custom-grid", - "value": { + "$type": "custom-grid", + "$value": { "pattern": "rows", "sectionSize": 8, "gutterSize": 20, @@ -479,8 +479,8 @@ } }, "5": { - "type": "custom-grid", - "value": { + "$type": "custom-grid", + "$value": { "pattern": "rows", "sectionSize": 8, "gutterSize": 10, @@ -489,8 +489,8 @@ } }, "6": { - "type": "custom-grid", - "value": { + "$type": "custom-grid", + "$value": { "pattern": "rows", "sectionSize": 8, "gutterSize": 20, @@ -500,18 +500,18 @@ } }, "7": { - "type": "custom-grid", - "value": { + "$type": "custom-grid", + "$value": { "pattern": "grid", "sectionSize": 8 } }, - "description": "Grid / multiple description text" + "$description": "Grid / multiple description text" }, "single": { - "description": null, - "type": "custom-grid", - "value": { + "$description": null, + "$type": "custom-grid", + "$value": { "pattern": "columns", "sectionSize": 11, "gutterSize": 20, @@ -523,9 +523,9 @@ "font": { "body": { "h3": { - "description": "Comment for text style", - "type": "custom-fontStyle", - "value": { + "$description": "Comment for text style", + "$type": "custom-fontStyle", + "$value": { "fontSize": 20, "textDecoration": "none", "fontFamily": "Akzidenz-Grotesk Pro", @@ -540,9 +540,9 @@ } }, "h4 strike through": { - "description": "With stylisitc options", - "type": "custom-fontStyle", - "value": { + "$description": "With stylisitc options", + "$type": "custom-fontStyle", + "$value": { "fontSize": 16, "textDecoration": "line-through", "fontFamily": "Roboto", @@ -557,8 +557,8 @@ } }, "italic": { - "type": "custom-fontStyle", - "value": { + "$type": "custom-fontStyle", + "$value": { "fontSize": 12, "textDecoration": "none", "fontFamily": "Roboto", @@ -573,8 +573,8 @@ } }, "extra bold condensed italic": { - "type": "custom-fontStyle", - "value": { + "$type": "custom-fontStyle", + "$value": { "fontSize": 12, "textDecoration": "none", "fontFamily": "Akzidenz-Grotesk Pro", @@ -589,8 +589,8 @@ } }, "medium extended italic": { - "type": "custom-fontStyle", - "value": { + "$type": "custom-fontStyle", + "$value": { "fontSize": 20, "textDecoration": "none", "fontFamily": "Akzidenz-Grotesk Pro", @@ -605,8 +605,8 @@ } }, "super": { - "type": "custom-fontStyle", - "value": { + "$type": "custom-fontStyle", + "$value": { "fontSize": 22, "textDecoration": "none", "fontFamily": "Akzidenz-Grotesk Pro", @@ -624,9 +624,9 @@ }, "effect": { "drop shadow (single)": { - "description": "Drop shadow single description", - "type": "custom-shadow", - "value": { + "$description": "Drop shadow single description", + "$type": "custom-shadow", + "$value": { "shadowType": "dropShadow", "radius": 4, "color": "#00000040", @@ -637,8 +637,8 @@ }, "inner shadow (multiple)": { "0": { - "type": "custom-shadow", - "value": { + "$type": "custom-shadow", + "$value": { "shadowType": "innerShadow", "radius": 4, "color": "#00000040", @@ -648,8 +648,8 @@ } }, "1": { - "type": "custom-shadow", - "value": { + "$type": "custom-shadow", + "$value": { "shadowType": "innerShadow", "radius": 1, "color": "#000000ff", @@ -659,8 +659,8 @@ } }, "2": { - "type": "custom-shadow", - "value": { + "$type": "custom-shadow", + "$value": { "shadowType": "innerShadow", "radius": 3, "color": "#00000040", @@ -669,13 +669,13 @@ "spread": 11 } }, - "description": null + "$description": null }, "layer blur": { - "description": null + "$description": null }, "background blur": { - "description": null + "$description": null } } } \ No newline at end of file From 1d95beb3cbabf6ce41287a778789806897552a81 Mon Sep 17 00:00:00 2001 From: Lukas Oppermann Date: Sun, 25 Sep 2022 22:58:45 +0200 Subject: [PATCH 07/10] improve example --- examples/build.js | 12 +--------- examples/build/android/font/font_family.xml | 22 +++-------------- examples/build/android/values/dimens.xml | 2 +- examples/build/android/values/font_styles.xml | 2 +- examples/build/css/variables.css | 2 +- .../Background.colorset/Contents.json | 24 ------------------- .../MultipleFills_0.colorset/Contents.json | 12 ---------- .../MultipleFills_1.colorset/Contents.json | 12 ---------- .../SingleBlue.colorset/Contents.json | 12 ---------- .../SpecialCharacters.colorset/Contents.json | 12 ---------- .../Contents.json | 12 ---------- examples/build/ios/Size.swift | 2 +- .../build/ios/StyleDictionary+Generated.swift | 2 +- examples/build/scss/variables.scss | 2 +- examples/libs/w3cParser.js | 11 +++++++++ 15 files changed, 21 insertions(+), 120 deletions(-) create mode 100644 examples/libs/w3cParser.js diff --git a/examples/build.js b/examples/build.js index 360715aa..2b0736cb 100644 --- a/examples/build.js +++ b/examples/build.js @@ -13,17 +13,7 @@ const StyleDictionaryExtended = StyleDictionary.extend({ // adding imported configs ...deepMerge.all([androidConfig, iosConfig, webConfig]), // custom parser for new standard token josn - parsers: [{ - pattern: /\.json$/, - parse: ({ filePath, contents }) => { - contents = contents - .replace(/"\$value":/g, '"value":') - .replace(/"\$type":/g, '"type":') - .replace(/"\$description":/g, '"description":') - .replace(/"\$extension":/g, '"extension":') - return JSON.parse(contents) - } - }], + parsers: [require('./libs/w3cParser.js')], source: [basePath + 'input/*.json'], platforms: { css: { diff --git a/examples/build/android/font/font_family.xml b/examples/build/android/font/font_family.xml index 53f97d5c..f6017f54 100644 --- a/examples/build/android/font/font_family.xml +++ b/examples/build/android/font/font_family.xml @@ -3,25 +3,9 @@ - - - + android:font="@font/AkzidenzGroteskPro-Regular" /> - + android:fontWeight="600" + android:font="@font/AkzidenzGroteskPro-Bold" /> \ No newline at end of file diff --git a/examples/build/android/values/dimens.xml b/examples/build/android/values/dimens.xml index adbb6c15..7a2b534a 100644 --- a/examples/build/android/values/dimens.xml +++ b/examples/build/android/values/dimens.xml @@ -2,7 +2,7 @@ 32.72dp diff --git a/examples/build/android/values/font_styles.xml b/examples/build/android/values/font_styles.xml index 88c86c9e..4b14a30d 100644 --- a/examples/build/android/values/font_styles.xml +++ b/examples/build/android/values/font_styles.xml @@ -1,7 +1,7 @@