From 87d83b08efde52b01ea32a1851bfcd23bcc3a082 Mon Sep 17 00:00:00 2001 From: "ilia.brauer" Date: Mon, 8 Jun 2026 12:47:49 +0200 Subject: [PATCH 1/3] [chore] not to process somehow oklch colors via postcss --- .storybook/preview.tsx | 2 -- tools/babel-plugin-styles/src/postcss.js | 1 + 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index a4624d5b8c..26af5c8a6b 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -2,8 +2,6 @@ import { PortalProvider } from '@semcore/base-components'; import type { Preview } from '@storybook/react-vite'; import React from 'react'; -// import '@semcore/theme/lib/highlights-light.css'; - const preview: Preview = { parameters: { controls: { diff --git a/tools/babel-plugin-styles/src/postcss.js b/tools/babel-plugin-styles/src/postcss.js index 81a51e429d..2ee87c393b 100644 --- a/tools/babel-plugin-styles/src/postcss.js +++ b/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, }), From a2cc6181d03448ba45a818c9fb0a02dc6cb9f507 Mon Sep 17 00:00:00 2001 From: "ilia.brauer" Date: Mon, 8 Jun 2026 13:48:24 +0200 Subject: [PATCH 2/3] [chore] not to process somehow oklch colors via postcss --- .storybook/preview.tsx | 37 ------------------------------------- 1 file changed, 37 deletions(-) diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 26af5c8a6b..bfbb0246b9 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -23,48 +23,13 @@ const preview: Preview = { }, }, }, - globalTypes: { - theme: { - description: 'Theme', - toolbar: { - title: 'Theme', - icon: 'mirror', - items: [ - { - value: 'old', - icon: 'circle', - title: 'Old theme', - }, - { - value: 'new', - icon: 'circle', - title: 'New theme', - }, - ], - dynamicTitle: true, - }, - }, - }, - - initialGlobals: { - theme: 'new', - }, decorators: [ (Story, params) => { const rootRef = React.useRef(null); - const stylesheet = params.globals.theme === 'new' - ? 'assets/theme/light.css' - : 'assets/core/light.css'; - - const stylesheetHighlight = params.globals.theme === 'new' - ? 'assets/theme/highlights-light.css' - : 'assets/core/highlights-light.css'; if (params.parameters.layout === 'fullscreen') { return ( <> - -
@@ -76,8 +41,6 @@ const preview: Preview = { return ( <> - -
From 1e9c97ffb4f5fcd538c15a35b6978f03535d2579 Mon Sep 17 00:00:00 2001 From: Valeryia Zimnitskaya Date: Mon, 8 Jun 2026 15:49:31 +0200 Subject: [PATCH 3/3] [chore] upd tests --- semcore/base-trigger/__tests__/utils.ts | 10 ++--- semcore/data-table/__tests__/utils.ts | 44 +++++++++---------- semcore/date-picker/__tests__/utils.ts | 10 ++--- .../__tests__/dropdown-menu.browser-test.tsx | 6 +-- .../feature-highlight.browser-test.tsx | 6 +-- .../__tests__/inline-input.browser-test.tsx | 2 +- semcore/link/__tests__/link.browser-test.tsx | 4 +- 7 files changed, 41 insertions(+), 41 deletions(-) diff --git a/semcore/base-trigger/__tests__/utils.ts b/semcore/base-trigger/__tests__/utils.ts index d604946ef9..1b93321598 100644 --- a/semcore/base-trigger/__tests__/utils.ts +++ b/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 = { - '--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) => { diff --git a/semcore/data-table/__tests__/utils.ts b/semcore/data-table/__tests__/utils.ts index 8711938e98..5466711b9f 100644 --- a/semcore/data-table/__tests__/utils.ts +++ b/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 = { - '--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 ( diff --git a/semcore/date-picker/__tests__/utils.ts b/semcore/date-picker/__tests__/utils.ts index 91c6aab487..d6aec17cb3 100644 --- a/semcore/date-picker/__tests__/utils.ts +++ b/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 = { - '--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 ( diff --git a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx b/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx index 62708395ef..c3d81649b5 100644 --- a/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx +++ b/semcore/dropdown-menu/__tests__/dropdown-menu.browser-test.tsx @@ -11,9 +11,9 @@ const checkStyles = async (element: any, styles: Record) => { // Matches the CSS fallback colors after the test bundle normalizes them. const cssVarColorFallbacks: Record = { - '--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) => { diff --git a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx b/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx index 2d94537275..275a4655e5 100644 --- a/semcore/feature-highlight/__tests__/feature-highlight.browser-test.tsx +++ b/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 = { - '--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) => { diff --git a/semcore/inline-input/__tests__/inline-input.browser-test.tsx b/semcore/inline-input/__tests__/inline-input.browser-test.tsx index 369c4ac52a..f98a26a84f 100644 --- a/semcore/inline-input/__tests__/inline-input.browser-test.tsx +++ b/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 = { - '--intergalactic-bg-primary-neutral': 'rgb(255, 255, 255)', + '--intergalactic-bg-primary-neutral': 'oklch(1 0 0)', }; const getCssVarColor = async (page: Page, varName: string) => { diff --git a/semcore/link/__tests__/link.browser-test.tsx b/semcore/link/__tests__/link.browser-test.tsx index c60761e60e..2a6d9b250c 100644 --- a/semcore/link/__tests__/link.browser-test.tsx +++ b/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 = { - '--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) => {