voiptime-components 0.0.26 → 0.0.28

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "voiptime-components",
   "private": false,
-  "version": "0.0.26",
+  "version": "0.0.28",
   "type": "module",
   "main": "dist/index.umd.js",
   "module": "dist/index.es.js",
   "style": "dist/index.css",
   "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "src/assets"
   ],
   "exports": {
     ".": {
@@ -16,8 +17,10 @@
       "import": "./dist/index.es.js",
       "require": "./dist/index.cjs"
     },
-    "./index.css": "./dist/index.css"
+    "./index.css": "./dist/index.css",
+    "./scss/mixins": "./src/assets/_mixins.scss"
   },
+  "sass": "src/assets/main.scss",
   "scripts": {
     "dev": "vite",
     "type-check": "vue-tsc -p tsconfig.build.json --noEmit false",

package/src/assets/_colors.scss

@@ -0,0 +1,61 @@
+:root {
+  // === Primary ===
+  --color-primary-main: #00475A;
+  --color-primary-bg: #F2F6F6;
+  --color-primary-hover: #00546A;
+  --color-primary-pressed: #003D4D;
+  --color-primary-focus: #E6EDEF;
+  --color-primary-border: #CCDADE;
+  --color-primary-light: #E6EEF1;
+
+  // === Yellow ===
+  --color-yellow-main: #FFBD3E;
+  --color-yellow-bg: #FFF9EC;
+  --color-yellow-hover: #FFC24C;
+  --color-yellow-pressed: #F3AC24;
+  --color-yellow-focus: #FFF5E2;
+  --color-yellow-border: #FFECC6;
+
+  // === Success ===
+  --color-success-main: #21725E;
+  --color-success-bg: #E7FAF5;
+  --color-success-hover: #1B5F4E;
+  --color-success-pressed: #164C3F;
+  --color-success-focus: #C8EBE2;
+  --color-success-border: #B5D0C9;
+
+  // === Warning ===
+  --color-warning-main: #E0CE2C;
+  --color-warning-bg: #FEFADC;
+  --color-warning-hover: #BBAC25;
+  --color-warning-pressed: #95891D;
+  --color-warning-focus: #FDF8CF;
+  --color-warning-border: #F5EFB9;
+
+  // === Danger ===
+  --color-danger-main: #A82525;
+  --color-danger-bg: #FFE8E8;
+  --color-danger-hover: #8C1F1F;
+  --color-danger-pressed: #541212;
+  --color-danger-focus: #FFDFDF;
+  --color-danger-border: #E2B6B6;
+
+  // === Neutral / Gray Scale ===
+  --color-neutral: #F2F2F2;
+  --color-gray-7: #f8f9fa;
+  --color-gray-6: #F2F2F2;
+  --color-gray-5: #E0E0E0;
+  --color-gray-4: #BDBDBD;
+  --color-gray-3: #828282;
+  --color-gray-2: #4F4F4F;
+  --color-gray-1: #333333;
+  --color-gray-0: #252525;
+
+  // === ScrollBar ===
+  --color-scrollbar-track: #E6EEF1;
+  --color-scrollbar-thumb: #CFDFE4;
+  --color-scrollbar-track-hover: #CCDDE1;
+  --color-scrollbar-thumb-hover: #A3C2C9;
+  --color-scrollbar-track-active: #CCDDE1;
+  --color-scrollbar-thumb-active: #7EA8B4;
+}

package/src/assets/_fonts.scss

@@ -0,0 +1,100 @@
+:root {
+  // Font families
+  --font-primary: 'Inter', sans-serif;
+  --font-secondary: 'Roboto', serif;
+
+  // Font sizes
+  --font-size-base: 16px;
+  --font-size-lg: 20px;
+  --font-size-sm: 14px;
+
+  // Font weights
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  //Buttons
+  --vt-button-font-family: var(--font-primary);
+  --vt-button-font-size: var(--font-size-sm);
+  --vt-button-font-weight: var(--font-weight-medium);
+  --vt-button-line-height: 19.23px;
+  --vt-button-letter-spacing: 0;
+
+  //Pagination
+  --vt-pagination-font-family: var(--font-secondary);
+  --vt-pagination-font-size: var(--font-size-sm);
+  --vt-pagination-font-weight: var(--font-weight-regular);
+  --vt-pagination-line-height: 20px;
+  --vt-pagination-letter-spacing: 0;
+  --vt-pagination-vertical-align: middle;
+
+  // Table Header (th)
+  --vt-table-th-font-family: var(--font-secondary);
+  --vt-table-th-font-weight: var(--font-weight-medium);
+  --vt-table-th-font-size: var(--font-size-sm);
+  --vt-table-th-line-height: 110%;
+  --vt-table-th-letter-spacing: 0;
+  --vt-table-th-vertical-align: middle;
+
+  // Table Body (td)
+  --vt-table-td-font-family: var(--font-secondary);
+  --vt-table-td-font-weight: var(--font-weight-regular);
+  --vt-table-td-font-size: var(--font-size-sm);
+  --vt-table-td-line-height: 20px;
+  --vt-table-td-letter-spacing: 0%;
+
+  // Drop down
+  --vt-dropdown-font-family: var(--font-secondary);
+  --vt-dropdown-font-weight: var(--font-weight-regular);
+  --vt-dropdown-font-size: var(--font-size-sm);
+  --vt-dropdown-line-height: 20px;
+  --vt-dropdown-letter-spacing: 0%;
+
+  // Modal
+  --vt-modal-header-font-family: var(--font-secondary);
+  --vt-modal-header-font-weight: var(--font-weight-regular);
+  --vt-modal-header-font-size: var(--font-size-base);
+  --vt-modal-header-line-height: 100%;
+  --vt-modal-header-letter-spacing: 0%;
+
+  // Checkbox
+  --vt-checkbox-font-family: var(--font-secondary);
+  --vt-checkbox-font-weight: var(--font-weight-regular);
+  --vt-checkbox-font-size: var(--font-size-base);
+  --vt-checkbox-line-height: 100%;
+  --vt-checkbox-letter-spacing: 0%;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('@/assets/fonts/Roboto-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('@/assets/fonts/Roboto-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('@/assets/fonts/Roboto-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@mixin vt-typography($prefix) {
+  font-family: var(--#{$prefix}-font-family);
+  font-weight: var(--#{$prefix}-font-weight);
+  font-size: var(--#{$prefix}-font-size);
+  line-height: var(--#{$prefix}-line-height);
+  letter-spacing: var(--#{$prefix}-letter-spacing);
+  vertical-align: var(--#{$prefix}-vertical-align);
+}

package/src/assets/_gap.scss

@@ -0,0 +1,5 @@
+:root {
+  --vt-gap-base: 10px;
+  --vt-gap-lg: 20px;
+  --vt-gap-sm: 5px;
+}

package/src/assets/_mixins.scss

@@ -0,0 +1 @@
+@import 'scrollbar';

package/src/assets/_padding.scss

@@ -0,0 +1,10 @@
+:root {
+  --vt-padding-base: 10px;
+  --vt-padding-lg: 20px;
+  --vt-padding-sm: 5px;
+
+  --padding-button: 8px 16px;
+  --padding-pagination: 10px 0;
+  --padding-table-cell: 10px;
+  --padding-modal-header: 15px 20px;
+}

package/src/assets/_radius.scss

@@ -0,0 +1,3 @@
+:root {
+  --radius-main: 5px;
+}

package/src/assets/_scrollbar.scss

@@ -0,0 +1,32 @@
+:root {
+  --scrollbar-width: 10px;
+  --scrollbar-height: 10px;
+}
+
+@mixin vt-scrollbar {
+  &::-webkit-scrollbar {
+    width: var(--scrollbar-width);
+    height: var(--scrollbar-height);
+  }
+
+  &::-webkit-scrollbar-track {
+    background: var(--color-scrollbar-track);
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 20px;
+    background: var(--color-scrollbar-thumb); // none
+    transition: background-color 0.2s;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: var(--color-scrollbar-thumb-hover);
+  }
+
+  &::-webkit-scrollbar-thumb:active {
+    background-color: var(--color-scrollbar-thumb-active);
+  }
+
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
+}

package/src/assets/main.scss

@@ -0,0 +1,32 @@
+//(змінні через :root)
+
+// 1. Палітра кольорів
+@use './colors' as *;
+
+// 2. Типографія
+@use './fonts' as *;
+
+// 3. Радіус
+@use './radius' as *;
+
+// 4. Padding
+@use './padding' as *;
+
+// 5. Padding
+@use './gap' as *;
+
+// 6. mixins
+@use './mixins' as *;
+
+@use '../components/button/button';
+@use '../components/loader/loader';
+@use '../components/pagination/pagination';
+@use '../components/table/table';
+@use '../components/table/column-selector';
+@use '../components/modal/modal';
+@use '../components/checkbox/checkbox';
+@use '../directives/tooltip/tooltip';
+
+body {
+  @include vt-scrollbar;
+}