feat: add vue-blue, vue-green

vuejs-jp · Mar 2, 2024 · db9e5c3 · db9e5c3
1 parent 560c400
commit db9e5c3
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 11 deletions.
diff --git a/apps/web/app/assets/base.css b/apps/web/app/assets/base.css
@@ -4,10 +4,14 @@
 @import './reset.css';
 
 :root {
-  /* margin (e.g. calc(var(--unit) * 2) = 16px) */
+  /* margin
+   * e.g. calc(var(--unit) * 2) = 16px
+   */
   --unit: 8px;
 
   /* color */
+  --color-vue-blue: #35495e;
+  --color-vue-green: #42b983;
 
   /* zindex */
 }

diff --git a/apps/web/app/assets/media.css b/apps/web/app/assets/media.css
@@ -1 +1,4 @@
 @import 'open-props/media';
+
+@custom-media --tablet (width <= 768px);
+@custom-media --mobile (width <= 480px);
diff --git a/apps/web/app/assets/sample.css b/apps/web/app/assets/sample.css
@@ -26,7 +26,7 @@
   font-size: var(--card-fontsize);
   box-shadow: var(--shadow-3);
   border-radius: var(--card-raius);
-  color: var(--blue-2);
+  color: var(--color-vue-blue);
   background-color: #fff;
   padding: var(--card-padding);
 }
@@ -35,17 +35,16 @@
   display: flex;
   align-items: center;
   font-size: var(--card-fontsize-title);
-  color: var(--lime-3);
+  color: var(--color-vue-green);
   margin-bottom: calc(var(--unit) * 2);
 }
 
 .card-icon {
-  background-color: var(--lime-2);
+  background-color: var(--color-vue-green);
   inline-size: var(--card-icon-size);
   aspect-ratio: var(--ratio-square);
   border-radius: var(--radius-round);
   margin-right: calc(var(--unit) * 2);
-  box-shadow: var(--inner-shadow-3);
 }
 
 .card-footer {
@@ -61,10 +60,10 @@
 }
 
 .card-footer a {
-  color: var(--blue-3);
+  color: var(--green-3);
 }
 
-@media (--md-n-below) {
+@media (--tablet) {
   .card {
     --card-width: auto;
     --card-fontsize: var(--font-size-1);

diff --git a/apps/web/app/pages/css-sample.vue b/apps/web/app/pages/css-sample.vue
@@ -37,9 +37,9 @@
  * 上書き戦略
  *
  * 1. まずDesktop用のものを定義する
- * 2. タブレット以下（--md-n-below）で上書き（必要な分のみ）
+ * 2. タブレット以下（--tablet）で上書き（必要な分のみ）
  *    タブレットのみ、ではなくタブレット以下で上書きをする
- * 3. 必要であればスマホ以下（--sm-n-below）で上書き
+ * 3. 必要であればスマホ以下（--mobile）で上書き
  *
  * マージンなど
  * --unitを利用して8の倍数で設定していく calc(var(--unit) * 2) = 16px 
@@ -67,7 +67,7 @@ h1 {
 }
 
 /* タブレット以下に適用 */
-@media (--md-n-below) {
+@media (--tablet) {
   .container {
     /* ローカル変数を上書き */
     --container-padding: calc(var(--unit) * 3) calc(var(--unit) * 2);
@@ -88,6 +88,6 @@ h1 {
 -->
 <style>
 html {
-  background-color: var(--blue-1);
+  background-color: var(--green-2);
 }
 </style>