Variables Theme use this with a basic uikit

Get UiKit 3 scss & css variables color

/* 
Variables Theme
use this with a basic uikit
Change [data-theme="default"] for body
https://gist.github.com/npofopr/af373c6d02958c913ad32f2d7b945996
https://codepen.io/npofopr/pen/MdjZON
*/

:root, [data-theme="default"] {
  --primary: 266, 100%;
  --l: 50%;

  --success: 0, 0%;
  --danger: 349, 84%;
  --action: 56, 100%;
  --text: 120, 5%;
  --energy: 318, 76%;
  --global:0, 0%;
  --muted: 0, 0%;
  --alert-primary: 210, 86%;
  --alert-success: 159, 84%;
  --alert-warning: 28, 100%;
  --alert-danger: 348, 83%;

  --color-primary: hsl(var(--primary),var(--l));
  --color-primary-active: hsl(var(--primary),calc(var(--l) - 5%));
  --coloe-success: hsl(var(--success),calc(var(--l) - 37%));
  --coloe-danger: hsl(var(--danger),calc(var(--l) + 13%));
  --color-action: hsl(var(--action),var(--l));
  --color-text: hsl(var(--text),calc(var(--l) - 20%));
  --color-energy: hsl(var(--energy),calc(var(--l) - 2%));
  --color-global: hsl(var(--global),calc(var(--l) - 23%));
  --color-muted: hsl(var(--muted),calc(var(--l) + 10%));

  --color-icon-link-active: hsl(var(--global),var(--l));

  --color-alert-primary: hsl(var(--alert-primary),calc(var(--l) + 42%));
  --color-alert-success: hsl(var(--alert-success),calc(var(--l) + 46%));
  --color-alert-warning: hsl(var(--alert-warning),calc(var(--l) + 47%));
  --color-alert-danger: hsl(var(--alert-danger),calc(var(--l) + 48%));

  --color-button-primary-hover-background: hsl(var(--color-primary),calc(var(--l) - 5%));
  --color-button-primary-active-background: hsl(var(--color-primary),calc(var(--l) - 10%));
  --color-button-secondary-hover-background: hsl(var(--color-secondary),calc(var(--l) - 5%));
  --color-button-secondary-active-background: hsl(var(--color-secondary),calc(var(--l) - 10%));
  --color-button-danger-hover-background: hsl(var(--color-danger),calc(var(--l) - 5%));
  --color-button-danger-active-background: hsl(var(--color-danger),calc(var(--l) - 10%));

  --color-form-radio-checked-focus-background: hsl(var(--color-primary),calc(var(--l) - 10%));
}

[data-theme="yellow"] {
  --primary: 41, 100%;
  --l: 50%;

  --success: 0, 0%;
  --danger: 349, 84%;
  --action: 56, 100%;
  --text: 120, 5%;
  --energy: 318, 76%;
  --global:0, 0%;
  --muted: 0, 0%;
  --alert-primary: 210, 86%;
  --alert-success: 159, 84%;
  --alert-warning: 28, 100%;
  --alert-danger: 348, 83%;

  --color-primary: hsl(var(--primary),var(--l));
  --color-primary-active: hsl(var(--primary),calc(var(--l) - 5%));
  --coloe-success: hsl(var(--success),calc(var(--l) - 37%));
  --coloe-danger: hsl(var(--danger),calc(var(--l) + 13%));
  --color-action: hsl(var(--action),var(--l));
  --color-text: hsl(var(--text),calc(var(--l) - 20%));
  --color-energy: hsl(var(--energy),calc(var(--l) - 2%));
  --color-global: hsl(var(--global),calc(var(--l) - 23%));
  --color-muted: hsl(var(--muted),calc(var(--l) + 10%));

  --color-icon-link-active: hsl(var(--global),var(--l));

  --color-alert-primary: hsl(var(--alert-primary),calc(var(--l) + 42%));
  --color-alert-success: hsl(var(--alert-success),calc(var(--l) + 46%));
  --color-alert-warning: hsl(var(--alert-warning),calc(var(--l) + 47%));
  --color-alert-danger: hsl(var(--alert-danger),calc(var(--l) + 48%));

  --color-button-primary-hover-background: hsl(var(--color-primary),calc(var(--l) - 5%));
  --color-button-primary-active-background: hsl(var(--color-primary),calc(var(--l) - 10%));
  --color-button-secondary-hover-background: hsl(var(--color-secondary),calc(var(--l) - 5%));
  --color-button-secondary-active-background: hsl(var(--color-secondary),calc(var(--l) - 10%));
  --color-button-danger-hover-background: hsl(var(--color-danger),calc(var(--l) - 5%));
  --color-button-danger-active-background: hsl(var(--color-danger),calc(var(--l) - 10%));

  --color-form-radio-checked-focus-background: hsl(var(--color-primary),calc(var(--l) - 10%));
}

$global-color: var(--color-global) !default;
$global-primary-background: var(--color-primary) !default;
$global-small-font-size: 0.75rem !default;
$button-padding-horizontal: 20px !default;
$global-link-color: var(--color-primary) !default;
$global-link-hover-color: var(--color-primary-active) !default;

$icon-link-active-color: var(--color-icon-link-active) !default;

$alert-primary-background: var(--color-alert-primary) !default;
$alert-success-background: var(--color-alert-success) !default;
$alert-warning-background: var(--color-alert-warning) !default;
$alert-danger-background: var(--color-alert-danger) !default;

$button-primary-hover-background: var(--color-button-primary-hover-background) !default;
$button-primary-active-background: var(--color-button-primary-active-background) !default;
$button-secondary-hover-background: var(--color-button-secondary-hover-background) !default;
$button-secondary-active-background: var(--color-button-secondary-active-background) !default;
$button-danger-hover-background: var(--color-button-danger-hover-background) !default;
$button-danger-active-background: var(--color-button-danger-active-background) !default;

$form-radio-checked-focus-background: var(--color-form-radio-checked-focus-background) !default;