@breadstone/mosaik-themes 0.0.205 → 0.0.209

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 (80) hide show
  1. package/CHANGELOG.md +143 -0
  2. package/_index.scss +0 -12
  3. package/index.cjs +1457 -696
  4. package/index.cjs.map +1 -1
  5. package/index.d.mts +256 -58
  6. package/index.d.ts +256 -58
  7. package/index.js +1458 -697
  8. package/index.js.map +1 -1
  9. package/package.json +6 -3
  10. package/tailwind/v3/index.d.ts +0 -6
  11. package/tailwind/v3/index.d.ts.map +1 -1
  12. package/tailwind/v3/index.js +1 -7
  13. package/tailwind/v3/index.js.map +1 -1
  14. package/tailwind/v3/plugins/cosmopolitanTailwindPlugin.js +272 -12
  15. package/tailwind/v3/plugins/cosmopolitanTailwindPlugin.js.map +1 -1
  16. package/tailwind/v3/plugins/joyTailwindPlugin.js +6 -0
  17. package/tailwind/v3/plugins/joyTailwindPlugin.js.map +1 -1
  18. package/tailwind/v3/plugins/memphisTailwindPlugin.js +204 -140
  19. package/tailwind/v3/plugins/memphisTailwindPlugin.js.map +1 -1
  20. package/tailwind/v3/presets/cosmopolitanTailwindPresets.js +272 -12
  21. package/tailwind/v3/presets/cosmopolitanTailwindPresets.js.map +1 -1
  22. package/tailwind/v3/presets/joyTailwindPresets.js +6 -0
  23. package/tailwind/v3/presets/joyTailwindPresets.js.map +1 -1
  24. package/tailwind/v3/presets/memphisTailwindPresets.js +204 -140
  25. package/tailwind/v3/presets/memphisTailwindPresets.js.map +1 -1
  26. package/tailwind/v4/cosmopolitanTailwindPresets.css +305 -0
  27. package/tailwind/v4/joyTailwindPresets.css +321 -0
  28. package/tailwind/v4/memphisTailwindPresets.css +322 -0
  29. package/themes/___cosmopolitan-tokens.css +264 -20
  30. package/themes/___joy-tokens.css +2 -0
  31. package/themes/___memphis-tokens.css +188 -140
  32. package/themes/cosmopolitan-tokens.scss +264 -20
  33. package/themes/cosmopolitan.scss +661 -77
  34. package/themes/joy-tokens.scss +2 -0
  35. package/themes/joy.scss +341 -53
  36. package/themes/memphis-tokens.scss +188 -140
  37. package/themes/memphis.scss +527 -193
  38. package/index.node.cjs +0 -2710
  39. package/index.node.cjs.map +0 -1
  40. package/index.node.d.mts +0 -468
  41. package/index.node.d.ts +0 -468
  42. package/index.node.js +0 -2695
  43. package/index.node.js.map +0 -1
  44. package/tailwind/v3/plugins/base/c.d.ts +0 -44
  45. package/tailwind/v3/plugins/base/c.d.ts.map +0 -1
  46. package/tailwind/v3/plugins/base/c.js +0 -155
  47. package/tailwind/v3/plugins/base/c.js.map +0 -1
  48. package/tailwind/v3/plugins/bootstrapTailwindPlugin.d.ts +0 -2
  49. package/tailwind/v3/plugins/bootstrapTailwindPlugin.d.ts.map +0 -1
  50. package/tailwind/v3/plugins/bootstrapTailwindPlugin.js +0 -112
  51. package/tailwind/v3/plugins/bootstrapTailwindPlugin.js.map +0 -1
  52. package/tailwind/v3/plugins/fluentTailwindPlugin.d.ts +0 -2
  53. package/tailwind/v3/plugins/fluentTailwindPlugin.d.ts.map +0 -1
  54. package/tailwind/v3/plugins/fluentTailwindPlugin.js +0 -63
  55. package/tailwind/v3/plugins/fluentTailwindPlugin.js.map +0 -1
  56. package/tailwind/v3/plugins/materialTailwindPlugin.d.ts +0 -2
  57. package/tailwind/v3/plugins/materialTailwindPlugin.d.ts.map +0 -1
  58. package/tailwind/v3/plugins/materialTailwindPlugin.js +0 -53
  59. package/tailwind/v3/plugins/materialTailwindPlugin.js.map +0 -1
  60. package/tailwind/v3/presets/bootstrapTailwindPresets.d.ts +0 -2
  61. package/tailwind/v3/presets/bootstrapTailwindPresets.d.ts.map +0 -1
  62. package/tailwind/v3/presets/bootstrapTailwindPresets.js +0 -101
  63. package/tailwind/v3/presets/bootstrapTailwindPresets.js.map +0 -1
  64. package/tailwind/v3/presets/fluentTailwindPresets.d.ts +0 -2
  65. package/tailwind/v3/presets/fluentTailwindPresets.d.ts.map +0 -1
  66. package/tailwind/v3/presets/fluentTailwindPresets.js +0 -52
  67. package/tailwind/v3/presets/fluentTailwindPresets.js.map +0 -1
  68. package/tailwind/v3/presets/materialTailwindPresets.d.ts +0 -2
  69. package/tailwind/v3/presets/materialTailwindPresets.d.ts.map +0 -1
  70. package/tailwind/v3/presets/materialTailwindPresets.js +0 -42
  71. package/tailwind/v3/presets/materialTailwindPresets.js.map +0 -1
  72. package/themes/___bootstrap-tokens.css +0 -91
  73. package/themes/___fluent-tokens.css +0 -30
  74. package/themes/___material-tokens.css +0 -22
  75. package/themes/bootstrap-tokens.scss +0 -89
  76. package/themes/bootstrap.scss +0 -163
  77. package/themes/fluent-tokens.scss +0 -28
  78. package/themes/fluent.scss +0 -1591
  79. package/themes/material-tokens.scss +0 -20
  80. package/themes/material.scss +0 -94
