Merge pull request #486 from zenn-dev/canary

Release 1.151

.github/workflows/publish-latest.yml

@@ -76,22 +76,6 @@ jobs:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Notifiy releases to zenn-dev/zenn
-        uses: peter-evans/repository-dispatch@v2
-        with:
-          repository: zenn-dev/zenn
-          token: ${{ secrets.PERSONAL_TOKEN }}
-          event-type: update-zenn-editor-packages # specify this on zenn workflows
-          client-payload: '{"commit_url": "https://github.com/zenn-dev/zenn-editor/commit/${{ github.sha }}"}'
-
-      - name: Notifiy releases to zenn-dev/api-markdown-html
-        uses: peter-evans/repository-dispatch@v2
-        with:
-          repository: zenn-dev/api-markdown-html
-          token: ${{ secrets.PERSONAL_TOKEN }}
-          event-type: update-zenn-editor-packages # specify this on zenn workflows
-          client-payload: '{"commit_url": "https://github.com/zenn-dev/zenn-editor/commit/${{ github.sha }}"}'
-
       - name: Checkout
         uses: actions/checkout@v2
         with:

lerna.json

@@ -2,6 +2,6 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.1.150",
+  "version": "0.1.151-alpha.1",
   "npmClient": "pnpm"
 }

packages/zenn-cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zenn-cli",
-  "version": "0.1.150",
+  "version": "0.1.151-alpha.1",
   "description": "Preview Zenn content locally.",
   "repository": {
     "type": "git",

packages/zenn-content-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zenn-content-css",
-  "version": "0.1.150",
+  "version": "0.1.151-alpha.1",
   "license": "MIT",
   "description": "Zenn flavor content style.",
   "repository": {

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,18 +172,18 @@ 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;
+  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
@@ -264,7 +264,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,26 +281,26 @@ 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;
+  border-radius: $rounded-lg;
   background: #fff;
 
   &::-webkit-details-marker {
-    color: $c-gray-darker;
+    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-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-radius: 0 0 5px 5px;
+  border: solid 1px $c-border-gray;
+  border-radius: 0 0 $rounded-lg $rounded-lg;
   background: #fff;
 
   & > * {

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 {

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;
 }

packages/zenn-content-css/src/_message.scss

@@ -4,14 +4,14 @@ aside.msg {
   align-items: flex-start;
   margin: 1.5rem 0;
   padding: 1.4em 1em;
-  border-radius: 10px;
-  background: #fff6e4;
-  color: rgba(0, 0, 0, 0.65);
+  border-radius: $rounded-xs;
+  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,20 +28,20 @@ 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 {
   flex: 1;
   margin-left: 0.6em;
   min-width: 0; // flexboxからはみ出してしまうのを防ぐ
 
-  &>* {
+  & > * {
     margin: 0.7rem 0;
 
     &:first-child {

packages/zenn-content-css/src/index.scss

@@ -1,13 +1,44 @@
-$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-lighter: $c-gray-200; // 対象の邪魔をしない、目立たないボーダー
+$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の背景色に使う
+
+/* 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;

packages/zenn-content-css/test.html

@@ -273,6 +273,7 @@ <h2 id="画像の挿入">画像の挿入</h2>
     </div>
     <p>
       <img src="https://storage.googleapis.com/zenn-user-upload/gxnwu3br83nsbqs873uibiy6fd43" title="" alt="altテキスト" />
+      <em>Captionテキスト</em>
     </p>
     <h3 id="画像の横幅を指定する">画像の横幅を指定する</h3>
     <div class="highlight">

packages/zenn-embed-elements/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zenn-embed-elements",
-  "version": "0.1.150",
+  "version": "0.1.151-alpha.1",
   "license": "MIT",
   "description": "Web components for embedded contents.",
   "repository": {

packages/zenn-markdown-html/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zenn-markdown-html",
-  "version": "0.1.150",
+  "version": "0.1.151-alpha.1",
   "license": "MIT",
   "description": "Convert markdown to zenn flavor html.",
   "main": "lib/index.js",

packages/zenn-model/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zenn-model",
-  "version": "0.1.150",
+  "version": "0.1.151-alpha.1",
   "license": "MIT",
   "description": "Model utils for Zenn contents",
   "main": "lib/index.js",