npm - @pantheon-systems/pds-design-tokens - Versions diffs - 1.0.0-dev.127 → 1.0.0-dev.129 - Mend

@pantheon-systems/pds-design-tokens 1.0.0-dev.127 → 1.0.0-dev.129

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/build/css/pds-design-tokens-dark-mode.css +1 -0
package/build/css/pds-design-tokens-light-mode.css +1 -0
package/build/css/pds-design-tokens.css +3 -3
package/build/figma/pds-design-tokens-figma.json +485 -4
package/build/json/pds-design-tokens-dark-mode.json +29 -0
package/build/json/pds-design-tokens-light-mode.json +29 -0
package/build/json/pds-design-tokens.json +27 -27
package/package.json +1 -1

package/build/css/pds-design-tokens-dark-mode.css CHANGED Viewed

@@ -167,6 +167,7 @@
   --pds-color-menu-item-foreground: #ffffff;
   --pds-color-menu-item-heading-text: #a6a3b4;
   --pds-color-overlay: rgba(9, 0, 48, 0.45);
+  --pds-color-panel-critical-border: #ef5c48;
   --pds-color-panel-default-background: var(--pds-color-background-default);
   --pds-color-panel-default-border: var(--pds-color-border-default);
   --pds-color-panel-sunken-background: #121219;

package/build/css/pds-design-tokens-light-mode.css CHANGED Viewed

@@ -200,6 +200,7 @@
   --pds-color-pager-background-active: #f0edfb;
   --pds-color-pager-background-hover: #f1f1f1;
   --pds-color-pager-foreground-active: #654bd5;
+  --pds-color-panel-critical-border: #ca3521;
   --pds-color-panel-default-background: var(--pds-color-background-default);
   --pds-color-panel-default-border: var(--pds-color-border-default);
   --pds-color-panel-sunken-background: #f1f1f1;

package/build/css/pds-design-tokens.css CHANGED Viewed

@@ -68,7 +68,7 @@
   --pds-typography-font-default: 'Poppins', sans-serif;
   --pds-typography-font-secondary: 'Aleo', serif;
   --pds-typography-font-weight-bold: 700;
-  --pds-typography-font-weight-extrabold: 800;
+  --pds-typography-font-weight-light: 300;
   --pds-typography-font-weight-regular: 400;
   --pds-typography-font-weight-semibold: 600;
   --pds-typography-letter-spacing-l: 0.04rem;
@@ -79,8 +79,8 @@
   --pds-typography-line-height-m: 140%;
   --pds-typography-line-height-s: 120%;
   --pds-typography-line-height-xl: 195%;
-  --pds-typography-multiplier-medium: 0.78;
-  --pds-typography-multiplier-small: 0.625;
+  --pds-typography-multiplier-medium: 0.88;
+  --pds-typography-multiplier-small: 0.84;
   --pds-typography-size-2xl: 1.728rem;
   --pds-typography-size-3xl: 2.074rem;
   --pds-typography-size-4xl: 2.488rem;

package/build/figma/pds-design-tokens-figma.json CHANGED Viewed

