@newlogic-digital/ui 3.0.4 → 3.1.0

package/src/styles/Libraries/Datepicker.css

@@ -1,25 +1,29 @@
 .datepicker-dropdown {
+  --color-current: var(--color-default);
+
   z-index: 9999;
   transition: var(--transition-opacity), var(--transition-transform);
   will-change: transform;
+  color: rgb(var(--color-current));
 
   @nest html:not(.no-pointer-events) & {
     display: block;
   }
 
   & .datepicker-picker {
-    box-shadow: 0 .15em 1.5em 0 rgba(var(--color-dark),0.05), 0 0 1em 0 rgba(var(--color-dark),0.05);
+    box-shadow: 0 0.15em 1.5em 0 rgb(var(--color-dark) / 0.05), 0 0 1em 0 rgb(var(--color-dark) / 0.05);
     overflow: hidden;
     display: block;
+    border-radius: var(--radius);
   }
 
   &.datepicker-orient-top {
     padding-bottom: 0;
     margin-top: -0.75rem;
 
-    &:after, &:before {
+    &::after, &::before {
       top: 100%;
-      left: 1.25rem;
+      left: 1.3125rem;
       border: solid transparent;
       content: "";
       height: 0;
@@ -29,13 +33,13 @@
       margin-top: -1px;
     }
 
-    &:after {
+    &::after {
       border-top-color: #fff;
       border-width: 0.375rem;
       margin-left: -0.375rem;
     }
 
-    &:before {
+    &::before {
       border-top-color: #eee;
       border-width: 0.4375rem;
       margin-left: -0.4375rem;
@@ -50,9 +54,9 @@
     padding-top: 0;
     margin-top: 0.75rem;
 
-    &:after, &:before {
+    &::after, &::before {
       bottom: 100%;
-      left: 1.25rem;
+      left: 1.3125rem;
       border: solid transparent;
       content: "";
       height: 0;
@@ -61,13 +65,13 @@
       pointer-events: none;
     }
 
-    &:after {
+    &::after {
       border-bottom-color: #fff;
       border-width: 0.375rem;
       margin-left: -0.375rem;
     }
 
-    &:before {
+    &::before {
       border-bottom-color: #eee;
       border-width: 0.4375rem;
       margin-left: -0.4375rem;
@@ -88,7 +92,7 @@
   font-size: 0.75rem;
   font-weight: var(--font-semibold);
   text-transform: uppercase;
-  color: rgb(var(--color-primary));
+  color: rgb(var(--color-accent));
 }
 
 .datepicker-cell {
@@ -96,34 +100,57 @@
 }
 
 .datepicker-cell.selected, .datepicker-cell.selected:hover {
-  background-color: rgb(var(--color-primary));
+  background-color: rgb(var(--color-accent));
 }
 
-.datepicker-time {
-  padding: 0.5rem;
+.datepicker-controls {
   display: flex;
   justify-content: center;
   align-items: center;
+  padding: 0.125rem;
 
-  & input {
-    height: 1.875rem;
-    color: rgb(var(--color-default));
-    font-size: 0.875rem;
-    border: 0;
-    max-width: 4.375rem;
+  & .ok-btn {
+    background: rgb(var(--color-accent));
+    color: rgb(var(--color-light)) !important;
+    border-color: rgb(var(--color-accent)) !important;
     font-weight: var(--font-medium);
+  }
+
+  & :is(.button, input) {
+    margin-left: 0.125rem !important;
+    margin-right: 0.125rem !important;
+  }
+
+  & input {
+    color: rgb(var(--color-current));
+    font-size: 0.8125rem;
+    min-width: 4.5rem;
+    max-width: 4.5rem;
+    font-weight: var(--font-normal);
     background-color: transparent;
+    border: 1px solid #dbdbdb;
+    height: 1.6875rem;
+    border-radius: var(--radius) !important;
+    padding: 0 0.1875rem !important;
+
+    @nest .chrome & {
+      padding: 0 0.125rem 0 0.25rem !important;
+      min-width: 3.75rem;
+    }
+
+    @nest .safari & {
+      min-width: 3rem;
+    }
 
-    &.polyfill {
-      max-width: 2.25rem;
+    &::-webkit-calendar-picker-indicator {
+      padding: 0;
+      margin: 0;
     }
   }
 }
 
-.datepicker-footer {
-  background-color: rgb(var(--color-background));
-  box-shadow: none;
-  border-top: 1px solid rgba(var(--color-default), 0.05);
+.datepicker-input.in-edit:active, .datepicker-input.in-edit:focus {
+  box-shadow: inherit;
 }
 
 .button {
@@ -131,22 +158,25 @@
     font-size: 0;
     height: 2.25rem;
 
-    &:before {
-      @mixin iconfont;
+    &::before {
+      width: 1em;
+      height: 1em;
       font-size: 1rem;
       display: block;
+      background-color: currentColor;
+      content: "";
     }
   }
 
   &.prev-btn {
-    &:before {
-      content: var(--icon-chevron-left);
+    &::before {
+      mask: var(--icon-chevron-left);
     }
   }
 
   &.next-btn {
-    &:before {
-      content: var(--icon-chevron-right);
+    &::before {
+      mask: var(--icon-chevron-right);
     }
   }
 
@@ -156,19 +186,35 @@
   }
 }
 
+.datepicker-footer {
+  background-color: rgb(var(--color-background));
+  box-shadow: none;
+  border-top: 1px solid rgb(var(--color-current) / 0.05);
+
+  & .datepicker-controls {
+    & + .datepicker-time {
+      padding-top: 0.25rem;
+    }
+  }
+
+  & .button {
+    border-radius: var(--radius) !important;
+  }
+}
+
 .dark {
-  & .datepicker-picker, & .datepicker-time {
+  & :is(.datepicker-picker, .datepicker-time) {
     background-color: rgb(var(--color-background-100));
   }
 
   & .datepicker-dropdown.datepicker-orient-bottom {
-    &:before, &:after {
+    &::before, &::after {
       border-bottom-color: rgb(var(--color-background-100));
     }
   }
 
   & .datepicker-dropdown.datepicker-orient-top {
-    &:before, &:after {
+    &::before, &::after {
       border-top-color: rgb(var(--color-background-100));
     }
   }
@@ -176,7 +222,7 @@
   & .datepicker-controls .button {
     border-color: transparent;
     background-color: rgb(var(--color-background-100));
-    color: rgb(var(--color-default)) !important;
+    color: rgb(var(--color-current)) !important;
   }
 
   & .datepicker-header .datepicker-controls {
@@ -184,16 +230,16 @@
 
     & .button {
       &:hover {
-        background-color: rgba(var(--color-light), 0.1);
+        background-color: rgb(var(--color-light) / 0.1);
       }
     }
   }
 
   & .datepicker-cell:not(.disabled):hover {
-    background-color: rgba(var(--color-light), 0.1);
+    background-color: rgb(var(--color-light) / 0.1);
   }
 
   & .datepicker-cell.focused:not(.selected) {
-    background-color: rgba(var(--color-light), 0.2);
+    background-color: rgb(var(--color-light) / 0.2);
   }
-}
+}

package/src/styles/Libraries/Dialog.css

@@ -1,18 +1,19 @@
 .lib-dialog {
   --lib-dialog-bg: var(--color-dark);
   --lib-dialog-opacity: 0.8;
-  animation: 0.3s ease 0s backwards 1 fadeIn;
+
+  animation: 0.3s ease 0s backwards 1 fade-in;
   inset: 0;
   z-index: var(--z-30);
   position: fixed;
   display: none;
   overflow: auto;
   -webkit-overflow-scrolling: touch;
-  background-color: rgba(var(--lib-dialog-bg), var(--lib-dialog-opacity));
+  background-color: rgb(var(--lib-dialog-bg) / var(--lib-dialog-opacity));
   overscroll-behavior: contain;
 
-  &[data-state="hiding"] {
-    animation: 0.3s ease 0s forwards 1 fadeOut;
+  &:--state-hiding {
+    animation: 0.3s ease 0s forwards 1 fade-out;
     pointer-events: none;
   }
-}
+}

package/src/styles/Libraries/Drawer.css

@@ -1,5 +1,6 @@
 .lib-drawer {
-  --drawerOpacity: 0;
+  --lib-drawer-opacity: 0;
+
   z-index: var(--z-30);
   width: 100%;
   height: 100%;
@@ -12,6 +13,10 @@
   display: flex;
   flex-direction: row;
 
+  & > div {
+    scroll-snap-align: end;
+  }
+
   &[data-action*="scroll"] {
     overflow-x: auto;
     overflow-y: hidden;
@@ -20,7 +25,7 @@
     scrollbar-width: none;
     -ms-overflow-style: none;
 
-    &[data-state="active"] {
+    &:--state-active {
       scroll-snap-type: x mandatory;
     }
 
@@ -30,46 +35,42 @@
     }
   }
 
-  &:before {
+  &::before {
     position: fixed;
     top: 0;
     bottom: 0;
     right: 0;
     left: 0;
     z-index: -1;
-    background-color: rgba(var(--color-default), 0.6);
+    background-color: rgb(var(--color-dark) / 0.6);
     content: "";
-    opacity: var(--drawerOpacity);
+    opacity: var(--lib-drawer-opacity);
 
     @nest .is-opacity& {
       transition: var(--transition-opacity);
     }
 
-    @nest :not([data-state="active"])& {
+    @nest :not(:--state-active)& {
       opacity: 0;
     }
   }
 
-  &:not([data-state="active"]) {
+  &:not(:--state-active) {
     pointer-events: none;
 
     & > div {
       transform: translateX(-28.125rem);
 
-      @media (--media-400) {
+      @media (--media-m) {
         transform: translateX(-22.5rem);
       }
     }
   }
 
-  &:after {
+  &::after {
     content: "";
     display: block;
     min-width: 100vw;
     scroll-snap-align: end;
   }
-
-  & > div {
-    scroll-snap-align: end;
-  }
-}
+}

package/src/styles/Libraries/Hint.css

@@ -1,7 +1,13 @@
 [class*="lib-hint-"] {
   --lib-hint-bg: var(--color-dark);
   --lib-hint-fg: var(--color-light);
+
   position: relative;
+  text-align: center;
+
+  @nest .dark & {
+    --lib-hint-bg: var(--color-background-200);
+  }
 
   &.lib-hint-light {
     --lib-hint-bg: var(--color-light);
@@ -24,7 +30,7 @@
     --lib-hint-bg: var(--color-success);
   }
 
-  &:before, &:after {
+  &::before, &::after {
     position: absolute;
     visibility: hidden;
     opacity: 0;
@@ -35,15 +41,15 @@
     will-change: transform;
     backface-visibility: hidden;
 
-    @nest :hover& {
+    @nest :is(:hover, :focus)& {
       visibility: visible;
       opacity: 1;
       transition-delay: 100ms;
     }
   }
 
-  &:before {
-    content: '';
+  &::before {
+    content: "";
     position: absolute;
     background-color: transparent;
     border: 0.375rem solid transparent;
@@ -66,7 +72,7 @@
     }
   }
 
-  &:after {
+  &::after {
     border-radius: var(--radius);
     background-color: rgb(var(--lib-hint-bg));
     color: rgb(var(--lib-hint-fg));
@@ -75,17 +81,17 @@
     font-family: inherit;
     line-height: 0.875rem;
     white-space: nowrap;
-    box-shadow: 0.25rem 0.25rem 0.5rem rgba(var(--lib-hint-bg), 0.15);
+    box-shadow: 0.25rem 0.25rem 0.5rem rgb(var(--lib-hint-bg) / 0.15);
 
     @nest .lib-hint-light& {
-      box-shadow: 0.25rem 0.25rem 0.5rem rgba(var(--color-dark), 0.15);
+      box-shadow: 0.25rem 0.25rem 0.5rem rgb(var(--color-dark) / 0.15);
     }
 
     @nest [aria-label]& {
       content: attr(aria-label);
     }
 
-    @nest .lib-hint-sm&, .lib-hint-md&, .lib-hint-lg& {
+    @nest :is(.lib-hint-sm, .lib-hint-md, .lib-hint-lg)& {
       white-space: normal;
       line-height: 1.5;
       word-wrap: break-word;
@@ -105,36 +111,36 @@
   }
 
   &.lib-hint-top {
-    &:before, &:after {
+    &::before, &::after {
       bottom: 100%;
       left: 50%;
     }
 
-    &:before {
+    &::before {
       left: calc(50% - 0.375rem);
       margin-bottom: -0.6875rem;
 
-      @nest :hover& {
+      @nest :is(:hover, :focus)& {
         transform: translateY(-0.5rem);
       }
     }
 
-    &:after {
+    &::after {
       transform: translateX(-50%);
 
-      @nest :hover& {
+      @nest :is(:hover, :focus)& {
         transform: translateX(-50%) translateY(-0.5rem);
       }
     }
   }
 
   &.lib-hint-bottom {
-    &:before, &:after {
+    &::before, &::after {
       top: 100%;
       left: 50%;
     }
 
-    &:before {
+    &::before {
       left: calc(50% - 0.375rem);
       margin-top: -0.6875rem;
 
@@ -143,7 +149,7 @@
       }
     }
 
-    &:after {
+    &::after {
       transform: translateX(-50%);
 
       @nest :hover& {
@@ -153,7 +159,7 @@
   }
 
   &.lib-hint-right {
-    &:before, &:after {
+    &::before, &::after {
       left: 100%;
       bottom: 50%;
 
@@ -162,18 +168,18 @@
       }
     }
 
-    &:before {
+    &::before {
       margin-left: -0.6875rem;
       margin-bottom: -0.375rem;
     }
 
-    &:after {
+    &::after {
       margin-bottom: -1.1875rem;
     }
   }
 
   &.lib-hint-left {
-    &:before, &:after {
+    &::before, &::after {
       right: 100%;
       bottom: 50%;
 
@@ -182,13 +188,13 @@
       }
     }
 
-    &:before {
+    &::before {
       margin-right: -0.6875rem;
       margin-bottom: -0.375rem;
     }
 
-    &:after {
+    &::after {
       margin-bottom: -1.1875rem;
     }
   }
-}
+}

package/src/styles/Libraries/Lazysizes.css

@@ -2,7 +2,8 @@
 .lazyloading {
   opacity: 0;
 }
+
 .lazyloaded {
   opacity: 1;
   transition: var(--transition-opacity);
-}
+}

package/src/styles/Libraries/NativeSlider.css

@@ -6,6 +6,20 @@
   scrollbar-width: none !important;
   -ms-overflow-style: none;
 
+  & > * {
+    flex: 0 0 auto;
+    scroll-snap-align: start;
+
+    @nest .is-fade& {
+      opacity: 0;
+      transition: var(--transition-opacity);
+
+      &[data-state="active"] {
+        opacity: 1;
+      }
+    }
+  }
+
   &::-webkit-scrollbar {
     display: none !important;
   }
@@ -19,33 +33,20 @@
     &, & * {
       cursor: grabbing;
     }
+
     & a {
       pointer-events: none;
     }
   }
-
-  & > div, & > picture {
-    flex: 0 0 auto;
-    scroll-snap-align: start;
-
-    @nest .is-fade& {
-      opacity: 0;
-      transition: var(--transition-opacity);
-
-      &[data-state="active"] {
-        opacity: 1;
-      }
-    }
-  }
 }
 
 [data-lib-ns-nav-item] {
   width: 0.75rem;
   height: 0.75rem;
-  border: 0.125rem solid rgb(var(--color-default));
+  border: 0.125rem solid rgb(var(--color-current));
   border-radius: 50%;
 
   &[data-state*="active"] {
-    background-color: rgb(var(--color-default));
+    background-color: rgb(var(--color-current));
   }
-}
+}

package/src/styles/Libraries/Ripple.css

@@ -1,15 +1,16 @@
-[data-lib-ripple] {
+[data-action*="lib#ripple"] {
+  --lib-ripple-bg: rgb(var(--color-background));
+
   position: relative;
   user-select: none;
 }
 
-.lib-ripple-inner {
+.lib-ripple {
   position: absolute;
-  background: rgb(var(--color-background));
+  background: var(--lib-ripple-bg);
   border-radius: 50%;
   transform: scale(0);
   opacity: 0.4;
-  animation-duration: 1s;
   pointer-events: none;
 
   @nest body > & {
@@ -22,5 +23,7 @@
 
   &.animation {
     animation-name: ripple;
+    animation-duration: 1s;
+    animation-fill-mode: both;
   }
-}
+}

package/src/styles/Libraries/Tabs.css

@@ -7,13 +7,13 @@
 
   & [data-lib-tabs-area] {
     & > [data-lib-tabs-item] {
-      animation: 0.3s ease 0s backwards 1 fadeOut;
+      animation: 0.3s ease 0s backwards 1 fade-out;
       display: none;
 
-      &[data-state="active"] {
-        animation: 0.3s ease 0s backwards 1 fadeIn;
+      &:--state-active {
+        animation: 0.3s ease 0s backwards 1 fade-in;
         display: block;
       }
     }
   }
-}
+}