@breadstone/mosaik-themes 0.0.12-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (143) hide show
  1. package/Index.d.ts +25 -0
  2. package/Index.d.ts.map +1 -0
  3. package/Index.js +16 -0
  4. package/Index.js.map +1 -0
  5. package/LICENSE +21 -0
  6. package/Themes/___bootstrap-tokens.css +80 -0
  7. package/Themes/___cosmopolitan-tokens.css +208 -0
  8. package/Themes/___default-tokens.css +8 -0
  9. package/Themes/___fluent-tokens.css +19 -0
  10. package/Themes/___joy-tokens.css +496 -0
  11. package/Themes/___material-tokens.css +11 -0
  12. package/Themes/___retro-tokens.css +386 -0
  13. package/Themes/bootstrap-tokens.scss +78 -0
  14. package/Themes/bootstrap.scss +167 -0
  15. package/Themes/cosmopolitan-tokens.scss +206 -0
  16. package/Themes/cosmopolitan.scss +6362 -0
  17. package/Themes/default-tokens.scss +6 -0
  18. package/Themes/default.scss +5589 -0
  19. package/Themes/fluent-tokens.scss +17 -0
  20. package/Themes/fluent.scss +1641 -0
  21. package/Themes/joy-tokens.scss +494 -0
  22. package/Themes/joy.scss +7093 -0
  23. package/Themes/material-tokens.scss +9 -0
  24. package/Themes/material.scss +98 -0
  25. package/Themes/retro-tokens.scss +384 -0
  26. package/Themes/retro.scss +6856 -0
  27. package/Theming/BootstrapTheme.d.ts +10 -0
  28. package/Theming/BootstrapTheme.d.ts.map +1 -0
  29. package/Theming/BootstrapTheme.js +135 -0
  30. package/Theming/BootstrapTheme.js.map +1 -0
  31. package/Theming/CosmopolitanTheme.d.ts +11 -0
  32. package/Theming/CosmopolitanTheme.d.ts.map +1 -0
  33. package/Theming/CosmopolitanTheme.js +124 -0
  34. package/Theming/CosmopolitanTheme.js.map +1 -0
  35. package/Theming/FluentTheme.d.ts +2 -0
  36. package/Theming/FluentTheme.d.ts.map +1 -0
  37. package/Theming/FluentTheme.js +9 -0
  38. package/Theming/FluentTheme.js.map +1 -0
  39. package/Theming/JoyTheme.d.ts +11 -0
  40. package/Theming/JoyTheme.d.ts.map +1 -0
  41. package/Theming/JoyTheme.js +434 -0
  42. package/Theming/JoyTheme.js.map +1 -0
  43. package/Theming/MaterialTheme.d.ts +2 -0
  44. package/Theming/MaterialTheme.d.ts.map +1 -0
  45. package/Theming/MaterialTheme.js +9 -0
  46. package/Theming/MaterialTheme.js.map +1 -0
  47. package/Theming/RetroTheme.d.ts +11 -0
  48. package/Theming/RetroTheme.d.ts.map +1 -0
  49. package/Theming/RetroTheme.js +380 -0
  50. package/Theming/RetroTheme.js.map +1 -0
  51. package/Theming/ThemeFactory.d.ts +38 -0
  52. package/Theming/ThemeFactory.d.ts.map +1 -0
  53. package/Theming/ThemeFactory.js +58 -0
  54. package/Theming/ThemeFactory.js.map +1 -0
  55. package/Theming/ThemeGenerator.d.ts +27 -0
  56. package/Theming/ThemeGenerator.d.ts.map +1 -0
  57. package/Theming/ThemeGenerator.js +179 -0
  58. package/Theming/ThemeGenerator.js.map +1 -0
  59. package/Theming/ThemeObserver.d.ts +56 -0
  60. package/Theming/ThemeObserver.d.ts.map +1 -0
  61. package/Theming/ThemeObserver.js +134 -0
  62. package/Theming/ThemeObserver.js.map +1 -0
  63. package/Theming/Tokens/BootstrapTokens.d.ts +82 -0
  64. package/Theming/Tokens/BootstrapTokens.d.ts.map +1 -0
  65. package/Theming/Tokens/BootstrapTokens.js +82 -0
  66. package/Theming/Tokens/BootstrapTokens.js.map +1 -0
  67. package/Theming/Tokens/CosmopolitanTokens.d.ts +210 -0
  68. package/Theming/Tokens/CosmopolitanTokens.d.ts.map +1 -0
  69. package/Theming/Tokens/CosmopolitanTokens.js +210 -0
  70. package/Theming/Tokens/CosmopolitanTokens.js.map +1 -0
  71. package/Theming/Tokens/DefaultTokens.d.ts +10 -0
  72. package/Theming/Tokens/DefaultTokens.d.ts.map +1 -0
  73. package/Theming/Tokens/DefaultTokens.js +10 -0
  74. package/Theming/Tokens/DefaultTokens.js.map +1 -0
  75. package/Theming/Tokens/FluentTokens.d.ts +21 -0
  76. package/Theming/Tokens/FluentTokens.d.ts.map +1 -0
  77. package/Theming/Tokens/FluentTokens.js +21 -0
  78. package/Theming/Tokens/FluentTokens.js.map +1 -0
  79. package/Theming/Tokens/JoyTokens.d.ts +498 -0
  80. package/Theming/Tokens/JoyTokens.d.ts.map +1 -0
  81. package/Theming/Tokens/JoyTokens.js +498 -0
  82. package/Theming/Tokens/JoyTokens.js.map +1 -0
  83. package/Theming/Tokens/MaterialTokens.d.ts +13 -0
  84. package/Theming/Tokens/MaterialTokens.d.ts.map +1 -0
  85. package/Theming/Tokens/MaterialTokens.js +13 -0
  86. package/Theming/Tokens/MaterialTokens.js.map +1 -0
  87. package/Theming/Tokens/RetroTokens.d.ts +388 -0
  88. package/Theming/Tokens/RetroTokens.d.ts.map +1 -0
  89. package/Theming/Tokens/RetroTokens.js +388 -0
  90. package/Theming/Tokens/RetroTokens.js.map +1 -0
  91. package/Theming/Utils/CssAspectRatio.d.ts +14 -0
  92. package/Theming/Utils/CssAspectRatio.d.ts.map +1 -0
  93. package/Theming/Utils/CssAspectRatio.js +31 -0
  94. package/Theming/Utils/CssAspectRatio.js.map +1 -0
  95. package/Theming/Utils/CssColor.d.ts +21 -0
  96. package/Theming/Utils/CssColor.d.ts.map +1 -0
  97. package/Theming/Utils/CssColor.js +16 -0
  98. package/Theming/Utils/CssColor.js.map +1 -0
  99. package/Theming/Utils/CssLength.d.ts +47 -0
  100. package/Theming/Utils/CssLength.d.ts.map +1 -0
  101. package/Theming/Utils/CssLength.js +116 -0
  102. package/Theming/Utils/CssLength.js.map +1 -0
  103. package/Theming/Utils/CssShadow.d.ts +27 -0
  104. package/Theming/Utils/CssShadow.d.ts.map +1 -0
  105. package/Theming/Utils/CssShadow.js +45 -0
  106. package/Theming/Utils/CssShadow.js.map +1 -0
  107. package/Theming/Utils/CssTime.d.ts +18 -0
  108. package/Theming/Utils/CssTime.d.ts.map +1 -0
  109. package/Theming/Utils/CssTime.js +24 -0
  110. package/Theming/Utils/CssTime.js.map +1 -0
  111. package/Theming/Utils/ITheme.d.ts +27 -0
  112. package/Theming/Utils/ITheme.d.ts.map +1 -0
  113. package/Theming/Utils/ITheme.js +34 -0
  114. package/Theming/Utils/ITheme.js.map +1 -0
  115. package/Theming/Utils/IThemeElevation.d.ts +10 -0
  116. package/Theming/Utils/IThemeElevation.d.ts.map +1 -0
  117. package/Theming/Utils/IThemeElevation.js +3 -0
  118. package/Theming/Utils/IThemeElevation.js.map +1 -0
  119. package/Theming/Utils/IThemeLayout.d.ts +12 -0
  120. package/Theming/Utils/IThemeLayout.d.ts.map +1 -0
  121. package/Theming/Utils/IThemeLayout.js +3 -0
  122. package/Theming/Utils/IThemeLayout.js.map +1 -0
  123. package/Theming/Utils/IThemeMetadata.d.ts +15 -0
  124. package/Theming/Utils/IThemeMetadata.d.ts.map +1 -0
  125. package/Theming/Utils/IThemeMetadata.js +3 -0
  126. package/Theming/Utils/IThemeMetadata.js.map +1 -0
  127. package/Theming/Utils/IThemePalette.d.ts +17 -0
  128. package/Theming/Utils/IThemePalette.d.ts.map +1 -0
  129. package/Theming/Utils/IThemePalette.js +15 -0
  130. package/Theming/Utils/IThemePalette.js.map +1 -0
  131. package/Theming/Utils/IThemeScheme.d.ts +10 -0
  132. package/Theming/Utils/IThemeScheme.d.ts.map +1 -0
  133. package/Theming/Utils/IThemeScheme.js +3 -0
  134. package/Theming/Utils/IThemeScheme.js.map +1 -0
  135. package/Theming/Utils/IThemeTypography.d.ts +10 -0
  136. package/Theming/Utils/IThemeTypography.d.ts.map +1 -0
  137. package/Theming/Utils/IThemeTypography.js +3 -0
  138. package/Theming/Utils/IThemeTypography.js.map +1 -0
  139. package/Theming/Utils/IThemeTypographyFontType.d.ts +16 -0
  140. package/Theming/Utils/IThemeTypographyFontType.d.ts.map +1 -0
  141. package/Theming/Utils/IThemeTypographyFontType.js +3 -0
  142. package/Theming/Utils/IThemeTypographyFontType.js.map +1 -0
  143. package/package.json +29 -0
