Getting ready for new theme token system

Hanage999 · Hanage999 · commit 5698e12bed2a · 2026-01-10T09:03:03.000+09:00
diff --git a/app/javascript/styles/blue-dark.scss b/app/javascript/styles/blue-dark.scss
@@ -4,4 +4,4 @@
 
 $wallpaper: "crazynewworld/blue-dark.jpg";
 
-@include diff.apply-crazynewworld-theme($wallpaper, $ui-base-color, $ui-highlight-color, $no-gap-breakpoint);
+@include diff.apply-crazynewworld-theme($wallpaper, $no-gap-breakpoint);
diff --git a/app/javascript/styles/blue.scss b/app/javascript/styles/blue.scss
@@ -5,4 +5,4 @@
 $wallpaper: "crazynewworld/blue.jpg";
 $wallpaper-dark: "crazynewworld/blue-dark.jpg";
 
-@include diff.apply-crazynewworld-theme($wallpaper-dark, $wallpaper, $ui-base-color, $ui-highlight-color, $no-gap-breakpoint);
+@include diff.apply-crazynewworld-theme($wallpaper-dark, $wallpaper, $no-gap-breakpoint);
diff --git a/app/javascript/styles/crazynewworld/diff_transparent_compact.scss b/app/javascript/styles/crazynewworld/diff_transparent_compact.scss
@@ -6,15 +6,11 @@
 @mixin apply-crazynewworld-theme(
   $wallpaper-dark,
   $wallpaper,
-  $ui-base-color,
-  $ui-highlight-color,
   $no-gap-breakpoint
 ) {
   @include tp.transparent-background(
     $wallpaper-dark,
     $wallpaper,
-    $ui-base-color,
-    $ui-highlight-color,
     $no-gap-breakpoint
   );
 }
diff --git a/app/javascript/styles/crazynewworld/diff_transparent_dark.scss b/app/javascript/styles/crazynewworld/diff_transparent_dark.scss
@@ -4,14 +4,10 @@
 
 @mixin apply-crazynewworld-theme(
   $wallpaper,
-  $ui-base-color,
-  $ui-highlight-color,
   $no-gap-breakpoint
 ) {
   @include tp.transparent-background(
     $wallpaper,
-    $ui-base-color,
-    $ui-highlight-color,
     $no-gap-breakpoint
   );
 }
diff --git a/app/javascript/styles/crazynewworld/diff_transparent_dark_compact.scss b/app/javascript/styles/crazynewworld/diff_transparent_dark_compact.scss
@@ -5,14 +5,10 @@
 
 @mixin apply-crazynewworld-theme(
   $wallpaper,
-  $ui-base-color,
-  $ui-highlight-color,
   $no-gap-breakpoint
 ) {
   @include tp.transparent-background(
     $wallpaper,
-    $ui-base-color,
-    $ui-highlight-color,
     $no-gap-breakpoint
   );
 }
