datocms-react-ui 2.1.3 → 3.0.0-alpha.0

package/src/SplitView/SplitViewSash/styles.module.css

@@ -3,7 +3,7 @@
   position: absolute;
   top: 0;
   transition: background-color 0.2s 0.15s;
-  background-color: rgba(var(--light-color-components), 0);
+  background-color: transparent;
   width: 100%;
   z-index: 2;
   display: flex;
@@ -13,7 +13,7 @@
 
 .SplitViewSash:hover,
 .SplitViewSash--dragging {
-  background-color: var(--light-color);
+  background-color: var(--color--tinted--surface);
 }
 
 .SplitViewSash:hover:has(.SplitViewSash__content:hover),
@@ -47,14 +47,14 @@
   width: 20px;
   height: 20px;
   border-radius: 6px;
-  border: 1px solid var(--border-color);
-  background: white;
+  border: 1px solid var(--color--border);
+  background: var(--color--surface);
   z-index: 2;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 10px;
-  color: var(--light-body-color);
+  color: var(--color--ink-subtle);
 }
 
 .SplitViewSash__content__button svg {
@@ -63,6 +63,6 @@
 }
 
 .SplitViewSash__content:hover .SplitViewSash__content__button {
-  background: var(--light-bg-color);
-  color: var(--base-body-color);
+  background: var(--color--surface-hover);
+  color: var(--color--ink);
 }

package/src/SplitView/SplitViewSash/styles.module.css.json

@@ -1 +1 @@
-{"SplitViewSash":"_SplitViewSash_tds51_1","SplitViewSash--dragging":"_SplitViewSash--dragging_tds51_15","SplitViewSash__content":"_SplitViewSash__content_tds51_19","SplitViewSash--no-resize":"_SplitViewSash--no-resize_tds51_24","SplitViewSash--vertical":"_SplitViewSash--vertical_tds51_28","SplitViewSash--horizontal":"_SplitViewSash--horizontal_tds51_32","SplitViewSash__content__button":"_SplitViewSash__content__button_tds51_46"}
+{"SplitViewSash":"_SplitViewSash_5k1ng_1","SplitViewSash--dragging":"_SplitViewSash--dragging_5k1ng_15","SplitViewSash__content":"_SplitViewSash__content_5k1ng_19","SplitViewSash--no-resize":"_SplitViewSash--no-resize_5k1ng_24","SplitViewSash--vertical":"_SplitViewSash--vertical_5k1ng_28","SplitViewSash--horizontal":"_SplitViewSash--horizontal_5k1ng_32","SplitViewSash__content__button":"_SplitViewSash__content__button_5k1ng_46"}

package/src/SwitchField/styles.module.css

@@ -16,7 +16,7 @@
   -ms-user-select: text;
   user-select: text;
   margin-bottom: 0;
-  color: var(--base-body-color);
+  color: var(--color--ink);
 }
 
 .switchField__below {

package/src/SwitchField/styles.module.css.json

@@ -1 +1 @@
-{"switchField__flex":"_switchField__flex_16z4j_1","switchField__switchInput":"_switchField__switchInput_16z4j_6","switchField__label":"_switchField__label_16z4j_10","switchField__below":"_switchField__below_16z4j_22"}
+{"switchField__flex":"_switchField__flex_ietsf_1","switchField__switchInput":"_switchField__switchInput_ietsf_6","switchField__label":"_switchField__label_ietsf_10","switchField__below":"_switchField__below_ietsf_22"}

package/src/SwitchInput/styles.module.css

@@ -1,8 +1,9 @@
 .switchInput__inner {
-  color: #fff;
+  color: var(--color--primary--ink);
   font-size: 12px;
   position: absolute;
   left: 24px;
+  transition: left 0.3s cubic-bezier(0.35, 0, 0.25, 1);
 }
 
 .switchInput {
@@ -14,8 +15,8 @@
   line-height: 20px;
   vertical-align: middle;
   border-radius: 20px 20px;
-  border: 1px solid #ccc;
-  background-color: #ccc;
+  border: 1px solid var(--color--border);
+  background-color: var(--color--ink-muted);
   cursor: pointer;
   transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
 
@@ -26,18 +27,20 @@
     left: 2px;
     top: 1px;
     border-radius: 50% 50%;
-    background-color: #ffffff;
+    background-color: var(--color--surface);
     content: ' ';
     cursor: pointer;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
+    box-shadow: 0 2px 5px var(--color--shadow);
     transform: scale(1);
-    transition: left 0.3s cubic-bezier(0.35, 0, 0.25, 1);
+    transition:
+      left 0.3s cubic-bezier(0.35, 0, 0.25, 1),
+      transform 0.3s cubic-bezier(0.35, 0, 0.25, 1);
     animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1);
     animation-duration: 0.3s;
     animation-name: switchInput__off;
   }
 
