@sumup-oss/design-tokens 9.1.0-next.1 → 10.0.0

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 (44) hide show
  1. package/README.md +20 -15
  2. package/consumer-scoped.css +268 -0
  3. package/consumer.css +537 -0
  4. package/dark-scoped.css +163 -130
  5. package/dark.css +382 -298
  6. package/dist/cjs/scripts/build.d.ts +1 -1
  7. package/dist/cjs/scripts/build.js +47 -2
  8. package/dist/cjs/themes/consumer.d.ts +651 -0
  9. package/dist/cjs/themes/consumer.js +814 -0
  10. package/dist/cjs/themes/dark.d.ts +226 -130
  11. package/dist/cjs/themes/dark.js +250 -130
  12. package/dist/cjs/themes/fonts.d.ts +57 -5
  13. package/dist/cjs/themes/fonts.js +100 -10
  14. package/dist/cjs/themes/legacy/light.d.ts +3 -0
  15. package/dist/cjs/themes/legacy/light.js +7 -4
  16. package/dist/cjs/themes/light.d.ts +193 -97
  17. package/dist/cjs/themes/light.js +217 -97
  18. package/dist/cjs/themes/schema.d.ts +136 -0
  19. package/dist/cjs/themes/schema.js +39 -0
  20. package/dist/cjs/themes/shared.d.ts +74 -17
  21. package/dist/cjs/themes/shared.js +93 -20
  22. package/dist/cjs/types/index.d.ts +3 -3
  23. package/dist/es/scripts/build.d.ts +1 -1
  24. package/dist/es/scripts/build.js +49 -4
  25. package/dist/es/themes/consumer.d.ts +651 -0
  26. package/dist/es/themes/consumer.js +811 -0
  27. package/dist/es/themes/dark.d.ts +226 -130
  28. package/dist/es/themes/dark.js +250 -130
  29. package/dist/es/themes/fonts.d.ts +57 -5
  30. package/dist/es/themes/fonts.js +99 -9
  31. package/dist/es/themes/legacy/light.d.ts +3 -0
  32. package/dist/es/themes/legacy/light.js +7 -4
  33. package/dist/es/themes/light.d.ts +193 -97
  34. package/dist/es/themes/light.js +217 -97
  35. package/dist/es/themes/schema.d.ts +136 -0
  36. package/dist/es/themes/schema.js +39 -0
  37. package/dist/es/themes/shared.d.ts +74 -17
  38. package/dist/es/themes/shared.js +92 -19
  39. package/dist/es/types/index.d.ts +3 -3
  40. package/dynamic.css +899 -719
  41. package/fonts.css +106 -8
  42. package/light-scoped.css +130 -97
  43. package/light.css +316 -232
  44. package/package.json +9 -6
