@sdata/web-vue 1.5.0 → 1.7.0

package/es/pagination/style/index.scss

@@ -0,0 +1,371 @@
+@use '@style/theme/index.scss' as theme;
+@use 'sass:string';
+@use 'sass:map';
+@use '@style/theme/legacy-less-var.scss' as legacyLessVar;
+@use '@components/pagination/style/token.scss' as *;
+
+$__less-vars: (
+  'pagination-border-width': $pagination-border-width,
+  'pagination-color-bg-item': $pagination-color-bg-item,
+  'pagination-color-bg-item_active': $pagination-color-bg-item_active,
+  'pagination-color-bg-item_active_disabled': $pagination-color-bg-item_active_disabled,
+  'pagination-color-bg-item_disabled': $pagination-color-bg-item_disabled,
+  'pagination-color-bg-item_hover': $pagination-color-bg-item_hover,
+  'pagination-color-icon-arrow': $pagination-color-icon-arrow,
+  'pagination-color-icon-arrow-bg': $pagination-color-icon-arrow-bg,
+  'pagination-color-icon-arrow-bg_disabled': $pagination-color-icon-arrow-bg_disabled,
+  'pagination-color-icon-arrow-bg_hover': $pagination-color-icon-arrow-bg_hover,
+  'pagination-color-icon-arrow-text_disabled': $pagination-color-icon-arrow-text_disabled,
+  'pagination-color-icon-arrow-text_hover': $pagination-color-icon-arrow-text_hover,
+  'pagination-color-item-border': $pagination-color-item-border,
+  'pagination-color-item-border_active': $pagination-color-item-border_active,
+  'pagination-color-item-border_active_disabled': $pagination-color-item-border_active_disabled,
+  'pagination-color-item-border_disabled': $pagination-color-item-border_disabled,
+  'pagination-color-item-border_hover': $pagination-color-item-border_hover,
+  'pagination-color-item-text': $pagination-color-item-text,
+  'pagination-color-item-text_active': $pagination-color-item-text_active,
+  'pagination-color-item-text_active_disabled': $pagination-color-item-text_active_disabled,
+  'pagination-color-item-text_disabled': $pagination-color-item-text_disabled,
+  'pagination-color-item-text_hover': $pagination-color-item-text_hover,
+  'pagination-color-jumper-goto': $pagination-color-jumper-goto,
+  'pagination-color-text-total': $pagination-color-text-total,
+  'pagination-item-border-radius': $pagination-item-border-radius,
+  'pagination-item-spacing': $pagination-item-spacing,
+  'pagination-margin-jumper-left': $pagination-margin-jumper-left,
+  'pagination-margin-option-left': $pagination-margin-option-left,
+  'pagination-margin-total-spacing': $pagination-margin-total-spacing,
+  'pagination-padding-horizontal': $pagination-padding-horizontal,
+  'pagination-prefix-cls': $pagination-prefix-cls,
+  'pagination-simple-color-icon-arrow': $pagination-simple-color-icon-arrow,
+  'pagination-simple-color-icon-arrow-bg': $pagination-simple-color-icon-arrow-bg,
+  'pagination-simple-color-icon-arrow-bg_disabled': $pagination-simple-color-icon-arrow-bg_disabled,
+  'pagination-simple-color-icon-arrow-bg_hover': $pagination-simple-color-icon-arrow-bg_hover,
+  'pagination-simple-color-icon-arrow-text_disabled':
+    $pagination-simple-color-icon-arrow-text_disabled,
+  'pagination-simple-color-icon-arrow-text_hover': $pagination-simple-color-icon-arrow-text_hover,
+  'pagination-simple-input-width': $pagination-simple-input-width,
+  'pagination-simple-margin-next-left': $pagination-simple-margin-next-left,
+  'pagination-simple-margin-prev-right': $pagination-simple-margin-prev-right,
+  'pagination-simple-margin-separator-left': $pagination-simple-margin-separator-left,
+  'pagination-simple-margin-separator-right': $pagination-simple-margin-separator-right,
+  'pagination-size-default': $pagination-size-default,
+  'pagination-size-default-font-size': $pagination-size-default-font-size,
+  'pagination-size-icon-arrow_default': $pagination-size-icon-arrow_default,
+  'pagination-size-icon-arrow_large': $pagination-size-icon-arrow_large,
+  'pagination-size-icon-arrow_mini': $pagination-size-icon-arrow_mini,
+  'pagination-size-icon-arrow_small': $pagination-size-icon-arrow_small,
+  'pagination-size-icon-ellipsis': $pagination-size-icon-ellipsis,
+  'pagination-size-large': $pagination-size-large,
+  'pagination-size-large-font-size': $pagination-size-large-font-size,
+  'pagination-size-mini': $pagination-size-mini,
+  'pagination-size-mini-font-size': $pagination-size-mini-font-size,
+  'pagination-size-small': $pagination-size-small,
+  'pagination-size-small-font-size': $pagination-size-small-font-size,
+  'patination-jumper-input-width': $patination-jumper-input-width,
+  'prefix': theme.$prefix,
+  'sd-cssvars-prefix': theme.$sd-cssvars-prefix,
+  'transition-duration-2': theme.$transition-duration-2,
+  'transition-timing-function-linear': theme.$transition-timing-function-linear,
+);
+
+@function less-var($name, $fallback: null) {
+  @return legacyLessVar.get($__less-vars, $name, $fallback);
+}
+
+@mixin page-item($size) {
+  min-width: less-var('pagination-size-#{$size}');
+  height: less-var('pagination-size-#{$size}');
+  font-size: less-var('pagination-size-#{$size}-font-size');
+  line-height: less-var('pagination-size-#{$size}');
+
+  &-previous,
+  &-next {
+    font-size: less-var('pagination-size-icon-arrow_#{$size}');
+  }
+}
+
+@mixin option($size) {
+  height: less-var('pagination-size-#{$size}');
+  font-size: less-var('pagination-size-#{$size}-font-size');
+  line-height: 0;
+}
+
+@mixin total($size) {
+  font-size: less-var('pagination-size-#{$size}-font-size');
+  line-height: less-var('pagination-size-#{$size}');
+}
+
+.#{$pagination-prefix-cls} {
+  display: flex;
+  align-items: center;
+  font-size: $pagination-size-default-font-size;
+
+  &-list {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+    white-space: nowrap;
+    list-style: none;
+  }
+
+  &-item {
+    display: inline-block;
+    box-sizing: border-box;
+    padding: 0 $pagination-padding-horizontal;
+    color: $pagination-color-item-text;
+    text-align: center;
+    vertical-align: middle;
+    list-style: none;
+    background-color: $pagination-color-bg-item;
+    border: $pagination-border-width solid $pagination-color-item-border;
+    border-radius: $pagination-item-border-radius;
+    outline: 0;
+    cursor: pointer;
+    user-select: none;
+
+    @include page-item(default);
+
+    &:hover {
+      color: $pagination-color-item-text_hover;
+      background-color: $pagination-color-bg-item_hover;
+      border-color: $pagination-color-item-border_hover;
+    }
+
+    &-active,
+    &-active:hover {
+      color: $pagination-color-item-text_active;
+      background-color: $pagination-color-bg-item_active;
+      border-color: $pagination-color-item-border_active;
+      transition:
+        color theme.$transition-duration-2 theme.$transition-timing-function-linear,
+        background-color theme.$transition-duration-2 theme.$transition-timing-function-linear;
+    }
+
+    &-disabled,
+    &-disabled:hover {
+      color: $pagination-color-item-text_disabled;
+      background-color: $pagination-color-bg-item_disabled;
+      border-color: $pagination-color-item-border_disabled;
+      cursor: not-allowed;
+    }
+
+    &:not(:last-child) {
+      margin-right: $pagination-item-spacing;
+    }
+  }
+
+  &-item-previous,
+  &-item-next {
+    color: $pagination-color-icon-arrow;
+    font-size: $pagination-size-icon-arrow_default;
+    background-color: $pagination-color-icon-arrow-bg;
+
+    &:not(.#{$pagination-prefix-cls}-item-disabled):hover {
+      color: $pagination-color-icon-arrow-text_hover;
+      background-color: $pagination-color-icon-arrow-bg_hover;
+    }
+
+    // 解决少数情况下出现的图标不垂直水平剧中的 bug
+    &::after {
+      display: inline-block;
+      font-size: 0;
+      vertical-align: middle;
+      content: '.';
+    }
+  }
+
+  & &-item-previous#{&}-item-disabled,
+  & &-item-next#{&}-item-disabled {
+    color: $pagination-color-icon-arrow-text_disabled;
+    background-color: $pagination-color-icon-arrow-bg_disabled;
+  }
+
+  &-item-jumper {
+    font-size: $pagination-size-icon-ellipsis;
+  }
+
+  /*** 快速跳转 ***/
+  &-jumper {
+    display: flex;
+    align-items: center;
+    margin-left: $pagination-margin-jumper-left;
+
+    > span {
+      font-size: $pagination-size-default-font-size;
+    }
+
+    &-text-goto,
+    &-prepend,
+    &-append {
+      color: $pagination-color-jumper-goto;
+      white-space: nowrap;
+    }
+
+    &-prepend {
+      margin-right: $pagination-item-spacing;
+    }
+
+    &-append {
+      margin-left: $pagination-item-spacing;
+    }
+
+    & &-input {
+      width: $patination-jumper-input-width;
+      padding-right: 2px;
+      padding-left: 2px;
+
+      input {
+        text-align: center;
+      }
+    }
+  }
+
+  &-options {
+    position: relative;
+    display: inline-block;
+    flex: 0 0 auto;
+    min-width: 0;
+    margin-left: $pagination-margin-option-left;
+    text-align: center;
+    vertical-align: middle;
+
+    .#{theme.$prefix}-select {
+      width: auto;
+
+      &-view-value {
+        padding-right: 6px;
+        overflow: inherit;
+      }
+    }
+  }
+
+  &-total {
+    display: inline-block;
+    height: 100%;
+    margin-right: $pagination-margin-total-spacing;
+    color: $pagination-color-text-total;
+    font-size: $pagination-size-default-font-size;
+
+    @include total(default);
+
+    white-space: nowrap;
+  }
+
+  // simple
+  &-jumper {
+    flex: 0 0 auto;
+
+    &-separator {
+      padding: 0 $pagination-simple-margin-separator-right 0
+        $pagination-simple-margin-separator-left;
+    }
+
+    &-total-page {
+      margin-right: $pagination-simple-margin-next-left - $pagination-simple-margin-prev-right;
+    }
+  }
+
+  &-simple {
+    display: flex;
+    align-items: center;
+  }
+
+  &-simple &-item {
+    margin-right: 0;
+  }
+
+  &-simple &-jumper {
+    margin: 0 $pagination-simple-margin-prev-right;
+    color: var(string.unquote('#{theme.$sd-cssvars-prefix}-color-text-1'));
+  }
+
+  &-simple &-jumper &-jumper-input {
+    width: $pagination-simple-input-width;
+    margin-left: 0;
+  }
+
+  &-simple &-item-previous,
+  &-simple &-item-next {
+    color: $pagination-simple-color-icon-arrow;
+    background-color: $pagination-simple-color-icon-arrow-bg;
+
+    &:not(.#{$pagination-prefix-cls}-item-disabled):hover {
+      color: $pagination-simple-color-icon-arrow-text_hover;
+      background-color: $pagination-simple-color-icon-arrow-bg_hover;
+    }
+  }
+
+  &-simple &-item-previous#{&}-item-disabled,
+  &-simple &-item-next#{&}-item-disabled {
+    color: $pagination-simple-color-icon-arrow-text_disabled;
+    background-color: $pagination-simple-color-icon-arrow-bg_disabled;
+  }
+
+  // Disabled
+  &-disabled {
+    cursor: not-allowed;
+  }
+
+  &-disabled &-item,
+  &-disabled &-item:not(#{&}-item-disabled, &-item-active):hover {
+    color: $pagination-color-item-text_disabled;
+    background-color: $pagination-color-bg-item_disabled;
+    border-color: $pagination-color-item-border_disabled;
+    cursor: not-allowed;
+  }
+
+  &#{&}-disabled &-item-active {
+    color: $pagination-color-item-text_active_disabled;
+    background-color: $pagination-color-bg-item_active_disabled;
+    border-color: $pagination-color-item-border_active_disabled;
+  }
+
+  // size
+  &-size-mini &-item {
+    @include page-item(mini);
+  }
+
+  &-size-mini &-total {
+    @include total(mini);
+  }
+
+  &-size-mini &-option {
+    @include option(mini);
+  }
+
+  &-size-mini &-jumper > span {
+    font-size: $pagination-size-mini-font-size;
+  }
+
+  &-size-small &-item {
+    @include page-item(small);
+  }
+
+  &-size-small &-total {
+    @include total(small);
+  }
+
+  &-size-small &-option {
+    @include option(small);
+  }
+
+  &-size-small &-jumper > span {
+    font-size: $pagination-size-small-font-size;
+  }
+
+  &-size-large &-item {
+    @include page-item(large);
+  }
+
+  &-size-large &-total {
+    @include total(large);
+  }
+
+  &-size-large &-option {
+    @include option(large);
+  }
+
+  &-size-large &-jumper > span {
+    font-size: $pagination-size-large-font-size;
+  }
+}

