fix: a lot of style issues

Signed-off-by: Saulo Vallory <[email protected]>
cva-design · Dec 28, 2024 · bc2163f · bc2163f
1 parent 3d49006
commit bc2163f
Show file tree

Hide file tree

Showing 7 changed files with 157 additions and 155 deletions.
diff --git a/packages/ui/src/lib/components/badge/badge.svelte b/packages/ui/src/lib/components/badge/badge.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { Color } from '$lib/types/colors';
 	import Text from '$ui/typography/text.svelte';
 	import { type VariantProps, cva } from 'class-variance-authority';
 	import type { HTMLAttributes } from 'svelte/elements';
@@ -26,48 +27,53 @@
 	/** Configuration object for badge colors */
 	interface ColorConfig {
 		/** Color of the dot indicator */
-		dot?: string;
+		dot?: Color;
 		/** Background color of the badge */
-		bg?: string;
+		bg?: Color;
 		/** Text color of the badge */
-		text?: string;
+		text?: Color;
+		/** Border color of the badge */
+		border?: Color;
 	}
 
 	interface $$Props extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof badge> {
 		/** Text content of the badge */
 		text?: string;
-		/** Color configuration for the badge */
-		colors?: ColorConfig;
+		/** Color configuration for the badge or a string to be used for all colors except bg */
+		colors?: ColorConfig | Color;
 		/** Whether to hide the dot indicator */
 		'no-dot'?: boolean;
 		/** @deprecated Use colors.dot instead */
-		color?: string;
+		color?: Color;
 	}
 
 	/** Text content of the badge */
 	export let text = '';
 	/** Color configuration for the badge */
-	export let colors: ColorConfig = {};
+	export let colors: ColorConfig | Color = {};
 	/** @deprecated Use colors.dot instead */
-	export let color = '';
+	export let color: Color = 'currentColor';
 	/** Whether to show action buttons */
 	export let showActions = true;
 	/** Size of the badge: 'small' | 'medium' */
 	export let size: $$Props['size'] = 'medium';
 
-  const noDot = $$props['no-dot'];
+	const noDot = $$props['no-dot'];
 
