@openedx/paragon 23.0.0-alpha.1 → 23.0.0-alpha.3

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

@@ -8,10 +8,8 @@
         "icon": { "value": ".25rem", "type": "dimension", "source": "$chip-icon-margin" }
       },
       "padding": {
-        "y": { "value": ".125rem", "type": "dimension", "source": "$chip-padding-y" },
-        "x": { "value": ".5rem", "type": "dimension", "source": "$chip-padding-x" },
-        "icon": { "value": ".25rem", "type": "dimension", "source": "$chip-icon-padding" },
-        "to-icon": { "value": "3px", "type": "dimension", "source": "$chip-padding-to-icon" }
+        "y": { "value": "1px", "type": "dimension", "source": "$chip-padding-y" },
+        "x": { "value": ".5rem", "type": "dimension", "source": "$chip-padding-x" }
       },
       "outline": {
         "selected-distance": {
@@ -36,8 +34,8 @@
   },
   "size": {
     "chip": {
-      "border-radius": { "value": ".25rem", "type": "dimension", "source": "$chip-border-radius" },
-      "icon": { "value": "1.25rem", "type": "dimension", "source": "$chip-icon-size" }
+      "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/ColorPicker.json

@@ -1,8 +1,8 @@
 {
   "size": {
     "color-picker": {
-      "sm": { "value": "2rem", "source": "$picker-size-sm", "type": "dimension"},
-      "md": { "value": "calc(1.3333em + 1.125rem + 2px)", "source": "$picker-size-md", "type": "dimension"}
+      "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/DataTable.json

@@ -1,7 +1,7 @@
 {
   "size": {
     "data-table": {
-      "border": { "value": "1px", "type": "dimension", "source": "$data-table-border" },
+      "border": { "value": "2px", "type": "dimension", "source": "$data-table-border" },
       "dropdown": {
         "pagination": {
           "max-height": { "value": "60vh", "type": "dimension", "source": "$data-table-pagination-dropdown-max-height" },

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

@@ -57,7 +57,7 @@
         }
       },
       "control": {
-        "indicator": { 
+        "indicator": {
           "base": { "value": "1.25rem", "type": "dimension", "source": "$custom-control-indicator-size" },
           "bg": { "value": "100%", "type": "percentage", "source": "$custom-control-indicator-bg-size" },
           "border": {
@@ -101,7 +101,8 @@
             "icon": {
               "value": "{size.form.input.height.inner.half} {size.form.input.height.inner.half}",
               "type": "dimension",
-              "source": "$custom-select-feedback-icon-size" }
+              "source": "$custom-select-feedback-icon-size"
+            }
           },
           "border": {
             "width": {
@@ -109,11 +110,6 @@
                 "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": {

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

@@ -46,9 +46,6 @@
           "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/Pagination.json

@@ -20,9 +20,6 @@
           "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" }
       }
     }
   },
@@ -62,7 +59,6 @@
         }
       },
       "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/ProductTour.json

@@ -8,11 +8,6 @@
           "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",

package/tokens/src/core/global/display.json

@@ -16,6 +16,7 @@
         "3": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$display3-weight", "description": "Font weight of level 3." },
         "4": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$display4-weight", "description": "Font weight of level 4." }
       }
-    }
+    },
+    "print-page-size": { "value": "a3", "type": "dimension", "source": "$print-page-size" }
   }
 }

package/tokens/src/core/global/spacing.json

@@ -8,21 +8,23 @@
       "2": { "value": "calc({spacing.spacer.base} * .5)", "type": "dimension", "description": "Space value of level 2" },
       "2,5": { "value": "calc({spacing.spacer.base} * .75)", "type": "dimension", "description": "Space value of level 2.5" },
       "3": { "value": "{spacing.spacer.base}", "type": "dimension", "description": "Space value of level 3" },
-      "3,5": { "value": "calc({spacing.spacer.base} * 1.25)", "type": "dimension", "description": "Space value of level 3.5"},
+      "3,5": { "value": "calc({spacing.spacer.base} * 1.25)", "type": "dimension", "description": "Space value of level 3.5" },
       "4": { "value": "calc({spacing.spacer.base} * 1.5)", "type": "dimension", "description": "Space value of level 4" },
       "4,5": { "value": "calc({spacing.spacer.base} * 2)", "type": "dimension", "description": "Space value of level 4.5" },
       "5": { "value": "calc({spacing.spacer.base} * 3)", "type": "dimension", "description": "Space value of level 5" },
-      "5,5": { "value": "calc({spacing.spacer.base} * 4)", "type": "dimension", "description": "Space value of level 5.5"},
+      "5,5": { "value": "calc({spacing.spacer.base} * 4)", "type": "dimension", "description": "Space value of level 5.5" },
       "6": { "value": "calc({spacing.spacer.base} * 5)", "type": "dimension", "description": "Space value of level 6" }
     },
     "label": {
-      "margin-bottom": { "value": ".5rem", "type": "dimension", "description": "Margin bottom for label." }
+      "margin-bottom": {
+        "value": ".5rem", "type": "dimension", "source": "$label-margin-bottom", "description": "Margin bottom for label."
+      }
     },
     "table": {
       "cell": {
         "padding": {
-          "base": { "value": "75rem", "type": "dimension", "description": "Padding for tables." },
-          "sm": { "value": ".3rem", "type": "dimension", "description": "Padding sm for tables." }
+          "base": { "value": ".75rem", "type": "dimension", "source": "$table-cell-padding", "description": "Padding for tables." },
+          "sm": { "value": ".3rem", "type": "dimension", "source": "$table-cell-padding-sm", "description": "Padding sm for tables." }
         }
       }
     },

package/tokens/src/themes/light/alias/color.json

@@ -29,10 +29,10 @@
     },
     "table": {
       "caption": {
-        "value": "{color.text-muted}", "type": "color", "description": "Table caption color."
+        "value": "{color.text-muted}", "type": "color", "source": "$table-caption-color", "description": "Table caption color."
       },
       "border": {
-        "value": "{color.border}", "type": "color", "description": "Table border color."
+        "value": "{color.border}", "type": "color", "source": "$table-border-color", "description": "Table border color."
       }
     },
     "border": { "value": "{color.gray.200}", "type": "color", "source": "$border-color", "description": "Border color." },

package/tokens/src/themes/light/components/Alert.json

@@ -34,14 +34,5 @@
         }
       }
     }
