@cnamts/synapse 1.0.2 → 1.0.4

package/dist/main.d.ts

@@ -2,3 +2,4 @@ export * from './components';
 export * from './services';
 export * from './composables';
 export * from './utils/rules';
+export * from './utils';

package/dist/services/NotificationService.d.ts

@@ -3,13 +3,13 @@ export declare function useNotificationService(): {
     notificationQueue: import('vue').Ref<{
         id: string;
         message: string;
-        type: "error" | "warning" | "info" | "success";
+        type: "error" | "success" | "warning" | "info";
         timeout?: number | undefined;
         icon?: string | null | undefined;
     }[], Notification[] | {
         id: string;
         message: string;
-        type: "error" | "warning" | "info" | "success";
+        type: "error" | "success" | "warning" | "info";
         timeout?: number | undefined;
         icon?: string | null | undefined;
     }[]>;

package/dist/utils/amelipro/dateHelper/dateHelper.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Formats a single-digit number as a two-digit string with a leading zero.
+ * @param {number} num - The number to format.
+ * @returns {string} The formatted two-digit string.
+ */
+export declare const padTo2Digits: (num: number) => string;
+/**
+ * Checks if a given string matches the ISO 8601 basic date format (YYYY-MM-DD).
+ * @param {string | null | undefined} date - The date string to check.
+ * @returns {boolean} True if the string matches the format, false otherwise.
+ */
+export declare const dateMatchIso: (date: string | null | undefined) => boolean;
+/**
+ * Checks if a given string matches the French date format (DD/MM/YYYY).
+ * @param {string | null | undefined} date - The date string to check.
+ * @returns {boolean} True if the string matches the format, false otherwise.
+ */
+export declare const dateMatchFrIso: (date: string | null | undefined) => boolean;
+/**
+ * Parses a string in the format 'YYYY-MM-DD' into an array of year, month, and day strings.
+ * @param {string} date - The date string to parse.
+ * @returns {string[]} An array containing [year, month, day].
+ */
+export declare const parseDate: (date: string) => string[];
+/**
+ * Parses a string in the format 'DD/MM/YYYY' into an array of year, month, and day strings.
+ * @param {string} date - The date string to parse.
+ * @returns {string[]} An array containing [day, month, year].
+ */
+export declare const parseDateToFr: (date: string) => string[];
+/**
+ * Formats a date string in the ISO 8601 basic format (YYYY-MM-DD) to the French format (DD/MM/YYYY).
+ * @param {string} date - The date string to format.
+ * @returns {string} The formatted date string in French format, or an empty string if invalid input is provided.
+ */
+export declare const dateToFormatFr: (date: string) => string;
+/**
+ * Formats a date string in the French format (DD/MM/YYYY) to the ISO 8601 basic format (YYYY-MM-DD).
+ * @param {string} date - The date string to format.
+ * @returns {string} The formatted date string in French format, or an empty string if invalid input is provided.
+ */
+export declare const dateToBasicFormat: (date: string) => string;
+/**
+ * Converts a string value in the ISO 8601 basic format (YYYY-MM-DD) to a JavaScript Date object.
+ * @param {string} value - The string value to convert.
+ * @returns {Date | undefined} A Date object representing the date, or undefined if the string is not in valid format.
+ */
+export declare const stringToDate: (value: string) => Date | undefined;

package/dist/utils/amelipro/numberHelper/numberHelper.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Checks if a given string matches the regex.
+ * @param {number | string | null | undefined} value - The value to check.
+ * @returns {boolean} True if the string matches the format, false otherwise.
+ */
+export declare const numberMatchRegex: (value: number | string | null | undefined) => boolean;
+export declare const parseToNumber: (value: number | string) => number;
+export declare const parseToFrNumberFormat: (value: number | string) => string;

package/dist/utils/amelipro/rules/maxNumber/index.d.ts

@@ -0,0 +1,3 @@
+import { ValidationRule } from '../../../rules/types';
+export type Value = string;
+export declare function maxNumberRule(maxNumber: string | number): ValidationRule<Value>;

package/dist/utils/amelipro/rules/minNumber/index.d.ts

@@ -0,0 +1,3 @@
+import { ValidationRule } from '../../../rules/types';
+export type Value = string;
+export declare function minNumberRule(minNumber: string | number): ValidationRule<Value>;

package/dist/utils/amelipro/rules/notAfterDate/index.d.ts

@@ -0,0 +1,3 @@
+import { ValidationRule } from '../../../rules/types';
+export type Value = string;
+export declare function notAfterDate(maxDate: string, fieldType: string): ValidationRule<Value>;

package/dist/utils/amelipro/rules/notBeforeDate/index.d.ts

@@ -0,0 +1,3 @@
+import { ValidationRule } from '../../../rules/types';
+export type Value = string;
+export declare function notBeforeDate(minDate: string, fieldType: string): ValidationRule<Value>;

package/dist/utils/functions/ameliproColors/ameliproColors.d.ts

@@ -0,0 +1,2 @@
+import { AmeliproColorsTypes } from './types';
+export declare const AmeliproColors: AmeliproColorsTypes;

package/dist/utils/functions/ameliproColors/types.d.ts

@@ -0,0 +1,5 @@
+export interface AmeliproColorsTypes {
+	[key: string]: {
+		hexColor: string
+	}
+}

package/dist/utils/functions/classToHex.d.ts

@@ -0,0 +1 @@
+export declare function classToHex(color: string): string;

package/dist/utils/functions/convertToHex.d.ts

@@ -0,0 +1 @@
+export declare const convertToHex: (color: string | undefined) => string;

package/dist/utils/functions/isCssColor.d.ts

@@ -0,0 +1 @@
+export declare function isCssColor(color?: string | false): boolean;

package/dist/utils/index.d.ts

@@ -0,0 +1,19 @@
+import { isDateValid as isDateValidUtil } from './functions/validation/isDateValid';
+import { default as throttleDisplayFn } from './functions/throttleDisplayFn/throttleDisplayFn';
+export { LocalStorageUtility } from './localStorageUtility';
+export { calcHumanFileSize } from './calcHumanFileSize';
+export { convertToUnit } from './convertToUnit';
+export { formatDate } from './formatDate';
+export { parseDate } from './parseDate';
+export { propValidator } from './propValidator';
+export { ruleMessage } from './ruleMessage';
+export { isDateAfter } from './functions/validation/isDateAfter';
+export { isDateBefore } from './functions/validation/isDateBefore';
+export { isDateInRange } from './functions/validation/isDateInRange';
+export { isDateValidUtil };
+export { isWeekend } from './functions/validation/isWeekend';
+export { isEmailValid } from './functions/validation/isEmailValid';
+export { copyToClipboard } from './functions/copyToClipboard';
+export { downloadFile } from './functions/downloadFile';
+export { throttleDisplayFn };
+export { deepCopy } from './functions/deepCopy';

package/dist/vuetifyConfig.d.ts

@@ -16,6 +16,7 @@ export declare const createVuetifyInstance: () => {
         rtl: import('vue').Ref<Record<string, boolean>, Record<string, boolean>>;
         rtlClasses: import('vue').Ref<string, string>;
         name: string;
+        decimalSeparator: import('vue').ShallowRef<string>;
         messages: import('vue').Ref<import('vuetify').LocaleMessages, import('vuetify').LocaleMessages>;
         current: import('vue').Ref<string, string>;
         fallback: import('vue').Ref<string, string>;
@@ -48,10 +49,10 @@ export declare const createVuetifyInstance: () => {
             startOfYear: (date: unknown) => unknown;
             endOfYear: (date: unknown) => unknown;
             isAfter: (date: unknown, comparing: unknown) => boolean;
-            isAfterDay: (value: unknown, comparing: unknown) => boolean;
+            isAfterDay: (date: unknown, comparing: unknown) => boolean;
             isSameDay: (date: unknown, comparing: unknown) => boolean;
             isSameMonth: (date: unknown, comparing: unknown) => boolean;
-            isSameYear: (value: unknown, comparing: unknown) => boolean;
+            isSameYear: (date: unknown, comparing: unknown) => boolean;
             isBefore: (date: unknown, comparing: unknown) => boolean;
             isEqual: (date: unknown, comparing: unknown) => boolean;
             isValid: (date: any) => boolean;
@@ -65,7 +66,7 @@ export declare const createVuetifyInstance: () => {
             setYear: (date: unknown, year: number) => unknown;
             getDiff: (date: unknown, comparing: unknown, unit?: string | undefined) => number;
             getWeekArray: (date: unknown, firstDayOfWeek?: string | number | undefined) => unknown[][];
-            getWeekdays: (firstDayOfWeek?: string | number | undefined) => string[];
+            getWeekdays: (firstDayOfWeek?: string | number | undefined, weekdayFormat?: "long" | "short" | "narrow" | undefined) => string[];
             getWeek: (date: unknown, firstDayOfWeek?: string | number | undefined, firstWeekMinSize?: number | undefined) => number;
             getMonth: (date: unknown) => number;
             setMonth: (date: unknown, month: number) => unknown;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cnamts/synapse",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "private": false,
   "description": "CNAM DS v3",
   "type": "module",
@@ -46,7 +46,7 @@
     "node": ">=18.0.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.2",
+    "@chromatic-com/storybook": "^4.0.0",
     "@jls-digital/storybook-addon-code": "^1.0.4",
     "@mdi/js": "^7.4.47",
     "@storybook/addon-docs": "^8.5.6",
@@ -64,12 +64,12 @@
     "@storybook/vue3-vite": "^8.5.6",
     "@stylistic/eslint-plugin": "^2.9.0",
     "@stylistic/eslint-plugin-ts": "^2.9.0",
-    "@stylistic/stylelint-config": "^2.0.0",
+    "@stylistic/stylelint-config": "^3.0.0",
     "@tsconfig/node20": "^20.1.4",
     "@types/node": "^20.17.1",
     "@typescript-eslint/parser": "^8.11.0",
     "@vitejs/plugin-vue": "^5.1.4",
-    "@vitest/coverage-v8": "^2.1.4",
+    "@vitest/coverage-v8": "^3.2.4",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.5.1",
     "auto-changelog": "^2.4.0",
@@ -80,31 +80,31 @@
     "eslint-plugin-vuejs-accessibility": "^2.4.1",
     "happy-dom": "^15.7.4",
     "husky": "^9.1.6",
-    "marked": "^15.0.7",
+    "marked": "^16.0.0",
     "postcss-html": "^1.7.0",
     "postcss-scss": "^4.0.9",
     "resize-observer-polyfill": "^1.5.1",
     "semantic-release": "^24.2.3",
     "storybook": "^8.5.6",
-    "storybook-addon-vue-mdx": "^1.0.6",
+    "storybook-addon-vue-mdx": "^2.0.0",
     "stylelint": "^16.12.0",
     "stylelint-config-recommended-scss": "^14.1.0",
     "stylelint-config-recommended-vue": "^1.5.0",
     "stylelint-config-standard-scss": "^14.0.0",
     "typescript": "5.4.2",
     "typescript-eslint": "^8.11.0",
-    "vite": "^5.4.10",
+    "vite": "^7.0.6",
     "vite-plugin-dts": "^4.0.1",
-    "vite-plugin-vuetify": "^2.0.4",
-    "vitest": "^2.0.5",
-    "vue": "^3.4.33",
+    "vite-plugin-vuetify": "^2.1.1",
+    "vitest": "^3.2.4",
+    "vue": "^3.5.18",
     "vue-router": "^4.4.5",
     "vue-tsc": "^2.1.8",
     "vue3-snapshot-serializer": "^2.9.0"
   },
   "peerDependencies": {
-    "vue": "^3.4.33",
-    "vuetify": "^3.6.13"
+    "vue": "^3.5.18",
+    "vuetify": "^3.9.2"
   },
   "dependencies": {
     "@emotion/css": "^11.13.5",

package/src/assets/_elevations.scss

@@ -1,6 +1,7 @@
 // Define theme elevation adjustments
 $elevation-cnam: 2px;
 $elevation-pa: 2px;
+$elevation-ap: 0px;
 
 // Modify elevations to include $elevation-cnam and $elevation-pa dynamically
 $cnam-elevation: (
@@ -45,11 +46,33 @@ $pa-elevation: (
 	28: 0 14px calc(28px + #{$elevation-pa}) rgb(0 0 0 / 72%),
 	32: 0 16px calc(32px + #{$elevation-pa}) rgb(0 0 0 / 76%)
 );
+$ap-elevation: (
+	0: none,
+	1: 0 1px calc(3px + #{$elevation-ap}) rgb(0 0 0 / 10%),
+	2: 0 1px calc(5px + #{$elevation-ap}) rgb(0 0 0 / 14%),
+	3: 0 1px calc(8px + #{$elevation-ap}) rgb(0 0 0 / 20%),
+	4: 0 2px calc(4px + #{$elevation-ap}) rgb(0 0 0 / 20%),
+	5: 0 2px calc(6px + #{$elevation-ap}) rgb(0 0 0 / 24%),
+	6: 0 3px calc(6px + #{$elevation-ap}) rgb(0 0 0 / 28%),
+	7: 0 3px calc(8px + #{$elevation-ap}) rgb(0 0 0 / 32%),
+	8: 0 4px calc(8px + #{$elevation-ap}) rgb(0 0 0 / 36%),
+	9: 0 4px calc(10px + #{$elevation-ap}) rgb(0 0 0 / 40%),
+	10: 0 5px calc(10px + #{$elevation-ap}) rgb(0 0 0 / 44%),
+	12: 0 6px calc(12px + #{$elevation-ap}) rgb(0 0 0 / 48%),
+	14: 0 7px calc(14px + #{$elevation-ap}) rgb(0 0 0 / 52%),
+	16: 0 8px calc(16px + #{$elevation-ap}) rgb(0 0 0 / 56%),
+	18: 0 9px calc(18px + #{$elevation-ap}) rgb(0 0 0 / 60%),
+	20: 0 10px calc(20px + #{$elevation-ap}) rgb(0 0 0 / 64%),
+	24: 0 12px calc(24px + #{$elevation-ap}) rgb(0 0 0 / 68%),
+	28: 0 14px calc(28px + #{$elevation-ap}) rgb(0 0 0 / 72%),
+	32: 0 16px calc(32px + #{$elevation-ap}) rgb(0 0 0 / 76%)
+);
 
 // Define CSS variables globally
 :root {
 	--elevation-cnam: #{$elevation-cnam};
 	--elevation-pa: #{$elevation-pa};
+	--elevation-ap: #{$elevation-ap};
 
 	@each $key, $value in $cnam-elevation {
 		--elevation-#{$key}: #{$value};
@@ -70,6 +93,13 @@ $pa-elevation: (
 	}
 }
 
+// Apply theme-based AP
+.theme-ap {
+	@each $key, $value in $ap-elevation {
+		--elevation-#{$key}: #{$value};
+	}
+}
+
 // Mixin to generate elevation classes dynamically
 @mixin generate-elevation-classes($prefix) {
 	@each $key, $value in $cnam-elevation {

package/src/assets/_radius.scss

@@ -1,6 +1,7 @@
 // Define theme radius separately
 $border-radius-cnam: 4px;
 $border-radius-pa: 4px;
+$border-radius-ap: 12px;
 $cnam-radius: (
 	0: 0px,
 	'sm': calc($border-radius-cnam / 2),
@@ -19,6 +20,15 @@ $pa-radius: (
 	'pill': 9999px,
 	'circle': 50%
 );
+$ap-radius: (
+	0: 0px,
+	'sm': calc($border-radius-ap / 2),
+	'md': $border-radius-ap,
+	'lg': calc($border-radius-ap * 2),
+	'xl': calc($border-radius-ap * 4),
+	'pill': 9999px,
+	'circle': 50%
+);
 
 // Define all possible radius keys to ensure consistent class generation
 $radius-keys: (0, 'sm', 'md', 'lg', 'xl', 'pill', 'circle');
@@ -44,6 +54,13 @@ $radius-keys: (0, 'sm', 'md', 'lg', 'xl', 'pill', 'circle');
 	}
 }
 
+// ✅ Apply theme-based ap
+.theme-ap {
+	@each $key, $value in $ap-radius {
+		--radius-#{$key}: #{$value};
+	}
+}
+
 // ✅ Mixin to generate border-radius classes
 @mixin generate-radius-classes($prefix) {
 	@each $key in $radius-keys {

package/src/assets/_spacers.scss

@@ -1,6 +1,7 @@
 // Define base spacer values
 $base-spacer-cnam: 4px;
 $base-spacer-pa: 4px;
+$base-spacer-ap: 4px;
 
 // Define theme spacers using base values
 $cnam-spacers: (
@@ -71,6 +72,40 @@ $pa-spacers: (
 	60: $base-spacer-pa * 60,
 	64: $base-spacer-pa * 64,
 );
+$ap-spacers: (
+	0: 0px,
+	1: $base-spacer-ap,
+	2: $base-spacer-ap * 2,
+	3: $base-spacer-ap * 3,
+	4: $base-spacer-ap * 4,
+	5: $base-spacer-ap * 5,
+	6: $base-spacer-ap * 6,
+	7: $base-spacer-ap * 7,
+	8: $base-spacer-ap * 8,
+	9: $base-spacer-ap * 9,
+	10: $base-spacer-ap * 10,
+	11: $base-spacer-ap * 11,
+	12: $base-spacer-ap * 12,
+	13: $base-spacer-ap * 13,
+	14: $base-spacer-ap * 14,
+	15: $base-spacer-ap * 15,
+	16: $base-spacer-ap * 16,
+	17: $base-spacer-ap * 17,
+	18: $base-spacer-ap * 18,
+	19: $base-spacer-ap * 19,
+	20: $base-spacer-ap * 20,
+	24: $base-spacer-ap * 24,
+	28: $base-spacer-ap * 28,
+	32: $base-spacer-ap * 32,
+	36: $base-spacer-ap * 36,
+	40: $base-spacer-ap * 40,
+	44: $base-spacer-ap * 44,
+	48: $base-spacer-ap * 48,
+	52: $base-spacer-ap * 52,
+	56: $base-spacer-ap * 56,
+	60: $base-spacer-ap * 60,
+	64: $base-spacer-ap * 64,
+);
 
 // Define CSS variables for spacers dynamically
 :root {
@@ -92,6 +127,12 @@ $pa-spacers: (
 	}
 }
 
+.theme-ap {
+	@each $key, $value in $ap-spacers {
+		--spacing-#{$key}: #{$value};
+	}
+}
+
 // Mixin to generate padding and margin classes
 @mixin generate-spacing-classes($property, $prefix) {
 	@for $i from 0 through 64 {
@@ -172,10 +213,26 @@ $breakpoints: (
 @include generate-breakpoint-spacing-classes(padding-top, pt);
 @include generate-breakpoint-spacing-classes(margin-bottom, mb);
 @include generate-breakpoint-spacing-classes(padding-bottom, pb);
-@include generate-breakpoint-spacing-classes(margin, mx);
-@include generate-breakpoint-spacing-classes(padding, px);
-@include generate-breakpoint-spacing-classes(margin, my);
-@include generate-breakpoint-spacing-classes(padding, py);
+
+// Mixin for X (left & right) and Y (top & bottom) spacing with breakpoints
+@mixin generate-breakpoint-axis-spacing-classes($property, $prefix, $side1, $side2) {
+	@each $breakpoint, $value in $breakpoints {
+		@for $i from 0 through 64 {
+			.#{$prefix}-#{$breakpoint}-#{$i} {
+				@media (min-width: #{$value}) {
+					#{$property}-#{$side1}: var(--spacing-#{$i}) !important;
+					#{$property}-#{$side2}: var(--spacing-#{$i}) !important;
+				}
+			}
+		}
+	}
+}
+
+// Generate px, py, mx, my breakpoints spacing classes
+@include generate-breakpoint-axis-spacing-classes(padding, px, left, right);
+@include generate-breakpoint-axis-spacing-classes(padding, py, top, bottom);
+@include generate-breakpoint-axis-spacing-classes(margin, mx, left, right);
+@include generate-breakpoint-axis-spacing-classes(margin, my, top, bottom);
 
 // Additional classes for specific spacing
 

package/src/assets/_typography.scss

@@ -1,49 +1,48 @@
 /* Typography styles for CNAM and PA themes */
 
-/* Theme Typography */
-.v-theme--cnam,
-.v-theme--pa {
+.v-application .v-theme--cnam,
+.v-application .v-theme--pa {
 	/* Headings with Vuetify classes */
 	.text-h1 {
 		font-size: var(--v-typography-h1-font-size) !important;
 		font-weight: var(--v-typography-h1-font-weight) !important;
 		line-height: var(--v-typography-h1-line-height) !important;
-		letter-spacing: var(--v-typography-h1-letter-spacing) !important;
+		letter-spacing: var(--v-typography-h1-letter-spacing);
 	}
 
 	.text-h2 {
 		font-size: var(--v-typography-h2-font-size) !important;
 		font-weight: var(--v-typography-h2-font-weight) !important;
 		line-height: var(--v-typography-h2-line-height) !important;
-		letter-spacing: var(--v-typography-h2-letter-spacing) !important;
+		letter-spacing: var(--v-typography-h2-letter-spacing);
 	}
 
 	.text-h3 {
 		font-size: var(--v-typography-h3-font-size) !important;
 		font-weight: var(--v-typography-h3-font-weight) !important;
 		line-height: var(--v-typography-h3-line-height) !important;
-		letter-spacing: var(--v-typography-h3-letter-spacing) !important;
+		letter-spacing: var(--v-typography-h3-letter-spacing);
 	}
 
 	.text-h4 {
 		font-size: var(--v-typography-h4-font-size) !important;
 		font-weight: var(--v-typography-h4-font-weight) !important;
 		line-height: var(--v-typography-h4-line-height) !important;
-		letter-spacing: var(--v-typography-h4-letter-spacing) !important;
+		letter-spacing: var(--v-typography-h4-letter-spacing);
 	}
 
 	.text-h5 {
 		font-size: var(--v-typography-h5-font-size) !important;
 		font-weight: var(--v-typography-h5-font-weight) !important;
 		line-height: var(--v-typography-h5-line-height) !important;
-		letter-spacing: var(--v-typography-h5-letter-spacing) !important;
+		letter-spacing: var(--v-typography-h5-letter-spacing);
 	}
 
 	.text-h6 {
 		font-size: var(--v-typography-h6-font-size) !important;
 		font-weight: var(--v-typography-h6-font-weight) !important;
 		line-height: var(--v-typography-h6-line-height) !important;
-		letter-spacing: var(--v-typography-h6-letter-spacing) !important;
+		letter-spacing: var(--v-typography-h6-letter-spacing);
 	}
 
 	/* Native HTML heading elements */
@@ -51,7 +50,7 @@
 		font-size: var(--v-typography-h1-font-size) !important;
 		font-weight: var(--v-typography-h1-font-weight) !important;
 		line-height: var(--v-typography-h1-line-height) !important;
-		letter-spacing: var(--v-typography-h1-letter-spacing) !important;
+		letter-spacing: var(--v-typography-h1-letter-spacing);
 		margin-bottom: 0.5rem;
 	}
 
@@ -59,7 +58,7 @@
 		font-size: var(--v-typography-h2-font-size) !important;
 		font-weight: var(--v-typography-h2-font-weight) !important;
 		line-height: var(--v-typography-h2-line-height) !important;
-		letter-spacing: var(--v-typography-h2-letter-spacing) !important;
+		letter-spacing: var(--v-typography-h2-letter-spacing);
 		margin-bottom: 0.5rem;
 	}
 
@@ -67,7 +66,7 @@
 		font-size: var(--v-typography-h3-font-size) !important;
 		font-weight: var(--v-typography-h3-font-weight) !important;
 		line-height: var(--v-typography-h3-line-height) !important;
-		letter-spacing: var(--v-typography-h3-letter-spacing) !important;
+		letter-spacing: var(--v-typography-h3-letter-spacing);
 		margin-bottom: 0.5rem;
 	}
 
@@ -75,7 +74,7 @@
 		font-size: var(--v-typography-h4-font-size) !important;
 		font-weight: var(--v-typography-h4-font-weight) !important;
 		line-height: var(--v-typography-h4-line-height) !important;
-		letter-spacing: var(--v-typography-h4-letter-spacing) !important;
+		letter-spacing: var(--v-typography-h4-letter-spacing);
 		margin-bottom: 0.5rem;
 	}
 
@@ -83,7 +82,7 @@
 		font-size: var(--v-typography-h5-font-size) !important;
 		font-weight: var(--v-typography-h5-font-weight) !important;
 		line-height: var(--v-typography-h5-line-height) !important;
-		letter-spacing: var(--v-typography-h5-letter-spacing) !important;
+		letter-spacing: var(--v-typography-h5-letter-spacing);
 		margin-bottom: 0.5rem;
 	}
 
@@ -91,7 +90,7 @@
 		font-size: var(--v-typography-h6-font-size) !important;
 		font-weight: var(--v-typography-h6-font-weight) !important;
 		line-height: var(--v-typography-h6-line-height) !important;
-		letter-spacing: var(--v-typography-h6-letter-spacing) !important;
+		letter-spacing: var(--v-typography-h6-letter-spacing);
 		margin-bottom: 0.5rem;
 	}
 
@@ -100,14 +99,14 @@
 		font-size: var(--v-typography-body1-font-size) !important;
 		font-weight: var(--v-typography-body1-font-weight) !important;
 		line-height: var(--v-typography-body1-line-height) !important;
-		letter-spacing: var(--v-typography-body1-letter-spacing) !important;
+		letter-spacing: var(--v-typography-body1-letter-spacing);
 	}
 
 	.text-body-2 {
 		font-size: var(--v-typography-body2-font-size) !important;
 		font-weight: var(--v-typography-body2-font-weight) !important;
 		line-height: var(--v-typography-body2-line-height) !important;
-		letter-spacing: var(--v-typography-body2-letter-spacing) !important;
+		letter-spacing: var(--v-typography-body2-letter-spacing);
 	}
 
 	/* Subtitle text */
@@ -115,14 +114,14 @@
 		font-size: var(--v-typography-subtitle1-font-size) !important;
 		font-weight: var(--v-typography-subtitle1-font-weight) !important;
 		line-height: var(--v-typography-subtitle1-line-height) !important;
-		letter-spacing: var(--v-typography-subtitle1-letter-spacing) !important;
+		letter-spacing: var(--v-typography-subtitle1-letter-spacing);
 	}
 
 	.text-subtitle-2 {
 		font-size: var(--v-typography-subtitle2-font-size) !important;
 		font-weight: var(--v-typography-subtitle2-font-weight) !important;
 		line-height: var(--v-typography-subtitle2-line-height) !important;
-		letter-spacing: var(--v-typography-subtitle2-letter-spacing) !important;
+		letter-spacing: var(--v-typography-subtitle2-letter-spacing);
 	}
 
 	/* Other typography */
@@ -130,14 +129,14 @@
 		font-size: var(--v-typography-caption-font-size) !important;
 		font-weight: var(--v-typography-caption-font-weight) !important;
 		line-height: var(--v-typography-caption-line-height) !important;
-		letter-spacing: var(--v-typography-caption-letter-spacing) !important;
+		letter-spacing: var(--v-typography-caption-letter-spacing);
 	}
 
 	.text-overline {
 		font-size: var(--v-typography-overline-font-size) !important;
 		font-weight: var(--v-typography-overline-font-weight) !important;
 		line-height: var(--v-typography-overline-line-height) !important;
-		letter-spacing: var(--v-typography-overline-letter-spacing) !important;
+		letter-spacing: var(--v-typography-overline-letter-spacing);
 		text-transform: var(--v-typography-overline-text-transform, uppercase) !important;
 	}
 
@@ -146,13 +145,13 @@
 		font-size: var(--v-typography-display1-font-size) !important;
 		font-weight: var(--v-typography-display1-font-weight) !important;
 		line-height: var(--v-typography-display1-line-height) !important;
-		letter-spacing: var(--v-typography-display1-letter-spacing) !important;
+		letter-spacing: var(--v-typography-display1-letter-spacing);
 	}
 
 	.text-display-2 {
 		font-size: var(--v-typography-display2-font-size) !important;
 		font-weight: var(--v-typography-display2-font-weight) !important;
 		line-height: var(--v-typography-display2-line-height) !important;
-		letter-spacing: var(--v-typography-display2-letter-spacing) !important;
+		letter-spacing: var(--v-typography-display2-letter-spacing);
 	}
 }