Merge pull request #2503 from IDEMSInternational/style/professional-t…

…heme-border-colour

style: make border default gray for professional and plh_kids_kw themes

src/app/shared/components/template/components/accordion/accordion.component.scss

@@ -1,7 +1,7 @@
 // Create overlapping effect
 ion-accordion {
   background: white;
-  border: 1px solid var(--ion-color-primary);
+  border: var(--border-standard);
   border-radius: 10px;
   margin-top: -12px;
   padding-top: 8px;

src/app/shared/components/template/components/audio/audio.component.scss

@@ -4,7 +4,7 @@ $control-background: var(--audio-control-background, var(--ion-color-primary-500
 
 .container-player[data-variant~="compact"] {
   background: white;
-  border: var(--ion-border-standard);
+  border: var(--border-standard);
   box-sizing: border-box;
   box-shadow: var(--ion-default-box-shadow);
   border-radius: var(--ion-border-radius-standard);
@@ -87,7 +87,7 @@ $control-background: var(--audio-control-background, var(--ion-color-primary-500
 
 .container-player[data-variant~="large"] {
   background: var(--ion-color-primary-contrast);
-  border: var(--ion-border-standard);
+  border: var(--border-standard);
   box-sizing: border-box;
   box-shadow: var(--ion-default-box-shadow);
   border-radius: var(--ion-border-radius-standard);
@@ -134,7 +134,7 @@ $control-background: var(--audio-control-background, var(--ion-color-primary-500
       }
 
       ion-range::part(bar) {
-        border: var(--ion-border-thin-standard);
+        border: var(--border-thin-standard);
         height: var(--audio-bar-height);
       }
 
@@ -187,4 +187,4 @@ $control-background: var(--audio-control-background, var(--ion-color-primary-500
 }
 .disabled {
   pointer-events: none;
-}
+}

src/app/shared/components/template/components/combo-box/combo-box-modal/combo-box-modal.component.scss

@@ -13,7 +13,7 @@ $background-with-value: var(
   padding: 0;
   .text-box-input {
     background: var(--ion-color-primary-contrast);
-    border: var(--ion-border-standard);
+    border: var(--border-standard);
     border-radius: var(--ion-border-radius-secondary);
     width: 100%;
     min-height: 55px;
@@ -55,7 +55,7 @@ $background-with-value: var(
       min-height: 55px;
       width: 100%;
       background: var(--ion-color-primary-contrast);
-      border: var(--ion-border-standard);
+      border: var(--border-standard);
       border-radius: var(--ion-border-radius-secondary);
       box-shadow: var(--ion-default-box-shadow);
       @include mixins.flex-centered;

src/app/shared/components/template/components/combo-box/combo-box.component.scss

@@ -8,7 +8,7 @@ $background-with-value: var(
 .open-combobox {
   outline: none;
   width: 100%;
-  border: var(--ion-border-standard);
+  border: var(--border-standard);
   box-sizing: border-box;
   filter: drop-shadow(var(--ion-default-box-shadow));
   border-radius: var(--ion-border-radius-secondary);

src/app/shared/components/template/components/layout/accordion-section/accordion-section.component.scss

@@ -14,7 +14,7 @@ $background-highlight: var(
   .accordion-status {
     @include mixins.medium-square;
     border-radius: var(--ion-border-radius-rounded);
-    border: var(--ion-border-thin-standard);
+    border: var(--border-thin-standard);
     padding: var(--tiny-padding);
     background: var(--ion-color-primary-contrast);
     display: flex;
@@ -43,7 +43,7 @@ $background-highlight: var(
     border-radius: var(--ion-border-radius-standard);
     overflow: hidden;
     padding: var(--small-padding);
-    border: var(--ion-border-thin-standard);
+    border: var(--border-thin-standard);
     transition: max-height 0.4s;
     overflow-y: hidden;
     &.completed {

src/app/shared/components/template/components/layout/display-grid/display-grid.component.scss

@@ -1,4 +1,4 @@
-$border: var(--ion-border-standard);
+$border: var(--border-standard);
 $border-radius: var(--ion-border-radius-standard, 15px);
 
 .display-grid {

src/app/shared/components/template/components/number-selector/number-selector.component.scss

@@ -2,7 +2,7 @@
 .container {
   width: calc(100% - 10px);
   background: var(--ion-color-primary-contrast);
-  border: var(--ion-border-standard);
+  border: var(--border-standard);
   box-shadow: var(--ion-default-box-shadow);
   border-radius: var(--ion-border-radius-secondary);
   @include mixins.flex-space-between;
@@ -24,7 +24,7 @@
     --background: transparent;
     --box-shadow: none;
     border-radius: var(--ion-border-radius-rounded);
-    border: var(--ion-border-standard);
+    border: var(--border-standard);
     @include mixins.tiny-square;
     @include mixins.flex-centered;
     .line {

src/app/shared/components/template/components/radio-button-grid/radio-button-grid.component.scss

@@ -4,7 +4,7 @@ $background-selected: var(
   --radio-group-background-selected,
   var(--gradient-primary-light-vertical)
 );
-$border: var(--ion-border-standard);
+$border: var(--border-standard);
 $border-radius: var(--ion-border-radius-standard);
 $text-size: var(--radio-button-font-size, 1.25rem);
 $text-color: var(--radio-button-font-color, var(--ion-color-primary));

src/app/shared/components/template/components/radio-group/radio-group.component.scss

@@ -96,7 +96,7 @@ img {
         }
         .checked {
           transition: 0.3s linear;
-          border: var(--ion-border-standard);
+          border: var(--border-standard);
           box-shadow: var(--ion-default-box-shadow);
         }
       }
@@ -110,7 +110,7 @@ img {
   max-width: fit-content;
   min-width: 100%;
   box-shadow: var(--ion-default-box-shadow);
-  border: var(--ion-border-standard);
+  border: var(--border-standard);
   color: var(--ion-color-primary);
   background: var(--ion-color-primary-contrast);
 }

src/app/shared/components/template/components/slider/slider.component.scss

@@ -6,7 +6,7 @@ $ui-color: var(--slider-ui-color, var(--ion-color-primary-700));
   min-width: 100%;
   padding: var(--regular-padding) 0 var(--regular-padding) var(--regular-padding);
   background: var(--ion-color-primary-contrast);
-  border: var(--ion-border-standard);
+  border: var(--border-standard);
   box-sizing: border-box;
   box-shadow: var(--ion-default-box-shadow);
   border-radius: var(--ion-border-radius-secondary);

src/app/shared/components/template/components/text-area/text-area.component.scss

@@ -1,7 +1,7 @@
 .wrapper {
   .text_area {
     background: var(--ion-color-primary-contrast);
-    border: var(--ion-border-standard);
+    border: var(--border-standard);
     font-size: var(--text-box-font-size);
     color: var(--ion-color-primary);
     font-weight: var(--font-weight-bold);

src/app/shared/components/template/components/text-box/text-box.component.scss

@@ -1,7 +1,7 @@
 .wrapper {
   .text-box-input {
     background: var(--ion-color-primary-contrast);
-    border: var(--ion-border-standard);
+    border: var(--border-standard);
     width: 100%;
     height: var(--text-box-height);
     font-size: var(--text-box-font-size);

src/app/shared/components/template/components/tile-component/tile-component.component.scss

@@ -50,7 +50,7 @@ $background-secondary-light: var(
     // Note - CC 2021-12-21 - Currently not in use in any templates, but keeping in case we want
     // to expose as a parameter option in the future
     .circle-border {
-      border: var(--ion-border-light-thicker);
+      border: var(--border-standard);
       --border-radius: var(--ion-border-radius-rounded);
       border-radius: var(--ion-border-radius-rounded);
     }
@@ -75,7 +75,7 @@ $background-secondary-light: var(
   width: 8rem;
   min-height: 7rem;
   border-radius: var(--ion-border-radius-standard);
-  border: var(--ion-border-thin-standard);
+  border: var(--border-thin-standard);
   background: var(--ion-color-primary-contrast);
   text-align: center;
   padding: var(--tiny-padding);

src/app/shared/components/template/components/timer/timer.component.scss

@@ -62,7 +62,7 @@ $button-background: var(--timer-button-background, var(--ion-color-primary-500))
   width: 100%;
   background-color: var(--ion-color-primary-contrast);
   box-sizing: border-box;
-  border: var(--ion-border-standard);
+  border: var(--border-standard);
   box-shadow: var(--ion-default-box-shadow);
   border-radius: var(--ion-border-radius-secondary);
 

src/global.scss

@@ -160,7 +160,7 @@ $tour-next-button-background: var(
     transform: translate(-50%, -5%);
   }
   .introjs-bullets ul li a {
-    border: var(--ion-border-thin-standard);
+    border: var(--border-thin-standard);
     background: var(--ion-color-primary-contrast);
   }
   .introjs-bullets ul li a.active {
@@ -169,7 +169,7 @@ $tour-next-button-background: var(
   }
 }
 .buttonClass {
-  border: var(--ion-border-thin-standard);
+  border: var(--border-thin-standard);
   padding: 10px 15px;
   border-radius: var(--ion-border-radius-small);
   box-shadow: var(--ion-default-box-shadow);

src/theme/deployment/components/_display-group.scss

@@ -224,5 +224,5 @@ plh-tmpl-display-group .display-group-wrapper[data-param-style~="parent_point"]
 .display-group-wrapper[data-param-style~="white_box"] {
   @include essential-tool;
   background: var(--ion-color-primary-contrast);
-  border: var(--ion-border-standard);
+  border: var(--border-standard);
 }

src/theme/deployment/components/_modal.scss

@@ -1,10 +1,10 @@
 ion-modal.combo-box-modal {
   --height: auto;
   --max-height: 90vh;
-  --border-color: var(--ion-border-standard);
+  --border-color: var(--border-color-default);
   --border-radius: var(--ion-border-radius-secondary);
   --border-style: solid;
-  --border-width: 2px;
+  --border-width: var(--border-width-default);
   --background: var(--ion-color-primary-contrast);
   --max-width: 90vw;
 }

src/theme/themes/default.scss

@@ -8,10 +8,16 @@
     $color-secondary: hsl(31, 100%, 57%); // #fa9529
     $page-background: null;
 
-    /** Authoring component overrides **/
+    /** Global and component variables **/
     $variable-overrides: (
-      demo-variable: red,
       // an example variable for illustration purposes
+      demo-variable: red,
+
+      // BORDERS
+      border-color-default: var(--ion-color-primary),
+      border-width-default: 2px,
+      border-standard: var(--border-width-default) solid var(--border-color-default),
+      border-thin-standard: 1px solid var(--border-color-default),
       gradient-yellow-vertical:
         linear-gradient(175deg, var(--ion-color-yellow-200) 30%, var(--ion-color-yellow-500)),
       gradient-yellow-horizontal:

src/theme/themes/early_family_math.scss

@@ -8,8 +8,13 @@
     $color-secondary: #b53f94;
     $page-background: white;
 
-    /** Authoring component overrides **/
+    /** Global and component variables **/
     $variable-overrides: (
+      // BORDERS
+      // border-color-default: var(--ion-color-primary),
+      border-width-default: 2px,
+      // border-standard: var(--border-width-default) solid var(--border-color-default),
+      // border-thin-standard: 1px solid var(--border-color-default),
       button-background-primary: var(--ion-color-primary-500),
       button-background-secondary: var(--ion-color-secondary),
       button-background-option: var(--ion-color-primary-800),

src/theme/themes/pfr.scss

@@ -9,8 +9,13 @@
     $page-background: white;
     $green: #289b4c;
 
-    /** Authoring component overrides **/
+    /** Global and component variables **/
     $variable-overrides: (
+      // BORDERS
+      // border-color-default: var(--ion-color-primary),
+      border-width-default: 2px,
+      // border-standard: var(--border-width-default) solid var(--border-color-default),
+      // border-thin-standard: 1px solid var(--border-color-default),
       button-background-primary: var(--ion-color-primary-500),
       button-background-secondary: var(--ion-color-secondary),
       button-background-option: var(--ion-color-primary-800),

src/theme/themes/plh_facilitator_mx.scss

@@ -8,8 +8,13 @@
     $color-secondary: #ff5e00;
     $page-background: white;
 
-    /** Authoring component overrides **/
+    /** Global and component variables **/
     $variable-overrides: (
+      // BORDERS
+      // border-color-default: var(--ion-color-primary),
+      border-width-default: 2px,
+      // border-standard: var(--border-width-default) solid var(--border-color-default),
+      // border-thin-standard: 1px solid var(--border-color-default),
       button-background-primary: var(--ion-color-primary-500),
       button-background-secondary: var(--ion-color-secondary),
       button-background-option: var(--ion-color-primary-800),

src/theme/themes/plh_kids_kw/_index.scss

@@ -10,7 +10,7 @@
     $color-secondary: hsl(199 100% 41.6%); // #0092D4
     $page-background: white;
 
-    /** Authoring component overrides **/
+    /** Global and component variables **/
     $variable-overrides: (
       ion-font-family: "Nunito",
       font-weight-standard: 500,
@@ -48,6 +48,11 @@
       buttons-full-width: 100%,
       buttons-full-height: 100%,
 
+      // BORDERS
+      border-color-default: var(--ion-color-gray-200),
+      border-width-default: 1px,
+      border-standard: var(--border-width-default) solid var(--border-color-default),
+      border-thin-standard: 1px solid var(--border-color-default),
       button-background-primary: var(--ion-color-primary-500),
       button-background-secondary: var(--ion-color-secondary),
       button-background-option: var(--ion-color-primary-800),

src/theme/themes/professional.scss

@@ -8,8 +8,13 @@
     $color-secondary: hsl(31, 100%, 57%); // #fa9529
     $page-background: white;
 
-    /** Authoring component overrides **/
+    /** Global and component variables **/
     $variable-overrides: (
+      // BORDERS
+      border-color-default: var(--ion-color-gray-200),
+      border-width-default: 1px,
+      border-standard: var(--border-width-default) solid var(--border-color-default),
+      border-thin-standard: 1px solid var(--border-color-default),
       button-background-primary: var(--ion-color-primary-500),
       button-background-secondary: var(--ion-color-secondary),
       button-background-option: var(--ion-color-primary-800),
@@ -48,7 +53,7 @@
       ion-item-background: var(--ion-color-gray-light),
       task-progress-bar-color: var(--ion-color-green),
       // checkbox-background-color: white,
-      progress-path-line-background: var(--ion-color-gray-100),
+      progress-path-line-background: var(--ion-color-gray-100)
     );
     @include utils.generateTheme($color-primary, $color-secondary, $page-background);
     @each $name, $value in $variable-overrides {

src/theme/themes/utils/generate-theme.scss

@@ -127,12 +127,8 @@
   --ion-item-background: #{map.get($colorPalette, "color-primary-100")};
 
   // BORDERS
-  --ion-border-standard: 2px solid #{map.get($colorPalette, "color-primary")};
-  --ion-border-thin-standard: 1px solid #{map.get($colorPalette, "color-primary")};
-  --ion-border-color-secondary: 2px solid #{map.get($colorPalette, "color-secondary")};
-  --ion-border-light: 1px solid #{map.get($colorPalette, "light")};
-  --ion-border-light-thicker: 2px solid #{map.get($colorPalette, "light")};
-  --border-dashed: 2px dashed #{map.get($colorPalette, "color-primary")};
+  --border-standard: 2px solid #{map.get($colorPalette, "color-primary")};
+  --border-thin-standard: 1px solid #{map.get($colorPalette, "color-primary")};
 
   //  GRADIENTS
   //Gradient direction