Skip to content

Commit 84c7484

Browse files
100stacks100stacks
authored
Merge pull request #868 from HelixDesignSystem/surf-2199-button-design-tokens
refactor(button): implement design tokens spec
2 parents 62c29e5 + dfa3ef3 commit 84c7484

File tree

1 file changed

+60
-53
lines changed

1 file changed

+60
-53
lines changed

‎src/scss/components/button/mixins/_hxButton.scss‎

Lines changed: 60 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
> * + * {
66
// ensure white space between children
7-
margin-left: 0.5rem;
7+
margin-left: $rax-spacing-200;
88
}
99

1010
&:focus {
@@ -29,16 +29,16 @@
2929

3030
@mixin hxButton--reset {
3131
background-color: transparent;
32-
border: 0;
32+
border: $rax-spacing-0;
3333
color: inherit;
3434
cursor: pointer;
3535
display: inline-block;
3636
font: inherit;
37-
font-size: 0.875rem;
38-
font-weight: 700; // bold
39-
line-height: 1;
40-
margin: 0;
41-
padding: 0;
37+
font-size: $rax-component-button-base-font-size;
38+
font-weight: $rax-font-weight-bold; // bold (700)
39+
line-height: $rax-line-height-none;
40+
margin: $rax-spacing-0;
41+
padding: $rax-spacing-0;
4242
}
4343

4444
/// ============================= ///
@@ -65,24 +65,24 @@
6565
@if $size == small {
6666
padding: 0.125rem 0.5rem;
6767
} @else if $size == medium {
68-
font-size: 0.875rem;
69-
padding: 0.5rem 0.75rem;
68+
font-size: $rax-component-button-base-font-size;
69+
padding: $rax-component-button-base-vertical-padding $rax-component-button-base-horizontal-padding;
7070
} @else if $size == large {
7171
font-size: 1rem;
72-
padding: 1rem;
72+
padding: $rax-spacing-400;
7373
} @else {
7474
// no additional styles
7575
}
7676
}
7777

78-
/// ------------------------------------ ///
79-
/// ---------- PRIMARY BUTTON ---------- ///
80-
/// ------------------------------------ ///
78+
/// --------------------------------------------- ///
79+
/// ---------- PRIMARY (FILLED) BUTTON ---------- ///
80+
/// --------------------------------------------- ///
8181

