figma-kit 1.0.0-beta.1 → 1.0.0-beta.11

package/dist/styles.css

@@ -5,28 +5,28 @@
   --font-family-monospace: 'Roboto Mono', monospace;
 }
 :root {
-  --space-0: 0px;
-  --space-px: 1px;
-  --space-0_5: 2px;
-  --space-1: 4px;
-  --space-1_5: 6px;
-  --space-2: 8px;
-  --space-2_5: 10px;
-  --space-3: 12px;
-  --space-3_5: 14px;
-  --space-4: 16px;
-  --space-5: 20px;
-  --space-6: 24px;
-  --space-7: 28px;
-  --space-8: 32px;
-  --space-9: 36px;
-  --space-10: 40px;
-  --space-11: 44px;
-  --space-12: 48px;
-  --space-13: 52px;
-  --space-14: 56px;
-  --space-15: 60px;
-  --space-16: 64px;
+  --space-0: 0rem;
+  --space-px: 0.0625rem;
+  --space-0_5: 0.125rem;
+  --space-1: 0.25rem;
+  --space-1_5: 0.375rem;
+  --space-2: 0.5rem;
+  --space-2_5: 0.625rem;
+  --space-3: 0.75rem;
+  --space-3_5: 0.875rem;
+  --space-4: 1rem;
+  --space-5: 1.25rem;
+  --space-6: 1.5rem;
+  --space-7: 1.75rem;
+  --space-8: 2rem;
+  --space-9: 2.25rem;
+  --space-10: 2.5rem;
+  --space-11: 2.75rem;
+  --space-12: 3rem;
+  --space-13: 3.25rem;
+  --space-14: 3.5rem;
+  --space-15: 3.75rem;
+  --space-16: 4rem;
 }
 :root {
   --radius-extra-small: 0.0625rem;
@@ -626,15 +626,19 @@
   font-weight: var(--font-weight-default);
   letter-spacing: var(--letter-spacing-default);
   line-height: var(--line-height-default);
-  height: var(--space-6);
+  min-height: var(--space-6);
   color: var(--color-text-tooltip);
   white-space: pre-wrap;
   word-break: break-word;
   border-radius: var(--radius-medium);
-  box-shadow: var(--elevation-300-tooltip, 0 2px 7px rgba(0, 0, 0, 0.15));
+  box-shadow: var(--elevation-300, 0 2px 7px rgba(0, 0, 0, 0.15));
 }
-.fp-arrow {
+.fp-tooltip-arrow {
   fill: var(--color-bg-tooltip);
+  width: var(--space-3_5);
+  height: var(--space-1_5);
+  position: relative;
+  bottom: 1px;
 }
 .fp-textarea {
   all: unset;
@@ -717,6 +721,9 @@
   padding: 0 var(--space-4);
   color: var(--color-text-menu-tertiary);
 }
+.fp-MenuLabel:where(.fp-MenuContent:has(.fp-MenuCheckboxItem, .fp-MenuRadioItem) .fp-MenuLabel) {
+    padding-left: var(--space-6);
+  }
 .fp-MenuGroup {
   padding: var(--space-2) 0;
 }
@@ -1022,11 +1029,12 @@
   --slider-root-size: var(--space-6);
   --slider-track-size: var(--space-4);
   --slider-thumb-width: var(--space-4);
-  --color-border-slider-track: #0000001a;
+  --slider-track-border-color: #0000001a;
+  --slider-track-bg: var(--figma-color-bg-secondary);
+  --slider-thumb-bg: transparent;
 }
