index.css

.k-colors-contrast{position:relative;width:calc(2.25rem + 1px)}.k-colors-contrast:before{content:"";position:absolute;left:-1.5rem;width:1rem;height:1rem;border:2px solid var(--color-contrast-dark-background);border-radius:50%;background-image:linear-gradient(to right,var(--color-background) 0%,var(--color-background) 50%,var(--color-contrast-dark-background) 50%)}.k-colors-contrast .k-colors-color:before{content:attr(data-rating);position:absolute;top:-1.725rem;right:0;color:var(--color-contrast-dark);font-size:.75rem;font-weight:600;white-space:nowrap}.k-colors-contrast .k-input-element{display:block}.k-colors-units{display:flex;grid-column-start:2;min-width:0;padding:0 .25rem 0 .5rem}.k-colors-label{display:flex;flex:1 1 4rem;flex-wrap:nowrap;align-items:center;min-width:0;height:2.25rem;color:var(--color-border);font-size:.875rem}.k-colors-label:focus-within{color:var(--color-border)}.k-colors-label span{flex:0 0 .9rem}.k-colors-input{flex:0 0 3rem;min-width:0;height:1.75rem;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;font-size:1rem;border:none;outline:none;background:transparent}.k-colors-input:focus,.k-colors-input:active{color:var(--color-focus)}.k-colors-input.is-hex{flex-basis:5rem}.k-colors-opacity{display:flex;flex-wrap:nowrap;align-items:center;position:relative}.k-colors-opacity:before{content:"";position:absolute;top:.25rem;left:0;bottom:.25rem;border-left:1px solid var(--color-border)}.k-colors-input.is-alpha{flex-basis:2.25rem;min-width:0;margin-left:.25rem;text-align:right}.k-colors-opacity span{width:1rem;margin-left:.1rem;color:var(--color-border)}.k-colors-preview{display:block;flex:0 0 2.25rem;width:2.25rem;height:2.25rem;margin-right:.5rem;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLW1pdGVybGltaXQ9IjIiIGNsaXAtcnVsZT0iZXZlbm9kZCIgdmlld0JveD0iMCAwIDEyIDEyIj4KICA8cGF0aCBmaWxsPSJub25lIiBkPSJNMCAwaDEydjEySDB6Ii8+CiAgPHBhdGggZmlsbD0iI2ViZWJlYiIgZD0iTTAgMGg2djZIMHpNNS45NTIgNmg2djZoLTZ6Ii8+Cjwvc3ZnPgo=);background-size:.75rem .75rem}.k-colors-color{display:block;overflow:hidden;width:2.25rem;height:2.25rem;border-right:1px solid var(--color-border);border-radius:.2rem}.k-colors-preview .k-colors-color{border-radius:.2rem 0 0 .2rem}.k-colors-picker{width:2.25rem;height:2.25rem;visibility:hidden}.k-colors-field .k-dropdown{grid-column-start:4}.k-colors-field .k-dropdown-item{justify-content:flex-end;padding-left:.5rem}.k-colors-field .k-dropdown-item.is-current:before{content:"\2713";margin-right:.5rem}.k-colors-space-button{height:2.25rem;padding:0 .75rem}.k-colors-field{--color-contrast-dark: #16171a;--color-contrast-dark-background: #2d2f36}.k-colors-field.shows-contrast{display:grid;grid-gap:0 1.9rem;grid-template-columns:auto 2.25rem}.k-colors-field.shows-contrast .k-input{grid-row-start:2}.k-colors-field .k-input-element{display:grid;grid-template-columns:2.25rem auto 3.5rem 2.25rem}.k-colors-field .k-field-footer{grid-row-start:3;grid-column-end:-1;grid-column-start:1}.k-colors-structure-preview{display:block;width:1.5rem;height:1.5rem;margin:0 .75rem}