@igo2/core 19.0.0-next.8 → 19.0.0

package/src/theming/prebuilt-themes/bluedark-theme.scss

@@ -1,61 +1,10 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../all-theme';
-@use '../typography';
-
-$bluedark-palette: (
-  50: #e3eaec,
-  100: #b9cad0,
-  200: #8ba7b1,
-  300: #5c8391,
-  400: #39697a,
-  500: #164e62,
-  600: #13475a,
-  700: #103d50,
-  800: #0c3546,
-  900: #062534,
-  A100: #6dc6ff,
-  A200: #3ab2ff,
-  A400: #079eff,
-  A700: #0090ec,
-  contrast: (
-    50: #000000,
-    100: #000000,
-    200: #000000,
-    300: #ffffff,
-    400: #ffffff,
-    500: #ffffff,
-    600: #ffffff,
-    700: #ffffff,
-    800: #ffffff,
-    900: #ffffff,
-    A100: #000000,
-    A200: #000000,
-    A400: #ffffff,
-    A700: #ffffff
-  )
-);
-
-$primary: mat.m2-define-palette($bluedark-palette, 500);
-$accent: mat.m2-define-palette($bluedark-palette, 200);
-$warn: mat.m2-define-palette(mat.$m2-red-palette);
-$typography: typography.$igo-typography;
-
-$theme: mat.m2-define-light-theme(
-  (
-    color: (
-      primary: $primary,
-      accent: $accent,
-      warn: $warn
-    ),
-    typography: $typography,
-    density: 0
-  )
-);
-
-@include mat.elevation-classes();
-@include mat.app-background();
-@include mat.typography-hierarchy($typography);
-@include mat.all-component-themes($theme);
-
-@include all-theme.all-component-themes($theme);
+@use '../themes/bluedark-theme';
+@use '../themes/theme';
+
+html .bluedark-theme {
+  @include theme.theme(
+    bluedark-theme.$theme,
+    bluedark-theme.$defined-theme,
+    'bluedark'
+  );
+}

package/src/theming/prebuilt-themes/bluedq-theme.scss

@@ -1,61 +1,10 @@
-@use 'sass:map';
-@use '@angular/material' as mat;
-@use '../all-theme';
-@use '../typography';
-
-$dq-palette: (
-  50: #e1f5fd,
-  100: #b4e5fb,
-  200: #82d4f8,
-  300: #53c3f4,
-  400: #31b6f2,
-  500: #0d81df,
-  600: #149be1,
-  700: #1088cd,
-  800: #0f77b9,
-  900: #095797,
-  A100: #6dc6ff,
-  A200: #3ab2ff,
-  A400: #079eff,
-  A700: #0090ec,
-  contrast: (
-    50: #000000,
-    100: #000000,
-    200: #000000,
-    300: #000000,
-    400: #000000,
-    500: #000000,
-    600: #ffffff,
-    700: #ffffff,
-    800: #ffffff,
-    900: #ffffff,
-    A100: #000000,
-    A200: #000000,
-    A400: #ffffff,
-    A700: #ffffff
-  )
-);
-
-$primary: mat.m2-define-palette($dq-palette, 900);
-$accent: mat.m2-define-palette($dq-palette, 500);
-$warn: mat.m2-define-palette(mat.$m2-red-palette);
-$typography: typography.$igo-typography;
-
-$theme: mat.m2-define-light-theme(
-  (
-    color: (
-      primary: $primary,
-      accent: $accent,
-      warn: $warn
-    ),
-    typography: $typography,
-    density: 0
-  )
-);
-
-@include mat.elevation-classes();
-@include mat.app-background();
-@include mat.typography-hierarchy($typography);
-@include mat.all-component-themes($theme);
-
-@include all-theme.all-component-themes($theme);
+@use '../themes/bluedq-theme';
+@use '../themes/theme';
+
+html .bluedq-theme {
+  @include theme.theme(
+    bluedq-theme.$theme,
+    bluedq-theme.$defined-theme,
+    'bluedq'
+  );
+}

package/src/theming/prebuilt-themes/teal-theme.scss

@@ -1,27 +1,6 @@
-@use '@angular/material' as mat;
-@use '../all-theme';
-@use '../typography';
+@use '../themes/teal-theme';
+@use '../themes/theme';
 
-$primary: mat.m2-define-palette(mat.$m2-teal-palette, 600, 400, 900);
-$accent: mat.m2-define-palette(mat.$m2-teal-palette, 400);
-$warn: mat.m2-define-palette(mat.$m2-red-palette);
-$typography: typography.$igo-typography;
-
-$theme: mat.m2-define-light-theme(
-  (
-    color: (
-      primary: $primary,
-      accent: $accent,
-      warn: $warn
-    ),
-    typography: $typography,
-    density: 0
-  )
-);
-
-@include mat.elevation-classes();
-@include mat.app-background();
-@include mat.typography-hierarchy($typography);
-@include mat.all-component-themes($theme);
-
-@include all-theme.all-component-themes($theme);
+html .teal-theme {
+  @include theme.theme(teal-theme.$theme, teal-theme.$defined-theme, 'teal');
+}

