@photoroom/ui 0.1.226 → 0.1.227

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@photoroom/ui",
-  "version": "0.1.226",
+  "version": "0.1.227",
   "private": false,
   "description": "Photoroom design system components",
   "sideEffects": [

package/theme.css

@@ -11,6 +11,13 @@
 
 @import "./colors.css";
 
+/*
+ * Custom variants (replaces tailwind.config.js darkMode and src/plugins/variants.js)
+ */
+@custom-variant dark (&:where(.theme-dark, .theme-dark *));
+@custom-variant tall (@media (min-height: 780px));
+@custom-variant mobile (@media (max-width: 600px));
+
 @theme inline {
   /* Base */
   --color-black: var(--color-black);
@@ -350,141 +357,67 @@
 }
 
 /*
- * Keyframes (replaces tailwind.config.js theme.extend.keyframes)
+ * Content-to-edge spacing tokens (used only by the @utility blocks below)
+ * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/Design-system?node-id=11366-12472
  */
-@keyframes bone-pulse {
-  0% {
-    background-color: var(--color-neutral-alpha-100);
-  }
-  50% {
-    background-color: var(--color-neutral-alpha-300);
-  }
-  100% {
-    background-color: var(--color-neutral-alpha-100);
-  }
-}
-@keyframes tooltip-slide-down {
-  from {
-    opacity: 0;
-    transform: translateY(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-@keyframes tooltip-slide-up {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-@keyframes tooltip-slide-left {
-  from {
-    opacity: 0;
-    transform: translateX(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-@keyframes tooltip-slide-right {
-  from {
-    opacity: 0;
-    transform: translateX(-10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-@keyframes button-loading-indeterminate-wiggle {
-  0% {
-    transform: translate(-200%, -50%);
-  }
-  50% {
-    transform: translate(200%, -50%);
-  }
-  100% {
-    transform: translate(-200%, -50%);
-  }
-}
-@keyframes dialog-overlay-enter {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@keyframes dialog-overlay-leave {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-@keyframes dialog-enter {
-  from {
-    transform: scale(0.95);
-  }
-  to {
-    transform: scale(1);
-  }
-}
-@keyframes dialog-leave {
-  from {
-    transform: scale(1);
-  }
-  to {
-    transform: scale(0.95);
-  }
-}
-@keyframes spotlight-fade-subdued {
-  0% {
-    background-color: var(--color-background-spotlight);
-  }
-  100% {
-    background-color: var(--color-background-subdued);
-  }
-}
-@keyframes spotlight-fade-white {
-  0% {
-    background-color: var(--color-background-spotlight);
-  }
-  100% {
-    background-color: var(--color-background-white);
-  }
-}
-@keyframes radix-accordion-slide-down {
-  from {
-    height: 0;
-  }
-  to {
-    height: var(--radix-accordion-content-height);
-  }
-}
-@keyframes radix-accordion-slide-up {
-  from {
-    height: var(--radix-accordion-content-height);
-  }
-  to {
-    height: 0;
-  }
-}
+@theme {
+  --content-edge-150: 4px;
+  --content-edge-200: 5px;
+  --content-edge-250: 6px;
+  --content-edge-300: 7px;
+  --content-edge-350: 8px;
+  --content-edge-400: 10px;
+  --content-edge-450: 11px;
+  --content-edge-500: 12px;
+  --content-edge-550: 13px;
+  --content-edge-600: 14px;
+  --content-edge-650: 16px;
+  --content-edge-700: 17px;
+  --content-edge-750: 18px;
+  --content-edge-800: 19px;
 
-/*
- * Custom variants (replaces tailwind.config.js darkMode and src/plugins/variants.js)
- */
-@custom-variant dark (&:where(.theme-dark, .theme-dark *));
-@custom-variant tall (@media (min-height: 780px));
-@custom-variant mobile (@media (max-width: 600px));
+  --content-edge-spacious-200: 6px;
+  --content-edge-spacious-250: 8px;
+  --content-edge-spacious-300: 10px;
+  --content-edge-spacious-350: 11px;
+  --content-edge-spacious-400: 13px;
+  --content-edge-spacious-450: 14px;
+  --content-edge-spacious-500: 16px;
+  --content-edge-spacious-550: 18px;
+  --content-edge-spacious-600: 19px;
+  --content-edge-spacious-650: 21px;
+  --content-edge-spacious-700: 22px;
+  --content-edge-spacious-750: 24px;
+  --content-edge-spacious-800: 26px;
+
+  --icon-edge-200: 4px;
+  --icon-edge-250: 5px;
+  --icon-edge-300: 6px;
+  --icon-edge-350: 6px;
+  --icon-edge-400: 8px;
+  --icon-edge-450: 9px;
+  --icon-edge-500: 10px;
+  --icon-edge-550: 11px;
+  --icon-edge-600: 12px;
+  --icon-edge-650: 13px;
+  --icon-edge-700: 14px;
+  --icon-edge-750: 15px;
+  --icon-edge-800: 16px;
+
+  --icon-edge-spacious-200: 5px;
+  --icon-edge-spacious-250: 7px;
+  --icon-edge-spacious-300: 9px;
+  --icon-edge-spacious-350: 9px;
+  --icon-edge-spacious-400: 11px;
+  --icon-edge-spacious-450: 12px;
+  --icon-edge-spacious-500: 14px;
+  --icon-edge-spacious-550: 16px;
+  --icon-edge-spacious-600: 17px;
+  --icon-edge-spacious-650: 18px;
+  --icon-edge-spacious-700: 19px;
+  --icon-edge-spacious-750: 21px;
+  --icon-edge-spacious-800: 23px;
+}
 
 /*
  * Custom utilities (replaces src/plugins/transitions.js)
@@ -828,7 +761,7 @@
 
 /*
  * Color picker overrides for react-colorful.
- * !important is needed because react-colorful injects unlayered <style>,
+ * !important is needed because react-colorful injects unlayered \3c style>,
  * which beats anything inside @layer utilities regardless of specificity.
  */
 @utility misc-color-picker {
@@ -862,69 +795,6 @@
   color: transparent;
 }
 
-/*
- * Content-to-edge spacing tokens (used only by the @utility blocks below)
- * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/Design-system?node-id=11366-12472
- */
-@theme {
-  --content-edge-150: 4px;
-  --content-edge-200: 5px;
-  --content-edge-250: 6px;
-  --content-edge-300: 7px;
-  --content-edge-350: 8px;
-  --content-edge-400: 10px;
-  --content-edge-450: 11px;
-  --content-edge-500: 12px;
-  --content-edge-550: 13px;
-  --content-edge-600: 14px;
-  --content-edge-650: 16px;
-  --content-edge-700: 17px;
-  --content-edge-750: 18px;
-  --content-edge-800: 19px;
-
-  --content-edge-spacious-200: 6px;
-  --content-edge-spacious-250: 8px;
-  --content-edge-spacious-300: 10px;
-  --content-edge-spacious-350: 11px;
-  --content-edge-spacious-400: 13px;
-  --content-edge-spacious-450: 14px;
-  --content-edge-spacious-500: 16px;
-  --content-edge-spacious-550: 18px;
-  --content-edge-spacious-600: 19px;
-  --content-edge-spacious-650: 21px;
-  --content-edge-spacious-700: 22px;
-  --content-edge-spacious-750: 24px;
-  --content-edge-spacious-800: 26px;
-
-  --icon-edge-200: 4px;
-  --icon-edge-250: 5px;
-  --icon-edge-300: 6px;
-  --icon-edge-350: 6px;
-  --icon-edge-400: 8px;
-  --icon-edge-450: 9px;
-  --icon-edge-500: 10px;
-  --icon-edge-550: 11px;
-  --icon-edge-600: 12px;
-  --icon-edge-650: 13px;
-  --icon-edge-700: 14px;
-  --icon-edge-750: 15px;
-  --icon-edge-800: 16px;
-
-  --icon-edge-spacious-200: 5px;
-  --icon-edge-spacious-250: 7px;
-  --icon-edge-spacious-300: 9px;
-  --icon-edge-spacious-350: 9px;
-  --icon-edge-spacious-400: 11px;
-  --icon-edge-spacious-450: 12px;
-  --icon-edge-spacious-500: 14px;
-  --icon-edge-spacious-550: 16px;
-  --icon-edge-spacious-600: 17px;
-  --icon-edge-spacious-650: 18px;
-  --icon-edge-spacious-700: 19px;
-  --icon-edge-spacious-750: 21px;
-  --icon-edge-spacious-800: 23px;
-}
-
 /* Content to edge (replaces src/plugins/content-to-edge.js) */
 @utility content-to-edge-pl-* {
   padding-left: --value(--content-edge-*);
@@ -1437,6 +1307,136 @@
   @apply text-1400 font-700 leading-400 -tracking-[1.1304px];
 }
 
+/*
+ * Keyframes (replaces tailwind.config.js theme.extend.keyframes)
+ */
+@keyframes bone-pulse {
+  0% {
+    background-color: var(--color-neutral-alpha-100);
+  }
+  50% {
+    background-color: var(--color-neutral-alpha-300);
+  }
+  100% {
+    background-color: var(--color-neutral-alpha-100);
+  }
+}
+@keyframes tooltip-slide-down {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes tooltip-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes tooltip-slide-left {
+  from {
+    opacity: 0;
+    transform: translateX(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes tooltip-slide-right {
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+@keyframes button-loading-indeterminate-wiggle {
+  0% {
+    transform: translate(-200%, -50%);
+  }
+  50% {
+    transform: translate(200%, -50%);
+  }
+  100% {
+    transform: translate(-200%, -50%);
+  }
+}
+@keyframes dialog-overlay-enter {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes dialog-overlay-leave {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes dialog-enter {
+  from {
+    transform: scale(0.95);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+@keyframes dialog-leave {
+  from {
+    transform: scale(1);
+  }
+  to {
+    transform: scale(0.95);
+  }
+}
+@keyframes spotlight-fade-subdued {
+  0% {
+    background-color: var(--color-background-spotlight);
+  }
+  100% {
+    background-color: var(--color-background-subdued);
+  }
+}
+@keyframes spotlight-fade-white {
+  0% {
+    background-color: var(--color-background-spotlight);
+  }
+  100% {
+    background-color: var(--color-background-white);
+  }
+}
+@keyframes radix-accordion-slide-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+@keyframes radix-accordion-slide-up {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+
 /*
  * Form input resets (replaces src/plugins/forms.js)
  */