@sdata/web-vue 4.7.1 → 5.0.0

package/es/message/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';
@@ -87,3 +88,220 @@ $message-loading-color-icon: global.$color-primary-6;
 $message-loading-color-content: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
 
 $message-loading-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
+
+// @generated runtime tokens — pnpm theme:generate
+$message-wrapper-margin-top: theme-runtime.token(
+  'message',
+  'message-wrapper-margin-top',
+  $message-wrapper-margin-top,
+  'spacing-12'
+);
+$message-wrapper-margin-bottom: theme-runtime.token(
+  'message',
+  'message-wrapper-margin-bottom',
+  $message-wrapper-margin-bottom,
+  'spacing-12'
+);
+$message-padding-top: theme-runtime.token(
+  'message',
+  'message-padding-top',
+  $message-padding-top,
+  'spacing-5'
+);
+$message-padding-bottom: theme-runtime.token(
+  'message',
+  'message-padding-bottom',
+  $message-padding-bottom,
+  'spacing-5'
+);
+$message-padding-left: theme-runtime.token(
+  'message',
+  'message-padding-left',
+  $message-padding-left,
+  'spacing-7'
+);
+$message-padding-right: theme-runtime.token(
+  'message',
+  'message-padding-right',
+  $message-padding-right,
+  'spacing-7'
+);
+$message-margin-bottom: theme-runtime.token(
+  'message',
+  'message-margin-bottom',
+  $message-margin-bottom,
+  'spacing-7'
+);
+$message-border-radius: theme-runtime.token(
+  'message',
+  'message-border-radius',
+  $message-border-radius
+);
+$message-font-size-icon: theme-runtime.token(
+  'message',
+  'message-font-size-icon',
+  $message-font-size-icon
+);
+$message-font-size-content: theme-runtime.token(
+  'message',
+  'message-font-size-content',
+  $message-font-size-content,
+  'font-size-body-3'
+);
+$message-icon-margin-right: theme-runtime.token(
+  'message',
+  'message-icon-margin-right',
+  $message-icon-margin-right,
+  'spacing-4'
+);
+$message-border-width: theme-runtime.token(
+  'message',
+  'message-border-width',
+  $message-border-width
+);
+$message-border-style: theme-runtime.token(
+  'message',
+  'message-border-style',
+  $message-border-style
+);
+$message-color-close-icon: theme-runtime.token(
+  'message',
+  'message-color-close-icon',
+  $message-color-close-icon
+);
+$message-close-icon-top: theme-runtime.token(
+  'message',
+  'message-close-icon-top',
+  $message-close-icon-top
+);
+$message-close-icon-right: theme-runtime.token(
+  'message',
+  'message-close-icon-right',
+  $message-close-icon-right,
+  'spacing-7'
+);
+$message-normal-color-bg: theme-runtime.token(
+  'message',
+  'message-normal-color-bg',
+  $message-normal-color-bg
+);
+$message-normal-color-icon: theme-runtime.token(
+  'message',
+  'message-normal-color-icon',
+  $message-normal-color-icon
+);
+$message-normal-color-content: theme-runtime.token(
+  'message',
+  'message-normal-color-content',
+  $message-normal-color-content
+);
+$message-normal-color-border: theme-runtime.token(
+  'message',
+  'message-normal-color-border',
+  $message-normal-color-border
+);
+$message-info-color-bg: theme-runtime.token(
+  'message',
+  'message-info-color-bg',
+  $message-info-color-bg
+);
+$message-info-color-icon: theme-runtime.token(
+  'message',
+  'message-info-color-icon',
+  $message-info-color-icon,
+  'color-primary-6'
+);
+$message-info-color-content: theme-runtime.token(
+  'message',
+  'message-info-color-content',
+  $message-info-color-content
+);
+$message-info-color-border: theme-runtime.token(
+  'message',
+  'message-info-color-border',
+  $message-info-color-border
+);
+$message-success-color-bg: theme-runtime.token(
+  'message',
+  'message-success-color-bg',
+  $message-success-color-bg
+);
+$message-success-color-icon: theme-runtime.token(
+  'message',
+  'message-success-color-icon',
+  $message-success-color-icon,
+  'color-success-6'
+);
+$message-success-color-content: theme-runtime.token(
+  'message',
+  'message-success-color-content',
+  $message-success-color-content
+);
+$message-success-color-border: theme-runtime.token(
+  'message',
+  'message-success-color-border',
+  $message-success-color-border
+);
+$message-warning-color-bg: theme-runtime.token(
+  'message',
+  'message-warning-color-bg',
+  $message-warning-color-bg
+);
+$message-warning-color-icon: theme-runtime.token(
+  'message',
+  'message-warning-color-icon',
+  $message-warning-color-icon,
+  'color-warning-6'
+);
+$message-warning-color-content: theme-runtime.token(
+  'message',
+  'message-warning-color-content',
+  $message-warning-color-content
+);
+$message-warning-color-border: theme-runtime.token(
+  'message',
+  'message-warning-color-border',
+  $message-warning-color-border
+);
+$message-error-color-bg: theme-runtime.token(
+  'message',
+  'message-error-color-bg',
+  $message-error-color-bg
+);
+$message-error-color-icon: theme-runtime.token(
+  'message',
+  'message-error-color-icon',
+  $message-error-color-icon,
+  'color-danger-6'
+);
+$message-error-color-content: theme-runtime.token(
+  'message',
+  'message-error-color-content',
+  $message-error-color-content
+);
+$message-error-color-border: theme-runtime.token(
+  'message',
+  'message-error-color-border',
+  $message-error-color-border
+);
+$message-loading-color-bg: theme-runtime.token(
+  'message',
+  'message-loading-color-bg',
+  $message-loading-color-bg
+);
+$message-loading-color-icon: theme-runtime.token(
+  'message',
+  'message-loading-color-icon',
+  $message-loading-color-icon,
+  'color-primary-6'
+);
+$message-loading-color-content: theme-runtime.token(
+  'message',
+  'message-loading-color-content',
+  $message-loading-color-content
+);
+$message-loading-color-border: theme-runtime.token(
+  'message',
+  'message-loading-color-border',
+  $message-loading-color-border
+);

