@zendeskgarden/react-colorpickers 9.0.0-next.24 → 9.0.0-next.26
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/esm/styled/ColorPicker/StyledAlphaRange.js +2 -5
- package/dist/esm/styled/ColorPicker/StyledColorPicker.js +2 -5
- package/dist/esm/styled/ColorPicker/StyledColorWell.js +2 -5
- package/dist/esm/styled/ColorPicker/StyledColorWellThumb.js +2 -5
- package/dist/esm/styled/ColorPicker/StyledHexField.js +2 -5
- package/dist/esm/styled/ColorPicker/StyledHueRange.js +1 -5
- package/dist/esm/styled/ColorPicker/StyledInput.js +2 -5
- package/dist/esm/styled/ColorPicker/StyledInputGroup.js +2 -5
- package/dist/esm/styled/ColorPicker/StyledLabel.js +2 -5
- package/dist/esm/styled/ColorPicker/StyledPreview.js +2 -5
- package/dist/esm/styled/ColorPicker/StyledRGBAField.js +2 -5
- package/dist/esm/styled/ColorPicker/StyledSliderGroup.js +2 -5
- package/dist/esm/styled/ColorPicker/StyledSliders.js +2 -5
- package/dist/esm/styled/ColorPickerDialog/StyledButton.js +1 -5
- package/dist/esm/styled/ColorPickerDialog/StyledButtonPreview.js +2 -5
- package/dist/esm/styled/ColorPickerDialog/StyledTooltipBody.js +2 -5
- package/dist/esm/styled/ColorPickerDialog/StyledTooltipDialog.js +2 -5
- package/dist/esm/styled/ColorSwatch/StyledCell.js +2 -5
- package/dist/esm/styled/ColorSwatch/StyledColorSwatch.js +2 -5
- package/dist/esm/styled/ColorSwatch/StyledColorSwatchInput.js +2 -5
- package/dist/esm/styled/ColorSwatch/StyledColorSwatchLabel.js +2 -5
- package/dist/esm/styled/ColorSwatch/StyledIcon.js +2 -5
- package/dist/esm/styled/common/StyledRange.js +2 -5
- package/dist/index.cjs.js +23 -92
- package/package.json +7 -7
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import {
|
|
8
|
+
import { getCheckeredBackground } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { StyledRange, getTrackMargin, getTrackHeight } from '../common/StyledRange.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'colorpickers.colorpicker_alpha';
|
|
@@ -30,13 +30,10 @@ const StyledAlphaRange = styled(StyledRange).attrs(props => ({
|
|
|
30
30
|
background: background(props)
|
|
31
31
|
},
|
|
32
32
|
'data-garden-id': COMPONENT_ID,
|
|
33
|
-
'data-garden-version': '9.0.0-next.
|
|
33
|
+
'data-garden-version': '9.0.0-next.26'
|
|
34
34
|
})).withConfig({
|
|
35
35
|
displayName: "StyledAlphaRange",
|
|
36
36
|
componentId: "sc-1f6hp2j-0"
|
|
37
37
|
})([""]);
|
|
38
|
-
StyledAlphaRange.defaultProps = {
|
|
39
|
-
theme: DEFAULT_THEME
|
|
40
|
-
};
|
|
41
38
|
|
|
42
39
|
export { StyledAlphaRange };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles
|
|
8
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'colorpickers.colorpicker';
|
|
11
11
|
const getColorPickerWidth = props => {
|
|
@@ -13,13 +13,10 @@ const getColorPickerWidth = props => {
|
|
|
13
13
|
};
|
|
14
14
|
const StyledColorPicker = styled.div.attrs({
|
|
15
15
|
'data-garden-id': COMPONENT_ID,
|
|
16
|
-
'data-garden-version': '9.0.0-next.
|
|
16
|
+
'data-garden-version': '9.0.0-next.26'
|
|
17
17
|
}).withConfig({
|
|
18
18
|
displayName: "StyledColorPicker",
|
|
19
19
|
componentId: "sc-gspq4q-0"
|
|
20
20
|
})(["width:", "px;min-width:", "px;", ";"], getColorPickerWidth, getColorPickerWidth, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
21
|
-
StyledColorPicker.defaultProps = {
|
|
22
|
-
theme: DEFAULT_THEME
|
|
23
|
-
};
|
|
24
21
|
|
|
25
22
|
export { StyledColorPicker, getColorPickerWidth };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import { rgba, hsl } from 'polished';
|
|
9
|
-
import { retrieveComponentStyles
|
|
9
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'colorpickers.colorpicker_colorwell';
|
|
12
12
|
const background = props => {
|
|
@@ -20,7 +20,7 @@ const background = props => {
|
|
|
20
20
|
};
|
|
21
21
|
const StyledColorWell = styled.div.attrs(props => ({
|
|
22
22
|
'data-garden-id': COMPONENT_ID,
|
|
23
|
-
'data-garden-version': '9.0.0-next.
|
|
23
|
+
'data-garden-version': '9.0.0-next.26',
|
|
24
24
|
'data-test-id': 'colorwell',
|
|
25
25
|
style: {
|
|
26
26
|
background: background(props)
|
|
@@ -29,8 +29,5 @@ const StyledColorWell = styled.div.attrs(props => ({
|
|
|
29
29
|
displayName: "StyledColorWell",
|
|
30
30
|
componentId: "sc-1gg9z8m-0"
|
|
31
31
|
})(["position:relative;margin-bottom:", "px;cursor:pointer;height:208px;overflow:hidden;", ";"], props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
32
|
-
StyledColorWell.defaultProps = {
|
|
33
|
-
theme: DEFAULT_THEME
|
|
34
|
-
};
|
|
35
32
|
|
|
36
33
|
export { StyledColorWell };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled, { css } from 'styled-components';
|
|
8
8
|
import { stripUnit } from 'polished';
|
|
9
|
-
import { retrieveComponentStyles,
|
|
9
|
+
import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'colorpickers.colorpicker_colorwell_thumb';
|
|
12
12
|
const colorStyles = _ref => {
|
|
@@ -34,7 +34,7 @@ const sizeStyles = _ref2 => {
|
|
|
34
34
|
};
|
|
35
35
|
const StyledColorWellThumb = styled.div.attrs(props => ({
|
|
36
36
|
'data-garden-id': COMPONENT_ID,
|
|
37
|
-
'data-garden-version': '9.0.0-next.
|
|
37
|
+
'data-garden-version': '9.0.0-next.26',
|
|
38
38
|
'data-test-id': 'colorwell-thumb',
|
|
39
39
|
style: {
|
|
40
40
|
top: `${props.top}%`,
|
|
@@ -44,8 +44,5 @@ const StyledColorWellThumb = styled.div.attrs(props => ({
|
|
|
44
44
|
displayName: "StyledColorWellThumb",
|
|
45
45
|
componentId: "sc-1npyab0-0"
|
|
46
46
|
})(["position:absolute;border:", ";border-radius:50%;", " ", " ", ";"], props => props.theme.borders.sm, sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
47
|
-
StyledColorWellThumb.defaultProps = {
|
|
48
|
-
theme: DEFAULT_THEME
|
|
49
|
-
};
|
|
50
47
|
|
|
51
48
|
export { StyledColorWellThumb };
|
|
@@ -5,20 +5,17 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles
|
|
8
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { Field } from '@zendeskgarden/react-forms';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'colorpickers.colorpicker_hex_field';
|
|
12
12
|
const StyledHexField = styled(Field).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.26',
|
|
15
15
|
spellcheck: false
|
|
16
16
|
}).withConfig({
|
|
17
17
|
displayName: "StyledHexField",
|
|
18
18
|
componentId: "sc-ijq1c-0"
|
|
19
19
|
})(["display:flex;flex-basis:0;flex-direction:column;flex-grow:1;width:auto;text-align:center;input{direction:ltr;}", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
20
|
-
StyledHexField.defaultProps = {
|
|
21
|
-
theme: DEFAULT_THEME
|
|
22
|
-
};
|
|
23
20
|
|
|
24
21
|
export { StyledHexField };
|
|
@@ -5,19 +5,15 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
9
8
|
import { StyledRange, getTrackMargin, getTrackHeight } from '../common/StyledRange.js';
|
|
10
9
|
|
|
11
10
|
const COMPONENT_ID = 'colorpickers.colorpicker_hue';
|
|
12
11
|
const StyledHueRange = styled(StyledRange).attrs({
|
|
13
12
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.26'
|
|
15
14
|
}).withConfig({
|
|
16
15
|
displayName: "StyledHueRange",
|
|
17
16
|
componentId: "sc-1gdhww1-0"
|
|
18
17
|
})(["background:linear-gradient( to ", ",#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100% ) no-repeat;background-position:", ";background-size:100% ", "px;"], props => props.theme.rtl ? 'left' : 'right', props => !props.$isOpaque && `0 ${getTrackMargin(props)}px`, props => getTrackHeight(props));
|
|
19
|
-
StyledHueRange.defaultProps = {
|
|
20
|
-
theme: DEFAULT_THEME
|
|
21
|
-
};
|
|
22
18
|
|
|
23
19
|
export { StyledHueRange };
|
|
@@ -6,19 +6,16 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import { Input } from '@zendeskgarden/react-forms';
|
|
9
|
-
import { retrieveComponentStyles
|
|
9
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'colorpickers.colorpicker_input';
|
|
12
12
|
const StyledInput = styled(Input).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.26',
|
|
15
15
|
focusInset: false
|
|
16
16
|
}).withConfig({
|
|
17
17
|
displayName: "StyledInput",
|
|
18
18
|
componentId: "sc-1uzlutt-0"
|
|
19
19
|
})(["text-align:center;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
20
|
-
StyledInput.defaultProps = {
|
|
21
|
-
theme: DEFAULT_THEME
|
|
22
|
-
};
|
|
23
20
|
|
|
24
21
|
export { StyledInput };
|
|
@@ -5,18 +5,15 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles
|
|
8
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'colorpickers.colorpicker_input_group';
|
|
11
11
|
const StyledInputGroup = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.26'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledInputGroup",
|
|
16
16
|
componentId: "sc-1m9g2wg-0"
|
|
17
17
|
})(["display:flex;justify-content:space-between;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
-
StyledInputGroup.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
18
|
|
|
22
19
|
export { StyledInputGroup };
|
|
@@ -6,18 +6,15 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import { Label } from '@zendeskgarden/react-forms';
|
|
9
|
-
import { retrieveComponentStyles
|
|
9
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'colorpickers.colorpicker_label';
|
|
12
12
|
const StyledLabel = styled(Label).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.26'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledLabel",
|
|
17
17
|
componentId: "sc-1vxt3m9-0"
|
|
18
18
|
})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
19
|
-
StyledLabel.defaultProps = {
|
|
20
|
-
theme: DEFAULT_THEME
|
|
21
|
-
};
|
|
22
19
|
|
|
23
20
|
export { StyledLabel };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import { rgba } from 'polished';
|
|
9
|
-
import { retrieveComponentStyles,
|
|
9
|
+
import { retrieveComponentStyles, getCheckeredBackground } from '@zendeskgarden/react-theming';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'colorpickers.colorpicker_preview_box';
|
|
12
12
|
const background = props => {
|
|
@@ -26,14 +26,11 @@ const StyledPreview = styled.div.attrs(props => ({
|
|
|
26
26
|
background: background(props)
|
|
27
27
|
},
|
|
28
28
|
'data-garden-id': COMPONENT_ID,
|
|
29
|
-
'data-garden-version': '9.0.0-next.
|
|
29
|
+
'data-garden-version': '9.0.0-next.26',
|
|
30
30
|
'data-test-id': 'preview-box'
|
|
31
31
|
})).withConfig({
|
|
32
32
|
displayName: "StyledPreview",
|
|
33
33
|
componentId: "sc-1z5nh7-0"
|
|
34
34
|
})(["flex-shrink:0;border-radius:", ";box-shadow:inset 0 0 0 ", " ", ";width:", "px;height:", "px;", ";"], props => props.theme.borderRadii.md, props => props.theme.borderWidths.sm, props => rgba(props.theme.palette.black, 0.19), props => props.theme.space.base * (props.$isOpaque ? 6 : 8), props => props.theme.space.base * (props.$isOpaque ? 6 : 8), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
35
|
-
StyledPreview.defaultProps = {
|
|
36
|
-
theme: DEFAULT_THEME
|
|
37
|
-
};
|
|
38
35
|
|
|
39
36
|
export { StyledPreview };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import { Field } from '@zendeskgarden/react-forms';
|
|
8
8
|
import styled from 'styled-components';
|
|
9
|
-
import { retrieveComponentStyles
|
|
9
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'colorpickers.colorpicker_rgb_field';
|
|
12
12
|
const sizeStyles = theme => {
|
|
@@ -20,13 +20,10 @@ const sizeStyles = theme => {
|
|
|
20
20
|
};
|
|
21
21
|
const StyledRGBAField = styled(Field).attrs({
|
|
22
22
|
'data-garden-id': COMPONENT_ID,
|
|
23
|
-
'data-garden-version': '9.0.0-next.
|
|
23
|
+
'data-garden-version': '9.0.0-next.26'
|
|
24
24
|
}).withConfig({
|
|
25
25
|
displayName: "StyledRGBAField",
|
|
26
26
|
componentId: "sc-13266k8-0"
|
|
27
27
|
})(["display:flex;flex-direction:column;text-align:center;", ";", ";"], props => sizeStyles(props.theme), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
28
|
-
StyledRGBAField.defaultProps = {
|
|
29
|
-
theme: DEFAULT_THEME
|
|
30
|
-
};
|
|
31
28
|
|
|
32
29
|
export { StyledRGBAField };
|
|
@@ -5,18 +5,15 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles
|
|
8
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'colorpickers.colorpicker_slider_group';
|
|
11
11
|
const StyledSliderGroup = styled.div.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.26'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledSliderGroup",
|
|
16
16
|
componentId: "sc-tigkzg-0"
|
|
17
17
|
})(["display:flex;justify-content:space-between;margin-bottom:", "px;", ";"], props => props.theme.space.base * 2, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
-
StyledSliderGroup.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
18
|
|
|
22
19
|
export { StyledSliderGroup };
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles
|
|
8
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
import { getTrackHeight, getTrackMargin } from '../common/StyledRange.js';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'colorpickers.colorpicker_sliders';
|
|
@@ -33,13 +33,10 @@ const sizeStyles = props => {
|
|
|
33
33
|
};
|
|
34
34
|
const StyledSliders = styled.div.attrs({
|
|
35
35
|
'data-garden-id': COMPONENT_ID,
|
|
36
|
-
'data-garden-version': '9.0.0-next.
|
|
36
|
+
'data-garden-version': '9.0.0-next.26'
|
|
37
37
|
}).withConfig({
|
|
38
38
|
displayName: "StyledSliders",
|
|
39
39
|
componentId: "sc-1lgr50m-0"
|
|
40
40
|
})(["position:relative;margin-", ":", "px;width:100%;", " ", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 2, sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
41
|
-
StyledSliders.defaultProps = {
|
|
42
|
-
theme: DEFAULT_THEME
|
|
43
|
-
};
|
|
44
41
|
|
|
45
42
|
export { StyledSliders };
|
|
@@ -5,18 +5,14 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
|
|
9
8
|
import { Button } from '@zendeskgarden/react-buttons';
|
|
10
9
|
|
|
11
10
|
const StyledButton = styled(Button).attrs({
|
|
12
11
|
isNeutral: true,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
12
|
+
'data-garden-version': '9.0.0-next.26'
|
|
14
13
|
}).withConfig({
|
|
15
14
|
displayName: "StyledButton",
|
|
16
15
|
componentId: "sc-1dlijfv-0"
|
|
17
16
|
})(["padding:0;width:", "px;max-width:", "px;&:last-of-type:not(:first-child){border-top-", "-radius:", " !important;border-bottom-", "-radius:", " !important;}"], props => props.theme.space.base * 17, props => props.theme.space.base * 17, props => props.theme.rtl ? 'left' : 'right', props => props.theme.borderRadii.md, props => props.theme.rtl ? 'left' : 'right', props => props.theme.borderRadii.md);
|
|
18
|
-
StyledButton.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
17
|
|
|
22
18
|
export { StyledButton };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import { rgba } from 'polished';
|
|
9
|
-
import { getCheckeredBackground, retrieveComponentStyles
|
|
9
|
+
import { getCheckeredBackground, retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'colorpickers.colordialog_preview';
|
|
12
12
|
const background = _ref => {
|
|
@@ -39,14 +39,11 @@ const StyledButtonPreview = styled.span.attrs(props => ({
|
|
|
39
39
|
})
|
|
40
40
|
},
|
|
41
41
|
'data-garden-id': COMPONENT_ID,
|
|
42
|
-
'data-garden-version': '9.0.0-next.
|
|
42
|
+
'data-garden-version': '9.0.0-next.26',
|
|
43
43
|
'data-test-id': 'dialog-preview'
|
|
44
44
|
})).withConfig({
|
|
45
45
|
displayName: "StyledButtonPreview",
|
|
46
46
|
componentId: "sc-yxis8h-0"
|
|
47
47
|
})(["display:inline-block;bottom:", "px;border-radius:", ";box-shadow:inset 0 0 0 ", " ", ";width:", "px;height:", "px;", ";"], props => props.theme.space.base, props => props.theme.borderRadii.sm, props => props.theme.borderWidths.sm, props => rgba(props.theme.palette.black, 0.19), props => props.theme.space.base * 5, props => props.theme.space.base * 5, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
48
|
-
StyledButtonPreview.defaultProps = {
|
|
49
|
-
theme: DEFAULT_THEME
|
|
50
|
-
};
|
|
51
48
|
|
|
52
49
|
export { StyledButtonPreview };
|
|
@@ -6,18 +6,15 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import { TooltipDialog } from '@zendeskgarden/react-modals';
|
|
9
|
-
import { retrieveComponentStyles
|
|
9
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'colorpickers.colordialog_tooltipdialog_body';
|
|
12
12
|
const StyledTooltipBody = styled(TooltipDialog.Body).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.26'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledTooltipBody",
|
|
17
17
|
componentId: "sc-1ueddpo-0"
|
|
18
18
|
})(["padding:0;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
19
|
-
StyledTooltipBody.defaultProps = {
|
|
20
|
-
theme: DEFAULT_THEME
|
|
21
|
-
};
|
|
22
19
|
|
|
23
20
|
export { StyledTooltipBody };
|
|
@@ -6,18 +6,15 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import { TooltipDialog } from '@zendeskgarden/react-modals';
|
|
9
|
-
import { retrieveComponentStyles
|
|
9
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
|
|
11
11
|
const COMPONENT_ID = 'colorpickers.colordialog_tooltipdialog';
|
|
12
12
|
const StyledTooltipDialog = styled(TooltipDialog).attrs({
|
|
13
13
|
'data-garden-id': COMPONENT_ID,
|
|
14
|
-
'data-garden-version': '9.0.0-next.
|
|
14
|
+
'data-garden-version': '9.0.0-next.26'
|
|
15
15
|
}).withConfig({
|
|
16
16
|
displayName: "StyledTooltipDialog",
|
|
17
17
|
componentId: "sc-1vbkccl-0"
|
|
18
18
|
})(["width:auto !important;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
19
|
-
StyledTooltipDialog.defaultProps = {
|
|
20
|
-
theme: DEFAULT_THEME
|
|
21
|
-
};
|
|
22
19
|
|
|
23
20
|
export { StyledTooltipDialog };
|
|
@@ -5,18 +5,15 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles
|
|
8
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'colorpickers.swatch_cell';
|
|
11
11
|
const StyledCell = styled.td.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.26'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledCell",
|
|
16
16
|
componentId: "sc-qr3oit-0"
|
|
17
17
|
})(["padding:", "px;font-size:0;", ";"], props => props.theme.space.base, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
-
StyledCell.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
18
|
|
|
22
19
|
export { StyledCell };
|
|
@@ -5,18 +5,15 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles
|
|
8
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'colorpickers.color_swatch';
|
|
11
11
|
const StyledColorSwatch = styled.table.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.26'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledColorSwatch",
|
|
16
16
|
componentId: "sc-ajx440-0"
|
|
17
17
|
})(["border-collapse:collapse;line-height:normal;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
-
StyledColorSwatch.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
18
|
|
|
22
19
|
export { StyledColorSwatch };
|
|
@@ -5,18 +5,15 @@
|
|
|
5
5
|
* found at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { retrieveComponentStyles
|
|
8
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
9
9
|
|
|
10
10
|
const COMPONENT_ID = 'colorpickers.color_swatch_input';
|
|
11
11
|
const StyledColorSwatchInput = styled.input.attrs({
|
|
12
12
|
'data-garden-id': COMPONENT_ID,
|
|
13
|
-
'data-garden-version': '9.0.0-next.
|
|
13
|
+
'data-garden-version': '9.0.0-next.26'
|
|
14
14
|
}).withConfig({
|
|
15
15
|
displayName: "StyledColorSwatchInput",
|
|
16
16
|
componentId: "sc-em45h0-0"
|
|
17
17
|
})(["position:absolute;opacity:0;z-index:1;margin:0;cursor:pointer;width:100%;height:100%;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
18
|
-
StyledColorSwatchInput.defaultProps = {
|
|
19
|
-
theme: DEFAULT_THEME
|
|
20
|
-
};
|
|
21
18
|
|
|
22
19
|
export { StyledColorSwatchInput };
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import { parseToRgb, readableColor } from 'polished';
|
|
9
|
-
import { focusStyles, retrieveComponentStyles,
|
|
9
|
+
import { focusStyles, retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { StyledButtonPreview } from '../ColorPickerDialog/StyledButtonPreview.js';
|
|
11
11
|
|
|
12
12
|
const COMPONENT_ID = 'colorpickers.color_swatch_label';
|
|
@@ -38,7 +38,7 @@ const colorStyles = _ref => {
|
|
|
38
38
|
const StyledColorSwatchLabel = styled(StyledButtonPreview).attrs({
|
|
39
39
|
as: 'label',
|
|
40
40
|
'data-garden-id': COMPONENT_ID,
|
|
41
|
-
'data-garden-version': '9.0.0-next.
|
|
41
|
+
'data-garden-version': '9.0.0-next.26'
|
|
42
42
|
}).withConfig({
|
|
43
43
|
displayName: "StyledColorSwatchLabel",
|
|
44
44
|
componentId: "sc-1aghocg-0"
|
|
@@ -46,8 +46,5 @@ const StyledColorSwatchLabel = styled(StyledButtonPreview).attrs({
|
|
|
46
46
|
theme: props.theme,
|
|
47
47
|
selector: '&:has(:focus-visible)'
|
|
48
48
|
}), props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
49
|
-
StyledColorSwatchLabel.defaultProps = {
|
|
50
|
-
theme: DEFAULT_THEME
|
|
51
|
-
};
|
|
52
49
|
|
|
53
50
|
export { StyledColorSwatchLabel };
|
|
@@ -6,19 +6,16 @@
|
|
|
6
6
|
*/
|
|
7
7
|
import styled from 'styled-components';
|
|
8
8
|
import SvgCheckSmFill from '../../node_modules/@zendeskgarden/svg-icons/src/12/check-sm-fill.svg.js';
|
|
9
|
-
import { retrieveComponentStyles
|
|
9
|
+
import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
|
|
10
10
|
import { StyledColorSwatchInput } from './StyledColorSwatchInput.js';
|
|
11
11
|
|
|
12
12
|
const COMPONENT_ID = 'colorpickers.colorswatch_check';
|
|
13
13
|
const StyledIcon = styled(SvgCheckSmFill).attrs({
|
|
14
14
|
'data-garden-id': COMPONENT_ID,
|
|
15
|
-
'data-garden-version': '9.0.0-next.
|
|
15
|
+
'data-garden-version': '9.0.0-next.26'
|
|
16
16
|
}).withConfig({
|
|
17
17
|
displayName: "StyledIcon",
|
|
18
18
|
componentId: "sc-8oigif-0"
|
|
19
19
|
})(["position:absolute;top:0;left:0;transition:opacity 0.2s ease-in-out;opacity:0;width:100%;height:100%;", ":checked ~ &{opacity:1;}", ";"], StyledColorSwatchInput, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
20
|
-
StyledIcon.defaultProps = {
|
|
21
|
-
theme: DEFAULT_THEME
|
|
22
|
-
};
|
|
23
20
|
|
|
24
21
|
export { StyledIcon };
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
import { Range } from '@zendeskgarden/react-forms';
|
|
8
8
|
import styled from 'styled-components';
|
|
9
9
|
import { stripUnit } from 'polished';
|
|
10
|
-
import { retrieveComponentStyles,
|
|
10
|
+
import { retrieveComponentStyles, getColor } from '@zendeskgarden/react-theming';
|
|
11
11
|
|
|
12
12
|
const COMPONENT_ID = 'colorpickers.colorpicker_range';
|
|
13
13
|
const thumbStyles = function (styles) {
|
|
@@ -145,7 +145,7 @@ const sizeStyles = props => {
|
|
|
145
145
|
};
|
|
146
146
|
const StyledRange = styled(Range).attrs({
|
|
147
147
|
'data-garden-id': COMPONENT_ID,
|
|
148
|
-
'data-garden-version': '9.0.0-next.
|
|
148
|
+
'data-garden-version': '9.0.0-next.26',
|
|
149
149
|
hasLowerTrack: false
|
|
150
150
|
}).withConfig({
|
|
151
151
|
displayName: "StyledRange",
|
|
@@ -153,8 +153,5 @@ const StyledRange = styled(Range).attrs({
|
|
|
153
153
|
})(["", ";", " ", ";", ";"], sizeStyles, trackStyles(`
|
|
154
154
|
border-radius: 0;
|
|
155
155
|
`), colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
|
|
156
|
-
StyledRange.defaultProps = {
|
|
157
|
-
theme: DEFAULT_THEME
|
|
158
|
-
};
|
|
159
156
|
|
|
160
157
|
export { StyledRange, getTrackHeight, getTrackMargin, trackStyles };
|
package/dist/index.cjs.js
CHANGED
|
@@ -137,14 +137,11 @@ const getColorPickerWidth = props => {
|
|
|
137
137
|
};
|
|
138
138
|
const StyledColorPicker = styled__default.default.div.attrs({
|
|
139
139
|
'data-garden-id': COMPONENT_ID$l,
|
|
140
|
-
'data-garden-version': '9.0.0-next.
|
|
140
|
+
'data-garden-version': '9.0.0-next.26'
|
|
141
141
|
}).withConfig({
|
|
142
142
|
displayName: "StyledColorPicker",
|
|
143
143
|
componentId: "sc-gspq4q-0"
|
|
144
144
|
})(["width:", "px;min-width:", "px;", ";"], getColorPickerWidth, getColorPickerWidth, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$l, props));
|
|
145
|
-
StyledColorPicker.defaultProps = {
|
|
146
|
-
theme: reactTheming.DEFAULT_THEME
|
|
147
|
-
};
|
|
148
145
|
|
|
149
146
|
const COMPONENT_ID$k = 'colorpickers.colorpicker_range';
|
|
150
147
|
const thumbStyles = function (styles) {
|
|
@@ -282,7 +279,7 @@ const sizeStyles$3 = props => {
|
|
|
282
279
|
};
|
|
283
280
|
const StyledRange = styled__default.default(reactForms.Range).attrs({
|
|
284
281
|
'data-garden-id': COMPONENT_ID$k,
|
|
285
|
-
'data-garden-version': '9.0.0-next.
|
|
282
|
+
'data-garden-version': '9.0.0-next.26',
|
|
286
283
|
hasLowerTrack: false
|
|
287
284
|
}).withConfig({
|
|
288
285
|
displayName: "StyledRange",
|
|
@@ -290,21 +287,15 @@ const StyledRange = styled__default.default(reactForms.Range).attrs({
|
|
|
290
287
|
})(["", ";", " ", ";", ";"], sizeStyles$3, trackStyles(`
|
|
291
288
|
border-radius: 0;
|
|
292
289
|
`), colorStyles$2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$k, props));
|
|
293
|
-
StyledRange.defaultProps = {
|
|
294
|
-
theme: reactTheming.DEFAULT_THEME
|
|
295
|
-
};
|
|
296
290
|
|
|
297
291
|
const COMPONENT_ID$j = 'colorpickers.colorpicker_hue';
|
|
298
292
|
const StyledHueRange = styled__default.default(StyledRange).attrs({
|
|
299
293
|
'data-garden-id': COMPONENT_ID$j,
|
|
300
|
-
'data-garden-version': '9.0.0-next.
|
|
294
|
+
'data-garden-version': '9.0.0-next.26'
|
|
301
295
|
}).withConfig({
|
|
302
296
|
displayName: "StyledHueRange",
|
|
303
297
|
componentId: "sc-1gdhww1-0"
|
|
304
298
|
})(["background:linear-gradient( to ", ",#f00 0%,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,#f00 100% ) no-repeat;background-position:", ";background-size:100% ", "px;"], props => props.theme.rtl ? 'left' : 'right', props => !props.$isOpaque && `0 ${getTrackMargin(props)}px`, props => getTrackHeight(props));
|
|
305
|
-
StyledHueRange.defaultProps = {
|
|
306
|
-
theme: reactTheming.DEFAULT_THEME
|
|
307
|
-
};
|
|
308
299
|
|
|
309
300
|
const COMPONENT_ID$i = 'colorpickers.colorpicker_alpha';
|
|
310
301
|
const background$3 = props => {
|
|
@@ -328,14 +319,11 @@ const StyledAlphaRange = styled__default.default(StyledRange).attrs(props => ({
|
|
|
328
319
|
background: background$3(props)
|
|
329
320
|
},
|
|
330
321
|
'data-garden-id': COMPONENT_ID$i,
|
|
331
|
-
'data-garden-version': '9.0.0-next.
|
|
322
|
+
'data-garden-version': '9.0.0-next.26'
|
|
332
323
|
})).withConfig({
|
|
333
324
|
displayName: "StyledAlphaRange",
|
|
334
325
|
componentId: "sc-1f6hp2j-0"
|
|
335
326
|
})([""]);
|
|
336
|
-
StyledAlphaRange.defaultProps = {
|
|
337
|
-
theme: reactTheming.DEFAULT_THEME
|
|
338
|
-
};
|
|
339
327
|
|
|
340
328
|
const COMPONENT_ID$h = 'colorpickers.colorpicker_preview_box';
|
|
341
329
|
const background$2 = props => {
|
|
@@ -355,15 +343,12 @@ const StyledPreview = styled__default.default.div.attrs(props => ({
|
|
|
355
343
|
background: background$2(props)
|
|
356
344
|
},
|
|
357
345
|
'data-garden-id': COMPONENT_ID$h,
|
|
358
|
-
'data-garden-version': '9.0.0-next.
|
|
346
|
+
'data-garden-version': '9.0.0-next.26',
|
|
359
347
|
'data-test-id': 'preview-box'
|
|
360
348
|
})).withConfig({
|
|
361
349
|
displayName: "StyledPreview",
|
|
362
350
|
componentId: "sc-1z5nh7-0"
|
|
363
351
|
})(["flex-shrink:0;border-radius:", ";box-shadow:inset 0 0 0 ", " ", ";width:", "px;height:", "px;", ";"], props => props.theme.borderRadii.md, props => props.theme.borderWidths.sm, props => polished.rgba(props.theme.palette.black, 0.19), props => props.theme.space.base * (props.$isOpaque ? 6 : 8), props => props.theme.space.base * (props.$isOpaque ? 6 : 8), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$h, props));
|
|
364
|
-
StyledPreview.defaultProps = {
|
|
365
|
-
theme: reactTheming.DEFAULT_THEME
|
|
366
|
-
};
|
|
367
352
|
|
|
368
353
|
const COMPONENT_ID$g = 'colorpickers.colorpicker_colorwell';
|
|
369
354
|
const background$1 = props => {
|
|
@@ -377,7 +362,7 @@ const background$1 = props => {
|
|
|
377
362
|
};
|
|
378
363
|
const StyledColorWell = styled__default.default.div.attrs(props => ({
|
|
379
364
|
'data-garden-id': COMPONENT_ID$g,
|
|
380
|
-
'data-garden-version': '9.0.0-next.
|
|
365
|
+
'data-garden-version': '9.0.0-next.26',
|
|
381
366
|
'data-test-id': 'colorwell',
|
|
382
367
|
style: {
|
|
383
368
|
background: background$1(props)
|
|
@@ -386,9 +371,6 @@ const StyledColorWell = styled__default.default.div.attrs(props => ({
|
|
|
386
371
|
displayName: "StyledColorWell",
|
|
387
372
|
componentId: "sc-1gg9z8m-0"
|
|
388
373
|
})(["position:relative;margin-bottom:", "px;cursor:pointer;height:208px;overflow:hidden;", ";"], props => props.theme.space.base * 2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$g, props));
|
|
389
|
-
StyledColorWell.defaultProps = {
|
|
390
|
-
theme: reactTheming.DEFAULT_THEME
|
|
391
|
-
};
|
|
392
374
|
|
|
393
375
|
const COMPONENT_ID$f = 'colorpickers.colorpicker_colorwell_thumb';
|
|
394
376
|
const colorStyles$1 = _ref => {
|
|
@@ -416,7 +398,7 @@ const sizeStyles$2 = _ref2 => {
|
|
|
416
398
|
};
|
|
417
399
|
const StyledColorWellThumb = styled__default.default.div.attrs(props => ({
|
|
418
400
|
'data-garden-id': COMPONENT_ID$f,
|
|
419
|
-
'data-garden-version': '9.0.0-next.
|
|
401
|
+
'data-garden-version': '9.0.0-next.26',
|
|
420
402
|
'data-test-id': 'colorwell-thumb',
|
|
421
403
|
style: {
|
|
422
404
|
top: `${props.top}%`,
|
|
@@ -426,71 +408,53 @@ const StyledColorWellThumb = styled__default.default.div.attrs(props => ({
|
|
|
426
408
|
displayName: "StyledColorWellThumb",
|
|
427
409
|
componentId: "sc-1npyab0-0"
|
|
428
410
|
})(["position:absolute;border:", ";border-radius:50%;", " ", " ", ";"], props => props.theme.borders.sm, sizeStyles$2, colorStyles$1, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$f, props));
|
|
429
|
-
StyledColorWellThumb.defaultProps = {
|
|
430
|
-
theme: reactTheming.DEFAULT_THEME
|
|
431
|
-
};
|
|
432
411
|
|
|
433
412
|
const COMPONENT_ID$e = 'colorpickers.colorpicker_slider_group';
|
|
434
413
|
const StyledSliderGroup = styled__default.default.div.attrs({
|
|
435
414
|
'data-garden-id': COMPONENT_ID$e,
|
|
436
|
-
'data-garden-version': '9.0.0-next.
|
|
415
|
+
'data-garden-version': '9.0.0-next.26'
|
|
437
416
|
}).withConfig({
|
|
438
417
|
displayName: "StyledSliderGroup",
|
|
439
418
|
componentId: "sc-tigkzg-0"
|
|
440
419
|
})(["display:flex;justify-content:space-between;margin-bottom:", "px;", ";"], props => props.theme.space.base * 2, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$e, props));
|
|
441
|
-
StyledSliderGroup.defaultProps = {
|
|
442
|
-
theme: reactTheming.DEFAULT_THEME
|
|
443
|
-
};
|
|
444
420
|
|
|
445
421
|
const COMPONENT_ID$d = 'colorpickers.colorpicker_hex_field';
|
|
446
422
|
const StyledHexField = styled__default.default(reactForms.Field).attrs({
|
|
447
423
|
'data-garden-id': COMPONENT_ID$d,
|
|
448
|
-
'data-garden-version': '9.0.0-next.
|
|
424
|
+
'data-garden-version': '9.0.0-next.26',
|
|
449
425
|
spellcheck: false
|
|
450
426
|
}).withConfig({
|
|
451
427
|
displayName: "StyledHexField",
|
|
452
428
|
componentId: "sc-ijq1c-0"
|
|
453
429
|
})(["display:flex;flex-basis:0;flex-direction:column;flex-grow:1;width:auto;text-align:center;input{direction:ltr;}", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$d, props));
|
|
454
|
-
StyledHexField.defaultProps = {
|
|
455
|
-
theme: reactTheming.DEFAULT_THEME
|
|
456
|
-
};
|
|
457
430
|
|
|
458
431
|
const COMPONENT_ID$c = 'colorpickers.colorpicker_label';
|
|
459
432
|
const StyledLabel = styled__default.default(reactForms.Label).attrs({
|
|
460
433
|
'data-garden-id': COMPONENT_ID$c,
|
|
461
|
-
'data-garden-version': '9.0.0-next.
|
|
434
|
+
'data-garden-version': '9.0.0-next.26'
|
|
462
435
|
}).withConfig({
|
|
463
436
|
displayName: "StyledLabel",
|
|
464
437
|
componentId: "sc-1vxt3m9-0"
|
|
465
438
|
})(["overflow:hidden;text-overflow:ellipsis;white-space:nowrap;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$c, props));
|
|
466
|
-
StyledLabel.defaultProps = {
|
|
467
|
-
theme: reactTheming.DEFAULT_THEME
|
|
468
|
-
};
|
|
469
439
|
|
|
470
440
|
const COMPONENT_ID$b = 'colorpickers.colorpicker_input';
|
|
471
441
|
const StyledInput = styled__default.default(reactForms.Input).attrs({
|
|
472
442
|
'data-garden-id': COMPONENT_ID$b,
|
|
473
|
-
'data-garden-version': '9.0.0-next.
|
|
443
|
+
'data-garden-version': '9.0.0-next.26',
|
|
474
444
|
focusInset: false
|
|
475
445
|
}).withConfig({
|
|
476
446
|
displayName: "StyledInput",
|
|
477
447
|
componentId: "sc-1uzlutt-0"
|
|
478
448
|
})(["text-align:center;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$b, props));
|
|
479
|
-
StyledInput.defaultProps = {
|
|
480
|
-
theme: reactTheming.DEFAULT_THEME
|
|
481
|
-
};
|
|
482
449
|
|
|
483
450
|
const COMPONENT_ID$a = 'colorpickers.colorpicker_input_group';
|
|
484
451
|
const StyledInputGroup = styled__default.default.div.attrs({
|
|
485
452
|
'data-garden-id': COMPONENT_ID$a,
|
|
486
|
-
'data-garden-version': '9.0.0-next.
|
|
453
|
+
'data-garden-version': '9.0.0-next.26'
|
|
487
454
|
}).withConfig({
|
|
488
455
|
displayName: "StyledInputGroup",
|
|
489
456
|
componentId: "sc-1m9g2wg-0"
|
|
490
457
|
})(["display:flex;justify-content:space-between;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$a, props));
|
|
491
|
-
StyledInputGroup.defaultProps = {
|
|
492
|
-
theme: reactTheming.DEFAULT_THEME
|
|
493
|
-
};
|
|
494
458
|
|
|
495
459
|
const COMPONENT_ID$9 = 'colorpickers.colorpicker_rgb_field';
|
|
496
460
|
const sizeStyles$1 = theme => {
|
|
@@ -504,14 +468,11 @@ const sizeStyles$1 = theme => {
|
|
|
504
468
|
};
|
|
505
469
|
const StyledRGBAField = styled__default.default(reactForms.Field).attrs({
|
|
506
470
|
'data-garden-id': COMPONENT_ID$9,
|
|
507
|
-
'data-garden-version': '9.0.0-next.
|
|
471
|
+
'data-garden-version': '9.0.0-next.26'
|
|
508
472
|
}).withConfig({
|
|
509
473
|
displayName: "StyledRGBAField",
|
|
510
474
|
componentId: "sc-13266k8-0"
|
|
511
475
|
})(["display:flex;flex-direction:column;text-align:center;", ";", ";"], props => sizeStyles$1(props.theme), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$9, props));
|
|
512
|
-
StyledRGBAField.defaultProps = {
|
|
513
|
-
theme: reactTheming.DEFAULT_THEME
|
|
514
|
-
};
|
|
515
476
|
|
|
516
477
|
const COMPONENT_ID$8 = 'colorpickers.colorpicker_sliders';
|
|
517
478
|
const sizeStyles = props => {
|
|
@@ -538,25 +499,19 @@ const sizeStyles = props => {
|
|
|
538
499
|
};
|
|
539
500
|
const StyledSliders = styled__default.default.div.attrs({
|
|
540
501
|
'data-garden-id': COMPONENT_ID$8,
|
|
541
|
-
'data-garden-version': '9.0.0-next.
|
|
502
|
+
'data-garden-version': '9.0.0-next.26'
|
|
542
503
|
}).withConfig({
|
|
543
504
|
displayName: "StyledSliders",
|
|
544
505
|
componentId: "sc-1lgr50m-0"
|
|
545
506
|
})(["position:relative;margin-", ":", "px;width:100%;", " ", ";"], props => props.theme.rtl ? 'right' : 'left', props => props.theme.space.base * 2, sizeStyles, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$8, props));
|
|
546
|
-
StyledSliders.defaultProps = {
|
|
547
|
-
theme: reactTheming.DEFAULT_THEME
|
|
548
|
-
};
|
|
549
507
|
|
|
550
508
|
const StyledButton = styled__default.default(reactButtons.Button).attrs({
|
|
551
509
|
isNeutral: true,
|
|
552
|
-
'data-garden-version': '9.0.0-next.
|
|
510
|
+
'data-garden-version': '9.0.0-next.26'
|
|
553
511
|
}).withConfig({
|
|
554
512
|
displayName: "StyledButton",
|
|
555
513
|
componentId: "sc-1dlijfv-0"
|
|
556
514
|
})(["padding:0;width:", "px;max-width:", "px;&:last-of-type:not(:first-child){border-top-", "-radius:", " !important;border-bottom-", "-radius:", " !important;}"], props => props.theme.space.base * 17, props => props.theme.space.base * 17, props => props.theme.rtl ? 'left' : 'right', props => props.theme.borderRadii.md, props => props.theme.rtl ? 'left' : 'right', props => props.theme.borderRadii.md);
|
|
557
|
-
StyledButton.defaultProps = {
|
|
558
|
-
theme: reactTheming.DEFAULT_THEME
|
|
559
|
-
};
|
|
560
515
|
|
|
561
516
|
const COMPONENT_ID$7 = 'colorpickers.colordialog_preview';
|
|
562
517
|
const background = _ref => {
|
|
@@ -589,63 +544,48 @@ const StyledButtonPreview = styled__default.default.span.attrs(props => ({
|
|
|
589
544
|
})
|
|
590
545
|
},
|
|
591
546
|
'data-garden-id': COMPONENT_ID$7,
|
|
592
|
-
'data-garden-version': '9.0.0-next.
|
|
547
|
+
'data-garden-version': '9.0.0-next.26',
|
|
593
548
|
'data-test-id': 'dialog-preview'
|
|
594
549
|
})).withConfig({
|
|
595
550
|
displayName: "StyledButtonPreview",
|
|
596
551
|
componentId: "sc-yxis8h-0"
|
|
597
552
|
})(["display:inline-block;bottom:", "px;border-radius:", ";box-shadow:inset 0 0 0 ", " ", ";width:", "px;height:", "px;", ";"], props => props.theme.space.base, props => props.theme.borderRadii.sm, props => props.theme.borderWidths.sm, props => polished.rgba(props.theme.palette.black, 0.19), props => props.theme.space.base * 5, props => props.theme.space.base * 5, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$7, props));
|
|
598
|
-
StyledButtonPreview.defaultProps = {
|
|
599
|
-
theme: reactTheming.DEFAULT_THEME
|
|
600
|
-
};
|
|
601
553
|
|
|
602
554
|
const COMPONENT_ID$6 = 'colorpickers.colordialog_tooltipdialog';
|
|
603
555
|
const StyledTooltipDialog = styled__default.default(reactModals.TooltipDialog).attrs({
|
|
604
556
|
'data-garden-id': COMPONENT_ID$6,
|
|
605
|
-
'data-garden-version': '9.0.0-next.
|
|
557
|
+
'data-garden-version': '9.0.0-next.26'
|
|
606
558
|
}).withConfig({
|
|
607
559
|
displayName: "StyledTooltipDialog",
|
|
608
560
|
componentId: "sc-1vbkccl-0"
|
|
609
561
|
})(["width:auto !important;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$6, props));
|
|
610
|
-
StyledTooltipDialog.defaultProps = {
|
|
611
|
-
theme: reactTheming.DEFAULT_THEME
|
|
612
|
-
};
|
|
613
562
|
|
|
614
563
|
const COMPONENT_ID$5 = 'colorpickers.colordialog_tooltipdialog_body';
|
|
615
564
|
const StyledTooltipBody = styled__default.default(reactModals.TooltipDialog.Body).attrs({
|
|
616
565
|
'data-garden-id': COMPONENT_ID$5,
|
|
617
|
-
'data-garden-version': '9.0.0-next.
|
|
566
|
+
'data-garden-version': '9.0.0-next.26'
|
|
618
567
|
}).withConfig({
|
|
619
568
|
displayName: "StyledTooltipBody",
|
|
620
569
|
componentId: "sc-1ueddpo-0"
|
|
621
570
|
})(["padding:0;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$5, props));
|
|
622
|
-
StyledTooltipBody.defaultProps = {
|
|
623
|
-
theme: reactTheming.DEFAULT_THEME
|
|
624
|
-
};
|
|
625
571
|
|
|
626
572
|
const COMPONENT_ID$4 = 'colorpickers.color_swatch';
|
|
627
573
|
const StyledColorSwatch = styled__default.default.table.attrs({
|
|
628
574
|
'data-garden-id': COMPONENT_ID$4,
|
|
629
|
-
'data-garden-version': '9.0.0-next.
|
|
575
|
+
'data-garden-version': '9.0.0-next.26'
|
|
630
576
|
}).withConfig({
|
|
631
577
|
displayName: "StyledColorSwatch",
|
|
632
578
|
componentId: "sc-ajx440-0"
|
|
633
579
|
})(["border-collapse:collapse;line-height:normal;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$4, props));
|
|
634
|
-
StyledColorSwatch.defaultProps = {
|
|
635
|
-
theme: reactTheming.DEFAULT_THEME
|
|
636
|
-
};
|
|
637
580
|
|
|
638
581
|
const COMPONENT_ID$3 = 'colorpickers.color_swatch_input';
|
|
639
582
|
const StyledColorSwatchInput = styled__default.default.input.attrs({
|
|
640
583
|
'data-garden-id': COMPONENT_ID$3,
|
|
641
|
-
'data-garden-version': '9.0.0-next.
|
|
584
|
+
'data-garden-version': '9.0.0-next.26'
|
|
642
585
|
}).withConfig({
|
|
643
586
|
displayName: "StyledColorSwatchInput",
|
|
644
587
|
componentId: "sc-em45h0-0"
|
|
645
588
|
})(["position:absolute;opacity:0;z-index:1;margin:0;cursor:pointer;width:100%;height:100%;", ";"], props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
|
|
646
|
-
StyledColorSwatchInput.defaultProps = {
|
|
647
|
-
theme: reactTheming.DEFAULT_THEME
|
|
648
|
-
};
|
|
649
589
|
|
|
650
590
|
const COMPONENT_ID$2 = 'colorpickers.color_swatch_label';
|
|
651
591
|
const colorStyles = _ref => {
|
|
@@ -676,7 +616,7 @@ const colorStyles = _ref => {
|
|
|
676
616
|
const StyledColorSwatchLabel = styled__default.default(StyledButtonPreview).attrs({
|
|
677
617
|
as: 'label',
|
|
678
618
|
'data-garden-id': COMPONENT_ID$2,
|
|
679
|
-
'data-garden-version': '9.0.0-next.
|
|
619
|
+
'data-garden-version': '9.0.0-next.26'
|
|
680
620
|
}).withConfig({
|
|
681
621
|
displayName: "StyledColorSwatchLabel",
|
|
682
622
|
componentId: "sc-1aghocg-0"
|
|
@@ -684,9 +624,6 @@ const StyledColorSwatchLabel = styled__default.default(StyledButtonPreview).attr
|
|
|
684
624
|
theme: props.theme,
|
|
685
625
|
selector: '&:has(:focus-visible)'
|
|
686
626
|
}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$2, props));
|
|
687
|
-
StyledColorSwatchLabel.defaultProps = {
|
|
688
|
-
theme: reactTheming.DEFAULT_THEME
|
|
689
|
-
};
|
|
690
627
|
|
|
691
628
|
var _path$1;
|
|
692
629
|
function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
|
|
@@ -711,26 +648,20 @@ var SvgCheckSmFill = function SvgCheckSmFill(props) {
|
|
|
711
648
|
const COMPONENT_ID$1 = 'colorpickers.colorswatch_check';
|
|
712
649
|
const StyledIcon = styled__default.default(SvgCheckSmFill).attrs({
|
|
713
650
|
'data-garden-id': COMPONENT_ID$1,
|
|
714
|
-
'data-garden-version': '9.0.0-next.
|
|
651
|
+
'data-garden-version': '9.0.0-next.26'
|
|
715
652
|
}).withConfig({
|
|
716
653
|
displayName: "StyledIcon",
|
|
717
654
|
componentId: "sc-8oigif-0"
|
|
718
655
|
})(["position:absolute;top:0;left:0;transition:opacity 0.2s ease-in-out;opacity:0;width:100%;height:100%;", ":checked ~ &{opacity:1;}", ";"], StyledColorSwatchInput, props => reactTheming.retrieveComponentStyles(COMPONENT_ID$1, props));
|
|
719
|
-
StyledIcon.defaultProps = {
|
|
720
|
-
theme: reactTheming.DEFAULT_THEME
|
|
721
|
-
};
|
|
722
656
|
|
|
723
657
|
const COMPONENT_ID = 'colorpickers.swatch_cell';
|
|
724
658
|
const StyledCell = styled__default.default.td.attrs({
|
|
725
659
|
'data-garden-id': COMPONENT_ID,
|
|
726
|
-
'data-garden-version': '9.0.0-next.
|
|
660
|
+
'data-garden-version': '9.0.0-next.26'
|
|
727
661
|
}).withConfig({
|
|
728
662
|
displayName: "StyledCell",
|
|
729
663
|
componentId: "sc-qr3oit-0"
|
|
730
664
|
})(["padding:", "px;font-size:0;", ";"], props => props.theme.space.base, props => reactTheming.retrieveComponentStyles(COMPONENT_ID, props));
|
|
731
|
-
StyledCell.defaultProps = {
|
|
732
|
-
theme: reactTheming.DEFAULT_THEME
|
|
733
|
-
};
|
|
734
665
|
|
|
735
666
|
const ColorWell = React__namespace.default.memo(_ref => {
|
|
736
667
|
let {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-colorpickers",
|
|
3
|
-
"version": "9.0.0-next.
|
|
3
|
+
"version": "9.0.0-next.26",
|
|
4
4
|
"description": "Components related to color pickers in the Garden Design System",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "Zendesk Garden <garden@zendesk.com>",
|
|
@@ -23,10 +23,10 @@
|
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"@zendeskgarden/container-grid": "^3.0.0",
|
|
25
25
|
"@zendeskgarden/container-utilities": "^2.0.0",
|
|
26
|
-
"@zendeskgarden/react-buttons": "^9.0.0-next.
|
|
27
|
-
"@zendeskgarden/react-forms": "^9.0.0-next.
|
|
28
|
-
"@zendeskgarden/react-modals": "^9.0.0-next.
|
|
29
|
-
"@zendeskgarden/react-tooltips": "^9.0.0-next.
|
|
26
|
+
"@zendeskgarden/react-buttons": "^9.0.0-next.26",
|
|
27
|
+
"@zendeskgarden/react-forms": "^9.0.0-next.26",
|
|
28
|
+
"@zendeskgarden/react-modals": "^9.0.0-next.26",
|
|
29
|
+
"@zendeskgarden/react-tooltips": "^9.0.0-next.26",
|
|
30
30
|
"lodash.isequal": "^4.5.0",
|
|
31
31
|
"lodash.throttle": "^4.1.1",
|
|
32
32
|
"polished": "^4.3.1",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"devDependencies": {
|
|
43
43
|
"@types/lodash.isequal": "4.5.8",
|
|
44
44
|
"@types/lodash.throttle": "4.1.9",
|
|
45
|
-
"@zendeskgarden/react-theming": "^9.0.0-next.
|
|
45
|
+
"@zendeskgarden/react-theming": "^9.0.0-next.26",
|
|
46
46
|
"@zendeskgarden/svg-icons": "7.2.0"
|
|
47
47
|
},
|
|
48
48
|
"keywords": [
|
|
@@ -56,5 +56,5 @@
|
|
|
56
56
|
"access": "public"
|
|
57
57
|
},
|
|
58
58
|
"zendeskgarden:src": "src/index.ts",
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "049dd7bd143029147de333f78bd879dc7d7251f2"
|
|
60
60
|
}
|