@mxtommy/kip 1.2.1 → 1.3.0

package/src/themes/defaultTheme.scss

@@ -1,49 +1,50 @@
-// Create theme palettes. We need Primary, Accent and Warn as defined by Angular Material theming
-
-// We use Mat predefined palettes
-
-//////////////////////////////////////////////////////////////////////////////////////////
-// Generate mat-material default theme palettes. Generate now so we call pull if necessary
-// palette color later in this scss file.
-//  * The warn palette is optional (defaults to $mat-red). This is the palette that should
-//    used for error and warning.
-$defaultTheme-primary: mat-palette($mat-cyan);
-$defaultTheme-accent:  mat-palette($mat-blue, A200, A100, A400);
-$defaultTheme-warn:    mat-palette($mat-red);
-
-// Palette for widget-gauge-ng-linear and widget-gauge-ng-radial instruments
-// Pull from mat-palettes or use custom color ie. #e3ff43
-$mat-ngGauge: (
-    primary-gaugeFaceLight: mat-color($defaultTheme-primary, 300),
-    primary-gaugeFaceDark: mat-color($defaultTheme-primary, 900),
-    accent-gaugeFaceLight: mat-color($defaultTheme-accent, 300),
-    accent-gaugeFaceDark: mat-color($defaultTheme-accent, 900),
-    warn-gaugeFaceLight: mat-color($defaultTheme-warn, 300),
-    warn-gaugeFaceDark: mat-color($defaultTheme-warn, 900),
-);
-
-// Palette for widget-wind - wind instrument Component
-// * You can pull from other mat-palettes or use custom color ie. #e3ff43
-$mat-wind: (
-    boat-background: #c7c7c7,
-    heading-background: #c5c5c5,
-    true-wind-background: #068dfb,
-    app-wind-background: #06fb06,
-    compass-dark: #757575,
-    compass-light: #afafaf,
-    wind-rose-background: #8a8a8a,
-    port: #ff0000,
-    starboard: #1fce04,
-    rudder-port: #d52626,
-    rudder-starboard: #389c19,
-);
-
-// use custom theming hack
-$defaultTheme-background: custom-theme-light-background($mat-blue, 100);
-
-// Make temp theme using default palettes
-// * to change from Light and Dark Angular Material theming mode: mat-dark-theme() or mat-light-theme()
-$defaultTheme-temp-light: mat-light-theme($defaultTheme-primary, $defaultTheme-accent, $defaultTheme-warn);
-
-// Merge our mat-theme with component specific palettes
-$defaultTheme-light: map-merge($defaultTheme-temp-light, (background: $defaultTheme-background, wind: $mat-wind, ngGauge: $mat-ngGauge));
+// Create theme palettes. We need Primary, Accent and Warn as defined by Angular Material theming
+@use '~@angular/material' as mat;
+
+// We use Mat predefined palettes
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// Generate mat-material default theme palettes. Generate now so we call pull if necessary
+// palette color later in this scss file.
+//  * The warn palette is optional (defaults to $mat-red). This is the palette that should
+//    used for error and warning.
+$defaultTheme-primary: mat.define-palette(mat.$cyan-palette);
+$defaultTheme-accent:  mat.define-palette(mat.$blue-palette, A200, A100, A400);
+$defaultTheme-warn:    mat.define-palette(mat.$red-palette);
+
+// Palette for widget-gauge-ng-linear and widget-gauge-ng-radial instruments
+// Pull from mat-palettes or use custom color ie. #e3ff43
+$mat-ngGauge: (
+    primary-gaugeFaceLight: mat.get-color-from-palette($defaultTheme-primary, 300),
+    primary-gaugeFaceDark: mat.get-color-from-palette($defaultTheme-primary, 900),
+    accent-gaugeFaceLight: mat.get-color-from-palette($defaultTheme-accent, 300),
+    accent-gaugeFaceDark: mat.get-color-from-palette($defaultTheme-accent, 900),
+    warn-gaugeFaceLight: mat.get-color-from-palette($defaultTheme-warn, 300),
+    warn-gaugeFaceDark: mat.get-color-from-palette($defaultTheme-warn, 900),
+);
+
+// Palette for widget-wind - wind instrument Component
+// * You can pull from other mat-palettes or use custom color ie. #e3ff43
+$mat-wind: (
+    boat-background: #c7c7c7,
+    heading-background: #c5c5c5,
+    true-wind-background: #068dfb,
+    app-wind-background: #06fb06,
+    compass-dark: #757575,
+    compass-light: #afafaf,
+    wind-rose-background: #8a8a8a,
+    port: #ff0000,
+    starboard: #1fce04,
+    rudder-port: #d52626,
+    rudder-starboard: #389c19,
+);
+
+// use custom theming hack
+$defaultTheme-background: custom-theme-light-background(mat.$blue-palette, 100);
+
+// Make temp theme using default palettes
+// * to change from Light and Dark Angular Material theming mode: mat-dark-theme() or mat-light-theme()
+$defaultTheme-temp-light: mat.define-light-theme($defaultTheme-primary, $defaultTheme-accent, $defaultTheme-warn);
+
+// Merge our mat-theme with component specific palettes
+$defaultTheme-light: map-merge($defaultTheme-temp-light, (background: $defaultTheme-background, wind: $mat-wind, ngGauge: $mat-ngGauge));

