From c0af7b6464c685918b07b74633a4c1bbc2e38a10 Mon Sep 17 00:00:00 2001
From: Alexander Makedonski <alexanderm@prime-code.com>
Date: Wed, 19 Jun 2024 10:35:19 +0300
Subject: [PATCH] fix: lease color

---
 package.json                             |   2 +-
 src/assets/styles/_root.scss             |   6 +-
 src/components/organisms/lease/Lease.vue |  10 +-
 tailwind.config.cjs                      | 274 +++++++++++------------
 4 files changed, 147 insertions(+), 145 deletions(-)

diff --git a/package.json b/package.json
index fea9ec1..8ed5200 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "web-components",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "private": false,
   "sideEffects": [
     "*.vue",
diff --git a/src/assets/styles/_root.scss b/src/assets/styles/_root.scss
index 767e268..4c25649 100644
--- a/src/assets/styles/_root.scss
+++ b/src/assets/styles/_root.scss
@@ -24,11 +24,12 @@
 
     --color-brand-accent: #ff562e;
 
-    --border-color: #D6DCE4;
-    --border-hover-color: #8396B1;
+    --border-color: #d6dce4;
+    --border-hover-color: #8396b1;
 
     --spinner-color: #2868e1;
     --spinner-border-color: #c1cad7;
+    --color-progress: #ebeff5;
 
     --color-hover: #f7f9fc;
 
@@ -67,6 +68,7 @@
 
     --spinner-color: #2868e1;
     --spinner-border-color: #2b384b;
+    --color-progress: #2b384b;
 
     --color-hover: #142237;
   }
diff --git a/src/components/organisms/lease/Lease.vue b/src/components/organisms/lease/Lease.vue
index 1b99770..45710c8 100644
--- a/src/components/organisms/lease/Lease.vue
+++ b/src/components/organisms/lease/Lease.vue
@@ -83,15 +83,15 @@
             <div class="flex h-full items-center justify-between gap-1">
               <div
                 :class="[{ '!bg-danger-100': +progressBar.value > 80 }]"
-                class="h-[10px] w-[24px] rounded bg-neutral-100 lg:w-[35px]"
+                class="bg-progress-color h-[10px] w-[24px] rounded lg:w-[35px]"
               ></div>
               <div
                 :class="[{ '!bg-warning-100': +progressBar.value > 65 && +progressBar.value <= 80 }]"
-                class="h-[10px] w-[24px] rounded bg-neutral-100 lg:w-[35px]"
+                class="bg-progress-color h-[10px] w-[24px] rounded lg:w-[35px]"
               ></div>
               <div
                 :class="[{ '!bg-success-100': +progressBar.value <= 65 }]"
-                class="h-[10px] w-[24px] rounded bg-neutral-100 lg:w-[35px]"
+                class="bg-progress-color h-[10px] w-[24px] rounded lg:w-[35px]"
               ></div>
             </div>
           </template>
@@ -102,7 +102,7 @@
                 v-for="(val, index) in progressBar.value"
                 :key="index"
                 :class="[
-                  'h-[10px] w-[24px] rounded bg-neutral-100 lg:w-[35px]',
+                  'bg-progress-color h-[10px] w-[24px] rounded lg:w-[35px]',
                   {
                     'pulse !bg-primary-50': val === LeaseOpeningBarStatuses.CURRENT,
                     '!bg-primary-50': val === LeaseOpeningBarStatuses.READY
@@ -285,6 +285,6 @@ defineEmits<LeaseEmits>();
 }
 
 .box {
-  @apply h-[10px] w-[24px] rounded bg-neutral-100 lg:w-[35px];
+  @apply bg-progress-color h-[10px] w-[24px] rounded lg:w-[35px];
 }
 </style>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index ad80344..7e0a822 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,127 +1,127 @@
 /** @type {import('tailwindcss').Config} */
