@openedx/paragon 22.6.0 → 23.0.0-alpha.2

package/tokens/src/core/components/Modal.json

@@ -0,0 +1,47 @@
+{
+  "elevation": {
+    "modal": {
+      "backdrop-zindex": { "value": "1040", "type": "ratio", "source": "$zindex-modal-backdrop" },
+      "zindex": { "value": "1050", "type": "ratio", "source": "$zindex-modal" }
+    }
+  },
+  "size": {
+    "modal": {
+      "xl": { "value": "1140px", "type": "dimension", "source": "$modal-xl" },
+      "lg": { "value": "800px", "type": "dimension", "source": "$modal-lg" },
+      "md": { "value": "500px", "type": "dimension", "source": "$modal-md" },
+      "sm": { "value": "400px", "type": "dimension", "source": "$modal-sm" },
+      "content-border": {
+        "width": { "value": "0px", "type": "dimension", "source": "$modal-content-border-width" },
+        "radius": {
+          "value": "{size.border.radius.lg}", "type": "dimension", "source": "$modal-content-border-radius"
+        }
+      }
+    }
+  },
+  "spacing": {
+    "modal": {
+      "inner-padding": {
+        "base": { "value": "1.5rem", "type": "dimension", "source": "$modal-inner-padding" },
+        "bottom": { "value": ".7rem", "type": "dimension", "source": "$modal-inner-padding-bottom" }
+      },
+      "footer-padding": {
+        "base": {
+          "value": "{spacing.modal.footer-padding.y} 1.5rem",
+          "type": "dimension",
+          "source": "$modal-footer-padding"
+        },
+        "y": { "value": "1rem", "type": "dimension", "source": "$modal-footer-padding-y" }
+      },
+      "header-padding": {
+        "base": {
+          "value": "{spacing.modal.header-padding.y} 1.5rem",
+          "type": "dimension",
+          "source": "$modal-header-padding"
+        },
+        "y": { "value": "1rem", "type": "dimension", "source": "$modal-header-padding-y" }
+      },
+      "dialog-margin": { "value": "1.5rem", "type": "dimension", "source": "$modal-dialog-margin" }
+    }
+  }
+}

package/tokens/src/core/components/Nav.json

@@ -0,0 +1,52 @@
+{
+  "typography": {
+    "nav": {
+      "link": {
+        "font-weight": { "value": "500", "type": "fontWeight", "source": "$nav-link-font-weight" },
+        "text-decoration": { "value": "none", "type": "textDecoration" }
+      }
+    }
+  },
+  "size": {
+    "nav": {
+      "pills": {
+        "border-radius": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$nav-pills-border-radius" },
+        "link": {
+          "border-width": { "value": "1px", "type": "dimension", "source": "$nav-pills-link-border-width" }
+        },
+        "inverse-link": {
+          "border-width": { "value": "{size.nav.pills.link.border-width}", "type": "dimension", "source": "$nav-inverse-pills-link-border-width" }
+        }
+      },
+      "tabs": {
+        "link": {
+          "border-bottom": {
+            "width": { "value": ".188rem", "type": "dimension", "source": "$nav-tabs-link-border-bottom-width" }
+          }
+        },
+        "inverse-link": {
+          "active-border-bottom-width": {
+            "value": "{size.nav.tabs.link.border-bottom.width}",
+            "type": "dimension",
+            "source": "$nav-inverse-tabs-link-active-border-bottom-width"
+          }
+        },
+        "border": {
+          "width": { "value": "2px", "type": "dimension", "source": "$nav-tabs-border-width" },
+          "radius": { "value": "0", "type": "dimension", "source": "$nav-tabs-border-radius" }
+        }
+      }
+    }
+  },
+  "spacing": {
+    "nav": {
+      "link": {
+        "padding": {
+          "y": { "value": ".5rem", "type": "dimension", "source": "$nav-link-padding-y" },
+          "x": { "value": "1rem", "type": "dimension", "source": "$nav-link-padding-x" }
+        },
+        "distance-to-border": { "value": "4px", "type": "dimension", "source": "$nav-tabs-link-distance-to-border" }
+      }
+    }
+  }
+}

