untitledui 0.1.1

package/templates/default/src/styles/globals.css

@@ -0,0 +1,86 @@
+@import "tailwindcss";
+
+@plugin "@tailwindcss/typography";
+@plugin "tailwindcss-react-aria-components";
+@plugin "tailwindcss-animate";
+@plugin "@designbycode/tailwindcss-mask-image";
+
+@import "./theme.css";
+@import "./text-styles.css";
+@import "./typography.css";
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+    *,
+    ::after,
+    ::before,
+    ::backdrop,
+    ::file-selector-button {
+        border-color: var(--color-gray-200, currentColor);
+    }
+}
+
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+@custom-variant label (& [data-label]);
+@custom-variant focus-input-within (&:has(input:focus));
+
+@utility scrollbar-hide {
+    /* For Webkit-based browsers (Chrome, Safari and Opera) */
+    &::-webkit-scrollbar {
+        display: none;
+        -webkit-appearance: none;
+    }
+
+    /* For IE, Edge and Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+}
+
+@utility animation-duration-150 {
+    animation-duration: 150ms;
+}
+
+@utility animation-duration-300 {
+    animation-duration: 300ms;
+}
+
+@utility transition-inherit-all {
+    transition-property: inherit;
+    transition-duration: inherit;
+    transition-timing-function: inherit;
+}
+
+html,
+body {
+    font-family: var(--font-body);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-font-variant-ligatures: contextual;
+    font-variant-ligatures: contextual;
+    -webkit-font-kerning: normal;
+    font-kerning: normal;
+}
+
+/* Hide the default expand arrow on Safari.  */
+details summary::-webkit-details-marker {
+    display: none;
+}
+
+/* Hide default arrows from number inputs. */
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+/* Firefox */
+input[type="number"] {
+    -moz-appearance: textfield;
+}

package/templates/default/src/styles/text-styles.css

@@ -0,0 +1,177 @@
+@utility tt-xs {
+    font-weight: 400;
+    font-size: var(--text-xs);
+    line-height: var(--leading-xs);
+}
+@utility tt-sm {
+    font-weight: 400;
+    font-size: var(--text-sm);
+    line-height: var(--leading-sm);
+}
+@utility tt-md {
+    font-weight: 400;
+    font-size: var(--text-md);
+    line-height: var(--leading-md);
+}
+@utility tt-lg {
+    font-weight: 400;
+    font-size: var(--text-lg);
+    line-height: var(--leading-lg);
+}
+@utility tt-xl {
+    font-weight: 400;
+    font-size: var(--text-xl);
+    line-height: var(--leading-xl);
+}
+@utility td-xs {
+    font-weight: 400;
+    font-size: var(--text-display-xs);
+    line-height: var(--leading-display-sm);
+}
+@utility td-sm {
+    font-weight: 400;
+    font-size: var(--text-display-sm);
+    line-height: var(--leading-display-sm);
+}
+@utility td-md {
+    font-weight: 400;
+    font-size: var(--text-display-md);
+    line-height: var(--leading-display-md);
+    letter-spacing: var(--tracking-display-md);
+}
+@utility td-lg {
+    font-weight: 400;
+    font-size: var(--text-display-lg);
+    line-height: var(--leading-display-lg);
+    letter-spacing: var(--tracking-display-lg);
+}
+@utility td-xl {
+    font-weight: 400;
+    font-size: var(--text-display-xl);
+    line-height: var(--leading-display-xl);
+    letter-spacing: var(--tracking-display-xl);
+}
+@utility td-2xl {
+    font-size: var(--text-display-2xl);
+    line-height: var(--leading-display-2xl);
+    letter-spacing: var(--tracking-display-2xl);
+}
+@utility tt-xs-md {
+    font-weight: 500;
+    font-size: var(--text-xs);
+    line-height: var(--leading-xs);
+}
+@utility tt-sm-md {
+    font-weight: 500;
+    font-size: var(--text-sm);
+    line-height: var(--leading-sm);
+}
+@utility tt-md-md {
+    font-weight: 500;
+    font-size: var(--text-md);
+    line-height: var(--leading-md);
+}
+@utility tt-lg-md {
+    font-weight: 500;
+    font-size: var(--text-lg);
+    line-height: var(--leading-lg);
+}
+@utility tt-xl-md {
+    font-weight: 500;
+    font-size: var(--text-xl);
+    line-height: var(--leading-xl);
+}
+@utility td-xs-md {
+    font-weight: 500;
+    font-size: var(--text-display-xs);
+    line-height: var(--leading-display-xs);
+}
+
+@utility td-sm-md {
+    font-weight: 500;
+    font-size: var(--text-display-sm);
+    line-height: var(--leading-display-sm);
+}
+@utility td-md-md {
+    font-weight: 500;
+    font-size: var(--text-display-md);
+    line-height: var(--leading-display-md);
+    letter-spacing: var(--tracking-display-md);
+}
+@utility td-lg-md {
+    font-weight: 500;
+    font-size: var(--text-display-lg);
+    line-height: var(--leading-display-lg);
+    letter-spacing: var(--tracking-display-lg);
+}
+@utility td-xl-md {
+    font-weight: 500;
+    font-size: var(--text-display-xl);
+    line-height: var(--leading-display-xl);
+    letter-spacing: var(--tracking-display-xl);
+}
+@utility td-2xl-md {
+    font-weight: 500;
+    font-size: var(--text-display-2xl);
+    line-height: var(--leading-display-2xl);
+    letter-spacing: var(--tracking-display-2xl);
+}
+@utility tt-xs-semi {
+    font-weight: 600;
+    font-size: var(--text-xs);
+    line-height: var(--leading-xs);
+}
+@utility tt-sm-semi {
+    font-weight: 600;
+    font-size: var(--text-sm);
+    line-height: var(--leading-sm);
+}
+@utility tt-md-semi {
+    font-weight: 600;
+    font-size: var(--text-md);
+    line-height: var(--leading-md);
+}
+@utility tt-lg-semi {
+    font-weight: 600;
+    font-size: var(--text-lg);
+    line-height: var(--leading-lg);
+}
+@utility tt-xl-semi {
+    font-weight: 600;
+    font-size: var(--text-xl);
+    line-height: var(--leading-xl);
+}
+@utility td-xs-semi {
+    font-weight: 600;
+    font-size: var(--text-display-xs);
+    line-height: var(--leading-display-xs);
+}
+@utility td-sm-semi {
+    font-weight: 600;
+    font-size: var(--text-display-sm);
+    line-height: var(--leading-display-sm);
+}
+@utility td-md-semi {
+    font-weight: 600;
+    font-size: var(--text-display-md);
+    line-height: var(--leading-display-md);
+    letter-spacing: var(--tracking-display-md);
+}
+@utility td-lg-semi {
+    font-weight: 600;
+    font-size: var(--text-display-lg);
+    line-height: var(--leading-display-lg);
+    letter-spacing: var(--tracking-display-lg);
+}
+@utility td-xl-semi {
+    font-weight: 600;
+    font-size: var(--text-display-xl);
+    line-height: var(--leading-display-xl);
+    letter-spacing: var(--tracking-display-xl);
+}
+@utility td-2xl-semi {
+    font-weight: 600;
+    font-size: var(--text-display-2xl);
+    line-height: var(--leading-display-2xl);
+    letter-spacing: var(--tracking-display-2xl);
+}