merge v2 into main

.github/workflows/ci.yml

@@ -7,6 +7,9 @@ on:
 
 jobs:
   deploy:
+    permissions:
+      contents: read
+      pull-requests: write
     name: ci
     runs-on: ubuntu-latest
     steps:

.storybook/DocsTemplate.tsx

@@ -0,0 +1,15 @@
+import { Controls, Description, Primary, Stories, Subtitle, Title, Unstyled } from '@storybook/addon-docs/blocks';
+
+export const DocsTemplate = () => (
+  <Unstyled>
+    <div className="prose">
+      <Title />
+      <Subtitle />
+      <Description />
+      <Primary />
+      <Controls />
+      <Stories includePrimary={false} />
+    </div>
+  </Unstyled>
+
+);

.storybook/dadsTheme.ts

@@ -6,4 +6,35 @@ export default create({
   brandTitle: 'デジタル庁デザインシステム',
   brandImage: 'logo.svg',
   brandTarget: '_self',
+
+  fontBase: "var(--font-family-sans), sans-serif",
+  fontCode: "var(--font-family-mono), monospace",
+
+  colorPrimary: "#0017c1",
+  colorSecondary: "#3460fb",
+
+  appBg: "#ffffff",
+  appContentBg: "#ffffff",
+  appPreviewBg: "#ffffff",
+
+  // appBorderColor: "#949494",
+  appBorderRadius: 8,
+
+  textColor: "#333333",
+  textInverseColor: "#aaaaaa",
+  textMutedColor: "#767676",
+
+  barTextColor: "#333333",
+  barHoverColor: "#1a1a1a",
+  barSelectedColor: "#0017c1",
+  barBg: "#ffffff",
+
+  buttonBg: "#ffffff",
+  buttonBorder: "#949494",
+  booleanBg: "#767676",
+  booleanSelectedBg: "#ffffff",
+
+  inputBg: "#ffffff",
+  inputBorder: "#767676",
+  inputTextColor: "#333333",
 });

.storybook/globals.css

@@ -1,7 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@400;700&display=swap");
 
-@import "@digital-go-jp/design-tokens";
+@import "@digital-go-jp/design-tokens/dist/tokens.css";
 
 @tailwind base;
 @tailwind components;

.storybook/manager-head.html

