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

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

@@ -1,183 +1,118 @@
 {
   "color": {
+    "$type": "color",
     "badge": {
       "text": {
-        "primary": {
-          "value": "{color.primary.base}",
-          "type": "color",
-          "source": "$badge-primary-color",
-          "modify": [{ "type": "color-yiq" }]
-        },
-        "secondary": {
-          "value": "{color.secondary.base}",
-          "type": "color",
-          "source": "$badge-secondary-color",
-          "modify": [{ "type": "color-yiq" }]
-        },
-        "success": {
-          "value": "{color.success.base}",
-          "type": "color",
-          "source": "$badge-success-color",
-          "modify": [{ "type": "color-yiq" }]
-        },
-        "danger": {
-          "value": "{color.danger.base}",
-          "type": "color",
-          "source": "$badge-danger-color",
-          "modify": [{ "type": "color-yiq" }]
-        },
-        "warning": {
-          "value": "{color.warning.base}",
-          "type": "color",
-          "source": "$badge-warning-color",
-          "modify": [{ "type": "color-yiq" }]
-        },
-        "info": {
-          "value": "{color.info.base}",
-          "type": "color",
-          "source": "$badge-info-color",
-          "modify": [{ "type": "color-yiq" }]
-        },
-        "light": {
-          "value": "{color.light.base}",
-          "type": "color",
-          "source": "$badge-light-color",
-          "modify": [{ "type": "color-yiq" }]
-        },
-        "dark": {
-          "value": "{color.dark.base}",
-          "type": "color",
-          "source": "$badge-dark-color",
-          "modify": [{ "type": "color-yiq" }]
-        }
+        "primary": { "source": "$badge-primary-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.primary.base}" },
+        "secondary": { "source": "$badge-secondary-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.secondary.base}" },
+        "success": { "source": "$badge-success-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.success.base}" },
+        "danger": { "source": "$badge-danger-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.danger.base}" },
+        "warning": { "source": "$badge-warning-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.warning.base}" },
+        "info": { "source": "$badge-info-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.info.base}" },
+        "light": { "source": "$badge-light-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.light.base}" },
+        "dark": { "source": "$badge-dark-color", "modify": [{ "type": "color-yiq" }], "$value": "{color.dark.base}" }
       },
       "bg": {
-        "primary": { "value": "{color.primary.base}", "type": "color", "source": "$badge-primary-bg" },
-        "secondary": { "value": "{color.secondary.base}", "type": "color", "source": "$badge-secondary-bg" },
-        "success": { "value": "{color.success.base}", "type": "color", "source": "$badge-success-bg" },
-        "warning": { "value": "{color.warning.base}", "type": "color", "source": "$badge-warning-bg" },
-        "danger": { "value": "{color.danger.base}", "type": "color", "source": "$badge-danger-bg" },
-        "info": { "value": "{color.info.base}", "type": "color", "source": "$badge-info-bg" },
-        "light": { "value": "{color.light.base}", "type": "color", "source": "$badge-light-bg" },
-        "dark": { "value": "{color.dark.base}", "type": "color", "source": "$badge-dark-bg" }
+        "primary": { "source": "$badge-primary-bg", "$value": "{color.primary.base}" },
+        "secondary": { "source": "$badge-secondary-bg", "$value": "{color.secondary.base}" },
+        "success": { "source": "$badge-success-bg", "$value": "{color.success.base}" },
+        "warning": { "source": "$badge-warning-bg", "$value": "{color.warning.base}" },
+        "danger": { "source": "$badge-danger-bg", "$value": "{color.danger.base}" },
+        "info": { "source": "$badge-info-bg", "$value": "{color.info.base}" },
+        "light": { "source": "$badge-light-bg", "$value": "{color.light.base}" },
+        "dark": { "source": "$badge-dark-bg", "$value": "{color.dark.base}" }
       },
       "focus": {
-        "primary": {
-          "value": "{color.badge.text.primary}", "type": "color", "source": "$badge-primary-focus-color"
-        },
-        "secondary": {
-          "value": "{color.badge.text.secondary}", "type": "color", "source": "$badge-secondary-focus-color"
-        },
-        "success": {
-          "value": "{color.badge.text.success}", "type": "color", "source": "$badge-success-focus-color"
-        },
-        "warning": {
-          "value": "{color.badge.text.warning}", "type": "color", "source": "$badge-warning-focus-color"
-        },
-        "danger": {
-          "value": "{color.badge.text.danger}", "type": "color", "source": "$badge-danger-focus-color"
-        },
-        "info": { "value": "{color.badge.text.info}", "type": "color", "source": "$badge-info-focus-color" },
-        "light": { "value": "{color.badge.text.light}", "type": "color", "source": "$badge-light-focus-color" },
-        "dark": { "value": "{color.badge.text.dark}", "type": "color", "source": "$badge-dark-focus-color" },
+        "primary": { "source": "$badge-primary-focus-color", "$value": "{color.badge.text.primary}" },
+        "secondary": { "source": "$badge-secondary-focus-color", "$value": "{color.badge.text.secondary}" },
+        "success": { "source": "$badge-success-focus-color", "$value": "{color.badge.text.success}" },
+        "warning": { "source": "$badge-warning-focus-color", "$value": "{color.badge.text.warning}" },
+        "danger": { "source": "$badge-danger-focus-color", "$value": "{color.badge.text.danger}" },
+        "info": { "source": "$badge-info-focus-color", "$value": "{color.badge.text.info}" },
+        "light": { "source": "$badge-light-focus-color", "$value": "{color.badge.text.light}" },
+        "dark": { "source": "$badge-dark-focus-color", "$value": "{color.badge.text.dark}" },
         "bg": {
           "primary": {
-            "value": "{color.badge.bg.primary}",
-            "type": "color",
             "source": "$badge-primary-focus-bg",
-            "modify": [{ "type": "darken", "amount": 0.1 }]
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.badge.bg.primary}"
           },
           "secondary": {
-            "value": "{color.badge.bg.secondary}",
-            "type": "color",
             "source": "$badge-secondary-focus-bg",
-            "modify": [{ "type": "darken", "amount": 0.1 }]
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.badge.bg.secondary}"
           },
           "success": {
-            "value": "{color.badge.bg.success}",
-            "type": "color",
             "source": "$badge-success-focus-bg",
-            "modify": [{ "type": "darken", "amount": 0.1 }]
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.badge.bg.success}"
           },
           "danger": {
-            "value": "{color.badge.bg.danger}",
-            "type": "color",
             "source": "$badge-danger-focus-bg",
-            "modify": [{ "type": "darken", "amount": 0.1 }]
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.badge.bg.danger}"
           },
           "warning": {
-            "value": "{color.badge.bg.warning}",
-            "type": "color",
             "source": "$badge-warning-focus-bg",
-            "modify": [{ "type": "darken", "amount": 0.1 }]
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.badge.bg.warning}"
           },
           "info": {
-            "value": "{color.badge.bg.info}",
-            "type": "color",
             "source": "$badge-info-focus-bg",
-            "modify": [{ "type": "darken", "amount": 0.1 }]
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.badge.bg.info}"
           },
           "light": {
-            "value": "{color.badge.bg.light}",
-            "type": "color",
             "source": "$badge-light-focus-bg",
-            "modify": [{ "type": "darken", "amount": 0.1 }]
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.badge.bg.light}"
           },
           "dark": {
-            "value": "{color.badge.bg.dark}",
-            "type": "color",
             "source": "$badge-dark-focus-bg",
-            "modify": [{ "type": "darken", "amount": 0.1 }]
+            "modify": [{ "type": "darken", "amount": 0.1 }],
+            "$value": "{color.badge.bg.dark}"
           }
         },
         "box-shadow": {
           "primary": {
-            "value": "{color.badge.bg.primary}",
-            "type": "color",
             "source": "$badge-primary-focus-box-shadow-color",
-            "modify": [{ "type": "alpha", "amount": 0.05 }]
+            "modify": [{ "type": "alpha", "amount": 0.05 }],
+            "$value": "{color.badge.bg.primary}"
           },
           "secondary": {
-            "value": "{color.badge.bg.secondary}",
-            "type": "color",
             "source": "$badge-secondary-focus-box-shadow-color",
-            "modify": [{ "type": "alpha", "amount": 0.05 }]
+            "modify": [{ "type": "alpha", "amount": 0.05 }],
+            "$value": "{color.badge.bg.secondary}"
           },
           "success": {
-            "value": "{color.badge.bg.success}",
-            "type": "color",
             "source": "$badge-success-focus-box-shadow-color",
-            "modify": [{ "type": "alpha", "amount": 0.05 }]
+            "modify": [{ "type": "alpha", "amount": 0.05 }],
+            "$value": "{color.badge.bg.success}"
           },
           "danger": {
-            "value": "{color.badge.bg.danger}",
-            "type": "color",
             "source": "$badge-danger-focus-box-shadow-color",
-            "modify": [{ "type": "alpha", "amount": 0.05 }]
+            "modify": [{ "type": "alpha", "amount": 0.05 }],
+            "$value": "{color.badge.bg.danger}"
           },
           "warning": {
-            "value": "{color.badge.bg.warning}",
-            "type": "color",
             "source": "$badge-warning-focus-box-shadow-color",
-            "modify": [{ "type": "alpha", "amount": 0.05 }]
+            "modify": [{ "type": "alpha", "amount": 0.05 }],
+            "$value": "{color.badge.bg.warning}"
           },
           "info": {
-            "value": "{color.badge.bg.info}",
-            "type": "color",
             "source": "$badge-info-focus-box-shadow-color",
-            "modify": [{ "type": "alpha", "amount": 0.05 }]
+            "modify": [{ "type": "alpha", "amount": 0.05 }],
+            "$value": "{color.badge.bg.info}"
           },
           "light": {
-            "value": "{color.badge.bg.light}",
-            "type": "color",
             "source": "$badge-light-focus-box-shadow-color",
-            "modify": [{ "type": "alpha", "amount": 0.05 }]
+            "modify": [{ "type": "alpha", "amount": 0.05 }],
+            "$value": "{color.badge.bg.light}"
           },
           "dark": {
-            "value": "{color.badge.bg.dark}",
-            "type": "color",
             "source": "$badge-dark-focus-box-shadow-color",
-            "modify": [{ "type": "alpha", "amount": 0.05 }]
+            "modify": [{ "type": "alpha", "amount": 0.05 }],
+            "$value": "{color.badge.bg.dark}"
           }
         }
       }

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

