@newlogic-digital/ui 3.3.0 → 3.5.0

package/src/styles/Ui/Text.css

@@ -1,249 +1,8 @@
-.ui-text {
-  --ui-text-size: 0.875rem;
-  --ui-text-size-line: 0.75rem;
-  --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) + var(--ui-text-size-line));
-
-  &:--size-base {
-    --ui-text-size: 1rem;
-  }
-
-  &:--size-lg {
-    --ui-text-size: 1.125rem;
-  }
-
-  & a {
-    text-decoration: underline;
-    transition: var(--transition-opacity);
-
-    &:not([class*="text-"]) {
-      color: rgb(var(--color-accent));
-
-      @nest .no-touch &[href]:is(:hover, :focus-visible) {
-        opacity: 0.8;
-      }
-    }
-  }
-
-  & b, & strong {
-    font-weight: var(--ui-text-weight-bold);
-  }
-
-  & i, & em {
-    display: inline;
-    font-style: italic;
-  }
-
-  & figure {
-    margin: 1rem 0;
-
-    @media (--media-t) {
-      margin: 2rem 0;
-    }
-
-    & figcaption {
-      font-size: 0.875rem;
-      font-weight: var(--font-semibold);
-      margin-top: 0.875rem;
-    }
-  }
-
-  & img {
-    max-width: 100%;
-    height: auto !important;
-
-    @media (--media-m) {
-      display: block;
-      float: none !important;
-    }
-
-    @media (--media-t) {
-      &[style*="right"], &.float-right {
-        margin: 0 0 2rem 4rem;
-      }
-
-      &[style*="left"], &.float-left {
-        margin: 0 2rem 4rem 0;
-      }
-    }
-  }
-
-  & p {
-    line-height: inherit;
-    margin: 0 0 0.25rem;
-
-    &:empty {
-      line-height: 1rem;
-    }
-
-    &::after {
-      content: "\00a0";
-    }
-  }
-
-  & hr {
-    margin: 1.25rem 0;
-  }
-
-  & :is(h1, h2, h3, h4, h5, h6) {
-    font-weight: var(--ui-text-weight-bold);
-    font-family: var(--font-secondary);
-    font-size: var(--ui-text-heading-size, 1rem);
-    line-height: calc(var(--ui-text-heading-size) + 0.5rem);
-    margin: 0 0 1.25rem;
-  }
-
-  & h1 {
-    --ui-text-heading-size: 2.25rem;
-  }
+@import "winduum/src/ui/text.css";
 
