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

package/tokens/src/core/global/typography.json

@@ -2,90 +2,285 @@
   "typography": {
     "font": {
       "family": {
+        "$type": "fontFamily",
         "base": {
-          "value": "{typography.font.family.sans.serif}",
-          "type": "fontFamily",
           "source": "$font-family-base",
-          "description": "Basic font family."
+          "$value": "{typography.font.family.sans.serif}",
+          "$description": "Basic font family."
         },
         "sans": {
           "serif": {
-            "value": "-apple-system, BlinkMacSystemFont, \"Segoe UI\",  Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\",  \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"",
-            "type": "fontFamily",
             "source": "$font-family-sans-serif",
-            "description": "Sans-serif font family."
+            "$value": ["-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial",
+            "Noto Sans", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"],
+            "$description": "Sans-serif font family."
           }
         },
-        "serif": { "value": "serif", "source": "$font-family-serif", "description": "Serif font family." },
+        "serif": {
+          "source": "$font-family-serif",
+          "$value": "serif",
+          "$description": "Serif font family."
+        },
         "monospace": {
-          "value": "SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",  \"Courier New\", monospace",
-          "type": "fontFamily",
           "source": "$font-family-monospace",
-          "description": "Monospace font family."
+          "$value": ["SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono",  "Courier New", "monospace"],
+          "$description": "Monospace font family."
         }
       },
       "size": {
-        "base": { "value": "1.125rem", "type": "dimension", "source": "$font-size-base", "description": "Base font size." },
-        "lg": { "value": "1.4063rem", "type": "dimension", "source": "$font-size-lg", "description": "Large font size." },
-        "sm": { "value": ".875rem", "type": "dimension", "source": "$font-size-sm", "description": "Small font size." },
-        "xs": { "value": ".75rem", "type": "dimension", "source": "$font-size-xs", "description": "Extra-small font size." },
-        "small": {
-          "base": { "value": "87.5%", "type": "percentage", "source": "$small-font-size", "description": "Small font size." },
-          "x": { "value": "75%", "type": "percentage", "source": "$x-small-font-size", "description": "X-small font size." }
-        },
-        "h1": { "value": "2.5rem", "type": "dimension", "source": "$h1-font-size", "description": "Font size of heading level 1." },
-        "h2": { "value": "2rem", "type": "dimension", "source": "$h2-font-size", "description": "Font size of heading level 2." },
-        "h3": { "value": "1.375rem", "type": "dimension", "source": "$h3-font-size", "description": "Font size of heading level 3." },
-        "h4": { "value": "1.125rem", "type": "dimension", "source": "$h4-font-size", "description": "Font size of heading level 4." },
-        "h5": { "value": ".875rem", "type": "dimension", "source": "$h5-font-size", "description": "Font size of heading level 5." },
-        "h6": { "value": ".75rem", "type": "dimension", "source": "$h6-font-size", "description": "Font size of heading level 6." },
-        "mobile": {
-          "h1": { "value": "2.25rem", "type": "dimension", "source": "$h1-mobile-font-size", "description": "Mobile font size of heading level 1." },
-          "h2": { "value": "{typography.font.size.h2}", "type": "dimension", "source": "$h2-mobile-font-size", "description": "Mobile font size of heading level 2." },
-          "h3": { "value": "{typography.font.size.h3}", "type": "dimension", "source": "$h3-mobile-font-size", "description": "Mobile font size of heading level 3." },
-          "h4": { "value": "{typography.font.size.h4}", "type": "dimension", "source": "$h4-mobile-font-size", "description": "Mobile font size of heading level 4." },
-          "h5": { "value": "{typography.font.size.h5}", "type": "dimension", "source": "$h5-mobile-font-size", "description": "Mobile font size of heading level 5." },
-          "h6": { "value": "{typography.font.size.h6}", "type": "dimension", "source": "$h6-mobile-font-size", "description": "Mobile font size of heading level 6." }
+        "$type": "dimension",
+        "base": {
+          "source": "$font-size-base",
+          "$value": "1.125rem",
+          "$description": "Base font size."
         },
-        "lead": {
-          "value": "calc({typography.font.size.base} * 1.25)",
-          "type": "dimension",
+        "lg": {
           "source": "$lead-font-size",
-          "description": "Lead text font size."
+          "$value": "calc({typography.font.size.base} * 1.25)",
+          "$description": "Lead text font size."
+        },
+        "sm": {
+          "source": "$small-font-size",
+          "$value": "87.5%",
+          "$description": "Small font size."
+        },
+        "xs": {
+          "source": "$x-small-font-size",
+          "$value": "75%",
+          "$description": "X-small font size."
         },
         "micro": {
-          "value": ".688rem",
-          "type": "dimension",
           "source": "$micro-font-size",
-          "description": "Micro utils text font size."
+          "$value": ".688rem",
+          "$type": "dimension",
+          "$description": "Micro utils text font size."
+        },
+        "h1": {
+          "base": {
+            "source": "$h1-font-size",
+            "$value": "2.5rem",
+            "$description": "Base font size of heading level 1."
+          },
+          "mobile": {
+            "source": "$h1-mobile-font-size",
+            "$value": "2.25rem",
+            "$description": "Mobile font size of heading level 1."
+          }
+        },
+        "h2": {
+          "base": {
+            "source": "$h2-font-size",
+            "$value": "2rem",
+            "$description": "Font size of heading level 2."
+          },
+          "mobile": {
+            "source": "$h2-mobile-font-size",
+            "$value": "{typography.font.size.h2.base}",
+            "$description": "Mobile font size of heading level 2."
+          }
+        },
+        "h3": {
+          "base": {
+            "source": "$h3-font-size",
+            "$value": "1.375rem",
+            "$description": "Font size of heading level 3."
+          },
+          "mobile": {
+            "source": "$h3-mobile-font-size",
+            "$value": "{typography.font.size.h3.base}",
+            "$description": "Mobile font size of heading level 3."
+          }
+        },
+        "h4": {
+          "base": {
+            "source": "$h4-font-size",
+            "$value": "1.125rem",
+            "$description": "Font size of heading level 4."
+          },
+          "mobile": {
+            "source": "$h4-mobile-font-size",
+            "$value": "{typography.font.size.h4.base}",
+            "$description": "Mobile font size of heading level 4."
+          }
+        },
+        "h5": {
+          "base": {
+            "source": "$h5-font-size",
+            "$value": ".875rem",
+            "$description": "Font size of heading level 5."
+          },
+          "mobile": {
+            "source": "$h5-mobile-font-size",
+            "$value": "{typography.font.size.h5.base}",
+            "$description": "Mobile font size of heading level 5."
+          }
+        },
+        "h6": {
+          "base": {
+            "source": "$h6-font-size",
+            "$value": ".75rem",
+            "$description": "Font size of heading level 6."
+          },
+          "mobile": {
+            "source": "$h6-mobile-font-size",
+            "$value": "{typography.font.size.h6.base}",
+            "$description": "Mobile font size of heading level 6."
+          }
+        },
+        "display": {
+          "1": {
+            "source": "$display1-size",
+            "$value": "3.75rem",
+            "$description": "Font size for heading of level 1."
+          },
+          "2": {
+            "source": "$display2-size",
+            "$value": "4.875rem",
+            "$description": "Font size for heading of level 2."
+          },
+          "3": {
+            "source": "$display3-size",
+            "$value": "5.625rem",
+            "$description": "Font size for heading of level 3."
+          },
+          "4": {
+            "source": "$display4-size",
+            "$value": "7.5rem",
+            "$description": "Font size for heading of level 4."
+          },
+          "mobile": {
+            "1": {
+              "source": "$display-mobile-size",
+              "$value": "3.25rem",
+              "$description": "Mobile font size for heading of level 1."
+            },
+            "2": {
+              "$value": "{typography.font.size.display.mobile.1}",
+              "$description": "Mobile font size for heading of level 2."
+            },
+            "3": {
+              "$value": "{typography.font.size.display.mobile.1}",
+              "$description": "Mobile font size for heading of level 3."
+            },
+            "4": {
+              "$value": "{typography.font.size.display.mobile.1}",
+              "$description": "Mobile font size for heading of level 4."
+            }
+          }
         }
       },
       "weight": {
-        "lighter": { "value": "lighter", "type": "fontWeight", "source": "$font-weight-lighter", "description": "Lighter font weight." },
-        "light": { "value": "300", "type": "fontWeight", "source": "$font-weight-light", "description": "Light font weight." },
-        "normal": { "value": "400", "type": "fontWeight", "source": "$font-weight-normal", "description": "Normal font weight." },
+        "$type": "fontWeight",
+        "lighter": {
+          "source": "$font-weight-lighter",
+          "$value": "lighter",
+          "$description": "Lighter font weight."
+        },
+        "light": {
+          "source": "$font-weight-light",
+          "$value": "300",
+          "$description": "Light font weight."
+        },
+        "normal": {
+          "source": "$font-weight-normal",
+          "$value": "400",
+          "$description": "Normal font weight."
+        },
         "semi": {
-          "bold": { "value": "500", "type": "fontWeight", "source": "$font-weight-semi-bold", "description": "Semi-bold font weight." }
+          "bold": {
+            "source": "$font-weight-semi-bold",
+            "$value": "500",
+            "$description": "Semi-bold font weight."
+          }
+        },
+        "bold": {
+          "source": "$font-weight-bold",
+          "$value": "700",
+          "$description": "Bold font weight."
+        },
+        "bolder": {
+          "source": "$font-weight-bolder",
+          "$value": "bolder",
+          "$description": "Bolder font weight."
         },
-        "bold": { "value": "700", "type": "fontWeight", "source": "$font-weight-bold", "description": "Bold font weight." },
-        "bolder": { "value": "bolder", "type": "fontWeight", "source": "$font-weight-bolder", "description": "Bolder font weight." },
         "base": {
-          "value": "{typography.font.weight.normal}",
-          "type": "fontWeight",
           "source": "$font-weight-base",
-          "description": "Basic font weight."
+          "$value": "{typography.font.weight.normal}",
+          "$description": "Basic font weight."
+        },
+        "lead": {
+          "source": "$lead-font-weight",
+          "$value": "inherit",
+          "$description": "Lead text font weight."
         },
-        "lead": { "value": "inherit", "type": "fontWeight", "source": "$lead-font-weight", "description": "Lead text font weight." },
-        "table-th": { "value": "normal", "type": "fontWeight", "source": "$table-th-font-weight", "description": "Table th font weight." }
+        "table-th": {
+          "source": "$table-th-font-weight",
+          "$value": "bold",
+          "$description": "Table th font weight."
+        },
+        "display": {
+          "1": {
+            "source": "$display1-weight",
+            "$value": "{typography.font.weight.bold}",
+            "$description": "Font weight of display level 1."
+          },
+          "2": {
+            "source": "$display2-weight",
+            "$value": "{typography.font.weight.bold}",
+            "$description": "Font weight of display level 2."
+          },
+          "3": {
+            "source": "$display3-weight",
+            "$value": "{typography.font.weight.bold}",
+            "$description": "Font weight of display level 3."
+          },
+          "4": {
+            "source": "$display4-weight",
+            "$value": "{typography.font.weight.bold}",
+            "$description": "Font weight of display level 4."
+          }
+        }
       }
     },
     "line-height": {
-      "base": { "value": "1.5556", "type": "dimension", "source": "$line-height-base", "description": "Basic line height." },
-      "lg": { "value": "1.5", "type": "dimension", "source": "$line-height-lg", "description": "Large line height." },
-      "sm": { "value": "1.5", "type": "dimension", "source": "$line-height-sm", "description": "Small line height." },
+      "$type": "number",
+      "base": {
+        "source": "$line-height-base",
+        "$value": "1.5556",
+        "$description": "Basic line height."
+      },
+      "lg": {
+        "source": "$line-height-lg",
+        "$value": "1.5",
+        "$description": "Large line height."
+      },
+      "sm": {
+        "source": "$line-height-sm",
+        "$value": "1.5",
+        "$description": "Small line height."
+      },
       "micro": {
-        "value": ".938rem", "type": "dimension", "source": "$micro-line-height", "description": "Micro utils line height."
+        "source": "$micro-line-height",
+        "$value": ".938rem",
+        "$description": "Micro utils line height."
+      },
+      "display": {
+        "base": {
+          "source": "$display-line-height",
+          "$value": "1",
+          "$description": "Standard display line height."
+        },
+        "mobile": {
+          "source": "$display-mobile-line-height",
+          "$value": "3.5rem",
+          "$description": "Mobile display line height."
+        }
       }
+    },
+    "print-page-size": {
+      "source": "$print-page-size",
+      "$value": "a3",
+      "$type": "dimension"
     }
   }
 }

package/tokens/src/core/utilities/color.json

@@ -2,11 +2,42 @@
   "utilities": [
     {
       "filters": {
-        "category": ["color"],
-        "type": ["gray", "primary", "secondary", "brand", "success", "info", "warning", "danger", "light", "dark", "accent"],
-        "item": ["base","100", "200", "300", "400", "500", "600", "700", "800", "900", "a", "b"]
+        "category": [
+          "color"
+        ],
+        "type": [
+          "gray",
+          "primary",
+          "secondary",
+          "brand",
+          "success",
+          "info",
+          "warning",
+          "danger",
+          "light",
+          "dark",
+          "accent"
+        ],
+        "item": [
+          "base",
+          "100",
+          "200",
+          "300",
+          "400",
+          "500",
+          "600",
+          "700",
+          "800",
+          "900",
+          "a",
+          "b"
+        ]
       },
-      "utilityFunctionsToApply": ["bgVariant", "textEmphasisVariant", "borderColor"]
+      "utilityFunctionsToApply": [
+        "bgVariant",
+        "textEmphasisVariant",
+        "borderColor"
+      ]
     }
   ]
 }