All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
5.1.6 (2023-12-11)
Note: Version bump only for package @react-md/theme
5.1.3 (2022-05-07)
- fix typos throughout codebase (725d1a2)
5.1.2 (2022-04-02)
Note: Version bump only for package @react-md/theme
5.1.0 (2022-03-18)
Note: Version bump only for package @react-md/theme
5.0.0 (2022-01-31)
Note: Version bump only for package @react-md/theme
4.0.3 (2021-12-31)
4.0.1 (2021-11-27)
Note: Version bump only for package @react-md/theme
4.0.0 (2021-11-24)
- sass: Do not use legacy global functions (6159e16)
- Update to use new JSX Transform and latest
eslint
(8111cd3)
- @react-md/format: ran
prettier
after upgrading to v2.4.0 (06110af) - react-md: Remove prop-types package and usage (2637a6f)
- stylelint: Updated to use
stylelint
(22d1598)
- Minimum React version is now 16.14 instead of 16.8
- react-md: There will no longer be run-time prop validation with
the
prop-types
package.
3.1.0 (2021-09-10)
- react-md.dev: updated
sassdoc
for new module system (4746d26)
- ran
yarn format
to include new files (48d3d7f)
3.0.0 (2021-08-13)
- sass: use math.div instead of division since it's deprecated (d8c3f12)
- @react-md/theme: $rmd-theme-dark-elevation
defaults
to true (b371337)
- react-md.dev: removed tilde from imports (6081e14)
- react-md.dev: updated docs for new rmd-theme-dark-elevation
defaults
(b2269ff)
- @react-md/theme:
$rmd-theme-dark-elevation
now defaults totrue
instead offalse
2.9.1 (2021-07-27)
- 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)
- @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
- @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)
- @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)
- @react-md/table: table border color uses hex values to fix chrome colSpan rendering issue (#982) (2138284)
- @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)
- @react-md/theme: Fixed
rmd-theme-get-swatch
to loop over allrmd-theme-colors
instead of the primaries only (353de23), closes #884
2.1.0 (2020-07-12)
- Booleans in
dist/scssVariables
(f6d43a3)
2.0.2 (2020-06-30)
- LICENSE: Removed the time range from license since it was incorrect (50c9021)
- Added
sideEffects
field topackage.json
(31820b9) sideEffects
formatting (78a7b6b)
No changes.
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.
- 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
ordark
modes which can be used with theprefers-color-scheme
media query to automatically adjust based on user OS settings
color
andbackground-color
class names can no longer be generated for you with a mixin
$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 withrgba
instead oflighten
.$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 islight
ordark
@function rmd-theme-contrast-tone
- determines if the contrast color should belight
ordark
@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
-edreact-md
packages to use the light theme@mixin rmd-theme-dark
- Updates all the@import
-edreact-md
packages to use the dark theme
- renamed all the color variables to be prefixed with
rmd
instead ofmd
- 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 fromrgba($md-black-base, 0.87)
tolighten($rmd-black-base, 13%)
- renamed
$md-light-theme-secondary-text-color
to$rmd-theme-light-secondary-text-color
and changed the default value fromrgba($md-black-base, 0.54)
tolighten($rmd-black-base, 46%)
- renamed
$md-light-theme-hint-text-color
to$rmd-theme-light-hint-text-color
and changed the default value fromrgba($md-black-base, 0.38)
tolighten($rmd-black-base, 66%)
- renamed
$md-light-theme-disabled-text-color
to$rmd-theme-light-disabled-text-color
and changed the default value fromrgba($md-black-base, 0.38)
tolighten($rmd-black-base, 62%)
- renamed
$md-light-theme-icon-text-color
to$rmd-theme-light-icon-color
and changed the default value fromrgba($md-black-base, 0.54)
tolighten($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
todarken($rmd-white-base, 15%)
- renamed
$md-dark-theme-secondary-text-color
to$rmd-theme-dark-secondary-text-color
and changed the default value fromrgba($md-white-base, 0.7)
todarken($rmd-white-base, 30%)
- renamed
$md-dark-theme-hint-text-color
to$rmd-theme-dark-hint-text-color
and changed the default value fromrgba($md-white-base, 0.3)
todarken($rmd-white-base, 50%)
- renamed
$md-dark-theme-disabled-text-color
to$rmd-theme-dark-disabled-text-color
and changed the default value fromrgba($md-white-base, 0.3)
todarken($rmd-white-base, 50%)
- renamed
$md-dark-theme-icon-text-color
to$rmd-theme-dark-icon-color
and changed the default value fromrgba($md-white-base, 0.7)
todarken($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
$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
, andtoolbar
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