@openedx/paragon 22.0.0-alpha.24 → 22.1.0

package/styles/scss/core/bootstrap-override/_functions.scss

@@ -1,104 +0,0 @@
-// Bootstrap functions
-//
-// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
-
-// Replace `$search` with `$replace` in `$string`
-// Used on our SVG icon backgrounds for custom forms.
-//
-// @author Hugo Giraudel
-// @param {String} $string - Initial string
-// @param {String} $search - Substring to replace
-// @param {String} $replace ('') - New value
-// @return {String} - Updated string
-@function str-replace($string, $search, $replace: "") {
-  $index: str-index($string, $search);
-
-  @if $index {
-    // stylelint-disable-next-line max-line-length
-    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
-  }
-
-  @return $string;
-}
-
-// See https://codepen.io/kevinweber/pen/dXWoRw
-//
-// Requires the use of quotes around data URIs.
-
-@function escape-svg($string) {
-  @if str-index($string, "data:image/svg+xml") {
-    @each $char, $encoded in $escaped-characters {
-      // Do not escape the url brackets
-      @if str-index($string, "url(") == 1 {
-        $string: url("#{str-replace(str-slice($string, 6, -3), $char, $encoded)}");
-      }
-
-      @else {
-        $string: str-replace($string, $char, $encoded);
-      }
-    }
-  }
-
-  @return $string;
-}
-
-// Retrieve color Sass maps
-@function color($key: "blue") {
-  @return map-get($colors, $key);
-}
-
-@function gray($key: "100") {
-  @return map-get($grays, $key);
-}
-
-@function divide($dividend, $divisor, $precision: 10) {
-  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
-  $dividend: abs($dividend);
-  $divisor: abs($divisor);
-
-  @if $dividend == 0 {
-    @return 0;
-  }
-
-  @if $divisor == 0 {
-    @error "Cannot divide by 0";
-  }
-
-  $remainder: $dividend;
-  $result: 0;
-  $factor: 10;
-
-  @while ($remainder > 0 and $precision >= 0) {
-    $quotient: 0;
-
-    @while ($remainder >= $divisor) {
-      $remainder: $remainder - $divisor;
-      $quotient: $quotient + 1;
-    }
-
-    $result: $result * 10 + $quotient;
-    $factor: $factor * .1;
-    $remainder: $remainder * 10;
-    $precision: $precision - 1;
-
-    @if ($precision < 0 and $remainder >= $divisor * 5) {
-      $result: $result + 1;
-    }
-  }
-
-  $result: $result * $factor * $sign;
-  $dividend-unit: unit($dividend);
-  $divisor-unit: unit($divisor);
-  $unit-map: (
-    "px": 1px,
-    "rem": 1rem,
-    "em": 1em,
-    "%": 1%
-  );
-
-  @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
-    $result: $result * map-get($unit-map, $dividend-unit);
-  }
-
-  @return $result;
-}

package/styles/scss/core/bootstrap-override/_mixins.scss

@@ -1,4 +0,0 @@
-// Components
-@import "mixins/list-group";
-@import "mixins/grid";
-@import "mixins/grid-framework";

package/styles/scss/core/bootstrap-override/_utilities.scss

@@ -1,4 +0,0 @@
-@import "utilities/spacing";
-@import "utilities/text";
-@import "utilities/background";
-@import "utilities/borders";

package/styles/scss/core/bootstrap-override/bootstrap.scss

@@ -1,2 +0,0 @@
-@import "mixins";
-@import "utilities";

package/styles/scss/core/bootstrap-override/mixins/_grid-framework.scss