package/tokens/src/core/components/Navbar.json

@@ -0,0 +1,70 @@
+{
+  "spacing": {
+    "navbar": {
+      "padding": {
+        "y": { "value": "calc({spacing.spacer.base} / 2)", "type": "dimension", "source": "$navbar-padding-y" },
+        "x": {
+          "base": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$navbar-padding-x" },
+          "nav-link": { "value": ".5rem", "type": "dimension", "source": "$navbar-nav-link-padding-x" }
+        }
+      },
+      "brand": {
+        "padding": {
+          "y": {
+            "value": "calc(({typography.navbar.nav-link.height} - {size.navbar.brand.height}) / 2)",
+            "type": "dimension",
+            "source": "$navbar-brand-padding-y"
+          }
+        }
+      },
+      "toggler": {
+        "padding": {
+          "y": { "value": ".25rem", "type": "dimension", "source": "$navbar-toggler-padding-y" },
+          "x": { "value": ".75rem", "type": "dimension", "source": "$navbar-toggler-padding-x" }
+        }
+      }
+    }
+  },
+  "typography": {
+    "navbar": {
+      "brand": {
+        "font-size": {
+          "value": "{typography.font.size.lg}", "type": "dimension", "source": "$navbar-brand-font-size"
+        }
+      },
+      "nav-link": {
+        "height": {
+          "value": "calc({typography.font.size.base} * {typography.line-height.base} + .5rem * 2)",
+          "type": "dimension",
+          "source": "$nav-link-height"
+        }
+      },
+      "toggler": {
+        "font-size": {
+          "value": "{typography.font.size.lg}", "type": "dimension", "source": "$navbar-toggler-font-size"
+        }
+      }
+    }
+  },
+  "size": {
+    "navbar": {
+      "nav": {
+        "scroll": {
+          "max-height": { "value": "75vh", "type": "dimension", "source": "$navbar-nav-scroll-max-height" }
+        }
+      },
+      "brand": {
+        "height": {
+          "value": "calc({typography.navbar.brand.font-size} * {typography.line-height.base})",
+          "type": "dimension",
+          "source": "$navbar-brand-height"
+        }
+      },
+      "toggler": {
+        "border-radius": {
+          "value": "{size.btn.border.radius.base}", "type": "dimension", "source": "$navbar-toggler-border-radius"
+        }
+      }
+    }
+  }
+}

package/tokens/src/core/components/Pagination.json

@@ -0,0 +1,66 @@
+{
+  "typography": {
+    "pagination": {
+      "font-size": {
+        "sm": { "value": ".875rem", "type": "dimension", "source": "$pagination-font-size-sm" }
+      },
+      "line-height": { "value": "1.5rem", "type": "dimension", "source": "$pagination-line-height" }
+    }
+  },
+  "spacing": {
+    "pagination": {
+      "padding": {
+        "y": {
+          "base": { "value": ".625rem", "type": "dimension", "source": "$pagination-padding-y" },
+          "sm": { "value": ".8rem", "type": "dimension", "source": "$pagination-padding-y-sm" },
+          "lg": { "value": ".75rem", "type": "dimension", "source": "$pagination-padding-y-lg" }
+        },
+        "x": {
+          "base": { "value": "1rem", "type": "dimension", "source": "$pagination-padding-x" },
+          "sm": { "value": ".6rem", "type": "dimension", "source": "$pagination-padding-x-sm" },
+          "lg": { "value": "1.5rem", "type": "dimension", "source": "$pagination-padding-x-lg" }
+        }
+      }
+    }
+  },
+  "size": {
+    "pagination": {
+      "icon": {
+        "width": { "value": "2.25rem", "type": "dimension", "source": "$pagination-icon-width" },
+        "height": { "value": "2.25rem", "type": "dimension", "source": "$pagination-icon-height" }
+      },
+      "secondary": {
+        "height": {
+          "base": { "value": "2.75rem", "type": "dimension", "source": "$pagination-secondary-height" },
+          "sm": { "value": "2.25rem", "type": "dimension", "source": "$pagination-secondary-height-sm" }
+        }
+      },
+      "border": {
+        "width": { "value": "{size.border.width}", "type": "dimension", "source": "$pagination-border-width" },
+        "radius": {
+          "sm": {
+            "value": "{size.border.radius.sm}", "type": "dimension", "source": "$pagination-border-radius-sm"
+          },
+          "lg": {
+            "value": "{size.border.radius.lg}", "type": "dimension", "source": "$pagination-border-radius-lg"
+          }
+        }
+      },
+      "reduced": {
+        "dropdown": {
+          "max-height": { "value": "60vh", "type": "dimension", "source": "$pagination-reduced-dropdown-max-height" },
+          "min-width": { "value": "6rem", "type": "dimension", "source": "$pagination-reduced-dropdown-min-width" }
+        }
+      },
+      "toggle": {
+        "border": {
+          "base": { "value": ".3125rem", "type": "dimension", "source": "$pagination-toggle-border" },
+          "sm": { "value": ".25rem", "type": "dimension", "source": "$pagination-toggle-border-sm" }
+        }
+      },
+      "focus": {
+        "outline": { "value": "0", "type": "dimension", "source": "$pagination-focus-outline" }
+      }
+    }
+  }
+}

