@newlogic-digital/ui 3.4.2 → 3.5.0

package/src/styles/Ui/Text.css

@@ -1,254 +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;
-    }
-  }
+@import "winduum/src/ui/text.css";
 
-  & 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;
-  }
-
-  & 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;
-
-    &:not([type]) {
-      list-style: decimal;
-    }
-
-    & 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;
-        box-sizing: content-box;
-        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,10 +1,8 @@
-@import "breakpoints.css";
-@import "default.css";
-@import "icons.css";
-@import "keyframes.css";
-@import "normalize.css";
-@import "print.css";
-@import "tailwind/+.css";
-@import "theme/+.css";
-@import "vars.css";
-@import "vendor.css";
+@import "breakpoints.css";
+@import "config.css";
+@import "default.css";
+@import "icons.css";
+@import "keyframes.css";
+@import "print.css";
+@import "tailwind.css";
+@import "theme/+.css";

package/src/styles/Utils/breakpoints.css

@@ -1,9 +1 @@
-@custom-media --media-m (max-width: 47.9375em);
-@custom-media --media-t (min-width: 48em);
-@custom-media --media-d (min-width: 60em);
-@custom-media --media-w (min-width: 76em);
-@custom-media --media-hd (min-width: 85em);
-@custom-media --media-mhd (min-width: 88em);
-@custom-media --media-fhd (min-width: 100em);
-@custom-media --media-touch (max-width: 59.9375em);
-@custom-media --media-touch-only (max-width: 59.9375em) and (min-width: 47.9375em);
+@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,37 +1,19 @@
-::selection {
-  color: rgb(var(--color-light));
-  background-color: rgb(var(--color-accent));
-}
-
-:where(*) {
-  outline: none;
-  -webkit-tap-highlight-color: rgb(255 255 255 / 0);
-}
-
-:where([hidden]) {
-  display: none;
-}
+@import "winduum/src/base/default.css";
 
 :where(svg) {
-  stroke-width: 1.5;
   display: block;
 }
 
-:where(hr) {
+:where(use) {
+  stroke-width: 2;
+}
+
+:where(img) {
   display: block;
-  border-top: 2px solid rgb(var(--color-current) / var(--tw-border-opacity, 0.15));
-  border-radius: var(--rounded);
+  font-size: 0;
 }
 
-:where(ol, ul) {
+:where(ol:not([type]), ul, menu) {
   padding: 0;
   margin: 0;
 }
-
-.grecaptcha-badge {
-  display: none;
-}
-
-.google-map * {
-  border-style: none;
-}

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/utilities.css → tailwind.css}

@@ -1,32 +1,8 @@
-@layer utilities {
-  .current {
-    background-color: currentColor;
-    color: currentColor;
-  }
-
-  .animation {
-    animation-duration: 0.5s;
-    animation-fill-mode: both;
-  }
-
-  .container {
-    margin-left: auto;
-    margin-right: auto;
-    max-width: var(--container-width);
-    padding-left: var(--container-padding);
-    padding-right: var(--container-padding);
-
-    &:--size-sm {
-      --container: var(--container-width-sm);
-    }
-  }
+@import "winduum/src/base/tailwind/utilities.css";
+@import "winduum/src/base/tailwind/gutters.css";
 
+@layer utilities {
   .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;
@@ -35,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;
+    }
 
-      &:last-child {
-        box-sizing: content-box;
-        border-right: var(--container-padding-calc) solid transparent;
+    &.is-grabbing {
+      &, & * {
+        cursor: grabbing;
       }
+
+      & 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/main.css

@@ -1,28 +1,19 @@
+@import "winduum/src/base/theme/default-rgb.css";
+@import "winduum/src/base/theme/default.css";
+
 :root {
-  --color-accent: var(--color-primary);
-  --color-current: var(--color-default);
-  --color-default: 17 19 21;
-  --color-invert: 255 255 255;
-  --color-primary: 131 205 79;
-  --color-secondary: 69 71 72;
-  --color-light: 255 255 255;
-  --color-dark: 17 19 21;
-  --color-success: 33 154 67;
-  --color-error: 254 50 75;
-  --color-warning: 254 179 53;
-  --color-info: 102 153 204;
-  --color-background: 255 255 255;
-  --color-background-100: 245 245 245;
-  --color-background-200: 235 235 235;
-  --color-background-300: 225 225 225;
+  --font-primary: "Poppins", sans-serif;
+  --font-secondary: "Poppins", sans-serif;
+  --color-primary-rgb: 131 205 79;
+  --color-primary-fg-rgb: var(--color-dark-rgb);
+  --color-main-rgb: 17 19 21;
+  --color-dark-rgb: 17 19 21;
+  --color-accent-rgb: var(--color-primary-rgb);
+  --color-current-rgb: var(--color-main-rgb);
+  --color-body-secondary-fg: var(--color-main);
 
   &.dark {
-    --color-default: 201 209 217;
-    --color-invert: 14 17 22;
-    --color-secondary: 39 41 46;
-    --color-background: 14 17 22;
-    --color-background-100: 23 27 34;
-    --color-background-200: 26 32 38;
-    --color-background-300: 30 36 46;
+    --color-main-rgb: 201 209 217;
+    --color-body-rgb: 14 17 22;
   }
 }