@fea-ui/styles 0.1.0-alpha.1 → 0.1.0-alpha.10

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 (39) hide show
  1. package/README.md +2 -14
  2. package/package.json +7 -8
  3. package/src/components/accordion.css +22 -26
  4. package/src/components/alert-dialog.css +50 -0
  5. package/src/components/alert.css +46 -0
  6. package/src/components/button-group.css +4 -4
  7. package/src/components/button.css +42 -32
  8. package/src/components/card.css +1 -1
  9. package/src/components/checkbox-group.css +1 -1
  10. package/src/components/checkbox.css +1 -1
  11. package/src/components/chip.css +10 -10
  12. package/src/components/container.css +1 -1
  13. package/src/components/description.css +3 -0
  14. package/src/components/dialog.css +13 -1
  15. package/src/components/drawer.css +84 -0
  16. package/src/components/field-error.css +3 -0
  17. package/src/components/fieldset.css +9 -0
  18. package/src/components/index.css +27 -17
  19. package/src/components/input.css +25 -27
  20. package/src/components/label.css +5 -1
  21. package/src/components/link.css +22 -16
  22. package/src/components/list.css +2 -2
  23. package/src/components/menu.css +48 -0
  24. package/src/components/meter.css +1 -1
  25. package/src/components/navbar.css +12 -14
  26. package/src/components/popover.css +11 -0
  27. package/src/components/progress.css +72 -0
  28. package/src/components/radio.css +31 -0
  29. package/src/components/sidebar.css +65 -0
  30. package/src/components/slider.css +25 -0
  31. package/src/components/switch.css +19 -19
  32. package/src/components/table.css +31 -0
  33. package/src/components/tabs.css +32 -32
  34. package/src/components/text-field.css +4 -0
  35. package/src/components/text.css +1 -1
  36. package/src/components/toggle-button.css +4 -4
  37. package/src/styles.css +99 -104
  38. package/src/components/field.css +0 -12
  39. package/src/components/textarea.css +0 -1
package/src/styles.css CHANGED
@@ -1,127 +1,122 @@
1
1
  @import "tailwindcss";
2
-
3
2
  @import "./components/index.css" layer(components);
4
3
 
5
4
  :root {
6
- --navbar-height: 4rem;
7
- --radius: 0.625rem;
8
-
9
- --background: oklch(1 0 0);
10
- --foreground: oklch(0.145 0 0);
11
-
12
- --card: oklch(1 0 0);
13
- --card-foreground: oklch(0.145 0 0);
14
- --popover: oklch(1 0 0);
15
- --popover-foreground: oklch(0.145 0 0);
16
- --input: oklch(0.922 0 0);
17
- --input-foreground: oklch(0.205 0 0);
18
- --accordion: oklch(1 0 0);
19
- --accordion-foreground: oklch(0.145 0 0);
20
-
21
- --primary: oklch(0.205 0 0);
22
- --primary-foreground: oklch(0.985 0 0);
23
- --secondary: oklch(0.97 0 0);
24
- --secondary-foreground: oklch(0.205 0 0);
25
- --muted: oklch(0.97 0 0);
26
- --muted-foreground: oklch(0.556 0 0);
27
- --accent: oklch(0.97 0 0);
28
- --accent-foreground: oklch(0.205 0 0);
29
- --danger: oklch(0.577 0.245 27.325);
30
- --danger-foreground: oklch(0.985 0 0);
31
- --success: oklch(0.623 0.17 145);
32
- --success-foreground: oklch(0.985 0 0);
33
-
34
- --border: oklch(0.922 0 0);
35
- --ring: oklch(62% 0.18 250);
36
- --link: oklch(0.205 0 0);
5
+ --navbar-height: 4rem;
6
+ --radius: 0.625rem;
7
+
8
+ --background: oklch(0.9702 0 0);
9
+ --foreground: oklch(0.145 0 0);
10
+
11
+ --surface: oklch(1 0 0);
12
+ --surface-foreground: oklch(0.145 0 0);
13
+ --popover: oklch(1 0 0);
14
+ --popover-foreground: oklch(0.145 0 0);
15
+ --input: oklch(0.922 0 0);
16
+ --input-foreground: oklch(0.205 0 0);
17
+ --accordion: oklch(1 0 0);
18
+ --accordion-foreground: oklch(0.145 0 0);
19
+
20
+ --primary: oklch(0.205 0 0);
21
+ --primary-foreground: oklch(0.985 0 0);
22
+ --secondary: oklch(0.91 0.0013 286.37);
23
+ --secondary-foreground: oklch(0.205 0 0);
24
+ --muted: oklch(0.97 0 0);
25
+ --muted-foreground: oklch(0.556 0 0);
26
+ --accent: oklch(0.97 0 0);
27
+ --accent-foreground: oklch(0.205 0 0);
28
+ --danger: oklch(0.577 0.245 27.325);
29
+ --danger-foreground: oklch(0.985 0 0);
30
+ --success: oklch(0.623 0.17 145);
31
+ --success-foreground: oklch(0.985 0 0);
32
+
33
+ --border: oklch(0.922 0 0);
34
+ --ring: oklch(62% 0.18 250);
35
+ --link: oklch(0.205 0 0);
37
36
  }
