Merge pull request #6704 from weseek/imprv/apply-style-to-code-element

imprv: Add style for code element

packages/app/src/components/ReactMarkdownComponents/CodeBlock.module.scss

@@ -1,11 +1,9 @@
 @use '~/styles/variables' as var;
 @use '~/styles/bootstrap/init' as bs;
+@use '~/styles/atoms/mixins' as atm;
 
 .code-inline {
-  padding: 2px 4px;
-  font-family: var.$font-family-monospace-not-strictly;
-  border: 1px solid;
-  border-radius: bs.$border-radius;
+  @include atm.code-inline;
 }
 
 .code-highlighted-title {

packages/app/src/styles/atoms/_code.scss

@@ -0,0 +1,12 @@
+@use '~/styles/variables' as var;
+@use '~/styles/bootstrap/init' as bs;
+@use '~/styles/atoms/mixins' as atm;
+
+/*
+ * style of inline-code
+ */
+:not(pre) {
+  > code {
+    @include atm.code-inline;
+  }
+}

packages/app/src/styles/atoms/_mixins.scss

@@ -0,0 +1,15 @@
+@use '~/styles/variables' as var;
+@use '~/styles/bootstrap/init' as bs;
+
+@mixin code-inline {
+  padding: 2px 4px;
+  font-family: var.$font-family-monospace-not-strictly;
+  border: 1px solid;
+  border-radius: bs.$border-radius;
+}
+
+@mixin code-inline-color($color-inline-code,$bgcolor-inline-code, $bordercolor-inline-code) {
+  color: $color-inline-code;
+  background-color: $bgcolor-inline-code;
+  border-color: $bordercolor-inline-code;
+}

packages/app/src/styles/style-next.scss

@@ -29,6 +29,7 @@
 @import 'atoms/buttons';
 @import 'atoms/spinners';
 @import 'atoms/custom_control';
+@import 'atoms/code';
 
 // molecules
 @import 'molecules/toastr';

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

@@ -2,7 +2,7 @@
 @use '../bootstrap/init' as *;
 @use '../mixins';
 @use './mixins/tables'; // comment out and use _reboot-bootstrap-tables instead -- 2020.05.28 Yuki Takei
-
+@use '../atoms/mixins' as atm;
 //
 //== Apply to Bootstrap
 //
@@ -49,10 +49,14 @@ $theme-colors: map-merge($theme-colors, ( primary: $primary ));
 // determine variables with　bootstrap function (These variables can be used after importing bootstrap above)
 $color-modal-header: color-yiq($primary) !default;
 
+:not(pre) {
+  > code {
+    @include atm.code-inline-color($color-inline-code, $bgcolor-inline-code, $bordercolor-inline-code);
+  }
+}
+
 .code-inline {
-  color: $color-inline-code;
-  background-color: $bgcolor-inline-code;
-  border-color: $bordercolor-inline-code;
+  @include atm.code-inline-color($color-inline-code, $bgcolor-inline-code, $bordercolor-inline-code);
 }
 
 .code-highlighted {