Merge pull request #119 from vuejs-jp/fix/button_color

fix/button color to meet minimum contrast
vuejs-jp · Apr 25, 2024 · 1df36b7 · 1df36b7
2 parents 9950a3c + 74f4cc6
commit 1df36b7
Show file tree

Hide file tree

Showing 5 changed files with 5 additions and 3 deletions.
diff --git a/apps/web/app/components/SponsorPageSection.vue b/apps/web/app/components/SponsorPageSection.vue
@@ -45,7 +45,7 @@ const { color } = useColor()
           v-if="config.public.availableApplySponsor"
           class="sponsor-button"
           href="https://forms.gle/paxZqz55oXLE4Njn9"
-          background-color="vue-green"
+          background-color="vue-green/200"
           color="white"
         >
           {{ $t('sponsor.apply') }}

diff --git a/apps/web/app/components/TopPageSection.vue b/apps/web/app/components/TopPageSection.vue
@@ -27,7 +27,7 @@ const { locale } = useI18n()
         <div class="link-buttons">
           <VFLinkButton
             class="link-button"
-            background-color="vue-green"
+            background-color="vue-green/200"
             color="white"
             icon-name="x22"
             href="https://twitter.com/vuefes"

diff --git a/packages/composable/lib/useColor.ts b/packages/composable/lib/useColor.ts
@@ -7,6 +7,7 @@ export function useColor() {
       .with('white', () => '#ffffff')
       .with('vue-blue', () => '#35495e')
       .with('vue-green', () => '#42b883')
+      .with('vue-green/200', () => '#208558')
       .with('asagi/100', () => '#33A6B8')
       .with('asagi/200', () => '#1A8191')
       .with('tohou/100', () => '#FFC408')

diff --git a/packages/model/lib/color.ts b/packages/model/lib/color.ts
@@ -2,6 +2,7 @@ export type Color =
   | 'white'
   | 'vue-blue'
   | 'vue-green'
+  | 'vue-green/200'
   | 'asagi/100'
   | 'asagi/200'
   | 'tohou/100'

diff --git a/packages/ui/components/link/LinkButton.stories.ts b/packages/ui/components/link/LinkButton.stories.ts
@@ -6,7 +6,7 @@ export default {
   tags: ['autodocs'],
   component: LinkButton,
   args: {
-    backgroundColor: 'vue-green',
+    backgroundColor: 'vue-green/200',
     color: 'white',
     href: 'https://forms.gle/paxZqz55oXLE4Njn9',
   },