@oscarpalmer/oui 0.37.0 → 0.39.0

package/src/css/badge.scss

@@ -1,62 +0,0 @@
-/*! https://github.com/oscarpalmer/oui */
-
-@use './mixins.scss' as mixins;
-
-.oui {
-	:where(&-pill, &-tag) {
-		@include mixins.badge;
-	}
-
-	:where(&-pill) {
-		border-radius: 3em;
-		padding: 0.5em 1em;
-	}
-
-	:where(&-tag) {
-		border-radius: 0.25em;
-		padding: 0.5em 0.75em;
-	}
-
-	:where(&-pill--small, &-tag--small) {
-		font-size: 0.875em;
-	}
-
-	:where(&-pill--tiny, &-tag--tiny) {
-		color: color-mix(in oklab, var(--oui-foreground, var(--oui-gray-8)), transparent 12.5%);
-		font-size: 0.75em;
-	}
-
-	:where(&-pill--tiny) {
-		padding: 0.25em 0.75em;
-	}
-
-	:where(&-tag--tiny) {
-		padding: 0.25em 0.5em;
-	}
-
-	// Colors
-
-	:where(&-pill--blue, &-tag--blue) {
-		@include mixins.badge-blue;
-	}
-
-	:where(&-pill--green, &-tag--green) {
-		@include mixins.badge-green;
-	}
-
-	:where(&-pill--orange, &-tag--orange) {
-		@include mixins.badge-orange;
-	}
-
-	:where(&-pill--purple, &-tag--purple) {
-		@include mixins.badge-purple;
-	}
-
-	:where(&-pill--red, &-tag--red) {
-		@include mixins.badge-red;
-	}
-
-	:where(&-pill--yellow, &-tag--yellow) {
-		@include mixins.badge-yellow;
-	}
-}

package/src/css/button.scss

@@ -1,50 +0,0 @@
-/*! https://github.com/oscarpalmer/oui */
-
-@use './mixins' as mixins;
-
-.oui-button {
-	:where(&) {
-		@include mixins.button;
-	}
-
-	:where(&--blue) {
-		@include mixins.button-blue;
-	}
-
-	:where(&--green) {
-		@include mixins.button-green;
-	}
-
-	:where(&--orange) {
-		@include mixins.button-orange;
-	}
-
-	:where(&--purple) {
-		@include mixins.button-purple;
-	}
-
-	:where(&--red) {
-		@include mixins.button-red;
-	}
-
-	:where(&--yellow) {
-		@include mixins.button-yellow;
-	}
-
-	:where(&--rounded) {
-		padding: 0.5em 1em;
-		flex-wrap: nowrap;
-		border-radius: 5em;
-		white-space: nowrap;
-	}
-
-	:where(&--small) {
-		font-size: 0.875em;
-	}
-
-	:where(&--tiny) {
-		--oui-foreground-percentage: 12.5%;
-
-		font-size: 0.75em;
-	}
-}

package/src/css/color.scss

