diff --git a/.changeset/migrate-separator-to-css-modules.md b/.changeset/migrate-separator-to-css-modules.md
new file mode 100644
index 000000000..acdb59e6e
--- /dev/null
+++ b/.changeset/migrate-separator-to-css-modules.md
@@ -0,0 +1,5 @@
+---
+'@clickhouse/click-ui': patch
+---
+
+Migrate Separator from styled-components to css modules with no change in behavior
diff --git a/src/components/Separator/Separator.module.css b/src/components/Separator/Separator.module.css
new file mode 100644
index 000000000..c0f8be873
--- /dev/null
+++ b/src/components/Separator/Separator.module.css
@@ -0,0 +1,81 @@
+.separator[data-orientation='horizontal'] {
+  width: 100%;
+  border-top: 0.0625rem solid var(--click-separator-color-stroke-default);
+}
+
+.separator[data-orientation='vertical'] {
+  height: 100%;
+  border-right: 0.0625rem solid var(--click-separator-color-stroke-default);
+}
+
+.separator_variant_horizontal-xs {
+  margin:
+    var(--click-separator-horizontal-space-y-xs)
+    var(--click-separator-horizontal-space-x-all);
+}
+
+.separator_variant_horizontal-sm {
+  margin:
+    var(--click-separator-horizontal-space-y-sm)
+    var(--click-separator-horizontal-space-x-all);
+}
+
+.separator_variant_horizontal-md {
+  margin:
+    var(--click-separator-horizontal-space-y-md)
+    var(--click-separator-horizontal-space-x-all);
+}
+
+.separator_variant_horizontal-lg {
+  margin:
+    var(--click-separator-horizontal-space-y-lg)
+    var(--click-separator-horizontal-space-x-all);
+}
+
+.separator_variant_horizontal-xl {
+  margin:
+    var(--click-separator-horizontal-space-y-xl)
+    var(--click-separator-horizontal-space-x-all);
+}
+
+.separator_variant_horizontal-xxl {
+  margin:
+    var(--click-separator-horizontal-space-y-xxl)
+    var(--click-separator-horizontal-space-x-all);
+}
+
+.separator_variant_vertical-xs {
+  margin:
+    var(--click-separator-vertical-space-y-all)
+    var(--click-separator-vertical-space-x-xs);
+}
+
+.separator_variant_vertical-sm {
+  margin:
+    var(--click-separator-vertical-space-y-all)
+    var(--click-separator-vertical-space-x-sm);
+}
+
+.separator_variant_vertical-md {
+  margin:
+    var(--click-separator-vertical-space-y-all)
+    var(--click-separator-vertical-space-x-md);
+}
+
+.separator_variant_vertical-lg {
+  margin:
+    var(--click-separator-vertical-space-y-all)
+    var(--click-separator-vertical-space-x-lg);
+}
+
+.separator_variant_vertical-xl {
+  margin:
+    var(--click-separator-vertical-space-y-all)
+    var(--click-separator-vertical-space-x-xl);
+}
+
+.separator_variant_vertical-xxl {
+  margin:
+    var(--click-separator-vertical-space-y-all)
+    var(--click-separator-vertical-space-x-xxl);
+}
diff --git a/src/components/Separator/Separator.stories.tsx b/src/components/Separator/Separator.stories.tsx
index 2fae836c0..4f103ca12 100644
--- a/src/components/Separator/Separator.stories.tsx
+++ b/src/components/Separator/Separator.stories.tsx
@@ -1,5 +1,6 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
 import { Separator } from '@/components/Separator';
