外観

Orbz には併用できない二つの外観モードがあります。

組み込み preset を選ぶ、または
preset を省略し、五つの color-* 属性のいずれかを指定する。

palette という属性やプロパティはありません。公開名は preset です。

組み込みプリセット

プリセット	主色	副色	アクセント	ハイライト	中心
`neongate` （既定）	`#6C5CFF`	`#00E9FF`	`#FF4DDE`	`#FFB07A`	`#14142B`
`periwinkle`	`#6667AB`	`#8FB8FF`	`#E66FA9`	`#F3ECFF`	`#111226`
`magenta`	`#BB2649`	`#F06A82`	`#29B8A6`	`#FFDCE4`	`#250A12`
`peach`	`#FFBE98`	`#FF8F70`	`#D987A3`	`#FFF0E7`	`#2A1516`
`mocha`	`#A47864`	`#D3A17E`	`#7FA18F`	`#F2E2D7`	`#211613`
`ivory`	`#F0EEE9`	`#AFC7D3`	`#C8B3D4`	`#FFFFFF`	`#171A20`


<orb-z preset="periwinkle"></orb-z>

preset がなくても既定の外観は Neongate です。独自モードで未指定の色は Neongate から継承します。

選択 UI を作る際は公開された名前と値を使います。


import {
  DEFAULT_ORBZ_PRESET,
  ORBZ_PRESET_NAMES,
  ORBZ_PRESETS,
  type OrbzPresetName,
} from "@neongate-ai/orbz";
 
function getPreview(name: OrbzPresetName) {
  return ORBZ_PRESETS[name];
}
 
const NeongateColors = getPreview(DEFAULT_ORBZ_PRESET);

Neongate プリセットの名前

プリセット名は GitHub アカウントと無関係に Neongate（neongate）です。1.0.1 で誤ってアカウント由来の API キーを公開しましたが、1.0.2 で色を変えず neongate に戻しました。本書は公開済みの @neongate-ai/orbz@1.0.2 を使用します。

DEFAULT_ORBZ_PRESET と既定の preset getter は neongate を返します。新たな明示的マークアップには正式名を使います。


<orb-z preset="neongate"></orb-z>

廃止予定のアカウント由来名は属性、プロパティ、型、ガードで引き続き受け付けますが、反映属性と getter を含め neongate に正規化されます。旧名を使う簡潔・完全形式の設定も transformOrbzConfiguration() が入力を変更せず正規化します。

ORBZ_PRESET_NAMES は六つの正式名を列挙します。旧キーは ORBZ_PRESETS.neongate の列挙不可・変更不可の別名として残るため、直接参照は動作し、七つ目の選択肢は増えません。既定値に従うコードには DEFAULT_ORBZ_PRESET と ORBZ_PRESETS[DEFAULT_ORBZ_PRESET] を推奨します。既定の HTML では preset を省略します。


<orb-z></orb-z>

preset を省略すると独自色も有効になります。導入済みパッケージの ORBZ_PRESET_NAMES から選択肢を生成し、1.0.1 からの更新時には 1.0.2 リリースノートを確認してください。

独自パレット

preset を削除または省略し、有効な CSS 色を一つ以上設定します。


<orb-z
  color-primary="#7C3AED"
  color-secondary="#22D3EE"
  color-accent="#F472B6"
  color-highlight="#FDE68A"
  color-background="#09090B"
></orb-z>

属性	役割
`color-primary`	主要領域の色
`color-secondary`	対照領域とリングの色
`color-accent`	オーラと補助的なエネルギー
`color-highlight`	暖色または明るいハイライト
`color-background`	球体中心の色

色は一部だけでも指定できます。未指定は Neongate を継承するため、一色だけの調整も有効です。


<orb-z color-accent="#FF6B35"></orb-z>

競合時はプリセットを優先

preset と独自色を同時に指定しないでください。併存するとプリセットが適用され、独自色は無視され、競合属性を示すエラーがコンソールに出ます。


<!-- Invalid: preset wins and color-primary is ignored. -->
<orb-z preset="mocha" color-primary="#7C3AED"></orb-z>

独自属性はホスト上に残り、preset を削除すると有効になります。色エディターではモードを明示的に切り替えます。


const orb = document.querySelector("orb-z");
 
orb?.removeAttribute("preset");
orb?.setAttribute("color-primary", "#7C3AED");

どのフレームワークも同じネイティブ属性を書き込むため、同じ規則です。独自色を設定する前に preset を削除します。

サイズと影

size は幅と高さを制御します。HTML では CSS 長さを指定し、JavaScript プロパティの正数はピクセルになります。


<orb-z size="18rem" elevated></orb-z>

elevated は球体の周囲に中央揃えの丸い影を加えます。標準の真偽値属性なので elevated="false" でも有効です。無効にするには属性を削除するか、プロパティを false にします。

意図的にカスタマイズできない部分

内部 CSS 変数、セレクター、レイヤー、Shadow DOM のパーツは非公開で、テーマ API ではありません。文書化された属性が安定した契約であり、フレームワーク間の一貫性と内部描画の改善余地を保ちます。