feat: add anatomy icons package

[anubra266]

Add Anatomy icons package

To see preview, start react examples server, and navigate to /anatomy

We first grab the svg from figma.

Zag's current default green palette is:

const defaultPalette = {
  0: "white",
  1: "#2CFF80", //accentColor
  2: "#2C7A51",
  3: "#16402D",
  4: "#1C4D37",
  5: "#287753",
  6: "#1F8B56",
  7: "#2AB26B",
  8: "#1E6943",
  9: "#C1FFDF",
  10: "#41B883",
  11: "#299464",
  12: "#2AB36B",
  13: "#9FFFCD",
  14: "#0E432B",
}

Wrote some scripts to help me work faster.

We can find the colors in the svg code with this:

function findColors(code) {
  const pattern = /"#.*?"/g;
  const matches = code.match(pattern) || [];
  return Array.from(new Set(matches.map((match) => match.slice(1, -1))));
}

We then check for the colors that are not yet defined in the palette with this:

function findUndefinedColors(codeString) {
  const colors = findColors(codeString);
  return colors.filter((c) => !Object.values(defaultPalette).includes(c));
}

We add those colors to the palette.

We're able to find the relationship between the accentColor and it's accompanying palette with this tool
http://ethanmuller.github.io/sass-color-function-generator-thing/, so we use it to find the relationship for any new
colors we just added, then we define the relationship with color2k E.g.

{
    14: darken(desaturate(adjustHue(this.accentColor, 9), 0.35), 0.43),
}

Lastly, to save time, you can replace the colors in your svg code with the dynamic relationships using this script:

function replaceColors(code) {
  //We've defined this above
  const colors = findColors(code)

  const regex = new RegExp(
    colors
      .map((c) => `"${c}"`)
      .map((str) => str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"))
      .join("|"),
    "g",
  )

  return code
    .replace(regex, (c) => {
      const num = Object.entries(defaultPalette).find((cc) => `"${cc[1]}"` === c)
      return `{palette[${num?.[0]}]}`
    })
    .replaceAll(`"white"`, `{palette[0]}`)
}

More...just because it looks good

[changeset-bot]

🦋 Changeset detected

Latest commit: 62c21a2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 64 packages

Name	Type
@zag-js/anatomy-icons	Patch
@zag-js/anatomy	Patch
@zag-js/core	Patch
@zag-js/docs	Patch
@zag-js/react	Patch
@zag-js/solid	Patch
@zag-js/vue	Patch
@zag-js/accordion	Patch
@zag-js/avatar	Patch
@zag-js/carousel	Patch
@zag-js/checkbox	Patch
@zag-js/color-picker	Patch
@zag-js/combobox	Patch
@zag-js/date-picker	Patch
@zag-js/dialog	Patch
@zag-js/editable	Patch
@zag-js/file-upload	Patch
@zag-js/hover-card	Patch
@zag-js/menu	Patch
@zag-js/number-input	Patch
@zag-js/pagination	Patch
@zag-js/pin-input	Patch
@zag-js/popover	Patch
@zag-js/presence	Patch
@zag-js/pressable	Patch
@zag-js/radio-group	Patch
@zag-js/range-slider	Patch
@zag-js/rating-group	Patch
@zag-js/select	Patch
@zag-js/slider	Patch
@zag-js/splitter	Patch
@zag-js/switch	Patch
@zag-js/tabs	Patch
@zag-js/tags-input	Patch
@zag-js/toast	Patch
@zag-js/toggle-group	Patch
@zag-js/toggle	Patch
@zag-js/tooltip	Patch
@zag-js/store	Patch
@zag-js/types	Patch
@zag-js/aria-hidden	Patch
@zag-js/auto-resize	Patch
@zag-js/color-utils	Patch
@zag-js/utils	Patch
@zag-js/date-utils	Patch
@zag-js/dismissable	Patch
@zag-js/dom-event	Patch
@zag-js/dom-query	Patch
@zag-js/element-rect	Patch
@zag-js/element-size	Patch
@zag-js/focus-scope	Patch
@zag-js/focus-visible	Patch
@zag-js/form-utils	Patch
@zag-js/interact-outside	Patch
@zag-js/live-region	Patch
@zag-js/mutation-observer	Patch
@zag-js/number-utils	Patch
@zag-js/numeric-range	Patch
@zag-js/popper	Patch
@zag-js/rect-utils	Patch
@zag-js/remove-scroll	Patch
@zag-js/tabbable	Patch
@zag-js/text-selection	Patch
@zag-js/visually-hidden	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
zag-nextjs	✅ Ready (Inspect)	Visit Preview	Jul 26, 2023 1:25pm
zag-solid	✅ Ready (Inspect)	Visit Preview	Jul 26, 2023 1:25pm
zag-vue	✅ Ready (Inspect)	Visit Preview	Jul 26, 2023 1:25pm
zag-website	✅ Ready (Inspect)	Visit Preview	Jul 26, 2023 1:25pm