-.dark,
-.dark-theme {
-  --color-border-slider-track: #ffffff1a;
+.figma-dark {
+  --slider-track-border-color: #ffffff1a;
 }
 .fp-SliderRoot {
   position: relative;
@@ -1051,9 +1059,9 @@
   position: relative;
   overflow: hidden;
   flex-grow: 1;
-  background-color: var(--figma-color-bg-secondary);
+  background: var(--slider-track-bg);
   border-radius: var(--radius-full);
-  outline: 1px solid var(--color-border-slider-track);
+  outline: 1px solid var(--slider-track-border-color);
   outline-offset: -1px;
 }
 .fp-SliderTrack[data-orientation='horizontal'] {
@@ -1090,7 +1098,7 @@
   display: block;
   width: var(--slider-track-size);
   height: var(--slider-track-size);
-  background-color: var(--figma-color-icon-onbrand);
+  background-color: var(--slider-thumb-bg);
   border: 4px solid var(--figma-color-icon-onbrand);
   border-radius: var(--radius-full);
   box-shadow: var(--elevation-200);
@@ -1104,8 +1112,8 @@
 .fp-SliderThumb.fp-SliderThumb-focusVisible:focus-visible {
     outline: 1px solid var(--figma-color-border-selected);
   }
-.fp-SliderThumb.fp-SliderThumb-modified {
-    background-color: transparent;
+.fp-SliderThumb.fp-SliderThumb-baseValue {
+    --slider-thumb-bg: var(--figma-color-icon-onbrand);
   }
 .fp-SliderHint {
   position: absolute;
@@ -1442,6 +1450,10 @@
   font-weight: var(--font-weight-default);
   letter-spacing: var(--letter-spacing-default);
   line-height: var(--line-height-default);
+  color: var(--figma-color-text-secondary);
+}
+.fp-CollapsibleIndicator {
+  --color-icon: var(--figma-color-icon-secondary);
 }
 [data-state='open'] > .fp-CollapsibleIndicator {
     transform: rotate(90deg);
@@ -1449,3 +1461,176 @@
 .fp-CollapsibleContent {
   margin-left: var(--space-4);
 }
+.fp-ColorPickerHueSlider:where(.fp-color-model-hsv, .fp-color-model-hsl, .fp-color-model-rgb, .fp-color-model-hex) {
+  --slider-track-bg: linear-gradient(
+    90deg,
+    rgba(255, 0, 0, 1) calc(var(--slider-track-size) / 2),
+    rgba(255, 48, 0, 1),
+    rgba(255, 96, 0, 1),
+    rgba(255, 143, 0, 1),
+    rgba(255, 191, 0, 1),
+    rgba(255, 239, 0, 1),
+    rgba(223, 255, 0, 1),
+    rgba(175, 255, 0, 1),
+    rgba(128, 255, 0, 1),
+    rgba(80, 255, 0, 1),
+    rgba(32, 255, 0, 1),
+    rgba(0, 255, 16, 1),
+    rgba(0, 255, 64, 1),
+    rgba(0, 255, 112, 1),
+    rgba(0, 255, 159, 1),
+    rgba(0, 255, 207, 1),
+    rgba(0, 255, 255, 1),
+    rgba(0, 207, 255, 1),
+    rgba(0, 159, 255, 1),
+    rgba(0, 112, 255, 1),
+    rgba(0, 64, 255, 1),
+    rgba(0, 16, 255, 1),
+    rgba(32, 0, 255, 1),
+    rgba(80, 0, 255, 1),
+    rgba(127, 0, 255, 1),
+    rgba(175, 0, 255, 1),
+    rgba(223, 0, 255, 1),
+    rgba(255, 0, 239, 1),
+    rgba(255, 0, 191, 1),
+    rgba(255, 0, 143, 1),
+    rgba(255, 0, 96, 1),
+    rgba(255, 0, 48, 1) calc(100% - calc(var(--slider-track-size) / 2))
+  );
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+.fp-ColorPickerHueSlider:where(.fp-color-model-hsv, .fp-color-model-hsl):where(.fp-color-space-display-p3) {
+      --slider-track-bg: linear-gradient(
+        90deg,
+        color(display-p3 1 0 0) calc(var(--slider-track-size) / 2),
+        color(display-p3 1 0.1875 0),
+        color(display-p3 1 0.375 0),
+        color(display-p3 1 0.5625 0),
+        color(display-p3 1 0.75 0),
+        color(display-p3 1 0.9375 0),
+        color(display-p3 0.875 1 0),
+        color(display-p3 0.6875 1 0),
+        color(display-p3 0.5 1 0),
+        color(display-p3 0.3125 1 0),
+        color(display-p3 0.125 1 0),
+        color(display-p3 0 1 0.0625),
+        color(display-p3 0 1 0.25),
+        color(display-p3 0 1 0.4375),
+        color(display-p3 0 1 0.625),
+        color(display-p3 0 1 0.8125),
+        color(display-p3 0 1 1),
+        color(display-p3 0 0.8125 1),
+        color(display-p3 0 0.625 1),
+        color(display-p3 0 0.4375 1),
+        color(display-p3 0 0.25 1),
+        color(display-p3 0 0.0625 1),
+        color(display-p3 0.125 0 1),
+        color(display-p3 0.3125 0 1),
+        color(display-p3 0.5 0 1),
+        color(display-p3 0.6875 0 1),
+        color(display-p3 0.875 0 1),
+        color(display-p3 1 0 0.9375),
+        color(display-p3 1 0 0.75),
+        color(display-p3 1 0 0.5625),
+        color(display-p3 1 0 0.375),
+        color(display-p3 1 0 0.1875) calc(100% - calc(var(--slider-track-size) / 2))
+      );
+}
+    }
+  }
+.fp-ColorPickerAlphaSlider {
+  --track-bg-step-1: var(--track-bg-transparent-srgb);
+  --track-bg-step-2: var(--track-bg-opaque-srgb);
+  --slider-thumb-bg: var(--thumb-bg-srgb);
+
+  --slider-track-bg: linear-gradient(
+      to right,
+      var(--track-bg-step-1) 0 calc(var(--slider-track-size) / 2),
+      var(--track-bg-step-2) calc(100% - calc(var(--slider-track-size) / 2)) 100%
+    ),
+    url('data:image/svg+xml;utf8,%3Csvg%20width%3D%222%22%20height%3D%222%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0%200h1v2h1V1H0%22%20fill-rule%3D%22nonzero%22%20fill%3D%22%23e1e1e1%22/%3E%3C/svg%3E')
+      0 0 / auto 66.66%,
+    #fff;
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+.fp-ColorPickerAlphaSlider:where(.fp-color-space-display-p3) {
+      --slider-thumb-bg: var(--thumb-bg-p3);
+      --track-bg-step-1: var(--track-bg-transparent-p3);
+      --track-bg-step-2: var(--track-bg-opaque-p3);
+}
+    }
+  }
+.fp-ColorPickerArea {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 1 / 1;
+}
+.fp-ColorPickerAreaCanvas {
+  width: 100%;
+  height: 100%;
+  outline-width: 1px;
+  outline-style: solid;
+  outline-color: #0000001a; /*TODO: color-bordertranslucent*/
+  outline-offset: -1px;
+  --base-color: var(--base-color-srgb);
+  --gradient-step-black: rgb(0 0 0);
+  --gradient-step-black-transparent: rgb(0 0 0 / 0);
+  --gradient-step-white: rgb(255 255 255);
+  --gradient-step-white-transparent: rgb(255 255 255 / 0);
+  --gradient-step-gray: rgb(128 128 128);
+  --gradient-step-gray-transparent: rgb(128 128 128 / 0);
+}
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+.fp-ColorPickerAreaCanvas:where(.fp-color-space-display-p3) {
+      --base-color: var(--base-color-p3);
+      --gradient-step-black: color(display-p3 0 0 0);
+      --gradient-step-black-transparent: color(display-p3 0 0 0 / 0);
+      --gradient-step-white: color(display-p3 1 1 1);
+      --gradient-step-white-transparent: color(display-p3 1 1 1 / 0);
+      --gradient-step-gray: color(display-p3 0.5 0.5 0.5);
+      --gradient-step-gray-transparent: color(display-p3 0.5 0.5 0.5 / 0);
+}
+    }
+  }
+.fp-ColorPickerAreaCanvas:where(.fp-color-model-hsv, .fp-color-model-hex, .fp-color-model-rgb) {
+  background: linear-gradient(to bottom, var(--gradient-step-black-transparent) 0%, var(--gradient-step-black) 100%),
+    linear-gradient(to right, var(--gradient-step-white) 0%, var(--base-color) 100%);
+}
+.fp-ColorPickerAreaCanvas:where(.fp-color-model-hsl) {
+  background: linear-gradient(
+      to bottom,
+      var(--gradient-step-white) 0%,
+      var(--gradient-step-white-transparent) 49.99%,
+      var(--gradient-step-black-transparent) 50.01%,
+      var(--gradient-step-black) 100%
+    ),
+    linear-gradient(to right, var(--gradient-step-gray) 0%, var(--gradient-step-gray-transparent) 100%),
+    var(--base-color);
+}
+.fp-ColorPickerThumb {
+  position: absolute;
+  box-sizing: border-box;
+  box-shadow: var(--elevation-200);
+  left: 0;
+  transform: translate(-50%, -50%);
+  width: 16px;
+  height: 16px;
+  border-radius: 8px;
+  border-style: solid;
+  border-width: 4px;
+  border-color: white;
+  background: var(--thumb-bg-srgb);
+}
+.fp-ColorPickerThumb:focus-visible {
+    outline: 1px solid var(--figma-color-border-selected);
+  }
+@supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+.fp-ColorPickerThumb:where(.fp-color-space-display-p3) {
+      background: var(--thumb-bg-p3);
+}
+    }
+  }

