トークンを表ではなく実際のインターフェースで調整します。
preset、depth、light、shape、motion を1つの theme engine で調整し、実コンポーネントと生成 CSS を同時に確認します。
NVDA NASDAQ
価格アラート
- 現在価格
- $188.32
- 目標価格
- $210.00
- 本日の変動
- +2.14%
- 目標比
- 90%
目標価格を設定
現在価格 $188.3290% 目標比
アラート条件
目標価格でプッシュ通知
アラートを有効にしました
目標価格: $210.00ローカルプレビューです。通知は送信されません。
出力
現在の設定をプロジェクトのグローバル CSS 変数としてコピーします。
生成されたニューモーフィズムテーマ CSS
/* Neumorphism UI theme — Air · balanced · top-left */
:root {
--neu-font-sans: "Pretendard Variable", Pretendard, sans-serif;
--neu-font-mono: Consolas, monospace;
--background: #ebecf0;
--foreground: #25264b;
--card: #ebecf0;
--card-foreground: #25264b;
--popover: #ebecf0;
--popover-foreground: #25264b;
--primary: #0768da;
--primary-foreground: #ffffff;
--secondary: #e5e7ed;
--secondary-foreground: #25264b;
--muted: #dfe1e7;
--muted-foreground: #586079;
--neu-select-arrow: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23586079%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E");
--accent: #f2f3f5;
--accent-foreground: #0768da;
--destructive: #b92e43;
--destructive-foreground: #ffffff;
--success: #0a9b78;
--border: rgb(83 99 123 / 0.18);
--input: rgb(83 99 123 / 0.16);
--ring: #0768da;
--radius: 12px;
--neu-surface: #ebecf0;
--neu-surface-soft: #f2f3f5;
--neu-surface-low: #dfe1e7;
--neu-edge: transparent;
--neu-shadow-dark: rgb(66 72 94 / 0.22);
--neu-shadow-light: rgb(255 255 255 / 0.94);
--neu-shadow-raised: 6px 6px 14px rgb(66 72 94 / 0.22), -6px -6px 14px color-mix(in srgb, rgb(255 255 255 / 0.94) 94%, transparent);
--neu-shadow-raised-sm: 3px 3px 7px rgb(66 72 94 / 0.22), -3px -3px 7px color-mix(in srgb, rgb(255 255 255 / 0.94) 84%, transparent);
--neu-shadow-inset: inset 2px 2px 7px rgb(66 72 94 / 0.22), inset -2px -2px 7px color-mix(in srgb, rgb(255 255 255 / 0.94) 86%, transparent);
--neu-shadow-inset-sm: inset 1px 1px 3px rgb(66 72 94 / 0.22), inset -1px -1px 3px rgb(255 255 255 / 0.94);
--neu-shadow-primary: 3px 4px 8px rgb(66 72 94 / 0.22), -3px -3px 7px color-mix(in srgb, rgb(255 255 255 / 0.94) 84%, transparent), inset 1px 1px 2px color-mix(in srgb, #0768da 94%, white);
--neu-shadow-primary-hover: 4px 4px 10px rgb(66 72 94 / 0.22), -4px -4px 10px color-mix(in srgb, rgb(255 255 255 / 0.94) 84%, transparent), inset 1px 1px 2px color-mix(in srgb, #0768da 94%, white);
--neu-fill-inset: linear-gradient(135deg, color-mix(in srgb, #dfe1e7 35%, #ebecf0), color-mix(in srgb, #f2f3f5 30%, #ebecf0));
--neu-shadow-primary-inset: inset 2px 2px 5px color-mix(in srgb, #0768da 68%, black), inset -2px -2px 5px color-mix(in srgb, #0768da 78%, white);
--neu-shadow-destructive-inset: inset 2px 2px 5px color-mix(in srgb, #b92e43 68%, black), inset -2px -2px 5px color-mix(in srgb, #b92e43 78%, white);
--neu-overlay: rgb(15 23 42 / 0.28);
--neu-radius-control: 8px;
--neu-radius-small: 4px;
--neu-accent-ink: #0965d3;
--neu-radius-surface: 12px;
--neu-radius-overlay: 12px;
--neu-duration: 180ms;
--neu-fill-raised: linear-gradient(135deg, color-mix(in srgb, #f2f3f5 12%, #ebecf0), #ebecf0);
--neu-fill-primary: linear-gradient(135deg, #0768da, color-mix(in srgb, #0768da 94%, black));
--neu-selected: color-mix(in srgb, #0768da 8%, #ebecf0);
--neu-selected-border: color-mix(in srgb, #0768da 44%, rgb(83 99 123 / 0.18));
--neu-error-text: color-mix(in srgb, #b92e43 76%, #25264b);
--neu-shadow-hover: 4px 4px 10px rgb(66 72 94 / 0.22), -4px -4px 10px color-mix(in srgb, rgb(255 255 255 / 0.94) 84%, transparent);
--neu-shadow-floating: 0 16px 40px rgb(66 72 94 / 0.22), 0 3px 8px rgb(66 72 94 / 0.22), inset 1px 1px 0 color-mix(in srgb, rgb(255 255 255 / 0.72) 45%, transparent);
}
.dark {
--neu-font-sans: "Pretendard Variable", Pretendard, sans-serif;
--neu-font-mono: Consolas, monospace;
--background: #242731;
--foreground: #e9f0fa;
--card: #242731;
--card-foreground: #e9f0fa;
--popover: #292d39;
--popover-foreground: #e9f0fa;
--primary: #5aa2ff;
--primary-foreground: #07111f;
--secondary: #2a2e3a;
--secondary-foreground: #e9f0fa;
--muted: #1c1f28;
--muted-foreground: #aab4c8;
--neu-select-arrow: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23aab4c8%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E");
--accent: #2b2f3c;
--accent-foreground: #5aa2ff;
--destructive: #ff7685;
--destructive-foreground: #111827;
--success: #40d6ad;
--border: rgb(255 255 255 / 0.10);
--input: rgb(255 255 255 / 0.12);
--ring: #5aa2ff;
--radius: 12px;
--neu-surface: #242731;
--neu-surface-soft: #2b2f3c;
--neu-surface-low: #1c1f28;
--neu-edge: color-mix(in srgb, #e9f0fa 4%, transparent);
--neu-shadow-dark: rgb(0 0 0 / 0.34);
--neu-shadow-light: rgb(255 255 255 / 0.065);
--neu-shadow-raised: 6px 6px 14px rgb(0 0 0 / 0.34), -6px -6px 14px color-mix(in srgb, rgb(255 255 255 / 0.065) 94%, transparent);
--neu-shadow-raised-sm: 3px 3px 7px rgb(0 0 0 / 0.34), -3px -3px 7px color-mix(in srgb, rgb(255 255 255 / 0.065) 84%, transparent);
--neu-shadow-inset: inset 2px 2px 7px rgb(0 0 0 / 0.34), inset -2px -2px 7px color-mix(in srgb, rgb(255 255 255 / 0.065) 86%, transparent);
--neu-shadow-inset-sm: inset 1px 1px 3px rgb(0 0 0 / 0.34), inset -1px -1px 3px rgb(255 255 255 / 0.065);
--neu-shadow-primary: 3px 4px 8px rgb(0 0 0 / 0.34), -3px -3px 7px color-mix(in srgb, rgb(255 255 255 / 0.065) 84%, transparent), inset 1px 1px 2px color-mix(in srgb, #5aa2ff 94%, white);
--neu-shadow-primary-hover: 4px 4px 10px rgb(0 0 0 / 0.34), -4px -4px 10px color-mix(in srgb, rgb(255 255 255 / 0.065) 84%, transparent), inset 1px 1px 2px color-mix(in srgb, #5aa2ff 94%, white);
--neu-fill-inset: linear-gradient(135deg, color-mix(in srgb, #1c1f28 35%, #242731), color-mix(in srgb, #2b2f3c 30%, #242731));
--neu-shadow-primary-inset: inset 2px 2px 5px color-mix(in srgb, #5aa2ff 68%, black), inset -2px -2px 5px color-mix(in srgb, #5aa2ff 78%, white);
--neu-shadow-destructive-inset: inset 2px 2px 5px color-mix(in srgb, #ff7685 68%, black), inset -2px -2px 5px color-mix(in srgb, #ff7685 78%, white);
--neu-overlay: rgb(0 0 0 / 0.55);
--neu-radius-control: 8px;
--neu-radius-small: 4px;
--neu-accent-ink: #5aa2ff;
--neu-radius-surface: 12px;
--neu-radius-overlay: 12px;
--neu-duration: 180ms;
--neu-fill-raised: linear-gradient(135deg, color-mix(in srgb, #2b2f3c 12%, #242731), #242731);
--neu-fill-primary: linear-gradient(135deg, color-mix(in srgb, #5aa2ff 94%, white), #5aa2ff);
--neu-selected: color-mix(in srgb, #5aa2ff 8%, #242731);
--neu-selected-border: color-mix(in srgb, #5aa2ff 44%, rgb(255 255 255 / 0.10));
--neu-error-text: #ff7685;
--neu-shadow-hover: 4px 4px 10px rgb(0 0 0 / 0.34), -4px -4px 10px color-mix(in srgb, rgb(255 255 255 / 0.065) 84%, transparent);
--neu-shadow-floating: 0 16px 40px rgb(0 0 0 / 0.34), 0 3px 8px rgb(0 0 0 / 0.34), inset 1px 1px 0 color-mix(in srgb, rgb(255 255 255 / 0.07) 45%, transparent);
}