@openedx/paragon 22.6.0 → 23.0.0-alpha.2

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

@@ -0,0 +1,105 @@
+{
+  "spacing": {
+    "btn": {
+      "padding": {
+        "y": {
+          "base": {
+            "value": "{spacing.input.btn.padding.y}", "type": "dimension", "source": "$btn-padding-y"
+          },
+          "lg": {
+            "value": "{spacing.input.btn.padding.lg.y}", "type": "dimension", "source": "$btn-padding-y-lg"
+          },
+          "sm": {
+            "value": "{spacing.input.btn.padding.sm.y}", "type": "dimension", "source": "$btn-padding-y-sm"
+          }
+        },
+        "x": {
+          "base": { "value": "{spacing.input.btn.padding.x}", "type": "dimension", "source": "$btn-padding-x" },
+          "lg": {
+            "value": "{spacing.input.btn.padding.lg.x}", "type": "dimension", "source": "$btn-padding-x-lg"
+          },
+          "sm": {
+            "value": "{spacing.input.btn.padding.sm.x}", "type": "dimension", "source": "$btn-padding-x-sm"
+          }
+        }
+      },
+      "block": {
+        "spacing-y": { "value": ".5rem", "type": "dimension", "source": "$btn-block-spacing-y" }
+      },
+      "focus": {
+        "gap": { "value": "{size.btn.focus.width}", "type": "dimension", "source": "$btn-focus-gap" },
+        "border-gap": {
+          "value": "calc({size.btn.focus.width} + {spacing.btn.focus.gap})",
+          "type": "dimension",
+          "source": "$btn-focus-border-gap"
+        },
+        "distance-to-border": {
+          "value": "calc({spacing.btn.focus.border-gap} + {size.btn.border.width})",
+          "type": "dimension",
+          "source": "$btn-focus-distance-to-border"
+        }
+      }
+    }
+  },
+  "typography": {
+    "btn": {
+      "font": {
+        "family": {
+          "value": "{typography.input.btn.font.family}", "type": "fontFamily", "source": "$btn-font-family"
+        },
+        "size": {
+          "base": {
+            "value": "{typography.input.btn.font.size.base}", "type": "dimension", "source": "$btn-font-size"
+          },
+          "sm": {
+            "value": "{typography.input.btn.font.size.sm}", "type": "dimension", "source": "$btn-font-size-sm"
+          },
+          "lg": {
+            "value": "{typography.input.btn.font.size.lg}", "type": "dimension", "source": "$btn-font-size-lg"
+          }
+        },
+        "weight": {
+          "value": "{typography.font.weight.normal}", "type": "fontWeight", "source": "$btn-font-weight"
+        }
+      },
+      "line-height": {
+        "base": {
+          "value": "{typography.input.btn.line-height.base}", "type": "dimension", "source": "$btn-line-height"
+        },
+        "sm": {
+          "value": "{typography.input.btn.line-height.sm}", "type": "dimension", "source": "$btn-line-height-sm"
+        },
+        "lg": {
+          "value": "{typography.input.btn.line-height.lg}", "type": "dimension", "source": "$btn-line-height-lg"
+        }
+      }
+    }
+  },
+  "size": {
+    "btn": {
+      "border": {
+        "width": { "value": "{size.input.btn.border-width}", "type": "dimension", "source": "$btn-border-width" },
+        "radius": {
+          "base": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$btn-border-radius" },
+          "lg": { "value": "{size.border.radius.lg}", "type": "dimension", "source": "$btn-border-radius-lg" },
+          "sm": { "value": "{size.border.radius.sm}", "type": "dimension", "source": "$btn-border-radius-sm" }
+        }
+      },
+      "focus": {
+        "width": { "value": "2px", "type": "dimension", "source": "$btn-focus-width" },
+        "border-radius": {
+          "base": {
+            "value": "calc({size.btn.border.radius.base} + {spacing.btn.focus.border-gap})",
+            "type": "dimension",
+            "source": "$btn-focus-border-radius"
+          },
+          "lg": { "value": "{size.btn.focus.border-radius.base}", "type": "dimension", "source": "$btn-focus-border-radius-lg" },
+          "sm": { "value": "{size.btn.border.radius.base}", "type": "dimension", "source": "$btn-focus-border-radius-sm" }
+        }
+      }
+    }
+  },
+  "transition": {
+    "btn": { "value": "none", "type": "transition", "source": "$btn-transition" }
+  }
+}

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

