@troennes/minium 0.2.0 → 0.3.0

package/README.md

@@ -35,13 +35,13 @@ The library takes on more CSS when it lets users write meaningfully less HTML. F
 Load the minified stylesheet from jsDelivr without installing anything:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@troennes/minium@0.2.0/dist/minium.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@troennes/minium@0.3.0/dist/minium.min.css">
 ```
 
 To add a color theme, load its stylesheet after the core stylesheet:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@troennes/minium@0.2.0/dist/themes/blue.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@troennes/minium@0.3.0/dist/themes/blue.css">
 ```
 
 ### Install with npm
@@ -101,7 +101,7 @@ Keep the generated `fonts/` directory beside the stylesheet so its relative font
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Hello, world</title>
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@troennes/minium@0.2.0/dist/minium.min.css">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@troennes/minium@0.3.0/dist/minium.min.css">
 </head>
 <body>
   <main class="container flow">

package/dist/integrations/prism.css

@@ -151,6 +151,8 @@
   div.code-toolbar>.toolbar>.toolbar-item>a,
   div.code-toolbar>.toolbar>.toolbar-item>button,
   div.code-toolbar>.toolbar>.toolbar-item>span {
+    --border-color: var(--color-border-weak);
+
     display: inline-flex;
     align-items: center;
     gap: var(--space-3xs);
@@ -160,8 +162,8 @@
     background-color: var(--color-fill);
     color: var(--color-text);
     padding: var(--space-3xs) var(--space-2xs);
-    border: var(--border-width) solid var(--color-border-weak);
-    box-shadow: var(--shadow-small);
+    border: var(--border-width) solid var(--border-color);
+    border-bottom-color: color-mix(in oklab, var(--border-color), var(--shadow-small));
     border-radius: var(--border-radius-s);
   }
 

package/dist/minium.css

@@ -98,7 +98,7 @@
     --line-height: 1.5;
     --font-weight: 400;
     --font-weight-bold: 700;
-    --shadow-small: 0 1px 3px -1px rgb(0 0 0 / 10%), 0 1px 2px 0 rgb(0 0 0 / 10%); 
+    --shadow-small: black 8%; 
     --shadow-medium: 0 4px 6px -1px rgb(0 0 0 / 10%), 0 2px 4px -2px rgb(0 0 0 / 10%); 
     --shadow-large: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%); 
     --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 5%);
@@ -464,7 +464,17 @@
   
   *,
   *::before,
