create-wot-ui-theme

Wot-ui テーマスキルの作成

このスキルは、wot-ui プロジェクトで「単一ファイルのテーマ SCSS」方式を生成するためのものです。テーマファイルは src/themes/styles 配下でセマンティック変数の定義と適用を完結させ、App.vue は @use による読み込みのみを担当します。light/dark の2ファイル構成にはせず、uni_modules/wot-ui/styles/theme/index.scss も変更しません。

適用シーン

• ユーザーが wot-ui 用のブランドテーマ、業務テーマ、またはカスタムセマンティック変数テーマの生成を明確に求めている。
• ユーザーが src/themes/styles/{テーマ名}.scss を新規作成し、適用ロジックもテーマファイルにまとめることを希望している。
• ユーザーが App.vue に @use './themes/styles/{テーマ名}.scss' as {テーマ名}; のような読み込みだけを残すよう求めている。
• ユーザーが dark テーマファイルを生成しないこと、テーマを2ファイル構成に分割しないこと、組み込みテーマのエントリーポイントを変更しないことを強調している。

適用しないシーン

• ユーザーが wd-config-provider や通常の CSS 変数の使い方を知りたいだけの場合は、まず wot-ui-v2 スキルを使用してください。
• ユーザーが light/dark の2テーマ、動的なテーマ切り替えシステム、実行時のトークン注入を求めている場合、これは本スキルの対象構成ではありません。
• 現在のリポジトリに実際の業務用 src/App.vue やテーマディレクトリがない場合、ファイルを作り上げないでください。ユーザーの対象プロジェクトのパスを基に作業するか、まず対象のプロジェクトの場所をユーザーに確認してください。

主な制約

• テーマファイルは1つだけ生成します：src/themes/styles/{テーマ名}.scss。
• テーマファイルには、以下をすべて含める必要があります。
  • @mixin {テーマ名}-theme-vars を1つ
  • page、.wot-theme-{テーマ名}、.wot-theme-{テーマ名} .wd-root-portal の適用セレクター
• App.vue は @use による読み込みのみを担当し、適用セレクターを重複して記述しません。
• すべてのセマンティック変数には固定色または transparent を指定し、var(--wot-xxx) は使用しません。
• dark.scss は生成せず、uni_modules/wot-ui/styles/theme/index.scss も変更しません。
• ユーザーが App.vue への組み込みを明確に求めていない場合は、テーマファイルのみを生成し、追加すべき @use 文を提示します。

実行前の確認

生成前に、以下の情報を優先して確認してください。不足している場合は、作業に着手する前に確認してください。

1. テーマ名（例：antd、ocean、forest）
2. テーマのスタイル説明（例：ブランド寄り、中立的、コントラスト強め）
3. メインカラーの10段階すべてをカスタマイズするか
4. danger、success、warning はデフォルト値を引き継ぐか
5. テキスト、ボーダー、塗りつぶし、フィードバック状態の全体的なトーンを調整するか
6. src/App.vue にも組み込むか

推奨手順

