@cloudscape-design/components-themeable 3.0.1182 → 3.0.1183

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (120) hide show
  1. package/lib/internal/manifest.json +1 -1
  2. package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +139 -132
  3. package/lib/internal/scss/slider/mixins.scss +32 -24
  4. package/lib/internal/scss/slider/styles.scss +56 -29
  5. package/lib/internal/template/alert/styles.css.js +27 -27
  6. package/lib/internal/template/alert/styles.scoped.css +50 -50
  7. package/lib/internal/template/alert/styles.selectors.js +27 -27
  8. package/lib/internal/template/annotation-context/annotation/styles.css.js +13 -13
  9. package/lib/internal/template/annotation-context/annotation/styles.scoped.css +21 -21
  10. package/lib/internal/template/annotation-context/annotation/styles.selectors.js +13 -13
  11. package/lib/internal/template/app-layout/notifications/styles.css.js +3 -3
  12. package/lib/internal/template/app-layout/notifications/styles.scoped.css +7 -7
  13. package/lib/internal/template/app-layout/notifications/styles.selectors.js +3 -3
  14. package/lib/internal/template/app-layout/visual-refresh/styles.css.js +86 -86
  15. package/lib/internal/template/app-layout/visual-refresh/styles.scoped.css +258 -258
  16. package/lib/internal/template/app-layout/visual-refresh/styles.selectors.js +86 -86
  17. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.css.js +30 -30
  18. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.scoped.css +87 -87
  19. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.selectors.js +30 -30
  20. package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.css.js +4 -4
  21. package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.scoped.css +7 -7
  22. package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.selectors.js +4 -4
  23. package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.css.js +27 -27
  24. package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.scoped.css +54 -54
  25. package/lib/internal/template/app-layout/visual-refresh-toolbar/skeleton/styles.selectors.js +27 -27
  26. package/lib/internal/template/attribute-editor/styles.css.js +15 -15
  27. package/lib/internal/template/attribute-editor/styles.scoped.css +28 -28
  28. package/lib/internal/template/attribute-editor/styles.selectors.js +15 -15
  29. package/lib/internal/template/breadcrumb-group/item/styles.css.js +7 -7
  30. package/lib/internal/template/breadcrumb-group/item/styles.scoped.css +28 -28
  31. package/lib/internal/template/breadcrumb-group/item/styles.selectors.js +7 -7
  32. package/lib/internal/template/button/styles.css.js +22 -22
  33. package/lib/internal/template/button/styles.scoped.css +256 -256
  34. package/lib/internal/template/button/styles.selectors.js +22 -22
  35. package/lib/internal/template/button-dropdown/item-element/styles.css.js +20 -20
  36. package/lib/internal/template/button-dropdown/item-element/styles.scoped.css +34 -34
  37. package/lib/internal/template/button-dropdown/item-element/styles.selectors.js +20 -20
  38. package/lib/internal/template/checkbox/styles.css.js +3 -3
  39. package/lib/internal/template/checkbox/styles.scoped.css +11 -11
  40. package/lib/internal/template/checkbox/styles.selectors.js +3 -3
  41. package/lib/internal/template/content-layout/styles.css.js +14 -14
  42. package/lib/internal/template/content-layout/styles.scoped.css +27 -27
  43. package/lib/internal/template/content-layout/styles.selectors.js +14 -14
  44. package/lib/internal/template/flashbar/styles.css.js +50 -50
  45. package/lib/internal/template/flashbar/styles.scoped.css +187 -187
  46. package/lib/internal/template/flashbar/styles.selectors.js +50 -50
  47. package/lib/internal/template/help-panel/styles.css.js +6 -6
  48. package/lib/internal/template/help-panel/styles.scoped.css +73 -73
  49. package/lib/internal/template/help-panel/styles.selectors.js +6 -6
  50. package/lib/internal/template/input/styles.css.js +13 -13
  51. package/lib/internal/template/input/styles.scoped.css +74 -74
  52. package/lib/internal/template/input/styles.selectors.js +13 -13
  53. package/lib/internal/template/internal/base-component/styles.scoped.css +1 -1
  54. package/lib/internal/template/internal/components/drag-handle-wrapper/styles.css.js +30 -30
  55. package/lib/internal/template/internal/components/drag-handle-wrapper/styles.scoped.css +58 -58
  56. package/lib/internal/template/internal/components/drag-handle-wrapper/styles.selectors.js +30 -30
  57. package/lib/internal/template/internal/components/dropdown/styles.css.js +20 -20
  58. package/lib/internal/template/internal/components/dropdown/styles.scoped.css +38 -38
  59. package/lib/internal/template/internal/components/dropdown/styles.selectors.js +20 -20
  60. package/lib/internal/template/internal/components/radio-button/styles.css.js +7 -7
  61. package/lib/internal/template/internal/components/radio-button/styles.scoped.css +18 -18
  62. package/lib/internal/template/internal/components/radio-button/styles.selectors.js +7 -7
  63. package/lib/internal/template/internal/components/token-list/styles.css.js +10 -10
  64. package/lib/internal/template/internal/components/token-list/styles.scoped.css +25 -25
  65. package/lib/internal/template/internal/components/token-list/styles.selectors.js +10 -10
  66. package/lib/internal/template/internal/environment.js +2 -2
  67. package/lib/internal/template/internal/environment.json +2 -2
  68. package/lib/internal/template/internal/generated/custom-css-properties/index.d.ts +7 -0
  69. package/lib/internal/template/internal/generated/custom-css-properties/index.d.ts.map +1 -1
  70. package/lib/internal/template/internal/generated/custom-css-properties/index.js +138 -131
  71. package/lib/internal/template/internal/generated/custom-css-properties/index.js.map +1 -1
  72. package/lib/internal/template/link/styles.css.js +20 -20
  73. package/lib/internal/template/link/styles.scoped.css +103 -103
  74. package/lib/internal/template/link/styles.selectors.js +20 -20
  75. package/lib/internal/template/progress-bar/styles.css.js +19 -19
  76. package/lib/internal/template/progress-bar/styles.scoped.css +56 -56
  77. package/lib/internal/template/progress-bar/styles.selectors.js +19 -19
  78. package/lib/internal/template/prompt-input/styles.css.js +17 -17
  79. package/lib/internal/template/prompt-input/styles.scoped.css +79 -79
  80. package/lib/internal/template/prompt-input/styles.selectors.js +17 -17
  81. package/lib/internal/template/segmented-control/styles.css.js +16 -16
  82. package/lib/internal/template/segmented-control/styles.scoped.css +46 -46
  83. package/lib/internal/template/segmented-control/styles.selectors.js +16 -16
  84. package/lib/internal/template/slider/index.d.ts +1 -1
  85. package/lib/internal/template/slider/index.d.ts.map +1 -1
  86. package/lib/internal/template/slider/index.js +2 -2
  87. package/lib/internal/template/slider/index.js.map +1 -1
  88. package/lib/internal/template/slider/interfaces.d.ts +23 -0
  89. package/lib/internal/template/slider/interfaces.d.ts.map +1 -1
  90. package/lib/internal/template/slider/interfaces.js.map +1 -1
  91. package/lib/internal/template/slider/internal.d.ts +2 -1
  92. package/lib/internal/template/slider/internal.d.ts.map +1 -1
  93. package/lib/internal/template/slider/internal.js +3 -2
  94. package/lib/internal/template/slider/internal.js.map +1 -1
  95. package/lib/internal/template/slider/styles.css.js +26 -26
  96. package/lib/internal/template/slider/styles.d.ts +12 -0
  97. package/lib/internal/template/slider/styles.d.ts.map +1 -0
  98. package/lib/internal/template/slider/styles.js +20 -0
  99. package/lib/internal/template/slider/styles.js.map +1 -0
  100. package/lib/internal/template/slider/styles.scoped.css +165 -163
  101. package/lib/internal/template/slider/styles.selectors.js +26 -26
  102. package/lib/internal/template/spinner/styles.css.js +13 -13
  103. package/lib/internal/template/spinner/styles.scoped.css +39 -39
  104. package/lib/internal/template/spinner/styles.selectors.js +13 -13
  105. package/lib/internal/template/tabs/styles.css.js +30 -30
  106. package/lib/internal/template/tabs/styles.scoped.css +76 -76
  107. package/lib/internal/template/tabs/styles.selectors.js +30 -30
  108. package/lib/internal/template/tag-editor/styles.css.js +3 -3
  109. package/lib/internal/template/tag-editor/styles.scoped.css +13 -13
  110. package/lib/internal/template/tag-editor/styles.selectors.js +3 -3
  111. package/lib/internal/template/text-content/styles.css.js +1 -1
  112. package/lib/internal/template/text-content/styles.scoped.css +66 -66
  113. package/lib/internal/template/text-content/styles.selectors.js +1 -1
  114. package/lib/internal/template/textarea/styles.css.js +5 -5
  115. package/lib/internal/template/textarea/styles.scoped.css +45 -45
  116. package/lib/internal/template/textarea/styles.selectors.js +5 -5
  117. package/lib/internal/template/toggle/styles.css.js +10 -10
  118. package/lib/internal/template/toggle/styles.scoped.css +23 -23
  119. package/lib/internal/template/toggle/styles.selectors.js +10 -10
  120. package/package.json +1 -1
