@artsy/palette 46.6.0 → 46.7.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.
- package/dist/cjs/elements/Radio/RadioDot.js +1 -1
- package/dist/cjs/elements/Radio/RadioDot.js.map +1 -1
- package/dist/cjs/elements/Radio/tokens.js +10 -10
- package/dist/cjs/elements/Radio/tokens.js.map +1 -1
- package/dist/esm/elements/Radio/RadioDot.js +1 -1
- package/dist/esm/elements/Radio/RadioDot.js.map +1 -1
- package/dist/esm/elements/Radio/tokens.js +10 -10
- package/dist/esm/elements/Radio/tokens.js.map +1 -1
- package/package.json +2 -2
|
@@ -11,7 +11,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
|
|
|
11
11
|
const RadioDot = exports.RadioDot = (0, _styledComponents.default)(_Box.Box).withConfig({
|
|
12
12
|
displayName: "RadioDot",
|
|
13
13
|
componentId: "sc-1m6kyb-0"
|
|
14
|
-
})(["width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background-color 0.25s,border-color 0.25s,color 0.25s;", ";&::after{content:\"\";display:block;width:12px;height:12px;border-radius:50%;transition:background-color 0.25s;background-color:
|
|
14
|
+
})(["width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background-color 0.25s,border-color 0.25s,color 0.25s;", ";&::after{content:\"\";display:block;width:12px;height:12px;border-radius:50%;transition:background-color 0.25s;background-color:var(--dot-color);}"], props => {
|
|
15
15
|
const mode = (() => {
|
|
16
16
|
switch (true) {
|
|
17
17
|
case props.disabled:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioDot.js","names":["_styledComponents","_interopRequireDefault","require","_Box","_tokens","obj","__esModule","default","RadioDot","exports","styled","Box","withConfig","displayName","componentId","props","mode","disabled","RADIO_DOT_STATES","hover","focus","error","selected","resting"],"sources":["../../../../src/elements/Radio/RadioDot.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { Box } from \"../Box\"\nimport { RADIO_DOT_STATES } from \"./tokens\"\n\nexport interface CheckProps {\n disabled?: boolean\n error?: boolean\n hover?: boolean\n focus?: boolean\n selected?: boolean\n}\n\nexport const RadioDot = styled(Box)<CheckProps>`\n width: 100%;\n height: 100%;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: background-color 0.25s, border-color 0.25s, color 0.25s;\n\n ${(props) => {\n const mode = (() => {\n switch (true) {\n case props.disabled:\n return RADIO_DOT_STATES.disabled\n case props.hover:\n return RADIO_DOT_STATES.hover\n case props.focus:\n return RADIO_DOT_STATES.focus\n case props.error:\n return RADIO_DOT_STATES.error\n default:\n return RADIO_DOT_STATES.default\n }\n })()\n\n return props.selected ? mode.selected : mode.resting\n }};\n\n /* Dot */\n &::after {\n content: \"\";\n display: block;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n transition: background-color 0.25s;\n background-color:
|
|
1
|
+
{"version":3,"file":"RadioDot.js","names":["_styledComponents","_interopRequireDefault","require","_Box","_tokens","obj","__esModule","default","RadioDot","exports","styled","Box","withConfig","displayName","componentId","props","mode","disabled","RADIO_DOT_STATES","hover","focus","error","selected","resting"],"sources":["../../../../src/elements/Radio/RadioDot.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { Box } from \"../Box\"\nimport { RADIO_DOT_STATES } from \"./tokens\"\n\nexport interface CheckProps {\n disabled?: boolean\n error?: boolean\n hover?: boolean\n focus?: boolean\n selected?: boolean\n}\n\nexport const RadioDot = styled(Box)<CheckProps>`\n width: 100%;\n height: 100%;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: background-color 0.25s, border-color 0.25s, color 0.25s;\n\n ${(props) => {\n const mode = (() => {\n switch (true) {\n case props.disabled:\n return RADIO_DOT_STATES.disabled\n case props.hover:\n return RADIO_DOT_STATES.hover\n case props.focus:\n return RADIO_DOT_STATES.focus\n case props.error:\n return RADIO_DOT_STATES.error\n default:\n return RADIO_DOT_STATES.default\n }\n })()\n\n return props.selected ? mode.selected : mode.resting\n }};\n\n /* Dot */\n &::after {\n content: \"\";\n display: block;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n transition: background-color 0.25s;\n background-color: var(--dot-color);\n }\n`\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,IAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AAA2C,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAUpC,MAAMG,QAAQ,GAAAC,OAAA,CAAAD,QAAA,GAAG,IAAAE,yBAAM,EAACC,QAAG,CAAC,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+UAU9BC,KAAK,IAAK;EACX,MAAMC,IAAI,GAAG,CAAC,MAAM;IAClB,QAAQ,IAAI;MACV,KAAKD,KAAK,CAACE,QAAQ;QACjB,OAAOC,wBAAgB,CAACD,QAAQ;MAClC,KAAKF,KAAK,CAACI,KAAK;QACd,OAAOD,wBAAgB,CAACC,KAAK;MAC/B,KAAKJ,KAAK,CAACK,KAAK;QACd,OAAOF,wBAAgB,CAACE,KAAK;MAC/B,KAAKL,KAAK,CAACM,KAAK;QACd,OAAOH,wBAAgB,CAACG,KAAK;MAC/B;QACE,OAAOH,wBAAgB,CAACX,OAAO;IAAA;EAErC,CAAC,GAAG;EAEJ,OAAOQ,KAAK,CAACO,QAAQ,GAAGN,IAAI,CAACM,QAAQ,GAAGN,IAAI,CAACO,OAAO;AACtD,CAAC,CAYF"}
|
|
@@ -8,31 +8,31 @@ var _themeGet = require("@styled-system/theme-get");
|
|
|
8
8
|
var _styledComponents = require("styled-components");
|
|
9
9
|
const RADIO_DOT_STATES = exports.RADIO_DOT_STATES = {
|
|
10
10
|
default: {
|
|
11
|
-
resting: (0, _styledComponents.css)(["border:1px solid;color:", ";border-color:", ";"], (0, _themeGet.themeGet)("colors.mono0"), (0, _themeGet.themeGet)("colors.
|
|
12
|
-
selected: (0, _styledComponents.css)(["border:1px solid;color:", ";border-color:", ";background-color:", ";"], (0, _themeGet.themeGet)("colors.mono0"), (0, _themeGet.themeGet)("colors.mono100"), (0, _themeGet.themeGet)("colors.mono100"))
|
|
11
|
+
resting: (0, _styledComponents.css)(["border:1px solid;color:", ";border-color:", ";background-color:", ";"], (0, _themeGet.themeGet)("colors.mono0"), (0, _themeGet.themeGet)("colors.mono60"), (0, _themeGet.themeGet)("colors.mono0")),
|
|
12
|
+
selected: (0, _styledComponents.css)(["border:1px solid;color:", ";border-color:", ";background-color:", ";--dot-color:", ";"], (0, _themeGet.themeGet)("colors.mono0"), (0, _themeGet.themeGet)("colors.mono100"), (0, _themeGet.themeGet)("colors.mono0"), (0, _themeGet.themeGet)("colors.mono100"))
|
|
13
13
|
},
|
|
14
14
|
focus: {
|
|
15
|
-
resting: (0, _styledComponents.css)(["border:1px solid;color:", ";border-color:", ";"], (0, _themeGet.themeGet)("colors.mono0"), (0, _themeGet.themeGet)("colors.mono100")),
|
|
16
|
-
selected: (0, _styledComponents.css)(["border:1px solid;color:", ";border-color:", ";background-color:", ";"], (0, _themeGet.themeGet)("colors.mono0"), (0, _themeGet.themeGet)("colors.mono100"), (0, _themeGet.themeGet)("colors.mono100"))
|
|
15
|
+
resting: (0, _styledComponents.css)(["border:1px solid;color:", ";border-color:", ";background-color:", ";"], (0, _themeGet.themeGet)("colors.mono0"), (0, _themeGet.themeGet)("colors.mono100"), (0, _themeGet.themeGet)("colors.mono0")),
|
|
16
|
+
selected: (0, _styledComponents.css)(["border:1px solid;color:", ";border-color:", ";background-color:", ";--dot-color:", ";"], (0, _themeGet.themeGet)("colors.mono0"), (0, _themeGet.themeGet)("colors.mono100"), (0, _themeGet.themeGet)("colors.mono0"), (0, _themeGet.themeGet)("colors.mono100"))
|
|
17
17
|
},
|
|
18
18
|
disabled: {
|
|
19
19
|
resting: (0, _styledComponents.css)(["border:1px solid;color:", ";border-color:", ";"], (0, _themeGet.themeGet)("colors.mono0"), (0, _themeGet.themeGet)("colors.mono30")),
|
|
20
|
-
selected: (0, _styledComponents.css)(["border:1px solid;color:", ";border-color:", ";background-color:", ";"], (0, _themeGet.themeGet)("colors.mono0"), (0, _themeGet.themeGet)("colors.mono30"), (0, _themeGet.themeGet)("colors.mono30"))
|
|
20
|
+
selected: (0, _styledComponents.css)(["border:1px solid;color:", ";border-color:", ";background-color:", ";--dot-color:", ";"], (0, _themeGet.themeGet)("colors.mono0"), (0, _themeGet.themeGet)("colors.mono30"), (0, _themeGet.themeGet)("colors.mono0"), (0, _themeGet.themeGet)("colors.mono30"))
|
|
21
21
|
},
|
|
22
22
|
error: {
|
|
23
|
-
resting: (0, _styledComponents.css)(["border:1px solid;color:", ";border-color:", ";"], (0, _themeGet.themeGet)("colors.mono0"), (0, _themeGet.themeGet)("colors.red100")),
|
|
24
|
-
selected: (0, _styledComponents.css)(["border:1px solid;color:", ";border-color:", ";background-color:", ";"], (0, _themeGet.themeGet)("colors.mono0"), (0, _themeGet.themeGet)("colors.red100"), (0, _themeGet.themeGet)("colors.red100"))
|
|
23
|
+
resting: (0, _styledComponents.css)(["border:1px solid;color:", ";border-color:", ";background-color:", ";"], (0, _themeGet.themeGet)("colors.mono0"), (0, _themeGet.themeGet)("colors.red100"), (0, _themeGet.themeGet)("colors.mono0")),
|
|
24
|
+
selected: (0, _styledComponents.css)(["border:1px solid;color:", ";border-color:", ";background-color:", ";--dot-color:", ";"], (0, _themeGet.themeGet)("colors.mono0"), (0, _themeGet.themeGet)("colors.red100"), (0, _themeGet.themeGet)("colors.mono0"), (0, _themeGet.themeGet)("colors.red100"))
|
|
25
25
|
},
|
|
26
26
|
hover: {
|
|
27
|
-
resting: (0, _styledComponents.css)(["border:1px solid;color:transparent;border-color:", ";background-color:", ";"], (0, _themeGet.themeGet)("colors.
|
|
28
|
-
selected: (0, _styledComponents.css)(["border:1px solid;color:", ";border-color:", ";background-color:", ";"], (0, _themeGet.themeGet)("colors.mono0"), (0, _themeGet.themeGet)("colors.
|
|
27
|
+
resting: (0, _styledComponents.css)(["border:1px solid;color:transparent;border-color:", ";background-color:", ";"], (0, _themeGet.themeGet)("colors.mono100"), (0, _themeGet.themeGet)("colors.mono0")),
|
|
28
|
+
selected: (0, _styledComponents.css)(["border:1px solid;color:", ";border-color:", ";background-color:", ";--dot-color:", ";"], (0, _themeGet.themeGet)("colors.mono0"), (0, _themeGet.themeGet)("colors.mono100"), (0, _themeGet.themeGet)("colors.mono0"), (0, _themeGet.themeGet)("colors.mono100"))
|
|
29
29
|
}
|
|
30
30
|
};
|
|
31
31
|
const RADIO_STATES = exports.RADIO_STATES = {
|
|
32
32
|
default: (0, _styledComponents.css)(["color:", ";"], (0, _themeGet.themeGet)("colors.mono60")),
|
|
33
33
|
focus: (0, _styledComponents.css)(["color:", ";> div > div:first-of-type{text-decoration:underline;}"], (0, _themeGet.themeGet)("colors.mono100")),
|
|
34
34
|
selected: (0, _styledComponents.css)(["color:", ";"], (0, _themeGet.themeGet)("colors.mono100")),
|
|
35
|
-
hover: (0, _styledComponents.css)(["color:", "
|
|
35
|
+
hover: (0, _styledComponents.css)(["color:", ";"], (0, _themeGet.themeGet)("colors.mono100")),
|
|
36
36
|
disabled: (0, _styledComponents.css)(["pointer-events:none;color:", ";"], (0, _themeGet.themeGet)("colors.mono30")),
|
|
37
37
|
error: (0, _styledComponents.css)(["color:", ";"], (0, _themeGet.themeGet)("colors.red100"))
|
|
38
38
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokens.js","names":["_themeGet","require","_styledComponents","RADIO_DOT_STATES","exports","default","resting","css","themeGet","selected","focus","disabled","error","hover","RADIO_STATES","RADIO_SIZES","sm","labelFontSize","descriptionFontSize","dotSize","md","lg"],"sources":["../../../../src/elements/Radio/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\nimport { ResponsiveValue } from \"styled-system\"\nimport { TextVariant } from \"../../Theme\"\n\nexport const RADIO_DOT_STATES = {\n default: {\n resting: css`\n border: 1px solid;\n color: ${themeGet(\"colors.mono0\")};\n border-color: ${themeGet(\"colors.
|
|
1
|
+
{"version":3,"file":"tokens.js","names":["_themeGet","require","_styledComponents","RADIO_DOT_STATES","exports","default","resting","css","themeGet","selected","focus","disabled","error","hover","RADIO_STATES","RADIO_SIZES","sm","labelFontSize","descriptionFontSize","dotSize","md","lg"],"sources":["../../../../src/elements/Radio/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\nimport { ResponsiveValue } from \"styled-system\"\nimport { TextVariant } from \"../../Theme\"\n\nexport const RADIO_DOT_STATES = {\n default: {\n resting: css`\n border: 1px solid;\n color: ${themeGet(\"colors.mono0\")};\n border-color: ${themeGet(\"colors.mono60\")};\n background-color: ${themeGet(\"colors.mono0\")};\n `,\n selected: css`\n border: 1px solid;\n color: ${themeGet(\"colors.mono0\")};\n border-color: ${themeGet(\"colors.mono100\")};\n background-color: ${themeGet(\"colors.mono0\")};\n --dot-color: ${themeGet(\"colors.mono100\")};\n `,\n },\n focus: {\n resting: css`\n border: 1px solid;\n color: ${themeGet(\"colors.mono0\")};\n border-color: ${themeGet(\"colors.mono100\")};\n background-color: ${themeGet(\"colors.mono0\")};\n `,\n selected: css`\n border: 1px solid;\n color: ${themeGet(\"colors.mono0\")};\n border-color: ${themeGet(\"colors.mono100\")};\n background-color: ${themeGet(\"colors.mono0\")};\n --dot-color: ${themeGet(\"colors.mono100\")};\n `,\n },\n disabled: {\n resting: css`\n border: 1px solid;\n color: ${themeGet(\"colors.mono0\")};\n border-color: ${themeGet(\"colors.mono30\")};\n `,\n selected: css`\n border: 1px solid;\n color: ${themeGet(\"colors.mono0\")};\n border-color: ${themeGet(\"colors.mono30\")};\n background-color: ${themeGet(\"colors.mono0\")};\n --dot-color: ${themeGet(\"colors.mono30\")};\n `,\n },\n error: {\n resting: css`\n border: 1px solid;\n color: ${themeGet(\"colors.mono0\")};\n border-color: ${themeGet(\"colors.red100\")};\n background-color: ${themeGet(\"colors.mono0\")};\n `,\n selected: css`\n border: 1px solid;\n color: ${themeGet(\"colors.mono0\")};\n border-color: ${themeGet(\"colors.red100\")};\n background-color: ${themeGet(\"colors.mono0\")};\n --dot-color: ${themeGet(\"colors.red100\")};\n `,\n },\n hover: {\n resting: css`\n border: 1px solid;\n color: transparent;\n border-color: ${themeGet(\"colors.mono100\")};\n background-color: ${themeGet(\"colors.mono0\")};\n `,\n selected: css`\n border: 1px solid;\n color: ${themeGet(\"colors.mono0\")};\n border-color: ${themeGet(\"colors.mono100\")};\n background-color: ${themeGet(\"colors.mono0\")};\n --dot-color: ${themeGet(\"colors.mono100\")};\n `,\n },\n}\n\nexport const RADIO_STATES = {\n default: css`\n color: ${themeGet(\"colors.mono60\")};\n `,\n focus: css`\n color: ${themeGet(\"colors.mono100\")};\n\n /* Label */\n > div > div:first-of-type {\n text-decoration: underline;\n }\n `,\n selected: css`\n color: ${themeGet(\"colors.mono100\")};\n `,\n hover: css`\n color: ${themeGet(\"colors.mono100\")};\n `,\n disabled: css`\n pointer-events: none;\n color: ${themeGet(\"colors.mono30\")};\n `,\n error: css`\n color: ${themeGet(\"colors.red100\")};\n `,\n} as const\n\ninterface SizeVariant {\n labelFontSize: ResponsiveValue<TextVariant>\n descriptionFontSize: ResponsiveValue<TextVariant>\n dotSize: string\n}\n\nexport const RADIO_SIZES: Record<string, SizeVariant> = {\n sm: {\n labelFontSize: \"sm-display\",\n descriptionFontSize: \"xs\",\n dotSize: \"20px\",\n },\n md: {\n labelFontSize: \"md\",\n descriptionFontSize: \"sm\",\n dotSize: \"25px\",\n },\n lg: {\n labelFontSize: \"lg-display\",\n descriptionFontSize: \"md\",\n dotSize: \"32px\",\n },\n}\n"],"mappings":"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"}
|
|
@@ -4,7 +4,7 @@ import { RADIO_DOT_STATES } from "./tokens";
|
|
|
4
4
|
export const RadioDot = styled(Box).withConfig({
|
|
5
5
|
displayName: "RadioDot",
|
|
6
6
|
componentId: "sc-1m6kyb-0"
|
|
7
|
-
})(["width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background-color 0.25s,border-color 0.25s,color 0.25s;", ";&::after{content:\"\";display:block;width:12px;height:12px;border-radius:50%;transition:background-color 0.25s;background-color:
|
|
7
|
+
})(["width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background-color 0.25s,border-color 0.25s,color 0.25s;", ";&::after{content:\"\";display:block;width:12px;height:12px;border-radius:50%;transition:background-color 0.25s;background-color:var(--dot-color);}"], props => {
|
|
8
8
|
const mode = (() => {
|
|
9
9
|
switch (true) {
|
|
10
10
|
case props.disabled:
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioDot.js","names":["styled","Box","RADIO_DOT_STATES","RadioDot","withConfig","displayName","componentId","props","mode","disabled","hover","focus","error","default","selected","resting"],"sources":["../../../../src/elements/Radio/RadioDot.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { Box } from \"../Box\"\nimport { RADIO_DOT_STATES } from \"./tokens\"\n\nexport interface CheckProps {\n disabled?: boolean\n error?: boolean\n hover?: boolean\n focus?: boolean\n selected?: boolean\n}\n\nexport const RadioDot = styled(Box)<CheckProps>`\n width: 100%;\n height: 100%;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: background-color 0.25s, border-color 0.25s, color 0.25s;\n\n ${(props) => {\n const mode = (() => {\n switch (true) {\n case props.disabled:\n return RADIO_DOT_STATES.disabled\n case props.hover:\n return RADIO_DOT_STATES.hover\n case props.focus:\n return RADIO_DOT_STATES.focus\n case props.error:\n return RADIO_DOT_STATES.error\n default:\n return RADIO_DOT_STATES.default\n }\n })()\n\n return props.selected ? mode.selected : mode.resting\n }};\n\n /* Dot */\n &::after {\n content: \"\";\n display: block;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n transition: background-color 0.25s;\n background-color:
|
|
1
|
+
{"version":3,"file":"RadioDot.js","names":["styled","Box","RADIO_DOT_STATES","RadioDot","withConfig","displayName","componentId","props","mode","disabled","hover","focus","error","default","selected","resting"],"sources":["../../../../src/elements/Radio/RadioDot.tsx"],"sourcesContent":["import styled from \"styled-components\"\nimport { Box } from \"../Box\"\nimport { RADIO_DOT_STATES } from \"./tokens\"\n\nexport interface CheckProps {\n disabled?: boolean\n error?: boolean\n hover?: boolean\n focus?: boolean\n selected?: boolean\n}\n\nexport const RadioDot = styled(Box)<CheckProps>`\n width: 100%;\n height: 100%;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n transition: background-color 0.25s, border-color 0.25s, color 0.25s;\n\n ${(props) => {\n const mode = (() => {\n switch (true) {\n case props.disabled:\n return RADIO_DOT_STATES.disabled\n case props.hover:\n return RADIO_DOT_STATES.hover\n case props.focus:\n return RADIO_DOT_STATES.focus\n case props.error:\n return RADIO_DOT_STATES.error\n default:\n return RADIO_DOT_STATES.default\n }\n })()\n\n return props.selected ? mode.selected : mode.resting\n }};\n\n /* Dot */\n &::after {\n content: \"\";\n display: block;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n transition: background-color 0.25s;\n background-color: var(--dot-color);\n }\n`\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,GAAG;AACZ,SAASC,gBAAgB;AAUzB,OAAO,MAAMC,QAAQ,GAAGH,MAAM,CAACC,GAAG,CAAC,CAAAG,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,+UAU9BC,KAAK,IAAK;EACX,MAAMC,IAAI,GAAG,CAAC,MAAM;IAClB,QAAQ,IAAI;MACV,KAAKD,KAAK,CAACE,QAAQ;QACjB,OAAOP,gBAAgB,CAACO,QAAQ;MAClC,KAAKF,KAAK,CAACG,KAAK;QACd,OAAOR,gBAAgB,CAACQ,KAAK;MAC/B,KAAKH,KAAK,CAACI,KAAK;QACd,OAAOT,gBAAgB,CAACS,KAAK;MAC/B,KAAKJ,KAAK,CAACK,KAAK;QACd,OAAOV,gBAAgB,CAACU,KAAK;MAC/B;QACE,OAAOV,gBAAgB,CAACW,OAAO;IAAA;EAErC,CAAC,GAAG;EAEJ,OAAON,KAAK,CAACO,QAAQ,GAAGN,IAAI,CAACM,QAAQ,GAAGN,IAAI,CAACO,OAAO;AACtD,CAAC,CAYF"}
|
|
@@ -2,31 +2,31 @@ import { themeGet } from "@styled-system/theme-get";
|
|
|
2
2
|
import { css } from "styled-components";
|
|
3
3
|
export const RADIO_DOT_STATES = {
|
|
4
4
|
default: {
|
|
5
|
-
resting: css(["border:1px solid;color:", ";border-color:", ";"], themeGet("colors.mono0"), themeGet("colors.
|
|
6
|
-
selected: css(["border:1px solid;color:", ";border-color:", ";background-color:", ";"], themeGet("colors.mono0"), themeGet("colors.mono100"), themeGet("colors.mono100"))
|
|
5
|
+
resting: css(["border:1px solid;color:", ";border-color:", ";background-color:", ";"], themeGet("colors.mono0"), themeGet("colors.mono60"), themeGet("colors.mono0")),
|
|
6
|
+
selected: css(["border:1px solid;color:", ";border-color:", ";background-color:", ";--dot-color:", ";"], themeGet("colors.mono0"), themeGet("colors.mono100"), themeGet("colors.mono0"), themeGet("colors.mono100"))
|
|
7
7
|
},
|
|
8
8
|
focus: {
|
|
9
|
-
resting: css(["border:1px solid;color:", ";border-color:", ";"], themeGet("colors.mono0"), themeGet("colors.mono100")),
|
|
10
|
-
selected: css(["border:1px solid;color:", ";border-color:", ";background-color:", ";"], themeGet("colors.mono0"), themeGet("colors.mono100"), themeGet("colors.mono100"))
|
|
9
|
+
resting: css(["border:1px solid;color:", ";border-color:", ";background-color:", ";"], themeGet("colors.mono0"), themeGet("colors.mono100"), themeGet("colors.mono0")),
|
|
10
|
+
selected: css(["border:1px solid;color:", ";border-color:", ";background-color:", ";--dot-color:", ";"], themeGet("colors.mono0"), themeGet("colors.mono100"), themeGet("colors.mono0"), themeGet("colors.mono100"))
|
|
11
11
|
},
|
|
12
12
|
disabled: {
|
|
13
13
|
resting: css(["border:1px solid;color:", ";border-color:", ";"], themeGet("colors.mono0"), themeGet("colors.mono30")),
|
|
14
|
-
selected: css(["border:1px solid;color:", ";border-color:", ";background-color:", ";"], themeGet("colors.mono0"), themeGet("colors.mono30"), themeGet("colors.mono30"))
|
|
14
|
+
selected: css(["border:1px solid;color:", ";border-color:", ";background-color:", ";--dot-color:", ";"], themeGet("colors.mono0"), themeGet("colors.mono30"), themeGet("colors.mono0"), themeGet("colors.mono30"))
|
|
15
15
|
},
|
|
16
16
|
error: {
|
|
17
|
-
resting: css(["border:1px solid;color:", ";border-color:", ";"], themeGet("colors.mono0"), themeGet("colors.red100")),
|
|
18
|
-
selected: css(["border:1px solid;color:", ";border-color:", ";background-color:", ";"], themeGet("colors.mono0"), themeGet("colors.red100"), themeGet("colors.red100"))
|
|
17
|
+
resting: css(["border:1px solid;color:", ";border-color:", ";background-color:", ";"], themeGet("colors.mono0"), themeGet("colors.red100"), themeGet("colors.mono0")),
|
|
18
|
+
selected: css(["border:1px solid;color:", ";border-color:", ";background-color:", ";--dot-color:", ";"], themeGet("colors.mono0"), themeGet("colors.red100"), themeGet("colors.mono0"), themeGet("colors.red100"))
|
|
19
19
|
},
|
|
20
20
|
hover: {
|
|
21
|
-
resting: css(["border:1px solid;color:transparent;border-color:", ";background-color:", ";"], themeGet("colors.
|
|
22
|
-
selected: css(["border:1px solid;color:", ";border-color:", ";background-color:", ";"], themeGet("colors.mono0"), themeGet("colors.
|
|
21
|
+
resting: css(["border:1px solid;color:transparent;border-color:", ";background-color:", ";"], themeGet("colors.mono100"), themeGet("colors.mono0")),
|
|
22
|
+
selected: css(["border:1px solid;color:", ";border-color:", ";background-color:", ";--dot-color:", ";"], themeGet("colors.mono0"), themeGet("colors.mono100"), themeGet("colors.mono0"), themeGet("colors.mono100"))
|
|
23
23
|
}
|
|
24
24
|
};
|
|
25
25
|
export const RADIO_STATES = {
|
|
26
26
|
default: css(["color:", ";"], themeGet("colors.mono60")),
|
|
27
27
|
focus: css(["color:", ";> div > div:first-of-type{text-decoration:underline;}"], themeGet("colors.mono100")),
|
|
28
28
|
selected: css(["color:", ";"], themeGet("colors.mono100")),
|
|
29
|
-
hover: css(["color:", "
|
|
29
|
+
hover: css(["color:", ";"], themeGet("colors.mono100")),
|
|
30
30
|
disabled: css(["pointer-events:none;color:", ";"], themeGet("colors.mono30")),
|
|
31
31
|
error: css(["color:", ";"], themeGet("colors.red100"))
|
|
32
32
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokens.js","names":["themeGet","css","RADIO_DOT_STATES","default","resting","selected","focus","disabled","error","hover","RADIO_STATES","RADIO_SIZES","sm","labelFontSize","descriptionFontSize","dotSize","md","lg"],"sources":["../../../../src/elements/Radio/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\nimport { ResponsiveValue } from \"styled-system\"\nimport { TextVariant } from \"../../Theme\"\n\nexport const RADIO_DOT_STATES = {\n default: {\n resting: css`\n border: 1px solid;\n color: ${themeGet(\"colors.mono0\")};\n border-color: ${themeGet(\"colors.
|
|
1
|
+
{"version":3,"file":"tokens.js","names":["themeGet","css","RADIO_DOT_STATES","default","resting","selected","focus","disabled","error","hover","RADIO_STATES","RADIO_SIZES","sm","labelFontSize","descriptionFontSize","dotSize","md","lg"],"sources":["../../../../src/elements/Radio/tokens.ts"],"sourcesContent":["import { themeGet } from \"@styled-system/theme-get\"\nimport { css } from \"styled-components\"\nimport { ResponsiveValue } from \"styled-system\"\nimport { TextVariant } from \"../../Theme\"\n\nexport const RADIO_DOT_STATES = {\n default: {\n resting: css`\n border: 1px solid;\n color: ${themeGet(\"colors.mono0\")};\n border-color: ${themeGet(\"colors.mono60\")};\n background-color: ${themeGet(\"colors.mono0\")};\n `,\n selected: css`\n border: 1px solid;\n color: ${themeGet(\"colors.mono0\")};\n border-color: ${themeGet(\"colors.mono100\")};\n background-color: ${themeGet(\"colors.mono0\")};\n --dot-color: ${themeGet(\"colors.mono100\")};\n `,\n },\n focus: {\n resting: css`\n border: 1px solid;\n color: ${themeGet(\"colors.mono0\")};\n border-color: ${themeGet(\"colors.mono100\")};\n background-color: ${themeGet(\"colors.mono0\")};\n `,\n selected: css`\n border: 1px solid;\n color: ${themeGet(\"colors.mono0\")};\n border-color: ${themeGet(\"colors.mono100\")};\n background-color: ${themeGet(\"colors.mono0\")};\n --dot-color: ${themeGet(\"colors.mono100\")};\n `,\n },\n disabled: {\n resting: css`\n border: 1px solid;\n color: ${themeGet(\"colors.mono0\")};\n border-color: ${themeGet(\"colors.mono30\")};\n `,\n selected: css`\n border: 1px solid;\n color: ${themeGet(\"colors.mono0\")};\n border-color: ${themeGet(\"colors.mono30\")};\n background-color: ${themeGet(\"colors.mono0\")};\n --dot-color: ${themeGet(\"colors.mono30\")};\n `,\n },\n error: {\n resting: css`\n border: 1px solid;\n color: ${themeGet(\"colors.mono0\")};\n border-color: ${themeGet(\"colors.red100\")};\n background-color: ${themeGet(\"colors.mono0\")};\n `,\n selected: css`\n border: 1px solid;\n color: ${themeGet(\"colors.mono0\")};\n border-color: ${themeGet(\"colors.red100\")};\n background-color: ${themeGet(\"colors.mono0\")};\n --dot-color: ${themeGet(\"colors.red100\")};\n `,\n },\n hover: {\n resting: css`\n border: 1px solid;\n color: transparent;\n border-color: ${themeGet(\"colors.mono100\")};\n background-color: ${themeGet(\"colors.mono0\")};\n `,\n selected: css`\n border: 1px solid;\n color: ${themeGet(\"colors.mono0\")};\n border-color: ${themeGet(\"colors.mono100\")};\n background-color: ${themeGet(\"colors.mono0\")};\n --dot-color: ${themeGet(\"colors.mono100\")};\n `,\n },\n}\n\nexport const RADIO_STATES = {\n default: css`\n color: ${themeGet(\"colors.mono60\")};\n `,\n focus: css`\n color: ${themeGet(\"colors.mono100\")};\n\n /* Label */\n > div > div:first-of-type {\n text-decoration: underline;\n }\n `,\n selected: css`\n color: ${themeGet(\"colors.mono100\")};\n `,\n hover: css`\n color: ${themeGet(\"colors.mono100\")};\n `,\n disabled: css`\n pointer-events: none;\n color: ${themeGet(\"colors.mono30\")};\n `,\n error: css`\n color: ${themeGet(\"colors.red100\")};\n `,\n} as const\n\ninterface SizeVariant {\n labelFontSize: ResponsiveValue<TextVariant>\n descriptionFontSize: ResponsiveValue<TextVariant>\n dotSize: string\n}\n\nexport const RADIO_SIZES: Record<string, SizeVariant> = {\n sm: {\n labelFontSize: \"sm-display\",\n descriptionFontSize: \"xs\",\n dotSize: \"20px\",\n },\n md: {\n labelFontSize: \"md\",\n descriptionFontSize: \"sm\",\n dotSize: \"25px\",\n },\n lg: {\n labelFontSize: \"lg-display\",\n descriptionFontSize: \"md\",\n dotSize: \"32px\",\n },\n}\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@artsy/palette",
|
|
3
|
-
"version": "46.
|
|
3
|
+
"version": "46.7.0",
|
|
4
4
|
"description": "Design system library for react components",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -205,5 +205,5 @@
|
|
|
205
205
|
"url": "http://localhost"
|
|
206
206
|
}
|
|
207
207
|
},
|
|
208
|
-
"gitHead": "
|
|
208
|
+
"gitHead": "9d9132a95c35b496b9dbd3ad0ed33ea73f0d3a02"
|
|
209
209
|
}
|