refactor: use providers instead of static methods

Author: kai-orion

src/deprecated/ColorTokens.ts

@@ -1,5 +1,9 @@
 import plugin from 'tailwindcss/plugin.js'
 
+/**
+ * @deprecated
+ * Use provideColor() instead of Color
+ */
 export class Color {
     public static colorPrefix = 'md-sys-color'
     public static setDefaultVariantPrefix(prefix: string) {
@@ -205,7 +209,7 @@ export class Color {
                 'color': `var(--${this.colorPrefix}-shadow, #000000)`,
             },
         })
-    
+
         /**
          * Border
          */
@@ -217,7 +221,7 @@ export class Color {
                 'border-color': `var(--${this.colorPrefix}-outline-variant, #c2c6d6)`,
             },
         })
-    
+
         /**
          * Containers, background-color only.
          */
@@ -238,7 +242,7 @@ export class Color {
                 'background-color': `var(--${this.colorPrefix}-surface-container-highest, #dfe2ef)`,
             },
         })
-    
+
         /**
          * Fixed colors
          */

src/tokens/color.ts renamed to src/deprecated/color.ts

@@ -1,5 +1,9 @@
 import plugin from 'tailwindcss/plugin.js'
 
+/**
+ * @deprecated
+ * Use provideElevation() instead of Elevation
+ */
 export class Elevation {
 
     public static readonly plugin = plugin(({ addUtilities }) => {
@@ -25,4 +29,4 @@ export class Elevation {
         })
     })
 
-}
+}

src/tokens/elevation.ts renamed to src/deprecated/elevation.ts

@@ -1,5 +1,9 @@
 import plugin from 'tailwindcss/plugin'
 
+/**
+ * @deprecated
+ * Use provideMotion() instead of Motion
+ */
 export class Motion {
     private static motionPrefix = 'md-sys-motion'
     public static setDefaultVariantPrefix(prefix: string) {
@@ -106,4 +110,4 @@ export class Motion {
         })
     })
 
-}
+}

src/tokens/motion.ts renamed to src/deprecated/motion.ts

@@ -1,5 +1,9 @@
 import plugin from 'tailwindcss/plugin'
 
+/**
+ * @deprecated
+ * Use provideShape() instead of Shape
+ */
 export class Shape {
 
     public static readonly plugin = plugin(({ addUtilities }) => {
@@ -154,4 +158,4 @@ export class Shape {
         })
     })
 
-}
+}

src/tokens/shape.ts renamed to src/deprecated/shape.ts

@@ -1,13 +1,17 @@
 import plugin from 'tailwindcss/plugin.js'
 
+/**
+ * @deprecated
+ * Use provideTypography() instead of Typography
+ */
 export class Typography {
 
     private static typescalePrefix = 'md-sys-typescale'
     public static setDefaultVariantPrefix(prefix: string) {
         this.typescalePrefix = prefix
         return this
     }
-    
+
     public static readonly plugin = plugin(({ addComponents }) => {
         addComponents({
             '.display-large': {
@@ -106,5 +110,5 @@ export class Typography {
             },
         })
     })
-    
-}
+
+}

src/tokens/typography.ts renamed to src/deprecated/typography.ts

@@ -1,6 +1,10 @@
 /**
  * @deprecated
  */
-export * from './deprecated/ColorTokens'
+export * from './deprecated/color'
+export * from './deprecated/elevation'
+export * from './deprecated/motion'
+export * from './deprecated/shape'
+export * from './deprecated/typography'
 
 export * from './tokens/index'

src/index.ts

@@ -1,6 +1,7 @@
 
-export * from './color'
-export * from './elevation'
-export * from './shape'
-export * from './motion'
-export * from './typography'
+export * from './provide-all'
+export * from './provide-color'
+export * from './provide-elevation'
+export * from './provide-motion'
+export * from './provide-shape'
+export * from './provide-typography'

src/tokens/index.ts

@@ -0,0 +1,36 @@
+import { provideColor, type TColorProviderConstructor } from "./provide-color";
+import { provideElevation, type TElevationProviderConstructor } from "./provide-elevation";
+import { provideMotion, type TMotionProviderConstructor } from "./provide-motion";
+import { provideShape, type TShapeProviderConstructor } from "./provide-shape";
+import { provideTypography, type TTypographyProviderConstructor } from "./provide-typography";
+
+export function provideAll(params: {
+    color?: TColorProviderConstructor,
+    elevation?: TElevationProviderConstructor,
+    motion?: TMotionProviderConstructor,
+    shape?: TShapeProviderConstructor,
+    typography?: TTypographyProviderConstructor,
+} = {
+        color: { prefix: 'md-sys-color' },
+        elevation: { shadowToken: 'md-sys-color-shadow' },
+        motion: { prefix: 'md-sys-motion' },
+        shape: { prefix: 'md-sys-shape', defaultUnit: '1' },
+        typography: { prefix: 'md-sys-typescale' }
+    }) {
+    return ({
+        color: provideColor(params.color),
+        elevation: provideElevation(params.elevation),
+        motion: provideMotion(params.motion),
+        shape: provideShape(params.shape),
+        typography: provideTypography(params.typography),
+        allPlugins() {
+            return ([
+                this.color.getPlugin(),
+                this.elevation.getPlugin(),
+                this.motion.getPlugin(),
+                this.shape.getPlugin(),
+                this.typography.getPlugin(),
+            ])
+        }
+    })
+}