@macroui/macroui 1.0.31 → 4.0.1

package/src/themes/silk.css

@@ -0,0 +1,29 @@
+color-scheme: light;
+--color-base-100: oklch(97% 0.0035 67.78);
+--color-base-200: oklch(95% 0.0081 61.42);
+--color-base-300: oklch(90% 0.0081 61.42);
+--color-base-content: oklch(40% 0.0081 61.42);
+--color-primary: oklch(23.27% 0.0249 284.3);
+--color-primary-content: oklch(94.22% 0.2505 117.44);
+--color-secondary: oklch(23.27% 0.0249 284.3);
+--color-secondary-content: oklch(73.92% 0.2135 50.94);
+--color-accent: oklch(23.27% 0.0249 284.3);
+--color-accent-content: oklch(88.92% 0.2061 189.9);
+--color-neutral: oklch(20% 0 0);
+--color-neutral-content: oklch(80% 0.0081 61.42);
+--color-info: oklch(80.39% 0.1148 241.68);
+--color-info-content: oklch(30.39% 0.1148 241.68);
+--color-success: oklch(83.92% 0.0901 136.87);
+--color-success-content: oklch(23.92% 0.0901 136.87);
+--color-warning: oklch(83.92% 0.1085 80);
+--color-warning-content: oklch(43.92% 0.1085 80);
+--color-error: oklch(75.1% 0.1814 22.37);
+--color-error-content: oklch(35.1% 0.1814 22.37);
+--radius-selector: 2rem;
+--radius-field: 0.5rem;
+--radius-box: 1rem;
+--size-selector: 0.25rem;
+--size-field: 0.25rem;
+--border: 2px;
+--depth: 1;
+--noise: 0;

package/src/themes/sunset.css

@@ -0,0 +1,29 @@
+color-scheme: dark;
+--color-base-100: oklch(22% 0.019 237.69);
+--color-base-200: oklch(20% 0.019 237.69);
+--color-base-300: oklch(18% 0.019 237.69);
+--color-base-content: oklch(77.383% 0.043 245.096);
+--color-primary: oklch(74.703% 0.158 39.947);
+--color-primary-content: oklch(14.94% 0.031 39.947);
+--color-secondary: oklch(72.537% 0.177 2.72);
+--color-secondary-content: oklch(14.507% 0.035 2.72);
+--color-accent: oklch(71.294% 0.166 299.844);
+--color-accent-content: oklch(14.258% 0.033 299.844);
+--color-neutral: oklch(26% 0.019 237.69);
+--color-neutral-content: oklch(70% 0.019 237.69);
+--color-info: oklch(85.559% 0.085 206.015);
+--color-info-content: oklch(17.111% 0.017 206.015);
+--color-success: oklch(85.56% 0.085 144.778);
+--color-success-content: oklch(17.112% 0.017 144.778);
+--color-warning: oklch(85.569% 0.084 74.427);
+--color-warning-content: oklch(17.113% 0.016 74.427);
+--color-error: oklch(85.511% 0.078 16.886);
+--color-error-content: oklch(17.102% 0.015 16.886);
+--radius-selector: 1rem;
+--radius-field: 0.5rem;
+--radius-box: 1rem;
+--size-selector: 0.25rem;
+--size-field: 0.25rem;
+--border: 1px;
+--depth: 0;
+--noise: 0;

package/src/themes/synthwave.css

@@ -0,0 +1,29 @@
+color-scheme: dark;
+--color-base-100: oklch(15% 0.09 281.288);
+--color-base-200: oklch(20% 0.09 281.288);
+--color-base-300: oklch(25% 0.09 281.288);
+--color-base-content: oklch(78% 0.115 274.713);
+--color-primary: oklch(71% 0.202 349.761);
+--color-primary-content: oklch(28% 0.109 3.907);
+--color-secondary: oklch(82% 0.111 230.318);
+--color-secondary-content: oklch(29% 0.066 243.157);
+--color-accent: oklch(75% 0.183 55.934);
+--color-accent-content: oklch(26% 0.079 36.259);
+--color-neutral: oklch(45% 0.24 277.023);
+--color-neutral-content: oklch(87% 0.065 274.039);
+--color-info: oklch(74% 0.16 232.661);
+--color-info-content: oklch(29% 0.066 243.157);
+--color-success: oklch(77% 0.152 181.912);
+--color-success-content: oklch(27% 0.046 192.524);
+--color-warning: oklch(90% 0.182 98.111);
+--color-warning-content: oklch(42% 0.095 57.708);
+--color-error: oklch(73.7% 0.121 32.639);
+--color-error-content: oklch(23.501% 0.096 290.329);
+--radius-selector: 1rem;
+--radius-field: 0.5rem;
+--radius-box: 1rem;
+--size-selector: 0.25rem;
+--size-field: 0.25rem;
+--border: 1px;
+--depth: 0;
+--noise: 0;

