Skip to content

Commit

Permalink
Merge pull request #2901 from uswds/dw-expose-vars
Browse files Browse the repository at this point in the history 
Expose internal component vars to settings
  • Loading branch information
@thisisdano
thisisdano committed Feb 1, 2019
2 parents e35ca98 + 15bff38 commit da06b50
Show file tree
Hide file tree
Showing 6 changed files with 48 additions and 37 deletions.
2 changes: 1 addition & 1 deletion src/stylesheets/components/_accordions.scss
View file
@@ -1,6 +1,6 @@
// Variables

$accordion-border: units(0.5) solid color('base-lightest');
$accordion-border: units($theme-accordion-border-width) solid color($theme-accordion-border-color);

// Accordion Styles

Expand Down
28 changes: 12 additions & 16 deletions src/stylesheets/components/_alerts.scss
View file
Expand Up @@ -20,24 +20,20 @@ $usa-alerts-bar: (

$alerts: map-merge($usa-alerts, $usa-custom-alerts);
$alerts-bar: map-merge($usa-alerts-bar, $usa-custom-alerts-bar);

$h-padding: units(2.5);
$bar-size: units(1);
$left-padding: $h-padding + $bar-size;
$icon-size: units(4);
$padding-left: units($theme-alert-padding-x) + units($theme-alert-bar-width);

.usa-alert {
@include typeset($theme-alert-font-family);
@include border-box-sizing;

background-color: color('base-lightest');
background-position: $h-padding $h-padding;
background-position: units($theme-alert-padding-x) units($theme-alert-padding-x);
background-repeat: no-repeat;
background-size: units(7);
padding-bottom: units(2);
padding-left: $left-padding;
padding-right: $h-padding;
padding-top: $h-padding;
padding-left: $padding-left;
padding-right: units($theme-alert-padding-x);
padding-top: units($theme-alert-padding-x);
position: relative;

* + & {
Expand All @@ -52,7 +48,7 @@ $icon-size: units(4);
left: 0;
position: absolute;
top: 0;
width: $bar-size;
width: units($theme-alert-bar-width);
}

a {
Expand All @@ -76,9 +72,9 @@ $icon-size: units(4);
}

.usa-alert-slim {
background-position: $h-padding center;
padding-bottom: $bar-size;
padding-top: $bar-size;
background-position: units($theme-alert-padding-x) center;
padding-bottom: units($theme-alert-bar-width);
padding-top: units($theme-alert-bar-width);

.usa-alert-text:only-child {
margin-bottom: units(0.5);
Expand All @@ -88,7 +84,7 @@ $icon-size: units(4);

.usa-alert-icon {
display: table-cell;
padding-right: $bar-size;
padding-right: units($theme-alert-bar-width);
}

.usa-alert-body {
Expand All @@ -107,7 +103,7 @@ $icon-size: units(4);
}

.usa-alert-text:only-child {
margin-bottom: $bar-size;
margin-bottom: units($theme-alert-bar-width);
padding-top: units(0.5);
}

Expand All @@ -121,7 +117,7 @@ $icon-size: units(4);
}

.usa-alert-body {
padding-left: $icon-size + $h-padding;
padding-left: units($theme-alert-icon-size) + units($theme-alert-padding-x);
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/stylesheets/elements/_buttons.scss
View file
@@ -1,6 +1,6 @@
// Buttons variables

$button-stroke: inset 0 0 0 units(2px);
$button-stroke: inset 0 0 0 units($theme-button-stroke-width);

// Buttons

Expand Down
35 changes: 16 additions & 19 deletions src/stylesheets/elements/_inputs.scss
View file
@@ -1,9 +1,6 @@
// Helpers

$box-input-size: 2.5;
$box-input-border-width: 2px;
$box-input-margin-right: 1.5;
$input-state-border-width: 0.5;
$input-select-margin-right: 1.5;

@mixin range-focus {
background-color: color('white');
Expand All @@ -20,10 +17,10 @@ $input-state-border-width: 0.5;
}

@mixin range-thumb {
@include u-circle($box-input-size);
@include u-circle($theme-input-select-size);
background: color('base-lightest');
border: none;
box-shadow: 0 0 0 units($box-input-border-width) color('base');
box-shadow: 0 0 0 units($theme-input-select-border-width) color('base');
cursor: pointer;
}

Expand Down Expand Up @@ -64,7 +61,7 @@ $input-state-border-width: 0.5;
width: 100%;

&.usa-input-success {
@include u-border($input-state-border-width, 'success');
@include u-border($theme-input-state-border-width, 'success');
}
}

Expand All @@ -86,7 +83,7 @@ $input-state-border-width: 0.5;
}

.usa-input-error {
@include u-border($input-state-border-width, 'error-dark');
@include u-border($theme-input-state-border-width, 'error-dark');
}

.usa-input-error-label {
Expand Down Expand Up @@ -190,45 +187,45 @@ $input-state-border-width: 0.5;
display: inherit;
font-weight: font-weight('normal');
margin-bottom: units(1.5);
padding-left: units($box-input-margin-right + $box-input-size);
padding-left: units($input-select-margin-right + $theme-input-select-size);
position: relative;
text-indent: units(-$box-input-margin-right - $box-input-size);
text-indent: units(-$input-select-margin-right - $theme-input-select-size);
}

.usa-checkbox-label::before,
.usa-radio-label::before {
background: color('white');
content: '\a0';
display: inline-block;
left: units($box-input-border-width);
left: units($theme-input-select-border-width);
position: relative;
vertical-align: middle\0; // Target IE 11 and below to vertically center inputs
}

.usa-checkbox-label::before {
@include u-square($box-input-size);
@include u-square($theme-input-select-size);
border-radius: radius($theme-checkbox-border-radius);
}

.usa-radio-label::before {
@include u-circle($box-input-size);
@include u-circle($theme-input-select-size);
}

.usa-checkbox-label::before,
.usa-radio-label::before {
box-shadow: 0 0 0 units($box-input-border-width) color('base');
line-height: units($box-input-size);
margin-right: units($box-input-margin-right);
box-shadow: 0 0 0 units($theme-input-select-border-width) color('base');
line-height: units($theme-input-select-size);
margin-right: units($input-select-margin-right);
}

.usa-checkbox-input:checked + .usa-checkbox-label::before,
.usa-radio-input:checked + .usa-radio-label::before {
background-color: color('primary');
box-shadow: 0 0 0 units($box-input-border-width) color('primary');
box-shadow: 0 0 0 units($theme-input-select-border-width) color('primary');
}

.usa-radio-input:checked + .usa-radio-label::before {
box-shadow: 0 0 0 units($box-input-border-width) color('primary'), inset 0 0 0 units($box-input-border-width) color('white');
box-shadow: 0 0 0 units($theme-input-select-border-width) color('primary'), inset 0 0 0 units($theme-input-select-border-width) color('white');
}

.usa-checkbox-input:checked + .usa-checkbox-label::before,
Expand Down Expand Up @@ -260,7 +257,7 @@ $input-state-border-width: 0.5;
.usa-checkbox-input:disabled + .usa-checkbox-label::before,
.usa-radio-input:disabled + .usa-radio-label::before {
background: color('disabled-light');
box-shadow: 0 0 0 units($box-input-border-width) color('disabled');
box-shadow: 0 0 0 units($theme-input-select-border-width) color('disabled');
cursor: not-allowed;
}

Expand Down
9 changes: 9 additions & 0 deletions src/stylesheets/settings/_settings-components.scss
View file
Expand Up @@ -18,11 +18,16 @@ https://v2.designsystem.digital.gov/style-tokens
*/

// Accordion
$theme-accordion-border-width: 0.5 !default;
$theme-accordion-border-color: 'base-lightest' !default;
$theme-accordion-font-family: 'body' !default;

// Alert
$theme-alert-bar-width: 1 !default;
$theme-alert-font-family: 'ui' !default;
$theme-alert-icon-size: 4 !default;
$theme-alert-measure: 3 !default;
$theme-alert-padding-x: 2.5 !default;

// Banner
$theme-banner-font-family: 'ui' !default;
Expand All @@ -31,6 +36,7 @@ $theme-banner-font-family: 'ui' !default;
$theme-button-font-family: 'ui' !default;
$theme-button-border-radius: 'md' !default;
$theme-button-small-width: 6 !default;
$theme-button-stroke-width: 2px !default;

// Footer
$theme-footer-font-family: 'body' !default;
Expand All @@ -40,6 +46,9 @@ $theme-checkbox-border-radius: 'sm' !default;
$theme-form-font-family: 'ui' !default;
$theme-input-line-height: 3 !default;
$theme-input-max-width: 'mobile-lg' !default;
$theme-input-select-border-width: 2px !default;
$theme-input-select-size: 2.5 !default;
$theme-input-state-border-width: 0.5 !default;

// Header
$theme-header-font-family: 'ui' !default;
Expand Down
9 changes: 9 additions & 0 deletions src/stylesheets/theme/_uswds-theme-components.scss
View file
Expand Up @@ -18,11 +18,16 @@ https://v2.designsystem.digital.gov/style-tokens
*/

// Accordion
$theme-accordion-border-width: 0.5;
$theme-accordion-border-color: 'base-lightest';
$theme-accordion-font-family: 'body';

// Alert
$theme-alert-bar-width: 1;
$theme-alert-font-family: 'ui';
$theme-alert-icon-size: 4;
$theme-alert-measure: 3;
$theme-alert-padding-x: 2.5;

// Banner
$theme-banner-font-family: 'ui';
Expand All @@ -31,6 +36,7 @@ $theme-banner-font-family: 'ui';
$theme-button-font-family: 'ui';
$theme-button-border-radius: 'md';
$theme-button-small-width: 6;
$theme-button-stroke-width: 2px;

// Footer
$theme-footer-font-family: 'body';
Expand All @@ -40,6 +46,9 @@ $theme-checkbox-border-radius: 'sm';
$theme-form-font-family: 'ui';
$theme-input-line-height: 3;
$theme-input-max-width: 'mobile-lg';
$theme-input-select-border-width: 2px;
$theme-input-select-size: 2.5;
$theme-input-state-border-width: 0.5;

// Header
$theme-header-font-family: 'ui';
Expand Down

0 comments on commit da06b50

Please sign in to comment.