package/README.md CHANGED
@@ -26,8 +26,8 @@ The design tokens are exported as [CSS custom properties](https://developer.mozi
26
26
 
27
27
  ```tsx
28
28
  // app/layout.tsx
29
- import '@sumup-oss/design-tokens/fonts.css';
30
- import '@sumup-oss/design-tokens/light.css';
29
+ import "@sumup-oss/design-tokens/fonts.css";
30
+ import "@sumup-oss/design-tokens/light.css";
31
31
 
32
32
  function App({ Component, pageProps }) {
33
33
  return <Component {...pageProps} />;
@@ -43,32 +43,37 @@ Refer to the [theme documentation](https://circuit.sumup.com/?path=/docs/feature
43
43
  Import the stylesheet that contains the font face declarations globally in your application, such as in a global layout file:
44
44
 
45
45
  ```ts
46
- import '@sumup-oss/design-tokens/fonts.css';
46
+ import "@sumup-oss/design-tokens/fonts.css";
47
47
  ```
48
48
 
49
- To speed up the loading of the fonts, add preload links to the global `<head>` element of your application. Choose which subsets to preload based on the languages your app supports. The available subsets are `latin`, `latin-ext`, `cyrillic`, `cyrillic-ext`, `greek`, `greek-ext`, and `vietnamese`.
49
+ To speed up the loading of the fonts, add preload links to the global `<head>` element of your application. Choose which subsets to preload based on the languages your app supports. The available subsets are `latin-s`, `latin-l`, `cyrillic`, and `greek`.
50
50
 
51
51
  ```html
52
52
  <link
53
53
  rel="preload"
54
- href="https://static.sumup.com/fonts/Inter/Inter-normal-latin.woff2"
54
+ href="https://static.sumup.com/fonts/sumup/sumup-narrow-latin-s.woff2"
55
+ as="font"
56
+ type="font/woff2"
57
+ crossorigin
58
+ />
59
+ <link
60
+ rel="preload"
61
+ href="https://static.sumup.com/fonts/sumup/sumup-black-latin-s.woff2"
55
62
  as="font"
56
63
  type="font/woff2"
57
64
  crossorigin
58
65
  />
59
66
  ```
60
67
 
61
- Do not use Next.js' built-in font optimization as it doesn't support Inter's italic axis.
62
-
63
68
  ### Color schemes
64
69
 
65
70
  #### Single color scheme
66
71
 
67
- For applications that support a single color scheme, import the `@sumup-oss/design-tokens/light.css` or `@sumup-oss/design-tokens/dark.css` themes. They contain the complete set of design tokens, in light and dark mode respectively. The tokens are defined globally on the `:root` element. The themes can be used independently or with a [scoped theme](#scoped-color-scheme).
72
+ For merchant-facing applications that support a single color scheme, import the `@sumup-oss/design-tokens/light.css` or `@sumup-oss/design-tokens/dark.css` themes. For consumer-facing applications, import the `@sumup-oss/design-tokens/consumer.css` theme. The themes contain the complete set of design tokens, in light and dark mode respectively. The tokens are defined globally on the `:root` element. The themes can be used independently or with a [scoped theme](#scoped-color-scheme).
68
73
 
69
74
  #### Scoped color scheme
70
75
 
71
- To apply a different color scheme to a subset of an application, import the `@sumup-oss/design-tokens/light-scoped.css` or `@sumup-oss/design-tokens/dark-scoped.css` themes. They contain only color tokens which are scoped to the `data-color-scheme="light"` and `data-color-scheme="dark"` selectors respectively. The themes must be used alongside a [full theme](#single-color-scheme) to ensure that all design tokens are defined.
76
+ To apply a different color scheme to a subset of an application, import the `@sumup-oss/design-tokens/light-scoped.css`, `@sumup-oss/design-tokens/dark-scoped.css` or `@sumup-oss/design-tokens/consumer-scoped.css` themes. They contain only color tokens which are scoped to the `data-color-scheme="light"`, `data-color-scheme="dark"` and `data-color-scheme="consumer"` selectors respectively. The themes must be used alongside a [full theme](#single-color-scheme) to ensure that all design tokens are defined.
72
77
 
73
78
  #### Multiple color schemes
74
79
 
@@ -84,9 +89,9 @@ Ensure that users have full control over their preferred color mode: dark, light
84
89
  The `light` theme is meant to be used with Emotion.js' [`ThemeProvider`](https://emotion.sh/docs/theming):
85
90
 
86
91
  ```tsx
87
- import { light } from '@sumup-oss/design-tokens';
88
- import { ThemeProvider } from '@emotion/react';
89
- import styled from '@emotion/styled';
92
+ import { light } from "@sumup-oss/design-tokens";
93
+ import { ThemeProvider } from "@emotion/react";
94
+ import styled from "@emotion/styled";
90
95
 
91
96
  const Bold = styled.strong`
92
97
  font-weight: ${(p) => p.theme.fontWeight.bold};
@@ -108,10 +113,10 @@ The theme is a plain JavaScript object, so you can use it in other ways, too.
108
113
  The package exports a `Theme` interface that can be used to augment Emotion.js' types as described in the [Emotion.js docs](https://emotion.sh/docs/typescript#define-a-theme):
109
114
 
110
115
  ```ts
111
- import '@emotion/react';
112
- import type { Theme as CircuitUITheme } from '@sumup-oss/design-tokens';
116
+ import "@emotion/react";
117
+ import type { Theme as CircuitUITheme } from "@sumup-oss/design-tokens";
113
118
 
114
- declare module '@emotion/react' {
119
+ declare module "@emotion/react" {
115
120
  export interface Theme extends CircuitUITheme {}
116
121
  }
117
122
  ```
package/consumer-scoped.css ADDED
@@ -0,0 +1,268 @@
1
+ [data-color-scheme="consumer"] {
2
+ --lightningcss-light: ;
3
+ --lightningcss-dark: initial;
4
+ color-scheme: dark;
5
+ --cui-bg-normal: #250723;
6
+ --cui-bg-normal-hovered: #34152f;
7
+ --cui-bg-normal-pressed: #3f1f39;
8
+ --cui-bg-normal-disabled: rgba(47, 16, 43, .6);
9
+ --cui-bg-subtle: #3a1037;
10
+ --cui-bg-subtle-hovered: #40153c;
11
+ --cui-bg-subtle-pressed: #44193e;
12
+ --cui-bg-subtle-disabled: rgba(58, 16, 55, .6);
13
+ --cui-bg-highlight: #63215e;
14
+ --cui-bg-highlight-hovered: #6b2966;
15
+ --cui-bg-highlight-pressed: #73316e;
16
+ --cui-bg-highlight-disabled: rgba(99, 33, 94, .4);
17
+ --cui-bg-strong: #fbfbf9;
18
+ --cui-bg-strong-hovered: #eeede8;
19
+ --cui-bg-strong-pressed: #dfddd3;
20
+ --cui-bg-strong-disabled: rgba(251, 251, 249, .2);
21
+ --cui-bg-accent: #3a1037;
22
+ --cui-bg-accent-hovered: #421839;
23
+ --cui-bg-accent-pressed: #4a2041;
24
+ --cui-bg-accent-disabled: rgba(58, 16, 55, .6);
25
+ --cui-bg-accent-strong: #fbfbf9;
26
+ --cui-bg-accent-strong-hovered: #eeede8;
27
+ --cui-bg-accent-strong-pressed: #dfddd3;
28
+ --cui-bg-accent-strong-disabled: rgba(251, 251, 249, .15);
29
+ --cui-bg-neutral: rgba(104, 79, 98, .35);
30
+ --cui-bg-neutral-hovered: #4c4646;
31
+ --cui-bg-neutral-pressed: #544e4e;
32
+ --cui-bg-neutral-disabled: rgba(68, 62, 62, .6);
33
+ --cui-bg-neutral-strong: #684f62;
34
+ --cui-bg-neutral-strong-hovered: #6e6262;
35
+ --cui-bg-neutral-strong-pressed: #796c6c;
36
+ --cui-bg-neutral-strong-disabled: rgba(99, 87, 87, .4);
37
+ --cui-bg-success: rgba(32, 184, 57, .2);
38
+ --cui-bg-success-hovered: rgba(37, 193, 63, .2);
39
+ --cui-bg-success-pressed: rgba(43, 203, 69, .2);
40
+ --cui-bg-success-disabled: rgba(32, 184, 57, 0);
41
+ --cui-bg-success-strong: #89ec90;
42
+ --cui-bg-success-strong-hovered: #28cc44;
43
+ --cui-bg-success-strong-pressed: #30d84c;
44
+ --cui-bg-success-strong-disabled: rgba(32, 184, 57, .4);
45
+ --cui-bg-warning: rgba(242, 219, 47, .2);
46
+ --cui-bg-warning-hovered: rgba(255, 178, 51, .2);
47
+ --cui-bg-warning-pressed: rgba(255, 186, 55, .2);
48
+ --cui-bg-warning-disabled: rgba(248, 171, 47, 0);
49
+ --cui-bg-warning-strong: #efdf69;
50
+ --cui-bg-warning-strong-hovered: #fabb50;
51
+ --cui-bg-warning-strong-pressed: #fcc96e;
52
+ --cui-bg-warning-strong-disabled: rgba(248, 171, 47, .4);
53
+ --cui-bg-danger: rgba(255, 75, 90, .2);
54
+ --cui-bg-danger-hovered: rgba(255, 81, 8, .3);
55
+ --cui-bg-danger-pressed: rgba(255, 87, 12, .3);
56
+ --cui-bg-danger-disabled: rgba(255, 76, 5, 0);
57
+ --cui-bg-danger-strong: #ff7d88;
58
+ --cui-bg-danger-strong-hovered: #ff6122;
59
+ --cui-bg-danger-strong-pressed: #ff753a;
60
+ --cui-bg-danger-strong-disabled: rgba(255, 76, 5, .4);
61
+ --cui-bg-promo: rgba(255, 97, 242, .18);
62
+ --cui-bg-promo-hovered: #ff65fa;
63
+ --cui-bg-promo-pressed: #ff69ff;
64
+ --cui-bg-promo-disabled: rgba(255, 97, 242, .6);
65
+ --cui-bg-promo-strong: #ffacf8;
66
+ --cui-bg-promo-strong-hovered: #bb54b1;
67
+ --cui-bg-promo-strong-pressed: #c366bb;
68
+ --cui-bg-promo-strong-disabled: rgba(179, 66, 169, .4);
69
+ --cui-bg-brand: #ff61f2;
70
+ --cui-bg-brand-hovered: #eb58df;
71
+ --cui-bg-brand-pressed: #da4ece;
72
+ --cui-bg-brand-disabled: rgba(255, 97, 242, .4);
73
+ --cui-fg-normal: #fbfbf9;
74
+ --cui-fg-normal-hovered: #fbfbf9;
75
+ --cui-fg-normal-pressed: #fbfbf9;
76
+ --cui-fg-normal-disabled: rgba(251, 251, 249, .4);
77
+ --cui-fg-subtle: rgba(253, 234, 255, .6);
78
+ --cui-fg-subtle-hovered: rgba(255, 255, 255, .5);
79
+ --cui-fg-subtle-pressed: rgba(255, 255, 255, .5);
80
+ --cui-fg-subtle-disabled: rgba(251, 251, 249, 0);
81
+ --cui-fg-placeholder: rgba(251, 251, 249, .3);
82
+ --cui-fg-placeholder-hovered: rgba(255, 255, 255, .3);
83
+ --cui-fg-placeholder-pressed: rgba(255, 255, 255, .3);
84
+ --cui-fg-placeholder-disabled: rgba(251, 251, 249, 0);
85
+ --cui-fg-on-strong: #1e1c1c;
86
+ --cui-fg-on-strong-hovered: #1e1c1c;
87
+ --cui-fg-on-strong-pressed: #1e1c1c;
88
+ --cui-fg-on-strong-disabled: rgba(30, 28, 28, .6);
89
+ --cui-fg-on-strong-subtle: rgba(30, 28, 28, .7);
90
+ --cui-fg-on-strong-subtle-hovered: #3a3635;
91
+ --cui-fg-on-strong-subtle-pressed: #3a3635;
92
+ --cui-fg-on-strong-subtle-disabled: rgba(58, 54, 53, .4);
93
+ --cui-fg-accent: #fbfbf9;
94
+ --cui-fg-accent-hovered: #d2d0ca;
95
+ --cui-fg-accent-pressed: #b8b6b2;
96
+ --cui-fg-accent-disabled: rgba(251, 251, 249, .4);
97
+ --cui-fg-neutral: #ccbdc6;
98
+ --cui-fg-neutral-hovered: #a89da4;
99
+ --cui-fg-neutral-pressed: #b6abb2;
100
+ --cui-fg-neutral-disabled: rgba(154, 141, 148, .4);
101
+ --cui-fg-success: #37f1a4;
102
+ --cui-fg-success-hovered: #47feb6;
103
+ --cui-fg-success-pressed: #57ffc8;
104
+ --cui-fg-success-disabled: rgba(55, 241, 164, .4);
105
+ --cui-fg-warning: #e8e538;
106
+ --cui-fg-warning-hovered: #f3fe58;
107
+ --cui-fg-warning-pressed: #f5ff76;
108
+ --cui-fg-warning-disabled: rgba(241, 238, 55, .4);
109
+ --cui-fg-danger: #ff5866;
110
+ --cui-fg-danger-hovered: #fd6e72;
111
+ --cui-fg-danger-pressed: #fd8086;
112
+ --cui-fg-danger-disabled: rgba(253, 90, 93, .4);
113
+ --cui-fg-promo: #ff7bf4;
114
+ --cui-fg-promo-hovered: #bb54b2;
115
+ --cui-fg-promo-pressed: #c366ba;
116
+ --cui-fg-promo-disabled: rgba(179, 66, 169, .4);
117
+ --cui-fg-brand: #ff61f2;
118
+ --cui-fg-brand-hovered: #eb58df;
119
+ --cui-fg-brand-pressed: #da4ece;
120
+ --cui-fg-brand-disabled: rgba(255, 97, 242, .4);
121
+ --cui-border-normal: rgba(251, 251, 249, .3);
122
+ --cui-border-normal-hovered: rgba(255, 255, 255, .3);
123
+ --cui-border-normal-pressed: rgba(255, 255, 255, .3);
124
+ --cui-border-normal-disabled: rgba(251, 251, 249, 0);
125
+ --cui-border-subtle: rgba(251, 251, 249, .15);
126
+ --cui-border-subtle-hovered: rgba(255, 255, 255, .15);
127
+ --cui-border-subtle-pressed: rgba(255, 255, 255, .15);
128
+ --cui-border-subtle-disabled: rgba(251, 251, 249, 0);
129
+ --cui-border-divider: rgba(251, 251, 249, .1);
130
+ --cui-border-divider-hovered: rgba(255, 255, 255, .3);
131
+ --cui-border-divider-pressed: rgba(255, 255, 255, .3);
132
+ --cui-border-divider-disabled: rgba(251, 251, 249, 0);
133
+ --cui-border-strong: #e3e2d6;
134
+ --cui-border-strong-hovered: #d3d2c5;
135
+ --cui-border-strong-pressed: #c3c1b4;
136
+ --cui-border-strong-disabled: rgba(227, 226, 214, .2);
137
+ --cui-border-accent: #d0cdc3;
138
+ --cui-border-accent-hovered: #a7a294;
139
+ --cui-border-accent-pressed: #8d887c;
140
+ --cui-border-accent-disabled: rgba(208, 205, 195, .4);
141
+ --cui-border-success: #37f1a4;
142
+ --cui-border-success-hovered: #47feb6;
143
+ --cui-border-success-pressed: #57ffc8;
144
+ --cui-border-success-disabled: rgba(55, 241, 164, .4);
145
+ --cui-border-warning: #f1ee37;
146
+ --cui-border-warning-hovered: #f3fe58;
147
+ --cui-border-warning-pressed: #f5ff76;
148
+ --cui-border-warning-disabled: rgba(241, 238, 55, .4);
149
+ --cui-border-danger: #fd5a5d;
150
+ --cui-border-danger-hovered: #fd6e72;
151
+ --cui-border-danger-pressed: #fd8086;
152
+ --cui-border-danger-disabled: rgba(253, 90, 93, .4);
153
+ --cui-border-promo: #b342a9;
154
+ --cui-border-promo-hovered: #bb54b2;
155
+ --cui-border-promo-pressed: #c366ba;
156
+ --cui-border-promo-disabled: rgba(179, 66, 169, .4);
157
+ --cui-border-brand: #ff61f2;
158
+ --cui-border-brand-hovered: #eb58df;
159
+ --cui-border-brand-pressed: #da4ece;
160
+ --cui-border-brand-disabled: rgba(255, 97, 242, .4);
161
+ --cui-bg-overlay: rgba(35, 31, 35, .7);
162
+ --cui-bg-elevated: #322430;
163
+ --cui-border-focus: #fbfbf9;
164
+ --cui-border-radius-bit: 4px;
165
+ --cui-border-radius-byte: 10px;
166
+ --cui-border-radius-kilo: 12px;
167
+ --cui-border-radius-mega: 16px;
168
+ --cui-border-radius-giga: 24px;
169
+ --cui-border-radius-tera: 32px;
170
+ --cui-border-radius-peta: 40px;
171
+ --cui-border-radius-circle: 100%;
172
+ --cui-border-radius-pill: 999999px;
173
+ --cui-border-width-kilo: 1px;
174
+ --cui-border-width-mega: 2px;
175
+ --cui-font-stack-default: "SumUp Narrow", "SumUp Narrow fallback", Arial, system-ui, sans-serif, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
176
+ --cui-font-stack-display: "SumUp Black", "SumUp Black fallback", Arial, system-ui, sans-serif, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
177
+ --cui-font-stack-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
178
+ --cui-font-weight-regular: 375;
179
+ --cui-font-weight-semibold: 550;
180
+ --cui-font-weight-bold: 650;
181
+ --cui-letter-spacing: 0rem;
182
+ --cui-letter-spacing-tight: 0rem;
183
+ --cui-icon-sizes-kilo: 16px;
184
+ --cui-icon-sizes-mega: 24px;
185
+ --cui-icon-sizes-giga: 32px;
186
+ --cui-icon-sizes-tera: 48px;
187
+ --cui-spacings-bit: 4px;
188
+ --cui-spacings-byte: 8px;
189
+ --cui-spacings-kilo: 12px;
190
+ --cui-spacings-mega: 16px;
191
+ --cui-spacings-giga: 24px;
192
+ --cui-spacings-tera: 32px;
193
+ --cui-spacings-peta: 40px;
194
+ --cui-spacings-exa: 48px;
195
+ --cui-spacings-zetta: 56px;
196
+ --cui-spacings-yotta: 72px;
197
+ --cui-spacings-ronna: 96px;
198
+ --cui-spacings-quetta: 128px;
199
+ --cui-transitions-default: .12s ease-in-out;
200
+ --cui-transitions-slow: .3s ease-in-out;
201
+ --cui-display-xl-font-size: 6rem;
202
+ --cui-display-xl-line-height: 90%;
203
+ --cui-display-l-font-size: 4rem;
204
+ --cui-display-l-line-height: 85%;
205
+ --cui-display-m-font-size: 3rem;
206
+ --cui-display-m-line-height: 90%;
207
+ --cui-display-s-font-size: 2.5rem;
208
+ --cui-display-s-line-height: 95%;
209
+ --cui-headline-l-font-size: 2.0625rem;
210
+ --cui-headline-l-line-height: 2.125rem;
211
+ --cui-headline-m-font-size: 1.5625rem;
212
+ --cui-headline-m-line-height: 1.625rem;
213
+ --cui-headline-s-font-size: 1.1875rem;
214
+ --cui-headline-s-line-height: 1.375rem;
215
+ --cui-body-l-font-size: 1.3125rem;
216
+ --cui-body-l-line-height: 1.625rem;
217
+ --cui-body-m-font-size: 1.0625rem;
218
+ --cui-body-m-line-height: 1.375rem;
219
+ --cui-body-s-font-size: .9375rem;
220
+ --cui-body-s-line-height: 1.25rem;
221
+ --cui-compact-l-font-size: 1.125rem;
222
+ --cui-compact-l-line-height: 1.5rem;
223
+ --cui-compact-m-font-size: 1rem;
224
+ --cui-compact-m-line-height: 1.125rem;
225
+ --cui-compact-s-font-size: .875rem;
226
+ --cui-compact-s-line-height: 1rem;
227
+ --cui-numeral-xl-font-size: 4rem;
228
+ --cui-numeral-xl-line-height: 4rem;
229
+ --cui-numeral-l-font-size: 2.5rem;
230
+ --cui-numeral-l-line-height: 2.5rem;
231
+ --cui-numeral-m-font-size: 1.5625rem;
232
+ --cui-numeral-m-line-height: 1.75rem;
233
+ --cui-numeral-s-font-size: 1.0625rem;
234
+ --cui-numeral-s-line-height: 1.5rem;
235
+ --cui-typography-headline-one-font-size: 2.0625rem;
236
+ --cui-typography-headline-one-line-height: 2.125rem;
237
+ --cui-typography-headline-two-font-size: 1.5625rem;
238
+ --cui-typography-headline-two-line-height: 1.625rem;
239
+ --cui-typography-headline-three-font-size: 1.5625rem;
240
+ --cui-typography-headline-three-line-height: 1.625rem;
241
+ --cui-typography-headline-four-font-size: 1.1875rem;
242
+ --cui-typography-headline-four-line-height: 1.375rem;
243
+ --cui-typography-title-one-font-size: 4rem;
244
+ --cui-typography-title-one-line-height: 4.5rem;
245
+ --cui-typography-title-two-font-size: 3rem;
246
+ --cui-typography-title-two-line-height: 3.5rem;
247
+ --cui-typography-title-three-font-size: 3rem;
248
+ --cui-typography-title-three-line-height: 3.5rem;
249
+ --cui-typography-title-four-font-size: 2.5rem;
250
+ --cui-typography-title-four-line-height: 2.875rem;
251
+ --cui-typography-sub-headline-font-size: 1.125rem;
252
+ --cui-typography-sub-headline-line-height: 1.375rem;
253
+ --cui-typography-body-one-font-size: 1.0625rem;
254
+ --cui-typography-body-one-line-height: 1.5rem;
255
+ --cui-typography-body-two-font-size: .9375rem;
256
+ --cui-typography-body-two-line-height: 1.25rem;
257
+ --cui-typography-body-large-font-size: 1.3125rem;
258
+ --cui-typography-body-large-line-height: 1.625rem;
259
+ --cui-z-index-default: 0;
260
+ --cui-z-index-absolute: 1;
261
+ --cui-z-index-input: 20;
262
+ --cui-z-index-popover: 1000;
263
+ --cui-z-index-side-panel: 30;
264
+ --cui-z-index-tooltip: 40;
265
+ --cui-z-index-header: 600;
266
+ --cui-z-index-navigation: 800;
267
+ --cui-z-index-toast: 1100;
268
+ }