-  *::after {
+  *::after,
+  *::file-selector-button {
+    box-sizing: border-box;
+  }
+
+  
+  *::-webkit-slider-thumb {
+    box-sizing: border-box;
+  }
+
+  *::-moz-range-thumb {
     box-sizing: border-box;
   }
 
@@ -1029,12 +1039,13 @@
   :where(button, input[type="submit"], input[type="button"], input[type="reset"], [role="button"] ) {
     --button-surface: var(--color-primary);
     --button-text: var(--color-primary-inverse);
+    --border-color: var(--button-surface);
 
     background-color: var(--button-surface);
     color: var(--button-text);
-    
     padding: var(--space-2xs) var(--space-xs);
-    border: var(--border-width) solid var(--button-surface);
+    border: var(--border-width) solid var(--border-color);
+    border-bottom-color: color-mix(in oklab, var(--border-color), var(--shadow-small));
     border-radius: var(--border-radius-m);
     font-weight: var(--font-weight-bold);
     line-height: var(--line-height);
@@ -1043,13 +1054,15 @@
 
     
     &:is([aria-current], :hover) {
+      --border-color: oklch(from var(--button-surface) calc(l * var(--hover-multiplier)) c h);
+
       background-color: oklch(from var(--button-surface) calc(l * var(--hover-multiplier)) c h);
-      border-color: oklch(from var(--button-surface) calc(l * var(--hover-multiplier)) c h);
     }
 
     &:active {
+      --border-color: oklch(from var(--button-surface) calc(l * var(--hover-multiplier) * var(--hover-multiplier)) c h);
+
       background-color: oklch(from var(--button-surface) calc(l * var(--hover-multiplier) * var(--hover-multiplier)) c h);
-      border-color: oklch(from var(--button-surface) calc(l * var(--hover-multiplier) * var(--hover-multiplier)) c h);
     }
 
     
@@ -1102,9 +1115,7 @@
     &.neutral {
       --button-surface: transparent;
       --button-text: var(--color-text);
-
-      border: var(--border-width) solid var(--color-border-strong);
-      box-shadow: var(--shadow-small);
+      --border-color: var(--color-border-strong);
 
       &:hover {
         --button-surface: var(--color-fill);
@@ -1121,18 +1132,18 @@
   input[type="reset"] {
     --button-surface: var(--color-primary-fill-active);
     --button-text: var(--color-primary-text);
+    --border-color: transparent;
 
     
     --button-overlay-alpha: calc(1 - var(--hover-multiplier));
     --button-overlay: light-dark(oklch(from var(--button-text) l c h / calc(1.5 * var(--button-overlay-alpha))), rgb(0 0 0 / calc(2 * var(--button-overlay-alpha))));
 
-    border-color: transparent;
-
     
     &:is([aria-current], :hover, :active) {
+      --border-color: transparent;
+
       background-color: var(--button-surface);
       background-image: linear-gradient(var(--button-overlay), var(--button-overlay));
-      border-color: transparent;
     }
 
     &:active {
@@ -1176,7 +1187,6 @@
     --button-text: var(--link-color);
 
     border-color: transparent;
-    box-shadow: none;
     text-decoration: underline;
     text-decoration-thickness: var(--text-decoration-thickness);
     text-decoration-color: var(--link-color-decoration);
@@ -1238,7 +1248,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    
+    border-bottom-color: var(--border-color);
 
     &:is(:hover, :focus-visible) {
       --button-surface: var(--color-fill);
@@ -1267,8 +1277,10 @@
     display: block;
 
     &:not(:has(> summary[role="button"]), .border-none) {
-      border: var(--border-width) solid var(--color-border-strong);
-      box-shadow: var(--shadow-small);
+      --border-color: var(--color-border-strong);
+
+      border: var(--border-width) solid var(--border-color);
+      border-bottom-color: color-mix(in oklab, var(--border-color), var(--shadow-small));
     }
 
     &[open] summary::after{
@@ -1502,6 +1514,22 @@
       object-fit: cover;
     }
 
+    
+    &:has(> img) {
+      position: relative;
+      background-color: transparent; 
+
+      &::after {
+        content: "";
+        position: absolute;
+        inset: 0;
+        border-radius: inherit;
+        corner-shape: inherit;
+        box-shadow: inset 0 0 0 1px light-dark(rgb(0 0 0 / 8%), rgb(255 255 255 / 8%));
+        pointer-events: none;
+      }
+    }
+
     > :not(img) {
       color: inherit;
       overflow: hidden;
@@ -1573,6 +1601,8 @@
 @layer components {
   .badge,
   .pill {
+    --border-color: var(--color-border-weak);
+
     display: inline-flex;
     align-items: center;
     gap: var(--space-3xs);
@@ -1582,14 +1612,15 @@
     background-color: var(--color-fill);
     color: var(--color-text);
     padding: var(--space-3xs) var(--space-2xs);
-    border: var(--border-width) solid var(--color-border-weak);
-    
+    border: var(--border-width) solid var(--border-color);
+    border-bottom-color: color-mix(in oklab, var(--border-color), var(--shadow-small));
     border-radius: var(--border-radius-s);
 
     &.primary {
+      --border-color: var(--color-primary-border-weak);
+
       background-color: var(--color-primary-fill);
       color: var(--color-primary-text);
-      border-color: var(--color-primary-border-weak);
     }
 
     &.muted {
@@ -1597,33 +1628,38 @@
     }
 
     &.accent {
+      --border-color: var(--color-accent-border-weak);
+
       background-color: var(--color-accent-fill);
       color: var(--color-accent-text);
-      border-color: var(--color-accent-border-weak);
     }
 
     &.danger {
+      --border-color: var(--color-danger-border-weak);
+
       background-color: var(--color-danger-fill);
       color: var(--color-danger-text);
-      border-color: var(--color-danger-border-weak);  
     }
 
     &.success {
+      --border-color: var(--color-success-border-weak);
+
       background-color: var(--color-success-fill);
       color: var(--color-success-text);
-      border-color: var(--color-success-border-weak);
     }
 
     &.warning {
+      --border-color: var(--color-warning-border-weak);
+
       background-color: var(--color-warning-fill);
       color: var(--color-warning-text);
-      border-color: var(--color-warning-border-weak);
     }
 
     &.info {
+      --border-color: var(--color-info-border-weak);
+
       background-color: var(--color-info-fill);
       color: var(--color-info-text);
-      border-color: var(--color-info-border-weak);
     }
   }
 
@@ -1754,7 +1790,7 @@
     gap: var(--space-3xs);
 
     
-    &:where(:not(.primary, .accent, .danger, .success, .warning, .info, .contrast, .neutral, .secondary, .tertiary, .icon-only, .close)) {
+    &:where(:not(.primary, .accent, .danger, .success, .warning, .info, .contrast, .neutral, .secondary, .tertiary, .icon-only, .close, [role="group"] > .dropdown > *)) {
       --button-surface: transparent;
       --button-text: var(--color-text);
 
@@ -2278,17 +2314,20 @@
   
   input:is([type="checkbox"], [type="radio"]) {
     --size: 1em;
+    --border-color: var(--color-border-strong);
 
     appearance: none;
-    height: var(--size);
-    width: var(--size);
+    
+    height: round(var(--size), 1px);
+    width: round(var(--size), 1px);
     position: relative;
     cursor: pointer;
     font-size: inherit;
     margin: 0;
     margin-block-end: -0.15em;
     margin-inline-end: var(--space-3xs);
-    border: var(--border-width) solid var(--color-border-strong);
+    border: var(--border-width) solid var(--border-color);
+    border-bottom-color: color-mix(in oklab, var(--border-color), var(--shadow-small));
 
     &:focus {
       outline-offset: var(--outline-offset, 1px);
@@ -2318,29 +2357,30 @@
     }
   }
 
-  input:is([type="checkbox"]:not([role="switch"]), [type="radio"]):checked,
-  input[type="checkbox"]:indeterminate {
-    background-color: var(--color-primary);
-    border-color: var(--color-primary);
+  input:is([type="checkbox"]:not([role="switch"])):is(:checked, :indeterminate) {
+    --border-color: var(--color-primary);
+    --inverse-color: var(--color-primary-inverse);
+
+    background-color: var(--border-color);
 
     &::after {
       content: "";
       position: absolute;
       inset: 0;
-      background-color: var(--color-primary-inverse);
+      background-color: var(--inverse-color);
       mask-position: center;
       mask-repeat: no-repeat;
       mask-size: 100%;
     }
 
     &[aria-invalid="false"] {
-      background-color: var(--color-success);
-      border-color: var(--color-success);
+      --border-color: var(--color-success);
+      --inverse-color: var(--color-success-inverse);
     }
 
     &[aria-invalid="true"] {
-      background-color: var(--color-danger);
-      border-color: var(--color-danger);
+      --border-color: var(--color-danger);
+      --inverse-color: var(--color-danger-inverse);
     }
   }
 
@@ -2359,51 +2399,75 @@
   input[type="radio"] {
     border-radius: var(--border-radius-f);
 
-    &:checked::after {
+    &:checked {
+      --border-color: var(--color-primary);
+      --inverse-color: var(--color-primary-inverse);
+
       
-      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4' fill='currentColor'/%3E%3C/svg%3E");
+      border-width: calc(var(--size) * 0.3);
+      border-bottom-color: var(--border-color);
+      background-color: var(--inverse-color);
+      background-clip: padding-box;
+
+      &[aria-invalid="false"] {
+        --border-color: var(--color-success);
+        --inverse-color: var(--color-success-inverse);
+      }
+
+      &[aria-invalid="true"] {
+        --border-color: var(--color-danger);
+        --inverse-color: var(--color-danger-inverse);
+      }
     }
   }
 
   
   input[type="checkbox"][role="switch"] {
     --width: 1.85;
+    --border-color: var(--switch-color-border);
 
     background-color: var(--switch-color-surface); 
-    inline-size: calc(var(--width) * var(--size));
+    inline-size: round(var(--width) * var(--size), 1px);
     transition: 0.1s ease-in-out;
-    border: var(--border-width) solid var(--switch-color-border);
     border-radius: var(--border-radius-f);
-    padding: 1px;
+    
+    border: none;
+    box-shadow:
+      inset 0 calc(-1 * var(--border-width)) 0 color-mix(in oklab, transparent, var(--shadow-small)),
+      inset 0 0 0 var(--border-width) var(--border-color);
 
     &::before {
       content: "";
       display: block;
       aspect-ratio: 1;
-      block-size: calc(var(--size) - (2 * var(--border-width)) - 2px);
+      block-size: 100%;
+      border: var(--border-width) solid rgb(0 0 0 / 10%);
       border-radius: var(--border-radius-f);
-      background-color: var(--color-primary-inverse);
-      box-shadow: var(--shadow-small);
+      background-color: white;
+      background-clip: padding-box;
       transition: margin 0.1s ease-in-out;
     }
 
     &:checked {
-      background-color: var(--color-primary);
-      border-color: var(--color-primary);
       
+      --border-color: oklch(from var(--color-primary) min(l, 0.72) c h);
+
+      background-color: var(--border-color);
+
       &::before {
-        margin-inline-start: calc((var(--width) * var(--size)) - var(--size));
-        background-color: var(--color-primary-inverse);
+        margin-inline-start: calc(round(var(--width) * var(--size), 1px) - round(var(--size), 1px));
       }
 
       &[aria-invalid="false"] {
+        --border-color: var(--color-success);
+
         background-color: var(--color-success);
-        border-color: var(--color-success);
       }
 
       &[aria-invalid="true"] {
+        --border-color: var(--color-danger);
+
         background-color: var(--color-danger);
-        border-color: var(--color-danger);
       }
     }
 
@@ -2418,10 +2482,12 @@
 @layer base {
   
   :where(input, select, textarea) {
+    --border-color: var(--color-border-strong);
+
     background-color: var(--form-color-surface);
-    border: var(--border-width) solid var(--color-border-strong);
+    border: var(--border-width) solid var(--border-color);
+    border-bottom-color: color-mix(in oklab, var(--border-color), var(--shadow-small));
     border-radius: var(--border-radius-m);
-    
     line-height: var(--line-height);
   }
 
@@ -2466,7 +2532,7 @@
 
   :is(input, select, textarea) {
     &[aria-invalid="false"] {
-      border-color: var(--color-success-border-strong);
+      --border-color: var(--color-success-border-strong);
 
       + small {
         color: var(--color-success-text);
@@ -2474,7 +2540,7 @@
     }
 
     &[aria-invalid="true"] {
-      border-color: var(--color-danger-border-strong);
+      --border-color: var(--color-danger-border-strong);
 
       + small {
         color: var(--color-danger-text);
@@ -2521,8 +2587,9 @@
   select[disabled],
   textarea[disabled],
   :where(fieldset[disabled]) :is(input:not([type="submit"], [type="button"], [type="reset"]), select, textarea) {
+    --border-color: var(--form-color-border-disabled);
+
     background-color: transparent;
-    border-color: var(--form-color-border-disabled); 
     opacity: 0.5;
     pointer-events: none;
   }
@@ -2571,65 +2638,90 @@
   }
 
   input[type="file"] {
+    
+    border: none;
+    box-shadow:
+      inset 0 calc(-1 * var(--border-width)) 0 color-mix(in oklab, transparent, var(--shadow-small)),
+      inset 0 0 0 var(--border-width) var(--border-color);
+
     &::file-selector-button {
+      --border-color: var(--color-primary);
+
       background-color: var(--color-primary);
       color: var(--color-primary-inverse);
-      box-shadow: var(--shadow-small);
       padding: var(--space-2xs) var(--space-xs);
-      border: var(--border-width) solid var(--color-primary);
+      border: var(--border-width) solid var(--border-color);
+      border-bottom-color: color-mix(in oklab, var(--border-color), var(--shadow-small));
+      
+      block-size: 100%;
       font-weight: bold;
       line-height: var(--line-height);
       text-align: center;
       margin-inline-end: var(--space-xs);
       border-radius: 0;
+      border-start-start-radius: var(--border-radius-m);
+      border-end-start-radius: var(--border-radius-m);
       font-family: inherit;
+      font-size: inherit;
     }
 
     &:is([aria-current], :hover)::file-selector-button {
-      background-color: oklch(from var(--color-primary) calc(l * var(--hover-multiplier)) c h);
-      border-color: oklch(from var(--color-primary) calc(l * var(--hover-multiplier)) c h);
+      --border-color: oklch(from var(--color-primary) calc(l * var(--hover-multiplier)) c h);
+
+      background-color: var(--border-color);
     }
 
     &:active::file-selector-button {
-      background-color: oklch(from var(--color-primary) calc(l * var(--hover-multiplier) * var(--hover-multiplier)) c h);
-      border-color: oklch(from var(--color-primary) calc(l * var(--hover-multiplier) * var(--hover-multiplier)) c h);
+      --border-color: oklch(from var(--color-primary) calc(l * var(--hover-multiplier) * var(--hover-multiplier)) c h);
+
+      background-color: var(--border-color);
     }
 
-    &.small::file-selector-button {
-      padding: var(--space-3xs) var(--space-2xs);
+    
+    &.small {
       font-size: var(--size-small);
+
+      &::file-selector-button {
+        padding: var(--space-3xs) var(--space-2xs);
+      }
     }
 
-    &.large::file-selector-button {
-      padding: var(--space-xs) var(--space-s);
+    &.large {
       font-size: var(--size-h4);
+
+      &::file-selector-button {
+        padding: var(--space-xs) var(--space-s);
+      }
     }
   }
 
   input[type="range"] {
     background-color: var(--color-fill);
     border-color: var(--color-border-weak);
-    height: 0.33em;
+    
+    height: round(0.33em, 2px);
     appearance: none;
     cursor: pointer;
     box-shadow: var(--shadow-inner);
 
     &::-moz-range-thumb {
-      width: 1em;
-      height: 1em;
-      background-color: var(--color-text);
+      width: round(1em, 2px);
+      height: round(1em, 2px);
+      
+      background-color: white;
+      background-clip: padding-box;
+      border: var(--border-width) solid rgb(0 0 0 / 20%);
       border-radius: var(--border-radius-f);
-      border: none;
-      box-shadow: var(--shadow-small);
     }
 
     &::-webkit-slider-thumb {
       appearance: none;
-      width: 1em;
-      height: 1em;
-      background-color: var(--color-text);
+      width: round(1em, 2px);
+      height: round(1em, 2px);
+      background-color: white;
+      background-clip: padding-box;
+      border: var(--border-width) solid rgb(0 0 0 / 20%);
       border-radius: var(--border-radius-f);
-      box-shadow: var(--shadow-small);
     }
 
     &:active {
@@ -2812,25 +2904,44 @@
       border-radius: 0;
     }
 
-    :not(:first-child, button, input:is([type="submit"], [type="button"], [type="reset"])) {
+    
+    > :not(:first-child, button, [role="button"], input:is([type="submit"], [type="button"], [type="reset"])) {
       border-inline-start: 0;
     }
+
+    > :first-child {
+      border-start-start-radius: var(--border-radius-m);
+      border-end-start-radius: var(--border-radius-m);
+    }
+
+    > :last-child {
+      border-start-end-radius: var(--border-radius-m);
+      border-end-end-radius: var(--border-radius-m);
+    }
+
     
-    :last-child {
-      border-bottom-right-radius: var(--border-radius-m);
-      border-top-right-radius: var(--border-radius-m);
+    > .dropdown {
+      display: flex;
+      align-self: stretch;
+
+      > button[popovertarget] {
+        border-radius: inherit;
+      }
     }
 
-    :first-child {
-      border-bottom-left-radius: var(--border-radius-m);
-      border-top-left-radius: var(--border-radius-m);
+    
+    > :is(button, [role="button"], input:is([type="submit"], [type="button"], [type="reset"]), .dropdown)
+      + :is(button, [role="button"], input:is([type="submit"], [type="button"], [type="reset"])),
+    > :is(button, [role="button"], input:is([type="submit"], [type="button"], [type="reset"]))
+      + .dropdown > button[popovertarget] {
+      border-inline-start-color: color-mix(in oklab, var(--button-surface), var(--button-text) 20%);
     }
 
     button,
     input:is([type="submit"], [type="button"], [type="reset"]) {
       width: unset;
     }
-  }  
+  }
 }
 
 
@@ -2964,11 +3075,13 @@
 
   
   nav[aria-label="pagination" i] > :is(ol,ul) {
+    --border-color: var(--color-border-strong);
+
     inline-size: fit-content;
     max-inline-size: 100%;
-    border: var(--border-width) solid var(--color-border-strong);
+    border: var(--border-width) solid var(--border-color);
+    border-bottom-color: color-mix(in oklab, var(--border-color), var(--shadow-small));
     border-radius: var(--border-radius-s);
-    box-shadow: var(--shadow-small);
 
     li {
       
@@ -3137,7 +3250,7 @@
     &::-webkit-meter-bar {
       background: transparent;
       border-radius: var(--border-radius-f);
-      block-size: 0.5em;
+      block-size: 100%;
     }
 
     &::-webkit-meter-optimum-value,
@@ -3193,7 +3306,7 @@
 
   
   .shadow-none  {box-shadow: none}
-  .shadow-s     {box-shadow: var(--shadow-small)}
+  .shadow-s     {border-bottom: var(--border-width) solid color-mix(in oklab, var(--border-color, var(--color-border-weak)), var(--shadow-small))}
   .shadow-m     {box-shadow: var(--shadow-medium)}
   .shadow-l     {box-shadow: var(--shadow-large)}
   .shadow-inner {box-shadow: var(--shadow-inner)}