.swatch-box{display:flex;width:100%;flex-wrap:wrap}.swatch-item{flex:1;padding:5px}.swatch{width:75px;height:75px;border:1px solid}.swatch.white{background-color:#fff}.swatch.white .code{content:#fff}.swatch.gray-100{background-color:#f7f7fc}.swatch.gray-100 .code{content:#f7f7fc}.swatch.gray-200{background-color:#f3f3f9}.swatch.gray-200 .code{content:#f3f3f9}.swatch.gray-300{background-color:#e9e9f2}.swatch.gray-300 .code{content:#e9e9f2}.swatch.gray-400{background-color:#dfdfeb}.swatch.gray-400 .code{content:#dfdfeb}.swatch.gray-500{background-color:#9e9fb4}.swatch.gray-500 .code{content:#9e9fb4}.swatch.gray-600{background-color:#737491}.swatch.gray-600 .code{content:#737491}.swatch.gray-700{background-color:#5a5b75}.swatch.gray-700 .code{content:#5a5b75}.swatch.gray-800{background-color:#4a4b65}.swatch.gray-800 .code{content:#4a4b65}.swatch.gray-900{background-color:#37384e}.swatch.gray-900 .code{content:#37384e}.swatch.black{background-color:#000}.swatch.black .code{content:#000}.swatch.primary{background-color:#766df4}.swatch.primary .code{content:#766df4}.swatch.secondary{background-color:#f7f7fc}.swatch.secondary .code{content:#f7f7fc}.swatch.info{background-color:#6a9bf4}.swatch.info .code{content:#6a9bf4}.swatch.success{background-color:#16c995}.swatch.success .code{content:#16c995}.swatch.warning{background-color:#ffb15c}.swatch.warning .code{content:#ffb15c}.swatch.danger{background-color:#f74f78}.swatch.danger .code{content:#f74f78}.swatch.light{background-color:#fff}.swatch.light .code{content:#fff}.swatch.dark{background-color:#37384e}.swatch.dark .code{content:#37384e}.swatch.gradient-from-color{background-color:#766df4}.swatch.gradient-from-color .code{content:#766df4}.swatch.gradient-to-color{background-color:#6a9bf4}.swatch.gradient-to-color .code{content:#6a9bf4}.swatch.user-selection-color{background-color:rgba(118,109,244,.22)}.swatch.user-selection-color .code{content:rgba(118,109,244,.22)}