fix(design_tokens): add space between slash and font-size and line-he…

…ight Due to postcss-custom-variables defect postcss/postcss-custom-properties#225
virtru · Aug 14, 2020 · 9ceabfe · 9ceabfe
1 parent d04b8df
commit 9ceabfe
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 52 deletions.
diff --git 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
@@ -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
@@ -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}"
       }
     }
   }