Increase controls size, Update base colors

jgthms · Oct 18, 2019 · 639e09e · 639e09e
1 parent 4a84aa1
commit 639e09e
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 17 deletions.
diff --git a/sass/elements/button.sass b/sass/elements/button.sass
@@ -5,8 +5,8 @@ $button-family: false !default
 $button-border-color: $grey-lighter !default
 $button-border-width: $control-border-width !default
 
-$button-padding-vertical: calc(0.375em - #{$button-border-width}) !default
-$button-padding-horizontal: 0.75em !default
+$button-padding-vertical: calc(0.5em - #{$button-border-width}) !default
+$button-padding-horizontal: 1em !default
 
 $button-hover-color: $link-hover !default
 $button-hover-border-color: $link-hover-border !default
@@ -240,8 +240,8 @@ $button-static-border-color: $grey-lighter !default
     pointer-events: none
   &.is-rounded
     border-radius: $radius-rounded
-    padding-left: 1em
-    padding-right: 1em
+    padding-left: calc(#{$button-padding-horizontal} + 0.25em)
+    padding-right: calc(#{$button-padding-horizontal} + 0.25em)
 
 .buttons
   align-items: center

diff --git a/sass/form/input-textarea.sass b/sass/form/input-textarea.sass
@@ -1,3 +1,7 @@
+$textarea-padding: $control-padding-horizontal !default
+$textarea-max-height: 40em !default
+$textarea-min-height: 8em !default
+
 %input-textarea
   @extend %input
   box-shadow: $input-shadow
@@ -34,8 +38,8 @@
   @extend %input-textarea
   &.is-rounded
     border-radius: $radius-rounded
-    padding-left: 1em
-    padding-right: 1em
+    padding-left: calc(#{$control-padding-horizontal} + 0.375em)
+    padding-right: calc(#{$control-padding-horizontal} + 0.375em)
   &.is-static
     background-color: transparent
     border-color: transparent
@@ -48,11 +52,11 @@
   display: block
   max-width: 100%
   min-width: 100%
-  padding: 0.625em
+  padding: $textarea-padding
   resize: vertical
   &:not([rows])
-    max-height: 600px
-    min-height: 120px
+    max-height: $textarea-max-height
+    min-height: $textarea-min-height
   &[rows]
     height: initial
   // Modifiers

diff --git a/sass/form/shared.sass b/sass/form/shared.sass
@@ -2,7 +2,7 @@ $input-color: $grey-darker !default
 $input-background-color: $white !default
 $input-border-color: $grey-lighter !default
 $input-height: $control-height !default
-$input-shadow: inset 0 1px 2px rgba($black, 0.05) !default
+$input-shadow: inset 0 0.0625em 0.125em rgba($black, 0.05) !default
 $input-placeholder-color: rgba($input-color, 0.3) !default
 
 $input-hover-color: $grey-darker !default

diff --git a/sass/utilities/controls.sass b/sass/utilities/controls.sass
@@ -3,11 +3,11 @@ $control-radius-small: $radius-small !default
 
 $control-border-width: 1px !default
 
-$control-height: 2.25em !default
+$control-height: 2.5em !default
 $control-line-height: 1.5 !default
 
-$control-padding-vertical: calc(0.375em - #{$control-border-width}) !default
-$control-padding-horizontal: calc(0.625em - #{$control-border-width}) !default
+$control-padding-vertical: calc(0.5em - #{$control-border-width}) !default
+$control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default
 
 =control
   -moz-appearance: none

diff --git a/sass/utilities/initial-variables.sass b/sass/utilities/initial-variables.sass
@@ -16,13 +16,13 @@ $white-bis:    hsl(0, 0%, 98%) !default
 $white:        hsl(0, 0%, 100%) !default
 
 $orange:       hsl(14,  100%, 53%) !default
-$yellow:       hsl(48,  100%, 67%) !default
-$green:        hsl(141, 71%,  48%) !default
+$yellow:       hsl(48,  100%, 53%) !default
+$green:        hsl(141, 53%,  53%) !default
 $turquoise:    hsl(171, 100%, 41%) !default
-$cyan:         hsl(204, 86%,  53%) !default
+$cyan:         hsl(204, 71%,  53%) !default
 $blue:         hsl(217, 71%,  53%) !default
 $purple:       hsl(271, 100%, 71%) !default
-$red:          hsl(348, 100%, 61%) !default
+$red:          hsl(348, 86%, 61%) !default
 
 // Typography