src/css/colors.css

/* 基本色（#625edbを基調） */
$ui-primary: var(--ui-primary, hsla(248, 100%, 95%, 1)); /* #F0EFFF */
$ui-secondary: var(--ui-secondary, hsla(248, 75%, 95%, 1)); /* #F3F2FC */
$ui-tertiary: var(--ui-tertiary, hsla(248, 50%, 90%, 1)); /* #E6E6F7 */

$ui-modal-overlay: var(--ui-modal-overlay, hsla(248, 66%, 62%, 0.9)); /* #625edb with 90% opacity */

$ui-white: hsla(0, 100%, 100%, 1); /* #FFFFFF */
$ui-white-dim: hsla(0, 100%, 100%, 0.75); /* 75% */
$ui-white-transparent: hsla(0, 100%, 100%, 0.25); /* 25% */
$ui-transparent: hsla(0, 100%, 100%, 0); /* 0% */

$ui-black-transparent-default: hsla(0, 0%, 0%, 0.15); /* 15% black */
$ui-black-transparent: var(--ui-black-transparent, $ui-black-transparent-default);

$text-primary: var(--text-primary, hsla(248, 30%, 35%, 1)); /* 渋めの青紫文字色 */
$text-primary-transparent: hsla(248, 30%, 35%, 0.75);

$motion-primary: hsla(248, 66%, 62%, 1); /* #625edb */
$motion-tertiary: hsla(248, 66%, 52%, 1); /* #504db8 */
$motion-transparent: hsla(248, 66%, 62%, 0.35); /* #625edb 35% */
$motion-light-transparent: hsla(248, 66%, 52%, 0.15); /* #504db8 15% */

/* opt-in theme overrides */
$motion-primary-dark: #4b3ca6; /* ダークモードのトップバー色 */
$ui-primary-light: hsla(248, 100%, 95%, 1);
$ui-secondary-light: hsla(248, 75%, 95%, 1);
$ui-tertiary-light: hsla(248, 50%, 90%, 1);
$text-primary-light: hsla(248, 30%, 35%, 1);

$red-primary: hsla(248, 66%, 62%, 1); /* #625edb */
$red-tertiary: hsla(248, 66%, 52%, 1); /* #504db8 */

$sound-primary: hsla(248, 70%, 60%, 1); /* #7366e6 */
$sound-tertiary: hsla(248, 60%, 50%, 1); /* #5a40cc */

$control-primary: hsla(248, 66%, 65%, 1); /* #6d6dec */

$data-primary: hsla(248, 66%, 55%, 1); /* #5545d4 */

$pen-primary: hsla(248, 85%, 40%, 1); /* #2f1f80 */
$pen-transparent: hsla(248, 85%, 40%, 0.25); /* 25% */

$error-primary: hsla(248, 66%, 55%, 1); /* #5545d4 */
$error-light: hsla(248, 66%, 70%, 1); /* #8b80f0 */
$error-transparent: hsla(248, 66%, 55%, 0.25); /* 25% */

$extensions-primary: hsla(248, 66%, 62%, 1); /* #625edb */
$extensions-tertiary: hsla(248, 66%, 52%, 1); /* #504db8 */
$extensions-transparent: hsla(248, 66%, 62%, 0.35);
$extensions-light: hsla(248, 66%, 70%, 1);

$drop-highlight: hsla(248, 100%, 77%, 1); /* #c6bfff 明るい紫青 */