@newlogic-digital/ui 3.4.2 → 3.7.5

package/src/styles/Ui/Switch.css

@@ -1,70 +1 @@
-.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%;
-      }
-    }
-  }
-}
+@import "winduum/src/ui/switch/index.css";

package/src/styles/Ui/Text.css

@@ -1,254 +1 @@
-.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;
-  }
-
-  & 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 {
-    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%;
-    }
-  }
-}
+@import "winduum/src/ui/text/index.css";

package/src/styles/Ui/Title.css

@@ -1,15 +1,4 @@
-.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);
-
-  &[class*="uppercase"] {
-    letter-spacing: var(--ui-title-spacing);
-  }
-}
+@import "winduum/src/ui/title/default.css";
+@import "winduum/src/ui/title/default-props.css";
+@import "winduum/src/ui/title/sm.css";
+@import "winduum/src/ui/title/lg.css";

package/src/styles/Utils/+.css

@@ -1,10 +1,6 @@
-@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 "keyframes.css";
+@import "theme/+.css";
+@import "utilities.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,16 @@
+@import "winduum/src/base/config/font.css";
+@import "winduum/src/base/config/mask.css";
+@import "winduum/src/base/config/rounded.css";
+@import "winduum/src/base/config/spacing.css";
+@import "winduum/src/base/config/text.css";
+@import "winduum/src/base/config/transition.css";
+@import "winduum/src/base/config/z.css";
+
+:root, :host {
+  --container: min(100% - (var(--container-padding) * 2), var(--container-width));
+  --container-lg: min(100% - (var(--container-padding) * 2), var(--container-lg-width));
+  --container-width: 80rem;
+  --container-lg-width: 90rem;
+  --container-padding: 5vw;
+  --container-padding-calc: max(calc(50vw - (var(--container-width) / 2)), var(--container-padding));
+}

package/src/styles/Utils/default.css

@@ -1,37 +1,26 @@
-::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/defaults.css";
 
 :where(svg) {
-  stroke-width: 1.5;
   display: block;
+
+  &:has([href]) {
+    stroke-width: 2;
+    stroke: currentcolor;
+    fill: none;
+  }
+
+  &:has([href*="-solid"]) {
+    stroke: none;
+    fill: currentcolor;
+  }
 }
 
-:where(hr) {
+: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/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/theme/+.css

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

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

@@ -1,28 +1,33 @@
-:root {
+:root, :host {
+  --font-primary: "Poppins", sans-serif;
+  --font-secondary: "Poppins", sans-serif;
+  --space: srgb;
+  --scheme: dark;
   --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;
+  --color-accent-foreground: var(--color-primary-foreground);
+  --color-primary: #83cd4f;
+  --color-primary-foreground: var(--color-dark);
+  --color-main: #111315;
+  --color-main-foreground: var(--color-body);
+  --color-main-primary: var(--color-main);
+  --color-main-secondary: color-mix(in var(--space), var(--color-main) 75%, var(--color-main-foreground));
+  --color-main-tertiary: color-mix(in var(--space), var(--color-main) 50%, var(--color-main-foreground));
+  --color-body: #fff;
+  --color-body-foreground: var(--color-main);
+  --color-body-primary: var(--color-body);
+  --color-body-secondary: color-mix(in var(--space), var(--color-body) 95%, var(--color-body-foreground));
+  --color-body-tertiary: color-mix(in var(--space), var(--color-body) 90%, var(--color-body-foreground));
+  --color-light: #fff;
+  --color-light-foreground: var(--color-dark);
+  --color-dark: #111315;
+  --color-dark-foreground: var(--color-light);
+  --color-success: #16a34a;
+  --color-error: #dc2626;
+  --color-warning: #eab308;
+  --color-info: #0ea5e9;
 
   &.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: #c9d1d9;
+    --color-body: #0e1116;
   }
 }