@newlogic-digital/ui 3.3.0 → 3.5.0

package/src/styles/Libraries/Drawer.css

@@ -5,10 +5,7 @@
   width: 100%;
   height: 100%;
   position: fixed;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  inset: 0;
   overflow: hidden;
   display: flex;
   flex-direction: row;
@@ -25,7 +22,7 @@
     scrollbar-width: none;
     -ms-overflow-style: none;
 
-    &:--state-active {
+    &.active {
       scroll-snap-type: x proximity;
     }
 
@@ -37,40 +34,31 @@
 
   &::before {
     position: fixed;
-    top: 0;
-    bottom: 0;
-    right: 0;
-    left: 0;
+    inset: 0;
     z-index: -1;
-    background-color: rgb(var(--color-dark) / 0.6);
+    background-color: rgb(var(--color-dark-rgb) / 50%);
     content: "";
     opacity: var(--lib-drawer-opacity);
+  }
 
-    @nest .is-opacity& {
-      transition: var(--transition-opacity);
-    }
+  &::after {
+    content: "";
+    display: block;
+    min-width: 100vw;
+    scroll-snap-align: end;
+  }
 
-    @nest :not(:--state-active)& {
-      opacity: 0;
+  &.is-opacity {
+    &::before {
+      transition: var(--transition-opacity);
     }
   }
 
-  &:not(:--state-active) {
+  &:not(.active) {
     pointer-events: none;
 
-    & > div {
-      transform: translateX(-28.125rem);
-
-      @media (--media-m) {
-        transform: translateX(-22.5rem);
-      }
+    &::before {
+      opacity: 0;
     }
   }
-
-  &::after {
-    content: "";
-    display: block;
-    min-width: 100vw;
-    scroll-snap-align: end;
-  }
 }

package/src/styles/Libraries/Hint.css

@@ -1,34 +1,10 @@
 [class*="lib-hint-"] {
-  --lib-hint-bg: var(--color-dark);
-  --lib-hint-fg: var(--color-light);
+  --color-accent: var(--color-body);
+  --color-current: var(--color-body-fg);
+  --lib-hint-font-size: 0.75rem;
+  --lib-hint-font-weight: var(--font-normal);
 
   position: relative;
-  text-align: center;
-
-  @nest .dark & {
-    --lib-hint-bg: var(--color-background-200);
-  }
-
-  &.lib-hint-light {
-    --lib-hint-bg: var(--color-light);
-    --lib-hint-fg: var(--color-dark);
-  }
-
-  &.lib-hint-error {
-    --lib-hint-bg: var(--color-error);
-  }
-
-  &.lib-hint-warning {
-    --lib-hint-bg: var(--color-warning);
-  }
-
-  &.lib-hint-info {
-    --lib-hint-bg: var(--color-info);
-  }
-
-  &.lib-hint-success {
-    --lib-hint-bg: var(--color-success);
-  }
 
   &::before, &::after {
     position: absolute;
@@ -36,16 +12,10 @@
     opacity: 0;
     z-index: var(--z-10);
     pointer-events: none;
-    transition: var(--transition) ease;
+    transition: var(--transition-duration) ease;
     transition-delay: 0ms;
     will-change: transform;
     backface-visibility: hidden;
-
-    @nest :is(:hover, :focus-visible)& {
-      visibility: visible;
-      opacity: 1;
-      transition-delay: 100ms;
-    }
   }
 
   &::before {
@@ -54,61 +24,22 @@
     background-color: transparent;
     border: 0.375rem solid transparent;
     z-index: var(--z-20);
-
-    @nest [class*="lib-hint-top"]& {
-      border-top-color: rgb(var(--lib-hint-bg));
-    }
-
-    @nest [class*="lib-hint-bottom"]& {
-      border-bottom-color: rgb(var(--lib-hint-bg));
-    }
-
-    @nest [class*="lib-hint-left"]& {
-      border-left-color: rgb(var(--lib-hint-bg));
-    }
-
-    @nest [class*="lib-hint-right"]& {
-      border-right-color: rgb(var(--lib-hint-bg));
-    }
   }
 
   &::after {
-    border-radius: var(--radius);
-    background-color: rgb(var(--lib-hint-bg));
-    color: rgb(var(--lib-hint-fg));
+    border-radius: var(--rounded);
+    background-color: var(--color-accent);
+    color: var(--color-current);
     padding: 0.75rem;
-    font-size: 0.875rem;
+    font-size: var(--lib-hint-font-size);
     font-family: inherit;
     line-height: 0.875rem;
     white-space: nowrap;
-    box-shadow: 0.25rem 0.25rem 0.5rem rgb(var(--lib-hint-bg) / 0.15);
-    font-weight: var(--font-normal);
-
-    @nest .lib-hint-light& {
-      box-shadow: 0.25rem 0.25rem 0.5rem rgb(var(--color-dark) / 0.15);
-    }
-
-    @nest [aria-label]& {
-      content: attr(aria-label);
-    }
-
-    @nest :is(.lib-hint-sm, .lib-hint-md, .lib-hint-lg)& {
-      white-space: normal;
-      line-height: 1.5;
-      word-wrap: break-word;
-    }
-
-    @nest .lib-hint-sm& {
-      width: 5rem;
-    }
-
-    @nest .lib-hint-md& {
-      width: 10rem;
-    }
-
-    @nest .lib-hint-lg& {
-      width: 15rem;
-    }
+    box-shadow:
+      0 0.15rem 1.5rem 0 rgb(var(--color-main-rgb) / 10%),
+      0 0 1rem 0 rgb(var(--color-main-rgb) / 10%);
+    font-weight: var(--lib-hint-font-weight);
+    text-align: center;
   }
 
   &.lib-hint-top {
@@ -120,16 +51,18 @@
     &::before {
       left: calc(50% - 0.375rem);
       margin-bottom: -0.6875rem;
-
-      @nest :is(:hover, :focus-visible)& {
-        transform: translateY(-0.5rem);
-      }
     }
 
     &::after {
       transform: translateX(-50%);
+    }
 
-      @nest :is(:hover, :focus-visible)& {
+    &:is(:hover, :focus-visible) {
+      &::before {
+        transform: translateY(-0.5rem);
+      }
+
+      &::after {
         transform: translateX(-50%) translateY(-0.5rem);
       }
     }
@@ -144,16 +77,18 @@
     &::before {
       left: calc(50% - 0.375rem);
       margin-top: -0.6875rem;
-
-      @nest :hover& {
-        transform: translateY(0.5rem);
-      }
     }
 
     &::after {
       transform: translateX(-50%);
+    }
+
+    &:is(:hover, :focus-visible) {
+      &::before {
+        transform: translateY(0.5rem);
+      }
 
-      @nest :hover& {
+      &::after {
         transform: translateX(-50%) translateY(0.5rem);
       }
     }
@@ -163,10 +98,6 @@
     &::before, &::after {
       left: 100%;
       bottom: 50%;
-
-      @nest :hover& {
-        transform: translateX(0.5rem);
-      }
     }
 
     &::before {
@@ -177,16 +108,18 @@
     &::after {
       margin-bottom: -1.1875rem;
     }
+
+    &:is(:hover, :focus-visible) {
+      &::before, &::after {
+        transform: translateX(0.5rem);
+      }
+    }
   }
 
   &.lib-hint-left {
     &::before, &::after {
       right: 100%;
       bottom: 50%;
-
-      @nest :hover& {
-        transform: translateX(-0.5rem);
-      }
     }
 
     &::before {
@@ -197,5 +130,57 @@
     &::after {
       margin-bottom: -1.1875rem;
     }
+
+    &:is(:hover, :focus-visible) {
+      &::before, &::after {
+        transform: translateX(-0.5rem);
+      }
+    }
+  }
+
+  &[aria-label]::after {
+    content: attr(aria-label);
+  }
+
+  &[class*="lib-hint-top"]::before {
+    border-top-color: var(--color-accent);
+  }
+
+  &[class*="lib-hint-bottom"]::before {
+    border-bottom-color: var(--color-accent);
+  }
+
+  &[class*="lib-hint-left"]::before {
+    border-left-color: var(--color-accent);
+  }
+
+  &[class*="lib-hint-right"]::before {
+    border-right-color: var(--color-accent);
+  }
+
+  &:is(.lib-hint-sm, .lib-hint-md, .lib-hint-lg)::after {
+    white-space: normal;
+    line-height: 1.5;
+    word-wrap: break-word;
+  }
+
+  &.lib-hint-sm::after {
+    width: 5rem;
+  }
+
+  &.lib-hint-md::after {
+    width: 10rem;
+  }
+
+  &.lib-hint-lg::after {
+    width: 15rem;
+  }
+
+  &:is(:hover, :focus-visible) {
+    &::before, &::after {
+      visibility: visible;
+      opacity: 1;
+      transition-delay: 100ms;
+    }
   }
 }

package/src/styles/Libraries/Pickr.css

@@ -0,0 +1,13 @@
+.pcr-app {
+  border-radius: var(--rounded);
+  overflow: hidden;
+
+  .dark & {
+    background: var(--color-body-secondary);
+
+    .pcr-interaction input {
+      background: var(--color-body-tertiary);
+      box-shadow: none;
+    }
+  }
+}

package/src/styles/Libraries/Ripple.css

@@ -1,29 +1 @@
-[data-action*="lib#ripple"] {
-  --lib-ripple-bg: rgb(var(--color-background));
-
-  position: relative;
-  user-select: none;
-}
-
-.lib-ripple {
-  position: absolute;
-  background: var(--lib-ripple-bg);
-  border-radius: 50%;
-  transform: scale(0);
-  opacity: 0.4;
-  pointer-events: none;
-
-  @nest body > & {
-    position: fixed;
-  }
-
-  @nest html.ie & {
-    z-index: -1;
-  }
-
-  &.animation {
-    animation-name: ripple;
-    animation-duration: 1s;
-    animation-fill-mode: both;
-  }
-}
+@import "winduum/src/libraries/ripple.css";

package/src/styles/Libraries/Tippy.css

@@ -3,40 +3,16 @@
 }
 
 .tippy-box {
-  --lib-tippy-bg: var(--color-dark);
-
-  &[data-theme~="light-border"] {
-    background-color: rgb(var(--color-background));
-    background-clip: padding-box;
-    border: 1px solid rgb(0 8 16 / 0.05);
-    color: rgb(var(--color-default));
-    box-shadow: 0 3px 14px -0.5px rgb(0 8 16 / 0.08);
-    border-radius: var(--radius);
-    left: 0.1875rem;
-
-    @nest .dark & {
-      --color-background: var(--color-background-200);
-    }
-
-    & .tippy-svg-arrow {
-      fill: rgb(var(--color-background));
-
-      &::after {
-        opacity: 0.3;
-      }
-    }
-  }
+  background-color: transparent;
+  color: inherit;
+  box-shadow: none;
+  font-size: inherit;
+  line-height: inherit;
 
   &[data-placement="bottom-end"] {
     &[data-animation="scale"] {
       transform-origin: top right;
     }
-
-    & .tippy-svg-arrow {
-      left: auto !important;
-      right: 0.5rem;
-      transform: none !important;
-    }
   }
 
   &[data-placement="bottom-start"] {
@@ -46,42 +22,52 @@
   }
 }
 
-[data-controller*="lib-tippy"]:not([data-lib-tippy^="dropdown"]) {
-  cursor: default;
+.tippy-svg-arrow {
+  fill: var(--color-body);
 }
 
 [data-tippy-root] {
   &.is-full {
-    @media (--media-m) {
+    @media not all and (--media-md) {
       inset: 0 !important;
       width: 100% !important;
       height: 100% !important;
       position: fixed !important;
       transform: none !important;
+      visibility: visible !important;
       pointer-events: none;
       max-width: 100%;
+      background-color: color-mix(in srgb, var(--color-dark) 50%, transparent);
+      transition: var(--transition-opacity);
+      opacity: 0;
+
+      &:has(.tippy-content[data-state="visible"]) {
+        opacity: 1;
+      }
 
       & .tippy-content {
-        padding-bottom: env(safe-area-inset-bottom);
         pointer-events: auto;
       }
 
       & .tippy-box {
-        max-width: 100% !important;
         position: absolute;
-        border: 0 !important;
         bottom: 0;
-        left: 0 !important;
+        left: 0;
         right: 0;
-        border-radius: 2rem 2rem 0 0 !important;
-        transition-timing-function: ease !important;
-        transition-duration: 300ms !important;
+        transition-timing-function: ease;
+        transition-duration: 300ms;
 
         &[data-state="hidden"] {
           transform: translateY(100%);
           opacity: 0;
         }
       }
+
+      .c-dropdown {
+        max-width: 100%;
+        border-bottom-right-radius: 0;
+        border-bottom-left-radius: 0;
+      }
     }
   }
 }

package/src/styles/Ui/+.css

@@ -1,16 +1,17 @@
 @import "Badge.css";
 @import "Btn.css";
-@import "Checkbox.css";
+@import "Check.css";
+@import "Control.css";
+@import "ControlSelect.css";
+@import "Dot.css";
+@import "Group.css";
 @import "Heading.css";
-@import "Icon.css";
 @import "Image.css";
-@import "Input.css";
+@import "Info.css";
 @import "Label.css";
 @import "Link.css";
 @import "Notice.css";
 @import "Progress.css";
-@import "Radio.css";
-@import "Select.css";
 @import "Switch.css";
 @import "Text.css";
 @import "Title.css";

package/src/styles/Ui/Badge.css

@@ -1,82 +1,7 @@
-.ui-badge {
-  --ui-badge-width: auto;
-  --ui-badge-height: 1.5rem;
-  --ui-badge-py: 0.375rem;
-  --ui-badge-px: 0.5rem;
-  --ui-badge-size: 0.75rem;
-  --ui-badge-radius: var(--radius);
-  --ui-badge-weight: var(--font-normal);
-  --ui-badge-bg-opacity: var(--tw-bg-opacity, 1);
-  --ui-badge-text-opacity: var(--tw-text-opacity, 1);
-  --ui-badge-bg: rgb(var(--color-accent) / var(--ui-badge-bg-opacity));
-  --ui-badge-color: rgb(var(--color-light) / var(--ui-badge-text-opacity));
-  --ui-badge-hover-opacity: 0.8;
-
-  display: inline-flex;
-  align-self: flex-start;
-  align-items: center;
-  text-align: center;
-  justify-content: center;
-  flex-shrink: 0;
-  font-size: var(--ui-badge-size);
-  font-weight: var(--ui-badge-weight);
-  padding: var(--ui-badge-py) var(--ui-badge-px);
-  border-radius: var(--ui-badge-radius);
-  background-color: var(--ui-badge-bg);
-  color: var(--ui-badge-color);
-  width: var(--ui-badge-width);
-  height: var(--ui-badge-height);
-  line-height: var(--ui-badge-size);
-  transition: var(--transition-opacity);
-
-  @nest .no-touch &:is([href], button):is(:hover, :focus-visible) {
-    opacity: var(--ui-badge-hover-opacity);
-  }
-
-  & svg {
-    width: 1em;
-    height: 1em;
-  }
-
-  &:--type-square, &:--type-circle {
-    --ui-badge-px: var(--ui-badge-py);
-    --ui-badge-width: var(--ui-badge-height);
-  }
-
-  &:--type-circle {
-    border-radius: 50%;
-  }
-
-  &:--size-sm {
-    --ui-badge-height: 1.25rem;
-  }
-
-  &:--size-md {
-    --ui-badge-height: 1.75rem;
-    --ui-badge-py: 0.5rem;
-  }
-}
-
-.ui-badge-group {
-  display: flex;
-
-  & .ui-badge {
-    &:not(:first-of-type) {
-      &, &::after {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-
-      &::after {
-        border-left: 0;
-      }
-    }
-
-    &:not(:last-of-type) {
-      &, &::after {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-    }
-  }
-}
+@import "winduum/src/ui/badge/default.css";
+@import "winduum/src/ui/badge/sm.css";
+@import "winduum/src/ui/badge/lg.css";
+@import "winduum/src/ui/badge/bordered.css";
+@import "winduum/src/ui/badge/muted.css";
+@import "winduum/src/ui/badge/square.css";
+@import "winduum/src/ui/badge/circle.css";