@splendidlabz/styles 3.0.0-alpha.0 → 3.0.0

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/package.json +2 -2
  2. package/src/generic/anchors-and-buttons.css +4 -0
  3. package/src/tools/pigment.css +19 -10
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@splendidlabz/styles",
3
- "version": "3.0.0-alpha.0",
3
+ "version": "3.0.0",
4
4
  "description": "",
5
5
  "author": "Zell Liew <zellwk@gmail.com>",
6
6
  "files": [
@@ -29,7 +29,7 @@
29
29
  "@splendidlabz/utils": "*"
30
30
  },
31
31
  "devDependencies": {
32
- "@splendidlabz/stylelint-config": "3.0.0-alpha.0",
32
+ "@splendidlabz/stylelint-config": "3.0.0",
33
33
  "@tailwindcss/cli": "^4.0.9",
34
34
  "lightningcss-cli": "^1.29.1",
35
35
  "tailwindcss": "^4.0.9",
package/src/generic/anchors-and-buttons.css CHANGED
@@ -37,6 +37,10 @@
37
37
  @apply pigment;
38
38
  }
39
39
 
40
+ a:where(:not(.button)) {
41
+ --border-color: transparent;
42
+ }
43
+
40
44
  button {
41
45
  @apply button;
42
46
  }
package/src/tools/pigment.css CHANGED
@@ -118,17 +118,23 @@ Usage with the Fill System
118
118
 
119
119
  @utility pigment-active-scaffold {
120
120
  &:active {
121
- border-color: var(--border-active-color,);
122
- color: var(--text-active-color);
123
- background-color: var(--bg-active-color);
121
+ border-color: var(--border-active-color, var(--border-color));
122
+ color: var(--text-active-color, var(--text-color));
123
+ background-color: var(--bg-active-color, var(--bg-color));
124
124
  }
125
125
  }
126
126
 
127
127
  @utility pigment-active-svg-scaffold {
128
128
  &:active {
129
129
  :where(svg path) {
130
- fill: var(--fill-active-color, var(--text-active-color));
131
- stroke: var(--stroke-active-color, var(--text-active-color));
130
+ fill: var(
131
+ --fill-active-color,
132
+ var(--text-active-color, var(--fill-color, var(--text-color)))
133
+ );
134
+ stroke: var(
135
+ --stroke-active-color,
136
+ var(--text-active-color, var(--stroke-color, var(--text-color)))
137
+ );
132
138
  }
133
139
  }
134
140
  }
@@ -139,9 +145,9 @@ Usage with the Fill System
139
145
  &[aria-current],
140
146
  &[aria-selected],
141
147
  &[aria-expanded='true'] {
142
- border-color: var(--border-selected-color);
143
- color: var(--text-selected-color);
144
- background-color: var(--bg-selected-color);
148
+ border-color: var(--border-selected-color, var(--border-color));
149
+ color: var(--text-selected-color, var(--text-color));
150
+ background-color: var(--bg-selected-color, var(--bg-color));
145
151
  }
146
152
  }
147
153
 
@@ -152,8 +158,11 @@ Usage with the Fill System
152
158
  &[aria-selected],
153
159
  &[aria-expanded='true'] {
154
160
  :where(svg path) {
155
- fill: var(--fill-selected-color);
156
- stroke: var(--stroke-selected-color);
161
+ fill: var(--fill-selected-color, var(--fill-color, var(--text-color)));
162
+ stroke: var(
163
+ --stroke-selected-color,
164
+ var(--stroke-color, var(--text-color))
165
+ );
157
166
  }
158
167
  }
159
168
  }