8282
@mixin hxButton--primary {
83-
background-color: $blue-500;
83+
background-color: $rax-component-button-filled-default-background-color;
8484
border: none;
85-
color: $gray-0;
85+
color: $rax-component-button-filled-default-color;
8686

8787
&:hover {
8888
@include hxButton-hover--primary;
@@ -102,34 +102,35 @@
102102
}
103103

104104
@mixin hxButton-active--primary {
105-
background-color: $blue-900;
106-
color: $gray-0;
105+
background-color: $rax-component-button-filled-active-background-color;
106+
color: $rax-component-button-filled-active-color;
107107
}
108108

109109
@mixin hxButton-disabled--primary {
110-
background-color: $gray-500;
111-
color: $gray-0;
110+
background-color: $rax-component-button-filled-disabled-background-color;
111+
color: $rax-component-button-filled-disabled-color;
112112
}
113113

114114
@mixin hxButton-focus--primary {
115-
box-shadow: 0 0 4px rgba($blue-700, 0.5);
115+
background-color: $rax-component-button-filled-focus-background-color;
116+
color: $rax-component-button-filled-focus-color;
116117
outline: none;
117118
}
118119

119120
@mixin hxButton-hover--primary {
120-
background-color: $blue-700;
121+
background-color: $rax-component-button-filled-hover-background-color;
121122
border: none;
122-
color: $gray-0;
123+
color: $rax-component-button-filled-hover-color;
123124
}
124125

125-
/// -------------------------------------- ///
126-
/// ---------- SECONDARY BUTTON ---------- ///
127-
/// -------------------------------------- ///
126+
/// ------------------------------------------------ ///
127+
/// ---------- SECONDARY (OUTLINE) BUTTON ---------- ///
128+
/// ------------------------------------------------ ///
128129

129130
@mixin hxButton--secondary {
130-
background-color: transparent;
131-
border: 1px solid $blue-500;
132-
color: $blue-500;
131+
background-color: $rax-component-button-outline-default-background-color;
132+
border: 1px solid $rax-component-button-outline-default-border-color;
133+
color: $rax-component-button-outline-default-color;
133134

134135
&:hover {
135136
@include hxButton-hover--secondary;
@@ -149,35 +150,39 @@
149150
}
150151

151152
@mixin hxButton-active--secondary {
152-
background-color: transparent;
153-
border: 1px solid $blue-900;
154-
color: $blue-900;
153+
background-color: $rax-component-button-outline-default-background-color;
154+
border-color: $rax-component-button-outline-active-border-color;
155+
border-style: $rax-component-button-base-border-style;
156+
border-width: $rax-component-button-base-border-width;
157+
color: $rax-component-button-outline-active-color;
155158
}
156159

157160
@mixin hxButton-disabled--secondary {
158-
background-color: transparent;
159-
border: 1px solid $gray-500;
160-
color: $gray-500;
161+
background-color: $rax-component-button-outline-disabled-background-color;
162+
border: 1px solid $rax-component-button-outline-disabled-border-color;
163+
color: $rax-component-button-outline-disabled-color;
161164
}
162165

163166
@mixin hxButton-focus--secondary {
164-
box-shadow: 0 0 4px rgba($blue-700, 0.5);
167+
background-color: $rax-component-button-outline-focus-background-color;
168+
border: 1px solid $rax-component-button-outline-focus-border-color;
169+
color: $rax-component-button-outline-focus-color;
165170
}
166171

167172
@mixin hxButton-hover--secondary {
168-
background-color: transparent;
169-
border: 1px solid $blue-700;
170-
color: $blue-700;
173+
background-color: $rax-component-button-outline-hover-background-color;
174+
border: 1px solid $rax-component-button-outline-focus-border-color;
175+
color: $rax-component-button-outline-focus-color;
171176
}
172177

173-
/// ------------------------------------- ///
174-
/// ---------- TERTIARY BUTTON ---------- ///
175-
/// ------------------------------------- ///
178+
/// --------------------------------------------- ///
179+
/// ---------- TERTIARY (PLAIN) BUTTON ---------- ///
180+
/// --------------------------------------------- ///
176181

177182
@mixin hxButton--tertiary {
178-
background-color: transparent;
183+
background-color: $rax-component-button-plain-default-background-color;
179184
border: none;
180-
color: $blue-500;
185+
color: $rax-component-button-plain-default-color;
181186
padding: 0;
182187

183188
// TODO: deprecated Button and Button Bar styles
@@ -204,24 +209,26 @@
204209
}
205210

206211
@mixin hxButton-active--tertiary {
207-
background-color: transparent;
208-
border-color: transparent;
209-
color: $blue-900;
212+
background-color: $rax-component-button-plain-active-background-color;
213+
border-color: $rax-component-button-plain-active-border-color;
214+
color: $rax-component-button-plain-active-color;
210215
}
211216

212217
@mixin hxButton-disabled--tertiary {
213-
background-color: transparent;
214-
border-color: transparent;
215-
color: $gray-500;
218+
background-color: $rax-component-button-plain-disabled-background-color;
219+
border-color: $rax-component-button-plain-disabled-border-color;
220+
color: $rax-component-button-plain-disabled-color;
216221
}
217222

218223
@mixin hxButton-focus--tertiary {
219-
box-shadow: 0 0 4px rgba($blue-700, 0.5);
224+
background-color: $rax-component-button-plain-focus-background-color;
225+
border-color: $rax-component-button-plain-focus-border-color;
226+
color: $rax-component-button-plain-focus-color;
220227
outline: none;
221228
}
222229

223230
@mixin hxButton-hover--tertiary {
224-
background-color: transparent;
225-
border-color: transparent;
226-
color: $blue-700;
231+
background-color: $rax-component-button-plain-hover-background-color;
232+
border-color: $rax-component-button-plain-hover-border-color;
233+
color: $rax-component-button-plain-focus-color;
227234
}

0 commit comments

Comments
 (0)