Merge 0df2693 into e48ec5d

material-components · Jul 5, 2022 · bc69eca · bc69eca
2 parents e48ec5d + 0df2693
commit bc69eca
Show file tree

Hide file tree

Showing 47 changed files with 46,479 additions and 1,705 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,6 +41,7 @@
     "@material/image-list": "5.1.0",
     "@material/layout-grid": "5.1.0",
     "@material/list": "5.1.0",
+    "@material/material-color-utilities": "0.1.2",
     "@material/ripple": "5.1.0",
     "@material/switch": "6.0.0",
     "@material/tab-bar": "5.1.0",

diff --git a/plugin/assets/css/src/components/card.css b/plugin/assets/css/src/components/card.css
@@ -38,7 +38,7 @@
 	}
 
 	.mdc-card__action-buttons .mdc-button__icon {
-		color: var(--mdc-theme-primary, #6200ee);
+		color: var(--md-sys-color-primary, #6200ee);
 	}
 
 	.post-card__primary,
@@ -48,7 +48,7 @@
 	}
 
 	.post-card__subtitle {
-		color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .54);
+		color: var(--md-sys-color-on-surface, #000);
 	}
 
 	.mdc-card__media {

diff --git a/plugin/assets/css/src/components/core.css b/plugin/assets/css/src/components/core.css
@@ -17,5 +17,5 @@
 /* Cover */
 .wp-block-cover-image,
 .wp-block-cover {
-	background-color: var(--mdc-theme-surface, #000);
+	background-color: var(--md-sys-color-surface, #000);
 }
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(--md-sys-color-on-surface, #000);
 }
 
 .mdc-data-table__row {
-	border-color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .12);
+	border-color: var(--md-sys-color-on-surface, #000);
 }
 
 /* Tabs */
@@ -247,18 +247,18 @@
 /* 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(--md-sys-color-on-surface, #000);
 }
 
 .mdc-button--outlined:disabled {
-	color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .38);
+	color: var(--md-sys-color-on-surface, #000);
 }
 
 .mdc-card,
 .mdc-card__link,
 .single-post-card__title,
 .material-design-card__title {
-	color: var(--mdc-theme-on-surface, #000);
+	color: var(--md-sys-color-on-surface, #000);
 	text-decoration: none;
 }
 
@@ -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(--md-sys-color-on-surface, #000);
 }
 
 .mdc-text-field:not(.mdc-text-field--disabled) {
@@ -280,24 +280,24 @@
 	}
 
 	& .mdc-text-field__input {
-		color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), .87);
+		color: var(--md-sys-color-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(--md-sys-color-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(--md-sys-color-on-surface, #000);
 	}
 }
 
 .mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
-	color: rgba(var(--mdc-theme-primary-rgb, 98, 0, 238), .87);
+	color: var(--md-sys-color-primary);
 }
 
 .mdc-select:not(.mdc-select--disabled) {
@@ -310,113 +310,113 @@
 	& .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(--md-sys-color-on-surface, #000);
+		border-bottom-color: var(--md-sys-color-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(--md-sys-color-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(--md-sys-color-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(--md-sys-color-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(--md-sys-color-on-surface, #000);
 }
 
 .mdc-drawer {
-	border-color: rgba(var(--mdc-theme-on-surface-rgb, 255, 255, 255), 0.12);
-	background-color: var(--mdc-theme-surface, #fff);
+	border-color: var(--md-sys-color-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(--md-sys-color-on-surface, #000);
 	}
 
 	& .mdc-drawer__subtitle {
-		color: rgba(var(--mdc-theme-on-surface-rgb, 255, 255, 255), 0.6);
+		color: var(--md-sys-color-on-surface, #000);
 	}
 
 	& .mdc-list-item--selected,
 	& .mdc-list-item--activated {
-		color: var(--mdc-theme-primary, #6200ee);
+		color: var(--md-sys-color-primary, #6200ee);
 	}
 }
 
 :not(.mdc-list--non-interactive) > :not(.mdc-list-item--disabled).mdc-list-item::before,
 :not(.mdc-list--non-interactive) > :not(.mdc-list-item--disabled).mdc-list-item::after {
-	background-color: var(--mdc-theme-on-surface, #000);
+	background-color: var(--md-sys-color-on-surface, #000);
 }
 
 .mdc-dialog {
 
 	& .mdc-dialog__title {
-		color: rgba(var(--mdc-theme-on-surface-rgb, 255, 255, 255), 0.87);
+		color: var(--md-sys-color-on-surface, #000);
 	}
 
 	& .mdc-dialog__content,
 	& .mdc-list {
-		color: rgba(var(--mdc-theme-on-surface-rgb, 255, 255, 255), 0.6);
+		color: var(--md-sys-color-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(--md-sys-color-on-surface, #000);
 
 	&.mdc-chip--selected {
-		color: var(--mdc-theme-primary, #6200ee);
+		color: var(--md-sys-color-primary, #6200ee);
 	}
 }
 
 .mdc-icon-button {
-	color: var(--mdc-theme-primary, #6200ee);
+	color: var(--md-sys-color-primary, #6200ee);
 
 	&:hover,
 	&:focus,
 	&:visited {
-		color: var(--mdc-theme-primary, #6200ee);
+		color: var(--md-sys-color-primary, #6200ee);
 	}
 
 	&::before,
 	&::after {
-		background-color: var(--mdc-theme-on-surface, #000);
+		background-color: var(--md-sys-color-on-surface, #000);
 	}
 }
 
 .mdc-switch:not(.mdc-switch--checked)
 .mdc-switch__track {
-	background-color: var(--mdc-theme-on-surface, #000);
+	background-color: var(--md-sys-color-on-surface, #000);
 }
 
 .mdc-tab-bar {
-	background-color: var(--mdc-theme-background, var(--mdc-theme-surface, #fff));
+	background-color: var(--md-sys-color-background, var(--md-sys-color-surface, #fff));
 }
 
 .mdc-tab {
 
 	& .mdc-tab__text-label {
-		color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), 0.6);
+		color: var(--md-sys-color-on-surface, #000);
 	}
 
 	& .mdc-tab__icon {
-		color: rgba(var(--mdc-theme-on-surface-rgb, 0, 0, 0), 0.5);
+		color: var(--md-sys-color-on-surface, #000);
 	}
 
 	&--active {
 
 		& .mdc-tab__icon,
 		& .mdc-tab__text-label {
-			color: var(--mdc-theme-primary, #6200ee);
+			color: var(--md-sys-color-primary, #6200ee);
 		}
 	}
 }
@@ -468,7 +468,7 @@
 	}
 
 	.material-icons {
-		color: var(--mdc-theme-primary, "#6200ee");
+		color: var(--md-sys-color-primary, "#6200ee");
 
 		&.md-18 {
 			font-size: 18px;

diff --git a/plugin/assets/css/src/customize-controls.css b/plugin/assets/css/src/customize-controls.css
@@ -269,8 +269,8 @@
 }
 
 #material-library-preview {
-	background: var(--mdc-theme-background, #fff);
-	color: var(--mdc-theme-on-background, #000);
+	background: var(--md-sys-color-background, #fff);
+	color: var(--md-sys-color-on-background, #000);
 	padding: 30px 50px;
 
 	button {

diff --git a/plugin/assets/css/src/front-end.css b/plugin/assets/css/src/front-end.css
@@ -28,4 +28,5 @@
 @import "../../src/block-editor/blocks/contact-form/inner-blocks/common/style.css";
 @import "../../src/block-editor/blocks/card/style.css";
 @import "./block/style/masonry.css";
-@import "overrides.css";
+@import "./overrides.css";
+@import "./tokens/index.css";
diff --git a/plugin/assets/css/src/gsm/base.css b/plugin/assets/css/src/gsm/base.css
@@ -30,8 +30,8 @@
 	}
 
 	& .mdc-button {
-		--mdc-theme-primary: var(--material-design-gsm-primary-color);
-		--mdc-theme-on-primary: var(--material-design-gsm-primary-text);
+		--md-sys-color-primary: var(--material-design-gsm-primary-color);
+		--md-sys-color-on-primary: var(--material-design-gsm-primary-text);
 	}
 
 	& h1,

diff --git a/plugin/assets/css/src/gsm/content.css b/plugin/assets/css/src/gsm/content.css
@@ -18,7 +18,7 @@
 	padding-right: 1rem;
 
 	& .mdc-circular-progress {
-		--mdc-theme-primary: #fff;
+		--md-sys-color-primary: #fff;
 	}
 
 	& .mdc-button.is-loading {

diff --git a/plugin/assets/css/src/overrides.css b/plugin/assets/css/src/overrides.css
@@ -32,17 +32,19 @@
 	&:hover,
 	&:focus {
 		background-color: transparent !important;
-		color: var(--mdc-theme-primary, #6200ee) !important;
+		color: var(--md-sys-color-primary, #6200ee) !important;
 		text-decoration: none !important;
 	}
 
 	&--raised:not(:disabled),
 	&--unelevated:not(:disabled) {
+		background-color: var(--md-sys-color-primary);
+		color: var(--md-sys-color-on-primary);
 
 		&:hover,
 		&:focus {
-			background-color: var(--mdc-theme-primary, #6200ee) !important;
-			color: var(--mdc-theme-on-primary, #fff) !important;
+			background-color: var(--md-sys-color-primary, #6200ee) !important;
+			color: var(--md-sys-color-on-primary, #fff) !important;
 		}
 	}
 
@@ -58,14 +60,14 @@
 
 .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(--md-sys-color-on-surface, #000) !important;
 }
 
 .mdc-icon-button {
 
 	&::before,
 	&::after {
-		background-color: var(--mdc-theme-on-surface, #000) !important;
+		background-color: var(--md-sys-color-on-surface, #000) !important;
 	}
 
 	&:hover,
@@ -77,9 +79,9 @@
 
 /* Data Table */
 .mdc-data-table {
-	background-color: var(--mdc-theme-surface, #fff) !important;
+	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(--md-sys-color-on-surface, #000) !important;
 
 	& thead {
 		border: none !important;
@@ -93,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(--md-sys-color-on-surface, #000) !important;
 	border-top-width: 1px !important;
 	border-top-style: solid !important;
 }
@@ -141,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(--md-sys-color-on-surface, #000) !important;
 	margin: 0 !important;
 }
diff --git a/plugin/assets/css/src/settings/base.css b/plugin/assets/css/src/settings/base.css
@@ -26,8 +26,8 @@
 	--material-design-settings-error-color: #dc3232;
 
 	& .mdc-button {
-		--mdc-theme-primary: var(--material-design-settings-primary-color);
-		--mdc-theme-on-primary: var(--material-design-settings-primary-text);
+		--md-sys-color-primary: var(--material-design-settings-primary-color);
+		--md-sys-color-on-primary: var(--material-design-settings-primary-text);
 	}
 
 	& h1,
@@ -50,7 +50,7 @@
 	}
 
 	& .mdc-button--raised .mdc-circular-progress {
-		--mdc-theme-primary: #fff;
+		--md-sys-color-primary: #fff;
 	}
 
 	& .mdc-button.is-loading {