fix default.scss hsl.ligthen darken

packages/app/src/styles/theme/_apply-colors.scss

@@ -4,6 +4,7 @@
 @use '../atoms/mixins/code';
 @use './mixins/tables'; // comment out and use _reboot-bootstrap-tables instead -- 2020.05.28 Yuki Takei
 @use './mixins/hsl-button';
+@use './hsl-functions' as hsl;
 
 //
 //== Apply to Bootstrap

packages/preset-themes/src/styles/default.scss

@@ -1,6 +1,7 @@
 @use './variables' as *;
 @use './bootstrap/variables' as *;
 @use './theme/mixins/page-editor-mode-manager';
+@use './theme/hsl-functions' as hsl;
 
 // == Define Bootstrap theme colors
 //
@@ -20,7 +21,7 @@
   --primary: hsl(var(--primary-hs),var(--primary-l));
   --primary-hs: 216.7,65%;
   --primary-l: 20.2%;
-  --accent: #209fd8;
+  --accent: hsl(var(--accent-hs),var(--accent-l));
   --accent-hs: 216.7,65%;
   --accent-l: 20.2%;
   $accent: #209fd8;
@@ -44,11 +45,11 @@
   --color-link: hsl(var(--color-link-hs),var(--color-link-l));
   --color-link-hs: 228.4,76.3%;
   --color-link-l: 41.4%;
-  --color-link-hover: hsl(var(--color-link-hs),calc(var(--color-link-l) + 20%));
+  --color-link-hover: #{hsl.lighten(var(--color-link),20%)};
   --color-link-wiki: var(--color-link);
   --color-link-wiki-hs: var(--color-link-hs);
   --color-link-wiki-l: var(--color-link-l);
-  --color-link-wiki-hover: hsl(var(--color-link-wiki-hs),calc(var(--color-link-wiki-l) + 20%));
+  --color-link-wiki-hover: #{hsl.lighten(var(--color-link-wiki),20%)};
   --color-link-nabvar: #{$gray-500};
   $color-inline-code: darken($red, 15%); // optional
 
@@ -56,7 +57,7 @@
   --color-list: var(--color-global); // optional
   --bgcolor-list: var(--bgcolor-global); // optional
   // --color-list-hover: va(--color-global); // optional
-  --bgcolor-list-hover: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) + 3%));// optional
+  --bgcolor-list-hover: #{hsl.lighten(var(--bgcolor-global),3%)};// optional
   // --color-list-active:white ; // optional
   // $bgcolor-list-active: $primary; // optional
 
@@ -97,7 +98,7 @@
   --bgcolor-sidebar-list-group: #{$gray-50}; // optional
 
   // Subnavigation
-  --bgcolor-subnav: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) - 3%));
+  --bgcolor-subnav: #{hsl.darken(var(--bgcolor-global),3%)};
   // Tabs
   // $color-nav-tabs-link-active: #; //optional
   // $bordercolor-nav-tabs-hover: # # $bordercolor-nav-tabs; // optional
@@ -127,7 +128,7 @@
   // Button
   .btn-group.grw-page-editor-mode-manager {
     .btn.btn-outline-primary {
-      @include page-editor-mode-manager.btn-page-editor-mode-manager(var(--primary),hsl(var(--primary-hs),calc(var(--primary-l) + 65%)), hsl(var(--primary-hs),calc(var(--primary-l) + 70%)));
+      @include page-editor-mode-manager.btn-page-editor-mode-manager (var(--primary),#{hsl.lighten(var(--primary),65%)}, #{hsl.lighten(var(--primary),70%)});
     }
   }
 }
@@ -145,7 +146,7 @@
   --bgcolor-global-hs: 228,11.6%;
   --bgcolor-global-l: 9.4%;
   $bgcolor-inline-code: #1f1f22; //optional
-  --bgcolor-card: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) - 5%));
+  --bgcolor-card: #{hsl.darken(var(--bgcolor-global),5%)};
   $bgcolor-blinked-section: rgba($primary, 0.4);
   $bgcolor-keyword-highlighted: darken($grw-marker-red, 30%);
 
@@ -158,11 +159,11 @@
   --color-link: #7b9ad5;
   --color-link-hs: 219.3,51.7%;
   --color-link-l: 65.9%;
-  --color-link-hover: hsl(var(--color-link-hs), calc(var(--color-link-l) + 10%));
+  --color-link-hover: #{hsl.lighten(var(--color-link),10%)};
   --color-link-wiki: var(--color-link);
   --color-link-wiki-hs: var(--color-link-hs);
   --color-link-wiki-l: var(--color-link-l);
