add hsl-alpha

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

@@ -186,7 +186,7 @@ ul.pagination {
 
   // for https://youtrack.weseek.co.jp/issue/GW-2603
   .search-typeahead {
-    background-color: hsla(var(--bgcolor-global-hs),var(--bgcolor-global-l),10%);
+    background-color: #{hsl.alpha(var(--bgcolor-global),10%)};
   }
 }
 
@@ -330,7 +330,7 @@ ul.pagination {
       color: var(--color-modal-header);
     }
     .close {
-      color: hsla(var(--primary-hs),var(--primary-l),50%);
+      color: #{hsl.alpha(var(--primary),50%)};
 
       &:hover {
         opacity: 0.9;
@@ -351,7 +351,7 @@ ul.pagination {
   .nav-item {
     &:hover,
     &:focus {
-      background-color: hsla(var(--color-link-hs),var(--color-link-l),10%);
+      background-color: #{hsl.alpha(var(--color-link),10%)};
     }
     .nav-link {
       -webkit-appearance: none;

packages/app/src/styles/theme/_hsl-functions.scss

@@ -54,3 +54,11 @@
   $color-l: var(#{$color+'-l'});
   @return hsl($color-hs, calc($color-l - $degrees));
 }
+@function alpha($color, $degrees) {
+  $color: bs.str-replace($color, 'var(');
+  $color: bs.str-replace($color, ')');
+  $color-hs: var(#{$color+'-hs'});
+  $color-l: var(#{$color+'-l'});
+  @return hsla($color-hs,$color-l,$degrees);
+}
+

packages/app/src/styles/theme/_override-functions.scss

@@ -17,5 +17,5 @@
 }
 
 @function rgba($color, $degrees) {
-  @return $color;
+  @return hsl.alpha($color, $degrees);
 }

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

@@ -31,7 +31,7 @@
   --bgcolor-global-l: 100%;
   --bgcolor-inline-code: #{$gray-100}; //optional
   --bgcolor-card: #{$gray-50};
-  --bgcolor-blinked-section: hsla(var(--primary-hs),var(--primary-l),90%);
+  --bgcolor-blinked-section: #{hsl.alpha(var(--primary),90%)};
   --bgcolor-keyword-highlighted: #{$grw-marker-yellow};
 
   // Font colors
@@ -140,18 +140,20 @@
 //== Dark Mode
 //
 :root[data-theme='dark'] {
-  --primary: #115cd3;
+  --primary: hsl(var(--primary-hs),var(--primary-l));
   --primary-hs: 216.8,85.1%;
   --prymary-l: 44.7;
-  $accent: #db00c2;
+  --accent: hsl(var(--accent-hs),var(--accent-l));
+  --accent-hs: 307,100%;
+  --accent-l: 43%;
 
   // Background colors
-  --bgcolor-global: #131418;
-  --bgcolor-global-hs: 228,11.6%;
-  --bgcolor-global-l: 9.4%;
+  --bgcolor-global: hsl(var(--bgcolor-global-hs),var(--bgcolor-global-l));
+  --bgcolor-global-hs: 228,12%;
+  --bgcolor-global-l: 8%;
   --bgcolor-inline-code: #1f1f22; //optional
   --bgcolor-card: #{hsl.darken(var(--bgcolor-global),5%)};
-  $bgcolor-blinked-section: rgba($primary, 0.4);
+  --bgcolor-blinked-section: #{hsl.alpha(var(--primary), 60%)};
   --bgcolor-keyword-highlighted: #{darken($grw-marker-red, 30%)};
 
   // Font colors

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

@@ -54,3 +54,10 @@
   $color-l: var(#{$color+'-l'});
   @return hsl($color-hs, calc($color-l - $degrees));
 }
+@function alpha($color, $degrees) {
+  $color: bs.str-replace($color, 'var(');
+  $color: bs.str-replace($color, ')');
+  $color-hs: var(#{$color+'-hs'});
+  $color-l: var(#{$color+'-l'});
+  @return hsla($color-hs,$color-l,$degrees);
+}

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

@@ -17,5 +17,5 @@
 }
 
 @function rgba($color, $degrees) {
-  @return $color;
+  @return hsl.alpha($color, $degrees);
 }