Skip to content

Commit 50bed6b

Browse files
KristinLBradleyKristinLBradley
committed
HDS-5666 Test modifications to Primary button focus styles to standardize
1 parent 2b24ce1 commit 50bed6b

File tree

3 files changed

+14
-32
lines changed

3 files changed

+14
-32
lines changed

‎packages/components/src/styles/mixins/_button.scss‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -75,20 +75,22 @@ $hds-button-sizes: ("small", "medium", "large");
7575
&.mock-focus {
7676
color: var(--token-button-foreground-color-primary-focus);
7777
background-color: var(--token-button-surface-color-primary-focus);
78-
border-color: var(--token-button-border-color-primary-focus-internal);
78+
// border-color: var(--token-button-border-color-primary-focus-internal);
79+
border-color: #fff; // TEST: to add greater contrast
7980

81+
// TEST: Styles that differ from other button variants are commented out to standardize how focus styling is applied
8082
&::before {
8183
// the position absolute of an element is computed from the inside of the border of the container
8284
// so we have to take in account the border width of the pseudo-element container itself
8385
// plus for the primary button we want to have a 2px gap between the button and the focus
84-
$shift: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
85-
$radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width) + 2px);
86-
top: $shift;
87-
right: $shift;
88-
bottom: $shift;
89-
left: $shift;
86+
// $shift: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
87+
// $radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width) + 2px);
88+
// top: $shift;
89+
// right: $shift;
90+
// bottom: $shift;
91+
// left: $shift;
9092
border-color: var(--token-button-border-color-primary-focus-external);
91-
border-radius: $radius;
93+
// border-radius: $radius;
9294
}
9395
}
9496

‎showcase/public/assets/styles/@hashicorp/design-system-components-common.css‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3134,15 +3134,10 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
31343134
.hds-button--color-primary:focus, .hds-button--color-primary.mock-focus {
31353135
color: var(--token-button-foreground-color-primary-focus);
31363136
background-color: var(--token-button-surface-color-primary-focus);
3137-
border-color: var(--token-button-border-color-primary-focus-internal);
3137+
border-color: #fff;
31383138
}
31393139
.hds-button--color-primary:focus::before, .hds-button--color-primary.mock-focus::before {
3140-
top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
3141-
right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
3142-
bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
3143-
left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
31443140
border-color: var(--token-button-border-color-primary-focus-external);
3145-
border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width) + 2px);
31463141
}
31473142
.hds-button--color-primary:active, .hds-button--color-primary.mock-active {
31483143
color: var(--token-button-foreground-color-primary-active);
@@ -4596,15 +4591,10 @@ button.hds-button[href]::after {
45964591
.hds-dropdown-toggle-button--color-primary:focus, .hds-dropdown-toggle-button--color-primary.mock-focus {
45974592
color: var(--token-button-foreground-color-primary-focus);
45984593
background-color: var(--token-button-surface-color-primary-focus);
4599-
border-color: var(--token-button-border-color-primary-focus-internal);
4594+
border-color: #fff;
46004595
}
46014596
.hds-dropdown-toggle-button--color-primary:focus::before, .hds-dropdown-toggle-button--color-primary.mock-focus::before {
4602-
top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
4603-
right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
4604-
bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
4605-
left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
46064597
border-color: var(--token-button-border-color-primary-focus-external);
4607-
border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width) + 2px);
46084598
}
46094599
.hds-dropdown-toggle-button--color-primary:active, .hds-dropdown-toggle-button--color-primary.mock-active {
46104600
color: var(--token-button-foreground-color-primary-active);

‎showcase/public/assets/styles/@hashicorp/design-system-components.css‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3667,15 +3667,10 @@ a.hds-button:hover, a.hds-button:focus, a.hds-button:active, a.hds-button.mock-h
36673667
.hds-button--color-primary:focus, .hds-button--color-primary.mock-focus {
36683668
color: var(--token-button-foreground-color-primary-focus);
36693669
background-color: var(--token-button-surface-color-primary-focus);
3670-
border-color: var(--token-button-border-color-primary-focus-internal);
3670+
border-color: #fff;
36713671
}
36723672
.hds-button--color-primary:focus::before, .hds-button--color-primary.mock-focus::before {
3673-
top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
3674-
right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
3675-
bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
3676-
left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
36773673
border-color: var(--token-button-border-color-primary-focus-external);
3678-
border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width) + 2px);
36793674
}
36803675
.hds-button--color-primary:active, .hds-button--color-primary.mock-active {
36813676
color: var(--token-button-foreground-color-primary-active);
@@ -5129,15 +5124,10 @@ button.hds-button[href]::after {
51295124
.hds-dropdown-toggle-button--color-primary:focus, .hds-dropdown-toggle-button--color-primary.mock-focus {
51305125
color: var(--token-button-foreground-color-primary-focus);
51315126
background-color: var(--token-button-surface-color-primary-focus);
5132-
border-color: var(--token-button-border-color-primary-focus-internal);
5127+
border-color: #fff;
51335128
}
51345129
.hds-dropdown-toggle-button--color-primary:focus::before, .hds-dropdown-toggle-button--color-primary.mock-focus::before {
5135-
top: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
5136-
right: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
5137-
bottom: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
5138-
left: calc(-1 * (var(--token-button-border-width) + var(--token-button-focus-border-width) + 2px));
51395130
border-color: var(--token-button-border-color-primary-focus-external);
5140-
border-radius: calc(var(--token-button-border-radius) + var(--token-button-focus-border-width) + 2px);
51415131
}
51425132
.hds-dropdown-toggle-button--color-primary:active, .hds-dropdown-toggle-button--color-primary.mock-active {
51435133
color: var(--token-button-foreground-color-primary-active);

0 commit comments

Comments
 (0)