@@ -1,115 +0,0 @@
-/*! https://github.com/oscarpalmer/oui */
-
-@use './mixins' as mixins;
-
-:root {
-	--oui-absolute: light-dark(white, black);
-
-	--oui-blue-0: light-dark(oklch(99% 0.01 260deg), oklch(20% 0.08 250deg));
-	--oui-blue-1: light-dark(oklch(98% 0.02 259deg), oklch(25% 0.09 251deg));
-	--oui-blue-2: light-dark(oklch(95% 0.03 258deg), oklch(32% 0.1 252deg));
-	--oui-blue-3: light-dark(oklch(90% 0.04 257deg), oklch(40% 0.09 253deg));
-	--oui-blue-4: light-dark(oklch(80% 0.06 256deg), oklch(50% 0.08 254deg));
-	--oui-blue-5: light-dark(oklch(70% 0.08 255deg), oklch(60% 0.07 255deg));
-	--oui-blue-6: light-dark(oklch(60% 0.1 254deg), oklch(70% 0.06 256deg));
-	--oui-blue-7: light-dark(oklch(50% 0.12 253deg), oklch(80% 0.05 257deg));
-	--oui-blue-8: light-dark(oklch(42% 0.11 252deg), oklch(85% 0.04 258deg));
-	--oui-blue-9: light-dark(oklch(35% 0.1 251deg), oklch(90% 0.03 259deg));
-	--oui-blue-10: light-dark(oklch(30% 0.09 250deg), oklch(95% 0.02 260deg));
-
-	--oui-green-0: light-dark(oklch(99.5% 0.01 150deg), oklch(20% 0.08 140deg));
-	--oui-green-1: light-dark(oklch(98.25% 0.02 149deg), oklch(25% 0.09 141deg));
-	--oui-green-2: light-dark(oklch(95% 0.03 148deg), oklch(32% 0.1 142deg));
-	--oui-green-3: light-dark(oklch(90% 0.04 147deg), oklch(40% 0.09 143deg));
-	--oui-green-4: light-dark(oklch(80% 0.06 146deg), oklch(50% 0.08 144deg));
-	--oui-green-5: light-dark(oklch(70% 0.08 145deg), oklch(60% 0.07 145deg));
-	--oui-green-6: light-dark(oklch(60% 0.1 144deg), oklch(70% 0.06 146deg));
-	--oui-green-7: light-dark(oklch(50% 0.12 143deg), oklch(80% 0.05 147deg));
-	--oui-green-8: light-dark(oklch(42% 0.11 142deg), oklch(85% 0.04 148deg));
-	--oui-green-9: light-dark(oklch(35% 0.1 141deg), oklch(90% 0.03 149deg));
-	--oui-green-10: light-dark(oklch(30% 0.09 140deg), oklch(95% 0.02 150deg));
-
-	--oui-orange-0: light-dark(oklch(99.5% 0.02 60deg), oklch(20% 0.08 50deg));
-	--oui-orange-1: light-dark(oklch(98.75% 0.035 59deg), oklch(25% 0.09 51deg));
-	--oui-orange-2: light-dark(oklch(97.5% 0.05 58deg), oklch(32% 0.1 52deg));
-	--oui-orange-3: light-dark(oklch(93.25% 0.07 57deg), oklch(40% 0.09 53deg));
-	--oui-orange-4: light-dark(oklch(87.125% 0.1 56deg), oklch(50% 0.08 54deg));
-	--oui-orange-5: light-dark(oklch(76% 0.11 55deg), oklch(60% 0.07 55deg));
-	--oui-orange-6: light-dark(oklch(65% 0.12 54deg), oklch(70% 0.06 56deg));
-	--oui-orange-7: light-dark(oklch(55% 0.14 53deg), oklch(80% 0.05 57deg));
-	--oui-orange-8: light-dark(oklch(45% 0.12 52deg), oklch(85% 0.04 58deg));
-	--oui-orange-9: light-dark(oklch(37.5% 0.11 51deg), oklch(90% 0.03 59deg));
-	--oui-orange-10: light-dark(oklch(30% 0.09 50deg), oklch(95% 0.02 60deg));
-
-	--oui-purple-0: light-dark(oklch(99.5% 0.02 300deg), oklch(20% 0.08 290deg));
-	--oui-purple-1: light-dark(oklch(98.25% 0.035 299deg), oklch(25% 0.09 291deg));
-	--oui-purple-2: light-dark(oklch(95% 0.05 298deg), oklch(32% 0.1 292deg));
-	--oui-purple-3: light-dark(oklch(90% 0.07 297deg), oklch(40% 0.09 293deg));
-	--oui-purple-4: light-dark(oklch(80% 0.1 296deg), oklch(50% 0.08 294deg));
-	--oui-purple-5: light-dark(oklch(70% 0.11 295deg), oklch(60% 0.07 295deg));
-	--oui-purple-6: light-dark(oklch(60% 0.12 294deg), oklch(70% 0.06 296deg));
-	--oui-purple-7: light-dark(oklch(50% 0.14 293deg), oklch(80% 0.05 297deg));
-	--oui-purple-8: light-dark(oklch(42% 0.12 292deg), oklch(85% 0.04 298deg));
-	--oui-purple-9: light-dark(oklch(35% 0.11 291deg), oklch(90% 0.03 299deg));
-	--oui-purple-10: light-dark(oklch(30% 0.09 290deg), oklch(95% 0.02 300deg));
-
-	--oui-red-0: light-dark(oklch(99.5% 0.024 25deg), oklch(20% 0.08 25deg));
-	--oui-red-1: light-dark(oklch(98.75% 0.032 24deg), oklch(25% 0.09 24deg));
-	--oui-red-2: light-dark(oklch(97.5% 0.05 23deg), oklch(32% 0.1 23deg));
-	--oui-red-3: light-dark(oklch(93.25% 0.07 22deg), oklch(40% 0.09 22deg));
-	--oui-red-4: light-dark(oklch(87.125% 0.1 21deg), oklch(50% 0.08 21deg));
-	--oui-red-5: light-dark(oklch(76% 0.11 20deg), oklch(60% 0.07 20deg));
-	--oui-red-6: light-dark(oklch(65% 0.12 19deg), oklch(70% 0.06 19deg));
-	--oui-red-7: light-dark(oklch(55% 0.14 18deg), oklch(80% 0.05 18deg));
-	--oui-red-8: light-dark(oklch(45% 0.12 17deg), oklch(85% 0.04 17deg));
-	--oui-red-9: light-dark(oklch(37.5% 0.11 16deg), oklch(90% 0.03 16deg));
-	--oui-red-10: light-dark(oklch(30% 0.09 15deg), oklch(95% 0.02 15deg));
-
-	--oui-yellow-0: light-dark(oklch(99.5% 0.02 100deg), oklch(20% 0.08 90deg));
-	--oui-yellow-1: light-dark(oklch(98.5% 0.035 99deg), oklch(25% 0.09 91deg));
-	--oui-yellow-2: light-dark(oklch(97.25% 0.05 98deg), oklch(32% 0.1 92deg));
-	--oui-yellow-3: light-dark(oklch(93.125% 0.07 97deg), oklch(40% 0.09 93deg));
-	--oui-yellow-4: light-dark(oklch(87% 0.1 96deg), oklch(50% 0.08 94deg));
-	--oui-yellow-5: light-dark(oklch(78% 0.11 95deg), oklch(60% 0.07 95deg));
-	--oui-yellow-6: light-dark(oklch(65% 0.12 94deg), oklch(70% 0.06 96deg));
-	--oui-yellow-7: light-dark(oklch(55% 0.14 93deg), oklch(80% 0.05 97deg));
-	--oui-yellow-8: light-dark(oklch(45% 0.12 92deg), oklch(85% 0.04 98deg));
-	--oui-yellow-9: light-dark(oklch(37.5% 0.11 91deg), oklch(90% 0.03 99deg));
-	--oui-yellow-10: light-dark(oklch(30% 0.09 90deg), oklch(95% 0.02 100deg));
-
-	--oui-gray-0: light-dark(oklch(98% 0 0deg), oklch(22% 0 0deg));
-	--oui-gray-1: light-dark(oklch(97% 0 0deg), oklch(26% 0 0deg));
-	--oui-gray-2: light-dark(oklch(95% 0 0deg), oklch(32% 0 0deg));
-	--oui-gray-3: light-dark(oklch(90% 0 0deg), oklch(40% 0 0deg));
-	--oui-gray-4: light-dark(oklch(80% 0 0deg), oklch(50% 0 0deg));
-	--oui-gray-5: light-dark(oklch(70% 0 0deg), oklch(60% 0 0deg));
-	--oui-gray-6: light-dark(oklch(60% 0 0deg), oklch(70% 0 0deg));
-	--oui-gray-7: light-dark(oklch(50% 0 0deg), oklch(80% 0 0deg));
-	--oui-gray-8: light-dark(oklch(42% 0 0deg), oklch(85% 0 0deg));
-	--oui-gray-9: light-dark(oklch(35% 0 0deg), oklch(90% 0 0deg));
-	--oui-gray-10: light-dark(oklch(30% 0 0deg), oklch(95% 0 0deg));
-
-	--oui-slate-0: light-dark(oklch(99% 0.0025 255deg), oklch(22% 0.005 255deg));
-	--oui-slate-1: light-dark(oklch(98% 0.005 255deg), oklch(26% 0.0075 255deg));
-	--oui-slate-2: light-dark(oklch(95% 0.0075 255deg), oklch(32% 0.01 255deg));
-	--oui-slate-3: light-dark(oklch(90% 0.01 255deg), oklch(40% 0.0125 255deg));
-	--oui-slate-4: light-dark(oklch(80% 0.015 255deg), oklch(50% 0.015 255deg));
-	--oui-slate-5: light-dark(oklch(70% 0.02 255deg), oklch(60% 0.02 255deg));
-	--oui-slate-6: light-dark(oklch(60% 0.015 255deg), oklch(70% 0.015 255deg));
-	--oui-slate-7: light-dark(oklch(50% 0.0125 255deg), oklch(80% 0.0125 255deg));
-	--oui-slate-8: light-dark(oklch(42% 0.01 255deg), oklch(85% 0.01 255deg));
-	--oui-slate-9: light-dark(oklch(35% 0.0075 255deg), oklch(90% 0.0075 255deg));
-	--oui-slate-10: light-dark(oklch(30% 0.005 255deg), oklch(95% 0.005 255deg));
-
-	--oui-stone-0: light-dark(oklch(99.5% 0.0033 95deg), oklch(22% 0.005 95deg));
-	--oui-stone-1: light-dark(oklch(98.25% 0.0067 95deg), oklch(26% 0.0075 95deg));
-	--oui-stone-2: light-dark(oklch(95% 0.01 95deg), oklch(32% 0.01 95deg));
-	--oui-stone-3: light-dark(oklch(90% 0.0125 95deg), oklch(40% 0.0125 95deg));
-	--oui-stone-4: light-dark(oklch(80% 0.015 95deg), oklch(50% 0.015 95deg));
-	--oui-stone-5: light-dark(oklch(70% 0.02 95deg), oklch(60% 0.02 95deg));
-	--oui-stone-6: light-dark(oklch(60% 0.015 95deg), oklch(70% 0.015 95deg));
-	--oui-stone-7: light-dark(oklch(50% 0.0125 95deg), oklch(80% 0.0125 95deg));
-	--oui-stone-8: light-dark(oklch(42% 0.01 95deg), oklch(85% 0.01 95deg));
-	--oui-stone-9: light-dark(oklch(35% 0.0075 95deg), oklch(90% 0.0075 95deg));
-	--oui-stone-10: light-dark(oklch(30% 0.005 95deg), oklch(95% 0.005 95deg));
-}

