From 0b5923ace455355dd115e13224c729d54432d191 Mon Sep 17 00:00:00 2001 From: Darren Cadwallader Date: Wed, 17 May 2023 14:22:15 +0200 Subject: [PATCH] Update fixtures --- .storybook/helpers.js | 4 +- scss/bitstyles/atoms/button/Button.js | 4 +- scss/bitstyles/atoms/button/_index.scss | 10 + test/scss/fixtures/bitstyles-overrides.css | 1465 +++++++++++++------- test/scss/fixtures/bitstyles.css | 1067 ++++++++++---- 5 files changed, 1773 insertions(+), 777 deletions(-) diff --git a/.storybook/helpers.js b/.storybook/helpers.js index f84347051..405321c96 100644 --- a/.storybook/helpers.js +++ b/.storybook/helpers.js @@ -13,12 +13,12 @@ function capitalizeFirstLetter(string) { export const generateLabel = (items) => capitalizeFirstLetter(items.join(' ')); -export const generateButtonLabel = ({ +export const generateButtonLabel = ( shapeVariant = [], colorVariant = [], disabled = false, pressed = false, -}) => +) => capitalizeFirstLetter( [ shapeVariant.length === 0 ? 'default' : shapeVariant.join(' '), diff --git a/scss/bitstyles/atoms/button/Button.js b/scss/bitstyles/atoms/button/Button.js index 2a323c6ed..4589c0b69 100644 --- a/scss/bitstyles/atoms/button/Button.js +++ b/scss/bitstyles/atoms/button/Button.js @@ -1,4 +1,4 @@ -import { generateLabel } from '../../../../.storybook/helpers'; +import { generateButtonLabel } from '../../../../.storybook/helpers'; export default ({ children, @@ -16,7 +16,7 @@ export default ({ const button = document.createElement(element); button.innerHTML = children || - generateLabel( + generateButtonLabel( shapeVariant, colorVariant, disabled || ariaDisabled, diff --git a/scss/bitstyles/atoms/button/_index.scss b/scss/bitstyles/atoms/button/_index.scss index c09fef12b..f76027576 100644 --- a/scss/bitstyles/atoms/button/_index.scss +++ b/scss/bitstyles/atoms/button/_index.scss @@ -60,6 +60,16 @@ text-decoration: none; } + &:active { + z-index: 1; + border-color: var(#{custom-property.get($items: ('button', 'active', 'border-color'))}); + outline-width: 0; + background-color: var(#{custom-property.get($items: ('button', 'active', 'background-color'))}); + box-shadow: var(#{custom-property.get($items: ('button', 'active', 'box-shadow'))}); + color: var(#{custom-property.get($items: ('button', 'active', 'color'))}); + text-decoration: none; + } + &:focus-visible { z-index: 3; outline: settings.$outline-color solid settings.$outline-width; diff --git a/test/scss/fixtures/bitstyles-overrides.css b/test/scss/fixtures/bitstyles-overrides.css index 04b34eeed..7dffe7ac2 100644 --- a/test/scss/fixtures/bitstyles-overrides.css +++ b/test/scss/fixtures/bitstyles-overrides.css @@ -381,9 +381,15 @@ legend { padding: 0; } label { + align-items: baseline; cursor: pointer; - display: block; - margin-bottom: 0; + display: flex; + font-weight: 500; + gap: var(--bscpn-size-s7); + margin-bottom: var(--bscpn-size-s7); +} +label[aria-disabled='true'] { + color: var(--bscpn-color-grayscale-base); } [type='color'] { height: calc(var(--bscpn-line-height-4) * 1em + var(--bscpn-size-s2)); @@ -404,13 +410,13 @@ img { -moz-appearance: none; appearance: none; cursor: pointer; - display: inline-block; flex-shrink: 0; - font-size: var(--bscpn-size-m); + font-size: var(--bscpn-size-l2); height: 1em; - margin-right: var(--bscpn-size-s4); + margin: var(--bscpn-size-s4); + outline-offset: 0; position: relative; - vertical-align: middle; + top: calc(var(--bscpn-size-s4) / 2); width: 1em; } @supports ( @@ -418,16 +424,29 @@ img { ) { [type='checkbox'] { background-color: var(--bscpn-color-grayscale-white); - border: var(--bscpn-size-s7) solid var(--bscpn-color-grayscale-base); + border: 0.1875rem solid var(--bscpn-color-grayscale-dark-2); border-radius: 10rem; + box-shadow: none; color: var(--bscpn-color-grayscale-base); } [type='checkbox']:focus, [type='checkbox']:hover { background-color: var(--bscpn-color-grayscale-white); border-color: var(--bscpn-color-brand-1-base); + box-shadow: none; color: var(--bscpn-color-brand-1-base); - outline: none; + outline-width: 0; + } + [type='checkbox']:focus-visible { + outline: var(--bscpn-color-brand-2-base) solid + calc(var(--bscpn-size-s7) + var(--bscpn-size-s7) / 2); + outline-offset: var(--bscpn-size-s7); + } + [type='checkbox']:active { + background-color: var(--bscpn-color-grayscale-white); + border-color: var(--bscpn-color-brand-1-dark-1); + box-shadow: none; + color: var(--bscpn-color-brand-1-dark-1); } [type='checkbox']:after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M83.07 11.71 38.66 56.3 16.93 34.49 1 50.48l37.65 37.81L99 27.7z'/%3E%3C/svg%3E"); @@ -439,27 +458,54 @@ img { height: 100%; opacity: 0; transform: scale(0.7); - transition: opacity 0.0375s ease-out 75ms, transform 0.0375s ease-out 75ms; + transition: opacity 0.0375s ease-out 75ms, transform 0.0375s ease-out 75ms, + outline-offset 75ms ease-out; width: 100%; } [type='checkbox']:checked { - background-color: var(--bscpn-color-brand-1-base); - border-color: var(--bscpn-color-brand-1-base); + background-color: var(--bscpn-color-brand-1-dark-1); + border-color: var(--bscpn-color-brand-1-dark-1); + box-shadow: var(--bscpn-shadow-default-box); color: var(--bscpn-color-grayscale-white); } [type='checkbox']:checked:after { opacity: 1; transform: scale(1); } + [type='checkbox']:invalid, + [type='checkbox'][aria-invalid='true'] { + background-color: var(--bscpn-color-brand-1-base); + border-color: var(--bscpn-color-brand-1-base); + box-shadow: none; + color: var(--bscpn-color-grayscale-white); + } [type='checkbox'][disabled] { - background-color: var(--bscpn-color-grayscale-light-2); - border-color: var(--bscpn-color-grayscale-light-2); + background-color: var(--bscpn-color-grayscale-white); + border-color: var(--bscpn-color-grayscale-light-1); + box-shadow: none; color: var(--bscpn-color-grayscale-light-2); } [type='checkbox'][disabled]:checked { - background-color: var(--bscpn-color-grayscale-light-2); + background-color: var(--bscpn-color-grayscale-light-1); border-color: var(--bscpn-color-grayscale-light-1); - color: var(--bscpn-color-grayscale-light-1); + box-shadow: none; + color: var(--bscpn-color-grayscale-white); + } + [type='checkbox']:checked:focus:not(:invalid), + [type='checkbox']:checked:focus:not([aria-invalid='true']), + [type='checkbox']:checked:hover:not(:invalid), + [type='checkbox']:checked:hover:not([aria-invalid='true']) { + background-color: var(--bscpn-color-brand-1-base); + border-color: var(--bscpn-color-brand-1-base); + box-shadow: none; + color: var(--bscpn-color-grayscale-white); + } + [type='checkbox']:checked:active:not(:invalid), + [type='checkbox']:checked:active:not([aria-invalid='true']) { + background-color: var(--bscpn-color-brand-1-base); + border-color: var(--bscpn-color-brand-1-dark-1); + box-shadow: none; + color: var(--bscpn-color-grayscale-white); } } [type='radio'] { @@ -467,13 +513,13 @@ img { -moz-appearance: none; appearance: none; cursor: pointer; - display: inline-block; flex-shrink: 0; - font-size: var(--bscpn-size-m); + font-size: var(--bscpn-size-l2); height: 1em; - margin-right: var(--bscpn-size-s4); + margin: var(--bscpn-size-s4); + outline-offset: 0; position: relative; - vertical-align: middle; + top: calc(var(--bscpn-size-s4) / 2); width: 1em; } @supports ( @@ -481,68 +527,112 @@ img { ) { [type='radio'] { background-color: var(--bscpn-color-grayscale-white); - border: var(--bscpn-size-s7) solid var(--bscpn-color-grayscale-base); + border: 0.1875rem solid var(--bscpn-color-grayscale-dark-2); border-radius: 10rem; + box-shadow: none; color: var(--bscpn-color-grayscale-light-1); } [type='radio']:after { - background: var(--bscpn-color-brand-1-base); + background: var(--bscpn-color-brand-1-dark-1); border-radius: 10rem; content: ''; display: block; height: 100%; opacity: 0; transform: scale(0.5); - transition: opacity 75ms ease-out, transform 75ms ease-out; + transition: opacity 75ms ease-out, transform 75ms ease-out, + outline-offset 75ms ease-out; width: 100%; } [type='radio']:focus, [type='radio']:hover { background-color: var(--bscpn-color-grayscale-white); border-color: var(--bscpn-color-brand-1-base); + box-shadow: none; color: var(--bscpn-color-brand-1-base); - outline: none; + outline-width: 0; } - [type='radio']:checked { + [type='radio']:focus-visible { + outline: var(--bscpn-color-brand-2-base) solid + calc(var(--bscpn-size-s7) + var(--bscpn-size-s7) / 2); + outline-offset: var(--bscpn-size-s7); + } + [type='radio']:active { background-color: var(--bscpn-color-grayscale-white); - border-color: var(--bscpn-color-brand-1-base); + border-color: var(--bscpn-color-brand-1-dark-1); + box-shadow: none; color: var(--bscpn-color-brand-1-base); } + [type='radio']:checked { + background-color: var(--bscpn-color-grayscale-white); + border-color: var(--bscpn-color-brand-1-dark-1); + box-shadow: var(--bscpn-shadow-default-box); + color: var(--bscpn-color-brand-1-dark-1); + } [type='radio']:checked:after { opacity: 1; transform: scale(0.7); } + [type='radio']:invalid, + [type='radio'][aria-invalid='true'] { + background-color: var(--bscpn-color-grayscale-white); + border-color: var(--bscpn-color-warning-dark-1); + box-shadow: none; + color: var(--bscpn-color-warning-dark-4); + } [type='radio'][disabled] { - background-color: var(--bscpn-color-grayscale-light-2); + background-color: var(--bscpn-color-grayscale-white); border-color: var(--bscpn-color-grayscale-light-1); + box-shadow: none; color: var(--bscpn-color-grayscale-light-1); } [type='radio'][disabled]:checked { - background-color: var(--bscpn-color-grayscale-light-2); + background-color: var(--bscpn-color-grayscale-white); border-color: var(--bscpn-color-grayscale-light-1); + box-shadow: none; color: var(--bscpn-color-grayscale-light-1); } [type='radio'][disabled]:after { background: var(--bscpn-color-grayscale-light-1); } + [type='radio']:focus:not(:focus-visible) { + outline-width: 0; + } + [type='radio']:checked:focus:not(:invalid), + [type='radio']:checked:focus:not([aria-invalid='true']), + [type='radio']:checked:hover:not(:invalid), + [type='radio']:checked:hover:not([aria-invalid='true']) { + background-color: var(--bscpn-color-grayscale-white); + border-color: var(--bscpn-color-brand-1-base); + box-shadow: none; + color: var(--bscpn-color-brand-1-base); + } + [type='radio']:checked:active:not(:invalid), + [type='radio']:checked:active:not([aria-invalid='true']) { + background-color: var(--bscpn-color-grayscale-white); + border-color: var(--bscpn-color-brand-1-base); + box-shadow: none; + color: var(--bscpn-color-brand-1-base); + } } input, textarea { + outline-offset: 0; resize: vertical; transition: color 75ms ease-out, background-color 75ms ease-out, - border 75ms ease-out; + border 75ms ease-out, outline-offset 75ms ease-out; } input::-moz-placeholder, textarea::-moz-placeholder { - color: var(--bscpn-color-grayscale-light-1); - font-style: italic; + color: var(--bscpn-color-grayscale-base); + font-style: normal; font-weight: 400; opacity: 1; } input::placeholder, textarea::placeholder { - color: var(--bscpn-color-grayscale-light-1); - font-style: italic; + color: var(--bscpn-color-grayscale-base); + font-style: normal; font-weight: 400; opacity: 1; } @@ -559,86 +649,200 @@ textarea::placeholder { [type='url'], [type='week'], textarea { + --bscpn-input-text-border-top-right-radius: 10rem; + --bscpn-input-text-border-bottom-right-radius: 10rem; + --bscpn-input-text-border-bottom-left-radius: 10rem; + --bscpn-input-text-border-top-left-radius: 10rem; + --bscpn-input-text-padding-vertical: var(--bscpn-size-s2); + --bscpn-input-text-padding-horizontal: var(--bscpn-size-m); + --bscpn-input-text-border-width: 0.1875rem; background-color: var(--bscpn-color-grayscale-white); - border: var(--bscpn-size-s7) solid var(--bscpn-color-grayscale-base); - border-radius: 10rem; - box-shadow: 0 0 calc(var(--bscpn-size-s5) / 4) - rgba(var(--bscpn-color-grayscale-light-1-rgb), 0.025), - 0 0 calc(var(--bscpn-size-s5) / 3) - rgba(var(--bscpn-color-grayscale-light-1-rgb), 0.025), - 0 0 calc(var(--bscpn-size-s5) / 2) - rgba(var(--bscpn-color-grayscale-light-1-rgb), 0.025), - 0 0 calc(var(--bscpn-size-s5) / 1) - rgba(var(--bscpn-color-grayscale-light-1-rgb), 0.025); - color: var(--bscpn-color-grayscale-base); - display: block; + border: 0.1875rem solid var(--bscpn-color-grayscale-dark-1); + border-radius: var(--bscpn-input-text-border-top-left-radius) + var(--bscpn-input-text-border-top-right-radius) + var(--bscpn-input-text-border-bottom-right-radius) + var(--bscpn-input-text-border-bottom-left-radius); + box-shadow: none; + color: var(--bscpn-color-grayscale-dark-4); + display: flex; + flex-grow: 1; font: inherit; - padding: var(--bscpn-size-s5) var(--bscpn-size-s5); - width: 100%; + padding: calc( + var(--bscpn-input-text-padding-vertical) - + var(--bscpn-input-text-border-width, 0rem) + ) + calc( + var(--bscpn-input-text-padding-horizontal) - + var(--bscpn-input-text-border-width, 0rem) + ); } +[type='date']:focus, [type='date']:hover, +[type='datetime-local']:focus, [type='datetime-local']:hover, +[type='email']:focus, [type='email']:hover, +[type='month']:focus, [type='month']:hover, +[type='number']:focus, [type='number']:hover, +[type='password']:focus, [type='password']:hover, +[type='search']:focus, [type='search']:hover, +[type='tel']:focus, [type='tel']:hover, +[type='text']:focus, [type='text']:hover, +[type='time']:focus, [type='time']:hover, +[type='url']:focus, [type='url']:hover, +[type='week']:focus, [type='week']:hover, +textarea:focus, textarea:hover { - background-color: var(--bscpn-color-grayscale-base); - border-color: var(--bscpn-color-grayscale-dark-1); - box-shadow: 0 0 calc(var(--bscpn-size-s2) / 4) - rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.025), - 0 0 calc(var(--bscpn-size-s2) / 3) - rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.025), - 0 0 calc(var(--bscpn-size-s2) / 2) - rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.025), - 0 0 calc(var(--bscpn-size-s2) / 1) - rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.025); + background-color: var(--bscpn-color-grayscale-white); + border-color: var(--bscpn-color-grayscale-dark-2); + box-shadow: 0 0 calc(var(--bscpn-size-s4) / 4) + rgba(var(--bscpn-color-brand-1-dark-2-rgb), 0.075), + 0 0 calc(var(--bscpn-size-s4) / 3) + rgba(var(--bscpn-color-brand-1-dark-2-rgb), 0.075), + 0 0 calc(var(--bscpn-size-s4) / 2) + rgba(var(--bscpn-color-brand-1-dark-2-rgb), 0.075), + 0 0 calc(var(--bscpn-size-s4) / 1) + rgba(var(--bscpn-color-brand-1-dark-2-rgb), 0.075); + color: var(--bscpn-color-grayscale-dark-4); +} +[type='date']:focus::-moz-placeholder, +[type='date']:hover::-moz-placeholder, +[type='datetime-local']:focus::-moz-placeholder, +[type='datetime-local']:hover::-moz-placeholder, +[type='email']:focus::-moz-placeholder, +[type='email']:hover::-moz-placeholder, +[type='month']:focus::-moz-placeholder, +[type='month']:hover::-moz-placeholder, +[type='number']:focus::-moz-placeholder, +[type='number']:hover::-moz-placeholder, +[type='password']:focus::-moz-placeholder, +[type='password']:hover::-moz-placeholder, +[type='search']:focus::-moz-placeholder, +[type='search']:hover::-moz-placeholder, +[type='tel']:focus::-moz-placeholder, +[type='tel']:hover::-moz-placeholder, +[type='text']:focus::-moz-placeholder, +[type='text']:hover::-moz-placeholder, +[type='time']:focus::-moz-placeholder, +[type='time']:hover::-moz-placeholder, +[type='url']:focus::-moz-placeholder, +[type='url']:hover::-moz-placeholder, +[type='week']:focus::-moz-placeholder, +[type='week']:hover::-moz-placeholder, +textarea:focus::-moz-placeholder, +textarea:hover::-moz-placeholder { + color: var(--bscpn-color-grayscale-dark-1); +} +[type='date']:focus::placeholder, +[type='date']:hover::placeholder, +[type='datetime-local']:focus::placeholder, +[type='datetime-local']:hover::placeholder, +[type='email']:focus::placeholder, +[type='email']:hover::placeholder, +[type='month']:focus::placeholder, +[type='month']:hover::placeholder, +[type='number']:focus::placeholder, +[type='number']:hover::placeholder, +[type='password']:focus::placeholder, +[type='password']:hover::placeholder, +[type='search']:focus::placeholder, +[type='search']:hover::placeholder, +[type='tel']:focus::placeholder, +[type='tel']:hover::placeholder, +[type='text']:focus::placeholder, +[type='text']:hover::placeholder, +[type='time']:focus::placeholder, +[type='time']:hover::placeholder, +[type='url']:focus::placeholder, +[type='url']:hover::placeholder, +[type='week']:focus::placeholder, +[type='week']:hover::placeholder, +textarea:focus::placeholder, +textarea:hover::placeholder { color: var(--bscpn-color-grayscale-dark-1); } +[type='date']:focus-visible, +[type='datetime-local']:focus-visible, +[type='email']:focus-visible, +[type='month']:focus-visible, +[type='number']:focus-visible, +[type='password']:focus-visible, +[type='search']:focus-visible, +[type='tel']:focus-visible, +[type='text']:focus-visible, +[type='time']:focus-visible, +[type='url']:focus-visible, +[type='week']:focus-visible, +textarea:focus-visible { + outline: var(--bscpn-color-brand-2-base) solid + calc(var(--bscpn-size-s7) + var(--bscpn-size-s7) / 2); + outline-offset: var(--bscpn-size-s7); + z-index: 3; +} [type='date']:active, -[type='date']:focus, [type='datetime-local']:active, -[type='datetime-local']:focus, [type='email']:active, -[type='email']:focus, [type='month']:active, -[type='month']:focus, [type='number']:active, -[type='number']:focus, [type='password']:active, -[type='password']:focus, [type='search']:active, -[type='search']:focus, [type='tel']:active, -[type='tel']:focus, [type='text']:active, -[type='text']:focus, [type='time']:active, -[type='time']:focus, [type='url']:active, -[type='url']:focus, [type='week']:active, -[type='week']:focus, -textarea:active, -textarea:focus { +textarea:active { background-color: var(--bscpn-color-grayscale-white); - border-color: var(--bscpn-color-grayscale-dark-1); - box-shadow: 0 0 calc(var(--bscpn-size-s6) / 4) - rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.075), - 0 0 calc(var(--bscpn-size-s6) / 3) - rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.075), - 0 0 calc(var(--bscpn-size-s6) / 2) - rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.075), - 0 0 calc(var(--bscpn-size-s6) / 1) - rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.075); - color: var(--bscpn-color-grayscale-dark-1); - outline: none; + border-color: var(--bscpn-color-brand-1-dark-1); + box-shadow: 0 0 calc(var(--bscpn-size-s4) / 4) + rgba(var(--bscpn-color-brand-1-dark-2-rgb), 0.075), + 0 0 calc(var(--bscpn-size-s4) / 3) + rgba(var(--bscpn-color-brand-1-dark-2-rgb), 0.075), + 0 0 calc(var(--bscpn-size-s4) / 2) + rgba(var(--bscpn-color-brand-1-dark-2-rgb), 0.075), + 0 0 calc(var(--bscpn-size-s4) / 1) + rgba(var(--bscpn-color-brand-1-dark-2-rgb), 0.075); + color: var(--bscpn-color-grayscale-dark-4); + outline-width: 0; +} +[type='date']:active::-moz-placeholder, +[type='datetime-local']:active::-moz-placeholder, +[type='email']:active::-moz-placeholder, +[type='month']:active::-moz-placeholder, +[type='number']:active::-moz-placeholder, +[type='password']:active::-moz-placeholder, +[type='search']:active::-moz-placeholder, +[type='tel']:active::-moz-placeholder, +[type='text']:active::-moz-placeholder, +[type='time']:active::-moz-placeholder, +[type='url']:active::-moz-placeholder, +[type='week']:active::-moz-placeholder, +textarea:active::-moz-placeholder { + color: var(--bscpn-color-brand-1-base); +} +[type='date']:active::placeholder, +[type='datetime-local']:active::placeholder, +[type='email']:active::placeholder, +[type='month']:active::placeholder, +[type='number']:active::placeholder, +[type='password']:active::placeholder, +[type='search']:active::placeholder, +[type='tel']:active::placeholder, +[type='text']:active::placeholder, +[type='time']:active::placeholder, +[type='url']:active::placeholder, +[type='week']:active::placeholder, +textarea:active::placeholder { + color: var(--bscpn-color-brand-1-base); } [type='date']:invalid, [type='date'][aria-invalid='true'], @@ -667,16 +871,65 @@ textarea:focus { textarea:invalid, textarea[aria-invalid='true'] { background-color: var(--bscpn-color-grayscale-white); - border-color: var(--bscpn-color-warning-base); - box-shadow: 0 0 calc(var(--bscpn-size-s4) / 4) - rgba(var(--bscpn-color-warning-base-rgb), 0.05), - 0 0 calc(var(--bscpn-size-s4) / 3) - rgba(var(--bscpn-color-warning-base-rgb), 0.05), - 0 0 calc(var(--bscpn-size-s4) / 2) - rgba(var(--bscpn-color-warning-base-rgb), 0.05), - 0 0 calc(var(--bscpn-size-s4) / 1) - rgba(var(--bscpn-color-warning-base-rgb), 0.05); - color: var(--bscpn-color-warning-base); + border-color: var(--bscpn-color-warning-dark-1); + box-shadow: none; + color: var(--bscpn-color-warning-dark-4); +} +[type='date']:invalid::-moz-placeholder, +[type='date'][aria-invalid='true']::-moz-placeholder, +[type='datetime-local']:invalid::-moz-placeholder, +[type='datetime-local'][aria-invalid='true']::-moz-placeholder, +[type='email']:invalid::-moz-placeholder, +[type='email'][aria-invalid='true']::-moz-placeholder, +[type='month']:invalid::-moz-placeholder, +[type='month'][aria-invalid='true']::-moz-placeholder, +[type='number']:invalid::-moz-placeholder, +[type='number'][aria-invalid='true']::-moz-placeholder, +[type='password']:invalid::-moz-placeholder, +[type='password'][aria-invalid='true']::-moz-placeholder, +[type='search']:invalid::-moz-placeholder, +[type='search'][aria-invalid='true']::-moz-placeholder, +[type='tel']:invalid::-moz-placeholder, +[type='tel'][aria-invalid='true']::-moz-placeholder, +[type='text']:invalid::-moz-placeholder, +[type='text'][aria-invalid='true']::-moz-placeholder, +[type='time']:invalid::-moz-placeholder, +[type='time'][aria-invalid='true']::-moz-placeholder, +[type='url']:invalid::-moz-placeholder, +[type='url'][aria-invalid='true']::-moz-placeholder, +[type='week']:invalid::-moz-placeholder, +[type='week'][aria-invalid='true']::-moz-placeholder, +textarea:invalid::-moz-placeholder, +textarea[aria-invalid='true']::-moz-placeholder { + color: var(--bscpn-color-brand-1-light-1); +} +[type='date']:invalid::placeholder, +[type='date'][aria-invalid='true']::placeholder, +[type='datetime-local']:invalid::placeholder, +[type='datetime-local'][aria-invalid='true']::placeholder, +[type='email']:invalid::placeholder, +[type='email'][aria-invalid='true']::placeholder, +[type='month']:invalid::placeholder, +[type='month'][aria-invalid='true']::placeholder, +[type='number']:invalid::placeholder, +[type='number'][aria-invalid='true']::placeholder, +[type='password']:invalid::placeholder, +[type='password'][aria-invalid='true']::placeholder, +[type='search']:invalid::placeholder, +[type='search'][aria-invalid='true']::placeholder, +[type='tel']:invalid::placeholder, +[type='tel'][aria-invalid='true']::placeholder, +[type='text']:invalid::placeholder, +[type='text'][aria-invalid='true']::placeholder, +[type='time']:invalid::placeholder, +[type='time'][aria-invalid='true']::placeholder, +[type='url']:invalid::placeholder, +[type='url'][aria-invalid='true']::placeholder, +[type='week']:invalid::placeholder, +[type='week'][aria-invalid='true']::placeholder, +textarea:invalid::placeholder, +textarea[aria-invalid='true']::placeholder { + color: var(--bscpn-color-brand-1-light-1); } [type='date']:disabled, [type='datetime-local']:disabled, @@ -691,16 +944,68 @@ textarea[aria-invalid='true'] { [type='url']:disabled, [type='week']:disabled, textarea:disabled { - background: var(--bscpn-color-grayscale-light-2); - border-color: var(--bscpn-color-grayscale-light-2); + background: var(--bscpn-color-grayscale-light-4); + border-color: var(--bscpn-color-grayscale-light-1); box-shadow: none; color: var(--bscpn-color-grayscale-base); cursor: default; } +[type='date']:disabled::-moz-placeholder, +[type='datetime-local']:disabled::-moz-placeholder, +[type='email']:disabled::-moz-placeholder, +[type='month']:disabled::-moz-placeholder, +[type='number']:disabled::-moz-placeholder, +[type='password']:disabled::-moz-placeholder, +[type='search']:disabled::-moz-placeholder, +[type='tel']:disabled::-moz-placeholder, +[type='text']:disabled::-moz-placeholder, +[type='time']:disabled::-moz-placeholder, +[type='url']:disabled::-moz-placeholder, +[type='week']:disabled::-moz-placeholder, +textarea:disabled::-moz-placeholder { + color: var(--bscpn-color-grayscale-light-1); +} +[type='date']:disabled::placeholder, +[type='datetime-local']:disabled::placeholder, +[type='email']:disabled::placeholder, +[type='month']:disabled::placeholder, +[type='number']:disabled::placeholder, +[type='password']:disabled::placeholder, +[type='search']:disabled::placeholder, +[type='tel']:disabled::placeholder, +[type='text']:disabled::placeholder, +[type='time']:disabled::placeholder, +[type='url']:disabled::placeholder, +[type='week']:disabled::placeholder, +textarea:disabled::placeholder { + color: var(--bscpn-color-grayscale-light-1); +} +[type='date']:focus:not(:focus-visible), +[type='datetime-local']:focus:not(:focus-visible), +[type='email']:focus:not(:focus-visible), +[type='month']:focus:not(:focus-visible), +[type='number']:focus:not(:focus-visible), +[type='password']:focus:not(:focus-visible), +[type='search']:focus:not(:focus-visible), +[type='tel']:focus:not(:focus-visible), +[type='text']:focus:not(:focus-visible), +[type='time']:focus:not(:focus-visible), +[type='url']:focus:not(:focus-visible), +[type='week']:focus:not(:focus-visible), +textarea:focus:not(:focus-visible) { + outline-width: 0; +} @supports ( (-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none) ) { select { + --bscpn-select-padding-vertical: var(--bscpn-size-s2); + --bscpn-select-padding-horizontal: var(--bscpn-size-l1); + --bscpn-select-border-width: 0.1875rem; + --bscpn-select-border-top-right-radius: 10rem; + --bscpn-select-border-bottom-right-radius: 10rem; + --bscpn-select-border-bottom-left-radius: 10rem; + --bscpn-select-border-top-left-radius: 10rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; @@ -709,50 +1014,74 @@ textarea:disabled { background-position: right 0.75em top 50%; background-repeat: no-repeat; background-size: 1em; - border: var(--bscpn-size-s7) solid var(--bscpn-color-grayscale-base); - border-radius: 10rem; - color: var(--bscpn-color-grayscale-base); + border: 0.1875rem solid var(--bscpn-color-grayscale-dark-1); + border-radius: var(--bscpn-select-border-top-left-radius) + var(--bscpn-select-border-top-right-radius) + var(--bscpn-select-border-bottom-right-radius) + var(--bscpn-select-border-bottom-left-radius); + box-shadow: none; + color: var(--bscpn-color-grayscale-dark-1); cursor: pointer; - display: block; + display: flex; font: inherit; + font-weight: 700; + outline-offset: 0; overflow: hidden; - padding: var(--bscpn-size-s5) calc(var(--bscpn-size-s1) * 2) - var(--bscpn-size-s5) var(--bscpn-size-s1); + padding: calc( + var(--bscpn-select-padding-vertical) - + var(--bscpn-select-border-width, 0rem) + ) + calc( + var(--bscpn-select-padding-horizontal) - + var(--bscpn-select-border-width, 0rem) + ); text-overflow: ellipsis; transition: color 75ms ease-out, background-color 75ms ease-out, border 75ms ease-out; - width: 100%; } select::-ms-expand { display: none; } + select:focus, select:hover { - background-color: var(--bscpn-color-grayscale-base); + background-color: var(--bscpn-color-brand-1-light-4); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='var(--bscpn-color-grayscale-dark-1)' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89l35.41 35.57 35.57-35.57a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E"); - border-color: var(--bscpn-color-grayscale-base); + border-color: var(--bscpn-color-grayscale-dark-1); + box-shadow: none; color: var(--bscpn-color-grayscale-dark-1); } - select:active, - select:focus { - background-color: transparent; + select:focus-visible { + outline: var(--bscpn-color-brand-2-base) solid + calc(var(--bscpn-size-s7) + var(--bscpn-size-s7) / 2); + outline-offset: var(--bscpn-size-s7); + } + select:active { + background-color: var(--bscpn-color-grayscale-white); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='var(--bscpn-color-grayscale-light-1)' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89l35.41 35.57 35.57-35.57a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E"); - border-color: var(--bscpn-color-grayscale-dark-1); - color: var(--bscpn-color-grayscale-dark-1); + border-color: var(--bscpn-color-brand-1-dark-1); + box-shadow: var(--bscpn-shadow-default-box); + color: var(--bscpn-color-brand-1-dark-1); outline: none; } - select:invalid { + select:invalid, + select[aria-invalid='true'] { background-color: var(--bscpn-color-grayscale-white); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='var(--bscpn-color-warning-base)' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89l35.41 35.57 35.57-35.57a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E"); border-color: var(--bscpn-color-warning-base); + box-shadow: none; color: var(--bscpn-color-warning-base); } select[disabled] { - background-color: var(--bscpn-color-grayscale-light-2); + background-color: var(--bscpn-color-grayscale-light-3); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='var(--bscpn-color-grayscale-light-1)' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89l35.41 35.57 35.57-35.57a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E"); - border-color: var(--bscpn-color-grayscale-light-2); + border-color: var(--bscpn-color-grayscale-base); + box-shadow: none; color: var(--bscpn-color-grayscale-base); cursor: default; } + select:focus:not(:focus-visible) { + outline-width: 0; + } } [data-theme], html { @@ -826,49 +1155,46 @@ table { .bs-at-badge { align-items: center; border-radius: 9999rem; - box-shadow: var(--bscpn-at-badge-shadow); + box-shadow: var(--bscpn-badge-shadow); display: inline-flex; - gap: var(--bscpn-at-badge-gap); - padding: var(--bscpn-at-badge-padding-vertical) - var(--bscpn-at-badge-padding-horizontal); + gap: var(--bscpn-badge-gap); + padding: var(--bscpn-badge-padding-vertical) + var(--bscpn-badge-padding-horizontal); white-space: nowrap; } .bs-at-badge__prepend { margin-bottom: calc( - var(--bscpn-at-badge-prepend-spacing) - - var(--bscpn-at-badge-padding-vertical) + var(--bscpn-badge-prepend-spacing) - var(--bscpn-badge-padding-vertical) ); margin-left: calc( - var(--bscpn-at-badge-prepend-spacing) - - var(--bscpn-at-badge-padding-horizontal) + var(--bscpn-badge-prepend-spacing) - var(--bscpn-badge-padding-horizontal) ); margin-top: calc( - var(--bscpn-at-badge-prepend-spacing) - - var(--bscpn-at-badge-padding-vertical) + var(--bscpn-badge-prepend-spacing) - var(--bscpn-badge-padding-vertical) ); } :root, [data-theme='default'] { - --bscpn-at-badge-shadow: none; + --bscpn-badge-shadow: none; } .bs-at-badge { - --bscpn-at-badge-padding-horizontal: var(--bscpn-size-l1); - --bscpn-at-badge-padding-vertical: var(--bscpn-size-s6); - --bscpn-at-badge-prepend-spacing: 0rem; - --bscpn-at-badge-gap: var(--bscpn-size-s6); + --bscpn-badge-padding-horizontal: var(--bscpn-size-l1); + --bscpn-badge-padding-vertical: var(--bscpn-size-s6); + --bscpn-badge-prepend-spacing: 0rem; + --bscpn-badge-gap: var(--bscpn-size-s6); } @media screen and (min-width: 30em) { .bs-at-badge { - --bscpn-at-badge-padding-horizontal: var(--bscpn-size-l1); - --bscpn-at-badge-padding-vertical: var(--bscpn-size-s4); - --bscpn-at-badge-prepend-spacing: var(--bscpn-size-s6); - --bscpn-at-badge-gap: var(--bscpn-size-s4); + --bscpn-badge-padding-horizontal: var(--bscpn-size-l1); + --bscpn-badge-padding-vertical: var(--bscpn-size-s4); + --bscpn-badge-prepend-spacing: var(--bscpn-size-s6); + --bscpn-badge-gap: var(--bscpn-size-s4); } .bs-at-badge--small { - --bscpn-at-badge-padding-horizontal: var(--bscpn-size-l1); - --bscpn-at-badge-padding-vertical: var(--bscpn-size-s6); - --bscpn-at-badge-prepend-spacing: 0rem; - --bscpn-at-badge-gap: var(--bscpn-size-s6); + --bscpn-badge-padding-horizontal: var(--bscpn-size-l1); + --bscpn-badge-padding-vertical: var(--bscpn-size-s6); + --bscpn-badge-prepend-spacing: 0rem; + --bscpn-badge-gap: var(--bscpn-size-s6); } } .bs-at-bordered-header { @@ -883,53 +1209,50 @@ table { content: ''; } .bs-at-button { - --bscpn-at-button-border-top-right-radius: var( - --bscpn-at-button-border-radius - ); - --bscpn-at-button-border-bottom-right-radius: var( - --bscpn-at-button-border-radius - ); - --bscpn-at-button-border-bottom-left-radius: var( - --bscpn-at-button-border-radius - ); - --bscpn-at-button-border-top-left-radius: var( - --bscpn-at-button-border-radius - ); - --bscpn-at-button-transition: none; - --bscpn-at-button-justify-content: center; + --bscpn-button-border-top-right-radius: var(--bscpn-button-border-radius); + --bscpn-button-border-bottom-right-radius: var(--bscpn-button-border-radius); + --bscpn-button-border-bottom-left-radius: var(--bscpn-button-border-radius); + --bscpn-button-border-top-left-radius: var(--bscpn-button-border-radius); + --bscpn-button-transition: none; + --bscpn-button-justify-content: center; align-items: center; -webkit-appearance: none; - border-radius: var(--bscpn-at-button-border-top-left-radius) - var(--bscpn-at-button-border-top-right-radius) - var(--bscpn-at-button-border-bottom-right-radius) - var(--bscpn-at-button-border-bottom-left-radius); + background-color: var(--bscpn-button-background-color); + border-color: var(--bscpn-button-border-color); + border-radius: var(--bscpn-button-border-top-left-radius) + var(--bscpn-button-border-top-right-radius) + var(--bscpn-button-border-bottom-right-radius) + var(--bscpn-button-border-bottom-left-radius); border-style: solid; - border-width: var(--bscpn-at-button-border-width); + border-width: var(--bscpn-button-border-width); + box-shadow: var(--bscpn-button-box-shadow); + color: var(--bscpn-button-color); cursor: pointer; display: flex; flex-shrink: 0; font-family: inherit; - font-size: var(--bscpn-at-button-font-size); - font-weight: var(--bscpn-at-button-font-weight); - justify-content: var(--bscpn-at-button-justify-content); + font-size: var(--bscpn-button-font-size, inherit); + font-weight: var(--bscpn-button-font-weight, inherit); + justify-content: var(--bscpn-button-justify-content); + line-height: var(--bscpn-button-line-height, inherit); max-width: 100%; - min-height: var(--bscpn-at-button-min-height); - min-width: var(--bscpn-at-button-min-width); + min-height: var(--bscpn-button-min-height); + min-width: var(--bscpn-button-min-width); outline-offset: 0; overflow: visible; padding: calc( - var(--bscpn-at-button-padding-vertical) - - var(--bscpn-at-button-border-width, 0rem) + var(--bscpn-button-padding-vertical) - + var(--bscpn-button-border-width, 0rem) ) calc( - var(--bscpn-at-button-padding-horizontal) - - var(--bscpn-at-button-border-width, 0rem) + var(--bscpn-button-padding-horizontal) - + var(--bscpn-button-border-width, 0rem) ); position: relative; text-align: center; text-decoration: none; touch-action: manipulation; - transition: var(--bscpn-at-button-transition); + transition: var(--bscpn-button-transition); -webkit-user-select: none; -moz-user-select: none; user-select: none; @@ -937,6 +1260,19 @@ table { } .bs-at-button:focus, .bs-at-button:hover { + background-color: var(--bscpn-button-hover-background-color); + border-color: var(--bscpn-button-hover-border-color); + box-shadow: var(--bscpn-button-hover-box-shadow); + color: var(--bscpn-button-hover-color); + outline-width: 0; + text-decoration: none; + z-index: 1; +} +.bs-at-button:active { + background-color: var(--bscpn-button-active-background-color); + border-color: var(--bscpn-button-active-border-color); + box-shadow: var(--bscpn-button-active-box-shadow); + color: var(--bscpn-button-active-color); outline-width: 0; text-decoration: none; z-index: 1; @@ -951,6 +1287,10 @@ table { .bs-at-button[aria-expanded='true'], .bs-at-button[aria-pressed='true'], .bs-at-button[aria-selected='true'] { + background-color: var(--bscpn-button-pressed-background-color); + border-color: var(--bscpn-button-pressed-border-color); + box-shadow: var(--bscpn-button-pressed-box-shadow); + color: var(--bscpn-button-pressed-color); z-index: 2; } .bs-at-button:disabled, @@ -959,6 +1299,10 @@ table { .bs-at-button[aria-disabled='true'], .bs-at-button[aria-disabled='true']:focus, .bs-at-button[aria-disabled='true']:hover { + background-color: var(--bscpn-button-disabled-background-color); + border-color: var(--bscpn-button-disabled-border-color); + box-shadow: var(--bscpn-button-disabled-box-shadow); + color: var(--bscpn-button-disabled-color); cursor: not-allowed; } .bs-at-button__avatar, @@ -973,46 +1317,68 @@ table { } .bs-at-button, .bs-at-button:visited { - background-color: var(--bscpn-at-button-background-color); - border-color: var(--bscpn-at-button-border-color); - box-shadow: var(--bscpn-at-button-box-shadow); - color: var(--bscpn-at-button-color); + --bscpn-button-color: var(--bscpn-button--primary-color); + --bscpn-button-background-color: var( + --bscpn-button--primary-background-color + ); + --bscpn-button-border-color: var(--bscpn-button--primary-border-color); + --bscpn-button-box-shadow: var(--bscpn-button--primary-box-shadow); } :root, [data-theme='default'] { - --bscpn-at-button-color: var(--bscpn-color-grayscale-black); + --bscpn-button--primary-color: var(--bscpn-color-grayscale-black); } [data-theme='dark'] { - --bscpn-at-button-color: var(--bscpn-color-grayscale-white); + --bscpn-button--primary-color: var(--bscpn-color-grayscale-white); } .bs-at-button--secondary, .bs-at-button--secondary:visited { - background-color: var(--bscpn-at-button--secondary-background-color); - border-color: var(--bscpn-at-button--secondary-border-color); - box-shadow: var(--bscpn-at-button--secondary-box-shadow); - color: var(--bscpn-at-button--secondary-color); + --bscpn-button-color: var(--bscpn-button--secondary-color); + --bscpn-button-background-color: var( + --bscpn-button--secondary-background-color + ); + --bscpn-button-border-color: var(--bscpn-button--secondary-border-color); + --bscpn-button-box-shadow: var(--bscpn-button--secondary-box-shadow); } .bs-at-button--secondary:focus, .bs-at-button--secondary:hover { - background-color: var(--bscpn-at-button--secondary-hover-background-color); - border-color: var(--bscpn-at-button--secondary-hover-border-color); - box-shadow: var(--bscpn-at-button--secondary-hover-box-shadow); - color: var(--bscpn-at-button--secondary-hover-color); + --bscpn-button-hover-color: var(--bscpn-button--secondary-hover-color); + --bscpn-button-hover-background-color: var( + --bscpn-button--secondary-hover-background-color + ); + --bscpn-button-hover-border-color: var( + --bscpn-button--secondary-hover-border-color + ); + --bscpn-button-hover-box-shadow: var( + --bscpn-button--secondary-hover-box-shadow + ); } .bs-at-button--secondary:active { - background-color: var(--bscpn-at-button--secondary-active-background-color); - border-color: var(--bscpn-at-button--secondary-active-border-color); - box-shadow: var(--bscpn-at-button--secondary-active-box-shadow); - color: var(--bscpn-at-button--secondary-active-color); + --bscpn-button-active-color: var(--bscpn-button--secondary-active-color); + --bscpn-button-active-background-color: var( + --bscpn-button--secondary-active-background-color + ); + --bscpn-button-active-border-color: var( + --bscpn-button--secondary-active-border-color + ); + --bscpn-button-active-box-shadow: var( + --bscpn-button--secondary-active-box-shadow + ); } .bs-at-button--secondary[aria-current], .bs-at-button--secondary[aria-expanded='true'], .bs-at-button--secondary[aria-pressed='true'], .bs-at-button--secondary[aria-selected='true'] { - background-color: var(--bscpn-at-button--secondary-pressed-background-color); - border-color: var(--bscpn-at-button--secondary-pressed-border-color); - box-shadow: var(--bscpn-at-button--secondary-pressed-box-shadow); - color: var(--bscpn-at-button--secondary-pressed-color); + --bscpn-button-pressed-color: var(--bscpn-button--secondary-pressed-color); + --bscpn-button-pressed-background-color: var( + --bscpn-button--secondary-pressed-background-color + ); + --bscpn-button-pressed-border-color: var( + --bscpn-button--secondary-pressed-border-color + ); + --bscpn-button-pressed-box-shadow: var( + --bscpn-button--secondary-pressed-box-shadow + ); } .bs-at-button--secondary:disabled, .bs-at-button--secondary:disabled:focus, @@ -1020,33 +1386,39 @@ table { .bs-at-button--secondary[aria-disabled='true'], .bs-at-button--secondary[aria-disabled='true']:focus, .bs-at-button--secondary[aria-disabled='true']:hover { - background-color: var(--bscpn-at-button--secondary-disabled-background-color); - border-color: var(--bscpn-at-button--secondary-disabled-border-color); - box-shadow: var(--bscpn-at-button--secondary-disabled-box-shadow); - color: var(--bscpn-at-button--secondary-disabled-color); + --bscpn-button-disabled-color: var(--bscpn-button--secondary-disabled-color); + --bscpn-button-disabled-background-color: var( + --bscpn-button--secondary-disabled-background-color + ); + --bscpn-button-disabled-border-color: var( + --bscpn-button--secondary-disabled-border-color + ); + --bscpn-button-disabled-box-shadow: var( + --bscpn-button--secondary-disabled-box-shadow + ); } :root, [data-theme='default'] { - --bscpn-at-button--secondary-color: var(--bscpn-color-grayscale-dark-2); - --bscpn-at-button--secondary-background-color: var( + --bscpn-button--secondary-color: var(--bscpn-color-grayscale-dark-2); + --bscpn-button--secondary-background-color: var( --bscpn-color-grayscale-light-3 ); - --bscpn-at-button--secondary-box-shadow: none; - --bscpn-at-button--secondary-hover-color: var(--bscpn-color-grayscale-dark-2); - --bscpn-at-button--secondary-hover-background-color: var( + --bscpn-button--secondary-box-shadow: none; + --bscpn-button--secondary-hover-color: var(--bscpn-color-grayscale-dark-2); + --bscpn-button--secondary-hover-background-color: var( --bscpn-color-brand-1-light-2 ); - --bscpn-at-button--secondary-hover-box-shadow: none; - --bscpn-at-button--secondary-active-color: var(--bscpn-color-brand-1-dark-2); - --bscpn-at-button--secondary-active-background-color: var( + --bscpn-button--secondary-hover-box-shadow: none; + --bscpn-button--secondary-active-color: var(--bscpn-color-brand-1-dark-2); + --bscpn-button--secondary-active-background-color: var( --bscpn-color-brand-1-light-2 ); - --bscpn-at-button--secondary-active-box-shadow: none; - --bscpn-at-button--secondary-pressed-color: var(--bscpn-color-brand-1-dark-1); - --bscpn-at-button--secondary-pressed-background-color: var( + --bscpn-button--secondary-active-box-shadow: none; + --bscpn-button--secondary-pressed-color: var(--bscpn-color-brand-1-dark-1); + --bscpn-button--secondary-pressed-background-color: var( --bscpn-color-brand-1-light-2 ); - --bscpn-at-button--secondary-pressed-box-shadow: 0 0 + --bscpn-button--secondary-pressed-box-shadow: 0 0 calc(var(--bscpn-size-s4) / 4) rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.075), 0 0 calc(var(--bscpn-size-s4) / 3) @@ -1055,35 +1427,33 @@ table { rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.075), 0 0 calc(var(--bscpn-size-s4) / 1) rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.075); - --bscpn-at-button--secondary-disabled-color: var( - --bscpn-color-grayscale-base - ); - --bscpn-at-button--secondary-disabled-background-color: var( + --bscpn-button--secondary-disabled-color: var(--bscpn-color-grayscale-base); + --bscpn-button--secondary-disabled-background-color: var( --bscpn-color-grayscale-light-3 ); - --bscpn-at-button--secondary-disabled-box-shadow: none; + --bscpn-button--secondary-disabled-box-shadow: none; } [data-theme='dark'] { - --bscpn-at-button--secondary-color: var(--bscpn-color-grayscale-light-2); - --bscpn-at-button--secondary-background-color: var( + --bscpn-button--secondary-color: var(--bscpn-color-grayscale-light-2); + --bscpn-button--secondary-background-color: var( --bscpn-color-grayscale-dark-1 ); - --bscpn-at-button--secondary-box-shadow: none; - --bscpn-at-button--secondary-hover-color: var(--bscpn-color-grayscale-dark-2); - --bscpn-at-button--secondary-hover-background-color: var( + --bscpn-button--secondary-box-shadow: none; + --bscpn-button--secondary-hover-color: var(--bscpn-color-grayscale-dark-2); + --bscpn-button--secondary-hover-background-color: var( --bscpn-color-brand-1-light-1 ); - --bscpn-at-button--secondary-hover-box-shadow: none; - --bscpn-at-button--secondary-active-color: var(--bscpn-color-brand-1-dark-1); - --bscpn-at-button--secondary-active-background-color: var( + --bscpn-button--secondary-hover-box-shadow: none; + --bscpn-button--secondary-active-color: var(--bscpn-color-brand-1-dark-1); + --bscpn-button--secondary-active-background-color: var( --bscpn-color-brand-1-light-1 ); - --bscpn-at-button--secondary-active-box-shadow: none; - --bscpn-at-button--secondary-pressed-color: var(--bscpn-color-brand-1-base); - --bscpn-at-button--secondary-pressed-background-color: var( + --bscpn-button--secondary-active-box-shadow: none; + --bscpn-button--secondary-pressed-color: var(--bscpn-color-brand-1-base); + --bscpn-button--secondary-pressed-background-color: var( --bscpn-color-brand-1-light-1 ); - --bscpn-at-button--secondary-pressed-box-shadow: 0 0 + --bscpn-button--secondary-pressed-box-shadow: 0 0 calc(var(--bscpn-size-s4) / 4) rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.075), 0 0 calc(var(--bscpn-size-s4) / 3) @@ -1092,42 +1462,62 @@ table { rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.075), 0 0 calc(var(--bscpn-size-s4) / 1) rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.075); - --bscpn-at-button--secondary-disabled-color: var( + --bscpn-button--secondary-disabled-color: var( --bscpn-color-grayscale-light-1 ); - --bscpn-at-button--secondary-disabled-background-color: var( + --bscpn-button--secondary-disabled-background-color: var( --bscpn-color-grayscale-dark-2 ); - --bscpn-at-button--secondary-disabled-box-shadow: none; + --bscpn-button--secondary-disabled-box-shadow: none; } .bs-at-button--outline, .bs-at-button--outline:visited { - background-color: var(--bscpn-at-button--outline-background-color); - border-color: var(--bscpn-at-button--outline-border-color); - box-shadow: var(--bscpn-at-button--outline-box-shadow); - color: var(--bscpn-at-button--outline-color); + --bscpn-button-color: var(--bscpn-button--outline-color); + --bscpn-button-background-color: var( + --bscpn-button--outline-background-color + ); + --bscpn-button-border-color: var(--bscpn-button--outline-border-color); + --bscpn-button-box-shadow: var(--bscpn-button--outline-box-shadow); } .bs-at-button--outline:focus, .bs-at-button--outline:hover { - background-color: var(--bscpn-at-button--outline-hover-background-color); - border-color: var(--bscpn-at-button--outline-hover-border-color); - box-shadow: var(--bscpn-at-button--outline-hover-box-shadow); - color: var(--bscpn-at-button--outline-hover-color); + --bscpn-button-hover-color: var(--bscpn-button--outline-hover-color); + --bscpn-button-hover-background-color: var( + --bscpn-button--outline-hover-background-color + ); + --bscpn-button-hover-border-color: var( + --bscpn-button--outline-hover-border-color + ); + --bscpn-button-hover-box-shadow: var( + --bscpn-button--outline-hover-box-shadow + ); } .bs-at-button--outline:active { - background-color: var(--bscpn-at-button--outline-active-background-color); - border-color: var(--bscpn-at-button--outline-active-border-color); - box-shadow: var(--bscpn-at-button--outline-active-box-shadow); - color: var(--bscpn-at-button--outline-active-color); + --bscpn-button-active-color: var(--bscpn-button--outline-active-color); + --bscpn-button-active-background-color: var( + --bscpn-button--outline-active-background-color + ); + --bscpn-button-active-border-color: var( + --bscpn-button--outline-active-border-color + ); + --bscpn-button-active-box-shadow: var( + --bscpn-button--outline-active-box-shadow + ); } .bs-at-button--outline[aria-current], .bs-at-button--outline[aria-expanded='true'], .bs-at-button--outline[aria-pressed='true'], .bs-at-button--outline[aria-selected='true'] { - background-color: var(--bscpn-at-button--outline-pressed-background-color); - border-color: var(--bscpn-at-button--outline-pressed-border-color); - box-shadow: var(--bscpn-at-button--outline-pressed-box-shadow); - color: var(--bscpn-at-button--outline-pressed-color); + --bscpn-button-pressed-color: var(--bscpn-button--outline-pressed-color); + --bscpn-button-pressed-background-color: var( + --bscpn-button--outline-pressed-background-color + ); + --bscpn-button-pressed-border-color: var( + --bscpn-button--outline-pressed-border-color + ); + --bscpn-button-pressed-box-shadow: var( + --bscpn-button--outline-pressed-box-shadow + ); } .bs-at-button--outline:disabled, .bs-at-button--outline:disabled:focus, @@ -1135,44 +1525,47 @@ table { .bs-at-button--outline[aria-disabled='true'], .bs-at-button--outline[aria-disabled='true']:focus, .bs-at-button--outline[aria-disabled='true']:hover { - background-color: var(--bscpn-at-button--outline-disabled-background-color); - border-color: var(--bscpn-at-button--outline-disabled-border-color); - box-shadow: var(--bscpn-at-button--outline-disabled-box-shadow); - color: var(--bscpn-at-button--outline-disabled-color); + --bscpn-button-disabled-color: var(--bscpn-button--outline-disabled-color); + --bscpn-button-disabled-background-color: var( + --bscpn-button--outline-disabled-background-color + ); + --bscpn-button-disabled-border-color: var( + --bscpn-button--outline-disabled-border-color + ); + --bscpn-button-disabled-box-shadow: var( + --bscpn-button--outline-disabled-box-shadow + ); } :root, [data-theme='default'] { - --bscpn-at-button--outline-color: var(--bscpn-color-grayscale-dark-2); - --bscpn-at-button--outline-background-color: var( - --bscpn-color-grayscale-white - ); - --bscpn-at-button--outline-border-color: var(--bscpn-color-grayscale-dark-2); - --bscpn-at-button--outline-box-shadow: none; - --bscpn-at-button--outline-hover-color: var(--bscpn-color-grayscale-dark-2); - --bscpn-at-button--outline-hover-background-color: var( + --bscpn-button--outline-color: var(--bscpn-color-grayscale-dark-2); + --bscpn-button--outline-background-color: var(--bscpn-color-grayscale-white); + --bscpn-button--outline-border-color: var(--bscpn-color-grayscale-dark-2); + --bscpn-button--outline-box-shadow: none; + --bscpn-button--outline-hover-color: var(--bscpn-color-grayscale-dark-2); + --bscpn-button--outline-hover-background-color: var( --bscpn-color-brand-1-light-4 ); - --bscpn-at-button--outline-hover-border-color: var( + --bscpn-button--outline-hover-border-color: var( --bscpn-color-grayscale-dark-2 ); - --bscpn-at-button--outline-hover-box-shadow: none; - --bscpn-at-button--outline-active-color: var(--bscpn-color-brand-1-dark-1); - --bscpn-at-button--outline-active-background-color: var( + --bscpn-button--outline-hover-box-shadow: none; + --bscpn-button--outline-active-color: var(--bscpn-color-brand-1-dark-1); + --bscpn-button--outline-active-background-color: var( --bscpn-color-brand-1-light-4 ); - --bscpn-at-button--outline-active-border-color: var( + --bscpn-button--outline-active-border-color: var( --bscpn-color-brand-1-dark-1 ); - --bscpn-at-button--outline-active-box-shadow: none; - --bscpn-at-button--outline-pressed-color: var(--bscpn-color-brand-1-dark-1); - --bscpn-at-button--outline-pressed-background-color: var( + --bscpn-button--outline-active-box-shadow: none; + --bscpn-button--outline-pressed-color: var(--bscpn-color-brand-1-dark-1); + --bscpn-button--outline-pressed-background-color: var( --bscpn-color-grayscale-white ); - --bscpn-at-button--outline-pressed-border-color: var( + --bscpn-button--outline-pressed-border-color: var( --bscpn-color-brand-1-dark-1 ); - --bscpn-at-button--outline-pressed-box-shadow: 0 0 - calc(var(--bscpn-size-m) / 4) + --bscpn-button--outline-pressed-box-shadow: 0 0 calc(var(--bscpn-size-m) / 4) rgba(var(--bscpn-color-brand-1-dark-1-rgb), 0.125), 0 0 calc(var(--bscpn-size-m) / 3) rgba(var(--bscpn-color-brand-1-dark-1-rgb), 0.125), @@ -1180,45 +1573,42 @@ table { rgba(var(--bscpn-color-brand-1-dark-1-rgb), 0.125), 0 0 calc(var(--bscpn-size-m) / 1) rgba(var(--bscpn-color-brand-1-dark-1-rgb), 0.125); - --bscpn-at-button--outline-disabled-color: var(--bscpn-color-grayscale-base); - --bscpn-at-button--outline-disabled-background-color: transparent; - --bscpn-at-button--outline-disabled-border-color: var( + --bscpn-button--outline-disabled-color: var(--bscpn-color-grayscale-base); + --bscpn-button--outline-disabled-background-color: transparent; + --bscpn-button--outline-disabled-border-color: var( --bscpn-color-grayscale-base ); - --bscpn-at-button--outline-disabled-box-shadow: none; + --bscpn-button--outline-disabled-box-shadow: none; } [data-theme='dark'] { - --bscpn-at-button--outline-color: var(--bscpn-color-grayscale-light-2); - --bscpn-at-button--outline-background-color: var( - --bscpn-color-grayscale-dark-1 - ); - --bscpn-at-button--outline-border-color: var(--bscpn-color-grayscale-dark-1); - --bscpn-at-button--outline-box-shadow: none; - --bscpn-at-button--outline-hover-color: var(--bscpn-color-grayscale-dark-2); - --bscpn-at-button--outline-hover-background-color: var( + --bscpn-button--outline-color: var(--bscpn-color-grayscale-light-2); + --bscpn-button--outline-background-color: var(--bscpn-color-grayscale-dark-1); + --bscpn-button--outline-border-color: var(--bscpn-color-grayscale-dark-1); + --bscpn-button--outline-box-shadow: none; + --bscpn-button--outline-hover-color: var(--bscpn-color-grayscale-dark-2); + --bscpn-button--outline-hover-background-color: var( --bscpn-color-brand-1-light-1 ); - --bscpn-at-button--outline-hover-border-color: var( + --bscpn-button--outline-hover-border-color: var( --bscpn-color-brand-1-light-1 ); - --bscpn-at-button--outline-hover-box-shadow: none; - --bscpn-at-button--outline-active-color: var(--bscpn-color-brand-1-dark-1); - --bscpn-at-button--outline-active-background-color: var( + --bscpn-button--outline-hover-box-shadow: none; + --bscpn-button--outline-active-color: var(--bscpn-color-brand-1-dark-1); + --bscpn-button--outline-active-background-color: var( --bscpn-color-brand-1-light-1 ); - --bscpn-at-button--outline-active-border-color: var( + --bscpn-button--outline-active-border-color: var( --bscpn-color-brand-1-light-1 ); - --bscpn-at-button--outline-active-box-shadow: none; - --bscpn-at-button--outline-pressed-color: var(--bscpn-color-brand-1-base); - --bscpn-at-button--outline-pressed-background-color: var( + --bscpn-button--outline-active-box-shadow: none; + --bscpn-button--outline-pressed-color: var(--bscpn-color-brand-1-base); + --bscpn-button--outline-pressed-background-color: var( --bscpn-color-brand-1-light-1 ); - --bscpn-at-button--outline-pressed-border-color: var( + --bscpn-button--outline-pressed-border-color: var( --bscpn-color-brand-1-light-1 ); - --bscpn-at-button--outline-pressed-box-shadow: 0 0 - calc(var(--bscpn-size-m) / 4) + --bscpn-button--outline-pressed-box-shadow: 0 0 calc(var(--bscpn-size-m) / 4) rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.125), 0 0 calc(var(--bscpn-size-m) / 3) rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.125), @@ -1226,47 +1616,63 @@ table { rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.125), 0 0 calc(var(--bscpn-size-m) / 1) rgba(var(--bscpn-color-brand-1-light-1-rgb), 0.125); - --bscpn-at-button--outline-disabled-color: var( - --bscpn-color-grayscale-light-1 - ); - --bscpn-at-button--outline-disabled-background-color: var( + --bscpn-button--outline-disabled-color: var(--bscpn-color-grayscale-light-1); + --bscpn-button--outline-disabled-background-color: var( --bscpn-color-grayscale-dark-2 ); - --bscpn-at-button--outline-disabled-border-color: var( + --bscpn-button--outline-disabled-border-color: var( --bscpn-color-grayscale-dark-2 ); - --bscpn-at-button--outline-disabled-box-shadow: none; + --bscpn-button--outline-disabled-box-shadow: none; } .bs-at-button--transparent, .bs-at-button--transparent:visited { - background-color: var(--bscpn-at-button--transparent-background-color); - border-color: var(--bscpn-at-button--transparent-border-color); - box-shadow: var(--bscpn-at-button--transparent-box-shadow); - color: var(--bscpn-at-button--transparent-color); + --bscpn-button-color: var(--bscpn-button--transparent-color); + --bscpn-button-background-color: var( + --bscpn-button--transparent-background-color + ); + --bscpn-button-border-color: var(--bscpn-button--transparent-border-color); + --bscpn-button-box-shadow: var(--bscpn-button--transparent-box-shadow); } .bs-at-button--transparent:focus, .bs-at-button--transparent:hover { - background-color: var(--bscpn-at-button--transparent-hover-background-color); - border-color: var(--bscpn-at-button--transparent-hover-border-color); - box-shadow: var(--bscpn-at-button--transparent-hover-box-shadow); - color: var(--bscpn-at-button--transparent-hover-color); + --bscpn-button-hover-color: var(--bscpn-button--transparent-hover-color); + --bscpn-button-hover-background-color: var( + --bscpn-button--transparent-hover-background-color + ); + --bscpn-button-hover-border-color: var( + --bscpn-button--transparent-hover-border-color + ); + --bscpn-button-hover-box-shadow: var( + --bscpn-button--transparent-hover-box-shadow + ); } .bs-at-button--transparent:active { - background-color: var(--bscpn-at-button--transparent-active-background-color); - border-color: var(--bscpn-at-button--transparent-active-border-color); - box-shadow: var(--bscpn-at-button--transparent-active-box-shadow); - color: var(--bscpn-at-button--transparent-active-color); + --bscpn-button-active-color: var(--bscpn-button--transparent-active-color); + --bscpn-button-active-background-color: var( + --bscpn-button--transparent-active-background-color + ); + --bscpn-button-active-border-color: var( + --bscpn-button--transparent-active-border-color + ); + --bscpn-button-active-box-shadow: var( + --bscpn-button--transparent-active-box-shadow + ); } .bs-at-button--transparent[aria-current], .bs-at-button--transparent[aria-expanded='true'], .bs-at-button--transparent[aria-pressed='true'], .bs-at-button--transparent[aria-selected='true'] { - background-color: var( - --bscpn-at-button--transparent-pressed-background-color + --bscpn-button-pressed-color: var(--bscpn-button--transparent-pressed-color); + --bscpn-button-pressed-background-color: var( + --bscpn-button--transparent-pressed-background-color + ); + --bscpn-button-pressed-border-color: var( + --bscpn-button--transparent-pressed-border-color + ); + --bscpn-button-pressed-box-shadow: var( + --bscpn-button--transparent-pressed-box-shadow ); - border-color: var(--bscpn-at-button--transparent-pressed-border-color); - box-shadow: var(--bscpn-at-button--transparent-pressed-box-shadow); - color: var(--bscpn-at-button--transparent-pressed-color); } .bs-at-button--transparent:disabled, .bs-at-button--transparent:disabled:focus, @@ -1274,47 +1680,47 @@ table { .bs-at-button--transparent[aria-disabled='true'], .bs-at-button--transparent[aria-disabled='true']:focus, .bs-at-button--transparent[aria-disabled='true']:hover { - background-color: var( - --bscpn-at-button--transparent-disabled-background-color + --bscpn-button-disabled-color: var( + --bscpn-button--transparent-disabled-color + ); + --bscpn-button-disabled-background-color: var( + --bscpn-button--transparent-disabled-background-color + ); + --bscpn-button-disabled-border-color: var( + --bscpn-button--transparent-disabled-border-color + ); + --bscpn-button-disabled-box-shadow: var( + --bscpn-button--transparent-disabled-box-shadow ); - border-color: var(--bscpn-at-button--transparent-disabled-border-color); - box-shadow: var(--bscpn-at-button--transparent-disabled-box-shadow); - color: var(--bscpn-at-button--transparent-disabled-color); } :root, [data-theme='default'] { - --bscpn-at-button--transparent-color: var(--bscpn-color-grayscale-dark-2); - --bscpn-at-button--transparent-background-color: transparent; - --bscpn-at-button--transparent-border-color: transparent; - --bscpn-at-button--transparent-box-shadow: none; - --bscpn-at-button--transparent-hover-color: var( - --bscpn-color-grayscale-dark-2 - ); - --bscpn-at-button--transparent-hover-background-color: var( + --bscpn-button--transparent-color: var(--bscpn-color-grayscale-dark-2); + --bscpn-button--transparent-background-color: transparent; + --bscpn-button--transparent-border-color: transparent; + --bscpn-button--transparent-box-shadow: none; + --bscpn-button--transparent-hover-color: var(--bscpn-color-grayscale-dark-2); + --bscpn-button--transparent-hover-background-color: var( --bscpn-color-brand-1-light-4 ); - --bscpn-at-button--transparent-hover-border-color: transparent; - --bscpn-at-button--transparent-hover-box-shadow: none; - --bscpn-at-button--transparent-active-color: var( - --bscpn-color-brand-1-dark-1 - ); - --bscpn-at-button--transparent-active-background-color: var( + --bscpn-button--transparent-hover-border-color: transparent; + --bscpn-button--transparent-hover-box-shadow: none; + --bscpn-button--transparent-active-color: var(--bscpn-color-brand-1-dark-1); + --bscpn-button--transparent-active-background-color: var( --bscpn-color-brand-1-light-4 ); - --bscpn-at-button--transparent-active-border-color: var( - --bscpn-color-brand-1-dark-1 - ); - --bscpn-at-button--transparent-active-box-shadow: none; - --bscpn-at-button--transparent-pressed-color: var( + --bscpn-button--transparent-active-border-color: var( --bscpn-color-brand-1-dark-1 ); - --bscpn-at-button--transparent-pressed-background-color: var( + --bscpn-button--transparent-active-box-shadow: none; + --bscpn-button--transparent-pressed-color: var(--bscpn-color-brand-1-dark-1); + --bscpn-button--transparent-pressed-background-color: var( --bscpn-color-grayscale-white ); - --bscpn-at-button--transparent-pressed-border-color: var( + --bscpn-button--transparent-pressed-border-color: var( --bscpn-color-brand-1-dark-1 ); - --bscpn-at-button--transparent-pressed-box-shadow: 0 0 + --bscpn-button--transparent-pressed-box-shadow: 0 0 calc(var(--bscpn-size-m) / 4) rgba(var(--bscpn-color-brand-1-dark-1-rgb), 0.125), 0 0 calc(var(--bscpn-size-m) / 3) @@ -1323,48 +1729,40 @@ table { rgba(var(--bscpn-color-brand-1-dark-1-rgb), 0.125), 0 0 calc(var(--bscpn-size-m) / 1) rgba(var(--bscpn-color-brand-1-dark-1-rgb), 0.125); - --bscpn-at-button--transparent-disabled-color: var( - --bscpn-color-grayscale-base - ); - --bscpn-at-button--transparent-disabled-background-color: var( + --bscpn-button--transparent-disabled-color: var(--bscpn-color-grayscale-base); + --bscpn-button--transparent-disabled-background-color: var( --bscpn-color-grayscale-light-3 ); - --bscpn-at-button--transparent-disabled-border-color: var( + --bscpn-button--transparent-disabled-border-color: var( --bscpn-color-grayscale-light-3 ); - --bscpn-at-button--transparent-disabled-box-shadow: none; + --bscpn-button--transparent-disabled-box-shadow: none; } [data-theme='dark'] { - --bscpn-at-button--transparent-color: var(--bscpn-color-grayscale-light-1); - --bscpn-at-button--transparent-background-color: transparent; - --bscpn-at-button--transparent-border-color: transparent; - --bscpn-at-button--transparent-box-shadow: none; - --bscpn-at-button--transparent-hover-color: var( - --bscpn-color-brand-1-light-1 - ); - --bscpn-at-button--transparent-hover-background-color: transparent; - --bscpn-at-button--transparent-hover-border-color: transparent; - --bscpn-at-button--transparent-hover-box-shadow: none; - --bscpn-at-button--transparent-active-color: var( - --bscpn-color-brand-1-light-1 - ); - --bscpn-at-button--transparent-active-background-color: var( + --bscpn-button--transparent-color: var(--bscpn-color-grayscale-light-1); + --bscpn-button--transparent-background-color: transparent; + --bscpn-button--transparent-border-color: transparent; + --bscpn-button--transparent-box-shadow: none; + --bscpn-button--transparent-hover-color: var(--bscpn-color-brand-1-light-1); + --bscpn-button--transparent-hover-background-color: transparent; + --bscpn-button--transparent-hover-border-color: transparent; + --bscpn-button--transparent-hover-box-shadow: none; + --bscpn-button--transparent-active-color: var(--bscpn-color-brand-1-light-1); + --bscpn-button--transparent-active-background-color: var( --bscpn-color-grayscale-dark-2 ); - --bscpn-at-button--transparent-active-border-color: var( + --bscpn-button--transparent-active-border-color: var( --bscpn-color-grayscale-dark-2 ); - --bscpn-at-button--transparent-active-box-shadow: none; - --bscpn-at-button--transparent-pressed-color: var( - --bscpn-color-grayscale-white - ); - --bscpn-at-button--transparent-pressed-background-color: var( + --bscpn-button--transparent-active-box-shadow: none; + --bscpn-button--transparent-pressed-color: var(--bscpn-color-grayscale-white); + --bscpn-button--transparent-pressed-background-color: var( --bscpn-color-grayscale-dark-2 ); - --bscpn-at-button--transparent-pressed-border-color: var( + --bscpn-button--transparent-pressed-border-color: var( --bscpn-color-grayscale-dark-2 ); - --bscpn-at-button--transparent-pressed-box-shadow: 0 0 + --bscpn-button--transparent-pressed-box-shadow: 0 0 calc(var(--bscpn-size-m) / 4) rgba(var(--bscpn-color-grayscale-dark-2-rgb), 0.125), 0 0 calc(var(--bscpn-size-m) / 3) @@ -1373,45 +1771,59 @@ table { rgba(var(--bscpn-color-grayscale-dark-2-rgb), 0.125), 0 0 calc(var(--bscpn-size-m) / 1) rgba(var(--bscpn-color-grayscale-dark-2-rgb), 0.125); - --bscpn-at-button--transparent-disabled-color: var( + --bscpn-button--transparent-disabled-color: var( --bscpn-color-grayscale-light-1 ); - --bscpn-at-button--transparent-disabled-background-color: var( + --bscpn-button--transparent-disabled-background-color: var( --bscpn-color-grayscale-dark-2 ); - --bscpn-at-button--transparent-disabled-border-color: var( + --bscpn-button--transparent-disabled-border-color: var( --bscpn-color-grayscale-dark-2 ); - --bscpn-at-button--transparent-disabled-box-shadow: none; + --bscpn-button--transparent-disabled-box-shadow: none; } .bs-at-button--tab, .bs-at-button--tab:visited { - background-color: var(--bscpn-at-button--tab-background-color); - border-color: var(--bscpn-at-button--tab-border-color); - box-shadow: var(--bscpn-at-button--tab-box-shadow); - color: var(--bscpn-at-button--tab-color); + --bscpn-button-color: var(--bscpn-button--tab-color); + --bscpn-button-background-color: var(--bscpn-button--tab-background-color); + --bscpn-button-border-color: var(--bscpn-button--tab-border-color); + --bscpn-button-box-shadow: var(--bscpn-button--tab-box-shadow); } .bs-at-button--tab:focus, .bs-at-button--tab:hover { - background-color: var(--bscpn-at-button--tab-hover-background-color); - border-color: var(--bscpn-at-button--tab-hover-border-color); - box-shadow: var(--bscpn-at-button--tab-hover-box-shadow); - color: var(--bscpn-at-button--tab-hover-color); + --bscpn-button-hover-color: var(--bscpn-button--tab-hover-color); + --bscpn-button-hover-background-color: var( + --bscpn-button--tab-hover-background-color + ); + --bscpn-button-hover-border-color: var( + --bscpn-button--tab-hover-border-color + ); + --bscpn-button-hover-box-shadow: var(--bscpn-button--tab-hover-box-shadow); } .bs-at-button--tab:active { - background-color: var(--bscpn-at-button--tab-active-background-color); - border-color: var(--bscpn-at-button--tab-active-border-color); - box-shadow: var(--bscpn-at-button--tab-active-box-shadow); - color: var(--bscpn-at-button--tab-active-color); + --bscpn-button-active-color: var(--bscpn-button--tab-active-color); + --bscpn-button-active-background-color: var( + --bscpn-button--tab-active-background-color + ); + --bscpn-button-active-border-color: var( + --bscpn-button--tab-active-border-color + ); + --bscpn-button-active-box-shadow: var(--bscpn-button--tab-active-box-shadow); } .bs-at-button--tab[aria-current], .bs-at-button--tab[aria-expanded='true'], .bs-at-button--tab[aria-pressed='true'], .bs-at-button--tab[aria-selected='true'] { - background-color: var(--bscpn-at-button--tab-pressed-background-color); - border-color: var(--bscpn-at-button--tab-pressed-border-color); - box-shadow: var(--bscpn-at-button--tab-pressed-box-shadow); - color: var(--bscpn-at-button--tab-pressed-color); + --bscpn-button-pressed-color: var(--bscpn-button--tab-pressed-color); + --bscpn-button-pressed-background-color: var( + --bscpn-button--tab-pressed-background-color + ); + --bscpn-button-pressed-border-color: var( + --bscpn-button--tab-pressed-border-color + ); + --bscpn-button-pressed-box-shadow: var( + --bscpn-button--tab-pressed-box-shadow + ); } .bs-at-button--tab:disabled, .bs-at-button--tab:disabled:focus, @@ -1419,174 +1831,192 @@ table { .bs-at-button--tab[aria-disabled='true'], .bs-at-button--tab[aria-disabled='true']:focus, .bs-at-button--tab[aria-disabled='true']:hover { - background-color: var(--bscpn-at-button--tab-disabled-background-color); - border-color: var(--bscpn-at-button--tab-disabled-border-color); - box-shadow: var(--bscpn-at-button--tab-disabled-box-shadow); - color: var(--bscpn-at-button--tab-disabled-color); + --bscpn-button-disabled-color: var(--bscpn-button--tab-disabled-color); + --bscpn-button-disabled-background-color: var( + --bscpn-button--tab-disabled-background-color + ); + --bscpn-button-disabled-border-color: var( + --bscpn-button--tab-disabled-border-color + ); + --bscpn-button-disabled-box-shadow: var( + --bscpn-button--tab-disabled-box-shadow + ); } :root, [data-theme='default'] { - --bscpn-at-button--tab-color: var(--bscpn-color-grayscale-dark-1); - --bscpn-at-button--tab-background-color: transparent; - --bscpn-at-button--tab-box-shadow: none; - --bscpn-at-button--tab-icon-color: var(--bscpn-color-grayscale-dark-2); - --bscpn-at-button--tab-hover-color: var(--bscpn-color-brand-1-dark-1); - --bscpn-at-button--tab-hover-background-color: transparent; - --bscpn-at-button--tab-hover-box-shadow: none; - --bscpn-at-button--tab-active-color: var(--bscpn-color-brand-1-dark-1); - --bscpn-at-button--tab-active-background-color: transparent; - --bscpn-at-button--tab-active-box-shadow: none; - --bscpn-at-button--tab-pressed-color: var(--bscpn-color-brand-1-dark-2); - --bscpn-at-button--tab-pressed-background-color: transparent; - --bscpn-at-button--tab-pressed-box-shadow: none; - --bscpn-at-button--tab-disabled-color: var(--bscpn-color-grayscale-base); - --bscpn-at-button--tab-disabled-background-color: transparent; - --bscpn-at-button--tab-disabled-box-shadow: none; + --bscpn-button--tab-color: var(--bscpn-color-grayscale-dark-1); + --bscpn-button--tab-background-color: transparent; + --bscpn-button--tab-box-shadow: none; + --bscpn-button--tab-icon-color: var(--bscpn-color-grayscale-dark-2); + --bscpn-button--tab-hover-color: var(--bscpn-color-brand-1-dark-1); + --bscpn-button--tab-hover-background-color: transparent; + --bscpn-button--tab-hover-box-shadow: none; + --bscpn-button--tab-active-color: var(--bscpn-color-brand-1-dark-1); + --bscpn-button--tab-active-background-color: transparent; + --bscpn-button--tab-active-box-shadow: none; + --bscpn-button--tab-pressed-color: var(--bscpn-color-brand-1-dark-2); + --bscpn-button--tab-pressed-background-color: transparent; + --bscpn-button--tab-pressed-box-shadow: none; + --bscpn-button--tab-disabled-color: var(--bscpn-color-grayscale-base); + --bscpn-button--tab-disabled-background-color: transparent; + --bscpn-button--tab-disabled-box-shadow: none; } [data-theme='dark'] { - --bscpn-at-button--tab-color: var(--bscpn-color-grayscale-light-2); - --bscpn-at-button--tab-background-color: transparent; - --bscpn-at-button--tab-box-shadow: none; - --bscpn-at-button--tab-hover-color: var(--bscpn-color-brand-1-light-2); - --bscpn-at-button--tab-hover-background-color: transparent; - --bscpn-at-button--tab-hover-box-shadow: none; - --bscpn-at-button--tab-active-color: var(--bscpn-color-brand-1-light-3); - --bscpn-at-button--tab-active-background-color: transparent; - --bscpn-at-button--tab-active-box-shadow: none; - --bscpn-at-button--tab-pressed-color: var(--bscpn-color-grayscale-light-1); - --bscpn-at-button--tab-pressed-background-color: transparent; - --bscpn-at-button--tab-pressed-box-shadow: none; - --bscpn-at-button--tab-disabled-color: var(--bscpn-color-grayscale-dark-2); - --bscpn-at-button--tab-disabled-background-color: transparent; - --bscpn-at-button--tab-disabled-box-shadow: none; + --bscpn-button--tab-color: var(--bscpn-color-grayscale-light-2); + --bscpn-button--tab-background-color: transparent; + --bscpn-button--tab-box-shadow: none; + --bscpn-button--tab-hover-color: var(--bscpn-color-brand-1-light-2); + --bscpn-button--tab-hover-background-color: transparent; + --bscpn-button--tab-hover-box-shadow: none; + --bscpn-button--tab-active-color: var(--bscpn-color-brand-1-light-3); + --bscpn-button--tab-active-background-color: transparent; + --bscpn-button--tab-active-box-shadow: none; + --bscpn-button--tab-pressed-color: var(--bscpn-color-grayscale-light-1); + --bscpn-button--tab-pressed-background-color: transparent; + --bscpn-button--tab-pressed-box-shadow: none; + --bscpn-button--tab-disabled-color: var(--bscpn-color-grayscale-dark-2); + --bscpn-button--tab-disabled-background-color: transparent; + --bscpn-button--tab-disabled-box-shadow: none; } .bs-at-button--danger:focus, .bs-at-button--danger:hover { - background-color: var(--bscpn-at-button--danger-hover-background-color); - border-color: var(--bscpn-at-button--danger-hover-border-color); - box-shadow: var(--bscpn-at-button--danger-hover-box-shadow); - color: var(--bscpn-at-button--danger-hover-color); + --bscpn-button-hover-color: var(--bscpn-button--danger-hover-color); + --bscpn-button-hover-background-color: var( + --bscpn-button--danger-hover-background-color + ); + --bscpn-button-hover-border-color: var( + --bscpn-button--danger-hover-border-color + ); + --bscpn-button-hover-box-shadow: var(--bscpn-button--danger-hover-box-shadow); } .bs-at-button--danger:active { - background-color: var(--bscpn-at-button--danger-active-background-color); - border-color: var(--bscpn-at-button--danger-active-border-color); - box-shadow: var(--bscpn-at-button--danger-active-box-shadow); - color: var(--bscpn-at-button--danger-active-color); + --bscpn-button-active-color: var(--bscpn-button--danger-active-color); + --bscpn-button-active-background-color: var( + --bscpn-button--danger-active-background-color + ); + --bscpn-button-active-border-color: var( + --bscpn-button--danger-active-border-color + ); + --bscpn-button-active-box-shadow: var( + --bscpn-button--danger-active-box-shadow + ); } .bs-at-button--danger[aria-current], .bs-at-button--danger[aria-expanded='true'], .bs-at-button--danger[aria-pressed='true'], .bs-at-button--danger[aria-selected='true'] { - background-color: var(--bscpn-at-button--danger-pressed-background-color); - border-color: var(--bscpn-at-button--danger-pressed-border-color); - box-shadow: var(--bscpn-at-button--danger-pressed-box-shadow); - color: var(--bscpn-at-button--danger-pressed-color); + --bscpn-button-pressed-color: var(--bscpn-button--danger-pressed-color); + --bscpn-button-pressed-background-color: var( + --bscpn-button--danger-pressed-background-color + ); + --bscpn-button-pressed-border-color: var( + --bscpn-button--danger-pressed-border-color + ); + --bscpn-button-pressed-box-shadow: var( + --bscpn-button--danger-pressed-box-shadow + ); } :root, [data-theme='default'] { - --bscpn-at-button--danger-hover-color: var(--bscpn-color-grayscale-white); - --bscpn-at-button--danger-hover-background-color: var( - --bscpn-color-danger-dark-1 - ); - --bscpn-at-button--danger-hover-border-color: var( + --bscpn-button--danger-hover-color: var(--bscpn-color-grayscale-white); + --bscpn-button--danger-hover-background-color: var( --bscpn-color-danger-dark-1 ); - --bscpn-at-button--danger-hover-box-shadow: none; - --bscpn-at-button--danger-active-color: var(--bscpn-color-danger-dark-1); - --bscpn-at-button--danger-active-background-color: var( - --bscpn-color-danger-light-2 - ); - --bscpn-at-button--danger-active-border-color: var( + --bscpn-button--danger-hover-border-color: var(--bscpn-color-danger-dark-1); + --bscpn-button--danger-hover-box-shadow: none; + --bscpn-button--danger-active-color: var(--bscpn-color-danger-dark-1); + --bscpn-button--danger-active-background-color: var( --bscpn-color-danger-light-2 ); - --bscpn-at-button--danger-active-box-shadow: none; - --bscpn-at-button--danger-pressed-color: var(--bscpn-color-danger-dark-2); - --bscpn-at-button--danger-pressed-background-color: var( + --bscpn-button--danger-active-border-color: var(--bscpn-color-danger-light-2); + --bscpn-button--danger-active-box-shadow: none; + --bscpn-button--danger-pressed-color: var(--bscpn-color-danger-dark-2); + --bscpn-button--danger-pressed-background-color: var( --bscpn-color-danger-light-2 ); - --bscpn-at-button--danger-pressed-border-color: var( + --bscpn-button--danger-pressed-border-color: var( --bscpn-color-danger-light-2 ); - --bscpn-at-button--danger-pressed-box-shadow: none; + --bscpn-button--danger-pressed-box-shadow: none; } .bs-at-button { - --bscpn-at-button-padding-vertical: var(--bscpn-size-s2); - --bscpn-at-button-padding-horizontal: var(--bscpn-size-l1); - --bscpn-at-button-border-width: 0rem; - --bscpn-at-button-border-radius: var(--bscpn-size-s4); - --bscpn-at-button-min-height: 1em; - --bscpn-at-button-min-width: 0; - --bscpn-at-button-font-size: var(--bscpn-font-size-2); - --bscpn-at-button-font-weight: 600; + --bscpn-button-padding-vertical: var(--bscpn-size-s2); + --bscpn-button-padding-horizontal: var(--bscpn-size-l1); + --bscpn-button-border-width: 0rem; + --bscpn-button-border-radius: var(--bscpn-size-s4); + --bscpn-button-min-height: 1em; + --bscpn-button-min-width: 0; + --bscpn-button-font-weight: 600; + --bscpn-button-line-height: var(--bscpn-line-height-4); } .bs-at-button.bs-at-button--square { - --bscpn-at-button-min-width: calc( + --bscpn-button-min-width: calc( 1em * var(--bscpn-line-height-5) + var(--bscpn-size-s2) * 2 ); - --bscpn-at-button-min-height: calc( + --bscpn-button-min-height: calc( 1em * var(--bscpn-line-height-5) + var(--bscpn-size-s2) * 2 ); - --bscpn-at-button-padding-horizontal: var(--bscpn-size-s2); - --bscpn-at-button-padding-vertical: var(--bscpn-size-s2); + --bscpn-button-padding-horizontal: var(--bscpn-size-s2); + --bscpn-button-padding-vertical: var(--bscpn-size-s2); } .bs-at-button--small { - --bscpn-at-button-padding-vertical: var(--bscpn-size-s4); - --bscpn-at-button-padding-horizontal: var(--bscpn-size-m); - --bscpn-at-button-min-height: var(--bscpn-size-l1); - --bscpn-at-button-min-width: var(--bscpn-size-l2); - --bscpn-at-button-font-weight: 500; + --bscpn-button-padding-vertical: var(--bscpn-size-s4); + --bscpn-button-padding-horizontal: var(--bscpn-size-m); + --bscpn-button-min-height: var(--bscpn-size-l1); + --bscpn-button-min-width: var(--bscpn-size-l2); + --bscpn-button-font-weight: 500; } .bs-at-button--small.bs-at-button--square { - --bscpn-at-button-min-width: calc( + --bscpn-button-min-width: calc( 1em * var(--bscpn-line-height-5) + var(--bscpn-size-s4) * 2 ); - --bscpn-at-button-min-height: calc( + --bscpn-button-min-height: calc( 1em * var(--bscpn-line-height-5) + var(--bscpn-size-s4) * 2 ); - --bscpn-at-button-padding-horizontal: var(--bscpn-size-s4); - --bscpn-at-button-padding-vertical: var(--bscpn-size-s4); + --bscpn-button-padding-horizontal: var(--bscpn-size-s4); + --bscpn-button-padding-vertical: var(--bscpn-size-s4); } .bs-at-button--x-small { - --bscpn-at-button-padding-vertical: var(--bscpn-size-s6); - --bscpn-at-button-padding-horizontal: var(--bscpn-size-s2); - --bscpn-at-button-font-weight: 500; + --bscpn-button-padding-vertical: var(--bscpn-size-s6); + --bscpn-button-padding-horizontal: var(--bscpn-size-s2); + --bscpn-button-font-weight: 500; } .bs-at-button--x-small.bs-at-button--square { - --bscpn-at-button-min-width: calc( + --bscpn-button-min-width: calc( 1em * var(--bscpn-line-height-5) + var(--bscpn-size-s6) * 2 ); - --bscpn-at-button-min-height: calc( + --bscpn-button-min-height: calc( 1em * var(--bscpn-line-height-5) + var(--bscpn-size-s6) * 2 ); - --bscpn-at-button-padding-horizontal: var(--bscpn-size-s6); - --bscpn-at-button-padding-vertical: var(--bscpn-size-s6); + --bscpn-button-padding-horizontal: var(--bscpn-size-s6); + --bscpn-button-padding-vertical: var(--bscpn-size-s6); } .bs-at-button--transparent { - --bscpn-at-button-border-width: 0.1875rem; + --bscpn-button-border-width: 0.1875rem; } .bs-at-button--outline { - --bscpn-at-button-border-width: 0.1875rem; + --bscpn-button-border-width: 0.1875rem; } .bs-at-button--menu { - --bscpn-at-button-border-radius: 0; - --bscpn-at-button-justify-content: flex-start; + --bscpn-button-border-radius: 0; + --bscpn-button-justify-content: flex-start; } .bs-at-button--tab { - --bscpn-at-button-border-radius: 0; + --bscpn-button-border-radius: 0; } .bs-at-button--square { - --bscpn-at-button-padding-vertical: calc( + --bscpn-button-padding-vertical: calc( var(--bscpn-size-s2) + var(--bscpn-size-s7) ); - --bscpn-at-button-padding-horizontal: calc( + --bscpn-button-padding-horizontal: calc( var(--bscpn-size-s2) + var(--bscpn-size-s7) ); } .bs-at-button--round { - --bscpn-at-button-border-radius: 9999rem; + --bscpn-button-border-radius: 9999rem; } .bs-at-button--tab-container > :first-child { - margin-left: calc(var(--bscpn-at-button-padding-horizontal) * -1); + margin-left: calc(var(--bscpn-button-padding-horizontal) * -1); } .bs-at-button--tab { position: relative; @@ -1623,7 +2053,7 @@ table { background-color: var(--bscpn-color-grayscale-base); } .bs-at-button--tab .bs-at-icon { - color: var(--bscpn-at-button--tab-icon-color, currentcolor); + color: var(--bscpn-button--tab-icon-color, currentcolor); } .bs-at-card { border-radius: var(--bscpn-size-s1); @@ -2141,30 +2571,79 @@ table { padding-right: var(--bscpn-size-s3); } .bs-or-joined-ui { + align-items: stretch; border-radius: 10rem; box-shadow: none; + display: inline-flex; +} +.bs-or-joined-ui > * { + display: flex; } .bs-or-joined-ui > .bs-at-button:first-child, .bs-or-joined-ui > :first-child .bs-at-button { - --bscpn-at-button-box-shadow: none; - --bscpn-at-button-border-top-right-radius: 0; - --bscpn-at-button-border-bottom-right-radius: 0; - margin-right: calc(var(--bscpn-at-button-border-width) * -1); + --bscpn-button-box-shadow: none; + --bscpn-button-border-top-right-radius: 0; + --bscpn-button-border-bottom-right-radius: 0; + margin-right: calc(var(--bscpn-button-border-width) * -1); +} +.bs-or-joined-ui > :first-child input, +.bs-or-joined-ui > input:first-child { + --bscpn-input-text-box-shadow: none; + --bscpn-input-text-border-top-right-radius: 0; + --bscpn-input-text-border-bottom-right-radius: 0; + margin-right: calc(var(--bscpn-input-text-border-width) * -1); +} +.bs-or-joined-ui > :first-child select, +.bs-or-joined-ui > select:first-child { + --bscpn-select-box-shadow: none; + --bscpn-select-border-top-right-radius: 0; + --bscpn-select-border-bottom-right-radius: 0; + margin-right: calc(var(--bscpn-select-border-width) * -1); } .bs-or-joined-ui > .bs-at-button:last-child, .bs-or-joined-ui > :last-child .bs-at-button { - --bscpn-at-button-box-shadow: none; - --bscpn-at-button-border-top-left-radius: 0; - --bscpn-at-button-border-bottom-left-radius: 0; + --bscpn-button-box-shadow: none; + --bscpn-button-border-top-left-radius: 0; + --bscpn-button-border-bottom-left-radius: 0; + margin-right: 0; +} +.bs-or-joined-ui > :last-child input, +.bs-or-joined-ui > input:last-child { + --bscpn-input-text-box-shadow: none; + --bscpn-input-text-border-top-left-radius: 0; + --bscpn-input-text-border-bottom-left-radius: 0; + margin-right: 0; +} +.bs-or-joined-ui > :last-child select, +.bs-or-joined-ui > select:last-child { + --bscpn-select-box-shadow: none; + --bscpn-select-border-top-left-radius: 0; + --bscpn-select-border-bottom-left-radius: 0; margin-right: 0; } .bs-or-joined-ui > .bs-at-button:not(:first-child):not(:last-child), .bs-or-joined-ui > :not(:first-child):not(:last-child) .bs-at-button { - --bscpn-at-button-border-top-left-radius: 0; - --bscpn-at-button-border-top-right-radius: 0; - --bscpn-at-button-border-bottom-right-radius: 0; - --bscpn-at-button-border-bottom-left-radius: 0; - margin-right: calc(var(--bscpn-at-button-border-width) * -1); + --bscpn-button-border-top-left-radius: 0; + --bscpn-button-border-top-right-radius: 0; + --bscpn-button-border-bottom-right-radius: 0; + --bscpn-button-border-bottom-left-radius: 0; + margin-right: calc(var(--bscpn-button-border-width) * -1); +} +.bs-or-joined-ui > :not(:first-child):not(:last-child) input, +.bs-or-joined-ui > input:not(:first-child):not(:last-child) { + --bscpn-input-text-border-top-left-radius: 0; + --bscpn-input-text-border-top-right-radius: 0; + --bscpn-input-text-border-bottom-right-radius: 0; + --bscpn-input-text-border-bottom-left-radius: 0; + margin-right: calc(var(--bscpn-input-text-border-width) * -1); +} +.bs-or-joined-ui > :not(:first-child):not(:last-child) select, +.bs-or-joined-ui > select:not(:first-child):not(:last-child) { + --bscpn-select-border-top-left-radius: 0; + --bscpn-select-border-top-right-radius: 0; + --bscpn-select-border-bottom-right-radius: 0; + --bscpn-select-border-bottom-left-radius: 0; + margin-right: calc(var(--bscpn-select-border-width) * -1); } .bs-aspect-ratio-10-10 { aspect-ratio: 1/1; diff --git a/test/scss/fixtures/bitstyles.css b/test/scss/fixtures/bitstyles.css index 4539711b5..a6c312b8d 100644 --- a/test/scss/fixtures/bitstyles.css +++ b/test/scss/fixtures/bitstyles.css @@ -629,9 +629,15 @@ legend { padding: 0; } label { + align-items: baseline; cursor: pointer; - display: block; - margin-bottom: 0; + display: flex; + font-weight: 500; + gap: var(--bs-size-s7); + margin-bottom: var(--bs-size-s7); +} +label[aria-disabled='true'] { + color: var(--bs-color-grayscale-base); } [type='color'] { height: calc(var(--bs-line-height-4) * 1em + var(--bs-size-s2)); @@ -652,13 +658,13 @@ img { -moz-appearance: none; appearance: none; cursor: pointer; - display: inline-block; flex-shrink: 0; - font-size: var(--bs-size-m); + font-size: var(--bs-size-l2); height: 1em; - margin-right: var(--bs-size-s4); + margin: var(--bs-size-s4); + outline-offset: 0; position: relative; - vertical-align: middle; + top: calc(var(--bs-size-s4) / 2); width: 1em; } @supports ( @@ -666,16 +672,29 @@ img { ) { [type='checkbox'] { background-color: var(--bs-color-grayscale-white); - border: var(--bs-size-s7) solid var(--bs-color-grayscale-base); + border: 0.1875rem solid var(--bs-color-grayscale-dark-2); border-radius: var(--bs-size-s6); + box-shadow: none; color: var(--bs-color-grayscale-base); } [type='checkbox']:focus, [type='checkbox']:hover { background-color: var(--bs-color-grayscale-white); border-color: var(--bs-color-brand-1-base); + box-shadow: none; color: var(--bs-color-brand-1-base); - outline: none; + outline-width: 0; + } + [type='checkbox']:focus-visible { + outline: var(--bs-color-brand-2-base) solid + calc(var(--bs-size-s7) + var(--bs-size-s7) / 2); + outline-offset: var(--bs-size-s7); + } + [type='checkbox']:active { + background-color: var(--bs-color-grayscale-white); + border-color: var(--bs-color-brand-1-dark-1); + box-shadow: none; + color: var(--bs-color-brand-1-dark-1); } [type='checkbox']:after { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23fff' d='M83.07 11.71 38.66 56.3 16.93 34.49 1 50.48l37.65 37.81L99 27.7z'/%3E%3C/svg%3E"); @@ -688,27 +707,53 @@ img { opacity: 0; transform: scale(0.7); transition: opacity 0.0375s ease-in-out 75ms, - transform 0.0375s ease-in-out 75ms; + transform 0.0375s ease-in-out 75ms, outline-offset 75ms ease-in-out; width: 100%; } [type='checkbox']:checked { - background-color: var(--bs-color-brand-1-base); - border-color: var(--bs-color-brand-1-base); + background-color: var(--bs-color-brand-1-dark-1); + border-color: var(--bs-color-brand-1-dark-1); + box-shadow: var(--bs-shadow-default-box); color: var(--bs-color-grayscale-white); } [type='checkbox']:checked:after { opacity: 1; transform: scale(1); } + [type='checkbox']:invalid, + [type='checkbox'][aria-invalid='true'] { + background-color: var(--bs-color-brand-1-base); + border-color: var(--bs-color-brand-1-base); + box-shadow: none; + color: var(--bs-color-grayscale-white); + } [type='checkbox'][disabled] { - background-color: var(--bs-color-grayscale-light-2); - border-color: var(--bs-color-grayscale-light-2); + background-color: var(--bs-color-grayscale-white); + border-color: var(--bs-color-grayscale-light-1); + box-shadow: none; color: var(--bs-color-grayscale-light-2); } [type='checkbox'][disabled]:checked { - background-color: var(--bs-color-grayscale-light-2); + background-color: var(--bs-color-grayscale-light-1); border-color: var(--bs-color-grayscale-light-1); - color: var(--bs-color-grayscale-light-1); + box-shadow: none; + color: var(--bs-color-grayscale-white); + } + [type='checkbox']:checked:focus:not(:invalid), + [type='checkbox']:checked:focus:not([aria-invalid='true']), + [type='checkbox']:checked:hover:not(:invalid), + [type='checkbox']:checked:hover:not([aria-invalid='true']) { + background-color: var(--bs-color-brand-1-base); + border-color: var(--bs-color-brand-1-base); + box-shadow: none; + color: var(--bs-color-grayscale-white); + } + [type='checkbox']:checked:active:not(:invalid), + [type='checkbox']:checked:active:not([aria-invalid='true']) { + background-color: var(--bs-color-brand-1-base); + border-color: var(--bs-color-brand-1-dark-1); + box-shadow: none; + color: var(--bs-color-grayscale-white); } } [type='radio'] { @@ -716,13 +761,13 @@ img { -moz-appearance: none; appearance: none; cursor: pointer; - display: inline-block; flex-shrink: 0; - font-size: var(--bs-size-m); + font-size: var(--bs-size-l2); height: 1em; - margin-right: var(--bs-size-s4); + margin: var(--bs-size-s4); + outline-offset: 0; position: relative; - vertical-align: middle; + top: calc(var(--bs-size-s4) / 2); width: 1em; } @supports ( @@ -730,68 +775,112 @@ img { ) { [type='radio'] { background-color: var(--bs-color-grayscale-white); - border: var(--bs-size-s7) solid var(--bs-color-grayscale-base); + border: 0.1875rem solid var(--bs-color-grayscale-dark-2); border-radius: 9999rem; + box-shadow: none; color: var(--bs-color-grayscale-light-1); } [type='radio']:after { - background: var(--bs-color-brand-1-base); + background: var(--bs-color-brand-1-dark-1); border-radius: 9999rem; content: ''; display: block; height: 100%; opacity: 0; transform: scale(0.5); - transition: opacity 75ms ease-in-out, transform 75ms ease-in-out; + transition: opacity 75ms ease-in-out, transform 75ms ease-in-out, + outline-offset 75ms ease-in-out; width: 100%; } [type='radio']:focus, [type='radio']:hover { background-color: var(--bs-color-grayscale-white); border-color: var(--bs-color-brand-1-base); + box-shadow: none; color: var(--bs-color-brand-1-base); - outline: none; + outline-width: 0; } - [type='radio']:checked { + [type='radio']:focus-visible { + outline: var(--bs-color-brand-2-base) solid + calc(var(--bs-size-s7) + var(--bs-size-s7) / 2); + outline-offset: var(--bs-size-s7); + } + [type='radio']:active { background-color: var(--bs-color-grayscale-white); - border-color: var(--bs-color-brand-1-base); + border-color: var(--bs-color-brand-1-dark-1); + box-shadow: none; color: var(--bs-color-brand-1-base); } + [type='radio']:checked { + background-color: var(--bs-color-grayscale-white); + border-color: var(--bs-color-brand-1-dark-1); + box-shadow: var(--bs-shadow-default-box); + color: var(--bs-color-brand-1-dark-1); + } [type='radio']:checked:after { opacity: 1; transform: scale(0.7); } + [type='radio']:invalid, + [type='radio'][aria-invalid='true'] { + background-color: var(--bs-color-grayscale-white); + border-color: var(--bs-color-warning-dark-1); + box-shadow: none; + color: var(--bs-color-warning-dark-4); + } [type='radio'][disabled] { - background-color: var(--bs-color-grayscale-light-2); + background-color: var(--bs-color-grayscale-white); border-color: var(--bs-color-grayscale-light-1); + box-shadow: none; color: var(--bs-color-grayscale-light-1); } [type='radio'][disabled]:checked { - background-color: var(--bs-color-grayscale-light-2); + background-color: var(--bs-color-grayscale-white); border-color: var(--bs-color-grayscale-light-1); + box-shadow: none; color: var(--bs-color-grayscale-light-1); } [type='radio'][disabled]:after { background: var(--bs-color-grayscale-light-1); } + [type='radio']:focus:not(:focus-visible) { + outline-width: 0; + } + [type='radio']:checked:focus:not(:invalid), + [type='radio']:checked:focus:not([aria-invalid='true']), + [type='radio']:checked:hover:not(:invalid), + [type='radio']:checked:hover:not([aria-invalid='true']) { + background-color: var(--bs-color-grayscale-white); + border-color: var(--bs-color-brand-1-base); + box-shadow: none; + color: var(--bs-color-brand-1-base); + } + [type='radio']:checked:active:not(:invalid), + [type='radio']:checked:active:not([aria-invalid='true']) { + background-color: var(--bs-color-grayscale-white); + border-color: var(--bs-color-brand-1-base); + box-shadow: none; + color: var(--bs-color-brand-1-base); + } } input, textarea { + outline-offset: 0; resize: vertical; transition: color 75ms ease-in-out, background-color 75ms ease-in-out, - border 75ms ease-in-out; + border 75ms ease-in-out, outline-offset 75ms ease-in-out; } input::-moz-placeholder, textarea::-moz-placeholder { - color: var(--bs-color-grayscale-light-1); - font-style: italic; + color: var(--bs-color-grayscale-base); + font-style: normal; font-weight: 400; opacity: 1; } input::placeholder, textarea::placeholder { - color: var(--bs-color-grayscale-light-1); - font-style: italic; + color: var(--bs-color-grayscale-base); + font-style: normal; font-weight: 400; opacity: 1; } @@ -808,86 +897,200 @@ textarea::placeholder { [type='url'], [type='week'], textarea { + --bs-input-text-border-top-right-radius: var(--bs-size-s4); + --bs-input-text-border-bottom-right-radius: var(--bs-size-s4); + --bs-input-text-border-bottom-left-radius: var(--bs-size-s4); + --bs-input-text-border-top-left-radius: var(--bs-size-s4); + --bs-input-text-padding-vertical: var(--bs-size-s2); + --bs-input-text-padding-horizontal: var(--bs-size-m); + --bs-input-text-border-width: 0.1875rem; background-color: var(--bs-color-grayscale-white); - border: var(--bs-size-s7) solid var(--bs-color-grayscale-base); - border-radius: var(--bs-size-s5); - box-shadow: 0 0 calc(var(--bs-size-s5) / 4) - rgba(var(--bs-color-grayscale-light-1-rgb), 0.025), - 0 0 calc(var(--bs-size-s5) / 3) - rgba(var(--bs-color-grayscale-light-1-rgb), 0.025), - 0 0 calc(var(--bs-size-s5) / 2) - rgba(var(--bs-color-grayscale-light-1-rgb), 0.025), - 0 0 calc(var(--bs-size-s5) / 1) - rgba(var(--bs-color-grayscale-light-1-rgb), 0.025); - color: var(--bs-color-grayscale-base); - display: block; + border: 0.1875rem solid var(--bs-color-grayscale-dark-1); + border-radius: var(--bs-input-text-border-top-left-radius) + var(--bs-input-text-border-top-right-radius) + var(--bs-input-text-border-bottom-right-radius) + var(--bs-input-text-border-bottom-left-radius); + box-shadow: none; + color: var(--bs-color-grayscale-dark-4); + display: flex; + flex-grow: 1; font: inherit; - padding: var(--bs-size-s5) var(--bs-size-s5); - width: 100%; + padding: calc( + var(--bs-input-text-padding-vertical) - + var(--bs-input-text-border-width, 0rem) + ) + calc( + var(--bs-input-text-padding-horizontal) - + var(--bs-input-text-border-width, 0rem) + ); } +[type='date']:focus, [type='date']:hover, +[type='datetime-local']:focus, [type='datetime-local']:hover, +[type='email']:focus, [type='email']:hover, +[type='month']:focus, [type='month']:hover, +[type='number']:focus, [type='number']:hover, +[type='password']:focus, [type='password']:hover, +[type='search']:focus, [type='search']:hover, +[type='tel']:focus, [type='tel']:hover, +[type='text']:focus, [type='text']:hover, +[type='time']:focus, [type='time']:hover, +[type='url']:focus, [type='url']:hover, +[type='week']:focus, [type='week']:hover, +textarea:focus, textarea:hover { - background-color: var(--bs-color-grayscale-base); - border-color: var(--bs-color-grayscale-dark-1); - box-shadow: 0 0 calc(var(--bs-size-s2) / 4) - rgba(var(--bs-color-brand-1-light-1-rgb), 0.025), - 0 0 calc(var(--bs-size-s2) / 3) - rgba(var(--bs-color-brand-1-light-1-rgb), 0.025), - 0 0 calc(var(--bs-size-s2) / 2) - rgba(var(--bs-color-brand-1-light-1-rgb), 0.025), - 0 0 calc(var(--bs-size-s2) / 1) - rgba(var(--bs-color-brand-1-light-1-rgb), 0.025); + background-color: var(--bs-color-grayscale-white); + border-color: var(--bs-color-grayscale-dark-2); + box-shadow: 0 0 calc(var(--bs-size-s4) / 4) + rgba(var(--bs-color-brand-1-dark-2-rgb), 0.075), + 0 0 calc(var(--bs-size-s4) / 3) + rgba(var(--bs-color-brand-1-dark-2-rgb), 0.075), + 0 0 calc(var(--bs-size-s4) / 2) + rgba(var(--bs-color-brand-1-dark-2-rgb), 0.075), + 0 0 calc(var(--bs-size-s4) / 1) + rgba(var(--bs-color-brand-1-dark-2-rgb), 0.075); + color: var(--bs-color-grayscale-dark-4); +} +[type='date']:focus::-moz-placeholder, +[type='date']:hover::-moz-placeholder, +[type='datetime-local']:focus::-moz-placeholder, +[type='datetime-local']:hover::-moz-placeholder, +[type='email']:focus::-moz-placeholder, +[type='email']:hover::-moz-placeholder, +[type='month']:focus::-moz-placeholder, +[type='month']:hover::-moz-placeholder, +[type='number']:focus::-moz-placeholder, +[type='number']:hover::-moz-placeholder, +[type='password']:focus::-moz-placeholder, +[type='password']:hover::-moz-placeholder, +[type='search']:focus::-moz-placeholder, +[type='search']:hover::-moz-placeholder, +[type='tel']:focus::-moz-placeholder, +[type='tel']:hover::-moz-placeholder, +[type='text']:focus::-moz-placeholder, +[type='text']:hover::-moz-placeholder, +[type='time']:focus::-moz-placeholder, +[type='time']:hover::-moz-placeholder, +[type='url']:focus::-moz-placeholder, +[type='url']:hover::-moz-placeholder, +[type='week']:focus::-moz-placeholder, +[type='week']:hover::-moz-placeholder, +textarea:focus::-moz-placeholder, +textarea:hover::-moz-placeholder { color: var(--bs-color-grayscale-dark-1); } +[type='date']:focus::placeholder, +[type='date']:hover::placeholder, +[type='datetime-local']:focus::placeholder, +[type='datetime-local']:hover::placeholder, +[type='email']:focus::placeholder, +[type='email']:hover::placeholder, +[type='month']:focus::placeholder, +[type='month']:hover::placeholder, +[type='number']:focus::placeholder, +[type='number']:hover::placeholder, +[type='password']:focus::placeholder, +[type='password']:hover::placeholder, +[type='search']:focus::placeholder, +[type='search']:hover::placeholder, +[type='tel']:focus::placeholder, +[type='tel']:hover::placeholder, +[type='text']:focus::placeholder, +[type='text']:hover::placeholder, +[type='time']:focus::placeholder, +[type='time']:hover::placeholder, +[type='url']:focus::placeholder, +[type='url']:hover::placeholder, +[type='week']:focus::placeholder, +[type='week']:hover::placeholder, +textarea:focus::placeholder, +textarea:hover::placeholder { + color: var(--bs-color-grayscale-dark-1); +} +[type='date']:focus-visible, +[type='datetime-local']:focus-visible, +[type='email']:focus-visible, +[type='month']:focus-visible, +[type='number']:focus-visible, +[type='password']:focus-visible, +[type='search']:focus-visible, +[type='tel']:focus-visible, +[type='text']:focus-visible, +[type='time']:focus-visible, +[type='url']:focus-visible, +[type='week']:focus-visible, +textarea:focus-visible { + outline: var(--bs-color-brand-2-base) solid + calc(var(--bs-size-s7) + var(--bs-size-s7) / 2); + outline-offset: var(--bs-size-s7); + z-index: 3; +} [type='date']:active, -[type='date']:focus, [type='datetime-local']:active, -[type='datetime-local']:focus, [type='email']:active, -[type='email']:focus, [type='month']:active, -[type='month']:focus, [type='number']:active, -[type='number']:focus, [type='password']:active, -[type='password']:focus, [type='search']:active, -[type='search']:focus, [type='tel']:active, -[type='tel']:focus, [type='text']:active, -[type='text']:focus, [type='time']:active, -[type='time']:focus, [type='url']:active, -[type='url']:focus, [type='week']:active, -[type='week']:focus, -textarea:active, -textarea:focus { +textarea:active { background-color: var(--bs-color-grayscale-white); - border-color: var(--bs-color-grayscale-dark-1); - box-shadow: 0 0 calc(var(--bs-size-s6) / 4) - rgba(var(--bs-color-brand-1-light-1-rgb), 0.075), - 0 0 calc(var(--bs-size-s6) / 3) - rgba(var(--bs-color-brand-1-light-1-rgb), 0.075), - 0 0 calc(var(--bs-size-s6) / 2) - rgba(var(--bs-color-brand-1-light-1-rgb), 0.075), - 0 0 calc(var(--bs-size-s6) / 1) - rgba(var(--bs-color-brand-1-light-1-rgb), 0.075); - color: var(--bs-color-grayscale-dark-1); - outline: none; + border-color: var(--bs-color-brand-1-dark-1); + box-shadow: 0 0 calc(var(--bs-size-s4) / 4) + rgba(var(--bs-color-brand-1-dark-2-rgb), 0.075), + 0 0 calc(var(--bs-size-s4) / 3) + rgba(var(--bs-color-brand-1-dark-2-rgb), 0.075), + 0 0 calc(var(--bs-size-s4) / 2) + rgba(var(--bs-color-brand-1-dark-2-rgb), 0.075), + 0 0 calc(var(--bs-size-s4) / 1) + rgba(var(--bs-color-brand-1-dark-2-rgb), 0.075); + color: var(--bs-color-grayscale-dark-4); + outline-width: 0; +} +[type='date']:active::-moz-placeholder, +[type='datetime-local']:active::-moz-placeholder, +[type='email']:active::-moz-placeholder, +[type='month']:active::-moz-placeholder, +[type='number']:active::-moz-placeholder, +[type='password']:active::-moz-placeholder, +[type='search']:active::-moz-placeholder, +[type='tel']:active::-moz-placeholder, +[type='text']:active::-moz-placeholder, +[type='time']:active::-moz-placeholder, +[type='url']:active::-moz-placeholder, +[type='week']:active::-moz-placeholder, +textarea:active::-moz-placeholder { + color: var(--bs-color-brand-1-base); +} +[type='date']:active::placeholder, +[type='datetime-local']:active::placeholder, +[type='email']:active::placeholder, +[type='month']:active::placeholder, +[type='number']:active::placeholder, +[type='password']:active::placeholder, +[type='search']:active::placeholder, +[type='tel']:active::placeholder, +[type='text']:active::placeholder, +[type='time']:active::placeholder, +[type='url']:active::placeholder, +[type='week']:active::placeholder, +textarea:active::placeholder { + color: var(--bs-color-brand-1-base); } [type='date']:invalid, [type='date'][aria-invalid='true'], @@ -916,13 +1119,65 @@ textarea:focus { textarea:invalid, textarea[aria-invalid='true'] { background-color: var(--bs-color-grayscale-white); - border-color: var(--bs-color-warning-base); - box-shadow: 0 0 calc(var(--bs-size-s4) / 4) - rgba(var(--bs-color-warning-base-rgb), 0.05), - 0 0 calc(var(--bs-size-s4) / 3) rgba(var(--bs-color-warning-base-rgb), 0.05), - 0 0 calc(var(--bs-size-s4) / 2) rgba(var(--bs-color-warning-base-rgb), 0.05), - 0 0 calc(var(--bs-size-s4) / 1) rgba(var(--bs-color-warning-base-rgb), 0.05); - color: var(--bs-color-warning-base); + border-color: var(--bs-color-warning-dark-1); + box-shadow: none; + color: var(--bs-color-warning-dark-4); +} +[type='date']:invalid::-moz-placeholder, +[type='date'][aria-invalid='true']::-moz-placeholder, +[type='datetime-local']:invalid::-moz-placeholder, +[type='datetime-local'][aria-invalid='true']::-moz-placeholder, +[type='email']:invalid::-moz-placeholder, +[type='email'][aria-invalid='true']::-moz-placeholder, +[type='month']:invalid::-moz-placeholder, +[type='month'][aria-invalid='true']::-moz-placeholder, +[type='number']:invalid::-moz-placeholder, +[type='number'][aria-invalid='true']::-moz-placeholder, +[type='password']:invalid::-moz-placeholder, +[type='password'][aria-invalid='true']::-moz-placeholder, +[type='search']:invalid::-moz-placeholder, +[type='search'][aria-invalid='true']::-moz-placeholder, +[type='tel']:invalid::-moz-placeholder, +[type='tel'][aria-invalid='true']::-moz-placeholder, +[type='text']:invalid::-moz-placeholder, +[type='text'][aria-invalid='true']::-moz-placeholder, +[type='time']:invalid::-moz-placeholder, +[type='time'][aria-invalid='true']::-moz-placeholder, +[type='url']:invalid::-moz-placeholder, +[type='url'][aria-invalid='true']::-moz-placeholder, +[type='week']:invalid::-moz-placeholder, +[type='week'][aria-invalid='true']::-moz-placeholder, +textarea:invalid::-moz-placeholder, +textarea[aria-invalid='true']::-moz-placeholder { + color: var(--bs-color-brand-1-light-1); +} +[type='date']:invalid::placeholder, +[type='date'][aria-invalid='true']::placeholder, +[type='datetime-local']:invalid::placeholder, +[type='datetime-local'][aria-invalid='true']::placeholder, +[type='email']:invalid::placeholder, +[type='email'][aria-invalid='true']::placeholder, +[type='month']:invalid::placeholder, +[type='month'][aria-invalid='true']::placeholder, +[type='number']:invalid::placeholder, +[type='number'][aria-invalid='true']::placeholder, +[type='password']:invalid::placeholder, +[type='password'][aria-invalid='true']::placeholder, +[type='search']:invalid::placeholder, +[type='search'][aria-invalid='true']::placeholder, +[type='tel']:invalid::placeholder, +[type='tel'][aria-invalid='true']::placeholder, +[type='text']:invalid::placeholder, +[type='text'][aria-invalid='true']::placeholder, +[type='time']:invalid::placeholder, +[type='time'][aria-invalid='true']::placeholder, +[type='url']:invalid::placeholder, +[type='url'][aria-invalid='true']::placeholder, +[type='week']:invalid::placeholder, +[type='week'][aria-invalid='true']::placeholder, +textarea:invalid::placeholder, +textarea[aria-invalid='true']::placeholder { + color: var(--bs-color-brand-1-light-1); } [type='date']:disabled, [type='datetime-local']:disabled, @@ -937,16 +1192,68 @@ textarea[aria-invalid='true'] { [type='url']:disabled, [type='week']:disabled, textarea:disabled { - background: var(--bs-color-grayscale-light-2); - border-color: var(--bs-color-grayscale-light-2); + background: var(--bs-color-grayscale-light-4); + border-color: var(--bs-color-grayscale-light-1); box-shadow: none; color: var(--bs-color-grayscale-base); cursor: default; } +[type='date']:disabled::-moz-placeholder, +[type='datetime-local']:disabled::-moz-placeholder, +[type='email']:disabled::-moz-placeholder, +[type='month']:disabled::-moz-placeholder, +[type='number']:disabled::-moz-placeholder, +[type='password']:disabled::-moz-placeholder, +[type='search']:disabled::-moz-placeholder, +[type='tel']:disabled::-moz-placeholder, +[type='text']:disabled::-moz-placeholder, +[type='time']:disabled::-moz-placeholder, +[type='url']:disabled::-moz-placeholder, +[type='week']:disabled::-moz-placeholder, +textarea:disabled::-moz-placeholder { + color: var(--bs-color-grayscale-light-1); +} +[type='date']:disabled::placeholder, +[type='datetime-local']:disabled::placeholder, +[type='email']:disabled::placeholder, +[type='month']:disabled::placeholder, +[type='number']:disabled::placeholder, +[type='password']:disabled::placeholder, +[type='search']:disabled::placeholder, +[type='tel']:disabled::placeholder, +[type='text']:disabled::placeholder, +[type='time']:disabled::placeholder, +[type='url']:disabled::placeholder, +[type='week']:disabled::placeholder, +textarea:disabled::placeholder { + color: var(--bs-color-grayscale-light-1); +} +[type='date']:focus:not(:focus-visible), +[type='datetime-local']:focus:not(:focus-visible), +[type='email']:focus:not(:focus-visible), +[type='month']:focus:not(:focus-visible), +[type='number']:focus:not(:focus-visible), +[type='password']:focus:not(:focus-visible), +[type='search']:focus:not(:focus-visible), +[type='tel']:focus:not(:focus-visible), +[type='text']:focus:not(:focus-visible), +[type='time']:focus:not(:focus-visible), +[type='url']:focus:not(:focus-visible), +[type='week']:focus:not(:focus-visible), +textarea:focus:not(:focus-visible) { + outline-width: 0; +} @supports ( (-webkit-appearance: none) or (-moz-appearance: none) or (appearance: none) ) { select { + --bs-select-padding-vertical: var(--bs-size-s2); + --bs-select-padding-horizontal: var(--bs-size-l1); + --bs-select-border-width: 0.1875rem; + --bs-select-border-top-right-radius: var(--bs-size-s4); + --bs-select-border-bottom-right-radius: var(--bs-size-s4); + --bs-select-border-bottom-left-radius: var(--bs-size-s4); + --bs-select-border-top-left-radius: var(--bs-size-s4); -webkit-appearance: none; -moz-appearance: none; appearance: none; @@ -955,50 +1262,73 @@ textarea:disabled { background-position: right 0.75em top 50%; background-repeat: no-repeat; background-size: 1em; - border: var(--bs-size-s7) solid var(--bs-color-grayscale-base); - border-radius: var(--bs-size-s5); - color: var(--bs-color-grayscale-base); + border: 0.1875rem solid var(--bs-color-grayscale-dark-1); + border-radius: var(--bs-select-border-top-left-radius) + var(--bs-select-border-top-right-radius) + var(--bs-select-border-bottom-right-radius) + var(--bs-select-border-bottom-left-radius); + box-shadow: none; + color: var(--bs-color-grayscale-dark-1); cursor: pointer; - display: block; + display: flex; font: inherit; + font-weight: 700; + outline-offset: 0; overflow: hidden; - padding: var(--bs-size-s5) calc(var(--bs-size-s1) * 2) var(--bs-size-s5) - var(--bs-size-s1); + padding: calc( + var(--bs-select-padding-vertical) - var(--bs-select-border-width, 0rem) + ) + calc( + var(--bs-select-padding-horizontal) - + var(--bs-select-border-width, 0rem) + ); text-overflow: ellipsis; transition: color 75ms ease-in-out, background-color 75ms ease-in-out, border 75ms ease-in-out; - width: 100%; } select::-ms-expand { display: none; } + select:focus, select:hover { - background-color: var(--bs-color-grayscale-base); + background-color: var(--bs-color-brand-1-light-4); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='var(--bs-color-grayscale-dark-1)' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89l35.41 35.57 35.57-35.57a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E"); - border-color: var(--bs-color-grayscale-base); + border-color: var(--bs-color-grayscale-dark-1); + box-shadow: none; color: var(--bs-color-grayscale-dark-1); } - select:active, - select:focus { - background-color: transparent; + select:focus-visible { + outline: var(--bs-color-brand-2-base) solid + calc(var(--bs-size-s7) + var(--bs-size-s7) / 2); + outline-offset: var(--bs-size-s7); + } + select:active { + background-color: var(--bs-color-grayscale-white); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='var(--bs-color-grayscale-light-1)' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89l35.41 35.57 35.57-35.57a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E"); - border-color: var(--bs-color-grayscale-dark-1); - color: var(--bs-color-grayscale-dark-1); + border-color: var(--bs-color-brand-1-dark-1); + box-shadow: var(--bs-shadow-default-box); + color: var(--bs-color-brand-1-dark-1); outline: none; } - select:invalid { + select:invalid, + select[aria-invalid='true'] { background-color: var(--bs-color-grayscale-white); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='var(--bs-color-warning-base)' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89l35.41 35.57 35.57-35.57a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E"); border-color: var(--bs-color-warning-base); + box-shadow: none; color: var(--bs-color-warning-base); } select[disabled] { - background-color: var(--bs-color-grayscale-light-2); + background-color: var(--bs-color-grayscale-light-3); background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='var(--bs-color-grayscale-light-1)' d='M6.64 34.23a5.57 5.57 0 0 1 7.87-7.89l35.41 35.57 35.57-35.57a5.57 5.57 0 0 1 7.87 7.89L53.94 73.66a5.58 5.58 0 0 1-7.88 0Z'/%3E%3C/svg%3E"); - border-color: var(--bs-color-grayscale-light-2); + border-color: var(--bs-color-grayscale-base); + box-shadow: none; color: var(--bs-color-grayscale-base); cursor: default; } + select:focus:not(:focus-visible) { + outline-width: 0; + } } [data-theme], html { @@ -1224,19 +1554,24 @@ table { --bs-button-justify-content: center; align-items: center; -webkit-appearance: none; + background-color: var(--bs-button-background-color); + border-color: var(--bs-button-border-color); border-radius: var(--bs-button-border-top-left-radius) var(--bs-button-border-top-right-radius) var(--bs-button-border-bottom-right-radius) var(--bs-button-border-bottom-left-radius); border-style: solid; border-width: var(--bs-button-border-width); + box-shadow: var(--bs-button-box-shadow); + color: var(--bs-button-color); cursor: pointer; display: flex; flex-shrink: 0; font-family: inherit; - font-size: var(--bs-button-font-size); - font-weight: var(--bs-button-font-weight); + font-size: var(--bs-button-font-size, inherit); + font-weight: var(--bs-button-font-weight, inherit); justify-content: var(--bs-button-justify-content); + line-height: var(--bs-button-line-height, inherit); max-width: 100%; min-height: var(--bs-button-min-height); min-width: var(--bs-button-min-width); @@ -1260,6 +1595,19 @@ table { } .a-button:focus, .a-button:hover { + background-color: var(--bs-button-hover-background-color); + border-color: var(--bs-button-hover-border-color); + box-shadow: var(--bs-button-hover-box-shadow); + color: var(--bs-button-hover-color); + outline-width: 0; + text-decoration: none; + z-index: 1; +} +.a-button:active { + background-color: var(--bs-button-active-background-color); + border-color: var(--bs-button-active-border-color); + box-shadow: var(--bs-button-active-box-shadow); + color: var(--bs-button-active-color); outline-width: 0; text-decoration: none; z-index: 1; @@ -1274,6 +1622,10 @@ table { .a-button[aria-expanded='true'], .a-button[aria-pressed='true'], .a-button[aria-selected='true'] { + background-color: var(--bs-button-pressed-background-color); + border-color: var(--bs-button-pressed-border-color); + box-shadow: var(--bs-button-pressed-box-shadow); + color: var(--bs-button-pressed-color); z-index: 2; } .a-button:disabled, @@ -1282,6 +1634,10 @@ table { .a-button[aria-disabled='true'], .a-button[aria-disabled='true']:focus, .a-button[aria-disabled='true']:hover { + background-color: var(--bs-button-disabled-background-color); + border-color: var(--bs-button-disabled-border-color); + box-shadow: var(--bs-button-disabled-box-shadow); + color: var(--bs-button-disabled-color); cursor: not-allowed; } .a-button__avatar, @@ -1296,32 +1652,42 @@ table { } .a-button, .a-button:visited { - background-color: var(--bs-button-background-color); - border-color: var(--bs-button-border-color); - box-shadow: var(--bs-button-box-shadow); - color: var(--bs-button-color); + --bs-button-color: var(--bs-button--primary-color); + --bs-button-background-color: var(--bs-button--primary-background-color); + --bs-button-border-color: var(--bs-button--primary-border-color); + --bs-button-box-shadow: var(--bs-button--primary-box-shadow); } .a-button:focus, .a-button:hover { - background-color: var(--bs-button-hover-background-color); - border-color: var(--bs-button-hover-border-color); - box-shadow: var(--bs-button-hover-box-shadow); - color: var(--bs-button-hover-color); + --bs-button-hover-color: var(--bs-button--primary-hover-color); + --bs-button-hover-background-color: var( + --bs-button--primary-hover-background-color + ); + --bs-button-hover-border-color: var(--bs-button--primary-hover-border-color); + --bs-button-hover-box-shadow: var(--bs-button--primary-hover-box-shadow); } .a-button:active { - background-color: var(--bs-button-active-background-color); - border-color: var(--bs-button-active-border-color); - box-shadow: var(--bs-button-active-box-shadow); - color: var(--bs-button-active-color); + --bs-button-active-color: var(--bs-button--primary-active-color); + --bs-button-active-background-color: var( + --bs-button--primary-active-background-color + ); + --bs-button-active-border-color: var( + --bs-button--primary-active-border-color + ); + --bs-button-active-box-shadow: var(--bs-button--primary-active-box-shadow); } .a-button[aria-current], .a-button[aria-expanded='true'], .a-button[aria-pressed='true'], .a-button[aria-selected='true'] { - background-color: var(--bs-button-pressed-background-color); - border-color: var(--bs-button-pressed-border-color); - box-shadow: var(--bs-button-pressed-box-shadow); - color: var(--bs-button-pressed-color); + --bs-button-pressed-color: var(--bs-button--primary-pressed-color); + --bs-button-pressed-background-color: var( + --bs-button--primary-pressed-background-color + ); + --bs-button-pressed-border-color: var( + --bs-button--primary-pressed-border-color + ); + --bs-button-pressed-box-shadow: var(--bs-button--primary-pressed-box-shadow); } .a-button:disabled, .a-button:disabled:focus, @@ -1329,114 +1695,144 @@ table { .a-button[aria-disabled='true'], .a-button[aria-disabled='true']:focus, .a-button[aria-disabled='true']:hover { - background-color: var(--bs-button-disabled-background-color); - border-color: var(--bs-button-disabled-border-color); - box-shadow: var(--bs-button-disabled-box-shadow); - color: var(--bs-button-disabled-color); + --bs-button-disabled-color: var(--bs-button--primary-disabled-color); + --bs-button-disabled-background-color: var( + --bs-button--primary-disabled-background-color + ); + --bs-button-disabled-border-color: var( + --bs-button--primary-disabled-border-color + ); + --bs-button-disabled-box-shadow: var( + --bs-button--primary-disabled-box-shadow + ); } :root, [data-theme='default'] { - --bs-button-color: var(--bs-color-grayscale-white); - --bs-button-background-color: var(--bs-color-brand-1-dark-1); - --bs-button-box-shadow: none; - --bs-button-hover-color: var(--bs-color-brand-1-dark-2); - --bs-button-hover-background-color: var(--bs-color-brand-1-light-2); - --bs-button-active-color: var(--bs-color-grayscale-white); - --bs-button-active-background-color: var(--bs-color-brand-1-dark-1); - --bs-button-pressed-color: var(--bs-color-grayscale-white); - --bs-button-pressed-background-color: var(--bs-color-brand-1-dark-2); - --bs-button-disabled-color: var(--bs-color-grayscale-base); - --bs-button-disabled-background-color: var(--bs-color-grayscale-light-3); + --bs-button--primary-color: var(--bs-color-grayscale-white); + --bs-button--primary-background-color: var(--bs-color-brand-1-dark-1); + --bs-button--primary-box-shadow: none; + --bs-button--primary-hover-color: var(--bs-color-brand-1-dark-2); + --bs-button--primary-hover-background-color: var(--bs-color-brand-1-light-2); + --bs-button--primary-active-color: var(--bs-color-grayscale-white); + --bs-button--primary-active-background-color: var(--bs-color-brand-1-dark-1); + --bs-button--primary-pressed-color: var(--bs-color-grayscale-white); + --bs-button--primary-pressed-background-color: var(--bs-color-brand-1-dark-2); + --bs-button--primary-disabled-color: var(--bs-color-grayscale-base); + --bs-button--primary-disabled-background-color: var( + --bs-color-grayscale-light-3 + ); } [data-theme='dark'] { - --bs-button-color: var(--bs-color-brand-1-base); - --bs-button-background-color: var(--bs-color-grayscale-light-2); - --bs-button-box-shadow: none; - --bs-button-hover-color: var(--bs-color-brand-1-dark-1); - --bs-button-hover-background-color: var(--bs-color-brand-1-light-1); - --bs-button-active-color: var(--bs-color-brand-1-base); - --bs-button-active-background-color: var(--bs-color-grayscale-light-2); - --bs-button-pressed-color: var(--bs-color-grayscale-white); - --bs-button-pressed-background-color: var(--bs-color-brand-1-base); - --bs-button-disabled-color: var(--bs-color-grayscale-light-1); - --bs-button-disabled-background-color: var(--bs-color-grayscale-dark-2); + --bs-button--primary-color: var(--bs-color-brand-1-base); + --bs-button--primary-background-color: var(--bs-color-grayscale-light-2); + --bs-button--primary-box-shadow: none; + --bs-button--primary-hover-color: var(--bs-color-brand-1-dark-1); + --bs-button--primary-hover-background-color: var(--bs-color-brand-1-light-1); + --bs-button--primary-active-color: var(--bs-color-brand-1-base); + --bs-button--primary-active-background-color: var( + --bs-color-grayscale-light-2 + ); + --bs-button--primary-pressed-color: var(--bs-color-grayscale-white); + --bs-button--primary-pressed-background-color: var(--bs-color-brand-1-base); + --bs-button--primary-disabled-color: var(--bs-color-grayscale-light-1); + --bs-button--primary-disabled-background-color: var( + --bs-color-grayscale-dark-2 + ); } [data-theme='brand-1'] { - --bs-button-color: var(--bs-color-brand-1-dark-2); - --bs-button-background-color: transparent; - --bs-button-hover-color: var(--bs-color-brand-1-dark-3); - --bs-button-hover-background-color: var(--bs-color-brand-1-light-2); - --bs-button-active-color: var(--bs-color-grayscale-white); - --bs-button-active-background-color: var(--bs-color-brand-1-dark-2); + --bs-button--primary-color: var(--bs-color-brand-1-dark-2); + --bs-button--primary-background-color: transparent; + --bs-button--primary-hover-color: var(--bs-color-brand-1-dark-3); + --bs-button--primary-hover-background-color: var(--bs-color-brand-1-light-2); + --bs-button--primary-active-color: var(--bs-color-grayscale-white); + --bs-button--primary-active-background-color: var(--bs-color-brand-1-dark-2); } [data-theme='brand-2'] { - --bs-button-color: var(--bs-color-brand-2-dark-2); - --bs-button-background-color: transparent; - --bs-button-hover-color: var(--bs-color-grayscale-dark-3); - --bs-button-hover-background-color: var(--bs-color-brand-2-light-2); - --bs-button-active-color: var(--bs-color-grayscale-white); - --bs-button-active-background-color: var(--bs-color-brand-2-dark-2); + --bs-button--primary-color: var(--bs-color-brand-2-dark-2); + --bs-button--primary-background-color: transparent; + --bs-button--primary-hover-color: var(--bs-color-grayscale-dark-3); + --bs-button--primary-hover-background-color: var(--bs-color-brand-2-light-2); + --bs-button--primary-active-color: var(--bs-color-grayscale-white); + --bs-button--primary-active-background-color: var(--bs-color-brand-2-dark-2); } [data-theme='positive'] { - --bs-button-color: var(--bs-color-positive-dark-2); - --bs-button-background-color: transparent; - --bs-button-hover-color: var(--bs-color-positive-dark-3); - --bs-button-hover-background-color: var(--bs-color-positive-light-2); - --bs-button-active-color: var(--bs-color-grayscale-white); - --bs-button-active-background-color: var(--bs-color-positive-dark-2); + --bs-button--primary-color: var(--bs-color-positive-dark-2); + --bs-button--primary-background-color: transparent; + --bs-button--primary-hover-color: var(--bs-color-positive-dark-3); + --bs-button--primary-hover-background-color: var(--bs-color-positive-light-2); + --bs-button--primary-active-color: var(--bs-color-grayscale-white); + --bs-button--primary-active-background-color: var(--bs-color-positive-dark-2); } [data-theme='warning'] { - --bs-button-color: var(--bs-color-warning-dark-2); - --bs-button-background-color: transparent; - --bs-button-hover-color: var(--bs-color-warning-dark-3); - --bs-button-hover-background-color: var(--bs-color-warning-light-2); - --bs-button-active-color: var(--bs-color-grayscale-white); - --bs-button-active-background-color: var(--bs-color-warning-dark-2); + --bs-button--primary-color: var(--bs-color-warning-dark-2); + --bs-button--primary-background-color: transparent; + --bs-button--primary-hover-color: var(--bs-color-warning-dark-3); + --bs-button--primary-hover-background-color: var(--bs-color-warning-light-2); + --bs-button--primary-active-color: var(--bs-color-grayscale-white); + --bs-button--primary-active-background-color: var(--bs-color-warning-dark-2); } [data-theme='danger'] { - --bs-button-color: var(--bs-color-danger-dark-1); - --bs-button-background-color: transparent; - --bs-button-hover-color: var(--bs-color-danger-dark-2); - --bs-button-hover-background-color: var(--bs-color-danger-light-2); - --bs-button-active-color: var(--bs-color-grayscale-white); - --bs-button-active-background-color: var(--bs-color-danger-dark-1); + --bs-button--primary-color: var(--bs-color-danger-dark-1); + --bs-button--primary-background-color: transparent; + --bs-button--primary-hover-color: var(--bs-color-danger-dark-2); + --bs-button--primary-hover-background-color: var(--bs-color-danger-light-2); + --bs-button--primary-active-color: var(--bs-color-grayscale-white); + --bs-button--primary-active-background-color: var(--bs-color-danger-dark-1); } [data-theme='grayscale'] { - --bs-button-color: var(--bs-color-grayscale-dark-2); - --bs-button-background-color: transparent; - --bs-button-hover-color: var(--bs-color-grayscale-dark-3); - --bs-button-hover-background-color: var(--bs-color-grayscale-light-2); - --bs-button-active-color: var(--bs-color-grayscale-white); - --bs-button-active-background-color: var(--bs-color-grayscale-dark-2); + --bs-button--primary-color: var(--bs-color-grayscale-dark-2); + --bs-button--primary-background-color: transparent; + --bs-button--primary-hover-color: var(--bs-color-grayscale-dark-3); + --bs-button--primary-hover-background-color: var( + --bs-color-grayscale-light-2 + ); + --bs-button--primary-active-color: var(--bs-color-grayscale-white); + --bs-button--primary-active-background-color: var( + --bs-color-grayscale-dark-2 + ); } .a-button--secondary, .a-button--secondary:visited { - background-color: var(--bs-button--secondary-background-color); - border-color: var(--bs-button--secondary-border-color); - box-shadow: var(--bs-button--secondary-box-shadow); - color: var(--bs-button--secondary-color); + --bs-button-color: var(--bs-button--secondary-color); + --bs-button-background-color: var(--bs-button--secondary-background-color); + --bs-button-border-color: var(--bs-button--secondary-border-color); + --bs-button-box-shadow: var(--bs-button--secondary-box-shadow); } .a-button--secondary:focus, .a-button--secondary:hover { - background-color: var(--bs-button--secondary-hover-background-color); - border-color: var(--bs-button--secondary-hover-border-color); - box-shadow: var(--bs-button--secondary-hover-box-shadow); - color: var(--bs-button--secondary-hover-color); + --bs-button-hover-color: var(--bs-button--secondary-hover-color); + --bs-button-hover-background-color: var( + --bs-button--secondary-hover-background-color + ); + --bs-button-hover-border-color: var( + --bs-button--secondary-hover-border-color + ); + --bs-button-hover-box-shadow: var(--bs-button--secondary-hover-box-shadow); } .a-button--secondary:active { - background-color: var(--bs-button--secondary-active-background-color); - border-color: var(--bs-button--secondary-active-border-color); - box-shadow: var(--bs-button--secondary-active-box-shadow); - color: var(--bs-button--secondary-active-color); + --bs-button-active-color: var(--bs-button--secondary-active-color); + --bs-button-active-background-color: var( + --bs-button--secondary-active-background-color + ); + --bs-button-active-border-color: var( + --bs-button--secondary-active-border-color + ); + --bs-button-active-box-shadow: var(--bs-button--secondary-active-box-shadow); } .a-button--secondary[aria-current], .a-button--secondary[aria-expanded='true'], .a-button--secondary[aria-pressed='true'], .a-button--secondary[aria-selected='true'] { - background-color: var(--bs-button--secondary-pressed-background-color); - border-color: var(--bs-button--secondary-pressed-border-color); - box-shadow: var(--bs-button--secondary-pressed-box-shadow); - color: var(--bs-button--secondary-pressed-color); + --bs-button-pressed-color: var(--bs-button--secondary-pressed-color); + --bs-button-pressed-background-color: var( + --bs-button--secondary-pressed-background-color + ); + --bs-button-pressed-border-color: var( + --bs-button--secondary-pressed-border-color + ); + --bs-button-pressed-box-shadow: var( + --bs-button--secondary-pressed-box-shadow + ); } .a-button--secondary:disabled, .a-button--secondary:disabled:focus, @@ -1444,10 +1840,16 @@ table { .a-button--secondary[aria-disabled='true'], .a-button--secondary[aria-disabled='true']:focus, .a-button--secondary[aria-disabled='true']:hover { - background-color: var(--bs-button--secondary-disabled-background-color); - border-color: var(--bs-button--secondary-disabled-border-color); - box-shadow: var(--bs-button--secondary-disabled-box-shadow); - color: var(--bs-button--secondary-disabled-color); + --bs-button-disabled-color: var(--bs-button--secondary-disabled-color); + --bs-button-disabled-background-color: var( + --bs-button--secondary-disabled-background-color + ); + --bs-button-disabled-border-color: var( + --bs-button--secondary-disabled-border-color + ); + --bs-button-disabled-box-shadow: var( + --bs-button--secondary-disabled-box-shadow + ); } :root, [data-theme='default'] { @@ -1516,32 +1918,42 @@ table { } .a-button--outline, .a-button--outline:visited { - background-color: var(--bs-button--outline-background-color); - border-color: var(--bs-button--outline-border-color); - box-shadow: var(--bs-button--outline-box-shadow); - color: var(--bs-button--outline-color); + --bs-button-color: var(--bs-button--outline-color); + --bs-button-background-color: var(--bs-button--outline-background-color); + --bs-button-border-color: var(--bs-button--outline-border-color); + --bs-button-box-shadow: var(--bs-button--outline-box-shadow); } .a-button--outline:focus, .a-button--outline:hover { - background-color: var(--bs-button--outline-hover-background-color); - border-color: var(--bs-button--outline-hover-border-color); - box-shadow: var(--bs-button--outline-hover-box-shadow); - color: var(--bs-button--outline-hover-color); + --bs-button-hover-color: var(--bs-button--outline-hover-color); + --bs-button-hover-background-color: var( + --bs-button--outline-hover-background-color + ); + --bs-button-hover-border-color: var(--bs-button--outline-hover-border-color); + --bs-button-hover-box-shadow: var(--bs-button--outline-hover-box-shadow); } .a-button--outline:active { - background-color: var(--bs-button--outline-active-background-color); - border-color: var(--bs-button--outline-active-border-color); - box-shadow: var(--bs-button--outline-active-box-shadow); - color: var(--bs-button--outline-active-color); + --bs-button-active-color: var(--bs-button--outline-active-color); + --bs-button-active-background-color: var( + --bs-button--outline-active-background-color + ); + --bs-button-active-border-color: var( + --bs-button--outline-active-border-color + ); + --bs-button-active-box-shadow: var(--bs-button--outline-active-box-shadow); } .a-button--outline[aria-current], .a-button--outline[aria-expanded='true'], .a-button--outline[aria-pressed='true'], .a-button--outline[aria-selected='true'] { - background-color: var(--bs-button--outline-pressed-background-color); - border-color: var(--bs-button--outline-pressed-border-color); - box-shadow: var(--bs-button--outline-pressed-box-shadow); - color: var(--bs-button--outline-pressed-color); + --bs-button-pressed-color: var(--bs-button--outline-pressed-color); + --bs-button-pressed-background-color: var( + --bs-button--outline-pressed-background-color + ); + --bs-button-pressed-border-color: var( + --bs-button--outline-pressed-border-color + ); + --bs-button-pressed-box-shadow: var(--bs-button--outline-pressed-box-shadow); } .a-button--outline:disabled, .a-button--outline:disabled:focus, @@ -1549,10 +1961,16 @@ table { .a-button--outline[aria-disabled='true'], .a-button--outline[aria-disabled='true']:focus, .a-button--outline[aria-disabled='true']:hover { - background-color: var(--bs-button--outline-disabled-background-color); - border-color: var(--bs-button--outline-disabled-border-color); - box-shadow: var(--bs-button--outline-disabled-box-shadow); - color: var(--bs-button--outline-disabled-color); + --bs-button-disabled-color: var(--bs-button--outline-disabled-color); + --bs-button-disabled-background-color: var( + --bs-button--outline-disabled-background-color + ); + --bs-button-disabled-border-color: var( + --bs-button--outline-disabled-border-color + ); + --bs-button-disabled-box-shadow: var( + --bs-button--outline-disabled-box-shadow + ); } :root, [data-theme='default'] { @@ -1621,32 +2039,48 @@ table { } .a-button--transparent, .a-button--transparent:visited { - background-color: var(--bs-button--transparent-background-color); - border-color: var(--bs-button--transparent-border-color); - box-shadow: var(--bs-button--transparent-box-shadow); - color: var(--bs-button--transparent-color); + --bs-button-color: var(--bs-button--transparent-color); + --bs-button-background-color: var(--bs-button--transparent-background-color); + --bs-button-border-color: var(--bs-button--transparent-border-color); + --bs-button-box-shadow: var(--bs-button--transparent-box-shadow); } .a-button--transparent:focus, .a-button--transparent:hover { - background-color: var(--bs-button--transparent-hover-background-color); - border-color: var(--bs-button--transparent-hover-border-color); - box-shadow: var(--bs-button--transparent-hover-box-shadow); - color: var(--bs-button--transparent-hover-color); + --bs-button-hover-color: var(--bs-button--transparent-hover-color); + --bs-button-hover-background-color: var( + --bs-button--transparent-hover-background-color + ); + --bs-button-hover-border-color: var( + --bs-button--transparent-hover-border-color + ); + --bs-button-hover-box-shadow: var(--bs-button--transparent-hover-box-shadow); } .a-button--transparent:active { - background-color: var(--bs-button--transparent-active-background-color); - border-color: var(--bs-button--transparent-active-border-color); - box-shadow: var(--bs-button--transparent-active-box-shadow); - color: var(--bs-button--transparent-active-color); + --bs-button-active-color: var(--bs-button--transparent-active-color); + --bs-button-active-background-color: var( + --bs-button--transparent-active-background-color + ); + --bs-button-active-border-color: var( + --bs-button--transparent-active-border-color + ); + --bs-button-active-box-shadow: var( + --bs-button--transparent-active-box-shadow + ); } .a-button--transparent[aria-current], .a-button--transparent[aria-expanded='true'], .a-button--transparent[aria-pressed='true'], .a-button--transparent[aria-selected='true'] { - background-color: var(--bs-button--transparent-pressed-background-color); - border-color: var(--bs-button--transparent-pressed-border-color); - box-shadow: var(--bs-button--transparent-pressed-box-shadow); - color: var(--bs-button--transparent-pressed-color); + --bs-button-pressed-color: var(--bs-button--transparent-pressed-color); + --bs-button-pressed-background-color: var( + --bs-button--transparent-pressed-background-color + ); + --bs-button-pressed-border-color: var( + --bs-button--transparent-pressed-border-color + ); + --bs-button-pressed-box-shadow: var( + --bs-button--transparent-pressed-box-shadow + ); } .a-button--transparent:disabled, .a-button--transparent:disabled:focus, @@ -1654,10 +2088,16 @@ table { .a-button--transparent[aria-disabled='true'], .a-button--transparent[aria-disabled='true']:focus, .a-button--transparent[aria-disabled='true']:hover { - background-color: var(--bs-button--transparent-disabled-background-color); - border-color: var(--bs-button--transparent-disabled-border-color); - box-shadow: var(--bs-button--transparent-disabled-box-shadow); - color: var(--bs-button--transparent-disabled-color); + --bs-button-disabled-color: var(--bs-button--transparent-disabled-color); + --bs-button-disabled-background-color: var( + --bs-button--transparent-disabled-background-color + ); + --bs-button-disabled-border-color: var( + --bs-button--transparent-disabled-border-color + ); + --bs-button-disabled-box-shadow: var( + --bs-button--transparent-disabled-box-shadow + ); } :root, [data-theme='default'] { @@ -1742,32 +2182,38 @@ table { } .a-button--tab, .a-button--tab:visited { - background-color: var(--bs-button--tab-background-color); - border-color: var(--bs-button--tab-border-color); - box-shadow: var(--bs-button--tab-box-shadow); - color: var(--bs-button--tab-color); + --bs-button-color: var(--bs-button--tab-color); + --bs-button-background-color: var(--bs-button--tab-background-color); + --bs-button-border-color: var(--bs-button--tab-border-color); + --bs-button-box-shadow: var(--bs-button--tab-box-shadow); } .a-button--tab:focus, .a-button--tab:hover { - background-color: var(--bs-button--tab-hover-background-color); - border-color: var(--bs-button--tab-hover-border-color); - box-shadow: var(--bs-button--tab-hover-box-shadow); - color: var(--bs-button--tab-hover-color); + --bs-button-hover-color: var(--bs-button--tab-hover-color); + --bs-button-hover-background-color: var( + --bs-button--tab-hover-background-color + ); + --bs-button-hover-border-color: var(--bs-button--tab-hover-border-color); + --bs-button-hover-box-shadow: var(--bs-button--tab-hover-box-shadow); } .a-button--tab:active { - background-color: var(--bs-button--tab-active-background-color); - border-color: var(--bs-button--tab-active-border-color); - box-shadow: var(--bs-button--tab-active-box-shadow); - color: var(--bs-button--tab-active-color); + --bs-button-active-color: var(--bs-button--tab-active-color); + --bs-button-active-background-color: var( + --bs-button--tab-active-background-color + ); + --bs-button-active-border-color: var(--bs-button--tab-active-border-color); + --bs-button-active-box-shadow: var(--bs-button--tab-active-box-shadow); } .a-button--tab[aria-current], .a-button--tab[aria-expanded='true'], .a-button--tab[aria-pressed='true'], .a-button--tab[aria-selected='true'] { - background-color: var(--bs-button--tab-pressed-background-color); - border-color: var(--bs-button--tab-pressed-border-color); - box-shadow: var(--bs-button--tab-pressed-box-shadow); - color: var(--bs-button--tab-pressed-color); + --bs-button-pressed-color: var(--bs-button--tab-pressed-color); + --bs-button-pressed-background-color: var( + --bs-button--tab-pressed-background-color + ); + --bs-button-pressed-border-color: var(--bs-button--tab-pressed-border-color); + --bs-button-pressed-box-shadow: var(--bs-button--tab-pressed-box-shadow); } .a-button--tab:disabled, .a-button--tab:disabled:focus, @@ -1775,10 +2221,14 @@ table { .a-button--tab[aria-disabled='true'], .a-button--tab[aria-disabled='true']:focus, .a-button--tab[aria-disabled='true']:hover { - background-color: var(--bs-button--tab-disabled-background-color); - border-color: var(--bs-button--tab-disabled-border-color); - box-shadow: var(--bs-button--tab-disabled-box-shadow); - color: var(--bs-button--tab-disabled-color); + --bs-button-disabled-color: var(--bs-button--tab-disabled-color); + --bs-button-disabled-background-color: var( + --bs-button--tab-disabled-background-color + ); + --bs-button-disabled-border-color: var( + --bs-button--tab-disabled-border-color + ); + --bs-button-disabled-box-shadow: var(--bs-button--tab-disabled-box-shadow); } :root, [data-theme='default'] { @@ -1818,25 +2268,33 @@ table { } .a-button--danger:focus, .a-button--danger:hover { - background-color: var(--bs-button--danger-hover-background-color); - border-color: var(--bs-button--danger-hover-border-color); - box-shadow: var(--bs-button--danger-hover-box-shadow); - color: var(--bs-button--danger-hover-color); + --bs-button-hover-color: var(--bs-button--danger-hover-color); + --bs-button-hover-background-color: var( + --bs-button--danger-hover-background-color + ); + --bs-button-hover-border-color: var(--bs-button--danger-hover-border-color); + --bs-button-hover-box-shadow: var(--bs-button--danger-hover-box-shadow); } .a-button--danger:active { - background-color: var(--bs-button--danger-active-background-color); - border-color: var(--bs-button--danger-active-border-color); - box-shadow: var(--bs-button--danger-active-box-shadow); - color: var(--bs-button--danger-active-color); + --bs-button-active-color: var(--bs-button--danger-active-color); + --bs-button-active-background-color: var( + --bs-button--danger-active-background-color + ); + --bs-button-active-border-color: var(--bs-button--danger-active-border-color); + --bs-button-active-box-shadow: var(--bs-button--danger-active-box-shadow); } .a-button--danger[aria-current], .a-button--danger[aria-expanded='true'], .a-button--danger[aria-pressed='true'], .a-button--danger[aria-selected='true'] { - background-color: var(--bs-button--danger-pressed-background-color); - border-color: var(--bs-button--danger-pressed-border-color); - box-shadow: var(--bs-button--danger-pressed-box-shadow); - color: var(--bs-button--danger-pressed-color); + --bs-button-pressed-color: var(--bs-button--danger-pressed-color); + --bs-button-pressed-background-color: var( + --bs-button--danger-pressed-background-color + ); + --bs-button-pressed-border-color: var( + --bs-button--danger-pressed-border-color + ); + --bs-button-pressed-box-shadow: var(--bs-button--danger-pressed-box-shadow); } :root, [data-theme='default'] { @@ -1860,8 +2318,8 @@ table { --bs-button-border-radius: var(--bs-size-s4); --bs-button-min-height: 1em; --bs-button-min-width: 0; - --bs-button-font-size: var(--bs-font-size-2); --bs-button-font-weight: 600; + --bs-button-line-height: var(--bs-line-height-4); } .a-button.a-button--square { --bs-button-min-width: calc( @@ -2496,8 +2954,13 @@ table { padding-right: var(--bs-size-s3); } .o-joined-ui { + align-items: stretch; border-radius: var(--bs-size-s3); box-shadow: none; + display: inline-flex; +} +.o-joined-ui > * { + display: flex; } .o-joined-ui > .a-button:first-child, .o-joined-ui > :first-child .a-button { @@ -2506,6 +2969,20 @@ table { --bs-button-border-bottom-right-radius: 0; margin-right: calc(var(--bs-button-border-width) * -1); } +.o-joined-ui > :first-child input, +.o-joined-ui > input:first-child { + --bs-input-text-box-shadow: none; + --bs-input-text-border-top-right-radius: 0; + --bs-input-text-border-bottom-right-radius: 0; + margin-right: calc(var(--bs-input-text-border-width) * -1); +} +.o-joined-ui > :first-child select, +.o-joined-ui > select:first-child { + --bs-select-box-shadow: none; + --bs-select-border-top-right-radius: 0; + --bs-select-border-bottom-right-radius: 0; + margin-right: calc(var(--bs-select-border-width) * -1); +} .o-joined-ui > .a-button:last-child, .o-joined-ui > :last-child .a-button { --bs-button-box-shadow: none; @@ -2513,6 +2990,20 @@ table { --bs-button-border-bottom-left-radius: 0; margin-right: 0; } +.o-joined-ui > :last-child input, +.o-joined-ui > input:last-child { + --bs-input-text-box-shadow: none; + --bs-input-text-border-top-left-radius: 0; + --bs-input-text-border-bottom-left-radius: 0; + margin-right: 0; +} +.o-joined-ui > :last-child select, +.o-joined-ui > select:last-child { + --bs-select-box-shadow: none; + --bs-select-border-top-left-radius: 0; + --bs-select-border-bottom-left-radius: 0; + margin-right: 0; +} .o-joined-ui > .a-button:not(:first-child):not(:last-child), .o-joined-ui > :not(:first-child):not(:last-child) .a-button { --bs-button-border-top-left-radius: 0; @@ -2521,6 +3012,22 @@ table { --bs-button-border-bottom-left-radius: 0; margin-right: calc(var(--bs-button-border-width) * -1); } +.o-joined-ui > :not(:first-child):not(:last-child) input, +.o-joined-ui > input:not(:first-child):not(:last-child) { + --bs-input-text-border-top-left-radius: 0; + --bs-input-text-border-top-right-radius: 0; + --bs-input-text-border-bottom-right-radius: 0; + --bs-input-text-border-bottom-left-radius: 0; + margin-right: calc(var(--bs-input-text-border-width) * -1); +} +.o-joined-ui > :not(:first-child):not(:last-child) select, +.o-joined-ui > select:not(:first-child):not(:last-child) { + --bs-select-border-top-left-radius: 0; + --bs-select-border-top-right-radius: 0; + --bs-select-border-bottom-right-radius: 0; + --bs-select-border-bottom-left-radius: 0; + margin-right: calc(var(--bs-select-border-width) * -1); +} .u-aspect-ratio-1-1 { aspect-ratio: 1/1; }