package/dist/tailwind.preset.js

@@ -0,0 +1,287 @@
+export default {
+  theme: {
+    colors: {
+      current: 'currentColor',
+      inherit: 'inherit',
+      transparent: 'transparent',
+      bg: {
+        DEFAULT: 'var(--figma-color-bg)',
+        brand: 'var(--figma-color-bg-brand)',
+        'brand-hover': 'var(--figma-color-bg-brand-hover)',
+        'brand-pressed': 'var(--figma-color-bg-brand-pressed)',
+        'brand-secondary': 'var(--figma-color-bg-brand-secondary)',
+        'brand-tertiary': 'var(--figma-color-bg-brand-tertiary)',
+        component: 'var(--figma-color-bg-component)',
+        'component-hover': 'var(--figma-color-bg-component-hover)',
+        'component-pressed': 'var(--figma-color-bg-component-pressed)',
+        'component-secondary': 'var(--figma-color-bg-component-secondary)',
+        'component-tertiary': 'var(--figma-color-bg-component-tertiary)',
+        danger: 'var(--figma-color-bg-danger)',
+        'danger-hover': 'var(--figma-color-bg-danger-hover)',
+        'danger-pressed': 'var(--figma-color-bg-danger-pressed)',
+        'danger-secondary': 'var(--figma-color-bg-danger-secondary)',
+        'danger-tertiary': 'var(--figma-color-bg-danger-tertiary)',
+        disabled: 'var(--figma-color-bg-disabled)',
+        'disabled-secondary': 'var(--figma-color-bg-disabled-secondary)',
+        hover: 'var(--figma-color-bg-hover)',
+        inverse: 'var(--figma-color-bg-inverse)',
+        onselected: 'var(--figma-color-bg-onselected)',
+        'onselected-hover': 'var(--figma-color-bg-onselected-hover)',
+        'onselected-pressed': 'var(--figma-color-bg-onselected-pressed)',
+        pressed: 'var(--figma-color-bg-pressed)',
+        secondary: 'var(--figma-color-bg-secondary)',
+        selected: 'var(--figma-color-bg-selected)',
+        'selected-hover': 'var(--figma-color-bg-selected-hover)',
+        'selected-pressed': 'var(--figma-color-bg-selected-pressed)',
+        'selected-secondary': 'var(--figma-color-bg-selected-secondary)',
+        'selected-strong': 'var(--figma-color-bg-selected-strong)',
+        'selected-tertiary': 'var(--figma-color-bg-selected-tertiary)',
+        success: 'var(--figma-color-bg-success)',
+        'success-hover': 'var(--figma-color-bg-success-hover)',
+        'success-pressed': 'var(--figma-color-bg-success-pressed)',
+        'success-secondary': 'var(--figma-color-bg-success-secondary)',
+        'success-tertiary': 'var(--figma-color-bg-success-tertiary)',
+        tertiary: 'var(--figma-color-bg-tertiary)',
+        warning: 'var(--figma-color-bg-warning)',
+        'warning-hover': 'var(--figma-color-bg-warning-hover)',
+        'warning-pressed': 'var(--figma-color-bg-warning-pressed)',
+        'warning-secondary': 'var(--figma-color-bg-warning-secondary)',
+        'warning-tertiary': 'var(--figma-color-bg-warning-tertiary)',
+      },
+      border: {
+        DEFAULT: 'var(--figma-color-border)',
+        brand: 'var(--figma-color-border-brand)',
+        'brand-strong': 'var(--figma-color-border-brand-strong)',
+        component: 'var(--figma-color-border-component)',
+        'component-hover': 'var(--figma-color-border-component-hover)',
+        'component-strong': 'var(--figma-color-border-component-strong)',
+        danger: 'var(--figma-color-border-danger)',
+        'danger-strong': 'var(--figma-color-border-danger-strong)',
+        disabled: 'var(--figma-color-border-disabled)',
+        'disabled-strong': 'var(--figma-color-border-disabled-strong)',
+        onbrand: 'var(--figma-color-border-onbrand)',
+        'onbrand-strong': 'var(--figma-color-border-onbrand-strong)',
+        oncomponent: 'var(--figma-color-border-oncomponent)',
+        'oncomponent-strong': 'var(--figma-color-border-oncomponent-strong)',
+        ondanger: 'var(--figma-color-border-ondanger)',
+        'ondanger-strong': 'var(--figma-color-border-ondanger-strong)',
+        onselected: 'var(--figma-color-border-onselected)',
+        'onselected-strong': 'var(--figma-color-border-onselected-strong)',
+        onsuccess: 'var(--figma-color-border-onsuccess)',
+        'onsuccess-strong': 'var(--figma-color-border-onsuccess-strong)',
+        onwarning: 'var(--figma-color-border-onwarning)',
+        'onwarning-strong': 'var(--figma-color-border-onwarning-strong)',
+        selected: 'var(--figma-color-border-selected)',
+        'selected-strong': 'var(--figma-color-border-selected-strong)',
+        strong: 'var(--figma-color-border-strong)',
+        success: 'var(--figma-color-border-success)',
+        'success-strong': 'var(--figma-color-border-success-strong)',
+        warning: 'var(--figma-color-border-warning)',
+        'warning-strong': 'var(--figma-color-border-warning-strong)',
+      },
+      icon: {
+        DEFAULT: 'var(--figma-color-icon)',
+        brand: 'var(--figma-color-icon-brand)',
+        'brand-pressed': 'var(--figma-color-icon-brand-pressed)',
+        'brand-secondary': 'var(--figma-color-icon-brand-secondary)',
+        'brand-tertiary': 'var(--figma-color-icon-brand-tertiary)',
+        component: 'var(--figma-color-icon-component)',
+        'component-pressed': 'var(--figma-color-icon-component-pressed)',
+        'component-secondary': 'var(--figma-color-icon-component-secondary)',
+        'component-tertiary': 'var(--figma-color-icon-component-tertiary)',
+        danger: 'var(--figma-color-icon-danger)',
+        'danger-hover': 'var(--figma-color-icon-danger-hover)',
+        'danger-pressed': 'var(--figma-color-icon-danger-pressed)',
+        'danger-secondary': 'var(--figma-color-icon-danger-secondary)',
+        'danger-secondary-hover': 'var(--figma-color-icon-danger-secondary-hover)',
+        'danger-tertiary': 'var(--figma-color-icon-danger-tertiary)',
+        disabled: 'var(--figma-color-icon-disabled)',
+        hover: 'var(--figma-color-icon-hover)',
+        onbrand: 'var(--figma-color-icon-onbrand)',
+        'onbrand-secondary': 'var(--figma-color-icon-onbrand-secondary)',
+        'onbrand-tertiary': 'var(--figma-color-icon-onbrand-tertiary)',
+        oncomponent: 'var(--figma-color-icon-oncomponent)',
+        'oncomponent-secondary': 'var(--figma-color-icon-oncomponent-secondary)',
+        'oncomponent-tertiary': 'var(--figma-color-icon-oncomponent-tertiary)',
+        ondanger: 'var(--figma-color-icon-ondanger)',
+        'ondanger-secondary': 'var(--figma-color-icon-ondanger-secondary)',
+        'ondanger-tertiary': 'var(--figma-color-icon-ondanger-tertiary)',
+        ondisabled: 'var(--figma-color-icon-ondisabled)',
+        oninverse: 'var(--figma-color-icon-oninverse)',
+        onselected: 'var(--figma-color-icon-onselected)',
+        'onselected-secondary': 'var(--figma-color-icon-onselected-secondary)',
+        'onselected-strong': 'var(--figma-color-icon-onselected-strong)',
+        'onselected-tertiary': 'var(--figma-color-icon-onselected-tertiary)',
+        onsuccess: 'var(--figma-color-icon-onsuccess)',
+        'onsuccess-secondary': 'var(--figma-color-icon-onsuccess-secondary)',
+        'onsuccess-tertiary': 'var(--figma-color-icon-onsuccess-tertiary)',
+        onwarning: 'var(--figma-color-icon-onwarning)',
+        'onwarning-secondary': 'var(--figma-color-icon-onwarning-secondary)',
+        'onwarning-tertiary': 'var(--figma-color-icon-onwarning-tertiary)',
+        pressed: 'var(--figma-color-icon-pressed)',
+        secondary: 'var(--figma-color-icon-secondary)',
+        'secondary-hover': 'var(--figma-color-icon-secondary-hover)',
+        selected: 'var(--figma-color-icon-selected)',
+        'selected-secondary': 'var(--figma-color-icon-selected-secondary)',
+        'selected-tertiary': 'var(--figma-color-icon-selected-tertiary)',
+        success: 'var(--figma-color-icon-success)',
+        'success-pressed': 'var(--figma-color-icon-success-pressed)',
+        'success-secondary': 'var(--figma-color-icon-success-secondary)',
+        'success-tertiary': 'var(--figma-color-icon-success-tertiary)',
+        tertiary: 'var(--figma-color-icon-tertiary)',
+        'tertiary-hover': 'var(--figma-color-icon-tertiary-hover)',
+        warning: 'var(--figma-color-icon-warning)',
+        'warning-pressed': 'var(--figma-color-icon-warning-pressed)',
+        'warning-secondary': 'var(--figma-color-icon-warning-secondary)',
+        'warning-tertiary': 'var(--figma-color-icon-warning-tertiary)',
+      },
+      text: {
+        DEFAULT: 'var(--figma-color-text)',
+        brand: 'var(--figma-color-text-brand)',
+        'brand-secondary': 'var(--figma-color-text-brand-secondary)',
+        'brand-tertiary': 'var(--figma-color-text-brand-tertiary)',
+        component: 'var(--figma-color-text-component)',
+        'component-pressed': 'var(--figma-color-text-component-pressed)',
+        'component-secondary': 'var(--figma-color-text-component-secondary)',
+        'component-tertiary': 'var(--figma-color-text-component-tertiary)',
+        danger: 'var(--figma-color-text-danger)',
+        'danger-secondary': 'var(--figma-color-text-danger-secondary)',
+        'danger-tertiary': 'var(--figma-color-text-danger-tertiary)',
+        disabled: 'var(--figma-color-text-disabled)',
+        hover: 'var(--figma-color-text-hover)',
+        onbrand: 'var(--figma-color-text-onbrand)',
+        'onbrand-secondary': 'var(--figma-color-text-onbrand-secondary)',
+        'onbrand-tertiary': 'var(--figma-color-text-onbrand-tertiary)',
+        oncomponent: 'var(--figma-color-text-oncomponent)',
+        'oncomponent-secondary': 'var(--figma-color-text-oncomponent-secondary)',
+        'oncomponent-tertiary': 'var(--figma-color-text-oncomponent-tertiary)',
+        ondanger: 'var(--figma-color-text-ondanger)',
+        'ondanger-secondary': 'var(--figma-color-text-ondanger-secondary)',
+        'ondanger-tertiary': 'var(--figma-color-text-ondanger-tertiary)',
+        ondisabled: 'var(--figma-color-text-ondisabled)',
+        oninverse: 'var(--figma-color-text-oninverse)',
+        onselected: 'var(--figma-color-text-onselected)',
+        'onselected-secondary': 'var(--figma-color-text-onselected-secondary)',
+        'onselected-strong': 'var(--figma-color-text-onselected-strong)',
+        'onselected-tertiary': 'var(--figma-color-text-onselected-tertiary)',
+        onsuccess: 'var(--figma-color-text-onsuccess)',
+        'onsuccess-secondary': 'var(--figma-color-text-onsuccess-secondary)',
+        'onsuccess-tertiary': 'var(--figma-color-text-onsuccess-tertiary)',
+        onwarning: 'var(--figma-color-text-onwarning)',
+        'onwarning-secondary': 'var(--figma-color-text-onwarning-secondary)',
+        'onwarning-tertiary': 'var(--figma-color-text-onwarning-tertiary)',
+        secondary: 'var(--figma-color-text-secondary)',
+        'secondary-hover': 'var(--figma-color-text-secondary-hover)',
+        selected: 'var(--figma-color-text-selected)',
+        'selected-secondary': 'var(--figma-color-text-selected-secondary)',
+        'selected-tertiary': 'var(--figma-color-text-selected-tertiary)',
+        success: 'var(--figma-color-text-success)',
+        'success-secondary': 'var(--figma-color-text-success-secondary)',
+        'success-tertiary': 'var(--figma-color-text-success-tertiary)',
+        tertiary: 'var(--figma-color-text-tertiary)',
+        'tertiary-hover': 'var(--figma-color-text-tertiary-hover)',
+        warning: 'var(--figma-color-text-warning)',
+        'warning-secondary': 'var(--figma-color-text-warning-secondary)',
+        'warning-tertiary': 'var(--figma-color-text-warning-tertiary)',
+      },
+    },
+    fontFamily: {
+      default: 'var(--font-family-default)',
+      monospace: 'var(--font-family-monospace)',
+    },
+    fontWeight: {
+      default: 'var(--font-weight-default)',
+      strong: 'var(--font-weight-strong)',
+    },
+    fontSize: {
+      'size-1': 'var(--font-size-1)',
+      'size-2': 'var(--font-size-2)',
+      'size-3': 'var(--font-size-3)',
+      'size-4': 'var(--font-size-4)',
+      'size-5': 'var(--font-size-5)',
+      'size-6': 'var(--font-size-6)',
+      'size-7': 'var(--font-size-7)',
+      'size-8': 'var(--font-size-8)',
+      'size-9': 'var(--font-size-9)',
+      'size-10': 'var(--font-size-10)',
+      'size-default': 'var(--font-size-default)',
+      small: 'var(--font-size-1)',
+      medium: 'var(--font-size-3)',
+      large: 'var(--font-size-5)',
+    },
+    letterSpacing: {
+      1: 'var(--letter-spacing-1)',
+      2: 'var(--letter-spacing-2)',
+      3: 'var(--letter-spacing-3)',
+      4: 'var(--letter-spacing-4)',
+      5: 'var(--letter-spacing-5)',
+      6: 'var(--letter-spacing-6)',
+      7: 'var(--letter-spacing-7)',
+      8: 'var(--letter-spacing-8)',
+      9: 'var(--letter-spacing-9)',
+      10: 'var(--letter-spacing-10)',
+      default: 'var(--letter-spacing-default)',
+      small: 'var(--letter-spacing-1)',
+      medium: 'var(--letter-spacing-3)',
+      large: 'var(--letter-spacing-5)',
+    },
+    lineHeight: {
+      1: 'var(--line-height-1)',
+      2: 'var(--line-height-2)',
+      3: 'var(--line-height-3)',
+      4: 'var(--line-height-4)',
+      5: 'var(--line-height-5)',
+      6: 'var(--line-height-6)',
+      7: 'var(--line-height-7)',
+      8: 'var(--line-height-8)',
+      9: 'var(--line-height-9)',
+      10: 'var(--line-height-10)',
+      default: 'var(--line-height-default)',
+      small: 'var(--line-height-1)',
+      medium: 'var(--line-height-3)',
+      large: 'var(--line-height-5)',
+    },
+    borderRadius: {
+      none: 'none',
+      'extra-small': 'var(--radius-extra-small)',
+      small: 'var(--radius-small)',
+      medium: 'var(--radius-medium)',
+      large: 'var(--radius-large)',
+      full: 'var(--radius-full)',
+      default: 'var(--radius-default)',
+    },
+    boxShadow: {
+      none: 'none',
+      100: 'var(--elevation-100)',
+      200: 'var(--elevation-200)',
+      300: 'var(--elevation-300)',
+      400: 'var(--elevation-400)',
+      500: 'var(--elevation-500)',
+    },
+    textColor: ({ theme }) => {
+      return {
+        current: 'currentColor',
+        inherit: 'inherit',
+        transparent: 'transparent',
+        ...theme('colors').text,
+      };
+    },
+    backgroundColor: ({ theme }) => {
+      return {
+        current: 'currentColor',
+        inherit: 'inherit',
+        transparent: 'transparent',
+        ...theme('colors').bg,
+      };
+    },
+    borderColor: ({ theme }) => {
+      return {
+        current: 'currentColor',
+        inherit: 'inherit',
+        transparent: 'transparent',
+        DEFAULT: theme('colors').border.DEFAULT,
+        ...theme('colors').border,
+      };
+    },
+  },
+};

