[UIK-5248][chore] not to process somehow oklch colors via postcss

semcore/base-trigger/__tests__/utils.ts

@@ -51,11 +51,11 @@ export const expectVisibleHintsCount = async (page: Page, count: number): Promis
 
 // Matches the CSS fallback colors after the test bundle normalizes them.
 const cssVarColorFallbacks: Record<string, string> = {
-  '--intergalactic-bg-primary-neutral': 'rgb(255, 255, 255)',
-  '--intergalactic-border-primary': 'rgba(0, 12, 8, 0.161)',
-  '--intergalactic-border-info-active': 'rgb(135, 150, 239)',
-  '--intergalactic-border-success-active': 'rgb(0, 185, 145)',
-  '--intergalactic-border-critical-active': 'rgb(255, 99, 100)',
+  '--intergalactic-bg-primary-neutral': 'oklch(1 0 0)',
+  '--intergalactic-border-primary': 'oklch(0.137 0.026 175.7 / 0.161)',
+  '--intergalactic-border-info-active': 'oklch(0.7 0.131 275.2)',
+  '--intergalactic-border-success-active': 'oklch(0.7 0.166 170)',
+  '--intergalactic-border-critical-active': 'oklch(0.7 0.21 23)',
 };
 
 export const getCssVarColor = async (page: Page, varName: string) => {

semcore/data-table/__tests__/utils.ts

@@ -65,28 +65,28 @@ type ColorProperty = 'backgroundColor' | 'borderColor' | 'color';
 
 // Matches the CSS fallback colors after the test bundle normalizes them.
 const cssVarColorFallbacks: Record<string, string> = {
-  '--intergalactic-bg-primary-neutral': 'rgb(255, 255, 255)',
-  '--intergalactic-border-secondary': 'rgba(0, 21, 16, 0.07)',
-  '--intergalactic-border-table-accent': 'rgba(0, 12, 8, 0.161)',
-  '--intergalactic-table-td-cell-accordion': 'rgb(255, 255, 255)',
-  '--intergalactic-table-td-cell-active': 'rgb(244, 245, 245)',
-  '--intergalactic-table-td-cell-critical': 'rgb(255, 244, 247)',
-  '--intergalactic-table-td-cell-critical-active': 'rgb(255, 226, 230)',
-  '--intergalactic-table-td-cell-critical-hover': 'rgb(255, 235, 239)',
-  '--intergalactic-table-td-cell-hover': 'rgb(248, 249, 248)',
-  '--intergalactic-table-td-cell-new': 'rgb(225, 255, 250)',
-  '--intergalactic-table-td-cell-new-active': 'rgb(181, 252, 235)',
-  '--intergalactic-table-td-cell-new-hover': 'rgb(201, 255, 243)',
-  '--intergalactic-table-td-cell-selected': 'rgb(246, 248, 255)',
-  '--intergalactic-table-td-cell-selected-active': 'rgb(226, 235, 255)',
-  '--intergalactic-table-td-cell-selected-hover': 'rgb(236, 241, 255)',
-  '--intergalactic-table-td-cell-unread': 'rgb(248, 249, 248)',
-  '--intergalactic-table-td-cell-warning': 'rgb(255, 248, 230)',
-  '--intergalactic-table-td-cell-warning-active': 'rgb(255, 231, 193)',
-  '--intergalactic-table-td-cell-warning-hover': 'rgb(255, 240, 212)',
-  '--intergalactic-table-th-primary-cell': 'rgb(248, 249, 248)',
-  '--intergalactic-table-th-secondary-cell': 'rgb(255, 255, 255)',
-  '--intergalactic-text-primary': 'rgba(1, 5, 0, 0.899)',
+  '--intergalactic-bg-primary-neutral': 'oklch(1 0 0)',
+  '--intergalactic-border-secondary': 'oklch(0.176 0.033 175.7 / 0.07)',
+  '--intergalactic-border-table-accent': 'oklch(0.137 0.026 175.7 / 0.161)',
+  '--intergalactic-table-td-cell-accordion': 'oklch(1 0 0)',
+  '--intergalactic-table-td-cell-active': 'oklch(0.97 0.001 180)',
+  '--intergalactic-table-td-cell-critical': 'oklch(0.977 0.016 1.8)',
+  '--intergalactic-table-td-cell-critical-active': 'oklch(0.938 0.042 8.4)',
+  '--intergalactic-table-td-cell-critical-hover': 'oklch(0.958 0.029 5.7)',
+  '--intergalactic-table-td-cell-hover': 'oklch(0.98 0.001 180)',
+  '--intergalactic-table-td-cell-new': 'oklch(0.977 0.036 184)',
+  '--intergalactic-table-td-cell-new-active': 'oklch(0.94 0.074 178.1)',
+  '--intergalactic-table-td-cell-new-hover': 'oklch(0.96 0.057 179.7)',
+  '--intergalactic-table-td-cell-selected': 'oklch(0.98 0.01 267.6)',
+  '--intergalactic-table-td-cell-selected-active': 'oklch(0.939 0.032 268)',
+  '--intergalactic-table-td-cell-selected-hover': 'oklch(0.959 0.021 267.8)',
+  '--intergalactic-table-td-cell-unread': 'oklch(0.98 0.001 180)',
+  '--intergalactic-table-td-cell-warning': 'oklch(0.979 0.03 88.1)',
+  '--intergalactic-table-td-cell-warning-active': 'oklch(0.939 0.069 79.8)',
+  '--intergalactic-table-td-cell-warning-hover': 'oklch(0.96 0.05 83.1)',
+  '--intergalactic-table-th-primary-cell': 'oklch(0.98 0.001 180)',
+  '--intergalactic-table-th-secondary-cell': 'oklch(1 0 0)',
+  '--intergalactic-text-primary': 'oklch(0.1 0.03 137 / 0.899)',
 };
 
 export const getCssVarColor = async (

semcore/date-picker/__tests__/utils.ts

@@ -57,11 +57,11 @@ type ColorProperty = 'backgroundColor' | 'borderColor' | 'color';
 
 // Matches the CSS fallback colors after the test bundle normalizes them.
 const cssVarColorFallbacks: Record<string, string> = {
-  '--intergalactic-control-primary-info': 'rgb(26, 30, 26)',
-  '--intergalactic-date-picker-cell': 'rgb(255, 255, 255)',
-  '--intergalactic-date-picker-cell-active': 'rgb(118, 128, 231)',
-  '--intergalactic-text-primary': 'rgba(1, 5, 0, 0.899)',
-  '--intergalactic-text-primary-invert': 'rgba(254, 255, 255, 0.949)',
+  '--intergalactic-control-primary-info': 'oklch(0.23 0.01 140)',
+  '--intergalactic-date-picker-cell': 'oklch(1 0 0)',
+  '--intergalactic-date-picker-cell-active': 'oklch(0.64 0.152 276.7)',
+  '--intergalactic-text-primary': 'oklch(0.1 0.03 137 / 0.899)',
+  '--intergalactic-text-primary-invert': 'oklch(0.999 0.001 180 / 0.949)',
 };
 
 export const getCssVarColor = async (

semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx

@@ -11,9 +11,9 @@ const checkStyles = async (element: any, styles: Record<string, string>) => {
 
 // Matches the CSS fallback colors after the test bundle normalizes them.
 const cssVarColorFallbacks: Record<string, string> = {
-  '--intergalactic-dropdown-menu-item-hover': 'rgba(0, 22, 16, 0.028)',
-  '--intergalactic-dropdown-menu-item-selected': 'rgba(0, 80, 255, 0.077)',
-  '--intergalactic-dropdown-menu-item-selected-hover': 'rgba(0, 77, 255, 0.191)',
+  '--intergalactic-dropdown-menu-item-hover': 'oklch(0.177 0.033 175.6 / 0.028)',
+  '--intergalactic-dropdown-menu-item-selected': 'oklch(0.525 0.265 263 / 0.077)',
+  '--intergalactic-dropdown-menu-item-selected-hover': 'oklch(0.52 0.268 263.2 / 0.191)',
 };
 
 const getCssVarColor = async (page: Page, varName: string) => {

semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx

@@ -19,9 +19,9 @@ const featureHighlightTokens = {
 
 // Matches the CSS fallback gradients after the test bundle normalizes them.
 const cssVarBackgroundImageFallbacks: Record<string, string> = {
-  '--intergalactic-keyboard-focus-feature-highlight-outline': 'linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(102, 107, 219))',
-  '--intergalactic-border-feature-highlight': 'linear-gradient(90deg in oklch, rgb(210, 179, 255), rgb(176, 193, 254))',
-  '--intergalactic-border-feature-highlight-active': 'linear-gradient(90deg in oklch, rgb(192, 142, 255), rgb(148, 165, 245))',
+  '--intergalactic-keyboard-focus-feature-highlight-outline': 'linear-gradient(90deg in oklch, #c08eff, oklch(0.58 0.168 278.2))',
+  '--intergalactic-border-feature-highlight': 'linear-gradient(90deg in oklch, #d2b3ff, oklch(0.82 0.088 272.1))',
+  '--intergalactic-border-feature-highlight-active': 'linear-gradient(90deg in oklch, #c08eff, oklch(0.74 0.117 274.1))',
 };
 
 const getCssVarBackgroundImage = async (page: Page, varName: string) => {

semcore/inline-input/__tests__/inline-input.browser-test.tsx

@@ -24,7 +24,7 @@ export const locators = {
 
 // Matches the CSS fallback colors after the test bundle normalizes them.
 const cssVarColorFallbacks: Record<string, string> = {
-  '--intergalactic-bg-primary-neutral': 'rgb(255, 255, 255)',
+  '--intergalactic-bg-primary-neutral': 'oklch(1 0 0)',
 };
 
 const getCssVarColor = async (page: Page, varName: string) => {

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

@@ -23,8 +23,8 @@ const storyPath = 'stories/components/link/tests/examples/basic_usage.tsx';
 
 // Matches the CSS fallback colors after the test bundle normalizes them.
 const cssVarColorFallbacks: Record<string, string> = {
-  '--intergalactic-text-link': 'rgb(35, 95, 226)',
-  '--intergalactic-text-link-hover-active': 'rgb(33, 89, 215)',
+  '--intergalactic-text-link': 'oklch(0.53 0.21 263)',
+  '--intergalactic-text-link-hover-active': 'oklch(0.51 0.202 263)',
 };
 
 const getCssVarColor = async (page: Page, varName: string) => {

tools/babel-plugin-styles/src/postcss.js

@@ -36,6 +36,7 @@ module.exports = function (options) {
         'color-mod-function': {
           unresolved: 'error',
         },
+        'oklab-function': false,
       },
       ...options.presetEnv,
     }),