package/src/css/combobox.scss

@@ -1,252 +0,0 @@
-/*! https://github.com/oscarpalmer/oui */
-
-@use './mixins.scss' as mixins;
-
-[oui-combobox-anchor] {
-	:where(&) {
-		@include mixins.input;
-
-		--oui-background-value: var(--oui-absolute);
-
-		padding: 0.5em 2em 0.5em 0.75em;
-		border-radius: 0.25em;
-		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E");
-		background-position: right 0.5em center;
-		background-repeat: no-repeat;
-		background-size: 1em;
-		position: relative;
-	}
-
-	&:not([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i]) {
-		:where(&:focus-visible, &:focus-within, &:has(+ [oui-combobox-content]:focus-within)) {
-			@include mixins.input-focus;
-		}
-
-		@media (hover: hover) {
-			:where(&:hover) {
-				@include mixins.input-hover;
-			}
-		}
-	}
-
-	&:is([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i]) {
-		:where(&) {
-			--oui-foreground-percentage: 25%;
-
-			font-style: italic;
-		}
-
-		:where(&:focus-visible, &:focus-within, &:has(+ [oui-combobox-content]:focus-within)) {
-			--oui-outline-percentage: 75%;
-		}
-	}
-
-	:where(&:is([disabled], [aria-disabled='true' i])) {
-		--oui-background-percentage: 50%;
-	}
-
-	:where(& > button) {
-		border: none;
-		position: absolute;
-		inset: 0;
-		z-index: 1;
-	}
-
-	:where(& > button:focus) {
-		outline: none;
-	}
-}
-
-:where([oui-combobox-content]) {
-	@include mixins.floatable;
-	@include mixins.shadow-5;
-
-	width: fit-content;
-	height: fit-content;
-	max-width: max(25vw, 32rem);
-	max-height: max(25vh, 32rem);
-	min-width: anchor-size(width);
-	flex-flow: column nowrap;
-	border-radius: 0.25em;
-
-	&:popover-open {
-		display: flex !important;
-	}
-}
-
-:where([oui-combobox-filter], [oui-combobox-header]) {
-	&::after {
-		content: '';
-		width: 100%;
-		height: 0.25em;
-		background-image: linear-gradient(to bottom, rgb(0 0 0 / 12.5%), transparent);
-		position: absolute;
-		bottom: -0.25em;
-		left: 0;
-	}
-}
-
-:where([oui-combobox-filter]) {
-	padding: 0.75em;
-	background-color: var(--oui-yellow-0);
-	border-radius: 0.25em 0.25em 0 0;
-	position: relative;
-	z-index: 2;
-}
-
-:where([oui-combobox-filter-input]) {
-	@include mixins.input;
-
-	--oui-background-value: var(--oui-absolute);
-	--oui-border-value: var(--oui-yellow-3);
-
-	width: 100%;
-	padding: 0.5em 0.75em;
-	outline-width: 0;
-	border-radius: 0.25em;
-	font-size: 0.875rem;
-}
-
-:where([oui-combobox-header]) {
-	padding: 0.5em calc(0.75em / 0.75);
-	background-color: var(--oui-gray-0);
-	font-size: 0.75em;
-	font-weight: bold;
-	position: sticky;
-	top: 0;
-	z-index: 1;
-}
-
-:where([oui-combobox-hidden]) {
-	@include mixins.visually-hidden;
-
-	position: absolute;
-}
-
-:where([oui-combobox-list]) {
-	overflow: auto;
-	position: relative;
-}
-
-:where([oui-combobox-message]) {
-	padding: 1em;
-	text-align: center;
-	font-style: italic;
-}
-
-[oui-combobox-option] {
-	:where(&) {
-		padding: 0.5em 0.75em;
-		outline: 4px solid transparent;
-		outline-offset: -4px;
-		line-height: 1.25;
-		cursor: pointer;
-	}
-
-	:where(&[aria-selected='true' i]) {
-		background-color: var(--oui-blue-3);
-		color: var(--oui-blue-9);
-	}
-
-	:where(oui-combobox[multiple] &[aria-selected='true' i])::before {
-		content: '✓';
-		margin: 0 0.75em 0 0;
-	}
-
-	oui-combobox:not([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i]) & {
-		@media (hover: hover) {
-			:where(&:hover) {
-				background-color: var(--oui-blue-1);
-				color: var(--oui-blue-8);
-			}
-		}
-	}
-}
-
-:where([oui-combobox-option-active]) {
-	background-color: var(--oui-blue-1);
-	outline-color: var(--oui-blue-4);
-	color: var(--oui-blue-8);
-}
-
-:where([oui-combobox-selection]) {
-	max-height: 8rem;
-	display: flex;
-	padding: 0.5em;
-	margin: -0.5em -0.5em -0.5em -0.75em;
-	flex-flow: row wrap;
-	gap: 0.5em;
-	overflow: auto;
-	list-style: none;
-	position: relative;
-	z-index: 2;
-}
-
-[oui-combobox-selection-item] {
-	:where(&) {
-		@include mixins.button;
-
-		--oui-background-value: var(--oui-blue-2);
-		--oui-foreground-value: var(--oui-blue-8);
-		--oui-outline-value: var(--oui-blue-6);
-		--oui-shadow-percentage: 90%;
-
-		padding: 0.5em 1em;
-		flex-wrap: nowrap;
-		border-radius: 5em;
-		font-size: 0.75em;
-		white-space: nowrap;
-	}
-
-	:where(
-		oui-combobox:is([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i])
-			&:focus-visible
-	) {
-		--oui-outline-percentage: 87.5%;
-		--oui-outline-value: var(--oui-blue-6);
-	}
-
-	:where(
-		oui-combobox:not([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i])
-			&:focus-visible
-	) {
-		--oui-background-value: var(--oui-red-1);
-		--oui-foreground-value: var(--oui-red-8);
-		--oui-outline-percentage: 75%;
-		--oui-outline-value: var(--oui-red-6);
-	}
-
-	@media (hover: hover) {
-		:where(
-			oui-combobox:not([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i])
-				&:hover
-		) {
-			--oui-background-value: var(--oui-red-1);
-			--oui-foreground-value: var(--oui-red-8);
-			--oui-outline-value: var(--oui-red-6);
-
-			--oui-background-percentage: 50%;
-			--oui-foreground-percentage: 25%;
-		}
-	}
-
-	:where(
-		oui-combobox:not([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i])
-			&:active
-	) {
-		box-shadow:
-			0 0 0 1px var(--oui-shadow-value),
-			inset 0 1px 2px 0 var(--oui-shadow-value),
-			inset 0 2px 4px 0 var(--oui-shadow-value);
-	}
-
-	:where(
-		oui-combobox:is([disabled], [readonly], [aria-disabled='true' i], [aria-readonly='true' i]) &
-	) {
-		--oui-background-percentage: 80%;
-		--oui-foreground-percentage: 20%;
-		--oui-shadow-percentage: 95%;
-
-		font-style: italic;
-	}
-}

