@fea-ui/styles 0.0.0-canary.6 → 0.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 (10) hide show
  1. package/package.json +1 -1
  2. package/src/components/alert-dialog.css +2 -2
  3. package/src/components/button-group.css +6 -6
  4. package/src/components/button.css +3 -3
  5. package/src/components/checkbox-group.css +1 -1
  6. package/src/components/checkbox.css +3 -3
  7. package/src/components/dialog.css +3 -2
  8. package/src/components/label.css +1 -0
  9. package/src/components/tabs.css +22 -26
  10. package/src/styles.css +0 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fea-ui/styles",
3
- "version": "0.0.0-canary.6",
3
+ "version": "0.0.0",
4
4
  "description": "FeaUI Styles - Tailwind CSS styles for FeaUI components",
5
5
  "keywords": [
6
6
  "fea-ui",
package/src/components/alert-dialog.css CHANGED
@@ -11,9 +11,9 @@
11
11
  }
12
12
 
13
13
  .alert-dialog__popup {
14
- @apply bg-overlay rounded border p-6 shadow text-overlay-foreground;
14
+ @apply bg-surface rounded border p-6 shadow text-surface-foreground;
15
15
 
16
- @apply w-full max-w-lg;
16
+ @apply w-96 max-w-[calc(100vw-1rem)];
17
17
 
18
18
  @apply fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
19
19
 
package/src/components/button-group.css CHANGED
@@ -5,12 +5,12 @@
5
5
 
6
6
  .button-group .button {
7
7
  @apply rounded-none;
8
- }
9
8
 
10
- .button-group .button:first-child {
11
- @apply rounded-l;
12
- }
9
+ &:first-child {
10
+ @apply rounded-l;
11
+ }
13
12
 
14
- .button-group .button:last-child {
15
- @apply rounded-r;
13
+ &:last-child {
14
+ @apply rounded-r;
15
+ }
16
16
  }
package/src/components/button.css CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  @apply inline-flex items-center justify-center gap-2 rounded border font-medium text-nowrap;
6
6
 
7
- @apply w-fit px-4 py-4;
7
+ @apply w-fit px-3 py-2;
8
8
 
9
9
  @apply transition-[scale,background-color] motion-reduce:transition-none;
10
10
 
@@ -54,7 +54,7 @@
54
54
  }
55
55
 
56
56
  .button--outline {
57
- @apply bg-background text-foreground hover-safe:bg-secondary/10;
57
+ @apply bg-background text-foreground hover-safe:bg-secondary;
58
58
  }
59
59
 
60
60
  .button--danger {
@@ -62,7 +62,7 @@
62
62
  }
63
63
 
64
64
  .button--ghost {
65
- @apply border-0 bg-transparent text-foreground hover-safe:bg-secondary/10;
65
+ @apply border-0 bg-transparent text-foreground hover-safe:bg-secondary;
66
66
  }
67
67
 
68
68
  .button--icon-only {
package/src/components/checkbox-group.css CHANGED
@@ -1,4 +1,4 @@
1
1
  /** Base Styling */
2
2
  .checkbox-group {
3
- @apply flex flex-col;
3
+ @apply flex flex-col gap-4;
4
4
  }
package/src/components/checkbox.css CHANGED
@@ -25,8 +25,8 @@
25
25
  &[data-unchecked] {
26
26
  @apply hidden;
27
27
  }
28
- }
29
28
 
30
- .checkbox__icon {
31
- @apply size-4;
29
+ & svg {
30
+ @apply size-4;
31
+ }
32
32
  }
package/src/components/dialog.css CHANGED
@@ -1,4 +1,5 @@
1
1
  /** Base Styling */
2
+
2
3
  .dialog__backdrop {
3
4
  @apply fixed inset-0 bg-black/50 opacity-20 backdrop-blur-sm;
4
5
 
@@ -11,9 +12,9 @@
11
12
  }
12
13
 
