@salutejs-ds/sdds_sbcom 0.1.10 → 0.1.12

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 (106) hide show
  1. package/components/Button/Button.config.d.ts +4 -4
  2. package/components/Button/Button.config.js +7 -7
  3. package/components/Button/Button.config.js.map +1 -1
  4. package/components/Button/Button.config_b4txnl.css +10 -0
  5. package/components/Button/Button.css +9 -9
  6. package/components/Button/Button.d.ts +4 -4
  7. package/components/Checkbox/Checkbox.config.d.ts +2 -2
  8. package/components/Checkbox/Checkbox.config.js +5 -5
  9. package/components/Checkbox/Checkbox.config.js.map +1 -1
  10. package/components/Checkbox/Checkbox.config_j2f4po.css +6 -0
  11. package/components/Checkbox/Checkbox.css +6 -6
  12. package/components/Checkbox/Checkbox.d.ts +2 -2
  13. package/components/Counter/Counter.config.d.ts +5 -5
  14. package/components/Counter/Counter.config.js +7 -7
  15. package/components/Counter/Counter.config.js.map +1 -1
  16. package/components/Counter/Counter.config_yoygvx.css +11 -0
  17. package/components/Counter/Counter.css +10 -10
  18. package/components/Counter/Counter.d.ts +5 -5
  19. package/components/IconButton/IconButton.config.d.ts +2 -2
  20. package/components/IconButton/IconButton.config.js +5 -5
  21. package/components/IconButton/IconButton.config.js.map +1 -1
  22. package/components/IconButton/IconButton.config_1q8h816.css +9 -0
  23. package/components/IconButton/IconButton.css +8 -8
  24. package/components/IconButton/IconButton.d.ts +2 -2
  25. package/components/Link/Link.config.d.ts +3 -3
  26. package/components/Link/Link.config.js +6 -6
  27. package/components/Link/Link.config.js.map +1 -1
  28. package/components/Link/Link.config_e4pw7e.css +8 -0
  29. package/components/Link/Link.css +8 -8
  30. package/components/Link/Link.d.ts +3 -3
  31. package/components/Radiobox/Radiobox.config.d.ts +1 -1
  32. package/components/Radiobox/Radiobox.config.js +3 -3
  33. package/components/Radiobox/Radiobox.config.js.map +1 -1
  34. package/components/Radiobox/Radiobox.config_10j4d0h.css +6 -0
  35. package/components/Radiobox/Radiobox.css +6 -6
  36. package/components/Radiobox/Radiobox.d.ts +1 -1
  37. package/css/sdds_sbcom.module.css +511 -367
  38. package/css/sdds_sbcom__dark.css +335 -191
  39. package/css/sdds_sbcom__light.css +335 -191
  40. package/es/components/Button/Button.config.js +7 -7
  41. package/es/components/Button/Button.config.js.map +1 -1
  42. package/es/components/Button/Button.config_b4txnl.css +10 -0
  43. package/es/components/Button/Button.css +9 -9
  44. package/es/components/Checkbox/Checkbox.config.js +5 -5
  45. package/es/components/Checkbox/Checkbox.config.js.map +1 -1
  46. package/es/components/Checkbox/Checkbox.config_j2f4po.css +6 -0
  47. package/es/components/Checkbox/Checkbox.css +6 -6
  48. package/es/components/Counter/Counter.config.js +7 -7
  49. package/es/components/Counter/Counter.config.js.map +1 -1
  50. package/es/components/Counter/Counter.config_yoygvx.css +11 -0
  51. package/es/components/Counter/Counter.css +10 -10
  52. package/es/components/IconButton/IconButton.config.js +5 -5
  53. package/es/components/IconButton/IconButton.config.js.map +1 -1
  54. package/es/components/IconButton/IconButton.config_1q8h816.css +9 -0
  55. package/es/components/IconButton/IconButton.css +8 -8
  56. package/es/components/Link/Link.config.js +6 -6
  57. package/es/components/Link/Link.config.js.map +1 -1
  58. package/es/components/Link/Link.config_e4pw7e.css +8 -0
  59. package/es/components/Link/Link.css +8 -8
  60. package/es/components/Radiobox/Radiobox.config.js +3 -3
  61. package/es/components/Radiobox/Radiobox.config.js.map +1 -1
  62. package/es/components/Radiobox/Radiobox.config_10j4d0h.css +6 -0
  63. package/es/components/Radiobox/Radiobox.css +6 -6
  64. package/es/index.css +55 -55
  65. package/es/index.js +1 -1
  66. package/es/theme/themes/sdds_sbcom__dark.js +1 -1
  67. package/es/theme/themes/sdds_sbcom__dark.js.map +1 -1
  68. package/es/theme/themes/sdds_sbcom__light.js +1 -1
  69. package/es/theme/themes/sdds_sbcom__light.js.map +1 -1
  70. package/es/theme/tokens/index.js +547 -427
  71. package/es/theme/tokens/index.js.map +1 -1
  72. package/index.css +55 -55
  73. package/index.js +12 -0
  74. package/index.js.map +1 -1
  75. package/package.json +1 -1
  76. package/styled-components/cjs/Button/Button.config.js +9 -9
  77. package/styled-components/cjs/Checkbox/Checkbox.config.js +6 -6
  78. package/styled-components/cjs/Counter/Counter.config.js +8 -8
  79. package/styled-components/cjs/IconButton/IconButton.config.js +6 -6
  80. package/styled-components/cjs/Link/Link.config.js +6 -6
  81. package/styled-components/cjs/Radiobox/Radiobox.config.js +6 -6
  82. package/styled-components/es/Button/Button.config.js +9 -9
  83. package/styled-components/es/Checkbox/Checkbox.config.js +6 -6
  84. package/styled-components/es/Counter/Counter.config.js +8 -8
  85. package/styled-components/es/IconButton/IconButton.config.js +6 -6
  86. package/styled-components/es/Link/Link.config.js +6 -6
  87. package/styled-components/es/Radiobox/Radiobox.config.js +6 -6
  88. package/theme/themes/sdds_sbcom__dark.js +1 -1
  89. package/theme/themes/sdds_sbcom__dark.js.map +1 -1
  90. package/theme/themes/sdds_sbcom__light.js +1 -1
  91. package/theme/themes/sdds_sbcom__light.js.map +1 -1
  92. package/theme/tokens/index.d.ts +380 -272
  93. package/theme/tokens/index.js +558 -426
  94. package/theme/tokens/index.js.map +1 -1
  95. package/components/Button/Button.config_1wue0f1.css +0 -10
  96. package/components/Checkbox/Checkbox.config_limvsr.css +0 -6
  97. package/components/Counter/Counter.config_u14r3s.css +0 -11
  98. package/components/IconButton/IconButton.config_yxpssw.css +0 -9
  99. package/components/Link/Link.config_1adojdx.css +0 -8
  100. package/components/Radiobox/Radiobox.config_wzkn6m.css +0 -6
  101. package/es/components/Button/Button.config_1wue0f1.css +0 -10
  102. package/es/components/Checkbox/Checkbox.config_limvsr.css +0 -6
  103. package/es/components/Counter/Counter.config_u14r3s.css +0 -11
  104. package/es/components/IconButton/IconButton.config_yxpssw.css +0 -9
  105. package/es/components/Link/Link.config_1adojdx.css +0 -8
  106. package/es/components/Radiobox/Radiobox.config_wzkn6m.css +0 -6
package/css/sdds_sbcom__dark.css CHANGED
@@ -2,152 +2,65 @@
2
2
 