package/src/themes/valentine.css

@@ -0,0 +1,29 @@
+color-scheme: light;
+--color-base-100: oklch(97% 0.014 343.198);
+--color-base-200: oklch(94% 0.028 342.258);
+--color-base-300: oklch(89% 0.061 343.231);
+--color-base-content: oklch(52% 0.223 3.958);
+--color-primary: oklch(65% 0.241 354.308);
+--color-primary-content: oklch(100% 0 0);
+--color-secondary: oklch(62% 0.265 303.9);
+--color-secondary-content: oklch(97% 0.014 308.299);
+--color-accent: oklch(82% 0.111 230.318);
+--color-accent-content: oklch(39% 0.09 240.876);
+--color-neutral: oklch(40% 0.153 2.432);
+--color-neutral-content: oklch(89% 0.061 343.231);
+--color-info: oklch(86% 0.127 207.078);
+--color-info-content: oklch(44% 0.11 240.79);
+--color-success: oklch(84% 0.143 164.978);
+--color-success-content: oklch(43% 0.095 166.913);
+--color-warning: oklch(75% 0.183 55.934);
+--color-warning-content: oklch(26% 0.079 36.259);
+--color-error: oklch(63% 0.237 25.331);
+--color-error-content: oklch(97% 0.013 17.38);
+--radius-selector: 1rem;
+--radius-field: 2rem;
+--radius-box: 1rem;
+--size-selector: 0.25rem;
+--size-field: 0.25rem;
+--border: 1px;
+--depth: 0;
+--noise: 0;

package/src/themes/winter.css

@@ -0,0 +1,29 @@
+color-scheme: light;
+--color-base-100: oklch(100% 0 0);
+--color-base-200: oklch(97.466% 0.011 259.822);
+--color-base-300: oklch(93.268% 0.016 262.751);
+--color-base-content: oklch(41.886% 0.053 255.824);
+--color-primary: oklch(56.86% 0.255 257.57);
+--color-primary-content: oklch(91.372% 0.051 257.57);
+--color-secondary: oklch(42.551% 0.161 282.339);
+--color-secondary-content: oklch(88.51% 0.032 282.339);
+--color-accent: oklch(59.939% 0.191 335.171);
+--color-accent-content: oklch(11.988% 0.038 335.171);
+--color-neutral: oklch(19.616% 0.063 257.651);
+--color-neutral-content: oklch(83.923% 0.012 257.651);
+--color-info: oklch(88.127% 0.085 214.515);
+--color-info-content: oklch(17.625% 0.017 214.515);
+--color-success: oklch(80.494% 0.077 197.823);
+--color-success-content: oklch(16.098% 0.015 197.823);
+--color-warning: oklch(89.172% 0.045 71.47);
+--color-warning-content: oklch(17.834% 0.009 71.47);
+--color-error: oklch(73.092% 0.11 20.076);
+--color-error-content: oklch(14.618% 0.022 20.076);
+--radius-selector: 1rem;
+--radius-field: 0.5rem;
+--radius-box: 1rem;
+--size-selector: 0.25rem;
+--size-field: 0.25rem;
+--border: 1px;
+--depth: 0;
+--noise: 0;

