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

package/es/themes/newThemeTokens/light/components/mainNavItem.js

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

package/es/themes/newThemeTokens/light/components/pill.js

@@ -26,7 +26,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,
@@ -39,7 +38,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,
@@ -165,6 +164,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/es/themes/newThemeTokens/light/components/stepItem.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 stepItem = semantic => ({
+  stepStrokeFilledColor: semantic.color.stroke.info,
+  stepStrokeColor: semantic.color.stroke.base,
+  stepStrokeFilledWidth: semantic.borderWidth.lg,
+  stepStrokeWidth: semantic.borderWidth.md,
+  stepStrokeRadius: semantic.borderRadius.xs
+});
+export default stepItem;

package/es/themes/newThemeTokens/light/components/stepper.js

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

package/es/themes/newThemeTokens/light/components/subNav.js

@@ -0,0 +1,35 @@
+/*
+ * 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"
+});
+export default subNav;

package/es/themes/newThemeTokens/light/components/subNavItem.js

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

package/es/themes/newThemeTokens/light/index.js

@@ -53,15 +53,21 @@ import fileDrop from "./components/fileDrop.js";
 import flex from "./components/flex.js";
 import formFieldLayout from "./components/formFieldLayout.js";
 import formFieldMessage from "./components/formFieldMessage.js";
+import globalNav from "./components/globalNav.js";
 import gridCol from "./components/gridCol.js";
 import gridRow from "./components/gridRow.js";
 import heading from "./components/heading.js";
 import icon from "./components/icon.js";
+import imageCard from "./components/imageCard.js";
 import img from "./components/img.js";
 import inlineListItem from "./components/inlineListItem.js";
 import link from "./components/link.js";
 import list from "./components/list.js";
 import listItem from "./components/listItem.js";
+import mainNav from "./components/mainNav.js";
+import mainNavAccountItem from "./components/mainNavAccountItem.js";
+import mainNavInstitutionLogo from "./components/mainNavInstitutionLogo.js";
+import mainNavItem from "./components/mainNavItem.js";
 import mask from "./components/mask.js";
 import menu from "./components/menu.js";
 import menuGroup from "./components/menuGroup.js";
@@ -92,11 +98,14 @@ import segmentedControl from "./components/segmentedControl.js";
 import select from "./components/select.js";
 import sideNavBar from "./components/sideNavBar.js";
 import sideNavBarItem from "./components/sideNavBarItem.js";
-import sideNavBarNew from "./components/sideNavBarNew.js";
 import skeletonLoader from "./components/skeletonLoader.js";
 import slider from "./components/slider.js";
 import sourceCodeEditor from "./components/sourceCodeEditor.js";
 import spinner from "./components/spinner.js";
+import stepItem from "./components/stepItem.js";
+import stepper from "./components/stepper.js";
+import subNav from "./components/subNav.js";
+import subNavItem from "./components/subNavItem.js";
 import table from "./components/table.js";
 import tableBody from "./components/tableBody.js";
 import tableCell from "./components/tableCell.js";
@@ -138,6 +147,8 @@ const theme = {
     Pill: pill,
     FormFieldMessage: formFieldMessage,
     Spinner: spinner,
+    StepItem: stepItem,
+    Stepper: stepper,
     Link: link,
     TextInput: textInput,
     TextArea: textArea,
@@ -226,10 +237,17 @@ const theme = {
     AppNav: appNav,
     AppNavItem: appNavItem,
     Byline: byline,
-    SideNavBarNew: sideNavBarNew,
+    GlobalNav: globalNav,
+    MainNav: mainNav,
+    MainNavItem: mainNavItem,
+    SubNavItem: subNavItem,
+    SubNav: subNav,
+    MainNavInstitutionLogo: mainNavInstitutionLogo,
+    MainNavAccountItem: mainNavAccountItem,
     Img: img,
     Chart: chart,
     Card: card,
+    ImageCard: imageCard,
     Banner: banner,
     MobileSharedTokens: mobileSharedTokens,
     SkeletonLoader: skeletonLoader,

package/lib/themes/newThemeTokens/componentTypes/imageCard.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/themes/newThemeTokens/componentTypes/mainNav.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/themes/newThemeTokens/componentTypes/mainNavAccountItem.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/themes/newThemeTokens/componentTypes/mainNavInstitutionLogo.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/themes/newThemeTokens/componentTypes/mainNavItem.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/themes/newThemeTokens/componentTypes/stepItem.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/themes/newThemeTokens/componentTypes/stepper.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/themes/newThemeTokens/componentTypes/subNav.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/themes/newThemeTokens/componentTypes/subNavItem.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/themes/newThemeTokens/dark/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.pastel.error,
   dangerBorderColor: semantic.color.stroke.error,
@@ -86,6 +86,8 @@ const alert = semantic => ({
     }
   },
   warningIconBackground: semantic.color.background.warning,
+  textOnColor: semantic.color.text.onColor,
+  textBase: semantic.color.text.base,
   contentPaddingVertical: semantic.spacing.spaceMd,
   contentPaddingHorizontal: semantic.spacing.spaceMd,
   iconPaddingLeft: semantic.spacing.spaceMd,

package/lib/themes/newThemeTokens/dark/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.interactive.action.primaryOnColor.base,
+  borderColor: semantic.color.stroke.muted,
+  textColor: semantic.color.institutional.brandGlobalNavMenuItemTextColor,
+  minimizedminWidth: "6.5rem",
+  toggleTransition: "300ms",
+  minWidth: "16rem",
+  margin: semantic.spacing.spaceMd,
+  minimizedMargin: "0.375rem",
+  boxShadow: {
+    0: {
+      x: "0rem",
+      y: "0.0625rem",
+      blur: "0.125rem",
+      spread: "0rem",
+      color: semantic.color.dropShadow.shadowColor1,
+      type: "dropShadow"
+    },
+    1: {
+      x: "0rem",
+      y: "0.125rem",
+      blur: "0.25rem",
+      spread: "0.125rem",
+      color: semantic.color.dropShadow.shadowColor2,
+      type: "dropShadow"
+    }
+  },
+  borderRadius: semantic.borderRadius.lg,
+  minimizedBorderRadius: semantic.borderRadius.container.sm,
+  borderWidth: semantic.borderWidth.sm
+});
+var _default = exports.default = globalNav;

package/lib/themes/newThemeTokens/dark/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: "0.75rem",
+  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/dark/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 = semantic => ({
+  margin: "0.75rem",
+  minimizedMargin: "0rem",
+  gap: semantic.spacing.padding.container.xxs,
+  navItemsGap: semantic.spacing.spaceXs
+});
+var _default = exports.default = mainNav;

package/lib/themes/newThemeTokens/dark/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: semantic.borderRadius.container.sm,
+  borderColor: semantic.color.stroke.muted,
+  minimizedItemSize: "2.75rem"
+});
+var _default = exports.default = mainNavAccountItem;

package/lib/themes/newThemeTokens/dark/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.base,
+  strokeColor: semantic.color.stroke.muted,
+  padding: semantic.spacing.spaceSm,
+  gap: semantic.spacing.spaceMd
+});
+var _default = exports.default = mainNavInstitutionLogo;