[UIK-5351][theme] Add more variables to theme

.stylelintrc.json

@@ -9,7 +9,8 @@
       {
         "ignoreProperties": [
           "vertical-anchor",
-          "animation-timeline"
+          "animation-timeline",
+          "field-sizing"
         ]
       }
     ],

semcore/add-filter/__tests__/add-filter.browser-test.tsx

@@ -75,7 +75,8 @@ test.describe(`${TAG.VISUAL}`, () => {
       '@base-trigger',
       '@button',
       '@input',
-      '@select'],
+      '@select',
+      '@button-link'],
   }, async ({ page }) => {
     await loadPage(page, 'stories/components/add-filter/docs/examples/add-filter-basic.tsx', 'en');
 
@@ -102,7 +103,8 @@ test.describe(`${TAG.VISUAL}`, () => {
       '@base-trigger',
       '@button',
       '@input',
-      '@select'],
+      '@select',
+      '@button-link'],
   }, async ({ page }) => {
     await loadPage(page, 'stories/components/add-filter/docs/examples/add-filter-basic.tsx', 'en');
 
@@ -130,7 +132,11 @@ test.describe(`${TAG.VISUAL}`, () => {
       '@input',
       '@radio',
       '@textarea',
-      '@select'],
+      '@select',
+      '@base-components',
+      '@flex-box',
+      '@button-link',
+      '@typography'],
   }, async ({ page }) => {
     await loadPage(page, 'stories/components/add-filter/advanced/examples/add-filter.tsx', 'en');
 
@@ -167,7 +173,11 @@ test.describe(`${TAG.VISUAL}`, () => {
       '@input',
       '@radio',
       '@textarea',
-      '@select'],
+      '@select',
+      '@base-components',
+      '@flex-box',
+      '@button-link',
+      '@typography'],
   }, async ({ page }) => {
     await loadPage(page, 'stories/components/add-filter/advanced/examples/add-filter.tsx', 'en');
 
@@ -187,7 +197,12 @@ test.describe(`${TAG.VISUAL}`, () => {
       '@button',
       '@input',
       '@input-number',
-      '@divider'],
+      '@divider',
+      '@base-components',
+      '@flex-box',
+      '@neighbor-location',
+      '@button-link',
+      '@typography'],
   }, async ({ page }) => {
     await loadPage(page, 'stories/components/add-filter/advanced/examples/add-filter-complex-selects.tsx', 'en');
 
@@ -205,7 +220,12 @@ test.describe(`${TAG.VISUAL}`, () => {
       '@button',
       '@input',
       '@input-number',
-      '@divider'],
+      '@divider',
+      '@base-components',
+      '@flex-box',
+      '@neighbor-location',
+      '@button-link',
+      '@typography'],
   }, async ({ page }) => {
     await loadPage(page, 'stories/components/add-filter/advanced/examples/add-filter-complex-selects.tsx', 'en');
 
@@ -238,7 +258,11 @@ test.describe(`${TAG.VISUAL}`, () => {
       '@input',
       '@radio',
       '@textarea',
-      '@select'],
+      '@select',
+      '@base-components',
+      '@flex-box',
+      '@button-link',
+      '@typography'],
   }, async ({ page }) => {
     await loadPage(page, 'stories/components/add-filter/advanced/examples/add-filter.tsx', 'en');
 
@@ -260,7 +284,12 @@ test.describe(`${TAG.VISUAL}`, () => {
       '@button',
       '@input',
       '@input-number',
-      '@divider'],
+      '@divider',
+      '@base-components',
+      '@flex-box',
+      '@neighbor-location',
+      '@button-link',
+      '@typography'],
   }, async ({ page }) => {
     await loadPage(page, 'stories/components/add-filter/advanced/examples/add-filter-complex-selects.tsx', 'en');
 
@@ -297,7 +326,8 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
         '@base-trigger',
         '@button',
         '@input',
-        '@select'],
+        '@select',
+        '@button-link'],
     }, async ({ page }) => {
       await loadPage(page, 'stories/components/add-filter/docs/examples/add-filter-basic.tsx', 'en');
 
@@ -340,7 +370,8 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
         '@base-trigger',
         '@button',
         '@input',
-        '@select'],
+        '@select',
+        '@button-link'],
     }, async ({ page }) => {
       await loadPage(page, 'stories/components/add-filter/docs/examples/add-filter-basic.tsx', 'en');
 
@@ -373,7 +404,11 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
         '@input',
         '@radio',
         '@textarea',
-        '@select'],
+        '@select',
+        '@base-components',
+        '@flex-box',
+        '@button-link',
+        '@typography'],
     }, async ({ page }) => {
       await loadPage(page, 'stories/components/add-filter/advanced/examples/add-filter.tsx', 'en');
 
@@ -446,7 +481,11 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
         '@input',
         '@radio',
         '@textarea',
-        '@select'],
+        '@select',
+        '@base-components',
+        '@flex-box',
+        '@button-link',
+        '@typography'],
     }, async ({ page }) => {
       await loadPage(page, 'stories/components/add-filter/advanced/examples/add-filter.tsx', 'en');
 
@@ -569,7 +608,11 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
         '@input',
         '@radio',
         '@textarea',
-        '@select'],
+        '@select',
+        '@base-components',
+        '@flex-box',
+        '@button-link',
+        '@typography'],
     }, async ({ page }) => {
       await loadPage(page, 'stories/components/add-filter/advanced/examples/add-filter.tsx', 'en');
 
@@ -613,7 +656,11 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
         '@input',
         '@radio',
         '@textarea',
-        '@select'],
+        '@select',
+        '@base-components',
+        '@flex-box',
+        '@button-link',
+        '@typography'],
     }, async ({ page }) => {
       await loadPage(page, 'stories/components/add-filter/advanced/examples/add-filter.tsx', 'en');
 
@@ -696,7 +743,11 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
         '@input',
         '@radio',
         '@textarea',
-        '@select'],
+        '@select',
+        '@base-components',
+        '@flex-box',
+        '@button-link',
+        '@typography'],
     }, async ({ page }) => {
       await loadPage(page, 'stories/components/add-filter/advanced/examples/add-filter.tsx', 'en');
 
@@ -741,7 +792,11 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
         '@input',
         '@radio',
         '@textarea',
-        '@select'],
+        '@select',
+        '@base-components',
+        '@flex-box',
+        '@button-link',
+        '@typography'],
     }, async ({ page }) => {
       await loadPage(page, 'stories/components/add-filter/advanced/examples/add-filter.tsx', 'en');
 
@@ -773,7 +828,12 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
         '@button',
         '@input',
         '@input-number',
-        '@divider'],
+        '@divider',
+        '@base-components',
+        '@flex-box',
+        '@neighbor-location',
+        '@button-link',
+        '@typography'],
     }, async ({ page }) => {
       await loadPage(page, 'stories/components/add-filter/advanced/examples/add-filter-complex-selects.tsx', 'en');
 
@@ -822,7 +882,12 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
         '@button',
         '@input',
         '@input-number',
-        '@divider'],
+        '@divider',
+        '@base-components',
+        '@flex-box',
+        '@neighbor-location',
+        '@button-link',
+        '@typography'],
     }, async ({ page }) => {
       await loadPage(page, 'stories/components/add-filter/advanced/examples/add-filter-complex-selects.tsx', 'en');
 
@@ -859,7 +924,12 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
         '@button',
         '@input',
         '@input-number',
-        '@divider'],
+        '@divider',
+        '@base-components',
+        '@flex-box',
+        '@neighbor-location',
+        '@button-link',
+        '@typography'],
     }, async ({ page }) => {
       await loadPage(page, 'stories/components/add-filter/advanced/examples/add-filter-complex-selects.tsx', 'en');
 
@@ -901,7 +971,12 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
         '@button',
         '@input',
         '@input-number',
-        '@divider'],
+        '@divider',
+        '@base-components',
+        '@flex-box',
+        '@neighbor-location',
+        '@button-link',
+        '@typography'],
     }, async ({ page }) => {
       await loadPage(page, 'stories/components/add-filter/advanced/examples/add-filter-complex-selects.tsx', 'en');
 
@@ -930,7 +1005,12 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
         '@button',
         '@input',
         '@input-number',
-        '@divider'],
+        '@divider',
+        '@base-components',
+        '@flex-box',
+        '@neighbor-location',
+        '@button-link',
+        '@typography'],
     }, async ({ page }) => {
       await loadPage(page, 'stories/components/add-filter/advanced/examples/add-filter-complex-selects.tsx', 'en');
 
@@ -961,7 +1041,12 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
         '@button',
         '@input',
         '@input-number',
-        '@divider'],
+        '@divider',
+        '@base-components',
+        '@flex-box',
+        '@neighbor-location',
+        '@button-link',
+        '@typography'],
     }, async ({ page }) => {
       await loadPage(page, 'stories/components/add-filter/advanced/examples/add-filter-complex-selects.tsx', 'en');
 
@@ -985,7 +1070,11 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
         '@input',
         '@radio',
         '@textarea',
-        '@select'],
+        '@select',
+        '@base-components',
+        '@flex-box',
+        '@button-link',
+        '@typography'],
     }, async ({ page }) => {
       await loadPage(page, 'stories/components/add-filter/advanced/examples/add-filter.tsx', 'en');
 
@@ -1020,7 +1109,10 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
         '@add-filter',
         '@base-trigger',
         '@d3-chart',
-        '@select'],
+        '@select',
+        '@base-components',
+        '@flex-box',
+        '@cigarette-chart'],
     }, async ({ page }) => {
       await loadPage(page, 'stories/components/add-filter/advanced/examples/controlled_add_filter.tsx', 'en');
 

semcore/badge/src/Badge.tsx

@@ -53,7 +53,7 @@ class RootBadge extends Component<
 
     if (type === 'unavailable' && !inverted) {
       return resolveColor('--intergalactic-text-secondary');
-    }
+    } // TODO: --intergalactic-badge-text-secondary
 
     return undefined;
   }
