spendingjp · kaizumaki · Feb 26, 2022 · Feb 26, 2022 · Feb 26, 2022 · Feb 26, 2022
diff --git a/assets/css/_var.scss b/assets/css/_var.scss
@@ -1,5 +1,4 @@
-$primary:       #BF9D73;
-$secondary:     #4369D9;
 $light:         #359AF2;
 $dark:          #0F1640;
 $info:          #2E3C8C;
+$gray:          #FEFEFE;
diff --git a/components/ContentsBlock.vue b/components/ContentsBlock.vue
@@ -26,16 +26,16 @@ export default Vue.extend({
 }
 .content-title {
   position: relative;
-  color: $info;
+  color: $dark;
   margin: 16px 0;
   padding-bottom: 10px;
-  border-bottom: solid 3px $light;
+  border-bottom: solid 3px var(--secondary);
 
   &::after {
     position: absolute;
     content: ' ';
     display: block;
-    border-bottom: solid 3px $primary;
+    border-bottom: solid 3px var(--primary);
     bottom: -3px;
     width: 30%;
   }

diff --git a/components/DailyBread.vue b/components/DailyBread.vue
@@ -231,9 +231,9 @@ export default Vue.extend({
 }
 
 .title {
-  border-bottom: solid 3px $light;
+  border-bottom: solid 3px var(--secondary);
   position: relative;
-  color: $info;
+  color: $dark;
   font-size: 1.5rem;
   font-weight: bold;
   margin: 16px 0;
@@ -243,7 +243,7 @@ export default Vue.extend({
     position: absolute;
     content: ' ';
     display: block;
-    border-bottom: solid 3px $primary;
+    border-bottom: solid 3px var(--primary);
     bottom: -3px;
     width: 30%;
   }

diff --git a/components/PageTitle.vue b/components/PageTitle.vue
@@ -18,14 +18,15 @@ export default Vue.extend({
 <style scoped lang="scss">
 .page-title {
   position: relative;
+  color: $dark;
   margin: 20px 0 60px;
   padding-bottom: 10px;
 
   &::after {
     position: absolute;
     content: ' ';
     display: block;
-    border-bottom: 5px solid $primary;
+    border-bottom: 5px solid var(--primary);
     bottom: -3px;
     width: 50px;
   }

diff --git a/components/atoms/IconRadioButton.vue b/components/atoms/IconRadioButton.vue
@@ -36,16 +36,16 @@ export default Vue.extend({
 
 <style lang="scss" scoped>
 button {
-  border: 2px solid $primary;
-  border-bottom: 5px solid $primary;
+  border: 2px solid var(--primary);
+  border-bottom: 5px solid var(--primary);
   background-color: #fefefe;
   margin: 0 10px;
 }
 
 button.checked {
   margin-top: 3px;
-  border-bottom: 2px solid $primary;
-  color: $primary;
+  border-bottom: 2px solid var(--primary);
+  color: var(--primary);
 }
 
 button.unchecked {
@@ -56,16 +56,15 @@ button.unchecked {
 
 button:hover {
   margin-top: 3px;
-  border: 2px solid $primary;
-  border-bottom: 2px solid $primary;
+  border: 2px solid var(--primary);
 }
 
 .text {
   display: block;
 }
 
 .checked-text {
-  color: $primary;
+  color: var(--primary);
   font-weight: bold;
 }
 

diff --git a/components/atoms/slider.vue b/components/atoms/slider.vue
@@ -90,11 +90,11 @@ input[type='range'] {
 /* つまみ */
 input[type='range']::-webkit-slider-thumb {
   -webkit-appearance: none;
-  background: $primary;
+  background: var(--primary);
   width: 24px;
   height: 24px;
   background-size: cover;
   border-radius: 50%; /* 円形に */
   box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15); /* 影 */
 }
-</style>
+</style>
diff --git a/components/footer.vue b/components/footer.vue
@@ -70,11 +70,11 @@ export default Vue.extend({
 })
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 footer {
   margin-top: 50px;
   background-color: #0f1640;
-  color: #fefefe;
+  color: $gray;
 }
 
 .footer {
@@ -109,4 +109,4 @@ footer a:hover {
   text-align: justify;
   text-justify: inter-ideograph;
 }
-</style>
+</style>
diff --git a/components/header.vue b/components/header.vue
@@ -94,7 +94,7 @@
           <div class="col-sm-7 col-12 text-sm-end text-start">
             <small
               >あなたが
-              <span class="text-primary">{{ region }}</span>
+              <span class="region">{{ region }}</span>
               に納めた税金がどこで使われているかをお示しします</small
             >
           </div>
@@ -117,51 +117,49 @@ export default Vue.extend({
 </script>
 <style lang='scss' scoped>
 .header {
-  background-color: $info;
+  background-color: var(--primary);
 }
 
 a.navbar-brand {
-  color: $primary;
+  color: $gray;
   font-weight: bold;
   font-size: 4.5vmin;
   @media (min-width: 640px) {
     font-size: 18px * 1.25;
   }
 
   &:hover {
-    color: #fefefe;
+    color: $gray;
   }
 }
 
 .sub-title {
   background-color: $dark;
-  color: $dark;
   font-weight: bold;
-  padding: 3px 0;
-  border-bottom: $dark solid 3px;
+  padding: 5px 0;
 
   & div {
-    color: #fefefe;
+    color: $gray;
+  }
+
+  .region {
+    color: $light;
   }
 }
 
 #navbarSupportedContent a {
-  color: #f2f2f2;
+  color: $gray;
   font-weight: bold;
 }
 
 #navbarSupportedContent a.active {
-  color: #f2f2f2;
+  color: $dark;
   font-weight: bold;
-  border-bottom: $primary solid 2px;
+  border-bottom: $dark solid 2px;
   padding-bottom: 2px;
 }
 
-#navbarSupportedContent a.active:hover {
-  border: none;
-}
-
 #navbarSupportedContent a:hover {
-  color: $primary;
+  color: $dark;
 }
 </style>
diff --git a/components/molecules/IncomeSelector.vue b/components/molecules/IncomeSelector.vue
@@ -151,7 +151,7 @@ export default Vue.extend({
 
 <style lang="scss" scoped>
 .money {
-  color: $primary;
+  color: var(--primary);
   font-size: 1.5em;
   font-weight: bold;
 }
@@ -170,4 +170,4 @@ export default Vue.extend({
 #display-yearly-tax {
   text-align: center;
 }
-</style>
+</style>
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -10,7 +10,19 @@
 
 <script lang="ts">
 import Vue from 'vue'
-export default Vue.extend({})
+export default Vue.extend({
+  data() {
+    return {
+      defaultPrimary: '#BF9D73',
+      defaultSecondary: '#4369D9',
+    }
+  },
+  mounted() {
+    const primary = this.$store.state.regionCofogData.primaryColorCode ?? this.defaultPrimary
+    const secondary = this.$store.state.regionCofogData.secondaryColorCode ?? this.defaultSecondary
+    document.documentElement.setAttribute('style', `--primary: ${primary}; --secondary: ${secondary};`);
+  }
+})
 </script>
 
 <style>

diff --git a/plugins/api/COFOGAPIResponse.ts b/plugins/api/COFOGAPIResponse.ts
@@ -26,6 +26,8 @@ export interface COFOGAPIResponse {
     slug: string
     latitude: number
     longitude: number
+    primaryColorCode: string | null
+    secondaryColorCode: string | null
     createdAt: string
     updatedAt: string
   }

diff --git a/plugins/applicationServices/COFOGAPIService.ts b/plugins/applicationServices/COFOGAPIService.ts
@@ -52,6 +52,8 @@ export class COFOGAPIService {
         year: apiResponse.year,
         governmentName: apiResponse.government.name,
         budgetName: apiResponse.sourceBudget.name,
+        primaryColorCode: apiResponse.government.primaryColorCode,
+        secondaryColorCode: apiResponse.government.secondaryColorCode,
       }
     } catch (e) {
       throw new Error('APIレスポンスをオブジェクトに変換失敗')

diff --git a/plugins/dataTransferObjects/cofogData.ts b/plugins/dataTransferObjects/cofogData.ts
@@ -42,4 +42,9 @@ export type CofogData = Readonly<{
    * 予算名称
    */
   budgetName: string
+  /**
+   * カラーコード
+   */
+  primaryColorCode: string | null
+  secondaryColorCode: string | null
 }>
diff --git a/plugins/repositories/CofogDataRepository.ts b/plugins/repositories/CofogDataRepository.ts
@@ -22,6 +22,8 @@ export class CofogDataRepository {
       budgetName: storeData.budgetName,
       year: storeData.year,
       governmentName: storeData.governmentName,
+      primaryColorCode: storeData.primaryColorCode,
+      secondaryColorCode: storeData.secondaryColorCode,
       taxList: storeData.taxList.map((item: any) => {
         return {
           amount: Price.create(item.amount._value),

diff --git a/test/api/COFOGAPIService.spec.ts b/test/api/COFOGAPIService.spec.ts
@@ -33,6 +33,8 @@ describe('APIService', () => {
       year: 2021,
       governmentName: 'つくば市',
       budgetName: 'つくば市YYYY年度予算',
+      primaryColorCode: null,
+      secondaryColorCode: null,
       taxList: [
         {
           cofog: new Cofog(
@@ -89,6 +91,8 @@ describe('APIService', () => {
       year: 2021,
       governmentName: 'つくば市',
       budgetName: 'つくば市YYYY年度予算',
+      primaryColorCode: null,
+      secondaryColorCode: null,
       taxList: [
         {
           cofog: new Cofog(
@@ -217,6 +221,8 @@ const response: COFOGAPIResponse = {
     slug: 'tsukuba-shi',
     latitude: 36.0825081,
     longitude: 140.1107132,
+    primaryColorCode: null,
+    secondaryColorCode: null,
     createdAt: '2022-02-04T15:47:03.420321Z',
     updatedAt: '2022-02-04T15:47:03.425683Z',
   },
@@ -307,6 +313,8 @@ const responseMultiRecords: COFOGAPIResponse = {
     slug: 'tsukuba-shi',
     latitude: 36.0825081,
     longitude: 140.1107132,
+    primaryColorCode: null,
+    secondaryColorCode: null,
     createdAt: '2022-02-04T15:47:03.420321Z',
     updatedAt: '2022-02-04T15:47:03.425683Z',
   },

diff --git a/test/applicationServices/TaxApplicationService.spec.ts b/test/applicationServices/TaxApplicationService.spec.ts
@@ -77,6 +77,8 @@ const inputCofogData = {
   year: 2021,
   governmentName: 'つくば市',
   budgetName: 'つくば市YYYY年度予算',
+  primaryColorCode: null,
+  secondaryColorCode: null,
   taxList: [
     {
       amount: Price.create(8000),

diff --git a/test/domainServices/TaxService.spec.ts b/test/domainServices/TaxService.spec.ts
@@ -27,6 +27,8 @@ describe('TaxService', () => {
             year: 2021,
             governmentName: 'つくば市',
             budgetName: 'つくば市YYYY年度予算',
+            primaryColorCode: null,
+            secondaryColorCode: null,
             taxList: [
               {
                 amount: Price.create(8000),

diff --git a/test/repositories/CofogRepository.spec.ts b/test/repositories/CofogRepository.spec.ts
@@ -40,6 +40,8 @@ describe('CofogRepository', () => {
         slug: 'tsukuba-shi',
         latitude: 36.0825081,
         longitude: 140.1107132,
+        primaryColorCode: null,
+        secondaryColorCode: null,
         createdAt: '2022-02-04T15:47:03.420321Z',
         updatedAt: '2022-02-04T15:47:03.425683Z',
       },

diff --git a/test/store/CofogStore.spec.ts b/test/store/CofogStore.spec.ts
@@ -30,6 +30,8 @@ describe('CofogVuex', () => {
       year: 2021,
       governmentName: 'つくば市',
       budgetName: 'つくば市YYYY年度予算',
+      primaryColorCode: null,
+      secondaryColorCode: null,
       taxList: [
         {
           amount: Price.create(27738407000.0),
@@ -90,6 +92,8 @@ const response: COFOGAPIResponse = {
     slug: 'tsukuba-shi',
     latitude: 36.0825081,
     longitude: 140.1107132,
+    primaryColorCode: null,
+    secondaryColorCode: null,
     createdAt: '2022-02-04T15:47:03.420321Z',
     updatedAt: '2022-02-04T15:47:03.425683Z',
   },