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

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

@@ -1,30 +1,45 @@
 {
   "color": {
+    "$type": "color",
     "tooltip": {
-      "text": { "value": "{color.white}", "type": "color", "source": "$tooltip-color" },
-      "light": { "value": "{color.black}", "type": "color", "source": "$tooltip-color-light" },
+      "text": { "source": "$tooltip-color", "$value": "{color.white}" },
+      "light": { "source": "$tooltip-color-light", "$value": "{color.black}" },
       "bg": {
-        "base": { "value": "{color.black}", "type": "color", "source": "$tooltip-bg" },
-        "light": { "value": "{color.white}", "type": "color", "source": "$tooltip-bg-light" }
+        "base": { "source": "$tooltip-bg", "$value": "{color.black}" },
+        "light": { "source": "$tooltip-bg-light", "$value": "{color.white}" }
       },
       "arrow": {
-        "base": { "value": "{color.tooltip.bg.base}", "type": "color", "source": "$tooltip-arrow-color" },
-        "light": { "value": "{color.white}", "type": "color", "source": "$tooltip-arrow-color-light" }
+        "base": { "source": "$tooltip-arrow-color", "$value": "{color.tooltip.bg.base}" },
+        "light": { "source": "$tooltip-arrow-color-light", "$value": "{color.white}" }
       }
     }
   },
   "elevation": {
+    "$type": "shadow",
     "tooltip": {
       "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": "$tooltip-box-shadow"
+        "source": "$tooltip-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"
+          }
+        ]
       }
     }
   },
   "other": {
+    "$type": "number",
     "tooltip": {
-      "opacity": { "value": "1", "type": "ratio", "source": "$tooltip-opacity" }
+      "opacity": { "source": "$tooltip-opacity", "$value": "1" }
     }
   }
 }

package/tokens/src/themes/light/components/general/body.json

@@ -1,8 +1,9 @@
 {
   "color": {
+    "$type": "color",
     "body": {
-      "base": { "value": "{color.gray.700}", "type": "color", "source": "$body-color" },
-      "bg": { "value": "{color.bg.base}", "type": "color", "source": "$body-bg" }
+      "base": { "source": "$body-color", "$value": "{color.gray.700}" },
+      "bg": { "source": "$body-bg", "$value": "{color.bg.base}" }
     }
   }
 }

package/tokens/src/themes/light/components/general/headings.json

@@ -1,7 +1,8 @@
 {
   "color": {
+    "$type": "color",
     "headings": {
-      "base": { "value": "{color.black}", "type": "color", "source": "$headings-color" }
+      "base": { "source": "$headings-color", "$value": "{color.black}" }
     }
   }
 }

package/tokens/src/themes/light/components/general/hr.json