package/es/pagination/style/token.scss

@@ -0,0 +1,97 @@
+@use '@style/theme/index.scss' as global;
+
+@forward '@style/theme/index.scss';
+@forward '@style/color/colors.scss' hide $sd-vars-prefix, $sd-cssvars-prefix;
+
+@use 'sass:string';
+@use '@style/theme/index.scss' as *;
+
+$pagination-prefix-cls: string.unquote('#{$prefix}-pagination');
+
+$pagination-item-border-radius: global.$radius-small;
+$pagination-item-spacing: global.$spacing-4;
+$pagination-margin-total-spacing: global.$spacing-4;
+$pagination-margin-option-left: global.$spacing-4;
+$pagination-margin-jumper-left: global.$spacing-4;
+
+$pagination-size-mini: global.$size-mini;
+$pagination-size-small: global.$size-small;
+$pagination-size-default: global.$size-default;
+$pagination-size-large: global.$size-large;
+$pagination-padding-horizontal: 8px;
+
+$pagination-size-mini-font-size: global.$font-size-body-1;
+$pagination-size-small-font-size: global.$font-size-body-3;
+$pagination-size-default-font-size: global.$font-size-body-3;
+$pagination-size-large-font-size: global.$font-size-body-3;
+
+$pagination-size-icon-arrow_mini: global.$size-3;
+$pagination-size-icon-arrow_small: global.$size-3;
+$pagination-size-icon-arrow_default: global.$size-3;
+$pagination-size-icon-arrow_large: 14px;
+
+$pagination-size-icon-ellipsis: global.$size-4;
+
+$pagination-border-width: global.$border-none;
+$pagination-color-bg-item: global.$color-transparent;
+$pagination-color-bg-item_active: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-1')
+);
+$pagination-color-bg-item_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-1'));
+$pagination-color-bg-item_disabled: global.$color-transparent;
+$pagination-color-bg-item_active_disabled: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-1')
+);
+
+$pagination-color-item-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+$pagination-color-item-text_hover: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+$pagination-color-item-text_active: global.$color-primary-6;
+$pagination-color-item-text_disabled: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-4')
+);
+$pagination-color-item-text_active_disabled: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-primary-light-3')
+);
+
+$pagination-color-item-border: global.$color-transparent;
+$pagination-color-item-border_active: global.$color-transparent;
+$pagination-color-item-border_hover: global.$color-transparent;
+$pagination-color-item-border_disabled: global.$color-transparent;
+$pagination-color-item-border_active_disabled: global.$color-transparent;
+
+$pagination-color-icon-arrow: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+$pagination-color-icon-arrow-bg: global.$color-transparent;
+$pagination-color-icon-arrow-bg_hover: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-1')
+);
+$pagination-color-icon-arrow-bg_disabled: global.$color-transparent;
+$pagination-color-icon-arrow-text_hover: global.$color-primary-6;
+$pagination-color-icon-arrow-text_disabled: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-4')
+);
+
+// Simple
+$pagination-simple-input-width: global.$size-10;
+$pagination-simple-color-icon-arrow: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-2')
+);
+$pagination-simple-color-icon-arrow-bg: global.$color-transparent;
+$pagination-simple-color-icon-arrow-bg_hover: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-fill-1')
+);
+$pagination-simple-color-icon-arrow-bg_disabled: global.$color-transparent;
+$pagination-simple-color-icon-arrow-text_hover: global.$color-primary-6;
+$pagination-simple-color-icon-arrow-text_disabled: var(
+  string.unquote('#{global.$sd-cssvars-prefix}-color-text-4')
+);
+
+$pagination-simple-margin-prev-right: global.$spacing-2;
+$pagination-simple-margin-next-left: global.$spacing-6;
+$pagination-simple-margin-separator-left: global.$spacing-6;
+$pagination-simple-margin-separator-right: global.$spacing-6;
+// jumper
+$patination-jumper-input-width: global.$size-10;
+$pagination-color-jumper-goto: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-3'));
+
+// total text
+$pagination-color-text-total: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));