@@ -0,0 +1,96 @@
+{
+  "spacing": {
+    "card": {
+      "spacer": {
+        "x": { "value": "1.25rem", "type": "dimension", "source": "$card-spacer-x" },
+        "y": { "value": ".75rem", "type": "dimension", "source": "$card-spacer-y" }
+      },
+      "margin": {
+        "group": { "value": "12px", "type": "dimension", "source": "$card-group-margin" },
+        "deck": { "value": "{spacing.card.margin.group}", "type": "dimension", "source": "$card-deck-margin" },
+        "deck-bottom": { "value": "{spacing.spacer.3}", "type": "dimension", "source": "$card-deck-margin-bottom" },
+        "grid": { "value": "{spacing.card.margin.group}", "type": "dimension", "source": "$card-grid-margin" },
+        "grid-bottom": { "value": "{spacing.spacer.3}", "type": "dimension", "source": "$card-grid-margin-bottom" }
+      },
+      "columns": {
+        "margin": { "value": "{spacing.card.spacer.y}", "type": "dimension", "source": "$card-columns-margin" },
+        "count": { "value": "3", "type": "dimension", "source": "$card-columns-count" },
+        "gap": { "value": "1.25rem", "type": "dimension", "source": "$card-columns-gap" }
+      },
+      "footer": {
+        "action-gap": { "value": ".5rem", "type": "dimension", "source": "$card-footer-actions-gap" }
+      },
+      "loading-skeleton": {
+        "spacer": { "value": ".313rem", "type": "dimension", "source": "$loading-skeleton-spacer" }
+      },
+      "logo": {
+        "left-offset": {
+          "base": { "value": "1.5rem", "type": "dimension", "source": "$card-logo-left-offset" },
+          "horizontal": { "value": ".4375rem", "type": "dimension", "source": "$card-logo-left-offset-horizontal" }
+        },
+        "bottom-offset": {
+          "base": { "value": "1rem", "type": "dimension", "source": "$card-logo-bottom-offset" },
+          "horizontal": { "value": ".4375rem", "type": "dimension", "source": "$card-logo-bottom-offset-horizontal" }
+        }
+      },
+      "focus": {
+        "border-offset": { "value": "5px", "type": "dimension", "source": "$card-focus-border-offset" }
+      }
+    }
+  },
+  "size": {
+    "card": {
+      "border": {
+        "width": { "value": "{size.border.width}", "type": "dimension", "source": "$card-border-width" },
+        "radius": {
+          "base": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$card-border-radius" },
+          "logo": { "value": ".25rem", "type": "dimension", "source": "$card-logo-border-radius" },
+          "inner": {
+            "value": "calc({size.card.border.radius.base} - {size.card.border.width})",
+            "type": "dimension",
+            "source": "$card-inner-border-radius"
+          }
+        }
+      },
+      "focus": {
+        "border": {
+          "width": { "value": "2px", "type": "dimension", "source": "$card-focus-border-width" },
+          "radius": {
+            "value": "calc({spacing.card.focus.border-offset} + {size.card.border.radius.base})",
+            "type": "dimension",
+            "source": "$card-focus-border-radius"
+          }
+        }
+      },
+      "image": {
+        "horizontal": {
+          "width": {
+            "max": { "value": "240px", "type": "dimension", "source": "$card-image-horizontal-max-width" },
+            "min": {
+              "value": "{size.card.image.horizontal.width.max}",
+              "type": "dimension",
+              "source": "$card-image-horizontal-min-width"
+            }
+          }
+        },
+        "vertical": {
+          "max-height": { "value": "140px", "type": "dimension", "source": "$card-image-vertical-max-height" }
+        },
+        "border-radius": { "value": "{size.card.border.radius.base}", "type": "dimension", "source": "$card-image-border-radius" }
+      },
+      "logo": {
+        "width": { "value": "7.25rem", "type": "dimension", "source": "$card-logo-width" },
+        "height": { "value": "4.125rem", "type": "dimension", "source": "$card-logo-height" }
+      }
+    }
+  },
+  "typography": {
+    "footer": {
+      "text": {
+        "font-size": {
+          "value": "{typography.font.size.small.x}", "type": "dimension", "source": "$card-footer-text-font-size"
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,37 @@
+{
+  "size": {
+    "carousel": {
+      "control": {
+        "width": {
+          "base": { "value": "15%", "type": "percentage", "source": "$carousel-control-width" },
+          "icon": { "value": "20px", "type": "dimension", "source": "$carousel-control-icon-width" }
+        }
+      },
+      "indicator": {
+        "width": { "value": "30px", "type": "dimension", "source": "$carousel-indicator-width" },
+        "height": {
+          "base": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-height" },
+          "area-hit": { "value": "10px", "type": "dimension", "source": "$carousel-indicator-hit-area-height" }
+        }
+      },
+      "caption-width": { "value": "70%", "type": "percentage", "source": "$carousel-caption-width" }
+    }
+  },
+  "spacing": {
+    "carousel": {
+      "indicator-spacer": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-spacer" }
+    }
+  },
+  "transition": {
+    "carousel": {
+      "base": {
+        "value": "transform {transition.carousel.duration} ease-in-out",
+        "type": "transition",
+        "source": "$carousel-transition"
+      },
+      "duration": { "value": ".6s", "type": "duration", "source": "$carousel-transition-duration" },
+      "indicator": { "value": "opacity .6s ease", "type": "transition", "source": "$carousel-indicator-transition" },
+      "control": { "value": "opacity .15s ease", "type": "transition", "source": "$carousel-control-transition" }
+    }
+  }
+}

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

@@ -0,0 +1,41 @@
+{
+  "spacing": {
+    "chip": {
+      "margin": {
+        "base": {
+          "value": ".125rem", "type": "dimension", "source": "$chip-margin"
+        },
+        "icon": { "value": ".25rem", "type": "dimension", "source": "$chip-icon-margin" }
+      },
+      "padding": {
+        "y": { "value": "1px", "type": "dimension", "source": "$chip-padding-y" },
+        "x": { "value": ".5rem", "type": "dimension", "source": "$chip-padding-x" }
+      },
+      "outline": {
+        "selected-distance": {
+          "light": {
+            "value": "3px", "type": "dimension", "source": "$chip-light-selected-outline-distance"
+          },
+          "dark": {
+            "value": "3px", "type": "dimension", "source": "$chip-dark-selected-outline-distance"
+          }
+        },
+        "focus-distance": {
+          "light": {
+            "value": ".313rem", "type": "dimension", "source": "$chip-light-focus-outline-distance"
+          },
+          "dark": {
+            "value": ".313rem", "type": "dimension", "source": "$chip-dark-focus-outline-distance"
+          }
+        },
+        "width": { "value": "3px", "type": "dimension", "source": "$chip-outline-width" }
+      }
+    }
+  },
+  "size": {
+    "chip": {
+      "border-radius": { "value": ".375rem", "type": "dimension", "source": "$chip-border-radius" },
+      "icon": { "value": "1.5rem", "type": "dimension", "source": "$chip-icon-size" }
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+{
+  "spacing": {
+    "chip-carousel": {
+      "controls-top-offset": {
+        "value": ".375rem", "type": "dimension", "source": "$chip-carousel-controls-top-offset"
+      },
+      "container": {
+        "padding": {
+          "x": { "value": ".625rem", "type": "dimension", "source": "$chip-carousel-container-padding-x" },
+          "y": { "value": ".313rem", "type": "dimension", "source": "$chip-carousel-container-padding-y" }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+{
+  "typography": {
+    "close-button": {
+      "font": {
+        "size": {
+          "value": "calc({typography.font.size.base} * 1.5)", "type": "dimension", "source": "$close-font-size"
+        },
+        "weight": {
+          "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$close-font-weight"
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,34 @@
+{
+  "typography": {
+    "code": {
+      "font-size": { "value": "87.5%", "type": "percentage", "source": "$code-font-size" },
+      "kbd": {
+        "font-size": { "value": "{typography.code.font-size}", "type": "dimension", "source": "$kbd-font-size" },
+        "nested": {
+          "font-weight": {
+            "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$nested-kbd-font-weight"
+          }
+        }
+      }
+    }
+  },
+  "spacing": {
+    "code": {
+      "kbd": {
+        "padding": {
+          "y": { "value": ".2rem", "type": "dimension", "source": "$kbd-padding-y" },
+          "x": { "value": ".4rem", "type": "dimension", "source": "$kbd-padding-x" }
+        }
+      }
+    }
+  },
+  "size": {
+    "code": {
+      "pre": {
+        "scrollable": {
+          "max-height": { "value": "340px", "type": "dimension", "source": "$pre-scrollable-max-height" }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,29 @@
+{
+  "spacing": {
+    "collapsible": {
+      "card": {
+        "spacer": {
+          "y": {
+            "base": { "value": ".5rem", "type": "dimension", "source": "$collapsible-card-spacer-y" },
+            "lg": {
+              "value": "{spacing.card.spacer.y}", "type": "dimension", "source": "$collapsible-card-spacer-y-lg"
+            }
+          },
+          "x": {
+            "base": { "value": ".5rem", "type": "dimension", "source": "$collapsible-card-spacer-x" },
+            "lg": {
+              "value": "{spacing.card.spacer.x}", "type": "dimension", "source": "$collapsible-card-spacer-x-lg"
+            }
+          },
+          "left-body": { "value": ".75rem", "type": "dimension", "source": "$collapsible-card-body-spacer-left" },
+          "icon": { "value": "2.5rem", "type": "dimension", "source": "$collapsible-card-spacer-icon" },
+          "basic": {
+            "y": { "value": ".5rem", "type": "dimension", "source": "$collapsible-basic-spacer-y" },
+            "x": { "value": ".5rem", "type": "dimension", "source": "$collapsible-basic-spacer-x" },
+            "icon": { "value": ".625rem", "type": "dimension", "source": "$collapsible-basic-spacer-icon" }
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+{
+  "size": {
+    "color-picker": {
+      "sm": { "value": "2rem", "type": "dimension", "source": "$picker-size-sm" },
+      "md": { "value": "calc(1.3333em + 1.125rem + 2px)", "type": "dimension", "source": "$picker-size-md" }
+    }
+  }
+}

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

@@ -0,0 +1,13 @@
+{
+  "size": {
+    "container": {
+      "max-width": {
+        "xs": { "value": "464px", "type": "dimension", "source": "$max-width-xs" },
+        "sm": { "value": "708px", "type": "dimension", "source": "$max-width-sm" },
+        "md": { "value": "952px", "type": "dimension", "source": "$max-width-md" },
+        "lg": { "value": "1192px", "type": "dimension", "source": "$max-width-lg" },
+        "xl": { "value": "1440px", "type": "dimension", "source": "$max-width-xl" }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,27 @@
+{
+  "size": {
+    "data-table": {
+      "border": { "value": "2px", "type": "dimension", "source": "$data-table-border" },
+      "dropdown": {
+        "pagination": {
+          "max-height": { "value": "60vh", "type": "dimension", "source": "$data-table-pagination-dropdown-max-height" },
+          "min-width": { "value": "6rem", "type": "dimension", "source": "$data-table-pagination-dropdown-min-width" }
+        }
+      },
+      "layout": {
+        "sidebar-width": { "value": "12rem", "type": "dimension", "source": "$data-table-layout-sidebar-width" }
+      }
+    }
+  },
+  "spacing": {
+    "data-table": {
+      "padding": {
+        "x": { "value": ".75rem", "type": "dimension", "source": "$data-table-padding-x" },
+        "y": { "value": ".75rem", "type": "dimension", "source": "$data-table-padding-y" },
+        "small": { "value": ".5rem", "type": "dimension", "source": "$data-table-padding-small" },
+        "cell": { "value": ".5rem .75rem", "type": "dimension", "source": "$data-table-cell-padding" }
+      },
+      "footer-position": { "value": "center", "type": "position", "source": "$data-table-footer-position" }
+    }
+  }
+}

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

@@ -0,0 +1,67 @@
+{
+  "typography": {
+    "dropdown": {
+      "font-size": {
+        "value": "{typography.font.size.base}", "type": "dimension", "source": "$dropdown-font-size"
+      },
+      "item": {
+        "text-decoration": {
+          "value": "none", "type": "textDecoration"
+        }
+      }
+    }
+  },
+  "size": {
+    "dropdown": {
+      "min-width": { "value": "18rem", "type": "dimension", "source": "$dropdown-min-width" },
+      "border": {
+        "width": { "value": "{size.border.width}", "type": "dimension", "source": "$dropdown-border-width" },
+        "radius": {
+          "base": {
+            "value": "{size.border.radius.base}", "type": "dimension", "source": "$dropdown-border-radius"
+          },
+          "inner": {
+            "value": "calc({size.dropdown.border.radius.base} - {size.dropdown.border.width})",
+            "type": "dimension",
+            "source": "$dropdown-inner-border-radius"
+          }
+        }
+      }
+    }
+  },
+  "spacing": {
+    "dropdown": {
+      "spacer": { "value": ".125rem", "type": "dimension", "source": "$dropdown-spacer" },
+      "padding": {
+        "x": {
+          "base": { "value": "0", "type": "dimension", "source": "$dropdown-padding-x" },
+          "item": { "value": "1rem", "type": "dimension", "source": "$dropdown-item-padding-x" }
+        },
+        "y": {
+          "base": { "value": ".5rem", "type": "dimension", "source": "$dropdown-padding-y" },
+          "item": { "value": ".25rem", "type": "dimension", "source": "$dropdown-item-padding-y" }
+        },
+        "header": {
+          "value": "{spacing.dropdown.padding.y.base} {spacing.dropdown.padding.x.item}",
+          "type": "dimension",
+          "source": "$dropdown-header-padding"
+        }
+      },
+      "divider": {
+        "margin-y": {
+          "value": "calc({spacing.spacer.base} / 2)",
+          "type": "dimension",
+          "source": "$dropdown-divider-margin-y"
+        }
+      },
+      "close-container": {
+        "top": { "value": ".625rem", "type": "dimension", "source": "$modal-close-container-top" }
+      }
+    }
+  },
+  "elevation": {
+    "dropdown": {
+      "zindex": { "value": "1000", "type": "ratio", "source": "$zindex-dropdown" }
+    }
+  }
+}

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

@@ -0,0 +1,21 @@
+{
+  "typography": {
+    "dropzone": {
+      "restriction-msg": {
+        "font-size": {
+          "value": "{typography.font.size.small.x}",
+          "type": "dimension",
+          "source": "$dropzone-restriction-msg-font-size"
+        }
+      }
+    }
+  },
+  "spacing": {
+    "dropzone": {
+      "padding": { "value": "1.5rem", "type": "dimension", "source": "$dropzone-padding" },
+      "border": {
+        "base": { "value": "1px", "type": "dimension", "source": "$dropzone-border-default" }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+{
+  "other": {
+    "form": {
+      "control": {
+        "cursor": { "value": "auto", "type": "cursorStyle", "source": "$custom-control-cursor" },
+        "range-track-cursor": { "value": "pointer", "type": "cursorStyle", "source": "$custom-range-track-cursor" },
+        "custom-file": {
+          "lang": { "value": "en", "type": "text" },
+          "content": { "value": "Browse", "type": "text" }
+        }
+      }
+    }
+  }
+}