@heymantle/litho 0.0.14 → 0.0.16

package/index.css

@@ -5,18 +5,21 @@
 @theme {
   --spacing: 4px;
 
+  --breakpoint-xs: 320px;
   --breakpoint-sm: 480px;
   --breakpoint-md: 800px;
   --breakpoint-lg: 1038px;
   --breakpoint-xl: 1440px;
   --breakpoint-2xl: 1600px;
 
+  --container-xs: 320px;
   --container-sm: 480px;
   --container-md: 800px;
   --container-lg: 1038px;
   --container-xl: 1440px;
   --container-2xl: 1600px;
 
+  --container-xs-embed: 320px;
   --container-sm-embed: 480px;
   --container-md-embed: 586px;
   --container-lg-embed: 824px;
@@ -55,6 +58,7 @@
   --leading-16: 6.4rem;
 
   --radius-none: 0;
+  --radius-px: 1px;
   --radius-xs: 2px;
   --radius-sm: 4px;
   --radius-md: 6px;
@@ -141,6 +145,7 @@
   --color-surface-lower: #ebe9e7;
   --color-surface-lowest: #e6e4e2;
   --color-surface-selected: #fff6ed;
+  --color-surface-selected-low: #fdeedf;
   --color-surface-alternate: #0f0e12;
 
   --color-highest: #000000;
@@ -167,6 +172,7 @@
   --color-edge-darker: rgba(2, 2, 3, 0.42);
   --color-edge-dark: rgba(2, 2, 3, 0.3);
   --color-edge-default: rgba(2, 2, 3, 0.21);
+  --color-edge-light: rgba(2, 2, 3, 0.17);
   --color-edge-subdued: rgba(2, 2, 3, 0.12);
   --color-edge-alt-darker: rgba(238, 238, 242, 0.42);
   --color-edge-alt-dark: rgba(238, 238, 242, 0.3);
@@ -244,7 +250,7 @@
   --color-insight-lower: #DA90E5;
   --color-insight-lowest: #CE88D9;
   --color-insight-fg: #111014;
-  --color-insight-icon: #650274;
+  --color-insight-icon: #592468;
   --color-insight-alt: #f5cafc;
   --color-insight-alt-lower: #e7b4f0;
   --color-insight-alt-fg: #0c060d;
@@ -327,14 +333,14 @@
   --color-btn-highlight-disabled: #ffbb70;
   --color-btn-highlight-disabled-fg: #66635f;
 
-  --color-btn-insight: #F5CAFC;
-  --color-btn-insight-low: #ECC2F2;
-  --color-btn-insight-lower: #E2BAE8;
-  --color-btn-insight-fg: #0c060d;
-  --color-btn-insight-fg-alt: #0c060d;
-  --color-btn-insight-icon: #5f3366;
-  --color-btn-insight-border: #F5CAFC;
-  --color-btn-insight-border-low: #ECC2F2;
+  --color-btn-insight: #682D79;
+  --color-btn-insight-low: #602970;
+  --color-btn-insight-lower: #592468;
+  --color-btn-insight-fg: #FFFFFF;
+  --color-btn-insight-fg-alt: #FFFFFF;
+  --color-btn-insight-icon: #FFFFFF;
+  --color-btn-insight-border: #682D79;
+  --color-btn-insight-border-low: #592468;
   --color-btn-insight-disabled: #ffbb70;
   --color-btn-insight-disabled-fg: #66635f;
 
@@ -345,14 +351,18 @@
   --color-form-bg-disabled: #eeecea;
   --color-form-bg-error: #fffafa;
   --color-form-bg-error-low: #faf2f2;
+  --color-form-bg-insight: #fef5ff;
+  --color-form-bg-insight-low: #fdf2ff;
 
   --color-form-border: #bdbcbb;
   --color-form-border-hover: #a3a2a1;
   --color-form-border-focus: #ffab56;
   --color-form-border-error: #d22323;
+  --color-form-border-insight: #cab0d0;
   --color-form-focus: rgba(255, 189, 123, 0.4);
   --color-form-focus-active: rgba(255, 189, 123, 1);
   --color-form-focus-error: rgba(210, 35, 35, 0.3);
+  --color-form-focus-insight: rgba(245, 184, 255, 0.4);
 
   --color-form-placeholder: #99938e;
   --color-form-placeholder-error: #998484;
@@ -556,6 +566,7 @@
     --color-surface-lower: #171616;
     --color-surface-lowest: #121111;
     --color-surface-selected: #383330;
+    --color-surface-selected-low: #423B37;
     --color-surface-alternate: #050505;
 
     --color-highest: #FFFFFF;
@@ -579,10 +590,11 @@
     --color-link-lower: #ffc67a;
     --color-link-alternate: #ffbd7b;
 
-    --color-edge-darker: rgba(20, 20, 20, 0.80);
-    --color-edge-dark: rgba(20, 20, 20, 0.70);
-    --color-edge-default: rgba(20, 20, 20, 0.60);
-    --color-edge-subdued: rgba(20, 20, 20, 0.45);
+    --color-edge-darker: rgba(238, 238, 242, 0.42);
+    --color-edge-dark: rgba(238, 238, 242, 0.3);
+    --color-edge-default: rgba(238, 238, 242, 0.21);
+    --color-edge-light: rgba(238, 238, 242, 0.17);
+    --color-edge-subdued: rgba(238, 238, 242, 0.12);
     --color-edge-alt-darker: rgba(238, 238, 242, 0.42);
     --color-edge-alt-dark: rgba(238, 238, 242, 0.3);
     --color-edge-alt-default: rgba(238, 238, 242, 0.21);
@@ -806,14 +818,18 @@
     --color-form-bg-disabled: var(--color-surface-higher);
     --color-form-bg-error: #1c1212;
     --color-form-bg-error-low: #2b1919;
+    --color-form-bg-insight: #262127;
+    --color-form-bg-insight-low: #211d21;
 
     --color-form-border: #3D3B3B;
     --color-form-border-hover: #454242;
     --color-form-border-focus: #ebac67;
     --color-form-border-error: #d22323;
+    --color-form-border-insight: #574057;
     --color-form-focus: rgba(255, 189, 123, 0.4);
     --color-form-focus-active: rgba(255, 189, 123, 1);
     --color-form-focus-error: rgba(210, 35, 35, 0.4);
+    --color-form-focus-insight: rgba(121, 38, 134, 0.4);
 
     --color-form-placeholder: var(--color-lowest);
     --color-form-placeholder-error: var(--color-lowest);
@@ -845,7 +861,7 @@
   .Litho-Loading { z-index: 2500; }
   .Litho-Logo { z-index: 2400; }
   .Litho-TooltipPortal { z-index: 2300; }
-  .Litho-Popover { z-index: 2200; }
+  .Litho-Popover, .Litho-ColorField__Activator, .Litho-ColorField__Popover { z-index: 2200; }
   .Litho-Frame-Navigation { z-index: 2100; } /* mobile only */
   .Litho-Frame-Navigation-Overlay { z-index: 2000; } /* mobile only */
   .Litho-Frame-Content.Litho-Frame-Content--InIframe iframe { z-index: 1900; }
@@ -1227,4 +1243,50 @@
   30% {
     opacity: 1;
   }
+}
+
+/* Stack fill children */
+.Litho-Stack--fill > * {
+  flex: 1 1 0%;
+  min-width: 0;
+}
+
+@media (width >= theme(--breakpoint-xs)) {
+  .Litho-Stack--fill-xs > * {
+    flex: 1 1 0%;
+    min-width: 0;
+  }
+}
+
+@media (width >= theme(--breakpoint-sm)) {
+  .Litho-Stack--fill-sm > * {
+    flex: 1 1 0%;
+    min-width: 0;
+  }
+}
+
+@media (width >= theme(--breakpoint-md)) {
+  .Litho-Stack--fill-md > * {
+    flex: 1 1 0%;
+    min-width: 0;
+  }
+}
+
+@media (width >= theme(--breakpoint-lg)) {
+  .Litho-Stack--fill-lg > * {
+    flex: 1 1 0%;
+    min-width: 0;
+  }
+}
+
+@media (width >= theme(--breakpoint-xl)) {
+  .Litho-Stack--fill-xl > * {
+    flex: 1 1 0%;
+    min-width: 0;
+  }
+}
+
+/* Layout: scrollSectionsIndependently full-bleed inside Page */
+.Litho-Page__Content:has(.Litho-Layout--scrollSectionsIndependently) {
+  padding: 0 !important;
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@heymantle/litho",
   "description": "Litho is a library of components for building Mantle extensions",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "type": "module",
   "main": "./dist/esm/index.js",
   "module": "./dist/esm/index.js",
@@ -47,7 +47,12 @@
     "build-and-publish": "./dev/verify-publish.mjs && npm publish",
     "verify-publish": "./dev/verify-publish.mjs",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "test:visual": "npx playwright test",
+    "test:visual:update": "npx playwright test --update-snapshots",
+    "test:visual:docker": "docker compose -f docker-compose.playwright.yml run --rm playwright sh -c 'npm ci && npx playwright test'",
+    "test:visual:docker:update": "docker compose -f docker-compose.playwright.yml run --rm playwright sh -c 'npm ci && npx playwright test --update-snapshots'",
+    "test:visual:docker:update-missing": "docker compose -f docker-compose.playwright.yml run --rm -e UPDATE_MISSING_ONLY=true playwright sh -c 'npm ci && npx playwright test --update-snapshots'"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -59,6 +64,7 @@
     "@uiw/react-color-sketch": "^2.8.0",
     "dayjs": "^1.11.7",
     "events": "^3.3.0",
+    "lucide-react": "^0.575.0",
     "react-datepicker": "^8.1.0",
     "tailwind-variants": "^0.3.1",
     "use-debounce": "^9.0.4"
@@ -66,6 +72,7 @@
   "devDependencies": {
     "@babel/core": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
+    "@playwright/test": "^1.57.0",
     "@storybook/addon-docs": "^9.1.13",
     "@storybook/addon-onboarding": "^9.1.13",
     "@storybook/react-vite": "^9.1.13",
@@ -76,12 +83,14 @@
     "@types/react-dom": "^19.1.9",
     "@vitejs/plugin-react": "^4.7.0",
     "babel-loader": "^10.0.0",
+    "concurrently": "^9.2.1",
     "css-loader": "^7.1.2",
+    "http-server": "^14.1.1",
     "postcss": "^8.5.6",
     "postcss-loader": "^8.1.1",
     "prop-types": "^15.8.1",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "semver": "^7.7.2",
     "storybook": "^9.1.13",
     "style-loader": "^4.0.0",
@@ -89,7 +98,8 @@
     "typescript": "^5.9.2",
     "use-immer": "^0.11.0",
     "vite": "^7.0.6",
+    "wait-on": "^9.0.3",
     "zx": "^8.7.1"
   },
   "license": "MIT"
-}
+}