Update variables

material-components · Jun 28, 2022 · 23b417b · 23b417b
1 parent 0333665
commit 23b417b
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 55 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,