Skip to content

Commit

Permalink
fix(ARCH-720): fix various border issues with bootstrap buttons
Browse files Browse the repository at this point in the history 
tmp
  • Loading branch information
Geoffroy Baccarini committed Jul 31, 2023
1 parent b36165a commit 2fa4675
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 31 deletions.
5 changes: 5 additions & 0 deletions .changeset/smooth-taxis-compete.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@talend/bootstrap-theme': patch
---

Bootstrap Theme : Fix various button border issues using Design System tokens
80 changes: 49 additions & 31 deletions packages/theme/src/theme/_buttons.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,20 +24,15 @@
&,
&:focus,
&:hover {
color: currentColor;
background-color: transparent;
border-color: transparent;
}

&:active,
.open > &.dropdown-toggle {
box-shadow: none;

&,
&:hover {
color: var(--t-button-color);
background-color: var(--t-button-background-color);
border-color: var(--t-button-border-color);
& {
border-color: transparent;
}

Check warning on line 36 in packages/theme/src/theme/_buttons.scss

View workflow job for this annotation

GitHub Actions / ESLint Report Analysis

packages/theme/src/theme/_buttons.scss#L34-L36 

[scss/selector-no-redundant-nesting-selector] Unnecessary nesting selector (&) (scss/selector-no-redundant-nesting-selector)
}

Expand All @@ -56,9 +51,6 @@
&:hover,
&:focus,
&.focus {
color: var(--t-button-color);
background-color: var(--t-button-background-color);
border-color: var(--t-button-border-color);
opacity: 0.54;
cursor: not-allowed;
}
Expand Down Expand Up @@ -99,16 +91,28 @@
background: tokens.$coral-color-accent-background-strong-active;
color: tokens.$coral-color-accent-text-weak-active;
}

&.disabled,
&[disabled],
&[aria-disabled='true'],
&[aria-busy='true'] {
background: tokens.$coral-color-accent-background-strong;
color: tokens.$coral-color-accent-text-weak;

&:hover {
background-color: tokens.$coral-color-accent-background-strong;
}
}
}

&-inverse {
background-color: transparent;
border: tokens.$coral-border-s-solid tokens.$coral-color-accent-border;
border-color: tokens.$coral-color-accent-border;
color: tokens.$coral-color-accent-text;

&:hover {
background: tokens.$coral-color-accent-background-weak-hover;
border: tokens.$coral-border-s-solid tokens.$coral-color-accent-border;
border-color: tokens.$coral-color-accent-border-hover;
color: tokens.$coral-color-accent-text-strong-hover;
}

Expand All @@ -117,12 +121,13 @@
color: tokens.$coral-color-accent-text-strong-active;
}

&:disabled,
&.disabled,
&[disabled],
&[aria-disabled='true'],
&[aria-busy='true'] {
background: transparent;
border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-disabled;
color: tokens.$coral-color-neutral-text-disabled;
border-color: tokens.$coral-color-accent-border;
color: tokens.$coral-color-accent-text;

&:hover {
background-color: transparent;
Expand All @@ -132,12 +137,12 @@

&--secondary {
background-color: transparent;
border-color: tokens.$coral-color-accent-text;
border-color: tokens.$coral-color-accent-border;
color: tokens.$coral-color-accent-text;

&:hover {
background: tokens.$coral-color-accent-background-weak-hover;
border-color: tokens.$coral-color-accent-text;
border-color: tokens.$coral-color-accent-border-hover;
color: tokens.$coral-color-accent-text-strong-hover;
}

Expand All @@ -146,12 +151,13 @@
color: tokens.$coral-color-accent-text-strong-active;
}

&:disabled,
&.disabled,
&[disabled],
&[aria-disabled='true'],
&[aria-busy='true'] {
background: transparent;
border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-disabled;
color: tokens.$coral-color-neutral-text-disabled;
border-color: tokens.$coral-color-accent-border;
color: tokens.$coral-color-accent-text;

&:hover {
background-color: transparent;
Expand All @@ -174,12 +180,12 @@
color: tokens.$coral-color-accent-text-strong-active;
}

&:disabled,
&.disabled,
&[disabled],
&[aria-disabled='true'],
&[aria-busy='true'] {
background: transparent;
border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-disabled;
color: tokens.$coral-color-neutral-text-disabled;
color: tokens.$coral-color-accent-text;

&:hover {
background-color: transparent;
Expand All @@ -198,22 +204,27 @@
color: tokens.$coral-color-accent-text-strong-active;
}

&:disabled,
&.disabled,
&[disabled],
&[aria-disabled='true'],
&[aria-busy='true'] {
border: tokens.$coral-border-s-solid tokens.$coral-color-neutral-border-disabled;
color: tokens.$coral-color-neutral-text-disabled;
color: tokens.$coral-color-accent-text;

&:hover {
color: tokens.$coral-color-accent-text;
}
}
}

&.btn-danger,
&.btn--destructive {
background: tokens.$coral-color-danger-background-strong;
border: tokens.$coral-color-danger-background-strong;
border-color: tokens.$coral-color-danger-border;
color: tokens.$coral-color-danger-text-weak;

&:hover {
background: tokens.$coral-color-danger-background-strong-hover;
border-color: tokens.$coral-color-danger-border-hover;
color: tokens.$coral-color-danger-text-weak-hover;
}

Expand All @@ -222,10 +233,17 @@
color: tokens.$coral-color-danger-text-weak-active;
}

&[disabled] &:hover,
.disabled &:hover {
background: tokens.$coral-color-neutral-background-disabled;
color: tokens.$coral-color-neutral-text-disabled;
&[disabled],
.disabled,
&[aria-disabled='true'],
&[aria-busy='true'] {
background: tokens.$coral-color-danger-background-strong;
border-color: tokens.$coral-color-danger-border;
color: tokens.$coral-color-danger-text-weak;

&:hover {
background-color: tokens.$coral-color-danger-background-strong;
}
}
}

Expand Down

0 comments on commit 2fa4675

Please sign in to comment.