@newlogic-digital/ui 4.0.0 → 4.3.0-next.1

package/src/styles/components/(ui)/+.css

@@ -1,5 +1,6 @@
 @import "./Badge.css";
 @import "./Button.css";
+@import "./Carousel.css";
 @import "./Check.css";
 @import "./Compare.css";
 @import "./Control.css";
@@ -12,6 +13,7 @@
 @import "./Info.css";
 @import "./Label.css";
 @import "./Link.css";
+@import "./Marquee.css";
 @import "./Notice.css";
 @import "./Popover.css";
 @import "./Progress.css";
@@ -19,5 +21,6 @@
 @import "./Switch.css";
 @import "./Text.css";
 @import "./Title.css";
+@import "./Toast.css";
 @import "./Toaster.css";
 @import "./dialog/+.css";

package/src/styles/components/(ui)/Badge.css

@@ -1,8 +1,8 @@
-@import "winduum/src/components/badge/props/default.css";
-@import "winduum/src/components/badge/default.css";
-@import "winduum/src/components/badge/sm.css";
-@import "winduum/src/components/badge/lg.css";
-@import "winduum/src/components/badge/bordered.css";
-@import "winduum/src/components/badge/muted.css";
-@import "winduum/src/components/badge/square.css";
-@import "winduum/src/components/badge/circle.css";
+@import "winduum/src/components/badge/props/default.css" layer(theme);
+@import "winduum/src/components/badge/default.css" layer(utilities);
+@import "winduum/src/components/badge/sm.css" layer(utilities);
+@import "winduum/src/components/badge/lg.css" layer(utilities);
+@import "winduum/src/components/badge/bordered.css" layer(utilities);
+@import "winduum/src/components/badge/muted.css" layer(utilities);
+@import "winduum/src/components/badge/square.css" layer(utilities);
+@import "winduum/src/components/badge/circle.css" layer(utilities);

package/src/styles/components/(ui)/Button.css

@@ -1,12 +1,24 @@
-@import "winduum/src/components/button/props/default.css";
-@import "winduum/src/components/button/props/interactive.css";
-@import "winduum/src/components/button/default.css";
-@import "winduum/src/components/button/lg.css";
-@import "winduum/src/components/button/sm.css";
-@import "winduum/src/components/button/interactive.css";
-@import "winduum/src/components/button/bordered.css";
-@import "winduum/src/components/button/ghosted.css";
-@import "winduum/src/components/button/muted.css";
-@import "winduum/src/components/button/square.css";
-@import "winduum/src/components/button/circle.css";
-@import "winduum/src/components/button/spinner.css";
+@import "winduum/src/components/button/props/default.css" layer(theme);
+@import "winduum/src/components/button/props/interactive.css" layer(theme);
+@import "winduum/src/components/button/default.css" layer(utilities);
+@import "winduum/src/components/button/interactive.css" layer(utilities);
+@import "winduum/src/components/button/bordered.css" layer(utilities);
+@import "winduum/src/components/button/ghosted.css" layer(utilities);
+@import "winduum/src/components/button/muted.css" layer(utilities);
+@import "winduum/src/components/button/square.css" layer(utilities);
+@import "winduum/src/components/button/circle.css" layer(utilities);
+@import "winduum/src/components/button/spinner.css" layer(utilities);
+
+@utility lg {
+  .x-button:is(&) {
+    --x-button-block-size: 3rem;
+    --x-button-padding-inline: 1.5rem;
+  }
+}
+
+@utility sm {
+  .x-button:is(&) {
+    --x-button-block-size: 2rem;
+    --x-button-padding-inline: 1rem;
+  }
+}

package/src/styles/components/(ui)/Carousel.css

@@ -0,0 +1,2 @@
+@import "winduum/src/components/carousel/default.css" layer(utilities);
+@import "winduum/src/components/carousel/content.css" layer(utilities);

package/src/styles/components/(ui)/Check.css

