feat: add disabled and enabled opacity to theme.state

Author: adrcotfas

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

@@ -190,7 +190,9 @@ exports[`renders list section with custom title style 1`] = `
       "roundness": 4,
       "state": {
         "opacity": {
+          "disabled": 0.38,
           "dragged": 0.16,
+          "enabled": 1,
           "focused": 0.1,
           "hovered": 0.08,
           "pressed": 0.1,
@@ -740,7 +742,9 @@ exports[`renders list section with subheader 1`] = `
       "roundness": 4,
       "state": {
         "opacity": {
+          "disabled": 0.38,
           "dragged": 0.16,
+          "enabled": 1,
           "focused": 0.1,
           "hovered": 0.08,
           "pressed": 0.1,
@@ -1288,7 +1292,9 @@ exports[`renders list section without subheader 1`] = `
       "roundness": 4,
       "state": {
         "opacity": {
+          "disabled": 0.38,
           "dragged": 0.16,
+          "enabled": 1,
           "focused": 0.1,
           "hovered": 0.08,
           "pressed": 0.1,

src/theme/tokens/sys/state.ts

@@ -9,5 +9,7 @@ export const defaultState: ThemeState = {
     focused: stateOpacity.focused,
     pressed: stateOpacity.pressed,
     dragged: stateOpacity.dragged,
+    disabled: stateOpacity.disabled,
+    enabled: stateOpacity.enabled,
   },
 };

src/theme/types/state.ts

@@ -1,4 +1,10 @@
-export type InteractionState = 'hovered' | 'focused' | 'pressed' | 'dragged';
+export type InteractionState =
+  | 'hovered'
+  | 'focused'
+  | 'pressed'
+  | 'dragged'
+  | 'disabled'
+  | 'enabled';
 
 export type ThemeState = {
   opacity: Record<InteractionState, number>;