package/tokens/src/core/components/Popover.json

@@ -0,0 +1,48 @@
+{
+  "typography": {
+    "popover": {
+      "font-size": { "value": "{typography.font.size.sm}", "type": "dimension", "source": "$popover-font-size" }
+    }
+  },
+  "size": {
+    "popover": {
+      "max-width": { "value": "480px", "type": "dimension", "source": "$popover-max-width" },
+      "border": {
+        "width": { "value": "{size.border.width}", "type": "dimension", "source": "$popover-border-width" },
+        "radius": { "value": "{size.border.radius.sm}", "type": "dimension", "source": "$popover-border-radius" }
+      },
+      "icon": {
+        "height": { "value": "1rem", "type": "dimension", "source": "$popover-icon-height" },
+        "width": { "value": "1rem", "type": "dimension", "source": "$popover-icon-width" }
+      },
+      "arrow": {
+        "width": { "value": "1rem", "type": "dimension", "source": "$popover-arrow-width" },
+        "height": { "value": ".5rem", "type": "dimension", "source": "$popover-arrow-height" }
+      }
+    }
+  },
+  "elevation": {
+    "popover": {
+      "zindex": { "value": "1060", "type": "ratio", "source": "$zindex-popover" }
+    }
+  },
+  "spacing": {
+    "popover": {
+      "header": {
+        "padding": {
+          "y": { "value": ".5rem", "type": "dimension", "source": "$popover-header-padding-y" },
+          "x": { "value": "1rem", "type": "dimension", "source": "$popover-header-padding-x" }
+        }
+      },
+      "body": {
+        "padding": {
+          "y": { "value": "{spacing.popover.header.padding.y}", "type": "dimension", "source": "$popover-body-padding-y" },
+          "x": { "value": "{spacing.popover.header.padding.x}", "type": "dimension", "source": "$popover-body-padding-x" }
+        }
+      },
+      "icon": {
+        "margin-right": { "value": ".5rem", "type": "dimension", "source": "$popover-icon-margin-right" }
+      }
+    }
+  }
+}

package/tokens/src/core/components/ProductTour.json

@@ -0,0 +1,32 @@
+{
+  "size": {
+    "product-tour": {
+      "checkpoint": {
+        "width": {
+          "border": { "value": "8px", "type": "dimension", "source": "$checkpoint-border-width" },
+          "arrow": { "value": "15px", "type": "dimension", "source": "$checkpoint-arrow-width" },
+          "max": { "value": "480px", "type": "dimension", "source": "$checkpoint-max-width" }
+        },
+        "arrow": {
+          "top": {
+            "value": "{size.product-tour.checkpoint.width.arrow}",
+            "type": "dimension",
+            "source": "$checkpoint-arrow-border-top"
+          },
+          "transparent": {
+            "value": "{size.product-tour.checkpoint.width.arrow}",
+            "type": "dimension",
+            "source": "$checkpoint-arrow-border-transparent"
+          }
+        }
+      }
+    }
+  },
+  "elevation": {
+    "product-tour": {
+      "checkpoint": {
+        "zindex": { "value": "1060", "type": "ratio", "source": "$checkpoint-z-index" }
+      }
+    }
+  }
+}

