@instructure/ui-range-input 7.16.0 → 7.19.0

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [7.19.0](https://github.com/instructure/instructure-ui/compare/v7.18.0...v7.19.0) (2022-06-03)
+
+### Features
+
+- **ui-range-input:** add accessible variant for RangeInput handle ([1300fa9](https://github.com/instructure/instructure-ui/commit/1300fa9))
+
+# [7.18.0](https://github.com/instructure/instructure-ui/compare/v7.17.0...v7.18.0) (2022-03-30)
+
+**Note:** Version bump only for package @instructure/ui-range-input
+
+# [7.17.0](https://github.com/instructure/instructure-ui/compare/v7.16.0...v7.17.0) (2022-03-22)
+
+**Note:** Version bump only for package @instructure/ui-range-input
+
 # [7.16.0](https://github.com/instructure/instructure-ui/compare/v7.15.0...v7.16.0) (2022-02-08)
 
 **Note:** Version bump only for package @instructure/ui-range-input

package/es/RangeInput/index.js

@@ -39,20 +39,22 @@ import { addEventListener } from '@instructure/ui-dom-utils';
 import { uid } from '@instructure/uid';
 import { themeable } from '@instructure/ui-themeable';
 import { testable } from '@instructure/ui-testable';
-import { omitProps, pickProps } from '@instructure/ui-react-utils';
+import { omitProps, pickProps, deprecated } from '@instructure/ui-react-utils';
 import { isEdge } from '@instructure/ui-utils';
 var styles = {
-  componentId: 'dSsWD',
+  componentId: 'eHtOX',
   template: function template(theme) {
-    return "\n\n.dSsWD_bGBk{align-items:center;display:flex;justify-content:center;min-width:".concat(theme.minWidth || 'inherit', "}\n\n[dir=rtl] .dSsWD_cwos{direction:rtl}\n\n.dSsWD_cwos{-moz-appearance:none;-webkit-appearance:none;all:initial;animation:none 0s ease 0s 1 normal none running;appearance:none;backface-visibility:visible;background:transparent none repeat 0 0/auto auto padding-box border-box scroll;border:medium none currentColor;border-collapse:separate;border-image:none;border-radius:0;border-spacing:0;bottom:auto;box-shadow:none;box-sizing:content-box;box-sizing:border-box;caption-side:top;clear:none;clip:auto;color:#000;column-count:auto;column-fill:balance;column-gap:normal;column-rule:medium none currentColor;column-span:1;column-width:auto;columns:auto;content:normal;counter-increment:none;counter-reset:none;cursor:auto;direction:ltr;display:inline;empty-cells:show;flex:auto;float:none;font-family:serif;font-size:medium;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:400;height:auto;hyphens:none;left:auto;letter-spacing:normal;line-height:normal;list-style:disc outside none;margin:0;max-height:none;max-width:none;min-height:0;min-width:0;opacity:1;orphans:2;outline:medium none invert;outline:none;overflow:visible;overflow-x:visible;overflow-y:visible;padding:0;page-break-after:auto;page-break-before:auto;page-break-inside:auto;perspective:none;perspective-origin:50% 50%;position:static;right:auto;tab-size:8;table-layout:auto;text-align:left;text-align-last:auto;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;top:auto;transform:none;transform-origin:50% 50% 0;transform-style:flat;transition:none 0s ease 0s;unicode-bidi:normal;vertical-align:baseline;visibility:visible;white-space:normal;widows:2;width:auto;width:100%;word-spacing:normal;z-index:auto}\n\n.dSsWD_cwos::-moz-range-thumb{-moz-appearance:none;appearance:none;background:").concat(theme.handleBackground || 'inherit', ";border-radius:50%;box-shadow:0 0.0625rem 0 ").concat(theme.handleShadowColor || 'inherit', ";cursor:pointer;height:").concat(theme.handleSize || 'inherit', ";transition:all 0.15s ease-in-out;width:").concat(theme.handleSize || 'inherit', "}\n\n.dSsWD_cwos::-moz-range-thumb:hover{background:").concat(theme.handleHoverBackground || 'inherit', "}\n\n.dSsWD_cwos::-ms-thumb{appearance:none;background:").concat(theme.handleBackground || 'inherit', ";border-radius:50%;box-shadow:0 0.0625rem 0 ").concat(theme.handleShadowColor || 'inherit', ";cursor:pointer;height:").concat(theme.handleSize || 'inherit', ";transition:all 0.15s ease-in-out;width:").concat(theme.handleSize || 'inherit', "}\n\n.dSsWD_cwos::-ms-thumb:hover{background:").concat(theme.handleHoverBackground || 'inherit', "}\n\n.dSsWD_cwos::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:").concat(theme.handleBackground || 'inherit', ";border-radius:50%;box-shadow:0 0.0625rem 0 ").concat(theme.handleShadowColor || 'inherit', ";cursor:pointer;height:").concat(theme.handleSize || 'inherit', ";transition:all 0.15s ease-in-out;width:").concat(theme.handleSize || 'inherit', "}\n\n.dSsWD_cwos::-webkit-slider-thumb:hover{background:").concat(theme.handleHoverBackground || 'inherit', "}\n\n.dSsWD_cwos::-webkit-slider-thumb{margin-top:calc(-1*").concat(theme.handleSize || 'inherit', "/4)}\n\n.dSsWD_cwos:active,.dSsWD_cwos:focus{outline:none}\n\n.dSsWD_cwos:active::-moz-range-thumb,.dSsWD_cwos:focus::-moz-range-thumb{box-shadow:0 0.0625rem 0 ").concat(theme.handleShadowColor || 'inherit', ",0 0 0 ").concat(theme.handleFocusOutlineWidth || 'inherit', " ").concat(theme.handleFocusOutlineColor || 'inherit', "}\n\n.dSsWD_cwos:active::-ms-thumb,.dSsWD_cwos:focus::-ms-thumb{box-shadow:0 0.0625rem 0 ").concat(theme.handleShadowColor || 'inherit', ",0 0 0 ").concat(theme.handleFocusOutlineWidth || 'inherit', " ").concat(theme.handleFocusOutlineColor || 'inherit', "}\n\n.dSsWD_cwos:active::-webkit-slider-thumb,.dSsWD_cwos:focus::-webkit-slider-thumb{box-shadow:0 0.0625rem 0 ").concat(theme.handleShadowColor || 'inherit', ",0 0 0 ").concat(theme.handleFocusOutlineWidth || 'inherit', " ").concat(theme.handleFocusOutlineColor || 'inherit', "}\n\n.dSsWD_cwos::-moz-focus-inner,.dSsWD_cwos::-moz-focus-outer{border:0;outline:none}\n\n.dSsWD_cwos::-moz-range-track{background:").concat(theme.trackBackground || 'inherit', ";border-color:transparent;border-radius:0.312em;color:transparent;cursor:pointer;height:calc(").concat(theme.handleSize || 'inherit', "/2)}\n\n.dSsWD_cwos::-ms-track{background:").concat(theme.trackBackground || 'inherit', ";border-color:transparent;border-radius:0.312em;color:transparent;cursor:pointer;height:calc(").concat(theme.handleSize || 'inherit', "/2)}\n\n.dSsWD_cwos::-webkit-slider-runnable-track{background:").concat(theme.trackBackground || 'inherit', ";border-color:transparent;border-radius:0.312em;color:transparent;cursor:pointer;height:calc(").concat(theme.handleSize || 'inherit', "/2)}\n\n.dSsWD_cwos::-ms-track{border-width:1rem 0}\n\n.dSsWD_cwos::-ms-fill-lower,.dSsWD_cwos::-ms-fill-upper{background:#2d3b45;border-radius:0.75rem;border-width:1.5rem 0}\n\n.dSsWD_cwos::-ms-tooltip{display:none}\n\n.dSsWD_cwos::-ms-thumb{-webkit-appearance:none;background:#fff;border:0.25rem solid #2d3b45;border-radius:100%;box-sizing:border-box;height:1.75rem;margin-top:0.0625rem;width:1.75rem}\n\n.dSsWD_fvkP .dSsWD_cwos:focus{outline:0.125rem solid ").concat(theme.handleBackground || 'inherit', "}\n\n.dSsWD_fqzO{all:initial;animation:none 0s ease 0s 1 normal none running;backface-visibility:visible;background:transparent none repeat 0 0/auto auto padding-box border-box scroll;border:medium none currentColor;border-collapse:separate;border-image:none;border-radius:0;border-spacing:0;bottom:auto;box-shadow:none;box-sizing:content-box;box-sizing:border-box;caption-side:top;clear:none;clip:auto;color:#000;color:inherit;column-count:auto;column-fill:balance;column-gap:normal;column-rule:medium none currentColor;column-span:1;column-width:auto;columns:auto;content:normal;counter-increment:none;counter-reset:none;cursor:auto;direction:ltr;display:inline;display:block;empty-cells:show;float:none;font-family:serif;font-family:").concat(theme.valueFontFamily || 'inherit', ";font-size:medium;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:400;font-weight:").concat(theme.valueFontWeight || 'inherit', ";height:auto;hyphens:none;left:auto;letter-spacing:normal;line-height:normal;list-style:disc outside none;margin:0;max-height:none;max-width:none;min-height:0;min-width:0;opacity:1;orphans:2;outline:medium none invert;overflow:visible;overflow-x:visible;overflow-y:visible;padding:0;page-break-after:auto;page-break-before:auto;page-break-inside:auto;perspective:none;perspective-origin:50% 50%;position:static;right:auto;tab-size:8;table-layout:auto;text-align:left;text-align:center;text-align-last:auto;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;top:auto;transform:none;transform-origin:50% 50% 0;transform-style:flat;transition:none 0s ease 0s;unicode-bidi:normal;vertical-align:baseline;visibility:visible;white-space:normal;widows:2;width:auto;word-spacing:normal;z-index:auto}\n\n[dir=ltr] .dSsWD_fqzO,[dir=rtl] .dSsWD_fqzO{text-align:center}\n\n.dSsWD_doqw .dSsWD_fqzO{font-size:").concat(theme.valueSmallFontSize || 'inherit', ";line-height:").concat(theme.valueSmallLineHeight || 'inherit', ";padding:").concat(theme.valueSmallPadding || 'inherit', "}\n\n.dSsWD_ycrn .dSsWD_fqzO{font-size:").concat(theme.valueMediumFontSize || 'inherit', ";line-height:").concat(theme.valueMediumLineHeight || 'inherit', ";padding:").concat(theme.valueMediumPadding || 'inherit', "}\n\n.dSsWD_cMDj .dSsWD_fqzO{font-size:").concat(theme.valueLargeFontSize || 'inherit', ";line-height:").concat(theme.valueLargeLineHeight || 'inherit', ";padding:").concat(theme.valueLargePadding || 'inherit', "}");
+    return "\n\n.eHtOX_bGBk{align-items:center;display:flex;justify-content:center;min-width:".concat(theme.minWidth || 'inherit', "}\n\n[dir=rtl] .eHtOX_cwos{direction:rtl}\n\n.eHtOX_cwos{-moz-appearance:none;-webkit-appearance:none;all:initial;animation:none 0s ease 0s 1 normal none running;appearance:none;backface-visibility:visible;background:transparent none repeat 0 0/auto auto padding-box border-box scroll;border:medium none currentColor;border-collapse:separate;border-image:none;border-radius:0;border-spacing:0;bottom:auto;box-shadow:none;box-sizing:content-box;box-sizing:border-box;caption-side:top;clear:none;clip:auto;color:#000;column-count:auto;column-fill:balance;column-gap:normal;column-rule:medium none currentColor;column-span:1;column-width:auto;columns:auto;content:normal;counter-increment:none;counter-reset:none;cursor:auto;direction:ltr;display:inline;empty-cells:show;flex:auto;float:none;font-family:serif;font-size:medium;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:400;height:auto;hyphens:none;left:auto;letter-spacing:normal;line-height:normal;list-style:disc outside none;margin:0;max-height:none;max-width:none;min-height:0;min-width:0;opacity:1;orphans:2;outline:medium none invert;outline:none;overflow:visible;overflow-x:visible;overflow-y:visible;padding:0;page-break-after:auto;page-break-before:auto;page-break-inside:auto;perspective:none;perspective-origin:50% 50%;position:static;right:auto;tab-size:8;table-layout:auto;text-align:left;text-align-last:auto;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;top:auto;transform:none;transform-origin:50% 50% 0;transform-style:flat;transition:none 0s ease 0s;unicode-bidi:normal;vertical-align:baseline;visibility:visible;white-space:normal;widows:2;width:auto;width:100%;word-spacing:normal;z-index:auto}\n\n.eHtOX_cwos::-moz-range-thumb{-moz-appearance:none;appearance:none;background:").concat(theme.handleBackground || 'inherit', ";border-radius:50%;cursor:pointer;transition:all 0.15s ease-in-out}\n\n.eHtOX_cVAr .eHtOX_cwos::-moz-range-thumb{box-shadow:0 0.0625rem 0 ").concat(theme.handleShadowColor || 'inherit', ";height:").concat(theme.handleSize || 'inherit', ";width:").concat(theme.handleSize || 'inherit', "}\n\n.eHtOX_eUmu .eHtOX_cwos::-moz-range-thumb{border-color:").concat(theme.handleBorderColor || 'inherit', ";border-style:solid;border-width:").concat(theme.handleBorderSize || 'inherit', ";box-shadow:").concat(theme.handleShadow || 'inherit', ";box-sizing:border-box;height:calc(").concat(theme.handleSize || 'inherit', " + ").concat(theme.handleBorderSize || 'inherit', "*2);width:calc(").concat(theme.handleSize || 'inherit', " + ").concat(theme.handleBorderSize || 'inherit', "*2)}\n\n.eHtOX_cwos::-moz-range-thumb:hover{background:").concat(theme.handleHoverBackground || 'inherit', "}\n\n.eHtOX_cwos::-ms-thumb{appearance:none;background:").concat(theme.handleBackground || 'inherit', ";border-radius:50%;cursor:pointer;transition:all 0.15s ease-in-out}\n\n.eHtOX_cVAr .eHtOX_cwos::-ms-thumb{box-shadow:0 0.0625rem 0 ").concat(theme.handleShadowColor || 'inherit', ";height:").concat(theme.handleSize || 'inherit', ";width:").concat(theme.handleSize || 'inherit', "}\n\n.eHtOX_eUmu .eHtOX_cwos::-ms-thumb{border-color:").concat(theme.handleBorderColor || 'inherit', ";border-style:solid;border-width:").concat(theme.handleBorderSize || 'inherit', ";box-shadow:").concat(theme.handleShadow || 'inherit', ";box-sizing:border-box;height:calc(").concat(theme.handleSize || 'inherit', " + ").concat(theme.handleBorderSize || 'inherit', "*2);width:calc(").concat(theme.handleSize || 'inherit', " + ").concat(theme.handleBorderSize || 'inherit', "*2)}\n\n.eHtOX_cwos::-ms-thumb:hover{background:").concat(theme.handleHoverBackground || 'inherit', "}\n\n.eHtOX_cwos::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:").concat(theme.handleBackground || 'inherit', ";border-radius:50%;cursor:pointer;transition:all 0.15s ease-in-out}\n\n.eHtOX_cVAr .eHtOX_cwos::-webkit-slider-thumb{box-shadow:0 0.0625rem 0 ").concat(theme.handleShadowColor || 'inherit', ";height:").concat(theme.handleSize || 'inherit', ";width:").concat(theme.handleSize || 'inherit', "}\n\n.eHtOX_eUmu .eHtOX_cwos::-webkit-slider-thumb{border-color:").concat(theme.handleBorderColor || 'inherit', ";border-style:solid;border-width:").concat(theme.handleBorderSize || 'inherit', ";box-shadow:").concat(theme.handleShadow || 'inherit', ";box-sizing:border-box;height:calc(").concat(theme.handleSize || 'inherit', " + ").concat(theme.handleBorderSize || 'inherit', "*2);width:calc(").concat(theme.handleSize || 'inherit', " + ").concat(theme.handleBorderSize || 'inherit', "*2)}\n\n.eHtOX_cwos::-webkit-slider-thumb:hover{background:").concat(theme.handleHoverBackground || 'inherit', "}\n\n.eHtOX_cVAr .eHtOX_cwos::-webkit-slider-thumb{margin-top:calc(-1*").concat(theme.handleSize || 'inherit', "/4)}\n\n.eHtOX_eUmu .eHtOX_cwos::-webkit-slider-thumb{margin-top:calc(-1*(").concat(theme.handleSize || 'inherit', " + ").concat(theme.handleBorderSize || 'inherit', "*2)/4)}\n\n.eHtOX_cwos:active,.eHtOX_cwos:focus{outline:none}\n\n.eHtOX_cVAr .eHtOX_cwos:active::-moz-range-thumb,.eHtOX_cVAr .eHtOX_cwos:focus::-moz-range-thumb{background:").concat(theme.handleFocusBackground || 'inherit', ";box-shadow:0 0.0625rem 0 ").concat(theme.handleShadowColor || 'inherit', ",0 0 0 ").concat(theme.handleFocusOutlineWidth || 'inherit', " ").concat(theme.handleFocusOutlineColor || 'inherit', "}\n\n.eHtOX_eUmu .eHtOX_cwos:active::-moz-range-thumb,.eHtOX_eUmu .eHtOX_cwos:focus::-moz-range-thumb{background:").concat(theme.handleFocusBackground || 'inherit', ";box-shadow:").concat(theme.handleShadow || 'inherit', ",inset 0 0 0 ").concat(theme.handleFocusInset || 'inherit', " ").concat(theme.handleFocusBackground || 'inherit', ",inset 0 0 0 calc(").concat(theme.handleFocusInset || 'inherit', " + ").concat(theme.handleFocusRingSize || 'inherit', ") ").concat(theme.handleFocusRingColor || 'inherit', "}\n\n.eHtOX_cVAr .eHtOX_cwos:active::-ms-thumb,.eHtOX_cVAr .eHtOX_cwos:focus::-ms-thumb{background:").concat(theme.handleFocusBackground || 'inherit', ";box-shadow:0 0.0625rem 0 ").concat(theme.handleShadowColor || 'inherit', ",0 0 0 ").concat(theme.handleFocusOutlineWidth || 'inherit', " ").concat(theme.handleFocusOutlineColor || 'inherit', "}\n\n.eHtOX_eUmu .eHtOX_cwos:active::-ms-thumb,.eHtOX_eUmu .eHtOX_cwos:focus::-ms-thumb{background:").concat(theme.handleFocusBackground || 'inherit', ";box-shadow:").concat(theme.handleShadow || 'inherit', ",inset 0 0 0 ").concat(theme.handleFocusInset || 'inherit', " ").concat(theme.handleFocusBackground || 'inherit', ",inset 0 0 0 calc(").concat(theme.handleFocusInset || 'inherit', " + ").concat(theme.handleFocusRingSize || 'inherit', ") ").concat(theme.handleFocusRingColor || 'inherit', "}\n\n.eHtOX_cVAr .eHtOX_cwos:active::-webkit-slider-thumb,.eHtOX_cVAr .eHtOX_cwos:focus::-webkit-slider-thumb{background:").concat(theme.handleFocusBackground || 'inherit', ";box-shadow:0 0.0625rem 0 ").concat(theme.handleShadowColor || 'inherit', ",0 0 0 ").concat(theme.handleFocusOutlineWidth || 'inherit', " ").concat(theme.handleFocusOutlineColor || 'inherit', "}\n\n.eHtOX_eUmu .eHtOX_cwos:active::-webkit-slider-thumb,.eHtOX_eUmu .eHtOX_cwos:focus::-webkit-slider-thumb{background:").concat(theme.handleFocusBackground || 'inherit', ";box-shadow:").concat(theme.handleShadow || 'inherit', ",inset 0 0 0 ").concat(theme.handleFocusInset || 'inherit', " ").concat(theme.handleFocusBackground || 'inherit', ",inset 0 0 0 calc(").concat(theme.handleFocusInset || 'inherit', " + ").concat(theme.handleFocusRingSize || 'inherit', ") ").concat(theme.handleFocusRingColor || 'inherit', "}\n\n.eHtOX_cwos::-moz-focus-inner,.eHtOX_cwos::-moz-focus-outer{border:0;outline:none}\n\n.eHtOX_cwos::-moz-range-track{background:").concat(theme.trackBackground || 'inherit', ";border-color:transparent;border-radius:0.312em;color:transparent;cursor:pointer;height:calc(").concat(theme.handleSize || 'inherit', "/2)}\n\n.eHtOX_cwos::-ms-track{background:").concat(theme.trackBackground || 'inherit', ";border-color:transparent;border-radius:0.312em;color:transparent;cursor:pointer;height:calc(").concat(theme.handleSize || 'inherit', "/2)}\n\n.eHtOX_cwos::-webkit-slider-runnable-track{background:").concat(theme.trackBackground || 'inherit', ";border-color:transparent;border-radius:0.312em;color:transparent;cursor:pointer;height:calc(").concat(theme.handleSize || 'inherit', "/2)}\n\n.eHtOX_cwos::-ms-track{border-width:1rem 0}\n\n.eHtOX_cwos::-ms-fill-lower,.eHtOX_cwos::-ms-fill-upper{background:#2d3b45;border-radius:0.75rem;border-width:1.5rem 0}\n\n.eHtOX_cwos::-ms-tooltip{display:none}\n\n.eHtOX_cwos::-ms-thumb{-webkit-appearance:none;background:#fff;border:0.25rem solid #2d3b45;border-radius:100%;box-sizing:border-box;height:1.75rem;margin-top:0.0625rem;width:1.75rem}\n\n.eHtOX_fvkP .eHtOX_cwos:focus{outline:0.125rem solid ").concat(theme.handleBackground || 'inherit', "}\n\n.eHtOX_fqzO{all:initial;animation:none 0s ease 0s 1 normal none running;backface-visibility:visible;background:transparent none repeat 0 0/auto auto padding-box border-box scroll;border:medium none currentColor;border-collapse:separate;border-image:none;border-radius:0;border-spacing:0;bottom:auto;box-shadow:none;box-sizing:content-box;box-sizing:border-box;caption-side:top;clear:none;clip:auto;color:#000;color:inherit;column-count:auto;column-fill:balance;column-gap:normal;column-rule:medium none currentColor;column-span:1;column-width:auto;columns:auto;content:normal;counter-increment:none;counter-reset:none;cursor:auto;direction:ltr;display:inline;display:block;empty-cells:show;float:none;font-family:serif;font-family:").concat(theme.valueFontFamily || 'inherit', ";font-size:medium;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:400;font-weight:").concat(theme.valueFontWeight || 'inherit', ";height:auto;hyphens:none;left:auto;letter-spacing:normal;line-height:normal;list-style:disc outside none;margin:0;max-height:none;max-width:none;min-height:0;min-width:0;opacity:1;orphans:2;outline:medium none invert;overflow:visible;overflow-x:visible;overflow-y:visible;padding:0;page-break-after:auto;page-break-before:auto;page-break-inside:auto;perspective:none;perspective-origin:50% 50%;position:static;right:auto;tab-size:8;table-layout:auto;text-align:left;text-align:center;text-align-last:auto;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;top:auto;transform:none;transform-origin:50% 50% 0;transform-style:flat;transition:none 0s ease 0s;unicode-bidi:normal;vertical-align:baseline;visibility:visible;white-space:normal;widows:2;width:auto;word-spacing:normal;z-index:auto}\n\n[dir=ltr] .eHtOX_fqzO,[dir=rtl] .eHtOX_fqzO{text-align:center}\n\n.eHtOX_doqw .eHtOX_fqzO{font-size:").concat(theme.valueSmallFontSize || 'inherit', ";line-height:").concat(theme.valueSmallLineHeight || 'inherit', ";padding:").concat(theme.valueSmallPadding || 'inherit', "}\n\n.eHtOX_ycrn .eHtOX_fqzO{font-size:").concat(theme.valueMediumFontSize || 'inherit', ";line-height:").concat(theme.valueMediumLineHeight || 'inherit', ";padding:").concat(theme.valueMediumPadding || 'inherit', "}\n\n.eHtOX_cMDj .eHtOX_fqzO{font-size:").concat(theme.valueLargeFontSize || 'inherit', ";line-height:").concat(theme.valueLargeLineHeight || 'inherit', ";padding:").concat(theme.valueLargePadding || 'inherit', "}");
   },
-  'root': 'dSsWD_bGBk',
-  'input': 'dSsWD_cwos',
-  'edge16Up': 'dSsWD_fvkP',
-  'value': 'dSsWD_fqzO',
-  'small': 'dSsWD_doqw',
-  'medium': 'dSsWD_ycrn',
-  'large': 'dSsWD_cMDj'
+  'root': 'eHtOX_bGBk',
+  'input': 'eHtOX_cwos',
+  'thumbVariant-deprecated': 'eHtOX_cVAr',
+  'thumbVariant-accessible': 'eHtOX_eUmu',
+  'edge16Up': 'eHtOX_fvkP',
+  'value': 'eHtOX_fqzO',
+  'small': 'eHtOX_doqw',
+  'medium': 'eHtOX_ycrn',
+  'large': 'eHtOX_cMDj'
 };
 import theme from "./theme.js";
 /**
@@ -149,9 +151,10 @@ var RangeInput = (_dec = testable(), _dec2 = themeable(theme, styles), _dec(_cla
           formatValue = _this$props2.formatValue,
           size = _this$props2.size,
           disabled = _this$props2.disabled,
-          readOnly = _this$props2.readOnly;
+          readOnly = _this$props2.readOnly,
+          thumbVariant = _this$props2.thumbVariant;
       var props = omitProps(this.props, RangeInput.propTypes);
-      var classes = (_classes = {}, _defineProperty(_classes, styles.root, true), _defineProperty(_classes, styles[size], size), _defineProperty(_classes, styles.edge16Up, isEdge), _classes);
+      var classes = (_classes = {}, _defineProperty(_classes, styles.root, true), _defineProperty(_classes, styles[size], size), _defineProperty(_classes, styles["thumbVariant-".concat(thumbVariant)], thumbVariant), _defineProperty(_classes, styles.edge16Up, isEdge), _classes);
       /* eslint-disable jsx-a11y/no-redundant-roles */
 
       return /*#__PURE__*/React.createElement(FormField, Object.assign({}, pickProps(this.props, FormField.propTypes), {
@@ -238,7 +241,10 @@ var RangeInput = (_dec = testable(), _dec2 = themeable(theme, styles), _dec(_cla
   formatValue: PropTypes.func,
   inline: PropTypes.bool,
   disabled: PropTypes.bool,
-  readOnly: PropTypes.bool
+  readOnly: PropTypes.bool,
+  // The thumbVariant prop got deprecated in V8, and is backported to V7.
+  // Will be removed in V9.
+  thumbVariant: deprecated.deprecatePropValues(PropTypes.oneOf(['deprecated', 'accessible']), ['deprecated'], 'The `deprecated` variant is not fully accessible and will be removed in V9. The connected theme variables will be removed as well: `handleShadowColor`, `handleFocusOutlineColor`, `handleFocusOutlineWidth`. Please use the `accessible` variant.')
 }, _class2.defaultProps = {
   step: 1,
   formatValue: function formatValue(val) {
@@ -256,7 +262,10 @@ var RangeInput = (_dec = testable(), _dec2 = themeable(theme, styles), _dec(_cla
   defaultValue: void 0,
   value: void 0,
   onChange: void 0,
-  messages: void 0
+  messages: void 0,
+  // The thumbVariant prop got deprecated in V8, and is backported to V7.
+  // Will be removed in V9.
+  thumbVariant: 'deprecated'
 }, _temp)) || _class) || _class);
 export default RangeInput;
 export { RangeInput };

package/es/RangeInput/theme.js

@@ -24,6 +24,7 @@
 import { alpha, darken } from '@instructure/ui-color-utils';
 export default function generator(_ref) {
   var colors = _ref.colors,
+      borders = _ref.borders,
       typography = _ref.typography,
       spacing = _ref.spacing,
       forms = _ref.forms;
@@ -31,9 +32,16 @@ export default function generator(_ref) {
     minWidth: '12.5rem',
     handleSize: '1.5rem',
     handleBackground: colors.backgroundBrand,
-    handleShadowColor: darken(colors.borderBrand, 15),
-    handleHoverBackground: colors.backgroundBrand,
+    handleBorderColor: colors.borderLightest,
+    handleBorderSize: borders.widthMedium,
+    handleShadow: '0 0.0625rem 0.125rem rgba(0, 0, 0, .2), 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1)',
+    handleFocusInset: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
+    handleFocusRingSize: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
+    handleFocusRingColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
     handleFocusBackground: colors.backgroundBrand,
+    handleHoverBackground: colors.backgroundBrand,
+    // Deprecated, remove with "deprecated" thumbVariant
+    handleShadowColor: darken(colors.borderBrand, 15),
     handleFocusOutlineColor: alpha(colors.borderBrand, 40),
     handleFocusOutlineWidth: '0.75em',
     trackBackground: colors.backgroundDark,
@@ -55,10 +63,11 @@ export default function generator(_ref) {
 generator.canvas = function (variables) {
   return {
     handleBackground: variables['ic-brand-primary'],
-    handleShadowColor: darken(variables['ic-brand-primary'], 15),
-    handleFocusOutlineColor: alpha(variables['ic-brand-primary'], 40),
     handleHoverBackground: variables['ic-brand-primary'],
     handleFocusBackground: variables['ic-brand-primary'],
-    valueBackground: variables['ic-brand-font-color-dark']
+    valueBackground: variables['ic-brand-font-color-dark'],
+    // Deprecated, remove with "deprecated" thumbVariant
+    handleShadowColor: darken(variables['ic-brand-primary'], 15),
+    handleFocusOutlineColor: alpha(variables['ic-brand-primary'], 40)
   };
 };

package/lib/RangeInput/index.js

@@ -45,6 +45,8 @@ var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 
 var _pickProps = require("@instructure/ui-react-utils/lib/pickProps.js");
 
+var _deprecated = require("@instructure/ui-react-utils/lib/deprecated.js");
+
 var _isEdge = require("@instructure/ui-utils/lib/isEdge.js");
 
 var _theme = _interopRequireDefault(require("./theme.js"));
@@ -52,17 +54,19 @@ var _theme = _interopRequireDefault(require("./theme.js"));
 var _dec, _dec2, _class, _class2, _temp;
 
 var styles = {
-  componentId: 'dSsWD',
+  componentId: 'eHtOX',
   template: function template(theme) {
-    return "\n\n.dSsWD_bGBk{align-items:center;display:flex;justify-content:center;min-width:".concat(theme.minWidth || 'inherit', "}\n\n[dir=rtl] .dSsWD_cwos{direction:rtl}\n\n.dSsWD_cwos{-moz-appearance:none;-webkit-appearance:none;all:initial;animation:none 0s ease 0s 1 normal none running;appearance:none;backface-visibility:visible;background:transparent none repeat 0 0/auto auto padding-box border-box scroll;border:medium none currentColor;border-collapse:separate;border-image:none;border-radius:0;border-spacing:0;bottom:auto;box-shadow:none;box-sizing:content-box;box-sizing:border-box;caption-side:top;clear:none;clip:auto;color:#000;column-count:auto;column-fill:balance;column-gap:normal;column-rule:medium none currentColor;column-span:1;column-width:auto;columns:auto;content:normal;counter-increment:none;counter-reset:none;cursor:auto;direction:ltr;display:inline;empty-cells:show;flex:auto;float:none;font-family:serif;font-size:medium;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:400;height:auto;hyphens:none;left:auto;letter-spacing:normal;line-height:normal;list-style:disc outside none;margin:0;max-height:none;max-width:none;min-height:0;min-width:0;opacity:1;orphans:2;outline:medium none invert;outline:none;overflow:visible;overflow-x:visible;overflow-y:visible;padding:0;page-break-after:auto;page-break-before:auto;page-break-inside:auto;perspective:none;perspective-origin:50% 50%;position:static;right:auto;tab-size:8;table-layout:auto;text-align:left;text-align-last:auto;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;top:auto;transform:none;transform-origin:50% 50% 0;transform-style:flat;transition:none 0s ease 0s;unicode-bidi:normal;vertical-align:baseline;visibility:visible;white-space:normal;widows:2;width:auto;width:100%;word-spacing:normal;z-index:auto}\n\n.dSsWD_cwos::-moz-range-thumb{-moz-appearance:none;appearance:none;background:").concat(theme.handleBackground || 'inherit', ";border-radius:50%;box-shadow:0 0.0625rem 0 ").concat(theme.handleShadowColor || 'inherit', ";cursor:pointer;height:").concat(theme.handleSize || 'inherit', ";transition:all 0.15s ease-in-out;width:").concat(theme.handleSize || 'inherit', "}\n\n.dSsWD_cwos::-moz-range-thumb:hover{background:").concat(theme.handleHoverBackground || 'inherit', "}\n\n.dSsWD_cwos::-ms-thumb{appearance:none;background:").concat(theme.handleBackground || 'inherit', ";border-radius:50%;box-shadow:0 0.0625rem 0 ").concat(theme.handleShadowColor || 'inherit', ";cursor:pointer;height:").concat(theme.handleSize || 'inherit', ";transition:all 0.15s ease-in-out;width:").concat(theme.handleSize || 'inherit', "}\n\n.dSsWD_cwos::-ms-thumb:hover{background:").concat(theme.handleHoverBackground || 'inherit', "}\n\n.dSsWD_cwos::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:").concat(theme.handleBackground || 'inherit', ";border-radius:50%;box-shadow:0 0.0625rem 0 ").concat(theme.handleShadowColor || 'inherit', ";cursor:pointer;height:").concat(theme.handleSize || 'inherit', ";transition:all 0.15s ease-in-out;width:").concat(theme.handleSize || 'inherit', "}\n\n.dSsWD_cwos::-webkit-slider-thumb:hover{background:").concat(theme.handleHoverBackground || 'inherit', "}\n\n.dSsWD_cwos::-webkit-slider-thumb{margin-top:calc(-1*").concat(theme.handleSize || 'inherit', "/4)}\n\n.dSsWD_cwos:active,.dSsWD_cwos:focus{outline:none}\n\n.dSsWD_cwos:active::-moz-range-thumb,.dSsWD_cwos:focus::-moz-range-thumb{box-shadow:0 0.0625rem 0 ").concat(theme.handleShadowColor || 'inherit', ",0 0 0 ").concat(theme.handleFocusOutlineWidth || 'inherit', " ").concat(theme.handleFocusOutlineColor || 'inherit', "}\n\n.dSsWD_cwos:active::-ms-thumb,.dSsWD_cwos:focus::-ms-thumb{box-shadow:0 0.0625rem 0 ").concat(theme.handleShadowColor || 'inherit', ",0 0 0 ").concat(theme.handleFocusOutlineWidth || 'inherit', " ").concat(theme.handleFocusOutlineColor || 'inherit', "}\n\n.dSsWD_cwos:active::-webkit-slider-thumb,.dSsWD_cwos:focus::-webkit-slider-thumb{box-shadow:0 0.0625rem 0 ").concat(theme.handleShadowColor || 'inherit', ",0 0 0 ").concat(theme.handleFocusOutlineWidth || 'inherit', " ").concat(theme.handleFocusOutlineColor || 'inherit', "}\n\n.dSsWD_cwos::-moz-focus-inner,.dSsWD_cwos::-moz-focus-outer{border:0;outline:none}\n\n.dSsWD_cwos::-moz-range-track{background:").concat(theme.trackBackground || 'inherit', ";border-color:transparent;border-radius:0.312em;color:transparent;cursor:pointer;height:calc(").concat(theme.handleSize || 'inherit', "/2)}\n\n.dSsWD_cwos::-ms-track{background:").concat(theme.trackBackground || 'inherit', ";border-color:transparent;border-radius:0.312em;color:transparent;cursor:pointer;height:calc(").concat(theme.handleSize || 'inherit', "/2)}\n\n.dSsWD_cwos::-webkit-slider-runnable-track{background:").concat(theme.trackBackground || 'inherit', ";border-color:transparent;border-radius:0.312em;color:transparent;cursor:pointer;height:calc(").concat(theme.handleSize || 'inherit', "/2)}\n\n.dSsWD_cwos::-ms-track{border-width:1rem 0}\n\n.dSsWD_cwos::-ms-fill-lower,.dSsWD_cwos::-ms-fill-upper{background:#2d3b45;border-radius:0.75rem;border-width:1.5rem 0}\n\n.dSsWD_cwos::-ms-tooltip{display:none}\n\n.dSsWD_cwos::-ms-thumb{-webkit-appearance:none;background:#fff;border:0.25rem solid #2d3b45;border-radius:100%;box-sizing:border-box;height:1.75rem;margin-top:0.0625rem;width:1.75rem}\n\n.dSsWD_fvkP .dSsWD_cwos:focus{outline:0.125rem solid ").concat(theme.handleBackground || 'inherit', "}\n\n.dSsWD_fqzO{all:initial;animation:none 0s ease 0s 1 normal none running;backface-visibility:visible;background:transparent none repeat 0 0/auto auto padding-box border-box scroll;border:medium none currentColor;border-collapse:separate;border-image:none;border-radius:0;border-spacing:0;bottom:auto;box-shadow:none;box-sizing:content-box;box-sizing:border-box;caption-side:top;clear:none;clip:auto;color:#000;color:inherit;column-count:auto;column-fill:balance;column-gap:normal;column-rule:medium none currentColor;column-span:1;column-width:auto;columns:auto;content:normal;counter-increment:none;counter-reset:none;cursor:auto;direction:ltr;display:inline;display:block;empty-cells:show;float:none;font-family:serif;font-family:").concat(theme.valueFontFamily || 'inherit', ";font-size:medium;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:400;font-weight:").concat(theme.valueFontWeight || 'inherit', ";height:auto;hyphens:none;left:auto;letter-spacing:normal;line-height:normal;list-style:disc outside none;margin:0;max-height:none;max-width:none;min-height:0;min-width:0;opacity:1;orphans:2;outline:medium none invert;overflow:visible;overflow-x:visible;overflow-y:visible;padding:0;page-break-after:auto;page-break-before:auto;page-break-inside:auto;perspective:none;perspective-origin:50% 50%;position:static;right:auto;tab-size:8;table-layout:auto;text-align:left;text-align:center;text-align-last:auto;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;top:auto;transform:none;transform-origin:50% 50% 0;transform-style:flat;transition:none 0s ease 0s;unicode-bidi:normal;vertical-align:baseline;visibility:visible;white-space:normal;widows:2;width:auto;word-spacing:normal;z-index:auto}\n\n[dir=ltr] .dSsWD_fqzO,[dir=rtl] .dSsWD_fqzO{text-align:center}\n\n.dSsWD_doqw .dSsWD_fqzO{font-size:").concat(theme.valueSmallFontSize || 'inherit', ";line-height:").concat(theme.valueSmallLineHeight || 'inherit', ";padding:").concat(theme.valueSmallPadding || 'inherit', "}\n\n.dSsWD_ycrn .dSsWD_fqzO{font-size:").concat(theme.valueMediumFontSize || 'inherit', ";line-height:").concat(theme.valueMediumLineHeight || 'inherit', ";padding:").concat(theme.valueMediumPadding || 'inherit', "}\n\n.dSsWD_cMDj .dSsWD_fqzO{font-size:").concat(theme.valueLargeFontSize || 'inherit', ";line-height:").concat(theme.valueLargeLineHeight || 'inherit', ";padding:").concat(theme.valueLargePadding || 'inherit', "}");
+    return "\n\n.eHtOX_bGBk{align-items:center;display:flex;justify-content:center;min-width:".concat(theme.minWidth || 'inherit', "}\n\n[dir=rtl] .eHtOX_cwos{direction:rtl}\n\n.eHtOX_cwos{-moz-appearance:none;-webkit-appearance:none;all:initial;animation:none 0s ease 0s 1 normal none running;appearance:none;backface-visibility:visible;background:transparent none repeat 0 0/auto auto padding-box border-box scroll;border:medium none currentColor;border-collapse:separate;border-image:none;border-radius:0;border-spacing:0;bottom:auto;box-shadow:none;box-sizing:content-box;box-sizing:border-box;caption-side:top;clear:none;clip:auto;color:#000;column-count:auto;column-fill:balance;column-gap:normal;column-rule:medium none currentColor;column-span:1;column-width:auto;columns:auto;content:normal;counter-increment:none;counter-reset:none;cursor:auto;direction:ltr;display:inline;empty-cells:show;flex:auto;float:none;font-family:serif;font-size:medium;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:400;height:auto;hyphens:none;left:auto;letter-spacing:normal;line-height:normal;list-style:disc outside none;margin:0;max-height:none;max-width:none;min-height:0;min-width:0;opacity:1;orphans:2;outline:medium none invert;outline:none;overflow:visible;overflow-x:visible;overflow-y:visible;padding:0;page-break-after:auto;page-break-before:auto;page-break-inside:auto;perspective:none;perspective-origin:50% 50%;position:static;right:auto;tab-size:8;table-layout:auto;text-align:left;text-align-last:auto;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;top:auto;transform:none;transform-origin:50% 50% 0;transform-style:flat;transition:none 0s ease 0s;unicode-bidi:normal;vertical-align:baseline;visibility:visible;white-space:normal;widows:2;width:auto;width:100%;word-spacing:normal;z-index:auto}\n\n.eHtOX_cwos::-moz-range-thumb{-moz-appearance:none;appearance:none;background:").concat(theme.handleBackground || 'inherit', ";border-radius:50%;cursor:pointer;transition:all 0.15s ease-in-out}\n\n.eHtOX_cVAr .eHtOX_cwos::-moz-range-thumb{box-shadow:0 0.0625rem 0 ").concat(theme.handleShadowColor || 'inherit', ";height:").concat(theme.handleSize || 'inherit', ";width:").concat(theme.handleSize || 'inherit', "}\n\n.eHtOX_eUmu .eHtOX_cwos::-moz-range-thumb{border-color:").concat(theme.handleBorderColor || 'inherit', ";border-style:solid;border-width:").concat(theme.handleBorderSize || 'inherit', ";box-shadow:").concat(theme.handleShadow || 'inherit', ";box-sizing:border-box;height:calc(").concat(theme.handleSize || 'inherit', " + ").concat(theme.handleBorderSize || 'inherit', "*2);width:calc(").concat(theme.handleSize || 'inherit', " + ").concat(theme.handleBorderSize || 'inherit', "*2)}\n\n.eHtOX_cwos::-moz-range-thumb:hover{background:").concat(theme.handleHoverBackground || 'inherit', "}\n\n.eHtOX_cwos::-ms-thumb{appearance:none;background:").concat(theme.handleBackground || 'inherit', ";border-radius:50%;cursor:pointer;transition:all 0.15s ease-in-out}\n\n.eHtOX_cVAr .eHtOX_cwos::-ms-thumb{box-shadow:0 0.0625rem 0 ").concat(theme.handleShadowColor || 'inherit', ";height:").concat(theme.handleSize || 'inherit', ";width:").concat(theme.handleSize || 'inherit', "}\n\n.eHtOX_eUmu .eHtOX_cwos::-ms-thumb{border-color:").concat(theme.handleBorderColor || 'inherit', ";border-style:solid;border-width:").concat(theme.handleBorderSize || 'inherit', ";box-shadow:").concat(theme.handleShadow || 'inherit', ";box-sizing:border-box;height:calc(").concat(theme.handleSize || 'inherit', " + ").concat(theme.handleBorderSize || 'inherit', "*2);width:calc(").concat(theme.handleSize || 'inherit', " + ").concat(theme.handleBorderSize || 'inherit', "*2)}\n\n.eHtOX_cwos::-ms-thumb:hover{background:").concat(theme.handleHoverBackground || 'inherit', "}\n\n.eHtOX_cwos::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:").concat(theme.handleBackground || 'inherit', ";border-radius:50%;cursor:pointer;transition:all 0.15s ease-in-out}\n\n.eHtOX_cVAr .eHtOX_cwos::-webkit-slider-thumb{box-shadow:0 0.0625rem 0 ").concat(theme.handleShadowColor || 'inherit', ";height:").concat(theme.handleSize || 'inherit', ";width:").concat(theme.handleSize || 'inherit', "}\n\n.eHtOX_eUmu .eHtOX_cwos::-webkit-slider-thumb{border-color:").concat(theme.handleBorderColor || 'inherit', ";border-style:solid;border-width:").concat(theme.handleBorderSize || 'inherit', ";box-shadow:").concat(theme.handleShadow || 'inherit', ";box-sizing:border-box;height:calc(").concat(theme.handleSize || 'inherit', " + ").concat(theme.handleBorderSize || 'inherit', "*2);width:calc(").concat(theme.handleSize || 'inherit', " + ").concat(theme.handleBorderSize || 'inherit', "*2)}\n\n.eHtOX_cwos::-webkit-slider-thumb:hover{background:").concat(theme.handleHoverBackground || 'inherit', "}\n\n.eHtOX_cVAr .eHtOX_cwos::-webkit-slider-thumb{margin-top:calc(-1*").concat(theme.handleSize || 'inherit', "/4)}\n\n.eHtOX_eUmu .eHtOX_cwos::-webkit-slider-thumb{margin-top:calc(-1*(").concat(theme.handleSize || 'inherit', " + ").concat(theme.handleBorderSize || 'inherit', "*2)/4)}\n\n.eHtOX_cwos:active,.eHtOX_cwos:focus{outline:none}\n\n.eHtOX_cVAr .eHtOX_cwos:active::-moz-range-thumb,.eHtOX_cVAr .eHtOX_cwos:focus::-moz-range-thumb{background:").concat(theme.handleFocusBackground || 'inherit', ";box-shadow:0 0.0625rem 0 ").concat(theme.handleShadowColor || 'inherit', ",0 0 0 ").concat(theme.handleFocusOutlineWidth || 'inherit', " ").concat(theme.handleFocusOutlineColor || 'inherit', "}\n\n.eHtOX_eUmu .eHtOX_cwos:active::-moz-range-thumb,.eHtOX_eUmu .eHtOX_cwos:focus::-moz-range-thumb{background:").concat(theme.handleFocusBackground || 'inherit', ";box-shadow:").concat(theme.handleShadow || 'inherit', ",inset 0 0 0 ").concat(theme.handleFocusInset || 'inherit', " ").concat(theme.handleFocusBackground || 'inherit', ",inset 0 0 0 calc(").concat(theme.handleFocusInset || 'inherit', " + ").concat(theme.handleFocusRingSize || 'inherit', ") ").concat(theme.handleFocusRingColor || 'inherit', "}\n\n.eHtOX_cVAr .eHtOX_cwos:active::-ms-thumb,.eHtOX_cVAr .eHtOX_cwos:focus::-ms-thumb{background:").concat(theme.handleFocusBackground || 'inherit', ";box-shadow:0 0.0625rem 0 ").concat(theme.handleShadowColor || 'inherit', ",0 0 0 ").concat(theme.handleFocusOutlineWidth || 'inherit', " ").concat(theme.handleFocusOutlineColor || 'inherit', "}\n\n.eHtOX_eUmu .eHtOX_cwos:active::-ms-thumb,.eHtOX_eUmu .eHtOX_cwos:focus::-ms-thumb{background:").concat(theme.handleFocusBackground || 'inherit', ";box-shadow:").concat(theme.handleShadow || 'inherit', ",inset 0 0 0 ").concat(theme.handleFocusInset || 'inherit', " ").concat(theme.handleFocusBackground || 'inherit', ",inset 0 0 0 calc(").concat(theme.handleFocusInset || 'inherit', " + ").concat(theme.handleFocusRingSize || 'inherit', ") ").concat(theme.handleFocusRingColor || 'inherit', "}\n\n.eHtOX_cVAr .eHtOX_cwos:active::-webkit-slider-thumb,.eHtOX_cVAr .eHtOX_cwos:focus::-webkit-slider-thumb{background:").concat(theme.handleFocusBackground || 'inherit', ";box-shadow:0 0.0625rem 0 ").concat(theme.handleShadowColor || 'inherit', ",0 0 0 ").concat(theme.handleFocusOutlineWidth || 'inherit', " ").concat(theme.handleFocusOutlineColor || 'inherit', "}\n\n.eHtOX_eUmu .eHtOX_cwos:active::-webkit-slider-thumb,.eHtOX_eUmu .eHtOX_cwos:focus::-webkit-slider-thumb{background:").concat(theme.handleFocusBackground || 'inherit', ";box-shadow:").concat(theme.handleShadow || 'inherit', ",inset 0 0 0 ").concat(theme.handleFocusInset || 'inherit', " ").concat(theme.handleFocusBackground || 'inherit', ",inset 0 0 0 calc(").concat(theme.handleFocusInset || 'inherit', " + ").concat(theme.handleFocusRingSize || 'inherit', ") ").concat(theme.handleFocusRingColor || 'inherit', "}\n\n.eHtOX_cwos::-moz-focus-inner,.eHtOX_cwos::-moz-focus-outer{border:0;outline:none}\n\n.eHtOX_cwos::-moz-range-track{background:").concat(theme.trackBackground || 'inherit', ";border-color:transparent;border-radius:0.312em;color:transparent;cursor:pointer;height:calc(").concat(theme.handleSize || 'inherit', "/2)}\n\n.eHtOX_cwos::-ms-track{background:").concat(theme.trackBackground || 'inherit', ";border-color:transparent;border-radius:0.312em;color:transparent;cursor:pointer;height:calc(").concat(theme.handleSize || 'inherit', "/2)}\n\n.eHtOX_cwos::-webkit-slider-runnable-track{background:").concat(theme.trackBackground || 'inherit', ";border-color:transparent;border-radius:0.312em;color:transparent;cursor:pointer;height:calc(").concat(theme.handleSize || 'inherit', "/2)}\n\n.eHtOX_cwos::-ms-track{border-width:1rem 0}\n\n.eHtOX_cwos::-ms-fill-lower,.eHtOX_cwos::-ms-fill-upper{background:#2d3b45;border-radius:0.75rem;border-width:1.5rem 0}\n\n.eHtOX_cwos::-ms-tooltip{display:none}\n\n.eHtOX_cwos::-ms-thumb{-webkit-appearance:none;background:#fff;border:0.25rem solid #2d3b45;border-radius:100%;box-sizing:border-box;height:1.75rem;margin-top:0.0625rem;width:1.75rem}\n\n.eHtOX_fvkP .eHtOX_cwos:focus{outline:0.125rem solid ").concat(theme.handleBackground || 'inherit', "}\n\n.eHtOX_fqzO{all:initial;animation:none 0s ease 0s 1 normal none running;backface-visibility:visible;background:transparent none repeat 0 0/auto auto padding-box border-box scroll;border:medium none currentColor;border-collapse:separate;border-image:none;border-radius:0;border-spacing:0;bottom:auto;box-shadow:none;box-sizing:content-box;box-sizing:border-box;caption-side:top;clear:none;clip:auto;color:#000;color:inherit;column-count:auto;column-fill:balance;column-gap:normal;column-rule:medium none currentColor;column-span:1;column-width:auto;columns:auto;content:normal;counter-increment:none;counter-reset:none;cursor:auto;direction:ltr;display:inline;display:block;empty-cells:show;float:none;font-family:serif;font-family:").concat(theme.valueFontFamily || 'inherit', ";font-size:medium;font-stretch:normal;font-style:normal;font-variant:normal;font-weight:400;font-weight:").concat(theme.valueFontWeight || 'inherit', ";height:auto;hyphens:none;left:auto;letter-spacing:normal;line-height:normal;list-style:disc outside none;margin:0;max-height:none;max-width:none;min-height:0;min-width:0;opacity:1;orphans:2;outline:medium none invert;overflow:visible;overflow-x:visible;overflow-y:visible;padding:0;page-break-after:auto;page-break-before:auto;page-break-inside:auto;perspective:none;perspective-origin:50% 50%;position:static;right:auto;tab-size:8;table-layout:auto;text-align:left;text-align:center;text-align-last:auto;text-decoration:none;text-indent:0;text-shadow:none;text-transform:none;top:auto;transform:none;transform-origin:50% 50% 0;transform-style:flat;transition:none 0s ease 0s;unicode-bidi:normal;vertical-align:baseline;visibility:visible;white-space:normal;widows:2;width:auto;word-spacing:normal;z-index:auto}\n\n[dir=ltr] .eHtOX_fqzO,[dir=rtl] .eHtOX_fqzO{text-align:center}\n\n.eHtOX_doqw .eHtOX_fqzO{font-size:").concat(theme.valueSmallFontSize || 'inherit', ";line-height:").concat(theme.valueSmallLineHeight || 'inherit', ";padding:").concat(theme.valueSmallPadding || 'inherit', "}\n\n.eHtOX_ycrn .eHtOX_fqzO{font-size:").concat(theme.valueMediumFontSize || 'inherit', ";line-height:").concat(theme.valueMediumLineHeight || 'inherit', ";padding:").concat(theme.valueMediumPadding || 'inherit', "}\n\n.eHtOX_cMDj .eHtOX_fqzO{font-size:").concat(theme.valueLargeFontSize || 'inherit', ";line-height:").concat(theme.valueLargeLineHeight || 'inherit', ";padding:").concat(theme.valueLargePadding || 'inherit', "}");
   },
-  'root': 'dSsWD_bGBk',
-  'input': 'dSsWD_cwos',
-  'edge16Up': 'dSsWD_fvkP',
-  'value': 'dSsWD_fqzO',
-  'small': 'dSsWD_doqw',
-  'medium': 'dSsWD_ycrn',
-  'large': 'dSsWD_cMDj'
+  'root': 'eHtOX_bGBk',
+  'input': 'eHtOX_cwos',
+  'thumbVariant-deprecated': 'eHtOX_cVAr',
+  'thumbVariant-accessible': 'eHtOX_eUmu',
+  'edge16Up': 'eHtOX_fvkP',
+  'value': 'eHtOX_fqzO',
+  'small': 'eHtOX_doqw',
+  'medium': 'eHtOX_ycrn',
+  'large': 'eHtOX_cMDj'
 };
 
 /**
@@ -157,9 +161,10 @@ var RangeInput = (_dec = (0, _testable.testable)(), _dec2 = (0, _themeable.theme
           formatValue = _this$props2.formatValue,
           size = _this$props2.size,
           disabled = _this$props2.disabled,
-          readOnly = _this$props2.readOnly;
+          readOnly = _this$props2.readOnly,
+          thumbVariant = _this$props2.thumbVariant;
       var props = (0, _omitProps.omitProps)(this.props, RangeInput.propTypes);
-      var classes = (_classes = {}, (0, _defineProperty2.default)(_classes, styles.root, true), (0, _defineProperty2.default)(_classes, styles[size], size), (0, _defineProperty2.default)(_classes, styles.edge16Up, _isEdge.isEdge), _classes);
+      var classes = (_classes = {}, (0, _defineProperty2.default)(_classes, styles.root, true), (0, _defineProperty2.default)(_classes, styles[size], size), (0, _defineProperty2.default)(_classes, styles["thumbVariant-".concat(thumbVariant)], thumbVariant), (0, _defineProperty2.default)(_classes, styles.edge16Up, _isEdge.isEdge), _classes);
       /* eslint-disable jsx-a11y/no-redundant-roles */
 
       return /*#__PURE__*/_react.default.createElement(_FormField.FormField, Object.assign({}, (0, _pickProps.pickProps)(this.props, _FormField.FormField.propTypes), {
@@ -245,7 +250,10 @@ var RangeInput = (_dec = (0, _testable.testable)(), _dec2 = (0, _themeable.theme
   formatValue: _propTypes.default.func,
   inline: _propTypes.default.bool,
   disabled: _propTypes.default.bool,
-  readOnly: _propTypes.default.bool
+  readOnly: _propTypes.default.bool,
+  // The thumbVariant prop got deprecated in V8, and is backported to V7.
+  // Will be removed in V9.
+  thumbVariant: _deprecated.deprecated.deprecatePropValues(_propTypes.default.oneOf(['deprecated', 'accessible']), ['deprecated'], 'The `deprecated` variant is not fully accessible and will be removed in V9. The connected theme variables will be removed as well: `handleShadowColor`, `handleFocusOutlineColor`, `handleFocusOutlineWidth`. Please use the `accessible` variant.')
 }, _class2.defaultProps = {
   step: 1,
   formatValue: function formatValue(val) {
@@ -263,7 +271,10 @@ var RangeInput = (_dec = (0, _testable.testable)(), _dec2 = (0, _themeable.theme
   defaultValue: void 0,
   value: void 0,
   onChange: void 0,
-  messages: void 0
+  messages: void 0,
+  // The thumbVariant prop got deprecated in V8, and is backported to V7.
+  // Will be removed in V9.
+  thumbVariant: 'deprecated'
 }, _temp)) || _class) || _class);
 exports.RangeInput = RangeInput;
 var _default = RangeInput;

package/lib/RangeInput/theme.js

@@ -34,6 +34,7 @@ var _darken = require("@instructure/ui-color-utils/lib/darken.js");
  */
 function generator(_ref) {
   var colors = _ref.colors,
+      borders = _ref.borders,
       typography = _ref.typography,
       spacing = _ref.spacing,
       forms = _ref.forms;
@@ -41,9 +42,16 @@ function generator(_ref) {
     minWidth: '12.5rem',
     handleSize: '1.5rem',
     handleBackground: colors.backgroundBrand,
-    handleShadowColor: (0, _darken.darken)(colors.borderBrand, 15),
-    handleHoverBackground: colors.backgroundBrand,
+    handleBorderColor: colors.borderLightest,
+    handleBorderSize: borders.widthMedium,
+    handleShadow: '0 0.0625rem 0.125rem rgba(0, 0, 0, .2), 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1)',
+    handleFocusInset: borders === null || borders === void 0 ? void 0 : borders.widthSmall,
+    handleFocusRingSize: borders === null || borders === void 0 ? void 0 : borders.widthMedium,
+    handleFocusRingColor: colors === null || colors === void 0 ? void 0 : colors.backgroundLightest,
     handleFocusBackground: colors.backgroundBrand,
+    handleHoverBackground: colors.backgroundBrand,
+    // Deprecated, remove with "deprecated" thumbVariant
+    handleShadowColor: (0, _darken.darken)(colors.borderBrand, 15),
     handleFocusOutlineColor: (0, _alpha.alpha)(colors.borderBrand, 40),
     handleFocusOutlineWidth: '0.75em',
     trackBackground: colors.backgroundDark,
@@ -65,10 +73,11 @@ function generator(_ref) {
 generator.canvas = function (variables) {
   return {
     handleBackground: variables['ic-brand-primary'],
-    handleShadowColor: (0, _darken.darken)(variables['ic-brand-primary'], 15),
-    handleFocusOutlineColor: (0, _alpha.alpha)(variables['ic-brand-primary'], 40),
     handleHoverBackground: variables['ic-brand-primary'],
     handleFocusBackground: variables['ic-brand-primary'],
-    valueBackground: variables['ic-brand-font-color-dark']
+    valueBackground: variables['ic-brand-font-color-dark'],
+    // Deprecated, remove with "deprecated" thumbVariant
+    handleShadowColor: (0, _darken.darken)(variables['ic-brand-primary'], 15),
+    handleFocusOutlineColor: (0, _alpha.alpha)(variables['ic-brand-primary'], 40)
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-range-input",
-  "version": "7.16.0",
+  "version": "7.19.0",
   "description": "A styled HTML range input",
   "author": "Instructure, Inc. Engineering and Product Design",
   "type": "commonjs",
@@ -24,24 +24,24 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.9.2",
-    "@instructure/console": "^7.16.0",
-    "@instructure/ui-color-utils": "^7.16.0",
-    "@instructure/ui-dom-utils": "^7.16.0",
-    "@instructure/ui-form-field": "^7.16.0",
-    "@instructure/ui-prop-types": "^7.16.0",
-    "@instructure/ui-react-utils": "^7.16.0",
-    "@instructure/ui-testable": "^7.16.0",
-    "@instructure/ui-themeable": "^7.16.0",
-    "@instructure/ui-utils": "^7.16.0",
-    "@instructure/ui-view": "^7.16.0",
-    "@instructure/uid": "^7.16.0",
+    "@instructure/console": "^7.19.0",
+    "@instructure/ui-color-utils": "^7.19.0",
+    "@instructure/ui-dom-utils": "^7.19.0",
+    "@instructure/ui-form-field": "^7.19.0",
+    "@instructure/ui-prop-types": "^7.19.0",
+    "@instructure/ui-react-utils": "^7.19.0",
+    "@instructure/ui-testable": "^7.19.0",
+    "@instructure/ui-themeable": "^7.19.0",
+    "@instructure/ui-utils": "^7.19.0",
+    "@instructure/ui-view": "^7.19.0",
+    "@instructure/uid": "^7.19.0",
     "classnames": "^2",
     "prop-types": "^15"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "^7.16.0",
-    "@instructure/ui-test-locator": "^7.16.0",
-    "@instructure/ui-test-utils": "^7.16.0"
+    "@instructure/ui-babel-preset": "^7.19.0",
+    "@instructure/ui-test-locator": "^7.19.0",
+    "@instructure/ui-test-utils": "^7.19.0"
   },
   "peerDependencies": {
     "react": "^16.8"

package/src/RangeInput/README.md

@@ -6,7 +6,74 @@ An html5 range input/slider component.
 
 ```js
 ---
+render: false
 example: true
 ---
-<RangeInput label="Grading range" defaultValue={50} max={100} min={0} />
+  class Example extends React.Component {
+    state = {
+      size: "small",
+      thumbVariant: "accessible",
+    }
+
+    handleSizeChange = (event, value) => {
+      this.setState({ size: value })
+    }
+
+    handleThumbVariantChange = (event, value) => {
+      this.setState({ thumbVariant: value })
+    }
+
+    render() {
+      return (
+        <div>
+          <View
+            as="div"
+            padding="medium"
+            background="primary"
+          >
+            <RangeInput
+              label="Grading range"
+              defaultValue={30}
+              max={100}
+              min={0}
+              size={this.state.size}
+              thumbVariant={this.state.thumbVariant}
+            />
+          </View>
+
+          <View as="div" margin='medium 0 0'>
+            <FormFieldGroup
+              description={
+                <ScreenReaderContent>RangeInput Example Settings</ScreenReaderContent>
+              }
+              layout='columns'
+              vAlign='top'
+            >
+              <RadioInputGroup
+                onChange={this.handleSizeChange}
+                name="labelSize"
+                value={this.state.size}
+                description="Label size"
+              >
+                <RadioInput label="small" value="small" />
+                <RadioInput label="medium" value="medium" />
+                <RadioInput label="large" value="large" />
+              </RadioInputGroup>
+
+              <RadioInputGroup
+                onChange={this.handleThumbVariantChange}
+                name="thumbVariant"
+                value={this.state.thumbVariant}
+                description="Thumb variant"
+              >
+                <RadioInput label="accessible" value="accessible" />
+                <RadioInput label="deprecated" value="deprecated" />
+              </RadioInputGroup>
+            </FormFieldGroup>
+          </View>
+        </div>
+      )
+    }
+  }
+render(<Example />)
 ```

package/src/RangeInput/index.js

@@ -33,7 +33,7 @@ import { addEventListener } from '@instructure/ui-dom-utils'
 import { uid } from '@instructure/uid'
 import { themeable } from '@instructure/ui-themeable'
 import { testable } from '@instructure/ui-testable'
-import { omitProps, pickProps } from '@instructure/ui-react-utils'
+import { omitProps, pickProps, deprecated } from '@instructure/ui-react-utils'
 import { isEdge } from '@instructure/ui-utils'
 
 import styles from './styles.css'
@@ -79,7 +79,15 @@ class RangeInput extends Component {
     formatValue: PropTypes.func,
     inline: PropTypes.bool,
     disabled: PropTypes.bool,
-    readOnly: PropTypes.bool
+    readOnly: PropTypes.bool,
+
+    // The thumbVariant prop got deprecated in V8, and is backported to V7.
+    // Will be removed in V9.
+    thumbVariant: deprecated.deprecatePropValues(
+      PropTypes.oneOf(['deprecated', 'accessible']),
+      ['deprecated'],
+      'The `deprecated` variant is not fully accessible and will be removed in V9. The connected theme variables will be removed as well: `handleShadowColor`, `handleFocusOutlineColor`, `handleFocusOutlineWidth`. Please use the `accessible` variant.'
+    )
   }
 
   static defaultProps = {
@@ -97,7 +105,11 @@ class RangeInput extends Component {
     defaultValue: undefined,
     value: undefined,
     onChange: undefined,
-    messages: undefined
+    messages: undefined,
+
+    // The thumbVariant prop got deprecated in V8, and is backported to V7.
+    // Will be removed in V9.
+    thumbVariant: 'deprecated'
   }
 
   constructor(props) {
@@ -186,13 +198,14 @@ class RangeInput extends Component {
   }
 
   render() {
-    const { formatValue, size, disabled, readOnly } = this.props
+    const { formatValue, size, disabled, readOnly, thumbVariant } = this.props
 
     const props = omitProps(this.props, RangeInput.propTypes)
 
     const classes = {
       [styles.root]: true,
       [styles[size]]: size,
+      [styles[`thumbVariant-${thumbVariant}`]]: thumbVariant,
       [styles.edge16Up]: isEdge
     }
 

package/src/RangeInput/styles.css

@@ -27,10 +27,25 @@
     border-radius: 50%;
     cursor: pointer;
     transition: all 0.15s ease-in-out;
-    width: var(--handleSize);
-    height: var(--handleSize);
     background: var(--handleBackground);
-    box-shadow: 0 0.0625rem 0 var(--handleShadowColor);
+
+    /* stylelint-disable max-nesting-depth */
+    .thumbVariant-deprecated & {
+      width: var(--handleSize);
+      height: var(--handleSize);
+      box-shadow: 0 0.0625rem 0 var(--handleShadowColor);
+    }
+
+    .thumbVariant-accessible & {
+      width: calc(var(--handleSize) + (var(--handleBorderSize) * 2));
+      height: calc(var(--handleSize) + (var(--handleBorderSize) * 2));
+      border-width: var(--handleBorderSize);
+      border-color: var(--handleBorderColor);
+      border-style: solid;
+      box-sizing: border-box;
+      box-shadow: var(--handleShadow);
+    }
+    /* stylelint-enable max-nesting-depth */
 
     &:hover {
       background: var(--handleHoverBackground);
@@ -38,19 +53,37 @@
   }
 
   &::-webkit-slider-thumb {
-    margin-top: calc(-1 * var(--handleSize) / 4);
+    .thumbVariant-deprecated & {
+      margin-top: calc(-1 * var(--handleSize) / 4);
+    }
+
+    .thumbVariant-accessible & {
+      margin-top: calc(-1 * (var(--handleSize) + (var(--handleBorderSize) * 2)) / 4);
+    }
   }
 
   &:focus,
   &:active {
     outline: none;
 
-    /* stylelint-disable-next-line selector-pseudo-element-no-unknown */
+    /* stylelint-disable max-nesting-depth, selector-pseudo-element-no-unknown */
     &::range-thumb {
-      box-shadow:
-        0 0.0625rem 0 var(--handleShadowColor),
-        0 0 0 var(--handleFocusOutlineWidth) var(--handleFocusOutlineColor);
+      .thumbVariant-deprecated & {
+        background: var(--handleFocusBackground);
+        box-shadow:
+          0 0.0625rem 0 var(--handleShadowColor),
+          0 0 0 var(--handleFocusOutlineWidth) var(--handleFocusOutlineColor);
+      }
+
+      .thumbVariant-accessible & {
+        background: var(--handleFocusBackground);
+        box-shadow:
+          var(--handleShadow),
+          inset 0 0 0 var(--handleFocusInset) var(--handleFocusBackground),
+          inset 0 0 0 calc(var(--handleFocusInset) + var(--handleFocusRingSize)) var(--handleFocusRingColor);
+      }
     }
+    /* stylelint-enable max-nesting-depth, selector-pseudo-element-no-unknown */
   }
 
   /* remove outline in FF */

package/src/RangeInput/theme.js

@@ -24,17 +24,32 @@
 
 import { alpha, darken } from '@instructure/ui-color-utils'
 
-export default function generator({ colors, typography, spacing, forms }) {
+export default function generator({
+  colors,
+  borders,
+  typography,
+  spacing,
+  forms
+}) {
   return {
     minWidth: '12.5rem',
 
     handleSize: '1.5rem',
     handleBackground: colors.backgroundBrand,
-    handleShadowColor: darken(colors.borderBrand, 15),
+    handleBorderColor: colors.borderLightest,
+    handleBorderSize: borders.widthMedium,
+    handleShadow:
+      '0 0.0625rem 0.125rem rgba(0, 0, 0, .2), 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1)',
 
-    handleHoverBackground: colors.backgroundBrand,
+    handleFocusInset: borders?.widthSmall,
+    handleFocusRingSize: borders?.widthMedium,
+    handleFocusRingColor: colors?.backgroundLightest,
 
     handleFocusBackground: colors.backgroundBrand,
+    handleHoverBackground: colors.backgroundBrand,
+
+    // Deprecated, remove with "deprecated" thumbVariant
+    handleShadowColor: darken(colors.borderBrand, 15),
     handleFocusOutlineColor: alpha(colors.borderBrand, 40),
     handleFocusOutlineWidth: '0.75em',
 
@@ -61,10 +76,12 @@ export default function generator({ colors, typography, spacing, forms }) {
 generator.canvas = function (variables) {
   return {
     handleBackground: variables['ic-brand-primary'],
-    handleShadowColor: darken(variables['ic-brand-primary'], 15),
-    handleFocusOutlineColor: alpha(variables['ic-brand-primary'], 40),
     handleHoverBackground: variables['ic-brand-primary'],
     handleFocusBackground: variables['ic-brand-primary'],
-    valueBackground: variables['ic-brand-font-color-dark']
+    valueBackground: variables['ic-brand-font-color-dark'],
+
+    // Deprecated, remove with "deprecated" thumbVariant
+    handleShadowColor: darken(variables['ic-brand-primary'], 15),
+    handleFocusOutlineColor: alpha(variables['ic-brand-primary'], 40)
   }
 }

package/types/index.d.ts

@@ -36,6 +36,7 @@ export interface RangeInputProps {
     inline?: boolean;
     disabled?: boolean;
     readOnly?: boolean;
+    thumbVariant?: any;
 }
 
 export class RangeInput extends React.Component<RangeInputProps, any> {