feat(outline): migrate to css outline (#627)

Author: tenphi

.changeset/three-bugs-tie.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': minor
+---
+
+Migration to modern rgb definition.

.changeset/twelve-humans-smoke.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Use native css outline for outline style.

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)',

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) => {

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'];

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,

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(','),
   };
 }