From 4907e2efb43d7b2b8ca318b5df599bed638d0a21 Mon Sep 17 00:00:00 2001 From: Lee Moody Date: Thu, 9 Jan 2025 18:20:24 +0000 Subject: [PATCH 1/4] chore: Add token attributes to the tooling export --- apps/dictionary/src/formatters/js/tooling.js | 5 + .../o3-tooling-token/build/core/_variables.js | 1082 ++++++++++++++++ .../build/core/professional/_variables.js | 1130 +++++++++++++++++ .../build/icons/_variables.js | 252 ++++ .../build/internal/_variables.js | 831 ++++++++++++ .../build/sustainable-views/_variables.js | 865 +++++++++++++ .../build/whitelabel/_variables.js | 880 +++++++++++++ 7 files changed, 5045 insertions(+) diff --git a/apps/dictionary/src/formatters/js/tooling.js b/apps/dictionary/src/formatters/js/tooling.js index c7a0b86826..da57b47f56 100644 --- a/apps/dictionary/src/formatters/js/tooling.js +++ b/apps/dictionary/src/formatters/js/tooling.js @@ -14,6 +14,11 @@ const toolingFormat = ({dictionary}) => { originalValue: token.original.value, type, description: token.description, + attributes: { + item: token.attributes.item, + subitem: token.attributes.subitem, + state: token.attributes.state, + }, origamiKeys: token.origamiKeys, path: token.path, origamiTint: token.origamiTint, diff --git a/libraries/o3-tooling-token/build/core/_variables.js b/libraries/o3-tooling-token/build/core/_variables.js index 9f7fd24329..4e59b0d4ca 100644 --- a/libraries/o3-tooling-token/build/core/_variables.js +++ b/libraries/o3-tooling-token/build/core/_variables.js @@ -4,6 +4,9 @@ export default { "value": "4px", "originalValue": "4", "type": "dimension", + "attributes": { + "item": "1" + }, "path": [ "o3", "border-radius", @@ -17,6 +20,9 @@ export default { "value": "6px", "originalValue": "6", "type": "dimension", + "attributes": { + "item": "2" + }, "path": [ "o3", "border-radius", @@ -31,6 +37,10 @@ export default { "originalValue": "#FCD0B1", "type": "color", "description": "FT Pink is used for the FT logo", + "attributes": { + "item": "palette", + "subitem": "ft-pink" + }, "origamiKeys": [ "palette", "primary" @@ -50,6 +60,10 @@ export default { "originalValue": "#333333ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "ft-grey" + }, "origamiKeys": [ "palette", "primary" @@ -69,6 +83,10 @@ export default { "originalValue": "#ffffffff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "white" + }, "origamiKeys": [ "palette", "primary" @@ -88,6 +106,10 @@ export default { "originalValue": "#000000ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "black" + }, "origamiKeys": [ "palette", "primary" @@ -107,6 +129,10 @@ export default { "originalValue": "#990f3dff", "type": "color", "description": "Claret is the main branding colour for MyFT related products. It should be used sparingly and never be used as a background colour.\n\nUsage example: MyFT branding; MyFT CTAs", + "attributes": { + "item": "palette", + "subitem": "claret" + }, "origamiKeys": [ "palette", "secondary" @@ -126,6 +152,10 @@ export default { "originalValue": "#0d7680ff", "type": "color", "description": "Teal is the most striking colour and main CTA colour on ft.com. It is reserved for important action items that need to stand out: buttons, text links and other critical functional use cases.", + "attributes": { + "item": "palette", + "subitem": "teal" + }, "origamiKeys": [ "palette", "secondary" @@ -145,6 +175,10 @@ export default { "originalValue": "#0f5499ff", "type": "color", "description": "Oxford is used to denote opinion pieces (in combination with Sky). It is used on the homepage and in articles. Use for information and callouts in general.\n\nUsage example: opinion branding; opinion topic tags.", + "attributes": { + "item": "palette", + "subitem": "oxford" + }, "origamiKeys": [ "palette", "secondary" @@ -164,6 +198,10 @@ export default { "originalValue": "#262a33ff", "type": "color", "description": "Slate is a warmer version of black. It is used as inverse backgrounds for editorial content and as a theme option(Mono) for buttons.", + "attributes": { + "item": "palette", + "subitem": "slate" + }, "origamiKeys": [ "palette", "secondary" @@ -183,6 +221,10 @@ export default { "originalValue": "#fff1e5ff", "type": "color", "description": "Paper, as it’s name implies, is the FT’s main background colour. It is the main expression of the brand colour on product. It is a lighter, more legible shade of FT Pink and can be seen as a kind of replacement of white.", + "attributes": { + "item": "palette", + "subitem": "paper" + }, "origamiKeys": [ "palette", "secondary" @@ -202,6 +244,10 @@ export default { "originalValue": "#ff8833ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "mandarin" + }, "origamiKeys": [ "palette", "tertiary" @@ -221,6 +267,10 @@ export default { "originalValue": "#00a0ddff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "light-blue" + }, "origamiKeys": [ "palette", "tertiary" @@ -240,6 +290,10 @@ export default { "originalValue": "#cc0000ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "crimson" + }, "origamiKeys": [ "palette", "tertiary" @@ -259,6 +313,10 @@ export default { "originalValue": "#006f9bff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "graphics-dark-blue" + }, "origamiKeys": [ "palette", "tertiary" @@ -278,6 +336,10 @@ export default { "originalValue": "#f2dfceff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "wheat" + }, "origamiKeys": [ "palette", "tertiary" @@ -297,6 +359,10 @@ export default { "originalValue": "#ff7faaff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "candy" + }, "origamiKeys": [ "palette", "tertiary" @@ -316,6 +382,10 @@ export default { "originalValue": "#96cc28ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "wasabi" + }, "origamiKeys": [ "palette", "tertiary" @@ -335,6 +405,10 @@ export default { "originalValue": "#00994dff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "jade" + }, "origamiKeys": [ "palette", "tertiary" @@ -354,6 +428,10 @@ export default { "originalValue": "#593380ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "velvet" + }, "origamiKeys": [ "palette", "tertiary" @@ -373,6 +451,10 @@ export default { "originalValue": "#ffec1aff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "lemon" + }, "origamiKeys": [ "palette", "tertiary" @@ -392,6 +474,10 @@ export default { "originalValue": "#cce6ffff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "sky" + }, "origamiKeys": [ "palette", "tertiary" @@ -411,6 +497,10 @@ export default { "originalValue": "#355778ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "matisse-blue" + }, "origamiKeys": [ "palette", "tertiary" @@ -430,6 +520,10 @@ export default { "originalValue": "#f2e5daff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "black-5" + }, "path": [ "o3", "color", @@ -449,6 +543,10 @@ export default { "originalValue": "#e6d9ceff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "black-10" + }, "path": [ "o3", "color", @@ -468,6 +566,10 @@ export default { "originalValue": "#ccc1b7ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "black-20" + }, "path": [ "o3", "color", @@ -487,6 +589,10 @@ export default { "originalValue": "#b3a9a0ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "black-30" + }, "path": [ "o3", "color", @@ -506,6 +612,10 @@ export default { "originalValue": "#999189ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "black-40" + }, "path": [ "o3", "color", @@ -525,6 +635,10 @@ export default { "originalValue": "#807973ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "black-50" + }, "path": [ "o3", "color", @@ -544,6 +658,10 @@ export default { "originalValue": "#66605cff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "black-60" + }, "path": [ "o3", "color", @@ -563,6 +681,10 @@ export default { "originalValue": "#4d4845ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "black-70" + }, "path": [ "o3", "color", @@ -582,6 +704,10 @@ export default { "originalValue": "#33302eff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "black-80" + }, "path": [ "o3", "color", @@ -601,6 +727,10 @@ export default { "originalValue": "#1a1817ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "black-90" + }, "path": [ "o3", "color", @@ -620,6 +750,10 @@ export default { "originalValue": "#fff2e8ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "white-10" + }, "path": [ "o3", "color", @@ -639,6 +773,10 @@ export default { "originalValue": "#fff4eaff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "white-20" + }, "path": [ "o3", "color", @@ -658,6 +796,10 @@ export default { "originalValue": "#fff7efff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "white-40" + }, "path": [ "o3", "color", @@ -677,6 +819,10 @@ export default { "originalValue": "#fff9f5ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "white-60" + }, "path": [ "o3", "color", @@ -696,6 +842,10 @@ export default { "originalValue": "#fffcfaff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "white-80" + }, "path": [ "o3", "color", @@ -715,6 +865,10 @@ export default { "originalValue": "#082a4dff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "oxford-30" + }, "path": [ "o3", "color", @@ -734,6 +888,10 @@ export default { "originalValue": "#0a3866ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "oxford-40" + }, "path": [ "o3", "color", @@ -753,6 +911,10 @@ export default { "originalValue": "#0d4680ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "oxford-50" + }, "path": [ "o3", "color", @@ -772,6 +934,10 @@ export default { "originalValue": "#0f5499ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "oxford-60" + }, "path": [ "o3", "color", @@ -791,6 +957,10 @@ export default { "originalValue": "#1262b3ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "oxford-70" + }, "path": [ "o3", "color", @@ -810,6 +980,10 @@ export default { "originalValue": "#1470ccff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "oxford-80" + }, "path": [ "o3", "color", @@ -829,6 +1003,10 @@ export default { "originalValue": "#177ee6ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "oxford-90" + }, "path": [ "o3", "color", @@ -848,6 +1026,10 @@ export default { "originalValue": "#1a8cffff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "oxford-100" + }, "path": [ "o3", "color", @@ -867,6 +1049,10 @@ export default { "originalValue": "#052f33ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "teal-20" + }, "path": [ "o3", "color", @@ -886,6 +1072,10 @@ export default { "originalValue": "#08474dff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "teal-30" + }, "path": [ "o3", "color", @@ -905,6 +1095,10 @@ export default { "originalValue": "#0a5e66ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "teal-40" + }, "path": [ "o3", "color", @@ -924,6 +1118,10 @@ export default { "originalValue": "#0d7680ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "teal-50" + }, "path": [ "o3", "color", @@ -943,6 +1141,10 @@ export default { "originalValue": "#0f8e99ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "teal-60" + }, "path": [ "o3", "color", @@ -962,6 +1164,10 @@ export default { "originalValue": "#12a5b3ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "teal-70" + }, "path": [ "o3", "color", @@ -981,6 +1187,10 @@ export default { "originalValue": "#14bdccff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "teal-80" + }, "path": [ "o3", "color", @@ -1000,6 +1210,10 @@ export default { "originalValue": "#17d4e6ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "teal-90" + }, "path": [ "o3", "color", @@ -1019,6 +1233,10 @@ export default { "originalValue": "#1aecffff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "teal-100" + }, "path": [ "o3", "color", @@ -1038,6 +1256,10 @@ export default { "originalValue": "#4d081fff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "claret-30" + }, "path": [ "o3", "color", @@ -1057,6 +1279,10 @@ export default { "originalValue": "#660a29ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "claret-40" + }, "path": [ "o3", "color", @@ -1076,6 +1302,10 @@ export default { "originalValue": "#800d33ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "claret-50" + }, "path": [ "o3", "color", @@ -1095,6 +1325,10 @@ export default { "originalValue": "#990f3dff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "claret-60" + }, "path": [ "o3", "color", @@ -1114,6 +1348,10 @@ export default { "originalValue": "#b31247ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "claret-70" + }, "path": [ "o3", "color", @@ -1133,6 +1371,10 @@ export default { "originalValue": "#cc1452ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "claret-80" + }, "path": [ "o3", "color", @@ -1152,6 +1394,10 @@ export default { "originalValue": "#e6175cff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "claret-90" + }, "path": [ "o3", "color", @@ -1171,6 +1417,10 @@ export default { "originalValue": "#ff1a66ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "claret-100" + }, "path": [ "o3", "color", @@ -1189,6 +1439,10 @@ export default { "value": "#ffebd9", "originalValue": "#FFEBD9", "type": "color", + "attributes": { + "item": "palette", + "subitem": "wheat-100" + }, "path": [ "o3", "color", @@ -1208,6 +1462,11 @@ export default { "originalValue": "{o3.color.palette.teal}", "type": "color", "description": "", + "attributes": { + "item": "use-case", + "subitem": "link", + "state": "text" + }, "path": [ "o3", "color", @@ -1224,6 +1483,11 @@ export default { "value": "#08474d", "originalValue": "{o3.color.palette.teal-30}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link", + "state": "text" + }, "path": [ "o3", "color", @@ -1240,6 +1504,11 @@ export default { "value": "#cfd8d1", "originalValue": "#CFD8D1", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link", + "state": "underline" + }, "path": [ "o3", "color", @@ -1256,6 +1525,11 @@ export default { "value": "#9ec0bd", "originalValue": "#9EC0BD", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link", + "state": "underline" + }, "path": [ "o3", "color", @@ -1272,6 +1546,11 @@ export default { "value": "#ffffff", "originalValue": "#ffffffff", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link-inverse", + "state": "text" + }, "path": [ "o3", "color", @@ -1288,6 +1567,11 @@ export default { "value": "#d4d4d6", "originalValue": "#d4d4d6", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link-inverse", + "state": "text" + }, "path": [ "o3", "color", @@ -1304,6 +1588,11 @@ export default { "value": "#ffffff", "originalValue": "#ffffffff", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link-inverse", + "state": "underline" + }, "path": [ "o3", "color", @@ -1320,6 +1609,11 @@ export default { "value": "#d4d4d6", "originalValue": "#d4d4d6", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link-inverse", + "state": "underline" + }, "path": [ "o3", "color", @@ -1336,6 +1630,11 @@ export default { "value": "#fff1e5", "originalValue": "{o3.color.palette.paper}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "page", + "state": "background" + }, "path": [ "o3", "color", @@ -1351,6 +1650,11 @@ export default { "value": "#262a33", "originalValue": "{o3.color.palette.slate}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "page-inverse", + "state": "background" + }, "path": [ "o3", "color", @@ -1366,6 +1670,11 @@ export default { "value": "#33302e", "originalValue": "{o3.color.palette.black-80}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "body", + "state": "text" + }, "path": [ "o3", "color", @@ -1381,6 +1690,11 @@ export default { "value": "#ffffff", "originalValue": "{o3.color.palette.white}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "body-inverse", + "state": "text" + }, "path": [ "o3", "color", @@ -1396,6 +1710,11 @@ export default { "value": "#33302e", "originalValue": "{o3.color.palette.black-80}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "heading", + "state": "text" + }, "path": [ "o3", "color", @@ -1411,6 +1730,11 @@ export default { "value": "#ffffff", "originalValue": "{o3.color.palette.white}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "heading-inverse", + "state": "text" + }, "path": [ "o3", "color", @@ -1427,6 +1751,11 @@ export default { "originalValue": "{o3.color.palette.black-50}", "type": "color", "description": "\"Muted\" text is less prominent, for example credits and captions.", + "attributes": { + "item": "use-case", + "subitem": "muted", + "state": "text" + }, "path": [ "o3", "color", @@ -1443,6 +1772,11 @@ export default { "originalValue": "#a8aaad", "type": "color", "description": "\"Muted\" text is less prominent, for example credits and captions.", + "attributes": { + "item": "use-case", + "subitem": "muted-inverse", + "state": "text" + }, "path": [ "o3", "color", @@ -1458,6 +1792,11 @@ export default { "value": "#33302e", "originalValue": "{o3.color.palette.black-80}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "footer", + "state": "text" + }, "path": [ "o3", "color", @@ -1473,6 +1812,11 @@ export default { "value": "#33302e", "originalValue": "{o3.color.palette.black-80}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "caption", + "state": "text" + }, "path": [ "o3", "color", @@ -1488,6 +1832,11 @@ export default { "value": "#ffffff", "originalValue": "{o3.color.palette.white}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "button", + "state": "foreground" + }, "path": [ "o3", "color", @@ -1503,6 +1852,11 @@ export default { "value": "#fff7ef", "originalValue": "{o3.color.palette.white-40}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "button", + "state": "foreground-disabled" + }, "path": [ "o3", "color", @@ -1518,6 +1872,11 @@ export default { "value": "#0d7680", "originalValue": "{o3.color.palette.teal}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "button", + "state": "default" + }, "path": [ "o3", "color", @@ -1533,6 +1892,11 @@ export default { "value": "#0a5e66", "originalValue": "{o3.color.palette.teal-40}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "button", + "state": "hover" + }, "path": [ "o3", "color", @@ -1548,6 +1912,11 @@ export default { "value": "#052f33", "originalValue": "{o3.color.palette.teal-20}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "button", + "state": "pressed" + }, "path": [ "o3", "color", @@ -1563,6 +1932,11 @@ export default { "value": "#9ec0bd", "originalValue": "#9EC0BD", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "button", + "state": "disabled" + }, "path": [ "o3", "color", @@ -1578,6 +1952,10 @@ export default { "value": "#cc0000", "originalValue": "rgba(204,0,0,0.06)", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "error-background" + }, "path": [ "o3", "color", @@ -1592,6 +1970,10 @@ export default { "value": "#cc0000", "originalValue": "{o3.color.palette.crimson}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "error-text" + }, "path": [ "o3", "color", @@ -1606,6 +1988,10 @@ export default { "value": "#cc0000", "originalValue": "{o3.color.palette.crimson}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "error" + }, "path": [ "o3", "color", @@ -1620,6 +2006,9 @@ export default { "value": "4px", "originalValue": "4px", "type": "dimension", + "attributes": { + "item": "5xs" + }, "path": [ "o3", "spacing", @@ -1633,6 +2022,9 @@ export default { "value": "8px", "originalValue": "8px", "type": "dimension", + "attributes": { + "item": "4xs" + }, "path": [ "o3", "spacing", @@ -1646,6 +2038,9 @@ export default { "value": "12px", "originalValue": "12px", "type": "dimension", + "attributes": { + "item": "3xs" + }, "path": [ "o3", "spacing", @@ -1659,6 +2054,9 @@ export default { "value": "16px", "originalValue": "16px", "type": "dimension", + "attributes": { + "item": "2xs" + }, "path": [ "o3", "spacing", @@ -1672,6 +2070,9 @@ export default { "value": "20px", "originalValue": "20px", "type": "dimension", + "attributes": { + "item": "xs" + }, "path": [ "o3", "spacing", @@ -1685,6 +2086,9 @@ export default { "value": "24px", "originalValue": "24px", "type": "dimension", + "attributes": { + "item": "s" + }, "path": [ "o3", "spacing", @@ -1698,6 +2102,9 @@ export default { "value": "32px", "originalValue": "32px", "type": "dimension", + "attributes": { + "item": "m" + }, "path": [ "o3", "spacing", @@ -1711,6 +2118,9 @@ export default { "value": "40px", "originalValue": "40px", "type": "dimension", + "attributes": { + "item": "l" + }, "path": [ "o3", "spacing", @@ -1724,6 +2134,9 @@ export default { "value": "48px", "originalValue": "48px", "type": "dimension", + "attributes": { + "item": "xl" + }, "path": [ "o3", "spacing", @@ -1737,6 +2150,9 @@ export default { "value": "64px", "originalValue": "64px", "type": "dimension", + "attributes": { + "item": "2xl" + }, "path": [ "o3", "spacing", @@ -1750,6 +2166,9 @@ export default { "value": "80px", "originalValue": "80px", "type": "dimension", + "attributes": { + "item": "3xl" + }, "path": [ "o3", "spacing", @@ -1763,6 +2182,9 @@ export default { "value": "96px", "originalValue": "96px", "type": "dimension", + "attributes": { + "item": "4xl" + }, "path": [ "o3", "spacing", @@ -1777,6 +2199,11 @@ export default { "originalValue": "{o3.font.family.financier-display}", "type": "fontFamily", "description": "Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-lg", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -1793,6 +2220,11 @@ export default { "originalValue": "{o3.font.weight.bold}", "type": "fontWeight", "description": "Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-lg", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -1809,6 +2241,11 @@ export default { "originalValue": "{o3.font.size.7}", "type": "dimension", "description": "Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-lg", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -1825,6 +2262,11 @@ export default { "originalValue": "{o3.font.lineheight.7}", "type": "number", "description": "Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-lg", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -1841,6 +2283,11 @@ export default { "originalValue": "{o3.font.family.financier-display}", "type": "fontFamily", "description": "Use this style for medium screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-md", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -1857,6 +2304,11 @@ export default { "originalValue": "{o3.font.weight.bold}", "type": "fontWeight", "description": "Use this style for medium screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-md", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -1873,6 +2325,11 @@ export default { "originalValue": "{o3.font.size.6}", "type": "dimension", "description": "Use this style for medium screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-md", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -1889,6 +2346,11 @@ export default { "originalValue": "{o3.font.lineheight.6}", "type": "number", "description": "Use this style for medium screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-md", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -1905,6 +2367,11 @@ export default { "originalValue": "{o3.font.family.financier-display}", "type": "fontFamily", "description": "Use this style for small screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-sm", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -1921,6 +2388,11 @@ export default { "originalValue": "{o3.font.weight.bold}", "type": "fontWeight", "description": "Use this style for small screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-sm", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -1937,6 +2409,11 @@ export default { "originalValue": "{o3.font.size.5}", "type": "dimension", "description": "Use this style for small screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-sm", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -1953,6 +2430,11 @@ export default { "originalValue": "{o3.font.lineheight.5}", "type": "number", "description": "Use this style for small screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-sm", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -1969,6 +2451,11 @@ export default { "originalValue": "{o3.font.family.financier-display}", "type": "fontFamily", "description": "Use this style for large screens headlines in standard-sized teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-lg", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -1985,6 +2472,11 @@ export default { "originalValue": "{o3.font.weight.light}", "type": "fontWeight", "description": "Use this style for large screens headlines in standard-sized teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-lg", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2001,6 +2493,11 @@ export default { "originalValue": "{o3.font.size.6}", "type": "dimension", "description": "Use this style for large screens headlines in standard-sized teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-lg", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2017,6 +2514,11 @@ export default { "originalValue": "{o3.font.lineheight.6}", "type": "number", "description": "Use this style for large screens headlines in standard-sized teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-lg", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2033,6 +2535,11 @@ export default { "originalValue": "{o3.font.family.financier-display}", "type": "fontFamily", "description": "Use this style for medium screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-md", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2049,6 +2556,11 @@ export default { "originalValue": "{o3.font.weight.light}", "type": "fontWeight", "description": "Use this style for medium screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-md", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2065,6 +2577,11 @@ export default { "originalValue": "{o3.font.size.5}", "type": "dimension", "description": "Use this style for medium screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-md", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2081,6 +2598,11 @@ export default { "originalValue": "{o3.font.lineheight.5}", "type": "number", "description": "Use this style for medium screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-md", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2097,6 +2619,11 @@ export default { "originalValue": "{o3.font.family.financier-display}", "type": "fontFamily", "description": "Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-sm", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2113,6 +2640,11 @@ export default { "originalValue": "{o3.font.weight.light}", "type": "fontWeight", "description": "Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-sm", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2129,6 +2661,11 @@ export default { "originalValue": "{o3.font.size.4}", "type": "dimension", "description": "Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-sm", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2145,6 +2682,11 @@ export default { "originalValue": "{o3.font.lineheight.4}", "type": "number", "description": "Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-sm", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2161,6 +2703,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-lg", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2177,6 +2724,11 @@ export default { "originalValue": "{o3.font.weight.semibold}", "type": "fontWeight", "description": "Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-lg", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2193,6 +2745,11 @@ export default { "originalValue": "{o3.font.size-metric2.4}", "type": "dimension", "description": "Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-lg", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2209,6 +2766,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.3}", "type": "number", "description": "Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-lg", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2225,6 +2787,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use this style as H3 or subtitles within the content body to break paragraphs, or for titles of components like forms, tables and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-md", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2241,6 +2808,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use this style as H3 or subtitles within the content body to break paragraphs, or for titles of components like forms, tables and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-md", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2257,6 +2829,11 @@ export default { "originalValue": "{o3.font.size-metric2.3}", "type": "dimension", "description": "Use this style as H3 or subtitles within the content body to break paragraphs, or for titles of components like forms, tables and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-md", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2273,6 +2850,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.3}", "type": "number", "description": "Use this style as H3 or subtitles within the content body to break paragraphs, or for titles of components like forms, tables and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-md", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2289,6 +2871,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use H6 for subtitles within the content body to break up paragraphs, and H2 for subheadings on stream pages or as subtitles for components such as forms, tables, and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-sm", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2305,6 +2892,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use H6 for subtitles within the content body to break up paragraphs, and H2 for subheadings on stream pages or as subtitles for components such as forms, tables, and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-sm", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2321,6 +2913,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.2}", "type": "number", "description": "Use H6 for subtitles within the content body to break up paragraphs, and H2 for subheadings on stream pages or as subtitles for components such as forms, tables, and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-sm", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2337,6 +2934,11 @@ export default { "originalValue": "{o3.font.size-metric2.2}", "type": "dimension", "description": "Use H6 for subtitles within the content body to break up paragraphs, and H2 for subheadings on stream pages or as subtitles for components such as forms, tables, and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-sm", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2353,6 +2955,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use primarily for the stand-first (introductory summary or highlight) in topper component, as larger body text in components, or section description.", + "attributes": { + "item": "use-case", + "subitem": "body-lg", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2369,6 +2976,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use primarily for the stand-first (introductory summary or highlight) in topper component, as larger body text in components, or section description.", + "attributes": { + "item": "use-case", + "subitem": "body-lg", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2385,6 +2997,11 @@ export default { "originalValue": "{o3.font.size-metric2.1}", "type": "dimension", "description": "Use primarily for the stand-first (introductory summary or highlight) in topper component, as larger body text in components, or section description.", + "attributes": { + "item": "use-case", + "subitem": "body-lg", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2401,6 +3018,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.1}", "type": "number", "description": "Use primarily for the stand-first (introductory summary or highlight) in topper component, as larger body text in components, or section description.", + "attributes": { + "item": "use-case", + "subitem": "body-lg", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2417,6 +3039,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use this style for the stand-first in teasers and as the default body copy style across components such as location in the byline.", + "attributes": { + "item": "use-case", + "subitem": "body-base", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2433,6 +3060,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use this style for the stand-first in teasers and as the default body copy style across components such as location in the byline.", + "attributes": { + "item": "use-case", + "subitem": "body-base", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2449,6 +3081,11 @@ export default { "originalValue": "{o3.font.size-metric2.0}", "type": "dimension", "description": "Use this style for the stand-first in teasers and as the default body copy style across components such as location in the byline.", + "attributes": { + "item": "use-case", + "subitem": "body-base", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2465,6 +3102,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.0}", "type": "number", "description": "Use this style for the stand-first in teasers and as the default body copy style across components such as location in the byline.", + "attributes": { + "item": "use-case", + "subitem": "body-base", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2481,6 +3123,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use this style for bold formatting in body copy or for small interactive elements, such as Topic tags and Author names.", + "attributes": { + "item": "use-case", + "subitem": "body-highlight", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2497,6 +3144,11 @@ export default { "originalValue": "{o3.font.weight.semibold}", "type": "fontWeight", "description": "Use this style for bold formatting in body copy or for small interactive elements, such as Topic tags and Author names.", + "attributes": { + "item": "use-case", + "subitem": "body-highlight", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2513,6 +3165,11 @@ export default { "originalValue": "{o3.font.size-metric2.0}", "type": "dimension", "description": "Use this style for bold formatting in body copy or for small interactive elements, such as Topic tags and Author names.", + "attributes": { + "item": "use-case", + "subitem": "body-highlight", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2529,6 +3186,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.0}", "type": "number", "description": "Use this style for bold formatting in body copy or for small interactive elements, such as Topic tags and Author names.", + "attributes": { + "item": "use-case", + "subitem": "body-highlight", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2545,6 +3207,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use this style primarily for links in paragraph or as stand alone link.", + "attributes": { + "item": "use-case", + "subitem": "body-link", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2561,6 +3228,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use this style primarily for links in paragraph or as stand alone link.", + "attributes": { + "item": "use-case", + "subitem": "body-link", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2577,6 +3249,11 @@ export default { "originalValue": "{o3.font.size-metric2.0}", "type": "dimension", "description": "Use this style primarily for links in paragraph or as stand alone link.", + "attributes": { + "item": "use-case", + "subitem": "body-link", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2593,6 +3270,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.0}", "type": "number", "description": "Use this style primarily for links in paragraph or as stand alone link.", + "attributes": { + "item": "use-case", + "subitem": "body-link", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2609,6 +3291,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use this style for caption in visual assets such as image and video and for small text elements, such as secondary metadata, caveats, or footnotes.", + "attributes": { + "item": "use-case", + "subitem": "detail", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2625,6 +3312,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use this style for caption in visual assets such as image and video and for small text elements, such as secondary metadata, caveats, or footnotes.", + "attributes": { + "item": "use-case", + "subitem": "detail", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2641,6 +3333,11 @@ export default { "originalValue": "{o3.font.size-metric2.negative-1}", "type": "dimension", "description": "Use this style for caption in visual assets such as image and video and for small text elements, such as secondary metadata, caveats, or footnotes.", + "attributes": { + "item": "use-case", + "subitem": "detail", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2657,6 +3354,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.negative-1}", "type": "number", "description": "Use this style for caption in visual assets such as image and video and for small text elements, such as secondary metadata, caveats, or footnotes.", + "attributes": { + "item": "use-case", + "subitem": "detail", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2673,6 +3375,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use this style for labels such as badges and metadata in teasers and toppers (e.g., \"Live,\" \"Premium,\" or the main timestamp). Avoid using full sentences.", + "attributes": { + "item": "use-case", + "subitem": "label", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2689,6 +3396,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use this style for labels such as badges and metadata in teasers and toppers (e.g., \"Live,\" \"Premium,\" or the main timestamp). Avoid using full sentences.", + "attributes": { + "item": "use-case", + "subitem": "label", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2705,6 +3417,11 @@ export default { "originalValue": "{o3.font.size-metric2.negative-1}", "type": "dimension", "description": "Use this style for labels such as badges and metadata in teasers and toppers (e.g., \"Live,\" \"Premium,\" or the main timestamp). Avoid using full sentences.", + "attributes": { + "item": "use-case", + "subitem": "label", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2721,6 +3438,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.negative-1}", "type": "number", "description": "Use this style for labels such as badges and metadata in teasers and toppers (e.g., \"Live,\" \"Premium,\" or the main timestamp). Avoid using full sentences.", + "attributes": { + "item": "use-case", + "subitem": "label", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2737,6 +3459,11 @@ export default { "originalValue": "uppercase", "type": "textCase", "description": "Use this style for labels such as badges and metadata in teasers and toppers (e.g., \"Live,\" \"Premium,\" or the main timestamp). Avoid using full sentences.", + "attributes": { + "item": "use-case", + "subitem": "label", + "state": "textCase" + }, "path": [ "o3", "typography", @@ -2753,6 +3480,11 @@ export default { "originalValue": "Georgia", "type": "fontFamily", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-base", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2769,6 +3501,11 @@ export default { "originalValue": "Regular", "type": "fontWeight", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-base", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2785,6 +3522,11 @@ export default { "originalValue": "{o3.font.size.2}", "type": "dimension", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-base", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2801,6 +3543,11 @@ export default { "originalValue": "{o3.font.lineheight.4}", "type": "number", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-base", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2817,6 +3564,11 @@ export default { "originalValue": "Georgia", "type": "fontFamily", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-highlight", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2833,6 +3585,11 @@ export default { "originalValue": "Bold", "type": "fontWeight", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-highlight", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2849,6 +3606,11 @@ export default { "originalValue": "{o3.font.size.2}", "type": "dimension", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-highlight", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2865,6 +3627,11 @@ export default { "originalValue": "{o3.font.lineheight.4}", "type": "number", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-highlight", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2881,6 +3648,11 @@ export default { "originalValue": "Georgia", "type": "fontFamily", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-emphasis", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2897,6 +3669,11 @@ export default { "originalValue": "Regular", "type": "fontWeight", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-emphasis", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2913,6 +3690,11 @@ export default { "originalValue": "{o3.font.size.2}", "type": "dimension", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-emphasis", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2929,6 +3711,11 @@ export default { "originalValue": "{o3.font.lineheight.4}", "type": "number", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-emphasis", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2945,6 +3732,11 @@ export default { "originalValue": "italic", "type": "fontStyle", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-emphasis", + "state": "fontStyle" + }, "path": [ "o3", "typography", @@ -2961,6 +3753,11 @@ export default { "originalValue": "Georgia", "type": "fontFamily", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-link", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2977,6 +3774,11 @@ export default { "originalValue": "Regular", "type": "fontWeight", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-link", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2993,6 +3795,11 @@ export default { "originalValue": "{o3.font.size.2}", "type": "dimension", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-link", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -3009,6 +3816,11 @@ export default { "originalValue": "{o3.font.lineheight.4}", "type": "number", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-link", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -3024,6 +3836,10 @@ export default { "value": "metric 2 VF", "originalValue": "metric 2 VF", "type": "fontFamily", + "attributes": { + "item": "family", + "subitem": "metric" + }, "path": [ "o3", "font", @@ -3038,6 +3854,10 @@ export default { "value": "financier display VF", "originalValue": "financier display VF", "type": "fontFamily", + "attributes": { + "item": "family", + "subitem": "financier-display" + }, "path": [ "o3", "font", @@ -3052,6 +3872,10 @@ export default { "value": "georgia", "originalValue": "georgia", "type": "fontFamily", + "attributes": { + "item": "family", + "subitem": "georgia" + }, "path": [ "o3", "font", @@ -3066,6 +3890,10 @@ export default { "value": "300", "originalValue": "300", "type": "fontWeight", + "attributes": { + "item": "weight", + "subitem": "light" + }, "path": [ "o3", "font", @@ -3080,6 +3908,10 @@ export default { "value": "400", "originalValue": "400", "type": "fontWeight", + "attributes": { + "item": "weight", + "subitem": "regular" + }, "path": [ "o3", "font", @@ -3094,6 +3926,10 @@ export default { "value": "500", "originalValue": "500", "type": "fontWeight", + "attributes": { + "item": "weight", + "subitem": "medium" + }, "path": [ "o3", "font", @@ -3108,6 +3944,10 @@ export default { "value": "700", "originalValue": "700", "type": "fontWeight", + "attributes": { + "item": "weight", + "subitem": "semibold" + }, "path": [ "o3", "font", @@ -3122,6 +3962,10 @@ export default { "value": "800", "originalValue": "800", "type": "fontWeight", + "attributes": { + "item": "weight", + "subitem": "bold" + }, "path": [ "o3", "font", @@ -3136,6 +3980,10 @@ export default { "value": "20px", "originalValue": "20", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "0" + }, "path": [ "o3", "font", @@ -3150,6 +3998,10 @@ export default { "value": "20px", "originalValue": "20", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "1" + }, "path": [ "o3", "font", @@ -3164,6 +4016,10 @@ export default { "value": "24px", "originalValue": "24", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "2" + }, "path": [ "o3", "font", @@ -3178,6 +4034,10 @@ export default { "value": "28px", "originalValue": "28", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "3" + }, "path": [ "o3", "font", @@ -3192,6 +4052,10 @@ export default { "value": "32px", "originalValue": "32", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "4" + }, "path": [ "o3", "font", @@ -3206,6 +4070,10 @@ export default { "value": "32px", "originalValue": "32", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "5" + }, "path": [ "o3", "font", @@ -3220,6 +4088,10 @@ export default { "value": "40px", "originalValue": "40", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "6" + }, "path": [ "o3", "font", @@ -3234,6 +4106,10 @@ export default { "value": "48px", "originalValue": "48", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "7" + }, "path": [ "o3", "font", @@ -3248,6 +4124,10 @@ export default { "value": "56px", "originalValue": "56", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "8" + }, "path": [ "o3", "font", @@ -3262,6 +4142,10 @@ export default { "value": "72px", "originalValue": "72", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "9" + }, "path": [ "o3", "font", @@ -3276,6 +4160,10 @@ export default { "value": "84px", "originalValue": "84", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "10" + }, "path": [ "o3", "font", @@ -3290,6 +4178,10 @@ export default { "value": "16px", "originalValue": "16", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "negative-2" + }, "path": [ "o3", "font", @@ -3304,6 +4196,10 @@ export default { "value": "16px", "originalValue": "16", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "negative-1" + }, "path": [ "o3", "font", @@ -3318,6 +4214,10 @@ export default { "value": "16px", "originalValue": "16", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "0" + }, "path": [ "o3", "font", @@ -3332,6 +4232,10 @@ export default { "value": "18px", "originalValue": "18", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "1" + }, "path": [ "o3", "font", @@ -3346,6 +4250,10 @@ export default { "value": "20px", "originalValue": "20", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "2" + }, "path": [ "o3", "font", @@ -3360,6 +4268,10 @@ export default { "value": "24px", "originalValue": "24", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "3" + }, "path": [ "o3", "font", @@ -3374,6 +4286,10 @@ export default { "value": "28px", "originalValue": "28", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "4" + }, "path": [ "o3", "font", @@ -3388,6 +4304,10 @@ export default { "value": "32px", "originalValue": "32", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "5" + }, "path": [ "o3", "font", @@ -3402,6 +4322,10 @@ export default { "value": "40px", "originalValue": "40", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "6" + }, "path": [ "o3", "font", @@ -3416,6 +4340,10 @@ export default { "value": "48px", "originalValue": "48", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "7" + }, "path": [ "o3", "font", @@ -3430,6 +4358,10 @@ export default { "value": "56px", "originalValue": "56", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "8" + }, "path": [ "o3", "font", @@ -3444,6 +4376,10 @@ export default { "value": "72px", "originalValue": "72", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "9" + }, "path": [ "o3", "font", @@ -3458,6 +4394,10 @@ export default { "value": "84px", "originalValue": "84", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "10" + }, "path": [ "o3", "font", @@ -3472,6 +4412,10 @@ export default { "value": "12px", "originalValue": "12", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "negative-2" + }, "path": [ "o3", "font", @@ -3486,6 +4430,10 @@ export default { "value": "14px", "originalValue": "14", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "negative-1" + }, "path": [ "o3", "font", @@ -3500,6 +4448,10 @@ export default { "value": "24px", "originalValue": "24", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "0" + }, "path": [ "o3", "font", @@ -3514,6 +4466,10 @@ export default { "value": "24px", "originalValue": "24", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "1" + }, "path": [ "o3", "font", @@ -3528,6 +4484,10 @@ export default { "value": "28px", "originalValue": "28", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "2" + }, "path": [ "o3", "font", @@ -3542,6 +4502,10 @@ export default { "value": "32px", "originalValue": "32", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "3" + }, "path": [ "o3", "font", @@ -3556,6 +4520,10 @@ export default { "value": "32px", "originalValue": "32", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "4" + }, "path": [ "o3", "font", @@ -3570,6 +4538,10 @@ export default { "value": "40px", "originalValue": "40", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "5" + }, "path": [ "o3", "font", @@ -3584,6 +4556,10 @@ export default { "value": "48px", "originalValue": "48", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "6" + }, "path": [ "o3", "font", @@ -3598,6 +4574,10 @@ export default { "value": "56px", "originalValue": "56", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "7" + }, "path": [ "o3", "font", @@ -3612,6 +4592,10 @@ export default { "value": "72px", "originalValue": "72", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "8" + }, "path": [ "o3", "font", @@ -3626,6 +4610,10 @@ export default { "value": "84px", "originalValue": "84", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "9" + }, "path": [ "o3", "font", @@ -3640,6 +4628,10 @@ export default { "value": "16px", "originalValue": "16", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "negative-3" + }, "path": [ "o3", "font", @@ -3654,6 +4646,10 @@ export default { "value": "16px", "originalValue": "16", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "negative-2" + }, "path": [ "o3", "font", @@ -3668,6 +4664,10 @@ export default { "value": "20px", "originalValue": "20", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "negative-1" + }, "path": [ "o3", "font", @@ -3682,6 +4682,10 @@ export default { "value": "16px", "originalValue": "16", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "0" + }, "path": [ "o3", "font", @@ -3696,6 +4700,10 @@ export default { "value": "18px", "originalValue": "18", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "1" + }, "path": [ "o3", "font", @@ -3710,6 +4718,10 @@ export default { "value": "20px", "originalValue": "20", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "2" + }, "path": [ "o3", "font", @@ -3724,6 +4736,10 @@ export default { "value": "24px", "originalValue": "24", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "3" + }, "path": [ "o3", "font", @@ -3738,6 +4754,10 @@ export default { "value": "28px", "originalValue": "28", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "4" + }, "path": [ "o3", "font", @@ -3752,6 +4772,10 @@ export default { "value": "32px", "originalValue": "32", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "5" + }, "path": [ "o3", "font", @@ -3766,6 +4790,10 @@ export default { "value": "40px", "originalValue": "40", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "6" + }, "path": [ "o3", "font", @@ -3780,6 +4808,10 @@ export default { "value": "48px", "originalValue": "48", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "7" + }, "path": [ "o3", "font", @@ -3794,6 +4826,10 @@ export default { "value": "64px", "originalValue": "64", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "8" + }, "path": [ "o3", "font", @@ -3808,6 +4844,10 @@ export default { "value": "72px", "originalValue": "72", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "9" + }, "path": [ "o3", "font", @@ -3822,6 +4862,10 @@ export default { "value": "10px", "originalValue": "10", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "negative-3" + }, "path": [ "o3", "font", @@ -3836,6 +4880,10 @@ export default { "value": "12px", "originalValue": "12", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "negative-2" + }, "path": [ "o3", "font", @@ -3850,6 +4898,10 @@ export default { "value": "14px", "originalValue": "14", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "negative-1" + }, "path": [ "o3", "font", @@ -3878,6 +4930,11 @@ export default { "offsetY": "0" }, "type": "shadow", + "attributes": { + "item": "use-case", + "subitem": "ring", + "state": "inner" + }, "path": [ "o3", "focus", @@ -3907,6 +4964,11 @@ export default { "offsetY": "0" }, "type": "shadow", + "attributes": { + "item": "use-case", + "subitem": "ring", + "state": "outer" + }, "path": [ "o3", "focus", @@ -3936,6 +4998,11 @@ export default { "offsetY": "0" }, "type": "shadow", + "attributes": { + "item": "use-case", + "subitem": "ring", + "state": "inverse" + }, "path": [ "o3", "focus", @@ -3966,6 +5033,11 @@ export default { "offsetY": "0" }, "type": "shadow", + "attributes": { + "item": "use-case", + "subitem": "ring", + "state": "inverse" + }, "path": [ "o3", "focus", @@ -3996,6 +5068,11 @@ export default { "offsetY": "0" }, "type": "shadow", + "attributes": { + "item": "use-case", + "subitem": "outline", + "state": "color" + }, "path": [ "o3", "focus", @@ -4025,6 +5102,11 @@ export default { "offsetY": "0" }, "type": "shadow", + "attributes": { + "item": "use-case", + "subitem": "outline", + "state": "inverse" + }, "path": [ "o3", "focus", diff --git a/libraries/o3-tooling-token/build/core/professional/_variables.js b/libraries/o3-tooling-token/build/core/professional/_variables.js index c9dcf3e7d3..88167e7d70 100644 --- a/libraries/o3-tooling-token/build/core/professional/_variables.js +++ b/libraries/o3-tooling-token/build/core/professional/_variables.js @@ -5,6 +5,10 @@ export default { "originalValue": "#FCD0B1", "type": "color", "description": "FT Pink is used for the FT logo", + "attributes": { + "item": "palette", + "subitem": "ft-pink" + }, "origamiKeys": [ "palette", "primary" @@ -24,6 +28,10 @@ export default { "originalValue": "#333333ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "ft-grey" + }, "origamiKeys": [ "palette", "primary" @@ -43,6 +51,10 @@ export default { "originalValue": "#ffffffff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "white" + }, "origamiKeys": [ "palette", "primary" @@ -62,6 +74,10 @@ export default { "originalValue": "#000000ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "black" + }, "origamiKeys": [ "palette", "primary" @@ -81,6 +97,10 @@ export default { "originalValue": "#990f3dff", "type": "color", "description": "Claret is the main branding colour for MyFT related products. It should be used sparingly and never be used as a background colour.\n\nUsage example: MyFT branding; MyFT CTAs", + "attributes": { + "item": "palette", + "subitem": "claret" + }, "origamiKeys": [ "palette", "secondary" @@ -100,6 +120,10 @@ export default { "originalValue": "#0d7680ff", "type": "color", "description": "Teal is the most striking colour and main CTA colour on ft.com. It is reserved for important action items that need to stand out: buttons, text links and other critical functional use cases.", + "attributes": { + "item": "palette", + "subitem": "teal" + }, "origamiKeys": [ "palette", "secondary" @@ -119,6 +143,10 @@ export default { "originalValue": "#0f5499ff", "type": "color", "description": "Oxford is used to denote opinion pieces (in combination with Sky). It is used on the homepage and in articles. Use for information and callouts in general.\n\nUsage example: opinion branding; opinion topic tags.", + "attributes": { + "item": "palette", + "subitem": "oxford" + }, "origamiKeys": [ "palette", "secondary" @@ -138,6 +166,10 @@ export default { "originalValue": "#262a33ff", "type": "color", "description": "Slate is a warmer version of black. It is used as inverse backgrounds for editorial content and as a theme option(Mono) for buttons.", + "attributes": { + "item": "palette", + "subitem": "slate" + }, "origamiKeys": [ "palette", "secondary" @@ -157,6 +189,10 @@ export default { "originalValue": "#fff1e5ff", "type": "color", "description": "Paper, as it’s name implies, is the FT’s main background colour. It is the main expression of the brand colour on product. It is a lighter, more legible shade of FT Pink and can be seen as a kind of replacement of white.", + "attributes": { + "item": "palette", + "subitem": "paper" + }, "origamiKeys": [ "palette", "secondary" @@ -176,6 +212,10 @@ export default { "originalValue": "#ff8833ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "mandarin" + }, "origamiKeys": [ "palette", "tertiary" @@ -195,6 +235,10 @@ export default { "originalValue": "#00a0ddff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "light-blue" + }, "origamiKeys": [ "palette", "tertiary" @@ -214,6 +258,10 @@ export default { "originalValue": "#cc0000ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "crimson" + }, "origamiKeys": [ "palette", "tertiary" @@ -233,6 +281,10 @@ export default { "originalValue": "#006f9bff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "graphics-dark-blue" + }, "origamiKeys": [ "palette", "tertiary" @@ -252,6 +304,10 @@ export default { "originalValue": "#f2dfceff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "wheat" + }, "origamiKeys": [ "palette", "tertiary" @@ -271,6 +327,10 @@ export default { "originalValue": "#ff7faaff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "candy" + }, "origamiKeys": [ "palette", "tertiary" @@ -290,6 +350,10 @@ export default { "originalValue": "#96cc28ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "wasabi" + }, "origamiKeys": [ "palette", "tertiary" @@ -309,6 +373,10 @@ export default { "originalValue": "#00994dff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "jade" + }, "origamiKeys": [ "palette", "tertiary" @@ -328,6 +396,10 @@ export default { "originalValue": "#593380ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "velvet" + }, "origamiKeys": [ "palette", "tertiary" @@ -347,6 +419,10 @@ export default { "originalValue": "#ffec1aff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "lemon" + }, "origamiKeys": [ "palette", "tertiary" @@ -366,6 +442,10 @@ export default { "originalValue": "#cce6ffff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "sky" + }, "origamiKeys": [ "palette", "tertiary" @@ -385,6 +465,10 @@ export default { "originalValue": "#355778ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "matisse-blue" + }, "origamiKeys": [ "palette", "tertiary" @@ -404,6 +488,10 @@ export default { "originalValue": "#f2e5daff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "black-5" + }, "path": [ "o3", "color", @@ -423,6 +511,10 @@ export default { "originalValue": "#e6d9ceff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "black-10" + }, "path": [ "o3", "color", @@ -442,6 +534,10 @@ export default { "originalValue": "#ccc1b7ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "black-20" + }, "path": [ "o3", "color", @@ -461,6 +557,10 @@ export default { "originalValue": "#b3a9a0ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "black-30" + }, "path": [ "o3", "color", @@ -480,6 +580,10 @@ export default { "originalValue": "#999189ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "black-40" + }, "path": [ "o3", "color", @@ -499,6 +603,10 @@ export default { "originalValue": "#807973ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "black-50" + }, "path": [ "o3", "color", @@ -518,6 +626,10 @@ export default { "originalValue": "#66605cff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "black-60" + }, "path": [ "o3", "color", @@ -537,6 +649,10 @@ export default { "originalValue": "#4d4845ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "black-70" + }, "path": [ "o3", "color", @@ -556,6 +672,10 @@ export default { "originalValue": "#33302eff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "black-80" + }, "path": [ "o3", "color", @@ -575,6 +695,10 @@ export default { "originalValue": "#1a1817ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "black-90" + }, "path": [ "o3", "color", @@ -594,6 +718,10 @@ export default { "originalValue": "#fff2e8ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "white-10" + }, "path": [ "o3", "color", @@ -613,6 +741,10 @@ export default { "originalValue": "#fff4eaff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "white-20" + }, "path": [ "o3", "color", @@ -632,6 +764,10 @@ export default { "originalValue": "#fff7efff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "white-40" + }, "path": [ "o3", "color", @@ -651,6 +787,10 @@ export default { "originalValue": "#fff9f5ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "white-60" + }, "path": [ "o3", "color", @@ -670,6 +810,10 @@ export default { "originalValue": "#fffcfaff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "white-80" + }, "path": [ "o3", "color", @@ -689,6 +833,10 @@ export default { "originalValue": "#082a4dff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "oxford-30" + }, "path": [ "o3", "color", @@ -708,6 +856,10 @@ export default { "originalValue": "#0a3866ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "oxford-40" + }, "path": [ "o3", "color", @@ -727,6 +879,10 @@ export default { "originalValue": "#0d4680ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "oxford-50" + }, "path": [ "o3", "color", @@ -746,6 +902,10 @@ export default { "originalValue": "#0f5499ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "oxford-60" + }, "path": [ "o3", "color", @@ -765,6 +925,10 @@ export default { "originalValue": "#1262b3ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "oxford-70" + }, "path": [ "o3", "color", @@ -784,6 +948,10 @@ export default { "originalValue": "#1470ccff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "oxford-80" + }, "path": [ "o3", "color", @@ -803,6 +971,10 @@ export default { "originalValue": "#177ee6ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "oxford-90" + }, "path": [ "o3", "color", @@ -822,6 +994,10 @@ export default { "originalValue": "#1a8cffff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "oxford-100" + }, "path": [ "o3", "color", @@ -841,6 +1017,10 @@ export default { "originalValue": "#052f33ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "teal-20" + }, "path": [ "o3", "color", @@ -860,6 +1040,10 @@ export default { "originalValue": "#08474dff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "teal-30" + }, "path": [ "o3", "color", @@ -879,6 +1063,10 @@ export default { "originalValue": "#0a5e66ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "teal-40" + }, "path": [ "o3", "color", @@ -898,6 +1086,10 @@ export default { "originalValue": "#0d7680ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "teal-50" + }, "path": [ "o3", "color", @@ -917,6 +1109,10 @@ export default { "originalValue": "#0f8e99ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "teal-60" + }, "path": [ "o3", "color", @@ -936,6 +1132,10 @@ export default { "originalValue": "#12a5b3ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "teal-70" + }, "path": [ "o3", "color", @@ -955,6 +1155,10 @@ export default { "originalValue": "#14bdccff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "teal-80" + }, "path": [ "o3", "color", @@ -974,6 +1178,10 @@ export default { "originalValue": "#17d4e6ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "teal-90" + }, "path": [ "o3", "color", @@ -993,6 +1201,10 @@ export default { "originalValue": "#1aecffff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "teal-100" + }, "path": [ "o3", "color", @@ -1012,6 +1224,10 @@ export default { "originalValue": "#4d081fff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "claret-30" + }, "path": [ "o3", "color", @@ -1031,6 +1247,10 @@ export default { "originalValue": "#660a29ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "claret-40" + }, "path": [ "o3", "color", @@ -1050,6 +1270,10 @@ export default { "originalValue": "#800d33ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "claret-50" + }, "path": [ "o3", "color", @@ -1069,6 +1293,10 @@ export default { "originalValue": "#990f3dff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "claret-60" + }, "path": [ "o3", "color", @@ -1088,6 +1316,10 @@ export default { "originalValue": "#b31247ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "claret-70" + }, "path": [ "o3", "color", @@ -1107,6 +1339,10 @@ export default { "originalValue": "#cc1452ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "claret-80" + }, "path": [ "o3", "color", @@ -1126,6 +1362,10 @@ export default { "originalValue": "#e6175cff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "claret-90" + }, "path": [ "o3", "color", @@ -1145,6 +1385,10 @@ export default { "originalValue": "#ff1a66ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "claret-100" + }, "path": [ "o3", "color", @@ -1163,6 +1407,10 @@ export default { "value": "#ffebd9", "originalValue": "#FFEBD9", "type": "color", + "attributes": { + "item": "palette", + "subitem": "wheat-100" + }, "path": [ "o3", "color", @@ -1181,6 +1429,10 @@ export default { "value": "#c0efd8", "originalValue": "#c0efd8", "type": "color", + "attributes": { + "item": "palette", + "subitem": "mint" + }, "origamiKeys": [ "palette", "primary" @@ -1199,6 +1451,10 @@ export default { "value": "#a4ccb8", "originalValue": "#A4CCB8", "type": "color", + "attributes": { + "item": "palette", + "subitem": "mint-80" + }, "path": [ "o3", "color", @@ -1217,6 +1473,10 @@ export default { "value": "#8fb3a1", "originalValue": "#8FB3A1", "type": "color", + "attributes": { + "item": "palette", + "subitem": "mint-70" + }, "path": [ "o3", "color", @@ -1235,6 +1495,10 @@ export default { "value": "#7b998a", "originalValue": "#7B998A", "type": "color", + "attributes": { + "item": "palette", + "subitem": "mint-60" + }, "path": [ "o3", "color", @@ -1253,6 +1517,10 @@ export default { "value": "#668073", "originalValue": "#668073", "type": "color", + "attributes": { + "item": "palette", + "subitem": "mint-50" + }, "path": [ "o3", "color", @@ -1271,6 +1539,10 @@ export default { "value": "#52665c", "originalValue": "#52665C", "type": "color", + "attributes": { + "item": "palette", + "subitem": "mint-40" + }, "path": [ "o3", "color", @@ -1289,6 +1561,10 @@ export default { "value": "#3d4d45", "originalValue": "#3D4D45", "type": "color", + "attributes": { + "item": "palette", + "subitem": "mint-30" + }, "path": [ "o3", "color", @@ -1308,6 +1584,11 @@ export default { "originalValue": "{o3.color.palette.slate}", "type": "color", "description": "", + "attributes": { + "item": "use-case", + "subitem": "link", + "state": "text" + }, "path": [ "o3", "color", @@ -1324,6 +1605,11 @@ export default { "value": "#262a33", "originalValue": "{o3.color.palette.slate}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link", + "state": "text" + }, "path": [ "o3", "color", @@ -1340,6 +1626,11 @@ export default { "value": "#262a33", "originalValue": "{o3.color.palette.slate}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link", + "state": "text" + }, "path": [ "o3", "color", @@ -1356,6 +1647,11 @@ export default { "value": "#a4ccb8", "originalValue": "{o3.color.palette.mint-80}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link", + "state": "underline" + }, "path": [ "o3", "color", @@ -1372,6 +1668,11 @@ export default { "value": "#a4ccb8", "originalValue": "{o3.color.palette.mint-80}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link", + "state": "underline" + }, "path": [ "o3", "color", @@ -1388,6 +1689,11 @@ export default { "value": "#000000", "originalValue": "{o3.color.palette.black}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link", + "state": "underline" + }, "path": [ "o3", "color", @@ -1404,6 +1710,11 @@ export default { "value": "#c0efd8", "originalValue": "{o3.color.palette.mint}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link-inverse", + "state": "text" + }, "path": [ "o3", "color", @@ -1420,6 +1731,11 @@ export default { "value": "#8fb3a1", "originalValue": "{o3.color.palette.mint-70}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link-inverse", + "state": "text" + }, "path": [ "o3", "color", @@ -1436,6 +1752,11 @@ export default { "value": "#8fb3a1", "originalValue": "#8fb3a1", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link-inverse", + "state": "text" + }, "path": [ "o3", "color", @@ -1452,6 +1773,11 @@ export default { "value": "#c0efd8", "originalValue": "{o3.color.palette.mint}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link-inverse", + "state": "underline" + }, "path": [ "o3", "color", @@ -1468,6 +1794,11 @@ export default { "value": "#8fb3a1", "originalValue": "{o3.color.palette.mint-70}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link-inverse", + "state": "underline" + }, "path": [ "o3", "color", @@ -1484,6 +1815,11 @@ export default { "value": "#000000", "originalValue": "{o3.color.palette.black}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link-inverse", + "state": "underline" + }, "path": [ "o3", "color", @@ -1500,6 +1836,11 @@ export default { "value": "#fff1e5", "originalValue": "{o3.color.palette.paper}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "page", + "state": "background" + }, "path": [ "o3", "color", @@ -1515,6 +1856,11 @@ export default { "value": "#262a33", "originalValue": "{o3.color.palette.slate}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "page-inverse", + "state": "background" + }, "path": [ "o3", "color", @@ -1530,6 +1876,11 @@ export default { "value": "#33302e", "originalValue": "{o3.color.palette.black-80}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "body", + "state": "text" + }, "path": [ "o3", "color", @@ -1545,6 +1896,11 @@ export default { "value": "#ffffff", "originalValue": "{o3.color.palette.white}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "body-inverse", + "state": "text" + }, "path": [ "o3", "color", @@ -1560,6 +1916,11 @@ export default { "value": "#33302e", "originalValue": "{o3.color.palette.black-80}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "heading", + "state": "text" + }, "path": [ "o3", "color", @@ -1575,6 +1936,11 @@ export default { "value": "#ffffff", "originalValue": "{o3.color.palette.white}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "heading-inverse", + "state": "text" + }, "path": [ "o3", "color", @@ -1591,6 +1957,11 @@ export default { "originalValue": "{o3.color.palette.black-50}", "type": "color", "description": "\"Muted\" text is less prominent, for example credits and captions.", + "attributes": { + "item": "use-case", + "subitem": "muted", + "state": "text" + }, "path": [ "o3", "color", @@ -1607,6 +1978,11 @@ export default { "originalValue": "#a8aaad", "type": "color", "description": "\"Muted\" text is less prominent, for example credits and captions.", + "attributes": { + "item": "use-case", + "subitem": "muted-inverse", + "state": "text" + }, "path": [ "o3", "color", @@ -1622,6 +1998,11 @@ export default { "value": "#33302e", "originalValue": "{o3.color.palette.black-80}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "footer", + "state": "text" + }, "path": [ "o3", "color", @@ -1637,6 +2018,11 @@ export default { "value": "#33302e", "originalValue": "{o3.color.palette.black-80}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "caption", + "state": "text" + }, "path": [ "o3", "color", @@ -1652,6 +2038,11 @@ export default { "value": "#ffffff", "originalValue": "{o3.color.palette.white}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "button", + "state": "foreground" + }, "path": [ "o3", "color", @@ -1667,6 +2058,11 @@ export default { "value": "#fff7ef", "originalValue": "#FFF7EF", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "button", + "state": "foreground-disabled" + }, "path": [ "o3", "color", @@ -1682,6 +2078,11 @@ export default { "value": "#262a33", "originalValue": "{o3.color.palette.slate}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "button", + "state": "default" + }, "path": [ "o3", "color", @@ -1697,6 +2098,11 @@ export default { "value": "#515257", "originalValue": "#515257", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "button", + "state": "hover" + }, "path": [ "o3", "color", @@ -1712,6 +2118,11 @@ export default { "value": "#7d7a7a", "originalValue": "#7D7A7A", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "button", + "state": "pressed" + }, "path": [ "o3", "color", @@ -1727,6 +2138,11 @@ export default { "value": "#d4c9c1", "originalValue": "#D4C9C1", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "button", + "state": "disabled" + }, "path": [ "o3", "color", @@ -1742,6 +2158,10 @@ export default { "value": "#cc0000", "originalValue": "rgba(204,0,0,0.06)", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "error-background" + }, "path": [ "o3", "color", @@ -1756,6 +2176,10 @@ export default { "value": "#cc0000", "originalValue": "{o3.color.palette.crimson}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "error-text" + }, "path": [ "o3", "color", @@ -1770,6 +2194,10 @@ export default { "value": "#cc0000", "originalValue": "{o3.color.palette.crimson}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "error" + }, "path": [ "o3", "color", @@ -1784,6 +2212,9 @@ export default { "value": "4px", "originalValue": "4px", "type": "dimension", + "attributes": { + "item": "5xs" + }, "path": [ "o3", "spacing", @@ -1797,6 +2228,9 @@ export default { "value": "8px", "originalValue": "8px", "type": "dimension", + "attributes": { + "item": "4xs" + }, "path": [ "o3", "spacing", @@ -1810,6 +2244,9 @@ export default { "value": "12px", "originalValue": "12px", "type": "dimension", + "attributes": { + "item": "3xs" + }, "path": [ "o3", "spacing", @@ -1823,6 +2260,9 @@ export default { "value": "16px", "originalValue": "16px", "type": "dimension", + "attributes": { + "item": "2xs" + }, "path": [ "o3", "spacing", @@ -1836,6 +2276,9 @@ export default { "value": "20px", "originalValue": "20px", "type": "dimension", + "attributes": { + "item": "xs" + }, "path": [ "o3", "spacing", @@ -1849,6 +2292,9 @@ export default { "value": "24px", "originalValue": "24px", "type": "dimension", + "attributes": { + "item": "s" + }, "path": [ "o3", "spacing", @@ -1862,6 +2308,9 @@ export default { "value": "32px", "originalValue": "32px", "type": "dimension", + "attributes": { + "item": "m" + }, "path": [ "o3", "spacing", @@ -1875,6 +2324,9 @@ export default { "value": "40px", "originalValue": "40px", "type": "dimension", + "attributes": { + "item": "l" + }, "path": [ "o3", "spacing", @@ -1888,6 +2340,9 @@ export default { "value": "48px", "originalValue": "48px", "type": "dimension", + "attributes": { + "item": "xl" + }, "path": [ "o3", "spacing", @@ -1901,6 +2356,9 @@ export default { "value": "64px", "originalValue": "64px", "type": "dimension", + "attributes": { + "item": "2xl" + }, "path": [ "o3", "spacing", @@ -1914,6 +2372,9 @@ export default { "value": "80px", "originalValue": "80px", "type": "dimension", + "attributes": { + "item": "3xl" + }, "path": [ "o3", "spacing", @@ -1927,6 +2388,9 @@ export default { "value": "96px", "originalValue": "96px", "type": "dimension", + "attributes": { + "item": "4xl" + }, "path": [ "o3", "spacing", @@ -1941,6 +2405,11 @@ export default { "originalValue": "{o3.font.family.financier-display}", "type": "fontFamily", "description": "Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-lg", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -1957,6 +2426,11 @@ export default { "originalValue": "{o3.font.weight.bold}", "type": "fontWeight", "description": "Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-lg", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -1973,6 +2447,11 @@ export default { "originalValue": "{o3.font.size.7}", "type": "dimension", "description": "Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-lg", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -1989,6 +2468,11 @@ export default { "originalValue": "{o3.font.lineheight.7}", "type": "number", "description": "Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-lg", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2005,6 +2489,11 @@ export default { "originalValue": "{o3.font.family.financier-display}", "type": "fontFamily", "description": "Use this style for medium screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-md", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2021,6 +2510,11 @@ export default { "originalValue": "{o3.font.weight.bold}", "type": "fontWeight", "description": "Use this style for medium screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-md", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2037,6 +2531,11 @@ export default { "originalValue": "{o3.font.size.6}", "type": "dimension", "description": "Use this style for medium screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-md", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2053,6 +2552,11 @@ export default { "originalValue": "{o3.font.lineheight.6}", "type": "number", "description": "Use this style for medium screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-md", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2069,6 +2573,11 @@ export default { "originalValue": "{o3.font.family.financier-display}", "type": "fontFamily", "description": "Use this style for small screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-sm", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2085,6 +2594,11 @@ export default { "originalValue": "{o3.font.weight.bold}", "type": "fontWeight", "description": "Use this style for small screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-sm", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2101,6 +2615,11 @@ export default { "originalValue": "{o3.font.size.5}", "type": "dimension", "description": "Use this style for small screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-sm", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2117,6 +2636,11 @@ export default { "originalValue": "{o3.font.lineheight.5}", "type": "number", "description": "Use this style for small screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-sm", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2133,6 +2657,11 @@ export default { "originalValue": "{o3.font.family.financier-display}", "type": "fontFamily", "description": "Use this style for large screens headlines in standard-sized teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-lg", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2149,6 +2678,11 @@ export default { "originalValue": "{o3.font.weight.light}", "type": "fontWeight", "description": "Use this style for large screens headlines in standard-sized teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-lg", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2165,6 +2699,11 @@ export default { "originalValue": "{o3.font.size.6}", "type": "dimension", "description": "Use this style for large screens headlines in standard-sized teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-lg", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2181,6 +2720,11 @@ export default { "originalValue": "{o3.font.lineheight.6}", "type": "number", "description": "Use this style for large screens headlines in standard-sized teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-lg", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2197,6 +2741,11 @@ export default { "originalValue": "{o3.font.family.financier-display}", "type": "fontFamily", "description": "Use this style for medium screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-md", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2213,6 +2762,11 @@ export default { "originalValue": "{o3.font.weight.light}", "type": "fontWeight", "description": "Use this style for medium screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-md", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2229,6 +2783,11 @@ export default { "originalValue": "{o3.font.size.5}", "type": "dimension", "description": "Use this style for medium screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-md", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2245,6 +2804,11 @@ export default { "originalValue": "{o3.font.lineheight.5}", "type": "number", "description": "Use this style for medium screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-md", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2261,6 +2825,11 @@ export default { "originalValue": "{o3.font.family.financier-display}", "type": "fontFamily", "description": "Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-sm", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2277,6 +2846,11 @@ export default { "originalValue": "{o3.font.weight.light}", "type": "fontWeight", "description": "Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-sm", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2293,6 +2867,11 @@ export default { "originalValue": "{o3.font.size.4}", "type": "dimension", "description": "Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-sm", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2309,6 +2888,11 @@ export default { "originalValue": "{o3.font.lineheight.4}", "type": "number", "description": "Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-sm", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2325,6 +2909,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-lg", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2341,6 +2930,11 @@ export default { "originalValue": "{o3.font.weight.semibold}", "type": "fontWeight", "description": "Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-lg", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2357,6 +2951,11 @@ export default { "originalValue": "{o3.font.size-metric2.4}", "type": "dimension", "description": "Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-lg", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2373,6 +2972,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.3}", "type": "number", "description": "Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-lg", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2389,6 +2993,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use this style as H3 or subtitles within the content body to break paragraphs, or for titles of components like forms, tables and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-md", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2405,6 +3014,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use this style as H3 or subtitles within the content body to break paragraphs, or for titles of components like forms, tables and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-md", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2421,6 +3035,11 @@ export default { "originalValue": "{o3.font.size-metric2.3}", "type": "dimension", "description": "Use this style as H3 or subtitles within the content body to break paragraphs, or for titles of components like forms, tables and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-md", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2437,6 +3056,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.3}", "type": "number", "description": "Use this style as H3 or subtitles within the content body to break paragraphs, or for titles of components like forms, tables and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-md", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2453,6 +3077,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use H6 for subtitles within the content body to break up paragraphs, and H2 for subheadings on stream pages or as subtitles for components such as forms, tables, and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-sm", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2469,6 +3098,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use H6 for subtitles within the content body to break up paragraphs, and H2 for subheadings on stream pages or as subtitles for components such as forms, tables, and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-sm", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2485,6 +3119,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.2}", "type": "number", "description": "Use H6 for subtitles within the content body to break up paragraphs, and H2 for subheadings on stream pages or as subtitles for components such as forms, tables, and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-sm", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2501,6 +3140,11 @@ export default { "originalValue": "{o3.font.size-metric2.2}", "type": "dimension", "description": "Use H6 for subtitles within the content body to break up paragraphs, and H2 for subheadings on stream pages or as subtitles for components such as forms, tables, and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-sm", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2517,6 +3161,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use primarily for the stand-first (introductory summary or highlight) in topper component, as larger body text in components, or section description.", + "attributes": { + "item": "use-case", + "subitem": "body-lg", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2533,6 +3182,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use primarily for the stand-first (introductory summary or highlight) in topper component, as larger body text in components, or section description.", + "attributes": { + "item": "use-case", + "subitem": "body-lg", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2549,6 +3203,11 @@ export default { "originalValue": "{o3.font.size-metric2.1}", "type": "dimension", "description": "Use primarily for the stand-first (introductory summary or highlight) in topper component, as larger body text in components, or section description.", + "attributes": { + "item": "use-case", + "subitem": "body-lg", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2565,6 +3224,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.1}", "type": "number", "description": "Use primarily for the stand-first (introductory summary or highlight) in topper component, as larger body text in components, or section description.", + "attributes": { + "item": "use-case", + "subitem": "body-lg", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2581,6 +3245,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use this style for the stand-first in teasers and as the default body copy style across components such as location in the byline.", + "attributes": { + "item": "use-case", + "subitem": "body-base", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2597,6 +3266,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use this style for the stand-first in teasers and as the default body copy style across components such as location in the byline.", + "attributes": { + "item": "use-case", + "subitem": "body-base", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2613,6 +3287,11 @@ export default { "originalValue": "{o3.font.size-metric2.0}", "type": "dimension", "description": "Use this style for the stand-first in teasers and as the default body copy style across components such as location in the byline.", + "attributes": { + "item": "use-case", + "subitem": "body-base", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2629,6 +3308,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.0}", "type": "number", "description": "Use this style for the stand-first in teasers and as the default body copy style across components such as location in the byline.", + "attributes": { + "item": "use-case", + "subitem": "body-base", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2645,6 +3329,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use this style for bold formatting in body copy or for small interactive elements, such as Topic tags and Author names.", + "attributes": { + "item": "use-case", + "subitem": "body-highlight", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2661,6 +3350,11 @@ export default { "originalValue": "{o3.font.weight.semibold}", "type": "fontWeight", "description": "Use this style for bold formatting in body copy or for small interactive elements, such as Topic tags and Author names.", + "attributes": { + "item": "use-case", + "subitem": "body-highlight", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2677,6 +3371,11 @@ export default { "originalValue": "{o3.font.size-metric2.0}", "type": "dimension", "description": "Use this style for bold formatting in body copy or for small interactive elements, such as Topic tags and Author names.", + "attributes": { + "item": "use-case", + "subitem": "body-highlight", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2693,6 +3392,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.0}", "type": "number", "description": "Use this style for bold formatting in body copy or for small interactive elements, such as Topic tags and Author names.", + "attributes": { + "item": "use-case", + "subitem": "body-highlight", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2709,6 +3413,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use this style primarily for links in paragraph or as stand alone link.", + "attributes": { + "item": "use-case", + "subitem": "body-link", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2725,6 +3434,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use this style primarily for links in paragraph or as stand alone link.", + "attributes": { + "item": "use-case", + "subitem": "body-link", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2741,6 +3455,11 @@ export default { "originalValue": "{o3.font.size-metric2.0}", "type": "dimension", "description": "Use this style primarily for links in paragraph or as stand alone link.", + "attributes": { + "item": "use-case", + "subitem": "body-link", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2757,6 +3476,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.0}", "type": "number", "description": "Use this style primarily for links in paragraph or as stand alone link.", + "attributes": { + "item": "use-case", + "subitem": "body-link", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2773,6 +3497,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use this style for caption in visual assets such as image and video and for small text elements, such as secondary metadata, caveats, or footnotes.", + "attributes": { + "item": "use-case", + "subitem": "detail", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2789,6 +3518,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use this style for caption in visual assets such as image and video and for small text elements, such as secondary metadata, caveats, or footnotes.", + "attributes": { + "item": "use-case", + "subitem": "detail", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2805,6 +3539,11 @@ export default { "originalValue": "{o3.font.size-metric2.negative-1}", "type": "dimension", "description": "Use this style for caption in visual assets such as image and video and for small text elements, such as secondary metadata, caveats, or footnotes.", + "attributes": { + "item": "use-case", + "subitem": "detail", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2821,6 +3560,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.negative-1}", "type": "number", "description": "Use this style for caption in visual assets such as image and video and for small text elements, such as secondary metadata, caveats, or footnotes.", + "attributes": { + "item": "use-case", + "subitem": "detail", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2837,6 +3581,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use this style for labels such as badges and metadata in teasers and toppers (e.g., \"Live,\" \"Premium,\" or the main timestamp). Avoid using full sentences.", + "attributes": { + "item": "use-case", + "subitem": "label", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2853,6 +3602,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use this style for labels such as badges and metadata in teasers and toppers (e.g., \"Live,\" \"Premium,\" or the main timestamp). Avoid using full sentences.", + "attributes": { + "item": "use-case", + "subitem": "label", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2869,6 +3623,11 @@ export default { "originalValue": "{o3.font.size-metric2.negative-1}", "type": "dimension", "description": "Use this style for labels such as badges and metadata in teasers and toppers (e.g., \"Live,\" \"Premium,\" or the main timestamp). Avoid using full sentences.", + "attributes": { + "item": "use-case", + "subitem": "label", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2885,6 +3644,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.negative-1}", "type": "number", "description": "Use this style for labels such as badges and metadata in teasers and toppers (e.g., \"Live,\" \"Premium,\" or the main timestamp). Avoid using full sentences.", + "attributes": { + "item": "use-case", + "subitem": "label", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2901,6 +3665,11 @@ export default { "originalValue": "uppercase", "type": "textCase", "description": "Use this style for labels such as badges and metadata in teasers and toppers (e.g., \"Live,\" \"Premium,\" or the main timestamp). Avoid using full sentences.", + "attributes": { + "item": "use-case", + "subitem": "label", + "state": "textCase" + }, "path": [ "o3", "typography", @@ -2917,6 +3686,11 @@ export default { "originalValue": "Georgia", "type": "fontFamily", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-base", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2933,6 +3707,11 @@ export default { "originalValue": "Regular", "type": "fontWeight", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-base", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2949,6 +3728,11 @@ export default { "originalValue": "{o3.font.size.2}", "type": "dimension", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-base", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2965,6 +3749,11 @@ export default { "originalValue": "{o3.font.lineheight.4}", "type": "number", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-base", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2981,6 +3770,11 @@ export default { "originalValue": "Georgia", "type": "fontFamily", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-highlight", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2997,6 +3791,11 @@ export default { "originalValue": "Bold", "type": "fontWeight", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-highlight", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -3013,6 +3812,11 @@ export default { "originalValue": "{o3.font.size.2}", "type": "dimension", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-highlight", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -3029,6 +3833,11 @@ export default { "originalValue": "{o3.font.lineheight.4}", "type": "number", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-highlight", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -3045,6 +3854,11 @@ export default { "originalValue": "Georgia", "type": "fontFamily", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-emphasis", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -3061,6 +3875,11 @@ export default { "originalValue": "Regular", "type": "fontWeight", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-emphasis", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -3077,6 +3896,11 @@ export default { "originalValue": "{o3.font.size.2}", "type": "dimension", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-emphasis", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -3093,6 +3917,11 @@ export default { "originalValue": "{o3.font.lineheight.4}", "type": "number", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-emphasis", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -3109,6 +3938,11 @@ export default { "originalValue": "italic", "type": "fontStyle", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-emphasis", + "state": "fontStyle" + }, "path": [ "o3", "typography", @@ -3125,6 +3959,11 @@ export default { "originalValue": "Georgia", "type": "fontFamily", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-link", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -3141,6 +3980,11 @@ export default { "originalValue": "Regular", "type": "fontWeight", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-link", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -3157,6 +4001,11 @@ export default { "originalValue": "{o3.font.size.2}", "type": "dimension", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-link", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -3173,6 +4022,11 @@ export default { "originalValue": "{o3.font.lineheight.4}", "type": "number", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-link", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -3188,6 +4042,9 @@ export default { "value": "4px", "originalValue": "4", "type": "dimension", + "attributes": { + "item": "1" + }, "path": [ "o3", "border-radius", @@ -3201,6 +4058,9 @@ export default { "value": "6px", "originalValue": "6", "type": "dimension", + "attributes": { + "item": "2" + }, "path": [ "o3", "border-radius", @@ -3214,6 +4074,10 @@ export default { "value": "metric 2 VF", "originalValue": "metric 2 VF", "type": "fontFamily", + "attributes": { + "item": "family", + "subitem": "metric" + }, "path": [ "o3", "font", @@ -3228,6 +4092,10 @@ export default { "value": "financier display VF", "originalValue": "financier display VF", "type": "fontFamily", + "attributes": { + "item": "family", + "subitem": "financier-display" + }, "path": [ "o3", "font", @@ -3242,6 +4110,10 @@ export default { "value": "georgia", "originalValue": "georgia", "type": "fontFamily", + "attributes": { + "item": "family", + "subitem": "georgia" + }, "path": [ "o3", "font", @@ -3256,6 +4128,10 @@ export default { "value": "300", "originalValue": "300", "type": "fontWeight", + "attributes": { + "item": "weight", + "subitem": "light" + }, "path": [ "o3", "font", @@ -3270,6 +4146,10 @@ export default { "value": "400", "originalValue": "400", "type": "fontWeight", + "attributes": { + "item": "weight", + "subitem": "regular" + }, "path": [ "o3", "font", @@ -3284,6 +4164,10 @@ export default { "value": "500", "originalValue": "500", "type": "fontWeight", + "attributes": { + "item": "weight", + "subitem": "medium" + }, "path": [ "o3", "font", @@ -3298,6 +4182,10 @@ export default { "value": "700", "originalValue": "700", "type": "fontWeight", + "attributes": { + "item": "weight", + "subitem": "semibold" + }, "path": [ "o3", "font", @@ -3312,6 +4200,10 @@ export default { "value": "800", "originalValue": "800", "type": "fontWeight", + "attributes": { + "item": "weight", + "subitem": "bold" + }, "path": [ "o3", "font", @@ -3326,6 +4218,10 @@ export default { "value": "20px", "originalValue": "20", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "0" + }, "path": [ "o3", "font", @@ -3340,6 +4236,10 @@ export default { "value": "20px", "originalValue": "20", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "1" + }, "path": [ "o3", "font", @@ -3354,6 +4254,10 @@ export default { "value": "24px", "originalValue": "24", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "2" + }, "path": [ "o3", "font", @@ -3368,6 +4272,10 @@ export default { "value": "28px", "originalValue": "28", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "3" + }, "path": [ "o3", "font", @@ -3382,6 +4290,10 @@ export default { "value": "32px", "originalValue": "32", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "4" + }, "path": [ "o3", "font", @@ -3396,6 +4308,10 @@ export default { "value": "32px", "originalValue": "32", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "5" + }, "path": [ "o3", "font", @@ -3410,6 +4326,10 @@ export default { "value": "40px", "originalValue": "40", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "6" + }, "path": [ "o3", "font", @@ -3424,6 +4344,10 @@ export default { "value": "48px", "originalValue": "48", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "7" + }, "path": [ "o3", "font", @@ -3438,6 +4362,10 @@ export default { "value": "56px", "originalValue": "56", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "8" + }, "path": [ "o3", "font", @@ -3452,6 +4380,10 @@ export default { "value": "72px", "originalValue": "72", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "9" + }, "path": [ "o3", "font", @@ -3466,6 +4398,10 @@ export default { "value": "84px", "originalValue": "84", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "10" + }, "path": [ "o3", "font", @@ -3480,6 +4416,10 @@ export default { "value": "16px", "originalValue": "16", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "negative-2" + }, "path": [ "o3", "font", @@ -3494,6 +4434,10 @@ export default { "value": "16px", "originalValue": "16", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "negative-1" + }, "path": [ "o3", "font", @@ -3508,6 +4452,10 @@ export default { "value": "16px", "originalValue": "16", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "0" + }, "path": [ "o3", "font", @@ -3522,6 +4470,10 @@ export default { "value": "18px", "originalValue": "18", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "1" + }, "path": [ "o3", "font", @@ -3536,6 +4488,10 @@ export default { "value": "20px", "originalValue": "20", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "2" + }, "path": [ "o3", "font", @@ -3550,6 +4506,10 @@ export default { "value": "24px", "originalValue": "24", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "3" + }, "path": [ "o3", "font", @@ -3564,6 +4524,10 @@ export default { "value": "28px", "originalValue": "28", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "4" + }, "path": [ "o3", "font", @@ -3578,6 +4542,10 @@ export default { "value": "32px", "originalValue": "32", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "5" + }, "path": [ "o3", "font", @@ -3592,6 +4560,10 @@ export default { "value": "40px", "originalValue": "40", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "6" + }, "path": [ "o3", "font", @@ -3606,6 +4578,10 @@ export default { "value": "48px", "originalValue": "48", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "7" + }, "path": [ "o3", "font", @@ -3620,6 +4596,10 @@ export default { "value": "56px", "originalValue": "56", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "8" + }, "path": [ "o3", "font", @@ -3634,6 +4614,10 @@ export default { "value": "72px", "originalValue": "72", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "9" + }, "path": [ "o3", "font", @@ -3648,6 +4632,10 @@ export default { "value": "84px", "originalValue": "84", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "10" + }, "path": [ "o3", "font", @@ -3662,6 +4650,10 @@ export default { "value": "12px", "originalValue": "12", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "negative-2" + }, "path": [ "o3", "font", @@ -3676,6 +4668,10 @@ export default { "value": "14px", "originalValue": "14", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "negative-1" + }, "path": [ "o3", "font", @@ -3690,6 +4686,10 @@ export default { "value": "24px", "originalValue": "24", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "0" + }, "path": [ "o3", "font", @@ -3704,6 +4704,10 @@ export default { "value": "24px", "originalValue": "24", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "1" + }, "path": [ "o3", "font", @@ -3718,6 +4722,10 @@ export default { "value": "28px", "originalValue": "28", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "2" + }, "path": [ "o3", "font", @@ -3732,6 +4740,10 @@ export default { "value": "32px", "originalValue": "32", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "3" + }, "path": [ "o3", "font", @@ -3746,6 +4758,10 @@ export default { "value": "32px", "originalValue": "32", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "4" + }, "path": [ "o3", "font", @@ -3760,6 +4776,10 @@ export default { "value": "40px", "originalValue": "40", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "5" + }, "path": [ "o3", "font", @@ -3774,6 +4794,10 @@ export default { "value": "48px", "originalValue": "48", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "6" + }, "path": [ "o3", "font", @@ -3788,6 +4812,10 @@ export default { "value": "56px", "originalValue": "56", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "7" + }, "path": [ "o3", "font", @@ -3802,6 +4830,10 @@ export default { "value": "72px", "originalValue": "72", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "8" + }, "path": [ "o3", "font", @@ -3816,6 +4848,10 @@ export default { "value": "84px", "originalValue": "84", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "9" + }, "path": [ "o3", "font", @@ -3830,6 +4866,10 @@ export default { "value": "16px", "originalValue": "16", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "negative-3" + }, "path": [ "o3", "font", @@ -3844,6 +4884,10 @@ export default { "value": "16px", "originalValue": "16", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "negative-2" + }, "path": [ "o3", "font", @@ -3858,6 +4902,10 @@ export default { "value": "20px", "originalValue": "20", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "negative-1" + }, "path": [ "o3", "font", @@ -3872,6 +4920,10 @@ export default { "value": "16px", "originalValue": "16", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "0" + }, "path": [ "o3", "font", @@ -3886,6 +4938,10 @@ export default { "value": "18px", "originalValue": "18", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "1" + }, "path": [ "o3", "font", @@ -3900,6 +4956,10 @@ export default { "value": "20px", "originalValue": "20", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "2" + }, "path": [ "o3", "font", @@ -3914,6 +4974,10 @@ export default { "value": "24px", "originalValue": "24", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "3" + }, "path": [ "o3", "font", @@ -3928,6 +4992,10 @@ export default { "value": "28px", "originalValue": "28", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "4" + }, "path": [ "o3", "font", @@ -3942,6 +5010,10 @@ export default { "value": "32px", "originalValue": "32", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "5" + }, "path": [ "o3", "font", @@ -3956,6 +5028,10 @@ export default { "value": "40px", "originalValue": "40", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "6" + }, "path": [ "o3", "font", @@ -3970,6 +5046,10 @@ export default { "value": "48px", "originalValue": "48", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "7" + }, "path": [ "o3", "font", @@ -3984,6 +5064,10 @@ export default { "value": "64px", "originalValue": "64", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "8" + }, "path": [ "o3", "font", @@ -3998,6 +5082,10 @@ export default { "value": "72px", "originalValue": "72", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "9" + }, "path": [ "o3", "font", @@ -4012,6 +5100,10 @@ export default { "value": "10px", "originalValue": "10", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "negative-3" + }, "path": [ "o3", "font", @@ -4026,6 +5118,10 @@ export default { "value": "12px", "originalValue": "12", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "negative-2" + }, "path": [ "o3", "font", @@ -4040,6 +5136,10 @@ export default { "value": "14px", "originalValue": "14", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "negative-1" + }, "path": [ "o3", "font", @@ -4068,6 +5168,11 @@ export default { "offsetY": "0" }, "type": "shadow", + "attributes": { + "item": "use-case", + "subitem": "ring", + "state": "inner" + }, "path": [ "o3", "focus", @@ -4097,6 +5202,11 @@ export default { "offsetY": "0" }, "type": "shadow", + "attributes": { + "item": "use-case", + "subitem": "ring", + "state": "outer" + }, "path": [ "o3", "focus", @@ -4126,6 +5236,11 @@ export default { "offsetY": "0" }, "type": "shadow", + "attributes": { + "item": "use-case", + "subitem": "ring", + "state": "inverse" + }, "path": [ "o3", "focus", @@ -4156,6 +5271,11 @@ export default { "offsetY": "0" }, "type": "shadow", + "attributes": { + "item": "use-case", + "subitem": "ring", + "state": "inverse" + }, "path": [ "o3", "focus", @@ -4186,6 +5306,11 @@ export default { "offsetY": "0" }, "type": "shadow", + "attributes": { + "item": "use-case", + "subitem": "outline", + "state": "color" + }, "path": [ "o3", "focus", @@ -4215,6 +5340,11 @@ export default { "offsetY": "0" }, "type": "shadow", + "attributes": { + "item": "use-case", + "subitem": "outline", + "state": "inverse" + }, "path": [ "o3", "focus", diff --git a/libraries/o3-tooling-token/build/icons/_variables.js b/libraries/o3-tooling-token/build/icons/_variables.js index 81d67454dc..baec30f4e5 100644 --- a/libraries/o3-tooling-token/build/icons/_variables.js +++ b/libraries/o3-tooling-token/build/icons/_variables.js @@ -4,6 +4,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "at" + }, "path": [ "o3", "icon", @@ -17,6 +20,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "book" + }, "path": [ "o3", "icon", @@ -30,6 +36,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "bookmark-filled" + }, "path": [ "o3", "icon", @@ -43,6 +52,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "bookmark" + }, "path": [ "o3", "icon", @@ -56,6 +68,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "calendar" + }, "path": [ "o3", "icon", @@ -69,6 +84,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "chat" + }, "path": [ "o3", "icon", @@ -82,6 +100,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "chevron-left" + }, "path": [ "o3", "icon", @@ -95,6 +116,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "chevron-left-right" + }, "path": [ "o3", "icon", @@ -108,6 +132,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "chevron-right" + }, "path": [ "o3", "icon", @@ -121,6 +148,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "chevron-down" + }, "path": [ "o3", "icon", @@ -134,6 +164,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "chevron-up" + }, "path": [ "o3", "icon", @@ -147,6 +180,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "chevron-up-down" + }, "path": [ "o3", "icon", @@ -160,6 +196,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "circle" + }, "path": [ "o3", "icon", @@ -173,6 +212,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "closed-captions-off" + }, "path": [ "o3", "icon", @@ -186,6 +228,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "closed-captions-on" + }, "path": [ "o3", "icon", @@ -199,6 +244,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "corporate" + }, "path": [ "o3", "icon", @@ -212,6 +260,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "cross" + }, "path": [ "o3", "icon", @@ -225,6 +276,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "data" + }, "path": [ "o3", "icon", @@ -238,6 +292,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "dollar" + }, "path": [ "o3", "icon", @@ -251,6 +308,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "download" + }, "path": [ "o3", "icon", @@ -264,6 +324,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "edit" + }, "path": [ "o3", "icon", @@ -277,6 +340,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "exit" + }, "path": [ "o3", "icon", @@ -290,6 +356,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "eye-closed" + }, "path": [ "o3", "icon", @@ -303,6 +372,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "eye-open" + }, "path": [ "o3", "icon", @@ -316,6 +388,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "first" + }, "path": [ "o3", "icon", @@ -329,6 +404,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "gift" + }, "path": [ "o3", "icon", @@ -342,6 +420,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "grid" + }, "path": [ "o3", "icon", @@ -355,6 +436,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "hamburger" + }, "path": [ "o3", "icon", @@ -368,6 +452,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "home" + }, "path": [ "o3", "icon", @@ -381,6 +468,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "info" + }, "path": [ "o3", "icon", @@ -394,6 +484,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "insights" + }, "path": [ "o3", "icon", @@ -407,6 +500,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "ipad" + }, "path": [ "o3", "icon", @@ -420,6 +516,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "label" + }, "path": [ "o3", "icon", @@ -433,6 +532,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "label-filled" + }, "path": [ "o3", "icon", @@ -446,6 +548,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "print-filled" + }, "path": [ "o3", "icon", @@ -459,6 +564,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "last" + }, "path": [ "o3", "icon", @@ -472,6 +580,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "link" + }, "path": [ "o3", "icon", @@ -485,6 +596,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "list" + }, "path": [ "o3", "icon", @@ -498,6 +612,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "lock" + }, "path": [ "o3", "icon", @@ -511,6 +628,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "mail" + }, "path": [ "o3", "icon", @@ -524,6 +644,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "media-description" + }, "path": [ "o3", "icon", @@ -537,6 +660,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "minus" + }, "path": [ "o3", "icon", @@ -550,6 +676,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "more" + }, "path": [ "o3", "icon", @@ -563,6 +692,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "notification-mute" + }, "path": [ "o3", "icon", @@ -576,6 +708,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "newspaper" + }, "path": [ "o3", "icon", @@ -589,6 +724,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "notification" + }, "path": [ "o3", "icon", @@ -602,6 +740,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "outside-page" + }, "path": [ "o3", "icon", @@ -615,6 +756,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "pause" + }, "path": [ "o3", "icon", @@ -628,6 +772,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "phone" + }, "path": [ "o3", "icon", @@ -641,6 +788,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "pin" + }, "path": [ "o3", "icon", @@ -654,6 +804,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "play" + }, "path": [ "o3", "icon", @@ -667,6 +820,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "plus" + }, "path": [ "o3", "icon", @@ -680,6 +836,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "podcast" + }, "path": [ "o3", "icon", @@ -693,6 +852,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "preferences" + }, "path": [ "o3", "icon", @@ -706,6 +868,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "print" + }, "path": [ "o3", "icon", @@ -719,6 +884,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "quote-left" + }, "path": [ "o3", "icon", @@ -732,6 +900,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "quote-right" + }, "path": [ "o3", "icon", @@ -745,6 +916,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "quote" + }, "path": [ "o3", "icon", @@ -758,6 +932,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "redo" + }, "path": [ "o3", "icon", @@ -771,6 +948,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "refresh" + }, "path": [ "o3", "icon", @@ -784,6 +964,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "restore" + }, "path": [ "o3", "icon", @@ -797,6 +980,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "scroll-to" + }, "path": [ "o3", "icon", @@ -810,6 +996,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "search" + }, "path": [ "o3", "icon", @@ -823,6 +1012,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "series" + }, "path": [ "o3", "icon", @@ -836,6 +1028,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "settings" + }, "path": [ "o3", "icon", @@ -849,6 +1044,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "share" + }, "path": [ "o3", "icon", @@ -862,6 +1060,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "skip-backward-30" + }, "path": [ "o3", "icon", @@ -875,6 +1076,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "skip-forward-30" + }, "path": [ "o3", "icon", @@ -888,6 +1092,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "sparkles" + }, "path": [ "o3", "icon", @@ -901,6 +1108,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "stop" + }, "path": [ "o3", "icon", @@ -914,6 +1124,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "tick" + }, "path": [ "o3", "icon", @@ -927,6 +1140,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "trash" + }, "path": [ "o3", "icon", @@ -940,6 +1156,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "upload" + }, "path": [ "o3", "icon", @@ -953,6 +1172,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "user" + }, "path": [ "o3", "icon", @@ -966,6 +1188,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "users" + }, "path": [ "o3", "icon", @@ -979,6 +1204,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "video" + }, "path": [ "o3", "icon", @@ -992,6 +1220,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "volume" + }, "path": [ "o3", "icon", @@ -1005,6 +1236,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "volume-mute" + }, "path": [ "o3", "icon", @@ -1018,6 +1252,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "warning-alt" + }, "path": [ "o3", "icon", @@ -1031,6 +1268,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "warning" + }, "path": [ "o3", "icon", @@ -1044,6 +1284,9 @@ export default { "value": "", "originalValue": "", "type": "asset", + "attributes": { + "item": "written-text" + }, "path": [ "o3", "icon", @@ -1057,6 +1300,9 @@ export default { "value": "\n \n", "originalValue": "\n \n", "type": "asset", + "attributes": { + "item": "facebook" + }, "path": [ "o3", "icon", @@ -1070,6 +1316,9 @@ export default { "value": "\n \n", "originalValue": "\n \n", "type": "asset", + "attributes": { + "item": "linkedin" + }, "path": [ "o3", "icon", @@ -1083,6 +1332,9 @@ export default { "value": "\n \n", "originalValue": "\n \n", "type": "asset", + "attributes": { + "item": "x" + }, "path": [ "o3", "icon", diff --git a/libraries/o3-tooling-token/build/internal/_variables.js b/libraries/o3-tooling-token/build/internal/_variables.js index a53ddcd46e..ec54451fea 100644 --- a/libraries/o3-tooling-token/build/internal/_variables.js +++ b/libraries/o3-tooling-token/build/internal/_variables.js @@ -4,6 +4,10 @@ export default { "value": "#000000", "originalValue": "#000", "type": "color", + "attributes": { + "item": "palette", + "subitem": "black" + }, "origamiKeys": [ "palette", "primary" @@ -22,6 +26,10 @@ export default { "value": "#ffffff", "originalValue": "#fff", "type": "color", + "attributes": { + "item": "palette", + "subitem": "white" + }, "origamiKeys": [ "palette", "primary" @@ -40,6 +48,10 @@ export default { "value": "#0f5499", "originalValue": "#0F5499", "type": "color", + "attributes": { + "item": "palette", + "subitem": "oxford" + }, "origamiKeys": [ "palette", "primary" @@ -58,6 +70,10 @@ export default { "value": "#0d7680", "originalValue": "#0D7680", "type": "color", + "attributes": { + "item": "palette", + "subitem": "teal" + }, "origamiKeys": [ "palette", "primary" @@ -76,6 +92,10 @@ export default { "value": "#262a33", "originalValue": "#262A33", "type": "color", + "attributes": { + "item": "palette", + "subitem": "slate" + }, "origamiKeys": [ "palette", "secondary" @@ -94,6 +114,10 @@ export default { "value": "#f4f4f5", "originalValue": "#F4F4F5", "type": "color", + "attributes": { + "item": "palette", + "subitem": "slate-white-5" + }, "origamiKeys": [ "palette", "secondary" @@ -112,6 +136,10 @@ export default { "value": "#dedfe0", "originalValue": "#DEDFE0", "type": "color", + "attributes": { + "item": "palette", + "subitem": "slate-white-15" + }, "origamiKeys": [ "palette", "secondary" @@ -130,6 +158,10 @@ export default { "value": "#ffec1a", "originalValue": "#FFEC1A", "type": "color", + "attributes": { + "item": "palette", + "subitem": "lemon" + }, "origamiKeys": [ "palette", "secondary" @@ -148,6 +180,10 @@ export default { "value": "#00994d", "originalValue": "#00994d", "type": "color", + "attributes": { + "item": "palette", + "subitem": "jade" + }, "origamiKeys": [ "palette", "tertiary" @@ -166,6 +202,10 @@ export default { "value": "#ff8833", "originalValue": "#F83", "type": "color", + "attributes": { + "item": "palette", + "subitem": "mandarin" + }, "origamiKeys": [ "palette", "tertiary" @@ -184,6 +224,10 @@ export default { "value": "#cc0000", "originalValue": "#c00", "type": "color", + "attributes": { + "item": "palette", + "subitem": "crimson" + }, "origamiKeys": [ "palette", "tertiary" @@ -202,6 +246,10 @@ export default { "value": "#f2f2f2", "originalValue": "#F2F2F2", "type": "color", + "attributes": { + "item": "palette", + "subitem": "black-5" + }, "path": [ "o3", "color", @@ -220,6 +268,10 @@ export default { "value": "#e6e6e6", "originalValue": "#E6E6E6", "type": "color", + "attributes": { + "item": "palette", + "subitem": "black-10" + }, "path": [ "o3", "color", @@ -238,6 +290,10 @@ export default { "value": "#cccccc", "originalValue": "#ccc", "type": "color", + "attributes": { + "item": "palette", + "subitem": "black-20" + }, "path": [ "o3", "color", @@ -256,6 +312,10 @@ export default { "value": "#b3b3b3", "originalValue": "#B3B3B3", "type": "color", + "attributes": { + "item": "palette", + "subitem": "black-30" + }, "path": [ "o3", "color", @@ -274,6 +334,10 @@ export default { "value": "#999999", "originalValue": "#999", "type": "color", + "attributes": { + "item": "palette", + "subitem": "black-40" + }, "path": [ "o3", "color", @@ -292,6 +356,10 @@ export default { "value": "#808080", "originalValue": "#808080", "type": "color", + "attributes": { + "item": "palette", + "subitem": "black-50" + }, "path": [ "o3", "color", @@ -310,6 +378,10 @@ export default { "value": "#666666", "originalValue": "#666", "type": "color", + "attributes": { + "item": "palette", + "subitem": "black-60" + }, "path": [ "o3", "color", @@ -328,6 +400,10 @@ export default { "value": "#4d4d4d", "originalValue": "#4d4d4d", "type": "color", + "attributes": { + "item": "palette", + "subitem": "black-70" + }, "path": [ "o3", "color", @@ -346,6 +422,10 @@ export default { "value": "#333333", "originalValue": "#333", "type": "color", + "attributes": { + "item": "palette", + "subitem": "black-80" + }, "path": [ "o3", "color", @@ -364,6 +444,10 @@ export default { "value": "#1a1a1a", "originalValue": "#1a1a1a", "type": "color", + "attributes": { + "item": "palette", + "subitem": "black-90" + }, "path": [ "o3", "color", @@ -382,6 +466,10 @@ export default { "value": "#082a4d", "originalValue": "#082A4D", "type": "color", + "attributes": { + "item": "palette", + "subitem": "oxford-30" + }, "path": [ "o3", "color", @@ -400,6 +488,10 @@ export default { "value": "#0a3866", "originalValue": "#0A3866", "type": "color", + "attributes": { + "item": "palette", + "subitem": "oxford-40" + }, "path": [ "o3", "color", @@ -418,6 +510,10 @@ export default { "value": "#0d4680", "originalValue": "#0D4680", "type": "color", + "attributes": { + "item": "palette", + "subitem": "oxford-50" + }, "path": [ "o3", "color", @@ -436,6 +532,10 @@ export default { "value": "#0f5499", "originalValue": "#0F5499", "type": "color", + "attributes": { + "item": "palette", + "subitem": "oxford-60" + }, "path": [ "o3", "color", @@ -454,6 +554,10 @@ export default { "value": "#1262b3", "originalValue": "#1262B3", "type": "color", + "attributes": { + "item": "palette", + "subitem": "oxford-70" + }, "path": [ "o3", "color", @@ -472,6 +576,10 @@ export default { "value": "#1470cc", "originalValue": "#1470CC", "type": "color", + "attributes": { + "item": "palette", + "subitem": "oxford-80" + }, "path": [ "o3", "color", @@ -490,6 +598,10 @@ export default { "value": "#177ee6", "originalValue": "#177EE6", "type": "color", + "attributes": { + "item": "palette", + "subitem": "oxford-90" + }, "path": [ "o3", "color", @@ -508,6 +620,10 @@ export default { "value": "#198cff", "originalValue": "#198CFF", "type": "color", + "attributes": { + "item": "palette", + "subitem": "oxford-100" + }, "path": [ "o3", "color", @@ -526,6 +642,10 @@ export default { "value": "#052f33", "originalValue": "#052F33", "type": "color", + "attributes": { + "item": "palette", + "subitem": "teal-20" + }, "path": [ "o3", "color", @@ -544,6 +664,10 @@ export default { "value": "#08474d", "originalValue": "#08474D", "type": "color", + "attributes": { + "item": "palette", + "subitem": "teal-30" + }, "path": [ "o3", "color", @@ -562,6 +686,10 @@ export default { "value": "#0a5e66", "originalValue": "#0A5E66", "type": "color", + "attributes": { + "item": "palette", + "subitem": "teal-40" + }, "path": [ "o3", "color", @@ -580,6 +708,10 @@ export default { "value": "#0d7680", "originalValue": "#0D7680", "type": "color", + "attributes": { + "item": "palette", + "subitem": "teal-50" + }, "path": [ "o3", "color", @@ -598,6 +730,10 @@ export default { "value": "#108d99", "originalValue": "#108D99", "type": "color", + "attributes": { + "item": "palette", + "subitem": "teal-60" + }, "path": [ "o3", "color", @@ -616,6 +752,10 @@ export default { "value": "#12a5b3", "originalValue": "#12A5B3", "type": "color", + "attributes": { + "item": "palette", + "subitem": "teal-70" + }, "path": [ "o3", "color", @@ -634,6 +774,10 @@ export default { "value": "#15bccc", "originalValue": "#15BCCC", "type": "color", + "attributes": { + "item": "palette", + "subitem": "teal-80" + }, "path": [ "o3", "color", @@ -652,6 +796,10 @@ export default { "value": "#17d4e6", "originalValue": "#17D4E6", "type": "color", + "attributes": { + "item": "palette", + "subitem": "teal-90" + }, "path": [ "o3", "color", @@ -670,6 +818,10 @@ export default { "value": "#1aebff", "originalValue": "#1AEBFF", "type": "color", + "attributes": { + "item": "palette", + "subitem": "teal-100" + }, "path": [ "o3", "color", @@ -689,6 +841,11 @@ export default { "originalValue": "{o3.color.palette.teal}", "type": "color", "description": "", + "attributes": { + "item": "use-case", + "subitem": "link", + "state": "text" + }, "path": [ "o3", "color", @@ -705,6 +862,11 @@ export default { "value": "#08474d", "originalValue": "{o3.color.palette.teal-30}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link", + "state": "text" + }, "path": [ "o3", "color", @@ -721,6 +883,11 @@ export default { "value": "#cfd8d1", "originalValue": "#CFD8D1", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link", + "state": "underline" + }, "path": [ "o3", "color", @@ -737,6 +904,11 @@ export default { "value": "#9ec0bd", "originalValue": "#9EC0BD", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link", + "state": "underline" + }, "path": [ "o3", "color", @@ -753,6 +925,11 @@ export default { "value": "#ffffff", "originalValue": "{o3.color.palette.white}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link-inverse", + "state": "text" + }, "path": [ "o3", "color", @@ -769,6 +946,11 @@ export default { "value": "#cccccc", "originalValue": "{o3.color.palette.black-20}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link-inverse", + "state": "text" + }, "path": [ "o3", "color", @@ -785,6 +967,11 @@ export default { "value": "#ffffff", "originalValue": "{o3.color.palette.white}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link-inverse", + "state": "underline" + }, "path": [ "o3", "color", @@ -801,6 +988,11 @@ export default { "value": "#cccccc", "originalValue": "{o3.color.palette.black-20}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link-inverse", + "state": "underline" + }, "path": [ "o3", "color", @@ -817,6 +1009,11 @@ export default { "value": "#ffffff", "originalValue": "{o3.color.palette.white}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "page", + "state": "background" + }, "path": [ "o3", "color", @@ -832,6 +1029,11 @@ export default { "value": "#262a33", "originalValue": "{o3.color.palette.slate}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "page-inverse", + "state": "background" + }, "path": [ "o3", "color", @@ -847,6 +1049,11 @@ export default { "value": "#333333", "originalValue": "{o3.color.palette.black-80}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "body", + "state": "text" + }, "path": [ "o3", "color", @@ -862,6 +1069,11 @@ export default { "value": "#ffffff", "originalValue": "{o3.color.palette.white}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "body-inverse", + "state": "text" + }, "path": [ "o3", "color", @@ -878,6 +1090,11 @@ export default { "originalValue": "{o3.color.palette.black-20}", "type": "color", "description": "\"Muted\" text is less prominent, for example credits and captions.", + "attributes": { + "item": "use-case", + "subitem": "muted", + "state": "text" + }, "path": [ "o3", "color", @@ -894,6 +1111,11 @@ export default { "originalValue": "#a8aaad", "type": "color", "description": "\"Muted\" text is less prominent, for example credits and captions.", + "attributes": { + "item": "use-case", + "subitem": "muted-inverse", + "state": "text" + }, "path": [ "o3", "color", @@ -909,6 +1131,11 @@ export default { "value": "#1a1a1a", "originalValue": "{o3.color.palette.black-90}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "heading", + "state": "text" + }, "path": [ "o3", "color", @@ -924,6 +1151,11 @@ export default { "value": "#ffffff", "originalValue": "{o3.color.palette.white}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "heading-inverse", + "state": "text" + }, "path": [ "o3", "color", @@ -939,6 +1171,11 @@ export default { "value": "#ffffff", "originalValue": "{o3.color.palette.white}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "button", + "state": "foreground" + }, "path": [ "o3", "color", @@ -954,6 +1191,11 @@ export default { "value": "#ffffff", "originalValue": "{o3.color.palette.white}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "button", + "state": "foreground-disabled" + }, "path": [ "o3", "color", @@ -969,6 +1211,11 @@ export default { "value": "#0d7680", "originalValue": "{o3.color.palette.teal}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "button", + "state": "default" + }, "path": [ "o3", "color", @@ -984,6 +1231,11 @@ export default { "value": "#0a5e66", "originalValue": "{o3.color.palette.teal-40}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "button", + "state": "hover" + }, "path": [ "o3", "color", @@ -999,6 +1251,11 @@ export default { "value": "#052f33", "originalValue": "{o3.color.palette.teal-20}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "button", + "state": "pressed" + }, "path": [ "o3", "color", @@ -1014,6 +1271,11 @@ export default { "value": "#9ec0bd", "originalValue": "#9EC0BD", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "button", + "state": "disabled" + }, "path": [ "o3", "color", @@ -1029,6 +1291,10 @@ export default { "value": "#cc0000", "originalValue": "rgba(204,0,0,0.06)", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "error-background" + }, "path": [ "o3", "color", @@ -1043,6 +1309,10 @@ export default { "value": "#cc0000", "originalValue": "{o3.color.palette.crimson}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "error-text" + }, "path": [ "o3", "color", @@ -1057,6 +1327,10 @@ export default { "value": "#cc0000", "originalValue": "{o3.color.palette.crimson}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "error" + }, "path": [ "o3", "color", @@ -1071,6 +1345,9 @@ export default { "value": "4px", "originalValue": "4px", "type": "dimension", + "attributes": { + "item": "5xs" + }, "path": [ "o3", "spacing", @@ -1084,6 +1361,9 @@ export default { "value": "8px", "originalValue": "8px", "type": "dimension", + "attributes": { + "item": "4xs" + }, "path": [ "o3", "spacing", @@ -1097,6 +1377,9 @@ export default { "value": "12px", "originalValue": "12px", "type": "dimension", + "attributes": { + "item": "3xs" + }, "path": [ "o3", "spacing", @@ -1110,6 +1393,9 @@ export default { "value": "16px", "originalValue": "16px", "type": "dimension", + "attributes": { + "item": "2xs" + }, "path": [ "o3", "spacing", @@ -1123,6 +1409,9 @@ export default { "value": "20px", "originalValue": "20px", "type": "dimension", + "attributes": { + "item": "xs" + }, "path": [ "o3", "spacing", @@ -1136,6 +1425,9 @@ export default { "value": "24px", "originalValue": "24px", "type": "dimension", + "attributes": { + "item": "s" + }, "path": [ "o3", "spacing", @@ -1149,6 +1441,9 @@ export default { "value": "32px", "originalValue": "32px", "type": "dimension", + "attributes": { + "item": "m" + }, "path": [ "o3", "spacing", @@ -1162,6 +1457,9 @@ export default { "value": "40px", "originalValue": "40px", "type": "dimension", + "attributes": { + "item": "l" + }, "path": [ "o3", "spacing", @@ -1175,6 +1473,9 @@ export default { "value": "48px", "originalValue": "48px", "type": "dimension", + "attributes": { + "item": "xl" + }, "path": [ "o3", "spacing", @@ -1188,6 +1489,9 @@ export default { "value": "64px", "originalValue": "64px", "type": "dimension", + "attributes": { + "item": "2xl" + }, "path": [ "o3", "spacing", @@ -1201,6 +1505,9 @@ export default { "value": "80px", "originalValue": "80px", "type": "dimension", + "attributes": { + "item": "3xl" + }, "path": [ "o3", "spacing", @@ -1214,6 +1521,9 @@ export default { "value": "96px", "originalValue": "96px", "type": "dimension", + "attributes": { + "item": "4xl" + }, "path": [ "o3", "spacing", @@ -1228,6 +1538,11 @@ export default { "originalValue": "{o3.font.family.financier-display}", "type": "fontFamily", "description": "Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-lg", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -1244,6 +1559,11 @@ export default { "originalValue": "{o3.font.weight.bold}", "type": "fontWeight", "description": "Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-lg", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -1260,6 +1580,11 @@ export default { "originalValue": "{o3.font.size.7}", "type": "dimension", "description": "Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-lg", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -1276,6 +1601,11 @@ export default { "originalValue": "{o3.font.lineheight.7}", "type": "number", "description": "Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-lg", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -1292,6 +1622,11 @@ export default { "originalValue": "{o3.font.family.financier-display}", "type": "fontFamily", "description": "Use this style for medium screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-md", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -1308,6 +1643,11 @@ export default { "originalValue": "{o3.font.weight.bold}", "type": "fontWeight", "description": "Use this style for medium screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-md", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -1324,6 +1664,11 @@ export default { "originalValue": "{o3.font.size.6}", "type": "dimension", "description": "Use this style for medium screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-md", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -1340,6 +1685,11 @@ export default { "originalValue": "{o3.font.lineheight.6}", "type": "number", "description": "Use this style for medium screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-md", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -1356,6 +1706,11 @@ export default { "originalValue": "{o3.font.family.financier-display}", "type": "fontFamily", "description": "Use this style for small screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-sm", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -1372,6 +1727,11 @@ export default { "originalValue": "{o3.font.weight.bold}", "type": "fontWeight", "description": "Use this style for small screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-sm", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -1388,6 +1748,11 @@ export default { "originalValue": "{o3.font.size.5}", "type": "dimension", "description": "Use this style for small screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-sm", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -1404,6 +1769,11 @@ export default { "originalValue": "{o3.font.lineheight.5}", "type": "number", "description": "Use this style for small screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-sm", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -1420,6 +1790,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-lg", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -1436,6 +1811,11 @@ export default { "originalValue": "{o3.font.weight.semibold}", "type": "fontWeight", "description": "Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-lg", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -1452,6 +1832,11 @@ export default { "originalValue": "{o3.font.size-metric2.4}", "type": "dimension", "description": "Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-lg", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -1468,6 +1853,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.3}", "type": "number", "description": "Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-lg", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -1484,6 +1874,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use this style as H3 or subtitles within the content body to break paragraphs, or for titles of components like forms, tables and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-md", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -1500,6 +1895,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use this style as H3 or subtitles within the content body to break paragraphs, or for titles of components like forms, tables and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-md", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -1516,6 +1916,11 @@ export default { "originalValue": "{o3.font.size-metric2.3}", "type": "dimension", "description": "Use this style as H3 or subtitles within the content body to break paragraphs, or for titles of components like forms, tables and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-md", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -1532,6 +1937,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.3}", "type": "number", "description": "Use this style as H3 or subtitles within the content body to break paragraphs, or for titles of components like forms, tables and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-md", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -1548,6 +1958,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use H6 for subtitles within the content body to break up paragraphs, and H2 for subheadings on stream pages or as subtitles for components such as forms, tables, and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-sm", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -1564,6 +1979,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use H6 for subtitles within the content body to break up paragraphs, and H2 for subheadings on stream pages or as subtitles for components such as forms, tables, and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-sm", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -1580,6 +2000,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.2}", "type": "number", "description": "Use H6 for subtitles within the content body to break up paragraphs, and H2 for subheadings on stream pages or as subtitles for components such as forms, tables, and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-sm", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -1596,6 +2021,11 @@ export default { "originalValue": "{o3.font.size-metric2.2}", "type": "dimension", "description": "Use H6 for subtitles within the content body to break up paragraphs, and H2 for subheadings on stream pages or as subtitles for components such as forms, tables, and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-sm", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -1612,6 +2042,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use primarily for the stand-first (introductory summary or highlight) in topper component, as larger body text in components, or section description.", + "attributes": { + "item": "use-case", + "subitem": "body-lg", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -1628,6 +2063,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use primarily for the stand-first (introductory summary or highlight) in topper component, as larger body text in components, or section description.", + "attributes": { + "item": "use-case", + "subitem": "body-lg", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -1644,6 +2084,11 @@ export default { "originalValue": "{o3.font.size-metric2.1}", "type": "dimension", "description": "Use primarily for the stand-first (introductory summary or highlight) in topper component, as larger body text in components, or section description.", + "attributes": { + "item": "use-case", + "subitem": "body-lg", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -1660,6 +2105,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.1}", "type": "number", "description": "Use primarily for the stand-first (introductory summary or highlight) in topper component, as larger body text in components, or section description.", + "attributes": { + "item": "use-case", + "subitem": "body-lg", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -1676,6 +2126,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use this style for the stand-first in teasers and as the default body copy style across components such as location in the byline.", + "attributes": { + "item": "use-case", + "subitem": "body-base", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -1692,6 +2147,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use this style for the stand-first in teasers and as the default body copy style across components such as location in the byline.", + "attributes": { + "item": "use-case", + "subitem": "body-base", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -1708,6 +2168,11 @@ export default { "originalValue": "{o3.font.size-metric2.0}", "type": "dimension", "description": "Use this style for the stand-first in teasers and as the default body copy style across components such as location in the byline.", + "attributes": { + "item": "use-case", + "subitem": "body-base", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -1724,6 +2189,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.0}", "type": "number", "description": "Use this style for the stand-first in teasers and as the default body copy style across components such as location in the byline.", + "attributes": { + "item": "use-case", + "subitem": "body-base", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -1740,6 +2210,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use this style for bold formatting in body copy or for small interactive elements, such as Topic tags and Author names.", + "attributes": { + "item": "use-case", + "subitem": "body-highlight", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -1756,6 +2231,11 @@ export default { "originalValue": "{o3.font.weight.semibold}", "type": "fontWeight", "description": "Use this style for bold formatting in body copy or for small interactive elements, such as Topic tags and Author names.", + "attributes": { + "item": "use-case", + "subitem": "body-highlight", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -1772,6 +2252,11 @@ export default { "originalValue": "{o3.font.size-metric2.0}", "type": "dimension", "description": "Use this style for bold formatting in body copy or for small interactive elements, such as Topic tags and Author names.", + "attributes": { + "item": "use-case", + "subitem": "body-highlight", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -1788,6 +2273,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.0}", "type": "number", "description": "Use this style for bold formatting in body copy or for small interactive elements, such as Topic tags and Author names.", + "attributes": { + "item": "use-case", + "subitem": "body-highlight", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -1804,6 +2294,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use this style primarily for links in paragraph or as stand alone link.", + "attributes": { + "item": "use-case", + "subitem": "body-link", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -1820,6 +2315,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use this style primarily for links in paragraph or as stand alone link.", + "attributes": { + "item": "use-case", + "subitem": "body-link", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -1836,6 +2336,11 @@ export default { "originalValue": "{o3.font.size-metric2.0}", "type": "dimension", "description": "Use this style primarily for links in paragraph or as stand alone link.", + "attributes": { + "item": "use-case", + "subitem": "body-link", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -1852,6 +2357,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.0}", "type": "number", "description": "Use this style primarily for links in paragraph or as stand alone link.", + "attributes": { + "item": "use-case", + "subitem": "body-link", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -1868,6 +2378,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use this style for caption in visual assets such as image and video and for small text elements, such as secondary metadata, caveats, or footnotes.", + "attributes": { + "item": "use-case", + "subitem": "detail", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -1884,6 +2399,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use this style for caption in visual assets such as image and video and for small text elements, such as secondary metadata, caveats, or footnotes.", + "attributes": { + "item": "use-case", + "subitem": "detail", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -1900,6 +2420,11 @@ export default { "originalValue": "{o3.font.size-metric2.negative-1}", "type": "dimension", "description": "Use this style for caption in visual assets such as image and video and for small text elements, such as secondary metadata, caveats, or footnotes.", + "attributes": { + "item": "use-case", + "subitem": "detail", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -1916,6 +2441,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.negative-1}", "type": "number", "description": "Use this style for caption in visual assets such as image and video and for small text elements, such as secondary metadata, caveats, or footnotes.", + "attributes": { + "item": "use-case", + "subitem": "detail", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -1932,6 +2462,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use this style for labels such as badges and metadata in teasers and toppers (e.g., \"Live,\" \"Premium,\" or the main timestamp). Avoid using full sentences.", + "attributes": { + "item": "use-case", + "subitem": "label", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -1948,6 +2483,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use this style for labels such as badges and metadata in teasers and toppers (e.g., \"Live,\" \"Premium,\" or the main timestamp). Avoid using full sentences.", + "attributes": { + "item": "use-case", + "subitem": "label", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -1964,6 +2504,11 @@ export default { "originalValue": "{o3.font.size-metric2.negative-1}", "type": "dimension", "description": "Use this style for labels such as badges and metadata in teasers and toppers (e.g., \"Live,\" \"Premium,\" or the main timestamp). Avoid using full sentences.", + "attributes": { + "item": "use-case", + "subitem": "label", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -1980,6 +2525,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.negative-1}", "type": "number", "description": "Use this style for labels such as badges and metadata in teasers and toppers (e.g., \"Live,\" \"Premium,\" or the main timestamp). Avoid using full sentences.", + "attributes": { + "item": "use-case", + "subitem": "label", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -1996,6 +2546,11 @@ export default { "originalValue": "uppercase", "type": "textCase", "description": "Use this style for labels such as badges and metadata in teasers and toppers (e.g., \"Live,\" \"Premium,\" or the main timestamp). Avoid using full sentences.", + "attributes": { + "item": "use-case", + "subitem": "label", + "state": "textCase" + }, "path": [ "o3", "typography", @@ -2011,6 +2566,10 @@ export default { "value": "metric 2 VF", "originalValue": "metric 2 VF", "type": "fontFamily", + "attributes": { + "item": "family", + "subitem": "metric" + }, "path": [ "o3", "font", @@ -2025,6 +2584,10 @@ export default { "value": "financier display VF", "originalValue": "financier display VF", "type": "fontFamily", + "attributes": { + "item": "family", + "subitem": "financier-display" + }, "path": [ "o3", "font", @@ -2039,6 +2602,10 @@ export default { "value": "georgia", "originalValue": "georgia", "type": "fontFamily", + "attributes": { + "item": "family", + "subitem": "georgia" + }, "path": [ "o3", "font", @@ -2053,6 +2620,10 @@ export default { "value": "300", "originalValue": "300", "type": "fontWeight", + "attributes": { + "item": "weight", + "subitem": "light" + }, "path": [ "o3", "font", @@ -2067,6 +2638,10 @@ export default { "value": "400", "originalValue": "400", "type": "fontWeight", + "attributes": { + "item": "weight", + "subitem": "regular" + }, "path": [ "o3", "font", @@ -2081,6 +2656,10 @@ export default { "value": "500", "originalValue": "500", "type": "fontWeight", + "attributes": { + "item": "weight", + "subitem": "medium" + }, "path": [ "o3", "font", @@ -2095,6 +2674,10 @@ export default { "value": "700", "originalValue": "700", "type": "fontWeight", + "attributes": { + "item": "weight", + "subitem": "semibold" + }, "path": [ "o3", "font", @@ -2109,6 +2692,10 @@ export default { "value": "800", "originalValue": "800", "type": "fontWeight", + "attributes": { + "item": "weight", + "subitem": "bold" + }, "path": [ "o3", "font", @@ -2123,6 +2710,10 @@ export default { "value": "20px", "originalValue": "20", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "0" + }, "path": [ "o3", "font", @@ -2137,6 +2728,10 @@ export default { "value": "20px", "originalValue": "20", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "1" + }, "path": [ "o3", "font", @@ -2151,6 +2746,10 @@ export default { "value": "24px", "originalValue": "24", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "2" + }, "path": [ "o3", "font", @@ -2165,6 +2764,10 @@ export default { "value": "28px", "originalValue": "28", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "3" + }, "path": [ "o3", "font", @@ -2179,6 +2782,10 @@ export default { "value": "32px", "originalValue": "32", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "4" + }, "path": [ "o3", "font", @@ -2193,6 +2800,10 @@ export default { "value": "32px", "originalValue": "32", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "5" + }, "path": [ "o3", "font", @@ -2207,6 +2818,10 @@ export default { "value": "40px", "originalValue": "40", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "6" + }, "path": [ "o3", "font", @@ -2221,6 +2836,10 @@ export default { "value": "48px", "originalValue": "48", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "7" + }, "path": [ "o3", "font", @@ -2235,6 +2854,10 @@ export default { "value": "56px", "originalValue": "56", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "8" + }, "path": [ "o3", "font", @@ -2249,6 +2872,10 @@ export default { "value": "72px", "originalValue": "72", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "9" + }, "path": [ "o3", "font", @@ -2263,6 +2890,10 @@ export default { "value": "84px", "originalValue": "84", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "10" + }, "path": [ "o3", "font", @@ -2277,6 +2908,10 @@ export default { "value": "16px", "originalValue": "16", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "negative-2" + }, "path": [ "o3", "font", @@ -2291,6 +2926,10 @@ export default { "value": "16px", "originalValue": "16", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "negative-1" + }, "path": [ "o3", "font", @@ -2305,6 +2944,10 @@ export default { "value": "16px", "originalValue": "16", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "0" + }, "path": [ "o3", "font", @@ -2319,6 +2962,10 @@ export default { "value": "18px", "originalValue": "18", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "1" + }, "path": [ "o3", "font", @@ -2333,6 +2980,10 @@ export default { "value": "20px", "originalValue": "20", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "2" + }, "path": [ "o3", "font", @@ -2347,6 +2998,10 @@ export default { "value": "24px", "originalValue": "24", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "3" + }, "path": [ "o3", "font", @@ -2361,6 +3016,10 @@ export default { "value": "28px", "originalValue": "28", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "4" + }, "path": [ "o3", "font", @@ -2375,6 +3034,10 @@ export default { "value": "32px", "originalValue": "32", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "5" + }, "path": [ "o3", "font", @@ -2389,6 +3052,10 @@ export default { "value": "40px", "originalValue": "40", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "6" + }, "path": [ "o3", "font", @@ -2403,6 +3070,10 @@ export default { "value": "48px", "originalValue": "48", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "7" + }, "path": [ "o3", "font", @@ -2417,6 +3088,10 @@ export default { "value": "56px", "originalValue": "56", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "8" + }, "path": [ "o3", "font", @@ -2431,6 +3106,10 @@ export default { "value": "72px", "originalValue": "72", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "9" + }, "path": [ "o3", "font", @@ -2445,6 +3124,10 @@ export default { "value": "84px", "originalValue": "84", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "10" + }, "path": [ "o3", "font", @@ -2459,6 +3142,10 @@ export default { "value": "12px", "originalValue": "12", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "negative-2" + }, "path": [ "o3", "font", @@ -2473,6 +3160,10 @@ export default { "value": "14px", "originalValue": "14", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "negative-1" + }, "path": [ "o3", "font", @@ -2487,6 +3178,10 @@ export default { "value": "24px", "originalValue": "24", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "0" + }, "path": [ "o3", "font", @@ -2501,6 +3196,10 @@ export default { "value": "24px", "originalValue": "24", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "1" + }, "path": [ "o3", "font", @@ -2515,6 +3214,10 @@ export default { "value": "28px", "originalValue": "28", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "2" + }, "path": [ "o3", "font", @@ -2529,6 +3232,10 @@ export default { "value": "32px", "originalValue": "32", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "3" + }, "path": [ "o3", "font", @@ -2543,6 +3250,10 @@ export default { "value": "32px", "originalValue": "32", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "4" + }, "path": [ "o3", "font", @@ -2557,6 +3268,10 @@ export default { "value": "40px", "originalValue": "40", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "5" + }, "path": [ "o3", "font", @@ -2571,6 +3286,10 @@ export default { "value": "48px", "originalValue": "48", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "6" + }, "path": [ "o3", "font", @@ -2585,6 +3304,10 @@ export default { "value": "56px", "originalValue": "56", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "7" + }, "path": [ "o3", "font", @@ -2599,6 +3322,10 @@ export default { "value": "72px", "originalValue": "72", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "8" + }, "path": [ "o3", "font", @@ -2613,6 +3340,10 @@ export default { "value": "84px", "originalValue": "84", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "9" + }, "path": [ "o3", "font", @@ -2627,6 +3358,10 @@ export default { "value": "16px", "originalValue": "16", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "negative-3" + }, "path": [ "o3", "font", @@ -2641,6 +3376,10 @@ export default { "value": "16px", "originalValue": "16", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "negative-2" + }, "path": [ "o3", "font", @@ -2655,6 +3394,10 @@ export default { "value": "20px", "originalValue": "20", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "negative-1" + }, "path": [ "o3", "font", @@ -2669,6 +3412,10 @@ export default { "value": "16px", "originalValue": "16", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "0" + }, "path": [ "o3", "font", @@ -2683,6 +3430,10 @@ export default { "value": "18px", "originalValue": "18", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "1" + }, "path": [ "o3", "font", @@ -2697,6 +3448,10 @@ export default { "value": "20px", "originalValue": "20", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "2" + }, "path": [ "o3", "font", @@ -2711,6 +3466,10 @@ export default { "value": "24px", "originalValue": "24", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "3" + }, "path": [ "o3", "font", @@ -2725,6 +3484,10 @@ export default { "value": "28px", "originalValue": "28", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "4" + }, "path": [ "o3", "font", @@ -2739,6 +3502,10 @@ export default { "value": "32px", "originalValue": "32", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "5" + }, "path": [ "o3", "font", @@ -2753,6 +3520,10 @@ export default { "value": "40px", "originalValue": "40", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "6" + }, "path": [ "o3", "font", @@ -2767,6 +3538,10 @@ export default { "value": "48px", "originalValue": "48", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "7" + }, "path": [ "o3", "font", @@ -2781,6 +3556,10 @@ export default { "value": "64px", "originalValue": "64", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "8" + }, "path": [ "o3", "font", @@ -2795,6 +3574,10 @@ export default { "value": "72px", "originalValue": "72", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "9" + }, "path": [ "o3", "font", @@ -2809,6 +3592,10 @@ export default { "value": "10px", "originalValue": "10", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "negative-3" + }, "path": [ "o3", "font", @@ -2823,6 +3610,10 @@ export default { "value": "12px", "originalValue": "12", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "negative-2" + }, "path": [ "o3", "font", @@ -2837,6 +3628,10 @@ export default { "value": "14px", "originalValue": "14", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "negative-1" + }, "path": [ "o3", "font", @@ -2865,6 +3660,11 @@ export default { "offsetY": "0" }, "type": "shadow", + "attributes": { + "item": "use-case", + "subitem": "ring", + "state": "inner" + }, "path": [ "o3", "focus", @@ -2894,6 +3694,11 @@ export default { "offsetY": "0" }, "type": "shadow", + "attributes": { + "item": "use-case", + "subitem": "ring", + "state": "outer" + }, "path": [ "o3", "focus", @@ -2923,6 +3728,11 @@ export default { "offsetY": "0" }, "type": "shadow", + "attributes": { + "item": "use-case", + "subitem": "ring", + "state": "inverse" + }, "path": [ "o3", "focus", @@ -2953,6 +3763,11 @@ export default { "offsetY": "0" }, "type": "shadow", + "attributes": { + "item": "use-case", + "subitem": "ring", + "state": "inverse" + }, "path": [ "o3", "focus", @@ -2983,6 +3798,11 @@ export default { "offsetY": "0" }, "type": "shadow", + "attributes": { + "item": "use-case", + "subitem": "outline", + "state": "color" + }, "path": [ "o3", "focus", @@ -3012,6 +3832,11 @@ export default { "offsetY": "0" }, "type": "shadow", + "attributes": { + "item": "use-case", + "subitem": "outline", + "state": "inverse" + }, "path": [ "o3", "focus", @@ -3028,6 +3853,9 @@ export default { "value": "4px", "originalValue": "4", "type": "dimension", + "attributes": { + "item": "1" + }, "path": [ "o3", "border-radius", @@ -3041,6 +3869,9 @@ export default { "value": "6px", "originalValue": "6", "type": "dimension", + "attributes": { + "item": "2" + }, "path": [ "o3", "border-radius", diff --git a/libraries/o3-tooling-token/build/sustainable-views/_variables.js b/libraries/o3-tooling-token/build/sustainable-views/_variables.js index f075aa371c..2eed767713 100644 --- a/libraries/o3-tooling-token/build/sustainable-views/_variables.js +++ b/libraries/o3-tooling-token/build/sustainable-views/_variables.js @@ -4,6 +4,9 @@ export default { "value": "4px", "originalValue": "4", "type": "dimension", + "attributes": { + "item": "1" + }, "path": [ "o3", "border-radius", @@ -17,6 +20,9 @@ export default { "value": "6px", "originalValue": "6", "type": "dimension", + "attributes": { + "item": "2" + }, "path": [ "o3", "border-radius", @@ -30,6 +36,9 @@ export default { "value": "4px", "originalValue": "4px", "type": "dimension", + "attributes": { + "item": "5xs" + }, "path": [ "o3", "spacing", @@ -43,6 +52,9 @@ export default { "value": "8px", "originalValue": "8px", "type": "dimension", + "attributes": { + "item": "4xs" + }, "path": [ "o3", "spacing", @@ -56,6 +68,9 @@ export default { "value": "12px", "originalValue": "12px", "type": "dimension", + "attributes": { + "item": "3xs" + }, "path": [ "o3", "spacing", @@ -69,6 +84,9 @@ export default { "value": "16px", "originalValue": "16px", "type": "dimension", + "attributes": { + "item": "2xs" + }, "path": [ "o3", "spacing", @@ -82,6 +100,9 @@ export default { "value": "20px", "originalValue": "20px", "type": "dimension", + "attributes": { + "item": "xs" + }, "path": [ "o3", "spacing", @@ -95,6 +116,9 @@ export default { "value": "24px", "originalValue": "24px", "type": "dimension", + "attributes": { + "item": "s" + }, "path": [ "o3", "spacing", @@ -108,6 +132,9 @@ export default { "value": "32px", "originalValue": "32px", "type": "dimension", + "attributes": { + "item": "m" + }, "path": [ "o3", "spacing", @@ -121,6 +148,9 @@ export default { "value": "40px", "originalValue": "40px", "type": "dimension", + "attributes": { + "item": "l" + }, "path": [ "o3", "spacing", @@ -134,6 +164,9 @@ export default { "value": "48px", "originalValue": "48px", "type": "dimension", + "attributes": { + "item": "xl" + }, "path": [ "o3", "spacing", @@ -147,6 +180,9 @@ export default { "value": "64px", "originalValue": "64px", "type": "dimension", + "attributes": { + "item": "2xl" + }, "path": [ "o3", "spacing", @@ -160,6 +196,9 @@ export default { "value": "80px", "originalValue": "80px", "type": "dimension", + "attributes": { + "item": "3xl" + }, "path": [ "o3", "spacing", @@ -173,6 +212,9 @@ export default { "value": "96px", "originalValue": "96px", "type": "dimension", + "attributes": { + "item": "4xl" + }, "path": [ "o3", "spacing", @@ -187,6 +229,10 @@ export default { "originalValue": "#0d7680ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "teal" + }, "origamiKeys": [ "palette", "secondary" @@ -205,6 +251,10 @@ export default { "value": "#c9f5ea", "originalValue": "#C9F5EA", "type": "color", + "attributes": { + "item": "palette", + "subitem": "oceanwave" + }, "origamiKeys": [ "palette", "primary" @@ -223,6 +273,10 @@ export default { "value": "#262a33", "originalValue": "#262A33", "type": "color", + "attributes": { + "item": "palette", + "subitem": "slate" + }, "origamiKeys": [ "palette", "secondary" @@ -242,6 +296,10 @@ export default { "originalValue": "#ffffffff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "white" + }, "origamiKeys": [ "palette", "primary" @@ -261,6 +319,10 @@ export default { "originalValue": "#000000ff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "black" + }, "origamiKeys": [ "palette", "primary" @@ -280,6 +342,10 @@ export default { "originalValue": "#990f3dff", "type": "color", "description": "", + "attributes": { + "item": "palette", + "subitem": "claret" + }, "origamiKeys": [ "palette", "secondary" @@ -298,6 +364,10 @@ export default { "value": "#1a1817", "originalValue": "#1a1817ff", "type": "color", + "attributes": { + "item": "palette", + "subitem": "black-90" + }, "path": [ "o3", "color", @@ -316,6 +386,10 @@ export default { "value": "#807973", "originalValue": "#807973ff", "type": "color", + "attributes": { + "item": "palette", + "subitem": "black-50" + }, "path": [ "o3", "color", @@ -334,6 +408,10 @@ export default { "value": "#0a5e66", "originalValue": "#0a5e66ff", "type": "color", + "attributes": { + "item": "palette", + "subitem": "teal-40" + }, "path": [ "o3", "color", @@ -352,6 +430,10 @@ export default { "value": "#052f33", "originalValue": "#052f33ff", "type": "color", + "attributes": { + "item": "palette", + "subitem": "teal-20" + }, "path": [ "o3", "color", @@ -370,6 +452,10 @@ export default { "value": "#b3a9a0", "originalValue": "#b3a9a0ff", "type": "color", + "attributes": { + "item": "palette", + "subitem": "black-30" + }, "path": [ "o3", "color", @@ -388,6 +474,10 @@ export default { "value": "#e6d9ce", "originalValue": "#e6d9ceff", "type": "color", + "attributes": { + "item": "palette", + "subitem": "black-10" + }, "path": [ "o3", "color", @@ -406,6 +496,10 @@ export default { "value": "#cc0000", "originalValue": "#cc0000ff", "type": "color", + "attributes": { + "item": "palette", + "subitem": "crimson" + }, "path": [ "o3", "color", @@ -421,6 +515,11 @@ export default { "originalValue": "{o3.color.palette.teal}", "type": "color", "description": "", + "attributes": { + "item": "use-case", + "subitem": "link", + "state": "text" + }, "path": [ "o3", "color", @@ -437,6 +536,11 @@ export default { "value": "#262a33", "originalValue": "{o3.color.palette.slate}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link", + "state": "text" + }, "path": [ "o3", "color", @@ -453,6 +557,11 @@ export default { "value": "#0d7680", "originalValue": "{o3.color.palette.teal}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link", + "state": "underline" + }, "path": [ "o3", "color", @@ -469,6 +578,11 @@ export default { "value": "#262a33", "originalValue": "{o3.color.palette.slate}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link", + "state": "underline" + }, "path": [ "o3", "color", @@ -485,6 +599,11 @@ export default { "value": "#ffffff", "originalValue": "{o3.color.palette.white}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "page", + "state": "background" + }, "path": [ "o3", "color", @@ -500,6 +619,11 @@ export default { "value": "#1a1817", "originalValue": "{o3.color.palette.black-90}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "body", + "state": "text" + }, "path": [ "o3", "color", @@ -516,6 +640,11 @@ export default { "originalValue": "{o3.color.palette.black-50}", "type": "color", "description": "\"Muted\" text is less prominent, for example credits and captions.", + "attributes": { + "item": "use-case", + "subitem": "muted", + "state": "text" + }, "path": [ "o3", "color", @@ -532,6 +661,11 @@ export default { "originalValue": "#a8aaad", "type": "color", "description": "\"Muted\" text is less prominent, for example credits and captions.", + "attributes": { + "item": "use-case", + "subitem": "muted-inverse", + "state": "text" + }, "path": [ "o3", "color", @@ -547,6 +681,11 @@ export default { "value": "#ffffff", "originalValue": "#ffffffff", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link-inverse", + "state": "text" + }, "path": [ "o3", "color", @@ -563,6 +702,11 @@ export default { "value": "#d4d4d6", "originalValue": "#d4d4d6", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link-inverse", + "state": "text" + }, "path": [ "o3", "color", @@ -579,6 +723,11 @@ export default { "value": "#ffffff", "originalValue": "#ffffffff", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link-inverse", + "state": "underline" + }, "path": [ "o3", "color", @@ -595,6 +744,11 @@ export default { "value": "#d4d4d6", "originalValue": "#d4d4d6", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link-inverse", + "state": "underline" + }, "path": [ "o3", "color", @@ -611,6 +765,11 @@ export default { "value": "#262a33", "originalValue": "{o3.color.palette.slate}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "page-inverse", + "state": "background" + }, "path": [ "o3", "color", @@ -626,6 +785,11 @@ export default { "value": "#ffffff", "originalValue": "{o3.color.palette.white}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "body-inverse", + "state": "text" + }, "path": [ "o3", "color", @@ -641,6 +805,11 @@ export default { "value": "#ffffff", "originalValue": "{o3.color.palette.white}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "button", + "state": "foreground" + }, "path": [ "o3", "color", @@ -656,6 +825,11 @@ export default { "value": "#ffffff", "originalValue": "{o3.color.palette.white}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "button", + "state": "foreground-disabled" + }, "path": [ "o3", "color", @@ -671,6 +845,11 @@ export default { "value": "#0d7680", "originalValue": "{o3.color.palette.teal}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "button", + "state": "default" + }, "path": [ "o3", "color", @@ -686,6 +865,11 @@ export default { "value": "#0a5e66", "originalValue": "{o3.color.palette.teal-40}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "button", + "state": "hover" + }, "path": [ "o3", "color", @@ -701,6 +885,11 @@ export default { "value": "#052f33", "originalValue": "{o3.color.palette.teal-20}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "button", + "state": "pressed" + }, "path": [ "o3", "color", @@ -716,6 +905,11 @@ export default { "value": "#9ec0bd", "originalValue": "#9EC0BD", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "button", + "state": "disabled" + }, "path": [ "o3", "color", @@ -731,6 +925,10 @@ export default { "value": "#cc0000", "originalValue": "rgba(204,0,0,0.06)", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "error-background" + }, "path": [ "o3", "color", @@ -745,6 +943,10 @@ export default { "value": "#cc0000", "originalValue": "{o3.color.palette.crimson}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "error-text" + }, "path": [ "o3", "color", @@ -759,6 +961,10 @@ export default { "value": "#cc0000", "originalValue": "{o3.color.palette.crimson}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "error" + }, "path": [ "o3", "color", @@ -774,6 +980,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-lg", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -790,6 +1001,11 @@ export default { "originalValue": "{o3.font.weight.semibold}", "type": "fontWeight", "description": "Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-lg", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -806,6 +1022,11 @@ export default { "originalValue": "{o3.font.size-metric2.7}", "type": "dimension", "description": "Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-lg", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -822,6 +1043,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.7}", "type": "number", "description": "Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-lg", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -838,6 +1064,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use this style for medium screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-md", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -854,6 +1085,11 @@ export default { "originalValue": "{o3.font.weight.semibold}", "type": "fontWeight", "description": "Use this style for medium screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-md", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -870,6 +1106,11 @@ export default { "originalValue": "{o3.font.size-metric2.6}", "type": "dimension", "description": "Use this style for medium screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-md", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -886,6 +1127,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.6}", "type": "number", "description": "Use this style for medium screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-md", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -902,6 +1148,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use this style for small screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-sm", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -918,6 +1169,11 @@ export default { "originalValue": "{o3.font.weight.semibold}", "type": "fontWeight", "description": "Use this style for small screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-sm", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -934,6 +1190,11 @@ export default { "originalValue": "{o3.font.size-metric2.5}", "type": "dimension", "description": "Use this style for small screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-sm", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -950,6 +1211,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.5}", "type": "number", "description": "Use this style for small screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-sm", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -966,6 +1232,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use this style for large screens headlines in standard-sized teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-lg", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -982,6 +1253,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use this style for large screens headlines in standard-sized teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-lg", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -998,6 +1274,11 @@ export default { "originalValue": "{o3.font.size-metric2.6}", "type": "dimension", "description": "Use this style for large screens headlines in standard-sized teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-lg", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -1014,6 +1295,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.6}", "type": "number", "description": "Use this style for large screens headlines in standard-sized teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-lg", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -1030,6 +1316,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use this style for medium screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-md", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -1046,6 +1337,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use this style for medium screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-md", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -1062,6 +1358,11 @@ export default { "originalValue": "{o3.font.size-metric2.5}", "type": "dimension", "description": "Use this style for medium screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-md", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -1078,6 +1379,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.5}", "type": "number", "description": "Use this style for medium screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-md", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -1094,6 +1400,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-sm", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -1110,6 +1421,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-sm", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -1126,6 +1442,11 @@ export default { "originalValue": "{o3.font.size-metric2.4}", "type": "dimension", "description": "Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-sm", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -1142,6 +1463,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.4}", "type": "number", "description": "Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-sm", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -1158,6 +1484,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-lg", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -1174,6 +1505,11 @@ export default { "originalValue": "{o3.font.weight.semibold}", "type": "fontWeight", "description": "Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-lg", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -1190,6 +1526,11 @@ export default { "originalValue": "{o3.font.size-metric2.4}", "type": "dimension", "description": "Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-lg", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -1206,6 +1547,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.3}", "type": "number", "description": "Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-lg", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -1222,6 +1568,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use this style as H3 or subtitles within the content body to break paragraphs, or for titles of components like forms, tables and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-md", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -1238,6 +1589,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use this style as H3 or subtitles within the content body to break paragraphs, or for titles of components like forms, tables and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-md", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -1254,6 +1610,11 @@ export default { "originalValue": "{o3.font.size-metric2.3}", "type": "dimension", "description": "Use this style as H3 or subtitles within the content body to break paragraphs, or for titles of components like forms, tables and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-md", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -1270,6 +1631,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.3}", "type": "number", "description": "Use this style as H3 or subtitles within the content body to break paragraphs, or for titles of components like forms, tables and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-md", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -1286,6 +1652,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use H6 for subtitles within the content body to break up paragraphs, and H2 for subheadings on stream pages or as subtitles for components such as forms, tables, and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-sm", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -1302,6 +1673,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use H6 for subtitles within the content body to break up paragraphs, and H2 for subheadings on stream pages or as subtitles for components such as forms, tables, and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-sm", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -1318,6 +1694,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.2}", "type": "number", "description": "Use H6 for subtitles within the content body to break up paragraphs, and H2 for subheadings on stream pages or as subtitles for components such as forms, tables, and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-sm", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -1334,6 +1715,11 @@ export default { "originalValue": "{o3.font.size-metric2.2}", "type": "dimension", "description": "Use H6 for subtitles within the content body to break up paragraphs, and H2 for subheadings on stream pages or as subtitles for components such as forms, tables, and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-sm", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -1350,6 +1736,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use primarily for the stand-first (introductory summary or highlight) in topper component, as larger body text in components, or section description.", + "attributes": { + "item": "use-case", + "subitem": "body-lg", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -1366,6 +1757,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use primarily for the stand-first (introductory summary or highlight) in topper component, as larger body text in components, or section description.", + "attributes": { + "item": "use-case", + "subitem": "body-lg", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -1382,6 +1778,11 @@ export default { "originalValue": "{o3.font.size-metric2.1}", "type": "dimension", "description": "Use primarily for the stand-first (introductory summary or highlight) in topper component, as larger body text in components, or section description.", + "attributes": { + "item": "use-case", + "subitem": "body-lg", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -1398,6 +1799,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.1}", "type": "number", "description": "Use primarily for the stand-first (introductory summary or highlight) in topper component, as larger body text in components, or section description.", + "attributes": { + "item": "use-case", + "subitem": "body-lg", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -1414,6 +1820,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use this style for the stand-first in teasers and as the default body copy style across components such as location in the byline.", + "attributes": { + "item": "use-case", + "subitem": "body-base", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -1430,6 +1841,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use this style for the stand-first in teasers and as the default body copy style across components such as location in the byline.", + "attributes": { + "item": "use-case", + "subitem": "body-base", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -1446,6 +1862,11 @@ export default { "originalValue": "{o3.font.size-metric2.0}", "type": "dimension", "description": "Use this style for the stand-first in teasers and as the default body copy style across components such as location in the byline.", + "attributes": { + "item": "use-case", + "subitem": "body-base", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -1462,6 +1883,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.0}", "type": "number", "description": "Use this style for the stand-first in teasers and as the default body copy style across components such as location in the byline.", + "attributes": { + "item": "use-case", + "subitem": "body-base", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -1478,6 +1904,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use this style for bold formatting in body copy or for small interactive elements, such as Topic tags and Author names.", + "attributes": { + "item": "use-case", + "subitem": "body-highlight", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -1494,6 +1925,11 @@ export default { "originalValue": "{o3.font.weight.semibold}", "type": "fontWeight", "description": "Use this style for bold formatting in body copy or for small interactive elements, such as Topic tags and Author names.", + "attributes": { + "item": "use-case", + "subitem": "body-highlight", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -1510,6 +1946,11 @@ export default { "originalValue": "{o3.font.size-metric2.0}", "type": "dimension", "description": "Use this style for bold formatting in body copy or for small interactive elements, such as Topic tags and Author names.", + "attributes": { + "item": "use-case", + "subitem": "body-highlight", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -1526,6 +1967,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.0}", "type": "number", "description": "Use this style for bold formatting in body copy or for small interactive elements, such as Topic tags and Author names.", + "attributes": { + "item": "use-case", + "subitem": "body-highlight", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -1542,6 +1988,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use this style primarily for links in paragraph or as stand alone link.", + "attributes": { + "item": "use-case", + "subitem": "body-link", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -1558,6 +2009,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use this style primarily for links in paragraph or as stand alone link.", + "attributes": { + "item": "use-case", + "subitem": "body-link", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -1574,6 +2030,11 @@ export default { "originalValue": "{o3.font.size-metric2.0}", "type": "dimension", "description": "Use this style primarily for links in paragraph or as stand alone link.", + "attributes": { + "item": "use-case", + "subitem": "body-link", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -1590,6 +2051,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.0}", "type": "number", "description": "Use this style primarily for links in paragraph or as stand alone link.", + "attributes": { + "item": "use-case", + "subitem": "body-link", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -1606,6 +2072,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use this style for caption in visual assets such as image and video and for small text elements, such as secondary metadata, caveats, or footnotes.", + "attributes": { + "item": "use-case", + "subitem": "detail", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -1622,6 +2093,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use this style for caption in visual assets such as image and video and for small text elements, such as secondary metadata, caveats, or footnotes.", + "attributes": { + "item": "use-case", + "subitem": "detail", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -1638,6 +2114,11 @@ export default { "originalValue": "{o3.font.size-metric2.negative-1}", "type": "dimension", "description": "Use this style for caption in visual assets such as image and video and for small text elements, such as secondary metadata, caveats, or footnotes.", + "attributes": { + "item": "use-case", + "subitem": "detail", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -1654,6 +2135,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.negative-1}", "type": "number", "description": "Use this style for caption in visual assets such as image and video and for small text elements, such as secondary metadata, caveats, or footnotes.", + "attributes": { + "item": "use-case", + "subitem": "detail", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -1670,6 +2156,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use this style for labels such as badges and metadata in teasers and toppers (e.g., \"Live,\" \"Premium,\" or the main timestamp). Avoid using full sentences.", + "attributes": { + "item": "use-case", + "subitem": "label", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -1686,6 +2177,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use this style for labels such as badges and metadata in teasers and toppers (e.g., \"Live,\" \"Premium,\" or the main timestamp). Avoid using full sentences.", + "attributes": { + "item": "use-case", + "subitem": "label", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -1702,6 +2198,11 @@ export default { "originalValue": "{o3.font.size-metric2.negative-1}", "type": "dimension", "description": "Use this style for labels such as badges and metadata in teasers and toppers (e.g., \"Live,\" \"Premium,\" or the main timestamp). Avoid using full sentences.", + "attributes": { + "item": "use-case", + "subitem": "label", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -1718,6 +2219,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.negative-1}", "type": "number", "description": "Use this style for labels such as badges and metadata in teasers and toppers (e.g., \"Live,\" \"Premium,\" or the main timestamp). Avoid using full sentences.", + "attributes": { + "item": "use-case", + "subitem": "label", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -1734,6 +2240,11 @@ export default { "originalValue": "uppercase", "type": "textCase", "description": "Use this style for labels such as badges and metadata in teasers and toppers (e.g., \"Live,\" \"Premium,\" or the main timestamp). Avoid using full sentences.", + "attributes": { + "item": "use-case", + "subitem": "label", + "state": "textCase" + }, "path": [ "o3", "typography", @@ -1750,6 +2261,11 @@ export default { "originalValue": "{o3.font.family.financier-text}", "type": "fontFamily", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-base", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -1766,6 +2282,11 @@ export default { "originalValue": "1", "type": "fontWeight", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-base", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -1782,6 +2303,11 @@ export default { "originalValue": "{o3.font.size.3}", "type": "dimension", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-base", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -1798,6 +2324,11 @@ export default { "originalValue": "{o3.font.lineheight.4}", "type": "number", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-base", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -1814,6 +2345,11 @@ export default { "originalValue": "{o3.font.family.financier-text}", "type": "fontFamily", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-highlight", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -1830,6 +2366,11 @@ export default { "originalValue": "{o3.font.size.3}", "type": "dimension", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-highlight", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -1846,6 +2387,11 @@ export default { "originalValue": "{o3.font.lineheight.4}", "type": "number", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-highlight", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -1862,6 +2408,11 @@ export default { "originalValue": "600", "type": "fontWeight", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-highlight", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -1878,6 +2429,11 @@ export default { "originalValue": "{o3.font.family.financier-text}", "type": "fontFamily", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-emphasis", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -1894,6 +2450,11 @@ export default { "originalValue": "1", "type": "fontWeight", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-emphasis", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -1910,6 +2471,11 @@ export default { "originalValue": "{o3.font.size.3}", "type": "dimension", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-emphasis", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -1926,6 +2492,11 @@ export default { "originalValue": "{o3.font.lineheight.4}", "type": "number", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-emphasis", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -1942,6 +2513,11 @@ export default { "originalValue": "{o3.font.family.financier-text}", "type": "fontFamily", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-link", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -1958,6 +2534,11 @@ export default { "originalValue": "1", "type": "fontWeight", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-link", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -1974,6 +2555,11 @@ export default { "originalValue": "{o3.font.size.3}", "type": "dimension", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-link", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -1990,6 +2576,11 @@ export default { "originalValue": "{o3.font.lineheight.4}", "type": "number", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-link", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2005,6 +2596,10 @@ export default { "value": "metric 2 VF", "originalValue": "metric 2 VF", "type": "fontFamily", + "attributes": { + "item": "family", + "subitem": "metric" + }, "path": [ "o3", "font", @@ -2019,6 +2614,10 @@ export default { "value": "financier display VF", "originalValue": "financier display VF", "type": "fontFamily", + "attributes": { + "item": "family", + "subitem": "financier-display" + }, "path": [ "o3", "font", @@ -2033,6 +2632,10 @@ export default { "value": "financier text VF", "originalValue": "financier text VF", "type": "fontFamily", + "attributes": { + "item": "family", + "subitem": "financier-text" + }, "path": [ "o3", "font", @@ -2047,6 +2650,10 @@ export default { "value": "georgia", "originalValue": "georgia", "type": "fontFamily", + "attributes": { + "item": "family", + "subitem": "georgia" + }, "path": [ "o3", "font", @@ -2061,6 +2668,10 @@ export default { "value": "300", "originalValue": "300", "type": "fontWeight", + "attributes": { + "item": "weight", + "subitem": "light" + }, "path": [ "o3", "font", @@ -2075,6 +2686,10 @@ export default { "value": "400", "originalValue": "400", "type": "fontWeight", + "attributes": { + "item": "weight", + "subitem": "regular" + }, "path": [ "o3", "font", @@ -2089,6 +2704,10 @@ export default { "value": "500", "originalValue": "500", "type": "fontWeight", + "attributes": { + "item": "weight", + "subitem": "medium" + }, "path": [ "o3", "font", @@ -2103,6 +2722,10 @@ export default { "value": "700", "originalValue": "700", "type": "fontWeight", + "attributes": { + "item": "weight", + "subitem": "semibold" + }, "path": [ "o3", "font", @@ -2117,6 +2740,10 @@ export default { "value": "800", "originalValue": "800", "type": "fontWeight", + "attributes": { + "item": "weight", + "subitem": "bold" + }, "path": [ "o3", "font", @@ -2131,6 +2758,10 @@ export default { "value": "20px", "originalValue": "20", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "0" + }, "path": [ "o3", "font", @@ -2145,6 +2776,10 @@ export default { "value": "20px", "originalValue": "20", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "1" + }, "path": [ "o3", "font", @@ -2159,6 +2794,10 @@ export default { "value": "24px", "originalValue": "24", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "2" + }, "path": [ "o3", "font", @@ -2173,6 +2812,10 @@ export default { "value": "28px", "originalValue": "28", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "3" + }, "path": [ "o3", "font", @@ -2187,6 +2830,10 @@ export default { "value": "32px", "originalValue": "32", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "4" + }, "path": [ "o3", "font", @@ -2201,6 +2848,10 @@ export default { "value": "32px", "originalValue": "32", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "5" + }, "path": [ "o3", "font", @@ -2215,6 +2866,10 @@ export default { "value": "40px", "originalValue": "40", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "6" + }, "path": [ "o3", "font", @@ -2229,6 +2884,10 @@ export default { "value": "48px", "originalValue": "48", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "7" + }, "path": [ "o3", "font", @@ -2243,6 +2902,10 @@ export default { "value": "56px", "originalValue": "56", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "8" + }, "path": [ "o3", "font", @@ -2257,6 +2920,10 @@ export default { "value": "72px", "originalValue": "72", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "9" + }, "path": [ "o3", "font", @@ -2271,6 +2938,10 @@ export default { "value": "84px", "originalValue": "84", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "10" + }, "path": [ "o3", "font", @@ -2285,6 +2956,10 @@ export default { "value": "16px", "originalValue": "16", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "negative-2" + }, "path": [ "o3", "font", @@ -2299,6 +2974,10 @@ export default { "value": "16px", "originalValue": "16", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "negative-1" + }, "path": [ "o3", "font", @@ -2313,6 +2992,10 @@ export default { "value": "16px", "originalValue": "16", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "0" + }, "path": [ "o3", "font", @@ -2327,6 +3010,10 @@ export default { "value": "18px", "originalValue": "18", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "1" + }, "path": [ "o3", "font", @@ -2341,6 +3028,10 @@ export default { "value": "20px", "originalValue": "20", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "2" + }, "path": [ "o3", "font", @@ -2355,6 +3046,10 @@ export default { "value": "24px", "originalValue": "24", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "3" + }, "path": [ "o3", "font", @@ -2369,6 +3064,10 @@ export default { "value": "28px", "originalValue": "28", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "4" + }, "path": [ "o3", "font", @@ -2383,6 +3082,10 @@ export default { "value": "32px", "originalValue": "32", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "5" + }, "path": [ "o3", "font", @@ -2397,6 +3100,10 @@ export default { "value": "40px", "originalValue": "40", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "6" + }, "path": [ "o3", "font", @@ -2411,6 +3118,10 @@ export default { "value": "48px", "originalValue": "48", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "7" + }, "path": [ "o3", "font", @@ -2425,6 +3136,10 @@ export default { "value": "56px", "originalValue": "56", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "8" + }, "path": [ "o3", "font", @@ -2439,6 +3154,10 @@ export default { "value": "72px", "originalValue": "72", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "9" + }, "path": [ "o3", "font", @@ -2453,6 +3172,10 @@ export default { "value": "84px", "originalValue": "84", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "10" + }, "path": [ "o3", "font", @@ -2467,6 +3190,10 @@ export default { "value": "12px", "originalValue": "12", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "negative-2" + }, "path": [ "o3", "font", @@ -2481,6 +3208,10 @@ export default { "value": "14px", "originalValue": "14", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "negative-1" + }, "path": [ "o3", "font", @@ -2495,6 +3226,10 @@ export default { "value": "24px", "originalValue": "24", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "0" + }, "path": [ "o3", "font", @@ -2509,6 +3244,10 @@ export default { "value": "24px", "originalValue": "24", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "1" + }, "path": [ "o3", "font", @@ -2523,6 +3262,10 @@ export default { "value": "28px", "originalValue": "28", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "2" + }, "path": [ "o3", "font", @@ -2537,6 +3280,10 @@ export default { "value": "32px", "originalValue": "32", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "3" + }, "path": [ "o3", "font", @@ -2551,6 +3298,10 @@ export default { "value": "32px", "originalValue": "32", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "4" + }, "path": [ "o3", "font", @@ -2565,6 +3316,10 @@ export default { "value": "40px", "originalValue": "40", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "5" + }, "path": [ "o3", "font", @@ -2579,6 +3334,10 @@ export default { "value": "48px", "originalValue": "48", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "6" + }, "path": [ "o3", "font", @@ -2593,6 +3352,10 @@ export default { "value": "56px", "originalValue": "56", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "7" + }, "path": [ "o3", "font", @@ -2607,6 +3370,10 @@ export default { "value": "72px", "originalValue": "72", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "8" + }, "path": [ "o3", "font", @@ -2621,6 +3388,10 @@ export default { "value": "84px", "originalValue": "84", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "9" + }, "path": [ "o3", "font", @@ -2635,6 +3406,10 @@ export default { "value": "16px", "originalValue": "16", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "negative-3" + }, "path": [ "o3", "font", @@ -2649,6 +3424,10 @@ export default { "value": "16px", "originalValue": "16", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "negative-2" + }, "path": [ "o3", "font", @@ -2663,6 +3442,10 @@ export default { "value": "20px", "originalValue": "20", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "negative-1" + }, "path": [ "o3", "font", @@ -2677,6 +3460,10 @@ export default { "value": "16px", "originalValue": "16", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "0" + }, "path": [ "o3", "font", @@ -2691,6 +3478,10 @@ export default { "value": "18px", "originalValue": "18", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "1" + }, "path": [ "o3", "font", @@ -2705,6 +3496,10 @@ export default { "value": "20px", "originalValue": "20", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "2" + }, "path": [ "o3", "font", @@ -2719,6 +3514,10 @@ export default { "value": "24px", "originalValue": "24", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "3" + }, "path": [ "o3", "font", @@ -2733,6 +3532,10 @@ export default { "value": "28px", "originalValue": "28", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "4" + }, "path": [ "o3", "font", @@ -2747,6 +3550,10 @@ export default { "value": "32px", "originalValue": "32", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "5" + }, "path": [ "o3", "font", @@ -2761,6 +3568,10 @@ export default { "value": "40px", "originalValue": "40", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "6" + }, "path": [ "o3", "font", @@ -2775,6 +3586,10 @@ export default { "value": "48px", "originalValue": "48", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "7" + }, "path": [ "o3", "font", @@ -2789,6 +3604,10 @@ export default { "value": "64px", "originalValue": "64", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "8" + }, "path": [ "o3", "font", @@ -2803,6 +3622,10 @@ export default { "value": "72px", "originalValue": "72", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "9" + }, "path": [ "o3", "font", @@ -2817,6 +3640,10 @@ export default { "value": "10px", "originalValue": "10", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "negative-3" + }, "path": [ "o3", "font", @@ -2831,6 +3658,10 @@ export default { "value": "12px", "originalValue": "12", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "negative-2" + }, "path": [ "o3", "font", @@ -2845,6 +3676,10 @@ export default { "value": "14px", "originalValue": "14", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "negative-1" + }, "path": [ "o3", "font", @@ -2873,6 +3708,11 @@ export default { "offsetY": "0" }, "type": "shadow", + "attributes": { + "item": "use-case", + "subitem": "ring", + "state": "inner" + }, "path": [ "o3", "focus", @@ -2902,6 +3742,11 @@ export default { "offsetY": "0" }, "type": "shadow", + "attributes": { + "item": "use-case", + "subitem": "ring", + "state": "outer" + }, "path": [ "o3", "focus", @@ -2931,6 +3776,11 @@ export default { "offsetY": "0" }, "type": "shadow", + "attributes": { + "item": "use-case", + "subitem": "ring", + "state": "inverse" + }, "path": [ "o3", "focus", @@ -2961,6 +3811,11 @@ export default { "offsetY": "0" }, "type": "shadow", + "attributes": { + "item": "use-case", + "subitem": "ring", + "state": "inverse" + }, "path": [ "o3", "focus", @@ -2991,6 +3846,11 @@ export default { "offsetY": "0" }, "type": "shadow", + "attributes": { + "item": "use-case", + "subitem": "outline", + "state": "color" + }, "path": [ "o3", "focus", @@ -3020,6 +3880,11 @@ export default { "offsetY": "0" }, "type": "shadow", + "attributes": { + "item": "use-case", + "subitem": "outline", + "state": "inverse" + }, "path": [ "o3", "focus", diff --git a/libraries/o3-tooling-token/build/whitelabel/_variables.js b/libraries/o3-tooling-token/build/whitelabel/_variables.js index c3981e5b18..0ece5001f3 100644 --- a/libraries/o3-tooling-token/build/whitelabel/_variables.js +++ b/libraries/o3-tooling-token/build/whitelabel/_variables.js @@ -4,6 +4,9 @@ export default { "value": "4px", "originalValue": "4", "type": "dimension", + "attributes": { + "item": "1" + }, "path": [ "o3", "border-radius", @@ -17,6 +20,9 @@ export default { "value": "6px", "originalValue": "6", "type": "dimension", + "attributes": { + "item": "2" + }, "path": [ "o3", "border-radius", @@ -30,6 +36,10 @@ export default { "value": "metric 2 VF", "originalValue": "metric 2 VF", "type": "fontFamily", + "attributes": { + "item": "family", + "subitem": "metric" + }, "path": [ "o3", "font", @@ -44,6 +54,10 @@ export default { "value": "financier display VF", "originalValue": "financier display VF", "type": "fontFamily", + "attributes": { + "item": "family", + "subitem": "financier-display" + }, "path": [ "o3", "font", @@ -58,6 +72,10 @@ export default { "value": "georgia", "originalValue": "georgia", "type": "fontFamily", + "attributes": { + "item": "family", + "subitem": "georgia" + }, "path": [ "o3", "font", @@ -72,6 +90,10 @@ export default { "value": "300", "originalValue": "300", "type": "fontWeight", + "attributes": { + "item": "weight", + "subitem": "light" + }, "path": [ "o3", "font", @@ -86,6 +108,10 @@ export default { "value": "400", "originalValue": "400", "type": "fontWeight", + "attributes": { + "item": "weight", + "subitem": "regular" + }, "path": [ "o3", "font", @@ -100,6 +126,10 @@ export default { "value": "500", "originalValue": "500", "type": "fontWeight", + "attributes": { + "item": "weight", + "subitem": "medium" + }, "path": [ "o3", "font", @@ -114,6 +144,10 @@ export default { "value": "700", "originalValue": "700", "type": "fontWeight", + "attributes": { + "item": "weight", + "subitem": "semibold" + }, "path": [ "o3", "font", @@ -128,6 +162,10 @@ export default { "value": "800", "originalValue": "800", "type": "fontWeight", + "attributes": { + "item": "weight", + "subitem": "bold" + }, "path": [ "o3", "font", @@ -142,6 +180,10 @@ export default { "value": "20px", "originalValue": "20", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "0" + }, "path": [ "o3", "font", @@ -156,6 +198,10 @@ export default { "value": "20px", "originalValue": "20", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "1" + }, "path": [ "o3", "font", @@ -170,6 +216,10 @@ export default { "value": "24px", "originalValue": "24", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "2" + }, "path": [ "o3", "font", @@ -184,6 +234,10 @@ export default { "value": "28px", "originalValue": "28", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "3" + }, "path": [ "o3", "font", @@ -198,6 +252,10 @@ export default { "value": "32px", "originalValue": "32", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "4" + }, "path": [ "o3", "font", @@ -212,6 +270,10 @@ export default { "value": "32px", "originalValue": "32", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "5" + }, "path": [ "o3", "font", @@ -226,6 +288,10 @@ export default { "value": "40px", "originalValue": "40", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "6" + }, "path": [ "o3", "font", @@ -240,6 +306,10 @@ export default { "value": "48px", "originalValue": "48", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "7" + }, "path": [ "o3", "font", @@ -254,6 +324,10 @@ export default { "value": "56px", "originalValue": "56", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "8" + }, "path": [ "o3", "font", @@ -268,6 +342,10 @@ export default { "value": "72px", "originalValue": "72", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "9" + }, "path": [ "o3", "font", @@ -282,6 +360,10 @@ export default { "value": "84px", "originalValue": "84", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "10" + }, "path": [ "o3", "font", @@ -296,6 +378,10 @@ export default { "value": "16px", "originalValue": "16", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "negative-2" + }, "path": [ "o3", "font", @@ -310,6 +396,10 @@ export default { "value": "16px", "originalValue": "16", "type": "lineHeights", + "attributes": { + "item": "lineheight", + "subitem": "negative-1" + }, "path": [ "o3", "font", @@ -324,6 +414,10 @@ export default { "value": "16px", "originalValue": "16", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "0" + }, "path": [ "o3", "font", @@ -338,6 +432,10 @@ export default { "value": "18px", "originalValue": "18", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "1" + }, "path": [ "o3", "font", @@ -352,6 +450,10 @@ export default { "value": "20px", "originalValue": "20", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "2" + }, "path": [ "o3", "font", @@ -366,6 +468,10 @@ export default { "value": "24px", "originalValue": "24", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "3" + }, "path": [ "o3", "font", @@ -380,6 +486,10 @@ export default { "value": "28px", "originalValue": "28", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "4" + }, "path": [ "o3", "font", @@ -394,6 +504,10 @@ export default { "value": "32px", "originalValue": "32", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "5" + }, "path": [ "o3", "font", @@ -408,6 +522,10 @@ export default { "value": "40px", "originalValue": "40", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "6" + }, "path": [ "o3", "font", @@ -422,6 +540,10 @@ export default { "value": "48px", "originalValue": "48", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "7" + }, "path": [ "o3", "font", @@ -436,6 +558,10 @@ export default { "value": "56px", "originalValue": "56", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "8" + }, "path": [ "o3", "font", @@ -450,6 +576,10 @@ export default { "value": "72px", "originalValue": "72", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "9" + }, "path": [ "o3", "font", @@ -464,6 +594,10 @@ export default { "value": "84px", "originalValue": "84", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "10" + }, "path": [ "o3", "font", @@ -478,6 +612,10 @@ export default { "value": "12px", "originalValue": "12", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "negative-2" + }, "path": [ "o3", "font", @@ -492,6 +630,10 @@ export default { "value": "14px", "originalValue": "14", "type": "fontSize", + "attributes": { + "item": "size", + "subitem": "negative-1" + }, "path": [ "o3", "font", @@ -506,6 +648,10 @@ export default { "value": "24px", "originalValue": "24", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "0" + }, "path": [ "o3", "font", @@ -520,6 +666,10 @@ export default { "value": "24px", "originalValue": "24", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "1" + }, "path": [ "o3", "font", @@ -534,6 +684,10 @@ export default { "value": "28px", "originalValue": "28", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "2" + }, "path": [ "o3", "font", @@ -548,6 +702,10 @@ export default { "value": "32px", "originalValue": "32", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "3" + }, "path": [ "o3", "font", @@ -562,6 +720,10 @@ export default { "value": "32px", "originalValue": "32", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "4" + }, "path": [ "o3", "font", @@ -576,6 +738,10 @@ export default { "value": "40px", "originalValue": "40", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "5" + }, "path": [ "o3", "font", @@ -590,6 +756,10 @@ export default { "value": "48px", "originalValue": "48", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "6" + }, "path": [ "o3", "font", @@ -604,6 +774,10 @@ export default { "value": "56px", "originalValue": "56", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "7" + }, "path": [ "o3", "font", @@ -618,6 +792,10 @@ export default { "value": "72px", "originalValue": "72", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "8" + }, "path": [ "o3", "font", @@ -632,6 +810,10 @@ export default { "value": "84px", "originalValue": "84", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "9" + }, "path": [ "o3", "font", @@ -646,6 +828,10 @@ export default { "value": "16px", "originalValue": "16", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "negative-3" + }, "path": [ "o3", "font", @@ -660,6 +846,10 @@ export default { "value": "16px", "originalValue": "16", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "negative-2" + }, "path": [ "o3", "font", @@ -674,6 +864,10 @@ export default { "value": "20px", "originalValue": "20", "type": "lineHeights", + "attributes": { + "item": "lineheight-metric2", + "subitem": "negative-1" + }, "path": [ "o3", "font", @@ -688,6 +882,10 @@ export default { "value": "16px", "originalValue": "16", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "0" + }, "path": [ "o3", "font", @@ -702,6 +900,10 @@ export default { "value": "18px", "originalValue": "18", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "1" + }, "path": [ "o3", "font", @@ -716,6 +918,10 @@ export default { "value": "20px", "originalValue": "20", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "2" + }, "path": [ "o3", "font", @@ -730,6 +936,10 @@ export default { "value": "24px", "originalValue": "24", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "3" + }, "path": [ "o3", "font", @@ -744,6 +954,10 @@ export default { "value": "28px", "originalValue": "28", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "4" + }, "path": [ "o3", "font", @@ -758,6 +972,10 @@ export default { "value": "32px", "originalValue": "32", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "5" + }, "path": [ "o3", "font", @@ -772,6 +990,10 @@ export default { "value": "40px", "originalValue": "40", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "6" + }, "path": [ "o3", "font", @@ -786,6 +1008,10 @@ export default { "value": "48px", "originalValue": "48", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "7" + }, "path": [ "o3", "font", @@ -800,6 +1026,10 @@ export default { "value": "64px", "originalValue": "64", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "8" + }, "path": [ "o3", "font", @@ -814,6 +1044,10 @@ export default { "value": "72px", "originalValue": "72", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "9" + }, "path": [ "o3", "font", @@ -828,6 +1062,10 @@ export default { "value": "10px", "originalValue": "10", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "negative-3" + }, "path": [ "o3", "font", @@ -842,6 +1080,10 @@ export default { "value": "12px", "originalValue": "12", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "negative-2" + }, "path": [ "o3", "font", @@ -856,6 +1098,10 @@ export default { "value": "14px", "originalValue": "14", "type": "fontSize", + "attributes": { + "item": "size-metric2", + "subitem": "negative-1" + }, "path": [ "o3", "font", @@ -884,6 +1130,11 @@ export default { "offsetY": "0" }, "type": "shadow", + "attributes": { + "item": "use-case", + "subitem": "ring", + "state": "inner" + }, "path": [ "o3", "focus", @@ -913,6 +1164,11 @@ export default { "offsetY": "0" }, "type": "shadow", + "attributes": { + "item": "use-case", + "subitem": "ring", + "state": "outer" + }, "path": [ "o3", "focus", @@ -942,6 +1198,11 @@ export default { "offsetY": "0" }, "type": "shadow", + "attributes": { + "item": "use-case", + "subitem": "ring", + "state": "inverse" + }, "path": [ "o3", "focus", @@ -972,6 +1233,11 @@ export default { "offsetY": "0" }, "type": "shadow", + "attributes": { + "item": "use-case", + "subitem": "ring", + "state": "inverse" + }, "path": [ "o3", "focus", @@ -1002,6 +1268,11 @@ export default { "offsetY": "0" }, "type": "shadow", + "attributes": { + "item": "use-case", + "subitem": "outline", + "state": "color" + }, "path": [ "o3", "focus", @@ -1031,6 +1302,11 @@ export default { "offsetY": "0" }, "type": "shadow", + "attributes": { + "item": "use-case", + "subitem": "outline", + "state": "inverse" + }, "path": [ "o3", "focus", @@ -1047,6 +1323,10 @@ export default { "value": "#000000", "originalValue": "#000", "type": "color", + "attributes": { + "item": "palette", + "subitem": "black" + }, "path": [ "o3", "color", @@ -1061,6 +1341,10 @@ export default { "value": "#ffffff", "originalValue": "#fff", "type": "color", + "attributes": { + "item": "palette", + "subitem": "white" + }, "path": [ "o3", "color", @@ -1075,6 +1359,10 @@ export default { "value": "#00994d", "originalValue": "#00994d", "type": "color", + "attributes": { + "item": "palette", + "subitem": "jade" + }, "path": [ "o3", "color", @@ -1089,6 +1377,10 @@ export default { "value": "#cc0000", "originalValue": "#c00", "type": "color", + "attributes": { + "item": "palette", + "subitem": "crimson" + }, "path": [ "o3", "color", @@ -1103,6 +1395,10 @@ export default { "value": "#f2f2f2", "originalValue": "#F2F2F2", "type": "color", + "attributes": { + "item": "palette", + "subitem": "black-5" + }, "path": [ "o3", "color", @@ -1121,6 +1417,10 @@ export default { "value": "#e6e6e6", "originalValue": "#E6E6E6", "type": "color", + "attributes": { + "item": "palette", + "subitem": "black-10" + }, "path": [ "o3", "color", @@ -1139,6 +1439,10 @@ export default { "value": "#cccccc", "originalValue": "#ccc", "type": "color", + "attributes": { + "item": "palette", + "subitem": "black-20" + }, "path": [ "o3", "color", @@ -1157,6 +1461,10 @@ export default { "value": "#b3b3b3", "originalValue": "#B3B3B3", "type": "color", + "attributes": { + "item": "palette", + "subitem": "black-30" + }, "path": [ "o3", "color", @@ -1175,6 +1483,10 @@ export default { "value": "#999999", "originalValue": "#999", "type": "color", + "attributes": { + "item": "palette", + "subitem": "black-40" + }, "path": [ "o3", "color", @@ -1193,6 +1505,10 @@ export default { "value": "#808080", "originalValue": "#808080", "type": "color", + "attributes": { + "item": "palette", + "subitem": "black-50" + }, "path": [ "o3", "color", @@ -1211,6 +1527,10 @@ export default { "value": "#666666", "originalValue": "#666", "type": "color", + "attributes": { + "item": "palette", + "subitem": "black-60" + }, "path": [ "o3", "color", @@ -1229,6 +1549,10 @@ export default { "value": "#4d4d4d", "originalValue": "#4d4d4d", "type": "color", + "attributes": { + "item": "palette", + "subitem": "black-70" + }, "path": [ "o3", "color", @@ -1247,6 +1571,10 @@ export default { "value": "#333333", "originalValue": "#333", "type": "color", + "attributes": { + "item": "palette", + "subitem": "black-80" + }, "path": [ "o3", "color", @@ -1265,6 +1593,10 @@ export default { "value": "#1a1a1a", "originalValue": "#1a1a1a", "type": "color", + "attributes": { + "item": "palette", + "subitem": "black-90" + }, "path": [ "o3", "color", @@ -1284,6 +1616,11 @@ export default { "originalValue": "#757575", "type": "color", "description": "", + "attributes": { + "item": "use-case", + "subitem": "link", + "state": "text" + }, "path": [ "o3", "color", @@ -1300,6 +1637,11 @@ export default { "value": "#666666", "originalValue": "{o3.color.palette.black-60}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link", + "state": "text" + }, "path": [ "o3", "color", @@ -1316,6 +1658,11 @@ export default { "value": "#b3b3b3", "originalValue": "{o3.color.palette.black-30}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link", + "state": "underline" + }, "path": [ "o3", "color", @@ -1332,6 +1679,11 @@ export default { "value": "#4d4d4d", "originalValue": "{o3.color.palette.black-70}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link", + "state": "underline" + }, "path": [ "o3", "color", @@ -1348,6 +1700,11 @@ export default { "value": "#ffffff", "originalValue": "{o3.color.palette.white}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link-inverse", + "state": "text" + }, "path": [ "o3", "color", @@ -1364,6 +1721,11 @@ export default { "value": "#cccccc", "originalValue": "{o3.color.palette.black-20}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link-inverse", + "state": "text" + }, "path": [ "o3", "color", @@ -1380,6 +1742,11 @@ export default { "value": "#ffffff", "originalValue": "{o3.color.palette.white}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link-inverse", + "state": "underline" + }, "path": [ "o3", "color", @@ -1396,6 +1763,11 @@ export default { "value": "#cccccc", "originalValue": "{o3.color.palette.black-20}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "link-inverse", + "state": "underline" + }, "path": [ "o3", "color", @@ -1412,6 +1784,11 @@ export default { "value": "#ffffff", "originalValue": "{o3.color.palette.white}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "page", + "state": "background" + }, "path": [ "o3", "color", @@ -1427,6 +1804,11 @@ export default { "value": "#333333", "originalValue": "{o3.color.palette.black-80}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "page-inverse", + "state": "background" + }, "path": [ "o3", "color", @@ -1442,6 +1824,11 @@ export default { "value": "#333333", "originalValue": "{o3.color.palette.black-80}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "body", + "state": "text" + }, "path": [ "o3", "color", @@ -1457,6 +1844,11 @@ export default { "value": "#ffffff", "originalValue": "{o3.color.palette.white}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "body-inverse", + "state": "text" + }, "path": [ "o3", "color", @@ -1473,6 +1865,11 @@ export default { "originalValue": "#757575", "type": "color", "description": "\"Muted\" text is less prominent, for example credits and captions.", + "attributes": { + "item": "use-case", + "subitem": "muted", + "state": "text" + }, "path": [ "o3", "color", @@ -1488,6 +1885,11 @@ export default { "value": "#cccccc", "originalValue": "{o3.color.palette.black-20}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "muted-inverse", + "state": "text" + }, "path": [ "o3", "color", @@ -1503,6 +1905,11 @@ export default { "value": "#1a1a1a", "originalValue": "{o3.color.palette.black-90}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "heading", + "state": "text" + }, "path": [ "o3", "color", @@ -1518,6 +1925,11 @@ export default { "value": "#ffffff", "originalValue": "{o3.color.palette.white}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "heading-inverse", + "state": "text" + }, "path": [ "o3", "color", @@ -1533,6 +1945,11 @@ export default { "value": "#ffffff", "originalValue": "{o3.color.palette.white}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "button", + "state": "foreground" + }, "path": [ "o3", "color", @@ -1548,6 +1965,11 @@ export default { "value": "#ffffff", "originalValue": "{o3.color.palette.white}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "button", + "state": "foreground-disabled" + }, "path": [ "o3", "color", @@ -1563,6 +1985,11 @@ export default { "value": "#1a1a1a", "originalValue": "{o3.color.palette.black-90}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "button", + "state": "default" + }, "path": [ "o3", "color", @@ -1578,6 +2005,11 @@ export default { "value": "#333333", "originalValue": "{o3.color.palette.black-80}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "button", + "state": "hover" + }, "path": [ "o3", "color", @@ -1593,6 +2025,11 @@ export default { "value": "#4d4d4d", "originalValue": "{o3.color.palette.black-70}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "button", + "state": "pressed" + }, "path": [ "o3", "color", @@ -1608,6 +2045,11 @@ export default { "value": "#cccccc", "originalValue": "{o3.color.palette.black-20}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "button", + "state": "disabled" + }, "path": [ "o3", "color", @@ -1623,6 +2065,10 @@ export default { "value": "#cc0000", "originalValue": "rgba(204,0,0,0.06)", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "error-background" + }, "path": [ "o3", "color", @@ -1637,6 +2083,10 @@ export default { "value": "#cc0000", "originalValue": "{o3.color.palette.crimson}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "error-text" + }, "path": [ "o3", "color", @@ -1651,6 +2101,10 @@ export default { "value": "#cc0000", "originalValue": "{o3.color.palette.crimson}", "type": "color", + "attributes": { + "item": "use-case", + "subitem": "error" + }, "path": [ "o3", "color", @@ -1665,6 +2119,9 @@ export default { "value": "4px", "originalValue": "4px", "type": "dimension", + "attributes": { + "item": "5xs" + }, "path": [ "o3", "spacing", @@ -1678,6 +2135,9 @@ export default { "value": "8px", "originalValue": "8px", "type": "dimension", + "attributes": { + "item": "4xs" + }, "path": [ "o3", "spacing", @@ -1691,6 +2151,9 @@ export default { "value": "12px", "originalValue": "12px", "type": "dimension", + "attributes": { + "item": "3xs" + }, "path": [ "o3", "spacing", @@ -1704,6 +2167,9 @@ export default { "value": "16px", "originalValue": "16px", "type": "dimension", + "attributes": { + "item": "2xs" + }, "path": [ "o3", "spacing", @@ -1717,6 +2183,9 @@ export default { "value": "20px", "originalValue": "20px", "type": "dimension", + "attributes": { + "item": "xs" + }, "path": [ "o3", "spacing", @@ -1730,6 +2199,9 @@ export default { "value": "24px", "originalValue": "24px", "type": "dimension", + "attributes": { + "item": "s" + }, "path": [ "o3", "spacing", @@ -1743,6 +2215,9 @@ export default { "value": "32px", "originalValue": "32px", "type": "dimension", + "attributes": { + "item": "m" + }, "path": [ "o3", "spacing", @@ -1756,6 +2231,9 @@ export default { "value": "40px", "originalValue": "40px", "type": "dimension", + "attributes": { + "item": "l" + }, "path": [ "o3", "spacing", @@ -1769,6 +2247,9 @@ export default { "value": "48px", "originalValue": "48px", "type": "dimension", + "attributes": { + "item": "xl" + }, "path": [ "o3", "spacing", @@ -1782,6 +2263,9 @@ export default { "value": "64px", "originalValue": "64px", "type": "dimension", + "attributes": { + "item": "2xl" + }, "path": [ "o3", "spacing", @@ -1795,6 +2279,9 @@ export default { "value": "80px", "originalValue": "80px", "type": "dimension", + "attributes": { + "item": "3xl" + }, "path": [ "o3", "spacing", @@ -1808,6 +2295,9 @@ export default { "value": "96px", "originalValue": "96px", "type": "dimension", + "attributes": { + "item": "4xl" + }, "path": [ "o3", "spacing", @@ -1822,6 +2312,11 @@ export default { "originalValue": "{o3.font.family.financier-display}", "type": "fontFamily", "description": "Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-lg", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -1838,6 +2333,11 @@ export default { "originalValue": "{o3.font.weight.bold}", "type": "fontWeight", "description": "Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-lg", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -1854,6 +2354,11 @@ export default { "originalValue": "{o3.font.size.7}", "type": "dimension", "description": "Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-lg", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -1870,6 +2375,11 @@ export default { "originalValue": "{o3.font.lineheight.7}", "type": "number", "description": "Use this style for large screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-lg", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -1886,6 +2396,11 @@ export default { "originalValue": "{o3.font.family.financier-display}", "type": "fontFamily", "description": "Use this style for medium screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-md", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -1902,6 +2417,11 @@ export default { "originalValue": "{o3.font.weight.bold}", "type": "fontWeight", "description": "Use this style for medium screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-md", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -1918,6 +2438,11 @@ export default { "originalValue": "{o3.font.size.6}", "type": "dimension", "description": "Use this style for medium screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-md", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -1934,6 +2459,11 @@ export default { "originalValue": "{o3.font.lineheight.6}", "type": "number", "description": "Use this style for medium screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-md", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -1950,6 +2480,11 @@ export default { "originalValue": "{o3.font.family.financier-display}", "type": "fontFamily", "description": "Use this style for small screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-sm", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -1966,6 +2501,11 @@ export default { "originalValue": "{o3.font.weight.bold}", "type": "fontWeight", "description": "Use this style for small screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-sm", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -1982,6 +2522,11 @@ export default { "originalValue": "{o3.font.size.5}", "type": "dimension", "description": "Use this style for small screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-sm", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -1998,6 +2543,11 @@ export default { "originalValue": "{o3.font.lineheight.5}", "type": "number", "description": "Use this style for small screens headlines in the main headers (toppers) of content pages, for prominent, large teasers or landing pages.", + "attributes": { + "item": "use-case", + "subitem": "display-sm", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2014,6 +2564,11 @@ export default { "originalValue": "{o3.font.family.financier-display}", "type": "fontFamily", "description": "Use this style for large screens headlines in standard-sized teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-lg", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2030,6 +2585,11 @@ export default { "originalValue": "{o3.font.weight.light}", "type": "fontWeight", "description": "Use this style for large screens headlines in standard-sized teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-lg", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2046,6 +2606,11 @@ export default { "originalValue": "{o3.font.size.6}", "type": "dimension", "description": "Use this style for large screens headlines in standard-sized teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-lg", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2062,6 +2627,11 @@ export default { "originalValue": "{o3.font.lineheight.6}", "type": "number", "description": "Use this style for large screens headlines in standard-sized teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-lg", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2078,6 +2648,11 @@ export default { "originalValue": "{o3.font.family.financier-display}", "type": "fontFamily", "description": "Use this style for medium screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-md", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2094,6 +2669,11 @@ export default { "originalValue": "{o3.font.weight.light}", "type": "fontWeight", "description": "Use this style for medium screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-md", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2110,6 +2690,11 @@ export default { "originalValue": "{o3.font.size.5}", "type": "dimension", "description": "Use this style for medium screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-md", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2126,6 +2711,11 @@ export default { "originalValue": "{o3.font.lineheight.5}", "type": "number", "description": "Use this style for medium screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-md", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2142,6 +2732,11 @@ export default { "originalValue": "{o3.font.family.financier-display}", "type": "fontFamily", "description": "Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-sm", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2158,6 +2753,11 @@ export default { "originalValue": "{o3.font.weight.light}", "type": "fontWeight", "description": "Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-sm", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2174,6 +2774,11 @@ export default { "originalValue": "{o3.font.size.4}", "type": "dimension", "description": "Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-sm", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2190,6 +2795,11 @@ export default { "originalValue": "{o3.font.lineheight.4}", "type": "number", "description": "Use this style for small screens headlines in smaller teasers and text only toppers (eg. Opinion and News).", + "attributes": { + "item": "use-case", + "subitem": "headline-sm", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2206,6 +2816,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-lg", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2222,6 +2837,11 @@ export default { "originalValue": "{o3.font.weight.semibold}", "type": "fontWeight", "description": "Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-lg", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2238,6 +2858,11 @@ export default { "originalValue": "{o3.font.size-metric2.4}", "type": "dimension", "description": "Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-lg", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2254,6 +2879,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.3}", "type": "number", "description": "Use for the main page title H1 in functional pages such as account and settings. Use across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-lg", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2270,6 +2900,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use this style as H3 or subtitles within the content body to break paragraphs, or for titles of components like forms, tables and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-md", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2286,6 +2921,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use this style as H3 or subtitles within the content body to break paragraphs, or for titles of components like forms, tables and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-md", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2302,6 +2942,11 @@ export default { "originalValue": "{o3.font.size-metric2.3}", "type": "dimension", "description": "Use this style as H3 or subtitles within the content body to break paragraphs, or for titles of components like forms, tables and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-md", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2318,6 +2963,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.3}", "type": "number", "description": "Use this style as H3 or subtitles within the content body to break paragraphs, or for titles of components like forms, tables and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-md", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2334,6 +2984,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use H6 for subtitles within the content body to break up paragraphs, and H2 for subheadings on stream pages or as subtitles for components such as forms, tables, and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-sm", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2350,6 +3005,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use H6 for subtitles within the content body to break up paragraphs, and H2 for subheadings on stream pages or as subtitles for components such as forms, tables, and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-sm", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2366,6 +3026,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.2}", "type": "number", "description": "Use H6 for subtitles within the content body to break up paragraphs, and H2 for subheadings on stream pages or as subtitles for components such as forms, tables, and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-sm", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2382,6 +3047,11 @@ export default { "originalValue": "{o3.font.size-metric2.2}", "type": "dimension", "description": "Use H6 for subtitles within the content body to break up paragraphs, and H2 for subheadings on stream pages or as subtitles for components such as forms, tables, and cards across all breakpoints.", + "attributes": { + "item": "use-case", + "subitem": "title-sm", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2398,6 +3068,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use primarily for the stand-first (introductory summary or highlight) in topper component, as larger body text in components, or section description.", + "attributes": { + "item": "use-case", + "subitem": "body-lg", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2414,6 +3089,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use primarily for the stand-first (introductory summary or highlight) in topper component, as larger body text in components, or section description.", + "attributes": { + "item": "use-case", + "subitem": "body-lg", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2430,6 +3110,11 @@ export default { "originalValue": "{o3.font.size-metric2.1}", "type": "dimension", "description": "Use primarily for the stand-first (introductory summary or highlight) in topper component, as larger body text in components, or section description.", + "attributes": { + "item": "use-case", + "subitem": "body-lg", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2446,6 +3131,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.1}", "type": "number", "description": "Use primarily for the stand-first (introductory summary or highlight) in topper component, as larger body text in components, or section description.", + "attributes": { + "item": "use-case", + "subitem": "body-lg", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2462,6 +3152,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use this style for the stand-first in teasers and as the default body copy style across components such as location in the byline.", + "attributes": { + "item": "use-case", + "subitem": "body-base", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2478,6 +3173,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use this style for the stand-first in teasers and as the default body copy style across components such as location in the byline.", + "attributes": { + "item": "use-case", + "subitem": "body-base", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2494,6 +3194,11 @@ export default { "originalValue": "{o3.font.size-metric2.0}", "type": "dimension", "description": "Use this style for the stand-first in teasers and as the default body copy style across components such as location in the byline.", + "attributes": { + "item": "use-case", + "subitem": "body-base", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2510,6 +3215,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.0}", "type": "number", "description": "Use this style for the stand-first in teasers and as the default body copy style across components such as location in the byline.", + "attributes": { + "item": "use-case", + "subitem": "body-base", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2526,6 +3236,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use this style for bold formatting in body copy or for small interactive elements, such as Topic tags and Author names.", + "attributes": { + "item": "use-case", + "subitem": "body-highlight", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2542,6 +3257,11 @@ export default { "originalValue": "{o3.font.weight.semibold}", "type": "fontWeight", "description": "Use this style for bold formatting in body copy or for small interactive elements, such as Topic tags and Author names.", + "attributes": { + "item": "use-case", + "subitem": "body-highlight", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2558,6 +3278,11 @@ export default { "originalValue": "{o3.font.size-metric2.0}", "type": "dimension", "description": "Use this style for bold formatting in body copy or for small interactive elements, such as Topic tags and Author names.", + "attributes": { + "item": "use-case", + "subitem": "body-highlight", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2574,6 +3299,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.0}", "type": "number", "description": "Use this style for bold formatting in body copy or for small interactive elements, such as Topic tags and Author names.", + "attributes": { + "item": "use-case", + "subitem": "body-highlight", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2590,6 +3320,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use this style primarily for links in paragraph or as stand alone link.", + "attributes": { + "item": "use-case", + "subitem": "body-link", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2606,6 +3341,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use this style primarily for links in paragraph or as stand alone link.", + "attributes": { + "item": "use-case", + "subitem": "body-link", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2622,6 +3362,11 @@ export default { "originalValue": "{o3.font.size-metric2.0}", "type": "dimension", "description": "Use this style primarily for links in paragraph or as stand alone link.", + "attributes": { + "item": "use-case", + "subitem": "body-link", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2638,6 +3383,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.0}", "type": "number", "description": "Use this style primarily for links in paragraph or as stand alone link.", + "attributes": { + "item": "use-case", + "subitem": "body-link", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2654,6 +3404,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use this style for caption in visual assets such as image and video and for small text elements, such as secondary metadata, caveats, or footnotes.", + "attributes": { + "item": "use-case", + "subitem": "detail", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2670,6 +3425,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use this style for caption in visual assets such as image and video and for small text elements, such as secondary metadata, caveats, or footnotes.", + "attributes": { + "item": "use-case", + "subitem": "detail", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2686,6 +3446,11 @@ export default { "originalValue": "{o3.font.size-metric2.negative-1}", "type": "dimension", "description": "Use this style for caption in visual assets such as image and video and for small text elements, such as secondary metadata, caveats, or footnotes.", + "attributes": { + "item": "use-case", + "subitem": "detail", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2702,6 +3467,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.negative-1}", "type": "number", "description": "Use this style for caption in visual assets such as image and video and for small text elements, such as secondary metadata, caveats, or footnotes.", + "attributes": { + "item": "use-case", + "subitem": "detail", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2718,6 +3488,11 @@ export default { "originalValue": "{o3.font.family.metric}", "type": "fontFamily", "description": "Use this style for labels such as badges and metadata in teasers and toppers (e.g., \"Live,\" \"Premium,\" or the main timestamp). Avoid using full sentences.", + "attributes": { + "item": "use-case", + "subitem": "label", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2734,6 +3509,11 @@ export default { "originalValue": "{o3.font.weight.regular}", "type": "fontWeight", "description": "Use this style for labels such as badges and metadata in teasers and toppers (e.g., \"Live,\" \"Premium,\" or the main timestamp). Avoid using full sentences.", + "attributes": { + "item": "use-case", + "subitem": "label", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2750,6 +3530,11 @@ export default { "originalValue": "{o3.font.size-metric2.negative-1}", "type": "dimension", "description": "Use this style for labels such as badges and metadata in teasers and toppers (e.g., \"Live,\" \"Premium,\" or the main timestamp). Avoid using full sentences.", + "attributes": { + "item": "use-case", + "subitem": "label", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2766,6 +3551,11 @@ export default { "originalValue": "{o3.font.lineheight-metric2.negative-1}", "type": "number", "description": "Use this style for labels such as badges and metadata in teasers and toppers (e.g., \"Live,\" \"Premium,\" or the main timestamp). Avoid using full sentences.", + "attributes": { + "item": "use-case", + "subitem": "label", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2782,6 +3572,11 @@ export default { "originalValue": "uppercase", "type": "textCase", "description": "Use this style for labels such as badges and metadata in teasers and toppers (e.g., \"Live,\" \"Premium,\" or the main timestamp). Avoid using full sentences.", + "attributes": { + "item": "use-case", + "subitem": "label", + "state": "textCase" + }, "path": [ "o3", "typography", @@ -2798,6 +3593,11 @@ export default { "originalValue": "Georgia", "type": "fontFamily", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-base", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2814,6 +3614,11 @@ export default { "originalValue": "Regular", "type": "fontWeight", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-base", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2830,6 +3635,11 @@ export default { "originalValue": "{o3.font.size.2}", "type": "dimension", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-base", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2846,6 +3656,11 @@ export default { "originalValue": "{o3.font.lineheight.4}", "type": "number", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-base", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2862,6 +3677,11 @@ export default { "originalValue": "Georgia", "type": "fontFamily", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-highlight", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2878,6 +3698,11 @@ export default { "originalValue": "Bold", "type": "fontWeight", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-highlight", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2894,6 +3719,11 @@ export default { "originalValue": "{o3.font.size.2}", "type": "dimension", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-highlight", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2910,6 +3740,11 @@ export default { "originalValue": "{o3.font.lineheight.4}", "type": "number", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-highlight", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2926,6 +3761,11 @@ export default { "originalValue": "Georgia", "type": "fontFamily", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-emphasis", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -2942,6 +3782,11 @@ export default { "originalValue": "Regular", "type": "fontWeight", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-emphasis", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -2958,6 +3803,11 @@ export default { "originalValue": "{o3.font.size.2}", "type": "dimension", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-emphasis", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -2974,6 +3824,11 @@ export default { "originalValue": "{o3.font.lineheight.4}", "type": "number", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-emphasis", + "state": "lineHeight" + }, "path": [ "o3", "typography", @@ -2990,6 +3845,11 @@ export default { "originalValue": "italic", "type": "fontStyle", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-emphasis", + "state": "fontStyle" + }, "path": [ "o3", "typography", @@ -3006,6 +3866,11 @@ export default { "originalValue": "Georgia", "type": "fontFamily", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-link", + "state": "fontFamily" + }, "path": [ "o3", "typography", @@ -3022,6 +3887,11 @@ export default { "originalValue": "Regular", "type": "fontWeight", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-link", + "state": "fontWeight" + }, "path": [ "o3", "typography", @@ -3038,6 +3908,11 @@ export default { "originalValue": "{o3.font.size.2}", "type": "dimension", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-link", + "state": "fontSize" + }, "path": [ "o3", "typography", @@ -3054,6 +3929,11 @@ export default { "originalValue": "{o3.font.lineheight.4}", "type": "number", "description": "Use this style only for the body copy of content pages, such as articles, live news and other content experience page.", + "attributes": { + "item": "use-case", + "subitem": "body-content-link", + "state": "lineHeight" + }, "path": [ "o3", "typography", From e1ea5717ed94381c8111c4e09ae832328041d1c6 Mon Sep 17 00:00:00 2001 From: Lee Moody Date: Thu, 9 Jan 2025 18:21:13 +0000 Subject: [PATCH 2/4] chore: Add a utility class for display typography usecases - Ensure the default font family has low specificity with `:where` - Add storybook demos which point to the website. Otherwise we will just be repeating information and doubling work. We may want to revisit this. --- components/o3-foundation/main.css | 2 +- .../src/css/components/Typography/index.css | 4 ++-- .../css/components/Typography/usecases.css | 20 +++++++++++++++++++ .../stories/core/proffesional/usecases.mdx | 16 +++++++++++++++ .../o3-foundation/stories/core/usecases.mdx | 10 ++++++++++ .../stories/internal/usecases.mdx | 16 +++++++++++++++ .../stories/sustainable-views/usecases.mdx | 16 +++++++++++++++ .../stories/whitelabel/usecases.mdx | 16 +++++++++++++++ 8 files changed, 97 insertions(+), 3 deletions(-) create mode 100644 components/o3-foundation/src/css/components/Typography/usecases.css create mode 100644 components/o3-foundation/stories/core/proffesional/usecases.mdx create mode 100644 components/o3-foundation/stories/core/usecases.mdx create mode 100644 components/o3-foundation/stories/internal/usecases.mdx create mode 100644 components/o3-foundation/stories/sustainable-views/usecases.mdx create mode 100644 components/o3-foundation/stories/whitelabel/usecases.mdx diff --git a/components/o3-foundation/main.css b/components/o3-foundation/main.css index 0c4f264dd7..f8142ad416 100644 --- a/components/o3-foundation/main.css +++ b/components/o3-foundation/main.css @@ -4,4 +4,4 @@ @import './src/css/components/z-index.css'; @import './src/css/components/focus.css'; @import './src/css/components/grid.css'; -@import './src/css/components/Typography/index.css'; +@import './src/css/components/typography/index.css'; diff --git a/components/o3-foundation/src/css/components/Typography/index.css b/components/o3-foundation/src/css/components/Typography/index.css index d67a612a87..10eaef3733 100644 --- a/components/o3-foundation/src/css/components/Typography/index.css +++ b/components/o3-foundation/src/css/components/Typography/index.css @@ -4,7 +4,7 @@ @import './list.css'; @import './footer.css'; @import './caption.css'; - +@import './usecases.css'; :root { --o3-typography-max-line-width: 60ch; @@ -18,6 +18,6 @@ font-style: italic; } -[class^='o3-typography'] { +:where([class^='o3-typography']) { font-family: var(--o3-font-family-metric); } diff --git a/components/o3-foundation/src/css/components/Typography/usecases.css b/components/o3-foundation/src/css/components/Typography/usecases.css new file mode 100644 index 0000000000..f2cf9787b3 --- /dev/null +++ b/components/o3-foundation/src/css/components/Typography/usecases.css @@ -0,0 +1,20 @@ +.o3-typography-use-case-display-lg { + font-family: var(--o3-typography-use-case-display-lg-font-family); + font-size: var(--o3-typography-use-case-display-lg-font-size); + line-height: var(--o3-typography-use-case-display-lg-line-height); + font-weight: var(--o3-typography-use-case-display-lg-font-weight); +} + +.o3-typography-use-case-display-md { + font-family: var(--o3-typography-use-case-display-md-font-family); + font-size: var(--o3-typography-use-case-display-md-font-size); + line-height: var(--o3-typography-use-case-display-md-line-height); + font-weight: var(--o3-typography-use-case-display-md-font-weight); +} + +.o3-typography-use-case-display-sm { + font-family: var(--o3-typography-use-case-display-sm-font-family); + font-size: var(--o3-typography-use-case-display-sm-font-size); + line-height: var(--o3-typography-use-case-display-sm-line-height); + font-weight: var(--o3-typography-use-case-display-sm-font-weight); +} diff --git a/components/o3-foundation/stories/core/proffesional/usecases.mdx b/components/o3-foundation/stories/core/proffesional/usecases.mdx new file mode 100644 index 0000000000..c5082ada9b --- /dev/null +++ b/components/o3-foundation/stories/core/proffesional/usecases.mdx @@ -0,0 +1,16 @@ +import { Meta } from '@storybook/blocks'; + + + +# Typography Usescases + +Typography use-cases provide low level typography styles for use in a variety of contexts. + +See our [design guidelines for typography](https://origami-beta.ft.com/professional/guides/typography/) for previews and CSS snippets. +For example: + +- `o3-typography-use-case-display-lg` +- `o3-typography-use-case-display-md` +- `o3-typography-use-case-display-sm` +- [more typography usecases](https://origami-beta.ft.com/professional/guides/typography/) + diff --git a/components/o3-foundation/stories/core/usecases.mdx b/components/o3-foundation/stories/core/usecases.mdx new file mode 100644 index 0000000000..5ca829d5b2 --- /dev/null +++ b/components/o3-foundation/stories/core/usecases.mdx @@ -0,0 +1,10 @@ +import { Meta } from '@storybook/blocks'; + + + +# Typography Usescases + +Typography use-cases provide low level typography styles for use in a variety of contexts. + +See our [design guidelines for typography](https://origami-beta.ft.com/guides/typography/) for previews and CSS snippets. + diff --git a/components/o3-foundation/stories/internal/usecases.mdx b/components/o3-foundation/stories/internal/usecases.mdx new file mode 100644 index 0000000000..e552b40598 --- /dev/null +++ b/components/o3-foundation/stories/internal/usecases.mdx @@ -0,0 +1,16 @@ +import { Meta } from '@storybook/blocks'; + + + +# Typography Usescases + +Typography use-cases provide low level typography styles for use in a variety of contexts. + +See our [design guidelines for typography](https://origami-beta.ft.com/internal/guides/typography/) for previews and CSS snippets. +For example: + +- `o3-typography-use-case-display-lg` +- `o3-typography-use-case-display-md` +- `o3-typography-use-case-display-sm` +- [more typography usecases](https://origami-beta.ft.com/internal/guides/typography/) + diff --git a/components/o3-foundation/stories/sustainable-views/usecases.mdx b/components/o3-foundation/stories/sustainable-views/usecases.mdx new file mode 100644 index 0000000000..fb598adf1a --- /dev/null +++ b/components/o3-foundation/stories/sustainable-views/usecases.mdx @@ -0,0 +1,16 @@ +import { Meta } from '@storybook/blocks'; + + + +# Typography Usescases + +Typography use-cases provide low level typography styles for use in a variety of contexts. + +See our [design guidelines for typography](https://origami-beta.ft.com/sustainable-views/guides/typography/) for previews and CSS snippets. +For example: + +- `o3-typography-use-case-display-lg` +- `o3-typography-use-case-display-md` +- `o3-typography-use-case-display-sm` +- [more typography usecases](https://origami-beta.ft.com/sustainable-views/guides/typography/) + diff --git a/components/o3-foundation/stories/whitelabel/usecases.mdx b/components/o3-foundation/stories/whitelabel/usecases.mdx new file mode 100644 index 0000000000..88e1667ebd --- /dev/null +++ b/components/o3-foundation/stories/whitelabel/usecases.mdx @@ -0,0 +1,16 @@ +import { Meta } from '@storybook/blocks'; + + + +# Typography Usescases + +Typography use-cases provide low level typography styles for use in a variety of contexts. + +See our [design guidelines for typography](https://origami-beta.ft.com/whitelabel/guides/typography/) for previews and CSS snippets. +For example: + +- `o3-typography-use-case-display-lg` +- `o3-typography-use-case-display-md` +- `o3-typography-use-case-display-sm` +- [more typography usecases](https://origami-beta.ft.com/whitelabel/guides/typography/) + From 7ec5128f47414c7144de7cf434ff15db72c918c7 Mon Sep 17 00:00:00 2001 From: Lee Moody Date: Thu, 9 Jan 2025 18:23:50 +0000 Subject: [PATCH 3/4] chore: Refactor the Preview component A new PreviewPane component is responsible for the UI of the preview interface. This makes it more flexible. It can now be used for smaller previews, such as for utility classes which aren't a component and do not have JSX. The Preview component retains logic to render a JSX component, fetch its JSX from a given file path for a code snippet, and generates a HTML code snippet from there. --- .../src/components/utils/Preview.astro | 41 +--- .../src/components/utils/PreviewFrame.astro | 191 ++++++++++++++++++ 2 files changed, 193 insertions(+), 39 deletions(-) create mode 100644 apps/for-everyone-website/src/components/utils/PreviewFrame.astro diff --git a/apps/for-everyone-website/src/components/utils/Preview.astro b/apps/for-everyone-website/src/components/utils/Preview.astro index 5176e4a05c..9ea05ffb9b 100644 --- a/apps/for-everyone-website/src/components/utils/Preview.astro +++ b/apps/for-everyone-website/src/components/utils/Preview.astro @@ -3,7 +3,7 @@ import {resolve as pathResolve} from 'path'; import {readFile} from 'node:fs/promises'; import {format} from 'prettier'; import {renderToString} from 'react-dom/server'; -import {Tabs, TabItem, Code} from '@astrojs/starlight/components'; +import PreviewFrame from './PreviewFrame.astro'; const {component} = Astro.props; const mark = component?.previewMarkers?.mark; @@ -35,46 +35,9 @@ const componentHTML = parser: 'html', htmlWhitespaceSensitivity: 'ignore', })); - -const uniqueID = 'switcher-' + Math.random().toString(36).substring(7); --- -
-
- - -
- -
-
- -
-
- -
-
- - { - componentJSX && ( - - - - ) - } - { - componentHTML && ( - - - - ) - } - -
-
-
+ + + From cf4b91337a765ae1af5ced5f81627aa746a0ad00 Mon Sep 17 00:00:00 2001 From: Lee Moody Date: Thu, 9 Jan 2025 18:31:10 +0000 Subject: [PATCH 4/4] chore: Add display type usecase docs to the website --- apps/for-everyone-website/package.json | 2 +- .../src/components/TypeUsecase.astro | 47 ++++++++++ .../src/content/docs/guides/typography.mdx | 88 +++++++++++-------- package-lock.json | 2 +- 4 files changed, 99 insertions(+), 40 deletions(-) create mode 100644 apps/for-everyone-website/src/components/TypeUsecase.astro diff --git a/apps/for-everyone-website/package.json b/apps/for-everyone-website/package.json index 06a5fe9da1..38f4a0057b 100644 --- a/apps/for-everyone-website/package.json +++ b/apps/for-everyone-website/package.json @@ -24,7 +24,7 @@ "@financial-times/o3-editorial-typography": "^2.0.0", "@financial-times/o3-figma-sb-links": "^0.0.0", "@financial-times/o3-form": "^0.5.0", - "@financial-times/o3-foundation": "^2.0.0", + "@financial-times/o3-foundation": "^2.3.1", "@financial-times/o3-social-sign-in": "^1.0.0", "@financial-times/o3-tooling-token": "^0.0.0", "@financial-times/o3-tooltip": "^2.0.0", diff --git a/apps/for-everyone-website/src/components/TypeUsecase.astro b/apps/for-everyone-website/src/components/TypeUsecase.astro new file mode 100644 index 0000000000..f92ae23b53 --- /dev/null +++ b/apps/for-everyone-website/src/components/TypeUsecase.astro @@ -0,0 +1,47 @@ +--- +import PreviewFrame from './utils/PreviewFrame.astro'; + +const tokens = await import(`@financial-times/o3-tooling-token/${Astro.props.brand}.js`); + +const usecases = Array.isArray(Astro.props.usecases) ? Astro.props.usecases : [Astro.props.usecases]; + +const TypeUsecaseTokens = Object.entries(tokens.default).filter(([key, value]) => key.includes(`o3-typography-use-case`) && usecases.includes(value.attributes?.subitem)).map(([key, value]) => { + value.name = key; + return value +}); +const TypeUsecaseTokensByItem = Object.groupBy(TypeUsecaseTokens, (token) => token.attributes?.subitem); + +--- + +{ + + + Object.entries(TypeUsecaseTokensByItem).map(([key, tokens]) => { + console.log(tokens); + return <> +

{key}

+

{tokens[0].description}

+ + Make sense of all of it`} mark={`class="o3-typography-use-case-${key}`} /> + + + + + + + + + + + {tokens.map(token => { + return + + + + + })} + +
NameCSS Custom PropertyValue
{token.type}{token.css}{token.value}
+ ; + }) +} diff --git a/apps/for-everyone-website/src/content/docs/guides/typography.mdx b/apps/for-everyone-website/src/content/docs/guides/typography.mdx index 11529e160a..d1dce0dcb2 100644 --- a/apps/for-everyone-website/src/content/docs/guides/typography.mdx +++ b/apps/for-everyone-website/src/content/docs/guides/typography.mdx @@ -19,7 +19,7 @@ import '@financial-times/o3-editorial-typography/css/professional.css'; import '@financial-times/o3-editorial-typography/css/sustainable-views.css'; import '@financial-times/o3-editorial-typography/css/whitelabel.css'; -import {Tabs, TabItem, Code} from '@astrojs/starlight/components'; +import { Tabs, TabItem, Code } from '@astrojs/starlight/components'; import HeadingTypography from '../../../components/typography/Heading.astro'; import BodyTypography from '../../../components/typography/Body.astro'; @@ -43,9 +43,12 @@ import Caption from '../../../components/editorial-typography/Caption.astro'; import TypeScale from '../../../components/TypeScale.astro'; import TypeFamily from '../../../components/TypeFamily.astro'; +import TypeUsecase from '../../../components/TypeUsecase.astro'; -import {default as Example} from '../../../components/Example.astro'; -import {default as Guideline} from '../../../components/Guideline.astro'; +import { default as Example } from '../../../components/Example.astro'; +import { default as Guideline } from '../../../components/Guideline.astro'; + + The FT typography uses the following typefaces to convey information to our @@ -53,8 +56,6 @@ import {default as Guideline} from '../../../components/Guideline.astro'; Georgia. - - ### Metric Metric is our primary typeface. Clear, contemporary and rational, Metric communicates with clarity best used for CTAs, body copy and headings across all sub-brands. @@ -88,43 +89,15 @@ Metric is our primary typeface. Clear, contemporary and rational, Metric communi -## Typographic Scale - -We use multiple typographic scales for different font families. Our scale ranges from -3 to 10, depending on the font family. Consider scale 0 the baseline, with ascending and descending values in each direction. Avoid using styles below zero for long form content. +## Usecases - - - - - - - - - - - - - - - - - - - - +Typography use-cases provide low level typography styles for use in a variety of contexts. In addition to these general type style, Origami provides typography components which use these. For example the [display component](#) combines all three [display sizes](#display) at different breakpoints for a responsive heading. -## Font Weight +### Display -Font weight can be used to express hierarchy or urgency of information. +Display styles, as the largest text on the screen, are reserved for short, important text or numerals. These styles are responsive to screen sizes and use the Financier Display typeface. This font family should be used exclusively for editorial story headlines, such as teaser headlines or article toppers. -We recommend using our standard [UI typography](#ui-typography) or [Editorial typography](#editorial-typography) styles where possible. For custom typography, align to these standard styles where possible. For example when using Metric2 for UI use `semibold` over other bold weights. -| Preview | Value | Token | -| --------------------------------------------------------------------------------------------------------------------- | ----- | ------------------------- | -| light | 300 | | -| regular | 400 | | -| medium | 500 | | -| semibold | 700 | | -| bold | 800 | | + ## UI Typography @@ -319,3 +292,42 @@ Keeping typography consistent and sticking to logical hierarchies ensures that e + + +## Typographic Scale + +We use multiple typographic scales for different font families. Our scale ranges from -3 to 10, depending on the font family. Consider scale 0 the baseline, with ascending and descending values in each direction. Avoid using styles below zero for long form content. + + + + + + + + + + + + + + + + + + + + + + +## Font Weight + +Font weight can be used to express hierarchy or urgency of information. + +We recommend using our standard [UI typography](#ui-typography) or [Editorial typography](#editorial-typography) styles where possible. For custom typography, align to these standard styles where possible. For example when using Metric2 for UI use `semibold` over other bold weights. +| Preview | Value | Token | +| --------------------------------------------------------------------------------------------------------------------- | ----- | ------------------------- | +| light | 300 | | +| regular | 400 | | +| medium | 500 | | +| semibold | 700 | | +| bold | 800 | | diff --git a/package-lock.json b/package-lock.json index 15818cd695..91e812788f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -897,7 +897,7 @@ "@financial-times/o3-editorial-typography": "^2.0.0", "@financial-times/o3-figma-sb-links": "^0.0.0", "@financial-times/o3-form": "^0.5.0", - "@financial-times/o3-foundation": "^2.0.0", + "@financial-times/o3-foundation": "^2.3.1", "@financial-times/o3-social-sign-in": "^1.0.0", "@financial-times/o3-tooling-token": "^0.0.0", "@financial-times/o3-tooltip": "^2.0.0",