@sdata/web-vue 4.7.1 → 5.0.0

package/es/radio/style/token.scss

@@ -1,3 +1,4 @@
+@use '@style/theme/runtime.scss' as theme-runtime;
 @use '@style/theme/component.scss' as component;
 @use '@style/theme/index.scss' as global;
 
@@ -106,3 +107,187 @@ $radio-size-mini-height: global.$size-mini;
 $radio-size-large-height: global.$size-large;
 
 $radio-group-size-line-height_vertical: global.$size-8;
+
+// @generated runtime tokens — pnpm theme:generate
+$radio-color-border: theme-runtime.token('radio', 'radio-color-border', $radio-color-border);
+$radio-color-border_hover: theme-runtime.token(
+  'radio',
+  'radio-color-border-hover',
+  $radio-color-border_hover
+);
+$radio-color-border_disabled: theme-runtime.token(
+  'radio',
+  'radio-color-border-disabled',
+  $radio-color-border_disabled
+);
+$radio-color-bg: theme-runtime.token('radio', 'radio-color-bg', $radio-color-bg);
+$radio-color-bg_checked: theme-runtime.token(
+  'radio',
+  'radio-color-bg-checked',
+  $radio-color-bg_checked,
+  'color-primary-6'
+);
+$radio-border-radius: theme-runtime.token('radio', 'radio-border-radius', $radio-border-radius);
+$radio-color-bg_disabled: theme-runtime.token(
+  'radio',
+  'radio-color-bg-disabled',
+  $radio-color-bg_disabled
+);
+$radio-color-bg_checked_disabled: theme-runtime.token(
+  'radio',
+  'radio-color-bg-checked-disabled',
+  $radio-color-bg_checked_disabled
+);
+$radio-color-dot-bg_checked_disabled: theme-runtime.token(
+  'radio',
+  'radio-color-dot-bg-checked-disabled',
+  $radio-color-bg_disabled
+);
+$radio-color-text: theme-runtime.token('radio', 'radio-color-text', $radio-color-text);
+$radio-color-text_disabled: theme-runtime.token(
+  'radio',
+  'radio-color-text-disabled',
+  $radio-color-text_disabled
+);
+$radio-color-text_checked_disabled: theme-runtime.token(
+  'radio',
+  'radio-color-text-checked-disabled',
+  $radio-color-text_checked_disabled
+);
+$radio-font-text-size: theme-runtime.token(
+  'radio',
+  'radio-font-text-size',
+  $radio-font-text-size,
+  'font-size-body-3'
+);
+$radio-font-text-size_large: theme-runtime.token(
+  'radio',
+  'radio-font-text-size-large',
+  $radio-font-text-size_large,
+  'font-size-body-3'
+);
+$radio-font-text-size_mini: theme-runtime.token(
+  'radio',
+  'radio-font-text-size-mini',
+  $radio-font-text-size_mini,
+  'font-size-body-1'
+);
+$radio-font-text-size_small: theme-runtime.token(
+  'radio',
+  'radio-font-text-size-small',
+  $radio-font-text-size_small,
+  'font-size-body-3'
+);
+$radio-margin-text-left: theme-runtime.token(
+  'radio',
+  'radio-margin-text-left',
+  $radio-margin-text-left,
+  'spacing-4'
+);
+$radio-mask-bg-color-bg: theme-runtime.token(
+  'radio',
+  'radio-mask-bg-color-bg',
+  $radio-mask-bg-color-bg
+);
+$radio-group-margin-right: theme-runtime.token(
+  'radio',
+  'radio-group-margin-right',
+  $radio-group-margin-right,
+  'spacing-8'
+);
+$radio-group-button-color-bg: theme-runtime.token(
+  'radio',
+  'radio-group-button-color-bg',
+  $radio-group-button-color-bg
+);
+$radio-button-padding-horizontal: theme-runtime.token(
+  'radio',
+  'radio-button-padding-horizontal',
+  $radio-button-padding-horizontal,
+  'spacing-6'
+);
+$radio-button-color-bg_active: theme-runtime.token(
+  'radio',
+  'radio-button-color-bg-active',
+  $radio-button-color-bg_active
+);
+$radio-button-color-bg_hover: theme-runtime.token(
+  'radio',
+  'radio-button-color-bg-hover',
+  $radio-button-color-bg_active
+);
+$radio-button-color-text_active: theme-runtime.token(
+  'radio',
+  'radio-button-color-text-active',
+  $radio-button-color-text_active,
+  'color-primary-6'
+);
+$radio-button-font-text-weight_active: theme-runtime.token(
+  'radio',
+  'radio-button-font-text-weight-active',
+  $radio-button-font-text-weight_active,
+  'font-weight-500'
+);
+$radio-button-color-text_hover: theme-runtime.token(
+  'radio',
+  'radio-button-color-text-hover',
+  $radio-color-text
+);
+$radio-button-border-radius: theme-runtime.token(
+  'radio',
+  'radio-button-border-radius',
+  $radio-button-border-radius
+);
+$radio-button-bg-border-radius: theme-runtime.token(
+  'radio',
+  'radio-button-bg-border-radius',
+  $radio-button-border-radius
+);
+$radio-button-color-bg: theme-runtime.token(
+  'radio',
+  'radio-button-color-bg',
+  $radio-button-color-bg,
+  'color-transparent'
+);
+$radio-button-color-text: theme-runtime.token(
+  'radio',
+  'radio-button-color-text',
+  $radio-button-color-text
+);
+$radio-button-color-bg_disabled: theme-runtime.token(
+  'radio',
+  'radio-button-color-bg-disabled',
+  $radio-button-color-bg_disabled,
+  'color-transparent'
+);
+$radio-button-color-text_disabled: theme-runtime.token(
+  'radio',
+  'radio-button-color-text-disabled',
+  $radio-button-color-text_disabled
+);
+$radio-button-color-bg_checked_disabled: theme-runtime.token(
+  'radio',
+  'radio-button-color-bg-checked-disabled',
+  $radio-button-color-bg_active
+);
+$radio-button-color-text_checked_disabled: theme-runtime.token(
+  'radio',
+  'radio-button-color-text-checked-disabled',
+  $radio-button-color-text_checked_disabled
+);
+$radio-button-color-separator-bg: theme-runtime.token(
+  'radio',
+  'radio-button-color-separator-bg',
+  $radio-button-color-separator-bg
+);
+$radio-button-size-separator-height: theme-runtime.token(
+  'radio',
+  'radio-button-size-separator-height',
+  $radio-button-size-separator-height
+);
+$radio-group-size-line-height_vertical: theme-runtime.token(
+  'radio',
+  'radio-group-size-line-height-vertical',
+  $radio-group-size-line-height_vertical,
+  'size-8'
+);