-  --color-link-wiki-hover: hsl(var(--color-link-wiki-hs), calc(var(--color-link-wiki-l) + 10%));
+  --color-link-wiki-hover: #{hsl.lighten(var(--color-link-wiki),10%)};
   --color-link-nabvar: #a7a7a7;
   --color-inline-code: #c7254e; // optional
 
@@ -170,7 +171,7 @@
   --color-list: var(--color-global); // optional
   --bgcolor-list: var(--bgcolor-global); // optional
   // --color-list-hover: va(--color-global); // optional
-  --bgcolor-list-hover: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) + 3%)); // optional
+  --bgcolor-list-hover: #{hsl.lighten(var(--bgcolor-global),3%)}; // optional
   // --color-list-active:white ; // optional
   // $bgcolor-list-active: $primary; // optional
 
@@ -210,7 +211,7 @@
   --bgcolor-sidebar-list-group: #1c2a3e; // optional
 
   // Subnavigation
-  --bgcolor-subnav: --bgcolor-list-hover: hsl(var(--bgcolor-global-hs),calc(var(--bgcolor-global-l) + 3%));  // optional
+  --bgcolor-subnav: --bgcolor-list-hover: #{hsl.lighten(var(--bgcolor-global),3%)};  // optional
 
   // Tabs
   $bordercolor-nav-tabs: $gray-700; // optional

packages/preset-themes/src/styles/theme/_apply-colors.scss

@@ -3,6 +3,7 @@
 @use '../mixins';
 @use './mixins/tables'; // comment out and use _reboot-bootstrap-tables instead -- 2020.05.28 Yuki Takei
 @use '../atoms/mixins/code';
+@use './hsl-functions' as hsl;
 
 //
 //== Apply to Bootstrap

packages/preset-themes/src/styles/theme/_hsl-functions.scss

@@ -0,0 +1,56 @@
+@use 'bootstrap/scss/functions' as bs;
+
+// @function getHS($color-hsl) {
+//   // remove "var(" and ")"
+//   $color: str-replace($color-hsl, 'var(');
+//   $color: str-replace($color, ')');
+//   @return var(#{$color+'-hs'});
+// }
+// @function getL($color-hsl) {
+//   // remove "var(" and ")"
+//   // $color: str-replace(str-replace($color-hsl, 'var('), ')');
+//   $color: str-replace($color-hsl, 'var(');
+//   $color: str-replace($color, ')');
+//   @return var(#{$color+'-l'});
+// }
+
+// @function contrast($color-hsl) {
+//   $color-hs: getHS($color-hsl);
+//   $color-l: getL($color-hsl);
+//   @return hsl($color-hs, clamp(10%, calc((100% - $color-l - 51% ) * 1000), 95%));
+// }
+
+// @function lighten($color-hsl, $degrees) {
+//   $color-hs: getHS($color-hsl);
+//   $color-l: getL($color-hsl);
+//   @return hsl($color-hs, calc($color-l + $degrees));
+// }
+// @function darken($color-hsl, $degrees) {
+//   $color-hs: getHS($color-hsl);
+//   $color-l: getL($color-hsl);
+//   @return hsl($color-hs, calc($color-l - $degrees));
+// }
+
+@function contrast($color, $darken-degrees: 0%) {
+  $color: bs.str-replace($color, 'var(');
+  $color: bs.str-replace($color, ')');
+  $color-hs: var(#{$color+'-hs'});
+  $color-l: var(#{$color+'-l'});
+  // @return hsl($color-hs, clamp(10%, calc((100% - $color-l - 51% ) * 1000), 95%));
+  @return hsl($color-hs, clamp(10%, calc((100% - $color-l - $darken-degrees - 51% ) * 1000), 95%));
+}
+
+@function lighten($color, $degrees) {
+  $color: bs.str-replace($color, 'var(');
+  $color: bs.str-replace($color, ')');
+  $color-hs: var(#{$color+'-hs'});
+  $color-l: var(#{$color+'-l'});
+  @return hsl($color-hs, calc($color-l + $degrees));
+}
+@function darken($color, $degrees) {
+  $color: bs.str-replace($color, 'var(');
+  $color: bs.str-replace($color, ')');
+  $color-hs: var(#{$color+'-hs'});
+  $color-l: var(#{$color+'-l'});
+  @return hsl($color-hs, calc($color-l - $degrees));
+}

packages/preset-themes/src/styles/theme/_override-functions.scss

@@ -0,0 +1,21 @@
+@use './hsl-functions' as hsl;
+
+@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
+  @return hsl.contrast($color);
+}
+
+@function lighten($color, $degrees) {
+  @return hsl.lighten($color, $degrees);
+}
+
+@function darken($color, $degrees) {
+  @return hsl.darken($color, $degrees);
+}
+
+@function mix($color1, $color2, $degrees) {
+  @return $color1;
+}
+
+@function rgba($color, $degrees) {
+  @return $color;
+}