package/Themes/cosmopolitan-tokens.scss ADDED
@@ -0,0 +1,206 @@
1
+ $name: "cosmopolitan";
2
+ $font-family: 'Noto Sans', sans-serif;
3
+ $layout-radius: 3px;
4
+ $layout-space: 8px;
5
+ $layout-thickness: 1px;
6
+ $scheme-light-contrast: #ffffff;
7
+ $scheme-light-background: #ffffff;
8
+ $scheme-light-foreground: #000000;
9
+ $scheme-light-highlight: #E2E2E2;
10
+ $scheme-light-middlelight: #777777;
11
+ $scheme-light-lowlight: #4D4D4D;
12
+ $scheme-light-transparent: #FFFFFF00;
13
+ $scheme-light-semi-transparent: #FFFFFFAA;
14
+ $scheme-light-disabled: #B8B5B2;
15
+ $scheme-dark-contrast: #ffffff;
16
+ $scheme-dark-background: #2E2D2D;
17
+ $scheme-dark-foreground: #ffffff;
18
+ $scheme-dark-highlight: #333333;
19
+ $scheme-dark-middlelight: #666666;
20
+ $scheme-dark-lowlight: #999999;
21
+ $scheme-dark-transparent: #17171700;
22
+ $scheme-dark-semi-transparent: #171717aa;
23
+ $scheme-dark-disabled: #5C5956;
24
+ $color-light-primary-0: #ffffff;
25
+ $color-light-primary-100: #fed7ea;
26
+ $color-light-primary-500: #dc1884;
27
+ $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;
42
+ $typography-button-font-size: 16px;
43
+ $typography-button-line-height: 20px;
44
+ $typography-button-font-weight: 700;
45
+ $typography-button-letter-spacing: -0.25px;
46
+ $typography-button-text-decoration: none;
47
+ $typography-button-text-transform: uppercase;
48
+ $elevation-none: none;
49
+ $elevation-light-light: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.14);
50
+ $elevation-light-light-offset-x-0: 0px;
51
+ $elevation-light-light-offset-x-1: 0px;
52
+ $elevation-light-light-offset-y-0: 0px;
53
+ $elevation-light-light-offset-y-1: 1px;
54
+ $elevation-light-light-blur-0: 2px;
55
+ $elevation-light-light-blur-1: 2px;
56
+ $elevation-light-light-spread-0: 0px;
57
+ $elevation-light-light-spread-1: 0px;
58
+ $elevation-light-light-color-0: rgba(0, 0, 0, 0.12);
59
+ $elevation-light-light-color-1: rgba(0, 0, 0, 0.14);
60
+ $elevation-light-semilight: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.14);
61
+ $elevation-light-semilight-offset-x-0: 0px;
62
+ $elevation-light-semilight-offset-x-1: 0px;
63
+ $elevation-light-semilight-offset-y-0: 0px;
64
+ $elevation-light-semilight-offset-y-1: 2px;
65
+ $elevation-light-semilight-blur-0: 2px;
66
+ $elevation-light-semilight-blur-1: 4px;
67
+ $elevation-light-semilight-spread-0: 0px;
68
+ $elevation-light-semilight-spread-1: 0px;
69
+ $elevation-light-semilight-color-0: rgba(0, 0, 0, 0.12);
70
+ $elevation-light-semilight-color-1: rgba(0, 0, 0, 0.14);
71
+ $elevation-light-regular: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 4px 8px 0px rgba(0, 0, 0, 0.14);
72
+ $elevation-light-regular-offset-x-0: 0px;
73
+ $elevation-light-regular-offset-x-1: 0px;
74
+ $elevation-light-regular-offset-y-0: 0px;
75
+ $elevation-light-regular-offset-y-1: 4px;
76
+ $elevation-light-regular-blur-0: 2px;
77
+ $elevation-light-regular-blur-1: 8px;
78
+ $elevation-light-regular-spread-0: 0px;
79
+ $elevation-light-regular-spread-1: 0px;
80
+ $elevation-light-regular-color-0: rgba(0, 0, 0, 0.12);
81
+ $elevation-light-regular-color-1: rgba(0, 0, 0, 0.14);
82
+ $elevation-light-semibold: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.14);
83
+ $elevation-light-semibold-offset-x-0: 0px;
84
+ $elevation-light-semibold-offset-x-1: 0px;
85
+ $elevation-light-semibold-offset-y-0: 0px;
86
+ $elevation-light-semibold-offset-y-1: 8px;
87
+ $elevation-light-semibold-blur-0: 2px;
88
+ $elevation-light-semibold-blur-1: 16px;
89
+ $elevation-light-semibold-spread-0: 0px;
90
+ $elevation-light-semibold-spread-1: 0px;
91
+ $elevation-light-semibold-color-0: rgba(0, 0, 0, 0.12);
92
+ $elevation-light-semibold-color-1: rgba(0, 0, 0, 0.14);
93
+ $elevation-light-bold: 0px 0px 8px 0px rgba(0, 0, 0, 0.12), 0px 14px 28px 0px rgba(0, 0, 0, 0.14);
94
+ $elevation-light-bold-offset-x-0: 0px;
95
+ $elevation-light-bold-offset-x-1: 0px;
96
+ $elevation-light-bold-offset-y-0: 0px;
97
+ $elevation-light-bold-offset-y-1: 14px;
98
+ $elevation-light-bold-blur-0: 8px;
99
+ $elevation-light-bold-blur-1: 28px;
100
+ $elevation-light-bold-spread-0: 0px;
101
+ $elevation-light-bold-spread-1: 0px;
102
+ $elevation-light-bold-color-0: rgba(0, 0, 0, 0.12);
103
+ $elevation-light-bold-color-1: rgba(0, 0, 0, 0.14);
104
+ $elevation-light-extrabold: 0px 0px 8px 0px rgba(0, 0, 0, 0.12), 0px 32px 64px 0px rgba(0, 0, 0, 0.14);
105
+ $elevation-light-extrabold-offset-x-0: 0px;
106
+ $elevation-light-extrabold-offset-x-1: 0px;
107
+ $elevation-light-extrabold-offset-y-0: 0px;
108
+ $elevation-light-extrabold-offset-y-1: 32px;
109
+ $elevation-light-extrabold-blur-0: 8px;
110
+ $elevation-light-extrabold-blur-1: 64px;
111
+ $elevation-light-extrabold-spread-0: 0px;
112
+ $elevation-light-extrabold-spread-1: 0px;
113
+ $elevation-light-extrabold-color-0: rgba(0, 0, 0, 0.12);
114
+ $elevation-light-extrabold-color-1: rgba(0, 0, 0, 0.14);
115
+ $elevation-dark-light: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 1px 2px 0px rgba(0, 0, 0, 0.28);
116
+ $elevation-dark-light-offset-x-0: 0px;
117
+ $elevation-dark-light-offset-x-1: 0px;
118
+ $elevation-dark-light-offset-y-0: 0px;
119
+ $elevation-dark-light-offset-y-1: 1px;
120
+ $elevation-dark-light-blur-0: 2px;
121
+ $elevation-dark-light-blur-1: 2px;
122
+ $elevation-dark-light-spread-0: 0px;
123
+ $elevation-dark-light-spread-1: 0px;
124
+ $elevation-dark-light-color-0: rgba(0, 0, 0, 0.24);
125
+ $elevation-dark-light-color-1: rgba(0, 0, 0, 0.28);
126
+ $elevation-dark-semilight: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 2px 4px 0px rgba(0, 0, 0, 0.28);
127
+ $elevation-dark-semilight-offset-x-0: 0px;
128
+ $elevation-dark-semilight-offset-x-1: 0px;
129
+ $elevation-dark-semilight-offset-y-0: 0px;
130
+ $elevation-dark-semilight-offset-y-1: 2px;
131
+ $elevation-dark-semilight-blur-0: 2px;
132
+ $elevation-dark-semilight-blur-1: 4px;
133
+ $elevation-dark-semilight-spread-0: 0px;
134
+ $elevation-dark-semilight-spread-1: 0px;
135
+ $elevation-dark-semilight-color-0: rgba(0, 0, 0, 0.24);
136
+ $elevation-dark-semilight-color-1: rgba(0, 0, 0, 0.28);
137
+ $elevation-dark-regular: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 4px 8px 0px rgba(0, 0, 0, 0.28);
138
+ $elevation-dark-regular-offset-x-0: 0px;
139
+ $elevation-dark-regular-offset-x-1: 0px;
140
+ $elevation-dark-regular-offset-y-0: 0px;
141
+ $elevation-dark-regular-offset-y-1: 4px;
142
+ $elevation-dark-regular-blur-0: 2px;
143
+ $elevation-dark-regular-blur-1: 8px;
144
+ $elevation-dark-regular-spread-0: 0px;
145
+ $elevation-dark-regular-spread-1: 0px;
146
+ $elevation-dark-regular-color-0: rgba(0, 0, 0, 0.24);
147
+ $elevation-dark-regular-color-1: rgba(0, 0, 0, 0.28);
148
+ $elevation-dark-semibold: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 8px 16px 0px rgba(0, 0, 0, 0.28);
149
+ $elevation-dark-semibold-offset-x-0: 0px;
150
+ $elevation-dark-semibold-offset-x-1: 0px;
151
+ $elevation-dark-semibold-offset-y-0: 0px;
152
+ $elevation-dark-semibold-offset-y-1: 8px;
153
+ $elevation-dark-semibold-blur-0: 2px;
154
+ $elevation-dark-semibold-blur-1: 16px;
155
+ $elevation-dark-semibold-spread-0: 0px;
156
+ $elevation-dark-semibold-spread-1: 0px;
157
+ $elevation-dark-semibold-color-0: rgba(0, 0, 0, 0.24);
158
+ $elevation-dark-semibold-color-1: rgba(0, 0, 0, 0.28);
159
+ $elevation-dark-bold: 0px 0px 8px 0px rgba(0, 0, 0, 0.24), 0px 14px 28px 0px rgba(0, 0, 0, 0.28);
160
+ $elevation-dark-bold-offset-x-0: 0px;
161
+ $elevation-dark-bold-offset-x-1: 0px;
162
+ $elevation-dark-bold-offset-y-0: 0px;
163
+ $elevation-dark-bold-offset-y-1: 14px;
164
+ $elevation-dark-bold-blur-0: 8px;
165
+ $elevation-dark-bold-blur-1: 28px;
166
+ $elevation-dark-bold-spread-0: 0px;
167
+ $elevation-dark-bold-spread-1: 0px;
168
+ $elevation-dark-bold-color-0: rgba(0, 0, 0, 0.24);
169
+ $elevation-dark-bold-color-1: rgba(0, 0, 0, 0.28);
170
+ $elevation-dark-extrabold: 0px 0px 8px 0px rgba(0, 0, 0, 0.24), 0px 32px 64px 0px rgba(0, 0, 0, 0.28);
171
+ $elevation-dark-extrabold-offset-x-0: 0px;
172
+ $elevation-dark-extrabold-offset-x-1: 0px;
173
+ $elevation-dark-extrabold-offset-y-0: 0px;
174
+ $elevation-dark-extrabold-offset-y-1: 32px;
175
+ $elevation-dark-extrabold-blur-0: 8px;
176
+ $elevation-dark-extrabold-blur-1: 64px;
177
+ $elevation-dark-extrabold-spread-0: 0px;
178
+ $elevation-dark-extrabold-spread-1: 0px;
179
+ $elevation-dark-extrabold-color-0: rgba(0, 0, 0, 0.24);
180
+ $elevation-dark-extrabold-color-1: rgba(0, 0, 0, 0.28);
181
+ $typography-key-heading: "heading";
182
+ $typography-key-content: "content";
183
+ $typography-key-button: "button";
184
+ $elevation-key-light: "light";
185
+ $elevation-key-semilight: "semilight";
186
+ $elevation-key-regular: "regular";
187
+ $elevation-key-semibold: "semibold";
188
+ $elevation-key-bold: "bold";
189
+ $elevation-key-extrabold: "extrabold";
190
+ $variant-primary: "primary";
191
+ $variant-secondary: "secondary";
192
+ $variant-tertiary: "tertiary";
193
+ $size-tiny: "tiny";
194
+ $size-small: "small";
195
+ $size-medium: "medium";
196
+ $size-large: "large";
197
+ $size-giant: "giant";
198
+ $duration-short: 200ms;
199
+ $duration-medium: 400ms;
200
+ $duration-long: 600ms;
201
+ $typography-heading-font-family: $font-family;
202
+ $typography-content-font-family: $font-family;
203
+ $typography-button-font-family: $font-family;
204
+ $elevation-key: $elevation-key-light $elevation-key-semilight $elevation-key-regular $elevation-key-semibold $elevation-key-bold $elevation-key-extrabold;
205
+ $variant: $variant-primary;
206
+ $size: $size-tiny $size-small $size-medium $size-large $size-giant;