chore: introduced component specific alpha layers

Author: wonderlul

src/components/TextField/constants.ts

@@ -61,3 +61,10 @@ export const TEXT_FIELD_BORDER_RADIUS = 4;
 // ============
 export const MULTILINE_PADDING_TOP =
   ACTIVE_LABEL_FONT_SIZE + TEXT_FIELD_PADDING_VERTICAL;
+
+// ============
+// OPACITY
+// ============
+
+export const OUTLINE_ALPHA = 0.12;
+export const FILLED_CONTAINER_ALPHA = 0.04;

src/components/TextField/outlined/utils.ts

@@ -1,7 +1,7 @@
 import color from 'color';
 
-import { tokens } from '../../../styles/themes/v3/tokens';
 import type { InternalTheme } from '../../../types';
+import { OUTLINE_ALPHA } from '../constants';
 
 export const getOutlinedFieldColors = ({
   theme,
@@ -19,10 +19,7 @@ export const getOutlinedFieldColors = ({
   let inactiveOutlineColor = outline;
 
   if (disabled) {
-    inactiveOutlineColor = color(onSurface)
-      .alpha(tokens.md.ref.stateOpacity.dragged)
-      .rgb()
-      .string();
+    inactiveOutlineColor = color(onSurface).alpha(OUTLINE_ALPHA).rgb().string();
   }
 
   let activeOutlineColor = primary;

src/components/TextField/utils.ts

@@ -1,6 +1,6 @@
 import color from 'color';
 
-import { tokens } from '../../styles/themes/v3/tokens';
+import { FILLED_CONTAINER_ALPHA } from './constants';
 import type { InternalTheme } from '../../types';
 
 export const getAccentColors = ({
@@ -80,10 +80,7 @@ export const getFieldBackgroundColor = ({
     colors: { onSurface, surfaceContainerHighest },
   } = theme;
   if (disabled) {
-    return color(onSurface)
-      .alpha(tokens.md.ref.stateOpacity.hover)
-      .rgb()
-      .string();
+    return color(onSurface).alpha(FILLED_CONTAINER_ALPHA).rgb().string();
   }
 
   return surfaceContainerHighest;