package/lib/internal/manifest.json CHANGED
@@ -1,3 +1,3 @@
1
1
  {
2
- "commit": "e4cf4d537db86af0e2e6cc0f00819352275d8a43"
2
+ "commit": "15e15bbcd56ea57ec78430a3713b125deeeaf63a"
3
3
  }
package/lib/internal/scss/internal/generated/custom-css-properties/index.scss CHANGED
@@ -1,136 +1,143 @@
1
1
 
2
2
  // Build environment
3
- $awsui-commit-hash: "e4cf4d53";
3
+ $awsui-commit-hash: "15e15bbc";
4
4
  // Manually managed CSS-variables
5
- $maxContentWidth: --awsui-max-content-width-rhu47t;
6
- $minContentWidth: --awsui-min-content-width-rhu47t;
7
- $breadcrumbsGap: --awsui-breadcrumbs-gap-rhu47t;
8
- $contentGapLeft: --awsui-content-gap-left-rhu47t;
9
- $contentGapRight: --awsui-content-gap-right-rhu47t;
10
- $contentHeight: --awsui-content-height-rhu47t;
11
- $contentLayoutDefaultHorizontalPadding: --awsui-content-layout-default-horizontal-padding-rhu47t;
12
- $contentLayoutMaxContentWidth: --awsui-content-layout-max-content-width-rhu47t;
13
- $contentLayoutMainGap: --awsui-content-layout-main-gap-rhu47t;
14
- $defaultMaxContentWidth: --awsui-default-max-content-width-rhu47t;
15
- $defaultMinContentWidth: --awsui-default-min-content-width-rhu47t;
16
- $drawerSize: --awsui-drawer-size-rhu47t;
17
- $drawerMinSize: --awsui-drawer-min-size-rhu47t;
18
- $bottomDrawerSize: --awsui-bottom-drawer-size-rhu47t;
19
- $footerHeight: --awsui-footer-height-rhu47t;
20
- $headerGap: --awsui-header-gap-rhu47t;
21
- $headerHeight: --awsui-header-height-rhu47t;
22
- $layoutWidth: --awsui-layout-width-rhu47t;
23
- $mainGap: --awsui-main-gap-rhu47t;
24
- $mainOffsetLeft: --awsui-main-offset-left-rhu47t;
25
- $mainTemplateRows: --awsui-main-template-rows-rhu47t;
26
- $mobileBarHeight: --awsui-mobile-bar-height-rhu47t;
27
- $notificationsHeight: --awsui-notifications-height-rhu47t;
28
- $offsetTop: --awsui-offset-top-rhu47t;
29
- $overlapHeight: --awsui-overlap-height-rhu47t;
30
- $navigationWidth: --awsui-navigation-width-rhu47t;
31
- $splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-rhu47t;
32
- $splitPanelReportedSize: --awsui-split-panel-reported-size-rhu47t;
33
- $splitPanelHeight: --awsui-split-panel-height-rhu47t;
34
- $splitPanelMinWidth: --awsui-split-panel-min-width-rhu47t;
35
- $splitPanelMaxWidth: --awsui-split-panel-max-width-rhu47t;
36
- $toolsMaxWidth: --awsui-tools-max-width-rhu47t;
37
- $toolsWidth: --awsui-tools-width-rhu47t;
38
- $toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-rhu47t;
39
- $contentScrollMargin: --awsui-content-scroll-margin-rhu47t;
40
- $flashbarStackDepth: --awsui-flashbar-stack-depth-rhu47t;
41
- $flashbarStackIndex: --awsui-flashbar-stack-index-rhu47t;
42
- $flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-rhu47t;
43
- $stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-rhu47t;
44
- $stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-rhu47t;
45
- $dropdownDefaultMaxWidth: --awsui-dropdown-default-max-width-rhu47t;
46
- $spinnerRotatorFrom: --awsui-spinner-rotator-from-rhu47t;
47
- $spinnerRotatorTo: --awsui-spinner-rotator-to-rhu47t;
48
- $spinnerLineLeftFrom: --awsui-spinner-line-left-from-rhu47t;
49
- $spinnerLineLeftTo: --awsui-spinner-line-left-to-rhu47t;
50
- $spinnerLineRightFrom: --awsui-spinner-line-right-from-rhu47t;
51
- $spinnerLineRightTo: --awsui-spinner-line-right-to-rhu47t;
52
- $sliderLabelCount: --awsui-slider-label-count-rhu47t;
53
- $sliderTickCount: --awsui-slider-tick-count-rhu47t;
54
- $sliderReferenceColumn: --awsui-slider-reference-column-rhu47t;
55
- $sliderNextReferenceColumn: --awsui-slider-next-reference-column-rhu47t;
56
- $sliderMaxStart: --awsui-slider-max-start-rhu47t;
57
- $sliderMinEnd: --awsui-slider-min-end-rhu47t;
58
- $sliderRangeInlineSize: --awsui-slider-range-inline-size-rhu47t;
59
- $sliderTooltipPosition: --awsui-slider-tooltip-position-rhu47t;
60
- $togglesLeftWidth: --awsui-toggles-left-width-rhu47t;
61
- $togglesRightWidth: --awsui-toggles-right-width-rhu47t;
62
- $promptInputMaxRows: --awsui-prompt-input-max-rows-rhu47t;
63
- $promptInputScrollHeight: --awsui-prompt-input-scroll-height-rhu47t;
64
- $dragHandleAnimationInlineOffset: --awsui-drag-handle-animation-inline-offset-rhu47t;
65
- $dragHandleAnimationBlockOffset: --awsui-drag-handle-animation-block-offset-rhu47t;
66
- $styleBackgroundActive: --awsui-style-background-active-rhu47t;
67
- $styleBackgroundDefault: --awsui-style-background-default-rhu47t;
68
- $styleBackgroundDisabled: --awsui-style-background-disabled-rhu47t;
69
- $styleBackgroundHover: --awsui-style-background-hover-rhu47t;
70
- $styleBorderColorActive: --awsui-style-border-color-active-rhu47t;
71
- $styleBorderColorDefault: --awsui-style-border-color-default-rhu47t;
72
- $styleBorderColorDisabled: --awsui-style-border-color-disabled-rhu47t;
73
- $styleBorderColorHover: --awsui-style-border-color-hover-rhu47t;
74
- $styleColorActive: --awsui-style-color-active-rhu47t;
75
- $styleColorDefault: --awsui-style-color-default-rhu47t;
76
- $styleColorDisabled: --awsui-style-color-disabled-rhu47t;
77
- $styleColorHover: --awsui-style-color-hover-rhu47t;
78
- $styleFocusRingBorderColor: --awsui-style-focus-ring-border-color-rhu47t;
79
- $styleFocusRingBorderRadius: --awsui-style-focus-ring-border-radius-rhu47t;
80
- $styleFocusRingBorderWidth: --awsui-style-focus-ring-border-width-rhu47t;
81
- $styleFocusRingBoxShadow: --awsui-style-focus-ring-box-shadow-rhu47t;
82
- $styleBoxShadowActive: --awsui-style-box-shadow-active-rhu47t;
83
- $styleBoxShadowDefault: --awsui-style-box-shadow-default-rhu47t;
84
- $styleBoxShadowDisabled: --awsui-style-box-shadow-disabled-rhu47t;
85
- $styleBoxShadowHover: --awsui-style-box-shadow-hover-rhu47t;
86
- $styleBackgroundReadonly: --awsui-style-background-readonly-rhu47t;
87
- $styleBorderColorReadonly: --awsui-style-border-color-readonly-rhu47t;
88
- $styleBoxShadowReadonly: --awsui-style-box-shadow-readonly-rhu47t;
89
- $styleColorReadonly: --awsui-style-color-readonly-rhu47t;
90
- $styleBackgroundFocus: --awsui-style-background-focus-rhu47t;
91
- $styleBorderColorFocus: --awsui-style-border-color-focus-rhu47t;
92
- $styleBoxShadowFocus: --awsui-style-box-shadow-focus-rhu47t;
93
- $styleColorFocus: --awsui-style-color-focus-rhu47t;
94
- $stylePlaceholderColor: --awsui-style-placeholder-color-rhu47t;
95
- $stylePlaceholderFontSize: --awsui-style-placeholder-font-size-rhu47t;
96
- $stylePlaceholderFontStyle: --awsui-style-placeholder-font-style-rhu47t;
97
- $stylePlaceholderFontWeight: --awsui-style-placeholder-font-weight-rhu47t;
98
- $styleTabsActiveIndicatorColor: --awsui-style-tabs-active-indicator-color-rhu47t;
99
- $styleTabsActiveIndicatorWidth: --awsui-style-tabs-active-indicator-width-rhu47t;
100
- $styleTabsActiveIndicatorBorderRadius: --awsui-style-tabs-active-indicator-border-radius-rhu47t;
101
- $styleTabsSeparatorColor: --awsui-style-tabs-separator-color-rhu47t;
102
- $styleTabsSeparatorWidth: --awsui-style-tabs-separator-width-rhu47t;
103
- $alertFocusRingBorderColor: --awsui-alert-focus-ring-border-color-rhu47t;
104
- $alertFocusRingBorderRadius: --awsui-alert-focus-ring-border-radius-rhu47t;
105
- $alertFocusRingBorderWidth: --awsui-alert-focus-ring-border-width-rhu47t;
106
- $alertFocusRingBoxShadow: --awsui-alert-focus-ring-box-shadow-rhu47t;
107
- $alertIconColor: --awsui-alert-icon-color-rhu47t;
108
- $promptInputStyleBackgroundDefault: --awsui-prompt-input-style-background-default-rhu47t;
109
- $promptInputStyleBackgroundDisabled: --awsui-prompt-input-style-background-disabled-rhu47t;
110
- $promptInputStyleBackgroundFocus: --awsui-prompt-input-style-background-focus-rhu47t;
111
- $promptInputStyleBackgroundHover: --awsui-prompt-input-style-background-hover-rhu47t;
112
- $promptInputStyleBackgroundReadonly: --awsui-prompt-input-style-background-readonly-rhu47t;
113
- $promptInputStyleBorderColorDefault: --awsui-prompt-input-style-border-color-default-rhu47t;
114
- $promptInputStyleBorderColorDisabled: --awsui-prompt-input-style-border-color-disabled-rhu47t;
115
- $promptInputStyleBorderColorFocus: --awsui-prompt-input-style-border-color-focus-rhu47t;
116
- $promptInputStyleBorderColorHover: --awsui-prompt-input-style-border-color-hover-rhu47t;
117
- $promptInputStyleBorderColorReadonly: --awsui-prompt-input-style-border-color-readonly-rhu47t;
118
- $promptInputStyleBoxShadowDefault: --awsui-prompt-input-style-box-shadow-default-rhu47t;
119
- $promptInputStyleBoxShadowDisabled: --awsui-prompt-input-style-box-shadow-disabled-rhu47t;
120
- $promptInputStyleBoxShadowFocus: --awsui-prompt-input-style-box-shadow-focus-rhu47t;
121
- $promptInputStyleBoxShadowHover: --awsui-prompt-input-style-box-shadow-hover-rhu47t;
122
- $promptInputStyleBoxShadowReadonly: --awsui-prompt-input-style-box-shadow-readonly-rhu47t;
123
- $promptInputStyleColorDefault: --awsui-prompt-input-style-color-default-rhu47t;
124
- $promptInputStyleColorDisabled: --awsui-prompt-input-style-color-disabled-rhu47t;
125
- $promptInputStyleColorFocus: --awsui-prompt-input-style-color-focus-rhu47t;
126
- $promptInputStyleColorHover: --awsui-prompt-input-style-color-hover-rhu47t;
127
- $promptInputStyleColorReadonly: --awsui-prompt-input-style-color-readonly-rhu47t;
128
- $promptInputStylePlaceholderColor: --awsui-prompt-input-style-placeholder-color-rhu47t;
129
- $promptInputStylePlaceholderFontSize: --awsui-prompt-input-style-placeholder-font-size-rhu47t;
130
- $promptInputStylePlaceholderFontStyle: --awsui-prompt-input-style-placeholder-font-style-rhu47t;
131
- $promptInputStylePlaceholderFontWeight: --awsui-prompt-input-style-placeholder-font-weight-rhu47t;
132
- $progressBarBackgroundColor: --awsui-progress-bar-background-color-rhu47t;
133
- $progressBarBorderRadius: --awsui-progress-bar-border-radius-rhu47t;
134
- $progressBarHeight: --awsui-progress-bar-height-rhu47t;
135
- $progressValueBackgroundColor: --awsui-progress-value-background-color-rhu47t;
5
+ $maxContentWidth: --awsui-max-content-width-4hh3rt;
6
+ $minContentWidth: --awsui-min-content-width-4hh3rt;
7
+ $breadcrumbsGap: --awsui-breadcrumbs-gap-4hh3rt;
8
+ $contentGapLeft: --awsui-content-gap-left-4hh3rt;
9
+ $contentGapRight: --awsui-content-gap-right-4hh3rt;
10
+ $contentHeight: --awsui-content-height-4hh3rt;
11
+ $contentLayoutDefaultHorizontalPadding: --awsui-content-layout-default-horizontal-padding-4hh3rt;
12
+ $contentLayoutMaxContentWidth: --awsui-content-layout-max-content-width-4hh3rt;
13
+ $contentLayoutMainGap: --awsui-content-layout-main-gap-4hh3rt;
14
+ $defaultMaxContentWidth: --awsui-default-max-content-width-4hh3rt;
15
+ $defaultMinContentWidth: --awsui-default-min-content-width-4hh3rt;
16
+ $drawerSize: --awsui-drawer-size-4hh3rt;
17
+ $drawerMinSize: --awsui-drawer-min-size-4hh3rt;
18
+ $bottomDrawerSize: --awsui-bottom-drawer-size-4hh3rt;
19
+ $footerHeight: --awsui-footer-height-4hh3rt;
20
+ $headerGap: --awsui-header-gap-4hh3rt;
21
+ $headerHeight: --awsui-header-height-4hh3rt;
22
+ $layoutWidth: --awsui-layout-width-4hh3rt;
23
+ $mainGap: --awsui-main-gap-4hh3rt;
24
+ $mainOffsetLeft: --awsui-main-offset-left-4hh3rt;
25
+ $mainTemplateRows: --awsui-main-template-rows-4hh3rt;
26
+ $mobileBarHeight: --awsui-mobile-bar-height-4hh3rt;
27
+ $notificationsHeight: --awsui-notifications-height-4hh3rt;
28
+ $offsetTop: --awsui-offset-top-4hh3rt;
29
+ $overlapHeight: --awsui-overlap-height-4hh3rt;
30
+ $navigationWidth: --awsui-navigation-width-4hh3rt;
31
+ $splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-4hh3rt;
32
+ $splitPanelReportedSize: --awsui-split-panel-reported-size-4hh3rt;
33
+ $splitPanelHeight: --awsui-split-panel-height-4hh3rt;
34
+ $splitPanelMinWidth: --awsui-split-panel-min-width-4hh3rt;
35
+ $splitPanelMaxWidth: --awsui-split-panel-max-width-4hh3rt;
36
+ $toolsMaxWidth: --awsui-tools-max-width-4hh3rt;
37
+ $toolsWidth: --awsui-tools-width-4hh3rt;
38
+ $toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-4hh3rt;
39
+ $contentScrollMargin: --awsui-content-scroll-margin-4hh3rt;
40
+ $flashbarStackDepth: --awsui-flashbar-stack-depth-4hh3rt;
41
+ $flashbarStackIndex: --awsui-flashbar-stack-index-4hh3rt;
42
+ $flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-4hh3rt;
43
+ $stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-4hh3rt;
44
+ $stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-4hh3rt;
45
+ $dropdownDefaultMaxWidth: --awsui-dropdown-default-max-width-4hh3rt;
46
+ $spinnerRotatorFrom: --awsui-spinner-rotator-from-4hh3rt;
47
+ $spinnerRotatorTo: --awsui-spinner-rotator-to-4hh3rt;
48
+ $spinnerLineLeftFrom: --awsui-spinner-line-left-from-4hh3rt;
49
+ $spinnerLineLeftTo: --awsui-spinner-line-left-to-4hh3rt;
50
+ $spinnerLineRightFrom: --awsui-spinner-line-right-from-4hh3rt;
51
+ $spinnerLineRightTo: --awsui-spinner-line-right-to-4hh3rt;
52
+ $sliderLabelCount: --awsui-slider-label-count-4hh3rt;
53
+ $sliderTickCount: --awsui-slider-tick-count-4hh3rt;
54
+ $sliderReferenceColumn: --awsui-slider-reference-column-4hh3rt;
55
+ $sliderNextReferenceColumn: --awsui-slider-next-reference-column-4hh3rt;
56
+ $sliderMaxStart: --awsui-slider-max-start-4hh3rt;
57
+ $sliderMinEnd: --awsui-slider-min-end-4hh3rt;
58
+ $sliderRangeInlineSize: --awsui-slider-range-inline-size-4hh3rt;
59
+ $sliderTooltipPosition: --awsui-slider-tooltip-position-4hh3rt;
60
+ $togglesLeftWidth: --awsui-toggles-left-width-4hh3rt;
61
+ $togglesRightWidth: --awsui-toggles-right-width-4hh3rt;
62
+ $promptInputMaxRows: --awsui-prompt-input-max-rows-4hh3rt;
63
+ $promptInputScrollHeight: --awsui-prompt-input-scroll-height-4hh3rt;
64
+ $dragHandleAnimationInlineOffset: --awsui-drag-handle-animation-inline-offset-4hh3rt;
65
+ $dragHandleAnimationBlockOffset: --awsui-drag-handle-animation-block-offset-4hh3rt;
66
+ $styleBackgroundActive: --awsui-style-background-active-4hh3rt;
67
+ $styleBackgroundDefault: --awsui-style-background-default-4hh3rt;
68
+ $styleBackgroundDisabled: --awsui-style-background-disabled-4hh3rt;
69
+ $styleBackgroundHover: --awsui-style-background-hover-4hh3rt;
70
+ $styleBorderColorActive: --awsui-style-border-color-active-4hh3rt;
71
+ $styleBorderColorDefault: --awsui-style-border-color-default-4hh3rt;
72
+ $styleBorderColorDisabled: --awsui-style-border-color-disabled-4hh3rt;
73
+ $styleBorderColorHover: --awsui-style-border-color-hover-4hh3rt;
74
+ $styleColorActive: --awsui-style-color-active-4hh3rt;
75
+ $styleColorDefault: --awsui-style-color-default-4hh3rt;
76
+ $styleColorDisabled: --awsui-style-color-disabled-4hh3rt;
77
+ $styleColorHover: --awsui-style-color-hover-4hh3rt;
78
+ $styleFocusRingBorderColor: --awsui-style-focus-ring-border-color-4hh3rt;
79
+ $styleFocusRingBorderRadius: --awsui-style-focus-ring-border-radius-4hh3rt;
80
+ $styleFocusRingBorderWidth: --awsui-style-focus-ring-border-width-4hh3rt;
81
+ $styleFocusRingBoxShadow: --awsui-style-focus-ring-box-shadow-4hh3rt;
82
+ $styleBoxShadowActive: --awsui-style-box-shadow-active-4hh3rt;
83
+ $styleBoxShadowDefault: --awsui-style-box-shadow-default-4hh3rt;
84
+ $styleBoxShadowDisabled: --awsui-style-box-shadow-disabled-4hh3rt;
85
+ $styleBoxShadowHover: --awsui-style-box-shadow-hover-4hh3rt;
86
+ $styleBackgroundReadonly: --awsui-style-background-readonly-4hh3rt;
87
+ $styleBorderColorReadonly: --awsui-style-border-color-readonly-4hh3rt;
88
+ $styleBoxShadowReadonly: --awsui-style-box-shadow-readonly-4hh3rt;
89
+ $styleColorReadonly: --awsui-style-color-readonly-4hh3rt;
90
+ $styleBackgroundFocus: --awsui-style-background-focus-4hh3rt;
91
+ $styleBorderColorFocus: --awsui-style-border-color-focus-4hh3rt;
92
+ $styleBoxShadowFocus: --awsui-style-box-shadow-focus-4hh3rt;
93
+ $styleColorFocus: --awsui-style-color-focus-4hh3rt;
94
+ $stylePlaceholderColor: --awsui-style-placeholder-color-4hh3rt;
95
+ $stylePlaceholderFontSize: --awsui-style-placeholder-font-size-4hh3rt;
96
+ $stylePlaceholderFontStyle: --awsui-style-placeholder-font-style-4hh3rt;
97
+ $stylePlaceholderFontWeight: --awsui-style-placeholder-font-weight-4hh3rt;
98
+ $styleTabsActiveIndicatorColor: --awsui-style-tabs-active-indicator-color-4hh3rt;
99
+ $styleTabsActiveIndicatorWidth: --awsui-style-tabs-active-indicator-width-4hh3rt;
100
+ $styleTabsActiveIndicatorBorderRadius: --awsui-style-tabs-active-indicator-border-radius-4hh3rt;
101
+ $styleTabsSeparatorColor: --awsui-style-tabs-separator-color-4hh3rt;
102
+ $styleTabsSeparatorWidth: --awsui-style-tabs-separator-width-4hh3rt;
103
+ $alertFocusRingBorderColor: --awsui-alert-focus-ring-border-color-4hh3rt;
104
+ $alertFocusRingBorderRadius: --awsui-alert-focus-ring-border-radius-4hh3rt;
105
+ $alertFocusRingBorderWidth: --awsui-alert-focus-ring-border-width-4hh3rt;
106
+ $alertFocusRingBoxShadow: --awsui-alert-focus-ring-box-shadow-4hh3rt;
107
+ $alertIconColor: --awsui-alert-icon-color-4hh3rt;
108
+ $promptInputStyleBackgroundDefault: --awsui-prompt-input-style-background-default-4hh3rt;
109
+ $promptInputStyleBackgroundDisabled: --awsui-prompt-input-style-background-disabled-4hh3rt;
110
+ $promptInputStyleBackgroundFocus: --awsui-prompt-input-style-background-focus-4hh3rt;
111
+ $promptInputStyleBackgroundHover: --awsui-prompt-input-style-background-hover-4hh3rt;
112
+ $promptInputStyleBackgroundReadonly: --awsui-prompt-input-style-background-readonly-4hh3rt;
113
+ $promptInputStyleBorderColorDefault: --awsui-prompt-input-style-border-color-default-4hh3rt;
114
+ $promptInputStyleBorderColorDisabled: --awsui-prompt-input-style-border-color-disabled-4hh3rt;
115
+ $promptInputStyleBorderColorFocus: --awsui-prompt-input-style-border-color-focus-4hh3rt;
116
+ $promptInputStyleBorderColorHover: --awsui-prompt-input-style-border-color-hover-4hh3rt;
117
+ $promptInputStyleBorderColorReadonly: --awsui-prompt-input-style-border-color-readonly-4hh3rt;
118
+ $promptInputStyleBoxShadowDefault: --awsui-prompt-input-style-box-shadow-default-4hh3rt;
119
+ $promptInputStyleBoxShadowDisabled: --awsui-prompt-input-style-box-shadow-disabled-4hh3rt;
120
+ $promptInputStyleBoxShadowFocus: --awsui-prompt-input-style-box-shadow-focus-4hh3rt;
121
+ $promptInputStyleBoxShadowHover: --awsui-prompt-input-style-box-shadow-hover-4hh3rt;
122
+ $promptInputStyleBoxShadowReadonly: --awsui-prompt-input-style-box-shadow-readonly-4hh3rt;
123
+ $promptInputStyleColorDefault: --awsui-prompt-input-style-color-default-4hh3rt;
124
+ $promptInputStyleColorDisabled: --awsui-prompt-input-style-color-disabled-4hh3rt;
125
+ $promptInputStyleColorFocus: --awsui-prompt-input-style-color-focus-4hh3rt;
126
+ $promptInputStyleColorHover: --awsui-prompt-input-style-color-hover-4hh3rt;
127
+ $promptInputStyleColorReadonly: --awsui-prompt-input-style-color-readonly-4hh3rt;
128
+ $promptInputStylePlaceholderColor: --awsui-prompt-input-style-placeholder-color-4hh3rt;
129
+ $promptInputStylePlaceholderFontSize: --awsui-prompt-input-style-placeholder-font-size-4hh3rt;
130
+ $promptInputStylePlaceholderFontStyle: --awsui-prompt-input-style-placeholder-font-style-4hh3rt;
131
+ $promptInputStylePlaceholderFontWeight: --awsui-prompt-input-style-placeholder-font-weight-4hh3rt;
132
+ $progressBarBackgroundColor: --awsui-progress-bar-background-color-4hh3rt;
133
+ $progressBarBorderRadius: --awsui-progress-bar-border-radius-4hh3rt;
134
+ $progressBarHeight: --awsui-progress-bar-height-4hh3rt;
135
+ $progressValueBackgroundColor: --awsui-progress-value-background-color-4hh3rt;
136
+ $styleSliderTrackBackgroundColor: --awsui-style-slider-track-background-color-4hh3rt;
137
+ $styleSliderRangeBackgroundDefault: --awsui-style-slider-range-background-default-4hh3rt;
138
+ $styleSliderRangeBackgroundActive: --awsui-style-slider-range-background-active-4hh3rt;
139
+ $styleSliderHandleBackgroundDefault: --awsui-style-slider-handle-background-default-4hh3rt;
140
+ $styleSliderHandleBackgroundHover: --awsui-style-slider-handle-background-hover-4hh3rt;
141
+ $styleSliderHandleBackgroundActive: --awsui-style-slider-handle-background-active-4hh3rt;
142
+ $styleSliderHandleBorderRadius: --awsui-style-slider-handle-border-radius-4hh3rt;
136
143
 
