elements-kit 0.20.0 → 0.22.0

package/dist/ui/styles/index.css

@@ -0,0 +1,664 @@
+:root {
+  --black-a1: #0000000d;
+  --black-a2: #0000001a;
+  --black-a3: #00000026;
+  --black-a4: #0003;
+  --black-a5: #0000004d;
+  --black-a6: #0006;
+  --black-a7: #00000080;
+  --black-a8: #0009;
+  --black-a9: #000000b3;
+  --black-a10: #000c;
+  --black-a11: #000000e6;
+  --black-a12: #000000f2;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root {
+      --black-a1: color(display-p3 0 0 0 / .05);
+      --black-a2: color(display-p3 0 0 0 / .1);
+      --black-a3: color(display-p3 0 0 0 / .15);
+      --black-a4: color(display-p3 0 0 0 / .2);
+      --black-a5: color(display-p3 0 0 0 / .3);
+      --black-a6: color(display-p3 0 0 0 / .4);
+      --black-a7: color(display-p3 0 0 0 / .5);
+      --black-a8: color(display-p3 0 0 0 / .6);
+      --black-a9: color(display-p3 0 0 0 / .7);
+      --black-a10: color(display-p3 0 0 0 / .8);
+      --black-a11: color(display-p3 0 0 0 / .9);
+      --black-a12: color(display-p3 0 0 0 / .95);
+    }
+  }
+}
+
+:root {
+  --white-a1: #ffffff0d;
+  --white-a2: #ffffff1a;
+  --white-a3: #ffffff26;
+  --white-a4: #fff3;
+  --white-a5: #ffffff4d;
+  --white-a6: #fff6;
+  --white-a7: #ffffff80;
+  --white-a8: #fff9;
+  --white-a9: #ffffffb3;
+  --white-a10: #fffc;
+  --white-a11: #ffffffe6;
+  --white-a12: #fffffff2;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root {
+      --white-a1: color(display-p3 1 1 1 / .05);
+      --white-a2: color(display-p3 1 1 1 / .1);
+      --white-a3: color(display-p3 1 1 1 / .15);
+      --white-a4: color(display-p3 1 1 1 / .2);
+      --white-a5: color(display-p3 1 1 1 / .3);
+      --white-a6: color(display-p3 1 1 1 / .4);
+      --white-a7: color(display-p3 1 1 1 / .5);
+      --white-a8: color(display-p3 1 1 1 / .6);
+      --white-a9: color(display-p3 1 1 1 / .7);
+      --white-a10: color(display-p3 1 1 1 / .8);
+      --white-a11: color(display-p3 1 1 1 / .9);
+      --white-a12: color(display-p3 1 1 1 / .95);
+    }
+  }
+}
+
+:where(:root) {
+  --color-background: white;
+  --color-overlay: var(--black-a6);
+  --color-surface: #ffffffd9;
+}
+
+:is(.dark, .dark-theme) {
+  --color-background: var(--neutral-1);
+  --color-overlay: var(--black-a8);
+  --color-surface: #00000040;
+}
+
+:where(:root) {
+  --color-transparent: #0000;
+}
+
+@supports (color: color(display-p3 1 1 1)) {
+  @media (color-gamut: p3) {
+    :root {
+      --color-transparent: color(display-p3 0 0 0 / 0);
+    }
+  }
+}
+
+:where(.light, .light-theme) {
+  --lightningcss-light: initial;
+  --lightningcss-dark: ;
+  color-scheme: light;
+}
+
+:where(.dark, .dark-theme) {
+  --lightningcss-light: ;
+  --lightningcss-dark: initial;
+  color-scheme: dark;
+}
+
+:root, [data-accent]:where(:not([data-accent=""], [data-accent="gray"])) {
+  --focus-1: var(--accent-1);
+  --focus-2: var(--accent-2);
+  --focus-3: var(--accent-3);
+  --focus-4: var(--accent-4);
+  --focus-5: var(--accent-5);
+  --focus-6: var(--accent-6);
+  --focus-7: var(--accent-7);
+  --focus-8: var(--accent-8);
+  --focus-9: var(--accent-9);
+  --focus-10: var(--accent-10);
+  --focus-11: var(--accent-11);
+  --focus-12: var(--accent-12);
+  --focus-a1: var(--accent-a1);
+  --focus-a2: var(--accent-a2);
+  --focus-a3: var(--accent-a3);
+  --focus-a4: var(--accent-a4);
+  --focus-a5: var(--accent-a5);
+  --focus-a6: var(--accent-a6);
+  --focus-a7: var(--accent-a7);
+  --focus-a8: var(--accent-a8);
+  --focus-a9: var(--accent-a9);
+  --focus-a10: var(--accent-a10);
+  --focus-a11: var(--accent-a11);
+  --focus-a12: var(--accent-a12);
+}
+
+::selection {
+  background-color: var(--focus-a5);
+}
+
+:root {
+  color: var(--neutral-12);
+}
+
+:where([data-surface="page"]) {
+  background-color: var(--color-background);
+}
+
+:where(:root) {
+  --scaling: 1;
+}
+
+:where([data-scaling="xs"]) {
+  --scaling: .9;
+}
+
+:where([data-scaling="sm"]) {
+  --scaling: .95;
+}
+
+:where([data-scaling="md"]) {
+  --scaling: 1;
+}
+
+:where([data-scaling="lg"]) {
+  --scaling: 1.05;
+}
+
+:where([data-scaling="xl"]) {
+  --scaling: 1.1;
+}
+
+:where(:root) {
+  --space-1: calc(4px * var(--scaling));
+  --space-2: calc(8px * var(--scaling));
+  --space-3: calc(12px * var(--scaling));
+  --space-4: calc(16px * var(--scaling));
+  --space-5: calc(24px * var(--scaling));
+  --space-6: calc(32px * var(--scaling));
+  --space-7: calc(40px * var(--scaling));
+  --space-8: calc(48px * var(--scaling));
+  --space-9: calc(64px * var(--scaling));
+}
+
+:where(:root), [data-radius] {
+  --radius-1: calc(3px * var(--scaling) * var(--radius-factor));
+  --radius-2: calc(4px * var(--scaling) * var(--radius-factor));
+  --radius-3: calc(6px * var(--scaling) * var(--radius-factor));
+  --radius-4: calc(8px * var(--scaling) * var(--radius-factor));
+  --radius-5: calc(12px * var(--scaling) * var(--radius-factor));
+  --radius-6: calc(16px * var(--scaling) * var(--radius-factor));
+}
+
+:where(:root), [data-radius="medium"] {
+  --radius-factor: 1;
+  --radius-pill: 0px;
+  --radius-thumb: 9999px;
+}
+
+[data-radius="none"] {
+  --radius-factor: 0;
+  --radius-pill: 0px;
+  --radius-thumb: .5px;
+}
+
+[data-radius="small"] {
+  --radius-factor: .75;
+  --radius-pill: 0px;
+  --radius-thumb: .5px;
+}
+
+[data-radius="large"] {
+  --radius-factor: 1.5;
+  --radius-pill: 0px;
+  --radius-thumb: 9999px;
+}
+
+[data-radius="pill"] {
+  --radius-factor: 1.5;
+  --radius-pill: 9999px;
+  --radius-thumb: 9999px;
+}
+
+:where(:root) {
+  --font-size-1: calc(12px * var(--scaling));
+  --font-size-2: calc(14px * var(--scaling));
+  --font-size-3: calc(16px * var(--scaling));
+  --font-size-4: calc(18px * var(--scaling));
+  --font-size-5: calc(20px * var(--scaling));
+  --font-size-6: calc(24px * var(--scaling));
+  --font-size-7: calc(28px * var(--scaling));
+  --font-size-8: calc(35px * var(--scaling));
+  --font-size-9: calc(60px * var(--scaling));
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 700;
+  --line-height-1: calc(16px * var(--scaling));
+  --line-height-2: calc(20px * var(--scaling));
+  --line-height-3: calc(24px * var(--scaling));
+  --line-height-4: calc(26px * var(--scaling));
+  --line-height-5: calc(28px * var(--scaling));
+  --line-height-6: calc(30px * var(--scaling));
+  --line-height-7: calc(36px * var(--scaling));
+  --line-height-8: calc(40px * var(--scaling));
+  --line-height-9: calc(60px * var(--scaling));
+  --letter-spacing-1: .0025em;
+  --letter-spacing-2: 0em;
+  --letter-spacing-3: 0em;
+  --letter-spacing-4: -.0025em;
+  --letter-spacing-5: -.005em;
+  --letter-spacing-6: -.00625em;
+  --letter-spacing-7: -.0075em;
+  --letter-spacing-8: -.01em;
+  --letter-spacing-9: -.025em;
+  --default-font-family: -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", system-ui,
+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  --default-font-size: var(--font-size-3);
+  --default-font-style: normal;
+  --default-font-weight: var(--font-weight-regular);
+  --default-line-height: 1.5;
+  --default-letter-spacing: 0em;
+  --default-leading-trim-start: .42em;
+  --default-leading-trim-end: .36em;
+  --heading-font-family: var(--default-font-family);
+  --heading-font-size-adjust: 1;
+  --heading-font-style: normal;
+  --heading-leading-trim-start: var(--default-leading-trim-start);
+  --heading-leading-trim-end: var(--default-leading-trim-end);
+  --heading-letter-spacing: 0em;
+  --heading-line-height-1: calc(16px * var(--scaling));
+  --heading-line-height-2: calc(18px * var(--scaling));
+  --heading-line-height-3: calc(22px * var(--scaling));
+  --heading-line-height-4: calc(24px * var(--scaling));
+  --heading-line-height-5: calc(26px * var(--scaling));
+  --heading-line-height-6: calc(30px * var(--scaling));
+  --heading-line-height-7: calc(36px * var(--scaling));
+  --heading-line-height-8: calc(40px * var(--scaling));
+  --heading-line-height-9: calc(60px * var(--scaling));
+  --code-font-family: "Menlo", "Bitstream Vera Sans Mono", monospace, "Apple Color Emoji",
+    "Segoe UI Emoji";
+  --code-font-size-adjust: .95;
+  --code-font-style: normal;
+  --code-font-weight: inherit;
+  --code-letter-spacing: -.007em;
+  --code-padding-top: .1em;
+  --code-padding-bottom: .1em;
+  --code-padding-left: .25em;
+  --code-padding-right: .25em;
+  --strong-font-family: var(--default-font-family);
+  --strong-font-size-adjust: 1;
+  --strong-font-style: inherit;
+  --strong-font-weight: var(--font-weight-bold);
+  --strong-letter-spacing: 0em;
+  --em-font-family: "Times New Roman", "Times", serif;
+  --em-font-size-adjust: 1.18;
+  --em-font-style: italic;
+  --em-font-weight: inherit;
+  --em-letter-spacing: -.025em;
+  --quote-font-family: "Times New Roman", "Times", serif;
+  --quote-font-size-adjust: 1.18;
+  --quote-font-style: italic;
+  --quote-font-weight: inherit;
+  --quote-letter-spacing: -.025em;
+  --tab-active-letter-spacing: -.01em;
+  --tab-active-word-spacing: 0em;
+  --tab-inactive-letter-spacing: 0em;
+  --tab-inactive-word-spacing: 0em;
+  overflow-wrap: break-word;
+  font-family: var(--default-font-family);
+  font-size: var(--default-font-size);
+  font-weight: var(--default-font-weight);
+  font-style: var(--default-font-style);
+  line-height: var(--default-line-height);
+  letter-spacing: var(--default-letter-spacing);
+  -moz-text-size-adjust: none;
+  text-size-adjust: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  --shadow-1: inset 0 0 0 1px var(--neutral-a5),
+    inset 0 1.5px 2px 0 var(--neutral-a2),
+    inset 0 1.5px 2px 0 var(--black-a2);
+  --shadow-2: 0 0 0 1px var(--neutral-a3),
+    0 0 0 .5px var(--black-a1),
+    0 1px 1px 0 var(--neutral-a2),
+    0 2px 1px -1px var(--black-a1),
+    0 1px 3px 0 var(--black-a1);
+  --shadow-3: 0 0 0 1px var(--neutral-a3),
+    0 2px 3px -2px var(--neutral-a3),
+    0 3px 12px -4px var(--black-a2),
+    0 4px 16px -8px var(--black-a2);
+  --shadow-4: 0 0 0 1px var(--neutral-a3),
+    0 8px 40px var(--black-a1),
+    0 12px 32px -16px var(--neutral-a3);
+  --shadow-5: 0 0 0 1px var(--neutral-a3),
+    0 12px 60px var(--black-a3),
+    0 12px 32px -16px var(--neutral-a5);
+  --shadow-6: 0 0 0 1px var(--neutral-a3),
+    0 12px 60px var(--black-a3),
+    0 16px 64px var(--neutral-a2),
+    0 16px 36px -20px var(--neutral-a7);
+}
+
+@supports (color: color-mix(in oklab, white, black)) {
+  :where(:root) {
+    --shadow-1: inset 0 0 0 1px var(--neutral-a5),
+      inset 0 1.5px 2px 0 var(--neutral-a2),
+      inset 0 1.5px 2px 0 var(--black-a2);
+    --shadow-2: 0 0 0 1px color-mix(in oklab, var(--neutral-a3), var(--neutral-3) 25%),
+      0 0 0 .5px var(--black-a1),
+      0 1px 1px 0 var(--neutral-a2),
+      0 2px 1px -1px var(--black-a1),
+      0 1px 3px 0 var(--black-a1);
+    --shadow-3: 0 0 0 1px color-mix(in oklab, var(--neutral-a3), var(--neutral-3) 25%),
+      0 2px 3px -2px var(--neutral-a3),
+      0 3px 12px -4px var(--black-a2),
+      0 4px 16px -8px var(--black-a2);
+    --shadow-4: 0 0 0 1px color-mix(in oklab, var(--neutral-a3), var(--neutral-3) 25%),
+      0 8px 40px var(--black-a1),
+      0 12px 32px -16px var(--neutral-a3);
+    --shadow-5: 0 0 0 1px color-mix(in oklab, var(--neutral-a3), var(--neutral-3) 25%),
+      0 12px 60px var(--black-a3),
+      0 12px 32px -16px var(--neutral-a5);
+    --shadow-6: 0 0 0 1px color-mix(in oklab, var(--neutral-a3), var(--neutral-3) 25%),
+      0 12px 60px var(--black-a3),
+      0 16px 64px var(--neutral-a2),
+      0 16px 36px -20px var(--neutral-a7);
+  }
+}
+
+:is(.dark, .dark-theme) {
+  --shadow-1: inset 0 -1px 1px 0 var(--neutral-a3),
+    inset 0 0 0 1px var(--neutral-a3),
+    inset 0 3px 4px 0 var(--black-a5),
+    inset 0 0 0 1px var(--neutral-a4);
+  --shadow-2: 0 0 0 1px var(--neutral-a6),
+    0 0 0 .5px var(--black-a3),
+    0 1px 1px 0 var(--black-a6),
+    0 2px 1px -1px var(--black-a6),
+    0 1px 3px 0 var(--black-a5);
+  --shadow-3: 0 0 0 1px var(--neutral-a6),
+    0 2px 3px -2px var(--black-a3),
+    0 3px 8px -2px var(--black-a6),
+    0 4px 12px -4px var(--black-a7);
+  --shadow-4: 0 0 0 1px var(--neutral-a6),
+    0 8px 40px var(--black-a3),
+    0 12px 32px -16px var(--black-a5);
+  --shadow-5: 0 0 0 1px var(--neutral-a6),
+    0 12px 60px var(--black-a5),
+    0 12px 32px -16px var(--black-a7);
+  --shadow-6: 0 0 0 1px var(--neutral-a6),
+    0 12px 60px var(--black-a4),
+    0 16px 64px var(--black-a6),
+    0 16px 36px -20px var(--black-a11);
+}
+
+@supports (color: color-mix(in oklab, white, black)) {
+  :is(.dark, .dark-theme) {
+    --shadow-1: inset 0 -1px 1px 0 var(--neutral-a3),
+      inset 0 0 0 1px var(--neutral-a3),
+      inset 0 3px 4px 0 var(--black-a5),
+      inset 0 0 0 1px var(--neutral-a4);
+    --shadow-2: 0 0 0 1px color-mix(in oklab, var(--neutral-a6), var(--neutral-6) 25%),
+      0 0 0 .5px var(--black-a3),
+      0 1px 1px 0 var(--black-a6),
+      0 2px 1px -1px var(--black-a6),
+      0 1px 3px 0 var(--black-a5);
+    --shadow-3: 0 0 0 1px color-mix(in oklab, var(--neutral-a6), var(--neutral-6) 25%),
+      0 2px 3px -2px var(--black-a3),
+      0 3px 8px -2px var(--black-a6),
+      0 4px 12px -4px var(--black-a7);
+    --shadow-4: 0 0 0 1px color-mix(in oklab, var(--neutral-a6), var(--neutral-6) 25%),
+      0 8px 40px var(--black-a3),
+      0 12px 32px -16px var(--black-a5);
+    --shadow-5: 0 0 0 1px color-mix(in oklab, var(--neutral-a6), var(--neutral-6) 25%),
+      0 12px 60px var(--black-a5),
+      0 12px 32px -16px var(--black-a7);
+    --shadow-6: 0 0 0 1px color-mix(in oklab, var(--neutral-a6), var(--neutral-6) 25%),
+      0 12px 60px var(--black-a4),
+      0 16px 64px var(--black-a6),
+      0 16px 36px -20px var(--black-a11);
+  }
+}
+
+:where(:root) {
+  --color-material-solid: white;
+  --color-material-translucent: #ffffffb3;
+}
+
+:is(.dark, .dark-theme) {
+  --color-material-solid: var(--neutral-2);
+  --color-material-translucent: var(--black-a7);
+}
+
+:where([data-material-background="solid"]) {
+  --color-material: var(--color-material-solid);
+  --backdrop-filter-material: none;
+}
+
+:where([data-material-background="translucent"]) {
+  --color-material: var(--color-material-translucent);
+  --backdrop-filter-material: blur(64px);
+}
+
+:where(:root) {
+  --cursor-button: default;
+  --cursor-checkbox: default;
+  --cursor-disabled: not-allowed;
+  --cursor-link: pointer;
+  --cursor-menu-item: default;
+  --cursor-radio: default;
+  --cursor-slider-thumb: default;
+  --cursor-slider-thumb-active: default;
+  --cursor-switch: default;
+}
+
+@layer unset {
+  .unset:where(body, blockquote, dl, dd, figure, p) {
+    margin: 0;
+  }
+
+  .unset:where(address, b, cite, code, dfn, em, i, kbd, q, samp, small, strong, var) {
+    font: unset;
+  }
+
+  .unset:where(h1, h2, h3, h4, h5, h6) {
+    font: unset;
+    margin: 0;
+  }
+
+  .unset:where(a) {
+    all: unset;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .unset:where(button, select, [type="button"], [type="image"], [type="reset"], [type="submit"], [type="checkbox"], [type="color"], [type="radio"], [type="range"]) {
+    all: unset;
+    text-indent: initial;
+    -webkit-tap-highlight-color: transparent;
+    font-style: normal;
+    font-weight: normal;
+    display: inline-block;
+  }
+
+  .unset:where(label) {
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  .unset:where(dialog, [popover]) {
+    box-sizing: border-box;
+    background: none;
+    border: 0;
+    outline: none;
+    max-width: none;
+    max-height: none;
+    margin: 0;
+    padding: 0;
+    position: fixed;
+    inset: auto;
+    overflow: visible;
+  }
+
+  .unset:where(select) {
+    text-align: start;
+    font-style: normal;
+    font-weight: normal;
+  }
+
+  .unset:where(textarea, input:not([type="button"], [type="image"], [type="reset"], [type="submit"], [type="checkbox"], [type="color"], [type="radio"], [type="range"])) {
+    all: unset;
+    text-align: start;
+    width: -webkit-fill-available;
+    width: -moz-available;
+    width: stretch;
+    text-indent: initial;
+    -webkit-tap-highlight-color: transparent;
+    cursor: text;
+    white-space: pre-wrap;
+    font-style: normal;
+    font-weight: normal;
+    display: block;
+  }
+
+  .unset:where(:focus) {
+    outline: none;
+  }
+
+  .unset::placeholder {
+    color: unset;
+    opacity: unset;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  .unset:where(table) {
+    all: unset;
+    text-indent: initial;
+    display: table;
+  }
+
+  .unset:where(caption) {
+    text-align: inherit;
+  }
+
+  .unset:where(td) {
+    padding: 0;
+  }
+
+  .unset:where(th) {
+    font-weight: unset;
+    text-align: inherit;
+    padding: 0;
+  }
+
+  .unset:where(abbr, acronym) {
+    text-decoration: none;
+  }
+
+  .unset:where(canvas, object, picture, summary) {
+    display: block;
+  }
+
+  .unset:where(del, s) {
+    -webkit-text-decoration: unset;
+    text-decoration: unset;
+  }
+
+  .unset:where(fieldset, hr) {
+    all: unset;
+    display: block;
+  }
+
+  .unset:where(legend) {
+    cursor: default;
+    border: none;
+    padding: 0;
+  }
+
+  .unset:where(li) {
+    text-align: unset;
+    display: block;
+  }
+
+  .unset:where(ol, ul) {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .unset:where(iframe) {
+    width: -webkit-fill-available;
+    width: -moz-available;
+    border: none;
+    width: stretch;
+    display: block;
+  }
+
+  .unset:where(ins, u) {
+    text-decoration: none;
+  }
+
+  .unset:where(img) {
+    max-width: 100%;
+    display: block;
+  }
+
+  .unset:where(svg) {
+    flex-shrink: 0;
+    max-width: 100%;
+    display: block;
+  }
+
+  .unset:where(mark) {
+    all: unset;
+  }
+
+  .unset:where(pre) {
+    font: unset;
+    margin: unset;
+  }
+
+  .unset:where(q):before, .unset:where(q):after {
+    content: "";
+  }
+
+  .unset:where(sub, sup) {
+    font: unset;
+    vertical-align: unset;
+  }
+
+  .unset:where(details) ::marker {
+    content: none;
+  }
+
+  .unset:where(summary)::marker {
+    content: none;
+  }
+
+  .unset:where(video) {
+    width: -webkit-fill-available;
+    width: -moz-available;
+    width: stretch;
+    display: block;
+  }
+
+  .unset:where(:any-link) {
+    cursor: var(--cursor-link);
+  }
+
+  .unset:where(button) {
+    cursor: var(--cursor-button);
+  }
+
+  .unset:where(:disabled, [data-disabled]) {
+    cursor: var(--cursor-disabled);
+  }
+
+  .unset:where(input[type="checkbox"]) {
+    cursor: var(--cursor-checkbox);
+  }
+
+  .unset:where(input[type="radio"]) {
+    cursor: var(--cursor-radio);
+  }
+
+  .unset, .unset:before, .unset:after {
+    box-sizing: border-box;
+  }
+}

package/dist/ui/styles/radius.css

@@ -1,4 +1,4 @@
-[data-radius] {
+:where(:root), [data-radius] {
   --radius-1: calc(3px * var(--scaling) * var(--radius-factor));
   --radius-2: calc(4px * var(--scaling) * var(--radius-factor));
   --radius-3: calc(6px * var(--scaling) * var(--radius-factor));
@@ -7,6 +7,12 @@
   --radius-6: calc(16px * var(--scaling) * var(--radius-factor));
 }
 
+:where(:root), [data-radius="medium"] {
+  --radius-factor: 1;
+  --radius-pill: 0px;
+  --radius-thumb: 9999px;
+}
+
 [data-radius="none"] {
   --radius-factor: 0;
   --radius-pill: 0px;
@@ -19,12 +25,6 @@
   --radius-thumb: .5px;
 }
 
-[data-radius="medium"] {
-  --radius-factor: 1;
-  --radius-pill: 0px;
-  --radius-thumb: 9999px;
-}
-
 [data-radius="large"] {
   --radius-factor: 1.5;
   --radius-pill: 0px;