@newlogic-digital/ui 3.2.0 → 3.4.2

package/src/styles/Ui/Input.css

@@ -1,4 +1,4 @@
-.ui-input, .ui-select {
+:is(.ui-input, .ui-select) {
   --ui-input-height: 3rem;
   --ui-input-height-textarea: 8rem;
   --ui-input-py: 0.75rem;
@@ -50,16 +50,16 @@
     margin-top: calc(var(--ui-input-size) / 2 * -1);
     order: -1;
 
-    @nest [data-has~="icon-l"]& {
+    @nest :has(.icon-l)& {
       left: calc(var(--ui-input-px) + var(--ui-input-icon-size) + calc(var(--ui-input-px) / 1.75));
     }
 
-    @nest [data-has~="icon-r"]& {
+    @nest :has(.icon-r)& {
       right: calc(var(--ui-input-px) + var(--ui-input-icon-size) + calc(var(--ui-input-px) / 1.75));
     }
   }
 
-  & > :is(input, textarea, select, .input) {
+  & > :where(input, textarea, select, .input) {
     width: 100%;
     transition: var(--transition-border), var(--transition-shadow);
     box-shadow: none;
@@ -69,10 +69,15 @@
     height: var(--ui-input-height);
     font-weight: var(--ui-input-weight);
     border-radius: var(--ui-input-radius);
-    padding: calc(var(--ui-input-py) * 1.75) var(--ui-input-px) calc(var(--ui-input-py) * 0.5);
+    padding: var(--ui-input-py) var(--ui-input-px);
     color: inherit;
     border: 1px solid rgb(var(--ui-input-border-color) / var(--ui-input-border-opacity));
 
+    @nest :has(label)& {
+      padding-top: calc(var(--ui-input-py) * 1.75);
+      padding-bottom: calc(var(--ui-input-py) * 0.5);
+    }
+
     &[disabled] {
       cursor: default;
       background-color: rgb(var(--color-background-100));
@@ -123,20 +128,13 @@
       }
     }
 
-    @nest [data-has~="icon-l"]& {
+    @nest :has(.icon-l)& {
       padding-left: calc(var(--ui-input-px) + var(--ui-input-icon-size) + calc(var(--ui-input-px) / 1.75));
     }
 
-    @nest [data-has~="icon-r"]&, :--state-invalid& {
+    @nest :has(.icon-r)&, :--state-invalid& {
       padding-right: calc(var(--ui-input-px) + var(--ui-input-icon-size) + calc(var(--ui-input-px) / 1.75));
     }
-
-    @nest :not(:--state-placeholder)& {
-      &:is([placeholder], [data-placeholder]) {
-        padding-top: var(--ui-input-py);
-        padding-bottom: var(--ui-input-py);
-      }
-    }
   }
 
   & > input {
@@ -203,7 +201,7 @@
       }
 
       @nest :not(:--state-active)& {
-        &:not([placeholder]):not(:focus) {
+        &:not([placeholder], :focus) {
           font-size: 0;
         }
       }
@@ -221,7 +219,7 @@
     min-height: var(--ui-input-height-textarea);
   }
 
-  & > input, & > textarea {
+  & > :where(input, textarea) {
     background-clip: padding-box;
     cursor: text;
 
@@ -229,7 +227,7 @@
       box-shadow: none;
     }
 
-    @nest :is(:--state-active, :--state-placeholder)&, &:focus {
+    @nest &:focus, :--state-active&, :has([placeholder] ~ label)& {
       & ~ label {
         transform: translateY(calc(var(--ui-input-size) / 1.4 * -1)) scale(0.8);
       }
@@ -387,7 +385,7 @@
         text-overflow: ellipsis;
         overflow: hidden;
 
-        @media (--media-768) {
+        @media (--media-touch) {
           padding-top: 0.875rem;
           padding-bottom: 0.875rem;
         }
@@ -405,6 +403,55 @@
   }
 }
 
+:is(.ui-input, .ui-select, .ui-input-group) {
+  --ui-input-validity-size: 0.875rem;
+  --ui-input-validity-offset: 0.375rem;
+
+  & em {
+    display: block;
+    font-size: var(--ui-input-validity-size);
+    color: rgb(var(--color-error));
+    font-style: normal;
+    margin-top: var(--ui-input-validity-offset);
+  }
+}
+
+.ui-input-group {
+  display: flex;
+
+  & .ui-btn {
+    height: auto;
+
+    & + .ui-input {
+      z-index: 1;
+    }
+  }
+
+  & > * {
+    & + :is(.ui-input, .ui-select) {
+      margin-left: -1px;
+
+      & :is(input, select):not(:focus) {
+        border-left-color: transparent;
+      }
+    }
+
+    &:not(:first-child) {
+      &, & :is(input, select) {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+    }
+
+    &:not(:last-child) {
+      &, & :is(input, select) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+}
+
 .pcr-app {
   border-radius: var(--radius);
   overflow: hidden;

package/src/styles/Ui/Label.css

@@ -4,8 +4,8 @@
   --ui-label-spacing: 0.05rem;
 
   display: block;
-  font-size: var(--ui-title-size);
-  line-height: calc(var(--ui-title-size) + var(--ui-title-size-line));
+  font-size: var(--ui-label-size);
+  line-height: calc(var(--ui-label-size-line) + var(--ui-label-size-line));
   font-weight: var(--font-medium);
 
   & ~ :is([class^="ui-"]:not(&), [class^="c-"]) {

package/src/styles/Ui/Link.css

@@ -1,7 +1,8 @@
 .ui-link {
   --ui-link-size: 0.875rem;
-  --ui-link-weight: var(--font-medium);
+  --ui-link-weight: var(--font-normal);
   --ui-link-hover-opacity: 0.8;
+  --ui-link-hover-color: rgb(var(--color-accent));
   --ui-link-underline-opacity: 0.5;
 
   display: inline-flex;
@@ -9,24 +10,30 @@
   cursor: pointer;
   font-size: var(--ui-link-size);
   font-weight: var(--ui-link-weight);
-  transition: var(--transition-opacity);
+  transition: var(--transition-opacity), var(--transition-color);
   position: relative;
   white-space: nowrap;
+  line-height: 1.5;
 
-  @nest .no-touch &:hover {
+  &:--size-sm {
+    --ui-link-size: 0.75rem;
+  }
+
+  @nest &:focus-visible, .no-touch &:is([href], button):hover {
     opacity: var(--ui-link-hover-opacity);
+    color: var(--ui-link-hover-color);
   }
 
-  &::after {
+  &[data-type~="underline"]::after {
     content: "";
     border-bottom: 1px solid currentColor;
     opacity: 0;
     position: absolute;
-    inset: auto 0 0 0;
+    inset: auto 0 0;
     transition: var(--transition-opacity), var(--transition-transform);
     transform: translateY(-0.25rem);
 
-    @nest .no-touch :not([href^="tel:"], [href^="mailto:"]):hover& {
+    @nest .no-touch :not([href^="tel:"], [href^="mailto:"]):is(:hover, :focus-visible)& {
       transform: none;
       opacity: var(--ui-link-underline-opacity);
     }

package/src/styles/Ui/Notice.css

@@ -40,7 +40,7 @@
     transition: var(--transition-opacity);
     color: currentColor !important;
 
-    @nest .no-touch &[href]:hover {
+    @nest .no-touch &[href]:is(:hover, :focus-visible) {
       opacity: 0.8;
     }
   }

package/src/styles/Ui/Select.css

@@ -1,7 +1,4 @@
 .ui-select {
-  cursor: pointer;
-  user-select: none;
-
   &:--state-active {
     & label {
       transform: translateY(calc(var(--ui-input-size) / 1.4 * -1)) scale(0.8);
@@ -35,9 +32,10 @@
     position: relative;
     z-index: 1;
     text-overflow: ellipsis;
-    cursor: pointer;
     -webkit-appearance: none;
     -moz-appearance: none;
+    cursor: pointer;
+    user-select: none;
 
     @nest [tabindex]& {
       pointer-events: none;
@@ -131,7 +129,7 @@
       font-size: var(--ui-input-size);
       border-radius: var(--radius);
 
-      @nest .no-touch &:is(:hover, :focus) {
+      @nest .no-touch &:is(:hover, :focus-visible) {
         background-color: rgb(var(--color-accent) / 0.1);
       }
     }

package/src/styles/Ui/Text.css

@@ -1,11 +1,20 @@
 .ui-text {
-  --ui-text-size: 0.9375rem;
+  --ui-text-size: 0.875rem;
+  --ui-text-size-line: 0.75rem;
   --ui-text-weight: var(--font-normal);
   --ui-text-weight-bold: var(--font-semibold);
 
   font-weight: var(--ui-text-weight);
   font-size: var(--ui-text-size);
-  line-height: calc(var(--ui-text-size) + 0.75rem);
+  line-height: calc(var(--ui-text-size) + var(--ui-text-size-line));
+
+  &:--size-base {
+    --ui-text-size: 1rem;
+  }
+
+  &:--size-lg {
+    --ui-text-size: 1.125rem;
+  }
 
   & a {
     text-decoration: underline;
@@ -14,7 +23,7 @@
     &:not([class*="text-"]) {
       color: rgb(var(--color-accent));
 
-      @nest .no-touch &[href]:hover {
+      @nest .no-touch &[href]:is(:hover, :focus-visible) {
         opacity: 0.8;
       }
     }
@@ -65,7 +74,7 @@
 
   & p {
     line-height: inherit;
-    margin: 0;
+    margin: 0 0 0.25rem;
 
     &:empty {
       line-height: 1rem;
@@ -157,6 +166,10 @@
     margin: 0 0 1.5rem;
     padding: 0 0 0 1rem;
 
+    &:not([type]) {
+      list-style: decimal;
+    }
+
     & li {
       padding-left: 0.5rem;
 
@@ -183,6 +196,7 @@
       &::before {
         width: 0.25rem;
         height: 0.25rem;
+        box-sizing: content-box;
         position: absolute;
         content: "";
         border: 1px solid rgb(var(--color-accent));

package/src/styles/Ui/Title.css

@@ -1,12 +1,13 @@
 .ui-title {
   --ui-title-size: 0.875rem;
-  --ui-title-size-line: 0.5rem;
+  --ui-title-size-line: 0.25rem;
   --ui-title-spacing: 0.05rem;
+  --ui-title-weight: var(--font-semibold);
 
   display: block;
   font-size: var(--ui-title-size);
   line-height: calc(var(--ui-title-size) + var(--ui-title-size-line));
-  font-weight: var(--font-semibold);
+  font-weight: var(--ui-title-weight);
 
   &[class*="uppercase"] {
     letter-spacing: var(--ui-title-spacing);

package/src/styles/Utils/+.css

@@ -1,3 +1,4 @@
+@import "breakpoints.css";
 @import "default.css";
 @import "icons.css";
 @import "keyframes.css";

package/src/styles/Utils/breakpoints.css

@@ -0,0 +1,9 @@
+@custom-media --media-m (max-width: 47.9375em);
+@custom-media --media-t (min-width: 48em);
+@custom-media --media-d (min-width: 60em);
+@custom-media --media-w (min-width: 76em);
+@custom-media --media-hd (min-width: 85em);
+@custom-media --media-mhd (min-width: 88em);
+@custom-media --media-fhd (min-width: 100em);
+@custom-media --media-touch (max-width: 59.9375em);
+@custom-media --media-touch-only (max-width: 59.9375em) and (min-width: 47.9375em);

package/src/styles/Utils/default.css

@@ -3,132 +3,29 @@
   background-color: rgb(var(--color-accent));
 }
 
-ul, ol {
-  padding: 0;
-  margin: 0;
-}
-
-ul {
-  list-style: none;
-}
-
-blockquote,
-dl,
-dd,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-hr,
-figure,
-p,
-pre {
-  margin: 0;
-}
-
-img,
-svg,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
-  display: block;
-  vertical-align: middle;
+:where(*) {
+  outline: none;
+  -webkit-tap-highlight-color: rgb(255 255 255 / 0);
 }
 
-a, area, button, input, label, select, summary, textarea, [tabindex] {
-  touch-action: manipulation;
+:where([hidden]) {
+  display: none;
 }
 
-hr {
-  width: 100%;
-  height: 1px;
+:where(svg) {
+  stroke-width: 1.5;
   display: block;
-  border: 0;
-  color: inherit;
-  border-top: 1px solid rgb(var(--color-current));
-  opacity: 0.2;
-  margin: 1rem 0;
-  padding: 0;
 }
 
-picture {
+:where(hr) {
   display: block;
+  border-top: 2px solid rgb(var(--color-current) / var(--tw-border-opacity, 0.15));
+  border-radius: var(--rounded);
 }
 
-fieldset {
-  border: 0;
-  margin: 0;
-  padding: 0;
-}
-
-button {
-  appearance: none;
-  background: transparent;
-  border: 0;
+:where(ol, ul) {
   padding: 0;
-  cursor: pointer;
-  color: inherit;
-  font-size: 1rem;
-}
-
-textarea {
-  resize: vertical;
-}
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-svg[class^="icon"] {
-  width: 1em;
-  height: 1em;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-
-  &:active,
-  &:hover {
-    outline-width: 0;
-  }
-}
-
-* {
-  box-sizing: border-box;
-  outline: none;
-  -webkit-tap-highlight-color: rgb(255 255 255 / 0);
-}
-
-*,
-::before,
-::after {
-  border-width: 0;
-  border-style: solid;
-  border-color: rgb(var(--color-current) / var(--tw-text-opacity, 1));
-}
-
-[class*="aspect-"] {
-  &::before {
-    content: "";
-    display: block;
-  }
-}
-
-[hidden] {
-  display: none;
-}
-
-@supports (-moz-appearance: none) {
-  select {
-    text-indent: -0.125rem;
-  }
+  margin: 0;
 }
 
 .grecaptcha-badge {

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

@@ -1,2 +1,3 @@
 @import "base.css";
 @import "gutters.css";
+@import "utilities.css";

package/src/styles/Utils/tailwind/base.css

@@ -1,15 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer utilities {
-  .current {
-    background-color: currentColor;
-    color: currentColor;
-  }
-
-  .animation {
-    animation-duration: 0.5s;
-    animation-fill-mode: both;
-  }
-}

package/src/styles/Utils/tailwind/utilities.css

@@ -0,0 +1,48 @@
+@layer utilities {
+  .current {
+    background-color: currentColor;
+    color: currentColor;
+  }
+
+  .animation {
+    animation-duration: 0.5s;
+    animation-fill-mode: both;
+  }
+
+  .container {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: var(--container-width);
+    padding-left: var(--container-padding);
+    padding-right: var(--container-padding);
+
+    &:--size-sm {
+      --container: var(--container-width-sm);
+    }
+  }
+
+  .slider {
+    margin-left: calc(var(--container-padding-calc) * -1);
+    margin-right: calc(var(--container-padding-calc) * -1);
+    padding-left: var(--container-padding-calc);
+    scroll-padding-left: var(--container-padding-calc);
+    scroll-padding-right: var(--container-padding-calc);
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+    user-select: none;
+    scrollbar-width: none !important;
+    -ms-overflow-style: none;
+    display: flex;
+
+    & > * {
+      flex: 0 0 auto;
+      scroll-snap-align: start;
+
+      &:last-child {
+        box-sizing: content-box;
+        border-right: var(--container-padding-calc) solid transparent;
+      }
+    }
+  }
+}

package/src/styles/Utils/vars.css

@@ -7,10 +7,12 @@
   --color-instagram: 193, 53, 132;
   --color-twitter: 29, 161, 242;
   --color-facebook: 24, 119, 242;
+  --color-apple: 0 0 0;
   --radius: 0.5rem;
   --container-width: 75rem;
   --container-width-sm: 50rem;
   --container-padding: 5vw;
+  --container-padding-calc: max(calc(50vw - (var(--container-width) / 2) + var(--container-padding)), var(--container-padding));
   --font-bold: 700;
   --font-semibold: 600;
   --font-medium: 500;
@@ -22,51 +24,38 @@
   --z-30: 30;
   --z-40: 40;
   --z-50: 50;
-  --transition: 0.3s;
-  --transition-color: color var(--transition) ease 0s;
-  --transition-background: background var(--transition) ease 0s;
-  --transition-opacity: opacity var(--transition) ease 0s;
-  --transition-transform: transform var(--transition) ease 0s;
-  --transition-border: border-color var(--transition) ease 0s;
-  --transition-shadow: box-shadow var(--transition) ease 0s;
+  --rounded: 0.75rem;
+  --rounded-xs: 0.5rem;
+  --rounded-sm: 0.875rem;
+  --rounded-base: 1rem;
+  --rounded-md: 1.125rem;
+  --rounded-lg: 1.5rem;
+  --rounded-xl: 3rem;
+  --rounded-2xl: 6rem;
+  --rounded-3xl: 8rem;
+  --rounded-full: 9999px;
+  --spacing-xs: 0.5rem;
+  --spacing-sm: 0.875rem;
+  --spacing-base: 1rem;
+  --spacing-md: 1.125rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 3rem;
+  --spacing-2xl: 6rem;
+  --spacing-3xl: 8rem;
+  --spacing-section: 3rem;
+  --transition: 0.15s;
+  --transition-color: color var(--transition) ease;
+  --transition-background: background var(--transition) ease;
+  --transition-opacity: opacity var(--transition) ease;
+  --transition-transform: transform var(--transition) ease;
+  --transition-border: border-color var(--transition) ease;
+  --transition-shadow: box-shadow var(--transition) ease;
 
   @media (--media-t) {
     --container-padding: 3rem;
   }
 }
 
-/* @custom-media --media */
-@custom-media --media-1600 (max-width: 114.9375em);
-@custom-media --media-1408 (max-width: 99.9375em);
-@custom-media --media-1360 (max-width: 87.9375em);
-@custom-media --media-1216 (max-width: 84.9375em);
-@custom-media --media-1024 (max-width: 75.9375em);
-@custom-media --media-960 (max-width: 63.9375em);
-@custom-media --media-768 (max-width: 59.9375em);
-@custom-media --media-400 (max-width: 47.9375em);
-@custom-media --media-360 (max-width: 24.9375em);
-@custom-media --media-320 (max-width: 22.4375em);
-@custom-media --media-min-2000 (min-width: 125em);
-@custom-media --media-min-1600 (min-width: 100em);
-@custom-media --media-min-1408 (min-width: 88em);
-@custom-media --media-min-1360 (min-width: 85em);
-@custom-media --media-min-1216 (min-width: 76em);
-@custom-media --media-min-1024 (min-width: 64em);
-@custom-media --media-min-960 (min-width: 60em);
-@custom-media --media-min-768 (min-width: 48em);
-@custom-media --media-min-400 (min-width: 25em);
-@custom-media --media-min-360 (min-width: 22.5em);
-@custom-media --media-min-320 (min-width: 20em);
-@custom-media --media-only-1024 (max-width: 75.9375em) and (min-width: 60em);
-@custom-media --media-only-960 (max-width: 63.9375em) and (min-width: 60em);
-@custom-media --media-only-768 (max-width: 59.9375em) and (min-width: 60em);
-@custom-media --media-m (max-width: 47.9375em);
-@custom-media --media-t (min-width: 48em);
-@custom-media --media-d (min-width: 60em);
-@custom-media --media-w (min-width: 76em);
-@custom-media --media-hd (min-width: 88em);
-@custom-media --media-touch (max-width: 59.9375em);
-
 /* @custom-selector --theme */
 @custom-selector :--theme-dark [data-theme~="dark"];
 @custom-selector :--theme-light [data-theme~="light"];

package/src/styles/Utils/vendor.css

@@ -1 +1,2 @@
-/* empty */
+@import "winduum/src/base/reset.css";
+@import "winduum/src/base/breakpoints.css";

package/src/styles/main.css

@@ -1,6 +1,6 @@
-@import "Utils/normalize.css";
 @import "Utils/vendor.css";
 @import "Utils/theme/main.css";
+@import "Utils/breakpoints.css";
 @import "Utils/vars.css";
 @import "Utils/default.css";
 @import "Utils/icons.css";
@@ -11,5 +11,4 @@
 @import "Sections/+.css";
 @import "Libraries/+.css";
 @import "Utils/print.css";
-@import "Utils/tailwind/base.css";
-@import "Utils/tailwind/gutters.css";
+@import "Utils/tailwind/+.css";