package/lib/internal/scss/slider/mixins.scss CHANGED
@@ -4,6 +4,7 @@
4
4
  */
5
5
  @use '../internal/styles' as styles;
6
6
  @use '../internal/styles/tokens' as awsui;
7
+ @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
7
8
 
8
9
  $thumb-size: awsui.$space-m;
9
10
  $thumb-readonly-size: awsui.$space-s;
@@ -11,14 +12,14 @@ $border-radius-slider-thumb: 50%;
11
12
 
12
13
  @mixin base-thumb-styles {
13
14
  appearance: none;
14
- background: awsui.$color-background-slider-handle-default;
15
- border-color: awsui.$color-background-slider-handle-default;
15
+ background: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-default);
16
+ border-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-slider-handle-default);
16
17
  border-block-width: 2px;
17
18
  border-inline-width: 2px;
18
- border-start-start-radius: $border-radius-slider-thumb;
19
- border-start-end-radius: $border-radius-slider-thumb;
20
- border-end-start-radius: $border-radius-slider-thumb;
21
- border-end-end-radius: $border-radius-slider-thumb;
19
+ border-start-start-radius: var(#{custom-props.$styleSliderHandleBorderRadius}, $border-radius-slider-thumb);
20
+ border-start-end-radius: var(#{custom-props.$styleSliderHandleBorderRadius}, $border-radius-slider-thumb);
21
+ border-end-start-radius: var(#{custom-props.$styleSliderHandleBorderRadius}, $border-radius-slider-thumb);
22
+ border-end-end-radius: var(#{custom-props.$styleSliderHandleBorderRadius}, $border-radius-slider-thumb);
22
23
  box-shadow: none;
23
24
 
24
25
  cursor: pointer;
@@ -29,9 +30,10 @@ $border-radius-slider-thumb: 50%;
29
30
  }
30
31
 
31
32
  @mixin base-thumb-hover-styles {
33
+ background: var(#{custom-props.$styleSliderHandleBackgroundHover}, awsui.$color-background-slider-handle-default);
32
34
  box-shadow:
33
35
  0px 0 0 2px awsui.$color-background-slider-handle-ring,
34
- 0 0 0 4px awsui.$color-background-slider-handle-default;
36
+ 0 0 0 4px var(#{custom-props.$styleSliderHandleBackgroundHover}, awsui.$color-background-slider-handle-default);
35
37
  }
36
38
 
37
39
  @mixin base-thumb-focus-styles {
@@ -39,10 +41,10 @@ $border-radius-slider-thumb: 50%;
39
41
  inline-size: 20px;
40
42
  box-shadow:
41
43
  0px 0 0 2px awsui.$color-background-slider-handle-ring,
42
- 0 0 0 4px awsui.$color-background-slider-handle-active;
43
- background: awsui.$color-background-slider-handle-active;
44
+ 0 0 0 4px var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-active);
45
+ background: var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-active);
44
46
 
45
- border-color: awsui.$color-background-slider-handle-active;
47
+ border-color: var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-handle-active);
46
48
  border-block-width: 2px;
47
49
  border-inline-width: 2px;
48
50
  }
@@ -63,8 +65,8 @@ $border-radius-slider-thumb: 50%;
63
65
  @mixin base-thumb-disabled-styles {
64
66
  block-size: $thumb-size;
65
67
  inline-size: $thumb-size;
66
- background-color: awsui.$color-background-control-disabled;
67
- border-color: awsui.$color-background-control-disabled;
68
+ background-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-control-disabled);
69
+ border-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-background-control-disabled);
68
70
  box-shadow: none;
69
71
  pointer-events: none;
70
72
  }
