@chenzy-design/svelte 0.3.0 → 0.4.1

package/dist/back-top/meta.js

@@ -1,107 +1,47 @@
 /**
  * Machine-readable component metadata for AI/docs consumption.
- * BackTop — see specs/components/other/BackTop.spec.md
+ * BackTop — 严格对齐 Semi backtop/index.tsx（BackTopProps 7 prop）。
  */
 export const meta = {
     name: 'BackTop',
-    category: 'other',
-    description: '回到顶部悬浮按钮：滚动超阈值显隐 + 平滑缓动(easeInOutCubic)回顶，三尺寸(small/default/large)，原生 button 支持 Enter/Space，prefers-reduced-motion 下瞬时回顶，RTL 友好(inset-inline-end)。默认监听 window 滚动，可经 target 指定自定义滚动容器；支持受控 visible 与 announceOnArrive 到顶 ARIA live 播报。',
+    category: 'navigation',
+    description: '回到顶部悬浮按钮：滚动超过 visibilityHeight(默认 400px) 时显现、点击平滑缓动(easeInOutCubic, duration 默认 450ms)滚回顶部；默认监听 window，可经 target 指定自定义滚动容器；默认渲染 IconButton(theme="light") + IconChevronUp，可用 children 完全自定义。严格对齐 Semi。',
     exports: ['BackTop'],
     props: [
         {
             name: 'target',
-            type: '() => HTMLElement | string | Window | null',
-            default: 'undefined',
-            desc: '监听并回顶的滚动容器，返回元素/CSS 选择器/window；不传监听 window',
-        },
-        {
-            name: 'visible',
-            type: 'boolean',
-            default: 'undefined',
-            desc: '受控显隐：传入则由外部控制按钮显隐（仅读不回写），不传按 visibilityHeight 自动',
-        },
-        {
-            name: 'announceOnArrive',
-            type: 'boolean',
-            default: 'false',
-            desc: '回到顶部后经 ARIA live region 播报（文案取 locale BackTop.arrived）',
+            type: '() => HTMLElement | Window | null',
+            default: '() => window',
+            desc: '返回需要监听其滚动事件的元素对应 DOM 元素的函数（对齐 Semi）',
         },
         {
             name: 'visibilityHeight',
             type: 'number',
             default: '400',
-            desc: '滚动超过此高度(px)显示按钮',
-        },
-        { name: 'duration', type: 'number', default: '450', desc: '回顶动画时长(ms)，0 瞬时' },
-        { name: 'bottom', type: 'number|string', default: '40', desc: '距底偏移，number→px' },
-        {
-            name: 'right',
-            type: 'number|string',
-            default: '40',
-            desc: '距 inline-end 偏移，number→px',
-        },
-        { name: 'size', type: "'small'|'default'|'large'", default: "'default'" },
-        { name: 'ariaLabel', type: 'string', default: "'回到顶部'", desc: '无障碍标签' },
-        {
-            name: 'icon',
-            type: 'Snippet<[{ size }]>',
-            default: 'undefined',
-            desc: '替换图标(保留圆形按钮外壳)',
+            desc: '出现 BackTop 需要达到的滚动高度(px)',
         },
+        { name: 'duration', type: 'number', default: '450', desc: '滚动到顶部的时间(ms)' },
+        { name: 'onClick', type: '(e: MouseEvent) => void', default: 'undefined', desc: '点击事件的回调函数' },
         {
             name: 'children',
-            type: 'Snippet<[{ visible }]>',
-            default: 'undefined',
-            desc: '完全自定义按钮内容',
-        },
-        { name: 'onClick', type: '(e: MouseEvent) => void', default: 'undefined' },
-        {
-            name: 'onVisibleChange',
-            type: '(info: { visible: boolean }) => void',
-            default: 'undefined',
-            desc: '显隐切换通知',
-        },
-        {
-            name: 'onScrollEnd',
-            type: '() => void',
+            type: 'Snippet',
             default: 'undefined',
-            desc: '回顶动画结束通知',
+            desc: '自定义按钮内容（替换默认 IconButton）',
         },
-        { name: 'class', type: 'string', default: "''" },
-    ],
-    events: [
-        { name: 'onClick', desc: '按钮点击' },
-        { name: 'onVisibleChange', desc: '显隐切换' },
-        { name: 'onScrollEnd', desc: '回顶动画结束' },
-    ],
-    slots: [
-        { name: 'children', desc: '完全自定义按钮内容，入参 { visible }' },
-        { name: 'icon', desc: '替换默认图标，入参 { size }，保留圆形按钮外壳' },
+        { name: 'style', type: 'string', default: "''", desc: '根节点内联样式' },
+        { name: 'class', type: 'string', default: "''", desc: '根节点类名' },
     ],
+    events: [{ name: 'onClick', desc: '按钮点击' }],
+    slots: [{ name: 'children', desc: '自定义按钮内容，替换默认 IconButton' }],
     a11y: {
         hasRole: true,
         focusable: true,
-        note: '原生 button 自带 button role + Enter/Space 触发；aria-label 文本；隐藏态 aria-hidden=true + tabindex=-1 移出 Tab 序与 a11y 树；focus-visible 焦点环。',
+        note: '对齐 Semi：外层 div.cd-back-top 为可点击容器，真实按钮语义/键盘可聚焦/可访问名（locale BackTop.ariaLabel）由内部 IconButton(theme="light") 承担；不可见时不在 DOM。',
     },
-    tokens: [
-        '--cd-backtop-size',
-        '--cd-backtop-size-small',
-        '--cd-backtop-size-large',
-        '--cd-backtop-bg',
-        '--cd-backtop-bg-hover',
-        '--cd-backtop-bg-active',
-        '--cd-backtop-color',
-        '--cd-backtop-border',
-        '--cd-backtop-shadow',
-        '--cd-backtop-radius',
-        '--cd-backtop-z',
-        '--cd-backtop-focus-ring',
-        '--cd-backtop-motion-duration',
-    ],
+    tokens: ['--cd-backtop-z', '--cd-backtop-right', '--cd-backtop-bottom'],
     responsive: false,
     examples: [
-        { title: '基础', code: '<BackTop />' },
-        { title: '小尺寸', code: '<BackTop size="small" />' },
-        { title: '自定义偏移', code: '<BackTop bottom={80} right={24} />' },
+        { title: '基本用法', code: '<BackTop />' },
+        { title: '自定义样式', code: '<BackTop style="...">{icon}</BackTop>' },
     ],
 };

