@newlogic-digital/ui 3.5.0 → 3.7.5

package/src/styles/Layout/Header.css

@@ -3,48 +3,16 @@
   --l-scroll-padding-top: calc(var(--l-header-height) + 1rem);
 }
 
-#l-header {
-  --color-current: rgb(var(--color-light-rgb));
-
-  z-index: var(--z-20);
-  position: fixed;
+.l-header {
+  position: sticky;
   top: 0;
-  left: 0;
-  right: 0;
-  padding: 0 2rem;
-  background-color: rgb(var(--color-dark-rgb));
-  color: var(--color-current);
+  z-index: var(--z-20);
+  padding-inline: 2rem calc(2rem + var(--c-dialog-scrollbar-width, 0rem));
+  background-color: var(--color-dark);
+  color: var(--color-light);
+  height: var(--l-header-height);
 
   .dark & {
     background-color: var(--color-body-secondary);
   }
-
-  &.is-l-header-normal {
-    & ~ #l-main {
-      padding-top: var(--l-header-height);
-    }
-  }
-
-  .l_header_body {
-    align-items: center;
-    height: var(--l-header-height);
-  }
-
-  .l_header_logo {
-    font-size: 1.5rem;
-    margin-right: 3rem;
-  }
-
-  .l_header_menu {
-    position: relative;
-    font-size: 1.5rem;
-  }
-
-  .l_header_nav {
-    gap: 2rem;
-
-    .ui-link {
-      padding: 1.25rem 0;
-    }
-  }
 }

package/src/styles/Layout/Main.css