@@ -4,6 +4,7 @@
4
4
  --layout-radius: 0px;
5
5
  --layout-space: 10px;
6
6
  --layout-thickness: 3px;
7
+ --scheme-light-surface: #ffffff;
7
8
  --scheme-light-background: #eaeaea;
8
9
  --scheme-light-foreground: #3c454f;
9
10
  --scheme-light-highlight: #d1d1d1;
@@ -13,6 +14,8 @@
13
14
  --scheme-light-semi-transparent: rgba(255, 255, 255, 0.67);
14
15
  --scheme-light-disabled: #686868;
15
16
  --scheme-light-contrast: #333333;
17
+ --scheme-light-selection: #a8c0ff;
18
+ --scheme-dark-surface: #2e2e2e;
16
19
  --scheme-dark-background: #151515;
17
20
  --scheme-dark-foreground: #c3bab0;
18
21
  --scheme-dark-highlight: #2e2e2e;
@@ -22,160 +25,205 @@
22
25
  --scheme-dark-semi-transparent: rgba(0, 0, 0, 0.67);
23
26
  --scheme-dark-disabled: #474747;
24
27
  --scheme-dark-contrast: #ffffff;
28
+ --scheme-dark-selection: #6666ff;
25
29
  --color-light-primary-0: #ffffff;
26
- --color-light-primary-50: #f9f9f9;
27
- --color-light-primary-100: #f2f2f2;
28
- --color-light-primary-200: #e8e8e8;
29
- --color-light-primary-300: #d8d8d8;
30
- --color-light-primary-400: #b4b4b4;
31
- --color-light-primary-500: #949494;
32
- --color-light-primary-600: #6c6c6c;
33
- --color-light-primary-700: #595959;
34
- --color-light-primary-800: #3a3a3a;
35
- --color-light-primary-900: #1a1a1a;
30
+ --color-light-primary-50: #fce4ec;
31
+ --color-light-primary-100: #f8bcd0;
32
+ --color-light-primary-200: #f48fb1;
33
+ --color-light-primary-300: #f06292;
34
+ --color-light-primary-400: #ec407a;
35
+ --color-light-primary-500: #e91e63;
36
+ --color-light-primary-600: #cb1a56;
37
+ --color-light-primary-700: #a31545;
38
+ --color-light-primary-800: #7e1035;
39
+ --color-light-primary-900: #3a0819;
36
40
  --color-light-secondary-0: #ffffff;
37
- --color-light-secondary-50: #e1f3ef;
38
- --color-light-secondary-100: #b5e0d6;
39
- --color-light-secondary-200: #85cdbc;
40
- --color-light-secondary-300: #57b9a2;
41
- --color-light-secondary-400: #38a990;
42
- --color-light-secondary-500: #24997e;
43
- --color-light-secondary-600: #208c71;
44
- --color-light-secondary-700: #1b7c62;
45
- --color-light-secondary-800: #166c54;
46
- --color-light-secondary-900: #0d503a;
41
+ --color-light-secondary-50: #e6f6e9;
42
+ --color-light-secondary-100: #c3e8c9;
43
+ --color-light-secondary-200: #9bd9a7;
44
+ --color-light-secondary-300: #70cb83;
45
+ --color-light-secondary-400: #4dbf68;
46
+ --color-light-secondary-500: #21b34d;
47
+ --color-light-secondary-600: #16a444;
48
+ --color-light-secondary-700: #009238;
49
+ --color-light-secondary-800: #00812d;
50
+ --color-light-secondary-900: #006218;
51
+ --color-light-tertiary-0: #ffffff;
52
+ --color-light-tertiary-50: #e1f5fc;
53
+ --color-light-tertiary-100: #b4e6f7;
54
+ --color-light-tertiary-200: #84d5f3;
55
+ --color-light-tertiary-300: #56c5ee;
56
+ --color-light-tertiary-400: #35b8eb;
57
+ --color-light-tertiary-500: #19ace9;
58
+ --color-light-tertiary-600: #139edb;
59
+ --color-light-tertiary-700: #098bc7;
60
+ --color-light-tertiary-800: #087ab4;
61
+ --color-light-tertiary-900: #005a92;
47
62
  --color-light-info-0: #ffffff;
48
- --color-light-info-50: #e8eaf9;
49
- --color-light-info-100: #c6c9f1;
50
- --color-light-info-200: #9fa7e7;
51
- --color-light-info-300: #7884dd;
52
- --color-light-info-400: #5968d6;
53
- --color-light-info-500: #394dcd;
54
- --color-light-info-600: #3344c2;
55
- --color-light-info-700: #293ab6;
56
- --color-light-info-800: #202faa;
57
- --color-light-info-900: #0a1a97;
63
+ --color-light-info-50: #f4faff;
64
+ --color-light-info-100: #ddf1ff;
65
+ --color-light-info-200: #addbff;
66
+ --color-light-info-300: #6fb6ff;
67
+ --color-light-info-400: #3990ff;
68
+ --color-light-info-500: #096bde;
69
+ --color-light-info-600: #054da7;
70
+ --color-light-info-700: #02367d;
71
+ --color-light-info-800: #072859;
72
+ --color-light-info-900: #00153c;
58
73
  --color-light-warning-0: #ffffff;
