@breadstone/mosaik-themes 0.0.176 → 0.0.178

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 (43) hide show
  1. package/Index.d.ts +1 -1
  2. package/Index.d.ts.map +1 -1
  3. package/Themes/___cosmopolitan-tokens.css +9 -9
  4. package/Themes/cosmopolitan-tokens.scss +9 -9
  5. package/Themes/cosmopolitan.scss +9 -9
  6. package/Theming/Strategies/CosmopolitanThemeGeneratorStrategy.d.ts +1 -1
  7. package/Theming/Strategies/CosmopolitanThemeGeneratorStrategy.d.ts.map +1 -1
  8. package/Theming/Strategies/JoyThemeGeneratorStrategy.d.ts +1 -1
  9. package/Theming/Strategies/JoyThemeGeneratorStrategy.d.ts.map +1 -1
  10. package/Theming/Strategies/MaterialThemeGeneratorStrategy.d.ts +1 -1
  11. package/Theming/Strategies/MaterialThemeGeneratorStrategy.d.ts.map +1 -1
  12. package/Theming/Strategies/MemphisThemeGeneratorStrategy.d.ts +1 -1
  13. package/Theming/Strategies/MemphisThemeGeneratorStrategy.d.ts.map +1 -1
  14. package/Theming/Strategies/TailwindThemeGeneratorStrategy.d.ts +48 -0
  15. package/Theming/Strategies/TailwindThemeGeneratorStrategy.d.ts.map +1 -0
  16. package/Theming/Strategies/TailwindThemeGeneratorStrategy.js +69 -0
  17. package/Theming/Strategies/TailwindThemeGeneratorStrategy.js.map +1 -0
  18. package/Theming/Strategies/index.d.ts +2 -1
  19. package/Theming/Strategies/index.d.ts.map +1 -1
  20. package/Theming/Strategies/index.js +1 -0
  21. package/Theming/Strategies/index.js.map +1 -1
  22. package/Theming/Strategies/interfaces/IThemeGeneratorStrategy.d.ts +27 -0
  23. package/Theming/Strategies/interfaces/IThemeGeneratorStrategy.d.ts.map +1 -0
  24. package/Theming/Strategies/interfaces/IThemeGeneratorStrategy.js +3 -0
  25. package/Theming/Strategies/interfaces/IThemeGeneratorStrategy.js.map +1 -0
  26. package/Theming/Tokens/CosmopolitanTokens.d.ts +9 -9
  27. package/Theming/Tokens/CosmopolitanTokens.d.ts.map +1 -1
  28. package/Theming/Tokens/CosmopolitanTokens.js +9 -9
  29. package/Theming/Tokens/CosmopolitanTokens.js.map +1 -1
  30. package/package.json +20 -20
  31. package/tailwind/v3/plugins/mosaik-bootstrap.tailwind.plugin.cjs +21 -31
  32. package/tailwind/v3/plugins/mosaik-cosmopolitan.tailwind.plugin.cjs +93 -34
  33. package/tailwind/v3/plugins/mosaik-fluent.tailwind.plugin.cjs +29 -27
  34. package/tailwind/v3/plugins/mosaik-joy.tailwind.plugin.cjs +115 -81
  35. package/tailwind/v3/plugins/mosaik-material.tailwind.plugin.cjs +29 -27
  36. package/tailwind/v3/plugins/mosaik-memphis.tailwind.plugin.cjs +87 -56
  37. package/tailwind/v3/{mosaik-bootstrap.tailwind.config.cjs → presets/mosaik-bootstrap.tailwind.presets.cjs} +10 -16
  38. package/tailwind/v3/presets/mosaik-cosmopolitan.tailwind.presets.cjs +130 -0
  39. package/tailwind/v3/{mosaik-fluent.tailwind.config.cjs → presets/mosaik-fluent.tailwind.presets.cjs} +18 -12
  40. package/tailwind/v3/{mosaik-joy.tailwind.config.cjs → presets/mosaik-joy.tailwind.presets.cjs} +104 -66
  41. package/tailwind/v3/{mosaik-material.tailwind.config.cjs → presets/mosaik-material.tailwind.presets.cjs} +18 -12
  42. package/tailwind/v3/{mosaik-memphis.tailwind.config.cjs → presets/mosaik-memphis.tailwind.presets.cjs} +76 -41
  43. package/tailwind/v3/mosaik-cosmopolitan.tailwind.config.cjs +0 -67
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@breadstone/mosaik-themes",
3
- "version": "0.0.176",
3
+ "version": "0.0.178",
4
4
  "description": "Mosaik elements various themes.",
5
5
  "license": "MIT",
