@sdata/web-vue 4.7.1 → 5.0.0

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 (219) hide show
  1. package/dist/sd.css +4004 -3955
  2. package/dist/sd.min.css +13 -13
  3. package/es/_components/input-label/style/index.css +47 -47
  4. package/es/_components/select-view/style/index.css +256 -256
  5. package/es/alert/style/index.css +48 -48
  6. package/es/alert/style/token.scss +257 -0
  7. package/es/anchor/style/index.css +18 -18
  8. package/es/anchor/style/token.scss +74 -0
  9. package/es/auto-complete/style/index.css +18 -18
  10. package/es/auto-complete/style/token.scss +94 -0
  11. package/es/avatar/style/index.css +31 -31
  12. package/es/avatar/style/token.scss +118 -0
  13. package/es/back-top/style/index.css +11 -11
  14. package/es/back-top/style/token.scss +60 -0
  15. package/es/badge/style/index.css +35 -35
  16. package/es/badge/style/token.scss +148 -0
  17. package/es/basic-crud-table/style/index.css +4 -4
  18. package/es/basic-crud-table/style/token.scss +20 -0
  19. package/es/bloom-menu/style/index.css +33 -34
  20. package/es/bloom-menu/style/index.scss +5 -5
  21. package/es/bloom-menu/style/token.scss +99 -0
  22. package/es/border-beam/style/token.scss +28 -0
  23. package/es/breadcrumb/style/index.css +17 -17
  24. package/es/breadcrumb/style/token.scss +97 -0
  25. package/es/button/style/index.css +379 -379
  26. package/es/button/style/index.scss +3 -3
  27. package/es/button/style/token.scss +1604 -0
  28. package/es/card/style/index.css +36 -36
  29. package/es/card/style/token.scss +162 -0
  30. package/es/carousel/style/index.css +41 -41
  31. package/es/carousel/style/token.scss +101 -0
  32. package/es/cascader/style/index.css +58 -58
  33. package/es/cascader/style/token.scss +89 -0
  34. package/es/checkbox/style/index.css +28 -28
  35. package/es/checkbox/style/token.scss +134 -0
  36. package/es/collapse/style/index.css +24 -24
  37. package/es/collapse/style/token.scss +136 -0
  38. package/es/color-picker/style/index.css +50 -50
  39. package/es/color-picker/style/token.scss +200 -0
  40. package/es/comment/style/index.css +15 -15
  41. package/es/comment/style/token.scss +83 -0
  42. package/es/config-provider/algorithms.d.ts +11 -0
  43. package/es/config-provider/algorithms.js +53 -0
  44. package/es/config-provider/global-theme.js +7 -4
  45. package/es/config-provider/theme-config.d.ts +11 -0
  46. package/es/config-provider/theme-config.js +114 -0
  47. package/es/config-provider/theme-provider.vue_vue_type_script_setup_true_lang.js +46 -11
  48. package/es/config-provider/theme.d.ts +4 -1
  49. package/es/config-provider/theme.js +6 -5
  50. package/es/config-provider/token-key.d.ts +1 -0
  51. package/es/config-provider/token-key.js +6 -0
  52. package/es/copy/style/index.css +1 -1
  53. package/es/copy/style/token.scss +9 -0
  54. package/es/cropper/style/index.css +7 -7
  55. package/es/cropper/style/token.scss +24 -0
  56. package/es/date-picker/style/index.css +73 -73
  57. package/es/date-picker/style/token.scss +229 -0
  58. package/es/descriptions/style/index.css +45 -45
  59. package/es/descriptions/style/token.scss +191 -0
  60. package/es/divider/style/index.css +11 -11
  61. package/es/divider/style/token.scss +60 -0
  62. package/es/drawer/style/index.css +13 -13
  63. package/es/drawer/style/token.scss +68 -0
  64. package/es/dropdown/style/index.css +24 -23
  65. package/es/dropdown/style/index.scss +4 -2
  66. package/es/dropdown/style/token.scss +123 -0
  67. package/es/ellipsis/ellipsis.vue_vue_type_script_setup_true_lang.js +3 -3
  68. package/es/ellipsis/interface.d.ts +1 -0
  69. package/es/ellipsis/style/index.css +2 -2
  70. package/es/ellipsis/style/token.scss +5 -0
  71. package/es/empty/style/index.css +7 -7
  72. package/es/empty/style/token.scss +35 -0
  73. package/es/file-previewer/style/index.css +44 -44
  74. package/es/file-previewer/style/token.scss +198 -0
  75. package/es/form/style/index.css +113 -113
  76. package/es/form/style/token.scss +340 -0
  77. package/es/image/style/index.css +83 -83
  78. package/es/image/style/token.scss +451 -0
  79. package/es/index.css +4004 -3955
  80. package/es/index.d.ts +3 -0
  81. package/es/index.js +4 -1
  82. package/es/input/style/index.css +104 -104
  83. package/es/input/style/input.scss +2 -8
  84. package/es/input/style/size.scss +4 -4
  85. package/es/input/style/token.scss +327 -0
  86. package/es/input-mask/style/index.css +1 -1
  87. package/es/input-mask/style/token.scss +8 -0
  88. package/es/input-number/style/index.css +19 -19
  89. package/es/input-number/style/token.scss +82 -0
  90. package/es/input-tag/style/index.css +209 -209
  91. package/es/input-tag/style/token.scss +226 -0
  92. package/es/json-form/style/index.css +2 -2
  93. package/es/json-form/style/token.scss +21 -0
  94. package/es/kv-list/style/index.css +13 -13
  95. package/es/kv-list/style/token.scss +29 -0
  96. package/es/layout/style/index.css +38 -38
  97. package/es/layout/style/token.scss +100 -0
  98. package/es/link/style/index.css +28 -28
  99. package/es/link/style/token.scss +117 -0
  100. package/es/list/style/index.css +27 -27
  101. package/es/list/style/token.scss +178 -0
  102. package/es/mention/style/token.scss +22 -0
  103. package/es/menu/style/index.css +153 -120
  104. package/es/menu/style/index.scss +12 -4
  105. package/es/menu/style/token.scss +390 -0
  106. package/es/message/style/index.css +33 -33
  107. package/es/message/style/token.scss +218 -0
  108. package/es/modal/style/index.css +21 -21
  109. package/es/modal/style/token.scss +115 -0
  110. package/es/model-selector/style/index.css +1 -1
  111. package/es/notification/style/index.css +44 -44
  112. package/es/notification/style/token.scss +241 -0
  113. package/es/number-flow/style/index.css +5 -5
  114. package/es/number-flow/style/token.scss +19 -0
  115. package/es/page-header/style/index.css +25 -25
  116. package/es/page-header/style/token.scss +139 -0
  117. package/es/pagination/style/index.css +85 -85
  118. package/es/pagination/style/token.scss +303 -0
  119. package/es/panel-group/style/index.css +7 -7
  120. package/es/panel-group/style/token.scss +28 -0
  121. package/es/popconfirm/style/index.css +18 -18
  122. package/es/popconfirm/style/token.scss +83 -0
  123. package/es/popover/style/index.css +12 -12
  124. package/es/popover/style/token.scss +58 -0
  125. package/es/progress/style/index.css +55 -55
  126. package/es/progress/style/token.scss +253 -0
  127. package/es/qr-code/style/index.css +18 -21
  128. package/es/qr-code/style/index.scss +4 -6
  129. package/es/qr-code/style/token.scss +59 -0
  130. package/es/radio/style/index.css +45 -44
  131. package/es/radio/style/index.scss +1 -0
  132. package/es/radio/style/token.scss +185 -0
  133. package/es/rate/style/index.css +8 -8
  134. package/es/rate/style/token.scss +19 -0
  135. package/es/regex-vis/style/index.css +51 -51
  136. package/es/regex-vis/style/token.scss +170 -0
  137. package/es/result/style/index.css +26 -26
  138. package/es/result/style/token.scss +139 -0
  139. package/es/rich-text-editor/style/index.css +31 -31
  140. package/es/rich-text-editor/style/token.scss +120 -0
  141. package/es/scrollbar/style/index.css +14 -14
  142. package/es/scrollbar/style/token.scss +33 -0
  143. package/es/secret/style/index.css +6 -6
  144. package/es/secret/style/token.scss +30 -0
  145. package/es/select/style/index.css +27 -27
  146. package/es/select/style/token.scss +151 -0
  147. package/es/selectable-card/style/index.css +53 -51
  148. package/es/selectable-card/style/index.scss +6 -2
  149. package/es/selectable-card/style/token.scss +60 -0
  150. package/es/sender/style/index.css +54 -54
  151. package/es/sender/style/token.scss +155 -0
  152. package/es/skeleton/style/index.css +12 -12
  153. package/es/skeleton/style/token.scss +60 -0
  154. package/es/slider/style/index.css +34 -34
  155. package/es/slider/style/token.scss +144 -0
  156. package/es/spin/style/index.css +11 -11
  157. package/es/spin/style/token.scss +60 -0
  158. package/es/split/style/index.css +2 -2
  159. package/es/split/style/token.scss +18 -0
  160. package/es/statistic/style/index.css +13 -13
  161. package/es/statistic/style/token.scss +73 -0
  162. package/es/steps/style/index.css +98 -98
  163. package/es/steps/style/token.scss +464 -0
  164. package/es/style/color/css-variables.scss +382 -381
  165. package/es/style/theme/css-variables.scss +329 -135
  166. package/es/style/theme/global.scss +5 -5
  167. package/es/style/theme/index.scss +1 -1
  168. package/es/style/theme/runtime.scss +29 -0
  169. package/es/switch/style/index.css +37 -37
  170. package/es/switch/style/token.scss +135 -0
  171. package/es/table/style/index.css +127 -127
  172. package/es/table/style/token.scss +425 -0
  173. package/es/tabs/style/index.css +196 -190
  174. package/es/tabs/style/index.scss +27 -17
  175. package/es/tabs/style/token.scss +534 -0
  176. package/es/tag/index.d.ts +13 -0
  177. package/es/tag/interface.d.ts +1 -0
  178. package/es/tag/style/index.css +159 -159
  179. package/es/tag/style/token.scss +513 -0
  180. package/es/tag/tag.vue.d.ts +13 -3
  181. package/es/tag/tag.vue_vue_type_script_setup_true_lang.js +35 -8
  182. package/es/tag-group/style/index.css +3 -3
  183. package/es/tag-group/style/token.scss +9 -0
  184. package/es/textarea/style/index.css +40 -40
  185. package/es/time-picker/style/index.css +12 -12
  186. package/es/time-picker/style/token.scss +50 -0
  187. package/es/timeline/style/index.css +22 -22
  188. package/es/timeline/style/token.scss +75 -0
  189. package/es/toolbar/style/index.css +6 -6
  190. package/es/toolbar/style/token.scss +45 -0
  191. package/es/tooltip/style/index.css +8 -8
  192. package/es/tooltip/style/token.scss +46 -0
  193. package/es/tour/style/index.css +28 -28
  194. package/es/tour/style/token.scss +65 -0
  195. package/es/transfer/style/index.css +46 -45
  196. package/es/transfer/style/index.scss +4 -1
  197. package/es/transfer/style/token.scss +199 -0
  198. package/es/tree/style/index.css +43 -36
  199. package/es/tree/style/index.scss +10 -0
  200. package/es/tree/style/token.scss +163 -0
  201. package/es/tree-select/style/index.css +9 -9
  202. package/es/tree-select/style/token.scss +21 -0
  203. package/es/trigger/style/index.css +7 -7
  204. package/es/trigger/style/token.scss +19 -0
  205. package/es/typography/style/index.css +40 -40
  206. package/es/typography/style/token.scss +220 -0
  207. package/es/upload/index.d.ts +3 -0
  208. package/es/upload/style/index.css +95 -95
  209. package/es/upload/style/token.scss +470 -0
  210. package/es/upload/upload.vue.d.ts +2 -0
  211. package/es/upload/upload.vue_vue_type_script_setup_true_lang.js +109 -16
  212. package/json/vetur-attributes.json +7 -0
  213. package/json/vetur-tags.json +4 -1
  214. package/json/web-types.json +18 -2
  215. package/package.json +7 -2
  216. package/es/style/color/palette-dark.d.ts +0 -4
  217. package/es/style/color/palette-dark.js +0 -10
  218. package/es/style/color/palette.d.ts +0 -4
  219. package/es/style/color/palette.js +0 -10
package/es/button/style/index.css CHANGED
@@ -27,7 +27,7 @@
27
27
  align-items: center;
28
28
  justify-content: center;
29
29
  box-sizing: border-box;
30
- font-weight: 400;
30
+ font-weight: var(--component-button-btn-font-weight, var(--component-button-font-weight, var(--font-weight-400, 400)));
31
31
  line-height: 1.5715;
32
32
  white-space: nowrap;
33
33
  outline: none;
@@ -88,7 +88,7 @@
88
88
  inset: -1px;
89
89
  z-index: 1;
90
90
  display: block;
91
- background: #fff;
91
+ background: var(--component-button-btn-color-loading-mask, var(--component-button-color-loading-mask, var(--sd-color-bg-2)));
92
92
  border-radius: inherit;
93
93
  opacity: 0.4;
94
94
  transition: opacity 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
@@ -103,790 +103,790 @@
103
103
  .sd-btn-outline,
104
104
  .sd-btn-outline[type=button],
