@moises.ai/design-system 3.12.1 → 3.12.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.12.1",
+  "version": "3.12.2",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",

package/src/components/TrackControlButton/TrackControlButton.module.css

@@ -38,17 +38,17 @@
   opacity: 0.5;
 }
 
-.button.autoMute:not(.active) {
+.button.autoMute {
   background: var(--Colors-Neutral-Neutral-Alpha-2, rgba(216, 244, 246, 0.04));
-  color: var(--warning-alpha-12);
+  color: var(--colors-semantic-warning-alpha-9);
 }
 
-.button.autoMute:not(.active):hover:not(:disabled) {
+.button.autoMute:hover:not(:disabled) {
   background: var(--Colors-Neutral-Neutral-Alpha-3, rgba(221, 234, 248, 0.08));
-  color: color-mix(in srgb, var(--warning-alpha-12) 88%, var(--colors-semantic-warning-alpha-9));
+  color: var(--colors-semantic-warning-alpha-9);
 }
 
-.button.autoMute:not(.active):active:not(:disabled) {
+.button.autoMute:active:not(:disabled) {
   background: var(--Colors-Neutral-Neutral-Alpha-4, rgba(211, 237, 248, 0.11));
 }
 
@@ -76,21 +76,6 @@
   filter: brightness(0.92);
 }
 
-.button.active.autoMute {
-  background-color: var(--warning-alpha-12);
-  color: var(--colors-neutral-neutral-1);
-}
-
-.button.active.autoMute:hover:not(:disabled) {
-  background-color: color-mix(in srgb, var(--warning-alpha-12) 78%, var(--colors-semantic-warning-alpha-9));
-  color: var(--colors-neutral-neutral-1);
-}
-
-.button.active.autoMute:active:not(:disabled) {
-  background-color: color-mix(in srgb, var(--warning-alpha-12) 62%, var(--colors-semantic-warning-alpha-9));
-  color: var(--colors-neutral-neutral-1);
-}
-
 .button.active.solo {
   background-color: var(--colors-accent-accent-10);
   color: var(--colors-neutral-neutral-1);

package/src/components/TrackControlsToggle/TrackControlsToggle.stories.jsx

@@ -8,7 +8,8 @@ export default {
     layout: 'centered',
     docs: {
       description: {
-        component: 'Toggle button for track controls (Record, Mute, Auto Mute, and Solo). Use `selected` to represent active state and `tooltipContent` to show context and keyboard shortcut.',
+        component:
+          'Toggle button for track controls (Record, Mute, Auto Mute, and Solo). For `type="autoMute"`, o Figma define um único visual (amarelo em fundo alpha-2); `selected` só afeta `aria-pressed`, não as cores.',
       },
     },
   },
@@ -98,7 +99,7 @@ export const MuteSelected = {
   },
 }
 
-export const AutoMuteSelected = {
+export const AutoMute = {
   args: {
     type: 'autoMute',
     selected: true,
@@ -109,22 +110,12 @@ export const AutoMuteSelected = {
   },
 }
 
-export const AutoMuteInactive = {
-  args: {
-    type: 'autoMute',
-    selected: false,
-    tooltipContent: {
-      text: 'Muted by solo (inactive)',
-      shortcut: 'M',
-    },
-  },
-}
-
 export const AllStates = {
   parameters: {
     docs: {
       description: {
-        story: 'Shows all states with and without tooltip. Click any toggle to switch between inactive and active.',
+        story:
+          'Shows all states with and without tooltip. Click any toggle to switch `aria-pressed`; `autoMute` mantém o mesmo visual do Figma.',
       },
     },
   },
@@ -151,7 +142,15 @@ export const AllStates = {
               {...args}
               type={type}
               selected={states[type]}
-              tooltipContent={withTooltip ? { text: `${type}`, shortcut: type.slice(0, 1).toUpperCase() } : undefined}
+              tooltipContent={
+                withTooltip
+                  ? {
+                      text: `${type}`,
+                      shortcut:
+                        type === 'record' ? 'R' : type === 'solo' ? 'S' : 'M',
+                    }
+                  : undefined
+              }
               onClick={() => {
                 args.onClick?.()
                 toggleState(type)