@zendeskgarden/react-colorpickers 8.66.0 → 8.68.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/index.cjs.js +27 -24
- package/dist/index.esm.js +28 -25
- package/package.json +8 -8
package/dist/index.cjs.js
CHANGED
|
@@ -152,7 +152,7 @@ const getColorPickerWidth = props => {
|
|
|
152
152
|
};
|
|
153
153
|
const StyledColorPicker = styled__default.default.div.attrs({
|
|
154
154
|
'data-garden-id': COMPONENT_ID$l,
|
|
155
|
-
'data-garden-version': '8.
|
|
155
|
+
'data-garden-version': '8.68.0'
|
|
156
156
|
}).withConfig({
|
|
157
157
|
displayName: "StyledColorPicker",
|
|
158
158
|
componentId: "sc-1donyl9-0"
|
|
@@ -211,6 +211,7 @@ const colorStyles$1 = props => {
|
|
|
211
211
|
const thumbBorderColor = thumbBackgroundColor;
|
|
212
212
|
const thumbActiveBackgroundColor = reactTheming.getColor('neutralHue', 200, props.theme);
|
|
213
213
|
const thumbActiveBorderColor = reactTheming.getColor('primaryHue', 600, props.theme);
|
|
214
|
+
const thumbFocusBorderColor = reactTheming.getColor('primaryHue', 400, props.theme);
|
|
214
215
|
const thumbHoverBackgroundColor = thumbActiveBackgroundColor;
|
|
215
216
|
const thumbHoverBorderColor = thumbHoverBackgroundColor;
|
|
216
217
|
return `
|
|
@@ -236,7 +237,7 @@ const colorStyles$1 = props => {
|
|
|
236
237
|
|
|
237
238
|
${thumbStyles(`
|
|
238
239
|
background-color: ${thumbBackgroundColor};
|
|
239
|
-
border-color: ${
|
|
240
|
+
border-color: ${thumbFocusBorderColor};
|
|
240
241
|
`, '[data-garden-focus-visible="true"]')}
|
|
241
242
|
|
|
242
243
|
${thumbStyles(`
|
|
@@ -287,7 +288,7 @@ const sizeStyles$2 = props => {
|
|
|
287
288
|
};
|
|
288
289
|
const StyledRange = styled__default.default(reactForms.Range).attrs({
|
|
289
290
|
'data-garden-id': COMPONENT_ID$k,
|
|
290
|
-
'data-garden-version': '8.
|
|
291
|
+
'data-garden-version': '8.68.0',
|
|
291
292
|
hasLowerTrack: false
|
|
292
293
|
}).withConfig({
|
|
293
294
|
displayName: "StyledRange",
|
|
@@ -302,7 +303,7 @@ StyledRange.defaultProps = {
|
|
|
302
303
|
const COMPONENT_ID$j = 'colorpickers.colorpicker_hue';
|
|
303
304
|
const StyledHueRange = styled__default.default(StyledRange).attrs({
|
|
304
305
|
'data-garden-id': COMPONENT_ID$j,
|
|
305
|
-
'data-garden-version': '8.
|
|
306
|
+
'data-garden-version': '8.68.0'
|
|
306
307
|
}).withConfig({
|
|
307
308
|
displayName: "StyledHueRange",
|
|
308
309
|
componentId: "sc-13ly7p-0"
|
|
@@ -346,7 +347,7 @@ const StyledAlphaRange = styled__default.default(StyledRange).attrs(props => ({
|
|
|
346
347
|
background: background$3(props)
|
|
347
348
|
},
|
|
348
349
|
'data-garden-id': COMPONENT_ID$i,
|
|
349
|
-
'data-garden-version': '8.
|
|
350
|
+
'data-garden-version': '8.68.0'
|
|
350
351
|
})).withConfig({
|
|
351
352
|
displayName: "StyledAlphaRange",
|
|
352
353
|
componentId: "sc-kuh2xc-0"
|
|
@@ -370,7 +371,7 @@ const StyledPreview = styled__default.default.div.attrs(props => ({
|
|
|
370
371
|
background: background$2(props)
|
|
371
372
|
},
|
|
372
373
|
'data-garden-id': COMPONENT_ID$h,
|
|
373
|
-
'data-garden-version': '8.
|
|
374
|
+
'data-garden-version': '8.68.0',
|
|
374
375
|
'data-test-id': 'preview-box'
|
|
375
376
|
})).withConfig({
|
|
376
377
|
displayName: "StyledPreview",
|
|
@@ -392,7 +393,7 @@ const background$1 = props => {
|
|
|
392
393
|
};
|
|
393
394
|
const StyledColorWell = styled__default.default.div.attrs(props => ({
|
|
394
395
|
'data-garden-id': COMPONENT_ID$g,
|
|
395
|
-
'data-garden-version': '8.
|
|
396
|
+
'data-garden-version': '8.68.0',
|
|
396
397
|
'data-test-id': 'colorwell',
|
|
397
398
|
style: {
|
|
398
399
|
background: background$1(props)
|
|
@@ -420,7 +421,7 @@ const sizeStyles$1 = theme => {
|
|
|
420
421
|
};
|
|
421
422
|
const StyledColorWellThumb = styled__default.default.div.attrs(props => ({
|
|
422
423
|
'data-garden-id': COMPONENT_ID$f,
|
|
423
|
-
'data-garden-version': '8.
|
|
424
|
+
'data-garden-version': '8.68.0',
|
|
424
425
|
'data-test-id': 'colorwell-thumb',
|
|
425
426
|
style: {
|
|
426
427
|
top: `${props.top}%`,
|
|
@@ -437,7 +438,7 @@ StyledColorWellThumb.defaultProps = {
|
|
|
437
438
|
const COMPONENT_ID$e = 'colorpickers.colorpicker_slider_group';
|
|
438
439
|
const StyledSliderGroup = styled__default.default.div.attrs({
|
|
439
440
|
'data-garden-id': COMPONENT_ID$e,
|
|
440
|
-
'data-garden-version': '8.
|
|
441
|
+
'data-garden-version': '8.68.0'
|
|
441
442
|
}).withConfig({
|
|
442
443
|
displayName: "StyledSliderGroup",
|
|
443
444
|
componentId: "sc-rsq0ak-0"
|
|
@@ -449,7 +450,7 @@ StyledSliderGroup.defaultProps = {
|
|
|
449
450
|
const COMPONENT_ID$d = 'colorpickers.colorpicker_hex_field';
|
|
450
451
|
const StyledHexField = styled__default.default(reactForms.Field).attrs({
|
|
451
452
|
'data-garden-id': COMPONENT_ID$d,
|
|
452
|
-
'data-garden-version': '8.
|
|
453
|
+
'data-garden-version': '8.68.0',
|
|
453
454
|
spellcheck: false
|
|
454
455
|
}).withConfig({
|
|
455
456
|
displayName: "StyledHexField",
|
|
@@ -462,7 +463,7 @@ StyledHexField.defaultProps = {
|
|
|
462
463
|
const COMPONENT_ID$c = 'colorpickers.colorpicker_label';
|
|
463
464
|
const StyledLabel = styled__default.default(reactForms.Label).attrs({
|
|
464
465
|
'data-garden-id': COMPONENT_ID$c,
|
|
465
|
-
'data-garden-version': '8.
|
|
466
|
+
'data-garden-version': '8.68.0'
|
|
466
467
|
}).withConfig({
|
|
467
468
|
displayName: "StyledLabel",
|
|
468
469
|
componentId: "sc-1klhp6m-0"
|
|
@@ -474,7 +475,7 @@ StyledLabel.defaultProps = {
|
|
|
474
475
|
const COMPONENT_ID$b = 'colorpickers.colorpicker_input';
|
|
475
476
|
const StyledInput = styled__default.default(reactForms.Input).attrs({
|
|
476
477
|
'data-garden-id': COMPONENT_ID$b,
|
|
477
|
-
'data-garden-version': '8.
|
|
478
|
+
'data-garden-version': '8.68.0',
|
|
478
479
|
focusInset: false
|
|
479
480
|
}).withConfig({
|
|
480
481
|
displayName: "StyledInput",
|
|
@@ -487,7 +488,7 @@ StyledInput.defaultProps = {
|
|
|
487
488
|
const COMPONENT_ID$a = 'colorpickers.colorpicker_input_group';
|
|
488
489
|
const StyledInputGroup = styled__default.default.div.attrs({
|
|
489
490
|
'data-garden-id': COMPONENT_ID$a,
|
|
490
|
-
'data-garden-version': '8.
|
|
491
|
+
'data-garden-version': '8.68.0'
|
|
491
492
|
}).withConfig({
|
|
492
493
|
displayName: "StyledInputGroup",
|
|
493
494
|
componentId: "sc-mmy93w-0"
|
|
@@ -508,7 +509,7 @@ const sizeStyles = theme => {
|
|
|
508
509
|
};
|
|
509
510
|
const StyledRGBAField = styled__default.default(reactForms.Field).attrs({
|
|
510
511
|
'data-garden-id': COMPONENT_ID$9,
|
|
511
|
-
'data-garden-version': '8.
|
|
512
|
+
'data-garden-version': '8.68.0'
|
|
512
513
|
}).withConfig({
|
|
513
514
|
displayName: "StyledRGBAField",
|
|
514
515
|
componentId: "sc-ibo1yw-0"
|
|
@@ -520,7 +521,7 @@ StyledRGBAField.defaultProps = {
|
|
|
520
521
|
const COMPONENT_ID$8 = 'colorpickers.colorpicker_sliders';
|
|
521
522
|
const StyledSliders = styled__default.default.div.attrs({
|
|
522
523
|
'data-garden-id': COMPONENT_ID$8,
|
|
523
|
-
'data-garden-version': '8.
|
|
524
|
+
'data-garden-version': '8.68.0'
|
|
524
525
|
}).withConfig({
|
|
525
526
|
displayName: "StyledSliders",
|
|
526
527
|
componentId: "sc-aclca2-0"
|
|
@@ -533,7 +534,7 @@ const COMPONENT_ID$7 = 'colorpickers.colordialog_button';
|
|
|
533
534
|
const StyledButton = styled__default.default(reactButtons.Button).attrs({
|
|
534
535
|
isNeutral: true,
|
|
535
536
|
'data-garden-id': COMPONENT_ID$7,
|
|
536
|
-
'data-garden-version': '8.
|
|
537
|
+
'data-garden-version': '8.68.0'
|
|
537
538
|
}).withConfig({
|
|
538
539
|
displayName: "StyledButton",
|
|
539
540
|
componentId: "sc-101xjve-0"
|
|
@@ -568,7 +569,7 @@ const StyledButtonPreview = styled__default.default.span.attrs(props => ({
|
|
|
568
569
|
background: `${background(props)}, ${checkeredBackground(props.theme, 8)}`
|
|
569
570
|
},
|
|
570
571
|
'data-garden-id': COMPONENT_ID$6,
|
|
571
|
-
'data-garden-version': '8.
|
|
572
|
+
'data-garden-version': '8.68.0',
|
|
572
573
|
'data-test-id': 'dialog-preview'
|
|
573
574
|
})).withConfig({
|
|
574
575
|
displayName: "StyledButtonPreview",
|
|
@@ -581,7 +582,7 @@ StyledButtonPreview.defaultProps = {
|
|
|
581
582
|
const COMPONENT_ID$5 = 'colorpickers.colordialog_tooltipmodal';
|
|
582
583
|
const StyledTooltipModal = styled__default.default(reactModals.TooltipModal).attrs({
|
|
583
584
|
'data-garden-id': COMPONENT_ID$5,
|
|
584
|
-
'data-garden-version': '8.
|
|
585
|
+
'data-garden-version': '8.68.0'
|
|
585
586
|
}).withConfig({
|
|
586
587
|
displayName: "StyledTooltipModal",
|
|
587
588
|
componentId: "sc-o022s8-0"
|
|
@@ -593,7 +594,7 @@ StyledTooltipModal.defaultProps = {
|
|
|
593
594
|
const COMPONENT_ID$4 = 'colorpickers.colordialog_tooltipmodal_body';
|
|
594
595
|
const StyledTooltipBody = styled__default.default(reactModals.TooltipModal.Body).attrs({
|
|
595
596
|
'data-garden-id': COMPONENT_ID$4,
|
|
596
|
-
'data-garden-version': '8.
|
|
597
|
+
'data-garden-version': '8.68.0'
|
|
597
598
|
}).withConfig({
|
|
598
599
|
displayName: "StyledTooltipBody",
|
|
599
600
|
componentId: "sc-6gsgsy-0"
|
|
@@ -607,11 +608,13 @@ const StyledSwatchButton = styled__default.default(StyledButtonPreview).attrs(pr
|
|
|
607
608
|
as: 'button',
|
|
608
609
|
'data-garden-id': COMPONENT_ID$3,
|
|
609
610
|
'data-test-id': props.backgroundColor,
|
|
610
|
-
'data-garden-version': '8.
|
|
611
|
+
'data-garden-version': '8.68.0'
|
|
611
612
|
})).withConfig({
|
|
612
613
|
displayName: "StyledSwatchButton",
|
|
613
614
|
componentId: "sc-edpwpp-0"
|
|
614
|
-
})(["outline:none;border:none;border-radius:", ";cursor:pointer;padding:0
|
|
615
|
+
})(["transition:box-shadow 0.1s ease-in-out;outline:none;border:none;border-radius:", ";cursor:pointer;padding:0;", " ", ";"], props => props.theme.borderRadii.md, props => reactTheming.focusStyles({
|
|
616
|
+
theme: props.theme
|
|
617
|
+
}), props => reactTheming.retrieveComponentStyles(COMPONENT_ID$3, props));
|
|
615
618
|
StyledSwatchButton.defaultProps = {
|
|
616
619
|
theme: reactTheming.DEFAULT_THEME
|
|
617
620
|
};
|
|
@@ -619,7 +622,7 @@ StyledSwatchButton.defaultProps = {
|
|
|
619
622
|
const COMPONENT_ID$2 = 'colorpickers.color_swatch';
|
|
620
623
|
const StyledColorSwatch = styled__default.default.table.attrs({
|
|
621
624
|
'data-garden-id': COMPONENT_ID$2,
|
|
622
|
-
'data-garden-version': '8.
|
|
625
|
+
'data-garden-version': '8.68.0',
|
|
623
626
|
role: 'grid'
|
|
624
627
|
}).withConfig({
|
|
625
628
|
displayName: "StyledColorSwatch",
|
|
@@ -656,7 +659,7 @@ const StyledIcon = styled__default.default(_ref => {
|
|
|
656
659
|
return React__namespace.default.cloneElement(React.Children.only(children), props);
|
|
657
660
|
}).attrs({
|
|
658
661
|
'data-garden-id': COMPONENT_ID$1,
|
|
659
|
-
'data-garden-version': '8.
|
|
662
|
+
'data-garden-version': '8.68.0'
|
|
660
663
|
}).withConfig({
|
|
661
664
|
displayName: "StyledIcon",
|
|
662
665
|
componentId: "sc-8oigif-0"
|
|
@@ -668,7 +671,7 @@ StyledIcon.defaultProps = {
|
|
|
668
671
|
const COMPONENT_ID = 'colorpickers.swatch_cell';
|
|
669
672
|
const StyledCell = styled__default.default.td.attrs({
|
|
670
673
|
'data-garden-id': COMPONENT_ID,
|
|
671
|
-
'data-garden-version': '8.
|
|
674
|
+
'data-garden-version': '8.68.0'
|
|
672
675
|
}).withConfig({
|
|
673
676
|
displayName: "StyledCell",
|
|
674
677
|
componentId: "sc-qr3oit-0"
|
package/dist/index.esm.js
CHANGED
|
@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
|
|
|
11
11
|
import { Range, Field, Label, Input } from '@zendeskgarden/react-forms';
|
|
12
12
|
import throttle from 'lodash.throttle';
|
|
13
13
|
import styled, { ThemeContext } from 'styled-components';
|
|
14
|
-
import { retrieveComponentStyles, DEFAULT_THEME, getColor, useText } from '@zendeskgarden/react-theming';
|
|
14
|
+
import { retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles, useText } from '@zendeskgarden/react-theming';
|
|
15
15
|
import { stripUnit, math, rgba, hsl, parseToRgb, readableColor, parseToHsl, rgb } from 'polished';
|
|
16
16
|
import { Button } from '@zendeskgarden/react-buttons';
|
|
17
17
|
import { TooltipModal, PLACEMENT } from '@zendeskgarden/react-modals';
|
|
@@ -125,7 +125,7 @@ const getColorPickerWidth = props => {
|
|
|
125
125
|
};
|
|
126
126
|
const StyledColorPicker = styled.div.attrs({
|
|
127
127
|
'data-garden-id': COMPONENT_ID$l,
|
|
128
|
-
'data-garden-version': '8.
|
|
128
|
+
'data-garden-version': '8.68.0'
|
|
129
129
|
}).withConfig({
|
|
130
130
|
displayName: "StyledColorPicker",
|
|
131
131
|
componentId: "sc-1donyl9-0"
|
|
@@ -184,6 +184,7 @@ const colorStyles$1 = props => {
|
|
|
184
184
|
const thumbBorderColor = thumbBackgroundColor;
|
|
185
185
|
const thumbActiveBackgroundColor = getColor('neutralHue', 200, props.theme);
|
|
186
186
|
const thumbActiveBorderColor = getColor('primaryHue', 600, props.theme);
|
|
187
|
+
const thumbFocusBorderColor = getColor('primaryHue', 400, props.theme);
|
|
187
188
|
const thumbHoverBackgroundColor = thumbActiveBackgroundColor;
|
|
188
189
|
const thumbHoverBorderColor = thumbHoverBackgroundColor;
|
|
189
190
|
return `
|
|
@@ -209,7 +210,7 @@ const colorStyles$1 = props => {
|
|
|
209
210
|
|
|
210
211
|
${thumbStyles(`
|
|
211
212
|
background-color: ${thumbBackgroundColor};
|
|
212
|
-
border-color: ${
|
|
213
|
+
border-color: ${thumbFocusBorderColor};
|
|
213
214
|
`, '[data-garden-focus-visible="true"]')}
|
|
214
215
|
|
|
215
216
|
${thumbStyles(`
|
|
@@ -260,7 +261,7 @@ const sizeStyles$2 = props => {
|
|
|
260
261
|
};
|
|
261
262
|
const StyledRange = styled(Range).attrs({
|
|
262
263
|
'data-garden-id': COMPONENT_ID$k,
|
|
263
|
-
'data-garden-version': '8.
|
|
264
|
+
'data-garden-version': '8.68.0',
|
|
264
265
|
hasLowerTrack: false
|
|
265
266
|
}).withConfig({
|
|
266
267
|
displayName: "StyledRange",
|
|
@@ -275,7 +276,7 @@ StyledRange.defaultProps = {
|
|
|
275
276
|
const COMPONENT_ID$j = 'colorpickers.colorpicker_hue';
|
|
276
277
|
const StyledHueRange = styled(StyledRange).attrs({
|
|
277
278
|
'data-garden-id': COMPONENT_ID$j,
|
|
278
|
-
'data-garden-version': '8.
|
|
279
|
+
'data-garden-version': '8.68.0'
|
|
279
280
|
}).withConfig({
|
|
280
281
|
displayName: "StyledHueRange",
|
|
281
282
|
componentId: "sc-13ly7p-0"
|
|
@@ -319,7 +320,7 @@ const StyledAlphaRange = styled(StyledRange).attrs(props => ({
|
|
|
319
320
|
background: background$3(props)
|
|
320
321
|
},
|
|
321
322
|
'data-garden-id': COMPONENT_ID$i,
|
|
322
|
-
'data-garden-version': '8.
|
|
323
|
+
'data-garden-version': '8.68.0'
|
|
323
324
|
})).withConfig({
|
|
324
325
|
displayName: "StyledAlphaRange",
|
|
325
326
|
componentId: "sc-kuh2xc-0"
|
|
@@ -343,7 +344,7 @@ const StyledPreview = styled.div.attrs(props => ({
|
|
|
343
344
|
background: background$2(props)
|
|
344
345
|
},
|
|
345
346
|
'data-garden-id': COMPONENT_ID$h,
|
|
346
|
-
'data-garden-version': '8.
|
|
347
|
+
'data-garden-version': '8.68.0',
|
|
347
348
|
'data-test-id': 'preview-box'
|
|
348
349
|
})).withConfig({
|
|
349
350
|
displayName: "StyledPreview",
|
|
@@ -365,7 +366,7 @@ const background$1 = props => {
|
|
|
365
366
|
};
|
|
366
367
|
const StyledColorWell = styled.div.attrs(props => ({
|
|
367
368
|
'data-garden-id': COMPONENT_ID$g,
|
|
368
|
-
'data-garden-version': '8.
|
|
369
|
+
'data-garden-version': '8.68.0',
|
|
369
370
|
'data-test-id': 'colorwell',
|
|
370
371
|
style: {
|
|
371
372
|
background: background$1(props)
|
|
@@ -393,7 +394,7 @@ const sizeStyles$1 = theme => {
|
|
|
393
394
|
};
|
|
394
395
|
const StyledColorWellThumb = styled.div.attrs(props => ({
|
|
395
396
|
'data-garden-id': COMPONENT_ID$f,
|
|
396
|
-
'data-garden-version': '8.
|
|
397
|
+
'data-garden-version': '8.68.0',
|
|
397
398
|
'data-test-id': 'colorwell-thumb',
|
|
398
399
|
style: {
|
|
399
400
|
top: `${props.top}%`,
|
|
@@ -410,7 +411,7 @@ StyledColorWellThumb.defaultProps = {
|
|
|
410
411
|
const COMPONENT_ID$e = 'colorpickers.colorpicker_slider_group';
|
|
411
412
|
const StyledSliderGroup = styled.div.attrs({
|
|
412
413
|
'data-garden-id': COMPONENT_ID$e,
|
|
413
|
-
'data-garden-version': '8.
|
|
414
|
+
'data-garden-version': '8.68.0'
|
|
414
415
|
}).withConfig({
|
|
415
416
|
displayName: "StyledSliderGroup",
|
|
416
417
|
componentId: "sc-rsq0ak-0"
|
|
@@ -422,7 +423,7 @@ StyledSliderGroup.defaultProps = {
|
|
|
422
423
|
const COMPONENT_ID$d = 'colorpickers.colorpicker_hex_field';
|
|
423
424
|
const StyledHexField = styled(Field).attrs({
|
|
424
425
|
'data-garden-id': COMPONENT_ID$d,
|
|
425
|
-
'data-garden-version': '8.
|
|
426
|
+
'data-garden-version': '8.68.0',
|
|
426
427
|
spellcheck: false
|
|
427
428
|
}).withConfig({
|
|
428
429
|
displayName: "StyledHexField",
|
|
@@ -435,7 +436,7 @@ StyledHexField.defaultProps = {
|
|
|
435
436
|
const COMPONENT_ID$c = 'colorpickers.colorpicker_label';
|
|
436
437
|
const StyledLabel = styled(Label).attrs({
|
|
437
438
|
'data-garden-id': COMPONENT_ID$c,
|
|
438
|
-
'data-garden-version': '8.
|
|
439
|
+
'data-garden-version': '8.68.0'
|
|
439
440
|
}).withConfig({
|
|
440
441
|
displayName: "StyledLabel",
|
|
441
442
|
componentId: "sc-1klhp6m-0"
|
|
@@ -447,7 +448,7 @@ StyledLabel.defaultProps = {
|
|
|
447
448
|
const COMPONENT_ID$b = 'colorpickers.colorpicker_input';
|
|
448
449
|
const StyledInput = styled(Input).attrs({
|
|
449
450
|
'data-garden-id': COMPONENT_ID$b,
|
|
450
|
-
'data-garden-version': '8.
|
|
451
|
+
'data-garden-version': '8.68.0',
|
|
451
452
|
focusInset: false
|
|
452
453
|
}).withConfig({
|
|
453
454
|
displayName: "StyledInput",
|
|
@@ -460,7 +461,7 @@ StyledInput.defaultProps = {
|
|
|
460
461
|
const COMPONENT_ID$a = 'colorpickers.colorpicker_input_group';
|
|
461
462
|
const StyledInputGroup = styled.div.attrs({
|
|
462
463
|
'data-garden-id': COMPONENT_ID$a,
|
|
463
|
-
'data-garden-version': '8.
|
|
464
|
+
'data-garden-version': '8.68.0'
|
|
464
465
|
}).withConfig({
|
|
465
466
|
displayName: "StyledInputGroup",
|
|
466
467
|
componentId: "sc-mmy93w-0"
|
|
@@ -481,7 +482,7 @@ const sizeStyles = theme => {
|
|
|
481
482
|
};
|
|
482
483
|
const StyledRGBAField = styled(Field).attrs({
|
|
483
484
|
'data-garden-id': COMPONENT_ID$9,
|
|
484
|
-
'data-garden-version': '8.
|
|
485
|
+
'data-garden-version': '8.68.0'
|
|
485
486
|
}).withConfig({
|
|
486
487
|
displayName: "StyledRGBAField",
|
|
487
488
|
componentId: "sc-ibo1yw-0"
|
|
@@ -493,7 +494,7 @@ StyledRGBAField.defaultProps = {
|
|
|
493
494
|
const COMPONENT_ID$8 = 'colorpickers.colorpicker_sliders';
|
|
494
495
|
const StyledSliders = styled.div.attrs({
|
|
495
496
|
'data-garden-id': COMPONENT_ID$8,
|
|
496
|
-
'data-garden-version': '8.
|
|
497
|
+
'data-garden-version': '8.68.0'
|
|
497
498
|
}).withConfig({
|
|
498
499
|
displayName: "StyledSliders",
|
|
499
500
|
componentId: "sc-aclca2-0"
|
|
@@ -506,7 +507,7 @@ const COMPONENT_ID$7 = 'colorpickers.colordialog_button';
|
|
|
506
507
|
const StyledButton = styled(Button).attrs({
|
|
507
508
|
isNeutral: true,
|
|
508
509
|
'data-garden-id': COMPONENT_ID$7,
|
|
509
|
-
'data-garden-version': '8.
|
|
510
|
+
'data-garden-version': '8.68.0'
|
|
510
511
|
}).withConfig({
|
|
511
512
|
displayName: "StyledButton",
|
|
512
513
|
componentId: "sc-101xjve-0"
|
|
@@ -541,7 +542,7 @@ const StyledButtonPreview = styled.span.attrs(props => ({
|
|
|
541
542
|
background: `${background(props)}, ${checkeredBackground(props.theme, 8)}`
|
|
542
543
|
},
|
|
543
544
|
'data-garden-id': COMPONENT_ID$6,
|
|
544
|
-
'data-garden-version': '8.
|
|
545
|
+
'data-garden-version': '8.68.0',
|
|
545
546
|
'data-test-id': 'dialog-preview'
|
|
546
547
|
})).withConfig({
|
|
547
548
|
displayName: "StyledButtonPreview",
|
|
@@ -554,7 +555,7 @@ StyledButtonPreview.defaultProps = {
|
|
|
554
555
|
const COMPONENT_ID$5 = 'colorpickers.colordialog_tooltipmodal';
|
|
555
556
|
const StyledTooltipModal = styled(TooltipModal).attrs({
|
|
556
557
|
'data-garden-id': COMPONENT_ID$5,
|
|
557
|
-
'data-garden-version': '8.
|
|
558
|
+
'data-garden-version': '8.68.0'
|
|
558
559
|
}).withConfig({
|
|
559
560
|
displayName: "StyledTooltipModal",
|
|
560
561
|
componentId: "sc-o022s8-0"
|
|
@@ -566,7 +567,7 @@ StyledTooltipModal.defaultProps = {
|
|
|
566
567
|
const COMPONENT_ID$4 = 'colorpickers.colordialog_tooltipmodal_body';
|
|
567
568
|
const StyledTooltipBody = styled(TooltipModal.Body).attrs({
|
|
568
569
|
'data-garden-id': COMPONENT_ID$4,
|
|
569
|
-
'data-garden-version': '8.
|
|
570
|
+
'data-garden-version': '8.68.0'
|
|
570
571
|
}).withConfig({
|
|
571
572
|
displayName: "StyledTooltipBody",
|
|
572
573
|
componentId: "sc-6gsgsy-0"
|
|
@@ -580,11 +581,13 @@ const StyledSwatchButton = styled(StyledButtonPreview).attrs(props => ({
|
|
|
580
581
|
as: 'button',
|
|
581
582
|
'data-garden-id': COMPONENT_ID$3,
|
|
582
583
|
'data-test-id': props.backgroundColor,
|
|
583
|
-
'data-garden-version': '8.
|
|
584
|
+
'data-garden-version': '8.68.0'
|
|
584
585
|
})).withConfig({
|
|
585
586
|
displayName: "StyledSwatchButton",
|
|
586
587
|
componentId: "sc-edpwpp-0"
|
|
587
|
-
})(["outline:none;border:none;border-radius:", ";cursor:pointer;padding:0
|
|
588
|
+
})(["transition:box-shadow 0.1s ease-in-out;outline:none;border:none;border-radius:", ";cursor:pointer;padding:0;", " ", ";"], props => props.theme.borderRadii.md, props => focusStyles({
|
|
589
|
+
theme: props.theme
|
|
590
|
+
}), props => retrieveComponentStyles(COMPONENT_ID$3, props));
|
|
588
591
|
StyledSwatchButton.defaultProps = {
|
|
589
592
|
theme: DEFAULT_THEME
|
|
590
593
|
};
|
|
@@ -592,7 +595,7 @@ StyledSwatchButton.defaultProps = {
|
|
|
592
595
|
const COMPONENT_ID$2 = 'colorpickers.color_swatch';
|
|
593
596
|
const StyledColorSwatch = styled.table.attrs({
|
|
594
597
|
'data-garden-id': COMPONENT_ID$2,
|
|
595
|
-
'data-garden-version': '8.
|
|
598
|
+
'data-garden-version': '8.68.0',
|
|
596
599
|
role: 'grid'
|
|
597
600
|
}).withConfig({
|
|
598
601
|
displayName: "StyledColorSwatch",
|
|
@@ -629,7 +632,7 @@ const StyledIcon = styled(_ref => {
|
|
|
629
632
|
return React__default.cloneElement(Children.only(children), props);
|
|
630
633
|
}).attrs({
|
|
631
634
|
'data-garden-id': COMPONENT_ID$1,
|
|
632
|
-
'data-garden-version': '8.
|
|
635
|
+
'data-garden-version': '8.68.0'
|
|
633
636
|
}).withConfig({
|
|
634
637
|
displayName: "StyledIcon",
|
|
635
638
|
componentId: "sc-8oigif-0"
|
|
@@ -641,7 +644,7 @@ StyledIcon.defaultProps = {
|
|
|
641
644
|
const COMPONENT_ID = 'colorpickers.swatch_cell';
|
|
642
645
|
const StyledCell = styled.td.attrs({
|
|
643
646
|
'data-garden-id': COMPONENT_ID,
|
|
644
|
-
'data-garden-version': '8.
|
|
647
|
+
'data-garden-version': '8.68.0'
|
|
645
648
|
}).withConfig({
|
|
646
649
|
displayName: "StyledCell",
|
|
647
650
|
componentId: "sc-qr3oit-0"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zendeskgarden/react-colorpickers",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.68.0",
|
|
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,17 +23,17 @@
|
|
|
23
23
|
"dependencies": {
|
|
24
24
|
"@zendeskgarden/container-grid": "^0.1.1",
|
|
25
25
|
"@zendeskgarden/container-utilities": "^1.0.0",
|
|
26
|
-
"@zendeskgarden/react-buttons": "^8.
|
|
27
|
-
"@zendeskgarden/react-forms": "^8.
|
|
28
|
-
"@zendeskgarden/react-modals": "^8.
|
|
29
|
-
"@zendeskgarden/react-tooltips": "^8.
|
|
26
|
+
"@zendeskgarden/react-buttons": "^8.68.0",
|
|
27
|
+
"@zendeskgarden/react-forms": "^8.68.0",
|
|
28
|
+
"@zendeskgarden/react-modals": "^8.68.0",
|
|
29
|
+
"@zendeskgarden/react-tooltips": "^8.68.0",
|
|
30
30
|
"lodash.isequal": "^4.5.0",
|
|
31
31
|
"lodash.throttle": "^4.1.1",
|
|
32
32
|
"polished": "^4.0.0",
|
|
33
33
|
"prop-types": "^15.7.2"
|
|
34
34
|
},
|
|
35
35
|
"peerDependencies": {
|
|
36
|
-
"@zendeskgarden/react-theming": "^8.
|
|
36
|
+
"@zendeskgarden/react-theming": "^8.67.0",
|
|
37
37
|
"react": ">=16.8.0",
|
|
38
38
|
"react-dom": ">=16.8.0",
|
|
39
39
|
"styled-components": "^4.2.0 || ^5.0.0"
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"devDependencies": {
|
|
42
42
|
"@types/lodash.isequal": "4.5.6",
|
|
43
43
|
"@types/lodash.throttle": "4.1.7",
|
|
44
|
-
"@zendeskgarden/react-theming": "^8.
|
|
44
|
+
"@zendeskgarden/react-theming": "^8.68.0",
|
|
45
45
|
"@zendeskgarden/svg-icons": "6.33.0"
|
|
46
46
|
},
|
|
47
47
|
"keywords": [
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"access": "public"
|
|
56
56
|
},
|
|
57
57
|
"zendeskgarden:src": "src/index.ts",
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "e05a28d586f47d95e0570fe2d529915aa4285845"
|
|
59
59
|
}
|