@instructure/ui-theme-tokens 9.5.2-snapshot-1 → 10.0.0

package/CHANGELOG.md

@@ -3,9 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [9.5.2-snapshot-1](https://github.com/instructure/instructure-ui/compare/v9.5.1...v9.5.2-snapshot-1) (2024-07-31)
+# [10.0.0](https://github.com/instructure/instructure-ui/compare/v9.5.1...v10.0.0) (2024-07-31)
 
-**Note:** Version bump only for package @instructure/ui-theme-tokens
+
+### Features
+
+* **many:** rewrite color system ([1e5809e](https://github.com/instructure/instructure-ui/commit/1e5809e28dee8c2a71703a429609b8d2f95d76e6))
+* **shared-types,ui-theme-tokens:** add transparent colors to the palette ([7219606](https://github.com/instructure/instructure-ui/commit/7219606144114fd4bf4048177dfe31ee81de76d9))
+
+
+### BREAKING CHANGES
+
+* **many:** Breaks color overrides in certain cases
 
 
 

package/es/canvas/colors.js

@@ -22,23 +22,39 @@
  * SOFTWARE.
  */
 
-import { functionalColors } from '../utils/functionalColors';
-const baseColors = {
-  brand: '#0374B5',
-  link: '#0374B5',
-  electric: '#0374B5',
-  shamrock: '#0B874B',
-  barney: '#BF32A4',
-  crimson: '#E0061F',
-  fire: '#FC5E13',
-  licorice: '#2D3B45',
-  oxford: '#394B58',
-  ash: '#6B7780',
-  slate: '#8B969E',
-  tiara: '#C7CDD1',
-  porcelain: '#F5F5F5',
-  white: '#FFFFFF'
+import primitives from '../common/colors/primitves';
+import getUIColors from '../utils/getUIColors';
+const contrasts = {
+  white1010: primitives.white,
+  white1010op75: primitives.white10op75,
+  grey1111: primitives.grey11,
+  grey1214: primitives.grey12,
+  grey1424: primitives.grey14,
+  grey2424: primitives.grey24,
+  grey4570: primitives.grey45,
+  grey5782: primitives.grey57,
+  grey100100: primitives.grey100,
+  grey100100op75: primitives.grey100op75,
+  grey125125: primitives.grey125,
+  blue1212: primitives.blue12,
+  blue4570: primitives.blue45,
+  blue5782: primitives.blue57,
+  green1212: primitives.green12,
+  green4570: primitives.green45,
+  green5782: primitives.green57,
+  orange1212: primitives.orange12,
+  orange3045: primitives.orange30,
+  orange4570: primitives.orange45,
+  orange5782: primitives.orange57,
+  red1212: primitives.red12,
+  red4570: primitives.red45,
+  red5782: primitives.red57
+};
+const ui = getUIColors(contrasts);
+const colors = {
+  primitives,
+  contrasts,
+  ui
 };
-const colors = Object.freeze(functionalColors(baseColors));
 export default colors;
 export { colors };

package/es/canvasHighContrast/colors.js

@@ -22,23 +22,39 @@
  * SOFTWARE.
  */
 
-import { functionalColors } from '../utils/functionalColors';
-const baseColors = {
-  brand: '#0770A3',
-  link: '#0770A3',
-  electric: '#0770A3',
-  shamrock: '#127A1B',
-  barney: '#B8309E',
-  crimson: '#D01A19',
-  fire: '#C23C0D',
-  licorice: '#2D3B45',
-  oxford: '#394B58',
-  ash: '#556572',
-  slate: '#556572',
-  tiara: '#556572',
-  porcelain: '#FFFFFF',
-  white: '#FFFFFF'
+import primitives from '../common/colors/primitves';
+import getUIColors from '../utils/getUIColors';
+const contrasts = {
+  white1010: primitives.white,
+  white1010op75: primitives.white10op75,
+  grey1111: primitives.grey11,
+  grey1214: primitives.grey14,
+  grey1424: primitives.grey24,
+  grey2424: primitives.grey24,
+  grey4570: primitives.grey70,
+  grey5782: primitives.grey82,
+  grey100100: primitives.grey100,
+  grey100100op75: primitives.grey100op75,
+  grey125125: primitives.grey125,
+  blue1212: primitives.blue12,
+  blue4570: primitives.blue70,
+  blue5782: primitives.blue82,
+  green1212: primitives.green12,
+  green4570: primitives.green70,
+  green5782: primitives.green82,
+  orange1212: primitives.orange12,
+  orange3045: primitives.orange45,
+  orange4570: primitives.orange70,
+  orange5782: primitives.orange82,
+  red1212: primitives.red12,
+  red4570: primitives.red70,
+  red5782: primitives.red82
+};
+const ui = getUIColors(contrasts);
+const colors = {
+  primitives,
+  contrasts,
+  ui
 };
-const colors = Object.freeze(functionalColors(baseColors));
 export default colors;
 export { colors };

package/es/{instructure/forms.js → common/colors/index.js}

@@ -22,10 +22,8 @@
  * SOFTWARE.
  */
 
-const forms = Object.freeze({
-  inputHeightSmall: '2rem',
-  inputHeightMedium: '2.75rem',
-  inputHeightLarge: '3.375rem'
-});
-export default forms;
-export { forms };
+import primitives from './primitves';
+const colors = {
+  primitives
+};
+export default colors;

package/es/{instructure/index.js → common/colors/primitves.js}

@@ -22,17 +22,40 @@
  * SOFTWARE.
  */
 
-import { canvas } from '../canvas';
-import { colors } from './colors';
-import { forms } from './forms';
-import { spacing } from './spacing';
-import { typography } from './typography';
-const instructure = {
-  ...canvas,
-  colors,
-  forms,
-  spacing,
-  typography
+const primitives = {
+  white: '#FFFFFF',
+  white10op75: '#FFFFFFBF',
+  grey11: '#F2F4F4',
+  grey12: '#E8EAEC',
+  grey14: '#D7DADE',
+  grey24: '#9EA6AD',
+  grey45: '#6A7883',
+  grey57: '#586874',
+  grey70: '#4A5B68',
+  grey82: '#3F515E',
+  grey100: '#334451',
+  grey100op75: '#334451BF',
+  grey125: '#273540',
+  blue12: '#E0EBF5',
+  blue45: '#2B7ABC',
+  blue57: '#0E68B3',
+  blue70: '#0A5A9E',
+  blue82: '#09508C',
+  green12: '#DCEEE4',
+  green45: '#03893D',
+  green57: '#027634',
+  green70: '#02672D',
+  green82: '#015B28',
+  orange12: '#FCE5D9',
+  orange30: '#F06E26',
+  orange45: '#CF4A00',
+  orange57: '#B34000',
+  orange70: '#9C3800',
+  orange82: '#8B3200',
+  red12: '#FCE4E5',
+  red45: '#E62429',
+  red57: '#C71F23',
+  red70: '#AE1B1F',
+  red82: '#9B181C'
 };
-export default instructure;
-export { instructure };
+export default primitives;

package/es/index.js

@@ -24,6 +24,5 @@
 
 import { canvas } from './canvas';
 import { canvasHighContrast } from './canvasHighContrast';
-import { instructure } from './instructure';
-import { functionalColors } from './utils/functionalColors';
-export { canvas, canvasHighContrast, instructure, functionalColors };
+import primitives from './common/colors/primitves';
+export { canvas, canvasHighContrast, primitives };

package/es/utils/getUIColors.js

@@ -0,0 +1,48 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+export const getUIColors = contrasts => ({
+  surfacePagePrimary: contrasts === null || contrasts === void 0 ? void 0 : contrasts.white1010,
+  surfacePageSecondary: contrasts === null || contrasts === void 0 ? void 0 : contrasts.grey1111,
+  surfaceCardPrimary: contrasts === null || contrasts === void 0 ? void 0 : contrasts.white1010,
+  surfaceCardSecondary: contrasts === null || contrasts === void 0 ? void 0 : contrasts.grey1111,
+  surfaceDark: contrasts === null || contrasts === void 0 ? void 0 : contrasts.grey100100,
+  textTitle: contrasts === null || contrasts === void 0 ? void 0 : contrasts.grey125125,
+  textDescription: contrasts === null || contrasts === void 0 ? void 0 : contrasts.grey125125,
+  textBody: contrasts === null || contrasts === void 0 ? void 0 : contrasts.grey125125,
+  textTimestamp: contrasts === null || contrasts === void 0 ? void 0 : contrasts.grey5782,
+  textAuthor: contrasts === null || contrasts === void 0 ? void 0 : contrasts.grey5782,
+  textDatapoint: contrasts === null || contrasts === void 0 ? void 0 : contrasts.grey5782,
+  textLink: contrasts === null || contrasts === void 0 ? void 0 : contrasts.blue4570,
+  textPlaceholder: contrasts === null || contrasts === void 0 ? void 0 : contrasts.grey2424,
+  textSuccess: contrasts === null || contrasts === void 0 ? void 0 : contrasts.green4570,
+  textWarning: contrasts === null || contrasts === void 0 ? void 0 : contrasts.orange4570,
+  textError: contrasts === null || contrasts === void 0 ? void 0 : contrasts.red4570,
+  lineStroke: contrasts === null || contrasts === void 0 ? void 0 : contrasts.grey1424,
+  lineDivider: contrasts === null || contrasts === void 0 ? void 0 : contrasts.grey1214,
+  surfaceOverlayGrey: contrasts === null || contrasts === void 0 ? void 0 : contrasts.grey100100op75,
+  surfaceOverlayWhite: contrasts === null || contrasts === void 0 ? void 0 : contrasts.white1010op75,
+  surfaceDivider: contrasts === null || contrasts === void 0 ? void 0 : contrasts.grey1424
+});
+export default getUIColors;

package/lib/canvas/colors.js

@@ -1,10 +1,12 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.colors = void 0;
-var _functionalColors = require("../utils/functionalColors");
+var _primitves = _interopRequireDefault(require("../common/colors/primitves"));
+var _getUIColors = _interopRequireDefault(require("../utils/getUIColors"));
 /*
  * The MIT License (MIT)
  *
@@ -29,21 +31,36 @@ var _functionalColors = require("../utils/functionalColors");
  * SOFTWARE.
  */
 
-const baseColors = {
-  brand: '#0374B5',
-  link: '#0374B5',
-  electric: '#0374B5',
-  shamrock: '#0B874B',
-  barney: '#BF32A4',
-  crimson: '#E0061F',
-  fire: '#FC5E13',
-  licorice: '#2D3B45',
-  oxford: '#394B58',
-  ash: '#6B7780',
-  slate: '#8B969E',
-  tiara: '#C7CDD1',
-  porcelain: '#F5F5F5',
-  white: '#FFFFFF'
+const contrasts = {
+  white1010: _primitves.default.white,
+  white1010op75: _primitves.default.white10op75,
+  grey1111: _primitves.default.grey11,
+  grey1214: _primitves.default.grey12,
+  grey1424: _primitves.default.grey14,
+  grey2424: _primitves.default.grey24,
+  grey4570: _primitves.default.grey45,
+  grey5782: _primitves.default.grey57,
+  grey100100: _primitves.default.grey100,
+  grey100100op75: _primitves.default.grey100op75,
+  grey125125: _primitves.default.grey125,
+  blue1212: _primitves.default.blue12,
+  blue4570: _primitves.default.blue45,
+  blue5782: _primitves.default.blue57,
+  green1212: _primitves.default.green12,
+  green4570: _primitves.default.green45,
+  green5782: _primitves.default.green57,
+  orange1212: _primitves.default.orange12,
+  orange3045: _primitves.default.orange30,
+  orange4570: _primitves.default.orange45,
+  orange5782: _primitves.default.orange57,
+  red1212: _primitves.default.red12,
+  red4570: _primitves.default.red45,
+  red5782: _primitves.default.red57
+};
+const ui = (0, _getUIColors.default)(contrasts);
+const colors = exports.colors = {
+  primitives: _primitves.default,
+  contrasts,
+  ui
 };
-const colors = exports.colors = Object.freeze((0, _functionalColors.functionalColors)(baseColors));
 var _default = exports.default = colors;

package/lib/canvasHighContrast/colors.js

@@ -1,10 +1,12 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.colors = void 0;
-var _functionalColors = require("../utils/functionalColors");
+var _primitves = _interopRequireDefault(require("../common/colors/primitves"));
+var _getUIColors = _interopRequireDefault(require("../utils/getUIColors"));
 /*
  * The MIT License (MIT)
  *
@@ -29,21 +31,36 @@ var _functionalColors = require("../utils/functionalColors");
  * SOFTWARE.
  */
 
-const baseColors = {
-  brand: '#0770A3',
-  link: '#0770A3',
-  electric: '#0770A3',
-  shamrock: '#127A1B',
-  barney: '#B8309E',
-  crimson: '#D01A19',
-  fire: '#C23C0D',
-  licorice: '#2D3B45',
-  oxford: '#394B58',
-  ash: '#556572',
-  slate: '#556572',
-  tiara: '#556572',
-  porcelain: '#FFFFFF',
-  white: '#FFFFFF'
+const contrasts = {
+  white1010: _primitves.default.white,
+  white1010op75: _primitves.default.white10op75,
+  grey1111: _primitves.default.grey11,
+  grey1214: _primitves.default.grey14,
+  grey1424: _primitves.default.grey24,
+  grey2424: _primitves.default.grey24,
+  grey4570: _primitves.default.grey70,
+  grey5782: _primitves.default.grey82,
+  grey100100: _primitves.default.grey100,
+  grey100100op75: _primitves.default.grey100op75,
+  grey125125: _primitves.default.grey125,
+  blue1212: _primitves.default.blue12,
+  blue4570: _primitves.default.blue70,
+  blue5782: _primitves.default.blue82,
+  green1212: _primitves.default.green12,
+  green4570: _primitves.default.green70,
+  green5782: _primitves.default.green82,
+  orange1212: _primitves.default.orange12,
+  orange3045: _primitves.default.orange45,
+  orange4570: _primitves.default.orange70,
+  orange5782: _primitves.default.orange82,
+  red1212: _primitves.default.red12,
+  red4570: _primitves.default.red70,
+  red5782: _primitves.default.red82
+};
+const ui = (0, _getUIColors.default)(contrasts);
+const colors = exports.colors = {
+  primitives: _primitves.default,
+  contrasts,
+  ui
 };
-const colors = exports.colors = Object.freeze((0, _functionalColors.functionalColors)(baseColors));
 var _default = exports.default = colors;

package/lib/{instructure/forms.js → common/colors/index.js}

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.forms = exports.default = void 0;
+exports.default = void 0;
+var _primitves = _interopRequireDefault(require("./primitves"));
 /*
  * The MIT License (MIT)
  *
@@ -28,9 +30,7 @@ exports.forms = exports.default = void 0;
  * SOFTWARE.
  */
 
-const forms = exports.forms = Object.freeze({
-  inputHeightSmall: '2rem',
-  inputHeightMedium: '2.75rem',
-  inputHeightLarge: '3.375rem'
-});
-var _default = exports.default = forms;
+const colors = {
+  primitives: _primitves.default
+};
+var _default = exports.default = colors;

package/lib/{instructure/index.js → common/colors/primitves.js}

@@ -3,12 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.instructure = exports.default = void 0;
-var _canvas = require("../canvas");
-var _colors = require("./colors");
-var _forms = require("./forms");
-var _spacing = require("./spacing");
-var _typography = require("./typography");
+exports.default = void 0;
 /*
  * The MIT License (MIT)
  *
@@ -33,11 +28,40 @@ var _typography = require("./typography");
  * SOFTWARE.
  */
 
-const instructure = exports.instructure = {
-  ..._canvas.canvas,
-  colors: _colors.colors,
-  forms: _forms.forms,
-  spacing: _spacing.spacing,
-  typography: _typography.typography
+const primitives = {
+  white: '#FFFFFF',
+  white10op75: '#FFFFFFBF',
+  grey11: '#F2F4F4',
+  grey12: '#E8EAEC',
+  grey14: '#D7DADE',
+  grey24: '#9EA6AD',
+  grey45: '#6A7883',
+  grey57: '#586874',
+  grey70: '#4A5B68',
+  grey82: '#3F515E',
+  grey100: '#334451',
+  grey100op75: '#334451BF',
+  grey125: '#273540',
+  blue12: '#E0EBF5',
+  blue45: '#2B7ABC',
+  blue57: '#0E68B3',
+  blue70: '#0A5A9E',
+  blue82: '#09508C',
+  green12: '#DCEEE4',
+  green45: '#03893D',
+  green57: '#027634',
+  green70: '#02672D',
+  green82: '#015B28',
+  orange12: '#FCE5D9',
+  orange30: '#F06E26',
+  orange45: '#CF4A00',
+  orange57: '#B34000',
+  orange70: '#9C3800',
+  orange82: '#8B3200',
+  red12: '#FCE4E5',
+  red45: '#E62429',
+  red57: '#C71F23',
+  red70: '#AE1B1F',
+  red82: '#9B181C'
 };
-var _default = exports.default = instructure;
+var _default = exports.default = primitives;

package/lib/index.js

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,19 +16,12 @@ Object.defineProperty(exports, "canvasHighContrast", {
     return _canvasHighContrast.canvasHighContrast;
   }
 });
-Object.defineProperty(exports, "functionalColors", {
+Object.defineProperty(exports, "primitives", {
   enumerable: true,
   get: function () {
-    return _functionalColors.functionalColors;
-  }
-});
-Object.defineProperty(exports, "instructure", {
-  enumerable: true,
-  get: function () {
-    return _instructure.instructure;
+    return _primitves.default;
   }
 });
 var _canvas = require("./canvas");
 var _canvasHighContrast = require("./canvasHighContrast");
-var _instructure = require("./instructure");
-var _functionalColors = require("./utils/functionalColors");
+var _primitves = _interopRequireDefault(require("./common/colors/primitves"));

package/lib/utils/getUIColors.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getUIColors = exports.default = void 0;
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+const getUIColors = contrasts => ({
+  surfacePagePrimary: contrasts === null || contrasts === void 0 ? void 0 : contrasts.white1010,
+  surfacePageSecondary: contrasts === null || contrasts === void 0 ? void 0 : contrasts.grey1111,
+  surfaceCardPrimary: contrasts === null || contrasts === void 0 ? void 0 : contrasts.white1010,
+  surfaceCardSecondary: contrasts === null || contrasts === void 0 ? void 0 : contrasts.grey1111,
+  surfaceDark: contrasts === null || contrasts === void 0 ? void 0 : contrasts.grey100100,
+  textTitle: contrasts === null || contrasts === void 0 ? void 0 : contrasts.grey125125,
+  textDescription: contrasts === null || contrasts === void 0 ? void 0 : contrasts.grey125125,
+  textBody: contrasts === null || contrasts === void 0 ? void 0 : contrasts.grey125125,
+  textTimestamp: contrasts === null || contrasts === void 0 ? void 0 : contrasts.grey5782,
+  textAuthor: contrasts === null || contrasts === void 0 ? void 0 : contrasts.grey5782,
+  textDatapoint: contrasts === null || contrasts === void 0 ? void 0 : contrasts.grey5782,
+  textLink: contrasts === null || contrasts === void 0 ? void 0 : contrasts.blue4570,
+  textPlaceholder: contrasts === null || contrasts === void 0 ? void 0 : contrasts.grey2424,
+  textSuccess: contrasts === null || contrasts === void 0 ? void 0 : contrasts.green4570,
+  textWarning: contrasts === null || contrasts === void 0 ? void 0 : contrasts.orange4570,
+  textError: contrasts === null || contrasts === void 0 ? void 0 : contrasts.red4570,
+  lineStroke: contrasts === null || contrasts === void 0 ? void 0 : contrasts.grey1424,
+  lineDivider: contrasts === null || contrasts === void 0 ? void 0 : contrasts.grey1214,
+  surfaceOverlayGrey: contrasts === null || contrasts === void 0 ? void 0 : contrasts.grey100100op75,
+  surfaceOverlayWhite: contrasts === null || contrasts === void 0 ? void 0 : contrasts.white1010op75,
+  surfaceDivider: contrasts === null || contrasts === void 0 ? void 0 : contrasts.grey1424
+});
+exports.getUIColors = getUIColors;
+var _default = exports.default = getUIColors;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-theme-tokens",
-  "version": "9.5.2-snapshot-1",
+  "version": "10.0.0",
   "description": "Cross-platform theme tokens for Instructure products",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -22,13 +22,13 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "9.5.2-snapshot-1",
-    "@instructure/ui-color-utils": "9.5.2-snapshot-1",
-    "@instructure/ui-test-utils": "9.5.2-snapshot-1"
+    "@instructure/ui-babel-preset": "10.0.0",
+    "@instructure/ui-color-utils": "10.0.0",
+    "@instructure/ui-test-utils": "10.0.0"
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/shared-types": "9.5.2-snapshot-1"
+    "@instructure/shared-types": "10.0.0"
   },
   "publishConfig": {
     "access": "public"