@newlogic-digital/ui 3.7.5 → 4.0.0

package/src/styles/{Layout → components/(layout)}/Main.css

@@ -1,5 +1,5 @@
 html {
-  scroll-padding-top: var(--l-scroll-padding-top);
+  scroll-padding-top: var(--scroll-padding-top);
 
   @media (min-width: 60em) and (max-width: 75.9375rem) {
     font-size: 87.5%;
@@ -13,19 +13,8 @@ body {
   overflow-x: clip;
 }
 
-.l-main {
+.x-main {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
-
-  &.swup-transition {
-    html.swup-enabled & {
-      transition: opacity 0.15s;
-      opacity: 1;
-    }
-
-    html.is-animating & {
-      opacity: 0;
-    }
-  }
 }

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)/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)/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)/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/Dialog/CookieConsent.css → components/cookieconsent/CookieConsentDialog.css}

@@ -1,14 +1,14 @@
-.c-dialog-cookieconsent {
-  .c-dialog-content {
+.x-cookieconsent-dialog {
+  .x-dialog-content {
     max-width: 32rem;
   }
 
   &.center {
-    .c-dialog-content {
+    .x-dialog-content {
       max-width: 26rem;
       text-align: center;
 
-      & .ui-image {
+      & .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/{emails/styles/main/Ui → styles/emails/components}/Text.css

@@ -1,12 +1,14 @@
-.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,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,16 +1,10 @@
 @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 "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";

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;
+  }
+}

package/src/styles/utils/scrollbar.css

@@ -0,0 +1,23 @@
+.no-scrollbar {
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-primary) var(--color-body-primary);
+  overscroll-behavior: contain;
+
+  &::-webkit-scrollbar {
+    width: 0.375rem;
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--color-primary);
+    border-radius: var(--radius-full);
+  }
+}

package/src/templates/components/(layout)/Footer.latte

@@ -0,0 +1 @@
+<footer class="x-footer"></footer>

package/src/templates/components/(layout)/Header.latte

@@ -0,0 +1,7 @@
+<header class="x-header grid grid-cols-container" data-controller="x-header">
+    <nav class="flex justify-center py-4 gap-4">
+        <a n:foreach="$nav as $page" class="x-link" href="{$page->url}" title="{$page->name}">
+            {$page->name}
+        </a>
+    </nav>
+</header>

package/src/templates/components/(ui)/Toast.latte

@@ -0,0 +1,9 @@
+<li class="x-toast" role="status" aria-live="assertive" aria-atomic="true" data-controller="x-toast" data-action="x-toast:connect->x-toast#show">
+    <div class="x-toast-content">
+        <div class="flex-col">
+            <div class="x-title">Hello toast</div>
+            <div class="x-text">Amazing toast</div>
+        </div>
+        <button class="x-button muted ml-auto" data-action="x-toast#close">Close</button>
+    </div>
+</li>

package/src/templates/{Sections/Text.latte → components/Content.latte}

@@ -1,6 +1,6 @@
-<div class="s-text py-12 grid-cols-container gap-8">
-    <h1 class="ui-heading">Zásady ochrany osobních údajů</h1>
-    <div class="ui-text">
+<div class="x-content py-12 grid grid-cols-container gap-y-8">
+    <h1 class="x-heading">Zásady ochrany osobních údajů</h1>
+    <div class="x-text">
         <p><strong>Správce osobních údajů a subjekt údajů</strong></p>
         <p>Správcem osobních údajů je společnost provozující tento web, rezervační službu.</p>
         <p>Subjektem údajů je fyzická osoba, která správci poskytla svoje osobní údaje na základě nájemní smlouvy, kupní

package/src/templates/components/Example.latte

@@ -0,0 +1,17 @@
+<div class="grid grid-cols-container">
+    <div class="p-4 bg-body-secondary rounded w-full max-w-xl mx-auto">
+        <h1 class="x-heading mb-4">Hello world!</h1>
+        <div class="x-text mb-4">Want to dig deeper into Newlogic UI?</div>
+
+        <a href="https://ui.newlogic.cz/" class="x-link underline">Read the docs &rarr;</a>
+    </div>
+    <div class="flex justify-center mt-4">
+        <button
+                class="x-button"
+                data-invoke-action="x-dialog#show"
+                data-invoke-url="/dialog/basic.json"
+        >
+            Dialog Fetch Example
+        </button>
+    </div>
+</div>