package/es/popconfirm/style/index.css

@@ -67,4 +67,4 @@
   z-index: 1;
   background-color: var(--color-bg-popup);
   border: 1px solid var(--color-neutral-3);
-}
+}

package/es/popconfirm/style/index.d.ts

@@ -1,4 +1,4 @@
-import '../../style/index.less';
+import '../../style/index.scss';
 import '../../button/style';
 import '../../trigger/style';
-import './index.less';
+import './index.scss';

package/es/popconfirm/style/index.js

@@ -1,2 +1,2 @@
-import "../../style/index.less";
-import "./index.less";
+import "../../style/index.scss";
+import "./index.scss";

package/es/popconfirm/style/index.scss

@@ -0,0 +1,73 @@
+@use '@style/theme/index.scss' as theme;
+@use '@style/theme/index.scss' as global;
+@use 'sass:string';
+@use '@components/popconfirm/style/token.scss' as *;
+@use '@components/popover/style/token.scss' as *;
+
+$popconfirm-prefix-cls: string.unquote('#{theme.$prefix}-popconfirm');
+
+.#{$popconfirm-prefix-cls} {
+  &-popup-content {
+    box-sizing: border-box;
+    padding: $popconfirm-padding-vertical $popconfirm-padding-horizontal;
+    color: $popup-color-content-text;
+    font-size: $popup-font-size;
+    line-height: theme.$line-height-base;
+    background-color: $popconfirm-color-content-bg;
+    border: global.$border-1 solid $popconfirm-color-border;
+    border-radius: $popconfirm-border-radius;
+    box-shadow: $popconfirm-shadow;
+
+    .#{$popconfirm-prefix-cls}-body {
+      position: relative;
+      display: flex;
+      align-items: flex-start;
+      margin-bottom: $popconfirm-margin-title-bottom;
+      color: $popconfirm-color-title-text;
+      font-size: $popconfirm-font-title-size;
+
+      .#{$popconfirm-prefix-cls}-icon {
+        display: inline-flex;
+        align-items: center;
+        height: theme.$line-height-base * $popconfirm-font-title-size;
+        margin-right: $popconfirm-margin-icon-right;
+        font-size: $popconfirm-size-title-icon;
+
+        .#{theme.$prefix}-icon-exclamation-circle-fill {
+          color: $popconfirm-color-title-icon;
+        }
+
+        .#{theme.$prefix}-icon-check-circle-fill {
+          color: $popconfirm-color-title-icon_success;
+        }
+
+        .#{theme.$prefix}-icon-info-circle-fill {
+          color: $popconfirm-color-title-icon_info;
+        }
+
+        .#{theme.$prefix}-icon-close-circle-fill {
+          color: $popconfirm-color-title-icon_danger;
+        }
+      }
+
+      .#{$popconfirm-prefix-cls}-content {
+        text-align: left;
+        overflow-wrap: break-word;
+      }
+    }
+
+    .#{$popconfirm-prefix-cls}-footer {
+      text-align: right;
+
+      > button {
+        margin-left: $popconfirm-margin-button-left;
+      }
+    }
+  }
+
+  &-popup-arrow {
+    z-index: 1;
+    background-color: $popup-color-content-bg;
+    border: global.$border-1 solid $popconfirm-color-border;
+  }
+}

