refactor: corrected tokens order structure

openedx · Dec 10, 2024 · 8c5f9ee · 8c5f9ee
1 parent accdc9c
commit 8c5f9ee
Show file tree

Hide file tree

Showing 117 changed files with 7,401 additions and 3,495 deletions.
diff --git a/tokens/src/core/alias/size.json b/tokens/src/core/alias/size.json
@@ -2,15 +2,35 @@
   "size": {
     "$type": "dimension",
     "border": {
-      "width": { "source": "$border-width", "$value": "1px", "$description": "Default border width." },
+      "width": {
+        "$value": "1px",
+        "$description": "Default border width.",
+        "source": "$border-width"
+      },
       "radius": {
-        "base": { "source": "$border-radius", "$value": ".375rem", "$description": "Default border radius." },
-        "lg": { "source": "$border-radius-lg", "$value": ".425rem", "$description": "Large border radius." },
-        "sm": { "source": "$border-radius-sm", "$value": ".25rem", "$description": "Small border radius." }
+        "base": {
+          "$value": ".375rem",
+          "$description": "Default border radius.",
+          "source": "$border-radius"
+        },
+        "lg": {
+          "$value": ".425rem",
+          "$description": "Large border radius.",
+          "source": "$border-radius-lg"
+        },
+        "sm": {
+          "$value": ".25rem",
+          "$description": "Small border radius.",
+          "source": "$border-radius-sm"
+        }
       }
     },
     "rounded": {
-      "pill": { "source": "$rounded-pill", "$value": "50rem", "$description": "Pill border radius." }
+      "pill": {
+        "$value": "50rem",
+        "$description": "Pill border radius.",
+        "source": "$rounded-pill"
+      }
     }
   }
 }
diff --git a/tokens/src/core/components/ActionRow.json b/tokens/src/core/components/ActionRow.json
@@ -3,8 +3,14 @@
     "$type": "dimension",
     "action-row": {
       "gap": {
-        "x": { "source": "$action-row-gap-x", "$value": ".5rem" },
-        "y": { "source": "$action-row-gap-y", "$value": ".5rem" }
+        "x": {
+          "$value": ".5rem",
+          "source": "$action-row-gap-x"
+        },
+        "y": {
+          "$value": ".5rem",
+          "source": "$action-row-gap-y"
+        }
       }
     }
   }

diff --git a/tokens/src/core/components/Alert.json b/tokens/src/core/components/Alert.json
@@ -3,29 +3,62 @@
     "$type": "dimension",
     "alert": {
       "padding": {
-        "y": { "source": "$alert-padding-y", "$value": "1.5rem" },
-        "x": { "source": "$alert-padding-x", "$value": "1.5rem" }
+        "y": {
+          "$value": "1.5rem",
+          "source": "$alert-padding-y"
+        },
+        "x": {
+          "$value": "1.5rem",
+          "source": "$alert-padding-x"
+        }
       },
-      "margin-bottom": { "source": "$alert-margin-bottom", "$value": "1rem" },
-      "actions-gap": { "source": "$alert-actions-gap", "$value": "{spacing.spacer.3}" },
-      "icon-space": { "source": "$alert-icon-space", "$value": ".8rem" }
+      "margin-bottom": {
+        "$value": "1rem",
+        "source": "$alert-margin-bottom"
+      },
+      "actions-gap": {
+        "$value": "{spacing.spacer.3}",
+        "source": "$alert-actions-gap"
+      },
+      "icon-space": {
+        "$value": ".8rem",
+        "source": "$alert-icon-space"
+      }
     }
   },
   "typography": {
     "alert": {
       "font": {
-        "weight-link": { "source": "$alert-link-font-weight", "$value": "{typography.font.weight.normal}", "$type": "fontWeight" },
-        "size": { "source": "$alert-font-size", "$value": ".875rem", "$type": "dimension" }
+        "weight-link": {
+          "$type": "fontWeight",
+          "$value": "{typography.font.weight.normal}",
+          "source": "$alert-link-font-weight"
+        },
+        "size": {
+          "$type": "dimension",
+          "$value": ".875rem",
+          "source": "$alert-font-size"
+        }
       },
-      "line-height": { "source": "$alert-line-height", "$value": "1.5rem", "$type": "number" }
+      "line-height": {
+        "$type": "number",
+        "$value": "1.5rem",
+        "source": "$alert-line-height"
+      }
     }
   },
   "size": {
     "$type": "dimension",
     "alert": {
       "border": {
-        "radius": { "source": "$alert-border-radius", "$value": "{size.border.radius.base}" },
-        "width": { "source": "$alert-border-width", "$value": "0" }
+        "radius": {
+          "$value": "{size.border.radius.base}",
+          "source": "$alert-border-radius"
+        },
+        "width": {
+          "$value": "0",
+          "source": "$alert-border-width"
+        }
       }
     }
   }

