chore: change rgb declaration * 3

Author: tenphi

src/components/GlobalStyles.tsx

@@ -268,13 +268,13 @@ const GlobalStylesElement = createGlobalStyle<GlobalStylesElementProps>`
   pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
   code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
     text-shadow: none;
-    background: rgba(var(--purple-color-rgb), .2);
+    background: rgb(var(--purple-color-rgb) / .2);
   }
 
   pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
   code[class*="language-"]::selection, code[class*="language-"] ::selection {
     text-shadow: none;
-    background: rgba(var(--purple-color-rgb), .2);
+    background: rgb(var(--purple-color-rgb) / .2);
   }
 
   @media print {

src/components/content/Placeholder/Placeholder.tsx

@@ -30,21 +30,21 @@ const StyledPlaceholder = styled(PlaceholderElement)`
   background-size: var(--placeholder-animation-size);
 
   && {
-    background-color: rgba(var(--dark-color-rgb), 0.15);
+    background-color: rgb(var(--dark-color-rgb) / 0.15);
   }
 
   &[data-is-animated] {
     animation: placeholder-animation var(--placeholder-animation-time) linear
       infinite;
     background-image: linear-gradient(
       135deg,
-      rgba(var(--dark-color-rgb), 0.15) 0%,
-      rgba(var(--dark-color-rgb), 0.15) 5%,
-      rgba(var(--dark-color-rgb), 0) 35%,
-      rgba(var(--dark-03-color-rgb), 0.2) 50%,
-      rgba(var(--dark-03-color-rgb), 0) 65%,
-      rgba(var(--dark-color-rgb), 0.15) 95%,
-      rgba(var(--dark-color-rgb), 0.15) 100%
+      rgb(var(--dark-color-rgb) / 0.15) 0%,
+      rgb(var(--dark-color-rgb) / 0.15) 5%,
+      rgb(var(--dark-color-rgb) / 0) 35%,
+      rgb(var(--dark-03-color-rgb) / 0.2) 50%,
+      rgb(var(--dark-03-color-rgb) / 0) 65%,
+      rgb(var(--dark-color-rgb) / 0.15) 95%,
+      rgb(var(--dark-color-rgb) / 0.15) 100%
     );
   }
 

src/components/navigation/LegacyTabs/LegacyTabs.tsx

@@ -139,8 +139,8 @@ const StyledTabsContainerElement = styled(TabsContainerElement)`
     transition: all 0.15s linear;
     background-image: linear-gradient(
       to left,
-      rgba(255, 255, 255, 0),
-      rgba(255, 255, 255, 1)
+      rgb(255 255 255 / 0),
+      rgb(255 255 255 / 1)
     );
     z-index: 1;
   }
@@ -158,8 +158,8 @@ const StyledTabsContainerElement = styled(TabsContainerElement)`
     transition: all 0.15s linear;
     background-image: linear-gradient(
       to right,
-      rgba(255, 255, 255, 0),
-      rgba(255, 255, 255, 1)
+      rgb(255 255 255 / 0),
+      rgb(255 255 255 / 1)
     );
     z-index: 1;
   }

src/components/organisms/Modal/Modal.tsx

@@ -19,7 +19,7 @@ const Overlay = styled.div`
   right: 0;
   bottom: 0;
   left: 0;
-  background: rgba(0, 0, 0, 0.4);
+  background: rgb(0 0 0 / 0.4);
   place-content: center;
   place-items: center;
   z-index: 1000;

src/components/other/Base64Upload/Base64Upload.tsx

@@ -138,14 +138,14 @@ export const Base64Upload = styled(
   }
 
   && {
-    border: var(--border-width) solid rgba(var(--dark-02-color-rgb), 0.1);
+    border: var(--border-width) solid rgb(var(--dark-02-color-rgb) / 0.1);
   }
 
   &&:not([data-is-hovered]) {
-    background: rgba(var(--purple-color), 0);
+    background: rgb(var(--purple-color) / 0);
   }
 
   &&[data-is-hovered] {
-    background: rgba(var(--purple-color), 0.1);
+    background: rgb(var(--purple-color) / 0.1);
   }
 `;

src/stories/Styles.docs.mdx

@@ -347,8 +347,8 @@ The `gap` property can be used in flex, grid and even block layouts. If it's use
 ## Border
 
 ```tsx
-<Block border={true} padding>Default border</Block> // border: var(--border-width) solid var(--border-color); // 1px solid rgba(20, 20, 70, 0.1)
-<Block border="2bw #dark.20" padding>Border size of two default border sizes</Block> // border-width: calc(var(--border-width) * 2) solid rgba(20, 20, 70, 0.2)
+<Block border={true} padding>Default border</Block> // border: var(--border-width) solid var(--border-color); // 1px solid rgb(20 20 70 / 0.1)
+<Block border="2bw #dark.20" padding>Border size of two default border sizes</Block> // border-width: calc(var(--border-width) * 2) solid rgb(20 20 70 / 0.2)
 <Block border="bottom" padding>Default border only at the bottom</Block> // border-bottom: var(--border-width) solid var(--border-color);
 <Block border="2bw bottom left right #dark.50" padding>Complex border</Block>
 ```
@@ -406,7 +406,7 @@ The `gap` property can be used in flex, grid and even block layouts. If it's use
 
 ```tsx
 <Block shadow padding>Default shadow</Block> // box-shadow: 0 5px 15px var(--shadow-color);
-<Block shadow="5px 5px 10px #dark.20" padding>Custom shadow</Block> // box-shadow: 0 5px 15px rgba(var(--dark-color-rgb), .2);
+<Block shadow="5px 5px 10px #dark.20" padding>Custom shadow</Block> // box-shadow: 0 5px 15px rgb(var(--dark-color-rgb) / .2);
 ```
 
 <Root>

src/stories/Tasty.docs.mdx

@@ -29,7 +29,7 @@ const Element = tasty({
   styles: {
     // tokens
     '@local-padding': ['2x', '1x'], // responsive styles
-    '@text-color': 'rgba(255, 0, 0)',
+    '@text-color': 'rgb(255 0 0)',
     // styles
     padding: '@local-padding',
     color: {

src/tokens.ts

@@ -237,7 +237,7 @@ const TOKENS = {
   'scrollbar-width': '1.5x',
   'scrollbar-outline-width': '1ow',
   'scrollbar-radius': '1.5r',
-  'scrollbar-thumb-color': 'rgba(var(--text-color-rgb), .5)',
+  'scrollbar-thumb-color': 'rgb(var(--text-color-rgb) / .5)',
   'scrollbar-outline-color': 'var(--clear-color)',
   'scrollbar-bg-color': 'var(--grey-light-color)',
   'scrollbar-corner-color': 'var(--clear-color)',