package/es/popconfirm/style/token.scss

@@ -0,0 +1,26 @@
+@use '@style/theme/index.scss' as global;
+
+@forward '@style/theme/index.scss';
+@forward '@style/color/colors.scss' hide $sd-vars-prefix, $sd-cssvars-prefix;
+
+@use 'sass:string';
+@use '@style/theme/index.scss' as *;
+
+$popconfirm-padding-horizontal: global.$spacing-7;
+$popconfirm-padding-vertical: global.$spacing-7;
+$popconfirm-margin-title-bottom: global.$spacing-7;
+$popconfirm-size-title-icon: 18px;
+$popconfirm-margin-icon-right: global.$spacing-4;
+$popconfirm-margin-button-left: global.$spacing-4;
+$popconfirm-font-title-size: global.$font-size-body-3;
+$popconfirm-color-title-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$popconfirm-color-content-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-popup'));
+$popconfirm-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
+$popconfirm-border-radius: global.$radius-medium;
+$popconfirm-shadow: global.$shadow2-down;
+// type
+$popconfirm-color-title-icon: global.$color-warning-6;
+$popconfirm-color-title-icon_danger: global.$color-danger-6;
+$popconfirm-color-title-icon_success: global.$color-success-6;
+$popconfirm-color-title-icon_info: global.$color-primary-6;

