diff --git a/packages/theme/styles/_colors.scss b/packages/theme/styles/_colors.scss index 01892a6b8a..b614101298 100644 --- a/packages/theme/styles/_colors.scss +++ b/packages/theme/styles/_colors.scss @@ -38,6 +38,15 @@ --negative-button-pressed: #BF3636; --negative-button-focused: #CA4242; + --theme-primary-default: #205DC2; + --theme-primary-hovered: #3575DE; + --theme-primary-pressed: #1C52AB; + --theme-primary-disabled: #0000001F; + --theme-primary-accented-default: #D3E1F8; + --theme-primary-accented-hovered: #BDD2F5; + --theme-primary-accented-pressed: #A7C3F1; + --theme-primary-accented-focused: #BDD2F5; + --white-color: #fff; --duotone-color: rgba(126, 134, 158, .25); @@ -144,7 +153,6 @@ --theme-editbox-focus-color: rgba(255, 255, 255, .04); --theme-editbox-focus-border: #5190EC; - --theme-editbox-default-focus-border: #205DC2; // Light --theme-tablist-color: rgba(0, 0, 0, .02); --theme-tablist-plain-color: #2A64C4; // Light --theme-tablist-plain-divider: rgba(255, 255, 255, .07); // Light invert @@ -340,7 +348,6 @@ --theme-editbox-focus-color: rgba(0, 0, 0, .08); --theme-editbox-focus-border: #5190EC; - --theme-editbox-default-focus-border: #205DC2; --theme-tablist-color: rgba(0, 0, 0, .02); --theme-tablist-plain-color: #2A64C4; --theme-tablist-plain-divider: rgba(0, 0, 0, .07); diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss index 8fa86252e2..c67f841c40 100644 --- a/packages/theme/styles/components.scss +++ b/packages/theme/styles/components.scss @@ -303,70 +303,115 @@ /* Radio Button */ .antiRadio { - position: absolute; - width: 1px; - height: 1px; - margin: -1px; - border: 0; - padding: 0; - clip: rect(0 0 0 0); - overflow: hidden; + position: relative; + display: inline-flex; + align-items: center; + height: min-content; + min-width: 0; + outline: none; - & + label { - position: relative; - margin-top: .375rem; + input { + position: absolute; + width: 1px; + height: 1px; + margin: -1px; + border: 0; + padding: 0; + clip: rect(0 0 0 0); + overflow: hidden; + } + + &.gap-none { margin-bottom: 0; } + &.gap-small { margin-bottom: .25rem; } + &.gap-medium { margin-bottom: .5rem; } + + label { padding-left: 1.375rem; font-size: .8125rem; + color: var(--theme-content-color); - &.gap-none { margin-bottom: .375rem; } - &.gap-small { margin-bottom: .625rem; } - &.gap-medium { margin-bottom: .875rem; } - - &::before, &::after { position: absolute; - border-radius: 50%; - } - &::before { - content: ''; - top: .0625rem; - left: 0; - width: 1rem; - height: 1rem; - background-color: var(--theme-button-default); - border: 1px solid var(--theme-button-border); - } - &::after { - top: .3125rem; + top: .25rem; left: .25rem; width: .5rem; height: .5rem; background-color: var(--accented-button-color); + border-radius: 50%; + opacity: .8; + z-index: 1; } } - &:not(:disabled, :checked) + label:hover::before { background-color: var(--theme-button-hovered); } - &:not(:disabled):active + label::before { background-color: var(--theme-button-pressed); } - &:disabled + label::before { - background-color: var(--theme-button-border); - border-color: transparent; + + &::before, + &::after { + position: absolute; + border-radius: 50%; } - &:focus + label::before { box-shadow: 0 0 0 2px var(--accented-button-outline); } - &:focus:not(:checked) + label::before { - background-color: var(--theme-button-focused); - border-color: var(--theme-button-focused-border); + &::before { + top: -.1875rem; + left: -.1875rem; + width: 1.375rem; + height: 1.375rem; + border: 1px solid var(--theme-primary-default); } - &:checked + label::before { - background-color: var(--accented-button-default); - border-color: var(--accented-button-border); + &::after { + content: ''; + top: 0rem; + left: 0rem; + width: 1rem; + height: 1rem; + background-color: var(--theme-button-default); + border: 1px solid var(--theme-divider-color); } - &:checked:focus + label::before { background-color: var(--accented-button-focused); } - &:checked:hover + label::before { background-color: var(--accented-button-hovered); } - &:checked:active + label::before { background-color: var(--accented-button-pressed); } - &:checked:disabled + label::before { - background-color: var(--accented-button-disabled); - border-color: var(--theme-button-border); + &:not(.disabled, .checked):hover { + &::after { background-color: var(--theme-button-hovered); } + label { color: var(--theme-caption-color); } + } + &.checked:not(.disabled):hover { + &::after { background-color: var(--theme-primary-hovered); } + label { + color: var(--theme-caption-color); + &::after { opacity: 1; } + } + } + &:focus-within:not(.disabled) { + &::before { content: ''; } + label { color: var(--theme-caption-color); } + &.checked { + label::after { opacity: 1; } + &:active::after { background-color: var(--theme-primary-pressed); } + } + } + &.checked:not(.disabled) { + &::after { background-color: var(--theme-primary-default); } + label::after { content: ''; } + } + &.disabled { + cursor: not-allowed; + + &::after { + background-color: var(--theme-primary-disabled); + border-color: transparent; + } + label { + color: var(--theme-darker-color); + cursor: not-allowed; + } + &.checked label::after { + content: ''; + opacity: .4; + } + } + &:not(.disabled), + &:not(.disabled) label { cursor: pointer; } + &:not(.disabled):active { + &::after { background-color: var(--theme-primary-pressed); } + label::after { + content: ''; + opacity: 1; + } } - &:checked + label::after { content: ''; } } /* StatesBar */ @@ -811,7 +856,7 @@ bottom: -.125rem; left: -.125rem; right: -.125rem; - border: 1px solid var(--theme-editbox-default-focus-border); + border: 1px solid var(--theme-primary-default); border-radius: .5rem; z-index: -1; } diff --git a/packages/theme/styles/editors.scss b/packages/theme/styles/editors.scss index 1a2228ed31..520bfaaadc 100644 --- a/packages/theme/styles/editors.scss +++ b/packages/theme/styles/editors.scss @@ -85,7 +85,7 @@ &:hover { background-color: var(--theme-button-hovered); } &.focusable:focus-within { background-color: var(--theme-button-focused); - border-color: var(--theme-editbox-default-focus-border); + border-color: var(--theme-primary-default); } &.disabled { color: var(--theme-dark-color); diff --git a/packages/ui/src/components/CircleButton.svelte b/packages/ui/src/components/CircleButton.svelte index fb7a9a4cec..3be53af988 100644 --- a/packages/ui/src/components/CircleButton.svelte +++ b/packages/ui/src/components/CircleButton.svelte @@ -13,6 +13,7 @@ // limitations under the License. --> - +
@@ -46,14 +61,39 @@