@oscarpalmer/oui 0.38.0 → 0.40.0

package/README.md

@@ -2,7 +2,7 @@
 
 [![npm](https://badge.fury.io/js/@oscarpalmer%2Foui.svg)](https://www.npmjs.com/package/@oscarpalmer/oui)
 
-_Oui_ _(Oscar UI)_ is a collection of styles, components, and related thingamjigs for designing websites and applications, which I often use to build prototypes and proof-of-concepts for myself and at work.
+_Oui_ _(Oscar UI)_ is a collection of styles, components, and related whatchamacallits for designing websites and applications, which I often use to build prototypes and proof-of-concepts for myself and at work.
 
 ## License
 

package/dist/css/badge.css

@@ -3,13 +3,13 @@
 
 :where(.oui-pill, .oui-tag) {
   --oui-shadow-inset: color-mix(in oklab, var(--oui-absolute), transparent 50%);
-  --oui-shadow-value: var(--oui-gray-6);
+  --oui-shadow-value: var(--oui-gray-5);
   --oui-shadow-mixed: color-mix(in oklab, var(--oui-shadow-value), transparent 87.5%);
   box-shadow: inset 0 1px 0 0 var(--oui-shadow-inset), 0 0 0 1px var(--oui-shadow-mixed), 0 1px 2px -0.5px var(--oui-shadow-mixed), 0 2px 4px -1px var(--oui-shadow-mixed);
   display: inline-flex;
   flex-flow: row nowrap;
   gap: 0.5em;
-  background-color: color-mix(in oklab, var(--oui-background, var(--oui-gray-1)), transparent 25%);
+  background-color: color-mix(in oklab, var(--oui-background, var(--oui-gray-1)), transparent 62.5%);
   color: var(--oui-foreground, var(--oui-gray-8));
   text-shadow: 0 1px 0 var(--oui-absolute);
   line-height: 1.25;
@@ -25,6 +25,9 @@
 :where(.oui-pill--small, .oui-tag--small) {
   font-size: 0.875em;
 }
+:where(.oui-pill--small) {
+  padding: 0.3333em 0.875em;
+}
 :where(.oui-pill--tiny, .oui-tag--tiny) {
   color: color-mix(in oklab, var(--oui-foreground, var(--oui-gray-8)), transparent 12.5%);
   font-size: 0.75em;
@@ -41,32 +44,32 @@
 :where(.oui-pill--blue, .oui-tag--blue) {
   --oui-background: var(--oui-blue-1);
   --oui-foreground: var(--oui-blue-8);
-  --oui-shadow-value: var(--oui-blue-6);
+  --oui-shadow-value: var(--oui-blue-5);
 }
 :where(.oui-pill--green, .oui-tag--green) {
   --oui-background: var(--oui-green-1);
   --oui-foreground: var(--oui-green-8);
-  --oui-shadow-value: var(--oui-green-6);
+  --oui-shadow-value: var(--oui-green-5);
 }
 :where(.oui-pill--orange, .oui-tag--orange) {
   --oui-background: var(--oui-orange-1);
   --oui-foreground: var(--oui-orange-8);
-  --oui-shadow-value: var(--oui-orange-6);
+  --oui-shadow-value: var(--oui-orange-5);
 }
 :where(.oui-pill--purple, .oui-tag--purple) {
   --oui-background: var(--oui-purple-1);
   --oui-foreground: var(--oui-purple-8);
-  --oui-shadow-value: var(--oui-purple-6);
+  --oui-shadow-value: var(--oui-purple-5);
 }
 :where(.oui-pill--red, .oui-tag--red) {
   --oui-background: var(--oui-red-1);
   --oui-foreground: var(--oui-red-8);
-  --oui-shadow-value: var(--oui-red-6);
+  --oui-shadow-value: var(--oui-red-5);
 }
 :where(.oui-pill--yellow, .oui-tag--yellow) {
   --oui-background: var(--oui-yellow-1);
   --oui-foreground: var(--oui-yellow-8);
-  --oui-shadow-value: var(--oui-yellow-6);
+  --oui-shadow-value: var(--oui-yellow-5);
 }
 
 

package/dist/css/button.css

@@ -1,13 +1,14 @@
 /*! https://github.com/oscarpalmer/oui */
 
 
+
 :where(.oui-button) {
-  --oui-background-percentage: 25%;
+  --oui-background-percentage: 50%;
   --oui-background-value: var(--oui-gray-2);
   --oui-foreground-percentage: 0%;
   --oui-foreground-value: var(--oui-gray-8);
   --oui-outline-percentage: 100%;
-  --oui-outline-value: var(--oui-gray-6);
+  --oui-outline-value: var(--oui-gray-5);
   --oui-shadow-inset: color-mix(in oklab, var(--oui-absolute), transparent 75%);
   --oui-shadow-percentage: 82.5%;
   --oui-shadow-value: color-mix(
@@ -27,9 +28,42 @@
   border: none;
   color: color-mix(in oklab, var(--oui-foreground-value), transparent var(--oui-foreground-percentage));
   line-height: 1.25;
+  position: relative;
   transition: 0.125s ease-in-out;
   transition-property: background, outline, box-shadow, color;
 }
+:where(.oui-button)::after {
+  content: "";
+  width: 1em;
+  height: 1em;
+  display: inline-flex;
+  opacity: 0;
+  background-color: color-mix(in oklab, var(--oui-foreground-value), transparent var(--oui-foreground-percentage));
+  -webkit-mask-image: url("");
+  mask-image: url("");
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 1em 1em;
+  mask-size: 1em 1em;
+  pointer-events: none;
+  transition: 0.125s ease-in-out;
+  transition-property: background-color, color, opacity, -webkit-mask-image;
+  transition-property: background-color, color, mask-image, opacity;
+  transition-property: background-color, color, mask-image, opacity, -webkit-mask-image;
+  position: absolute;
+  inset: 50% auto auto 50%;
+  transform: translate3d(-50%, -50%, 0);
+}
+:where(.oui-button):has(.oui-icon:is(:first-child))::after {
+  inset: auto;
+  transform: none;
+}
+:where(.oui-button):has(.oui-icon:is(:last-child))::after {
+  inset: auto 0.75em auto auto;
+  transform: none;
+}
 :where(.oui-button):focus-visible {
   --oui-outline-percentage: 75%;
 }
@@ -40,6 +74,57 @@
     --oui-shadow-percentage: 90%;
   }
 }
+:where(.oui-button):not([disabled], [aria-disabled=true i])[aria-busy=true i]:not(:has(.oui-icon:is(:first-child, :last-child))), :where(.oui-button):not([disabled], [aria-disabled=true i])[data-state=busy i]:not(:has(.oui-icon:is(:first-child, :last-child))), :where(.oui-button):not([disabled], [aria-disabled=true i])[data-state=error i]:not(:has(.oui-icon:is(:first-child, :last-child))), :where(.oui-button):not([disabled], [aria-disabled=true i])[data-state=loading i]:not(:has(.oui-icon:is(:first-child, :last-child))), :where(.oui-button):not([disabled], [aria-disabled=true i])[data-state=success i]:not(:has(.oui-icon:is(:first-child, :last-child))) {
+  color: transparent;
+}
+:where(.oui-button):not([disabled], [aria-disabled=true i])[aria-busy=true i]::after, :where(.oui-button):not([disabled], [aria-disabled=true i])[data-state=busy i]::after, :where(.oui-button):not([disabled], [aria-disabled=true i])[data-state=error i]::after, :where(.oui-button):not([disabled], [aria-disabled=true i])[data-state=loading i]::after, :where(.oui-button):not([disabled], [aria-disabled=true i])[data-state=success i]::after {
+  opacity: 1;
+}
+:where(.oui-button):not([disabled], [aria-disabled=true i])[aria-busy=true i] .oui-icon, :where(.oui-button):not([disabled], [aria-disabled=true i])[data-state=busy i] .oui-icon, :where(.oui-button):not([disabled], [aria-disabled=true i])[data-state=error i] .oui-icon, :where(.oui-button):not([disabled], [aria-disabled=true i])[data-state=loading i] .oui-icon, :where(.oui-button):not([disabled], [aria-disabled=true i])[data-state=success i] .oui-icon {
+  opacity: 0;
+}
+:where(.oui-button):not([disabled], [aria-disabled=true i])[aria-busy=true i], :where(.oui-button):not([disabled], [aria-disabled=true i])[data-state=busy i], :where(.oui-button):not([disabled], [aria-disabled=true i])[data-state=loading i] {
+  --oui-background-value: var(--oui-blue-2);
+  --oui-foreground-value: var(--oui-blue-8);
+  --oui-outline-value: var(--oui-blue-5);
+}
+:where(.oui-button):not([disabled], [aria-disabled=true i])[aria-busy=true i]::after, :where(.oui-button):not([disabled], [aria-disabled=true i])[data-state=busy i]::after, :where(.oui-button):not([disabled], [aria-disabled=true i])[data-state=loading i]::after {
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLWxvYWRlci0yIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiIC8+PHBhdGggZD0iTTEyIDNhOSA5IDAgMSAwIDkgOSIgLz48L3N2Zz4=");
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLWxvYWRlci0yIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiIC8+PHBhdGggZD0iTTEyIDNhOSA5IDAgMSAwIDkgOSIgLz48L3N2Zz4=");
+  transform-origin: center;
+  animation: oui-button-icon-centered 1s linear infinite;
+}
+@keyframes oui-button-icon-centered {
+  to {
+    transform: translate3d(-50%, -50%, 0) rotate3d(0, 0, 1, 360deg);
+  }
+}
+:where(.oui-button):not([disabled], [aria-disabled=true i])[aria-busy=true i]:has(.oui-icon:is(:first-child, :last-child))::after, :where(.oui-button):not([disabled], [aria-disabled=true i])[data-state=busy i]:has(.oui-icon:is(:first-child, :last-child))::after, :where(.oui-button):not([disabled], [aria-disabled=true i])[data-state=loading i]:has(.oui-icon:is(:first-child, :last-child))::after {
+  animation: oui-button-icon-offset 1s linear infinite;
+}
+@keyframes oui-button-icon-offset {
+  to {
+    transform: rotate3d(0, 0, 1, 360deg);
+  }
+}
+:where(.oui-button):not([disabled], [aria-disabled=true i])[data-state=error i] {
+  --oui-background-value: var(--oui-red-2);
+  --oui-foreground-value: var(--oui-red-8);
+  --oui-outline-value: var(--oui-red-5);
+}
+:where(.oui-button):not([disabled], [aria-disabled=true i])[data-state=error i]::after {
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLXgiPjxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIgLz48cGF0aCBkPSJNMTggNmwtMTIgMTIiIC8+PHBhdGggZD0iTTYgNmwxMiAxMiIgLz48L3N2Zz4=");
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLXgiPjxwYXRoIHN0cm9rZT0ibm9uZSIgZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIgLz48cGF0aCBkPSJNMTggNmwtMTIgMTIiIC8+PHBhdGggZD0iTTYgNmwxMiAxMiIgLz48L3N2Zz4=");
+}
+:where(.oui-button):not([disabled], [aria-disabled=true i])[data-state=success i] {
+  --oui-background-value: var(--oui-green-2);
+  --oui-foreground-value: var(--oui-green-8);
+  --oui-outline-value: var(--oui-green-5);
+}
+:where(.oui-button):not([disabled], [aria-disabled=true i])[data-state=success i]::after {
+  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLWNoZWNrIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiIC8+PHBhdGggZD0iTTUgMTJsNSA1bDEwIC0xMCIgLz48L3N2Zz4=");
+  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJpY29uIGljb24tdGFibGVyIGljb25zLXRhYmxlci1vdXRsaW5lIGljb24tdGFibGVyLWNoZWNrIj48cGF0aCBzdHJva2U9Im5vbmUiIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiIC8+PHBhdGggZD0iTTUgMTJsNSA1bDEwIC0xMCIgLz48L3N2Zz4=");
+}
 :where(.oui-button):not([disabled], [aria-disabled=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);
   scale: 0.95;
@@ -53,35 +138,42 @@
   --oui-shadow-percentage: 92.5%;
   font-style: italic;
 }
+:where(.oui-button) .oui-icon {
+  width: 1em;
+  height: 1em;
+}
+:where(.oui-button) .oui-icon:is(:first-child, :last-child) {
+  transition: opacity 0.125s ease-in-out;
+}
 :where(.oui-button--blue) {
-  --oui-background-value: var(--oui-blue-3);
+  --oui-background-value: var(--oui-blue-2);
   --oui-foreground-value: var(--oui-blue-8);
-  --oui-outline-value: var(--oui-blue-6);
+  --oui-outline-value: var(--oui-blue-5);
 }
 :where(.oui-button--green) {
-  --oui-background-value: var(--oui-green-3);
+  --oui-background-value: var(--oui-green-2);
   --oui-foreground-value: var(--oui-green-8);
-  --oui-outline-value: var(--oui-green-6);
+  --oui-outline-value: var(--oui-green-5);
 }
 :where(.oui-button--orange) {
-  --oui-background-value: var(--oui-orange-3);
+  --oui-background-value: var(--oui-orange-2);
   --oui-foreground-value: var(--oui-orange-8);
-  --oui-outline-value: var(--oui-orange-6);
+  --oui-outline-value: var(--oui-orange-5);
 }
 :where(.oui-button--purple) {
-  --oui-background-value: var(--oui-purple-3);
+  --oui-background-value: var(--oui-purple-2);
   --oui-foreground-value: var(--oui-purple-8);
-  --oui-outline-value: var(--oui-purple-6);
+  --oui-outline-value: var(--oui-purple-5);
 }
 :where(.oui-button--red) {
-  --oui-background-value: var(--oui-red-3);
+  --oui-background-value: var(--oui-red-2);
   --oui-foreground-value: var(--oui-red-8);
-  --oui-outline-value: var(--oui-red-6);
+  --oui-outline-value: var(--oui-red-5);
 }
 :where(.oui-button--yellow) {
-  --oui-background-value: var(--oui-yellow-3);
+  --oui-background-value: var(--oui-yellow-2);
   --oui-foreground-value: var(--oui-yellow-8);
-  --oui-outline-value: var(--oui-yellow-6);
+  --oui-outline-value: var(--oui-yellow-5);
 }
 :where(.oui-button--rounded) {
   padding: 0.5em 1em;