package/src/css/content.scss

@@ -1,180 +0,0 @@
-/*! https://github.com/oscarpalmer/oui */
-
-@use './mixins' as mixins;
-
-@mixin thumb($background, $shadow) {
-	@include mixins.shadow-0(
-		color-mix(in oklab, $shadow, transparent 33%),
-		color-mix(in oklab, var(--oui-absolute), transparent 82.5%)
-	);
-
-	appearance: none;
-	min-width: 0.5em;
-	background-color: $background;
-	background-image: none;
-	border-radius: 0.25em;
-}
-
-@mixin track {
-	appearance: none;
-	height: 0.75em;
-	padding: 0.125em;
-	overflow: hidden;
-	background-color: var(--oui-absolute);
-	background-image: none;
-	border: 1px solid var(--oui-gray-3);
-	border-radius: 0.375em;
-}
-
-.oui-card {
-	:where(&) {
-		@include mixins.card;
-	}
-}
-
-.oui-details {
-	:where(& > summary) {
-		display: inline-flex;
-		align-items: center;
-		list-style: none;
-		outline: 4px solid
-			color-mix(in oklab, var(--oui-blue-6), transparent var(--oui-outline-percentage, 100%));
-		outline-offset: 0.25em;
-		border-radius: 0.125em;
-		transition:
-			0.125s ease-in-out,
-			margin 0s;
-		cursor: pointer;
-
-		&::before {
-			content: '';
-			width: 1em;
-			height: 1em;
-			margin: 0 0.5em 0 0;
-			background-color: currentcolor;
-			mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E");
-			mask-size: contain;
-			mask-position: center;
-			mask-repeat: no-repeat;
-			transition: transform 0.125s ease-in-out;
-			transform: rotate(-90deg);
-		}
-
-		&:focus-visible {
-			--oui-outline-percentage: 50%;
-
-			padding: 0 0.5em 0 0.25em;
-			color: var(--oui-blue-8);
-		}
-
-		@media (hover: hover) {
-			&:hover {
-				color: var(--oui-blue-8);
-			}
-		}
-	}
-
-	:where(&[open] > summary) {
-		margin: 0 0 1em;
-
-		&::before {
-			transform: rotate(0deg);
-		}
-	}
-}
-
-.oui-formatted {
-	:where(&) {
-		@include mixins.card;
-
-		color: var(--oui-gray-8);
-		font-family: monospace, monospace;
-		font-size: 0.875rem;
-		line-height: 1.5;
-	}
-}
-
-.oui-meter {
-	:where(&) {
-		@include track;
-
-		&::-moz-meter-bar {
-			@include thumb(var(--oui-blue-5), var(--oui-blue-6));
-		}
-
-		&:-moz-meter-optimum::-moz-meter-bar {
-			@include thumb(var(--oui-green-5), var(--oui-green-6));
-		}
-
-		&:-moz-meter-sub-optimum::-moz-meter-bar {
-			@include thumb(var(--oui-yellow-5), var(--oui-yellow-6));
-		}
-
-		&:-moz-meter-sub-sub-optimum::-moz-meter-bar {
-			@include thumb(var(--oui-red-5), var(--oui-red-6));
-		}
-
-		&::-webkit-meter-bar {
-			appearance: none;
-			background: none;
-		}
-
-		&::-webkit-meter-even-less-good-value {
-			@include thumb(var(--oui-red-5), var(--oui-red-6));
-		}
-
-		&::-webkit-meter-optimum-value {
-			@include thumb(var(--oui-green-5), var(--oui-green-6));
-		}
-
-		&::-webkit-meter-suboptimum-value {
-			@include thumb(var(--oui-yellow-5), var(--oui-yellow-6));
-		}
-	}
-}
-
-.oui-progress {
-	:where(&) {
-		@include track;
-
-		&::-moz-progress-bar {
-			@include thumb(var(--oui-blue-5), var(--oui-blue-6));
-		}
-
-		&::-webkit-progress-bar {
-			appearance: none;
-			background: none;
-		}
-
-		&::-webkit-progress-value {
-			@include thumb(var(--oui-blue-5), var(--oui-blue-6));
-		}
-	}
-}
-
-.oui-shadow {
-	:where(&),
-	:where(&-0) {
-		@include mixins.shadow-0;
-	}
-
-	:where(&-1) {
-		@include mixins.shadow-1;
-	}
-
-	:where(&-2) {
-		@include mixins.shadow-2;
-	}
-
-	:where(&-3) {
-		@include mixins.shadow-3;
-	}
-
-	:where(&-4) {
-		@include mixins.shadow-4;
-	}
-
-	:where(&-5) {
-		@include mixins.shadow-5;
-	}
-}