@daikin-oss/design-system-web-components 0.6.0 → 0.7.0

package/dist/es-dev/components/link/daikin-link.js

@@ -14,31 +14,20 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 const LINK_CLASS_NAME = cva([
-  "flex",
-  "justify-center",
-  "items-center",
-  "gap-0.5",
-  "size-fit",
   "font-daikinSerif",
-  "rounded-[1px]",
   "relative",
-  "link-enabled:text-system-state-link-active",
-  "link-enabled:hover:text-system-state-link-hover",
-  "link-enabled:hover:bg-system-state-link-surface-hover",
-  "link-enabled:active:text-system-state-link-press",
-  "link-disabled:text-system-state-disabled",
-  "focus-visible:outline-none",
-  "focus-visible:before:block",
-  "focus-visible:before:rounded-none",
-  "focus-visible:before:absolute",
-  "focus-visible:before:inset-[-1px]",
-  "focus-visible:before:outline",
-  "focus-visible:before:outline-system-state-focus",
-  "focus-visible:before:outline-2",
-  "after:h-[1px]",
-  "after:absolute",
-  "after:inset-[auto_0_0_0]",
-  "after:bg-current"
+  "border-b",
+  "border-b-current",
+  "link-enabled:text-ddt-color-link-text-default",
+  "link-enabled:hover:text-ddt-color-link-text-hover",
+  "link-enabled:hover:bg-ddt-color-common-surface-brand-hover",
+  "link-enabled:active:text-ddt-color-link-text-press",
+  "link-enabled:active:bg-ddt-color-common-surface-brand-press",
+  "link-disabled:text-ddt-color-common-disabled",
+  "focus-visible:outline",
+  "focus-visible:outline-2",
+  "focus-visible:outline-ddt-color-common-border-focus",
+  "focus-visible:outline-offset-1"
 ])();
 let DaikinLink = class extends LitElement {
   constructor() {
@@ -49,43 +38,36 @@ let DaikinLink = class extends LitElement {
     this.showVisited = false;
   }
   render() {
-    return html`
-      <a
-        class=${LINK_CLASS_NAME}
-        href=${ifDefined(this.disabled ? void 0 : this.href ?? void 0)}
-        target=${ifDefined(this.target ?? void 0)}
-        aria-disabled=${ifDefined(this.disabled ? "true" : void 0)}
-      >
-        <slot name="left-icon" class="icon-size-4"></slot>
-        <slot></slot>
-        <slot name="right-icon" class="icon-size-4"></slot>
-      </a>
-    `;
+    return html`<a
+      class=${LINK_CLASS_NAME}
+      href=${ifDefined(this.disabled ? void 0 : this.href ?? void 0)}
+      target=${ifDefined(this.target ?? void 0)}
+      aria-disabled=${ifDefined(this.disabled ? "true" : void 0)}
+      ><span class="inline-flex mr-[0.125rem] align-sub">
+        <slot name="left-icon" class="icon-size-4"
+          ><span class="-mr-[0.125rem]"></span></slot></span
+      ><slot></slot
+      ><span class="inline-flex ml-[0.125rem] align-sub"
+        ><slot name="right-icon" class="icon-size-4"
+          ><span class="-ml-[0.125rem]"></span></slot></span
+    ></a>`;
   }
 };
 DaikinLink.styles = css`
     ${unsafeCSS(tailwindStyles)}
 
-    :host {
-      display: block;
-      width: fit-content;
-      height: fit-content;
-    }
-
     :host([show-visited]:not([disabled])) a:visited {
-      color: #5c2365; /* system-state-visited-active */
-    }
-
-    :host([show-visited]:not([disabled])) a:hover:visited {
-      color: #4a1c51; /* system-state-visited-hover */
+      color: var(--dds-color-link-text-visited-default);
     }
 
-    :host([show-visited]:not([disabled])) a:hover:visited {
-      background-color: #f0ddf3; /* system-state-visited-hover */
+    :host([show-visited]:not([disabled])) a:visited:hover {
+      color: var(--dds-color-link-text-visited-hover);
+      background-color: var(--dds-color-link-surface-visited-hover);
     }
 
-    :host([show-visited]:not([disabled])) a:active:visited {
-      color: #37153d; /* system-state-visited-press */
+    :host([show-visited]:not([disabled])) a:visited:active {
+      color: var(--dds-color-link-text-visited-press);
+      background-color: var(--dds-color-link-surface-visited-press);
     }
   `;
 __decorateClass([

package/dist/es-dev/components/list-item/daikin-list-item.js

@@ -23,18 +23,18 @@ const INNER_CN = cva([
   "focus-visible:before:outline",
   "focus-visible:before:outline-2",
   "focus-visible:before:-outline-offset-2",
-  "focus-visible:before:outline-system-state-focus",
+  "focus-visible:before:outline-ddt-color-common-border-focus",
   // For buttons and links
-  "link-enabled:before:group-hover:[&:not(:active)]:bg-system-background-surface-hover",
-  "link-enabled:before:active:bg-system-background-surface-press",
+  "link-enabled:before:group-hover:[&:not(:active)]:bg-ddt-color-common-surface-hover",
+  "link-enabled:before:active:bg-ddt-color-common-surface-press",
   // For text
-  "[&:not(a,button)]:before:group-hover:bg-system-background-surface-hover"
+  "[&:not(a,button)]:before:group-hover:bg-ddt-color-common-surface-hover"
 ])();
 const cvaContent = cva(["block", "pl-2", "pr-3", "text-left"], {
   variants: {
     disabled: {
-      false: ["text-system-element-text-primary"],
-      true: ["text-system-state-disabled"]
+      false: ["text-ddt-color-common-text-primary"],
+      true: ["text-ddt-color-common-disabled"]
     }
   }
 });
@@ -45,8 +45,8 @@ const cvaIcon = cva(["icon-size-6"], {
       right: ["pointer-events-none"]
     },
     disabled: {
-      false: ["text-system-element-text-primary"],
-      true: ["text-system-state-disabled"]
+      false: ["text-ddt-color-common-text-primary"],
+      true: ["text-ddt-color-common-disabled"]
     }
   }
 });

package/dist/es-dev/components/notification/daikin-notification.js

@@ -1,4 +1,3 @@
-import { colorFeedbackPositive, colorFeedbackWarning, colorFeedbackNegative } from "@daikin-oss/dds-tokens/js/daikin/Light/variables.js";
 import { cva } from "class-variance-authority";
 import { css, unsafeCSS, LitElement, html, nothing } from "lit";
 import { property, customElement } from "lit/decorators.js";
@@ -15,7 +14,13 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 const cvaContainer = cva(
-  ["flex", "box-border", "bg-white", "overflow-hidden", "font-daikinSerif"],
+  [
+    "flex",
+    "box-border",
+    "bg-ddt-color-common-background-default",
+    "overflow-hidden",
+    "font-daikinSerif"
+  ],
   {
     variants: {
       variant: {
@@ -28,11 +33,11 @@ const cvaContainer = cva(
         inline: []
       },
       status: {
-        positive: ["border-[--colorFeedbackPositive]"],
-        negative: ["border-[--colorFeedbackNegative]"],
-        warning: ["border-[--colorFeedbackWarning]"],
-        alarm: ["border-[--colorFeedbackAlarm]"],
-        information: ["border-[--colorFeedbackInformation]"]
+        positive: ["border-ddt-color-common-success"],
+        negative: ["border-ddt-color-common-danger-default"],
+        warning: ["border-ddt-color-common-warning"],
+        alarm: ["border-ddt-color-common-alarm"],
+        information: ["border-ddt-color-common-information"]
       }
     },
     defaultVariants: {
@@ -49,26 +54,26 @@ const cvaIconContainer = cva(
     "items-center",
     "w-[2.75rem]",
     "after:size-6",
-    "after:text-white"
+    "after:text-ddt-color-common-background-default"
   ],
   {
     variants: {
       status: {
         positive: [
-          "bg-[--colorFeedbackPositive]",
+          "bg-ddt-color-common-success",
           "after:i-daikin-status-positive"
         ],
         negative: [
-          "bg-[--colorFeedbackNegative]",
+          "bg-ddt-color-common-danger-default",
           "after:i-daikin-status-negative"
         ],
         warning: [
-          "bg-[--colorFeedbackWarning]",
+          "bg-ddt-color-common-warning",
           "after:i-daikin-status-warning"
         ],
-        alarm: ["bg-[--colorFeedbackAlarm]", "after:i-daikin-status-alarm"],
+        alarm: ["bg-ddt-color-common-alarm", "after:i-daikin-status-alarm"],
         information: [
-          "bg-[--colorFeedbackInformation]",
+          "bg-ddt-color-common-information",
           "after:i-daikin-status-information"
         ]
       }
@@ -158,12 +163,6 @@ DaikinNotification.styles = css`
     ${unsafeCSS(tailwindStyles)}
 
     :host {
-      --colorFeedbackPositive: ${unsafeCSS(colorFeedbackPositive)};
-      --colorFeedbackWarning: ${unsafeCSS(colorFeedbackWarning)};
-      --colorFeedbackNegative: ${unsafeCSS(colorFeedbackNegative)};
-      --colorFeedbackAlarm: #f68c54;
-      --colorFeedbackInformation: #0097e0;
-
       display: block;
     }
 

package/dist/es-dev/components/pagination/daikin-pagination.js

@@ -32,20 +32,20 @@ const cvaPageButton = cva(
     "focus-visible:outline",
     "focus-visible:outline-2",
     "focus-visible:outline-offset-1",
-    "focus-visible:outline-[#0081C0]"
+    "focus-visible:outline-ddt-color-common-border-focus"
   ],
   {
     variants: {
       active: {
         true: [
-          "text-daikinBlue-500",
-          "focus-visible:text-daikinBlue-500",
+          "text-ddt-color-common-brand-default",
+          "focus-visible:text-ddt-color-common-brand-default",
           "font-bold",
-          "hover:text-[#0081C0]",
-          "hover:bg-[#DDF3FC]",
-          "active:text-[#00689A]",
-          "active:bg-[#BBE7F9]",
-          "after:bg-daikinBlue-500",
+          "hover:text-ddt-color-common-border-focus",
+          "hover:bg-ddt-color-common-surface-selected-default",
+          "active:text-ddt-color-common-brand-press",
+          "active:bg-ddt-color-common-surface-selected-press",
+          "after:bg-ddt-color-common-brand-default",
           "after:content-['']",
           "after:h-1",
           "after:absolute",
@@ -53,13 +53,12 @@ const cvaPageButton = cva(
           "after:top-auto"
         ],
         false: [
-          "text-inherit",
           "font-normal",
-          "text-daikinNeutral-700",
-          "active:bg-daikinNeutral-100",
-          "active:text-daikinNeutral-800",
-          "hover:bg-[#F2F2F2]",
-          "hover:text-[#515151]"
+          "text-ddt-color-common-neutral-default",
+          "active:bg-ddt-color-common-surface-neutral-press",
+          "active:text-ddt-color-common-text-primary",
+          "hover:bg-ddt-color-common-surface-neutral-hover",
+          "hover:text-ddt-color-common-neutral-hover"
         ]
       }
     }
@@ -67,7 +66,6 @@ const cvaPageButton = cva(
 );
 const cvaEllipsis = cva([
   "relative",
-  "text-inherit",
   "border-0",
   "no-underline",
   "flex",
@@ -79,10 +77,10 @@ const cvaEllipsis = cva([
   "text-base",
   "not-italic",
   "font-normal",
-  "leading-6"
+  "leading-6",
+  "text-ddt-color-common-neutral-default"
 ]);
 const cvaChevronButton = cva([
-  "text-inherit",
   "border-0",
   "no-underline",
   "flex",
@@ -90,21 +88,21 @@ const cvaChevronButton = cva([
   "justify-center",
   "w-12",
   "h-12",
-  "text-[#515151]",
+  "text-ddt-color-common-neutral-default",
   "font-daikinSerif",
   "text-base",
   "not-italic",
   "font-normal",
   "leading-6",
-  "enabled:hover:bg-[#F2F2F2]",
-  "enabled:hover:text-daikinNeutral-800",
-  "enabled:active:bg-daikinNeutral-100",
-  "enabled:active:text-daikinNeutral-900",
-  "disabled:!text-daikinNeutral-400",
+  "enabled:hover:bg-ddt-color-common-surface-neutral-hover",
+  "enabled:hover:text-ddt-color-common-neutral-hover",
+  "enabled:active:bg-ddt-color-common-surface-neutral-press",
+  "enabled:active:text-ddt-color-common-neutral-press",
+  "disabled:!text-ddt-color-common-disabled",
   "focus-visible:outline",
   "focus-visible:outline-2",
   "focus-visible:outline-offset-1",
-  "focus-visible:outline-[#0081C0]"
+  "focus-visible:outline-ddt-color-common-border-focus"
 ]);
 let DaikinPagination = class extends LitElement {
   constructor() {

package/dist/es-dev/components/progress-bar/daikin-progress-bar.js

@@ -15,7 +15,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 const cvaBar = cva(
   [
     "w-full",
-    "bg-daikinNeutral-200",
+    "bg-ddt-color-common-disabled",
     "overflow-hidden",
     "relative",
     "after:block",
@@ -26,14 +26,17 @@ const cvaBar = cva(
   {
     variants: {
       variant: {
-        inprogress: ["after:w-[--bar-width]", "after:bg-daikinBlue-500"],
-        completed: ["after:w-full", "after:bg-daikinGreen-500"],
+        inprogress: [
+          "after:w-[--bar-width]",
+          "after:bg-ddt-color-common-brand-default"
+        ],
+        completed: ["after:w-full", "after:bg-ddt-color-common-success"],
         indeterminate: [
           "after:w-1/2",
-          "after:bg-daikinBlue-500",
+          "after:bg-ddt-color-common-brand-default",
           "after:animate-[progress-bar-indeterminate_1200ms_linear_infinite]"
         ],
-        error: ["after:w-full", "after:bg-daikinRed-500"]
+        error: ["after:w-full", "after:bg-ddt-color-common-danger-default"]
       },
       size: {
         medium: ["h-1"],
@@ -43,20 +46,27 @@ const cvaBar = cva(
   }
 );
 const cvaBarContainer = cva(
-  ["flex", "justify-between", "items-center", "leading-5", "font-bold"],
+  [
+    "flex",
+    "justify-between",
+    "items-center",
+    "text-ddt-color-common-text-primary",
+    "leading-5",
+    "font-bold"
+  ],
   {
     variants: {
       variant: {
         inprogress: [],
         completed: [
           "after:size-4",
-          "after:text-daikinGreen-500",
+          "after:bg-ddt-color-common-success",
           "after:i-daikin-status-positive"
         ],
         indeterminate: [],
         error: [
           "after:size-4",
-          "after:text-daikinRed-500",
+          "after:text-ddt-color-common-danger-default",
           "after:i-daikin-status-error"
         ]
       }
@@ -66,10 +76,10 @@ const cvaBarContainer = cva(
 const cvaHelper = cva(["text-sm"], {
   variants: {
     variant: {
-      inprogress: [],
-      completed: [],
-      indeterminate: [],
-      error: ["text-daikinRed-500", "font-bold"]
+      inprogress: ["text-ddt-color-common-text-primary"],
+      completed: ["text-ddt-color-common-text-primary"],
+      indeterminate: ["text-ddt-color-common-text-primary"],
+      error: ["text-ddt-color-common-danger-default", "font-bold"]
     },
     visible: {
       false: ["hidden"],

package/dist/es-dev/components/progress-indicator/daikin-progress-indicator.js

@@ -1,4 +1,3 @@
-import { colorFeedbackNegative } from "@daikin-oss/dds-tokens/js/daikin/Light/variables.js";
 import { css, unsafeCSS, LitElement, html } from "lit";
 import { property, queryAssignedElements, customElement } from "lit/decorators.js";
 import tailwindStyles from "../../tailwind.css.js";
@@ -45,7 +44,7 @@ let DaikinProgressIndicator = class extends LitElement {
   }
   render() {
     return html`<div
-      class="flex justify-stretch items-start w-full font-daikinSerif"
+      class="flex justify-stretch items-start gap-2 w-full font-daikinSerif"
       role="list"
     >
       <slot @slotchange=${this._handleSlotChange}></slot>
@@ -64,10 +63,6 @@ DaikinProgressIndicator.styles = css`
     ${unsafeCSS(tailwindStyles)}
 
     :host {
-      --progress-indicator-border-color-error: ${unsafeCSS(
-  colorFeedbackNegative
-)};
-
       display: block;
       width: 100%;
     }

package/dist/es-dev/components/progress-indicator-item/daikin-progress-indicator-item.js

@@ -20,17 +20,18 @@ const cvaContainer = cva(
     "flex-col",
     "gap-1",
     "w-full",
-    "text-system-element-text-primary",
-    "pt-1",
+    "text-ddt-color-common-text-primary",
+    "pt-2",
     "border-t-[0.25rem]",
-    "font-daikinSerif"
+    "font-daikinSerif",
+    "leading-[130%]"
   ],
   {
     variants: {
       status: {
-        unfinished: ["border-system-state-disabled"],
-        inprogress: ["border-system-state-primary-active"],
-        finished: ["border-system-state-primary-active"]
+        unfinished: ["border-ddt-color-common-disabled"],
+        inprogress: ["border-ddt-color-common-brand-default"],
+        finished: ["border-ddt-color-common-brand-default"]
       }
     }
   }
@@ -43,22 +44,21 @@ let DaikinProgressIndicatorItem = class extends LitElement {
   }
   render() {
     return html`<div
-      class=${cvaContainer({
-      status: this.status
-    })}
+      class=${cvaContainer({ status: this.status })}
       role="listitem"
       aria-current=${ifDefined(this.current ? "step" : void 0)}
     >
-      <div class="flex items-center gap-2 font-bold leading-5">
+      <div class="flex justify-between gap-1 font-bold">
         <slot></slot>
         ${this.status === "finished" ? html`
               <span
-                class="size-4 i-daikin-status-success text-system-state-primary-active"
+                role="img"
+                class="flex-none size-4 i-daikin-status-positive text-ddt-color-common-brand-default"
                 aria-label="Completed"
               ></span>
             ` : nothing}
       </div>
-      <slot name="description" class="text-sm leading-[1.1rem]"></slot>
+      <slot name="description" class="text-sm"></slot>
     </div>`;
   }
 };

package/dist/es-dev/components/radio/daikin-radio.js

@@ -24,22 +24,24 @@ const RADIO_CLASS_NAME = cva([
   "focus-visible:outline",
   "focus-visible:outline-2",
   "focus-visible:outline-offset-2",
-  "focus-visible:outline-system-state-focus",
+  "focus-visible:outline-ddt-color-common-border-focus",
   "unchecked:border-2",
-  "enabled:unchecked:border-system-state-neutral-active",
-  "enabled:unchecked:hover:bg-system-background-surface-hover",
-  "enabled:unchecked:active:bg-system-background-surface-press",
+  "enabled:unchecked:border-ddt-color-common-neutral-default",
+  "enabled:unchecked:group-hover:border-ddt-color-common-neutral-hover",
+  "enabled:unchecked:group-active:border-ddt-color-common-neutral-press",
+  "enabled:unchecked:group-hover:bg-ddt-color-common-surface-neutral-hover",
+  "enabled:unchecked:group-active:bg-ddt-color-common-surface-neutral-press",
   "checked:border-[5px]",
-  "enabled:checked:border-system-state-primary-active",
-  "enabled:checked:group-hover:border-system-state-primary-hover",
-  "enabled:checked:group-active:border-system-state-primary-press",
-  "disabled:border-system-state-disabled"
+  "enabled:checked:border-ddt-color-common-brand-default",
+  "enabled:checked:group-hover:border-ddt-color-common-brand-hover",
+  "enabled:checked:group-active:border-ddt-color-common-brand-press",
+  "disabled:border-ddt-color-common-disabled"
 ])();
 const cvaLabel = cva(["pr-2"], {
   variants: {
     disabled: {
-      false: ["text-system-element-text-primary"],
-      true: ["text-system-state-disabled"]
+      false: ["text-ddt-color-common-text-primary"],
+      true: ["text-ddt-color-common-disabled"]
     }
   }
 });

package/dist/es-dev/components/select/daikin-select.js

@@ -48,26 +48,26 @@ const cvaSelect = cva(
     "slotted-[select:focus-visible]:!outline-2",
     "slotted-[select:focus-visible]:!outline-[--color-focus]",
     "slotted-[select:enabled]:!cursor-pointer",
-    "slotted-[select:enabled]:!text-system-element-text-primary",
-    "slotted-[select:enabled:hover]:!bg-system-background-surface-hover",
-    "slotted-[select:enabled:active]:!bg-system-background-surface-press",
-    "slotted-[select:disabled]:!text-system-state-disabled",
-    "slotted-[select:disabled]:!border-system-state-disabled"
+    "slotted-[select:enabled]:!text-ddt-color-common-text-primary",
+    "slotted-[select:enabled:hover]:!bg-ddt-color-common-surface-hover",
+    "slotted-[select:enabled:active]:!bg-ddt-color-common-surface-press",
+    "slotted-[select:disabled]:!text-ddt-color-common-disabled",
+    "slotted-[select:disabled]:!border-ddt-color-common-disabled"
   ],
   {
     variants: {
       disabled: {
-        false: ["after:text-system-element-text-primary"],
-        true: ["after:text-system-state-disabled"]
+        false: ["after:text-ddt-color-common-text-primary"],
+        true: ["after:text-ddt-color-common-disabled"]
       },
       error: {
         false: [
-          "var-color-system-state-neutral-active/color-base",
-          "var-color-system-state-focus/color-focus"
+          "var-color-ddt-color-common-neutral-default/color-base",
+          "var-color-ddt-color-common-border-focus/color-focus"
         ],
         true: [
-          "var-color-system-state-error-active/color-base",
-          "var-color-system-state-error-active/color-focus"
+          "var-color-ddt-color-common-danger-default/color-base",
+          "var-color-ddt-color-common-danger-default/color-focus"
         ]
       }
     }

package/dist/es-dev/components/tab/daikin-tab.js

@@ -34,8 +34,8 @@ const cvaTab = cva(
     "focus-visible:before:z-[1]",
     "focus-visible:before:border",
     "focus-visible:before:border-2",
-    "focus-visible:before:border-system-state-focus",
-    "disabled:text-system-state-disabled",
+    "focus-visible:before:border-ddt-color-common-border-focus",
+    "disabled:text-ddt-color-common-disabled",
     "after:absolute",
     "after:inset-0",
     "after:top-auto"
@@ -44,22 +44,22 @@ const cvaTab = cva(
     variants: {
       active: {
         false: [
-          "enabled:text-system-state-neutral-active",
-          "enabled:hover:text-system-state-neutral-hover",
-          "enabled:hover:bg-system-background-surface-hover",
-          "enabled:active:text-system-state-neutral-press",
-          "enabled:active:bg-system-background-surface-press",
+          "enabled:text-ddt-color-common-neutral-default",
+          "enabled:hover:text-ddt-color-common-neutral-hover",
+          "enabled:hover:bg-ddt-color-common-surface-hover",
+          "enabled:active:text-ddt-color-common-neutral-press",
+          "enabled:active:bg-ddt-color-common-surface-press",
           "after:h-[1px]",
-          "after:bg-system-element-divider-secondary"
+          "after:bg-ddt-color-divider"
         ],
         true: [
           "font-bold",
-          "enabled:text-system-state-primary-active",
-          "enabled:hover:bg-system-state-primary-surface-hover",
-          "enabled:active:bg-system-state-primary-surface-press",
+          "enabled:text-ddt-color-common-brand-default",
+          "enabled:hover:bg-ddt-color-common-surface-brand-hover",
+          "enabled:active:bg-ddt-color-common-surface-brand-press",
           "after:h-1",
-          "enabled:after:bg-system-state-primary-active",
-          "disabled:after:bg-system-state-disabled"
+          "enabled:after:bg-ddt-color-common-brand-default",
+          "disabled:after:bg-ddt-color-common-disabled"
         ]
       }
     }

package/dist/es-dev/components/table/daikin-table.js

@@ -21,19 +21,19 @@ const defaultSort = (a, b, key) => String(a[key]).localeCompare(String(b[key]));
 const cvaRow = cva(
   [
     "border-b",
-    "border-b-system-element-divider-secondary",
+    "border-b-ddt-color-divider",
     "focus-visible:outline",
     "focus-visible:outline-2",
     "focus-visible:-outline-offset-2",
-    "focus-visible:outline-system-state-focus"
+    "focus-visible:outline-ddt-color-common-border-focus"
   ],
   {
     variants: {
       selected: {
-        false: ["hover:bg-system-background-surface-hover"],
+        false: ["hover:bg-ddt-color-common-surface-hover"],
         true: [
-          "bg-system-background-surface-selected",
-          "hover:bg-system-background-surface-selectedHover"
+          "bg-ddt-color-common-surface-selected-default",
+          "hover:bg-ddt-color-common-surface-selected-hover"
         ]
       }
     }
@@ -142,7 +142,7 @@ let DaikinTable = class extends LitElement {
     return html`<div class="flex flex-col gap-6 w-full font-daikinSerif">
       <table class="w-full table-fixed">
         <thead>
-          <tr class="border-b border-b-system-element-divider-primary">
+          <tr class="border-b border-b-ddt-color-divider">
             ${this.selectable ? html`<td class="w-12 p-0">
                   <span
                     class="flex items-center justify-center size-full min-h-12"

package/dist/es-dev/components/table-cell/daikin-table-cell.js

@@ -22,7 +22,7 @@ const cvaCell = cva(
     "min-h-12",
     "px-4",
     "py-3",
-    "text-system-element-text-primary"
+    "text-ddt-color-common-text-primary"
   ],
   {
     variants: {
@@ -44,7 +44,7 @@ let DaikinTableCell = class extends LitElement {
       <slot></slot>
       <slot
         name="subtitle"
-        class="text-system-element-text-secondary text-xs"
+        class="text-ddt-color-common-text-secondary text-xs"
       ></slot>
     </span>`;
   }