Skip to content

Commit

Permalink
chore: Declare all sass variables as !default (#3708) (#4195)
Browse files Browse the repository at this point in the history
  • Loading branch information
@levibotelho @abhiomkar
levibotelho authored and abhiomkar committed Jan 4, 2019
1 parent 9d6375b commit cb344c3
Show file tree
Hide file tree
Showing 29 changed files with 248 additions and 244 deletions.
4 changes: 4 additions & 0 deletions docs/theming.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -249,6 +249,10 @@ provide, as part of the Sass definitions in `mdc-theme`. Pretty simple!
the [color section](https://material.io/go/design-theming) in the Material Design spec to inform your pick of an
alternative palette.

If you want to go a step further with your theming then you can override any SASS variable throughout the codebase by
redefining it in your application's SASS file. Exercise caution when doing this, however, as modifying internal variables
may have unintended consequences.


### Step 4: Changing the theme with CSS Custom Properties

Expand Down
10 changes: 5 additions & 5 deletions packages/mdc-button/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,9 @@
// THE SOFTWARE.
//

$mdc-button-height: 36px;
$mdc-button-horizontal-padding: 8px;
$mdc-button-contained-horizontal-padding: 16px;
$mdc-dense-button-height: 32px;
$mdc-button-height: 36px !default;
$mdc-button-horizontal-padding: 8px !default;
$mdc-button-contained-horizontal-padding: 16px !default;
$mdc-dense-button-height: 32px !default;

$mdc-button-disabled-ink-color: rgba(mdc-theme-prop-value(on-surface), .37);
$mdc-button-disabled-ink-color: rgba(mdc-theme-prop-value(on-surface), .37) !default;
4 changes: 2 additions & 2 deletions packages/mdc-card/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,5 +22,5 @@

@import "@material/theme/mixins";

$mdc-card-outline-color: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 12%);
$mdc-card-outline-width: 1px;
$mdc-card-outline-color: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 12%) !default;
$mdc-card-outline-width: 1px !default;
52 changes: 26 additions & 26 deletions packages/mdc-chips/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,38 +23,38 @@
@import "@material/animation/variables";
@import "@material/theme/variables";

$mdc-chip-fill-color-default: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 12%);
$mdc-chip-ink-color-default: rgba(mdc-theme-prop-value(on-surface), .87);
$mdc-chip-horizontal-padding: 12px;
$mdc-chip-vertical-padding: 7px;
$mdc-chip-height-default: 32px;
$mdc-chip-fill-color-default: mix(mdc-theme-prop-value(on-surface), mdc-theme-prop-value(surface), 12%) !default;
$mdc-chip-ink-color-default: rgba(mdc-theme-prop-value(on-surface), .87) !default;
$mdc-chip-horizontal-padding: 12px !default;
$mdc-chip-vertical-padding: 7px !default;
$mdc-chip-height-default: 32px !default;

$mdc-chip-icon-color: mdc-theme-prop-value(on-surface);
$mdc-chip-icon-opacity: .54;
$mdc-chip-trailing-icon-hover-opacity: .62;
$mdc-chip-trailing-icon-focus-opacity: .87;
$mdc-chip-leading-icon-size: 20px;
$mdc-chip-trailing-icon-size: 18px;
$mdc-chip-leading-icon-delay: -50ms; // Speed up delay to bridge gap between leading icon and checkmark transition.
$mdc-chip-checkmark-with-leading-icon-delay: 80ms;
$mdc-chip-icon-color: mdc-theme-prop-value(on-surface) !default;
$mdc-chip-icon-opacity: .54 !default;
$mdc-chip-trailing-icon-hover-opacity: .62 !default;
$mdc-chip-trailing-icon-focus-opacity: .87 !default;
$mdc-chip-leading-icon-size: 20px !default;
$mdc-chip-trailing-icon-size: 18px !default;
$mdc-chip-leading-icon-delay: -50ms !default; // Speed up delay to bridge gap between leading icon and checkmark transition.
$mdc-chip-checkmark-with-leading-icon-delay: 80ms !default;