-	// Handle deprecated color prop
-	$: if (color && !colors.dot) {
-		colors = { ...colors, dot: color };
+	// Handle deprecated color prop and string colors
+	$: colorConfig =
+		typeof colors === 'string' ? { dot: colors, text: colors, border: colors } : colors;
+	$: if (color && !colorConfig.dot) {
+		colorConfig = { ...colorConfig, dot: color };
 	}
 </script>
 
 <div class="fps-Badge-wrapper">
 	<div
 		class={badge({ hasActions: showActions, size, noDot, class: $$props.class })}
-		style:background-color={colors.bg}
-		style:color={colors.text}
+		style:background-color={colorConfig.bg}
+		style:color={colorConfig.text}
+		style:border-color={colorConfig.border}
 	>
 		{#if !$$props['no-dot']}
 			<svg
@@ -80,13 +86,13 @@
 			>
 				<path
 					d="M12 8C12 10.2091 10.2091 12 8 12C5.79086 12 4 10.2091 4 8C4 5.79086 5.79086 4 8 4C10.2091 4 12 5.79086 12 8Z"
-					fill={colors.dot || color}
+					fill={colorConfig.dot || color}
 				/>
 			</svg>
 		{/if}
-		<Text emphasis="secondary" size={size}>
-      <span style:color={colors.text}>{text}</span>
-    </Text>
+		<Text emphasis="secondary" {size}>
+			<span style:color={colorConfig.text}>{text}</span>
+		</Text>
 		{#if showActions}
 			<slot name="actions">
 				<slot />

diff --git a/packages/ui/src/lib/components/input/input.svelte b/packages/ui/src/lib/components/input/input.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-	import { Icon, type IconProps } from '$ui/icon';
+	import { Icon } from '$ui';
+	import type { IconProps } from '$ui/icon';
 	import { cva, type VariantProps } from 'class-variance-authority';
 	import { createEventDispatcher } from 'svelte';
 
@@ -29,7 +30,7 @@
 	type InputVariant = NonNullable<InputVariants['variant']>;
 	type InputState = NonNullable<InputVariants['state']>;
 
-	type $$Props = Partial<IconProps> & {
+	type $$Props = {
 		value?: string | null;
 		id?: string | null;
 		name?: string | null;
@@ -40,6 +41,12 @@
 		errorMessage?: string;
 		placeholder?: string;
 		quiet?: boolean;
+		icon?: IconProps['icon'];
+		iconText?: string;
+		spin?: boolean;
+		class?: string;
+		'aria-label'?: string;
+		'aria-describedby'?: string;
 	};
 
 	export let value: string | null = null;
@@ -52,6 +59,9 @@
 	export let errorMessage: string = 'Error message';
 	export let placeholder: string = 'Input something here...';
 	export let quiet: boolean = false;
+	export let icon: IconProps['icon'] = undefined;
+	export let iconText: string | undefined = undefined;
+	export let spin = false;
 
 	const dispatch = createEventDispatcher();
 
@@ -79,10 +89,6 @@
 		dispatch('blur', event);
 	}
 
-	const icon = $$props.icon;
-	const iconText = $$props.iconText;
-	const spin = $$props.spin;
-
 	$: variant = borders
 		? ('bordered' as InputVariant)
 		: quiet
@@ -100,56 +106,40 @@
 	});
 </script>
 
-{#if icon || iconText}
-	<div class="input-wrapper {$$props.class}">
+<div class="input-wrapper {$$props.class}">
+	{#if icon}
+		<div class="icon">
+			<Icon {icon} {spin} color="--figma-color-icon" />
+		</div>
+	{:else if iconText}
 		<div class="icon">
-			<Icon {icon} {iconText} {spin} color="--figma-color-icon" />
+			<Icon {iconText} {spin} color="--figma-color-icon" />
 		</div>
-		<input
-			use:typeAction
-			on:input={handleInput}
-			on:change={handleChange}
-			on:keydown={handleKeydown}
-			on:focus={handleFocus}
-			on:blur={handleBlur}
-			bind:value
-			{id}
-			{name}
-			{disabled}
-			{placeholder}
-			class={inputClass}
-			data-error-message={errorMessage}
-		/>
-		{#if invalid}
-			<div class="error">
-				{errorMessage}
-			</div>
-		{/if}
-	</div>
-{:else}
-	<div class="input-wrapper {$$props.class}">
-		<input
-			use:typeAction
-			on:input={handleInput}
-			on:change={handleChange}
-			on:keydown={handleKeydown}
-			on:focus={handleFocus}
-			on:blur={handleBlur}
-			bind:value
-			{id}
-			{name}
-			{disabled}
-			{placeholder}
-			class={inputClass}
-			data-error-message={errorMessage}
-		/>
-		{#if invalid}
-			<div class="error">
-				{errorMessage}
-			</div>
-		{/if}
-	</div>
-{/if}
+	{/if}
+	<input
+		use:typeAction
+		on:input={handleInput}
+		on:change={handleChange}
+		on:keydown={handleKeydown}
+		on:focus={handleFocus}
+		on:blur={handleBlur}
+		bind:value
+		{id}
+		{name}
+		{disabled}
+		{placeholder}
+		class={inputClass}
+		data-error-message={errorMessage}
+		aria-invalid={invalid}
+		aria-label={$$props['aria-label']}
+		aria-describedby={invalid ? `${id}-error` : $$props['aria-describedby']}
+	/>
+	{#if invalid}
+		<div class="error" id="{id}-error" role="alert">
+			{errorMessage}
+		</div>
+	{/if}
+</div>
 
 <style lang="scss">
 	.input-wrapper {
@@ -248,7 +238,7 @@
 	}
 
 	:global(.indent) {
-		padding-left: 32px;
+		padding-left: calc(32px + var(--spacer-2));
 	}
 
 	:global(.invalid),
@@ -259,11 +249,14 @@
 
 	.icon {
 		position: absolute;
-		top: -4px;
-		left: 0;
-		width: var(--spacer-5);
-		height: var(--spacer-5);
+		top: 50%;
+		left: var(--spacer-2);
+		transform: translateY(-50%);
 		z-index: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		pointer-events: none;
 	}
 
 	.error {

diff --git a/packages/ui/src/lib/components/layer-tree/layer-tree.svelte b/packages/ui/src/lib/components/layer-tree/layer-tree.svelte
@@ -90,7 +90,7 @@
 <div class="layerTree-wrapper">
 	<div class="search-container">
 		<Input
-			icon="SearchSvg"
+			icon="SearchSvg_32"
 			class="search-input"
 			bind:value={searchQuery}
 			placeholder="Search layers..."

diff --git a/packages/ui/src/lib/components/select-menu/select-menu.svelte b/packages/ui/src/lib/components/select-menu/select-menu.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { clickOutside } from '$actions/click-outside';
 	import type * as icons from '$icons';
-	import { Icon } from '$ui/icon';
+	import { Icon, Text } from '$ui';
 	import { createEventDispatcher, onMount } from 'svelte';
 	import SelectDivider from './select-divider.svelte';
 	import SelectItem from './select-item.svelte';
@@ -174,10 +174,13 @@
 			}, i * interval);
 		}
 
-		setTimeout(() => {
-			menuList.classList.add('hidden');
-			menuButton.classList.remove('selected');
-		}, interval * blinkCount + 40);
+		setTimeout(
+			() => {
+				menuList.classList.add('hidden');
+				menuButton.classList.remove('selected');
+			},
+			interval * blinkCount + 40
+		);
 	}
 
 	function resetMenuProperties() {
@@ -205,9 +208,9 @@
 		{/if}
 
 		{#if value}
-			<span class="label">{value.label}</span>
+			<Text class="label">{value.label}</Text>
 		{:else}
-			<span class="placeholder">{placeholder}</span>
+			<Text emphasis="tertiary" class="placeholder">{placeholder}</Text>
 		{/if}
 
 		{#if !disabled}

diff --git a/packages/ui/src/lib/components/tabs/tabs-trigger.svelte b/packages/ui/src/lib/components/tabs/tabs-trigger.svelte
@@ -80,7 +80,7 @@
 		}
 
 		&:where(.fps-disabled) {
-			cursor: not-allowed;
+			cursor: default;
 			opacity: 0.5;
 		}