@@ -0,0 +1,81 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Sans+Mono:wght@100..900&display=swap" rel="stylesheet" />
+<style>
+  @namespace xlink url(http://www.w3.org/1999/xlink);
+
+  /* color-scheme プロパティを初期値に上書き */
+  #root > div {
+    color-scheme: normal;
+  }
+
+  /* パネル間のボーダー色 */
+  #root > div > div:has(nav) {
+    border-right-color: var(--color-neutral-solid-gray-420);
+  }
+  #root > div > div:has(#storybook-panel-root) {
+    border-top-color: var(--color-neutral-solid-gray-420);
+  }
+  [data-test-id="sb-preview-toolbar"] {
+    border-bottom: 1px solid var(--color-neutral-solid-gray-420);
+    box-shadow: none !important;
+  }
+
+  /* 検索フィールド */
+  [role="combobox"]:has(#storybook-explorer-searchfield) {
+    border: 1px solid var(--color-neutral-solid-gray-420);
+    box-shadow: none;
+  }
+  [role="combobox"]:has(#storybook-explorer-searchfield):has(input:focus) {
+    outline: calc(4 / 16 * 1rem) solid var(--color-neutral-black);
+    outline-offset: calc(2 / 16 * 1rem);
+    box-shadow: 0 0 0 calc(2 / 16 * 1rem) var(--color-primitive-yellow-300);
+  }
+  #storybook-explorer-searchfield:focus {
+    box-shadow: none;
+  }
+
+  /* 検索結果項目 */
+  .search-result-item[aria-selected="true"]:not(:hover) {
+    outline: 1px solid var(--color-primitive-blue-600);
+  }
+
+  /* ツリー全体フォーカス時 */
+  #storybook-explorer-menu:focus-visible {
+    outline: calc(4 / 16 * 1rem) solid var(--color-neutral-black);
+  }
+
+  /* Documents, Foundations, Components のトグル */
+  button[data-action="collapse-root"]:focus-visible {
+    outline: calc(4 / 16 * 1rem) solid var(--color-neutral-black);
+    outline-offset: calc(2 / 16 * 1rem);
+    border-radius: calc(4 / 16 * 1rem);
+    box-shadow: 0 0 0 calc(2 / 16 * 1rem) var(--color-primitive-yellow-300);
+  }
+
+  /* ツリーのアイコン */
+  svg:has(use[xlink|href="#icon--document"]) {
+    color: var(--color-primitive-orange-700);
+  }
+  svg:has(use[xlink|href="#icon--story"]) {
+    color: var(--color-primitive-cyan-700);
+  }
+
+  /* Argsテーブルのコントロール */
+  .docblock-argstable :focus:focus {
+    outline: calc(4 / 16 * 1rem) solid var(--color-neutral-black) !important;
+    outline-offset: calc(2 / 16 * 1rem) !important;
+    box-shadow: 0 0 0 calc(2 / 16 * 1rem) var(--color-primitive-yellow-300) !important;
+  }
+
+  /* Switchコントロール */
+  input[type="checkbox"][role="switch"]:checked ~ span:nth-of-type(1) {
+    color: #fff;
+  }
+  input[type="checkbox"][role="switch"]:not(:checked) ~ span:nth-of-type(2) {
+    color: #fff;
+  }
+</style>
+<script>
+  document.documentElement.setAttribute("lang", "ja");
+</script>

.storybook/manager.ts

@@ -2,6 +2,8 @@ import { addons } from 'storybook/manager-api';
 
 import CustomTheme from "./dadsTheme";
 
+import "./globals.css";
+
 addons.setConfig({
   theme: CustomTheme,
 });

.storybook/preview-head.html

@@ -1,3 +1,35 @@
+<style>
+  /* Storyキャンバス */
+  .sbdocs-preview {
+    border: 1px solid var(--color-neutral-solid-gray-420) !important;
+  }
+
+  /* Storyキャンバス内コード */
+  .sbdocs-preview .token.attr-value {
+    color: #dba3ff !important;
+  }
+
+  /* ドキュメント内コードブロック */
+  .docblock-source .token.attr-name,
+  .docblock-source .token.property {
+    color: #e00 !important;
+  }
+
+  /* Argsテーブルのコントロール */
+  .docblock-argstable :focus:focus {
+    outline: calc(4 / 16 * 1rem) solid var(--color-neutral-black) !important;
+    outline-offset: calc(2 / 16 * 1rem) !important;
+    box-shadow: 0 0 0 calc(2 / 16 * 1rem) var(--color-primitive-yellow-300) !important;
+  }
+
+  /* Switchコントロール */
+  input[type="checkbox"][role="switch"]:checked ~ span:nth-of-type(1) {
+    color: #fff;
+  }
+  input[type="checkbox"][role="switch"]:not(:checked) ~ span:nth-of-type(2) {
+    color: #fff;
+  }
+</style>
 <script>
   document.documentElement.setAttribute("lang", "ja");
 </script>

.storybook/preview.ts

@@ -1,4 +1,6 @@
 import type { Preview } from '@storybook/react-vite';
+import { DocsTemplate } from './DocsTemplate';
+import dadsTheme from "./dadsTheme";
 import './globals.css';
 import "./prose.css";
 
@@ -54,8 +56,10 @@ const preview: Preview = {
     },
 
     docs: {
-      codePanel: true
-    }
+      theme: dadsTheme,
+      codePanel: true,
+      page: DocsTemplate,
+    },
   },
 };