From 2a2344982c1ebd922defc93c446da9922a417e8e Mon Sep 17 00:00:00 2001 From: Edwin Collazos Date: Wed, 22 Jul 2026 12:02:19 -0400 Subject: [PATCH 01/12] Creates the _generateButtonBaseStyles to wrapp button base css styles --- components/button/button-styles.js | 32 +++++++++++++++++++++++++++++- 1 file changed, 31 insertions(+), 1 deletion(-) diff --git a/components/button/button-styles.js b/components/button/button-styles.js index 331a246fb37..b8b3f360bd0 100644 --- a/components/button/button-styles.js +++ b/components/button/button-styles.js @@ -1,7 +1,37 @@ import '../colors/colors.js'; -import { css } from 'lit'; +import { css, unsafeCSS } from 'lit'; +import { _isValidCssSelector } from '../../helpers/internal/css.js'; import { getFocusRingStyles } from '../../helpers/focus.js'; +function _generateButtonBaseStyles(selector) { + if (!_isValidCssSelector(selector)) return unsafeCSS(''); + selector = unsafeCSS(selector.trim()); + + return css` + ${selector} { + border-end-end-radius: var(--d2l-button-end-end-radius, 0.3rem); + border-end-start-radius: var(--d2l-button-end-start-radius, 0.3rem); + border-start-end-radius: var(--d2l-button-start-end-radius, 0.3rem); + border-start-start-radius: var(--d2l-button-start-start-radius, 0.3rem); + border-style: none; + box-sizing: border-box; + cursor: pointer; + display: inline-block; + margin: 0; + min-height: calc(2rem + 2px); + outline: none; + text-align: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + vertical-align: middle; + white-space: nowrap; + width: auto; + } + `; +} + export const buttonStyles = css` button { border-end-end-radius: var(--d2l-button-end-end-radius, 0.3rem); From 6f95cd52ae7c47cd22aa52150cfc1a3d17961a86 Mon Sep 17 00:00:00 2001 From: Edwin Collazos Date: Wed, 22 Jul 2026 12:06:08 -0400 Subject: [PATCH 02/12] Replaces hardcoded styles by a call to the _generateButtonBaseStyles function --- components/button/button-styles.js | 22 +--------------------- 1 file changed, 1 insertion(+), 21 deletions(-) diff --git a/components/button/button-styles.js b/components/button/button-styles.js index b8b3f360bd0..2dc3dd1684b 100644 --- a/components/button/button-styles.js +++ b/components/button/button-styles.js @@ -33,27 +33,7 @@ function _generateButtonBaseStyles(selector) { } export const buttonStyles = css` - button { - border-end-end-radius: var(--d2l-button-end-end-radius, 0.3rem); - border-end-start-radius: var(--d2l-button-end-start-radius, 0.3rem); - border-start-end-radius: var(--d2l-button-start-end-radius, 0.3rem); - border-start-start-radius: var(--d2l-button-start-start-radius, 0.3rem); - border-style: none; - box-sizing: border-box; - cursor: pointer; - display: inline-block; - margin: 0; - min-height: calc(2rem + 2px); - outline: none; - text-align: center; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - vertical-align: middle; - white-space: nowrap; - width: auto; - } + ${_generateButtonBaseStyles('button')} ${getFocusRingStyles('button')} @media (prefers-contrast: more) { button { From 65c7403bbaa26400017e718a41c6d57c7969c284 Mon Sep 17 00:00:00 2001 From: Edwin Collazos Date: Wed, 22 Jul 2026 12:17:10 -0400 Subject: [PATCH 03/12] Merges media query into the getFocusRingStyles() --- components/button/button-styles.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/components/button/button-styles.js b/components/button/button-styles.js index 2dc3dd1684b..a48bf4fa500 100644 --- a/components/button/button-styles.js +++ b/components/button/button-styles.js @@ -34,10 +34,5 @@ function _generateButtonBaseStyles(selector) { export const buttonStyles = css` ${_generateButtonBaseStyles('button')} - ${getFocusRingStyles('button')} - @media (prefers-contrast: more) { - button { - border: 2px solid transparent; - } - } + ${getFocusRingStyles('button', { preferContrastMediaQueryExtraStyles: css`border: 2px solid transparent;` })} `; From d4e7589addc73949a442d49551169073e6dff124 Mon Sep 17 00:00:00 2001 From: Edwin Collazos Date: Wed, 22 Jul 2026 13:49:09 -0400 Subject: [PATCH 04/12] Creates the _generateButtonStyles and _generateMozillaButtonBorderStyles functions and use them in the d2l-button component --- components/button/button-styles.js | 27 +++++++++++++++++++++++++++ components/button/button.js | 18 ++++++++---------- 2 files changed, 35 insertions(+), 10 deletions(-) diff --git a/components/button/button-styles.js b/components/button/button-styles.js index a48bf4fa500..eb50d423b49 100644 --- a/components/button/button-styles.js +++ b/components/button/button-styles.js @@ -32,6 +32,33 @@ function _generateButtonBaseStyles(selector) { `; } +export function _generateButtonStyles(selector) { + if (!_isValidCssSelector(selector)) return unsafeCSS(''); + selector = unsafeCSS(selector.trim()); + + return css` + ${selector} { + font-family: inherit; + padding-block-end: 0; + padding-block-start: 0; + padding-inline-end: var(--d2l-button-padding-inline-end, 1.5rem); + padding-inline-start: var(--d2l-button-padding-inline-start, 1.5rem); + } + `; +} + +export function _generateMozillaButtonBorderStyles(selector) { + if (!_isValidCssSelector(selector)) return unsafeCSS(''); + selector = unsafeCSS(selector.trim()); + + return css` + /* Firefox includes a hidden border which messes up button dimensions */ + ${selector}::-moz-focus-inner { + border: 0; + } + `; +} + export const buttonStyles = css` ${_generateButtonBaseStyles('button')} ${getFocusRingStyles('button', { preferContrastMediaQueryExtraStyles: css`border: 2px solid transparent;` })} diff --git a/components/button/button.js b/components/button/button.js index 10442c8033b..a9bfa69b12a 100644 --- a/components/button/button.js +++ b/components/button/button.js @@ -1,8 +1,12 @@ import '../colors/colors.js'; import '../tooltip/tooltip.js'; +import { + _generateButtonStyles, + _generateMozillaButtonBorderStyles, + buttonStyles +} from './button-styles.js'; import { css, html, LitElement } from 'lit'; import { ButtonMixin } from './button-mixin.js'; -import { buttonStyles } from './button-styles.js'; import { getUniqueId } from '../../helpers/uniqueId.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import { labelStyles } from '../typography/styles.js'; @@ -36,19 +40,13 @@ class Button extends ButtonMixin(LitElement) { display: none; } + ${_generateButtonStyles('button')} + button { - font-family: inherit; - padding-block-end: 0; - padding-block-start: 0; - padding-inline-end: var(--d2l-button-padding-inline-end, 1.5rem); - padding-inline-start: var(--d2l-button-padding-inline-start, 1.5rem); width: 100%; } - /* Firefox includes a hidden border which messes up button dimensions */ - button::-moz-focus-inner { - border: 0; - } + ${_generateMozillaButtonBorderStyles('button')} button, button[disabled]:hover, From bdaa91ae5b459f876a9bc8e5eb71b33471908bd7 Mon Sep 17 00:00:00 2001 From: Edwin Collazos Date: Wed, 22 Jul 2026 14:23:02 -0400 Subject: [PATCH 05/12] Creates the _generateButtonDisabledStyles and uses it in the d2l-button component --- components/button/button-styles.js | 17 +++++++++++++++++ components/button/button.js | 9 ++------- 2 files changed, 19 insertions(+), 7 deletions(-) diff --git a/components/button/button-styles.js b/components/button/button-styles.js index eb50d423b49..1a6e4a3e78c 100644 --- a/components/button/button-styles.js +++ b/components/button/button-styles.js @@ -59,6 +59,23 @@ export function _generateMozillaButtonBorderStyles(selector) { `; } +export function _generateButtonDisabledStyles(selector, isForBsi = false) { + if (!_isValidCssSelector(selector)) return unsafeCSS(''); + selector = unsafeCSS(selector.trim()); + + const activeDisabledSelector = isForBsi ? unsafeCSS(`${selector}[active][disabled]`) : unsafeCSS(`:host([active]) ${selector}[disabled]`); + + return css` + ${selector}, + ${selector}[disabled]:hover, + ${selector}[disabled]:focus, + ${activeDisabledSelector} { + background-color: var(--d2l-theme-background-color-interactive-secondary-default); + color: var(--d2l-theme-text-color-static-standard); + } + `; +} + export const buttonStyles = css` ${_generateButtonBaseStyles('button')} ${getFocusRingStyles('button', { preferContrastMediaQueryExtraStyles: css`border: 2px solid transparent;` })} diff --git a/components/button/button.js b/components/button/button.js index a9bfa69b12a..84f5e670d06 100644 --- a/components/button/button.js +++ b/components/button/button.js @@ -1,6 +1,7 @@ import '../colors/colors.js'; import '../tooltip/tooltip.js'; import { + _generateButtonDisabledStyles, _generateButtonStyles, _generateMozillaButtonBorderStyles, buttonStyles @@ -48,13 +49,7 @@ class Button extends ButtonMixin(LitElement) { ${_generateMozillaButtonBorderStyles('button')} - button, - button[disabled]:hover, - button[disabled]:focus, - :host([active]) button[disabled] { - background-color: var(--d2l-theme-background-color-interactive-secondary-default); - color: var(--d2l-theme-text-color-static-standard); - } + ${_generateButtonDisabledStyles('button')} button:hover, button:focus, From 1b940c71f23f6aa4573fcdcac9fd5e2534466fbd Mon Sep 17 00:00:00 2001 From: Edwin Collazos Date: Wed, 22 Jul 2026 14:51:45 -0400 Subject: [PATCH 06/12] Creates the _generateButtonActiveStyles and uses it in the d2l-button component --- components/button/button-styles.js | 17 +++++++++++++++++ components/button/button.js | 7 ++----- 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/components/button/button-styles.js b/components/button/button-styles.js index 1a6e4a3e78c..37b3e0e9e13 100644 --- a/components/button/button-styles.js +++ b/components/button/button-styles.js @@ -76,6 +76,23 @@ export function _generateButtonDisabledStyles(selector, isForBsi = false) { `; } +export function _generateButtonEnabledStyles(selector, isForBsi = false) { + if (!_isValidCssSelector(selector)) return unsafeCSS(''); + selector = unsafeCSS(selector.trim()); + + const activeSelector = isForBsi ? unsafeCSS(`${selector}[active]`) : unsafeCSS(`:host([active]) ${selector}`); + const additionalBSISelector = isForBsi ? unsafeCSS(`${selector}.d2l-button-hover, ${selector}.d2l-button-focus,`) : unsafeCSS(''); + + return css` + ${additionalBSISelector} + ${selector}:hover, + ${selector}:focus, + ${activeSelector} { + background-color: var(--d2l-theme-background-color-interactive-secondary-hover); + } + `; +} + export const buttonStyles = css` ${_generateButtonBaseStyles('button')} ${getFocusRingStyles('button', { preferContrastMediaQueryExtraStyles: css`border: 2px solid transparent;` })} diff --git a/components/button/button.js b/components/button/button.js index 84f5e670d06..b69adc9c87b 100644 --- a/components/button/button.js +++ b/components/button/button.js @@ -2,6 +2,7 @@ import '../colors/colors.js'; import '../tooltip/tooltip.js'; import { _generateButtonDisabledStyles, + _generateButtonEnabledStyles, _generateButtonStyles, _generateMozillaButtonBorderStyles, buttonStyles @@ -51,11 +52,7 @@ class Button extends ButtonMixin(LitElement) { ${_generateButtonDisabledStyles('button')} - button:hover, - button:focus, - :host([active]) button { - background-color: var(--d2l-theme-background-color-interactive-secondary-hover); - } + ${_generateButtonEnabledStyles('button')} :host([disabled]) button { cursor: default; From d8cc5ac0fe08c800e83397f7ffa87d835c7fb0a3 Mon Sep 17 00:00:00 2001 From: Edwin Collazos Date: Wed, 22 Jul 2026 15:37:05 -0400 Subject: [PATCH 07/12] Created the _generateBSIButtonFocusStyles to be used in BSI for generating button focus styles --- components/button/button-styles.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/components/button/button-styles.js b/components/button/button-styles.js index 37b3e0e9e13..ecc0fd85094 100644 --- a/components/button/button-styles.js +++ b/components/button/button-styles.js @@ -93,6 +93,17 @@ export function _generateButtonEnabledStyles(selector, isForBsi = false) { `; } +export function _generateBSIButtonFocusStyles(selector) { + if (!_isValidCssSelector(selector)) return unsafeCSS(''); + const getSelector = (focusPseudoClass) => ` + ${selector}:${focusPseudoClass}, + ${selector}.d2l-button-focus, + ${selector}[primary]:${focusPseudoClass}, + ${selector}[primary].d2l-button-focus`; + + return getFocusRingStyles(getSelector); +} + export const buttonStyles = css` ${_generateButtonBaseStyles('button')} ${getFocusRingStyles('button', { preferContrastMediaQueryExtraStyles: css`border: 2px solid transparent;` })} From b8e0b557952e6d23feed554c3ba15d687922d319 Mon Sep 17 00:00:00 2001 From: Edwin Collazos Date: Wed, 22 Jul 2026 16:24:27 -0400 Subject: [PATCH 08/12] Creates the _generatePrimaryButtonDisabledStyles function and makes d2l-button to use it --- components/button/button-styles.js | 21 +++++++++++++++++++++ components/button/button.js | 9 ++------- 2 files changed, 23 insertions(+), 7 deletions(-) diff --git a/components/button/button-styles.js b/components/button/button-styles.js index ecc0fd85094..fb5d6efa548 100644 --- a/components/button/button-styles.js +++ b/components/button/button-styles.js @@ -104,6 +104,27 @@ export function _generateBSIButtonFocusStyles(selector) { return getFocusRingStyles(getSelector); } +export function _generatePrimaryButtonDisabledStyles(selector, isForBsi = false) { + if (!_isValidCssSelector(selector)) return unsafeCSS(''); + selector = unsafeCSS(selector.trim()); + + const finalSelector = isForBsi ? `${selector}[primary], + ${selector}[primary].d2l-button-hover, + ${selector}[primary]:focus, + ${selector}[primary].d2l-button-focus, + ${selector}[primary][active]` : `:host([primary]) ${selector}, + :host([primary]) ${selector}[disabled]:hover, + :host([primary]) ${selector}[disabled]:focus, + :host([primary][active]) ${selector}[disabled]`; + + return css` + ${unsafeCSS(finalSelector)} { + background-color: var(--d2l-theme-background-color-interactive-primary-default); + color: var(--d2l-theme-text-color-static-inverted); + } + `; +} + export const buttonStyles = css` ${_generateButtonBaseStyles('button')} ${getFocusRingStyles('button', { preferContrastMediaQueryExtraStyles: css`border: 2px solid transparent;` })} diff --git a/components/button/button.js b/components/button/button.js index b69adc9c87b..1d75cf86b3c 100644 --- a/components/button/button.js +++ b/components/button/button.js @@ -5,6 +5,7 @@ import { _generateButtonEnabledStyles, _generateButtonStyles, _generateMozillaButtonBorderStyles, + _generatePrimaryButtonDisabledStyles, buttonStyles } from './button-styles.js'; import { css, html, LitElement } from 'lit'; @@ -67,13 +68,7 @@ class Button extends ButtonMixin(LitElement) { position: absolute; } - :host([primary]) button, - :host([primary]) button[disabled]:hover, - :host([primary]) button[disabled]:focus, - :host([primary][active]) button[disabled] { - background-color: var(--d2l-theme-background-color-interactive-primary-default); - color: var(--d2l-theme-text-color-static-inverted); - } + ${_generatePrimaryButtonDisabledStyles('button')} :host([primary]) button:hover, :host([primary]) button:focus, :host([primary][active]) button { From db3b0ac69a225d01b1b82d7525170a77bd6fe70f Mon Sep 17 00:00:00 2001 From: Edwin Collazos Date: Wed, 22 Jul 2026 16:39:30 -0400 Subject: [PATCH 09/12] Creates the _generatePrimaryButtonEnabledStyles function and makes d2l-button to use it --- components/button/button-styles.js | 19 +++++++++++++++++++ components/button/button.js | 9 ++------- 2 files changed, 21 insertions(+), 7 deletions(-) diff --git a/components/button/button-styles.js b/components/button/button-styles.js index fb5d6efa548..21d89c64aa7 100644 --- a/components/button/button-styles.js +++ b/components/button/button-styles.js @@ -125,6 +125,25 @@ export function _generatePrimaryButtonDisabledStyles(selector, isForBsi = false) `; } +export function _generatePrimaryButtonEnabledStyles(selector, isForBsi = false) { + if (!_isValidCssSelector(selector)) return unsafeCSS(''); + selector = unsafeCSS(selector.trim()); + + const finalSelector = isForBsi ? `${selector}[primary]:hover, + ${selector}[primary].d2l-button-hover, + ${selector}[primary]:focus, + ${selector}[primary].d2l-button-focus, + ${selector}[primary][active]` : `:host([primary]) ${selector}:hover, + :host([primary]) ${selector}:focus, + :host([primary][active]) ${selector}`; + + return css` + ${unsafeCSS(finalSelector)} { + background-color: var(--d2l-theme-background-color-interactive-primary-hover); + } + `; +} + export const buttonStyles = css` ${_generateButtonBaseStyles('button')} ${getFocusRingStyles('button', { preferContrastMediaQueryExtraStyles: css`border: 2px solid transparent;` })} diff --git a/components/button/button.js b/components/button/button.js index 1d75cf86b3c..16255b9d119 100644 --- a/components/button/button.js +++ b/components/button/button.js @@ -6,6 +6,7 @@ import { _generateButtonStyles, _generateMozillaButtonBorderStyles, _generatePrimaryButtonDisabledStyles, + _generatePrimaryButtonEnabledStyles, buttonStyles } from './button-styles.js'; import { css, html, LitElement } from 'lit'; @@ -44,7 +45,6 @@ class Button extends ButtonMixin(LitElement) { } ${_generateButtonStyles('button')} - button { width: 100%; } @@ -54,7 +54,6 @@ class Button extends ButtonMixin(LitElement) { ${_generateButtonDisabledStyles('button')} ${_generateButtonEnabledStyles('button')} - :host([disabled]) button { cursor: default; position: relative; @@ -69,11 +68,7 @@ class Button extends ButtonMixin(LitElement) { } ${_generatePrimaryButtonDisabledStyles('button')} - :host([primary]) button:hover, - :host([primary]) button:focus, - :host([primary][active]) button { - background-color: var(--d2l-theme-background-color-interactive-primary-hover); - } + ${_generatePrimaryButtonEnabledStyles('button')} ` ]; From 01efe0be08e57af81214f36f0f99e4bf3b5429e0 Mon Sep 17 00:00:00 2001 From: Edwin Collazos Date: Thu, 23 Jul 2026 11:55:20 -0400 Subject: [PATCH 10/12] Corrects and uses the right selectors for BSI case --- components/button/button-styles.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/components/button/button-styles.js b/components/button/button-styles.js index 21d89c64aa7..469d5d450c2 100644 --- a/components/button/button-styles.js +++ b/components/button/button-styles.js @@ -109,10 +109,9 @@ export function _generatePrimaryButtonDisabledStyles(selector, isForBsi = false) selector = unsafeCSS(selector.trim()); const finalSelector = isForBsi ? `${selector}[primary], - ${selector}[primary].d2l-button-hover, - ${selector}[primary]:focus, - ${selector}[primary].d2l-button-focus, - ${selector}[primary][active]` : `:host([primary]) ${selector}, + ${selector}[primary][disabled]:hover, + ${selector}[primary][disabled]:focus, + ${selector}[primary][active][disabled]` : `:host([primary]) ${selector}, :host([primary]) ${selector}[disabled]:hover, :host([primary]) ${selector}[disabled]:focus, :host([primary][active]) ${selector}[disabled]`; From 35c239fe2f8b39222a93a5e92a04d19df88e8a42 Mon Sep 17 00:00:00 2001 From: Edwin Collazos Date: Thu, 23 Jul 2026 13:01:14 -0400 Subject: [PATCH 11/12] Removes emtpy lines --- components/button/button.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/components/button/button.js b/components/button/button.js index 16255b9d119..b3aa7333cf4 100644 --- a/components/button/button.js +++ b/components/button/button.js @@ -43,16 +43,12 @@ class Button extends ButtonMixin(LitElement) { :host([hidden]) { display: none; } - ${_generateButtonStyles('button')} button { width: 100%; } - ${_generateMozillaButtonBorderStyles('button')} - ${_generateButtonDisabledStyles('button')} - ${_generateButtonEnabledStyles('button')} :host([disabled]) button { cursor: default; @@ -66,7 +62,6 @@ class Button extends ButtonMixin(LitElement) { opacity: var(--d2l-theme-opacity-disabled-control); position: absolute; } - ${_generatePrimaryButtonDisabledStyles('button')} ${_generatePrimaryButtonEnabledStyles('button')} ` From c0e9ad47790ff8957a3ad20dc6b8346f03d67031 Mon Sep 17 00:00:00 2001 From: Edwin Collazos Date: Wed, 5 Aug 2026 10:30:29 -0400 Subject: [PATCH 12/12] Refactors code to group styles into a single exposed generator function --- components/button/button-styles.js | 88 ++++++++++++++---------------- components/button/button.js | 20 ++----- 2 files changed, 46 insertions(+), 62 deletions(-) diff --git a/components/button/button-styles.js b/components/button/button-styles.js index 469d5d450c2..289f3cffd6c 100644 --- a/components/button/button-styles.js +++ b/components/button/button-styles.js @@ -32,25 +32,7 @@ function _generateButtonBaseStyles(selector) { `; } -export function _generateButtonStyles(selector) { - if (!_isValidCssSelector(selector)) return unsafeCSS(''); - selector = unsafeCSS(selector.trim()); - - return css` - ${selector} { - font-family: inherit; - padding-block-end: 0; - padding-block-start: 0; - padding-inline-end: var(--d2l-button-padding-inline-end, 1.5rem); - padding-inline-start: var(--d2l-button-padding-inline-start, 1.5rem); - } - `; -} - -export function _generateMozillaButtonBorderStyles(selector) { - if (!_isValidCssSelector(selector)) return unsafeCSS(''); - selector = unsafeCSS(selector.trim()); - +function _generateMozillaButtonBorderStyles(selector) { return css` /* Firefox includes a hidden border which messes up button dimensions */ ${selector}::-moz-focus-inner { @@ -59,10 +41,7 @@ export function _generateMozillaButtonBorderStyles(selector) { `; } -export function _generateButtonDisabledStyles(selector, isForBsi = false) { - if (!_isValidCssSelector(selector)) return unsafeCSS(''); - selector = unsafeCSS(selector.trim()); - +function _generateButtonDisabledStyles(selector, isForBsi = false) { const activeDisabledSelector = isForBsi ? unsafeCSS(`${selector}[active][disabled]`) : unsafeCSS(`:host([active]) ${selector}[disabled]`); return css` @@ -76,10 +55,7 @@ export function _generateButtonDisabledStyles(selector, isForBsi = false) { `; } -export function _generateButtonEnabledStyles(selector, isForBsi = false) { - if (!_isValidCssSelector(selector)) return unsafeCSS(''); - selector = unsafeCSS(selector.trim()); - +function _generateButtonEnabledStyles(selector, isForBsi = false) { const activeSelector = isForBsi ? unsafeCSS(`${selector}[active]`) : unsafeCSS(`:host([active]) ${selector}`); const additionalBSISelector = isForBsi ? unsafeCSS(`${selector}.d2l-button-hover, ${selector}.d2l-button-focus,`) : unsafeCSS(''); @@ -93,21 +69,7 @@ export function _generateButtonEnabledStyles(selector, isForBsi = false) { `; } -export function _generateBSIButtonFocusStyles(selector) { - if (!_isValidCssSelector(selector)) return unsafeCSS(''); - const getSelector = (focusPseudoClass) => ` - ${selector}:${focusPseudoClass}, - ${selector}.d2l-button-focus, - ${selector}[primary]:${focusPseudoClass}, - ${selector}[primary].d2l-button-focus`; - - return getFocusRingStyles(getSelector); -} - -export function _generatePrimaryButtonDisabledStyles(selector, isForBsi = false) { - if (!_isValidCssSelector(selector)) return unsafeCSS(''); - selector = unsafeCSS(selector.trim()); - +function _generatePrimaryButtonDisabledStyles(selector, isForBsi = false) { const finalSelector = isForBsi ? `${selector}[primary], ${selector}[primary][disabled]:hover, ${selector}[primary][disabled]:focus, @@ -124,10 +86,7 @@ export function _generatePrimaryButtonDisabledStyles(selector, isForBsi = false) `; } -export function _generatePrimaryButtonEnabledStyles(selector, isForBsi = false) { - if (!_isValidCssSelector(selector)) return unsafeCSS(''); - selector = unsafeCSS(selector.trim()); - +function _generatePrimaryButtonEnabledStyles(selector, isForBsi = false) { const finalSelector = isForBsi ? `${selector}[primary]:hover, ${selector}[primary].d2l-button-hover, ${selector}[primary]:focus, @@ -143,6 +102,43 @@ export function _generatePrimaryButtonEnabledStyles(selector, isForBsi = false) `; } +/** + * A private helper method that should not be used by general consumers + */ +export function _generateBSIButtonFocusStyles(selector) { + const getSelector = (focusPseudoClass) => ` + ${selector}:${focusPseudoClass}, + ${selector}.d2l-button-focus, + ${selector}[primary]:${focusPseudoClass}, + ${selector}[primary].d2l-button-focus`; + + return getFocusRingStyles(getSelector); +} + +/** + * A private helper method that should not be used by general consumers + */ +export function _generateButtonStyles(selector) { + if (!_isValidCssSelector(selector)) return unsafeCSS(''); + const safeSelector = unsafeCSS(selector.trim()); + + return css` + ${safeSelector} { + font-family: inherit; + padding-block-end: 0; + padding-block-start: 0; + padding-inline-end: var(--d2l-button-padding-inline-end, 1.5rem); + padding-inline-start: var(--d2l-button-padding-inline-start, 1.5rem); + } + + ${_generateMozillaButtonBorderStyles(safeSelector)} + ${_generateButtonDisabledStyles(safeSelector)} + ${_generateButtonEnabledStyles(safeSelector)} + ${_generatePrimaryButtonDisabledStyles(safeSelector)} + ${_generatePrimaryButtonEnabledStyles(safeSelector)} + `; +} + export const buttonStyles = css` ${_generateButtonBaseStyles('button')} ${getFocusRingStyles('button', { preferContrastMediaQueryExtraStyles: css`border: 2px solid transparent;` })} diff --git a/components/button/button.js b/components/button/button.js index b3aa7333cf4..85b3f3bec19 100644 --- a/components/button/button.js +++ b/components/button/button.js @@ -1,20 +1,14 @@ import '../colors/colors.js'; import '../tooltip/tooltip.js'; -import { - _generateButtonDisabledStyles, - _generateButtonEnabledStyles, - _generateButtonStyles, - _generateMozillaButtonBorderStyles, - _generatePrimaryButtonDisabledStyles, - _generatePrimaryButtonEnabledStyles, - buttonStyles -} from './button-styles.js'; +import { _generateButtonStyles, buttonStyles as baseButtonStyles } from './button-styles.js'; import { css, html, LitElement } from 'lit'; import { ButtonMixin } from './button-mixin.js'; import { getUniqueId } from '../../helpers/uniqueId.js'; import { ifDefined } from 'lit/directives/if-defined.js'; import { labelStyles } from '../typography/styles.js'; +const buttonStyles = _generateButtonStyles('button'); + /** * A button component that can be used just like the native button element. * @slot - Default content placed inside of the button @@ -35,7 +29,7 @@ class Button extends ButtonMixin(LitElement) { primary: { type: Boolean, reflect: true } }; - static styles = [labelStyles, buttonStyles, + static styles = [labelStyles, baseButtonStyles, buttonStyles, css` :host { display: inline-block; @@ -43,13 +37,9 @@ class Button extends ButtonMixin(LitElement) { :host([hidden]) { display: none; } - ${_generateButtonStyles('button')} button { width: 100%; } - ${_generateMozillaButtonBorderStyles('button')} - ${_generateButtonDisabledStyles('button')} - ${_generateButtonEnabledStyles('button')} :host([disabled]) button { cursor: default; position: relative; @@ -62,8 +52,6 @@ class Button extends ButtonMixin(LitElement) { opacity: var(--d2l-theme-opacity-disabled-control); position: absolute; } - ${_generatePrimaryButtonDisabledStyles('button')} - ${_generatePrimaryButtonEnabledStyles('button')} ` ];