indicator-ui 0.0.1

package/dist/scss/index.scss

@@ -0,0 +1,2 @@
+@forward "ui";
+@forward "styles";

package/dist/scss/styles/colors/index.scss

@@ -0,0 +1,2 @@
+@forward "primary";
+@forward "secondary";

package/dist/scss/styles/colors/primary.scss

@@ -0,0 +1,54 @@
+$base-white: #FFFFFF !default;
+$base-black: #000000 !default;
+
+$gray-25: #FCFCFD !default;
+$gray-50: #F9FAFB !default;
+$gray-100: #F2F4F7 !default;
+$gray-200: #EAECF0 !default;
+$gray-300: #D0D5DD !default;
+$gray-400: #98A2B3 !default;
+$gray-500: #667085 !default;
+$gray-600: #475467 !default;
+$gray-700: #344054 !default;
+$gray-800: #1D2939 !default;
+$gray-900: #101828 !default;
+$gray-950: #0C111D !default;
+
+$primary-25: #FCFAFF !default;
+$primary-50: #F9F5FF !default;
+$primary-100: #F4EBFF !default;
+$primary-200: #E9D7FE !default;
+$primary-300: #D6BBFB !default;
+$primary-400: #B692F6 !default;
+$primary-500: #9E77ED !default;
+$primary-600: #7F56D9 !default;
+$primary-700: #6941C6 !default;
+$primary-800: #53389E !default;
+$primary-900: #42307D !default;
+$primary-950: #2C1C5F !default;
+
+$error-25: #FFFBFA !default;
+$error-50: #FEF3F2 !default;
+$error-100: #FEE4E2 !default;
+$error-200: #FECDCA !default;
+$error-300: #FDA29B !default;
+$error-400: #F97066 !default;
+$error-500: #F04438 !default;
+$error-600: #D92D20 !default;
+$error-700: #B42318 !default;
+$error-800: #912018 !default;
+$error-900: #7A271A !default;
+$error-950: #FEFDF0 !default;
+
+$warning-25: #FFFCF5 !default;
+$warning-50: #FFFAEB !default;
+$warning-100: #FEF0C7 !default;
+$warning-200: #FEDF89 !default;
+$warning-300: #FEC84B !default;
+$warning-400: #FDB022 !default;
+$warning-500: #F79009 !default;
+$warning-600: #DC6803 !default;
+$warning-700: #B54708 !default;
+$warning-800: #93370D !default;
+$warning-900: #7A2E0E !default;
+$warning-950: #4E1D09 !default;

package/dist/scss/styles/colors/secondary.scss

@@ -0,0 +1,12 @@
+$blue-dark-25: #F5F8FF !default;
+$blue-dark-50: #EFF4FF !default;
+$blue-dark-100: #D1E0FF !default;
+$blue-dark-200: #B2CCFF !default;
+$blue-dark-300: #84ADFF !default;
+$blue-dark-400: #528BFF !default;
+$blue-dark-500: #2970FF !default;
+$blue-dark-600: #155EEF !default;
+$blue-dark-700: #004EEB !default;
+$blue-dark-800: #0040C1 !default;
+$blue-dark-900: #00359E !default;
+$blue-dark-950: #002266 !default;

package/dist/scss/styles/fonts.scss

