npm - @pantheon-systems/pds-design-tokens - Versions diffs - 2.0.0-alpha.7 → 2.0.0-alpha.9 - Mend

@pantheon-systems/pds-design-tokens 2.0.0-alpha.7 → 2.0.0-alpha.9

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 (5) hide show

package/build/css/variables.compact.css +7 -7
package/build/css/variables.expanded.css +7 -7
package/build/css/variables.global.css +4 -4
package/build/figma/tokens.json +582 -0
package/package.json +1 -1

package/build/css/variables.compact.css CHANGED Viewed

@@ -1,12 +1,12 @@
 :root, [data-scale="compact"] {
   --pds-typography-size-code-block: 0.9rem;
-  --pds-typography-size-7xl: 4.3rem;
-  --pds-typography-size-6xl: 3.583rem;
-  --pds-typography-size-5xl: 2.986rem;
-  --pds-typography-size-4xl: 2.488rem;
-  --pds-typography-size-3xl: 2.074rem;
-  --pds-typography-size-2xl: 1.728rem;
-  --pds-typography-size-xl: 1.44rem;
+  --pds-typography-size-7xl: clamp(3.44rem, 3.05rem + 1.56vw, 4.3rem);
+  --pds-typography-size-6xl: clamp(2.867rem, 2.54rem + 1.3vw, 3.583rem);
+  --pds-typography-size-5xl: clamp(2.389rem, 2.12rem + 1.09vw, 2.986rem);
+  --pds-typography-size-4xl: clamp(1.991rem, 1.76rem + 0.9vw, 2.488rem);
+  --pds-typography-size-3xl: clamp(1.659rem, 1.47rem + 0.75vw, 2.074rem);
+  --pds-typography-size-2xl: clamp(1.382rem, 1.23rem + 0.63vw, 1.728rem);
+  --pds-typography-size-xl: clamp(1.152rem, 1.02rem + 0.52vw, 1.44rem);
   --pds-typography-size-l: 1.2rem;
   --pds-typography-size-m: 1rem;
   --pds-typography-size-s: 0.833rem;

package/build/css/variables.expanded.css CHANGED Viewed

@@ -1,12 +1,12 @@
 [data-scale="expanded"] {
   --pds-typography-size-code-block: 0.9rem;
-  --pds-typography-size-7xl: 9.969rem;
-  --pds-typography-size-6xl: 7.478rem;
-  --pds-typography-size-5xl: 5.61rem;
-  --pds-typography-size-4xl: 4.209rem;
-  --pds-typography-size-3xl: 3.157rem;
-  --pds-typography-size-2xl: 2.369rem;
-  --pds-typography-size-xl: 1.777rem;
+  --pds-typography-size-7xl: clamp(7.975rem, 7.07rem + 3.63vw, 9.969rem);
+  --pds-typography-size-6xl: clamp(5.983rem, 5.3rem + 2.72vw, 7.478rem);
+  --pds-typography-size-5xl: clamp(4.488rem, 3.98rem + 2.04vw, 5.61rem);
+  --pds-typography-size-4xl: clamp(3.367rem, 2.98rem + 1.53vw, 4.209rem);
+  --pds-typography-size-3xl: clamp(2.526rem, 2.24rem + 1.15vw, 3.157rem);
+  --pds-typography-size-2xl: clamp(1.895rem, 1.68rem + 0.86vw, 2.369rem);
+  --pds-typography-size-xl: clamp(1.422rem, 1.26rem + 0.65vw, 1.777rem);
   --pds-typography-size-l: 1.333rem;
   --pds-typography-size-m: 1rem;
   --pds-typography-size-s: 0.75rem;

package/build/css/variables.global.css CHANGED Viewed

@@ -89,10 +89,10 @@
   --pds-typography-fw-semibold: 600;
   --pds-typography-fw-bold: 700;
   --pds-typography-font-css-import: 'https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Mona+Sans:ital,wght@0,200..900;1,200..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap';
-  --pds-typography-ls-xl: 6%;
-  --pds-typography-ls-l: 4%;
-  --pds-typography-ls-m: 2%;
-  --pds-typography-ls-s: 1%;
+  --pds-typography-ls-xl: 0.06em;
+  --pds-typography-ls-l: 0.04em;
+  --pds-typography-ls-m: 0.02em;
+  --pds-typography-ls-s: 0.01em;
   --pds-typography-lh-xl: 195%;
   --pds-typography-lh-l: 165%;
   --pds-typography-lh-m: 140%;

package/build/figma/tokens.json CHANGED Viewed

@@ -11738,6 +11738,588 @@
       }
     }
   },
