@typlog/ui 0.10.0 → 0.11.0

package/dist/components/scrollarea.css

@@ -0,0 +1,107 @@
+
+.ui-root {
+  --scrollarea-scrollbar-horizontal-margin-top: var(--space-1);
+  --scrollarea-scrollbar-horizontal-margin-bottom: var(--space-1);
+  --scrollarea-scrollbar-horizontal-margin-left: var(--space-1);
+  --scrollarea-scrollbar-horizontal-margin-right: var(--space-1);
+  --scrollarea-scrollbar-vertical-margin-top: var(--space-1);
+  --scrollarea-scrollbar-vertical-margin-bottom: var(--space-1);
+  --scrollarea-scrollbar-vertical-margin-left: var(--space-1);
+  --scrollarea-scrollbar-vertical-margin-right: var(--space-1);
+}
+.ui-ScrollArea {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+.ui-ScrollAreaViewport {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+.ui-ScrollAreaViewport:where(:focus-visible) + :where(.ui-ScrollAreaViewportFocusRing) {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  outline: 2px solid var(--focus-8);
+  outline-offset: -2px;
+}
+.ui-ScrollAreaViewport:where(:has(.ui-ScrollAreaScrollbar[data-orientation='horizontal'])) {
+  overscroll-behavior-x: contain;
+}
+.ui-ScrollAreaScrollbar {
+  display: flex;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  touch-action: none;
+}
+.ui-ScrollAreaScrollbar:where([data-orientation='vertical']) {
+  flex-direction: column;
+  width: var(--scrollarea-scrollbar-size);
+}
+.ui-ScrollAreaScrollbar:where([data-orientation='horizontal']) {
+  flex-direction: row;
+  height: var(--scrollarea-scrollbar-size);
+}
+.ui-ScrollAreaThumb {
+  position: relative;
+}
+.ui-ScrollAreaThumb::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  height: 100%;
+  min-width: var(--space-4);
+  min-height: var(--space-4);
+}
+.ui-ScrollAreaScrollbar:where([data-size="1"]) {
+  --scrollarea-scrollbar-size: var(--space-1);
+  --scrollarea-scrollbar-border-radius: max(var(--radius-1), var(--radius-full));
+}
+.ui-ScrollAreaScrollbar:where([data-size="2"]) {
+  --scrollarea-scrollbar-size: var(--space-2);
+  --scrollarea-scrollbar-border-radius: max(var(--radius-1), var(--radius-full));
+}
+.ui-ScrollAreaScrollbar:where([data-size="3"]) {
+  --scrollarea-scrollbar-size: var(--space-3);
+  --scrollarea-scrollbar-border-radius: max(var(--radius-1), var(--radius-full));
+}
+.ui-ScrollAreaScrollbar {
+  background-color: var(--gray-a3);
+  border-radius: var(--scrollarea-scrollbar-border-radius);
+  animation-duration: 120ms;
+  animation-timing-function: ease-out;
+}
+.ui-ScrollAreaScrollbar:where([data-state='visible']) {
+  animation-name: ui-fade-in;
+}
+.ui-ScrollAreaScrollbar:where([data-state='hidden']) {
+  animation-name: ui-fade-out;
+}
+.ui-ScrollAreaScrollbar:where([data-orientation='horizontal']) {
+  margin-top: var(--scrollarea-scrollbar-horizontal-margin-top);
+  margin-bottom: var(--scrollarea-scrollbar-horizontal-margin-bottom);
+  margin-left: var(--scrollarea-scrollbar-horizontal-margin-left);
+  margin-right: var(--scrollarea-scrollbar-horizontal-margin-right);
+}
+.ui-ScrollAreaScrollbar:where([data-orientation='vertical']) {
+  margin-top: var(--scrollarea-scrollbar-vertical-margin-top);
+  margin-bottom: var(--scrollarea-scrollbar-vertical-margin-bottom);
+  margin-left: var(--scrollarea-scrollbar-vertical-margin-left);
+  margin-right: var(--scrollarea-scrollbar-vertical-margin-right);
+}
+.ui-ScrollAreaThumb {
+  background-color: var(--gray-a8);
+  border-radius: inherit;
+  transition: background-color 100ms;
+}
+.ui-ScrollAreaThumb:hover {
+  background-color: var(--gray-a9);
+}

package/dist/components/select.css

@@ -0,0 +1,308 @@
+
+.ui-SelectContent {
+  --scrollarea-scrollbar-vertical-margin-top: var(--select-content-padding);
+  --scrollarea-scrollbar-vertical-margin-bottom: var(--select-content-padding);
+  --scrollarea-scrollbar-horizontal-margin-left: var(--select-content-padding);
+  --scrollarea-scrollbar-horizontal-margin-right: var(--select-content-padding);
+
+  overflow: hidden;
+  box-shadow: var(--shadow-5);
+  background-color: var(--color-panel-solid);
+  box-sizing: border-box;
+}
+.ui-SelectContent:where([data-side]) {
+  min-width: var(--reka-select-trigger-width);
+  max-width: var(--reka-select-content-available-width);
+  max-height: var(--reka-select-content-available-height);
+  transform-origin: var(--reka-select-content-transform-origin);
+}
+.ui-SelectViewport {
+  box-sizing: border-box;
+  padding: var(--select-content-padding);
+}
+.ui-SelectContent:has(.ui-ScrollAreaScrollbar[data-orientation='vertical']) .ui-SelectViewport {
+  padding-right: var(--space-3);
+}
+.ui-SelectContent:where(.r-size-1) {
+  --select-content-padding: var(--space-1);
+  --select-item-height: var(--space-5);
+  --select-item-indicator-width: calc(var(--space-5) / 1.2);
+  --select-separator-margin-right: var(--space-2);
+  border-radius: var(--radius-3);
+}
+.ui-SelectContent:where(.r-size-2),
+.ui-SelectContent:where(.r-size-3) {
+  --select-content-padding: var(--space-2);
+  --select-item-height: var(--space-6);
+  --select-item-indicator-width: var(--space-5);
+  --select-separator-margin-right: var(--space-3);
+  border-radius: var(--radius-4);
+}
+
+.ui-SelectTrigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-shrink: 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  vertical-align: top;
+  font-weight: var(--font-weight-regular);
+  font-style: normal;
+  text-align: start;
+  color: var(--gray-12);
+}
+.ui-SelectTriggerInner {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ui-SelectIcon {
+  flex-shrink: 0;
+}
+.ui-SelectTrigger:where(:not(.r-variant-ghost)).ui-SelectIcon {
+  opacity: 0.9;
+}
+.ui-SelectTrigger:where(:not(.r-variant-ghost)) {
+  box-sizing: border-box;
+  height: var(--select-trigger-height);
+}
+.ui-SelectTrigger:where(.r-variant-ghost) {
+  box-sizing: content-box;
+  height: -moz-fit-content;
+  height: fit-content;
+  padding: var(--select-trigger-ghost-padding-y) var(--select-trigger-ghost-padding-x);
+  margin: calc(0px - var(--select-trigger-ghost-padding-y)) calc(0px - var(--select-trigger-ghost-padding-x));
+}
+.ui-SelectTrigger:where(.r-size-1) {
+  --select-trigger-height: var(--space-5);
+  gap: var(--space-1);
+  font-size: var(--font-size-1);
+  line-height: var(--line-height-1);
+  letter-spacing: var(--letter-spacing-1);
+  border-radius: max(var(--radius-1), var(--radius-full));
+}
+.ui-SelectTrigger:where(.r-size-1):where(.r-variant-ghost) {
+  --select-trigger-ghost-padding-x: var(--space-2);
+  --select-trigger-ghost-padding-y: var(--space-1);
+}
+.ui-SelectTrigger:where(.r-size-1):where(:not(.r-variant-ghost)) {
+  padding-left: var(--space-2);
+  padding-right: var(--space-2);
+}
+.ui-SelectTrigger:where(.r-size-2) {
+  --select-trigger-height: var(--space-6);
+  gap: calc(var(--space-1) * 1.5);
+  font-size: var(--font-size-2);
+  line-height: var(--line-height-2);
+  letter-spacing: var(--letter-spacing-2);
+  border-radius: max(var(--radius-2), var(--radius-full));
+}
+.ui-SelectTrigger:where(.r-size-1):where(.r-variant-ghost) {
+  --select-trigger-ghost-padding-x: var(--space-2);
+  --select-trigger-ghost-padding-y: var(--space-1);
+}
+.ui-SelectTrigger:where(.r-size-2):where(:not(.r-variant-ghost)) {
+  padding-left: var(--space-3);
+  padding-right: var(--space-3);
+}
+.ui-SelectTrigger:where(.r-size-3) {
+  --select-trigger-height: var(--space-7);
+  gap: var(--space-2);
+  font-size: var(--font-size-3);
+  line-height: var(--line-height-3);
+  letter-spacing: var(--letter-spacing-3);
+  border-radius: max(var(--radius-3), var(--radius-full));
+}
+.ui-SelectTrigger:where(.r-size-3):where(.r-variant-ghost) {
+  --select-trigger-ghost-padding-x: var(--space-3);
+  --select-trigger-ghost-padding-y: calc(var(--space-1) * 1.5);
+}
+.ui-SelectTrigger:where(.r-size-3):where(:not(.r-variant-ghost)) {
+  padding-left: var(--space-4);
+  padding-right: var(--space-4);
+}
+.ui-SelectTrigger:where(.r-size-3) .ui-SelectIcon {
+  width: 11px;
+  height: 11px;
+}
+.ui-SelectTrigger:where(.r-variant-surface) {
+  --select-trigger-border-width: 1px;
+  --select-trigger-border-color: var(--gray-a7);
+  outline: 0;
+  color: var(--gray-12);
+  background-color: var(--color-surface);
+  border: var(--select-trigger-border-width) solid var(--select-trigger-border-color);
+}
+.ui-SelectTrigger:where(.r-variant-surface):where(:focus-visible) {
+  --select-trigger-border-color: var(--focus-a8);
+  box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
+}
+@media (hover: hover) {
+.ui-SelectTrigger:where(.r-variant-surface):hover {
+    --select-trigger-border-color: var(--gray-a8);
+}
+}
+.ui-SelectTrigger:where(.r-variant-surface):where([data-state='open']) {
+  --select-trigger-border-color: var(--gray-a8);
+}
+.ui-SelectTrigger:where(.r-variant-surface):where(:disabled) {
+  color: var(--gray-a11);
+  background-color: var(--gray-a2);
+  --select-trigger-border-color: var(--gray-a6);
+}
+.ui-SelectTrigger:where(.r-variant-surface):where([data-placeholder]) .ui-SelectTriggerInner {
+  color: var(--gray-a10);
+}
+.ui-SelectTrigger:where(.r-variant-soft),
+.ui-SelectTrigger:where(.r-variant-ghost) {
+  color: var(--accent-12);
+}
+.ui-SelectTrigger:where(.r-variant-soft):where(:focus-visible),
+.ui-SelectTrigger:where(.r-variant-ghost):where(:focus-visible) {
+  outline: 2px solid var(--focus-8);
+  outline-offset: -1px;
+}
+.ui-SelectTrigger:where(.r-variant-soft):where([data-placeholder]) .ui-SelectTriggerInner,
+.ui-SelectTrigger:where(.r-variant-ghost):where([data-placeholder]) .ui-SelectTriggerInner {
+  color: var(--accent-12);
+  opacity: 0.6;
+}
+.ui-SelectTrigger:where(.r-variant-soft) {
+  background-color: var(--accent-a3);
+}
+@media (hover: hover) {
+.ui-SelectTrigger:where(.r-variant-soft):hover {
+    background-color: var(--accent-a4);
+}
+}
+.ui-SelectTrigger:where(.r-variant-soft):where([data-state='open']) {
+  background-color: var(--accent-a4);
+}
+.ui-SelectTrigger:where(.r-variant-soft):where(:focus-visible) {
+  outline-color: var(--accent-8);
+}
+.ui-SelectTrigger:where(.r-variant-soft):where(:disabled) {
+  color: var(--gray-a11);
+  background-color: var(--gray-a3);
+}
+@media (hover: hover) {
+.ui-SelectTrigger:where(.r-variant-ghost):hover {
+    background-color: var(--accent-a3);
+}
+}
+.ui-SelectTrigger:where(.r-variant-ghost):where([data-state='open']) {
+  background-color: var(--accent-a3);
+}
+.ui-SelectTrigger:where(.r-variant-ghost):where(:disabled) {
+  color: var(--gray-a11);
+  background-color: transparent;
+}
+.ui-SelectTrigger:where(:disabled) .ui-SelectIcon {
+  color: var(--gray-a9);
+}
+
+.ui-SelectItem {
+  display: flex;
+  align-items: center;
+  height: var(--select-item-height);
+  padding-left: var(--select-item-indicator-width);
+  padding-right: var(--select-item-indicator-width);
+  position: relative;
+  box-sizing: border-box;
+  outline: none;
+  scroll-margin: var(--select-content-padding) 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  cursor: default;
+}
+.ui-SelectItem:where([data-disabled]) {
+  cursor: not-allowed;
+}
+.ui-SelectItemIndicator {
+  position: absolute;
+  left: 0;
+  width: var(--select-item-indicator-width);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.ui-SelectItem:where([data-disabled]) {
+  color: var(--gray-a8);
+}
+:where(.r-size-1) .ui-SelectItem {
+  font-size: var(--font-size-1);
+  line-height: var(--line-height-1);
+  letter-spacing: var(--letter-spacing-1);
+  border-radius: var(--radius-1);
+}
+:where(.r-size-1) .ui-SelectItemIndicatorIcon {
+  width: calc(8px * var(--scaling));
+  height: calc(8px * var(--scaling));
+}
+:where(.r-size-2) .ui-SelectItem {
+  line-height: var(--line-height-2);
+  border-radius: var(--radius-2);
+  font-size: var(--font-size-2);
+  letter-spacing: var(--letter-spacing-2);
+}
+:where(.r-size-2) .ui-SelectItemIndicatorIcon,
+:where(.r-size-3) .ui-SelectItemIndicatorIcon {
+  width: calc(10px * var(--scaling));
+  height: calc(10px * var(--scaling));
+}
+:where(.r-size-3) .ui-SelectItem {
+  line-height: var(--line-height-2);
+  border-radius: var(--radius-2);
+  font-size: var(--font-size-3);
+  letter-spacing: var(--letter-spacing-3);
+}
+:where(.r-variant-solid) .ui-SelectItem[data-highlighted] {
+  background-color: var(--accent-9);
+  color: var(--accent-contrast);
+}
+:where(.r-variant-solid):where(.r-high-contrast) .ui-SelectItem[data-highlighted] {
+  background-color: var(--accent-12);
+  color: var(--accent-1);
+}
+:where(.r-variant-soft) .ui-SelectItem[data-highlighted] {
+  background-color: var(--accent-a4);
+}
+
+.ui-SelectLabel {
+  display: flex;
+  align-items: center;
+  height: var(--select-item-height);
+  padding-left: var(--select-item-indicator-width);
+  padding-right: var(--select-item-indicator-width);
+  color: var(--gray-a10);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  cursor: default;
+}
+.ui-SelectItem + .ui-SelectLabel {
+  margin-top: var(--space-2);
+}
+:where(.r-size-1) .ui-SelectLabel {
+  font-size: var(--font-size-1);
+  letter-spacing: var(--letter-spacing-1);
+  line-height: var(--line-height-1);
+}
+:where(.r-size-2) .ui-SelectLabel,
+:where(.r-size-3) .ui-SelectLabel {
+  font-size: var(--font-size-2);
+  letter-spacing: var(--letter-spacing-2);
+  line-height: var(--line-height-2);
+}
+
+.ui-SelectSeparator {
+  height: 1px;
+  margin-top: var(--space-2);
+  margin-bottom: var(--space-2);
+  margin-left: var(--select-item-indicator-width);
+  margin-right: var(--select-separator-margin-right);
+  background-color: var(--gray-a6);
+}

package/dist/components/separator.css

@@ -0,0 +1,26 @@
+
+.ui-Separator {
+  display: block;
+  box-sizing: border-box;
+  background-color: var(--accent-a6);
+}
+.ui-Separator[aria-orientation="horizontal"] {
+  width: var(--separator-size, auto);
+  height: 1px;
+}
+.ui-Separator[aria-orientation="vertical"] {
+  width: 1px;
+  height: var(--separator-size, auto);
+}
+.ui-Separator:where(.r-size-1) {
+  --separator-size: var(--space-4);
+}
+.ui-Separator:where(.r-size-2) {
+  --separator-size: var(--space-6);
+}
+.ui-Separator:where(.r-size-3) {
+  --separator-size: var(--space-9);
+}
+.ui-Separator:where(.r-size-4) {
+  --separator-size: 100%;
+}

package/dist/components/spinner.css

@@ -0,0 +1,36 @@
+
+.ui-Spinner {
+  color: var(--gray-10);
+}
+.ui-Spinner:where(.r-size-1) {
+  font-size: var(--space-3);
+}
+.ui-Spinner:where(.r-size-2) {
+  font-size: var(--space-4);
+}
+.ui-Spinner:where(.r-size-3) {
+  font-size: calc(1.25 * var(--space-4));
+}
+
+.ui-SavingIndicator {
+  display: inline-flex;
+  align-items: center;
+}
+.ui-SavingIndicator > svg {
+  vertical-align: middle;
+}
+.ui-SavingIndicator:where([data-status="saving"]) {
+  color: var(--gray-10);
+}
+.ui-SavingIndicator:where([data-status="saved"]) {
+  color: var(--green-10);
+}
+.ui-SavingIndicator:where(.r-size-1) {
+  font-size: var(--space-3);
+}
+.ui-SavingIndicator:where(.r-size-2) {
+  font-size: var(--space-4);
+}
+.ui-SavingIndicator:where(.r-size-3) {
+  font-size: calc(1.25 * var(--space-4));
+}

package/dist/components/switch.css

@@ -0,0 +1,176 @@
+
+.ui-root {
+  --switch-disabled-blend-mode: multiply;
+  --switch-high-contrast-checked-color-overlay: var(--black-a8);
+  --switch-high-contrast-checked-active-before-filter: contrast(0.82) saturate(1.2) brightness(1.16);
+  --switch-surface-checked-active-filter: brightness(0.92) saturate(1.1);
+}
+:is(.dark, .dark-theme) .ui-root {
+  --switch-disabled-blend-mode: screen;
+  --switch-high-contrast-checked-color-overlay: transparent;
+  --switch-high-contrast-checked-active-before-filter: brightness(1.08);
+  --switch-surface-checked-active-filter: brightness(1.08);
+}
+.ui-Switch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  vertical-align: top;
+  flex-shrink: 0;
+  outline: none;
+
+  height: var(--switch-height);
+  --switch-width: calc(var(--switch-height) * 1.75);
+  --switch-thumb-inset: 1px;
+  --switch-thumb-size: calc(var(--switch-height) - var(--switch-thumb-inset) * 2);
+  --switch-thumb-translate-x: calc(var(--switch-width) - var(--switch-height));
+}
+.ui-Switch::before {
+  content: '';
+  display: block;
+  width: var(--switch-width);
+  height: var(--switch-height);
+  border-radius: var(--switch-border-radius);
+  transition: background-position, background-color, box-shadow, filter;
+  transition-timing-function: linear, ease-in-out, ease-in-out, ease-in-out;
+  background-repeat: no-repeat;
+  background-size: calc(var(--switch-width) * 2 + var(--switch-height)) 100%;
+}
+.ui-Switch:where([data-state='unchecked'])::before {
+  transition-duration: 120ms, 140ms, 140ms, 140ms;
+  background-position-x: 100%;
+}
+.ui-Switch:where([data-state='checked'])::before {
+  transition-duration: 160ms, 140ms, 140ms, 140ms;
+  background-position: 0%;
+}
+.ui-Switch:where(:active)::before {
+  transition-duration: 30ms;
+}
+.ui-Switch:where(:focus-visible)::before {
+  outline: 2px solid var(--focus-8);
+  outline-offset: 2px;
+}
+.ui-Switch::before {
+  cursor: default;
+}
+.ui-Switch:where([data-disabled])::before {
+  cursor: not-allowed;
+}
+.ui-SwitchThumb {
+  background-color: white;
+  position: absolute;
+  left: var(--switch-thumb-inset);
+  width: var(--switch-thumb-size);
+  height: var(--switch-thumb-size);
+  border-radius: calc(var(--switch-border-radius) - var(--switch-thumb-inset));
+  transition: transform 140ms cubic-bezier(0.45, 0.05, 0.55, 0.95), box-shadow 140ms ease-in-out;
+}
+.ui-SwitchThumb:where([data-state='checked']) {
+  transform: translateX(var(--switch-thumb-translate-x));
+}
+.ui-Switch:where(.r-size-1) {
+  --switch-height: var(--space-4);
+  --switch-border-radius: max(var(--radius-1), var(--radius-thumb));
+}
+.ui-Switch:where(.r-size-2) {
+  --switch-height: calc(var(--space-5) * 5 / 6);
+  --switch-border-radius: max(var(--radius-2), var(--radius-thumb));
+}
+.ui-Switch:where(.r-size-3) {
+  --switch-height: var(--space-5);
+  --switch-border-radius: max(var(--radius-2), var(--radius-thumb));
+}
+.ui-Switch:where(.r-variant-surface)::before {
+  background-color: var(--gray-a3);
+  background-image: linear-gradient(to right, var(--accent-track) 40%, transparent 60%);
+  box-shadow: inset 0 0 0 1px var(--gray-a5);
+}
+.ui-Switch:where(.r-variant-surface):where(:active)::before {
+  background-color: var(--gray-a4);
+}
+.ui-Switch:where(.r-variant-surface):where([data-state='checked']:active)::before {
+  filter: var(--switch-surface-checked-active-filter);
+}
+.ui-Switch:where(.r-variant-surface):where(.r-high-contrast)::before {
+  background-image:
+    linear-gradient(to right, var(--switch-high-contrast-checked-color-overlay) 40%, transparent 60%),
+    linear-gradient(to right, var(--accent-track) 40%, transparent 60%);
+}
+.ui-Switch:where(.r-variant-surface):where(.r-high-contrast):where([data-state='checked']:active)::before {
+  filter: var(--switch-high-contrast-checked-active-before-filter);
+}
+.ui-Switch:where(.r-variant-surface):where([data-disabled]) {
+  mix-blend-mode: var(--switch-disabled-blend-mode);
+}
+.ui-Switch:where(.r-variant-surface):where([data-disabled])::before {
+  filter: none;
+  background-image: none;
+  background-color: var(--gray-a3);
+  box-shadow: inset 0 0 0 1px var(--gray-a3);
+}
+.ui-Switch:where(.r-variant-surface) .ui-SwitchThumb:where([data-state='unchecked']) {
+  box-shadow: 0 0 1px 1px var(--black-a2), 0 1px 1px var(--black-a1), 0 2px 4px -1px var(--black-a1);
+}
+.ui-Switch:where(.r-variant-surface) .ui-SwitchThumb:where([data-state='checked']) {
+  box-shadow: 0 1px 3px var(--black-a2), 0 2px 4px -1px var(--black-a1), 0 0 0 1px var(--black-a1),
+    0 0 0 1px var(--accent-a4), -1px 0 1px var(--black-a2);
+}
+.ui-Switch:where(.r-variant-surface):where(.r-high-contrast) .ui-SwitchThumb:where([data-state='checked']) {
+  box-shadow: 0 1px 3px var(--black-a2), 0 2px 4px -1px var(--black-a1), 0 0 0 1px var(--black-a2),
+    -1px 0 1px var(--black-a2);
+}
+.ui-Switch:where(.r-variant-surface) .ui-SwitchThumb:where([data-disabled]) {
+  background-color: var(--gray-2);
+  box-shadow: 0 0 0 1px var(--gray-a2), 0 1px 3px var(--black-a1);
+  transition: none;
+}
+.ui-Switch:where(.r-variant-soft)::before {
+  background-image:
+    linear-gradient(to right, var(--accent-a4) 40%, transparent 60%),
+    linear-gradient(to right, var(--accent-a4) 40%, transparent 60%),
+    linear-gradient(to right, var(--accent-a4) 40%, var(--white-a1) 60%),
+    linear-gradient(to right, var(--gray-a2) 40%, var(--gray-a3) 60%);
+}
+.ui-Switch:where(.r-variant-soft):where([data-state='unchecked'])::before {
+  background-color: var(--gray-a3);
+}
+.ui-Switch:where(.r-variant-soft):where(:active)::before {
+  background-color: var(--gray-a4);
+}
+.ui-Switch:where(.r-variant-soft):where(.r-high-contrast)::before {
+  background-image:
+    linear-gradient(to right, var(--switch-high-contrast-checked-color-overlay) 40%, transparent 60%),
+    linear-gradient(to right, var(--accent-a6) 40%, transparent 60%),
+    linear-gradient(to right, var(--accent-a6) 40%, transparent 60%),
+    linear-gradient(to right, var(--accent-a6) 40%, var(--white-a1) 60%),
+    linear-gradient(to right, var(--accent-a3) 40%, var(--gray-a3) 60%);
+}
+.ui-Switch:where(.r-variant-soft):where(.r-high-contrast):where([data-state='checked']:active)::before {
+  filter: var(--switch-high-contrast-checked-active-before-filter);
+}
+.ui-Switch:where(.r-variant-soft):where([data-disabled]) {
+  mix-blend-mode: var(--switch-disabled-blend-mode);
+}
+.ui-Switch:where(.r-variant-soft):where([data-disabled])::before {
+  filter: none;
+  background-image: none;
+  background-color: var(--gray-a4);
+}
+.ui-Switch:where(.r-variant-soft) .ui-SwitchThumb {
+  filter: saturate(0.45);
+}
+.ui-Switch:where(.r-variant-soft) .ui-SwitchThumb:where([data-state='unchecked']) {
+  box-shadow: 0 0 0 1px var(--black-a1), 0 1px 3px var(--black-a1), 0 1px 3px var(--black-a1),
+    0 2px 4px -1px var(--black-a1);
+}
+.ui-Switch:where(.r-variant-soft) .ui-SwitchThumb:where([data-state='checked']) {
+  box-shadow: 0 0 0 1px var(--black-a1), 0 1px 3px var(--black-a2), 0 1px 3px var(--accent-a3),
+    0 2px 4px -1px var(--accent-a3);
+}
+.ui-Switch:where(.r-variant-soft) .ui-SwitchThumb:where([data-disabled]) {
+  filter: none;
+  background-color: var(--gray-2);
+  box-shadow: 0 0 0 1px var(--gray-a2), 0 1px 3px var(--black-a1);
+  transition: none;
+}