package/tokens/src/core/components/ProgressBar.json

@@ -0,0 +1,39 @@
+{
+  "typography": {
+    "progress-bar": {
+      "font-size": {
+        "value": "calc({typography.font.size.base} * .75)", "type": "dimension", "source": "$progress-font-size"
+      }
+    }
+  },
+  "size": {
+    "progress-bar": {
+      "height": {
+        "base": { "value": "1rem", "type": "dimension", "source": "$progress-height" },
+        "annotated": { "value": ".3125rem", "type": "dimension", "source": "$annotated-progress-height" }
+      },
+      "border": {
+        "width": { "value": "1px", "type": "dimension", "source": "$progress-bar-border-width" },
+        "radius": { "value": "0", "type": "dimension", "source": "$progress-border-radius" }
+      },
+      "threshold-circle": { "value": ".5625rem", "type": "dimension", "source": "$progress-threshold-circle" }
+    }
+  },
+  "spacing": {
+    "progress-bar": {
+      "hint": {
+        "annotation-gap": { "value": ".5rem", "type": "dimension", "source": "$progress-hint-annotation-gap" }
+      }
+    }
+  },
+  "transition": {
+    "progress-bar": {
+      "bar": {
+        "animation-timing": {
+          "value": "1s linear infinite", "type": "transition", "source": "$progress-bar-animation-timing"
+        },
+        "transition": { "value": "width .6s ease", "type": "transition", "source": "$progress-bar-transition" }
+      }
+    }
+  }
+}

package/tokens/src/core/components/SearchField.json

@@ -0,0 +1,23 @@
+{
+  "size": {
+    "search-field": {
+      "border": {
+        "width": {
+          "base": { "value": ".0625rem", "type": "dimension", "source": "$search-border-width" },
+          "focus": { "value": ".3125rem", "type": "dimension", "source": "$search-border-focus-width" }
+        },
+        "radius": { "value": "0", "type": "dimension", "source": "$search-border-radius" }
+      },
+      "search-input-height": {
+        "value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)",
+        "type": "dimension",
+        "source": "$input-height-search"
+      }
+    }
+  },
+  "spacing": {
+    "search-field": {
+      "margin-button": { "value": ".5rem", "type": "dimension", "source": "$search-button-margin" }
+    }
+  }
+}

package/tokens/src/core/components/SelectableBox.json

@@ -0,0 +1,9 @@
+{
+  "spacing": {
+    "selectable-box": {
+      "padding": { "value": "1rem", "type": "dimension", "source": "$selectable-box-padding" },
+      "border-radius": { "value": ".25rem", "type": "dimension", "source": "$selectable-box-border-radius" },
+      "box-space": { "value": ".75rem", "type": "dimension", "source": "$selectable-box-space" }
+    }
+  }
+}

package/tokens/src/core/components/Sheet.json

@@ -0,0 +1,10 @@
+{
+  "elevation": {
+    "sheet": {
+      "zindex": {
+        "backdrop": { "value": "1031", "type": "ratio", "source": "$zindex-sheet-backdrop" },
+        "main": { "value": "1032", "type": "ratio", "source": "$zindex-sheet" }
+      }
+    }
+  }
+}

package/tokens/src/core/components/Spinner.json

@@ -0,0 +1,19 @@
+{
+  "size": {
+    "spinner": {
+      "base": {
+        "width": { "value": "2rem", "type": "dimension", "source": "$spinner-width" },
+        "height": { "value": "{size.spinner.base.width}", "type": "dimension", "source": "$spinner-height" },
+        "border-width": { "value": ".25em", "type": "dimension", "source": "$spinner-border-width" }
+      },
+      "sm": {
+        "width": { "value": "1rem", "type": "dimension", "source": "$spinner-width-sm" },
+        "height": { "value": "{size.spinner.sm.width}", "type": "dimension", "source": "$spinner-height-sm" },
+        "border-width": { "value": ".2em", "type": "dimension", "source": "$spinner-border-width-sm" }
+      }
+    }
+  },
+  "spacing": {
+    "vertical-align": { "value": ".125em", "type": "dimension", "source": "$spinner-vertical-align" }
+  }
+}

