@autoguru/overdrive 4.45.0 → 4.45.1

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/dist/components/Switch/Switch.css.d.ts.map +1 -1
  2. package/dist/components/Switch/Switch.css.js +64 -33
  3. package/package.json +9 -9
package/dist/components/Switch/Switch.css.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Switch.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Switch/Switch.css.ts"],"names":[],"mappings":"AAYA,eAAO,MAAM,IAAI,QAEf,CAAC;AAEH,eAAO,MAAM,MAAM,QAgBjB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAEnB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAGnB,CAAC;AAKH,eAAO,MAAM,MAAM,sCAwBjB,CAAC;AAEH,eAAO,MAAM,UAAU,QAGrB,CAAC"}
1
+ {"version":3,"file":"Switch.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Switch/Switch.css.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,IAAI,QAMf,CAAC;AAEH,eAAO,MAAM,MAAM,QAqBjB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAMnB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAOnB,CAAC;AAKH,eAAO,MAAM,MAAM,sCAkCjB,CAAC;AAEH,eAAO,MAAM,UAAU,QAOrB,CAAC"}
package/dist/components/Switch/Switch.css.js CHANGED
@@ -4,6 +4,7 @@ import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
4
4
  __vanilla_filescope__.setFileScope("lib/components/Switch/Switch.css.ts", "@autoguru/overdrive");
5
5
  import { style, styleVariants } from '@vanilla-extract/css';
6
6
  import { focusOutlineStyle } from "../../styles/focusOutline.css.js";
7
+ import { cssLayerComponent } from "../../styles/layers.css.js";
7
8
  import { overdriveTokens as vars } from "../../themes/theme.css.js";
8
9
  const colorAccent = vars.colours.foreground.body;
9
10
  const colorContrast = vars.colours.background.body;
@@ -12,58 +13,88 @@ const colorLight = vars.colours.background.light;
12
13
  const height = vars.space['6'];
13
14
  const handleSize = '24px';
14
15
  export const base = style({
15
- display: 'inline-block'
16
+ '@layer': {
17
+ [cssLayerComponent]: {
18
+ display: 'inline-block'
19
+ }
20
+ }
16
21
  }, "base");