package/es/popover/style/index.css

@@ -42,4 +42,4 @@
   z-index: 1;
   background-color: var(--color-bg-popup);
   border: 1px solid var(--color-neutral-3);
-}
+}

package/es/popover/style/index.d.ts

@@ -1,3 +1,3 @@
-import '../../style/index.less';
+import '../../style/index.scss';
 import '../../trigger/style';
-import './index.less';
+import './index.scss';

package/es/popover/style/index.js

@@ -1,2 +1,2 @@
-import "../../style/index.less";
-import "./index.less";
+import "../../style/index.scss";
+import "./index.scss";

package/es/popover/style/index.scss

@@ -0,0 +1,41 @@
+@use '@style/theme/index.scss' as theme;
+@use '@style/theme/index.scss' as global;
+@use 'sass:string';
+@use '@components/popover/style/token.scss' as *;
+
+$popover-prefix-cls: string.unquote('#{theme.$prefix}-popover');
+
+.#{$popover-prefix-cls} {
+  &-popup-content {
+    box-sizing: border-box;
+    padding: $popup-padding-vertical $popup-padding-horizontal;
+    color: $popup-color-content-text;
+    font-size: $popup-font-size;
+    line-height: theme.$line-height-base;
+    background-color: $popup-color-content-bg;
+    border: global.$border-1 solid $popup-color-border;
+    border-radius: $popup-border-radius;
+    box-shadow: $popup-shadow;
+  }
+
+  &-title {
+    color: $popup-color-title-text;
+    font-weight: global.$font-weight-500;
+    font-size: $popup-font-title-size;
+  }
+
+  &-content {
+    text-align: left;
+    overflow-wrap: break-word;
+  }
+
+  &-title + &-content {
+    margin-top: $popup-margin-content-top;
+  }
+
+  &-popup-arrow {
+    z-index: 1;
+    background-color: $popup-color-content-bg;
+    border: global.$border-1 solid $popup-color-border;
+  }
+}

package/es/popover/style/token.scss

@@ -0,0 +1,33 @@
+@use '@style/theme/index.scss' as global;
+
+@forward '@style/theme/index.scss';
+@forward '@style/color/colors.scss' hide $sd-vars-prefix, $sd-cssvars-prefix;
+
+@use 'sass:string';
+@use '@style/theme/index.scss' as *;
+
+$popup-color-content-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-2'));
+
+$popup-border-radius: global.$radius-large;
+
+$popup-color-content-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-popup'));
+
+$popup-shadow: global.$shadow2-down;
+
+$popup-padding-content-top: global.$spacing-2;
+
+$popup-padding-horizontal: global.$spacing-7;
+
+$popup-padding-vertical: global.$spacing-6;
+
+$popup-color-title-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
+
+$popup-font-title-size: global.$font-size-title-1;
+
+$popup-margin-content-top: global.$spacing-2;
+
+$popup-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-neutral-3'));
+
+$popup-font-size: global.$font-size-body-3;
+
+$popup-border-radius: global.$radius-medium;