38
37
 
39
38
  .dark {
40
- --background: oklch(0.145 0 0);
41
- --foreground: oklch(0.985 0 0);
42
-
43
- --card: oklch(0.205 0 0);
44
- --card-foreground: oklch(0.985 0 0);
45
- --popover: oklch(0.205 0 0);
46
- --popover-foreground: oklch(0.985 0 0);
47
- --input: oklch(1 0 0 / 15%);
48
- --input-foreground: oklch(0.985 0 0);
49
- --accordion: oklch(0.205 0 0);
50
- --accordion-foreground: oklch(0.985 0 0);
51
-
52
- --primary: oklch(0.922 0 0);
53
- --primary-foreground: oklch(0.205 0 0);
54
- --secondary: oklch(0.269 0 0);
55
- --secondary-foreground: oklch(0.985 0 0);
56
- --muted: oklch(0.269 0 0);
57
- --muted-foreground: oklch(0.708 0 0);
58
- --danger: oklch(0.704 0.191 22.216);
59
- --danger-foreground: oklch(0.985 0 0);
60
- --success: oklch(0.7017 0.3225 145);
61
- --success-foreground: oklch(0.205 0 0);
62
-
63
- --border: oklch(1 0 0 / 10%);
64
- --ring: oklch(62% 0.18 250);
65
- --link: oklch(0.922 0 0);
39
+ --background: oklch(0.145 0 0);
40
+ --foreground: oklch(0.985 0 0);
41
+
42
+ --surface: oklch(0.205 0 0);
43
+ --surface-foreground: oklch(0.985 0 0);
44
+ --overlay: oklch(0.205 0 0);
45
+ --overlay-foreground: oklch(0.985 0 0);
46
+ --popover: oklch(0.205 0 0);
47
+ --popover-foreground: oklch(0.985 0 0);
48
+ --input: oklch(1 0 0 / 15%);
49
+ --input-foreground: oklch(0.985 0 0);
50
+ --accordion: oklch(0.205 0 0);
51
+ --accordion-foreground: oklch(0.985 0 0);
52
+
53
+ --primary: oklch(0.922 0 0);
54
+ --primary-foreground: oklch(0.205 0 0);
55
+ --secondary: oklch(0.269 0 0);
56
+ --secondary-foreground: oklch(0.985 0 0);
57
+ --muted: oklch(0.269 0 0);
58
+ --muted-foreground: oklch(0.708 0 0);
59
+ --danger: oklch(0.704 0.191 22.216);
60
+ --danger-foreground: oklch(0.985 0 0);
61
+ --success: oklch(0.7017 0.3225 145);
62
+ --success-foreground: oklch(0.205 0 0);
63
+
64
+ --border: oklch(1 0 0 / 10%);
65
+ --ring: oklch(62% 0.18 250);
66
+ --link: oklch(0.922 0 0);
66
67
  }
67
68
 
