This is an automated email from the ASF dual-hosted git repository. dominikriemer pushed a commit to branch modernize-appearance-css in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit 28bd15d31081600955ea91bc9924a6b0ceb6a6bd Author: Dominik Riemer <[email protected]> AuthorDate: Mon Jun 22 21:04:58 2026 +0200 style: Improve appearance of buttons and toggles --- .../configure-schema.component.scss | 4 - ui/src/scss/sp/_variables.scss | 52 +++++- ui/src/scss/sp/buttons-mat3.scss | 201 ++++++++++++++++++--- ui/src/scss/sp/forms-mat3.scss | 37 +++- ui/src/scss/sp/mat-tab.scss | 44 ++++- 5 files changed, 293 insertions(+), 45 deletions(-) diff --git a/ui/src/app/connect/components/adapter-configuration/configure-schema/configure-schema.component.scss b/ui/src/app/connect/components/adapter-configuration/configure-schema/configure-schema.component.scss index 63da642e69..cf0f1a803c 100644 --- a/ui/src/app/connect/components/adapter-configuration/configure-schema/configure-schema.component.scss +++ b/ui/src/app/connect/components/adapter-configuration/configure-schema/configure-schema.component.scss @@ -17,10 +17,6 @@ */ :host { - --mat-button-toggle-selected-state-text-color: var(--color-bg-1); - --mat-button-toggle-selected-state-background-color: var(--color-primary); - --mat-button-toggle-text-color: var(--color-default-text); - --mat-button-toggle-background-color: var(--color-bg-0); --mat-button-toggle-height: 20px; } diff --git a/ui/src/scss/sp/_variables.scss b/ui/src/scss/sp/_variables.scss index 7900e374dd..17f47d8a93 100644 --- a/ui/src/scss/sp/_variables.scss +++ b/ui/src/scss/sp/_variables.scss @@ -123,16 +123,60 @@ var(--color-primary) 10%, var(--color-bg-0) ); + --color-panel-header-accent: color-mix( + in srgb, + var(--color-primary) 5%, + var(--color-bg-0) + ); + + // Semantic appearance tokens + --radius-xs: 0.25rem; + --radius-sm: 0.5rem; + --radius-md: 0.75rem; + --radius-lg: 1rem; + --radius-pill: 999px; + --color-border-subtle: color-mix( in srgb, - var(--color-bg-3) 72%, + var(--mat-sys-outline-variant) 72%, transparent ); - --color-panel-header-accent: color-mix( + --color-border-default: color-mix( in srgb, - var(--color-primary) 5%, - var(--color-bg-0) + var(--mat-sys-outline) 58%, + transparent + ); + --color-border-strong: color-mix( + in srgb, + var(--mat-sys-outline) 78%, + transparent + ); + + --color-surface-interactive: var(--mat-sys-surface-container-low); + --color-surface-interactive-hover: var(--mat-sys-surface-container); + --color-surface-interactive-active: var(--mat-sys-surface-container-high); + --color-surface-selected: color-mix( + in srgb, + var(--mat-sys-primary) 10%, + var(--mat-sys-surface) + ); + --color-surface-selected-hover: color-mix( + in srgb, + var(--mat-sys-primary) 15%, + var(--mat-sys-surface) + ); + + --color-focus-ring: color-mix( + in srgb, + var(--mat-sys-primary) 38%, + transparent ); + --focus-ring: 0 0 0 3px var(--color-focus-ring); + + --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.16); + --motion-duration-fast: 120ms; + --motion-duration-standard: 180ms; + --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); } .dark-mode { diff --git a/ui/src/scss/sp/buttons-mat3.scss b/ui/src/scss/sp/buttons-mat3.scss index 7e073ec758..83000ac079 100644 --- a/ui/src/scss/sp/buttons-mat3.scss +++ b/ui/src/scss/sp/buttons-mat3.scss @@ -19,69 +19,215 @@ @use '@angular/material' as mat; :root { - .mat-mdc-icon-button .mat-mdc-button-persistent-ripple { - border-radius: 6px; - } @include mat.button-overrides( ( - filled-container-shape: 1.5rem, - outlined-outline-color: var(--mat-sys-outline), + filled-container-shape: var(--radius-sm), + outlined-container-shape: var(--radius-sm), + outlined-outline-color: var(--color-border-default), outlined-label-text-color: var(--mat-sys-on-surface), - filled-label-text-weight: 400, + text-container-shape: var(--radius-sm), + filled-label-text-weight: var(--font-weight-medium), + outlined-label-text-weight: var(--font-weight-medium), + text-label-text-weight: var(--font-weight-medium), filled-label-text-tracking: -0.01em, outlined-label-text-tracking: -0.01em, - text-container-shape: 6px, text-label-text-tracking: -0.01em, - filled-hover-state-layer-opacity: 0.2, + filled-hover-state-layer-opacity: 0.1, + outlined-hover-state-layer-opacity: 0.06, + text-hover-state-layer-opacity: 0.06, ) ); - .btn-secondary { + @include mat.icon-button-overrides( + ( + container-shape: var(--radius-sm), + icon-color: var(--color-primary), + state-layer-color: var(--color-primary), + hover-state-layer-opacity: 0.06, + focus-state-layer-opacity: 0.06, + pressed-state-layer-opacity: 0.1, + ) + ); + + @include mat.button-toggle-overrides( + ( + shape: var(--radius-sm), + height: 1.875rem, + background-color: var(--color-surface-interactive), + text-color: var(--mat-sys-on-surface-variant), + divider-color: var(--color-border-subtle), + selected-state-background-color: var(--color-surface-selected), + selected-state-text-color: var(--mat-sys-primary), + state-layer-color: var(--mat-sys-on-surface), + hover-state-layer-opacity: 0.06, + focus-state-layer-opacity: 0.06, + label-text-weight: var(--font-weight-medium), + label-text-tracking: -0.01em, + ) + ); + + .mat-mdc-icon-button { + display: inline-flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + padding: 0; + color: var(--mat-icon-button-icon-color); + background: transparent; + border: 1px solid transparent; + border-radius: var(--radius-sm); + transition: + background-color var(--motion-duration-fast) + var(--motion-easing-standard), + border-color var(--motion-duration-fast) + var(--motion-easing-standard); + } + + .mat-mdc-icon-button .mat-icon { + display: inline-flex; + align-items: center; + justify-content: center; + margin: 0; + line-height: 1; + } + + .mat-mdc-icon-button .mat-mdc-button-persistent-ripple { + border-radius: var(--radius-sm); + } + + .mat-mdc-icon-button:hover:not(:disabled) { + background: color-mix(in srgb, currentColor 8%, transparent); + border-color: color-mix(in srgb, currentColor 14%, transparent); + } + + .mat-mdc-icon-button:active:not(:disabled) { + background: color-mix(in srgb, currentColor 12%, transparent); + border-color: color-mix(in srgb, currentColor 20%, transparent); + } + + .mat-mdc-icon-button[aria-pressed='true'], + .mat-mdc-icon-button.sp-navbar-icon-button-selected { + background: var(--color-surface-selected); + border-color: color-mix( + in srgb, + var(--mat-sys-primary) 18%, + transparent + ); + } + + .mat-mdc-icon-button:focus-visible { + outline: 2px solid var(--mat-sys-primary); + outline-offset: -2px; + box-shadow: none; + } + + .mat-mdc-icon-button:disabled { + background: transparent; + border-color: transparent; + } + + .mat-button-toggle-group { + border-color: var(--color-border-subtle); + border-radius: var(--radius-sm); + background: var(--color-surface-interactive); + } + + .mat-button-toggle { + transition: + background-color var(--motion-duration-fast) + var(--motion-easing-standard), + color var(--motion-duration-fast) var(--motion-easing-standard); + } + + .mat-button-toggle:hover:not(.mat-button-toggle-checked) { + background: var(--color-surface-interactive-hover); + } + + .mat-button-toggle-checked:hover { + background: var(--color-surface-selected-hover); + } + + .mat-button-toggle-button:focus-visible { + outline: 2px solid var(--mat-sys-primary); + outline-offset: -2px; + } + + .btn-secondary, + .mat-basic { + border: 1px solid var(--color-border-subtle); + @include mat.button-overrides( ( - filled-container-color: var(--mat-sys-surface-container-high), - filled-label-text-color: var(--mat-sys-secondary), - text-hover-state-layer-opacity: 1, - filled-label-text-weight: 400, + filled-container-color: var(--color-surface-interactive), + filled-state-layer-color: var(--mat-sys-on-surface), + filled-hover-state-layer-opacity: 0.06, + filled-pressed-state-layer-opacity: 0.1, ) ); } - .btn-secondary-outline { - border: 1px solid var(--color-primary); + .btn-secondary { @include mat.button-overrides( ( - filled-container-color: var(--mat-sys-surface-container-high), - filled-label-text-color: var(--mat-sys-primary), - text-hover-state-layer-opacity: 1, - filled-label-text-weight: 400, + filled-label-text-color: var(--mat-sys-on-surface), ) ); } .mat-basic { - border: 1px solid var(--mat-sys-surface-container-high); @include mat.button-overrides( ( - filled-container-color: var(--mat-sys-surface-container-high), + filled-label-text-color: var(--color-primary), + filled-state-layer-color: var(--color-primary), + ) + ); + } + + .btn-secondary-outline { + border: 1px solid var(--color-border-default); + + @include mat.button-overrides( + ( + filled-container-color: transparent, filled-label-text-color: var(--mat-sys-primary), - text-hover-state-layer-opacity: 1, - filled-label-text-weight: 400, + filled-state-layer-color: var(--mat-sys-primary), + filled-hover-state-layer-opacity: 0.06, ) ); } .btn-warn { + border: 1px solid + color-mix(in srgb, var(--mat-sys-error) 24%, transparent); + @include mat.button-overrides( ( filled-container-color: var(--mat-sys-error-container), filled-label-text-color: var(--mat-sys-on-error-container), - text-hover-state-layer-opacity: 1, - filled-label-text-weight: 400, + filled-state-layer-color: var(--mat-sys-error), + filled-hover-state-layer-opacity: 0.08, ) ); } + .mat-mdc-button-base { + transition: + background-color var(--motion-duration-fast) + var(--motion-easing-standard), + border-color var(--motion-duration-fast) + var(--motion-easing-standard), + box-shadow var(--motion-duration-fast) var(--motion-easing-standard); + } + + .mat-mdc-button-base:focus-visible { + outline: none; + box-shadow: var(--focus-ring); + } + + .mat-mdc-button-base[disabled] { + border-color: transparent; + } + .mdc-button.small-button { padding: 0.25rem 0.75rem; font-size: var(--font-size-sm); @@ -101,8 +247,9 @@ font-size: var(--font-size-sm); max-height: 75px; line-height: 25px; - background: white; - border: 1.5px solid var(--mat-sys-primary); + background: var(--mat-sys-surface); + border: 1px solid var(--color-border-default); color: var(--mat-sys-primary); + border-radius: var(--radius-sm); } } diff --git a/ui/src/scss/sp/forms-mat3.scss b/ui/src/scss/sp/forms-mat3.scss index e8d4f5d9ec..ca58139f33 100644 --- a/ui/src/scss/sp/forms-mat3.scss +++ b/ui/src/scss/sp/forms-mat3.scss @@ -23,13 +23,9 @@ ( container-height: 2.5rem, container-vertical-padding: 0.5rem, - outlined-container-shape: 2px, - outlined-outline-color: var(--mat-sys-surface-container-highest), - outlined-hover-outline-color: color-mix( - in srgb, - var(--mat-sys-outline) 85%, - #000 0% - ), + outlined-container-shape: var(--radius-sm), + outlined-outline-color: var(--color-border-subtle), + outlined-hover-outline-color: var(--color-border-strong), outlined-focus-outline-color: var(--mat-sys-primary), outlined-label-text-color: var(--mat-sys-on-surface-variant), outlined-caret-color: var(--mat-sys-primary), @@ -41,4 +37,31 @@ ), ) ); + + .mat-mdc-form-field { + transition: filter var(--motion-duration-fast) + var(--motion-easing-standard); + } + + .mat-mdc-form-field .mdc-text-field--outlined { + background-color: var(--color-surface-interactive); + border-radius: var(--radius-sm); + transition: + background-color var(--motion-duration-fast) + var(--motion-easing-standard), + box-shadow var(--motion-duration-fast) var(--motion-easing-standard); + } + + .mat-mdc-form-field:hover .mdc-text-field--outlined { + background-color: var(--color-surface-interactive-hover); + } + + .mat-mdc-form-field:has(.mdc-text-field--focused) + .mdc-text-field--outlined { + background-color: var(--mat-sys-surface); + } + + .mat-mdc-form-field.mat-form-field-disabled { + filter: saturate(0.7); + } } diff --git a/ui/src/scss/sp/mat-tab.scss b/ui/src/scss/sp/mat-tab.scss index 912850e62d..1660e66dd5 100644 --- a/ui/src/scss/sp/mat-tab.scss +++ b/ui/src/scss/sp/mat-tab.scss @@ -16,13 +16,51 @@ * */ -.mdc-tab__text-label { - color: rgba(0, 0, 0, 0.87); +.mat-mdc-tab-group { + --mat-tab-active-indicator-color: var(--mat-sys-primary); + --mat-tab-active-label-text-color: var(--mat-sys-primary); + --mat-tab-active-focus-label-text-color: var(--mat-sys-primary); + --mat-tab-active-hover-label-text-color: var(--mat-sys-primary); + --mat-tab-inactive-label-text-color: var(--mat-sys-on-surface-variant); + --mat-tab-inactive-focus-label-text-color: var(--mat-sys-on-surface); + --mat-tab-inactive-hover-label-text-color: var(--mat-sys-on-surface); + --mat-tab-divider-color: var(--color-border-subtle); +} + +.mat-mdc-tab { + border-radius: var(--radius-xs) var(--radius-xs) 0 0; + transition: + background-color var(--motion-duration-fast) + var(--motion-easing-standard), + color var(--motion-duration-fast) var(--motion-easing-standard); +} + +.mat-mdc-tab:hover { + background: color-mix(in srgb, var(--mat-sys-on-surface) 4%, transparent); +} + +.mat-mdc-tab.mdc-tab--active { + background: transparent; +} + +.mat-mdc-tab.mdc-tab--active:hover { + background: color-mix(in srgb, var(--mat-sys-primary) 5%, transparent); +} + +.mat-mdc-tab:focus-visible { + outline: none; + box-shadow: inset 0 0 0 2px var(--color-focus-ring); +} + +.mat-mdc-tab .mdc-tab-indicator__content--underline { + border-top-width: 2px; + border-radius: var(--radius-pill); } .mat-mdc-tab-group.small-tab-headers .mdc-tab__text-label { height: 32px; - font-size: 10pt; + font-size: var(--font-size-sm); + font-weight: var(--font-weight-medium); } .mat-mdc-tab-group.mat-tab-fill-height .mat-mdc-tab-body-wrapper {