package/tokens/src/core/components/Stack.json

@@ -0,0 +1,7 @@
+{
+  "size": {
+    "stack": {
+      "gap": { "value": "0", "type": "dimension", "source": "$stack-gap" }
+    }
+  }
+}

package/tokens/src/core/components/Stepper.json

@@ -0,0 +1,42 @@
+{
+  "spacing": {
+    "stepper": {
+      "header": {
+        "padding": {
+          "y": { "value": ".75rem", "type": "dimension", "source": "$stepper-header-padding-y" },
+          "x": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$stepper-header-padding-x" }
+        },
+        "step": {
+          "padding": {
+            "value": ".25rem", "type": "dimension", "source": "$stepper-header-step-padding"
+          },
+          "list": {
+            "padding": {
+              "y": { "value": ".25rem", "type": "dimension", "source": "$stepper-header-step-list-padding-y" },
+              "x": { "value": "0", "type": "dimension", "source": "$stepper-header-step-list-padding-x" }
+            },
+            "margin": { "value": "0", "type": "dimension", "source": "$stepper-header-step-list-margin" }
+          }
+        }
+      }
+    }
+  },
+  "size": {
+    "stepper": {
+      "header": {
+        "height-min": { "value": "5.13rem", "type": "dimension", "source": "$stepper-header-min-height" }
+      },
+      "step": {
+        "width-min": { "value": "0", "type": "dimension", "source": "$stepper-header-step-min-width" },
+        "bubble-error-shadow-width": {
+          "value": "3px", "type": "dimension", "source": "$stepper-header-step-error-bubble-shadow-width"
+        }
+      }
+    }
+  },
+  "typography": {
+    "spacer": {
+      "line-height": { "value": "1px", "type": "dimension", "source": "$stepper-header-line-height" }
+    }
+  }
+}

package/tokens/src/core/components/Sticky.json

@@ -0,0 +1,7 @@
+{
+  "spacing": {
+    "sticky": {
+      "offset": { "value": "0", "type": "dimension", "source": "$sticky-offset" }
+    }
+  }
+}

package/tokens/src/core/components/Tab.json

@@ -0,0 +1,19 @@
+{
+  "spacing": {
+    "tab": {
+      "more-link-dropdown-toggle": {
+        "padding-x": { "value": ".7rem", "type": "dimension", "source": "$tab-more-link-dropdown-toggle-padding-x" },
+        "padding-y": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$tab-more-link-dropdown-toggle-padding-y" }
+      },
+      "inverse-pills-link-dropdown-toggle": {
+        "padding-x": { "value": ".625rem", "type": "dimension", "source": "$tab-inverse-pills-link-dropdown-toggle-padding-x" },
+        "padding-y": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$tab-inverse-pills-link-dropdown-toggle-padding-y" }
+      },
+      "inverse-tabs-link-dropdown-toggle": {
+        "padding-x": { "value": ".625rem", "type": "dimension", "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-x" },
+        "padding-y": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$tab-inverse-tabs-link-dropdown-toggle-padding-y" },
+        "distance": { "value": "5px", "type": "dimension", "source": "$tab-inverse-pills-link-dropdown-distance" }
+      }
+    }
+  }
+}

package/tokens/src/core/components/Tabs.json

@@ -0,0 +1,19 @@
+{
+  "size": {
+    "tabs": {
+      "notification": {
+        "height": { "value": "1rem", "type": "dimension", "source": "$tab-notification-height" },
+        "width": { "value": "1rem", "type": "dimension", "source": "$tab-notification-width" }
+      }
+    }
+  },
+  "typography": {
+    "tabs": {
+      "notification": {
+        "font-size": {
+          "value": "{typography.font.size.xs}", "type": "dimension", "source": "$tab-notification-font-size"
+        }
+      }
+    }
+  }
+}

