Generated by SassMeister.com.

input.scss

$colors-primitives: (
brand-navy-800: #0E162F,
brand-navy-700: #1B2A58,
brand-navy-600: #394876,
brand-navy-500: #616A85,
brand-navy-400: #868A97,
brand-navy-300: #A8ACBB,
brand-navy-200: #C1C5D0,
brand-navy-100: #D7DAE4,
brand-navy-50: #E9EDF3,
brand-yellow-800: #846B00,
brand-yellow-700: #AC930D,
brand-yellow-600: #D0B41F,
brand-yellow-500: #EBCA0A,
brand-yellow-400: #FFDE11,
brand-yellow-300: #FFEB33,
brand-yellow-200: #FFF096,
brand-yellow-100: #FFF7C3,
brand-yellow-50: #FFFCE7,
brand-red-800: #970201,
brand-red-700: #B01005,
brand-red-600: #C11802,
brand-red-500: #D02910,
brand-red-400: #E43D24,
brand-red-300: #F46C55,
brand-red-200: #F19E91,
brand-red-100: #F8CEC8,
brand-red-50: #FCECE9,
brand-blue-800: #0E1630,
brand-blue-700: #071644,
brand-blue-600: #142C7D,
brand-blue-500: #324A9B,
brand-blue-400: #5068B9,
brand-blue-300: #778BD0,
brand-blue-200: #ACB8E1,
brand-blue-100: #DFE5F6,
brand-blue-50: #EBEDF5,
neutral-lc: #FFFFFF,
neutral-hc: #1F1F1F,
gray-800: #333333,
gray-700: #484848,
gray-600: #646464,
gray-500: #868686,
gray-400: #A3A3A3,
gray-300: #C2C2C2,
gray-200: #D9D9D9,
gray-100: #EAEAEA,
gray-50: #F8F8F8,
emerald-800: #08740A,
emerald-700: #269228,
emerald-600: #3AA63C,
emerald-500: #58C45A,
emerald-400: #73D775,
emerald-300: #8EE590,
emerald-200: #ACF1AB,
emerald-100: #C6F5C8,
emerald-50: #DCFADC,
scarlet-800: #8E0000,
scarlet-700: #AC0000,
scarlet-600: #CA0F1C,
scarlet-500: #DA3737,
scarlet-400: #E85454,
scarlet-300: #FC8078,
scarlet-200: #F7A199,
scarlet-100: #F5C0B7,
scarlet-50: #FFDED5,
pacific-800: #001E8E,
pacific-700: #003CAC,
pacific-600: #0F5ACA,
pacific-500: #236EDE,
pacific-400: #418CFC,
pacific-300: #64AAFF,
pacific-200: #82C8FF,
pacific-100: #AAE4FF,
pacific-50: #C5F0FB,
carrot-800: #8F3600,
carrot-700: #AD5400,
carrot-600: #C16800,
carrot-500: #DF8600,
carrot-400: #F39A14,
carrot-300: #FFAE28,
carrot-200: #F6BE41,
carrot-100: #FFD178,
carrot-50: #FFE2AA,
lemon-800: #805C00,
lemon-700: #A88400,
lemon-600: #D0AC00,
lemon-500: #EECA04,
lemon-400: #F9D816,
lemon-300: #FFEA6D,
lemon-200: #FFEE87,
lemon-100: #FFFCAA,
lemon-50: #FCFCC1,
ocean-800: #004D4D,
ocean-700: #006B6B,
ocean-600: #009D9D,
ocean-500: #0AC5C5,
ocean-400: #3BD9D9,
ocean-300: #90E3DE,
ocean-200: #9EEBE6,
ocean-100: #C2F2F1,
ocean-50: #E7FEFE,
);



$colors-core: (
surface: neutral-lc,
on-surface: gray-800,
primary: brand-yellow-400,
secondary: brand-navy-800,
interactive: brand-red-600,
system-critical: scarlet-600,
system-warning: carrot-500,
system-success: emerald-600,
system-highlight: pacific-600,
system-alert: lemon-300,
system-critical-light: scarlet-100,
system-warning-light: carrot-100,
system-success-light: emerald-100,
system-highlight-light: pacific-100,
system-alert-light: lemon-100,
system-completed-light: gray-100,
);

