@instructure/ui-themes 11.7.8-snapshot-10 → 11.7.8-snapshot-12

package/CHANGELOG.md

@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [11.7.8-snapshot-10](https://github.com/instructure/instructure-ui/compare/v11.7.7...v11.7.8-snapshot-10) (2026-10-02)
+## [11.7.8-snapshot-12](https://github.com/instructure/instructure-ui/compare/v11.7.7...v11.7.8-snapshot-12) (2026-10-02)
 
 **Note:** Version bump only for package @instructure/ui-themes
 

package/es/themes/newThemeTokens/componentTypes/segmentedControl.js

@@ -0,0 +1 @@
+export {};

package/es/themes/newThemeTokens/componentTypes/skeletonLoader.js

@@ -0,0 +1 @@
+export {};

package/es/themes/newThemeTokens/dark/components/baseButton.js

@@ -23,11 +23,31 @@
  */
 
 const baseButton = semantic => ({
+  primaryBackground: semantic.color.institutional.brandButtonPrimaryBgd,
+  primaryBorderColor: semantic.color.institutional.brandButtonPrimaryBgd,
+  primaryColor: semantic.color.institutional.brandButtonPrimaryText,
+  primaryHoverBackground: {
+    value: semantic.color.institutional.brandButtonPrimaryBgd,
+    modify: {
+      type: "lighten",
+      value: 0.2,
+      space: "hsl"
+    }
+  },
+  primaryHoverBorderColor: {
+    value: semantic.color.institutional.brandButtonPrimaryBgd,
+    modify: {
+      type: "lighten",
+      value: 0.2,
+      space: "hsl"
+    }
+  },
+  primaryHoverTextColor: semantic.color.institutional.brandButtonPrimaryText,
   primaryActiveBackground: {
     value: semantic.color.institutional.brandButtonPrimaryBgd,
     modify: {
       type: "darken",
-      value: 0.1,
+      value: 0.15,
       space: "hsl"
     }
   },
@@ -35,14 +55,11 @@ const baseButton = semantic => ({
     value: semantic.color.institutional.brandButtonPrimaryBgd,
     modify: {
       type: "darken",
-      value: 0.1,
+      value: 0.15,
       space: "hsl"
     }
   },
   primaryActiveTextColor: semantic.color.institutional.brandButtonPrimaryText,
-  primaryBackground: semantic.color.institutional.brandButtonPrimaryBgd,
-  primaryBorderColor: semantic.color.institutional.brandButtonPrimaryBgd,
-  primaryColor: semantic.color.institutional.brandButtonPrimaryText,
   primaryDisabledBackgroundColor: semantic.color.background.interactive.action.primary.disabled,
   primaryDisabledBorderColor: semantic.color.stroke.interactive.action.primary.disabled,
   primaryDisabledTextColor: semantic.color.text.interactive.action.primary.disabled,
@@ -71,23 +88,6 @@ const baseButton = semantic => ({
       space: "hsl"
     }
   },
-  primaryHoverBackground: {
-    value: semantic.color.institutional.brandButtonPrimaryBgd,
-    modify: {
-      type: "darken",
-      value: 0.1,
-      space: "hsl"
-    }
-  },
-  primaryHoverBorderColor: {
-    value: semantic.color.institutional.brandButtonPrimaryBgd,
-    modify: {
-      type: "darken",
-      value: 0.1,
-      space: "hsl"
-    }
-  },
-  primaryHoverTextColor: semantic.color.institutional.brandButtonPrimaryText,
   primaryInverseActiveBackground: semantic.color.background.interactive.action.primaryOnColor.active,
   primaryInverseBackground: semantic.color.background.interactive.action.primaryOnColor.base,
   primaryInverseBorderColor: semantic.color.stroke.interactive.action.primaryOnColor.base,
@@ -104,15 +104,25 @@ const baseButton = semantic => ({
   primaryOnColorDisabledTextColor: semantic.color.text.interactive.action.primaryOnColor.disabled,
   primaryOnColorHoverBorderColor: semantic.color.stroke.interactive.action.primaryOnColor.hover,
   primaryOnColorHoverTextColor: semantic.color.text.interactive.action.primaryOnColor.hover,
-  secondaryActiveBackground: {
+  secondaryBackground: semantic.color.institutional.brandButtonSecondaryBgd,
+  secondaryBorderColor: {
     value: semantic.color.institutional.brandButtonSecondaryBgd,
     modify: {
-      type: "darken",
-      value: 0.1,
+      type: "alpha",
+      value: 0,
       space: "hsl"
     }
   },
-  secondaryActiveBorderColor: {
+  secondaryColor: semantic.color.institutional.brandButtonSecondaryText,
+  secondaryHoverBackground: {
+    value: semantic.color.institutional.brandButtonSecondaryBgd,
+    modify: {
+      type: "lighten",
+      value: 0.4,
+      space: "hsl"
+    }
+  },
+  secondaryHoverBorderColor: {
     value: semantic.color.institutional.brandButtonSecondaryBgd,
     modify: {
       type: "alpha",
@@ -120,9 +130,16 @@ const baseButton = semantic => ({
       space: "hsl"
     }
   },
-  secondaryActiveTextColor: semantic.color.institutional.brandButtonSecondaryText,
-  secondaryBackground: semantic.color.institutional.brandButtonSecondaryBgd,
-  secondaryBorderColor: {
+  secondaryHoverTextColor: semantic.color.institutional.brandButtonSecondaryText,
+  secondaryActiveBackground: {
+    value: semantic.color.institutional.brandButtonSecondaryBgd,
+    modify: {
+      type: "darken",
+      value: 0.15,
+      space: "hsl"
+    }
+  },
+  secondaryActiveBorderColor: {
     value: semantic.color.institutional.brandButtonSecondaryBgd,
     modify: {
       type: "alpha",
@@ -130,7 +147,7 @@ const baseButton = semantic => ({
       space: "hsl"
     }
   },
-  secondaryColor: semantic.color.institutional.brandButtonSecondaryText,
+  secondaryActiveTextColor: semantic.color.institutional.brandButtonSecondaryText,
   secondaryDisabledBackgroundColor: semantic.color.background.interactive.action.secondary.disabled,
   secondaryDisabledBorderColor: semantic.color.stroke.interactive.action.secondary.disabled,
   secondaryDisabledTextColor: semantic.color.text.interactive.action.secondary.disabled,
@@ -144,23 +161,6 @@ const baseButton = semantic => ({
   },
   secondaryGhostColor: semantic.color.institutional.brandButtonSecondaryText,
   secondaryGhostHoverBackground: semantic.color.institutional.brandButtonSecondaryBgd,
-  secondaryHoverBackground: {
-    value: semantic.color.institutional.brandButtonSecondaryBgd,
-    modify: {
-      type: "lighten",
-      value: 0.1,
-      space: "hsl"
-    }
-  },
-  secondaryHoverBorderColor: {
-    value: semantic.color.institutional.brandButtonSecondaryBgd,
-    modify: {
-      type: "alpha",
-      value: 0,
-      space: "hsl"
-    }
-  },
-  secondaryHoverTextColor: semantic.color.institutional.brandButtonSecondaryText,
   secondaryOnColorActiveBorderColor: semantic.color.stroke.interactive.action.secondaryOnColor.active,
   secondaryOnColorActiveTextColor: semantic.color.text.interactive.action.secondaryOnColor.active,
   secondaryOnColorDisabledBorderColor: semantic.color.stroke.interactive.action.secondaryOnColor.disabled,

package/es/themes/newThemeTokens/dark/components/segmentedControl.js

@@ -0,0 +1,105 @@
+/*
+ * 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 segmentedControl = semantic => ({
+  selectedItemBackgroundColor: semantic.color.institutional.brandButtonPrimaryBgd,
+  trackBackgroundColor: semantic.color.institutional.brandButtonSecondaryBgd,
+  trackBackgroundDisabledColor: semantic.color.background.interactive.action.secondary.disabled,
+  selectedItemTextColor: semantic.color.institutional.brandButtonPrimaryText,
+  unselectedItemTextColor: semantic.color.institutional.brandButtonSecondaryText,
+  unselectedItemTextDisabledColor: semantic.color.text.interactive.action.secondary.disabled,
+  selectedItemTextDisabledColor: semantic.color.text.interactive.action.primary.disabled,
+  selectedItemBackgroundDisabledColor: semantic.color.background.interactive.action.primary.disabled,
+  selectedItemBackgroundActiveColor: {
+    value: semantic.color.institutional.brandButtonPrimaryBgd,
+    modify: {
+      type: "darken",
+      value: 0.15,
+      space: "hsl"
+    }
+  },
+  selectedItemBackgroundHoverColor: {
+    value: semantic.color.institutional.brandButtonPrimaryBgd,
+    modify: {
+      type: "lighten",
+      value: 0.2,
+      space: "hsl"
+    }
+  },
+  unselectedItemBackgroundHoverColor: {
+    value: semantic.color.institutional.brandButtonSecondaryBgd,
+    modify: {
+      type: "lighten",
+      value: 0.4,
+      space: "hsl"
+    }
+  },
+  unselectedItemBackgroundActiveColor: {
+    value: semantic.color.institutional.brandButtonSecondaryBgd,
+    modify: {
+      type: "darken",
+      value: 0.15,
+      space: "hsl"
+    }
+  },
+  selectedItemShadow: {
+    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.dropshadow2,
+      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"
+    }
+  },
+  itemPaddingHorizontalLg: semantic.spacing.padding.interactive.horizontal.xl,
+  itemPaddingHorizontalMd: semantic.spacing.padding.interactive.horizontal.lg,
+  itemPaddingHorizontalSm: semantic.spacing.padding.interactive.horizontal.md,
+  itemPaddingHorizontalXs: semantic.spacing.padding.interactive.horizontal.sm,
+  trackPadding: semantic.spacing.spaceXs,
+  itemGapLg: semantic.spacing.spaceMd,
+  itemGapMd: semantic.spacing.spaceSm,
+  itemGapSm: semantic.spacing.spaceXs,
+  trackGap: semantic.spacing.space2xs,
+  heightLg: semantic.size.interactive.height.lg,
+  heightMd: semantic.size.interactive.height.md,
+  heightSm: semantic.size.interactive.height.sm,
+  itemBorderRadius: semantic.borderRadius.interactive.base,
+  TrackBorderRadius: semantic.borderRadius.xl,
+  fontFamily: semantic.fontFamily.base,
+  fontWeight: semantic.fontWeight.interactive,
+  lineHeight: semantic.lineHeight.standalone.base,
+  fontSizeLg: "1.125rem",
+  fontSizeMd: semantic.fontSize.textBase,
+  fontSizeSm: semantic.fontSize.textSm
+});
+export default segmentedControl;

package/es/themes/newThemeTokens/dark/components/sideNavBarItem.js

@@ -34,7 +34,7 @@ const sideNavBarItem = semantic => ({
   hoverBackgroundColor: semantic.color.institutional.globalNavLinkHover,
   lineHeight: semantic.lineHeight.paragraph.base,
   linkTextDecoration: "none",
-  selectedBackgroundColor: semantic.color.institutional.brandPrimary,
+  selectedBackgroundColor: semantic.color.background.brand,
   selectedFontColor: semantic.color.institutional.brandGlobalNavMenuItemTextColorActive,
   innerFocusOutlineColor: semantic.color.stroke.interactive.focusRing.base,
   outerFocusOutlineColor: semantic.color.transparentColor,

package/es/themes/newThemeTokens/dark/components/sideNavBarNew.js

@@ -101,9 +101,7 @@ const sideNavBarNew = semantic => ({
   },
   institutionLogo: {
     textColor: semantic.color.text.base,
-    strokeColor: semantic.color.stroke.muted
-  },
-  insitutionLogo: {
+    strokeColor: semantic.color.stroke.muted,
     padding: semantic.spacing.spaceSm,
     gap: semantic.spacing.spaceMd
   }

package/es/themes/newThemeTokens/dark/components/skeletonLoader.js

@@ -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.
+ */
+
+const skeletonLoader = semantic => ({
+  backgroundColor: semantic.color.background.skeleton.backgroundColor,
+  shimmerColor: semantic.color.background.skeleton.shimmerColor,
+  textHeightXs: semantic.fontSize.textBase,
+  textHeightXxs: semantic.fontSize.textXs,
+  textHeightSm: semantic.fontSize.textLg,
+  textHeightMd: "1.5rem",
+  textHeightLg: semantic.fontSize.textXl,
+  textHeightXl: "2rem",
+  textHeightXxl: semantic.fontSize.text2xl,
+  textPaddingXxs: "0.1875rem",
+  textPaddingXs: "0.125rem",
+  textPaddingSm: "0.15625rem",
+  textPaddingMd: "0.1875rem",
+  textPaddingLg: "0.21875rem",
+  textPaddingXl: "0.25rem",
+  textPaddingXxl: "0.28125rem",
+  textBorderRadius: semantic.borderRadius.sm,
+  imageBorderRadius: semantic.borderRadius.md,
+  avatarBorderRadius: semantic.borderRadius.full,
+  duration: "1500ms",
+  bezier: "0.42, 0, 0.58, 1",
+  motion: "ease-in-out"
+});
+export default skeletonLoader;

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

@@ -88,10 +88,12 @@ import radioInput from "./components/radioInput.js";
 import rangeInput from "./components/rangeInput.js";
 import ratingIcon from "./components/ratingIcon.js";
 import rgbaInput from "./components/rgbaInput.js";
+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";
@@ -229,7 +231,9 @@ const theme = {
     Chart: chart,
     Card: card,
     Banner: banner,
-    MobileSharedTokens: mobileSharedTokens
+    MobileSharedTokens: mobileSharedTokens,
+    SkeletonLoader: skeletonLoader,
+    SegmentedControl: segmentedControl
   }
 };
 export default theme;

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

@@ -61,7 +61,7 @@ const semantics = primitives => ({
             "base": primitives.color.navy.navy10,
             "hover": primitives.color.white,
             "active": primitives.color.navy.navy30,
-            "disabled": primitives.color.grey.grey150
+            "disabled": primitives.color.grey.grey130
           },
           "secondary": {
             "base": primitives.color.navy.navy130,
@@ -365,6 +365,10 @@ const semantics = primitives => ({
         "warning": primitives.color.honey.honey160,
         "error": primitives.color.red.red160,
         "neutral": primitives.color.grey.grey160
+      },
+      "skeleton": {
+        "backgroundColor": primitives.color.grey.grey110,
+        "shimmerColor": primitives.color.grey.grey90
       }
     },
     "stroke": {
@@ -401,7 +405,7 @@ const semantics = primitives => ({
             "base": primitives.color.navy.navy10,
             "hover": primitives.color.white,
             "active": primitives.color.navy.navy30,
-            "disabled": primitives.color.grey.grey150
+            "disabled": primitives.color.grey.grey130
           },
           "secondary": {
             "base": primitives.color.navy.navy130,
@@ -547,7 +551,7 @@ const semantics = primitives => ({
             "base": primitives.color.navy.navy170,
             "hover": primitives.color.navy.navy170,
             "active": primitives.color.navy.navy170,
-            "disabled": primitives.color.grey.grey100
+            "disabled": primitives.color.grey.grey170
           },
           "ai": {
             "base": primitives.color.white,
@@ -657,7 +661,7 @@ const semantics = primitives => ({
             "base": primitives.color.navy.navy170,
             "hover": primitives.color.navy.navy170,
             "active": primitives.color.navy.navy170,
-            "disabled": primitives.color.grey.grey100
+            "disabled": primitives.color.grey.grey170
           },
           "primaryOnColor": {
             "base": primitives.color.navy.navy160,

package/es/themes/newThemeTokens/legacyCanvas/components/segmentedControl.js

@@ -0,0 +1,105 @@
+/*
+ * 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 segmentedControl = semantic => ({
+  selectedItemBackgroundColor: semantic.color.institutional.brandButtonPrimaryBgd,
+  trackBackgroundColor: semantic.color.institutional.brandButtonSecondaryBgd,
+  trackBackgroundDisabledColor: semantic.color.background.interactive.action.secondary.disabled,
+  selectedItemTextColor: semantic.color.institutional.brandButtonPrimaryText,
+  unselectedItemTextColor: semantic.color.institutional.brandButtonSecondaryText,
+  unselectedItemTextDisabledColor: semantic.color.text.interactive.action.secondary.disabled,
+  selectedItemTextDisabledColor: semantic.color.text.interactive.action.primary.disabled,
+  selectedItemBackgroundDisabledColor: semantic.color.background.interactive.action.primary.disabled,
+  selectedItemBackgroundActiveColor: {
+    value: semantic.color.institutional.brandButtonPrimaryBgd,
+    modify: {
+      type: "darken",
+      value: 0.1,
+      space: "hsl"
+    }
+  },
+  selectedItemBackgroundHoverColor: {
+    value: semantic.color.institutional.brandButtonPrimaryBgd,
+    modify: {
+      type: "darken",
+      value: 0.1,
+      space: "hsl"
+    }
+  },
+  unselectedItemBackgroundHoverColor: {
+    value: semantic.color.institutional.brandButtonSecondaryBgd,
+    modify: {
+      type: "darken",
+      value: 0.1,
+      space: "hsl"
+    }
+  },
+  unselectedItemBackgroundActiveColor: {
+    value: semantic.color.institutional.brandButtonSecondaryBgd,
+    modify: {
+      type: "darken",
+      value: 0.1,
+      space: "hsl"
+    }
+  },
+  selectedItemShadow: {
+    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.dropshadow2,
+      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"
+    }
+  },
+  itemPaddingHorizontalLg: semantic.spacing.padding.interactive.horizontal.xl,
+  itemPaddingHorizontalMd: semantic.spacing.padding.interactive.horizontal.lg,
+  itemPaddingHorizontalSm: semantic.spacing.padding.interactive.horizontal.md,
+  itemPaddingHorizontalXs: semantic.spacing.padding.interactive.horizontal.sm,
+  trackPadding: semantic.spacing.spaceXs,
+  itemGapLg: semantic.spacing.spaceMd,
+  itemGapMd: semantic.spacing.spaceSm,
+  itemGapSm: semantic.spacing.spaceXs,
+  trackGap: semantic.spacing.space2xs,
+  heightLg: semantic.size.interactive.height.lg,
+  heightMd: semantic.size.interactive.height.md,
+  heightSm: semantic.size.interactive.height.sm,
+  itemBorderRadius: semantic.borderRadius.interactive.base,
+  TrackBorderRadius: semantic.borderRadius.xl,
+  fontFamily: semantic.fontFamily.base,
+  fontWeight: semantic.fontWeight.interactive,
+  lineHeight: semantic.lineHeight.standalone.base,
+  fontSizeLg: "1.125rem",
+  fontSizeMd: semantic.fontSize.textBase,
+  fontSizeSm: semantic.fontSize.textSm
+});
+export default segmentedControl;

package/es/themes/newThemeTokens/legacyCanvas/components/sideNavBarNew.js

@@ -101,9 +101,7 @@ const sideNavBarNew = semantic => ({
   },
   institutionLogo: {
     textColor: semantic.color.text.onColor,
-    strokeColor: semantic.color.stroke.base
-  },
-  insitutionLogo: {
+    strokeColor: semantic.color.stroke.base,
     padding: semantic.spacing.spaceSm,
     gap: semantic.spacing.spaceMd
   }

package/es/themes/newThemeTokens/legacyCanvas/components/skeletonLoader.js

@@ -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.
+ */
+
+const skeletonLoader = semantic => ({
+  backgroundColor: semantic.color.background.skeleton.backgroundColor,
+  shimmerColor: semantic.color.background.skeleton.shimmerColor,
+  textHeightXs: semantic.fontSize.textBase,
+  textHeightXxs: semantic.fontSize.textXs,
+  textHeightSm: semantic.fontSize.textLg,
+  textHeightMd: "1.5rem",
+  textHeightLg: semantic.fontSize.textXl,
+  textHeightXl: "2rem",
+  textHeightXxl: semantic.fontSize.text2xl,
+  textPaddingXxs: "0.1875rem",
+  textPaddingXs: "0.125rem",
+  textPaddingSm: "0.15625rem",
+  textPaddingMd: "0.1875rem",
+  textPaddingLg: "0.21875rem",
+  textPaddingXl: "0.25rem",
+  textPaddingXxl: "0.28125rem",
+  textBorderRadius: semantic.borderRadius.sm,
+  imageBorderRadius: semantic.borderRadius.md,
+  avatarBorderRadius: semantic.borderRadius.full,
+  duration: "1500ms",
+  bezier: "0.42, 0, 0.58, 1",
+  motion: "ease-in-out"
+});
+export default skeletonLoader;

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

@@ -88,10 +88,12 @@ import radioInput from "./components/radioInput.js";
 import rangeInput from "./components/rangeInput.js";
 import ratingIcon from "./components/ratingIcon.js";
 import rgbaInput from "./components/rgbaInput.js";
+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";
@@ -229,7 +231,9 @@ const theme = {
     Chart: chart,
     Card: card,
     Banner: banner,
-    MobileSharedTokens: mobileSharedTokens
+    MobileSharedTokens: mobileSharedTokens,
+    SkeletonLoader: skeletonLoader,
+    SegmentedControl: segmentedControl
   }
 };
 export default theme;

package/es/themes/newThemeTokens/legacyCanvas/semantics.js

@@ -372,6 +372,10 @@ const semantics = primitives => ({
         "warning": primitives.color.honey.honey20,
         "error": primitives.color.red.red20,
         "neutral": primitives.color.grey.grey20
+      },
+      "skeleton": {
+        "backgroundColor": primitives.color.grey.grey70,
+        "shimmerColor": primitives.color.grey.grey50
       }
     },
     "stroke": {