fix: remove aliases

launchdarkly · Oct 14, 2024 · 07e5d57 · 07e5d57
1 parent 54563c3
commit 07e5d57
Show file tree

Hide file tree

Showing 14 changed files with 35 additions and 79 deletions.
diff --git a/.changeset/eighty-avocados-add.md b/.changeset/eighty-avocados-add.md
@@ -12,6 +12,7 @@
 "@launchpad-ui/popover": patch
 "@launchpad-ui/menu": patch
 "@launchpad-ui/select": patch
+"@launchpad-ui/form": patch
 "@launchpad-ui/core": patch
 ---
 

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -113,6 +113,10 @@ export const parameters: Parameters = {
 					id: 'aria-hidden-focus',
 					selector: 'body *:not([data-a11y-ignore="aria-hidden-focus"])',
 				},
+				{
+					id: 'color-contrast',
+					selector: '*:not([data-placeholder])',
+				},
 			],
 		},
 	},

diff --git a/packages/components/src/styles/Alert.module.css b/packages/components/src/styles/Alert.module.css
@@ -7,16 +7,16 @@
 		margin-top: var(--lp-spacing-300);
 	}
 
-	&.error .icon {
-		color: var(--lp-color-fill-feedback-error);
+	&.error [data-icon] {
+		fill: var(--lp-color-fill-feedback-error);
 	}
 
-	&.info .icon {
-		color: var(--lp-color-fill-feedback-info);
+	&.info [data-icon] {
+		fill: var(--lp-color-fill-feedback-info);
 	}
 
-	&.success .icon {
-		color: var(--lp-color-fill-feedback-success);
+	&.success [data-icon] {
+		fill: var(--lp-color-fill-feedback-success);
 	}
 }
 
@@ -52,6 +52,18 @@
 	align-items: center;
 	padding: 0;
 	background-color: transparent;
+
+	&.error {
+		color: var(--lp-color-text-feedback-error);
+	}
+
+	&.info {
+		color: var(--lp-color-text-feedback-info);
+	}
+
+	&.success {
+		color: var(--lp-color-text-feedback-success);
+	}
 }
 
 .content {

diff --git a/packages/components/src/styles/Checkbox.module.css b/packages/components/src/styles/Checkbox.module.css
@@ -55,13 +55,6 @@
 		& .box {
 			border-color: var(--lp-color-border-field-error);
 		}
-
-		&[data-selected],
-		&[data-indeterminate] {
-			& .box {
-				background-color: var(--lp-color-bg-field-error);
-			}
-		}
 	}
 
 	&[data-focus-visible]:is([data-selected], [data-indeterminate]) {

diff --git a/packages/components/src/styles/Group.module.css b/packages/components/src/styles/Group.module.css
@@ -28,4 +28,8 @@
 		background-color: inherit;
 		cursor: inherit;
 	}
+
+	& [data-icon] {
+		fill: var(--lp-color-fill-ui-secondary);
+	}
 }
diff --git a/packages/components/src/styles/Radio.module.css b/packages/components/src/styles/Radio.module.css
@@ -48,11 +48,5 @@
 		& .circle {
 			border-color: var(--lp-color-border-field-error);
 		}
-
-		&[data-selected] {
-			& .icon {
-				fill: var(--lp-color-bg-field-error);
-			}
-		}
 	}
 }