@@ -1,80 +0,0 @@
-// Framework grid generation
-//
-// Used only by Bootstrap to generate the correct number of grid classes given
-// any value of `$grid-columns`.
-
-@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
-  // Common properties for all breakpoints
-  %grid-column {
-    position: relative;
-    width: 100%;
-    padding-right: calc(#{$gutter} * .5);
-    padding-left: calc(#{$gutter} * .5);
-  }
-
-  @each $breakpoint in map-keys($breakpoints) {
-    $infix: breakpoint-infix($breakpoint, $breakpoints);
-
-    @if $columns > 0 {
-      // Allow columns to stretch full width below their breakpoints
-      @for $i from 1 through $columns {
-        .col#{$infix}-#{$i} {
-          @extend %grid-column;
-        }
-      }
-    }
-
-    .col#{$infix},
-    .col#{$infix}-auto {
-      @extend %grid-column;
-    }
-
-    @include media-breakpoint-up($breakpoint, $breakpoints) {
-      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
-      .col#{$infix} {
-        flex-basis: 0;
-        flex-grow: 1;
-        max-width: 100%;
-      }
-
-      @if $grid-row-columns > 0 {
-        @for $i from 1 through $grid-row-columns {
-          .row-cols#{$infix}-#{$i} {
-            @include row-cols($i);
-          }
-        }
-      }
-
-      .col#{$infix}-auto {
-        @include make-col-auto();
-      }
-
-      @if $columns > 0 {
-        @for $i from 1 through $columns {
-          .col#{$infix}-#{$i} {
-            @include make-col($i, $columns);
-          }
-        }
-      }
-
-      .order#{$infix}-first { order: -1; }
-
-      .order#{$infix}-last { order: $columns + 1; }
-
-      @for $i from 0 through $columns {
-        .order#{$infix}-#{$i} { order: $i; }
-      }
-
-      @if $columns > 0 {
-        // `$columns - 1` because offsetting by the width of an entire row isn't possible
-        @for $i from 0 through ($columns - 1) {
-          @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
-            .offset#{$infix}-#{$i} {
-              @include make-col-offset($i, $columns);
-            }
-          }
-        }
-      }
-    }
-  }
-}

package/styles/scss/core/bootstrap-override/mixins/_grid.scss

@@ -1,69 +0,0 @@
-/// Grid system
-//
-// Generate semantic grid columns with these mixins.
-
-@mixin make-container($gutter: $grid-gutter-width) {
-  width: 100%;
-  padding-right: calc($gutter * .5);
-  padding-left: calc($gutter * .5);
-  margin-right: auto;
-  margin-left: auto;
-}
-
-@mixin make-row($gutter: $grid-gutter-width) {
-  display: flex;
-  flex-wrap: wrap;
-  margin-right: calc(-1 * calc($gutter * .5));
-  margin-left: calc(-1 * calc($gutter * .5));
-}
-
-// For each breakpoint, define the maximum width of the container in a media query
-@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
-  @each $breakpoint, $container-max-width in $max-widths {
-    @include media-breakpoint-up($breakpoint, $breakpoints) {
-      max-width: $container-max-width;
-    }
-  }
-  @include deprecate("The `make-container-max-widths` mixin", "v4.5.2", "v5");
-}
-
-@mixin make-col-ready($gutter: $grid-gutter-width) {
-  position: relative;
-  // Prevent columns from becoming too narrow when at smaller grid tiers by
-  // always setting `width: 100%;`. This works because we use `flex` values
-  // later on to override this initial width.
-  width: 100%;
-  padding-right: calc($gutter * .5);
-  padding-left: calc($gutter * .5);
-}
-
-@mixin make-col($size, $columns: $grid-columns) {
-  flex: 0 0 percentage(divide($size, $columns));
-  // Add a `max-width` to ensure content within each column does not blow out
-  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
-  // do not appear to require this.
-  max-width: percentage(divide($size, $columns));
-}
-
-@mixin make-col-auto() {
-  flex: 0 0 auto;
-  width: auto;
-  max-width: 100%; // Reset earlier grid tiers
-}
-
-@mixin make-col-offset($size, $columns: $grid-columns) {
-  $num: divide($size, $columns);
-  margin-left: if($num == 0, 0, percentage($num));
-}
-
-// Row columns
-//
-// Specify on a parent element(e.g., .row) to force immediate children into NN
-// numberof columns. Supports wrapping to new lines, but does not do a Masonry
-// style grid.
-@mixin row-cols($count) {
-  > * {
-    flex: 0 0 divide(100%, $count);
-    max-width: divide(100%, $count);
-  }
-}

