fix: ajusting css dark mode

cva-design · Jan 15, 2025 · 18f0e49 · 18f0e49
1 parent b3b0dbf
commit 18f0e49
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 11 deletions.
diff --git a/packages/ui/src/lib/components/checkbox/checkbox.stories.svelte b/packages/ui/src/lib/components/checkbox/checkbox.stories.svelte
@@ -5,6 +5,7 @@
 	import Checkbox from './checkbox.svelte';
 
 	export const meta = {
+		title: 'Checkbox',
 		component: Checkbox
 	} satisfies Meta<SvelteComponent>;
 </script>

diff --git a/packages/ui/src/lib/components/layer-tree/layer-tree.stories.svelte b/packages/ui/src/lib/components/layer-tree/layer-tree.stories.svelte
@@ -5,6 +5,7 @@
 	import LayerTree from './layer-tree.svelte';
 
 	export const meta = {
+		title: 'LayerTree',
 		component: LayerTree,
 		argTypes: {
 			initiallyExpanded: { control: 'boolean' },

diff --git a/packages/ui/src/lib/components/layer/layer.stories.svelte b/packages/ui/src/lib/components/layer/layer.stories.svelte
@@ -6,6 +6,7 @@
 	const IconLayerFrame16 = getIconPath('layer-frame', 16);
 
 	export const meta = {
+		title: 'Layer',
 		component: Layer,
 		parameters: {
 			fixedWidth: true
@@ -38,7 +39,7 @@
 </Story>
 
 <Story name="With Children">
-	<Layer type="FRAME" name="Frame 1" on:change on:valueChange >
+	<Layer type="FRAME" name="Frame 1" on:change on:valueChange>
 		<Layer type="COMPONENT" name="Component 1" component on:change on:valueChange />
 		<Layer type="FRAME" name="Frame 2" on:change on:valueChange />
 	</Layer>

diff --git a/packages/ui/src/lib/components/select-menu/select-item.svelte b/packages/ui/src/lib/components/select-menu/select-item.svelte
@@ -33,7 +33,7 @@
 <style lang="scss">
 	li {
 		align-items: center;
-		color: var(--figma-color-text-onbrand);
+		color: var(--color-text);
 		cursor: default;
 		display: flex;
 		font-family: var(--font-family-default);
@@ -49,6 +49,7 @@
 		transition-duration: 30ms;
 		text-wrap: nowrap;
 		white-space: nowrap;
+		background-color: var(--color-bg);
 	}
 
 	.label {

diff --git a/packages/ui/src/lib/components/select-menu/select-menu.svelte b/packages/ui/src/lib/components/select-menu/select-menu.svelte
@@ -334,18 +334,18 @@
 		padding: 4px var(--spacer-2) 0px var(--spacer-2);
 		overflow-y: hidden;
 		border-radius: var(--radius-medium);
-		background-color: var(--figma-color-bg);
+		background-color: var(--color-bg);
 	}
 	button:hover,
 	button:active {
 		border-color: var(--figma-color-border-onselected-strong);
 	}
 	button:hover .placeholder {
-		color: var(--figma-color-text);
+		color: var(--color-text);
 	}
 	button:hover .caret svg path,
 	button:focus .caret svg path {
-		fill: var(--figma-color-text);
+		fill: var(--color-text);
 	}
 	button:hover .caret,
 	button:focus .caret {
@@ -358,7 +358,7 @@
 		padding-left: calc(var(--spacer-2) + 1px);
 	}
 	button:focus .placeholder {
-		color: var(--figma-color-text);
+		color: var(--color-text);
 	}
 	button:disabled .selected-value {
 		color: var(--figma-color-text-secondary);
@@ -384,7 +384,7 @@
 		font-weight: var(--font-weight-default);
 		letter-spacing: var(--font-letter-spacing-neg-xsmall);
 		line-height: var(--line-height);
-		color: var(--figma-color-text);
+		color: var(--color-text);
 		margin-right: var(--space-2);
 		margin-top: -3px;
 		white-space: nowrap;
@@ -422,7 +422,7 @@
 		-moz-osx-font-smoothing: grayscale;
 		cursor: default;
 		padding: var(--space-2);
-		background-color: var(--color-bg-menu);
+		background-color: var(--color-bg);
 		border-radius: var(--radius-large);
 		font-size: var(--font-size-menu);
 		font-family: var(--font-family-default);

diff --git a/packages/ui/src/lib/components/tooltip/tooltip.svelte b/packages/ui/src/lib/components/tooltip/tooltip.svelte
@@ -73,22 +73,22 @@
 		z-index: 1000;
 		box-sizing: border-box;
 		padding: var(--space-1) var(--space-2);
-		background-color: var(--color-bg-tooltip);
+		background-color: var(--color-bg);
 		font-family: var(--font-family-default);
 		font-size: var(--font-size-default);
 		font-weight: var(--font-weight-default);
 		letter-spacing: var(--letter-spacing-default);
 		line-height: var(--line-height-default);
 		min-height: var(--space-6);
-		color: var(--color-text-tooltip);
+		color: var(--color-text);
 		white-space: pre-wrap;
 		word-break: break-word;
 		border-radius: var(--radius-medium);
 		box-shadow: var(--elevation-300, 0 2px 7px rgba(0, 0, 0, 0.15));
 	}
 
 	.fps-tooltip-arrow {
-		fill: var(--color-bg-tooltip);
+		fill: var(--color-bg);
 		width: var(--space-3_5);
 		height: var(--space-1_5);
 		position: relative;