@oscarpalmer/oui 0.38.0 → 0.40.0

package/src/css/content.scss

@@ -1,181 +0,0 @@
-/*! https://github.com/oscarpalmer/oui */
-
-@use './mixins/misc.mixins.scss' as miscMixins;
-@use './mixins/shadow.mixins.scss' as shadowMixins;
-
-@mixin thumb($background, $shadow) {
-	@include shadowMixins.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 miscMixins.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 miscMixins.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 shadowMixins.shadow-0;
-	}
-
-	:where(&-1) {
-		@include shadowMixins.shadow-1;
-	}
-
-	:where(&-2) {
-		@include shadowMixins.shadow-2;
-	}
-
-	:where(&-3) {
-		@include shadowMixins.shadow-3;
-	}
-
-	:where(&-4) {
-		@include shadowMixins.shadow-4;
-	}
-
-	:where(&-5) {
-		@include shadowMixins.shadow-5;
-	}
-}

package/src/css/flex.scss

@@ -1,107 +0,0 @@
-/*! https://github.com/oscarpalmer/oui */
-
-:where(.fill) {
-	flex: 1;
-}
-
-:where(.flow, .stack) {
-	display: flex;
-}
-
-:where(.flow) {
-	flex-flow: row wrap;
-	align-items: center;
-	gap: var(--flow-gap, 1rem);
-}
-
-.flow {
-	:where(&-large, &--large) {
-		gap: var(--flow-gap-large, calc(2 * var(--flow-gap, 1rem)));
-	}
-
-	:where(&-nowrap, &--nowrap) {
-		flex-wrap: nowrap;
-	}
-
-	:where(&-small, &--small) {
-		gap: var(--flow-gap-small, calc(0.5 * var(--flow-gap, 1rem)));
-	}
-
-	:where(&-text, &--text) {
-		gap: var(--flow-gap-text, 1em);
-	}
-}
-
-:where(.stack) {
-	flex-flow: column nowrap;
-	gap: var(--stack-gap, 1rem);
-}
-
-.stack {
-	:where(&-large, &--large) {
-		gap: var(--stack-gap-large, calc(2 * var(--stack-gap, 1rem)));
-	}
-
-	:where(&-small, &--small) {
-		gap: var(--stack-gap-small, calc(0.5 * var(--stack-gap, 1rem)));
-	}
-
-	:where(&-text, &--text) {
-		gap: var(--stack-gap-text, 1em);
-	}
-}
-
-.flex {
-	&-reverse,
-	&--reverse {
-		:where(&[class^='flow' i], &[class*=' flow' i]) {
-			flex-direction: row-reverse;
-		}
-
-		:where(&[class^='stack' i], &[class*=' stack' i]) {
-			flex-direction: column-reverse;
-		}
-	}
-}
-
-$alignment-origins: (
-	c: 'content',
-	i: 'items',
-	s: 'self',
-);
-
-$alignment-values: (
-	c: 'center',
-	fe: 'flex-end',
-	fs: 'flex-start',
-	s: 'stretch',
-);
-
-$justification-values: (
-	sa: 'space-around',
-	sb: 'space-between',
-	se: 'space-evenly',
-);
-
-$types: (
-	a: 'align',
-	j: 'justify',
-);
-
-@each $type-key, $type-value in $types {
-	@each $alignment-origin-key, $alignment-origin-value in $alignment-origins {
-		.flex-#{$type-key}#{$alignment-origin-key} {
-			@each $alignment-value-key, $alignment-value-value in $alignment-values {
-				:where(&-#{$alignment-value-key}, &--#{$alignment-value-key}) {
-					#{$type-value}-#{$alignment-origin-value}: #{$alignment-value-value};
-				}
-			}
-		}
-	}
-
-	@each $justification-key, $justification-value in $justification-values {
-		:where(.flex-#{$type-key}c-#{$justification-key}, .flex-#{$type-key}c--#{$justification-key}) {
-			#{$type-value}-content: #{$justification-value};
-		}
-	}
-}

