From 41a152aaecfe4954998da0873ba21422c52e4618 Mon Sep 17 00:00:00 2001 From: Matt Gregg Date: Tue, 1 Oct 2024 16:33:33 -0400 Subject: [PATCH 1/2] feat: new font_face tokens and type tokens --- src/tokens/$themes.json | 18 ++-- src/tokens/base-blackbaud.json | 50 +++++----- src/tokens/base-modern.json | 30 ++++-- src/tokens/layout/bb-productive.json | 138 ++++++++++++++++++++++----- src/tokens/layout/modern.json | 108 +++++++++++++++++++-- 5 files changed, 270 insertions(+), 74 deletions(-) diff --git a/src/tokens/$themes.json b/src/tokens/$themes.json index 33b5075..aac67a3 100644 --- a/src/tokens/$themes.json +++ b/src/tokens/$themes.json @@ -324,7 +324,6 @@ "size.illustration.m": "f8d2fba46308207768213b0fb72e1709234de3d2", "size.illustration.l": "457ebedf9e1fb9bd0c3e851dc3b4287e515ab9c7", "size.illustration.xl": "0e7151f599ec57b1f3987bb3057d77af7b79bd55", - "font.family.sans": "874afe7af47916e50c71922b692e6597ef3b9ba9", "font.size.heading.1": "070dddf0cb355bb086fa3d2b7c7f7c3c7ef68b6e", "font.size.heading.2": "1828086da36b38f0d72e36ea43131c2d38089c1f", "font.size.heading.3": "f51544be494aa210472e9db2e281c030c36bd638", @@ -371,7 +370,8 @@ "border.width.action.hover": "118140e5585da688e9cc9b8024252db33618c0b0", "border.width.action.active": "cdd33f6934ab61b43ab6a325ea80760ecb3d2844", "border.width.action.focus": "4b2dae44eeb9bdc3243e4b06cdd5eba6ebead644", - "border.width.action.selected.s": "0a0278650e64ac62260b91a8afbccc6196f995e3" + "border.width.action.selected.s": "0a0278650e64ac62260b91a8afbccc6196f995e3", + "font.family.primary": "874afe7af47916e50c71922b692e6597ef3b9ba9" }, "group": "Layout" }, @@ -465,7 +465,6 @@ "size.illustration.m": "f8d2fba46308207768213b0fb72e1709234de3d2", "size.illustration.l": "457ebedf9e1fb9bd0c3e851dc3b4287e515ab9c7", "size.illustration.xl": "0e7151f599ec57b1f3987bb3057d77af7b79bd55", - "font.family.sans": "874afe7af47916e50c71922b692e6597ef3b9ba9", "font.size.heading.1": "070dddf0cb355bb086fa3d2b7c7f7c3c7ef68b6e", "font.size.heading.2": "1828086da36b38f0d72e36ea43131c2d38089c1f", "font.size.heading.3": "f51544be494aa210472e9db2e281c030c36bd638", @@ -512,7 +511,8 @@ "border.width.action.hover": "118140e5585da688e9cc9b8024252db33618c0b0", "border.width.action.active": "cdd33f6934ab61b43ab6a325ea80760ecb3d2844", "border.width.action.focus": "4b2dae44eeb9bdc3243e4b06cdd5eba6ebead644", - "border.width.action.selected.s": "0a0278650e64ac62260b91a8afbccc6196f995e3" + "border.width.action.selected.s": "0a0278650e64ac62260b91a8afbccc6196f995e3", + "font.family.primary": "874afe7af47916e50c71922b692e6597ef3b9ba9" }, "$figmaCollectionId": "VariableCollectionId:2142:337", "$figmaModeId": "2142:2", @@ -551,8 +551,6 @@ "space.inset.balanced.l": "f4aae0c5b31b8c6c91788ab6a8e453e81850e751", "space.inset.balanced.xl": "3453889c8090d7bed31a8dc42eea469520c03ec5", "size.icon.m": "d38fe1dbe02d11c78fa5abfe0fb4f7ac82523e3e", - "text.font_family": "745076bfeff31b64bad06c3123ca8c8b220ae2db", - "font.family.sans": "874afe7af47916e50c71922b692e6597ef3b9ba9", "border.radius.s": "0d428f46ffd5535b399bd3f915fe386fad078ca1", "border.radius.m": "c7d74f9be228681a6f6b469977987b3a5b8749c9", "font.style.data_label": "97440c6826c119c30d42c1eac33a8ab695af4419", @@ -671,7 +669,8 @@ "border.width.action.hover": "118140e5585da688e9cc9b8024252db33618c0b0", "border.width.action.active": "cdd33f6934ab61b43ab6a325ea80760ecb3d2844", "border.width.action.focus": "4b2dae44eeb9bdc3243e4b06cdd5eba6ebead644", - "border.width.action.selected.s": "0a0278650e64ac62260b91a8afbccc6196f995e3" + "border.width.action.selected.s": "0a0278650e64ac62260b91a8afbccc6196f995e3", + "font.family.primary": "874afe7af47916e50c71922b692e6597ef3b9ba9" }, "group": "Layout" }, @@ -712,8 +711,6 @@ "space.inset.balanced.l": "f4aae0c5b31b8c6c91788ab6a8e453e81850e751", "space.inset.balanced.xl": "3453889c8090d7bed31a8dc42eea469520c03ec5", "size.icon.m": "d38fe1dbe02d11c78fa5abfe0fb4f7ac82523e3e", - "text.font_family": "745076bfeff31b64bad06c3123ca8c8b220ae2db", - "font.family.sans": "874afe7af47916e50c71922b692e6597ef3b9ba9", "border.radius.s": "0d428f46ffd5535b399bd3f915fe386fad078ca1", "border.radius.m": "c7d74f9be228681a6f6b469977987b3a5b8749c9", "font.style.data_label": "97440c6826c119c30d42c1eac33a8ab695af4419", @@ -831,7 +828,8 @@ "border.width.action.hover": "118140e5585da688e9cc9b8024252db33618c0b0", "border.width.action.active": "cdd33f6934ab61b43ab6a325ea80760ecb3d2844", "border.width.action.focus": "4b2dae44eeb9bdc3243e4b06cdd5eba6ebead644", - "border.width.action.selected.s": "0a0278650e64ac62260b91a8afbccc6196f995e3" + "border.width.action.selected.s": "0a0278650e64ac62260b91a8afbccc6196f995e3", + "font.family.primary": "874afe7af47916e50c71922b692e6597ef3b9ba9" } } ] \ No newline at end of file diff --git a/src/tokens/base-blackbaud.json b/src/tokens/base-blackbaud.json index 04aab66..6648351 100644 --- a/src/tokens/base-blackbaud.json +++ b/src/tokens/base-blackbaud.json @@ -43,20 +43,6 @@ "$value": "3.25rem" } }, - "name": { - "$type": "fontFamilies", - "$value": "BLKB Sans" - }, - "family": { - "monospaced": { - "$type": "fontFamilies", - "$value": "Menlo, Monaco, Consolas, Courier New, monospace" - }, - "sans": { - "$type": "fontFamilies", - "$value": "{bb.font.name}, Helvetica Neue, Arial, sans-serif" - } - }, "weight": { "light": { "$type": "fontWeights", @@ -105,16 +91,32 @@ "$value": "semibold italic" } }, - "src": { - "sans": { - "regular": { - "$type": "other", - "$value": "url(\"https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Regular.woff\") format(\"woff\")" - }, - "italic": { - "$type": "other", - "$value": "url(\"https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Italic.woff\") format(\"woff\")" - } + "blkb_sans": { + "regular": { + "$type": "other", + "$value": "url(\"https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Regular.woff\") format(\"woff\")" + }, + "italic": { + "$type": "other", + "$value": "url(\"https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Italic.woff\") format(\"woff\")" + }, + "name": { + "$type": "other", + "$value": "BLKB Sans" + }, + "fallback": { + "$type": "other", + "$value": "Helvetica Neue, Arial, sans-serif" + }, + "family": { + "$type": "other", + "$value": "{bb.font.blkb_sans.name}, {bb.font.blkb_sans.fallback}" + } + }, + "monospaced": { + "family": { + "$type": "other", + "$value": "Menlo, Monaco, Consolas, Courier New, monospace" } } }, diff --git a/src/tokens/base-modern.json b/src/tokens/base-modern.json index 763c2ae..bbbe037 100644 --- a/src/tokens/base-modern.json +++ b/src/tokens/base-modern.json @@ -353,14 +353,24 @@ "$value": "bold" } }, - "name": { - "$type": "fontFamilies", - "$value": "BLKB Sans" - }, - "family": { - "sans": { - "$type": "fontFamilies", - "$value": "{modern.font.name}, Helvetica Neue, Arial, sans-serif" + "monospaced": { + "family": { + "$type": "other", + "$value": "Menlo, Monaco, Consolas, Courier New, monospace" + } + }, + "blkb_sans": { + "name": { + "$type": "other", + "$value": "BLKB Sans" + }, + "fallback": { + "$type": "other", + "$value": "Helvetica Neue, Arial, sans-serif" + }, + "family": { + "$type": "other", + "$value": "{modern.font.blkb_sans.name}, {modern.font.blkb_sans.fallback}" } } }, @@ -377,6 +387,10 @@ "$type": "lineHeights", "$value": "1.15" }, + "150": { + "$type": "lineHeights", + "$value": "1.5" + }, "normal": { "$type": "lineHeights", "$value": "normal" diff --git a/src/tokens/layout/bb-productive.json b/src/tokens/layout/bb-productive.json index 69ad076..645524a 100644 --- a/src/tokens/layout/bb-productive.json +++ b/src/tokens/layout/bb-productive.json @@ -647,7 +647,7 @@ "data_label": { "$type": "typography", "$value": { - "fontFamily": "{font.family.sans}", + "fontFamily": "{font.family.primary}", "fontWeight": "{font.style.data_label}", "fontSize": "{font.size.data_label}", "lineHeight": "{font.line_height.data_label}" @@ -658,7 +658,7 @@ "$type": "typography", "$value": { "lineHeight": "{font.line_height.heading.1}", - "fontFamily": "{font.family.sans}", + "fontFamily": "{font.family.primary}", "fontWeight": "{font.style.heading.1}", "fontSize": "{font.size.heading.1}" } @@ -666,7 +666,7 @@ "2": { "$type": "typography", "$value": { - "fontFamily": "{font.family.sans}", + "fontFamily": "{font.family.primary}", "fontWeight": "{font.style.heading.2}", "fontSize": "{font.size.heading.2}", "lineHeight": "{font.line_height.heading.2}" @@ -675,7 +675,7 @@ "3": { "$type": "typography", "$value": { - "fontFamily": "{font.family.sans}", + "fontFamily": "{font.family.primary}", "lineHeight": "{font.line_height.heading.3}", "fontSize": "{font.size.heading.3}", "fontWeight": "{font.style.heading.3}" @@ -684,7 +684,7 @@ "4": { "$type": "typography", "$value": { - "fontFamily": "{font.family.sans}", + "fontFamily": "{font.family.primary}", "fontSize": "{font.size.heading.4}", "lineHeight": "{font.line_height.heading.4}", "fontWeight": "{font.style.heading.4}" @@ -693,7 +693,7 @@ "5": { "$type": "typography", "$value": { - "fontFamily": "{font.family.sans}", + "fontFamily": "{font.family.primary}", "fontWeight": "{font.style.heading.5}", "fontSize": "{font.size.heading.5}", "lineHeight": "{font.line_height.heading.5}" @@ -707,7 +707,7 @@ "fontWeight": "{font.style.body.s}", "fontSize": "{font.size.body.s}", "lineHeight": "{font.line_height.body.s}", - "fontFamily": "{font.family.sans}" + "fontFamily": "{font.family.primary}" } }, "m": { @@ -716,7 +716,7 @@ "fontWeight": "{font.style.body.m}", "fontSize": "{font.size.body.m}", "lineHeight": "{font.line_height.body.m}", - "fontFamily": "{font.family.sans}" + "fontFamily": "{font.family.primary}" } }, "l": { @@ -725,7 +725,7 @@ "fontWeight": "{font.style.body.l}", "fontSize": "{font.size.body.l}", "lineHeight": "{font.line_height.body.l}", - "fontFamily": "{font.family.sans}" + "fontFamily": "{font.family.primary}" } } }, @@ -733,7 +733,7 @@ "1": { "$type": "typography", "$value": { - "fontFamily": "{font.family.sans}", + "fontFamily": "{font.family.primary}", "fontWeight": "{font.style.display.1}", "fontSize": "{font.size.display.1}", "lineHeight": "{font.line_height.display.1}" @@ -742,7 +742,7 @@ "2": { "$type": "typography", "$value": { - "fontFamily": "{font.family.sans}", + "fontFamily": "{font.family.primary}", "fontWeight": "{font.style.display.2}", "fontSize": "{font.size.display.2}", "lineHeight": "{font.line_height.display.2}" @@ -751,7 +751,7 @@ "3": { "$type": "typography", "$value": { - "fontFamily": "{font.family.sans}", + "fontFamily": "{font.family.primary}", "fontWeight": "{font.style.display.3}", "fontSize": "{font.size.display.3}", "lineHeight": "{font.line_height.display.3}" @@ -760,7 +760,7 @@ "4": { "$type": "typography", "$value": { - "fontFamily": "{font.family.sans}", + "fontFamily": "{font.family.primary}", "fontWeight": "{font.style.display.4}", "fontSize": "{font.size.display.4}", "lineHeight": "{font.line_height.display.4}" @@ -771,7 +771,7 @@ "s": { "$type": "typography", "$value": { - "fontFamily": "{font.family.sans}", + "fontFamily": "{font.family.primary}", "fontWeight": "{font.style.hint.s}", "fontSize": "{font.size.hint.s}", "lineHeight": "{font.line_height.hint.s}", @@ -781,7 +781,7 @@ "m": { "$type": "typography", "$value": { - "fontFamily": "{font.family.sans}", + "fontFamily": "{font.family.primary}", "fontWeight": "{font.style.hint.m}", "fontSize": "{font.size.hint.m}", "lineHeight": "{font.line_height.hint.m}" @@ -792,7 +792,7 @@ "label": { "$type": "typography", "$value": { - "fontFamily": "{bb.font.family.sans}", + "fontFamily": "{font.family.primary}", "fontWeight": "{font.style.input.label}", "fontSize": "{font.size.input.label}", "lineHeight": "{font.line_height.input.label}", @@ -803,7 +803,7 @@ "$type": "typography", "$value": { "fontWeight": "{font.style.body.s}", - "fontFamily": "{font.family.sans}", + "fontFamily": "{font.family.primary}", "fontSize": "{font.size.input.val}", "lineHeight": "{font.line_height.input.val}" } @@ -813,7 +813,7 @@ "s": { "$type": "typography", "$value": { - "fontFamily": "{font.family.sans}", + "fontFamily": "{font.family.primary}", "lineHeight": "{font.line_height.metric.s}", "fontWeight": "{font.style.metric.s}", "fontSize": "{font.size.metric.s}" @@ -822,7 +822,7 @@ "m": { "$type": "typography", "$value": { - "fontFamily": "{font.family.sans}", + "fontFamily": "{font.family.primary}", "lineHeight": "{font.line_height.metric.m}", "fontWeight": "{font.style.metric.m}", "fontSize": "{font.size.metric.m}" @@ -831,7 +831,7 @@ "l": { "$type": "typography", "$value": { - "fontFamily": "{font.family.sans}", + "fontFamily": "{font.family.primary}", "lineHeight": "{font.line_height.metric.l}", "fontWeight": "{font.style.metric.l}", "fontSize": "{font.size.metric.l}" @@ -841,13 +841,13 @@ }, "font": { "family": { - "sans": { + "primary": { "$type": "fontFamilies", - "$value": "{bb.font.family.sans}" + "$value": "{bb.font.blkb_sans.family}" }, "monospaced": { "$type": "fontFamilies", - "$value": "{bb.font.family.monospaced}" + "$value": "{bb.font.monospaced.family}" } }, "size": { @@ -1384,5 +1384,97 @@ } } } + }, + "font_face": { + "blkb_sans": { + "name": { + "$type": "other", + "$value": "{bb.font.blkb_sans.name}" + }, + "regular": { + "style": { + "$type": "other", + "$value": "normal" + }, + "weight": { + "$type": "other", + "$value": "400" + }, + "src": { + "$type": "other", + "$value": "url(\"https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Regular.woff\") format(\"woff\")" + } + }, + "italic": { + "style": { + "$type": "other", + "$value": "italic" + }, + "weight": { + "$type": "other", + "$value": "400" + }, + "src": { + "$type": "other", + "$value": "url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Italic.woff) format(\"woff\")" + } + }, + "thin": { + "style": { + "$type": "other", + "$value": "normal" + }, + "weight": { + "$type": "other", + "$value": "100" + }, + "src": { + "$type": "other", + "$value": "url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Thin.woff) format(\"woff\")" + } + }, + "light": { + "style": { + "$type": "other", + "$value": "normal" + }, + "weight": { + "$type": "other", + "$value": "300" + }, + "src": { + "$type": "other", + "$value": "url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Light.woff) format(\"woff\")" + } + }, + "semibold": { + "style": { + "$type": "other", + "$value": "normal" + }, + "weight": { + "$type": "other", + "$value": "600" + }, + "src": { + "$type": "other", + "$value": "url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Semibold.woff) format(\"woff\")" + } + }, + "bold": { + "style": { + "$type": "other", + "$value": "normal" + }, + "weight": { + "$type": "other", + "$value": "700" + }, + "src": { + "$type": "other", + "$value": "url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Bold.woff) format(\"woff\")" + } + } + } } } \ No newline at end of file diff --git a/src/tokens/layout/modern.json b/src/tokens/layout/modern.json index c7fb01f..3e94fe6 100644 --- a/src/tokens/layout/modern.json +++ b/src/tokens/layout/modern.json @@ -106,7 +106,7 @@ }, "m": { "$type": "lineHeights", - "$value": "{modern.line-height.normal}" + "$value": "{modern.line-height.150}" }, "l": { "$type": "lineHeights", @@ -287,9 +287,13 @@ } }, "family": { - "sans": { + "primary": { + "$type": "fontFamilies", + "$value": "{modern.font.blkb_sans.family}" + }, + "monospaced": { "$type": "fontFamilies", - "$value": "{modern.font.family.sans}" + "$value": "{modern.font.monospaced.family}" } }, "letter_spacing": { @@ -937,12 +941,6 @@ } } }, - "text": { - "font_family": { - "$type": "text", - "$value": "{modern.font.name}" - } - }, "border": { "width": { "accent": { @@ -1082,5 +1080,97 @@ } } } + }, + "font_face": { + "blkb_sans": { + "name": { + "$type": "other", + "$value": "{bb.font.blkb_sans.name}" + }, + "regular": { + "style": { + "$type": "other", + "$value": "normal" + }, + "weight": { + "$type": "other", + "$value": "400" + }, + "src": { + "$type": "other", + "$value": "url(\"https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Regular.woff\") format(\"woff\")" + } + }, + "italic": { + "style": { + "$type": "other", + "$value": "italic" + }, + "weight": { + "$type": "other", + "$value": "400" + }, + "src": { + "$type": "other", + "$value": "url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Italic.woff) format(\"woff\")" + } + }, + "thin": { + "style": { + "$type": "other", + "$value": "normal" + }, + "weight": { + "$type": "other", + "$value": "100" + }, + "src": { + "$type": "other", + "$value": "url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Thin.woff) format(\"woff\")" + } + }, + "light": { + "style": { + "$type": "other", + "$value": "normal" + }, + "weight": { + "$type": "other", + "$value": "300" + }, + "src": { + "$type": "other", + "$value": "url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Light.woff) format(\"woff\")" + } + }, + "semibold": { + "style": { + "$type": "other", + "$value": "normal" + }, + "weight": { + "$type": "other", + "$value": "600" + }, + "src": { + "$type": "other", + "$value": "url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Semibold.woff) format(\"woff\")" + } + }, + "bold": { + "style": { + "$type": "other", + "$value": "normal" + }, + "weight": { + "$type": "other", + "$value": "700" + }, + "src": { + "$type": "other", + "$value": "url(https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Bold.woff) format(\"woff\")" + } + } + } } } \ No newline at end of file From 22c9f170719b651f0c6709bc1ceae00d3b592ce5 Mon Sep 17 00:00:00 2001 From: Matt Gregg Date: Tue, 1 Oct 2024 16:38:05 -0400 Subject: [PATCH 2/2] remove unused src tokens, update name token to reference modern base --- src/tokens/base-blackbaud.json | 8 -------- src/tokens/layout/modern.json | 2 +- 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/src/tokens/base-blackbaud.json b/src/tokens/base-blackbaud.json index 6648351..5e98298 100644 --- a/src/tokens/base-blackbaud.json +++ b/src/tokens/base-blackbaud.json @@ -92,14 +92,6 @@ } }, "blkb_sans": { - "regular": { - "$type": "other", - "$value": "url(\"https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Regular.woff\") format(\"woff\")" - }, - "italic": { - "$type": "other", - "$value": "url(\"https://sky.blackbaudcdn.net/static/skyux-fonts/2.0.0/assets/BLKBSans-Italic.woff\") format(\"woff\")" - }, "name": { "$type": "other", "$value": "BLKB Sans" diff --git a/src/tokens/layout/modern.json b/src/tokens/layout/modern.json index 3e94fe6..5e7ad3b 100644 --- a/src/tokens/layout/modern.json +++ b/src/tokens/layout/modern.json @@ -1085,7 +1085,7 @@ "blkb_sans": { "name": { "$type": "other", - "$value": "{bb.font.blkb_sans.name}" + "$value": "{modern.font.blkb_sans.name}" }, "regular": { "style": {