-const plugin = require('tailwindcss/plugin')
+const plugin = require("tailwindcss/plugin");
 
 export default {
-  content: [
-    './index.html',
-    './src/**/*.{js,ts,jsx,tsx,vue}'
-  ],
-  darkMode: ['selector'],
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx,vue}"],
+  darkMode: ["selector"],
   theme: {
     extend: {
       colors: {
-        transparent: 'transparent',
-        current: 'currentColor',
-        'neutral': {
-          50: '#f7f9fc',
-          100: '#ebeff5',
-          200: '#c1cad7',
-          300: '#a4b2c5',
-          400: '#8396b1',
-          500: '#66768e',
-          600: '#566479',
-          700: '#4c5a6e',
-          800: '#384354',
-          900: '#273141',
-          950: '#171c25'
-        },
-        'blue': {
-          50: '#f5f8fe',
-          100: '#e8effc',
-          200: '#b5caf5',
-          300: '#91b1f0',
-          400: '#6793ea',
-          500: '#3470e2',
-          600: '#245dc8',
-          700: '#2054b5',
-          800: '#183f87',
-          900: '#122f63',
-          950: '#0b1b3b'
-        },
-        'red': {
-          50: '#fef6f8',
-          100: '#fceaee',
-          200: '#f6b9c5',
-          300: '#f297a9',
-          400: '#ed6983',
-          500: '#df294d',
-          600: '#bd2341',
-          700: '#ab1f3b',
-          800: '#81182c',
-          900: '#611221',
-          950: '#390b14'
-        },
-        'green': {
-          50: '#f4fbf8',
-          100: '#ddf3ea',
-          200: '#8cd8b8',
-          300: '#53c595',
-          400: '#19a96c',
-          500: '#148555',
-          600: '#117148',
-          700: '#0f6641',
-          800: '#0b4c31',
-          900: '#083824',
-          950: '#052115'
-        },
-        'yellow': {
-          50: '#fff9eb',
-          100: '#ffeec9',
-          200: '#ffbf34',
-          300: '#e4a61e',
-          400: '#c08b1a',
-          500: '#976e14',
-          600: '#805d11',
-          700: '#73530f',
-          800: '#563f0b',
-          900: '#402e09',
-          950: '#251a05'
-        },
-        'orange': {
-          50: '#fff6f4',
-          100: '#ffebe6',
-          200: '#ffb8a7',
-          300: '#ff9379',
-          400: '#ff5f3a',
-          500: '#cf4625',
-          600: '#b03b20',
-          700: '#9f351d',
-          800: '#772815',
-          900: '#581e10',
-          950: '#341109'
-        },
-        'neutral-bg': {
-          50: 'var(--color-background-50)',
-          100: 'var(--color-background-100)',
-          200: 'var(--color-background-200)',
-          300: 'var(--color-background-300)'
-        },
-        'neutral-typography': {
-          50: 'var(--color-typography-50)',
-          100: 'var(--color-typography-100)',
-          200: 'var(--color-typography-200)'
+        transparent: "transparent",
+        current: "currentColor",
+        neutral: {
+          50: "#f7f9fc",
+          100: "#ebeff5",
+          200: "#c1cad7",
+          300: "#a4b2c5",
+          400: "#8396b1",
+          500: "#66768e",
+          600: "#566479",
+          700: "#4c5a6e",
+          800: "#384354",
+          900: "#273141",
+          950: "#171c25"
+        },
+        blue: {
+          50: "#f5f8fe",
+          100: "#e8effc",
+          200: "#b5caf5",
+          300: "#91b1f0",
+          400: "#6793ea",
+          500: "#3470e2",
+          600: "#245dc8",
+          700: "#2054b5",
+          800: "#183f87",
+          900: "#122f63",
+          950: "#0b1b3b"
+        },
+        red: {
+          50: "#fef6f8",
+          100: "#fceaee",
+          200: "#f6b9c5",
+          300: "#f297a9",
+          400: "#ed6983",
+          500: "#df294d",
+          600: "#bd2341",
+          700: "#ab1f3b",
+          800: "#81182c",
+          900: "#611221",
+          950: "#390b14"
+        },
+        green: {
+          50: "#f4fbf8",
+          100: "#ddf3ea",
+          200: "#8cd8b8",
+          300: "#53c595",
+          400: "#19a96c",
+          500: "#148555",
+          600: "#117148",
+          700: "#0f6641",
+          800: "#0b4c31",
+          900: "#083824",
+          950: "#052115"
+        },
+        yellow: {
+          50: "#fff9eb",
+          100: "#ffeec9",
+          200: "#ffbf34",
+          300: "#e4a61e",
+          400: "#c08b1a",
+          500: "#976e14",
+          600: "#805d11",
+          700: "#73530f",
+          800: "#563f0b",
+          900: "#402e09",
+          950: "#251a05"
+        },
+        orange: {
+          50: "#fff6f4",
+          100: "#ffebe6",
+          200: "#ffb8a7",
+          300: "#ff9379",
+          400: "#ff5f3a",
+          500: "#cf4625",
+          600: "#b03b20",
+          700: "#9f351d",
+          800: "#772815",
+          900: "#581e10",
+          950: "#341109"
+        },
+        "neutral-bg": {
+          50: "var(--color-background-50)",
+          100: "var(--color-background-100)",
+          200: "var(--color-background-200)",
+          300: "var(--color-background-300)"
+        },
+        "neutral-typography": {
+          50: "var(--color-typography-50)",
+          100: "var(--color-typography-100)",
+          200: "var(--color-typography-200)"
         },
         primary: {
-          50: 'var(--color-primary-50)',
+          50: "var(--color-primary-50)",
           "50/10": "#2868e11a",
-          100: 'var(--color-primary-100)',
-          200: 'var(--color-primary-200)'
+          100: "var(--color-primary-100)",
+          200: "var(--color-primary-200)"
         },
         danger: {
-          50: 'var(--color-danger-50)',
-          100: 'var(--color-danger-100)'
+          50: "var(--color-danger-50)",
+          100: "var(--color-danger-100)"
         },
         success: {
-          50: 'var(--color-success-50)',
-          100: 'var(--color-success-100)'
+          50: "var(--color-success-50)",
+          100: "var(--color-success-100)"
         },
         warning: {
-          50: 'var(--color-warning-50)',
-          100: 'var(--color-warning-100)'
+          50: "var(--color-warning-50)",
+          100: "var(--color-warning-100)"
         },
         accent: "var(--color-brand-accent)",
+        progress: {
+          color: "var(--color-progress)"
+        },
         border: {
-          "color": "var(--border-color)",
+          color: "var(--border-color)",
           "hover-color": "var(--border-hover-color)"
         },
         spinner: {
@@ -134,22 +134,22 @@ export default {
       }
     },
     fontFamily: {
-      sans: ['Garet', 'Helvetica', 'Arial', 'sans-serif']
+      sans: ["Garet", "Helvetica", "Arial", "sans-serif"]
     },
     fontSize: {
-      xs: ['0.8125rem', { lineHeight: '1rem' }],
-      sm: ['0.875rem', { lineHeight: '1.25rem' }],
-      base: ['1rem', { lineHeight: '1.5rem' }],
-      lg: ['1.125rem', { lineHeight: '1.75rem' }],
-      xl: ['1.25rem', { lineHeight: '1.75rem' }],
-      '2xl': ['1.5rem', { lineHeight: '2rem' }],
-      '3xl': ['2rem', { lineHeight: '2.25rem' }],
-      '4xl': ['2.5rem', { lineHeight: '2.5rem' }],
-      '5xl': ['3rem', { lineHeight: '1' }],
-      '6xl': ['3.75rem', { lineHeight: '1' }],
-      '7xl': ['4.5rem', { lineHeight: '1' }],
-      '8xl': ['6rem', { lineHeight: '1' }],
-      '9xl': ['8rem', { lineHeight: '1' }],
+      xs: ["0.8125rem", { lineHeight: "1rem" }],
+      sm: ["0.875rem", { lineHeight: "1.25rem" }],
+      base: ["1rem", { lineHeight: "1.5rem" }],
+      lg: ["1.125rem", { lineHeight: "1.75rem" }],
+      xl: ["1.25rem", { lineHeight: "1.75rem" }],
+      "2xl": ["1.5rem", { lineHeight: "2rem" }],
+      "3xl": ["2rem", { lineHeight: "2.25rem" }],
+      "4xl": ["2.5rem", { lineHeight: "2.5rem" }],
+      "5xl": ["3rem", { lineHeight: "1" }],
+      "6xl": ["3.75rem", { lineHeight: "1" }],
+      "7xl": ["4.5rem", { lineHeight: "1" }],
+      "8xl": ["6rem", { lineHeight: "1" }],
+      "9xl": ["8rem", { lineHeight: "1" }],
       10: ["10px", "14px"],
       12: ["12px", "normal"],
       14: ["14px", "normal"],
@@ -162,35 +162,35 @@ export default {
       48: ["48px", "70px"]
     },
     backgroundImage: {
-      'white-noise': 'url(\'../assets/images/white-noise.png\')'
+      "white-noise": "url('../assets/images/white-noise.png')"
     },
     backgroundSize: {
-      '50%': '15%'
+      "50%": "15%"
     },
     boxShadow: {
-      'dialog': '0 8px 48px #072d6326',
-      'field-heavy': '0px 8px 48px 0px rgba(7, 45, 99, 0.15)',
-      'field-normal': '0px 12px 32px 0px rgba(7, 45, 99, 0.06)'
+      dialog: "0 8px 48px #072d6326",
+      "field-heavy": "0px 8px 48px 0px rgba(7, 45, 99, 0.15)",
+      "field-normal": "0px 12px 32px 0px rgba(7, 45, 99, 0.06)"
     },
     textShadow: {
-      password: '0 0 0 var(--color-typography-200)'
+      password: "0 0 0 var(--color-typography-200)"
     }
   },
   variants: {
     extend: {
-      textColor: ['placeholder'],
-    },
+      textColor: ["placeholder"]
+    }
   },
   plugins: [
     plugin(function ({ matchUtilities, theme }) {
       matchUtilities(
         {
-          'text-shadow': (value) => ({
-            textShadow: value,
-          }),
-        },
-        { values: theme('textShadow') }
-      )
-    }),
-  ],
-}
+          "text-shadow": (value) => ({
+            textShadow: value
+          })
+        },
+        { values: theme("textShadow") }
+      );
+    })
+  ]
+};