diff --git a/lib/styles/build/css/design_tokens.css b/lib/styles/build/css/design_tokens.css index 9b0a5c00..1255bab7 100644 --- a/lib/styles/build/css/design_tokens.css +++ b/lib/styles/build/css/design_tokens.css @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Sat, 08 Aug 2020 00:00:40 GMT + * Generated on Thu, 13 Aug 2020 21:49:49 GMT */ :root { @@ -54,20 +54,20 @@ --vds-color-purple-darkest: #241C48; --vds-font-family-body: 'Open Sans', Helvetica, Arial, sans-serif; --vds-font-family-display: 'Raleway', Helvetica, Arial, sans-serif; - --vds-font-xxs: normal normal normal normal var(--vds-font-size-xxs)/var(--vds-line-height-xxs) var(--vds-font-family-body); - --vds-font-xs: normal normal normal normal var(--vds-font-size-xs)/var(--vds-line-height-xs) var(--vds-font-family-body); - --vds-font-sm: normal normal normal normal var(--vds-font-size-sm)/var(--vds-line-height-sm) var(--vds-font-family-body); - --vds-font-sm-bold: normal normal bold normal var(--vds-font-size-sm)/var(--vds-line-height-sm) var(--vds-font-family-body); - --vds-font-md: normal normal normal normal var(--vds-font-size-md)/var(--vds-line-height-md) var(--vds-font-family-body); - --vds-font-md-bold: normal normal bold normal var(--vds-font-size-md)/var(--vds-line-height-md) var(--vds-font-family-body); + --vds-font-xxs: normal normal normal normal var(--vds-font-size-xxs) / var(--vds-line-height-xxs) var(--vds-font-family-body); + --vds-font-xs: normal normal normal normal var(--vds-font-size-xs) / var(--vds-line-height-xs) var(--vds-font-family-body); + --vds-font-sm: normal normal normal normal var(--vds-font-size-sm) / var(--vds-line-height-sm) var(--vds-font-family-body); + --vds-font-sm-bold: normal normal bold normal var(--vds-font-size-sm) / var(--vds-line-height-sm) var(--vds-font-family-body); + --vds-font-md: normal normal normal normal var(--vds-font-size-md) / var(--vds-line-height-md) var(--vds-font-family-body); + --vds-font-md-bold: normal normal bold normal var(--vds-font-size-md) / var(--vds-line-height-md) var(--vds-font-family-body); --vds-font-body: var(--vds-font-md); --vds-font-body-bold: var(--vds-font-md-bold); - --vds-font-heading-xxs: normal normal bold normal var(--vds-font-size-heading-xxs)/var(--vds-line-height-heading-xxs) var(--vds-font-family-display); - --vds-font-heading-xs: normal normal bold normal var(--vds-font-size-heading-xs)/var(--vds-line-height-heading-xs) var(--vds-font-family-display); - --vds-font-heading-sm: normal normal bold normal var(--vds-font-size-heading-sm)/var(--vds-line-height-heading-sm) var(--vds-font-family-display); - --vds-font-heading-md: normal normal bold normal var(--vds-font-size-heading-md)/var(--vds-line-height-heading-md) var(--vds-font-family-display); - --vds-font-heading-lg: normal normal bold normal var(--vds-font-size-heading-lg)/var(--vds-line-height-heading-lg) var(--vds-font-family-display); - --vds-font-heading-xl: normal normal bold normal var(--vds-font-size-heading-xl)/var(--vds-line-height-heading-xl) var(--vds-font-family-display); + --vds-font-heading-xxs: normal normal bold normal var(--vds-font-size-heading-xxs) / var(--vds-line-height-heading-xxs) var(--vds-font-family-display); + --vds-font-heading-xs: normal normal bold normal var(--vds-font-size-heading-xs) / var(--vds-line-height-heading-xs) var(--vds-font-family-display); + --vds-font-heading-sm: normal normal bold normal var(--vds-font-size-heading-sm) / var(--vds-line-height-heading-sm) var(--vds-font-family-display); + --vds-font-heading-md: normal normal bold normal var(--vds-font-size-heading-md) / var(--vds-line-height-heading-md) var(--vds-font-family-display); + --vds-font-heading-lg: normal normal bold normal var(--vds-font-size-heading-lg) / var(--vds-line-height-heading-lg) var(--vds-font-family-display); + --vds-font-heading-xl: normal normal bold normal var(--vds-font-size-heading-xl) / var(--vds-line-height-heading-xl) var(--vds-font-family-display); --vds-font-scale-base: 1.6rem; /* assumes font-size 62.5% on html */ --vds-font-scale-multiplier: 1.25; /* Major Third (4:5) modular scale https://www.modularscale.com/?16&px&1.25 */ --vds-font-size-md: var(--vds-font-scale-base); /* 16/24px !!! consider --vds-font-* to set all font properties, not just font-size */ diff --git a/lib/styles/build/js/design_tokens.js b/lib/styles/build/js/design_tokens.js index 1aa28964..f848c49f 100644 --- a/lib/styles/build/js/design_tokens.js +++ b/lib/styles/build/js/design_tokens.js @@ -1,6 +1,6 @@ /** * Do not edit directly - * Generated on Sat, 08 Aug 2020 00:00:53 GMT + * Generated on Thu, 13 Aug 2020 21:50:01 GMT */ module.exports = { @@ -967,9 +967,9 @@ module.exports = { } }, "xxs": { - "value": "normal normal normal normal calc(calc(calc(1.6rem / 1.25) / 1.25) / 1.25)/1.50 'Open Sans', Helvetica, Arial, sans-serif", + "value": "normal normal normal normal calc(calc(calc(1.6rem / 1.25) / 1.25) / 1.25) / 1.50 'Open Sans', Helvetica, Arial, sans-serif", "original": { - "value": "normal normal normal normal {vds.font.size.xxs.value}/{vds.line-height.xxs.value} {vds.font.family.body.value}" + "value": "normal normal normal normal {vds.font.size.xxs.value} / {vds.line-height.xxs.value} {vds.font.family.body.value}" }, "name": "VdsFontXxs", "attributes": { @@ -984,9 +984,9 @@ module.exports = { ] }, "xs": { - "value": "normal normal normal normal calc(calc(1.6rem / 1.25) / 1.25)/1.50 'Open Sans', Helvetica, Arial, sans-serif", + "value": "normal normal normal normal calc(calc(1.6rem / 1.25) / 1.25) / 1.50 'Open Sans', Helvetica, Arial, sans-serif", "original": { - "value": "normal normal normal normal {vds.font.size.xs.value}/{vds.line-height.xs.value} {vds.font.family.body.value}" + "value": "normal normal normal normal {vds.font.size.xs.value} / {vds.line-height.xs.value} {vds.font.family.body.value}" }, "name": "VdsFontXs", "attributes": { @@ -1001,9 +1001,9 @@ module.exports = { ] }, "sm": { - "value": "normal normal normal normal calc(1.6rem / 1.25)/1.38 'Open Sans', Helvetica, Arial, sans-serif", + "value": "normal normal normal normal calc(1.6rem / 1.25) / 1.38 'Open Sans', Helvetica, Arial, sans-serif", "original": { - "value": "normal normal normal normal {vds.font.size.sm.value}/{vds.line-height.sm.value} {vds.font.family.body.value}" + "value": "normal normal normal normal {vds.font.size.sm.value} / {vds.line-height.sm.value} {vds.font.family.body.value}" }, "name": "VdsFontSm", "attributes": { @@ -1018,9 +1018,9 @@ module.exports = { ] }, "sm-bold": { - "value": "normal normal bold normal calc(1.6rem / 1.25)/1.38 'Open Sans', Helvetica, Arial, sans-serif", + "value": "normal normal bold normal calc(1.6rem / 1.25) / 1.38 'Open Sans', Helvetica, Arial, sans-serif", "original": { - "value": "normal normal bold normal {vds.font.size.sm.value}/{vds.line-height.sm.value} {vds.font.family.body.value}" + "value": "normal normal bold normal {vds.font.size.sm.value} / {vds.line-height.sm.value} {vds.font.family.body.value}" }, "name": "VdsFontSmBold", "attributes": { @@ -1035,9 +1035,9 @@ module.exports = { ] }, "md": { - "value": "normal normal normal normal 1.6rem/1.50 'Open Sans', Helvetica, Arial, sans-serif", + "value": "normal normal normal normal 1.6rem / 1.50 'Open Sans', Helvetica, Arial, sans-serif", "original": { - "value": "normal normal normal normal {vds.font.size.md.value}/{vds.line-height.md.value} {vds.font.family.body.value}" + "value": "normal normal normal normal {vds.font.size.md.value} / {vds.line-height.md.value} {vds.font.family.body.value}" }, "name": "VdsFontMd", "attributes": { @@ -1052,9 +1052,9 @@ module.exports = { ] }, "md-bold": { - "value": "normal normal bold normal 1.6rem/1.50 'Open Sans', Helvetica, Arial, sans-serif", + "value": "normal normal bold normal 1.6rem / 1.50 'Open Sans', Helvetica, Arial, sans-serif", "original": { - "value": "normal normal bold normal {vds.font.size.md.value}/{vds.line-height.md.value} {vds.font.family.body.value}" + "value": "normal normal bold normal {vds.font.size.md.value} / {vds.line-height.md.value} {vds.font.family.body.value}" }, "name": "VdsFontMdBold", "attributes": { @@ -1069,7 +1069,7 @@ module.exports = { ] }, "body": { - "value": "normal normal normal normal 1.6rem/1.50 'Open Sans', Helvetica, Arial, sans-serif", + "value": "normal normal normal normal 1.6rem / 1.50 'Open Sans', Helvetica, Arial, sans-serif", "original": { "value": "{vds.font.md.value}" }, @@ -1086,7 +1086,7 @@ module.exports = { ] }, "body-bold": { - "value": "normal normal bold normal 1.6rem/1.50 'Open Sans', Helvetica, Arial, sans-serif", + "value": "normal normal bold normal 1.6rem / 1.50 'Open Sans', Helvetica, Arial, sans-serif", "original": { "value": "{vds.font.md-bold.value}" }, @@ -1103,9 +1103,9 @@ module.exports = { ] }, "heading-xxs": { - "value": "normal normal bold normal 1.6rem/1.50 'Raleway', Helvetica, Arial, sans-serif", + "value": "normal normal bold normal 1.6rem / 1.50 'Raleway', Helvetica, Arial, sans-serif", "original": { - "value": "normal normal bold normal {vds.font.size.heading-xxs.value}/{vds.line-height.heading-xxs.value} {vds.font.family.display.value}" + "value": "normal normal bold normal {vds.font.size.heading-xxs.value} / {vds.line-height.heading-xxs.value} {vds.font.family.display.value}" }, "name": "VdsFontHeadingXxs", "attributes": { @@ -1120,9 +1120,9 @@ module.exports = { ] }, "heading-xs": { - "value": "normal normal bold normal calc(1.6rem * 1.25)/1.20 'Raleway', Helvetica, Arial, sans-serif", + "value": "normal normal bold normal calc(1.6rem * 1.25) / 1.20 'Raleway', Helvetica, Arial, sans-serif", "original": { - "value": "normal normal bold normal {vds.font.size.heading-xs.value}/{vds.line-height.heading-xs.value} {vds.font.family.display.value}" + "value": "normal normal bold normal {vds.font.size.heading-xs.value} / {vds.line-height.heading-xs.value} {vds.font.family.display.value}" }, "name": "VdsFontHeadingXs", "attributes": { @@ -1137,9 +1137,9 @@ module.exports = { ] }, "heading-sm": { - "value": "normal normal bold normal calc(calc(1.6rem * 1.25) * 1.25)/1.20 'Raleway', Helvetica, Arial, sans-serif", + "value": "normal normal bold normal calc(calc(1.6rem * 1.25) * 1.25) / 1.20 'Raleway', Helvetica, Arial, sans-serif", "original": { - "value": "normal normal bold normal {vds.font.size.heading-sm.value}/{vds.line-height.heading-sm.value} {vds.font.family.display.value}" + "value": "normal normal bold normal {vds.font.size.heading-sm.value} / {vds.line-height.heading-sm.value} {vds.font.family.display.value}" }, "name": "VdsFontHeadingSm", "attributes": { @@ -1154,9 +1154,9 @@ module.exports = { ] }, "heading-md": { - "value": "normal normal bold normal calc(calc(calc(1.6rem * 1.25) * 1.25) * 1.25)/1.16 'Raleway', Helvetica, Arial, sans-serif", + "value": "normal normal bold normal calc(calc(calc(1.6rem * 1.25) * 1.25) * 1.25) / 1.16 'Raleway', Helvetica, Arial, sans-serif", "original": { - "value": "normal normal bold normal {vds.font.size.heading-md.value}/{vds.line-height.heading-md.value} {vds.font.family.display.value}" + "value": "normal normal bold normal {vds.font.size.heading-md.value} / {vds.line-height.heading-md.value} {vds.font.family.display.value}" }, "name": "VdsFontHeadingMd", "attributes": { @@ -1171,9 +1171,9 @@ module.exports = { ] }, "heading-lg": { - "value": "normal normal bold normal calc(calc(calc(calc(1.6rem * 1.25) * 1.25) * 1.25) * 1.25)/1.23 'Raleway', Helvetica, Arial, sans-serif", + "value": "normal normal bold normal calc(calc(calc(calc(1.6rem * 1.25) * 1.25) * 1.25) * 1.25) / 1.23 'Raleway', Helvetica, Arial, sans-serif", "original": { - "value": "normal normal bold normal {vds.font.size.heading-lg.value}/{vds.line-height.heading-lg.value} {vds.font.family.display.value}" + "value": "normal normal bold normal {vds.font.size.heading-lg.value} / {vds.line-height.heading-lg.value} {vds.font.family.display.value}" }, "name": "VdsFontHeadingLg", "attributes": { @@ -1188,9 +1188,9 @@ module.exports = { ] }, "heading-xl": { - "value": "normal normal bold normal calc(calc(calc(calc(calc(1.6rem * 1.25) * 1.25) * 1.25) * 1.25) * 1.25)/1.10 'Raleway', Helvetica, Arial, sans-serif", + "value": "normal normal bold normal calc(calc(calc(calc(calc(1.6rem * 1.25) * 1.25) * 1.25) * 1.25) * 1.25) / 1.10 'Raleway', Helvetica, Arial, sans-serif", "original": { - "value": "normal normal bold normal {vds.font.size.heading-xl.value}/{vds.line-height.heading-xl.value} {vds.font.family.display.value}" + "value": "normal normal bold normal {vds.font.size.heading-xl.value} / {vds.line-height.heading-xl.value} {vds.font.family.display.value}" }, "name": "VdsFontHeadingXl", "attributes": { diff --git a/lib/styles/style_dict/tokens/font/fonts.json b/lib/styles/style_dict/tokens/font/fonts.json index fdbc5a43..bd6636f7 100644 --- a/lib/styles/style_dict/tokens/font/fonts.json +++ b/lib/styles/style_dict/tokens/font/fonts.json @@ -2,22 +2,22 @@ "vds": { "font": { "xxs": { - "value": "normal normal normal normal {vds.font.size.xxs.value}/{vds.line-height.xxs.value} {vds.font.family.body.value}" + "value": "normal normal normal normal {vds.font.size.xxs.value} / {vds.line-height.xxs.value} {vds.font.family.body.value}" }, "xs": { - "value": "normal normal normal normal {vds.font.size.xs.value}/{vds.line-height.xs.value} {vds.font.family.body.value}" + "value": "normal normal normal normal {vds.font.size.xs.value} / {vds.line-height.xs.value} {vds.font.family.body.value}" }, "sm": { - "value": "normal normal normal normal {vds.font.size.sm.value}/{vds.line-height.sm.value} {vds.font.family.body.value}" + "value": "normal normal normal normal {vds.font.size.sm.value} / {vds.line-height.sm.value} {vds.font.family.body.value}" }, "sm-bold": { - "value": "normal normal bold normal {vds.font.size.sm.value}/{vds.line-height.sm.value} {vds.font.family.body.value}" + "value": "normal normal bold normal {vds.font.size.sm.value} / {vds.line-height.sm.value} {vds.font.family.body.value}" }, "md": { - "value": "normal normal normal normal {vds.font.size.md.value}/{vds.line-height.md.value} {vds.font.family.body.value}" + "value": "normal normal normal normal {vds.font.size.md.value} / {vds.line-height.md.value} {vds.font.family.body.value}" }, "md-bold": { - "value": "normal normal bold normal {vds.font.size.md.value}/{vds.line-height.md.value} {vds.font.family.body.value}" + "value": "normal normal bold normal {vds.font.size.md.value} / {vds.line-height.md.value} {vds.font.family.body.value}" }, "body": { "value": "{vds.font.md.value}" @@ -27,22 +27,22 @@ }, "heading-xxs": { - "value": "normal normal bold normal {vds.font.size.heading-xxs.value}/{vds.line-height.heading-xxs.value} {vds.font.family.display.value}" + "value": "normal normal bold normal {vds.font.size.heading-xxs.value} / {vds.line-height.heading-xxs.value} {vds.font.family.display.value}" }, "heading-xs": { - "value": "normal normal bold normal {vds.font.size.heading-xs.value}/{vds.line-height.heading-xs.value} {vds.font.family.display.value}" + "value": "normal normal bold normal {vds.font.size.heading-xs.value} / {vds.line-height.heading-xs.value} {vds.font.family.display.value}" }, "heading-sm": { - "value": "normal normal bold normal {vds.font.size.heading-sm.value}/{vds.line-height.heading-sm.value} {vds.font.family.display.value}" + "value": "normal normal bold normal {vds.font.size.heading-sm.value} / {vds.line-height.heading-sm.value} {vds.font.family.display.value}" }, "heading-md": { - "value": "normal normal bold normal {vds.font.size.heading-md.value}/{vds.line-height.heading-md.value} {vds.font.family.display.value}" + "value": "normal normal bold normal {vds.font.size.heading-md.value} / {vds.line-height.heading-md.value} {vds.font.family.display.value}" }, "heading-lg": { - "value": "normal normal bold normal {vds.font.size.heading-lg.value}/{vds.line-height.heading-lg.value} {vds.font.family.display.value}" + "value": "normal normal bold normal {vds.font.size.heading-lg.value} / {vds.line-height.heading-lg.value} {vds.font.family.display.value}" }, "heading-xl": { - "value": "normal normal bold normal {vds.font.size.heading-xl.value}/{vds.line-height.heading-xl.value} {vds.font.family.display.value}" + "value": "normal normal bold normal {vds.font.size.heading-xl.value} / {vds.line-height.heading-xl.value} {vds.font.family.display.value}" } } }