uplord-ui 0.1.32 → 0.2.0

package/dist/styles/mixins.scss

@@ -1,331 +0,0 @@
-@use 'sass:color';
-@use './variables' as *;
-@use './typography' as *;
-
-@mixin dark-mode {
-  :global(.dark) & {
-    @content;
-  }
-
-  .dark & {
-    @content;
-  }
-}
-
-@mixin light-mode {
-  :global(.light) & {
-    @content;
-  }
-
-  .light & {
-    @content;
-  }
-}
-
-@mixin container {
-  display: flex;
-  max-width: $width-max;
-  flex-direction: column;
-  padding: 0 1.5rem;
-  margin: 0 auto;
-  gap: 1.5rem;
-
-  @media (min-width: $breakpoint-md) {
-    gap: 2rem;
-  }
-}
-
-$color-tooltip: #0d0d0d;
-$color-tooltip-text: #fff;
-$color-tooltip-dark: #fff;
-$color-tooltip-text-dark: #000;
-
-@mixin toolbar {
-  &:hover::after {
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    padding: 0.325rem 1rem;
-    border-radius: 0.5rem;
-    margin-top: -1rem;
-    background-color: $color-tooltip;
-    color: $color-tooltip-text;
-    content: attr(data-tooltip);
-    opacity: 1;
-    transform: translateX(-50%);
-    transition:
-      opacity 0.2s ease,
-      visibility 0.2s ease;
-    visibility: visible;
-    white-space: nowrap;
-
-    @include dark-mode {
-      background-color: $color-tooltip-dark;
-      color: $color-tooltip-text-dark;
-    }
-  }
-
-  &:hover::before {
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    width: 0;
-    height: 0;
-    border-width: 0 6px 6px;
-    border-style: solid;
-    border-color: transparent transparent $color-tooltip;
-    margin-top: -1.375rem;
-    content: '';
-    opacity: 1;
-    transform: translate(-50%);
-    transition:
-      opacity 0.2s ease,
-      visibility 0.2s ease;
-    visibility: visible;
-
-    @include dark-mode {
-      border-color: transparent transparent $color-tooltip-dark;
-    }
-  }
-
-  &::before,
-  &::after {
-    display: none;
-    opacity: 0;
-    visibility: hidden;
-
-    @media (min-width: $breakpoint-md) {
-      display: block;
-    }
-  }
-}
-
-@mixin skeleton-text {
-  .skeleton,
-  &.skeleton {
-    border-color: transparent;
-    animation: pulse 1.5s infinite alternate;
-    background-color: rgb(0 0 0 / 10%);
-    color: transparent;
-    pointer-events: none;
-    transition: opacity 0.3s ease-in-out;
-    user-select: none;
-
-    @include dark-mode {
-      background-color: rgb(255 255 255 / 10%);
-      color: transparent;
-    }
-
-    &:not(.button, .nav, .icon) {
-      border-radius: 0.5rem;
-    }
-  }
-}
-
-@mixin skeleton-image {
-  .skeleton {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    border-radius: inherit;
-    animation: pulse 1.5s infinite alternate;
-    background-color: rgb(0 0 0 / 10%);
-    transition: all 0.3s ease-in-out;
-
-    @include dark-mode {
-      background-color: rgb(255 255 255 / 10%);
-    }
-  }
-}
-
-@keyframes pulse {
-  0% {
-    opacity: 0.6;
-  }
-
-  50% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0.6;
-  }
-}
-
-@mixin text-content {
-  display: grid;
-  gap: 0.5rem;
-
-  h2 {
-    @include text-2xl;
-    @include text-bold;
-
-    @media (min-width: $breakpoint-md) {
-      @include text-2xl;
-    }
-
-    @media (min-width: $breakpoint-lg) {
-      @include text-3xl;
-    }
-  }
-
-  h3 {
-    @include text-lg;
-    @include text-bold;
-
-    @media (min-width: $breakpoint-md) {
-      @include text-lg;
-    }
-
-    @media (min-width: $breakpoint-lg) {
-      @include text-xl;
-    }
-  }
-
-  h4 {
-    @include text-md;
-    @include text-bold;
-
-    @media (min-width: $breakpoint-md) {
-      @include text-md;
-    }
-
-    @media (min-width: $breakpoint-lg) {
-      @include text-lg;
-    }
-  }
-
-  p {
-    @include text-md;
-    @include text-normal;
-
-    @media (min-width: $breakpoint-md) {
-      @include text-md;
-    }
-
-    @media (min-width: $breakpoint-lg) {
-      @include text-lg;
-    }
-  }
-
-  ol {
-    padding-left: 1.5rem;
-    list-style-type: decimal;
-  }
-
-  ul {
-    padding-left: 1.5rem;
-    list-style-type: disc;
-  }
-
-  li {
-    @include text-md;
-    @include text-normal;
-
-    & {
-      margin-bottom: 0.5rem;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-
-    @media (min-width: $breakpoint-md) {
-      @include text-lg;
-    }
-
-    @media (min-width: $breakpoint-lg) {
-      @include text-lg;
-    }
-  }
-
-  hr {
-    border-color: $color-border;
-    margin: 0;
-
-    @include dark-mode {
-      border-color: $color-border-dark;
-    }
-  }
-}
-
-$color-loading-01: color.change($color-dark, $alpha: 0.15);
-$color-loading-02: color.change($color-dark, $alpha: 0.25);
-$color-loading-03: color.change($color-dark, $alpha: 0.35);
-$color-loading-01-dark: color.change($color-light, $alpha: 0.15);
-$color-loading-02-dark: color.change($color-light, $alpha: 0.25);
-$color-loading-03-dark: color.change($color-light, $alpha: 0.35);
-
-@keyframes loading {
-  0% {
-    background: $color-loading-02;
-    box-shadow:
-      0.875rem 0 $color-loading-01,
-      -0.875rem 0 $color-loading-03;
-  }
-
-  33% {
-    background: $color-loading-03;
-    box-shadow:
-      0.875rem 0 $color-loading-02,
-      -0.875rem 0 $color-loading-01;
-  }
-
-  66% {
-    background: $color-loading-01;
-    box-shadow:
-      0.875rem 0 $color-loading-03,
-      -0.875rem 0 $color-loading-02;
-  }
-
-  100% {
-    background: $color-loading-02;
-    box-shadow:
-      0.875rem 0 $color-loading-01,
-      -0.875rem 0 $color-loading-03;
-  }
-}
-
-@keyframes loading-dark {
-  0% {
-    background: $color-loading-02-dark;
-    box-shadow:
-      0.875rem 0 $color-loading-01-dark,
-      -0.875rem 0 $color-loading-03-dark;
-  }
-
-  33% {
-    background: $color-loading-03-dark;
-    box-shadow:
-      0.875rem 0 $color-loading-02-dark,
-      -0.875rem 0 $color-loading-01-dark;
-  }
-
-  66% {
-    background: $color-loading-01-dark;
-    box-shadow:
-      0.875rem 0 $color-loading-03-dark,
-      -0.875rem 0 $color-loading-02-dark;
-  }
-
-  100% {
-    background: $color-loading-02-dark;
-    box-shadow:
-      0.875rem 0 $color-loading-01-dark,
-      -0.875rem 0 $color-loading-03-dark;
-  }
-}
-
-@keyframes pulse {
-  0% {
-    opacity: 0.6;
-  }
-
-  50% {
-    opacity: 1;
-  }
-
-  100% {
-    opacity: 0.6;
-  }
-}

package/dist/styles/typography.scss

@@ -1,71 +0,0 @@
-@mixin text-xxs {
-  font-size: 0.625rem; // 10px
-  letter-spacing: -0.01rem;
-  line-height: 0.75rem; // 16px
-}
-
-@mixin text-xs {
-  font-size: 0.75rem; // 12px
-  letter-spacing: -0.01rem;
-  line-height: 1rem; // 16px
-}
-
-@mixin text-sm {
-  font-size: 0.875rem; // 14px
-  letter-spacing: -0.0175rem;
-  line-height: 1.25rem; // 20px
-}
-
-@mixin text-md {
-  font-size: 1rem; // 16px
-  letter-spacing: -0.02rem;
-  line-height: 1.5rem; // 24px
-}
-
-@mixin text-xm {
-  font-size: 1.125rem; // 18px
-  letter-spacing: -0.0225rem;
-  line-height: 1.675rem; // 26px
-}
-
-@mixin text-lg {
-  font-size: 1.25rem; // 20px
-  letter-spacing: -0.025rem;
-  line-height: 1.75rem; // 28px
-}
-
-@mixin text-xl {
-  font-size: 1.5rem; // 24px
-  letter-spacing: -0.03rem;
-  line-height: 2rem; // 32px
-}
-
-@mixin text-2xl {
-  font-size: 2rem; // 32px
-  letter-spacing: -0.04rem;
-  line-height: 2.5rem; // 40px
-}
-
-@mixin text-3xl {
-  font-size: 2.5rem; // 40px
-  letter-spacing: -0.05rem;
-  line-height: 3rem; // 48px
-}
-
-@mixin text-4xl {
-  font-size: 3rem; // 48px
-  letter-spacing: -0.06rem;
-  line-height: 3.5rem; // 56px
-}
-
-@mixin text-normal {
-  font-weight: normal;
-}
-
-@mixin text-semibold {
-  font-weight: 600;
-}
-
-@mixin text-bold {
-  font-weight: 700;
-}

package/dist/styles/variables.scss

@@ -1,76 +0,0 @@
-@use 'sass:color';
-
-$font-heading: 'Inter', arial, sans-serif;
-$font-body: 'Nunito', arial, sans-serif;
-$width-max: 1432px;
-$width-xl: 2032px;
-$breakpoint-sm: 400px;
-$breakpoint-md: 744px;
-$breakpoint-lg: 1024px;
-$breakpoint-xl: 2032px;
-$color-light: hsl(0deg 0% 100%);
-$color-dark: hsl(0deg 0% 5%);
-$header-height: 4.875rem;
-$nav-height: 4.375rem;
-
-// Light mode
-
-// Background
-$color-bg: hsl(0deg 0% 100%);
-$color-bg-02: hsl(0deg 0% 95%);
-$color-border: hsl(0deg 0% 80%);
-$color-border-02: hsl(0deg 0% 90%);
-
-// Text/icon
-$color-heading: hsl(0deg 0% 5%);
-$color-body: hsl(0deg 0% 30%);
-$color-placeholder: hsl(0deg 0% 80%);
-$color-icon: hsl(0deg 0% 30%);
-
-// Input
-$color-input: hsl(0deg 0% 30%);
-$color-hover: hsl(0deg 0% 95%);
-$color-disabled: hsl(0deg 0% 90%);
-$color-loading: hsl(0deg 0% 95%);
-$color-skeleton: hsl(0deg 0% 90%);
-$color-focus: hsl(0deg 0% 5%);
-
-// Dark mode
-
-// Background
-$color-bg-dark: hsl(0deg 0% 5%);
-$color-bg-02-dark: hsl(0deg 0% 10%);
-$color-border-dark: hsl(0deg 0% 25%);
-$color-border-02-dark: hsl(0deg 0% 20%);
-
-// Text/icon
-$color-heading-dark: hsl(0deg 0% 95%);
-$color-body-dark: hsl(0deg 0% 70%);
-$color-placeholder-dark: hsl(0deg 0% 25%);
-$color-icon-dark: hsl(0deg 0% 70%);
-
-// Input
-$color-input-dark: hsl(0deg 0% 5%);
-$color-hover-dark: hsl(0deg 0% 10%);
-$color-disabled-dark: hsl(0deg 0% 15%);
-$color-loading-dark: hsl(0deg 0% 10%);
-$color-skeleton-dark: hsl(0deg 0% 15%);
-$color-focus-dark: hsl(0deg 0% 95%);
-
-// Colors
-$color-primary: hsl(0deg 80% 50%);
-$color-success: hsl(142deg 76% 36%);
-$color-error: hsl(355deg 75% 40%);
-$color-error-02: hsl(0deg 80% 95%);
-$color-error-03: hsl(355deg 75% 5%);
-$color-warning: hsl(38deg 92% 50%);
-$color-info: hsl(213deg 85% 43%);
-$color-rebecca: hsl(270deg 50% 40%);
-
-// Other
-$color-header: $color-info;
-$color-header-dark: $color-bg-dark;
-$color-nav: hsl(213deg 85% 33%);
-$color-nav-skeleton: hsl(213deg 85% 33%);
-$color-nav-dark: hsl(0deg 0% 15%);
-$color-header-text: $color-light;

package/dist/title.svg

@@ -1 +0,0 @@
-<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 40" width="160" height="40"><defs><image width="40" height="40" id="img1" href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHZpZXdCb3g9IjAgMCA0MCA0MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiByeD0iNCIgZmlsbD0iI2ZmZiIvPgo8cGF0aCBkPSJNOS43OTQgMjlWMTAuOEgxMy45OEwxOS41NDQgMjIuMTYyTDI1LjA1NiAxMC44SDI5LjI0MlYyOUgyNS43MzJWMTYuNzhMMjAuOTIyIDI2LjQ1MkgxOC4xNEwxMy4zMDQgMTYuNzhWMjlIOS43OTRaIiBmaWxsPSIjZGQyMTIxIi8+Cjwvc3ZnPgo="/></defs><style>.a{fill:#fff}</style><use  href="#img1" transform="matrix(1,0,0,1,0,0)"/><path class="a" d="m60.3 12.5v9.4c0 2.2-1.4 3.7-3.9 3.7-2.4 0-3.9-1.5-3.9-3.7v-9.4h-1.7v9.6c0 3 2.2 5.2 5.6 5.2 3.5 0 5.7-2.2 5.7-5.2v-9.6zm5 18.6h1.7v-5.8h0.2c0.3 0.6 1 1.9 3.1 1.9 2.8 0 4.7-2.2 4.7-5.6 0-3.5-1.9-5.7-4.7-5.7-2.1 0-2.8 1.4-3.1 1.9h-0.2v-1.7h-1.7zm1.7-9.6c0-2.4 1.1-4 3.1-4 2.1 0 3.2 1.7 3.2 4 0 2.4-1.1 4.2-3.2 4.2-2 0-3.1-1.7-3.1-4.2zm12.2-9h-1.7v14.5h1.7zm7.5 14.8c3 0 4.9-2.3 4.9-5.7 0-3.4-1.9-5.6-4.9-5.6-3 0-4.9 2.2-4.9 5.6 0 3.4 1.9 5.7 4.9 5.7zm0-1.5c-2.2 0-3.3-2-3.3-4.2 0-2.1 1.1-4.1 3.3-4.1 2.2 0 3.3 2 3.3 4.1 0 2.2-1.1 4.2-3.3 4.2zm7.5 1.2h1.7v-6.9c0-1.4 1.1-2.5 2.7-2.5 0.5 0 0.9 0.1 1.1 0.1v-1.7c-0.2 0-0.7 0-0.9 0-1.3 0-2.5 0.7-2.9 1.8h-0.1v-1.7h-1.6zm11.2 0.3c2.1 0 2.8-1.3 3.2-1.9h0.2v1.6h1.6v-14.5h-1.7v5.4h-0.1c-0.4-0.6-1-1.9-3.1-1.9-2.8 0-4.7 2.2-4.7 5.6 0 3.5 1.9 5.7 4.6 5.7zm0.3-1.5c-2.1 0-3.2-1.9-3.2-4.2 0-2.3 1-4.1 3.2-4.1 2 0 3.1 1.6 3.1 4.1 0 2.5-1.1 4.2-3.1 4.2zm23.4-13.3v9.5c0 2.1-1.4 3.6-3.9 3.6-2.4 0-3.9-1.5-3.9-3.6v-9.5h-1.7v9.6c0 3 2.2 5.2 5.6 5.2 3.5 0 5.7-2.2 5.7-5.2v-9.6zm7 0h-1.7v14.5h1.7z"/></svg>