@instructure/ui-themes 11.7.10 → 11.7.11-snapshot-4

package/lib/themes/newThemeTokens/dark/components/mainNavItem.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 mainNavItem = semantic => ({
+  horizontalPadding: semantic.spacing.spaceSm,
+  verticalPadding: "0.25rem",
+  iconWrapperHeight: "2.25rem",
+  minimizedItemSize: "2.75rem",
+  borderRadius: semantic.borderRadius.md,
+  backgroundColor: semantic.color.institutional.brandGlobalNavBgd,
+  fontColor: semantic.color.institutional.brandGlobalNavMenuItemTextColor,
+  fontFamily: semantic.fontFamily.base,
+  fontSize: semantic.fontSize.textBase,
+  fontWeight: semantic.fontWeight.body.base,
+  innerFocusOutlineColor: semantic.color.transparentColor,
+  outerFocusOutlineColor: semantic.color.stroke.interactive.focusRing.base,
+  hoverBackgroundColor: semantic.color.background.interactive.action.tertiary.hover,
+  lineHeight: semantic.lineHeight.paragraph.base,
+  linkTextDecoration: "none",
+  currentBackgroundColor: semantic.color.institutional.brandPrimary,
+  selectedBackgroundColor: semantic.color.background.interactive.action.tertiary.active,
+  currentTextColor: semantic.color.institutional.brandGlobalNavMenuItemTextColorActive,
+  selectedInnerFocusOutlineColor: semantic.color.transparentColor,
+  selectedOuterFocusOutlineColor: semantic.color.stroke.interactive.focusRing.base
+});
+var _default = exports.default = mainNavItem;

package/lib/themes/newThemeTokens/dark/components/pill.js