13
14
  .dialog__popup {
14
- @apply bg-overlay text-overlay-foreground rounded border p-6 shadow;
15
+ @apply bg-surface text-surface-foreground rounded border p-6 shadow;
15
16
 
16
- @apply w-full max-w-lg;
17
+ @apply w-96 max-w-[calc(100vw-1rem)];
17
18
 
18
19
  @apply fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
19
20
 
package/src/components/label.css CHANGED
@@ -1,5 +1,6 @@
1
1
  /** Base Styling */
2
2
  .label {
3
+ @apply inline-flex items-center gap-2;
3
4
  @apply font-medium text-foreground leading-none;
4
5
  }
5
6
 
package/src/components/tabs.css CHANGED
@@ -1,49 +1,45 @@
1
- /** Base Styling */
2
1
  .tabs {
3
- @apply bg-surface/50 text-secondary-foreground rounded border;
2
+ @apply flex flex-col gap-4;
4
3
  }
5
4
 
6
5
  .tabs__list {
7
- @apply bg-surface relative z-0 flex gap-1 rounded-t border-b px-1;
6
+ @apply flex items-center;
8
7
  }
9
8
 
10
9
  .tabs__tab {
11
- @apply m-0 flex appearance-none items-center justify-center border-0 bg-transparent outline-none;
12
- @apply text-muted-foreground break-keep whitespace-nowrap select-none hover-safe:text-foreground;
13
- @apply h-8 px-2 py-0;
10
+ @apply cursor-pointer;
14
11
 
15
- &[data-state="active"] {
16
- @apply text-foreground;
17
- }
12
+ @apply bg-secondary text-secondary-foreground hover-safe:bg-secondary/80;
13
+ @apply inline-flex items-center justify-center;
14
+ @apply h-10 px-3 py-2 w-fit;
15
+
16
+ @apply transition-colors motion-reduce:transition-none;
18
17
 
19
- @media (hover: hover) {
20
- &:hover {
21
- @apply text-foreground;
22
- }
18
+ &[data-active] {
19
+ @apply bg-primary text-primary-foreground hover-safe:bg-primary/90;
23
20
  }
24
21
 
25
22
  &:focus-visible {
26
- @apply relative;
27
-
28
- &::before {
29
- content: "";
30
- @apply outline-primary absolute inset-x-0 inset-y-1 rounded outline-2 -outline-offset-1;
31
- }
23
+ @apply status-focused;
32
24
  }
33
- }
34
25
 
35
- .tabs__indicator {
36
- width: var(--active-tab-width);
26
+ &:first-of-type {
27
+ @apply rounded-l;
28
+ }
37
29
 
38
- translate: var(--active-tab-left) -50%;
39
- @apply bg-primary absolute bottom-0 left-0 -z-10 h-px;
40
- @apply transition-[translate,width] motion-reduce:transition-none;
30
+ &:last-of-type {
31
+ @apply rounded-r;
32
+ }
41
33
  }
42
34
 
43
35
  .tabs__panel {
44
- @apply relative flex h-32 items-center justify-center outline-none;
36
+ @apply flex;
45
37
 
46
38
  &:focus-visible {
47
39
  @apply status-focused;
48
40
  }
41
+
42
+ &[hidden] {
43
+ @apply hidden;
44
+ }
49
45
  }
package/src/styles.css CHANGED
@@ -28,7 +28,6 @@
28
28
 
29
29
  --border: oklch(0.922 0 0);
30
30
  --ring: oklch(62% 0.18 250);
31
- --link: oklch(0.205 0 0);
32
31
  }
33
32
 
34
33
  .dark {
@@ -55,7 +54,6 @@
55
54
 
56
55
  --border: oklch(1 0 0 / 10%);
57
56
  --ring: oklch(62% 0.18 250);
58
- --link: oklch(0.922 0 0);
59
57
  }
60
58
 
61
59
  @theme inline {
@@ -84,7 +82,6 @@
84
82
 
85
83
  --color-border: var(--border);
86
84
  --color-ring: var(--ring);
87
- --color-link: var(--link);
88
85
  }
89
86
 
90
87
  @utility status-focused {