package/tokens/src/core/components/Toast.json

@@ -0,0 +1,30 @@
+{
+  "typography": {
+    "toast": {
+      "font-size": { "value": ".875rem", "type": "dimension", "source": "$toast-font-size" }
+    }
+  },
+  "size": {
+    "toast": {
+      "max-width": { "value": "400px", "type": "dimension", "source": "$toast-max-width" },
+      "border": {
+        "width": { "value": "1px", "type": "dimension", "source": "$toast-border-width" },
+        "radius": { "value": ".25rem", "type": "dimension", "source": "$toast-border-radius" }
+      }
+    }
+  },
+  "spacing": {
+    "toast": {
+      "padding": {
+        "x": { "value": ".75rem", "type": "dimension", "source": "$toast-padding-x" },
+        "y": { "value": ".25rem", "type": "dimension", "source": "$toast-padding-y" }
+      },
+      "container": {
+        "gutter": {
+          "lg": { "value": "1.25rem", "type": "dimension", "source": "$toast-container-gutter-lg" },
+          "sm": { "value": ".625rem", "type": "dimension", "source": "$toast-container-gutter-sm" }
+        }
+      }
+    }
+  }
+}

package/tokens/src/core/components/Tooltip.json

@@ -0,0 +1,33 @@
+{
+  "typography": {
+    "tooltip": {
+      "font-size": { "value": "{typography.font.size.sm}", "type": "dimension", "source": "$tooltip-font-size" }
+    }
+  },
+  "spacing": {
+    "tooltip": {
+      "padding": {
+        "y": { "value": ".5rem", "type": "dimension", "source": "$tooltip-padding-y" },
+        "x": { "value": ".5rem", "type": "dimension", "source": "$tooltip-padding-x" }
+      },
+      "margin": { "value": "0", "type": "dimension", "source": "$tooltip-margin" }
+    }
+  },
+  "elevation": {
+    "tooltip": {
+      "zindex": { "value": "1070", "type": "ratio", "source": "$zindex-tooltip" }
+    }
+  },
+  "size": {
+    "tooltip": {
+      "max-width": { "value": "200px", "type": "dimension", "source": "$tooltip-max-width" },
+      "arrow": {
+        "height": { "value": ".4rem", "type": "dimension", "source": "$tooltip-arrow-height" },
+        "width": { "value": ".8rem", "type": "dimension", "source": "$tooltip-arrow-width" }
+      },
+      "border-radius": {
+        "value": "{size.border.radius.base}", "type": "dimension", "source": "$tooltip-border-radius"
+      }
+    }
+  }
+}

package/tokens/src/core/components/general/caret.json

@@ -0,0 +1,13 @@
+{
+  "size": {
+    "caret": {
+      "width": { "value": ".3em", "type": "dimension", "source": "$caret-width" }
+    }
+  },
+  "spacing": {
+    "caret": {
+      "base": { "value": ".255em", "type": "dimension", "source": "$caret-spacing" },
+      "vertical-align": { "value": ".255em", "type": "dimension", "source": "$caret-vertical-align" }
+    }
+  }
+}

package/tokens/src/core/components/general/headings.json

@@ -0,0 +1,16 @@
+{
+  "typography": {
+    "headings": {
+      "font": {
+        "family": { "value": "inherit", "type": "fontFamily", "source": "$headings-font-family" },
+        "weight": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$headings-font-weight" }
+      },
+      "line-height": { "value": "1.25", "type": "dimension", "source": "$headings-line-height" }
+    }
+  },
+  "spacing": {
+    "headings": {
+      "margin-bottom": { "value": ".5rem", "type": "dimension", "source": "$headings-margin-bottom" }
+    }
+  }
+}

package/tokens/src/core/components/general/hr.json

@@ -0,0 +1,10 @@
+{
+  "size": {
+    "hr": {
+      "border": {
+        "width": { "value": "{size.border.width}", "type": "dimension", "source": "$hr-border-width" },
+        "margin-y": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$hr-margin-y" }
+      }
+    }
+  }
+}