feat: AppLoadingBar; add tw config

bdrtsky · bdrtsky · commit 03295370381d · 2023-07-18T16:05:54.000+03:00
diff --git a/app.config.ts b/app.config.ts
@@ -1,4 +1,7 @@
+import tokens from './tokens.config'
+
 export default defineAppConfig({
+  tokens,
   alpine: {
     title: 'Alpine',
     description: 'The minimalist blog theme',
diff --git a/assets/main.css b/assets/main.css
@@ -1,7 +1,69 @@
-body {
+
+/* Use colors from tailwind.config.ts orange */
+:root {
+  /* --color-primary-50: #FFF7F2;
+  --color-primary-100: #FFEFE5;
+  --color-primary-200: #FFE5D7;
+  --color-primary-300: #FDAC7E;
+  --color-primary-400: #FC8E51;
+  --color-primary-500: #FA630E;
+  --color-primary-600: #7E3004;
+  --color-primary-700: #3F1802;
+  --color-primary-800: #2D1102;
+  --color-primary-900: #1A0A01;
+  --color-secondary-50: #F8F5FF;
+  --color-secondary-100: #F1ECFF;
+  --color-secondary-200: #E5DCFF;
+  --color-secondary-300: #A589F9;
+  --color-secondary-400: #8961FD;
+  --color-secondary-500: #6B39FA;
+  --color-secondary-600: #370DAD;
+  --color-secondary-700: #200273;
+  --color-secondary-800: #14014A;
+  --color-secondary-900: #080020; */
+
+  --color-black: 14 13 13;
+
+  --color-primary-50: 242 250 255;
+  --color-primary-100: 226 244 255;
+  --color-primary-200: 208 238 255;
+  --color-primary-300: 161 221 255;
+  --color-primary-400: 100 199 255;
+  --color-primary-500: 26 173 255;
+  --color-primary-600: 1 101 158;
+  --color-primary-700: 1 56 88;
+  --color-primary-800: 0 34 53;
+  --color-primary-900: 0 19 29;
+  --color-secondary-50: 248 245 255;
+  --color-secondary-100: 241 236 255;
+  --color-secondary-200: 229 220 255;
+  --color-secondary-300: 165 137 249;
+  --color-secondary-400: 137 97 253;
+  --color-secondary-500: 107 57 250;
+  --color-secondary-600: 55 13 173;
+  --color-secondary-700: 32 2 115;
+  --color-secondary-800: 20 1 74;
+  --color-secondary-900: 8 0 32;
+
+  --color-gray-50: 251 251 251;
+  --color-gray-100: 243 243 242;
+  --color-gray-200: 236 235 232;
+  --color-gray-300: 219 217 211;
+  --color-gray-400: 173 169 164;
+  --color-gray-500: 151 148 143;
+  --color-gray-600: 61 59 56;
+  --color-gray-700: 41 39 36;
+  --color-gray-800: 28 27 25;
+  --color-gray-900: 18 17 16;
+
+  --color-shadow: var(--color-gray-400);
+}
+
+
+/* body {
   background-color: $dt('alpine.body.backgroundColor');
   color: $dt('alpine.body.color');
-}
+} */
 
 /* Color scheme images helper classes */
 .light-img {
diff --git a/components/AppLayout.vue b/components/AppLayout.vue
@@ -20,7 +20,7 @@ useContentHead(alpine as any)
 <template>
   <div>
     <!-- <Container class="app-layout"> -->
-    <!-- <AppLoadingBar /> -->
+    <AppLoadingBar />
     <!-- <AppHeader v-if="alpine.header" /> -->
     <slot />
     <!-- <AppFooter v-if="alpine.footer" /> -->
diff --git a/components/app/AppLoadingBar.vue b/components/app/AppLoadingBar.vue
@@ -1,5 +1,7 @@
-<script setup>
-import { useNuxtApp, onBeforeUnmount, reactive } from '#imports'
+<script setup lang="ts">
+import appConfig from '#build/app.config'
+
+const { tokens } = appConfig
 
 const props = defineProps({
   throttle: {
@@ -10,10 +12,6 @@ const props = defineProps({
     type: Number,
     default: 2000
   },
-  height: {
-    type: Number,
-    default: 3
-  }
 })
 
 const nuxtApp = useNuxtApp()
@@ -81,30 +79,19 @@ onBeforeUnmount(() => clear)
 
 <template>
   <div
-    class="nuxt-progress"
-    :class="{
-      'nuxt-progress-failed': !data.canSucceed,
-    }"
+    class="nuxt-progress fixed top-0 start-0 end-0 w-0 opacity-100 z-[9999]"
+    :class="['nuxt-progress-failed' && !data.canSucceed, tokens.loadingBar.height, tokens.loadingBar.backgroundImage]"
     :style="{
       width: `${data.percent}%`,
-      left: data.left,
-      height: `${props.height}px`,
+      insetInlineStart: data.left,
       opacity: data.show ? 1 : 0,
       backgroundSize: `${(100 / data.percent) * 100}% auto`,
     }"
   />
 </template>
 
-<style>
+<style scoped>
 .nuxt-progress {
-  position: fixed;
-  top: 0px;
-  left: 0px;
-  right: 0px;
-  width: 0%;
-  opacity: 1;
   transition: width 0.1s, height 0.4s, opacity 0.4s;
-  background: repeating-linear-gradient(to right, #00dc82 0%, #34cdfe 50%, #0047e1 100%);
-  z-index: 999999;
 }
 </style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -41,14 +41,17 @@ export default defineNuxtConfig({
   pages: true,
   modules: [
     envModules.studio,
+    '@nuxtjs/color-mode',
+    '@nuxtjs/tailwindcss',
     '@nuxt/content',
     updateModule as any
   ],
-  // components: [
-  //   { path: resolve('./components'), global: true },
+  components: [
+    { path: resolve('./components'), global: true },
+    { path: resolve('./components/app'), global: true },
   //   { path: resolve('./components/content'), global: true },
   //   { path: resolve('./components/data-entry'), global: true }
-  // ],
+  ],
   css: [
     resolve('./assets/main.css'),
   ],
diff --git a/package.json b/package.json
@@ -28,6 +28,8 @@
   "dependencies": {
     "@nuxt/content": "^2.7.0",
     "@nuxthq/studio": "^0.13.3",
+    "@nuxtjs/color-mode": "^3.3.0",
+    "@nuxtjs/tailwindcss": "^6.8.0",
     "@vueuse/core": "^10.2.1",
     "ufo": "^1.1.2"
   },
diff --git a/pinceau.tokens.config.ts b/pinceau.tokens.config.ts
@@ -0,0 +1,51 @@
+import theme from '@nuxt-themes/tokens/config'
+import { defineTheme } from 'pinceau'
+
+export default defineTheme({
+  alpine: {
+    $schema: {
+      title: 'All the configurable tokens from Alpine.',
+      tags: [
+        '@studio-icon carbon:blog'
+      ]
+    },
+    body: {
+      backgroundColor: {
+        initial: '{color.white}',
+        dark: '{color.black}'
+      },
+      color: {
+        initial: '{color.gray.800}',
+        dark: '{color.gray.200}'
+      }
+    },
+    backdrop: {
+      backgroundColor: {
+        initial: '#f4f4f5b3', // TODO: rgba({color.gray.100}, 0.7)
+        dark: '#18181bb3' // TODO: rgba({color.gray.900}, 0.7)
+      }
+    },
+    readableLine: '68ch'
+  },
+  elements: {
+    container: {
+      maxWidth: '64rem',
+      padding: {
+        mobile: '{space.6}',
+        xs: '{space.8}',
+        sm: '{space.12}',
+        md: '{space.16}'
+      }
+    }
+  },
+  color: {
+    white: '#FFFFFF',
+    // @ts-ignore
+    primary: theme.color.lightblue
+  },
+  prose: {
+    p: {
+      fontSize: '18px'
+    },
+  }
+})
diff --git a/tailwind.config.ts b/tailwind.config.ts
diff --git a/tokens.config.ts b/tokens.config.ts