package/es/modal/style/index.css

@@ -56,15 +56,15 @@
 
 .sd-modal {
   position: relative;
-  top: 100px;
+  top: var(--component-modal-modal-margin-top, var(--component-modal-margin-top, 100px));
   display: inline-block;
-  width: 520px;
+  width: var(--component-modal-modal-default-size-width, var(--component-modal-default-size-width, 520px));
   margin: 0 auto;
   line-height: 1.5715;
   white-space: initial;
   text-align: left;
   background-color: var(--sd-color-bg-3);
-  border-radius: var(--sd-border-radius-medium);
+  border-radius: var(--component-modal-modal-border-radius, var(--component-modal-border-radius, var(--sd-border-radius-medium)));
 }
 .sd-modal-draggable .sd-modal-header {
   cursor: move;
@@ -75,9 +75,9 @@
   align-items: center;
   box-sizing: border-box;
   width: 100%;
-  height: 48px;
-  padding: 0 20px;
-  border-bottom: 1px solid var(--sd-color-neutral-3);
+  height: var(--component-modal-modal-default-size-header-height, var(--component-modal-default-size-header-height, var(--size-12, 48px)));
+  padding: 0 var(--component-modal-modal-default-padding-horizontal, var(--component-modal-default-padding-horizontal, var(--spacing-8, 20px)));
+  border-bottom: 1px solid var(--component-modal-modal-color-border, var(--component-modal-color-border, var(--sd-color-neutral-3)));
 }
 .sd-modal-header-with-close .sd-modal-title-with-close {
   padding-right: 20px;
@@ -109,36 +109,36 @@
 }
 .sd-modal-body {
   position: relative;
-  padding: 24px 20px;
+  padding: var(--component-modal-modal-default-padding-content-vertical, var(--component-modal-default-padding-content-vertical, var(--spacing-9, 24px))) var(--component-modal-modal-default-padding-horizontal, var(--component-modal-default-padding-horizontal, var(--spacing-8, 20px)));
   overflow: auto;
-  color: var(--sd-color-text-1);
-  font-size: 14px;
+  color: var(--component-modal-modal-color-content-text, var(--component-modal-color-content-text, var(--sd-color-text-1)));
+  font-size: var(--component-modal-modal-font-content-size, var(--component-modal-font-content-size, var(--font-size-body-3, 14px)));
 }
 .sd-modal-footer {
   flex-shrink: 0;
   box-sizing: border-box;
   width: 100%;
-  padding: 16px 20px;
+  padding: var(--component-modal-modal-default-padding-footer-vertical, var(--component-modal-default-padding-footer-vertical, var(--spacing-7, 16px))) var(--component-modal-modal-default-padding-horizontal, var(--component-modal-default-padding-horizontal, var(--spacing-8, 20px)));
   text-align: right;
-  border-top: 1px solid var(--sd-color-neutral-3);
+  border-top: 1px solid var(--component-modal-modal-color-border, var(--component-modal-color-border, var(--sd-color-neutral-3)));
 }
 .sd-modal-footer > .sd-btn:not(:nth-child(1)) {
-  margin-left: 12px;
+  margin-left: var(--component-modal-modal-margin-footer-button-left, var(--component-modal-margin-footer-button-left, var(--spacing-6, 12px)));
 }
 .sd-modal-close-btn {
   margin-left: -12px;
-  color: var(--sd-color-text-1);
+  color: var(--component-modal-modal-color-header-text, var(--component-modal-color-header-text, var(--sd-color-text-1)));
   font-size: 12px;
   cursor: pointer;
 }
 .sd-modal-title {
-  color: var(--sd-color-text-1);
+  color: var(--component-modal-modal-color-header-text, var(--component-modal-color-header-text, var(--sd-color-text-1)));
   font-weight: 500;
-  font-size: 16px;
+  font-size: var(--component-modal-modal-font-header-size, var(--component-modal-font-header-size, var(--font-size-title-1, 16px)));
 }
 .sd-modal-title-icon {
-  margin-right: 10px;
-  font-size: 18px;
+  margin-right: var(--component-modal-modal-margin-tip-icon-right, var(--component-modal-margin-tip-icon-right, var(--spacing-5, 10px)));
+  font-size: var(--component-modal-modal-size-tip-icon, var(--component-modal-size-tip-icon, 18px));
   vertical-align: -0.15em;
 }
 .sd-modal-title-icon .sd-icon-info-circle-fill {
@@ -155,8 +155,8 @@
 }
 
 .sd-modal-simple {
-  width: 400px;
-  padding: 24px 32px 32px;
+  width: var(--component-modal-modal-simple-size-width, var(--component-modal-simple-size-width, 400px));
+  padding: var(--component-modal-modal-simple-padding-top, var(--component-modal-simple-padding-top, var(--spacing-9, 24px))) var(--component-modal-modal-simple-padding-horizontal, var(--component-modal-simple-padding-horizontal, var(--spacing-10, 32px))) var(--component-modal-modal-simple-padding-bottom, var(--component-modal-simple-padding-bottom, var(--spacing-10, 32px)));
 }
 .sd-modal-simple .sd-modal-header,
 .sd-modal-simple .sd-modal-footer {
@@ -165,7 +165,7 @@
   border: none;
 }
 .sd-modal-simple .sd-modal-header {
-  margin-bottom: 24px;
+  margin-bottom: var(--component-modal-modal-simple-margin-content-top, var(--component-modal-simple-margin-content-top, var(--spacing-9, 24px)));
 }
 .sd-modal-simple .sd-modal-title {
   justify-content: center;
@@ -177,7 +177,7 @@
   justify-content: center;
 }
 .sd-modal-simple .sd-modal-footer {
-  margin-top: 32px;
+  margin-top: var(--component-modal-modal-simple-margin-footer-top, var(--component-modal-simple-margin-footer-top, var(--spacing-10, 32px)));
   text-align: center;
 }
 .sd-modal-simple .sd-modal-body {

package/es/modal/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';
@@ -55,3 +56,117 @@ $modal-simple-margin-content-top: global.$spacing-9;
 $modal-position-close-icon-right: 16px;
 
 $modal-font-size-close-icon: 12px;
+
+// @generated runtime tokens — pnpm theme:generate
+$modal-border-radius: theme-runtime.token('modal', 'modal-border-radius', $modal-border-radius);
+$modal-size-tip-icon: theme-runtime.token('modal', 'modal-size-tip-icon', $modal-size-tip-icon);
+$modal-margin-top: theme-runtime.token('modal', 'modal-margin-top', $modal-margin-top);
+$modal-margin-tip-icon-right: theme-runtime.token(
+  'modal',
+  'modal-margin-tip-icon-right',
+  $modal-margin-tip-icon-right,
+  'spacing-5'
+);
+$modal-margin-footer-button-left: theme-runtime.token(
+  'modal',
+  'modal-margin-footer-button-left',
+  $modal-margin-footer-button-left,
+  'spacing-6'
+);
+$modal-color-border: theme-runtime.token('modal', 'modal-color-border', $modal-color-border);
+$modal-color-header-text: theme-runtime.token(
+  'modal',
+  'modal-color-header-text',
+  $modal-color-header-text
+);
+$modal-color-content-text: theme-runtime.token(
+  'modal',
+  'modal-color-content-text',
+  $modal-color-content-text
+);
+$modal-font-header-size: theme-runtime.token(
+  'modal',
+  'modal-font-header-size',
+  $modal-font-header-size,
+  'font-size-title-1'
+);
+$modal-default-padding-horizontal: theme-runtime.token(
+  'modal',
+  'modal-default-padding-horizontal',
+  $modal-default-padding-horizontal,
+  'spacing-8'
+);
+$modal-default-size-header-height: theme-runtime.token(
+  'modal',
+  'modal-default-size-header-height',
+  $modal-default-size-header-height,
+  'size-12'
+);
+$modal-default-padding-content-vertical: theme-runtime.token(
+  'modal',
+  'modal-default-padding-content-vertical',
+  $modal-default-padding-content-vertical,
+  'spacing-9'
+);
+$modal-default-padding-footer-vertical: theme-runtime.token(
+  'modal',
+  'modal-default-padding-footer-vertical',
+  $modal-default-padding-footer-vertical,
+  'spacing-7'
+);
+$modal-default-size-width: theme-runtime.token(
+  'modal',
+  'modal-default-size-width',
+  $modal-default-size-width
+);
+$modal-font-content-size: theme-runtime.token(
+  'modal',
+  'modal-font-content-size',
+  $modal-font-content-size,
+  'font-size-body-3'
+);
+$modal-simple-align-header: theme-runtime.token(
+  'modal',
+  'modal-simple-align-header',
+  $modal-simple-align-header
+);
+$modal-simple-size-width: theme-runtime.token(
+  'modal',
+  'modal-simple-size-width',
+  $modal-simple-size-width
+);
+$modal-simple-padding-horizontal: theme-runtime.token(
+  'modal',
+  'modal-simple-padding-horizontal',
+  $modal-simple-padding-horizontal,
+  'spacing-10'
+);
+$modal-simple-padding-top: theme-runtime.token(
+  'modal',
+  'modal-simple-padding-top',
+  $modal-simple-padding-top,
+  'spacing-9'
+);
+$modal-simple-padding-bottom: theme-runtime.token(
+  'modal',
+  'modal-simple-padding-bottom',
+  $modal-simple-padding-bottom,
+  'spacing-10'
+);
+$modal-simple-margin-footer-top: theme-runtime.token(
+  'modal',
+  'modal-simple-margin-footer-top',
+  $modal-simple-margin-footer-top,
+  'spacing-10'
+);
+$modal-simple-margin-content-top: theme-runtime.token(
+  'modal',
+  'modal-simple-margin-content-top',
+  $modal-simple-margin-content-top,
+  'spacing-9'
+);
+$modal-position-close-icon-right: theme-runtime.token(
+  'modal',
+  'modal-position-close-icon-right',
+  $modal-position-close-icon-right
+);

package/es/model-selector/style/index.css

@@ -143,6 +143,6 @@
   margin-left: -6px;
 }
 
