diff --git a/semcore/divider/__tests__/divider.browser-test.tsx b/semcore/divider/__tests__/divider.browser-test.tsx index 2947261b98..c8cfa1291a 100644 --- a/semcore/divider/__tests__/divider.browser-test.tsx +++ b/semcore/divider/__tests__/divider.browser-test.tsx @@ -47,7 +47,7 @@ test.describe(`${TAG.VISUAL} `, () => { screenshotsClip.y -= 4; screenshotsClip.width += 8; screenshotsClip.height += 8; - await expect(page).toHaveScreenshot({ clip: screenshotsClip }); + await expect(page).toHaveScreenshot({ clip: screenshotsClip, scale: 'device' }); const divider = page.getByRole('separator'); if (item.orientation == 'horizontal') { diff --git a/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Complex-examples-Verify-vertical-divider-renders-in-complex-examples-1-chromium-linux.png b/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Complex-examples-Verify-vertical-divider-renders-in-complex-examples-1-chromium-linux.png index edcf19f971..832ff42ff4 100644 Binary files a/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Complex-examples-Verify-vertical-divider-renders-in-complex-examples-1-chromium-linux.png and b/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Complex-examples-Verify-vertical-divider-renders-in-complex-examples-1-chromium-linux.png differ diff --git a/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Complex-examples-Verify-vertical-divider-renders-in-complex-examples-1-firefox-linux.png b/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Complex-examples-Verify-vertical-divider-renders-in-complex-examples-1-firefox-linux.png index b3f60b0f7c..7ceb8ce96d 100644 Binary files a/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Complex-examples-Verify-vertical-divider-renders-in-complex-examples-1-firefox-linux.png and b/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Complex-examples-Verify-vertical-divider-renders-in-complex-examples-1-firefox-linux.png differ diff --git a/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Complex-examples-Verify-vertical-divider-renders-in-complex-examples-1-webkit-linux.png b/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Complex-examples-Verify-vertical-divider-renders-in-complex-examples-1-webkit-linux.png index 73a20d1be4..70477b1b98 100644 Binary files a/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Complex-examples-Verify-vertical-divider-renders-in-complex-examples-1-webkit-linux.png and b/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Complex-examples-Verify-vertical-divider-renders-in-complex-examples-1-webkit-linux.png differ diff --git a/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-horiz-162b3-condary-theme-invert-w-undefined-h-undefined-1-webkit-linux.png b/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-horiz-162b3-condary-theme-invert-w-undefined-h-undefined-1-webkit-linux.png index 4844890d5b..0c672c0e07 100644 Binary files a/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-horiz-162b3-condary-theme-invert-w-undefined-h-undefined-1-webkit-linux.png and b/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-horiz-162b3-condary-theme-invert-w-undefined-h-undefined-1-webkit-linux.png differ diff --git a/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-horiz-4990a-order-warning-active-w-undefined-h-undefined-1-chromium-linux.png b/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-horiz-4990a-order-warning-active-w-undefined-h-undefined-1-chromium-linux.png index 27bb865d95..3cbb56078a 100644 Binary files a/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-horiz-4990a-order-warning-active-w-undefined-h-undefined-1-chromium-linux.png and b/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-horiz-4990a-order-warning-active-w-undefined-h-undefined-1-chromium-linux.png differ diff --git a/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-horiz-4990a-order-warning-active-w-undefined-h-undefined-1-firefox-linux.png b/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-horiz-4990a-order-warning-active-w-undefined-h-undefined-1-firefox-linux.png index 789d879793..43a1f0b3a8 100644 Binary files a/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-horiz-4990a-order-warning-active-w-undefined-h-undefined-1-firefox-linux.png and b/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-horiz-4990a-order-warning-active-w-undefined-h-undefined-1-firefox-linux.png differ diff --git a/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-horiz-4990a-order-warning-active-w-undefined-h-undefined-1-webkit-linux.png b/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-horiz-4990a-order-warning-active-w-undefined-h-undefined-1-webkit-linux.png index 4f49f42043..4e3df24370 100644 Binary files a/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-horiz-4990a-order-warning-active-w-undefined-h-undefined-1-webkit-linux.png and b/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-horiz-4990a-order-warning-active-w-undefined-h-undefined-1-webkit-linux.png differ diff --git a/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-horiz-de5b5-primary-theme-invert-w-undefined-h-undefined-1-webkit-linux.png b/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-horiz-de5b5-primary-theme-invert-w-undefined-h-undefined-1-webkit-linux.png index c3af52433e..dfdbf146e6 100644 Binary files a/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-horiz-de5b5-primary-theme-invert-w-undefined-h-undefined-1-webkit-linux.png and b/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-horiz-de5b5-primary-theme-invert-w-undefined-h-undefined-1-webkit-linux.png differ diff --git a/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-horizontal-use-primary-theme-default-w-100-h-undefined-1-webkit-linux.png b/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-horizontal-use-primary-theme-default-w-100-h-undefined-1-webkit-linux.png index 2425e2a74e..785395e25c 100644 Binary files a/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-horizontal-use-primary-theme-default-w-100-h-undefined-1-webkit-linux.png and b/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-horizontal-use-primary-theme-default-w-100-h-undefined-1-webkit-linux.png differ diff --git a/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-horizontal-use-secondary-theme-default-w-100-h-undefined-1-webkit-linux.png b/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-horizontal-use-secondary-theme-default-w-100-h-undefined-1-webkit-linux.png index da20277bdf..21e1df30c7 100644 Binary files a/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-horizontal-use-secondary-theme-default-w-100-h-undefined-1-webkit-linux.png and b/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-horizontal-use-secondary-theme-default-w-100-h-undefined-1-webkit-linux.png differ diff --git a/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-verti-c409f-order-warning-active-w-undefined-h-undefined-1-chromium-linux.png b/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-verti-c409f-order-warning-active-w-undefined-h-undefined-1-chromium-linux.png index 99038cbf07..a55b1cde86 100644 Binary files a/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-verti-c409f-order-warning-active-w-undefined-h-undefined-1-chromium-linux.png and b/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-verti-c409f-order-warning-active-w-undefined-h-undefined-1-chromium-linux.png differ diff --git a/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-verti-c409f-order-warning-active-w-undefined-h-undefined-1-firefox-linux.png b/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-verti-c409f-order-warning-active-w-undefined-h-undefined-1-firefox-linux.png index 820618c62b..221447c162 100644 Binary files a/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-verti-c409f-order-warning-active-w-undefined-h-undefined-1-firefox-linux.png and b/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-verti-c409f-order-warning-active-w-undefined-h-undefined-1-firefox-linux.png differ diff --git a/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-verti-c409f-order-warning-active-w-undefined-h-undefined-1-webkit-linux.png b/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-verti-c409f-order-warning-active-w-undefined-h-undefined-1-webkit-linux.png index 6e351aabfe..296f70e31c 100644 Binary files a/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-verti-c409f-order-warning-active-w-undefined-h-undefined-1-webkit-linux.png and b/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-verti-c409f-order-warning-active-w-undefined-h-undefined-1-webkit-linux.png differ diff --git a/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-vertical-use-primary-theme-default-w-undefined-h-100-1-webkit-linux.png b/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-vertical-use-primary-theme-default-w-undefined-h-100-1-webkit-linux.png index ae3b8127e0..a9b35d3a5e 100644 Binary files a/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-vertical-use-primary-theme-default-w-undefined-h-100-1-webkit-linux.png and b/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-vertical-use-primary-theme-default-w-undefined-h-100-1-webkit-linux.png differ diff --git a/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-vertical-use-primary-theme-invert-w-undefined-h-150-1-webkit-linux.png b/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-vertical-use-primary-theme-invert-w-undefined-h-150-1-webkit-linux.png index f487c414fe..71f2830a12 100644 Binary files a/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-vertical-use-primary-theme-invert-w-undefined-h-150-1-webkit-linux.png and b/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-vertical-use-primary-theme-invert-w-undefined-h-150-1-webkit-linux.png differ diff --git a/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-vertical-use-secondary-theme-default-w-undefined-h-50-1-webkit-linux.png b/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-vertical-use-secondary-theme-default-w-undefined-h-50-1-webkit-linux.png index af4ce1cba1..eb816e9104 100644 Binary files a/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-vertical-use-secondary-theme-default-w-undefined-h-50-1-webkit-linux.png and b/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-vertical-use-secondary-theme-default-w-undefined-h-50-1-webkit-linux.png differ diff --git a/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-vertical-use-secondary-theme-invert-w-undefined-h-200-1-webkit-linux.png b/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-vertical-use-secondary-theme-invert-w-undefined-h-200-1-webkit-linux.png index 5e457ff239..710da65364 100644 Binary files a/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-vertical-use-secondary-theme-invert-w-undefined-h-200-1-webkit-linux.png and b/semcore/divider/__tests__/divider.browser-test.tsx-snapshots/-visual-Verify-divider-with-orientation-vertical-use-secondary-theme-invert-w-undefined-h-200-1-webkit-linux.png differ diff --git a/semcore/divider/src/style/divider.shadow.css b/semcore/divider/src/style/divider.shadow.css index 68ae8429f1..480fde68c7 100644 --- a/semcore/divider/src/style/divider.shadow.css +++ b/semcore/divider/src/style/divider.shadow.css @@ -1,91 +1,55 @@ SDivider { display: block; -} -SDivider[use='primary'] { - background-color: var(--theme, var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161))); -} - -SDivider[use='primary']SDivider[theme='default'] { - background: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); -} -SDivider[use='primary']SDivider[theme='invert'] { - background-color: var(--intergalactic-border-primary-invert, oklch(0.995 0.009 144.4 / 0.347)); - opacity: 0.2; -} - -SDivider[orientation='horizontal']SDivider[use='secondary'] { - background-image: linear-gradient( - to right, - var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)) 3px, - transparent 1px - ); - background-size: 5px 1px; -} - -SDivider[orientation='horizontal']SDivider[use='secondary']SDivider[theme='default'] { - background: linear-gradient( - to right, - var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)) 3px, - transparent 1px - ); - background-size: 5px 1px; -} -SDivider[orientation='horizontal']SDivider[use='secondary']SDivider[theme='invert'] { - background-image: linear-gradient( - to right, - var(--intergalactic-border-primary-invert, oklch(0.995 0.009 144.4 / 0.347)) 3px, - transparent 1px - ); - opacity: 0.2; - background-size: 5px 1px; -} - -SDivider[orientation='vertical']SDivider[use='secondary'] { - background-image: linear-gradient( - to bottom, - var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)) 3px, - transparent 1px - ); - background-size: 1px 5px; -} - -SDivider[orientation='vertical']SDivider[use='secondary']SDivider[theme='default'] { - background-image: linear-gradient( - to bottom, - var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)) 3px, - transparent 1px - ); - background-size: 1px 5px; -} -SDivider[orientation='vertical']SDivider[use='secondary']SDivider[theme='invert'] { - background-image: linear-gradient( - to bottom, - var(--intergalactic-border-primary-invert, oklch(0.995 0.009 144.4 / 0.347)) 3px, - transparent 1px - ); - opacity: 0.2; - background-size: 1px 5px; -} - -SDivider[orientation='horizontal'] { - width: 100%; - height: 1px; -} + &[orientation='horizontal'] { + width: 100%; + height: 1px; + } -SDivider[orientation='vertical'] { - width: 1px; - height: auto; - min-height: 100%; - align-self: stretch; - flex-shrink: 0; -} + &[orientation='vertical'] { + width: 1px; + height: auto; + min-height: 100%; + align-self: stretch; + flex-shrink: 0; + } -SDivider[theme]:not([theme='default']):not([theme='invert']) { &[use='primary'] { - background-color: var(--theme); + background-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); + + &[theme='invert'] { + background-color: var(--intergalactic-border-primary-invert, oklch(0.995 0.009 144.4 / 0.347)); + } } + &[use='secondary'] { - background-image: linear-gradient(to right, var(--theme) 3px, transparent 1px); + &[orientation='horizontal'] { + background-image: radial-gradient(circle, var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)) 0.5px, transparent 0.5px); + background-size: 5px 1px; + background-position: -2px 50%; + + &[theme='invert'] { + background-image: radial-gradient(circle, var(--intergalactic-border-primary-invert, oklch(0.995 0.009 144.4 / 0.347)) 0.5px, transparent 0.5px); + } + } + + &[orientation='vertical'] { + background-image: radial-gradient(circle, var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)) 0.5px, transparent 0.5px); + background-size: 1px 5px; + background-position: 50% -2px; + + &[theme='invert'] { + background-image: radial-gradient(circle, var(--intergalactic-border-primary-invert, oklch(0.995 0.009 144.4 / 0.347)) 0.5px, transparent 0.5px); + } + } + } + + &[theme]:not([theme='default']):not([theme='invert']) { + &[use='primary'] { + background-color: var(--theme); + } + &[use='secondary'] { + background-image: radial-gradient(circle, var(--theme) 0.5px, transparent 0.5px); + } } } \ No newline at end of file diff --git a/stories/components/divider/tests/examples/divider-styles.tsx b/stories/components/divider/tests/examples/divider-styles.tsx index 65b21b48e2..47aaf27b8d 100644 --- a/stories/components/divider/tests/examples/divider-styles.tsx +++ b/stories/components/divider/tests/examples/divider-styles.tsx @@ -1,4 +1,3 @@ -import type { NSBox } from '@semcore/ui/base-components'; import { Flex } from '@semcore/ui/base-components'; import Divider from '@semcore/ui/divider'; import type { NSDivider } from '@semcore/ui/divider'; @@ -24,7 +23,6 @@ const Demo = (props: DividerStylesExample) => { ); }; export const baseExampleProps: DividerStylesExample = { - orientation: 'horizontal', use: 'primary', theme: 'default',