@@ -32,7 +32,6 @@ const pill = semantic => ({
   paddingHorizontal: semantic.spacing.spaceSm,
   paddingHorizontalMedium: semantic.spacing.spaceMd,
   paddingHorizontalLarge: semantic.spacing.spaceMd,
-  paddingVertical: semantic.spacing.spaceXs,
   gapIconLabel: semantic.spacing.spaceXs,
   gapIconLabelMedium: semantic.spacing.spaceSm,
   gapIconLabelLarge: semantic.spacing.spaceSm,
@@ -45,7 +44,7 @@ const pill = semantic => ({
   textFontSizeMedium: semantic.fontSize.textSm,
   textFontSizeLarge: semantic.fontSize.textBase,
   textFontWeight: semantic.fontWeight.body.base,
-  statusLabelFontWeight: semantic.fontWeight.body.base,
+  statusLabelFontWeight: semantic.fontWeight.body.strong,
   maxWidth: "240px",
   baseBorderColor: {
     value: semantic.color.stroke.strong,
@@ -171,6 +170,8 @@ const pill = semantic => ({
   borderRadius: semantic.borderRadius.full,
   borderWidth: semantic.borderWidth.sm,
   lineHeight: semantic.lineHeight.standalone.textSm,
+  lineHeightMedium: semantic.lineHeight.standalone.textBase,
+  lineHeightLarge: semantic.lineHeight.standalone.textLg,
   fontFamily: semantic.fontFamily.base,
   borderStyle: "solid"
 });

package/lib/themes/newThemeTokens/dark/components/stepItem.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 stepItem = semantic => ({
+  stepStrokeFilledColor: semantic.color.stroke.info,
+  stepStrokeColor: semantic.color.stroke.base,
+  stepStrokeFilledWidth: semantic.borderWidth.lg,
+  stepStrokeWidth: semantic.borderWidth.md,
+  stepStrokeRadius: semantic.borderRadius.xs
+});
+var _default = exports.default = stepItem;

package/lib/themes/newThemeTokens/dark/components/stepper.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 stepper = semantic => ({
+  stepGap: semantic.spacing.spaceSm,
+  stepContentGap: semantic.spacing.spaceSm,
+  stepPaddingInlineEnd: semantic.spacing.spaceLg,
+  stepPaddingBlockEnd: semantic.spacing.spaceXl,
+  currentStepTextGap: semantic.spacing.spaceXs,
+  compactStrokeFilledColor: semantic.color.stroke.info,
+  compactStrokeColor: semantic.color.stroke.base,
+  compactStrokeErrorColor: semantic.color.stroke.error,
+  compactStrokeGap: semantic.spacing.spaceSm,
+  compactStrokeHeight: semantic.borderWidth.lg,
+  compactStrokeRadius: semantic.borderRadius.xs,
+  mobileToggleBackground: {
+    value: semantic.color.background.interactive.action.secondary.base,
+    modify: {
+      type: "alpha",
+      value: 0.2,
+      space: "hsl"
+    }
+  },
+  mobileToggleBorderRadius: semantic.borderRadius.interactive.base,
+  mobileTogglePaddingHorizontal: semantic.spacing.padding.interactive.horizontal.lg,
+  mobileTogglePaddingVertical: semantic.spacing.spaceSm,
+  mobileToggleContentGap: semantic.spacing.spaceSm
+});
+var _default = exports.default = stepper;

package/lib/themes/newThemeTokens/dark/components/subNav.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 subNav = semantic => ({
+  strokeColor: semantic.color.stroke.muted,
+  textColor: semantic.color.text.base,
+  padding: semantic.spacing.spaceMd,
+  gap: semantic.spacing.spaceSm,
+  navItemsGap: semantic.spacing.spaceXs,
+  minimizedVerticalPadding: "1.625rem",
+  minimizedWidth: "2rem",
+  minimizedHoverWidth: "2.25rem"
+});
+var _default = exports.default = subNav;

package/lib/themes/newThemeTokens/dark/components/subNavItem.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 subNavItem = semantic => ({
+  backgroundColor: semantic.color.transparentColor,
+  hoverBackgroundColor: semantic.color.background.interactive.action.tertiary.hover,
+  activeBackgroundColor: semantic.color.background.interactive.action.tertiary.active,
+  selectedBackgroundColor: semantic.color.background.brand,
+  textColor: semantic.color.institutional.brandGlobalNavMenuItemTextColor,
+  selectedTextColor: semantic.color.text.inverse,
+  logoutTextColor: semantic.color.text.error,
+  borderRadius: semantic.borderRadius.lg,
+  padding: semantic.spacing.spaceSm,
+  gap: semantic.spacing.spaceSm
+});
+var _default = exports.default = subNavItem;

package/lib/themes/newThemeTokens/dark/index.js

@@ -37,15 +37,21 @@ var _fileDrop = _interopRequireDefault(require("./components/fileDrop"));
 var _flex = _interopRequireDefault(require("./components/flex"));
 var _formFieldLayout = _interopRequireDefault(require("./components/formFieldLayout"));
 var _formFieldMessage = _interopRequireDefault(require("./components/formFieldMessage"));
+var _globalNav = _interopRequireDefault(require("./components/globalNav"));
 var _gridCol = _interopRequireDefault(require("./components/gridCol"));
 var _gridRow = _interopRequireDefault(require("./components/gridRow"));
 var _heading = _interopRequireDefault(require("./components/heading"));
 var _icon = _interopRequireDefault(require("./components/icon"));
+var _imageCard = _interopRequireDefault(require("./components/imageCard"));
 var _img = _interopRequireDefault(require("./components/img"));
 var _inlineListItem = _interopRequireDefault(require("./components/inlineListItem"));
 var _link = _interopRequireDefault(require("./components/link"));
 var _list = _interopRequireDefault(require("./components/list"));
 var _listItem = _interopRequireDefault(require("./components/listItem"));
+var _mainNav = _interopRequireDefault(require("./components/mainNav"));
+var _mainNavAccountItem = _interopRequireDefault(require("./components/mainNavAccountItem"));
+var _mainNavInstitutionLogo = _interopRequireDefault(require("./components/mainNavInstitutionLogo"));
+var _mainNavItem = _interopRequireDefault(require("./components/mainNavItem"));
 var _mask = _interopRequireDefault(require("./components/mask"));
 var _menu = _interopRequireDefault(require("./components/menu"));
 var _menuGroup = _interopRequireDefault(require("./components/menuGroup"));
@@ -76,11 +82,14 @@ var _segmentedControl = _interopRequireDefault(require("./components/segmentedCo
 var _select = _interopRequireDefault(require("./components/select"));
 var _sideNavBar = _interopRequireDefault(require("./components/sideNavBar"));
 var _sideNavBarItem = _interopRequireDefault(require("./components/sideNavBarItem"));
-var _sideNavBarNew = _interopRequireDefault(require("./components/sideNavBarNew"));
 var _skeletonLoader = _interopRequireDefault(require("./components/skeletonLoader"));
 var _slider = _interopRequireDefault(require("./components/slider"));
 var _sourceCodeEditor = _interopRequireDefault(require("./components/sourceCodeEditor"));
 var _spinner = _interopRequireDefault(require("./components/spinner"));
+var _stepItem = _interopRequireDefault(require("./components/stepItem"));
+var _stepper = _interopRequireDefault(require("./components/stepper"));
+var _subNav = _interopRequireDefault(require("./components/subNav"));
+var _subNavItem = _interopRequireDefault(require("./components/subNavItem"));
 var _table = _interopRequireDefault(require("./components/table"));
 var _tableBody = _interopRequireDefault(require("./components/tableBody"));
 var _tableCell = _interopRequireDefault(require("./components/tableCell"));
@@ -146,6 +155,8 @@ const theme = {
     Pill: _pill.default,
     FormFieldMessage: _formFieldMessage.default,
     Spinner: _spinner.default,
+    StepItem: _stepItem.default,
+    Stepper: _stepper.default,
     Link: _link.default,
     TextInput: _textInput.default,
     TextArea: _textArea.default,
@@ -234,10 +245,17 @@ const theme = {
     AppNav: _appNav.default,
     AppNavItem: _appNavItem.default,
     Byline: _byline.default,
-    SideNavBarNew: _sideNavBarNew.default,
+    GlobalNav: _globalNav.default,
+    MainNav: _mainNav.default,
+    MainNavItem: _mainNavItem.default,
+    SubNavItem: _subNavItem.default,
+    SubNav: _subNav.default,
+    MainNavInstitutionLogo: _mainNavInstitutionLogo.default,
+    MainNavAccountItem: _mainNavAccountItem.default,
     Img: _img.default,
     Chart: _chart.default,
     Card: _card.default,
+    ImageCard: _imageCard.default,
     Banner: _banner.default,
     MobileSharedTokens: _mobileSharedTokens.default,
     SkeletonLoader: _skeletonLoader.default,

package/lib/themes/newThemeTokens/dark/semantics.js

@@ -742,7 +742,7 @@ const semantics = primitives => ({
         }
       },
       "brandButtonSecondaryText": primitives.color.white,
-      "brandGlobalNavBgd": primitives.color.grey.grey170,
+      "brandGlobalNavBgd": primitives.color.grey.grey180,
       "globalNavLinkHover": primitives.color.grey.grey170,
       "brandGlobalNavMenuItemTextColor": primitives.color.white,
       "brandGlobalNavMenuItemTextColorActive": primitives.color.grey.grey180

package/lib/themes/newThemeTokens/legacyCanvas/components/alert.js

@@ -37,7 +37,7 @@ const alert = semantic => ({
   contentFontFamily: semantic.fontFamily.base,
   contentFontSize: semantic.fontSize.textBase,
   contentFontWeight: semantic.fontWeight.body.base,
-  contentLineHeight: semantic.lineHeight.standalone.base,
+  contentLineHeight: semantic.lineHeight.paragraph.textBase,
   dangerBackground: semantic.color.background.error,
   dangerBackgroundInline: semantic.color.background.base,
   dangerBorderColor: semantic.color.stroke.error,
@@ -58,6 +58,8 @@ const alert = semantic => ({
   warningBorderColor: semantic.color.stroke.warning,
   warningBorderColorInline: semantic.color.stroke.warning,
   warningIconBackground: semantic.color.background.base,
+  textOnColor: semantic.color.text.onColor,
+  textBase: semantic.color.text.base,
   contentPaddingVertical: semantic.spacing.spaceMd,
   contentPaddingHorizontal: semantic.spacing.spaceXl,
   iconPaddingLeft: semantic.spacing.spaceSm,

package/lib/themes/newThemeTokens/legacyCanvas/components/globalNav.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 globalNav = semantic => ({
+  backgroundColor: semantic.color.institutional.brandGlobalNavBgd,
+  fill: semantic.color.icon.onColor,
+  textColor: semantic.color.institutional.brandGlobalNavMenuItemTextColor,
+  minimizedminWidth: "5.75rem",
+  toggleTransition: "300ms",
+  minWidth: "14.5rem",
+  margin: "0rem",
+  minimizedMargin: "0rem",
+  boxShadow: {
+    0: {
+      x: "0rem",
+      y: "0rem",
+      blur: "0rem",
+      spread: "0rem",
+      color: semantic.color.transparentColor,
+      type: "dropShadow"
+    },
+    1: {
+      x: "0rem",
+      y: "0rem",
+      blur: "0rem",
+      spread: "0rem",
+      color: semantic.color.transparentColor,
+      type: "dropShadow"
+    }
+  },
+  borderRadius: "0rem",
+  minimizedBorderRadius: "0rem",
+  borderColor: semantic.color.stroke.base,
+  borderWidth: semantic.borderWidth.sm
+});
+var _default = exports.default = globalNav;

package/lib/themes/newThemeTokens/legacyCanvas/components/imageCard.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 imageCard = semantic => ({
+  borderRadiusBaseSm: semantic.borderRadius.container.sm,
+  borderRadiusBaseMd: semantic.borderRadius.container.md,
+  borderRadiusBaseLg: semantic.borderRadius.container.md,
+  paddingBaseSm: semantic.spacing.padding.container.xs,
+  paddingBaseMd: semantic.spacing.padding.container.sm,
+  paddingBaseLg: semantic.spacing.padding.container.md,
+  boxShadow: {
+    0: {
+      x: semantic.dropShadow.x.elevation1.dropshadow1,
+      y: semantic.dropShadow.y.elevation1.dropshadow1,
+      blur: semantic.dropShadow.blur.elevation1.dropshadow1,
+      spread: semantic.dropShadow.spread.elevation1.dropshadow1,
+      color: semantic.color.dropShadow.shadowColor1,
+      type: "dropShadow"
+    },
+    1: {
+      x: semantic.dropShadow.x.elevation1.dropshadow1,
+      y: semantic.dropShadow.y.elevation1.dropshadow2,
+      blur: semantic.dropShadow.blur.elevation1.dropshadow2,
+      spread: semantic.dropShadow.spread.elevation1.dropshadow2,
+      color: semantic.color.dropShadow.shadowColor2,
+      type: "dropShadow"
+    }
+  },
+  backgroundColor: semantic.color.background.container,
+  breakpointMd: "20rem",
+  breakpointLg: "40rem",
+  imgTextGapSm: semantic.spacing.gap.cards.md,
+  imgTextGapMd: "1.25rem",
+  imgTextGapLg: semantic.spacing.gap.cards.lg,
+  imgBorderRadiusSm: semantic.borderRadius.md,
+  imgBorderRadiusMd: semantic.borderRadius.lg,
+  imgBorderRadiusLg: semantic.borderRadius.lg,
+  titleContentGapSm: semantic.spacing.spaceSm,
+  titleContentGapMd: semantic.spacing.spaceSm,
+  titleContentGapLg: semantic.spacing.spaceSm,
+  imgAspectRatio: 1.77778
+});
+var _default = exports.default = imageCard;

package/lib/themes/newThemeTokens/legacyCanvas/components/mainNav.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 mainNav = () => ({
+  margin: "0rem",
+  minimizedMargin: "0rem",
+  gap: "0rem",
+  navItemsGap: "0rem"
+});
+var _default = exports.default = mainNav;

package/lib/themes/newThemeTokens/legacyCanvas/components/mainNavAccountItem.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 mainNavAccountItem = semantic => ({
+  backgroundColor: semantic.color.institutional.brandGlobalNavBgd,
+  fontColor: semantic.color.institutional.brandGlobalNavMenuItemTextColor,
+  innerFocusOutlineColor: semantic.color.transparentColor,
+  outerFocusOutlineColor: semantic.color.stroke.interactive.focusRing.base,
+  hoverBackgroundColor: semantic.color.background.interactive.action.tertiary.hover,
+  currentBackgroundColor: semantic.color.institutional.brandPrimary,
+  selectedBackgroundColor: semantic.color.background.interactive.action.tertiary.active,
+  currentTextColor: semantic.color.institutional.brandGlobalNavMenuItemTextColorActive,
+  selectedInnerFocusOutlineColor: semantic.color.transparentColor,
+  selectedOuterFocusOutlineColor: semantic.color.stroke.interactive.focusRing.base,
+  padding: semantic.spacing.padding.container.xxs,
+  borderRadius: "0rem",
+  borderColor: semantic.color.stroke.base,
+  minimizedItemSize: "2.75rem"
+});
+var _default = exports.default = mainNavAccountItem;

package/lib/themes/newThemeTokens/legacyCanvas/components/mainNavInstitutionLogo.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 mainNavInstitutionLogo = semantic => ({
+  textColor: semantic.color.text.onColor,
+  strokeColor: semantic.color.stroke.base,
+  padding: semantic.spacing.spaceSm,
+  gap: semantic.spacing.spaceMd
+});
+var _default = exports.default = mainNavInstitutionLogo;

package/lib/themes/newThemeTokens/legacyCanvas/components/mainNavItem.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 mainNavItem = semantic => ({
+  iconWrapperHeight: "2.25rem",
+  borderRadius: "0rem",
+  backgroundColor: semantic.color.institutional.brandGlobalNavBgd,
+  horizontalPadding: "0.5rem",
+  verticalPadding: "0.375rem",
+  fontColor: semantic.color.institutional.brandGlobalNavMenuItemTextColor,
+  fontFamily: semantic.fontFamily.base,
+  fontSize: semantic.fontSize.textBase,
+  fontWeight: semantic.fontWeight.body.base,
+  hoverBackgroundColor: semantic.color.institutional.globalNavLinkHover,
+  lineHeight: semantic.lineHeight.paragraph.base,
+  linkTextDecoration: "none",
+  currentBackgroundColor: semantic.color.background.base,
+  selectedBackgroundColor: semantic.color.background.interactive.action.tertiary.active,
+  currentTextColor: semantic.color.institutional.brandGlobalNavMenuItemTextColorActive,
+  innerFocusOutlineColor: semantic.color.stroke.interactive.focusRing.onColor,
+  selectedInnerFocusOutlineColor: semantic.color.stroke.interactive.focusRing.base,
+  outerFocusOutlineColor: semantic.color.transparentColor,
+  selectedOuterFocusOutlineColor: semantic.color.transparentColor,
+  minimizedItemSize: "2.75rem"
+});
+var _default = exports.default = mainNavItem;