@@ -1,14 +1,11 @@
 {
   "color": {
+    "$type": "color",
     "hr": {
       "border": {
-        "value": "{color.black}",
-        "type": "color",
         "source": "$hr-border-color",
-        "modify": [{
-          "type": "alpha",
-          "amount": 0.1
-        }]
+        "modify": [{ "type": "alpha", "amount": 0.1 }],
+        "$value": "{color.black}"
       }
     }
   }

package/tokens/src/themes/light/components/general/input.json

@@ -1,16 +1,23 @@
 {
   "color": {
+    "$type": "color",
     "input": {
-      "btn-focus": { "value": "{color.bg.active}", "type": "color", "source": "$input-btn-focus-color" }
+      "btn-focus": { "source": "$input-btn-focus-color", "$value": "{color.bg.active}" }
     }
   },
   "elevation": {
+    "$type": "shadow",
     "input": {
       "btn-focus": {
         "box-shadow": {
-          "value": "0 0 0 {size.input.btn.focus-width} {color.input.btn-focus}",
-          "type": "shadow",
-          "source": "$input-btn-focus-box-shadow"
+          "source": "$input-btn-focus-box-shadow",
+          "$value": {
+            "color": "{color.input.btn-focus}",
+            "spread": "{size.input.btn.focus-width}",
+            "offsetX": "0",
+            "offsetY": "0",
+            "blur": "0"
+          }
         }
       }
     }

package/tokens/src/themes/light/components/general/link.json

@@ -1,96 +1,85 @@
 {
   "color": {
+    "$type": "color",
     "link": {
-      "base": { "value": "{color.info.500}", "type": "color", "source": "$link-color" },
+      "base": { "source": "$link-color", "$value": "{color.info.500}" },
       "hover": {
-        "value": "{color.link.base}",
-        "type": "color",
         "source": "$link-hover-color",
-        "modify": [{ "type": "darken", "amount": 0.15 }]
+        "modify": [{ "type": "darken", "amount": 0.15 }],
+        "$value": "{color.link.base}"
       },
       "inline": {
-        "base": { "value": "{color.info.500}", "type": "color", "source": "$inline-link-color" },
+        "base": { "source": "$inline-link-color", "$value": "{color.info.500}" },
         "decoration": {
-          "value": "{color.link.inline.base}",
-          "type": "color",
           "source": "$inline-link-decoration-color",
-          "modify": [{ "type": "alpha", "amount": 0.3 }]
+          "modify": [{ "type": "alpha", "amount": 0.3 }],
+          "$value": "{color.link.inline.base}"
         },
         "hover": {
           "base": {
-            "value": "{color.link.inline.base}",
-            "type": "color",
             "source": "$inline-link-hover-color",
-            "modify": [{ "type": "darken", "amount": 0.15 }]
+            "modify": [{ "type": "darken", "amount": 0.15 }],
+            "$value": "{color.link.inline.base}"
           },
           "decoration": {
-            "value": "{color.link.inline.hover.base}",
-            "type": "color",
             "source": "$inline-link-hover-decoration-color",
-            "modify": [{ "type": "alpha", "amount": 1 }]
+            "modify": [{ "type": "alpha", "amount": 1 }],
+            "$value": "{color.link.inline.hover.base}"
           }
         }
       },
       "muted": {
-        "base": { "value": "{color.primary.500}", "type": "color",  "source": "$muted-link-color" },
+        "base": { "source": "$muted-link-color", "$value": "{color.primary.500}" },
         "hover": {
-          "value": "{color.link.muted.base}",
-          "type": "color",
           "source": "$muted-link-hover-color",
-          "modify": [{ "type": "darken", "amount": 0.15 }]
+          "modify": [{ "type": "darken", "amount": 0.15 }],
+          "$value": "{color.link.muted.base}"
         },
         "inline": {
-          "base": { "value": "{color.primary.500}", "type": "color", "source": "$muted-inline-link-color" },
+          "base": { "source": "$muted-inline-link-color", "$value": "{color.primary.500}" },
           "decoration": {
-            "value": "{color.link.muted.inline.base}",
-            "type": "color",
             "source": "$muted-inline-link-decoration-color",
-            "modify": [{ "type": "alpha", "amount": 0.3 }]
+            "modify": [{ "type": "alpha", "amount": 0.3 }],
+            "$value": "{color.link.muted.inline.base}"
           },
           "hover": {
             "base": {
-              "value": "{color.link.muted.inline.base}",
-              "type": "color",
               "source": "$muted-inline-link-hover-color",
-              "modify": [{ "type": "darken", "amount": 0.15 }]
+              "modify": [{ "type": "darken", "amount": 0.15 }],
+              "$value": "{color.link.muted.inline.base}"
             },
             "decoration": {
-              "value": "{color.link.muted.inline.hover.base}",
-              "type": "color",
               "source": "$muted-inline-link-hover-decoration-color",
-              "modify": [{ "type": "alpha", "amount": 1 }]
+              "modify": [{ "type": "alpha", "amount": 1 }],
+              "$value": "{color.link.muted.inline.hover.base}"
             }
           }
         }
       },
       "brand": {
-        "base": { "value": "{color.brand.500}", "type": "color", "source": "$brand-link-color" },
+        "base": { "source": "$brand-link-color", "$value": "{color.brand.500}" },
         "hover": {
-          "value": "{color.link.brand.base}",
-          "type": "color",
           "source": "$brand-link-hover-color",
-          "modify": [{ "type": "darken", "amount": 0.15 }]
+          "modify": [{ "type": "darken", "amount": 0.15 }],
+          "$value": "{color.link.brand.base}"
         },
         "inline": {
-          "base": { "value": "{color.brand.500}", "type": "color", "source": "$brand-inline-link-color" },
+          "base": { "source": "$brand-inline-link-color", "$value": "{color.brand.500}" },
           "decoration": {
-            "value": "{color.link.brand.inline.base}",
-            "type": "color",
             "source": "$brand-inline-link-decoration-color",
-            "modify": [{ "type": "alpha", "amount": 0.3 }]
+            "modify": [{ "type": "alpha", "amount": 0.3 }],
+            "$value": "{color.link.brand.inline.base}"
           },
           "hover": {
             "base": {
-              "value": "{color.link.brand.inline.base}",
-              "type": "color",
               "source": "$brand-inline-link-hover-color",
-              "modify": [{ "type": "darken", "amount": 0.15 }]
+              "modify": [{ "type": "darken", "amount": 0.15 }],
+              "$value": "{color.link.brand.inline.base}"
             },
             "decoration": {
-              "value": "{color.link.brand.inline.hover.base}",
-              "type": "color",
               "source": "$brand-inline-link-hover-decoration-color",
-              "modify": [{ "type": "alpha", "amount": 1 }]
+              "modify": [{ "type": "alpha", "amount": 1 }],
+              "$value": "{color.link.brand.inline.hover.base}"
             }
           }
         }
@@ -98,10 +87,12 @@
     }
   },
   "other": {
+    "$type": "percentage",
     "link": {
       "emphasized-hover": {
         "darken-percentage": {
-          "value": "15%", "type": "percentage", "source": "$emphasized-link-hover-darken-percentage"
+          "source": "$emphasized-link-hover-darken-percentage",
+          "$value": "15%"
         }
       }
     }

package/tokens/src/themes/light/components/general/list.json

@@ -1,36 +1,32 @@
 {
   "color": {
+    "$type": "color",
     "list-group": {
-      "base": { "value": "inherit", "type": "color", "source": "$list-group-color" },
+      "base": { "source": "$list-group-color", "$value": "inherit" },
       "bg": {
-        "base": { "value": "{color.white}", "type": "color", "source": "$list-group-bg" },
-        "hover": { "value": "{color.gray.100}", "type": "color", "source": "$list-group-hover-bg" }
+        "base": { "source": "$list-group-bg", "$value": "{color.white}" },
+        "hover": { "source": "$list-group-hover-bg", "$value": "{color.gray.100}" }
       },
       "border": {
-        "value": "{color.black}",
-        "type": "color",
         "source": "$list-group-border-color",
-        "modify": [{ "type": "alpha", "amount": 0.125 }]
+        "modify": [{ "type": "alpha", "amount": 0.125 }],
+        "$value": "{color.black}"
       },
       "active": {
-        "base": { "value": "{color.active}", "type": "color",  "source": "$list-group-active-color" },
-        "border": {
-          "value": "{color.list-group.active.bg}", "type": "color",  "source": "$list-group-active-border-color"
-        },
-        "bg": { "value": "{color.bg.active}", "type": "color", "source": "$list-group-active-bg" }
+        "base": { "source": "$list-group-active-color", "$value": "{color.active}" },
+        "border": { "source": "$list-group-active-border-color", "$value": "{color.list-group.active.bg}" },
+        "bg": { "source": "$list-group-active-bg", "$value": "{color.bg.active}" }
       },
       "disabled": {
-        "base": { "value": "{color.gray.600}", "type": "color", "source": "$list-group-disabled-color" },
-        "bg": { "value": "{color.list-group.bg.base}", "type": "color", "source": "$list-group-disabled-bg" }
+        "base": { "source": "$list-group-disabled-color", "$value": "{color.gray.600}" },
+        "bg": { "source": "$list-group-disabled-bg", "$value": "{color.list-group.bg.base}" }
       },
       "action": {
-        "base": { "value": "{color.gray.700}", "type": "color", "source": "$list-group-action-color" },
-        "hover": {
-          "value": "{color.list-group.action.base}", "type": "color", "source": "$list-group-action-hover-color"
-        },
+        "base": { "source": "$list-group-action-color", "$value": "{color.gray.700}" },
+        "hover": { "source": "$list-group-action-hover-color", "$value": "{color.list-group.action.base}" },
         "active": {
-          "base": { "value": "{color.body.base}", "type": "color", "source": "$list-group-action-active-color" },
-          "bg": { "value": "{color.gray.200}", "type": "color", "source": "$list-group-action-active-bg" }
+          "base": { "source": "$list-group-action-active-color", "$value": "{color.body.base}" },
+          "bg": { "source": "$list-group-action-active-bg", "$value": "{color.gray.200}" }
         }
       }
     }

package/tokens/src/themes/light/components/general/text.json

@@ -1,12 +1,11 @@
 {
   "color": {
-    "text-muted": { "value": "{color.gray.500}", "type": "color", "source": "$text-muted" },
-    "mark-bg": { "value": "#FFF243", "type": "color", "source": "$mark-bg" },
+    "$type": "color",
+    "text-muted": { "source": "$text-muted", "$value": "{color.gray.500}" },
+    "mark-bg": { "source": "$mark-bg", "$value": "#FFF243" },
     "blockquote": {
-      "small": {
-        "value": "{color.gray.500}", "type": "color", "source": "$blockquote-small-color"
-      }
+      "small": { "source": "$blockquote-small-color", "$value": "{color.gray.500}" }
     },
-    "yiq-light": { "value": "{color.white}", "type": "color", "source": "$yiq-text-light" }
+    "yiq-light": { "source": "$yiq-text-light", "$value": "{color.white}" }
   }
 }