package/src/css/floatable.scss

@@ -1,155 +0,0 @@
-/*! https://github.com/oscarpalmer/oui */
-
-@use './mixins/misc.mixins.scss' as miscMixins;
-@use './mixins/shadow.mixins.scss' as shadowMixins;
-
-:where([oui-dialog], [oui-popover], [oui-tooltip-content]),
-:where([oui-dialog])::backdrop {
-	opacity: 0;
-	transition: 0.125s ease-in-out;
-	transition-property: opacity, scale;
-}
-
-:where([oui-dialog], [oui-popover], [oui-tooltip-content]) {
-	@include shadowMixins.shadow-5;
-
-	background-color: var(--oui-absolute);
-	scale: 0.9;
-}
-
-:where([oui-dialog]:focus, [oui-popover]:focus, [oui-tooltip-content]:focus) {
-	outline: none;
-}
-
-:where(
-	[oui-dialog][oui-dialog-open],
-	[oui-popover][oui-popover-open],
-	[oui-tooltip-content][oui-tooltip-content-open]
-),
-:where([oui-dialog][oui-dialog-open])::backdrop {
-	opacity: 1;
-}
-
-:where(
-	[oui-dialog][oui-dialog-open],
-	[oui-popover][oui-popover-open],
-	[oui-tooltip-content][oui-tooltip-content-open]
-) {
-	scale: 1;
-	transition-delay: 0.125s;
-}
-
-:where([oui-dialog]) {
-	position: relative;
-}
-
-:where([oui-dialog-resizer]) {
-	position: absolute;
-	inset: auto 0 0 auto;
-}
-
-:where([oui-popover], [oui-tooltip-content]) {
-	@include miscMixins.floatable;
-}
-
-:where([oui-popover]) {
-	padding: 1rem;
-	background-color: var(--oui-absolute);
-	border-radius: 0.25rem;
-}
-
-:where(
-	[oui-tooltip]:is(
-		abbr,
-		b,
-		cite,
-		dfn,
-		code,
-		em,
-		i,
-		kbd,
-		mark,
-		q,
-		samp,
-		small,
-		span,
-		strong,
-		sub,
-		sup,
-		time,
-		var
-	)
-) {
-	text-decoration: underline dotted;
-	text-decoration-skip-ink: auto;
-	text-underline-offset: 0.25em;
-	cursor: help;
-}
-
-:where([oui-tooltip-content]) {
-	max-width: 48ch;
-	padding: 0.75em 1em;
-	background-color: var(--oui-absolute);
-	border-radius: 0.25rem;
-	font-size: 0.875rem;
-	pointer-events: none;
-
-	&::after {
-		content: '';
-		display: block;
-		position: absolute;
-	}
-
-	&[oui-position^='above' i],
-	&[oui-position^='below' i],
-	&[oui-position^='bottom' i],
-	&[oui-position^='top' i] {
-		&::after {
-			width: 100%;
-			height: 1em;
-		}
-	}
-
-	&[oui-position^='above' i],
-	&[oui-position^='top' i] {
-		&::after {
-			inset: calc(100% - 0.5em) 0 0;
-		}
-	}
-
-	&[oui-position^='below' i],
-	&[oui-position^='bottom' i] {
-		&::after {
-			inset: -0.5em 0 0;
-		}
-	}
-
-	&[oui-position^='end' i],
-	&[oui-position^='left' i],
-	&[oui-position^='right' i],
-	&[oui-position^='start' i] {
-		&::after {
-			width: 1em;
-			height: 100%;
-		}
-	}
-
-	&[oui-position^='end' i],
-	&[oui-position^='right' i] {
-		&::after {
-			inset: 0 0 0 -0.5em;
-		}
-	}
-
-	&[oui-position^='left' i],
-	&[oui-position^='start' i] {
-		&::after {
-			inset: 0 0 0 calc(100% - 0.5em);
-		}
-	}
-}
-
-:where([oui-tooltip-content][oui-tooltip-content-open]) {
-	opacity: 1;
-	pointer-events: all;
-}