@instructure/ui-color-picker 10.15.2 → 10.15.3-snapshot-1

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 (20) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/es/ColorIndicator/theme.js +2 -4
  3. package/es/ColorMixer/ColorPalette/theme.js +2 -4
  4. package/es/ColorMixer/Slider/theme.js +2 -4
  5. package/es/ColorPicker/theme.js +2 -4
  6. package/lib/ColorIndicator/theme.js +3 -5
  7. package/lib/ColorMixer/ColorPalette/theme.js +2 -3
  8. package/lib/ColorMixer/Slider/theme.js +2 -3
  9. package/lib/ColorPicker/theme.js +2 -3
  10. package/package.json +25 -25
  11. package/src/ColorIndicator/theme.ts +1 -3
  12. package/src/ColorMixer/ColorPalette/theme.ts +1 -2
  13. package/src/ColorMixer/Slider/theme.ts +1 -2
  14. package/src/ColorPicker/theme.ts +1 -2
  15. package/tsconfig.build.tsbuildinfo +1 -1
  16. package/types/ColorIndicator/theme.d.ts +0 -1
  17. package/types/ColorIndicator/theme.d.ts.map +1 -1
  18. package/types/ColorMixer/ColorPalette/theme.d.ts.map +1 -1
  19. package/types/ColorMixer/Slider/theme.d.ts.map +1 -1
  20. package/types/ColorPicker/theme.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [10.15.3-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.15.2...v10.15.3-snapshot-1) (2025-04-10)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **ui-buttons:** fix button border color ([5322f9c](https://github.com/instructure/instructure-ui/commit/5322f9c8d359a394e0ea4caa5dbab982169edddf))
12
+
13
+
14
+
15
+
16
+
6
17
  ## [10.15.2](https://github.com/instructure/instructure-ui/compare/v10.15.1...v10.15.2) (2025-04-07)
7
18
 
8
19
  **Note:** Version bump only for package @instructure/ui-color-picker
package/es/ColorIndicator/theme.js CHANGED
@@ -22,15 +22,13 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- export const colorIndicatorBorderColor = '#384A5899';
26
-
27
25
  /**
28
26
  * Generates the theme object for the component from the theme and provided additional information
29
27
  * @param {Object} theme The actual theme object.
30
28
  * @return {Object} The final theme object with the overrides and component variables
31
29
  */
32
30
  const generateComponentTheme = theme => {
33
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4;
31
+ var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5;
34
32
  const colors = theme.colors,
35
33
  borders = theme.borders,
36
34
  spacing = theme.spacing;
@@ -44,7 +42,7 @@ const generateComponentTheme = theme => {
44
42
  backgroundPosition: '0 0, 0 .25rem, .25rem -0.25rem, -0.25rem 0px',
45
43
  circleIndicatorSize: '1.5rem',
46
44
  rectangleIndicatorSize: '2.375rem',
47
- colorIndicatorBorderColor,
45
+ colorIndicatorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey1424,
48
46
  rectangularIndicatorBorderRadius: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
49
47
  rectangularIndicatorBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall
50
48
  };
package/es/ColorMixer/ColorPalette/theme.js CHANGED
@@ -22,22 +22,20 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- import { colorIndicatorBorderColor } from '../../ColorIndicator/theme';
26
-
27
25
  /**
28
26
  * Generates the theme object for the component from the theme and provided additional information
29
27
  * @param {Object} theme The actual theme object.
30
28
  * @return {Object} The final theme object with the overrides and component variables
31
29
  */
32
30
  const generateComponentTheme = theme => {
33
- var _colors$contrasts, _colors$contrasts2;
31
+ var _colors$contrasts, _colors$contrasts2, _colors$contrasts3;
34
32
  const colors = theme.colors,
35
33
  borders = theme.borders,
36
34
  stacking = theme.stacking;
37
35
  const componentVariables = {
38
36
  indicatorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
39
37
  whiteColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
40
- colorIndicatorBorderColor,
38
+ colorIndicatorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.grey1424,
41
39
  indicatorBorderWidth: borders.widthSmall,
42
40
  paletteBorderRadius: borders.radiusMedium,
43
41
  paletteBorderWidth: borders.widthSmall,
package/es/ColorMixer/Slider/theme.js CHANGED
@@ -22,15 +22,13 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- import { colorIndicatorBorderColor } from '../../ColorIndicator/theme';
26
-
27
25
  /**
28
26
  * Generates the theme object for the component from the theme and provided additional information
29
27
  * @param {Object} theme The actual theme object.
30
28
  * @return {Object} The final theme object with the overrides and component variables
31
29
  */
32
30
  const generateComponentTheme = theme => {
33
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5;
31
+ var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6;
34
32
  const colors = theme.colors,
35
33
  borders = theme.borders,
36
34
  stacking = theme.stacking;
@@ -42,7 +40,7 @@ const generateComponentTheme = theme => {
42
40
  linear-gradient(-45deg, transparent 75%, ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey1111} 75%)`,
43
41
  checkerboardBackgroundSize: '.5rem .5rem',
44
42
  checkerboardBackgroundPosition: '0 0, 0 .25rem, .25rem -0.25rem, -0.25rem 0px',
45
- colorIndicatorBorderColor,
43
+ colorIndicatorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.grey1424,
46
44
  indicatorBorderWidth: borders.widthSmall,
47
45
  sliderBorderWidth: borders.widthSmall,
48
46
  indicatorZIndex: stacking.above,
package/es/ColorPicker/theme.js CHANGED
@@ -22,15 +22,13 @@
22
22
  * SOFTWARE.
23
23
  */
24
24
 
25
- import { colorIndicatorBorderColor } from '../ColorIndicator/theme';
26
-
27
25
  /**
28
26
  * Generates the theme object for the component from the theme and provided additional information
29
27
  * @param {Object} theme The actual theme object.
30
28
  * @return {Object} The final theme object with the overrides and component variables
31
29
  */
32
30
  const generateComponentTheme = theme => {
33
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts10, _colors$contrasts11;
31
+ var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts10, _colors$contrasts11, _colors$contrasts12;
34
32
  const colors = theme.colors,
35
33
  borders = theme.borders,
36
34
  spacing = theme.spacing,
@@ -55,7 +53,7 @@ const generateComponentTheme = theme => {
55
53
  linear-gradient(-45deg, transparent 75%, ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.grey1214} 75%)`,
56
54
  checkerboardBackgroundSize: '.5rem .5rem',
57
55
  checkerboardBackgroundPosition: '0 0, 0 .25rem, .25rem -0.25rem, -0.25rem 0px',
58
- colorIndicatorBorderColor,
56
+ colorIndicatorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts12 = colors.contrasts) === null || _colors$contrasts12 === void 0 ? void 0 : _colors$contrasts12.grey1424,
59
57
  simpleColorContainerLeftPadding: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
60
58
  hashMarkContainerLineHeight: typography === null || typography === void 0 ? void 0 : typography.fontSizeXLarge,
61
59
  hashMarkContainerLeftPadding: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
package/lib/ColorIndicator/theme.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.default = exports.colorIndicatorBorderColor = void 0;
6
+ exports.default = void 0;
7
7
  /*
8
8
  * The MIT License (MIT)
9
9
  *
@@ -28,15 +28,13 @@ exports.default = exports.colorIndicatorBorderColor = void 0;
28
28
  * SOFTWARE.
29
29
  */
30
30
 
31
- const colorIndicatorBorderColor = exports.colorIndicatorBorderColor = '#384A5899';
32
-
33
31
  /**
34
32
  * Generates the theme object for the component from the theme and provided additional information
35
33
  * @param {Object} theme The actual theme object.
36
34
  * @return {Object} The final theme object with the overrides and component variables
37
35
  */
38
36
  const generateComponentTheme = theme => {
39
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4;
37
+ var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5;
40
38
  const colors = theme.colors,
41
39
  borders = theme.borders,
42
40
  spacing = theme.spacing;
@@ -50,7 +48,7 @@ const generateComponentTheme = theme => {
50
48
  backgroundPosition: '0 0, 0 .25rem, .25rem -0.25rem, -0.25rem 0px',
51
49
  circleIndicatorSize: '1.5rem',
52
50
  rectangleIndicatorSize: '2.375rem',
53
- colorIndicatorBorderColor,
51
+ colorIndicatorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey1424,
54
52
  rectangularIndicatorBorderRadius: spacing === null || spacing === void 0 ? void 0 : spacing.xxSmall,
55
53
  rectangularIndicatorBorderWidth: borders === null || borders === void 0 ? void 0 : borders.widthSmall
56
54
  };
package/lib/ColorMixer/ColorPalette/theme.js CHANGED
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
- var _theme = require("../../ColorIndicator/theme");
8
7
  /*
9
8
  * The MIT License (MIT)
10
9
  *
@@ -35,14 +34,14 @@ var _theme = require("../../ColorIndicator/theme");
35
34
  * @return {Object} The final theme object with the overrides and component variables
36
35
  */
37
36
  const generateComponentTheme = theme => {
38
- var _colors$contrasts, _colors$contrasts2;
37
+ var _colors$contrasts, _colors$contrasts2, _colors$contrasts3;
39
38
  const colors = theme.colors,
40
39
  borders = theme.borders,
41
40
  stacking = theme.stacking;
42
41
  const componentVariables = {
43
42
  indicatorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.grey125125,
44
43
  whiteColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.white1010,
45
- colorIndicatorBorderColor: _theme.colorIndicatorBorderColor,
44
+ colorIndicatorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.grey1424,
46
45
  indicatorBorderWidth: borders.widthSmall,
47
46
  paletteBorderRadius: borders.radiusMedium,
48
47
  paletteBorderWidth: borders.widthSmall,
package/lib/ColorMixer/Slider/theme.js CHANGED
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
- var _theme = require("../../ColorIndicator/theme");
8
7
  /*
9
8
  * The MIT License (MIT)
10
9
  *
@@ -35,7 +34,7 @@ var _theme = require("../../ColorIndicator/theme");
35
34
  * @return {Object} The final theme object with the overrides and component variables
36
35
  */
37
36
  const generateComponentTheme = theme => {
38
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5;
37
+ var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6;
39
38
  const colors = theme.colors,
40
39
  borders = theme.borders,
41
40
  stacking = theme.stacking;
@@ -47,7 +46,7 @@ const generateComponentTheme = theme => {
47
46
  linear-gradient(-45deg, transparent 75%, ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.grey1111} 75%)`,
48
47
  checkerboardBackgroundSize: '.5rem .5rem',
49
48
  checkerboardBackgroundPosition: '0 0, 0 .25rem, .25rem -0.25rem, -0.25rem 0px',
50
- colorIndicatorBorderColor: _theme.colorIndicatorBorderColor,
49
+ colorIndicatorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.grey1424,
51
50
  indicatorBorderWidth: borders.widthSmall,
52
51
  sliderBorderWidth: borders.widthSmall,
53
52
  indicatorZIndex: stacking.above,
package/lib/ColorPicker/theme.js CHANGED
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
- var _theme = require("../ColorIndicator/theme");
8
7
  /*
9
8
  * The MIT License (MIT)
10
9
  *
@@ -35,7 +34,7 @@ var _theme = require("../ColorIndicator/theme");
35
34
  * @return {Object} The final theme object with the overrides and component variables
36
35
  */
37
36
  const generateComponentTheme = theme => {
38
- var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts10, _colors$contrasts11;
37
+ var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts10, _colors$contrasts11, _colors$contrasts12;
39
38
  const colors = theme.colors,
40
39
  borders = theme.borders,
41
40
  spacing = theme.spacing,
@@ -60,7 +59,7 @@ const generateComponentTheme = theme => {
60
59
  linear-gradient(-45deg, transparent 75%, ${colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.grey1214} 75%)`,
61
60
  checkerboardBackgroundSize: '.5rem .5rem',
62
61
  checkerboardBackgroundPosition: '0 0, 0 .25rem, .25rem -0.25rem, -0.25rem 0px',
63
- colorIndicatorBorderColor: _theme.colorIndicatorBorderColor,
62
+ colorIndicatorBorderColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts12 = colors.contrasts) === null || _colors$contrasts12 === void 0 ? void 0 : _colors$contrasts12.grey1424,
64
63
  simpleColorContainerLeftPadding: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
65
64
  hashMarkContainerLineHeight: typography === null || typography === void 0 ? void 0 : typography.fontSizeXLarge,
66
65
  hashMarkContainerLeftPadding: spacing === null || spacing === void 0 ? void 0 : spacing.xSmall,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-color-picker",
3
- "version": "10.15.2",
3
+ "version": "10.15.3-snapshot-1",
4
4
  "description": "A UI component library made by Instructure Inc.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -24,33 +24,33 @@
24
24
  "license": "MIT",
25
25
  "dependencies": {
26
26
  "@babel/runtime": "^7.26.0",
27
- "@instructure/console": "10.15.2",
28
- "@instructure/emotion": "10.15.2",
29
- "@instructure/shared-types": "10.15.2",
30
- "@instructure/ui-a11y-content": "10.15.2",
31
- "@instructure/ui-buttons": "10.15.2",
32
- "@instructure/ui-color-utils": "10.15.2",
33
- "@instructure/ui-dom-utils": "10.15.2",
34
- "@instructure/ui-drilldown": "10.15.2",
35
- "@instructure/ui-form-field": "10.15.2",
36
- "@instructure/ui-icons": "10.15.2",
37
- "@instructure/ui-pill": "10.15.2",
38
- "@instructure/ui-popover": "10.15.2",
39
- "@instructure/ui-react-utils": "10.15.2",
40
- "@instructure/ui-testable": "10.15.2",
41
- "@instructure/ui-text": "10.15.2",
42
- "@instructure/ui-text-input": "10.15.2",
43
- "@instructure/ui-themes": "10.15.2",
44
- "@instructure/ui-tooltip": "10.15.2",
45
- "@instructure/ui-utils": "10.15.2",
46
- "@instructure/ui-view": "10.15.2",
27
+ "@instructure/console": "10.15.3-snapshot-1",
28
+ "@instructure/emotion": "10.15.3-snapshot-1",
29
+ "@instructure/shared-types": "10.15.3-snapshot-1",
30
+ "@instructure/ui-a11y-content": "10.15.3-snapshot-1",
31
+ "@instructure/ui-buttons": "10.15.3-snapshot-1",
32
+ "@instructure/ui-color-utils": "10.15.3-snapshot-1",
33
+ "@instructure/ui-dom-utils": "10.15.3-snapshot-1",
34
+ "@instructure/ui-drilldown": "10.15.3-snapshot-1",
35
+ "@instructure/ui-form-field": "10.15.3-snapshot-1",
36
+ "@instructure/ui-icons": "10.15.3-snapshot-1",
37
+ "@instructure/ui-pill": "10.15.3-snapshot-1",
38
+ "@instructure/ui-popover": "10.15.3-snapshot-1",
39
+ "@instructure/ui-react-utils": "10.15.3-snapshot-1",
40
+ "@instructure/ui-testable": "10.15.3-snapshot-1",
41
+ "@instructure/ui-text": "10.15.3-snapshot-1",
42
+ "@instructure/ui-text-input": "10.15.3-snapshot-1",
43
+ "@instructure/ui-themes": "10.15.3-snapshot-1",
44
+ "@instructure/ui-tooltip": "10.15.3-snapshot-1",
45
+ "@instructure/ui-utils": "10.15.3-snapshot-1",
46
+ "@instructure/ui-view": "10.15.3-snapshot-1",
47
47
  "prop-types": "^15.8.1"
48
48
  },
49
49
  "devDependencies": {
50
- "@instructure/ui-axe-check": "10.15.2",
51
- "@instructure/ui-babel-preset": "10.15.2",
52
- "@instructure/ui-scripts": "10.15.2",
53
- "@instructure/ui-test-utils": "10.15.2",
50
+ "@instructure/ui-axe-check": "10.15.3-snapshot-1",
51
+ "@instructure/ui-babel-preset": "10.15.3-snapshot-1",
52
+ "@instructure/ui-scripts": "10.15.3-snapshot-1",
53
+ "@instructure/ui-test-utils": "10.15.3-snapshot-1",
54
54
  "@testing-library/jest-dom": "^6.6.3",
55
55
  "@testing-library/react": "^16.0.1",
56
56
  "@testing-library/user-event": "^14.5.2",
package/src/ColorIndicator/theme.ts CHANGED
@@ -25,8 +25,6 @@
25
25
  import type { Theme } from '@instructure/ui-themes'
26
26
  import { ColorIndicatorTheme } from '@instructure/shared-types'
27
27
 
28
- export const colorIndicatorBorderColor = '#384A5899'
29
-
30
28
  /**
31
29
  * Generates the theme object for the component from the theme and provided additional information
32
30
  * @param {Object} theme The actual theme object.
@@ -45,7 +43,7 @@ const generateComponentTheme = (theme: Theme): ColorIndicatorTheme => {
45
43
  backgroundPosition: '0 0, 0 .25rem, .25rem -0.25rem, -0.25rem 0px',
46
44
  circleIndicatorSize: '1.5rem',
47
45
  rectangleIndicatorSize: '2.375rem',
48
- colorIndicatorBorderColor,
46
+ colorIndicatorBorderColor: colors?.contrasts?.grey1424,
49
47
  rectangularIndicatorBorderRadius: spacing?.xxSmall,
50
48
  rectangularIndicatorBorderWidth: borders?.widthSmall
51
49
  }
package/src/ColorMixer/ColorPalette/theme.ts CHANGED
@@ -24,7 +24,6 @@
24
24
 
25
25
  import type { Theme } from '@instructure/ui-themes'
26
26
  import type { ColorMixerPaletteTheme } from '@instructure/shared-types'
27
- import { colorIndicatorBorderColor } from '../../ColorIndicator/theme'
28
27
 
29
28
  /**
30
29
  * Generates the theme object for the component from the theme and provided additional information
@@ -37,7 +36,7 @@ const generateComponentTheme = (theme: Theme): ColorMixerPaletteTheme => {
37
36
  const componentVariables = {
38
37
  indicatorBorderColor: colors?.contrasts?.grey125125,
39
38
  whiteColor: colors?.contrasts?.white1010,
40
- colorIndicatorBorderColor,
39
+ colorIndicatorBorderColor: colors?.contrasts?.grey1424,
41
40
  indicatorBorderWidth: borders.widthSmall,
42
41
  paletteBorderRadius: borders.radiusMedium,
43
42
  paletteBorderWidth: borders.widthSmall,
package/src/ColorMixer/Slider/theme.ts CHANGED
@@ -24,7 +24,6 @@
24
24
 
25
25
  import type { Theme } from '@instructure/ui-themes'
26
26
  import type { ColorMixerSliderTheme } from '@instructure/shared-types'
27
- import { colorIndicatorBorderColor } from '../../ColorIndicator/theme'
28
27
 
29
28
  /**
30
29
  * Generates the theme object for the component from the theme and provided additional information
@@ -44,7 +43,7 @@ const generateComponentTheme = (theme: Theme): ColorMixerSliderTheme => {
44
43
  checkerboardBackgroundSize: '.5rem .5rem',
45
44
  checkerboardBackgroundPosition:
46
45
  '0 0, 0 .25rem, .25rem -0.25rem, -0.25rem 0px',
47
- colorIndicatorBorderColor,
46
+ colorIndicatorBorderColor: colors?.contrasts?.grey1424,
48
47
  indicatorBorderWidth: borders.widthSmall,
49
48
  sliderBorderWidth: borders.widthSmall,
50
49
  indicatorZIndex: stacking.above,
package/src/ColorPicker/theme.ts CHANGED
@@ -24,7 +24,6 @@
24
24
 
25
25
  import type { Theme } from '@instructure/ui-themes'
26
26
  import type { ColorPickerTheme } from '@instructure/shared-types'
27
- import { colorIndicatorBorderColor } from '../ColorIndicator/theme'
28
27
 
29
28
  /**
30
29
  * Generates the theme object for the component from the theme and provided additional information
@@ -55,7 +54,7 @@ const generateComponentTheme = (theme: Theme): ColorPickerTheme => {
55
54
  checkerboardBackgroundSize: '.5rem .5rem',
56
55
  checkerboardBackgroundPosition:
57
56
  '0 0, 0 .25rem, .25rem -0.25rem, -0.25rem 0px',
58
- colorIndicatorBorderColor,
57
+ colorIndicatorBorderColor: colors?.contrasts?.grey1424,
59
58
  simpleColorContainerLeftPadding: spacing?.xSmall,
60
59
  hashMarkContainerLineHeight: typography?.fontSizeXLarge,
61
60
  hashMarkContainerLeftPadding: spacing?.xSmall,