59
- --color-light-warning-50: #fcfce5;
60
- --color-light-warning-100: #f7f6bf;
61
- --color-light-warning-200: #f1f294;
62
- --color-light-warning-300: #ebec67;
63
- --color-light-warning-400: #e5e741;
64
- --color-light-warning-500: #dfe300;
65
- --color-light-warning-600: #d1d100;
66
- --color-light-warning-700: #bfba00;
67
- --color-light-warning-800: #aea300;
68
- --color-light-warning-900: #927c00;
74
+ --color-light-warning-50: #fff8c5;
75
+ --color-light-warning-100: #fae17d;
76
+ --color-light-warning-200: #eac54f;
77
+ --color-light-warning-300: #d4a72c;
78
+ --color-light-warning-400: #bf8700;
79
+ --color-light-warning-500: #9a6700;
80
+ --color-light-warning-600: #7d4e00;
81
+ --color-light-warning-700: #633c01;
82
+ --color-light-warning-800: #4d2d00;
83
+ --color-light-warning-900: #3b2300;
69
84
  --color-light-danger-0: #ffffff;
70
- --color-light-danger-50: #fcecef;
71
- --color-light-danger-100: #f8d0d5;
72
- --color-light-danger-200: #e69fa1;
73
- --color-light-danger-300: #d97b7d;
74
- --color-light-danger-400: #e35f5f;
75
- --color-light-danger-500: #e8524a;
76
- --color-light-danger-600: #d94a47;
77
- --color-light-danger-700: #c74141;
78
- --color-light-danger-800: #b93c3a;
79
- --color-light-danger-900: #ab322f;
85
+ --color-light-danger-50: #fff8f6;
86
+ --color-light-danger-100: #ffe9e8;
87
+ --color-light-danger-200: #ffc7c5;
88
+ --color-light-danger-300: #ff9192;
89
+ --color-light-danger-400: #fa5255;
90
+ --color-light-danger-500: #d3232f;
91
+ --color-light-danger-600: #a10e25;
92
+ --color-light-danger-700: #77061b;
93
+ --color-light-danger-800: #580013;
94
+ --color-light-danger-900: #39000d;
80
95
  --color-light-success-0: #ffffff;
81
- --color-light-success-50: #e1f3ef;
82
- --color-light-success-100: #b5e0d6;
83
- --color-light-success-200: #85cdbc;
84
- --color-light-success-300: #57b9a2;
85
- --color-light-success-400: #38a990;
86
- --color-light-success-500: #24997e;
87
- --color-light-success-600: #208c71;
88
- --color-light-success-700: #1b7c62;
89
- --color-light-success-800: #166c54;
90
- --color-light-success-900: #0d503a;
96
+ --color-light-success-50: #f3fef5;
97
+ --color-light-success-100: #d7f5dd;
98
+ --color-light-success-200: #77ec95;
99
+ --color-light-success-300: #4cc76e;
100
+ --color-light-success-400: #2ca24d;
101
+ --color-light-success-500: #1a7d36;
102
+ --color-light-success-600: #0f5d26;
103
+ --color-light-success-700: #034318;
104
+ --color-light-success-800: #002f0f;
105
+ --color-light-success-900: #001d09;
106
+ --color-light-highlight-0: #ffffff;
107
+ --color-light-highlight-50: #fdf7ff;
108
+ --color-light-highlight-100: #f4eaff;
109
+ --color-light-highlight-200: #e1cbff;
110
+ --color-light-highlight-300: #c69eff;
111
+ --color-light-highlight-400: #a374f9;
112
+ --color-light-highlight-500: #814dde;
113
+ --color-light-highlight-600: #5f35ae;
114
+ --color-light-highlight-700: #452382;
115
+ --color-light-highlight-800: #301761;
116
+ --color-light-highlight-900: #1d0a42;
91
117
  --color-light-neutral-0: #ffffff;
92
- --color-light-neutral-50: #f9f9f9;
93
- --color-light-neutral-100: #f2f2f2;
94
- --color-light-neutral-200: #e8e8e8;
95
- --color-light-neutral-300: #d8d8d8;
96
- --color-light-neutral-400: #b4b4b4;
97
- --color-light-neutral-500: #949494;
98
- --color-light-neutral-600: #6c6c6c;
99
- --color-light-neutral-700: #595959;
100
- --color-light-neutral-800: #3a3a3a;
101
- --color-light-neutral-900: #1a1a1a;
118
+ --color-light-neutral-50: #f7f7f8;
119
+ --color-light-neutral-100: #ebebef;
120
+ --color-light-neutral-200: #d8d8df;
121
+ --color-light-neutral-300: #b9b9c6;
122
+ --color-light-neutral-400: #8f8fa3;
123
+ --color-light-neutral-500: #73738c;
124
+ --color-light-neutral-600: #5a5a72;
125
+ --color-light-neutral-700: #434356;
126
+ --color-light-neutral-800: #25252d;
127
+ --color-light-neutral-900: #131318;
102
128
  --color-dark-primary-0: #000000;