package/src/themes/wireframe.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(94% 0 0);
+--color-base-content: oklch(20% 0 0);
+--color-primary: oklch(87% 0 0);
+--color-primary-content: oklch(26% 0 0);
+--color-secondary: oklch(87% 0 0);
+--color-secondary-content: oklch(26% 0 0);
+--color-accent: oklch(87% 0 0);
+--color-accent-content: oklch(26% 0 0);
+--color-neutral: oklch(87% 0 0);
+--color-neutral-content: oklch(26% 0 0);
+--color-info: oklch(44% 0.11 240.79);
+--color-info-content: oklch(90% 0.058 230.902);
+--color-success: oklch(43% 0.095 166.913);
+--color-success-content: oklch(90% 0.093 164.15);
+--color-warning: oklch(47% 0.137 46.201);
+--color-warning-content: oklch(92% 0.12 95.746);
+--color-error: oklch(44% 0.177 26.899);
+--color-error-content: oklch(88% 0.062 18.334);
+--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;

package/src/utilities/glass.css

@@ -0,0 +1,20 @@
+.glass {
+  border: none;
+  backdrop-filter: blur(var(--glass-blur, 40px));
+  background-color: #0000;
+  background-image:
+    linear-gradient(
+      135deg,
+      oklch(100% 0 0 / var(--glass-opacity, 30%)) 0%,
+      oklch(0% 0 0 / 0%) 100%
+    ),
+    linear-gradient(
+      var(--glass-reflect-degree, 100deg),
+      oklch(100% 0 0 / var(--glass-reflect-opacity, 5%)) 25%,
+      oklch(0% 0 0 / 0%) 25%
+    );
+  box-shadow:
+    0 0 0 1px oklch(100% 0 0 / var(--glass-border-opacity, 20%)) inset,
+    0 0 0 2px oklch(0% 0 0 / 5%);
+  text-shadow: 0 1px oklch(0% 0 0 / var(--glass-text-shadow-opacity, 5%));
+}

package/src/utilities/join.css