package/dist/badge/Badge.svelte

@@ -1,331 +1,269 @@
 <!--
-  Badge — see specs/components/show/Badge.spec.md
-  Wrapper-mode count/dot superscript OR standalone status dot.
+  Badge — 对齐 Semi Design Badge。
+  在宿主元素角落展示 count/dot 徽标；count 为节点时直接渲染（custom）；无 children 时独立使用（block）。
 -->
 <script lang="ts">
   import type { Snippet } from 'svelte';
 
-  type BadgeType =
-    | 'primary'
-    | 'secondary'
-    | 'tertiary'
-    | 'success'
-    | 'warning'
-    | 'danger';
-  type BadgeTheme = 'solid' | 'light';
-  type BadgePosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
-  type BadgeSize = 'small' | 'default';
-  type BadgeStatus = 'default' | 'success' | 'processing' | 'error' | 'warning';
+  type BadgeType = 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'success';
+  type BadgeTheme = 'solid' | 'light' | 'inverted';
+  type BadgePosition = 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
 
   interface Props {
-    count?: number | string;
+    /** 徽标内容；数字/字符串按 overflowCount 处理，Snippet 时直接渲染（custom）。 */
+    count?: number | string | Snippet;
+    /** 不展示数字，显示小圆点（优先于 count）。 */
     dot?: boolean;
-    overflowCount?: number;
-    showZero?: boolean;
+    /** 徽标类型（语义色）。 */
     type?: BadgeType;
+    /** 徽标主题。 */
     theme?: BadgeTheme;
+    /** 徽标位置（相对宿主四角）。 */
     position?: BadgePosition;
-    offset?: [number, number];
-    size?: BadgeSize;
-    status?: BadgeStatus;
-    /** count 变化时播放滚动数字动画，默认 true。 */
-    scrollNumberMotion?: boolean;
+    /** 数字溢出阈值，超过显示 `${overflowCount}+`。 */
+    overflowCount?: number;
+    /** 徽标内容区域自定义样式（等价 Semi countStyle；style 优先）。 */
+    countStyle?: string;
+    /** 徽标内容区域自定义类名（等价 Semi countClassName）。 */
+    countClass?: string;
+    /** 徽标内容区域内联样式（等价 Semi style，优先于 countStyle）。 */
+    style?: string;
+    /** 根节点自定义类名。 */
+    class?: string;
+    onClick?: (e: MouseEvent) => void;
+    onMouseEnter?: (e: MouseEvent) => void;
+    onMouseLeave?: (e: MouseEvent) => void;
+    /** 宿主子元素。 */
     children?: Snippet;
-    countContent?: Snippet;
   }
 
   let {
     count,
     dot = false,
-    overflowCount = 99,
-    showZero = false,
-    type = 'danger',
+    type = 'primary',
     theme = 'solid',
-    position = 'top-right',
-    offset = [0, 0],
-    size = 'default',
-    status,
-    scrollNumberMotion = true,
+    position,
+    overflowCount,
+    countStyle,
+    countClass,
+    style,
+    class: className,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
     children,
-    countContent,
   }: Props = $props();
 
