@macroui/macroui 4.0.0 → 4.0.2

package/src/components/toggle.css

@@ -0,0 +1,239 @@
+.toggle {
+  @layer daisyui.l1.l2.l3 {
+    border: var(--border) solid currentColor;
+    color: var(--input-color);
+    @apply relative inline-grid shrink-0 cursor-pointer appearance-none place-content-center align-middle select-none;
+    grid-template-columns: 0fr 1fr 1fr;
+    /* --radius-selector-max is a separate variable because ~ calc(min(calc(--var))) ~ gives build error in PostCSS+Nuxt */
+    --radius-selector-max: calc(
+      var(--radius-selector) + var(--radius-selector) + var(--radius-selector)
+    );
+    border-radius: calc(
+      var(--radius-selector) + min(var(--toggle-p), var(--radius-selector-max)) +
+        min(var(--border), var(--radius-selector-max))
+    );
+
+    padding: var(--toggle-p);
+    box-shadow: 0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000) inset;
+    transition:
+      color 0.3s,
+      grid-template-columns 0.2s;
+    --input-color: color-mix(in oklab, var(--color-base-content) 50%, #0000);
+    --toggle-p: calc(var(--size) * 0.125);
+    --size: calc(var(--size-selector, 0.25rem) * 6);
+    width: calc((var(--size) * 2) - (var(--border) + var(--toggle-p)) * 2);
+    height: var(--size);
+
+    /* icons in toggle */
+    > * {
+      @apply z-1 col-span-1 col-start-2 row-start-1 h-full cursor-pointer appearance-none bg-transparent p-0.5;
+      transition:
+        opacity 0.2s,
+        rotate 0.4s;
+      border: none;
+      &:focus {
+        @apply outline-hidden;
+      }
+      &:nth-child(2) {
+        @apply text-base-100;
+        rotate: 0deg;
+      }
+      &:nth-child(3) {
+        @apply text-base-100 opacity-0;
+        rotate: -15deg;
+      }
+    }
+    &:has(:checked) {
+      > :nth-child(2) {
+        @apply opacity-0;
+        rotate: 15deg;
+      }
+      > :nth-child(3) {
+        @apply opacity-100;
+        rotate: 0deg;
+      }
+    }
+    &:before {
+      @apply rounded-selector relative start-0 col-start-2 row-start-1 aspect-square h-full w-full bg-current;
+      translate: 0;
+      --tw-content: "";
+      content: var(--tw-content);
+      transition:
+        background-color 0.1s,
+        translate 0.2s,
+        inset-inline-start 0.2s;
+      box-shadow:
+        0 -1px oklch(0% 0 0 / calc(var(--depth) * 0.1)) inset,
+        0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset,
+        0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000);
+      background-size: auto, calc(var(--noise) * 100%);
+      background-image: none, var(--fx-noise);
+    }
+    @media (forced-colors: active) {
+      &:before {
+        @apply outline -outline-offset-1;
+      }
+    }
+    @media print {
+      &:before {
+        outline: 0.25rem solid;
+        outline-offset: -1rem;
+      }
+    }
+
+    &:focus-visible,
+    &:has(:focus-visible) {
+      outline: 2px solid currentColor;
+      outline-offset: 2px;
+    }
+
+    &:checked,
+    &[aria-checked="true"],
+    &:has(> input:checked) {
+      grid-template-columns: 1fr 1fr 0fr;
+      @apply bg-base-100;
+      --input-color: var(--color-base-content);
+
+      &:before {
+        @apply bg-current;
+      }
+      @starting-style {
+        &:before {
+          opacity: 0;
+        }
+      }
+    }
+
+    &:indeterminate {
+      grid-template-columns: 0.5fr 1fr 0.5fr;
+    }
+
+    &:disabled {
+      @apply cursor-not-allowed opacity-30;
+
+      &:before {
+        @apply bg-transparent;
+        border: var(--border) solid currentColor;
+      }
+    }
+  }
+}
+
+.toggle-primary {
+  @layer daisyui.l1.l2 {
+    &:checked,
+    &[aria-checked="true"] {
+      --input-color: var(--color-primary);
+    }
+  }
+}
+
+.toggle-secondary {
+  @layer daisyui.l1.l2 {
+    &:checked,
+    &[aria-checked="true"] {
+      --input-color: var(--color-secondary);
+    }
+  }
+}
+
+.toggle-accent {
+  @layer daisyui.l1.l2 {
+    &:checked,
+    &[aria-checked="true"] {
+      --input-color: var(--color-accent);
+    }
+  }
+}
+
+.toggle-neutral {
+  @layer daisyui.l1.l2 {
+    &:checked,
+    &[aria-checked="true"] {
+      --input-color: var(--color-neutral);
+    }
+  }
+}
+
+.toggle-success {
+  @layer daisyui.l1.l2 {
+    &:checked,
+    &[aria-checked="true"] {
+      --input-color: var(--color-success);
+    }
+  }
+}
+
+.toggle-warning {
+  @layer daisyui.l1.l2 {
+    &:checked,
+    &[aria-checked="true"] {
+      --input-color: var(--color-warning);
+    }
+  }
+}
+
+.toggle-info {
+  @layer daisyui.l1.l2 {
+    &:checked,
+    &[aria-checked="true"] {
+      --input-color: var(--color-info);
+    }
+  }
+}
+
+.toggle-error {
+  @layer daisyui.l1.l2 {
+    &:checked,
+    &[aria-checked="true"] {
+      --input-color: var(--color-error);
+    }
+  }
+}
+
+/* responsive */
+
+.toggle-xs {
+  @layer daisyui.l1.l2 {
+    &:is([type="checkbox"]),
+    &:has([type="checkbox"]) {
+      --size: calc(var(--size-selector, 0.25rem) * 4);
+    }
+  }
+}
+
+.toggle-sm {
+  @layer daisyui.l1.l2 {
+    &:is([type="checkbox"]),
+    &:has([type="checkbox"]) {
+      --size: calc(var(--size-selector, 0.25rem) * 5);
+    }
+  }
+}
+
+.toggle-md {
+  @layer daisyui.l1.l2 {
+    &:is([type="checkbox"]),
+    &:has([type="checkbox"]) {
+      --size: calc(var(--size-selector, 0.25rem) * 6);
+    }
+  }
+}
+
+.toggle-lg {
+  @layer daisyui.l1.l2 {
+    &:is([type="checkbox"]),
+    &:has([type="checkbox"]) {
+      --size: calc(var(--size-selector, 0.25rem) * 7);
+    }
+  }
+}
+
+.toggle-xl {
+  @layer daisyui.l1.l2 {
+    &:is([type="checkbox"]),
+    &:has([type="checkbox"]) {
+      --size: calc(var(--size-selector, 0.25rem) * 8);
+    }
+  }
+}

