Add shape tokens

Author: Mario Aguiar

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

@@ -16,3 +16,4 @@
 
 @import "./palette.css";
 @import "./colors.css";
+@import "./shape.css";

plugin/assets/css/src/tokens/shape.css

@@ -0,0 +1,66 @@
+/**
+ * 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-shape-corner-full-family: 3px;
+    --md-sys-shape-corner-extra-large-top-family: 1px;
+    --md-sys-shape-corner-extra-large-top: 0px;
+    --md-sys-shape-corner-extra-large-top-top-left: 28px;
+    --md-sys-shape-corner-extra-large-top-top-right-unit: 1px;
+    --md-sys-shape-corner-extra-large-top-top-right: 28px;
+    --md-sys-shape-corner-extra-large-family: 1px;
+    --md-sys-shape-corner-extra-large-unit: 1px;
+    --md-sys-shape-corner-extra-large: 28px;
+    --md-sys-shape-corner-large-top-family: 1px;
+    --md-sys-shape-corner-large-top-unit: 1px;
+    --md-sys-shape-corner-large-top: 0px;
+    --md-sys-shape-corner-large-top-top-left-unit: 1px;
+    --md-sys-shape-corner-large-top-top-left: 16px;
+    --md-sys-shape-corner-large-top-top-right-unit: 1px;
+    --md-sys-shape-corner-large-top-top-right: 16px;
+    --md-sys-shape-corner-large-end-family: 1px;
+    --md-sys-shape-corner-large-end-unit: 1px;
+    --md-sys-shape-corner-large-end: 0px;
+    --md-sys-shape-corner-large-end-top-right-unit: 1px;
+    --md-sys-shape-corner-large-end-top-right: 16px;
+    --md-sys-shape-corner-large-end-bottom-right-unit: 1px;
+    --md-sys-shape-corner-large-end-bottom-right: 16px;
+    --md-sys-shape-corner-large-family: 1px;
+    --md-sys-shape-corner-large-unit: 1px;
+    --md-sys-shape-corner-large: 16px;
+    --md-sys-shape-corner-medium-family: 1px;
+    --md-sys-shape-corner-medium-unit: 1px;
+    --md-sys-shape-corner-medium: 12px;
+    --md-sys-shape-corner-small-family: 1px;
+    --md-sys-shape-corner-small-unit: 1px;
+    --md-sys-shape-corner-small: 8px;
+    --md-sys-shape-corner-extra-small-top-family: 1px;
+    --md-sys-shape-corner-extra-small-top-unit: 1px;
+    --md-sys-shape-corner-extra-small-top: 0px;
+    --md-sys-shape-corner-extra-small-top-top-left-unit: 1px;
+    --md-sys-shape-corner-extra-small-top-top-left: 4px;
+    --md-sys-shape-corner-extra-small-top-top-right-unit: 1px;
+    --md-sys-shape-corner-extra-small-top-top-right: 4px;
+    --md-sys-shape-corner-extra-small-family: 1px;
+    --md-sys-shape-corner-extra-small-unit: 1px;
+    --md-sys-shape-corner-extra-small: 4px;
+    --md-sys-shape-corner-none-family: 1px;
+    --md-sys-shape-corner-none-unit: 1px;
+    --md-sys-shape-corner-none: 0px;
+    --md-sys-shape-small: var(--md-sys-shape-corner-small);
+    --md-sys-shape-medium: var(--md-sys-shape-corner-medium);
+    --md-sys-shape-large: var(--md-sys-shape-corner-large);
+}