$mdc-chip-checkmark-animation-delay: 50ms;
$mdc-chip-checkmark-animation-duration: 150ms;
$mdc-chip-width-animation-duration: 150ms;
$mdc-chip-opacity-animation-duration: 75ms;
$mdc-chip-checkmark-animation-delay: 50ms !default;
$mdc-chip-checkmark-animation-duration: 150ms !default;
$mdc-chip-width-animation-duration: 150ms !default;
$mdc-chip-opacity-animation-duration: 75ms !default;

$mdc-chip-leading-icon-margin-top: -4px;
$mdc-chip-leading-icon-margin-right: 4px;
$mdc-chip-leading-icon-margin-bottom: -4px;
$mdc-chip-leading-icon-margin-left: -4px;
$mdc-chip-leading-icon-margin-top: -4px !default;
$mdc-chip-leading-icon-margin-right: 4px !default;
$mdc-chip-leading-icon-margin-bottom: -4px !default;
$mdc-chip-leading-icon-margin-left: -4px !default;

$mdc-chip-trailing-icon-margin-top: 0;
$mdc-chip-trailing-icon-margin-right: -4px;
$mdc-chip-trailing-icon-margin-bottom: 0;
$mdc-chip-trailing-icon-margin-left: 4px;
$mdc-chip-trailing-icon-margin-top: 0 !default;
$mdc-chip-trailing-icon-margin-right: -4px !default;
$mdc-chip-trailing-icon-margin-bottom: 0 !default;
$mdc-chip-trailing-icon-margin-left: 4px !default;

$mdc-chip-exit-transition:
opacity 75ms $mdc-animation-standard-curve-timing-function,
width 150ms $mdc-animation-deceleration-curve-timing-function,
padding 100ms linear,
margin 100ms linear;
margin 100ms linear !default;
26 changes: 13 additions & 13 deletions packages/mdc-dialog/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,19 +20,19 @@
// THE SOFTWARE.
//

$mdc-dialog-scrim-color: on-surface;
$mdc-dialog-title-ink-color: on-surface;
$mdc-dialog-content-ink-color: on-surface;
$mdc-dialog-scroll-divider-color: on-surface;
$mdc-dialog-scrim-color: on-surface !default;
$mdc-dialog-title-ink-color: on-surface !default;
$mdc-dialog-content-ink-color: on-surface !default;
$mdc-dialog-scroll-divider-color: on-surface !default;

$mdc-dialog-scrim-opacity: .32;
$mdc-dialog-title-ink-opacity: .87;
$mdc-dialog-content-ink-opacity: .6;
$mdc-dialog-scroll-divider-opacity: .12;
$mdc-dialog-scrim-opacity: .32 !default;
$mdc-dialog-title-ink-opacity: .87 !default;
$mdc-dialog-content-ink-opacity: .6 !default;
$mdc-dialog-scroll-divider-opacity: .12 !default;

$mdc-dialog-min-width: 280px;
$mdc-dialog-max-width: 560px;
$mdc-dialog-margin: 16px;
$mdc-dialog-title-bottom-padding: 9px;
$mdc-dialog-min-width: 280px !default;
$mdc-dialog-max-width: 560px !default;
$mdc-dialog-margin: 16px !default;
$mdc-dialog-title-bottom-padding: 9px !default;

$mdc-dialog-z-index: 7;
$mdc-dialog-z-index: 7 !default;
44 changes: 22 additions & 22 deletions packages/mdc-drawer/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,34 +23,34 @@
@import "@material/theme/variables";