package/src/components/tooltip.css

@@ -0,0 +1,203 @@
+.tooltip {
+  @layer daisyui.l1.l2.l3 {
+    @apply relative inline-block;
+    --tt-bg: var(--color-neutral);
+    --tt-off: calc(100% + 0.5rem);
+    --tt-tail: calc(100% + 1px + 0.25rem);
+
+    & > .tooltip-content,
+    &[data-tip]:before {
+      @apply text-neutral-content rounded-field absolute max-w-[20rem] px-2 py-1 text-center whitespace-normal opacity-0;
+      font-size: 0.875rem;
+      line-height: 1.25;
+      background-color: var(--tt-bg);
+      width: max-content;
+      pointer-events: none;
+      z-index: 2;
+      --tw-content: attr(data-tip);
+      content: var(--tw-content);
+    }
+
+    &:after {
+      @apply absolute opacity-0;
+      background-color: var(--tt-bg);
+      content: "";
+      pointer-events: none;
+      width: 0.625rem;
+      height: 0.25rem;
+      display: block;
+      position: absolute;
+      mask-repeat: no-repeat;
+      mask-position: -1px 0;
+      --mask-tooltip: url("data:image/svg+xml,%3Csvg width='10' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.500009 1C3.5 1 3.00001 4 5.00001 4C7 4 6.5 1 9.5 1C10 1 10 0.499897 10 0H0C-1.99338e-08 0.5 0 1 0.500009 1Z' fill='black'/%3E%3C/svg%3E%0A");
+      mask-image: var(--mask-tooltip);
+    }
+
+    @media (prefers-reduced-motion: no-preference) {
+      & > .tooltip-content,
+      &[data-tip]:before,
+      &:after {
+        transition:
+          opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms,
+          transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 75ms;
+      }
+    }
+
+    &:is([data-tip]:not([data-tip=""]), :has(.tooltip-content:not(:empty))) {
+      &.tooltip-open,
+      &:hover,
+      &:has(:focus-visible) {
+        & > .tooltip-content,
+        &[data-tip]:before,
+        &:after {
+          @apply opacity-100;
+          --tt-pos: 0rem;
+
+          @media (prefers-reduced-motion: no-preference) {
+            transition:
+              opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s,
+              transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s;
+          }
+        }
+      }
+    }
+  }
+}
+
+.tooltip,
+.tooltip-top {
+  @layer daisyui.l1.l2 {
+    > .tooltip-content,
+    &[data-tip]:before {
+      transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
+      inset: auto auto var(--tt-off) 50%;
+    }
+
+    &:after {
+      transform: translateX(-50%) translateY(var(--tt-pos, 0.25rem));
+      inset: auto auto var(--tt-tail) 50%;
+    }
+  }
+}
+
+.tooltip-bottom {
+  @layer daisyui.l1.l2 {
+    > .tooltip-content,
+    &[data-tip]:before {
+      transform: translateX(-50%) translateY(var(--tt-pos, -0.25rem));
+      inset: var(--tt-off) auto auto 50%;
+    }
+
+    &:after {
+      transform: translateX(-50%) translateY(var(--tt-pos, -0.25rem)) rotate(180deg);
+      inset: var(--tt-tail) auto auto 50%;
+    }
+  }
+}
+
+.tooltip-left {
+  @layer daisyui.l1.l2 {
+    > .tooltip-content,
+    &[data-tip]:before {
+      transform: translateX(calc(var(--tt-pos, 0.25rem) - 0.25rem)) translateY(-50%);
+      inset: 50% var(--tt-off) auto auto;
+    }
+
+    &:after {
+      transform: translateX(var(--tt-pos, 0.25rem)) translateY(-50%) rotate(-90deg);
+      inset: 50% calc(var(--tt-tail) + 1px) auto auto;
+    }
+  }
+}
+
+.tooltip-right {
+  @layer daisyui.l1.l2 {
+    > .tooltip-content,
+    &[data-tip]:before {
+      transform: translateX(calc(var(--tt-pos, -0.25rem) + 0.25rem)) translateY(-50%);
+      inset: 50% auto auto var(--tt-off);
+    }
+
+    &:after {
+      transform: translateX(var(--tt-pos, -0.25rem)) translateY(-50%) rotate(90deg);
+      inset: 50% auto auto calc(var(--tt-tail) + 1px);
+    }
+  }
+}
+
+.tooltip-primary {
+  @layer daisyui.l1.l2 {
+    --tt-bg: var(--color-primary);
+
+    > .tooltip-content,
+    &[data-tip]:before {
+      @apply text-primary-content;
+    }
+  }
+}
+
+.tooltip-secondary {
+  @layer daisyui.l1.l2 {
+    --tt-bg: var(--color-secondary);
+
+    > .tooltip-content,
+    &[data-tip]:before {
+      @apply text-secondary-content;
+    }
+  }
+}
+
+.tooltip-accent {
+  @layer daisyui.l1.l2 {
+    --tt-bg: var(--color-accent);
+
+    > .tooltip-content,
+    &[data-tip]:before {
+      @apply text-accent-content;
+    }
+  }
+}
+
+.tooltip-info {
+  @layer daisyui.l1.l2 {
+    --tt-bg: var(--color-info);
+
+    > .tooltip-content,
+    &[data-tip]:before {
+      @apply text-info-content;
+    }
+  }
+}
+
+.tooltip-success {
+  @layer daisyui.l1.l2 {
+    --tt-bg: var(--color-success);
+
+    > .tooltip-content,
+    &[data-tip]:before {
+      @apply text-success-content;
+    }
+  }
+}
+
+.tooltip-warning {
+  @layer daisyui.l1.l2 {
+    --tt-bg: var(--color-warning);
+
+    > .tooltip-content,
+    &[data-tip]:before {
+      @apply text-warning-content;
+    }
+  }
+}
+
+.tooltip-error {
+  @layer daisyui.l1.l2 {
+    --tt-bg: var(--color-error);
+
+    > .tooltip-content,
+    &[data-tip]:before {
+      @apply text-error-content;
+    }
+  }
+}

