@cirthcss/cirth 0.9.0 → 0.10.0

package/dist/cirth.css

@@ -1681,6 +1681,50 @@ button[aria-busy="true"], [type="submit"][aria-busy="true"], [type="button"][ari
   pointer-events: none;
 }
 
+meter {
+  appearance: none;
+  width: 100%;
+  height: var(--cirth-size-2);
+  margin-bottom: calc(var(--cirth-spacing) * .5);
+  border: var(--cirth-border-width-1) solid var(--cirth-meter-border-color);
+  border-radius: var(--cirth-border-radius);
+  background: var(--cirth-meter-background-color);
+  display: inline-block;
+  overflow: hidden;
+}
+
+meter::-webkit-meter-bar {
+  background: none;
+}
+
+meter::-webkit-meter-inner-element {
+  display: flex;
+}
+
+meter::-webkit-meter-optimum-value {
+  background: var(--cirth-meter-optimum-color);
+}
+
+meter::-webkit-meter-suboptimum-value {
+  background: var(--cirth-meter-suboptimum-color);
+}
+
+meter::-webkit-meter-even-less-good-value {
+  background: var(--cirth-meter-even-less-good-color);
+}
+
+meter::-moz-meter-bar {
+  background: var(--cirth-meter-optimum-color);
+}
+
+meter:-moz-meter-sub-optimum::-moz-meter-bar {
+  background: var(--cirth-meter-suboptimum-color);
+}
+
+meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
+  background: var(--cirth-meter-even-less-good-color);
+}
+
 :root, :host {
   --cirth-scrollbar-width: 0px;
 }
