feat(Chip): add new MaterialChip component with styles and functionality

.vitepress/theme/components/Chip.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+interface Props {
+  shape?: "round" | "square";
+  color?: "elevated" | "filled" | "tonal" | "outlined" | "standard" | "text";
+  icon?: string;
+  href?: string;
+  target?: "_blank" | "_self" | "_parent" | "_top";
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  shape: "round",
+  color: "filled",
+  target: "_blank",
+});
+</script>
+
+<template>
+  <component
+    :is="href ? 'a' : 'button'"
+    :href="href"
+    class="MaterialChip"
+    :class="[props.shape, props.color, props.icon ? 'icon' : '']"
+    :target="props.target"
+  >
+    <span v-if="props.icon">
+      {{ props.icon }}
+    </span>
+    <slot></slot>
+  </component>
+</template>
+
+<style lang="scss" scoped>
+@use "sass:meta";
+@include meta.load-css("../styles/components/Chip");
+</style>

.vitepress/theme/index.ts

@@ -11,13 +11,14 @@ import ArticleMasonry from "./components/ArticleMasonry.vue";
 import Button from "./components/Button.vue";
 import ButtonGroup from "./components/ButtonGroup.vue";
 import Card from "./components/Card.vue";
+import Chip from "./components/Chip.vue";
 import Footer from "./components/Footer.vue";
 import Header from "./components/Header.vue";
 import ImageViewer from "./components/ImageViewer.vue";
+import NavBar from "./components/NavBar.vue";
 import PageIndicator from "./components/PageIndicator.vue";
 import PrevNext from "./components/PrevNext.vue";
 import ScrollToTop from "./components/ScrollToTop.vue";
-import NavBar from "./components/NavBar.vue";
 
 // Styles
 import "./styles/main.scss";
@@ -40,6 +41,7 @@ export default {
     app.component("ImageViewer", ImageViewer);
     app.component("MaterialButton", Button);
     app.component("MaterialCard", Card);
+    app.component("MaterialChip", Chip);
     app.component("NavBar", NavBar);
     app.component("PageIndicator", PageIndicator);
     app.component("PrevNext", PrevNext);

.vitepress/theme/styles/components/Chip.scss

@@ -0,0 +1,77 @@
+@use "../mixin";
+
+.MaterialChip {
+  @include mixin.typescale-style("label-large");
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 8px;
+
+  position: relative;
+
+  height: 32px;
+
+  padding-inline: 12px;
+
+  text-decoration: none !important;
+  vertical-align: middle;
+
+  border-color: transparent;
+  border-radius: var(--md-sys-shape-corner-small);
+  border-style: solid;
+  border-width: 1px;
+
+  background-color: transparent;
+
+  cursor: pointer;
+  overflow: hidden;
+  transition:
+    border-radius var(--md-sys-motion-spring-fast-spatial-duration) var(--md-sys-motion-spring-fast-spatial),
+    background-color var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect);
+  user-select: none;
+  -moz-user-select: none;
+
+  span {
+    @include mixin.material-symbols($size: 20);
+  }
+
+  &:active {
+    border-radius: var(--md-sys-shape-corner-medium);
+  }
+
+  &.icon {
+    padding-inline: 8px 12px;
+  }
+
+  &.elevated {
+    color: var(--md-sys-color-primary);
+
+    background-color: var(--md-sys-color-surface-container-low);
+
+    box-shadow: 0px 1px 6px -3px var(--md-sys-color-shadow);
+  }
+
+  &.filled {
+    color: var(--md-sys-color-on-primary);
+
+    background-color: var(--md-sys-color-primary);
+  }
+
+  &.tonal {
+    color: var(--md-sys-color-on-secondary-container);
+
+    background-color: var(--md-sys-color-secondary-container);
+  }
+
+  &.outlined {
+    color: var(--md-sys-color-on-surface-variant);
+
+    border-color: var(--md-sys-color-outline-variant);
+  }
+
+  &.standard,
+  &.text {
+    color: var(--md-sys-color-primary);
+  }
+}