package/package.json

@@ -2,7 +2,7 @@
   "name": "figma-kit",
   "description": "A set of React components for building Figma plugins.",
   "homepage": "https://figma-kit.dev",
-  "version": "1.0.0-beta.1",
+  "version": "1.0.0-beta.11",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -13,7 +13,8 @@
     "figma",
     "figma react components",
     "figma design system",
-    "hook"
+    "UI3",
+    "component-library"
   ],
   "type": "module",
   "files": [
@@ -28,6 +29,9 @@
       "import": "./dist/index.mjs",
       "types": "./dist/index.d.ts"
     },
+    "./tailwind.preset.js": {
+      "require": "./dist/tailwind.preset.js"
+    },
     "./*": "./*"
   },
   "main": "dist/index.cjs",
@@ -36,10 +40,11 @@
   "sideEffects": false,
   "scripts": {
     "dev": "vite build --mode development --watch",
-    "build": "pnpm build:js && pnpm build:css && pnpm build:figma-dev-theme-css",
+    "build": "pnpm build:js && pnpm build:css && pnpm build:figma-dev-theme-css && pnpm build:tailwind-preset",
     "build:js": "vite build",
     "build:css": "postcss src/styles/index.css -o dist/styles.css",
     "build:figma-dev-theme-css": "postcss src/styles/figma-development-theme.css -o dist/figma-development-theme.css",
+    "build:tailwind-preset": "cp src/tailwind/preset.js dist/tailwind.preset.js",
     "test": "vitest"
   },
   "peerDependencies": {