From fa2ae7b6773e15f818d445ec39abd1bba46b064e Mon Sep 17 00:00:00 2001 From: Yoshihide Jimbo Date: Tue, 16 Aug 2022 23:14:31 +0900 Subject: [PATCH] Update the structure of tokens.js --- scripts/figma.js | 64 ++++++++++--------------------------- tokens/color/primitive.json | 2 +- tokens/color/semantics.json | 2 +- tokens/size/spacing.json | 2 +- tokens/text/typography.json | 64 ++++++++++++++++++++++++++++++++++++- 5 files changed, 83 insertions(+), 51 deletions(-) diff --git a/scripts/figma.js b/scripts/figma.js index 184766e..07e693d 100644 --- a/scripts/figma.js +++ b/scripts/figma.js @@ -51,30 +51,22 @@ const main = async () => { Object.values(styleNodes) .filter(({ document }) => document.name.includes('Primitive')) + .sort((a, b) => a.document.name.localeCompare(b.document.name)) .forEach(({ document }) => { const { opacity, color } = document.fills[0]; const { r, g, b } = color; const hex = rgbaToHex(r * 255, g * 255, b * 255, opacity); const colorNameArr = document.name.toLowerCase().split('/').slice(1); - if (colorNameArr.length === 2) { - // ex: "Ubie/White" - primitiveColors[colorNameArr[1]] = { - value: hex, - }; - } else { - primitiveColors[colorNameArr[1]] = { - ...primitiveColors[colorNameArr[1]], - [colorNameArr[2]]: { - value: hex, - }, - }; - } + primitiveColors[colorNameArr.join('-')] = { + value: hex, + }; }); const semanticColors = {}; Object.values(styleNodes) .filter(({ document }) => document.name.includes('Semantic')) + .sort((a, b) => a.document.name.localeCompare(b.document.name)) .forEach(({ document }) => { const { opacity, color } = document.fills[0]; const { r, g, b } = color; @@ -84,15 +76,13 @@ const main = async () => { semanticColors[colorName] = { value: !reference ? rgbaToHex(r * 255, g * 255, b * 255, opacity) - : `{color.${reference.toLowerCase().replaceAll(' ', '.')}.value}`, + : `{color.${reference.toLowerCase().replaceAll(' ', '-')}.value}`, }; }); const primitiveColorContent = JSON.stringify({ color: { - [PREFIX]: { - ...primitiveColors, - }, + ...primitiveColors, }, }); @@ -107,7 +97,7 @@ const main = async () => { Object.values(componentNodes) .filter(({ document }) => document.name.includes('Spacing')) .forEach(({ document }) => { - const name = document.name.split('/')[1].toLowerCase(); + const name = 'spacing' + '-' + document.name.split('/')[1].toLowerCase(); const value = Number(document.absoluteBoundingBox.width) / ROOT_FONT_SIZE; spacings[name] = { value: value, @@ -116,9 +106,7 @@ const main = async () => { const spacingContent = JSON.stringify({ size: { - spacing: { - ...spacings, - }, + ...spacings, }, }); @@ -133,37 +121,19 @@ const main = async () => { const scale = name[1].toLowerCase(); const lineHeight = document.style.lineHeightPercentFontSize / 100; const fontSize = document.style.fontSize / ROOT_FONT_SIZE + 'rem'; - - if (category in typography) { - typography[category][scale] = { - line: { - value: lineHeight, - }, - size: { - value: fontSize, - }, - }; - } else { - typography[category] = { - [scale]: { - line: { - value: lineHeight, - }, - size: { - value: fontSize, - }, - }, - }; - } + typography[[category, scale, 'size'].join('-')] = { + value: fontSize, + }; + typography[[category, scale, 'line'].join('-')] = { + value: lineHeight, + }; }); const typographyContent = JSON.stringify({ text: { ...typography, - base: { - family: { - value: 'UDShinGoPr6N, sans-serif', - }, + 'base-family': { + value: 'UDShinGoPr6N, sans-serif', }, }, }); diff --git a/tokens/color/primitive.json b/tokens/color/primitive.json index d5b083b..ecd15cc 100644 --- a/tokens/color/primitive.json +++ b/tokens/color/primitive.json @@ -1 +1 @@ -{"color":{"ubie":{"black":{"100":{"value":"#16191f0a"},"200":{"value":"#16191f2e"},"400":{"value":"#16191f7a"},"500":{"value":"#16191fa3"},"700":{"value":"#16191fe5"},"900":{"value":"#16191f"}},"pink":{"100":{"value":"#fdf2f9"},"200":{"value":"#f8cfde"},"400":{"value":"#ea77a1"},"500":{"value":"#da3170"},"700":{"value":"#a33961"}},"blue":{"100":{"value":"#f2f6fd"},"200":{"value":"#cbd3f2"},"400":{"value":"#6a82d9"},"500":{"value":"#3959cc"},"700":{"value":"#263f94"}},"red":{"100":{"value":"#fcf4f4"},"200":{"value":"#f6d0d0"},"400":{"value":"#ec6d6d"},"500":{"value":"#db3939"},"700":{"value":"#b02b2b"}},"white":{"value":"#ffffff"}}}} \ No newline at end of file +{"color":{"ubie-black-100":{"value":"#16191f0a"},"ubie-black-200":{"value":"#16191f2e"},"ubie-black-400":{"value":"#16191f7a"},"ubie-black-500":{"value":"#16191fa3"},"ubie-black-700":{"value":"#16191fe5"},"ubie-black-900":{"value":"#16191f"},"ubie-blue-100":{"value":"#f2f6fd"},"ubie-blue-200":{"value":"#cbd3f2"},"ubie-blue-400":{"value":"#6a82d9"},"ubie-blue-500":{"value":"#3959cc"},"ubie-blue-700":{"value":"#263f94"},"ubie-pink-100":{"value":"#fdf2f9"},"ubie-pink-200":{"value":"#f8cfde"},"ubie-pink-400":{"value":"#ea77a1"},"ubie-pink-500":{"value":"#da3170"},"ubie-pink-700":{"value":"#a33961"},"ubie-red-100":{"value":"#fcf4f4"},"ubie-red-200":{"value":"#f6d0d0"},"ubie-red-400":{"value":"#ec6d6d"},"ubie-red-500":{"value":"#db3939"},"ubie-red-700":{"value":"#b02b2b"},"ubie-white":{"value":"#ffffff"}}} \ No newline at end of file diff --git a/tokens/color/semantics.json b/tokens/color/semantics.json index 48bdb0f..a37b3f9 100644 --- a/tokens/color/semantics.json +++ b/tokens/color/semantics.json @@ -1 +1 @@ -{"color":{"background-accent":{"value":"{color.ubie.pink.100.value}"},"primary":{"value":"{color.ubie.blue.500.value}"},"primary-darken":{"value":"{color.ubie.blue.700.value}"},"alert":{"value":"{color.ubie.red.500.value}"},"accent-darken":{"value":"{color.ubie.pink.700.value}"},"border":{"value":"{color.ubie.black.200.value}"},"overlay":{"value":"#00000033"},"alert-darken":{"value":"{color.ubie.red.700.value}"},"background-modal":{"value":"#00000080"},"text-link":{"value":"{color.ubie.blue.500.value}"},"accent":{"value":"{color.ubie.pink.500.value}"},"text-white":{"value":"{color.ubie.white.value}"},"background-primary":{"value":"{color.ubie.blue.100.value}"},"background-gray":{"value":"{color.ubie.black.100.value}"},"background-white":{"value":"{color.ubie.white.value}"},"background-alert":{"value":"{color.ubie.red.100.value}"},"background-primary-darken":{"value":"{color.ubie.blue.200.value}"},"background-accent-darken":{"value":"{color.ubie.pink.200.value}"},"text-main":{"value":"{color.ubie.black.700.value}"},"text-disabled":{"value":"{color.ubie.black.200.value}"},"text-placeholder":{"value":"{color.ubie.black.400.value}"},"text-sub":{"value":"{color.ubie.black.500.value}"},"text-link-sub":{"value":"{color.ubie.black.500.value}"}}} \ No newline at end of file +{"color":{"accent":{"value":"{color.ubie-pink-500.value}"},"accent-darken":{"value":"{color.ubie-pink-700.value}"},"alert":{"value":"{color.ubie-red-500.value}"},"alert-darken":{"value":"{color.ubie-red-700.value}"},"background-accent":{"value":"{color.ubie-pink-100.value}"},"background-accent-darken":{"value":"{color.ubie-pink-200.value}"},"background-alert":{"value":"{color.ubie-red-100.value}"},"background-gray":{"value":"{color.ubie-black-100.value}"},"background-modal":{"value":"#00000080"},"background-primary":{"value":"{color.ubie-blue-100.value}"},"background-primary-darken":{"value":"{color.ubie-blue-200.value}"},"background-white":{"value":"{color.ubie-white.value}"},"border":{"value":"{color.ubie-black-200.value}"},"overlay":{"value":"#00000033"},"primary":{"value":"{color.ubie-blue-500.value}"},"primary-darken":{"value":"{color.ubie-blue-700.value}"},"text-disabled":{"value":"{color.ubie-black-200.value}"},"text-link":{"value":"{color.ubie-blue-500.value}"},"text-link-sub":{"value":"{color.ubie-black-500.value}"},"text-main":{"value":"{color.ubie-black-700.value}"},"text-placeholder":{"value":"{color.ubie-black-400.value}"},"text-sub":{"value":"{color.ubie-black-500.value}"},"text-white":{"value":"{color.ubie-white.value}"}}} \ No newline at end of file diff --git a/tokens/size/spacing.json b/tokens/size/spacing.json index c989ceb..2c6825b 100644 --- a/tokens/size/spacing.json +++ b/tokens/size/spacing.json @@ -1 +1 @@ -{"size":{"spacing":{"lg":{"value":1.5},"xxl":{"value":4},"xl":{"value":2.5},"sm":{"value":0.75},"md":{"value":1},"xs":{"value":0.5},"xxs":{"value":0.25}}}} \ No newline at end of file +{"size":{"spacing-lg":{"value":1.5},"spacing-xxl":{"value":4},"spacing-xl":{"value":2.5},"spacing-sm":{"value":0.75},"spacing-md":{"value":1},"spacing-xs":{"value":0.5},"spacing-xxs":{"value":0.25}}} \ No newline at end of file diff --git a/tokens/text/typography.json b/tokens/text/typography.json index a13ab7c..5e1c588 100644 --- a/tokens/text/typography.json +++ b/tokens/text/typography.json @@ -1 +1,63 @@ -{"text":{"body":{"lg":{"line":{"value":1.7},"size":{"value":"1.125rem"}},"lg-narrow":{"line":{"value":1.5},"size":{"value":"1.125rem"}},"lg-tight":{"line":{"value":1.4},"size":{"value":"1.125rem"}},"md":{"line":{"value":1.7},"size":{"value":"1rem"}},"md-narrow":{"line":{"value":1.5},"size":{"value":"1rem"}},"md-tight":{"line":{"value":1.4},"size":{"value":"1rem"}},"sm":{"line":{"value":1.7},"size":{"value":"0.875rem"}},"sm-narrow":{"line":{"value":1.5},"size":{"value":"0.875rem"}},"sm-tight":{"line":{"value":1.4},"size":{"value":"0.875rem"}}},"button":{"lg":{"line":{"value":1.4},"size":{"value":"1rem"}},"md":{"line":{"value":1.4},"size":{"value":"0.875rem"}},"sm":{"line":{"value":1.4},"size":{"value":"0.8125rem"}}},"heading":{"lg":{"line":{"value":1.4},"size":{"value":"1.5rem"}},"md":{"line":{"value":1.4},"size":{"value":"1.25rem"}},"sm":{"line":{"value":1.5},"size":{"value":"1.125rem"}},"xl":{"line":{"value":1.4},"size":{"value":"1.75rem"}},"xs":{"line":{"value":1.5},"size":{"value":"1rem"}}},"note":{"lg":{"line":{"value":1.7},"size":{"value":"0.8125rem"}},"lg-narrow":{"line":{"value":1.5},"size":{"value":"0.8125rem"}},"lg-tight":{"line":{"value":1.4},"size":{"value":"0.8125rem"}},"md":{"line":{"value":1.7},"size":{"value":"0.75rem"}},"md-narrow":{"line":{"value":1.5},"size":{"value":"0.75rem"}},"md-tight":{"line":{"value":1.4},"size":{"value":"0.75rem"}},"sm":{"line":{"value":1.7},"size":{"value":"0.625rem"}},"sm-narrow":{"line":{"value":1.5},"size":{"value":"0.625rem"}},"sm-tight":{"line":{"value":1.4},"size":{"value":"0.625rem"}}},"tag":{"lg":{"line":{"value":1.4},"size":{"value":"0.8125rem"}},"md":{"line":{"value":1.4},"size":{"value":"0.75rem"}},"sm":{"line":{"value":1.4},"size":{"value":"0.625rem"}}},"base":{"family":{"value":"UDShinGoPr6N, sans-serif"}}}} \ No newline at end of file +{ + "text": { + "body-lg-size": { "value": "1.125rem" }, + "body-lg-line": { "value": 1.7 }, + "body-lg-narrow-size": { "value": "1.125rem" }, + "body-lg-narrow-line": { "value": 1.5 }, + "body-lg-tight-size": { "value": "1.125rem" }, + "body-lg-tight-line": { "value": 1.4 }, + "body-md-size": { "value": "1rem" }, + "body-md-line": { "value": 1.7 }, + "body-md-narrow-size": { "value": "1rem" }, + "body-md-narrow-line": { "value": 1.5 }, + "body-md-tight-size": { "value": "1rem" }, + "body-md-tight-line": { "value": 1.4 }, + "body-sm-size": { "value": "0.875rem" }, + "body-sm-line": { "value": 1.7 }, + "body-sm-narrow-size": { "value": "0.875rem" }, + "body-sm-narrow-line": { "value": 1.5 }, + "body-sm-tight-size": { "value": "0.875rem" }, + "body-sm-tight-line": { "value": 1.4 }, + "button-lg-size": { "value": "1rem" }, + "button-lg-line": { "value": 1.4 }, + "button-md-size": { "value": "0.875rem" }, + "button-md-line": { "value": 1.4 }, + "button-sm-size": { "value": "0.8125rem" }, + "button-sm-line": { "value": 1.4 }, + "heading-lg-size": { "value": "1.5rem" }, + "heading-lg-line": { "value": 1.4 }, + "heading-md-size": { "value": "1.25rem" }, + "heading-md-line": { "value": 1.4 }, + "heading-sm-size": { "value": "1.125rem" }, + "heading-sm-line": { "value": 1.5 }, + "heading-xl-size": { "value": "1.75rem" }, + "heading-xl-line": { "value": 1.4 }, + "heading-xs-size": { "value": "1rem" }, + "heading-xs-line": { "value": 1.5 }, + "note-lg-size": { "value": "0.8125rem" }, + "note-lg-line": { "value": 1.7 }, + "note-lg-narrow-size": { "value": "0.8125rem" }, + "note-lg-narrow-line": { "value": 1.5 }, + "note-lg-tight-size": { "value": "0.8125rem" }, + "note-lg-tight-line": { "value": 1.4 }, + "note-md-size": { "value": "0.75rem" }, + "note-md-line": { "value": 1.7 }, + "note-md-narrow-size": { "value": "0.75rem" }, + "note-md-narrow-line": { "value": 1.5 }, + "note-md-tight-size": { "value": "0.75rem" }, + "note-md-tight-line": { "value": 1.4 }, + "note-sm-size": { "value": "0.625rem" }, + "note-sm-line": { "value": 1.7 }, + "note-sm-narrow-size": { "value": "0.625rem" }, + "note-sm-narrow-line": { "value": 1.5 }, + "note-sm-tight-size": { "value": "0.625rem" }, + "note-sm-tight-line": { "value": 1.4 }, + "tag-lg-size": { "value": "0.8125rem" }, + "tag-lg-line": { "value": 1.4 }, + "tag-md-size": { "value": "0.75rem" }, + "tag-md-line": { "value": 1.4 }, + "tag-sm-size": { "value": "0.625rem" }, + "tag-sm-line": { "value": 1.4 }, + "base-family": { "value": "UDShinGoPr6N, sans-serif" } + } +}