$colors-action: (
actions-primary-default: brand-yellow-400,
actions-primary-hover: brand-yellow-600,
actions-primary-disabled: brand-yellow-200,
actions-secondary-default: brand-navy-800,
actions-secondary-hover: brand-navy-600,
actions-secondary-disabled: brand-navy-500,
actions-critical-default: system-critical,
actions-critical-hover: scarlet-400,
actions-critical-disabled: scarlet-100,
actions-action-on-hc-default: neutral-lc,
actions-action-on-hc-hover: gray-50,
actions-action-on-hc-disabled: gray-100,
);

$colors-background: (
background-default: gray-50,
background-hover: gray-100,
background-pressed: gray-200,
background-selected: gray-300,
background-hc: gray-100,
background-hc-hover: gray-200,
background-hc-pressed: gray-300,
background-hc-selected: gray-400,
);

$colors-text: (
text-default: black,
text-subdued: gray-600,
text-disabled: gray-300,
text-critical: system-critical,
text-success: emerald-800,
text-on-primary: gray-800,
text-on-secondary: white,
text-on-hollow: gray-800,
text-on-interactive: white,
text-on-alert: gray-800,
);

$colors-stroke: (
stroke-default: gray-300,
stroke-subdued: gray-200,
stroke-hover: gray-400,
stroke-critical: system-critical,
stroke-critical-hover: scarlet-400,
stroke-critical-disabled: scarlet-100,
stroke-active: brand-yellow-400,
stroke-active-subdued: brand-yellow-600,
stroke-success: system-success,
stroke-success-subdued: emerald-400,
stroke-on-hc: neutral-lc,
stroke-on-interactive: neutral-lc,
);

$colors-surface: (
surface-default: neutral-lc,
surface-subdued: gray-50,
surface-hover: gray-100,
surface-depressed: gray-200,
surface-disabled: gray-100,
surface-pressed: gray-400,
surface-selected-default: brand-navy-800,
surface-selected-hover: brand-navy-600,
surface-selected-disabled: brand-navy-500,
surface-hc: brand-navy-800,
surface-hc-hover: brand-navy-600,
surface-success-default: emerald-600,
surface-success-hover: emerald-400,
surface-success-pressed: emerald-800,
);

// Move to functions
@function map-collect($maps...) {
  $collection: ();

  @each $map in $maps {
    $collection: map-merge($collection, $map);
  }
  @return $collection;
}

$colors-list: map-collect(
$colors-core,
$colors-action,
$colors-background,
$colors-text,
$colors-stroke,
$colors-surface,
);

:root {
  /*
  Colors primitives generator
  */
  @each $color, $value in $colors-primitives {
      --color-#{$color}: #{$value};
  }
  
  /*
  Colors generator
  */
  @each $color, $value in $colors-list {
      --color-#{$color}: var(--color-#{$value});
  } 
}

@function color($arg) {  
  @return --color-#{$arg};
}