diff --git a/tokens/src/core/components/Annotation.json b/tokens/src/core/components/Annotation.json
@@ -2,26 +2,49 @@
   "spacing": {
     "$type": "dimension",
     "annotation": {
-      "padding": { "source": "$annotation-padding", "$value": ".5rem" },
+      "padding": {
+        "$value": ".5rem",
+        "source": "$annotation-padding"
+      },
       "arrow-side": {
-        "margin": { "source": "$annotation-arrow-side-margin", "$value": ".25rem" }
+        "margin": {
+          "$value": ".25rem",
+          "source": "$annotation-arrow-side-margin"
+        }
       }
     }
   },
   "typography": {
     "annotation": {
-      "font-size": { "source": "$annotation-font-size", "$value": "{typography.font.size.sm}", "$type": "dimension" },
-      "line-height": { "source": "$annotation-line-height", "$value": "{typography.line-height.sm}", "$type": "number" }
+      "font-size": {
+        "$type": "dimension",
+        "$value": "{typography.font.size.sm}",
+        "source": "$annotation-font-size"
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": "{typography.line-height.sm}",
+        "source": "$annotation-line-height"
+      }
     }
   },
   "size": {
     "$type": "dimension",
     "annotation": {
       "arrow-border": {
-        "width": { "source": "$annotation-arrow-border-width", "$value": ".5rem" }
+        "width": {
+          "$value": ".5rem",
+          "source": "$annotation-arrow-border-width"
+        }
       },
-      "max-width": { "source": "$annotation-max-width", "$value": "18.75rem" },
-      "border-radius": { "source": "$annotation-border-radius", "$value": ".25rem" }
+      "max-width": {
+        "$value": "18.75rem",
+        "source": "$annotation-max-width"
+      },
+      "border-radius": {
+        "$value": ".25rem",
+        "source": "$annotation-border-radius"
+      }
     }
   }
 }
diff --git a/tokens/src/core/components/Avatar.json b/tokens/src/core/components/Avatar.json
@@ -1,16 +1,52 @@
 {
   "size": {
     "avatar": {
-      "base": { "source": "$avatar-size", "$value": "3rem", "$type": "dimension" },
-      "xs": { "source": "$avatar-size-xs", "$value": "1.5rem", "$type": "dimension" },
-      "sm": { "source": "$avatar-size-sm", "$value": "2.25rem", "$type": "dimension" },
-      "lg": { "source": "$avatar-size-lg", "$value": "4rem", "$type": "dimension" },
-      "xl": { "source": "$avatar-size-xl", "$value": "6rem", "$type": "dimension" },
-      "xxl": { "source": "$avatar-size-xxl", "$value": "11.5rem", "$type": "dimension" },
-      "huge": { "source": "$avatar-size-huge", "$value": "18.75rem", "$type": "dimension" },
+      "base": {
+        "$type": "dimension",
+        "$value": "3rem",
+        "source": "$avatar-size"
+      },
+      "xs": {
+        "$type": "dimension",
+        "$value": "1.5rem",
+        "source": "$avatar-size-xs"
+      },
+      "sm": {
+        "$type": "dimension",
+        "$value": "2.25rem",
+        "source": "$avatar-size-sm"
+      },
+      "lg": {
+        "$type": "dimension",
+        "$value": "4rem",
+        "source": "$avatar-size-lg"
+      },
+      "xl": {
+        "$type": "dimension",
+        "$value": "6rem",
+        "source": "$avatar-size-xl"
+      },
+      "xxl": {
+        "$type": "dimension",
+        "$value": "11.5rem",
+        "source": "$avatar-size-xxl"
+      },
+      "huge": {
+        "$type": "dimension",
+        "$value": "18.75rem",
+        "source": "$avatar-size-huge"
+      },
       "border": {
-        "base": { "source": "$avatar-border", "$value": "1px", "$type": "dimension" },
-        "radius": { "source": "$avatar-border-radius", "$value": "100%", "$type": "percentage" }
+        "base": {
+          "$type": "dimension",
+          "$value": "1px",
+          "source": "$avatar-border"
+        },
+        "radius": {
+          "$type": "percentage",
+          "$value": "100%",
+          "source": "$avatar-border-radius"
+        }
       }
     }
   }

diff --git a/tokens/src/core/components/AvatarButton.json b/tokens/src/core/components/AvatarButton.json
@@ -3,9 +3,18 @@
     "$type": "dimension",
     "avatar-button": {
       "padding-left": {
-        "base": { "source": "$avatar-button-padding-left", "$value": ".25em" },
-        "sm": { "source": "$avatar-button-padding-left-sm", "$value": ".25em" },
-        "lg": { "source": "$avatar-button-padding-left-lg", "$value": ".25em" }
+        "base": {
+          "$value": ".25em",
+          "source": "$avatar-button-padding-left"
+        },
+        "sm": {
+          "$value": ".25em",
+          "source": "$avatar-button-padding-left-sm"
+        },
+        "lg": {
+          "$value": ".25em",
+          "source": "$avatar-button-padding-left-lg"
+        }
       }
     }
   }