diff --git a/packages/components/src/styles/Toast.module.css b/packages/components/src/styles/Toast.module.css
@@ -143,7 +143,6 @@
 
 .description {
 	font: var(--lp-text-body-2-regular);
-	color: var(--lp-color-text-ui-secondary);
 
 	& a {
 		text-decoration: underline;

diff --git a/packages/components/stories/Modal.stories.tsx b/packages/components/stories/Modal.stories.tsx
@@ -1,8 +1,6 @@
 import type { Meta, ReactRenderer, StoryFn, StoryObj } from '@storybook/react';
-import type { PlayFunction } from '@storybook/types';
-
-import { Icon } from '@launchpad-ui/icons';
 import { expect, userEvent, within } from '@storybook/test';
+import type { PlayFunction } from '@storybook/types';
 
 import { allModes } from '../../../.storybook/modes';
 import {
@@ -46,7 +44,7 @@ export default meta;
 
 type Story = StoryObj<typeof Modal>;
 
-const renderModal = (args: Story['args'], destructive = false) => (
+const renderModal = (args: Story['args']) => (
 	<DialogTrigger>
 		<Button>Trigger</Button>
 		<ModalOverlay>
@@ -55,14 +53,6 @@ const renderModal = (args: Story['args'], destructive = false) => (
 					{({ close }) => (
 						<>
 							<div slot="header">
-								{destructive && (
-									<Icon
-										name="alert-rhombus"
-										size="medium"
-										variant={null}
-										fill="var(--lp-color-fill-feedback-error)"
-									/>
-								)}
 								<Heading slot="title">Title</Heading>
 								<IconButton
 									aria-label="close"
@@ -120,8 +110,3 @@ export const Drawer: Story = {
 		},
 	},
 };
-
-export const Destructive: Story = {
-	render: (args) => renderModal(args, true),
-	play,
-};
diff --git a/packages/form/src/styles/Form.module.css b/packages/form/src/styles/Form.module.css
@@ -329,7 +329,7 @@ input[type='checkbox']:disabled {
 
 .suffixContainer .suffix {
 	padding: 0 2px;
-	background-color: var(--lp-color-bg-field-aside);
+	background-color: light-dark(var(--lp-color-bg-ui-secondary), var(--lp-color-bg-ui-primary));
 	color: var(--lp-color-text-ui-secondary);
 	cursor: text;
 	display: inline-flex;

diff --git a/packages/icons/src/styles/Icon.module.css b/packages/icons/src/styles/Icon.module.css
@@ -5,7 +5,7 @@
 }
 
 .default {
-	fill: currentcolor;
+	fill: var(--lp-color-fill-ui-primary);
 }
 
 .subtle {

diff --git a/packages/modal/src/styles/Modal.module.css b/packages/modal/src/styles/Modal.module.css
@@ -74,13 +74,13 @@
 
 .headerDescription {
 	font-size: 0.875rem;
-	color: var(--lp-color-text-overlay-primary);
+	color: var(--lp-color-text-ui-secondary);
 	margin: 0;
 }
 
 .headerRequiredFields {
 	font-size: 0.875rem;
-	color: var(--lp-color-text-overlay-primary);
+	color: var(--lp-color-text-ui-secondary);
 	font-weight: var(--lp-font-weight-regular);
 }
 

diff --git a/packages/tokens/src/color-aliases.json b/packages/tokens/src/color-aliases.json
@@ -129,13 +129,6 @@
 				},
 				"disabled": {
 					"$value": "{color.bg.ui.tertiary}"
-				},
-				"error": {
-					"$value": "{color.red.600}"
-				},
-				"aside": {
-					"$value": "{color.bg.ui.secondary}",
-					"dark": "{color.bg.ui.primary}"
 				}
 			},
 			"product": {
@@ -146,14 +139,6 @@
 				"federal": {
 					"$value": "{color.brand.yellow.base}",
 					"dark": "{color.brand.yellow.dark}"
-				},
-				"toggle-on": {
-					"$value": "{color.green.600}",
-					"dark": "{color.green.700}"
-				},
-				"toggle-off": {
-					"$value": "{color.gray.100}",
-					"dark": "{color.gray.800}"
 				}
 			}
 		},
@@ -373,16 +358,6 @@
 					"dark": "{color.gray.400}"
 				}
 			},
-			"overlay": {
-				"primary": {
-					"$value": "{color.gray.800}",
-					"dark": "{color.gray.100}"
-				},
-				"secondary": {
-					"$value": "{color.white.950}",
-					"dark": "{color.gray.950}"
-				}
-			},
 			"field": {
 				"disabled": {
 					"$value": "{color.gray.500}"
@@ -398,18 +373,6 @@
 				},
 				"federal": {
 					"$value": "{color.gray.950}"
-				},
-				"toggle-on": {
-					"$value": "{color.green.700}",
-					"dark": "{color.green.500}"
-				},
-				"toggle-off": {
-					"$value": "{color.gray.800}",
-					"dark": "{color.gray.200}"
-				},
-				"ready-to-complete": {
-					"$value": "{color.purple.700}",
-					"dark": "{color.purple.500}"
 				}
 			},
 			"code": {

diff --git a/packages/tooltip/src/styles/Tooltip.module.css b/packages/tooltip/src/styles/Tooltip.module.css
@@ -1,7 +1,7 @@
 :root,
 [data-theme='default'] {
 	--lp-component-popover-color-bg: var(--lp-color-gray-950);
-	--lp-component-popover-color-text: var(--lp-color-text-overlay-secondary);
+	--lp-component-popover-color-text: var(--lp-color-white-950);
 	--lp-component-popover-color-border: inherit;
 }
 

diff --git a/playwright/a11y.spec.ts b/playwright/a11y.spec.ts
@@ -89,6 +89,7 @@ test.describe('Storybook a11y', async () => {
 					.include('[data-rac]')
 					.include('[data-react-aria-top-layer]')
 					.exclude('[data-a11y-ignore="aria-hidden-focus"]')
+					.exclude('[data-placeholder]')
 					.analyze();
 
 				await expect(accessibilityScanResults.violations).toEqual([]);