@basis-ng/styles 0.0.1-alpha.156 → 0.0.1-alpha.158

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 (7) hide show
  1. package/package.json +1 -1
  2. package/src/components/calendar.css +3 -3
  3. package/src/components/input-group.css +3 -2
  4. package/src/components/input.css +3 -2
  5. package/src/components/select.css +2 -2
  6. package/src/components/tabs.css +2 -2
  7. package/src/components/textarea.css +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@basis-ng/styles",
3
- "version": "0.0.1-alpha.156",
3
+ "version": "0.0.1-alpha.158",
4
4
  "description": "CSS foundation for @basis-ng/primitives components",
5
5
  "main": "src/index.css",
6
6
  "exports": {
package/src/components/calendar.css CHANGED
@@ -11,11 +11,11 @@ b-calendar {
11
11
 
12
12
  .b-calendar-title {
13
13
  @apply font-medium text-sm;
14
- @apply px-3 py-1 rounded-size-sm text-sm font-medium cursor-pointer bg-transparent hover:bg-primary/5 dark:hover:bg-primary-dark/5;
14
+ @apply px-3 py-1 rounded-size-sm text-sm font-medium cursor-pointer bg-transparent hover:bg-secondary/10 dark:hover:bg-secondary-dark/10;
15
15
  }
16
16
 
17
17
  .b-calendar-nav {
18
- @apply inline-flex items-center justify-center w-8 h-8 rounded-size-sm cursor-pointer bg-transparent hover:bg-primary/5 dark:hover:bg-primary-dark/5;
18
+ @apply inline-flex items-center justify-center w-8 h-8 rounded-size-sm cursor-pointer bg-transparent hover:bg-secondary/10 dark:hover:bg-secondary-dark/10;
19
19
  }
20
20
 
21
21
  .b-calendar-title:focus {
@@ -49,7 +49,7 @@ b-calendar {
49
49
 
50
50
  &:not(.b-active):hover,
51
51
  &:not(.b-active):focus {
52
- @apply bg-primary/5 dark:bg-primary-dark/5 cursor-pointer;
52
+ @apply bg-secondary/10 dark:bg-secondary-dark/10 cursor-pointer;
53
53
  }
54
54
  }
55
55
  }
package/src/components/input-group.css CHANGED
@@ -1,8 +1,8 @@
1
1
  b-input-group {
2
2
  /* Base */
3
3
  @apply flex overflow-hidden items-center;
4
- @apply bg-primary/5 text-secondary-foreground inset-ring-1 inset-ring-primary/20 shadow-xs;
5
- @apply dark:bg-primary-dark/5 dark:text-secondary-foreground-dark dark:inset-ring-primary-dark/30;
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;
6
6
 
7
7
  /* Base md by default */
8
8
  @apply px-2.5 py-0 text-sm h-8 rounded-size-md gap-1.5;
@@ -32,6 +32,7 @@ b-input-group {
32
32
 
33
33
  /* Focus state when any inner input is focused (and not readonly) */
34
34
  &:has(input[b-input]:focus-visible:not(:read-only)) {
35
+ /* Focus outline remains primary for contrast */
35
36
  @apply outline-2 outline-offset-2 outline-primary dark:outline-primary-dark;
36
37
 
37
38
  /* Override outline color if invalid while focused */
package/src/components/input.css CHANGED
@@ -1,8 +1,8 @@
1
1
  /* Input styles — Base / Sizes / States */
2
2
  input[b-input] {
3
3
  /* Base */
4
- @apply bg-primary/5 text-secondary-foreground inset-ring-1 inset-ring-primary/10 shadow-xs;
5
- @apply dark:bg-primary-dark/5 dark:text-secondary-foreground-dark dark:inset-ring-primary-dark/10;
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;
6
6
 
7
7
  /* Base md by default */
8
8
  @apply px-2.5 py-0 text-sm h-8 rounded-size-md;
@@ -11,6 +11,7 @@ input[b-input] {
11
11
  @apply disabled:opacity-50 disabled:cursor-not-allowed;
12
12
 
13
13
  &:focus-visible:not(:read-only) {
14
+ /* Keep primary outline on focus to maintain emphasis */
14
15
  @apply outline-2 outline-offset-4 outline-primary;
15
16
  @apply dark:outline-primary-dark;
16
17
  }
package/src/components/select.css CHANGED
@@ -9,8 +9,8 @@ b-select {
9
9
  @apply px-3 py-0 text-sm h-8 rounded-size-md gap-2;
10
10
 
11
11
  /* Default visual */
12
- @apply bg-secondary/10 text-secondary-foreground inset-ring-1 inset-ring-ring hover:bg-primary/5 shadow-xs;
13
- @apply dark:bg-secondary-dark/40 dark:text-secondary-foreground-dark dark:inset-ring-ring-dark dark:hover:bg-primary-dark/5 shadow-xs;
12
+ @apply bg-secondary/10 text-secondary-foreground inset-ring-1 inset-ring-ring hover:bg-secondary/10 shadow-xs;
13
+ @apply dark:bg-secondary-dark/40 dark:text-secondary-foreground-dark dark:inset-ring-ring-dark dark:hover:bg-secondary-dark/10 shadow-xs;
14
14
 
15
15
  svg {
16
16
  @apply -mx-1;
package/src/components/tabs.css CHANGED
@@ -1,8 +1,8 @@
1
1
  b-tabs {
2
2
  /* Base container */
3
3
  @apply flex items-center;
4
- @apply bg-primary/5 text-secondary-foreground inset-ring-1 inset-ring-primary/10 shadow-xs;
5
- @apply dark:bg-primary-dark/5 dark:text-secondary-foreground-dark dark:inset-ring-primary-dark/10;
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;
6
6
 
7
7
  /* Base md by default */
8
8
  @apply px-1 py-1 text-sm h-auto rounded-size-md gap-1;
package/src/components/textarea.css CHANGED
@@ -1,6 +1,6 @@
1
1
  textarea[b-textarea] {
2
- @apply bg-secondary/10 text-secondary-foreground inset-ring-1 inset-ring-ring hover:bg-primary/5 shadow-xs;
3
- @apply dark:bg-secondary-dark/40 dark:text-secondary-foreground-dark dark:inset-ring-ring-dark dark:hover:bg-primary-dark/5 shadow-xs;
2
+ @apply bg-secondary/10 text-secondary-foreground inset-ring-1 inset-ring-ring hover:bg-secondary/10 shadow-xs;
3
+ @apply dark:bg-secondary-dark/40 dark:text-secondary-foreground-dark dark:inset-ring-ring-dark dark:hover:bg-secondary-dark/10 shadow-xs;
4
4
 
5
5
  /* Base md by default */
6
6
  @apply px-2.5 py-1.5 text-sm rounded-size-md;