-  },
-  "elevation": {
-    "alert": {
-      "box-shadow": {
-        "value": "0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15)",
-        "type": "shadow",
-        "source": "$alert-box-shadow"
-      }
-    }
   }
 }

package/tokens/src/themes/light/components/Annotation.json

@@ -2,7 +2,7 @@
   "elevation": {
     "annotation": {
       "box-shadow": {
-        "value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15))  drop-shadow(0 2px 8px rgba(0, 0, 0, .15))",
+        "value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15))",
         "type": "shadow",
         "source": "$annotation-box-shadow"
       }
@@ -11,18 +11,18 @@
   "color": {
     "annotation": {
       "text": {
-        "success": { "value": "{color.white}", "type": "color", "source": "$annotation-success-color"},
-        "warning": { "value": "{color.black}", "type": "color", "source": "$annotation-warning-color"},
-        "error": { "value": "{color.white}", "type": "color", "source": "$annotation-error-color"},
-        "light": { "value": "{color.primary.500}", "type": "color", "source": "$annotation-light-color"},
-        "dark": { "value": "{color.white}", "type": "color", "source": "$annotation-dark-color"}
+        "success": { "value": "{color.white}", "type": "color", "source": "$annotation-success-color" },
+        "warning": { "value": "{color.black}", "type": "color", "source": "$annotation-warning-color" },
+        "error": { "value": "{color.white}", "type": "color", "source": "$annotation-error-color" },
+        "light": { "value": "{color.primary.500}", "type": "color", "source": "$annotation-light-color" },
+        "dark": { "value": "{color.white}", "type": "color", "source": "$annotation-dark-color" }
       },
       "bg": {
-        "success": { "value": "{color.success.base}", "type": "color", "source": "$annotation-success-bg"},
-        "warning": { "value": "{color.accent.b}", "type": "color", "source": "$annotation-warning-bg"},
-        "error": { "value": "{color.danger.base}", "type": "color", "source": "$annotation-error-bg"},
-        "light": { "value": "{color.white}", "type": "color", "source": "$annotation-light-bg"},
-        "dark": { "value": "{color.dark.base}", "type": "color", "source": "$annotation-dark-bg"}
+        "success": { "value": "{color.success.base}", "type": "color", "source": "$annotation-success-bg" },
+        "warning": { "value": "{color.accent.b}", "type": "color", "source": "$annotation-warning-bg" },
+        "error": { "value": "{color.danger.base}", "type": "color", "source": "$annotation-error-bg" },
+        "light": { "value": "{color.white}", "type": "color", "source": "$annotation-light-bg" },
+        "dark": { "value": "{color.dark.base}", "type": "color", "source": "$annotation-dark-bg" }
       }
     }
   }

package/tokens/src/themes/light/components/Avatar.json

@@ -1,7 +1,7 @@
 {
   "color": {
     "avatar": {
-      "border": { "value": "{color.light.300}", "type": "color", "source": "$avatar-color-border" }
+      "border": { "value": "{color.light.300}", "type": "color" }
     }
   }
 }

package/tokens/src/themes/light/components/Breadcrumb.json

@@ -1,7 +1,6 @@
 {
   "color": {
     "breadcrumb": {
-      "bg": { "value": "{color.gray.200}", "type": "color", "source": "$breadcrumb-bg" },
       "base": { "value": "{color.primary.500}", "type": "color", "source": "$breadcrumb-color" },
       "active": { "value": "{color.gray.500}", "type": "color", "source": "$breadcrumb-active-color" },
       "inverse": {

package/tokens/src/themes/light/components/Card.json

@@ -8,7 +8,7 @@
         "muted": { "value": "{color.light.200}", "type": "color", "source": "$card-bg-muted" }
       },
       "border": {
-        "base": { 
+        "base": {
           "value": "{color.black}",
           "type": "color",
           "source": "$card-border-color",
@@ -21,11 +21,7 @@
           "base": {
             "value": "{color.primary.500}",
             "type": "color",
-            "source": "$card-border-focus-color",
-            "modify": [{
-              "type": "alpha",
-              "amount": 0.5
-            }]
+            "source": "$card-border-focus-color"
           },
           "dark": {
             "value": "{color.theme.focus.primary}",

package/tokens/src/themes/light/components/DataTable.json

@@ -15,7 +15,7 @@
           ]
         }
       },
-      "border": { "value": "{color.gray.200}", "type": "color", "source": "$data-table-border-color" }
+      "border": { "value": "{color.light.300}", "type": "color", "source": "$data-table-border-color" }
     }
   },
   "elevation": {

package/tokens/src/themes/light/components/Form/color.json

@@ -30,7 +30,7 @@
           "border": {
             "value": "{color.gray.700}", "type": "color", "source": "$custom-control-indicator-border-color"
           },
-          "bg": { 
+          "bg": {
             "base": {
               "value": "{color.form.input.bg.base}", "type": "color", "source": "$custom-control-indicator-bg"
             },
@@ -68,7 +68,7 @@
               }
             }
           },
-          "active": { 
+          "active": {
             "base": {
               "value": "{color.active}", "type": "color", "source": "$custom-control-indicator-active-color"
             },
@@ -88,7 +88,7 @@
             "value": "{color.disabled}", "type": "color", "source": "$custom-control-label-disabled-color"
           },
           "floating": {
-            "text": { 
+            "text": {
               "value": "{color.form.input.bg.base}",
               "type": "color",
               "source": "$form-control-floating-label-text-bg",
@@ -217,7 +217,7 @@
             "value": "{color.form.feedback.valid}",
             "type": "color",
             "source": "$form-feedback-tooltip-valid-color",
-            "modify": [{"type": "color-yiq"}]
+            "modify": [{ "type": "color-yiq" }]
           },
           "bg": {
             "valid": {

package/tokens/src/themes/light/components/Form/elevation.json

@@ -4,7 +4,7 @@
       "input": {
         "base": { "value": "none", "type": "shadow", "source": "$input-box-shadow" },
         "focus": {
-          "value": "none",
+          "value": "0 0 0 1px {color.primary.500}",
           "type": "shadow",
           "source": "$input-focus-box-shadow"
         }

package/tokens/src/themes/light/components/Form/other.json

@@ -52,21 +52,21 @@
                   "type": "file",
                   "source": "$custom-radio-indicator-icon-checked",
                   "outputReferences": false,
-                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23"}]
+                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
                 },
                 "valid": {
                   "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.valid}'/%3e%3c/svg%3e\")",
                   "type": "file",
                   "source": "$custom-radio-indicator-icon-valid-checked",
                   "outputReferences": false,
-                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23"}]
+                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
                 },
                 "invalid": {
                   "value": "url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='{color.form.control.indicator.checked.invalid}'/%3e%3c/svg%3e\")",
                   "type": "file",
                   "source": "$custom-radio-indicator-icon-invalid-checked",
                   "outputReferences": false,
-                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23"}]
+                  "modify": [{ "type": "str-replace", "toReplace": "#", "replaceWith": "%23" }]
                 }
               }
             }

package/tokens/src/themes/light/components/general/input.json

@@ -1,7 +1,7 @@
 {
   "color": {
     "input": {
-      "btn-focus": { "value": "{color.input.focus}", "type": "color", "source": "$input-btn-focus-color" }
+      "btn-focus": { "value": "{color.bg.active}", "type": "color", "source": "$input-btn-focus-color" }
     }
   },
   "elevation": {

package/tokens/src/themes/light/components/general/link.json

@@ -37,7 +37,7 @@
           "value": "{color.link.muted.base}",
           "type": "color",
           "source": "$muted-link-hover-color",
-          "modify": [{ "type": "darken", "amount": 0.15}]
+          "modify": [{ "type": "darken", "amount": 0.15 }]
         },
         "inline": {
           "base": { "value": "{color.primary.500}", "type": "color", "source": "$muted-inline-link-color" },

package/tokens/src/themes/light/components/general/list.json

@@ -3,7 +3,7 @@
     "list-group": {
       "base": { "value": "inherit", "type": "color", "source": "$list-group-color" },
       "bg": {
-        "base": { "value": "{color.bg.base}", "type": "color", "source": "$list-group-bg" },
+        "base": { "value": "{color.white}", "type": "color", "source": "$list-group-bg" },
         "hover": { "value": "{color.gray.100}", "type": "color", "source": "$list-group-hover-bg" }
       },
       "border": {

package/tokens/src/themes/light/components/general/text.json

@@ -1,6 +1,12 @@
 {
   "color": {
     "text-muted": { "value": "{color.gray.500}", "type": "color", "source": "$text-muted" },
-    "mark-bg": { "value": "#FFF243", "type": "color", "source": "$mark-bg" }
+    "mark-bg": { "value": "#FFF243", "type": "color", "source": "$mark-bg" },
+    "blockquote": {
+      "small": {
+        "value": "{color.gray.500}", "type": "color", "source": "$blockquote-small-color"
+      }
+    },
+    "yiq-light": { "value": "{color.white}", "type": "color", "source": "$yiq-text-light" }
   }
 }

package/tokens/src/themes/light/global/color.json

@@ -153,7 +153,7 @@
         "value": "{color.primary.base}",
         "type": "color",
         "source": "$primary-300",
-        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50"}],
+        "modify": [{ "type": "mix", "otherColor": "white", "amount": "0.50" }],
         "description": "Primary color of level 300.",
         "actions": {
           "default": "{color.action.default.primary.300}"
@@ -602,7 +602,7 @@
         "value": "{color.info.base}",
         "type": "color",
         "source": "$info-800",
-        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25"}],
+        "modify": [{ "type": "mix", "otherColor": "black", "amount": "0.25" }],
         "description": "Info color of level 800.",
         "actions": {
           "default": "{color.action.default.info.800}"

package/tokens/style-dictionary.js

@@ -1,6 +1,7 @@
 /**
  * This module creates and exports custom StyleDictionary instance for Paragon.
  */
+const toml = require('js-toml');
 const StyleDictionary = require('style-dictionary');
 const chroma = require('chroma-js');
 const { colorYiq, darken, lighten } = require('./sass-helpers');
@@ -216,6 +217,11 @@ StyleDictionary.registerFilter({
   matcher: token => token?.isSource === true,
 });
 
+StyleDictionary.registerParser({
+  pattern: /\.toml$/,
+  parse: ({ contents }) => toml.load(contents),
+});
+
 module.exports = {
   StyleDictionary,
   createCustomCSSVariables,

package/src/IconButton/__snapshots__/IconButton.test.jsx.snap

@@ -1,20 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`<IconButton /> renders with required props 1`] = `
-<button
-  aria-label="alternative"
-  className="btn-icon btn-icon-primary btn-icon-md"
-  onClick={[Function]}
-  type="button"
->
-  <span
-    className="btn-icon__icon-container"
-  >
-    <span
-      aria-hidden={true}
-      className="btn-icon__icon"
-      id="Icon1"
-    />
-  </span>
-</button>
-`;