@openedx/paragon 23.0.0-alpha.3 → 23.0.0-alpha.4

package/tokens/src/themes/light/components/Image.json

@@ -1,17 +1,20 @@
 {
   "color": {
+    "$type": "color",
     "image": {
-      "figure-caption": { "value": "{color.gray.500}", "type": "color", "source": "$figure-caption-color" },
+      "figure-caption": { "source": "$figure-caption-color", "$value": "{color.gray.500}" },
       "thumbnail": {
-        "bg": { "value": "{color.body.bg}", "type": "color", "source": "$thumbnail-bg" },
-        "border": { "value": "{color.gray.200}", "type": "color", "source": "$thumbnail-border-color" }
+        "bg": { "source": "$thumbnail-bg", "$value": "{color.body.bg}" },
+        "border": { "source": "$thumbnail-border-color", "$value": "{color.gray.200}"
+        }
       }
     }
   },
   "elevation": {
+    "$type": "shadow",
     "image": {
       "thumbnail": {
-        "box-shadow": { "value": "none", "type": "shadow", "source": "$thumbnail-box-shadow" }
+        "box-shadow": { "source": "$thumbnail-box-shadow", "$value": "none" }
       }
     }
   }

package/tokens/src/themes/light/components/Menu.json

@@ -1,28 +1,30 @@
 {
   "elevation": {
+    "$type": "shadow",
     "menu": {
-      "box-shadow": { "value": "{elevation.box-shadow.base}", "type": "shadow", "source": "$menu-box-shadow" }
+      "box-shadow": { "source": "$menu-box-shadow", "$value": "{elevation.box-shadow.base}" }
     }
   },
   "color": {
+    "$type": "color",
     "menu": {
-      "bg": { "value": "{color.white}", "type": "color", "source": "$menu-bg" },
+      "bg": { "source": "$menu-bg", "$value": "{color.white}" },
       "item": {
-        "color": { "value": "{color.body.base}", "type": "color", "source": "$menu-item-color" },
-        "bg": { "value": "transparent", "type": "color", "source": "$menu-item-bg" },
-        "border": { "value": "{color.menu.item.bg}", "type": "color", "source": "$menu-item-border-color" },
+        "color": { "source": "$menu-item-color", "$value": "{color.body.base}" },
+        "bg": { "source": "$menu-item-bg", "$value": "transparent" },
+        "border": { "source": "$menu-item-border-color", "$value": "{color.menu.item.bg}" },
         "hover": {
-          "color": { "value": "{color.btn.text.tertiary}", "type": "color", "source": "$menu-item-hover-color" },
-          "bg": { "value": "{color.btn.hover.bg.tertiary}", "type": "color", "source": "$menu-item-hover-bg" },
-          "border": { "value": "{color.menu.item.bg}", "type": "color", "source": "$menu-item-hover-border-color" }
+          "color": { "source": "$menu-item-hover-color", "$value": "{color.btn.text.tertiary}" },
+          "bg": { "source": "$menu-item-hover-bg", "$value": "{color.btn.hover.bg.tertiary}" },
+          "border": { "source": "$menu-item-hover-border-color", "$value": "{color.menu.item.bg}" }
         },
         "focus": {
-          "bg": { "value": "{color.btn.active.bg.tertiary}", "type": "color", "source": "$menu-item-focus-bg" }
+          "bg": { "source": "$menu-item-focus-bg", "$value": "{color.btn.active.bg.tertiary}" }
         }
       },
       "select": {
         "btn-link": {
-          "color": { "value": "{color.primary.500}", "type": "color", "source": "$menu-select-btn-link-color" }
+          "color": { "source": "$menu-select-btn-link-color", "$value": "{color.primary.500}" }
         }
       }
     }

package/tokens/src/themes/light/components/Modal.json

@@ -1,29 +1,39 @@
 {
   "color": {
+    "$type": "color",
     "modal": {
       "content": {
-        "bg": { "value": "{color.bg.base}", "type": "color", "source": "$modal-content-bg" },
+        "bg": { "source": "$modal-content-bg", "$value": "{color.bg.base}" },
         "border": {
-          "value": "{color.black}",
-          "type": "color",
           "source": "$modal-content-border-color",
-          "modify": [{
-            "type": "alpha",
-            "amount": 0.2
-          }]
+          "modify": [{ "type": "alpha", "amount": 0.2 }],
+          "$value": "{color.black}"
         }
       },
-      "backdrop-bg": { "value": "{color.black}", "type": "color", "source": "$modal-backdrop-bg" }
+      "backdrop-bg": { "source": "$modal-backdrop-bg", "$value": "{color.black}" }
     }
   },
   "elevation": {
+    "$type": "shadow",
     "modal": {
       "content": {
         "box-shadow": {
           "sm-up": {
-            "value": "0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15)",
-            "type": "shadow",
-            "source": "$modal-content-box-shadow-sm-up"
+            "source": "$modal-content-box-shadow-sm-up",
+            "$value": [
+              {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": "10px",
+                "blur": "20px"
+              },
+              {
+                "color": "rgba(0, 0, 0, .15)",
+                "offsetX": "0",
+                "offsetY": "8px",
+                "blur": "20px"
+              }
+            ]
           }
         }
       }
@@ -31,7 +41,7 @@
   },
   "other": {
     "modal": {
-      "opacity": { "value": ".5", "source": "$modal-backdrop-opacity" }
+      "opacity": { "source": "$modal-backdrop-opacity", "$value": ".5" }
     }
   }
 }

package/tokens/src/themes/light/components/Nav.json

@@ -1,84 +1,99 @@
 {
   "border-color": {
+    "$type": "color",
     "nav": {
       "tabs-link": {
         "border": {
-          "active": {
-            "value": "{color.primary.500}",
-            "type": "color",
-            "source": "$nav-tabs-link-active-border-color"
-          },
+          "active": { "source": "$nav-tabs-link-active-border-color", "$value": "{color.primary.500}" },
           "hover": {
-            "value": "transparent transparent {color.nav.tabs.base.border.base}",
-            "type": "color",
-            "source": "$nav-tabs-link-hover-border-color"
+            "source": "$nav-tabs-link-hover-border-color",
+            "$value": {
+              "top": "transparent",
+              "right": "transparent",
+              "bottom": "{color.nav.tabs.base.border.base}",
+              "left": "transparent"
+            }
           },
           "focus": {
-            "value": "{color.nav.tabs.base.link.active.text}",
-            "type": "color",
-            "source": "$nav-tabs-link-focus-border-color"
+            "source": "$nav-tabs-link-focus-border-color",
+            "$value": "{color.nav.tabs.base.link.active.text}"
           }
         }
       }
     }
   },
   "color": {
+    "$type": "color",
     "nav": {
       "link": {
         "text": {
-          "base": { "value": "{color.gray.700}", "type": "color", "source": "$nav-link-color" },
-          "disabled": { "value": "{color.gray.300}", "type": "color", "source": "$nav-link-disabled-color" }
+          "base": { "source": "$nav-link-color", "$value": "{color.gray.700}" },
+          "disabled": { "source": "$nav-link-disabled-color", "$value": "{color.gray.300}" }
         },
-        "border": { "value": "transparent", "type": "color", "source": "$nav-tabs-link-border-color" }
+        "border": { "source": "$nav-tabs-link-border-color", "$value": "transparent" }
       },
       "tabs": {
         "base": {
           "text": {
-            "disabled": { "value": "{color.nav.tabs.base.bg.hover}", "type": "color", "source": "$nav-tabs-disabled-bg" }
-          },
-          "bg": {
-            "hover": { "value": "transparent", "type": "color", "source": "$nav-tabs-hover-bg" }
+            "disabled": { "source": "$nav-tabs-disabled-bg", "$value": "{color.nav.tabs.base.bg.hover}" }
           },
+          "bg": { "hover": { "source": "$nav-tabs-hover-bg", "$value": "transparent" } },
           "border": {
-            "base": { "value": "{color.light.400}", "type": "color", "source": "$nav-tabs-border-color" },
-            "focus": { "value": "{color.nav.tabs.base.bg.hover}", "type": "color", "source": "$nav-tabs-focus-border-color" }
+            "base": { "source": "$nav-tabs-border-color", "$value": "{color.light.400}" },
+            "focus": { "source": "$nav-tabs-focus-border-color", "$value": "{color.nav.tabs.base.bg.hover}" }
           },
           "link": {
-            "hover": {
-              "bg": { "value": "{color.light.400}", "type": "color", "source": "$nav-tabs-link-hover-bg" }
-            },
+            "hover": { "bg": { "source": "$nav-tabs-link-hover-bg", "$value": "{color.light.400}" } },
             "active": {
-              "text": { "value": "{color.primary.500}", "type": "color", "source": "$nav-tabs-link-active-color" },
-              "bg": { "value": "transparent", "type": "color", "source": "$nav-tabs-link-active-bg" }
+              "text": { "source": "$nav-tabs-link-active-color", "$value": "{color.primary.500}" },
+              "bg": { "source": "$nav-tabs-link-active-bg", "$value": "transparent" }
             },
             "disabled": {
-              "border": { "value": "{color.nav.link.border}", "type": "color", "source": "$nav-tabs-link-disabled-border-color" }
+              "border": { "source": "$nav-tabs-link-disabled-border-color", "$value": "{color.nav.link.border}" }
             }
           }
         },
         "inverse": {
           "link": {
-            "text": {
-              "base": { "value": "{color.white}", "type": "color", "source": "$nav-inverse-tabs-link-color" }
-            },
+            "text": { "base": { "source": "$nav-inverse-tabs-link-color", "$value": "{color.white}" } },
             "border": {
-              "bottom": { "value": "{color.dark.300}", "type": "color", "source": "$nav-inverse-tabs-link-border-bottom-color" },
-              "active": { "value": "{color.nav.tabs.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-tabs-link-active-border-color" }
+              "bottom": {
+                "source": "$nav-inverse-tabs-link-border-bottom-color",
+                "$value": "{color.dark.300}"
+              },
+              "active": {
+                "source": "$nav-inverse-tabs-link-active-border-color",
+                "$value": "{color.nav.tabs.inverse.link.text.base}"
+              }
             },
             "bg": {
-              "hover": { "value": "{color.nav.tabs.inverse.link.border.bottom}", "type": "color", "source": "$nav-inverse-tabs-link-hover-bg" },
-              "active": { "value": "{color.nav.tabs.inverse.link.bg.hover}", "type": "color", "source": "$nav-inverse-tabs-link-active-bg" },
-              "focus": { "value": "{color.nav.tabs.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-tabs-link-focus-bg" },
+              "hover": {
+                "source": "$nav-inverse-tabs-link-hover-bg",
+                "$value": "{color.nav.tabs.inverse.link.border.bottom}"
+              },
+              "active": {
+                "source": "$nav-inverse-tabs-link-active-bg",
+                "$value": "{color.nav.tabs.inverse.link.bg.hover}"
+              },
+              "focus": {
+                "source": "$nav-inverse-tabs-link-focus-bg",
+                "$value": "{color.nav.tabs.inverse.link.text.base}"
+              },
               "active-hover": {
-                "value": "transparent",
-                "type": "color",
-                "source": "$nav-inverse-tabs-link-active-hover-bg"
+                "source": "$nav-inverse-tabs-link-active-hover-bg",
+                "$value": "transparent"
               }
             },
-          "tab-content-color": { "value": "{color.nav.tabs.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-tabs-tab-content-color" }
+            "tab-content-color": {
+              "source": "$nav-inverse-tabs-tab-content-color",
+              "$value": "{color.nav.tabs.inverse.link.text.base}"
+            }
           },
           "dropdown": {
-            "border": { "value": "{color.nav.tabs.inverse.link.bg.active-hover}", "type": "color", "source": "$nav-inverse-tabs-dropdown-border-color" }
+            "border": {
+              "source": "$nav-inverse-tabs-dropdown-border-color",
+              "$value": "{color.nav.tabs.inverse.link.bg.active-hover}"
+            }
           }
         }
       },
@@ -86,80 +101,53 @@
         "base": {
           "link": {
             "active": {
-              "text": { "value": "{color.active}", "type": "color", "source": "$nav-pills-link-active-color" },
-              "bg": { "value": "{color.bg.active}", "type": "color", "source": "$nav-pills-link-active-bg" },
-              "border": { "value": "{color.white}", "type": "color", "source": "$nav-pills-link-active-border-color" }
+              "text": { "source": "$nav-pills-link-active-color", "$value": "{color.active}" },
+              "bg": { "source": "$nav-pills-link-active-bg", "$value": "{color.bg.active}" },
+              "border": { "source": "$nav-pills-link-active-border-color", "$value": "{color.white}" }
             },
-            "border": { "value": "{color.nav.tabs.base.border.base}", "type": "color", "source": "$nav-pills-link-border-color" }
+            "border": { "source": "$nav-pills-link-border-color", "$value": "{color.nav.tabs.base.border.base}" }
           }
         },
         "inverse": {
           "link": {
             "text": {
-              "base": { "value": "{color.white}", "type": "color", "source": "$nav-inverse-pills-link-color" },
-              "focus": { "value": "{color.nav.pills.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-pills-link-focus-color" },
-              "active": { "value": "{color.primary.500}", "type": "color", "source": "$nav-inverse-pills-link-active-color" },
-              "hover": { "value": "{color.nav.pills.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-pills-link-hover-color" },
-              "active-focus": {
-                "value": "{color.nav.pills.inverse.link.text.active}",
-                "type": "color",
-                "source": "$nav-inverse-pills-link-active-focus-color"
-              },
-              "active-hover": {
-                "value": "{color.nav.pills.inverse.link.text.base}",
-                "type": "color",
-                "source": "$nav-inverse-pills-link-active-hover-color"
-              }
+              "base": { "source": "$nav-inverse-pills-link-color", "$value": "{color.white}" },
+              "focus": { "source": "$nav-inverse-pills-link-focus-color", "$value": "{color.nav.pills.inverse.link.text.base}" },
+              "active": { "source": "$nav-inverse-pills-link-active-color", "$value": "{color.primary.500}" },
+              "hover": { "source": "$nav-inverse-pills-link-hover-color", "$value": "{color.nav.pills.inverse.link.text.base}" },
+              "active-focus": { "source": "$nav-inverse-pills-link-active-focus-color", "$value": "{color.nav.pills.inverse.link.text.active}" },
+              "active-hover": { "source": "$nav-inverse-pills-link-active-hover-color", "$value": "{color.nav.pills.inverse.link.text.base}" }
             },
             "border": {
-              "base": { "value": "{color.dark.300}", "type": "color", "source": "$nav-inverse-pills-link-border-color" },
-              "active": { "value": "{color.nav.pills.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-pills-link-active-border-color" },
-              "active-hover": {
-                "value": "{color.nav.pills.inverse.link.border.base}",
-                "type": "color",
-                "source": "$nav-inverse-pills-link-active-hover-border-color"
-              },
-              "active-focus": {
-                "value": "{color.primary.base}",
-                "type": "color",
-                "source": "$nav-inverse-pills-link-active-focus-border-color"
-              },
-              "focus-hover": {
-                "value": "{color.nav.pills.inverse.link.border.active-focus}",
-                "type": "color",
-                "source": "$nav-inverse-pills-link-active-focus-hover-border-color"
-              }
+              "base": { "source": "$nav-inverse-pills-link-border-color", "$value": "{color.dark.300}" },
+              "active": { "source": "$nav-inverse-pills-link-active-border-color", "$value": "{color.nav.pills.inverse.link.text.base}" },
+              "active-hover": { "source": "$nav-inverse-pills-link-active-hover-border-color", "$value": "{color.nav.pills.inverse.link.border.base}" },
+              "active-focus": { "source": "$nav-inverse-pills-link-active-focus-border-color", "$value": "{color.primary.base}" },
+              "focus-hover": { "source": "$nav-inverse-pills-link-active-focus-hover-border-color", "$value": "{color.nav.pills.inverse.link.border.active-focus}" }
             },
             "bg": {
-              "hover": { "value": "{color.nav.pills.inverse.link.border.base}", "type": "color", "source": "$nav-inverse-pills-link-hover-bg" },
-              "active": { "value": "{color.nav.pills.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-pills-link-active-bg" },
-              "active-hover": {
-                "value": "{color.nav.pills.inverse.link.border.base}",
-                "type": "color",
-                "source": "$nav-inverse-pills-link-active-hover-bg"
-              },
-              "active-focus-hover": {
-                "value": "{color.nav.pills.inverse.link.text.base}",
-                "type": "color",
-                "source": "$nav-inverse-pills-link-active-focus-hover-bg"
-              }
+              "hover": { "source": "$nav-inverse-pills-link-hover-bg", "$value": "{color.nav.pills.inverse.link.border.base}" },
+              "active": { "source": "$nav-inverse-pills-link-active-bg", "$value": "{color.nav.pills.inverse.link.text.base}" },
+              "active-hover": { "source": "$nav-inverse-pills-link-active-hover-bg", "$value": "{color.nav.pills.inverse.link.border.base}" },
+              "active-focus-hover": { "source": "$nav-inverse-pills-link-active-focus-hover-bg", "$value": "{color.nav.pills.inverse.link.text.base}" }
             }
           },
-          "tab-content-color": { "value": "{color.nav.pills.inverse.link.text.base}", "type": "color", "source": "$nav-inverse-pills-tab-content-color" }
+          "tab-content-color": {
+            "source": "$nav-inverse-pills-tab-content-color",
+            "$value": "{color.nav.pills.inverse.link.text.base}"
+          }
         }
       },
-      "divider": { "value": "{color.gray.100}", "type": "color", "source": "$nav-divider-color" },
+      "divider": { "source": "$nav-divider-color", "$value": "{color.gray.100}" },
       "dark": {
-        "value": "{color.white}",
-        "type": "color",
         "source": "$navbar-dark-color",
-        "modify": [{ "type": "alpha", "amount": 0.5 }]
+        "modify": [{ "type": "alpha", "amount": 0.5 }],
+        "$value": "{color.white}"
       },
       "light": {
-        "value": "{color.black}",
-        "type": "color",
         "source": "$navbar-light-color",
-        "modify": [{ "type": "alpha", "amount": 0.5 }]
+        "modify": [{ "type": "alpha", "amount": 0.5 }],
+        "$value": "{color.black}"
       }
     }
   }

package/tokens/src/themes/light/components/Navbar.json

@@ -1,133 +1,89 @@
 {
   "color": {
+    "$type": "color",
     "navbar": {
       "dark": {
         "text": {
-          "value": "{color.white}",
-          "type": "color",
           "source": "$navbar-dark-color",
-          "modify": [{
-            "type": "alpha",
-            "amount": 0.5
-          }]
+          "modify": [{ "type": "alpha", "amount": 0.5 }],
+          "$value": "{color.white}"
         },
         "hover": {
-          "value": "{color.white}",
-          "type": "color",
           "source": "$navbar-dark-hover-color",
-          "modify": [{
-            "type": "alpha",
-            "amount": 0.75
-          }]
+          "modify": [{ "type": "alpha", "amount": 0.75 }],
+          "$value": "{color.white}"
         },
-        "active": { "value": "{color.active}", "type": "color", "source": "$navbar-dark-active-color" },
+        "active": { "source": "$navbar-dark-active-color", "$value": "{color.active}" },
         "disabled": {
-          "value": "{color.white}",
-          "type": "color",
           "source": "$navbar-dark-disabled-color",
-          "modify": [{
-            "type": "alpha",
-            "amount": 0.25
-          }]
+          "modify": [{ "type": "alpha", "amount": 0.25 }],
+          "$value": "{color.white}"
         },
         "toggler": {
           "border": {
-            "value": "{color.white}",
-            "type": "color",
             "source": "$navbar-dark-toggler-border-color",
-            "modify": [{
-              "type": "alpha",
-              "amount": 0.1
-            }]
+            "modify": [{ "type": "alpha", "amount": 0.1 }],
+            "$value": "{color.white}"
           }
         },
         "brand": {
-          "text": { "value": "{color.navbar.dark.active}", "type": "color", "source": "$navbar-dark-brand-color" },
-          "hover": { "value": "{color.navbar.dark.active}", "type": "color", "source": "$navbar-dark-brand-hover-color" }
+          "text": { "source": "$navbar-dark-brand-color", "$value": "{color.navbar.dark.active}" },
+          "hover": { "source": "$navbar-dark-brand-hover-color", "$value": "{color.navbar.dark.active}" }
         }
       },
       "light": {
         "text": {
-          "value": "{color.black}",
-          "type": "color",
           "source": "$navbar-light-color",
-          "modify": [{
-            "type": "alpha",
-            "amount": 0.5
-          }]
+          "modify": [{ "type": "alpha", "amount": 0.5 }],
+          "$value": "{color.black}"
         },
-        "hover": { 
-          "value": "{color.black}",
-          "type": "color",
+        "hover": {
           "source": "$navbar-light-hover-color",
-          "modify": [{
-            "type": "alpha",
-            "amount": 0.7
-          }]
+          "modify": [{ "type": "alpha", "amount": 0.7 }],
+          "$value": "{color.black}"
         },
-        "active": { 
-          "value": "{color.black}",
-          "type": "color",
+        "active": {
           "source": "$navbar-light-active-color",
-          "modify": [{
-            "type": "alpha",
-            "amount": 0.9
-          }]
+          "modify": [{ "type": "alpha", "amount": 0.9 }],
+          "$value": "{color.black}"
         },
-        "disabled": { 
-          "value": "{color.black}",
-          "type": "color",
+        "disabled": {
           "source": "$navbar-light-disabled-color",
-          "modify": [{
-            "type": "alpha",
-            "amount": 0.3
-          }]
+          "modify": [{ "type": "alpha", "amount": 0.3 }],
+          "$value": "{color.black}"
         },
         "toggler": {
           "border": {
-            "value": "{color.black}",
-            "type": "color",
             "source": "$navbar-light-toggler-border-color",
-            "modify": [{
-              "type": "alpha",
-              "amount": 0.1
-            }]
+            "modify": [{ "type": "alpha", "amount": 0.1 }],
+            "$value": "{color.black}"
           }
         },
         "brand": {
-          "text": { "value": "{color.navbar.light.active}", "type": "color", "source": "$navbar-light-brand-color" },
-          "hover": { "value": "{color.navbar.light.active}", "type": "color", "source": "$navbar-light-brand-hover-color" }
+          "text": { "source": "$navbar-light-brand-color", "$value": "{color.navbar.light.active}" },
+          "hover": { "source": "$navbar-light-brand-hover-color", "$value": "{color.navbar.light.active}" }
         }
       }
     }
   },
   "content": {
+    "$type": "file",
     "navbar": {
       "toggler": {
         "dark": {
           "icon-bg": {
-            "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='{color.navbar.dark.text}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\")",
-            "type": "file",
             "source": "$navbar-dark-toggler-icon-bg",
             "outputReferences": false,
-            "modify": [{
-              "type": "str-replace",
-              "toReplace": "#",
-              "replaceWith": "%23"
-            }]
+            "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+            "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='{color.navbar.dark.text}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\")"
           }
         },
         "light": {
           "icon-bg": {
-            "value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='{color.navbar.light.text}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\")",
-            "type": "file",
             "source": "$navbar-light-toggler-icon-bg",
             "outputReferences": false,
-            "modify": [{
-              "type": "str-replace",
-              "toReplace": "#",
-              "replaceWith": "%23"
-            }]
+            "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }],
+            "$value": "url(\"data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='{color.navbar.light.text}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e\")"
           }
         }
       }

package/tokens/src/themes/light/components/OverflowScroll.json

@@ -1,8 +1,10 @@
 {
   "color": {
+    "$type": "color",
     "overflow-scroll": {
       "opacity-mask-transparent": {
-        "value": "rgba(0, 0, 0, .4)", "type": "color", "source": "$overflow-scroll-opacity-mask-transparent"
+        "source": "$overflow-scroll-opacity-mask-transparent",
+        "$value": "rgba(0, 0, 0, .4)"
       }
     }
   }

package/tokens/src/themes/light/components/PageBanner.json

@@ -1,23 +1,24 @@
 {
   "color": {
+    "$type": "color",
     "page-banner": {
       "bg": {
-        "dark": { "value": "{color.dark.500}", "type": "color" },
-        "light": { "value": "{color.light.400}", "type": "color" },
+        "dark": { "$value": "{color.dark.500}" },
+        "light": { "$value": "{color.light.400}" },
         "accent": {
-          "a": { "value": "{color.accent.a}", "type": "color" },
-          "b": { "value": "{color.accent.b}", "type": "color" }
+          "a": { "$value": "{color.accent.a}" },
+          "b": { "$value": "{color.accent.b}" }
         },
-        "warning": { "value": "{color.warning.100}", "type": "color" }
+        "warning": { "$value": "{color.warning.100}" }
       },
       "text": {
-        "dark": { "value": "{color.white}", "type": "color" },
-        "light": { "value": "{color.black}", "type": "color" },
+        "dark": { "$value": "{color.white}" },
+        "light": { "$value": "{color.black}" },
         "accent": {
-          "a": { "value": "{color.black}", "type": "color" },
-          "b": { "value": "{color.black}", "type": "color" }
+          "a": { "$value": "{color.black}" },
+          "b": { "$value": "{color.black}" }
         },
-        "warning": { "value": "{color.black}", "type": "color" }
+        "warning": { "$value": "{color.black}" }
       }
     }
   }