Update src/css/colors.css

src/css/colors.css

@@ -1,52 +1,53 @@
-$ui-primary: var(--ui-primary, hsla(215, 100%, 95%, 1)); /* #E5F0FF */
-$ui-secondary: var(--ui-secondary, hsla(215, 75%, 95%, 1)); /* #E9F1FC */
-$ui-tertiary: var(--ui-tertiary, hsla(215, 50%, 90%, 1)); /* #D9E3F2 */
+// 基本色（#6f00ffを基調）
+$ui-primary: var(--ui-primary, hsla(266, 100%, 95%, 1)); /* #F0E5FF */
+$ui-secondary: var(--ui-secondary, hsla(266, 75%, 95%, 1)); /* #F3E9FC */
+$ui-tertiary: var(--ui-tertiary, hsla(266, 50%, 90%, 1)); /* #E7D9F2 */
 
-$ui-modal-overlay: var(--ui-modal-overlay, hsla(194, 100%, 65%, 0.9)); /* 90% transparent version of motion-primary */
+$ui-modal-overlay: var(--ui-modal-overlay, hsla(266, 100%, 65%, 0.9)); /* #B366FF with 90% opacity */
 
 $ui-white: hsla(0, 100%, 100%, 1); /* #FFFFFF */
-$ui-white-dim: hsla(0, 100%, 100%, 0.75); /* 25% transparent version of ui-white */
-$ui-white-transparent: hsla(0, 100%, 100%, 0.25); /* 25% transparent version of ui-white */
-$ui-transparent: hsla(0, 100%, 100%, 0); /* 25% transparent version of ui-white */
+$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% transparent version of black */
+$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(225, 15%, 40%, 1)); /* #575E75 */
-$text-primary-transparent: hsla(225, 15%, 40%, 0.75);
+$text-primary: var(--text-primary, hsla(266, 30%, 40%, 1)); /* 渋めの紫文字色 */
+$text-primary-transparent: hsla(266, 30%, 40%, 0.75);
 
-$motion-primary: hsla(194, 100%, 50%, 1); /* #00c3ff */
-$motion-tertiary: hsla(203, 100%, 39%, 1); /* #007bc7 */
-$motion-transparent: hsla(194, 100%, 50%, 0.35); /* 35% transparent version of motion-primary */
-$motion-light-transparent: hsla(203, 100%, 39%, 0.15); /* 15% transparent version of motion-primary */
+$motion-primary: hsla(266, 100%, 50%, 1); /* #6f00ff */
+$motion-tertiary: hsla(266, 100%, 39%, 1); /* #5c00cc */
+$motion-transparent: hsla(266, 100%, 50%, 0.35); /* #6f00ff 35% */
+$motion-light-transparent: hsla(266, 100%, 39%, 0.15); /* #5c00cc 15% */
 
 /* opt-in theme overrides */
-$motion-primary-dark: #009CCC; /*top bar color when in dark mode*/
-$ui-primary-light: hsla(215, 100%, 95%, 1);
-$ui-secondary-light: hsla(215, 75%, 95%, 1);
-$ui-tertiary-light: hsla(215, 50%, 90%, 1);
-$text-primary-light: hsla(225, 15%, 40%, 1);
+$motion-primary-dark: #5500cc; /* ダークモードのトップバー色 */
+$ui-primary-light: hsla(266, 100%, 95%, 1);
+$ui-secondary-light: hsla(266, 75%, 95%, 1);
+$ui-tertiary-light: hsla(266, 50%, 90%, 1);
+$text-primary-light: hsla(266, 30%, 40%, 1);
 
-$red-primary: hsla(194, 100%, 50%, 1); /* #00c3ff */
-$red-tertiary: hsla(203, 100%, 39%, 1); /* #007bc7 */
+$red-primary: hsla(266, 100%, 50%, 1); /* #6f00ff */
+$red-tertiary: hsla(266, 100%, 39%, 1); /* #5c00cc */
 
-$sound-primary: hsla(300, 53%, 60%, 1); /* #CF63CF */
-$sound-tertiary: hsla(300, 48%, 50%, 1); /* #BD42BD */
+$sound-primary: hsla(266, 70%, 60%, 1); /* #9966ff */
+$sound-tertiary: hsla(266, 60%, 50%, 1); /* #8040ff */
 
-$control-primary: hsla(38, 100%, 55%, 1); /* #FFAB19 */
+$control-primary: hsla(266, 100%, 60%, 1); /* #9966ff 代替コントロール色 */
 
-$data-primary: hsla(30, 100%, 55%, 1); /* #FF8C1A */
+$data-primary: hsla(266, 100%, 55%, 1); /* #8a33ff */
 
-$pen-primary: hsla(163, 85%, 40%, 1); /* #0FBD8C */
-$pen-transparent: hsla(163, 85%, 40%, 0.25); /* #0FBD8C */
+$pen-primary: hsla(266, 85%, 40%, 1); /* #5900b8 */
+$pen-transparent: hsla(266, 85%, 40%, 0.25); /* #5900b8 25% */
 
-$error-primary: hsla(30, 100%, 55%, 1); /* #FF8C1A */
-$error-light: hsla(30, 100%, 70%, 1); /* #FFB366 */
-$error-transparent: hsla(30, 100%, 55%, 0.25); /* #FF8C1A */
+$error-primary: hsla(266, 100%, 55%, 1); /* #8a33ff */
+$error-light: hsla(266, 100%, 70%, 1); /* #b380ff */
+$error-transparent: hsla(266, 100%, 55%, 0.25); /* #8a33ff 25% */
 
-$extensions-primary: hsla(194, 100%, 50%, 1);
-$extensions-tertiary: hsla(203, 100%, 39%, 1);
-$extensions-transparent: hsla(194, 100%, 50%, 0.35); /* 35% transparent version of extensions-primary */
-$extensions-light: hsla(203, 100%, 39%, 1); /* opaque version of extensions-transparent, on white bg */
+$extensions-primary: hsla(266, 100%, 50%, 1);
+$extensions-tertiary: hsla(266, 100%, 39%, 1);
+$extensions-transparent: hsla(266, 100%, 50%, 0.35);
+$extensions-light: hsla(266, 100%, 39%, 1);
 
-$drop-highlight: hsla(194, 100%, 77%, 1); /* lighter than motion-primary */
+$drop-highlight: hsla(266, 100%, 77%, 1); /* #d1a6ff より明るい紫 */