@@ -0,0 +1,31 @@
+@font-face {
+  font-family: "Golos UI";
+  src: local("Golos UI"),
+  url("./fontsAssets/Golos-UI/golos-ui_regular.ttf") format("truetype"),
+  url("./fontsAssets/Golos-UI/golos-ui_regular.woff2") format("woff2"),
+  url("./fontsAssets/Golos-UI/golos-ui_regular.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Golos UI";
+  src: local("Golos UI"),
+  url("./fontsAssets/Golos-UI/golos-ui_medium.ttf") format("truetype"),
+  url("./fontsAssets/Golos-UI/golos-ui_medium.woff2") format("woff2"),
+  url("./fontsAssets/Golos-UI/golos-ui_medium.woff") format("woff");
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Golos UI";
+  src: local("Golos UI"),
+  url("./fontsAssets/Golos-UI/golos-ui_bold.ttf") format("truetype"),
+  url("./fontsAssets/Golos-UI/golos-ui_bold.woff2") format("woff2"),
+  url("./fontsAssets/Golos-UI/golos-ui_bold.woff") format("woff");
+  font-weight: 600;
+  font-style: normal;
+}
+
+$golos-ui: 'Golos UI', sans-serif;

package/dist/scss/styles/index.scss

@@ -0,0 +1,3 @@
+@forward "mixins";
+@forward "colors";
+@forward "fonts";

package/dist/scss/styles/mixins/centerInsideContent.scss

@@ -0,0 +1,5 @@
+@mixin centerInsideContent {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/dist/scss/styles/mixins/changeSvg.scss

@@ -0,0 +1,26 @@
+@mixin changeSvg($stroke: null, $fill: null, $width: null, $height: null, $flex: null) {
+  & {
+    svg {
+      @if ($width != null) {
+        width: #{$width}px;
+      }
+      @if ($height != null) {
+        height: #{$height}px;
+      }
+
+      @if ($flex != null) {
+        flex: $flex;
+      }
+
+      * {
+        @if ($stroke != null) {
+          stroke: $stroke;
+        }
+
+        @if ($fill != null) {
+          fill: $fill;
+        }
+      }
+    }
+  }
+}

package/dist/scss/styles/mixins/fnt-flex.scss

@@ -0,0 +1,35 @@
+@use "../fonts";
+
+@mixin fnt-flex(
+  $size: null,
+  $line-height: null,
+  $color: null,
+  $weight: null,
+  $family: fonts.$golos-ui,
+  $stretch: normal,
+  $style: normal,
+  $variant: normal,
+) {
+  & {
+    @if ($size != null) {
+      font-size: #{$size}px;
+    }
+    @if ($line-height != null) {
+      line-height: #{$line-height}px;
+    }
+    @if ($line-height != null) {
+      line-height: #{$line-height}px;
+    }
+    @if ($weight != null) {
+      font-weight: $weight;
+    }
+    @if ($color != null) {
+      color: $color;
+    }
+
+    font-family: $family;
+    font-stretch: $stretch;
+    font-style: $style;
+    font-variant: $variant;
+  }
+}

package/dist/scss/styles/mixins/fnt.scss

@@ -0,0 +1,24 @@
+@use "../fonts";
+
+@mixin fnt(
+  $size: 16,
+  $line-height: 24,
+  $color: black,
+  $weight: 400,
+  $family: fonts.$golos-ui,
+  $stretch: normal,
+  $style: normal,
+  $variant: normal,
+) {
+
+  & {
+    font-size: #{$size}px;
+    line-height: #{$line-height}px;
+    color: $color;
+    font-weight: $weight;
+    font-family: $family;
+    font-stretch: $stretch;
+    font-style: $style;
+    font-variant: $variant;
+  }
+}

package/dist/scss/styles/mixins/index.scss

@@ -0,0 +1,6 @@
+@forward "fnt";
+@forward "fnt-flex";
+@forward "modify-flex";
+@forward "modify-svg";
+@forward "centerInsideContent";
+@forward "changeSvg";

package/dist/scss/styles/mixins/modify-flex.scss

@@ -0,0 +1,18 @@
+@mixin modify-flex($direction: null, $justify-content: null, $align-items: null) {
+  & {
+    display: flex;
+
+    @if ($direction != null) {
+      flex-direction: $direction;
+    }
+
+    @if ($justify-content != null) {
+      justify-content: $justify-content;
+    }
+
+    @if ($align-items != null) {
+      align-items: $align-items;
+    }
+    @content;
+  }
+}

package/dist/scss/styles/mixins/modify-svg.scss

@@ -0,0 +1,19 @@
+@mixin modify-svg($stroke: null, $fill: null) {
+  & {
+    svg {
+      * {
+        @if ($stroke != null) {
+          stroke: $stroke;
+        }
+
+        @if ($fill != null) {
+          fill: $fill;
+        }
+      }
+
+      & {
+        @content;
+      }
+    }
+  }
+}

package/dist/scss/test/global.scss

@@ -0,0 +1,13 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  outline: none;
+  border: none;
+  text-decoration: none;
+
+  button {
+    cursor: pointer;
+    background: none;
+  }
+}

package/dist/scss/ui/Buttons/index.scss

@@ -0,0 +1 @@
+@forward "styles";

package/dist/scss/ui/Buttons/styles/index.scss

@@ -0,0 +1 @@
+@forward "mixins";

package/dist/scss/ui/Buttons/styles/mixins/baseButton.scss

@@ -0,0 +1,29 @@
+@use '../../../../styles' as *;
+
+@mixin baseButton() {
+  @include modify-flex(row, center, center);
+
+  .icon {
+    width: fit-content;
+    height: fit-content;
+    @include modify-flex(row, center, center);
+  }
+
+  &.widthFill {
+    width: 100%;
+    flex: 1;
+  }
+
+  &.widthHug {
+    width: fit-content;
+  }
+
+  &.heightFill {
+    height: 100%;
+    flex: 1;
+  }
+
+  &.heightHug {
+    height: fit-content;
+  }
+}

package/dist/scss/ui/Buttons/styles/mixins/button.scss

@@ -0,0 +1,80 @@
+@use 'baseButton';
+@use 'properties';
+
+@mixin insertButton() {
+  .button {
+    @include baseButton.baseButton();
+
+    &.small {
+      @include properties.smallButton;
+    }
+
+    &.medium {
+      @include properties.mediumButton;
+    }
+
+    &.large {
+      @include properties.largeButton;
+    }
+
+    &.ultra {
+      @include properties.ultraButton;
+    }
+
+    &.primary {
+      @include properties.primaryButton;
+    }
+
+    &.secondaryColor {
+      @include properties.secondaryColorButton;
+    }
+
+    &.secondaryGray {
+      @include properties.secondaryGrayButton;
+    }
+
+    &.tertiaryWhite {
+      @include properties.tertiaryWhiteButton;
+    }
+
+    &.tertiaryColor {
+      @include properties.tertiaryColorButton;
+    }
+
+    &.tertiaryGray {
+      @include properties.tertiaryGrayButton;
+    }
+
+    &.linkColor {
+      @include properties.linkColorButton;
+    }
+
+    &.linkBlack {
+      @include properties.linkBlackButton;
+    }
+
+    &.linkGray {
+      @include properties.linkGrayButton;
+    }
+
+    &.tabActive {
+      @include properties.tabActiveButton;
+    }
+
+    &.tab {
+      @include properties.tabButton;
+    }
+
+    &.warning {
+      &.primary {
+        @include properties.warningPrimaryButton;
+      }
+    }
+
+    &.warning {
+      &.secondaryColor {
+        @include properties.warningSecondaryColorButton;
+      }
+    }
+  }
+}

package/dist/scss/ui/Buttons/styles/mixins/index.scss

@@ -0,0 +1,3 @@
+@forward "button";
+@forward "baseButton";
+@forward "properties";

package/dist/scss/ui/Buttons/styles/mixins/properties/index.scss

@@ -0,0 +1,20 @@
+// Hierarchy
+@forward "primary";
+@forward "secondary-color";
+@forward "secondary-gray";
+@forward "tertiary-white";
+@forward "tertiary-color";
+@forward "tertiary-gray";
+@forward "tab-active";
+@forward "tab";
+@forward "link-color";
+@forward "link-black";
+@forward "link-gray";
+@forward "warning-primary";
+@forward "warning-secondary-color";
+
+// Sizes
+@forward "small";
+@forward "medium";
+@forward "large";
+@forward "ultra";

package/dist/scss/ui/Buttons/styles/mixins/properties/large.scss

@@ -0,0 +1,20 @@
+@use '../../../../../styles' as *;
+
+@mixin largeButton {
+  padding: 10px;
+
+  .icon {
+    @include modify-svg() {
+      & {
+        flex: none;
+        width: 20px;
+        height: 20px;
+      }
+    }
+  }
+
+  .text {
+    padding: 0 6px;
+    @include fnt-flex($size: 14, $line-height: 20, $weight: 500);
+  }
+}

package/dist/scss/ui/Buttons/styles/mixins/properties/link-black.scss

@@ -0,0 +1,29 @@
+@use '../../../../../styles' as *;
+
+@mixin linkBlackButton {
+  padding: 0 !important;
+  gap: 4px;
+
+  .icon {
+    @include modify-svg($stroke: $gray-700);
+  }
+
+  .text {
+    color: $gray-700;
+    padding: 0 !important;
+  }
+
+  &:hover {
+    .text {
+      color: $gray-900;
+    }
+
+    .icon {
+      @include modify-svg($stroke: $gray-900);
+    }
+  }
+
+  &:disabled {
+    opacity: 0.5;
+  }
+}

package/dist/scss/ui/Buttons/styles/mixins/properties/link-color.scss

@@ -0,0 +1,29 @@
+@use '../../../../../styles' as *;
+
+@mixin linkColorButton {
+  padding: 0 !important;
+  gap: 4px;
+
+  .icon {
+    @include modify-svg($stroke: $blue-dark-500);
+  }
+
+  .text {
+    color: $blue-dark-500;
+    padding: 0 !important;
+  }
+
+  &:hover {
+    .text {
+      color: $blue-dark-700;
+    }
+
+    .icon {
+      @include modify-svg($stroke: $blue-dark-700);
+    }
+  }
+
+  &:disabled {
+    opacity: 0.5;
+  }
+}

package/dist/scss/ui/Buttons/styles/mixins/properties/link-gray.scss

@@ -0,0 +1,29 @@
+@use '../../../../../styles' as *;
+
+@mixin linkGrayButton {
+  padding: 0 !important;
+  gap: 4px;
+
+  .icon {
+    @include modify-svg($stroke: $gray-400);
+  }
+
+  .text {
+    color: $gray-400;
+    padding: 0 !important;
+  }
+
+  &:hover {
+    .text {
+      color: $gray-500;
+    }
+
+    .icon {
+      @include modify-svg($stroke: $gray-500);
+    }
+  }
+
+  &:disabled {
+    opacity: 0.5;
+  }
+}

package/dist/scss/ui/Buttons/styles/mixins/properties/medium.scss

@@ -0,0 +1,20 @@
+@use '../../../../../styles' as *;
+
+@mixin mediumButton {
+  padding: 10px;
+
+  .icon {
+    @include modify-svg() {
+      & {
+        flex: none;
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+
+  .text {
+    padding: 0 8px;
+    @include fnt-flex($size: 14, $line-height: 20, $weight: 500);
+  }
+}

package/dist/scss/ui/Buttons/styles/mixins/properties/primary.scss

@@ -0,0 +1,28 @@
+@use '../../../../../styles' as *;
+
+@mixin primaryButton {
+  border-radius: 8px;
+  background-color: $blue-dark-500;
+  box-shadow: 0 1px 2px 0 #1018280D;
+
+  .icon {
+    @include modify-svg($stroke: $base-white);
+  }
+
+  .text {
+    color: $base-white;
+  }
+
+  &:hover {
+    background-color: $blue-dark-600;
+  }
+
+  &:focus {
+    background-color: $blue-dark-500;
+    box-shadow: 0 0 0 4px $gray-100, 0 1px 2px 0 #1018280D;
+  }
+
+  &:disabled {
+    opacity: 0.3;
+  }
+}

package/dist/scss/ui/Buttons/styles/mixins/properties/secondary-color.scss

@@ -0,0 +1,28 @@
+@use '../../../../../styles' as *;
+
+@mixin secondaryColorButton {
+  border-radius: 8px;
+  background-color: $base-white;
+  box-shadow: 0 1px 2px 0 #1018280D, 0 0 0 1px $blue-dark-200;
+
+  .icon {
+    @include modify-svg($stroke: $blue-dark-500);
+  }
+
+  .text {
+    color: $blue-dark-500;
+  }
+
+  &:hover {
+    background-color: $blue-dark-50;
+    box-shadow: 0 1px 2px 0 #1018280D, 0 0 0 1px $blue-dark-300;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 4px $gray-100, 0 1px 2px 0 #1018280D, 0 0 0 1px $blue-dark-300;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+  }
+}

package/dist/scss/ui/Buttons/styles/mixins/properties/secondary-gray.scss

@@ -0,0 +1,32 @@
+@use '../../../../../styles' as *;
+
+@mixin secondaryGrayButton {
+  border-radius: 8px;
+  background-color: $base-white;
+  box-shadow: 0 1px 2px 0 #1018280D, 0 0 0 1px $gray-300;
+
+  .icon {
+    @include modify-svg($stroke: $gray-700);
+  }
+
+  .text {
+    color: $gray-700;
+  }
+
+  &:hover {
+    background-color: $gray-50;
+    box-shadow: 0 1px 2px 0 #1018280D, 0 0 0 1px $gray-300;
+
+    .text {
+      color: $gray-800;
+    }
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 4px $gray-100, 0 1px 2px 0 #1018280D, 0 0 0 1px $gray-300;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+  }
+}

package/dist/scss/ui/Buttons/styles/mixins/properties/small.scss

@@ -0,0 +1,20 @@
+@use '../../../../../styles' as *;
+
+@mixin smallButton {
+  padding: 10px;
+
+  .icon {
+    @include modify-svg() {
+      & {
+        flex: none;
+        width: 16px;
+        height: 16px;
+      }
+    }
+  }
+
+  .text {
+    padding: 0 4px;
+    @include fnt-flex($size: 14, $line-height: 16, $weight: 500);
+  }
+}