package/src/theming/themes/_blue-theme.scss

@@ -0,0 +1,139 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+// Note: Color palettes are generated from primary: #1976d2, secondary: #1976d2, tertiary: #1976d2
+$_palettes: (
+  primary: (
+    0: #000000,
+    10: #001c3a,
+    20: #003c72,
+    25: #00539a,
+    30: #1976d2,
+    35: #1976d2,
+    40: #1976d2,
+    50: #1976d2,
+    60: #4492f0,
+    70: #72adff,
+    80: #4a98d9,
+    90: #72b2eb,
+    95: #eaf1ff,
+    98: #f8f9ff,
+    99: #fdfcff,
+    100: #ffffff
+  ),
+  secondary: (
+    0: #000000,
+    10: #001c3a,
+    20: #003c72,
+    25: #00539a,
+    30: #1976d2,
+    35: #1976d2,
+    40: #1976d2,
+    50: #1976d2,
+    60: #4492f0,
+    70: #72adff,
+    80: #90caf9,
+    90: #bbdefb,
+    95: #ebf1ff,
+    98: #f9f9ff,
+    99: #fdfcff,
+    100: #ffffff
+  ),
+  neutral: (
+    0: #000000,
+    10: #181c21,
+    20: #2d3037,
+    25: #383b42,
+    30: #44474d,
+    35: #4f5259,
+    40: #5b5e65,
+    50: #74777e,
+    60: #8e9198,
+    70: #a9abb3,
+    80: #c4c6ce,
+    90: #e0e2ea,
+    95: #eff0f9,
+    98: #ffffff,
+    99: #ffffff,
+    100: #ffffff,
+    4: #0b0e14,
+    6: #101319,
+    12: #1c2026,
+    17: #272a30,
+    22: #32353b,
+    24: #363940,
+    87: #d8dae2,
+    92: #e6e8f0,
+    94: #ecedf6,
+    96: #f2f3fc
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #161c26,
+    20: #2b313b,
+    25: #363c46,
+    30: #414752,
+    35: #4d535e,
+    40: #585f6a,
+    50: #717783,
+    60: #8b919e,
+    70: #a5abb8,
+    80: #c1c6d4,
+    90: #dde2f0,
+    95: #ebf1ff,
+    98: #ffffff,
+    99: #ffffff,
+    100: #ffffff
+  ),
+  error: (
+    0: #000000,
+    10: #410002,
+    20: #690005,
+    25: #7e0007,
+    30: #93000a,
+    35: #a80710,
+    40: #f44336,
+    50: #f44336,
+    60: #ff5449,
+    70: #ff897d,
+    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);
+
+$font-family: var(--igo-font-family-text, ('Roboto', sans-serif));
+
+$theme: (
+  theme-type: light,
+  color: $primary-palette,
+  typography: $font-family,
+  density: 0
+);
+
+$defined-theme: mat.define-theme(
+  (
+    color: (
+      primary: $primary-palette
+    ),
+    typography: (
+      brand-family: $font-family,
+      plain-family: $font-family
+    ),
+    density: (
+      scale: 0
+    )
+  )
+);

package/src/theming/themes/_bluedark-theme.scss

@@ -0,0 +1,139 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+// Note: Color palettes are generated from primary: #095797, tertiary: #0d81df
+$_palettes: (
+  primary: (
+    0: #000000,
+    10: #001f2a,
+    20: #003546,
+    25: #004154,
+    30: #164e62,
+    35: #164e62,
+    40: #164e62,
+    50: #164e62,
+    60: #6697ae,
+    70: #81b2c9,
+    80: #8ba7b1,
+    90: #b9cad0,
+    95: #e0f4ff,
+    98: #f4faff,
+    99: #fafcff,
+    100: #ffffff
+  ),
+  secondary: (
+    0: #000000,
+    10: #0b1e25,
+    20: #21333b,
+    25: #2c3e46,
+    30: #384952,
+    35: #43555e,
+    40: #4f616a,
+    50: #687a83,
+    60: #81939d,
+    70: #9baeb8,
+    80: #b6c9d4,
+    90: #d2e5f0,
+    95: #e0f4fe,
+    98: #f4faff,
+    99: #fafcff,
+    100: #ffffff
+  ),
+  neutral: (
+    0: #000000,
+    10: #191c1d,
+    20: #2e3132,
+    25: #393c3d,
+    30: #454749,
+    35: #505354,
+    40: #5c5f60,
+    50: #757779,
+    60: #8f9192,
+    70: #aaabad,
+    80: #c5c6c8,
+    90: #e2e2e4,
+    95: #f0f1f2,
+    98: #f9f9fb,
+    99: #fcfcfe,
+    100: #ffffff,
+    4: #0c0f10,
+    6: #111415,
+    12: #1d2021,
+    17: #282a2c,
+    22: #333537,
+    24: #37393b,
+    87: #d9dadc,
+    92: #e7e8ea,
+    94: #edeeef,
+    96: #f3f3f5
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #151d20,
+    20: #2a3135,
+    25: #353c40,
+    30: #41484c,
+    35: #4c5358,
+    40: #585f64,
+    50: #71787c,
+    60: #8a9296,
+    70: #a5acb1,
+    80: #c0c7cc,
+    90: #dce3e8,
+    95: #ebf2f7,
+    98: #f4faff,
+    99: #fafcff,
+    100: #ffffff
+  ),
+  error: (
+    0: #000000,
+    10: #410002,
+    20: #690005,
+    25: #7e0007,
+    30: #93000a,
+    35: #a80710,
+    40: #f44336,
+    50: #f44336,
+    60: #ff5449,
+    70: #ff897d,
+    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);
+
+$font-family: var(--igo-font-family-text, ('Roboto', sans-serif));
+
+$theme: (
+  theme-type: light,
+  color: $primary-palette,
+  typography: $font-family,
+  density: 0
+);
+
+$defined-theme: mat.define-theme(
+  (
+    color: (
+      primary: $primary-palette
+    ),
+    typography: (
+      brand-family: $font-family,
+      plain-family: $font-family
+    ),
+    density: (
+      scale: 0
+    )
+  )
+);

package/src/theming/themes/_bluedq-theme.scss

@@ -0,0 +1,139 @@
+@use 'sass:map';
+@use '@angular/material' as mat;
+
+// Note: Color palettes are generated from primary: #095797, tertiary: #0d81df
+$_palettes: (
+  primary: (
+    0: #000000,
+    10: #001c38,
+    20: #00315b,
+    25: #003d6d,
+    30: #095797,
+    35: #095797,
+    40: #095797,
+    50: #095797,
+    60: #5a93d7,
+    70: #76aef4,
+    80: #a2c9ff,
+    90: #d3e4ff,
+    95: #eaf1ff,
+    98: #f8f9ff,
+    99: #fdfcff,
+    100: #ffffff
+  ),
+  secondary: (
+    0: #000000,
+    10: #001c38,
+    20: #00315b,
+    25: #003d6d,
+    30: #095797,
+    35: #095797,
+    40: #095797,
+    50: #095797,
+    60: #5a93d7,
+    70: #76aef4,
+    80: #a2c9ff,
+    90: #d3e4ff,
+    95: #eaf1ff,
+    98: #f8f9ff,
+    99: #fdfcff,
+    100: #ffffff
+  ),
+  neutral: (
+    0: #000000,
+    10: #191c20,
+    20: #2e3035,
+    25: #393b40,
+    30: #44474c,
+    35: #505257,
+    40: #5c5e63,
+    50: #75777c,
+    60: #8f9196,
+    70: #a9abb1,
+    80: #c5c6cc,
+    90: #e1e2e8,
+    95: #f0f0f6,
+    98: #f8f9ff,
+    99: #fdfcff,
+    100: #ffffff,
+    4: #0c0e12,
+    6: #111418,
+    12: #1d2024,
+    17: #272a2f,
+    22: #323539,
+    24: #37393e,
+    87: #d9dae0,
+    92: #e7e8ee,
+    94: #ededf4,
+    96: #f2f3f9
+  ),
+  neutral-variant: (
+    0: #000000,
+    10: #161c24,
+    20: #2b3139,
+    25: #363c45,
+    30: #414750,
+    35: #4d535c,
+    40: #595f68,
+    50: #727781,
+    60: #8b919b,
+    70: #a6abb6,
+    80: #c1c7d2,
+    90: #dee3ee,
+    95: #ecf1fc,
+    98: #f8f9ff,
+    99: #fdfcff,
+    100: #ffffff
+  ),
+  error: (
+    0: #000000,
+    10: #410002,
+    20: #690005,
+    25: #7e0007,
+    30: #93000a,
+    35: #a80710,
+    40: #f44336,
+    50: #f44336,
+    60: #ff5449,
+    70: #ff897d,
+    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);
+
+$font-family: var(--igo-font-family-text, ('Roboto', sans-serif));
+
+$theme: (
+  theme-type: light,
+  color: $primary-palette,
+  typography: $font-family,
+  density: 0
+);
+
+$defined-theme: mat.define-theme(
+  (
+    color: (
+      primary: $primary-palette
+    ),
+    typography: (
+      brand-family: $font-family,
+      plain-family: $font-family
+    ),
+    density: (
+      scale: 0
+    )
+  )
+);

package/src/theming/themes/_index.scss

@@ -0,0 +1,5 @@
+@forward './blue-theme' as blue-*;
+@forward './bluedark-theme' as bluedark-*;
+@forward './bluedq-theme' as bluedq-*;
+@forward './teal-theme' as teal-*;
+@forward './theme';