@@ -1,23 +1,26 @@
 html {
-  scroll-behavior: smooth;
-  scroll-padding-top: var(--l-header-height);
+  scroll-padding-top: var(--l-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: hidden;
+  overflow-x: clip;
 }
 
-#l-main {
+.l-main {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
 
-  &.transition-fade {
+  &.swup-transition {
     html.swup-enabled & {
-      transition: opacity 0.1s;
+      transition: opacity 0.15s;
       opacity: 1;
     }
 

package/src/styles/Layout/Nav.css

@@ -1,30 +1,18 @@
-#l-nav {
-  --l-nav-width: calc(100vw - 2.5rem);
-
-  @media (--media-md) {
-    --l-nav-width: 25rem;
-  }
-
-  .l_header_nav {
-    flex-direction: column;
-  }
-
-  > .l_nav {
-    width: var(--l-nav-width);
-    background-color: var(--color-body);
-    height: 100vh;
-    flex-shrink: 0;
+.l-nav {
+  .c-drawer-content {
     padding: 2rem;
   }
 
-  .l_nav_head {
+  [data-part~="logo"] {
+    display: flex;
     padding: 0.75rem 0 2.5rem;
   }
 
-  .l_nav_body {
+  [data-part~="nav"] {
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
+    align-items: flex-start;
 
     & a {
       padding: 0.5rem 0;
@@ -32,16 +20,4 @@
       display: block;
     }
   }
-
-  &.is-transition {
-    > .l_nav {
-      transition: transform 0.3s ease;
-    }
-  }
-
-  &:not(.active) {
-    > .l_nav {
-      transform: translateX(calc(var(--l-nav-width) * -1));
-    }
-  }
 }

package/src/styles/Libraries/+.css

@@ -1,7 +1,2 @@
 @import "Datepicker.css";
-@import "Dialog.css";
-@import "Drawer.css";
-@import "Hint.css";
 @import "Pickr.css";
-@import "Ripple.css";
-@import "Tippy.css";

package/src/styles/Ui/+.css

@@ -3,7 +3,6 @@
 @import "Check.css";
 @import "Control.css";
 @import "ControlSelect.css";
-@import "Dot.css";
 @import "Group.css";
 @import "Heading.css";
 @import "Image.css";

package/src/styles/Ui/Badge.css

@@ -1,4 +1,5 @@
 @import "winduum/src/ui/badge/default.css";
+@import "winduum/src/ui/badge/default-props.css";
 @import "winduum/src/ui/badge/sm.css";
 @import "winduum/src/ui/badge/lg.css";
 @import "winduum/src/ui/badge/bordered.css";

package/src/styles/Ui/Btn.css

@@ -1,13 +1,14 @@
 @import "winduum/src/ui/btn/default.css";
-@import "winduum/src/ui/btn/sm.css";
+@import "winduum/src/ui/btn/default-props.css";
 @import "winduum/src/ui/btn/lg.css";
+@import "winduum/src/ui/btn/sm.css";
+@import "winduum/src/ui/btn/interactive.css";
+@import "winduum/src/ui/btn/interactive-props.css";
 @import "winduum/src/ui/btn/loading.css";
+@import "winduum/src/ui/btn/loading-props.css";
 @import "winduum/src/ui/btn/wide.css";
 @import "winduum/src/ui/btn/bordered.css";
-@import "winduum/src/ui/btn/hover-fill.css";
-@import "winduum/src/ui/btn/gradient.css";
-@import "winduum/src/ui/btn/gradient-bordered.css";
+@import "winduum/src/ui/btn/ghosted.css";
 @import "winduum/src/ui/btn/muted.css";
-@import "winduum/src/ui/btn/raised.css";
 @import "winduum/src/ui/btn/square.css";
 @import "winduum/src/ui/btn/circle.css";

package/src/styles/Ui/Check.css

@@ -1 +1 @@
-@import "winduum/src/ui/check.css";
+@import "winduum/src/ui/check/index.css";

package/src/styles/Ui/Control.css

@@ -1,20 +1,30 @@
 @import "winduum/src/ui/control/default.css";
+@import "winduum/src/ui/control/default-props.css";
+@import "winduum/src/ui/control/interactive.css";
+@import "winduum/src/ui/control/interactive-props.css";
 @import "winduum/src/ui/control/file.css";
 @import "winduum/src/ui/control/select.css";
+@import "winduum/src/ui/control/select-props.css";
 @import "winduum/src/ui/control/icon.css";
+@import "winduum/src/ui/control/icon-props.css";
 @import "winduum/src/ui/control/floating.css";
+@import "winduum/src/ui/control/floating-props.css";
+@import "winduum/src/ui/control/invalid.css";
 
 .ui-control {
+  --ui-control-font-size: var(--text-sm);
+
   &.active label,
   :where(input, textarea):is(:focus, [placeholder]) ~ label,
   :where(select):is([data-placeholder]) ~ label,
   &:has(.-active-) label {
-    transform: var(--ui-control-floating-label-focus-transform);
-    opacity: var(--ui-control-floating-label-focus-opacity);
+    transform: translateY(calc(var(--ui-control-label-translate-y) * -1)) scale(var(--ui-control-label-scale));
+    opacity: var(--ui-control-label-focus-opacity, 0.5);
   }
 
   &:has(label):not(.active) select:not([data-placeholder]) {
     font-size: 0;
+    height: inherit;
 
     & option {
       font-size: var(--ui-control-font-size);
@@ -22,8 +32,8 @@
   }
 
   :where(.color) {
-    width: var(--ui-control-icon-font-size);
-    height: var(--ui-control-icon-font-size);
+    width: var(--ui-control-icon-size);
+    height: var(--ui-control-icon-size);
     border-radius: 50%;
     overflow: hidden;
     display: block;

package/src/styles/Ui/ControlSelect.css

@@ -1,4 +1,5 @@
 .ui-control[data-controller~="ui-control-select"] {
+  position: relative;
   cursor: pointer;
 
   & select {
@@ -6,16 +7,16 @@
   }
 
   & div[aria-hidden] {
+    grid-area: c-control;
     will-change: transform;
-    border-radius: var(--ui-control-border-radius);
+    border-radius: inherit;
     position: absolute;
-    background-color: rgb(var(--color-body-rgb));
+    background-color: var(--color-body);
     z-index: 100;
-    left: 0;
-    right: 0;
+    inset-inline: 0;
     top: 100%;
     margin-top: 0.5rem;
-    border: 1px solid rgb(var(--color-current) / 7.5%);
+    border: 1px solid color-mix(in srgb, currentcolor 10%, transparent);
     transform: scaleY(0);
     opacity: 0;
     transition: var(--transition-opacity), var(--transition-transform);
@@ -26,9 +27,9 @@
     user-select: none;
     max-height: 12rem;
     overflow-y: auto;
-    box-shadow: 0 0.15em 1.5em 0 rgb(var(--color-dark-rgb) / 5%), 0 0 1em 0 rgb(var(--color-dark-rgb) / 5%);
+    box-shadow: 0 0.15em 1.5em 0 color-mix(in srgb, var(--color-dark) 5%, transparent), 0 0 1em 0 color-mix(in srgb, var(--color-dark) 5%, transparent);
     padding: 0.375rem;
-    color: rgb(var(--color-current));
+    color: currentcolor;
     cursor: default;
 
     & [data-option] {
@@ -36,7 +37,7 @@
       cursor: pointer;
       transition: var(--transition-background);
       font-size: var(--ui-control-font-size);
-      border-radius: var(--ui-control-border-radius);
+      border-radius: inherit;
 
       &[data-disabled] {
         opacity: 0.5;
@@ -44,21 +45,11 @@
       }
 
       &:is(:hover, :focus) {
-        background-color: rgb(var(--color-accent-rgb) / 10%);
+        background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
       }
     }
   }
 
-  &:focus-within {
-    --ui-control-border-opacity: 100%;
-    --ui-control-border-color: var(--color-accent);
-
-    & select {
-      outline-color: color-mix(in srgb, var(--color-accent) var(--ui-control-outline-opacity), transparent);
-      outline-offset: var(--ui-control-outline-offset);
-    }
-  }
-
   &:focus-within select ~ div[aria-hidden] {
     opacity: 1;
     transform: none;

package/src/styles/Ui/Group.css

@@ -1 +1 @@
-@import "winduum/src/ui/group.css";
+@import "winduum/src/ui/group/index.css";

package/src/styles/Ui/Heading.css

@@ -1,3 +1,4 @@
 @import "winduum/src/ui/heading/default.css";
+@import "winduum/src/ui/heading/default-props.css";
 @import "winduum/src/ui/heading/sm.css";
 @import "winduum/src/ui/heading/lg.css";

package/src/styles/Ui/Image.css

@@ -1 +1 @@
-@import "winduum/src/ui/image.css";
+@import "winduum/src/ui/image/index.css";

package/src/styles/Ui/Info.css

@@ -1 +1 @@
-@import "winduum/src/ui/info.css";
+@import "winduum/src/ui/info/index.css";

package/src/styles/Ui/Label.css

@@ -1 +1 @@
-@import "winduum/src/ui/label.css";
+@import "winduum/src/ui/label/index.css";

package/src/styles/Ui/Link.css

@@ -1,2 +1,8 @@
 @import "winduum/src/ui/link/default.css";
-@import "winduum/src/ui/link/underlined.css";
+@import "winduum/src/ui/link/interactive.css";
+@import "winduum/src/ui/link/interactive-props.css";
+
+.ui-link {
+  --ui-link-font-weight: var(--font-medium);
+  --ui-link-font-size: var(--text-sm);
+}

package/src/styles/Ui/Notice.css

@@ -1 +1,9 @@
-@import "winduum/src/ui/notice.css";
+@import "winduum/src/ui/notice/index.css";
+
+.ui-notice {
+  align-items: flex-start;
+
+  hr {
+    width: 100%;
+  }
+}

package/src/styles/Ui/Progress.css

@@ -1 +1 @@
-@import "winduum/src/ui/progress.css";
+@import "winduum/src/ui/progress/index.css";

package/src/styles/Ui/Switch.css

@@ -1 +1 @@
-@import "winduum/src/ui/switch.css";
+@import "winduum/src/ui/switch/index.css";

package/src/styles/Ui/Text.css

@@ -1,8 +1 @@
-@import "winduum/src/ui/text.css";
-
-.ui-text {
-  .c_text_table {
-    max-width: 100%;
-    overflow-x: auto;
-  }
-}
+@import "winduum/src/ui/text/index.css";

package/src/styles/Ui/Title.css

@@ -1,7 +1,4 @@
 @import "winduum/src/ui/title/default.css";
+@import "winduum/src/ui/title/default-props.css";
 @import "winduum/src/ui/title/sm.css";
 @import "winduum/src/ui/title/lg.css";
-
-.ui-title {
-  max-width: max-content;
-}

package/src/styles/Utils/+.css

@@ -1,8 +1,6 @@
 @import "breakpoints.css";
 @import "config.css";
 @import "default.css";
-@import "icons.css";
 @import "keyframes.css";
-@import "print.css";
-@import "tailwind.css";
 @import "theme/+.css";
+@import "utilities.css";

package/src/styles/Utils/config.css

@@ -1,5 +1,16 @@
-@import "winduum/src/base/config.css";
+@import "winduum/src/base/config/font.css";
+@import "winduum/src/base/config/mask.css";
+@import "winduum/src/base/config/rounded.css";
+@import "winduum/src/base/config/spacing.css";
+@import "winduum/src/base/config/text.css";
+@import "winduum/src/base/config/transition.css";
+@import "winduum/src/base/config/z.css";
 
-:root {
-  --spacing-section: 3rem;
+:root, :host {
+  --container: min(100% - (var(--container-padding) * 2), var(--container-width));
+  --container-lg: min(100% - (var(--container-padding) * 2), var(--container-lg-width));
+  --container-width: 80rem;
+  --container-lg-width: 90rem;
+  --container-padding: 5vw;
+  --container-padding-calc: max(calc(50vw - (var(--container-width) / 2)), var(--container-padding));
 }

package/src/styles/Utils/default.css

@@ -1,11 +1,18 @@
-@import "winduum/src/base/default.css";
+@import "winduum/src/base/defaults.css";
 
 :where(svg) {
   display: block;
-}
 
-:where(use) {
-  stroke-width: 2;
+  &:has([href]) {
+    stroke-width: 2;
+    stroke: currentcolor;
+    fill: none;
+  }
+
+  &:has([href*="-solid"]) {
+    stroke: none;
+    fill: currentcolor;
+  }
 }
 
 :where(img) {

package/src/styles/Utils/theme/+.css

@@ -1 +1 @@
-@import "main.css";
+@import "main.css";

package/src/styles/Utils/theme/main.css

@@ -1,19 +1,33 @@
-@import "winduum/src/base/theme/default-rgb.css";
-@import "winduum/src/base/theme/default.css";
-
-:root {
+:root, :host {
   --font-primary: "Poppins", sans-serif;
   --font-secondary: "Poppins", sans-serif;
-  --color-primary-rgb: 131 205 79;
-  --color-primary-fg-rgb: var(--color-dark-rgb);
-  --color-main-rgb: 17 19 21;
-  --color-dark-rgb: 17 19 21;
-  --color-accent-rgb: var(--color-primary-rgb);
-  --color-current-rgb: var(--color-main-rgb);
-  --color-body-secondary-fg: var(--color-main);
+  --space: srgb;
+  --scheme: dark;
+  --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(--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-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-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;
 
   &.dark {
-    --color-main-rgb: 201 209 217;
-    --color-body-rgb: 14 17 22;
+    --color-main: #c9d1d9;
+    --color-body: #0e1116;
   }
 }

package/src/styles/Utils/utilities.css

@@ -0,0 +1,42 @@
+@import "winduum/src/utilities/common.css";
+@import "winduum/src/utilities/container/default.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";
+
+.container {
+  width: var(--container);
+  margin-inline: auto;
+}
+
+.reveal {
+  opacity: 0;
+  transition-property: var(--transition);
+  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(.in), .no-js & {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.no-scrollbar {
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}

package/src/styles/main.css

@@ -2,8 +2,6 @@
 @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";
@@ -11,9 +9,8 @@
 @import "./Ui/+.css" layer(components);
 @import "./Components/+.css" layer(components);
 @import "./Sections/+.css" layer(components);
-@import "./Utils/tailwind.css";
+@import "./Utils/utilities.css" layer(components);
 @import "tailwindcss/base.css";
 @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/templates/Components/Dialog/Basic.latte

@@ -0,0 +1,24 @@
+<dialog class="c-dialog">
+    <form class="c-dialog-content">
+        <div class="flex justify-between">
+            <h2 class="ui-heading">Info</h2>
+            <button class="ui-btn square ghosted accent-main" type="button" data-action="click->lib-dialog#close">
+                <svg>
+                    <use href="#icon-x-mark"></use>
+                </svg>
+            </button>
+        </div>
+        <div class="py-4">
+            <div class="ui-text">
+                {foreach range(1, 44) as $i}
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget efficitur metus. In bibendum nisi et dui sagittis efficitur.</p>
+                {/foreach}
+            </div>
+        </div>
+        <div class="flex">
+            <div class="col max-md:w-full">
+                <button class="ui-btn" type="button" data-action="click->lib-dialog#close">Continue</button>
+            </div>
+        </div>
+    </form>
+</dialog>

package/src/templates/Components/Dialog/CookieConsent.latte

@@ -0,0 +1,27 @@
+{var $center = true}
+
+<dialog class="c-dialog c-dialog-cookieconsent {if $center}center{/if}" data-controller="c-dialog-cookieconsent">
+    <div class="c-dialog-content">
+        <div class="mt-2 mb-4 md:mb-6">
+            {if true}
+                <div class="ui-image w-40 my-4">
+                    <img src="{placeholder(160, 46)}">
+                </div>
+            {/if}
+            <div class="ui-heading text-3xl md:my-8">Nastavení soukromí a&nbsp;cookies&nbsp;🍪</div>
+        </div>
+        <div class="ui-text">
+            <p>Webové stránky používají k poskytování služeb, personalizaci reklam a analýze návštěvnosti soubory&nbsp;cookies.</p>
+            <p>Následující volbou souhlasíte s našimi <a href="/gdpr">zásady&nbsp;ochrany osobních údajů a cookies</a>. Svá&nbsp;nastavení můžete kdykoli změnit.</p>
+        </div>
+        <div class="flex-center mt-6 md:mt-8 gap-4 {if $center}flex-col{else}max-md:flex-col{/if} px-4">
+            <div class="flex flex-col w-full">
+                <button class="ui-btn lg w-full" data-action="click->c-dialog-cookieconsent#approve">Ano, souhlasím</button>
+            </div>
+            <div class="flex w-full gap-4">
+                <a class="ui-btn ghosted lg accent-main flex-1 px-4" href="/gdpr"><span>Přizpůsobit</span></a>
+                <button class="ui-btn ghosted lg accent-main flex-1 px-4" data-action="click->c-dialog-cookieconsent#decline"><span>Nesouhlasím</span></button>
+            </div>
+        </div>
+    </div>
+</dialog>

package/src/templates/Components/Form/CookieConsent.latte

@@ -0,0 +1,47 @@
+<form class="c-form-cookieconsent flex flex-col gap-8 mt-8" data-controller="c-form-cookieconsent" data-action="submit->c-form-cookieconsent#update:prevent" autocomplete="off">
+    <div class="flex-col">
+        <div class="ui-text">
+            <h3 style="text-align: left;">Nastavení cookies</h3>
+            <p style="text-align: left;">
+                Následujícím nastavením můžete upravit jaké soubory cookie
+                se budou používat na této stránce.
+            </p>
+        </div>
+    </div>
+    <div class="flex-col">
+        <div class="ui-text mb-4">
+            <h5>Nutné cookies</h5>
+            <p>
+                Tyto soubory cookies jsou nezbytně nutné pro váš pohyb po webové stránce a využívání všech funkcí, např. nastavení preferencí soukromí, přihlašování nebo vyplňování formulářů. Bez těchto cookies by nebylo možné řádně poskytovat služby požadované při používání naší stránky. Nezbytně nutné cookies nevyžadují souhlas uživatele dle příslušných právních předpisů. Můžete si také nakonfigurovat webový prohlížeč a nezbytně nutné soubory cookies zablokovat, ovšem následně se může stát, že nebudete moci používat všechny funkce stránky tak, jak byste chtěli.
+            </p>
+        </div>
+        <label class="ui-switch">
+            <input type="checkbox" value="decline" checked disabled>
+        </label>
+    </div>
+    <div class="flex-col">
+        <div class="ui-text mb-4">
+            <h5>Statistické soubory cookies</h5>
+            <p>
+                Tyto soubory cookie nám umožňují počítat návštěvy a zdroje návštěvnosti, abychom mohli měřit a zlepšovat výkon našich stránek. Pomáhají nám zjistit, které stránky jsou nejoblíbenější a které nejméně, a vidět, jak se návštěvníci na webu pohybují, což nám pomáhá optimalizovat váš zážitek. Všechny informace, které tyto soubory cookie shromažďují, jsou agregované, a proto anonymní. Pokud tyto soubory cookie nepovolíte, nebudeme moci používat vaše údaje tímto způsobem.
+            </p>
+        </div>
+        <label class="ui-switch">
+            <input type="checkbox" value="performance">
+        </label>
+    </div>
+    <div class="flex-col">
+        <div class="ui-text mb-4">
+            <h5>Reklamní soubory cookies</h5>
+            <p>
+                Tyto soubory cookies (zvané také cílené nebo reklamní cookies) se používají k zobrazování reklam na stránkách třetích stran, které by více odpovídaly vaší osobě a vašim zájmům. Používají se také k omezení počtu shlédnutí reklam a měření účinností reklamních kampaní.
+            </p>
+        </div>
+        <label class="ui-switch">
+            <input type="checkbox" value="marketing">
+        </label>
+    </div>
+    <div class="flex-col items-start">
+        <button class="ui-btn">Uložit předvolby</button>
+    </div>
+</form>