@newlogic-digital/ui 3.5.0 → 4.0.0

package/src/styles/base/defaults.css

@@ -0,0 +1,36 @@
+@import "winduum/src/base/defaults.css";
+@import "winduum/tailwindcss/base/defaults.css";
+
+:where(svg) {
+  display: block;
+
+  &:has([href]) {
+    stroke-width: 1.5;
+    stroke: currentcolor;
+    fill: none;
+  }
+
+  &:has([href*="-solid"]) {
+    stroke: none;
+    fill: currentcolor;
+  }
+}
+
+:where(img) {
+  display: block;
+  font-size: 0;
+}
+
+:where(ol:not([type]), ul, menu) {
+  padding: 0;
+  margin: 0;
+}
+
+:where([type="number"]) {
+  -moz-appearance: textfield;
+
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+  }
+}

package/src/styles/base/transitions.css

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

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,11 @@
+:root {
+  --x-header-height: 4rem;
+  --scroll-padding-top: calc(var(--x-header-height) + 1rem);
+}
+
+.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,20 @@
+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;
+}
+
+.x-main {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}

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

@@ -0,0 +1,23 @@
+@import "./Badge.css";
+@import "./Button.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 "./Toaster.css";
+@import "./dialog/+.css";

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

@@ -0,0 +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";

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

@@ -0,0 +1,12 @@
+@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";

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

@@ -0,0 +1 @@
+@import "winduum/src/components/check/index.css";

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

@@ -0,0 +1 @@
+@import "winduum/src/components/compare/index.css";

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

@@ -0,0 +1,29 @@
+@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";
+
+.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";

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

@@ -0,0 +1,14 @@
+@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";
+
+.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/index.css";

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

@@ -0,0 +1 @@
+@import "winduum/src/components/group/index.css";

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

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

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

@@ -0,0 +1 @@
+@import "winduum/src/components/image/index.css";

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

@@ -0,0 +1 @@
+@import "winduum/src/components/info/index.css";

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

@@ -0,0 +1 @@
+@import "winduum/src/components/label/index.css";

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

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

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

@@ -0,0 +1 @@
+@import "winduum/src/components/notice/index.css";

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

@@ -0,0 +1 @@
+@import "winduum/src/components/popover/index.css";

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

@@ -0,0 +1 @@
+@import "winduum/src/components/progress/index.css";

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

@@ -0,0 +1 @@
+@import "winduum/src/components/range/index.css";

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

@@ -0,0 +1 @@
+@import "winduum/src/components/switch/index.css";

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

@@ -0,0 +1 @@
+@import "winduum/src/components/text/index.css";

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

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

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

@@ -0,0 +1,2 @@
+@import "winduum/src/components/toaster/index.css";
+@import "winduum/src/components/toast/index.css";

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";
+@import "winduum/src/components/dialog/default.css";

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

@@ -0,0 +1,2 @@
+@import "winduum/src/components/dialog/props/content.css";
+@import "winduum/src/components/dialog/content.css";

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,17 @@
+.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/+.css

@@ -0,0 +1,5 @@
+@import "./base/+.css";
+@import "./components/+.css";
+@import "./main.css";
+@import "./theme/+.css";
+@import "./utils/+.css";

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,22 @@
+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,31 @@
+.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: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}

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

