Skip to content

Commit e94c564

Browse files
tw15egantw15egan
committed
feat(buttons): add theme variables, move vars to vars file
1 parent d39ebf1 commit e94c564

File tree

3 files changed

+37
-209
lines changed

3 files changed

+37
-209
lines changed

‎src/components/button/_mixins.scss

Lines changed: 0 additions & 182 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,3 @@
1-
$button-font-weight: 700 !default;
2-
$button-font-size: .875rem !default;
3-
$button-border-radius: 0 !default;
4-
$button-height: 40px !default;
5-
$button-padding: 0 1rem !default;
6-
$button-padding-sm: 0 .5rem !default;
7-
$button-border-width: 2px !default;
8-
9-
$button-font-weight: 400;
10-
$button-font-size: 1rem;
11-
$button-border-radius: 1rem;
12-
$button-height: 32px;
13-
$button-padding: 0 2rem;
14-
$button-padding-sm: 0 1rem;
15-
$button-border-width: 1px;
16-
17-
18-
// Watson
19-
$brand-01: #047cc0;
20-
$brand-02: #175d8d;
21-
$brand-03: #95c4f3;
22-
$inverse-01: #ffffff;
23-
$ui-01: #f6f6f6;
24-
$ui-02: #ffffff;
25-
$ui-03: #eaeaea;
26-
$ui-04: #eaeaea;
27-
$ui-05: #777677;
28-
$text-01: #272727;
29-
$text-02: #595859;
30-
$text-03: #777677;
31-
$field-01: #eaeaea;
32-
$support-01: #e62325;
33-
$support-02: #34bc6e;
34-
$support-03: #fed500;
35-
$support-04: #5c1f1b;
36-
$nav-01: #1b2834;
37-
$nav-02: #1c496d;
38-
391
@mixin button-base {
402
@include reset;
413
@include helvetica;
@@ -70,7 +32,6 @@ $nav-02: #1c496d;
7032
width: rem(16px);
7133
height: rem(16px);
7234
margin-left: .5rem;
73-
transition-duration: $transition--base;
7435
}
7536
}
7637

@@ -99,146 +60,3 @@ $nav-02: #1c496d;
9960
fill: $icon-color;
10061
}
10162
}
102-
103-
/* ☠️️ Deprecated - after updating the following components, can be deleted in 7.x
104-
- footer
105-
- form
106-
- modal
107-
*/
108-
109-
@mixin btn--browser-fixes {
110-
$class: &;
111-
112-
@at-root button#{$class} {
113-
// CSS selector becomes: button.& {}, where & === is whatever class the ampersand equals
114-
// <button> elements cannot be used as flex containers
115-
display: inline-block;
116-
117-
svg {
118-
// Vertically centering icon inside <button>
119-
position: relative;
120-
vertical-align: middle;
121-
top: -1px;
122-
}
123-
124-
// Targets IE10+ browsers
125-
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
126-
// Reset <svg> position for vertical centering
127-
svg { top: 0; }
128-
}
129-
}
130-
131-
&::-moz-focus-inner {
132-
// Reset intrisic padding in Firefox (see #731)
133-
padding: 0;
134-
border: 0;
135-
}
136-
}
137-
138-
@mixin btn--base {
139-
@include reset;
140-
@include btn--browser-fixes;
141-
@include helvetica;
142-
@include font-smoothing;
143-
@include letter-spacing;
144-
@include font-size('14');
145-
cursor: pointer;
146-
display: inline-flex;
147-
align-items: center;
148-
justify-content: center;
149-
flex-shrink: 0;
150-
font-weight: 700;
151-
height: rem(40px);
152-
padding: 0 1rem;
153-
text-align: center;
154-
text-decoration: none;
155-
transition-duration: $transition--base;
156-
transition-timing-function: ease-in;
157-
white-space: nowrap;
158-
159-
&:disabled {
160-
cursor: not-allowed;
161-
opacity: .5;
162-
}
163-
164-
&:focus {
165-
@include focus-outline;
166-
}
167-
168-
svg {
169-
width: rem(16px);
170-
height: rem(16px);
171-
margin-left: .5rem;
172-
}
173-
}
174-
175-
176-
@mixin btn--primary(
177-
$bg: $brand-01,
178-
$hover-bg: $brand-02,
179-
$text: $inverse-01
180-
) {
181-
@include btn--base;
182-
color: $text;
183-
background-color: $bg;
184-
border: 2px solid transparent;
185-
186-
&:hover,
187-
&:focus {
188-
background-color: $hover-bg;
189-
190-
&:disabled {
191-
background-color: $bg;
192-
}
193-
}
194-
195-
&:active {
196-
background-color: darken($bg, 20%);
197-
}
198-
}
199-
200-
@mixin btn--secondary(
201-
$hover-bg: $brand-01,
202-
$text: $hover-bg,
203-
$hover-text: $inverse-01
204-
) {
205-
@include btn--base;
206-
color: $text;
207-
background-color: transparent;
208-
border: 2px solid $hover-bg;
209-
210-
&:hover,
211-
&:focus {
212-
color: $hover-text;
213-
background-color: $hover-bg;
214-
215-
&:disabled {
216-
color: $text;
217-
background-color: transparent;
218-
}
219-
}
220-
221-
&:active {
222-
background-color: darken($hover-bg, 20%);
223-
}
224-
}
225-
226-
@mixin btn--danger {
227-
@include btn--base;
228-
color: $ui-05;
229-
background-color: transparent;
230-
border: 2px solid currentColor;
231-
232-
&:hover,
233-
&:focus {
234-
color: $inverse-01;
235-
border: 2px solid transparent;
236-
background-color: $support-01;
237-
238-
&:disabled {
239-
color: $inverse-01;
240-
background-color: transparent;
241-
border: 2px solid currentColor;
242-
}
243-
}
244-
}

