From 932ee62904e52763d99d9ef918ee019c91be3c99 Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Thu, 10 Apr 2025 14:01:20 +0200
Subject: [PATCH 1/2] feat(outline): migrate to css outline

---
 .../organisms/FileTabs/FileTabs.tsx           |  6 +--
 src/tasty/styles/boxShadow.combinator.ts      |  1 +
 src/tasty/styles/outline.ts                   | 38 ++++++++++++++-----
 src/tasty/styles/predefined.ts                |  4 +-
 src/tasty/styles/shadow.ts                    |  2 +-
 5 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/src/components/organisms/FileTabs/FileTabs.tsx b/src/components/organisms/FileTabs/FileTabs.tsx
index d2cfb4b06..b5bf802a9 100644
--- a/src/components/organisms/FileTabs/FileTabs.tsx
+++ b/src/components/organisms/FileTabs/FileTabs.tsx
@@ -108,9 +108,9 @@ const TabElement = tasty(Action, {
     fontWeight: 500,
     opacity: 1,
     preset: 'default',
-    outline: {
-      '': 'inset #purple-03.0',
-      'focused & focus-visible': 'inset #purple-03',
+    shadow: {
+      '': 'inset 0 0 0 1ow #purple-03.0',
+      'focused & focus-visible': 'inset 0 0 0 1ow #purple-03',
     },
     transform: {
       '': 'translate(0, 0)',
diff --git a/src/tasty/styles/boxShadow.combinator.ts b/src/tasty/styles/boxShadow.combinator.ts
index 1879df5d0..5c675b3d7 100644
--- a/src/tasty/styles/boxShadow.combinator.ts
+++ b/src/tasty/styles/boxShadow.combinator.ts
@@ -1,3 +1,4 @@
+// Deprecated: left as an example
 export function boxShadowCombinator(styles) {
   const values = boxShadowCombinator.__lookupStyles.reduce(
     (list: string[], style) => {
diff --git a/src/tasty/styles/outline.ts b/src/tasty/styles/outline.ts
index e9eec836d..72e600655 100644
--- a/src/tasty/styles/outline.ts
+++ b/src/tasty/styles/outline.ts
@@ -1,21 +1,39 @@
-import { parseStyle } from '../utils/styles';
+import { filterMods, parseStyle } from '../utils/styles';
 
+const BORDER_STYLES = [
+  'none',
+  'hidden',
+  'dotted',
+  'dashed',
+  'solid',
+  'double',
+  'groove',
+  'ridge',
+  'inset',
+  'outset',
+];
+
+/**
+ *
+ * @param outline
+ * @return {{outline: string}|*}
+ */
 export function outlineStyle({ outline }) {
-  if (!outline && outline !== 0) return '';
+  if (!outline && outline !== 0) return;
 
   if (outline === true) outline = '1ow';
 
-  const { values, color, mods } = parseStyle(String(outline));
+  const { values, mods, color } = parseStyle(String(outline));
+
+  const typeMods = filterMods(mods, BORDER_STYLES);
 
-  const inset = mods.includes('inset');
-  const size = values[0] || 'var(--outline-width)';
+  const value = values[0] || 'var(--outline-width)';
+  const type = typeMods[0] || 'solid';
   const outlineColor = color || 'var(--outline-color)';
 
-  return {
-    '--local-outline-box-shadow': `${
-      inset ? 'inset ' : ''
-    }0 0 0 ${size} ${outlineColor}`,
-  };
+  const styleValue = [value, type, outlineColor].join(' ');
+
+  return { outline: styleValue };
 }
 
 outlineStyle.__lookupStyles = ['outline'];
diff --git a/src/tasty/styles/predefined.ts b/src/tasty/styles/predefined.ts
index 85483f7d9..91356020b 100644
--- a/src/tasty/styles/predefined.ts
+++ b/src/tasty/styles/predefined.ts
@@ -26,7 +26,6 @@ import { fontStyle } from './font';
 import { outlineStyle } from './outline';
 import { transitionStyle } from './transition';
 import { groupRadiusAttr } from './groupRadius';
-import { boxShadowCombinator } from './boxShadow.combinator';
 import { styledScrollbarStyle } from './styledScrollbar';
 import { displayStyle } from './display';
 import { alignStyle } from './align';
@@ -149,6 +148,8 @@ export function predefine() {
       .map((s, i) => (i ? columnsConverter : rowsConverter)(s))
       .join('/');
   });
+  // Other styles
+  defineStyleAlias('outlineOffset', 'outlineOffset', numberConverter);
 
   [
     displayStyle,
@@ -172,7 +173,6 @@ export function predefine() {
     alignStyle,
     justifyStyle,
     presetStyle,
-    boxShadowCombinator,
     outlineStyle,
     fontStyle,
     fontStyleStyle,
diff --git a/src/tasty/styles/shadow.ts b/src/tasty/styles/shadow.ts
index b32efa79f..09097a7ca 100644
--- a/src/tasty/styles/shadow.ts
+++ b/src/tasty/styles/shadow.ts
@@ -14,7 +14,7 @@ export function shadowStyle({ shadow }) {
   if (shadow === true) shadow = '0 5px 15px #shadow';
 
   return {
-    '--local-shadow-box-shadow': shadow.split(',').map(toBoxShadow).join(','),
+    'box-shadow': shadow.split(',').map(toBoxShadow).join(','),
   };
 }
 

From 6959f8ea65746a4b4c05889b43fcaf8f48f85dc0 Mon Sep 17 00:00:00 2001
From: Andrey Yamanov <tenphi@gmail.com>
Date: Thu, 10 Apr 2025 15:28:29 +0200
Subject: [PATCH 2/2] chore: add changelog

---
 .changeset/three-bugs-tie.md      | 5 +++++
 .changeset/twelve-humans-smoke.md | 5 +++++
 2 files changed, 10 insertions(+)
 create mode 100644 .changeset/three-bugs-tie.md
 create mode 100644 .changeset/twelve-humans-smoke.md

diff --git a/.changeset/three-bugs-tie.md b/.changeset/three-bugs-tie.md
new file mode 100644
index 000000000..63d318ccf
--- /dev/null
+++ b/.changeset/three-bugs-tie.md
@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Migration to modern rgb definition.
diff --git a/.changeset/twelve-humans-smoke.md b/.changeset/twelve-humans-smoke.md
new file mode 100644
index 000000000..29ca74aca
--- /dev/null
+++ b/.changeset/twelve-humans-smoke.md
@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Use native css outline for outline style.