@basis-ng/styles 0.0.1-alpha.190 → 0.0.1-alpha.191

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/components/tabs.css +37 -47
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@basis-ng/styles",
3
- "version": "0.0.1-alpha.190",
3
+ "version": "0.0.1-alpha.191",
4
4
  "description": "CSS foundation for @basis-ng/primitives components",
5
5
  "main": "src/index.css",
6
6
  "exports": {
package/src/components/tabs.css CHANGED
@@ -1,37 +1,38 @@
1
1
  b-tabs {
2
2
  /* Base container */
3
- @apply flex items-center;
4
- /* Container background only - no inset ring or shadow here; outlined effect is for selected tabs */
5
- @apply bg-secondary/50 text-secondary-foreground;
6
- @apply dark:bg-secondary-dark/30 dark:text-secondary-foreground-dark;
3
+ @apply inline-flex items-center transition-all duration-300;
7
4
 
8
- /* Base md by default */
9
- /* align container height with buttons/inputs */
10
- @apply px-1 py-0 text-sm h-8 rounded-size-md gap-1;
5
+ /* Default Size: md */
6
+ @apply gap-1.5;
11
7
 
12
8
  /* Individual tab styling */
13
9
  b-tab {
14
- @apply flex items-center justify-center cursor-pointer transition-colors duration-150;
15
- /* inner tabs slightly smaller than the container (one size down) */
16
- @apply px-2.5 py-0 text-sm h-6 rounded-size-sm gap-1.5;
10
+ /* Base Tab Settings */
11
+ @apply flex items-center justify-center gap-2 cursor-pointer select-none outline-none font-medium border transition-colors duration-200 ease-out;
17
12
 
18
- /* Selected state */
19
- &[aria-selected='true'] {
20
- /* Highlight selected tab by using the background surface color so it stands out from the secondary container */
21
- @apply bg-background text-secondary-foreground inset-ring-1 inset-ring-ring shadow-xs;
22
- @apply dark:bg-background-dark/50 dark:text-secondary-foreground-dark dark:inset-ring-ring-dark shadow-xs;
23
- }
13
+ /* Default size md */
14
+ @apply px-3.5 py-1 text-[14px] h-8 rounded-size-sm;
15
+
16
+ /* Default (Unselected) State */
17
+ @apply bg-transparent text-neutral-500 border-ring/80;
18
+ @apply dark:text-neutral-400 dark:border-white/10;
24
19
 
25
20
  /* Hover state (not selected) */
26
21
  &:hover:not([aria-selected='true']) {
27
- @apply bg-secondary/10;
28
- @apply dark:bg-secondary-dark/40;
22
+ @apply bg-secondary/50 text-neutral-700 border-ring/80;
23
+ @apply dark:bg-white/[0.03] dark:text-neutral-200 dark:border-white/10;
24
+ }
25
+
26
+ /* Selected state */
27
+ &[aria-selected='true'] {
28
+ @apply bg-secondary text-font border-ring shadow-[0_1px_2px_rgba(0,0,0,0.05)];
29
+ @apply dark:bg-white/10 dark:text-font-dark dark:border-white/10;
29
30
  }
30
31
 
31
32
  /* Focus state */
32
- &:focus-visible {
33
- @apply outline-2 outline-offset-2 outline-primary;
34
- @apply dark:outline-primary-dark;
33
+ &.cdk-keyboard-focused {
34
+ @apply ring-2 ring-primary ring-offset-1;
35
+ @apply dark:ring-primary-dark dark:ring-offset-background-dark;
35
36
  }
36
37
 
37
38
  /* Disabled state */
@@ -42,53 +43,42 @@ b-tabs {
42
43
 
43
44
  /* Size variants */
44
45
  &.b-size-sm {
45
- @apply px-0.5 py-0 text-xs h-6 rounded-size-sm gap-0.5;
46
-
47
- /* Make inner tabs slightly smaller in the small variant to avoid overflow */
46
+ @apply gap-1;
48
47
  b-tab {
49
- @apply px-1.5 py-0 text-xs h-5 rounded-size-sm gap-1;
50
- box-sizing: border-box;
48
+ @apply px-2.5 py-0.5 text-xs h-7 gap-1.5 rounded-size-sm;
51
49
  }
52
50
  }
53
51
 
54
52
  &.b-size-md {
55
- @apply px-1 py-0 text-sm h-8 rounded-size-md gap-1;
56
-
53
+ @apply gap-1.5;
57
54
  b-tab {
58
- @apply px-2.5 py-0 text-sm h-6 rounded-size-sm gap-1.5;
55
+ @apply px-3.5 py-1 text-[14px] h-8 gap-2 rounded-size-sm;
59
56
  }
60
57
  }
61
58
 
62
59
  &.b-size-lg {
63
- @apply px-1 py-0 text-base h-10 rounded-size-lg gap-1;
64
-
60
+ @apply gap-2;
65
61
  b-tab {
66
- @apply px-3 py-0 text-base h-8 rounded-size-md gap-2;
62
+ @apply px-4 py-1.5 text-[15px] h-10 gap-2.5 rounded-size-md;
67
63
  }
68
64
  }
69
65
 
70
- /* Rounded full - extra horizontal padding */
66
+ /* Rounded full variant */
71
67
  &.b-rounded-full {
72
- @apply px-1;
73
-
74
68
  b-tab {
75
- @apply px-4 rounded-size-md;
69
+ @apply rounded-full;
76
70
  }
77
- }
78
-
79
- &.b-size-sm.b-rounded-full {
80
- @apply px-1;
81
71
 
82
- b-tab {
83
- @apply px-3 rounded-size-sm;
72
+ &.b-size-sm b-tab {
73
+ @apply px-3.5;
84
74
  }
85
- }
86
75
 
87
- &.b-size-lg.b-rounded-full {
88
- @apply px-1;
76
+ &.b-size-md b-tab {
77
+ @apply px-4;
78
+ }
89
79
 
90
- b-tab {
91
- @apply px-5 rounded-size-lg;
80
+ &.b-size-lg b-tab {
81
+ @apply px-6;
92
82
  }
93
83
  }
94
84
  }