Получить вариант цвета с Mixin и Sass

Question

Глядя на текущий сценарий во фрагменте ниже, я хочу автоматически смешать цветовую переменную.

Так что, если у меня есть dark-sufix, чтобы получить темные варианты, если у меня есть светлые варианты, чтобы получить темные варианты ...

Предположим, что я знаю свою цветовую базу, я хочу, чтобы каждый раз, когда я вставлял свой базовый цвет, вставлял свой базовый цвет, например:

Если у меня цвет фона: темный-400, чтобы получить верхнюю часть тени ... 300 и правую / нижнюю ... 200. Поэтому каждый раз, когда я увеличиваю свой цвет фона, чтобы получить превосходный уровень для моих границ ...

возможно ли это сделать через миксин? или есть какие-то нахальные функции для этого? Я новичок в этом, поэтому не стесняйтесь судить меня.

$border-sm: 10px;

/**
 * Dark Theme Color Palette
*/

$dark-color-100: hsl(210, 20%, 16%);
$dark-color-200: lighten(desaturate($dark-color-100, 4%), 18%);
$dark-color-300: lighten(desaturate($dark-color-200, 5%), 25%);
$dark-color-400: lighten(desaturate($dark-color-300, 3%), 15%);
$dark-color-500: lighten(desaturate($dark-color-400, 2%), 6%);

/**
 * Light Theme Color Palette
*/

$light-color-100: hsl(210, 1%, 98%);
$light-color-200: darken(saturate($light-color-100, 2%), 4%);
$light-color-300: darken(saturate($light-color-200, 0%), 4%);
$light-color-400: darken(saturate($light-color-300, 3%), 5%);
$light-color-500: darken(saturate($light-color-400, 2%), 6%);


/**
 * Element Style Mixin
*/

@mixin box-shadow($params) {
  -webkit-box-shadow: $params;
  -moz-box-shadow: $params;
  box-shadow: $params;
}

/**
 * Params Configuration ( Inverted Color Suite )
*/

// Colour Mix for light surface

$box-shadows-inset-light: 
  -$border-sm 0px 0px 0px $light-color-300 inset,
    0px 0px -$border-sm 0px rgba($light-color-300, 0.7) inset, 
      0px $border-sm 0px 0px $light-color-100 inset;


// Color Mix for dark surface

$box-shadows-inset-dark:
  -$border-sm 0px 0px 0px $dark-color-100 inset,
    0px 0px -$border-sm 0px rgba($dark-color-100, 0.7) inset, 
      0px $border-sm 0px 0px $dark-color-300 inset;