@fastwork/xosmoz-theme 0.0.38 → 0.0.40

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 (14) hide show
  1. package/README.md +13 -13
  2. package/dist/base.css +1 -1
  3. package/dist/index.d.mts +58 -58
  4. package/dist/index.d.ts +58 -58
  5. package/dist/index.js +48 -48
  6. package/dist/index.js.map +1 -1
  7. package/dist/index.mjs +48 -48
  8. package/dist/index.mjs.map +1 -1
  9. package/dist/themes/dark.css +24 -24
  10. package/dist/themes/light.css +24 -24
  11. package/dist/themes.css +48 -48
  12. package/dist/tokens.js.map +1 -1
  13. package/dist/tokens.mjs.map +1 -1
  14. package/package.json +1 -1
package/README.md CHANGED
@@ -50,21 +50,21 @@ All themes use the same semantic CSS variables, so your components work across a
50
50
  ```css
51
51
  .button {
52
52
  background-color: var(--xz-color-primary-bg-100);
53
- color: var(--xz-color-primary-fg);
53
+ color: var(--xz-color-primary-fg-50);
54
54
  padding: var(--xz-spacing-4);
55
55
  border-radius: var(--xz-radius-md);
56
56
  }
57
57
 
58
58
  .card {
59
59
  background: var(--xz-color-bg-200);
60
- color: var(--xz-color-content-100);
60
+ color: var(--xz-color-fg-100);
61
61
  border: 1px solid var(--xz-color-border);
62
62
  box-shadow: var(--xz-shadow-md);
63
63
  }
64
64
 
65
65
  .alert-success {
66
66
  background: var(--xz-color-success-bg-100);
67
- color: var(--xz-color-success-fg);
67
+ color: var(--xz-color-success-fg-50);
68
68
  }
69
69
  ```
70
70
 
