From 23b417b432aed3c3fbef6db4e5cf5e1294061b47 Mon Sep 17 00:00:00 2001 From: Mario Aguiar Date: Mon, 27 Jun 2022 21:10:20 -0500 Subject: [PATCH] Update variables --- plugin/assets/css/src/components/card.css | 2 +- plugin/assets/css/src/components/material.css | 44 +++++++++---------- plugin/assets/css/src/overrides.css | 8 ++-- .../components/material-library/styles.js | 2 +- theme/assets/css/src/components/comments.css | 4 +- theme/assets/css/src/components/material.css | 44 +++++++++---------- theme/assets/css/src/components/post-card.css | 2 +- theme/assets/css/src/components/tables.css | 4 +- 8 files changed, 55 insertions(+), 55 deletions(-) diff --git a/plugin/assets/css/src/components/card.css b/plugin/assets/css/src/components/card.css index 1d4bfe5c4..528a0e374 100644 --- a/plugin/assets/css/src/components/card.css +++ b/plugin/assets/css/src/components/card.css @@ -48,7 +48,7 @@ } .post-card__subtitle { - color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .54); + color: var(--mdc-theme-on-surface, #000); } .mdc-card__media { diff --git a/plugin/assets/css/src/components/material.css b/plugin/assets/css/src/components/material.css index e62151335..0bf27255b 100644 --- a/plugin/assets/css/src/components/material.css +++ b/plugin/assets/css/src/components/material.css @@ -172,11 +172,11 @@ .mdc-data-table__header-cell, .mdc-data-table__cell, .mdc-menu .mdc-list { - color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .87); + color: var(--mdc-theme-on-surface, #000); } .mdc-data-table__row { - border-color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .12); + border-color: var(--mdc-theme-on-surface, #000); } /* Tabs */ @@ -247,11 +247,11 @@ /* Surface and On-Surface styles */ .mdc-button--outlined:not(:disabled), .mdc-button--outlined:disabled { - border-color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .12); + border-color: var(--mdc-theme-on-surface, #000); } .mdc-button--outlined:disabled { - color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .38); + color: var(--mdc-theme-on-surface, #000); } .mdc-card, @@ -269,7 +269,7 @@ .single-post-card__subtitle, .material-design-card__secondary-text, .material-design-card__supporting-text { - color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .54); + color: var(--mdc-theme-on-surface, #000); } .mdc-text-field:not(.mdc-text-field--disabled) { @@ -280,19 +280,19 @@ } & .mdc-text-field__input { - color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .87); + color: var(--mdc-theme-on-surface, #000); } & .mdc-floating-label, & + .mdc-text-field-helper-line .mdc-text-field-helper-text, & .mdc-text-field-character-counter, & + .mdc-text-field-helper-line .mdc-text-field-character-counter { - color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .6); + color: var(--mdc-theme-on-surface, #000); } .mdc-text-field__icon--leading, .mdc-text-field__icon--trailing { - color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .54); + color: var(--mdc-theme-on-surface, #000); } } @@ -310,39 +310,39 @@ & .mdc-select__native-control, & .mdc-select__selected-text, & .mdc-floating-label { - color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .87); - border-bottom-color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .42); + color: var(--mdc-theme-on-surface, #000); + border-bottom-color: var(--mdc-theme-on-surface, #000); } } .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background { - border-color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .54); + border-color: var(--mdc-theme-on-surface, #000); } .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background { - border-color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .38); + border-color: var(--mdc-theme-on-surface, #000); } .mdc-checkbox__native-control[disabled]:checked ~ .mdc-checkbox__background, .mdc-checkbox__native-control[disabled]:indeterminate ~ .mdc-checkbox__background { - background-color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .38); + background-color: var(--mdc-theme-on-surface, #000); } .mdc-radio .mdc-radio__native-control:enabled:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle { - border-color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .54); + border-color: var(--mdc-theme-on-surface, #000); } .mdc-drawer { - border-color: rgba(var(--mdc-theme-on-surface-rgb, 255, 255, 255), 0.12); + border-color: var(--mdc-theme-on-surface, #000); background-color: var(--md-sys-color-surface, #fff); & .mdc-drawer__title, & .mdc-list-item { - color: rgba(var(--mdc-theme-on-surface-rgb, 255, 255, 255), 0.87); + color: var(--mdc-theme-on-surface, #000); } & .mdc-drawer__subtitle { - color: rgba(var(--mdc-theme-on-surface-rgb, 255, 255, 255), 0.6); + color: var(--mdc-theme-on-surface, #000); } & .mdc-list-item--selected, @@ -359,19 +359,19 @@ .mdc-dialog { & .mdc-dialog__title { - color: rgba(var(--mdc-theme-on-surface-rgb, 255, 255, 255), 0.87); + color: var(--mdc-theme-on-surface, #000); } & .mdc-dialog__content, & .mdc-list { - color: rgba(var(--mdc-theme-on-surface-rgb, 255, 255, 255), 0.6); + color: var(--mdc-theme-on-surface, #000); } } .mdc-chip { background-color: var(--mdc-theme-surface-mix-12, #e0e0e0); border-radius: var(--mdc-chip-radius, 16px); - color: rgba(var(--mdc-theme-on-surface-rgb, 255, 255, 255), 0.87); + color: var(--mdc-theme-on-surface, #000); &.mdc-chip--selected { color: var(--md-sys-color-primary, #6200ee); @@ -405,11 +405,11 @@ .mdc-tab { & .mdc-tab__text-label { - color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), 0.6); + color: var(--mdc-theme-on-surface, #000); } & .mdc-tab__icon { - color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), 0.5); + color: var(--mdc-theme-on-surface, #000); } &--active { diff --git a/plugin/assets/css/src/overrides.css b/plugin/assets/css/src/overrides.css index dc4a44c76..d7e8b1aa4 100644 --- a/plugin/assets/css/src/overrides.css +++ b/plugin/assets/css/src/overrides.css @@ -60,7 +60,7 @@ .mdc-button--outlined:not(:disabled) { border-color: rgba(0, 0, 0, 0.12) !important; - border-color: rgba(var(--mdc-theme-on-surface-rgb), .12) !important; + border-color: var(--mdc-theme-on-surface, #000) !important; } .mdc-icon-button { @@ -81,7 +81,7 @@ .mdc-data-table { background-color: var(--md-sys-color-surface, #fff) !important; border-color: rgba(0, 0, 0, 0.12) !important; - border-color: rgba(var(--mdc-theme-on-surface-rgb), .12) !important; + border-color: var(--mdc-theme-on-surface, #000) !important; & thead { border: none !important; @@ -95,7 +95,7 @@ .mdc-data-table__row { border-top-color: rgba(0, 0, 0, 0.12) !important; - border-top-color: rgba(var(--mdc-theme-on-surface-rgb, #000), .12) !important; + border-top-color: var(--mdc-theme-on-surface, #000) !important; border-top-width: 1px !important; border-top-style: solid !important; } @@ -143,6 +143,6 @@ ul.mdc-list { /* Text fields */ .mdc-text-field__input { background-color: transparent !important; - color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .87) !important; + color: var(--mdc-theme-on-surface, #000) !important; margin: 0 !important; } diff --git a/plugin/assets/src/customizer/components/material-library/styles.js b/plugin/assets/src/customizer/components/material-library/styles.js index 6f862d74d..739eb418e 100644 --- a/plugin/assets/src/customizer/components/material-library/styles.js +++ b/plugin/assets/src/customizer/components/material-library/styles.js @@ -97,7 +97,7 @@ export const Overrides = createGlobalStyle` } #mcb-material-library-preview hr { - border-color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .12); + border-color: var(--mdc-theme-on-surface, #000); } #material-library-preview { diff --git a/theme/assets/css/src/components/comments.css b/theme/assets/css/src/components/comments.css index 997e34a42..b8ed970ed 100644 --- a/theme/assets/css/src/components/comments.css +++ b/theme/assets/css/src/components/comments.css @@ -25,7 +25,7 @@ } .comments-title-count { - border-bottom: 2px solid rgba(var(--mdc-theme-on-surface-rgb), .12); + border-bottom: 2px solid var(--mdc-theme-on-surface, #000); padding-bottom: 2em; & .material-icons { @@ -35,7 +35,7 @@ } .comment-list { - border-bottom: 2px solid rgba(var(--mdc-theme-on-surface-rgb), .12); + border-bottom: 2px solid var(--mdc-theme-on-surface, #000); list-style: none; margin: 3em 0; padding: 0; diff --git a/theme/assets/css/src/components/material.css b/theme/assets/css/src/components/material.css index a58b2e3bb..7d65c90cb 100644 --- a/theme/assets/css/src/components/material.css +++ b/theme/assets/css/src/components/material.css @@ -92,11 +92,11 @@ .mdc-data-table__header-cell, .mdc-data-table__cell, .mdc-menu .mdc-list { - color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .87); + color: var(--mdc-theme-on-surface, #000); } .mdc-data-table__row { - border-color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .12); + border-color: var(--mdc-theme-on-surface, #000); } /* Tabs */ @@ -150,11 +150,11 @@ /* Surface and On-Surface styles */ .mdc-button--outlined:not(:disabled), .mdc-button--outlined:disabled { - border-color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .12); + border-color: var(--mdc-theme-on-surface, #000); } .mdc-button--outlined:disabled { - color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .38); + color: var(--mdc-theme-on-surface, #000); } .mdc-card, @@ -172,7 +172,7 @@ .single-post-card__subtitle, .mtb-card__secondary-text, .mtb-card__supporting-text { - color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .54); + color: var(--mdc-theme-on-surface, #000); } .mdc-text-field:not(.mdc-text-field--disabled) { @@ -183,19 +183,19 @@ } & .mdc-text-field__input { - color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .87); + color: var(--mdc-theme-on-surface, #000); } & .mdc-floating-label, & + .mdc-text-field-helper-line .mdc-text-field-helper-text, & .mdc-text-field-character-counter, & + .mdc-text-field-helper-line .mdc-text-field-character-counter { - color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .6); + color: var(--mdc-theme-on-surface, #000); } .mdc-text-field__icon--leading, .mdc-text-field__icon--trailing { - color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .54); + color: var(--mdc-theme-on-surface, #000); } } @@ -213,39 +213,39 @@ & .mdc-select__native-control, & .mdc-select__selected-text, & .mdc-floating-label { - color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .87); - border-bottom-color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .42); + color: var(--mdc-theme-on-surface, #000); + border-bottom-color: var(--mdc-theme-on-surface, #000); } } .mdc-checkbox__native-control:enabled:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background { - border-color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .54); + border-color: var(--mdc-theme-on-surface, #000); } .mdc-checkbox__native-control[disabled]:not(:checked):not(:indeterminate) ~ .mdc-checkbox__background { - border-color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .38); + border-color: var(--mdc-theme-on-surface, #000); } .mdc-checkbox__native-control[disabled]:checked ~ .mdc-checkbox__background, .mdc-checkbox__native-control[disabled]:indeterminate ~ .mdc-checkbox__background { - background-color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .38); + background-color: var(--mdc-theme-on-surface, #000); } .mdc-radio .mdc-radio__native-control:enabled:not(:checked) + .mdc-radio__background .mdc-radio__outer-circle { - border-color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .54); + border-color: var(--mdc-theme-on-surface, #000); } .mdc-drawer { - border-color: rgba(var(--mdc-theme-on-surface-rgb, 255, 255, 255), 0.12); + border-color: var(--mdc-theme-on-surface, #000); background-color: var(--md-sys-color-surface, #fff); & .mdc-drawer__title, & .mdc-list-item { - color: rgba(var(--mdc-theme-on-surface-rgb, 255, 255, 255), 0.87); + color: var(--mdc-theme-on-surface, #000); } & .mdc-drawer__subtitle { - color: rgba(var(--mdc-theme-on-surface-rgb, 255, 255, 255), 0.6); + color: var(--mdc-theme-on-surface, #000); } & .mdc-list-item--selected, @@ -262,19 +262,19 @@ .mdc-dialog { & .mdc-dialog__title { - color: rgba(var(--mdc-theme-on-surface-rgb, 255, 255, 255), 0.87); + color: var(--mdc-theme-on-surface, #000); } & .mdc-dialog__content, & .mdc-list { - color: rgba(var(--mdc-theme-on-surface-rgb, 255, 255, 255), 0.6); + color: var(--mdc-theme-on-surface, #000); } } .mdc-chip { background-color: var(--mdc-theme-surface-mix-12, #e0e0e0); border-radius: var(--mdc-chip-radius, 16px); - color: rgba(var(--mdc-theme-on-surface-rgb, 255, 255, 255), 0.87); + color: var(--mdc-theme-on-surface, #000); &.mdc-chip--selected { color: var(--md-sys-color-primary, #6200ee); @@ -298,11 +298,11 @@ .mdc-tab { & .mdc-tab__text-label { - color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), 0.6); + color: var(--mdc-theme-on-surface, #000); } & .mdc-tab__icon { - color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), 0.5); + color: var(--mdc-theme-on-surface, #000); } &--active { diff --git a/theme/assets/css/src/components/post-card.css b/theme/assets/css/src/components/post-card.css index c13b87f36..fa303b3e0 100644 --- a/theme/assets/css/src/components/post-card.css +++ b/theme/assets/css/src/components/post-card.css @@ -48,7 +48,7 @@ } .post-card__subtitle { - color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .54); + color: var(--mdc-theme-on-surface, #000); } .mdc-card__media { diff --git a/theme/assets/css/src/components/tables.css b/theme/assets/css/src/components/tables.css index 4a57e3095..abb6493d9 100644 --- a/theme/assets/css/src/components/tables.css +++ b/theme/assets/css/src/components/tables.css @@ -16,11 +16,11 @@ table { border-collapse: collapse; - border: 1px solid rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .12); + border: 1px solid var(--mdc-theme-on-surface, #000); } tr { - border-top: 1px solid rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .12); + border-top: 1px solid var(--mdc-theme-on-surface, #000); } th,