package/styles/scss/core/bootstrap-override/mixins/_list-group.scss

@@ -1,22 +0,0 @@
-// List Groups
-// TODO: not used in Paragon.
-@mixin list-group-item-variant($state, $background, $color) {
-  .list-group-item-#{$state} {
-    color: $color;
-    background-color: $background;
-
-    &.list-group-item-action {
-      @include hover-focus() {
-        color: $color;
-        background-color: $background;
-        filter: opacity(.9);
-      }
-
-      &.active {
-        color: $white;
-        background-color: $color;
-        border-color: $color;
-      }
-    }
-  }
-}

package/styles/scss/core/bootstrap-override/utilities/_background.scss

@@ -1,7 +0,0 @@
-.bg-white {
-  background-color: $white !important;
-}
-
-.bg-transparent {
-  background-color: transparent !important;
-}

package/styles/scss/core/bootstrap-override/utilities/_borders.scss

@@ -1,67 +0,0 @@
-//
-// Border
-//
-
-.border { border: $border-width solid $border-color !important; }
-.border-top { border-top: $border-width solid $border-color !important; }
-.border-right { border-right: $border-width solid $border-color !important; }
-.border-bottom { border-bottom: $border-width solid $border-color !important; }
-.border-left { border-left: $border-width solid $border-color !important; }
-
-.border-0 { border: 0 !important; }
-.border-top-0 { border-top: 0 !important; }
-.border-right-0 { border-right: 0 !important; }
-.border-bottom-0 { border-bottom: 0 !important; }
-.border-left-0 { border-left: 0 !important; }
-
-.border-white {
-  border-color: $white !important;
-}
-
-//
-// Border-radius
-//
-
-.rounded-sm {
-  border-radius: $border-radius-sm !important;
-}
-
-.rounded {
-  border-radius: $border-radius !important;
-}
-
-.rounded-top {
-  border-top-left-radius: $border-radius !important;
-  border-top-right-radius: $border-radius !important;
-}
-
-.rounded-right {
-  border-top-right-radius: $border-radius !important;
-  border-bottom-right-radius: $border-radius !important;
-}
-
-.rounded-bottom {
-  border-bottom-right-radius: $border-radius !important;
-  border-bottom-left-radius: $border-radius !important;
-}
-
-.rounded-left {
-  border-top-left-radius: $border-radius !important;
-  border-bottom-left-radius: $border-radius !important;
-}
-
-.rounded-lg {
-  border-radius: $border-radius-lg !important;
-}
-
-.rounded-circle {
-  border-radius: 50% !important;
-}
-
-.rounded-pill {
-  border-radius: $rounded-pill !important;
-}
-
-.rounded-0 {
-  border-radius: 0 !important;
-}

package/styles/scss/core/bootstrap-override/utilities/_spacing.scss