-  & h2 {
-    --ui-text-heading-size: 1.75rem;
-  }
-
-  & h3, & h4 {
-    --ui-text-heading-size: 1.25rem;
-  }
-
-  & table {
-    border: 0;
-
-    @media (--media-m) {
-      min-width: 100%;
-    }
-
-    & td, & th {
-      padding: 1rem 1.125rem;
-      text-align: left;
-    }
-
-    & thead {
-      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-current) / 0.05);
-        }
-      }
-    }
-  }
-
-  & iframe {
+.ui-text {
+  .c_text_table {
     max-width: 100%;
-  }
-
-  & blockquote {
-    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;
-  }
-
-  & code {
-    margin: 0;
-    border-radius: var(--radius);
-    padding: 0.25rem 0.5rem;
-    font-size: 0.85em;
-    color: #476582;
-    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: 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 0 1.5rem;
-    padding: 0;
-
-    & li {
-      position: relative;
-      line-height: inherit;
-      padding-left: 1.5rem;
-
-      &:not(:last-of-type) {
-        margin: 0 0 0.5rem;
-      }
-
-      &::before {
-        width: 0.25rem;
-        height: 0.25rem;
-        position: absolute;
-        content: "";
-        border: 1px solid rgb(var(--color-accent));
-        background-color: rgb(var(--color-accent));
-        left: 0;
-        top: 0.625rem;
-        text-indent: 0;
-        border-radius: 50%;
-      }
-    }
-
-    &[style*="square"] {
-      & li {
-        &::before {
-          border-radius: 0;
-        }
-      }
-    }
-
-    &[style*="circle"] {
-      & li {
-        &::before {
-          border-radius: 50%;
-          background-color: transparent;
-        }
-      }
-    }
-  }
-
-  & .elm_text_table {
-    display: block;
-
-    @media (--media-m) {
-      max-width: 100%;
-      overflow: auto;
-    }
-  }
-
-  & .elm_text_video {
-    aspect-ratio: 16/9;
-    position: relative;
-
-    &::before {
-      content: "";
-      display: block;
-    }
-
-    & iframe {
-      position: absolute;
-      inset: 0;
-      width: 100%;
-      height: 100%;
-    }
+    overflow-x: auto;
   }
 }

package/src/styles/Ui/Title.css

@@ -1,15 +1,7 @@
-.ui-title {
-  --ui-title-size: 0.875rem;
-  --ui-title-size-line: 0.25rem;
-  --ui-title-spacing: 0.05rem;
-  --ui-title-weight: var(--font-semibold);
-
-  display: block;
-  font-size: var(--ui-title-size);
-  line-height: calc(var(--ui-title-size) + var(--ui-title-size-line));
-  font-weight: var(--ui-title-weight);
+@import "winduum/src/ui/title/default.css";
+@import "winduum/src/ui/title/sm.css";
+@import "winduum/src/ui/title/lg.css";
 
-  &[class*="uppercase"] {
-    letter-spacing: var(--ui-title-spacing);
-  }
+.ui-title {
+  max-width: max-content;
 }

package/src/styles/Utils/+.css

@@ -1,9 +1,8 @@
+@import "breakpoints.css";
+@import "config.css";
 @import "default.css";
 @import "icons.css";
 @import "keyframes.css";
-@import "normalize.css";
 @import "print.css";
-@import "tailwind/+.css";
+@import "tailwind.css";
 @import "theme/+.css";
-@import "vars.css";
-@import "vendor.css";

package/src/styles/Utils/breakpoints.css

@@ -0,0 +1 @@
+@import "winduum/src/base/breakpoints.css";

package/src/styles/Utils/config.css

@@ -0,0 +1,5 @@
+@import "winduum/src/base/config.css";
+
+:root {
+  --spacing-section: 3rem;
+}

package/src/styles/Utils/default.css

@@ -1,133 +1,19 @@
-::selection {
-  color: rgb(var(--color-light));
-  background-color: rgb(var(--color-accent));
-}
-
-ul, ol {
-  padding: 0;
-  margin: 0;
-}
-
-ul {
-  list-style: none;
-}
-
-blockquote,
-dl,
-dd,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-hr,
-figure,
-p,
-pre {
-  margin: 0;
-}
+@import "winduum/src/base/default.css";
 
-img,
-svg,
-video,
-canvas,
-audio,
-iframe,
-embed,
-object {
+:where(svg) {
   display: block;
-  vertical-align: middle;
 }
 
-a, area, button, input, label, select, summary, textarea, [tabindex] {
-  touch-action: manipulation;
+:where(use) {
+  stroke-width: 2;
 }
 
-hr {
-  width: 100%;
-  height: 1px;
+:where(img) {
   display: block;
-  border: 0;
-  color: inherit;
-  border-top: 1px solid rgb(var(--color-current));
-  opacity: 0.2;
-  margin: 1rem 0;
-  padding: 0;
-}
-
-picture {
-  display: block;
-}
-
-fieldset {
-  border: 0;
-  margin: 0;
-  padding: 0;
+  font-size: 0;
 }
 
-button {
-  appearance: none;
-  background: transparent;
-  border: 0;
+:where(ol:not([type]), ul, menu) {
   padding: 0;
-  cursor: pointer;
-  color: inherit;
-  font-size: 1rem;
-}
-
-textarea {
-  resize: vertical;
-}
-
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-
-svg[class^="icon"] {
-  width: 1em;
-  height: 1em;
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-
-  &:active,
-  &:hover {
-    outline-width: 0;
-  }
-}
-
-* {
-  box-sizing: border-box;
-  outline: none;
-  -webkit-tap-highlight-color: rgb(255 255 255 / 0);
-}
-
-*,
-::before,
-::after {
-  border-width: 0;
-  border-style: solid;
-  border-color: rgb(var(--color-current) / var(--tw-text-opacity, 1));
-}
-
-[hidden] {
-  display: none;
-}
-
-@supports (-moz-appearance: none) {
-  select {
-    text-indent: -0.125rem;
-  }
-}
-
-.grecaptcha-badge {
-  display: none;
-}
-
-.google-map * {
-  border-style: none;
+  margin: 0;
 }

package/src/styles/Utils/icons.css

@@ -1,9 +1,5 @@
+@import "winduum/src/base/icons.css";
+
 :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;
+  --icon-x-mark: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>') no-repeat 50% 50% / contain;
 }

package/src/styles/Utils/keyframes.css

@@ -1,182 +1 @@
-@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);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes fade-in-down {
-  0% {
-    opacity: 0;
-    transform: translateY(-2rem);
-  }
-
-  100% {
-    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);
-  }
-
-  100% {
-    opacity: 0;
-    transform: translateY(-2rem);
-  }
-}
-
-@keyframes fade-out-down {
-  0% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-
-  100% {
-    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;
-  }
-}
+@import "winduum/src/base/keyframes.css";

package/src/styles/Utils/{tailwind/base.css → tailwind.css}

@@ -1,24 +1,8 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "winduum/src/base/tailwind/utilities.css";
+@import "winduum/src/base/tailwind/gutters.css";
 
 @layer utilities {
-  .current {
-    background-color: currentColor;
-    color: currentColor;
-  }
-
-  .animation {
-    animation-duration: 0.5s;
-    animation-fill-mode: both;
-  }
-
   .slider {
-    margin-left: calc(var(--container-padding-calc) * -1);
-    margin-right: calc(var(--container-padding-calc) * -1);
-    padding-left: var(--container-padding-calc);
-    scroll-padding-left: var(--container-padding-calc);
-    scroll-padding-right: var(--container-padding-calc);
     overflow-x: auto;
     overflow-y: hidden;
     -webkit-overflow-scrolling: touch;
@@ -27,14 +11,40 @@
     -ms-overflow-style: none;
     display: flex;
 
+    &:not(.is-fade, .is-grabbing) {
+      scroll-behavior: smooth;
+      scroll-snap-type: x mandatory;
+    }
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
     & > * {
       flex: 0 0 auto;
       scroll-snap-align: start;
+    }
+
+    &.is-grabbing {
+      &, & * {
+        cursor: grabbing;
+      }
 
-      &:last-child {
-        box-sizing: content-box;
-        border-right: var(--container-padding-calc) solid transparent;
+      & a {
+        pointer-events: none;
       }
     }
   }
+
+  .slider-edge-x {
+    margin-left: calc(var(--container-padding-calc) * -1);
+    margin-right: calc(var(--container-padding-calc) * -1);
+    padding-left: var(--container-padding-calc);
+    scroll-padding-left: var(--container-padding-calc);
+    scroll-padding-right: var(--container-padding-calc);
+
+    & > *:last-child {
+      margin-right: var(--container-padding-calc);
+    }
+  }
 }

package/src/styles/Utils/theme/+.css

@@ -1 +1 @@
-@import "main.css";
+@import "main.css";