68
69
  @theme inline {
69
- --radius: var(--radius);
70
-
71
- --color-background: var(--background);
72
- --color-foreground: var(--foreground);
73
-
74
- --color-card: var(--card);
75
- --color-card-foreground: var(--card-foreground);
76
- --color-popover: var(--popover);
77
- --color-popover-foreground: var(--popover-foreground);
78
- --color-input: var(--input);
79
- --color-input-foreground: var(--input-foreground);
80
- --color-accordion: var(--accordion);
81
- --color-accordion-foreground: var(--accordion-foreground);
82
-
83
- --color-primary: var(--primary);
84
- --color-primary-foreground: var(--primary-foreground);
85
- --color-secondary: var(--secondary);
86
- --color-secondary-foreground: var(--secondary-foreground);
87
- --color-muted: var(--muted);
88
- --color-muted-foreground: var(--muted-foreground);
89
- --color-danger: var(--danger);
90
- --color-danger-foreground: var(--danger-foreground);
91
- --color-success: var(--success);
92
- --color-success-foreground: var(--success-foreground);
93
-
94
- --color-border: var(--border);
95
- --color-ring: var(--ring);
96
- --color-link: var(--link);
97
- }
98
-
99
- @layer base {
100
- * {
101
- @apply border-border outline-ring/50;
102
- }
103
-
104
- body {
105
- @apply bg-background text-foreground;
106
- }
70
+ --radius: var(--radius);
71
+
72
+ --color-background: var(--background);
73
+ --color-foreground: var(--foreground);
74
+
75
+ --color-surface: var(--surface);
76
+ --color-surface-foreground: var(--surface-foreground);
77
+ --color-overlay: var(--overlay);
78
+ --color-overlay-foreground: var(--overlay-foreground);
79
+ --color-popover: var(--popover);
80
+ --color-popover-foreground: var(--popover-foreground);
81
+ --color-input: var(--input);
82
+ --color-input-foreground: var(--input-foreground);
83
+ --color-accordion: var(--accordion);
84
+ --color-accordion-foreground: var(--accordion-foreground);
85
+
86
+ --color-primary: var(--primary);
87
+ --color-primary-foreground: var(--primary-foreground);
88
+ --color-secondary: var(--secondary);
89
+ --color-secondary-foreground: var(--secondary-foreground);
90
+ --color-muted: var(--muted);
91
+ --color-muted-foreground: var(--muted-foreground);
92
+ --color-danger: var(--danger);
93
+ --color-danger-foreground: var(--danger-foreground);
94
+ --color-success: var(--success);
95
+ --color-success-foreground: var(--success-foreground);
96
+
97
+ --color-border: var(--border);
98
+ --color-ring: var(--ring);
99
+ --color-link: var(--link);
107
100
  }
108
101
 
109
102
  @utility status-focused {
110
- @apply ring-offset-background ring-2 ring-offset-2 outline-none;
103
+ @apply ring-offset-background ring-2 ring-offset-2 outline-none;
111
104
  }
112
105
 
113
106
  @utility status-disabled {
114
- @apply cursor-not-allowed opacity-50;
107
+ @apply cursor-not-allowed opacity-50;
115
108
  }
116
109
 
117
110
  @utility status-pending {
118
- @apply cursor-wait opacity-75;
111
+ @apply cursor-wait opacity-75;
119
112
  }
120
113
 
121
- @utility status-valid {
122
- @apply border-success;
123
- }
114
+ @layer base {
115
+ * {
116
+ @apply border-border outline-ring/50;
117
+ }
124
118
 
125
- @utility status-invalid {
126
- @apply border-danger;
119
+ body {
120
+ @apply bg-background text-foreground;
121
+ }
127
122
  }
package/src/components/field.css DELETED
@@ -1,12 +0,0 @@
1
- /** Base Styling */
2
- .field {
3
- @apply flex flex-col gap-1;
4
- }
5
-
6
- .field__description {
7
- @apply text-muted-foreground text-sm;
8
- }
9
-
10
- .field__error {
11
- @apply text-danger text-sm;
12
- }
package/src/components/textarea.css DELETED
@@ -1 +0,0 @@
1
- /** Base Styling */