add: 角丸の定義を追加し、反映した

zenn-dev · Jan 9, 2024 · 2542a0d · 2542a0d
1 parent c5d0ff8
commit 2542a0d
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/packages/zenn-content-css/src/_content.scss b/packages/zenn-content-css/src/_content.scss
@@ -183,7 +183,7 @@ code {
   padding: 0.2em 0.4em;
   background: rgba(33, 90, 160, 0.07); // $c-contrast と同じ色
   font-size: 0.85em;
-  border-radius: 4px;
+  border-radius: $rounded-xs;
   vertical-align: 0.08em;
 }
 code,
@@ -197,7 +197,7 @@ pre {
   background: $c-contrast;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
-  border-radius: 0.7em;
+  border-radius: $rounded-xs;
   word-break: normal; // iOSで折り返されるのを防ぐ
   word-wrap: normal; // iOSで折り返されるのを防ぐ
   /* flex + codeの隣に疑似要素を配置することで横スクロール時の右端の余白を作る */
@@ -238,7 +238,7 @@ pre {
   color: rgba(255, 255, 255, 0.9);
   font-size: 12px;
   line-height: 1.3;
-  border-radius: 6px 6px 0 0;
+  border-radius: $rounded-xs $rounded-xs 0 0;
   // コードブロックのファイル名が右端まで達したときに見た目が微妙になるのを防ぐために
   // 下側のスペースを大きめに取りネガティブマージンで表示を調整（広めに取ったpaddingぶんだけmarginを下げる）
   // ref: https://github.com/zenn-dev/zenn-editor/issues/236
@@ -284,23 +284,23 @@ summary {
   border: solid 1px $c-border-gray;
   color: var(--c-contrast);
   font-size: 0.9em;
-  border-radius: 9px;
+  border-radius: $rounded-lg;
   background: #fff;
 
   &::-webkit-details-marker {
     color: $c-text-gray-darker;
   }
 }
 details[open] summary {
-  border-radius: 5px 5px 0 0;
+  border-radius: $rounded-lg $rounded-lg 0 0;
   box-shadow: none;
   background: $c-bg-gray-lighter;
   border-bottom: none;
 }
 .details-content {
   padding: 0.5em 0.9em;
   border: solid 1px $c-border-gray;
-  border-radius: 0 0 5px 5px;
+  border-radius: 0 0 $rounded-lg $rounded-lg;
   background: #fff;
 
   & > * {

diff --git a/packages/zenn-content-css/src/_message.scss b/packages/zenn-content-css/src/_message.scss
@@ -4,7 +4,7 @@ aside.msg {
   align-items: flex-start;
   margin: 1.5rem 0;
   padding: 1.4em 1em;
-  border-radius: 10px;
+  border-radius: $rounded-xs;
   background: $c-bg-warning;
   color: rgba(0, 0, 0, 0.7);
   font-size: 0.94em;

diff --git a/packages/zenn-content-css/src/index.scss b/packages/zenn-content-css/src/index.scss
@@ -31,6 +31,15 @@ $c-text-gray-darker: $c-gray-800;
 $c-text-link-primary: $c-blue-600;
 $c-contrast: #1a2638; // 主にCodeBlockの背景色に使う
 
+/* border-radius */
+$rounded-xs: 4px;
+$rounded-sm: 7px;
+$rounded-md: 10px;
+$rounded-lg: 14px;
+$rounded-xl: 20px;
+$rounded-full: 99rem;
+$rounded-publication: 25%;
+
 $xs: 374px;
 $sm: 576px;
 $md: 768px;