# Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

2.9.1 (2021-07-27)

# Other Internal Changes

• install: slighly reduce install size by excluding tests in publish (9d01a44)

2.9.0 (2021-07-18)

Note: Version bump only for package @react-md/theme

2.8.4 (2021-06-10)

Note: Version bump only for package @react-md/theme

2.8.3 (2021-05-18)

Note: Version bump only for package @react-md/theme

2.8.2 (2021-04-23)

Note: Version bump only for package @react-md/theme

2.8.0 (2021-04-22)

Note: Version bump only for package @react-md/theme

2.7.1 (2021-03-23)

Note: Version bump only for package @react-md/theme

2.7.0 (2021-02-28)

# Bug Fixes

• @react-md/alert: fixed alert color when dark theme elevation is enabled (99cc271), closes #1075
• @react-md/card: fixed card color when dark theme elevation is enabled (e5da5f5), closes #1075
• @react-md/dialog: fixed dialog color when dark theme elevation is enabled (e79993d), closes #1075
• @react-md/form: fixed listbox color when dark theme elevation is enabled (b68ac04), closes #1075
• @react-md/menu: fixed menu color when dark theme elevation is enabled (52c752d), closes #1075
• @react-md/sheet: fixed sheet color when dark theme elevation is enabled (0abe05e), closes #1075

# Documentation

• @react-md/theme: added additional dark-theme-elevation SassDoc examples (172ee40)
• tsdoc: fixed remaining tsdoc syntax warnings (946f4dd)

2.6.0 (2021-02-13)

Note: Version bump only for package @react-md/theme

2.5.5 (2021-01-30)

Note: Version bump only for package @react-md/theme

2.5.4 (2021-01-27)

# Bug Fixes

• @react-md/card: fixed the bordered background color when the dark elevation flag is enabled (a9dd552), closes #1053

2.5.0 (2020-12-15)

Note: Version bump only for package @react-md/theme

2.4.2 (2020-10-23)

Note: Version bump only for package @react-md/theme

2.4.1 (2020-10-17)

Note: Version bump only for package @react-md/theme

2.4.0 (2020-10-17)

# Bug Fixes