-  &:hover,
+  &:hover:after,
   &:focus:after {
     transform: scale(1.1);
     animation-name: switchInput__on;
@@ -45,8 +48,8 @@
 }
 
 .switchInput__checked {
-  border: 1px solid var(--accent-color);
-  background-color: var(--accent-color);
+  border: 1px solid var(--color--selected--border);
+  background-color: var(--color--primary--surface);
 
   .switchInput__inner {
     left: 6px;
@@ -59,16 +62,16 @@
 
 .switchInput__disabled {
   cursor: no-drop;
-  background: #ccc;
-  border-color: #ccc;
+  background: var(--color--disabled--surface);
+  border-color: var(--color--border);
 
   &:after {
-    background: #9e9e9e;
+    background: var(--color--disabled--ink);
     animation-name: none;
     cursor: no-drop;
   }
 
-  &:hover,
+  &:hover:after,
   &:focus:after {
     transform: scale(1);
     animation-name: none;

package/src/SwitchInput/styles.module.css.json

@@ -1 +1 @@
-{"switchInput__inner":"_switchInput__inner_1knbg_1","switchInput":"_switchInput_1knbg_1","switchInput__off":"_switchInput__off_1knbg_1","switchInput__on":"_switchInput__on_1knbg_1","switchInput__checked":"_switchInput__checked_1knbg_47","switchInput__disabled":"_switchInput__disabled_1knbg_60","none":"_none_1knbg_1"}
+{"switchInput__inner":"_switchInput__inner_190is_1","switchInput":"_switchInput_190is_1","switchInput__off":"_switchInput__off_190is_1","switchInput__on":"_switchInput__on_190is_1","switchInput__checked":"_switchInput__checked_190is_50","switchInput__disabled":"_switchInput__disabled_190is_63","none":"_none_190is_1"}

package/src/TextInput/styles.module.css

@@ -3,27 +3,29 @@
   box-sizing: border-box;
   width: 100%;
   padding: 10px;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--color--border);
   appearance: none;
   border-radius: 0;
+  background-color: var(--color--surface);
   background-image: none;
   transition: border 0.2s var(--material-ease);
   font-size: var(--font-size-m);
   resize: none;
   font-family: inherit;
+  color: inherit;
 
   &::placeholder {
-    color: var(--placeholder-body-color);
+    color: var(--color--ink-placeholder);
   }
 
   &:hover {
-    border-color: var(--darker-border-color);
+    border-color: var(--color--border-hover);
   }
 
   &:focus {
     outline: 0;
-    border-color: var(--accent-color);
-    box-shadow: 0 0 0 3px var(--semi-transparent-accent-color);
+    border-color: var(--color--focus--border);
+    box-shadow: 0 0 0 3px var(--color--focus--outline);
   }
 }
 
@@ -33,20 +35,20 @@
 }
 
 .TextInput--disabled {
-  color: var(--light-body-color);
-  border-color: var(--border-color);
-  background: var(--lighter-bg-color);
+  color: var(--color--disabled--ink);
+  border-color: var(--color--border);
+  background: var(--color--disabled--surface);
 }
 
 .TextInput--error {
-  border-color: var(--alert-color);
+  border-color: var(--color--feedback-fail--border);
 
   &:hover,
   &:focus {
-    border-color: var(--alert-color);
+    border-color: var(--color--feedback-fail--border);
   }
 
   &:focus {
-    box-shadow: 0 0 0 3px rgba(var(--alert-color-rgb-components), 0.2);
+    box-shadow: 0 0 0 3px var(--color--feedback-fail--outline);
   }
 }

package/src/TextInput/styles.module.css.json

@@ -1 +1 @@
-{"TextInput":"_TextInput_x2oj2_1","TextInput--monospaced":"_TextInput--monospaced_x2oj2_30","TextInput--disabled":"_TextInput--disabled_x2oj2_35","TextInput--error":"_TextInput--error_x2oj2_41"}
+{"TextInput":"_TextInput_it0d0_1","TextInput--monospaced":"_TextInput--monospaced_it0d0_32","TextInput--disabled":"_TextInput--disabled_it0d0_37","TextInput--error":"_TextInput--error_it0d0_43"}

package/src/TextareaInput/styles.module.css

@@ -3,27 +3,29 @@
   box-sizing: border-box;
   width: 100%;
   padding: 10px;
-  border: 1px solid var(--border-color);
+  border: 1px solid var(--color--border);
   appearance: none;
   border-radius: 0;
+  background-color: var(--color--surface);
   background-image: none;
   transition: border 0.2s var(--material-ease);
   font-size: var(--font-size-m);
   resize: none;
   font-family: inherit;
+  color: inherit;
 
   &::placeholder {
-    color: var(--placeholder-body-color);
+    color: var(--color--ink-placeholder);
   }
 
   &:hover {
-    border-color: var(--darker-border-color);
+    border-color: var(--color--border-hover);
   }
 
   &:focus {
     outline: 0;
-    border-color: var(--accent-color);
-    box-shadow: 0 0 0 3px var(--semi-transparent-accent-color);
+    border-color: var(--color--focus--border);
+    box-shadow: 0 0 0 3px var(--color--focus--outline);
   }
 }
 