@@ -0,0 +1,207 @@
+.join {
+  @apply inline-flex items-stretch;
+  --join-ss: 0;
+  --join-se: 0;
+  --join-es: 0;
+  --join-ee: 0;
+
+  :where(.join-item) {
+    border-start-start-radius: var(--join-ss, 0);
+    border-start-end-radius: var(--join-se, 0);
+    border-end-start-radius: var(--join-es, 0);
+    border-end-end-radius: var(--join-ee, 0);
+    * {
+      --join-ss: var(--radius-field);
+      --join-se: var(--radius-field);
+      --join-es: var(--radius-field);
+      --join-ee: var(--radius-field);
+    }
+  }
+
+  > .join-item:where(:first-child) {
+    --join-ss: var(--radius-field);
+    --join-se: 0;
+    --join-es: var(--radius-field);
+    --join-ee: 0;
+  }
+
+  :first-child:not(:last-child) {
+    :where(.join-item) {
+      --join-ss: var(--radius-field);
+      --join-se: 0;
+      --join-es: var(--radius-field);
+      --join-ee: 0;
+    }
+  }
+
+  > .join-item:where(:last-child) {
+    --join-ss: 0;
+    --join-se: var(--radius-field);
+    --join-es: 0;
+    --join-ee: var(--radius-field);
+  }
+
+  :last-child:not(:first-child) {
+    :where(.join-item) {
+      --join-ss: 0;
+      --join-se: var(--radius-field);
+      --join-es: 0;
+      --join-ee: var(--radius-field);
+    }
+  }
+
+  > .join-item:where(:only-child) {
+    --join-ss: var(--radius-field);
+    --join-se: var(--radius-field);
+    --join-es: var(--radius-field);
+    --join-ee: var(--radius-field);
+  }
+
+  :only-child {
+    :where(.join-item) {
+      --join-ss: var(--radius-field);
+      --join-se: var(--radius-field);
+      --join-es: var(--radius-field);
+      --join-ee: var(--radius-field);
+    }
+  }
+
+  > :where(:focus, :has(:focus)) {
+    z-index: 1;
+  }
+
+  @media (hover: hover) {
+    > :where(.btn:hover, :has(.btn:hover)) {
+      isolation: isolate;
+    }
+  }
+}
+
+.join-item {
+  &:where(*:not(:first-child, :disabled, [disabled], .btn-disabled)) {
+    margin-inline-start: calc(var(--border, 1px) * -1);
+    margin-block-start: 0;
+  }
+
+  &:where(*:is(:disabled, [disabled], .btn-disabled)) {
+    border-width: var(--border, 1px) 0 var(--border, 1px) var(--border, 1px);
+  }
+}
+
+.join-vertical {
+  @apply flex-col;
+
+  > .join-item:first-child {
+    --join-ss: var(--radius-field);
+    --join-se: var(--radius-field);
+    --join-es: 0;
+    --join-ee: 0;
+  }
+
+  :first-child:not(:last-child) {
+    .join-item {
+      --join-ss: var(--radius-field);
+      --join-se: var(--radius-field);
+      --join-es: 0;
+      --join-ee: 0;
+    }
+  }
+
+  > .join-item:last-child {
+    --join-ss: 0;
+    --join-se: 0;
+    --join-es: var(--radius-field);
+    --join-ee: var(--radius-field);
+  }
+
+  :last-child:not(:first-child) {
+    .join-item {
+      --join-ss: 0;
+      --join-se: 0;
+      --join-es: var(--radius-field);
+      --join-ee: var(--radius-field);
+    }
+  }
+
+  > .join-item:only-child {
+    --join-ss: var(--radius-field);
+    --join-se: var(--radius-field);
+    --join-es: var(--radius-field);
+    --join-ee: var(--radius-field);
+  }
+
+  :only-child {
+    .join-item {
+      --join-ss: var(--radius-field);
+      --join-se: var(--radius-field);
+      --join-es: var(--radius-field);
+      --join-ee: var(--radius-field);
+    }
+  }
+
+  .join-item {
+    &:where(*:not(:first-child)) {
+      margin-inline-start: 0;
+      margin-block-start: calc(var(--border, 1px) * -1);
+    }
+  }
+}
+
+.join-horizontal {
+  @apply flex-row;
+
+  > .join-item:first-child {
+    --join-ss: var(--radius-field);
+    --join-se: 0;
+    --join-es: var(--radius-field);
+    --join-ee: 0;
+  }
+
+  :first-child:not(:last-child) {
+    .join-item {
+      --join-ss: var(--radius-field);
+      --join-se: 0;
+      --join-es: var(--radius-field);
+      --join-ee: 0;
+    }
+  }
+
+  > .join-item:last-child {
+    --join-ss: 0;
+    --join-se: var(--radius-field);
+    --join-es: 0;
+    --join-ee: var(--radius-field);
+  }
+
+  :last-child:not(:first-child) {
+    .join-item {
+      --join-ss: 0;
+      --join-se: var(--radius-field);
+      --join-es: 0;
+      --join-ee: var(--radius-field);
+    }
+  }
+
+  > .join-item:only-child {
+    --join-ss: var(--radius-field);
+    --join-se: var(--radius-field);
+    --join-es: var(--radius-field);
+    --join-ee: var(--radius-field);
+  }
+
+  :only-child {
+    .join-item {
+      --join-ss: var(--radius-field);
+      --join-se: var(--radius-field);
+      --join-es: var(--radius-field);
+      --join-ee: var(--radius-field);
+    }
+  }
+
+  .join-item {
+    &:where(*:not(:first-child)) {
+      margin-inline-start: calc(var(--border, 1px) * -1);
+      margin-block-start: 0;
+    }
+  }
+}

package/src/utilities/radius.css

