chore: update test(update tailwind config, add media query example, fix error classNames)

Author: bre97-web

test/index.html

@@ -72,7 +72,7 @@
 
     <div
         id="container"
-        class="max-w-6xl px-4 md:px-16 lg:px-32 xl:mx-auto flex flex-col justify-center [&>h1]:headline-large [&>h1+*]:border [&>h1+*]:border-outline [&>h1+*]:shape-medium [&>h1+*]:bg-surface-container-lowest [&>h1]:mt-16 [&>h1]:mb-8 [&>h1+*]:p-4 [&>h1+*]:overflow-auto py-32"
+        class="max-w-6xl px-4 md:px-16 lg:px-32 xl:mx-auto flex flex-col justify-center [&>h1]:text-headline-large [&>h1+*]:border [&>h1+*]:border-outline [&>h1+*]:shape-medium [&>h1+*]:bg-surface-container-lowest [&>h1]:mt-16 [&>h1]:mb-8 [&>h1+*]:p-4 [&>h1+*]:overflow-auto py-32"
     >
         <p class="title-medium text-on-surface-variant">
             tailwindcss-material-tokens
@@ -107,6 +107,14 @@ <h1>Elevation</h1>
             <span class="w-24 h-24 inline-block elevation-5"></span>
         </div>
 
+        <h1>Border / Outline</h1>
+        <div class="flex gap-10 [&>span]:w-24 [&>span]:h-24 [&>span]:inline-block">
+            <span class="border border-outline">border-outline</span>
+            <span class="border border-outline-variant">border-outline-variant</span>
+            <span class="outline outline-outline">outline-outline</span>
+            <span class="outline outline-outline-variant">outline-outline-variant</span>
+        </div>
+
         <h1>Shape</h1>
         <div
             class="flex gap-10 items-stretch [&>div>span]:w-10 [&>div>span]:h-10 [&>div>span]:inline-block [&>div>span]:bg-primary">
@@ -171,7 +179,7 @@ <h1>Shape</h1>
 
         <h1>Color</h1>
         <div
-            class="flex flex-col gap-4 [&>div]:flex [&>div>span]:label-large [&>div>span]:min-w-20 [&>div>span]:h-10 [&>div>span]:inline-flex [&>div>span]:items-center [&>div>span]:justify-center">
+            class="flex flex-col gap-4 [&>div]:flex [&>div>span]:text-label-large [&>div>span]:min-w-20 [&>div>span]:h-10 [&>div>span]:inline-flex [&>div>span]:items-center [&>div>span]:justify-center">
             <div>
                 <span class="bg-primary text-on-primary">P</span>
                 <span class="bg-secondary text-on-secondary">S</span>
@@ -247,6 +255,15 @@ <h1>Motion</h1>
             <span class="bg-tertiary-fixed-dim move animation-easing-standard-accelerate">
             </span>
         </div>
+
+        <h1>Window Media Query</h1>
+        <div class="[&>span]:w-full [&>span]:h-10 [&>span]:grid [&>span]:items-center [&>span]:justify-center">
+            <span class="compact:bg-primary compact:text-on-primary">Compact [max-width: 600px]</span>
+            <span class="medium:bg-primary medium:text-on-primary">Medium [max-width: 8400px]</span>
+            <span class="expanded:bg-primary expanded:text-on-primary">Expanded [max-width: 1200px]</span>
+            <span class="large:bg-primary large:text-on-primary">Large [max-width: 1600px]</span>
+            <span class="extra-large:bg-primary extra-large:text-on-primary">ExtraLarge [min-width: 1600px]</span>
+        </div>
     </div>
 
 

test/tailwind.config.ts

@@ -1,15 +1,26 @@
-// import { provideAll } from '../src/index'
-import { provideAll } from '../build/index'
+import { provideBorder, provideColor, provideElevation, provideMotion, provideShape, provideTypography, provideWindowMediaQuery } from '../src/index'
 
-const all = provideAll()
+const color = provideColor({})
+const elevation = provideElevation({})
+const motion = provideMotion()
+const shape = provideShape()
+const typo = provideTypography()
+const border = provideBorder({})
+const mq = provideWindowMediaQuery()
 
 /** @type {import('tailwindcss').Config} */
 export default {
   content: [
     './index.html'
   ],
   plugins: [
-    ...all.allPlugins()
+    color.getPlugin(),
+    elevation.getPlugin(),
+    motion.getPlugin(),
+    shape.getPlugin(),
+    typo.getPlugin(),
+    border.getPlugin(),
+    mq.getPlugin()
   ],
 }