@cloudscape-design/components-themeable 3.0.1130 → 3.0.1131

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 (105) hide show
  1. package/lib/internal/manifest.json +1 -1
  2. package/lib/internal/scss/input/styles.scss +62 -9
  3. package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +99 -87
  4. package/lib/internal/scss/internal/styles/forms/mixins.scss +42 -19
  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 +24 -24
  9. package/lib/internal/template/annotation-context/annotation/styles.scoped.css +32 -32
  10. package/lib/internal/template/annotation-context/annotation/styles.selectors.js +24 -24
  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 +27 -27
  18. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.scoped.css +84 -84
  19. package/lib/internal/template/app-layout/visual-refresh-toolbar/drawer/styles.selectors.js +27 -27
  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 +16 -16
  36. package/lib/internal/template/button-dropdown/item-element/styles.scoped.css +27 -27
  37. package/lib/internal/template/button-dropdown/item-element/styles.selectors.js +16 -16
  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/index.d.ts.map +1 -1
  51. package/lib/internal/template/input/index.js +3 -2
  52. package/lib/internal/template/input/index.js.map +1 -1
  53. package/lib/internal/template/input/interfaces.d.ts +48 -0
  54. package/lib/internal/template/input/interfaces.d.ts.map +1 -1
  55. package/lib/internal/template/input/interfaces.js.map +1 -1
  56. package/lib/internal/template/input/internal.d.ts.map +1 -1
  57. package/lib/internal/template/input/internal.js +3 -2
  58. package/lib/internal/template/input/internal.js.map +1 -1
  59. package/lib/internal/template/input/styles.css.js +13 -13
  60. package/lib/internal/template/input/styles.d.ts +3 -0
  61. package/lib/internal/template/input/styles.d.ts.map +1 -0
  62. package/lib/internal/template/input/styles.js +42 -0
  63. package/lib/internal/template/input/styles.js.map +1 -0
  64. package/lib/internal/template/input/styles.scoped.css +66 -49
  65. package/lib/internal/template/input/styles.selectors.js +13 -13
  66. package/lib/internal/template/internal/base-component/styles.scoped.css +1 -1
  67. package/lib/internal/template/internal/components/drag-handle-wrapper/styles.css.js +20 -20
  68. package/lib/internal/template/internal/components/drag-handle-wrapper/styles.scoped.css +48 -48
  69. package/lib/internal/template/internal/components/drag-handle-wrapper/styles.selectors.js +20 -20
  70. package/lib/internal/template/internal/components/dropdown/styles.css.js +20 -20
  71. package/lib/internal/template/internal/components/dropdown/styles.scoped.css +38 -38
  72. package/lib/internal/template/internal/components/dropdown/styles.selectors.js +20 -20
  73. package/lib/internal/template/internal/components/token-list/styles.css.js +10 -10
  74. package/lib/internal/template/internal/components/token-list/styles.scoped.css +25 -25
  75. package/lib/internal/template/internal/components/token-list/styles.selectors.js +10 -10
  76. package/lib/internal/template/internal/environment.js +2 -2
  77. package/lib/internal/template/internal/environment.json +2 -2
  78. package/lib/internal/template/internal/generated/custom-css-properties/index.d.ts +12 -0
  79. package/lib/internal/template/internal/generated/custom-css-properties/index.d.ts.map +1 -1
  80. package/lib/internal/template/internal/generated/custom-css-properties/index.js +98 -86
  81. package/lib/internal/template/internal/generated/custom-css-properties/index.js.map +1 -1
  82. package/lib/internal/template/link/styles.css.js +20 -20
  83. package/lib/internal/template/link/styles.scoped.css +103 -103
  84. package/lib/internal/template/link/styles.selectors.js +20 -20
  85. package/lib/internal/template/radio-group/styles.css.js +10 -10
  86. package/lib/internal/template/radio-group/styles.scoped.css +22 -22
  87. package/lib/internal/template/radio-group/styles.selectors.js +10 -10
  88. package/lib/internal/template/select/parts/filter.d.ts +1 -1
  89. package/lib/internal/template/select/parts/filter.d.ts.map +1 -1
  90. package/lib/internal/template/slider/styles.css.js +26 -26
  91. package/lib/internal/template/slider/styles.scoped.css +86 -86
  92. package/lib/internal/template/slider/styles.selectors.js +26 -26
  93. package/lib/internal/template/spinner/styles.css.js +13 -13
  94. package/lib/internal/template/spinner/styles.scoped.css +39 -39
  95. package/lib/internal/template/spinner/styles.selectors.js +13 -13
  96. package/lib/internal/template/tag-editor/styles.css.js +3 -3
  97. package/lib/internal/template/tag-editor/styles.scoped.css +13 -13
  98. package/lib/internal/template/tag-editor/styles.selectors.js +3 -3
  99. package/lib/internal/template/text-content/styles.css.js +1 -1
  100. package/lib/internal/template/text-content/styles.scoped.css +66 -66
  101. package/lib/internal/template/text-content/styles.selectors.js +1 -1
  102. package/lib/internal/template/toggle/styles.css.js +10 -10
  103. package/lib/internal/template/toggle/styles.scoped.css +23 -23
  104. package/lib/internal/template/toggle/styles.selectors.js +10 -10
  105. package/package.json +1 -1