103
- --color-dark-primary-50: #1a1a1a;
104
- --color-dark-primary-100: #3a3a3a;
105
- --color-dark-primary-200: #595959;
106
- --color-dark-primary-300: #6c6c6c;
107
- --color-dark-primary-400: #949494;
108
- --color-dark-primary-500: #b4b4b4;
109
- --color-dark-primary-600: #d8d8d8;
110
- --color-dark-primary-700: #e8e8e8;
111
- --color-dark-primary-800: #f2f2f2;
112
- --color-dark-primary-900: #f9f9f9;
129
+ --color-dark-primary-50: #3a0819;
130
+ --color-dark-primary-100: #7e1035;
131
+ --color-dark-primary-200: #a31545;
132
+ --color-dark-primary-300: #cb1a56;
133
+ --color-dark-primary-400: #e91e63;
134
+ --color-dark-primary-500: #ec407a;
135
+ --color-dark-primary-600: #f06292;
136
+ --color-dark-primary-700: #f48fb1;
137
+ --color-dark-primary-800: #f8bcd0;
138
+ --color-dark-primary-900: #fce4ec;
113
139
  --color-dark-secondary-0: #000000;
114
- --color-dark-secondary-50: #0d503a;
115
- --color-dark-secondary-100: #166c54;
116
- --color-dark-secondary-200: #1b7c62;
117
- --color-dark-secondary-300: #208c71;
118
- --color-dark-secondary-400: #24997e;
119
- --color-dark-secondary-500: #38a990;
120
- --color-dark-secondary-600: #57b9a2;
121
- --color-dark-secondary-700: #85cdbc;
122
- --color-dark-secondary-800: #b5e0d6;
123
- --color-dark-secondary-900: #e1f3ef;
140
+ --color-dark-secondary-50: #006218;
141
+ --color-dark-secondary-100: #00812d;
142
+ --color-dark-secondary-200: #009238;
143
+ --color-dark-secondary-300: #16a444;
144
+ --color-dark-secondary-400: #21b34d;
145
+ --color-dark-secondary-500: #4dbf68;
146
+ --color-dark-secondary-600: #70cb83;
147
+ --color-dark-secondary-700: #9bd9a7;
148
+ --color-dark-secondary-800: #c3e8c9;
149
+ --color-dark-secondary-900: #e6f6e9;
150
+ --color-dark-tertiary-0: #000000;
151
+ --color-dark-tertiary-50: #005a92;
152
+ --color-dark-tertiary-100: #087ab4;
153
+ --color-dark-tertiary-200: #098bc7;
154
+ --color-dark-tertiary-300: #139edb;
155
+ --color-dark-tertiary-400: #19ace9;
156
+ --color-dark-tertiary-500: #35b8eb;
157
+ --color-dark-tertiary-600: #56c5ee;
158
+ --color-dark-tertiary-700: #84d5f3;
159
+ --color-dark-tertiary-800: #b4e6f7;
160
+ --color-dark-tertiary-900: #e1f5fc;
124
161
  --color-dark-info-0: #000000;
125
- --color-dark-info-50: #0a1a97;
126
- --color-dark-info-100: #202faa;
127
- --color-dark-info-200: #293ab6;
128
- --color-dark-info-300: #3344c2;
129
- --color-dark-info-400: #394dcd;
130
- --color-dark-info-500: #5968d6;
131
- --color-dark-info-600: #7884dd;
132
- --color-dark-info-700: #9fa7e7;
133
- --color-dark-info-800: #c6c9f1;
134
- --color-dark-info-900: #e8eaf9;
162
+ --color-dark-info-50: #00153c;
163
+ --color-dark-info-100: #072859;
164
+ --color-dark-info-200: #02367d;
165
+ --color-dark-info-300: #054da7;
166
+ --color-dark-info-400: #096bde;
167
+ --color-dark-info-500: #3990ff;
168
+ --color-dark-info-600: #6fb6ff;
169
+ --color-dark-info-700: #addbff;
170
+ --color-dark-info-800: #ddf1ff;
171
+ --color-dark-info-900: #f4faff;
135
172
  --color-dark-warning-0: #000000;
136
- --color-dark-warning-50: #927c00;
137
- --color-dark-warning-100: #aea300;
138
- --color-dark-warning-200: #bfba00;
139
- --color-dark-warning-300: #d1d100;
140
- --color-dark-warning-400: #dfe300;
141
- --color-dark-warning-500: #e5e741;
142
- --color-dark-warning-600: #ebec67;
143
- --color-dark-warning-700: #f1f294;
144
- --color-dark-warning-800: #f7f6bf;
145
- --color-dark-warning-900: #fcfce5;
173
+ --color-dark-warning-50: #3b2300;
174
+ --color-dark-warning-100: #4d2d00;
175
+ --color-dark-warning-200: #633c01;
176
+ --color-dark-warning-300: #7d4e00;
177
+ --color-dark-warning-400: #9a6700;
178
+ --color-dark-warning-500: #bf8700;
179
+ --color-dark-warning-600: #d4a72c;
180
+ --color-dark-warning-700: #eac54f;
181
+ --color-dark-warning-800: #fae17d;
182
+ --color-dark-warning-900: #fff8c5;
146
183
  --color-dark-danger-0: #000000;
