@chenzy-design/svelte 0.2.0 → 0.3.0

package/dist/color-picker/ColorPicker.svelte

@@ -11,7 +11,7 @@
   inline：不渲染 trigger 浮层，直接内联渲染选色面板（设置页嵌入）。
 -->
 <script lang="ts">
-  import { tick } from 'svelte';
+  import { tick, type Snippet } from 'svelte';
   import {
     useId,
     useDismiss,
@@ -50,6 +50,18 @@
     showFormatToggle?: boolean;
     /** 内联渲染选色面板，不使用 trigger 浮层（默认 false） */
     inline?: boolean;
+    /** 等价于 !inline，使用 trigger 浮层（默认 false） */
+    usePopover?: boolean;
+    /** 面板顶部 slot */
+    topSlot?: Snippet;
+    /** 面板底部 slot */
+    bottomSlot?: Snippet;
+    /** 根元素内联样式 */
+    style?: string;
+    /** 面板高度 px（默认 280） */
+    height?: number;
+    /** 面板宽度 px（默认 280） */
+    width?: number;
     /** 支持浏览器 EyeDropper 时显示吸管按钮（默认 true，不支持自动隐藏） */
     eyeDropper?: boolean;
     /** 显示最近使用颜色行（默认 false） */
@@ -78,6 +90,12 @@
     defaultFormat = 'hex',
     showFormatToggle = true,
     inline = false,
+    usePopover = false,
+    topSlot,
+    bottomSlot,
+    style,
+    height = 280,
+    width = 280,
     eyeDropper = true,
     recentColors = false,
     recentMax = 8,
@@ -116,11 +134,14 @@
     onChange?.(hex);
   }
 
+  // usePopover 等价于 !inline：显式启用浮层则覆盖 inline。
+  const effectiveInline = $derived(usePopover ? false : inline);
+
   // ---------- 受控 open (红线 #1) ----------
   // inline 模式：面板常驻渲染，不受 open 控制。
   const isOpenControlled = $derived(open !== undefined);
   let innerOpen = $state(getInitialOpen());
-  const isOpen = $derived(inline ? true : isOpenControlled ? !!open : innerOpen);
+  const isOpen = $derived(effectiveInline ? true : isOpenControlled ? !!open : innerOpen);
 
   // ---------- 受控 format (红线 #1) ----------
   const isFormatControlled = $derived(format !== undefined);