// Colors
$mdc-drawer-title-ink-color: mdc-theme-prop-value(on-surface);
$mdc-drawer-subtitle-ink-color: mdc-theme-prop-value(on-surface);
$mdc-drawer-item-inactive-ink-color: mdc-theme-prop-value(on-surface);
$mdc-drawer-item-activated-ink-color: mdc-theme-prop-value(primary);
$mdc-drawer-divider-color: mdc-theme-prop-value(on-surface);
$mdc-drawer-surface-fill-color: mdc-theme-prop-value(surface);
$mdc-drawer-title-ink-color: mdc-theme-prop-value(on-surface) !default;
$mdc-drawer-subtitle-ink-color: mdc-theme-prop-value(on-surface) !default;
$mdc-drawer-item-inactive-ink-color: mdc-theme-prop-value(on-surface) !default;
$mdc-drawer-item-activated-ink-color: mdc-theme-prop-value(primary) !default;
$mdc-drawer-divider-color: mdc-theme-prop-value(on-surface) !default;
$mdc-drawer-surface-fill-color: mdc-theme-prop-value(surface) !default;

// Opacity
$mdc-drawer-title-ink-opacity: mdc-theme-text-emphasis(high);
$mdc-drawer-subtitle-ink-opacity: mdc-theme-text-emphasis(medium);
$mdc-drawer-item-inactive-icon-ink-opacity: mdc-theme-text-emphasis(medium);
$mdc-drawer-item-inactive-text-ink-opacity: mdc-theme-text-emphasis(high);
$mdc-drawer-item-active-icon-ink-opacity: 1;
$mdc-drawer-item-active-text-ink-opacity: mdc-theme-text-emphasis(high);
$mdc-drawer-divider-opacity: .12;
$mdc-drawer-title-ink-opacity: mdc-theme-text-emphasis(high) !default;
$mdc-drawer-subtitle-ink-opacity: mdc-theme-text-emphasis(medium) !default;
$mdc-drawer-item-inactive-icon-ink-opacity: mdc-theme-text-emphasis(medium) !default;
$mdc-drawer-item-inactive-text-ink-opacity: mdc-theme-text-emphasis(high) !default;
$mdc-drawer-item-active-icon-ink-opacity: 1 !default;
$mdc-drawer-item-active-text-ink-opacity: mdc-theme-text-emphasis(high) !default;
$mdc-drawer-divider-opacity: .12 !default;

// Widths
$mdc-drawer-width: 256px;
$mdc-drawer-list-item-spacing: 4px;
$mdc-drawer-surface-padding: 16px;
$mdc-drawer-width: 256px !default;
$mdc-drawer-list-item-spacing: 4px !default;
$mdc-drawer-surface-padding: 16px !default;

// Animations
$mdc-drawer-animation-enter: 250ms;
$mdc-drawer-animation-exit: 200ms;
$mdc-drawer-animation-enter: 250ms !default;
$mdc-drawer-animation-exit: 200ms !default;

// Scrim
$mdc-drawer-modal-scrim-color: mdc-theme-prop-value(on-surface);
$mdc-drawer-modal-scrim-opacity: .32;
$mdc-drawer-modal-scrim-color: mdc-theme-prop-value(on-surface) !default;
$mdc-drawer-modal-scrim-opacity: .32 !default;

$mdc-drawer-z-index: 6;
$mdc-drawer-modal-elevation: 16;
$mdc-drawer-z-index: 6 !default;
$mdc-drawer-modal-elevation: 16 !default;
14 changes: 7 additions & 7 deletions packages/mdc-elevation/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@

@import "@material/animation/variables";

$mdc-elevation-baseline-color: black;
$mdc-elevation-umbra-opacity: .2;
$mdc-elevation-penumbra-opacity: .14;
$mdc-elevation-ambient-opacity: .12;
$mdc-elevation-baseline-color: black !default;
$mdc-elevation-umbra-opacity: .2 !default;
$mdc-elevation-penumbra-opacity: .14 !default;
$mdc-elevation-ambient-opacity: .12 !default;

$mdc-elevation-umbra-map: (
0: "0px 0px 0px 0px",
Expand Down Expand Up @@ -53,7 +53,7 @@ $mdc-elevation-umbra-map: (
22: "0px 10px 14px -6px",
23: "0px 11px 14px -7px",
24: "0px 11px 15px -7px"
);
) !default;