@@ -72,44 +74,50 @@ $border-radius-slider-thumb: 50%;
72
74
  @mixin base-thumb-readonly-styles {
73
75
  block-size: $thumb-readonly-size;
74
76
  inline-size: $thumb-readonly-size;
75
- background-color: awsui.$color-foreground-control-read-only;
76
- border-color: awsui.$color-foreground-control-read-only;
77
+ background-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-foreground-control-read-only);
78
+ border-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-foreground-control-read-only);
77
79
  box-shadow: none;
78
80
  pointer-events: none;
79
81
  }
80
82
 
81
83
  @mixin error-thumb-focus-styles {
82
- background-color: awsui.$color-background-slider-error-pressed;
84
+ background-color: var(
85
+ #{custom-props.$styleSliderHandleBackgroundActive},
86
+ awsui.$color-background-slider-error-pressed
87
+ );
83
88
  border-block-width: 2px;
84
89
  border-inline-width: 2px;
85
- border-color: awsui.$color-background-slider-error-pressed;
90
+ border-color: var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-error-pressed);
86
91
 
87
92
  box-shadow:
88
93
  0px 0 0 2px awsui.$color-background-slider-handle-ring,
89
- 0 0 0 4px awsui.$color-background-slider-error-pressed;
94
+ 0 0 0 4px var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-error-pressed);
90
95
  }
