Skip to content

Commit

Permalink
Merge pull request #24 from ubie-oss/update-tokens-js
Browse files Browse the repository at this point in the history 
tokens.jsのフォーマットを変更
  • Loading branch information
@takanorip
takanorip authored Aug 17, 2022
2 parents b9fe935 + c4820c9 commit 9996ec6
Show file tree
Hide file tree
Showing 5 changed files with 83 additions and 51 deletions.
64 changes: 17 additions & 47 deletions scripts/figma.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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,
},
});

Expand All @@ -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,
Expand All @@ -116,9 +106,7 @@ const main = async () => {

const spacingContent = JSON.stringify({
size: {
spacing: {
...spacings,
},
...spacings,
},
});

Expand All @@ -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',
},
},
});
Expand Down
2 changes: 1 addition & 1 deletion tokens/color/primitive.json
View file
Original file line number Diff line number Diff line change
@@ -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"}}}}
{"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"}}}
2 changes: 1 addition & 1 deletion tokens/color/semantics.json
View file
Original file line number Diff line number Diff line change
@@ -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}"}}}
{"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}"}}}
2 changes: 1 addition & 1 deletion tokens/size/spacing.json
View file
Original file line number Diff line number Diff line change
@@ -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}}}}
{"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}}}
64 changes: 63 additions & 1 deletion tokens/text/typography.json
View file
Original file line number Diff line number Diff line change
@@ -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"}}}}
{
"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" }
}
}

0 comments on commit 9996ec6

Please sign in to comment.