@basis-ng/styles 0.0.1-alpha.162 → 0.0.1-alpha.164

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 (5) hide show
  1. package/package.json +1 -1
  2. package/src/components/badge.css +12 -6
  3. package/src/components/button.css +6 -6
  4. package/src/components/menu.css +10 -10
  5. package/src/index.css +0 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@basis-ng/styles",
3
- "version": "0.0.1-alpha.162",
3
+ "version": "0.0.1-alpha.164",
4
4
  "description": "CSS foundation for @basis-ng/primitives components",
5
5
  "main": "src/index.css",
6
6
  "exports": {
package/src/components/badge.css CHANGED
@@ -1,27 +1,33 @@
1
1
  span[b-badge] {
2
2
  /* Base */
3
3
  @apply inline-flex items-center gap-2 px-2 py-1 font-medium text-sm rounded-size-md;
4
- @apply bg-primary text-primary-foreground dark:bg-primary-dark dark:text-primary-foreground-dark;
4
+ @apply bg-primary text-primary-foreground;
5
+ @apply dark:bg-primary-dark dark:text-primary-foreground-dark;
5
6
 
6
7
  /* Variants */
7
8
  &.b-variant-primary {
8
- @apply bg-primary text-primary-foreground dark:bg-primary-dark dark:text-primary-foreground-dark;
9
+ @apply bg-primary text-primary-foreground;
10
+ @apply dark:bg-primary-dark dark:text-primary-foreground-dark;
9
11
  }
10
12
 
11
13
  &.b-variant-secondary {
12
- @apply bg-secondary text-secondary-foreground dark:bg-secondary-dark dark:text-secondary-foreground-dark;
14
+ @apply bg-secondary text-secondary-foreground;
15
+ @apply dark:bg-secondary-dark dark:text-secondary-foreground-dark;
13
16
  }
14
17
 
15
18
  &.b-variant-ghost {
16
- @apply bg-transparent text-secondary-foreground dark:text-secondary-foreground-dark;
19
+ @apply bg-transparent text-secondary-dark;
20
+ @apply dark:text-secondary;
17
21
  }
18
22
 
19
23
  &.b-variant-outlined {
20
- @apply bg-transparent inset-ring-1 inset-ring-ring text-secondary-foreground dark:inset-ring-ring-dark dark:text-secondary-foreground-dark;
24
+ @apply bg-secondary/10 text-secondary-foreground inset-ring-1 inset-ring-ring shadow-xs;
25
+ @apply dark:bg-secondary-dark/40 dark:text-secondary-foreground-dark dark:inset-ring-ring-dark shadow-xs;
21
26
  }
22
27
 
23
28
  &.b-variant-destructive {
24
- @apply bg-destructive text-destructive-foreground dark:bg-destructive-dark dark:text-destructive-foreground-dark;
29
+ @apply bg-destructive text-destructive-foreground inset-ring-1 inset-ring-destructive;
30
+ @apply dark:bg-destructive-dark dark:text-destructive-foreground-dark dark:inset-ring-destructive-dark;
25
31
  }
26
32
 
27
33
  /* Sizes */
package/src/components/button.css CHANGED
@@ -16,16 +16,16 @@ button[b-button] {
16
16
  @apply dark:bg-primary-dark dark:text-primary-foreground-dark dark:hover:bg-primary-dark/80;
17
17
  }
18
18
  &.b-variant-secondary {
19
- @apply bg-secondary/10 text-secondary-foreground hover:bg-secondary/50;
20
- @apply dark:bg-secondary-dark/50 dark:text-secondary-foreground-dark dark:hover:bg-secondary-dark/50;
19
+ @apply bg-secondary text-secondary-foreground hover:bg-secondary/50;
20
+ @apply dark:bg-secondary-dark dark:text-secondary-foreground-dark dark:hover:bg-secondary-dark/50;
21
21
  }
22
22
  &.b-variant-ghost {
23
- @apply bg-transparent text-secondary-foreground hover:bg-secondary/50;
24
- @apply dark:text-secondary-foreground-dark dark:hover:bg-secondary-dark/50;
23
+ @apply bg-transparent text-secondary-dark hover:bg-secondary;
24
+ @apply dark:text-secondary dark:hover:bg-secondary-dark;
25
25
  }
26
26
  &.b-variant-outlined {
27
- @apply bg-transparent text-secondary-foreground border border-secondary/20 hover:bg-secondary/10 shadow-xs;
28
- @apply dark:bg-transparent dark:text-secondary-foreground-dark dark:border-secondary-dark/30 dark:hover:bg-secondary-dark/10 shadow-xs;
27
+ @apply bg-secondary/10 text-secondary-foreground inset-ring-1 inset-ring-ring shadow-xs;
28
+ @apply dark:bg-secondary-dark/40 dark:text-secondary-foreground-dark dark:inset-ring-ring-dark shadow-xs;
29
29
  }
30
30
  &.b-variant-destructive {
31
31
  @apply bg-destructive text-destructive-foreground inset-ring-1 inset-ring-destructive hover:bg-destructive/90 hover:inset-ring-destructive/80;
package/src/components/menu.css CHANGED
@@ -19,11 +19,11 @@ b-menu {
19
19
  button[b-menu-item],
20
20
  button[b-menu-item-radio],
21
21
  button[b-menu-item-checkbox] {
22
- @apply px-3 py-0 text-sm h-8 rounded-size-md gap-1.5;
22
+ @apply px-3 py-0 text-sm h-8 rounded-size-sm gap-1.5;
23
23
 
24
24
  &.b-squared {
25
25
  aspect-ratio: 1 / 1;
26
- @apply w-8 min-w-8 h-8 min-h-8 p-0! flex items-center justify-center text-center;
26
+ @apply w-10 min-w-10 h-10 min-h-10 !p-0 flex items-center justify-center text-center;
27
27
  }
28
28
  }
29
29
 
@@ -45,11 +45,11 @@ b-menu {
45
45
  button[b-menu-item],
46
46
  button[b-menu-item-radio],
47
47
  button[b-menu-item-checkbox] {
48
- @apply px-2 py-0 text-xs h-6 rounded-size-sm gap-1;
48
+ @apply px-2 py-0 text-xs h-6 rounded-size-xs gap-1;
49
49
 
50
50
  &.b-squared {
51
51
  aspect-ratio: 1 / 1;
52
- @apply w-6 min-w-6 h-6 min-h-6 p-0! flex items-center justify-center text-center;
52
+ @apply w-8 min-w-8 h-8 min-h-8 !p-0 flex items-center justify-center text-center;
53
53
  }
54
54
  }
55
55
  }
@@ -72,11 +72,11 @@ b-menu {
72
72
  button[b-menu-item],
73
73
  button[b-menu-item-radio],
74
74
  button[b-menu-item-checkbox] {
75
- @apply px-3 py-0 text-sm h-8 rounded-size-md gap-1.5;
75
+ @apply px-3 py-0 text-sm h-8 rounded-size-sm gap-1.5;
76
76
 
77
77
  &.b-squared {
78
78
  aspect-ratio: 1 / 1;
79
- @apply w-8 min-w-8 h-8 min-h-8 p-0! flex items-center justify-center text-center;
79
+ @apply w-10 min-w-10 h-10 min-h-10 !p-0 flex items-center justify-center text-center;
80
80
  }
81
81
  }
82
82
  }
@@ -99,11 +99,11 @@ b-menu {
99
99
  button[b-menu-item],
100
100
  button[b-menu-item-radio],
101
101
  button[b-menu-item-checkbox] {
102
- @apply px-4 py-0 text-base h-10 rounded-size-lg gap-2;
102
+ @apply px-4 py-0 text-base h-10 rounded-size-md gap-2;
103
103
 
104
104
  &.b-squared {
105
105
  aspect-ratio: 1 / 1;
106
- @apply w-10 min-w-10 h-10 min-h-10 p-0! flex items-center justify-center text-center;
106
+ @apply w-12 min-w-12 h-12 min-h-12 !p-0 flex items-center justify-center text-center;
107
107
  }
108
108
  }
109
109
  }
@@ -142,12 +142,12 @@ b-menu {
142
142
  @apply flex flex-col;
143
143
 
144
144
  &:not(:first-child) {
145
- @apply border-t border-secondary;
145
+ @apply border-t-1 border-secondary;
146
146
  @apply dark:border-secondary-dark;
147
147
  }
148
148
 
149
149
  &:not(:last-child) {
150
- @apply border-b border-secondary;
150
+ @apply border-b-1 border-secondary;
151
151
  @apply dark:border-secondary-dark;
152
152
  }
153
153
  }
package/src/index.css CHANGED
@@ -50,7 +50,6 @@
50
50
 
51
51
  @import './components/alert.css';
52
52
  @import './components/badge.css';
53
- @import './components/badge.css';
54
53
  @import './components/drawer.css';
55
54
  @import './components/button-group.css';
56
55
  @import './components/button.css';