@@ -1 +1,11 @@
-@import "winduum/src/components/check/index.css";
+@import "winduum/src/components/check/props/default.css" layer(theme);
+@import "winduum/src/components/check/default.css" layer(utilities);
+@import "winduum/src/components/check/interactive.css" layer(utilities);
+@import "winduum/src/components/check/invalid.css" layer(utilities);
+
+@layer theme {
+  :root,
+  :host {
+    --x-check-line-height: var(--x-check-size);
+  }
+}

package/src/styles/components/(ui)/Compare.css

@@ -1 +1 @@
-@import "winduum/src/components/compare/index.css";
+@import "winduum/src/components/compare/default.css" layer(utilities);

package/src/styles/components/(ui)/Control.css

@@ -1,29 +1,33 @@
-@import "winduum/src/components/control/props/default.css";
-@import "winduum/src/components/control/props/floating.css";
-@import "winduum/src/components/control/props/select.css";
-@import "winduum/src/components/control/props/icon.css";
-@import "winduum/src/components/control/default.css";
-@import "winduum/src/components/control/interactive.css";
-@import "winduum/src/components/control/file.css";
-@import "winduum/src/components/control/select.css";
-@import "winduum/src/components/control/icon.css";
-@import "winduum/src/components/control/floating.css";
-@import "winduum/src/components/control/invalid.css";
+@import "winduum/src/components/control/props/default.css" layer(theme);
+@import "winduum/src/components/control/props/floating.css" layer(theme);
+@import "winduum/src/components/control/props/select.css" layer(theme);
+@import "winduum/src/components/control/props/select-picker.css" layer(theme);
+@import "winduum/src/components/control/props/icon.css" layer(theme);
+@import "winduum/src/components/control/default.css" layer(utilities);
+@import "winduum/src/components/control/interactive.css" layer(utilities);
+@import "winduum/src/components/control/file.css" layer(utilities);
+@import "winduum/src/components/control/select.css" layer(utilities);
+@import "winduum/src/components/control/select-picker.css" layer(utilities);
+@import "winduum/src/components/control/icon.css" layer(utilities);
+@import "winduum/src/components/control/floating.css" layer(utilities);
+@import "winduum/src/components/control/invalid.css" layer(utilities);
 
