index.scss

/*! Tundra.css - https: //github.com/joshdales/tundra-css - MIT License */
@use 'styles' as *;

:root {

	/* Neutral */
	@each $level, $colour in $neutrals {
		--neutral-#{$level}: #{$colour};
	}

	--neutral: var(--neutral-1);

	/* Red */
	@each $level, $colour in $reds {
		--red-#{$level}: #{$colour};
	}

	--red: var(--red-5);

	/* Orange */
	@each $level, $colour in $oranges {
		--orange-#{$level}: #{$colour};
	}

	--orange: var(--orange-5);

	/* Yellow */
	@each $level, $colour in $yellows {
		--yellow-#{$level}: #{$colour};
	}

	--yellow: var(--yellow-5);

	/* Green */
	@each $level, $colour in $greens {
		--green-#{$level}: #{$colour};
	}

	--green: var(--green-5);

	/* Cyan */
	@each $level, $colour in $cyans {
		--cyan-#{$level}: #{$colour};
	}

	--cyan: var(--cyan-5);

	/* Blue */
	@each $level, $colour in $blues {
		--blue-#{$level}: #{$colour};
	}

	--blue: var(--blue-5);

	/* Purple */
	@each $level, $colour in $purples {
		--purple-#{$level}: #{$colour};
	}

	--purple: var(--purple-5);

	/* Pink */
	@each $level, $colour in $pinks {
		--pink-#{$level}: #{$colour};
	}

	--pink: var(--pink-5);

	/* Radius */
	--radius-1: #{$radius-1};
	--radius-2: #{$radius-2};
	--radius-3: #{$radius-3};
	--radius-4: #{$radius-4};
	--radius-5: #{$radius-5};
	/* Space */
	--space-1: #{$space-1};
	--space-2: #{$space-2};
	--space-3: #{$space-3};
	--space-4: #{$space-4};
	--space-5: #{$space-5};
	--space-6: #{$space-6};
	--space-7: #{$space-7};
	--space-8: #{$space-8};
	--space-9: #{$space-9};
	--space-10: #{$space-10};
	--space-11: #{$space-11};
	--space-12: #{$space-12};
	--space-13: #{$space-13};
	--space-14: #{$space-14};
	/* Font Weight */
	--font-weight-1: #{$font-weight-1};
	--font-weight-2: #{$font-weight-2};
	--font-weight-3: #{$font-weight-3};
	--font-weight-4: #{$font-weight-4};
	/* Font Size */
	--font-size-1: #{$font-size-1};
	--font-size-2: #{$font-size-2};
	--font-size-3: #{$font-size-3};
	--font-size-4: #{$font-size-4};
	--font-size-5: #{$font-size-5};
	--font-size-6: #{$font-size-6};
	--font-size-7: #{$font-size-7};
	--font-size-8: #{$font-size-8};
	--font-size-9: #{$font-size-9};
	/* Line Height */
	--line-height-1: #{$line-height-1};
	--line-height-2: #{$line-height-2};
	--line-height-3: #{$line-height-3};
	--line-height-4: #{$line-height-4};
	--line-height-5: #{$line-height-5};
	/* Letter Spacing */
	--letter-spacing-1: #{$letter-spacing-1};
	--letter-spacing-2: #{$letter-spacing-2};
	--letter-spacing-3: #{$letter-spacing-3};
	--letter-spacing-4: #{$letter-spacing-4};
	--letter-spacing-5: #{$letter-spacing-5};

}

/* Text */
%text-properties {
	@include text-properties;
}

@for $level from 1 through 6 {
	.heading-#{$level} {
		@include heading-text($level);
	}

	.alt-heading-#{$level} {
		@include alt-heading-text($level);
	}

	@if $level < 5 {
		.body-#{$level} {
			@include body-text($level);
		}

		.link-#{$level} {
			@include link-text($level);
		}

		.button-#{$level} {
			@include button-text($level);
		}

		.label-#{$level} {
			@include label-text($level);
		}

		.input-#{$level} {
			@include input-text($level);
		}
	}
}

