@openedx/paragon 22.0.0-alpha.23 → 22.0.0

package/tokens/src/core/components/Form/transition.json

@@ -1,16 +0,0 @@
-{
-  "transition": {
-    "form": {
-      "input": {
-        "value": "border-color .15s ease-in-out, box-shadow .15s ease-in-out",
-        "type": "transition",
-        "source": "$input-transition"
-      },
-      "control": { 
-        "value": "background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out",
-        "type": "transition",
-        "source": "$custom-forms-transition" 
-      }
-    }
-  }
-}

package/tokens/src/core/components/Form/typography.json

@@ -1,122 +0,0 @@
-{
-  "typography": {
-    "form": {
-      "input": {
-        "font": {
-          "family": {
-            "value": "{typography.input.btn.font.family}", "type": "fontFamily", "source": "$input-font-family"
-          },
-          "size": {
-            "base": {
-              "value": "{typography.input.btn.font.size.base}", "type": "dimension", "source": "$input-font-size"
-            },
-            "sm": {
-              "value": "{typography.input.btn.font.size.sm}", "type": "dimension", "source": "$input-font-size-sm"
-            },
-            "lg": {
-              "value": "{typography.input.btn.font.size.lg}", "type": "dimension", "source": "$input-font-size-lg"
-            }
-          },
-          "weight": {
-            "value": "{typography.font.weight.base}", "type": "fontWeight", "source": "$input-font-weight"
-          }
-        },
-        "line-height": {
-          "base": {
-            "value": "{typography.input.btn.line-height.base}",
-            "type": "dimension",
-            "source": "$input-line-height"
-          },
-          "sm": {
-            "value": "{typography.input.btn.line-height.sm}",
-            "type": "dimension",
-            "source": "$input-line-height-sm"
-          },
-          "lg": {
-            "value": "{typography.input.btn.line-height.lg}",
-            "type": "dimension",
-            "source": "$input-line-height-lg"
-          }
-        }
-      },
-      "control": {
-        "select": {
-          "font": {
-            "family": {
-              "value": "{typography.form.input.font.family}",
-              "type": "fontFamily",
-              "source": "$custom-select-font-family"
-            },
-            "size": {
-              "base": {
-                "value": "{typography.form.input.font.size.base}",
-                "type": "dimension",
-                "source": "$custom-select-font-size"
-              },
-              "sm": {
-                "value": "{typography.form.input.font.size.sm}",
-                "type": "dimension",
-                "source": "$custom-select-font-size-sm"
-              },
-              "lg": {
-                "value": "{typography.form.input.font.size.lg}",
-                "type": "dimension",
-                "source": "$custom-select-font-size-lg"
-              }
-            },
-            "weight": {
-              "value": "{typography.form.input.font.weight}",
-              "type": "fontWeight",
-              "source": "$custom-select-font-weight"
-            }
-          },
-          "line-height": {
-            "value": "{typography.form.input.line-height.base}",
-            "type": "dimension",
-            "source": "$custom-select-line-height"
-          }
-        },
-        "file": {
-          "line-height": {
-            "value": "{typography.form.input.line-height.base}",
-            "type": "dimension",
-            "source": "$custom-file-line-height"
-          },
-          "font": {
-            "family": { "value": "{typography.form.input.font.family}",
-              "type": "fontFamily",
-              "source": "$custom-file-font-family" },
-            "weight": {
-              "value": "{typography.form.input.font.weight}",
-              "type": "fontWeight",
-              "source": "$custom-file-font-weight"
-            }
-          }
-        }
-      },
-      "feedback": {
-        "font": {
-          "size": {
-            "value": "{typography.font.size.small.base}",
-            "type": "dimension",
-            "source": "$form-feedback-font-size"
-          }
-        },
-        "tooltip": {
-          "font": {
-            "size": {
-              "value": "{typography.font.size.sm}",
-              "type": "dimension",
-              "source": "$form-feedback-tooltip-font-size"
-            }
-          },
-          "line-height": {
-            "value": "{typography.line-height.base}",
-            "type": "dimension",
-            "source": "$form-feedback-tooltip-line-height"
-          }
-        }
-      }
-    }
-  }
-}

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

@@ -1,11 +0,0 @@
-{
-  "size": {
-    "icon": {
-      "inline": { "value": ".8em", "type": "dimension", "source": "$icon-inline" },
-      "xs": { "value": "1rem", "type": "dimension", "source": "$icon-xs" },
-      "sm": { "value": "1.25rem", "type": "dimension", "source": "$icon-sm" },
-      "md": { "value": "1.5rem", "type": "dimension", "source": "$icon-md" },
-      "lg": { "value": "1.75rem", "type": "dimension", "source": "$icon-lg" }
-    }
-  }
-}

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

