@sdata/web-vue 1.6.0 → 1.7.0

package/es/style/normalize.scss

@@ -0,0 +1,227 @@
+/*! Tailwind CSS v4 preflight baseline scoped to SD Design layer */
+@use '@style/theme/index.scss' as *;
+
+/* stylelint-disable-next-line layer-name-pattern */
+@layer #{$prefix}-design {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+
+  html,
+  :host {
+    font-family:
+      ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+      'Segoe UI Symbol', 'Noto Color Emoji';
+    line-height: 1.5;
+    tab-size: 4;
+    text-size-adjust: 100%;
+    font-feature-settings: normal;
+    font-variation-settings: normal;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+
+  abbr:where([title]) {
+    text-decoration: underline dotted;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: inherit;
+    font-size: inherit;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: inherit;
+  }
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  code,
+  kbd,
+  samp,
+  pre {
+    font-size: 1em;
+    font-family:
+      ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+      monospace;
+    font-feature-settings: normal;
+    font-variation-settings: normal;
+  }
+
+  small {
+    font-size: 80%;
+  }
+
+  sub,
+  sup {
+    position: relative;
+    font-size: 75%;
+    line-height: 0;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+
+  :-moz-focusring {
+    outline: auto;
+  }
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  summary {
+    display: list-item;
+  }
+
+  ol,
+  ul,
+  menu {
+    list-style: none;
+  }
+
+  img,
+  svg,
+  video,
+  canvas,
+  audio,
+  iframe,
+  embed,
+  object {
+    display: block;
+    vertical-align: middle;
+  }
+
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+  }
+
+  button,
+  input,
+  select,
+  optgroup,
+  textarea,
+  ::file-selector-button {
+    color: inherit;
+    font: inherit;
+    letter-spacing: inherit;
+    background-color: transparent;
+    border-radius: 0;
+    opacity: 1;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+  }
+
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+
+  ::placeholder {
+    opacity: 1;
+  }
+
+  @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {
+    ::placeholder {
+      color: color-mix(in oklab, currentcolor 50%, transparent);
+    }
+  }
+
+  textarea {
+    resize: vertical;
+  }
+
+  ::-webkit-search-decoration {
+    appearance: none;
+  }
+
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+
+  ::-webkit-datetime-edit,
+  ::-webkit-datetime-edit-year-field,
+  ::-webkit-datetime-edit-month-field,
+  ::-webkit-datetime-edit-day-field,
+  ::-webkit-datetime-edit-hour-field,
+  ::-webkit-datetime-edit-minute-field,
+  ::-webkit-datetime-edit-second-field,
+  ::-webkit-datetime-edit-millisecond-field,
+  ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
+
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  button,
+  input:where([type='button'], [type='reset'], [type='submit']),
+  ::file-selector-button {
+    appearance: button;
+  }
+
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  [hidden]:where(:not([hidden='until-found'])) {
+    display: none !important;
+  }
+}

package/es/style/theme/_functions.scss

