@instructure/ui-buttons 10.16.5-snapshot-3 → 10.16.5-snapshot-4

package/CHANGELOG.md

@@ -3,9 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [10.16.5-snapshot-3](https://github.com/instructure/instructure-ui/compare/v10.16.4...v10.16.5-snapshot-3) (2025-05-16)
+## [10.16.5-snapshot-4](https://github.com/instructure/instructure-ui/compare/v10.16.4...v10.16.5-snapshot-4) (2025-05-16)
 
-**Note:** Version bump only for package @instructure/ui-buttons
+
+### Features
+
+* **ui-buttons,shared-types:** add ai-primary and ai-secondary colors to buttons ([47868fc](https://github.com/instructure/instructure-ui/commit/47868fc9fe552c0389183c4e19ae25825fe4bc7d))
 
 
 

package/es/BaseButton/props.js

@@ -30,7 +30,7 @@ const propTypes = {
   elementRef: PropTypes.func,
   as: PropTypes.elementType,
   interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
-  color: PropTypes.oneOf(['primary', 'primary-inverse', 'secondary', 'success', 'danger']),
+  color: PropTypes.oneOf(['primary', 'primary-inverse', 'secondary', 'success', 'danger', 'ai-primary', 'ai-secondary']),
   focusColor: PropTypes.oneOf(['info', 'inverse']),
   display: PropTypes.oneOf(['inline-block', 'block']),
   textAlign: PropTypes.oneOf(['start', 'center']),

package/es/BaseButton/styles.js

@@ -22,6 +22,8 @@
  * SOFTWARE.
  */
 
+import { darken, lighten } from '@instructure/ui-color-utils';
+
 /**
  * ---
  * private: true
@@ -111,6 +113,56 @@ const generateStyle = (componentTheme, props, state) => {
     }
   };
   const colorVariants = {
+    'ai-primary': {
+      default: {
+        color: componentTheme.primaryColor,
+        background: `
+        linear-gradient(165deg,  ${componentTheme.aiBackgroundTopGradientColor} -20.97%, ${componentTheme.aiBackgroundBottomGradientColor} 141.21%) padding-box,
+        linear-gradient(125deg, ${componentTheme.aiBorderTopGradientColor} 0%, ${componentTheme.aiBorderBottomGradientColor} 141.21%) border-box`,
+        border: 'solid transparent',
+        boxShadow: componentTheme.primaryBoxShadow
+      },
+      active: {
+        background: `
+          linear-gradient(165deg,  ${darken(componentTheme.aiBackgroundTopGradientColor, 10)} -20.97%, ${darken(componentTheme.aiBackgroundBottomGradientColor, 10)} 141.21%) padding-box,
+          linear-gradient(125deg, ${darken(componentTheme.aiBorderTopGradientColor, 10)} 0%, ${darken(componentTheme.aiBorderBottomGradientColor, 10)} 141.21%) border-box`,
+        border: 'solid transparent',
+        boxShadow: componentTheme.aiActiveBoxShadow
+      },
+      hover: {
+        background: `
+          linear-gradient(165deg, ${darken(componentTheme.aiBackgroundTopGradientColor, 10)} -20.97%, ${darken(componentTheme.aiBackgroundBottomGradientColor, 10)} 141.21%) padding-box,
+  linear-gradient(125deg, ${darken(componentTheme.aiBorderTopGradientColor, 10)} 0%, ${darken(componentTheme.aiBorderBottomGradientColor, 10)} 141.21%) border-box`,
+        border: 'solid transparent',
+        boxShadow: componentTheme.primaryHoverBoxShadow
+      }
+    },
+    'ai-secondary': {
+      default: {
+        background: `
+        linear-gradient(to bottom, ${componentTheme.aiBorderTopGradientColor} 0%, ${componentTheme.aiBorderBottomGradientColor} 100%) text,
+        linear-gradient(white) padding-box,
+        linear-gradient(to bottom, ${componentTheme.aiBorderTopGradientColor} -40%, ${componentTheme.aiBorderBottomGradientColor} 140%) border-box`,
+        border: 'solid transparent',
+        boxShadow: componentTheme.primaryBoxShadow,
+        WebkitTextFillColor: 'transparent'
+      },
+      active: {
+        background: `
+        linear-gradient(165deg,  ${darken(componentTheme.aiBackgroundTopGradientColor, 10)} -20.97%, ${darken(componentTheme.aiBackgroundBottomGradientColor, 10)} 141.21%) padding-box,
+    linear-gradient(125deg, ${darken(componentTheme.aiBorderTopGradientColor, 10)} 0%, ${darken(componentTheme.aiBorderBottomGradientColor, 10)} 141.21%) border-box`,
+        border: 'solid transparent',
+        boxShadow: componentTheme.aiActiveBoxShadow
+      },
+      hover: {
+        background: `
+        linear-gradient(to bottom, ${componentTheme.aiBorderTopGradientColor} 0%, ${componentTheme.aiBorderBottomGradientColor} 100%) text,
+        linear-gradient(165deg, ${lighten(componentTheme.aiBackgroundTopGradientColor, 70)} -20.97%, ${lighten(componentTheme.aiBackgroundBottomGradientColor, 70)} 141.21%) padding-box,
+       linear-gradient(to bottom, ${componentTheme.aiBorderTopGradientColor} -40%, ${componentTheme.aiBorderBottomGradientColor} 140%) border-box`,
+        border: 'solid transparent',
+        boxShadow: componentTheme.primaryHoverBoxShadow
+      }
+    },
     primary: withBackground ? {
       default: {
         color: componentTheme.primaryColor,

package/es/BaseButton/theme.js

@@ -31,7 +31,7 @@ const activeShadow = 'inset 0 0 0.1875rem 0.0625rem';
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts10, _colors$contrasts11, _colors$contrasts12, _colors$contrasts13, _colors$contrasts14, _colors$contrasts15, _colors$contrasts16, _colors$contrasts17, _colors$contrasts18, _colors$contrasts19, _colors$contrasts20, _colors$contrasts21, _colors$contrasts22, _colors$contrasts23, _colors$contrasts24, _colors$contrasts25, _colors$contrasts26, _colors$contrasts27, _colors$contrasts28, _colors$contrasts29, _colors$contrasts30, _colors$contrasts31, _colors$contrasts32, _colors$contrasts33, _colors$contrasts34, _colors$contrasts35, _colors$contrasts36, _colors$contrasts37, _colors$contrasts38, _colors$contrasts39, _colors$contrasts40, _colors$contrasts41, _colors$contrasts42, _colors$contrasts43, _colors$contrasts44, _colors$contrasts45, _colors$contrasts46, _colors$contrasts47, _colors$contrasts48, _colors$contrasts49, _colors$contrasts50;
+  var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts10, _colors$contrasts11, _colors$contrasts12, _colors$contrasts13, _colors$contrasts14, _colors$contrasts15, _colors$contrasts16, _colors$contrasts17, _colors$contrasts18, _colors$contrasts19, _colors$contrasts20, _colors$contrasts21, _colors$contrasts22, _colors$contrasts23, _colors$contrasts24, _colors$contrasts25, _colors$contrasts26, _colors$contrasts27, _colors$contrasts28, _colors$contrasts29, _colors$contrasts30, _colors$contrasts31, _colors$contrasts32, _colors$contrasts33, _colors$contrasts34, _colors$contrasts35, _colors$contrasts36, _colors$contrasts37, _colors$contrasts38, _colors$contrasts39, _colors$contrasts40, _colors$contrasts41, _colors$contrasts42, _colors$contrasts43, _colors$contrasts44, _colors$contrasts45, _colors$contrasts46, _colors$contrasts47, _colors$contrasts48, _colors$contrasts49, _colors$contrasts50, _colors$contrasts51, _colors$contrasts52, _colors$contrasts53, _colors$contrasts54;
   const borders = theme.borders,
     colors = theme.colors,
     forms = theme.forms,
@@ -164,7 +164,12 @@ const generateComponentTheme = theme => {
     primaryInverseBoxShadow: 'none',
     primaryInverseGhostBoxShadow: 'none',
     primaryInverseHoverBoxShadow: 'none',
-    primaryInverseGhostHoverBoxShadow: 'none'
+    primaryInverseGhostHoverBoxShadow: 'none',
+    aiBackgroundTopGradientColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts51 = colors.contrasts) === null || _colors$contrasts51 === void 0 ? void 0 : _colors$contrasts51.violet4570,
+    aiBackgroundBottomGradientColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts52 = colors.contrasts) === null || _colors$contrasts52 === void 0 ? void 0 : _colors$contrasts52.sea4570,
+    aiBorderTopGradientColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts53 = colors.contrasts) === null || _colors$contrasts53 === void 0 ? void 0 : _colors$contrasts53.violet5790,
+    aiBorderBottomGradientColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts54 = colors.contrasts) === null || _colors$contrasts54 === void 0 ? void 0 : _colors$contrasts54.sea5790,
+    aiActiveBoxShadow: '0px 0px 5px 0px #013451 inset'
   };
   return {
     ...componentVariables,

package/es/Button/props.js

@@ -30,7 +30,7 @@ const propTypes = {
   elementRef: PropTypes.func,
   as: PropTypes.elementType,
   interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
-  color: PropTypes.oneOf(['primary', 'primary-inverse', 'secondary', 'success', 'danger']),
+  color: PropTypes.oneOf(['primary', 'primary-inverse', 'secondary', 'success', 'danger', 'ai-primary', 'ai-secondary']),
   focusColor: PropTypes.oneOf(['info', 'inverse']),
   display: PropTypes.oneOf(['inline-block', 'block']),
   textAlign: PropTypes.oneOf(['start', 'center']),

package/es/IconButton/props.js

@@ -32,7 +32,7 @@ const propTypes = {
   elementRef: PropTypes.func,
   as: PropTypes.elementType,
   interaction: PropTypes.oneOf(['enabled', 'disabled', 'readonly']),
-  color: PropTypes.oneOf(['primary', 'primary-inverse', 'secondary', 'success', 'danger']),
+  color: PropTypes.oneOf(['primary', 'primary-inverse', 'secondary', 'success', 'danger', 'ai-primary', 'ai-secondary']),
   focusColor: PropTypes.oneOf(['info', 'inverse']),
   shape: PropTypes.oneOf(['rectangle', 'circle']),
   withBackground: PropTypes.bool,

package/lib/BaseButton/props.js

@@ -37,7 +37,7 @@ const propTypes = exports.propTypes = {
   elementRef: _propTypes.default.func,
   as: _propTypes.default.elementType,
   interaction: _propTypes.default.oneOf(['enabled', 'disabled', 'readonly']),
-  color: _propTypes.default.oneOf(['primary', 'primary-inverse', 'secondary', 'success', 'danger']),
+  color: _propTypes.default.oneOf(['primary', 'primary-inverse', 'secondary', 'success', 'danger', 'ai-primary', 'ai-secondary']),
   focusColor: _propTypes.default.oneOf(['info', 'inverse']),
   display: _propTypes.default.oneOf(['inline-block', 'block']),
   textAlign: _propTypes.default.oneOf(['start', 'center']),

package/lib/BaseButton/styles.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _darken = require("@instructure/ui-color-utils/lib/darken.js");
+var _lighten = require("@instructure/ui-color-utils/lib/lighten.js");
 /*
  * The MIT License (MIT)
  *
@@ -117,6 +119,56 @@ const generateStyle = (componentTheme, props, state) => {
     }
   };
   const colorVariants = {
+    'ai-primary': {
+      default: {
+        color: componentTheme.primaryColor,
+        background: `
+        linear-gradient(165deg,  ${componentTheme.aiBackgroundTopGradientColor} -20.97%, ${componentTheme.aiBackgroundBottomGradientColor} 141.21%) padding-box,
+        linear-gradient(125deg, ${componentTheme.aiBorderTopGradientColor} 0%, ${componentTheme.aiBorderBottomGradientColor} 141.21%) border-box`,
+        border: 'solid transparent',
+        boxShadow: componentTheme.primaryBoxShadow
+      },
+      active: {
+        background: `
+          linear-gradient(165deg,  ${(0, _darken.darken)(componentTheme.aiBackgroundTopGradientColor, 10)} -20.97%, ${(0, _darken.darken)(componentTheme.aiBackgroundBottomGradientColor, 10)} 141.21%) padding-box,
+          linear-gradient(125deg, ${(0, _darken.darken)(componentTheme.aiBorderTopGradientColor, 10)} 0%, ${(0, _darken.darken)(componentTheme.aiBorderBottomGradientColor, 10)} 141.21%) border-box`,
+        border: 'solid transparent',
+        boxShadow: componentTheme.aiActiveBoxShadow
+      },
+      hover: {
+        background: `
+          linear-gradient(165deg, ${(0, _darken.darken)(componentTheme.aiBackgroundTopGradientColor, 10)} -20.97%, ${(0, _darken.darken)(componentTheme.aiBackgroundBottomGradientColor, 10)} 141.21%) padding-box,
+  linear-gradient(125deg, ${(0, _darken.darken)(componentTheme.aiBorderTopGradientColor, 10)} 0%, ${(0, _darken.darken)(componentTheme.aiBorderBottomGradientColor, 10)} 141.21%) border-box`,
+        border: 'solid transparent',
+        boxShadow: componentTheme.primaryHoverBoxShadow
+      }
+    },
+    'ai-secondary': {
+      default: {
+        background: `
+        linear-gradient(to bottom, ${componentTheme.aiBorderTopGradientColor} 0%, ${componentTheme.aiBorderBottomGradientColor} 100%) text,
+        linear-gradient(white) padding-box,
+        linear-gradient(to bottom, ${componentTheme.aiBorderTopGradientColor} -40%, ${componentTheme.aiBorderBottomGradientColor} 140%) border-box`,
+        border: 'solid transparent',
+        boxShadow: componentTheme.primaryBoxShadow,
+        WebkitTextFillColor: 'transparent'
+      },
+      active: {
+        background: `
+        linear-gradient(165deg,  ${(0, _darken.darken)(componentTheme.aiBackgroundTopGradientColor, 10)} -20.97%, ${(0, _darken.darken)(componentTheme.aiBackgroundBottomGradientColor, 10)} 141.21%) padding-box,
+    linear-gradient(125deg, ${(0, _darken.darken)(componentTheme.aiBorderTopGradientColor, 10)} 0%, ${(0, _darken.darken)(componentTheme.aiBorderBottomGradientColor, 10)} 141.21%) border-box`,
+        border: 'solid transparent',
+        boxShadow: componentTheme.aiActiveBoxShadow
+      },
+      hover: {
+        background: `
+        linear-gradient(to bottom, ${componentTheme.aiBorderTopGradientColor} 0%, ${componentTheme.aiBorderBottomGradientColor} 100%) text,
+        linear-gradient(165deg, ${(0, _lighten.lighten)(componentTheme.aiBackgroundTopGradientColor, 70)} -20.97%, ${(0, _lighten.lighten)(componentTheme.aiBackgroundBottomGradientColor, 70)} 141.21%) padding-box,
+       linear-gradient(to bottom, ${componentTheme.aiBorderTopGradientColor} -40%, ${componentTheme.aiBorderBottomGradientColor} 140%) border-box`,
+        border: 'solid transparent',
+        boxShadow: componentTheme.primaryHoverBoxShadow
+      }
+    },
     primary: withBackground ? {
       default: {
         color: componentTheme.primaryColor,

package/lib/BaseButton/theme.js

@@ -38,7 +38,7 @@ const activeShadow = 'inset 0 0 0.1875rem 0.0625rem';
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = theme => {
-  var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts10, _colors$contrasts11, _colors$contrasts12, _colors$contrasts13, _colors$contrasts14, _colors$contrasts15, _colors$contrasts16, _colors$contrasts17, _colors$contrasts18, _colors$contrasts19, _colors$contrasts20, _colors$contrasts21, _colors$contrasts22, _colors$contrasts23, _colors$contrasts24, _colors$contrasts25, _colors$contrasts26, _colors$contrasts27, _colors$contrasts28, _colors$contrasts29, _colors$contrasts30, _colors$contrasts31, _colors$contrasts32, _colors$contrasts33, _colors$contrasts34, _colors$contrasts35, _colors$contrasts36, _colors$contrasts37, _colors$contrasts38, _colors$contrasts39, _colors$contrasts40, _colors$contrasts41, _colors$contrasts42, _colors$contrasts43, _colors$contrasts44, _colors$contrasts45, _colors$contrasts46, _colors$contrasts47, _colors$contrasts48, _colors$contrasts49, _colors$contrasts50;
+  var _colors$contrasts, _colors$contrasts2, _colors$contrasts3, _colors$contrasts4, _colors$contrasts5, _colors$contrasts6, _colors$contrasts7, _colors$contrasts8, _colors$contrasts9, _colors$contrasts10, _colors$contrasts11, _colors$contrasts12, _colors$contrasts13, _colors$contrasts14, _colors$contrasts15, _colors$contrasts16, _colors$contrasts17, _colors$contrasts18, _colors$contrasts19, _colors$contrasts20, _colors$contrasts21, _colors$contrasts22, _colors$contrasts23, _colors$contrasts24, _colors$contrasts25, _colors$contrasts26, _colors$contrasts27, _colors$contrasts28, _colors$contrasts29, _colors$contrasts30, _colors$contrasts31, _colors$contrasts32, _colors$contrasts33, _colors$contrasts34, _colors$contrasts35, _colors$contrasts36, _colors$contrasts37, _colors$contrasts38, _colors$contrasts39, _colors$contrasts40, _colors$contrasts41, _colors$contrasts42, _colors$contrasts43, _colors$contrasts44, _colors$contrasts45, _colors$contrasts46, _colors$contrasts47, _colors$contrasts48, _colors$contrasts49, _colors$contrasts50, _colors$contrasts51, _colors$contrasts52, _colors$contrasts53, _colors$contrasts54;
   const borders = theme.borders,
     colors = theme.colors,
     forms = theme.forms,
@@ -171,7 +171,12 @@ const generateComponentTheme = theme => {
     primaryInverseBoxShadow: 'none',
     primaryInverseGhostBoxShadow: 'none',
     primaryInverseHoverBoxShadow: 'none',
-    primaryInverseGhostHoverBoxShadow: 'none'
+    primaryInverseGhostHoverBoxShadow: 'none',
+    aiBackgroundTopGradientColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts51 = colors.contrasts) === null || _colors$contrasts51 === void 0 ? void 0 : _colors$contrasts51.violet4570,
+    aiBackgroundBottomGradientColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts52 = colors.contrasts) === null || _colors$contrasts52 === void 0 ? void 0 : _colors$contrasts52.sea4570,
+    aiBorderTopGradientColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts53 = colors.contrasts) === null || _colors$contrasts53 === void 0 ? void 0 : _colors$contrasts53.violet5790,
+    aiBorderBottomGradientColor: colors === null || colors === void 0 ? void 0 : (_colors$contrasts54 = colors.contrasts) === null || _colors$contrasts54 === void 0 ? void 0 : _colors$contrasts54.sea5790,
+    aiActiveBoxShadow: '0px 0px 5px 0px #013451 inset'
   };
   return {
     ...componentVariables,

package/lib/Button/props.js

@@ -37,7 +37,7 @@ const propTypes = exports.propTypes = {
   elementRef: _propTypes.default.func,
   as: _propTypes.default.elementType,
   interaction: _propTypes.default.oneOf(['enabled', 'disabled', 'readonly']),
-  color: _propTypes.default.oneOf(['primary', 'primary-inverse', 'secondary', 'success', 'danger']),
+  color: _propTypes.default.oneOf(['primary', 'primary-inverse', 'secondary', 'success', 'danger', 'ai-primary', 'ai-secondary']),
   focusColor: _propTypes.default.oneOf(['info', 'inverse']),
   display: _propTypes.default.oneOf(['inline-block', 'block']),
   textAlign: _propTypes.default.oneOf(['start', 'center']),

package/lib/IconButton/props.js

@@ -39,7 +39,7 @@ const propTypes = exports.propTypes = {
   elementRef: _propTypes.default.func,
   as: _propTypes.default.elementType,
   interaction: _propTypes.default.oneOf(['enabled', 'disabled', 'readonly']),
-  color: _propTypes.default.oneOf(['primary', 'primary-inverse', 'secondary', 'success', 'danger']),
+  color: _propTypes.default.oneOf(['primary', 'primary-inverse', 'secondary', 'success', 'danger', 'ai-primary', 'ai-secondary']),
   focusColor: _propTypes.default.oneOf(['info', 'inverse']),
   shape: _propTypes.default.oneOf(['rectangle', 'circle']),
   withBackground: _propTypes.default.bool,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-buttons",
-  "version": "10.16.5-snapshot-3",
+  "version": "10.16.5-snapshot-4",
   "description": "Accessible button components",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,10 +23,10 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-axe-check": "10.16.5-snapshot-3",
-    "@instructure/ui-babel-preset": "10.16.5-snapshot-3",
-    "@instructure/ui-test-utils": "10.16.5-snapshot-3",
-    "@instructure/ui-themes": "10.16.5-snapshot-3",
+    "@instructure/ui-axe-check": "10.16.5-snapshot-4",
+    "@instructure/ui-babel-preset": "10.16.5-snapshot-4",
+    "@instructure/ui-test-utils": "10.16.5-snapshot-4",
+    "@instructure/ui-themes": "10.16.5-snapshot-4",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
@@ -34,21 +34,21 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.26.0",
-    "@instructure/console": "10.16.5-snapshot-3",
-    "@instructure/emotion": "10.16.5-snapshot-3",
-    "@instructure/shared-types": "10.16.5-snapshot-3",
-    "@instructure/ui-a11y-content": "10.16.5-snapshot-3",
-    "@instructure/ui-a11y-utils": "10.16.5-snapshot-3",
-    "@instructure/ui-color-utils": "10.16.5-snapshot-3",
-    "@instructure/ui-dom-utils": "10.16.5-snapshot-3",
-    "@instructure/ui-icons": "10.16.5-snapshot-3",
-    "@instructure/ui-position": "10.16.5-snapshot-3",
-    "@instructure/ui-prop-types": "10.16.5-snapshot-3",
-    "@instructure/ui-react-utils": "10.16.5-snapshot-3",
-    "@instructure/ui-testable": "10.16.5-snapshot-3",
-    "@instructure/ui-tooltip": "10.16.5-snapshot-3",
-    "@instructure/ui-utils": "10.16.5-snapshot-3",
-    "@instructure/ui-view": "10.16.5-snapshot-3",
+    "@instructure/console": "10.16.5-snapshot-4",
+    "@instructure/emotion": "10.16.5-snapshot-4",
+    "@instructure/shared-types": "10.16.5-snapshot-4",
+    "@instructure/ui-a11y-content": "10.16.5-snapshot-4",
+    "@instructure/ui-a11y-utils": "10.16.5-snapshot-4",
+    "@instructure/ui-color-utils": "10.16.5-snapshot-4",
+    "@instructure/ui-dom-utils": "10.16.5-snapshot-4",
+    "@instructure/ui-icons": "10.16.5-snapshot-4",
+    "@instructure/ui-position": "10.16.5-snapshot-4",
+    "@instructure/ui-prop-types": "10.16.5-snapshot-4",
+    "@instructure/ui-react-utils": "10.16.5-snapshot-4",
+    "@instructure/ui-testable": "10.16.5-snapshot-4",
+    "@instructure/ui-tooltip": "10.16.5-snapshot-4",
+    "@instructure/ui-utils": "10.16.5-snapshot-4",
+    "@instructure/ui-view": "10.16.5-snapshot-4",
     "keycode": "^2",
     "prop-types": "^15.8.1"
   },

package/src/BaseButton/props.ts

@@ -76,7 +76,14 @@ type BaseButtonOwnProps = {
   /**
    * Specifies the color for the `Button`.
    */
-  color?: 'primary' | 'primary-inverse' | 'secondary' | 'success' | 'danger'
+  color?:
+    | 'primary'
+    | 'primary-inverse'
+    | 'secondary'
+    | 'success'
+    | 'danger'
+    | 'ai-primary'
+    | 'ai-secondary'
 
   /**
    * Override the `Button`'s default focus outline color.
@@ -194,7 +201,9 @@ const propTypes: PropValidators<PropKeys> = {
     'primary-inverse',
     'secondary',
     'success',
-    'danger'
+    'danger',
+    'ai-primary',
+    'ai-secondary'
   ]),
   focusColor: PropTypes.oneOf(['info', 'inverse']),
   display: PropTypes.oneOf(['inline-block', 'block']),

package/src/BaseButton/styles.ts

@@ -29,6 +29,8 @@ import type {
   BaseButtonStyle
 } from './props'
 
+import { darken, lighten } from '@instructure/ui-color-utils'
+
 /**
  * ---
  * private: true
@@ -131,6 +133,102 @@ const generateStyle = (
   }
 
   const colorVariants = {
+    'ai-primary': {
+      default: {
+        color: componentTheme.primaryColor,
+        background: `
+        linear-gradient(165deg,  ${componentTheme.aiBackgroundTopGradientColor} -20.97%, ${componentTheme.aiBackgroundBottomGradientColor} 141.21%) padding-box,
+        linear-gradient(125deg, ${componentTheme.aiBorderTopGradientColor} 0%, ${componentTheme.aiBorderBottomGradientColor} 141.21%) border-box`,
+        border: 'solid transparent',
+        boxShadow: componentTheme.primaryBoxShadow
+      },
+      active: {
+        background: `
+          linear-gradient(165deg,  ${darken(
+            componentTheme.aiBackgroundTopGradientColor,
+            10
+          )} -20.97%, ${darken(
+          componentTheme.aiBackgroundBottomGradientColor,
+          10
+        )} 141.21%) padding-box,
+          linear-gradient(125deg, ${darken(
+            componentTheme.aiBorderTopGradientColor,
+            10
+          )} 0%, ${darken(
+          componentTheme.aiBorderBottomGradientColor,
+          10
+        )} 141.21%) border-box`,
+        border: 'solid transparent',
+        boxShadow: componentTheme.aiActiveBoxShadow
+      },
+      hover: {
+        background: `
+          linear-gradient(165deg, ${darken(
+            componentTheme.aiBackgroundTopGradientColor,
+            10
+          )} -20.97%, ${darken(
+          componentTheme.aiBackgroundBottomGradientColor,
+          10
+        )} 141.21%) padding-box,
+  linear-gradient(125deg, ${darken(
+    componentTheme.aiBorderTopGradientColor,
+    10
+  )} 0%, ${darken(
+          componentTheme.aiBorderBottomGradientColor,
+          10
+        )} 141.21%) border-box`,
+        border: 'solid transparent',
+        boxShadow: componentTheme.primaryHoverBoxShadow
+      }
+    },
+    'ai-secondary': {
+      default: {
+        background: `
+        linear-gradient(to bottom, ${componentTheme.aiBorderTopGradientColor} 0%, ${componentTheme.aiBorderBottomGradientColor} 100%) text,
+        linear-gradient(white) padding-box,
+        linear-gradient(to bottom, ${componentTheme.aiBorderTopGradientColor} -40%, ${componentTheme.aiBorderBottomGradientColor} 140%) border-box`,
+        border: 'solid transparent',
+        boxShadow: componentTheme.primaryBoxShadow,
+        WebkitTextFillColor: 'transparent'
+      },
+      active: {
+        background: `
+        linear-gradient(165deg,  ${darken(
+          componentTheme.aiBackgroundTopGradientColor,
+          10
+        )} -20.97%, ${darken(
+          componentTheme.aiBackgroundBottomGradientColor,
+          10
+        )} 141.21%) padding-box,
+    linear-gradient(125deg, ${darken(
+      componentTheme.aiBorderTopGradientColor,
+      10
+    )} 0%, ${darken(
+          componentTheme.aiBorderBottomGradientColor,
+          10
+        )} 141.21%) border-box`,
+        border: 'solid transparent',
+        boxShadow: componentTheme.aiActiveBoxShadow
+      },
+      hover: {
+        background: `
+        linear-gradient(to bottom, ${
+          componentTheme.aiBorderTopGradientColor
+        } 0%, ${componentTheme.aiBorderBottomGradientColor} 100%) text,
+        linear-gradient(165deg, ${lighten(
+          componentTheme.aiBackgroundTopGradientColor,
+          70
+        )} -20.97%, ${lighten(
+          componentTheme.aiBackgroundBottomGradientColor,
+          70
+        )} 141.21%) padding-box,
+       linear-gradient(to bottom, ${
+         componentTheme.aiBorderTopGradientColor
+       } -40%, ${componentTheme.aiBorderBottomGradientColor} 140%) border-box`,
+        border: 'solid transparent',
+        boxShadow: componentTheme.primaryHoverBoxShadow
+      }
+    },
     primary: withBackground
       ? {
           default: {

package/src/BaseButton/theme.ts

@@ -196,7 +196,13 @@ const generateComponentTheme = (theme: Theme): BaseButtonTheme => {
     primaryInverseBoxShadow: 'none',
     primaryInverseGhostBoxShadow: 'none',
     primaryInverseHoverBoxShadow: 'none',
-    primaryInverseGhostHoverBoxShadow: 'none'
+    primaryInverseGhostHoverBoxShadow: 'none',
+
+    aiBackgroundTopGradientColor: colors?.contrasts?.violet4570,
+    aiBackgroundBottomGradientColor: colors?.contrasts?.sea4570,
+    aiBorderTopGradientColor: colors?.contrasts?.violet5790,
+    aiBorderBottomGradientColor: colors?.contrasts?.sea5790,
+    aiActiveBoxShadow: '0px 0px 5px 0px #013451 inset'
   }
 
   return {

package/src/Button/README.md

@@ -25,6 +25,24 @@ type: example
   <Button color="success" margin="small">Success</Button>
   <Button color="danger" margin="small">Danger</Button>
   <Button color="primary-inverse" margin="small">Primary Inverse</Button>
+  <Button color="ai-primary" margin="small">AI Primary</Button>
+  <Button color="ai-secondary" margin="small">AI Secondary</Button>
+</View>
+```
+
+### AI buttons
+
+There is a specific need for `AI buttons`, which has an icon and gradient colors for `background` and `borders`. Here are the preset examples you can use. (the `IconButton` examples are also included for convenience)
+
+```js
+---
+type: example
+---
+<View display="block">
+  <Button color="ai-primary" renderIcon={IconAiSolid} margin="small">AI Primary</Button>
+  <Button color="ai-secondary" renderIcon={IconAiColoredSolid} margin="small">AI Secondary</Button>
+  <IconButton color="ai-primary" screenReaderLabel="AI button" margin="small"><IconAiSolid/></IconButton>
+  <IconButton color="ai-secondary" screenReaderLabel="AI button"  margin="small"><IconAiColoredSolid/></IconButton>
 </View>
 ```
 

package/src/Button/props.ts

@@ -70,7 +70,14 @@ type ButtonOwnProps = {
   /**
    * Specifies the color for the `Button`.
    */
-  color?: 'primary' | 'primary-inverse' | 'secondary' | 'success' | 'danger'
+  color?:
+    | 'primary'
+    | 'primary-inverse'
+    | 'secondary'
+    | 'success'
+    | 'danger'
+    | 'ai-primary'
+    | 'ai-secondary'
 
   /**
    * Override the `Button`'s default focus outline color.
@@ -145,7 +152,9 @@ const propTypes: PropValidators<PropKeys> = {
     'primary-inverse',
     'secondary',
     'success',
-    'danger'
+    'danger',
+    'ai-primary',
+    'ai-secondary'
   ]),
   focusColor: PropTypes.oneOf(['info', 'inverse']),
   display: PropTypes.oneOf(['inline-block', 'block']),

package/src/IconButton/README.md

@@ -38,6 +38,18 @@ type: example
 </Tooltip>
 ```
 
+### AI Icon buttons
+
+```js
+---
+type: example
+---
+<View display="block">
+  <IconButton color="ai-primary" screenReaderLabel="AI button" margin="small"><IconAiSolid/></IconButton>
+  <IconButton color="ai-secondary" screenReaderLabel="AI button"  margin="small"><IconAiColoredSolid/></IconButton>
+</View>
+```
+
 ### Shaping
 
 The `shape` prop specifies if the IconButton will render as a `rectangle` or `circle`.

package/src/IconButton/props.ts

@@ -81,7 +81,14 @@ type IconButtonOwnProps = {
   /**
    * Specifies the color for the `IconButton`.
    */
-  color?: 'primary' | 'primary-inverse' | 'secondary' | 'success' | 'danger'
+  color?:
+    | 'primary'
+    | 'primary-inverse'
+    | 'secondary'
+    | 'success'
+    | 'danger'
+    | 'ai-primary'
+    | 'ai-secondary'
 
   /**
    * Override the `Button`'s default focus outline color.
@@ -152,7 +159,9 @@ const propTypes: PropValidators<PropKeys> = {
     'primary-inverse',
     'secondary',
     'success',
-    'danger'
+    'danger',
+    'ai-primary',
+    'ai-secondary'
   ]),
   focusColor: PropTypes.oneOf(['info', 'inverse']),
   shape: PropTypes.oneOf(['rectangle', 'circle']),