@@ -1198,7 +1198,7 @@
         },
         "h4": {
           "value": {
-            "fontSize": "1.2 * 16",
+            "fontSize": "1 * 16",
             "fontWeight": 600,
             "fontFamily": "Poppins",
             "lineHeight": "120%"
@@ -1208,7 +1208,7 @@
           "isSource": true,
           "original": {
             "value": {
-              "fontSize": "{typography.size.L} * {figma.typography.size.base}",
+              "fontSize": "{typography.size.M} * {figma.typography.size.base}",
               "fontWeight": "{typography.font-weight.semibold}",
               "fontFamily": "{text.headings-product.h1.value.fontFamily}",
               "lineHeight": "{text.headings-product.h1.value.lineHeight}"
@@ -1230,7 +1230,7 @@
         "h5": {
           "value": {
             "fontSize": "1 * 16",
-            "fontWeight": 700,
+            "fontWeight": 600,
             "fontFamily": "Poppins",
             "lineHeight": "120%"
           },
@@ -1240,7 +1240,7 @@
           "original": {
             "value": {
               "fontSize": "{typography.size.M} * {figma.typography.size.base}",
-              "fontWeight": "{text.headings-product.h1.value.fontWeight}",
+              "fontWeight": "{typography.font-weight.semibold}",
               "fontFamily": "{text.headings-product.h1.value.fontFamily}",
               "lineHeight": "{text.headings-product.h1.value.lineHeight}"
             },
@@ -1625,6 +1625,429 @@
         }
       },
       "type-scale": {
+        "light": {
+          "9XL": {
+            "value": {
+              "fontSize": "6.192 * 16",
+              "fontFamily": "Poppins",
+              "fontWeight": 300,
+              "lineHeight": "120%"
+            },
+            "type": "typography",
+            "filePath": "tokens-figma/typography/base.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "fontSize": "{typography.size.9XL} * {figma.typography.size.base}",
+                "fontFamily": "{text.body.paragraph.value.fontFamily}",
+                "fontWeight": "{typography.font-weight.light}",
+                "lineHeight": "{text.headings.h1.value.lineHeight}"
+              },
+              "type": "typography"
+            },
+            "name": "text-type-scale-light-9-xl",
+            "attributes": {
+              "category": "text",
+              "type": "type-scale",
+              "item": "light",
+              "subitem": "9XL"
+            },
+            "path": [
+              "text",
+              "type-scale",
+              "light",
+              "9XL"
+            ]
+          },
+          "8XL": {
+            "value": {
+              "fontSize": "5.160 * 16",
+              "fontFamily": "Poppins",
+              "fontWeight": 300,
+              "lineHeight": "120%"
+            },
+            "type": "typography",
+            "filePath": "tokens-figma/typography/base.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "fontSize": "{typography.size.8XL} * {figma.typography.size.base}",
+                "fontFamily": "{text.body.paragraph.value.fontFamily}",
+                "fontWeight": "{typography.font-weight.light}",
+                "lineHeight": "{text.headings.h1.value.lineHeight}"
+              },
+              "type": "typography"
+            },
+            "name": "text-type-scale-light-8-xl",
+            "attributes": {
+              "category": "text",
+              "type": "type-scale",
+              "item": "light",
+              "subitem": "8XL"
+            },
+            "path": [
+              "text",
+              "type-scale",
+              "light",
+              "8XL"
+            ]
+          },
+          "7XL": {
+            "value": {
+              "fontSize": "4.3 * 16",
+              "fontFamily": "Poppins",
+              "fontWeight": 300,
+              "lineHeight": "120%"
+            },
+            "type": "typography",
+            "filePath": "tokens-figma/typography/base.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "fontSize": "{typography.size.7XL} * {figma.typography.size.base}",
+                "fontFamily": "{text.body.paragraph.value.fontFamily}",
+                "fontWeight": "{typography.font-weight.light}",
+                "lineHeight": "{text.headings.h1.value.lineHeight}"
+              },
+              "type": "typography"
+            },
+            "name": "text-type-scale-light-7-xl",
+            "attributes": {
+              "category": "text",
+              "type": "type-scale",
+              "item": "light",
+              "subitem": "7XL"
+            },
+            "path": [
+              "text",
+              "type-scale",
+              "light",
+              "7XL"
+            ]
+          },
+          "6XL": {
+            "value": {
+              "fontSize": "3.583 * 16",
+              "fontFamily": "Poppins",
+              "fontWeight": 300,
+              "lineHeight": "120%"
+            },
+            "type": "typography",
+            "filePath": "tokens-figma/typography/base.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "fontSize": "{typography.size.6XL} * {figma.typography.size.base}",
+                "fontFamily": "{text.body.paragraph.value.fontFamily}",
+                "fontWeight": "{typography.font-weight.light}",
+                "lineHeight": "{text.headings.h1.value.lineHeight}"
+              },
+              "type": "typography"
+            },
+            "name": "text-type-scale-light-6-xl",
+            "attributes": {
+              "category": "text",
+              "type": "type-scale",
+              "item": "light",
+              "subitem": "6XL"
+            },
+            "path": [
+              "text",
+              "type-scale",
+              "light",
+              "6XL"
+            ]
+          },
+          "5XL": {
+            "value": {
+              "fontSize": "2.986 * 16",
+              "fontFamily": "Poppins",
+              "fontWeight": 300,
+              "lineHeight": "120%"
+            },
+            "type": "typography",
+            "filePath": "tokens-figma/typography/base.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "fontSize": "{typography.size.5XL} * {figma.typography.size.base}",
+                "fontFamily": "{text.body.paragraph.value.fontFamily}",
+                "fontWeight": "{typography.font-weight.light}",
+                "lineHeight": "{text.headings.h1.value.lineHeight}"
+              },
+              "type": "typography"
+            },
+            "name": "text-type-scale-light-5-xl",
+            "attributes": {
+              "category": "text",
+              "type": "type-scale",
+              "item": "light",
+              "subitem": "5XL"
+            },
+            "path": [
+              "text",
+              "type-scale",
+              "light",
+              "5XL"
+            ]
+          },
+          "4XL": {
+            "value": {
+              "fontSize": "2.488 * 16",
+              "fontFamily": "Poppins",
+              "fontWeight": 300,
+              "lineHeight": "120%"
+            },
+            "type": "typography",
+            "filePath": "tokens-figma/typography/base.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "fontSize": "{typography.size.4XL} * {figma.typography.size.base}",
+                "fontFamily": "{text.body.paragraph.value.fontFamily}",
+                "fontWeight": "{typography.font-weight.light}",
+                "lineHeight": "{text.headings.h1.value.lineHeight}"
+              },
+              "type": "typography"
+            },
+            "name": "text-type-scale-light-4-xl",
+            "attributes": {
+              "category": "text",
+              "type": "type-scale",
+              "item": "light",
+              "subitem": "4XL"
+            },
+            "path": [
+              "text",
+              "type-scale",
+              "light",
+              "4XL"
+            ]
+          },
+          "3XL": {
+            "value": {
+              "fontSize": "2.074 * 16",
+              "fontFamily": "Poppins",
+              "fontWeight": 300,
+              "lineHeight": "120%"
+            },
+            "type": "typography",
+            "filePath": "tokens-figma/typography/base.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "fontSize": "{typography.size.3XL} * {figma.typography.size.base}",
+                "fontFamily": "{text.body.paragraph.value.fontFamily}",
+                "fontWeight": "{typography.font-weight.light}",
+                "lineHeight": "{text.headings.h1.value.lineHeight}"
+              },
+              "type": "typography"
+            },
+            "name": "text-type-scale-light-3-xl",
+            "attributes": {
+              "category": "text",
+              "type": "type-scale",
+              "item": "light",
+              "subitem": "3XL"
+            },
+            "path": [
+              "text",
+              "type-scale",
+              "light",
+              "3XL"
+            ]
+          },
+          "2XL": {
+            "value": {
+              "fontSize": "1.728 * 16",
+              "fontFamily": "Poppins",
+              "fontWeight": 300,
+              "lineHeight": "120%"
+            },
+            "type": "typography",
+            "filePath": "tokens-figma/typography/base.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "fontSize": "{typography.size.2XL} * {figma.typography.size.base}",
+                "fontFamily": "{text.body.paragraph.value.fontFamily}",
+                "fontWeight": "{typography.font-weight.light}",
+                "lineHeight": "{text.headings.h1.value.lineHeight}"
+              },
+              "type": "typography"
+            },
+            "name": "text-type-scale-light-2-xl",
+            "attributes": {
+              "category": "text",
+              "type": "type-scale",
+              "item": "light",
+              "subitem": "2XL"
+            },
+            "path": [
+              "text",
+              "type-scale",
+              "light",
+              "2XL"
+            ]
+          },
+          "XL": {
+            "value": {
+              "fontSize": "1.44 * 16",
+              "fontFamily": "Poppins",
+              "fontWeight": 300
+            },
+            "type": "typography",
+            "filePath": "tokens-figma/typography/base.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "fontSize": "{typography.size.XL} * {figma.typography.size.base}",
+                "fontFamily": "{text.body.paragraph.value.fontFamily}",
+                "fontWeight": "{typography.font-weight.light}"
+              },
+              "type": "typography"
+            },
+            "name": "text-type-scale-light-xl",
+            "attributes": {
+              "category": "text",
+              "type": "type-scale",
+              "item": "light",
+              "subitem": "XL"
+            },
+            "path": [
+              "text",
+              "type-scale",
+              "light",
+              "XL"
+            ]
+          },
+          "L": {
+            "value": {
+              "fontSize": "1.2 * 16",
+              "fontFamily": "Poppins",
+              "fontWeight": 300
+            },
+            "type": "typography",
+            "filePath": "tokens-figma/typography/base.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "fontSize": "{typography.size.L} * {figma.typography.size.base}",
+                "fontFamily": "{text.body.paragraph.value.fontFamily}",
+                "fontWeight": "{typography.font-weight.light}"
+              },
+              "type": "typography"
+            },
+            "name": "text-type-scale-light-l",
+            "attributes": {
+              "category": "text",
+              "type": "type-scale",
+              "item": "light",
+              "subitem": "L"
+            },
+            "path": [
+              "text",
+              "type-scale",
+              "light",
+              "L"
+            ]
+          },
+          "M": {
+            "value": {
+              "fontSize": "1 * 16",
+              "fontFamily": "Poppins",
+              "fontWeight": 300
+            },
+            "comment": "Base value.",
+            "type": "typography",
+            "filePath": "tokens-figma/typography/base.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "fontSize": "{typography.size.M} * {figma.typography.size.base}",
+                "fontFamily": "{text.body.paragraph.value.fontFamily}",
+                "fontWeight": "{typography.font-weight.light}"
+              },
+              "comment": "Base value.",
+              "type": "typography"
+            },
+            "name": "text-type-scale-light-m",
+            "attributes": {
+              "category": "text",
+              "type": "type-scale",
+              "item": "light",
+              "subitem": "M"
+            },
+            "path": [
+              "text",
+              "type-scale",
+              "light",
+              "M"
+            ]
+          },
+          "S": {
+            "value": {
+              "fontSize": "0.833 * 16",
+              "fontFamily": "Poppins",
+              "fontWeight": 300
+            },
+            "type": "typography",
+            "filePath": "tokens-figma/typography/base.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "fontSize": "{typography.size.S} * {figma.typography.size.base}",
+                "fontFamily": "{text.body.paragraph.value.fontFamily}",
+                "fontWeight": "{typography.font-weight.light}"
+              },
+              "type": "typography"
+            },
+            "name": "text-type-scale-light-s",
+            "attributes": {
+              "category": "text",
+              "type": "type-scale",
+              "item": "light",
+              "subitem": "S"
+            },
+            "path": [
+              "text",
+              "type-scale",
+              "light",
+              "S"
+            ]
+          },
+          "XS": {
+            "value": {
+              "fontSize": "0.694 * 16",
+              "fontFamily": "Poppins",
+              "fontWeight": 300
+            },
+            "type": "typography",
+            "filePath": "tokens-figma/typography/base.json",
+            "isSource": true,
+            "original": {
+              "value": {
+                "fontSize": "{typography.size.XS} * {figma.typography.size.base}",
+                "fontFamily": "{text.body.paragraph.value.fontFamily}",
+                "fontWeight": "{typography.font-weight.light}"
+              },
+              "type": "typography"
+            },
+            "name": "text-type-scale-light-xs",
+            "attributes": {
+              "category": "text",
+              "type": "type-scale",
+              "item": "light",
+              "subitem": "XS"
+            },
+            "path": [
+              "text",
+              "type-scale",
+              "light",
+              "XS"
+            ]
+          }
+        },
         "regular": {
           "9XL": {
             "value": {
@@ -7247,6 +7670,35 @@
                 "background"
               ]
             }
+          },
+          "critical": {
+            "border": {
+              "value": "#ef5c48",
+              "public": true,
+              "isReferenceToInternal": true,
+              "filePath": "tokens/color/alias/panel.dark.json",
+              "isSource": true,
+              "original": {
+                "value": "{color.dark-mode.semantic.critical.foreground.value}",
+                "public": true,
+                "isReferenceToInternal": true
+              },
+              "name": "color-dark-mode-panel-critical-border",
+              "attributes": {
+                "category": "color",
+                "type": "dark-mode",
+                "item": "panel",
+                "subitem": "critical",
+                "state": "border"
+              },
+              "path": [
+                "color",
+                "dark-mode",
+                "panel",
+                "critical",
+                "border"
+              ]
+            }
           }
         },
         "expansion-panel": {
@@ -14479,6 +14931,35 @@
                 "background"
               ]
             }
