@instructure/ui-themes 10.0.1-snapshot-14 → 10.2.0

package/lib/themes/canvas/colors.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.colors = void 0;
+var _primitives = require("../../sharedThemeTokens/colors/primitives");
+var _dataVisualization = _interopRequireDefault(require("../../sharedThemeTokens/colors/dataVisualization"));
+var _getUIColors = _interopRequireDefault(require("../../utils/getUIColors"));
+/*
+ * 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 contrasts = {
+  white1010: _primitives.primitives.white,
+  white1010op75: _primitives.primitives.white10op75,
+  grey1111: _primitives.primitives.grey11,
+  grey1214: _primitives.primitives.grey12,
+  grey1424: _primitives.primitives.grey14,
+  grey2424: _primitives.primitives.grey24,
+  grey4570: _primitives.primitives.grey45,
+  grey5782: _primitives.primitives.grey57,
+  grey100100: _primitives.primitives.grey100,
+  grey100100op75: _primitives.primitives.grey100op75,
+  grey125125: _primitives.primitives.grey125,
+  blue1212: _primitives.primitives.blue12,
+  blue4570: _primitives.primitives.blue45,
+  blue5782: _primitives.primitives.blue57,
+  green1212: _primitives.primitives.green12,
+  green4570: _primitives.primitives.green45,
+  green5782: _primitives.primitives.green57,
+  orange1212: _primitives.primitives.orange12,
+  orange3045: _primitives.primitives.orange30,
+  orange4570: _primitives.primitives.orange45,
+  orange5782: _primitives.primitives.orange57,
+  red1212: _primitives.primitives.red12,
+  red4570: _primitives.primitives.red45,
+  red5782: _primitives.primitives.red57
+};
+const ui = (0, _getUIColors.default)(contrasts);
+const colors = exports.colors = {
+  primitives: _primitives.primitives,
+  additionalPrimitives: _primitives.additionalPrimitives,
+  contrasts,
+  ui,
+  dataVisualization: _dataVisualization.default
+};
+var _default = exports.default = {
+  primitives: _primitives.primitives,
+  contrasts,
+  ui
+};

package/lib/themes/canvas/index.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _sharedThemeTokens = _interopRequireDefault(require("../../sharedThemeTokens"));
+var _themeRegistry = require("@instructure/theme-registry");
+var _colors = _interopRequireDefault(require("./colors"));
+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, _colors$contrasts13;
+/*
+ * 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 key = 'canvas';
+const brandVariables = {
+  /* Defaults for Canvas account branding variables: */
+  'ic-brand-primary': _colors.default === null || _colors.default === void 0 ? void 0 : (_colors$contrasts = _colors.default.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.blue4570,
+  'ic-brand-font-color-dark': _colors.default === null || _colors.default === void 0 ? void 0 : (_colors$contrasts2 = _colors.default.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125,
+  'ic-link-color': _colors.default === null || _colors.default === void 0 ? void 0 : (_colors$contrasts3 = _colors.default.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.blue4570,
+  'ic-link-decoration': 'none',
+  'ic-brand-button--primary-bgd': _colors.default === null || _colors.default === void 0 ? void 0 : (_colors$contrasts4 = _colors.default.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.blue4570,
+  'ic-brand-button--primary-text': _colors.default === null || _colors.default === void 0 ? void 0 : (_colors$contrasts5 = _colors.default.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.white1010,
+  'ic-brand-button--secondary-bgd': _colors.default === null || _colors.default === void 0 ? void 0 : (_colors$contrasts6 = _colors.default.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.grey125125,
+  'ic-brand-button--secondary-text': _colors.default === null || _colors.default === void 0 ? void 0 : (_colors$contrasts7 = _colors.default.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.white1010,
+  'ic-brand-global-nav-bgd': _colors.default === null || _colors.default === void 0 ? void 0 : (_colors$contrasts8 = _colors.default.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.grey100100,
+  'ic-global-nav-link-hover': _colors.default === null || _colors.default === void 0 ? void 0 : (_colors$contrasts9 = _colors.default.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.grey125125,
+  'ic-brand-global-nav-ic-icon-svg-fill': _colors.default === null || _colors.default === void 0 ? void 0 : (_colors$contrasts10 = _colors.default.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.white1010,
+  'ic-brand-global-nav-ic-icon-svg-fill--active': _colors.default === null || _colors.default === void 0 ? void 0 : (_colors$contrasts11 = _colors.default.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.blue4570,
+  'ic-brand-global-nav-menu-item__text-color': _colors.default === null || _colors.default === void 0 ? void 0 : (_colors$contrasts12 = _colors.default.contrasts) === null || _colors$contrasts12 === void 0 ? void 0 : _colors$contrasts12.white1010,
+  'ic-brand-global-nav-menu-item__text-color--active': _colors.default === null || _colors.default === void 0 ? void 0 : (_colors$contrasts13 = _colors.default.contrasts) === null || _colors$contrasts13 === void 0 ? void 0 : _colors$contrasts13.blue4570
+};
+const __theme = {
+  key,
+  ..._sharedThemeTokens.default,
+  colors: _colors.default,
+  ...brandVariables
+};
+const theme = _themeRegistry.ThemeRegistry.registerTheme(__theme);
+var _default = exports.default = theme;

package/lib/themes/canvasHighContrast/colors.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.colors = void 0;
+var _primitives = require("../../sharedThemeTokens/colors/primitives");
+var _dataVisualization = _interopRequireDefault(require("../../sharedThemeTokens/colors/dataVisualization"));
+var _getUIColors = _interopRequireDefault(require("../../utils/getUIColors"));
+/*
+ * 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 contrasts = {
+  white1010: _primitives.primitives.white,
+  white1010op75: _primitives.primitives.white10op75,
+  grey1111: _primitives.primitives.grey11,
+  grey1214: _primitives.primitives.grey14,
+  grey1424: _primitives.primitives.grey24,
+  grey2424: _primitives.primitives.grey24,
+  grey4570: _primitives.primitives.grey70,
+  grey5782: _primitives.primitives.grey82,
+  grey100100: _primitives.primitives.grey100,
+  grey100100op75: _primitives.primitives.grey100op75,
+  grey125125: _primitives.primitives.grey125,
+  blue1212: _primitives.primitives.blue12,
+  blue4570: _primitives.primitives.blue70,
+  blue5782: _primitives.primitives.blue82,
+  green1212: _primitives.primitives.green12,
+  green4570: _primitives.primitives.green70,
+  green5782: _primitives.primitives.green82,
+  orange1212: _primitives.primitives.orange12,
+  orange3045: _primitives.primitives.orange45,
+  orange4570: _primitives.primitives.orange70,
+  orange5782: _primitives.primitives.orange82,
+  red1212: _primitives.primitives.red12,
+  red4570: _primitives.primitives.red70,
+  red5782: _primitives.primitives.red82
+};
+const ui = (0, _getUIColors.default)(contrasts);
+const colors = exports.colors = {
+  primitives: _primitives.primitives,
+  additionalPrimitives: _primitives.additionalPrimitives,
+  contrasts,
+  ui,
+  dataVisualization: _dataVisualization.default
+};
+var _default = exports.default = {
+  primitives: _primitives.primitives,
+  contrasts,
+  ui
+};

package/lib/themes/canvasHighContrast/index.js

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _sharedThemeTokens = _interopRequireDefault(require("../../sharedThemeTokens"));
+var _themeRegistry = require("@instructure/theme-registry");
+var _colors = _interopRequireDefault(require("./colors"));
+/*
+ * 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 key = 'canvas-high-contrast';
+const __theme = {
+  key,
+  description: 'This theme meets WCAG 2.0 AA rules for color contrast.',
+  ..._sharedThemeTokens.default,
+  colors: _colors.default
+};
+const theme = _themeRegistry.ThemeRegistry.registerTheme(__theme);
+var _default = exports.default = theme;

package/lib/utils/getUIColors.js

@@ -0,0 +1,66 @@
+"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.blue5782,
+  textPlaceholder: contrasts === null || contrasts === void 0 ? void 0 : contrasts.grey2424,
+  textSuccess: contrasts === null || contrasts === void 0 ? void 0 : contrasts.green5782,
+  textWarning: contrasts === null || contrasts === void 0 ? void 0 : contrasts.orange5782,
+  textError: contrasts === null || contrasts === void 0 ? void 0 : contrasts.red5782,
+  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,
+  surfaceAttention: contrasts === null || contrasts === void 0 ? void 0 : contrasts.blue4570,
+  surfaceSuccess: contrasts === null || contrasts === void 0 ? void 0 : contrasts.green4570,
+  surfaceWarning: contrasts === null || contrasts === void 0 ? void 0 : contrasts.orange4570,
+  surfaceError: contrasts === null || contrasts === void 0 ? void 0 : contrasts.red4570,
+  surfaceDivider: contrasts === null || contrasts === void 0 ? void 0 : contrasts.grey1214,
+  textSurfaceColored: contrasts === null || contrasts === void 0 ? void 0 : contrasts.white1010,
+  iconDefault: contrasts === null || contrasts === void 0 ? void 0 : contrasts.grey125125,
+  iconSuccess: contrasts === null || contrasts === void 0 ? void 0 : contrasts.green4570,
+  iconWarning: contrasts === null || contrasts === void 0 ? void 0 : contrasts.orange4570,
+  iconError: contrasts === null || contrasts === void 0 ? void 0 : contrasts.red4570,
+  iconSurfaceColored: contrasts === null || contrasts === void 0 ? void 0 : contrasts.white1010,
+  lineConnector: 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-themes",
-  "version": "10.0.1-snapshot-14",
+  "version": "10.2.0",
   "description": "A library of instructure themes",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -22,16 +22,14 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.0.1-snapshot-14",
-    "@instructure/ui-theme-tokens": "10.0.1-snapshot-14",
+    "@instructure/ui-babel-preset": "10.2.0",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^15.0.7",
     "vitest": "^2.0.2"
   },
   "dependencies": {
-    "@instructure/canvas-high-contrast-theme": "10.0.1-snapshot-14",
-    "@instructure/canvas-theme": "10.0.1-snapshot-14",
-    "@instructure/shared-types": "10.0.1-snapshot-14"
+    "@instructure/shared-types": "10.2.0",
+    "@instructure/theme-registry": "10.2.0"
   },
   "publishConfig": {
     "access": "public"

package/src/index.ts

@@ -22,15 +22,24 @@
  * SOFTWARE.
  */
 
-import type { CanvasHighContrastTheme } from '@instructure/canvas-high-contrast-theme'
+import type { CanvasHighContrastTheme } from './themes/canvasHighContrast'
+import type { CanvasTheme, CanvasBrandVariables } from './themes/canvas'
 import type {
-  CanvasTheme,
-  CanvasBrandVariables
-} from '@instructure/canvas-theme'
-import type { BaseTheme } from '@instructure/shared-types'
+  BaseTheme,
+  Primitives,
+  AdditionalPrimitives,
+  DataVisualization,
+  UI
+} from '@instructure/shared-types'
 
-import { theme as canvasHighContrast } from '@instructure/canvas-high-contrast-theme'
-import { theme as canvas } from '@instructure/canvas-theme'
+import canvasHighContrast from './themes/canvasHighContrast'
+import canvas from './themes/canvas'
+
+import {
+  primitives,
+  additionalPrimitives
+} from './sharedThemeTokens/colors/primitives'
+import dataVisualization from './sharedThemeTokens/colors/dataVisualization'
 
 type ThemeMap = {
   canvas: CanvasTheme
@@ -50,7 +59,13 @@ type ThemeSpecificStyle<ComponentTheme> = {
   [themeKey in ThemeKeys]?: Partial<ComponentTheme>
 }
 
-export { canvas, canvasHighContrast }
+export {
+  canvas,
+  canvasHighContrast,
+  primitives,
+  additionalPrimitives,
+  dataVisualization
+}
 export default canvas
 export type {
   ThemeMap,
@@ -60,5 +75,9 @@ export type {
   ThemeSpecificStyle,
   CanvasTheme,
   CanvasBrandVariables,
-  CanvasHighContrastTheme
+  CanvasHighContrastTheme,
+  Primitives,
+  AdditionalPrimitives,
+  DataVisualization,
+  UI
 }

package/src/sharedThemeTokens/borders.ts

@@ -0,0 +1,42 @@
+/*
+ * 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.
+ */
+
+import { Border } from '@instructure/shared-types'
+
+// use for consistency between buttons, text inputs, etc.
+
+const borders: Border = Object.freeze({
+  radiusSmall: '0.125rem', // 2px
+  radiusMedium: '0.25rem', // 4px
+  radiusLarge: '0.5rem', // 8px
+
+  widthSmall: '0.0625rem', // 1px
+  widthMedium: '0.125rem', // 2px
+  widthLarge: '0.25rem', // 4px
+
+  style: 'solid'
+} as const)
+
+export default borders
+export { borders }

package/src/sharedThemeTokens/breakpoints.ts

@@ -0,0 +1,54 @@
+/*
+ * 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.
+ */
+
+import { Breakpoints } from '@instructure/shared-types'
+
+const onePixel = 0.0625
+
+// base = 16px
+const values = {
+  xxSmall: 8, // 128px
+  xSmall: 16, // 256px
+  small: 30, // 480px
+  medium: 48, // 768px
+  tablet: 48, // 768px
+  large: 62, // 992px
+  desktop: 64, // 1024px
+  xLarge: 75 // 1200px
+}
+
+const breakpoints: Breakpoints = Object.freeze({
+  xxSmall: `${values.xxSmall}em`,
+  xSmall: `${values.xSmall}em`,
+  small: `${values.small}em`,
+  medium: `${values.medium}em`,
+  tablet: `${values.tablet}em`,
+  large: `${values.large}em`,
+  desktop: `${values.desktop}em`,
+  xLarge: `${values.xLarge}em`,
+  maxWidth: `${values.large - onePixel}em`
+})
+
+export default breakpoints
+export { breakpoints }

package/src/sharedThemeTokens/colors/dataVisualization.ts

@@ -0,0 +1,151 @@
+/*
+ * 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.
+ */
+
+import { additionalPrimitives } from './primitives'
+import type { DataVisualization } from '@instructure/shared-types'
+
+const dataVisualization: DataVisualization = {
+  rose12Primary: additionalPrimitives.rose12,
+  rose30Primary: additionalPrimitives.rose30,
+  rose45Primary: additionalPrimitives.rose45,
+  rose70Primary: additionalPrimitives.rose70,
+  rose110Primary: additionalPrimitives.rose110,
+  rose35Secondary: additionalPrimitives.rose35,
+  rose40Secondary: additionalPrimitives.rose40,
+  rose50Secondary: additionalPrimitives.rose50,
+  rose57Secondary: additionalPrimitives.rose57,
+  rose90Secondary: additionalPrimitives.rose90,
+
+  copper12Primary: additionalPrimitives.copper12,
+  copper30Primary: additionalPrimitives.copper30,
+  copper45Primary: additionalPrimitives.copper45,
+  copper70Primary: additionalPrimitives.copper70,
+  copper110Primary: additionalPrimitives.copper110,
+  copper35Secondary: additionalPrimitives.copper35,
+  copper40Secondary: additionalPrimitives.copper40,
+  copper50Secondary: additionalPrimitives.copper50,
+  copper57Secondary: additionalPrimitives.copper57,
+  copper90Secondary: additionalPrimitives.copper90,
+
+  honey12Primary: additionalPrimitives.honey12,
+  honey30Primary: additionalPrimitives.honey30,
+  honey45Primary: additionalPrimitives.honey45,
+  honey70Primary: additionalPrimitives.honey70,
+  honey110Primary: additionalPrimitives.honey110,
+  honey35Secondary: additionalPrimitives.honey35,
+  honey40Secondary: additionalPrimitives.honey40,
+  honey50Secondary: additionalPrimitives.honey50,
+  honey57Secondary: additionalPrimitives.honey57,
+  honey90Secondary: additionalPrimitives.honey90,
+
+  forest12Primary: additionalPrimitives.forest12,
+  forest30Primary: additionalPrimitives.forest30,
+  forest45Primary: additionalPrimitives.forest45,
+  forest70Primary: additionalPrimitives.forest70,
+  forest110Primary: additionalPrimitives.forest110,
+  forest35Secondary: additionalPrimitives.forest35,
+  forest40Secondary: additionalPrimitives.forest40,
+  forest50Secondary: additionalPrimitives.forest50,
+  forest57Secondary: additionalPrimitives.forest57,
+  forest90Secondary: additionalPrimitives.forest90,
+
+  aurora12Primary: additionalPrimitives.aurora12,
+  aurora30Primary: additionalPrimitives.aurora30,
+  aurora45Primary: additionalPrimitives.aurora45,
+  aurora70Primary: additionalPrimitives.aurora70,
+  aurora110Primary: additionalPrimitives.aurora110,
+  aurora35Secondary: additionalPrimitives.aurora35,
+  aurora40Secondary: additionalPrimitives.aurora40,
+  aurora50Secondary: additionalPrimitives.aurora50,
+  aurora57Secondary: additionalPrimitives.aurora57,
+  aurora90Secondary: additionalPrimitives.aurora90,
+
+  sea12Primary: additionalPrimitives.sea12,
+  sea30Primary: additionalPrimitives.sea30,
+  sea45Primary: additionalPrimitives.sea45,
+  sea70Primary: additionalPrimitives.sea70,
+  sea110Primary: additionalPrimitives.sea110,
+  sea35Secondary: additionalPrimitives.sea35,
+  sea40Secondary: additionalPrimitives.sea40,
+  sea50Secondary: additionalPrimitives.sea50,
+  sea57Secondary: additionalPrimitives.sea57,
+  sea90Secondary: additionalPrimitives.sea90,
+
+  sky12Primary: additionalPrimitives.sky12,
+  sky30Primary: additionalPrimitives.sky30,
+  sky45Primary: additionalPrimitives.sky45,
+  sky70Primary: additionalPrimitives.sky70,
+  sky110Primary: additionalPrimitives.sky110,
+  sky35Secondary: additionalPrimitives.sky35,
+  sky40Secondary: additionalPrimitives.sky40,
+  sky50Secondary: additionalPrimitives.sky50,
+  sky57Secondary: additionalPrimitives.sky57,
+  sky90Secondary: additionalPrimitives.sky90,
+
+  ocean12Primary: additionalPrimitives.ocean12,
+  ocean30Primary: additionalPrimitives.ocean30,
+  ocean45Primary: additionalPrimitives.ocean45,
+  ocean70Primary: additionalPrimitives.ocean70,
+  ocean110Primary: additionalPrimitives.ocean110,
+  ocean35Secondary: additionalPrimitives.ocean35,
+  ocean40Secondary: additionalPrimitives.ocean40,
+  ocean50Secondary: additionalPrimitives.ocean50,
+  ocean57Secondary: additionalPrimitives.ocean57,
+  ocean90Secondary: additionalPrimitives.ocean90,
+
+  violet12Primary: additionalPrimitives.violet12,
+  violet30Primary: additionalPrimitives.violet30,
+  violet45Primary: additionalPrimitives.violet45,
+  violet70Primary: additionalPrimitives.violet70,
+  violet110Primary: additionalPrimitives.violet110,
+  violet35Secondary: additionalPrimitives.violet35,
+  violet40Secondary: additionalPrimitives.violet40,
+  violet50Secondary: additionalPrimitives.violet50,
+  violet57Secondary: additionalPrimitives.violet57,
+  violet90Secondary: additionalPrimitives.violet90,
+
+  plum12Primary: additionalPrimitives.plum12,
+  plum30Primary: additionalPrimitives.plum30,
+  plum45Primary: additionalPrimitives.plum45,
+  plum70Primary: additionalPrimitives.plum70,
+  plum110Primary: additionalPrimitives.plum110,
+  plum35Secondary: additionalPrimitives.plum35,
+  plum40Secondary: additionalPrimitives.plum40,
+  plum50Secondary: additionalPrimitives.plum50,
+  plum57Secondary: additionalPrimitives.plum57,
+  plum90Secondary: additionalPrimitives.plum90,
+
+  stone12Primary: additionalPrimitives.stone12,
+  stone30Primary: additionalPrimitives.stone30,
+  stone45Primary: additionalPrimitives.stone45,
+  stone70Primary: additionalPrimitives.stone70,
+  stone110Primary: additionalPrimitives.stone110,
+  stone35Secondary: additionalPrimitives.stone35,
+  stone40Secondary: additionalPrimitives.stone40,
+  stone50Secondary: additionalPrimitives.stone50,
+  stone57Secondary: additionalPrimitives.stone57,
+  stone90Secondary: additionalPrimitives.stone90
+}
+
+export default dataVisualization