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

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

@@ -1,44 +1,40 @@
 {
   "color": {
+    "$type": "color",
     "pagination": {
       "text": {
-        "base": { "value": "{color.link.base}", "type": "color", "source": "$pagination-color" },
-        "inverse": { "value": "{color.white}", "type": "color", "source": "$pagination-color-inverse" },
-        "hover": { "value": "{color.link.hover}", "type": "color", "source": "$pagination-hover-color" },
-        "active": { "value": "{color.active}", "type": "color", "source": "$pagination-active-color" },
-        "disabled": { "value": "{color.disabled}", "type": "color", "source": "$pagination-disabled-color" }
+        "base": { "source": "$pagination-color", "$value": "{color.link.base}" },
+        "inverse": { "source": "$pagination-color-inverse", "$value": "{color.white}" },
+        "hover": { "source": "$pagination-hover-color", "$value": "{color.link.hover}" },
+        "active": { "source": "$pagination-active-color", "$value": "{color.active}" },
+        "disabled": { "source": "$pagination-disabled-color", "$value": "{color.disabled}" }
       },
       "bg": {
-        "base": { "value": "{color.bg.base}", "type": "color", "source": "$pagination-bg" },
-        "hover": { "value": "{color.gray.100}", "type": "color", "source": "$pagination-hover-bg" },
-        "active": { "value": "{color.bg.active}", "type": "color", "source": "$pagination-active-bg" },
-        "disabled": { "value": "{color.white}", "type": "color", "source": "$pagination-disabled-bg" }
+        "base": { "source": "$pagination-bg", "$value": "{color.bg.base}" },
+        "hover": { "source": "$pagination-hover-bg", "$value": "{color.gray.100}" },
+        "active": { "source": "$pagination-active-bg", "$value": "{color.bg.active}" },
+        "disabled": { "source": "$pagination-disabled-bg", "$value": "{color.white}" }
       },
       "border": {
-        "base": { "value": "{color.gray.200}", "type": "color", "source": "$pagination-border-color" },
-        "hover": { "value": "{color.gray.200}", "type": "color", "source": "$pagination-hover-border-color" },
-        "active": { "value": "{color.pagination.bg.active}", "type": "color", "source": "$pagination-active-border-color" },
-        "disabled": { "value": "{color.gray.100}", "type": "color", "source": "$pagination-disabled-border-color" }
+        "base": { "source": "$pagination-border-color", "$value": "{color.gray.200}" },
+        "hover": { "source": "$pagination-hover-border-color", "$value": "{color.gray.200}" },
+        "active": { "source": "$pagination-active-border-color", "$value": "{color.pagination.bg.active}" },
+        "disabled": { "source": "$pagination-disabled-border-color", "$value": "{color.gray.100}" }
       },
       "focus": {
-        "base": { "value": "{color.primary.500}", "type": "color", "source": "$pagination-focus-color" },
-        "text": { "value": "{color.black}", "type": "color", "source": "$pagination-focus-color-text" }
+        "base": { "source": "$pagination-focus-color", "$value": "{color.primary.500}" },
+        "text": { "source": "$pagination-focus-color-text", "$value": "{color.black}" }
       },
       "dropdown": {
-        "text-inverse": {
-          "value": "{color.white}", "type": "color", "source": "$pagination-dropdown-color-inverse"
-        }
+        "text-inverse": { "source": "$pagination-dropdown-color-inverse", "$value": "{color.white}" }
       }
     }
   },
   "elevation": {
+    "$type": "shadow",
     "pagination": {
       "focus": {
-        "box-shadow": {
-          "value": "{elevation.input.btn-focus.box-shadow}",
-          "type": "shadow",
-          "source": "$pagination-focus-box-shadow"
-        }
+        "box-shadow": { "source": "$pagination-focus-box-shadow", "$value": "{elevation.input.btn-focus.box-shadow}" }
       }
     }
   }

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

@@ -1,55 +1,50 @@
 {
   "color": {
+    "$type": "color",
     "popover": {
-      "bg": { "value": "{color.bg.base}", "type": "color", "source": "$popover-bg" },
-      "border": { "value": "rgba(0, 0, 0, .2)", "type": "color",  "source": "$popover-border-color" },
+      "bg": { "source": "$popover-bg", "$value": "{color.bg.base}" },
+      "border": { "source": "$popover-border-color", "$value": "rgba(0, 0, 0, .2)" },
       "header": {
-        "text": { "value": "{color.headings.base}", "type": "color", "source": "$popover-header-color" },
-        "bg": { "value": "{color.white}", "type": "color", "source": "$popover-header-bg" },
+        "text": { "source": "$popover-header-color", "$value": "{color.headings.base}" },
+        "bg": { "source": "$popover-header-bg", "$value": "{color.white}" },
         "bg-dark": {
-          "value": "{color.white}",
-          "type": "color",
           "source": "$popover-header-bg-dark",
-          "modify": [{ "type": "darken", "amount": 0.5 }]
+          "modify": [{ "type": "darken", "amount": 0.5 }],
+          "$value": "{color.white}"
         },
         "border-bottom-dark": {
-          "value": "{color.white}",
-          "type": "color",
           "source": "$popover-header-border-bottom-darken",
-          "modify": [{ "type": "darken", "amount": 0.05 }]
+          "modify": [{ "type": "darken", "amount": 0.05 }],
+          "$value": "{color.white}"
         }
       },
-      "body": { "value": "{color.body.base}", "type": "color", "source": "$popover-body-color" },
-      "arrow": { 
-        "base": { "value": "{color.popover.bg}", "type": "color", "source": "$popover-arrow-color" },
+      "body": { "source": "$popover-body-color", "$value": "{color.body.base}" },
+      "arrow": {
+        "base": { "source": "$popover-arrow-color", "$value": "{color.popover.bg}" },
         "outer": {
-          "value": "{color.popover.border}",
-          "type": "color",
           "source": "$popover-arrow-outer-color",
-          "modify": [{ "type": "alpha", "amount": 0.05 }]
+          "modify": [{ "type": "alpha", "amount": 0.05 }],
+          "$value": "{color.popover.border}"
         }
       },
       "success": {
-        "bg": { "value": "{color.success.100}", "type": "color", "source": "$popover-success-bg" },
-        "icon": { "value": "{color.success.500}", "type": "color", "source": "$popover-success-icon-color" }
+        "bg": { "source": "$popover-success-bg", "$value": "{color.success.100}" },
+        "icon": { "source": "$popover-success-icon-color", "$value": "{color.success.500}" }
       },
       "warning": {
-        "bg": { "value": "{color.warning.100}", "type": "color", "source": "$popover-warning-bg" },
-        "icon": { "value": "{color.warning.500}", "type": "color", "source": "$popover-warning-icon-color" }
+        "bg": { "source": "$popover-warning-bg", "$value": "{color.warning.100}" },
+        "icon": { "source": "$popover-warning-icon-color", "$value": "{color.warning.500}" }
       },
       "danger": {
-        "bg": { "value": "{color.danger.100}", "type": "color", "source": "$popover-danger-bg" },
-        "icon": { "value": "{color.danger.500}", "type": "color", "source": "$popover-danger-icon-color" }
+        "bg": { "source": "$popover-danger-bg", "$value": "{color.danger.100}" },
+        "icon": { "source": "$popover-danger-icon-color", "$value": "{color.danger.500}" }
       }
     }
   },
   "elevation": {
+    "$type": "shadow",
     "popover": {
-      "box-shadow": {
-        "value": "none",
-        "type": "shadow",
-        "source": "$popover-box-shadow"
-      }
+      "box-shadow": { "source": "$popover-box-shadow", "$value": "none" }
     }
   }
 }

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

@@ -1,32 +1,21 @@
 {
   "color": {
+    "$type": "color",
     "product-tour": {
       "checkpoint": {
-        "bg": { "value": "{color.light.300}", "type": "color", "source": "$checkpoint-background-color" },
-        "body": { "value": "{color.gray.700}", "type": "color", "source": "$checkpoint-body-color" },
-        "border": { "value": "{color.brand.base}", "type": "color", "source": "$checkpoint-border-color" },
-        "breadcrumb": { "value": "{color.primary.base}", "type": "color", "source": "$checkpoint-breadcrumb-color" },
+        "bg": { "source": "$checkpoint-background-color", "$value": "{color.light.300}" },
+        "body": { "source": "$checkpoint-body-color", "$value": "{color.gray.700}" },
+        "border": { "source": "$checkpoint-border-color", "$value": "{color.brand.base}" },
+        "breadcrumb": { "source": "$checkpoint-breadcrumb-color", "$value": "{color.primary.base}" },
         "box-shadow": {
-          "value": "{color.black}",
-          "type": "color",
           "source": "$checkpoint-box-shadow-color",
-          "modify": [{
-            "type": "alpha",
-            "amount": 0.3
-          }]
+          "modify": [{ "type": "alpha", "amount": 0.3 }],
+          "$value": "{color.black}"
         },
         "arrow": {
           "border": {
-            "top": {
-              "value": "{color.product-tour.checkpoint.bg}",
-              "type": "color",
-              "source": "$checkpoint-arrow-border-top-color"
-            },
-            "transparent": {
-              "value": "transparent",
-              "type": "color",
-              "source": "$checkpoint-arrow-border-color-transparent"
-            }
+            "top": { "source": "$checkpoint-arrow-border-top-color", "$value": "{color.product-tour.checkpoint.bg}" },
+            "transparent": { "source": "$checkpoint-arrow-border-color-transparent", "$value": "transparent" }
           }
         }
       }

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

@@ -1,20 +1,22 @@
 {
   "color": {
+    "$type": "color",
     "progress-bar": {
-      "bg": { "value": "transparent", "type": "color", "source": "$progress-bg" },
-      "border": { "value": "{color.gray.500}", "type": "color", "source": "$progress-bar-border-color" },
-      "bar": {
-        "base": { "value": "{color.white}", "type": "color", "source": "$progress-bar-color" },
-        "bg": {
-          "base": { "value": "{color.accent.a}", "type": "color", "source": "$progress-bar-bg" },
-          "annotated": { "value": "{color.dark.500}", "type": "color", "source": "$annotated-progress-bar-bg" }
-        }
-      }
+      "base": { "source": "$progress-bar-color", "$value": "{color.white}" },
+      "bg": {
+        "base": { "source": "$progress-bar-bg", "$value": "{color.accent.a}" },
+        "annotated": { "source": "$annotated-progress-bar-bg", "$value": "{color.dark.500}" }
+      },
+      "border": { "source": "$progress-bar-border-color", "$value": "{color.gray.500}" }
+    },
+    "progress": {
+      "bg": { "source": "$progress-bg", "$value": "transparent" }
     }
   },
   "elevation": {
+    "$type": "shadow",
     "progress-bar": {
-      "box-shadow": { "value": "none", "type": "shadow", "source": "$progress-box-shadow" }
+      "box-shadow": { "source": "$progress-box-shadow", "$value": "none" }
     }
   }
 }

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

@@ -1,12 +1,12 @@
 {
   "elevation": {
+    "$type": "shadow",
     "scrollable": {
       "body": {
         "box-shadow": {
-          "value": "{color.black}",
-          "type": "shadow",
           "source": "$scrollable-body-box-shadow",
-          "modify": [{ "type": "alpha", "amount": 0.55 }]
+          "modify": [{ "type": "alpha", "amount": 0.55 }],
+          "$value": "{color.black}"
         }
       }
     }

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

@@ -1,25 +1,25 @@
 {
   "color": {
+    "$type": "color",
     "search-field": {
       "border": {
-        "base": { "value": "{color.gray.500}", "type": "color", "source": "$search-border-color" },
-        "interaction": { "value": "{color.black}", "type": "color", "source": "$search-border-color-interaction" },
-        "focus": { "value": "{color.black}", "type": "color", "source": "$search-border-focus-color" }
+        "base": { "source": "$search-border-color", "$value": "{color.gray.500}" },
+        "interaction": { "source": "$search-border-color-interaction", "$value": "{color.black}" },
+        "focus": { "source": "$search-border-focus-color", "$value": "{color.black}" }
       },
       "button": {
         "bg": {
-          "primary": { "value": "{color.primary.500}", "type": "color", "source": "$search-btn-primary-bg" },
-          "brand": { "value": "{color.brand.500}", "type": "color", "source": "$search-btn-brand-bg" }
+          "primary": { "source": "$search-btn-primary-bg", "$value": "{color.primary.500}" },
+          "brand": { "source": "$search-btn-brand-bg", "$value": "{color.brand.500}" }
         }
       },
-      "form-bg": {
-        "value": "{color.white}", "type": "color", "source": "$search-form-background-color"
-      }
+      "form-bg": { "source": "$search-form-background-color", "$value": "{color.white}" }
     }
   },
   "other": {
+    "$type": "number",
     "search-field": {
-      "disabled-opacity": { "value": ".3", "type": "ratio", "source": "$search-disabled-opacity" }
+      "disabled-opacity": { "source": "$search-disabled-opacity", "$value": ".3" }
     }
   }
 }

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

@@ -1,19 +1,18 @@
 {
   "color": {
+    "$type": "color",
     "sheet": {
       "skrim": {
-        "bg": { 
-          "value": "{color.gray.300}",
-          "type": "color",
+        "bg": {
           "source": "$sheet-skrim-bg",
-          "modify": [{ "type": "alpha", "amount": 0.5 }]
+          "modify": [{ "type": "alpha", "amount": 0.5 }],
+          "$value": "{color.gray.300}"
         },
         "component": {
           "box-shadow": {
-            "value": "{color.black}",
-            "type": "color",
             "source": "$sheet-skrim-component-box-shadow",
-            "modify": [{ "type": "alpha", "amount": 0.15 }]
+            "modify": [{ "type": "alpha", "amount": 0.15 }],
+            "$value": "{color.black}"
           }
         }
       }

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

@@ -1,31 +1,26 @@
 {
   "color": {
+    "$type": "color",
     "stepper": {
       "header": {
-        "bg": { 
-          "base": { "value": "transparent", "type": "color", "source": "$stepper-header-bg" },
-          "line": { "value": "{color.light.base}", "type": "color", "source": "$stepper-header-line-bg" }
+        "bg": {
+          "base": { "source": "$stepper-header-bg", "$value": "transparent" },
+          "line": { "source": "$stepper-header-line-bg", "$value": "{color.light.base}" }
         },
         "step": {
-          "base": {
-            "value": "{color.primary.base}", "type": "color", "source": "$stepper-header-step-color"
-          },
+          "base": { "source": "$stepper-header-step-color", "$value": "{color.primary.base}" },
           "bg": {
-            "base": {
-              "value": "{color.stepper.header.bg.base}", "type": "color", "source": "$stepper-header-step-bg"
-            },
-            "active": {
-              "value": "{color.gray.500}", "type": "color", "source": "$stepper-header-active-step-bg"
-            }
+            "base": { "source": "$stepper-header-step-bg", "$value": "{color.stepper.header.bg.base}" },
+            "active": { "source": "$stepper-header-active-step-bg", "$value": "{color.gray.500}" }
           },
-          "border": { "value": "none", "type": "color", "source": "$stepper-header-step-border" },
+          "border": { "source": "$stepper-header-step-border", "$value": "none" },
           "bubble-error": {
-            "value": "{color.danger.base}", "type": "color", "source": "$stepper-header-step-error-bubble-color"
+            "source": "$stepper-header-step-error-bubble-color",
+            "$value": "{color.danger.base}"
           },
           "description-error": {
-            "value": "{color.stepper.header.step.bubble-error}", 
-            "type": "color", 
-            "source": "$stepper-header-step-error-description-color"
+            "source": "$stepper-header-step-error-description-color",
+            "$value": "{color.stepper.header.step.bubble-error}"
           }
         }
       }

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

@@ -1,16 +1,41 @@
 {
   "elevation": {
+    "$type": "shadow",
     "sticky": {
       "shadow": {
         "top": {
-          "value": "0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
-          "source": "$sticky-shadow-top"
+          "source": "$sticky-shadow-top",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.5rem",
+              "blur": "1rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": "-.25rem",
+              "blur": ".625rem"
+            }
+          ]
         },
         "bottom": {
-          "value": "0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15)",
-          "type": "shadow",
-          "source": "$sticky-shadow-bottom"
+          "source": "$sticky-shadow-bottom",
+          "$value": [
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".5rem",
+              "blur": "1rem"
+            },
+            {
+              "color": "rgba(0, 0, 0, .15)",
+              "offsetX": "0",
+              "offsetY": ".25rem",
+              "blur": ".625rem"
+            }
+          ]
         }
       }
     }

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

@@ -1,59 +1,82 @@
 {
   "color": {
+    "$type": "color",
     "tab": {
       "more-link-dropdown-toggle": {
         "btn": {
           "text": {
             "focus": {
-              "value": "{color.tab.more-link-dropdown-toggle.text.focus}",
-              "type": "color",
-              "source": "$tab-more-link-dropdown-toggle-btn-focus-color"
+              "source": "$tab-more-link-dropdown-toggle-btn-focus-color",
+              "$value": "{color.tab.more-link-dropdown-toggle.text.focus}"
             }
           },
           "border": {
             "focus": {
-              "value": "{color.tab.more-link-dropdown-toggle.bg.focus}",
-              "type": "color",
-              "source": "$tab-more-link-dropdown-toggle-btn-focus-border-color"
+              "source": "$tab-more-link-dropdown-toggle-btn-focus-border-color",
+              "$value": "{color.tab.more-link-dropdown-toggle.bg.focus}"
             }
           }
         },
         "text": {
-          "focus": { "value": "{color.white}", "type": "color", "source": "$tab-more-link-dropdown-toggle-focus-color" },
-          "active": { "value": "{color.tab.more-link-dropdown-toggle.text.focus}", "type": "color", "source": "$tab-more-link-dropdown-toggle-active-color" },
-          "hover": { "value": "{color.tab.more-link-dropdown-toggle.bg.focus}", "type": "color", "source": "$tab-more-link-dropdown-toggle-hover-color" }
+          "focus": {
+            "source": "$tab-more-link-dropdown-toggle-focus-color",
+            "$value": "{color.white}"
+          },
+          "active": {
+            "source": "$tab-more-link-dropdown-toggle-active-color",
+            "$value": "{color.tab.more-link-dropdown-toggle.text.focus}"
+          },
+          "hover": {
+            "source": "$tab-more-link-dropdown-toggle-hover-color",
+            "$value": "{color.tab.more-link-dropdown-toggle.bg.focus}"
+          }
         },
         "bg": {
-          "focus": { "value": "{color.primary.500}", "type": "color", "source": "$tab-more-link-dropdown-toggle-focus-bg" }
+          "focus": {
+            "source": "$tab-more-link-dropdown-toggle-focus-bg",
+            "$value": "{color.primary.500}"
+          }
         },
         "border": {
-          "focus": { "value": "{color.tab.more-link-dropdown-toggle.bg.focus}", "type": "color", "source": "$tab-more-link-dropdown-toggle-focus-border-color" }
+          "focus": {
+            "source": "$tab-more-link-dropdown-toggle-focus-border-color",
+            "$value": "{color.tab.more-link-dropdown-toggle.bg.focus}"
+          }
         }
       },
       "inverse-pills-link-dropdown-toggle": {
         "text": {
-          "focus": { "value": "{color.primary.500}", "type": "color", "source": "$tab-inverse-pills-link-dropdown-toggle-focus-color" },
-          "active": { "value": "{color.tab.inverse-pills-link-dropdown-toggle.text.focus}", "type": "color", "source": "$tab-inverse-pills-link-dropdown-toggle-active-color" },
+          "focus": {
+            "source": "$tab-inverse-pills-link-dropdown-toggle-focus-color",
+            "$value": "{color.primary.500}"
+          },
+          "active": {
+            "source": "$tab-inverse-pills-link-dropdown-toggle-active-color",
+            "$value": "{color.tab.inverse-pills-link-dropdown-toggle.text.focus}"
+          },
           "active-hover": {
-            "value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}",
-            "type": "color",
-            "source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-color"
+            "source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-color",
+            "$value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}"
           }
         },
         "bg": {
-          "focus": { "value": "{color.white}", "type": "color", "source": "$tab-inverse-pills-link-dropdown-toggle-focus-bg" },
-          "hover": { "value": "transparent", "type": "color", "source": "$tab-inverse-tabs-link-dropdown-toggle-hover-bg" },
+          "focus": {
+            "source": "$tab-inverse-pills-link-dropdown-toggle-focus-bg",
+            "$value": "{color.white}"
+          },
+          "hover": {
+            "source": "$tab-inverse-tabs-link-dropdown-toggle-hover-bg",
+            "$value": "transparent"
+          },
           "active-hover": {
-            "value": "{color.primary.300}",
-            "type": "color",
-            "source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-bg"
+            "source": "$tab-inverse-pills-link-dropdown-toggle-active-hover-bg",
+            "$value": "{color.primary.300}"
           }
         },
         "border": {
           "focus": {
-            "value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}",
-            "type": "color",
-            "source": "$tab-inverse-pills-link-dropdown-toggle-focus-border-color"
+            "source": "$tab-inverse-pills-link-dropdown-toggle-focus-border-color",
+            "$value": "{color.tab.inverse-pills-link-dropdown-toggle.bg.focus}"
           }
         }
       }

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

@@ -1,32 +1,44 @@
 {
   "color": {
+    "$type": "color",
     "toast": {
-      "base": { "value": "inherit", "type": "color", "source": "$toast-color" },
-      "bg": { "value": "{color.gray.700}", "type": "color", "source": "$toast-background-color" },
+      "base": { "source": "$toast-color", "$value": "inherit" },
+      "bg": { "source": "$toast-background-color", "$value": "{color.gray.700}" },
       "border": {
-        "value": "{color.black}",
-        "type": "color",
         "source": "$toast-border-color",
-        "modify": [{ "type": "alpha", "amount": 0.1 }]
+        "modify": [{ "type": "alpha", "amount": 0.1 }],
+        "$value": "{color.black}"
       },
       "header": {
-        "text": { "value": "{color.white}", "type": "color", "source": "$toast-header-color" },
-        "bg": { "value": "{color.gray.700}", "type": "color", "source": "$toast-header-background-color" },
-        "border": { 
-          "value": "{color.black}",
-          "type": "color",
+        "text": { "source": "$toast-header-color", "$value": "{color.white}" },
+        "bg": { "source": "$toast-header-background-color", "$value": "{color.gray.700}" },
+        "border": {
           "source": "$toast-header-border-color",
-          "modify": [{ "type": "alpha", "amount": 0.5 }]
+          "modify": [{ "type": "alpha", "amount": 0.5 }],
+          "$value": "{color.black}"
         }
       }
     }
   },
   "elevation": {
+    "$type": "shadow",
     "toast": {
       "box-shadow": {
-        "value": "0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15)",
-        "type": "shadow",
-        "source": "$toast-box-shadow"
+        "source": "$toast-box-shadow",
+        "$value": [
+          {
+            "color": "rgba(0, 0, 0, .15)",
+            "offsetX": "0",
+            "offsetY": "1.25rem",
+            "blur": "2.5rem"
+          },
+          {
+            "color": "rgba(0, 0, 0, .15)",
+            "offsetX": "0",
+            "offsetY": ".5rem",
+            "blur": "3rem"
+          }
+        ]
       }
     }
   }