Skip to content

Commit

Permalink
feat(buttons): add theme variables, move vars to vars file
Browse files Browse the repository at this point in the history
  • Loading branch information
@tw15egan
tw15egan committed Apr 13, 2017
1 parent d39ebf1 commit e94c564
Show file tree
Hide file tree
Showing 3 changed files with 37 additions and 209 deletions.
182 changes: 0 additions & 182 deletions src/components/button/_mixins.scss
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,3 @@
$button-font-weight: 700 !default;
$button-font-size: .875rem !default;
$button-border-radius: 0 !default;
$button-height: 40px !default;
$button-padding: 0 1rem !default;
$button-padding-sm: 0 .5rem !default;
$button-border-width: 2px !default;

$button-font-weight: 400;
$button-font-size: 1rem;
$button-border-radius: 1rem;
$button-height: 32px;
$button-padding: 0 2rem;
$button-padding-sm: 0 1rem;
$button-border-width: 1px;


// Watson
$brand-01: #047cc0;
$brand-02: #175d8d;
$brand-03: #95c4f3;
$inverse-01: #ffffff;
$ui-01: #f6f6f6;
$ui-02: #ffffff;
$ui-03: #eaeaea;
$ui-04: #eaeaea;
$ui-05: #777677;
$text-01: #272727;
$text-02: #595859;
$text-03: #777677;
$field-01: #eaeaea;
$support-01: #e62325;
$support-02: #34bc6e;
$support-03: #fed500;
$support-04: #5c1f1b;
$nav-01: #1b2834;
$nav-02: #1c496d;

@mixin button-base {
@include reset;
@include helvetica;
Expand Down Expand Up @@ -70,7 +32,6 @@ $nav-02: #1c496d;
width: rem(16px);
height: rem(16px);
margin-left: .5rem;
transition-duration: $transition--base;
}
}

Expand Down Expand Up @@ -99,146 +60,3 @@ $nav-02: #1c496d;
fill: $icon-color;
}
}

/* ☠️️ Deprecated - after updating the following components, can be deleted in 7.x
- footer
- form
- modal
*/

@mixin btn--browser-fixes {
$class: &;

@at-root button#{$class} {
// CSS selector becomes: button.& {}, where & === is whatever class the ampersand equals
// <button> elements cannot be used as flex containers
display: inline-block;

svg {
// Vertically centering icon inside <button>
position: relative;
vertical-align: middle;
top: -1px;
}

// Targets IE10+ browsers
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
// Reset <svg> position for vertical centering
svg { top: 0; }
}
}

&::-moz-focus-inner {
// Reset intrisic padding in Firefox (see #731)
padding: 0;
border: 0;
}
}

@mixin btn--base {
@include reset;
@include btn--browser-fixes;
@include helvetica;
@include font-smoothing;
@include letter-spacing;
@include font-size('14');
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-weight: 700;
height: rem(40px);
padding: 0 1rem;
text-align: center;
text-decoration: none;
transition-duration: $transition--base;
transition-timing-function: ease-in;
white-space: nowrap;

&:disabled {
cursor: not-allowed;
opacity: .5;
}

&:focus {
@include focus-outline;
}

svg {
width: rem(16px);
height: rem(16px);
margin-left: .5rem;
}
}


@mixin btn--primary(
$bg: $brand-01,
$hover-bg: $brand-02,
$text: $inverse-01
) {
@include btn--base;
color: $text;
background-color: $bg;
border: 2px solid transparent;

&:hover,
&:focus {
background-color: $hover-bg;

&:disabled {
background-color: $bg;
}
}

&:active {
background-color: darken($bg, 20%);
}
}

@mixin btn--secondary(
$hover-bg: $brand-01,
$text: $hover-bg,
$hover-text: $inverse-01
) {
@include btn--base;
color: $text;
background-color: transparent;
border: 2px solid $hover-bg;

&:hover,
&:focus {
color: $hover-text;
background-color: $hover-bg;

&:disabled {
color: $text;
background-color: transparent;
}
}

&:active {
background-color: darken($hover-bg, 20%);
}
}