@@ -33,20 +35,20 @@
 }
 
 .TextareaInput--disabled {
-  color: var(--light-body-color);
-  border-color: var(--border-color);
-  background: var(--lighter-bg-color);
+  color: var(--color--disabled--ink);
+  border-color: var(--color--border);
+  background: var(--color--disabled--surface);
 }
 
 .TextareaInput--error {
-  border-color: var(--alert-color);
+  border-color: var(--color--feedback-fail--border);
 
   &:hover,
   &:focus {
-    border-color: var(--alert-color);
+    border-color: var(--color--feedback-fail--border);
   }
 
   &:focus {
-    box-shadow: 0 0 0 3px rgba(var(--alert-color-rgb-components), 0.2);
+    box-shadow: 0 0 0 3px var(--color--feedback-fail--outline);
   }
 }

package/src/TextareaInput/styles.module.css.json

@@ -1 +1 @@
-{"TextareaInput":"_TextareaInput_1wnu9_1","TextareaInput--monospaced":"_TextareaInput--monospaced_1wnu9_30","TextareaInput--disabled":"_TextareaInput--disabled_1wnu9_35","TextareaInput--error":"_TextareaInput--error_1wnu9_41"}
+{"TextareaInput":"_TextareaInput_3v51p_1","TextareaInput--monospaced":"_TextareaInput--monospaced_3v51p_32","TextareaInput--disabled":"_TextareaInput--disabled_3v51p_37","TextareaInput--error":"_TextareaInput--error_3v51p_43"}

package/src/Toolbar/Button/styles.module.css

@@ -3,7 +3,7 @@
   cursor: pointer;
   line-height: inherit;
   background-color: transparent;
-  color: var(--base-body-color);
+  color: var(--color--ink);
   -webkit-appearance: none;
   -moz-appearance: none;
   box-sizing: border-box;
@@ -14,13 +14,13 @@
   justify-content: center;
   width: 49px;
   min-height: 49px;
-  border-left: 1px solid var(--border-color);
-  border-right: 1px solid var(--border-color);
+  border-left: 1px solid var(--color--border);
+  border-right: 1px solid var(--color--border);
 }
 
 .Button:hover,
 .Button:focus {
-  background-color: var(--light-bg-color);
+  background-color: var(--color--surface-hover);
 }
 
 .Button:first-child {

package/src/Toolbar/Button/styles.module.css.json

@@ -1 +1 @@
-{"Button":"_Button_fy6g6_1"}
+{"Button":"_Button_36kvr_1"}

package/src/Toolbar/Toolbar/index.tsx

@@ -23,7 +23,7 @@ export type ToolbarProps = {
  *       display: 'flex',
  *       justifyContent: 'center',
  *       alignItems: 'center',
- *       background: 'var(--light-bg-color)',
+ *       background: 'var(--color--surface-muted)',
  *       height: '150px',
  *     }}
  *   >
