@new-ui/themes 3.0.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 (54) hide show
  1. package/LICENSE +29 -0
  2. package/README.md +113 -0
  3. package/dist/index.css +941 -0
  4. package/dist/index.css.map +1 -0
  5. package/dist/index.min.css +2 -0
  6. package/dist/index.min.css.map +1 -0
  7. package/dist/themes/aura.css +56 -0
  8. package/dist/themes/aura.css.map +1 -0
  9. package/dist/themes/ayu-dark.css +59 -0
  10. package/dist/themes/ayu-dark.css.map +1 -0
  11. package/dist/themes/catppuccin-frappe.css +62 -0
  12. package/dist/themes/catppuccin-frappe.css.map +1 -0
  13. package/dist/themes/catppuccin-latte.css +62 -0
  14. package/dist/themes/catppuccin-latte.css.map +1 -0
  15. package/dist/themes/catppuccin-macchiato.css +62 -0
  16. package/dist/themes/catppuccin-macchiato.css.map +1 -0
  17. package/dist/themes/catppuccin-mocha.css +62 -0
  18. package/dist/themes/catppuccin-mocha.css.map +1 -0
  19. package/dist/themes/dracula.css +48 -0
  20. package/dist/themes/dracula.css.map +1 -0
  21. package/dist/themes/flexoki-dark.css +59 -0
  22. package/dist/themes/flexoki-dark.css.map +1 -0
  23. package/dist/themes/flexoki-light.css +59 -0
  24. package/dist/themes/flexoki-light.css.map +1 -0
  25. package/dist/themes/monokai.css +56 -0
  26. package/dist/themes/monokai.css.map +1 -0
  27. package/dist/themes/night-owl.css +57 -0
  28. package/dist/themes/night-owl.css.map +1 -0
  29. package/dist/themes/sargam-dark.css +94 -0
  30. package/dist/themes/sargam-dark.css.map +1 -0
  31. package/dist/themes/sargam-light.css +94 -0
  32. package/dist/themes/sargam-light.css.map +1 -0
  33. package/dist/themes/synthwave-84.css +57 -0
  34. package/dist/themes/synthwave-84.css.map +1 -0
  35. package/dist/themes/tokyo-night.css +54 -0
  36. package/dist/themes/tokyo-night.css.map +1 -0
  37. package/package.json +110 -0
  38. package/src/_contract.scss +46 -0
  39. package/src/index.scss +21 -0
  40. package/src/themes/aura.scss +74 -0
  41. package/src/themes/ayu-dark.scss +77 -0
  42. package/src/themes/catppuccin-frappe.scss +80 -0
  43. package/src/themes/catppuccin-latte.scss +80 -0
  44. package/src/themes/catppuccin-macchiato.scss +80 -0
  45. package/src/themes/catppuccin-mocha.scss +80 -0
  46. package/src/themes/dracula.scss +66 -0
  47. package/src/themes/flexoki-dark.scss +79 -0
  48. package/src/themes/flexoki-light.scss +79 -0
  49. package/src/themes/monokai.scss +74 -0
  50. package/src/themes/night-owl.scss +75 -0
  51. package/src/themes/sargam-dark.scss +112 -0
  52. package/src/themes/sargam-light.scss +112 -0
  53. package/src/themes/synthwave-84.scss +75 -0
  54. package/src/themes/tokyo-night.scss +72 -0