147
- --color-dark-danger-50: #ab322f;
148
- --color-dark-danger-100: #b93c3a;
149
- --color-dark-danger-200: #c74141;
150
- --color-dark-danger-300: #d94a47;
151
- --color-dark-danger-400: #e8524a;
152
- --color-dark-danger-500: #e35f5f;
153
- --color-dark-danger-600: #d97b7d;
154
- --color-dark-danger-700: #e69fa1;
155
- --color-dark-danger-800: #f8d0d5;
156
- --color-dark-danger-900: #fcecef;
184
+ --color-dark-danger-50: #39000d;
185
+ --color-dark-danger-100: #580013;
186
+ --color-dark-danger-200: #77061b;
187
+ --color-dark-danger-300: #a10e25;
188
+ --color-dark-danger-400: #d3232f;
189
+ --color-dark-danger-500: #fa5255;
190
+ --color-dark-danger-600: #ff9192;
191
+ --color-dark-danger-700: #ffc7c5;
192
+ --color-dark-danger-800: #ffe9e8;
193
+ --color-dark-danger-900: #fff8f6;
157
194
  --color-dark-success-0: #000000;
158
- --color-dark-success-50: #0d503a;
159
- --color-dark-success-100: #166c54;
160
- --color-dark-success-200: #1b7c62;
161
- --color-dark-success-300: #208c71;
162
- --color-dark-success-400: #24997e;
163
- --color-dark-success-500: #38a990;
164
- --color-dark-success-600: #57b9a2;
165
- --color-dark-success-700: #85cdbc;
166
- --color-dark-success-800: #b5e0d6;
167
- --color-dark-success-900: #e1f3ef;
195
+ --color-dark-success-50: #001d09;
196
+ --color-dark-success-100: #002f0f;
197
+ --color-dark-success-200: #034318;
198
+ --color-dark-success-300: #0f5d26;
199
+ --color-dark-success-400: #1a7d36;
200
+ --color-dark-success-500: #2ca24d;
201
+ --color-dark-success-600: #4cc76e;
202
+ --color-dark-success-700: #77ec95;
203
+ --color-dark-success-800: #d7f5dd;
204
+ --color-dark-success-900: #f3fef5;
205
+ --color-dark-highlight-0: #000000;
206
+ --color-dark-highlight-50: #1d0a42;
207
+ --color-dark-highlight-100: #301761;
208
+ --color-dark-highlight-200: #452382;
209
+ --color-dark-highlight-300: #5f35ae;
210
+ --color-dark-highlight-400: #814dde;
211
+ --color-dark-highlight-500: #a374f9;
212
+ --color-dark-highlight-600: #c69eff;
213
+ --color-dark-highlight-700: #e1cbff;
214
+ --color-dark-highlight-800: #f4eaff;
215
+ --color-dark-highlight-900: #fdf7ff;
168
216
  --color-dark-neutral-0: #000000;
169
- --color-dark-neutral-50: #1a1a1a;
170
- --color-dark-neutral-100: #3a3a3a;
171
- --color-dark-neutral-200: #595959;
172
- --color-dark-neutral-300: #6c6c6c;
173
- --color-dark-neutral-400: #949494;
174
- --color-dark-neutral-500: #b4b4b4;
175
- --color-dark-neutral-600: #d8d8d8;
176
- --color-dark-neutral-700: #e8e8e8;
177
- --color-dark-neutral-800: #f2f2f2;
178
- --color-dark-neutral-900: #f9f9f9;
217
+ --color-dark-neutral-50: #131318;
218
+ --color-dark-neutral-100: #25252d;
219
+ --color-dark-neutral-200: #434356;
220
+ --color-dark-neutral-300: #5a5a72;
221
+ --color-dark-neutral-400: #73738c;
222
+ --color-dark-neutral-500: #8f8fa3;
223
+ --color-dark-neutral-600: #b9b9c6;
224
+ --color-dark-neutral-700: #d8d8df;
225
+ --color-dark-neutral-800: #ebebef;
226
+ --color-dark-neutral-900: #f7f7f8;
179
227
  --typography-headline1-font-size: 96px;
180
228
  --typography-headline1-line-height: 100px;
181
229
  --typography-headline1-font-weight: 300;
@@ -3,6 +3,7 @@ $font-family: 'Noto Sans', sans-serif;
3
3
  $layout-radius: 3px;
4
4
  $layout-space: 8px;
5
5
  $layout-thickness: 1px;
6
+ $scheme-light-surface: #fefefe;
6
7
  $scheme-light-contrast: #ffffff;
7
8
  $scheme-light-background: #ffffff;
8
9
  $scheme-light-foreground: #000000;
@@ -12,6 +13,8 @@ $scheme-light-lowlight: #4d4d4d;
12
13
  $scheme-light-transparent: rgba(255, 255, 255, 0);
13
14
  $scheme-light-semi-transparent: rgba(255, 255, 255, 0.67);
14
15
  $scheme-light-disabled: #b8b5b2;
16
+ $scheme-light-selection: #ffaad4;
17
+ $scheme-dark-surface: #2e2d2d;
15
18
  $scheme-dark-contrast: #ffffff;
16
19
  $scheme-dark-background: #2e2d2d;
17
20
  $scheme-dark-foreground: #ffffff;
@@ -21,24 +24,253 @@ $scheme-dark-lowlight: #999999;
21
24
  $scheme-dark-transparent: rgba(23, 23, 23, 0);
22
25
  $scheme-dark-semi-transparent: rgba(23, 23, 23, 0.67);
23
26
  $scheme-dark-disabled: #5c5956;
27
+ $scheme-dark-selection: #ff66aa;
24
28
  $color-light-primary-0: #ffffff;