package/src/components/validator.css

@@ -0,0 +1,47 @@
+.validator {
+  @layer daisyui.l1.l2.l3 {
+    &:user-valid,
+    &:has(:user-valid) {
+      &,
+      &:focus,
+      &:checked,
+      &[aria-checked="true"],
+      &:focus-within {
+        --input-color: var(--color-success);
+      }
+    }
+    &:user-invalid,
+    &:has(:user-invalid),
+    &[aria-invalid]:not([aria-invalid="false"]),
+    &:has([aria-invalid]:not([aria-invalid="false"])) {
+      &,
+      &:focus,
+      &:checked,
+      &[aria-checked="true"],
+      &:focus-within {
+        --input-color: var(--color-error);
+      }
+      & ~ .validator-hint {
+        @apply text-error visible;
+      }
+    }
+  }
+}
+.validator-hint {
+  @layer daisyui.l1.l2.l3 {
+    @apply invisible mt-2;
+    font-size: 0.75rem;
+  }
+}
+
+/* This stays in utilities layer so it unhides hidden validator-hints */
+.validator {
+  &:user-invalid,
+  &:has(:user-invalid),
+  &[aria-invalid]:not([aria-invalid="false"]),
+  &:has([aria-invalid]:not([aria-invalid="false"])) {
+    & ~ .validator-hint {
+      display: revert-layer;
+    }
+  }
+}