• @react-md/table: table border color uses hex values to fix chrome colSpan rendering issue (#982) (2138284)

# Features

• @react-md/theme: Better Contrast Colors by Default and dev-utils refactor (#955) (519b128)

2.3.1 (2020-09-15)

Note: Version bump only for package @react-md/theme

2.3.0 (2020-09-10)

Note: Version bump only for package @react-md/theme

2.2.2 (2020-09-02)

Note: Version bump only for package @react-md/theme

2.2.1 (2020-09-02)

Note: Version bump only for package @react-md/theme

2.1.2 (2020-08-01)

Note: Version bump only for package @react-md/theme

2.1.1 (2020-07-21)

# Bug Fixes

• @react-md/theme: Fixed rmd-theme-get-swatch to loop over all rmd-theme-colors instead of the primaries only (353de23), closes #884

2.1.0 (2020-07-12)

# Bug Fixes

• Booleans in dist/scssVariables (f6d43a3)

# Features

• Improved Dark Mode using Raising Elevation (547877c), closes #860

2.0.2 (2020-06-30)

# Bug Fixes

• LICENSE: Removed the time range from license since it was incorrect (50c9021)
• Added sideEffects field to package.json (31820b9)
• sideEffects formatting (78a7b6b)

# v2.0.1

No changes.

# v2.0.0

This package is new for the v2 release, but replaces and expands upon the existing theming and color system in v1. Starting with v2, the theme has built-in support for automatically attempting to fix color contrast ratios.

# New Features / Behavior

• completely new theming system that utilizes functions, mixins, and CSS variables (applies to other react-md packages as well)
• provides functions and mixins to check color contrast ratios and updates the default theme automatically
• new mixins to switch your app to the light or dark modes which can be used with the prefers-color-scheme media query to automatically adjust based on user OS settings

# Breaking Changes

• color and background-color class names can no longer be generated for you with a mixin

# New SCSS Variables, Functions, and Mixins

• $rmd-theme-no-css-variables-fallback: true !default - Boolean if the main @mixin rmd-theme should no longer provide a fallback value when a css variable is not set.
• $rmd-theme-define-colors-with-rgba: false !default - Boolean if the light and dark theme colors should be created with rgba instead of lighten.
• $rmd-theme-on-primary - An accessible text color to use on top of the primary color
• $rmd-theme-on-secondary - An accessible text color to use on top of the secondary color
• $rmd-theme-warning: $rmd-deep-orange-a-200 !default - The color to use for a warning state.
• $rmd-theme-on-warning - An accessible text color to use on top of the warning color
• $rmd-theme-on-error - An accessible text color to use on top of the error color
• $rmd-theme-success: $rmd-green-a-700 !default - The color to use for a "successful" state.
• $rmd-theme-on-success - An accessible text color to use on top of the success color
• $rmd-theme-light-surface: #fff !default - The background color to use for elevated surfaces in the light theme
• $rmd-theme-dark-surface: $rmd-grey-800 !default - The background color to use for elevated surfaces in the dark theme
• $rmd-theme-surface: if($rmd-theme-light, $rmd-theme-light-surface, $rmd-theme-dark-surface) - The background color to use for elevated surfaces
• $rmd-theme-default-contrast-ratio: 3 !default - The default contrast ratio used for color accessibility
• @function rmd-theme-tone - determines if the provided color is light or dark
• @function rmd-theme-contrast-tone - determines if the contrast color should be light or dark
• @function rmd-theme - gets one of the theme values and validates that the theme name is valid
• @function rmd-theme-var - gets one of the theme values as a css variable with a fallback value and validates that the theme name is valid
• @mixin rmd-theme - applies one of the theme values to a css property as a css variable
• @mixin rmd-theme-update-var - updates one of the theme values as a css variable
• @mixin rmd-theme-light - Updates all the @import-ed react-md packages to use the light theme
• @mixin rmd-theme-dark - Updates all the @import-ed react-md packages to use the dark theme

# Renamed SCSS Variables, Functions, and Mixins

• renamed all the color variables to be prefixed with rmd instead of md
• renamed $md-light-theme to $md-theme-light
• renamed $md-primary-color to $rmd-theme-primary and changed the default value from $md-indigo-500 to $rmd-purple-500
• renamed $md-primary-background-text-color to $rmd-theme-on-primary and changed the default value to be automatically adjusted to be contrast compliant
• renamed $md-error-color to $rmd-error-color
• renamed $md-secondary-color to $rmd-theme-secondary
• renamed $md-secondary-background-text-color to $rmd-theme-on-secondary and changed the default value to be automatically adjusted to be contrast compliant
• renamed $md-light-theme-background-color to $rmd-theme-light-background
• renamed $md-dark-theme-background-color to $rmd-theme-dark-background
• renamed $md-light-theme-text-color to $rmd-theme-light-primary-text-color and changed the default value from rgba($md-black-base, 0.87) to lighten($rmd-black-base, 13%)
• renamed $md-light-theme-secondary-text-color to $rmd-theme-light-secondary-text-color and changed the default value from rgba($md-black-base, 0.54) to lighten($rmd-black-base, 46%)
• renamed $md-light-theme-hint-text-color to $rmd-theme-light-hint-text-color and changed the default value from rgba($md-black-base, 0.38) to lighten($rmd-black-base, 66%)
• renamed $md-light-theme-disabled-text-color to $rmd-theme-light-disabled-text-color and changed the default value from rgba($md-black-base, 0.38) to lighten($rmd-black-base, 62%)
• renamed $md-light-theme-icon-text-color to $rmd-theme-light-icon-color and changed the default value from rgba($md-black-base, 0.54) to lighten($rmd-black-base, 46%)
• renamed $md-dark-theme-text-color to $rmd-theme-dark-primary-text-color and changed the default value from $md-white-base to darken($rmd-white-base, 15%)
• renamed $md-dark-theme-secondary-text-color to $rmd-theme-dark-secondary-text-color and changed the default value from rgba($md-white-base, 0.7) to darken($rmd-white-base, 30%)
• renamed $md-dark-theme-hint-text-color to $rmd-theme-dark-hint-text-color and changed the default value from rgba($md-white-base, 0.3) to darken($rmd-white-base, 50%)
• renamed $md-dark-theme-disabled-text-color to $rmd-theme-dark-disabled-text-color and changed the default value from rgba($md-white-base, 0.3) to darken($rmd-white-base, 50%)
• renamed $md-dark-theme-icon-text-color to $rmd-theme-dark-icon-color and changed the default value from rgba($md-white-base, 0.7) to darken($rmd-white-base, 30%)
• renamed $md-light-theme-colors to $rmd-theme-light-text-colors and
• renamed $md-dark-theme-colors to $rmd-theme-dark-text-colors
• renamed @function get-swatch to @function rmd-theme-get-swatch

# Removed SCSS Variables, Functions, and Mixins

• removed $md-colors-include-class-names
• removed $md-colors-warn-md
• removed $md-primary-hover-opacity since it is no longer used
• removed $md-secondary-hover-opacity since it is no longer used
• removed $md-light-theme-status-bar-color, $md-dark-theme-status-bar-color,$md-light-theme-card-color, $md-dark-theme-card-color, $md-light-theme-app-bar-color and $md-dark-theme-app-bar-color
• removed the divider, background, hover, and toolbar keys from the $rmd-theme-light-text-colors and $rmd-theme-dark-text-colors maps
• removed @function get-color since it was pretty worthless and @function rmd-theme or @mixin rmd-theme are preferred
• removed @mixin react-md-colors since it's preferred to use the new theme mixins instead of adding classes
• removed @mixin react-md-theme-colors since the new theming system will handle this automatically if using the @mixin rmd-theme
• removed @mixin react-md-colors-hover since the new theming system and user interaction behavior no longer requires this
• removed @mixin react-md-color-class-name and @mixin react-md-color-class-names