refactor: standardize disabled state and cursor: default (#728)

paanSinghCoder · web-flow · commit 409b5f84a953 · 2026-04-07T06:13:41.000Z
* refactor: standardize-disabled-state

* refactor: remove cursor:pointer and add disabled states
diff --git a/packages/raystack/components/breadcrumb/breadcrumb.module.css b/packages/raystack/components/breadcrumb/breadcrumb.module.css
@@ -53,9 +53,7 @@
 }
 
 .breadcrumb-link-disabled {
-  color: var(--rs-color-foreground-base-tertiary);
   opacity: 0.5;
-  cursor: not-allowed;
   pointer-events: none;
 }
 
@@ -106,4 +104,4 @@
 .breadcrumb-dropdown-item:hover {
   background-color: var(--rs-color-background-base-primary-hover);
   border-radius: var(--rs-radius-2);
-}
+}
diff --git a/packages/raystack/components/button/button.module.css b/packages/raystack/components/button/button.module.css
@@ -33,7 +33,6 @@
 .button:disabled,
 .button-disabled {
   opacity: 0.5;
-  cursor: not-allowed;
   pointer-events: initial;
 }
 
@@ -104,7 +103,7 @@
 .button-outline.button-disabled {
   opacity: 0.5;
   background-color: transparent;
-  cursor: not-allowed;
+  cursor: default;
 }
 
 .button-outline:disabled:hover,
@@ -127,7 +126,6 @@
   background-color: transparent;
   color: var(--rs-color-foreground-accent-primary);
   border-color: var(--rs-color-border-accent-primary);