105
105
  .sd-btn-outline[type=submit] {
106
- color: rgb(var(--sd-primary-6));
107
- background-color: transparent;
108
- border: 1px solid rgb(var(--sd-primary-6));
106
+ color: var(--component-button-btn-outline-color-text, var(--component-button-outline-color-text, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
107
+ background-color: var(--component-button-btn-outline-color-bg, var(--component-button-outline-color-bg, var(--color-transparent, var(--sd-color-transparent, transparent))));
108
+ border: var(--component-button-btn-size-default-border-width, var(--component-button-size-default-border-width, var(--component-button-btn-border-width, var(--component-button-border-width, var(--border-1, 1px))))) var(--component-button-btn-outline-border-style, var(--component-button-outline-border-style, var(--border-solid, solid))) var(--component-button-btn-outline-color-border, var(--component-button-outline-color-border, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
109
109
  }
110
110
  .sd-btn-outline:hover,
111
111
  .sd-btn-outline[type=button]:hover,
112
112
  .sd-btn-outline[type=submit]:hover {
113
- color: rgb(var(--sd-primary-5));
114
- background-color: transparent;
115
- border-color: rgb(var(--sd-primary-5));
113
+ color: var(--component-button-btn-outline-color-text-hover, var(--component-button-outline-color-text-hover, var(--color-primary-5, var(--sd-color-primary-5, rgb(var(--sd-primary-5))))));
114
+ background-color: var(--component-button-btn-outline-color-bg-hover, var(--component-button-outline-color-bg-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
115
+ border-color: var(--component-button-btn-outline-color-border-hover, var(--component-button-outline-color-border-hover, var(--color-primary-5, var(--sd-color-primary-5, rgb(var(--sd-primary-5))))));
116
116
  }
117
117
  .sd-btn-outline:focus-visible,
118
118
  .sd-btn-outline[type=button]:focus-visible,
119
119
  .sd-btn-outline[type=submit]:focus-visible {
120
- box-shadow: 0 0 0 0.25em rgb(var(--sd-primary-3));
120
+ box-shadow: 0 0 0 var(--component-button-btn-box-shadow-radius, var(--component-button-box-shadow-radius, 0.25em)) var(--component-button-btn-outline-color-box-shadow, var(--component-button-outline-color-box-shadow, var(--color-primary-3, var(--sd-color-primary-3, rgb(var(--sd-primary-3))))));
121
121
  }
122
122
  .sd-btn-outline:active,
123
123
  .sd-btn-outline[type=button]:active,
124
124
  .sd-btn-outline[type=submit]:active {
125
- color: rgb(var(--sd-primary-7));
126
- background-color: transparent;
127
- border-color: rgb(var(--sd-primary-7));
125
+ color: var(--component-button-btn-outline-color-text-active, var(--component-button-outline-color-text-active, var(--color-primary-7, var(--sd-color-primary-7, rgb(var(--sd-primary-7))))));
126
+ background-color: var(--component-button-btn-outline-color-bg-active, var(--component-button-outline-color-bg-active, var(--color-transparent, var(--sd-color-transparent, transparent))));
127
+ border-color: var(--component-button-btn-outline-color-border-active, var(--component-button-outline-color-border-active, var(--color-primary-7, var(--sd-color-primary-7, rgb(var(--sd-primary-7))))));
128
128
  }
129
129
  .sd-btn-outline.sd-btn-loading,
130
130
  .sd-btn-outline[type=button].sd-btn-loading,
131
131
  .sd-btn-outline[type=submit].sd-btn-loading {
132
- color: rgb(var(--sd-primary-6));
133
- background-color: transparent;
134
- border: 1px solid rgb(var(--sd-primary-6));
132
+ color: var(--component-button-btn-outline-color-text, var(--component-button-outline-color-text, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
133
+ background-color: var(--component-button-btn-outline-color-bg, var(--component-button-outline-color-bg, var(--color-transparent, var(--sd-color-transparent, transparent))));
134
+ border: var(--component-button-btn-size-default-border-width, var(--component-button-size-default-border-width, var(--component-button-btn-border-width, var(--component-button-border-width, var(--border-1, 1px))))) var(--component-button-btn-outline-border-style, var(--component-button-outline-border-style, var(--border-solid, solid))) var(--component-button-btn-outline-color-border, var(--component-button-outline-color-border, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
135
135
  }
136
136
  .sd-btn-outline.sd-btn-disabled,
137
137
  .sd-btn-outline[type=button].sd-btn-disabled,
138
138
  .sd-btn-outline[type=submit].sd-btn-disabled {
139
- color: var(--sd-color-primary-light-3);
140
- background-color: transparent;
141
- border-color: var(--sd-color-primary-light-3);
139
+ color: var(--component-button-btn-outline-color-text-disabled, var(--component-button-outline-color-text-disabled, var(--sd-color-primary-light-3)));
140
+ background-color: var(--component-button-btn-outline-color-bg-disabled, var(--component-button-outline-color-bg-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
141
+ border-color: var(--component-button-btn-outline-color-border-disabled, var(--component-button-outline-color-border-disabled, var(--sd-color-primary-light-3)));
142
142
  cursor: not-allowed;
143
143
  }
144
144
 
145
145
  .sd-btn-outline.sd-btn-status-warning {
146
- color: rgb(var(--sd-warning-6));
147
- background-color: transparent;
148
- border-color: rgb(var(--sd-warning-6));
146
+ color: var(--component-button-btn-outline-color-text-warning, var(--component-button-outline-color-text-warning, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))));
147
+ background-color: var(--component-button-btn-outline-color-bg-warning, var(--component-button-outline-color-bg-warning, var(--color-transparent, var(--sd-color-transparent, transparent))));
148
+ border-color: var(--component-button-btn-outline-color-border-warning, var(--component-button-outline-color-border-warning, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))));
149
149
  }
150
150
  .sd-btn-outline.sd-btn-status-warning:hover {
151
- color: rgb(var(--sd-warning-5));
152
- background-color: transparent;
153
- border-color: rgb(var(--sd-warning-5));
151
+ color: var(--component-button-btn-outline-color-text-warning-hover, var(--component-button-outline-color-text-warning-hover, var(--color-warning-5, var(--sd-color-warning-5, rgb(var(--sd-warning-5))))));
152
+ background-color: var(--component-button-btn-outline-color-bg-warning-hover, var(--component-button-outline-color-bg-warning-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
153
+ border-color: var(--component-button-btn-outline-color-border-warning-hover, var(--component-button-outline-color-border-warning-hover, var(--color-warning-5, var(--sd-color-warning-5, rgb(var(--sd-warning-5))))));
154
154
  }
155
155
  .sd-btn-outline.sd-btn-status-warning:focus-visible {
156
- box-shadow: 0 0 0 0.25em rgb(var(--sd-warning-3));
156
+ box-shadow: 0 0 0 var(--component-button-btn-box-shadow-radius, var(--component-button-box-shadow-radius, 0.25em)) var(--component-button-btn-color-box-shadow-warning, var(--component-button-color-box-shadow-warning, var(--color-warning-3, var(--sd-color-warning-3, rgb(var(--sd-warning-3))))));
157
157
  }
158
158
  .sd-btn-outline.sd-btn-status-warning:active {
159
- color: rgb(var(--sd-warning-7));
160
- background-color: transparent;
161
- border-color: rgb(var(--sd-warning-7));
159
+ color: var(--component-button-btn-outline-color-text-warning-active, var(--component-button-outline-color-text-warning-active, var(--color-warning-7, var(--sd-color-warning-7, rgb(var(--sd-warning-7))))));
160
+ background-color: var(--component-button-btn-outline-color-bg-warning-active, var(--component-button-outline-color-bg-warning-active, var(--color-transparent, var(--sd-color-transparent, transparent))));
161
+ border-color: var(--component-button-btn-outline-color-border-warning-active, var(--component-button-outline-color-border-warning-active, var(--color-warning-7, var(--sd-color-warning-7, rgb(var(--sd-warning-7))))));
162
162
  }
163
163
  .sd-btn-outline.sd-btn-status-warning.sd-btn-loading {
164
- color: rgb(var(--sd-warning-6));
165
- background-color: transparent;
166
- border-color: rgb(var(--sd-warning-6));
164
+ color: var(--component-button-btn-outline-color-text-warning, var(--component-button-outline-color-text-warning, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))));
165
+ background-color: var(--component-button-btn-outline-color-bg-warning, var(--component-button-outline-color-bg-warning, var(--color-transparent, var(--sd-color-transparent, transparent))));
166
+ border-color: var(--component-button-btn-outline-color-border-warning, var(--component-button-outline-color-border-warning, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))));
167
167
  }
168
168
  .sd-btn-outline.sd-btn-status-warning.sd-btn-disabled {
169
- color: var(--sd-color-warning-light-3);
170
- background-color: transparent;
171
- border-color: var(--sd-color-warning-light-3);
169
+ color: var(--component-button-btn-outline-color-text-warning-disabled, var(--component-button-outline-color-text-warning-disabled, var(--sd-color-warning-light-3)));
170
+ background-color: var(--component-button-btn-outline-color-bg-warning-disabled, var(--component-button-outline-color-bg-warning-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
171
+ border-color: var(--component-button-btn-outline-color-border-warning-disabled, var(--component-button-outline-color-border-warning-disabled, var(--sd-color-warning-light-3)));
172
172
  }
173
173
 
174
174
  .sd-btn-outline.sd-btn-status-danger {
175
- color: rgb(var(--sd-danger-6));
176
- background-color: transparent;
177
- border-color: rgb(var(--sd-danger-6));
175
+ color: var(--component-button-btn-outline-color-text-danger, var(--component-button-outline-color-text-danger, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
176
+ background-color: var(--component-button-btn-outline-color-bg-danger, var(--component-button-outline-color-bg-danger, var(--color-transparent, var(--sd-color-transparent, transparent))));
177
+ border-color: var(--component-button-btn-outline-color-border-danger, var(--component-button-outline-color-border-danger, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
178
178
  }
179
179
  .sd-btn-outline.sd-btn-status-danger:hover {
180
- color: rgb(var(--sd-danger-5));
181
- background-color: transparent;
182
- border-color: rgb(var(--sd-danger-5));
180
+ color: var(--component-button-btn-outline-color-text-danger-hover, var(--component-button-outline-color-text-danger-hover, var(--color-danger-5, var(--sd-color-danger-5, rgb(var(--sd-danger-5))))));
181
+ background-color: var(--component-button-btn-outline-color-bg-danger-hover, var(--component-button-outline-color-bg-danger-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
182
+ border-color: var(--component-button-btn-outline-color-border-danger-hover, var(--component-button-outline-color-border-danger-hover, var(--color-danger-5, var(--sd-color-danger-5, rgb(var(--sd-danger-5))))));
183
183
  }
184
184
  .sd-btn-outline.sd-btn-status-danger:focus-visible {
185
- box-shadow: 0 0 0 0.25em rgb(var(--sd-danger-3));
185
+ box-shadow: 0 0 0 var(--component-button-btn-box-shadow-radius, var(--component-button-box-shadow-radius, 0.25em)) var(--component-button-btn-color-box-shadow-danger, var(--component-button-color-box-shadow-danger, var(--color-danger-3, var(--sd-color-danger-3, rgb(var(--sd-danger-3))))));
186
186
  }
187
187
  .sd-btn-outline.sd-btn-status-danger:active {
188
- color: rgb(var(--sd-danger-7));
189
- background-color: transparent;
190
- border-color: rgb(var(--sd-danger-7));
188
+ color: var(--component-button-btn-outline-color-text-danger-active, var(--component-button-outline-color-text-danger-active, var(--color-danger-7, var(--sd-color-danger-7, rgb(var(--sd-danger-7))))));
189
+ background-color: var(--component-button-btn-outline-color-bg-danger-active, var(--component-button-outline-color-bg-danger-active, var(--color-transparent, var(--sd-color-transparent, transparent))));
190
+ border-color: var(--component-button-btn-outline-color-border-danger-active, var(--component-button-outline-color-border-danger-active, var(--color-danger-7, var(--sd-color-danger-7, rgb(var(--sd-danger-7))))));
191
191
  }
192
192
  .sd-btn-outline.sd-btn-status-danger.sd-btn-loading {
193
- color: rgb(var(--sd-danger-6));
194
- background-color: transparent;
195
- border-color: rgb(var(--sd-danger-6));
193
+ color: var(--component-button-btn-outline-color-text-danger, var(--component-button-outline-color-text-danger, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
194
+ background-color: var(--component-button-btn-outline-color-bg-danger, var(--component-button-outline-color-bg-danger, var(--color-transparent, var(--sd-color-transparent, transparent))));
195
+ border-color: var(--component-button-btn-outline-color-border-danger, var(--component-button-outline-color-border-danger, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
196
196
  }
197
197
  .sd-btn-outline.sd-btn-status-danger.sd-btn-disabled {
198
- color: var(--sd-color-danger-light-3);
199
- background-color: transparent;
200
- border-color: var(--sd-color-danger-light-3);
198
+ color: var(--component-button-btn-outline-color-text-danger-disabled, var(--component-button-outline-color-text-danger-disabled, var(--sd-color-danger-light-3)));
199
+ background-color: var(--component-button-btn-outline-color-bg-danger-disabled, var(--component-button-outline-color-bg-danger-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
200
+ border-color: var(--component-button-btn-outline-color-border-danger-disabled, var(--component-button-outline-color-border-danger-disabled, var(--sd-color-danger-light-3)));
201
201
  }
202
202
 
203
203
  .sd-btn-outline.sd-btn-status-success {
204
- color: rgb(var(--sd-success-6));
205
- background-color: transparent;
206
- border-color: rgb(var(--sd-success-6));
204
+ color: var(--component-button-btn-outline-color-text-success, var(--component-button-outline-color-text-success, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
205
+ background-color: var(--component-button-btn-outline-color-bg-success, var(--component-button-outline-color-bg-success, var(--color-transparent, var(--sd-color-transparent, transparent))));
206
+ border-color: var(--component-button-btn-outline-color-border-success, var(--component-button-outline-color-border-success, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
207
207
  }
208
208
  .sd-btn-outline.sd-btn-status-success:hover {
209
- color: rgb(var(--sd-success-5));
210
- background-color: transparent;
211
- border-color: rgb(var(--sd-success-5));
209
+ color: var(--component-button-btn-outline-color-text-success-hover, var(--component-button-outline-color-text-success-hover, var(--color-success-5, var(--sd-color-success-5, rgb(var(--sd-success-5))))));
210
+ background-color: var(--component-button-btn-outline-color-bg-success-hover, var(--component-button-outline-color-bg-success-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
211
+ border-color: var(--component-button-btn-outline-color-border-success-hover, var(--component-button-outline-color-border-success-hover, var(--color-success-5, var(--sd-color-success-5, rgb(var(--sd-success-5))))));
212
212
  }
213
213
  .sd-btn-outline.sd-btn-status-success:focus-visible {
214
- box-shadow: 0 0 0 0.25em rgb(var(--sd-success-3));
214
+ box-shadow: 0 0 0 var(--component-button-btn-box-shadow-radius, var(--component-button-box-shadow-radius, 0.25em)) var(--component-button-btn-color-box-shadow-success, var(--component-button-color-box-shadow-success, var(--color-success-3, var(--sd-color-success-3, rgb(var(--sd-success-3))))));
215
215
  }
216
216
  .sd-btn-outline.sd-btn-status-success:active {
217
- color: rgb(var(--sd-success-7));
218
- background-color: transparent;
219
- border-color: rgb(var(--sd-success-7));
217
+ color: var(--component-button-btn-outline-color-text-success-active, var(--component-button-outline-color-text-success-active, var(--color-success-7, var(--sd-color-success-7, rgb(var(--sd-success-7))))));
218
+ background-color: var(--component-button-btn-outline-color-bg-success-active, var(--component-button-outline-color-bg-success-active, var(--color-transparent, var(--sd-color-transparent, transparent))));
219
+ border-color: var(--component-button-btn-outline-color-border-success-active, var(--component-button-outline-color-border-success-active, var(--color-success-7, var(--sd-color-success-7, rgb(var(--sd-success-7))))));
220
220
  }
221
221
  .sd-btn-outline.sd-btn-status-success.sd-btn-loading {
222
- color: rgb(var(--sd-success-6));
223
- background-color: transparent;
224
- border-color: rgb(var(--sd-success-6));
222
+ color: var(--component-button-btn-outline-color-text-success, var(--component-button-outline-color-text-success, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
223
+ background-color: var(--component-button-btn-outline-color-bg-success, var(--component-button-outline-color-bg-success, var(--color-transparent, var(--sd-color-transparent, transparent))));
224
+ border-color: var(--component-button-btn-outline-color-border-success, var(--component-button-outline-color-border-success, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
225
225
  }
226
226
  .sd-btn-outline.sd-btn-status-success.sd-btn-disabled {
227
- color: var(--sd-color-success-light-3);
228
- background-color: transparent;
229
- border-color: var(--sd-color-success-light-3);
227
+ color: var(--component-button-btn-outline-color-text-success-disabled, var(--component-button-outline-color-text-success-disabled, var(--sd-color-success-light-3)));
228
+ background-color: var(--component-button-btn-outline-color-bg-success-disabled, var(--component-button-outline-color-bg-success-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
229
+ border-color: var(--component-button-btn-outline-color-border-success-disabled, var(--component-button-outline-color-border-success-disabled, var(--sd-color-success-light-3)));
230
230
  }
231
231
 
232
232
  .sd-btn-primary,
233
233
  .sd-btn-primary[type=button],
234
234
  .sd-btn-primary[type=submit] {
235
- color: #fff;
236
- background-color: rgb(var(--sd-primary-6));
237
- border: 1px solid transparent;
235
+ color: var(--component-button-btn-primary-color-text, var(--component-button-primary-color-text, #fff));
236
+ background-color: var(--component-button-btn-primary-color-bg, var(--component-button-primary-color-bg, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
237
+ border: var(--component-button-btn-size-default-border-width, var(--component-button-size-default-border-width, var(--component-button-btn-border-width, var(--component-button-border-width, var(--border-1, 1px))))) var(--component-button-btn-primary-border-style, var(--component-button-primary-border-style, var(--border-solid, solid))) var(--component-button-btn-primary-color-border, var(--component-button-primary-color-border, var(--color-transparent, var(--sd-color-transparent, transparent))));
238
238
  }
239
239
  .sd-btn-primary:hover,
240
240
  .sd-btn-primary[type=button]:hover,
241
241
  .sd-btn-primary[type=submit]:hover {
242
- color: #fff;
243
- background-color: rgb(var(--sd-primary-5));
244
- border-color: transparent;
242
+ color: var(--component-button-btn-primary-color-text-hover, var(--component-button-primary-color-text-hover, #fff));
243
+ background-color: var(--component-button-btn-primary-color-bg-hover, var(--component-button-primary-color-bg-hover, var(--color-primary-5, var(--sd-color-primary-5, rgb(var(--sd-primary-5))))));
244
+ border-color: var(--component-button-btn-primary-color-border-hover, var(--component-button-primary-color-border-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
245
245
  }
246
246
  .sd-btn-primary:focus-visible,
247
247
  .sd-btn-primary[type=button]:focus-visible,
248
248
  .sd-btn-primary[type=submit]:focus-visible {
249
- box-shadow: 0 0 0 0.25em rgb(var(--sd-primary-3));
249
+ box-shadow: 0 0 0 var(--component-button-btn-box-shadow-radius, var(--component-button-box-shadow-radius, 0.25em)) var(--component-button-btn-primary-color-box-shadow, var(--component-button-primary-color-box-shadow, var(--color-primary-3, var(--sd-color-primary-3, rgb(var(--sd-primary-3))))));
250
250
  }
251
251
  .sd-btn-primary:active,
252
252
  .sd-btn-primary[type=button]:active,
253
253
  .sd-btn-primary[type=submit]:active {
254
- color: #fff;
255
- background-color: rgb(var(--sd-primary-7));
256
- border-color: transparent;
254
+ color: var(--component-button-btn-primary-color-text-active, var(--component-button-primary-color-text-active, #fff));
255
+ background-color: var(--component-button-btn-primary-color-bg-active, var(--component-button-primary-color-bg-active, var(--color-primary-7, var(--sd-color-primary-7, rgb(var(--sd-primary-7))))));
256
+ border-color: var(--component-button-btn-primary-color-border-active, var(--component-button-primary-color-border-active, var(--color-transparent, var(--sd-color-transparent, transparent))));
257
257
  }
258
258
  .sd-btn-primary.sd-btn-loading,
259
259
  .sd-btn-primary[type=button].sd-btn-loading,
260
260
  .sd-btn-primary[type=submit].sd-btn-loading {
261
- color: #fff;
262
- background-color: rgb(var(--sd-primary-6));
263
- border: 1px solid transparent;
261
+ color: var(--component-button-btn-primary-color-text, var(--component-button-primary-color-text, #fff));
262
+ background-color: var(--component-button-btn-primary-color-bg, var(--component-button-primary-color-bg, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
263
+ border: var(--component-button-btn-size-default-border-width, var(--component-button-size-default-border-width, var(--component-button-btn-border-width, var(--component-button-border-width, var(--border-1, 1px))))) var(--component-button-btn-primary-border-style, var(--component-button-primary-border-style, var(--border-solid, solid))) var(--component-button-btn-primary-color-border, var(--component-button-primary-color-border, var(--color-transparent, var(--sd-color-transparent, transparent))));
264
264
  }
265
265
  .sd-btn-primary.sd-btn-disabled,
266
266
  .sd-btn-primary[type=button].sd-btn-disabled,
267
267
  .sd-btn-primary[type=submit].sd-btn-disabled {
268
268
  color: #fff;
269
- background-color: var(--sd-color-primary-light-3);
270
- border-color: transparent;
269
+ background-color: var(--component-button-btn-primary-color-bg-disabled, var(--component-button-primary-color-bg-disabled, var(--sd-color-primary-light-3)));
270
+ border-color: var(--component-button-btn-primary-color-border-disabled, var(--component-button-primary-color-border-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
271
271
  cursor: not-allowed;
272
272
  }
273
273
 
274
274
  .sd-btn-primary.sd-btn-status-warning {
275
- color: #fff;
276
- background-color: rgb(var(--sd-warning-6));
277
- border-color: transparent;
275
+ color: var(--component-button-btn-primary-color-text-warning, var(--component-button-primary-color-text-warning, #fff));
276
+ background-color: var(--component-button-btn-primary-color-bg-warning, var(--component-button-primary-color-bg-warning, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))));
277
+ border-color: var(--component-button-btn-primary-color-border-warning, var(--component-button-primary-color-border-warning, var(--color-transparent, var(--sd-color-transparent, transparent))));
278
278
  }
279
279
  .sd-btn-primary.sd-btn-status-warning:hover {
280
- color: #fff;
281
- background-color: rgb(var(--sd-warning-5));
282
- border-color: transparent;
280
+ color: var(--component-button-btn-primary-color-text-warning-hover, var(--component-button-primary-color-text-warning-hover, #fff));
281
+ background-color: var(--component-button-btn-primary-color-bg-warning-hover, var(--component-button-primary-color-bg-warning-hover, var(--color-warning-5, var(--sd-color-warning-5, rgb(var(--sd-warning-5))))));
282
+ border-color: var(--component-button-btn-primary-color-border-warning-hover, var(--component-button-primary-color-border-warning-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
283
283
  }
284
284
  .sd-btn-primary.sd-btn-status-warning:focus-visible {
285
- box-shadow: 0 0 0 0.25em rgb(var(--sd-warning-3));
285
+ box-shadow: 0 0 0 var(--component-button-btn-box-shadow-radius, var(--component-button-box-shadow-radius, 0.25em)) var(--component-button-btn-color-box-shadow-warning, var(--component-button-color-box-shadow-warning, var(--color-warning-3, var(--sd-color-warning-3, rgb(var(--sd-warning-3))))));
286
286
  }
287
287
  .sd-btn-primary.sd-btn-status-warning:active {
288
- color: #fff;
289
- background-color: rgb(var(--sd-warning-7));
290
- border-color: transparent;
288
+ color: var(--component-button-btn-primary-color-text-warning-active, var(--component-button-primary-color-text-warning-active, #fff));
289
+ background-color: var(--component-button-btn-primary-color-bg-warning-active, var(--component-button-primary-color-bg-warning-active, var(--color-warning-7, var(--sd-color-warning-7, rgb(var(--sd-warning-7))))));
290
+ border-color: var(--component-button-btn-primary-color-border-warning-active, var(--component-button-primary-color-border-warning-active, var(--color-transparent, var(--sd-color-transparent, transparent))));
291
291
  }
292
292
  .sd-btn-primary.sd-btn-status-warning.sd-btn-loading {
293
- color: #fff;
294
- background-color: rgb(var(--sd-warning-6));
295
- border-color: transparent;
293
+ color: var(--component-button-btn-primary-color-text-warning, var(--component-button-primary-color-text-warning, #fff));
294
+ background-color: var(--component-button-btn-primary-color-bg-warning, var(--component-button-primary-color-bg-warning, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))));
295
+ border-color: var(--component-button-btn-primary-color-border-warning, var(--component-button-primary-color-border-warning, var(--color-transparent, var(--sd-color-transparent, transparent))));
296
296
  }
297
297
  .sd-btn-primary.sd-btn-status-warning.sd-btn-disabled {
298
- color: #fff;
299
- background-color: var(--sd-color-warning-light-3);
300
- border-color: transparent;
298
+ color: var(--component-button-btn-primary-color-text-warning-disabled, var(--component-button-primary-color-text-warning-disabled, #fff));
299
+ background-color: var(--component-button-btn-primary-color-bg-warning-disabled, var(--component-button-primary-color-bg-warning-disabled, var(--sd-color-warning-light-3)));
300
+ border-color: var(--component-button-btn-primary-color-border-warning-disabled, var(--component-button-primary-color-border-warning-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
301
301
  }
302
302
 
303
303
  .sd-btn-primary.sd-btn-status-danger {
304
- color: #fff;
305
- background-color: rgb(var(--sd-danger-6));
306
- border-color: transparent;
304
+ color: var(--component-button-btn-primary-color-text-danger, var(--component-button-primary-color-text-danger, #fff));
305
+ background-color: var(--component-button-btn-primary-color-bg-danger, var(--component-button-primary-color-bg-danger, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
306
+ border-color: var(--component-button-btn-primary-color-border-danger, var(--component-button-primary-color-border-danger, var(--color-transparent, var(--sd-color-transparent, transparent))));
307
307
  }
308
308
  .sd-btn-primary.sd-btn-status-danger:hover {
309
- color: #fff;
310
- background-color: rgb(var(--sd-danger-5));
311
- border-color: transparent;
309
+ color: var(--component-button-btn-primary-color-text-danger-hover, var(--component-button-primary-color-text-danger-hover, #fff));
310
+ background-color: var(--component-button-btn-primary-color-bg-danger-hover, var(--component-button-primary-color-bg-danger-hover, var(--color-danger-5, var(--sd-color-danger-5, rgb(var(--sd-danger-5))))));
311
+ border-color: var(--component-button-btn-primary-color-border-danger-hover, var(--component-button-primary-color-border-danger-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
312
312
  }
313
313
  .sd-btn-primary.sd-btn-status-danger:focus-visible {
314
- box-shadow: 0 0 0 0.25em rgb(var(--sd-danger-3));
314
+ box-shadow: 0 0 0 var(--component-button-btn-box-shadow-radius, var(--component-button-box-shadow-radius, 0.25em)) var(--component-button-btn-color-box-shadow-danger, var(--component-button-color-box-shadow-danger, var(--color-danger-3, var(--sd-color-danger-3, rgb(var(--sd-danger-3))))));
315
315
  }
316
316
  .sd-btn-primary.sd-btn-status-danger:active {
317
- color: #fff;
318
- background-color: rgb(var(--sd-danger-7));
319
- border-color: transparent;
317
+ color: var(--component-button-btn-primary-color-text-danger-active, var(--component-button-primary-color-text-danger-active, #fff));
318
+ background-color: var(--component-button-btn-primary-color-bg-danger-active, var(--component-button-primary-color-bg-danger-active, var(--color-danger-7, var(--sd-color-danger-7, rgb(var(--sd-danger-7))))));
319
+ border-color: var(--component-button-btn-primary-color-border-danger-active, var(--component-button-primary-color-border-danger-active, var(--color-transparent, var(--sd-color-transparent, transparent))));
320
320
  }
321
321
  .sd-btn-primary.sd-btn-status-danger.sd-btn-loading {
322
- color: #fff;
323
- background-color: rgb(var(--sd-danger-6));
324
- border-color: transparent;
322
+ color: var(--component-button-btn-primary-color-text-danger, var(--component-button-primary-color-text-danger, #fff));
323
+ background-color: var(--component-button-btn-primary-color-bg-danger, var(--component-button-primary-color-bg-danger, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
324
+ border-color: var(--component-button-btn-primary-color-border-danger, var(--component-button-primary-color-border-danger, var(--color-transparent, var(--sd-color-transparent, transparent))));
325
325
  }
326
326
  .sd-btn-primary.sd-btn-status-danger.sd-btn-disabled {
327
- color: #fff;
328
- background-color: var(--sd-color-danger-light-3);
329
- border-color: transparent;
327
+ color: var(--component-button-btn-primary-color-text-danger-disabled, var(--component-button-primary-color-text-danger-disabled, #fff));
328
+ background-color: var(--component-button-btn-primary-color-bg-danger-disabled, var(--component-button-primary-color-bg-danger-disabled, var(--sd-color-danger-light-3)));
329
+ border-color: var(--component-button-btn-primary-color-border-danger-disabled, var(--component-button-primary-color-border-danger-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
330
330
  }
331
331
 
332
332
  .sd-btn-primary.sd-btn-status-success {
333
- color: #fff;
334
- background-color: rgb(var(--sd-success-6));
335
- border-color: transparent;
333
+ color: var(--component-button-btn-primary-color-text-success, var(--component-button-primary-color-text-success, #fff));
334
+ background-color: var(--component-button-btn-primary-color-bg-success, var(--component-button-primary-color-bg-success, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
335
+ border-color: var(--component-button-btn-primary-color-border-success, var(--component-button-primary-color-border-success, var(--color-transparent, var(--sd-color-transparent, transparent))));
336
336
  }
337
337
  .sd-btn-primary.sd-btn-status-success:hover {
338
- color: #fff;
339
- background-color: rgb(var(--sd-success-5));
340
- border-color: transparent;
338
+ color: var(--component-button-btn-primary-color-text-success-hover, var(--component-button-primary-color-text-success-hover, #fff));
339
+ background-color: var(--component-button-btn-primary-color-bg-success-hover, var(--component-button-primary-color-bg-success-hover, var(--color-success-5, var(--sd-color-success-5, rgb(var(--sd-success-5))))));
340
+ border-color: var(--component-button-btn-primary-color-border-success-hover, var(--component-button-primary-color-border-success-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
341
341
  }
342
342
  .sd-btn-primary.sd-btn-status-success:focus-visible {
343
- box-shadow: 0 0 0 0.25em rgb(var(--sd-success-3));
343
+ box-shadow: 0 0 0 var(--component-button-btn-box-shadow-radius, var(--component-button-box-shadow-radius, 0.25em)) var(--component-button-btn-color-box-shadow-success, var(--component-button-color-box-shadow-success, var(--color-success-3, var(--sd-color-success-3, rgb(var(--sd-success-3))))));
344
344
  }
345
345
  .sd-btn-primary.sd-btn-status-success:active {
346
- color: #fff;
347
- background-color: rgb(var(--sd-success-7));
348
- border-color: transparent;
346
+ color: var(--component-button-btn-primary-color-text-success-active, var(--component-button-primary-color-text-success-active, #fff));
347
+ background-color: var(--component-button-btn-primary-color-bg-success-active, var(--component-button-primary-color-bg-success-active, var(--color-success-7, var(--sd-color-success-7, rgb(var(--sd-success-7))))));
348
+ border-color: var(--component-button-btn-primary-color-border-success-active, var(--component-button-primary-color-border-success-active, var(--color-transparent, var(--sd-color-transparent, transparent))));
349
349
  }
350
350
  .sd-btn-primary.sd-btn-status-success.sd-btn-loading {
351
- color: #fff;
352
- background-color: rgb(var(--sd-success-6));
353
- border-color: transparent;
351
+ color: var(--component-button-btn-primary-color-text-success, var(--component-button-primary-color-text-success, #fff));
352
+ background-color: var(--component-button-btn-primary-color-bg-success, var(--component-button-primary-color-bg-success, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
353
+ border-color: var(--component-button-btn-primary-color-border-success, var(--component-button-primary-color-border-success, var(--color-transparent, var(--sd-color-transparent, transparent))));
354
354
  }
355
355
  .sd-btn-primary.sd-btn-status-success.sd-btn-disabled {
356
- color: #fff;
357
- background-color: var(--sd-color-success-light-3);
358
- border-color: transparent;
356
+ color: var(--component-button-btn-primary-color-text-success-disabled, var(--component-button-primary-color-text-success-disabled, #fff));
357
+ background-color: var(--component-button-btn-primary-color-bg-success-disabled, var(--component-button-primary-color-bg-success-disabled, var(--sd-color-success-light-3)));
358
+ border-color: var(--component-button-btn-primary-color-border-success-disabled, var(--component-button-primary-color-border-success-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
359
359
  }
360
360
 
361
361
  .sd-btn-secondary,
362
362
  .sd-btn-secondary[type=button],
363
363
  .sd-btn-secondary[type=submit] {
364
- color: var(--sd-color-text-2);
365
- background-color: var(--sd-color-secondary);
366
- border: 1px solid transparent;
364
+ color: var(--component-button-btn-secondary-color-text, var(--component-button-secondary-color-text, var(--sd-color-text-2)));
365
+ background-color: var(--component-button-btn-secondary-color-bg, var(--component-button-secondary-color-bg, var(--sd-color-secondary)));
366
+ border: var(--component-button-btn-size-default-border-width, var(--component-button-size-default-border-width, var(--component-button-btn-border-width, var(--component-button-border-width, var(--border-1, 1px))))) var(--component-button-btn-secondary-border-style, var(--component-button-secondary-border-style, var(--border-solid, solid))) var(--component-button-btn-secondary-color-border, var(--component-button-secondary-color-border, var(--color-transparent, var(--sd-color-transparent, transparent))));
367
367
  }
368
368
  .sd-btn-secondary:hover,
369
369
  .sd-btn-secondary[type=button]:hover,
370
370
  .sd-btn-secondary[type=submit]:hover {
371
- color: var(--sd-color-text-2);
372
- background-color: var(--sd-color-secondary-hover);
373
- border-color: transparent;
371
+ color: var(--component-button-btn-secondary-color-text-hover, var(--component-button-secondary-color-text-hover, var(--sd-color-text-2)));
372
+ background-color: var(--component-button-btn-secondary-color-bg-hover, var(--component-button-secondary-color-bg-hover, var(--sd-color-secondary-hover)));
373
+ border-color: var(--component-button-btn-secondary-color-border-hover, var(--component-button-secondary-color-border-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
374
374
  }
375
375
  .sd-btn-secondary:focus-visible,
376
376
  .sd-btn-secondary[type=button]:focus-visible,
377
377
  .sd-btn-secondary[type=submit]:focus-visible {
378
- box-shadow: 0 0 0 0.25em var(--sd-color-neutral-4);
378
+ box-shadow: 0 0 0 var(--component-button-btn-box-shadow-radius, var(--component-button-box-shadow-radius, 0.25em)) var(--component-button-btn-secondary-color-box-shadow, var(--component-button-secondary-color-box-shadow, var(--color-secondary-active, var(--sd-color-secondary-active, var(--sd-color-neutral-4)))));
379
379
  }
380
380
  .sd-btn-secondary:active,
381
381
  .sd-btn-secondary[type=button]:active,
382
382
  .sd-btn-secondary[type=submit]:active {
383
- color: var(--sd-color-text-2);
384
- background-color: var(--sd-color-secondary-active);
385
- border-color: transparent;
383
+ color: var(--component-button-btn-secondary-color-text-active, var(--component-button-secondary-color-text-active, var(--sd-color-text-2)));
384
+ background-color: var(--component-button-btn-secondary-color-bg-active, var(--component-button-secondary-color-bg-active, var(--sd-color-secondary-active)));
385
+ border-color: var(--component-button-btn-secondary-color-border-active, var(--component-button-secondary-color-border-active, var(--color-transparent, var(--sd-color-transparent, transparent))));
386
386
  }
387
387
  .sd-btn-secondary.sd-btn-loading,
388
388
  .sd-btn-secondary[type=button].sd-btn-loading,
389
389
  .sd-btn-secondary[type=submit].sd-btn-loading {
390
- color: var(--sd-color-text-2);
391
- background-color: var(--sd-color-secondary);
392
- border: 1px solid transparent;
390
+ color: var(--component-button-btn-secondary-color-text, var(--component-button-secondary-color-text, var(--sd-color-text-2)));
391
+ background-color: var(--component-button-btn-secondary-color-bg, var(--component-button-secondary-color-bg, var(--sd-color-secondary)));
392
+ border: var(--component-button-btn-size-default-border-width, var(--component-button-size-default-border-width, var(--component-button-btn-border-width, var(--component-button-border-width, var(--border-1, 1px))))) var(--component-button-btn-secondary-border-style, var(--component-button-secondary-border-style, var(--border-solid, solid))) var(--component-button-btn-secondary-color-border, var(--component-button-secondary-color-border, var(--color-transparent, var(--sd-color-transparent, transparent))));
393
393
  }
394
394
  .sd-btn-secondary.sd-btn-disabled,
395
395
  .sd-btn-secondary[type=button].sd-btn-disabled,
396
396
  .sd-btn-secondary[type=submit].sd-btn-disabled {
397
- color: var(--sd-color-text-4);
398
- background-color: var(--sd-color-secondary-disabled);
399
- border-color: transparent;
397
+ color: var(--component-button-btn-secondary-color-text-disabled, var(--component-button-secondary-color-text-disabled, var(--sd-color-text-4)));
398
+ background-color: var(--component-button-btn-secondary-color-bg-disabled, var(--component-button-secondary-color-bg-disabled, var(--sd-color-secondary-disabled)));
399
+ border-color: var(--component-button-btn-secondary-color-border-disabled, var(--component-button-secondary-color-border-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
400
400
  cursor: not-allowed;
401
401
  }
402
402
 
403
403
  .sd-btn-secondary.sd-btn-status-warning {
404
- color: rgb(var(--sd-warning-6));
405
- background-color: var(--sd-color-warning-light-1);
406
- border-color: transparent;
404
+ color: var(--component-button-btn-secondary-color-text-warning, var(--component-button-secondary-color-text-warning, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))));
405
+ background-color: var(--component-button-btn-secondary-color-bg-warning, var(--component-button-secondary-color-bg-warning, var(--sd-color-warning-light-1)));
406
+ border-color: var(--component-button-btn-secondary-color-border-warning, var(--component-button-secondary-color-border-warning, var(--color-transparent, var(--sd-color-transparent, transparent))));
407
407
  }
408
408
  .sd-btn-secondary.sd-btn-status-warning:hover {
409
- color: rgb(var(--sd-warning-6));
410
- background-color: var(--sd-color-warning-light-2);
411
- border-color: transparent;
409
+ color: var(--component-button-btn-secondary-color-text-warning-hover, var(--component-button-secondary-color-text-warning-hover, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))));
410
+ background-color: var(--component-button-btn-secondary-color-bg-warning-hover, var(--component-button-secondary-color-bg-warning-hover, var(--sd-color-warning-light-2)));
411
+ border-color: var(--component-button-btn-secondary-color-border-warning-hover, var(--component-button-secondary-color-border-warning-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
412
412
  }
413
413
  .sd-btn-secondary.sd-btn-status-warning:focus-visible {
414
- box-shadow: 0 0 0 0.25em rgb(var(--sd-warning-3));
414
+ box-shadow: 0 0 0 var(--component-button-btn-box-shadow-radius, var(--component-button-box-shadow-radius, 0.25em)) var(--component-button-btn-color-box-shadow-warning, var(--component-button-color-box-shadow-warning, var(--color-warning-3, var(--sd-color-warning-3, rgb(var(--sd-warning-3))))));
415
415
  }
416
416
  .sd-btn-secondary.sd-btn-status-warning:active {
417
- color: rgb(var(--sd-warning-6));
418
- background-color: var(--sd-color-warning-light-3);
419
- border-color: transparent;
417
+ color: var(--component-button-btn-secondary-color-text-warning-active, var(--component-button-secondary-color-text-warning-active, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))));
418
+ background-color: var(--component-button-btn-secondary-color-bg-warning-active, var(--component-button-secondary-color-bg-warning-active, var(--sd-color-warning-light-3)));
419
+ border-color: var(--component-button-btn-secondary-color-border-warning-active, var(--component-button-secondary-color-border-warning-active, var(--color-transparent, var(--sd-color-transparent, transparent))));
420
420
  }
421
421
  .sd-btn-secondary.sd-btn-status-warning.sd-btn-loading {
422
- color: rgb(var(--sd-warning-6));
423
- background-color: var(--sd-color-warning-light-1);
424
- border-color: transparent;
422
+ color: var(--component-button-btn-secondary-color-text-warning, var(--component-button-secondary-color-text-warning, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))));
423
+ background-color: var(--component-button-btn-secondary-color-bg-warning, var(--component-button-secondary-color-bg-warning, var(--sd-color-warning-light-1)));
424
+ border-color: var(--component-button-btn-secondary-color-border-warning, var(--component-button-secondary-color-border-warning, var(--color-transparent, var(--sd-color-transparent, transparent))));
425
425
  }
426
426
  .sd-btn-secondary.sd-btn-status-warning.sd-btn-disabled {
427
- color: var(--sd-color-warning-light-3);
428
- background-color: var(--sd-color-warning-light-1);
429
- border-color: transparent;
427
+ color: var(--component-button-btn-secondary-color-text-warning-disabled, var(--component-button-secondary-color-text-warning-disabled, var(--sd-color-warning-light-3)));
428
+ background-color: var(--component-button-btn-secondary-color-bg-warning-disabled, var(--component-button-secondary-color-bg-warning-disabled, var(--sd-color-warning-light-1)));
429
+ border-color: var(--component-button-btn-secondary-color-border-warning-disabled, var(--component-button-secondary-color-border-warning-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
430
430
  }
431
431
 
432
432
  .sd-btn-secondary.sd-btn-status-danger {
433
- color: rgb(var(--sd-danger-6));
434
- background-color: var(--sd-color-danger-light-1);
435
- border-color: transparent;
433
+ color: var(--component-button-btn-secondary-color-text-danger, var(--component-button-secondary-color-text-danger, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
434
+ background-color: var(--component-button-btn-secondary-color-bg-danger, var(--component-button-secondary-color-bg-danger, var(--sd-color-danger-light-1)));
435
+ border-color: var(--component-button-btn-secondary-color-border-danger, var(--component-button-secondary-color-border-danger, var(--color-transparent, var(--sd-color-transparent, transparent))));
436
436
  }
437
437
  .sd-btn-secondary.sd-btn-status-danger:hover {
438
- color: rgb(var(--sd-danger-6));
439
- background-color: var(--sd-color-danger-light-2);
440
- border-color: transparent;
438
+ color: var(--component-button-btn-secondary-color-text-danger-hover, var(--component-button-secondary-color-text-danger-hover, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
439
+ background-color: var(--component-button-btn-secondary-color-bg-danger-hover, var(--component-button-secondary-color-bg-danger-hover, var(--sd-color-danger-light-2)));
440
+ border-color: var(--component-button-btn-secondary-color-border-danger-hover, var(--component-button-secondary-color-border-danger-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
441
441
  }
442
442
  .sd-btn-secondary.sd-btn-status-danger:focus-visible {
443
- box-shadow: 0 0 0 0.25em rgb(var(--sd-danger-3));
443
+ box-shadow: 0 0 0 var(--component-button-btn-box-shadow-radius, var(--component-button-box-shadow-radius, 0.25em)) var(--component-button-btn-color-box-shadow-danger, var(--component-button-color-box-shadow-danger, var(--color-danger-3, var(--sd-color-danger-3, rgb(var(--sd-danger-3))))));
444
444
  }
445
445
  .sd-btn-secondary.sd-btn-status-danger:active {
446
- color: rgb(var(--sd-danger-6));
447
- background-color: var(--sd-color-danger-light-3);
448
- border-color: transparent;
446
+ color: var(--component-button-btn-secondary-color-text-danger-active, var(--component-button-secondary-color-text-danger-active, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
447
+ background-color: var(--component-button-btn-secondary-color-bg-danger-active, var(--component-button-secondary-color-bg-danger-active, var(--sd-color-danger-light-3)));
448
+ border-color: var(--component-button-btn-secondary-color-border-danger-active, var(--component-button-secondary-color-border-danger-active, var(--color-transparent, var(--sd-color-transparent, transparent))));
449
449
  }
450
450
  .sd-btn-secondary.sd-btn-status-danger.sd-btn-loading {
451
- color: rgb(var(--sd-danger-6));
452
- background-color: var(--sd-color-danger-light-1);
453
- border-color: transparent;
451
+ color: var(--component-button-btn-secondary-color-text-danger, var(--component-button-secondary-color-text-danger, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
452
+ background-color: var(--component-button-btn-secondary-color-bg-danger, var(--component-button-secondary-color-bg-danger, var(--sd-color-danger-light-1)));
453
+ border-color: var(--component-button-btn-secondary-color-border-danger, var(--component-button-secondary-color-border-danger, var(--color-transparent, var(--sd-color-transparent, transparent))));
454
454
  }
455
455
  .sd-btn-secondary.sd-btn-status-danger.sd-btn-disabled {
456
- color: var(--sd-color-danger-light-3);
457
- background-color: var(--sd-color-danger-light-1);
458
- border-color: transparent;
456
+ color: var(--component-button-btn-secondary-color-text-danger-disabled, var(--component-button-secondary-color-text-danger-disabled, var(--sd-color-danger-light-3)));
457
+ background-color: var(--component-button-btn-secondary-color-bg-danger-disabled, var(--component-button-secondary-color-bg-danger-disabled, var(--sd-color-danger-light-1)));
458
+ border-color: var(--component-button-btn-secondary-color-border-danger-disabled, var(--component-button-secondary-color-border-danger-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
459
459
  }
460
460
 
461
461
  .sd-btn-secondary.sd-btn-status-success {
462
- color: rgb(var(--sd-success-6));
463
- background-color: var(--sd-color-success-light-1);
464
- border-color: transparent;
462
+ color: var(--component-button-btn-secondary-color-text-success, var(--component-button-secondary-color-text-success, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
463
+ background-color: var(--component-button-btn-secondary-color-bg-success, var(--component-button-secondary-color-bg-success, var(--sd-color-success-light-1)));
464
+ border-color: var(--component-button-btn-secondary-color-border-success, var(--component-button-secondary-color-border-success, var(--color-transparent, var(--sd-color-transparent, transparent))));
465
465
  }
466
466
  .sd-btn-secondary.sd-btn-status-success:hover {
467
- color: rgb(var(--sd-success-6));
468
- background-color: var(--sd-color-success-light-2);
469
- border-color: transparent;
467
+ color: var(--component-button-btn-secondary-color-text-success-hover, var(--component-button-secondary-color-text-success-hover, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
468
+ background-color: var(--component-button-btn-secondary-color-bg-success-hover, var(--component-button-secondary-color-bg-success-hover, var(--sd-color-success-light-2)));
469
+ border-color: var(--component-button-btn-secondary-color-border-success-hover, var(--component-button-secondary-color-border-success-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
470
470
  }
471
471
  .sd-btn-secondary.sd-btn-status-success:focus-visible {
472
- box-shadow: 0 0 0 0.25em rgb(var(--sd-success-3));
472
+ box-shadow: 0 0 0 var(--component-button-btn-box-shadow-radius, var(--component-button-box-shadow-radius, 0.25em)) var(--component-button-btn-color-box-shadow-success, var(--component-button-color-box-shadow-success, var(--color-success-3, var(--sd-color-success-3, rgb(var(--sd-success-3))))));
473
473
  }
474
474
  .sd-btn-secondary.sd-btn-status-success:active {
475
- color: rgb(var(--sd-success-6));
476
- background-color: var(--sd-color-success-light-3);
477
- border-color: transparent;
475
+ color: var(--component-button-btn-secondary-color-text-success-active, var(--component-button-secondary-color-text-success-active, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
476
+ background-color: var(--component-button-btn-secondary-color-bg-success-active, var(--component-button-secondary-color-bg-success-active, var(--sd-color-success-light-3)));
477
+ border-color: var(--component-button-btn-secondary-color-border-success-active, var(--component-button-secondary-color-border-success-active, var(--color-transparent, var(--sd-color-transparent, transparent))));
478
478
  }
479
479
  .sd-btn-secondary.sd-btn-status-success.sd-btn-loading {
480
- color: rgb(var(--sd-success-6));
481
- background-color: var(--sd-color-success-light-1);
482
- border-color: transparent;
480
+ color: var(--component-button-btn-secondary-color-text-success, var(--component-button-secondary-color-text-success, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
481
+ background-color: var(--component-button-btn-secondary-color-bg-success, var(--component-button-secondary-color-bg-success, var(--sd-color-success-light-1)));
482
+ border-color: var(--component-button-btn-secondary-color-border-success, var(--component-button-secondary-color-border-success, var(--color-transparent, var(--sd-color-transparent, transparent))));
483
483
  }
484
484
  .sd-btn-secondary.sd-btn-status-success.sd-btn-disabled {
485
- color: var(--sd-color-success-light-3);
486
- background-color: var(--sd-color-success-light-1);
487
- border-color: transparent;
485
+ color: var(--component-button-btn-secondary-color-text-success-disabled, var(--component-button-secondary-color-text-success-disabled, var(--sd-color-success-light-3)));
486
+ background-color: var(--component-button-btn-secondary-color-bg-success-disabled, var(--component-button-secondary-color-bg-success-disabled, var(--sd-color-success-light-1)));
487
+ border-color: var(--component-button-btn-secondary-color-border-success-disabled, var(--component-button-secondary-color-border-success-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
488
488
  }
489
489
 
490
490
  .sd-btn-dashed,
491
491
  .sd-btn-dashed[type=button],
492
492
  .sd-btn-dashed[type=submit] {
493
- color: var(--sd-color-text-2);
494
- background-color: var(--sd-color-fill-2);
495
- border: 1px dashed var(--sd-color-neutral-3);
493
+ color: var(--component-button-btn-dashed-color-text, var(--component-button-dashed-color-text, var(--sd-color-text-2)));
494
+ background-color: var(--component-button-btn-dashed-color-bg, var(--component-button-dashed-color-bg, var(--sd-color-fill-2)));
495
+ border: var(--component-button-btn-size-default-border-width, var(--component-button-size-default-border-width, var(--component-button-btn-border-width, var(--component-button-border-width, var(--border-1, 1px))))) var(--component-button-btn-dashed-border-style, var(--component-button-dashed-border-style, var(--border-dashed, dashed))) var(--component-button-btn-dashed-color-border, var(--component-button-dashed-color-border, var(--sd-color-neutral-3)));
496
496
  }
497
497
  .sd-btn-dashed:hover,
498
498
  .sd-btn-dashed[type=button]:hover,
499
499
  .sd-btn-dashed[type=submit]:hover {
500
- color: var(--sd-color-text-2);
501
- background-color: var(--sd-color-fill-3);
502
- border-color: var(--sd-color-neutral-4);
500
+ color: var(--component-button-btn-dashed-color-text-hover, var(--component-button-dashed-color-text-hover, var(--sd-color-text-2)));
501
+ background-color: var(--component-button-btn-dashed-color-bg-hover, var(--component-button-dashed-color-bg-hover, var(--sd-color-fill-3)));
502
+ border-color: var(--component-button-btn-dashed-color-border-hover, var(--component-button-dashed-color-border-hover, var(--sd-color-neutral-4)));
503
503
  }
504
504
  .sd-btn-dashed:focus-visible,
505
505
  .sd-btn-dashed[type=button]:focus-visible,
506
506
  .sd-btn-dashed[type=submit]:focus-visible {
507
- box-shadow: 0 0 0 0.25em var(--sd-color-neutral-4);
507
+ box-shadow: 0 0 0 var(--component-button-btn-box-shadow-radius, var(--component-button-box-shadow-radius, 0.25em)) var(--component-button-btn-dashed-color-box-shadow, var(--component-button-dashed-color-box-shadow, var(--color-secondary-active, var(--sd-color-secondary-active, var(--sd-color-neutral-4)))));
508
508
  }
509
509
  .sd-btn-dashed:active,
510
510
  .sd-btn-dashed[type=button]:active,
511
511
  .sd-btn-dashed[type=submit]:active {
512
- color: var(--sd-color-text-2);
513
- background-color: var(--sd-color-fill-4);
514
- border-color: var(--sd-color-neutral-5);
512
+ color: var(--component-button-btn-dashed-color-text-active, var(--component-button-dashed-color-text-active, var(--sd-color-text-2)));
513
+ background-color: var(--component-button-btn-dashed-color-bg-active, var(--component-button-dashed-color-bg-active, var(--sd-color-fill-4)));
514
+ border-color: var(--component-button-btn-dashed-color-border-active, var(--component-button-dashed-color-border-active, var(--sd-color-neutral-5)));
515
515
  }
516
516
  .sd-btn-dashed.sd-btn-loading,
517
517
  .sd-btn-dashed[type=button].sd-btn-loading,
518
518
  .sd-btn-dashed[type=submit].sd-btn-loading {
519
- color: var(--sd-color-text-2);
520
- background-color: var(--sd-color-fill-2);
521
- border: 1px dashed var(--sd-color-neutral-3);
519
+ color: var(--component-button-btn-dashed-color-text, var(--component-button-dashed-color-text, var(--sd-color-text-2)));
520
+ background-color: var(--component-button-btn-dashed-color-bg, var(--component-button-dashed-color-bg, var(--sd-color-fill-2)));
521
+ border: var(--component-button-btn-size-default-border-width, var(--component-button-size-default-border-width, var(--component-button-btn-border-width, var(--component-button-border-width, var(--border-1, 1px))))) var(--component-button-btn-dashed-border-style, var(--component-button-dashed-border-style, var(--border-dashed, dashed))) var(--component-button-btn-dashed-color-border, var(--component-button-dashed-color-border, var(--sd-color-neutral-3)));
522
522
  }
523
523
  .sd-btn-dashed.sd-btn-disabled,
524
524
  .sd-btn-dashed[type=button].sd-btn-disabled,
525
525
  .sd-btn-dashed[type=submit].sd-btn-disabled {
526
- color: var(--sd-color-text-4);
527
- background-color: var(--sd-color-fill-2);
528
- border-color: var(--sd-color-neutral-3);
526
+ color: var(--component-button-btn-dashed-color-text-disabled, var(--component-button-dashed-color-text-disabled, var(--sd-color-text-4)));
527
+ background-color: var(--component-button-btn-dashed-color-bg-disabled, var(--component-button-dashed-color-bg-disabled, var(--sd-color-fill-2)));
528
+ border-color: var(--component-button-btn-dashed-color-border-disabled, var(--component-button-dashed-color-border-disabled, var(--sd-color-neutral-3)));
529
529
  cursor: not-allowed;
530
530
  }
531
531
 
532
532
  .sd-btn-dashed.sd-btn-status-warning {
533
- color: rgb(var(--sd-warning-6));
534
- background-color: var(--sd-color-warning-light-1);
535
- border-color: var(--sd-color-warning-light-2);
533
+ color: var(--component-button-btn-dashed-color-text-warning, var(--component-button-dashed-color-text-warning, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))));
534
+ background-color: var(--component-button-btn-dashed-color-bg-warning, var(--component-button-dashed-color-bg-warning, var(--sd-color-warning-light-1)));
535
+ border-color: var(--component-button-btn-dashed-color-border-warning, var(--component-button-dashed-color-border-warning, var(--sd-color-warning-light-2)));
536
536
  }
537
537
  .sd-btn-dashed.sd-btn-status-warning:hover {
538
- color: rgb(var(--sd-warning-6));
539
- background-color: var(--sd-color-warning-light-2);
540
- border-color: var(--sd-color-warning-light-3);
538
+ color: var(--component-button-btn-dashed-color-text-warning-hover, var(--component-button-dashed-color-text-warning-hover, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))));
539
+ background-color: var(--component-button-btn-dashed-color-bg-warning-hover, var(--component-button-dashed-color-bg-warning-hover, var(--sd-color-warning-light-2)));
540
+ border-color: var(--component-button-btn-dashed-color-border-warning-hover, var(--component-button-dashed-color-border-warning-hover, var(--sd-color-warning-light-3)));
541
541
  }
542
542
  .sd-btn-dashed.sd-btn-status-warning:focus-visible {
543
- box-shadow: 0 0 0 0.25em rgb(var(--sd-warning-3));
543
+ box-shadow: 0 0 0 var(--component-button-btn-box-shadow-radius, var(--component-button-box-shadow-radius, 0.25em)) var(--component-button-btn-color-box-shadow-warning, var(--component-button-color-box-shadow-warning, var(--color-warning-3, var(--sd-color-warning-3, rgb(var(--sd-warning-3))))));
544
544
  }
545
545
  .sd-btn-dashed.sd-btn-status-warning:active {
546
- color: rgb(var(--sd-warning-6));
547
- background-color: var(--sd-color-warning-light-3);
548
- border-color: var(--sd-color-warning-light-4);
546
+ color: var(--component-button-btn-dashed-color-text-warning-active, var(--component-button-dashed-color-text-warning-active, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))));
547
+ background-color: var(--component-button-btn-dashed-color-bg-warning-active, var(--component-button-dashed-color-bg-warning-active, var(--sd-color-warning-light-3)));
548
+ border-color: var(--component-button-btn-dashed-color-border-warning-active, var(--component-button-dashed-color-border-warning-active, var(--sd-color-warning-light-4)));
549
549
  }
550
550
  .sd-btn-dashed.sd-btn-status-warning.sd-btn-loading {
551
- color: rgb(var(--sd-warning-6));
552
- background-color: var(--sd-color-warning-light-1);
553
- border-color: var(--sd-color-warning-light-2);
551
+ color: var(--component-button-btn-dashed-color-text-warning, var(--component-button-dashed-color-text-warning, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))));
552
+ background-color: var(--component-button-btn-dashed-color-bg-warning, var(--component-button-dashed-color-bg-warning, var(--sd-color-warning-light-1)));
553
+ border-color: var(--component-button-btn-dashed-color-border-warning, var(--component-button-dashed-color-border-warning, var(--sd-color-warning-light-2)));
554
554
  }
555
555
  .sd-btn-dashed.sd-btn-status-warning.sd-btn-disabled {
556
- color: var(--sd-color-warning-light-3);
557
- background-color: var(--sd-color-warning-light-1);
558
- border-color: var(--sd-color-warning-light-2);
556
+ color: var(--component-button-btn-dashed-color-text-warning-disabled, var(--component-button-dashed-color-text-warning-disabled, var(--sd-color-warning-light-3)));
557
+ background-color: var(--component-button-btn-dashed-color-bg-warning-disabled, var(--component-button-dashed-color-bg-warning-disabled, var(--sd-color-warning-light-1)));
558
+ border-color: var(--component-button-btn-dashed-color-border-warning-disabled, var(--component-button-dashed-color-border-warning-disabled, var(--sd-color-warning-light-2)));
559
559
  }
560
560
 
561
561
  .sd-btn-dashed.sd-btn-status-danger {
562
- color: rgb(var(--sd-danger-6));
563
- background-color: var(--sd-color-danger-light-1);
564
- border-color: var(--sd-color-danger-light-2);
562
+ color: var(--component-button-btn-dashed-color-text-danger, var(--component-button-dashed-color-text-danger, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
563
+ background-color: var(--component-button-btn-dashed-color-bg-danger, var(--component-button-dashed-color-bg-danger, var(--sd-color-danger-light-1)));
564
+ border-color: var(--component-button-btn-dashed-color-border-danger, var(--component-button-dashed-color-border-danger, var(--sd-color-danger-light-2)));
565
565
  }
566
566
  .sd-btn-dashed.sd-btn-status-danger:hover {
567
- color: rgb(var(--sd-danger-6));
568
- background-color: var(--sd-color-danger-light-2);
569
- border-color: var(--sd-color-danger-light-3);
567
+ color: var(--component-button-btn-dashed-color-text-danger-hover, var(--component-button-dashed-color-text-danger-hover, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
568
+ background-color: var(--component-button-btn-dashed-color-bg-danger-hover, var(--component-button-dashed-color-bg-danger-hover, var(--sd-color-danger-light-2)));
569
+ border-color: var(--component-button-btn-dashed-color-border-danger-hover, var(--component-button-dashed-color-border-danger-hover, var(--sd-color-danger-light-3)));
570
570
  }
571
571
  .sd-btn-dashed.sd-btn-status-danger:focus-visible {
572
- box-shadow: 0 0 0 0.25em rgb(var(--sd-danger-3));
572
+ box-shadow: 0 0 0 var(--component-button-btn-box-shadow-radius, var(--component-button-box-shadow-radius, 0.25em)) var(--component-button-btn-color-box-shadow-danger, var(--component-button-color-box-shadow-danger, var(--color-danger-3, var(--sd-color-danger-3, rgb(var(--sd-danger-3))))));
573
573
  }
574
574
  .sd-btn-dashed.sd-btn-status-danger:active {
575
- color: rgb(var(--sd-danger-6));
576
- background-color: var(--sd-color-danger-light-3);
577
- border-color: var(--sd-color-danger-light-4);
575
+ color: var(--component-button-btn-dashed-color-text-danger-active, var(--component-button-dashed-color-text-danger-active, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
576
+ background-color: var(--component-button-btn-dashed-color-bg-danger-active, var(--component-button-dashed-color-bg-danger-active, var(--sd-color-danger-light-3)));
577
+ border-color: var(--component-button-btn-dashed-color-border-danger-active, var(--component-button-dashed-color-border-danger-active, var(--sd-color-danger-light-4)));
578
578
  }
579
579
  .sd-btn-dashed.sd-btn-status-danger.sd-btn-loading {
580
- color: rgb(var(--sd-danger-6));
581
- background-color: var(--sd-color-danger-light-1);
582
- border-color: var(--sd-color-danger-light-2);
580
+ color: var(--component-button-btn-dashed-color-text-danger, var(--component-button-dashed-color-text-danger, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
581
+ background-color: var(--component-button-btn-dashed-color-bg-danger, var(--component-button-dashed-color-bg-danger, var(--sd-color-danger-light-1)));
582
+ border-color: var(--component-button-btn-dashed-color-border-danger, var(--component-button-dashed-color-border-danger, var(--sd-color-danger-light-2)));
583
583
  }
584
584
  .sd-btn-dashed.sd-btn-status-danger.sd-btn-disabled {
585
- color: var(--sd-color-danger-light-3);
586
- background-color: var(--sd-color-danger-light-1);
587
- border-color: var(--sd-color-danger-light-2);
585
+ color: var(--component-button-btn-dashed-color-text-danger-disabled, var(--component-button-dashed-color-text-danger-disabled, var(--sd-color-danger-light-3)));
586
+ background-color: var(--component-button-btn-dashed-color-bg-danger-disabled, var(--component-button-dashed-color-bg-danger-disabled, var(--sd-color-danger-light-1)));
587
+ border-color: var(--component-button-btn-dashed-color-border-danger-disabled, var(--component-button-dashed-color-border-danger-disabled, var(--sd-color-danger-light-2)));
588
588
  }
589
589
 
590
590
  .sd-btn-dashed.sd-btn-status-success {
591
- color: rgb(var(--sd-success-6));
592
- background-color: var(--sd-color-success-light-1);
593
- border-color: var(--sd-color-success-light-2);
591
+ color: var(--component-button-btn-dashed-color-text-success, var(--component-button-dashed-color-text-success, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
592
+ background-color: var(--component-button-btn-dashed-color-bg-success, var(--component-button-dashed-color-bg-success, var(--sd-color-success-light-1)));
593
+ border-color: var(--component-button-btn-dashed-color-border-success, var(--component-button-dashed-color-border-success, var(--sd-color-success-light-2)));
594
594
  }
595
595
  .sd-btn-dashed.sd-btn-status-success:hover {
596
- color: rgb(var(--sd-success-6));
597
- background-color: var(--sd-color-success-light-2);
598
- border-color: var(--sd-color-success-light-3);
596
+ color: var(--component-button-btn-dashed-color-text-success-hover, var(--component-button-dashed-color-text-success-hover, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
597
+ background-color: var(--component-button-btn-dashed-color-bg-success-hover, var(--component-button-dashed-color-bg-success-hover, var(--sd-color-success-light-2)));
598
+ border-color: var(--component-button-btn-dashed-color-border-success-hover, var(--component-button-dashed-color-border-success-hover, var(--sd-color-success-light-3)));
599
599
  }
600
600
  .sd-btn-dashed.sd-btn-status-success:focus-visible {
601
- box-shadow: 0 0 0 0.25em rgb(var(--sd-success-3));
601
+ box-shadow: 0 0 0 var(--component-button-btn-box-shadow-radius, var(--component-button-box-shadow-radius, 0.25em)) var(--component-button-btn-color-box-shadow-success, var(--component-button-color-box-shadow-success, var(--color-success-3, var(--sd-color-success-3, rgb(var(--sd-success-3))))));
602
602
  }
603
603
  .sd-btn-dashed.sd-btn-status-success:active {
604
- color: rgb(var(--sd-success-6));
605
- background-color: var(--sd-color-success-light-3);
606
- border-color: var(--sd-color-success-light-4);
604
+ color: var(--component-button-btn-dashed-color-text-success-active, var(--component-button-dashed-color-text-success-active, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
605
+ background-color: var(--component-button-btn-dashed-color-bg-success-active, var(--component-button-dashed-color-bg-success-active, var(--sd-color-success-light-3)));
606
+ border-color: var(--component-button-btn-dashed-color-border-success-active, var(--component-button-dashed-color-border-success-active, var(--sd-color-success-light-4)));
607
607
  }
608
608
  .sd-btn-dashed.sd-btn-status-success.sd-btn-loading {
609
- color: rgb(var(--sd-success-6));
610
- background-color: var(--sd-color-success-light-1);
611
- border-color: var(--sd-color-success-light-2);
609
+ color: var(--component-button-btn-dashed-color-text-success, var(--component-button-dashed-color-text-success, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
610
+ background-color: var(--component-button-btn-dashed-color-bg-success, var(--component-button-dashed-color-bg-success, var(--sd-color-success-light-1)));
611
+ border-color: var(--component-button-btn-dashed-color-border-success, var(--component-button-dashed-color-border-success, var(--sd-color-success-light-2)));
612
612
  }
613
613
  .sd-btn-dashed.sd-btn-status-success.sd-btn-disabled {
614
- color: var(--sd-color-success-light-3);
615
- background-color: var(--sd-color-success-light-1);
616
- border-color: var(--sd-color-success-light-2);
614
+ color: var(--component-button-btn-dashed-color-text-success-disabled, var(--component-button-dashed-color-text-success-disabled, var(--sd-color-success-light-3)));
615
+ background-color: var(--component-button-btn-dashed-color-bg-success-disabled, var(--component-button-dashed-color-bg-success-disabled, var(--sd-color-success-light-1)));
616
+ border-color: var(--component-button-btn-dashed-color-border-success-disabled, var(--component-button-dashed-color-border-success-disabled, var(--sd-color-success-light-2)));
617
617
  }
618
618
 
619
619
  .sd-btn-text,
620
620
  .sd-btn-text[type=button],
621
621
  .sd-btn-text[type=submit] {
622
- color: rgb(var(--sd-primary-6));
623
- background-color: transparent;
624
- border: 1px solid transparent;
622
+ color: var(--component-button-btn-text-color-text, var(--component-button-text-color-text, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
623
+ background-color: var(--component-button-btn-text-color-bg, var(--component-button-text-color-bg, var(--color-transparent, var(--sd-color-transparent, transparent))));
624
+ border: var(--component-button-btn-size-default-border-width, var(--component-button-size-default-border-width, var(--component-button-btn-border-width, var(--component-button-border-width, var(--border-1, 1px))))) var(--component-button-btn-text-border-style, var(--component-button-text-border-style, var(--border-solid, solid))) var(--component-button-btn-text-color-border, var(--component-button-text-color-border, var(--color-transparent, var(--sd-color-transparent, transparent))));
625
625
  }
626
626
  .sd-btn-text:hover,
627
627
  .sd-btn-text[type=button]:hover,
628
628
  .sd-btn-text[type=submit]:hover {
629
- color: rgb(var(--sd-primary-6));
630
- background-color: var(--sd-color-fill-2);
631
- border-color: transparent;
629
+ color: var(--component-button-btn-text-color-text-hover, var(--component-button-text-color-text-hover, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
630
+ background-color: var(--component-button-btn-text-color-bg-hover, var(--component-button-text-color-bg-hover, var(--sd-color-fill-2)));
631
+ border-color: var(--component-button-btn-text-color-border-hover, var(--component-button-text-color-border-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
632
632
  }
633
633
  .sd-btn-text:focus-visible,
634
634
  .sd-btn-text[type=button]:focus-visible,
635
635
  .sd-btn-text[type=submit]:focus-visible {
636
- box-shadow: 0 0 0 0.25em var(--sd-color-neutral-4);
636
+ box-shadow: 0 0 0 var(--component-button-btn-box-shadow-radius, var(--component-button-box-shadow-radius, 0.25em)) var(--component-button-btn-text-color-box-shadow, var(--component-button-text-color-box-shadow, var(--color-secondary-active, var(--sd-color-secondary-active, var(--sd-color-neutral-4)))));
637
637
  }
638
638
  .sd-btn-text:active,
639
639
  .sd-btn-text[type=button]:active,
640
640
  .sd-btn-text[type=submit]:active {
641
- color: rgb(var(--sd-primary-6));
642
- background-color: var(--sd-color-fill-3);
643
- border-color: transparent;
641
+ color: var(--component-button-btn-text-color-text-active, var(--component-button-text-color-text-active, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
642
+ background-color: var(--component-button-btn-text-color-bg-active, var(--component-button-text-color-bg-active, var(--sd-color-fill-3)));
643
+ border-color: var(--component-button-btn-text-color-border-active, var(--component-button-text-color-border-active, var(--color-transparent, var(--sd-color-transparent, transparent))));
644
644
  }
645
645
  .sd-btn-text.sd-btn-loading,
646
646
  .sd-btn-text[type=button].sd-btn-loading,
647
647
  .sd-btn-text[type=submit].sd-btn-loading {
648
- color: rgb(var(--sd-primary-6));
649
- background-color: transparent;
650
- border: 1px solid transparent;
648
+ color: var(--component-button-btn-text-color-text, var(--component-button-text-color-text, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
649
+ background-color: var(--component-button-btn-text-color-bg, var(--component-button-text-color-bg, var(--color-transparent, var(--sd-color-transparent, transparent))));
650
+ border: var(--component-button-btn-size-default-border-width, var(--component-button-size-default-border-width, var(--component-button-btn-border-width, var(--component-button-border-width, var(--border-1, 1px))))) var(--component-button-btn-text-border-style, var(--component-button-text-border-style, var(--border-solid, solid))) var(--component-button-btn-text-color-border, var(--component-button-text-color-border, var(--color-transparent, var(--sd-color-transparent, transparent))));
651
651
  }
652
652
  .sd-btn-text.sd-btn-disabled,
653
653
  .sd-btn-text[type=button].sd-btn-disabled,
654
654
  .sd-btn-text[type=submit].sd-btn-disabled {
655
- color: var(--sd-color-primary-light-3);
656
- background-color: transparent;
657
- border-color: transparent;
655
+ color: var(--component-button-btn-text-color-text-disabled, var(--component-button-text-color-text-disabled, var(--sd-color-primary-light-3)));
656
+ background-color: var(--component-button-btn-text-color-bg-disabled, var(--component-button-text-color-bg-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
657
+ border-color: var(--component-button-btn-text-color-border-disabled, var(--component-button-text-color-border-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
658
658
  cursor: not-allowed;
659
659
  }
660
660
 
661
661
  .sd-btn-text.sd-btn-status-warning {
662
- color: rgb(var(--sd-warning-6));
663
- background-color: transparent;
664
- border-color: transparent;
662
+ color: var(--component-button-btn-text-color-text-warning, var(--component-button-text-color-text-warning, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))));
663
+ background-color: var(--component-button-btn-text-color-bg-warning, var(--component-button-text-color-bg-warning, var(--color-transparent, var(--sd-color-transparent, transparent))));
664
+ border-color: var(--component-button-btn-text-color-border-warning, var(--component-button-text-color-border-warning, var(--color-transparent, var(--sd-color-transparent, transparent))));
665
665
  }
666
666
  .sd-btn-text.sd-btn-status-warning:hover {
667
- color: rgb(var(--sd-warning-6));
668
- background-color: var(--sd-color-fill-2);
669
- border-color: transparent;
667
+ color: var(--component-button-btn-text-color-text-warning-hover, var(--component-button-text-color-text-warning-hover, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))));
668
+ background-color: var(--component-button-btn-text-color-bg-warning-hover, var(--component-button-text-color-bg-warning-hover, var(--sd-color-fill-2)));
669
+ border-color: var(--component-button-btn-text-color-border-warning-hover, var(--component-button-text-color-border-warning-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
670
670
  }
671
671
  .sd-btn-text.sd-btn-status-warning:focus-visible {
672
- box-shadow: 0 0 0 0.25em rgb(var(--sd-warning-3));
672
+ box-shadow: 0 0 0 var(--component-button-btn-box-shadow-radius, var(--component-button-box-shadow-radius, 0.25em)) var(--component-button-btn-color-box-shadow-warning, var(--component-button-color-box-shadow-warning, var(--color-warning-3, var(--sd-color-warning-3, rgb(var(--sd-warning-3))))));
673
673
  }
674
674
  .sd-btn-text.sd-btn-status-warning:active {
675
- color: rgb(var(--sd-warning-6));
676
- background-color: var(--sd-color-fill-3);
677
- border-color: transparent;
675
+ color: var(--component-button-btn-text-color-text-warning-active, var(--component-button-text-color-text-warning-active, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))));
676
+ background-color: var(--component-button-btn-text-color-bg-warning-active, var(--component-button-text-color-bg-warning-active, var(--sd-color-fill-3)));
677
+ border-color: var(--component-button-btn-text-color-border-warning-active, var(--component-button-text-color-border-warning-active, var(--color-transparent, var(--sd-color-transparent, transparent))));
678
678
  }
679
679
  .sd-btn-text.sd-btn-status-warning.sd-btn-loading {
680
- color: rgb(var(--sd-warning-6));
681
- background-color: transparent;
682
- border-color: transparent;
680
+ color: var(--component-button-btn-text-color-text-warning, var(--component-button-text-color-text-warning, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))));
681
+ background-color: var(--component-button-btn-text-color-bg-warning, var(--component-button-text-color-bg-warning, var(--color-transparent, var(--sd-color-transparent, transparent))));
682
+ border-color: var(--component-button-btn-text-color-border-warning, var(--component-button-text-color-border-warning, var(--color-transparent, var(--sd-color-transparent, transparent))));
683
683
  }
684
684
  .sd-btn-text.sd-btn-status-warning.sd-btn-disabled {
685
- color: var(--sd-color-warning-light-3);
686
- background-color: transparent;
687
- border-color: transparent;
685
+ color: var(--component-button-btn-text-color-text-warning-disabled, var(--component-button-text-color-text-warning-disabled, var(--sd-color-warning-light-3)));
686
+ background-color: var(--component-button-btn-text-color-bg-warning-disabled, var(--component-button-text-color-bg-warning-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
687
+ border-color: var(--component-button-btn-text-color-border-warning-disabled, var(--component-button-text-color-border-warning-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
688
688
  }
689
689
 
690
690
  .sd-btn-text.sd-btn-status-danger {
691
- color: rgb(var(--sd-danger-6));
692
- background-color: transparent;
693
- border-color: transparent;
691
+ color: var(--component-button-btn-text-color-text-danger, var(--component-button-text-color-text-danger, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
692
+ background-color: var(--component-button-btn-text-color-bg-danger, var(--component-button-text-color-bg-danger, var(--color-transparent, var(--sd-color-transparent, transparent))));
693
+ border-color: var(--component-button-btn-text-color-border-danger, var(--component-button-text-color-border-danger, var(--color-transparent, var(--sd-color-transparent, transparent))));
694
694
  }
695
695
  .sd-btn-text.sd-btn-status-danger:hover {
696
- color: rgb(var(--sd-danger-6));
697
- background-color: var(--sd-color-fill-2);
698
- border-color: transparent;
696
+ color: var(--component-button-btn-text-color-text-danger-hover, var(--component-button-text-color-text-danger-hover, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
697
+ background-color: var(--component-button-btn-text-color-bg-danger-hover, var(--component-button-text-color-bg-danger-hover, var(--sd-color-fill-2)));
698
+ border-color: var(--component-button-btn-text-color-border-danger-hover, var(--component-button-text-color-border-danger-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
699
699
  }
700
700
  .sd-btn-text.sd-btn-status-danger:focus-visible {
701
- box-shadow: 0 0 0 0.25em rgb(var(--sd-danger-3));
701
+ box-shadow: 0 0 0 var(--component-button-btn-box-shadow-radius, var(--component-button-box-shadow-radius, 0.25em)) var(--component-button-btn-color-box-shadow-danger, var(--component-button-color-box-shadow-danger, var(--color-danger-3, var(--sd-color-danger-3, rgb(var(--sd-danger-3))))));
702
702
  }
703
703
  .sd-btn-text.sd-btn-status-danger:active {
704
- color: rgb(var(--sd-danger-6));
705
- background-color: var(--sd-color-fill-3);
706
- border-color: transparent;
704
+ color: var(--component-button-btn-text-color-text-danger-active, var(--component-button-text-color-text-danger-active, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
705
+ background-color: var(--component-button-btn-text-color-bg-danger-active, var(--component-button-text-color-bg-danger-active, var(--sd-color-fill-3)));
706
+ border-color: var(--component-button-btn-text-color-border-danger-active, var(--component-button-text-color-border-danger-active, var(--color-transparent, var(--sd-color-transparent, transparent))));
707
707
  }
708
708
  .sd-btn-text.sd-btn-status-danger.sd-btn-loading {
709
- color: rgb(var(--sd-danger-6));
710
- background-color: transparent;
711
- border-color: transparent;
709
+ color: var(--component-button-btn-text-color-text-danger, var(--component-button-text-color-text-danger, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
710
+ background-color: var(--component-button-btn-text-color-bg-danger, var(--component-button-text-color-bg-danger, var(--color-transparent, var(--sd-color-transparent, transparent))));
711
+ border-color: var(--component-button-btn-text-color-border-danger, var(--component-button-text-color-border-danger, var(--color-transparent, var(--sd-color-transparent, transparent))));
712
712
  }
713
713
  .sd-btn-text.sd-btn-status-danger.sd-btn-disabled {
714
- color: var(--sd-color-danger-light-3);
715
- background-color: transparent;
716
- border-color: transparent;
714
+ color: var(--component-button-btn-text-color-text-danger-disabled, var(--component-button-text-color-text-danger-disabled, var(--sd-color-danger-light-3)));
715
+ background-color: var(--component-button-btn-text-color-bg-danger-disabled, var(--component-button-text-color-bg-danger-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
716
+ border-color: var(--component-button-btn-text-color-border-danger-disabled, var(--component-button-text-color-border-danger-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
717
717
  }
718
718
 
719
719
  .sd-btn-text.sd-btn-status-success {
720
- color: rgb(var(--sd-success-6));
721
- background-color: transparent;
722
- border-color: transparent;
720
+ color: var(--component-button-btn-text-color-text-success, var(--component-button-text-color-text-success, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
721
+ background-color: var(--component-button-btn-text-color-bg-success, var(--component-button-text-color-bg-success, var(--color-transparent, var(--sd-color-transparent, transparent))));
722
+ border-color: var(--component-button-btn-text-color-border-success, var(--component-button-text-color-border-success, var(--color-transparent, var(--sd-color-transparent, transparent))));
723
723
  }
724
724
  .sd-btn-text.sd-btn-status-success:hover {
725
- color: rgb(var(--sd-success-6));
726
- background-color: var(--sd-color-fill-2);
727
- border-color: transparent;
725
+ color: var(--component-button-btn-text-color-text-success-hover, var(--component-button-text-color-text-success-hover, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
726
+ background-color: var(--component-button-btn-text-color-bg-success-hover, var(--component-button-text-color-bg-success-hover, var(--sd-color-fill-2)));
727
+ border-color: var(--component-button-btn-text-color-border-success-hover, var(--component-button-text-color-border-success-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
728
728
  }
729
729
  .sd-btn-text.sd-btn-status-success:focus-visible {
730
- box-shadow: 0 0 0 0.25em rgb(var(--sd-success-3));
730
+ box-shadow: 0 0 0 var(--component-button-btn-box-shadow-radius, var(--component-button-box-shadow-radius, 0.25em)) var(--component-button-btn-color-box-shadow-success, var(--component-button-color-box-shadow-success, var(--color-success-3, var(--sd-color-success-3, rgb(var(--sd-success-3))))));
731
731
  }
732
732
  .sd-btn-text.sd-btn-status-success:active {
733
- color: rgb(var(--sd-success-6));
734
- background-color: var(--sd-color-fill-3);
735
- border-color: transparent;
733
+ color: var(--component-button-btn-text-color-text-success-active, var(--component-button-text-color-text-success-active, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
734
+ background-color: var(--component-button-btn-text-color-bg-success-active, var(--component-button-text-color-bg-success-active, var(--sd-color-fill-3)));
735
+ border-color: var(--component-button-btn-text-color-border-success-active, var(--component-button-text-color-border-success-active, var(--color-transparent, var(--sd-color-transparent, transparent))));
736
736
  }
737
737
  .sd-btn-text.sd-btn-status-success.sd-btn-loading {
738
- color: rgb(var(--sd-success-6));
739
- background-color: transparent;
740
- border-color: transparent;
738
+ color: var(--component-button-btn-text-color-text-success, var(--component-button-text-color-text-success, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
739
+ background-color: var(--component-button-btn-text-color-bg-success, var(--component-button-text-color-bg-success, var(--color-transparent, var(--sd-color-transparent, transparent))));
740
+ border-color: var(--component-button-btn-text-color-border-success, var(--component-button-text-color-border-success, var(--color-transparent, var(--sd-color-transparent, transparent))));
741
741
  }
742
742
  .sd-btn-text.sd-btn-status-success.sd-btn-disabled {
743
- color: var(--sd-color-success-light-3);
744
- background-color: transparent;
745
- border-color: transparent;
743
+ color: var(--component-button-btn-text-color-text-success-disabled, var(--component-button-text-color-text-success-disabled, var(--sd-color-success-light-3)));
744
+ background-color: var(--component-button-btn-text-color-bg-success-disabled, var(--component-button-text-color-bg-success-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
745
+ border-color: var(--component-button-btn-text-color-border-success-disabled, var(--component-button-text-color-border-success-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
746
746
  }
747
747
 
748
748
  .sd-btn-size-mini {
749
- height: 24px;
750
- padding: 0 11px;
751
- font-size: 12px;
752
- border-radius: var(--sd-border-radius-small);
749
+ height: var(--component-button-btn-size-mini-height, var(--component-button-size-mini-height, var(--size-mini, 24px)));
750
+ padding: 0 var(--component-button-btn-size-mini-padding-horizontal, var(--component-button-size-mini-padding-horizontal, 11px));
751
+ font-size: var(--component-button-btn-size-mini-font-size, var(--component-button-size-mini-font-size, var(--font-size-body-1, 12px)));
752
+ border-radius: var(--component-button-btn-size-mini-radius, var(--component-button-size-mini-radius, var(--component-button-btn-border-radius, var(--component-button-border-radius, var(--sd-border-radius-small)))));
753
753
  }
754
754
  .sd-btn-size-mini:not(.sd-btn-only-icon) .sd-btn-icon {
755
- margin-right: 4px;
755
+ margin-right: var(--component-button-btn-size-mini-icon-spacing, var(--component-button-size-mini-icon-spacing, var(--spacing-2, 4px)));
756
756
  }
757
757
  .sd-btn-size-mini svg {
758
- vertical-align: -1px;
758
+ vertical-align: var(--component-button-btn-size-mini-icon-vertical-align, var(--component-button-size-mini-icon-vertical-align, -1px));
759
759
  }
760
760
 
761
761
  .sd-btn-size-mini.sd-btn-loading-fixed-width.sd-btn-loading {
762
- padding-right: 3px;
763
- padding-left: 3px;
762
+ padding-right: calc(var(--component-button-btn-size-mini-padding-horizontal, var(--component-button-size-mini-padding-horizontal, 11px)) - (var(--component-button-btn-size-mini-font-size, var(--component-button-size-mini-font-size, var(--font-size-body-1, 12px))) + var(--component-button-btn-size-mini-icon-spacing, var(--component-button-size-mini-icon-spacing, var(--spacing-2, 4px)))) * 0.5);
763
+ padding-left: calc(var(--component-button-btn-size-mini-padding-horizontal, var(--component-button-size-mini-padding-horizontal, 11px)) - (var(--component-button-btn-size-mini-font-size, var(--component-button-size-mini-font-size, var(--font-size-body-1, 12px))) + var(--component-button-btn-size-mini-icon-spacing, var(--component-button-size-mini-icon-spacing, var(--spacing-2, 4px)))) * 0.5);
764
764
  }
765
765
 
766
766
  .sd-btn-size-mini.sd-btn-only-icon {
767
- width: 24px;
768
- height: 24px;
767
+ width: var(--component-button-btn-size-mini-height, var(--component-button-size-mini-height, var(--size-mini, 24px)));
768
+ height: var(--component-button-btn-size-mini-height, var(--component-button-size-mini-height, var(--size-mini, 24px)));
769
769
  padding: 0;
770
770
  }
771
771
 
772
772
  .sd-btn-size-mini.sd-btn-shape-circle {
773
- width: 24px;
774
- height: 24px;
773
+ width: var(--component-button-btn-size-mini-height, var(--component-button-size-mini-height, var(--size-mini, 24px)));
774
+ height: var(--component-button-btn-size-mini-height, var(--component-button-size-mini-height, var(--size-mini, 24px)));
775
775
  padding: 0;
776
776
  text-align: center;
777
777
  border-radius: var(--sd-border-radius-circle);
778
778
  }
779
779
 
780
780
  .sd-btn-size-mini.sd-btn-shape-round {
781
- border-radius: 12px;
781
+ border-radius: calc(var(--component-button-btn-size-mini-height, var(--component-button-size-mini-height, var(--size-mini, 24px))) * 0.5);
782
782
  }
783
783
 
784
784
  .sd-btn-size-small {
785
- height: 28px;
786
- padding: 0 15px;
787
- font-size: 14px;
788
- border-radius: var(--sd-border-radius-small);
785
+ height: var(--component-button-btn-size-small-height, var(--component-button-size-small-height, var(--size-small, 28px)));
786
+ padding: 0 var(--component-button-btn-size-small-padding-horizontal, var(--component-button-size-small-padding-horizontal, 15px));
787
+ font-size: var(--component-button-btn-size-small-font-size, var(--component-button-size-small-font-size, var(--font-size-body-3, 14px)));
788
+ border-radius: var(--component-button-btn-size-small-radius, var(--component-button-size-small-radius, var(--component-button-btn-border-radius, var(--component-button-border-radius, var(--sd-border-radius-small)))));
789
789
  }
790
790
  .sd-btn-size-small:not(.sd-btn-only-icon) .sd-btn-icon {
791
- margin-right: 6px;
791
+ margin-right: var(--component-button-btn-size-small-icon-spacing, var(--component-button-size-small-icon-spacing, var(--spacing-3, 6px)));
792
792
  }
793
793
  .sd-btn-size-small svg {
794
- vertical-align: -2px;
794
+ vertical-align: var(--component-button-btn-size-small-icon-vertical-align, var(--component-button-size-small-icon-vertical-align, -2px));
795
795
  }
796
796
 
797
797
  .sd-btn-size-small.sd-btn-loading-fixed-width.sd-btn-loading {
798
- padding-right: 5px;
799
- padding-left: 5px;
798
+ padding-right: calc(var(--component-button-btn-size-small-padding-horizontal, var(--component-button-size-small-padding-horizontal, 15px)) - (var(--component-button-btn-size-small-font-size, var(--component-button-size-small-font-size, var(--font-size-body-3, 14px))) + var(--component-button-btn-size-small-icon-spacing, var(--component-button-size-small-icon-spacing, var(--spacing-3, 6px)))) * 0.5);
799
+ padding-left: calc(var(--component-button-btn-size-small-padding-horizontal, var(--component-button-size-small-padding-horizontal, 15px)) - (var(--component-button-btn-size-small-font-size, var(--component-button-size-small-font-size, var(--font-size-body-3, 14px))) + var(--component-button-btn-size-small-icon-spacing, var(--component-button-size-small-icon-spacing, var(--spacing-3, 6px)))) * 0.5);
800
800
  }
801
801
 
802
802
  .sd-btn-size-small.sd-btn-only-icon {
803
- width: 28px;
804
- height: 28px;
803
+ width: var(--component-button-btn-size-small-height, var(--component-button-size-small-height, var(--size-small, 28px)));
804
+ height: var(--component-button-btn-size-small-height, var(--component-button-size-small-height, var(--size-small, 28px)));
805
805
  padding: 0;
806
806
  }
807
807
 
808
808
  .sd-btn-size-small.sd-btn-shape-circle {
809
- width: 28px;
810
- height: 28px;
809
+ width: var(--component-button-btn-size-small-height, var(--component-button-size-small-height, var(--size-small, 28px)));
810
+ height: var(--component-button-btn-size-small-height, var(--component-button-size-small-height, var(--size-small, 28px)));
811
811
  padding: 0;
812
812
  text-align: center;
813
813
  border-radius: var(--sd-border-radius-circle);
814
814
  }
815
815
 
816
816
  .sd-btn-size-small.sd-btn-shape-round {
817
- border-radius: 14px;
817
+ border-radius: calc(var(--component-button-btn-size-small-height, var(--component-button-size-small-height, var(--size-small, 28px))) * 0.5);
818
818
  }
819
819
 
820
820
  .sd-btn-size-medium {
821
- height: 32px;
822
- padding: 0 15px;
823
- font-size: 14px;
824
- border-radius: var(--sd-border-radius-small);
821
+ height: var(--component-button-btn-size-medium-height, var(--component-button-size-medium-height, var(--component-button-btn-size-default-height, var(--component-button-size-default-height, var(--size-default, 32px)))));
822
+ padding: 0 var(--component-button-btn-size-medium-padding-horizontal, var(--component-button-size-medium-padding-horizontal, var(--component-button-btn-size-default-padding-horizontal, var(--component-button-size-default-padding-horizontal, 15px))));
823
+ font-size: var(--component-button-btn-size-medium-font-size, var(--component-button-size-medium-font-size, var(--component-button-btn-size-default-font-size, var(--component-button-size-default-font-size, var(--font-size-body-3, 14px)))));
824
+ border-radius: var(--component-button-btn-size-medium-radius, var(--component-button-size-medium-radius, var(--component-button-btn-size-default-radius, var(--component-button-size-default-radius, var(--component-button-btn-border-radius, var(--component-button-border-radius, var(--sd-border-radius-small)))))));
825
825
  }
826
826
  .sd-btn-size-medium:not(.sd-btn-only-icon) .sd-btn-icon {
827
- margin-right: 8px;
827
+ margin-right: var(--component-button-btn-size-medium-icon-spacing, var(--component-button-size-medium-icon-spacing, var(--component-button-btn-size-default-icon-spacing, var(--component-button-size-default-icon-spacing, var(--spacing-4, 8px)))));
828
828
  }
829
829
  .sd-btn-size-medium svg {
830
- vertical-align: -2px;
830
+ vertical-align: var(--component-button-btn-size-medium-icon-vertical-align, var(--component-button-size-medium-icon-vertical-align, var(--component-button-btn-size-default-icon-vertical-align, var(--component-button-size-default-icon-vertical-align, -2px))));
831
831
  }
832
832
 
833
833
  .sd-btn-size-medium.sd-btn-loading-fixed-width.sd-btn-loading {
834
- padding-right: 4px;
835
- padding-left: 4px;
834
+ padding-right: calc(var(--component-button-btn-size-medium-padding-horizontal, var(--component-button-size-medium-padding-horizontal, var(--component-button-btn-size-default-padding-horizontal, var(--component-button-size-default-padding-horizontal, 15px)))) - (var(--component-button-btn-size-medium-font-size, var(--component-button-size-medium-font-size, var(--component-button-btn-size-default-font-size, var(--component-button-size-default-font-size, var(--font-size-body-3, 14px))))) + var(--component-button-btn-size-medium-icon-spacing, var(--component-button-size-medium-icon-spacing, var(--component-button-btn-size-default-icon-spacing, var(--component-button-size-default-icon-spacing, var(--spacing-4, 8px)))))) * 0.5);
835
+ padding-left: calc(var(--component-button-btn-size-medium-padding-horizontal, var(--component-button-size-medium-padding-horizontal, var(--component-button-btn-size-default-padding-horizontal, var(--component-button-size-default-padding-horizontal, 15px)))) - (var(--component-button-btn-size-medium-font-size, var(--component-button-size-medium-font-size, var(--component-button-btn-size-default-font-size, var(--component-button-size-default-font-size, var(--font-size-body-3, 14px))))) + var(--component-button-btn-size-medium-icon-spacing, var(--component-button-size-medium-icon-spacing, var(--component-button-btn-size-default-icon-spacing, var(--component-button-size-default-icon-spacing, var(--spacing-4, 8px)))))) * 0.5);
836
836
  }
837
837
 
838
838
  .sd-btn-size-medium.sd-btn-only-icon {
839
- width: 32px;
840
- height: 32px;
839
+ width: var(--component-button-btn-size-medium-height, var(--component-button-size-medium-height, var(--component-button-btn-size-default-height, var(--component-button-size-default-height, var(--size-default, 32px)))));
840
+ height: var(--component-button-btn-size-medium-height, var(--component-button-size-medium-height, var(--component-button-btn-size-default-height, var(--component-button-size-default-height, var(--size-default, 32px)))));
841
841
  padding: 0;
842
842
  }
843
843
 
844
844
  .sd-btn-size-medium.sd-btn-shape-circle {
845
- width: 32px;
846
- height: 32px;
845
+ width: var(--component-button-btn-size-medium-height, var(--component-button-size-medium-height, var(--component-button-btn-size-default-height, var(--component-button-size-default-height, var(--size-default, 32px)))));
846
+ height: var(--component-button-btn-size-medium-height, var(--component-button-size-medium-height, var(--component-button-btn-size-default-height, var(--component-button-size-default-height, var(--size-default, 32px)))));
847
847
  padding: 0;
848
848
  text-align: center;
849
849
  border-radius: var(--sd-border-radius-circle);
850
850
  }
851
851
 
852
852
  .sd-btn-size-medium.sd-btn-shape-round {
853
- border-radius: 16px;
853
+ border-radius: calc(var(--component-button-btn-size-medium-height, var(--component-button-size-medium-height, var(--component-button-btn-size-default-height, var(--component-button-size-default-height, var(--size-default, 32px))))) * 0.5);
854
854
  }
855
855
 
856
856
  .sd-btn-size-large {
857
- height: 36px;
858
- padding: 0 19px;
859
- font-size: 14px;
860
- border-radius: var(--sd-border-radius-small);
857
+ height: var(--component-button-btn-size-large-height, var(--component-button-size-large-height, var(--size-large, 36px)));
858
+ padding: 0 var(--component-button-btn-size-large-padding-horizontal, var(--component-button-size-large-padding-horizontal, 19px));
859
+ font-size: var(--component-button-btn-size-large-font-size, var(--component-button-size-large-font-size, var(--font-size-body-3, 14px)));
860
+ border-radius: var(--component-button-btn-size-large-radius, var(--component-button-size-large-radius, var(--component-button-btn-border-radius, var(--component-button-border-radius, var(--sd-border-radius-small)))));
861
861
  }
862
862
  .sd-btn-size-large:not(.sd-btn-only-icon) .sd-btn-icon {
863
- margin-right: 8px;
863
+ margin-right: var(--component-button-btn-size-large-icon-spacing, var(--component-button-size-large-icon-spacing, var(--spacing-4, 8px)));
864
864
  }
865
865
  .sd-btn-size-large svg {
866
- vertical-align: -2px;
866
+ vertical-align: var(--component-button-btn-size-large-icon-vertical-align, var(--component-button-size-large-icon-vertical-align, -2px));
867
867
  }
868
868
 
869
869
  .sd-btn-size-large.sd-btn-loading-fixed-width.sd-btn-loading {
870
- padding-right: 8px;
871
- padding-left: 8px;
870
+ padding-right: calc(var(--component-button-btn-size-large-padding-horizontal, var(--component-button-size-large-padding-horizontal, 19px)) - (var(--component-button-btn-size-large-font-size, var(--component-button-size-large-font-size, var(--font-size-body-3, 14px))) + var(--component-button-btn-size-large-icon-spacing, var(--component-button-size-large-icon-spacing, var(--spacing-4, 8px)))) * 0.5);
871
+ padding-left: calc(var(--component-button-btn-size-large-padding-horizontal, var(--component-button-size-large-padding-horizontal, 19px)) - (var(--component-button-btn-size-large-font-size, var(--component-button-size-large-font-size, var(--font-size-body-3, 14px))) + var(--component-button-btn-size-large-icon-spacing, var(--component-button-size-large-icon-spacing, var(--spacing-4, 8px)))) * 0.5);
872
872
  }
873
873
 
874
874
  .sd-btn-size-large.sd-btn-only-icon {
875
- width: 36px;
876
- height: 36px;
875
+ width: var(--component-button-btn-size-large-height, var(--component-button-size-large-height, var(--size-large, 36px)));
876
+ height: var(--component-button-btn-size-large-height, var(--component-button-size-large-height, var(--size-large, 36px)));
877
877
  padding: 0;
878
878
  }
879
879
 
880
880
  .sd-btn-size-large.sd-btn-shape-circle {
881
- width: 36px;
882
- height: 36px;
881
+ width: var(--component-button-btn-size-large-height, var(--component-button-size-large-height, var(--size-large, 36px)));
882
+ height: var(--component-button-btn-size-large-height, var(--component-button-size-large-height, var(--size-large, 36px)));
883
883
  padding: 0;
884
884
  text-align: center;
885
885
  border-radius: var(--sd-border-radius-circle);
886
886
  }
887
887
 
888
888
  .sd-btn-size-large.sd-btn-shape-round {
889
- border-radius: 18px;
889
+ border-radius: calc(var(--component-button-btn-size-large-height, var(--component-button-size-large-height, var(--size-large, 36px))) * 0.5);
890
890
  }
891
891
 
892
892
  .sd-btn-group {
@@ -898,19 +898,19 @@
898
898
  margin-left: -1px;
899
899
  }
900
900
  .sd-btn-group .sd-btn-primary:not(:last-child) {
901
- border-right: 1px solid rgb(var(--sd-primary-5));
901
+ border-right: 1px solid var(--component-button-btn-primary-color-bg-hover, var(--component-button-primary-color-bg-hover, var(--color-primary-5, var(--sd-color-primary-5, rgb(var(--sd-primary-5))))));
902
902
  }
903
903
  .sd-btn-group .sd-btn-secondary:not(:last-child) {
904
- border-right: 1px solid var(--sd-color-secondary-hover);
904
+ border-right: 1px solid var(--component-button-btn-secondary-color-bg-hover, var(--component-button-secondary-color-bg-hover, var(--sd-color-secondary-hover)));
905
905
  }
906
906
  .sd-btn-group .sd-btn-status-warning:not(:last-child) {
907
- border-right: 1px solid rgb(var(--sd-warning-5));
907
+ border-right: 1px solid var(--component-button-btn-primary-color-bg-warning-hover, var(--component-button-primary-color-bg-warning-hover, var(--color-warning-5, var(--sd-color-warning-5, rgb(var(--sd-warning-5))))));
908
908
  }
909
909
  .sd-btn-group .sd-btn-status-danger:not(:last-child) {
910
- border-right: 1px solid rgb(var(--sd-danger-5));
910
+ border-right: 1px solid var(--component-button-btn-primary-color-bg-danger-hover, var(--component-button-primary-color-bg-danger-hover, var(--color-danger-5, var(--sd-color-danger-5, rgb(var(--sd-danger-5))))));
911
911
  }
912
912
  .sd-btn-group .sd-btn-status-success:not(:last-child) {
913
- border-right: 1px solid rgb(var(--sd-success-5));
913
+ border-right: 1px solid var(--component-button-btn-primary-color-bg-success-hover, var(--component-button-primary-color-bg-success-hover, var(--color-success-5, var(--sd-color-success-5, rgb(var(--sd-success-5))))));
914
914
  }
915
915
  .sd-btn-group .sd-btn-outline:hover, .sd-btn-group .sd-btn-outline:active,
916
916
  .sd-btn-group .sd-btn-dashed:hover,
@@ -932,7 +932,7 @@
932
932
  border-radius: 0;
933
933
  }
934
934
 
935
- :where(body, [sd-theme])[sd-theme=dark] .sd-btn-primary.sd-btn-disabled {
935
+ :where(body, [sd-theme], [data-sd-theme])[sd-theme=dark] .sd-btn-primary.sd-btn-disabled {
936
936
  color: rgba(255, 255, 255, 0.3);
937
937
  }
938
938