Add chip atom

src/main/style/atom/_atom.scss

@@ -1,4 +1,5 @@
 @import 'button/button';
+@import 'chip/chip';
 @import 'icon/icon';
 @import 'input/input';
 @import 'label/label';

src/main/style/atom/atom.pug

@@ -14,6 +14,8 @@ block content
       include /documentation/atomic-design/quote/atom
     .tikui-vertical-spacing--line
       include:componentDoc(height=100) button/button.md
+    .tikui-vertical-spacing--line
+      include:componentDoc(height=340) chip/chip.md
     .tikui-vertical-spacing--line
       include:componentDoc(height=70) icon/icon.md
     .tikui-vertical-spacing--line

src/main/style/atom/chip/_chip.scss

@@ -0,0 +1,34 @@
+.jhlite-chip {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  border: 1px solid $jhlite-global-color-fill-primary-dark;
+  border-radius: 6px;
+  background: $jhlite-global-color-fill-light;
+  text-align: center;
+
+  &--title {
+    padding-top: 6px;
+    padding-bottom: 6px;
+    text-align: center;
+  }
+
+  &--description {
+    border-top: 1px dotted $jhlite-global-color-fill-primary-dark;
+    padding-top: 6px;
+    padding-bottom: 6px;
+    font-size: 0.8em;
+  }
+
+  &.-selectable {
+    cursor: pointer;
+  }
+
+  &.-valid-highlighted {
+    animation: $jhlite-valid-highlight-animation;
+  }
+
+  &.-invalid-highlighted {
+    animation: $jhlite-invalid-highlight-animation;
+  }
+}

src/main/style/atom/chip/chip.code.pug

@@ -0,0 +1,9 @@
+include chip.mixin.pug
+
++jhlite-chip
++jhlite-chip({selectable: true})
++jhlite-chip({selectable: true, validHighlighted: true})
++jhlite-chip({selectable: true, invalidHighlighted: true})
++jhlite-chip({selectable: true, extended: true})
++jhlite-chip({selectable: true, validHighlighted: true, extended: true})
++jhlite-chip({selectable: true, invalidHighlighted: true, extended: true})

src/main/style/atom/chip/chip.md

@@ -0,0 +1 @@
+## Chip

src/main/style/atom/chip/chip.mixin.pug

@@ -0,0 +1,9 @@
+mixin jhlite-chip(options)
+  -const { selectable: isSelectable, validHighlighted: isValidHighlighted, invalidHighlighted: isInvalidHighlighted, extended: isExtended } = options || {};
+  -const selectableClass = isSelectable ? '-selectable' : null;
+  -const validHighlightedClass = isValidHighlighted ? '-valid-highlighted' : null;
+  -const invalidHighlightedClass = isInvalidHighlighted ? '-invalid-highlighted' : null;
+  .jhlite-chip(class=[selectableClass, validHighlightedClass, invalidHighlightedClass])
+    span.jhlite-chip--title Chip title
+    if (isExtended)
+      .jhlite-chip--description Chip description

src/main/style/atom/chip/chip.render.pug

@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include chip.code.pug

src/main/style/token/_colors.scss

@@ -29,3 +29,43 @@ $jhlite-global-color-link-light: $jhlite-global-color-light !default;
 $jhlite-global-color-link-light-hover: $jhlite-global-color-primary !default;
 $jhlite-global-color-success: #480 !default;
 $jhlite-global-color-error: #902 !default;
+$jhlite-valid-highlight-animation: valid-highlight-animation 2s infinite;
+$jhlite-invalid-highlight-animation: invalid-highlight-animation 2s infinite;
+$jhlite-valid-highlight-start-color: #3ebf5a;
+$jhlite-valid-highlight-end-color: $jhlite-global-color-success;
+$jhlite-invalid-highlight-start-color: #bf3e3e;
+$jhlite-invalid-highlight-end-color: $jhlite-global-color-error;
+
+@keyframes valid-highlight-animation {
+  0% {
+    background-color: $jhlite-valid-highlight-start-color;
+    stroke: $jhlite-valid-highlight-start-color;
+  }
+
+  50% {
+    background-color: $jhlite-valid-highlight-end-color;
+    stroke: $jhlite-valid-highlight-end-color;
+  }
+
+  100% {
+    background-color: $jhlite-valid-highlight-start-color;
+    stroke: $jhlite-valid-highlight-start-color;
+  }
+}
+
+@keyframes invalid-highlight-animation {
+  0% {
+    background-color: $jhlite-invalid-highlight-start-color;
+    stroke: $jhlite-invalid-highlight-start-color;
+  }
+
+  50% {
+    background-color: $jhlite-invalid-highlight-end-color;
+    stroke: $jhlite-invalid-highlight-end-color;
+  }
+
+  100% {
+    background-color: $jhlite-invalid-highlight-start-color;
+    stroke: $jhlite-invalid-highlight-start-color;
+  }
+}