$mdc-elevation-penumbra-map: (
0: "0px 0px 0px 0px",
Expand Down Expand Up @@ -81,7 +81,7 @@ $mdc-elevation-penumbra-map: (
22: "0px 22px 35px 3px",
23: "0px 23px 36px 3px",
24: "0px 24px 38px 3px"
);
) !default;

$mdc-elevation-ambient-map: (
0: "0px 0px 0px 0px",
Expand Down Expand Up @@ -109,7 +109,7 @@ $mdc-elevation-ambient-map: (
22: "0px 8px 42px 7px",
23: "0px 9px 44px 8px",
24: "0px 9px 46px 8px"
);
) !default;

// The css property used for elevation. In most cases this should not be changed. It is exposed
// as a variable for abstraction / easy use when needing to reference the property directly, for
Expand Down
10 changes: 5 additions & 5 deletions packages/mdc-fab/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@
// THE SOFTWARE.
//

$mdc-fab-extended-icon-padding: 12px;
$mdc-fab-extended-label-padding: 20px;
$mdc-fab-height: 56px;
$mdc-fab-mini-height: 40px;
$mdc-fab-extended-height: 48px;
$mdc-fab-extended-icon-padding: 12px !default;
$mdc-fab-extended-label-padding: 20px !default;
$mdc-fab-height: 56px !default;
$mdc-fab-mini-height: 40px !default;
$mdc-fab-extended-height: 48px !default;
4 changes: 2 additions & 2 deletions packages/mdc-floating-label/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,5 +20,5 @@
// THE SOFTWARE.
//

$mdc-floating-label-position-y: 50%;
$mdc-floating-label-transition-duration: 150ms;
$mdc-floating-label-position-y: 50% !default;
$mdc-floating-label-transition-duration: 150ms !default;
2 changes: 1 addition & 1 deletion packages/mdc-icon-button/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,4 @@
// THE SOFTWARE.
//

$mdc-icon-button-size: 24px;
$mdc-icon-button-size: 24px !default;
12 changes: 6 additions & 6 deletions packages/mdc-image-list/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.

$mdc-image-list-standard-gutter-size: 4px;
$mdc-image-list-masonry-gutter-size: 16px;
$mdc-image-list-icon-size: 24px;
$mdc-image-list-text-protection-background-color: rgba(0, 0, 0, .6);
$mdc-image-list-text-protection-height: 48px;
$mdc-image-list-text-protection-horizontal-padding: 16px;
$mdc-image-list-standard-gutter-size: 4px !default;
$mdc-image-list-masonry-gutter-size: 16px !default;
$mdc-image-list-icon-size: 24px !default;
$mdc-image-list-text-protection-background-color: rgba(0, 0, 0, .6) !default;
$mdc-image-list-text-protection-height: 48px !default;
$mdc-image-list-text-protection-horizontal-padding: 16px !default;
2 changes: 1 addition & 1 deletion packages/mdc-linear-progress/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,4 @@
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.

$mdc-linear-progress-baseline-buffer-color: #e6e6e6;
$mdc-linear-progress-baseline-buffer-color: #e6e6e6 !default;
4 changes: 2 additions & 2 deletions packages/mdc-list/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,5 +20,5 @@

$mdc-list-divider-color-on-light-bg: rgba(0, 0, 0, .12) !default;
$mdc-list-divider-color-on-dark-bg: rgba(255, 255, 255, .2) !default;
$mdc-list-side-padding: 16px;
$mdc-list-text-offset: 72px;
$mdc-list-side-padding: 16px !default;
$mdc-list-text-offset: 72px !default;
8 changes: 4 additions & 4 deletions packages/mdc-menu-surface/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@
// THE SOFTWARE.
//

$mdc-menu-surface-fade-in-duration: .03s;
$mdc-menu-surface-fade-out-duration: .075s;
$mdc-menu-surface-scale-duration: .12s;
$mdc-menu-surface-min-distance-from-edge: 32px;
$mdc-menu-surface-fade-in-duration: .03s !default;
$mdc-menu-surface-fade-out-duration: .075s !default;
$mdc-menu-surface-scale-duration: .12s !default;
$mdc-menu-surface-min-distance-from-edge: 32px !default;
$mdc-menu-surface-z-index: 8 !default; // One above mdc-dialog
4 changes: 2 additions & 2 deletions packages/mdc-menu/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,5 +20,5 @@
// THE SOFTWARE.
//