@mixin color-type($color) {
    color: var(--color-#{$color});
}

@mixin color-border($color) {
    border-color: var(--color-#{$color});
}

@mixin color-background($color) {
    background-color: var(--color-#{$color});
}




div {
    @include color-type(surface);
    @include color-background(stroke);
    @include color-border(stroke-default);
    
    border: 2px solid color(stroke-default);
    
    &:hover {
        @include color-border(stroke-hover)
    }
}

output.css

:root {
  /*
  Colors primitives generator
  */
  --color-brand-navy-800: #0E162F;
  --color-brand-navy-700: #1B2A58;
  --color-brand-navy-600: #394876;
  --color-brand-navy-500: #616A85;
  --color-brand-navy-400: #868A97;
  --color-brand-navy-300: #A8ACBB;
  --color-brand-navy-200: #C1C5D0;
  --color-brand-navy-100: #D7DAE4;
  --color-brand-navy-50: #E9EDF3;
  --color-brand-yellow-800: #846B00;
  --color-brand-yellow-700: #AC930D;
  --color-brand-yellow-600: #D0B41F;
  --color-brand-yellow-500: #EBCA0A;
  --color-brand-yellow-400: #FFDE11;
  --color-brand-yellow-300: #FFEB33;
  --color-brand-yellow-200: #FFF096;
  --color-brand-yellow-100: #FFF7C3;
  --color-brand-yellow-50: #FFFCE7;
  --color-brand-red-800: #970201;
  --color-brand-red-700: #B01005;
  --color-brand-red-600: #C11802;
  --color-brand-red-500: #D02910;
  --color-brand-red-400: #E43D24;
  --color-brand-red-300: #F46C55;
  --color-brand-red-200: #F19E91;
  --color-brand-red-100: #F8CEC8;
  --color-brand-red-50: #FCECE9;
  --color-brand-blue-800: #0E1630;
  --color-brand-blue-700: #071644;
  --color-brand-blue-600: #142C7D;
  --color-brand-blue-500: #324A9B;
  --color-brand-blue-400: #5068B9;
  --color-brand-blue-300: #778BD0;
  --color-brand-blue-200: #ACB8E1;
  --color-brand-blue-100: #DFE5F6;
  --color-brand-blue-50: #EBEDF5;
  --color-neutral-lc: #FFFFFF;
  --color-neutral-hc: #1F1F1F;
  --color-gray-800: #333333;
  --color-gray-700: #484848;
  --color-gray-600: #646464;
  --color-gray-500: #868686;
  --color-gray-400: #A3A3A3;
  --color-gray-300: #C2C2C2;
  --color-gray-200: #D9D9D9;
  --color-gray-100: #EAEAEA;
  --color-gray-50: #F8F8F8;
  --color-emerald-800: #08740A;
  --color-emerald-700: #269228;
  --color-emerald-600: #3AA63C;
  --color-emerald-500: #58C45A;
  --color-emerald-400: #73D775;
  --color-emerald-300: #8EE590;
  --color-emerald-200: #ACF1AB;
  --color-emerald-100: #C6F5C8;
  --color-emerald-50: #DCFADC;
  --color-scarlet-800: #8E0000;
  --color-scarlet-700: #AC0000;
  --color-scarlet-600: #CA0F1C;
  --color-scarlet-500: #DA3737;
  --color-scarlet-400: #E85454;
  --color-scarlet-300: #FC8078;
  --color-scarlet-200: #F7A199;
  --color-scarlet-100: #F5C0B7;
  --color-scarlet-50: #FFDED5;
  --color-pacific-800: #001E8E;
  --color-pacific-700: #003CAC;
  --color-pacific-600: #0F5ACA;
  --color-pacific-500: #236EDE;
  --color-pacific-400: #418CFC;
  --color-pacific-300: #64AAFF;
  --color-pacific-200: #82C8FF;
  --color-pacific-100: #AAE4FF;
  --color-pacific-50: #C5F0FB;
  --color-carrot-800: #8F3600;
  --color-carrot-700: #AD5400;
  --color-carrot-600: #C16800;
  --color-carrot-500: #DF8600;
  --color-carrot-400: #F39A14;
  --color-carrot-300: #FFAE28;
  --color-carrot-200: #F6BE41;
  --color-carrot-100: #FFD178;
  --color-carrot-50: #FFE2AA;
  --color-lemon-800: #805C00;
  --color-lemon-700: #A88400;
  --color-lemon-600: #D0AC00;
  --color-lemon-500: #EECA04;
  --color-lemon-400: #F9D816;
  --color-lemon-300: #FFEA6D;
  --color-lemon-200: #FFEE87;
  --color-lemon-100: #FFFCAA;
  --color-lemon-50: #FCFCC1;
  --color-ocean-800: #004D4D;
  --color-ocean-700: #006B6B;
  --color-ocean-600: #009D9D;
  --color-ocean-500: #0AC5C5;
  --color-ocean-400: #3BD9D9;
  --color-ocean-300: #90E3DE;
  --color-ocean-200: #9EEBE6;
  --color-ocean-100: #C2F2F1;
  --color-ocean-50: #E7FEFE;
  /*
  Colors generator
  */
  --color-surface: var(--color-neutral-lc);
  --color-on-surface: var(--color-gray-800);
  --color-primary: var(--color-brand-yellow-400);
  --color-secondary: var(--color-brand-navy-800);
  --color-interactive: var(--color-brand-red-600);
  --color-system-critical: var(--color-scarlet-600);
  --color-system-warning: var(--color-carrot-500);
  --color-system-success: var(--color-emerald-600);
  --color-system-highlight: var(--color-pacific-600);
  --color-system-alert: var(--color-lemon-300);
  --color-system-critical-light: var(--color-scarlet-100);
  --color-system-warning-light: var(--color-carrot-100);
  --color-system-success-light: var(--color-emerald-100);
  --color-system-highlight-light: var(--color-pacific-100);
  --color-system-alert-light: var(--color-lemon-100);
  --color-system-completed-light: var(--color-gray-100);
  --color-actions-primary-default: var(--color-brand-yellow-400);
  --color-actions-primary-hover: var(--color-brand-yellow-600);
  --color-actions-primary-disabled: var(--color-brand-yellow-200);
  --color-actions-secondary-default: var(--color-brand-navy-800);
  --color-actions-secondary-hover: var(--color-brand-navy-600);
  --color-actions-secondary-disabled: var(--color-brand-navy-500);
  --color-actions-critical-default: var(--color-system-critical);
  --color-actions-critical-hover: var(--color-scarlet-400);
  --color-actions-critical-disabled: var(--color-scarlet-100);
  --color-actions-action-on-hc-default: var(--color-neutral-lc);
  --color-actions-action-on-hc-hover: var(--color-gray-50);
  --color-actions-action-on-hc-disabled: var(--color-gray-100);
  --color-background-default: var(--color-gray-50);
  --color-background-hover: var(--color-gray-100);
  --color-background-pressed: var(--color-gray-200);
  --color-background-selected: var(--color-gray-300);
  --color-background-hc: var(--color-gray-100);
  --color-background-hc-hover: var(--color-gray-200);
  --color-background-hc-pressed: var(--color-gray-300);
  --color-background-hc-selected: var(--color-gray-400);
  --color-text-default: var(--color-black);
  --color-text-subdued: var(--color-gray-600);
  --color-text-disabled: var(--color-gray-300);
  --color-text-critical: var(--color-system-critical);
  --color-text-success: var(--color-emerald-800);
  --color-text-on-primary: var(--color-gray-800);
  --color-text-on-secondary: var(--color-white);
  --color-text-on-hollow: var(--color-gray-800);
  --color-text-on-interactive: var(--color-white);
  --color-text-on-alert: var(--color-gray-800);
  --color-stroke-default: var(--color-gray-300);
  --color-stroke-subdued: var(--color-gray-200);
  --color-stroke-hover: var(--color-gray-400);
  --color-stroke-critical: var(--color-system-critical);
  --color-stroke-critical-hover: var(--color-scarlet-400);
  --color-stroke-critical-disabled: var(--color-scarlet-100);
  --color-stroke-active: var(--color-brand-yellow-400);
  --color-stroke-active-subdued: var(--color-brand-yellow-600);
  --color-stroke-success: var(--color-system-success);
  --color-stroke-success-subdued: var(--color-emerald-400);
  --color-stroke-on-hc: var(--color-neutral-lc);
  --color-stroke-on-interactive: var(--color-neutral-lc);
  --color-surface-default: var(--color-neutral-lc);
  --color-surface-subdued: var(--color-gray-50);
  --color-surface-hover: var(--color-gray-100);
  --color-surface-depressed: var(--color-gray-200);
  --color-surface-disabled: var(--color-gray-100);
  --color-surface-pressed: var(--color-gray-400);
  --color-surface-selected-default: var(--color-brand-navy-800);
  --color-surface-selected-hover: var(--color-brand-navy-600);
  --color-surface-selected-disabled: var(--color-brand-navy-500);
  --color-surface-hc: var(--color-brand-navy-800);
  --color-surface-hc-hover: var(--color-brand-navy-600);
  --color-surface-success-default: var(--color-emerald-600);
  --color-surface-success-hover: var(--color-emerald-400);
  --color-surface-success-pressed: var(--color-emerald-800);
}

div {
  color: var(--color-surface);
  background-color: var(--color-stroke);
  border-color: var(--color-stroke-default);
  border: 2px solid --color-stroke-default;
}
div:hover {
  border-color: var(--color-stroke-hover);
}

settings.json

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