feat(tasty): set disabled, hidden, checked mods automatically (#796)

Author: tenphi

.changeset/shiny-dragons-report.md

@@ -0,0 +1,5 @@
+---
+"@cube-dev/ui-kit": patch
+---
+
+Set `disabled`, `checked`, `hidden` mods automatically.

src/components/actions/Button/Button.tsx

@@ -101,7 +101,7 @@ export const DEFAULT_BUTTON_STYLES = {
   boxSizing: 'border-box',
   cursor: {
     '': 'pointer',
-    '[disabled] | disabled': 'default',
+    disabled: 'default',
   },
   gap: {
     '': '.75x',

src/components/content/ActiveZone/ActiveZone.tsx

@@ -32,7 +32,7 @@ const DEFAULT_STYLES: Styles = {
   position: 'relative',
   opacity: {
     '': 1,
-    '[disabled]': 0.4,
+    disabled: 0.4,
   },
   transition: 'theme',
 } as const;

src/components/content/ItemBase/ItemBase.tsx

@@ -195,13 +195,13 @@ const ItemBaseElement = tasty({
       selected: '#dark.09',
       'selected & (hovered | focused)': '#dark.12',
       pressed: '#dark.09',
-      '[disabled] | disabled': '#clear',
+      disabled: '#clear',
     },
     color: {
       '': '#dark-02',
       hovered: '#dark-02',
       pressed: '#dark',
-      '[disabled] | disabled': '#dark-04',
+      disabled: '#dark-04',
     },
     preset: {
       '': 't3m',
@@ -216,7 +216,7 @@ const ItemBaseElement = tasty({
     cursor: {
       '': 'default',
       ':is(button) | :is(a)': 'pointer',
-      '[disabled] | disabled': 'not-allowed',
+      disabled: 'not-allowed',
     },
 
     $size: {

src/components/fields/ComboBox/ComboBox.tsx

@@ -78,7 +78,7 @@ const TriggerElement = tasty({
       '': '#dark-02',
       hovered: '#dark-02',
       pressed: '#purple',
-      '[disabled]': '#dark.30',
+      disabled: '#dark.30',
     },
     border: 'left',
     reset: 'button',

src/components/fields/FileInput/FileInput.tsx

@@ -57,11 +57,11 @@ const FileInputElement = tasty(Action, {
         '': '#purple.10',
         hovered: '#purple.16',
         pressed: '#purple.10',
-        '[disabled]': '#dark.04',
+        disabled: '#dark.04',
       },
       color: {
         '': '#purple',
-        '[disabled]': '#dark.30',
+        disabled: '#dark.30',
       },
       padding: '.5x (1.5x - 1px)',
       transition: 'theme',

src/components/fields/NumberInput/StepButton.tsx

@@ -18,7 +18,7 @@ const StepButtonElement = tasty(Button, {
       '': '#dark.0',
       hovered: '#dark.04',
       pressed: '#purple.10',
-      '[disabled]': '#dark.0',
+      disabled: '#dark.0',
     },
 
     '$icon-size': '1fs',

src/components/organisms/FileTabs/FileTabs.tsx

@@ -110,7 +110,7 @@ const TabElement = tasty(Action, {
     preset: 'default',
     transform: {
       '': 'translate(0, 0)',
-      '[disabled]': 'translate(0, 1bw)',
+      disabled: 'translate(0, 1bw)',
     },
     transition: 'theme 0.2s',
     margin: '1bw bottom',