@robuust-digital/vue-components 2.6.3 → 2.6.4

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 (3) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/core/badge.css +17 -1
  3. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,13 @@
1
+ ## 2.6.4 (20-04-2026)
2
+
3
+ ### Added
4
+
5
+ * `Badge`: Added per-variant border color tokens and made bordered badges default to each variant background color
6
+
7
+ ### Updated
8
+
9
+ * `Badge` docs: Clarified how default and per-variant border color tokens are inherited
10
+
1
11
  ## 2.6.3 (17-04-2026)
2
12
 
3
13
  ### Fixed
package/dist/core/badge.css CHANGED
@@ -7,45 +7,53 @@
7
7
  --rvc-badge-border-radius: calc(infinity * 1px);
8
8
  --rvc-badge-border-width: 0;
9
9
  --rvc-badge-border-style: solid;
10
- --rvc-badge-border-color: transparent;
11
10
  --rvc-badge-font-size: var(--text-base);
12
11
  --rvc-badge-gap: calc(var(--spacing) * 1);
13
12
 
14
13
  /* Default color variables */
15
14
  --rvc-badge-bg-color: #fcffc4;
16
15
  --rvc-badge-color: #576d07;
16
+ --rvc-badge-border-color: var(--rvc-badge-bg-color);
17
17
 
18
18
  /* Gray variant */
19
19
  --rvc-badge-bg-color-gray: var(--color-slate-100);
20
20
  --rvc-badge-color-gray: var(--color-slate-700);
21
+ --rvc-badge-border-color-gray: var(--rvc-badge-bg-color-gray);
21
22
 
22
23
  /* Red variant */
23
24
  --rvc-badge-bg-color-red: var(--color-red-100);
24
25
  --rvc-badge-color-red: var(--color-red-700);
26
+ --rvc-badge-border-color-red: var(--rvc-badge-bg-color-red);
25
27
 
26
28
  /* Yellow variant */
27
29
  --rvc-badge-bg-color-yellow: var(--color-yellow-100);
28
30
  --rvc-badge-color-yellow: var(--color-yellow-700);
31
+ --rvc-badge-border-color-yellow: var(--rvc-badge-bg-color-yellow);
29
32
 
30
33
  /* Green variant */
31
34
  --rvc-badge-bg-color-green: var(--color-green-100);
32
35
  --rvc-badge-color-green: var(--color-green-700);
36
+ --rvc-badge-border-color-green: var(--rvc-badge-bg-color-green);
33
37
 
34
38
  /* Blue variant */
35
39
  --rvc-badge-bg-color-blue: var(--color-blue-100);
36
40
  --rvc-badge-color-blue: var(--color-blue-700);
41
+ --rvc-badge-border-color-blue: var(--rvc-badge-bg-color-blue);
37
42
 
38
43
  /* Violet variant */
39
44
  --rvc-badge-bg-color-violet: var(--color-violet-100);
40
45
  --rvc-badge-color-violet: var(--color-violet-700);
46
+ --rvc-badge-border-color-violet: var(--rvc-badge-bg-color-violet);
41
47
 
42
48
  /* Purple variant */
43
49
  --rvc-badge-bg-color-purple: var(--color-purple-100);
44
50
  --rvc-badge-color-purple: var(--color-purple-700);
51
+ --rvc-badge-border-color-purple: var(--rvc-badge-bg-color-purple);
45
52
 
46
53
  /* Pink variant */
47
54
  --rvc-badge-bg-color-pink: var(--color-pink-100);
48
55
  --rvc-badge-color-pink: var(--color-pink-700);
56
+ --rvc-badge-border-color-pink: var(--rvc-badge-bg-color-pink);
49
57
 
50
58
  /* Small variant */
51
59
  --rvc-badge-height-sm: calc(var(--spacing) * 6);
@@ -78,41 +86,49 @@
78
86
  &.rvc-badge-gray {
79
87
  --rvc-badge-bg-color: var(--rvc-badge-bg-color-gray);
80
88
  --rvc-badge-color: var(--rvc-badge-color-gray);
89
+ --rvc-badge-border-color: var(--rvc-badge-border-color-gray);
81
90
  }
82
91
 
83
92
  &.rvc-badge-red {
84
93
  --rvc-badge-bg-color: var(--rvc-badge-bg-color-red);
85
94
  --rvc-badge-color: var(--rvc-badge-color-red);
95
+ --rvc-badge-border-color: var(--rvc-badge-border-color-red);
86
96
  }
87
97
 
88
98
  &.rvc-badge-yellow {
89
99
  --rvc-badge-bg-color: var(--rvc-badge-bg-color-yellow);
90
100
  --rvc-badge-color: var(--rvc-badge-color-yellow);
101
+ --rvc-badge-border-color: var(--rvc-badge-border-color-yellow);
91
102
  }
92
103
 
93
104
  &.rvc-badge-green {
94
105
  --rvc-badge-bg-color: var(--rvc-badge-bg-color-green);
95
106
  --rvc-badge-color: var(--rvc-badge-color-green);
107
+ --rvc-badge-border-color: var(--rvc-badge-border-color-green);
96
108
  }
97
109
 
98
110
  &.rvc-badge-blue {
99
111
  --rvc-badge-bg-color: var(--rvc-badge-bg-color-blue);
100
112
  --rvc-badge-color: var(--rvc-badge-color-blue);
113
+ --rvc-badge-border-color: var(--rvc-badge-border-color-blue);
101
114
  }
102
115
 
103
116
  &.rvc-badge-violet {
104
117
  --rvc-badge-bg-color: var(--rvc-badge-bg-color-violet);
105
118
  --rvc-badge-color: var(--rvc-badge-color-violet);
119
+ --rvc-badge-border-color: var(--rvc-badge-border-color-violet);
106
120
  }
107
121
 
108
122
  &.rvc-badge-purple {
109
123
  --rvc-badge-bg-color: var(--rvc-badge-bg-color-purple);
110
124
  --rvc-badge-color: var(--rvc-badge-color-purple);
125
+ --rvc-badge-border-color: var(--rvc-badge-border-color-purple);
111
126
  }
112
127
 
113
128
  &.rvc-badge-pink {
114
129
  --rvc-badge-bg-color: var(--rvc-badge-bg-color-pink);
115
130
  --rvc-badge-color: var(--rvc-badge-color-pink);
131
+ --rvc-badge-border-color: var(--rvc-badge-border-color-pink);
116
132
  }
117
133
 
118
134
  &.rvc-badge-sm {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@robuust-digital/vue-components",
3
- "version": "2.6.3",
3
+ "version": "2.6.4",
4
4
  "type": "module",
5
5
  "publishConfig": {
6
6
  "access": "public"