@@ -0,0 +1,13 @@
+.x-main {
+  font-family: Roboto, Tahoma, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  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/styles/emails/components/Text.css

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

package/src/styles/emails/main.css

@@ -0,0 +1,9 @@
+@import "tailwindcss/base.css";
+@import "tailwindcss/components.css";
+@import "tailwindcss/utilities.css";
+@import "tailwindcss/variants.css";
+@import "./base/+.css";
+@import "./theme/config.css";
+@import "./theme/default.css";
+@import "./components/+.css";
+@import "./utils/+.css";

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,5 @@
+:root {
+  --spacing-container: 24px;
+  --radius: 12px;
+  --container: 600px;
+}

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

@@ -0,0 +1,13 @@
+:root {
+  --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 @@
+.container {
+  min-width: var(--container);
+  width: var(--container);
+
+  @media (max-width: 647px) {
+    min-width: 100% !important;
+    width: 100% !important;
+  }
+}
+
+.underline {
+  text-decoration: underline;
+}
+
+.border-r {
+  border-right: 1px solid;
+}
+
+.border-l {
+  border-left: 1px solid;
+}
+
+.border-b {
+  border-bottom: 1px solid;
+}
+
+.border-t {
+  border-top: 1px solid;
+}

package/src/styles/main.css

@@ -1,19 +1,10 @@
 @import "winduum/src/base/reset.css";
-@import "./Utils/default.css";
-@import "./Utils/breakpoints.css";
-@import "./Utils/keyframes.css";
-@import "./Utils/print.css";
-@import "./Utils/icons.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/tailwind.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 "winduum/src/main-rgb.css" supports(not (color: color-mix(in srgb, red 0%, red)));
 @import "tailwindcss/utilities.css";
 @import "tailwindcss/variants.css";

package/src/styles/theme/+.css

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

package/src/styles/theme/dark.css

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

package/src/styles/theme/main.css

@@ -0,0 +1,35 @@
+@import "winduum/src/theme/config/font.css";
+@import "winduum/src/theme/config/mask.css";
+@import "winduum/src/theme/config/radius.css";
+@import "winduum/src/theme/config/spacing.css";
+@import "winduum/src/theme/config/transition.css";
+@import "winduum/src/theme/config/z.css";
+@import "./dark.css";
+
+:root, :host {
+  --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;
+  --color-primary-foreground: var(--color-dark);
+  --color-main: #111315;
+  --color-main-foreground: var(--color-body);
+  --color-main-primary: var(--color-main);
+  --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(--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;
+  --color-dark-foreground: var(--color-light);
+  --color-success: #16a34a;
+  --color-error: #dc2626;
+  --color-warning: #eab308;
+  --color-info: #0ea5e9;
+}

package/src/styles/tinymce.css

@@ -1,34 +1,2 @@
-@import "Utils/theme/main.css";
-@import "Utils/config.css";
-@import "Ui/Text.css";
-
-.ui-text {
-  & .row {
-    display: flex;
-    box-sizing: border-box;
-    flex-wrap: wrap;
-
-    & > .col {
-      box-sizing: border-box;
-      padding-top: 0;
-      padding-bottom: 0;
-      border: 1px dotted rgb(0 0 0 / 50%);
-
-      &.col-6 {
-        width: calc(6 / 12 * 100%);
-      }
-
-      &.col-8 {
-        width: calc(8 / 12 * 100%);
-      }
-
-      &.col-4 {
-        width: calc(4 / 12 * 100%);
-      }
-
-      &.col-3 {
-        width: calc(3 / 12 * 100%);
-      }
-    }
-  }
-}
+@import "./theme/main.css";
+@import "./components/(ui)/Text.css";

package/src/styles/utils/+.css

@@ -0,0 +1,4 @@
+@import "./container.css";
+@import "./index.css";
+@import "./reveal.css";
+@import "./scrollbar.css";

package/src/styles/utils/container.css

@@ -0,0 +1,5 @@
+@import "winduum/src/utilities/container/index.css";
+
+:root, :host {
+  --container-width: 80rem;
+}

package/src/styles/utils/index.css

@@ -0,0 +1,8 @@
+@import "winduum/src/utilities/animation.css";
+@import "winduum/src/utilities/ripple/index.css";
+@import "winduum/src/utilities/skeleton/index.css";
+@import "winduum/src/utilities/underline.css";
+@import "winduum/src/utilities/swap/index.css";
+@import "winduum/src/utilities/spinner/default.css";
+@import "winduum/src/utilities/dot.css";
+@import "./+.css";

package/src/styles/utils/reveal.css

@@ -0,0 +1,22 @@
+.reveal {
+  opacity: 0;
+  transition-property: var(--default-transition-property);
+  transition-timing-function: var(--ease-in-out);
+  transition-duration: 0.75s;
+  will-change: transform;
+
+  @media (prefers-reduced-motion) {
+    opacity: 1;
+    transform: none;
+  }
+
+  @media print {
+    opacity: 1;
+    transform: none;
+  }
+
+  &:is([data-in]), .no-js & {
+    opacity: 1;
+    transform: none;
+  }
+}