Hyphenation mixin and deleted lines rule

Amsterdam · Jan 26, 2024 · ff88525 · ff88525
1 parent 95423b2
commit ff88525
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 5 deletions.
diff --git a/packages/css/src/common/hyphenation.scss b/packages/css/src/common/hyphenation.scss
@@ -0,0 +1,6 @@
+@mixin hyphenation {
+  hyphenate-limit-chars: 12 8 4;
+  hyphens: auto;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
diff --git a/packages/css/src/components/heading/heading.scss b/packages/css/src/components/heading/heading.scss
@@ -3,6 +3,8 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
+@import "../../common/hyphenation";
+
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
@@ -15,12 +17,8 @@
   color: var(--amsterdam-heading-color);
   font-family: var(--amsterdam-heading-font-family);
   font-weight: var(--amsterdam-heading-font-weight);
-  hyphenate-limit-chars: 12 8 4;
-  hyphenate-limit-lines: 2;
-  hyphens: auto;
-  overflow-wrap: break-word;
-  word-break: break-word;
 
+  @include hyphenation;
   @include reset;
 }
 

diff --git a/packages/css/src/components/page-heading/page-heading.scss b/packages/css/src/components/page-heading/page-heading.scss
@@ -3,6 +3,8 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
+@import "../../common/hyphenation";
+
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
@@ -18,6 +20,7 @@
   font-weight: var(--amsterdam-page-heading-font-weight);
   line-height: var(--amsterdam-page-heading-spacious-line-height);
 
+  @include hyphenation;
   @include reset;
 
   .amsterdam-theme--compact & {

diff --git a/packages/css/src/components/top-task-link/top-task-link.scss b/packages/css/src/components/top-task-link/top-task-link.scss
@@ -3,6 +3,8 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
+@import "../../common/hyphenation";
+
 .amsterdam-top-task-link {
   break-inside: avoid;
   display: flex;
@@ -32,6 +34,7 @@
     line-height: var(--amsterdam-top-task-link-label-compact-line-height);
   }
 
+  @include hyphenation;
   @include reset;
 }
 

diff --git a/proprietary/tokens/src/common/amsterdam/hyphenation.tokens.json b/proprietary/tokens/src/common/amsterdam/hyphenation.tokens.json
@@ -0,0 +1,11 @@
+{
+  "amsterdam": {
+    "hyphenation": {
+      "hyphenate-limit-chars": { "value": "12 8 4" },
+      "hyphenate-limit-lines": { "value": "2" },
+      "hyphens": { "value": "auto" },
+      "overflow-wrap": { "value": "break-word" },
+      "word-break": { "value": "break-word" }
+    }
+  }
+}