package/src/themes/abyss.css

@@ -0,0 +1,29 @@
+color-scheme: dark;
+--color-base-100: oklch(20% 0.08 209);
+--color-base-200: oklch(15% 0.08 209);
+--color-base-300: oklch(10% 0.08 209);
+--color-base-content: oklch(90% 0.076 70.697);
+--color-primary: oklch(92% 0.2653 125);
+--color-primary-content: oklch(50% 0.2653 125);
+--color-secondary: oklch(83.27% 0.0764 298.3);
+--color-secondary-content: oklch(43.27% 0.0764 298.3);
+--color-accent: oklch(43% 0 0);
+--color-accent-content: oklch(98% 0 0);
+--color-neutral: oklch(30% 0.08 209);
+--color-neutral-content: oklch(90% 0.076 70.697);
+--color-info: oklch(74% 0.16 232.661);
+--color-info-content: oklch(29% 0.066 243.157);
+--color-success: oklch(79% 0.209 151.711);
+--color-success-content: oklch(26% 0.065 152.934);
+--color-warning: oklch(84.8% 0.1962 84.62);
+--color-warning-content: oklch(44.8% 0.1962 84.62);
+--color-error: oklch(65% 0.1985 24.22);
+--color-error-content: oklch(27% 0.1985 24.22);
+--radius-selector: 2rem;
+--radius-field: 0.25rem;
+--radius-box: 0.5rem;
+--size-selector: 0.25rem;
+--size-field: 0.25rem;
+--border: 1px;
+--depth: 1;
+--noise: 0;

package/src/themes/acid.css

@@ -0,0 +1,29 @@
+color-scheme: light;
+--color-base-100: oklch(98% 0 0);
+--color-base-200: oklch(95% 0 0);
+--color-base-300: oklch(91% 0 0);
+--color-base-content: oklch(0% 0 0);
+--color-primary: oklch(71.9% 0.357 330.759);
+--color-primary-content: oklch(14.38% 0.071 330.759);
+--color-secondary: oklch(73.37% 0.224 48.25);
+--color-secondary-content: oklch(14.674% 0.044 48.25);
+--color-accent: oklch(92.78% 0.264 122.962);
+--color-accent-content: oklch(18.556% 0.052 122.962);
+--color-neutral: oklch(21.31% 0.128 278.68);
+--color-neutral-content: oklch(84.262% 0.025 278.68);
+--color-info: oklch(60.72% 0.227 252.05);
+--color-info-content: oklch(12.144% 0.045 252.05);
+--color-success: oklch(85.72% 0.266 158.53);
+--color-success-content: oklch(17.144% 0.053 158.53);
+--color-warning: oklch(91.01% 0.212 100.5);
+--color-warning-content: oklch(18.202% 0.042 100.5);
+--color-error: oklch(64.84% 0.293 29.349);
+--color-error-content: oklch(12.968% 0.058 29.349);
+--radius-selector: 1rem;
+--radius-field: 1rem;
+--radius-box: 1rem;
+--size-selector: 0.25rem;
+--size-field: 0.25rem;
+--border: 1px;
+--depth: 1;
+--noise: 0;

