@newlogic-digital/ui 3.0.4 → 3.1.0

package/src/styles/Ui/Notice.css

@@ -1,15 +1,20 @@
 .ui-notice {
+  --color-current: var(--color-accent);
+  --ui-notice-bg: rgb(var(--color-accent));
+  --ui-notice-outline-opacity: 0.1;
   --ui-notice-size: 0.875rem;
   --ui-notice-py: 1.25rem;
   --ui-notice-px: 1.5rem;
+
   position: relative;
   z-index: 1;
   padding: var(--ui-notice-py) var(--ui-notice-px);
   font-size: var(--ui-notice-size);
   border-radius: var(--radius);
+  color: rgb(var(--color-current));
 
   &:not([class*="bg-"]) {
-    &:before, &:after {
+    &::before, &::after {
       position: absolute;
       inset: 0;
       width: 100%;
@@ -19,31 +24,24 @@
       content: "";
     }
 
-    &:before {
-      background-color: currentColor;
-      opacity: 0.1;
+    &::before {
+      background-color: var(--ui-notice-bg);
+      opacity: var(--ui-notice-outline-opacity);
     }
 
-    &:after {
-      box-shadow: inset 0 0 0 1px currentColor;
-      opacity: 0.1;
+    &::after {
+      box-shadow: inset 0 0 0 1px var(--ui-notice-bg);
+      opacity: var(--ui-notice-outline-opacity);
     }
   }
 
-  & hr {
-    opacity: 0.1;
-  }
-
   & a {
     text-decoration: underline;
     transition: var(--transition-opacity);
-
-    &:not([class*="text-"]) {
-      color: currentColor !important;
-    }
+    color: currentColor !important;
 
     @nest .no-touch &[href]:hover {
       opacity: 0.8;
     }
   }
-}
+}

package/src/styles/Ui/Progress.css

@@ -3,29 +3,27 @@
   --ui-progress-radius: 9999px;
   --ui-progress-bg: var(--color-background-200);
   --ui-progress-bg-opacity: 1;
-  -moz-appearance: none;
+
   appearance: none;
   box-shadow: none;
   border: 0;
   height: var(--ui-progress-height);
   border-radius: var(--ui-progress-radius);
-  background-color: rgba(var(--ui-progress-bg), var(--ui-progress-bg-opacity));
-  color: currentColor;
+  background-color: rgb(var(--ui-progress-bg) / var(--ui-progress-bg-opacity));
+  color: rgb(var(--color-accent));
   width: 100%;
 
   @nest .bg-dark & {
-    background-color: rgba(var(--color-light), 0.1);
-
-    &::-webkit-progress-bar {
-      background-color: rgba(var(--color-light), 0.1);
+    &, &::-webkit-progress-bar {
+      background-color: rgb(var(--color-light) / 0.1);
     }
   }
 
-  &[data-size="sm"] {
+  &:--size-sm {
     --ui-progress-height: 0.5rem;
   }
 
-  &[data-size="lg"] {
+  &:--size-lg {
     --ui-progress-height: 1.5rem;
   }
 
@@ -44,24 +42,15 @@
   }
 
   &:indeterminate {
-    animation: 1.5s ease 0s forwards infinite moveIndeterminate;
-    background-image: linear-gradient(to right, currentColor 30%, rgba(var(--ui-progress-bg), var(--ui-progress-bg-opacity)) 30%);
+    animation: 1.5s linear 0s forwards infinite move-indeterminate;
+    background-image: linear-gradient(to right, currentColor 30%, rgb(var(--ui-progress-bg) / var(--ui-progress-bg-opacity)) 30%);
     background-position: top left;
     background-repeat: no-repeat;
     background-size: 150% 150%;
-    border-radius: 999px;
+    border-radius: var(--ui-progress-radius);
 
     &::-moz-progress-bar {
       background-color: transparent;
     }
   }
 }
-
-@keyframes moveIndeterminate {
-  from {
-    background-position: 200% 0
-  }
-  to {
-    background-position: -200% 0
-  }
-}

package/src/styles/Ui/Radio.css

@@ -1,9 +1,4 @@
 .ui-radio {
-  & input {
-    border-radius: 50%;
-    
-    &:before {
-      content: var(--icon-radio-filled);
-    }
-  }
-}
+  --ui-checkbox-icon: var(--icon-radio);
+  --ui-checkbox-radius: 50%;
+}

package/src/styles/Ui/Select.css

@@ -1,54 +1,37 @@
 .ui-select {
-  --ui-select-height: 3rem;
-  --ui-select-py: 0.25rem;
-  --ui-select-px: 1rem;
-  --ui-select-size: 0.875rem;
-  --ui-select-weight: var(--font-medium);
-  --ui-select-border-color: var(--color-default);
-  --ui-select-border-opacity: 0.15;
-
-  position: relative;
-  display: block;
-  font-size: var(--ui-select-size);
   cursor: pointer;
+  user-select: none;
 
-  &:after {
-    @mixin iconfont;
+  &:--state-active {
+    & label {
+      transform: translateY(calc(var(--ui-input-size) / 1.4 * -1)) scale(0.8);
+    }
+  }
+
+  &::after {
+    width: 1em;
+    height: 1em;
+    background-color: currentColor;
+    content: "";
     position: absolute;
     z-index: 1;
     font-size: 1.5rem;
-    right: 0.75rem;
-    top: 50%;
+    right: calc(var(--ui-input-height) / 4);
+    top: calc(var(--ui-input-height) / 2);
     margin-top: -0.75rem;
     will-change: transform;
     transition: transform 200ms;
-    content: var(--icon-angle-down);
+    mask: var(--icon-angle-down);
     pointer-events: none;
 
-    @nest [data-state*="invalid"]& {
-      color: rgb(var(--color-error));
-    }
-
-    @nest [data-state*="focus"]& {
-      @nest .no-touch & {
+    @nest :--state-focus& {
+      @nest .no-touch:not(.macintel) & {
         transform: rotate(180deg);
       }
     }
   }
 
   & select {
-    width: 100%;
-    transition: var(--transition-border);
-    box-shadow: none;
-    line-height: normal;
-    background-color: transparent;
-    font-size: inherit;
-    height: var(--ui-select-height);
-    font-weight: var(--ui-select-weight);
-    border-radius: var(--radius);
-    padding: calc(var(--ui-select-height) / 2.5) var(--ui-select-px) var(--ui-select-py);
-    color: inherit;
-    border: 1px solid rgba(var(--ui-select-border-color), var(--ui-select-border-opacity));
     position: relative;
     z-index: 1;
     text-overflow: ellipsis;
@@ -56,30 +39,31 @@
     -webkit-appearance: none;
     -moz-appearance: none;
 
-    @nest :not([data-state*="placeholder"])& {
-      &[data-placeholder] {
-        padding-top: var(--ui-select-py);
-      }
-    }
-
-    &[disabled] {
-      cursor: default;
-      background-color: rgb(var(--color-background-100));
-    }
-
     @nest [tabindex]& {
       pointer-events: none;
     }
 
-    @nest [data-state*="focus"]& {
-      border-color: rgba(var(--color-default), calc(var(--ui-select-border-opacity) * 2));
-      border-bottom-color: rgba(var(--color-default), var(--ui-select-border-opacity));
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
+    @nest [tabindex]:--state-focus& {
+      --ui-input-border-opacity: 1;
+      --ui-input-border-color: var(--color-accent);
+
+      box-shadow:
+        0 0 0 0 rgb(var(--color-current)),
+        0 0 0 3px rgb(var(--color-accent) / 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(--color-accent) / 0.3),
+          0 1px 2px 0 rgb(var(--color-current) / 0.05);
+      }
     }
 
-    @nest [data-state*="invalid"]& {
-      border-color: rgb(var(--color-error));
+    @nest :not(:--state-active)& {
+      &:not([data-placeholder]) {
+        font-size: 0;
+      }
     }
 
     &:focus {
@@ -87,76 +71,53 @@
     }
 
     &:-moz-focusring {
-      color: transparent;
+      color: inherit;
       text-shadow: 0 0 0 #000;
     }
-
-    &:not([data-placeholder]) {
-      @nest :not([data-state*="active"])& {
-        font-size: 0;
-      }
-    }
   }
 
   & option {
-    font-size: var(--ui-select-size);
-
-    &:not(:checked) {
-      color: inherit;
-    }
+    font-size: var(--ui-input-size);
+    color: rgb(var(--color-default));
+    background-color: rgb(var(--color-background));
 
     &[disabled] {
       opacity: 0.5;
     }
   }
 
-  &[data-state*="active"] {
-    & label {
-      transform: translateY(calc(var(--ui-select-size) / 1.4  * -1)) scale(0.8);
+  & > [class^="icon-"] {
+    &.icon-r {
+      right: calc(var(--ui-input-px) + var(--ui-input-icon-size) + var(--ui-input-icon-spacing));
     }
   }
 
-  & label {
-    display: block;
-    position: absolute;
-    z-index: 1;
-    pointer-events: none;
-    transition: transform .4s cubic-bezier(.25, .8, .25, 1), var(--transition-color);
-    transform-origin: 0 50%;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    transform: perspective(100px);
-    will-change: transform;
-    font-weight: var(--ui-select-weight);
-    left: var(--ui-select-px);
-    right: var(--ui-select-px);
-    top: calc(var(--ui-select-height) / 2);
-    line-height: var(--ui-select-size);
-    margin-top: calc(var(--ui-select-size) / 2  * -1);
-
-    @nest html.ie & {
-      display: none;
-    }
-  }
+  & > div[aria-hidden] {
+    --color-current: var(--color-default);
 
-  & > div {
-    border-radius: var(--radius);
+    will-change: transform;
+    border-radius: var(--ui-input-radius);
     position: absolute;
     background-color: rgb(var(--color-background));
-    z-index: 10;
+    z-index: 100;
     left: 0;
     right: 0;
     top: 100%;
-    border: 1px solid rgba(var(--color-default), 0.3);
-    border-top: 0;
+    margin-top: 0.5rem;
+    border: 1px solid rgb(var(--color-current) / 0.075);
     transform: scaleY(0);
     opacity: 0;
     transition: var(--transition-opacity), var(--transition-transform);
+    transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
+    transition-duration: 200ms;
+    backface-visibility: hidden;
     transform-origin: center top;
     user-select: none;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
+    max-height: 12rem;
+    overflow-y: auto;
+    box-shadow: 0 0.15em 1.5em 0 rgb(var(--color-dark) / 0.05), 0 0 1em 0 rgb(var(--color-dark) / 0.05);
+    padding: 0.375rem;
+    color: rgb(var(--color-current));
 
     @nest [data-state*="focus"]& {
       opacity: 1;
@@ -164,25 +125,15 @@
     }
 
     & [data-option] {
-      padding: var(--ui-select-px);
+      padding: calc(var(--ui-input-px) / 1.5) var(--ui-input-px);
       cursor: pointer;
       transition: var(--transition-background);
-      font-size: var(--ui-select-size);
+      font-size: var(--ui-input-size);
+      border-radius: var(--radius);
 
-      @nest .no-touch &:hover, &:focus {
-        background-color: rgba(var(--color-default), 0.05);
+      @nest .no-touch &:is(:hover, :focus) {
+        background-color: rgb(var(--color-accent) / 0.1);
       }
     }
   }
 }
-
-@media screen and (min-width: 0 \0) and (min-resolution: +72dpi) {
-  .ui-select:after {
-    content: "";
-  }
-
-  select {
-    padding: 0.5rem !important;
-    min-width: 4rem;
-  }
-}

package/src/styles/Ui/Switch.css

@@ -0,0 +1,70 @@
+.ui-switch {
+  --ui-switch-width: 3rem;
+  --ui-switch-height: 1.5rem;
+  --ui-switch-padding: 0.375rem;
+  --ui-swtich-bg: var(--color-dark);
+  --ui-swtich-bg-opacity: 0.2;
+  --ui-swtich-fg: var(--color-accent);
+  --ui-switch-radius: 999px;
+
+  @nest .dark & {
+    --ui-swtich-bg: var(--color-background-300);
+  }
+
+  display: inline-flex;
+  color: rgb(var(--ui-swtich-fg));
+  position: relative;
+
+  &:--size-sm {
+    --ui-switch-width: 2.5rem;
+    --ui-switch-height: 1.25rem;
+  }
+
+  &:--size-lg {
+    --ui-switch-width: 4rem;
+    --ui-switch-height: 2rem;
+  }
+
+  & input {
+    width: var(--ui-switch-width);
+    height: var(--ui-switch-height);
+    display: block;
+    position: relative;
+    border-radius: var(--ui-switch-radius);
+    background-color: rgb(var(--ui-swtich-bg));
+    transition: var(--transition-background);
+    cursor: pointer;
+    appearance: none;
+    outline: none;
+    color: inherit;
+
+    &[disabled] {
+      opacity: 0.8;
+      pointer-events: none;
+    }
+
+    &::before {
+      width: calc(var(--ui-switch-height) - var(--ui-switch-padding));
+      height: calc(var(--ui-switch-height) - var(--ui-switch-padding));
+      background-color: rgb(var(--color-light));
+      border-radius: var(--ui-switch-radius);
+      position: absolute;
+      left: var(--ui-switch-height);
+      top: 50%;
+      content: "";
+      display: block;
+      margin-left: calc((var(--ui-switch-height) - var(--ui-switch-padding) + var(--ui-switch-padding) / 2) * -1);
+      transition: left var(--transition), var(--transition-background);
+      transform: translateY(-50%);
+    }
+
+    &:checked {
+      background-color: currentColor;
+
+      &::before {
+        background-color: rgb(var(--color-light));
+        left: 100%;
+      }
+    }
+  }
+}