package/src/themes/highContrastTheme.scss

@@ -1,46 +1,47 @@
-// Create theme palettes. We need Primary, Accent and Warn as defined by Angular Material theming
-
-// We use Mat predefined palettes
-
-//////////////////////////////////////////////////////////////////////////////////////////
-// Generate mat-material default theme palettes. Generate now so we call pull if necessary
-// palette color later in this scss file.
-//  * The warn palette is optional (defaults to $mat-red). This is the palette that should
-//    used for error and warning.
-$highContrast-primary: mat-palette($mat-grey);
-$highContrast-accent:  mat-palette($mat-grey, A200, A100, A400);
-$highContrast-warn:    mat-palette($mat-red);
-
-// Palette for widget-gauge-ng-linear and widget-gauge-ng-radial instruments
-// Pull from mat-palettes or use custom color ie. #e3ff43
-$mat-ngGauge: (
-    primary-gaugeFaceLight: mat-color($highContrast-primary, 400),
-    primary-gaugeFaceDark: mat-color($highContrast-primary, 900),
-    accent-gaugeFaceLight: mat-color($highContrast-accent, 500),
-    accent-gaugeFaceDark: mat-color($highContrast-accent, 900),
-    warn-gaugeFaceLight: mat-color($highContrast-warn, 300),
-    warn-gaugeFaceDark: mat-color($highContrast-warn, 900),
-);
-
-// Palette for widget-wind - wind instrument Component
-// * You can pull from other mat-palettes or use custom color ie. #e3ff43
-$mat-wind: (
-    boat-background: #c7c7c7,
-    heading-background: #c5c5c5,
-    true-wind-background: #068dfb,
-    app-wind-background: #06fb06,
-    compass-dark: #757575,
-    compass-light: #afafaf,
-    wind-rose-background: #8a8a8a,
-    port: #ff0000,
-    starboard: #1fce04,
-    rudder-port: #d52626,
-    rudder-starboard: #389c19,
-);
-
-// Make temp theme using default palettes
-// * to change from Light and Dark Angular Material theming mode: mat-dark-theme() or mat-light-theme()
-$highContrast-temp-light: mat-light-theme($highContrast-primary, $highContrast-accent, $highContrast-warn);
-
-// Merge our mat-theme with component specific palettes
-$highContrast-light: map-merge($highContrast-temp-light, (wind: $mat-wind, ngGauge: $mat-ngGauge));
+// Create theme palettes. We need Primary, Accent and Warn as defined by Angular Material theming
+@use '~@angular/material' as mat;
+
+// We use Mat predefined palettes
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// Generate mat-material default theme palettes. Generate now so we call pull if necessary
+// palette color later in this scss file.
+//  * The warn palette is optional (defaults to $mat-red). This is the palette that should
+//    used for error and warning.
+$highContrast-primary: mat.define-palette(mat.$grey-palette);
+$highContrast-accent:  mat.define-palette(mat.$grey-palette, A200, A100, A400);
+$highContrast-warn:    mat.define-palette(mat.$red-palette);
+
+// Palette for widget-gauge-ng-linear and widget-gauge-ng-radial instruments
+// Pull from mat-palettes or use custom color ie. #e3ff43
+$mat-ngGauge: (
+    primary-gaugeFaceLight: mat.get-color-from-palette($highContrast-primary, 400),
+    primary-gaugeFaceDark: mat.get-color-from-palette($highContrast-primary, 900),
+    accent-gaugeFaceLight: mat.get-color-from-palette($highContrast-accent, 500),
+    accent-gaugeFaceDark: mat.get-color-from-palette($highContrast-accent, 900),
+    warn-gaugeFaceLight: mat.get-color-from-palette($highContrast-warn, 300),
+    warn-gaugeFaceDark: mat.get-color-from-palette($highContrast-warn, 900),
+);
+
+// Palette for widget-wind - wind instrument Component
+// * You can pull from other mat-palettes or use custom color ie. #e3ff43
+$mat-wind: (
+    boat-background: #c7c7c7,
+    heading-background: #c5c5c5,
+    true-wind-background: #068dfb,
+    app-wind-background: #06fb06,
+    compass-dark: #757575,
+    compass-light: #afafaf,
+    wind-rose-background: #8a8a8a,
+    port: #ff0000,
+    starboard: #1fce04,
+    rudder-port: #d52626,
+    rudder-starboard: #389c19,
+);
+
+// Make temp theme using default palettes
+// * to change from Light and Dark Angular Material theming mode: mat-dark-theme() or mat-light-theme()
+$highContrast-temp-light: mat.define-light-theme($highContrast-primary, $highContrast-accent, $highContrast-warn);
+
+// Merge our mat-theme with component specific palettes
+$highContrast-light: map-merge($highContrast-temp-light, (wind: $mat-wind, ngGauge: $mat-ngGauge));

