@artsy/palette 46.6.0 → 46.8.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/GridColumns/GridColumns.d.ts +2 -0
- package/dist/cjs/elements/GridColumns/GridColumns.js +7 -1
- package/dist/cjs/elements/GridColumns/GridColumns.js.map +1 -1
- 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/GridColumns/GridColumns.js +7 -1
- package/dist/esm/elements/GridColumns/GridColumns.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
|
@@ -18,6 +18,8 @@ type CellProps = ColumnCell & GridColumnProps & BoxProps;
|
|
|
18
18
|
export type ColumnProps = CellProps & {
|
|
19
19
|
/** denotes whether or not to break to a new row after column */
|
|
20
20
|
wrap?: boolean;
|
|
21
|
+
/** renders the column as a subgrid, inheriting parent grid tracks */
|
|
22
|
+
subgrid?: boolean;
|
|
21
23
|
children?: React.ReactNode;
|
|
22
24
|
};
|
|
23
25
|
/**
|
|
@@ -30,6 +30,10 @@ const Cell = (0, _styledComponents.default)(_Box.Box).withConfig({
|
|
|
30
30
|
displayName: "GridColumns__Cell",
|
|
31
31
|
componentId: "sc-1g9p6xx-1"
|
|
32
32
|
})(["", ""], _styledSystem.gridColumn);
|
|
33
|
+
const SubgridCell = (0, _styledComponents.default)(Cell).withConfig({
|
|
34
|
+
displayName: "GridColumns__SubgridCell",
|
|
35
|
+
componentId: "sc-1g9p6xx-2"
|
|
36
|
+
})(["display:grid;grid-template-columns:subgrid;"]);
|
|
33
37
|
|
|
34
38
|
/** Column implements `Box` and `gridColumn` */
|
|
35
39
|
|
|
@@ -41,6 +45,7 @@ const Column = ({
|
|
|
41
45
|
span,
|
|
42
46
|
start,
|
|
43
47
|
wrap,
|
|
48
|
+
subgrid,
|
|
44
49
|
...rest
|
|
45
50
|
}) => {
|
|
46
51
|
const gridColumnValue = (0, _react.useMemo)(() => {
|
|
@@ -49,8 +54,9 @@ const Column = ({
|
|
|
49
54
|
start
|
|
50
55
|
});
|
|
51
56
|
}, [span, start]);
|
|
57
|
+
const Component = subgrid ? SubgridCell : Cell;
|
|
52
58
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
53
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
59
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
|
|
54
60
|
gridColumn: gridColumnValue,
|
|
55
61
|
...rest
|
|
56
62
|
}), wrap && /*#__PURE__*/(0, _jsxRuntime.jsx)(ColumnWrap, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridColumns.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_styledSystem","_Box","_CSSGrid","_calculateGridColumn","_jsxRuntime","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","GridColumns","exports","styled","CSSGrid","attrs","props","gridColumnGap","gridRowGap","withConfig","displayName","componentId","Cell","Box","gridColumn","Column","span","start","wrap","rest","gridColumnValue","useMemo","calculateGridColumn","jsxs","Fragment","children","jsx","ColumnWrap","display","map","value","GRID_COLUMN_FULL_WIDTHS","includes"],"sources":["../../../../src/elements/GridColumns/GridColumns.tsx"],"sourcesContent":["import React, { useMemo } from \"react\"\nimport styled from \"styled-components\"\nimport { gridColumn, GridColumnProps } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\nimport { CSSGrid, CSSGridProps } from \"../CSSGrid\"\nimport {\n calculateGridColumn,\n ColumnCell,\n GRID_COLUMN_FULL_WIDTHS,\n} from \"./calculateGridColumn\"\n\n/** GridColumns implements `Box` and the common grid properties */\nexport type GridColumnsProps = Omit<CSSGridProps, \"gridTemplateColumns\">\n\n/**\n * A 12-column fluid grid\n */\nexport const GridColumns = styled(CSSGrid).attrs<GridColumnsProps>((props) => ({\n gridColumnGap: props.gridColumnGap ?? [1, 2],\n gridRowGap: props.gridRowGap ?? [1, 2],\n}))<GridColumnsProps>`\n grid-template-columns: repeat(12, 1fr);\n`\n\ntype CellProps = ColumnCell & GridColumnProps & BoxProps\n\nconst Cell = styled(Box)<CellProps>`\n ${gridColumn}\n`\n\n/** Column implements `Box` and `gridColumn` */\nexport type ColumnProps = CellProps & {\n /** denotes whether or not to break to a new row after column */\n wrap?: boolean\n children?: React.ReactNode\n}\n\n/**\n * A column sits within the GridColumns and spans the columns,\n * sitting between gutters.\n */\nexport const Column: React.FC<React.PropsWithChildren<ColumnProps>> = ({\n span,\n start,\n wrap,\n ...rest\n}) => {\n const gridColumnValue = useMemo(() => {\n return calculateGridColumn({ span, start })\n }, [span, start])\n\n return (\n <>\n <
|
|
1
|
+
{"version":3,"file":"GridColumns.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_styledSystem","_Box","_CSSGrid","_calculateGridColumn","_jsxRuntime","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","GridColumns","exports","styled","CSSGrid","attrs","props","gridColumnGap","gridRowGap","withConfig","displayName","componentId","Cell","Box","gridColumn","SubgridCell","Column","span","start","wrap","subgrid","rest","gridColumnValue","useMemo","calculateGridColumn","Component","jsxs","Fragment","children","jsx","ColumnWrap","display","map","value","GRID_COLUMN_FULL_WIDTHS","includes"],"sources":["../../../../src/elements/GridColumns/GridColumns.tsx"],"sourcesContent":["import React, { useMemo } from \"react\"\nimport styled from \"styled-components\"\nimport { gridColumn, GridColumnProps } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\nimport { CSSGrid, CSSGridProps } from \"../CSSGrid\"\nimport {\n calculateGridColumn,\n ColumnCell,\n GRID_COLUMN_FULL_WIDTHS,\n} from \"./calculateGridColumn\"\n\n/** GridColumns implements `Box` and the common grid properties */\nexport type GridColumnsProps = Omit<CSSGridProps, \"gridTemplateColumns\">\n\n/**\n * A 12-column fluid grid\n */\nexport const GridColumns = styled(CSSGrid).attrs<GridColumnsProps>((props) => ({\n gridColumnGap: props.gridColumnGap ?? [1, 2],\n gridRowGap: props.gridRowGap ?? [1, 2],\n}))<GridColumnsProps>`\n grid-template-columns: repeat(12, 1fr);\n`\n\ntype CellProps = ColumnCell & GridColumnProps & BoxProps\n\nconst Cell = styled(Box)<CellProps>`\n ${gridColumn}\n`\n\nconst SubgridCell = styled(Cell)`\n display: grid;\n grid-template-columns: subgrid;\n`\n\n/** Column implements `Box` and `gridColumn` */\nexport type ColumnProps = CellProps & {\n /** denotes whether or not to break to a new row after column */\n wrap?: boolean\n /** renders the column as a subgrid, inheriting parent grid tracks */\n subgrid?: boolean\n children?: React.ReactNode\n}\n\n/**\n * A column sits within the GridColumns and spans the columns,\n * sitting between gutters.\n */\nexport const Column: React.FC<React.PropsWithChildren<ColumnProps>> = ({\n span,\n start,\n wrap,\n subgrid,\n ...rest\n}) => {\n const gridColumnValue = useMemo(() => {\n return calculateGridColumn({ span, start })\n }, [span, start])\n\n const Component = subgrid ? SubgridCell : Cell\n\n return (\n <>\n <Component gridColumn={gridColumnValue} {...rest} />\n {wrap && <ColumnWrap gridColumnValue={gridColumnValue} />}\n </>\n )\n}\n\nconst ColumnWrap: React.FC<React.PropsWithChildren<{ gridColumnValue: string[] }>> = ({\n gridColumnValue,\n}) => {\n return (\n <Cell\n // Spans the remainder of the columns until the end\n gridColumn={[\"auto / -1\"]}\n // Hides the break if the value presented is going to span the full\n // width of the column anyway. Prevents duplicated row gaps.\n display={gridColumnValue.map((value) => {\n return GRID_COLUMN_FULL_WIDTHS.includes(value) ? \"none\" : \"block\"\n })}\n />\n )\n}\n"],"mappings":"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"}
|
|
@@ -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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"}
|
|
@@ -21,6 +21,10 @@ const Cell = styled(Box).withConfig({
|
|
|
21
21
|
displayName: "GridColumns__Cell",
|
|
22
22
|
componentId: "sc-1g9p6xx-1"
|
|
23
23
|
})(["", ""], gridColumn);
|
|
24
|
+
const SubgridCell = styled(Cell).withConfig({
|
|
25
|
+
displayName: "GridColumns__SubgridCell",
|
|
26
|
+
componentId: "sc-1g9p6xx-2"
|
|
27
|
+
})(["display:grid;grid-template-columns:subgrid;"]);
|
|
24
28
|
|
|
25
29
|
/** Column implements `Box` and `gridColumn` */
|
|
26
30
|
|
|
@@ -32,6 +36,7 @@ export const Column = ({
|
|
|
32
36
|
span,
|
|
33
37
|
start,
|
|
34
38
|
wrap,
|
|
39
|
+
subgrid,
|
|
35
40
|
...rest
|
|
36
41
|
}) => {
|
|
37
42
|
const gridColumnValue = useMemo(() => {
|
|
@@ -40,8 +45,9 @@ export const Column = ({
|
|
|
40
45
|
start
|
|
41
46
|
});
|
|
42
47
|
}, [span, start]);
|
|
48
|
+
const Component = subgrid ? SubgridCell : Cell;
|
|
43
49
|
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
44
|
-
children: [/*#__PURE__*/_jsx(
|
|
50
|
+
children: [/*#__PURE__*/_jsx(Component, {
|
|
45
51
|
gridColumn: gridColumnValue,
|
|
46
52
|
...rest
|
|
47
53
|
}), wrap && /*#__PURE__*/_jsx(ColumnWrap, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridColumns.js","names":["React","useMemo","styled","gridColumn","Box","CSSGrid","calculateGridColumn","GRID_COLUMN_FULL_WIDTHS","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","GridColumns","attrs","props","gridColumnGap","gridRowGap","withConfig","displayName","componentId","Cell","Column","span","start","wrap","rest","gridColumnValue","children","ColumnWrap","display","map","value","includes"],"sources":["../../../../src/elements/GridColumns/GridColumns.tsx"],"sourcesContent":["import React, { useMemo } from \"react\"\nimport styled from \"styled-components\"\nimport { gridColumn, GridColumnProps } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\nimport { CSSGrid, CSSGridProps } from \"../CSSGrid\"\nimport {\n calculateGridColumn,\n ColumnCell,\n GRID_COLUMN_FULL_WIDTHS,\n} from \"./calculateGridColumn\"\n\n/** GridColumns implements `Box` and the common grid properties */\nexport type GridColumnsProps = Omit<CSSGridProps, \"gridTemplateColumns\">\n\n/**\n * A 12-column fluid grid\n */\nexport const GridColumns = styled(CSSGrid).attrs<GridColumnsProps>((props) => ({\n gridColumnGap: props.gridColumnGap ?? [1, 2],\n gridRowGap: props.gridRowGap ?? [1, 2],\n}))<GridColumnsProps>`\n grid-template-columns: repeat(12, 1fr);\n`\n\ntype CellProps = ColumnCell & GridColumnProps & BoxProps\n\nconst Cell = styled(Box)<CellProps>`\n ${gridColumn}\n`\n\n/** Column implements `Box` and `gridColumn` */\nexport type ColumnProps = CellProps & {\n /** denotes whether or not to break to a new row after column */\n wrap?: boolean\n children?: React.ReactNode\n}\n\n/**\n * A column sits within the GridColumns and spans the columns,\n * sitting between gutters.\n */\nexport const Column: React.FC<React.PropsWithChildren<ColumnProps>> = ({\n span,\n start,\n wrap,\n ...rest\n}) => {\n const gridColumnValue = useMemo(() => {\n return calculateGridColumn({ span, start })\n }, [span, start])\n\n return (\n <>\n <
|
|
1
|
+
{"version":3,"file":"GridColumns.js","names":["React","useMemo","styled","gridColumn","Box","CSSGrid","calculateGridColumn","GRID_COLUMN_FULL_WIDTHS","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","GridColumns","attrs","props","gridColumnGap","gridRowGap","withConfig","displayName","componentId","Cell","SubgridCell","Column","span","start","wrap","subgrid","rest","gridColumnValue","Component","children","ColumnWrap","display","map","value","includes"],"sources":["../../../../src/elements/GridColumns/GridColumns.tsx"],"sourcesContent":["import React, { useMemo } from \"react\"\nimport styled from \"styled-components\"\nimport { gridColumn, GridColumnProps } from \"styled-system\"\nimport { Box, BoxProps } from \"../Box\"\nimport { CSSGrid, CSSGridProps } from \"../CSSGrid\"\nimport {\n calculateGridColumn,\n ColumnCell,\n GRID_COLUMN_FULL_WIDTHS,\n} from \"./calculateGridColumn\"\n\n/** GridColumns implements `Box` and the common grid properties */\nexport type GridColumnsProps = Omit<CSSGridProps, \"gridTemplateColumns\">\n\n/**\n * A 12-column fluid grid\n */\nexport const GridColumns = styled(CSSGrid).attrs<GridColumnsProps>((props) => ({\n gridColumnGap: props.gridColumnGap ?? [1, 2],\n gridRowGap: props.gridRowGap ?? [1, 2],\n}))<GridColumnsProps>`\n grid-template-columns: repeat(12, 1fr);\n`\n\ntype CellProps = ColumnCell & GridColumnProps & BoxProps\n\nconst Cell = styled(Box)<CellProps>`\n ${gridColumn}\n`\n\nconst SubgridCell = styled(Cell)`\n display: grid;\n grid-template-columns: subgrid;\n`\n\n/** Column implements `Box` and `gridColumn` */\nexport type ColumnProps = CellProps & {\n /** denotes whether or not to break to a new row after column */\n wrap?: boolean\n /** renders the column as a subgrid, inheriting parent grid tracks */\n subgrid?: boolean\n children?: React.ReactNode\n}\n\n/**\n * A column sits within the GridColumns and spans the columns,\n * sitting between gutters.\n */\nexport const Column: React.FC<React.PropsWithChildren<ColumnProps>> = ({\n span,\n start,\n wrap,\n subgrid,\n ...rest\n}) => {\n const gridColumnValue = useMemo(() => {\n return calculateGridColumn({ span, start })\n }, [span, start])\n\n const Component = subgrid ? SubgridCell : Cell\n\n return (\n <>\n <Component gridColumn={gridColumnValue} {...rest} />\n {wrap && <ColumnWrap gridColumnValue={gridColumnValue} />}\n </>\n )\n}\n\nconst ColumnWrap: React.FC<React.PropsWithChildren<{ gridColumnValue: string[] }>> = ({\n gridColumnValue,\n}) => {\n return (\n <Cell\n // Spans the remainder of the columns until the end\n gridColumn={[\"auto / -1\"]}\n // Hides the break if the value presented is going to span the full\n // width of the column anyway. Prevents duplicated row gaps.\n display={gridColumnValue.map((value) => {\n return GRID_COLUMN_FULL_WIDTHS.includes(value) ? \"none\" : \"block\"\n })}\n />\n )\n}\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,UAAU,QAAyB,eAAe;AAC3D,SAASC,GAAG;AACZ,SAASC,OAAO;AAChB,SACEC,mBAAmB,EAEnBC,uBAAuB;;AAGzB;AAAA,SAAAC,GAAA,IAAAC,IAAA,EAAAC,QAAA,IAAAC,SAAA,EAAAC,IAAA,IAAAC,KAAA;AAGA;AACA;AACA;AACA,OAAO,MAAMC,WAAW,GAAGZ,MAAM,CAACG,OAAO,CAAC,CAACU,KAAK,CAAoBC,KAAK,KAAM;EAC7EC,aAAa,EAAED,KAAK,CAACC,aAAa,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC;EAC5CC,UAAU,EAAEF,KAAK,CAACE,UAAU,IAAI,CAAC,CAAC,EAAE,CAAC;AACvC,CAAC,CAAC,CAAC,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,6CAEF;AAID,MAAMC,IAAI,GAAGpB,MAAM,CAACE,GAAG,CAAC,CAAAe,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,aACpBlB,UAAU,CACb;AAED,MAAMoB,WAAW,GAAGrB,MAAM,CAACoB,IAAI,CAAC,CAAAH,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,mDAG/B;;AAED;;AASA;AACA;AACA;AACA;AACA,OAAO,MAAMG,MAAsD,GAAGA,CAAC;EACrEC,IAAI;EACJC,KAAK;EACLC,IAAI;EACJC,OAAO;EACP,GAAGC;AACL,CAAC,KAAK;EACJ,MAAMC,eAAe,GAAG7B,OAAO,CAAC,MAAM;IACpC,OAAOK,mBAAmB,CAAC;MAAEmB,IAAI;MAAEC;IAAM,CAAC,CAAC;EAC7C,CAAC,EAAE,CAACD,IAAI,EAAEC,KAAK,CAAC,CAAC;EAEjB,MAAMK,SAAS,GAAGH,OAAO,GAAGL,WAAW,GAAGD,IAAI;EAE9C,oBACET,KAAA,CAAAF,SAAA;IAAAqB,QAAA,gBACEvB,IAAA,CAACsB,SAAS;MAAC5B,UAAU,EAAE2B,eAAgB;MAAA,GAAKD;IAAI,EAAI,EACnDF,IAAI,iBAAIlB,IAAA,CAACwB,UAAU;MAACH,eAAe,EAAEA;IAAgB,EAAG;EAAA,EACxD;AAEP,CAAC;AAED,MAAMG,UAA4E,GAAGA,CAAC;EACpFH;AACF,CAAC,KAAK;EACJ,oBACErB,IAAA,CAACa;EACC;EAAA;IACAnB,UAAU,EAAE,CAAC,WAAW;IACxB;IACA;IAAA;IACA+B,OAAO,EAAEJ,eAAe,CAACK,GAAG,CAAEC,KAAK,IAAK;MACtC,OAAO7B,uBAAuB,CAAC8B,QAAQ,CAACD,KAAK,CAAC,GAAG,MAAM,GAAG,OAAO;IACnE,CAAC;EAAE,EACH;AAEN,CAAC;AAdKH,UAA4E,CAAAb,WAAA"}
|
|
@@ -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.8.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": "441af422924542a8550a7626a1a80dadaa3859ad"
|
|
209
209
|
}
|