@photoroom/ui 0.1.543 → 0.1.545

package/package.json

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

package/theme.css

@@ -21,26 +21,27 @@
 @theme inline {
   /* Base */
   --color-black: var(--color-black);
-  --color-black-alpha-1: var(--color-black-alpha-1);
-  --color-black-alpha-2: var(--color-black-alpha-2);
-  --color-black-alpha-3: var(--color-black-alpha-3);
-  --color-black-alpha-4: var(--color-black-alpha-4);
-  --color-black-alpha-5: var(--color-black-alpha-5);
-  --color-black-alpha-6: var(--color-black-alpha-6);
-  --color-black-alpha-7: var(--color-black-alpha-7);
-  --color-black-alpha-8: var(--color-black-alpha-8);
+  --color-black-alpha-100: var(--color-black-alpha-100);
+  --color-black-alpha-200: var(--color-black-alpha-200);
+  --color-black-alpha-300: var(--color-black-alpha-300);
+  --color-black-alpha-400: var(--color-black-alpha-400);
+  --color-black-alpha-500: var(--color-black-alpha-500);
+  --color-black-alpha-600: var(--color-black-alpha-600);
+  --color-black-alpha-700: var(--color-black-alpha-700);
+  --color-black-alpha-800: var(--color-black-alpha-800);
+  --color-black-alpha-900: var(--color-black-alpha-900);
   --color-white: var(--color-white);
   --color-white-1: var(--color-white-1);
   --color-white-2: var(--color-white-2);
-  --color-white-alpha-1: var(--color-white-alpha-1);
-  --color-white-alpha-2: var(--color-white-alpha-2);
-  --color-white-alpha-3: var(--color-white-alpha-3);
-  --color-white-alpha-4: var(--color-white-alpha-4);
-  --color-white-alpha-5: var(--color-white-alpha-5);
-  --color-white-alpha-6: var(--color-white-alpha-6);
-  --color-white-alpha-7: var(--color-white-alpha-7);
-  --color-white-alpha-8: var(--color-white-alpha-8);
-  --color-white-alpha-9: var(--color-white-alpha-9);
+  --color-white-alpha-100: var(--color-white-alpha-100);
+  --color-white-alpha-200: var(--color-white-alpha-200);
+  --color-white-alpha-300: var(--color-white-alpha-300);
+  --color-white-alpha-400: var(--color-white-alpha-400);
+  --color-white-alpha-500: var(--color-white-alpha-500);
+  --color-white-alpha-600: var(--color-white-alpha-600);
+  --color-white-alpha-700: var(--color-white-alpha-700);
+  --color-white-alpha-800: var(--color-white-alpha-800);
+  --color-white-alpha-900: var(--color-white-alpha-900);
 
   /* Neutral */
   --color-neutral-0: var(--color-neutral-0);
@@ -59,6 +60,7 @@
   --color-neutral-alpha-300: var(--color-neutral-alpha-300);
   --color-neutral-alpha-400: var(--color-neutral-alpha-400);
   --color-neutral-alpha-500: var(--color-neutral-alpha-500);
+  --color-neutral-alpha-600: var(--color-neutral-alpha-600);
 
   /* Sand */
   --color-sand-50: var(--color-sand-50);
@@ -78,17 +80,17 @@
   --color-positive-400: var(--color-positive-400);
   --color-positive-500: var(--color-positive-500);
   --color-positive-600: var(--color-positive-600);
-  --color-positive-alpha-1: var(--color-positive-alpha-1);
-  --color-positive-alpha-2: var(--color-positive-alpha-2);
-  --color-positive-alpha-3: var(--color-positive-alpha-3);
+  --color-positive-alpha-100: var(--color-positive-alpha-100);
+  --color-positive-alpha-200: var(--color-positive-alpha-200);
+  --color-positive-alpha-300: var(--color-positive-alpha-300);
 
   /* Negative */
   --color-negative-400: var(--color-negative-400);
   --color-negative-500: var(--color-negative-500);
   --color-negative-600: var(--color-negative-600);
-  --color-negative-alpha-1: var(--color-negative-alpha-1);
-  --color-negative-alpha-2: var(--color-negative-alpha-2);
-  --color-negative-alpha-3: var(--color-negative-alpha-3);
+  --color-negative-alpha-100: var(--color-negative-alpha-100);
+  --color-negative-alpha-200: var(--color-negative-alpha-200);
+  --color-negative-alpha-300: var(--color-negative-alpha-300);
 
   /* Magic accent */
   --color-magic-accent-400: var(--color-magic-accent-400);
@@ -389,69 +391,6 @@
   --animate-nav-content-fade-out: nav-content-fade-out 450ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-/*
- * 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;
-}
-
 /*
  * Custom utilities (replaces src/plugins/transitions.js)
  * https://www.figma.com/design/cHgANa7dtzDDGXk7dKuAOQ/Prism?node-id=62868-23303&m=dev
@@ -461,29 +400,6 @@
   transition-duration: 200ms;
 }
 
-/*
- * Icon offset utilities (replaces src/plugins/icon-offset.js)
- * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/Design-system?node-id=11366-12440
- */
-@utility icon-offset-200 {
-  margin-left: -1.2px;
-}
-@utility icon-offset-300 {
-  margin-left: -1.4px;
-}
-@utility icon-offset-400 {
-  margin-left: -1.7px;
-}
-@utility icon-offset-500 {
-  margin-left: -2px;
-}
-@utility icon-offset-600 {
-  margin-left: -2.4px;
-}
-@utility icon-offset-700 {
-  margin-left: -2.9px;
-}
-
 /*
  * Icon size utilities (replaces src/plugins/icon-size.js)
  * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/Design-system?node-id=11366-12716
@@ -676,56 +592,6 @@
   background-size: 28px 28px;
 }
 
-/*
- * Text-to-leading utilities (replaces src/plugins/text-to-leading.js)
- * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/Design-system?node-id=11366-12592
- */
-@utility text-to-leading-300 {
-  margin-inline-start: 6px;
-}
-@utility text-to-leading-400 {
-  margin-inline-start: 7px;
-}
-@utility text-to-leading-500 {
-  margin-inline-start: 8px;
-}
-@utility text-to-leading-600 {
-  margin-inline-start: 10px;
-}
-@utility text-to-leading-700 {
-  margin-inline-start: 12px;
-}
-@utility text-to-leading-compact-300 {
-  margin-inline-start: 3px;
-}
-@utility text-to-leading-compact-400 {
-  margin-inline-start: 3.3px;
-}
-@utility text-to-leading-compact-500 {
-  margin-inline-start: 4px;
-}
-@utility text-to-leading-compact-600 {
-  margin-inline-start: 5px;
-}
-@utility text-to-leading-compact-700 {
-  margin-inline-start: 6px;
-}
-@utility text-to-leading-spacious-300 {
-  margin-inline-start: 8px;
-}
-@utility text-to-leading-spacious-400 {
-  margin-inline-start: 10px;
-}
-@utility text-to-leading-spacious-500 {
-  margin-inline-start: 12px;
-}
-@utility text-to-leading-spacious-600 {
-  margin-inline-start: 14px;
-}
-@utility text-to-leading-spacious-700 {
-  margin-inline-start: 17px;
-}
-
 /*
  * Misc design-system utilities (replaces src/plugins/misc.js)
  * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/Design-system?node-id=20464-7406
@@ -828,70 +694,6 @@
   color: transparent;
 }
 
-/* Content to edge (replaces src/plugins/content-to-edge.js) */
-@utility content-to-edge-pl-* {
-  padding-left: --value(--content-edge-*);
-}
-@utility content-to-edge-pr-* {
-  padding-right: --value(--content-edge-*);
-}
-@utility content-to-edge-ps-* {
-  padding-inline-start: --value(--content-edge-*);
-}
-@utility content-to-edge-pe-* {
-  padding-inline-end: --value(--content-edge-*);
-}
-@utility content-to-edge-px-* {
-  padding-inline: --value(--content-edge-*);
-}
-@utility content-to-edge-py-* {
-  padding-block: --value(--content-edge-*);
-}
-@utility content-to-edge-spacious-pl-* {
-  padding-left: --value(--content-edge-spacious-*);
-}
-@utility content-to-edge-spacious-pr-* {
-  padding-right: --value(--content-edge-spacious-*);
-}
-@utility content-to-edge-spacious-px-* {
-  padding-inline: --value(--content-edge-spacious-*);
-}
-@utility content-to-edge-spacious-ps-* {
-  padding-inline-start: --value(--content-edge-spacious-*);
-}
-@utility content-to-edge-spacious-pe-* {
-  padding-inline-end: --value(--content-edge-spacious-*);
-}
-
-/* Icon to edge (replaces src/plugins/icon-to-edge.js) */
-@utility icon-to-edge-pl-* {
-  padding-left: --value(--icon-edge-*);
-}
-@utility icon-to-edge-pr-* {
-  padding-right: --value(--icon-edge-*);
-}
-@utility icon-to-edge-ps-* {
-  padding-inline-start: --value(--icon-edge-*);
-}
-@utility icon-to-edge-pe-* {
-  padding-inline-end: --value(--icon-edge-*);
-}
-@utility icon-to-edge-py-* {
-  padding-block: --value(--icon-edge-*);
-}
-@utility icon-to-edge-spacious-pl-* {
-  padding-left: --value(--icon-edge-spacious-*);
-}
-@utility icon-to-edge-spacious-pr-* {
-  padding-right: --value(--icon-edge-spacious-*);
-}
-@utility icon-to-edge-spacious-ps-* {
-  padding-inline-start: --value(--icon-edge-spacious-*);
-}
-@utility icon-to-edge-spacious-pe-* {
-  padding-inline-end: --value(--icon-edge-spacious-*);
-}
-
 /*
  * Size utilities (replaces src/plugins/size.js)
  * https://www.figma.com/file/cHgANa7dtzDDGXk7dKuAOQ/Design-system?node-id=16712-19165