{row.value}
}, @@ -81,9 +81,9 @@ export const FontShorthand = () => { return (
@@ -189,7 +188,6 @@ export const Display = () => {
header: 'Output value',
field: 'value',
rowHeader: true,
- width: 'growCollapse',
renderCell: row => {
return {row.value}
},
@@ -216,7 +214,9 @@ export const TitleLarge = () => {
}
})
- const filteredData = data.filter(item => item.id.includes('title') && item.id.includes('large'))
+ const filteredData = data.filter(
+ item => !item.id.includes('shorthand') && item.id.includes('title') && item.id.includes('large'),
+ )
return (
@@ -232,7 +232,6 @@ export const TitleLarge = () => {
header: 'Property',
field: 'name',
rowHeader: true,
- width: 'growCollapse',
renderCell: row => {
return (
@@ -263,7 +262,7 @@ export const TitleLarge = () => {
header: 'Output value',
field: 'value',
rowHeader: true,
- width: 'growCollapse',
+
renderCell: row => {
return {row.value}
},
@@ -290,7 +289,9 @@ export const TitleMedium = () => {
}
})
- const filteredData = data.filter(item => item.id.includes('title') && item.id.includes('medium'))
+ const filteredData = data.filter(
+ item => !item.id.includes('shorthand') && item.id.includes('title') && item.id.includes('medium'),
+ )
return (
@@ -306,7 +307,7 @@ export const TitleMedium = () => {
header: 'Property',
field: 'name',
rowHeader: true,
- width: 'growCollapse',
+
renderCell: row => {
return (
@@ -337,7 +338,7 @@ export const TitleMedium = () => {
header: 'Output value',
field: 'value',
rowHeader: true,
- width: 'growCollapse',
+
renderCell: row => {
return {row.value}
},
@@ -364,7 +365,9 @@ export const TitleSmall = () => {
}
})
- const filteredData = data.filter(item => item.id.includes('title') && item.id.includes('small'))
+ const filteredData = data.filter(
+ item => !item.id.includes('shorthand') && item.id.includes('title') && item.id.includes('small'),
+ )
return (
@@ -380,7 +383,7 @@ export const TitleSmall = () => {
header: 'Property',
field: 'name',
rowHeader: true,
- width: 'growCollapse',
+
renderCell: row => {
return (
@@ -411,7 +414,7 @@ export const TitleSmall = () => {
header: 'Output value',
field: 'value',
rowHeader: true,
- width: 'growCollapse',
+
renderCell: row => {
return {row.value}
},
@@ -438,7 +441,7 @@ export const Subtitle = () => {
}
})
- const filteredData = data.filter(item => item.id.includes('subtitle'))
+ const filteredData = data.filter(item => !item.id.includes('shorthand') && item.id.includes('subtitle'))
return (
@@ -454,7 +457,7 @@ export const Subtitle = () => {
header: 'Property',
field: 'name',
rowHeader: true,
- width: 'growCollapse',
+
renderCell: row => {
return (
@@ -485,7 +488,7 @@ export const Subtitle = () => {
header: 'Output value',
field: 'value',
rowHeader: true,
- width: 'growCollapse',
+
renderCell: row => {
return {row.value}
},
@@ -512,7 +515,9 @@ export const BodyLarge = () => {
}
})
- const filteredData = data.filter(item => item.id.includes('body') && item.id.includes('large'))
+ const filteredData = data.filter(
+ item => !item.id.includes('shorthand') && item.id.includes('body') && item.id.includes('large'),
+ )
return (
@@ -528,7 +533,7 @@ export const BodyLarge = () => {
header: 'Property',
field: 'name',
rowHeader: true,
- width: 'growCollapse',
+
renderCell: row => {
return (
@@ -559,7 +564,7 @@ export const BodyLarge = () => {
header: 'Output value',
field: 'value',
rowHeader: true,
- width: 'growCollapse',
+
renderCell: row => {
return {row.value}
},
@@ -586,7 +591,9 @@ export const BodyMedium = () => {
}
})
- const filteredData = data.filter(item => item.id.includes('body') && item.id.includes('medium'))
+ const filteredData = data.filter(
+ item => !item.id.includes('shorthand') && item.id.includes('title') && item.id.includes('medium'),
+ )
return (
@@ -602,7 +609,7 @@ export const BodyMedium = () => {
header: 'Property',
field: 'name',
rowHeader: true,
- width: 'growCollapse',
+
renderCell: row => {
return (
@@ -633,7 +640,7 @@ export const BodyMedium = () => {
header: 'Output value',
field: 'value',
rowHeader: true,
- width: 'growCollapse',
+
renderCell: row => {
return {row.value}
},
@@ -660,7 +667,9 @@ export const BodySmall = () => {
}
})
- const filteredData = data.filter(item => item.id.includes('body') && item.id.includes('small'))
+ const filteredData = data.filter(
+ item => !item.id.includes('shorthand') && item.id.includes('title') && item.id.includes('small'),
+ )
return (
@@ -676,7 +685,7 @@ export const BodySmall = () => {
header: 'Property',
field: 'name',
rowHeader: true,
- width: 'growCollapse',
+
renderCell: row => {
return (
@@ -707,7 +716,7 @@ export const BodySmall = () => {
header: 'Output value',
field: 'value',
rowHeader: true,
- width: 'growCollapse',
+
renderCell: row => {
return {row.value}
},
@@ -734,7 +743,7 @@ export const Caption = () => {
}
})
- const filteredData = data.filter(item => item.id.includes('caption'))
+ const filteredData = data.filter(item => !item.id.includes('shorthand') && item.id.includes('caption'))
return (
@@ -750,7 +759,7 @@ export const Caption = () => {
header: 'Property',
field: 'name',
rowHeader: true,
- width: 'growCollapse',
+
renderCell: row => {
return (
@@ -781,7 +790,7 @@ export const Caption = () => {
header: 'Output value',
field: 'value',
rowHeader: true,
- width: 'growCollapse',
+
renderCell: row => {
return {row.value}
},
@@ -808,7 +817,7 @@ export const CodeBlock = () => {
}
})
- const filteredData = data.filter(item => item.id.includes('codeBlock'))
+ const filteredData = data.filter(item => !item.id.includes('shorthand') && item.id.includes('codeBlock'))
return (
@@ -824,7 +833,7 @@ export const CodeBlock = () => {
header: 'Property',
field: 'name',
rowHeader: true,
- width: 'growCollapse',
+
renderCell: row => {
return (
@@ -855,7 +864,7 @@ export const CodeBlock = () => {
header: 'Output value',
field: 'value',
rowHeader: true,
- width: 'growCollapse',
+
renderCell: row => {
return {row.value}
},
@@ -882,7 +891,7 @@ export const InlineCodeBlock = () => {
}
})
- const filteredData = data.filter(item => item.id.includes('codeInline'))
+ const filteredData = data.filter(item => !item.id.includes('shorthand') && item.id.includes('codeInline'))
return (
@@ -898,7 +907,7 @@ export const InlineCodeBlock = () => {
header: 'Property',
field: 'name',
rowHeader: true,
- width: 'growCollapse',
+
renderCell: row => {
return (
@@ -929,7 +938,7 @@ export const InlineCodeBlock = () => {
header: 'Output value',
field: 'value',
rowHeader: true,
- width: 'growCollapse',
+
renderCell: row => {
return {row.value}
},
@@ -960,9 +969,9 @@ export const Overview = () => {
return (
-
+
Overview
-
+
{
header: 'Description',
field: 'comment',
rowHeader: true,
- width: 'growCollapse',
+ width: 'auto',
renderCell: row => {
return (
{
const {selector, selectorLight, selectorDark} = options
- const {outputReferences} = options
+ const {outputReferences, descriptions} = options
+ const formatting: LineFormatting = {
+ commentStyle: descriptions ? 'long' : 'none',
+ }
// add file header
const output = [fileHeader({file})]
// add single theme css
output.push(`${selector || ':root'}${selectorLight ? `, ${selectorLight}` : ''}{
- ${formattedVariables({format: 'css', dictionary, outputReferences})}
+ ${formattedVariables({format: 'css', dictionary, outputReferences, formatting})}
}`)
// add auto dark theme css
if (selectorDark) {
output.push(`@media (prefers-color-scheme: dark) {
${selectorDark} {
- ${formattedVariables({format: 'css', dictionary, outputReferences})}
+ ${formattedVariables({format: 'css', dictionary, outputReferences, formatting})}
}
}`)
}
diff --git a/src/formats/cssVariables.ts b/src/formats/cssVariables.ts
new file mode 100644
index 000000000..9d8d90b92
--- /dev/null
+++ b/src/formats/cssVariables.ts
@@ -0,0 +1,25 @@
+import StyleDictionary from 'style-dictionary'
+import type {FormatterArguments} from 'style-dictionary/types/Format'
+import type {LineFormatting} from 'style-dictionary/types/FormatHelpers'
+const {fileHeader, formattedVariables} = StyleDictionary.formatHelpers
+
+/**
+ * @description Converts `StyleDictionary.dictionary.tokens` to css with prefers dark and light section
+ * @param arguments [FormatterArguments](https://github.com/amzn/style-dictionary/blob/main/types/Format.d.ts)
+ * @param arguments.options outputReferences `boolean`, selector `string`, selectorLight `string`, selectorDark `string`
+ * @returns formatted `string`
+ */
+export const cssVariables: StyleDictionary.Formatter = ({dictionary, options = {}, file}: FormatterArguments) => {
+ const selector = options.selector ? options.selector : `:root`
+ const {outputReferences, descriptions} = options
+ const formatting: LineFormatting = {
+ commentStyle: descriptions ? 'long' : 'none',
+ }
+
+ return `${fileHeader({file})}${selector} {\n${formattedVariables({
+ format: 'css',
+ dictionary,
+ outputReferences,
+ formatting,
+ })}\n}\n`
+}
diff --git a/src/formats/cssWrapMediaQuery.test.ts b/src/formats/cssWrapMediaQuery.test.ts
index 93d3468eb..cd459ca30 100644
--- a/src/formats/cssWrapMediaQuery.test.ts
+++ b/src/formats/cssWrapMediaQuery.test.ts
@@ -1,5 +1,5 @@
import {cssWrapMediaQuery} from './cssWrapMediaQuery'
-import {getMockFormatterArguments} from '~/src/test-utilities'
+import {getMockDictionary, getMockFormatterArguments, getMockToken} from '~/src/test-utilities'
import {format} from 'prettier'
describe('Format: tokens nested in media query', () => {
@@ -65,4 +65,106 @@ describe('Format: tokens nested in media query', () => {
)
expect(cssWrapMediaQuery(input)).toStrictEqual(expectedOutput)
})
+
+ it('Show comment if option.description is true', () => {
+ const input = getMockFormatterArguments({
+ dictionary: getMockDictionary({
+ tokens: {
+ subgroup: {
+ red: getMockToken({
+ name: 'red',
+ value: 'transformedValue',
+ comment: 'This is a description',
+ }),
+ },
+ },
+ }),
+ options: {
+ mediaQuery: {
+ 'size-fine.css': '(pointer: fine)',
+ },
+ descriptions: true,
+ },
+ file: {
+ destination: 'size-fine.css',
+ options: {
+ showFileHeader: false,
+ },
+ },
+ })
+
+ const expectedOutput = format(
+ ` @media (pointer: fine) {
+ :root {
+ --red: transformedValue; /* This is a description */
+ }
+ }`,
+ {parser: 'css', printWidth: 500},
+ )
+ expect(cssWrapMediaQuery(input)).toStrictEqual(expectedOutput)
+ })
+
+ it('Hides comment if option.description is false or not set', () => {
+ const input = getMockFormatterArguments({
+ dictionary: getMockDictionary({
+ tokens: {
+ subgroup: {
+ red: getMockToken({
+ name: 'red',
+ value: 'transformedValue',
+ comment: 'This is a description',
+ }),
+ },
+ },
+ }),
+ options: {
+ mediaQuery: {
+ 'size-fine.css': '(pointer: fine)',
+ },
+ descriptions: false,
+ },
+ file: {
+ destination: 'size-fine.css',
+ options: {
+ showFileHeader: false,
+ },
+ },
+ })
+
+ const inputUnset = getMockFormatterArguments({
+ dictionary: getMockDictionary({
+ tokens: {
+ subgroup: {
+ red: getMockToken({
+ name: 'red',
+ value: 'transformedValue',
+ comment: 'This is a description',
+ }),
+ },
+ },
+ }),
+ options: {
+ mediaQuery: {
+ 'size-fine.css': '(pointer: fine)',
+ },
+ },
+ file: {
+ destination: 'size-fine.css',
+ options: {
+ showFileHeader: false,
+ },
+ },
+ })
+
+ const expectedOutput = format(
+ ` @media (pointer: fine) {
+ :root {
+ --red: transformedValue;
+ }
+ }`,
+ {parser: 'css', printWidth: 500},
+ )
+ expect(cssWrapMediaQuery(input)).toStrictEqual(expectedOutput)
+ expect(cssWrapMediaQuery(inputUnset)).toStrictEqual(expectedOutput)
+ })
})
diff --git a/src/formats/cssWrapMediaQuery.ts b/src/formats/cssWrapMediaQuery.ts
index 3b37eeb5f..f99bbb0d0 100644
--- a/src/formats/cssWrapMediaQuery.ts
+++ b/src/formats/cssWrapMediaQuery.ts
@@ -1,6 +1,7 @@
import StyleDictionary from 'style-dictionary'
import type {FormatterArguments} from 'style-dictionary/types/Format'
import {format} from 'prettier'
+import type {LineFormatting} from 'style-dictionary/types/FormatHelpers'
const {fileHeader, formattedVariables} = StyleDictionary.formatHelpers
/**
@@ -9,7 +10,10 @@ const {fileHeader, formattedVariables} = StyleDictionary.formatHelpers
* @returns formatted `string`
*/
export const cssWrapMediaQuery: StyleDictionary.Formatter = ({dictionary, options, file}: FormatterArguments) => {
- const {outputReferences} = options
+ const {outputReferences, descriptions} = options
+ const formatting: LineFormatting = {
+ commentStyle: descriptions ? 'long' : 'none',
+ }
// get specific media query or use screen
const mediaQuery = options.mediaQuery?.[file.destination] || 'screen'
// add file header
@@ -17,7 +21,7 @@ export const cssWrapMediaQuery: StyleDictionary.Formatter = ({dictionary, option
// add meadia query
output.push(`@media ${mediaQuery} {\n:root {`)
// add tokens
- output.push(formattedVariables({format: 'css', dictionary, outputReferences}))
+ output.push(formattedVariables({format: 'css', dictionary, outputReferences, formatting}))
// close media query
output.push(`}\n}`)
// return prettified
diff --git a/src/formats/index.ts b/src/formats/index.ts
index c7b232975..6e2067d42 100644
--- a/src/formats/index.ts
+++ b/src/formats/index.ts
@@ -1,6 +1,7 @@
export {cssThemed} from './cssThemed'
export {cssCustomMedia} from './cssCustomMedia'
export {cssWrapMediaQuery} from './cssWrapMediaQuery'
+export {cssVariables} from './cssVariables'
export {javascriptCommonJs} from './javascriptCommonJs'
export {javascriptEsm} from './javascriptEsm'
export {jsonNestedPrefixed} from './jsonNestedPrefixed'
diff --git a/src/platforms/css.ts b/src/platforms/css.ts
index 5528605a6..99b4a74da 100644
--- a/src/platforms/css.ts
+++ b/src/platforms/css.ts
@@ -44,6 +44,7 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
options: {
showFileHeader: false,
outputReferences: false,
+ descriptions: false,
selector,
selectorLight,
selectorDark,
@@ -56,6 +57,7 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
filter: token => isSource(token) && options?.themed !== true,
options: {
showFileHeader: false,
+ descriptions: false,
...options?.options,
},
},
@@ -77,6 +79,7 @@ export const css: PlatformInitializer = (outputFile, prefix, buildPath, options)
'src/tokens/functional/size/size-fine.json',
]),
options: {
+ descriptions: false,
showFileHeader: false,
mediaQuery: {
'css/functional/size/size-fine.css': '(pointer: fine)',
diff --git a/src/tokens/functional/color/dark/patterns-dark.json5 b/src/tokens/functional/color/dark/patterns-dark.json5
index 6d1a28f95..eb4d90d4f 100644
--- a/src/tokens/functional/color/dark/patterns-dark.json5
+++ b/src/tokens/functional/color/dark/patterns-dark.json5
@@ -6,7 +6,7 @@
alpha: 0.1,
},
borderColor: {
- $value: 'transparent',
+ $value: '{borderColor.muted}',
$type: 'color',
},
},
diff --git a/src/tokens/functional/size/border.json b/src/tokens/functional/size/border.json
index 1e8d2dd06..13f5324bd 100644
--- a/src/tokens/functional/size/border.json
+++ b/src/tokens/functional/size/border.json
@@ -1,7 +1,8 @@
{
"boxShadow": {
"thin": {
- "value": "inset 0 0 0 {borderWidth.thin}"
+ "value": "inset 0 0 0 {borderWidth.thin}",
+ "description": "Thin shadow for borders"
},
"thick": {
"value": "inset 0 0 0 {borderWidth.thick}"