package/src/themes/modernTheme.scss

@@ -1,142 +1,143 @@
-// Create theme palettes. We need Primary, Accent and Warn as defined by Angular Material theming
-$modern-primary: (
-    50 : #ecf5fb,
-    100 : #d0e7f5,
-    200 : #b1d7ef,
-    300 : #92c7e9,
-    400 : #7abbe4,
-    500 : #63afdf,
-    600 : #5ba8db,
-    700 : #519fd7,
-    800 : #4796d2,
-    900 : #3586ca,
-    A100 : #ffffff,
-    A200 : #e0f0ff,
-    A400 : #add8ff,
-    A700 : #93cbff,
-    contrast: (
-        50 : #000000,
-        100 : #000000,
-        200 : #000000,
-        300 : #000000,
-        400 : #000000,
-        500 : #000000,
-        600 : #000000,
-        700 : #000000,
-        800 : #000000,
-        900 : #ffffff,
-        A100 : #000000,
-        A200 : #000000,
-        A400 : #000000,
-        A700 : #000000,
-    )
-);
-
-$modern-accent: (
-    50 : #fdf9e6,
-    100 : #fbefc1,
-    200 : #f8e598,
-    300 : #f5da6f,
-    400 : #f2d250,
-    500 : #f0ca31,
-    600 : #eec52c,
-    700 : #ecbd25,
-    800 : #e9b71f,
-    900 : #e5ab13,
-    A100 : #ffffff,
-    A200 : #1E1E1E, // used for bar: mat-theme-dark Divider. Original value #fff6e0
-    A400 : #ffe6ad,
-    A700 : #ffdf94,
-    contrast: (
-        50 : #000000,
-        100 : #000000,
-        200 : #000000,
-        300 : #000000,
-        400 : #000000,
-        500 : #000000,
-        600 : #000000,
-        700 : #000000,
-        800 : #000000,
-        900 : #000000,
-        A100 : #000000,
-        A200 : #ffffff,
-        A400 : #000000,
-        A700 : #000000,
-    )
-);
-
-$modern-warn: (
-    50 : #fae5e5,
-    100 : #f2bebe,
-    200 : #ea9393,
-    300 : #e26767,
-    400 : #db4747,
-    500 : #d52626,
-    600 : #d02222,
-    700 : #ca1c1c,
-    800 : #c41717,
-    900 : #ba0d0d,
-    A100 : #ffe7e7,
-    A200 : #ffb4b4,
-    A400 : #ff8181,
-    A700 : #ff6868,
-    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 : #000000,
-    )
-);
-
-//////////////////////////////////////////////////////////////////////////////////////////
-// Generate mat-material default theme palettes. Generate now so we call pull if necessary
-// palette color later in this scss file.
-//  * The warn palette is optional (defaults to $mat-red). This is the palette that should
-//    used for error and warning.
-$modern-theme-primary: mat-palette($modern-primary);
-$modern-theme-accent:  mat-palette($modern-accent, A200, A100, A400);
-$modern-theme-warn:  mat-palette($modern-warn);
-
-// widget-gauge-ng-linear and widget-gauge-ng-radial instruments Component
-// * You can pull from other mat-palettes or use custom color ie. #e3ff43
-$mat-ngGauge: (
-    primary-gaugeFaceLight: #92c7e9, //mat-color($modern-theme-primary, 300),
-    primary-gaugeFaceDark: #3586ca, // mat-color($modern-theme-primary, 900),
-    accent-gaugeFaceLight: #f5da6f,  //mat-color($modern-theme-accent, 300),
-    accent-gaugeFaceDark: #e5ab13,  //mat-color($modern-theme-accent, 900),
-    warn-gaugeFaceLight: #e26767,  //mat-color($modern-theme-warn, 300),
-    warn-gaugeFaceDark: #ba0d0d,  //mat-color($modern-theme-warn, 900),
-);
-
-// Palette for widget-wind - wind instrument Component
-// * You can pull from other mat-palettes or use custom color ie. #e3ff43
-$mat-wind: (
-    boat-background: #ffffff,
-    heading-background: #1E1E1E,
-    true-wind-background: #f0ca31,
-    app-wind-background: #63afdf,
-    compass-dark: #3f3f3f,
-    compass-light: #888888,
-    wind-rose-background: #ffffff,
-    port: #d52626,
-    starboard: #389c19,
-    rudder-port: #d52626,
-    rudder-starboard: #389c19,
-);
-
-// Make temp theme using default palettes
-// * to change from Light and Dark Angular Material theming mode: mat-dark-theme() or mat-light-theme()
-$modernTheme-temp: mat-dark-theme($modern-theme-primary, $modern-theme-accent, $modern-theme-warn);
-
-// Merge our mat-theme with component specific palettes
-$modernTheme-dark: map-merge($modernTheme-temp, (wind: $mat-wind, ngGauge: $mat-ngGauge));
+// Create theme palettes. We need Primary, Accent and Warn as defined by Angular Material theming
+@use '~@angular/material' as mat;
+$modern-primary: (
+    50 : #ecf5fb,
+    100 : #d0e7f5,
+    200 : #b1d7ef,
+    300 : #92c7e9,
+    400 : #7abbe4,
+    500 : #63afdf,
+    600 : #5ba8db,
+    700 : #519fd7,
+    800 : #4796d2,
+    900 : #3586ca,
+    A100 : #ffffff,
+    A200 : #e0f0ff,
+    A400 : #add8ff,
+    A700 : #93cbff,
+    contrast: (
+        50 : #000000,
+        100 : #000000,
+        200 : #000000,
+        300 : #000000,
+        400 : #000000,
+        500 : #000000,
+        600 : #000000,
+        700 : #000000,
+        800 : #000000,
+        900 : #ffffff,
+        A100 : #000000,
+        A200 : #000000,
+        A400 : #000000,
+        A700 : #000000,
+    )
+);
+
+$modern-accent: (
+    50 : #fdf9e6,
+    100 : #fbefc1,
+    200 : #f8e598,
+    300 : #f5da6f,
+    400 : #f2d250,
+    500 : #f0ca31,
+    600 : #eec52c,
+    700 : #ecbd25,
+    800 : #e9b71f,
+    900 : #e5ab13,
+    A100 : #ffffff,
+    A200 : #1E1E1E, // used for bar: mat-theme-dark Divider. Original value #fff6e0
+    A400 : #ffe6ad,
+    A700 : #ffdf94,
+    contrast: (
+        50 : #000000,
+        100 : #000000,
+        200 : #000000,
+        300 : #000000,
+        400 : #000000,
+        500 : #000000,
+        600 : #000000,
+        700 : #000000,
+        800 : #000000,
+        900 : #000000,
+        A100 : #000000,
+        A200 : #ffffff,
+        A400 : #000000,
+        A700 : #000000,
+    )
+);
+
+$modern-warn: (
+    50 : #fae5e5,
+    100 : #f2bebe,
+    200 : #ea9393,
+    300 : #e26767,
+    400 : #db4747,
+    500 : #d52626,
+    600 : #d02222,
+    700 : #ca1c1c,
+    800 : #c41717,
+    900 : #ba0d0d,
+    A100 : #ffe7e7,
+    A200 : #ffb4b4,
+    A400 : #ff8181,
+    A700 : #ff6868,
+    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 : #000000,
+    )
+);
+
+//////////////////////////////////////////////////////////////////////////////////////////
+// Generate mat-material default theme palettes. Generate now so we call pull if necessary
+// palette color later in this scss file.
+//  * The warn palette is optional (defaults to $mat-red). This is the palette that should
+//    used for error and warning.
+$modern-theme-primary: mat.define-palette($modern-primary);
+$modern-theme-accent:  mat.define-palette($modern-accent, A200, A100, A400);
+$modern-theme-warn:  mat.define-palette($modern-warn);
+
+// widget-gauge-ng-linear and widget-gauge-ng-radial instruments Component
+// * You can pull from other mat-palettes or use custom color ie. #e3ff43
+$mat-ngGauge: (
+    primary-gaugeFaceLight: #92c7e9, //mat-color($modern-theme-primary, 300),
+    primary-gaugeFaceDark: #3586ca, // mat-color($modern-theme-primary, 900),
+    accent-gaugeFaceLight: #f5da6f,  //mat-color($modern-theme-accent, 300),
+    accent-gaugeFaceDark: #e5ab13,  //mat-color($modern-theme-accent, 900),
+    warn-gaugeFaceLight: #e26767,  //mat-color($modern-theme-warn, 300),
+    warn-gaugeFaceDark: #ba0d0d,  //mat-color($modern-theme-warn, 900),
+);
+
+// Palette for widget-wind - wind instrument Component
+// * You can pull from other mat-palettes or use custom color ie. #e3ff43
+$mat-wind: (
+    boat-background: #ffffff,
+    heading-background: #1E1E1E,
+    true-wind-background: #f0ca31,
+    app-wind-background: #63afdf,
+    compass-dark: #3f3f3f,
+    compass-light: #888888,
+    wind-rose-background: #ffffff,
+    port: #d52626,
+    starboard: #389c19,
+    rudder-port: #d52626,
+    rudder-starboard: #389c19,
+);
+
+// Make temp theme using default palettes
+// * to change from Light and Dark Angular Material theming mode: mat-dark-theme() or mat-light-theme()
+$modernTheme-temp: mat.define-dark-theme($modern-theme-primary, $modern-theme-accent, $modern-theme-warn);
+
+// Merge our mat-theme with component specific palettes
+$modernTheme-dark: map-merge($modernTheme-temp, (wind: $mat-wind, ngGauge: $mat-ngGauge));