feat(design-system-utils): Enable color to accept a path

readme.md

@@ -353,6 +353,7 @@ This is a short-hand for the `tokens.get()` function.
 // Get values like this:
 tokens.color('bright') // #F9FAFB - the `base` key is the default, so it is not needed
 tokens.color('bright', 'dark')
+tokens.color('background.extra.dark') // Accepts a path (in this case the second `variant` argument is ignored)
 ```
 
 #### `tokens.brand()` - Get brand palette values

src/index.test.ts

@@ -228,6 +228,8 @@ describe('design-system-utils methods', () => {
   test('color', () => {
     expect(ds1.color('primary')).toBe('#181830')
     expect(ds1.color('secondary', 'light')).toBe('#fea04c')
+    expect(ds1.color('v2.secondary.light')).toBe('#fea04c')
+    expect(ds1.color('v2.secondary.deep.nested.light')).toBe('#fea04c')
 
     // Errors
     expect(() => ds1.color('text', 'dark')).toThrow(

src/index.ts

@@ -210,6 +210,8 @@ export default class DesignSystem<T extends System, K extends SystemOptions> {
   /**
    * color()
    * get a color from your color palette
+   * `hue`: can contain a path to be traversed (eg: 'base.background.light'),
+   * in that case the `variant` argument is ignored
    */
   public color(hue: string, variant: string = 'base'): string {
     const location = 'colors.colorPalette'
@@ -220,7 +222,11 @@ export default class DesignSystem<T extends System, K extends SystemOptions> {
       throw new Error(MissingParent(location))
     }
 
-    const value: string | undefined = this.ds.colors.colorPalette[hue][variant]
+    const isMultiPathHue = hue.split('.').length > 1;
+
+    const value: string | undefined = isMultiPathHue ? 
+      this.get(hue, this.ds.colors.colorPalette) : 
+      this.ds.colors.colorPalette[hue][variant]
 
     if (value === undefined) {
       throw new Error(MissingKey(location, hue, variant))

src/testData/ds1.ts

@@ -43,6 +43,17 @@ const DesignSystem1: MySystem = {
         light: '#fea04c',
         dark: '#d26401',
       },
+
+      v2: {
+        secondary: {
+          light: '#fea04c',
+          deep: {
+            nested: {
+              light: '#fea04c',
+            }
+          }
+        }
+      }
     },
 
     brand: {

src/types.ts

@@ -21,7 +21,7 @@ export interface SystemBreakpoints {
 
 export interface SystemColorPalette {
   [name: string]: {
-    [variant: string]: string
+    [variant: string]: string | object
   }
 }