Implemented: External framework for bagde color (#109)

modules/internal/color-picker/color-picker.min.css

@@ -0,0 +1,151 @@
+.color-picker,
+.color-picker *,
+.color-picker ::after,
+.color-picker ::before,
+.color-picker::after,
+.color-picker::before {
+    box-sizing: border-box
+}
+
+.color-picker {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    box-shadow: 1px 3px 6px rgba(0, 0, 0, .5)
+}
+
+.color-picker>div {
+    display: flex;
+    height: 10em;
+    border: 1px solid #000;
+    color: #000
+}
+
+.color-picker>div * {
+    border-color: inherit;
+    color: inherit
+}
+
+.color-picker i {
+    font: inherit;
+    font-size: 12px
+}
+
+.color-picker\:a,
+.color-picker\:h,
+.color-picker\:sv {
+    background-size: 100% 100%;
+    position: relative
+}
+
+.color-picker\:a,
+.color-picker\:h {
+    width: 1.5em;
+    border-left: 1px solid;
+    cursor: ns-resize;
+    overflow: hidden
+}
+
+.color-picker\:a div,
+.color-picker\:h div,
+.color-picker\:sv div {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0
+}
+
+.color-picker\:a i,
+.color-picker\:h i {
+    display: block;
+    height: .5em;
+    position: absolute;
+    top: -.25em;
+    right: 0;
+    left: 0;
+    z-index: 2
+}
+
+.color-picker\:a i::before,
+.color-picker\:h i::before {
+    display: block;
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border: .25em solid;
+    border-top-color: transparent;
+    border-bottom-color: transparent
+}
+
+.color-picker\:sv {
+    width: 10em;
+    cursor: crosshair;
+    overflow: hidden
+}
+
+.color-picker\:sv i {
+    display: block;
+    width: .75em;
+    height: .75em;
+    position: absolute;
+    top: -.375em;
+    right: -.375em;
+    z-index: 2
+}
+
+.color-picker\:sv i::before {
+    display: block;
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    border: 1px solid #fff;
+    border-radius: 100%;
+    box-shadow: 0 0 2px #000
+}
+
+.color-picker\:a div {
+    z-index: 2
+}
+
+.color-picker\:a div+div {
+    background-image: linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd 100%), linear-gradient(45deg, #ddd 25%, #fff 25%, #fff 75%, #ddd 75%, #ddd 100%);
+    background-size: .5em .5em;
+    background-position: 0 0, .25em .25em;
+    z-index: 1
+}
+
+.color-picker\:h div {
+    background-image: linear-gradient(to top, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red 100%)
+}
+
+.color-picker\:sv div+div {
+    background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0))
+}
+
+.color-picker\:sv div+div+div {
+    background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0))
+}
+
+.color-picker\:a,
+.color-picker\:h,
+.color-picker\:sv {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-tap-highlight-color: transparent
+}
+
+.color-picker\:a {
+    display: none;
+}

modules/internal/color-picker/credits

@@ -0,0 +1,8 @@
+Color Picker
+
+
+Taufik Nurrohman
+https://github.com/taufik-nurrohman/color-picker
+https://taufik-nurrohman.js.org/color-picker/
+
+MIT License (MIT)