mediacube-ui-v2 0.0.44 → 0.0.46

package/dist/assets/styles/toast.scss

@@ -0,0 +1,62 @@
+@use 'sass:color' as sasscolor;
+@use './mixins' as *;
+@use '../tokens/z-indexes' as *;
+@use '../tokens/spacings' as *;
+@use '../tokens/border-radius' as *;
+@use '../tokens/colors' as *;
+@use '../tokens/font-sizes' as *;
+@use '../tokens/line-heights' as *;
+
+.toasted-container {
+  $toasted-container-name: &;
+  z-index: $z-index-toasted !important;
+  .toasted {
+    &.mc-toast {
+      padding: $space-100 0;
+      padding-inline: $space-150 $space-400;
+      &--primary {
+        border-radius: $radius-100;
+        background-color: $color-black;
+        color: $color-white;
+        font-size: $font-size-200;
+        line-height: $line-height-200;
+
+        .action {
+          text-decoration: none;
+          text-transform: none;
+          margin: 0;
+          font-size: $font-size-200;
+          line-height: $line-height-200;
+          &.mc-toast__action {
+            color: sasscolor.scale($color-white, $lightness: 50%);
+
+            &--outline {
+              color: $color-white;
+              padding: $space-100 $space-150;
+              border: 1px solid $color-outline-gray;
+              border-radius: $radius-50;
+            }
+          }
+          &:not(:last-child) {
+            margin-inline-end: $space-50;
+          }
+          &:first-of-type {
+            margin-inline-start: $space-600;
+          }
+          &:last-child {
+            margin-inline-end: -$space-300; // TODO: refactor negative margin
+          }
+          &:first-of-type:last-child {
+            margin-inline-end: -$space-300; // TODO: refactor negative margin
+          }
+        }
+      }
+      .las,
+      i {
+        @include size($space-300);
+        font-size: 24px;
+        margin-inline-end: $space-150;
+      }
+    }
+  }
+}

package/dist/assets/styles/tooltip.scss

@@ -0,0 +1,123 @@
+@use "../tokens/colors" as *;
+@use "../tokens/border-radius" as *;
+@use "../tokens/box-shadows" as *;
+@use "../tokens/spacings" as *;
+@use "../tokens/font-sizes" as *;
+@use "../tokens/line-heights" as *;
+@use "../tokens/font-weights" as *;
+@use "../tokens/font-families" as *;
+@use "../tokens/z-indexes" as *;
+
+.mc-tooltip {
+  --tooltip-color: #{$color-black};
+  --tooltip-text-color: #{$color-white};
+  font-family: $font-family-main;
+  text-transform: none;
+  font-size: $font-size-200;
+  line-height: $line-height-200;
+  user-select: none;
+  pointer-events: none;
+  position: absolute;
+  font-weight: $font-weight-normal;
+  text-align: center;
+
+  border-radius: $radius-100;
+  box-shadow: $shadow-s;
+  padding: $space-100 $space-150;
+  background: var(--tooltip-color);
+  color: var(--tooltip-text-color);
+  z-index: $z-index-toasted;
+  white-space: normal;
+  word-break: break-word;
+  width: max-content;
+  transition: all 0.3s ease;
+  & > * {
+    display: inline-block;
+  }
+  &[tooltip-arrow="true"]::before {
+    content: "";
+    border: 5px solid transparent;
+    z-index: 1001;
+    position: absolute;
+  }
+  &:hover:before,
+  &:hover:after {
+    display: block;
+  }
+  &[tooltip-size="xs"]::after {
+    max-width: 180px;
+  }
+  &[tooltip-size="s"]::after {
+    max-width: 250px;
+  }
+  &[tooltip-size="m"]::after {
+    max-width: 320px;
+  }
+  &[tooltip-size="l"]::after {
+    max-width: 380px;
+    font-size: $font-size-300;
+  }
+  &[tooltip-size="xl"]::after {
+    max-width: 500px;
+    font-size: $font-size-300;
+  }
+
+  &[tooltip-placement^="top"],
+  &[tooltip-placement^="bottom"] {
+    animation: tooltips-vert 300ms ease-out forwards;
+  }
+  &[tooltip-placement^="left"],
+  &[tooltip-placement^="right"] {
+    animation: tooltips-horz 300ms ease-out forwards;
+  }
+
+
+
+  /* position: Top */
+  &[tooltip-placement^="top"]::before {
+    top: 100%;
+    left: 50%;
+    border-bottom-width: 0;
+    border-top-color: var(--tooltip-color);
+    transform: translate(-50%, 0);
+  }
+
+  /* position: Bottom */
+  &[tooltip-placement^="bottom"]::before {
+    top: 0;
+    left: 50%;
+    border-top-width: 0;
+    border-bottom-color: var(--tooltip-color);
+    transform: translate(-50%, -100%);
+  }
+
+  /* position: Left */
+  &[tooltip-placement^="left"]::before {
+    top: 50%;
+    left: 100%;
+    border-right-width: 0;
+    border-left-color: var(--tooltip-color);
+    transform: translate(0, -50%);
+  }
+
+  /* position: Right */
+  &[tooltip-placement^="right"]::before {
+    top: 50%;
+    left: 0;
+    border-left-width: 0;
+    border-right-color: var(--tooltip-color);
+    transform: translate(-100%, -50%);
+  }
+}
+
+@keyframes tooltips-vert {
+  to {
+    opacity: 0.9;
+  }
+}
+
+@keyframes tooltips-horz {
+  to {
+    opacity: 0.9;
+  }
+}

