From 266037176b826a92908f633cedb71140b59d2fc7 Mon Sep 17 00:00:00 2001 From: Ryosuke Igarashi Date: Thu, 7 Dec 2023 14:03:08 +0900 Subject: [PATCH] =?UTF-8?q?=E3=81=A7=E3=81=8D=E3=82=8B=E3=81=A0=E3=81=91Ze?= =?UTF-8?q?nn=E6=9C=AC=E4=BD=93=E3=81=AE=E3=82=AB=E3=83=A9=E3=83=BC?= =?UTF-8?q?=E3=83=91=E3=83=AC=E3=83=83=E3=83=88=E3=81=AB=E8=89=B2=E3=82=92?= =?UTF-8?q?=E5=AF=84=E3=81=9B=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/zenn-content-css/src/_content.scss | 33 +++++++-------- packages/zenn-content-css/src/_embed.scss | 6 +-- packages/zenn-content-css/src/_footnotes.scss | 9 ++-- packages/zenn-content-css/src/_message.scss | 12 +++--- packages/zenn-content-css/src/index.scss | 41 ++++++++++++++----- packages/zenn-content-css/test.html | 1 + 6 files changed, 62 insertions(+), 40 deletions(-) diff --git a/packages/zenn-content-css/src/_content.scss b/packages/zenn-content-css/src/_content.scss index 26b050f3..7e95c008 100644 --- a/packages/zenn-content-css/src/_content.scss +++ b/packages/zenn-content-css/src/_content.scss @@ -7,7 +7,7 @@ strong { font-weight: 700; } a { - color: #0f83fd; + color: $c-text-link-primary; &:hover { text-decoration: underline; @@ -38,7 +38,7 @@ ul { list-style: disc; &::marker { font-size: 1.1em; - color: rgb(94, 100, 120); + color: $c-gray-800; } } } @@ -48,7 +48,7 @@ ol { list-style: decimal; padding-left: 0.2em; &::marker { - color: rgb(83, 88, 114); + color: $c-gray-800; font-weight: 600; letter-spacing: -0.05em; } @@ -92,13 +92,13 @@ h1 { padding-bottom: 0.2em; margin-bottom: 1.1rem; font-size: 1.7em; - border-bottom: solid 1px $c-gray-border-lighter; + border-bottom: solid 1px $c-border-gray; } h2 { padding-bottom: 0.3em; margin-bottom: 1.1rem; font-size: 1.5em; - border-bottom: solid 1px $c-gray-border-lighter; + border-bottom: solid 1px $c-border-gray; } h3 { font-size: 1.3em; @@ -135,15 +135,15 @@ h6 { } hr { - border-top: 2px solid $c-gray-border-lighter; + border-top: 2px solid $c-border-gray; margin: 2.5rem 0; } blockquote { font-size: 0.97em; margin: 1.4rem 0; - border-left: solid 3px #9dacb7; + border-left: solid 3px $c-gray-700; padding: 2px 0 2px 0.7em; /* 上下にpaddingをわずかでも設定しておくと、固定ヘッダー対策で見出しにネガティブマージンが指定されたときにも崩れない。ref: https://github.com/zenn-dev/zenn-roadmap/issues/191 */ - color: #505c64; + color: $c-text-gray-darker; p { margin: 1rem 0; } @@ -172,16 +172,16 @@ table { th, td { padding: 0.5rem; - border: solid 1px $c-gray-border; + border: solid 1px $c-border-gray; background: #fff; } th { font-weight: 700; - background: $c-primary-bg; + background: $c-bg-gray; } code { padding: 0.2em 0.4em; - background: rgba(33, 90, 160, 0.07); + background: rgba(33, 90, 160, 0.07); // $c-contrast と同じ色 font-size: 0.85em; border-radius: 4px; vertical-align: 0.08em; @@ -253,6 +253,7 @@ img:not(.emoji) { display: table; max-width: 100%; height: auto; + border: 1px solid $c-gray-200; } img + br { display: none; @@ -264,7 +265,7 @@ img ~ em { margin: -1rem auto 0; line-height: 1.3; text-align: center; - color: $c-gray-darker; + color: $c-text-gray-darker; font-size: 0.92em; } // リンクの中に画像がある場合、リンクの範囲を画像の大きさと合わせる @@ -281,25 +282,25 @@ summary { cursor: pointer; outline: 0; padding: 0.7em 0.7em 0.7em 0.9em; - border: solid 1px rgba(92, 147, 187, 0.19); + border: solid 1px $c-border-gray; color: var(--c-contrast); font-size: 0.9em; border-radius: 9px; background: #fff; &::-webkit-details-marker { - color: $c-gray-darker; + color: $c-text-gray-darker; } } details[open] summary { border-radius: 5px 5px 0 0; box-shadow: none; - background: $c-primary-bg-lighter; + background: $c-bg-gray-lighter; border-bottom: none; } .details-content { padding: 0.5em 0.9em; - border: solid 1px rgba(92, 147, 187, 0.2); + border: solid 1px $c-border-gray; border-radius: 0 0 5px 5px; background: #fff; diff --git a/packages/zenn-content-css/src/_embed.scss b/packages/zenn-content-css/src/_embed.scss index c00f715a..0e13ca96 100644 --- a/packages/zenn-content-css/src/_embed.scss +++ b/packages/zenn-content-css/src/_embed.scss @@ -26,15 +26,15 @@ span.embed-block { } } .embed-slideshare iframe { - border: 1px solid $c-contrast; + border: 1px solid $c-border-gray; } .embed-jsfiddle iframe { - border: 1px solid $c-contrast; + border: 1px solid $c-border-gray; } .embed-figma { - border: solid 1px $c-gray-border; + border: 1px solid $c-border-gray; } .zenn-embedded { diff --git a/packages/zenn-content-css/src/_footnotes.scss b/packages/zenn-content-css/src/_footnotes.scss index 734c6b97..321e27e8 100644 --- a/packages/zenn-content-css/src/_footnotes.scss +++ b/packages/zenn-content-css/src/_footnotes.scss @@ -1,14 +1,14 @@ .footnotes { margin-top: 3rem; - color: $c-gray-darker; + color: $c-text-gray-darker; font-size: 0.9em; li::marker { - color: $c-gray-darker; + color: $c-text-gray-darker; } } .footnotes-title { padding-bottom: 3px; - border-bottom: solid 1px $c-gray-border; + border-bottom: solid 1px $c-border-gray-darker; font-weight: 700; font-size: 15px; } @@ -17,6 +17,5 @@ } // フォーカスされている脚注の背景色を変える .footnote-item:target { - background: #e3eeff; - color: $c-contrast; + background: $c-bg-gray-lighter; } diff --git a/packages/zenn-content-css/src/_message.scss b/packages/zenn-content-css/src/_message.scss index 0935d173..b315b293 100644 --- a/packages/zenn-content-css/src/_message.scss +++ b/packages/zenn-content-css/src/_message.scss @@ -5,13 +5,13 @@ aside.msg { margin: 1.5rem 0; padding: 1.4em 1em; border-radius: 10px; - background: #fff6e4; - color: rgba(0, 0, 0, 0.65); + background: $c-bg-warning; + color: rgba(0, 0, 0, 0.7); font-size: 0.94em; line-height: 1.6; &.alert { - background: #ffeff2; + background: $c-bg-alert; } a { @@ -28,12 +28,12 @@ aside.msg { width: 1.4rem; height: 1.4rem; border-radius: 99rem; - background-color: #ffb84c; + background-color: $c-bg-warning-darker; color: #ffffff; } aside.msg.alert .msg-symbol { - background-color: #ff7670; + background-color: $c-bg-alert-darker; } .msg-content { @@ -41,7 +41,7 @@ aside.msg.alert .msg-symbol { margin-left: 0.6em; min-width: 0; // flexboxからはみ出してしまうのを防ぐ - &>* { + & > * { margin: 0.7rem 0; &:first-child { diff --git a/packages/zenn-content-css/src/index.scss b/packages/zenn-content-css/src/index.scss index ebca1d52..c9d45a96 100644 --- a/packages/zenn-content-css/src/index.scss +++ b/packages/zenn-content-css/src/index.scss @@ -1,13 +1,34 @@ -$c-primary: #3ea8ff; -$c-primary-bg: #edf2f7; -$c-primary-bg-darker: #c6d5e2; -$c-primary-bg-lighter: #f1f5f9; -$c-gray: #93a5b1; -$c-gray-lighter: #b9c7d2; -$c-gray-darker: #77838c; -$c-gray-border: #cfdce6; -$c-gray-border-lighter: rgba(92, 147, 187, 0.17); -$c-contrast: #1a2638; +/* Zenn本体のカラーパレット */ +$c-blue-100: #f0f7ff; +$c-blue-200: #ecf5ff; +$c-blue-300: #e0efff; +$c-blue-400: #bfdcff; +$c-blue-500: #3ea8ff; +$c-blue-600: #0f83fd; +$c-blue-700: #0868ce; +$c-gray-100: #f5f9fc; +$c-gray-200: #f1f5f9; +$c-gray-300: #edf2f7; +$c-gray-400: #e4edf4; +$c-gray-500: #d6e3ed; +$c-gray-600: #acbcc7; +$c-gray-700: #8f9faa; +$c-gray-800: #65717b; + +/* 目的別カラー変数 */ +$c-bg-gray: $c-gray-300; +$c-bg-gray-lighter: $c-gray-200; +$c-bg-warning: #fff6e4; +$c-bg-warning-darker: #ffb84c; +$c-bg-alert: #ffeff2; +$c-bg-alert-darker: #ff7670; + +$c-border-gray: $c-gray-500; +$c-border-gray-darker: $c-gray-800; + +$c-text-gray-darker: $c-gray-800; +$c-text-link-primary: $c-blue-600; +$c-contrast: #1a2638; // 主にCodeBlockの背景色に使う $xs: 374px; $sm: 576px; diff --git a/packages/zenn-content-css/test.html b/packages/zenn-content-css/test.html index b7f3da39..e5ff2c8f 100644 --- a/packages/zenn-content-css/test.html +++ b/packages/zenn-content-css/test.html @@ -273,6 +273,7 @@

画像の挿入

altテキスト + Captionテキスト

画像の横幅を指定する