Feat/open props

.gitignore

@@ -23,6 +23,7 @@ coverage
 
 # Build Outputs
 .next/
+.nuxt/
 out/
 build
 dist

apps/web/app/assets/base.css

@@ -0,0 +1,27 @@
+/* https://open-props.style/#getting-started */
+
+@import 'open-props/style';
+@import './reset.css';
+
+:root {
+  /* margin
+   * e.g. calc(var(--unit) * 2) = 16px
+   */
+  --unit: 8px;
+
+  /* color */
+  --color-vue-blue: #35495e;
+  --color-vue-green: #42b983;
+
+  /* zindex */
+}
+
+ul[role='list'],
+ol[role='list'] {
+  padding-inline-start: 0;
+}
+
+html {
+  font-family: 'din-2014', 'Yu Gothic Medium', '游ゴシック体', YuGothic,
+    '游ゴシック', 'Yu Gothic', sans-serif;
+}

apps/web/app/assets/media.css

@@ -0,0 +1,4 @@
+@import 'open-props/media';
+
+@custom-media --tablet (width <= 768px);
+@custom-media --mobile (width <= 480px);

apps/web/app/assets/reset.css

@@ -0,0 +1,57 @@
+/* https://github.com/Andy-set-studio/modern-css-reset/blob/master/dist/reset.min.css */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin: 0;
+}
+ul[role='list'],
+ol[role='list'] {
+  list-style: none;
+}
+html:focus-within {
+  scroll-behavior: smooth;
+}
+body {
+  min-height: 100vh;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+}
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+}
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

apps/web/app/assets/sample.css

@@ -0,0 +1,80 @@
+@import url('~/assets/media.css');
+
+/**
+ * textlink
+ */
+
+.textlink {
+  text-decoration: underline;
+}
+.textlink:hover {
+  text-decoration: none;
+}
+
+/**
+ * card
+ */
+.card {
+  --card-width: 100%;
+  --card-fontsize: var(--font-size-2);
+  --card-fontsize-title: var(--font-size-3);
+  --card-icon-size: var(--size-8);
+  --card-padding: calc(var(--unit) * 3);
+  --card-raius: var(--radius-3);
+
+  aspect-ratio: 16 / 9;
+  font-size: var(--card-fontsize);
+  box-shadow: var(--shadow-3);
+  border-radius: var(--card-raius);
+  color: var(--color-vue-blue);
+  background-color: #fff;
+  padding: var(--card-padding);
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+  font-size: var(--card-fontsize-title);
+  color: var(--color-vue-green);
+  margin-bottom: calc(var(--unit) * 2);
+}
+
+.card-icon {
+  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);
+}
+
+.card-footer {
+  margin-top: calc(var(--unit) * 2);
+}
+
+.card-footer ul {
+  display: flex;
+}
+
+.card-footer li {
+  margin-right: calc(var(--unit) * 2);
+}
+
+.card-footer a {
+  color: var(--green-3);
+}
+
+@media (--tablet) {
+  .card {
+    --card-width: auto;
+    --card-fontsize: var(--font-size-1);
+    --card-fontsize-title: var(--font-size-2);
+    --card-padding: calc(var(--unit) * 2);
+    aspect-ratio: auto;
+  }
+  .card-header {
+    margin-bottom: calc(var(--unit) * 1);
+  }
+  .card-footer {
+    margin-top: calc(var(--unit) * 1);
+  }
+}

apps/web/app/pages/css-sample.vue

@@ -0,0 +1,93 @@
+<template>
+  <main class="container">
+    <h1>サンプルネームカード</h1>
+    <ul class="cardlist" role='list'>
+      <li v-for="n in 4">
+        <!-- card 通常はcomponent化する -->
+        <div class="card">
+          <header class="card-header">
+            <div class="card-icon"></div>
+            <p>ネームカード</p>
+          </header>
+          <p>
+            いろはにほへと ちりぬるを わかよたれそ つねならむ うゐのおくやま けふこえて あさきゆめみし ゑひもせす
+          </p>
+          <footer class="card-footer">
+            <ul role="list">
+              <li>
+                <a href="" class="textlink">twitter</a>
+              </li>
+              <li>
+                <a href="" class="textlink">company</a>
+              </li>
+            </ul>
+          </footer>
+        </div>
+        <!-- /card -->
+      </li>
+    </ul>
+  </main>
+</template>
+
+<style scoped>
+@import url("~/assets/media.css");
+@import url("~/assets/sample.css");
+
+/**
+ * 上書き戦略
+ *
+ * 1. まずDesktop用のものを定義する
+ * 2. タブレット以下（--tablet）で上書き（必要な分のみ）
+ *    タブレットのみ、ではなくタブレット以下で上書きをする
+ * 3. 必要であればスマホ以下（--mobile）で上書き
+ *
+ * マージンなど
+ * --unitを利用して8の倍数で設定していく calc(var(--unit) * 2) = 16px 
+ */
+
+.container {
+  /* ローカル変数を定義すると上書きが楽 */
+  --container-padding: calc(var(--unit) * 5) 0;
+
+  max-width: 90%;
+  margin: 0 auto;
+  padding: var(--container-padding);
+}
+
+h1 {
+  text-align: center;
+  color: var(--stone-0);
+}
+
+.cardlist {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: calc(var(--unit) * 2);
+  padding-top: calc(var(--unit) * 2);
+}
+
+/* タブレット以下に適用 */
+@media (--tablet) {
+  .container {
+    /* ローカル変数を上書き */
+    --container-padding: calc(var(--unit) * 3) calc(var(--unit) * 2);
+
+    max-width: none;
+  }
+
+  .cardlist {
+    grid-template-columns: none;
+  }
+}
+</style>
+
+
+<!--
+  サンプル用
+  基本はscoped付き以外は使わない
+-->
+<style>
+html {
+  background-color: var(--green-2);
+}
+</style>

apps/web/nuxt.config.ts

@@ -12,13 +12,13 @@ export default defineNuxtConfig({
         code: 'ja',
         name: '日本語',
         iso: 'ja',
-        file: 'ja.json'
+        file: 'ja.json',
       },
       {
         code: 'en',
         name: 'English',
         iso: 'en',
-        file: 'en.json'
+        file: 'en.json',
       },
     ],
     lazy: true,
@@ -27,8 +27,8 @@ export default defineNuxtConfig({
     detectBrowserLanguage: {
       useCookie: true,
       cookieKey: 'i18n_redirected',
-      redirectOn: 'root'
-    }
+      redirectOn: 'root',
+    },
   },
   vite: {
     plugins: [
@@ -38,4 +38,10 @@ export default defineNuxtConfig({
     ],
   },
   devtools: { enabled: true },
+  css: ['~/assets/base.css'],
+  postcss: {
+    plugins: {
+      'postcss-custom-media': {},
+    },
+  },
 })

apps/web/package.json

@@ -31,8 +31,10 @@
     "@vuejs-jp/vuefes-ui": "workspace:*",
     "cypress": "13.6.4",
     "nuxt": "3.10.0",
-    "vue-tsc": "^1.8.27",
+    "open-props": "^1.6.21",
+    "postcss-custom-media": "^10.0.3",
     "vite-svg-loader": "5.1.0",
-    "vitest": "1.2.2"
+    "vitest": "1.2.2",
+    "vue-tsc": "^1.8.27"
   }
 }