91
96
 
92
97
  @mixin warning-thumb-focus-styles {
93
- background-color: awsui.$color-background-slider-warning-pressed;
98
+ background-color: var(
99
+ #{custom-props.$styleSliderHandleBackgroundActive},
100
+ awsui.$color-background-slider-warning-pressed
101
+ );
94
102
  border-block-width: 2px;
95
103
  border-inline-width: 2px;
96
- border-color: awsui.$color-background-slider-warning-pressed;
104
+ border-color: var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-warning-pressed);
97
105
 
98
106
  box-shadow:
99
107
  0px 0 0 2px awsui.$color-background-slider-handle-ring,
100
- 0 0 0 4px awsui.$color-background-slider-warning-pressed;
108
+ 0 0 0 4px var(#{custom-props.$styleSliderHandleBackgroundActive}, awsui.$color-background-slider-warning-pressed);
101
109
  }
102
110
 
103
111
  @mixin error-thumb-hover-styles {
104
- background-color: awsui.$color-text-status-error;
112
+ background-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-text-status-error);
105
113
  box-shadow:
106
114
  0px 0 0 2px awsui.$color-background-slider-handle-ring,
107
- 0 0 0 4px awsui.$color-text-status-error;
115
+ 0 0 0 4px var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-text-status-error);
108
116
  }