@@ -1,70 +0,0 @@
-// Bootstrap overrides for spacing utility classes
-@each $breakpoint in map-keys($grid-breakpoints) {
-  @include media-breakpoint-up($breakpoint) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-    @each $prop, $abbrev in (margin: m, padding: p) {
-      @each $size, $length in $spacers {
-        .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
-        .#{$abbrev}t#{$infix}-#{$size},
-        .#{$abbrev}y#{$infix}-#{$size} {
-          #{$prop}-top: $length !important;
-        }
-        .#{$abbrev}r#{$infix}-#{$size},
-        .#{$abbrev}x#{$infix}-#{$size} {
-          #{$prop}-right: $length !important;
-        }
-        .#{$abbrev}b#{$infix}-#{$size},
-        .#{$abbrev}y#{$infix}-#{$size} {
-          #{$prop}-bottom: $length !important;
-        }
-        .#{$abbrev}l#{$infix}-#{$size},
-        .#{$abbrev}x#{$infix}-#{$size} {
-          #{$prop}-left: $length !important;
-        }
-      }
-    }
-
-    // Negative margins (e.g., where `.mb-n1` is negative version of `.mb-1`)
-    @each $size, $length in $spacers {
-      @if "#{$size}" != "0" {
-        .m#{$infix}-n#{$size} { margin: calc(-1 * #{$length}) !important; }
-        .mt#{$infix}-n#{$size},
-        .my#{$infix}-n#{$size} {
-          margin-top: calc(-1 * #{$length}) !important;
-        }
-        .mr#{$infix}-n#{$size},
-        .mx#{$infix}-n#{$size} {
-          margin-right: calc(-1 * #{$length}) !important;
-        }
-        .mb#{$infix}-n#{$size},
-        .my#{$infix}-n#{$size} {
-          margin-bottom: calc(-1 * #{$length}) !important;
-        }
-        .ml#{$infix}-n#{$size},
-        .mx#{$infix}-n#{$size} {
-          margin-left: calc(-1 * #{$length}) !important;
-        }
-      }
-    }
-
-    // Some special margin utils
-    .m#{$infix}-auto { margin: auto !important; }
-    .mt#{$infix}-auto,
-    .my#{$infix}-auto {
-      margin-top: auto !important;
-    }
-    .mr#{$infix}-auto,
-    .mx#{$infix}-auto {
-      margin-right: auto !important;
-    }
-    .mb#{$infix}-auto,
-    .my#{$infix}-auto {
-      margin-bottom: auto !important;
-    }
-    .ml#{$infix}-auto,
-    .mx#{$infix}-auto {
-      margin-left: auto !important;
-    }
-  }
-}

package/styles/scss/core/bootstrap-override/utilities/_text.scss

@@ -1,68 +0,0 @@
-// stylelint-disable declaration-no-important
-
-//
-// Bootstrap's overrides for text utilities
-//
-
-.text-monospace { font-family: $font-family-monospace !important; }
-
-// Alignment
-
-.text-justify { text-align: justify !important; }
-.text-wrap { white-space: normal !important; }
-.text-nowrap { white-space: nowrap !important; }
-.text-truncate { @include text-truncate(); }
-
-// Responsive alignment
-
-@each $breakpoint in map-keys($grid-breakpoints) {
-  @include media-breakpoint-up($breakpoint) {
-    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
-
-    .text#{$infix}-left { text-align: left !important; }
-    .text#{$infix}-right { text-align: right !important; }
-    .text#{$infix}-center { text-align: center !important; }
-  }
-}
-
-// Transformation
-
-.text-lowercase { text-transform: lowercase !important; }
-.text-uppercase { text-transform: uppercase !important; }
-.text-capitalize { text-transform: capitalize !important; }
-
-// Weight and italics
-
-.font-weight-light { font-weight: $font-weight-light !important; }
-.font-weight-lighter { font-weight: $font-weight-lighter !important; }
-.font-weight-normal { font-weight: $font-weight-normal !important; }
-.font-weight-bold { font-weight: $font-weight-bold !important; }
-.font-weight-bolder { font-weight: $font-weight-bolder !important; }
-.font-italic { font-style: italic !important; }
-
-// Contextual colors
-
-.text-white { color: $white !important; }
-
-.text-body { color: $body-color !important; }
-.text-muted { color: $text-muted !important; }
-
-.text-black-50 { color: $text-black-50 !important; }
-.text-white-50 { color: $text-white-50 !important; }
-
-// Misc
-
-.text-hide {
-  @include text-hide($ignore-warning: true);
-}
-
-.text-decoration-none { text-decoration: none !important; }
-
-.text-break {
-  word-break: break-word !important; // Deprecated, but avoids issues with flex containers
-  word-wrap: break-word !important; // Used instead of `overflow-wrap` for IE & Edge Legacy
-}
-
-// Reset
-
-.text-reset { color: inherit !important; }

package/styles/scss/core/core.scss