@@ -1,12 +1,13 @@
 {
   "color": {
+    "$type": "color",
     "breadcrumb": {
-      "base": { "value": "{color.primary.500}", "type": "color", "source": "$breadcrumb-color" },
-      "active": { "value": "{color.gray.500}", "type": "color", "source": "$breadcrumb-active-color" },
+      "base": { "source": "$breadcrumb-color", "$value": "{color.primary.500}" },
+      "active": { "source": "$breadcrumb-active-color", "$value": "{color.gray.500}" },
       "inverse": {
-        "base": { "value": "{color.white}", "type": "color", "source": "$breadcrumb-inverse-color" },
-        "active": { "value": "{color.light.500}", "type": "color", "source": "$breadcrumb-inverse-active" },
-        "spacer": { "value": "{color.light.700}", "type": "color", "source": "$breadcrumb-inverse-spacer" }
+        "base": { "source": "$breadcrumb-inverse-color", "$value": "{color.white}" },
+        "active": { "source": "$breadcrumb-inverse-active", "$value": "{color.light.500}" },
+        "spacer": { "source": "$breadcrumb-inverse-spacer", "$value": "{color.light.700}" }
       }
     }
   }

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

@@ -1,17 +1,18 @@
 {
   "color": {
+    "$type": "color",
     "bubble": {
       "text": {
-        "success": { "value": "{color.white}", "type": "color", "source": "$bubble-success-color" },
-        "warning": { "value": "{color.white}", "type": "color", "source": "$bubble-warning-color" },
-        "error": { "value": "{color.white}", "type": "color", "source": "$bubble-error-color" },
-        "primary": { "value": "{color.white}", "type": "color", "source": "$bubble-primary-color" }
+        "success": { "source": "$bubble-success-color", "$value": "{color.white}" },
+        "warning": { "source": "$bubble-warning-color", "$value": "{color.white}" },
+        "error": { "source": "$bubble-error-color", "$value": "{color.white}" },
+        "primary": { "source": "$bubble-primary-color", "$value": "{color.white}" }
       },
       "bg": {
-        "success": { "value": "{color.success.base}", "type": "color", "source": "$bubble-success-bg" },
-        "warning": { "value": "{color.warning.base}", "type": "color", "source": "$bubble-warning-bg" },
-        "error": { "value": "{color.danger.base}", "type": "color", "source": "$bubble-error-bg" },
-        "primary": { "value": "{color.primary.base}", "type": "color", "source": "$bubble-primary-bg" }
+        "success": { "source": "$bubble-success-bg", "$value": "{color.success.base}" },
+        "warning": { "source": "$bubble-warning-bg", "$value": "{color.warning.base}" },
+        "error": { "source": "$bubble-error-bg", "$value": "{color.danger.base}" },
+        "primary": { "source": "$bubble-primary-bg", "$value": "{color.primary.base}" }
       }
     }
   }