/* Elements: Buttons */
button,
.button,
[role="button"],
input[type="button"],
input[type="reset"],
input[type="submit"] {
	@include button-base;

	@for $level from 1 through 4 {
		&.button-#{$level} {
			@include button-size($level);
		}
	}

	&.filled {
		@include button-filled;
	}

	&.outline {
		@include button-outline;
	}

	&.ghost {
		@include button-ghost;
	}

}

/* Elements: Text-entry inputs */
input:not([type="button"], [type="reset"], [type="submit"], [type="checkbox"], [type="radio"], [type="range"]),
select,
textarea,
[role="textbox"] {
	@include input-base;

	@for $level from 1 through 4 {
		&.input-#{$level} {
			@include input-text-entry($level);
		}
	}
}

/* Elements: Checkbox */
input[type="checkbox"] {
	@for $level from 1 through 4 {
		&.checkbox-#{$level} {
			@include checkbox($level);
		}
	}
}

/* Elements: Radio */
input[type="radio"] {
	@for $level from 1 through 4 {
		&.radio-#{$level} {
			@include radio($level);
		}
	}
}

@each $colour in $colours {
	.#{$colour} {
		accent-color: var(--#{colour});

		@for $level from 1 through 9 {
			--accent-#{$level}: var(--#{$colour}-#{$level});
		}
	}
}

// When oklch is not supported then use hex-codes
@supports not (color: oklch(60% 0.15 165)) {
	:root {
		--neutral-1: #161616;
		--neutral-2: #2e2e2e;
		--neutral-3: #484848;
		--neutral-4: #636363;
		--neutral-5: #808080;
		--neutral-6: #9e9e9e;
		--neutral-7: #bebebe;
		--neutral-8: #dedede;
		--neutral-9: #f5f5f5;
		--red-1: #380000;
		--red-2: #620000;
		--red-3: #910006;
		--red-4: #c20010;
		--red-5: #ee0b2a;
		--red-6: #ff5655;
		--red-7: #ff9890;
		--red-8: #ffccc5;
		--red-9: #ffece9;
		--orange-1: #320200;
		--orange-2: #571000;
		--orange-3: #802300;
		--orange-4: #ac3600;
		--orange-5: #d94a00;
		--orange-6: #fe6a00;
		--orange-7: #ff9d69;
		--orange-8: #ffceb2;
		--orange-9: #ffeee0;
		--yellow-1: #241100;
		--yellow-2: #432700;
		--yellow-3: #643f00;
		--yellow-4: #875900;
		--yellow-5: #ac7400;
		--yellow-6: #ce9200;
		--yellow-7: #f0b135;
		--yellow-8: #ffd470;
		--yellow-9: #fff1c2;
		--green-1: #001f0e;
		--green-2: #003b22;
		--green-3: #005939;
		--green-4: #007950;
		--green-5: #009b69;
		--green-6: #00bb87;
		--green-7: #41dca5;
		--green-8: #6afdc5;
		--green-9: #c4ffe8;
		--cyan-1: #001d1b;
		--cyan-2: #003836;
		--cyan-3: #003836;
		--cyan-4: #007671;
		--cyan-5: #009790;
		--cyan-6: #00b9b2;
		--cyan-7: #00dbd3;
		--cyan-8: #2bfdf4;
		--cyan-9: #b7ffff;
		--blue-1: #000d49;
		--blue-2: #002774;
		--blue-3: #004495;
		--blue-4: #1762b6;
		--blue-5: #3a81d7;
		--blue-6: #59a0f9;
		--blue-7: #85c1ff;
		--blue-8: #bfe1ff;
		--blue-9: #e6f7ff;
		--purple-1: #220046;
		--purple-2: #3c086b;
		--purple-3: #562c8b;
		--purple-4: #724aab;
		--purple-5: #8f68cb;
		--purple-6: #ad87ed;
		--purple-7: #cca7ff;
		--purple-8: #e6d2ff;
		--purple-9: #f9f0ff;
		--pink-1: #33001c;
		--pink-2: #5c0038;
		--pink-3: #830054;
		--pink-4: #a42c71;
		--pink-5: #c74c8e;
		--pink-6: #e96cad;
		--pink-7: #ff8ecd;
		--pink-8: #ffc6e6;
		--pink-9: #ffeaf9;
	}
}