@@ -1,21 +0,0 @@
-@import "functions";
-@import "variables";
-@import "~bootstrap/scss/mixins";
-@import "./bootstrap-override/mixins";
-@import "~bootstrap/scss/root";
-@import "~bootstrap/scss/reboot";
-@import "typography";
-@import "grid";
-@import "react-loading-skeleton/dist/skeleton.css";
-@import "~bootstrap/scss/transitions";
-@import "utilities";
-@import "~bootstrap/scss/media";
-@import "~bootstrap/scss/list-group";
-@import "~bootstrap/scss/print";
-
-// Paragon core CSS
-@import "../../css/core/variables";
-@import "../../css/core/custom-media-breakpoints";
-
-// Paragon components
-@import "../../../src/index";

package/tokens/README.md

@@ -1,158 +0,0 @@
-# Design Tokens
-
-This module is responsible for handling design tokens in Paragon, for rationale behind design tokens see [Scaling Paragon's styles architecture with design tokens](https://openedx.atlassian.net/wiki/spaces/BPL/pages/3630923811/Scaling+Paragon+s+styles+architecture+with+design+tokens)
-and relevant ADR(TODO: add link when we merge an ADR). 
-
-## Overview
-
-We heavily rely on [style-dictionary](https://github.com/amzn/style-dictionary) package to build design tokens into various formats,
-it is recommended to read their [documentation](https://amzn.github.io/style-dictionary/#/) as well to know more about the package since we mostly focus on Paragon specifics in this document.
-
-All tokens are located in `src` directory and divided into three categories. We try to follow CTI token naming as described [here](https://amzn.github.io/style-dictionary/#/tokens?id=category-type-item), but our schema does have some differences, see tokens files for an example of that
-
-## Token modifications
-
-Style dictionary allows you to apply certain modifications to tokens during build time, e.g. if you want to make some color darker without
-manually calculating its value or trying to modify it with SASS functions after the variable has been built (note
-that most SASS functions will not work with CSS variables as SASS does not know values during compile time).
-
-All modifications need to be specified with `modify` key when describing a token, e.g.
-```
-{
-  "value": "#D4F880",
-  "modify": [{
-    "type": "darken"
-    "amount": 0.1
-  }]
-}
-```
-`modify` expects a list of modification to apply, each modification is specified with an object that carries necessary metadata, see examples below.
-
-### Color transforms
-
-Paragon uses [chroma-js](https://gka.github.io/chroma.js/) library to perform color modifications. Some of the most common examples are:
-
-1. `darken` – change lightness of a color (same behaviour as in respective SASS function), e.g.
-    ```
-    {
-      "value": "#D4F880",
-      "modify": [{
-        "type": "darken"
-        "amount": 0.1
-      }]
-    }
-    ```
-    outputs `#CFF37B` value
-
-2. `mix` – mix two colors with specific ratio (same behaviour as in respective SASS function), e.g.
-   ```
-   {
-     "value": "#0A3055",
-     "modify": [
-       {
-         "type": "mix",
-         "otherColor": "#FFF",
-         "amount": "0.6"
-       }
-     ]
-   }
-   ```
-   outputs `#9DACBB` value
-
-3. `color-yiq` – [Bootstrap's color contrast function](https://getbootstrap.com/docs/4.0/getting-started/theming/#color-contrast) that outputs black (defaults to `#454545`) or white (defaults to `#FFF`) color depending on the specified base color, e.g.
-   ```
-   {
-     "value": "#0A3055",
-     "modify": [{ "type": "color-yiq" }]
-   }
-   ```
-   outputs `#454545`
-
-Generally every function from `chroma-js` that has similar signature to `darken` function (i.e., first argument is color value and second is amount by which the color should be changed) can be applied to color tokens the same way as `darken` is applied, functions with other signatures are not currently supported except for the `mix`.
-
-### Other transforms
-
-Currently, only one other transform is supported – `str-replace`, that replaces some string with another one across the whole token value, common usage is for values that represent an SVG image
-
-```
-{
-  "value": "url("data:image/svg+xml,<svg><path d='somesvg' fill='{color.primary.base.value}'/></svg>\")",
-  "modify": [{
-    "type": "str-replace",
-    "toReplace": "#",
-    "replaceWith": "%23"
-  }]
-}
-```
-Without `str-replace` the resulting value would be `url("data:image/svg+xml,<svg><path d='somesvg' fill='#0A3055'/></svg>\"`, note that fill color starts with `#` symbol which would cause image to render invalid color, by using `str-replace` fill would become `%230A3055` and the image would render correctly.
-
-## Outputting references
-
-By default, tokens keep references in the output, meaning having such tokens structure
-```
-{
-  "color": {
-    "green": { "value": "#178253" },
-    "success": { "value": "{color.green.value}" }
-}
-```
-the outputted values will be
-```
---pgn-color-green: #178253,
---pgn-color-success: var(--pgn-color-green)
-```
-which is usually fine, but you might want to disable this behaviour for some tokens.
-
-Style dictionary uses a simple algorithm while outputting references, i.e. it checks whether outputted value contains any known tokens and replaces them with references to that token, e.g.
-if you have token with value `url("data:image/svg+xml,<svg><path d='somesvg' fill='{color.green.value}'/></svg>\")` then style dictionary would transform it into
-`url("data:image/svg+xml,<svg><path d='somesvg' fill='var(--pgn-color-green)'/></svg>\")` which will obviously not work when rendered, and you get broken SVG.
-
-To disable this feature for specific token use `outputReferences` flag, e.g.
-```
-{
-  "value": "url("data:image/svg+xml,<svg><path d='somesvg' fill='{color.green.value}'/></svg>\")",
-  "outputReferences": false,
-  "modify": [{
-    "type": "str-replace",
-    "toReplace": "#",
-    "replaceWith": "%23"
-  }]
-}
-```
-this will correctly output `url("data:image/svg+xml,<svg><path d='somesvg' fill='%23178253'/></svg>")`
-
-## Utility Classes
-
-Style Dictionary is also able to generate CSS utility classes using design tokens, although currently it is not very-well supported, and you might be better off to just hardcode CSS classes without using Style Dictionary.
-Nevertheless, in some cases it might be useful.
-
-The configuration to do build CSS classes lives in `src/utilities` directory in JSON files, let's take `color.json` as an example and see what it does. Its contents should look something like this:
-```
-{
-  "utilities": [
-    {
-      "filters": {
-        "category": ["color"],
-        "type": ["gray", "primary", "secondary", "brand", "success", "info", "warning", "danger", "light", "dark", "accent"],
-        "item": ["base", "100", "200", "300", "400", "500", "600", "700", "800", "900", "a", "b"]
-      },
-      "utilityFunctionsToApply": ["bgVariant", "textEmphasisVariant", "borderColor"]
-    }
-  ]
-}
-```
-Namely, this is a JSON object with only one key (`utilities`, this is how Style Dictionary knows that this file is used for generating utility classes)
-and one value which is an array of objects that describe how to generate classes and which tokens to use.
-Each such object is composed of 2 keys:
- - `utilityFunctionsToApply`, which is an array of strings, these strings are the names of functions that will
-   generate utility classes based on tokens. These functions must be defined in `css-utilities.js` module and must follow 
-   the same signature - accept `token` object as its only argument and output CSS class as a string (see any of `bgVariant`, `textEmphasisVariant`, `borderColor` functions for an example)
- - `filters`, which is an object that describes which tokens will be passed as an argument to functions provided by `utilityFunctionsToApply`.
-   The keys in this object are the attributes of a `token` object and values are arrays of valid values that tokens will be filtered against.
-   For list of possible keys see https://amzn.github.io/style-dictionary/#/tokens?id=category-type-item
-
-Basically, this file tells Style Dictionary to generate utility classes using `["bgVariant", "textEmphasisVariant", "borderColor"]`
-functions from tokens that are of `color` category and theirs `type` is one of `["gray", "primary", ...]`
-and `item` is one of `["base", "100", "200", ...]`.
-
-If you want to generate additional utility classes you need to add a similar JSON file to `src/utilities` directory.