Add elevation and opacity tokens

Author: Mario Aguiar

plugin/assets/css/src/tokens/elevation.css

@@ -0,0 +1,42 @@
+/**
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:root {
+	--md-sys-elevation-level5-value: 12px;
+    --md-sys-elevation-level5-unit: 1px;
+    --md-sys-elevation-level5: 12px;
+    --md-sys-elevation-level4-value: 8px;
+    --md-sys-elevation-level4-unit: 1px;
+    --md-sys-elevation-level4: 8px;
+    --md-sys-elevation-level3-value: 6px;
+    --md-sys-elevation-level3-unit: 1px;
+    --md-sys-elevation-level3: 6px;
+    --md-sys-elevation-level2-value: 3px;
+    --md-sys-elevation-level2-unit: 1px;
+    --md-sys-elevation-level2: 3px;
+    --md-sys-elevation-level1-value: 1px;
+    --md-sys-elevation-level1-unit: 1px;
+    --md-sys-elevation-level1: 1px;
+    --md-sys-elevation-level0-value: 0px;
+    --md-sys-elevation-level0-unit: 1px;
+    --md-sys-elevation-level0: 0px;
+    --md-sys-elevation-0: 0px 0px 0px 0px rgba(var(--md-sys-color-shadow-rgb), .2), 0px 0px 0px 0px rgba(var(--md-sys-color-shadow-rgb), .14), 0px 0px 0px 0px rgba(var(--md-sys-color-shadow-rgb), .12);
+    --md-sys-elevation-1: 0px 3px 1px -2px rgba(var(--md-sys-color-shadow-rgb), .2), 0px 2px 2px 0px rgba(var(--md-sys-color-shadow-rgb), .14), 0px 1px 5px 0px rgba(var(--md-sys-color-shadow-rgb), .12);
+    --md-sys-elevation-2: 0px 2px 4px -1px rgba(var(--md-sys-color-shadow-rgb), .2), 0px 4px 5px 0px rgba(var(--md-sys-color-shadow-rgb), .14), 0px 1px 10px 0px rgba(var(--md-sys-color-shadow-rgb), .12);
+    --md-sys-elevation-3: 0px 5px 5px -3px rgba(var(--md-sys-color-shadow-rgb), .2), 0px 8px 10px 1px rgba(var(--md-sys-color-shadow-rgb), .14), 0px 3px 14px 2px rgba(var(--md-sys-color-shadow-rgb), .12);
+    --md-sys-elevation-4: 0px 5px 5px -3px rgba(var(--md-sys-color-shadow-rgb), .2), 0px 8px 10px 1px rgba(var(--md-sys-color-shadow-rgb), .14), 0px 3px 14px 2px rgba(var(--md-sys-color-shadow-rgb), .12);
+    --md-sys-elevation-5: 0px 8px 10px -6px rgba(var(--md-sys-color-shadow-rgb), .2), 0px 16px 24px 2px rgba(var(--md-sys-color-shadow-rgb), .14), 0px 6px 30px 5px rgba(var(--md-sys-color-shadow-rgb), .12)
+}

plugin/assets/css/src/tokens/index.css

@@ -17,3 +17,5 @@
 @import "./palette.css";
 @import "./colors.css";
 @import "./shape.css";
+@import "./opacity.css";
+@import "./elevation.css";

plugin/assets/css/src/tokens/opacity.css

@@ -0,0 +1,22 @@
+/**
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:root {
+	--md-sys-state-dragged-state-layer-opacity: 0.16;
+    --md-sys-state-pressed-state-layer-opacity: 0.12;
+    --md-sys-state-focus-state-layer-opacity: 0.12;
+    --md-sys-state-hover-state-layer-opacity: 0.08
+}