17
22
  export const toggle = style([{
18
- backgroundColor: colorMid,
19
- borderRadius: vars.border.radius.pill,
20
- cursor: 'pointer',
21
- height: height,
22
- padding: '3px 4px',
23
- transition: 'background-color 0.2s cubic-bezier(0, 0, 0.2, 1) 0s',
24
- width: `calc(2 * ${height} - 2px)`,
25
- selectors: {
26
- '&:not([data-disabled]):hover': {
27
- backgroundColor: colorAccent
23
+ '@layer': {
24
+ [cssLayerComponent]: {
25
+ backgroundColor: colorMid,
26
+ borderRadius: vars.border.radius.pill,
27
+ cursor: 'pointer',
28
+ height: height,
29
+ padding: '3px 4px',
30
+ transition: 'background-color 0.2s cubic-bezier(0, 0, 0.2, 1) 0s',
31
+ width: `calc(2 * ${height} - 2px)`,
32
+ selectors: {
33
+ '&:not([data-disabled]):hover': {
34
+ backgroundColor: colorAccent
35
+ }
36
+ }
28
37
  }
29
38
  }
30
39
  }, focusOutlineStyle], "toggle");
31
40
  export const toggleOn = style({
32
- backgroundColor: colorAccent
41
+ '@layer': {
42
+ [cssLayerComponent]: {
43
+ backgroundColor: colorAccent
44
+ }
45
+ }
33
46
  }, "toggleOn");
34
47
  export const disabled = style({
35
- backgroundColor: colorLight,
36
- cursor: 'not-allowed'
48
+ '@layer': {
49
+ [cssLayerComponent]: {
50
+ backgroundColor: colorLight,
51
+ cursor: 'not-allowed'
52
+ }
53
+ }
37
54
  }, "disabled");
38
55
  const handleScale = 'scale(0.95)';
39
56
  const handleTranslate = `translateX(calc(${handleSize} - 4px))`;
40
57
  export const handle = styleVariants({
41
- active: {
42
- selectors: {
43
- [`${toggleOn} &`]: {
44
- transform: handleTranslate
45
- },
46
- [`${toggle}:not([data-disabled]):hover &`]: {
47
- transform: `${handleScale} ${handleTranslate}`
58
+ default: {
59
+ '@layer': {
60
+ [cssLayerComponent]: {
61
+ aspectRatio: '1',
62
+ backgroundColor: colorContrast,
63
+ borderRadius: vars.border.radius.full,
64
+ height: '100%',
65
+ transition: 'transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0s',
66
+ willChange: 'transform',
67
+ selectors: {
68
+ [`${toggle}:not([data-disabled]):hover &`]: {
69
+ transform: handleScale
70
+ }
71
+ }
48
72
  }
49
73
  }
50
74
  },
51
- default: {
52
- aspectRatio: '1',
53
- backgroundColor: colorContrast,
54
- borderRadius: vars.border.radius.full,
55
- height: '100%',
56
- transition: 'transform 0.2s cubic-bezier(0, 0, 0.2, 1) 0s',
57
- willChange: 'transform',
58
- selectors: {
59
- [`${toggle}:not([data-disabled]):hover &`]: {
60
- transform: handleScale
75
+ // active needs to come after default in compiled css
76
+ // eslint-disable-next-line vanilla-extract/alphabetical-order
77
+ active: {
78
+ '@layer': {
79
+ [cssLayerComponent]: {
80
+ selectors: {
81
+ [`${toggleOn} &`]: {
82
+ transform: handleTranslate
83
+ },
84
+ [`${toggle}:not([data-disabled]):hover &`]: {
85
+ transform: `${handleScale} ${handleTranslate}`
86
+ }
87
+ }
61
88
  }
62
89
  }
63
90
  }
64
91
  }, "handle");
65
92
  export const storyLabel = style({
66
- display: 'flex',
67
- gap: vars.space['2']
93
+ '@layer': {
94
+ [cssLayerComponent]: {
95
+ display: 'flex',
96
+ gap: vars.space['2']
97
+ }
98
+ }
68
99
  }, "storyLabel");
69
100
  __vanilla_filescope__.endFileScope();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@autoguru/overdrive",
3
- "version": "4.45.0",
3
+ "version": "4.45.1",
4
4
  "description": "Overdrive is a product component library, and design system for AutoGuru.",
5
5
  "types": "dist/index.d.ts",
6
6
  "main": "dist/index.js",
@@ -63,22 +63,22 @@
63
63
  "@autoguru/icons": "1.8.12",
64
64
  "@autoguru/tsconfig": "1.3.1",
65
65
  "@autoguru/utilities": "^1.3.3",
66
- "@babel/cli": "7.28.0",
67
- "@babel/core": "7.28.0",
66
+ "@babel/cli": "7.28.3",
67
+ "@babel/core": "7.28.3",
68
68
  "@babel/plugin-proposal-class-properties": "7.18.6",
69
69
  "@babel/plugin-proposal-export-default-from": "7.27.1",
70
70
  "@babel/plugin-proposal-nullish-coalescing-operator": "7.18.6",
71
71
  "@babel/plugin-proposal-object-rest-spread": "7.20.7",
72
72
  "@babel/plugin-proposal-optional-chaining": "7.21.0",
73
73
  "@babel/plugin-syntax-dynamic-import": "7.8.3",
74
- "@babel/plugin-transform-classes": "7.28.0",
75
- "@babel/plugin-transform-runtime": "7.28.0",
74
+ "@babel/plugin-transform-classes": "7.28.3",
75
+ "@babel/plugin-transform-runtime": "7.28.3",
76
76
  "@babel/plugin-transform-spread": "7.27.1",
77
77
  "@babel/plugin-transform-strict-mode": "7.27.1",
78
- "@babel/preset-env": "7.28.0",
78
+ "@babel/preset-env": "7.28.3",
79
79
  "@babel/preset-react": "7.27.1",
80
80
  "@babel/preset-typescript": "7.27.1",
81
- "@babel/runtime-corejs3": "7.28.2",
81
+ "@babel/runtime-corejs3": "7.28.3",
82
82
  "@changesets/cli": "2.29.5",
83
83
  "@chromatic-com/storybook": "4.1.0",
84
84
  "@internationalized/date": "3.8.2",
@@ -106,7 +106,7 @@
106
106
  "@vanilla-extract/dynamic": "2.1.5",
107
107
  "@vanilla-extract/recipes": "0.5.7",
108
108
  "@vanilla-extract/sprinkles": "1.6.5",
109
- "@vanilla-extract/vite-plugin": "5.1.0",
109
+ "@vanilla-extract/vite-plugin": "5.1.1",
110
110
  "@vanilla-extract/webpack-plugin": "2.3.22",
111
111
  "@vitest/browser": "3.2.4",
112
112
  "@vitest/coverage-v8": "3.2.4",
@@ -137,7 +137,7 @@
137
137
  "postcss": "8.5.6",
138
138
  "prettier": "3.6.2",
139
139
  "prop-types": "15.8.1",
140
- "rand-seed": "2.1.7",
140
+ "rand-seed": "3.0.0",
141
141
  "react": "19.1.1",
142
142
  "react-aria": "3.41.1",
143
143
  "react-aria-components": "1.10.1",