refactor(multi): updated to latest version

This commit is contained in:
yagnikvamja
2025-01-01 17:21:49 +05:30
parent 3297275812
commit 8ba9732f4e
41 changed files with 17350 additions and 13186 deletions

View File

@@ -1,186 +1,350 @@
@use "sass:math";
$font-family-custom: "Public Sans",sans-serif,-apple-system,blinkmacsystemfont,
"Segoe UI",roboto,"Helvetica Neue",arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
$font-family-custom: "Public Sans", sans-serif, -apple-system,
blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
/* 👉 Typography custom variables */
$typography-h5-font-size: 1.125rem;
$typography-body-1-font-size: 0.9375rem;
$typography-body-1-line-height: 1.375rem;
@forward "../../../base/libs/vuetify/variables" with (
@forward "../../../base/libs/vuetify/variables" with (
$body-font-family: $font-family-custom !default,
$border-radius-root: 6px !default,
// 👉 Rounded
$rounded: (
"sm": 4px,
"lg": 8px,
"shaped": 30px 0,
) !default,
$rounded:
(
"sm": 4px,
"lg": 8px,
"shaped": 30px 0,
)
!default,
// 👉 Shadows
$shadow-key-umbra: (
0: (0 0 0 0 rgba(var(--v-shadow-key-umbra-color), 1)),
1: (0 2px 4px rgba(var(--v-shadow-key-umbra-color), 0.12)),
2: (0 1px 5px rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-xs-opacity))),
3: (0 3px 8px rgba(var(--v-shadow-key-umbra-color), 0.14)),
4: (0 2px 6px rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-sm-opacity))),
5: (0 4px 10px rgba(var(--v-shadow-key-umbra-color), 0.15)),
6: (0 3px 8px rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-md-opacity))),
7: (0 4px 18px rgba(var(--v-shadow-key-umbra-color), 0.1)),
8: (0 4px 12px rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-lg-opacity))),
9: (0 5px 14px rgba(var(--v-shadow-key-umbra-color), 0.18)),
10: (0 5px 22px rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-xl-opacity))),
11: (0 5px 16px rgba(var(--v-shadow-key-umbra-color), 0.2)),
12: (0 6px 17px rgba(var(--v-shadow-key-umbra-color), 0.22)),
13: (0 6px 18px rgba(var(--v-shadow-key-umbra-color), 0.22)),
14: (0 6px 19px rgba(var(--v-shadow-key-umbra-color), 0.24)),
15: (0 7px 20px rgba(var(--v-shadow-key-umbra-color), 0.24)),
16: (0 7px 21px rgba(var(--v-shadow-key-umbra-color), 0.26)),
17: (0 7px 22px rgba(var(--v-shadow-key-umbra-color), 0.26)),
18: (0 8px 23px rgba(var(--v-shadow-key-umbra-color), 0.28)),
19: (0 8px 24px 6px rgba(var(--v-shadow-key-umbra-color), 0.28)),
20: (0 9px 25px rgba(var(--v-shadow-key-umbra-color), 0.3)),
21: (0 9px 26px rgba(var(--v-shadow-key-umbra-color), 0.32)),
22: (0 9px 27px rgba(var(--v-shadow-key-umbra-color), 0.32)),
23: (0 10px 28px rgba(var(--v-shadow-key-umbra-color), 0.34)),
24: (0 10px 30px rgba(var(--v-shadow-key-umbra-color), 0.34))
) !default,
$shadow-key-umbra:
(
0: (
0 0 0 0 rgba(var(--v-shadow-key-umbra-color), 1),
),
1: (
0 2px 4px rgba(var(--v-shadow-key-umbra-color), 0.12),
),
2: (
0 1px 5px
rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-xs-opacity)),
),
3: (
0 3px 8px rgba(var(--v-shadow-key-umbra-color), 0.14),
),
4: (
0 2px 6px
rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-sm-opacity)),
),
5: (
0 4px 10px rgba(var(--v-shadow-key-umbra-color), 0.15),
),
6: (
0 3px 8px
rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-md-opacity)),
),
7: (
0 4px 18px rgba(var(--v-shadow-key-umbra-color), 0.1),
),
8: (
0 4px 12px
rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-lg-opacity)),
),
9: (
0 5px 14px rgba(var(--v-shadow-key-umbra-color), 0.18),
),
10: (
0 5px 22px
rgba(var(--v-shadow-key-umbra-color), var(--v-shadow-xl-opacity)),
),
11: (
0 5px 16px rgba(var(--v-shadow-key-umbra-color), 0.2),
),
12: (
0 6px 17px rgba(var(--v-shadow-key-umbra-color), 0.22),
),
13: (
0 6px 18px rgba(var(--v-shadow-key-umbra-color), 0.22),
),
14: (
0 6px 19px rgba(var(--v-shadow-key-umbra-color), 0.24),
),
15: (
0 7px 20px rgba(var(--v-shadow-key-umbra-color), 0.24),
),
16: (
0 7px 21px rgba(var(--v-shadow-key-umbra-color), 0.26),
),
17: (
0 7px 22px rgba(var(--v-shadow-key-umbra-color), 0.26),
),
18: (
0 8px 23px rgba(var(--v-shadow-key-umbra-color), 0.28),
),
19: (
0 8px 24px 6px rgba(var(--v-shadow-key-umbra-color), 0.28),
),
20: (
0 9px 25px rgba(var(--v-shadow-key-umbra-color), 0.3),
),
21: (
0 9px 26px rgba(var(--v-shadow-key-umbra-color), 0.32),
),
22: (
0 9px 27px rgba(var(--v-shadow-key-umbra-color), 0.32),
),
23: (
0 10px 28px rgba(var(--v-shadow-key-umbra-color), 0.34),
),
24: (
0 10px 30px rgba(var(--v-shadow-key-umbra-color), 0.34),
),
)
!default,
$shadow-key-penumbra: (
0: (0 0 transparent),
1: (0 0 transparent),
2: (0 0 transparent),
3: (0 0 transparent),
4: (0 0 transparent),
5: (0 0 transparent),
6: (0 0 transparent),
7: (0 0 transparent),
8: (0 0 transparent),
9: (0 0 transparent),
10: (0 0 transparent),
11: (0 0 transparent),
12: (0 0 transparent),
13: (0 0 transparent),
14: (0 0 transparent),
15: (0 0 transparent),
16: (0 0 transparent),
17: (0 0 transparent),
18: (0 0 transparent),
19: (0 0 transparent),
20: (0 0 transparent),
21: (0 0 transparent),
22: (0 0 transparent),
23: (0 0 transparent),
24: (0 0 transparent),
) !default,
0: (
0 0 transparent,
),
1: (
0 0 transparent,
),
2: (
0 0 transparent,
),
3: (
0 0 transparent,
),
4: (
0 0 transparent,
),
5: (
0 0 transparent,
),
6: (
0 0 transparent,
),
7: (
0 0 transparent,
),
8: (
0 0 transparent,
),
9: (
0 0 transparent,
),
10: (
0 0 transparent,
),
11: (
0 0 transparent,
),
12: (
0 0 transparent,
),
13: (
0 0 transparent,
),
14: (
0 0 transparent,
),
15: (
0 0 transparent,
),
16: (
0 0 transparent,
),
17: (
0 0 transparent,
),
18: (
0 0 transparent,
),
19: (
0 0 transparent,
),
20: (
0 0 transparent,
),
21: (
0 0 transparent,
),
22: (
0 0 transparent,
),
23: (
0 0 transparent,
),
24: (
0 0 transparent,
),
)
!default,
$shadow-key-ambient: (
0: (0 0 transparent),
1: (0 0 transparent),
2: (0 0 transparent),
3: (0 0 transparent),
4: (0 0 transparent),
5: (0 0 transparent),
6: (0 0 transparent),
7: (0 0 transparent),
8: (0 0 transparent),
9: (0 0 transparent),
10: (0 0 transparent),
11: (0 0 transparent),
12: (0 0 transparent),
13: (0 0 transparent),
14: (0 0 transparent),
15: (0 0 transparent),
16: (0 0 transparent),
17: (0 0 transparent),
18: (0 0 transparent),
19: (0 0 transparent),
20: (0 0 transparent),
21: (0 0 transparent),
22: (0 0 transparent),
23: (0 0 transparent),
24: (0 0 transparent),
) !default,
0: (
0 0 transparent,
),
1: (
0 0 transparent,
),
2: (
0 0 transparent,
),
3: (
0 0 transparent,
),
4: (
0 0 transparent,
),
5: (
0 0 transparent,
),
6: (
0 0 transparent,
),
7: (
0 0 transparent,
),
8: (
0 0 transparent,
),
9: (
0 0 transparent,
),
10: (
0 0 transparent,
),
11: (
0 0 transparent,
),
12: (
0 0 transparent,
),
13: (
0 0 transparent,
),
14: (
0 0 transparent,
),
15: (
0 0 transparent,
),
16: (
0 0 transparent,
),
17: (
0 0 transparent,
),
18: (
0 0 transparent,
),
19: (
0 0 transparent,
),
20: (
0 0 transparent,
),
21: (
0 0 transparent,
),
22: (
0 0 transparent,
),
23: (
0 0 transparent,
),
24: (
0 0 transparent,
),
)
!default,
// 👉 Typography
$typography: (
"h1": (
"size": 2.875rem,
"weight": 500,
"line-height": 4.25rem,
"letter-spacing": normal
),
"h2": (
"size": 2.375rem,
"weight": 500,
"line-height": 3.5rem,
"letter-spacing": normal
),
"h3": (
"size": 1.75rem,
"weight": 500,
"line-height": 2.625rem
),
"h4": (
"size": 1.5rem,
"weight": 500,
"line-height": 2.375rem,
"letter-spacing": normal
),
"h5": (
"size": $typography-h5-font-size,
"weight": 500,
"line-height": 1.75rem
),
"h6":(
"size": 0.9375rem,
"line-height": 1.375rem,
"weight": 500,
"letter-spacing": normal
),
"body-1":(
"size": $typography-body-1-font-size,
"line-height": $typography-body-1-line-height,
"letter-spacing": normal
),
"body-2": (
"size": 0.8125rem,
"line-height": 1.25rem,
"letter-spacing": normal
),
"subtitle-1":(
"size": 0.9375rem,
"weight": 400,
"line-height": 1.375rem
),
"subtitle-2": (
"size": 0.8125rem,
"weight": 400,
"line-height": 1.25rem,
"letter-spacing": normal
),
"button": (
"size": 0.9375rem,
"weight": 500,
"line-height": 1.125rem,
"letter-spacing": 0.0269rem,
"text-transform": capitalize
),
"caption":(
"size": 0.8125rem,
"line-height": 1.125rem,
"letter-spacing": 0.025rem
),
"overline": (
"size": 0.75rem,
"weight": 400,
"line-height": 0.875rem,
"letter-spacing": 0.05rem,
"text-transform": uppercase
),
) !default,
$typography:
(
"h1": (
"size": 2.875rem,
"weight": 500,
"line-height": 4.25rem,
"letter-spacing": normal,
),
"h2": (
"size": 2.375rem,
"weight": 500,
"line-height": 3.5rem,
"letter-spacing": normal,
),
"h3": (
"size": 1.75rem,
"weight": 500,
"line-height": 2.625rem,
),
"h4": (
"size": 1.5rem,
"weight": 500,
"line-height": 2.375rem,
"letter-spacing": normal,
),
"h5": (
"size": $typography-h5-font-size,
"weight": 500,
"line-height": 1.75rem,
),
"h6": (
"size": 0.9375rem,
"line-height": 1.375rem,
"weight": 500,
"letter-spacing": normal,
),
"body-1": (
"size": $typography-body-1-font-size,
"line-height": $typography-body-1-line-height,
"letter-spacing": normal,
),
"body-2": (
"size": 0.8125rem,
"line-height": 1.25rem,
"letter-spacing": normal,
),
"subtitle-1": (
"size": 0.9375rem,
"weight": 400,
"line-height": 1.375rem,
),
"subtitle-2": (
"size": 0.8125rem,
"weight": 400,
"line-height": 1.25rem,
"letter-spacing": normal,
),
"button": (
"size": 0.9375rem,
"weight": 500,
"line-height": 1.125rem,
"letter-spacing": 0.0269rem,
"text-transform": capitalize,
),
"caption": (
"size": 0.8125rem,
"line-height": 1.125rem,
"letter-spacing": 0.025rem,
),
"overline": (
"size": 0.75rem,
"weight": 400,
"line-height": 0.875rem,
"letter-spacing": 0.05rem,
"text-transform": uppercase,
),
)
!default,
// 👉 Alert
$alert-title-font-size: 1.125rem !default,
@@ -219,7 +383,12 @@ $typography-body-1-line-height: 1.375rem;
$button-disabled-opacity: 0.45 !default,
$button-disabled-overlay: 0.2025 !default,
$button-icon-font-size: 0.9375rem !default,
$button-elevation: ("default": 2, "hover": 2, "active": 2) !default,
$button-elevation: (
"default": 2,
"hover": 2,
"active": 2,
)
!default,
// 👉 Button Group
$btn-group-border-radius: 8px !default,
@@ -249,14 +418,20 @@ $typography-body-1-line-height: 1.375rem;
// 👉 Expansion Panel
$expansion-panel-title-padding: 12px 20px 12px 24px !default,
$expansion-panel-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
$expansion-panel-color:
rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
$expansion-panel-active-title-min-height: 46px !default,
$expansion-panel-title-min-height: 46px !default,
$expansion-panel-text-padding: 0 20px 20px 24px !default,
// 👉 Field
$field-font-size: 0.9375rem !default,
$input-density: ("default": -2, "comfortable": -4.5, "compact": -6.5) !default,
$input-density: (
"default": -2,
"comfortable": -4.5,
"compact": -6.5,
)
!default,
$field-outline-opacity: 0.22 !default,
$field-border-width: 1px !default,
$field-focused-border-width: 2px !default,
@@ -267,12 +442,17 @@ $typography-body-1-line-height: 1.375rem;
$input-details-font-size: 0.8125rem !default,
// 👉 List
$list-density: ("default": 0, "comfortable": -1.5, "compact": -2.5) !default,
$list-density:
(
"default": 0,
"comfortable": -1.5,
"compact": -2.5,
)
!default,
$list-item-padding: 8px 20px !default,
$list-item-min-height: 38px !default,
$list-subheader-font-size: 13px !default,
$list-subheader-line-height: 1.25rem !default,
$list-subheader-padding-start: 20px !default,
$list-subheader-padding-end: 20px !default,
$list-subheader-min-height: 40px !default,
$list-disabled-opacity: 0.4 !default,
@@ -317,7 +497,13 @@ $typography-body-1-line-height: 1.375rem;
$slider-thumb-label-transition: none !default,
// 👉 select
$select-chips-margin-bottom: ("default": 1, "comfortable": 1, "compact": 1) !default,
$select-chips-margin-bottom:
(
"default": 1,
"comfortable": 1,
"compact": 1,
)
!default,
// 👉 snackbar
$snackbar-background: rgb(var(--v-tooltip-background)) !default,
@@ -325,7 +511,7 @@ $typography-body-1-line-height: 1.375rem;
$snackbar-content-padding: 12px 16px !default,
$snackbar-font-size: 0.8125rem !default,
$snackbar-elevation: 2 !default,
$snackbar-wrapper-min-height:44px !default,
$snackbar-wrapper-min-height: 44px !default,
$snackbar-btn-padding: 0 9px !default,
$snackbar-action-margin: 16px !default,
@@ -336,12 +522,13 @@ $typography-body-1-line-height: 1.375rem;
$switch-inset-thumb-width: 0.875rem !default,
$switch-inset-thumb-off-height: 0.875rem !default,
$switch-track-opacity: 1 !default,
$switch-track-background: rgba(var(--v-theme-on-surface), var(--v-focus-opacity)) !default,
$switch-track-background:
rgba(var(--v-theme-on-surface), var(--v-focus-opacity)) !default,
$switch-thumb-background: rgb(var(--v-theme-on-primary)),
// 👉 table
$table-row-height: 50px !default,
$table-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
$table-color:
rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default,
$table-font-size: 0.9375rem !default,
$table-header-height: 56px !default,
$table-header-font-weight: 500 !default,
@@ -362,8 +549,9 @@ $typography-body-1-line-height: 1.375rem;
// 👉 timeline
$timeline-dot-size: 34px !default,
$timeline-dot-divider-background: rgba(var(--v-border-color),0.08) !default,
$timeline-divider-line-background: rgba(var(--v-border-color), var(--v-border-opacity)) !default,
$timeline-dot-divider-background: rgba(var(--v-border-color), 0.08) !default,
$timeline-divider-line-background:
rgba(var(--v-border-color), var(--v-border-opacity)) !default,
$timeline-divider-line-thickness: 1.5px !default,
$timeline-item-padding: 16px !default,
$timeline-item-padding: 16px !default
);