apply vue-green/200

vuejs-jp · Apr 26, 2024 · 46bd595 · 46bd595
1 parent 1df36b7
commit 46bd595
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 3 deletions.
diff --git a/apps/web/app/components/FormPageSection.vue b/apps/web/app/components/FormPageSection.vue
@@ -125,7 +125,7 @@ section {
   line-height: 1.8;
 
   &::v-deep a {
-    color: var(--color-vue-green);
+    color: var(--color-vue-green200);
     text-decoration: underline;
   }
 

diff --git a/apps/web/app/pages/code-of-conduct.vue b/apps/web/app/pages/code-of-conduct.vue
@@ -100,7 +100,7 @@ main {
     line-height: 1.8;
   }
   &::v-deep a {
-    color: var(--color-vue-green);
+    color: var(--color-vue-green200);
     text-decoration: underline;
   }
   &::v-deep a:hover {

diff --git a/apps/web/app/pages/privacy.vue b/apps/web/app/pages/privacy.vue
@@ -116,7 +116,13 @@ useHead({
   /* 箇条書きとパラグラフ内のリンク */
   & :deep(ul) li a,
   & :deep(p) a {
-    color: var(--color-vue-green);
+    color: var(--color-vue-green200);
+    text-decoration: underline;
+  }
+  & :deep(ul) li a:hover,
+  & :deep(p) a:hover {
+    opacity: 0.4;
+    transition: .2s;
   }
   /* 箇条書き1段目 reset.cssでnoneになったため追加 */
   & :deep(ul) {

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/100', () => '#42B883')
       .with('vue-green/200', () => '#208558')
       .with('asagi/100', () => '#33A6B8')
       .with('asagi/200', () => '#1A8191')

diff --git a/packages/css/base.css b/packages/css/base.css
@@ -6,10 +6,13 @@
   --color-white: #fff;
   --color-vue-blue: #35495e;
   --color-vue-green: #42b983;
+  --color-vue-green100: #42B883;
+  --color-vue-green200: #208558;
   --color-disabled: #c6cacf;
 
   /* gradation */
   --color-vue-green-gradation: linear-gradient(to right, #42b883, #41b8aa);
+  --color-vue-blue-gradation: linear-gradient(to right, #35495e 0%, #353b5e 100%);
 
   /* box-shadow */
   --box-shadow: 0 2px 10px rgb(53, 73, 95, 0.14);

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/100'
   | 'vue-green/200'
   | 'asagi/100'
   | 'asagi/200'