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

package/src/themes/newThemeTokens/dark/index.ts

@@ -55,15 +55,21 @@ import fileDrop from "./components/fileDrop"
 import flex from "./components/flex"
 import formFieldLayout from "./components/formFieldLayout"
 import formFieldMessage from "./components/formFieldMessage"
+import globalNav from "./components/globalNav"
 import gridCol from "./components/gridCol"
 import gridRow from "./components/gridRow"
 import heading from "./components/heading"
 import icon from "./components/icon"
+import imageCard from "./components/imageCard"
 import img from "./components/img"
 import inlineListItem from "./components/inlineListItem"
 import link from "./components/link"
 import list from "./components/list"
 import listItem from "./components/listItem"
+import mainNav from "./components/mainNav"
+import mainNavAccountItem from "./components/mainNavAccountItem"
+import mainNavInstitutionLogo from "./components/mainNavInstitutionLogo"
+import mainNavItem from "./components/mainNavItem"
 import mask from "./components/mask"
 import menu from "./components/menu"
 import menuGroup from "./components/menuGroup"
@@ -94,11 +100,14 @@ import segmentedControl from "./components/segmentedControl"
 import select from "./components/select"
 import sideNavBar from "./components/sideNavBar"
 import sideNavBarItem from "./components/sideNavBarItem"
-import sideNavBarNew from "./components/sideNavBarNew"
 import skeletonLoader from "./components/skeletonLoader"
 import slider from "./components/slider"
 import sourceCodeEditor from "./components/sourceCodeEditor"
 import spinner from "./components/spinner"
+import stepItem from "./components/stepItem"
+import stepper from "./components/stepper"
+import subNav from "./components/subNav"
+import subNavItem from "./components/subNavItem"
 import table from "./components/table"
 import tableBody from "./components/tableBody"
 import tableCell from "./components/tableCell"
