@mirohq/design-system-base-switch 1.2.12 → 1.2.13
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.
- package/dist/main.js +7 -7
- package/dist/main.js.map +1 -1
- package/dist/module.js +7 -7
- package/dist/module.js.map +1 -1
- package/package.json +1 -1
package/dist/main.js
CHANGED
|
@@ -8,7 +8,7 @@ var React = require('react');
|
|
|
8
8
|
const TRANSITION_TIME = "100ms";
|
|
9
9
|
const StyledThumb = designSystemStitches.styled(designSystemPrimitive.Primitive.span, {
|
|
10
10
|
display: "block",
|
|
11
|
-
backgroundColor: "$background
|
|
11
|
+
backgroundColor: "$switch-control-background",
|
|
12
12
|
borderRadius: "$round",
|
|
13
13
|
width: "100%",
|
|
14
14
|
height: "100%"
|
|
@@ -27,7 +27,7 @@ const styles = {
|
|
|
27
27
|
default: {
|
|
28
28
|
all: "unset",
|
|
29
29
|
boxSizing: "border-box",
|
|
30
|
-
backgroundColor: "$background-
|
|
30
|
+
backgroundColor: "$switch-background-default",
|
|
31
31
|
borderRadius: "$round",
|
|
32
32
|
display: "inline-flex",
|
|
33
33
|
padding: 2,
|
|
@@ -44,7 +44,7 @@ const styles = {
|
|
|
44
44
|
}
|
|
45
45
|
},
|
|
46
46
|
checked: {
|
|
47
|
-
background: "$background-
|
|
47
|
+
background: "$background-interactive-selected",
|
|
48
48
|
["& ".concat(StyledThumbWrapper)]: {
|
|
49
49
|
transform: "translateX(100%)"
|
|
50
50
|
},
|
|
@@ -60,7 +60,7 @@ const styles = {
|
|
|
60
60
|
}
|
|
61
61
|
},
|
|
62
62
|
hovered: {
|
|
63
|
-
backgroundColor: "$background-
|
|
63
|
+
backgroundColor: "$switch-background-hover",
|
|
64
64
|
["& ".concat(StyledThumbWrapper)]: {
|
|
65
65
|
padding: 0
|
|
66
66
|
},
|
|
@@ -69,16 +69,16 @@ const styles = {
|
|
|
69
69
|
}
|
|
70
70
|
},
|
|
71
71
|
checkedHovered: {
|
|
72
|
-
background: "$background-primary-
|
|
72
|
+
background: "$background-interactive-primary-hover",
|
|
73
73
|
"@media (forced-colors: active)": {
|
|
74
74
|
backgroundColor: "Highlight"
|
|
75
75
|
}
|
|
76
76
|
},
|
|
77
77
|
disabled: {
|
|
78
78
|
cursor: "default",
|
|
79
|
-
background: "$background-
|
|
79
|
+
background: "$background-disabled",
|
|
80
80
|
["& ".concat(StyledThumb)]: {
|
|
81
|
-
background: "$icon-
|
|
81
|
+
background: "$icon-on-disabled"
|
|
82
82
|
},
|
|
83
83
|
"@media (forced-colors: active)": {
|
|
84
84
|
borderColor: "GrayText",
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"main.js","sources":["../src/thumb.styled.tsx","../src/switch-styles.ts","../src/thumb.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const TRANSITION_TIME = '100ms'\n\nexport const StyledThumb = styled(Primitive.span, {\n display: 'block',\n backgroundColor: '$background
|
|
1
|
+
{"version":3,"file":"main.js","sources":["../src/thumb.styled.tsx","../src/switch-styles.ts","../src/thumb.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const TRANSITION_TIME = '100ms'\n\nexport const StyledThumb = styled(Primitive.span, {\n display: 'block',\n backgroundColor: '$switch-control-background',\n borderRadius: '$round',\n width: '100%',\n height: '100%',\n})\n\nexport const StyledThumbWrapper = styled(Primitive.span, {\n display: 'block',\n width: '50%',\n height: '100%',\n transition: `transform ${TRANSITION_TIME}, padding ${TRANSITION_TIME}`,\n willChange: 'transform',\n boxSizing: 'border-box',\n padding: 1,\n})\n\nexport type StyledThumbProps = ComponentPropsWithRef<typeof StyledThumb>\n","import {\n StyledThumb,\n StyledThumbWrapper,\n TRANSITION_TIME,\n} from './thumb.styled'\n\nexport const styles = {\n default: {\n all: 'unset',\n boxSizing: 'border-box',\n backgroundColor: '$switch-background-default',\n borderRadius: '$round',\n display: 'inline-flex',\n padding: 2,\n transition: `background ${TRANSITION_TIME}`,\n\n '@media (forced-colors: active)': {\n border: '1px solid ButtonText',\n padding: 1,\n backgroundColor: 'ButtonFace',\n\n [`& ${StyledThumb}`]: {\n borderColor: 'ButtonFace',\n border: '1px solid ButtonText',\n margin: -1,\n },\n },\n },\n checked: {\n background: '$background-interactive-selected',\n\n [`& ${StyledThumbWrapper}`]: {\n transform: 'translateX(100%)',\n },\n [`[dir=\"rtl\"] & ${StyledThumbWrapper}`]: {\n transform: 'translateX(-100%)',\n },\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n borderColor: 'Highlight',\n\n [`& ${StyledThumb}`]: {\n borderColor: 'Highlight',\n },\n },\n },\n hovered: {\n backgroundColor: '$switch-background-hover',\n\n [`& ${StyledThumbWrapper}`]: {\n padding: 0,\n },\n\n '@media (forced-colors: active)': {\n backgroundColor: 'ButtonFace',\n },\n },\n checkedHovered: {\n background: '$background-interactive-primary-hover',\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n },\n },\n disabled: {\n cursor: 'default',\n background: '$background-disabled',\n\n [`& ${StyledThumb}`]: {\n background: '$icon-on-disabled',\n },\n\n '@media (forced-colors: active)': {\n borderColor: 'GrayText',\n\n [`& ${StyledThumb}`]: {\n borderColor: 'GrayText',\n },\n },\n },\n}\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledThumb, StyledThumbWrapper } from './thumb.styled'\nimport type { StyledThumbProps } from './thumb.styled'\n\nexport const Thumb = React.forwardRef<\n ElementRef<typeof StyledThumb>,\n StyledThumbProps\n>((props, forwardRef) => (\n <StyledThumbWrapper>\n <StyledThumb ref={forwardRef} {...props} />\n </StyledThumbWrapper>\n))\n"],"names":["styled","Primitive","jsx"],"mappings":"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"}
|
package/dist/module.js
CHANGED
|
@@ -6,7 +6,7 @@ import React from 'react';
|
|
|
6
6
|
const TRANSITION_TIME = "100ms";
|
|
7
7
|
const StyledThumb = styled(Primitive.span, {
|
|
8
8
|
display: "block",
|
|
9
|
-
backgroundColor: "$background
|
|
9
|
+
backgroundColor: "$switch-control-background",
|
|
10
10
|
borderRadius: "$round",
|
|
11
11
|
width: "100%",
|
|
12
12
|
height: "100%"
|
|
@@ -25,7 +25,7 @@ const styles = {
|
|
|
25
25
|
default: {
|
|
26
26
|
all: "unset",
|
|
27
27
|
boxSizing: "border-box",
|
|
28
|
-
backgroundColor: "$background-
|
|
28
|
+
backgroundColor: "$switch-background-default",
|
|
29
29
|
borderRadius: "$round",
|
|
30
30
|
display: "inline-flex",
|
|
31
31
|
padding: 2,
|
|
@@ -42,7 +42,7 @@ const styles = {
|
|
|
42
42
|
}
|
|
43
43
|
},
|
|
44
44
|
checked: {
|
|
45
|
-
background: "$background-
|
|
45
|
+
background: "$background-interactive-selected",
|
|
46
46
|
["& ".concat(StyledThumbWrapper)]: {
|
|
47
47
|
transform: "translateX(100%)"
|
|
48
48
|
},
|
|
@@ -58,7 +58,7 @@ const styles = {
|
|
|
58
58
|
}
|
|
59
59
|
},
|
|
60
60
|
hovered: {
|
|
61
|
-
backgroundColor: "$background-
|
|
61
|
+
backgroundColor: "$switch-background-hover",
|
|
62
62
|
["& ".concat(StyledThumbWrapper)]: {
|
|
63
63
|
padding: 0
|
|
64
64
|
},
|
|
@@ -67,16 +67,16 @@ const styles = {
|
|
|
67
67
|
}
|
|
68
68
|
},
|
|
69
69
|
checkedHovered: {
|
|
70
|
-
background: "$background-primary-
|
|
70
|
+
background: "$background-interactive-primary-hover",
|
|
71
71
|
"@media (forced-colors: active)": {
|
|
72
72
|
backgroundColor: "Highlight"
|
|
73
73
|
}
|
|
74
74
|
},
|
|
75
75
|
disabled: {
|
|
76
76
|
cursor: "default",
|
|
77
|
-
background: "$background-
|
|
77
|
+
background: "$background-disabled",
|
|
78
78
|
["& ".concat(StyledThumb)]: {
|
|
79
|
-
background: "$icon-
|
|
79
|
+
background: "$icon-on-disabled"
|
|
80
80
|
},
|
|
81
81
|
"@media (forced-colors: active)": {
|
|
82
82
|
borderColor: "GrayText",
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"module.js","sources":["../src/thumb.styled.tsx","../src/switch-styles.ts","../src/thumb.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const TRANSITION_TIME = '100ms'\n\nexport const StyledThumb = styled(Primitive.span, {\n display: 'block',\n backgroundColor: '$background
|
|
1
|
+
{"version":3,"file":"module.js","sources":["../src/thumb.styled.tsx","../src/switch-styles.ts","../src/thumb.tsx"],"sourcesContent":["import type { ComponentPropsWithRef } from 'react'\nimport { Primitive } from '@mirohq/design-system-primitive'\nimport { styled } from '@mirohq/design-system-stitches'\n\nexport const TRANSITION_TIME = '100ms'\n\nexport const StyledThumb = styled(Primitive.span, {\n display: 'block',\n backgroundColor: '$switch-control-background',\n borderRadius: '$round',\n width: '100%',\n height: '100%',\n})\n\nexport const StyledThumbWrapper = styled(Primitive.span, {\n display: 'block',\n width: '50%',\n height: '100%',\n transition: `transform ${TRANSITION_TIME}, padding ${TRANSITION_TIME}`,\n willChange: 'transform',\n boxSizing: 'border-box',\n padding: 1,\n})\n\nexport type StyledThumbProps = ComponentPropsWithRef<typeof StyledThumb>\n","import {\n StyledThumb,\n StyledThumbWrapper,\n TRANSITION_TIME,\n} from './thumb.styled'\n\nexport const styles = {\n default: {\n all: 'unset',\n boxSizing: 'border-box',\n backgroundColor: '$switch-background-default',\n borderRadius: '$round',\n display: 'inline-flex',\n padding: 2,\n transition: `background ${TRANSITION_TIME}`,\n\n '@media (forced-colors: active)': {\n border: '1px solid ButtonText',\n padding: 1,\n backgroundColor: 'ButtonFace',\n\n [`& ${StyledThumb}`]: {\n borderColor: 'ButtonFace',\n border: '1px solid ButtonText',\n margin: -1,\n },\n },\n },\n checked: {\n background: '$background-interactive-selected',\n\n [`& ${StyledThumbWrapper}`]: {\n transform: 'translateX(100%)',\n },\n [`[dir=\"rtl\"] & ${StyledThumbWrapper}`]: {\n transform: 'translateX(-100%)',\n },\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n borderColor: 'Highlight',\n\n [`& ${StyledThumb}`]: {\n borderColor: 'Highlight',\n },\n },\n },\n hovered: {\n backgroundColor: '$switch-background-hover',\n\n [`& ${StyledThumbWrapper}`]: {\n padding: 0,\n },\n\n '@media (forced-colors: active)': {\n backgroundColor: 'ButtonFace',\n },\n },\n checkedHovered: {\n background: '$background-interactive-primary-hover',\n\n '@media (forced-colors: active)': {\n backgroundColor: 'Highlight',\n },\n },\n disabled: {\n cursor: 'default',\n background: '$background-disabled',\n\n [`& ${StyledThumb}`]: {\n background: '$icon-on-disabled',\n },\n\n '@media (forced-colors: active)': {\n borderColor: 'GrayText',\n\n [`& ${StyledThumb}`]: {\n borderColor: 'GrayText',\n },\n },\n },\n}\n","import React from 'react'\nimport type { ElementRef } from 'react'\n\nimport { StyledThumb, StyledThumbWrapper } from './thumb.styled'\nimport type { StyledThumbProps } from './thumb.styled'\n\nexport const Thumb = React.forwardRef<\n ElementRef<typeof StyledThumb>,\n StyledThumbProps\n>((props, forwardRef) => (\n <StyledThumbWrapper>\n <StyledThumb ref={forwardRef} {...props} />\n </StyledThumbWrapper>\n))\n"],"names":[],"mappings":"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"}
|