25
- $color-light-primary-100: #fed7ea;
26
- $color-light-primary-500: #dc1884;
29
+ $color-light-primary-50: #fce4ec;
30
+ $color-light-primary-100: #f8bcd0;
31
+ $color-light-primary-200: #f48fb1;
32
+ $color-light-primary-300: #f06292;
33
+ $color-light-primary-400: #ec407a;
34
+ $color-light-primary-500: #e91e63;
35
+ $color-light-primary-600: #cb1a56;
36
+ $color-light-primary-700: #a31545;
37
+ $color-light-primary-800: #7e1035;
38
+ $color-light-primary-900: #3a0819;
39
+ $color-light-secondary-0: #ffffff;
40
+ $color-light-secondary-50: #e6f6e9;
41
+ $color-light-secondary-100: #c3e8c9;
42
+ $color-light-secondary-200: #9bd9a7;
43
+ $color-light-secondary-300: #70cb83;
44
+ $color-light-secondary-400: #4dbf68;
45
+ $color-light-secondary-500: #21b34d;
46
+ $color-light-secondary-600: #16a444;
47
+ $color-light-secondary-700: #009238;
48
+ $color-light-secondary-800: #00812d;
49
+ $color-light-secondary-900: #006218;
50
+ $color-light-tertiary-0: #ffffff;
51
+ $color-light-tertiary-50: #e1f5fc;
52
+ $color-light-tertiary-100: #b4e6f7;
53
+ $color-light-tertiary-200: #84d5f3;
54
+ $color-light-tertiary-300: #56c5ee;
55
+ $color-light-tertiary-400: #35b8eb;
56
+ $color-light-tertiary-500: #19ace9;
57
+ $color-light-tertiary-600: #139edb;
58
+ $color-light-tertiary-700: #098bc7;
59
+ $color-light-tertiary-800: #087ab4;
60
+ $color-light-tertiary-900: #005a92;
61
+ $color-light-info-0: #ffffff;
62
+ $color-light-info-50: #f4faff;
63
+ $color-light-info-100: #ddf1ff;
64
+ $color-light-info-200: #addbff;
65
+ $color-light-info-300: #6fb6ff;
66
+ $color-light-info-400: #3990ff;
67
+ $color-light-info-500: #096bde;
68
+ $color-light-info-600: #054da7;
69
+ $color-light-info-700: #02367d;
70
+ $color-light-info-800: #072859;
71
+ $color-light-info-900: #00153c;
72
+ $color-light-warning-0: #ffffff;
73
+ $color-light-warning-50: #fff8c5;
74
+ $color-light-warning-100: #fae17d;
75
+ $color-light-warning-200: #eac54f;
76
+ $color-light-warning-300: #d4a72c;
77
+ $color-light-warning-400: #bf8700;
78
+ $color-light-warning-500: #9a6700;
79
+ $color-light-warning-600: #7d4e00;
80
+ $color-light-warning-700: #633c01;
81
+ $color-light-warning-800: #4d2d00;
82
+ $color-light-warning-900: #3b2300;
83
+ $color-light-danger-0: #ffffff;
84
+ $color-light-danger-50: #fff8f6;
85
+ $color-light-danger-100: #ffe9e8;
86
+ $color-light-danger-200: #ffc7c5;
87
+ $color-light-danger-300: #ff9192;
88
+ $color-light-danger-400: #fa5255;
89
+ $color-light-danger-500: #d3232f;
90
+ $color-light-danger-600: #a10e25;
91
+ $color-light-danger-700: #77061b;
92
+ $color-light-danger-800: #580013;
93
+ $color-light-danger-900: #39000d;
94
+ $color-light-success-0: #ffffff;
95
+ $color-light-success-50: #f3fef5;
96
+ $color-light-success-100: #d7f5dd;
97
+ $color-light-success-200: #77ec95;
98
+ $color-light-success-300: #4cc76e;
99
+ $color-light-success-400: #2ca24d;
100
+ $color-light-success-500: #1a7d36;
101
+ $color-light-success-600: #0f5d26;
102
+ $color-light-success-700: #034318;
103
+ $color-light-success-800: #002f0f;
104
+ $color-light-success-900: #001d09;
105
+ $color-light-highlight-0: #ffffff;
106
+ $color-light-highlight-50: #fdf7ff;
107
+ $color-light-highlight-100: #f4eaff;
108
+ $color-light-highlight-200: #e1cbff;
109
+ $color-light-highlight-300: #c69eff;
110
+ $color-light-highlight-400: #a374f9;
111
+ $color-light-highlight-500: #814dde;
112
+ $color-light-highlight-600: #5f35ae;
113
+ $color-light-highlight-700: #452382;
114
+ $color-light-highlight-800: #301761;
115
+ $color-light-highlight-900: #1d0a42;
116
+ $color-light-neutral-0: #ffffff;
117
+ $color-light-neutral-50: #f7f7f8;
118
+ $color-light-neutral-100: #ebebef;
119
+ $color-light-neutral-200: #d8d8df;
120
+ $color-light-neutral-300: #b9b9c6;
121
+ $color-light-neutral-400: #8f8fa3;
122
+ $color-light-neutral-500: #73738c;
123
+ $color-light-neutral-600: #5a5a72;
124
+ $color-light-neutral-700: #434356;
125
+ $color-light-neutral-800: #25252d;
126
+ $color-light-neutral-900: #131318;
27
127
  $color-dark-primary-0: #000000;