-.x-control {
-  &[data-active] label,
-  :where(input, textarea):is(:focus, [placeholder]) ~ label,
-  :where(select):is([data-placeholder]) ~ label {
-    transform: translateY(calc(var(--x-control-label-translate-y) * -1)) scale(var(--x-control-label-scale));
-    opacity: var(--x-control-label-focus-opacity, 0.5);
-  }
+@layer utilities {
+  .x-control {
+    &[data-active] label,
+    :where(input, textarea):is(:focus, [placeholder]) ~ label,
+    :where(select):is([data-placeholder]) ~ label {
+      transform: translateY(calc(var(--x-control-label-translate-y) * -1)) scale(var(--x-control-label-scale));
+      opacity: var(--x-control-label-focus-opacity, 0.5);
+    }
 
-  &:has(label):not([data-active]) select:not([data-placeholder]) {
-    font-size: 0;
-    height: inherit;
+    &:has(label):not([data-active]) select:not([data-placeholder]) {
+      font-size: 0;
+      height: inherit;
 
-    & option {
-      font-size: var(--x-control-font-size);
+      & option {
+        font-size: var(--x-control-font-size);
+      }
     }
   }
 }

package/src/styles/components/(ui)/ControlSelect.css

@@ -1 +1,8 @@
-@import "@newlogic-digital/stimulus-components/src/control-select/index.css";
+@import "@newlogic-digital/stimulus-components/src/control-select/index.css" layer(utilities);
+
+@layer theme {
+  :root,
+  :host {
+    --x-control-select-icon-mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M12.53 16.28a.75.75 0 0 1-1.06 0l-7.5-7.5a.75.75 0 0 1 1.06-1.06L12 14.69l6.97-6.97a.75.75 0 1 1 1.06 1.06l-7.5 7.5Z" clip-rule="evenodd" /></svg>');
+  }
+}

package/src/styles/components/(ui)/Drawer.css

@@ -1,14 +1,16 @@
-@import "winduum/src/components/drawer/props/default.css";
-@import "winduum/src/components/drawer/props/content.css";
-@import "winduum/src/components/drawer/default.css";
-@import "winduum/src/components/drawer/content.css";
+@import "winduum/src/components/drawer/props/default.css" layer(theme);
+@import "winduum/src/components/drawer/props/content.css" layer(theme);
+@import "winduum/src/components/drawer/default.css" layer(utilities);
+@import "winduum/src/components/drawer/content.css" layer(utilities);
 
-.x-drawer {
-  --x-drawer-content-inline-size: min(calc(100vw - 2rem), 22rem);
-  --x-drawer-content-block-size: 100dvh;
-}
+@layer utilities {
+  .x-drawer {
+    --x-drawer-content-inline-size: min(calc(100vw - 2rem), 22rem);
+    --x-drawer-content-block-size: 100dvh;
+  }
 
-.x-drawer-content {
-  overflow-y: auto;
-  overscroll-behavior: contain;
+  .x-drawer-content {
+    overflow-y: auto;
+    overscroll-behavior: contain;
+  }
 }

package/src/styles/components/(ui)/Field.css

@@ -1 +1 @@
-@import "winduum/src/components/field/index.css";
+@import "winduum/src/components/field/default.css" layer(utilities);

package/src/styles/components/(ui)/Group.css

@@ -1 +1,2 @@
-@import "winduum/src/components/group/index.css";
+@import "winduum/src/components/group/default.css" layer(utilities);
+@import "winduum/src/components/group/vertical.css" layer(utilities);

package/src/styles/components/(ui)/Heading.css

@@ -1,4 +1,35 @@
-@import "winduum/src/components/heading/props/default.css";
-@import "winduum/src/components/heading/default.css";
-@import "winduum/src/components/heading/sm.css";
-@import "winduum/src/components/heading/lg.css";
+@import "winduum/src/components/heading/props/default.css" layer(theme);
+@import "winduum/src/components/heading/default.css" layer(utilities);
+
+@layer theme {
+  :root,
+  :host {
+    --x-heading-font-size: var(--text-4xl);
+    --x-heading-font-weight: var(--font-weight-medium);
+    --x-heading-line-height: 1.2;
+  }
+}
+
+@utility xs {
+  .x-heading:is(&) {
+    --x-heading-font-size: var(--text-2xl);
+  }
+}
+
+@utility sm {
+  .x-heading:is(&) {
+    --x-heading-font-size: var(--text-3xl);
+  }
+}
+
+@utility lg {
+  .x-heading:is(&) {
+    --x-heading-font-size: var(--text-5xl);
+  }
+}
+
+@utility xl {
+  .x-heading:is(&) {
+    --x-heading-font-size: var(--text-6xl);
+  }
+}

package/src/styles/components/(ui)/Image.css

@@ -1 +1,2 @@
-@import "winduum/src/components/image/index.css";
+@import "winduum/src/components/image/default.css" layer(utilities);
+@import "winduum/src/components/image/avatar.css" layer(utilities);

package/src/styles/components/(ui)/Info.css

@@ -1 +1,2 @@
-@import "winduum/src/components/info/index.css";
+@import "winduum/src/components/info/props/default.css" layer(theme);
+@import "winduum/src/components/info/default.css" layer(utilities);

package/src/styles/components/(ui)/Label.css

@@ -1 +1,11 @@
-@import "winduum/src/components/label/index.css";
+@import "winduum/src/components/label/props/default.css" layer(theme);
+@import "winduum/src/components/label/default.css" layer(utilities);
+
+@layer theme {
+  :root,
+  :host {
+    --x-label-font-size: var(--text-2xs);
+    --x-label-line-height: calc(1em + 0.125rem);
+    --x-label-font-weight: var(--font-weight-medium);
+  }
+}

package/src/styles/components/(ui)/Link.css

@@ -1,2 +1,2 @@
-@import "winduum/src/components/link/default.css";
-@import "winduum/src/components/link/interactive.css";
+@import "winduum/src/components/link/default.css" layer(utilities);
+@import "winduum/src/components/link/interactive.css" layer(utilities);

package/src/styles/components/(ui)/Marquee.css

@@ -0,0 +1,2 @@
+@import "winduum/src/components/marquee/default.css" layer(utilities);
+@import "winduum/src/components/marquee/keyframes/default.css";

package/src/styles/components/(ui)/Notice.css

@@ -1 +1,2 @@
-@import "winduum/src/components/notice/index.css";
+@import "winduum/src/components/notice/props/default.css" layer(theme);
+@import "winduum/src/components/notice/default.css" layer(utilities);

package/src/styles/components/(ui)/Popover.css

@@ -1 +1,13 @@
-@import "winduum/src/components/popover/index.css";
+@import "winduum/src/components/popover/props/content.css" layer(theme);
+@import "winduum/src/components/popover/default.css" layer(utilities);
+@import "winduum/src/components/popover/content.css" layer(utilities);
+
+@utility closed {
+  .x-popover-content:is(&) {
+    --tw-scale-x: var(--x-popover-content-scale-x);
+    --tw-scale-y: var(--x-popover-content-scale-y);
+
+    opacity: 0;
+    visibility: hidden;
+  }
+}

package/src/styles/components/(ui)/Progress.css

@@ -1 +1,6 @@
-@import "winduum/src/components/progress/index.css";
+@import "winduum/src/components/progress/props/default.css" layer(theme);
+@import "winduum/src/components/progress/keyframes/default.css";
+@import "winduum/src/components/progress/default.css" layer(utilities);
+@import "winduum/src/components/progress/meter.css" layer(utilities);
+@import "winduum/src/components/progress/sm.css" layer(utilities);
+@import "winduum/src/components/progress/lg.css" layer(utilities);

package/src/styles/components/(ui)/Range.css

@@ -1 +1,4 @@
-@import "winduum/src/components/range/index.css";
+@import "winduum/src/components/range/props/default.css" layer(theme);
+@import "winduum/src/components/range/default.css" layer(utilities);
+@import "winduum/src/components/range/multi.css" layer(utilities);
+@import "winduum/src/components/range/vertical.css" layer(utilities);

package/src/styles/components/(ui)/Switch.css

@@ -1 +1,4 @@
-@import "winduum/src/components/switch/index.css";
+@import "winduum/src/components/switch/props/default.css" layer(theme);
+@import "winduum/src/components/switch/default.css" layer(utilities);
+@import "winduum/src/components/switch/interactive.css" layer(utilities);
+@import "winduum/src/components/switch/invalid.css" layer(utilities);

package/src/styles/components/(ui)/Text.css

@@ -1 +1,51 @@
-@import "winduum/src/components/text/index.css";
+@import "winduum/src/components/text/default.css" layer(utilities);
+
+@layer theme {
+  :root,
+  :host {
+    --x-text-font-size: var(--text-base);
+    --x-text-line-height: 1.5;
+    --x-text-letter-spacing: -0.02em;
+    --x-text-content-bold: var(--font-weight-semibold);
+    --x-text-content-margin-block: calc(var(--spacing) * 4);
+    --x-text-heading-font-weight: var(--font-weight-medium);
+    --x-text-heading-line-height: 1.2;
+    --x-text-heading-margin-block: calc(var(--spacing) * 6) calc(var(--spacing) * 4);
+    --x-text-heading-1-font-size: var(--text-5xl);
+    --x-text-heading-2-font-size: var(--text-4xl);
+    --x-text-heading-3-font-size: var(--text-3xl);
+    --x-text-heading-4-font-size: var(--text-2xl);
+    --x-text-heading-5-font-size: var(--text-xl);
+    --x-text-heading-6-font-size: var(--text-lg);
+    --x-text-list-marker-size: 0.375em;
+    --x-text-hr-margin-block: 3em;
+    --x-text-blockquote-font-size: var(--text-lg);
+    --x-text-blockquote-margin-block: calc(var(--spacing) * 9);
+    --x-text-blockquote-border-inline-start-width: 0.125rem;
+    --x-text-blockquote-border-inline-start-color: var(--color-main);
+    --x-text-figure-margin-block: calc(var(--spacing) * 12);
+    --x-text-img-border-radius: var(--radius-2xl);
+    --x-text-figcaption-font-weight: var(--font-weight-normal);
+    --x-text-figcaption-margin-block-start: 0.5rem;
+    --x-text-figcaption-padding-inline-start: 0.5rem;
+    --x-text-figcaption-border-inline-start: 0.125rem solid var(--color-accent);
+  }
+}
+
+@utility lg {
+  .x-text:is(&) {
+    --x-text-font-size: var(--text-lg);
+  }
+}
+
+@utility sm {
+  .x-text:is(&) {
+    --x-text-font-size: var(--text-sm);
+  }
+}
+
+@utility xs {
+  .x-text:is(&) {
+    --x-text-font-size: var(--text-xs);
+  }
+}

package/src/styles/components/(ui)/Title.css

@@ -1,4 +1,14 @@
-@import "winduum/src/components/title/props/default.css";
-@import "winduum/src/components/title/default.css";
-@import "winduum/src/components/title/sm.css";
-@import "winduum/src/components/title/lg.css";
+@import "winduum/src/components/title/props/default.css" layer(theme);
+@import "winduum/src/components/title/default.css" layer(utilities);
+
+@utility sm {
+  .x-title:is(&) {
+    --x-title-font-size: var(--text-xs);
+  }
+}
+
+@utility lg {
+  .x-title:is(&) {
+    --x-title-font-size: var(--text-base);
+  }
+}

package/src/styles/components/(ui)/Toast.css

@@ -0,0 +1,4 @@
+@import "winduum/src/components/toast/props/default.css" layer(theme);
+@import "winduum/src/components/toast/props/content.css" layer(theme);
+@import "winduum/src/components/toast/default.css" layer(utilities);
+@import "winduum/src/components/toast/content.css" layer(utilities);

package/src/styles/components/(ui)/Toaster.css

@@ -1,2 +1,2 @@
-@import "winduum/src/components/toaster/index.css";
-@import "winduum/src/components/toast/index.css";
+@import "winduum/src/components/toaster/props/default.css" layer(theme);
+@import "winduum/src/components/toaster/default.css" layer(utilities);

package/src/styles/components/(ui)/dialog/Dialog.css

@@ -1,2 +1,2 @@
-@import "winduum/src/components/dialog/props/default.css";
-@import "winduum/src/components/dialog/default.css";
+@import "winduum/src/components/dialog/props/default.css" layer(theme);
+@import "winduum/src/components/dialog/default.css" layer(utilities);

package/src/styles/components/(ui)/dialog/DialogContent.css

@@ -1,2 +1,2 @@
-@import "winduum/src/components/dialog/props/content.css";
-@import "winduum/src/components/dialog/content.css";
+@import "winduum/src/components/dialog/props/content.css" layer(theme);
+@import "winduum/src/components/dialog/content.css" layer(utilities);

package/src/styles/components/+.css

@@ -1,3 +1,2 @@
 @import "./(layout)/+.css";
 @import "./(ui)/+.css";
-@import "./cookieconsent/+.css";

package/src/styles/emails/base/defaults.css

@@ -11,7 +11,8 @@ img {
 a {
   transition: color 0.15s;
 
-  &, img {
+  &,
+  img {
     text-decoration: none;
     color: var(--color-main);
   }

package/src/styles/emails/components/Button.css

@@ -9,7 +9,8 @@
     font-size: 14px;
     font-weight: 700;
 
-    &, span {
+    &,
+    span {
       text-decoration: none;
       color: var(--color-primary-foreground);
     }

package/src/styles/emails/components/Heading.css

@@ -3,5 +3,5 @@
   line-height: 28px;
   font-weight: 700;
   mso-line-height-rule: exactly;
-  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: var(--default-font-family);
 }

package/src/styles/emails/components/Main.css

@@ -1,5 +1,5 @@
 .x-main {
-  font-family: Roboto, Tahoma, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  font-family: var(--default-font-family);
   background-color: var(--color-body);
   color: var(--color-main);
   color-scheme: light;

package/src/styles/emails/components/Text.css

@@ -3,7 +3,8 @@
   line-height: 24px;
   mso-line-height-rule: exactly;
 
-  b, strong {
+  b,
+  strong {
     font-weight: 700;
   }
 

package/src/styles/emails/main.css

@@ -1,9 +1,8 @@
-@import "tailwindcss/base.css";
-@import "tailwindcss/components.css";
-@import "tailwindcss/utilities.css";
-@import "tailwindcss/variants.css";
+@import "tailwindcss/utilities" source(none);
 @import "./base/+.css";
 @import "./theme/config.css";
 @import "./theme/default.css";
 @import "./components/+.css";
 @import "./utils/+.css";
+
+@source "../../templates/emails";

package/src/styles/emails/theme/config.css

@@ -1,5 +1,18 @@
-:root {
-  --spacing-container: 24px;
+@theme {
+  --default-font-family:
+    "Roboto",
+    -apple-system,
+    "BlinkMacSystemFont",
+    "Segoe UI",
+    "Helvetica",
+    "Arial",
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol";
+  --spacing-container: 20px;
   --radius: 12px;
   --container: 600px;
 }
+
+@custom-media --media-container (width < 640px);

package/src/styles/emails/theme/default.css

@@ -1,4 +1,4 @@
-:root {
+@theme {
   --color-primary: #83cd4f;
   --color-primary-hover: #73b346;
   --color-primary-foreground: #000;

package/src/styles/emails/utils/common.css

@@ -1,29 +1,29 @@
-.container {
+@utility container {
   min-width: var(--container);
   width: var(--container);
 
-  @media (max-width: 647px) {
+  @media (--media-container) {
     min-width: 100% !important;
     width: 100% !important;
   }
 }
 
-.underline {
+@utility underline {
   text-decoration: underline;
 }
 
-.border-r {
+@utility border-r {
   border-right: 1px solid;
 }
 
-.border-l {
+@utility border-l {
   border-left: 1px solid;
 }
 
-.border-b {
+@utility border-b {
   border-bottom: 1px solid;
 }
 
-.border-t {
+@utility border-t {
   border-top: 1px solid;
 }

package/src/styles/main.css

@@ -1,10 +1,17 @@
-@import "winduum/src/base/reset.css";
-@import "tailwindcss/base.css";
-@import "winduum/tailwindcss/base/defaults.css";
-@import "./base/+.css";
-@import "./theme/main.css";
-@import "./components/+.css" layer(components);
-@import "./utils/+.css" layer(components);
-@import "tailwindcss/components.css";
-@import "tailwindcss/utilities.css";
-@import "tailwindcss/variants.css";
+@import "tailwindcss/theme.css" layer(theme);
+@import "winduum/tailwindcss/theme/config/index.css" layer(theme);
+@import "./theme/main.css" layer(theme);
+@import "winduum/src/base/reset.css" layer(base);
+@import "./base/defaults.css" layer(base);
+@import "./components/+.css";
+@import "./utils/+.css";
+@import "tailwindcss/utilities" layer(utilities) source("../");
+@import "winduum/tailwindcss/variants/dark.css";
+@import "./base/breakpoints.css";
+@import "./base/keyframes.css";
+@import "./base/transitions.css";
+@import "./base/variants.css";
+
+@source "../../node_modules/winduum/src";
+@source not "../templates/emails";
+@source not "../views/emails";

package/src/styles/theme/dark.css

@@ -1,4 +1,5 @@
-:root.dark, :host.dark {
+:root.dark,
+:host.dark {
   --default-color-scheme: dark;
   --color-main: #c9d1d9;
   --color-body: #0e1116;