onDark attribute replacement

[sun-mota]

Overview

Since svelte 5 treats any attribute beginning with on as an event handler, our custom attributes that start with on will no longer work as intended.

Goal

• Introduce a new attribute that does not start with "on".
• Deprecate onDark attribute
• Ensure the new attribute fully carries over the same behavior previously supported by onDark.

Relevant Information

• Design team is planning to introduce different variants on darkmode enabled.

• https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme

Affected components

• Replace ondark attribute auro-button#358 button
• Replace ondark attribute auro-badge#150 badge
• Replace ondark attribute auro-banner#90 banner
• Replace ondark attribute auro-dialog#81 dialog
• Replace ondark attribute auro-drawer#95 drawer
• Replace ondark attribute auro-hyperlink#304 hyperlink
• Replace ondark attribute auro-icon#210 icon
• Replace ondark attribute auro-formkit#1146 FormKit
  • dropdown: Replace ondark attribute auro-formkit auro-formkit#1147 dropdown
  • input: Replace ondark attribute auro-formkit auro-formkit#1148 input
  • radio: Replace ondark attribute auro-formkit auro-formkit#1154 radio
  • select: Replace ondark attribute auro-formkit auro-formkit#1152 select
  • checkbox: Replace ondark attribute auro-formkit auro-formkit#1153 checkbox
  • combobox: Replace ondark attribute auro-formkit auro-formkit#1149 combobox
  • counter: Replace ondark attribute auro-formkit auro-formkit#1151 counter
  • datepicker: Replace ondark attribute auro-formkit auro-formkit#1150 datepicker
• Replace ondark attribute auro-nav#87 nav
• Replace ondark attribute auro-lockup#67 lockup
• Replace ondark attribute auro-loader#71 loader
• Replace ondark attribute auro-slideshow#55 slideshow
• Replace ondark attribute auro-sidenav#73 sidenav
• Replace ondark attribute auro-tabs#84 tabs
• Replace ondark attribute auro-toast#84 toast
• Replace ondark attribute auro-tokenlist#30 tokenlist

Replacement Proposal

1. surface = "light" | "dark"

1.1 Extensibility

Unlike the existing boolean flag (onDark), surface can grow into multiple values without changing the API shape. This allows for future expansion.

1.2 Clarity

surface="dark" directly communicates intent that this element is going to be on dark

1.3 Potential attribute to be added

inverseSurfaceOnDarkmode = true | false to support auto-flipping behavior when dark mode is enabled.

2. colormode = "default" | "inverse"

1.1 Compatibility with darkmode

Since the design team plans to introduce dark mode, values such as default and inverse map directly to how the component should behave.

1.2 Potential value to be added

"persist-light" | "persist-dark" to support the case to disable the flipping in darkmode.

[sun-mota]

Proposal 1 does not satisfy design's darkmode strategy.

[sun-mota]

https://teams.microsoft.com/l/message/19:[email protected]/1759503448450?context=%7B%22contextType%22%3A%22chat%22%7D

Team decided go proceed with appearance for the name