@@ -1,3 +1,3 @@
1
1
  {
2
- "commit": "f44f577a80c4e032cf4e4fc68a9f9f3fea0bb43b"
2
+ "commit": "05d1e350f5cf1f8e913a72f1baeff2af7967d6bf"
3
3
  }
@@ -5,6 +5,8 @@
5
5
 
6
6
  @use '../internal/styles' as styles;
7
7
  @use '../internal/styles/tokens' as awsui;
8
+ @use '../internal/styles/foundation' as foundation;
9
+ @use '../internal/generated/custom-css-properties/index.scss' as custom-props;
8
10
 
9
11
  @mixin placeholder {
10
12
  &::-webkit-input-placeholder {
@@ -33,35 +35,86 @@
33
35
  @include styles.styles-reset;
34
36
  padding-block: styles.$control-padding-vertical;
35
37
  padding-inline: styles.$control-padding-horizontal;
36
- color: awsui.$color-text-body-default;
38
+ color: var(#{custom-props.$styleColorDefault}, awsui.$color-text-body-default);
37
39
  inline-size: 100%;
38
40
  cursor: text;
39
41
  box-sizing: border-box;
40
- background-color: awsui.$color-background-input-default;
42
+ background-color: var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-input-default);
41
43
  border-start-start-radius: styles.$control-border-radius;
42
44
  border-start-end-radius: styles.$control-border-radius;
43
45
  border-end-start-radius: styles.$control-border-radius;
44
46
  border-end-end-radius: styles.$control-border-radius;
45
- border-block: awsui.$border-width-field solid awsui.$color-border-input-default;
46
- border-inline: awsui.$border-width-field solid awsui.$color-border-input-default;
47
+
48
+ border-block: awsui.$border-width-field solid
49
+ var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-default);
50
+ border-inline: awsui.$border-width-field solid
51
+ var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-default);
52
+
53
+ box-shadow: var(#{custom-props.$styleBoxShadowDefault});
54
+
47
55
  @include styles.font-body-m;
48
56
  block-size: awsui.$size-vertical-input;
49
57
 
58
+ &:hover {
59
+ border-color: var(
60
+ #{custom-props.$styleBorderColorHover},
61
+ var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-default)
62
+ );
63
+ color: var(
64
+ #{custom-props.$styleColorHover},
65
+ var(#{custom-props.$styleBorderColorDefault}, awsui.$color-text-body-default)
66
+ );
67
+ background-color: var(
68
+ #{custom-props.$styleBackgroundHover},
69
+ var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-input-default)
70
+ );
71
+ box-shadow: var(#{custom-props.$styleBoxShadowHover}, #{custom-props.$styleBoxShadowDefault});
72
+ }
73
+
50
74
  &.input-readonly {
51
- @include styles.form-readonly-element;
75
+ @include styles.form-readonly-element(
76
+ $background-color: var(
77
+ #{custom-props.$styleBackgroundReadonly},
78
+ var(#{custom-props.$styleBackgroundDefault}, awsui.$color-background-input-default)
79
+ ),
80
+ $border-color: var(
81
+ #{custom-props.$styleBorderColorReadonly},
82
+ var(#{custom-props.$styleBorderColorDefault}, awsui.$color-border-input-disabled)
83
+ )
84
+ );
85
+ color: var(
86
+ #{custom-props.$styleColorReadonly},
87
+ var(#{custom-props.$styleColorDefault}, awsui.$color-text-body-default)
88
+ );
89
+ box-shadow: var(#{custom-props.$styleBoxShadowReadonly});
52
90
  }
53
91
 
54
92
  @include placeholder {
55
- @include styles.form-placeholder;
93
+ @include styles.form-placeholder(
94
+ $color: var(#{custom-props.$stylePlaceholderColor}, awsui.$color-text-input-placeholder),
95
+ $font-size: var(#{custom-props.$stylePlaceholderFontSize}),
96
+ $font-style: var(#{custom-props.$stylePlaceholderFontStyle}, italic),
97
+ $font-weight: var(#{custom-props.$stylePlaceholderFontWeight})
98
+ );
56
99
  }
57
100
 
58
101
  &:focus {
59
- @include styles.form-focus-element;
102
+ @include styles.form-focus-element(
103
+ $border-color: var(#{custom-props.$styleBorderColorFocus}, awsui.$color-border-input-focused),
104
+ $box-shadow: var(#{custom-props.$styleBoxShadowFocus}, foundation.$box-shadow-focused-light)
105
+ );
106
+ color: var(#{custom-props.$styleColorFocus}, awsui.$color-text-body-default);
107
+ background-color: var(#{custom-props.$styleBackgroundFocus}, awsui.$color-background-input-default);
60
108
  }
61
109
 
62
110
  &:disabled {
63
- @include styles.form-disabled-element;
64
- cursor: default;
111
+ @include styles.form-disabled-element(
112
+ $background-color: var(#{custom-props.$styleBackgroundDisabled}, awsui.$color-background-input-disabled),
113
+ $border-color: var(#{custom-props.$styleBorderColorDisabled}, awsui.$color-border-input-disabled),
114
+ $color: var(#{custom-props.$styleColorDisabled}, awsui.$color-text-input-disabled),
115
+ $cursor: default
116
+ );
117
+ box-shadow: var(#{custom-props.$styleBoxShadowDisabled});
65
118
  @include placeholder {
66
119
  @include styles.form-placeholder-disabled;
67
120
  }
@@ -1,91 +1,103 @@
1
1
 
2
2
  // Build environment
3
- $awsui-commit-hash: "f44f577a";
3
+ $awsui-commit-hash: "05d1e350";
4
4
  // Manually managed CSS-variables
5
- $maxContentWidth: --awsui-max-content-width-lqnbqg;
6
- $minContentWidth: --awsui-min-content-width-lqnbqg;
7
- $breadcrumbsGap: --awsui-breadcrumbs-gap-lqnbqg;
8
- $contentGapLeft: --awsui-content-gap-left-lqnbqg;
9
- $contentGapRight: --awsui-content-gap-right-lqnbqg;
10
- $contentHeight: --awsui-content-height-lqnbqg;
11
- $contentLayoutDefaultHorizontalPadding: --awsui-content-layout-default-horizontal-padding-lqnbqg;
12
- $contentLayoutMaxContentWidth: --awsui-content-layout-max-content-width-lqnbqg;
13
- $contentLayoutMainGap: --awsui-content-layout-main-gap-lqnbqg;
14
- $defaultMaxContentWidth: --awsui-default-max-content-width-lqnbqg;
15
- $defaultMinContentWidth: --awsui-default-min-content-width-lqnbqg;
16
- $drawerSize: --awsui-drawer-size-lqnbqg;
17
- $drawerMinSize: --awsui-drawer-min-size-lqnbqg;
18
- $bottomDrawerSize: --awsui-bottom-drawer-size-lqnbqg;
19
- $footerHeight: --awsui-footer-height-lqnbqg;
20
- $headerGap: --awsui-header-gap-lqnbqg;
21
- $headerHeight: --awsui-header-height-lqnbqg;
22
- $layoutWidth: --awsui-layout-width-lqnbqg;
23
- $mainGap: --awsui-main-gap-lqnbqg;
24
- $mainOffsetLeft: --awsui-main-offset-left-lqnbqg;
25
- $mainTemplateRows: --awsui-main-template-rows-lqnbqg;
26
- $mobileBarHeight: --awsui-mobile-bar-height-lqnbqg;
27
- $notificationsHeight: --awsui-notifications-height-lqnbqg;
28
- $offsetTop: --awsui-offset-top-lqnbqg;
29
- $overlapHeight: --awsui-overlap-height-lqnbqg;
30
- $navigationWidth: --awsui-navigation-width-lqnbqg;
31
- $splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-lqnbqg;
32
- $splitPanelReportedSize: --awsui-split-panel-reported-size-lqnbqg;
33
- $splitPanelHeight: --awsui-split-panel-height-lqnbqg;
34
- $splitPanelMinWidth: --awsui-split-panel-min-width-lqnbqg;
35
- $splitPanelMaxWidth: --awsui-split-panel-max-width-lqnbqg;
36
- $toolsMaxWidth: --awsui-tools-max-width-lqnbqg;
37
- $toolsWidth: --awsui-tools-width-lqnbqg;
38
- $toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-lqnbqg;
39
- $contentScrollMargin: --awsui-content-scroll-margin-lqnbqg;
40
- $flashbarStackDepth: --awsui-flashbar-stack-depth-lqnbqg;
41
- $flashbarStackIndex: --awsui-flashbar-stack-index-lqnbqg;
42
- $flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-lqnbqg;
43
- $stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-lqnbqg;
44
- $stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-lqnbqg;
45
- $dropdownDefaultMaxWidth: --awsui-dropdown-default-max-width-lqnbqg;
46
- $spinnerRotatorFrom: --awsui-spinner-rotator-from-lqnbqg;
47
- $spinnerRotatorTo: --awsui-spinner-rotator-to-lqnbqg;
48
- $spinnerLineLeftFrom: --awsui-spinner-line-left-from-lqnbqg;
49
- $spinnerLineLeftTo: --awsui-spinner-line-left-to-lqnbqg;
50
- $spinnerLineRightFrom: --awsui-spinner-line-right-from-lqnbqg;
51
- $spinnerLineRightTo: --awsui-spinner-line-right-to-lqnbqg;
52
- $sliderLabelCount: --awsui-slider-label-count-lqnbqg;
53
- $sliderTickCount: --awsui-slider-tick-count-lqnbqg;
54
- $sliderReferenceColumn: --awsui-slider-reference-column-lqnbqg;
55
- $sliderNextReferenceColumn: --awsui-slider-next-reference-column-lqnbqg;
56
- $sliderMaxStart: --awsui-slider-max-start-lqnbqg;
57
- $sliderMinEnd: --awsui-slider-min-end-lqnbqg;
58
- $sliderRangeInlineSize: --awsui-slider-range-inline-size-lqnbqg;
59
- $sliderTooltipPosition: --awsui-slider-tooltip-position-lqnbqg;
60
- $togglesLeftWidth: --awsui-toggles-left-width-lqnbqg;
61
- $togglesRightWidth: --awsui-toggles-right-width-lqnbqg;
62
- $promptInputMaxRows: --awsui-prompt-input-max-rows-lqnbqg;
63
- $promptInputScrollHeight: --awsui-prompt-input-scroll-height-lqnbqg;
64
- $dragHandleAnimationInlineOffset: --awsui-drag-handle-animation-inline-offset-lqnbqg;
65
- $dragHandleAnimationBlockOffset: --awsui-drag-handle-animation-block-offset-lqnbqg;
66
- $styleBackgroundActive: --awsui-style-background-active-lqnbqg;
67
- $styleBackgroundDefault: --awsui-style-background-default-lqnbqg;
68
- $styleBackgroundDisabled: --awsui-style-background-disabled-lqnbqg;
69
- $styleBackgroundHover: --awsui-style-background-hover-lqnbqg;
70
- $styleBorderColorActive: --awsui-style-border-color-active-lqnbqg;
71
- $styleBorderColorDefault: --awsui-style-border-color-default-lqnbqg;
72
- $styleBorderColorDisabled: --awsui-style-border-color-disabled-lqnbqg;
73
- $styleBorderColorHover: --awsui-style-border-color-hover-lqnbqg;
74
- $styleColorActive: --awsui-style-color-active-lqnbqg;
75
- $styleColorDefault: --awsui-style-color-default-lqnbqg;
76
- $styleColorDisabled: --awsui-style-color-disabled-lqnbqg;
77
- $styleColorHover: --awsui-style-color-hover-lqnbqg;
78
- $styleFocusRingBorderColor: --awsui-style-focus-ring-border-color-lqnbqg;
79
- $styleFocusRingBorderRadius: --awsui-style-focus-ring-border-radius-lqnbqg;
80
- $styleFocusRingBorderWidth: --awsui-style-focus-ring-border-width-lqnbqg;
81
- $styleFocusRingBoxShadow: --awsui-style-focus-ring-box-shadow-lqnbqg;
82
- $styleBoxShadowActive: --awsui-style-box-shadow-active-lqnbqg;
83
- $styleBoxShadowDefault: --awsui-style-box-shadow-default-lqnbqg;
84
- $styleBoxShadowDisabled: --awsui-style-box-shadow-disabled-lqnbqg;
85
- $styleBoxShadowHover: --awsui-style-box-shadow-hover-lqnbqg;
86
- $alertFocusRingBorderColor: --awsui-alert-focus-ring-border-color-lqnbqg;
87
- $alertFocusRingBorderRadius: --awsui-alert-focus-ring-border-radius-lqnbqg;
88
- $alertFocusRingBorderWidth: --awsui-alert-focus-ring-border-width-lqnbqg;
89
- $alertFocusRingBoxShadow: --awsui-alert-focus-ring-box-shadow-lqnbqg;
90
- $alertIconColor: --awsui-alert-icon-color-lqnbqg;
5
+ $maxContentWidth: --awsui-max-content-width-b75yp7;
6
+ $minContentWidth: --awsui-min-content-width-b75yp7;
7
+ $breadcrumbsGap: --awsui-breadcrumbs-gap-b75yp7;
8
+ $contentGapLeft: --awsui-content-gap-left-b75yp7;
9
+ $contentGapRight: --awsui-content-gap-right-b75yp7;
10
+ $contentHeight: --awsui-content-height-b75yp7;
11
+ $contentLayoutDefaultHorizontalPadding: --awsui-content-layout-default-horizontal-padding-b75yp7;
12
+ $contentLayoutMaxContentWidth: --awsui-content-layout-max-content-width-b75yp7;
13
+ $contentLayoutMainGap: --awsui-content-layout-main-gap-b75yp7;
14
+ $defaultMaxContentWidth: --awsui-default-max-content-width-b75yp7;
15
+ $defaultMinContentWidth: --awsui-default-min-content-width-b75yp7;
16
+ $drawerSize: --awsui-drawer-size-b75yp7;
17
+ $drawerMinSize: --awsui-drawer-min-size-b75yp7;
18
+ $bottomDrawerSize: --awsui-bottom-drawer-size-b75yp7;
19
+ $footerHeight: --awsui-footer-height-b75yp7;
20
+ $headerGap: --awsui-header-gap-b75yp7;
21
+ $headerHeight: --awsui-header-height-b75yp7;
22
+ $layoutWidth: --awsui-layout-width-b75yp7;
23
+ $mainGap: --awsui-main-gap-b75yp7;
24
+ $mainOffsetLeft: --awsui-main-offset-left-b75yp7;
25
+ $mainTemplateRows: --awsui-main-template-rows-b75yp7;
26
+ $mobileBarHeight: --awsui-mobile-bar-height-b75yp7;
27
+ $notificationsHeight: --awsui-notifications-height-b75yp7;
28
+ $offsetTop: --awsui-offset-top-b75yp7;
29
+ $overlapHeight: --awsui-overlap-height-b75yp7;
30
+ $navigationWidth: --awsui-navigation-width-b75yp7;
31
+ $splitPanelReportedHeaderSize: --awsui-split-panel-reported-header-size-b75yp7;
32
+ $splitPanelReportedSize: --awsui-split-panel-reported-size-b75yp7;
33
+ $splitPanelHeight: --awsui-split-panel-height-b75yp7;
34
+ $splitPanelMinWidth: --awsui-split-panel-min-width-b75yp7;
35
+ $splitPanelMaxWidth: --awsui-split-panel-max-width-b75yp7;
36
+ $toolsMaxWidth: --awsui-tools-max-width-b75yp7;
37
+ $toolsWidth: --awsui-tools-width-b75yp7;
38
+ $toolsAnimationStartingOpacity: --awsui-tools-animation-starting-opacity-b75yp7;
39
+ $contentScrollMargin: --awsui-content-scroll-margin-b75yp7;
40
+ $flashbarStackDepth: --awsui-flashbar-stack-depth-b75yp7;
41
+ $flashbarStackIndex: --awsui-flashbar-stack-index-b75yp7;
42
+ $flashbarStickyBottomMargin: --awsui-flashbar-sticky-bottom-margin-b75yp7;
43
+ $stackedNotificationsBottomMargin: --awsui-stacked-notifications-bottom-margin-b75yp7;
44
+ $stackedNotificationsDefaultBottomMargin: --awsui-stacked-notifications-default-bottom-margin-b75yp7;
45
+ $dropdownDefaultMaxWidth: --awsui-dropdown-default-max-width-b75yp7;
46
+ $spinnerRotatorFrom: --awsui-spinner-rotator-from-b75yp7;
47
+ $spinnerRotatorTo: --awsui-spinner-rotator-to-b75yp7;
48
+ $spinnerLineLeftFrom: --awsui-spinner-line-left-from-b75yp7;
49
+ $spinnerLineLeftTo: --awsui-spinner-line-left-to-b75yp7;
50
+ $spinnerLineRightFrom: --awsui-spinner-line-right-from-b75yp7;
51
+ $spinnerLineRightTo: --awsui-spinner-line-right-to-b75yp7;
52
+ $sliderLabelCount: --awsui-slider-label-count-b75yp7;
53
+ $sliderTickCount: --awsui-slider-tick-count-b75yp7;
54
+ $sliderReferenceColumn: --awsui-slider-reference-column-b75yp7;
55
+ $sliderNextReferenceColumn: --awsui-slider-next-reference-column-b75yp7;
56
+ $sliderMaxStart: --awsui-slider-max-start-b75yp7;
57
+ $sliderMinEnd: --awsui-slider-min-end-b75yp7;
58
+ $sliderRangeInlineSize: --awsui-slider-range-inline-size-b75yp7;
59
+ $sliderTooltipPosition: --awsui-slider-tooltip-position-b75yp7;
60
+ $togglesLeftWidth: --awsui-toggles-left-width-b75yp7;
61
+ $togglesRightWidth: --awsui-toggles-right-width-b75yp7;
62
+ $promptInputMaxRows: --awsui-prompt-input-max-rows-b75yp7;
63
+ $promptInputScrollHeight: --awsui-prompt-input-scroll-height-b75yp7;
64
+ $dragHandleAnimationInlineOffset: --awsui-drag-handle-animation-inline-offset-b75yp7;
65
+ $dragHandleAnimationBlockOffset: --awsui-drag-handle-animation-block-offset-b75yp7;
66
+ $styleBackgroundActive: --awsui-style-background-active-b75yp7;
67
+ $styleBackgroundDefault: --awsui-style-background-default-b75yp7;
68
+ $styleBackgroundDisabled: --awsui-style-background-disabled-b75yp7;
69
+ $styleBackgroundHover: --awsui-style-background-hover-b75yp7;
70
+ $styleBorderColorActive: --awsui-style-border-color-active-b75yp7;
71
+ $styleBorderColorDefault: --awsui-style-border-color-default-b75yp7;
72
+ $styleBorderColorDisabled: --awsui-style-border-color-disabled-b75yp7;
73
+ $styleBorderColorHover: --awsui-style-border-color-hover-b75yp7;
74
+ $styleColorActive: --awsui-style-color-active-b75yp7;
75
+ $styleColorDefault: --awsui-style-color-default-b75yp7;
76
+ $styleColorDisabled: --awsui-style-color-disabled-b75yp7;
77
+ $styleColorHover: --awsui-style-color-hover-b75yp7;
78
+ $styleFocusRingBorderColor: --awsui-style-focus-ring-border-color-b75yp7;
79
+ $styleFocusRingBorderRadius: --awsui-style-focus-ring-border-radius-b75yp7;
80
+ $styleFocusRingBorderWidth: --awsui-style-focus-ring-border-width-b75yp7;
81
+ $styleFocusRingBoxShadow: --awsui-style-focus-ring-box-shadow-b75yp7;
82
+ $styleBoxShadowActive: --awsui-style-box-shadow-active-b75yp7;
83
+ $styleBoxShadowDefault: --awsui-style-box-shadow-default-b75yp7;
84
+ $styleBoxShadowDisabled: --awsui-style-box-shadow-disabled-b75yp7;
85
+ $styleBoxShadowHover: --awsui-style-box-shadow-hover-b75yp7;
86
+ $styleBackgroundReadonly: --awsui-style-background-readonly-b75yp7;
87
+ $styleBorderColorReadonly: --awsui-style-border-color-readonly-b75yp7;
88
+ $styleBoxShadowReadonly: --awsui-style-box-shadow-readonly-b75yp7;
89
+ $styleColorReadonly: --awsui-style-color-readonly-b75yp7;
90
+ $styleBackgroundFocus: --awsui-style-background-focus-b75yp7;
91
+ $styleBorderColorFocus: --awsui-style-border-color-focus-b75yp7;
92
+ $styleBoxShadowFocus: --awsui-style-box-shadow-focus-b75yp7;
93
+ $styleColorFocus: --awsui-style-color-focus-b75yp7;
94
+ $stylePlaceholderColor: --awsui-style-placeholder-color-b75yp7;
95
+ $stylePlaceholderFontSize: --awsui-style-placeholder-font-size-b75yp7;
96
+ $stylePlaceholderFontStyle: --awsui-style-placeholder-font-style-b75yp7;
97
+ $stylePlaceholderFontWeight: --awsui-style-placeholder-font-weight-b75yp7;
98
+ $alertFocusRingBorderColor: --awsui-alert-focus-ring-border-color-b75yp7;
99
+ $alertFocusRingBorderRadius: --awsui-alert-focus-ring-border-radius-b75yp7;
100
+ $alertFocusRingBorderWidth: --awsui-alert-focus-ring-border-width-b75yp7;
101
+ $alertFocusRingBoxShadow: --awsui-alert-focus-ring-box-shadow-b75yp7;
102
+ $alertIconColor: --awsui-alert-icon-color-b75yp7;
91
103
 
@@ -113,27 +113,36 @@
113
113
 
114
114
  // Use for form input elements, excluding buttons
115
115
  // or for elements that have a light border and light background
116
- @mixin form-focus-element($border-radius: constants.$control-border-radius) {
116
+ @mixin form-focus-element(
117
+ $border-radius: constants.$control-border-radius,
118
+ $border-color: awsui.$color-border-input-focused,
119
+ $box-shadow: foundation.$box-shadow-focused-light
120
+ ) {
117
121
  // Using a special transparent outline only visible in Windows High Contrast Mode.
118
122
  // See focus-highlight above.
119
123
  outline: 2px dotted transparent;
120
124
 
121
- border-block: awsui.$border-width-field solid awsui.$color-border-input-focused;
122
- border-inline: awsui.$border-width-field solid awsui.$color-border-input-focused;
125
+ border-block: awsui.$border-width-field solid $border-color;
126
+ border-inline: awsui.$border-width-field solid $border-color;
123
127
  border-start-start-radius: $border-radius;
124
128
  border-start-end-radius: $border-radius;
125
129
  border-end-start-radius: $border-radius;
126
130
  border-end-end-radius: $border-radius;
127
131
 
128
- box-shadow: foundation.$box-shadow-focused-light;
132
+ box-shadow: $box-shadow;
129
133
  }
130
134
 
131
- @mixin form-disabled-element {
132
- background-color: awsui.$color-background-input-disabled;
133
- border-block: awsui.$border-width-field solid awsui.$color-border-input-disabled;
134
- border-inline: awsui.$border-width-field solid awsui.$color-border-input-disabled;
135
- color: awsui.$color-text-input-disabled;
136
- cursor: auto;
135
+ @mixin form-disabled-element(
136
+ $background-color: awsui.$color-background-input-disabled,
137
+ $border-color: awsui.$color-border-input-disabled,
138
+ $color: awsui.$color-text-input-disabled,
139
+ $cursor: auto
140
+ ) {
141
+ background-color: $background-color;
142
+ border-block: awsui.$border-width-field solid $border-color;
143
+ border-inline: awsui.$border-width-field solid $border-color;
144
+ color: $color;
145
+ cursor: $cursor;
137
146
  }
138
147
 
139
148
  @mixin button-trigger-disabled-element {
@@ -144,10 +153,13 @@
144
153
  cursor: auto;
145
154
  }
146
155
 
147
- @mixin form-readonly-element {
148
- background-color: awsui.$color-background-input-default;
149
- border-block: awsui.$border-width-field solid awsui.$color-border-input-disabled;
150
- border-inline: awsui.$border-width-field solid awsui.$color-border-input-disabled;
156
+ @mixin form-readonly-element(
157
+ $background-color: awsui.$color-background-input-default,
158
+ $border-color: awsui.$color-border-input-disabled
159
+ ) {
160
+ background-color: $background-color;
161
+ border-block: awsui.$border-width-field solid $border-color;
162
+ border-inline: awsui.$border-width-field solid $border-color;
151
163
  }
152
164
 
153
165
  @mixin button-trigger-readonly-element {
@@ -156,13 +168,24 @@
156
168
  border-inline: awsui.$border-width-token solid awsui.$color-border-input-disabled;
157
169
  }
158
170
 
159
- @mixin form-placeholder {
160
- color: awsui.$color-text-input-placeholder;
161
- font-style: italic;
171
+ @mixin form-placeholder(
172
+ $color: awsui.$color-text-input-placeholder,
173
+ $font-size: null,
174
+ $font-style: italic,
175
+ $font-weight: null
176
+ ) {
177
+ color: $color;
178
+ @if $font-size {
179
+ font-size: $font-size;
180
+ }
181
+ font-style: $font-style;
182
+ @if $font-weight {
183
+ font-weight: $font-weight;
184
+ }
162
185
  }
163
186
 
164
- @mixin form-placeholder-disabled {
165
- color: awsui.$color-text-input-placeholder-disabled;
187
+ @mixin form-placeholder-disabled($color: awsui.$color-text-input-placeholder-disabled) {
188
+ color: $color;
166
189
  }
167
190
 
168
191
  @mixin form-control-description {
@@ -1,32 +1,32 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "alert": "awsui_alert_mx3cw_1yivi_193",
5
- "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_1yivi_1",
6
- "root": "awsui_root_mx3cw_1yivi_215",
7
- "hidden": "awsui_hidden_mx3cw_1yivi_250",
8
- "alert-wrapper": "awsui_alert-wrapper_mx3cw_1yivi_299",
9
- "initial-hidden": "awsui_initial-hidden_mx3cw_1yivi_311",
10
- "header": "awsui_header_mx3cw_1yivi_316",
11
- "header-replacement": "awsui_header-replacement_mx3cw_1yivi_317",
12
- "action": "awsui_action_mx3cw_1yivi_321",
13
- "action-slot": "awsui_action-slot_mx3cw_1yivi_325",
14
- "action-button": "awsui_action-button_mx3cw_1yivi_326",
15
- "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_1yivi_330",
16
- "text": "awsui_text_mx3cw_1yivi_361",
17
- "icon": "awsui_icon_mx3cw_1yivi_368",
18
- "message": "awsui_message_mx3cw_1yivi_371",
19
- "action-wrapped": "awsui_action-wrapped_mx3cw_1yivi_375",
20
- "icon-size-medium": "awsui_icon-size-medium_mx3cw_1yivi_379",
21
- "icon-size-big": "awsui_icon-size-big_mx3cw_1yivi_383",
22
- "icon-size-normal": "awsui_icon-size-normal_mx3cw_1yivi_387",
23
- "content": "awsui_content_mx3cw_1yivi_391",
24
- "content-replacement": "awsui_content-replacement_mx3cw_1yivi_392",
25
- "dismiss": "awsui_dismiss_mx3cw_1yivi_396",
26
- "dismiss-button": "awsui_dismiss-button_mx3cw_1yivi_401",
27
- "type-error": "awsui_type-error_mx3cw_1yivi_405",
28
- "type-warning": "awsui_type-warning_mx3cw_1yivi_413",
29
- "type-success": "awsui_type-success_mx3cw_1yivi_421",
30
- "type-info": "awsui_type-info_mx3cw_1yivi_429"
4
+ "alert": "awsui_alert_mx3cw_1bu84_193",
5
+ "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_1bu84_1",
6
+ "root": "awsui_root_mx3cw_1bu84_215",
7
+ "hidden": "awsui_hidden_mx3cw_1bu84_250",
8
+ "alert-wrapper": "awsui_alert-wrapper_mx3cw_1bu84_299",
9
+ "initial-hidden": "awsui_initial-hidden_mx3cw_1bu84_311",
10
+ "header": "awsui_header_mx3cw_1bu84_316",
11
+ "header-replacement": "awsui_header-replacement_mx3cw_1bu84_317",
12
+ "action": "awsui_action_mx3cw_1bu84_321",
13
+ "action-slot": "awsui_action-slot_mx3cw_1bu84_325",
14
+ "action-button": "awsui_action-button_mx3cw_1bu84_326",
15
+ "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_1bu84_330",
16
+ "text": "awsui_text_mx3cw_1bu84_361",
17
+ "icon": "awsui_icon_mx3cw_1bu84_368",
18
+ "message": "awsui_message_mx3cw_1bu84_371",
19
+ "action-wrapped": "awsui_action-wrapped_mx3cw_1bu84_375",
20
+ "icon-size-medium": "awsui_icon-size-medium_mx3cw_1bu84_379",
21
+ "icon-size-big": "awsui_icon-size-big_mx3cw_1bu84_383",
22
+ "icon-size-normal": "awsui_icon-size-normal_mx3cw_1bu84_387",
23
+ "content": "awsui_content_mx3cw_1bu84_391",
24
+ "content-replacement": "awsui_content-replacement_mx3cw_1bu84_392",
25
+ "dismiss": "awsui_dismiss_mx3cw_1bu84_396",
26
+ "dismiss-button": "awsui_dismiss-button_mx3cw_1bu84_401",
27
+ "type-error": "awsui_type-error_mx3cw_1bu84_405",
28
+ "type-warning": "awsui_type-warning_mx3cw_1bu84_413",
29
+ "type-success": "awsui_type-success_mx3cw_1bu84_421",
30
+ "type-info": "awsui_type-info_mx3cw_1bu84_429"
31
31
  };
32
32