@newlogic-digital/ui 3.7.5 → 4.2.0

package/src/styles/base/transitions.css

@@ -0,0 +1,12 @@
+@import "winduum/src/base/transitions.css";
+
+@utility view-transition-main {
+  html.swup-enabled & {
+    transition: opacity var(--view-transition-main-duration);
+    opacity: 1;
+  }
+
+  html.is-animating & {
+    opacity: 0;
+  }
+}

package/src/styles/base/variants.css

@@ -0,0 +1,11 @@
+@variant hocus {
+  @media (hover: hover) {
+    &:hover {
+      @slot;
+    }
+  }
+
+  &:focus-visible {
+    @slot;
+  }
+}

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

@@ -0,0 +1,2 @@
+@import "./Header.css";
+@import "./Main.css";

package/src/styles/components/(layout)/Header.css

@@ -0,0 +1,13 @@
+@theme {
+  --x-header-height: 4rem;
+  --scroll-padding-top: calc(var(--x-header-height) + 1rem);
+}
+
+@layer utilities {
+  .x-header {
+    position: sticky;
+    top: 0;
+    z-index: var(--z-index-20);
+    height: var(--x-header-height);
+  }
+}

package/src/styles/components/(layout)/Main.css

@@ -0,0 +1,24 @@
+@layer base {
+  html {
+    scroll-padding-top: var(--scroll-padding-top);
+
+    @media (min-width: 60em) and (max-width: 75.9375rem) {
+      font-size: 87.5%;
+    }
+  }
+
+  body {
+    background-color: var(--color-body);
+    display: flex;
+    flex-direction: column;
+    overflow-x: clip;
+  }
+}
+
+@layer utilities {
+  .x-main {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+  }
+}

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

@@ -0,0 +1,25 @@
+@import "./Badge.css";
+@import "./Button.css";
+@import "./Carousel.css";
+@import "./Check.css";
+@import "./Compare.css";
+@import "./Control.css";
+@import "./ControlSelect.css";
+@import "./Drawer.css";
+@import "./Field.css";
+@import "./Group.css";
+@import "./Heading.css";
+@import "./Image.css";
+@import "./Info.css";
+@import "./Label.css";
+@import "./Link.css";
+@import "./Notice.css";
+@import "./Popover.css";
+@import "./Progress.css";
+@import "./Range.css";
+@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

@@ -0,0 +1,8 @@
+@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

@@ -0,0 +1,12 @@
+@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/lg.css" layer(utilities);
+@import "winduum/src/components/button/sm.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);

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

@@ -0,0 +1,4 @@
+@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);

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

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

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

@@ -0,0 +1,31 @@
+@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/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/icon.css" layer(utilities);
+@import "winduum/src/components/control/floating.css" layer(utilities);
+@import "winduum/src/components/control/invalid.css" layer(utilities);
+
+@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;
+
+      & option {
+        font-size: var(--x-control-font-size);
+      }
+    }
+  }
+}

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

@@ -0,0 +1 @@
+@import "@newlogic-digital/stimulus-components/src/control-select/index.css" layer(utilities);

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

@@ -0,0 +1,16 @@
+@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);
+
+@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;
+  }
+}

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

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

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

@@ -0,0 +1,2 @@
+@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

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

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

@@ -0,0 +1,2 @@
+@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

@@ -0,0 +1,2 @@
+@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

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

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

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

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

@@ -0,0 +1,2 @@
+@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

@@ -0,0 +1,13 @@
+@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

@@ -0,0 +1,6 @@
+@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

@@ -0,0 +1,4 @@
+@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

@@ -0,0 +1,4 @@
+@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

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

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

@@ -0,0 +1,14 @@
+@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

@@ -0,0 +1,2 @@
+@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/+.css

@@ -0,0 +1,2 @@
+@import "./Dialog.css";
+@import "./DialogContent.css";

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

@@ -0,0 +1,2 @@
+@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

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

package/src/styles/components/+.css

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

package/src/styles/components/cookieconsent/+.css

@@ -0,0 +1 @@
+@import "./CookieConsentDialog.css";

package/src/styles/components/cookieconsent/CookieConsentDialog.css