@@ -144,6 +153,8 @@ const theme: any = {
     Pill: pill,
     FormFieldMessage: formFieldMessage,
     Spinner: spinner,
+    StepItem: stepItem,
+    Stepper: stepper,
     Link: link,
     TextInput: textInput,
     TextArea: textArea,
@@ -232,10 +243,17 @@ const theme: any = {
     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/src/themes/newThemeTokens/dark/semantics.ts

@@ -699,7 +699,7 @@ export type Semantics = {
         "modify": { "type": string; "value": number; "space": string }
       }
       "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"]
@@ -1516,7 +1516,7 @@ const semantics = (primitives: Primitives): Semantics => ({
         "modify": { "type": "alpha", "value": 0.3, "space": "hsl" },
       },
       "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/src/themes/newThemeTokens/legacyCanvas/components/alert.ts

@@ -33,7 +33,7 @@ const alert = (semantic: Semantics) => ({
   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,
@@ -54,6 +54,8 @@ const alert = (semantic: Semantics) => ({
   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/src/themes/newThemeTokens/legacyCanvas/components/globalNav.ts

@@ -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.
+ */
+
+import type { Semantics } from "../semantics"
+
+const globalNav = (semantic: Semantics) => ({
+  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,
+})
+export default globalNav

package/src/themes/newThemeTokens/legacyCanvas/components/imageCard.ts

@@ -0,0 +1,66 @@
+/*
+ * 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 type { Semantics } from "../semantics"
+
+const imageCard = (semantic: Semantics) => ({
+  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,
+})
+export default imageCard

package/src/themes/newThemeTokens/legacyCanvas/components/mainNav.ts

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

package/src/themes/newThemeTokens/legacyCanvas/components/mainNavAccountItem.ts

@@ -0,0 +1,43 @@
+/*
+ * 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 type { Semantics } from "../semantics"
+
+const mainNavAccountItem = (semantic: Semantics) => ({
+  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",
+})
+export default mainNavAccountItem

package/src/themes/newThemeTokens/legacyCanvas/components/mainNavInstitutionLogo.ts

@@ -0,0 +1,33 @@
+/*
+ * 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 type { Semantics } from "../semantics"
+
+const mainNavInstitutionLogo = (semantic: Semantics) => ({
+  textColor: semantic.color.text.onColor,
+  strokeColor: semantic.color.stroke.base,
+  padding: semantic.spacing.spaceSm,
+  gap: semantic.spacing.spaceMd,
+})
+export default mainNavInstitutionLogo

package/src/themes/newThemeTokens/legacyCanvas/components/mainNavItem.ts

@@ -0,0 +1,49 @@
+/*
+ * 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 type { Semantics } from "../semantics"
+
+const mainNavItem = (semantic: Semantics) => ({
+  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",
+})
+export default mainNavItem

package/src/themes/newThemeTokens/legacyCanvas/components/pill.ts

@@ -32,10 +32,10 @@ const pill = (semantic: Semantics) => ({
   height: "1.5rem",
   heightMedium: "1.75rem",
   heightLarge: "2rem",
-  textFontSize: semantic.fontSize.textSm,
+  textFontSize: semantic.fontSize.textXs,
   textFontSizeMedium: semantic.fontSize.textSm,
-  textFontSizeLarge: semantic.fontSize.textSm,
-  textFontWeight: semantic.fontWeight.body.strong,
+  textFontSizeLarge: semantic.fontSize.textBase,
+  textFontWeight: semantic.fontWeight.body.base,
   statusLabelFontWeight: semantic.fontWeight.body.strong,
   maxWidth: "240px",
   baseTextColor: semantic.color.text.base,
@@ -78,9 +78,10 @@ const pill = (semantic: Semantics) => ({
   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",
-  paddingVertical: semantic.spacing.spaceXs,
   gapIconLabel: semantic.spacing.spaceSm,
   gapIconLabelMedium: semantic.spacing.spaceSm,
   gapIconLabelLarge: semantic.spacing.spaceSm,

package/src/themes/newThemeTokens/legacyCanvas/components/stepItem.ts

@@ -0,0 +1,34 @@
+/*
+ * 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 type { Semantics } from "../semantics"
+
+const stepItem = (semantic: Semantics) => ({
+  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/src/themes/newThemeTokens/legacyCanvas/components/stepper.ts

@@ -0,0 +1,48 @@
+/*
+ * 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 type { Semantics } from "../semantics"
+
+const stepper = (semantic: Semantics) => ({
+  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/src/themes/newThemeTokens/legacyCanvas/components/subNav.ts

@@ -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.
+ */
+
+import type { Semantics } from "../semantics"
+
+const subNav = (semantic: Semantics) => ({
+  strokeColor: semantic.color.stroke.base,
+  textColor: semantic.color.text.onColor,
+  padding: semantic.spacing.spaceMd,
+  minimizedVerticalPadding: "0.875rem",
+  gap: semantic.spacing.spaceSm,
+  navItemsGap: "0rem",
+  minimizedWidth: "2rem",
+  minimizedHoverWidth: "2.25rem",
+})
+export default subNav

package/src/themes/newThemeTokens/legacyCanvas/components/subNavItem.ts

@@ -0,0 +1,39 @@
+/*
+ * 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 type { Semantics } from "../semantics"
+
+const subNavItem = (semantic: Semantics) => ({
+  backgroundColor: semantic.color.transparentColor,
+  hoverBackgroundColor: semantic.color.background.interactive.action.primary.hover,
+  activeBackgroundColor: semantic.color.background.interactive.action.primary.active,
+  selectedBackgroundColor: semantic.color.background.brand,
+  textColor: semantic.color.institutional.brandGlobalNavMenuItemTextColor,
+  selectedTextColor: semantic.color.text.onColor,
+  logoutTextColor: semantic.color.text.onColor,
+  borderRadius: "0rem",
+  padding: semantic.spacing.spaceMd,
+  gap: semantic.spacing.spaceSm,
+})
+export default subNavItem

package/src/themes/newThemeTokens/legacyCanvas/index.ts

@@ -55,15 +55,21 @@ import fileDrop from "./components/fileDrop"
 import flex from "./components/flex"
 import formFieldLayout from "./components/formFieldLayout"
 import formFieldMessage from "./components/formFieldMessage"
+import globalNav from "./components/globalNav"
 import gridCol from "./components/gridCol"
 import gridRow from "./components/gridRow"
 import heading from "./components/heading"
 import icon from "./components/icon"
+import imageCard from "./components/imageCard"
 import img from "./components/img"
 import inlineListItem from "./components/inlineListItem"
 import link from "./components/link"
 import list from "./components/list"
 import listItem from "./components/listItem"
+import mainNav from "./components/mainNav"
+import mainNavAccountItem from "./components/mainNavAccountItem"
+import mainNavInstitutionLogo from "./components/mainNavInstitutionLogo"
+import mainNavItem from "./components/mainNavItem"
 import mask from "./components/mask"
 import menu from "./components/menu"
 import menuGroup from "./components/menuGroup"
@@ -94,11 +100,14 @@ import segmentedControl from "./components/segmentedControl"
 import select from "./components/select"
 import sideNavBar from "./components/sideNavBar"
 import sideNavBarItem from "./components/sideNavBarItem"
-import sideNavBarNew from "./components/sideNavBarNew"
 import skeletonLoader from "./components/skeletonLoader"
 import slider from "./components/slider"
 import sourceCodeEditor from "./components/sourceCodeEditor"
 import spinner from "./components/spinner"
+import stepItem from "./components/stepItem"
+import stepper from "./components/stepper"
+import subNav from "./components/subNav"
+import subNavItem from "./components/subNavItem"
 import table from "./components/table"
 import tableBody from "./components/tableBody"
 import tableCell from "./components/tableCell"
@@ -144,6 +153,8 @@ const theme: any = {
     Pill: pill,
     FormFieldMessage: formFieldMessage,
     Spinner: spinner,
+    StepItem: stepItem,
+    Stepper: stepper,
     Link: link,
     TextInput: textInput,
     TextArea: textArea,
@@ -232,10 +243,17 @@ const theme: any = {
     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/src/themes/newThemeTokens/legacyCanvasHighContrast/components/alert.ts

@@ -33,7 +33,7 @@ const alert = (semantic: Semantics) => ({
   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,
@@ -54,6 +54,8 @@ const alert = (semantic: Semantics) => ({
   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,