@@ -54,7 +54,7 @@ export type ToolbarProps = {
  *       display: 'flex',
  *       justifyContent: 'center',
  *       alignItems: 'center',
- *       background: 'var(--light-bg-color)',
+ *       background: 'var(--color--surface-muted)',
  *       height: '150px',
  *     }}
  *   >
@@ -83,7 +83,7 @@ export type ToolbarProps = {
  *       display: 'flex',
  *       justifyContent: 'center',
  *       alignItems: 'center',
- *       background: 'var(--light-bg-color)',
+ *       background: 'var(--color--surface-muted)',
  *       height: '150px',
  *     }}
  *   >

package/src/Toolbar/Toolbar/styles.module.css

@@ -1,7 +1,7 @@
 .Toolbar {
   display: flex;
-  border-bottom: 1px solid var(--border-color);
-  border-top: 1px solid var(--border-color);
+  border-bottom: 1px solid var(--color--border);
+  border-top: 1px solid var(--color--border);
   align-items: stretch;
   position: relative;
 }

package/src/Toolbar/Toolbar/styles.module.css.json

@@ -1 +1 @@
-{"Toolbar":"_Toolbar_1cwb8_1"}
+{"Toolbar":"_Toolbar_50246_1"}

package/src/Tooltip/TooltipContent/styles.module.css

@@ -1,7 +1,7 @@
 .tooltip {
   padding: 10px 15px;
-  box-shadow: 0 1px 9px rgba(0, 0, 0, 0.2);
-  background: white;
+  box-shadow: 0 1px 9px var(--color--shadow);
+  background: var(--color--raised--surface);
   border-radius: 4px;
   max-width: 400px;
   word-wrap: break-word;

package/src/Tooltip/TooltipContent/styles.module.css.json

@@ -1 +1 @@
-{"tooltip":"_tooltip_3z5rn_1"}
+{"tooltip":"_tooltip_m9vka_1"}

package/src/Tooltip/TooltipDelayGroup/index.tsx

@@ -87,8 +87,8 @@ export type TooltipDelayGroupProps = {
  *       display: 'flex',
  *       gap: 'var(--spacing-xs)',
  *       padding: 'var(--spacing-s)',
- *       borderRadius: 'var(--border-radius-m)',
- *       backgroundColor: 'var(--light-bg-color)'
+ *       borderRadius: '4px',
+ *       backgroundColor: 'var(--color--surface-muted)'
  *     }}>
  *       <Tooltip>
  *         <TooltipTrigger>

package/src/VerticalSplit/index.tsx