28
- $color-dark-primary-100: #4b0225;
29
- $color-dark-primary-500: #dc1884;
30
- $typography-heading-font-size: 24px;
31
- $typography-heading-line-height: 28px;
32
- $typography-heading-font-weight: 300;
33
- $typography-heading-letter-spacing: -0.25px;
34
- $typography-heading-text-decoration: none;
35
- $typography-heading-text-transform: none;
36
- $typography-content-font-size: 16px;
37
- $typography-content-line-height: 20px;
38
- $typography-content-font-weight: 300;
39
- $typography-content-letter-spacing: -0.25px;
40
- $typography-content-text-decoration: none;
41
- $typography-content-text-transform: none;
128
+ $color-dark-primary-50: #3a0819;
129
+ $color-dark-primary-100: #7e1035;
130
+ $color-dark-primary-200: #a31545;
131
+ $color-dark-primary-300: #cb1a56;
132
+ $color-dark-primary-400: #e91e63;
133
+ $color-dark-primary-500: #ec407a;
134
+ $color-dark-primary-600: #f06292;
135
+ $color-dark-primary-700: #f48fb1;
136
+ $color-dark-primary-800: #f8bcd0;
137
+ $color-dark-primary-900: #fce4ec;
138
+ $color-dark-secondary-0: #000000;
139
+ $color-dark-secondary-50: #006218;
140
+ $color-dark-secondary-100: #00812d;
141
+ $color-dark-secondary-200: #009238;
142
+ $color-dark-secondary-300: #16a444;
143
+ $color-dark-secondary-400: #21b34d;
144
+ $color-dark-secondary-500: #4dbf68;
145
+ $color-dark-secondary-600: #70cb83;
146
+ $color-dark-secondary-700: #9bd9a7;
147
+ $color-dark-secondary-800: #c3e8c9;
148
+ $color-dark-secondary-900: #e6f6e9;
149
+ $color-dark-tertiary-0: #000000;
150
+ $color-dark-tertiary-50: #005a92;
151
+ $color-dark-tertiary-100: #087ab4;
152
+ $color-dark-tertiary-200: #098bc7;
153
+ $color-dark-tertiary-300: #139edb;
154
+ $color-dark-tertiary-400: #19ace9;
155
+ $color-dark-tertiary-500: #35b8eb;
156
+ $color-dark-tertiary-600: #56c5ee;
157
+ $color-dark-tertiary-700: #84d5f3;
158
+ $color-dark-tertiary-800: #b4e6f7;
159
+ $color-dark-tertiary-900: #e1f5fc;
160
+ $color-dark-info-0: #000000;
161
+ $color-dark-info-50: #00153c;
162
+ $color-dark-info-100: #072859;
163
+ $color-dark-info-200: #02367d;
164
+ $color-dark-info-300: #054da7;
165
+ $color-dark-info-400: #096bde;
166
+ $color-dark-info-500: #3990ff;
167
+ $color-dark-info-600: #6fb6ff;
168
+ $color-dark-info-700: #addbff;
169
+ $color-dark-info-800: #ddf1ff;
170
+ $color-dark-info-900: #f4faff;
171
+ $color-dark-warning-0: #000000;
172
+ $color-dark-warning-50: #3b2300;
173
+ $color-dark-warning-100: #4d2d00;
174
+ $color-dark-warning-200: #633c01;
175
+ $color-dark-warning-300: #7d4e00;
176
+ $color-dark-warning-400: #9a6700;
177
+ $color-dark-warning-500: #bf8700;
178
+ $color-dark-warning-600: #d4a72c;
179
+ $color-dark-warning-700: #eac54f;
180
+ $color-dark-warning-800: #fae17d;
181
+ $color-dark-warning-900: #fff8c5;
182
+ $color-dark-danger-0: #000000;
183
+ $color-dark-danger-50: #39000d;
184
+ $color-dark-danger-100: #580013;
185
+ $color-dark-danger-200: #77061b;
186
+ $color-dark-danger-300: #a10e25;
187
+ $color-dark-danger-400: #d3232f;
188
+ $color-dark-danger-500: #fa5255;
189
+ $color-dark-danger-600: #ff9192;
190
+ $color-dark-danger-700: #ffc7c5;
191
+ $color-dark-danger-800: #ffe9e8;
192
+ $color-dark-danger-900: #fff8f6;
193
+ $color-dark-success-0: #000000;
194
+ $color-dark-success-50: #001d09;
195
+ $color-dark-success-100: #002f0f;
196
+ $color-dark-success-200: #034318;
197
+ $color-dark-success-300: #0f5d26;
198
+ $color-dark-success-400: #1a7d36;
199
+ $color-dark-success-500: #2ca24d;
200
+ $color-dark-success-600: #4cc76e;
201
+ $color-dark-success-700: #77ec95;
202
+ $color-dark-success-800: #d7f5dd;
203
+ $color-dark-success-900: #f3fef5;
204
+ $color-dark-highlight-0: #000000;
205
+ $color-dark-highlight-50: #1d0a42;
206
+ $color-dark-highlight-100: #301761;
207
+ $color-dark-highlight-200: #452382;
208
+ $color-dark-highlight-300: #5f35ae;
209
+ $color-dark-highlight-400: #814dde;
210
+ $color-dark-highlight-500: #a374f9;
211
+ $color-dark-highlight-600: #c69eff;
212
+ $color-dark-highlight-700: #e1cbff;
213
+ $color-dark-highlight-800: #f4eaff;
214
+ $color-dark-highlight-900: #fdf7ff;
215
+ $color-dark-neutral-0: #000000;
216
+ $color-dark-neutral-50: #131318;
217
+ $color-dark-neutral-100: #25252d;
218
+ $color-dark-neutral-200: #434356;
219
+ $color-dark-neutral-300: #5a5a72;
220
+ $color-dark-neutral-400: #73738c;
221
+ $color-dark-neutral-500: #8f8fa3;
222
+ $color-dark-neutral-600: #b9b9c6;
223
+ $color-dark-neutral-700: #d8d8df;
224
+ $color-dark-neutral-800: #ebebef;
225
+ $color-dark-neutral-900: #f7f7f8;
226
+ $typography-headline1-font-size: 24px;
227
+ $typography-headline1-line-height: 28px;
228
+ $typography-headline1-font-weight: 300;
229
+ $typography-headline1-letter-spacing: -0.25px;
230
+ $typography-headline1-text-decoration: none;
231
+ $typography-headline1-text-transform: none;
232
+ $typography-headline2-font-size: 24px;
233
+ $typography-headline2-line-height: 28px;
234
+ $typography-headline2-font-weight: 300;
235
+ $typography-headline2-letter-spacing: -0.25px;
236
+ $typography-headline2-text-decoration: none;
237
+ $typography-headline2-text-transform: none;
238
+ $typography-headline3-font-size: 24px;
239
+ $typography-headline3-line-height: 28px;
240
+ $typography-headline3-font-weight: 300;
241
+ $typography-headline3-letter-spacing: -0.25px;
242
+ $typography-headline3-text-decoration: none;
243
+ $typography-headline3-text-transform: none;
244
+ $typography-headline4-font-size: 24px;
245
+ $typography-headline4-line-height: 28px;
246
+ $typography-headline4-font-weight: 300;
247
+ $typography-headline4-letter-spacing: -0.25px;
248
+ $typography-headline4-text-decoration: none;
249
+ $typography-headline4-text-transform: none;
250
+ $typography-headline5-font-size: 24px;
251
+ $typography-headline5-line-height: 28px;
252
+ $typography-headline5-font-weight: 300;
253
+ $typography-headline5-letter-spacing: -0.25px;
254
+ $typography-headline5-text-decoration: none;
255
+ $typography-headline5-text-transform: none;
256
+ $typography-headline6-font-size: 24px;
257
+ $typography-headline6-line-height: 28px;
258
+ $typography-headline6-font-weight: 300;
259
+ $typography-headline6-letter-spacing: -0.25px;
260
+ $typography-headline6-text-decoration: none;
261
+ $typography-headline6-text-transform: none;
262
+ $typography-body1-font-size: 16px;
263
+ $typography-body1-line-height: 20px;
264
+ $typography-body1-font-weight: 300;
265
+ $typography-body1-letter-spacing: -0.25px;
266
+ $typography-body1-text-decoration: none;
267
+ $typography-body1-text-transform: none;
268
+ $typography-body2-font-size: 16px;
269
+ $typography-body2-line-height: 20px;
270
+ $typography-body2-font-weight: 300;
271
+ $typography-body2-letter-spacing: -0.25px;
272
+ $typography-body2-text-decoration: none;
273
+ $typography-body2-text-transform: none;
42
274
  $typography-button-font-size: 16px;