@@ -2327,6 +2371,8 @@ progress::-moz-progress-bar {
     var(--cirth-primary-focus);
   --cirth-group-box-shadow-focus-with-input: 0 0 0 var(--cirth-border-width-1)
     var(--cirth-form-element-border-color);
+  --cirth-meter-background-color: var(--cirth-progress-background-color);
+  --cirth-meter-border-color: var(--cirth-progress-border-color);
   --cirth-modal-overlay-backdrop-filter: blur(.375rem);
   --cirth-nav-element-spacing-vertical: var(--cirth-space-4);
   --cirth-nav-element-spacing-horizontal: var(--cirth-space-2);
@@ -2493,7 +2539,7 @@ details summary[role="button"]:not(.outline):after {
   filter: brightness(0) invert();
 }
 
-[data-theme="light"], :root:not([data-theme="dark"]), :host(:not([data-theme="dark"])) {
+:where([data-theme="light"]), :root:where(:not([data-theme="dark"])), :host(:where(:not([data-theme="dark"]))) {
   --lightningcss-light: initial;
   --lightningcss-dark: ;
   color-scheme: light;
@@ -2593,6 +2639,9 @@ details summary[role="button"]:not(.outline):after {
   --cirth-dropdown-hover-background-color: oklch(96% 0 264);
   --cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
   --cirth-modal-overlay-background-color: oklch(93.85% .003 264deg / var(--cirth-opacity-overlay));
+  --cirth-meter-optimum-color: oklch(52.7% .1 160.59);
+  --cirth-meter-suboptimum-color: oklch(48.3% .086 78);
+  --cirth-meter-even-less-good-color: oklch(44% .151 29.73);
   --cirth-progress-background-color: oklch(91.7% .006 264);
   --cirth-progress-border-color: oklch(61.3% .032 264);
   --cirth-progress-color: var(--cirth-primary-background);
@@ -2602,12 +2651,12 @@ details summary[role="button"]:not(.outline):after {
   --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(189, 47, 33)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
 }
 
-[data-theme="light"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), :root:not([data-theme="dark"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), :host(:not([data-theme="dark"])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
+:where([data-theme="light"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), :root:where(:not([data-theme="dark"])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), :host(:where(:not([data-theme="dark"]))) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
   --cirth-form-element-focus-color: var(--cirth-primary-focus);
 }
 
 @media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme]), :host(:not([data-theme])) {
+  :root:where(:not([data-theme])), :host(:where(:not([data-theme]))) {
     --lightningcss-light: ;
     --lightningcss-dark: initial;
     color-scheme: dark;
@@ -2707,6 +2756,9 @@ details summary[role="button"]:not(.outline):after {
     --cirth-dropdown-hover-background-color: oklch(26.7% .011 264);
     --cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
     --cirth-modal-overlay-background-color: oklch(9% 0 312deg / var(--cirth-opacity-overlay));
+    --cirth-meter-optimum-color: oklch(65.7% .125 160.59);
+    --cirth-meter-suboptimum-color: oklch(70% .124 78);
+    --cirth-meter-even-less-good-color: oklch(74.3% .133 29.73);
     --cirth-progress-background-color: oklch(26.7% .011 264);
     --cirth-progress-border-color: oklch(52.7% .032 264);
     --cirth-progress-color: oklch(61.3% .113 69.35);
@@ -2716,16 +2768,16 @@ details summary[role="button"]:not(.outline):after {
     --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(246, 160, 145)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
   }
 
-  :root:not([data-theme]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), :host(:not([data-theme])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
+  :root:where(:not([data-theme])) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]), :host(:where(:not([data-theme]))) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
     --cirth-form-element-focus-color: var(--cirth-primary-focus);
   }
 
-  :root:not([data-theme]) details summary[role="button"].contrast:not(.outline):after, :host(:not([data-theme])) details summary[role="button"].contrast:not(.outline):after, :root:not([data-theme]) [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before, :host(:not([data-theme])) [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before {
+  :root:where(:not([data-theme])) details summary[role="button"].contrast:not(.outline):after, :host(:where(:not([data-theme]))) details summary[role="button"].contrast:not(.outline):after, :root:where(:not([data-theme])) [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before, :host(:where(:not([data-theme]))) [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before {
     filter: brightness(0);
   }
 }
 
-[data-theme="dark"] {
+:where([data-theme="dark"]) {
   --lightningcss-light: ;
   --lightningcss-dark: initial;
   color-scheme: dark;
@@ -2825,6 +2877,9 @@ details summary[role="button"]:not(.outline):after {
   --cirth-dropdown-hover-background-color: oklch(26.7% .011 264);
   --cirth-loading-spinner-opacity: var(--cirth-opacity-disabled);
   --cirth-modal-overlay-background-color: oklch(9% 0 312deg / var(--cirth-opacity-overlay));
+  --cirth-meter-optimum-color: oklch(65.7% .125 160.59);
+  --cirth-meter-suboptimum-color: oklch(70% .124 78);
+  --cirth-meter-even-less-good-color: oklch(74.3% .133 29.73);
   --cirth-progress-background-color: oklch(26.7% .011 264);
   --cirth-progress-border-color: oklch(52.7% .032 264);
   --cirth-progress-color: oklch(61.3% .113 69.35);
@@ -2834,14 +2889,257 @@ details summary[role="button"]:not(.outline):after {
   --cirth-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(246, 160, 145)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
 }
 
-[data-theme="dark"] input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
+:where([data-theme="dark"]) input:is([type="submit"], [type="button"], [type="reset"], [type="checkbox"], [type="radio"], [type="file"]) {
   --cirth-form-element-focus-color: var(--cirth-primary-focus);
 }
 
-[data-theme="dark"] details summary[role="button"].contrast:not(.outline):after, [data-theme="dark"] [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before {
+:where([data-theme="dark"]) details summary[role="button"].contrast:not(.outline):after, :where([data-theme="dark"]) [aria-busy="true"]:not(input, select, textarea).contrast:is(button, [type="submit"], [type="button"], [type="reset"], [role="button"]):not(.outline):before {
   filter: brightness(0);
 }
 
 progress, [type="checkbox"], [type="radio"], [type="range"] {
   accent-color: var(--cirth-primary);
 }
+
+@media (prefers-contrast: more) {
+  :where([data-theme="light"]), :root:where(:not([data-theme="dark"])), :host(:where(:not([data-theme="dark"]))) {
+    --cirth-color: oklch(22.3% .006 264);
+    --cirth-h1-color: var(--cirth-color);
+    --cirth-h2-color: var(--cirth-color);
+    --cirth-h3-color: var(--cirth-color);
+    --cirth-h4-color: var(--cirth-color);
+    --cirth-h5-color: var(--cirth-color);
+    --cirth-h6-color: var(--cirth-color);
+    --cirth-muted-color: oklch(39.7% .025 264);
+    --cirth-secondary: oklch(39.7% .025 264);
+    --cirth-code-color: oklch(35.3% .021 264);
+    --cirth-link-visited-color: oklch(35.3% .021 264);
+    --cirth-muted-border-color: oklch(57% .032 264);
+    --cirth-form-element-border-color: oklch(39.7% .025 264);
+    --cirth-form-element-invalid-border-color: oklch(48.3% .166 29.73);
+    --cirth-form-element-valid-border-color: oklch(48.3% .092 160.59);
+    --cirth-primary: oklch(39.7% .073 69.35);
+    --cirth-primary-hover: oklch(31% .057 69.35);
+    --cirth-primary-underline: var(--cirth-primary);
+    --cirth-secondary-underline: var(--cirth-secondary);
+    --cirth-contrast-underline: var(--cirth-contrast);
+    --cirth-primary-focus: oklch(48.3% .089 69.35);
+    --cirth-secondary-focus: oklch(48.3% .03 264);
+    --cirth-contrast-focus: oklch(48.3% .03 264);
+    --cirth-switch-background-color: oklch(48.3% .03 264);
+    --cirth-progress-border-color: oklch(48.3% .03 264);
+    --cirth-meter-optimum-color: oklch(44% .084 160.59);
+    --cirth-meter-suboptimum-color: oklch(39.7% .07 78);
+    --cirth-meter-even-less-good-color: oklch(35.3% .122 29.73);
+    --cirth-dropdown-border-color: var(--cirth-muted-border-color);
+  }
+}
+
+@media only screen and (prefers-contrast: more) and (prefers-color-scheme: dark) {
+  :root:where(:not([data-theme])), :host(:where(:not([data-theme]))) {
+    --cirth-color: oklch(96% 0 264);
+    --cirth-h1-color: var(--cirth-color);
+    --cirth-h2-color: var(--cirth-color);
+    --cirth-h3-color: var(--cirth-color);
+    --cirth-h4-color: var(--cirth-color);
+    --cirth-h5-color: var(--cirth-color);
+    --cirth-h6-color: var(--cirth-color);
+    --cirth-muted-color: oklch(78.7% .021 264);
+    --cirth-secondary: oklch(78.7% .021 264);
+    --cirth-code-color: oklch(83% .016 264);
+    --cirth-link-visited-color: oklch(78.7% .021 264);
+    --cirth-muted-border-color: oklch(57% .032 264);
+    --cirth-card-border-color: var(--cirth-muted-border-color);
+    --cirth-form-element-border-color: oklch(70% .028 264);
+    --cirth-form-element-invalid-border-color: oklch(78.7% .106 29.73);
+    --cirth-form-element-valid-border-color: oklch(78.7% .15 160.59);
+    --cirth-primary: oklch(78.7% .146 69.35);
+    --cirth-primary-hover: oklch(87.3% .082 69.35);
+    --cirth-primary-underline: var(--cirth-primary);
+    --cirth-secondary-underline: var(--cirth-secondary);
+    --cirth-contrast-underline: var(--cirth-contrast);
+    --cirth-primary-focus: oklch(70% .129 69.35);
+    --cirth-secondary-focus: oklch(70% .028 264);
+    --cirth-contrast-focus: oklch(87.3% .011 264);
+    --cirth-switch-background-color: oklch(65.7% .03 264);
+    --cirth-progress-border-color: oklch(70% .028 264);
+    --cirth-meter-optimum-color: oklch(74.3% .142 160.59);
+    --cirth-meter-suboptimum-color: oklch(78.7% .139 78);
+    --cirth-meter-even-less-good-color: oklch(83% .081 29.73);
+    --cirth-dropdown-border-color: var(--cirth-muted-border-color);
+  }
+}
+
+@media (prefers-contrast: more) {
+  :where([data-theme="dark"]) {
+    --cirth-color: oklch(96% 0 264);
+    --cirth-h1-color: var(--cirth-color);
+    --cirth-h2-color: var(--cirth-color);
+    --cirth-h3-color: var(--cirth-color);
+    --cirth-h4-color: var(--cirth-color);
+    --cirth-h5-color: var(--cirth-color);
+    --cirth-h6-color: var(--cirth-color);
+    --cirth-muted-color: oklch(78.7% .021 264);
+    --cirth-secondary: oklch(78.7% .021 264);
+    --cirth-code-color: oklch(83% .016 264);
+    --cirth-link-visited-color: oklch(78.7% .021 264);
+    --cirth-muted-border-color: oklch(57% .032 264);
+    --cirth-card-border-color: var(--cirth-muted-border-color);
+    --cirth-form-element-border-color: oklch(70% .028 264);
+    --cirth-form-element-invalid-border-color: oklch(78.7% .106 29.73);
+    --cirth-form-element-valid-border-color: oklch(78.7% .15 160.59);
+    --cirth-primary: oklch(78.7% .146 69.35);
+    --cirth-primary-hover: oklch(87.3% .082 69.35);
+    --cirth-primary-underline: var(--cirth-primary);
+    --cirth-secondary-underline: var(--cirth-secondary);
+    --cirth-contrast-underline: var(--cirth-contrast);
+    --cirth-primary-focus: oklch(70% .129 69.35);
+    --cirth-secondary-focus: oklch(70% .028 264);
+    --cirth-contrast-focus: oklch(87.3% .011 264);
+    --cirth-switch-background-color: oklch(65.7% .03 264);
+    --cirth-progress-border-color: oklch(70% .028 264);
+    --cirth-meter-optimum-color: oklch(74.3% .142 160.59);
+    --cirth-meter-suboptimum-color: oklch(78.7% .139 78);
+    --cirth-meter-even-less-good-color: oklch(83% .081 29.73);
+    --cirth-dropdown-border-color: var(--cirth-muted-border-color);
+  }
+}
+
+@media print {
+  :root, :host {
+    --cirth-print-color: oklch(0% 0 0);
+    --cirth-print-muted-color: oklch(48.3% .03 264);
+    --cirth-print-border-color: oklch(61.3% .032 264);
+  }
+
+  html {
+    --lightningcss-light: initial;
+    --lightningcss-dark: ;
+    color-scheme: light;
+    background: none;
+  }
+
+  body {
+    color: var(--cirth-print-color);
+    --lightningcss-light: initial;
+    --lightningcss-dark: ;
+    color-scheme: light;
+    --cirth-color: var(--cirth-print-color);
+    --cirth-h1-color: var(--cirth-print-color);
+    --cirth-h2-color: var(--cirth-print-color);
+    --cirth-h3-color: var(--cirth-print-color);
+    --cirth-h4-color: var(--cirth-print-color);
+    --cirth-h5-color: var(--cirth-print-color);
+    --cirth-h6-color: var(--cirth-print-color);
+    --cirth-code-color: var(--cirth-print-color);
+    --cirth-code-kbd-color: var(--cirth-print-color);
+    --cirth-form-element-color: var(--cirth-print-color);
+    --cirth-muted-color: var(--cirth-print-muted-color);
+    --cirth-form-element-placeholder-color: var(--cirth-print-muted-color);
+    --cirth-primary: var(--cirth-print-color);
+    --cirth-primary-hover: var(--cirth-print-color);
+    --cirth-primary-underline: var(--cirth-print-color);
+    --cirth-secondary: var(--cirth-print-color);
+    --cirth-secondary-underline: var(--cirth-print-color);
+    --cirth-contrast: var(--cirth-print-color);
+    --cirth-contrast-underline: var(--cirth-print-color);
+    --cirth-link-visited-color: var(--cirth-print-color);
+    --cirth-muted-border-color: var(--cirth-print-border-color);
+    --cirth-form-element-border-color: var(--cirth-print-border-color);
+    --cirth-box-shadow: none;
+    --cirth-card-box-shadow: none;
+    --cirth-card-background-color: transparent;
+    --cirth-card-sectioning-background-color: transparent;
+    --cirth-code-background-color: transparent;
+    --cirth-code-kbd-background-color: transparent;
+    --cirth-form-element-background-color: transparent;
+    --cirth-form-element-active-background-color: transparent;
+    --cirth-table-row-stripped-background-color: transparent;
+    --cirth-modal-overlay-background-color: transparent;
+    --cirth-dropdown-background-color: transparent;
+    --cirth-dropdown-box-shadow: none;
+    --cirth-ins-color: oklch(35.3% .067 160.59);
+    --cirth-del-color: oklch(35.3% .122 29.73);
+    --cirth-meter-optimum-color: oklch(52.7% .1 160.59);
+    --cirth-meter-suboptimum-color: oklch(48.3% .086 78);
+    --cirth-meter-even-less-good-color: oklch(44% .151 29.73);
+    background: none;
+  }
+
+  kbd {
+    border: var(--cirth-border-width) solid var(--cirth-print-border-color);
+  }
+
+  :is(button, [type="submit"], [type="reset"], [type="button"], [role="button"]) {
+    border-color: var(--cirth-print-border-color);
+    box-shadow: none;
+    color: var(--cirth-print-color);
+    background: none;
+  }
+
+  [type="file"]::file-selector-button {
+    border-color: var(--cirth-print-border-color);
+    box-shadow: none;
+    color: var(--cirth-print-color);
+    background: none;
+  }
+
+  :is(mark, meter, progress, [type="checkbox"], [type="radio"]) {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+
+  a[href^="http"]:not([role="button"], nav a):after {
+    content: " (" attr(href) ")";
+    color: var(--cirth-print-muted-color);
+    font-size: var(--cirth-font-size-sm);
+    word-break: break-all;
+  }
+
+  thead {
+    display: table-header-group;
+  }
+
+  tfoot {
+    display: table-footer-group;
+  }
+
+  tr {
+    break-inside: avoid;
+  }
+
+  pre {
+    white-space: pre-wrap;
+    overflow: visible;
+  }
+
+  .overflow-auto {
+    overflow: visible;
+  }
+
+  dialog {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+    min-width: 0;
+    min-height: 0;
+    position: static;
+  }
+
+  dialog > article {
+    max-height: none;
+    overflow: visible;
+  }
+
+  :is(h1, h2, h3, h4, h5, h6) {
+    break-after: avoid;
+  }
+
+  :is(figure, img) {
+    break-inside: avoid;
+  }
+
+  :is(blockquote, li, p) {
+    orphans: 3;
+    widows: 3;
+  }
+}