@@ -0,0 +1,19 @@
+@layer utilities {
+  .x-cookieconsent-dialog {
+    .x-dialog-content {
+      max-width: 32rem;
+    }
+
+    &.center {
+      .x-dialog-content {
+        max-width: 26rem;
+        text-align: center;
+
+        & .x-image {
+          margin-left: auto;
+          margin-right: auto;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,2 @@
+@import "./defaults.css";
+@import "./fonts.css";

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

@@ -0,0 +1,23 @@
+body {
+  margin: 0;
+  padding: 0;
+  background-color: var(--color-body);
+}
+
+img {
+  max-width: 100%;
+}
+
+a {
+  transition: color 0.15s;
+
+  &,
+  img {
+    text-decoration: none;
+    color: var(--color-main);
+  }
+
+  & img {
+    font-weight: 700;
+  }
+}

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

@@ -0,0 +1,4 @@
+@import "./Button.css";
+@import "./Heading.css";
+@import "./Main.css";
+@import "./Text.css";

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

@@ -0,0 +1,32 @@
+.x-button {
+  a {
+    line-height: 24px;
+    mso-line-height-rule: exactly;
+    border-radius: var(--radius);
+    display: inline-block;
+    border: 1px solid var(--color-primary);
+    padding: 5px 12px;
+    font-size: 14px;
+    font-weight: 700;
+
+    &,
+    span {
+      text-decoration: none;
+      color: var(--color-primary-foreground);
+    }
+  }
+
+  .x-button-content {
+    border-radius: var(--radius);
+    transition: background-color 0.15s;
+    background-color: var(--color-primary);
+
+    &:hover {
+      background-color: var(--color-primary-hover) !important;
+
+      a {
+        border: 1px solid var(--color-primary-hover) !important;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,7 @@
+.x-heading {
+  font-size: 24px;
+  line-height: 28px;
+  font-weight: 700;
+  mso-line-height-rule: exactly;
+  font-family: var(--default-font-family);
+}

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

@@ -0,0 +1,13 @@
+.x-main {
+  font-family: var(--default-font-family);
+  background-color: var(--color-body);
+  color: var(--color-main);
+  color-scheme: light;
+  min-width: 320px;
+  box-sizing: content-box;
+}
+
+.x-main-body {
+  background-color: var(--color-body-primary);
+  border-radius: var(--radius);
+}

package/src/{emails/styles/main/Ui → styles/emails/components}/Text.css

@@ -1,12 +1,15 @@
-.ui-text {
-  font-size: 14px;
-  font-weight: 400;
+.x-text {
+  font-size: 16px;
   line-height: 24px;
   mso-line-height-rule: exactly;
 
+  b,
+  strong {
+    font-weight: 700;
+  }
+
   &.sm {
-    font-size: 13px;
-    font-weight: 400;
+    font-size: 14px;
     line-height: 20px;
   }
 }

package/src/styles/emails/main.css

@@ -0,0 +1,8 @@
+@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/+.css

@@ -0,0 +1,2 @@
+@import "./config.css";
+@import "./default.css";

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

@@ -0,0 +1,16 @@
+@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: 24px;
+  --radius: 12px;
+  --container: 600px;
+}

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

@@ -0,0 +1,13 @@
+@theme {
+  --color-primary: #83cd4f;
+  --color-primary-hover: #73b346;
+  --color-primary-foreground: #000;
+  --color-main: var(--color-main-primary);
+  --color-main-primary: #000;
+  --color-body: var(--color-body-secondary);
+  --color-body-primary: #fff;
+  --color-body-secondary: #f3f2f6;
+  --color-body-tertiary: #fcfcfd;
+  --color-light: #fff;
+  --color-dark: #000;
+}

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

@@ -0,0 +1 @@
+@import "./common.css";

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

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

package/src/styles/main.css

@@ -1,16 +1,17 @@
-@import "winduum/src/base/reset.css";
-@import "./Utils/default.css";
-@import "./Utils/breakpoints.css";
-@import "./Utils/keyframes.css";
-@import "./Utils/config.css";
-@import "./Utils/theme/+.css";
-@import "./Libraries/+.css";
-@import "./Layout/+.css" layer(components);
-@import "./Ui/+.css" layer(components);
-@import "./Components/+.css" layer(components);
-@import "./Sections/+.css" layer(components);
-@import "./Utils/utilities.css" layer(components);
-@import "tailwindcss/base.css";
-@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);
+@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/+.css

@@ -0,0 +1,2 @@
+@import "./dark.css";
+@import "./main.css";

package/src/styles/theme/dark.css

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

package/src/styles/{Utils/theme → theme}/main.css

@@ -1,8 +1,9 @@
-:root, :host {
-  --font-primary: "Poppins", sans-serif;
-  --font-secondary: "Poppins", sans-serif;
-  --space: srgb;
-  --scheme: dark;
+@import "./dark.css";
+
+@theme {
+  --default-font-family: "Poppins", sans-serif;
+  --default-color-space: srgb;
+  --default-color-scheme: inherit;
   --color-accent: var(--color-primary);
   --color-accent-foreground: var(--color-primary-foreground);
   --color-primary: #83cd4f;
@@ -10,13 +11,13 @@
   --color-main: #111315;
   --color-main-foreground: var(--color-body);
   --color-main-primary: var(--color-main);
-  --color-main-secondary: color-mix(in var(--space), var(--color-main) 75%, var(--color-main-foreground));
-  --color-main-tertiary: color-mix(in var(--space), var(--color-main) 50%, var(--color-main-foreground));
+  --color-main-secondary: color-mix(in var(--default-color-space), var(--color-main) 75%, var(--color-main-foreground));
+  --color-main-tertiary: color-mix(in var(--default-color-space), var(--color-main) 50%, var(--color-main-foreground));
   --color-body: #fff;
   --color-body-foreground: var(--color-main);
   --color-body-primary: var(--color-body);
-  --color-body-secondary: color-mix(in var(--space), var(--color-body) 95%, var(--color-body-foreground));
-  --color-body-tertiary: color-mix(in var(--space), var(--color-body) 90%, var(--color-body-foreground));
+  --color-body-secondary: color-mix(in var(--default-color-space), var(--color-body) 95%, var(--color-body-foreground));
+  --color-body-tertiary: color-mix(in var(--default-color-space), var(--color-body) 90%, var(--color-body-foreground));
   --color-light: #fff;
   --color-light-foreground: var(--color-dark);
   --color-dark: #111315;
@@ -25,9 +26,5 @@
   --color-error: #dc2626;
   --color-warning: #eab308;
   --color-info: #0ea5e9;
-
-  &.dark {
-    --color-main: #c9d1d9;
-    --color-body: #0e1116;
-  }
+  --container-width: 80rem;
 }