@@ -1,15 +0,0 @@
-{
-  "size": {
-    "icon-button": {
-      "diameter": {
-        "md": { "value": "2.75rem", "type": "dimension", "source": "$btn-icon-diameter-md" },
-        "sm": { "value": "2.25rem", "type": "dimension", "source": "$btn-icon-diameter-sm" },
-        "inline": {
-          "value": "calc({typography.line-height.base} * 1em + .1em)",
-          "type": "dimension",
-          "source": "$btn-icon-diameter-inline"
-        }
-      }
-    }
-  }
-}

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

@@ -1,28 +0,0 @@
-{
-  "typography": {
-    "image": {
-      "figure-caption": {
-        "font-size": { "value": "90%", "type": "percentage", "source": "$figure-caption-font-size" }
-      }
-    }
-  },
-  "size": {
-    "image": {
-      "thumbnail": {
-        "border": {
-          "width": { "value": "{size.border.width}", "type": "dimension", "source": "$thumbnail-border-width" },
-          "radius": {
-            "value": "{size.border.radius.base}", "type": "dimension", "source": "$thumbnail-border-radius"
-          }
-        }
-      }
-    }
-  },
-  "spacing": {
-    "image": {
-      "thumbnail": {
-        "padding": { "value": ".25rem", "type": "dimension", "source": "$thumbnail-padding" }
-      }
-    }
-  }
-}

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

@@ -1,48 +0,0 @@
-{
-  "spacing": {
-    "menu": {
-      "item": {
-        "padding": {
-          "x": { "value": "{spacing.btn.padding.x.base}", "type": "dimension", "source": "$menu-item-padding-x" },
-          "y": { "value": "{spacing.btn.padding.y.base}", "type": "dimension", "source": "$menu-item-padding-y" }
-        },
-        "icon": {
-          "margin": {
-            "left": { "value": ".25em", "type": "dimension", "source": "$menu-item-icon-margin-left" },
-            "right": { "value": "{spacing.menu.item.icon.margin.left}", "type": "dimension", "source": "$menu-item-icon-margin-right" }
-          }
-        }
-      }
-    }
-  },
-  "typography": {
-    "menu": {
-      "select": {
-        "btn-link": {
-          "text-decoration": {
-            "line": { "value": "underline", "type": "textDecoration", "source": "$menu-select-btn-link-text-decoration-line" },
-            "thickness": { "value": ".125rem", "type": "dimension", "source": "$menu-select-btn-link-text-decoration-thickness" }
-          }
-        }
-      }
-    }
-  },
-  "size": {
-    "menu": {
-      "base": {
-        "border-radius": { "value": ".25em", "type": "dimension", "source": "$menu-border-radius" },
-        "max-height": { "value": "16.813rem", "type": "dimension", "source": "$menu-max-height" }
-      },
-      "item": {
-        "height": { "value": "3rem", "type": "dimension", "source": "$menu-item-height" },
-        "width": {
-          "base": { "value": "19rem", "type": "dimension", "source": "$menu-item-width" },
-          "xs": { "value": "13.438rem", "type": "dimension", "source": "$menu-item-width-xs" }
-        },
-        "border": {
-          "width": { "value": "{size.btn.border.width}", "type": "dimension", "source": "$menu-item-border-width" }
-        }
-      }
-    }
-  }
-}

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

@@ -1,47 +0,0 @@
-{
-  "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

@@ -1,55 +0,0 @@
-{
-  "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" }
-      },
-      "divider": {
-        "margin-y": { "value": "calc({spacing.spacer.base} / 2)", "type": "dimension", "source": "$nav-divider-margin-y" }
-      }
-    }
-  }
-}

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

@@ -1,70 +0,0 @@
-{
-  "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

@@ -1,70 +0,0 @@
-{
-  "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" }
-        }
-      },
-      "margin": {
-        "x": { "value": ".5rem", "type": "dimension", "source": "$pagination-margin-x" }
-      }
-    }
-  },
-  "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": {
-        "border-width": { "value": ".125rem", "type": "dimension", "source": "$pagination-focus-border-width" },
-        "outline": { "value": "0", "type": "dimension", "source": "$pagination-focus-outline" }
-      }
-    }
-  }
-}

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

@@ -1,48 +0,0 @@
-{
-  "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

@@ -1,37 +0,0 @@
-{
-  "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": {
-          "bottom": {
-            "value": "{size.product-tour.checkpoint.width.arrow} {size.product-tour.checkpoint.width.border}",
-            "type": "dimension",
-            "source": "$checkpoint-arrow-border-bottom"
-          },
-          "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

@@ -1,39 +0,0 @@
-{
-  "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

@@ -1,23 +0,0 @@
-{
-  "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

@@ -1,9 +0,0 @@
-{
-  "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" }
-    }
-  }
-}