From 8de6c8d4cf35a5224d8091f9559c8c08f3c24ccb Mon Sep 17 00:00:00 2001 From: Claas Date: Mon, 27 May 2024 23:06:34 +0200 Subject: [PATCH] Add material colors --- package.json | 1 + pnpm-lock.yaml | 14 ++++++++++++++ src/app.css | 2 +- src/routes/index.tsx | 29 +++++++++++++++-------------- tailwind.config.js | 4 +++- 5 files changed, 34 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index 6224e60..60e29f3 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "node": ">=18" }, "devDependencies": { + "@claas.dev/material-tailwind": "^0.4.0", "autoprefixer": "^10.4.19", "postcss": "^8.4.38", "prettier": "^3.2.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fe83ceb..2e046ce 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -24,6 +24,9 @@ importers: specifier: ^0.3.11 version: 0.3.11(@opentelemetry/api@1.8.0)(@types/node@20.12.12)(ioredis@5.4.1)(terser@5.31.0) devDependencies: + '@claas.dev/material-tailwind': + specifier: ^0.4.0 + version: 0.4.0 autoprefixer: specifier: ^10.4.19 version: 10.4.19(postcss@8.4.38) @@ -160,6 +163,11 @@ packages: resolution: {integrity: sha512-6mQNsaLeXTw0nxYUYu+NSa4Hx4BlF1x1x8/PMFbiR+GBSr+2DkECc69b8hgy2frEodNcvPffeH8YfWd3LI6jhQ==} engines: {node: '>=6.9.0'} + '@claas.dev/material-tailwind@0.4.0': + resolution: {integrity: sha512-xTxtFnbOcY/fR/KHLw5XcAJY20uQdlHfbkcXHhXZBS765xIAX7bIZJNvoTBhZMBLv60ZGF6rzVObDBOqILvj4w==} + bundledDependencies: + - '@material/material-color-utilities' + '@cloudflare/kv-asset-handler@0.3.2': resolution: {integrity: sha512-EeEjMobfuJrwoctj7FA1y1KEbM0+Q1xSjobIEyie9k4haVEBB7vkDvsasw1pM3rO39mL2akxIAzLMUAtrMHZhA==} engines: {node: '>=16.13'} @@ -2885,6 +2893,12 @@ snapshots: '@babel/helper-validator-identifier': 7.24.5 to-fast-properties: 2.0.0 + '@claas.dev/material-tailwind@0.4.0': + dependencies: + tailwindcss: 3.4.3 + transitivePeerDependencies: + - ts-node + '@cloudflare/kv-asset-handler@0.3.2': dependencies: mime: 3.0.0 diff --git a/src/app.css b/src/app.css index f237347..d019115 100644 --- a/src/app.css +++ b/src/app.css @@ -5,6 +5,6 @@ @layer base { :root { /* Just some fun base styles that are global */ - @apply bg-zinc-50 text-zinc-950 caret-purple-400 accent-purple-400 selection:bg-purple-400 selection:text-purple-100; + @apply bg-light-surface text-light-on-surface caret-light-primary accent-light-primary selection:bg-light-primary selection:text-light-on-primary; } } diff --git a/src/routes/index.tsx b/src/routes/index.tsx index ee43d92..c33d29d 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -81,20 +81,20 @@ const data = [ export default function Home() { const [isLocation, setIsLocation] = createSignal(true); return ( -
-
    +
    +
      {/* TODO add next departure line icon and time */} {/* TODO add map and A/B tests */} {/* TODO add that ticket sale, management and information is out of scope. That's why the navigation options are limited and focus is on public transport not long distance travel */} {(item) => ( -
    1. -

      +
    2. +

      {item.name}

      {/* TODO how to align text with SVG without flex */} -

      +

      -

      - + {/* Trailing supporting text */} + {item.distance} @@ -137,22 +138,22 @@ export default function Home() { Also don't you first think of where you want to go and not where you are right now? */} {/* animation moving bottom sheet for search into view to get focus from user */}
      -
      diff --git a/tailwind.config.js b/tailwind.config.js index 9cf313b..3b19ca9 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,3 +1,5 @@ +import materialTailwind from "@claas.dev/material-tailwind"; + /** @type {import('tailwindcss').Config} */ export default { content: ["./src/**/*.{js,jsx,ts,tsx}"], @@ -14,5 +16,5 @@ export default { }, }, }, - plugins: [], + plugins: [materialTailwind({ source: "#0c1445" })], }; -- 2.51.2