add character limit tokens for gcds-heading

cds-snc · Oct 19, 2023 · 03639c3 · 03639c3
1 parent 946bbfc
commit 03639c3
Show file tree

Hide file tree

Showing 9 changed files with 101 additions and 7 deletions.
diff --git a/build/figma/figma.tokens.json b/build/figma/figma.tokens.json
@@ -2547,6 +2547,32 @@
       }
     },
     "heading": {
+      "characterLimit": {
+        "h1": {
+          "value": "31ch",
+          "type": "sizing"
+        },
+        "h2": {
+          "value": "35ch",
+          "type": "sizing"
+        },
+        "h3": {
+          "value": "40ch",
+          "type": "sizing"
+        },
+        "h4": {
+          "value": "45ch",
+          "type": "sizing"
+        },
+        "h5": {
+          "value": "50ch",
+          "type": "sizing"
+        },
+        "h6": {
+          "value": "57ch",
+          "type": "sizing"
+        }
+      },
       "default": {
         "text": {
           "value": "#333333",

diff --git a/build/web/css/.css b/build/web/css/.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 19 Oct 2023 17:50:31 GMT
+ * Generated on Thu, 19 Oct 2023 18:11:33 GMT
  */
 
 :root {
@@ -484,6 +484,12 @@
   --gcds-header-container-max-width: 71.25rem;
   --gcds-header-margin: 0 0 0.75rem;
   --gcds-header-skiptonav-top: 1.5rem;
+  --gcds-heading-character-limit-h1: 31ch;
+  --gcds-heading-character-limit-h2: 35ch;
+  --gcds-heading-character-limit-h3: 40ch;
+  --gcds-heading-character-limit-h4: 45ch;
+  --gcds-heading-character-limit-h5: 50ch;
+  --gcds-heading-character-limit-h6: 57ch;
   --gcds-heading-default-text: #333333;
   --gcds-heading-h1-border-background: #d3080c;
   --gcds-heading-h1-border-height: 0.375rem;

diff --git a/build/web/css/components.css b/build/web/css/components.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 19 Oct 2023 17:50:31 GMT
+ * Generated on Thu, 19 Oct 2023 18:11:33 GMT
  */
 
 :root {
@@ -346,6 +346,12 @@
   --gcds-header-container-max-width: 71.25rem;
   --gcds-header-margin: 0 0 0.75rem;
   --gcds-header-skiptonav-top: 1.5rem;
+  --gcds-heading-character-limit-h1: 31ch;
+  --gcds-heading-character-limit-h2: 35ch;
+  --gcds-heading-character-limit-h3: 40ch;
+  --gcds-heading-character-limit-h4: 45ch;
+  --gcds-heading-character-limit-h5: 50ch;
+  --gcds-heading-character-limit-h6: 57ch;
   --gcds-heading-default-text: #333333;
   --gcds-heading-h1-border-background: #d3080c;
   --gcds-heading-h1-border-height: 0.375rem;

diff --git a/build/web/css/components/heading.css b/build/web/css/components/heading.css
@@ -1,9 +1,15 @@
 /**
  * Do not edit directly
- * Generated on Thu, 05 Oct 2023 20:55:52 GMT
+ * Generated on Thu, 19 Oct 2023 18:11:33 GMT
  */
 
 :root {
+  --gcds-heading-character-limit-h1: 31ch;
+  --gcds-heading-character-limit-h2: 35ch;
+  --gcds-heading-character-limit-h3: 40ch;
+  --gcds-heading-character-limit-h4: 45ch;
+  --gcds-heading-character-limit-h5: 50ch;
+  --gcds-heading-character-limit-h6: 57ch;
   --gcds-heading-default-text: #333333;
   --gcds-heading-h1-border-background: #d3080c;
   --gcds-heading-h1-border-height: 0.375rem;

diff --git a/build/web/scss/.scss b/build/web/scss/.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 19 Oct 2023 17:50:30 GMT
+// Generated on Thu, 19 Oct 2023 18:11:33 GMT
 
 $gcds-color-blue-100: #d7e5f5;
 $gcds-color-blue-500: #6584a6; // Must contrast 3:1 with white
@@ -482,6 +482,12 @@ $gcds-header-brand-toggle-padding: 0 1.125rem;
 $gcds-header-container-max-width: 71.25rem;
 $gcds-header-margin: 0 0 0.75rem;
 $gcds-header-skiptonav-top: 1.5rem;
+$gcds-heading-character-limit-h1: 31ch;
+$gcds-heading-character-limit-h2: 35ch;
+$gcds-heading-character-limit-h3: 40ch;
+$gcds-heading-character-limit-h4: 45ch;
+$gcds-heading-character-limit-h5: 50ch;
+$gcds-heading-character-limit-h6: 57ch;
 $gcds-heading-default-text: #333333;
 $gcds-heading-h1-border-background: #d3080c;
 $gcds-heading-h1-border-height: 0.375rem;

diff --git a/build/web/scss/components.scss b/build/web/scss/components.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 19 Oct 2023 17:50:30 GMT
+// Generated on Thu, 19 Oct 2023 18:11:33 GMT
 
 $gcds-link-font: 400 1.25rem/120% "Noto Sans", sans-serif;
 $gcds-link-focus-background: #0535d2;
@@ -344,6 +344,12 @@ $gcds-header-brand-toggle-padding: 0 1.125rem;
 $gcds-header-container-max-width: 71.25rem;
 $gcds-header-margin: 0 0 0.75rem;
 $gcds-header-skiptonav-top: 1.5rem;
+$gcds-heading-character-limit-h1: 31ch;
+$gcds-heading-character-limit-h2: 35ch;
+$gcds-heading-character-limit-h3: 40ch;
+$gcds-heading-character-limit-h4: 45ch;
+$gcds-heading-character-limit-h5: 50ch;
+$gcds-heading-character-limit-h6: 57ch;
 $gcds-heading-default-text: #333333;
 $gcds-heading-h1-border-background: #d3080c;
 $gcds-heading-h1-border-height: 0.375rem;

diff --git a/build/web/scss/components/heading.scss b/build/web/scss/components/heading.scss
@@ -1,7 +1,13 @@
 
 // Do not edit directly
-// Generated on Thu, 05 Oct 2023 20:55:52 GMT
+// Generated on Thu, 19 Oct 2023 18:11:33 GMT
 
+$gcds-heading-character-limit-h1: 31ch;
+$gcds-heading-character-limit-h2: 35ch;
+$gcds-heading-character-limit-h3: 40ch;
+$gcds-heading-character-limit-h4: 45ch;
+$gcds-heading-character-limit-h5: 50ch;
+$gcds-heading-character-limit-h6: 57ch;
 $gcds-heading-default-text: #333333;
 $gcds-heading-h1-border-background: #d3080c;
 $gcds-heading-h1-border-height: 0.375rem;

diff --git a/build/web/scss/tokens.scss b/build/web/scss/tokens.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 19 Oct 2023 17:50:30 GMT
+// Generated on Thu, 19 Oct 2023 18:11:33 GMT
 
 $gcds-color-blue-100: #d7e5f5;
 $gcds-color-blue-500: #6584a6; // Must contrast 3:1 with white
@@ -482,6 +482,12 @@ $gcds-header-brand-toggle-padding: 0 1.125rem;
 $gcds-header-container-max-width: 71.25rem;
 $gcds-header-margin: 0 0 0.75rem;
 $gcds-header-skiptonav-top: 1.5rem;
+$gcds-heading-character-limit-h1: 31ch;
+$gcds-heading-character-limit-h2: 35ch;
+$gcds-heading-character-limit-h3: 40ch;
+$gcds-heading-character-limit-h4: 45ch;
+$gcds-heading-character-limit-h5: 50ch;
+$gcds-heading-character-limit-h6: 57ch;
 $gcds-heading-default-text: #333333;
 $gcds-heading-h1-border-background: #d3080c;
 $gcds-heading-h1-border-height: 0.375rem;

diff --git a/tokens/components/heading/tokens.json b/tokens/components/heading/tokens.json
@@ -1,5 +1,31 @@
 {
   "heading": {
+    "characterLimit": {
+      "h1": {
+        "value": "31ch",
+        "type": "sizing"
+      },
+      "h2": {
+        "value": "35ch",
+        "type": "sizing"
+      },
+      "h3": {
+        "value": "40ch",
+        "type": "sizing"
+      },
+      "h4": {
+        "value": "45ch",
+        "type": "sizing"
+      },
+      "h5": {
+        "value": "50ch",
+        "type": "sizing"
+      },
+      "h6": {
+        "value": "57ch",
+        "type": "sizing"
+      }
+    },
     "default": {
       "text": {
         "value": "{text.primary.value}",