@openedx/paragon 22.4.0 → 23.0.0-alpha.1

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

@@ -0,0 +1,233 @@
+{
+  "size": {
+    "form": {
+      "input": {
+        "height": {
+          "base": {
+            "value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2 + {size.form.input.height.border})",
+            "type": "dimension",
+            "source": "$input-height"
+          },
+          "sm": {
+            "value": "calc({typography.form.input.line-height.sm} * 1em + {spacing.input.btn.padding.sm.y} * 2 + {size.form.input.height.border})",
+            "type": "dimension",
+            "source": "$input-height-sm"
+          },
+          "lg": {
+            "value": "calc({typography.form.input.line-height.lg} * 1em + {spacing.input.btn.padding.lg.y} * 2 + {size.form.input.height.border})",
+            "type": "dimension",
+            "source": "$input-height-lg"
+          },
+          "inner": {
+            "base": {
+              "value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)",
+              "type": "dimension",
+              "source": "$input-height-inner"
+            },
+            "half": {
+              "value": "calc({typography.form.input.line-height.base} * .5em + {spacing.form.input.padding.y.base})",
+              "type": "dimension",
+              "source": "$input-height-inner-half"
+            },
+            "quarter": {
+              "value": "calc({typography.form.input.line-height.base} * .25em + calc({spacing.form.input.padding.y.base} / 2))",
+              "type": "dimension",
+              "source": "$input-height-inner-quarter"
+            }
+          },
+          "border": {
+            "value": "calc({size.form.input.width.border} * 2)",
+            "type": "dimension",
+            "source": "$input-height-border"
+          }
+        },
+        "width": {
+          "hover": { "value": "0.063rem", "type": "dimension", "source": "$input-hover-width" },
+          "focus": { "value": "0.063rem", "type": "dimension", "source": "$input-focus-width" },
+          "border": {
+            "value": "{size.input.btn.border-width}", "type": "dimension", "source": "$input-border-width"
+          }
+        },
+        "radius": {
+          "border": {
+            "base": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$input-border-radius" },
+            "lg": { "value": "{size.border.radius.lg}", "type": "dimension", "source": "$input-border-radius-lg" },
+            "sm": { "value": "{size.border.radius.sm}", "type": "dimension", "source": "$input-border-radius-sm" }
+          }
+        }
+      },
+      "control": {
+        "indicator": { 
+          "base": { "value": "1.25rem", "type": "dimension", "source": "$custom-control-indicator-size" },
+          "bg": { "value": "100%", "type": "percentage", "source": "$custom-control-indicator-bg-size" },
+          "border": {
+            "width": { "value": "0.125rem", "type": "dimension", "source": "$custom-control-indicator-border-width" }
+          }
+        },
+        "switch": {
+          "width": {
+            "value": "calc({size.form.control.indicator.base} * 1.75)",
+            "type": "dimension",
+            "source": "$custom-switch-width"
+          },
+          "indicator": {
+            "base": {
+              "value": "calc({size.form.control.indicator.base} - {size.form.control.indicator.border.width} * 4)",
+              "type": "dimension",
+              "source": "$custom-switch-indicator-size"
+            },
+            "border": {
+              "radius": {
+                "value": "calc({size.form.control.indicator.base} / 2)",
+                "type": "dimension",
+                "source": "$custom-switch-indicator-border-radius"
+              }
+            }
+          }
+        },
+        "select": {
+          "height": {
+            "base": {
+              "value": "{size.form.input.height.base}", "type": "dimension", "source": "$custom-select-height"
+            },
+            "lg": {
+              "value": "{size.form.input.height.lg}", "type": "dimension", "source": "$custom-select-height-lg"
+            },
+            "sm": {
+              "value": "{size.form.input.height.sm}", "type": "dimension", "source": "$custom-select-height-sm"
+            }
+          },
+          "feedback": {
+            "icon": {
+              "value": "{size.form.input.height.inner.half} {size.form.input.height.inner.half}",
+              "type": "dimension",
+              "source": "$custom-select-feedback-icon-size" }
+          },
+          "border": {
+            "width": {
+              "base": {
+                "value": "{size.form.input.width.border}",
+                "type": "dimension",
+                "source": "$custom-select-border-width"
+              },
+              "focus": {
+                "value": "{size.form.input.width.focus}",
+                "type": "dimension",
+                "source": "$custom-select-focus-width"
+              }
+            },
+            "radius": {
+              "value": "{size.border.radius.base}", "type": "dimension", "source": "$custom-select-border-radius"
+            }
+          }
+        },
+        "range": {
+          "track": {
+            "width": { "value": "100%", "type": "percentage", "source": "$custom-range-track-width" },
+            "height": { "value": ".5rem", "type": "dimension", "source": "$custom-range-track-height" },
+            "border": {
+              "radius": { "value": "1rem", "type": "dimension", "source": "$custom-range-track-border-radius" }
+            }
+          },
+          "thumb": {
+            "width": { "value": "1rem", "type": "dimension", "source": "$custom-range-thumb-width" },
+            "height": {
+              "value": "{size.form.control.range.thumb.width}",
+              "type": "dimension",
+              "source": "$custom-range-thumb-height"
+            },
+            "border": {
+              "base": { "value": "0", "type": "dimension", "source": "$custom-range-thumb-border" },
+              "radius": { "value": "1rem", "type": "dimension", "source": "$custom-range-thumb-border-radius" }
+            },
+            "focus": {
+              "width": {
+                "value": "{size.form.input.width.focus}",
+                "type": "dimension",
+                "source": "$custom-range-thumb-focus-box-shadow-width"
+              }
+            }
+          }
+        },
+        "file": {
+          "width": {
+            "value": "{size.form.input.width.border}", "type": "dimension", "source": "$custom-file-border-width"
+          },
+          "height": {
+            "base": {
+              "value": "{size.form.input.height.base}", "type": "dimension", "source": "$custom-file-height"
+            },
+            "inner": {
+              "value": "{size.form.input.height.inner.base}",
+              "type": "dimension",
+              "source": "$custom-file-height-inner"
+            }
+          },
+          "border": {
+            "radius": {
+              "value": "{size.form.input.radius.border.base}",
+              "type": "dimension",
+              "source": "$custom-file-border-radius"
+            }
+          }
+        },
+        "icon": {
+          "width": { "value": "2rem", "type": "dimension", "source": "$form-control-icon-width" }
+        },
+        "border": {
+          "checkbox": {
+            "indicator": {
+              "radius": { "value": "0", "type": "dimension", "source": "$custom-checkbox-indicator-border-radius" }
+            }
+          },
+          "radio": {
+            "indicator": {
+              "radius": { "value": "50%", "type": "percentage", "source": "$custom-radio-indicator-border-radius" }
+            }
+          }
+        }
+      },
+      "grid": {
+        "gutter-width": { "value": "0.625rem", "type": "dimension", "source": "$form-grid-gutter-width" }
+      },
+      "autosuggest": {
+        "icon": {
+          "width": { "value": "2.4rem", "type": "dimension", "source": "$form-autosuggest-icon-width" },
+          "height": {
+            "value": "{size.form.autosuggest.icon.width}", "type": "dimension", "source": "$form-autosuggest-icon-height"
+          }
+        },
+        "spinner": {
+          "width": { "value": "1.25rem", "type": "dimension", "source": "$form-autosuggest-spinner-width" },
+          "height": {
+            "value": "{size.form.autosuggest.spinner.width}",
+            "type": "dimension",
+            "source": "$form-autosuggest-spinner-height"
+          }
+        },
+        "border": {
+          "width": { "value": ".125rem", "type": "dimension", "source": "$form-autosuggest-border-width" }
+        }
+      },
+      "border": {
+        "radius": {
+          "check": {
+            "focus": { "value": ".0625rem", "type": "dimension", "source": "$form-check-focus-border-radius" }
+          },
+          "width": { "value": ".125rem", "type": "dimension", "source": "$form-check-border-width" }
+        }
+      },
+      "feedback": {
+        "tooltip": {
+          "border": {
+            "radius": {
+              "value": "{size.border.radius.base}",
+              "type": "dimension",
+              "source": "$form-feedback-tooltip-border-radius"
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,155 @@
+{
+  "spacing": {
+    "form": {
+      "input": {
+        "padding": {
+          "y": {
+            "base": {
+              "value": "{spacing.input.btn.padding.y}", "type": "dimension", "source": "$input-padding-y"
+            },
+            "sm": {
+              "value": "{spacing.input.btn.padding.sm.y}", "type": "dimension", "source": "$input-padding-y-sm"
+            },
+            "lg": {
+              "value": "{spacing.input.btn.padding.lg.y}", "type": "dimension", "source": "$input-padding-y-lg"
+            }
+          },
+          "x": {
+            "base": {
+              "value": "{spacing.input.btn.padding.x}", "type": "dimension", "source": "$input-padding-x"
+            },
+            "sm": {
+              "value": "{spacing.input.btn.padding.sm.x}", "type": "dimension", "source": "$input-padding-x-sm"
+            },
+            "lg": {
+              "value": "{spacing.input.btn.padding.lg.x}", "type": "dimension", "source": "$input-padding-x-lg"
+            }
+          }
+        },
+        "check": {
+          "gutter" : { "value": "1.25rem", "type": "dimension", "source": "$form-check-input-gutter" },
+          "margin": {
+            "x": {
+              "base": { "value": ".25rem", "type": "dimension", "source": "$form-check-input-margin-x" },
+              "inline": { "value": ".3125rem", "type": "dimension", "source": "$form-check-inline-input-margin-x" }
+            },
+            "y": { "value": ".3rem", "type": "dimension", "source": "$form-check-input-margin-y" }
+          }
+        }
+      },
+      "text": {
+        "margin": {
+          "top": { "value": ".25rem", "type": "dimension", "source": "$form-text-margin-top" }
+        }
+      },
+      "check": {
+        "inline": {
+          "margin": {
+            "x": { "value": ".75rem", "type": "dimension", "source": "$form-check-inline-margin-x" }
+          }
+        },
+        "position": {
+          "axis": { "value": ".375rem", "type": "dimension", "source": "$form-check-position-axis" }
+        }
+      },
+      "group": {
+        "margin": {
+          "bottom": { "value": "1rem", "type": "dimension", "source": "$form-group-margin-bottom" }
+        }
+      },
+      "control": {
+        "gutter": { "value": ".5rem", "type": "dimension", "source": "$custom-control-gutter" },
+        "spacer": {
+          "x": { "value": "1rem", "type": "dimension", "source": "$custom-control-spacer-x" }
+        },
+        "select": {
+          "padding": {
+            "y": {
+              "base": {
+                "value": "{spacing.form.input.padding.y.base}",
+                "type": "dimension",
+                "source": "$custom-select-padding-y"
+              },
+              "sm": {
+                "value": "{spacing.form.input.padding.y.sm}",
+                "type": "dimension",
+                "source": "$custom-select-padding-y-sm"
+              },
+              "lg": {
+                "value": "{spacing.form.input.padding.y.lg}",
+                "type": "dimension",
+                "source": "$custom-select-padding-y-lg"
+              }
+            },
+            "x": {
+              "base": {
+                "value": "{spacing.form.input.padding.x.base}",
+                "type": "dimension",
+                "source": "$custom-select-padding-x"
+              },
+              "sm": {
+                "value": "{spacing.form.input.padding.x.sm}",
+                "type": "dimension",
+                "source": "$custom-select-padding-x-sm"
+              },
+              "lg": {
+                "value": "{spacing.form.input.padding.x.lg}",
+                "type": "dimension",
+                "source": "$custom-select-padding-x-lg"
+              }
+            }
+          },
+          "indicator": {
+            "padding": { "value": "1rem", "type": "dimension", "source": "$custom-select-indicator-padding" }
+          },
+          "feedback": {
+            "icon": {
+              "padding": {
+                "right": {
+                  "value": "calc((1em + 2 * {spacing.form.control.select.padding.y.base}) * 3 / 4 + {spacing.form.control.select.padding.x.base} + {spacing.form.control.select.indicator.padding})",
+                  "type": "dimension",
+                  "source": "$custom-select-feedback-icon-padding-right"
+                }
+              },
+              "position": {
+                "value": "center right calc({spacing.form.control.select.padding.x.base} + {spacing.form.control.select.indicator.padding})",
+                "type": "dimension",
+                "source": "$custom-select-feedback-icon-position"
+              }
+            },
+            "margin": {
+              "top": {
+                "value": "{spacing.form.text.margin.top}",
+                "type": "dimension",
+                "source": "$form-feedback-margin-top"
+              }
+            },
+            "tooltip": {
+              "padding": {
+                "y": { "value": ".25rem", "type": "dimension", "source": "$form-feedback-tooltip-padding-y" },
+                "x": { "value": ".5rem", "type": "dimension", "source": "$form-feedback-tooltip-padding-x" }
+              }
+            }
+          },
+          "icon": {
+            "padding": { "value": ".5625rem", "type": "dimension", "source": "$select-icon-padding" }
+          }
+        },
+        "file": {
+          "padding": {
+            "y": {
+              "value": "{spacing.form.input.padding.y.base}",
+              "type": "dimension",
+              "source": "$custom-file-padding-y"
+            },
+            "x": {
+              "value": "{spacing.form.input.padding.x.base}",
+              "type": "dimension",
+              "source": "$custom-file-padding-x"
+            }
+          }
+        }
+      }
+    }
+  }
+}

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

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

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

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

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

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

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