@instructure/ui-themes 11.7.2-snapshot-54 → 11.7.2-snapshot-62

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.2-snapshot-54](https://github.com/instructure/instructure-ui/compare/v11.7.1...v11.7.2-snapshot-54) (2026-04-23)
+## [11.7.2-snapshot-62](https://github.com/instructure/instructure-ui/compare/v11.7.1...v11.7.2-snapshot-62) (2026-04-23)
 
 
 ### Bug Fixes
@@ -11,6 +11,12 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * **many:** small fixes for doc and fix component directory mapping in "dev" script ([39f0c99](https://github.com/instructure/instructure-ui/commit/39f0c991315e39d30e1f24b3142b986d5b9041ee))
 
 
+### Features
+
+* **many:** fix issues ([9d623ed](https://github.com/instructure/instructure-ui/commit/9d623ed9ba2be49549b625d1e436edc230a4df41))
+* **ui-themes,ui-alerts,emotion:** fix primitives and semantics overrides and add freeze functionlionality to old components ([336fde9](https://github.com/instructure/instructure-ui/commit/336fde9952698eda020db4916f276e8532ed1669))
+
+
 
 
 

package/es/index.js

@@ -25,8 +25,8 @@ import canvasHighContrast from "./themes/canvasHighContrast/index.js";
 import canvas from "./themes/canvas/index.js";
 import dark from "./themes/dark/index.js";
 import light from "./themes/light/index.js";
-import { primitives, additionalPrimitives } from "./sharedThemeTokens/colors/primitives.js";
-import dataVisualization from "./sharedThemeTokens/colors/dataVisualization.js";
+import { primitives, additionalPrimitives } from "./legacySharedThemeTokens/colors/primitives.js";
+import dataVisualization from "./legacySharedThemeTokens/colors/dataVisualization.js";
 import { boxShadowObjectsToCSSString } from "./utils/boxShadowObjectToString.js";
 export { dark, light, canvas, canvasHighContrast, primitives, additionalPrimitives, dataVisualization, boxShadowObjectsToCSSString };
 export default canvas;

package/es/themes/canvas/colors.js

@@ -21,8 +21,8 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { primitives, additionalPrimitives } from "../../sharedThemeTokens/colors/primitives.js";
-import dataVisualization from "../../sharedThemeTokens/colors/dataVisualization.js";
+import { primitives, additionalPrimitives } from "../../legacySharedThemeTokens/colors/primitives.js";
+import dataVisualization from "../../legacySharedThemeTokens/colors/dataVisualization.js";
 import getUIColors from "../../utils/getUIColors.js";
 const contrasts = {
   white1010: primitives.white,

package/es/themes/canvas/index.js

@@ -22,9 +22,9 @@ var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import sharedThemeTokens from "../../sharedThemeTokens/index.js";
+import legacySharedThemeTokens from "../../legacySharedThemeTokens/index.js";
 import { colors } from "./colors.js";
-import { legacyCanvas as canvas } from "../newThemes/index.js";
+import { legacyCanvas as canvas } from "../newThemeTokens/index.js";
 const key = 'canvas';
 const brandVariables = {
   /* Defaults for Canvas account branding variables: */
@@ -57,7 +57,9 @@ const theme = {
   newTheme: canvas,
   key,
   description: 'This theme meets WCAG 2.1 AA rules for color contrast.',
-  ...sharedThemeTokens,
+  // This is needed so 11.6 component don't break when using this theme.
+  // They will default to the 'canvas' theme
+  ...legacySharedThemeTokens,
   colors,
   ...brandVariables
 };

package/es/themes/canvasHighContrast/colors.js

@@ -21,8 +21,8 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import { primitives, additionalPrimitives } from "../../sharedThemeTokens/colors/primitives.js";
-import dataVisualization from "../../sharedThemeTokens/colors/dataVisualization.js";
+import { primitives, additionalPrimitives } from "../../legacySharedThemeTokens/colors/primitives.js";
+import dataVisualization from "../../legacySharedThemeTokens/colors/dataVisualization.js";
 import getUIColors from "../../utils/getUIColors.js";
 const contrasts = {
   white1010: primitives.white,

package/es/themes/canvasHighContrast/index.js

@@ -21,9 +21,9 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import sharedThemeTokens from "../../sharedThemeTokens/index.js";
+import legacySharedThemeTokens from "../../legacySharedThemeTokens/index.js";
 import { colors } from "./colors.js";
-import { legacyCanvasHighContrast as newCanvasHighContrast } from "../newThemes/index.js";
+import { legacyCanvasHighContrast as newCanvasHighContrast } from "../newThemeTokens/index.js";
 const key = 'canvas-high-contrast';
 /**
  * Canvas high contrast theme without the `use` function and `variables` prop.
@@ -35,7 +35,9 @@ const theme = {
   newTheme: newCanvasHighContrast,
   key,
   description: 'This theme meets WCAG 2.1 AAA rules for color contrast.',
-  ...sharedThemeTokens,
+  // This is needed so 11.6 component don't break when using this theme.
+  // They will default to the 'canvas' theme
+  ...legacySharedThemeTokens,
   colors
 };
 export default theme;

package/es/themes/dark/index.js

@@ -21,15 +21,17 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import sharedThemeTokens from "../../sharedThemeTokens/index.js";
-import { colors } from "./colors.js";
-import { dark } from "../newThemes/index.js";
+import legacySharedThemeTokens from "../../legacySharedThemeTokens/index.js";
+import { colors } from "../canvas/colors.js";
+import { dark } from "../newThemeTokens/index.js";
 const key = 'dark';
 const theme = {
   newTheme: dark,
   key,
-  description: 'Only usable with v11.7 or newer components! This theme meets WCAG 2.1 AA rules for color contrast.',
-  ...sharedThemeTokens,
+  description: 'Pre v11_7 components will fall back to the canvas theme! This theme meets WCAG 2.1 AA rules for color contrast.',
+  // This is needed so 11.6 component don't break when using this theme.
+  // They will default to the 'canvas' theme
+  ...legacySharedThemeTokens,
   colors
 };
 export default theme;

package/es/themes/light/index.js

@@ -21,15 +21,17 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import sharedThemeTokens from "../../sharedThemeTokens/index.js";
-import { colors } from "./colors.js";
-import { light } from "../newThemes/index.js";
+import legacySharedThemeTokens from "../../legacySharedThemeTokens/index.js";
+import { colors } from "../canvas/colors.js";
+import { light } from "../newThemeTokens/index.js";
 const key = 'light';
 const theme = {
   newTheme: light,
   key,
-  description: 'Only usable with v11.7 or newer components! This theme meets WCAG 2.1 AA rules for color contrast.',
-  ...sharedThemeTokens,
+  description: 'Pre v11_7 components will fall back to the canvas theme! This theme meets WCAG 2.1 AA rules for color contrast.',
+  // This is needed so 11.6 component don't break when using this theme.
+  // They will default to the 'canvas' theme
+  ...legacySharedThemeTokens,
   colors
 };
 export default theme;

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

@@ -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.
+ */
+
+const aiInformation = semantics => ({
+  bodyPadding: semantics.spacing.spaceXl,
+  headingBottomMargin: semantics.spacing.spaceXl,
+  featureNameBottomMargin: semantics.spacing.spaceLg,
+  permissionLevelTextBottomMargin: semantics.spacing.spaceSm,
+  permissionLevelBottomMargin: semantics.spacing.spaceSm,
+  descriptionBottomMargin: semantics.spacing.spaceSm,
+  modelNameTextBottomMargin: semantics.spacing.spaceXs,
+  modelNameBottomMargin: semantics.spacing.spaceXs,
+  dividerMargin: semantics.spacing.spaceLg,
+  dividerColor: semantics.color.stroke.muted,
+  levelColor: semantics.color.text.aiColor,
+  permissionLevelsModalTriggerBottomMargin: semantics.spacing.spaceXl
+});
+export default aiInformation;

package/es/themes/newThemeTokens/dark/components/alert.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 alert = semantics => ({
+  background: semantics.color.background.elevatedSurface.base,
+  borderRadius: semantics.borderRadius.lg,
+  borderStyle: "solid",
+  borderWidth: semantics.borderWidth.md,
+  closeButtonMarginRight: "0.5rem",
+  closeButtonMarginTop: "0.5rem",
+  color: semantics.color.text.base,
+  contentFontFamily: semantics.fontFamily.base,
+  contentFontSize: semantics.fontSize.textBase,
+  contentFontWeight: semantics.fontWeight.body.base,
+  contentLineHeight: semantics.lineHeight.standalone.base,
+  dangerBorderColor: semantics.color.stroke.error,
+  dangerIconBackground: semantics.color.background.error,
+  iconColor: semantics.color.icon.onColor,
+  infoBorderColor: semantics.color.stroke.info,
+  infoIconBackground: semantics.color.background.info,
+  successBorderColor: semantics.color.stroke.success,
+  successIconBackground: semantics.color.background.success,
+  warningBorderColor: semantics.color.stroke.warning,
+  warningIconBackground: semantics.color.background.warning,
+  contentPaddingVertical: semantics.spacing.spaceMd,
+  contentPaddingHorizontal: semantics.spacing.spaceXl
+});
+export default alert;

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

@@ -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.
+ */
+
+const appNav = semantics => ({
+  borderColor: semantics.color.stroke.muted,
+  borderStyle: "solid",
+  borderWidth: semantics.borderWidth.sm,
+  fontFamily: semantics.fontFamily.base,
+  height: "3.75rem",
+  horizontalMargin: "0.375rem",
+  menuTriggerWidth: "7.5rem"
+});
+export default appNav;

package/es/themes/newThemeTokens/dark/components/appNavItem.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 appNavItem = semantics => ({
+  fontFamily: semantics.fontFamily.base,
+  backgroundColor: semantics.color.background.elevatedSurface.base,
+  fontWeight: semantics.fontWeight.body.strong,
+  height: "2.25rem",
+  padding: semantics.spacing.padding.container.xs,
+  textColor: semantics.color.text.accent.blue,
+  textColorSelected: semantics.color.text.accent.ash,
+  fontSize: "1.125rem"
+});
+export default appNavItem;

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

@@ -0,0 +1,71 @@
+/*
+ * 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 avatar = semantics => ({
+  backgroundColor: semantics.color.background.base,
+  borderColor: semantics.color.stroke.base,
+  borderWidthSm: semantics.borderWidth.sm,
+  borderWidthMd: semantics.borderWidth.md,
+  boxShadow: {
+    x: 0,
+    y: 0,
+    blur: "1rem",
+    spread: 0,
+    color: "rgba(45,59,69,0.12)",
+    type: "innerShadow"
+  },
+  fontWeight: semantics.fontWeight.heading.base,
+  blueBackgroundColor: semantics.color.background.accent.blue,
+  blueTextColor: semantics.color.text.accent.blue,
+  greenBackgroundColor: semantics.color.background.accent.green,
+  greenTextColor: semantics.color.text.accent.green,
+  redBackgroundColor: semantics.color.background.accent.red,
+  redTextColor: semantics.color.text.accent.red,
+  orangeBackgroundColor: semantics.color.background.accent.orange,
+  orangeTextColor: semantics.color.text.accent.orange,
+  greyBackgroundColor: semantics.color.background.accent.grey,
+  greyTextColor: semantics.color.text.accent.grey,
+  ashBackgroundColor: semantics.color.background.accent.ash,
+  ashTextColor: semantics.color.text.accent.ash,
+  aiBottomGradientColor: semantics.color.background.aiBottomGradient,
+  aiTopGradientColor: semantics.color.background.aiTopGradient,
+  textOnColor: semantics.color.text.onColor,
+  size2xs: "1.5rem",
+  sizeXs: "2rem",
+  sizeSm: "2.5rem",
+  sizeMd: "3rem",
+  sizeLg: "3.5rem",
+  sizeXl: "4rem",
+  size2xl: "5rem",
+  fontSize2xs: semantics.fontSize.textXs,
+  fontSizeXs: semantics.fontSize.textXs,
+  fontSizeSm: semantics.fontSize.textSm,
+  fontSizeMd: semantics.fontSize.textBase,
+  fontSizeLg: semantics.fontSize.textLg,
+  fontSizeXl: semantics.fontSize.textXl,
+  fontSize2xl: semantics.fontSize.text2xl,
+  fontFamily: semantics.fontFamily.base,
+  rectangleRadius: semantics.borderRadius.sm
+});
+export default avatar;

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

@@ -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.
+ */
+
+const badge = semantics => ({
+  borderRadius: semantics.borderRadius.full,
+  fontFamily: semantics.fontFamily.base,
+  color: semantics.color.text.onColor,
+  colorInverse: semantics.color.text.dark,
+  colorDanger: semantics.color.background.error,
+  colorSuccess: semantics.color.background.success,
+  colorPrimary: semantics.color.background.info,
+  fontSize: semantics.fontSize.textSm,
+  fontWeight: semantics.fontWeight.body.strong,
+  sizeNotification: "0.75rem",
+  size: "1.25rem",
+  padding: semantics.spacing.spaceXs,
+  notificationOffset: "0.125rem",
+  notificationZIndex: 1,
+  pulseBorderThickness: "0.125rem",
+  countOffset: "0.5rem"
+});
+export default badge;

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

@@ -0,0 +1,209 @@
+/*
+ * 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 baseButton = semantics => ({
+  primaryActiveBackground: semantics.color.background.interactive.action.primary.active,
+  primaryActiveBorderColor: semantics.color.stroke.interactive.action.primary.active,
+  primaryActiveTextColor: semantics.color.text.interactive.action.primary.active,
+  primaryBackground: semantics.color.background.interactive.action.primary.base,
+  primaryBorderColor: semantics.color.stroke.interactive.action.primary.base,
+  primaryColor: semantics.color.text.interactive.action.primary.base,
+  primaryDisabledBackgroundColor: semantics.color.background.interactive.action.primary.disabled,
+  primaryDisabledBorderColor: semantics.color.stroke.interactive.action.primary.disabled,
+  primaryDisabledTextColor: semantics.color.text.interactive.action.primary.disabled,
+  primaryGhostActiveBackground: semantics.color.background.interactive.action.tertiary.active,
+  primaryGhostBorderColor: semantics.color.stroke.interactive.action.tertiary.base,
+  primaryGhostColor: semantics.color.text.interactive.action.tertiary.base,
+  primaryGhostHoverBackground: semantics.color.background.interactive.action.tertiary.hover,
+  primaryHoverBackground: semantics.color.background.interactive.action.primary.hover,
+  primaryHoverBorderColor: semantics.color.stroke.interactive.action.primary.hover,
+  primaryHoverTextColor: semantics.color.text.interactive.action.primary.hover,
+  primaryInverseActiveBackground: semantics.color.background.interactive.action.primaryOnColor.active,
+  primaryInverseBackground: semantics.color.background.interactive.action.primaryOnColor.base,
+  primaryInverseBorderColor: semantics.color.stroke.interactive.action.primaryOnColor.base,
+  primaryInverseColor: semantics.color.text.interactive.action.primaryOnColor.base,
+  primaryInverseGhostActiveBackground: semantics.color.background.interactive.action.ghost.onColor.hover,
+  primaryInverseGhostBorderColor: semantics.color.stroke.interactive.action.secondaryOnColor.base,
+  primaryInverseGhostColor: semantics.color.text.interactive.action.secondaryOnColor.base,
+  primaryInverseGhostHoverBackground: semantics.color.background.interactive.action.ghost.onColor.hover,
+  primaryInverseHoverBackground: semantics.color.background.interactive.action.primaryOnColor.hover,
+  primaryOnColorActiveBorderColor: semantics.color.stroke.interactive.action.primaryOnColor.active,
+  primaryOnColorActiveTextColor: semantics.color.text.interactive.action.primaryOnColor.active,
+  primaryOnColorDisabledBackgroundColor: semantics.color.background.interactive.action.primaryOnColor.disabled,
+  primaryOnColorDisabledBorderColor: semantics.color.stroke.interactive.action.primaryOnColor.disabled,
+  primaryOnColorDisabledTextColor: semantics.color.text.interactive.action.primaryOnColor.disabled,
+  primaryOnColorHoverBorderColor: semantics.color.stroke.interactive.action.primaryOnColor.hover,
+  primaryOnColorHoverTextColor: semantics.color.text.interactive.action.primaryOnColor.hover,
+  secondaryActiveBackground: semantics.color.background.interactive.action.secondary.active,
+  secondaryActiveBorderColor: semantics.color.stroke.interactive.action.secondary.active,
+  secondaryActiveTextColor: semantics.color.text.interactive.action.secondary.active,
+  secondaryBackground: semantics.color.background.interactive.action.secondary.base,
+  secondaryBorderColor: semantics.color.stroke.interactive.action.secondary.base,
+  secondaryColor: semantics.color.text.interactive.action.secondary.base,
+  secondaryDisabledBackgroundColor: semantics.color.background.interactive.action.secondary.disabled,
+  secondaryDisabledBorderColor: semantics.color.stroke.interactive.action.secondary.disabled,
+  secondaryDisabledTextColor: semantics.color.text.interactive.action.secondary.disabled,
+  secondaryGhostBorderColor: semantics.color.stroke.interactive.action.secondary.base,
+  secondaryGhostColor: semantics.color.text.interactive.action.secondary.base,
+  secondaryGhostHoverBackground: semantics.color.background.interactive.action.secondary.hover,
+  secondaryHoverBackground: semantics.color.background.interactive.action.secondary.hover,
+  secondaryHoverBorderColor: semantics.color.stroke.interactive.action.secondary.hover,
+  secondaryHoverTextColor: semantics.color.text.interactive.action.secondary.hover,
+  secondaryOnColorActiveBorderColor: semantics.color.stroke.interactive.action.secondaryOnColor.active,
+  secondaryOnColorActiveTextColor: semantics.color.text.interactive.action.secondaryOnColor.active,
+  secondaryOnColorDisabledBorderColor: semantics.color.stroke.interactive.action.secondaryOnColor.disabled,
+  secondaryOnColorDisabledTextColor: semantics.color.text.interactive.action.secondaryOnColor.disabled,
+  secondaryOnColorHoverBorderColor: semantics.color.stroke.interactive.action.secondaryOnColor.hover,
+  secondaryOnColorHoverTextColor: semantics.color.text.interactive.action.secondaryOnColor.hover,
+  successActiveBackground: semantics.color.background.interactive.action.success.active,
+  successActiveBorderColor: semantics.color.stroke.interactive.action.success.active,
+  successActiveTextColor: semantics.color.text.interactive.action.status.active,
+  successBackground: semantics.color.background.interactive.action.success.base,
+  successBorderColor: semantics.color.stroke.interactive.action.success.base,
+  successColor: semantics.color.text.interactive.action.status.base,
+  successDisabledBackgroundColor: semantics.color.background.interactive.action.success.disabled,
+  successDisabledBorderColor: semantics.color.stroke.interactive.action.success.disabled,
+  successDisabledTextColor: semantics.color.text.interactive.action.status.disabled,
+  successGhostActiveBackground: semantics.color.background.interactive.action.success.secondary.active,
+  successGhostBorderColor: semantics.color.stroke.interactive.action.success.secondary.base,
+  successGhostColor: semantics.color.text.interactive.action.successSecondary.base,
+  successGhostHoverBackground: semantics.color.background.interactive.action.success.secondary.hover,
+  successHoverBackground: semantics.color.background.interactive.action.success.hover,
+  successHoverBorderColor: semantics.color.stroke.interactive.action.success.hover,
+  successHoverTextColor: semantics.color.text.interactive.action.status.hover,
+  successSecondaryActiveBorderColor: semantics.color.stroke.interactive.action.success.secondary.active,
+  successSecondaryActiveTextColor: semantics.color.text.interactive.action.successSecondary.active,
+  successSecondaryDisabledBorderColor: semantics.color.stroke.interactive.action.success.secondary.disabled,
+  successSecondaryDisabledTextColor: semantics.color.text.interactive.action.successSecondary.disabled,
+  successSecondaryHoverBorderColor: semantics.color.stroke.interactive.action.success.secondary.hover,
+  successSecondaryHoverTextColor: semantics.color.text.interactive.action.successSecondary.hover,
+  dangerActiveBackground: semantics.color.background.interactive.action.destructive.active,
+  dangerBorderColor: semantics.color.stroke.interactive.action.destructive.base,
+  dangerGhostActiveBackground: semantics.color.background.interactive.action.destructive.secondary.active,
+  dangerGhostBorderColor: semantics.color.stroke.interactive.action.destructive.secondary.base,
+  dangerGhostColor: semantics.color.text.interactive.action.destructiveSecondary.base,
+  dangerGhostHoverBackground: semantics.color.background.interactive.action.destructive.secondary.hover,
+  dangerHoverBackground: semantics.color.background.interactive.action.destructive.hover,
+  destructiveActiveBorderColor: semantics.color.stroke.interactive.action.destructive.active,
+  destructiveActiveTextColor: semantics.color.text.interactive.action.status.active,
+  dangerBackground: semantics.color.background.interactive.action.destructive.base,
+  dangerColor: semantics.color.text.interactive.action.status.base,
+  destructiveDisabledBackgroundColor: semantics.color.background.interactive.action.destructive.disabled,
+  destructiveDisabledBorderColor: semantics.color.stroke.interactive.action.destructive.disabled,
+  destructiveDisabledTextColor: semantics.color.text.interactive.action.status.disabled,
+  destructiveHoverBorderColor: semantics.color.stroke.interactive.action.destructive.hover,
+  destructiveHoverTextColor: semantics.color.text.interactive.action.status.hover,
+  destructiveSecondaryActiveBorderColor: semantics.color.stroke.interactive.action.destructive.secondary.active,
+  destructiveSecondaryActiveTextColor: semantics.color.text.interactive.action.destructiveSecondary.active,
+  destructiveSecondaryDisabledBorderColor: semantics.color.stroke.interactive.action.destructive.secondary.disabled,
+  destructiveSecondaryDisabledTextColor: semantics.color.text.interactive.action.destructiveSecondary.disabled,
+  destructiveSecondaryHoverBorderColor: semantics.color.stroke.interactive.action.destructive.secondary.hover,
+  destructiveSecondaryHoverTextColor: semantics.color.text.interactive.action.destructiveSecondary.hover,
+  aiActiveBackgroundBottomGradientColor: semantics.color.background.interactive.action.ai.bottomGradient.active,
+  aiActiveBackgroundTopGradientColor: semantics.color.background.interactive.action.ai.topGradient.active,
+  aiActiveBorderBottomGradientColor: semantics.color.stroke.interactive.action.ai.bottomGradient.active,
+  aiActiveBorderTopGradientColor: semantics.color.stroke.interactive.action.ai.topGradient.active,
+  aiActiveTextColor: semantics.color.text.interactive.action.ai.active,
+  aiBackgroundBottomGradientColor: semantics.color.background.interactive.action.ai.bottomGradient.base,
+  aiBackgroundTopGradientColor: semantics.color.background.interactive.action.ai.topGradient.base,
+  aiBaseTextColor: semantics.color.text.interactive.action.ai.base,
+  aiBorderBottomGradientColor: semantics.color.stroke.interactive.action.ai.bottomGradient.base,
+  aiBorderTopGradientColor: semantics.color.stroke.interactive.action.ai.topGradient.base,
+  aiDisabledBackgroundColor: semantics.color.background.interactive.action.ai.disabled,
+  aiDisabledBorderColor: semantics.color.stroke.interactive.action.ai.disabled,
+  aiDisabledTextColor: semantics.color.text.interactive.action.ai.disabled,
+  aiHoverBackgroundBottomGradientColor: semantics.color.background.interactive.action.ai.bottomGradient.hover,
+  aiHoverBackgroundTopGradientColor: semantics.color.background.interactive.action.ai.topGradient.hover,
+  aiHoverBorderBottomGradientColor: semantics.color.stroke.interactive.action.ai.bottomGradient.hover,
+  aiHoverBorderTopGradientColor: semantics.color.stroke.interactive.action.ai.topGradient.hover,
+  aiHoverTextColor: semantics.color.text.interactive.action.ai.hover,
+  aiSecondaryActiveBackgroundBottomGradientColor: semantics.color.background.interactive.action.aiSecondary.active.bottomGradient,
+  aiSecondaryActiveBackgroundTopGradientColor: semantics.color.background.interactive.action.aiSecondary.active.topGradient,
+  aiSecondaryDisabledBorderColor: semantics.color.stroke.interactive.action.aiSecondary.disabled,
+  aiSecondaryDisabledTextColor: semantics.color.text.interactive.action.aiSecondary.disabled,
+  aiSecondaryHoverBackgroundBottomGradientColor: semantics.color.background.interactive.action.aiSecondary.hover.bottomGradient,
+  aiSecondaryHoverBackgroundTopGradientColor: semantics.color.background.interactive.action.aiSecondary.hover.topGradient,
+  aiSecondaryTextBottomGradientColor: semantics.color.text.interactive.action.aiSecondary.bottomGradient.base,
+  aiSecondaryTextTopGradientColor: semantics.color.text.interactive.action.aiSecondary.topGradient.base,
+  smallFontSize: semantics.fontSize.textSm,
+  mediumFontSize: semantics.fontSize.textBase,
+  largeFontSize: "1.125rem",
+  largeHeight: semantics.size.interactive.height.lg,
+  largePaddingHorizontal: semantics.spacing.padding.interactive.horizontal.xl,
+  mediumHeight: semantics.size.interactive.height.md,
+  mediumPaddingHorizontal: semantics.spacing.padding.interactive.horizontal.lg,
+  smallHeight: semantics.size.interactive.height.sm,
+  smallPaddingHorizontal: semantics.spacing.padding.interactive.horizontal.md,
+  borderRadius: semantics.borderRadius.interactive.base,
+  borderRadiusFull: semantics.borderRadius.full,
+  borderRadiusSm: semantics.borderRadius.sm,
+  borderWidth: semantics.borderWidth.interactive.base,
+  fontFamily: semantics.fontFamily.base,
+  fontWeight: semantics.fontWeight.body.strong,
+  gapButtonContentLg: semantics.spacing.spaceMd,
+  gapButtonContentMd: semantics.spacing.spaceSm,
+  gapButtonContentSm: semantics.spacing.spaceXs,
+  heightXs: semantics.size.interactive.height.xs,
+  heightXxs: semantics.size.interactive.height.xxs,
+  opacityBase: semantics.opacity.base,
+  opacityDisabled: semantics.opacity.base,
+  tertiaryActiveBorderColor: semantics.color.stroke.interactive.action.tertiary.active,
+  tertiaryActiveTextColor: semantics.color.text.interactive.action.tertiary.active,
+  tertiaryDisabledBorderColor: semantics.color.stroke.interactive.action.tertiary.disabled,
+  tertiaryDisabledTextColor: semantics.color.text.interactive.action.tertiary.disabled,
+  tertiaryHoverBorderColor: semantics.color.stroke.interactive.action.tertiary.hover,
+  tertiaryHoverTextColor: semantics.color.text.interactive.action.tertiary.hover,
+  dangerBoxShadow: "none",
+  dangerGhostBackground: "transparent",
+  dangerGhostBoxShadow: "none",
+  dangerGhostHoverBoxShadow: "none",
+  dangerHoverBoxShadow: "none",
+  hoverTransform: "none",
+  letterSpacing: "normal",
+  primaryBoxShadow: "none",
+  primaryGhostBackground: "transparent",
+  primaryHoverBoxShadow: "none",
+  primaryInverseBoxShadow: "none",
+  primaryInverseGhostBackground: "transparent",
+  primaryInverseGhostBoxShadow: "none",
+  primaryInverseGhostHoverBoxShadow: "none",
+  primaryInverseHoverBoxShadow: "none",
+  secondaryBoxShadow: "none",
+  secondaryGhostActiveBackground: "transparent",
+  secondaryGhostBackground: "transparent",
+  secondaryGhostBoxShadow: "none",
+  secondaryGhostHoverBoxShadow: "none",
+  secondaryHoverBoxShadow: "none",
+  successBoxShadow: "none",
+  successGhostBackground: "transparent",
+  successGhostBoxShadow: "none",
+  successGhostHoverBoxShadow: "none",
+  successHoverBoxShadow: "none",
+  textTransform: "none",
+  transform: "none",
+  borderStyle: "solid",
+  paddingVertical: "0.25rem",
+  lineHeight: semantics.lineHeight.standalone.base
+});
+export default baseButton;