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

package/es/sharedThemeTokens/stacking.js

@@ -0,0 +1,32 @@
+/*
+ * 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 stacking = Object.freeze({
+  topmost: 9999,
+  above: 1,
+  below: -1,
+  deepest: -9999
+});
+export default stacking;
+export { stacking };

package/es/sharedThemeTokens/transitions.js

@@ -0,0 +1,30 @@
+/*
+ * 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 transitions = Object.freeze({
+  duration: '300ms',
+  timing: 'ease-in-out'
+});
+export default transitions;
+export { transitions };

package/es/sharedThemeTokens/typography.js

@@ -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.
+ */
+
+const typography = Object.freeze({
+  fontFamily: 'LatoWeb, Lato, "Helvetica Neue", Helvetica, Arial, sans-serif',
+  fontFamilyMonospace: 'Menlo, Consolas, Monaco, "Andale Mono", monospace',
+  fontSizeXSmall: '0.75rem',
+  // 12px
+  fontSizeSmall: '0.875rem',
+  // 14px
+  fontSizeMedium: '1rem',
+  // 16px
+  fontSizeLarge: '1.375rem',
+  // 22px
+  fontSizeXLarge: '1.75rem',
+  // 28px
+  fontSizeXXLarge: '2.375rem',
+  // 38px
+
+  fontWeightLight: 300,
+  fontWeightNormal: 400,
+  fontWeightBold: 700,
+  lineHeight: 1.5,
+  // 24px
+  lineHeightFit: 1.125,
+  lineHeightCondensed: 1.25,
+  lineHeightDouble: 2,
+  letterSpacingNormal: 0,
+  letterSpacingCondensed: '-0.0625rem',
+  letterSpacingExpanded: '0.0625rem'
+});
+export default typography;
+export { typography };

package/es/themes/canvas/colors.js

@@ -0,0 +1,67 @@
+/*
+ * 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 { primitives, additionalPrimitives } from '../../sharedThemeTokens/colors/primitives';
+import dataVisualization from '../../sharedThemeTokens/colors/dataVisualization';
+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,
+  additionalPrimitives,
+  contrasts,
+  ui,
+  dataVisualization
+};
+export default {
+  primitives,
+  contrasts,
+  ui
+};
+export { colors };

package/es/themes/canvas/index.js

@@ -0,0 +1,54 @@
+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.
+ */
+
+import sharedThemeTokens from '../../sharedThemeTokens';
+import { ThemeRegistry } from '@instructure/theme-registry';
+import colors from './colors';
+const key = 'canvas';
+const brandVariables = {
+  /* Defaults for Canvas account branding variables: */
+  'ic-brand-primary': colors === null || colors === void 0 ? void 0 : (_colors$contrasts = colors.contrasts) === null || _colors$contrasts === void 0 ? void 0 : _colors$contrasts.blue4570,
+  'ic-brand-font-color-dark': colors === null || colors === void 0 ? void 0 : (_colors$contrasts2 = colors.contrasts) === null || _colors$contrasts2 === void 0 ? void 0 : _colors$contrasts2.grey125125,
+  'ic-link-color': colors === null || colors === void 0 ? void 0 : (_colors$contrasts3 = colors.contrasts) === null || _colors$contrasts3 === void 0 ? void 0 : _colors$contrasts3.blue4570,
+  'ic-link-decoration': 'none',
+  'ic-brand-button--primary-bgd': colors === null || colors === void 0 ? void 0 : (_colors$contrasts4 = colors.contrasts) === null || _colors$contrasts4 === void 0 ? void 0 : _colors$contrasts4.blue4570,
+  'ic-brand-button--primary-text': colors === null || colors === void 0 ? void 0 : (_colors$contrasts5 = colors.contrasts) === null || _colors$contrasts5 === void 0 ? void 0 : _colors$contrasts5.white1010,
+  'ic-brand-button--secondary-bgd': colors === null || colors === void 0 ? void 0 : (_colors$contrasts6 = colors.contrasts) === null || _colors$contrasts6 === void 0 ? void 0 : _colors$contrasts6.grey125125,
+  'ic-brand-button--secondary-text': colors === null || colors === void 0 ? void 0 : (_colors$contrasts7 = colors.contrasts) === null || _colors$contrasts7 === void 0 ? void 0 : _colors$contrasts7.white1010,
+  'ic-brand-global-nav-bgd': colors === null || colors === void 0 ? void 0 : (_colors$contrasts8 = colors.contrasts) === null || _colors$contrasts8 === void 0 ? void 0 : _colors$contrasts8.grey100100,
+  'ic-global-nav-link-hover': colors === null || colors === void 0 ? void 0 : (_colors$contrasts9 = colors.contrasts) === null || _colors$contrasts9 === void 0 ? void 0 : _colors$contrasts9.grey125125,
+  'ic-brand-global-nav-ic-icon-svg-fill': colors === null || colors === void 0 ? void 0 : (_colors$contrasts10 = colors.contrasts) === null || _colors$contrasts10 === void 0 ? void 0 : _colors$contrasts10.white1010,
+  'ic-brand-global-nav-ic-icon-svg-fill--active': colors === null || colors === void 0 ? void 0 : (_colors$contrasts11 = colors.contrasts) === null || _colors$contrasts11 === void 0 ? void 0 : _colors$contrasts11.blue4570,
+  'ic-brand-global-nav-menu-item__text-color': colors === null || colors === void 0 ? void 0 : (_colors$contrasts12 = colors.contrasts) === null || _colors$contrasts12 === void 0 ? void 0 : _colors$contrasts12.white1010,
+  'ic-brand-global-nav-menu-item__text-color--active': colors === null || colors === void 0 ? void 0 : (_colors$contrasts13 = colors.contrasts) === null || _colors$contrasts13 === void 0 ? void 0 : _colors$contrasts13.blue4570
+};
+const __theme = {
+  key,
+  ...sharedThemeTokens,
+  colors,
+  ...brandVariables
+};
+const theme = ThemeRegistry.registerTheme(__theme);
+export default theme;