package/dist/assets/tokens/animations.scss

@@ -0,0 +1,57 @@
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+}
+@keyframes rotate-reverse {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(-359deg);
+  }
+}
+
+@keyframes slide-up {
+  from {
+    opacity: 0;
+    transform: translate3d(0, 100%, 0);
+  }
+  to {
+    opacity: 1;
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes slide-up-with-margin {
+  from {
+    opacity: 0;
+    margin-top: 30px;
+  }
+  to {
+    opacity: 1;
+    margin-top: 0;
+  }
+}
+
+@keyframes glow {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+/**
+ * @tokens Animations
+ * @presenter Animation
+ */
+
+$animation-slide-up: slide-up 0.3s;
+$animation-slide-up-with-margin: slide-up-with-margin 0.3s;
+$animation-spinner: rotate 1.2s infinite cubic-bezier(0.55, 0, 0.1, 1);
+$animation-glow: glow 1.5s ease-in-out infinite;

package/dist/assets/tokens/border-radius.scss

@@ -0,0 +1,23 @@
+$radius-square: 0px;
+$radius-50: 4px;
+$radius-100: 8px;
+$radius-150: 12px;
+$radius-200: 16px;
+$radius-300: 24px;
+$radius-400: 32px;
+$radius-1250: 100px;
+$radius-rounded: 300px;
+$radius-circle: 50%;
+
+$token-radius: (
+  "square": $radius-square,
+  "50": $radius-50,
+  "100": $radius-100,
+  "150": $radius-150,
+  "200": $radius-200,
+  "300": $radius-300,
+  "400": $radius-400,
+  "1250": $radius-1250,
+  "rounded": $radius-rounded,
+  "circle": $radius-circle
+);

package/dist/assets/tokens/box-shadows.scss

@@ -0,0 +1,22 @@
+$shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.16);
+$shadow-s: 0 4px 12px rgba(0, 0, 0, 0.16);
+$shadow-m: 0 12px 32px rgba(0, 0, 0, 0.24);
+$shadow-l: 0 24px 40px rgba(0, 0, 0, 0.16);
+$shadow-xs-blue: 0px 2px 8px rgba(51, 68, 153, 0.1);
+$shadow-s-blue: 0 4px 12px rgba(51, 68, 153, 0.1);
+$shadow-m-blue: 0 12px 32px rgba(51, 68, 153, 0.2);
+$shadow-xs-purple: 0px 2px 8px rgba(91, 44, 205, 0.1);
+$shadow-s-purple: 0 4px 12px rgba(91, 44, 205, 0.1);
+$shadow-m-purple: 0 12px 32px rgba(91, 44, 205, 0.2);
+$token-shadows: (
+  'xs': $shadow-xs,
+  's': $shadow-s,
+  'm': $shadow-m,
+  'l': $shadow-l,
+  'xs-blue': $shadow-xs-blue,
+  's-blue': $shadow-s-blue,
+  'm-blue': $shadow-m-blue,
+  'xs-purple': $shadow-xs-purple,
+  's-purple': $shadow-s-purple,
+  'm-purple': $shadow-m-purple,
+);

package/dist/assets/tokens/colors.scss

@@ -0,0 +1,81 @@
+/**
+ * @tokens Colors
+ * @presenter Color
+ */
+//neutral colors
+$color-black: #202427; /* Цвет основного текста */
+$color-dark-gray: #5C6670; /* Иконки, доп.текст, менее активные эл-ты */
+$color-gray: #8F99A3; /* Для плашек, хорошо держит форму */
+$color-outline-gray: #C7CCD1; /* Для обводок */
+$color-outline-light: #DEE0E2; /* Для обводок */
+$color-hover-gray: #EDF0F3; /* Ховеры и неактивные эл-ты */
+$color-bg-gray: #F5F6Fa; /* Бэкграунд */
+$color-white: #FFFFFF; /* Основной фон */
+//main colors
+$color-hover-purple: #7238FF; /* Кнопки, ссылки, выделение активных элементов */
+$color-purple: #8756FF; /* Кнопки, ссылки, выделение активных элементов и иконки */
+$color-light-purple: #CBB7FF; /* Текст на accent purple */
+$color-lighter-purple: #EEE8FF; /* Выбранные элементы */
+$color-bg-purple: #9673ED; /* Цвет для бэкграунда */
+$color-primary-bg: #F5F6Fa; /* Цвет основного фона */
+//additional colors
+$color-hover-blue: #0A54C2; /* Альтернатива – Кнопки, ссылки, выделение активных элементов */
+$color-blue: #2578F4; /* Альтернатива – Кнопки, ссылки, выделение активных элементов и иконки */
+$color-light-blue: #92BBFA; /* Альтернатива – Текст на accent blue */
+$color-lighter-blue: #E1EDFF; /* Альтернатива – Выбранные элементы */
+
+$color-dark-orange: #BD8400; /* Кнопки, статус данных */
+$color-orange: #FCB100; /* Кнопки, статус данных */
+$color-yellow: #FFC60A;
+$color-dark-red: #D5260B; /* Красные кнопки отмены */
+$color-bright-pink: #e8178a; /* Promo color */
+$color-red: #F5563D; /* Красные кнопки отмены */
+$color-pale-pink: #FC9283;
+$color-dark-green: #218321; /* Цифры и положительные действия */
+$color-green: #4DCB4D; /* Зелёные кнопки */
+$color-toxic: #E8F443; /* Кнопки, статус данных */
+
+$color-ultraviolet: #C41CFD; /* Статус данных */
+$color-pinkish: #F073B1; /* Статус данных */
+$color-azure: #0A85C2; /* Статус данных */
+
+$color-turquoise: #4EA9A2; /* Нотификации вверху страницы */
+$color-darken-turquoise: #2F8C99; /* Кастомные тултипы */
+
+$color-transparent: transparent; /* Прозрачный фон */
+
+$token-colors: (
+        "purple": $color-purple,
+        "hover-purple": $color-hover-purple,
+        "light-purple": $color-light-purple,
+        "bg-purple": $color-bg-purple,
+        "lighter-purple": $color-lighter-purple,
+        "black": $color-black,
+        "outline-light": $color-outline-light,
+        "dark-gray": $color-dark-gray,
+        "gray": $color-gray,
+        "outline-gray": $color-outline-gray,
+        "hover-gray": $color-hover-gray,
+        "bg-gray": $color-bg-gray,
+        "white": $color-white,
+        "hover-blue": $color-hover-blue,
+        "blue": $color-blue,
+        "light-blue": $color-light-blue,
+        "lighter-blue": $color-lighter-blue,
+        "dark-orange": $color-dark-orange,
+        "orange": $color-orange,
+        "yellow": $color-yellow,
+        "dark-red": $color-dark-red,
+        "red": $color-red,
+        "bright-pink": $color-bright-pink,
+        "pale-pink": $color-pale-pink,
+        "dark-green": $color-dark-green,
+        "green": $color-green,
+        "toxic": $color-toxic,
+        "ultraviolet": $color-ultraviolet,
+        "pinkish": $color-pinkish,
+        "azure": $color-azure,
+        "turquoise": $color-turquoise,
+        "darken-turquoise": $color-darken-turquoise,
+        "transparent": $color-transparent,
+);

package/dist/assets/tokens/durations.scss

@@ -0,0 +1,13 @@
+/**
+  * @tokens Durations
+  */
+
+$duration-s: 150ms;
+$duration-m: 300ms;
+$duration-l: 500ms;
+
+$token-durations: (
+ 's': $duration-s,
+ 'm': $duration-m,
+ 'l': $duration-l,
+);

package/dist/assets/tokens/easings.scss

@@ -0,0 +1,6 @@
+/**
+ * @tokens Easings
+ * @presenter Easing
+ */
+
+$easing-swift: cubic-bezier(0.55, 0, 0.1, 1);

package/dist/assets/tokens/font-families.scss

@@ -0,0 +1,8 @@
+/**
+ * @tokens Font Families
+ * @presenter FontFamily
+ */
+
+$font-family-main: 'Inter', sans-serif;
+$font-family-additional: 'Source Serif Pro', serif;
+

package/dist/assets/tokens/font-sizes.scss

@@ -0,0 +1,23 @@
+/**
+  * @tokens Font Sizes
+  * @presenter FontSize
+  */
+
+$font-size-100: 10px;
+$font-size-200: 13px;
+$font-size-300: 16px;
+$font-size-400: 20px;
+$font-size-500: 28px;
+$font-size-600: 32px;
+$font-size-700: 48px;
+
+$token-font-sizes: (
+  "100": $font-size-100,
+  "200": $font-size-200,
+  "300": $font-size-300,
+  "400": $font-size-400,
+  "500": $font-size-500,
+  "600": $font-size-600,
+  "700": $font-size-700,
+);
+

package/dist/assets/tokens/font-weights.scss

@@ -0,0 +1,16 @@
+/**
+ * @tokens Font Weights
+ * @presenter FontWeight
+ */
+
+$font-weight-normal: 400;
+$font-weight-medium: 500;
+$font-weight-semi-bold: 600;
+$font-weight-bold: 700;
+
+$token-font-weights: (
+    "normal": $font-weight-normal,
+    "medium": $font-weight-medium,
+    "semi-bold": $font-weight-semi-bold,
+    "bold": $font-weight-bold,
+);

package/dist/assets/tokens/gradients.scss

@@ -0,0 +1,18 @@
+@use "colors" as *;
+/**
+  * @tokens Gradients
+  * @presenter Gradient
+  */
+$gradient-pink: linear-gradient(180deg, #F5576C 0%, #F093FB 100%); /* Фирменный цвет личного кабинета */
+$gradient-violet: linear-gradient(180deg, #E41AFE 0%, #8035F8 100%); /* Столбики в графике 5 порядка */
+$gradient-blue: linear-gradient(180deg, #1ADBFE 0%, #3580F8 100%); /* Нотификации и столбики в графике 4 порядка */
+$gradient-yellow: linear-gradient(180deg, #FEE41A 0%, #F89B35 100%); /* Столбики в графике 3 порядка */
+$gradient-green: linear-gradient(180deg, #C9DD4C 0%, #63BE7E 100%); /* Столбики в графике 2 порядка */
+$gradient-red: linear-gradient(180deg, #F26567 0%, #F79440 100%); /* Столбики в графике 1 порядка */
+$gradient-purple: linear-gradient(270deg, #9a47ed 0%, #8446ff 100%); /* Основной градиент для MCPay */
+$gradient-purple-pink: linear-gradient(90deg, #722eff 2%, #fe6ffc 100%); /*Градиент промоакции*/
+$gradient-blue-purple: linear-gradient(90deg, #18bfe3 20%, #8756ff 70%); /*Градиент промоакции*/
+$gradient-dark-blue: linear-gradient(90deg, #5550EF 0%, #7F4EFF 100%); /*Градиент автоплатежей*/
+
+$gradient-primary-radial: radial-gradient(rgb(179, 211, 255), rgb(62, 132, 244)); /* Radial gradient example */
+

package/dist/assets/tokens/json/animations.json

@@ -0,0 +1,6 @@
+{
+  "$animation-slide-up": "slide-up 0.3s",
+  "$animation-slide-up-with-margin": "slide-up-with-margin 0.3s",
+  "$animation-spinner": "rotate 1.2s infinite cubic-bezier(0.55, 0, 0.1, 1)",
+  "$animation-glow": "glow 1.5s ease-in-out infinite"
+}

package/dist/assets/tokens/json/border-radius.json

@@ -0,0 +1,24 @@
+{
+  "$radius-square": "0px",
+  "$radius-50": "4px",
+  "$radius-100": "8px",
+  "$radius-150": "12px",
+  "$radius-200": "16px",
+  "$radius-300": "24px",
+  "$radius-400": "32px",
+  "$radius-1250": "100px",
+  "$radius-rounded": "300px",
+  "$radius-circle": "50%",
+  "$token-radius": {
+    "50": "4px",
+    "100": "8px",
+    "150": "12px",
+    "200": "16px",
+    "300": "24px",
+    "400": "32px",
+    "1250": "100px",
+    "square": "0px",
+    "rounded": "300px",
+    "circle": "50%"
+  }
+}

package/dist/assets/tokens/json/box-shadows.json

@@ -0,0 +1,24 @@
+{
+  "$shadow-xs": "0 2px 8px rgba(0, 0, 0, 0.16)",
+  "$shadow-s": "0 4px 12px rgba(0, 0, 0, 0.16)",
+  "$shadow-m": "0 12px 32px rgba(0, 0, 0, 0.24)",
+  "$shadow-l": "0 24px 40px rgba(0, 0, 0, 0.16)",
+  "$shadow-xs-blue": "0px 2px 8px rgba(51, 68, 153, 0.1)",
+  "$shadow-s-blue": "0 4px 12px rgba(51, 68, 153, 0.1)",
+  "$shadow-m-blue": "0 12px 32px rgba(51, 68, 153, 0.2)",
+  "$shadow-xs-purple": "0px 2px 8px rgba(91, 44, 205, 0.1)",
+  "$shadow-s-purple": "0 4px 12px rgba(91, 44, 205, 0.1)",
+  "$shadow-m-purple": "0 12px 32px rgba(91, 44, 205, 0.2)",
+  "$token-shadows": {
+    "xs": "0 2px 8px rgba(0, 0, 0, 0.16)",
+    "s": "0 4px 12px rgba(0, 0, 0, 0.16)",
+    "m": "0 12px 32px rgba(0, 0, 0, 0.24)",
+    "l": "0 24px 40px rgba(0, 0, 0, 0.16)",
+    "xs-blue": "0px 2px 8px rgba(51, 68, 153, 0.1)",
+    "s-blue": "0 4px 12px rgba(51, 68, 153, 0.1)",
+    "m-blue": "0 12px 32px rgba(51, 68, 153, 0.2)",
+    "xs-purple": "0px 2px 8px rgba(91, 44, 205, 0.1)",
+    "s-purple": "0 4px 12px rgba(91, 44, 205, 0.1)",
+    "m-purple": "0 12px 32px rgba(91, 44, 205, 0.2)"
+  }
+}

package/dist/assets/tokens/json/colors.json

@@ -0,0 +1,71 @@
+{
+  "$color-black": "#202427",
+  "$color-dark-gray": "#5C6670",
+  "$color-gray": "#8F99A3",
+  "$color-outline-gray": "#C7CCD1",
+  "$color-outline-light": "#DEE0E2",
+  "$color-hover-gray": "#EDF0F3",
+  "$color-bg-gray": "#F5F6Fa",
+  "$color-white": "#FFFFFF",
+  "$color-hover-purple": "#7238FF",
+  "$color-purple": "#8756FF",
+  "$color-light-purple": "#CBB7FF",
+  "$color-lighter-purple": "#EEE8FF",
+  "$color-bg-purple": "#9673ED",
+  "$color-primary-bg": "#F5F6Fa",
+  "$color-hover-blue": "#0A54C2",
+  "$color-blue": "#2578F4",
+  "$color-light-blue": "#92BBFA",
+  "$color-lighter-blue": "#E1EDFF",
+  "$color-dark-orange": "#BD8400",
+  "$color-orange": "#FCB100",
+  "$color-yellow": "#FFC60A",
+  "$color-dark-red": "#D5260B",
+  "$color-bright-pink": "#e8178a",
+  "$color-red": "#F5563D",
+  "$color-pale-pink": "#FC9283",
+  "$color-dark-green": "#218321",
+  "$color-green": "#4DCB4D",
+  "$color-toxic": "#E8F443",
+  "$color-ultraviolet": "#C41CFD",
+  "$color-pinkish": "#F073B1",
+  "$color-azure": "#0A85C2",
+  "$color-turquoise": "#4EA9A2",
+  "$color-darken-turquoise": "#2F8C99",
+  "$color-transparent": "transparent",
+  "$token-colors": {
+    "purple": "#8756FF",
+    "hover-purple": "#7238FF",
+    "light-purple": "#CBB7FF",
+    "bg-purple": "#9673ED",
+    "lighter-purple": "#EEE8FF",
+    "black": "#202427",
+    "outline-light": "#DEE0E2",
+    "dark-gray": "#5C6670",
+    "gray": "#8F99A3",
+    "outline-gray": "#C7CCD1",
+    "hover-gray": "#EDF0F3",
+    "bg-gray": "#F5F6Fa",
+    "white": "#FFFFFF",
+    "hover-blue": "#0A54C2",
+    "blue": "#2578F4",
+    "light-blue": "#92BBFA",
+    "lighter-blue": "#E1EDFF",
+    "dark-orange": "#BD8400",
+    "orange": "#FCB100",
+    "yellow": "#FFC60A",
+    "dark-red": "#D5260B",
+    "red": "#F5563D",
+    "bright-pink": "#e8178a",
+    "pale-pink": "#FC9283",
+    "dark-green": "#218321",
+    "green": "#4DCB4D",
+    "toxic": "#E8F443",
+    "ultraviolet": "#C41CFD",
+    "pinkish": "#F073B1",
+    "azure": "#0A85C2",
+    "turquoise": "#4EA9A2",
+    "darken-turquoise": "#2F8C99",
+    "transparent": "transparent"
+  }
+}

package/dist/assets/tokens/json/durations.json

@@ -0,0 +1,10 @@
+{
+  "$duration-s": "150ms",
+  "$duration-m": "300ms",
+  "$duration-l": "500ms",
+  "$token-durations": {
+    "s": "150ms",
+    "m": "300ms",
+    "l": "500ms"
+  }
+}

package/dist/assets/tokens/json/easings.json

@@ -0,0 +1,3 @@
+{
+  "$easing-swift": "cubic-bezier(0.55, 0, 0.1, 1)"
+}

package/dist/assets/tokens/json/font-families.json

@@ -0,0 +1,4 @@
+{
+  "$font-family-main": "'Inter', sans-serif",
+  "$font-family-additional": "'Source Serif Pro', serif"
+}

package/dist/assets/tokens/json/font-sizes.json

@@ -0,0 +1,18 @@
+{
+  "$font-size-100": "10px",
+  "$font-size-200": "13px",
+  "$font-size-300": "16px",
+  "$font-size-400": "20px",
+  "$font-size-500": "28px",
+  "$font-size-600": "32px",
+  "$font-size-700": "48px",
+  "$token-font-sizes": {
+    "100": "10px",
+    "200": "13px",
+    "300": "16px",
+    "400": "20px",
+    "500": "28px",
+    "600": "32px",
+    "700": "48px"
+  }
+}

package/dist/assets/tokens/json/font-weights.json

@@ -0,0 +1,12 @@
+{
+  "$font-weight-normal": "400",
+  "$font-weight-medium": "500",
+  "$font-weight-semi-bold": "600",
+  "$font-weight-bold": "700",
+  "$token-font-weights": {
+    "normal": "400",
+    "medium": "500",
+    "semi-bold": "600",
+    "bold": "700"
+  }
+}

package/dist/assets/tokens/json/gradients.json

@@ -0,0 +1,13 @@
+{
+  "$gradient-pink": "linear-gradient(180deg, #F5576C 0%, #F093FB 100%)",
+  "$gradient-violet": "linear-gradient(180deg, #E41AFE 0%, #8035F8 100%)",
+  "$gradient-blue": "linear-gradient(180deg, #1ADBFE 0%, #3580F8 100%)",
+  "$gradient-yellow": "linear-gradient(180deg, #FEE41A 0%, #F89B35 100%)",
+  "$gradient-green": "linear-gradient(180deg, #C9DD4C 0%, #63BE7E 100%)",
+  "$gradient-red": "linear-gradient(180deg, #F26567 0%, #F79440 100%)",
+  "$gradient-purple": "linear-gradient(270deg, #9a47ed 0%, #8446ff 100%)",
+  "$gradient-purple-pink": "linear-gradient(90deg, #722eff 2%, #fe6ffc 100%)",
+  "$gradient-blue-purple": "linear-gradient(90deg, #18bfe3 20%, #8756ff 70%)",
+  "$gradient-dark-blue": "linear-gradient(90deg, #5550EF 0%, #7F4EFF 100%)",
+  "$gradient-primary-radial": "radial-gradient(rgb(179, 211, 255), rgb(62, 132, 244))"
+}