@finsweet/webflow-apps-utils 1.0.37 → 1.0.39

package/dist/ui/components/button/Button.svelte

@@ -298,7 +298,7 @@
 
 	.button--secondary {
 		background: var(
-			--actionSecondaryBackground,
+			--background4,
 			linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.1) 100%),
 			rgba(255, 255, 255, 0.08)
 		);
@@ -307,7 +307,7 @@
 
 	.button--secondary:hover:not(:disabled) {
 		background: var(
-			--actionSecondaryBackgroundHover,
+			--background5,
 			linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.16) 100%)
 		);
 	}

package/dist/ui/components/button-group/ButtonGroup.svelte

@@ -53,7 +53,7 @@
 	.btn-group {
 		display: flex;
 		background: var(
-			--action-action-secondary-background,
+			--background5,
 			linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.1) 100%)
 		);
 		border-radius: var(--border-radius);

package/dist/ui/components/color-picker/ColorSelect.svelte

@@ -1092,7 +1092,7 @@
 	.input {
 		width: 100%;
 		padding: 4px;
-		background: var(--backgroundInput);
+		background: var(--background1);
 		border: 1px solid var(--border2);
 		border-radius: 4px;
 		color: var(--text1, #ebebeb);

package/dist/ui/components/input/Input.svelte

@@ -577,7 +577,7 @@
 	.stepper-button {
 		border: none;
 		width: 16px;
-		background-color: var(--actionSecondaryBackground);
+		background-color: var(--background4);
 		color: var(--text2);
 		font-size: 0.8em;
 		line-height: 1;

package/dist/ui/components/layout/examples/ExampleLayout.svelte

@@ -513,7 +513,7 @@
 	}
 
 	.toggle-control:hover {
-		background: var(--defaultLightHover);
+		background: rgba(255, 255, 255, 0.05);
 	}
 
 	.checkbox-input {

package/dist/ui/components/modal/Modal.svelte

@@ -408,7 +408,7 @@
 
 	.modal-content {
 		border-radius: var(--border-radius);
-		background: var(--background1);
+		background: var(--background2);
 		color: var(--text1);
 		position: relative;
 		display: flex;

package/dist/ui/components/notification/Notification.svelte

@@ -212,7 +212,7 @@
 		gap: 8px;
 		align-self: stretch;
 		border-radius: 4px;
-		background: var(--background3);
+		background: var(--background2);
 	}
 
 	.icon {
@@ -236,7 +236,7 @@
 	}
 
 	.message {
-		color: var(--text-text-2, #bdbdbd);
+		color: var(--text2);
 
 		font-size: 11px;
 		font-style: normal;

package/dist/ui/components/progress-bar/ProgressBar.svelte

@@ -254,7 +254,7 @@
 
 	.progress-track {
 		width: 100%;
-		background-color: var(--black);
+		background-color: #000000;
 		border-radius: 2px;
 		overflow: hidden;
 		position: relative;

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

@@ -1,58 +1,40 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600&display=swap');
 
-:root {
+html,
+body,
+#app {
 	/* custom scrollbar related */
 	--sb-track-color: #1e1e1e;
 	--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 +42,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 +58,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 */
@@ -146,6 +128,10 @@
 	/* Finsweet Components: super app specific sizes */
 	--components-navbar-height: 43px;
 	--left-sidebar-width: 274px;
+
+	height: 100%;
+	background: var(--background1);
+	font-family: var(--font-stack);
 }
 
 *,
@@ -154,16 +140,6 @@
 	box-sizing: border-box;
 }
 
-html,
-body,
-#app {
-	height: 100%;
-	background: var(--background1);
-	font-family: var(--font-stack);
-	/* Prevents layout shift when scrollbar appears, does not work in Safari browsers */
-	/* scrollbar-gutter: stable; */
-}
-
 body {
 	margin: 0;
 	color: var(--text1);

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.37",
+  "version": "1.0.39",
   "description": "Shared utilities for Webflow apps",
   "homepage": "https://github.com/finsweet/webflow-apps-utils",
   "repository": {