109
117
 
110
118
  @mixin warning-thumb-hover-styles {
111
- background-color: awsui.$color-text-status-warning;
119
+ background-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-text-status-warning);
112
120
  box-shadow:
113
121
  0px 0 0 2px awsui.$color-background-slider-handle-ring,
114
- 0 0 0 4px awsui.$color-text-status-warning;
122
+ 0 0 0 4px var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-text-status-warning);
115
123
  }
package/lib/internal/scss/slider/styles.scss CHANGED
@@ -34,54 +34,75 @@
34
34
  }
35
35
 
36
36
  &-track {
37
- background-color: awsui.$color-background-slider-track-default;
37
+ background-color: var(
38
+ #{custom-props.$styleSliderTrackBackgroundColor},
39
+ awsui.$color-background-slider-track-default
40
+ );
38
41
  inline-size: calc(100% + mixins.$thumb-size);
39
42
  block-size: 2px;
40
43
  cursor: pointer;
41
44
 
42
45
  &.disabled {
43
46
  cursor: default;
44
- background-color: awsui.$color-background-control-disabled;
47
+ background-color: var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-control-disabled);
45
48
  }
46
49
 
47
50
  &.readonly:not(&.disabled) {
48
51
  cursor: default;
49
- background-color: awsui.$color-background-control-disabled;
52
+ background-color: var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-control-disabled);
50
53
  }
