@finsweet/webflow-apps-utils 1.0.36 → 1.0.38

package/dist/ui/components/regions/types.d.ts

@@ -18,6 +18,7 @@ export interface UsedRegions {
     isGlobalUsed: boolean;
     isEUGroupUsed: boolean;
     byInstance: Map<string, Set<string>>;
+    instanceNames?: Map<string, string>;
 }
 export interface RegionSelectorProps {
     regionGroups: RegionGroup[];
@@ -25,8 +26,10 @@ export interface RegionSelectorProps {
     onRegionsChange?: (regions: string[]) => void;
     usedRegions?: UsedRegions;
     isLoading?: boolean;
+    showSelectionDisplay?: boolean;
     error?: string;
     maxVisibleBadges?: number;
     searchPlaceholder?: string;
+    hide?: string[];
     class?: string;
 }

package/dist/ui/components/section/Section.svelte

@@ -223,7 +223,7 @@
 	}
 
 	.section-wrap.clickable:hover:not(.disabled) {
-		background: var(--defaultLightHover);
+		background: rgba(255, 255, 255, 0.05);
 		opacity: 0.8;
 	}
 
@@ -239,7 +239,7 @@
 	/* Active state */
 	.section-wrap.active {
 		border-bottom: 1px solid var(--background2);
-		background: var(--defaultLightActive);
+		background: rgba(255, 255, 255, 0.03);
 	}
 
 	/* Disabled state */

package/dist/ui/components/select/Select.svelte

