feat: add propertylist shortcode (#414)

src/sass/_chroma_base.scss

@@ -5,7 +5,7 @@
   .chroma code {
     background-color: var(--code-background);
     display: block;
-    line-height: 1.45;
+    line-height: 1.45em;
     font-size: 0.85em;
     border-radius: $border-radius;
   }

src/sass/_color_mode.scss

@@ -42,6 +42,7 @@
 
   .gdoc-markdown {
     .gdoc-hint,
+    .gdoc-props__tag,
     .admonitionblock,
     .gdoc-post__codecopy--success {
       filter: none;
@@ -98,6 +99,7 @@
 
   .gdoc-markdown {
     .gdoc-hint,
+    .gdoc-props__tag,
     .admonitionblock,
     .gdoc-post__codecopy--success {
       filter: saturate(2.5) brightness(0.85);

src/sass/_markdown.scss

@@ -49,7 +49,7 @@
   &__link {
     text-decoration: none;
     border-bottom: $border-1 solid transparent;
-    line-height: 1em;
+    line-height: normal;
 
     &:hover {
       text-decoration: underline;

src/sass/_shortcodes.scss

@@ -181,3 +181,44 @@
 .gdoc-mermaid {
   font-family: "Liberation Sans", sans-serif;
 }
+
+// {{< propertylist >}}
+.gdoc-props {
+  &__title,
+  &__default {
+    font-family: "Liberation Mono", monospace;
+  }
+
+  &__meta {
+    line-height: normal;
+    margin-bottom: $padding-8;
+    > span {
+      margin-bottom: $padding-4;
+      &:not(:last-child) {
+        margin-right: $padding-8;
+      }
+    }
+  }
+
+  @each $name, $color in $hint-colors {
+    &__tag.#{$name} {
+      border-color: scale-color($color, $lightness: 90%, $saturation: -30%);
+      background-color: scale-color($color, $lightness: 95%, $saturation: -30%);
+    }
+  }
+
+  &__tag {
+    font-size: $font-size-14;
+    font-weight: normal;
+    background-color: $gray-100;
+    border: $border-1 solid $gray-200;
+    border-radius: $border-radius;
+    padding: $padding-2 $padding-4;
+    color: $body-font-color;
+  }
+
+  &__default {
+    font-style: italic;
+    font-size: $font-size-14;
+  }
+}