@@ -61,7 +61,7 @@ function calculateSizes({
  *           Main content
  *         </div>
  *       </div>
- *       <div style={{ display: 'flex', flexDirection: 'column', height: '100%', borderLeft: '1px solid var(--border-color)' }}>
+ *       <div style={{ display: 'flex', flexDirection: 'column', height: '100%', borderLeft: '1px solid var(--color--border)' }}>
  *         <Toolbar>
  *           <ToolbarStack stackSize="l">
  *             <ToolbarTitle>Secondary</ToolbarTitle>
@@ -108,7 +108,7 @@ function calculateSizes({
  *           Sidebar
  *         </div>
  *       </div>
- *       <div style={{ display: 'flex', flexDirection: 'column', height: '100%', borderLeft: '1px solid var(--border-color)' }}>
+ *       <div style={{ display: 'flex', flexDirection: 'column', height: '100%', borderLeft: '1px solid var(--color--border)' }}>
  *         <Toolbar>
  *           <ToolbarStack stackSize="l">
  *             <ToolbarTitle>Primary</ToolbarTitle>
@@ -168,7 +168,7 @@ function calculateSizes({
  *                display: 'flex',
  *                flexDirection: 'column',
  *                height: '100%',
- *                borderLeft: '1px solid var(--border-color)',
+ *                borderLeft: '1px solid var(--color--border)',
  *              }}
  *            >
  *              <Toolbar>
@@ -233,7 +233,7 @@ function calculateSizes({
  *                display: 'flex',
  *                flexDirection: 'column',
  *                height: '100%',
- *                borderLeft: '1px solid var(--border-color)',
+ *                borderLeft: '1px solid var(--color--border)',
  *              }}
  *            >
  *              <Toolbar>

package/src/VerticalSplit/styles.module.css

@@ -1,6 +1,6 @@
 .VerticalSplitPane__expand {
   transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
-  background: white;
+  background: var(--color--surface);
   cursor: pointer;
   position: absolute;
   top: 0;
@@ -10,12 +10,12 @@
 }
 
 .VerticalSplitPane__expand:hover {
-  background: var(--light-bg-color);
+  background: var(--color--surface-hover);
   animation: VerticalSplitPane__expand 0.6s cubic-bezier(0.55, 0, 0.1, 1);
 }
 
 .VerticalSplitPane__expand.VerticalSplitPane__expand {
-  border-right: 1px solid var(--border-color);
+  border-right: 1px solid var(--color--border);
   transform-origin: left;
 }
 
@@ -23,7 +23,7 @@
 }
 
 .VerticalSplitPane__expand.VerticalSplitPane__expand--right {
-  border-left: 1px solid var(--border-color);
+  border-left: 1px solid var(--color--border);
   transform-origin: right;
 }
 
@@ -45,11 +45,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(
-    to bottom,
-    rgba(48, 48, 47, 0.5),
-    rgba(48, 48, 47, 0.3)
-  );
+  background: var(--color--overlay--surface);
   z-index: 12;
   height: 100%;
   overflow: hidden;
@@ -76,8 +72,8 @@
   position: absolute;
   top: 0;
   bottom: 0;
-  background: white;
-  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
+  background: var(--color--surface);
+  box-shadow: 0 0 15px var(--color--shadow-strong);
 }
 
 .VerticalSplitPaneOverlay__secondary--left {

package/src/VerticalSplit/styles.module.css.json

@@ -1 +1 @@
-{"VerticalSplitPane__expand":"_VerticalSplitPane__expand_80tii_1","VerticalSplitPane__expand--left":"_VerticalSplitPane__expand--left_80tii_22","VerticalSplitPane__expand--right":"_VerticalSplitPane__expand--right_80tii_25","VerticalSplitPaneOverlay":"_VerticalSplitPaneOverlay_80tii_42","VerticalSplitPaneOverlay__primary":"_VerticalSplitPaneOverlay__primary_80tii_58","VerticalSplitPaneOverlay__primary--left":"_VerticalSplitPaneOverlay__primary--left_80tii_67","VerticalSplitPaneOverlay__primary--right":"_VerticalSplitPaneOverlay__primary--right_80tii_71","VerticalSplitPaneOverlay__secondary":"_VerticalSplitPaneOverlay__secondary_80tii_75","VerticalSplitPaneOverlay__secondary--left":"_VerticalSplitPaneOverlay__secondary--left_80tii_83","VerticalSplitPaneOverlay__secondary--right":"_VerticalSplitPaneOverlay__secondary--right_80tii_87","VerticalSplitPaneOverlay__sash":"_VerticalSplitPaneOverlay__sash_80tii_91"}
+{"VerticalSplitPane__expand":"_VerticalSplitPane__expand_1j6ko_1","VerticalSplitPane__expand--left":"_VerticalSplitPane__expand--left_1j6ko_22","VerticalSplitPane__expand--right":"_VerticalSplitPane__expand--right_1j6ko_25","VerticalSplitPaneOverlay":"_VerticalSplitPaneOverlay_1j6ko_42","VerticalSplitPaneOverlay__primary":"_VerticalSplitPaneOverlay__primary_1j6ko_54","VerticalSplitPaneOverlay__primary--left":"_VerticalSplitPaneOverlay__primary--left_1j6ko_63","VerticalSplitPaneOverlay__primary--right":"_VerticalSplitPaneOverlay__primary--right_1j6ko_67","VerticalSplitPaneOverlay__secondary":"_VerticalSplitPaneOverlay__secondary_1j6ko_71","VerticalSplitPaneOverlay__secondary--left":"_VerticalSplitPaneOverlay__secondary--left_1j6ko_79","VerticalSplitPaneOverlay__secondary--right":"_VerticalSplitPaneOverlay__secondary--right_1j6ko_83","VerticalSplitPaneOverlay__sash":"_VerticalSplitPaneOverlay__sash_1j6ko_87"}

package/src/generateStyleFromCtx/index.ts

@@ -8,6 +8,151 @@ function camelToDash(str: string) {
   return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
 }
 
+/**
+ * Maps camelCase semantic token keys to their CSS custom property names
+ * (without the `--` prefix). The CSS names preserve the double-dash
+ * namespace separators used by the host application.
+ */
+const semanticTokenCssNames: Record<string, string> = {
+  /* --- Standalone --- */
+  colorSurface: 'color--surface',
+  colorSurfaceHover: 'color--surface-hover',
+  colorSurfaceMuted: 'color--surface-muted',
+  colorInk: 'color--ink',
+  colorInkSubtle: 'color--ink-subtle',
+  colorInkHover: 'color--ink-hover',
+  colorInkMuted: 'color--ink-muted',
+  colorInkPlaceholder: 'color--ink-placeholder',
+  colorInkPrimary: 'color--ink-primary',
+  colorInkAccent: 'color--ink-accent',
+  colorInkDisabled: 'color--ink-disabled',
+  colorBorder: 'color--border',
+  colorBorderHover: 'color--border-hover',
+
+  /* --- Context: raised --- */
+  colorRaisedSurface: 'color--raised--surface',
+  colorRaisedSurfaceHover: 'color--raised--surface-hover',
+  colorRaisedSurfaceActive: 'color--raised--surface-active',
+
+  /* --- Context: primary --- */
+  colorPrimarySurface: 'color--primary--surface',
+  colorPrimarySurfaceHover: 'color--primary--surface-hover',
+  colorPrimarySurfaceActive: 'color--primary--surface-active',
+  colorPrimarySurfaceMuted: 'color--primary--surface-muted',
+  colorPrimaryInk: 'color--primary--ink',
+  colorPrimaryBorder: 'color--primary--border',
+
+  /* --- Context: tinted --- */
+  colorTintedSurface: 'color--tinted--surface',
+  colorTintedSurfaceHover: 'color--tinted--surface-hover',
+  colorTintedSurfaceActive: 'color--tinted--surface-active',
+  colorTintedInk: 'color--tinted--ink',
+
+  /* --- Context: accent --- */
+  colorAccentSurface: 'color--accent--surface',
+  colorAccentInk: 'color--accent--ink',
+
+  /* --- Context: selected --- */
+  colorSelectedSurface: 'color--selected--surface',
+  colorSelectedInk: 'color--selected--ink',
+  colorSelectedBorder: 'color--selected--border',
+
+  /* --- Context: disabled --- */
+  colorDisabledSurface: 'color--disabled--surface',
+  colorDisabledInk: 'color--disabled--ink',
+
+  /* --- Context: danger --- */
+  colorDangerSurface: 'color--danger--surface',
+  colorDangerInk: 'color--danger--ink',
+
+  /* --- Context: enterprise --- */
+  colorEnterpriseSurface: 'color--enterprise--surface',
+
+  /* --- Context: focus --- */
+  colorFocusBorder: 'color--focus--border',
+  colorFocusOutline: 'color--focus--outline',
+
+  /* --- Feedback --- */
+  colorFeedbackFailInk: 'color--feedback-fail--ink',
+  colorFeedbackFailBorder: 'color--feedback-fail--border',
+  colorFeedbackFailOutline: 'color--feedback-fail--outline',
+  colorFeedbackWarningInk: 'color--feedback-warning--ink',
+  colorFeedbackWarningSurface: 'color--feedback-warning--surface',
+  colorFeedbackSuccessInk: 'color--feedback-success--ink',
+  colorFeedbackWarningBorder: 'color--feedback-warning--border',
+  colorFeedbackSuccessBorder: 'color--feedback-success--border',
+
+  /* --- Context: highlight --- */
+  colorHighlightSurface: 'color--highlight--surface',
+
+  /* --- Diffs --- */
+  colorDiffAddedSurface: 'color--diff-added--surface',
+  colorDiffRemovedSurface: 'color--diff-removed--surface',
+  colorDiffChangedSurface: 'color--diff-changed--surface',
+  colorDiffAddedSurfaceSubtle: 'color--diff-added--surface-subtle',
+  colorDiffRemovedSurfaceSubtle: 'color--diff-removed--surface-subtle',
+  colorDiffChangedSurfaceSubtle: 'color--diff-changed--surface-subtle',
+  colorDiffAddedOutlineSubtle: 'color--diff-added--outline-subtle',
+  colorDiffRemovedOutlineSubtle: 'color--diff-removed--outline-subtle',
+  colorDiffChangedOutlineSubtle: 'color--diff-changed--outline-subtle',
+  colorDiffChangedBorder: 'color--diff-changed--border',
+  colorDiffChangedBorderNegative: 'color--diff-changed--border-negative',
+
+  /* --- Status --- */
+  colorStatusDraftInk: 'color--status-draft--ink',
+  colorStatusOutdatedInk: 'color--status-outdated--ink',
+  colorStatusPublishedInk: 'color--status-published--ink',
+
+  /* --- Backdrop --- */
+  colorBackdropSurface: 'color--backdrop--surface',
+  colorBackdropInk: 'color--backdrop--ink',
+
+  /* --- Overlay --- */
+  colorOverlaySurface: 'color--overlay--surface',
+  colorOverlaySurfaceSubtle: 'color--overlay--surface-subtle',
+  colorOverlayInk: 'color--overlay--ink',
+
+  /* --- Stacked --- */
+  colorStackedSurfaceBase: 'color--stacked--surface-base',
+  colorStackedSurface: 'color--stacked--surface',
+  colorStackedSurfaceRaised: 'color--stacked--surface-raised',
+  colorStackedInk: 'color--stacked--ink',
+  colorStackedInkSubtle: 'color--stacked--ink-subtle',
+  colorStackedBorder: 'color--stacked--border',
+  colorStackedSurfaceHover: 'color--stacked--surface-hover',
+  colorStackedSurfaceTranslucent: 'color--stacked--surface-translucent',
+  colorStackedSurfaceButton: 'color--stacked--surface-button',
+  colorStackedSurfaceButtonActive: 'color--stacked--surface-button-active',
+
+  /* --- Progress --- */
+  colorProgressTrack: 'color--progress--track',
+  colorProgressFill: 'color--progress--fill',
+  colorProgressFillHover: 'color--progress--fill-hover',
+
+  /* --- Tooltip --- */
+  colorTooltipSurface: 'color--tooltip--surface',
+  colorTooltipSurfaceHover: 'color--tooltip--surface-hover',
+  colorTooltipInk: 'color--tooltip--ink',
+  colorTooltipInkSubtle: 'color--tooltip--ink-subtle',
+
+  /* --- Code --- */
+  colorCodeSurface: 'color--code--surface',
+  colorCodeInk: 'color--code--ink',
+
+  /* --- Shadows --- */
+  colorShadowSubtle: 'color--shadow-subtle',
+  colorShadow: 'color--shadow',
+  colorShadowStrong: 'color--shadow-strong',
+
+  /* --- Scrollbar --- */
+  colorScrollbar: 'color--scrollbar',
+
+  /* --- Shadow composites --- */
+  shadowElevated: 'shadow--elevated',
+  shadowFloat: 'shadow--float',
+  shadowAmbient: 'shadow--ambient',
+};
+
 export function generateStyleFromCtx(
   ctx: BaseCtx,
   noBodyPadding = false,
@@ -25,5 +170,13 @@ export function generateStyleFromCtx(
         ],
       ]),
     ),
+    ...(ctx.semanticColorTokensTheme
+      ? Object.fromEntries(
+          Object.entries(ctx.semanticColorTokensTheme).map(([k, v]) => [
+            `--${semanticTokenCssNames[k] ?? camelToDash(k)}`,
+            v,
+          ]),
+        )
+      : undefined),
   };
 }