Skip to content

Commit

Permalink
fix(forms): Fix contrast issues on forms
Browse files Browse the repository at this point in the history
* .help-block has a darker color
* toggle labels are darker

BREAKING CHANGES (scss) .help-block has a darker color now. For the old
color, use $gray-dark.
  • Loading branch information
Caroline Taymor authored and pivotal committed Sep 2, 2015
1 parent 7d99cec commit f2761e3
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 0 deletions.
5 changes: 5 additions & 0 deletions src/pivotal-ui/components/forms/forms.scss
Original file line number Diff line number Diff line change
Expand Up @@ -1117,6 +1117,10 @@ Here's an example in a vertical form:
text-transform: capitalize;
}

.help-block {
color: $form-label-color;
}

// Form control sizing

@include input-size('.input-sm', $input-height-small, $padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small);
Expand Down Expand Up @@ -1273,6 +1277,7 @@ A toggle switch is a horizontally styled checkbox which represents true with blu
position: relative;
display: block;
background-color: $neutral-7;
color: $neutral-1;
transition: background 0.4s;
cursor: pointer;
outline: none;
Expand Down
2 changes: 2 additions & 0 deletions src/pivotal-ui/components/pui-variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -514,6 +514,8 @@ $input-border-width: 1px !default;

$input-color-placeholder: $neutral-5 !default;

$form-label-color: $neutral-3 !default;

$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
$input-height-large: (floor($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
$input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
Expand Down

0 comments on commit f2761e3

Please sign in to comment.