Refactoring

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

@@ -1,4 +1,5 @@
 @use '@growi/core-styles/scss/bootstrap/init' as bs;
+@use '@growi/core-styles/scss/helpers/modifier-keys';
 
 .shortcuts-modal :global {
 
@@ -11,4 +12,6 @@
     border: var(--bs-border-width) solid var(--bs-border-color);
     border-radius: var(--bs-border-radius-sm);
   }
+
+  @include modifier-keys.modifier-key;
 }

apps/app/src/client/components/SystemVersion.module.scss

@@ -1,6 +1,10 @@
-.system-version {
+@use '@growi/core-styles/scss/helpers/modifier-keys';
+
+.system-version :global {
   position: fixed;
   right: 0.5em;
   bottom: 0;
   opacity: 0.6;
+
+  @include modifier-keys.modifier-key;
 }

apps/app/src/styles/style-app.scss

@@ -1,6 +1,5 @@
 @import '@growi/core-styles/scss/helpers/flex-expand';
 @import '@growi/core-styles/scss/helpers/rotate';
-@import '@growi/core-styles/scss/helpers/modifier-keys';
 @import 'mixins';
 
 // atoms

packages/core-styles/scss/helpers/_modifier-keys.scss

@@ -1,23 +1,25 @@
-.cmd-key.mac {
-  &::after {
-    content: '⌘';
+@mixin modifier-key {
+  .cmd-key.mac {
+    &::after {
+      content: '⌘';
+    }
   }
-}
 
-.alt-key.mac {
-  &::after {
-    content: '⌥';
+  .cmd-key.win {
+    &::after {
+      content: 'Ctrl';
+    }
   }
-}
 
-.cmd-key.win {
-  &::after {
-    content: 'Ctrl';
+  .alt-key.mac {
+    &::after {
+      content: '⌥';
+    }
   }
-}
 
-.alt-key.win {
-  &::after {
-    content: 'Alt';
+  .alt-key.win {
+    &::after {
+      content: 'Alt';
+    }
   }
 }