-  cursor: not-allowed;
 }
 
 .button-outline-accent.button-loading:hover {
@@ -170,7 +168,6 @@
 .button-ghost:disabled,
 .button-ghost.button-disabled {
   opacity: 0.5;
-  cursor: not-allowed;
 }
 
 .button-ghost:disabled:hover,
@@ -192,7 +189,6 @@
 .button-ghost.button-loading[data-radix-dropdown-menu-trigger][data-state="open"] {
   background-color: transparent;
   border-color: var(--rs-color-border-base-primary);
-  cursor: not-allowed;
 }
 
 .button-text {
@@ -210,15 +206,13 @@
 .button-text:disabled,
 .button-text.button-disabled {
   opacity: 0.5;
-  cursor: not-allowed;
 }
 
 .button-text.button-loading:hover,
 .button-text.button-loading:active,
 .button-text.button-loading[data-radix-popover-trigger][data-state="open"],
 .button-text.button-loading[data-radix-dropdown-menu-trigger][data-state="open"] {
   background-color: transparent;
-  cursor: not-allowed;
 }
 
 .button-text:disabled:hover,
@@ -243,7 +237,6 @@
 .button-loading[data-radix-popover-trigger][data-state="open"],
 .button-loading[data-radix-dropdown-menu-trigger][data-state="open"] {
   background-color: inherit;
-  cursor: not-allowed;
 }
 
 .loader {
diff --git a/packages/raystack/components/calendar/calendar.module.css b/packages/raystack/components/calendar/calendar.module.css
@@ -198,8 +198,7 @@
 }
 
 .disabled {
-  color: var(--rs-color-foreground-base-tertiary);
-  opacity: 0.8;
+  opacity: 0.5;
 }
 
 .day.today button::after {
diff --git a/packages/raystack/components/checkbox/checkbox.module.css b/packages/raystack/components/checkbox/checkbox.module.css
@@ -48,7 +48,6 @@
 
 .checkbox[data-disabled] {
   opacity: 0.5;
-  cursor: not-allowed;
 }
 
 .checkbox[data-disabled]:hover {
diff --git a/packages/raystack/components/combobox/combobox.module.css b/packages/raystack/components/combobox/combobox.module.css
@@ -52,7 +52,7 @@
 }
 
 .menuitem[data-disabled] {
-  opacity: 0.6;
+  opacity: 0.5;
   pointer-events: none;
 }
 
diff --git a/packages/raystack/components/icon-button/icon-button.module.css b/packages/raystack/components/icon-button/icon-button.module.css
@@ -17,9 +17,8 @@
 }
 
 .iconButton:disabled {
-  cursor: not-allowed;
   opacity: 0.5;
-  color: var(--rs-color-foreground-base-secondary);
+  cursor: default;
 }
 
 .iconButton:active:not(:disabled) {
diff --git a/packages/raystack/components/input-field/input-field.module.css b/packages/raystack/components/input-field/input-field.module.css
@@ -59,10 +59,7 @@
 }
 
 .input-disabled-wrapper {
-  background: var(--rs-color-background-base-primary);
-  border-color: var(--rs-color-border-base-tertiary);
-  opacity: 0.4;
-  cursor: not-allowed;
+  opacity: 0.5;
 }
 
 .leading-icon {
@@ -121,7 +118,6 @@
 
 .input-disabled {
   color: var(--rs-color-foreground-base-tertiary);
-  cursor: not-allowed;
 }
 
 .helper-text {
@@ -310,4 +306,4 @@
 .input-error-wrapper.variant-borderless:hover,
 .input-error-wrapper.variant-borderless:focus-within {
   border-color: transparent;
-}
+}
diff --git a/packages/raystack/components/menu/cell.module.css b/packages/raystack/components/menu/cell.module.css
@@ -23,7 +23,7 @@
 }
 
 .cell[aria-disabled] {
-  opacity: 0.6;
+  opacity: 0.5;
   pointer-events: none;
 }
 
diff --git a/packages/raystack/components/radio/radio.module.css b/packages/raystack/components/radio/radio.module.css
@@ -38,7 +38,6 @@
 .radioitem[data-disabled]:hover {
   background: var(--rs-color-background-neutral-secondary);
   border-color: var(--rs-color-border-base-secondary);
-  cursor: not-allowed;
 }
 
 .radioitem[data-disabled][data-checked],
@@ -67,4 +66,4 @@
 
 .radioitem[data-disabled] .indicator::after {
   background: var(--rs-color-foreground-base-emphasis);
-}
+}
diff --git a/packages/raystack/components/search/search.module.css b/packages/raystack/components/search/search.module.css
@@ -22,7 +22,6 @@
 }
 
 .clearButton:disabled {
-  cursor: not-allowed;
   opacity: 0.5;
 }
 
diff --git a/packages/raystack/components/select/select.module.css b/packages/raystack/components/select/select.module.css
@@ -42,7 +42,7 @@
 } */
 
 .menuitem[data-disabled] {
-  opacity: 0.6;
+  opacity: 0.5;
   pointer-events: none;
 }
 
@@ -117,16 +117,18 @@
   letter-spacing: var(--rs-letter-spacing-small);
   gap: var(--rs-space-2);
 }
+
 .trigger[data-multiselectable="true"] {
   padding-top: var(--rs-space-2);
   padding-bottom: var(--rs-space-2);
 }
 
-.trigger:hover {
+.trigger:hover:not([data-disabled]):not(:disabled) {
   cursor: pointer;
   background-color: var(--rs-color-background-base-primary-hover);
   color: var(--rs-color-foreground-base-primary);
 }
+
 .trigger:focus-visible {
   outline: 1px solid var(--rs-color-border-accent-emphasis);
 }
@@ -136,7 +138,7 @@
 }
 
 .trigger:disabled {
-  opacity: 0.6;
+  opacity: 0.5;
   pointer-events: none;
 }
 
