Generated by SassMeister.com.

input.scss

// sass-lint:disable no-duplicate-properties

// Text colors
$theme-stroke-1: #323233 !default; // text
$theme-stroke-2: #646566 !default; // text
$theme-stroke-3: #969799 !default; // help text
$theme-stroke-4: #c8c9cc !default; // disabled text

// Border and line colors
$theme-stroke-5: #dcdee0 !default;
$theme-stroke-6: #ebedf0 !default;

// Background colors
$theme-stroke-7: #f2f3f5 !default;
$theme-stroke-8: #f7f8fa !default;
$theme-stroke-9: #fff !default; // White button normal background color

// Button background color
$theme-stroke-10: #eaeaea !default; // Active
$theme-stroke-11: #f4f5f5 !default; // Hover

// Blue(primary)
$theme-primary-1: #0a2a61 !default;
$theme-primary-2: #10439b !default;
$theme-primary-3: #114db4 !default;
$theme-primary-4: #155bd4 !default;
$theme-primary-5: #3773da !default;
$theme-primary-6: #5487df !default;
$theme-primary-7: #94b4eb !default;
$theme-primary-8: #edf4ff !default;

// Green
$theme-success-1: #268d37 !default;
$theme-success-2: #2da641 !default;
$theme-success-3: #4cb35d !default;
$theme-success-4: #66be74 !default;
$theme-success-5: #f0faf2 !default;

// Red
$theme-error-1: #b40000 !default;
$theme-error-2: #d40000 !default;
$theme-error-3: #da2626 !default;
$theme-error-4: #df4545 !default;
$theme-error-5: #ffebeb !default;

// Orange
$theme-warn-1: #c95a0a !default;
$theme-warn-2: #ed6a0c !default;
$theme-warn-3: #ef8030 !default;
$theme-warn-4: #f1924e !default;
$theme-warn-5: #fff5ed !default;

// Shadow
$shadow-spec-focus: 0 0 4px 0 rgba($theme-primary-1, 0.2) !default;
$shadow-spec-layer: 0 2px 8px 0 rgba($theme-stroke-4, 0.5) !default;
$shadow-spec-modal: 0 2px 24px 0 rgba($theme-stroke-4, 0.5) !default;

// Rate color
$rate-star-color: #fad20c !default;

$loading-icon-youzan-color: #e00 !default;

// !!! DO NOT USE !!!
// These variables will be removed
$notify-error: rgba(255, 68, 68, 0.8);
$notify-success: rgba(68, 187, 136, 0.8);

$theme-colors: (
  'stroke': (
    $theme-stroke-1,
    $theme-stroke-2,
    $theme-stroke-3,
    $theme-stroke-4,
    $theme-stroke-5,
    $theme-stroke-6,
    $theme-stroke-7,
    $theme-stroke-8,
    $theme-stroke-9,
    $theme-stroke-10,
    $theme-stroke-11,
  ),
  'primary': (
    $theme-primary-1,
    $theme-primary-2,
    $theme-primary-3,
    $theme-primary-4,
    $theme-primary-5,
    $theme-primary-6,
    $theme-primary-7,
    $theme-primary-8,
  ),
  'success': (
    $theme-success-1,
    $theme-success-2,
    $theme-success-3,
    $theme-success-4,
    $theme-success-5,
  ),
  'error': (
    $theme-error-1,
    $theme-error-2,
    $theme-error-3,
    $theme-error-4,
    $theme-error-5,
  ),
  'warn': (
    $theme-warn-1,
    $theme-warn-2,
    $theme-warn-3,
    $theme-warn-4,
    $theme-warn-5,
  ),
);

$theme-shadow: (
  'focus': $shadow-spec-focus,
  'layer': $shadow-spec-layer,
  'modal': $shadow-spec-modal,
);

@function get-color($cat, $i) {
  @return nth(map-get($theme-colors, $cat), $i);
}

@function to-rgb($color) {
  @return red($color), green($color), blue($color);
}

@mixin theme-color($prop, $cat, $i, $opacity: 1) {
  $color: get-color($cat, $i);

//   @if $opacity < 1 {
//     $color: rgba($color, $opacity);
//   }

  #{$prop}: $color;
  #{$prop}: rgba(var(--theme-#{$cat}-#{$i}, to-rgb($color)), $opacity);
}

@mixin theme-shadow($name) {
  $color: map-get($theme-shadow, $name);

  box-shadow: $color;
  box-shadow: var(--shadow-spec-#{$name}, $color);
}

@mixin theme-border-impl($prop, $width, $style, $cat, $i, $opacity) {
  $color: get-color($cat, $i);

  @if $opacity < 1 {
    $color: rgba($color, $opacity);
  }

  #{$prop}: $width $style $color;
  #{$prop}: $width $style var(--theme-#{$cat}-#{$i}, $color);
}

@mixin theme-border($width, $style, $cat, $i, $opacity: 1) {
    @include theme-border-impl(border, $width, $style, $cat, $i, $opacity);
}

@mixin theme-border-top($width, $style, $cat, $i, $opacity: 1) {
    @include theme-border-impl(border-top, $width, $style, $cat, $i, $opacity);
}

@mixin theme-border-right($width, $style, $cat, $i, $opacity: 1) {
    @include theme-border-impl(border-right, $width, $style, $cat, $i, $opacity);
}

@mixin theme-border-bottom($width, $style, $cat, $i, $opacity: 1) {
    @include theme-border-impl(border-bottom, $width, $style, $cat, $i, $opacity);
}

@mixin theme-border-left($width, $style, $cat, $i, $opacity: 1) {
    @include theme-border-impl(border-left, $width, $style, $cat, $i, $opacity);
}

@mixin default-theme-variables {
  @each $cat, $list in $theme-colors {
    @for $i from 1 through length($list) {
      #{--theme-#{$cat}-#{$i}}: nth($list, $i);
    }
  }
}


body {
    // 颜色
    @include theme-color(color, primary, 4, 0.5);
    @include theme-color(background-color, primary, 4);
    // @include theme-color(color, primary, 4, 0.8); // 0.8 是不透明度
    
    // // 边框
    // border: 1px solid #fff
    // @include theme-border(1px, solid, stroke, 4);
    // @include theme-border(1px, solid, stroke, 4, 0.8); // 0.8 是不透明度
    
    // // border 变体
    // @include theme-border-left(1px, solid, primary, 4);
    // @include theme-border-right(1px, solid, primary, 4, 0.6);
    // @include theme-border-top(1px, solid, primary, 4);
    // @include theme-border-bottom(1px, solid, primary, 4);
    
    // @include theme-shadow(layer);
    // box-shadow: 0 2px 8px 0 rgba(200, 201, 204, 0.5);
    // box-shadow: var(--shadow-spec-layer, 0 2px 8px 0 rgba(200, 201, 204, 0.5))
}

output.css

body {
  color: #155bd4;
  color: rgba(var(--theme-primary-4, 21, 91, 212), 0.5);
  background-color: #155bd4;
  background-color: rgba(var(--theme-primary-4, 21, 91, 212), 1);
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.26.11",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}