+          },
+          "critical": {
+            "border": {
+              "value": "#ca3521",
+              "public": true,
+              "isReferenceToInternal": true,
+              "filePath": "tokens/color/alias/panel.light.json",
+              "isSource": true,
+              "original": {
+                "value": "{color.light-mode.semantic.critical.foreground.value}",
+                "public": true,
+                "isReferenceToInternal": true
+              },
+              "name": "color-light-mode-panel-critical-border",
+              "attributes": {
+                "category": "color",
+                "type": "light-mode",
+                "item": "panel",
+                "subitem": "critical",
+                "state": "border"
+              },
+              "path": [
+                "color",
+                "light-mode",
+                "panel",
+                "critical",
+                "border"
+              ]
+            }
           }
         },
         "expansion-panel": {

package/build/json/pds-design-tokens-dark-mode.json CHANGED Viewed

@@ -4350,6 +4350,35 @@
               "background"
             ]
           }
+        },
+        "critical": {
+          "border": {
+            "value": "#ef5c48",
+            "public": true,
+            "isReferenceToInternal": true,
+            "filePath": "tokens/color/alias/panel.dark.json",
+            "isSource": true,
+            "original": {
+              "value": "{color.dark-mode.semantic.critical.foreground.value}",
+              "public": true,
+              "isReferenceToInternal": true
+            },
+            "name": "color-dark-mode-panel-critical-border",
+            "attributes": {
+              "category": "color",
+              "type": "dark-mode",
+              "item": "panel",
+              "subitem": "critical",
+              "state": "border"
+            },
+            "path": [
+              "color",
+              "dark-mode",
+              "panel",
+              "critical",
+              "border"
+            ]
+          }
         }
       },
       "expansion-panel": {

package/build/json/pds-design-tokens-light-mode.json CHANGED Viewed

@@ -4688,6 +4688,35 @@
               "background"
             ]
           }