+  "compact-mobile-primitive": {
+    "primitive": {
+      "typography": {
+        "size": {
+          "7XL": {
+            "value": 55.04,
+            "type": "fontSize",
+            "$extensions": {
+              "public": true,
+              "defaultUnit": "rem",
+              "mathExpression": true,
+              "com.figma": {
+                "scopes": [
+                  "FONT_SIZE"
+                ],
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-typography-size-7xl"
+                }
+              }
+            }
+          },
+          "6XL": {
+            "value": 45.862,
+            "type": "fontSize",
+            "$extensions": {
+              "public": true,
+              "defaultUnit": "rem",
+              "mathExpression": true,
+              "com.figma": {
+                "scopes": [
+                  "FONT_SIZE"
+                ],
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-typography-size-6xl"
+                }
+              }
+            }
+          },
+          "5XL": {
+            "value": 38.221,
+            "type": "fontSize",
+            "$extensions": {
+              "public": true,
+              "defaultUnit": "rem",
+              "mathExpression": true,
+              "com.figma": {
+                "scopes": [
+                  "FONT_SIZE"
+                ],
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-typography-size-5xl"
+                }
+              }
+            }
+          },
+          "4XL": {
+            "value": 31.846,
+            "type": "fontSize",
+            "$extensions": {
+              "public": true,
+              "defaultUnit": "rem",
+              "mathExpression": true,
+              "com.figma": {
+                "scopes": [
+                  "FONT_SIZE"
+                ],
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-typography-size-4xl"
+                }
+              }
+            }
+          },
+          "3XL": {
+            "value": 26.547,
+            "type": "fontSize",
+            "$extensions": {
+              "public": true,
+              "defaultUnit": "rem",
+              "mathExpression": true,
+              "com.figma": {
+                "scopes": [
+                  "FONT_SIZE"
+                ],
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-typography-size-3xl"
+                }
+              }
+            }
+          },
+          "2XL": {
+            "value": 22.118,
+            "type": "fontSize",
+            "$extensions": {
+              "public": true,
+              "defaultUnit": "rem",
+              "mathExpression": true,
+              "com.figma": {
+                "scopes": [
+                  "FONT_SIZE"
+                ],
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-typography-size-2xl"
+                }
+              }
+            }
+          },
+          "XL": {
+            "value": 18.432,
+            "type": "fontSize",
+            "$extensions": {
+              "public": true,
+              "defaultUnit": "rem",
+              "mathExpression": true,
+              "com.figma": {
+                "scopes": [
+                  "FONT_SIZE"
+                ],
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-typography-size-xl"
+                }
+              }
+            }
+          },
+          "L": {
+            "value": 19.2,
+            "type": "fontSize",
+            "$extensions": {
+              "public": true,
+              "defaultUnit": "rem",
+              "mathExpression": true,
+              "com.figma": {
+                "scopes": [
+                  "FONT_SIZE"
+                ],
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-typography-size-l"
+                }
+              }
+            }
+          },
+          "M": {
+            "value": 16,
+            "type": "fontSize",
+            "$extensions": {
+              "public": true,
+              "defaultUnit": "rem",
+              "mathExpression": true,
+              "com.figma": {
+                "scopes": [
+                  "FONT_SIZE"
+                ],
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-typography-size-m"
+                }
+              }
+            }
+          },
+          "S": {
+            "value": 13.328,
+            "type": "fontSize",
+            "$extensions": {
+              "public": true,
+              "defaultUnit": "rem",
+              "mathExpression": true,
+              "com.figma": {
+                "scopes": [
+                  "FONT_SIZE"
+                ],
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-typography-size-s"
+                }
+              }
+            }
+          },
+          "XS": {
+            "value": 11.104,
+            "type": "fontSize",
+            "$extensions": {
+              "public": true,
+              "defaultUnit": "rem",
+              "mathExpression": true,
+              "com.figma": {
+                "scopes": [
+                  "FONT_SIZE"
+                ],
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-typography-size-xs"
+                }
+              }
+            }
+          },
+          "2XS": {
+            "value": 9.248,
+            "type": "fontSize",
+            "$extensions": {
+              "public": true,
+              "defaultUnit": "rem",
+              "mathExpression": true,
+              "com.figma": {
+                "scopes": [
+                  "FONT_SIZE"
+                ],
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-typography-size-2xs"
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  "compact-mobile-semantic": {
+    "semantic": {
+      "typography": {
+        "size": {
+          "default": {
+            "value": "{typography.size.compact-mode.M}",
+            "type": "fontSize",
+            "$extensions": {
+              "public": true,
+              "resolveValue": true,
+              "com.figma": {
+                "scopes": [
+                  "FONT_SIZE"
+                ],
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-typography-size-default"
+                }
+              }
+            }
+          },
+          "input-label": {
+            "value": "{typography.size.compact-mode.M}",
+            "type": "fontSize",
+            "$extensions": {
+              "public": true,
+              "resolveValue": true,
+              "com.figma": {
+                "scopes": [
+                  "FONT_SIZE"
+                ],
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-typography-size-input-label"
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  "compact-mobile-component": {
+    "component": {
+      "typography": {
+        "size": {
+          "code-block": {
+            "value": 14.4,
+            "type": "fontSize",
+            "$extensions": {
+              "public": true,
+              "defaultUnit": "rem",
+              "com.figma": {
+                "scopes": [
+                  "FONT_SIZE"
+                ],
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-typography-size-code-block"
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  "expanded-mobile-primitive": {
+    "primitive": {
+      "typography": {
+        "size": {
+          "7XL": {
+            "value": 127.603,
+            "type": "fontSize",
+            "$extensions": {
+              "public": true,
+              "defaultUnit": "rem",
+              "mathExpression": true,
+              "com.figma": {
+                "scopes": [
+                  "FONT_SIZE"
+                ],
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-typography-size-7xl"
+                }
+              }
+            }
+          },
+          "6XL": {
+            "value": 95.718,
+            "type": "fontSize",
+            "$extensions": {
+              "public": true,
+              "defaultUnit": "rem",
+              "mathExpression": true,
+              "com.figma": {
+                "scopes": [
+                  "FONT_SIZE"
+                ],
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-typography-size-6xl"
+                }
+              }
+            }
+          },
+          "5XL": {
+            "value": 71.808,
+            "type": "fontSize",
+            "$extensions": {
+              "public": true,
+              "defaultUnit": "rem",
+              "mathExpression": true,
+              "com.figma": {
+                "scopes": [
+                  "FONT_SIZE"
+                ],
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-typography-size-5xl"
+                }
+              }
+            }
+          },
+          "4XL": {
+            "value": 53.875,
+            "type": "fontSize",
+            "$extensions": {
+              "public": true,
+              "defaultUnit": "rem",
+              "mathExpression": true,
+              "com.figma": {
+                "scopes": [
+                  "FONT_SIZE"
+                ],
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-typography-size-4xl"
+                }
+              }
+            }
+          },
+          "3XL": {
+            "value": 40.41,
+            "type": "fontSize",
+            "$extensions": {
+              "public": true,
+              "defaultUnit": "rem",
+              "mathExpression": true,
+              "com.figma": {
+                "scopes": [
+                  "FONT_SIZE"
+                ],
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-typography-size-3xl"
+                }
+              }
+            }
+          },
+          "2XL": {
+            "value": 30.323,
+            "type": "fontSize",
+            "$extensions": {
+              "public": true,
+              "defaultUnit": "rem",
+              "mathExpression": true,
+              "com.figma": {
+                "scopes": [
+                  "FONT_SIZE"
+                ],
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-typography-size-2xl"
+                }
+              }
+            }
+          },
+          "XL": {
+            "value": 22.746,
+            "type": "fontSize",
+            "$extensions": {
+              "public": true,
+              "defaultUnit": "rem",
+              "mathExpression": true,
+              "com.figma": {
+                "scopes": [
+                  "FONT_SIZE"
+                ],
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-typography-size-xl"
+                }
+              }
+            }
+          },
+          "L": {
+            "value": 21.328,
+            "type": "fontSize",
+            "$extensions": {
+              "public": true,
+              "defaultUnit": "rem",
+              "mathExpression": true,
+              "com.figma": {
+                "scopes": [
+                  "FONT_SIZE"
+                ],
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-typography-size-l"
+                }
+              }
+            }
+          },
+          "M": {
+            "value": 16,
+            "type": "fontSize",
+            "$extensions": {
+              "public": true,
+              "defaultUnit": "rem",
+              "mathExpression": true,
+              "com.figma": {
+                "scopes": [
+                  "FONT_SIZE"
+                ],
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-typography-size-m"
+                }
+              }
+            }
+          },
+          "S": {
+            "value": 12,
+            "type": "fontSize",
+            "$extensions": {
+              "public": true,
+              "defaultUnit": "rem",
+              "mathExpression": true,
+              "com.figma": {
+                "scopes": [
+                  "FONT_SIZE"
+                ],
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-typography-size-s"
+                }
+              }
+            }
+          },
+          "XS": {
+            "value": 9.008,
+            "type": "fontSize",
+            "$extensions": {
+              "public": true,
+              "defaultUnit": "rem",
+              "mathExpression": true,
+              "com.figma": {
+                "scopes": [
+                  "FONT_SIZE"
+                ],
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-typography-size-xs"
+                }
+              }
+            }
+          },
+          "2XS": {
+            "value": 6.752,
+            "type": "fontSize",
+            "$extensions": {
+              "public": true,
+              "defaultUnit": "rem",
+              "mathExpression": true,
+              "com.figma": {
+                "scopes": [
+                  "FONT_SIZE"
+                ],
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-typography-size-2xs"
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  "expanded-mobile-semantic": {
+    "semantic": {
+      "typography": {
+        "size": {
+          "default": {
+            "value": "{typography.size.expanded-mode.M}",
+            "type": "fontSize",
+            "$extensions": {
+              "public": true,
+              "resolveValue": true,
+              "com.figma": {
+                "scopes": [
+                  "FONT_SIZE"
+                ],
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-typography-size-default"
+                }
+              }
+            }
+          },
+          "input-label": {
+            "value": "{typography.size.expanded-mode.M}",
+            "type": "fontSize",
+            "$extensions": {
+              "public": true,
+              "resolveValue": true,
+              "com.figma": {
+                "scopes": [
+                  "FONT_SIZE"
+                ],
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-typography-size-input-label"
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  },
+  "expanded-mobile-component": {
+    "component": {
+      "typography": {
+        "size": {
+          "code-block": {
+            "value": 14.4,
+            "type": "fontSize",
+            "$extensions": {
+              "public": true,
+              "defaultUnit": "rem",
+              "com.figma": {
+                "scopes": [
+                  "FONT_SIZE"
+                ],
+                "exportAs": "variable",
+                "codeSyntax": {
+                  "WEB": "--pds-typography-size-code-block"
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  },
   "$themes": [
     {
       "id": "light-compact",

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
 	"name": "@pantheon-systems/pds-design-tokens",
 	"description": "Design Tokens for the Pantheon Design System",
-	"version": "2.0.0-alpha.7",
+	"version": "2.0.0-alpha.9",
 	"publishConfig": {
 		"access": "public",
 		"registry": "https://registry.npmjs.org/",