+import type { SeparatorProps } from './Separator.types';
 
 const meta: Meta<typeof Separator> = {
   component: Separator,
@@ -11,9 +12,118 @@ export default meta;
 
 type Story = StoryObj<typeof Separator>;
 
+const HorizontalHarness = ({ size }: { size: SeparatorProps['size'] }) => (
+  <div
+    data-testid="separator-harness"
+    style={{
+      display: 'inline-flex',
+      flexDirection: 'column',
+      alignItems: 'stretch',
+      width: '160px',
+      background: '#888',
+    }}
+  >
+    <div style={{ height: '24px', background: '#222' }} />
+    <Separator
+      size={size}
+      orientation="horizontal"
+    />
+    <div style={{ height: '24px', background: '#222' }} />
+  </div>
+);
+
+const DefaultHarness = ({ size }: { size: SeparatorProps['size'] }) => (
+  <div
+    data-testid="separator-harness"
+    style={{
+      display: 'inline-flex',
+      flexDirection: 'column',
+      alignItems: 'stretch',
+      width: '160px',
+      background: '#888',
+    }}
+  >
+    <div style={{ height: '24px', background: '#222' }} />
+    <Separator size={size} />
+    <div style={{ height: '24px', background: '#222' }} />
+  </div>
+);
+
+const VerticalHarness = ({ size }: { size: SeparatorProps['size'] }) => (
+  <div
+    data-testid="separator-harness"
+    style={{
+      display: 'inline-flex',
+      flexDirection: 'row',
+      alignItems: 'stretch',
+      height: '80px',
+      background: '#888',
+    }}
+  >
+    <div style={{ width: '24px', background: '#222' }} />
+    <Separator
+      size={size}
+      orientation="vertical"
+    />
+    <div style={{ width: '24px', background: '#222' }} />
+  </div>
+);
+
 export const Playground: Story = {
   args: {
     size: 'xs',
     orientation: 'horizontal',
   },
 };
+
+export const HorizontalXs: Story = {
+  render: () => <HorizontalHarness size="xs" />,
+};
+
+export const HorizontalSm: Story = {
+  render: () => <HorizontalHarness size="sm" />,
+};
+
+export const HorizontalMd: Story = {
+  render: () => <HorizontalHarness size="md" />,
+};
+
+export const HorizontalLg: Story = {
+  render: () => <HorizontalHarness size="lg" />,
+};
+
+export const HorizontalXl: Story = {
+  render: () => <HorizontalHarness size="xl" />,
+};
+
+export const HorizontalXxl: Story = {
+  render: () => <HorizontalHarness size="xxl" />,
+};
+
+export const VerticalXs: Story = {
+  render: () => <VerticalHarness size="xs" />,
+};
+
+export const VerticalSm: Story = {
+  render: () => <VerticalHarness size="sm" />,
+};
+
+export const VerticalMd: Story = {
+  render: () => <VerticalHarness size="md" />,
+};
+
+export const VerticalLg: Story = {
+  render: () => <VerticalHarness size="lg" />,
+};
+
+export const VerticalXl: Story = {
+  render: () => <VerticalHarness size="xl" />,
+};
+
+export const VerticalXxl: Story = {
+  render: () => <VerticalHarness size="xxl" />,
+};
+
+export const DefaultOrientation: Story = {
+  render: () => <DefaultHarness size="md" />,
+};
diff --git a/src/components/Separator/Separator.tsx b/src/components/Separator/Separator.tsx
index c6c35c4e0..8ccd23f34 100644
--- a/src/components/Separator/Separator.tsx
+++ b/src/components/Separator/Separator.tsx
@@ -1,27 +1,36 @@
-import { styled } from 'styled-components';
 import * as RadixSeparator from '@radix-ui/react-separator';
+import { cn, cva } from '@/lib/cva';
 import { SeparatorProps } from './Separator.types';
-const CUISeparator = styled(RadixSeparator.Root)<SeparatorProps>`
-  ${({ theme, size, orientation }) => `
-    &[data-orientation="horizontal"] {
-      width: 100%;
-      border-top: 0.0625rem solid ${theme.click.separator.color.stroke.default};
-    }
-    &[data-orientation="vertical"] {
-      height: 100%;
-      border-right: 0.0625rem solid ${theme.click.separator.color.stroke.default};
-    }
-    margin: ${
-      orientation === 'horizontal'
-        ? `${theme.click.separator.horizontal.space.y[size]} ${theme.click.separator.horizontal.space.x.all}`
-        : `${theme.click.separator.vertical.space.y.all} ${theme.click.separator.vertical.space.x[size]}`
-    }
-  `}
-`;
+import styles from './Separator.module.css';
 
-export const Separator = ({ orientation = 'horizontal', ...props }: SeparatorProps) => (
-  <CUISeparator
+const separatorVariants = cva(styles.separator, {
+  variants: {
+    variant: {
+      'horizontal-xs': styles['separator_variant_horizontal-xs'],
+      'horizontal-sm': styles['separator_variant_horizontal-sm'],
+      'horizontal-md': styles['separator_variant_horizontal-md'],
+      'horizontal-lg': styles['separator_variant_horizontal-lg'],
+      'horizontal-xl': styles['separator_variant_horizontal-xl'],
+      'horizontal-xxl': styles['separator_variant_horizontal-xxl'],
+      'vertical-xs': styles['separator_variant_vertical-xs'],
+      'vertical-sm': styles['separator_variant_vertical-sm'],
+      'vertical-md': styles['separator_variant_vertical-md'],
+      'vertical-lg': styles['separator_variant_vertical-lg'],
+      'vertical-xl': styles['separator_variant_vertical-xl'],
+      'vertical-xxl': styles['separator_variant_vertical-xxl'],
+    },
+  },
+});
+
+export const Separator = ({
+  orientation = 'horizontal',
+  size,
+  className,
+  ...props
+}: SeparatorProps) => (
+  <RadixSeparator.Root
     orientation={orientation}
     {...props}
+    className={cn(separatorVariants({ variant: `${orientation}-${size}` }), className)}
   />
 );
diff --git a/tests/display/separator.spec.ts b/tests/display/separator.spec.ts
new file mode 100644
index 000000000..90ffd0de2
--- /dev/null
+++ b/tests/display/separator.spec.ts
@@ -0,0 +1,312 @@
+import { test as it, expect } from '@playwright/test';
+import { getStoryUrl } from '../utils';
+
+const { describe, use } = it;
+
+const harnessLocator = '[data-testid="separator-harness"]';
+
+describe('Separator Visual Regression', () => {
+  describe('Light Theme (Storybook Global)', () => {
+    describe('Horizontal Size Variants', () => {
+      it('xs size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--horizontal-xs', 'light'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-horizontal-xs-light.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('sm size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--horizontal-sm', 'light'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-horizontal-sm-light.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('md size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--horizontal-md', 'light'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-horizontal-md-light.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('lg size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--horizontal-lg', 'light'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-horizontal-lg-light.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('xl size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--horizontal-xl', 'light'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-horizontal-xl-light.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('xxl size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--horizontal-xxl', 'light'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-horizontal-xxl-light.png', {
+          maxDiffPixels: 100,
+        });
+      });
+    });
+
+    describe('Vertical Size Variants', () => {
+      it('xs size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--vertical-xs', 'light'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-vertical-xs-light.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('sm size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--vertical-sm', 'light'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-vertical-sm-light.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('md size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--vertical-md', 'light'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-vertical-md-light.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('lg size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--vertical-lg', 'light'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-vertical-lg-light.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('xl size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--vertical-xl', 'light'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-vertical-xl-light.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('xxl size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--vertical-xxl', 'light'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-vertical-xxl-light.png', {
+          maxDiffPixels: 100,
+        });
+      });
+    });
+
+    describe('Default Orientation', () => {
+      it('default orientation matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--default-orientation', 'light'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-default-orientation-light.png', {
+          maxDiffPixels: 100,
+        });
+      });
+    });
+  });
+
+  describe('Dark Theme (System prefers-color-scheme)', () => {
+    use({ colorScheme: 'dark' });
+
+    describe('Horizontal Size Variants', () => {
+      it('xs size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--horizontal-xs'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-horizontal-xs-dark.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('sm size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--horizontal-sm'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-horizontal-sm-dark.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('md size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--horizontal-md'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-horizontal-md-dark.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('lg size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--horizontal-lg'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-horizontal-lg-dark.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('xl size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--horizontal-xl'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-horizontal-xl-dark.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('xxl size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--horizontal-xxl'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-horizontal-xxl-dark.png', {
+          maxDiffPixels: 100,
+        });
+      });
+    });
+
+    describe('Vertical Size Variants', () => {
+      it('xs size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--vertical-xs'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-vertical-xs-dark.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('sm size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--vertical-sm'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-vertical-sm-dark.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('md size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--vertical-md'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-vertical-md-dark.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('lg size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--vertical-lg'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-vertical-lg-dark.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('xl size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--vertical-xl'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-vertical-xl-dark.png', {
+          maxDiffPixels: 100,
+        });
+      });
+
+      it('xxl size matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--vertical-xxl'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-vertical-xxl-dark.png', {
+          maxDiffPixels: 100,
+        });
+      });
+    });
+
+    describe('Default Orientation', () => {
+      it('default orientation matches snapshot', async ({ page }) => {
+        await page.goto(getStoryUrl('display-separator--default-orientation'), {
+          waitUntil: 'networkidle',
+        });
+        const harness = page.locator(harnessLocator).first();
+        await expect(harness).toBeVisible({ timeout: 10000 });
+        await expect(harness).toHaveScreenshot('separator-default-orientation-dark.png', {
+          maxDiffPixels: 100,
+        });
+      });
+    });
+  });
+});
diff --git a/tests/display/separator.spec.ts-snapshots/separator-default-orientation-dark-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-default-orientation-dark-chromium-linux.png
new file mode 100644
index 000000000..521bfd3f3
Binary files /dev/null and b/tests/display/separator.spec.ts-snapshots/separator-default-orientation-dark-chromium-linux.png differ
diff --git a/tests/display/separator.spec.ts-snapshots/separator-default-orientation-light-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-default-orientation-light-chromium-linux.png
new file mode 100644
index 000000000..d560d417c
Binary files /dev/null and b/tests/display/separator.spec.ts-snapshots/separator-default-orientation-light-chromium-linux.png differ
diff --git a/tests/display/separator.spec.ts-snapshots/separator-horizontal-lg-dark-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-horizontal-lg-dark-chromium-linux.png
new file mode 100644
index 000000000..a6ef8979a
Binary files /dev/null and b/tests/display/separator.spec.ts-snapshots/separator-horizontal-lg-dark-chromium-linux.png differ
diff --git a/tests/display/separator.spec.ts-snapshots/separator-horizontal-lg-light-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-horizontal-lg-light-chromium-linux.png
new file mode 100644
index 000000000..f4598c55a
Binary files /dev/null and b/tests/display/separator.spec.ts-snapshots/separator-horizontal-lg-light-chromium-linux.png differ
diff --git a/tests/display/separator.spec.ts-snapshots/separator-horizontal-md-dark-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-horizontal-md-dark-chromium-linux.png
new file mode 100644
index 000000000..521bfd3f3
Binary files /dev/null and b/tests/display/separator.spec.ts-snapshots/separator-horizontal-md-dark-chromium-linux.png differ
diff --git a/tests/display/separator.spec.ts-snapshots/separator-horizontal-md-light-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-horizontal-md-light-chromium-linux.png
new file mode 100644
index 000000000..d560d417c
Binary files /dev/null and b/tests/display/separator.spec.ts-snapshots/separator-horizontal-md-light-chromium-linux.png differ
diff --git a/tests/display/separator.spec.ts-snapshots/separator-horizontal-sm-dark-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-horizontal-sm-dark-chromium-linux.png
new file mode 100644
index 000000000..6f4667813
Binary files /dev/null and b/tests/display/separator.spec.ts-snapshots/separator-horizontal-sm-dark-chromium-linux.png differ
diff --git a/tests/display/separator.spec.ts-snapshots/separator-horizontal-sm-light-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-horizontal-sm-light-chromium-linux.png
new file mode 100644
index 000000000..36db9ddac
Binary files /dev/null and b/tests/display/separator.spec.ts-snapshots/separator-horizontal-sm-light-chromium-linux.png differ
diff --git a/tests/display/separator.spec.ts-snapshots/separator-horizontal-xl-dark-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-horizontal-xl-dark-chromium-linux.png
new file mode 100644
index 000000000..6c3572259
Binary files /dev/null and b/tests/display/separator.spec.ts-snapshots/separator-horizontal-xl-dark-chromium-linux.png differ
diff --git a/tests/display/separator.spec.ts-snapshots/separator-horizontal-xl-light-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-horizontal-xl-light-chromium-linux.png
new file mode 100644
index 000000000..25061a9bf
Binary files /dev/null and b/tests/display/separator.spec.ts-snapshots/separator-horizontal-xl-light-chromium-linux.png differ
diff --git a/tests/display/separator.spec.ts-snapshots/separator-horizontal-xs-dark-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-horizontal-xs-dark-chromium-linux.png
new file mode 100644
index 000000000..b71d96b65
Binary files /dev/null and b/tests/display/separator.spec.ts-snapshots/separator-horizontal-xs-dark-chromium-linux.png differ
diff --git a/tests/display/separator.spec.ts-snapshots/separator-horizontal-xs-light-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-horizontal-xs-light-chromium-linux.png
new file mode 100644
index 000000000..10f648b31
Binary files /dev/null and b/tests/display/separator.spec.ts-snapshots/separator-horizontal-xs-light-chromium-linux.png differ
diff --git a/tests/display/separator.spec.ts-snapshots/separator-horizontal-xxl-dark-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-horizontal-xxl-dark-chromium-linux.png
new file mode 100644
index 000000000..68bce67a7
Binary files /dev/null and b/tests/display/separator.spec.ts-snapshots/separator-horizontal-xxl-dark-chromium-linux.png differ
diff --git a/tests/display/separator.spec.ts-snapshots/separator-horizontal-xxl-light-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-horizontal-xxl-light-chromium-linux.png
new file mode 100644
index 000000000..f57cc114b
Binary files /dev/null and b/tests/display/separator.spec.ts-snapshots/separator-horizontal-xxl-light-chromium-linux.png differ
diff --git a/tests/display/separator.spec.ts-snapshots/separator-vertical-lg-dark-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-vertical-lg-dark-chromium-linux.png
new file mode 100644
index 000000000..de102f71e
Binary files /dev/null and b/tests/display/separator.spec.ts-snapshots/separator-vertical-lg-dark-chromium-linux.png differ
diff --git a/tests/display/separator.spec.ts-snapshots/separator-vertical-lg-light-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-vertical-lg-light-chromium-linux.png
new file mode 100644
index 000000000..3fa5998c2
Binary files /dev/null and b/tests/display/separator.spec.ts-snapshots/separator-vertical-lg-light-chromium-linux.png differ
diff --git a/tests/display/separator.spec.ts-snapshots/separator-vertical-md-dark-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-vertical-md-dark-chromium-linux.png
new file mode 100644
index 000000000..1cafa6c55
Binary files /dev/null and b/tests/display/separator.spec.ts-snapshots/separator-vertical-md-dark-chromium-linux.png differ
diff --git a/tests/display/separator.spec.ts-snapshots/separator-vertical-md-light-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-vertical-md-light-chromium-linux.png
new file mode 100644
index 000000000..8e8bb7450
Binary files /dev/null and b/tests/display/separator.spec.ts-snapshots/separator-vertical-md-light-chromium-linux.png differ
diff --git a/tests/display/separator.spec.ts-snapshots/separator-vertical-sm-dark-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-vertical-sm-dark-chromium-linux.png
new file mode 100644
index 000000000..550f574ae
Binary files /dev/null and b/tests/display/separator.spec.ts-snapshots/separator-vertical-sm-dark-chromium-linux.png differ
diff --git a/tests/display/separator.spec.ts-snapshots/separator-vertical-sm-light-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-vertical-sm-light-chromium-linux.png
new file mode 100644
index 000000000..de1c76181
Binary files /dev/null and b/tests/display/separator.spec.ts-snapshots/separator-vertical-sm-light-chromium-linux.png differ
diff --git a/tests/display/separator.spec.ts-snapshots/separator-vertical-xl-dark-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-vertical-xl-dark-chromium-linux.png
new file mode 100644
index 000000000..63965bd86
Binary files /dev/null and b/tests/display/separator.spec.ts-snapshots/separator-vertical-xl-dark-chromium-linux.png differ
diff --git a/tests/display/separator.spec.ts-snapshots/separator-vertical-xl-light-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-vertical-xl-light-chromium-linux.png
new file mode 100644
index 000000000..46546cb94
Binary files /dev/null and b/tests/display/separator.spec.ts-snapshots/separator-vertical-xl-light-chromium-linux.png differ
diff --git a/tests/display/separator.spec.ts-snapshots/separator-vertical-xs-dark-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-vertical-xs-dark-chromium-linux.png
new file mode 100644
index 000000000..77cb7509b
Binary files /dev/null and b/tests/display/separator.spec.ts-snapshots/separator-vertical-xs-dark-chromium-linux.png differ
diff --git a/tests/display/separator.spec.ts-snapshots/separator-vertical-xs-light-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-vertical-xs-light-chromium-linux.png
new file mode 100644
index 000000000..45324e8b8
Binary files /dev/null and b/tests/display/separator.spec.ts-snapshots/separator-vertical-xs-light-chromium-linux.png differ
diff --git a/tests/display/separator.spec.ts-snapshots/separator-vertical-xxl-dark-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-vertical-xxl-dark-chromium-linux.png
new file mode 100644
index 000000000..6a15b1b49
Binary files /dev/null and b/tests/display/separator.spec.ts-snapshots/separator-vertical-xxl-dark-chromium-linux.png differ
diff --git a/tests/display/separator.spec.ts-snapshots/separator-vertical-xxl-light-chromium-linux.png b/tests/display/separator.spec.ts-snapshots/separator-vertical-xxl-light-chromium-linux.png
new file mode 100644
index 000000000..174a595f7
Binary files /dev/null and b/tests/display/separator.spec.ts-snapshots/separator-vertical-xxl-light-chromium-linux.png differ