diff --git a/app/javascript/styles/crazynewworld/transparent_background.scss b/app/javascript/styles/crazynewworld/transparent_background.scss
@@ -3,8 +3,6 @@
 @mixin transparent-background(
   $wallpaper-dark,
   $wallpaper,
-  $ui-base-color,
-  $ui-highlight-color,
   $no-gap-breakpoint
 ) {
   .transparent-bg {
@@ -37,7 +35,7 @@
   .compose-form {
 
     &__highlightable {
-      background: rgba(color.adjust($ui-base-color, $lightness: -15%), 0.7);
+      background: rgba(9, 9, 12, 0.7);
     }
 
     .autosuggest-textarea__textarea,
@@ -51,7 +49,7 @@
   }
 
   .search__input {
-    background: rgba(color.adjust($ui-base-color, $lightness: -15%), 0.7);
+    background: rgba(9, 9, 12, 0.7);
   }
 
   @media screen and (max-width: #{ $no-gap-breakpoint - 1 }) {
@@ -152,25 +150,25 @@
     .compose-form {
 
       &__highlightable {
-        background: rgba(color.adjust($ui-base-color, $lightness: -15%), 0.5);
+        background: rgba(9, 9, 12, 0.5);
       }
     }
 
     .search__input {
-      background: rgba(color.adjust($ui-base-color, $lightness: -15%), 0.5);
+      background: rgba(9, 9, 12, 0.5);
     }
 
     /* 意味のある色変更 */
 
     .column-subheading {
-      background: rgba(color.adjust($ui-base-color, $lightness: 15%), 0.3);
+      background: rgba(73, 73, 101, 0.3);
     }
 
     .detailed-status__wrapper-direct {
 
       .detailed-status,
       .detailed-status__action-bar {
-        background: rgba(color.mix($ui-base-color, $ui-highlight-color, 95%), 0.6);
+        background: rgba(44, 44, 66, 0.6);
       }
     }
 
@@ -219,7 +217,7 @@
     }
 
     .reply-indicator__line::before {
-      background: color.adjust($ui-base-color, $lightness: 60%);
+      background: rgb(193, 193, 210);
       box-shadow: 2px 2px 2px black;
     }
 
diff --git a/app/javascript/styles/crazynewworld/transparent_background_dark.scss b/app/javascript/styles/crazynewworld/transparent_background_dark.scss
@@ -2,8 +2,6 @@
 
 @mixin transparent-background(
   $wallpaper,
-  $ui-base-color,
-  $ui-highlight-color,
   $no-gap-breakpoint
 ) {
   .transparent-bg {
@@ -37,7 +35,7 @@
   .compose-form {
 
     &__highlightable {
-      background: rgba(color.adjust($ui-base-color, $lightness: -15%), 0.7);
+      background: rgba(9, 9, 12, 0.7);
     }
 
     .autosuggest-textarea__textarea,
@@ -51,7 +49,7 @@
   }
 
   .search__input {
-    background: rgba(color.adjust($ui-base-color, $lightness: -15%), 0.7);
+    background: rgba(9, 9, 12, 0.7);
   }
 
   @media screen and (max-width: #{ $no-gap-breakpoint - 1 }) {
diff --git a/app/javascript/styles/green-dark.scss b/app/javascript/styles/green-dark.scss
@@ -4,4 +4,4 @@
 
 $wallpaper: "crazynewworld/green-dark.jpg";
 
-@include diff.apply-crazynewworld-theme($wallpaper, $ui-base-color, $ui-highlight-color, $no-gap-breakpoint);
+@include diff.apply-crazynewworld-theme($wallpaper, $no-gap-breakpoint);
diff --git a/app/javascript/styles/green.scss b/app/javascript/styles/green.scss
@@ -5,4 +5,4 @@
 $wallpaper: "crazynewworld/green.jpg";
 $wallpaper-dark: "crazynewworld/green-dark.jpg";
 
-@include diff.apply-crazynewworld-theme($wallpaper-dark, $wallpaper, $ui-base-color, $ui-highlight-color, $no-gap-breakpoint);
+@include diff.apply-crazynewworld-theme($wallpaper-dark, $wallpaper, $no-gap-breakpoint);
diff --git a/app/javascript/styles/mastodon-blue.scss b/app/javascript/styles/mastodon-blue.scss
@@ -4,4 +4,4 @@
 
 $wallpaper: "crazynewworld/blue-dark.jpg";
 
-@include diff.apply-crazynewworld-theme($wallpaper, $ui-base-color, $ui-highlight-color, $no-gap-breakpoint);
+@include diff.apply-crazynewworld-theme($wallpaper, $no-gap-breakpoint);
diff --git a/app/javascript/styles/mastodon-green.scss b/app/javascript/styles/mastodon-green.scss
@@ -4,4 +4,4 @@
 
 $wallpaper: "crazynewworld/green-dark.jpg";
 
-@include diff.apply-crazynewworld-theme($wallpaper, $ui-base-color, $ui-highlight-color, $no-gap-breakpoint);
+@include diff.apply-crazynewworld-theme($wallpaper, $no-gap-breakpoint);
diff --git a/app/javascript/styles/sakura-dark.scss b/app/javascript/styles/sakura-dark.scss
@@ -4,4 +4,4 @@
 
 $wallpaper: "crazynewworld/sakura-dark.jpg";
 
-@include diff.apply-crazynewworld-theme($wallpaper, $ui-base-color, $ui-highlight-color, $no-gap-breakpoint);
+@include diff.apply-crazynewworld-theme($wallpaper, $no-gap-breakpoint);
diff --git a/app/javascript/styles/sakura.scss b/app/javascript/styles/sakura.scss
@@ -5,4 +5,4 @@
 $wallpaper: "crazynewworld/sakura.jpg";
 $wallpaper-dark: "crazynewworld/sakura-dark.jpg";
 
-@include diff.apply-crazynewworld-theme($wallpaper-dark, $wallpaper, $ui-base-color, $ui-highlight-color, $no-gap-breakpoint);
+@include diff.apply-crazynewworld-theme($wallpaper-dark, $wallpaper, $no-gap-breakpoint);
diff --git a/app/javascript/styles/shouwa-dark.scss b/app/javascript/styles/shouwa-dark.scss
@@ -4,4 +4,4 @@
 
 $wallpaper: "crazynewworld/shouwa-dark.jpg";
 
-@include diff.apply-crazynewworld-theme($wallpaper, $ui-base-color, $ui-highlight-color, $no-gap-breakpoint);
+@include diff.apply-crazynewworld-theme($wallpaper, $no-gap-breakpoint);
diff --git a/app/javascript/styles/shouwa.scss b/app/javascript/styles/shouwa.scss
@@ -5,4 +5,4 @@
 $wallpaper: "crazynewworld/shouwa.jpg";
 $wallpaper-dark: "crazynewworld/shouwa-dark.jpg";
 
-@include diff.apply-crazynewworld-theme($wallpaper-dark, $wallpaper, $ui-base-color, $ui-highlight-color, $no-gap-breakpoint);
+@include diff.apply-crazynewworld-theme($wallpaper-dark, $wallpaper, $no-gap-breakpoint);
diff --git a/app/javascript/styles/tricolor-dark.scss b/app/javascript/styles/tricolor-dark.scss
@@ -4,4 +4,4 @@
 
 $wallpaper: "crazynewworld/tricolor-dark.jpg";
 
-@include diff.apply-crazynewworld-theme($wallpaper, $ui-base-color, $ui-highlight-color, $no-gap-breakpoint);
+@include diff.apply-crazynewworld-theme($wallpaper, $no-gap-breakpoint);
diff --git a/app/javascript/styles/tricolor.scss b/app/javascript/styles/tricolor.scss
@@ -5,4 +5,4 @@
 $wallpaper: "crazynewworld/tricolor.jpg";
 $wallpaper-dark: "crazynewworld/tricolor-dark.jpg";
 
-@include diff.apply-crazynewworld-theme($wallpaper-dark, $wallpaper, $ui-base-color, $ui-highlight-color, $no-gap-breakpoint);
+@include diff.apply-crazynewworld-theme($wallpaper-dark, $wallpaper, $no-gap-breakpoint);

Original file line number	Diff line number	Diff line change
`@@ -4,4 +4,4 @@`
`4`	`4`
`5`	`5`	`$wallpaper: "crazynewworld/blue-dark.jpg";`
`6`	`6`
`7`		`-@include diff.apply-crazynewworld-theme($wallpaper, $ui-base-color, $ui-highlight-color, $no-gap-breakpoint);`
	`7`	`+@include diff.apply-crazynewworld-theme($wallpaper, $no-gap-breakpoint);`
Original file line number	Diff line number	Diff line change
`@@ -3,8 +3,6 @@`
`3`	`3`	`@mixin transparent-background(`
`4`	`4`	`$wallpaper-dark,`
`5`	`5`	`$wallpaper,`
`6`		`- $ui-base-color,`
`7`		`- $ui-highlight-color,`
`8`	`6`	`$no-gap-breakpoint`
`9`	`7`	`) {`
`10`	`8`	`.transparent-bg {`
`@@ -37,7 +35,7 @@`
`37`	`35`	`.compose-form {`
`38`	`36`
`39`	`37`	`&__highlightable {`
`40`		`- background: rgba(color.adjust($ui-base-color, $lightness: -15%), 0.7);`
	`38`	`+ background: rgba(9, 9, 12, 0.7);`
`41`	`39`	`}`
`42`	`40`
`43`	`41`	`.autosuggest-textarea__textarea,`
`@@ -51,7 +49,7 @@`
`51`	`49`	`}`
`52`	`50`
`53`	`51`	`.search__input {`
`54`		`- background: rgba(color.adjust($ui-base-color, $lightness: -15%), 0.7);`
	`52`	`+ background: rgba(9, 9, 12, 0.7);`
`55`	`53`	`}`
`56`	`54`
`57`	`55`	`@media screen and (max-width: #{ $no-gap-breakpoint - 1 }) {`
`@@ -152,25 +150,25 @@`
`152`	`150`	`.compose-form {`
`153`	`151`
`154`	`152`	`&__highlightable {`
`155`		`- background: rgba(color.adjust($ui-base-color, $lightness: -15%), 0.5);`
	`153`	`+ background: rgba(9, 9, 12, 0.5);`
`156`	`154`	`}`
`157`	`155`	`}`
`158`	`156`
`159`	`157`	`.search__input {`
`160`		`- background: rgba(color.adjust($ui-base-color, $lightness: -15%), 0.5);`
	`158`	`+ background: rgba(9, 9, 12, 0.5);`
`161`	`159`	`}`
`162`	`160`
`163`	`161`	`/* 意味のある色変更 */`
`164`	`162`
`165`	`163`	`.column-subheading {`
`166`		`- background: rgba(color.adjust($ui-base-color, $lightness: 15%), 0.3);`
	`164`	`+ background: rgba(73, 73, 101, 0.3);`
`167`	`165`	`}`
`168`	`166`
`169`	`167`	`.detailed-status__wrapper-direct {`
`170`	`168`
`171`	`169`	`.detailed-status,`
`172`	`170`	`.detailed-status__action-bar {`
`173`		`- background: rgba(color.mix($ui-base-color, $ui-highlight-color, 95%), 0.6);`
	`171`	`+ background: rgba(44, 44, 66, 0.6);`
`174`	`172`	`}`
`175`	`173`	`}`
`176`	`174`
`@@ -219,7 +217,7 @@`
`219`	`217`	`}`
`220`	`218`
`221`	`219`	`.reply-indicator__line::before {`
`222`		`- background: color.adjust($ui-base-color, $lightness: 60%);`
	`220`	`+ background: rgb(193, 193, 210);`
`223`	`221`	`box-shadow: 2px 2px 2px black;`
`224`	`222`	`}`
`225`	`223`
Original file line number	Diff line number	Diff line change
`@@ -4,4 +4,4 @@`
`4`	`4`
`5`	`5`	`$wallpaper: "crazynewworld/green-dark.jpg";`
`6`	`6`
`7`		`-@include diff.apply-crazynewworld-theme($wallpaper, $ui-base-color, $ui-highlight-color, $no-gap-breakpoint);`
	`7`	`+@include diff.apply-crazynewworld-theme($wallpaper, $no-gap-breakpoint);`