-  // count 变化时触发滚动动画。
-  // 注意：prevDisplayCount 不能在声明处用 $state(displayCount) 预填——displayCount
-  // 是下方声明的 $derived，提前读会触发 TDZ（Cannot access 'displayCount' before
-  // initialization）。改为 undefined 起始，首个 effect 跑时再 seed。
-  let motionActive = $state(false);
-  let prevDisplayCount = $state<string | number | undefined>(undefined);
-
-  $effect(() => {
-    const current = displayCount;
-    if (!scrollNumberMotion || dot || !showCount) return;
-    if (current !== prevDisplayCount) {
-      prevDisplayCount = current;
-      motionActive = false;
-      // 用微任务触发重排，确保 class 移除后再加回来
-      Promise.resolve().then(() => {
-        motionActive = true;
-      });
-    }
-  });
-
-  const isNumber = $derived(typeof count === 'number');
+  // count 为 Snippet（节点）时视为 custom：不套用 type/theme 语义样式，直接渲染。
+  const isSnippet = $derived(typeof count === 'function');
+  const custom = $derived(count != null && isSnippet);
+  const showBadge = $derived(count != null);
 
-  // displayed count text (overflow handling)
-  const displayCount = $derived.by(() => {
+  // 数字溢出格式化（对齐 Semi：overflowCount && overflowCount < count → `${overflowCount}+`）。
+  const content = $derived.by(() => {
     if (typeof count === 'number') {
-      return count > overflowCount ? `${overflowCount}+` : String(count);
+      return overflowCount && overflowCount < count ? `${overflowCount}+` : `${count}`;
     }
-    return count ?? '';
+    return count;
   });
 
-  // whether a numeric/text count badge should be shown
-  const showCount = $derived.by(() => {
-    if (dot) return true;
-    if (countContent) return true;
-    if (isNumber) {
-      if (count === 0 && !showZero) return false;
-      return true;
-    }
-    return count !== undefined && count !== '';
-  });
-
-  // standalone status-dot mode: status set and no wrapped children
-  const standalone = $derived(status !== undefined && !children);
+  // count 为 Snippet 时的渲染句柄（isSnippet 保证类型）。
+  const countSnippet = $derived(isSnippet ? (count as Snippet) : undefined);
 
-  const statusColor = $derived(
-    status === 'success'
-      ? 'var(--cd-color-success)'
-      : status === 'error'
-        ? 'var(--cd-color-danger)'
-        : status === 'warning'
-          ? 'var(--cd-color-warning)'
-          : status === 'processing'
-            ? 'var(--cd-color-primary)'
-            : 'var(--cd-color-text-3)',
-  );
-
-  const supStyle = $derived(
-    `inset-block-${position.startsWith('top') ? 'start' : 'end'}:${offset[1]}px;` +
-      `inset-inline-${position.endsWith('right') ? 'end' : 'start'}:${offset[0]}px`,
-  );
+  const resolvedPosition = $derived(position ?? 'rightTop');
 
-  const supCls = $derived(
+  const wrapperCls = $derived(
     [
-      'cd-badge__sup',
-      `cd-badge__sup--${type}`,
-      `cd-badge__sup--${theme}`,
-      `cd-badge__sup--${size}`,
-      `cd-badge__sup--${position}`,
-      dot && 'cd-badge__sup--dot',
-      scrollNumberMotion && motionActive && !dot && 'cd-badge__count--motion',
+      countClass,
+      !custom && `cd-badge-${type}`,
+      !custom && `cd-badge-${theme}`,
+      resolvedPosition && children && `cd-badge-${resolvedPosition}`,
+      !children && 'cd-badge-block',
+      dot && 'cd-badge-dot',
+      !dot && !custom && showBadge && 'cd-badge-count',
+      custom && 'cd-badge-custom',
     ]
       .filter(Boolean)
       .join(' '),
   );
-
-  const supAriaLabel = $derived(dot ? undefined : String(displayCount));
 </script>
 
-{#if standalone}
-  <span class="cd-badge cd-badge--status" role="status">
-    <span
-      class="cd-badge__status-dot"
-      class:cd-badge__status-dot--processing={status === 'processing'}
-      style="background:{statusColor}"
-      aria-hidden="true"
-    ></span>
-    {#if count !== undefined && count !== ''}
-      <span class="cd-badge__status-text">{count}</span>
-    {/if}
-  </span>
-{:else}
-  <span class="cd-badge">
-    {@render children?.()}
-    {#if showCount}
-      <sup class={supCls} style={supStyle} aria-label={supAriaLabel}>
-        {#if dot}
-          <!-- dot only -->
-        {:else if countContent}
-          {@render countContent()}
-        {:else}
-          {displayCount}
-        {/if}
-      </sup>
+<span
+  class={['cd-badge', className].filter(Boolean).join(' ')}
+  onclick={onClick}
+  onmouseenter={onMouseEnter}
+  onmouseleave={onMouseLeave}
+  role="presentation"
+>
+  {@render children?.()}
+  <span class={wrapperCls} style={style || countStyle}>
+    {#if dot}
+      <!-- dot only -->
+    {:else if countSnippet}
+      {@render countSnippet()}
+    {:else}
+      {content}
     {/if}
   </span>
-{/if}
+</span>
 
 <style>
   .cd-badge {
     position: relative;
-    display: inline-flex;
-    line-height: 1;
+    display: inline-block;
   }
-  .cd-badge--status {
-    align-items: center;
-    gap: var(--cd-spacing-tight);
+
+  .cd-badge-dot {
+    box-sizing: border-box;
+    width: var(--cd-width-badge-dot);
+    height: var(--cd-height-badge-dot);
+    border-radius: var(--cd-radius-badge-dot);
+    background-color: var(--cd-color-badge-default-bg-default);
+    border: var(--cd-width-badge-border) var(--cd-color-badge-default-border-default) solid;
+    z-index: var(--cd-z-badge);
   }
 
-  .cd-badge__sup {
-    position: absolute;
-    z-index: 1;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
+  .cd-badge-count {
     box-sizing: border-box;
-    min-inline-size: var(--cd-badge-size);
-    block-size: var(--cd-badge-size);
-    padding-inline: var(--cd-spacing-extra-tight);
-    border-radius: var(--cd-border-radius-full);
-    background: var(--cd-badge-bg);
-    color: var(--cd-badge-color);
-    font-size: var(--cd-badge-font-size);
-    font-weight: var(--cd-font-weight-medium);
-    line-height: 1;
-    white-space: nowrap;
-    box-shadow: 0 0 0 1px var(--cd-color-bg-0);
-  }
-  .cd-badge__sup--small {
-    min-inline-size: var(--cd-badge-size-small);
-    block-size: var(--cd-badge-size-small);
-  }
-  .cd-badge__sup--dot {
-    min-inline-size: var(--cd-badge-dot-size);
-    inline-size: var(--cd-badge-dot-size);
-    block-size: var(--cd-badge-dot-size);
-    padding: 0;
+    height: var(--cd-height-badge-count);
+    min-width: var(--cd-height-badge-count);
+    border-radius: calc(var(--cd-height-badge-count) * 0.5);
+    padding: var(--cd-spacing-badge-count-paddingy) var(--cd-spacing-badge-count-paddingx);
+    background-color: var(--cd-color-badge-default-bg-default);
+    border: var(--cd-width-badge-border) var(--cd-color-badge-default-border-default) solid;
+    z-index: var(--cd-z-badge);
+    text-align: center;
+    font-size: var(--cd-font-size-small);
+    font-weight: var(--cd-font-weight-regular);
+    color: var(--cd-color-badge-default-text-default);
   }
 
-  /* corner placement (default offsets translate over the edge) */
-  .cd-badge__sup--top-right {
-    inset-block-start: 0;
+  .cd-badge-rightTop {
+    position: absolute;
+    top: 0;
     inset-inline-end: 0;
     transform: translate(50%, -50%);
+    transform-origin: 100% 0%;
   }
-  .cd-badge__sup--top-left {
-    inset-block-start: 0;
-    inset-inline-start: 0;
-    transform: translate(-50%, -50%);
-  }
-  .cd-badge__sup--bottom-right {
-    inset-block-end: 0;
+  .cd-badge-rightBottom {
+    position: absolute;
     inset-inline-end: 0;
+    bottom: 0;
     transform: translate(50%, 50%);
+    transform-origin: 100% 0%;
   }
-  .cd-badge__sup--bottom-left {
-    inset-block-end: 0;
+  .cd-badge-leftTop {
+    position: absolute;
+    top: 0;
+    inset-inline-start: 0;
+    transform: translate(-50%, -50%);
+    transform-origin: 100% 0%;
+  }
+  .cd-badge-leftBottom {
+    position: absolute;
+    bottom: 0;
     inset-inline-start: 0;
     transform: translate(-50%, 50%);
+    transform-origin: 100% 0%;
   }
 
-  /* type → semantic color (solid) */
-  .cd-badge__sup--solid.cd-badge__sup--primary {
-    background: var(--cd-color-primary);
-    color: var(--cd-color-text-inverse);
+  /* RTL：镜像水平平移（inset-inline 已处理锚点，transform 的 x 需翻向） */
+  :global([dir='rtl']) .cd-badge-rightTop,
+  :global([dir='rtl']) .cd-badge-rightBottom {
+    transform: translate(-50%, var(--cd-badge-ty));
   }
-  .cd-badge__sup--solid.cd-badge__sup--secondary {
-    background: var(--cd-color-text-2);
-    color: var(--cd-color-text-inverse);
+  :global([dir='rtl']) .cd-badge-leftTop,
+  :global([dir='rtl']) .cd-badge-leftBottom {
+    transform: translate(50%, var(--cd-badge-ty));
   }
-  .cd-badge__sup--solid.cd-badge__sup--tertiary {
-    background: var(--cd-color-text-3);
-    color: var(--cd-color-text-inverse);
+  .cd-badge-rightTop,
+  .cd-badge-leftTop {
+    --cd-badge-ty: -50%;
   }
-  .cd-badge__sup--solid.cd-badge__sup--success {
-    background: var(--cd-color-success);
-    color: var(--cd-color-text-inverse);
+  .cd-badge-rightBottom,
+  .cd-badge-leftBottom {
+    --cd-badge-ty: 50%;
   }
-  .cd-badge__sup--solid.cd-badge__sup--warning {
-    background: var(--cd-color-warning);
-    color: var(--cd-color-text-inverse);
+
+  .cd-badge-custom {
+    display: flex;
   }
-  .cd-badge__sup--solid.cd-badge__sup--danger {
-    background: var(--cd-color-danger);
-    color: var(--cd-color-text-inverse);
+
+  .cd-badge-block {
+    position: static;
+    display: inline-block;
   }
 
-  /* light theme: tinted background + colored text */
-  .cd-badge__sup--light.cd-badge__sup--primary {
-    background: color-mix(in srgb, var(--cd-color-primary) 16%, var(--cd-color-bg-0));
-    color: var(--cd-color-primary);
+  /* ── type × theme ── */
+  .cd-badge-primary.cd-badge-solid {
+    background-color: var(--cd-color-badge-primary-solid-bg-default);
+    color: var(--cd-color-white);
   }
-  .cd-badge__sup--light.cd-badge__sup--secondary {
-    background: var(--cd-color-fill-0);
-    color: var(--cd-color-text-1);
+  .cd-badge-primary.cd-badge-light {
+    background-color: var(--cd-color-badge-primary-light-bg-default);
+    color: var(--cd-color-badge-primary-light-text-default);
   }
-  .cd-badge__sup--light.cd-badge__sup--tertiary {
-    background: var(--cd-color-fill-1);
-    color: var(--cd-color-text-2);
+  .cd-badge-primary.cd-badge-inverted {
+    color: var(--cd-color-badge-primary-inverted-text-default);
   }
-  .cd-badge__sup--light.cd-badge__sup--success {
-    background: color-mix(in srgb, var(--cd-color-success) 16%, var(--cd-color-bg-0));
-    color: var(--cd-color-success);
+
+  .cd-badge-secondary.cd-badge-solid {
+    background-color: var(--cd-color-badge-secondary-solid-bg-default);
+    color: var(--cd-color-white);
   }
-  .cd-badge__sup--light.cd-badge__sup--warning {
-    background: color-mix(in srgb, var(--cd-color-warning) 16%, var(--cd-color-bg-0));
-    color: var(--cd-color-warning);
+  .cd-badge-secondary.cd-badge-light {
+    background-color: var(--cd-color-badge-secondary-light-bg-default);
+    color: var(--cd-color-badge-secondary-light-text-default);
   }
-  .cd-badge__sup--light.cd-badge__sup--danger {
-    background: color-mix(in srgb, var(--cd-color-danger) 16%, var(--cd-color-bg-0));
-    color: var(--cd-color-danger);
+  .cd-badge-secondary.cd-badge-inverted {
+    color: var(--cd-color-badge-secondary-inverted-text-default);
   }
 
-  /* standalone status dot */
-  .cd-badge__status-dot {
-    display: inline-block;
-    inline-size: var(--cd-badge-dot-size);
-    block-size: var(--cd-badge-dot-size);
-    border-radius: var(--cd-border-radius-full);
-    flex: 0 0 auto;
+  .cd-badge-tertiary.cd-badge-solid {
+    background-color: var(--cd-color-badge-tertiary-solid-bg-default);
+    color: var(--cd-color-white);
   }
-  .cd-badge__status-dot--processing {
-    position: relative;
+  .cd-badge-tertiary.cd-badge-light {
+    background-color: var(--cd-color-badge-tertiary-light-bg-default);
+    color: var(--cd-color-badge-tertiary-light-text-default);
   }
-  .cd-badge__status-dot--processing::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    border-radius: inherit;
-    background: inherit;
-    animation: cd-badge-pulse 1.2s ease-in-out infinite;
+  .cd-badge-tertiary.cd-badge-inverted {
+    color: var(--cd-color-badge-tertiary-inverted-text-default);
   }
-  .cd-badge__status-text {
-    color: var(--cd-color-text-1);
-    font-size: var(--cd-font-size-regular);
+
+  .cd-badge-danger.cd-badge-solid {
+    background-color: var(--cd-color-badge-danger-solid-bg-default);
+    color: var(--cd-color-white);
+  }
+  .cd-badge-danger.cd-badge-light {
+    background-color: var(--cd-color-badge-danger-light-bg-default);
+    color: var(--cd-color-badge-danger-light-text-default);
+  }
+  .cd-badge-danger.cd-badge-inverted {
+    color: var(--cd-color-badge-danger-inverted-text-default);
   }
 
-  @keyframes cd-badge-pulse {
-    0% {
-      transform: scale(1);
-      opacity: 0.6;
-    }
-    100% {
-      transform: scale(2.4);
-      opacity: 0;
-    }
+  .cd-badge-warning.cd-badge-solid {
+    background-color: var(--cd-color-badge-warning-solid-bg-default);
+    color: var(--cd-color-white);
   }
-  @keyframes cd-badge-count-up {
-    from {
-      transform: translateY(100%);
-      opacity: 0;
-    }
-    to {
-      transform: translateY(0);
-      opacity: 1;
-    }
+  .cd-badge-warning.cd-badge-light {
+    background-color: var(--cd-color-badge-warning-light-bg-default);
+    color: var(--cd-color-badge-warning-light-text-default);
   }
-  :global(.cd-badge__count--motion) {
-    animation: cd-badge-count-up 0.2s var(--cd-motion-ease-standard, ease) both;
+  .cd-badge-warning.cd-badge-inverted {
+    color: var(--cd-color-badge-warning-inverted-text-default);
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    .cd-badge__status-dot--processing::after {
-      animation: none;
-    }
-    :global(.cd-badge__count--motion) {
-      animation: none;
-    }
+  .cd-badge-success.cd-badge-solid {
+    background-color: var(--cd-color-badge-success-solid-bg-default);
+    color: var(--cd-color-white);
+  }
+  .cd-badge-success.cd-badge-light {
+    background-color: var(--cd-color-badge-success-light-bg-default);
+    color: var(--cd-color-badge-success-light-text-default);
+  }
+  .cd-badge-success.cd-badge-inverted {
+    color: var(--cd-color-badge-success-inverted-text-default);
   }
 </style>