+        },
+        "critical": {
+          "border": {
+            "value": "#ca3521",
+            "public": true,
+            "isReferenceToInternal": true,
+            "filePath": "tokens/color/alias/panel.light.json",
+            "isSource": true,
+            "original": {
+              "value": "{color.light-mode.semantic.critical.foreground.value}",
+              "public": true,
+              "isReferenceToInternal": true
+            },
+            "name": "color-light-mode-panel-critical-border",
+            "attributes": {
+              "category": "color",
+              "type": "light-mode",
+              "item": "panel",
+              "subitem": "critical",
+              "state": "border"
+            },
+            "path": [
+              "color",
+              "light-mode",
+              "panel",
+              "critical",
+              "border"
+            ]
+          }
         }
       },
       "expansion-panel": {

package/build/json/pds-design-tokens.json CHANGED Viewed

@@ -1553,11 +1553,11 @@
         ]
       },
       "css-import": {
-        "value": "'https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Source+Code+Pro:wght@400;600&display=swap'",
+        "value": "'https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap'",
         "filePath": "tokens/typography/base/font.json",
         "isSource": true,
         "original": {
-          "value": "'https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,400;0,700;1,400;1,700&family=Poppins:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Source+Code+Pro:wght@400;600&display=swap'"
+          "value": "'https://fonts.googleapis.com/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap'"
         },
         "name": "typography-font-css-import",
         "attributes": {
@@ -1573,6 +1573,27 @@
       }
     },
     "font-weight": {
+      "light": {
+        "value": 300,
+        "public": true,
+        "filePath": "tokens/typography/base/font-weight.json",
+        "isSource": true,
+        "original": {
+          "value": 300,
+          "public": true
+        },
+        "name": "typography-font-weight-light",
+        "attributes": {
+          "category": "typography",
+          "type": "font-weight",
+          "item": "light"
+        },
+        "path": [
+          "typography",
+          "font-weight",
+          "light"
+        ]
+      },
       "regular": {
         "value": 400,
         "public": true,
@@ -1635,27 +1656,6 @@
           "font-weight",
           "bold"
         ]
-      },
-      "extrabold": {
-        "value": 800,
-        "public": true,
-        "filePath": "tokens/typography/base/font-weight.json",
-        "isSource": true,
-        "original": {
-          "value": 800,
-          "public": true
-        },
-        "name": "typography-font-weight-extrabold",
-        "attributes": {
-          "category": "typography",
-          "type": "font-weight",
-          "item": "extrabold"
-        },
-        "path": [
-          "typography",
-          "font-weight",
-          "extrabold"
-        ]
       }
     },
     "letter-spacing": {
@@ -1840,12 +1840,12 @@
     },
     "multiplier": {
       "small": {
-        "value": "0.625",
+        "value": "0.84",
         "public": true,
         "filePath": "tokens/typography/base/multipliers.json",
         "isSource": true,
         "original": {
-          "value": "0.625",
+          "value": "0.84",
           "public": true
         },
         "name": "typography-multiplier-small",
@@ -1861,12 +1861,12 @@
         ]
       },
       "medium": {
-        "value": "0.78",
+        "value": "0.88",
         "public": true,
         "filePath": "tokens/typography/base/multipliers.json",
         "isSource": true,
         "original": {
-          "value": "0.78",
+          "value": "0.88",
           "public": true
         },
         "name": "typography-multiplier-medium",

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
 	"name": "@pantheon-systems/pds-design-tokens",
-	"version": "1.0.0-dev.127",
+	"version": "1.0.0-dev.129",
 	"description": "Design Tokens for the Pantheon Design System",
 	"homepage": "https://pantheon.io",
 	"keywords": [