@@ -0,0 +1,119 @@
+.rounded-box {
+  border-radius: var(--radius-box);
+}
+
+.rounded-field {
+  border-radius: var(--radius-field);
+}
+
+.rounded-selector {
+  border-radius: var(--radius-selector);
+}
+
+.rounded-t-box {
+  border-top-left-radius: var(--radius-box);
+  border-top-right-radius: var(--radius-box);
+}
+
+.rounded-b-box {
+  border-bottom-left-radius: var(--radius-box);
+  border-bottom-right-radius: var(--radius-box);
+}
+
+.rounded-l-box {
+  border-top-left-radius: var(--radius-box);
+  border-bottom-left-radius: var(--radius-box);
+}
+
+.rounded-r-box {
+  border-top-right-radius: var(--radius-box);
+  border-bottom-right-radius: var(--radius-box);
+}
+
+.rounded-tl-box {
+  border-top-left-radius: var(--radius-box);
+}
+
+.rounded-tr-box {
+  border-top-right-radius: var(--radius-box);
+}
+
+.rounded-br-box {
+  border-bottom-right-radius: var(--radius-box);
+}
+
+.rounded-bl-box {
+  border-bottom-left-radius: var(--radius-box);
+}
+
+.rounded-t-field {
+  border-top-left-radius: var(--radius-field);
+  border-top-right-radius: var(--radius-field);
+}
+
+.rounded-b-field {
+  border-bottom-left-radius: var(--radius-field);
+  border-bottom-right-radius: var(--radius-field);
+}
+
+.rounded-l-field {
+  border-top-left-radius: var(--radius-field);
+  border-bottom-left-radius: var(--radius-field);
+}
+
+.rounded-r-field {
+  border-top-right-radius: var(--radius-field);
+  border-bottom-right-radius: var(--radius-field);
+}
+
+.rounded-tl-field {
+  border-top-left-radius: var(--radius-field);
+}
+
+.rounded-tr-field {
+  border-top-right-radius: var(--radius-field);
+}
+
+.rounded-br-field {
+  border-bottom-right-radius: var(--radius-field);
+}
+
+.rounded-bl-field {
+  border-bottom-left-radius: var(--radius-field);
+}
+
+.rounded-t-selector {
+  border-top-left-radius: var(--radius-selector);
+  border-top-right-radius: var(--radius-selector);
+}
+
+.rounded-b-selector {
+  border-bottom-left-radius: var(--radius-selector);
+  border-bottom-right-radius: var(--radius-selector);
+}
+
+.rounded-l-selector {
+  border-top-left-radius: var(--radius-selector);
+  border-bottom-left-radius: var(--radius-selector);
+}
+
+.rounded-r-selector {
+  border-top-right-radius: var(--radius-selector);
+  border-bottom-right-radius: var(--radius-selector);
+}
+
+.rounded-tl-selector {
+  border-top-left-radius: var(--radius-selector);
+}
+
+.rounded-tr-selector {
+  border-top-right-radius: var(--radius-selector);
+}
+
+.rounded-br-selector {
+  border-bottom-right-radius: var(--radius-selector);
+}
+
+.rounded-bl-selector {
+  border-bottom-left-radius: var(--radius-selector);
+}

package/src/utilities/typography.css

@@ -0,0 +1,31 @@
+:root .prose {
+  --tw-prose-body: color-mix(in oklab, var(--color-base-content) 80%, #0000);
+  --tw-prose-headings: var(--color-base-content);
+  --tw-prose-lead: var(--color-base-content);
+  --tw-prose-links: var(--color-base-content);
+  --tw-prose-bold: var(--color-base-content);
+  --tw-prose-counters: var(--color-base-content);
+  --tw-prose-bullets: color-mix(in oklab, var(--color-base-content) 50%, #0000);
+  --tw-prose-hr: color-mix(in oklab, var(--color-base-content) 20%, #0000);
+  --tw-prose-quotes: var(--color-base-content);
+  --tw-prose-quote-borders: color-mix(in oklab, var(--color-base-content) 20%, #0000);
+  --tw-prose-captions: color-mix(in oklab, var(--color-base-content) 50%, #0000);
+  --tw-prose-code: var(--color-base-content);
+  --tw-prose-pre-code: var(--color-neutral-content);
+  --tw-prose-pre-bg: var(--color-neutral);
+  --tw-prose-th-borders: color-mix(in oklab, var(--color-base-content) 50%, #0000);
+  --tw-prose-td-borders: color-mix(in oklab, var(--color-base-content) 20%, #0000);
+  --tw-prose-kbd: color-mix(in oklab, var(--color-base-content) 80%, #0000);
+  :where(code):not(pre > code) {
+    background-color: var(--color-base-200);
+    border-radius: var(--radius-selector);
+    border: var(--border) solid var(--color-base-300);
+    padding-inline: 0.5em;
+    padding-block: 0.2em;
+    font-weight: inherit;
+    &:before,
+    &:after {
+      display: none;
+    }
+  }
+}