@@ -95,7 +95,7 @@ You can create custom themes in two ways:
95
95
  [data-theme="my-custom-theme"] {
96
96
  --xz-color-bg-100: oklch(1.00 0 0);
97
97
  --xz-color-bg-200: oklch(0.98 0 0);
98
- --xz-color-content-100: oklch(0.20 0 0);
98
+ --xz-color-fg-100: oklch(0.20 0 0);
99
99
  --xz-color-border: oklch(0.90 0.005 260);
100
100
  --xz-color-primary-bg-100: oklch(0.58 .2524 30);
101
101
  --xz-color-primary-fg: oklch(1 0 0);
@@ -132,17 +132,17 @@ All themes support these semantic CSS variables:
132
132
 
133
133
  **Base Colors:**
134
134
  - `--xz-color-bg-100` / `--xz-color-bg-200` / `--xz-color-bg-300` / `--xz-color-bg-400` - Background shades
135
- - `--xz-color-content-100` / `--xz-color-content-200` - Text/content colors
136
- - `--xz-color-border` - Border color
137
- - `--xz-color-input` - Input border color
138
- - `--xz-color-ring` - Focus ring color
135
+ - `--xz-color-fg-100` / `--xz-color-fg-200` / `--xz-color-fg-300` - Text/foreground colors
136
+ - `--xz-color-line-100` / `--xz-color-line-200` / `--xz-color-line-300` - Border/line colors
139
137
 
140
- **Semantic Colors (primary, danger, success, warning, info):**
141
- - `--xz-color-{name}-bg-100` - Main background color
138
+ **Semantic Colors (primary, danger, success, warning, info, neutral):**
139
+ - `--xz-color-{name}-soft-100/200/300` - Soft background colors
140
+ - `--xz-color-{name}-line-100/200/300` - Border colors
141
+ - `--xz-color-{name}-bg-100` - Main solid background color
142
142
  - `--xz-color-{name}-bg-200` - Hover/darker background color
143
- - `--xz-color-{name}-content-100` - Main content color
144
- - `--xz-color-{name}-content-200` - Muted content color
145
- - `--xz-color-{name}-fg` - Foreground/text color for use on background
143
+ - `--xz-color-{name}-fg-50` - Text on solid backgrounds (white)
144
+ - `--xz-color-{name}-fg-100` - Main foreground/text color
145
+ - `--xz-color-{name}-fg-200` - Emphasized foreground/text color
146
146
 
147
147
  ### Using Design Tokens in JavaScript/TypeScript
148
148
 
package/dist/base.css CHANGED
@@ -57,7 +57,7 @@ body {
57
57
  font-family: var(--xz-font-family-primary);
58
58
  font-size: var(--xz-font-size-base);
59
59
  line-height: var(--xz-line-height-normal);
60
- color: var(--xz-color-content-100);
60
+ color: var(--xz-color-fg-100);
61
61
  background-color: var(--xz-color-bg-100);
62
62
  }
63
63
 
package/dist/index.d.mts CHANGED
@@ -6,66 +6,66 @@ export { B as BodyTokens, j as BorderRadius, F as FontWeights, H as HeadingToken
6
6
  */
7
7
 
8
8
  type ThemeColorShape = {
9
- soft: {
10
- 100: string
11
- 200: string
12
- 300: string
13
- }
14
- line: {
15
- 100: string
16
- 200: string
17
- 300: string
18
- }
19
- bg: {
20
- 100: string
21
- 200: string
22
- }
23
- content: {
24
- 100: string
25
- 200: string
26
- }
27
- fg: string
28
- }
9
+ soft: {
10
+ 100: string;
11
+ 200: string;
12
+ 300: string;
13
+ };
14
+ line: {
15
+ 100: string;
16
+ 200: string;
17
+ 300: string;
18
+ };
19
+ bg: {
20
+ 100: string;
21
+ 200: string;
22
+ };
23
+ fg: {
24
+ 50: string;
25
+ 100: string;
26
+ 200: string;
27
+ };
28
+ };
29
29
  interface ThemeConfig {
30
- name: string
31
- colors: {
32
- bg: {
33
- 100: string
34
- 200: string
35
- 300: string
36
- 400: string
37
- }
38
- content: {
39
- 100: string
40
- 200: string
41
- 300: string
42
- }
43
- line: {
44
- 100: string
45
- 200: string
46
- 300: string
47
- }
48
- primary: ThemeColorShape
49
- danger: ThemeColorShape
50
- success: ThemeColorShape
51
- warning: ThemeColorShape
52
- info: ThemeColorShape
53
- neutral: ThemeColorShape
54
- fastwork: ColorToken
55
- gray: ColorToken
56
- green: ColorToken
57
- mint: ColorToken
58
- amber: ColorToken
59
- red: ColorToken
60
- orange: ColorToken
61
- purple: ColorToken
62
- cyan: ColorToken
63
- blackAlpha: ColorToken
64
- whiteAlpha: ColorToken
65
- }
30
+ name: string;
31
+ colors: {
32
+ bg: {
33
+ 100: string;
34
+ 200: string;
35
+ 300: string;
36
+ 400: string;
37
+ };
38
+ fg: {
39
+ 100: string;
40
+ 200: string;
41
+ 300: string;
42
+ };
43
+ line: {
44
+ 100: string;
45
+ 200: string;
46
+ 300: string;
47
+ };
48
+ primary: ThemeColorShape;
49
+ danger: ThemeColorShape;
50
+ success: ThemeColorShape;
51
+ warning: ThemeColorShape;
52
+ info: ThemeColorShape;
53
+ neutral: ThemeColorShape;
54
+ fastwork: ColorToken;
55
+ gray: ColorToken;
56
+ green: ColorToken;
57
+ mint: ColorToken;
58
+ amber: ColorToken;
59
+ red: ColorToken;
60
+ orange: ColorToken;
61
+ purple: ColorToken;
62
+ cyan: ColorToken;
63
+ blackAlpha: ColorToken;
64
+ whiteAlpha: ColorToken;
65
+ };
66
66
  }
67
- type ThemeName = 'light' | 'dark'
68
- type ThemeRegistry = Record<ThemeName, ThemeConfig>
67
+ type ThemeName = 'light' | 'dark';
68
+ type ThemeRegistry = Record<ThemeName, ThemeConfig>;
69
69
 
70
70
  declare const lightTheme: ThemeConfig;
71
71
 
package/dist/index.d.ts CHANGED
@@ -6,66 +6,66 @@ export { B as BodyTokens, j as BorderRadius, F as FontWeights, H as HeadingToken
6
6
  */
7
7
 
8
8
  type ThemeColorShape = {
9
- soft: {
10
- 100: string
11
- 200: string
12
- 300: string
13
- }
14
- line: {
15
- 100: string
16
- 200: string
17
- 300: string
18
- }
19
- bg: {
20
- 100: string
21
- 200: string
22
- }
23
- content: {
24
- 100: string
25
- 200: string
26
- }
27
- fg: string
28
- }
9
+ soft: {
10
+ 100: string;
11
+ 200: string;
12
+ 300: string;
13
+ };
14
+ line: {
15
+ 100: string;
16
+ 200: string;
17
+ 300: string;
18
+ };
19
+ bg: {
20
+ 100: string;
21
+ 200: string;
22
+ };
23
+ fg: {
24
+ 50: string;
25
+ 100: string;
26
+ 200: string;
27
+ };
28
+ };
29
29
  interface ThemeConfig {
30
- name: string
31
- colors: {
32
- bg: {
33
- 100: string
34
- 200: string
35
- 300: string
36
- 400: string
37
- }
38
- content: {
39
- 100: string
40
- 200: string
41
- 300: string
42
- }
43
- line: {
44
- 100: string
45
- 200: string
46
- 300: string
47
- }
48
- primary: ThemeColorShape
49
- danger: ThemeColorShape
50
- success: ThemeColorShape
51
- warning: ThemeColorShape
52
- info: ThemeColorShape
53
- neutral: ThemeColorShape
54
- fastwork: ColorToken
55
- gray: ColorToken
56
- green: ColorToken
57
- mint: ColorToken
58
- amber: ColorToken
59
- red: ColorToken
60
- orange: ColorToken
61
- purple: ColorToken
62
- cyan: ColorToken
63
- blackAlpha: ColorToken
64
- whiteAlpha: ColorToken
65
- }
30
+ name: string;
31
+ colors: {
32
+ bg: {
33
+ 100: string;
34
+ 200: string;
35
+ 300: string;
36
+ 400: string;
37
+ };
38
+ fg: {
39
+ 100: string;
40
+ 200: string;
41
+ 300: string;
42
+ };
43
+ line: {
44
+ 100: string;
45
+ 200: string;
46
+ 300: string;
47
+ };
48
+ primary: ThemeColorShape;
49
+ danger: ThemeColorShape;
50
+ success: ThemeColorShape;
51
+ warning: ThemeColorShape;
52
+ info: ThemeColorShape;
53
+ neutral: ThemeColorShape;
54
+ fastwork: ColorToken;
55
+ gray: ColorToken;
56
+ green: ColorToken;
57
+ mint: ColorToken;
58
+ amber: ColorToken;
59
+ red: ColorToken;
60
+ orange: ColorToken;
61
+ purple: ColorToken;
62
+ cyan: ColorToken;
63
+ blackAlpha: ColorToken;
64
+ whiteAlpha: ColorToken;
65
+ };
66
66
  }
67
- type ThemeName = 'light' | 'dark'
68
- type ThemeRegistry = Record<ThemeName, ThemeConfig>
67
+ type ThemeName = 'light' | 'dark';
68
+ type ThemeRegistry = Record<ThemeName, ThemeConfig>;
69
69
 
70
70
  declare const lightTheme: ThemeConfig;
71
71
 
package/dist/index.js CHANGED
@@ -398,15 +398,15 @@ var lightTheme = {
398
398
  300: "oklch(0.95 0.01 260)",
399
399
  400: "oklch(0.92 0.01 260)"
400
400
  },
401
- content: {
401
+ fg: {
402
402
  100: "oklch(21% 0.006 285.885)",
403
- 200: "color-mix(in oklab, var(--xz-color-content-100) 80%, transparent)",
404
- 300: "color-mix(in oklab, var(--xz-color-content-100) 60%, transparent)"
403
+ 200: "color-mix(in oklab, var(--xz-color-fg-100) 80%, transparent)",
404
+ 300: "color-mix(in oklab, var(--xz-color-fg-100) 60%, transparent)"
405
405
  },
406
406
  line: {
407
- 100: "oklch(0 0 0 / 0.08)",
408
- 200: "oklch(0 0 0 / 0.16)",
409
- 300: "oklch(0 0 0 / 0.24)"
407
+ 100: "oklch(0.95 0 1 / 1)",
408
+ 200: "oklch(0.92 0 1 / 1)",
409
+ 300: "oklch(0.89 0 1 / 1)"
410
410
  },
411
411
  primary: {
412
412
  soft: {
@@ -423,11 +423,11 @@ var lightTheme = {
423
423
  100: fastwork[700],
424
424
  200: fastwork[800]
425
425
  },
426
- content: {
426
+ fg: {
427
+ 50: "oklch(1 0 0)",
427
428
  100: fastwork[900],
428
429
  200: fastwork[1e3]
429
- },
430
- fg: "oklch(1 0 0)"
430
+ }
431
431
  },
432
432
  danger: {
433
433
  soft: {
@@ -444,11 +444,11 @@ var lightTheme = {
444
444
  100: red[700],
445
445
  200: red[800]
446
446
  },
447
- content: {
447
+ fg: {
448
+ 50: "oklch(1 0 0)",
448
449
  100: red[900],
449
450
  200: red[1e3]
450
- },
451
- fg: "oklch(1 0 0)"
451
+ }
452
452
  },
453
453
  success: {
454
454
  soft: {
@@ -465,11 +465,11 @@ var lightTheme = {
465
465
  100: green[700],
466
466
  200: green[800]
467
467
  },
468
- content: {
468
+ fg: {
469
+ 50: "oklch(1 0 0)",
469
470
  100: green[900],
470
471
  200: green[1e3]
471
- },
472
- fg: "oklch(1 0 0)"
472
+ }
473
473
  },
474
474
  warning: {
475
475
  soft: {
@@ -486,11 +486,11 @@ var lightTheme = {
486
486
  100: amber[700],
487
487
  200: amber[800]
488
488
  },
489
- content: {
489
+ fg: {
490
+ 50: "oklch(1 0 0)",
490
491
  100: amber[900],
491
492
  200: amber[1e3]
492
- },
493
- fg: "oklch(1 0 0)"
493
+ }
494
494
  },
495
495
  info: {
496
496
  soft: {
@@ -507,11 +507,11 @@ var lightTheme = {
507
507
  100: cyan[700],
508
508
  200: cyan[800]
509
509
  },
510
- content: {
510
+ fg: {
511
+ 50: "oklch(1 0 0)",
511
512
  100: cyan[900],
512
513
  200: cyan[1e3]
513
- },
514
- fg: "oklch(1 0 0)"
514
+ }
515
515
  },
516
516
  neutral: {
517
517
  soft: {
@@ -528,11 +528,11 @@ var lightTheme = {
528
528
  100: gray[700],
529
529
  200: gray[800]
530
530
  },
531
- content: {
531
+ fg: {
532
+ 50: "oklch(1 0 0)",
532
533
  100: gray[900],
533
534
  200: gray[1e3]
534
- },
535
- fg: "oklch(1 0 0)"
535
+ }
536
536
  },
537
537
  // Color tokens
538
538
  fastwork,
@@ -691,15 +691,15 @@ var darkTheme = {
691
691
  300: "oklch(0.2933 0.0075 274.68)",
692
692
  400: "oklch(0.3133 0.0075 274.68)"
693
693
  },
694
- content: {
694
+ fg: {
695
695
  100: "oklch(96% 0.01 260)",
696
- 200: "color-mix(in oklab, var(--xz-color-content-100) 80%, transparent)",
697
- 300: "color-mix(in oklab, var(--xz-color-content-100) 60%, transparent)"
696
+ 200: "color-mix(in oklab, var(--xz-color-fg-100) 80%, transparent)",
697
+ 300: "color-mix(in oklab, var(--xz-color-fg-100) 60%, transparent)"
698
698
  },
699
699
  line: {
700
- 100: "oklch(1 0 0 / 0.07)",
701
- 200: "oklch(1 0 0 / 0.14)",
702
- 300: "oklch(1 0 0 / 0.21)"
700
+ 100: "oklch(0.32 0 0 / 1)",
701
+ 200: "oklch(0.34 0 0 / 1)",
702
+ 300: "oklch(0.36 0 0 / 1)"
703
703
  },
704
704
  primary: {
705
705
  soft: {
@@ -716,11 +716,11 @@ var darkTheme = {
716
716
  100: fastwork2[700],
717
717
  200: fastwork2[800]
718
718
  },
719
- content: {
719
+ fg: {
720
+ 50: "oklch(1 0 0)",
720
721
  100: fastwork2[900],
721
722
  200: fastwork2[1e3]
722
- },
723
- fg: "oklch(1 0 0)"
723
+ }
724
724
  },
725
725
  danger: {
726
726
  soft: {
@@ -737,11 +737,11 @@ var darkTheme = {
737
737
  100: red2[700],
738
738
  200: red2[800]
739
739
  },
740
- content: {
740
+ fg: {
741
+ 50: "oklch(1 0 0)",
741
742
  100: red2[900],
742
743
  200: red2[1e3]
743
- },
744
- fg: "oklch(1 0 0)"
744
+ }
745
745
  },
746
746
  success: {
747
747
  soft: {
@@ -758,11 +758,11 @@ var darkTheme = {
758
758
  100: green2[700],
759
759
  200: green2[800]
760
760
  },
761
- content: {
761
+ fg: {
762
+ 50: "oklch(1 0 0)",
762
763
  100: green2[900],
763
764
  200: green2[1e3]
764
- },
765
- fg: "oklch(1 0 0)"
765
+ }
766
766
  },
767
767
  warning: {
768
768
  soft: {
@@ -779,11 +779,11 @@ var darkTheme = {
779
779
  100: amber2[700],
780
780
  200: amber2[800]
781
781
  },
782
- content: {
782
+ fg: {
783
+ 50: "oklch(1 0 0)",
783
784
  100: amber2[900],
784
785
  200: amber2[1e3]
785
- },
786
- fg: "oklch(1 0 0)"
786
+ }
787
787
  },
788
788
  info: {
789
789
  soft: {
@@ -800,11 +800,11 @@ var darkTheme = {
800
800
  100: cyan2[700],
801
801
  200: cyan2[800]
802
802
  },
803
- content: {
803
+ fg: {
804
+ 50: "oklch(1 0 0)",
804
805
  100: cyan2[900],
805
806
  200: cyan2[1e3]
806
- },
807
- fg: "oklch(1 0 0)"
807
+ }
808
808
  },
809
809
  neutral: {
810
810
  soft: {
@@ -821,11 +821,11 @@ var darkTheme = {
821
821
  100: gray2[700],
822
822
  200: gray2[800]
823
823
  },
824
- content: {
824
+ fg: {
825
+ 50: "oklch(1 0 0)",
825
826
  100: gray2[900],
826
827
  200: gray2[1e3]
827
- },
828
- fg: "oklch(1 0 0)"
828
+ }
829
829
  },
830
830
  // Color tokens
831
831
  fastwork: fastwork2,