chore: change rgb declaration * 2

Author: tenphi

src/tasty/styles/createStyle.ts

@@ -48,7 +48,7 @@ export function createStyle(
             [finalCssStyle]: `var(--${name}-color, ${rgba})`,
             [`${finalCssStyle}-rgb`]: `var(--${name}-color-rgb, ${getRgbValuesFromRgbaString(
               rgba,
-            ).join(', ')})`,
+            ).join(' ')})`,
           };
         } else if (name) {
           if (color) {
@@ -66,7 +66,7 @@ export function createStyle(
           return {
             [finalCssStyle]: rgba,
             [`${finalCssStyle}-rgb`]:
-              getRgbValuesFromRgbaString(rgba).join(', '),
+              getRgbValuesFromRgbaString(rgba).join(' '),
           };
         }
 

src/tasty/utils/styles.ts

@@ -589,7 +589,7 @@ export function hexToRgb(hex) {
   }
 
   if (rgba.length >= 3) {
-    return `rgb(${rgba.slice(0, 3).join(', ')}${rgba.length > 3 ? ` / ${rgba[3]}` : ''})`;
+    return `rgb(${rgba.slice(0, 3).join(' ')}${rgba.length > 3 ? ` / ${rgba[3]}` : ''})`;
   }
 
   return null;

src/tokens.ts

@@ -1,34 +1,34 @@
 const colors = {
-  pink: '255, 100, 146',
-  'pink-02': '255, 131, 168',
-  purple: '122, 119, 255',
-  'purple-text': '102, 93, 232',
-  'purple-01': '122, 119, 255',
-  'purple-02': '149, 146, 255',
-  'purple-03': '175, 173, 255',
-  'purple-04': '202, 201, 255',
-  text: '91, 92, 125',
-  dark: '20, 20, 70',
-  'dark-01': '20, 20, 70',
-  'dark-02': '67, 67, 107',
-  'dark-03': '114, 114, 144',
-  'dark-04': '161, 161, 181',
-  'dark-05': '213, 213, 226',
-  'grey-light': '248, 248, 249',
-  light: '246, 246, 248',
-  white: '255, 255, 255',
-  black: '0, 0, 0',
-  'danger-text': '227, 0, 42',
-  danger: '255, 55, 73',
-  'light-grey': '248, 248, 249',
-  success: '49, 195, 124',
-  'success-text': '48, 166, 102',
-  note: '251, 188, 5',
-  warning: '224, 86, 43',
+  pink: '255 100 146',
+  'pink-02': '255 131 168',
+  purple: '122 119 255',
+  'purple-text': '102 93 232',
+  'purple-01': '122 119 255',
+  'purple-02': '149 146 255',
+  'purple-03': '175 173 255',
+  'purple-04': '202 201 255',
+  text: '91 92 125',
+  dark: '20 20 70',
+  'dark-01': '20 20 70',
+  'dark-02': '67 67 107',
+  'dark-03': '114 114 144',
+  'dark-04': '161 161 181',
+  'dark-05': '213 213 226',
+  'grey-light': '248 248 249',
+  light: '246 246 248',
+  white: '255 255 255',
+  black: '0 0 0',
+  'danger-text': '227 0 42',
+  danger: '255 55 73',
+  'light-grey': '248 248 249',
+  success: '49 195 124',
+  'success-text': '48 166 102',
+  note: '251 188 5',
+  warning: '224 86 43',
 };
 
 function color(name, opacity = 1) {
-  return `rgba(${colors[name]}, ${opacity})`;
+  return `rgb(${colors[name]} / ${opacity})`;
 }
 
 const TOKENS = {
@@ -49,11 +49,11 @@ const TOKENS = {
   transition: '80ms',
   'clear-color': 'transparent',
   'border-color': color('dark', 0.1),
-  'border-opaque-color': 'rgb(227, 227, 233)',
+  'border-opaque-color': 'rgb(227 227 233)',
   'shadow-color': color('dark-03', 0.1),
   'draft-color': color('dark', 0.2),
   'minor-color': color('dark', 0.65),
-  'success-bg-color': 'rgba(41, 190, 110, .1)',
+  'success-bg-color': 'rgb(41 190 110 / .1)',
   'note-bg-color': color('note', 0.1),
   'note-text-color': color('note', 1),
   'danger-bg-color': color('danger', 0.05),