@@ -482,7 +503,7 @@
 
   $effect(() => {
     // inline 模式无浮层，不挂 dismiss。
-    if (inline || !isOpen || !rootEl) return;
+    if (effectiveInline || !isOpen || !rootEl) return;
     const cleanup = useDismiss(rootEl, {
       onDismiss: () => setOpen(false),
       escape: true,
@@ -494,7 +515,7 @@
   // ---------- useFocusTrap (红线 #3)：浮层模式打开时陷入焦点，关闭归还 trigger ----------
   // 复用 core 同一原语（与 Modal/Drawer/Popover 一致，不重造）。
   $effect(() => {
-    if (inline || !isOpen || !panelEl) return;
+    if (effectiveInline || !isOpen || !panelEl) return;
     const trap = useFocusTrap(panelEl);
     trap.activate();
     return () => trap.deactivate();
@@ -513,7 +534,7 @@
       'cd-color-picker',
       `cd-color-picker--${size}`,
       status !== 'default' && `cd-color-picker--${status}`,
-      inline && 'cd-color-picker--inline',
+      effectiveInline && 'cd-color-picker--inline',
       disabled && 'cd-color-picker--disabled',
       isOpen && 'cd-color-picker--open',
     ]
@@ -523,6 +544,7 @@
 </script>
 
 {#snippet panelBody()}
+      {@render topSlot?.()}
       <div
         class="cd-color-picker__saturation"
         bind:this={satEl}
@@ -677,16 +699,30 @@
           </div>
         </div>
       {/if}
+
+      {@render bottomSlot?.()}
 {/snippet}
 
-{#if inline}
-  <div class={cls} bind:this={rootEl}>
+{#if effectiveInline}
+  <div
+    class={cls}
+    bind:this={rootEl}
+    style={[style, width ? `width:${width}px` : '', height ? `height:${height}px` : '']
+      .filter(Boolean)
+      .join(';')}
+  >
     <div class="cd-color-picker__panel cd-color-picker__panel--inline" role="group" aria-label={ariaLabel ?? loc().t('ColorPicker.panelLabel')}>
       {@render panelBody()}
     </div>
   </div>
 {:else}
-  <div class={cls} bind:this={rootEl}>
+  <div
+    class={cls}
+    bind:this={rootEl}
+    style={[style, width ? `width:${width}px` : '', height ? `height:${height}px` : '']
+      .filter(Boolean)
+      .join(';')}
+  >
     <button
       type="button"
       class="cd-color-picker__trigger"
@@ -746,11 +782,11 @@
   }
   .cd-color-picker__panel {
     position: absolute;
-    inset-block-start: calc(100% + var(--cd-spacing-2));
+    inset-block-start: calc(100% + var(--cd-spacing-tight));
     inset-inline-start: 0;
     z-index: var(--cd-color-picker-panel-z);
     inline-size: var(--cd-color-picker-panel-width);
-    padding: var(--cd-spacing-3);
+    padding: var(--cd-spacing-base-tight);
     background: var(--cd-color-picker-panel-bg);
     border-radius: var(--cd-color-picker-panel-radius);
     box-shadow: var(--cd-color-picker-panel-shadow);
@@ -768,7 +804,7 @@
     position: relative;
     inline-size: 100%;
     block-size: var(--cd-color-picker-saturation-height);
-    border-radius: var(--cd-radius-2);
+    border-radius: var(--cd-border-radius-medium);
     overflow: hidden;
     cursor: crosshair;
     touch-action: none;
@@ -794,29 +830,29 @@
     inline-size: var(--cd-color-picker-handle-size);
     block-size: var(--cd-color-picker-handle-size);
     border: 2px solid var(--cd-color-picker-handle-border);
-    border-radius: var(--cd-radius-full);
-    box-shadow: var(--cd-shadow-1);
+    border-radius: var(--cd-border-radius-full);
+    box-shadow: var(--cd-shadow-elevated);
     transform: translate(-50%, -50%);
     pointer-events: none;
   }
   .cd-color-picker__sliders {
     display: flex;
     align-items: center;
-    gap: var(--cd-spacing-2);
-    margin-block-start: var(--cd-spacing-3);
+    gap: var(--cd-spacing-tight);
+    margin-block-start: var(--cd-spacing-base-tight);
   }
   .cd-color-picker__swatch-current {
     flex: 0 0 auto;
     inline-size: var(--cd-color-picker-swatch-size);
     block-size: var(--cd-color-picker-swatch-size);
     border: 1px solid var(--cd-color-border);
-    border-radius: var(--cd-radius-full);
+    border-radius: var(--cd-border-radius-full);
   }
   .cd-color-picker__bars {
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
-    gap: var(--cd-spacing-2);
+    gap: var(--cd-spacing-tight);
     min-inline-size: 0;
   }
   .cd-color-picker__hue,
@@ -824,7 +860,7 @@
     position: relative;
     inline-size: 100%;
     block-size: var(--cd-color-picker-slider-height);
-    border-radius: var(--cd-radius-full);
+    border-radius: var(--cd-border-radius-full);
     cursor: pointer;
     touch-action: none;
     outline: none;
@@ -867,21 +903,21 @@
     block-size: var(--cd-color-picker-handle-size);
     background: var(--cd-color-picker-handle-border);
     border: 1px solid var(--cd-color-border);
-    border-radius: var(--cd-radius-full);
-    box-shadow: var(--cd-shadow-1);
+    border-radius: var(--cd-border-radius-full);
+    box-shadow: var(--cd-shadow-elevated);
     transform: translate(-50%, -50%);
     pointer-events: none;
   }
   .cd-color-picker__field {
     display: flex;
     align-items: center;
-    gap: var(--cd-spacing-2);
-    margin-block-start: var(--cd-spacing-3);
+    gap: var(--cd-spacing-tight);
+    margin-block-start: var(--cd-spacing-base-tight);
   }
   .cd-color-picker__label {
     flex: 0 0 auto;
     color: var(--cd-color-text-2);
-    font-size: var(--cd-font-size-1);
+    font-size: var(--cd-font-size-small);
   }
   .cd-color-picker__format {
     flex: 0 0 auto;
@@ -889,13 +925,13 @@
   }
   .cd-color-picker__format-select {
     block-size: var(--cd-input-height-small);
-    padding-inline: var(--cd-spacing-1);
+    padding-inline: var(--cd-spacing-extra-tight);
     color: var(--cd-color-text-2);
     background: var(--cd-input-bg);
     border: 1px solid var(--cd-input-border);
     border-radius: var(--cd-input-radius);
     font: inherit;
-    font-size: var(--cd-font-size-1);
+    font-size: var(--cd-font-size-small);
     cursor: pointer;
   }
   .cd-color-picker__format-select:focus-visible {
@@ -917,7 +953,7 @@
     border: 1px solid var(--cd-input-border);
     border-radius: var(--cd-input-radius);
     font: inherit;
-    font-size: var(--cd-font-size-1);
+    font-size: var(--cd-font-size-small);
   }
   .cd-color-picker__hex:focus-visible {
     outline: none;
@@ -927,15 +963,15 @@
   .cd-color-picker__presets {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--cd-spacing-2);
-    margin-block-start: var(--cd-spacing-3);
+    gap: var(--cd-spacing-tight);
+    margin-block-start: var(--cd-spacing-base-tight);
   }
   .cd-color-picker__preset {
     inline-size: var(--cd-color-picker-swatch-size);
     block-size: var(--cd-color-picker-swatch-size);
     padding: 0;
     border: 1px solid var(--cd-color-border);
-    border-radius: var(--cd-radius-1);
+    border-radius: var(--cd-border-radius-small);
     cursor: pointer;
   }
   .cd-color-picker__preset:focus-visible {
@@ -969,17 +1005,17 @@
     opacity: 0.5;
   }
   .cd-color-picker__recent {
-    margin-block-start: var(--cd-spacing-3);
+    margin-block-start: var(--cd-spacing-base-tight);
   }
   .cd-color-picker__recent-label {
     display: block;
-    margin-block-end: var(--cd-spacing-1);
+    margin-block-end: var(--cd-spacing-extra-tight);
     color: var(--cd-color-text-2);
-    font-size: var(--cd-font-size-1);
+    font-size: var(--cd-font-size-small);
   }
   .cd-color-picker__recent-swatches {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--cd-spacing-2);
+    gap: var(--cd-spacing-tight);
   }
 </style>

package/dist/color-picker/ColorPicker.svelte.d.ts

@@ -1,3 +1,4 @@
+import { type Snippet } from 'svelte';
 import { type ColorFormat } from '@chenzy-design/core';
 type Size = 'small' | 'default' | 'large';
 type Status = 'default' | 'warning' | 'error';
@@ -20,6 +21,18 @@ interface Props {
     showFormatToggle?: boolean;
     /** 内联渲染选色面板，不使用 trigger 浮层（默认 false） */
     inline?: boolean;
+    /** 等价于 !inline，使用 trigger 浮层（默认 false） */
+    usePopover?: boolean;
+    /** 面板顶部 slot */
+    topSlot?: Snippet;
+    /** 面板底部 slot */
+    bottomSlot?: Snippet;
+    /** 根元素内联样式 */
+    style?: string;
+    /** 面板高度 px（默认 280） */
+    height?: number;
+    /** 面板宽度 px（默认 280） */
+    width?: number;
     /** 支持浏览器 EyeDropper 时显示吸管按钮（默认 true，不支持自动隐藏） */
     eyeDropper?: boolean;
     /** 显示最近使用颜色行（默认 false） */

package/dist/color-picker/ColorPicker.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.svelte.d.ts","sourceRoot":"","sources":["../../src/color-picker/ColorPicker.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAYH,KAAK,WAAW,EACjB,MAAM,qBAAqB,CAAC;AAI7B,KAAK,IAAI,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAC1C,KAAK,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE9C,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,+CAA+C;IAC/C,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,sCAAsC;IACtC,aAAa,CAAC,EAAE,WAAW,CAAC;IAC5B,8CAA8C;IAC9C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,wCAAwC;IACxC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,gDAAgD;IAChD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,iBAAiB;IACjB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAijBH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ColorPicker.svelte.d.ts","sourceRoot":"","sources":["../../src/color-picker/ColorPicker.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAQ,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EAYH,KAAK,WAAW,EACjB,MAAM,qBAAqB,CAAC;AAI7B,KAAK,IAAI,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAC1C,KAAK,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAE9C,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,+CAA+C;IAC/C,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,sCAAsC;IACtC,aAAa,CAAC,EAAE,WAAW,CAAC;IAC5B,8CAA8C;IAC9C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,wCAAwC;IACxC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gBAAgB;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,sBAAsB;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0BAA0B;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,mBAAmB;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,iBAAiB;IACjB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAikBH,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/color-picker/meta.d.ts

@@ -67,6 +67,36 @@ export declare const meta: {
         readonly type: "boolean";
         readonly default: "false";
         readonly desc: "内联渲染面板，不使用 trigger 浮层";
+    }, {
+        readonly name: "usePopover";
+        readonly type: "boolean";
+        readonly default: "false";
+        readonly desc: "等价于 !inline，显式启用 trigger 浮层（覆盖 inline）";
+    }, {
+        readonly name: "topSlot";
+        readonly type: "Snippet";
+        readonly default: "undefined";
+        readonly desc: "面板顶部 slot";
+    }, {
+        readonly name: "bottomSlot";
+        readonly type: "Snippet";
+        readonly default: "undefined";
+        readonly desc: "面板底部 slot";
+    }, {
+        readonly name: "style";
+        readonly type: "string";
+        readonly default: "undefined";
+        readonly desc: "根元素内联样式";
+    }, {
+        readonly name: "height";
+        readonly type: "number";
+        readonly default: "280";
+        readonly desc: "面板高度 px";
+    }, {
+        readonly name: "width";
+        readonly type: "number";
+        readonly default: "280";
+        readonly desc: "面板宽度 px";
     }, {
         readonly name: "eyeDropper";
         readonly type: "boolean";

package/dist/color-picker/meta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../src/color-picker/meta.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CP,CAAC"}
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../src/color-picker/meta.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDP,CAAC"}

package/dist/color-picker/meta.js

@@ -21,6 +21,12 @@ export const meta = {
         { name: 'defaultFormat', type: "'hex'|'rgb'|'hsv'|'hsl'", default: "'hex'", desc: '非受控初始格式' },
         { name: 'showFormatToggle', type: 'boolean', default: 'true', desc: '面板内显示格式切换下拉' },
         { name: 'inline', type: 'boolean', default: 'false', desc: '内联渲染面板，不使用 trigger 浮层' },
+        { name: 'usePopover', type: 'boolean', default: 'false', desc: '等价于 !inline，显式启用 trigger 浮层（覆盖 inline）' },
+        { name: 'topSlot', type: 'Snippet', default: 'undefined', desc: '面板顶部 slot' },
+        { name: 'bottomSlot', type: 'Snippet', default: 'undefined', desc: '面板底部 slot' },
+        { name: 'style', type: 'string', default: 'undefined', desc: '根元素内联样式' },
+        { name: 'height', type: 'number', default: '280', desc: '面板高度 px' },
+        { name: 'width', type: 'number', default: '280', desc: '面板宽度 px' },
         { name: 'eyeDropper', type: 'boolean', default: 'true', desc: '支持 EyeDropper 时显示吸管按钮（降级隐藏）' },
         { name: 'recentColors', type: 'boolean', default: 'false', desc: '显示最近使用颜色行' },
         { name: 'recentMax', type: 'number', default: '8', desc: '最近颜色上限' },

package/dist/components.d.ts

@@ -60,6 +60,7 @@ export type ComponentName =
   | 'LottieIcon'
   | 'Menu'
   | 'Modal'
+  | 'Nav'
   | 'Notification'
   | 'OverflowList'
   | 'Pagination'
@@ -105,12 +106,14 @@ export type TokenKey =
   | '--cd-anchor-link-padding'
   | '--cd-anchor-rail-color'
   | '--cd-avatar-bg'
+  | '--cd-avatar-border'
   | '--cd-avatar-color'
   | '--cd-avatar-radius'
   | '--cd-avatar-size-default'
   | '--cd-avatar-size-extra-large'
   | '--cd-avatar-size-extra-small'
   | '--cd-avatar-size-large'
+  | '--cd-avatar-size-medium'
   | '--cd-avatar-size-small'
   | '--cd-backtop-bg'
   | '--cd-backtop-bg-active'
@@ -152,6 +155,8 @@ export type TokenKey =
   | '--cd-banner-title-size'
   | '--cd-banner-warning-accent'
   | '--cd-banner-warning-bg'
+  | '--cd-border-radius-full'
+  | '--cd-border-radius-small'
   | '--cd-breadcrumb-*'
   | '--cd-breadcrumb-item-max-width'
   | '--cd-button-*'
@@ -178,7 +183,9 @@ export type TokenKey =
   | '--cd-calendar-week-cell-min-h'
   | '--cd-calendar-weekend-bg'
   | '--cd-card-bg'
+  | '--cd-card-body-color'
   | '--cd-card-border'
+  | '--cd-card-desc-color'
   | '--cd-card-header-border'
   | '--cd-card-padding'
   | '--cd-card-padding-small'
@@ -186,6 +193,8 @@ export type TokenKey =
   | '--cd-card-shadow'
   | '--cd-card-shadow-hover'
   | '--cd-card-title-color'
+  | '--cd-card-title-size'
+  | '--cd-card-title-weight'
   | '--cd-carousel-arrow-bg'
   | '--cd-carousel-arrow-color'
   | '--cd-carousel-arrow-size'
@@ -238,8 +247,8 @@ export type TokenKey =
   | '--cd-empty-*'
   | '--cd-focus-ring'
   | '--cd-font-size-*'
-  | '--cd-font-size-1'
-  | '--cd-font-size-1..6'
+  | '--cd-font-size-small'
+  | '--cd-font-size-small..6'
   | '--cd-form-error-color'
   | '--cd-form-error-font-size'
   | '--cd-form-extra-color'
@@ -253,6 +262,7 @@ export type TokenKey =
   | '--cd-grid-gutter-y'
   | '--cd-highlight-bg'
   | '--cd-highlight-color'
+  | '--cd-highlight-weight'
   | '--cd-icon-color'
   | '--cd-icon-color-*'
   | '--cd-icon-size-*'
@@ -306,8 +316,9 @@ export type TokenKey =
   | '--cd-menu-item-color-disabled'
   | '--cd-menu-item-color-selected'
   | '--cd-menu-item-height'
-  | '--cd-menu-item-indicator'
+  | '--cd-menu-item-icon-color-selected'
   | '--cd-menu-item-padding'
+  | '--cd-menu-item-radius'
   | '--cd-menu-submenu-arrow-color'
   | '--cd-modal-bg'
   | '--cd-modal-body-color'
@@ -326,6 +337,7 @@ export type TokenKey =
   | '--cd-motion-*'
   | '--cd-motion-duration-fast'
   | '--cd-motion-ease-standard'
+  | '--cd-nav-*'
   | '--cd-notification-bg'
   | '--cd-notification-bg-dark'
   | '--cd-notification-border'
@@ -352,6 +364,7 @@ export type TokenKey =
   | '--cd-notification-radius'
   | '--cd-notification-shadow'
   | '--cd-notification-title-size'
+  | '--cd-notification-title-weight'
   | '--cd-notification-width'
   | '--cd-notification-z'
   | '--cd-overflow-list-focus-ring'
@@ -382,6 +395,7 @@ export type TokenKey =
   | '--cd-popconfirm-shadow'
   | '--cd-popconfirm-title-color'
   | '--cd-popconfirm-title-size'
+  | '--cd-popconfirm-title-weight'
   | '--cd-popconfirm-z'
   | '--cd-popover-*'
   | '--cd-progress-circle-size-default'
@@ -399,9 +413,6 @@ export type TokenKey =
   | '--cd-progress-track-color'
   | '--cd-progress-transition'
   | '--cd-radio-*'
-  | '--cd-radius-1'
-  | '--cd-radius-full'
-  | '--cd-radius-small'
   | '--cd-rating-*'
   | '--cd-scrolllist-border-color'
   | '--cd-scrolllist-color-text'
@@ -417,7 +428,7 @@ export type TokenKey =
   | '--cd-scrolllist-transition'
   | '--cd-select-*'
   | '--cd-select-dropdown-*'
-  | '--cd-shadow-1'
+  | '--cd-shadow-elevated'
   | '--cd-sidesheet-bg'
   | '--cd-sidesheet-border'
   | '--cd-sidesheet-close-color'
@@ -454,8 +465,8 @@ export type TokenKey =
   | '--cd-space-medium'
   | '--cd-space-tight'
   | '--cd-spacing-*'
-  | '--cd-spacing-1'
-  | '--cd-spacing-2'
+  | '--cd-spacing-extra-tight'
+  | '--cd-spacing-tight'
   | '--cd-spin-color'
   | '--cd-spin-duration'
   | '--cd-spin-duration-reduced'
@@ -495,6 +506,8 @@ export type TokenKey =
   | '--cd-tag-height-large'
   | '--cd-tag-height-small'
   | '--cd-tag-padding-x'
+  | '--cd-tag-padding-y'
+  | '--cd-tag-padding-y-large'
   | '--cd-tag-radius'
   | '--cd-time-picker-*'
   | '--cd-timeline-*'
@@ -511,6 +524,7 @@ export type TokenKey =
   | '--cd-toast-color-text'
   | '--cd-toast-color-text-dark'
   | '--cd-toast-font-size'
+  | '--cd-toast-font-weight'
   | '--cd-toast-gap'
   | '--cd-toast-max-width'
   | '--cd-toast-min-width'
@@ -542,10 +556,12 @@ export type TokenKey =
   | '--cd-typography-action-color'
   | '--cd-typography-action-color-hover'
   | '--cd-typography-code-bg'
+  | '--cd-typography-code-color'
   | '--cd-typography-code-font-size'
   | '--cd-typography-color'
   | '--cd-typography-color-link'
   | '--cd-typography-color-link-hover'
+  | '--cd-typography-color-quaternary'
   | '--cd-typography-color-secondary'
   | '--cd-typography-color-tertiary'
   | '--cd-typography-font-size-default'