chore: apply linter, migrate to new color set

windicss · Mar 3, 2022 · d4bc312 · d4bc312
1 parent 114cd5c
commit d4bc312
Show file tree

Hide file tree

Showing 15 changed files with 143 additions and 131 deletions.
diff --git a/.vitepress/theme/components/global/ColorsPalette.vue b/.vitepress/theme/components/global/ColorsPalette.vue
@@ -19,22 +19,20 @@ const colors = [
   'violet',
   'fuchsia',
   'gray',
-  'blue-gray',
-  'cool-gray',
-  'warm-gray',
-  'true-gray',
+  'slate',
+  'stone',
+  'neutral',
   'light',
   'dark',
 ]
+
 </script>
 
 <template>
   <div class="my-8">
     <div v-for="color in colors" :key="color">
       <div class="relative mb-3 mt-6">
-        <span>
-          {{ color }}
-        </span>
+        <span>{{ color }}</span>
       </div>
       <div class="flex gap-2 mb-2 overflow-y-auto">
         <SingleColor v-for="level in levels" :key="level" :color="`bg-${color}-${level}`" />

diff --git a/.vitepress/theme/components/global/Playground.vue b/.vitepress/theme/components/global/Playground.vue
@@ -53,7 +53,12 @@ const {
       <Splitpanes :horizontal="!bpmd || layout === 'bottom'" class="w-full h-full default-theme">
         <Pane v-if="layout === 'left'" min-size="20" :size="bpmd ? 40 : 33">
           <PlayPreviewBlock class="h-full">
-            <IframePreview class="w-full h-full" :html="finalHTML" :css="generatedCSS" :dark="isDark" />
+            <IframePreview
+              class="w-full h-full"
+              :html="finalHTML"
+              :css="generatedCSS"
+              :dark="isDark"
+            />
           </PlayPreviewBlock>
         </Pane>
         <Pane min-size="20" :size="bpmd ? 60 : 66">
@@ -68,7 +73,12 @@ const {
         </Pane>
         <Pane v-if="layout !== 'left'" min-size="20" :size="bpmd ? 40 : 33">
           <PlayPreviewBlock class="h-full">
-            <IframePreview class="w-full h-full" :html="finalHTML" :css="generatedCSS" :dark="isDark" />
+            <IframePreview
+              class="w-full h-full"
+              :html="finalHTML"
+              :css="generatedCSS"
+              :dark="isDark"
+            />
           </PlayPreviewBlock>
         </Pane>
       </Splitpanes>
@@ -80,7 +90,7 @@ const {
 .playground {
   --c-bg: var(--windi-bg);
   --c-scrollbar: var(--windi-bc);
-  @apply h-140vh p-4 bg-blue-gray-100 dark:bg-dark-800;
+  @apply h-140vh p-4 bg-slate-100 dark:bg-dark-800;
 }
 @screen md {
   .playground {
@@ -101,10 +111,12 @@ const {
 }
 .splitpanes.default-theme .splitpanes__splitter {
   @apply bg-transparent border-transparent min-w-4 min-h-4;
-  &:before, &:after {
+  &:before,
+  &:after {
     @apply bg-gray-300 dark:bg-dark-300;
   }
-  &:hover:before, &:hover:after {
+  &:hover:before,
+  &:hover:after {
     @apply bg-gray-400 dark:bg-dark-100;
   }
 }

diff --git a/.vitepress/theme/components/global/playground/InlinePlayground.vue b/.vitepress/theme/components/global/playground/InlinePlayground.vue
@@ -185,21 +185,16 @@ onMounted(async() => {
     <div v-if="showTabs" class="flex tabs">
       <!-- <div class="tab" :class="{active: tab === 'code'}" @click="tab = 'code'">
       <carbon:code class="inline-block" />
-    </div> -->
+      </div>-->
       <div class="flex-auto" />
-      <div
-        class="tab"
-        title="Toggle CSS"
-        :class="{active: showCSS}"
-        @click="showCSS = !showCSS"
-      >
+      <div class="tab" title="Toggle CSS" :class="{ active: showCSS }" @click="showCSS = !showCSS">
         <uil:css3-simple class="inline-block" />
       </div>
       <div
         v-if="enableConfig"
         class="tab"
         title="Toggle Configurations"
-        :class="{active: showConfig}"
+        :class="{ active: showConfig }"
         @click="showConfig = !showConfig"
       >
         <carbon:settings-adjust class="inline-block" />
@@ -208,17 +203,14 @@ onMounted(async() => {
         v-if="enablePreview"
         class="tab"
         title="Toggle Preview"
-        :class="{active: showPreview}"
+        :class="{ active: showPreview }"
         @click="showPreview = !showPreview"
       >
         <carbon:camera class="inline-block" />
       </div>
     </div>
     <div class="border border-$windi-bc rounded relative">
-      <div
-        class="grid w-full"
-        style="grid-template-columns: 1fr max-content;"
-      >
+      <div class="grid w-full" style="grid-template-columns: 1fr max-content;">
         <div class="flex-auto flex flex-col overflow-auto">
           <div>
             <textarea
@@ -243,10 +235,7 @@ onMounted(async() => {
               />
             </div>
           </div>
-          <div
-            v-show="showCSS"
-            class="text-sm border-t border-$windi-bc"
-          >
+          <div v-show="showCSS" class="text-sm border-t border-$windi-bc">
             <div class="ml-1 p-2 text-sm opacity-50 flex">
               <span>CSS</span>
               <div class="flex-auto" />
@@ -255,19 +244,25 @@ onMounted(async() => {
                 <carbon:circle-packing v-if="mode === 'compile'" />
                 <carbon:chart-bubble-packed v-else />
               </div>
-              <div v-if="showCopy" class="icon-button ml-3" :class="{ active: copied }" title="Copy" @click="copy()">
+              <div
+                v-if="showCopy"
+                class="icon-button ml-3"
+                :class="{ active: copied }"
+                title="Copy"
+                @click="copy()"
+              >
                 <carbon:checkmark-outline v-if="copied" class="text-green-500" />
                 <carbon:copy v-else />
               </div>
             </div>
             <!-- eslint-disable-next-line vue/no-v-html -->
-            <pre class="language-css !bg-transparent max-h-30em !px-4 !py-4" v-html="highlightedCSS" />
+            <pre
+              class="language-css !bg-transparent max-h-30em !px-4 !py-4"
+              v-html="highlightedCSS"
+            />
           </div>
         </div>
-        <div
-          v-if="showPreview"
-          class="border-l border-$windi-bc w-10em p-3 min-h-40"
-        >
+        <div v-if="showPreview" class="border-l border-$windi-bc w-10em p-3 min-h-40">
           <preview-box v-bind="iframeData" :dark="isDark" />
         </div>
       </div>
@@ -277,7 +272,7 @@ onMounted(async() => {
 
 <style lang="postcss">
 .inline-playground .tabs .tab {
-  @apply px-3 py-1 mx-1 cursor-pointer bg-gray-50 dark:bg-true-gray-800 text-gray-400 opacity-75
+  @apply px-3 py-1 mx-1 cursor-pointer bg-gray-50 dark:bg-neutral-800 text-gray-400 opacity-75
     border-t border-l border-r rounded-tr rounded-tl border-$windi-bc;
 }
 .inline-playground .tabs .tab.active {
@@ -287,8 +282,7 @@ onMounted(async() => {
   @apply px-3 py-2 h-auto bg-transparent font-mono text-sm;
 }
 .icon-button {
-  @apply
-    flex items-center text-1.05rem border-0
+  @apply flex items-center text-1.05rem border-0
     focus:outline-none text-$c-text
     opacity-80 cursor-pointer select-none
     hover:opacity-100;

diff --git a/.vitepress/theme/components/molecules/LastUpdated.vue b/.vitepress/theme/components/molecules/LastUpdated.vue
@@ -19,7 +19,7 @@ const datetime = ref('')
 onMounted(() => {
   // locale string might be different based on end user
   // and will lead to potential hydration mismatch if calculated at build time
-  datetime.value = new Date(page.value.lastUpdated).toLocaleString('en-US')
+  datetime.value = new Date(page.value.lastUpdated || '').toLocaleString('en-US')
 })
 </script>
 

diff --git a/.vitepress/theme/components/molecules/NextAndPrevLinks.vue b/.vitepress/theme/components/molecules/NextAndPrevLinks.vue
@@ -26,10 +26,9 @@ const { hasLinks, prev, next } = useNextAndPrevLinks()
 
 <style scoped lang="postcss">
 .nav-link {
-  @apply
-    inline-flex items-center px-1 md:px-3
+  @apply inline-flex items-center px-1 md:px-3
     font-semibold
-    text-cool-gray-500 dark:text-gray-400
+    text-gray-500 dark:text-gray-400
     hover:(text-gray-800 dark:text-white);
 }
 </style>
diff --git a/.vitepress/theme/components/molecules/play/PlayPreviewToolbar.vue b/.vitepress/theme/components/molecules/play/PlayPreviewToolbar.vue
@@ -1,18 +1,32 @@
 <template>
   <div class="absolute bottom-0 w-full">
-    <div class="bg-blue-gray-100 dark:bg-dark-700 m-2 rounded-md p-2 flex items-center justify-center">
-      <select id="devices" name="devices" class="bg-transparent appearance-none relative text-xs dark:text-gray-200 focus:outline-none">
+    <div class="bg-slate-100 dark:bg-dark-700 m-2 rounded-md p-2 flex items-center justify-center">
+      <select
+        id="devices"
+        name="devices"
+        class="bg-transparent appearance-none relative text-xs dark:text-gray-200 focus:outline-none"
+      >
         <option value="ipad_pro">
           iPad Pro
         </option>
       </select>
-      <svg class="fill-current w-4 h-4" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
+      <svg
+        class="fill-current w-4 h-4"
+        xmlns="http://www.w3.org/2000/svg"
+        version="1.1"
+        viewBox="0 0 24 24"
+      >
+        <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
+      </svg>
       <div class="flex items-center text-xs mx-4">
         <input id="width" name="width" class="number-input" value="1366">
         <span class="mx-1">×</span>
         <input id="height" name="height" class="number-input" value="1024">
       </div>
-      <select id="ratio" class="bg-transparent text-xs text-gray-800 dark:text-gray-100 appearance-none focus:outline-none">
+      <select
+        id="ratio"
+        class="bg-transparent text-xs text-gray-800 dark:text-gray-100 appearance-none focus:outline-none"
+      >
         <option value="50">
           50%
         </option>
@@ -29,9 +43,25 @@
           150%
         </option>
       </select>
-      <svg class="fill-current w-4 h-4 -ml-1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
+      <svg
+        class="fill-current w-4 h-4 -ml-1"
+        xmlns="http://www.w3.org/2000/svg"
+        version="1.1"
+        viewBox="0 0 24 24"
+      >
+        <path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
+      </svg>
       <button class="ml-3 focus:outline-none hover:text-gray-600">
-        <svg xmlns="http://www.w3.org/2000/svg" class="w-3 h-3 fill-current" version="1.1" viewBox="0 0 24 24"><path d="M7.5,21.5C4.25,19.94 1.91,16.76 1.55,13H0.05C0.56,19.16 5.71,24 12,24L12.66,23.97L8.85,20.16M14.83,21.19L2.81,9.17L9.17,2.81L21.19,14.83M10.23,1.75C9.64,1.16 8.69,1.16 8.11,1.75L1.75,8.11C1.16,8.7 1.16,9.65 1.75,10.23L13.77,22.25C14.36,22.84 15.31,22.84 15.89,22.25L22.25,15.89C22.84,15.3 22.84,14.35 22.25,13.77L10.23,1.75M16.5,2.5C19.75,4.07 22.09,7.24 22.45,11H23.95C23.44,4.84 18.29,0 12,0L11.34,0.03L15.15,3.84L16.5,2.5Z" /></svg>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="w-3 h-3 fill-current"
+          version="1.1"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M7.5,21.5C4.25,19.94 1.91,16.76 1.55,13H0.05C0.56,19.16 5.71,24 12,24L12.66,23.97L8.85,20.16M14.83,21.19L2.81,9.17L9.17,2.81L21.19,14.83M10.23,1.75C9.64,1.16 8.69,1.16 8.11,1.75L1.75,8.11C1.16,8.7 1.16,9.65 1.75,10.23L13.77,22.25C14.36,22.84 15.31,22.84 15.89,22.25L22.25,15.89C22.84,15.3 22.84,14.35 22.25,13.77L10.23,1.75M16.5,2.5C19.75,4.07 22.09,7.24 22.45,11H23.95C23.44,4.84 18.29,0 12,0L11.34,0.03L15.15,3.84L16.5,2.5Z"
+          />
+        </svg>
       </button>
     </div>
   </div>

diff --git a/.vitepress/theme/components/molecules/play/PlayToolsDropdown.vue b/.vitepress/theme/components/molecules/play/PlayToolsDropdown.vue
@@ -20,7 +20,9 @@ onUnmounted(() => {
 <template>
   <div class="relative hidden md:block" @click.stop="toggleShow()">
     <button class="focus:outline-none">
-      <uil:angle-down class="bg-blue-gray-100 hover:bg-blue-gray-200 rounded w-6 h-6 text-gray-700 dark:bg-dark-300 dark:text-gray-100 dark:hover:bg-dark-800" />
+      <uil:angle-down
+        class="bg-slate-100 hover:bg-slate-200 rounded w-6 h-6 text-gray-700 dark:bg-dark-300 dark:text-gray-100 dark:hover:bg-dark-800"
+      />
     </button>
     <div v-if="show" class="dropdown-model">
       <span>Components</span>
@@ -41,8 +43,7 @@ onUnmounted(() => {
 
 <style scoped lang="postcss">
 .dropdown-model {
-  @apply
-  grid gap-2 p-1.5 px-2
+  @apply grid gap-2 p-1.5 px-2
   absolute top-8 right-0
   bg-white dark:bg-dark-700
   rounded-lg border border-$windi-bc;

diff --git a/.vitepress/theme/components/molecules/sidebar/SidebarBackground.vue b/.vitepress/theme/components/molecules/sidebar/SidebarBackground.vue
@@ -7,16 +7,7 @@ import { openSideBar } from '@/logics/sideBar'
   <transition name="fade">
     <div
       v-if="openSideBar"
-      class="
-        fixed top-0 left-0 z-0
-        w-full h-full
-        bg-cool-gray-200
-        pointer-events-auto
-        backdrop-filter backdrop-blur-sm
-        dark:bg-dark-800 dark:bg-opacity-80
-        bg-opacity-50
-        lg:hidden
-      "
+      class="fixed top-0 left-0 z-0 w-full h-full bg-gray-200 pointer-events-auto backdrop-filter backdrop-blur-sm dark:bg-dark-800 dark:bg-opacity-80 bg-opacity-50 lg:hidden"
       @click="openSideBar = false"
     />
   </transition>