51
54
  }
52
55
 
53
56
  &-range {
54
- background-color: awsui.$color-background-slider-range-default;
57
+ background-color: var(
58
+ #{custom-props.$styleSliderRangeBackgroundDefault},
59
+ awsui.$color-background-slider-range-default
60
+ );
55
61
  block-size: 4px;
56
62
  inline-size: calc(var(#{custom-props.$sliderRangeInlineSize}) + mixins.$thumb-size);
57
63
 
58
64
  &.error {
59
- background-color: awsui.$color-text-status-error;
65
+ background-color: var(#{custom-props.$styleSliderRangeBackgroundDefault}, awsui.$color-text-status-error);
60
66
  }
61
67
 
62
68
  &.warning {
63
- background-color: awsui.$color-text-status-warning;
69
+ background-color: var(#{custom-props.$styleSliderRangeBackgroundDefault}, awsui.$color-text-status-warning);
64
70
  }
65
71
 
66
72
  &.active {
67
- background-color: awsui.$color-background-slider-range-active;
73
+ background-color: var(
74
+ #{custom-props.$styleSliderRangeBackgroundActive},
75
+ awsui.$color-background-slider-range-active
76
+ );
68
77
  }
69
78
 
70
79
  &.error-active {
71
- background-color: awsui.$color-background-slider-error-pressed;
80
+ background-color: var(
81
+ #{custom-props.$styleSliderRangeBackgroundActive},
82
+ awsui.$color-background-slider-error-pressed
83
+ );
72
84
  }
73
85
 
74
86
  &.warning-active {
75
- background-color: awsui.$color-background-slider-warning-pressed;
87
+ background-color: var(
88
+ #{custom-props.$styleSliderRangeBackgroundActive},
89
+ awsui.$color-background-slider-warning-pressed
90
+ );
76
91
  }
77
92
 
78
93
  &.disabled {
79
- background-color: awsui.$color-background-control-disabled;
94
+ background-color: var(
95
+ #{custom-props.$styleSliderRangeBackgroundDefault},
96
+ awsui.$color-background-control-disabled
97
+ );
80
98
  }
81
99
 
82
100
  &.readonly:not(&.disabled) {
83
101
  inline-size: calc(var(#{custom-props.$sliderRangeInlineSize}) + mixins.$thumb-readonly-size);
84
- background-color: awsui.$color-foreground-control-read-only;
102
+ background-color: var(
103
+ #{custom-props.$styleSliderRangeBackgroundDefault},
104
+ awsui.$color-foreground-control-read-only
105
+ );
85
106
  }
86
107
  }
87
108
  }
@@ -169,7 +190,7 @@
169
190
  inline-size: awsui.$space-xxxs;
170
191
  padding-inline: 0;
171
192
  padding-block: 0;
172
- background: awsui.$color-background-slider-track-default;
193
+ background: var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-slider-track-default);
173
194
  inset-block-start: -4px;
174
195
 
175
196
  &.middle {
@@ -180,39 +201,45 @@
180
201
  }
181
202
 
182
203
  &.filled {
183
- background: awsui.$color-background-slider-range-default;
204
+ background: var(#{custom-props.$styleSliderRangeBackgroundDefault}, awsui.$color-background-slider-range-default);
184
205
 
185
206
  &.readonly:not(.disabled) {
186
- background: awsui.$color-foreground-control-read-only;
207
+ background: var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-foreground-control-read-only);
187
208
  }
188
209
  }
189
210
 
190
211
  &.active {
191
- background: awsui.$color-background-slider-range-active;
212
+ background: var(#{custom-props.$styleSliderRangeBackgroundActive}, awsui.$color-background-slider-range-active);
192
213
  }
193
214
 
194
215
  &.error {
195
- background: awsui.$color-text-status-error;
216
+ background: var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-text-status-error);
196
217
  }
197
218
 
198
219
  &.warning {
199
- background: awsui.$color-text-status-warning;
220
+ background: var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-text-status-warning);
200
221
  }
201
222
 
202
223
  &.error-active {
203
- background-color: awsui.$color-background-slider-error-pressed;
224
+ background-color: var(
225
+ #{custom-props.$styleSliderRangeBackgroundActive},
226
+ awsui.$color-background-slider-error-pressed
227
+ );
204
228
  }
205
229
 
206
230
  &.warning-active {
207
- background-color: awsui.$color-background-slider-warning-pressed;
231
+ background-color: var(
232
+ #{custom-props.$styleSliderRangeBackgroundActive},
233
+ awsui.$color-background-slider-warning-pressed
234
+ );
208
235
  }
209
236
 
210
237
  &.disabled {
211
- background: awsui.$color-background-control-disabled;
238
+ background: var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-control-disabled);
212
239
  }
213
240
 
214
241
  &.readonly {
215
- background: awsui.$color-background-control-disabled;
242
+ background: var(#{custom-props.$styleSliderTrackBackgroundColor}, awsui.$color-background-control-disabled);
216
243
  }
217
244
  }
218
245
 
@@ -303,13 +330,13 @@
303
330
 
304
331
  .error {
305
332
  &::-webkit-slider-thumb {
306
- background-color: awsui.$color-text-status-error;
307
- border-color: awsui.$color-text-status-error;
333
+ background-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-text-status-error);
334
+ border-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-text-status-error);
308
335
  }
309
336
 
310
337
  &::-moz-range-thumb {
311
- background-color: awsui.$color-text-status-error;
312
- border-color: awsui.$color-text-status-error;
338
+ background-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-text-status-error);
339
+ border-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-text-status-error);
313
340
  }
314
341
  &:hover::-webkit-slider-thumb {
315
342
  @include mixins.error-thumb-hover-styles;
@@ -332,13 +359,13 @@
332
359
 
333
360
  .warning {
334
361
  &::-webkit-slider-thumb {
335
- background-color: awsui.$color-text-status-warning;
336
- border-color: awsui.$color-text-status-warning;
362
+ background-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-text-status-warning);
363
+ border-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-text-status-warning);
337
364
  }
338
365
 
339
366
  &::-moz-range-thumb {
340
- background-color: awsui.$color-text-status-warning;
341
- border-color: awsui.$color-text-status-warning;
367
+ background-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-text-status-warning);
368
+ border-color: var(#{custom-props.$styleSliderHandleBackgroundDefault}, awsui.$color-text-status-warning);
342
369
  }
343
370
  &:hover::-webkit-slider-thumb {
344
371
  @include mixins.warning-thumb-hover-styles;