@remix-run/ui 0.4.0 → 0.5.0

package/src/style/stylesheet.ts

@@ -1,6 +1,26 @@
 import { REMIX_UI_STYLE_LAYER } from './layers.ts'
 
-type RuleEntry = { count: number; index: number }
+// # Style ownership model
+//
+// Rules are content-addressed: a class name is a hash of the style object that
+// produced it, so `.rmxc-x` always means the same declarations. A rule can
+// never become *wrong* — only unused. That observation drives a two-tier
+// lifetime model on a single document-level registry:
+//
+// - **Server-adopted rules are pinned.** Once a `<style data-rmx>` tag is
+//   adopted, its rule stays for the life of the manager. Frame reloads,
+//   island hydration, and streamed templates never need to agree on which
+//   scope "owns" a shared rule — adoption is additive and idempotent, and the
+//   registry is bounded by the set of unique style objects the server ever
+//   renders, not by render count.
+//
+// - **Client-inserted rules are refcounted.** Dynamic style objects (e.g.
+//   interpolated values) mint a new class per distinct value, so rules that
+//   only ever existed client-side are dropped when the last css mixin using
+//   them releases its ref. A refcounted rule upgrades to pinned if a server
+//   tag for the same selector is adopted later.
+
+type RuleEntry = { count: number; index: number; pinned: boolean }
 export type ServerStyleSource = ParentNode | Iterable<Node>
 
 export interface StyleManager {
@@ -10,7 +30,6 @@ export interface StyleManager {
   getGeneration(): number
   reset(): void
   adoptServerStyles(source: ServerStyleSource): Set<string>
-  replaceServerStyles(source: ServerStyleSource): void
   selectors(): IterableIterator<string>
   dispose(): void
 }
@@ -84,17 +103,8 @@ export function createStyleManager(layer: string = REMIX_UI_STYLE_LAYER): StyleM
   let stylesheet: CSSStyleSheet | null = null
   let generation = 0
 
-  // Track usage count and rule index per className
-  // Using an object to track both count and index together
   let ruleMap = new Map<string, RuleEntry>()
 
-  // Selectors currently held by a server-style adoption ref. We track this
-  // separately from `ruleMap` so `replaceServerStyles` can release only the
-  // adoption refs of selectors absent from the next page, without disturbing
-  // selectors that exist solely because a client-side css mixin inserted them
-  // (e.g. transient UI state that the server never rendered).
-  let adoptedSelectors = new Set<string>()
-
   function getStylesheet(): CSSStyleSheet {
     if (!stylesheet) {
       stylesheet = new CSSStyleSheet()
@@ -122,15 +132,11 @@ export function createStyleManager(layer: string = REMIX_UI_STYLE_LAYER): StyleM
     let selector = getStyleSelector(styleEl)
     if (!selector) return undefined
 
-    if (ruleMap.has(selector)) {
-      // Already tracked. Take an adoption ref if we don't already have one —
-      // the rule may have been inserted by a client-side css mixin first and
-      // the SSR'd style tag arrived afterwards (e.g. a streamed fragment).
-      if (!adoptedSelectors.has(selector)) {
-        let entry = ruleMap.get(selector)!
-        entry.count++
-        adoptedSelectors.add(selector)
-      }
+    let entry = ruleMap.get(selector)
+    if (entry) {
+      // The rule already exists — either a previous adoption or a client-side
+      // css mixin inserted it first. Pin it so it outlives any mixin refs.
+      entry.pinned = true
       styleEl.remove()
       return selector
     }
@@ -145,8 +151,7 @@ export function createStyleManager(layer: string = REMIX_UI_STYLE_LAYER): StyleM
       let sheet = getStylesheet()
       let index = sheet.cssRules.length
       sheet.insertRule(cssText, index)
-      ruleMap.set(selector, { count: 1, index })
-      adoptedSelectors.add(selector)
+      ruleMap.set(selector, { count: 0, index, pinned: true })
       styleEl.remove()
       return selector
     } catch {
@@ -157,7 +162,7 @@ export function createStyleManager(layer: string = REMIX_UI_STYLE_LAYER): StyleM
 
   function has(className: string) {
     let entry = ruleMap.get(className)
-    return entry !== undefined && entry.count > 0
+    return entry !== undefined && (entry.pinned || entry.count > 0)
   }
 
   function getGeneration() {
@@ -168,8 +173,8 @@ export function createStyleManager(layer: string = REMIX_UI_STYLE_LAYER): StyleM
     let entry = ruleMap.get(className)
 
     if (entry) {
-      // Already exists, just increment count
-      entry.count++
+      // Pinned rules are permanent; there is nothing to count.
+      if (!entry.pinned) entry.count++
       return
     }
 
@@ -179,13 +184,13 @@ export function createStyleManager(layer: string = REMIX_UI_STYLE_LAYER): StyleM
     // This may throw for invalid CSS. If it does, we intentionally let it
     // bubble so the rule is not tracked unless insertion actually succeeds.
     sheet.insertRule(`@layer ${getStyleLayerName(className, layer)} { ${rule} }`, index)
-    ruleMap.set(className, { count: 1, index })
+    ruleMap.set(className, { count: 1, index, pinned: false })
   }
 
   function remove(className: string) {
     let entry = ruleMap.get(className)
 
-    if (!entry) return
+    if (!entry || entry.pinned) return
 
     // Decrement count
     entry.count--
@@ -200,9 +205,7 @@ export function createStyleManager(layer: string = REMIX_UI_STYLE_LAYER): StyleM
 
     // Remove from tracking
     ruleMap.delete(className)
-    adoptedSelectors.delete(className)
 
-    // TODO: just search and remove, stop re-indexing
     if (!stylesheet) return
     stylesheet.deleteRule(indexToDelete)
 
@@ -218,7 +221,6 @@ export function createStyleManager(layer: string = REMIX_UI_STYLE_LAYER): StyleM
   function reset() {
     clearStylesheet()
     ruleMap.clear()
-    adoptedSelectors.clear()
     removeStylesheet()
     generation++
   }
@@ -235,31 +237,6 @@ export function createStyleManager(layer: string = REMIX_UI_STYLE_LAYER): StyleM
     return adopted
   }
 
-  // Snapshot the currently-adopted server selectors, adopt the incoming
-  // server styles additively, then release the adoption ref of any prior-only
-  // selectors.
-  //
-  // Refcount-aware semantics keep preserved DOM styled: a prior-only selector
-  // with no live css-mixin ref drops immediately, but one still referenced by
-  // an active mixin (e.g. inside a hydration region that the DOM diff skipped)
-  // stays in the stylesheet and is only fully removed when that mixin's
-  // `remove` event eventually fires. This avoids the FOUC that a hard
-  // `reset()` would cause between the style swap and the hydration re-render.
-  //
-  // Only adoption refs are considered — selectors that exist solely because a
-  // client-side css mixin inserted them (e.g. transient UI state never
-  // rendered by the server) are unaffected.
-  function replaceServerStyles(source: ServerStyleSource): void {
-    let prior = new Set(adoptedSelectors)
-    let adopted = adoptServerStyles(source)
-    for (let selector of prior) {
-      if (!adopted.has(selector)) {
-        adoptedSelectors.delete(selector)
-        remove(selector)
-      }
-    }
-  }
-
   function selectors(): IterableIterator<string> {
     return ruleMap.keys()
   }
@@ -268,7 +245,6 @@ export function createStyleManager(layer: string = REMIX_UI_STYLE_LAYER): StyleM
     removeStylesheet()
     // Clear internal state
     ruleMap.clear()
-    adoptedSelectors.clear()
     generation++
   }
 
@@ -279,7 +255,6 @@ export function createStyleManager(layer: string = REMIX_UI_STYLE_LAYER): StyleM
     getGeneration,
     reset,
     adoptServerStyles,
-    replaceServerStyles,
     selectors,
     dispose,
   }

package/src/tabs/index.tsx

@@ -37,9 +37,9 @@ export interface TabPanelProps extends Omit<Props<'div'>, 'children'> {
 }
 
 const tabSliderBackground =
-  'linear-gradient(180deg, rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.04) 100%), #FFFFFF'
+  'linear-gradient(180deg, rgba(0, 0, 0, 0) 33%, light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.08)) 100%), light-dark(#FFFFFF, #1a1a1a)'
 const tabSliderShadow =
-  '0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.12), 0 2px 2px -1px rgba(0, 0, 0, 0.12), 0 4px 4px -2px rgba(0, 0, 0, 0.12), inset 0 0 2px 1px #FFFFFF'
+  '0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.12)), 0 1px 1px -0.5px rgba(0, 0, 0, 0.12), 0 2px 2px -1px rgba(0, 0, 0, 0.12), 0 4px 4px -2px rgba(0, 0, 0, 0.12), inset 0 0 2px 1px light-dark(#FFFFFF, rgba(255, 255, 255, 0.08))'
 
 const tabsRootCss: CSSMixinDescriptor = css({
   '--rmx-tabs-height': '32px',
@@ -66,7 +66,8 @@ const tabsListCss: CSSMixinDescriptor = css({
   padding: 'var(--rmx-tabs-track-padding)',
   border: 0,
   borderRadius: '9999px',
-  background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0) 100%), #EBEBEB',
+  background:
+    'linear-gradient(180deg, light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.08)) 0%, rgba(0, 0, 0, 0) 100%), light-dark(#EBEBEB, #2c2c2c)',
   boxShadow:
     'inset 0 0 4px 1px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(0, 0, 0, 0.02), inset 0 2px 2px rgba(0, 0, 0, 0.02)',
   overflowX: 'auto',
@@ -81,7 +82,7 @@ const tabsListCss: CSSMixinDescriptor = css({
 
 const tabsTabCss: CSSMixinDescriptor = css({
   '--rmx-tabs-tab-focus-shadow':
-    '0 0 0 1px #3573F6, var(--rmx-tabs-tab-shadow), 0 0 0 4px rgba(53, 115, 246, 0.1), 0 6px 32px 4px rgba(53, 115, 246, 0.08), inset 0 0 8px 1px rgba(53, 115, 246, 0.05)',
+    '0 0 0 1px light-dark(#3573F6, #6eaaff), var(--rmx-tabs-tab-shadow), 0 0 0 4px light-dark(rgba(53, 115, 246, 0.1), rgba(110, 170, 255, 0.18)), 0 6px 32px 4px light-dark(rgba(53, 115, 246, 0.08), rgba(110, 170, 255, 0.14)), inset 0 0 8px 1px light-dark(rgba(53, 115, 246, 0.05), rgba(110, 170, 255, 0.1))',
   appearance: 'none',
   margin: 0,
   boxSizing: 'border-box',
@@ -103,7 +104,7 @@ const tabsTabCss: CSSMixinDescriptor = css({
   borderRadius: '999px',
   background: 'transparent',
   boxShadow: 'var(--rmx-tabs-tab-shadow)',
-  color: '#707070',
+  color: 'light-dark(#707070, #b3b3b3)',
   fontFamily: '"Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif',
   fontStyle: 'normal',
   fontWeight: 500,
@@ -119,17 +120,17 @@ const tabsTabCss: CSSMixinDescriptor = css({
   verticalAlign: 'top',
   whiteSpace: 'nowrap',
   '&[data-state="inactive"]:hover:not(:disabled):not([aria-disabled="true"])': {
-    background: 'rgba(16, 16, 16, 0.05)',
-    color: '#101010',
+    background: 'light-dark(rgba(16, 16, 16, 0.05), rgba(236, 236, 236, 0.1))',
+    color: 'light-dark(#101010, #ececec)',
   },
   '&[data-state="inactive"]:active:not(:disabled):not([aria-disabled="true"])': {
-    background: 'rgba(16, 16, 16, 0.08)',
+    background: 'light-dark(rgba(16, 16, 16, 0.08), rgba(236, 236, 236, 0.14))',
   },
   '&[data-state="active"]': {
     background: tabSliderBackground,
     '--rmx-tabs-tab-shadow': tabSliderShadow,
-    color: '#101010',
-    textShadow: '0 1px 0 #FFFFFF',
+    color: 'light-dark(#101010, #ececec)',
+    textShadow: '0 1px 0 light-dark(#FFFFFF, rgb(0 0 0 / 0.35))',
   },
   '&[data-state="active"]:hover:not(:disabled):not([aria-disabled="true"])': {
     background: tabSliderBackground,
@@ -149,7 +150,7 @@ const tabsTabCss: CSSMixinDescriptor = css({
 
 const tabsPanelCss: CSSMixinDescriptor = css({
   minWidth: 0,
-  color: '#101010',
+  color: 'light-dark(#101010, #ececec)',
   fontFamily: '"Inter Variable", Inter, ui-sans-serif, system-ui, sans-serif',
   fontSize: '13px',
   lineHeight: '20px',

package/src/test/README.md

@@ -1,104 +1,195 @@
 # Test
 
-When writing tests, use `root.flush()` to synchronously execute all pending updates and tasks. This ensures the DOM and component state are fully synchronized before making assertions.
+Use `render` from `remix/ui/test` as the primary way to test components in a live browser through a `remix/test` "browser" test (`*.test.browser.tsx`). It creates a DOM container, renders and flushes the initial component tree, and returns helpers for querying, interacting with, and cleaning up the rendered output.
 
-## Basic Testing Pattern
-
-The main use case is flushing after events that call `handle.update()`. Since updates are asynchronous, you need to flush to ensure the DOM reflects the changes:
+## Rendering Components
 
 ```tsx
+import { expect } from 'remix/assert'
+import { describe, it } from 'remix/test'
+import { on, type Handle } from 'remix/ui'
+import { render } from 'remix/ui/test'
+
 function Counter(handle: Handle) {
   let count = 0
 
   return () => (
-    <button
-      mix={[
-        on('click', () => {
-          count++
-          handle.update()
-        }),
-      ]}
-    >
-      Count: {count}
-    </button>
+    <div>
+      <button
+        data-action="increment"
+        mix={[
+          on('click', () => {
+            count++
+            handle.update()
+          }),
+        ]}
+      >
+        Increment
+      </button>
+      <output data-testid="count">{count}</output>
+    </div>
   )
 }
 
-// In your test
-let container = document.createElement('div')
-let root = createRoot(container)
+describe('Counter', () => {
+  it('increments the count', async (t) => {
+    let { $, act, cleanup } = render(<Counter />)
+    t.after(cleanup)
 
-root.render(<Counter />)
-root.flush() // Ensure initial render completes
+    expect($('[data-testid="count"]')?.textContent).toBe('0')
 
-let button = container.querySelector('button')
-button.click() // Triggers handle.update()
-root.flush() // Flush to apply the update
+    await act(() => $('[data-action="increment"]')?.click())
 
-expect(container.textContent).toBe('Count: 1')
+    expect($('[data-testid="count"]')?.textContent).toBe('1')
+  })
+})
 ```
 
-## Why Flush After Initial Render?
+The initial render is already flushed, so the DOM and event listeners are ready when `render`
+returns. Wrap interactions that may update component state in `act` and always await it. `act`
+waits for the callback and then flushes pending component updates before the next assertion.
+
+### Testing Async Operations
 
-You should also flush after the initial `root.render()` to ensure event listeners are attached and the DOM is ready for interaction:
+When an interaction starts an async operation, await that operation inside `act` so updates queued
+after it resolves are flushed before making assertions:
 
 ```tsx
-let root = createRoot(container)
-root.render(<MyComponent />)
-root.flush() // Event listeners now attached
+function UserLoader(handle: Handle<{ loadUser(): Promise<{ name: string }> }>) {
+  let name = 'No user loaded'
 
-// Safe to interact
-container.querySelector('button').click()
+  return () => (
+    <div>
+      <button
+        mix={[
+          on('click', async () => {
+            let user = await handle.props.loadUser()
+            name = user.name
+            handle.update()
+          }),
+        ]}
+      >
+        Load user
+      </button>
+      <output>{name}</output>
+    </div>
+  )
+}
+
+it('loads a user', async (t) => {
+  let userPromise = Promise.resolve({ name: 'Ada' })
+  let { $, act, cleanup } = render(<UserLoader loadUser={() => userPromise} />)
+  t.after(cleanup)
+
+  await act(async () => {
+    $('button')?.click()
+    await userPromise
+  })
+
+  expect($('output')?.textContent).toBe('Ada')
+})
 ```
 
-## Testing Async Operations
+### Querying Rendered Output
 
-For components with async operations in `queueTask`, flush after each step:
+The returned query helpers are scoped to the rendered container so you don't have to worry about false positives outside of the rendered component:
 
 ```tsx
-function AsyncLoader(handle: Handle) {
-  let data: string | null = null
-
-  handle.queueTask(async (signal) => {
-    let response = await fetch('/api/data', { signal })
-    let json = await response.json()
-    if (signal.aborted) return
-    data = json.value
-    handle.update()
-  })
+let { $, $$, container, cleanup } = render(
+  <nav>
+    <a href="/one">One</a>
+    <a href="/two">Two</a>
+  </nav>,
+)
 
-  return () => <div>{data ?? 'Loading...'}</div>
-}
+let nav = $('nav') // container.querySelector('nav')
+let links = $$('a') // container.querySelectorAll('a')
 
-// In your test (with mocked fetch)
-let root = createRoot(container)
-root.render(<AsyncLoader />)
-root.flush()
+expect(nav).toBeTruthy()
+expect(links).toHaveLength(2)
+expect(container.textContent).toContain('One')
 
-expect(container.textContent).toBe('Loading...')
+cleanup()
+```
 
-// After fetch resolves
-await waitForFetch()
-root.flush()
+Use `$` for the first matching element, `$$` for all matching elements, and `container` when a
+DOM assertion does not fit a selector.
 
-expect(container.textContent).toBe('Expected data')
+### Cleaning Up
+
+Register `cleanup` with the test context so it always runs, including when an assertion fails:
+
+```tsx
+it('renders a dialog', (t) => {
+  let { $, cleanup } = render(<Dialog />)
+  t.after(cleanup)
+
+  expect($('[role="dialog"]')).toBeTruthy()
+})
 ```
 
-## Testing Component Removal
+`cleanup` disposes the root and removes its container from the document. You can call it directly
+when a test needs to assert cleanup behavior.
+
+### Rendering Into an Existing Container
 
-Use `root.dispose()` to clean up and verify cleanup behavior:
+Pass a container when the test needs a specific DOM context:
 
 ```tsx
+let container = document.createElement('section')
+document.body.appendChild(container)
+
+let result = render(<MyComponent />, { container })
+
+expect(result.container).toBe(container)
+result.cleanup()
+```
+
+## Advanced: Flushing Manually
+
+Most component tests should use `render` and `act`. For lower-level runtime tests that need direct
+control over rendering or scheduling, use the returned `root` and call `root.flush()` after an
+operation that queues work:
+
+```tsx
+let { root, container, cleanup } = render(<MyComponent value="first" />)
+
+root.render(<MyComponent value="second" />)
+root.flush()
+
+expect(container.textContent).toContain('second')
+cleanup()
+```
+
+You can also create and manage a root directly:
+
+```tsx
+import { createRoot } from 'remix/ui'
+
+let container = document.createElement('div')
 let root = createRoot(container)
+
 root.render(<MyComponent />)
-root.flush()
+root.flush() // Complete the initial render and attach event listeners
 
-// Verify setup behavior
-expect(container.querySelector('.content')).toBeTruthy()
+container.querySelector('button')?.click()
+root.flush() // Apply updates queued by the interaction
 
-// Remove and verify cleanup
 root.dispose()
-expect(container.innerHTML).toBe('')
+```
+
+Manual flushing is also useful after an async operation resolves outside an `act` callback:
+
+```tsx
+root.render(<AsyncLoader />)
+root.flush()
+
+expect(container.textContent).toBe('Loading...')
+
+await waitForFetch()
+root.flush()
+
+expect(container.textContent).toBe('Expected data')
 ```
 
 ## See Also

package/src/toggle/index.tsx

@@ -17,13 +17,13 @@ const checkedSelector = '&:checked, &[aria-checked="true"], &[data-state="checke
 const checkedThumbSelector =
   '&:checked::before, &[aria-checked="true"]::before, &[data-state="checked"]::before'
 const uncheckedThumbBackground =
-  'linear-gradient(180deg, rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, 0.04) 100%), #FFFFFF'
+  'linear-gradient(180deg, rgba(0, 0, 0, 0) 33%, light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.08)) 100%), light-dark(#FFFFFF, #1a1a1a)'
 const uncheckedThumbShadow =
-  '0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.12), 0 2px 2px -1px rgba(0, 0, 0, 0.12), 0 4px 4px -2px rgba(0, 0, 0, 0.12), inset 0 0 2px 1px #FFFFFF'
+  '0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.12)), 0 1px 1px -0.5px rgba(0, 0, 0, 0.12), 0 2px 2px -1px rgba(0, 0, 0, 0.12), 0 4px 4px -2px rgba(0, 0, 0, 0.12), inset 0 0 2px 1px light-dark(#FFFFFF, rgba(255, 255, 255, 0.08))'
 const checkedThumbBackground =
-  'linear-gradient(180deg, rgba(112, 199, 84, 0) 25%, rgba(112, 199, 84, 0.25) 100%), #FFFFFF'
+  'linear-gradient(180deg, rgba(112, 199, 84, 0) 25%, rgba(112, 199, 84, 0.25) 100%), light-dark(#FFFFFF, #f5fff0)'
 const checkedThumbShadow =
-  '0 1px 2px -0.5px rgba(66, 134, 44, 0.6), 0 2px 4px -1px rgba(66, 134, 44, 0.6), 0 4px 6px -2px rgba(66, 134, 44, 0.6), 0 0 0 0.5px rgba(0, 0, 0, 0.28), inset 0 0 2px 1px #FFFFFF'
+  '0 1px 2px -0.5px rgba(66, 134, 44, 0.6), 0 2px 4px -1px rgba(66, 134, 44, 0.6), 0 4px 6px -2px rgba(66, 134, 44, 0.6), 0 0 0 0.5px light-dark(rgba(0, 0, 0, 0.28), rgba(255, 255, 255, 0.28)), inset 0 0 2px 1px light-dark(#FFFFFF, rgba(255, 255, 255, 0.5))'
 
 const toggleDefaultAttrs = createMixin<Element, [], ElementProps>((handle, hostType) => (props) => {
   if (hostType !== 'input') {
@@ -59,7 +59,8 @@ const baseStyles = {
   padding: 0,
   border: 0,
   borderRadius: '9999px',
-  background: 'linear-gradient(180deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0) 100%), #EBEBEB',
+  background:
+    'linear-gradient(180deg, light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.08)) 0%, rgba(0, 0, 0, 0) 100%), light-dark(#EBEBEB, #2c2c2c)',
   boxShadow:
     'inset 0 0 4px 1px rgba(0, 0, 0, 0.08), inset 0 1px 1px rgba(0, 0, 0, 0.02), inset 0 2px 2px rgba(0, 0, 0, 0.02)',
   verticalAlign: 'middle',
@@ -82,9 +83,10 @@ const baseStyles = {
     opacity: 0.55,
   },
   [checkedSelector]: {
-    background: 'linear-gradient(180deg, #70C754 0%, #70C754 100%)',
+    background:
+      'linear-gradient(180deg, light-dark(#70C754, #8ee572) 0%, light-dark(#70C754, #8ee572) 100%)',
     boxShadow:
-      '0 1px 0 rgba(255, 255, 255, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.4), 0 -4px 8px 2px #FFFFFF, 0 4px 8px 2px rgba(0, 0, 0, 0.05), 0 0 12px 1px rgba(112, 199, 84, 0.25), inset 0 0 4px 1px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 2px 2px rgba(0, 0, 0, 0.1)',
+      '0 1px 0 rgba(255, 255, 255, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.4), 0 -4px 8px 2px light-dark(#FFFFFF, rgba(255, 255, 255, 0.18)), 0 4px 8px 2px rgba(0, 0, 0, 0.05), 0 0 12px 1px rgba(112, 199, 84, 0.25), inset 0 0 4px 1px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(0, 0, 0, 0.1), inset 0 2px 2px rgba(0, 0, 0, 0.1)',
   },
   [checkedThumbSelector]: {
     background: checkedThumbBackground,