6
6
  "author": "andre.wehlert <awehlert@breadstone.de> (https://www.breadstone.de)",
@@ -15,7 +15,7 @@
15
15
  "url": "git+ssh://git@github.com/RueDeRennes/mosaik.git"
16
16
  },
17
17
  "dependencies": {
18
- "@breadstone/mosaik-elements": "^0.0.176",
18
+ "@breadstone/mosaik-elements": "^0.0.178",
19
19
  "chroma-js": "^3.2.0",
20
20
  "tslib": "^2.8.1"
21
21
  },
@@ -25,49 +25,49 @@
25
25
  "types": "./Index.d.ts"
26
26
  },
27
27
  "./scss": "./_index.scss",
28
- "./tailwind/v3/bootstrap": {
29
- "import": "./tailwind/v3/mosaik-bootstrap.tailwind.config.cjs",
30
- "require": "./tailwind/v3/mosaik-bootstrap.tailwind.config.cjs"
28
+ "./tailwind/v3/presets/bootstrap": {
29
+ "import": "./tailwind/v3/presets/mosaik-bootstrap.tailwind.presets.cjs",
30
+ "require": "./tailwind/v3/presets/mosaik-bootstrap.tailwind.presets.cjs"
31
31
  },
32
32
  "./tailwind/v3/plugins/bootstrap": {
33
33
  "import": "./tailwind/v3/plugins/mosaik-bootstrap.tailwind.plugin.cjs",
34
34
  "require": "./tailwind/v3/plugins/mosaik-bootstrap.tailwind.plugin.cjs"
35
35
  },
36
- "./tailwind/v3/cosmopolitan": {
37
- "import": "./tailwind/v3/mosaik-cosmopolitan.tailwind.config.cjs",
38
- "require": "./tailwind/v3/mosaik-cosmopolitan.tailwind.config.cjs"
36
+ "./tailwind/v3/presets/cosmopolitan": {
37
+ "import": "./tailwind/v3/presets/mosaik-cosmopolitan.tailwind.presets.cjs",
38
+ "require": "./tailwind/v3/presets/mosaik-cosmopolitan.tailwind.presets.cjs"
39
39
  },
40
40
  "./tailwind/v3/plugins/cosmopolitan": {
41
41
  "import": "./tailwind/v3/plugins/mosaik-cosmopolitan.tailwind.plugin.cjs",
42
42
  "require": "./tailwind/v3/plugins/mosaik-cosmopolitan.tailwind.plugin.cjs"
43
43
  },
44
- "./tailwind/v3/fluent": {
45
- "import": "./tailwind/v3/mosaik-fluent.tailwind.config.cjs",
46
- "require": "./tailwind/v3/mosaik-fluent.tailwind.config.cjs"
44
+ "./tailwind/v3/presets/fluent": {
45
+ "import": "./tailwind/v3/presets/mosaik-fluent.tailwind.presets.cjs",
46
+ "require": "./tailwind/v3/presets/mosaik-fluent.tailwind.presets.cjs"
47
47
  },
48
48
  "./tailwind/v3/plugins/fluent": {
49
49
  "import": "./tailwind/v3/plugins/mosaik-fluent.tailwind.plugin.cjs",
50
50
  "require": "./tailwind/v3/plugins/mosaik-fluent.tailwind.plugin.cjs"
51
51
  },
52
- "./tailwind/v3/joy": {
53
- "import": "./tailwind/v3/mosaik-joy.tailwind.config.cjs",
54
- "require": "./tailwind/v3/mosaik-joy.tailwind.config.cjs"
52
+ "./tailwind/v3/presets/joy": {
53
+ "import": "./tailwind/v3/presets/mosaik-joy.tailwind.presets.cjs",
54
+ "require": "./tailwind/v3/presets/mosaik-joy.tailwind.presets.cjs"
55
55
  },
56
56
  "./tailwind/v3/plugins/joy": {
57
57
  "import": "./tailwind/v3/plugins/mosaik-joy.tailwind.plugin.cjs",
58
58
  "require": "./tailwind/v3/plugins/mosaik-joy.tailwind.plugin.cjs"
59
59
  },
60
- "./tailwind/v3/material": {
61
- "import": "./tailwind/v3/mosaik-material.tailwind.config.cjs",
62
- "require": "./tailwind/v3/mosaik-material.tailwind.config.cjs"
60
+ "./tailwind/v3/presets/material": {
61
+ "import": "./tailwind/v3/presets/mosaik-material.tailwind.presets.cjs",
62
+ "require": "./tailwind/v3/presets/mosaik-material.tailwind.presets.cjs"
63
63
  },
64
64
  "./tailwind/v3/plugins/material": {
65
65
  "import": "./tailwind/v3/plugins/mosaik-material.tailwind.plugin.cjs",
66
66
  "require": "./tailwind/v3/plugins/mosaik-material.tailwind.plugin.cjs"
67
67
  },
68
- "./tailwind/v3/memphis": {
69
- "import": "./tailwind/v3/mosaik-memphis.tailwind.config.cjs",
70
- "require": "./tailwind/v3/mosaik-memphis.tailwind.config.cjs"
68
+ "./tailwind/v3/presets/memphis": {
69
+ "import": "./tailwind/v3/presets/mosaik-memphis.tailwind.presets.cjs",
70
+ "require": "./tailwind/v3/presets/mosaik-memphis.tailwind.presets.cjs"
71
71
  },
72
72
  "./tailwind/v3/plugins/memphis": {
73
73
  "import": "./tailwind/v3/plugins/mosaik-memphis.tailwind.plugin.cjs",
package/tailwind/v3/plugins/mosaik-bootstrap.tailwind.plugin.cjs CHANGED
@@ -8,21 +8,28 @@
8
8
 
9
9
  const plugin = require('tailwindcss/plugin');
10
10
 
11
- module.exports = {
12
- theme: {
11
+ module.exports = plugin(function({ addUtilities, theme, e }) {
12
+ // Optional: Add custom utilities here
13
+ // Example: Custom shadow utilities
14
+ // const shadows = theme('boxShadow') || {};
15
+ // const shadowUtils = Object.entries(shadows).reduce((acc, [key, value]) => {
16
+ // acc['.' + e('shadow-' + key)] = { boxShadow: value };
17
+ // return acc;
18
+ // }, {});
19
+ // addUtilities(shadowUtils);
20
+ }, {
13
21
  "extend": {
14
22
  "fontFamily": {
15
23
  "DEFAULT": "'Inter', Roboto, Helvetica, sans-serif"
16
24
  },
25
+ "borderRadius": {
26
+ "DEFAULT": "12px"
27
+ },
17
28
  "spacing": {
18
- "layout-radius": "12px",
19
- "layout-space": "8px",
20
- "layout-thickness": "2px",
21
- "size-tiny": "2px",
22
- "size-small": "4px",
23
- "size-medium": "8px",
24
- "size-large": "16px",
25
- "size-giant": "32px"
29
+ "DEFAULT": "8px"
30
+ },
31
+ "borderWidth": {
32
+ "DEFAULT": "2px"
26
33
  },
27
34
  "colors": {
28
35
  "primary": {
@@ -70,14 +77,6 @@ module.exports = {
70
77
  "900": "#212529"
71
78
  }
72
79
  },
73
- "fontSize": {
74
- "headline1": "80px",
75
- "headline2": "72px",
76
- "headline3": "64px",
77
- "headline4": "56px",
78
- "headline5": "48px",
79
- "headline6": "40px"
80
- },
81
80
  "lineHeight": {
82
81
  "headline1": "1.2",
83
82
  "headline2": "1.2",
@@ -101,18 +100,9 @@ module.exports = {
101
100
  "headline4": "0",
102
101
  "headline5": "0",
103
102
  "headline6": "0"
103
+ },
104
+ "boxShadow": {
105
+ "DEFAULT": "none"
104
106
  }
105
107
  }
106
- },
107
- plugins: [
108
- plugin(function({ addUtilities, theme, e }) {
109
- const shadows = theme('boxShadow') || {};
110
- const utils = Object.entries(shadows).reduce((acc, [key, value]) => {
111
- acc['.' + e('shadow-' + key)] = { boxShadow: value };
112
- return acc;
113
- }, {});
114
- addUtilities(utils, ['responsive', 'hover', 'focus']);
115
- // You can extend with more utilities here (spacing, radii, etc.)
116
- })
117
- ]
118
- };
108
+ });
package/tailwind/v3/plugins/mosaik-cosmopolitan.tailwind.plugin.cjs CHANGED
@@ -8,8 +8,16 @@
8
8
 
9
9
  const plugin = require('tailwindcss/plugin');
10
10
 
11
- module.exports = {
12
- theme: {
11
+ module.exports = plugin(function({ addUtilities, theme, e }) {
12
+ // Optional: Add custom utilities here
13
+ // Example: Custom shadow utilities
14
+ // const shadows = theme('boxShadow') || {};
15
+ // const shadowUtils = Object.entries(shadows).reduce((acc, [key, value]) => {
16
+ // acc['.' + e('shadow-' + key)] = { boxShadow: value };
17
+ // return acc;
18
+ // }, {});
19
+ // addUtilities(shadowUtils);
20
+ }, {
13
21
  "extend": {
14
22
  "fontFamily": {
15
23
  "sans": "'Noto Sans', sans-serif",
@@ -17,33 +25,81 @@ module.exports = {
17
25
  "content": "'Noto Sans', sans-serif",
18
26
  "button": "'Noto Sans', sans-serif"
19
27
  },
28
+ "borderRadius": {
29
+ "DEFAULT": "3px"
30
+ },
20
31
  "spacing": {
21
- "radius": "3px",
22
- "space": "8px",
23
- "thickness": "1px",
24
- "size-tiny": "2px",
25
- "size-small": "4px",
26
- "size-medium": "8px",
27
- "size-large": "16px",
28
- "size-giant": "32px"
32
+ "DEFAULT": "8px"
33
+ },
34
+ "borderWidth": {
35
+ "DEFAULT": "1px"
29
36
  },
30
37
  "colors": {
38
+ "scheme-contrast": {
39
+ "DEFAULT": "oklch(100.00% 0.0000 NaN)"
40
+ },
41
+ "scheme-background": {
42
+ "DEFAULT": "oklch(100.00% 0.0000 NaN)"
43
+ },
44
+ "scheme-foreground": {
45
+ "DEFAULT": "oklch(0.00% 0.0000 NaN)"
46
+ },
47
+ "scheme-highlight": {
48
+ "DEFAULT": "oklch(91.28% 0.0000 NaN)"
49
+ },
50
+ "scheme-middlelight": {
51
+ "DEFAULT": "oklch(56.93% 0.0000 NaN)"
52
+ },
53
+ "scheme-lowlight": {
54
+ "DEFAULT": "oklch(42.02% 0.0000 NaN)"
55
+ },
56
+ "scheme-transparent": {
57
+ "DEFAULT": "oklch(100.00% 0.0000 NaN / 0.00)"
58
+ },
59
+ "scheme-semiTransparent": {
60
+ "DEFAULT": "oklch(100.00% 0.0000 NaN / 0.67)"
61
+ },
62
+ "scheme-disabled": {
63
+ "DEFAULT": "oklch(77.47% 0.0055 67.77)"
64
+ },
65
+ "scheme-contrast-dark": {
66
+ "DEFAULT": "oklch(100.00% 0.0000 NaN)"
67
+ },
68
+ "scheme-background-dark": {
69
+ "DEFAULT": "oklch(29.82% 0.0014 17.61)"
70
+ },
71
+ "scheme-foreground-dark": {
72
+ "DEFAULT": "oklch(100.00% 0.0000 NaN)"
73
+ },
74
+ "scheme-highlight-dark": {
75
+ "DEFAULT": "oklch(32.11% 0.0000 NaN)"
76
+ },
77
+ "scheme-middlelight-dark": {
78
+ "DEFAULT": "oklch(51.03% 0.0000 NaN)"
79
+ },
80
+ "scheme-lowlight-dark": {
81
+ "DEFAULT": "oklch(68.30% 0.0000 NaN)"
82
+ },
83
+ "scheme-transparent-dark": {
84
+ "DEFAULT": "oklch(20.46% 0.0000 NaN / 0.00)"
85
+ },
86
+ "scheme-semiTransparent-dark": {
87
+ "DEFAULT": "oklch(20.46% 0.0000 NaN / 0.67)"
88
+ },
89
+ "scheme-disabled-dark": {
90
+ "DEFAULT": "oklch(46.58% 0.0062 67.68)"
91
+ },
31
92
  "primary": {
32
- "0": "#ffffff",
33
- "100": "#fed7ea",
34
- "500": "#dc1884"
93
+ "0": "oklch(100.00% 0.0000 NaN)",
94
+ "100": "oklch(91.74% 0.0497 347.24)",
95
+ "500": "oklch(59.06% 0.2325 355.11)"
35
96
  },
36
97
  "primary-dark": {
37
- "0": "#000000",
38
- "100": "#4b0225",
39
- "500": "#dc1884"
98
+ "0": "oklch(0.00% 0.0000 NaN)",
99
+ "100": "oklch(26.98% 0.1065 359.19)",
100
+ "500": "oklch(59.06% 0.2325 355.11)"
40
101
  }
41
102
  },
42
- "fontSize": {
43
- "heading": "24px",
44
- "content": "16px",
45
- "button": "16px"
46
- },
47
103
  "lineHeight": {
48
104
  "heading": "28px",
49
105
  "content": "20px",
@@ -59,22 +115,25 @@ module.exports = {
59
115
  "content": "-0.25px",
60
116
  "button": "-0.25px"
61
117
  },
118
+ "boxShadow": {
119
+ "elevation-none": "none",
120
+ "light": "0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.14)",
121
+ "semilight": "0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.14)",
122
+ "regular": "0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 4px 8px 0px rgba(0, 0, 0, 0.14)",
123
+ "semibold": "0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.14)",
124
+ "bold": "0px 0px 8px 0px rgba(0, 0, 0, 0.12), 0px 14px 28px 0px rgba(0, 0, 0, 0.14)",
125
+ "extrabold": "0px 0px 8px 0px rgba(0, 0, 0, 0.12), 0px 32px 64px 0px rgba(0, 0, 0, 0.14)",
126
+ "light-dark": "0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 1px 2px 0px rgba(0, 0, 0, 0.28)",
127
+ "semilight-dark": "0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 2px 4px 0px rgba(0, 0, 0, 0.28)",
128
+ "regular-dark": "0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 4px 8px 0px rgba(0, 0, 0, 0.28)",
129
+ "semibold-dark": "0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 8px 16px 0px rgba(0, 0, 0, 0.28)",
130
+ "bold-dark": "0px 0px 8px 0px rgba(0, 0, 0, 0.24), 0px 14px 28px 0px rgba(0, 0, 0, 0.28)",
131
+ "extrabold-dark": "0px 0px 8px 0px rgba(0, 0, 0, 0.24), 0px 32px 64px 0px rgba(0, 0, 0, 0.28)"
132
+ },
62
133
  "transitionDuration": {
63
134
  "short": "200ms",
64
135
  "medium": "400ms",
65
136
  "long": "600ms"
66
137
  }
67
138
  }
68
- },
69
- plugins: [
70
- plugin(function({ addUtilities, theme, e }) {
71
- const shadows = theme('boxShadow') || {};
72
- const utils = Object.entries(shadows).reduce((acc, [key, value]) => {
73
- acc['.' + e('shadow-' + key)] = { boxShadow: value };
74
- return acc;
75
- }, {});
76
- addUtilities(utils, ['responsive', 'hover', 'focus']);
77
- // You can extend with more utilities here (spacing, radii, etc.)
78
- })
79
- ]
80
- };
139
+ });
package/tailwind/v3/plugins/mosaik-fluent.tailwind.plugin.cjs CHANGED
@@ -8,29 +8,43 @@
8
8
 
9
9
  const plugin = require('tailwindcss/plugin');
10
10
 
11
- module.exports = {
12
- theme: {
11
+ module.exports = plugin(function({ addUtilities, theme, e }) {
12
+ // Optional: Add custom utilities here
13
+ // Example: Custom shadow utilities
14
+ // const shadows = theme('boxShadow') || {};
15
+ // const shadowUtils = Object.entries(shadows).reduce((acc, [key, value]) => {
16
+ // acc['.' + e('shadow-' + key)] = { boxShadow: value };
17
+ // return acc;
18
+ // }, {});
19
+ // addUtilities(shadowUtils);
20
+ }, {
13
21
  "extend": {
14
22
  "fontFamily": {
15
23
  "DEFAULT": "'Inter', Roboto, Helvetica, sans-serif"
16
24
  },
25
+ "borderRadius": {
26
+ "DEFAULT": "12px"
27
+ },
17
28
  "spacing": {
18
- "layout-radius": "12px",
19
- "layout-space": "8px",
20
- "layout-thickness": "2px",
21
- "size-tiny": "2px",
22
- "size-small": "4px",
23
- "size-medium": "8px",
24
- "size-large": "16px",
25
- "size-giant": "32px"
29
+ "DEFAULT": "8px"
30
+ },
31
+ "borderWidth": {
32
+ "DEFAULT": "2px"
26
33
  },
27
34
  "colors": {
28
- "color": {
29
- "light-primary": "#0078D4",
30
- "light-secondary": "#005A9E",
31
- "light-tertiary": "#003E6B"
35
+ "primary": {
36
+ "DEFAULT": "#0078D4"
37
+ },
38
+ "secondary": {
39
+ "DEFAULT": "#005A9E"
40
+ },
41
+ "tertiary": {
42
+ "DEFAULT": "#003E6B"
32
43
  }
33
44
  },
45
+ "boxShadow": {
46
+ "DEFAULT": "none"
47
+ },
34
48
  "transitionDuration": {
35
49
  "durationUltraFast": "50ms",
36
50
  "durationFaster": "100ms",
@@ -42,16 +56,4 @@ module.exports = {
42
56
  "durationUltraSlow": "500ms"
43
57
  }
44
58
  }
45
- },
46
- plugins: [
47
- plugin(function({ addUtilities, theme, e }) {
48
- const shadows = theme('boxShadow') || {};
49
- const utils = Object.entries(shadows).reduce((acc, [key, value]) => {
50
- acc['.' + e('shadow-' + key)] = { boxShadow: value };
51
- return acc;
52
- }, {});
53
- addUtilities(utils, ['responsive', 'hover', 'focus']);
54
- // You can extend with more utilities here (spacing, radii, etc.)
55
- })
56
- ]
57
- };
59
+ });
package/tailwind/v3/plugins/mosaik-joy.tailwind.plugin.cjs CHANGED
@@ -8,8 +8,16 @@
8
8
 
9
9
  const plugin = require('tailwindcss/plugin');
10
10
 
11
- module.exports = {
12
- theme: {
11
+ module.exports = plugin(function({ addUtilities, theme, e }) {
12
+ // Optional: Add custom utilities here
13
+ // Example: Custom shadow utilities
14
+ // const shadows = theme('boxShadow') || {};
15
+ // const shadowUtils = Object.entries(shadows).reduce((acc, [key, value]) => {
16
+ // acc['.' + e('shadow-' + key)] = { boxShadow: value };
17
+ // return acc;
18
+ // }, {});
19
+ // addUtilities(shadowUtils);
20
+ }, {
13
21
  "extend": {
14
22
  "fontFamily": {
15
23
  "sans": "Nunito, sans-serif",
@@ -27,63 +35,76 @@ module.exports = {
27
35
  "button": "Nunito, sans-serif",
28
36
  "overline": "Nunito, sans-serif"
29
37
  },
38
+ "borderRadius": {
39
+ "DEFAULT": "12px"
40
+ },
30
41
  "spacing": {
31
- "radius": "12px",
32
- "space": "8px",
33
- "thickness": "2px",
34
- "size-tiny": "2px",
35
- "size-small": "4px",
36
- "size-medium": "8px",
37
- "size-large": "16px",
38
- "size-giant": "32px"
42
+ "DEFAULT": "8px"
43
+ },
44
+ "borderWidth": {
45
+ "DEFAULT": "2px"
39
46
  },
40
47
  "colors": {
41
- "background": "oklch(93.70% 0.0000 NaN)",
42
- "foreground": "oklch(38.62% 0.0207 251.11)",
43
- "highlight": {
44
- "0": "oklch(100.00% 0.0000 NaN)",
45
- "50": "oklch(98.30% 0.0123 317.91)",
46
- "100": "oklch(95.10% 0.0298 307.19)",
47
- "200": "oklch(87.70% 0.0743 304.18)",
48
- "300": "oklch(77.21% 0.1405 302.22)",
49
- "400": "oklch(66.65% 0.1915 297.24)",
50
- "500": "oklch(55.72% 0.2094 295.22)",
51
- "600": "oklch(45.17% 0.1813 293.78)",
52
- "700": "oklch(36.12% 0.1494 293.98)",
53
- "800": "oklch(28.99% 0.1222 292.55)",
54
- "900": "oklch(21.71% 0.0975 291.58)",
48
+ "scheme-background": {
49
+ "DEFAULT": "oklch(93.70% 0.0000 NaN)"
50
+ },
51
+ "scheme-foreground": {
52
+ "DEFAULT": "oklch(38.62% 0.0207 251.11)"
53
+ },
54
+ "scheme-highlight": {
55
55
  "DEFAULT": "oklch(86.07% 0.0000 NaN)"
56
56
  },
57
- "middlelight": "oklch(63.34% 0.0000 NaN)",
58
- "lowlight": "oklch(47.48% 0.0000 NaN)",
59
- "transparent": "oklch(100.00% 0.0000 NaN / 0.00)",
60
- "semiTransparent": "oklch(100.00% 0.0000 NaN / 0.67)",
61
- "disabled": "oklch(51.73% 0.0000 NaN)",
62
- "contrast": "oklch(100.00% 0.0000 NaN)",
63
- "selection": "oklch(84.52% 0.0000 NaN / 0.44)",
64
- "background-dark": "oklch(19.57% 0.0000 NaN)",
65
- "foreground-dark": "oklch(79.35% 0.0173 70.48)",
66
- "highlight-dark": {
67
- "0": "oklch(0.00% 0.0000 NaN)",
68
- "50": "oklch(21.71% 0.0975 291.58)",
69
- "100": "oklch(28.99% 0.1222 292.55)",
70
- "200": "oklch(36.12% 0.1494 293.98)",
71
- "300": "oklch(45.17% 0.1813 293.78)",
72
- "400": "oklch(55.72% 0.2094 295.22)",
73
- "500": "oklch(66.65% 0.1915 297.24)",
74
- "600": "oklch(77.21% 0.1405 302.22)",
75
- "700": "oklch(87.70% 0.0743 304.18)",
76
- "800": "oklch(95.10% 0.0298 307.19)",
77
- "900": "oklch(98.30% 0.0123 317.91)",
57
+ "scheme-middlelight": {
58
+ "DEFAULT": "oklch(63.34% 0.0000 NaN)"
59
+ },
60
+ "scheme-lowlight": {
61
+ "DEFAULT": "oklch(47.48% 0.0000 NaN)"
62
+ },
63
+ "scheme-transparent": {
64
+ "DEFAULT": "oklch(100.00% 0.0000 NaN / 0.00)"
65
+ },
66
+ "scheme-semiTransparent": {
67
+ "DEFAULT": "oklch(100.00% 0.0000 NaN / 0.67)"
68
+ },
69
+ "scheme-disabled": {
70
+ "DEFAULT": "oklch(51.73% 0.0000 NaN)"
71
+ },
72
+ "scheme-contrast": {
73
+ "DEFAULT": "oklch(100.00% 0.0000 NaN)"
74
+ },
75
+ "scheme-selection": {
76
+ "DEFAULT": "oklch(84.52% 0.0000 NaN / 0.44)"
77
+ },
78
+ "scheme-background-dark": {
79
+ "DEFAULT": "oklch(19.57% 0.0000 NaN)"
80
+ },
81
+ "scheme-foreground-dark": {
82
+ "DEFAULT": "oklch(79.35% 0.0173 70.48)"
83
+ },
84
+ "scheme-highlight-dark": {
78
85
  "DEFAULT": "oklch(30.12% 0.0000 NaN)"
79
86
  },
80
- "middlelight-dark": "oklch(56.24% 0.0000 NaN)",
81
- "lowlight-dark": "oklch(71.55% 0.0000 NaN)",
82
- "transparent-dark": "oklch(100.00% 0.0000 NaN / 0.00)",
83
- "semiTransparent-dark": "oklch(100.00% 0.0000 NaN / 0.03)",
84
- "disabled-dark": "oklch(39.79% 0.0000 NaN)",
85
- "contrast-dark": "oklch(0.00% 0.0000 NaN)",
86
- "selection-dark": "oklch(84.52% 0.0000 NaN / 0.44)",
87
+ "scheme-middlelight-dark": {
88
+ "DEFAULT": "oklch(56.24% 0.0000 NaN)"
89
+ },
90
+ "scheme-lowlight-dark": {
91
+ "DEFAULT": "oklch(71.55% 0.0000 NaN)"
92
+ },
93
+ "scheme-transparent-dark": {
94
+ "DEFAULT": "oklch(100.00% 0.0000 NaN / 0.00)"
95
+ },
96
+ "scheme-semiTransparent-dark": {
97
+ "DEFAULT": "oklch(100.00% 0.0000 NaN / 0.03)"
98
+ },
99
+ "scheme-disabled-dark": {
100
+ "DEFAULT": "oklch(39.79% 0.0000 NaN)"
101
+ },
102
+ "scheme-contrast-dark": {
103
+ "DEFAULT": "oklch(0.00% 0.0000 NaN)"
104
+ },
105
+ "scheme-selection-dark": {
106
+ "DEFAULT": "oklch(84.52% 0.0000 NaN / 0.44)"
107
+ },
87
108
  "primary": {
88
109
  "0": "oklch(100.00% 0.0000 NaN)",
89
110
  "50": "oklch(94.05% 0.0282 355.51)",
@@ -175,6 +196,19 @@ module.exports = {
175
196
  "800": "oklch(26.65% 0.0750 149.11)",
176
197
  "900": "oklch(20.20% 0.0538 151.47)"
177
198
  },
199
+ "highlight": {
200
+ "0": "oklch(100.00% 0.0000 NaN)",
201
+ "50": "oklch(98.30% 0.0123 317.91)",
202
+ "100": "oklch(95.10% 0.0298 307.19)",
203
+ "200": "oklch(87.70% 0.0743 304.18)",
204
+ "300": "oklch(77.21% 0.1405 302.22)",
205
+ "400": "oklch(66.65% 0.1915 297.24)",
206
+ "500": "oklch(55.72% 0.2094 295.22)",
207
+ "600": "oklch(45.17% 0.1813 293.78)",
208
+ "700": "oklch(36.12% 0.1494 293.98)",
209
+ "800": "oklch(28.99% 0.1222 292.55)",
210
+ "900": "oklch(21.71% 0.0975 291.58)"
211
+ },
178
212
  "neutral": {
179
213
  "0": "oklch(100.00% 0.0000 NaN)",
180
214
  "50": "oklch(97.64% 0.0013 287.31)",
@@ -279,6 +313,19 @@ module.exports = {
279
313
  "800": "oklch(94.20% 0.0448 151.23)",
280
314
  "900": "oklch(98.64% 0.0165 150.99)"
281
315
  },
316
+ "highlight-dark": {
317
+ "0": "oklch(0.00% 0.0000 NaN)",
318
+ "50": "oklch(21.71% 0.0975 291.58)",
319
+ "100": "oklch(28.99% 0.1222 292.55)",
320
+ "200": "oklch(36.12% 0.1494 293.98)",
321
+ "300": "oklch(45.17% 0.1813 293.78)",
322
+ "400": "oklch(55.72% 0.2094 295.22)",
323
+ "500": "oklch(66.65% 0.1915 297.24)",
324
+ "600": "oklch(77.21% 0.1405 302.22)",
325
+ "700": "oklch(87.70% 0.0743 304.18)",
326
+ "800": "oklch(95.10% 0.0298 307.19)",
327
+ "900": "oklch(98.30% 0.0123 317.91)"
328
+ },
282
329
  "neutral-dark": {
283
330
  "0": "oklch(0.00% 0.0000 NaN)",
284
331
  "50": "oklch(18.91% 0.0101 285.42)",
@@ -293,21 +340,6 @@ module.exports = {
293
340
  "900": "oklch(97.64% 0.0013 287.31)"
294
341
  }
295
342
  },
296
- "fontSize": {
297
- "headline1": "96px",
298
- "headline2'": "60px",
299
- "headline3": "48px",
300
- "headline4": "34px",
301
- "headline5": "24px",
302
- "headline6": "20px",
303
- "subtitle1": "16px",
304
- "subtitle2": "14px",
305
- "body1": "16px",
306
- "body2": "14px",
307
- "caption": "12px",
308
- "button": "14px",
309
- "overline": "12px"
310
- },
311
343
  "lineHeight": {
312
344
  "headline1": "100px",
313
345
  "headline2'": "64px",
@@ -353,23 +385,25 @@ module.exports = {
353
385
  "button": "1.4285714285714286px",
354
386
  "overline": "2.6666666666666665px"
355
387
  },
388
+ "boxShadow": {
389
+ "elevation-none": "none",
390
+ "light": "0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.14)",
391
+ "semilight": "0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.14)",
392
+ "regular": "0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 4px 8px 0px rgba(0, 0, 0, 0.14)",
393
+ "semibold": "0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.14)",
394
+ "bold": "0px 0px 8px 0px rgba(0, 0, 0, 0.12), 0px 14px 28px 0px rgba(0, 0, 0, 0.14)",
395
+ "extrabold": "0px 0px 8px 0px rgba(0, 0, 0, 0.12), 0px 32px 64px 0px rgba(0, 0, 0, 0.14)",
396
+ "light-dark": "0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 1px 2px 0px rgba(0, 0, 0, 0.28)",
397
+ "semilight-dark": "0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 2px 4px 0px rgba(0, 0, 0, 0.28)",
398
+ "regular-dark": "0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 4px 8px 0px rgba(0, 0, 0, 0.28)",
399
+ "semibold-dark": "0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 8px 16px 0px rgba(0, 0, 0, 0.28)",
400
+ "bold-dark": "0px 0px 8px 0px rgba(0, 0, 0, 0.24), 0px 14px 28px 0px rgba(0, 0, 0, 0.28)",
401
+ "extrabold-dark": "0px 0px 8px 0px rgba(0, 0, 0, 0.24), 0px 32px 64px 0px rgba(0, 0, 0, 0.28)"
402
+ },
356
403
  "transitionDuration": {
357
- "DEFAULT": "200ms 400ms 600ms",
358
404
  "short": "200ms",
359
405
  "medium": "400ms",
360
406
  "long": "600ms"
361
407
  }
362
408
  }
363
- },
364
- plugins: [
365
- plugin(function({ addUtilities, theme, e }) {
366
- const shadows = theme('boxShadow') || {};
367
- const utils = Object.entries(shadows).reduce((acc, [key, value]) => {
368
- acc['.' + e('shadow-' + key)] = { boxShadow: value };
369
- return acc;
370
- }, {});
371
- addUtilities(utils, ['responsive', 'hover', 'focus']);
372
- // You can extend with more utilities here (spacing, radii, etc.)
373
- })
374
- ]
375
- };
409
+ });