💄 Typografische schaal

Author: rogier-barendregt

_site/style/_rijkshuisstijl.css

@@ -166,7 +166,7 @@
 	--rijkshuisstijl-size-80: 5rem;
 	--rijkshuisstijl-size-88: 5.5rem;
 	--rijkshuisstijl-size-96: 6rem;
-	--rijkshuisstijl-size-base: 0.5rem; /** Base size for calculation. Defaults to 8 to follow 8px grid. */
+	--rijkshuisstijl-size-base: 0.5rem; /** Basisgrootte voor berekeningen. Volgt het standaard 8pt grid. */
 	--rijkshuisstijl-space-1: 0.0625rem;
 	--rijkshuisstijl-space-12: 0.75rem;
 	--rijkshuisstijl-space-16: 1rem;
@@ -186,9 +186,9 @@
 	--rijkshuisstijl-text-font-family-monospace: monaco, consolas, "Lucida Console", monospace;
 	--rijkshuisstijl-text-font-size-2xl: 1.5rem;
 	--rijkshuisstijl-text-font-size-2xs: 0.6667rem;
-	--rijkshuisstijl-text-font-size-3xl: 2rem;
-	--rijkshuisstijl-text-font-size-4xl: 2.5rem;
-	--rijkshuisstijl-text-font-size-base: 1rem; /** Modifier voor de schaal van overige groottes. */
+	--rijkshuisstijl-text-font-size-3xl: 1.75rem;
+	--rijkshuisstijl-text-font-size-4xl: 2rem;
+	--rijkshuisstijl-text-font-size-base: 1rem; /** Basisgrootte voor berekening van de schaal voor overige groottes. */
 	--rijkshuisstijl-text-font-size-lg: 1.125rem;
 	--rijkshuisstijl-text-font-size-md: 1rem;
 	--rijkshuisstijl-text-font-size-sm: 0.8889rem;

_site/style/_toepassing.css

@@ -178,7 +178,7 @@
 	--toepassing-space-sm: var(--rijkshuisstijl-space-12);
 	--toepassing-space-xl: var(--rijkshuisstijl-space-32);
 	--toepassing-space-xs: var(--rijkshuisstijl-space-8);
-	--toepassing-text-badge: var(--toepassing-text-font-weight-bold) var(--toepassing-text-size-body-2xs)/var(--rijkshuisstijl-text-line-height-md) var(--toepassing-text-font-family-body);
+	--toepassing-text-badge: var(--toepassing-text-font-weight-semi-bold) var(--toepassing-text-size-body-2xs)/var(--rijkshuisstijl-text-line-height-md) var(--toepassing-text-font-family-body);
 	--toepassing-text-code: var(--toepassing-text-font-weight-semi-bold) var(--toepassing-text-size-body-sm) var(--rijkshuisstijl-text-font-family-monospace);
 	--toepassing-text-decoration-hyperlink: underline solid currentcolor var(--toepassing-border-width-xs);
 	--toepassing-text-font-family-body: var(--rijkshuisstijl-text-font-family-default);

style-dictionary/tokens/merged.json

@@ -1349,7 +1349,7 @@
     "base": {
       "$type": "sizing",
       "$value": "8",
-      "$description": "Base size for calculation. Defaults to 8 to follow 8px grid."
+      "$description": "Basisgrootte voor berekeningen. Volgt het standaard 8pt grid."
     },
     "5xs": {
       "$type": "sizing",
@@ -1468,7 +1468,7 @@
       "base": {
         "$type": "fontSizes",
         "$value": "16",
-        "$description": "Modifier voor de schaal van overige groottes."
+        "$description": "Basisgrootte voor berekening van de schaal voor overige groottes."
       },
       "2xs": {
         "$type": "fontSizes",
@@ -1500,11 +1500,11 @@
       },
       "3xl": {
         "$type": "fontSizes",
-        "$value": "{text.font-size.base} * 2"
+        "$value": "{text.font-size.base} * 1.75"
       },
       "4xl": {
         "$type": "fontSizes",
-        "$value": "{text.font-size.base} * 2.5"
+        "$value": "{text.font-size.base} * 2"
       }
     },
     "line-height": {

style/_rijkshuisstijl.css

@@ -166,7 +166,7 @@
 	--rijkshuisstijl-size-80: 5rem;
 	--rijkshuisstijl-size-88: 5.5rem;
 	--rijkshuisstijl-size-96: 6rem;
-	--rijkshuisstijl-size-base: 0.5rem; /** Base size for calculation. Defaults to 8 to follow 8px grid. */
+	--rijkshuisstijl-size-base: 0.5rem; /** Basisgrootte voor berekeningen. Volgt het standaard 8pt grid. */
 	--rijkshuisstijl-space-1: 0.0625rem;
 	--rijkshuisstijl-space-12: 0.75rem;
 	--rijkshuisstijl-space-16: 1rem;
@@ -186,9 +186,9 @@
 	--rijkshuisstijl-text-font-family-monospace: monaco, consolas, "Lucida Console", monospace;
 	--rijkshuisstijl-text-font-size-2xl: 1.5rem;
 	--rijkshuisstijl-text-font-size-2xs: 0.6667rem;
-	--rijkshuisstijl-text-font-size-3xl: 2rem;
-	--rijkshuisstijl-text-font-size-4xl: 2.5rem;
-	--rijkshuisstijl-text-font-size-base: 1rem; /** Modifier voor de schaal van overige groottes. */
+	--rijkshuisstijl-text-font-size-3xl: 1.75rem;
+	--rijkshuisstijl-text-font-size-4xl: 2rem;
+	--rijkshuisstijl-text-font-size-base: 1rem; /** Basisgrootte voor berekening van de schaal voor overige groottes. */
 	--rijkshuisstijl-text-font-size-lg: 1.125rem;
 	--rijkshuisstijl-text-font-size-md: 1rem;
 	--rijkshuisstijl-text-font-size-sm: 0.8889rem;

style/_toepassing.css

@@ -178,7 +178,7 @@
 	--toepassing-space-sm: var(--rijkshuisstijl-space-12);
 	--toepassing-space-xl: var(--rijkshuisstijl-space-32);
 	--toepassing-space-xs: var(--rijkshuisstijl-space-8);
-	--toepassing-text-badge: var(--toepassing-text-font-weight-bold) var(--toepassing-text-size-body-2xs)/var(--rijkshuisstijl-text-line-height-md) var(--toepassing-text-font-family-body);
+	--toepassing-text-badge: var(--toepassing-text-font-weight-semi-bold) var(--toepassing-text-size-body-2xs)/var(--rijkshuisstijl-text-line-height-md) var(--toepassing-text-font-family-body);
 	--toepassing-text-code: var(--toepassing-text-font-weight-semi-bold) var(--toepassing-text-size-body-sm) var(--rijkshuisstijl-text-font-family-monospace);
 	--toepassing-text-decoration-hyperlink: underline solid currentcolor var(--toepassing-border-width-xs);
 	--toepassing-text-font-family-body: var(--rijkshuisstijl-text-font-family-default);