1. プロジェクト内に src/themes/styles/*.scss と src/App.vue がすでに存在するかを確認し、組み込み位置と既存の順序を把握します。
2. ユーザーからテーマ情報が十分に提供されていない場合は、テーマ名、スタイル、トークンの調整範囲を確認します。
3. src/themes/styles/{テーマ名}.scss を作成し、本スキルの完全なテンプレートに従って、すべてのセマンティック変数を出力します。
4. ユーザーが明確に組み込みを求めた場合のみ、src/App.vue の <style lang="scss"> に @use './themes/styles/{テーマ名}.scss' as {テーマ名}; を追加します。
5. 変数がすべて定義されていること、値がすべて固定色であること、適用セレクターがテーマファイル内にあることを確認します。

テーマファイルの要件

構造の要件

• mixin は {テーマ名}-theme-vars という名前のものを1つだけ残します。
• コメントの形式は、antd.scss のようなセマンティックなグループ分けにできるだけ合わせます。
• 適用セレクターは同じファイルの末尾に直接記述します。
• mixin の呼び出し形式は @include {テーマ名}-theme-vars(); に固定します。

App.vue の要件

• @use './themes/styles/{テーマ名}.scss' as {テーマ名}; のみを追加します。
• App.vue に page, .wot-theme-{テーマ名} などの適用ブロックを重複して記述しません。
• ほかのテーマの @use がすでにある場合は、既存の順序を保ち、既存ブロックを壊さずに、現在のテーマだけを追加します。

変数の完全なテンプレート

@mixin {主题名}-theme-vars {
  /* {主题描述} semantic tokens */
  /* Primary */
  --wot-primary-1: #F5F8FFFF;
  --wot-primary-2: #E5EDFFFF;
  --wot-primary-3: #B8CFFFFF;
  --wot-primary-4: #7CA4FFFF;
  --wot-primary-5: #4480FFFF;
  --wot-primary-6: #1C64FDFF;
  --wot-primary-7: #164ED1FF;
  --wot-primary-8: #1341ADFF;
  --wot-primary-9: #0F3285FF;
  --wot-primary-10: #0A235CFF;

  /* Danger */
  --wot-danger-main: #F14646FF;
  --wot-danger-hover: #FB7C7CFF;
  --wot-danger-clicked: #DC2C2CFF;
  --wot-danger-disabled: #FFC9C9FF;
  --wot-danger-particular: #FFE3E3FF;
  --wot-danger-surface: #FFF5F5FF;

  /* Success */
  --wot-success-main: #12B886FF;
  --wot-success-hover: #59CDAAFF;
  --wot-success-clicked: #0F956CFF;
  --wot-success-disabled: #B8EADBFF;
  --wot-success-particular: #E7F8F3FF;
  --wot-success-surface: #F3FBF9FF;

  /* Warning */
  --wot-warning-main: #F57F00FF;
  --wot-warning-hover: #FFA94DFF;
  --wot-warning-clicked: #D05706FF;
  --wot-warning-disabled: #FFD8A8FF;
  --wot-warning-particular: #FFE8CCFF;
  --wot-warning-surface: #FFF6EBFF;

  /* Text */
  --wot-text-main: #1D1F29FF;
  --wot-text-secondary: #4E5369FF;
  --wot-text-auxiliary: #868A9CFF;
  --wot-text-disabled: #C9CBD4FF;
  --wot-text-placeholder: #A9ACB8FF;
  --wot-text-white: #FFFFFFFF;

  /* Icon */
  --wot-icon-main: #1D1F29FF;
  --wot-icon-secondary: #4E5369FF;
  --wot-icon-auxiliary: #868A9CFF;
  --wot-icon-disabled: #C9CBD4FF;
  --wot-icon-placeholder: #A9ACB8FF;
  --wot-icon-white: #FFFFFFFF;

  /* Border */
  --wot-border-extra-strong: #868A9CFF;
  --wot-border-strong: #C9CBD4FF;
  --wot-border-main: #E5E6EBFF;
  --wot-border-light: #F2F3F5FF;
  --wot-border-white: #FFFFFFFF;
  --wot-border-zero: transparent;

  /* Filled */
  --wot-filled-extra-strong: #C9CBD4FF;
  --wot-filled-strong: #E5E6EBFF;
  --wot-filled-content: #F2F3F5FF;
  --wot-filled-bottom: #F7F8FAFF;
  --wot-filled-oppo: #FFFFFFFF;
  --wot-filled-zero: transparent;

  /* Divider */
  --wot-divider-main: #00000014;
  --wot-divider-light: #0000000A;
  --wot-divider-strong: #00000026;
  --wot-divider-white: #FFFFFFFF;

  /* Feedback */
  --wot-feedback-hover: #0000000A;
  --wot-feedback-active: #00000014;
  --wot-feedback-accent: #1C64FD14;

  /* Opacity filled */
  --wot-opacfilled-tooltip-toast-cover: #000000BF;
  --wot-opacfilled-main-cover: #0000008C;
  --wot-opacfilled-light-cover: #0000004D;

  /* Picker view mask */
  --wot-picker-view-mask-start-color: #FFFFFFD9;
  --wot-picker-view-mask-end-color: #FFFFFF33;

  /* Classify application */
  --wot-classifyapplication-yellow-background: #FFFAF1FF;
  --wot-classifyapplication-yellow-border: #FDD78CFF;
  --wot-classifyapplication-yellow-content: #FAAD14FF;
  --wot-classifyapplication-Cyan-background: #F4FBFDFF;
  --wot-classifyapplication-Cyan-border: #BDEAF1FF;
  --wot-classifyapplication-Cyan-content: #22B8CFFF;
  --wot-classifyapplication-Purple-background: #F9F8FFFF;
  --wot-classifyapplication-Purple-border: #D0BFFFFF;
  --wot-classifyapplication-Purple-content: #8059F3FF;
  --wot-classifyapplication-Grape-background: #FBF6FDFF;
  --wot-classifyapplication-Grape-border: #EEBEFAFF;
  --wot-classifyapplication-Grape-content: #AE3EC9FF;
  --wot-classifyapplication-Pink-background: #FFF0F6FF;
  --wot-classifyapplication-Pink-border: #FCC2D7FF;
  --wot-classifyapplication-Pink-content: #FF357CFF;
}

page,
.wot-theme-{主题名},
.wot-theme-{主题名} .wd-root-portal {
  @include {主题名}-theme-vars();
}

出力チェックリスト

• テーマファイルが src/themes/styles/{テーマ名}.scss にある
• ファイルに @mixin {テーマ名}-theme-vars が1つ含まれている
• ファイル内で page、.wot-theme-{テーマ名}、.wot-theme-{テーマ名} .wd-root-portal の適用が完了している
• メインカラー、機能色、テキスト、アイコン、ボーダー、塗りつぶし、区切り線、フィードバック、透明な塗りつぶし、Picker View のマスク、分類色のすべての変数が含まれている
• すべての値が固定色または transparent である
• App.vue に組み込む場合、追加するのは @use './themes/styles/{テーマ名}.scss' as {テーマ名}; のみである
• mixin の呼び出し形式が @include {テーマ名}-theme-vars(); である

回答と実装のルール

• ユーザーが組み込みを明確に求めていない場合、App.vue を自発的に変更しないでください。
• ユーザーから明確な指示がない限り、dark テーマ、変数マッピングレイヤー、追加のディレクトリ構成をついでに生成しないでください。
• コードを生成する際は、最小限の変更を優先し、既存のテーマファイルの順序、セレクターの範囲、プロジェクトのスタイルを壊さないでください。
• プロジェクトに異なるテーマ構成がすでにある場合は、まず違いを説明し、引き続き本スキルの単一ファイル構成で実装するか確認してください。