43
275
  $typography-button-line-height: 20px;
44
276
  $typography-button-font-weight: 700;
@@ -188,8 +420,14 @@ $size-key-small: "small";
188
420
  $size-key-medium: "medium";
189
421
  $size-key-large: "large";
190
422
  $size-key-giant: "giant";
191
- $typography-key-heading: "heading";
192
- $typography-key-content: "content";
423
+ $typography-key-headline1: "headline1";
424
+ $typography-key-headline2: "headline2";
425
+ $typography-key-headline3: "headline3";
426
+ $typography-key-headline4: "headline4";
427
+ $typography-key-headline5: "headline5";
428
+ $typography-key-headline6: "headline6";
429
+ $typography-key-body1: "body1";
430
+ $typography-key-body2: "body2";
193
431
  $typography-key-button: "button";
194
432
  $elevation-key-light: "light";
195
433
  $elevation-key-semilight: "semilight";
@@ -203,8 +441,14 @@ $variant-tertiary: "tertiary";
203
441
  $duration-short: 200ms;
204
442
  $duration-medium: 400ms;
205
443
  $duration-long: 600ms;
206
- $typography-heading-font-family: $font-family;
207
- $typography-content-font-family: $font-family;
444
+ $typography-headline1-font-family: $font-family;
445
+ $typography-headline2-font-family: $font-family;
446
+ $typography-headline3-font-family: $font-family;
447
+ $typography-headline4-font-family: $font-family;
448
+ $typography-headline5-font-family: $font-family;
449
+ $typography-headline6-font-family: $font-family;
450
+ $typography-body1-font-family: $font-family;
451
+ $typography-body2-font-family: $font-family;
208
452
  $typography-button-font-family: $font-family;
209
453
  $size-key: $size-key-tiny $size-key-small $size-key-medium $size-key-large $size-key-giant;
210
454
  $elevation-key: $elevation-key-light $elevation-key-semilight $elevation-key-regular $elevation-key-semibold $elevation-key-bold $elevation-key-extrabold;