package/src/themes/aqua.css

@@ -0,0 +1,29 @@
+color-scheme: dark;
+--color-base-100: oklch(37% 0.146 265.522);
+--color-base-200: oklch(28% 0.091 267.935);
+--color-base-300: oklch(22% 0.091 267.935);
+--color-base-content: oklch(90% 0.058 230.902);
+--color-primary: oklch(85.661% 0.144 198.645);
+--color-primary-content: oklch(40.124% 0.068 197.603);
+--color-secondary: oklch(60.682% 0.108 309.782);
+--color-secondary-content: oklch(96% 0.016 293.756);
+--color-accent: oklch(93.426% 0.102 94.555);
+--color-accent-content: oklch(18.685% 0.02 94.555);
+--color-neutral: oklch(27% 0.146 265.522);
+--color-neutral-content: oklch(80% 0.146 265.522);
+--color-info: oklch(54.615% 0.215 262.88);
+--color-info-content: oklch(90.923% 0.043 262.88);
+--color-success: oklch(62.705% 0.169 149.213);
+--color-success-content: oklch(12.541% 0.033 149.213);
+--color-warning: oklch(66.584% 0.157 58.318);
+--color-warning-content: oklch(27% 0.077 45.635);
+--color-error: oklch(73.95% 0.19 27.33);
+--color-error-content: oklch(14.79% 0.038 27.33);
+--radius-selector: 1rem;
+--radius-field: 0.5rem;
+--radius-box: 1rem;
+--size-selector: 0.25rem;
+--size-field: 0.25rem;
+--border: 1px;
+--depth: 1;
+--noise: 0;

package/src/themes/autumn.css

@@ -0,0 +1,29 @@
+color-scheme: light;
+--color-base-100: oklch(95.814% 0 0);
+--color-base-200: oklch(89.107% 0 0);
+--color-base-300: oklch(82.4% 0 0);
+--color-base-content: oklch(19.162% 0 0);
+--color-primary: oklch(40.723% 0.161 17.53);
+--color-primary-content: oklch(88.144% 0.032 17.53);
+--color-secondary: oklch(61.676% 0.169 23.865);
+--color-secondary-content: oklch(12.335% 0.033 23.865);
+--color-accent: oklch(73.425% 0.094 60.729);
+--color-accent-content: oklch(14.685% 0.018 60.729);
+--color-neutral: oklch(54.367% 0.037 51.902);
+--color-neutral-content: oklch(90.873% 0.007 51.902);
+--color-info: oklch(69.224% 0.097 207.284);
+--color-info-content: oklch(13.844% 0.019 207.284);
+--color-success: oklch(60.995% 0.08 174.616);
+--color-success-content: oklch(12.199% 0.016 174.616);
+--color-warning: oklch(70.081% 0.164 56.844);
+--color-warning-content: oklch(14.016% 0.032 56.844);
+--color-error: oklch(53.07% 0.241 24.16);
+--color-error-content: oklch(90.614% 0.048 24.16);
+--radius-selector: 1rem;
+--radius-field: 0.5rem;
+--radius-box: 1rem;
+--size-selector: 0.25rem;
+--size-field: 0.25rem;
+--border: 1px;
+--depth: 1;
+--noise: 0;

package/src/themes/black.css