@@ -226,34 +228,7 @@
 }
 
 .trigger[data-disabled] {
-  background: var(--rs-color-background-base-primary);
-  border-color: var(--rs-color-border-base-tertiary);
-  opacity: 0.4;
-  cursor: not-allowed !important;
-  pointer-events: none;
-}
-
-.trigger[data-disabled]:hover {
-  background: var(--rs-color-background-base-primary);
-  border-color: var(--rs-color-border-base-tertiary);
-  cursor: not-allowed !important;
-}
-
-.trigger[data-disabled] .triggerContent {
-  color: var(--rs-color-foreground-base-tertiary);
-}
-
-.trigger[data-disabled] .triggerIcon {
-  color: var(--rs-color-foreground-base-tertiary);
-}
-
-.trigger[data-disabled] .placeholder,
-.trigger[data-disabled] [data-placeholder] {
-  color: var(--rs-color-foreground-base-tertiary);
-}
-
-[data-disabled] {
-  cursor: not-allowed;
+  opacity: 0.5;
   pointer-events: none;
 }
 
@@ -271,9 +246,9 @@
 .comboboxContent:not(:has(.menuitem:not([data-hidden="true"]))) {
   padding: 0;
 }
+
 .content:has(.comboboxContent:empty) .comboboxInput,
-.content:has(.comboboxContent:not(:has(.menuitem:not([data-hidden="true"]))))
-  .comboboxInput {
+.content:has(.comboboxContent:not(:has(.menuitem:not([data-hidden="true"])))) .comboboxInput {
   border-bottom: none;
 }
 
@@ -300,4 +275,4 @@
 
 .hidden {
   display: none;
-}
+}
diff --git a/packages/raystack/components/sidebar/sidebar.module.css b/packages/raystack/components/sidebar/sidebar.module.css
@@ -94,8 +94,7 @@
 }
 
 .nav-item[data-disabled="true"] {
-  opacity: 0.6;
-  cursor: not-allowed;
+  opacity: 0.5;
   pointer-events: none;
 }
 
@@ -205,10 +204,11 @@
 }
 
 @media (prefers-reduced-motion: reduce) {
+
   .root,
   .nav-item,
   .nav-text,
   .resizeHandle {
     transition: none;
   }
-}
+}
diff --git a/packages/raystack/components/switch/switch.module.css b/packages/raystack/components/switch/switch.module.css
@@ -34,7 +34,6 @@
 }
 
 .switch[data-disabled] {
-  cursor: not-allowed;
   background: var(--rs-color-background-neutral-primary);
 }
 
diff --git a/packages/raystack/components/tabs/tabs.module.css b/packages/raystack/components/tabs/tabs.module.css
@@ -54,8 +54,6 @@
 
 .trigger[data-disabled] {
   opacity: 0.5;
-  cursor: not-allowed;
-  color: var(--rs-color-foreground-base-secondary);
   pointer-events: none;
 }
 
@@ -102,4 +100,4 @@ asked the OS/browser for less or no motion
 /* Base UI uses hidden attribute for inactive panels */
 .content[hidden] {
   display: none;
-}
+}
diff --git a/packages/raystack/components/text-area/text-area.module.css b/packages/raystack/components/text-area/text-area.module.css
@@ -20,6 +20,10 @@
   letter-spacing: var(--rs-letter-spacing-mini);
 }
 
+.labelDisabled {
+  opacity: 0.5;
+}
+
 .helpIcon {
   color: var(--rs-color-foreground-base-secondary);
   display: flex;
@@ -66,12 +70,12 @@
   overflow: hidden;
 }
 
