@oscarpalmer/oui 0.11.0 → 0.13.0

package/dist/css/badge.css

@@ -1,15 +1,19 @@
 /*! https://github.com/oscarpalmer/oui */
+
+.oui {
+  /* Colors*/
+}
 :where(.oui-pill, .oui-tag) {
-  --oui-shadow-value: color-mix(
-  	in oklch,
+  --oui-shadow-mixed: color-mix(
+  	in oklab,
   	var(--oui-shadow, var(--oui-gray-6)),
-  	transparent 95%
+  	transparent 92.5%
   );
+  box-shadow: inset 0 1px 0 0 transparent, 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-0)), transparent 25%);
-  box-shadow: 0 0 0 1px var(--oui-shadow-value), 0 1px 2px 0 var(--oui-shadow-value), 0 2px 4px 0 var(--oui-shadow-value);
   color: var(--oui-foreground, var(--oui-gray-8));
   line-height: 1.25;
 }
@@ -27,9 +31,12 @@
 :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;
-  font-weight: bold;
-  letter-spacing: 0.1em;
-  text-transform: uppercase;
+}
+:where(.oui-pill-tiny) {
+  padding: 0.25em 0.75em;
+}
+:where(.oui-tag-tiny) {
+  padding: 0.25em 0.5em;
 }
 :where(.oui-pill-blue, .oui-tag-blue) {
   --oui-background: var(--oui-blue-0);

package/dist/css/button.css

@@ -1,14 +1,17 @@
+/*! https://github.com/oscarpalmer/oui */
 
 :where(.oui-button) {
   --oui-background-percentage: 25%;
   --oui-foreground-percentage: 0%;
   --oui-outline-percentage: 100%;
-  --oui-shadow-percentage: 85%;
+  --oui-shadow-inset: color-mix(in oklab, white, transparent 75%);
+  --oui-shadow-percentage: 82.5%;
   --oui-shadow-value: color-mix(
-  	in oklch,
+  	in oklab,
   	var(--oui-outline-value, var(--oui-gray-6)),
   	transparent var(--oui-shadow-percentage)
   );
+  box-shadow: inset 0 1px 0 0 var(--oui-shadow-inset), 0 0 0 1px var(--oui-shadow-value), 0 1px 2px -0.5px var(--oui-shadow-value), 0 2px 4px -1px var(--oui-shadow-value);
   padding: 0.5em 0.75em;
   display: inline-flex;
   flex-flow: row wrap;
@@ -18,7 +21,6 @@
   background-color: color-mix(in oklab, var(--oui-background-value, var(--oui-gray-2)), transparent var(--oui-background-percentage));
   outline: 4px solid color-mix(in oklab, var(--oui-outline-value, var(--oui-gray-6)), transparent var(--oui-outline-percentage));
   border: none;
-  box-shadow: 0 0 0 1px var(--oui-shadow-value), 0 1px 2px 0 var(--oui-shadow-value), 0 2px 4px 0 var(--oui-shadow-value);
   color: color-mix(in oklab, var(--oui-foreground-value, var(--oui-gray-8)), transparent var(--oui-foreground-percentage));
   line-height: 1.25;
   transition: 0.125s ease-in-out;
@@ -80,7 +82,7 @@
   }
 }
 :where(.oui-button:not([disabled], [aria-disabled=true i]):active) {
-  box-shadow: 0 0 0 1px var(--oui-shadow-mixed), inset 0 1px 2px 0 var(--oui-shadow-mixed), inset 0 2px 4px 0 var(--oui-shadow-mixed);
+  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-button[disabled], .oui-button[aria-disabled=true i]) {
   --oui-background-percentage: 80%;

package/dist/css/color.css

@@ -24,16 +24,16 @@
   --oui-green-8: light-dark(oklch(0.42 0.11 142), oklch(0.85 0.04 148));
   --oui-green-9: light-dark(oklch(0.35 0.1 141), oklch(0.9 0.03 149));
   --oui-green-10: light-dark(oklch(0.3 0.09 140), oklch(0.95 0.02 150));
-  --oui-orange-0: light-dark(oklch(0.995 0.02 60), oklch(0.2 0.08 50));
-  --oui-orange-1: light-dark(oklch(0.99 0.035 59), oklch(0.25 0.09 51));
+  --oui-orange-0: light-dark(oklch(0.99 0.02 60), oklch(0.2 0.08 50));
+  --oui-orange-1: light-dark(oklch(0.985 0.035 59), oklch(0.25 0.09 51));
   --oui-orange-2: light-dark(oklch(0.97 0.05 58), oklch(0.32 0.1 52));
   --oui-orange-3: light-dark(oklch(0.93 0.07 57), oklch(0.4 0.09 53));
-  --oui-orange-4: light-dark(oklch(0.85 0.1 56), oklch(0.5 0.08 54));
-  --oui-orange-5: light-dark(oklch(0.70 0.11 55), oklch(0.6 0.07 55));
-  --oui-orange-6: light-dark(oklch(0.60 0.12 54), oklch(0.7 0.06 56));
-  --oui-orange-7: light-dark(oklch(0.50 0.14 53), oklch(0.8 0.05 57));
-  --oui-orange-8: light-dark(oklch(0.42 0.12 53), oklch(0.85 0.04 58));
-  --oui-orange-9: light-dark(oklch(0.35 0.11 51), oklch(0.9 0.03 59));
+  --oui-orange-4: light-dark(oklch(0.87 0.1 56), oklch(0.5 0.08 54));
+  --oui-orange-5: light-dark(oklch(0.76 0.11 55), oklch(0.6 0.07 55));
+  --oui-orange-6: light-dark(oklch(0.65 0.12 54), oklch(0.7 0.06 56));
+  --oui-orange-7: light-dark(oklch(0.55 0.14 53), oklch(0.8 0.05 57));
+  --oui-orange-8: light-dark(oklch(0.45 0.12 52), oklch(0.85 0.04 58));
+  --oui-orange-9: light-dark(oklch(0.375 0.11 51), oklch(0.9 0.03 59));
   --oui-orange-10: light-dark(oklch(0.3 0.09 50), oklch(0.95 0.02 60));
   --oui-purple-0: light-dark(oklch(0.99 0.02 300), oklch(0.2 0.08 290));
   --oui-purple-1: light-dark(oklch(0.98 0.035 299), oklch(0.25 0.09 291));
@@ -46,27 +46,27 @@
   --oui-purple-8: light-dark(oklch(0.42 0.12 292), oklch(0.85 0.04 298));
   --oui-purple-9: light-dark(oklch(0.35 0.11 291), oklch(0.9 0.03 299));
   --oui-purple-10: light-dark(oklch(0.3 0.09 290), oklch(0.95 0.02 300));
-  --oui-red-0: light-dark(oklch(0.995 0.024 25), oklch(0.2 0.08 25));
-  --oui-red-1: light-dark(oklch(0.99 0.032 24), oklch(0.25 0.09 24));
-  --oui-red-2: light-dark(oklch(0.96 0.05 23), oklch(0.32 0.1 23));
+  --oui-red-0: light-dark(oklch(0.99 0.024 25), oklch(0.2 0.08 25));
+  --oui-red-1: light-dark(oklch(0.985 0.032 24), oklch(0.25 0.09 24));
+  --oui-red-2: light-dark(oklch(0.97 0.05 23), oklch(0.32 0.1 23));
   --oui-red-3: light-dark(oklch(0.93 0.07 22), oklch(0.4 0.09 22));
-  --oui-red-4: light-dark(oklch(0.85 0.1 21), oklch(0.5 0.08 21));
-  --oui-red-5: light-dark(oklch(0.72 0.11 20), oklch(0.6 0.07 20));
-  --oui-red-6: light-dark(oklch(0.60 0.12 19), oklch(0.7 0.06 19));
-  --oui-red-7: light-dark(oklch(0.50 0.14 18), oklch(0.8 0.05 18));
-  --oui-red-8: light-dark(oklch(0.42 0.12 17), oklch(0.85 0.04 17));
-  --oui-red-9: light-dark(oklch(0.35 0.11 16), oklch(0.9 0.03 16));
+  --oui-red-4: light-dark(oklch(0.87 0.1 21), oklch(0.5 0.08 21));
+  --oui-red-5: light-dark(oklch(0.76 0.11 20), oklch(0.6 0.07 20));
+  --oui-red-6: light-dark(oklch(0.65 0.12 19), oklch(0.7 0.06 19));
+  --oui-red-7: light-dark(oklch(0.55 0.14 18), oklch(0.8 0.05 18));
+  --oui-red-8: light-dark(oklch(0.45 0.12 17), oklch(0.85 0.04 17));
+  --oui-red-9: light-dark(oklch(0.375 0.11 16), oklch(0.9 0.03 16));
   --oui-red-10: light-dark(oklch(0.3 0.09 15), oklch(0.95 0.02 15));
-  --oui-yellow-0: light-dark(oklch(0.995 0.02 100), oklch(0.2 0.08 90));
-  --oui-yellow-1: light-dark(oklch(0.99 0.035 99), oklch(0.25 0.09 91));
+  --oui-yellow-0: light-dark(oklch(0.99 0.02 100), oklch(0.2 0.08 90));
+  --oui-yellow-1: light-dark(oklch(0.985 0.035 99), oklch(0.25 0.09 91));
   --oui-yellow-2: light-dark(oklch(0.97 0.05 98), oklch(0.33 0.1 92));
   --oui-yellow-3: light-dark(oklch(0.93 0.07 97), oklch(0.4 0.09 93));
-  --oui-yellow-4: light-dark(oklch(0.85 0.1 96), oklch(0.5 0.08 94));
-  --oui-yellow-5: light-dark(oklch(0.72 0.11 95), oklch(0.6 0.07 95));
-  --oui-yellow-6: light-dark(oklch(0.60 0.12 94), oklch(0.7 0.06 96));
-  --oui-yellow-7: light-dark(oklch(0.50 0.14 93), oklch(0.8 0.05 97));
-  --oui-yellow-8: light-dark(oklch(0.42 0.12 92), oklch(0.85 0.04 98));
-  --oui-yellow-9: light-dark(oklch(0.35 0.11 91), oklch(0.9 0.03 99));
+  --oui-yellow-4: light-dark(oklch(0.87 0.1 96), oklch(0.5 0.08 94));
+  --oui-yellow-5: light-dark(oklch(.78 0.11 95), oklch(0.6 0.07 95));
+  --oui-yellow-6: light-dark(oklch(0.65 0.12 94), oklch(0.7 0.06 96));
+  --oui-yellow-7: light-dark(oklch(0.55 0.14 93), oklch(0.8 0.05 97));
+  --oui-yellow-8: light-dark(oklch(0.45 0.12 92), oklch(0.85 0.04 98));
+  --oui-yellow-9: light-dark(oklch(0.375 0.11 91), oklch(0.9 0.03 99));
   --oui-yellow-10: light-dark(oklch(0.3 0.09 90), oklch(0.95 0.02 100));
   --oui-gray-0: light-dark(oklch(0.98 0 0), oklch(0.22 0 0));
   --oui-gray-1: light-dark(oklch(0.98 0 0), oklch(0.26 0 0));

package/dist/css/content.css

@@ -0,0 +1,193 @@
+/*! https://github.com/oscarpalmer/oui */
+
+:where(.oui-card) {
+  box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px color-mix(in oklab, var(--oui-gray-6), transparent 92.5%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-gray-6), transparent 92.5%), 0 2px 4px -1px color-mix(in oklab, var(--oui-gray-6), transparent 92.5%);
+  padding: 1em 1.25em;
+  background-color: var(--oui-absolute);
+  border-radius: 0.5em;
+}
+
+:where(.oui-details > 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;
+}
+:where(.oui-details > summary)::before {
+  content: "";
+  width: 1em;
+  height: 1em;
+  margin: 0 0.5em 0 0;
+  background-color: currentColor;
+  -webkit-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: 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");
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  transition: 0.125s ease-in-out;
+  transform: rotate(-90deg);
+}
+:where(.oui-details > summary):focus-visible {
+  --oui-outline-percentage: 50%;
+  padding: 0 0.5em 0 0.25em;
+  color: var(--oui-blue-8);
+}
+@media (hover: hover) {
+  :where(.oui-details > summary):hover {
+    color: var(--oui-blue-8);
+  }
+}
+:where(.oui-details[open] > summary) {
+  margin: 0 0 1em;
+}
+:where(.oui-details[open] > summary)::before {
+  transform: rotate(0deg);
+}
+
+:where(.oui-formatted) {
+  box-shadow: inset 0 1px 0 0 transparent, 0 0 0 1px color-mix(in oklab, var(--oui-gray-6), transparent 92.5%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-gray-6), transparent 92.5%), 0 2px 4px -1px color-mix(in oklab, var(--oui-gray-6), transparent 92.5%);
+  padding: 1em 1.25em;
+  background-color: var(--oui-absolute);
+  border-radius: 0.5em;
+  color: var(--oui-gray-8);
+  font-family: monospace, monospace;
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+:where(.oui-meter) {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  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;
+  box-shadow: inset 0 1px 2px 0 var(--oui-gray-3);
+}
+:where(.oui-meter)::-moz-meter-bar {
+  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 2px 4px -1px color-mix(in oklab, var(--oui-blue-6), transparent 33%);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  min-width: 0.5em;
+  background-color: var(--oui-blue-5);
+  background-image: none;
+  border-radius: 0.25em;
+}
+:where(.oui-meter):-moz-meter-optimum::-moz-meter-bar {
+  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-green-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-green-6), transparent 33%), 0 2px 4px -1px color-mix(in oklab, var(--oui-green-6), transparent 33%);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  min-width: 0.5em;
+  background-color: var(--oui-green-5);
+  background-image: none;
+  border-radius: 0.25em;
+}
+:where(.oui-meter):-moz-meter-sub-optimum::-moz-meter-bar {
+  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-yellow-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-yellow-6), transparent 33%), 0 2px 4px -1px color-mix(in oklab, var(--oui-yellow-6), transparent 33%);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  min-width: 0.5em;
+  background-color: var(--oui-yellow-5);
+  background-image: none;
+  border-radius: 0.25em;
+}
+:where(.oui-meter):-moz-meter-sub-sub-optimum::-moz-meter-bar {
+  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-red-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-red-6), transparent 33%), 0 2px 4px -1px color-mix(in oklab, var(--oui-red-6), transparent 33%);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  min-width: 0.5em;
+  background-color: var(--oui-red-5);
+  background-image: none;
+  border-radius: 0.25em;
+}
+:where(.oui-meter)::-webkit-meter-bar {
+  -webkit-appearance: none;
+  appearance: none;
+  background: none;
+}
+:where(.oui-meter)::-webkit-meter-even-less-good-value {
+  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-red-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-red-6), transparent 33%), 0 2px 4px -1px color-mix(in oklab, var(--oui-red-6), transparent 33%);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  min-width: 0.5em;
+  background-color: var(--oui-red-5);
+  background-image: none;
+  border-radius: 0.25em;
+}
+:where(.oui-meter)::-webkit-meter-optimum-value {
+  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-green-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-green-6), transparent 33%), 0 2px 4px -1px color-mix(in oklab, var(--oui-green-6), transparent 33%);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  min-width: 0.5em;
+  background-color: var(--oui-green-5);
+  background-image: none;
+  border-radius: 0.25em;
+}
+:where(.oui-meter)::-webkit-meter-suboptimum-value {
+  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-yellow-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-yellow-6), transparent 33%), 0 2px 4px -1px color-mix(in oklab, var(--oui-yellow-6), transparent 33%);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  min-width: 0.5em;
+  background-color: var(--oui-yellow-5);
+  background-image: none;
+  border-radius: 0.25em;
+}
+
+:where(.oui-progress) {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  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;
+  box-shadow: inset 0 1px 2px 0 var(--oui-gray-3);
+}
+:where(.oui-progress)::-moz-progress-bar {
+  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 2px 4px -1px color-mix(in oklab, var(--oui-blue-6), transparent 33%);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  min-width: 0.5em;
+  background-color: var(--oui-blue-5);
+  background-image: none;
+  border-radius: 0.25em;
+}
+:where(.oui-progress)::-webkit-progress-bar {
+  -webkit-appearance: none;
+  appearance: none;
+  background: none;
+}
+:where(.oui-progress)::-webkit-progress-value {
+  box-shadow: inset 0 1px 0 0 color-mix(in oklab, white, transparent 82.5%), 0 0 0 1px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 1px 2px -0.5px color-mix(in oklab, var(--oui-blue-6), transparent 33%), 0 2px 4px -1px color-mix(in oklab, var(--oui-blue-6), transparent 33%);
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  min-width: 0.5em;
+  background-color: var(--oui-blue-5);
+  background-image: none;
+  border-radius: 0.25em;
+}
+
+