@mixin btn--danger {
@include btn--base;
color: $ui-05;
background-color: transparent;
border: 2px solid currentColor;

&:hover,
&:focus {
color: $inverse-01;
border: 2px solid transparent;
background-color: $support-01;

&:disabled {
color: $inverse-01;
background-color: transparent;
border: 2px solid currentColor;
}
}
}
27 changes: 0 additions & 27 deletions src/globals/scss/_colors.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,30 +54,3 @@ $color__purple-20: #d7aaff !default;
$color__purple-30: #ba8ff7 !default;
$color__purple-40: #af6ee8 !default;
$color__purple-60: #734098 !default;

// 7.x -- Light UI Colors
$brand-01: $color__blue-51 !default;
$brand-02: $color__blue-40 !default;
$brand-03: $color__teal-20 !default;
$inverse-01: $color__white !default;
$ui-01: $color__white !default;
$ui-02: $color__gray-3 !default;
$ui-03: $color__gray-2 !default;
$ui-04: $color__gray-1 !default;
$ui-05: $color__navy-gray-7 !default;
$text-01: $color__blue-90 !default;
$text-02: $color__navy-gray-6 !default;
$text-03: $color__navy-gray-6 !default;
$field-01: rgba($color__blue-51, .1) !default;
$support-01: $color__red-50 !default;
$support-02: $color__green-40 !default;
$support-03: $color__yellow-30 !default;
$support-04: $color__blue-30 !default;
$nav-01: $color__navy-gray-1 !default;
$nav-02: $color__blue-90 !default;
$nav-03: $color__purple-30 !default;
$nav-04: $color__purple-60 !default;
$nav-05: $color__teal-40 !default;
$nav-06: $color__teal-50 !default;
$nav-07: $color__blue-30 !default;
$nav-08: $color__blue-51 !default;
37 changes: 37 additions & 0 deletions src/globals/scss/_vars.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,40 @@ $bx--ease-in: cubic-bezier(.25, 0, 1, 1); // Used primarily for removing element
$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.
$bx--standard-easing: cubic-bezier(.5, 0, .1, 1); // Used for the majority of animations.
$transition--base: 250ms;


// Color Theme Variables
$brand-01: $color__blue-51 !default;
$brand-02: $color__blue-40 !default;
$brand-03: $color__teal-20 !default;
$inverse-01: $color__white !default;
$ui-01: $color__white !default;
$ui-02: $color__gray-3 !default;
$ui-03: $color__gray-2 !default;
$ui-04: $color__gray-1 !default;
$ui-05: $color__navy-gray-7 !default;
$text-01: $color__blue-90 !default;
$text-02: $color__navy-gray-6 !default;
$text-03: $color__navy-gray-6 !default;
$field-01: rgba($color__blue-51, .1) !default;
$support-01: $color__red-50 !default;
$support-02: $color__green-40 !default;
$support-03: $color__yellow-30 !default;
$support-04: $color__blue-30 !default;
$nav-01: $color__navy-gray-1 !default;
$nav-02: $color__blue-90 !default;
$nav-03: $color__purple-30 !default;
$nav-04: $color__purple-60 !default;
$nav-05: $color__teal-40 !default;
$nav-06: $color__teal-50 !default;
$nav-07: $color__blue-30 !default;
$nav-08: $color__blue-51 !default;

// Button Theme Variables
$button-font-weight: 700 !default;
$button-font-size: .875rem !default;
$button-border-radius: 0 !default;
$button-height: 40px !default;
$button-padding: 0 1rem !default;
$button-padding-sm: 0 .5rem !default;
$button-border-width: 2px !default;

0 comments on commit e94c564

Please sign in to comment.