@instructure/ui-themes 11.6.0 → 11.6.1-snapshot-129

package/lib/themes/newThemes/light/sharedTokens.js

@@ -0,0 +1,279 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _semantics = _interopRequireDefault(require("./semantics"));
+/*
+ * 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 sharedTokens = {
+  borderRadius: {
+    xs: _semantics.default.borderRadius.xs,
+    sm: _semantics.default.borderRadius.sm,
+    md: _semantics.default.borderRadius.md,
+    lg: _semantics.default.borderRadius.lg,
+    xl: _semantics.default.borderRadius.xl,
+    xxl: _semantics.default.borderRadius.xxl,
+    full: "999rem",
+    card: {
+      sm: "0.75rem",
+      md: _semantics.default.borderRadius.container.md,
+      lg: _semantics.default.borderRadius.container.lg,
+      nestedContainer: {
+        sm: _semantics.default.borderRadius.sm,
+        md: _semantics.default.borderRadius.sm,
+        lg: _semantics.default.borderRadius.md
+      }
+    }
+  },
+  legacy: {
+    spacing: {
+      xxxSmall: "0.125rem",
+      xxSmall: "0.375rem",
+      xSmall: "0.5rem",
+      small: "0.75rem",
+      mediumSmall: "1rem",
+      medium: "1.5rem",
+      large: "2.25rem",
+      xLarge: "3rem",
+      xxLarge: "3.75rem",
+      space0: "0rem",
+      space2: "0.125rem",
+      space4: "0.25rem",
+      space8: "0.5rem",
+      space12: "0.75rem",
+      space16: "1rem",
+      space24: "1.5rem",
+      space36: "2.25rem",
+      space48: "3rem",
+      space60: "3.75rem",
+      sections: "2.25rem",
+      sectionElements: "1.5em",
+      trayElements: "1.5em",
+      modalElements: "1.5em",
+      moduleElements: "1em",
+      paddingCardLarge: "1.5rem",
+      paddingCardMedium: "1rem",
+      paddingCardSmall: "0.75rem",
+      selects: "1rem",
+      textareas: "1rem",
+      inputFields: "1rem",
+      checkboxes: "1rem",
+      radios: "1rem",
+      toggles: "1rem",
+      buttons: "0.75rem",
+      tags: "0.75rem",
+      statusIndicators: "0.75rem",
+      dataPoints: "0.75rem"
+    },
+    radiusSmall: "0.125rem",
+    radiusMedium: "0.25rem",
+    radiusLarge: "0.5rem"
+  },
+  boxShadow: {
+    elevation1: {
+      0: {
+        x: _semantics.default.dropShadow.x.elevation1.dropshadow1,
+        y: _semantics.default.dropShadow.y.elevation1.dropshadow1,
+        blur: _semantics.default.dropShadow.blur.elevation1.dropshadow1,
+        spread: _semantics.default.dropShadow.spread.elevation1.dropshadow1,
+        color: _semantics.default.color.dropShadow.shadowColor1,
+        type: "dropShadow"
+      },
+      1: {
+        x: _semantics.default.dropShadow.x.elevation1.dropshadow2,
+        y: _semantics.default.dropShadow.y.elevation1.dropshadow2,
+        blur: _semantics.default.dropShadow.blur.elevation1.dropshadow2,
+        spread: _semantics.default.dropShadow.spread.elevation1.dropshadow2,
+        color: _semantics.default.color.dropShadow.shadowColor2,
+        type: "dropShadow"
+      }
+    },
+    elevation2: {
+      0: {
+        x: _semantics.default.dropShadow.x.elevation2.dropshadow1,
+        y: _semantics.default.dropShadow.y.elevation2.dropshadow1,
+        blur: _semantics.default.dropShadow.blur.elevation2.dropshadow1,
+        spread: _semantics.default.dropShadow.spread.elevation2.dropshadow1,
+        color: _semantics.default.color.dropShadow.shadowColor2,
+        type: "dropShadow"
+      },
+      1: {
+        x: _semantics.default.dropShadow.x.elevation2.dropshadow2,
+        y: _semantics.default.dropShadow.y.elevation2.dropshadow2,
+        blur: _semantics.default.dropShadow.blur.elevation2.dropshadow2,
+        spread: _semantics.default.dropShadow.spread.elevation2.dropshadow2,
+        color: _semantics.default.color.dropShadow.shadowColor1,
+        type: "dropShadow"
+      }
+    },
+    elevation3: {
+      0: {
+        x: _semantics.default.dropShadow.x.elevation3.dropshadow1,
+        y: _semantics.default.dropShadow.y.elevation3.dropshadow1,
+        blur: _semantics.default.dropShadow.blur.elevation3.dropshadow1,
+        spread: _semantics.default.dropShadow.spread.elevation3.dropshadow1,
+        color: _semantics.default.color.dropShadow.shadowColor2,
+        type: "dropShadow"
+      },
+      1: {
+        x: _semantics.default.dropShadow.x.elevation3.dropshadow2,
+        y: _semantics.default.dropShadow.y.elevation3.dropshadow2,
+        blur: _semantics.default.dropShadow.blur.elevation3.dropshadow2,
+        spread: _semantics.default.dropShadow.spread.elevation3.dropshadow2,
+        color: _semantics.default.color.dropShadow.shadowColor1,
+        type: "dropShadow"
+      }
+    },
+    elevation4: {
+      0: {
+        x: _semantics.default.dropShadow.x.elevation4.dropshadow1,
+        y: _semantics.default.dropShadow.y.elevation4.dropshadow1,
+        blur: _semantics.default.dropShadow.blur.elevation4.dropshadow1,
+        spread: _semantics.default.dropShadow.spread.elevation4.dropshadow1,
+        color: _semantics.default.color.dropShadow.shadowColor2,
+        type: "dropShadow"
+      },
+      1: {
+        x: _semantics.default.dropShadow.x.elevation4.dropshadow2,
+        y: _semantics.default.dropShadow.y.elevation4.dropshadow2,
+        blur: _semantics.default.dropShadow.blur.elevation4.dropshadow2,
+        spread: _semantics.default.dropShadow.spread.elevation4.dropshadow2,
+        color: _semantics.default.color.dropShadow.shadowColor1,
+        type: "dropShadow"
+      }
+    }
+  },
+  spacing: {
+    general: {
+      space2xs: _semantics.default.spacing.space2xs,
+      spaceXs: _semantics.default.spacing.spaceXs,
+      spaceSm: _semantics.default.spacing.spaceSm,
+      spaceMd: _semantics.default.spacing.spaceMd,
+      spaceLg: _semantics.default.spacing.spaceLg,
+      spaceXl: _semantics.default.spacing.spaceXl,
+      space2xl: _semantics.default.spacing.space2xl,
+      spaceNone: "0rem"
+    },
+    gap: {
+      sections: _semantics.default.spacing.gap.sections,
+      buttons: _semantics.default.spacing.spaceMd,
+      cards: {
+        sm: _semantics.default.spacing.gap.cards.sm,
+        md: _semantics.default.spacing.gap.cards.md,
+        lg: _semantics.default.spacing.gap.cards.lg,
+        nestedContainers: {
+          sm: _semantics.default.spacing.spaceSm,
+          md: _semantics.default.spacing.spaceMd,
+          lg: _semantics.default.spacing.spaceLg
+        }
+      },
+      inputs: {
+        horizontal: _semantics.default.spacing.gap.inputs.horizontal,
+        vertical: _semantics.default.spacing.gap.inputs.vertical
+      }
+    },
+    padding: {
+      card: {
+        sm: _semantics.default.spacing.padding.container.xxs,
+        md: _semantics.default.spacing.padding.container.xs,
+        lg: _semantics.default.spacing.padding.container.sm
+      }
+    }
+  },
+  focusOutline: {
+    offset: _semantics.default.spacing.space2xs,
+    inset: "0rem",
+    width: _semantics.default.borderWidth.md,
+    infoColor: _semantics.default.color.stroke.interactive.focusRing.base,
+    onColor: _semantics.default.color.stroke.interactive.focusRing.onColor,
+    successColor: _semantics.default.color.stroke.interactive.action.success.base,
+    dangerColor: _semantics.default.color.stroke.interactive.action.destructive.base,
+    style: "solid"
+  },
+  background: {
+    containerColor: _semantics.default.color.background.container,
+    baseColor: _semantics.default.color.background.base,
+    pageColor: _semantics.default.color.background.page,
+    mutedColor: _semantics.default.color.background.muted,
+    brandColor: _semantics.default.color.background.brand,
+    onColor: _semantics.default.color.background.onColor,
+    inverseColor: _semantics.default.color.background.inverse,
+    successColor: _semantics.default.color.background.success,
+    errorColor: _semantics.default.color.background.error,
+    infoColor: _semantics.default.color.background.info,
+    warningColor: _semantics.default.color.background.warning,
+    aiTopGradientColor: _semantics.default.color.background.aiTopGradient,
+    aiBottomGradientColor: _semantics.default.color.background.aiBottomGradient,
+    aiTextColor: _semantics.default.color.background.aiText,
+    accentAsh: _semantics.default.color.background.accent.ash,
+    accentAurora: _semantics.default.color.background.accent.aurora,
+    accentBlue: _semantics.default.color.background.accent.blue,
+    accentGreen: _semantics.default.color.background.accent.green,
+    accentGrey: _semantics.default.color.background.accent.grey,
+    accentHoney: _semantics.default.color.background.accent.honey,
+    accentOrange: _semantics.default.color.background.accent.orange,
+    accentPlum: _semantics.default.color.background.accent.plum,
+    accentRed: _semantics.default.color.background.accent.red,
+    accentSea: _semantics.default.color.background.accent.sea,
+    accentSky: _semantics.default.color.background.accent.sky,
+    accentStone: _semantics.default.color.background.accent.stone,
+    accentViolet: _semantics.default.color.background.accent.violet
+  },
+  stroke: {
+    baseColor: _semantics.default.color.stroke.base,
+    mutedColor: _semantics.default.color.stroke.muted,
+    strongColor: _semantics.default.color.stroke.strong,
+    brandColor: _semantics.default.color.stroke.brand,
+    successColor: _semantics.default.color.stroke.success,
+    errorColor: _semantics.default.color.stroke.error,
+    warningColor: _semantics.default.color.stroke.warning,
+    infoColor: _semantics.default.color.stroke.info,
+    aiTopGradientColor: _semantics.default.color.stroke.aiTopGradient,
+    aiBottomGradientColor: _semantics.default.color.stroke.aiBottomGradient,
+    accentAsh: _semantics.default.color.stroke.accent.ash,
+    accentAurora: _semantics.default.color.stroke.accent.aurora,
+    accentBlue: _semantics.default.color.stroke.accent.blue,
+    accentGreen: _semantics.default.color.stroke.accent.green,
+    accentGrey: _semantics.default.color.stroke.accent.grey,
+    accentHoney: _semantics.default.color.stroke.accent.honey,
+    accentOrange: _semantics.default.color.stroke.accent.orange,
+    accentPlum: _semantics.default.color.stroke.accent.plum,
+    accentRed: _semantics.default.color.stroke.accent.red,
+    accentSea: _semantics.default.color.stroke.accent.sea,
+    accentSky: _semantics.default.color.stroke.accent.sky,
+    accentStone: _semantics.default.color.background.accent.stone,
+    accentViolet: _semantics.default.color.background.accent.violet,
+    visualSeparator: _semantics.default.color.background.container
+  },
+  strokeWidth: {
+    sm: _semantics.default.borderWidth.sm,
+    md: _semantics.default.borderWidth.md,
+    lg: _semantics.default.borderWidth.lg
+  }
+};
+var _default = exports.default = sharedTokens;

package/lib/utils/boxShadowObjectToString.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.boxShadowObjectsToCSSString = boxShadowObjectsToCSSString;
+exports.boxShadowToCSSString = boxShadowToCSSString;
+/*
+ * 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.
+ */
+
+/**
+ * Converts a BoxShadowObject from Token Studio to a CSS box-shadow string
+ */
+function boxShadowToCSSString(boxShadowObject) {
+  // weird string concatenation is to make it look nice in the debugger
+  if (boxShadowObject.type === 'innerShadow') {
+    return `inset ${boxShadowObject.x} ` + `${boxShadowObject.y} ` + `${boxShadowObject.blur ? boxShadowObject.blur : ''} ` + `${boxShadowObject.spread ? boxShadowObject.spread : ''} ` + `${boxShadowObject.color}`;
+  }
+  return `${boxShadowObject.x} ` + `${boxShadowObject.y} ` + `${boxShadowObject.blur ? boxShadowObject.blur : ''} ` + `${boxShadowObject.spread ? boxShadowObject.spread : ''} ` + `${boxShadowObject.color}`;
+}
+function getShadowsInOrder(shadowsObj) {
+  return Object.keys(shadowsObj).sort((a, b) => {
+    const numA = parseInt(a);
+    const numB = parseInt(b);
+    return numA - numB;
+  }).map(key => shadowsObj[key]);
+}
+
+/**
+ * Converts a box shadow object that looks like this:
+ * ```
+ * {
+ *   '1': {color: 'rgba(12, 0, 0, 0.2)', x:...},
+ *   '2': {color: 'rgba(0, 0, 0, 0.1)', x:...},
+ *   '0': {color: 'rgba(0, 0, 0, 0.1)', x:...}
+ * }
+ * ```
+ * to a CSS box-shadow string e.g.
+ * ```
+ * 0px 0.375rem 0.4375rem 0px rgba(12,0,0,0.2),
+ * 0px 0.625rem 1.75rem 0px rgba(0,0,0,0.1),
+ * 0px 0.625rem 1.75rem 0px rgba(0,0,0,0.1)
+ * ```
+ */
+function boxShadowObjectsToCSSString(shadowObject) {
+  const shadows = getShadowsInOrder(shadowObject);
+  let result = '';
+  for (const shadow of shadows) {
+    result += boxShadowToCSSString(shadow) + ',\n';
+  }
+  return result.slice(0, -2);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-themes",
-  "version": "11.6.0",
+  "version": "11.6.1-snapshot-129",
   "description": "A library of instructure themes",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -13,14 +13,15 @@
   "homepage": "https://instructure.github.io/instructure-ui/",
   "bugs": "https://github.com/instructure/instructure-ui/issues",
   "license": "MIT",
-  "dependencies": {
-    "@instructure/shared-types": "11.6.0"
-  },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "15.0.7",
     "vitest": "^3.2.2",
-    "@instructure/ui-babel-preset": "11.6.0"
+    "@instructure/ui-babel-preset": "11.6.1-snapshot-129"
+  },
+  "dependencies": {
+    "@tokens-studio/types": "^0.5.2",
+    "@instructure/shared-types": "11.6.1-snapshot-129"
   },
   "publishConfig": {
     "access": "public"
@@ -28,6 +29,7 @@
   "sideEffects": false,
   "exports": {
     ".": {
+      "src": "./src/index.ts",
       "types": "./types/index.d.ts",
       "import": "./es/index.js",
       "require": "./lib/index.js",

package/src/index.ts

@@ -21,7 +21,13 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
+import type { ComponentTypes as NewComponentTypes } from './themes/newThemes/componentTypes'
+import type {
+  SharedTokens,
+  BaseTheme as NewBaseTheme,
+  TokenBoxshadowValueInst,
+  TokenTypographyValueInst
+} from './themes/newThemes/commonTypes'
 import type { CanvasHighContrastTheme } from './themes/canvasHighContrast'
 import type { CanvasTheme, CanvasBrandVariables } from './themes/canvas'
 import type {
@@ -32,27 +38,41 @@ import type {
   UI
 } from '@instructure/shared-types'
 
-import { canvasHighContrast } from './themes/canvasHighContrast'
-import { canvas } from './themes/canvas'
+import canvasHighContrast from './themes/canvasHighContrast'
+import canvas from './themes/canvas'
+
+import dark from './themes/dark'
+
+import light from './themes/light'
 
 import {
   primitives,
   additionalPrimitives
 } from './sharedThemeTokens/colors/primitives'
 import dataVisualization from './sharedThemeTokens/colors/dataVisualization'
+import { boxShadowObjectsToCSSString } from './utils/boxShadowObjectToString'
+
+import type {
+  LegacyCanvas as NewCanvas,
+  LegacyCanvasHighContrast as NewCanvasHighContrast,
+  Dark,
+  Light
+} from './themes/newThemes'
 
 type ThemeMap = {
   canvas: CanvasTheme
   'canvas-high-contrast': CanvasHighContrastTheme
-
   // needed for custom theme support
   [k: string]: BaseTheme
 }
 
 type ThemeKeys = keyof ThemeMap
 
-type Theme = BaseTheme & {
-  key: ThemeKeys
+type Theme<
+  NewThemeType extends NewBaseTheme = NewBaseTheme,
+  K extends ThemeKeys = ThemeKeys
+> = BaseTheme & { newTheme: NewThemeType } & {
+  key: K
 } & Partial<CanvasBrandVariables>
 
 type ThemeSpecificStyle<ComponentTheme> = {
@@ -60,11 +80,14 @@ type ThemeSpecificStyle<ComponentTheme> = {
 }
 
 export {
+  dark,
+  light,
   canvas,
   canvasHighContrast,
   primitives,
   additionalPrimitives,
-  dataVisualization
+  dataVisualization,
+  boxShadowObjectsToCSSString
 }
 export default canvas
 export type {
@@ -79,5 +102,14 @@ export type {
   Primitives,
   AdditionalPrimitives,
   DataVisualization,
-  UI
+  UI,
+  NewCanvas,
+  NewCanvasHighContrast,
+  Dark,
+  Light,
+  NewComponentTypes,
+  NewBaseTheme,
+  TokenBoxshadowValueInst,
+  TokenTypographyValueInst,
+  SharedTokens
 }

package/src/themes/canvas/index.ts

@@ -23,8 +23,13 @@
  */
 
 import sharedThemeTokens from '../../sharedThemeTokens'
-import { BaseTheme, Colors } from '@instructure/shared-types'
+import { Colors } from '@instructure/shared-types'
 import { colors } from './colors'
+import {
+  legacyCanvas as canvas,
+  type LegacyCanvas as Canvas
+} from '../newThemes'
+import { Theme } from '../../index'
 
 const key = 'canvas'
 
@@ -54,14 +59,14 @@ const brandVariables = {
 
 export type CanvasBrandVariables = typeof brandVariables
 
-export type CanvasTheme = BaseTheme & {
-  key: 'canvas'
-} & typeof sharedThemeTokens & { colors: Colors } & CanvasBrandVariables
+export type CanvasTheme = Theme<Canvas, 'canvas'> &
+  typeof sharedThemeTokens & { colors: Colors } & CanvasBrandVariables
 
 /**
- * Canvas theme
+ * Canvas theme object
  */
-const canvas: CanvasTheme = {
+const theme: CanvasTheme = {
+  newTheme: canvas,
   key,
   description: 'This theme meets WCAG 2.1 AA rules for color contrast.',
   ...sharedThemeTokens,
@@ -69,5 +74,4 @@ const canvas: CanvasTheme = {
   ...brandVariables
 }
 
-export { canvas }
-export default canvas
+export default theme

package/src/themes/canvasHighContrast/index.ts

@@ -23,24 +23,33 @@
  */
 
 import sharedThemeTokens from '../../sharedThemeTokens'
-import { BaseTheme, Colors } from '@instructure/shared-types'
+import { Colors } from '@instructure/shared-types'
 import { colors } from './colors'
+import {
+  legacyCanvasHighContrast as newCanvasHighContrast,
+  type LegacyCanvasHighContrast as NewCanvasHighContrast
+} from '../newThemes'
+import { Theme } from '../../index'
 
 const key = 'canvas-high-contrast'
 
-export type CanvasHighContrastTheme = BaseTheme & {
-  key: 'canvas-high-contrast'
-} & typeof sharedThemeTokens & { colors: Colors }
-
+export type CanvasHighContrastTheme = Theme<
+  NewCanvasHighContrast,
+  'canvas-high-contrast'
+> &
+  typeof sharedThemeTokens & { colors: Colors }
 /**
- * Canvas high contrast theme
+ * Canvas high contrast theme without the `use` function and `variables` prop.
+ * Not affected by global theme overrides (`.use()` function).
+ *
+ * Will be default in the next major version of InstUI
  */
-const canvasHighContrast: CanvasHighContrastTheme = {
+const theme: CanvasHighContrastTheme = {
+  newTheme: newCanvasHighContrast,
   key,
   description: 'This theme meets WCAG 2.1 AAA rules for color contrast.',
   ...sharedThemeTokens,
   colors
 }
 
-export { canvasHighContrast }
-export default canvasHighContrast
+export default theme

package/src/themes/dark/colors.ts

@@ -0,0 +1,83 @@
+/*
+ * 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'
+
+import type { Contrasts, UI } from '@instructure/shared-types'
+
+const contrasts: Contrasts = {
+  white1010: primitives.white,
+  white1010op75: primitives.white10op75,
+
+  grey1111: primitives.grey11,
+  grey1214: primitives.grey12,
+  grey1424: primitives.grey14,
+  grey2424: primitives.grey24,
+  grey3045: primitives.grey30,
+  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,
+
+  violet1212: primitives.violet12,
+  violet4570: primitives.violet45,
+  violet5790: primitives.violet57,
+  sea4570: primitives.sea45,
+  sea5790: primitives.sea57
+}
+
+const ui: UI = getUIColors(contrasts)
+
+const colors = {
+  primitives,
+  additionalPrimitives,
+  contrasts,
+  ui,
+  dataVisualization
+}
+export default { primitives, contrasts, ui }
+export { colors }