From 8bf69d85700343c079f8b835519dd3cc6a8c4e37 Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Tue, 21 Apr 2026 17:00:57 +0200 Subject: [PATCH 1/4] feat(lib): Add AI Button --- .../scss/tokens/_component.scss | 5 ++ packages/orange/scss/tokens/_component.scss | 5 ++ .../_component-colors-custom-props.scss | 2 + packages/sosh/scss/tokens/_component.scss | 5 ++ scss/_buttons.scss | 33 +++++++++ site/src/content/docs/components/buttons.mdx | 70 +++++++++++++++++++ .../[version]/assets/img/ouds-web-sprite.svg | 13 ++++ .../[version]/assets/img/ouds-web-sprite.svg | 13 ++++ .../[version]/assets/img/ouds-web-sprite.svg | 9 +++ 9 files changed, 155 insertions(+) diff --git a/packages/orange-compact/scss/tokens/_component.scss b/packages/orange-compact/scss/tokens/_component.scss index a853911be6..662b224c52 100644 --- a/packages/orange-compact/scss/tokens/_component.scss +++ b/packages/orange-compact/scss/tokens/_component.scss @@ -156,6 +156,11 @@ $ouds-button-space-padding-inline-end-icon-start: $ouds-space-padding-inline-3xl $ouds-button-space-padding-inline-icon-none: $ouds-space-padding-inline-4xlarge !default; $ouds-button-space-padding-inline-icon-start: $ouds-space-padding-inline-xlarge !default; $ouds-button-space-padding-inline-start-icon-end: $ouds-space-padding-inline-3xlarge !default; +// Manually added tokens for AI button +$ouds-button-color-border-primary: var(--#{$prefix}color-border-brand-primary) !default; +$ouds-button-color-border-secondary: $core-orange-color-decorative-shocking-pink-200 !default; +$ouds-button-color-border-tertiary: $core-orange-color-decorative-amethyst-400 !default; +$ouds-button-color-border-quaternary: $core-orange-color-decorative-sky-400 !default; // scss-docs-end ouds-component-button // Checkbox diff --git a/packages/orange/scss/tokens/_component.scss b/packages/orange/scss/tokens/_component.scss index 85e2d72648..bf294fcfdb 100644 --- a/packages/orange/scss/tokens/_component.scss +++ b/packages/orange/scss/tokens/_component.scss @@ -156,6 +156,11 @@ $ouds-button-space-padding-inline-end-icon-start: $ouds-space-padding-inline-3xl $ouds-button-space-padding-inline-icon-none: $ouds-space-padding-inline-4xlarge !default; $ouds-button-space-padding-inline-icon-start: $ouds-space-padding-inline-xlarge !default; $ouds-button-space-padding-inline-start-icon-end: $ouds-space-padding-inline-3xlarge !default; +// Manually added tokens for AI button +$ouds-button-color-border-primary: var(--#{$prefix}color-border-brand-primary) !default; +$ouds-button-color-border-secondary: $core-orange-color-decorative-shocking-pink-200 !default; +$ouds-button-color-border-tertiary: $core-orange-color-decorative-amethyst-400 !default; +$ouds-button-color-border-quaternary: $core-orange-color-decorative-sky-400 !default; // scss-docs-end ouds-component-button // Checkbox diff --git a/packages/sosh/scss/tokens/_component-colors-custom-props.scss b/packages/sosh/scss/tokens/_component-colors-custom-props.scss index aed916e409..0774bb18ef 100644 --- a/packages/sosh/scss/tokens/_component-colors-custom-props.scss +++ b/packages/sosh/scss/tokens/_component-colors-custom-props.scss @@ -8,6 +8,7 @@ @include color-mode(light, true) { --#{$prefix}button-color-bg-brand-pressed: #{$core-sosh-color-magenta-500}; --#{$prefix}button-color-bg-brand-loading: #{$core-sosh-color-magenta-500}; + --#{$prefix}button-color-border-quaternary: #{$core-ouds-color-opacity-black-680}; --#{$prefix}button-color-content-brand-pressed: #{$core-ouds-color-functional-white}; --#{$prefix}button-color-content-brand-loading: #{$core-ouds-color-functional-white}; --#{$prefix}button-mono-color-bg-default-hover: #{$core-ouds-color-opacity-black-680}; @@ -64,6 +65,7 @@ @include color-mode(dark, true) { --#{$prefix}button-color-bg-brand-pressed: #{$core-sosh-color-blue-duck-light-800}; --#{$prefix}button-color-bg-brand-loading: #{$core-sosh-color-blue-duck-light-800}; + --#{$prefix}button-color-border-quaternary: #{$core-ouds-color-opacity-white-200}; --#{$prefix}button-color-content-brand-pressed: #{$core-ouds-color-functional-black}; --#{$prefix}button-color-content-brand-loading: #{$core-ouds-color-functional-black}; --#{$prefix}button-mono-color-bg-default-hover: #{$core-ouds-color-opacity-white-800}; diff --git a/packages/sosh/scss/tokens/_component.scss b/packages/sosh/scss/tokens/_component.scss index 0359b5e73d..61ab8b8e33 100644 --- a/packages/sosh/scss/tokens/_component.scss +++ b/packages/sosh/scss/tokens/_component.scss @@ -156,6 +156,11 @@ $ouds-button-space-padding-inline-end-icon-start: $ouds-space-padding-inline-3xl $ouds-button-space-padding-inline-icon-none: $ouds-space-padding-inline-4xlarge !default; $ouds-button-space-padding-inline-icon-start: $ouds-space-padding-inline-xlarge !default; $ouds-button-space-padding-inline-start-icon-end: $ouds-space-padding-inline-3xlarge !default; +// Manually added tokens for AI button +$ouds-button-color-border-primary: var(--#{$prefix}color-border-brand-secondary) !default; +$ouds-button-color-border-secondary: var(--#{$prefix}color-border-brand-primary) !default; +$ouds-button-color-border-tertiary: var(--#{$prefix}color-border-brand-tertiary) !default; +$ouds-button-color-border-quaternary: var(--#{$prefix}button-color-border-quaternary) !default; // scss-docs-end ouds-component-button // Checkbox diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 35d3a02337..c01d6b20e9 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -529,3 +529,36 @@ background-color: currentcolor; } +// No transparency on the button +.btn-default.btn-ai:where(:not(:active, [class*="loading-"], :disabled, .btn-on-colored-bg)) { + background: linear-gradient(var(--#{$prefix}color-bg-primary)) padding-box, conic-gradient($ouds-button-color-border-secondary 0deg 78deg, $ouds-button-color-border-tertiary 78deg 118deg, $ouds-button-color-border-quaternary 118deg 242deg, $ouds-button-color-border-primary 242deg 360deg) border-box; + background-origin: border-box; + border-color: transparent; + + &.btn-icon { + background: linear-gradient(var(--#{$prefix}color-bg-primary)) padding-box, conic-gradient($ouds-button-color-border-secondary 0deg 72deg, $ouds-button-color-border-tertiary 72deg 144deg, $ouds-button-color-border-quaternary 144deg 216deg, $ouds-button-color-border-primary 216deg 360deg) border-box; + } +} + +.btn-ai { + &:has(.btn-ai-colored-icon) .btn-ai-icon { + display: none; + } + + &:hover, + &:focus, + &:focus-visible, + &:active { + .btn-ai-icon { + display: block; + } + + .btn-ai-colored-icon { + display: none; + } + } +} + +// No border-radius +// border-image-source: conic-gradient(#ff0 0deg 78deg, #00f 78deg 118deg, #0f0 118deg 242deg, #f15e00 216deg 360deg); +// border-image-slice: 1; diff --git a/site/src/content/docs/components/buttons.mdx b/site/src/content/docs/components/buttons.mdx index 7c3611f4a3..0739833505 100644 --- a/site/src/content/docs/components/buttons.mdx +++ b/site/src/content/docs/components/buttons.mdx @@ -7,6 +7,7 @@ toc: true types: - Button - Navigation button + - AI button --- import { getData } from '@libs/data' @@ -730,3 +731,72 @@ Please refer to the [loading state section of the button component](#loading) fo `} /> +## [[comp]] AI button + + + + Default + + + + + Strong + + + + Brand + + + + + Minimal + + + + Negative + + + + + + + + + + + + + + + + + + `} /> diff --git a/site/static/orange-compact/docs/[version]/assets/img/ouds-web-sprite.svg b/site/static/orange-compact/docs/[version]/assets/img/ouds-web-sprite.svg index 616b97958c..9eda17426b 100644 --- a/site/static/orange-compact/docs/[version]/assets/img/ouds-web-sprite.svg +++ b/site/static/orange-compact/docs/[version]/assets/img/ouds-web-sprite.svg @@ -177,4 +177,17 @@ + + + + + + + + + + + + + diff --git a/site/static/orange/docs/[version]/assets/img/ouds-web-sprite.svg b/site/static/orange/docs/[version]/assets/img/ouds-web-sprite.svg index 616b97958c..9eda17426b 100644 --- a/site/static/orange/docs/[version]/assets/img/ouds-web-sprite.svg +++ b/site/static/orange/docs/[version]/assets/img/ouds-web-sprite.svg @@ -177,4 +177,17 @@ + + + + + + + + + + + + + diff --git a/site/static/sosh/docs/[version]/assets/img/ouds-web-sprite.svg b/site/static/sosh/docs/[version]/assets/img/ouds-web-sprite.svg index f485900452..af98fe1378 100644 --- a/site/static/sosh/docs/[version]/assets/img/ouds-web-sprite.svg +++ b/site/static/sosh/docs/[version]/assets/img/ouds-web-sprite.svg @@ -158,4 +158,13 @@ + + + + + + + + + From 96c6664ac4cbe690e2a7826561721cabb3307a9f Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Wed, 22 Apr 2026 12:20:52 +0200 Subject: [PATCH 2/4] Update documentation --- .bundlewatch.config.json | 8 +- .../scss/tokens/_composite.scss | 2 + packages/orange/scss/tokens/_composite.scss | 2 + packages/sosh/scss/tokens/_composite.scss | 2 + scss/_buttons.scss | 41 ++-- site/data/components-details.ts | 7 + site/src/content/docs/components/buttons.mdx | 214 ++++++++++++++---- .../migration-from-boosted.mdx | 1 + .../docs/getting-started/migration.mdx | 8 + .../[version]/assets/img/ouds-web-sprite.svg | 4 - .../[version]/assets/img/ouds-web-sprite.svg | 4 - .../[version]/assets/img/ouds-web-sprite.svg | 5 - 12 files changed, 216 insertions(+), 82 deletions(-) diff --git a/.bundlewatch.config.json b/.bundlewatch.config.json index 21dd4812fc..2f9eac771d 100644 --- a/.bundlewatch.config.json +++ b/.bundlewatch.config.json @@ -2,11 +2,11 @@ "files": [ { "path": "./packages/orange/dist/css/ouds-web-bootstrap.css", - "maxSize": "75.75 kB" + "maxSize": "77 kB" }, { "path": "./packages/orange/dist/css/ouds-web-bootstrap.min.css", - "maxSize": "72.25 kB" + "maxSize": "73.25 kB" }, { "path": "./packages/orange/dist/css/ouds-web-grid.css", @@ -34,11 +34,11 @@ }, { "path": "./packages/orange/dist/css/ouds-web.css", - "maxSize": "65.5 kB" + "maxSize": "66 kB" }, { "path": "./packages/orange/dist/css/ouds-web.min.css", - "maxSize": "61.75 kB" + "maxSize": "62 kB" }, { "path": "./dist/js/ouds-web.bundle.js", diff --git a/packages/orange-compact/scss/tokens/_composite.scss b/packages/orange-compact/scss/tokens/_composite.scss index baf2b56ede..d38887b78c 100644 --- a/packages/orange-compact/scss/tokens/_composite.scss +++ b/packages/orange-compact/scss/tokens/_composite.scss @@ -117,6 +117,8 @@ $select-input-expanded-chevron: url("data:image/svg+xml,") !default; // icon button next v1.4 $btn-next-icon: url("data:image/svg+xml,") !default; +// icon button ai v1.5 +$btn-ai-icon: url("data:image/svg+xml,") !default; //// SVG used several times $svg-as-custom-props: ( diff --git a/packages/orange/scss/tokens/_composite.scss b/packages/orange/scss/tokens/_composite.scss index baf2b56ede..d38887b78c 100644 --- a/packages/orange/scss/tokens/_composite.scss +++ b/packages/orange/scss/tokens/_composite.scss @@ -117,6 +117,8 @@ $select-input-expanded-chevron: url("data:image/svg+xml,") !default; // icon button next v1.4 $btn-next-icon: url("data:image/svg+xml,") !default; +// icon button ai v1.5 +$btn-ai-icon: url("data:image/svg+xml,") !default; //// SVG used several times $svg-as-custom-props: ( diff --git a/packages/sosh/scss/tokens/_composite.scss b/packages/sosh/scss/tokens/_composite.scss index 5805dd981c..b205551f3b 100644 --- a/packages/sosh/scss/tokens/_composite.scss +++ b/packages/sosh/scss/tokens/_composite.scss @@ -108,6 +108,8 @@ $select-input-expanded-chevron: url("data:image/svg+xml,") !default; // icon button next v1.4 $btn-next-icon: url("data:image/svg+xml,") !default; +// icon button ai v1.5 +$btn-ai-icon: url("data:image/svg+xml,") !default; //// SVG used several times $svg-as-custom-props: ( diff --git a/scss/_buttons.scss b/scss/_buttons.scss index c01d6b20e9..e1c3be99ec 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -64,6 +64,7 @@ justify-content: center; // OUDS mod min-width: var(--#{$prefix}btn-min-width); // OUDS mod min-height: var(--#{$prefix}btn-min-height); // OUDS mod + gap: var(--#{$prefix}btn-icon-gap); padding: calc(var(--#{$prefix}btn-padding-y) - var(--#{$prefix}btn-border-width)) calc(var(--#{$prefix}btn-padding-end) - var(--#{$prefix}btn-border-width)) calc(var(--#{$prefix}btn-padding-y) - var(--#{$prefix}btn-border-width)) calc(var(--#{$prefix}btn-padding-start) - var(--#{$prefix}btn-border-width)); // OUDS mod: instead of `var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x)` // OUDS mod: no font-family @include get-font-size("label-large"); // OUDS mod @@ -189,7 +190,6 @@ flex-shrink: 0; width: 1em; height: 1em; - margin-right: var(--#{$prefix}btn-icon-gap); overflow: hidden; font-size: var(--#{$prefix}btn-icon-size); line-height: 1; @@ -502,10 +502,6 @@ content: ""; mask-image: $btn-previous-icon; } - - &:not(.btn-icon)::before { - margin-right: $ouds-button-space-column-gap-chevron; - } } .btn-next { @@ -516,10 +512,6 @@ content: ""; mask-image: $btn-next-icon; } - - &:not(.btn-icon)::after { - margin-left: $ouds-button-space-column-gap-chevron; - } } .btn-previous::before, @@ -541,22 +533,37 @@ } .btn-ai { - &:has(.btn-ai-colored-icon) .btn-ai-icon { - display: none; - } + --#{$prefix}btn-padding-start: #{$ouds-button-space-padding-inline-icon-start}; + --#{$prefix}btn-padding-end: #{$ouds-button-space-padding-inline-start-icon-end}; &:hover, &:focus, &:focus-visible, - &:active { - .btn-ai-icon { - display: block; - } - + &:active, + &:disabled { .btn-ai-colored-icon { display: none; } } + + &.btn-default, + &.btn-strong:where(:not(:has(.btn-ai-colored-icon))), + &.btn-brand, + &.btn-minimal:where(:not(:has(.btn-ai-colored-icon))), + &.btn-negative, + &:hover, + &:focus, + &:focus-visible, + &:active, + &:disabled { + &::before { + width: var(--#{$prefix}btn-icon-size); + height: var(--#{$prefix}btn-icon-size); + content: ""; + mask-image: $btn-ai-icon; + background-color: currentcolor; + } + } } // No border-radius diff --git a/site/data/components-details.ts b/site/data/components-details.ts index 8b547a8c28..cbbc4227d3 100644 --- a/site/data/components-details.ts +++ b/site/data/components-details.ts @@ -3,6 +3,13 @@ import { getConfig } from '@libs/config' import { getVersionedDocsPath } from '@libs/path' export const componentsDetails: ComponentCardData[] = [ + { + name: 'AI button', + slug: 'ai-button', + link: 'buttons#ai-button', + category: 'Actions', + snippet: `` + }, { name: 'Alert message', slug: 'alert-message', diff --git a/site/src/content/docs/components/buttons.mdx b/site/src/content/docs/components/buttons.mdx index 0739833505..1a3903f6a7 100644 --- a/site/src/content/docs/components/buttons.mdx +++ b/site/src/content/docs/components/buttons.mdx @@ -731,72 +731,190 @@ Please refer to the [loading state section of the button component](#loading) fo `} /> +#### Skeleton + + + + + + + `} /> + ## [[comp]] AI button - - + + The AI button component is not yet designed, and this component is only a draft for the moment. It will be updated in the future with the final design and will certainly need adjustments regarding the DOM. Use it as a temporary component to speed up your development. + + +AI button is a UI element that enables AI use in an interface. AI buttons are typically used to open a chatbot or trigger AI-powered actions. + +You can use `.btn-ai` class to indicate AI actions in a process or a flow. This class will add an icon to the right of the button text. As AI buttons generally indicate an AI-related action, in our examples, we have used ``} /> + +### Variants + +{/* TODO: Update link */} +OUDS Web includes several AI button variants, each serving its own semantic purpose. Please follow the [AI button design specifications](https://r.orange.fr/r/S-ouds-doc-button) to choose the right button variant for the right action. + + + + Be aware that `.btn-strong` and `.btn-minimal` variants should use a colored icon to indicate the AI action. It will be automatically replaced when not present or when needed. + +
+ See symbol to integrate + + + + + + + + + `} /> +
+ + + Default - - + + + + + `} /> + + + + + Default + + + + + `} /> + + +#### Icon only + +Add the class `.btn-icon` to get a squared button that only contains an icon. Make sure to provide an accessible name to your button, either using a `.visually-hidden` content or an `aria-label` attribute. + + + + Be aware that `.btn-strong` and `.btn-minimal` variants should use a colored icon to indicate the AI action. It will be automatically replaced when not present or when needed. + +
+ See symbol to integrate + + + + + + + + + `} /> +
+ + + + + + + `} /> + + + + + + + + `} /> + + + + #### Rounded corners + + Rounded corners AI buttons is a project-wide option therefore all your buttons should either be rounded or not. Add `.use-rounded-corner-buttons` on a top container (for example ``) to use rounded corners. + + + Rounded corners could be used in more emotional, immersive contexts or those tied to specific visual identities. **For standard or business-oriented usage, keep the default square corners.** + + + + We use a `
` as a parent container because we cannot use `` in an example. + + + + + +
`} /> + + +### States + +#### Disabled + +AI buttons use a ` + `} /> + +#### Loading + +The loading state of an AI button indicates that an action is currently processing or taking place. This state provides feedback to users, enhancing user experience. + +Please refer to the [loading state section of the button component](#loading) for guidelines on how to implement loading states, as well as a JavaScript example and a live demo. + + + Default + - `} /> + + `} /> + +#### Skeleton + + + + + + `} /> diff --git a/site/src/content/docs/getting-started/migration-from-boosted.mdx b/site/src/content/docs/getting-started/migration-from-boosted.mdx index a317ea36ef..62b9d71c88 100644 --- a/site/src/content/docs/getting-started/migration-from-boosted.mdx +++ b/site/src/content/docs/getting-started/migration-from-boosted.mdx @@ -134,6 +134,7 @@ All responsive classes, helpers, and utilities have been updated accordingly to - New `.btn-default`, `.btn-strong`, `.btn-brand`, `.btn-minimal`, and `.btn-negative` have been added. - New `.btn-previous` and `.btn-next` have been added. +- New `.btn-ai` has been added. - New `.btn-on-colored-bg` has been added; it can be used with `.btn-default`, `.btn-strong` and `.btn-minimal` to get variants on colored backgrounds (neither primary, nor secondary, nor tertiary, nor emphasized backgrounds). - New `.use-rounded-corner-buttons` have been added; it can be added on `` to toggle project-wide rounded corners buttons. - Breaking `.btn-primary`, `.btn-secondary`, `.btn-success`, `.btn-danger`, `.btn-warning`, `.btn-info`, `.btn-light`, `.btn-dark` and `btn-dropdown` have been removed. You can still have them using `$enable-bootstrap-compatibility`. Here is the visual correspondence: diff --git a/site/src/content/docs/getting-started/migration.mdx b/site/src/content/docs/getting-started/migration.mdx index 8c1cd4d3ae..059eb35940 100644 --- a/site/src/content/docs/getting-started/migration.mdx +++ b/site/src/content/docs/getting-started/migration.mdx @@ -9,6 +9,14 @@ aliases: toc: true --- +## v1.3.0 + +### Components + +#### AI button + +- New AI button has been implemented. Read more in our [buttons page]([[docsref:/components/buttons#ai-button]]). + ## v1.2.0
diff --git a/site/static/orange-compact/docs/[version]/assets/img/ouds-web-sprite.svg b/site/static/orange-compact/docs/[version]/assets/img/ouds-web-sprite.svg index 9eda17426b..2c64bde72a 100644 --- a/site/static/orange-compact/docs/[version]/assets/img/ouds-web-sprite.svg +++ b/site/static/orange-compact/docs/[version]/assets/img/ouds-web-sprite.svg @@ -177,10 +177,6 @@ - - - - diff --git a/site/static/orange/docs/[version]/assets/img/ouds-web-sprite.svg b/site/static/orange/docs/[version]/assets/img/ouds-web-sprite.svg index 9eda17426b..2c64bde72a 100644 --- a/site/static/orange/docs/[version]/assets/img/ouds-web-sprite.svg +++ b/site/static/orange/docs/[version]/assets/img/ouds-web-sprite.svg @@ -177,10 +177,6 @@ - - - - diff --git a/site/static/sosh/docs/[version]/assets/img/ouds-web-sprite.svg b/site/static/sosh/docs/[version]/assets/img/ouds-web-sprite.svg index af98fe1378..724cd50adf 100644 --- a/site/static/sosh/docs/[version]/assets/img/ouds-web-sprite.svg +++ b/site/static/sosh/docs/[version]/assets/img/ouds-web-sprite.svg @@ -158,11 +158,6 @@ - - - - - From 0188e0a1d0893f1c31b8141fc59bbeef0eb07726 Mon Sep 17 00:00:00 2001 From: Louis-Maxime Piton Date: Wed, 22 Apr 2026 12:50:33 +0200 Subject: [PATCH 3/4] fix copilot review --- packages/sosh/scss/tokens/_composite.scss | 2 +- scss/_buttons.scss | 24 +++++++++-------- site/src/content/docs/components/buttons.mdx | 28 +++++++++++++++++--- 3 files changed, 39 insertions(+), 15 deletions(-) diff --git a/packages/sosh/scss/tokens/_composite.scss b/packages/sosh/scss/tokens/_composite.scss index b205551f3b..2eee497b63 100644 --- a/packages/sosh/scss/tokens/_composite.scss +++ b/packages/sosh/scss/tokens/_composite.scss @@ -109,7 +109,7 @@ $btn-previous-icon: url("data:image/svg+xml,") !default; // icon button ai v1.5 -$btn-ai-icon: url("data:image/svg+xml,") !default; +$btn-ai-icon: url("data:image/svg+xml,") !default; //// SVG used several times $svg-as-custom-props: ( diff --git a/scss/_buttons.scss b/scss/_buttons.scss index e1c3be99ec..9217cc71f7 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -60,11 +60,11 @@ display: inline-flex; // OUDS mod: instead of `inline-block` flex-shrink: 0; + gap: var(--#{$prefix}btn-icon-gap); align-items: center; // OUDS mod justify-content: center; // OUDS mod min-width: var(--#{$prefix}btn-min-width); // OUDS mod min-height: var(--#{$prefix}btn-min-height); // OUDS mod - gap: var(--#{$prefix}btn-icon-gap); padding: calc(var(--#{$prefix}btn-padding-y) - var(--#{$prefix}btn-border-width)) calc(var(--#{$prefix}btn-padding-end) - var(--#{$prefix}btn-border-width)) calc(var(--#{$prefix}btn-padding-y) - var(--#{$prefix}btn-border-width)) calc(var(--#{$prefix}btn-padding-start) - var(--#{$prefix}btn-border-width)); // OUDS mod: instead of `var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x)` // OUDS mod: no font-family @include get-font-size("label-large"); // OUDS mod @@ -497,6 +497,7 @@ .btn-previous { --#{$prefix}btn-padding-start: #{$ouds-button-space-padding-inline-chevron-start}; --#{$prefix}btn-padding-end: #{$ouds-button-space-padding-inline-end-icon-start}; + --#{$prefix}btn-icon-gap: #{$ouds-button-space-column-gap-chevron}; &::before { content: ""; @@ -507,6 +508,7 @@ .btn-next { --#{$prefix}btn-padding-start: #{$ouds-button-space-padding-inline-start-icon-end}; --#{$prefix}btn-padding-end: #{$ouds-button-space-padding-inline-chevron-end}; + --#{$prefix}btn-icon-gap: #{$ouds-button-space-column-gap-chevron}; &::after { content: ""; @@ -522,13 +524,15 @@ } // No transparency on the button -.btn-default.btn-ai:where(:not(:active, [class*="loading-"], :disabled, .btn-on-colored-bg)) { - background: linear-gradient(var(--#{$prefix}color-bg-primary)) padding-box, conic-gradient($ouds-button-color-border-secondary 0deg 78deg, $ouds-button-color-border-tertiary 78deg 118deg, $ouds-button-color-border-quaternary 118deg 242deg, $ouds-button-color-border-primary 242deg 360deg) border-box; +.btn-default.btn-ai:where(:not(:active, [class*="loading-"], :disabled, [aria-disabled="true"], .btn-on-colored-bg)) { + --#{$prefix}btn-bg: initial; + + background: linear-gradient(var(--#{$prefix}btn-bg, var(--#{$prefix}color-bg-primary))) padding-box, conic-gradient($ouds-button-color-border-secondary 0deg 78deg, $ouds-button-color-border-tertiary 78deg 118deg, $ouds-button-color-border-quaternary 118deg 242deg, $ouds-button-color-border-primary 242deg 360deg) border-box; background-origin: border-box; border-color: transparent; &.btn-icon { - background: linear-gradient(var(--#{$prefix}color-bg-primary)) padding-box, conic-gradient($ouds-button-color-border-secondary 0deg 72deg, $ouds-button-color-border-tertiary 72deg 144deg, $ouds-button-color-border-quaternary 144deg 216deg, $ouds-button-color-border-primary 216deg 360deg) border-box; + background: linear-gradient(var(--#{$prefix}btn-bg, var(--#{$prefix}color-bg-primary))) padding-box, conic-gradient($ouds-button-color-border-secondary 0deg 72deg, $ouds-button-color-border-tertiary 72deg 144deg, $ouds-button-color-border-quaternary 144deg 216deg, $ouds-button-color-border-primary 216deg 360deg) border-box; } } @@ -540,7 +544,8 @@ &:focus, &:focus-visible, &:active, - &:disabled { + &:disabled, + &[aria-disabled="true"] { .btn-ai-colored-icon { display: none; } @@ -555,17 +560,14 @@ &:focus, &:focus-visible, &:active, - &:disabled { + &:disabled, + &[aria-disabled="true"] { &::before { width: var(--#{$prefix}btn-icon-size); height: var(--#{$prefix}btn-icon-size); content: ""; - mask-image: $btn-ai-icon; background-color: currentcolor; + mask-image: $btn-ai-icon; } } } - -// No border-radius -// border-image-source: conic-gradient(#ff0 0deg 78deg, #00f 78deg 118deg, #0f0 118deg 242deg, #f15e00 216deg 360deg); -// border-image-slice: 1; diff --git a/site/src/content/docs/components/buttons.mdx b/site/src/content/docs/components/buttons.mdx index 1a3903f6a7..8ecc4e9ef6 100644 --- a/site/src/content/docs/components/buttons.mdx +++ b/site/src/content/docs/components/buttons.mdx @@ -23,7 +23,7 @@ import { getMode } from '@libs/sass-variables' ### Component types -