@infinityfx/fluid/dist/components/display/swatch.js

React UI library, using zero-runtime CSS-in-JS.

import{jsx as r}from"react/jsx-runtime";import{combineClasses as e,classes as a}from"../../core/utils.js";import{createStyles as o}from"../../core/style.js";const s=o("swatch",{".swatch":{position:"relative",width:"2em",height:"2em",border:"solid 1px var(--f-clr-fg-200)",borderRadius:"var(--f-radius-sml)",overflow:"hidden",background:"linear-gradient(45deg, var(--f-clr-grey-100) 25%, transparent 25%, transparent 75%, var(--f-clr-grey-100) 75%, var(--f-clr-grey-100) 100%), linear-gradient(45deg, var(--f-clr-grey-100) 25%, var(--f-clr-bg-100) 25%, var(--f-clr-bg-100) 75%, var(--f-clr-grey-100) 75%, var(--f-clr-grey-100) 100%)",backgroundPosition:"0 0, 1em 1em",backgroundSize:"2em 2em",backgroundRepeat:"repeat",display:"flex"},".color":{height:"100%",flexGrow:1},".swatch.round":{borderRadius:"999px"},".s__xsm":{fontSize:"var(--f-font-size-xxs)"},".s__sml":{fontSize:"var(--f-font-size-xsm)"},".s__med":{fontSize:"var(--f-font-size-sml)"},".s__lrg":{fontSize:"var(--f-font-size-med)"}});function t({cc:o={},size:t="med",round:i=!1,color:n=["transparent"],...c}){const l=e(s,o);return n=Array.isArray(n)?n:[n],r("div",{...c,className:a(l.swatch,l[`s__${t}`],i&&l.round,c.className),children:n.map((e=>r("div",{className:l.color,style:{backgroundColor:e}},e)))})}export{t as default};
//# sourceMappingURL=swatch.js.map