@@ -0,0 +1,29 @@
+color-scheme: dark;
+--color-base-100: oklch(0% 0 0);
+--color-base-200: oklch(19% 0 0);
+--color-base-300: oklch(22% 0 0);
+--color-base-content: oklch(87.609% 0 0);
+--color-primary: oklch(35% 0 0);
+--color-primary-content: oklch(100% 0 0);
+--color-secondary: oklch(35% 0 0);
+--color-secondary-content: oklch(100% 0 0);
+--color-accent: oklch(35% 0 0);
+--color-accent-content: oklch(100% 0 0);
+--color-neutral: oklch(35% 0 0);
+--color-neutral-content: oklch(100% 0 0);
+--color-info: oklch(45.201% 0.313 264.052);
+--color-info-content: oklch(89.04% 0.062 264.052);
+--color-success: oklch(51.975% 0.176 142.495);
+--color-success-content: oklch(90.395% 0.035 142.495);
+--color-warning: oklch(96.798% 0.211 109.769);
+--color-warning-content: oklch(19.359% 0.042 109.769);
+--color-error: oklch(62.795% 0.257 29.233);
+--color-error-content: oklch(12.559% 0.051 29.233);
+--radius-selector: 0rem;
+--radius-field: 0rem;
+--radius-box: 0rem;
+--size-selector: 0.25rem;
+--size-field: 0.25rem;
+--border: 1px;
+--depth: 0;
+--noise: 0;

package/src/themes/bumblebee.css

@@ -0,0 +1,29 @@
+color-scheme: light;
+--color-base-100: oklch(100% 0 0);
+--color-base-200: oklch(97% 0 0);
+--color-base-300: oklch(92% 0 0);
+--color-base-content: oklch(20% 0 0);
+--color-primary: oklch(85% 0.199 91.936);
+--color-primary-content: oklch(42% 0.095 57.708);
+--color-secondary: oklch(75% 0.183 55.934);
+--color-secondary-content: oklch(40% 0.123 38.172);
+--color-accent: oklch(0% 0 0);
+--color-accent-content: oklch(100% 0 0);
+--color-neutral: oklch(37% 0.01 67.558);
+--color-neutral-content: oklch(92% 0.003 48.717);
+--color-info: oklch(74% 0.16 232.661);
+--color-info-content: oklch(39% 0.09 240.876);
+--color-success: oklch(76% 0.177 163.223);
+--color-success-content: oklch(37% 0.077 168.94);
+--color-warning: oklch(82% 0.189 84.429);
+--color-warning-content: oklch(41% 0.112 45.904);
+--color-error: oklch(70% 0.191 22.216);
+--color-error-content: oklch(39% 0.141 25.723);
+--radius-selector: 1rem;
+--radius-field: 0.5rem;
+--radius-box: 1rem;
+--size-selector: 0.25rem;
+--size-field: 0.25rem;
+--border: 1px;
+--depth: 1;
+--noise: 0;

package/src/themes/business.css

@@ -0,0 +1,29 @@
+color-scheme: dark;
+--color-base-100: oklch(24.353% 0 0);
+--color-base-200: oklch(22.648% 0 0);
+--color-base-300: oklch(20.944% 0 0);
+--color-base-content: oklch(84.87% 0 0);
+--color-primary: oklch(41.703% 0.099 251.473);
+--color-primary-content: oklch(88.34% 0.019 251.473);
+--color-secondary: oklch(64.092% 0.027 229.389);
+--color-secondary-content: oklch(12.818% 0.005 229.389);
+--color-accent: oklch(67.271% 0.167 35.791);
+--color-accent-content: oklch(13.454% 0.033 35.791);
+--color-neutral: oklch(27.441% 0.013 253.041);
+--color-neutral-content: oklch(85.488% 0.002 253.041);
+--color-info: oklch(62.616% 0.143 240.033);
+--color-info-content: oklch(12.523% 0.028 240.033);
+--color-success: oklch(70.226% 0.094 156.596);
+--color-success-content: oklch(14.045% 0.018 156.596);
+--color-warning: oklch(77.482% 0.115 81.519);
+--color-warning-content: oklch(15.496% 0.023 81.519);
+--color-error: oklch(51.61% 0.146 29.674);
+--color-error-content: oklch(90.322% 0.029 29.674);
+--radius-selector: 0rem;
+--radius-field: 0.25rem;
+--radius-box: 0.25rem;
+--size-selector: 0.25rem;
+--size-field: 0.25rem;
+--border: 1px;
+--depth: 0;
+--noise: 0;