package/LICENSE ADDED
@@ -0,0 +1,29 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2025 Abhimanyu Rana @planetabhi
4
+ Copyright (c) 2025 Method Black Studio
5
+
6
+ Permission is hereby granted, free of charge, to any person obtaining a copy
7
+ of this software and associated documentation files (the "Software"), to deal
8
+ in the Software without restriction, including without limitation the rights
9
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
10
+ copies of the Software, and to permit persons to whom the Software is
11
+ furnished to do so, subject to the following conditions:
12
+
13
+ The above copyright notice and this permission notice shall be included in all
14
+ copies or substantial portions of the Software.
15
+
16
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
17
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
18
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
19
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
20
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
21
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
22
+ SOFTWARE.
23
+
24
+ ---
25
+
26
+ This package includes color palettes adapted from third-party projects. Only
27
+ the raw palette values are reused; the semantic mapping onto the New UI
28
+ contract is original work. Each upstream project is MIT licensed. See CREDITS
29
+ in README.md for full attribution.
package/README.md ADDED
@@ -0,0 +1,113 @@
1
+ # New UI Themes
2
+
3
+ New UI Themes provides ready-made themes mapped onto the New UI semantic color contract. Every theme sets the same 32 semantic custom properties for backgrounds, borders, buttons, links, support, and content, so your components stay consistent when you switch themes.
4
+
5
+ ## Install
6
+
7
+ Install New UI Themes from your terminal with npm:
8
+
9
+ ```
10
+ npm i @new-ui/themes
11
+ ```
12
+
13
+ To load every theme from a CDN, use the minified build:
14
+
15
+ ```html
16
+ <link
17
+ rel="stylesheet"
18
+ href="https://cdn.jsdelivr.net/npm/@new-ui/themes@latest/dist/index.min.css"
19
+ />
20
+ ```
21
+
22
+ To load a single theme, target its file:
23
+
24
+ ```html
25
+ <link
26
+ rel="stylesheet"
27
+ href="https://cdn.jsdelivr.net/npm/@new-ui/themes@latest/dist/themes/dracula.css"
28
+ />
29
+ ```
30
+
31
+ ## Usage
32
+
33
+ Import every theme in a React app or bundler:
34
+
35
+ ```js
36
+ import '@new-ui/themes/css';
37
+ ```
38
+
39
+ Import a single theme by its subpath:
40
+
41
+ ```js
42
+ import '@new-ui/themes/dracula';
43
+ ```
44
+
45
+ For SCSS projects, load every theme with `@use`:
46
+
47
+ ```scss
48
+ @use '@new-ui/themes/scss';
49
+ ```
50
+
51
+ Load a single theme with its subpath:
52
+
53
+ ```scss
54
+ @use '@new-ui/themes/scss/dracula';
55
+ ```
56
+
57
+ Activate a theme by setting the `data-new-ui-theme` attribute on a root element:
58
+
59
+ ```html
60
+ <html data-new-ui-theme="dracula">
61
+ ...
62
+ </html>
63
+ ```
64
+
65
+ ## Themes
66
+
67
+ The following table lists each theme, its `color-scheme`, and its import subpath:
68
+
69
+ | `data-new-ui-theme` value | Scheme | Import subpath |
70
+ | ------------------------- | ------ | ------------------------ |
71
+ | `dracula` | dark | `./dracula` |
72
+ | `catppuccin-latte` | light | `./catppuccin-latte` |
73
+ | `catppuccin-frappe` | dark | `./catppuccin-frappe` |
74
+ | `catppuccin-macchiato` | dark | `./catppuccin-macchiato` |
75
+ | `catppuccin-mocha` | dark | `./catppuccin-mocha` |
76
+ | `tokyo-night` | dark | `./tokyo-night` |
77
+ | `night-owl` | dark | `./night-owl` |
78
+ | `ayu-dark` | dark | `./ayu-dark` |
79
+ | `flexoki-light` | light | `./flexoki-light` |
80
+ | `flexoki-dark` | dark | `./flexoki-dark` |
81
+ | `aura` | dark | `./aura` |
82
+ | `synthwave-84` | dark | `./synthwave-84` |
83
+ | `monokai` | dark | `./monokai` |
84
+ | `sargam-light` | light | `./sargam-light` |
85
+ | `sargam-dark` | dark | `./sargam-dark` |
86
+
87
+ Each theme also declares `color-scheme`, so native form controls, scrollbars,
88
+ and `light-dark()` values render correctly.
89
+
90
+ ## Author a theme
91
+
92
+ A theme defines its own private palette copied from the source, then maps
93
+ those values onto the shared contract:
94
+
95
+ ```scss
96
+ [data-new-ui-theme='my-theme'] {
97
+ color-scheme: dark;
98
+
99
+ // Private palette
100
+ --mt-bg: oklch(16.84% 0 0deg);
101
+ --mt-accent: oklch(71.9% 0.1287 264.05deg);
102
+ // ...
103
+
104
+ // Map onto the 32-token contract. Refer to src/_contract.scss.
105
+ --background: var(--mt-bg);
106
+ --button: var(--mt-accent);
107
+ // ...
108
+ }
109
+ ```
110
+
111
+ The build runs a completeness check with `scripts/check-contract.mjs`. The
112
+ check fails if any compiled theme is missing a contract token, so an
113
+ incomplete theme cannot ship.