@tilde-nlp/ngx-common 8.0.6 → 8.0.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tilde-nlp/ngx-common",
-  "version": "8.0.6",
+  "version": "8.0.8",
   "peerDependencies": {
     "@angular/common": "^20.0.0",
     "@angular/core": "^20.0.0",

package/styles/spin-animation.scss

@@ -1,9 +1,9 @@
 .spin {
-  animation: spinArrow 0.3s forwards;
+	animation: spinArrow 0.3s forwards;
 }
 
 @keyframes spinArrow {
-  to {
-    transform: rotate(180deg);
-  }
+	to {
+		transform: rotate(180deg);
+	}
 }

package/styles/theme-colors.scss

@@ -0,0 +1,133 @@
+@use "sass:map";
+@use "@angular/material" as mat;
+
+$_palettes: (
+	primary: (
+		0: #000000,
+		10: #400013,
+		20: #670024,
+		25: #770f2e,
+		30: #861c39,
+		35: #962944,
+		40: #a6354f,
+		50: #c64e67,
+		60: #e76780,
+		70: #ff869b,
+		80: #ffb2bc,
+		90: #ffd9dd,
+		95: #ffeced,
+		98: #fff8f7,
+		99: #fffbff,
+		100: #ffffff,
+	),
+	secondary: (
+		0: #000000,
+		10: #001c38,
+		20: #00315b,
+		25: #003d6e,
+		30: #004881,
+		35: #005495,
+		40: #0060a9,
+		50: #2179cc,
+		60: #4693e8,
+		70: #6baeff,
+		80: #a2c9ff,
+		90: #d3e4ff,
+		95: #eaf1ff,
+		98: #f8f9ff,
+		99: #fdfcff,
+		100: #ffffff,
+	),
+	tertiary: (
+		0: #000000,
+		10: #2a1700,
+		20: #472a00,
+		25: #553403,
+		30: #623f0e,
+		35: #704b19,
+		40: #7d5724,
+		50: #996f3a,
+		60: #b58851,
+		70: #d3a268,
+		80: #f0bd81,
+		90: #ffddb8,
+		95: #ffeede,
+		98: #fff8f4,
+		99: #fffbff,
+		100: #ffffff,
+	),
+	neutral: (
+		0: #000000,
+		10: #24191a,
+		20: #3a2d2e,
+		25: #463839,
+		30: #524344,
+		35: #5e4f50,
+		40: #6a5b5c,
+		50: #847374,
+		60: #9f8c8d,
+		70: #baa7a8,
+		80: #d6c2c3,
+		90: #f3ddde,
+		95: #ffeced,
+		98: #fff8f7,
+		99: #fffbff,
+		100: #ffffff,
+		4: #160b0c,
+		6: #1b1112,
+		12: #281d1e,
+		17: #332728,
+		22: #3f3132,
+		24: #433637,
+		87: #ead5d6,
+		92: #f9e3e4,
+		94: #ffe9ea,
+		96: #fff0f0,
+	),
+	neutral-variant: (
+		0: #000000,
+		10: #281719,
+		20: #3e2b2e,
+		25: #4a3639,
+		30: #564144,
+		35: #634d4f,
+		40: #6f595b,
+		50: #897174,
+		60: #a48a8d,
+		70: #c0a4a7,
+		80: #ddbfc2,
+		90: #fadbde,
+		95: #ffeced,
+		98: #fff8f7,
+		99: #fffbff,
+		100: #ffffff,
+	),
+	error: (
+		0: #000000,
+		10: #410002,
+		20: #690006,
+		25: #7d0008,
+		30: #93000c,
+		35: #a90411,
+		40: #ba191b,
+		50: #de3631,
+		60: #ff544a,
+		70: #ff897e,
+		80: #ffb4ab,
+		90: #ffdad6,
+		95: #ffedea,
+		98: #fff8f7,
+		99: #fffbff,
+		100: #ffffff,
+	),
+);
+
+$_rest: (
+	secondary: map.get($_palettes, secondary),
+	neutral: map.get($_palettes, neutral),
+	neutral-variant: map.get($_palettes, neutral-variant),
+	error: map.get($_palettes, error),
+);
+
+$primary-palette: map.merge(map.get($_palettes, primary), $_rest);
+$tertiary-palette: map.merge(map.get($_palettes, tertiary), $_rest);

package/styles/tilde-fonts.scss

@@ -1,3 +1,3 @@
-@import './fonts/inter/inter.scss';
+@import "./fonts/inter/inter.scss";
 // Roboto font necessary for tilde company and product titles in headers
-@import './fonts/roboto/roboto.scss';
+@import "./fonts/roboto/roboto.scss";

package/styles/tilde-style.scss

@@ -1,10 +1,8 @@
 @use "./variables/borders.variables.scss";
-
 @use "./components/buttons.scss";
 @use "./components/links.scss";
 @use "./components/icons.scss";
 @use "./components/dialogs.scss";
-// @use "./components/borders.scss";
 @use "./components/strapi-html.scss";
 @use "./typography.scss";
 @use "./custom/containers.scss";

package/styles/tilde-theme.scss

@@ -1,4 +1,5 @@
 @use "@angular/material" as mat;
+@use "./theme-colors" as theme;
 
 @import "./tilde-style.scss";
 
@@ -10,88 +11,63 @@
 
 @include tld-all-mixins();
 
-@include mat.all-component-typographies();
-@include mat.elevation-classes();
-@include mat.app-background();
-
-$tld-accent: (
-  50: #ffd9dd,
-  100: #e6bdc9,
-  200: #d691a5,
-  300: #c66580,
-  400: #b94465,
-  500: #ad234a,
-  600: #a61f43,
-  700: #9c1a3a,
-  800: #931532,
-  900: #830c22,
-  A100: #ffb3bf,
-  A200: #ff8093,
-  A400: #ff4d68,
-  A700: #ff3452,
-  contrast: (
-    50: #000000,
-    100: #000000,
-    200: #000000,
-    300: #000000,
-    400: #ffffff,
-    500: #ffffff,
-    600: #ffffff,
-    700: #ffffff,
-    800: #ffffff,
-    900: #ffffff,
-    A100: #000000,
-    A200: #000000,
-    A400: #000000,
-    A700: #ffffff,
-  ),
-);
-$tld-primary: (
-  50: #ebedee,
-  100: #ced1d5,
-  200: #adb3b9,
-  300: #8c949c,
-  400: #737d87,
-  500: #5a6672,
-  600: #525e6a,
-  700: #48535f,
-  800: #3f4955,
-  900: #2e3842,
-  A100: #91c5ff,
-  A200: #5eaaff,
-  A400: #2b90ff,
-  A700: #1282ff,
-  contrast: (
-    50: #000000,
-    100: #000000,
-    200: #000000,
-    300: #000000,
-    900: #ffffff,
-    A100: #000000,
-    A200: #000000,
-    A400: #ffffff,
-    A700: #ffffff,
-  ),
-);
-
-$tld-custom-typography: mat.m2-define-typography-config(
-  $font-family: var(--tld-font) !important,
-);
-
-$tld-accent-pallete: mat.m2-define-palette($tld-accent);
-$tld-primary-pallete: mat.m2-define-palette($tld-primary);
-$tld-translate-theme: mat.m2-define-light-theme(
-  (
-    color: (
-      primary: $tld-primary-pallete,
-      accent: $tld-accent-pallete,
-    ),
-    typography: $tld-custom-typography,
-  )
-);
-
-@include mat.all-component-themes($tld-translate-theme);
+html {
+	@include mat.theme(
+		(
+			color: (
+				primary: theme.$primary-palette,
+				tertiary: theme.$tertiary-palette,
+				theme-type: light,
+			),
+			typography: $tld-font,
+			density: 0,
+		)
+	);
+}
 
 * {
-  letter-spacing: 0 !important;
+	letter-spacing: 0 !important;
+}
+
+:root {
+	@include mat.card-overrides(
+		(
+			elevated-container-color: var(--base-100),
+		)
+	);
+	@include mat.divider-overrides(
+		(
+			color: var(--base-70),
+		)
+	);
+	@include mat.select-overrides(
+		(
+			panel-background-color: var(--base-100),
+		)
+	);
+	@include mat.table-overrides(
+		(
+			background-color: var(--base-100),
+		)
+	);
+	@include mat.button-overrides(
+		(
+			text-label-text-color: var(--base-0),
+		)
+	);
+	@include mat.dialog-overrides(
+		(
+			container-color: var(--base-100),
+		)
+	);
+	@include mat.autocomplete-overrides(
+		(
+			background-color: var(--base-100),
+		)
+	);
+	@include mat.menu-overrides(
+		(
+			container-color: var(--base-100),
+		)
+	);
 }

package/styles/typography.scss

@@ -1,75 +1,73 @@
-@use './variables/font-size.variables.scss' as fs;
-@import '@ngbracket/ngx-layout/core/sass/layout-bp';
+@use "./variables/font-size.variables.scss" as fs;
+@import "@ngbracket/ngx-layout/core/sass/layout-bp";
 
 .semi-bold {
-  font-weight: 600;
+	font-weight: 600;
 }
 
 .text-4-xl {
-  @extend .semi-bold;
+	@extend .semi-bold;
 
-  @include layout-bp(gt-xs) {
-    font-size: fs.$font-size-4-xl;
-    line-height: 3.375rem;
-  }
+	@include layout-bp(gt-xs) {
+		font-size: fs.$font-size-4-xl;
+		line-height: 3.375rem;
+	}
 
-  @include layout-bp(xs) {
-    font-size: 2rem;
-    line-height: 2.625rem;
-  }
+	@include layout-bp(xs) {
+		font-size: 2rem;
+		line-height: 2.625rem;
+	}
 }
 
-
 .text-3-xl {
-  @extend .semi-bold;
-  font-size: fs.$font-size-3-xl;
-  line-height: 2.625rem;
+	@extend .semi-bold;
+	font-size: fs.$font-size-3-xl;
+	line-height: 2.625rem;
 }
 
 .text-2-xl {
-  @extend .semi-bold;
+	@extend .semi-bold;
 
-  font-size: fs.$font-size-2-xl;
-  line-height: 2.125rem;
+	font-size: fs.$font-size-2-xl;
+	line-height: 2.125rem;
 }
 
 .text-xl {
-  font-size: fs.$font-size-xl;
-  line-height: 2rem;
+	font-size: fs.$font-size-xl;
+	line-height: 2rem;
 
-  &-semi-bold {
-    @extend .text-xl;
-    @extend .semi-bold;
-  }
+	&-semi-bold {
+		@extend .text-xl;
+		@extend .semi-bold;
+	}
 }
 
 .text-l {
-  font-size: fs.$font-size-l;
-  line-height: 1.625rem;
-
+	font-size: fs.$font-size-l;
+	line-height: 1.625rem;
 
-  &-semi-bold {
-    @extend .text-l;
-    @extend .semi-bold;
-  }
+	&-semi-bold {
+		@extend .text-l;
+		@extend .semi-bold;
+	}
 }
 
 .text-m {
-  font-size: fs.$font-size-m;
-  line-height: 1.4375rem;
+	font-size: fs.$font-size-m;
+	line-height: 1.4375rem;
 
-  &-semi-bold {
-    @extend .text-m;
-    @extend .semi-bold;
-  }
+	&-semi-bold {
+		@extend .text-m;
+		@extend .semi-bold;
+	}
 }
 
 .text-s {
-  font-size: fs.$font-size-s;
-  line-height: 1.25rem;
+	font-size: fs.$font-size-s;
+	line-height: 1.25rem;
 
-  &-semi-bold {
-    @extend .text-s;
-    @extend .semi-bold;
-  }
+	&-semi-bold {
+		@extend .text-s;
+		@extend .semi-bold;
+	}
 }

package/styles/variables/colors.variables.scss

@@ -1,28 +1,28 @@
 $default-colors: (
-    base-100: #FFFFFF,
-    base-95: #F1F2F3,
-    base-70: #DEE0E3,
-    base-65: #9AA5B1,
-    base-40: #656E76,
-    base-30: #474D53,
-    base-10: #181A1B,
-    base-0: #000000,
-    neutral-50: #847374,
-    neutral-95: #FBEEEE,
-    overlay: #181A1B 70%,
-    primary-accent: #811835,
-    primary-accent-lighter: #F6E4E5,
-    secondary-accent: #0A70C2,
-    info-primary: #0288D1,
-    info-dark: #014361,
-    info-light: #E5F6FD,
-    success-dark: #177D61,
-    success-light: #E1F9F3,
-    warning-dark: #B25300,
-    warning-light: #FFF1E5,
-    error-dark: #C42121,
-    error-light: #FDF2F2,
-    gradient: #667680,
-    /* Same as primary accent. But necessary for styling some links from angular material. */
-    accent: #811835
+	base-100: #ffffff,
+	base-95: #f1f2f3,
+	base-70: #dee0e3,
+	base-65: #9aa5b1,
+	base-40: #656e76,
+	base-30: #474d53,
+	base-10: #181a1b,
+	base-0: #000000,
+	neutral-50: #847374,
+	neutral-95: #fbeeee,
+	overlay: #181a1b 70%,
+	primary-accent: #811835,
+	primary-accent-lighter: #f6e4e5,
+	secondary-accent: #0a70c2,
+	info-primary: #0288d1,
+	info-dark: #014361,
+	info-light: #e5f6fd,
+	success-dark: #177d61,
+	success-light: #e1f9f3,
+	warning-dark: #b25300,
+	warning-light: #fff1e5,
+	error-dark: #c42121,
+	error-light: #fdf2f2,
+	gradient: #667680,
+	/* Same as primary accent. But necessary for styling some links from angular material. */
+		accent: #811835,
 );