@@ -95,8 +95,7 @@
 	const dropdownStyles = $derived(() => {
 		const base = {
 			borderRadius: 'var(--border-radius, 4px)',
-			background:
-				'var(--Action-actionSecondaryBackground, linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.10) 100%), rgba(255, 255, 255, 0.08))',
+			background: 'var(--background2)',
 			boxShadow: '0px 0.5px 1px 0px #000, 0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.12) inset'
 		};
 
@@ -124,8 +123,7 @@
 		if (isHovered) {
 			return {
 				...base,
-				background:
-					'var(--Action-actionSecondaryBackgroundHover, linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.16) 100%), rgba(255, 255, 255, 0.14))'
+				background: 'var(--background3)'
 			};
 		}
 
@@ -667,7 +665,7 @@
 	}
 
 	.dropdown-list :global(.dropdown-item.hover-state) {
-		outline: 1px solid var(--blueBorder);
+		background: var(--background3);
 	}
 
 	.dropdown-list {
@@ -680,7 +678,7 @@
 		gap: 4px;
 		border-radius: 4px;
 		border: 1px solid var(--border-border-1, #363636);
-		background: var(--background3, #383838);
+		background: var(--background2, #383838);
 		box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
 
 		overflow-y: auto;
@@ -726,7 +724,7 @@
 		padding: 4px 8px;
 		gap: 4px;
 		align-self: stretch;
-		color: var(--text-text-1, #d9d9d9);
+		color: var(--text1);
 
 		font-size: 11px;
 		font-style: normal;

package/dist/ui/components/text/Text.svelte

@@ -234,7 +234,8 @@
 		const styles = [
 			`font-weight: ${computedFontWeight()}`,
 			`font-size: ${computedFontSize()}`,
-			`color: ${fontColor}`
+			`color: ${fontColor}`,
+			'word-break: normal'
 		];
 
 		if (capitalize) styles.push('text-transform: capitalize');
@@ -821,13 +822,14 @@
 
 	.labels.link-hover:hover:not(.disabled),
 	.labels.link-hover.is-busy {
-		background-color: var(--defaultLightHover);
+		background-color: rgba(255, 255, 255, 0.05);
 		border-radius: 4px;
 	}
 
 	.labels :global(.target .message) {
 		font-weight: 500;
 		font-size: 11px;
+		word-break: normal;
 	}
 
 	.labels.disabled,

package/dist/ui/components/tooltip/Tooltip.svelte

@@ -40,7 +40,7 @@
 		fallbackPlacements = [],
 		stopPropagation = true,
 		fontColor = 'var(--text2)',
-		bgColor = '',
+		bgColor = 'var(--background2)',
 		class: className = '',
 		targetClassName = '',
 		target,
@@ -331,9 +331,7 @@
 		bind:this={tooltipElement}
 		role="tooltip"
 		id={tooltipId}
-		style="position:{position}; width:{width}; padding:{padding}; {bgColor
-			? `background-color: ${bgColor};`
-			: ''}"
+		style="position:{position}; width:{width}; padding:{padding}; background-color: {bgColor};"
 	>
 		{#if tooltipIcon}
 			{@const Icon = tooltipIcon}
@@ -359,7 +357,7 @@
 				class="arrow"
 				id="arrow_{tooltipId}"
 				bind:this={arrowElement}
-				style={bgColor ? `background-color: ${bgColor};` : ''}
+				style="background-color: ${bgColor};"
 			></div>
 		{/if}
 	</div>
@@ -367,12 +365,12 @@
 
 <style>
 	.message {
-		background: var(--background3, #383838);
 		text-wrap: normal;
 		white-space: normal;
 		color: var(--text2, #b9b9b9);
 		font-weight: 500;
 		font-size: 11px;
+		word-break: normal;
 	}
 	.target {
 		display: inline-flex;
@@ -383,14 +381,10 @@
 		left: 0;
 		z-index: 99999999999;
 		border-radius: 4px;
-		background: var(--background3, #383838);
 		box-shadow:
-			0px 12px 24px 8px rgb(0 0 0 / 30%),
-			0px 8px 16px 4px rgb(0 0 0 / 30%),
-			0px 4px 8px 2px rgb(0 0 0 / 0%),
-			0px 2px 6px 0px rgba(0, 0, 0, 0.08),
-			0px -0.5px 0.5px 0px rgb(0 0 0 / 0%) inset,
-			0px 0.5px 0.5px 0px rgb(255 255 255 / 34%) inset;
+			0 0.5px 1px 0 #000,
+			0 0.5px 0.5px 0 rgba(255, 255, 255, 0.12) inset;
+
 		color: var(--text2, #b9b9b9);
 
 		line-height: 120%;
@@ -403,7 +397,6 @@
 	}
 	.arrow {
 		z-index: 1;
-		background: var(--background3, #383838);
 		position: absolute;
 		width: 8px;
 		height: 8px;

package/dist/ui/index.css

@@ -6,53 +6,33 @@
 	--sb-thumb-color: #373737;
 	--sb-size: 6px;
 
-	/* Webflow colors */
-	--background1: #292929;
-	--black: #000000;
-	--background2: #353535;
+	--background1: #1e1e1e;
+	--background2: #2e2e2e;
 	--background3: #383838;
-	--background-background-3: #363636;
 	--background4: #373737;
-	--background5: #404040;
-	--backgroundInactive: #292929;
-	--backgroundInverse: #e8e8e8;
-	--backgroundInput: rgba(0, 0, 0, 0.22);
-	--Background-background4: #2b2b2b;
+	--background5: #444444;
+	--backgroundInactive: #2e2e2e;
+	--backgroundInverse: #ebebeb;
+	--black: #000000;
 
 	--actionPrimaryBackground: #006acc;
 	--actionPrimaryBackgroundHover: #187cd9;
-	--actionSecondaryBackground:
-		linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.1) 100%),
-		var(--background3);
-	--actionSecondaryBackgroundHover: linear-gradient(
-		180deg,
-		rgba(255, 255, 255, 0.18) 0%,
-		rgba(255, 255, 255, 0.16) 100%
-	);
 	--actionPrimaryText: #ffffff;
 	--actionPrimaryTextHover: #ffffff;
 	--actionSecondaryText: #e0e0e0;
 	--actionSecondaryTextHover: #e0e0e0;
 
-	--defaultLightHover: rgba(255, 255, 255, 0.05);
-	--defaultLightActive: rgba(255, 255, 255, 0.03);
+	--text1: #ebebeb;
+	--text2: #b9b9b9;
+	--text3: #a3a3a3;
+	--textInactive: #6d6d6d;
+	--textInverse: #171717;
 
-	--border1: rgba(255, 255, 255, 0.13);
-	--border2: rgba(255, 255, 255, 0.16);
+	--border1: rgba(255, 255, 255, 0.1);
+	--border2: rgba(255, 255, 255, 0.14);
 	--border3: rgba(255, 255, 255, 0.19);
-	/* removing token --border4 */
-
-	--text1: #ffffff;
-	--text2: rgba(255, 255, 255, 0.67);
-	--text3: rgba(255, 255, 255, 0.67);
-	--text-text-2: #ababab;
-	--text-text-1: #d9d9d9;
-
-	--action-action-secondary-background: #484848;
-
-	--text4: #696969;
-	--textInactive: rgba(255, 255, 255, 0.5);
-	--textInverse: #000000;
+	--actionSecondaryBorder: rgba(255, 255, 255, 0.1);
+	--actionSecondaryBorderHover: rgba(255, 255, 255, 0.15);
 
 	--blueText: #8ac2ff;
 	--blueIcon: #8ac2ff;
@@ -60,15 +40,15 @@
 
 	--greenBackground: #007a41;
 	--greenBackgroundHover: #0d8a4f;
-	--greenText: #79e09c;
-	--greenIcon: #79e09c;
+	--greenText: #63d489;
+	--greenIcon: #63d489;
 	--greenBorder: #259d4d;
-	--yellowBackground: #946b00;
 
+	--yellowBackground: #946b00;
 	--yellowBackgroundHover: #af7f00;
 	--yellowText: #f3c831;
 	--yellowIcon: #f3c831;
-	--yellowBorder: #ffd301;
+	--yellowBorder: #d7a220;
 
 	--redBackground: #cf313b;
 	--redBackgroundHover: #cb3535;
@@ -76,16 +56,16 @@
 	--redIcon: #ff8a8a;
 	--redBorder: #e42f3a;
 
-	--orangeBackground: #bf4707;
+	--orangeBackground: #bf4704;
 	--orangeBackgroundHover: #c95616;
-	--orangeText: #ffbc86;
-	--orangeIcon: #ffbc86;
+	--orangeText: #eba267;
+	--orangeIcon: #eba267;
 	--orangeBorder: #df640c;
 
 	--purpleBackground: #734ce0;
 	--purpleBackgroundHover: #815beb;
-	--purpleText: #c4afff;
-	--purpleIcon: #c4afff;
+	--purpleText: #b89eff;
+	--purpleIcon: #b89eff;
 	--purpleBorder: #875ffd;
 
 	/* Box shadows for buttons and inputs */

package/dist/ui/providers/GlobalProviderDemo.svelte

@@ -226,13 +226,13 @@
 	}
 
 	.btn--secondary {
-		background: var(--actionSecondaryBackground);
+		background: var(--background4);
 		color: var(--actionSecondaryText);
 		box-shadow: var(--boxShadows-action-secondary);
 	}
 
 	.btn--secondary:hover {
-		background: var(--actionSecondaryBackgroundHover);
+		background: var(--background5);
 		color: var(--actionSecondaryTextHover);
 	}
 

package/dist/ui/stores/forms/FormDemo.svelte

@@ -427,13 +427,13 @@
 	}
 
 	.btn--secondary {
-		background: var(--actionSecondaryBackground);
+		background: var(--background4);
 		color: var(--actionSecondaryText);
 		box-shadow: var(--boxShadows-action-secondary);
 	}
 
 	.btn--secondary:hover:not(:disabled) {
-		background: var(--actionSecondaryBackgroundHover);
+		background: var(--background5);
 		color: var(--actionSecondaryTextHover);
 	}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@finsweet/webflow-apps-utils",
-  "version": "1.0.36",
+  "version": "1.0.38",
   "description": "Shared utilities for Webflow apps",
   "homepage": "https://github.com/finsweet/webflow-apps-utils",
   "repository": {