3
3
  :root {
4
4
  --on-dark-personas-green-text-accent: #6CD5BB;
5
- --on-dark-personas-green-text-accent-hover: #84DCC6FF;
6
- --on-dark-personas-green-text-accent-active: #54CFB0FF;
7
- --on-dark-personas-ochre-text-accent-hover: #F7C8B6FF;
8
- --on-dark-personas-ochre-text-accent-active: #F19F7EFF;
9
5
  --surface-transparent-accent-minor-hover: #0BA88866;
10
- --surface-transparent-accent-minor-active: #0BA88838;
11
6
  --on-light-outline-primary-hover: #ADA39FFF;
12
- --on-light-outline-primary-active: #C4BEBAFF;
13
- --inverse-outline-default-hover: #CCCCCCFF;
14
7
  --inverse-outline-default-active: #E6E6E6FF;
15
- --inverse-personas-sea-blue-text-accent-hover: #000000FF;
16
8
  --inverse-personas-sea-blue-text-accent-active: #4BB4B4FF;
17
- --inverse-personas-blue-text-accent-hover: #1477E1FF;
18
- --inverse-personas-blue-text-accent-active: #0D4F96FF;
19
- --inverse-personas-violet-text-accent-hover: #B740C9FF;
20
9
  --inverse-personas-violet-text-accent-active: #81288FFF;
21
- --inverse-surface-transparent-accent-minor-hover: #0BA88857;
22
- --inverse-surface-transparent-accent-minor-active: #0BA8885C;
23
- --on-light-personas-blue-text-accent-hover: #1477E1FF;
24
- --on-light-personas-blue-text-accent-active: #0D4F96FF;
25
- --on-dark-surface-transparent-navi-hover: #242424B8;
26
10
  --on-dark-surface-transparent-navi-active: #2424248A;
27
- --inverse-outline-primary-hover: #ADA39FFF;
28
- --inverse-outline-primary-active: #C4BEBAFF;
29
11
  --on-light-outline-default-hover: #CCCCCCFF;
30
- --on-light-outline-default-active: #E6E6E6FF;
31
- --on-dark-outline-default-hover: #666666FF;
12
+ --inverse-outline-primary-active: #C4BEBAFF;
32
13
  --on-dark-outline-default-active: #292929FF;
14
+ --on-dark-outline-default-hover: #666666FF;
33
15
  --personas-green-text-accent-hover: #04C396FF;
34
- --personas-green-text-accent-active: #03A57FFF;
35
16
  --personas-sea-blue-text-accent-hover: #00C5CCFF;
36
- --personas-sea-blue-text-accent-active: #00A8ADFF;
37
17
  --inverse-surface-accent-secondary-hover: #50C3A8FF;
38
- --inverse-surface-accent-secondary-active: #3CAF94FF;
39
- --on-light-surface-accent-secondary-hover: #50C3A8FF;
40
18
  --on-light-surface-accent-secondary-active: #3CAF94FF;
41
- --surface-transparent-navi-hover: #FFFFFFB8;
42
- --surface-transparent-navi-active: #FFFFFF8A;
43
- --on-light-surface-transparent-accent-minor-hover: #0BA8884D;
19
+ --surface-transparent-navi-active: #2424248A;
44
20
  --on-light-surface-transparent-accent-minor-active: #0BA88852;
45
- --on-light-personas-green-text-accent-hover: #04D7A6FF;
46
21
  --on-light-personas-green-text-accent-active: #04AF87FF;
47
- --outline-default-hover: #858585FF;
48
22
  --outline-default-active: #666666FF;
49
- --on-dark-outline-primary-hover: #6B6461FF;
50
23
  --on-dark-outline-primary-active: #2B2827FF;
51
- --on-dark-personas-pink-text-accent-hover: #F26E6EFF;
52
- --on-dark-personas-pink-text-accent-active: #F58A8AFF;
53
- --outline-primary-hover: #91847EFF;
54
- --outline-primary-active: #665C57FF;
55
- --inverse-personas-indigo-text-accent-hover: #D2B4F8FF;
56
- --inverse-personas-indigo-text-accent-active: #A46AF1FF;
57
- --inverse-personas-pink-text-accent-hover: #FBCBCBFF;
58
- --inverse-personas-pink-text-accent-active: #F48080FF;
59
- --personas-olive-text-accent-hover: #A6D4A5FF;
60
24
  --personas-olive-text-accent-active: #7DC07CFF;
61
- --inverse-personas-ochre-text-accent-hover: #ED6C1DFF;
62
- --inverse-personas-ochre-text-accent-active: #AA4A0EFF;
63
25
  --on-dark-personas-olive-text-accent-hover: #A6D4A5FF;
64
- --on-dark-personas-olive-text-accent-active: #7DC07CFF;
65
- --inverse-surface-transparent-navi-hover: #FFFFFFA8;
26
+ --inverse-personas-ochre-text-accent-active: #AA4A0EFF;
66
27
  --inverse-surface-transparent-navi-active: #FFFFFFAD;
67
- --on-light-personas-olive-text-accent-hover: #1DB71AFF;
68
28
  --on-light-personas-olive-text-accent-active: #179315FF;
69
- --on-light-personas-violet-text-accent-hover: #B740C9FF;
70
29
  --on-light-personas-violet-text-accent-active: #81288FFF;
71
- --on-light-personas-ochre-text-accent-hover: #ED6C1DFF;
72
30
  --on-light-personas-ochre-text-accent-active: #AA4A0EFF;
73
- --on-dark-personas-indigo-text-accent-hover: #E8DAFCFF;
74
- --on-dark-personas-indigo-text-accent-active: #AA73F2FF;
75
31
  --on-dark-surface-accent-secondary-hover: #70CDB7FF;
76
- --on-dark-surface-accent-secondary-active: #59C5ACFF;
77
32
  --inverse-personas-green-text-accent-hover: #8CDECAFF;
78
- --inverse-personas-green-text-accent-active: #4CCDACFF;
79
33
  --on-light-personas-pink-text-accent-hover: #E47777FF;
80
- --on-light-personas-pink-text-accent-active: #D73333FF;
81
- --on-dark-personas-ochre-text-accent: #F4B49B;
82
34
  --surface-accent-secondary-hover: #70CDB7FF;
83
- --surface-accent-secondary-active: #59C5ACFF;
84
35
  --personas-pink-text-accent-hover: #E26E6EFF;
85
- --surface-transparent-accent-minor: #0BA68647;
86
- --personas-pink-text-accent-active: #D83B3BFF;
87
36
  --personas-indigo-text-accent-hover: #E8DAFCFF;
88
- --personas-indigo-text-accent-active: #AA73F2FF;
37
+ --personas-pink-text-accent-active: #D83B3BFF;
89
38
  --on-dark-personas-violet-text-accent-hover: #E9B6F2FF;
90
- --on-dark-personas-violet-text-accent-active: #D982E8FF;
91
39
  --on-light-outline-primary: #DDD9D7;
92
- --on-light-surface-transparent-navi-hover: #FFFFFFA8;
93
40
  --inverse-outline-default: #FFFFFF;
94
- --on-light-surface-transparent-navi-active: #FFFFFFAD;
95
- --inverse-personas-sea-blue-text-accent: #7BC8C8;
96
- --background-hardline: #000000;
97
- --inverse-personas-blue-text-accent: #1063BA;
98
41
  --on-dark-personas-blue-text-accent-hover: #C3DDF9FF;
99
- --inverse-personas-violet-text-accent: #9E32AF;
100
42
  --on-dark-personas-blue-text-accent-active: #5DA3EFFF;
101
- --inverse-surface-transparent-accent-minor: #0BA68647;
102
43
  --on-light-personas-indigo-text-accent-hover: #000000FF;
103
- --on-light-personas-blue-text-accent: #1063BA;
104
44
  --on-light-personas-indigo-text-accent-active: #5B2999FF;
105
- --on-dark-surface-transparent-navi: #23232399;
106
45
  --on-light-personas-sea-blue-text-accent-hover: #00D9E0FF;
107
- --inverse-outline-primary: #DDD9D7;
108
46
  --on-light-personas-sea-blue-text-accent-active: #00B1B8FF;
109
47
  --on-light-outline-default: #FFFFFF;
110
- --inverse-personas-olive-text-accent-hover: #1DB71AFF;
111
- --inverse-personas-olive-text-accent-active: #179315FF;
112
- --personas-ochre-text-accent-hover: #F7C8B6FF;
113
- --on-dark-outline-default: #383838;
114
48
  --personas-ochre-text-accent-active: #F19F7EFF;
115
- --personas-green-text-accent: #038768;
116
- --personas-sea-blue-text-accent: #00898D;
117
- --on-dark-surface-transparent-accent-minor-hover: #0BA88866;
118
49
  --inverse-background-hardline: #000000;
119
- --inverse-surface-accent-secondary: #41BDA1;
50
+ --on-dark-surface-transparent-accent-minor-hover: #0BA88866;
120
51
  --on-dark-surface-transparent-accent-minor-active: #0BA88838;
121
- --light-background-hardline: #FFFFFF;
122
52
  --on-dark-personas-sea-blue-text-accent-hover: #FFFFFFFF;
123
53
  --on-light-surface-accent-secondary: #41BDA1;
124
- --surface-transparent-navi: #FFFFFF99;
125
- --on-dark-personas-sea-blue-text-accent-active: #2D6C6CFF;
126
- --personas-violet-text-accent-hover: #B438C7FF;
127
- --on-light-surface-transparent-accent-minor: #0BA6863D;
54
+ --surface-transparent-navi: #23232399;
128
55
  --personas-violet-text-accent-active: #892B97FF;
129
- --on-light-personas-green-text-accent: #038768;
130
56
  --personas-blue-text-accent-hover: #C3DDF9FF;
131
57
  --outline-default: #FFFFFF;
132
- --personas-blue-text-accent-active: #5DA3EFFF;
133
- --text-primary-brightness-hover: #FAFAFA93;
134
- --dark-background-hardline: #000000;
135
58
  --text-primary-brightness-active: #FAFAFAC4;
136
- --on-dark-outline-primary: #3B3735;
137
- --on-dark-text-primary-brightness-hover: #FAFAFA93;
138
- --on-dark-personas-pink-text-accent: #F7A4A4;
139
- --on-dark-text-primary-brightness-active: #FAFAFAC4;
140
- --on-light-text-primary-brightness-hover: #17171793;
141
- --on-light-text-primary-brightness-active: #171717C4;
142
- --inverse-text-primary-brightness-hover: #17171793;
143
- --inverse-text-primary-brightness-active: #171717C4;
144
- --surface-solid-primary-brightness-active: #212121FF;
145
59
  --surface-transparent-card-brightness-hover: #FAFAFA1F;
146
60
  --surface-transparent-card-brightness-active: #FAFAFA0A;
147
61
  --surface-solid-card-brightness-hover: #303030FF;
148
62
  --surface-solid-card-brightness-active: #212121FF;
149
63
  --surface-solid-primary-brightness-hover: #303030FF;
150
- --on-dark-surface-solid-primary-brightness-hover: #303030FF;
151
64
  --on-dark-surface-solid-primary-brightness-active: #212121FF;
152
65
  --on-dark-surface-transparent-card-brightness-hover: #FAFAFA1F;
153
66
  --on-dark-surface-transparent-card-brightness-active: #FAFAFA0A;
@@ -165,18 +78,17 @@
165
78
  --on-light-surface-solid-tertiary-active: #FFFFFFFF;
166
79
  --on-dark-personas-olive-text-accent: #93CB92;
167
80
  --on-light-surface-transparent-card-brightness-hover: #FFFFFFFF;
168
- --on-dark-surface-accent-minor-active: #043F34FF;
169
81
  --text-primary: #FFFFFFFC;
170
82
  --on-dark-text-accent-minor-hover: #60C7AFFF;
171
83
  --inverse-surface-transparent-navi: #FFFFFF99;
172
84
  --on-light-personas-olive-text-accent: #127210;
173
85
  --on-light-surface-transparent-card-brightness-active: #FFFFFFFF;
86
+ --on-dark-surface-accent-minor-active: #043F34FF;
174
87
  --on-light-surface-solid-card-brightness-hover: #FFFFFFFF;
175
88
  --on-light-surface-solid-card-brightness-active: #FFFFFFFF;
176
89
  --inverse-surface-solid-primary-brightness-hover: #FFFFFFFF;
177
90
  --inverse-surface-solid-primary-brightness-active: #FFFFFFFF;
178
91
  --inverse-surface-transparent-card-brightness-hover: #FFFFFFFF;
179
- --on-light-outline-warning-active: #A3420AFF;
180
92
  --on-light-personas-violet-text-accent: #9E32AF;
181
93
  --on-light-personas-ochre-text-accent: #D15A11;
182
94
  --on-dark-personas-indigo-text-accent: #BD91F5;
@@ -190,14 +102,11 @@
190
102
  --inverse-surface-solid-tertiary: #FFFFFF;
191
103
  --on-light-surface-accent-minor: #D0F2E9;
192
104
  --inverse-surface-transparent-card-brightness-active: #FFFFFFFF;
193
- --inverse-surface-solid-card-brightness-hover: #FFFFFFFF;
105
+ --on-light-outline-warning-active: #A3420AFF;
194
106
  --on-light-surface-accent-minor-hover: #C7F0E5FF;
195
107
  --inverse-surface-accent-minor: #D0F2E9;
196
108
  --inverse-surface-solid-card-brightness-active: #FFFFFFFF;
197
109
  --on-dark-surface-accent-minor-hover: #055C4CFF;
198
- --personas-pink-text-accent: #DE5555;
199
- --personas-indigo-text-accent: #BD91F5;
200
- --on-dark-personas-violet-text-accent: #E19DED;
201
110
  --on-light-surface-transparent-navi: #FFFFFF99;
202
111
  --on-dark-personas-blue-text-accent: #79B3F2;
203
112
  --on-light-personas-indigo-text-accent: #7133BE;
@@ -205,12 +114,101 @@
205
114
  --inverse-personas-olive-text-accent: #127210;
206
115
  --personas-ochre-text-accent: #F4B49B;
207
116
  --on-dark-surface-transparent-accent-minor: #0BA68647;
117
+ --on-dark-personas-violet-text-accent: #E19DED;
208
118
  --on-light-text-warning-active: #6F2D06FF;
119
+ --on-light-outline-primary-active: #C4BEBAFF;
120
+ --inverse-personas-blue-text-accent-active: #0D4F96FF;
121
+ --inverse-surface-transparent-accent-minor-active: #0BA8885C;
209
122
  --on-dark-personas-sea-blue-text-accent: #7BC8C8;
123
+ --on-dark-personas-green-text-accent-hover: #84DCC6FF;
124
+ --on-light-personas-blue-text-accent-active: #0D4F96FF;
125
+ --on-light-outline-default-active: #E6E6E6FF;
126
+ --personas-green-text-accent-active: #03A57FFF;
127
+ --personas-sea-blue-text-accent-active: #00A8ADFF;
128
+ --inverse-surface-accent-secondary-active: #3CAF94FF;
129
+ --on-dark-personas-pink-text-accent-active: #F58A8AFF;
130
+ --outline-primary-active: #665C57FF;
131
+ --inverse-personas-indigo-text-accent-active: #A46AF1FF;
132
+ --inverse-personas-pink-text-accent-active: #F48080FF;
133
+ --on-dark-personas-olive-text-accent-active: #7DC07CFF;
134
+ --on-dark-surface-accent-secondary-active: #59C5ACFF;
135
+ --inverse-personas-green-text-accent-active: #4CCDACFF;
136
+ --on-light-personas-pink-text-accent-active: #D73333FF;
137
+ --personas-indigo-text-accent-active: #AA73F2FF;
138
+ --on-dark-personas-violet-text-accent-active: #D982E8FF;
139
+ --on-light-surface-transparent-navi-hover: #FFFFFFA8;
140
+ --on-light-surface-transparent-navi-active: #FFFFFFAD;
141
+ --inverse-personas-olive-text-accent-hover: #1DB71AFF;
142
+ --personas-ochre-text-accent-hover: #F7C8B6FF;
143
+ --inverse-surface-accent-secondary: #41BDA1;
144
+ --light-background-hardline: #FFFFFF;
145
+ --on-dark-personas-sea-blue-text-accent-active: #2D6C6CFF;
146
+ --on-light-surface-transparent-accent-minor: #0BA6863D;
147
+ --on-light-personas-green-text-accent: #038768;
148
+ --text-primary-brightness-hover: #FAFAFA93;
149
+ --on-dark-text-primary-brightness-hover: #FAFAFA93;
150
+ --on-dark-personas-green-text-accent-active: #54CFB0FF;
151
+ --on-dark-personas-ochre-text-accent-active: #F19F7EFF;
152
+ --surface-transparent-accent-minor-active: #0BA88838;
153
+ --inverse-outline-default-hover: #CCCCCCFF;
210
154
  --personas-violet-text-accent: #9E32AF;
155
+ --inverse-personas-sea-blue-text-accent-hover: #000000FF;
156
+ --inverse-personas-blue-text-accent-hover: #1477E1FF;
157
+ --inverse-personas-violet-text-accent-hover: #B740C9FF;
158
+ --inverse-surface-transparent-accent-minor-hover: #0BA88857;
159
+ --on-light-personas-blue-text-accent-hover: #1477E1FF;
160
+ --on-dark-surface-transparent-navi-hover: #242424B8;
161
+ --inverse-outline-primary-hover: #ADA39FFF;
162
+ --on-light-surface-accent-secondary-hover: #50C3A8FF;
163
+ --surface-transparent-navi-hover: #242424B8;
164
+ --on-light-surface-transparent-accent-minor-hover: #0BA8884D;
165
+ --on-light-personas-green-text-accent-hover: #04D7A6FF;
166
+ --outline-default-hover: #858585FF;
167
+ --on-dark-outline-primary-hover: #6B6461FF;
168
+ --on-dark-personas-pink-text-accent-hover: #F26E6EFF;
169
+ --outline-primary-hover: #91847EFF;
170
+ --inverse-personas-indigo-text-accent-hover: #D2B4F8FF;
171
+ --inverse-personas-pink-text-accent-hover: #FBCBCBFF;
172
+ --personas-olive-text-accent-hover: #A6D4A5FF;
173
+ --inverse-personas-ochre-text-accent-hover: #ED6C1DFF;
174
+ --inverse-surface-transparent-navi-hover: #FFFFFFA8;
175
+ --on-light-personas-olive-text-accent-hover: #1DB71AFF;
176
+ --on-light-personas-violet-text-accent-hover: #B740C9FF;
177
+ --on-light-personas-ochre-text-accent-hover: #ED6C1DFF;
178
+ --on-dark-personas-indigo-text-accent-hover: #E8DAFCFF;
179
+ --on-dark-personas-ochre-text-accent: #F4B49B;
180
+ --personas-sea-blue-text-accent: #00898D;
181
+ --personas-violet-text-accent-hover: #B438C7FF;
182
+ --surface-accent-secondary-active: #59C5ACFF;
183
+ --surface-transparent-accent-minor: #0BA68647;
184
+ --inverse-personas-sea-blue-text-accent: #7BC8C8;
185
+ --background-hardline: #000000;
186
+ --inverse-personas-blue-text-accent: #1063BA;
187
+ --inverse-personas-violet-text-accent: #9E32AF;
188
+ --inverse-surface-transparent-accent-minor: #0BA68647;
189
+ --on-light-personas-blue-text-accent: #1063BA;
190
+ --on-dark-surface-transparent-navi: #23232399;
191
+ --inverse-outline-primary: #DDD9D7;
192
+ --inverse-personas-olive-text-accent-active: #179315FF;
193
+ --on-dark-outline-default: #383838;
194
+ --personas-green-text-accent: #038768;
195
+ --personas-blue-text-accent-active: #5DA3EFFF;
196
+ --dark-background-hardline: #000000;
197
+ --on-dark-outline-primary: #3B3735;
198
+ --on-dark-personas-pink-text-accent: #F7A4A4;
199
+ --on-light-text-primary-brightness-hover: #17171793;
200
+ --inverse-text-primary-brightness-hover: #17171793;
201
+ --surface-solid-primary-brightness-active: #212121FF;
202
+ --on-dark-surface-solid-primary-brightness-hover: #303030FF;
203
+ --inverse-surface-solid-card-brightness-hover: #FFFFFFFF;
204
+ --personas-pink-text-accent: #DE5555;
211
205
  --personas-blue-text-accent: #79B3F2;
212
- --text-secondary: #F6F2F0A3;
213
- --text-paragraph: #F6F2F07A;
206
+ --on-dark-text-primary-brightness-active: #FAFAFAC4;
207
+ --on-light-text-primary-brightness-active: #171717C4;
208
+ --inverse-text-primary-brightness-active: #171717C4;
209
+ --personas-indigo-text-accent: #BD91F5;
210
+ --on-dark-personas-ochre-text-accent-hover: #F7C8B6FF;
211
+ --on-dark-personas-indigo-text-accent-active: #AA73F2FF;
214
212
  --text-paragraph-hover: #F5F1EFFF;
215
213
  --text-paragraph-active: #F5F1EF93;
216
214
  --text-accent: #61C8B0;
@@ -232,14 +230,14 @@
232
230
  --text-info-hover: #BCDBFAFF;
233
231
  --text-info-active: #53A3F3FF;
234
232
  --text-secondary-hover: #F5F1EFFF;
233
+ --text-secondary: #F6F2F0A3;
235
234
  --text-primary-active: #FFFFFFCA;
236
235
  --text-secondary-active: #F5F1EFC4;
237
236
  --text-tertiary: #F6F2F03D;
238
237
  --text-tertiary-hover: #F5F1EFFF;
239
238
  --text-tertiary-active: #F5F1EF49;
240
239
  --text-primary-brightness: #FAFAFAF5;
241
- --on-dark-text-tertiary-active: #F5F1EF49;
242
- --on-dark-text-paragraph: #F6F2F07A;
240
+ --text-paragraph: #F6F2F07A;
243
241
  --on-dark-text-paragraph-hover: #F5F1EFFF;
244
242
  --on-dark-text-paragraph-active: #F5F1EF93;
245
243
  --on-dark-text-accent: #61C8B0ED;
@@ -260,6 +258,7 @@
260
258
  --on-dark-text-info-hover: #BCDBFAFF;
261
259
  --on-dark-text-info-active: #53A3F3FF;
262
260
  --on-dark-text-primary-active: #FFFFFFCA;
261
+ --on-dark-text-tertiary-active: #F5F1EF49;
263
262
  --on-dark-text-primary: #FFFFFFFC;
264
263
  --on-dark-text-primary-brightness: #FAFAFAF5;
265
264
  --on-dark-text-secondary: #F6F2F0A3;
@@ -268,7 +267,7 @@
268
267
  --on-dark-text-tertiary-hover: #F5F1EFFF;
269
268
  --on-dark-text-secondary-active: #F5F1EFC4;
270
269
  --on-dark-text-primary-hover: #FFFFFF97;
271
- --on-light-text-primary-hover: #15110F97;
270
+ --on-dark-text-paragraph: #F6F2F07A;
272
271
  --on-light-text-primary-active: #15110FCA;
273
272
  --on-light-text-primary-brightness: #171717F5;
274
273
  --on-light-text-secondary: #15110FA3;
@@ -292,6 +291,7 @@
292
291
  --on-light-text-warning: #973C09;
293
292
  --on-light-text-warning-hover: #BC4C0BFF;
294
293
  --on-light-text-primary: #15110FFC;
294
+ --on-light-text-primary-hover: #15110F97;
295
295
  --inverse-text-primary: #15110FFC;
296
296
  --inverse-text-primary-hover: #15110F97;
297
297
  --inverse-text-primary-active: #15110FCA;
@@ -317,14 +317,13 @@
317
317
  --on-light-text-info-hover: #000000FF;
318
318
  --on-light-text-info-active: #194B85FF;
319
319
  --on-light-text-negative-hover: #E3353BFF;
320
- --inverse-text-warning-active: #6F2D06FF;
321
- --inverse-text-negative: #D11D23;
322
320
  --inverse-text-negative-hover: #E3353BFF;
323
321
  --inverse-text-negative-active: #AF181DFF;
324
322
  --inverse-text-info: #205EA5;
325
323
  --inverse-text-info-hover: #000000FF;
326
324
  --inverse-text-info-active: #194B85FF;
327
325
  --surface-solid-primary: #232323;
326
+ --inverse-text-warning-active: #6F2D06FF;
328
327
  --surface-solid-primary-hover: #2E2E2EFF;
329
328
  --surface-solid-primary-active: #1F1F1FFF;
330
329
  --surface-solid-primary-brightness: #262626FF;
@@ -338,8 +337,7 @@
338
337
  --inverse-text-warning: #973C09;
339
338
  --inverse-text-warning-hover: #BC4C0BFF;
340
339
  --inverse-text-positive-active: #185E17FF;
341
- --surface-transparent-primary-active: #FFFFFF0F;
342
- --surface-transparent-secondary: #FFFFFF29;
340
+ --inverse-text-negative: #D11D23;
343
341
  --surface-transparent-secondary-hover: #FFFFFF47;
344
342
  --surface-transparent-secondary-active: #FFFFFF1A;
345
343
  --surface-transparent-tertiary: #FFFFFF3D;
@@ -372,8 +370,8 @@
372
370
  --surface-transparent-primary-hover: #FFFFFF24;
373
371
  --surface-solid-default-active: #F2ECE9FF;
374
372
  --surface-solid-card-hover: #2E2E2EFF;
375
- --surface-positive-active: #9FCF9BFF;
376
- --surface-warning: #F8AD80;
373
+ --surface-transparent-primary-active: #FFFFFF0F;
374
+ --surface-transparent-secondary: #FFFFFF29;
377
375
  --surface-warning-hover: #F9BB94FF;
378
376
  --surface-warning-active: #F8A977FF;
379
377
  --surface-negative: #F8A6A9;
@@ -382,8 +380,10 @@
382
380
  --surface-info: #9BCAF8;
383
381
  --surface-info-hover: #AED4F9FF;
384
382
  --surface-info-active: #91C4F7FF;
383
+ --surface-positive-active: #9FCF9BFF;
385
384
  --surface-positive: #A6D2A2;
386
385
  --surface-positive-hover: #B3D9B0FF;
386
+ --surface-warning: #F8AD80;
387
387
  --surface-read-only: #F9F9F905;
388
388
  --surface-read-only-hover: #FAFAFA0F;
389
389
  --surface-read-only-active: #FAFAFA00;
@@ -396,8 +396,6 @@
396
396
  --on-dark-surface-solid-secondary-active: #242424FF;
397
397
  --on-dark-surface-solid-tertiary: #474747;
398
398
  --on-dark-surface-solid-tertiary-hover: #525252FF;
399
- --on-dark-surface-transparent-primary-active: #FFFFFF0F;
400
- --on-dark-surface-transparent-secondary: #FFFFFF29;
401
399
  --on-dark-surface-transparent-secondary-hover: #FFFFFF47;
402
400
  --on-dark-surface-transparent-secondary-active: #FFFFFF1A;
403
401
  --on-dark-surface-transparent-tertiary: #FFFFFF3D;
@@ -425,6 +423,8 @@
425
423
  --on-dark-surface-transparent-primary: #FFFFFF14;
426
424
  --on-dark-surface-transparent-primary-hover: #FFFFFF24;
427
425
  --on-dark-surface-solid-card-hover: #2E2E2EFF;
426
+ --on-dark-surface-transparent-primary-active: #FFFFFF0F;
427
+ --on-dark-surface-transparent-secondary: #FFFFFF29;
428
428
  --on-dark-surface-positive: #A6D2A2;
429
429
  --on-dark-surface-positive-hover: #B3D9B0FF;
430
430
  --on-dark-surface-positive-active: #9FCF9BFF;
@@ -452,8 +452,6 @@
452
452
  --on-light-surface-solid-secondary-active: #FFFFFFFF;
453
453
  --on-light-surface-solid-tertiary: #FFFFFF;
454
454
  --on-light-surface-solid-tertiary-hover: #FFFFFFFF;
455
- --on-light-surface-transparent-primary-active: #15110F0F;
456
- --on-light-surface-transparent-secondary: #15110F14;
457
455
  --on-light-surface-transparent-secondary-hover: #15110F1A;
458
456
  --on-light-surface-transparent-secondary-active: #15110F1F;
459
457
  --on-light-surface-transparent-tertiary: #15110F1F;
@@ -481,6 +479,8 @@
481
479
  --on-light-surface-transparent-primary-hover: #15110F0D;
482
480
  --on-light-surface-solid-default-active: #090706FF;
483
481
  --on-light-surface-solid-card-hover: #FFFFFFFF;
482
+ --on-light-surface-transparent-primary-active: #15110F0F;
483
+ --on-light-surface-transparent-secondary: #15110F14;
484
484
  --on-light-surface-positive: #239322;
485
485
  --on-light-surface-positive-hover: #28A126FF;
486
486
  --on-light-surface-positive-active: #20801EFF;
@@ -506,8 +506,6 @@
506
506
  --inverse-surface-solid-secondary: #FFFFFF;
507
507
  --inverse-surface-solid-secondary-hover: #FFFFFFFF;
508
508
  --inverse-surface-solid-secondary-active: #FFFFFFFF;
509
- --inverse-surface-transparent-primary-hover: #15110F0D;
510
- --inverse-surface-transparent-primary-active: #15110F0F;
511
509
  --inverse-surface-transparent-secondary: #15110F14;
512
510
  --inverse-surface-transparent-secondary-hover: #15110F1A;
513
511
  --inverse-surface-transparent-secondary-active: #15110F1F;
@@ -535,6 +533,8 @@
535
533
  --inverse-surface-solid-card-brightness: #FFFFFFFF;
536
534
  --inverse-surface-solid-default: #15110F;
537
535
  --inverse-surface-transparent-primary: #15110F0A;
536
+ --inverse-surface-transparent-primary-hover: #15110F0D;
537
+ --inverse-surface-transparent-primary-active: #15110F0F;
538
538
  --inverse-surface-positive: #239322;
539
539
  --inverse-surface-positive-hover: #28A126FF;
540
540
  --inverse-surface-positive-active: #20801EFF;
@@ -563,7 +563,6 @@
563
563
  --dark-background-secondary: #0F0F0F;
564
564
  --dark-background-tertiary: #141413;
565
565
  --light-background-primary: #EBE7E5;
566
- --on-light-overlay-soft: #0000003D;
567
566
  --on-light-overlay-hard: #00000052;
568
567
  --inverse-overlay-soft: #0000003D;
569
568
  --inverse-overlay-hard: #00000052;
@@ -579,6 +578,7 @@
579
578
  --on-dark-overlay-soft: #0000001F;
580
579
  --on-dark-overlay-hard: #00000029;
581
580
  --inverse-background-primary: #EBE7E5;
581
+ --on-light-overlay-soft: #0000003D;
582
582
  --outline-positive: #A6D2A2;
583
583
  --outline-positive-hover: #DBEDD9FF;
584
584
  --outline-positive-active: #92C88DFF;
@@ -633,8 +633,6 @@
633
633
  --inverse-outline-clear: #FFFFFF00;
634
634
  --inverse-outline-clear-hover: #FFFFFF00;
635
635
  --inverse-outline-clear-active: #FFFFFF00;
636
- --inverse-outline-positive-active: #20801EFF;
637
- --inverse-outline-warning: #BE4E0C;
638
636
  --inverse-outline-warning-hover: #F3813FFF;
639
637
  --inverse-outline-warning-active: #A3420AFF;
640
638
  --inverse-outline-negative: #E83439;
@@ -643,8 +641,10 @@
643
641
  --inverse-outline-info: #3776BC;
644
642
  --inverse-outline-info-hover: #81AADAFF;
645
643
  --inverse-outline-info-active: #3067A6FF;
644
+ --inverse-outline-positive-active: #20801EFF;
646
645
  --inverse-outline-positive: #239322;
647
646
  --inverse-outline-positive-hover: #32CA2FFF;
647
+ --inverse-outline-warning: #BE4E0C;
648
648
  --text-primary-hover: #FFFFFF97;
649
649
  --on-dark-surface-solid-default: #F6F2F0;
650
650
  --on-light-surface-accent-minor-active: #BFEDE1FF;
@@ -655,8 +655,6 @@
655
655
 
656
656
  :root {
657
657
  --on-dark-personas-indigo-surface-accent-gradient: linear-gradient(180.00deg, rgb(135, 77, 207) 0.0%, rgb(113, 51, 190) 100.0%);
658
- --on-light-text-accent-gradient-a-i: linear-gradient(135.00deg, rgb(179, 49, 208) 8.0%, rgb(109, 78, 223) 56.0%, rgb(31, 185, 224) 100.0%);
659
- --light-background-gradient: linear-gradient(135.00deg, rgb(193, 234, 207) 0.0%, rgb(160, 222, 207) 100.0%);
660
658
  --surface-skeleton-gradient: linear-gradient(0deg, #FFFFFF 0.0%, #FFFFFF 50.4%, #FFFFFF 100.0%, #FFFFFF 100.0%);
661
659
  --on-dark-personas-violet-surface-accent-gradient: linear-gradient(180.00deg, rgb(177, 76, 194) 0.0%, rgb(158, 50, 175) 100.0%);
662
660
  --overlay-gradient: linear-gradient(180.00deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
@@ -680,12 +678,12 @@
680
678
  --on-dark-surface-skeleton-gradient: linear-gradient(0deg, #FFFFFF 0.0%, #FFFFFF 50.4%, #FFFFFF 100.0%, #FFFFFF 100.0%);
681
679
  --inverse-background-gradient: linear-gradient(135.00deg, rgb(2, 20, 9) 0.0%, rgb(20, 20, 19) 100.0%);
682
680
  --inverse-overlay-gradient: linear-gradient(180.00deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
683
- --on-dark-overlay-gradient: linear-gradient(180deg, #000000 0.0%, #000000 100.0%);
684
681
  --personas-pink-surface-accent-gradient: linear-gradient(180.00deg, rgb(222, 113, 113) 0.0%, rgb(208, 79, 79) 100.0%);
685
682
  --on-light-personas-olive-surface-accent-gradient: linear-gradient(180.00deg, rgb(147, 203, 146) 0.0%, rgb(115, 179, 114) 100.0%);
686
683
  --inverse-surface-accent-gradient-secondary: linear-gradient(90.00deg, rgb(11, 166, 134) 0.0%, rgb(9, 133, 107) 100.0%);
687
- --inverse-personas-violet-surface-accent-gradient: linear-gradient(180.00deg, rgb(225, 157, 237) 0.0%, rgb(198, 122, 212) 100.0%);
688
- --on-light-surface-accent-gradient-secondary: linear-gradient(90.00deg, rgb(11, 166, 134) 0.0%, rgb(9, 133, 107) 100.0%);
684
+ --on-light-text-accent-gradient-a-i: linear-gradient(135.00deg, rgb(179, 49, 208) 8.0%, rgb(109, 78, 223) 56.0%, rgb(31, 185, 224) 100.0%);
685
+ --light-background-gradient: linear-gradient(135.00deg, rgb(193, 234, 207) 0.0%, rgb(160, 222, 207) 100.0%);
686
+ --on-dark-overlay-gradient: linear-gradient(180deg, #000000 0.0%, #000000 100.0%);
689
687
  --on-light-personas-green-surface-accent-gradient: linear-gradient(180.00deg, rgb(121, 215, 192) 0.0%, rgb(80, 184, 159) 100.0%);
690
688
  --personas-indigo-surface-accent-gradient: linear-gradient(180.00deg, rgb(135, 77, 207) 0.0%, rgb(113, 51, 190) 100.0%);
691
689
  --on-light-personas-ochre-surface-accent-gradient: linear-gradient(180.00deg, rgb(248, 165, 133) 0.0%, rgb(228, 118, 76) 100.0%);
@@ -710,49 +708,49 @@
710
708
  --on-dark-personas-olive-surface-accent-gradient: linear-gradient(180.00deg, rgb(33, 150, 31) 0.0%, rgb(18, 114, 16) 100.0%);
711
709
  --on-dark-surface-accent-gradient-secondary: linear-gradient(90.00deg, rgb(11, 166, 134) 0.0%, rgb(9, 133, 107) 100.0%);
712
710
  --personas-blue-surface-accent-gradient: linear-gradient(180.00deg, rgb(121, 179, 242) 0.0%, rgb(93, 153, 219) 100.0%);
711
+ --inverse-personas-violet-surface-accent-gradient: linear-gradient(180.00deg, rgb(225, 157, 237) 0.0%, rgb(198, 122, 212) 100.0%);
712
+ --on-light-surface-accent-gradient-secondary: linear-gradient(90.00deg, rgb(11, 166, 134) 0.0%, rgb(9, 133, 107) 100.0%);
713
713
  --surface-accent-gradient: linear-gradient(180.00deg, rgb(129, 211, 192) 0.0%, rgb(29, 145, 88) 100.0%);
714
714
  --surface-accent-minor-gradient: linear-gradient(135.00deg, rgb(3, 67, 37) 0.0%, rgba(1, 24, 21, 0.98) 100.0%);
715
715
  --on-dark-surface-accent-gradient: linear-gradient(180.00deg, rgb(129, 211, 192) 0.0%, rgb(29, 145, 88) 100.0%);
716
716
  --on-dark-surface-accent-minor-gradient: linear-gradient(135.00deg, rgb(3, 67, 37) 0.0%, rgba(1, 24, 21, 0.98) 100.0%);
717
- --inverse-surface-accent-minor-gradient: linear-gradient(133.15deg, rgb(193, 234, 207) 0%, rgb(160, 222, 207) 100.0%);
718
717
  --on-light-surface-accent-gradient: linear-gradient(180.00deg, rgb(129, 211, 192) 0.0%, rgb(29, 145, 88) 100.0%);
719
718
  --on-light-surface-accent-minor-gradient: linear-gradient(133.15deg, rgb(193, 234, 207) 0%, rgb(160, 222, 207) 100.0%);
720
719
  --inverse-surface-accent-gradient: linear-gradient(180.00deg, rgb(129, 211, 192) 0.0%, rgb(29, 145, 88) 100.0%);
720
+ --inverse-surface-accent-minor-gradient: linear-gradient(133.15deg, rgb(193, 234, 207) 0%, rgb(160, 222, 207) 100.0%);
721
721
  }
722
722
 
723
723
  :root {
724
724
  --shadow-down-hard-s: 0rem 0.25rem 0.75rem -0.1875rem #08080829, 0rem 0.0625rem 0.25rem -0.125rem #00000014;
725
+ --shadow-down-soft-m: 0rem 1.5rem 3rem -0.5rem #00000014;
725
726
  --shadow-down-soft-l: 0rem 3.75rem 7rem -0.5rem #00000014;
726
727
  --shadow-down-soft-s: 0rem 0.25rem 0.875rem -0.25rem #08080814, 0rem 0.0625rem 0.25rem -0.0625rem #0000000A;
727
- --shadow-down-soft-m: 0rem 1.5rem 3rem -0.5rem #00000014;
728
728
  --shadow-down-hard-m: 0rem 1rem 2rem -0.5rem #0000003D;
729
729
  --shadow-down-hard-l: 0rem 3.75rem 7rem -0.5rem #00000066;
730
- --shadow-up-soft-s: 0rem -0.25rem 0.875rem -0.25rem #08080814, 0rem -0.0625rem 0.25rem -0.0625rem #00000008;
731
- --shadow-up-soft-m: 0rem -1.5rem 3rem -0.5rem #00000014;
732
730
  --shadow-up-soft-l: 0rem -3.75rem 7rem -0.5rem #00000014;
733
731
  --shadow-up-hard-s: 0rem -0.25rem 0.75rem -0.1875rem #08080833, 0rem -0.0625rem 0.25rem -0.0625rem #00000008;
734
732
  --shadow-up-hard-m: 0rem -1rem 2rem -0.5rem #0000003D;
735
733
  --shadow-up-hard-l: 0rem -3.75rem 7rem -0.5rem #00000066;
734
+ --shadow-up-soft-s: 0rem -0.25rem 0.875rem -0.25rem #08080814, 0rem -0.0625rem 0.25rem -0.0625rem #00000008;
735
+ --shadow-up-soft-m: 0rem -1.5rem 3rem -0.5rem #00000014;
736
736
  }
737
737
 
738
738
  :root {
739
739
  --border-radius-4xl: 2rem;
740
740
  --border-radius-3xl: 1.75rem;
741
741
  --border-radius-5xl: 2.5rem;
742
- --border-radius-circle: 100rem;
743
- --border-radius-m: 0.75rem;
744
742
  --border-radius-l: 1rem;
745
743
  --border-radius-xxs: 0.25rem;
746
744
  --border-radius-xs: 0.375rem;
747
745
  --border-radius-xxl: 1.5rem;
748
746
  --border-radius-s: 0.5rem;
749
747
  --border-radius-xl: 1.25rem;
748
+ --border-radius-circle: 100rem;
749
+ --border-radius-m: 0.75rem;
750
750
  }
751
751
 
752
752
  :root {
753
753
  --spacing-16x: 2rem;
754
- --spacing-3x: 0.375rem;
755
- --spacing-6x: 0.75rem;
756
754
  --spacing-8x: 1rem;
757
755
  --spacing-10x: 1.25rem;
758
756
  --spacing-12x: 1.5rem;
@@ -765,16 +763,18 @@
765
763
  --spacing-2x: 0.25rem;
766
764
  --spacing-0x: 0rem;
767
765
  --spacing-1x: 0.125rem;
766
+ --spacing-3x: 0.375rem;
767
+ --spacing-6x: 0.75rem;
768
768
  }
769
769
 
770
770
  :root {
771
771
  font-size: 16px;
772
772
  --plasma-typo-overflow-wrap: break-word;
773
773
  --plasma-typo-hyphens: auto;
774
- --plasma-typo-display-font-family: 'SB Sans Display', sans-serif;
775
- --plasma-typo-body-font-family: 'SB Sans Text', sans-serif;
776
- --plasma-typo-header-font-family: 'SB Sans Display', sans-serif;
777
- --plasma-typo-text-font-family: 'undefined', sans-serif;
774
+ --plasma-typo-display-font-family: 'Roboto', sans-serif;
775
+ --plasma-typo-body-font-family: 'Roboto', sans-serif;
776
+ --plasma-typo-header-font-family: 'Roboto', sans-serif;
777
+ --plasma-typo-text-font-family: 'Roboto', sans-serif;
778
778
  --plasma-typo-body-xxs-bold-font-family: var(--plasma-typo-text-font-family);
779
779
  --plasma-typo-body-xxs-bold-letter-spacing: normal;
780
780
  --plasma-typo-body-xxs-bold-font-style: normal;
@@ -829,6 +829,15 @@
829
829
  --plasma-typo-body-l-bold-font-family: var(--plasma-typo-text-font-family);
830
830
  --plasma-typo-body-l-bold-letter-spacing: normal;
831
831
  --plasma-typo-body-l-bold-font-style: normal;
832
+ --plasma-typo-body-s-bold-font-family: var(--plasma-typo-text-font-family);
833
+ --plasma-typo-body-s-bold-letter-spacing: normal;
834
+ --plasma-typo-body-s-bold-font-style: normal;
835
+ --plasma-typo-body-l-medium-font-family: var(--plasma-typo-text-font-family);
836
+ --plasma-typo-body-l-medium-letter-spacing: normal;
837
+ --plasma-typo-body-l-medium-font-style: normal;
838
+ --plasma-typo-body-m-font-family: var(--plasma-typo-text-font-family);
839
+ --plasma-typo-body-m-letter-spacing: normal;
840
+ --plasma-typo-body-m-font-style: normal;
832
841
  --plasma-typo-body-s-medium-font-family: var(--plasma-typo-text-font-family);
833
842
  --plasma-typo-body-s-medium-letter-spacing: normal;
834
843
  --plasma-typo-body-s-medium-font-style: normal;
@@ -853,18 +862,45 @@
853
862
  --plasma-typo-body-s-font-family: var(--plasma-typo-text-font-family);
854
863
  --plasma-typo-body-s-letter-spacing: normal;
855
864
  --plasma-typo-body-s-font-style: normal;
856
- --plasma-typo-body-s-bold-font-family: var(--plasma-typo-text-font-family);
857
- --plasma-typo-body-s-bold-letter-spacing: normal;
858
- --plasma-typo-body-s-bold-font-style: normal;
859
- --plasma-typo-body-l-medium-font-family: var(--plasma-typo-text-font-family);
860
- --plasma-typo-body-l-medium-letter-spacing: normal;
861
- --plasma-typo-body-l-medium-font-style: normal;
862
- --plasma-typo-body-m-font-family: var(--plasma-typo-text-font-family);
863
- --plasma-typo-body-m-letter-spacing: normal;
864
- --plasma-typo-body-m-font-style: normal;
865
865
  --plasma-typo-body-xxs-medium-font-family: var(--plasma-typo-text-font-family);
866
866
  --plasma-typo-body-xxs-medium-letter-spacing: normal;
867
867
  --plasma-typo-body-xxs-medium-font-style: normal;
868
+ --plasma-typo-text-l-font-family: var(--plasma-typo-text-font-family);
869
+ --plasma-typo-text-l-letter-spacing: -0.02em;
870
+ --plasma-typo-text-l-font-style: normal;
871
+ --plasma-typo-text-s-medium-font-family: var(--plasma-typo-text-font-family);
872
+ --plasma-typo-text-s-medium-letter-spacing: -0.02em;
873
+ --plasma-typo-text-s-medium-font-style: normal;
874
+ --plasma-typo-text-l-bold-font-family: var(--plasma-typo-text-font-family);
875
+ --plasma-typo-text-l-bold-letter-spacing: -0.02em;
876
+ --plasma-typo-text-l-bold-font-style: normal;
877
+ --plasma-typo-text-m-font-family: var(--plasma-typo-text-font-family);
878
+ --plasma-typo-text-m-letter-spacing: -0.02em;
879
+ --plasma-typo-text-m-font-style: normal;
880
+ --plasma-typo-text-l-medium-font-family: var(--plasma-typo-text-font-family);
881
+ --plasma-typo-text-l-medium-letter-spacing: -0.02em;
882
+ --plasma-typo-text-l-medium-font-style: normal;
883
+ --plasma-typo-text-s-font-family: var(--plasma-typo-text-font-family);
884
+ --plasma-typo-text-s-letter-spacing: -0.02em;
885
+ --plasma-typo-text-s-font-style: normal;
886
+ --plasma-typo-text-s-bold-font-family: var(--plasma-typo-text-font-family);
887
+ --plasma-typo-text-s-bold-letter-spacing: -0.02em;
888
+ --plasma-typo-text-s-bold-font-style: normal;
889
+ --plasma-typo-text-m-bold-font-family: var(--plasma-typo-text-font-family);
890
+ --plasma-typo-text-m-bold-letter-spacing: -0.02em;
891
+ --plasma-typo-text-m-bold-font-style: normal;
892
+ --plasma-typo-text-m-medium-font-family: var(--plasma-typo-text-font-family);
893
+ --plasma-typo-text-m-medium-letter-spacing: -0.02em;
894
+ --plasma-typo-text-m-medium-font-style: normal;
895
+ --plasma-typo-text-xs-font-family: var(--plasma-typo-text-font-family);
896
+ --plasma-typo-text-xs-letter-spacing: -0.02em;
897
+ --plasma-typo-text-xs-font-style: normal;
898
+ --plasma-typo-text-xs-bold-font-family: var(--plasma-typo-text-font-family);
899
+ --plasma-typo-text-xs-bold-letter-spacing: -0.02em;
900
+ --plasma-typo-text-xs-bold-font-style: normal;
901
+ --plasma-typo-text-xs-medium-font-family: var(--plasma-typo-text-font-family);
902
+ --plasma-typo-text-xs-medium-letter-spacing: -0.02em;
903
+ --plasma-typo-text-xs-medium-font-style: normal;
868
904
  }
869
905
 
870
906
  @media (max-width: 559px) {
@@ -923,6 +959,15 @@
923
959
  --plasma-typo-body-l-bold-font-size: 0.9375rem;
924
960
  --plasma-typo-body-l-bold-font-weight: 700;
925
961
  --plasma-typo-body-l-bold-line-height: 1.25rem;
962
+ --plasma-typo-body-s-bold-font-size: 0.8125rem;
963
+ --plasma-typo-body-s-bold-font-weight: 600;
964
+ --plasma-typo-body-s-bold-line-height: 0.9375rem;
965
+ --plasma-typo-body-l-medium-font-size: 0.9375rem;
966
+ --plasma-typo-body-l-medium-font-weight: 500;
967
+ --plasma-typo-body-l-medium-line-height: 1.25rem;
968
+ --plasma-typo-body-m-font-size: 0.875rem;
969
+ --plasma-typo-body-m-font-weight: 400;
970
+ --plasma-typo-body-m-line-height: 1.125rem;
926
971
  --plasma-typo-body-s-medium-font-size: 0.8125rem;
927
972
  --plasma-typo-body-s-medium-font-weight: 500;
928
973
  --plasma-typo-body-s-medium-line-height: 0.9375rem;
@@ -947,18 +992,45 @@
947
992
  --plasma-typo-body-s-font-size: 0.8125rem;
948
993
  --plasma-typo-body-s-font-weight: 400;
949
994
  --plasma-typo-body-s-line-height: 0.9375rem;
950
- --plasma-typo-body-s-bold-font-size: 0.8125rem;
951
- --plasma-typo-body-s-bold-font-weight: 600;
952
- --plasma-typo-body-s-bold-line-height: 0.9375rem;
953
- --plasma-typo-body-l-medium-font-size: 0.9375rem;
954
- --plasma-typo-body-l-medium-font-weight: 500;
955
- --plasma-typo-body-l-medium-line-height: 1.25rem;
956
- --plasma-typo-body-m-font-size: 0.875rem;
957
- --plasma-typo-body-m-font-weight: 400;
958
- --plasma-typo-body-m-line-height: 1.125rem;
959
995
  --plasma-typo-body-xxs-medium-font-size: 0.6875rem;
960
996
  --plasma-typo-body-xxs-medium-font-weight: 500;
961
997
  --plasma-typo-body-xxs-medium-line-height: 0.8125rem;
998
+ --plasma-typo-text-l-font-size: 1.125rem;
999
+ --plasma-typo-text-l-font-weight: 400;
1000
+ --plasma-typo-text-l-line-height: 1.625rem;
1001
+ --plasma-typo-text-s-medium-font-size: 0.875rem;
1002
+ --plasma-typo-text-s-medium-font-weight: 500;
1003
+ --plasma-typo-text-s-medium-line-height: 1.25rem;
1004
+ --plasma-typo-text-l-bold-font-size: 1.125rem;
1005
+ --plasma-typo-text-l-bold-font-weight: 600;
1006
+ --plasma-typo-text-l-bold-line-height: 1.625rem;
1007
+ --plasma-typo-text-m-font-size: 1rem;
1008
+ --plasma-typo-text-m-font-weight: 400;
1009
+ --plasma-typo-text-m-line-height: 1.5rem;
1010
+ --plasma-typo-text-l-medium-font-size: 1.125rem;
1011
+ --plasma-typo-text-l-medium-font-weight: 500;
1012
+ --plasma-typo-text-l-medium-line-height: 1.625rem;
1013
+ --plasma-typo-text-s-font-size: 0.875rem;
1014
+ --plasma-typo-text-s-font-weight: 400;
1015
+ --plasma-typo-text-s-line-height: 1.25rem;
1016
+ --plasma-typo-text-s-bold-font-size: 0.875rem;
1017
+ --plasma-typo-text-s-bold-font-weight: 600;
1018
+ --plasma-typo-text-s-bold-line-height: 1.25rem;
1019
+ --plasma-typo-text-m-bold-font-size: 1rem;
1020
+ --plasma-typo-text-m-bold-font-weight: 600;
1021
+ --plasma-typo-text-m-bold-line-height: 1.5rem;
1022
+ --plasma-typo-text-m-medium-font-size: 1rem;
1023
+ --plasma-typo-text-m-medium-font-weight: 500;
1024
+ --plasma-typo-text-m-medium-line-height: 1.5rem;
1025
+ --plasma-typo-text-xs-font-size: 0.75rem;
1026
+ --plasma-typo-text-xs-font-weight: 400;
1027
+ --plasma-typo-text-xs-line-height: 1rem;
1028
+ --plasma-typo-text-xs-bold-font-size: 0.75rem;
1029
+ --plasma-typo-text-xs-bold-font-weight: 600;
1030
+ --plasma-typo-text-xs-bold-line-height: 1rem;
1031
+ --plasma-typo-text-xs-medium-font-size: 0.75rem;
1032
+ --plasma-typo-text-xs-medium-font-weight: 500;
1033
+ --plasma-typo-text-xs-medium-line-height: 1rem;
962
1034
  }
963
1035
  }
964
1036
 
@@ -1054,35 +1126,77 @@
1054
1126
  --plasma-typo-body-xxs-medium-font-size: 0.6875rem;
1055
1127
  --plasma-typo-body-xxs-medium-font-weight: 500;
1056
1128
  --plasma-typo-body-xxs-medium-line-height: 0.8125rem;
1129
+ --plasma-typo-text-m-font-size: 1rem;
1130
+ --plasma-typo-text-m-font-weight: 400;
1131
+ --plasma-typo-text-m-line-height: 1.5rem;
1132
+ --plasma-typo-text-m-bold-font-size: 1rem;
1133
+ --plasma-typo-text-m-bold-font-weight: 600;
1134
+ --plasma-typo-text-m-bold-line-height: 1.5rem;
1135
+ --plasma-typo-text-m-medium-font-size: 1rem;
1136
+ --plasma-typo-text-m-medium-font-weight: 500;
1137
+ --plasma-typo-text-m-medium-line-height: 1.5rem;
1138
+ --plasma-typo-text-s-font-size: 0.875rem;
1139
+ --plasma-typo-text-s-font-weight: 400;
1140
+ --plasma-typo-text-s-line-height: 1.25rem;
1141
+ --plasma-typo-text-s-bold-font-size: 0.875rem;
1142
+ --plasma-typo-text-s-bold-font-weight: 600;
1143
+ --plasma-typo-text-s-bold-line-height: 1.25rem;
1144
+ --plasma-typo-text-s-medium-font-size: 0.875rem;
1145
+ --plasma-typo-text-s-medium-font-weight: 500;
1146
+ --plasma-typo-text-s-medium-line-height: 1.25rem;
1147
+ --plasma-typo-text-xs-font-size: 0.75rem;
1148
+ --plasma-typo-text-xs-font-weight: 400;
1149
+ --plasma-typo-text-xs-line-height: 1rem;
1150
+ --plasma-typo-text-xs-bold-font-size: 0.75rem;
1151
+ --plasma-typo-text-xs-bold-font-weight: 600;
1152
+ --plasma-typo-text-xs-bold-line-height: 1rem;
1153
+ --plasma-typo-text-xs-medium-font-size: 0.75rem;
1154
+ --plasma-typo-text-xs-medium-font-weight: 500;
1155
+ --plasma-typo-text-xs-medium-line-height: 1rem;
1156
+ --plasma-typo-text-l-font-size: 1.25rem;
1157
+ --plasma-typo-text-l-font-weight: 400;
1158
+ --plasma-typo-text-l-line-height: 1.75rem;
1159
+ --plasma-typo-text-l-bold-font-size: 1.25rem;
1160
+ --plasma-typo-text-l-bold-font-weight: 600;
1161
+ --plasma-typo-text-l-bold-line-height: 1.75rem;
1162
+ --plasma-typo-text-l-medium-font-size: 1.25rem;
1163
+ --plasma-typo-text-l-medium-font-weight: 500;
1164
+ --plasma-typo-text-l-medium-line-height: 1.75rem;
1057
1165
  }
1058
1166
  }
1059
1167
 
1060
1168
  @media (min-width: 960px) {
1061
1169
  :root {
1170
+ --plasma-typo-dspl-s-medium-font-size: 2.125rem;
1171
+ --plasma-typo-dspl-s-medium-font-weight: 500;
1172
+ --plasma-typo-dspl-s-medium-line-height: 2.5625rem;
1062
1173
  --plasma-typo-dspl-s-font-size: 2.125rem;
1063
1174
  --plasma-typo-dspl-s-font-weight: 400;
1064
1175
  --plasma-typo-dspl-s-line-height: 2.5625rem;
1065
1176
  --plasma-typo-dspl-s-bold-font-size: 2.125rem;
1066
1177
  --plasma-typo-dspl-s-bold-font-weight: 700;
1067
1178
  --plasma-typo-dspl-s-bold-line-height: 2.5625rem;
1068
- --plasma-typo-dspl-s-medium-font-size: 2.125rem;
1069
- --plasma-typo-dspl-s-medium-font-weight: 500;
1070
- --plasma-typo-dspl-s-medium-line-height: 2.5625rem;
1071
- --plasma-typo-body-m-medium-font-size: 0.875rem;
1072
- --plasma-typo-body-m-medium-font-weight: 500;
1073
- --plasma-typo-body-m-medium-line-height: 1.125rem;
1074
- --plasma-typo-body-s-font-size: 0.8125rem;
1075
- --plasma-typo-body-s-font-weight: 400;
1076
- --plasma-typo-body-s-line-height: 0.9375rem;
1077
- --plasma-typo-body-s-bold-font-size: 0.8125rem;
1078
- --plasma-typo-body-s-bold-font-weight: 600;
1079
- --plasma-typo-body-s-bold-line-height: 0.9375rem;
1179
+ --plasma-typo-body-l-font-size: 1.125rem;
1180
+ --plasma-typo-body-l-font-weight: 400;
1181
+ --plasma-typo-body-l-line-height: 1.375rem;
1182
+ --plasma-typo-body-l-bold-font-size: 0.9375rem;
1183
+ --plasma-typo-body-l-bold-font-weight: 700;
1184
+ --plasma-typo-body-l-bold-line-height: 1.25rem;
1185
+ --plasma-typo-body-l-medium-font-size: 0.9375rem;
1186
+ --plasma-typo-body-l-medium-font-weight: 500;
1187
+ --plasma-typo-body-l-medium-line-height: 1.125rem;
1080
1188
  --plasma-typo-h1-font-size: 1.75rem;
1081
1189
  --plasma-typo-h1-font-weight: 400;
1082
1190
  --plasma-typo-h1-line-height: 2.25rem;
1083
1191
  --plasma-typo-h1-bold-font-size: 1.75rem;
1084
1192
  --plasma-typo-h1-bold-font-weight: 700;
1085
1193
  --plasma-typo-h1-bold-line-height: 2.25rem;
1194
+ --plasma-typo-body-m-font-size: 0.875rem;
1195
+ --plasma-typo-body-m-font-weight: 400;
1196
+ --plasma-typo-body-m-line-height: 1.125rem;
1197
+ --plasma-typo-body-m-bold-font-size: 0.875rem;
1198
+ --plasma-typo-body-m-bold-font-weight: 600;
1199
+ --plasma-typo-body-m-bold-line-height: 1.125rem;
1086
1200
  --plasma-typo-h1-medium-font-size: 1.75rem;
1087
1201
  --plasma-typo-h1-medium-font-weight: 500;
1088
1202
  --plasma-typo-h1-medium-line-height: 2.25rem;
@@ -1113,21 +1227,60 @@
1113
1227
  --plasma-typo-h4-medium-font-size: 1rem;
1114
1228
  --plasma-typo-h4-medium-font-weight: 500;
1115
1229
  --plasma-typo-h4-medium-line-height: 1.25rem;
1116
- --plasma-typo-body-l-font-size: 1.125rem;
1117
- --plasma-typo-body-l-font-weight: 400;
1118
- --plasma-typo-body-l-line-height: 1.375rem;
1119
- --plasma-typo-body-l-bold-font-size: 0.9375rem;
1120
- --plasma-typo-body-l-bold-font-weight: 700;
1121
- --plasma-typo-body-l-bold-line-height: 1.25rem;
1122
- --plasma-typo-body-l-medium-font-size: 0.9375rem;
1123
- --plasma-typo-body-l-medium-font-weight: 500;
1124
- --plasma-typo-body-l-medium-line-height: 1.125rem;
1125
- --plasma-typo-body-m-font-size: 0.875rem;
1126
- --plasma-typo-body-m-font-weight: 400;
1127
- --plasma-typo-body-m-line-height: 1.125rem;
1128
- --plasma-typo-body-m-bold-font-size: 0.875rem;
1129
- --plasma-typo-body-m-bold-font-weight: 600;
1130
- --plasma-typo-body-m-bold-line-height: 1.125rem;
1230
+ --plasma-typo-body-m-medium-font-size: 0.875rem;
1231
+ --plasma-typo-body-m-medium-font-weight: 500;
1232
+ --plasma-typo-body-m-medium-line-height: 1.125rem;
1233
+ --plasma-typo-body-s-font-size: 0.8125rem;
1234
+ --plasma-typo-body-s-font-weight: 400;
1235
+ --plasma-typo-body-s-line-height: 0.9375rem;
1236
+ --plasma-typo-body-s-bold-font-size: 0.8125rem;
1237
+ --plasma-typo-body-s-bold-font-weight: 600;
1238
+ --plasma-typo-body-s-bold-line-height: 0.9375rem;
1239
+ --plasma-typo-text-l-font-size: 1.5rem;
1240
+ --plasma-typo-text-l-font-weight: 400;
1241
+ --plasma-typo-text-l-line-height: 2rem;
1242
+ --plasma-typo-text-l-bold-font-size: 1.5rem;
1243
+ --plasma-typo-text-l-bold-font-weight: 600;
1244
+ --plasma-typo-text-l-bold-line-height: 2rem;
1245
+ --plasma-typo-text-xs-font-size: 0.75rem;
1246
+ --plasma-typo-text-xs-font-weight: 400;
1247
+ --plasma-typo-text-xs-line-height: 1rem;
1248
+ --plasma-typo-text-xs-bold-font-size: 0.75rem;
1249
+ --plasma-typo-text-xs-bold-font-weight: 600;
1250
+ --plasma-typo-text-xs-bold-line-height: 1rem;
1251
+ --plasma-typo-text-xs-medium-font-size: 0.75rem;
1252
+ --plasma-typo-text-xs-medium-font-weight: 500;
1253
+ --plasma-typo-text-xs-medium-line-height: 1rem;
1254
+ --plasma-typo-body-xxs-bold-font-size: 0.6875rem;
1255
+ --plasma-typo-body-xxs-bold-font-weight: 600;
1256
+ --plasma-typo-body-xxs-bold-line-height: 0.8125rem;
1257
+ --plasma-typo-body-s-medium-font-size: 0.8125rem;
1258
+ --plasma-typo-body-s-medium-font-weight: 500;
1259
+ --plasma-typo-body-s-medium-line-height: 0.9375rem;
1260
+ --plasma-typo-body-xs-font-size: 0.75rem;
1261
+ --plasma-typo-body-xs-font-weight: 400;
1262
+ --plasma-typo-body-xs-line-height: 0.875rem;
1263
+ --plasma-typo-text-l-medium-font-size: 1.5rem;
1264
+ --plasma-typo-text-l-medium-font-weight: 500;
1265
+ --plasma-typo-text-l-medium-line-height: 2rem;
1266
+ --plasma-typo-text-m-font-size: 1.125rem;
1267
+ --plasma-typo-text-m-font-weight: 400;
1268
+ --plasma-typo-text-m-line-height: 1.625rem;
1269
+ --plasma-typo-text-m-bold-font-size: 1.125rem;
1270
+ --plasma-typo-text-m-bold-font-weight: 600;
1271
+ --plasma-typo-text-m-bold-line-height: 1.625rem;
1272
+ --plasma-typo-text-m-medium-font-size: 1.125rem;
1273
+ --plasma-typo-text-m-medium-font-weight: 500;
1274
+ --plasma-typo-text-m-medium-line-height: 1.625rem;
1275
+ --plasma-typo-text-s-font-size: 0.875rem;
1276
+ --plasma-typo-text-s-font-weight: 400;
1277
+ --plasma-typo-text-s-line-height: 1.25rem;
1278
+ --plasma-typo-text-s-bold-font-size: 0.875rem;
1279
+ --plasma-typo-text-s-bold-font-weight: 600;
1280
+ --plasma-typo-text-s-bold-line-height: 1.25rem;
1281
+ --plasma-typo-text-s-medium-font-size: 0.875rem;
1282
+ --plasma-typo-text-s-medium-font-weight: 500;
1283
+ --plasma-typo-text-s-medium-line-height: 1.25rem;
1131
1284
  --plasma-typo-body-xs-bold-font-size: 0.75rem;
1132
1285
  --plasma-typo-body-xs-bold-font-weight: 600;
1133
1286
  --plasma-typo-body-xs-bold-line-height: 0.875rem;
@@ -1140,14 +1293,5 @@
1140
1293
  --plasma-typo-body-xxs-medium-font-size: 0.625rem;
1141
1294
  --plasma-typo-body-xxs-medium-font-weight: 500;
1142
1295
  --plasma-typo-body-xxs-medium-line-height: 0.75rem;
1143
- --plasma-typo-body-xxs-bold-font-size: 0.6875rem;
1144
- --plasma-typo-body-xxs-bold-font-weight: 600;
1145
- --plasma-typo-body-xxs-bold-line-height: 0.8125rem;
1146
- --plasma-typo-body-s-medium-font-size: 0.8125rem;
1147
- --plasma-typo-body-s-medium-font-weight: 500;
1148
- --plasma-typo-body-s-medium-line-height: 0.9375rem;
1149
- --plasma-typo-body-xs-font-size: 0.75rem;
1150
- --plasma-typo-body-xs-font-weight: 400;
1151
- --plasma-typo-body-xs-line-height: 0.875rem;
1152
1296
  }
1153
1297
  }