@basis-ng/styles 0.0.1-alpha.174 → 0.0.1-alpha.175

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@basis-ng/styles",
3
- "version": "0.0.1-alpha.174",
3
+ "version": "0.0.1-alpha.175",
4
4
  "description": "CSS foundation for @basis-ng/primitives components",
5
5
  "main": "src/index.css",
6
6
  "exports": {
@@ -1,8 +1,9 @@
1
1
  b-tabs {
2
2
  /* Base container */
3
3
  @apply flex items-center;
4
- @apply bg-secondary/10 text-secondary-foreground inset-ring-1 inset-ring-ring shadow-xs;
5
- @apply dark:bg-secondary-dark/40 dark:text-secondary-foreground-dark dark:inset-ring-ring-dark shadow-xs;
4
+ /* Container background only - no inset ring or shadow here; outlined effect is for selected tabs */
5
+ @apply bg-secondary text-secondary-foreground;
6
+ @apply dark:bg-secondary-dark/30 dark:text-secondary-foreground-dark;
6
7
 
7
8
  /* Base md by default */
8
9
  /* align container height with buttons/inputs */
@@ -16,9 +17,9 @@ b-tabs {
16
17
 
17
18
  /* Selected state */
18
19
  &[aria-selected='true'] {
19
- /* Use the button 'outlined' variant look */
20
- @apply bg-secondary/10 text-secondary-foreground inset-ring-1 inset-ring-ring shadow-xs;
21
- @apply dark:bg-secondary-dark/40 dark:text-secondary-foreground-dark dark:inset-ring-ring-dark shadow-xs;
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;
22
23
  }
23
24
 
24
25
  /* Hover state (not selected) */