fix: update state opacity tokens

Author: adrcotfas

src/components/ToggleButton/utils.ts

@@ -12,7 +12,7 @@ export const getToggleButtonColor = ({
 }) => {
   if (checked) {
     return color(theme.colors.onSecondaryContainer)
-      .alpha(tokens.md.ref.opacity.level2)
+      .alpha(tokens.md.ref.stateOpacity.pressed)
       .rgb()
       .string();
   }

src/components/__tests__/ToggleButton.test.tsx

@@ -53,7 +53,7 @@ describe('getToggleButtonColor', () => {
   it('should return correct color when checked and theme version 3', () => {
     expect(getToggleButtonColor({ theme: getTheme(), checked: true })).toBe(
       color(getTheme().colors.onSecondaryContainer)
-        .alpha(tokens.md.ref.opacity.level2)
+        .alpha(tokens.md.ref.stateOpacity.pressed)
         .rgb()
         .string()
     );
@@ -62,7 +62,7 @@ describe('getToggleButtonColor', () => {
   it('should return correct color when checked and theme version 3, dark theme', () => {
     expect(getToggleButtonColor({ theme: getTheme(true), checked: true })).toBe(
       color(getTheme(true).colors.onSecondaryContainer)
-        .alpha(tokens.md.ref.opacity.level2)
+        .alpha(tokens.md.ref.stateOpacity.pressed)
         .rgb()
         .string()
     );

src/components/__tests__/__snapshots__/FAB.test.tsx.snap

@@ -527,7 +527,7 @@ exports[`renders disabled FAB 1`] = `
   collapsable={false}
   style={
     {
-      "backgroundColor": "rgba(29, 27, 32, 0.12)",
+      "backgroundColor": "rgba(29, 27, 32, 0.1)",
       "borderRadius": 16,
       "opacity": 1,
       "shadowColor": "#000",
@@ -551,7 +551,7 @@ exports[`renders disabled FAB 1`] = `
     pointerEvents="auto"
     style={
       {
-        "backgroundColor": "rgba(29, 27, 32, 0.12)",
+        "backgroundColor": "rgba(29, 27, 32, 0.1)",
         "borderRadius": 16,
         "flex": undefined,
         "shadowColor": "#000",

src/components/__tests__/__snapshots__/IconButton.test.tsx.snap

@@ -26,7 +26,7 @@ exports[`renders disabled icon button 1`] = `
     style={
       {
         "backgroundColor": "transparent",
-        "borderColor": "rgba(29, 27, 32, 0.12)",
+        "borderColor": "rgba(29, 27, 32, 0.1)",
         "borderRadius": 20,
         "borderWidth": 0,
         "elevation": 0,

src/components/__tests__/__snapshots__/ListSection.test.tsx.snap

@@ -69,7 +69,7 @@ exports[`renders list section with custom title style 1`] = `
         "surfaceContainerLow": "rgba(247, 242, 250, 1)",
         "surfaceContainerLowest": "rgba(255, 255, 255, 1)",
         "surfaceDim": "rgba(222, 216, 225, 1)",
-        "surfaceDisabled": "rgba(29, 27, 32, 0.12)",
+        "surfaceDisabled": "rgba(29, 27, 32, 0.1)",
         "surfaceVariant": "rgba(231, 224, 236, 1)",
         "tertiary": "rgba(125, 82, 96, 1)",
         "tertiaryContainer": "rgba(255, 216, 228, 1)",
@@ -613,7 +613,7 @@ exports[`renders list section with subheader 1`] = `
         "surfaceContainerLow": "rgba(247, 242, 250, 1)",
         "surfaceContainerLowest": "rgba(255, 255, 255, 1)",
         "surfaceDim": "rgba(222, 216, 225, 1)",
-        "surfaceDisabled": "rgba(29, 27, 32, 0.12)",
+        "surfaceDisabled": "rgba(29, 27, 32, 0.1)",
         "surfaceVariant": "rgba(231, 224, 236, 1)",
         "tertiary": "rgba(125, 82, 96, 1)",
         "tertiaryContainer": "rgba(255, 216, 228, 1)",
@@ -1155,7 +1155,7 @@ exports[`renders list section without subheader 1`] = `
         "surfaceContainerLow": "rgba(247, 242, 250, 1)",
         "surfaceContainerLowest": "rgba(255, 255, 255, 1)",
         "surfaceDim": "rgba(222, 216, 225, 1)",
-        "surfaceDisabled": "rgba(29, 27, 32, 0.12)",
+        "surfaceDisabled": "rgba(29, 27, 32, 0.1)",
         "surfaceVariant": "rgba(231, 224, 236, 1)",
         "tertiary": "rgba(125, 82, 96, 1)",
         "tertiaryContainer": "rgba(255, 216, 228, 1)",

src/components/__tests__/__snapshots__/ToggleButton.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`renders disabled toggle button 1`] = `
   collapsable={false}
   style={
     {
-      "backgroundColor": "rgba(74, 68, 88, 0.12)",
+      "backgroundColor": "rgba(74, 68, 88, 0.1)",
       "borderRadius": 4,
       "height": 42,
       "margin": 0,
@@ -25,7 +25,7 @@ exports[`renders disabled toggle button 1`] = `
     collapsable={false}
     style={
       {
-        "backgroundColor": "rgba(74, 68, 88, 0.12)",
+        "backgroundColor": "rgba(74, 68, 88, 0.1)",
         "borderColor": "rgba(121, 116, 126, 1)",
         "borderRadius": 4,
         "borderWidth": 0,
@@ -144,7 +144,7 @@ exports[`renders toggle button 1`] = `
   collapsable={false}
   style={
     {
-      "backgroundColor": "rgba(74, 68, 88, 0.12)",
+      "backgroundColor": "rgba(74, 68, 88, 0.1)",
       "borderRadius": 4,
       "height": 42,
       "margin": 0,
@@ -164,7 +164,7 @@ exports[`renders toggle button 1`] = `
     collapsable={false}
     style={
       {
-        "backgroundColor": "rgba(74, 68, 88, 0.12)",
+        "backgroundColor": "rgba(74, 68, 88, 0.1)",
         "borderColor": "rgba(121, 116, 126, 1)",
         "borderRadius": 4,
         "borderWidth": 0,

src/styles/themes/DarkTheme.tsx

@@ -4,7 +4,7 @@ import { MD3LightTheme } from './LightTheme';
 import { MD3Colors, tokens } from './tokens';
 import type { MD3Theme } from '../../types';
 
-const { palette, opacity } = tokens.md.ref;
+const { palette, stateOpacity } = tokens.md.ref;
 
 export const MD3DarkTheme: MD3Theme = {
   ...MD3LightTheme,
@@ -25,8 +25,9 @@ export const MD3DarkTheme: MD3Theme = {
     surfaceContainerHigh: palette.neutral17,
     surfaceContainerHighest: palette.neutral22,
     surfaceVariant: palette.neutralVariant30,
+    //TODO: remove this
     surfaceDisabled: color(palette.neutral90)
-      .alpha(opacity.level2)
+      .alpha(stateOpacity.pressed)
       .rgb()
       .string(),
     background: palette.neutral6,
@@ -40,8 +41,9 @@ export const MD3DarkTheme: MD3Theme = {
     onTertiaryContainer: palette.tertiary90,
     onSurface: palette.neutral90,
     onSurfaceVariant: palette.neutralVariant80,
+    //TODO: remove this
     onSurfaceDisabled: color(palette.neutral90)
-      .alpha(opacity.level4)
+      .alpha(stateOpacity.disabled)
       .rgb()
       .string(),
     onError: palette.error20,
@@ -66,6 +68,7 @@ export const MD3DarkTheme: MD3Theme = {
     onTertiaryFixedVariant: palette.tertiary30,
     shadow: palette.neutral0,
     scrim: palette.neutral0,
+    //TODO: remove this
     backdrop: color(MD3Colors.neutralVariant20).alpha(0.4).rgb().string(),
     elevation: {
       level0: 'transparent',

src/styles/themes/LightTheme.tsx

@@ -4,7 +4,7 @@ import { MD3Colors, tokens } from './tokens';
 import type { MD3Theme } from '../../types';
 import configureFonts from '../fonts';
 
-const { palette, opacity } = tokens.md.ref;
+const { palette, stateOpacity } = tokens.md.ref;
 
 export const MD3LightTheme: MD3Theme = {
   dark: false,
@@ -26,7 +26,7 @@ export const MD3LightTheme: MD3Theme = {
     surfaceContainerHighest: palette.neutral90,
     surfaceVariant: palette.neutralVariant90,
     surfaceDisabled: color(palette.neutral10)
-      .alpha(opacity.level2)
+      .alpha(stateOpacity.pressed)
       .rgb()
       .string(),
     background: palette.neutral98,
@@ -41,7 +41,7 @@ export const MD3LightTheme: MD3Theme = {
     onSurface: palette.neutral10,
     onSurfaceVariant: palette.neutralVariant30,
     onSurfaceDisabled: color(palette.neutral10)
-      .alpha(opacity.level4)
+      .alpha(stateOpacity.disabled)
       .rgb()
       .string(),
     onError: palette.error100,

src/styles/themes/tokens.tsx

@@ -116,11 +116,15 @@ const ref = {
     weightMedium: '500' as Font['fontWeight'],
   },
 
-  opacity: {
-    level1: 0.08,
-    level2: 0.12,
-    level3: 0.16,
-    level4: 0.38,
+  /** State layers opacity
+   * @see https://m3.material.io/foundations/interaction/states/state-layers
+   */
+  stateOpacity: {
+    dragged: 0.16,
+    pressed: 0.1,
+    focus: 0.1,
+    hover: 0.08,
+    disabled: 0.38,
   },
 };