‎src/globals/scss/_colors.scss

Lines changed: 0 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -54,30 +54,3 @@ $color__purple-20: #d7aaff !default;
5454
$color__purple-30: #ba8ff7 !default;
5555
$color__purple-40: #af6ee8 !default;
5656
$color__purple-60: #734098 !default;
57-
58-
// 7.x -- Light UI Colors
59-
$brand-01: $color__blue-51 !default;
60-
$brand-02: $color__blue-40 !default;
61-
$brand-03: $color__teal-20 !default;
62-
$inverse-01: $color__white !default;
63-
$ui-01: $color__white !default;
64-
$ui-02: $color__gray-3 !default;
65-
$ui-03: $color__gray-2 !default;
66-
$ui-04: $color__gray-1 !default;
67-
$ui-05: $color__navy-gray-7 !default;
68-
$text-01: $color__blue-90 !default;
69-
$text-02: $color__navy-gray-6 !default;
70-
$text-03: $color__navy-gray-6 !default;
71-
$field-01: rgba($color__blue-51, .1) !default;
72-
$support-01: $color__red-50 !default;
73-
$support-02: $color__green-40 !default;
74-
$support-03: $color__yellow-30 !default;
75-
$support-04: $color__blue-30 !default;
76-
$nav-01: $color__navy-gray-1 !default;
77-
$nav-02: $color__blue-90 !default;
78-
$nav-03: $color__purple-30 !default;
79-
$nav-04: $color__purple-60 !default;
80-
$nav-05: $color__teal-40 !default;
81-
$nav-06: $color__teal-50 !default;
82-
$nav-07: $color__blue-30 !default;
83-
$nav-08: $color__blue-51 !default;

‎src/globals/scss/_vars.scss

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,40 @@ $bx--ease-in: cubic-bezier(.25, 0, 1, 1); // Used primarily for removing element
22
$bx--ease-out: cubic-bezier(0, 0, .25, 1); // Used for adding elements to the screen or changing on-screen states at a users's input.
33
$bx--standard-easing: cubic-bezier(.5, 0, .1, 1); // Used for the majority of animations.
44
$transition--base: 250ms;
5+
6+
7+
// Color Theme Variables
8+
$brand-01: $color__blue-51 !default;
9+
$brand-02: $color__blue-40 !default;
10+
$brand-03: $color__teal-20 !default;
11+
$inverse-01: $color__white !default;
12+
$ui-01: $color__white !default;
13+
$ui-02: $color__gray-3 !default;
14+
$ui-03: $color__gray-2 !default;
15+
$ui-04: $color__gray-1 !default;
16+
$ui-05: $color__navy-gray-7 !default;
17+
$text-01: $color__blue-90 !default;
18+
$text-02: $color__navy-gray-6 !default;
19+
$text-03: $color__navy-gray-6 !default;
20+
$field-01: rgba($color__blue-51, .1) !default;
21+
$support-01: $color__red-50 !default;
22+
$support-02: $color__green-40 !default;
23+
$support-03: $color__yellow-30 !default;
24+
$support-04: $color__blue-30 !default;
25+
$nav-01: $color__navy-gray-1 !default;
26+
$nav-02: $color__blue-90 !default;
27+
$nav-03: $color__purple-30 !default;
28+
$nav-04: $color__purple-60 !default;
29+
$nav-05: $color__teal-40 !default;
30+
$nav-06: $color__teal-50 !default;
31+
$nav-07: $color__blue-30 !default;
32+
$nav-08: $color__blue-51 !default;
33+
34+
// Button Theme Variables
35+
$button-font-weight: 700 !default;
36+
$button-font-size: .875rem !default;
37+
$button-border-radius: 0 !default;
38+
$button-height: 40px !default;
39+
$button-padding: 0 1rem !default;
40+
$button-padding-sm: 0 .5rem !default;
41+
$button-border-width: 2px !default;

0 commit comments

Comments
 (0)