@paraxe/design 1.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 (34) hide show
  1. package/dist/.loba-build.json +13 -0
  2. package/dist/index.css +1 -0
  3. package/dist/index.d.ts +571 -0
  4. package/dist/index.d.ts.map +1 -0
  5. package/dist/index.js +305 -0
  6. package/package.json +49 -0
  7. package/src/README.md +62 -0
  8. package/src/components.css +3743 -0
  9. package/src/env.d.ts +7 -0
  10. package/src/index.ts +354 -0
  11. package/src/presets/corporate.css +32 -0
  12. package/src/presets/creative.css +32 -0
  13. package/src/presets/default.css +58 -0
  14. package/src/presets/editorial.css +32 -0
  15. package/src/presets/fashion.css +32 -0
  16. package/src/presets/friendly.css +32 -0
  17. package/src/presets/future.css +32 -0
  18. package/src/presets/industrial.css +32 -0
  19. package/src/presets/local-business.css +32 -0
  20. package/src/presets/minimal.css +32 -0
  21. package/src/presets/premium.css +32 -0
  22. package/src/presets/tech.css +32 -0
  23. package/src/tailwind.css +106 -0
  24. package/src/themes/crimson.css +45 -0
  25. package/src/themes/dark.css +35 -0
  26. package/src/themes/default.css +471 -0
  27. package/src/themes/electric.css +45 -0
  28. package/src/themes/forge.css +30 -0
  29. package/src/themes/light.css +34 -0
  30. package/src/themes/minimal.css +50 -0
  31. package/src/themes/mocha.css +44 -0
  32. package/src/themes/orchid.css +45 -0
  33. package/src/themes/sand.css +45 -0
  34. package/src/tokens.css +635 -0
package/src/themes/orchid.css ADDED
@@ -0,0 +1,45 @@
1
+ /* ==========================================================================
2
+ @loba/design — themes/orchid.css
3
+ Creative — Vibrant orchid (#bd4fbc) on midnight purple (#140f2d)
4
+ LAYER 2 — COLOR TOKENS (consumes tokens.css)
5
+ ========================================================================== */
6
+
7
+ @import "./default.css";
8
+
9
+ :root {
10
+ --brand-primary: #bd4fbc;
11
+ --brand-primary-hover: #a044a0;
12
+ --brand-primary-active: #883a88;
13
+ --brand-primary-light: #d68ad5;
14
+ --brand-primary-muted: color-mix(in srgb, #bd4fbc 15%, transparent);
15
+ --brand-glow: color-mix(in srgb, #bd4fbc 25%, transparent);
16
+ --text-on-brand: #ffffff;
17
+
18
+ --background-primary: #140f2d;
19
+ --background-secondary: color-mix(in srgb, #140f2d 92%, white);
20
+
21
+ --surface-base: color-mix(in srgb, #140f2d 92%, white);
22
+ --surface-raised: color-mix(in srgb, #140f2d 84%, white);
23
+ --surface-card: color-mix(in srgb, #140f2d 88%, white);
24
+ --surface-hover: color-mix(in srgb, #140f2d 84%, white);
25
+
26
+ --text-primary: color-mix(in srgb, #140f2d 4%, white);
27
+ --text-secondary: color-mix(in srgb, #140f2d 40%, white);
28
+ --text-muted: color-mix(in srgb, #140f2d 60%, white);
29
+ --text-inverse: color-mix(in srgb, white 96%, black);
30
+ }
31
+
32
+ [data-theme="light"] {
33
+ --background-primary: #ffffff;
34
+ --background-secondary: color-mix(in srgb, #ffffff 95%, black);
35
+
36
+ --surface-base: color-mix(in srgb, #ffffff 93%, black);
37
+ --surface-raised: color-mix(in srgb, #ffffff 86%, black);
38
+ --surface-card: color-mix(in srgb, #ffffff 97%, black);
39
+ --surface-hover: color-mix(in srgb, #ffffff 90%, black);
40
+
41
+ --text-primary: color-mix(in srgb, black 92%, white);
42
+ --text-secondary: color-mix(in srgb, black 70%, white);
43
+ --text-muted: color-mix(in srgb, black 55%, white);
44
+ --text-inverse: color-mix(in srgb, white 96%, black);
45
+ }
package/src/themes/sand.css ADDED
@@ -0,0 +1,45 @@
1
+ /* ==========================================================================
2
+ @loba/design — themes/sand.css
3
+ Luxury — Soft gold (#e1ca96) on rich espresso (#1f1b16)
4
+ LAYER 2 — COLOR TOKENS (consumes tokens.css)
5
+ ========================================================================== */
6
+
7
+ @import "./default.css";
8
+
9
+ :root {
10
+ --brand-primary: #e1ca96;
11
+ --brand-primary-hover: #d4ba7e;
12
+ --brand-primary-active: #c7aa66;
13
+ --brand-primary-light: #efe0be;
14
+ --brand-primary-muted: color-mix(in srgb, #e1ca96 15%, transparent);
15
+ --brand-glow: color-mix(in srgb, #e1ca96 25%, transparent);
16
+ --text-on-brand: #1f1b16;
17
+
18
+ --background-primary: #1f1b16;
19
+ --background-secondary: color-mix(in srgb, #1f1b16 92%, white);
20
+
21
+ --surface-base: color-mix(in srgb, #1f1b16 92%, white);
22
+ --surface-raised: color-mix(in srgb, #1f1b16 84%, white);
23
+ --surface-card: color-mix(in srgb, #1f1b16 88%, white);
24
+ --surface-hover: color-mix(in srgb, #1f1b16 84%, white);
25
+
26
+ --text-primary: color-mix(in srgb, #1f1b16 4%, white);
27
+ --text-secondary: color-mix(in srgb, #1f1b16 40%, white);
28
+ --text-muted: color-mix(in srgb, #1f1b16 60%, white);
29
+ --text-inverse: color-mix(in srgb, white 96%, black);
30
+ }
31
+
32
+ [data-theme="light"] {
33
+ --background-primary: #ffffff;
34
+ --background-secondary: color-mix(in srgb, #ffffff 95%, black);
35
+
36
+ --surface-base: color-mix(in srgb, #ffffff 93%, black);
37
+ --surface-raised: color-mix(in srgb, #ffffff 86%, black);
38
+ --surface-card: color-mix(in srgb, #ffffff 97%, black);
39
+ --surface-hover: color-mix(in srgb, #ffffff 90%, black);
40
+
41
+ --text-primary: color-mix(in srgb, black 92%, white);
42
+ --text-secondary: color-mix(in srgb, black 70%, white);
43
+ --text-muted: color-mix(in srgb, black 55%, white);
44
+ --text-inverse: color-mix(in srgb, white 96%, black);
45
+ }