@thinkpixellab-public/px-vue 4.1.5 → 4.1.6

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/components/PxColorPaletteButton.vue +2 -1
  2. package/components/PxFit.vue +3 -1
  3. package/components/PxResizer.vue +2 -1
  4. package/components/PxToggleButton.vue +6 -4
  5. package/package.json +2 -1
package/components/PxColorPaletteButton.vue CHANGED
@@ -36,6 +36,7 @@ export default {
36
36
  </script>
37
37
 
38
38
  <style lang="scss">
39
+ @use 'sass:string';
39
40
  @use '../styles/px.scss' as *;
40
41
 
41
42
  @function color-wheel-gradient($count, $blend: true, $sat: 100%, $light: 50%) {
@@ -53,7 +54,7 @@ export default {
53
54
  }
54
55
  }
55
56
 
56
- @return unquote($grad);
57
+ @return string.unquote($grad);
57
58
  }
58
59
 
59
60
  .px-color-palette-button {
package/components/PxFit.vue CHANGED
@@ -252,7 +252,9 @@ export default {
252
252
  grid-area: 1 / 1;
253
253
  }
254
254
 
255
- @include transition(opacity, $dur: 100ms);
255
+ & {
256
+ @include transition(opacity, $dur: 100ms);
257
+ }
256
258
  }
257
259
 
258
260
  &--fitting & {
package/components/PxResizer.vue CHANGED
@@ -141,6 +141,7 @@ export default {
141
141
 
142
142
  <style lang="scss">
143
143
  @use '../styles/px.scss' as *;
144
+ @use 'sass:color';
144
145
 
145
146
  .px-resizer {
146
147
  position: relative;
@@ -173,7 +174,7 @@ export default {
173
174
  &__resize-y {
174
175
  color: accent();
175
176
  &:hover {
176
- color: darken(accent(), 10%);
177
+ color: color.adjust(accent(), $lightness: -10%);
177
178
  }
178
179
  &:active {
179
180
  opacity: 0.5;
package/components/PxToggleButton.vue CHANGED
@@ -206,7 +206,9 @@ export default {
206
206
  @include button();
207
207
  }
208
208
 
209
- gap: var(--px-toggle-button-gap);
209
+ & {
210
+ gap: var(--px-toggle-button-gap);
211
+ }
210
212
 
211
213
  &__icon,
212
214
  &__label {
@@ -256,17 +258,17 @@ export default {
256
258
 
257
259
  // default checked state
258
260
  &--checked.px-button--default:not(:disabled) {
259
- background-color: color(select);
261
+ background-color: clr(select);
260
262
  box-shadow: none;
261
263
  &:hover {
262
- background-color: color(select);
264
+ background-color: clr(select);
263
265
  box-shadow: none;
264
266
  }
265
267
  }
266
268
 
267
269
  // outline checked state
268
270
  &--checked.px-button--outline:not(:disabled) {
269
- background-color: color(accent, 0.15);
271
+ background-color: clr(accent, 0.15);
270
272
  }
271
273
 
272
274
  &--icon & {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@thinkpixellab-public/px-vue",
3
- "version": "4.1.5",
3
+ "version": "4.1.6",
4
4
  "description": "General purpose Vue components and helpers that can be used across projects.",
5
5
  "author": {
6
6
  "name": "Pixel Lab"
@@ -41,6 +41,7 @@
41
41
  "devDependencies": {
42
42
  "@babel/core": "^7.26.7",
43
43
  "@chromatic-com/storybook": "^3.2.4",
44
+ "@nuxt/kit": "^3.15.4",
44
45
  "@rushstack/eslint-patch": "^1.10.5",
45
46
  "@storybook/addon-essentials": "^8.5.3",
46
47
  "@storybook/addon-interactions": "^8.5.3",