@breadstone/mosaik-themes 0.0.170 → 0.0.172

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 (40) hide show
  1. package/CHANGELOG.md +263 -15
  2. package/Index.d.ts +1 -1
  3. package/Index.d.ts.map +1 -1
  4. package/Index.js +1 -1
  5. package/Index.js.map +1 -1
  6. package/README.md +41 -12
  7. package/Themes/cosmopolitan.scss +16 -6
  8. package/Themes/joy.scss +4 -0
  9. package/Themes/{retro.scss → memphis.scss} +1927 -1887
  10. package/Theming/MemphisTheme.d.ts +13 -0
  11. package/Theming/MemphisTheme.d.ts.map +1 -0
  12. package/Theming/{RetroTheme.js → MemphisTheme.js} +22 -22
  13. package/Theming/MemphisTheme.js.map +1 -0
  14. package/Theming/ThemeGenerator.d.ts +2 -2
  15. package/Theming/ThemeGenerator.d.ts.map +1 -1
  16. package/Theming/ThemeGenerator.js +9 -9
  17. package/Theming/ThemeGenerator.js.map +1 -1
  18. package/Theming/Tokens/{RetroTokens.d.ts → MemphisTokens.d.ts} +2 -2
  19. package/Theming/Tokens/MemphisTokens.d.ts.map +1 -0
  20. package/Theming/Tokens/{RetroTokens.js → MemphisTokens.js} +2 -2
  21. package/Theming/Tokens/MemphisTokens.js.map +1 -0
  22. package/_index.scss +3 -3
  23. package/package.json +2 -2
  24. package/Themes/___bootstrap-tokens.css +0 -91
  25. package/Themes/___cosmopolitan-tokens.css +0 -213
  26. package/Themes/___fluent-tokens.css +0 -30
  27. package/Themes/___joy-tokens.css +0 -501
  28. package/Themes/___material-tokens.css +0 -22
  29. package/Themes/___retro-tokens.css +0 -391
  30. package/Themes/bootstrap-tokens.scss +0 -89
  31. package/Themes/cosmopolitan-tokens.scss +0 -211
  32. package/Themes/fluent-tokens.scss +0 -28
  33. package/Themes/joy-tokens.scss +0 -499
  34. package/Themes/material-tokens.scss +0 -20
  35. package/Themes/retro-tokens.scss +0 -389
  36. package/Theming/RetroTheme.d.ts +0 -13
  37. package/Theming/RetroTheme.d.ts.map +0 -1
  38. package/Theming/RetroTheme.js.map +0 -1
  39. package/Theming/Tokens/RetroTokens.d.ts.map +0 -1
  40. package/Theming/Tokens/RetroTokens.js.map +0 -1
