@commercetools-uikit/select-utils 19.1.0 → 19.2.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.
Files changed (5) hide show
  1. package/dist/commercetools-uikit-select-utils.cjs.dev.js +8 -8
  2. package/dist/commercetools-uikit-select-utils.cjs.prod.js +8 -8
  3. package/dist/commercetools-uikit-select-utils.esm.js +8 -8
  4. package/dist/declarations/src/create-select-styles.d.ts +13 -13
  5. package/package.json +7 -7
package/dist/commercetools-uikit-select-utils.cjs.dev.js CHANGED
@@ -266,7 +266,7 @@ const getHorizontalConstraintValue = value => {
266
266
  };
267
267
  const getInputBackgroundColor = props => {
268
268
  if (props.appearance === 'quiet') {
269
- return designSystem.designTokens.backgroundColorForInputAsQuiet;
269
+ return designSystem.designTokens.colorTransparent;
270
270
  }
271
271
  if (props.isDisabled) {
272
272
  return designSystem.designTokens.backgroundColorForInputWhenDisabled;
@@ -283,7 +283,7 @@ const getMultiValueBackgroundColor = props => {
283
283
  };
284
284
  const getInputBorderColor = (props, state) => {
285
285
  if (props.appearance === 'quiet') {
286
- return designSystem.designTokens.borderColorForInputAsQuiet;
286
+ return designSystem.designTokens.colorTransparent;
287
287
  }
288
288
  if (props.isDisabled) {
289
289
  return designSystem.designTokens.borderColorForInputWhenDisabled;
@@ -304,7 +304,7 @@ const getInputBorderColor = (props, state) => {
304
304
  };
305
305
  const getHoverInputBorderColor = props => {
306
306
  if (props.appearance === 'quiet') {
307
- return designSystem.designTokens.borderColorForInputAsQuiet;
307
+ return designSystem.designTokens.colorTransparent;
308
308
  }
309
309
  if (props.isDisabled) {
310
310
  return designSystem.designTokens.borderColorForInputWhenDisabled;
@@ -323,7 +323,7 @@ const getHoverInputBorderColor = props => {
323
323
  const getHoverInputBackgroundColor = props => {
324
324
  if (!props.isDisabled && !props.isReadOnly) {
325
325
  if (props.appearance === 'quiet') {
326
- return designSystem.designTokens.backgroundColorForInputAsQuietWhenHovered;
326
+ return 'hsla(240, 64%, 58%, 4%)'; //this is mainly a combination of our primary color hsl(240, 64%, 58%) and an alpha channel of 4%.
327
327
  } else {
328
328
  return designSystem.designTokens.backgroundColorForInputWhenHovered;
329
329
  }
@@ -349,7 +349,7 @@ const controlStyles = props => (base, state) => {
349
349
  if (props.isReadOnly) return 'default';
350
350
  return 'pointer';
351
351
  })(),
352
- padding: props.appearance === 'quiet' ? designSystem.designTokens.paddingForInputAsQuiet : designSystem.designTokens.paddingForInput,
352
+ padding: props.appearance === 'quiet' ? "0 ".concat(designSystem.designTokens.spacing20) : "0 ".concat(designSystem.designTokens.spacing30),
353
353
  transition: _concatInstanceProperty__default["default"](_context = "border-color ".concat(designSystem.designTokens.transitionStandard, ",\n box-shadow ")).call(_context, designSystem.designTokens.transitionStandard),
354
354
  outline: 0,
355
355
  boxShadow: 'none'
@@ -438,7 +438,7 @@ const optionStyles = props => (base, state) => {
438
438
  return base.color;
439
439
  })(),
440
440
  backgroundColor: (() => {
441
- if (state.isSelected) return designSystem.designTokens.backgroundColorForInputWhenSelected;
441
+ if (state.isSelected) return designSystem.designTokens.colorPrimary95;
442
442
  if (state.isFocused) return designSystem.designTokens.backgroundColorForInputWhenHovered;
443
443
  return base.backgroundColor;
444
444
  })(),
@@ -447,7 +447,7 @@ const optionStyles = props => (base, state) => {
447
447
  if (!state.isDisabled) return designSystem.designTokens.fontColorForInput;
448
448
  return base.color;
449
449
  })(),
450
- backgroundColor: designSystem.designTokens.backgroundColorForInputWhenActive
450
+ backgroundColor: designSystem.designTokens.colorPrimary95
451
451
  }
452
452
  });
453
453
  };
@@ -624,7 +624,7 @@ const warnIfMenuPortalPropsAreMissing = props => {
624
624
  };
625
625
 
626
626
  // NOTE: This string will be replaced on build time with the package version.
627
- var version = "19.1.0";
627
+ var version = "19.2.0";
628
628
 
629
629
  exports.ClearIndicator = ClearIndicator$1;
630
630
  exports.CustomSelectInputOption = CustomSelectInputOption;
package/dist/commercetools-uikit-select-utils.cjs.prod.js CHANGED
@@ -266,7 +266,7 @@ const getHorizontalConstraintValue = value => {
266
266
  };
267
267
  const getInputBackgroundColor = props => {
268
268
  if (props.appearance === 'quiet') {
269
- return designSystem.designTokens.backgroundColorForInputAsQuiet;
269
+ return designSystem.designTokens.colorTransparent;
270
270
  }
271
271
  if (props.isDisabled) {
272
272
  return designSystem.designTokens.backgroundColorForInputWhenDisabled;
@@ -283,7 +283,7 @@ const getMultiValueBackgroundColor = props => {
283
283
  };
284
284
  const getInputBorderColor = (props, state) => {
285
285
  if (props.appearance === 'quiet') {
286
- return designSystem.designTokens.borderColorForInputAsQuiet;
286
+ return designSystem.designTokens.colorTransparent;
287
287
  }
288
288
  if (props.isDisabled) {
289
289
  return designSystem.designTokens.borderColorForInputWhenDisabled;
@@ -304,7 +304,7 @@ const getInputBorderColor = (props, state) => {
304
304
  };
305
305
  const getHoverInputBorderColor = props => {
306
306
  if (props.appearance === 'quiet') {
307
- return designSystem.designTokens.borderColorForInputAsQuiet;
307
+ return designSystem.designTokens.colorTransparent;
308
308
  }
309
309
  if (props.isDisabled) {
310
310
  return designSystem.designTokens.borderColorForInputWhenDisabled;
@@ -323,7 +323,7 @@ const getHoverInputBorderColor = props => {
323
323
  const getHoverInputBackgroundColor = props => {
324
324
  if (!props.isDisabled && !props.isReadOnly) {
325
325
  if (props.appearance === 'quiet') {
326
- return designSystem.designTokens.backgroundColorForInputAsQuietWhenHovered;
326
+ return 'hsla(240, 64%, 58%, 4%)'; //this is mainly a combination of our primary color hsl(240, 64%, 58%) and an alpha channel of 4%.
327
327
  } else {
328
328
  return designSystem.designTokens.backgroundColorForInputWhenHovered;
329
329
  }
@@ -349,7 +349,7 @@ const controlStyles = props => (base, state) => {
349
349
  if (props.isReadOnly) return 'default';
350
350
  return 'pointer';
351
351
  })(),
352
- padding: props.appearance === 'quiet' ? designSystem.designTokens.paddingForInputAsQuiet : designSystem.designTokens.paddingForInput,
352
+ padding: props.appearance === 'quiet' ? "0 ".concat(designSystem.designTokens.spacing20) : "0 ".concat(designSystem.designTokens.spacing30),
353
353
  transition: _concatInstanceProperty__default["default"](_context = "border-color ".concat(designSystem.designTokens.transitionStandard, ",\n box-shadow ")).call(_context, designSystem.designTokens.transitionStandard),
354
354
  outline: 0,
355
355
  boxShadow: 'none'
@@ -438,7 +438,7 @@ const optionStyles = props => (base, state) => {
438
438
  return base.color;
439
439
  })(),
440
440
  backgroundColor: (() => {
441
- if (state.isSelected) return designSystem.designTokens.backgroundColorForInputWhenSelected;
441
+ if (state.isSelected) return designSystem.designTokens.colorPrimary95;
442
442
  if (state.isFocused) return designSystem.designTokens.backgroundColorForInputWhenHovered;
443
443
  return base.backgroundColor;
444
444
  })(),
@@ -447,7 +447,7 @@ const optionStyles = props => (base, state) => {
447
447
  if (!state.isDisabled) return designSystem.designTokens.fontColorForInput;
448
448
  return base.color;
449
449
  })(),
450
- backgroundColor: designSystem.designTokens.backgroundColorForInputWhenActive
450
+ backgroundColor: designSystem.designTokens.colorPrimary95
451
451
  }
452
452
  });
453
453
  };
@@ -621,7 +621,7 @@ const warnIfMenuPortalPropsAreMissing = props => {
621
621
  };
622
622
 
623
623
  // NOTE: This string will be replaced on build time with the package version.
624
- var version = "19.1.0";
624
+ var version = "19.2.0";
625
625
 
626
626
  exports.ClearIndicator = ClearIndicator$1;
627
627
  exports.CustomSelectInputOption = CustomSelectInputOption;
package/dist/commercetools-uikit-select-utils.esm.js CHANGED
@@ -246,7 +246,7 @@ const getHorizontalConstraintValue = value => {
246
246
  };
247
247
  const getInputBackgroundColor = props => {
248
248
  if (props.appearance === 'quiet') {
249
- return designTokens.backgroundColorForInputAsQuiet;
249
+ return designTokens.colorTransparent;
250
250
  }
251
251
  if (props.isDisabled) {
252
252
  return designTokens.backgroundColorForInputWhenDisabled;
@@ -263,7 +263,7 @@ const getMultiValueBackgroundColor = props => {
263
263
  };
264
264
  const getInputBorderColor = (props, state) => {
265
265
  if (props.appearance === 'quiet') {
266
- return designTokens.borderColorForInputAsQuiet;
266
+ return designTokens.colorTransparent;
267
267
  }
268
268
  if (props.isDisabled) {
269
269
  return designTokens.borderColorForInputWhenDisabled;
@@ -284,7 +284,7 @@ const getInputBorderColor = (props, state) => {
284
284
  };
285
285
  const getHoverInputBorderColor = props => {
286
286
  if (props.appearance === 'quiet') {
287
- return designTokens.borderColorForInputAsQuiet;
287
+ return designTokens.colorTransparent;
288
288
  }
289
289
  if (props.isDisabled) {
290
290
  return designTokens.borderColorForInputWhenDisabled;
@@ -303,7 +303,7 @@ const getHoverInputBorderColor = props => {
303
303
  const getHoverInputBackgroundColor = props => {
304
304
  if (!props.isDisabled && !props.isReadOnly) {
305
305
  if (props.appearance === 'quiet') {
306
- return designTokens.backgroundColorForInputAsQuietWhenHovered;
306
+ return 'hsla(240, 64%, 58%, 4%)'; //this is mainly a combination of our primary color hsl(240, 64%, 58%) and an alpha channel of 4%.
307
307
  } else {
308
308
  return designTokens.backgroundColorForInputWhenHovered;
309
309
  }
@@ -329,7 +329,7 @@ const controlStyles = props => (base, state) => {
329
329
  if (props.isReadOnly) return 'default';
330
330
  return 'pointer';
331
331
  })(),
332
- padding: props.appearance === 'quiet' ? designTokens.paddingForInputAsQuiet : designTokens.paddingForInput,
332
+ padding: props.appearance === 'quiet' ? "0 ".concat(designTokens.spacing20) : "0 ".concat(designTokens.spacing30),
333
333
  transition: _concatInstanceProperty(_context = "border-color ".concat(designTokens.transitionStandard, ",\n box-shadow ")).call(_context, designTokens.transitionStandard),
334
334
  outline: 0,
335
335
  boxShadow: 'none'
@@ -418,7 +418,7 @@ const optionStyles = props => (base, state) => {
418
418
  return base.color;
419
419
  })(),
420
420
  backgroundColor: (() => {
421
- if (state.isSelected) return designTokens.backgroundColorForInputWhenSelected;
421
+ if (state.isSelected) return designTokens.colorPrimary95;
422
422
  if (state.isFocused) return designTokens.backgroundColorForInputWhenHovered;
423
423
  return base.backgroundColor;
424
424
  })(),
@@ -427,7 +427,7 @@ const optionStyles = props => (base, state) => {
427
427
  if (!state.isDisabled) return designTokens.fontColorForInput;
428
428
  return base.color;
429
429
  })(),
430
- backgroundColor: designTokens.backgroundColorForInputWhenActive
430
+ backgroundColor: designTokens.colorPrimary95
431
431
  }
432
432
  });
433
433
  };
@@ -604,6 +604,6 @@ const warnIfMenuPortalPropsAreMissing = props => {
604
604
  };
605
605
 
606
606
  // NOTE: This string will be replaced on build time with the package version.
607
- var version = "19.1.0";
607
+ var version = "19.2.0";
608
608
 
609
609
  export { ClearIndicator$1 as ClearIndicator, CustomSelectInputOption, DoublePropertySelectInputOption, DropdownIndicator$1 as DropdownIndicator, MultiplePropertiesSelectInputOption, SELECT_DROPDOWN_OPTION_TYPES, SearchIconDropdownIndicator$1 as SearchIconDropdownIndicator, TagRemove$1 as TagRemove, WrapperWithIcon$1 as ValueWrapperWithIcon, createSelectStyles, customComponents as customComponentsWithIcons, messages, version, warnIfMenuPortalPropsAreMissing };
package/dist/declarations/src/create-select-styles.d.ts CHANGED
@@ -34,23 +34,23 @@ type TState = {
34
34
  export default function createSelectStyles(props: TProps): {
35
35
  control: (base: TBase, state: TState) => {
36
36
  '&:focus-within': {
37
- borderColor: "var(--border-color-for-input-when-focused, hsl(175, 55%, 45%))" | null;
37
+ borderColor: "var(--border-color-for-input-when-focused, hsl(240, 100%, 67%))" | null;
38
38
  };
39
39
  '&:hover': {
40
- borderColor: "var(--color-neutral-95, hsl(232, 18%, 95%))" | "var(--border-color-for-input-when-disabled, hsl(232, 18%, 80%))" | "var(--border-color-for-input-when-error, #e60050)" | "var(--border-color-for-input-when-warning, #f16d0e)" | "var(--border-color-for-input-when-hovered, hsl(232, 18%, 80%))" | "var(--border-color-for-input-as-quiet, transparent)";
41
- backgroundColor: "var(--background-color-for-input-when-hovered, hsl(232, 18%, 98%))" | "var(--background-color-for-input-as-quiet-when-hovered, hsl(0deg 0% 10% / 2%))" | null;
40
+ borderColor: "var(--color-neutral-95, hsl(232, 18%, 95%))" | "var(--color-transparent, transparent)" | "var(--border-color-for-input-when-disabled, hsl(232, 18%, 80%))" | "var(--border-color-for-input-when-error, hsl(3, 65%, 58%))" | "var(--border-color-for-input-when-warning, hsl(35, 90%, 45%))" | "var(--border-color-for-input-when-hovered, hsl(232, 18%, 80%))";
41
+ backgroundColor: string | null;
42
42
  };
43
43
  pointerEvents: string;
44
44
  color: string | undefined;
45
45
  display?: string | undefined;
46
46
  fontSize: "var(--font-size-20, 0.875rem)" | "var(--font-size-30, 1rem)";
47
- backgroundColor: "var(--background-color-for-input, #fff)" | "var(--background-color-for-input-when-disabled, hsl(232, 18%, 95%))" | "var(--background-color-for-input-when-readonly, hsl(232, 18%, 95%))" | "var(--background-color-for-input-as-quiet, transparent)";
48
- borderColor: "var(--color-neutral-95, hsl(232, 18%, 95%))" | "var(--border-color-for-input, hsl(232, 18%, 80%))" | "var(--border-color-for-input-when-focused, hsl(175, 55%, 45%))" | "var(--border-color-for-input-when-disabled, hsl(232, 18%, 80%))" | "var(--border-color-for-input-when-error, #e60050)" | "var(--border-color-for-input-when-warning, #f16d0e)" | "var(--border-color-for-input-as-quiet, transparent)";
47
+ backgroundColor: "var(--color-transparent, transparent)" | "var(--background-color-for-input, #fff)" | "var(--background-color-for-input-when-disabled, hsl(232, 18%, 95%))" | "var(--background-color-for-input-when-readonly, hsl(232, 18%, 95%))";
48
+ borderColor: "var(--color-neutral-95, hsl(232, 18%, 95%))" | "var(--color-transparent, transparent)" | "var(--border-color-for-input, hsl(232, 18%, 80%))" | "var(--border-color-for-input-when-disabled, hsl(232, 18%, 80%))" | "var(--border-color-for-input-when-error, hsl(3, 65%, 58%))" | "var(--border-color-for-input-when-warning, hsl(35, 90%, 45%))" | "var(--border-color-for-input-when-focused, hsl(240, 100%, 67%))";
49
49
  borderWidth: "var(--border-width-1, 1px)" | "var(--border-width-2, 2px)";
50
50
  borderRadius: "var(--border-radius-for-input, 4px)";
51
51
  minHeight: "var(--height-for-input, 40px)" | "var(--height-for-input-as-small, 32px)";
52
52
  cursor: string;
53
- padding: "var(--padding-for-input, 0 var(--spacing-30))" | "var(--padding-for-input-as-quiet, 0 var(--spacing-20))";
53
+ padding: string;
54
54
  transition: string;
55
55
  outline: number;
56
56
  boxShadow: string;
@@ -95,7 +95,7 @@ export default function createSelectStyles(props: TProps): {
95
95
  margin: string;
96
96
  padding: string;
97
97
  marginLeft: "var(--spacing-20, 8px)";
98
- fill: "var(--color-neutral-60, hsl(232, 18%, 60%))" | "var(--color-warning, #f16d0e)" | "var(--color-error, #e60050)" | "var(--font-color-for-input-when-disabled, hsl(232, 18%, 60%))";
98
+ fill: "var(--color-neutral-60, hsl(232, 18%, 60%))" | "var(--color-warning, hsl(35, 90%, 45%))" | "var(--color-error, hsl(3, 65%, 58%))" | "var(--font-color-for-input-when-disabled, hsl(232, 18%, 60%))";
99
99
  fontColorForInput?: string | undefined;
100
100
  borderColorForInput?: string | undefined;
101
101
  backgroundColor?: string | undefined;
@@ -144,7 +144,7 @@ export default function createSelectStyles(props: TProps): {
144
144
  display: string;
145
145
  alignItems: string;
146
146
  height: string;
147
- backgroundColor: "var(--color-primary-95, hsl(175, 90%, 95%))" | "var(--background-color-for-input-when-disabled, hsl(232, 18%, 95%))" | "var(--background-color-for-input-when-readonly, hsl(232, 18%, 95%))";
147
+ backgroundColor: "var(--color-primary-95, hsl(244, 100%, 97%))" | "var(--background-color-for-input-when-disabled, hsl(232, 18%, 95%))" | "var(--background-color-for-input-when-readonly, hsl(232, 18%, 95%))";
148
148
  padding: string;
149
149
  border: string;
150
150
  borderRadius: "var(--border-radius-20, 20px)";
@@ -188,10 +188,10 @@ export default function createSelectStyles(props: TProps): {
188
188
  fill: string;
189
189
  };
190
190
  '&:hover, &:focus': {
191
- borderColor: "var(--color-warning, #f16d0e)";
191
+ borderColor: "var(--color-warning, hsl(35, 90%, 45%))";
192
192
  backgroundColor: "var(--color-neutral-95, hsl(232, 18%, 95%))";
193
193
  'svg *': {
194
- fill: "var(--color-error, #e60050)";
194
+ fill: "var(--color-error, hsl(3, 65%, 58%))";
195
195
  };
196
196
  };
197
197
  fontColorForInput?: string | undefined;
@@ -215,7 +215,7 @@ export default function createSelectStyles(props: TProps): {
215
215
  backgroundColor: string | undefined;
216
216
  '&:active': {
217
217
  color: string | undefined;
218
- backgroundColor: "var(--background-color-for-input-when-active, hsl(203.05555555555554, 93.9130434783%, 95%))";
218
+ backgroundColor: "var(--color-primary-95, hsl(244, 100%, 97%))";
219
219
  };
220
220
  fontColorForInput?: string | undefined;
221
221
  borderColorForInput?: string | undefined;
@@ -225,7 +225,7 @@ export default function createSelectStyles(props: TProps): {
225
225
  pointerEvents?: string | undefined;
226
226
  };
227
227
  placeholder: (base: TBase) => {
228
- color: "var(--color-neutral-60, hsl(232, 18%, 60%))" | "var(--color-warning, #f16d0e)" | "var(--color-error, #e60050)";
228
+ color: "var(--color-neutral-60, hsl(232, 18%, 60%))" | "var(--color-warning, hsl(35, 90%, 45%))" | "var(--color-error, hsl(3, 65%, 58%))";
229
229
  width: string;
230
230
  overflow: string;
231
231
  whiteSpace: string;
@@ -254,7 +254,7 @@ export default function createSelectStyles(props: TProps): {
254
254
  pointerEvents?: string | undefined;
255
255
  };
256
256
  singleValue: (base: TBase) => {
257
- color: "var(--color-warning, #f16d0e)" | "var(--color-error, #e60050)" | "var(--font-color-for-input, #1a1a1a)" | "var(--font-color-for-input-when-disabled, hsl(232, 18%, 60%))" | "var(--font-color-for-input-when-readonly, hsl(232, 18%, 40%))";
257
+ color: "var(--color-warning, hsl(35, 90%, 45%))" | "var(--color-error, hsl(3, 65%, 58%))" | "var(--font-color-for-input, #1a1a1a)" | "var(--font-color-for-input-when-disabled, hsl(232, 18%, 60%))" | "var(--font-color-for-input-when-readonly, hsl(232, 18%, 40%))";
258
258
  fontColorForInput?: string | undefined;
259
259
  borderColorForInput?: string | undefined;
260
260
  backgroundColor?: string | undefined;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@commercetools-uikit/select-utils",
3
3
  "description": "Utilities for working with select components.",
4
- "version": "19.1.0",
4
+ "version": "19.2.0",
5
5
  "bugs": "https://github.com/commercetools/ui-kit/issues",
6
6
  "repository": {
7
7
  "type": "git",
@@ -21,12 +21,12 @@
21
21
  "dependencies": {
22
22
  "@babel/runtime": "^7.20.13",
23
23
  "@babel/runtime-corejs3": "^7.20.13",
24
- "@commercetools-uikit/accessible-button": "19.1.0",
25
- "@commercetools-uikit/design-system": "19.1.0",
26
- "@commercetools-uikit/icons": "19.1.0",
27
- "@commercetools-uikit/spacings": "19.1.0",
28
- "@commercetools-uikit/text": "19.1.0",
29
- "@commercetools-uikit/utils": "19.1.0",
24
+ "@commercetools-uikit/accessible-button": "19.2.0",
25
+ "@commercetools-uikit/design-system": "19.2.0",
26
+ "@commercetools-uikit/icons": "19.2.0",
27
+ "@commercetools-uikit/spacings": "19.2.0",
28
+ "@commercetools-uikit/text": "19.2.0",
29
+ "@commercetools-uikit/utils": "19.2.0",
30
30
  "@emotion/react": "^11.10.5",
31
31
  "@emotion/styled": "^11.10.5",
32
32
  "lodash": "4.17.21",