package/es/themes/canvasHighContrast/colors.js

@@ -0,0 +1,67 @@
+/*
+ * 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 { primitives, additionalPrimitives } from '../../sharedThemeTokens/colors/primitives';
+import dataVisualization from '../../sharedThemeTokens/colors/dataVisualization';
+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,
+  additionalPrimitives,
+  contrasts,
+  ui,
+  dataVisualization
+};
+export default {
+  primitives,
+  contrasts,
+  ui
+};
+export { colors };

package/es/themes/canvasHighContrast/index.js

@@ -0,0 +1,36 @@
+/*
+ * 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 sharedThemeTokens from '../../sharedThemeTokens';
+import { ThemeRegistry } from '@instructure/theme-registry';
+import colors from './colors';
+const key = 'canvas-high-contrast';
+const __theme = {
+  key,
+  description: 'This theme meets WCAG 2.0 AA rules for color contrast.',
+  ...sharedThemeTokens,
+  colors
+};
+const theme = ThemeRegistry.registerTheme(__theme);
+export default theme;

package/es/utils/getUIColors.js

@@ -0,0 +1,59 @@
+/*
+ * 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.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
+});
+export default getUIColors;

package/lib/index.js

@@ -1,23 +1,44 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "additionalPrimitives", {
+  enumerable: true,
+  get: function () {
+    return _primitives.additionalPrimitives;
+  }
+});
 Object.defineProperty(exports, "canvas", {
   enumerable: true,
   get: function () {
-    return _canvasTheme.theme;
+    return _canvas.default;
   }
 });
 Object.defineProperty(exports, "canvasHighContrast", {
   enumerable: true,
   get: function () {
-    return _canvasHighContrastTheme.theme;
+    return _canvasHighContrast.default;
+  }
+});
+Object.defineProperty(exports, "dataVisualization", {
+  enumerable: true,
+  get: function () {
+    return _dataVisualization.default;
   }
 });
 exports.default = void 0;
-var _canvasHighContrastTheme = require("@instructure/canvas-high-contrast-theme");
-var _canvasTheme = require("@instructure/canvas-theme");
+Object.defineProperty(exports, "primitives", {
+  enumerable: true,
+  get: function () {
+    return _primitives.primitives;
+  }
+});
+var _canvasHighContrast = _interopRequireDefault(require("./themes/canvasHighContrast"));
+var _canvas = _interopRequireDefault(require("./themes/canvas"));
+var _primitives = require("./sharedThemeTokens/colors/primitives");
+var _dataVisualization = _interopRequireDefault(require("./sharedThemeTokens/colors/dataVisualization"));
 /*
  * The MIT License (MIT)
  *
@@ -41,4 +62,4 @@ var _canvasTheme = require("@instructure/canvas-theme");
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-var _default = exports.default = _canvasTheme.theme;
+var _default = exports.default = _canvas.default;

package/lib/sharedThemeTokens/borders.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.borders = 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.
+ */
+
+// use for consistency between buttons, text inputs, etc.
+
+const borders = exports.borders = 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'
+});
+var _default = exports.default = borders;

package/lib/sharedThemeTokens/breakpoints.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.breakpoints = 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 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 = exports.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`
+});
+var _default = exports.default = breakpoints;