package/Themes/___cosmopolitan-tokens.css DELETED
@@ -1,213 +0,0 @@
1
- :root {
2
- --name: "cosmopolitan";
3
- --font-family: 'Noto Sans', sans-serif;
4
- --layout-radius: 3px;
5
- --layout-space: 8px;
6
- --layout-thickness: 1px;
7
- --scheme-light-contrast: #ffffff;
8
- --scheme-light-background: #ffffff;
9
- --scheme-light-foreground: #000000;
10
- --scheme-light-highlight: #E2E2E2;
11
- --scheme-light-middlelight: #777777;
12
- --scheme-light-lowlight: #4D4D4D;
13
- --scheme-light-transparent: #FFFFFF00;
14
- --scheme-light-semi-transparent: #FFFFFFAA;
15
- --scheme-light-disabled: #B8B5B2;
16
- --scheme-dark-contrast: #ffffff;
17
- --scheme-dark-background: #2E2D2D;
18
- --scheme-dark-foreground: #ffffff;
19
- --scheme-dark-highlight: #333333;
20
- --scheme-dark-middlelight: #666666;
21
- --scheme-dark-lowlight: #999999;
22
- --scheme-dark-transparent: #17171700;
23
- --scheme-dark-semi-transparent: #171717aa;
24
- --scheme-dark-disabled: #5C5956;
25
- --color-light-primary-0: #ffffff;
26
- --color-light-primary-100: #fed7ea;
27
- --color-light-primary-500: #dc1884;
28
- --color-dark-primary-0: #000000;
29
- --color-dark-primary-100: #4b0225;
30
- --color-dark-primary-500: #dc1884;
31
- --typography-heading-font-size: 24px;
32
- --typography-heading-line-height: 28px;
33
- --typography-heading-font-weight: 300;
34
- --typography-heading-letter-spacing: -0.25px;
35
- --typography-heading-text-decoration: none;
36
- --typography-heading-text-transform: none;
37
- --typography-content-font-size: 16px;
38
- --typography-content-line-height: 20px;
39
- --typography-content-font-weight: 300;
40
- --typography-content-letter-spacing: -0.25px;
41
- --typography-content-text-decoration: none;
42
- --typography-content-text-transform: none;
43
- --typography-button-font-size: 16px;
44
- --typography-button-line-height: 20px;
45
- --typography-button-font-weight: 700;
46
- --typography-button-letter-spacing: -0.25px;
47
- --typography-button-text-decoration: none;
48
- --typography-button-text-transform: uppercase;
49
- --elevation-none: none;
50
- --elevation-light-light: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.14);
51
- --elevation-light-light-offset-x-0: 0px;
52
- --elevation-light-light-offset-x-1: 0px;
53
- --elevation-light-light-offset-y-0: 0px;
54
- --elevation-light-light-offset-y-1: 1px;
55
- --elevation-light-light-blur-0: 2px;
56
- --elevation-light-light-blur-1: 2px;
57
- --elevation-light-light-spread-0: 0px;
58
- --elevation-light-light-spread-1: 0px;
59
- --elevation-light-light-color-0: rgba(0, 0, 0, 0.12);
60
- --elevation-light-light-color-1: rgba(0, 0, 0, 0.14);
61
- --elevation-light-semilight: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.14);
62
- --elevation-light-semilight-offset-x-0: 0px;
63
- --elevation-light-semilight-offset-x-1: 0px;
64
- --elevation-light-semilight-offset-y-0: 0px;
65
- --elevation-light-semilight-offset-y-1: 2px;
66
- --elevation-light-semilight-blur-0: 2px;
67
- --elevation-light-semilight-blur-1: 4px;
68
- --elevation-light-semilight-spread-0: 0px;
69
- --elevation-light-semilight-spread-1: 0px;
70
- --elevation-light-semilight-color-0: rgba(0, 0, 0, 0.12);
71
- --elevation-light-semilight-color-1: rgba(0, 0, 0, 0.14);
72
- --elevation-light-regular: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 4px 8px 0px rgba(0, 0, 0, 0.14);
73
- --elevation-light-regular-offset-x-0: 0px;
74
- --elevation-light-regular-offset-x-1: 0px;
75
- --elevation-light-regular-offset-y-0: 0px;
76
- --elevation-light-regular-offset-y-1: 4px;
77
- --elevation-light-regular-blur-0: 2px;
78
- --elevation-light-regular-blur-1: 8px;
79
- --elevation-light-regular-spread-0: 0px;
80
- --elevation-light-regular-spread-1: 0px;
81
- --elevation-light-regular-color-0: rgba(0, 0, 0, 0.12);
82
- --elevation-light-regular-color-1: rgba(0, 0, 0, 0.14);
83
- --elevation-light-semibold: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.14);
84
- --elevation-light-semibold-offset-x-0: 0px;
85
- --elevation-light-semibold-offset-x-1: 0px;
86
- --elevation-light-semibold-offset-y-0: 0px;
87
- --elevation-light-semibold-offset-y-1: 8px;
88
- --elevation-light-semibold-blur-0: 2px;
89
- --elevation-light-semibold-blur-1: 16px;
90
- --elevation-light-semibold-spread-0: 0px;
91
- --elevation-light-semibold-spread-1: 0px;
92
- --elevation-light-semibold-color-0: rgba(0, 0, 0, 0.12);
93
- --elevation-light-semibold-color-1: rgba(0, 0, 0, 0.14);
94
- --elevation-light-bold: 0px 0px 8px 0px rgba(0, 0, 0, 0.12), 0px 14px 28px 0px rgba(0, 0, 0, 0.14);
95
- --elevation-light-bold-offset-x-0: 0px;
96
- --elevation-light-bold-offset-x-1: 0px;
97
- --elevation-light-bold-offset-y-0: 0px;
98
- --elevation-light-bold-offset-y-1: 14px;
99
- --elevation-light-bold-blur-0: 8px;
100
- --elevation-light-bold-blur-1: 28px;
101
- --elevation-light-bold-spread-0: 0px;
102
- --elevation-light-bold-spread-1: 0px;
103
- --elevation-light-bold-color-0: rgba(0, 0, 0, 0.12);
104
- --elevation-light-bold-color-1: rgba(0, 0, 0, 0.14);
105
- --elevation-light-extrabold: 0px 0px 8px 0px rgba(0, 0, 0, 0.12), 0px 32px 64px 0px rgba(0, 0, 0, 0.14);
106
- --elevation-light-extrabold-offset-x-0: 0px;
107
- --elevation-light-extrabold-offset-x-1: 0px;
108
- --elevation-light-extrabold-offset-y-0: 0px;
109
- --elevation-light-extrabold-offset-y-1: 32px;
110
- --elevation-light-extrabold-blur-0: 8px;
111
- --elevation-light-extrabold-blur-1: 64px;
112
- --elevation-light-extrabold-spread-0: 0px;
113
- --elevation-light-extrabold-spread-1: 0px;
114
- --elevation-light-extrabold-color-0: rgba(0, 0, 0, 0.12);
115
- --elevation-light-extrabold-color-1: rgba(0, 0, 0, 0.14);
116
- --elevation-dark-light: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 1px 2px 0px rgba(0, 0, 0, 0.28);
117
- --elevation-dark-light-offset-x-0: 0px;
118
- --elevation-dark-light-offset-x-1: 0px;
119
- --elevation-dark-light-offset-y-0: 0px;
120
- --elevation-dark-light-offset-y-1: 1px;
121
- --elevation-dark-light-blur-0: 2px;
122
- --elevation-dark-light-blur-1: 2px;
123
- --elevation-dark-light-spread-0: 0px;
124
- --elevation-dark-light-spread-1: 0px;
125
- --elevation-dark-light-color-0: rgba(0, 0, 0, 0.24);
126
- --elevation-dark-light-color-1: rgba(0, 0, 0, 0.28);
127
- --elevation-dark-semilight: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 2px 4px 0px rgba(0, 0, 0, 0.28);
128
- --elevation-dark-semilight-offset-x-0: 0px;
129
- --elevation-dark-semilight-offset-x-1: 0px;
130
- --elevation-dark-semilight-offset-y-0: 0px;
131
- --elevation-dark-semilight-offset-y-1: 2px;
132
- --elevation-dark-semilight-blur-0: 2px;
133
- --elevation-dark-semilight-blur-1: 4px;
134
- --elevation-dark-semilight-spread-0: 0px;
135
- --elevation-dark-semilight-spread-1: 0px;
136
- --elevation-dark-semilight-color-0: rgba(0, 0, 0, 0.24);
137
- --elevation-dark-semilight-color-1: rgba(0, 0, 0, 0.28);
138
- --elevation-dark-regular: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 4px 8px 0px rgba(0, 0, 0, 0.28);
139
- --elevation-dark-regular-offset-x-0: 0px;
140
- --elevation-dark-regular-offset-x-1: 0px;
141
- --elevation-dark-regular-offset-y-0: 0px;
142
- --elevation-dark-regular-offset-y-1: 4px;
143
- --elevation-dark-regular-blur-0: 2px;
144
- --elevation-dark-regular-blur-1: 8px;
145
- --elevation-dark-regular-spread-0: 0px;
146
- --elevation-dark-regular-spread-1: 0px;
147
- --elevation-dark-regular-color-0: rgba(0, 0, 0, 0.24);
148
- --elevation-dark-regular-color-1: rgba(0, 0, 0, 0.28);
149
- --elevation-dark-semibold: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 8px 16px 0px rgba(0, 0, 0, 0.28);
150
- --elevation-dark-semibold-offset-x-0: 0px;
151
- --elevation-dark-semibold-offset-x-1: 0px;
152
- --elevation-dark-semibold-offset-y-0: 0px;
153
- --elevation-dark-semibold-offset-y-1: 8px;
154
- --elevation-dark-semibold-blur-0: 2px;
155
- --elevation-dark-semibold-blur-1: 16px;
156
- --elevation-dark-semibold-spread-0: 0px;
157
- --elevation-dark-semibold-spread-1: 0px;
158
- --elevation-dark-semibold-color-0: rgba(0, 0, 0, 0.24);
159
- --elevation-dark-semibold-color-1: rgba(0, 0, 0, 0.28);
160
- --elevation-dark-bold: 0px 0px 8px 0px rgba(0, 0, 0, 0.24), 0px 14px 28px 0px rgba(0, 0, 0, 0.28);
161
- --elevation-dark-bold-offset-x-0: 0px;
162
- --elevation-dark-bold-offset-x-1: 0px;
163
- --elevation-dark-bold-offset-y-0: 0px;
164
- --elevation-dark-bold-offset-y-1: 14px;
165
- --elevation-dark-bold-blur-0: 8px;
166
- --elevation-dark-bold-blur-1: 28px;
167
- --elevation-dark-bold-spread-0: 0px;
168
- --elevation-dark-bold-spread-1: 0px;
169
- --elevation-dark-bold-color-0: rgba(0, 0, 0, 0.24);
170
- --elevation-dark-bold-color-1: rgba(0, 0, 0, 0.28);
171
- --elevation-dark-extrabold: 0px 0px 8px 0px rgba(0, 0, 0, 0.24), 0px 32px 64px 0px rgba(0, 0, 0, 0.28);
172
- --elevation-dark-extrabold-offset-x-0: 0px;
173
- --elevation-dark-extrabold-offset-x-1: 0px;
174
- --elevation-dark-extrabold-offset-y-0: 0px;
175
- --elevation-dark-extrabold-offset-y-1: 32px;
176
- --elevation-dark-extrabold-blur-0: 8px;
177
- --elevation-dark-extrabold-blur-1: 64px;
178
- --elevation-dark-extrabold-spread-0: 0px;
179
- --elevation-dark-extrabold-spread-1: 0px;
180
- --elevation-dark-extrabold-color-0: rgba(0, 0, 0, 0.24);
181
- --elevation-dark-extrabold-color-1: rgba(0, 0, 0, 0.28);
182
- --size-tiny: 2px;
183
- --size-small: 4px;
184
- --size-medium: 8px;
185
- --size-large: 16px;
186
- --size-giant: 32px;
187
- --size-key-tiny: "tiny";
188
- --size-key-small: "small";
189
- --size-key-medium: "medium";
190
- --size-key-large: "large";
191
- --size-key-giant: "giant";
192
- --typography-key-heading: "heading";
193
- --typography-key-content: "content";
194
- --typography-key-button: "button";
195
- --elevation-key-light: "light";
196
- --elevation-key-semilight: "semilight";
197
- --elevation-key-regular: "regular";
198
- --elevation-key-semibold: "semibold";
199
- --elevation-key-bold: "bold";
200
- --elevation-key-extrabold: "extrabold";
201
- --variant-primary: "primary";
202
- --variant-secondary: "secondary";
203
- --variant-tertiary: "tertiary";
204
- --duration-short: 200ms;
205
- --duration-medium: 400ms;
206
- --duration-long: 600ms;
207
- --typography-heading-font-family: var(--font-family);
208
- --typography-content-font-family: var(--font-family);
209
- --typography-button-font-family: var(--font-family);
210
- --size-key: var(--size-key-tiny) var(--size-key-small) var(--size-key-medium) var(--size-key-large) var(--size-key-giant);
211
- --elevation-key: var(--elevation-key-light) var(--elevation-key-semilight) var(--elevation-key-regular) var(--elevation-key-semibold) var(--elevation-key-bold) var(--elevation-key-extrabold);
212
- --variant: var(--variant-primary);
213
- }
package/Themes/___fluent-tokens.css DELETED
@@ -1,30 +0,0 @@
1
- :root {
2
- --name: "fluent";
3
- --font-family: 'Inter', Roboto, Helvetica, sans-serif;
4
- --layout-radius: 12px;
5
- --layout-space: 8px;
6
- --layout-thickness: 2px;
7
- --color-light-primary: #0078D4;
8
- --color-light-secondary: #005A9E;
9
- --color-light-tertiary: #003E6B;
10
- --elevation-none: none;
11
- --size-tiny: 2px;
12
- --size-small: 4px;
13
- --size-medium: 8px;
14
- --size-large: 16px;
15
- --size-giant: 32px;
16
- --size-key-tiny: "tiny";
17
- --size-key-small: "small";
18
- --size-key-medium: "medium";
19
- --size-key-large: "large";
20
- --size-key-giant: "giant";
21
- --duration-duration-ultra-fast: 50ms;
22
- --duration-duration-faster: 100ms;
23
- --duration-duration-fast: 150ms;
24
- --duration-duration-normal: 200ms;
25
- --duration-duration-gentle: 250ms;
26
- --duration-duration-slow: 300ms;
27
- --duration-duration-slower: 400ms;
28
- --duration-duration-ultra-slow: 500ms;
29
- --size-key: var(--size-key-tiny) var(--size-key-small) var(--size-key-medium) var(--size-key-large) var(--size-key-giant);
30
- }