[UIK-5613] checkbox radio switch rebranding

semcore/checkbox/__tests__/checkbox.browser-test.tsx

@@ -56,7 +56,7 @@ test.describe(`${TAG.VISUAL}`, () => {
   variables.forEach((item) => {
     test(`Verify size=${item.size} state=${item.state} theme=${item.theme} color=${item.color} disabled=${item.disabled} checked=${item.checked} indeterminate=${item.indeterminate}`, {
       tag: [TAG.PRIORITY_HIGH,
-        '@checkbox'],
+        '@checkbox', '@base-components', '@flex-box', '@typography'],
     }, async ({ page }) => {
       await loadPage(page, 'stories/components/checkbox/tests/examples/states.tsx', 'en', item);
 
@@ -89,7 +89,7 @@ test.describe(`${TAG.VISUAL}`, () => {
         );
         await expect(locators.checkboxText(page)).toHaveCSS(
           'margin-left',
-          '8px',
+          '6px',
         );
         await expect(locators.checkboxText(page)).toHaveCSS(
           'font-size',
@@ -103,7 +103,7 @@ test.describe(`${TAG.VISUAL}`, () => {
 
   test('Verify checkbox group styles', {
     tag: [TAG.PRIORITY_HIGH,
-      '@checkbox'],
+      '@checkbox', '@typography'],
   }, async ({ page }) => {
     await loadPage(page, 'stories/components/checkbox/tests/examples/groups.tsx', 'en');
 
@@ -127,7 +127,7 @@ test.describe(`${TAG.VISUAL}`, () => {
   test('Verify Partial selection mouse interactions', {
     tag: [TAG.PRIORITY_HIGH,
       TAG.MOUSE,
-      '@checkbox'],
+      '@checkbox', '@base-components', '@flex-box'],
   }, async ({ page }) => {
     await loadPage(page, 'stories/components/checkbox/docs/examples/partial_selection.tsx', 'en');
 
@@ -145,7 +145,7 @@ test.describe(`${TAG.VISUAL}`, () => {
   test('Verify Partial selection keyboard interactions', {
     tag: [TAG.PRIORITY_HIGH,
       TAG.KEYBOARD,
-      '@checkbox'],
+      '@checkbox', '@base-components', '@flex-box'],
   }, async ({ page }) => {
     await loadPage(page, 'stories/components/checkbox/docs/examples/partial_selection.tsx', 'en');
 
@@ -162,7 +162,7 @@ test.describe(`${TAG.VISUAL}`, () => {
       TAG.KEYBOARD,
       '@checkbox',
       '@link',
-      '@tooltip'],
+      '@tooltip', '@base-components', '@flex-box', '@button-link'],
   }, async ({ page }) => {
     await loadPage(page, 'stories/components/checkbox/docs/examples/checkbox_with_other_components.tsx', 'en');
 
@@ -202,7 +202,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
   test('Verify Checkbox group mouse interactions', {
     tag: [TAG.PRIORITY_HIGH,
       TAG.MOUSE,
-      '@checkbox'],
+      '@checkbox', '@typography'],
   }, async ({ page }) => {
     await loadPage(page, 'stories/components/checkbox/docs/examples/basic_usage.tsx', 'en');
 
@@ -247,7 +247,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
   test('Verify Checkbox group keyboard interactions', {
     tag: [TAG.PRIORITY_HIGH,
       TAG.KEYBOARD,
-      '@checkbox'],
+      '@checkbox', '@typography'],
   }, async ({ page }) => {
     await loadPage(page, 'stories/components/checkbox/docs/examples/basic_usage.tsx', 'en');
 
@@ -301,7 +301,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
   test('Verify Partial selection mouse interactions', {
     tag: [TAG.PRIORITY_HIGH,
       TAG.MOUSE,
-      '@checkbox'],
+      '@checkbox', '@base-components', '@flex-box'],
   }, async ({ page }) => {
     await loadPage(page, 'stories/components/checkbox/docs/examples/partial_selection.tsx', 'en');
 
@@ -366,7 +366,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
   test('Verify Partial selection keyboard interactions', {
     tag: [TAG.PRIORITY_HIGH,
       TAG.KEYBOARD,
-      '@checkbox'],
+      '@checkbox', '@base-components', '@flex-box'],
   }, async ({ page }) => {
     await loadPage(page, 'stories/components/checkbox/docs/examples/partial_selection.tsx', 'en');
 
@@ -438,7 +438,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
       TAG.KEYBOARD,
       '@checkbox',
       '@link',
-      '@tooltip'],
+      '@tooltip', '@base-components', '@flex-box', '@button-link'],
   }, async ({ page }) => {
     await loadPage(page, 'stories/components/checkbox/docs/examples/checkbox_with_other_components.tsx', 'en');
 
@@ -487,7 +487,7 @@ test.describe(`${TAG.FUNCTIONAL} `, () => {
       TAG.MOUSE,
       '@checkbox',
       '@link',
-      '@tooltip'],
+      '@tooltip', '@base-components', '@flex-box', '@button-link'],
   }, async ({ page }) => {
     await loadPage(page, 'stories/components/checkbox/docs/examples/checkbox_with_other_components.tsx', 'en');
 

semcore/checkbox/src/style/checkbox.shadow.css

@@ -9,14 +9,18 @@ SLabel {
   }
 
   SText {
-    margin-left: var(--intergalactic-spacing-2x, 8px);
+    margin-left: var(--intergalactic-spacing-content-gap-medium, 6px);
     color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
 
     &[disabled] {
       opacity: var(--intergalactic-disabled-opacity, 0.4);
     }
   }
 
+  SText[size='l'] {
+    margin-left: var(--intergalactic-spacing-content-gap-large, 8px);
+  }
+
   SText[color] {
     color: var(--color);
   }
@@ -44,17 +48,17 @@ SCheckbox {
     left: 0;
     right: 0;
     bottom: 0;
-    background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0)); /* TODO: --intergalactic-control-checkbox-bg-normal */
+    background: var(--intergalactic-control-checkbox-bg-normal, oklch(1 0 0));
     border: 1px solid;
-    border-radius: var(--intergalactic-addon-rounded, 4px); /* TODO: --intergalactic-checkbox-rounded */
+    border-radius: var(--intergalactic-checkbox-rounded, 4px);
     transition: calc(var(--intergalactic-duration-control, 200) * 1ms) all ease-in-out;
     outline-color: transparent;
   }
 
   &::after {
     content: '';
     position: absolute;
-    top: 1px;
+    top: 0;
     left: 0;
     right: 0;
     bottom: 0;
@@ -64,31 +68,27 @@ SCheckbox {
   }
 
   &[state='normal']:before {
-    border-color: var(--intergalactic-border-primary, oklch(0.137 0.026 175.7 / 0.161)); /* TODO: --intergalactic-control-checkbox-border */
-  }
-
-  &[state='normal']:focus-visible:before {
-    border-color: var(--intergalactic-border-info-active, oklch(0.7 0.131 275.2)); /* TODO: ...? do we need this? checkbox get focus outline from Box and these color is rewritten */
+    border-color: var(--intergalactic-control-checkbox-border, oklch(0.137 0.026 175.7 / 0.161));
   }
 }
 
 SCheckbox[size='l'] {
   margin-top: var(--intergalactic-spacing-05x, 2px);
-  width: 20px;
-  height: 20px;
+  width: var(--intergalactic-spacing-5x, 20px);
+  height: var(--intergalactic-spacing-5x, 20px);
 
   &[checked]::after {
-    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMSAxLjVMNC43NSA3Ljc1TDEgNCIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==');
+    background-image: var(--intergalactic-assets-checkmark-l, url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxNCAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTIuNCAyLjQ1MjIxTDUuMzA0NCA5LjU0NzgyTDEuNjAwMDEgNS44NDM0MyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPjwvc3ZnPg=="));
   }
 }
 
 SCheckbox[size='m'] {
   margin-top: var(--intergalactic-spacing-05x, 2px);
-  width: 16px;
-  height: 16px;
+  width: var(--intergalactic-spacing-4x, 16px);
+  height: var(--intergalactic-spacing-4x, 16px);
 
   &[checked]::after {
-    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iNyIgdmlld0JveD0iMCAwIDEwIDciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik04LjI1IDFMNCA1LjI1TDEuNzUgMyIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9zdmc+Cg==');
+    background-image: var(--intergalactic-assets-checkmark-m, url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTAiIHZpZXdCb3g9IjAgMCAxMiAxMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAuMzEwNyAyLjE2NzkxTDQuNjQ2NDUgNy44MzIxMkwxLjY4OTM0IDQuODc1MDEiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZT0id2hpdGUiLz48L3N2Zz4="));
   }
 }
 
@@ -103,22 +103,21 @@ SText[size='m'] {
   line-height: var(--intergalactic-lh-200, 142%);
 }
 
-
 SControl[checked]~SCheckbox[state='normal']:before,
 SControl[checked]~SCheckbox[state='invalid']:before {
-  background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-checkbox-bg-selected */
-  border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-checkbox-bg-selected */
+  background-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.01 140));
+  border-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.01 140));
 }
 
 SControl[indeterminate]~SCheckbox[state='normal']:before {
-  background-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-checkbox-bg-selected */
-  border-color: var(--intergalactic-control-primary-info, oklch(0.23 0.01 140)); /* TODO: --intergalactic-control-checkbox-bg-selected */
+  background-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.01 140));
+  border-color: var(--intergalactic-control-checkbox-bg-selected, oklch(0.23 0.01 140));
 }
 
 SCheckbox[state='invalid'],
 SControl[checked]~SCheckbox[state='invalid'] {
   &:before {
-    border-color: var(--intergalactic-border-critical-active, oklch(0.7 0.21 23)); /* TODO: ...? not sure if we need to add special vars for invalid checkbox */
+    border-color: var(--intergalactic-border-critical-active, oklch(0.7 0.21 23));
   }
 }
 
@@ -137,33 +136,29 @@ SControl[disabled] ~ SCheckbox[state='invalid'] > SInvalidPattern {
   cursor: default;
 }
 
-SControl[checked]~SCheckbox {
-  &[state='invalid']:before {
-    background-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5)); /* TODO: ...? not sure if we need to add separate vars for invalid checkbox and radio inputs*/
-    border-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5)); /* TODO: ...? not sure if we need to add separate vars for invalid checkbox and radio inputs*/
-  }
+SControl[checked]~SCheckbox[state='invalid']:before,
+SControl[indeterminate]~SCheckbox[state='invalid']:before {
+  background-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5));
+  border-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5));
 }
 
 SControl[indeterminate]~SCheckbox:after {
-  background-color: #ffffff; /* TODO: --gray-white? */
+  background-color: var(--intergalactic-control-checkbox-checkmark, oklch(1 0 0));
   margin: auto;
   /* disable-tokens-validator */
   border-radius: 1px;
 }
 
 SControl[indeterminate]~SCheckbox[size='l']:after {
   width: 12px;
-  height: 2px;
+  /* disable-tokens-validator */
+  height: 1.5px;
 }
 
 SControl[indeterminate]~SCheckbox[size='m']:after {
   width: 8px;
-  height: 2px;
-}
-
-SControl[indeterminate]~SCheckbox[state='invalid']:before {
-  background-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5)); /* TODO: ...? not sure if we need to add separate vars for invalid checkbox and radio inputs*/
-  border-color: var(--intergalactic-control-primary-critical, oklch(0.64 0.226 24.5)); /* TODO: ...? not sure if we need to add separate vars for invalid checkbox and radio inputs*/
+  /* disable-tokens-validator */
+  height: 1.5px;
 }
 
 SCheckbox[checked][theme][state='normal']:before {
@@ -186,7 +181,8 @@ SControl[indeterminate]~SCheckbox[theme][state='normal']:before {
 }
 
 SInvalidPattern {
-  height: calc(100% - 2px);
+  height: calc(100% - var(--intergalactic-spacing-05x, 2px));
+  /* disable-tokens-validator */
   margin: 1px 0 1px 1px;
   border-bottom-left-radius: var(--intergalactic-rounded-small, 4px);
   border-top-left-radius: var(--intergalactic-rounded-small, 4px);

semcore/d3-chart/__tests__/area-chart.browser-test.tsx

@@ -94,7 +94,7 @@ test.describe(`${TAG.VISUAL}`, () => {
 
   variables.forEach((vars, index) => {
     test(`Verify area chart ${vars.description}`, {
-      tag: [TAG.PRIORITY_HIGH, '@area-chart', '@d3-chart'],
+      tag: [TAG.PRIORITY_HIGH, '@area-chart', '@d3-chart', '@base-components', '@flex-box'],
     }, async ({ page }) => {
       await loadPage(
         page,
@@ -145,7 +145,7 @@ test.describe(`${TAG.VISUAL}`, () => {
 
   dataVariations.forEach((dataVariant) => {
     test(`Verify area chart ${dataVariant.description}`, {
-      tag: [TAG.PRIORITY_MEDIUM, '@area-chart', '@d3-chart'],
+      tag: [TAG.PRIORITY_MEDIUM, '@area-chart', '@d3-chart', '@base-components', '@flex-box'],
     }, async ({ page }) => {
       await loadPage(
         page,
@@ -179,7 +179,7 @@ test.describe(`${TAG.VISUAL}`, () => {
   });
 
   test('Verify chart with no data and single data', {
-    tag: [TAG.PRIORITY_MEDIUM, '@area-chart', '@d3-chart'],
+    tag: [TAG.PRIORITY_MEDIUM, '@area-chart', '@d3-chart', '@base-components', '@flex-box', '@typography'],
   }, async ({ page }) => {
     await loadPage(page, 'stories/components/d3-chart/docs/examples/area-chart/edge-cases.tsx', 'en');
 
@@ -218,7 +218,7 @@ test.describe(`${TAG.VISUAL}`, () => {
   });
 
   test('Verify stacked area when part of the chart has no data or only one value', {
-    tag: [TAG.PRIORITY_HIGH, '@stacked-area-chart', '@d3-chart'],
+    tag: [TAG.PRIORITY_HIGH, '@stacked-area-chart', '@d3-chart', '@base-components', '@flex-box', '@typography'],
   }, async ({ page }) => {
     await loadPage(page, 'stories/components/d3-chart/docs/examples/stacked-area-chart/edge-cases.tsx', 'en');
 
@@ -236,7 +236,7 @@ test.describe(`${TAG.VISUAL}`, () => {
   });
 
   test('Verify stacked area chart rendering', {
-    tag: [TAG.PRIORITY_MEDIUM, '@stacked-area-chart', '@d3-chart'],
+    tag: [TAG.PRIORITY_MEDIUM, '@stacked-area-chart', '@d3-chart', '@base-components', '@flex-box', '@typography'],
   }, async ({ page }) => {
     await loadPage(page, 'stories/components/d3-chart/docs/examples/stacked-area-chart/stacked-area.tsx', 'en');
 
@@ -248,7 +248,7 @@ test.describe(`${TAG.VISUAL}`, () => {
   });
 
   test('Verify legend and pattern fill hover and focus styles', {
-    tag: [TAG.PRIORITY_HIGH, TAG.MOUSE, TAG.KEYBOARD, '@area-chart', '@d3-chart'],
+    tag: [TAG.PRIORITY_HIGH, TAG.MOUSE, TAG.KEYBOARD, '@area-chart', '@d3-chart', '@chart-legend'],
   }, async ({ page }) => {
     await loadPage(page, 'stories/components/d3-chart/docs/examples/area-chart/legend-and-pattern-fill.tsx', 'en');
 
@@ -274,7 +274,7 @@ test.describe(`${TAG.VISUAL}`, () => {
   });
 
   test('Verify stacked area chart legend hover styles', {
-    tag: [TAG.PRIORITY_MEDIUM, TAG.MOUSE, '@stacked-area-chart', '@d3-chart'],
+    tag: [TAG.PRIORITY_MEDIUM, TAG.MOUSE, '@stacked-area-chart', '@d3-chart', '@base-components', '@flex-box', '@chart-legend', '@typography'],
   }, async ({ page }) => {
     await loadPage(page, 'stories/components/d3-chart/docs/examples/stacked-area-chart/legend-and-pattern-fill.tsx', 'en');
 
@@ -294,7 +294,7 @@ We verify states, visibility, and attributes.
 ===================================================== */
 test.describe(`${TAG.FUNCTIONAL}`, () => {
   test('Verify props configurations behavior', {
-    tag: [TAG.PRIORITY_HIGH, '@area-chart', '@d3-chart'],
+    tag: [TAG.PRIORITY_HIGH, '@area-chart', '@d3-chart', '@base-components', '@flex-box'],
   }, async ({ page }) => {
     await loadPage(
       page,
@@ -392,7 +392,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
   });
 
   test('Verify click handler (onClickArea)', {
-    tag: [TAG.PRIORITY_MEDIUM, TAG.MOUSE, '@area-chart', '@d3-chart'],
+    tag: [TAG.PRIORITY_MEDIUM, TAG.MOUSE, '@area-chart', '@d3-chart', '@base-components', '@flex-box'],
   }, async ({ page }) => {
     const consoleMessages: string[] = [];
 
@@ -422,7 +422,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
   });
 
   test('Verify legend checkbox attributes', {
-    tag: [TAG.PRIORITY_MEDIUM, '@area-chart', '@d3-chart'],
+    tag: [TAG.PRIORITY_MEDIUM, '@area-chart', '@d3-chart', '@chart-legend'],
   }, async ({ page }) => {
     await loadPage(page, 'stories/components/d3-chart/docs/examples/area-chart/legend-and-pattern-fill.tsx', 'en');