Use tighter letter-spacing for Display (#2909)

Author: connor-baer

.changeset/early-gifts-bow.md

@@ -0,0 +1,5 @@
+---
+"@sumup-oss/circuit-ui": minor
+---
+
+Applied tighter letter spacing to the Display component.

.changeset/gold-monkeys-juggle.md

@@ -0,0 +1,5 @@
+---
+"@sumup-oss/design-tokens": minor
+---
+
+Added the `--cui-letter-spacing-tight` token. Use it for very large typography.

packages/circuit-ui/components/Display/Display.module.css

@@ -2,7 +2,7 @@
   margin: 0;
   font-weight: var(--cui-font-weight-bold);
   color: var(--cui-fg-normal);
-  letter-spacing: var(--cui-letter-spacing);
+  letter-spacing: var(--cui-letter-spacing-tight);
 }
 
 /* Weights */

packages/design-tokens/themes/schema.ts

@@ -237,6 +237,7 @@ export const schema = [
   { name: '--cui-numeral-s-font-size', type: 'dimension' },
   { name: '--cui-numeral-s-line-height', type: 'dimension' },
   { name: '--cui-letter-spacing', type: 'dimension' },
+  { name: '--cui-letter-spacing-tight', type: 'dimension' },
   /* eslint-disable @sumup-oss/circuit-ui/no-deprecated-custom-properties */
   {
     name: '--cui-typography-headline-one-font-size',

packages/design-tokens/themes/shared.ts

@@ -92,6 +92,11 @@ export const shared = [
     value: '-0.01375rem',
     type: 'dimension',
   },
+  {
+    name: '--cui-letter-spacing-tight',
+    value: '-0.08rem',
+    type: 'dimension',
+  },
   /* Icon sizes */
   {
     name: '--cui-icon-sizes-kilo',