@newlogic-digital/ui 3.0.1 → 3.1.0

package/src/styles/Ui/{Wsw.css → Text.css}

@@ -1,19 +1,18 @@
-.ui-wsw {
-  --ui-wsw-size: 0.9375rem;
-  --ui-wsw-weight: var(--font-normal);
-  --ui-wsw-weight-bold: var(--font-semibold);
-  --ui-wsw-marker-color: var(--color-primary);
-  --ui-wsw-link-color: var(--color-primary);
-  font-weight: var(--ui-wsw-weight);
-  font-size: var(--ui-wsw-size);
-  line-height: 1.75;
+.ui-text {
+  --ui-text-size: 0.9375rem;
+  --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);
 
   & a {
     text-decoration: underline;
     transition: var(--transition-opacity);
 
     &:not([class*="text-"]) {
-      color: rgb(var(--ui-wsw-link-color));
+      color: rgb(var(--color-accent));
 
       @nest .no-touch &[href]:hover {
         opacity: 0.8;
@@ -22,7 +21,7 @@
   }
 
   & b, & strong {
-    font-weight: var(--ui-wsw-weight-bold);
+    font-weight: var(--ui-text-weight-bold);
   }
 
   & i, & em {
@@ -33,7 +32,7 @@
   & figure {
     margin: 1rem 0;
 
-    @media (--media-min-768) {
+    @media (--media-t) {
       margin: 2rem 0;
     }
 
@@ -48,17 +47,17 @@
     max-width: 100%;
     height: auto !important;
 
-    @media (--media-400) {
+    @media (--media-m) {
       display: block;
       float: none !important;
     }
 
-    @media (--media-min-768) {
+    @media (--media-t) {
       &[style*="right"], &.float-right {
         margin: 0 0 2rem 4rem;
       }
 
-      &[style="left"], &.float-left {
+      &[style*="left"], &.float-left {
         margin: 0 2rem 4rem 0;
       }
     }
@@ -72,50 +71,39 @@
       line-height: 1rem;
     }
 
-    &:after {
+    &::after {
       content: "\00a0";
     }
   }
 
   & hr {
-    margin: 1.125rem 0;
+    margin: 1.25rem 0;
   }
 
-  & h1, & h2, & h3, & h4, & h5, & h6 {
-    font-weight: var(--ui-wsw-weight-bold);
+  & :is(h1, h2, h3, h4, h5, h6) {
+    font-weight: var(--ui-text-weight-bold);
     font-family: var(--font-secondary);
-    line-height: 1.15;
-    margin: 0 0 1.125rem;
+    font-size: var(--ui-text-heading-size, 1rem);
+    line-height: calc(var(--ui-text-heading-size) + 0.5rem);
+    margin: 0 0 1.25rem;
   }
 
   & h1 {
-    font-size: 2rem;
+    --ui-text-heading-size: 2.25rem;
   }
 
   & h2 {
-    font-size: 1.5rem;
-  }
-
-  & h3 {
-    font-size: 1.125rem;
-  }
-
-  & h4 {
-    font-size: 1.125rem;
+    --ui-text-heading-size: 1.75rem;
   }
 
-  & h5 {
-    font-size: 1rem;
-  }
-
-  & h6 {
-    font-size: 1rem;
+  & h3, & h4 {
+    --ui-text-heading-size: 1.25rem;
   }
 
   & table {
     border: 0;
 
-    @media (--media-400) {
+    @media (--media-m) {
       min-width: 100%;
     }
 
@@ -125,14 +113,14 @@
     }
 
     & thead {
-      font-weight: var(--ui-wsw-weight-bold);
-      border-bottom: 1px solid rgb(var(--color-background-200));
+      font-weight: var(--ui-text-weight-bold);
+      border-bottom: 1px solid rgb(var(--color-current) / 0.075);
     }
 
     & tbody {
       & tr {
         &:nth-of-type(even) {
-          background-color: rgb(var(--color-background-100));
+          background-color: rgb(var(--color-current) / 0.05);
         }
       }
     }
@@ -143,8 +131,8 @@
   }
 
   & blockquote {
-    background-color: rgb(var(--color-background-100));
-    border-left: 0.3125rem solid rgb(var(--color-background-200));
+    background-color: rgb(var(--color-current) / 0.075);
+    border-left: 0.3125rem solid rgb(var(--color-accent) / 1);
     padding: 1.25em 1.5em;
     margin: 0;
     font-size: inherit;
@@ -153,21 +141,34 @@
   & code {
     margin: 0;
     border-radius: var(--radius);
-    padding: .25rem .5rem;
-    font-size: .85em;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.85em;
     color: #476582;
-    font-family: source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace;
-    background-color: rgba(27, 31, 35, .05);
+    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+    background-color: rgb(27 31 35 / 0.05);
 
     @nest .dark & {
       background-color: rgb(var(--color-background-100));
-      color: #da1039;
+      color: rgb(var(--color-primary));
+    }
+  }
+
+  & ol {
+    margin: 0 0 1.5rem;
+    padding: 0 0 0 1rem;
+
+    & li {
+      padding-left: 0.5rem;
+
+      &::marker {
+        color: rgb(var(--color-accent));
+      }
     }
   }
 
   & ul {
     list-style-type: none !important;
-    margin: 0;
+    margin: 0 0 1.5rem;
     padding: 0;
 
     & li {
@@ -179,30 +180,23 @@
         margin: 0 0 0.5rem;
       }
 
-      &:before {
+      &::before {
         width: 0.25rem;
         height: 0.25rem;
         position: absolute;
         content: "";
-        border: 1px solid rgb(var(--ui-wsw-marker-color));
-        background-color: rgb(var(--ui-wsw-marker-color));
+        border: 1px solid rgb(var(--color-accent));
+        background-color: rgb(var(--color-accent));
         left: 0;
         top: 0.625rem;
         text-indent: 0;
-      }
-    }
-
-    &, &[style*="disc"] {
-      & li {
-        &:before {
-          border-radius: 50%;
-        }
+        border-radius: 50%;
       }
     }
 
     &[style*="square"] {
       & li {
-        &:before {
+        &::before {
           border-radius: 0;
         }
       }
@@ -210,7 +204,7 @@
 
     &[style*="circle"] {
       & li {
-        &:before {
+        &::before {
           border-radius: 50%;
           background-color: transparent;
         }
@@ -218,33 +212,20 @@
     }
   }
 
-  & ol {
-    margin: 0;
-    padding: 0 0 0 1rem;
-
-    & li {
-      padding-left: 0.5rem;
-
-      &::marker {
-        color: rgb(var(--ui-wsw-marker-color));
-      }
-    }
-  }
-
-  & .elm_wsw_table {
+  & .elm_text_table {
     display: block;
 
-    @media (--media-400) {
+    @media (--media-m) {
       max-width: 100%;
       overflow: auto;
     }
   }
 
-  & .elm_wsw_video {
+  & .elm_text_video {
     aspect-ratio: 16/9;
     position: relative;
 
-    &:before {
+    &::before {
       content: "";
       display: block;
     }
@@ -256,4 +237,4 @@
       height: 100%;
     }
   }
-}
+}

package/src/styles/Ui/Title.css

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

package/src/styles/Utils/default.css

@@ -1,23 +1,47 @@
-@define-mixin iconfont {
-  font-family: 'iconfont' !important;
-  speak: none;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+::selection {
+  color: rgb(var(--color-light));
+  background-color: rgb(var(--color-accent));
 }
 
-::selection {
-  color: rgb(var(--color-invert));
-  background-color: rgb(var(--color-primary));
+ul, ol {
+  padding: 0;
+  margin: 0;
+}
+
+ul {
+  list-style: none;
 }
 
-::-ms-input-placeholder {
-  color: rgba(var(--color-default),0.54) !important;
-  opacity: initial !important;
+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;
+}
+
+a, area, button, input, label, select, summary, textarea, [tabindex] {
+  touch-action: manipulation;
 }
 
 hr {
@@ -26,8 +50,8 @@ hr {
   display: block;
   border: 0;
   color: inherit;
-  border-top: 1px solid currentColor;
-  opacity: 0.15;
+  border-top: 1px solid rgb(var(--color-current));
+  opacity: 0.2;
   margin: 1rem 0;
   padding: 0;
 }
@@ -56,77 +80,61 @@ textarea {
   resize: vertical;
 }
 
-* {
-  box-sizing: border-box;
-  outline: none;
-  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-size: inherit;
-  margin: 0;
-}
-
-ul {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
 table {
   border-collapse: collapse;
   border-spacing: 0;
 }
 
-img {
-  max-width: 100%;
-  display: block;
+svg[class^="icon"] {
+  width: 1em;
+  height: 1em;
 }
 
-a, area, button, input, label, select, summary, textarea, [tabindex] {
-  touch-action: manipulation;
-}
+a {
+  color: inherit;
+  text-decoration: none;
 
-@-moz-document url-prefix() {
-  select {
-    text-indent: -0.125rem;
+  &:active,
+  &:hover {
+    outline-width: 0;
   }
 }
 
-[class^="icon"], [class*="icon"] {
-  &:before {
-    display: block;
-  }
+* {
+  box-sizing: border-box;
+  outline: none;
+  -webkit-tap-highlight-color: rgb(255 255 255 / 0);
 }
 
-[class^="path"] {
-  @mixin iconfont;
+*,
+::before,
+::after {
+  border-width: 0;
+  border-style: solid;
+  border-color: rgb(var(--color-current) / var(--tw-text-opacity, 1));
 }
 
-[data-ratio] {
-  position: relative;
-
-  &:not(.bg-transparent) {
-    background-color: rgb(var(--color-background-100));
-  }
-
-  &:before {
+[class*="aspect-"] {
+  &::before {
     content: "";
     display: block;
   }
+}
 
-  & > * {
-    position: absolute;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-  }
+[hidden] {
+  display: none;
+}
 
-  picture& > img {
-    object-fit: cover;
+@supports (-moz-appearance: none) {
+  select {
+    text-indent: -0.125rem;
   }
 }
 
 .grecaptcha-badge {
   display: none;
-}
+}
+
+.google-map * {
+  border-style: none;
+}

package/src/styles/Utils/icons.css

@@ -0,0 +1,9 @@
+:root {
+  --icon-check: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>') no-repeat 50% 50% / contain;
+  --icon-radio: url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 160c-53.019 0-96 42.981-96 96v0c0 53.019 42.981 96 96 96v0c53.019 0 96-42.981 96-96v0c0-53.019-42.981-96-96-96z"></path></svg>') no-repeat 50% 50% / contain;
+  --icon-chevron-right: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>') no-repeat 50% 50% / contain;
+  --icon-chevron-left: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>') no-repeat 50% 50% / contain;
+  --icon-angle-up: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor"><path d="M10.998 15.467c.491.71 1.513.71 2.004 0l3.767-5.453c.581-.843 0-2.013-1.002-2.014H8.234C7.232 8 6.65 9.17 7.231 10.014z" style="transform: scaleY(-1) translateY(1px); transform-origin: 50% 50%;" /></svg>') no-repeat 50% 50% / contain;
+  --icon-angle-down: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor"><path d="M10.998 15.467c.491.71 1.513.71 2.004 0l3.767-5.453c.581-.843 0-2.013-1.002-2.014H8.234C7.232 8 6.65 9.17 7.231 10.014z" /></svg>') no-repeat 50% 50% / contain;
+  --icon-upload: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" /></svg>') no-repeat 50% 50% / contain;
+}

package/src/styles/Utils/keyframes.css

@@ -0,0 +1,182 @@
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes move-indeterminate {
+  from {
+    background-position: 200% 0;
+  }
+
+  to {
+    background-position: -200% 0;
+  }
+}
+
+@keyframes fade-in-left {
+  from {
+    opacity: 0;
+    transform: translateX(-5rem);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes fade-in-right {
+  from {
+    opacity: 0;
+    transform: translateX(5rem);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes fade-in-up {
+  0% {
+    opacity: 0;
+    transform: translateY(2rem);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-in-down {
+  0% {
+    opacity: 0;
+    transform: translateY(-2rem);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fade-out-left {
+  from {
+    opacity: 1;
+    transform: none;
+  }
+
+  to {
+    opacity: 0;
+    transform: translateX(-5rem);
+  }
+}
+
+@keyframes fade-out-right {
+  from {
+    opacity: 1;
+    transform: none;
+  }
+
+  to {
+    opacity: 0;
+    transform: translateX(5rem);
+  }
+}
+
+@keyframes fade-out-up {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(-2rem);
+  }
+}
+
+@keyframes fade-out-down {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateY(2rem);
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes slide-in-down {
+  0% {
+    transform: translateY(-100%);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-out-up {
+  0% {
+    transform: translateY(0);
+  }
+
+  100% {
+    transform: translateY(-100%);
+  }
+}
+
+@keyframes slide-in-up {
+  0% {
+    transform: translateY(100%);
+  }
+
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-out-down {
+  0% {
+    transform: translateY(0);
+  }
+
+  100% {
+    transform: translateY(100%);
+  }
+}
+
+@keyframes ripple {
+  100% {
+    transform: scale(2.5);
+    opacity: 0;
+  }
+}