$mdc-menu-width-base: 56px;
$mdc-menu-min-width: 2 * $mdc-menu-width-base;
$mdc-menu-width-base: 56px !default;
$mdc-menu-min-width: 2 * $mdc-menu-width-base !default;
12 changes: 6 additions & 6 deletions packages/mdc-notched-outline/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,14 @@
// THE SOFTWARE.
//

$mdc-notched-outline-transition-duration: 150ms;
$mdc-notched-outline-transition-duration: 150ms !default;
// Keep this in sync with constants.numbers.MIN_LEADING_STROKE_EDGE_POSITION
$mdc-notched-outline-min-leading-stroke-edge-position: 12px;
$mdc-notched-outline-min-leading-stroke-edge-position: 12px !default;
// The gap between the stroke end and floating label
// Keep this in sync with constants.numbers.NOTCH_GUTTER_SIZE
$mdc-notched-outline-notch-gutter-size: 4px;
$mdc-notched-outline-leading-width: 12px;
$mdc-notched-outline-padding: 4px;
$mdc-notched-outline-notch-gutter-size: 4px !default;
$mdc-notched-outline-leading-width: 12px !default;
$mdc-notched-outline-padding: 4px !default;
// This variable keeps the before/after JS label centered in the notch when the font-size is changed.
$mdc-notched-outline-label-adjust: 14%;
$mdc-notched-outline-label-adjust: 14% !default;

16 changes: 8 additions & 8 deletions packages/mdc-radio/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,11 @@

@import "@material/theme/variables";

$mdc-radio-touch-area: 40px;
$mdc-radio-ui-size: 20px;
$mdc-radio-ui-pct: percentage($mdc-radio-ui-size / $mdc-radio-touch-area);
$mdc-radio-transition-duration: 120ms;
$mdc-radio-ripple-opacity: .14;
$mdc-radio-baseline-theme-color: secondary;
$mdc-radio-unchecked-color: rgba(mdc-theme-prop-value(on-surface), .54);
$mdc-radio-circle-color: rgba(mdc-theme-prop-value(on-surface), .26);
$mdc-radio-touch-area: 40px !default;
$mdc-radio-ui-size: 20px !default;
$mdc-radio-ui-pct: percentage($mdc-radio-ui-size / $mdc-radio-touch-area) !default;
$mdc-radio-transition-duration: 120ms !default;
$mdc-radio-ripple-opacity: .14 !default;
$mdc-radio-baseline-theme-color: secondary !default;
$mdc-radio-unchecked-color: rgba(mdc-theme-prop-value(on-surface), .54) !default;
$mdc-radio-circle-color: rgba(mdc-theme-prop-value(on-surface), .26) !default;
12 changes: 6 additions & 6 deletions packages/mdc-ripple/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,10 @@
// THE SOFTWARE.
//

$mdc-ripple-fade-in-duration: 75ms;
$mdc-ripple-fade-out-duration: 150ms;
$mdc-ripple-translate-duration: 225ms;
$mdc-states-wash-duration: 15ms;
$mdc-ripple-fade-in-duration: 75ms !default;
$mdc-ripple-fade-out-duration: 150ms !default;
$mdc-ripple-translate-duration: 225ms !default;
$mdc-states-wash-duration: 15ms !default;

$mdc-ripple-dark-ink-opacities: (
hover: .04,
Expand All @@ -43,5 +43,5 @@ $mdc-ripple-light-ink-opacities: (

// Legacy

$mdc-ripple-pressed-dark-ink-opacity: .16;
$mdc-ripple-pressed-light-ink-opacity: .32;
$mdc-ripple-pressed-dark-ink-opacity: .16 !default;
$mdc-ripple-pressed-light-ink-opacity: .32 !default;
Loading

0 comments on commit cb344c3

Please sign in to comment.