-.textarea:hover {
+.textarea:hover:not(:disabled) {
   border-color: var(--rs-color-border-base-focus);
   background: var(--rs-color-background-base-primary-hover);
 }
 
-.textarea:focus {
+.textarea:focus:not(:disabled) {
   border-color: var(--rs-color-border-accent-emphasis);
   background: var(--rs-color-background-base-primary);
   outline: none;
@@ -85,11 +89,7 @@
 }
 
 .textarea:disabled {
-  background: var(--rs-color-background-base-primary);
-  border-color: var(--rs-color-border-base-tertiary);
-  color: var(--rs-color-foreground-base-tertiary);
-  cursor: not-allowed;
-  opacity: 0.4;
+  opacity: 0.5;
 }
 
 .textarea:read-only {
@@ -100,11 +100,11 @@
   border-color: var(--rs-color-border-danger-primary);
 }
 
-.error:hover {
+.error:hover:not(:disabled) {
   border-color: var(--rs-color-border-danger-emphasis-hover);
 }
 
-.error:focus {
+.error:focus:not(:disabled) {
   border-color: var(--rs-color-border-danger-emphasis-hover);
 }
 
@@ -113,5 +113,5 @@
 }
 
 .helperTextDisabled {
-  color: var(--rs-color-foreground-base-tertiary);
-}
+  opacity: 0.5;
+}
diff --git a/packages/raystack/components/toggle/toggle.module.css b/packages/raystack/components/toggle/toggle.module.css
@@ -34,7 +34,6 @@
 }
 
 .toggle[data-disabled] {
-  cursor: not-allowed;
   opacity: 0.5;
   pointer-events: none;
 }

Original file line number	Diff line number	Diff line change
`@@ -53,9 +53,7 @@`
`53`	`53`	`}`
`54`	`54`
`55`	`55`	`.breadcrumb-link-disabled {`
`56`		`- color: var(--rs-color-foreground-base-tertiary);`
`57`	`56`	`opacity: 0.5;`
`58`		`- cursor: not-allowed;`
`59`	`57`	`pointer-events: none;`
`60`	`58`	`}`
`61`	`59`
`@@ -106,4 +104,4 @@`
`106`	`104`	`.breadcrumb-dropdown-item:hover {`
`107`	`105`	`background-color: var(--rs-color-background-base-primary-hover);`
`108`	`106`	`border-radius: var(--rs-radius-2);`
`109`		`-}`
	`107`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -198,8 +198,7 @@`
`198`	`198`	`}`
`199`	`199`
`200`	`200`	`.disabled {`
`201`		`- color: var(--rs-color-foreground-base-tertiary);`
`202`		`- opacity: 0.8;`
	`201`	`+ opacity: 0.5;`
`203`	`202`	`}`
`204`	`203`
`205`	`204`	`.day.today button::after {`
Original file line number	Diff line number	Diff line change
`@@ -48,7 +48,6 @@`
`48`	`48`
`49`	`49`	`.checkbox[data-disabled] {`
`50`	`50`	`opacity: 0.5;`
`51`		`- cursor: not-allowed;`
`52`	`51`	`}`
`53`	`52`
`54`	`53`	`.checkbox[data-disabled]:hover {`
Original file line number	Diff line number	Diff line change
`@@ -52,7 +52,7 @@`
`52`	`52`	`}`
`53`	`53`
`54`	`54`	`.menuitem[data-disabled] {`
`55`		`- opacity: 0.6;`
	`55`	`+ opacity: 0.5;`
`56`	`56`	`pointer-events: none;`
`57`	`57`	`}`
`58`	`58`
Original file line number	Diff line number	Diff line change
`@@ -17,9 +17,8 @@`
`17`	`17`	`}`
`18`	`18`
`19`	`19`	`.iconButton:disabled {`
`20`		`- cursor: not-allowed;`
`21`	`20`	`opacity: 0.5;`
`22`		`- color: var(--rs-color-foreground-base-secondary);`
	`21`	`+ cursor: default;`
`23`	`22`	`}`
`24`	`23`
`25`	`24`	`.iconButton:active:not(:disabled) {`
Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,7 @@`
`23`	`23`	`}`
`24`	`24`
`25`	`25`	`.cell[aria-disabled] {`
`26`		`- opacity: 0.6;`
	`26`	`+ opacity: 0.5;`
`27`	`27`	`pointer-events: none;`
`28`	`28`	`}`
`29`	`29`
Original file line number	Diff line number	Diff line change
`@@ -22,7 +22,6 @@`
`22`	`22`	`}`
`23`	`23`
`24`	`24`	`.clearButton:disabled {`
`25`		`- cursor: not-allowed;`
`26`	`25`	`opacity: 0.5;`
`27`	`26`	`}`
`28`	`27`