From 18d825a6db7095b64dfe704b5786d6d246634729 Mon Sep 17 00:00:00 2001 From: Thorsten Scherler Date: Mon, 16 Dec 2024 12:26:55 +0100 Subject: [PATCH 1/9] [yui_button_inspired_style] add button yui styled Signed-off-by: Thorsten Scherler --- src/main/scss/components/_buttons.scss | 110 ++++++++++++++++++++++--- 1 file changed, 97 insertions(+), 13 deletions(-) diff --git a/src/main/scss/components/_buttons.scss b/src/main/scss/components/_buttons.scss index 4812949af07c..a7a7390f0c65 100644 --- a/src/main/scss/components/_buttons.scss +++ b/src/main/scss/components/_buttons.scss @@ -44,21 +44,51 @@ .jenkins-button--primary { color: var(--button-color--primary) !important; - + &::before { - background: var(--accent-color) !important; - } - - &::after { - box-shadow: 0 0 0 0.66rem var(--accent-color); - opacity: 0; - } + background: var(--accent-color) !important; + } + + &::after { + box-shadow: 0 0 0 0.66rem var(--accent-color); + opacity: 0; + } + + &:not(:disabled) { + &:hover { + &::before { + opacity: 0.9; + } + } + + &:active, + &:focus-visible { + &::before { + opacity: 0.8; + } + + &::after { + box-shadow: 0 0 0 0.33rem var(--accent-color); + opacity: 0.2; + } + } + } +} - &:not(:disabled) { - &:hover { - &::before { - opacity: 0.9; - } +.jenkins-button--primary-inverted { + color: var(--btn-secondary-color) !important; + border: 2px solid var(--btn-secondary-border); + border-radius: 4px; + font-weight: bold; + font-size: var(--font-size-xs); + &::before { + background: transparent !important; + } + + &:not(:disabled) { + &:hover { + border: 2px solid var(--accent-color) !important; + color: var(--accent-color) !important; } &:active, @@ -75,6 +105,60 @@ } } +.jenkins-button--danger { + color: var(--white) !important; + background-color: var(--destructive-color); + border-color: var(--destructive-color); + font-weight: bold; + font-size: var(--font-size-xs); + + &:not(:disabled) { + &:hover, + &:focus { + color: var(--white); + background-color: var(--danger-hover); + border-color: var(--danger-hover); + } + } + + &:focus { + box-shadow: 0 0 0 0.2rem var(--danger-active); + } + + &:active { + color: var(--white); + background-color: var(--danger-active); + border-color: var(--danger-active); + } +} + +.jenkins-button--success { + color: var(--white) !important; + background-color: var(--success-color); + border-color: var(--success-color); + font-weight: bold; + font-size: var(--font-size-xs); + + &:not(:disabled) { + &:hover, + &:focus { + color: var(--white); + background-color: var(--light-green); + border-color: var(--light-green); + } + } + + &:focus { + box-shadow: 0 0 0 0.2rem var(--light-green); + } + + &:active { + color: var(--white); + background-color: var(--light-green); + border-color: var(--light-green); + } +} + .jenkins-button--tertiary { &::before { background: transparent; From 72a6662c4e3b1b7ca52ec75dcfab0a337370debd Mon Sep 17 00:00:00 2001 From: Thorsten Scherler Date: Mon, 16 Dec 2024 12:34:02 +0100 Subject: [PATCH 2/9] [yui_button_inspired_style] formating change Signed-off-by: Thorsten Scherler --- src/main/scss/components/_buttons.scss | 88 +++++++++++++------------- 1 file changed, 44 insertions(+), 44 deletions(-) diff --git a/src/main/scss/components/_buttons.scss b/src/main/scss/components/_buttons.scss index a7a7390f0c65..15dc01bfb3fc 100644 --- a/src/main/scss/components/_buttons.scss +++ b/src/main/scss/components/_buttons.scss @@ -44,35 +44,35 @@ .jenkins-button--primary { color: var(--button-color--primary) !important; - + &::before { - background: var(--accent-color) !important; - } - - &::after { - box-shadow: 0 0 0 0.66rem var(--accent-color); - opacity: 0; + background: var(--accent-color) !important; + } + + &::after { + box-shadow: 0 0 0 0.66rem var(--accent-color); + opacity: 0; + } + + &:not(:disabled) { + &:hover { + &::before { + opacity: 0.9; + } } - - &:not(:disabled) { - &:hover { - &::before { - opacity: 0.9; - } - } - - &:active, - &:focus-visible { - &::before { - opacity: 0.8; - } - - &::after { - box-shadow: 0 0 0 0.33rem var(--accent-color); - opacity: 0.2; - } - } + + &:active, + &:focus-visible { + &::before { + opacity: 0.8; + } + + &::after { + box-shadow: 0 0 0 0.33rem var(--accent-color); + opacity: 0.2; + } } + } } .jenkins-button--primary-inverted { @@ -82,13 +82,13 @@ font-weight: bold; font-size: var(--font-size-xs); &::before { - background: transparent !important; - } - - &:not(:disabled) { - &:hover { - border: 2px solid var(--accent-color) !important; - color: var(--accent-color) !important; + background: transparent !important; + } + + &:not(:disabled) { + &:hover { + border: 2px solid var(--accent-color) !important; + color: var(--accent-color) !important; } &:active, @@ -115,16 +115,16 @@ &:not(:disabled) { &:hover, &:focus { - color: var(--white); - background-color: var(--danger-hover); - border-color: var(--danger-hover); + color: var(--white); + background-color: var(--danger-hover); + border-color: var(--danger-hover); } } - + &:focus { box-shadow: 0 0 0 0.2rem var(--danger-active); } - + &:active { color: var(--white); background-color: var(--danger-active); @@ -138,20 +138,20 @@ border-color: var(--success-color); font-weight: bold; font-size: var(--font-size-xs); - + &:not(:disabled) { &:hover, &:focus { - color: var(--white); - background-color: var(--light-green); - border-color: var(--light-green); + color: var(--white); + background-color: var(--light-green); + border-color: var(--light-green); } } - + &:focus { box-shadow: 0 0 0 0.2rem var(--light-green); } - + &:active { color: var(--white); background-color: var(--light-green); From f95810f97e993e6f2e8e9ff8c15757d2d4d54fe2 Mon Sep 17 00:00:00 2001 From: Thorsten Scherler Date: Mon, 16 Dec 2024 12:47:47 +0100 Subject: [PATCH 3/9] [yui_button_inspired_style] remove extra radius Signed-off-by: Thorsten Scherler --- src/main/scss/components/_buttons.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/main/scss/components/_buttons.scss b/src/main/scss/components/_buttons.scss index 15dc01bfb3fc..3d7fd3ba58b7 100644 --- a/src/main/scss/components/_buttons.scss +++ b/src/main/scss/components/_buttons.scss @@ -78,7 +78,6 @@ .jenkins-button--primary-inverted { color: var(--btn-secondary-color) !important; border: 2px solid var(--btn-secondary-border); - border-radius: 4px; font-weight: bold; font-size: var(--font-size-xs); &::before { From 2c5f28750179e95129c9376a6e3a4ed140866c6a Mon Sep 17 00:00:00 2001 From: Thorsten Scherler Date: Mon, 16 Dec 2024 12:59:06 +0100 Subject: [PATCH 4/9] [yui_button_inspired_style] online add one new Signed-off-by: Thorsten Scherler --- src/main/scss/components/_buttons.scss | 56 +------------------------- 1 file changed, 1 insertion(+), 55 deletions(-) diff --git a/src/main/scss/components/_buttons.scss b/src/main/scss/components/_buttons.scss index 3d7fd3ba58b7..624246b51a28 100644 --- a/src/main/scss/components/_buttons.scss +++ b/src/main/scss/components/_buttons.scss @@ -75,7 +75,7 @@ } } -.jenkins-button--primary-inverted { +.jenkins-button--outline { color: var(--btn-secondary-color) !important; border: 2px solid var(--btn-secondary-border); font-weight: bold; @@ -104,60 +104,6 @@ } } -.jenkins-button--danger { - color: var(--white) !important; - background-color: var(--destructive-color); - border-color: var(--destructive-color); - font-weight: bold; - font-size: var(--font-size-xs); - - &:not(:disabled) { - &:hover, - &:focus { - color: var(--white); - background-color: var(--danger-hover); - border-color: var(--danger-hover); - } - } - - &:focus { - box-shadow: 0 0 0 0.2rem var(--danger-active); - } - - &:active { - color: var(--white); - background-color: var(--danger-active); - border-color: var(--danger-active); - } -} - -.jenkins-button--success { - color: var(--white) !important; - background-color: var(--success-color); - border-color: var(--success-color); - font-weight: bold; - font-size: var(--font-size-xs); - - &:not(:disabled) { - &:hover, - &:focus { - color: var(--white); - background-color: var(--light-green); - border-color: var(--light-green); - } - } - - &:focus { - box-shadow: 0 0 0 0.2rem var(--light-green); - } - - &:active { - color: var(--white); - background-color: var(--light-green); - border-color: var(--light-green); - } -} - .jenkins-button--tertiary { &::before { background: transparent; From 6188712a6d8802d965ee4f9f75c6a6abd7509f3a Mon Sep 17 00:00:00 2001 From: Thorsten Scherler Date: Fri, 20 Dec 2024 11:26:45 +0100 Subject: [PATCH 5/9] [yui_button_inspired_style] add color specific outline support Signed-off-by: Thorsten Scherler --- src/main/scss/components/_buttons.scss | 34 ++++++++++++++++++++++++-- 1 file changed, 32 insertions(+), 2 deletions(-) diff --git a/src/main/scss/components/_buttons.scss b/src/main/scss/components/_buttons.scss index 624246b51a28..6a4b0c7232c5 100644 --- a/src/main/scss/components/_buttons.scss +++ b/src/main/scss/components/_buttons.scss @@ -76,8 +76,8 @@ } .jenkins-button--outline { - color: var(--btn-secondary-color) !important; - border: 2px solid var(--btn-secondary-border); + color: var(--text-color) !important; + border: 2px solid var(--text-color); font-weight: bold; font-size: var(--font-size-xs); &::before { @@ -146,6 +146,36 @@ } } +.jenkins-button--outline[class*="color"] { + color: var(--color) !important; + border: 2px solid var(--color); + &::before { + background: var(--color) !important; + } + + &:not(:disabled) { + &:hover { + border: 2px solid var(--background) !important; + color: var(--background + ) !important; + background: var(--color) !important; + opacity: 0.8; + } + + &:active, + &:focus-visible { + &::before { + opacity: 0.8; + } + + &::after { + box-shadow: 0 0 0 0.33rem var(--background); + opacity: 0.2; + } + } + } +} + .jenkins-button--primary[class*="color"] { background: transparent; color: var(--background) !important; From b41d99f65970a2308a3611b3ee712a9c604843b0 Mon Sep 17 00:00:00 2001 From: Thorsten Scherler Date: Fri, 20 Dec 2024 11:29:11 +0100 Subject: [PATCH 6/9] [yui_button_inspired_style] lint fix Signed-off-by: Thorsten Scherler --- src/main/scss/components/_buttons.scss | 45 +++++++++++++------------- 1 file changed, 23 insertions(+), 22 deletions(-) diff --git a/src/main/scss/components/_buttons.scss b/src/main/scss/components/_buttons.scss index 6a4b0c7232c5..1c37aaafa931 100644 --- a/src/main/scss/components/_buttons.scss +++ b/src/main/scss/components/_buttons.scss @@ -80,6 +80,7 @@ border: 2px solid var(--text-color); font-weight: bold; font-size: var(--font-size-xs); + &::before { background: transparent !important; } @@ -147,33 +148,33 @@ } .jenkins-button--outline[class*="color"] { - color: var(--color) !important; - border: 2px solid var(--color); - &::before { + color: var(--color) !important; + border: 2px solid var(--color); + + &::before { + background: var(--color) !important; + } + + &:not(:disabled) { + &:hover { + border: 2px solid var(--background) !important; + color: var(--background) !important; background: var(--color) !important; + opacity: 0.8; } - - &:not(:disabled) { - &:hover { - border: 2px solid var(--background) !important; - color: var(--background - ) !important; - background: var(--color) !important; - opacity: 0.8; + + &:active, + &:focus-visible { + &::before { + opacity: 0.8; } - - &:active, - &:focus-visible { - &::before { - opacity: 0.8; - } - - &::after { - box-shadow: 0 0 0 0.33rem var(--background); - opacity: 0.2; - } + + &::after { + box-shadow: 0 0 0 0.33rem var(--background); + opacity: 0.2; } } + } } .jenkins-button--primary[class*="color"] { From 17d4cd85d14651c7c0c25ce64ae192548fa0450e Mon Sep 17 00:00:00 2001 From: Thorsten Scherler Date: Fri, 17 Jan 2025 13:42:16 +0100 Subject: [PATCH 7/9] [yui_button_inspired_style] implement suggestion Signed-off-by: Thorsten Scherler --- src/main/scss/components/_buttons.scss | 53 ++++++++++++++------------ 1 file changed, 28 insertions(+), 25 deletions(-) diff --git a/src/main/scss/components/_buttons.scss b/src/main/scss/components/_buttons.scss index d252e015d7f1..43d4094a4b40 100644 --- a/src/main/scss/components/_buttons.scss +++ b/src/main/scss/components/_buttons.scss @@ -75,38 +75,40 @@ } .jenkins-button--outline { - color: var(--text-color) !important; - border: 2px solid var(--text-color); - font-weight: bold; - font-size: var(--font-size-xs); + color: var(--color, var(--text-color-secondary)) !important; + + --button-background--hover: color-mix( + in sRGB, + var(--color, var(--text-color-secondary)) 15%, + transparent + ); + --button-background--active: color-mix( + in sRGB, + var(--color, var(--text-color-secondary)) 20%, + transparent + ); + --button-box-shadow--focus: color-mix( + in sRGB, + var(--color, var(--text-color-secondary)) 10%, + transparent + ); &::before { - background: transparent !important; + background: transparent; + border: 2px solid var(--color, var(--text-color-secondary)); + opacity: 1 !important; } - &:not(:disabled) { - &:hover { - border: 2px solid var(--accent-color) !important; - color: var(--accent-color) !important; - } - - &:active, - &:focus-visible { - &::before { - opacity: 0.8; - } - - &::after { - box-shadow: 0 0 0 0.33rem var(--accent-color); - opacity: 0.2; - } + &:hover { + &::before { + background: var(--button-background--hover) !important; } } -} -.jenkins-button--tertiary { - &::before { - background: transparent; + &:active { + &::before { + background: var(--button-background--active) !important; + } } } @@ -117,6 +119,7 @@ color: var(--color) !important; &::before { + --button-background: currentColor; background: currentColor !important; opacity: 0.1; } From 005517aea76a1fa19a03539f63252a5da640f35f Mon Sep 17 00:00:00 2001 From: Thorsten Scherler Date: Fri, 17 Jan 2025 13:46:53 +0100 Subject: [PATCH 8/9] [yui_button_inspired_style] fix code Signed-off-by: Thorsten Scherler --- src/main/scss/components/_buttons.scss | 37 +++++--------------------- 1 file changed, 7 insertions(+), 30 deletions(-) diff --git a/src/main/scss/components/_buttons.scss b/src/main/scss/components/_buttons.scss index 43d4094a4b40..a490f4755eb8 100644 --- a/src/main/scss/components/_buttons.scss +++ b/src/main/scss/components/_buttons.scss @@ -74,6 +74,12 @@ } } +.jenkins-button--tertiary { + &::before { + background: transparent; + } +} + .jenkins-button--outline { color: var(--color, var(--text-color-secondary)) !important; @@ -120,6 +126,7 @@ &::before { --button-background: currentColor; + background: currentColor !important; opacity: 0.1; } @@ -149,36 +156,6 @@ } } -.jenkins-button--outline[class*="color"] { - color: var(--color) !important; - border: 2px solid var(--color); - - &::before { - background: var(--color) !important; - } - - &:not(:disabled) { - &:hover { - border: 2px solid var(--background) !important; - color: var(--background) !important; - background: var(--color) !important; - opacity: 0.8; - } - - &:active, - &:focus-visible { - &::before { - opacity: 0.8; - } - - &::after { - box-shadow: 0 0 0 0.33rem var(--background); - opacity: 0.2; - } - } - } -} - .jenkins-button--primary[class*="color"] { background: transparent; color: var(--background) !important; From 2bdb0bd0923bfd3a25dfc81e0925fb72caa9fcc9 Mon Sep 17 00:00:00 2001 From: Thorsten Scherler Date: Mon, 20 Jan 2025 10:22:18 +0100 Subject: [PATCH 9/9] [yui_button_inspired_style] fix code Signed-off-by: Thorsten Scherler --- src/main/scss/components/_buttons.scss | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/main/scss/components/_buttons.scss b/src/main/scss/components/_buttons.scss index a490f4755eb8..66950810429c 100644 --- a/src/main/scss/components/_buttons.scss +++ b/src/main/scss/components/_buttons.scss @@ -118,15 +118,22 @@ } } +.jenkins-button[class*="color"] .jenkins-button--outline { + &::before { + --button-background: currentColor; + + background: transparent !important; + opacity: 0.1; + } +} + // Support for custom colors // Modifier classes must include 'color' in name to work -.jenkins-button[class*="color"] { +.jenkins-button[class*="color"] :not(.jenkins-button--outline) { background: transparent; color: var(--color) !important; &::before { - --button-background: currentColor; - background: currentColor !important; opacity: 0.1; }