fix rules

.stylelintrc.json

@@ -10,6 +10,7 @@
       "except": ["after-single-line-comment", "first-nested"],
       "ignore": ["after-comment", "inside-block"]
     } ],
+    "color-function-notation": "legacy",
     "selector-pseudo-class-no-unknown": [
       true,
       {

apps/app/src/components/ShortcutsModal.module.scss

@@ -38,7 +38,7 @@
     text-transform: uppercase;
     background: white;
     border-radius: 4px;
-    box-shadow: 0 1px 3px 1px rgb(0 0 0 / 50%);
+    box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 50%);
 
     /* SVG Properties */
     polygon {

apps/app/src/components/Skeleton.module.scss

@@ -1,5 +1,5 @@
 .grw-skeleton {
-  --bs-list-group-color: rgb(var(--bs-tertiary-color-rgb) 0.2);
+  --bs-list-group-color: rgba(var(--bs-tertiary-color-rgb), 0.2);
 
   background-color: var(--bs-list-group-color);
 }

packages/core-styles/scss/bootstrap/_variables-dark.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 $success-text-emphasis-dark: color.mix(#fff, $success, 20%) !default;
 $info-text-emphasis-dark: color.mix(#fff, $info, 20%) !default;
 $warning-text-emphasis-dark: color.mix(#fff, $warning, 20%) !default;

packages/core-styles/scss/bootstrap/_variables.scss

@@ -1,5 +1,7 @@
 /* stylelint-disable scss/comment-no-empty */
 
+@use 'sass:color';
+
 // Variables
 //
 // Variables should follow the `$component-state-property-size` formula for
@@ -29,7 +31,7 @@ $danger-border-subtle: color.mix(#fff, $danger, 70%) !default;
 // Quickly modify global styling by enabling or disabling optional features.
 
 $enable-shadows: true;
-$box-shadow-inset: inset 0 0 rgb(black 0); // set invisible value for inset
+$box-shadow-inset: inset 0 0 rgba(black, 0); // set invisible value for inset
 
 
 // Buttons

packages/core-styles/scss/bootstrap/mixins/_button-outline-neutral-variant.scss

@@ -1,3 +1,6 @@
+@use 'sass:color';
+@use '../init' as *;
+
 @mixin button-outline-neutral-variant-light(
   $color,
   $background: color.mix(#fff, $color, 100%),

packages/core-styles/scss/bootstrap/mixins/_button-outline-variant.scss

@@ -1,3 +1,6 @@
+@use 'sass:color';
+@use '../init' as *;
+
 @mixin button-outline-variant-light(
   $color,
   $background: color.mix(#fff, $color, 90%),

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

@@ -1,3 +1,5 @@
+/* stylelint-disable color-function-notation */
+
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
 @use './variables' as var;
 @use './theme/mixins/page-editor-mode-manager';

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

@@ -18,7 +18,7 @@
   $body-tertiary-color: rgba($body-color, .5);
   $body-tertiary-bg: $gray-100;
   $border-color: var(--grw-highlight-200);
-  $link-color: rgb(25 56 186 / 100%);
+  $link-color: rgba(25, 56, 186, 100%);
 
   @import 'bootstrap/scss/variables';
   @import 'bootstrap/scss/variables-dark';
@@ -53,5 +53,5 @@
   @import '@growi/core-styles/scss/bootstrap/init-stage-2';
   @import '@growi/core-styles/scss/bootstrap/theming/apply-dark';
 
-  --grw-sidebar-nav-btn-color: rgb(var(--grw-highlight-400-rgb) 0.8);
+  --grw-sidebar-nav-btn-color: rgba(var(--grw-highlight-400-rgb), 0.8);
 }

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

@@ -57,5 +57,5 @@
 
   --grw-wiki-link-color-rgb: var(--grw-highlight-600-rgb);
   --grw-wiki-link-hover-color-rgb: var(--grw-highlight-400-rgb);
-  --grw-sidebar-nav-btn-color: rgb(var(--grw-highlight-400-rgb) 0.8);
+  --grw-sidebar-nav-btn-color: rgba(var(--grw-highlight-400-rgb), 0.8);
 }