diff --git a/tokens/src/core/components/Badge.json b/tokens/src/core/components/Badge.json
@@ -4,33 +4,62 @@
     "badge": {
       "padding": {
         "x": {
-          "base": { "source": "$badge-padding-x", "$value": ".5rem" },
-          "pill": { "source": "$badge-pill-padding-x", "$value": ".6em" }
+          "base": {
+            "$value": ".5rem",
+            "source": "$badge-padding-x"
+          },
+          "pill": {
+            "$value": ".6em",
+            "source": "$badge-pill-padding-x"
+          }
         },
-        "y": { "source": "$badge-padding-y", "$value": ".125rem" }
+        "y": {
+          "$value": ".125rem",
+          "source": "$badge-padding-y"
+        }
       }
     }
   },
   "typography": {
     "badge": {
       "font": {
-        "size": { "source": "$badge-font-size", "$value": "75%", "$type": "percentage" },
-        "weight": { "source": "$badge-font-weight", "$value": "{typography.font.weight.bold}", "$type": "fontWeight" }
+        "size": {
+          "$type": "percentage",
+          "$value": "75%",
+          "source": "$badge-font-size"
+        },
+        "weight": {
+          "$type": "fontWeight",
+          "$value": "{typography.font.weight.bold}",
+          "source": "$badge-font-weight"
+        }
       }
     }
   },
   "size": {
     "$type": "dimension",
     "badge": {
       "border-radius": {
-        "base": { "source": "$badge-border-radius", "$value": ".25rem" },
-        "pill": { "source": "$badge-pill-border-radius", "$value": "10rem" }
+        "base": {
+          "$value": ".25rem",
+          "source": "$badge-border-radius"
+        },
+        "pill": {
+          "$value": "10rem",
+          "source": "$badge-pill-border-radius"
+        }
       },
-      "focus-width": { "source": "$badge-focus-width", "$value": "{size.input.btn.focus-width}" }
+      "focus-width": {
+        "$value": "{size.input.btn.focus-width}",
+        "source": "$badge-focus-width"
+      }
     }
   },
   "transition": {
     "$type": "transition",
-    "badge": { "source": "$badge-transition", "$value": "none" }
+    "badge": {
+      "$value": "none",
+      "source": "$badge-transition"
+    }
   }
 }
diff --git a/tokens/src/core/components/Breadcrumb.json b/tokens/src/core/components/Breadcrumb.json
@@ -3,7 +3,10 @@
     "$type": "dimension",
     "breadcrumb": {
       "margin": {
-        "left": { "source": "$breadcrumb-margin-left", "$value": ".5rem" }
+        "left": {
+          "$value": ".5rem",
+          "source": "$breadcrumb-margin-left"
+        }
       }
     }
   },
@@ -12,13 +15,25 @@
     "breadcrumb": {
       "border": {
         "radius": {
-          "focus": { "source": "$breadcrumb-focus-border-radius", "$value": ".125rem" }
+          "focus": {
+            "$value": ".125rem",
+            "source": "$breadcrumb-focus-border-radius"
+          }
         },
         "axis": {
-          "x-focus": { "source": "$breadcrumb-border-focus-axis-x", "$value": ".25rem" },
-          "y-focus": { "source": "$breadcrumb-border-focus-axis-y", "$value": ".5rem" }
+          "x-focus": {
+            "$value": ".25rem",
+            "source": "$breadcrumb-border-focus-axis-x"
+          },
+          "y-focus": {
+            "$value": ".5rem",
+            "source": "$breadcrumb-border-focus-axis-y"
+          }
         },
-        "width-focus": { "source": "$breadcrumb-border-focus-width", "$value": ".0625rem" }
+        "width-focus": {
+          "$value": ".0625rem",
+          "source": "$breadcrumb-border-focus-width"
+        }
       }
     }
   }