stacyk

body {
    --width-large: 100;
    --width-small: 5;
    --colpx: calc(var(--width-large) / var(--width-small) * 1px);  // 20px
    --colrem: calc(var(--width-large) / var(--width-small) * 1rem); // 20rem
    --colfr: calc(var(--width-large) / var(--width-small) * 1fr); // 20fr
}

.grid {
    border: solid purple; 

stacyk

body {
    --width-large: 100;
    --width-small: 25;
    --colpx: calc(var(--width-large) / var(--width-small) * 1px);
    --colrem: calc(var(--width-large) / var(--width-small) * 1rem);
    --colfr: calc(var(--width-large) / var(--width-small) * 1fr);

    border: solid olive var(--colpx);
    display: grid;
    font-size: var(--colrem);

stacyk

/// # Button Pattern
/// @group buttons

input[type='button'],
input[type='submit'],
.wp-block-search__button {
	border: var(--border-small) solid var(--wp--preset--color--contrast);
	border-radius: 0;
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);

stacyk

@use "sass:color";

.foo {
  color: color.complement(turquoise);
}

stacyk

@use "sass:color";


.foo {
  --b: #{color.blackness(color.hwb(0 0% 50%))};
  --w: #{color.whiteness(color.hwb(0 0% 50%))};
}

.bar {
  --b: #{color.blackness(color.hwb(0 50% 50%))};

stacyk

@use "sass:color";


.foo {
  --b: #{color.blackness(color.hwb(0 0% 50%))};
  --w: 0%;
}

.bar {
  --b: #{color.blackness(color.hwb(0 50% 50%))};

stacyk

@use "sass:color";

.foo {
  --b: #{color.blackness(color.hwb(0 0% 50%))};
  --w: 0%;
}

.bar {
  --b: #{color.blackness(color.hwb(0 50% 50%))};
  --w: 50%;

stacyk

@use "sass:color";

.foo {
  --b: #{color.blackness(color.hwb(0 0% 50%))};
}

.bar {
  --b: #{color.blackness(color.hwb(0 50% 50%))};
}

stacyk

@use "sass:color";

.foo {
  b: color.blackness(color.hwb(0, 0%, 50%));
}

.bar {
  c: color.blackness(color.hwb(0, 50%, 50%));
}

stacyk

@use "sass:color";

.foo {
  background-color: color.blackness(color.hwb(0, 0%, 50%));
}

.bar {
  background-color: color.blackness(color.hwb(0, 50%, 50%));
}