-:where(body, [sd-theme])[sd-theme=dark] .sd-model-selector-logo {
+:where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-model-selector-logo {
   filter: brightness(0) invert(1);
 }

package/es/notification/style/index.css

@@ -22,23 +22,23 @@
   padding-left: 0;
 }
 .sd-notification-list-top-left {
-  top: 20px;
-  left: 20px;
+  top: var(--component-notification-notification-wrapper-margin-top, var(--component-notification-wrapper-margin-top, var(--spacing-8, 20px)));
+  left: var(--component-notification-notification-wrapper-margin-left, var(--component-notification-wrapper-margin-left, var(--spacing-8, 20px)));
 }
 .sd-notification-list-top-right {
-  top: 20px;
-  right: 20px;
+  top: var(--component-notification-notification-wrapper-margin-top, var(--component-notification-wrapper-margin-top, var(--spacing-8, 20px)));
+  right: var(--component-notification-notification-wrapper-margin-right, var(--component-notification-wrapper-margin-right, var(--spacing-8, 20px)));
 }
 .sd-notification-list-top-right .sd-notification {
   margin-left: auto;
 }
 .sd-notification-list-bottom-left {
-  bottom: 20px;
-  left: 20px;
+  bottom: var(--component-notification-notification-wrapper-margin-bottom, var(--component-notification-wrapper-margin-bottom, var(--spacing-8, 20px)));
+  left: var(--component-notification-notification-wrapper-margin-left, var(--component-notification-wrapper-margin-left, var(--spacing-8, 20px)));
 }
 .sd-notification-list-bottom-right {
-  right: 20px;
-  bottom: 20px;
+  right: var(--component-notification-notification-wrapper-margin-right, var(--component-notification-wrapper-margin-right, var(--spacing-8, 20px)));
+  bottom: var(--component-notification-notification-wrapper-margin-bottom, var(--component-notification-wrapper-margin-bottom, var(--spacing-8, 20px)));
 }
 .sd-notification-list-bottom-right .sd-notification {
   margin-left: auto;
@@ -49,103 +49,103 @@
   display: flex;
   box-sizing: border-box;
   width: 340px;
-  padding: 20px 20px 20px 20px;
+  padding: var(--component-notification-notification-padding-top, var(--component-notification-padding-top, var(--spacing-8, 20px))) 20px var(--component-notification-notification-padding-bottom, var(--component-notification-padding-bottom, var(--spacing-8, 20px))) 20px;
   overflow: hidden;
-  background-color: var(--sd-color-bg-popup);
-  border: 1px solid var(--sd-color-neutral-3);
-  border-radius: var(--sd-border-radius-medium);
+  background-color: var(--component-notification-notification-normal-color-bg, var(--component-notification-normal-color-bg, var(--sd-color-bg-popup)));
+  border: var(--component-notification-notification-border-width, var(--component-notification-border-width, 1px)) var(--component-notification-notification-border-style, var(--component-notification-border-style, solid)) var(--component-notification-notification-normal-color-border, var(--component-notification-normal-color-border, var(--sd-color-neutral-3)));
+  border-radius: var(--component-notification-notification-border-radius, var(--component-notification-border-radius, var(--sd-border-radius-medium)));
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.1);
   opacity: 1;
   transition: opacity 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
 .sd-notification:not(:last-child) {
-  margin-bottom: 20px;
+  margin-bottom: var(--component-notification-notification-margin-bottom, var(--component-notification-margin-bottom, var(--spacing-8, 20px)));
 }
 .sd-notification-icon {
   display: flex;
   align-items: center;
-  font-size: 24px;
+  font-size: var(--component-notification-notification-font-size-icon, var(--component-notification-font-size-icon, 24px));
 }
 .sd-notification-info {
-  background-color: var(--sd-color-bg-popup);
-  border-color: var(--sd-color-neutral-3);
+  background-color: var(--component-notification-notification-info-color-bg, var(--component-notification-info-color-bg, var(--sd-color-bg-popup)));
+  border-color: var(--component-notification-notification-info-color-border, var(--component-notification-info-color-border, var(--sd-color-neutral-3)));
 }
 .sd-notification-info .sd-notification-icon {
-  color: rgb(var(--sd-primary-6));
+  color: var(--component-notification-notification-info-color-icon, var(--component-notification-info-color-icon, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
 }
 .sd-notification-success {
-  background-color: var(--sd-color-bg-popup);
-  border-color: var(--sd-color-neutral-3);
+  background-color: var(--component-notification-notification-success-color-bg, var(--component-notification-success-color-bg, var(--sd-color-bg-popup)));
+  border-color: var(--component-notification-notification-success-color-border, var(--component-notification-success-color-border, var(--sd-color-neutral-3)));
 }
 .sd-notification-success .sd-notification-icon {
-  color: rgb(var(--sd-success-6));
+  color: var(--component-notification-notification-success-color-icon, var(--component-notification-success-color-icon, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
 }
 .sd-notification-warning {
-  background-color: var(--sd-color-bg-popup);
-  border-color: var(--sd-color-neutral-3);
+  background-color: var(--component-notification-notification-warning-color-bg, var(--component-notification-warning-color-bg, var(--sd-color-bg-popup)));
+  border-color: var(--component-notification-notification-warning-color-border, var(--component-notification-warning-color-border, var(--sd-color-neutral-3)));
 }
 .sd-notification-warning .sd-notification-icon {
-  color: rgb(var(--sd-warning-6));
+  color: var(--component-notification-notification-warning-color-icon, var(--component-notification-warning-color-icon, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))));
 }
 .sd-notification-error {
-  background-color: var(--sd-color-bg-popup);
-  border-color: var(--sd-color-neutral-3);
+  background-color: var(--component-notification-notification-error-color-bg, var(--component-notification-error-color-bg, var(--sd-color-bg-popup)));
+  border-color: var(--component-notification-notification-error-color-border, var(--component-notification-error-color-border, var(--sd-color-neutral-3)));
 }
 .sd-notification-error .sd-notification-icon {
-  color: rgb(var(--sd-danger-6));
+  color: var(--component-notification-notification-error-color-icon, var(--component-notification-error-color-icon, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
 }
 .sd-notification-left {
-  padding-right: 16px;
+  padding-right: var(--component-notification-notification-icon-margin-right, var(--component-notification-icon-margin-right, var(--spacing-7, 16px)));
 }
 .sd-notification-right {
   flex: 1;
   word-break: break-word;
 }
 .sd-notification-title {
-  color: var(--sd-color-text-1);
+  color: var(--component-notification-notification-normal-color-text-title, var(--component-notification-normal-color-text-title, var(--sd-color-text-1)));
   font-weight: 500;
-  font-size: 16px;
+  font-size: var(--component-notification-notification-font-size-title, var(--component-notification-font-size-title, var(--font-size-title-1, 16px)));
 }
 .sd-notification-title + .sd-notification-content {
-  margin-top: 4px;
+  margin-top: var(--component-notification-notification-title-margin-bottom, var(--component-notification-title-margin-bottom, var(--spacing-2, 4px)));
 }
 .sd-notification-content {
-  color: var(--sd-color-text-1);
-  font-size: 14px;
+  color: var(--component-notification-notification-normal-color-text-content, var(--component-notification-normal-color-text-content, var(--sd-color-text-1)));
+  font-size: var(--component-notification-notification-font-size-content, var(--component-notification-font-size-content, var(--font-size-body-3, 14px)));
 }
 .sd-notification-info .sd-notification-title {
-  color: var(--sd-color-text-1);
+  color: var(--component-notification-notification-info-color-text-title, var(--component-notification-info-color-text-title, var(--sd-color-text-1)));
 }
 .sd-notification-info .sd-notification-content {
-  color: var(--sd-color-text-1);
+  color: var(--component-notification-notification-info-color-text-content, var(--component-notification-info-color-text-content, var(--sd-color-text-1)));
 }
 .sd-notification-success .sd-notification-title {
-  color: var(--sd-color-text-1);
+  color: var(--component-notification-notification-success-color-text-title, var(--component-notification-success-color-text-title, var(--sd-color-text-1)));
 }
 .sd-notification-success .sd-notification-content {
-  color: var(--sd-color-text-1);
+  color: var(--component-notification-notification-success-color-text-content, var(--component-notification-success-color-text-content, var(--sd-color-text-1)));
 }
 .sd-notification-warning .sd-notification-title {
-  color: var(--sd-color-text-1);
+  color: var(--component-notification-notification-warning-color-text-title, var(--component-notification-warning-color-text-title, var(--sd-color-text-1)));
 }
 .sd-notification-warning .sd-notification-content {
-  color: var(--sd-color-text-1);
+  color: var(--component-notification-notification-warning-color-text-content, var(--component-notification-warning-color-text-content, var(--sd-color-text-1)));
 }
 .sd-notification-error .sd-notification-title {
-  color: var(--sd-color-text-1);
+  color: var(--component-notification-notification-error-color-text-title, var(--component-notification-error-color-text-title, var(--sd-color-text-1)));
 }
 .sd-notification-error .sd-notification-content {
-  color: var(--sd-color-text-1);
+  color: var(--component-notification-notification-error-color-text-content, var(--component-notification-error-color-text-content, var(--sd-color-text-1)));
 }
 .sd-notification-footer {
-  margin-top: 16px;
+  margin-top: var(--component-notification-notification-btn-wrapper-margin-top, var(--component-notification-btn-wrapper-margin-top, var(--spacing-7, 16px)));
   text-align: right;
 }
 .sd-notification-close-btn {
   position: absolute;
-  top: 12px;
-  right: 12px;
-  color: var(--sd-color-text-1);
+  top: var(--component-notification-notification-close-icon-top, var(--component-notification-close-icon-top, var(--spacing-6, 12px)));
+  right: var(--component-notification-notification-close-icon-right, var(--component-notification-close-icon-right, var(--spacing-6, 12px)));
+  color: var(--component-notification-notification-color-close-icon, var(--component-notification-color-close-icon, var(--sd-color-text-1)));
   font-size: 12px;
   cursor: pointer;
 }