@@ -64,27 +64,27 @@ class RootBadge extends Component<
 
     if (inverted) {
       return resolveColor('--gray-white');
-    }
+    } // TODO: --intergalactic-badge-bg-invert
 
     switch (type) {
       case 'admin': {
         return resolveColor('--blue-400');
-      }
+      } // TODO: --intergalactic-badge-accent-admin
       case 'alpha': {
         return resolveColor('--red-400');
-      }
+      } // TODO: --intergalactic-badge-accent-alpha
       case 'beta': {
-        return resolveColor('--orange-400');
-      }
+        return resolveColor('--yellow-300');
+      } // TODO: --intergalactic-badge-accent-beta
       case 'new': {
-        return resolveColor('--green-400');
-      }
+        return resolveColor('--green-300');
+      } // TODO: --intergalactic-badge-accent-new
       case 'soon': {
         return resolveColor('--gray-400');
-      }
+      } // TODO: --intergalactic-badge-accent-soon
       case 'unavailable': {
-        return resolveColor('--gray-100');
-      }
+        return resolveColor('--gray-50');
+      } // TODO: --intergalactic-badge-bg-unavailable
       default: {
         const t: never = type;
         throw new Error(`Type can't be "${t}"`);

semcore/badge/src/style/badge.shadow.css

@@ -4,14 +4,14 @@ SBadge {
   height: var(--intergalactic-fs-200, 14px);
   line-height: var(--intergalactic-fs-200, 14px);
   padding: 0 var(--intergalactic-spacing-1x, 4px);
-  border-radius: var(--intergalactic-badge-rounded, 6px);
+  border-radius: var(--intergalactic-badge-rounded, 4px);
   white-space: nowrap;
   font-size: var(--intergalactic-fs-50, 10px);
   font-weight: var(--intergalactic-medium, 500);
   letter-spacing: 0.3px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949));
+  color: var(--intergalactic-text-primary-invert, oklch(0.999 0.001 180 / 0.949)); /* TODO: --intergalactic-badge-text-primary-invert */
 }
 
 SBadge[bg] {
@@ -20,7 +20,7 @@ SBadge[bg] {
 
 SBadge[inverted] {
   color: var(--intergalactic-text-primary, oklch(0.1 0.03 137 / 0.899));
-}
+} /* TODO: --intergalactic-badge-text-primary-invert */
 
 SBadge[color] {
   color: var(--color);