@@ -0,0 +1,15 @@
+@use 'sass:meta';
+
+@function sd-token-var($token-name, $fallback: null, $prefix: '--') {
+  $token-key: '#{$token-name}';
+
+  @if meta.type-of($token-name) == 'string' {
+    $token-key: $token-name;
+  }
+
+  @if $fallback == null {
+    @return var(#{$prefix}#{$token-key});
+  }
+
+  @return var(#{$prefix}#{$token-key}, #{$fallback});
+}

package/es/style/theme/_legacy-token-aliases.scss

@@ -0,0 +1,23 @@
+@use 'sass:map';
+@use './functions.scss' as fn;
+
+$sd-legacy-token-aliases: (
+  'color-primary-6': 'primary-6',
+  'color-success-6': 'success-6',
+  'color-warning-6': 'warning-6',
+  'color-danger-6': 'danger-6',
+  'color-link-6': 'link-6',
+  'color-text-1': 'color-text-1',
+  'border-radius-medium': 'border-radius-medium',
+) !default;
+
+// Migration marker: Prefer /* LESS_JS_EVAL: fn.sd-token-var(<new-token>) */ over legacy aliases.
+@function sd-legacy-token-var($legacy-token, $fallback: null, $prefix: '--') {
+  $resolved-token: map.get($sd-legacy-token-aliases, $legacy-token);
+
+  @if $resolved-token == null {
+    $resolved-token: $legacy-token;
+  }
+
+  @return fn.sd-token-var($resolved-token, $fallback, $prefix);
+}

package/es/style/theme/_mixins.scss

@@ -0,0 +1,9 @@
+@use 'sass:meta';
+
+@mixin sd-emit-theme-vars($tokens, $prefix: '--') {
+  @if meta.type-of($tokens) == 'map' {
+    @each $token, $value in $tokens {
+      #{$prefix}#{$token}: #{$value};
+    }
+  }
+}

package/es/style/theme/_tokens.scss

@@ -0,0 +1,18 @@
+@use './functions.scss' as fn;
+@use './legacy-token-aliases.scss' as legacy;
+
+$sd-theme-prefix: '--' !default;
+
+$sd-color-primary-6: fn.sd-token-var('primary-6', '22, 93, 255', $sd-theme-prefix) !default;
+$sd-color-success-6: fn.sd-token-var('success-6', '0, 180, 42', $sd-theme-prefix) !default;
+$sd-color-warning-6: fn.sd-token-var('warning-6', '255, 125, 0', $sd-theme-prefix) !default;
+$sd-color-danger-6: fn.sd-token-var('danger-6', '245, 63, 63', $sd-theme-prefix) !default;
+$sd-color-link-6: fn.sd-token-var('link-6', '22, 93, 255', $sd-theme-prefix) !default;
+$sd-border-radius-medium: fn.sd-token-var('border-radius-medium', '4px', $sd-theme-prefix) !default;
+
+// Legacy aliases for migration window.
+$sd-legacy-color-primary-6: legacy.sd-legacy-token-var(
+  'color-primary-6',
+  '22, 93, 255',
+  $sd-theme-prefix
+) !default;

package/es/style/theme/component.scss

@@ -0,0 +1,21 @@
+@use '@style/theme/global.scss' as *;
+
+/********* icon hover *********/
+$icon-hover-border-radius: $radius-circle;
+$icon-hover-color-bg: $color-fill-2;
+
+$icon-hover-size-default-height: $size-5;
+$icon-hover-size-small-height: $size-5;
+$icon-hover-size-mini-height: $size-5;
+$icon-hover-size-large-height: $size-6;
+$icon-hover-size-huge-height: $size-6;
+
+$icon-hover-size-small-icon: $size-3;
+$icon-hover-size-mini-icon: $size-3;
+$icon-hover-size-default-icon: $size-3;
+$icon-hover-size-large-icon: $size-3;
+$icon-hover-size-huge-icon: $size-3;
+
+// vue overwrite token
+$icon-hover-size-medium-height: $icon-hover-size-default-height;
+$icon-hover-size-medium-icon: $icon-hover-size-default-icon;

package/es/style/theme/css-variables.scss

@@ -0,0 +1,146 @@
+@use 'sass:string';
+@use '@style/theme/index.scss' as theme;
+
+#{theme.$sd-theme-tag} {
+  #{theme.$sd-cssvars-prefix}-color-white: theme.$color-white;
+  #{theme.$sd-cssvars-prefix}-color-black: theme.$color-black;
+  #{theme.$sd-cssvars-prefix}-color-border: theme.$color-border;
+  #{theme.$sd-cssvars-prefix}-color-bg-popup: theme.$color-bg-popup;
+  #{theme.$sd-cssvars-prefix}-color-bg-1: theme.$color-bg-1;
+  #{theme.$sd-cssvars-prefix}-color-bg-2: theme.$color-bg-2;
+  #{theme.$sd-cssvars-prefix}-color-bg-3: theme.$color-bg-3;
+  #{theme.$sd-cssvars-prefix}-color-bg-4: theme.$color-bg-4;
+  #{theme.$sd-cssvars-prefix}-color-bg-5: theme.$color-bg-5;
+  #{theme.$sd-cssvars-prefix}-color-bg-white: theme.$color-bg-white;
+  #{theme.$sd-cssvars-prefix}-color-neutral-1: rgb(
+    var(string.unquote('#{theme.$sd-cssvars-prefix}-gray-1'))
+  );
+  #{theme.$sd-cssvars-prefix}-color-neutral-2: rgb(
+    var(string.unquote('#{theme.$sd-cssvars-prefix}-gray-2'))
+  );
+  #{theme.$sd-cssvars-prefix}-color-neutral-3: rgb(
+    var(string.unquote('#{theme.$sd-cssvars-prefix}-gray-3'))
+  );
+  #{theme.$sd-cssvars-prefix}-color-neutral-4: rgb(
+    var(string.unquote('#{theme.$sd-cssvars-prefix}-gray-4'))
+  );
+  #{theme.$sd-cssvars-prefix}-color-neutral-5: rgb(
+    var(string.unquote('#{theme.$sd-cssvars-prefix}-gray-5'))
+  );
+  #{theme.$sd-cssvars-prefix}-color-neutral-6: rgb(
+    var(string.unquote('#{theme.$sd-cssvars-prefix}-gray-6'))
+  );
+  #{theme.$sd-cssvars-prefix}-color-neutral-7: rgb(
+    var(string.unquote('#{theme.$sd-cssvars-prefix}-gray-7'))
+  );
+  #{theme.$sd-cssvars-prefix}-color-neutral-8: rgb(
+    var(string.unquote('#{theme.$sd-cssvars-prefix}-gray-8'))
+  );
+  #{theme.$sd-cssvars-prefix}-color-neutral-9: rgb(
+    var(string.unquote('#{theme.$sd-cssvars-prefix}-gray-9'))
+  );
+  #{theme.$sd-cssvars-prefix}-color-neutral-10: rgb(
+    var(string.unquote('#{theme.$sd-cssvars-prefix}-gray-10'))
+  );
+  #{theme.$sd-cssvars-prefix}-color-text-1: theme.$color-text-1;
+  #{theme.$sd-cssvars-prefix}-color-text-2: theme.$color-text-2;
+  #{theme.$sd-cssvars-prefix}-color-text-3: theme.$color-text-3;
+  #{theme.$sd-cssvars-prefix}-color-text-4: theme.$color-text-4;
+  #{theme.$sd-cssvars-prefix}-color-border-1: theme.$color-border-1;
+  #{theme.$sd-cssvars-prefix}-color-border-2: theme.$color-border-2;
+  #{theme.$sd-cssvars-prefix}-color-border-3: theme.$color-border-3;
+  #{theme.$sd-cssvars-prefix}-color-border-4: theme.$color-border-4;
+  #{theme.$sd-cssvars-prefix}-color-fill-1: theme.$color-fill-1;
+  #{theme.$sd-cssvars-prefix}-color-fill-2: theme.$color-fill-2;
+  #{theme.$sd-cssvars-prefix}-color-fill-3: theme.$color-fill-3;
+  #{theme.$sd-cssvars-prefix}-color-fill-4: theme.$color-fill-4;
+  #{theme.$sd-cssvars-prefix}-color-primary-light-1: theme.$color-primary-light-1;
+  #{theme.$sd-cssvars-prefix}-color-primary-light-2: theme.$color-primary-light-2;
+  #{theme.$sd-cssvars-prefix}-color-primary-light-3: theme.$color-primary-light-3;
+  #{theme.$sd-cssvars-prefix}-color-primary-light-4: theme.$color-primary-light-4;
+  #{theme.$sd-cssvars-prefix}-color-link-light-1: theme.$color-link-light-1;
+  #{theme.$sd-cssvars-prefix}-color-link-light-2: theme.$color-link-light-2;
+  #{theme.$sd-cssvars-prefix}-color-link-light-3: theme.$color-link-light-3;
+  #{theme.$sd-cssvars-prefix}-color-link-light-4: theme.$color-link-light-4;
+  #{theme.$sd-cssvars-prefix}-color-secondary: theme.$color-secondary;
+  #{theme.$sd-cssvars-prefix}-color-secondary-hover: theme.$color-secondary-hover;
+  #{theme.$sd-cssvars-prefix}-color-secondary-active: theme.$color-secondary-active;
+  #{theme.$sd-cssvars-prefix}-color-secondary-disabled: theme.$color-secondary-disabled;
+  #{theme.$sd-cssvars-prefix}-color-danger-light-1: theme.$color-danger-light-1;
+  #{theme.$sd-cssvars-prefix}-color-danger-light-2: theme.$color-danger-light-2;
+  #{theme.$sd-cssvars-prefix}-color-danger-light-3: theme.$color-danger-light-3;
+  #{theme.$sd-cssvars-prefix}-color-danger-light-4: theme.$color-danger-light-4;
+  #{theme.$sd-cssvars-prefix}-color-success-light-1: theme.$color-success-light-1;
+  #{theme.$sd-cssvars-prefix}-color-success-light-2: theme.$color-success-light-2;
+  #{theme.$sd-cssvars-prefix}-color-success-light-3: theme.$color-success-light-3;
+  #{theme.$sd-cssvars-prefix}-color-success-light-4: theme.$color-success-light-4;
+  #{theme.$sd-cssvars-prefix}-color-warning-light-1: theme.$color-warning-light-1;
+  #{theme.$sd-cssvars-prefix}-color-warning-light-2: theme.$color-warning-light-2;
+  #{theme.$sd-cssvars-prefix}-color-warning-light-3: theme.$color-warning-light-3;
+  #{theme.$sd-cssvars-prefix}-color-warning-light-4: theme.$color-warning-light-4;
+
+  // radius
+  #{theme.$sd-cssvars-prefix}-border-radius-none: theme.$border-radius-none;
+  #{theme.$sd-cssvars-prefix}-border-radius-small: theme.$border-radius-small;
+  #{theme.$sd-cssvars-prefix}-border-radius-medium: theme.$border-radius-medium;
+  #{theme.$sd-cssvars-prefix}-border-radius-large: theme.$border-radius-large;
+  #{theme.$sd-cssvars-prefix}-border-radius-circle: theme.$border-radius-circle;
+  // component
+  #{theme.$sd-cssvars-prefix}-color-tooltip-bg: theme.$color-tooltip-bg;
+  #{theme.$sd-cssvars-prefix}-color-spin-layer-bg: theme.$color-spin-layer-bg;
+  #{theme.$sd-cssvars-prefix}-color-menu-dark-bg: theme.$color-menu-dark-bg;
+  #{theme.$sd-cssvars-prefix}-color-menu-light-bg: theme.$color-menu-light-bg;
+  #{theme.$sd-cssvars-prefix}-color-menu-dark-hover: theme.$color-menu-dark-hover;
+  #{theme.$sd-cssvars-prefix}-color-mask-bg: theme.$mask-color-bg;
+}
+
+#{theme.$sd-theme-tag}[sd-theme='dark'] {
+  #{theme.$sd-cssvars-prefix}-color-white: theme.$dark-color-white;
+  #{theme.$sd-cssvars-prefix}-color-black: theme.$dark-color-black;
+  #{theme.$sd-cssvars-prefix}-color-border: theme.$dark-color-border;
+  #{theme.$sd-cssvars-prefix}-color-bg-1: theme.$dark-color-bg-1;
+  #{theme.$sd-cssvars-prefix}-color-bg-2: theme.$dark-color-bg-2;
+  #{theme.$sd-cssvars-prefix}-color-bg-3: theme.$dark-color-bg-3;
+  #{theme.$sd-cssvars-prefix}-color-bg-4: theme.$dark-color-bg-4;
+  #{theme.$sd-cssvars-prefix}-color-bg-5: theme.$dark-color-bg-5;
+  #{theme.$sd-cssvars-prefix}-color-bg-white: theme.$dark-color-bg-white;
+  #{theme.$sd-cssvars-prefix}-color-text-1: theme.$dark-color-text-1;
+  #{theme.$sd-cssvars-prefix}-color-text-2: theme.$dark-color-text-2;
+  #{theme.$sd-cssvars-prefix}-color-text-3: theme.$dark-color-text-3;
+  #{theme.$sd-cssvars-prefix}-color-text-4: theme.$dark-color-text-4;
+  #{theme.$sd-cssvars-prefix}-color-fill-1: theme.$dark-color-fill-1;
+  #{theme.$sd-cssvars-prefix}-color-fill-2: theme.$dark-color-fill-2;
+  #{theme.$sd-cssvars-prefix}-color-fill-3: theme.$dark-color-fill-3;
+  #{theme.$sd-cssvars-prefix}-color-fill-4: theme.$dark-color-fill-4;
+  #{theme.$sd-cssvars-prefix}-color-primary-light-1: theme.$dark-color-primary-light-1;
+  #{theme.$sd-cssvars-prefix}-color-primary-light-2: theme.$dark-color-primary-light-2;
+  #{theme.$sd-cssvars-prefix}-color-primary-light-3: theme.$dark-color-primary-light-3;
+  #{theme.$sd-cssvars-prefix}-color-primary-light-4: theme.$dark-color-primary-light-4;
+  #{theme.$sd-cssvars-prefix}-color-secondary: theme.$dark-color-secondary;
+  #{theme.$sd-cssvars-prefix}-color-secondary-hover: theme.$dark-color-secondary-hover;
+  #{theme.$sd-cssvars-prefix}-color-secondary-active: theme.$dark-color-secondary-active;
+  #{theme.$sd-cssvars-prefix}-color-secondary-disabled: theme.$dark-color-secondary-disabled;
+  #{theme.$sd-cssvars-prefix}-color-danger-light-1: theme.$dark-color-danger-light-1;
+  #{theme.$sd-cssvars-prefix}-color-danger-light-2: theme.$dark-color-danger-light-2;
+  #{theme.$sd-cssvars-prefix}-color-danger-light-3: theme.$dark-color-danger-light-3;
+  #{theme.$sd-cssvars-prefix}-color-danger-light-4: theme.$dark-color-danger-light-4;
+  #{theme.$sd-cssvars-prefix}-color-success-light-1: theme.$dark-color-success-light-1;
+  #{theme.$sd-cssvars-prefix}-color-success-light-2: theme.$dark-color-success-light-2;
+  #{theme.$sd-cssvars-prefix}-color-success-light-3: theme.$dark-color-success-light-3;
+  #{theme.$sd-cssvars-prefix}-color-success-light-4: theme.$dark-color-success-light-4;
+  #{theme.$sd-cssvars-prefix}-color-warning-light-1: theme.$dark-color-warning-light-1;
+  #{theme.$sd-cssvars-prefix}-color-warning-light-2: theme.$dark-color-warning-light-2;
+  #{theme.$sd-cssvars-prefix}-color-warning-light-3: theme.$dark-color-warning-light-3;
+  #{theme.$sd-cssvars-prefix}-color-warning-light-4: theme.$dark-color-warning-light-4;
+  #{theme.$sd-cssvars-prefix}-color-link-light-1: theme.$dark-color-link-light-1;
+  #{theme.$sd-cssvars-prefix}-color-link-light-2: theme.$dark-color-link-light-2;
+  #{theme.$sd-cssvars-prefix}-color-link-light-3: theme.$dark-color-link-light-3;
+  #{theme.$sd-cssvars-prefix}-color-link-light-4: theme.$dark-color-link-light-4;
+  // component
+  #{theme.$sd-cssvars-prefix}-color-tooltip-bg: theme.$dark-color-tooltip-bg;
+  #{theme.$sd-cssvars-prefix}-color-spin-layer-bg: theme.$dark-color-spin-layer-bg;
+  #{theme.$sd-cssvars-prefix}-color-menu-dark-bg: theme.$color-menu-dark-bg;
+  #{theme.$sd-cssvars-prefix}-color-menu-light-bg: theme.$color-menu-dark-bg;
+  #{theme.$sd-cssvars-prefix}-color-menu-dark-hover: theme.$dark-color-menu-dark-hover;
+  #{theme.$sd-cssvars-prefix}-color-mask-bg: theme.$dark-mask-color-bg;
+}