@newlogic-digital/ui 3.0.1 → 3.1.0

package/src/styles/Ui/Btn.css

@@ -1,15 +1,21 @@
 .ui-btn {
-  --ui-btn-width: 2.375rem;
+  --ui-btn-width: auto;
+  --ui-btn-height: 2.375rem;
   --ui-btn-py: 0.375rem;
   --ui-btn-px: 1rem;
   --ui-btn-size: 0.875rem;
+  --ui-btn-radius: var(--radius);
   --ui-btn-weight: var(--font-medium);
-  --ui-btn-bg: var(--color-primary);
-  --ui-btn-color: var(--color-light);
+  --ui-btn-bg-opacity: var(--tw-bg-opacity, 1);
+  --ui-btn-text-opacity: var(--tw-text-opacity, 1);
+  --ui-btn-bg: rgb(var(--color-accent) / var(--ui-btn-bg-opacity));
+  --ui-btn-color: rgb(var(--color-light) / var(--ui-btn-text-opacity));
   --ui-btn-hover-opacity: 0.2;
+  --ui-btn-outline-width: 2px;
   --ui-btn-outline-opacity: 0.5;
   --ui-btn-icon-size: 1.125rem;
-  --ui-btn-icon-offset: calc((var(--ui-btn-py) / 1)  * -1);
+  --ui-btn-icon-offset: calc((var(--ui-btn-py) / 1) * -1);
+
   display: inline-flex;
   align-items: center;
   text-align: center;
@@ -19,39 +25,52 @@
   position: relative;
   z-index: 1;
   white-space: nowrap;
+  flex-shrink: 0;
   font-size: var(--ui-btn-size);
   font-weight: var(--ui-btn-weight);
-  height: var(--ui-btn-width);
+  width: var(--ui-btn-width);
+  height: var(--ui-btn-height);
   padding: var(--ui-btn-py) var(--ui-btn-px);
-  border-radius: var(--radius);
+  border-radius: var(--ui-btn-radius);
   transition: var(--transition-opacity), var(--transition-background);
-  background-color: rgb(var(--ui-btn-bg));
-  color: rgb(var(--ui-btn-color));
+  background-color: var(--ui-btn-bg);
+  color: var(--ui-btn-color);
+
+  @nest .dark &.bg-default {
+    --ui-btn-color: rgb(var(--color-dark));
+  }
 
-  @nest .dark .bg-default& {
-    --ui-btn-color: var(--color-dark);
+  &:--theme-light {
+    --ui-btn-color: rgb(var(--color-light) / var(--tw-text-opacity, 1));
   }
 
-  &:before {
+  &:--theme-dark {
+    --ui-btn-color: rgb(var(--color-dark) / var(--tw-text-opacity, 1));
+  }
+
+  &::before {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     content: "";
-    background-color: currentColor;
+    background-color: var(--ui-btn-color);
     z-index: -1;
     opacity: 0;
     transition: var(--transition-opacity);
 
-    @nest .no-touch :hover&, [data-state="active"]& {
+    @nest .no-touch :is(:hover, :focus)&, :is(:--state-active)& {
       opacity: var(--ui-btn-hover-opacity);
     }
   }
 
-  & > span {
-    &[class^="icon"] {
-      font-size: var(--ui-btn-icon-size);
-    }
+  & > svg {
+    width: 1em;
+    height: 1em;
+  }
+
+  & > [class^="icon"] {
+    font-size: var(--ui-btn-icon-size);
 
     &.icon-l {
       &:not([class*="mr-"]) {
@@ -73,62 +92,64 @@
   &[disabled] {
     pointer-events: none;
 
-    &:before {
+    &::before {
       opacity: 0.5;
     }
   }
 
-  &[data-type*="outline"] {
-    --ui-btn-bg: transparent;
-    --ui-btn-color: var(--color-primary);
-    --ui-btn-hover-opacity: 0.05;
+  &:--type-outline {
+    --ui-btn-color: currentColor;
+    --ui-btn-hover-opacity: 0.1;
+
+    background-color: transparent;
+
+    &::before {
+      background-color: var(--ui-btn-bg);
+    }
 
-    &:after {
+    &::after {
       position: absolute;
       inset: 0;
       width: 100%;
       height: 100%;
       content: "";
       background-color: transparent;
-      border: 1px solid currentColor;
+      border: var(--ui-btn-outline-width) solid var(--ui-btn-bg);
       box-sizing: border-box;
       opacity: var(--ui-btn-outline-opacity);
-      border-radius: var(--radius);
+      border-radius: var(--ui-btn-radius);
     }
   }
 
-  &[data-type^="square"], &[data-type^="circle"] {
+  &:--type-square, &:--type-circle {
     --ui-btn-py: var(--ui-btn-py);
-    width: var(--ui-btn-width);
+    --ui-btn-width: var(--ui-btn-height);
   }
 
-  &[data-type^="circle"] {
+  &:--type-circle {
     border-radius: 50%;
   }
 
-  &[data-size="lg"] {
+  &:--size-lg {
     --ui-btn-icon-size: 1.5rem;
-    --ui-btn-width: 3rem;
+    --ui-btn-height: 3rem;
     --ui-btn-px: 1.25rem;
   }
 
-  &[data-state="loading"] {
+  &:--state-loading {
     pointer-events: none;
+    color: var(--ui-btn-bg);
 
-    & > span {
-      opacity: 0;
-    }
-
-    &:before {
+    &::before {
       z-index: 1;
       width: 1rem;
       height: 1rem;
       content: "";
       background-color: transparent;
-      border: 2px solid currentColor;
+      border: 2px solid var(--ui-btn-color);
       border-right-color: transparent;
       border-radius: 50%;
-      animation: load 0.45s infinite linear;
+      animation: spin 0.45s infinite linear;
       position: absolute;
       margin-left: -0.625rem;
       margin-top: -0.625rem;
@@ -138,17 +159,17 @@
     }
   }
 
-  @media (--media-400) {
-    &[data-type*="m:square"], &[data-type*="m:circle"] {
+  @media (--media-m) {
+    &:--type-square-m, &:--type-circle-m {
       --ui-btn-py: var(--ui-btn-py);
-      width: var(--ui-btn-width);
+      --ui-btn-width: var(--ui-btn-height);
 
-      & > span {
+      & > * {
         margin: 0 !important;
       }
     }
 
-    &[data-type*="m:circle"] {
+    &:--type-circle-m {
       border-radius: 50%;
     }
   }
@@ -158,24 +179,30 @@
   display: flex;
 
   & .ui-btn {
-    &:not(:first-of-type) {
-      box-shadow: -1px 0 rgba(var(--ui-btn-color),var(--ui-btn-hover-opacity));
+    &:not(:last-of-type) {
+      &, &::after {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
 
-      &, &:after {
+    &:not(:first-of-type) {
+      &, &::after {
         border-top-left-radius: 0;
         border-bottom-left-radius: 0;
       }
 
-      &:after {
+      &::after {
         border-left: 0;
       }
-    }
 
-    &:not(:last-of-type) {
-      &, &:after {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
+      &, &:--theme-light {
+        box-shadow: -1px 0 rgb(var(--color-light) / var(--ui-btn-hover-opacity));
+      }
+
+      &:--theme-dark {
+        box-shadow: -1px 0 rgb(var(--color-dark) / var(--ui-btn-hover-opacity));
       }
     }
   }
-}
+}

package/src/styles/Ui/Checkbox.css

@@ -1,50 +1,74 @@
 .ui-checkbox, .ui-radio {
   --ui-checkbox-width: 1.25rem;
   --ui-checkbox-size: 0.875rem;
-  --ui-checkbox-bg: var(--color-background);
   --ui-checkbox-bg-opacity: 0.1;
-  --ui-checkbox-border-color: var(--color-default);
+  --ui-checkbox-bg-raw: var(--color-background);
   --ui-checkbox-border-opacity: 0.3;
-  --ui-checkbox-checked-bg: var(--color-primary);
-  --ui-checkbox-checked-fg: var(--color-light);
+  --ui-checkbox-border-color-raw: var(--color-current);
+  --ui-checkbox-checked-bg: rgb(var(--ui-checkbox-checked-bg-raw));
+  --ui-checkbox-checked-bg-raw: var(--color-accent);
+  --ui-checkbox-checked-fg: rgb(var(--color-light));
+  --ui-checkbox-color: currentColor;
+  --ui-checkbox-radius: 0.375rem;
+  --ui-checkbox-icon: var(--icon-check);
+  --ui-checkbox-icon-size: 1.125rem;
+
+  transition: var(--transition-color);
   display: inline-flex;
   align-self: flex-start;
   position: relative;
   user-select: none;
   font-size: var(--ui-checkbox-size);
   z-index: 1;
+  color: var(--ui-checkbox-color);
 
   @nest .text-light & {
-    --ui-checkbox-border-color: var(--color-light);
+    --ui-checkbox-border-color-raw: var(--color-light);
+  }
+
+  &:--theme-light {
+    --ui-checkbox-checked-fg: rgb(var(--color-light));
+  }
+
+  &:--theme-dark {
+    --ui-checkbox-checked-fg: rgb(var(--color-dark));
+  }
+
+  &:--state-invalid {
+    --ui-checkbox-border-color-raw: var(--color-error);
+    --ui-checkbox-color: rgb(var(--color-error));
   }
 
   & input {
     position: relative;
     display: inline-flex;
-    -moz-appearance: none;
     appearance: none;
     height: var(--ui-checkbox-width);
     width: var(--ui-checkbox-width);
-    background-color: rgba(var(--ui-checkbox-bg), var(--ui-checkbox-bg-opacity));
-    border: 1px solid rgba(var(--ui-checkbox-border-color), var(--ui-checkbox-border-opacity));
-    border-radius: var(--radius);
+    background-color: rgb(var(--ui-checkbox-bg-raw) / var(--ui-checkbox-bg-opacity));
+    border: 1px solid rgb(var(--ui-checkbox-border-color-raw) / var(--ui-checkbox-border-opacity));
+    border-radius: var(--ui-checkbox-radius);
     cursor: pointer;
     outline: none;
     justify-content: center;
     align-items: center;
-    transition: var(--transition-border), var(--transition-background);
+    transition: var(--transition-border), var(--transition-background), var(--transition-shadow);
 
-    &:checked {
-      --ui-checkbox-border-opacity: 0;
-
-      &:not([class*="checked:bg"]) {
-        background-color: rgb(var(--ui-checkbox-checked-bg));
-      }
-
-      &:before {
-        opacity: 1;
-        transform: scale(1);
-      }
+    &::before {
+      line-height: var(--ui-checkbox-icon-size);
+      font-size: var(--ui-checkbox-icon-size);
+      text-indent: 0;
+      display: block;
+      transition: var(--transition-color), var(--transition-opacity), var(--transition-transform);
+      color: var(--ui-checkbox-checked-fg);
+      content: "";
+      background-color: currentColor;
+      mask: var(--ui-checkbox-icon);
+      opacity: 0;
+      transform: scale(0);
+      will-change: transform;
+      width: 1em;
+      height: 1em;
     }
 
     &:not(:only-child) {
@@ -56,31 +80,46 @@
       }
     }
 
-    &:before {
-      @mixin iconfont;
-      line-height: 1.125rem;
-      font-size: 1.125rem;
-      text-indent: 0;
-      display: block;
-      transition: var(--transition-color), var(--transition-opacity), var(--transition-transform);
-      color: rgb(var(--ui-checkbox-checked-fg));
-      content: var(--icon-checkbox-filled);
-      opacity: 0;
-      transform: scale(0);
-      will-change: transform;
+    &:focus, &:hover {
+      --ui-checkbox-bg-raw: var(--ui-checkbox-checked-bg-raw);
+      --ui-checkbox-border-color-raw: var(--ui-checkbox-checked-bg-raw);
+      --ui-checkbox-border-opacity: 0.75;
+      --ui-checkbox-bg-opacity: 0.1;
+    }
+
+    &:checked {
+      --ui-checkbox-border-opacity: 0;
+
+      background-color: var(--ui-checkbox-checked-bg);
+
+      &:focus {
+        box-shadow:
+          0 0 0 0 rgb(var(--color-current)),
+          0 0 0 3px rgb(var(--ui-checkbox-checked-bg-raw) / 0.15),
+          0 1px 2px 0 rgb(var(--color-current) / 0.05);
+
+        @nest .dark & {
+          box-shadow:
+            0 0 0 0 rgb(var(--color-current)),
+            0 0 0 3px rgb(var(--ui-checkbox-checked-bg-raw) / 0.3),
+            0 1px 2px 0 rgb(var(--color-current) / 0.05);
+        }
+      }
+
+      &::before {
+        opacity: 1;
+        transform: scale(1);
+      }
     }
   }
 
   & a {
     text-decoration: underline;
-    transition: var(--transition-color);
+    transition: var(--transition-opacity);
+    color: rgb(var(--color-accent));
 
-    &:not([class*="text-"]) {
-      color: rgb(var(--color-primary));
-
-      @nest .no-touch &[href]:hover {
-        color: rgba(var(--color-primary), 0.8);
-      }
+    @nest .no-touch &[href]:hover {
+      opacity: 0.8;
     }
   }
-}
+}

package/src/styles/Ui/Dropdown.css

@@ -0,0 +1,5 @@
+.ui-dropdown {
+  padding: 1.25rem 1.5rem;
+  overflow: hidden;
+  max-width: 22rem;
+}

package/src/styles/Ui/Heading.css

@@ -1,21 +1,21 @@
 .ui-heading {
+  --ui-heading-size: 1.5rem;
+  --ui-heading-size-line: 0.5rem;
+
   display: block;
   font-weight: var(--font-bold);
-  line-height: 1.15;
-
-  &:not([data-size]) {
-    font-size: 1.5rem;
-  }
+  font-size: var(--ui-heading-size);
+  line-height: calc(var(--ui-heading-size) + var(--ui-heading-size-line));
 
-  &[data-size^="lg"] {
-    font-size: 1.625rem;
+  &:--size-lg {
+    --ui-heading-size: 1.75rem;
 
-    @media (--media-min-768) {
-      font-size: 2rem;
+    @media (--media-t) {
+      --ui-heading-size: 2rem;
     }
   }
 
-  &[data-size^="sm"] {
-    font-size: 1.125rem;
+  &:--size-sm {
+    --ui-heading-size: 1.25rem;
   }
-}
+}

package/src/styles/Ui/Icon.css

@@ -1,14 +1,33 @@
 .ui-icon {
+  --ui-icon-hover-opacity: 0.7;
+  --ui-icon-size: 1.25rem;
+
   display: inline-flex;
-  font-size: 1.25rem;
+  position: relative;
+  font-size: var(--ui-icon-size);
+
+  &, & svg {
+    width: 1em;
+    height: 1em;
+  }
 
-  &[class*="icon-"], & [class*="icon-"] {
-    &:before {
-      transition: var(--transition-opacity);
+  & > * {
+    transition: var(--transition-opacity);
 
-      @nest .no-touch [href]:hover&, .no-touch button:hover& {
-        opacity: 0.8;
-      }
+    @nest .no-touch :is([href]:hover, button:hover)& {
+      opacity: var(--ui-icon-hover-opacity);
     }
   }
-}
+}
+
+.ui-icon-text {
+  --ui-icon-hover-opacity: 0.7;
+
+  display: inline-flex;
+  align-items: center;
+  transition: var(--transition-opacity), var(--transition-color);
+
+  @nest .no-touch &:is([href]:hover, button:hover) {
+    opacity: var(--ui-icon-hover-opacity);
+  }
+}

package/src/styles/Ui/Image.css

@@ -0,0 +1,23 @@
+.ui-image {
+  position: relative;
+
+  &:not(.bg-transparent) {
+    background-color: rgb(var(--color-background-100));
+  }
+
+  &::before {
+    content: "";
+    display: block;
+  }
+
+  & > * {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  @nest picture& > img {
+    object-fit: cover;
+  }
+}