package/es/rate/style/index.css

@@ -21,8 +21,8 @@
 .sd-rate {
   display: inline-flex;
   align-items: center;
-  min-height: 32px;
-  font-size: 24px;
+  min-height: var(--component-rate-rate-min-height, var(--component-rate-min-height, var(--size-default, 32px)));
+  font-size: var(--component-rate-rate-font-size, var(--component-rate-font-size, var(--font-size-title-3, 24px)));
   line-height: 1;
   user-select: none;
 }
@@ -31,11 +31,11 @@
 }
 .sd-rate-character {
   position: relative;
-  color: var(--sd-color-fill-3);
+  color: var(--component-rate-rate-color-bg-default, var(--component-rate-color-bg-default, var(--sd-color-fill-3)));
   transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-rate-character:not(:last-child) {
-  margin-right: 8px;
+  margin-right: var(--component-rate-rate-gap-size, var(--component-rate-gap-size, var(--spacing-4, 8px)));
 }
 .sd-rate-character-left, .sd-rate-character-right {
   transition: inherit;
@@ -56,10 +56,10 @@
   animation: sd-rate-scale 0.4s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-rate-character-full .sd-rate-character-right {
-  color: rgb(var(--sd-gold-6));
+  color: var(--component-rate-rate-color-bg-active, var(--component-rate-color-bg-active, rgb(var(--sd-gold-6))));
 }
 .sd-rate-character-half .sd-rate-character-left {
-  color: rgb(var(--sd-gold-6));
+  color: var(--component-rate-rate-color-bg-active, var(--component-rate-color-bg-active, rgb(var(--sd-gold-6))));
   opacity: 1;
 }
 .sd-rate-character-disabled {
@@ -69,7 +69,7 @@
   cursor: pointer;
 }
 .sd-rate:not(.sd-rate-readonly, .sd-rate-disabled) .sd-rate-character:hover, .sd-rate:not(.sd-rate-readonly, .sd-rate-disabled) .sd-rate-character:focus {
-  transform: scale(1.2);
+  transform: scale(var(--component-rate-rate-scale-active, var(--component-rate-scale-active, 1.2)));
 }
 
 @keyframes sd-rate-scale {
@@ -77,7 +77,7 @@
     transform: scale(1);
   }
   50% {
-    transform: scale(1.2);
+    transform: scale(var(--component-rate-rate-scale-active, var(--component-rate-scale-active, 1.2)));
   }
   100% {
     transform: scale(1);

package/es/rate/style/token.scss

@@ -1,3 +1,4 @@
+@use '@style/theme/runtime.scss' as theme-runtime;
 @use '@style/theme/index.scss' as global;
 
 @forward '@style/theme/index.scss';
@@ -22,3 +23,21 @@ $rate-color-bg_active: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-gold
 $rate-color-bg_default: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-3'));
 
 $rate-color-bg_hover: rgb(var(string.unquote('#{global.$sd-cssvars-prefix}-gold-5')));
+
+// @generated runtime tokens — pnpm theme:generate
+$rate-min-height: theme-runtime.token('rate', 'rate-min-height', $rate-min-height, 'size-default');
+$rate-gap-size: theme-runtime.token('rate', 'rate-gap-size', $rate-gap-size, 'spacing-4');
+$rate-font-size: theme-runtime.token(
+  'rate',
+  'rate-font-size',
+  $rate-font-size,
+  'font-size-title-3'
+);
+$rate-scale_active: theme-runtime.token('rate', 'rate-scale-active', $rate-scale_active);
+$rate-color-bg_active: theme-runtime.token('rate', 'rate-color-bg-active', $rate-color-bg_active);
+$rate-color-bg_default: theme-runtime.token(
+  'rate',
+  'rate-color-bg-default',
+  $rate-color-bg_default
+);
+$rate-color-bg_hover: theme-runtime.token('rate', 'rate-color-bg-hover', $rate-color-bg_hover);

package/es/regex-vis/style/index.css

@@ -18,18 +18,18 @@
 .sd-regex-vis {
   box-sizing: border-box;
   overflow: hidden;
-  color: var(--sd-color-text-1);
-  font-size: 14px;
-  background: var(--sd-color-bg-2);
-  border: 1px solid var(--sd-color-border-2);
-  border-radius: var(--sd-border-radius-large);
+  color: var(--component-regex-vis-regex-vis-color-text, var(--component-regex-vis-color-text, var(--sd-color-text-1)));
+  font-size: var(--component-regex-vis-regex-vis-font-size, var(--component-regex-vis-font-size, var(--font-size-body-3, 14px)));
+  background: var(--component-regex-vis-regex-vis-color-bg, var(--component-regex-vis-color-bg, var(--sd-color-bg-2)));
+  border: var(--component-regex-vis-regex-vis-border-width, var(--component-regex-vis-border-width, var(--border-1, 1px))) solid var(--component-regex-vis-regex-vis-color-border, var(--component-regex-vis-color-border, var(--sd-color-border-2)));
+  border-radius: var(--component-regex-vis-regex-vis-border-radius, var(--component-regex-vis-border-radius, var(--sd-border-radius-large)));
 }
 .sd-regex-vis-controls {
   display: flex;
-  gap: 12px;
+  gap: var(--component-regex-vis-regex-vis-control-gap, var(--component-regex-vis-control-gap, var(--spacing-6, 12px)));
   align-items: center;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--sd-color-border-2);
+  padding: var(--component-regex-vis-regex-vis-padding-compact, var(--component-regex-vis-padding-compact, var(--spacing-6, 12px))) var(--component-regex-vis-regex-vis-padding, var(--component-regex-vis-padding, var(--spacing-7, 16px)));
+  border-bottom: var(--component-regex-vis-regex-vis-border-width, var(--component-regex-vis-border-width, var(--border-1, 1px))) solid var(--component-regex-vis-regex-vis-color-border, var(--component-regex-vis-color-border, var(--sd-color-border-2)));
 }
 .sd-regex-vis-input {
   flex: 1;
@@ -43,10 +43,10 @@
 .sd-regex-vis-viewport {
   display: flex;
   align-items: center;
-  min-height: 160px;
-  padding: 16px;
+  min-height: var(--component-regex-vis-regex-vis-min-height, var(--component-regex-vis-min-height, var(--size-40, 160px)));
+  padding: var(--component-regex-vis-regex-vis-padding, var(--component-regex-vis-padding, var(--spacing-7, 16px)));
   overflow: auto;
-  background: var(--sd-color-bg-1);
+  background: var(--component-regex-vis-regex-vis-color-viewport-bg, var(--component-regex-vis-color-viewport-bg, var(--sd-color-bg-1)));
 }
 .sd-regex-vis-graph {
   display: block;
@@ -56,72 +56,72 @@
   font-family: consolas, menlo;
 }
 .sd-regex-vis-rail {
-  fill: var(--sd-color-bg-1);
-  stroke: var(--sd-color-text-3);
+  fill: var(--component-regex-vis-regex-vis-color-viewport-bg, var(--component-regex-vis-color-viewport-bg, var(--sd-color-bg-1)));
+  stroke: var(--component-regex-vis-regex-vis-color-rail, var(--component-regex-vis-color-rail, var(--sd-color-text-3)));
   stroke-linecap: round;
   stroke-linejoin: round;
-  stroke-width: 1px;
+  stroke-width: var(--component-regex-vis-regex-vis-border-width, var(--component-regex-vis-border-width, var(--border-1, 1px)));
 }
 .sd-regex-vis-empty-label {
-  font-size: 12px;
-  fill: var(--sd-color-text-3);
+  font-size: var(--component-regex-vis-regex-vis-font-size-secondary, var(--component-regex-vis-font-size-secondary, var(--font-size-body-1, 12px)));
+  fill: var(--component-regex-vis-regex-vis-color-text-secondary, var(--component-regex-vis-color-text-secondary, var(--sd-color-text-3)));
 }
 .sd-regex-vis-name-label {
-  font-weight: 500;
-  font-size: 14px;
+  font-weight: var(--component-regex-vis-regex-vis-font-weight, var(--component-regex-vis-font-weight, var(--font-weight-500, 500)));
+  font-size: var(--component-regex-vis-regex-vis-font-size-quantifier, var(--component-regex-vis-font-size-quantifier, var(--font-size-body-3, 14px)));
   user-select: none;
-  fill: var(--sd-color-text-1);
+  fill: var(--component-regex-vis-regex-vis-color-text, var(--component-regex-vis-color-text, var(--sd-color-text-1)));
 }
 .sd-regex-vis-quantifier {
-  color: var(--sd-color-text-1);
+  color: var(--component-regex-vis-regex-vis-color-text, var(--component-regex-vis-color-text, var(--sd-color-text-1)));
 }
 .sd-regex-vis-quantifier svg {
   overflow: visible;
   color: currentcolor;
 }
 .sd-regex-vis-quantifier text {
-  font-weight: 500;
-  font-size: 14px;
+  font-weight: var(--component-regex-vis-regex-vis-font-weight, var(--component-regex-vis-font-weight, var(--font-weight-500, 500)));
+  font-size: var(--component-regex-vis-regex-vis-font-size-quantifier, var(--component-regex-vis-font-size-quantifier, var(--font-size-body-3, 14px)));
   user-select: none;
   fill: currentcolor;
 }
 .sd-regex-vis-node {
-  color: var(--sd-color-text-1);
+  color: var(--component-regex-vis-regex-vis-color-text, var(--component-regex-vis-color-text, var(--sd-color-text-1)));
   outline: none;
   cursor: default;
 }
 .sd-regex-vis-node rect {
-  transition: fill 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), stroke 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
-  fill: var(--sd-color-primary-light-1);
-  stroke: rgb(var(--sd-primary-6));
-  stroke-width: 1px;
+  transition: fill var(--component-regex-vis-regex-vis-transition-duration, var(--component-regex-vis-transition-duration, 0.1s)) cubic-bezier(0.34, 0.69, 0.1, 1), stroke var(--component-regex-vis-regex-vis-transition-duration, var(--component-regex-vis-transition-duration, 0.1s)) cubic-bezier(0.34, 0.69, 0.1, 1);
+  fill: var(--component-regex-vis-regex-vis-color-node-bg, var(--component-regex-vis-color-node-bg, var(--sd-color-primary-light-1)));
+  stroke: var(--component-regex-vis-regex-vis-color-node-border, var(--component-regex-vis-color-node-border, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
+  stroke-width: var(--component-regex-vis-regex-vis-border-width, var(--component-regex-vis-border-width, var(--border-1, 1px)));
 }
 .sd-regex-vis-node text {
-  font-weight: 500;
-  font-size: 14px;
+  font-weight: var(--component-regex-vis-regex-vis-font-weight, var(--component-regex-vis-font-weight, var(--font-weight-500, 500)));
+  font-size: var(--component-regex-vis-regex-vis-font-size-node, var(--component-regex-vis-font-size-node, var(--font-size-body-3, 14px)));
   user-select: none;
   pointer-events: none;
   fill: currentcolor;
 }
 .sd-regex-vis-node-assertion rect {
-  fill: var(--sd-color-success-light-1);
-  stroke: rgb(var(--sd-success-6));
+  fill: var(--component-regex-vis-regex-vis-color-assertion-bg, var(--component-regex-vis-color-assertion-bg, var(--sd-color-success-light-1)));
+  stroke: var(--component-regex-vis-regex-vis-color-assertion-border, var(--component-regex-vis-color-assertion-border, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
 }
 .sd-regex-vis-node-group rect, .sd-regex-vis-node-choice rect {
   fill: none;
-  stroke: var(--sd-color-border-3);
+  stroke: var(--component-regex-vis-regex-vis-color-group-border, var(--component-regex-vis-color-group-border, var(--sd-color-border-3)));
 }
 .sd-regex-vis-node-choice rect {
   stroke-dasharray: 6px 4px;
 }
 .sd-regex-vis-node:focus-visible rect {
-  stroke: rgb(var(--sd-primary-5));
-  stroke-width: 2px;
+  stroke: var(--component-regex-vis-regex-vis-color-focus, var(--component-regex-vis-color-focus, var(--color-primary-5, var(--sd-color-primary-5, rgb(var(--sd-primary-5))))));
+  stroke-width: var(--component-regex-vis-regex-vis-border-width-active, var(--component-regex-vis-border-width-active, var(--border-2, 2px)));
 }
 .sd-regex-vis-node-selected rect {
-  fill: var(--sd-color-primary-light-3);
-  stroke: rgb(var(--sd-primary-6));
-  stroke-width: 2px;
+  fill: var(--component-regex-vis-regex-vis-color-selected-bg, var(--component-regex-vis-color-selected-bg, var(--sd-color-primary-light-3)));
+  stroke: var(--component-regex-vis-regex-vis-color-node-border, var(--component-regex-vis-color-node-border, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
+  stroke-width: var(--component-regex-vis-regex-vis-border-width-active, var(--component-regex-vis-border-width-active, var(--border-2, 2px)));
 }
 .sd-regex-vis-node-group.sd-regex-vis-node-selected rect, .sd-regex-vis-node-choice.sd-regex-vis-node-selected rect {
   fill: none;
@@ -133,42 +133,42 @@
   display: flex;
   flex: 1;
   flex-direction: column;
-  gap: 4px;
+  gap: var(--component-regex-vis-regex-vis-state-gap, var(--component-regex-vis-state-gap, var(--spacing-2, 4px)));
   align-items: center;
   justify-content: center;
   min-width: 0;
-  min-height: 160px;
-  color: var(--sd-color-text-3);
+  min-height: var(--component-regex-vis-regex-vis-min-height, var(--component-regex-vis-min-height, var(--size-40, 160px)));
+  color: var(--component-regex-vis-regex-vis-color-text-secondary, var(--component-regex-vis-color-text-secondary, var(--sd-color-text-3)));
   text-align: center;
 }
 .sd-regex-vis-error {
   box-sizing: border-box;
-  padding: 16px;
-  color: rgb(var(--sd-danger-6));
-  background: var(--sd-color-danger-light-1);
-  border-radius: var(--sd-border-radius-medium);
+  padding: var(--component-regex-vis-regex-vis-padding, var(--component-regex-vis-padding, var(--spacing-7, 16px)));
+  color: var(--component-regex-vis-regex-vis-color-error, var(--component-regex-vis-color-error, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
+  background: var(--component-regex-vis-regex-vis-color-error-bg, var(--component-regex-vis-color-error-bg, var(--sd-color-danger-light-1)));
+  border-radius: var(--component-regex-vis-regex-vis-node-border-radius, var(--component-regex-vis-node-border-radius, var(--sd-border-radius-medium)));
 }
 .sd-regex-vis-error-title {
-  font-weight: 500;
+  font-weight: var(--component-regex-vis-regex-vis-font-weight, var(--component-regex-vis-font-weight, var(--font-weight-500, 500)));
 }
 .sd-regex-vis-error-message {
   max-width: 100%;
-  font-size: 12px;
+  font-size: var(--component-regex-vis-regex-vis-font-size-secondary, var(--component-regex-vis-font-size-secondary, var(--font-size-body-1, 12px)));
   font-family: consolas, menlo;
   overflow-wrap: anywhere;
 }
 .sd-regex-vis-footer {
-  padding: 12px 16px;
-  color: var(--sd-color-text-3);
-  border-top: 1px solid var(--sd-color-border-2);
+  padding: var(--component-regex-vis-regex-vis-padding-compact, var(--component-regex-vis-padding-compact, var(--spacing-6, 12px))) var(--component-regex-vis-regex-vis-padding, var(--component-regex-vis-padding, var(--spacing-7, 16px)));
+  color: var(--component-regex-vis-regex-vis-color-text-secondary, var(--component-regex-vis-color-text-secondary, var(--sd-color-text-3)));
+  border-top: var(--component-regex-vis-regex-vis-border-width, var(--component-regex-vis-border-width, var(--border-1, 1px))) solid var(--component-regex-vis-regex-vis-color-border, var(--component-regex-vis-color-border, var(--sd-color-border-2)));
 }
 @media (hover: hover) {
   .sd-regex-vis-selectable .sd-regex-vis-node:hover rect {
-    fill: var(--sd-color-primary-light-2);
+    fill: var(--component-regex-vis-regex-vis-color-hover-bg, var(--component-regex-vis-color-hover-bg, var(--sd-color-primary-light-2)));
   }
   .sd-regex-vis-selectable .sd-regex-vis-node-group:hover rect, .sd-regex-vis-selectable .sd-regex-vis-node-choice:hover rect {
     fill: none;
-    stroke: rgb(var(--sd-primary-6));
+    stroke: var(--component-regex-vis-regex-vis-color-node-border, var(--component-regex-vis-color-node-border, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
   }
 }
 @media (width <= 640px) {

package/es/regex-vis/style/token.scss

@@ -1,3 +1,4 @@
+@use '@style/theme/runtime.scss' as theme-runtime;
 @use '@style/theme/index.scss' as global;
 @use 'sass:string';
 
@@ -40,3 +41,172 @@ $regex-vis-font-size-node: global.$font-size-body-3;
 $regex-vis-font-size-quantifier: global.$font-size-body-3;
 $regex-vis-font-weight: global.$font-weight-500;
 $regex-vis-transition-duration: global.$transition-duration-1;
+
+// @generated runtime tokens — pnpm theme:generate
+$regex-vis-color-bg: theme-runtime.token('regex-vis', 'regex-vis-color-bg', $regex-vis-color-bg);
+$regex-vis-color-viewport-bg: theme-runtime.token(
+  'regex-vis',
+  'regex-vis-color-viewport-bg',
+  $regex-vis-color-viewport-bg
+);
+$regex-vis-color-border: theme-runtime.token(
+  'regex-vis',
+  'regex-vis-color-border',
+  $regex-vis-color-border
+);
+$regex-vis-color-rail: theme-runtime.token(
+  'regex-vis',
+  'regex-vis-color-rail',
+  $regex-vis-color-rail
+);
+$regex-vis-color-text: theme-runtime.token(
+  'regex-vis',
+  'regex-vis-color-text',
+  $regex-vis-color-text
+);
+$regex-vis-color-text-secondary: theme-runtime.token(
+  'regex-vis',
+  'regex-vis-color-text-secondary',
+  $regex-vis-color-text-secondary
+);
+$regex-vis-color-node-bg: theme-runtime.token(
+  'regex-vis',
+  'regex-vis-color-node-bg',
+  $regex-vis-color-node-bg
+);
+$regex-vis-color-node-border: theme-runtime.token(
+  'regex-vis',
+  'regex-vis-color-node-border',
+  $regex-vis-color-node-border,
+  'color-primary-6'
+);
+$regex-vis-color-assertion-bg: theme-runtime.token(
+  'regex-vis',
+  'regex-vis-color-assertion-bg',
+  $regex-vis-color-assertion-bg
+);
+$regex-vis-color-assertion-border: theme-runtime.token(
+  'regex-vis',
+  'regex-vis-color-assertion-border',
+  $regex-vis-color-assertion-border,
+  'color-success-6'
+);
+$regex-vis-color-group-border: theme-runtime.token(
+  'regex-vis',
+  'regex-vis-color-group-border',
+  $regex-vis-color-group-border
+);
+$regex-vis-color-hover-bg: theme-runtime.token(
+  'regex-vis',
+  'regex-vis-color-hover-bg',
+  $regex-vis-color-hover-bg
+);
+$regex-vis-color-selected-bg: theme-runtime.token(
+  'regex-vis',
+  'regex-vis-color-selected-bg',
+  $regex-vis-color-selected-bg
+);
+$regex-vis-color-focus: theme-runtime.token(
+  'regex-vis',
+  'regex-vis-color-focus',
+  $regex-vis-color-focus,
+  'color-primary-5'
+);
+$regex-vis-color-error: theme-runtime.token(
+  'regex-vis',
+  'regex-vis-color-error',
+  $regex-vis-color-error,
+  'color-danger-6'
+);
+$regex-vis-color-error-bg: theme-runtime.token(
+  'regex-vis',
+  'regex-vis-color-error-bg',
+  $regex-vis-color-error-bg
+);
+$regex-vis-border-width: theme-runtime.token(
+  'regex-vis',
+  'regex-vis-border-width',
+  $regex-vis-border-width,
+  'border-1'
+);
+$regex-vis-border-width-active: theme-runtime.token(
+  'regex-vis',
+  'regex-vis-border-width-active',
+  $regex-vis-border-width-active,
+  'border-2'
+);
+$regex-vis-border-radius: theme-runtime.token(
+  'regex-vis',
+  'regex-vis-border-radius',
+  $regex-vis-border-radius
+);
+$regex-vis-node-border-radius: theme-runtime.token(
+  'regex-vis',
+  'regex-vis-node-border-radius',
+  $regex-vis-node-border-radius
+);
+$regex-vis-padding: theme-runtime.token(
+  'regex-vis',
+  'regex-vis-padding',
+  $regex-vis-padding,
+  'spacing-7'
+);
+$regex-vis-padding-compact: theme-runtime.token(
+  'regex-vis',
+  'regex-vis-padding-compact',
+  $regex-vis-padding-compact,
+  'spacing-6'
+);
+$regex-vis-control-gap: theme-runtime.token(
+  'regex-vis',
+  'regex-vis-control-gap',
+  $regex-vis-control-gap,
+  'spacing-6'
+);
+$regex-vis-state-gap: theme-runtime.token(
+  'regex-vis',
+  'regex-vis-state-gap',
+  $regex-vis-state-gap,
+  'spacing-2'
+);
+$regex-vis-min-height: theme-runtime.token(
+  'regex-vis',
+  'regex-vis-min-height',
+  $regex-vis-min-height,
+  'size-40'
+);
+$regex-vis-font-size: theme-runtime.token(
+  'regex-vis',
+  'regex-vis-font-size',
+  $regex-vis-font-size,
+  'font-size-body-3'
+);
+$regex-vis-font-size-secondary: theme-runtime.token(
+  'regex-vis',
+  'regex-vis-font-size-secondary',
+  $regex-vis-font-size-secondary,
+  'font-size-body-1'
+);
+$regex-vis-font-size-node: theme-runtime.token(
+  'regex-vis',
+  'regex-vis-font-size-node',
+  $regex-vis-font-size-node,
+  'font-size-body-3'
+);
+$regex-vis-font-size-quantifier: theme-runtime.token(
+  'regex-vis',
+  'regex-vis-font-size-quantifier',
+  $regex-vis-font-size-quantifier,
+  'font-size-body-3'
+);
+$regex-vis-font-weight: theme-runtime.token(
+  'regex-vis',
+  'regex-vis-font-weight',
+  $regex-vis-font-weight,
+  'font-weight-500'
+);
+$regex-vis-transition-duration: theme-runtime.token(
+  'regex-vis',
+  'regex-vis-transition-duration',
+  $regex-vis-transition-duration
+);