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

package/tokens/src/themes/light/alias/color.json

@@ -1,113 +1,314 @@
 {
   "color": {
+    "$type": "color",
     "bg": {
-      "base": { "value": "{color.white}", "type": "color", "description": "Basic background color." },
-      "active": { "value": "{color.primary.500}", "type": "color", "source": "$component-active-bg", "description": "Active background color." }
+      "base": { "$value": "{color.white}", "$description": "Basic background color." },
+      "active": {
+        "source": "$component-active-bg",
+        "$value": "{color.primary.500}",
+        "$description": "Active background color."
+      }
     },
     "text": {
-      "50":{
+      "50": {
         "black": {
-          "value": "{color.black}",
-          "type": "color",
           "source": "$text-black-50",
           "modify": [{ "type": "alpha", "amount": 0.5 }],
-          "description": "Black text color with transparency of 50%."
+          "$value": "{color.black}",
+          "$description": "Black text color with transparency of 50%."
         },
         "white": {
-          "value": "{color.white}",
-          "type": "color",
           "source": "$text-white-50",
           "modify": [{ "type": "alpha", "amount": 0.5 }],
-          "description": "White text color with transparency of 50%."
+          "$value": "{color.white}",
+          "$description": "White text color with transparency of 50%."
         }
       }
     },
-    "active": { "value": "{color.white}", "type": "color", "source": "$component-active-color", "description": "Color for active element." },
-    "disabled": { "value": "{color.gray.500}", "type": "color", "description": "Color for disabled element." },
+    "active": {
+      "source": "$component-active-color",
+      "$value": "{color.white}",
+      "$description": "Color for active element."
+    },
+    "disabled": {
+      "$value": "{color.gray.500}",
+      "$description": "Color for disabled element."
+    },
     "input": {
-      "focus": { "value": "{color.primary.500}", "type": "color", "description": "Focused input value color." }
+      "focus": {
+        "$value": "{color.primary.500}",
+        "$description": "Focused input value color."
+      }
     },
     "table": {
       "caption": {
-        "value": "{color.text-muted}", "type": "color", "source": "$table-caption-color", "description": "Table caption color."
+        "source": "$table-caption-color",
+        "$value": "{color.text-muted}",
+        "$description": "Table caption color."
       },
       "border": {
-        "value": "{color.border}", "type": "color", "source": "$table-border-color", "description": "Table border color."
+        "source": "$table-border-color",
+        "$value": "{color.border}",
+        "$description": "Table border color."
       }
     },
-    "border": { "value": "{color.gray.200}", "type": "color", "source": "$border-color", "description": "Border color." },
+    "border": {
+      "source": "$border-color",
+      "$value": "{color.gray.200}",
+      "$description": "Border color."
+    },
     "theme": {
       "bg": {
-        "primary": { "value": "{color.primary.100}", "type": "color", "description": "Theme-specific primary background color." },
-        "secondary": { "value": "{color.secondary.100}", "type": "color", "description": "Theme-specific secondary background color." },
-        "brand": { "value": "{color.brand.100}", "type": "color", "description": "Theme-specific brand background color." },
-        "success": { "value": "{color.success.100}", "type": "color", "description": "Theme-specific success background color." },
-        "info": { "value": "{color.info.100}", "type": "color", "description": "Theme-specific info background color." },
-        "warning": { "value": "{color.warning.100}", "type": "color", "description": "Theme-specific warning background color." },
-        "danger": { "value": "{color.danger.100}", "type": "color", "description": "Theme-specific danger background color." },
-        "light": { "value": "{color.light.100}", "type": "color", "description": "Theme-specific light background color." },
-        "dark": { "value": "{color.dark.100}", "type": "color", "description": "Theme-specific dark background color." },
-        "gray": { "value": "{color.gray.100}", "type": "color", "description": "Theme-specific gray background color." }
+        "primary": {
+          "$value": "{color.primary.100}",
+          "$description": "Theme-specific primary background color."
+        },
+        "secondary": {
+          "$value": "{color.secondary.100}",
+          "$description": "Theme-specific secondary background color."
+        },
+        "brand": {
+          "$value": "{color.brand.100}",
+          "$description": "Theme-specific brand background color."
+        },
+        "success": {
+          "$value": "{color.success.100}",
+          "$description": "Theme-specific success background color."
+        },
+        "info": {
+          "$value": "{color.info.100}",
+          "$description": "Theme-specific info background color."
+        },
+        "warning": {
+          "$value": "{color.warning.100}",
+          "$description": "Theme-specific warning background color."
+        },
+        "danger": {
+          "$value": "{color.danger.100}",
+          "$description": "Theme-specific danger background color."
+        },
+        "light": {
+          "$value": "{color.light.100}",
+          "$description": "Theme-specific light background color."
+        },
+        "dark": {
+          "$value": "{color.dark.100}",
+          "$description": "Theme-specific dark background color."
+        },
+        "gray": {
+          "$value": "{color.gray.100}",
+          "$description": "Theme-specific gray background color."
+        }
       },
       "border": {
-        "primary": { "value": "{color.primary.200}", "type": "color", "description": "Theme-specific primary border color." },
-        "secondary": { "value": "{color.secondary.200}", "type": "color", "description": "Theme-specific secondary border color." },
-        "brand": { "value": "{color.brand.200}", "type": "color", "description": "Theme-specific brand border color." },
-        "success": { "value": "{color.success.200}", "type": "color", "description": "Theme-specific success border color." },
-        "info": { "value": "{color.info.200}", "type": "color", "description": "Theme-specific info border color." },
-        "warning": { "value": "{color.warning.200}", "type": "color", "description": "Theme-specific warning border color." },
-        "danger": { "value": "{color.danger.200}", "type": "color", "description": "Theme-specific danger border color." },
-        "light": { "value": "{color.light.200}", "type": "color", "description": "Theme-specific light border color." },
-        "dark": { "value": "{color.dark.200}", "type": "color", "description": "Theme-specific dark border color." },
-        "gray": { "value": "{color.gray.200}", "type": "color", "description": "Theme-specific gray border color." }
+        "primary": {
+          "$value": "{color.primary.200}",
+          "$description": "Theme-specific primary border color."
+        },
+        "secondary": {
+          "$value": "{color.secondary.200}",
+          "$description": "Theme-specific secondary border color."
+        },
+        "brand": {
+          "$value": "{color.brand.200}",
+          "$description": "Theme-specific brand border color."
+        },
+        "success": {
+          "$value": "{color.success.200}",
+          "$description": "Theme-specific success border color."
+        },
+        "info": {
+          "$value": "{color.info.200}",
+          "$description": "Theme-specific info border color."
+        },
+        "warning": {
+          "$value": "{color.warning.200}",
+          "$description": "Theme-specific warning border color."
+        },
+        "danger": {
+          "$value": "{color.danger.200}",
+          "$description": "Theme-specific danger border color."
+        },
+        "light": {
+          "$value": "{color.light.200}",
+          "$description": "Theme-specific light border color."
+        },
+        "dark": {
+          "$value": "{color.dark.200}",
+          "$description": "Theme-specific dark border color."
+        },
+        "gray": {
+          "$value": "{color.gray.200}",
+          "$description": "Theme-specific gray border color."
+        }
       },
       "focus": {
-        "primary": { "value": "{color.primary.500}", "type": "color", "description": "Theme-specific primary focus color." },
-        "secondary": { "value": "{color.secondary.500}", "type": "color", "description": "Theme-specific secondary focus color." },
-        "brand": { "value": "{color.brand.500}", "type": "color", "description": "Theme-specific brand focus color." },
-        "success": { "value": "{color.success.500}", "type": "color", "description": "Theme-specific success focus color." },
-        "info": { "value": "{color.info.500}", "type": "color", "description": "Theme-specific info focus color." },
-        "warning": { "value": "{color.warning.500}", "type": "color", "description": "Theme-specific warning focus color." },
-        "danger": { "value": "{color.danger.500}", "type": "color", "description": "Theme-specific danger focus color." },
-        "light": { "value": "{color.light.500}", "type": "color", "description": "Theme-specific light focus color." },
-        "dark": { "value": "{color.dark.500}", "type": "color", "description": "Theme-specific dark focus color." },
-        "gray": { "value": "{color.gray.500}", "type": "color", "description": "Theme-specific gray focus color." }
+        "primary": {
+          "$value": "{color.primary.500}",
+          "$description": "Theme-specific primary focus color."
+        },
+        "secondary": {
+          "$value": "{color.secondary.500}",
+          "$description": "Theme-specific secondary focus color."
+        },
+        "brand": {
+          "$value": "{color.brand.500}",
+          "$description": "Theme-specific brand focus color."
+        },
+        "success": {
+          "$value": "{color.success.500}",
+          "$description": "Theme-specific success focus color."
+        },
+        "info": {
+          "$value": "{color.info.500}",
+          "$description": "Theme-specific info focus color."
+        },
+        "warning": {
+          "$value": "{color.warning.500}",
+          "$description": "Theme-specific warning focus color."
+        },
+        "danger": {
+          "$value": "{color.danger.500}",
+          "$description": "Theme-specific danger focus color."
+        },
+        "light": {
+          "$value": "{color.light.500}",
+          "$description": "Theme-specific light focus color."
+        },
+        "dark": {
+          "$value": "{color.dark.500}",
+          "$description": "Theme-specific dark focus color."
+        },
+        "gray": {
+          "$value": "{color.gray.500}",
+          "$description": "Theme-specific gray focus color."
+        }
       },
       "default": {
-        "primary": { "value": "{color.primary.500}", "type": "color", "description": "Theme-specific primary default color." },
-        "secondary": { "value": "{color.secondary.500}", "type": "color", "description": "Theme-specific secondary default color." },
-        "brand": { "value": "{color.brand.500}", "type": "color", "description": "Theme-specific brand default color." },
-        "success": { "value": "{color.success.500}", "type": "color", "description": "Theme-specific success default color." },
-        "info": { "value": "{color.info.500}", "type": "color", "description": "Theme-specific info default color." },
-        "warning": { "value": "{color.warning.500}", "type": "color", "description": "Theme-specific warning default color." },
-        "danger": { "value": "{color.danger.500}", "type": "color", "description": "Theme-specific danger default color." },
-        "light": { "value": "{color.light.500}", "type": "color", "description": "Theme-specific light default color." },
-        "dark": { "value": "{color.dark.500}", "type": "color", "description": "Theme-specific dark default color." },
-        "gray": { "value": "{color.gray.500}", "type": "color", "description": "Theme-specific gray default color." }
+        "primary": {
+          "$value": "{color.primary.500}",
+          "$description": "Theme-specific primary default color."
+        },
+        "secondary": {
+          "$value": "{color.secondary.500}",
+          "$description": "Theme-specific secondary default color."
+        },
+        "brand": {
+          "$value": "{color.brand.500}",
+          "$description": "Theme-specific brand default color."
+        },
+        "success": {
+          "$value": "{color.success.500}",
+          "$description": "Theme-specific success default color."
+        },
+        "info": {
+          "$value": "{color.info.500}",
+          "$description": "Theme-specific info default color."
+        },
+        "warning": {
+          "$value": "{color.warning.500}",
+          "$description": "Theme-specific warning default color."
+        },
+        "danger": {
+          "$value": "{color.danger.500}",
+          "$description": "Theme-specific danger default color."
+        },
+        "light": {
+          "$value": "{color.light.500}",
+          "$description": "Theme-specific light default color."
+        },
+        "dark": {
+          "$value": "{color.dark.500}",
+          "$description": "Theme-specific dark default color."
+        },
+        "gray": {
+          "$value": "{color.gray.500}",
+          "$description": "Theme-specific gray default color."
+        }
       },
       "hover": {
-        "primary": { "value": "{color.primary.700}", "type": "color", "description": "Theme-specific primary hover color." },
-        "secondary": { "value": "{color.secondary.700}", "type": "color", "description": "Theme-specific secondary hover color." },
-        "brand": { "value": "{color.brand.700}", "type": "color", "description": "Theme-specific brand hover color." },
-        "success": { "value": "{color.success.700}", "type": "color", "description": "Theme-specific success hover color." },
-        "info": { "value": "{color.info.700}", "type": "color", "description": "Theme-specific info hover color." },
-        "warning": { "value": "{color.warning.700}", "type": "color", "description": "Theme-specific warning hover color." },
-        "danger": { "value": "{color.danger.700}", "type": "color", "description": "Theme-specific danger hover color." },
-        "light": { "value": "{color.light.700}", "type": "color", "description": "Theme-specific light hover color." },
-        "dark": { "value": "{color.dark.700}", "type": "color", "description": "Theme-specific dark hover color." },
-        "gray": { "value": "{color.gray.700}", "type": "color", "description": "Theme-specific gray hover color." }
+        "primary": {
+          "$value": "{color.primary.700}",
+          "$description": "Theme-specific primary hover color."
+        },
+        "secondary": {
+          "$value": "{color.secondary.700}",
+          "$description": "Theme-specific secondary hover color."
+        },
+        "brand": {
+          "$value": "{color.brand.700}",
+          "$description": "Theme-specific brand hover color."
+        },
+        "success": {
+          "$value": "{color.success.700}",
+          "$description": "Theme-specific success hover color."
+        },
+        "info": {
+          "$value": "{color.info.700}",
+          "$description": "Theme-specific info hover color."
+        },
+        "warning": {
+          "$value": "{color.warning.700}",
+          "$description": "Theme-specific warning hover color."
+        },
+        "danger": {
+          "$value": "{color.danger.700}",
+          "$description": "Theme-specific danger hover color."
+        },
+        "light": {
+          "$value": "{color.light.700}",
+          "$description": "Theme-specific light hover color."
+        },
+        "dark": {
+          "$value": "{color.dark.700}",
+          "$description": "Theme-specific dark hover color."
+        },
+        "gray": {
+          "$value": "{color.gray.700}",
+          "$description": "Theme-specific gray hover color."
+        }
       },
       "active": {
-        "primary": { "value": "{color.primary.900}", "type": "color", "description": "Theme-specific primary active color." },
-        "secondary": { "value": "{color.secondary.900}", "type": "color", "description": "Theme-specific secondary active color." },
-        "brand": { "value": "{color.brand.900}", "type": "color", "description": "Theme-specific brand active color." },
-        "success": { "value": "{color.success.900}", "type": "color", "description": "Theme-specific success active color." },
-        "info": { "value": "{color.info.900}", "type": "color", "description": "Theme-specific info active color." },
-        "warning": { "value": "{color.warning.900}", "type": "color", "description": "Theme-specific warning active color." },
-        "danger": { "value": "{color.danger.900}", "type": "color", "description": "Theme-specific danger active color." },
-        "light": { "value": "{color.light.900}", "type": "color", "description": "Theme-specific light active color." },
-        "dark": { "value": "{color.dark.900}", "type": "color", "description": "Theme-specific dark active color." },
-        "gray": { "value": "{color.gray.900}", "type": "color", "description": "Theme-specific gray active color." }
+        "primary": {
+          "$value": "{color.primary.900}",
+          "$description": "Theme-specific primary active color."
+        },
+        "secondary": {
+          "$value": "{color.secondary.900}",
+          "$description": "Theme-specific secondary active color."
+        },
+        "brand": {
+          "$value": "{color.brand.900}",
+          "$description": "Theme-specific brand active color."
+        },
+        "success": {
+          "$value": "{color.success.900}",
+          "$description": "Theme-specific success active color."
+        },
+        "info": {
+          "$value": "{color.info.900}",
+          "$description": "Theme-specific info active color."
+        },
+        "warning": {
+          "$value": "{color.warning.900}",
+          "$description": "Theme-specific warning active color."
+        },
+        "danger": {
+          "$value": "{color.danger.900}",
+          "$description": "Theme-specific danger active color."
+        },
+        "light": {
+          "$value": "{color.light.900}",
+          "$description": "Theme-specific light active color."
+        },
+        "dark": {
+          "$value": "{color.dark.900}",
+          "$description": "Theme-specific dark active color."
+        },
+        "gray": {
+          "$value": "{color.gray.900}",
+          "$description": "Theme-specific gray active color."
+        }
       }
     }
   }

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

@@ -1,37 +1,26 @@
 {
   "color": {
+    "$type": "color",
     "alert": {
-      "title": { "value": "{color.black}", "type": "color", "source": "$alert-title-color" },
-      "content": { "value": "{color.gray.700}", "type": "color", "source": "$alert-content-color" },
+      "title": { "source": "$alert-title-color", "$value": "{color.black}" },
+      "content": { "source": "$alert-content-color", "$value": "{color.gray.700}" },
       "icon": {
-        "success": {
-          "value": "{color.theme.default.success}", "type": "color", "source": "$alert-success-icon-color"
-        },
-        "info": { "value": "{color.theme.default.info}", "type": "color", "source": "$alert-info-icon-color" },
-        "danger": {
-          "value": "{color.theme.default.danger}", "type": "color", "source": "$alert-danger-icon-color"
-        },
-        "warning": {
-          "value": "{color.theme.default.warning}", "type": "color", "source": "$alert-warning-icon-color"
-        }
+        "success": { "source": "$alert-success-icon-color", "$value": "{color.theme.default.success}" },
+        "info": { "source": "$alert-info-icon-color", "$value": "{color.theme.default.info}" },
+        "danger": { "source": "$alert-danger-icon-color", "$value": "{color.theme.default.danger}" },
+        "warning": { "source": "$alert-warning-icon-color", "$value": "{color.theme.default.warning}" }
       },
       "bg": {
-        "success": { "value": "{color.theme.bg.success}", "type": "color", "source": "$alert-success-bg" },
-        "info": { "value": "{color.theme.bg.info}", "type": "color", "source": "$alert-info-bg" },
-        "danger": { "value": "{color.theme.bg.danger}", "type": "color", "source": "$alert-danger-bg" },
-        "warning": { "value": "{color.theme.bg.warning}", "type": "color", "source": "$alert-warning-bg" }
+        "success": { "source": "$alert-success-bg", "$value": "{color.theme.bg.success}" },
+        "info": { "source": "$alert-info-bg", "$value": "{color.theme.bg.info}" },
+        "danger": { "source": "$alert-danger-bg", "$value": "{color.theme.bg.danger}" },
+        "warning": { "source": "$alert-warning-bg", "$value": "{color.theme.bg.warning}" }
       },
       "border": {
-        "success": {
-          "value": "{color.theme.border.success}", "type": "color", "source": "$alert-success-border-color"
-        },
-        "info": { "value": "{color.theme.border.info}", "type": "color", "source": "$alert-info-border-color" },
-        "danger": {
-          "value": "{color.theme.border.danger}", "type": "color", "source": "$alert-danger-border-color"
-        },
-        "warning": {
-          "value": "{color.theme.border.warning}", "type": "color", "source": "$alert-warning-border-color"
-        }
+        "success": { "source": "$alert-success-border-color", "$value": "{color.theme.border.success}" },
+        "info": { "source": "$alert-info-border-color", "$value": "{color.theme.border.info}" },
+        "danger": { "source": "$alert-danger-border-color", "$value": "{color.theme.border.danger}" },
+        "warning": { "source": "$alert-warning-border-color", "$value": "{color.theme.border.warning}" }
       }
     }
   }

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

@@ -1,28 +1,42 @@
 {
   "elevation": {
+    "$type": "shadow",
     "annotation": {
       "box-shadow": {
-        "value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15))",
-        "type": "shadow",
-        "source": "$annotation-box-shadow"
+        "source": "$annotation-box-shadow",
+        "$value": [
+          {
+            "color": "rgba(0, 0, 0, .15)",
+            "offsetX": "0",
+            "offsetY": "2px",
+            "blur": "4px"
+          },
+          {
+            "color": "rgba(0, 0, 0, .15)",
+            "offsetX": "0",
+            "offsetY": "2px",
+            "blur": "8px"
+          }
+        ]
       }
     }
   },
   "color": {
+    "$type": "color",
     "annotation": {
       "text": {
-        "success": { "value": "{color.white}", "type": "color", "source": "$annotation-success-color" },
-        "warning": { "value": "{color.black}", "type": "color", "source": "$annotation-warning-color" },
-        "error": { "value": "{color.white}", "type": "color", "source": "$annotation-error-color" },
-        "light": { "value": "{color.primary.500}", "type": "color", "source": "$annotation-light-color" },
-        "dark": { "value": "{color.white}", "type": "color", "source": "$annotation-dark-color" }
+        "success": { "source": "$annotation-success-color", "$value": "{color.white}" },
+        "warning": { "source": "$annotation-warning-color", "$value": "{color.black}" },
+        "error": { "source": "$annotation-error-color", "$value": "{color.white}" },
+        "light": { "source": "$annotation-light-color", "$value": "{color.primary.500}" },
+        "dark": { "source": "$annotation-dark-color", "$value": "{color.white}" }
       },
       "bg": {
-        "success": { "value": "{color.success.base}", "type": "color", "source": "$annotation-success-bg" },
-        "warning": { "value": "{color.accent.b}", "type": "color", "source": "$annotation-warning-bg" },
-        "error": { "value": "{color.danger.base}", "type": "color", "source": "$annotation-error-bg" },
-        "light": { "value": "{color.white}", "type": "color", "source": "$annotation-light-bg" },
-        "dark": { "value": "{color.dark.base}", "type": "color", "source": "$annotation-dark-bg" }
+        "success": { "source": "$annotation-success-bg", "$value": "{color.success.base}" },
+        "warning": { "source": "$annotation-warning-bg", "$value": "{color.accent.b}" },
+        "error": { "source": "$annotation-error-bg", "$value": "{color.danger.base}" },
+        "light": { "source": "$annotation-light-bg", "$value": "{color.white}" },
+        "dark": { "source": "$annotation-dark-bg", "$value": "{color.dark.base}" }
       }
     }
   }

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

@@ -1,7 +1,8 @@
 {
   "color": {
+    "$type": "color",
     "avatar": {
-      "border": { "value": "{color.light.300}", "type": "color" }
+      "border": { "$value": "{color.light.300}" }
     }
   }
 }