@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/_components/input-label/style/index.css CHANGED
@@ -32,52 +32,52 @@
32
32
  width: 100%;
33
33
  padding-right: 12px;
34
34
  padding-left: 12px;
35
- color: var(--sd-color-text-1);
36
- font-size: 14px;
37
- background-color: var(--sd-color-fill-2);
38
- border: 1px solid transparent;
39
- border-radius: var(--sd-border-radius-small);
35
+ color: var(--component-input-input-color-text, var(--component-input-color-text, var(--sd-color-text-1)));
36
+ font-size: var(--component-input-input-size-default-font-size, var(--component-input-size-default-font-size, var(--font-size-body-3, 14px)));
37
+ background-color: var(--component-input-input-color-bg, var(--component-input-color-bg, var(--sd-color-fill-2)));
38
+ border: 1px solid var(--component-input-input-color-border, var(--component-input-color-border, var(--color-transparent, var(--sd-color-transparent, transparent))));
39
+ border-radius: var(--component-input-input-border-radius, var(--component-input-border-radius, var(--sd-border-radius-small)));
40
40
  cursor: text;
41
41
  transition: color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), border-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1), background-color 0.1s cubic-bezier(0.34, 0.69, 0.1, 1);
42
42
  }
43
43
  .sd-input-label:hover {
44
- background-color: var(--sd-color-fill-3);
45
- border-color: transparent;
44
+ background-color: var(--component-input-input-color-bg-hover, var(--component-input-color-bg-hover, var(--sd-color-fill-3)));
45
+ border-color: var(--component-input-input-color-border-hover, var(--component-input-color-border-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
46
46
  }
47
47
  .sd-input-label:focus-within, .sd-input-label.sd-input-label-focus {
48
48
  z-index: 1;
49
- background-color: var(--sd-color-bg-2);
50
- border-color: rgb(var(--sd-primary-6));
51
- box-shadow: 0 0 0 0 var(--sd-color-primary-light-2);
49
+ background-color: var(--component-input-input-color-bg-focus, var(--component-input-color-bg-focus, var(--sd-color-bg-2)));
50
+ border-color: var(--component-input-input-color-border-focus, var(--component-input-color-border-focus, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
51
+ box-shadow: 0 0 0 var(--component-input-input-size-shadow-focus, var(--component-input-size-shadow-focus, var(--shadow-distance-none, 0))) var(--component-input-input-color-shadow-focus, var(--component-input-color-shadow-focus, var(--sd-color-primary-light-2)));
52
52
  }
53
53
  .sd-input-label.sd-input-label-disabled {
54
- color: var(--sd-color-text-4);
55
- background-color: var(--sd-color-fill-2);
56
- border-color: transparent;
54
+ color: var(--component-input-input-color-text-disabled, var(--component-input-color-text-disabled, var(--sd-color-text-4)));
55
+ background-color: var(--component-input-input-color-bg-disabled, var(--component-input-color-bg-disabled, var(--sd-color-fill-2)));
56
+ border-color: var(--component-input-input-color-border-disabled, var(--component-input-color-border-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
57
57
  cursor: not-allowed;
58
58
  }
59
59
  .sd-input-label.sd-input-label-disabled:hover {
60
- color: var(--sd-color-text-4);
61
- background-color: var(--sd-color-fill-2);
62
- border-color: transparent;
60
+ color: var(--component-input-input-color-text-disabled, var(--component-input-color-text-disabled, var(--sd-color-text-4)));
61
+ background-color: var(--component-input-input-color-bg-disabled, var(--component-input-color-bg-disabled, var(--sd-color-fill-2)));
62
+ border-color: var(--component-input-input-color-border-disabled, var(--component-input-color-border-disabled, var(--color-transparent, var(--sd-color-transparent, transparent))));
63
63
  }
64
64
  .sd-input-label.sd-input-label-disabled .sd-input-label-prefix,
65
65
  .sd-input-label.sd-input-label-disabled .sd-input-label-suffix {
66
66
  color: inherit;
67
67
  }
68
68
  .sd-input-label.sd-input-label-error {
69
- background-color: var(--sd-color-danger-light-1);
70
- border-color: transparent;
69
+ background-color: var(--component-input-input-color-bg-error, var(--component-input-color-bg-error, var(--sd-color-danger-light-1)));
70
+ border-color: var(--component-input-input-color-border-error, var(--component-input-color-border-error, var(--color-transparent, var(--sd-color-transparent, transparent))));
71
71
  }
72
72
  .sd-input-label.sd-input-label-error:hover {
73
- background-color: var(--sd-color-danger-light-2);
74
- border-color: transparent;
73
+ background-color: var(--component-input-input-color-bg-error-hover, var(--component-input-color-bg-error-hover, var(--sd-color-danger-light-2)));
74
+ border-color: var(--component-input-input-color-border-error-hover, var(--component-input-color-border-error-hover, var(--color-transparent, var(--sd-color-transparent, transparent))));
75
75
  }
76
76
  .sd-input-label.sd-input-label-error:focus-within, .sd-input-label.sd-input-label-error.sd-input-label-focus {
77
77
  z-index: 1;
78
- background-color: var(--sd-color-bg-2);
79
- border-color: rgb(var(--sd-danger-6));
80
- box-shadow: 0 0 0 0 var(--sd-color-danger-light-2);
78
+ background-color: var(--component-input-input-color-bg-error-focus, var(--component-input-color-bg-error-focus, var(--component-input-input-color-bg-focus, var(--component-input-color-bg-focus, var(--sd-color-bg-2)))));
79
+ border-color: var(--component-input-input-color-border-error-focus, var(--component-input-color-border-error-focus, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
80
+ box-shadow: 0 0 0 var(--component-input-input-size-shadow-error-focus, var(--component-input-size-shadow-error-focus, var(--shadow-distance-none, 0))) var(--component-input-input-color-shadow-error-focus, var(--component-input-color-shadow-error-focus, var(--sd-color-danger-light-2)));
81
81
  }
82
82
  .sd-input-label .sd-input-label-prefix,
83
83
  .sd-input-label .sd-input-label-suffix {
@@ -89,7 +89,7 @@
89
89
  }
90
90
  .sd-input-label .sd-input-label-prefix > svg,
91
91
  .sd-input-label .sd-input-label-suffix > svg {
92
- font-size: 14px;
92
+ font-size: var(--component-input-input-size-default-icon-suffix-size, var(--component-input-size-default-icon-suffix-size, 14px));
93
93
  }
94
94
  .sd-input-label .sd-input-label-prefix {
95
95
  padding-right: 12px;
@@ -97,27 +97,27 @@
97
97
  }
98
98
  .sd-input-label .sd-input-label-suffix {
99
99
  padding-left: 12px;
100
- color: var(--sd-color-text-2);
100
+ color: var(--component-input-input-color-suffix-text, var(--component-input-color-suffix-text, var(--sd-color-text-2)));
101
101
  }
102
102
  .sd-input-label .sd-input-label-suffix .sd-feedback-icon {
103
103
  display: inline-flex;
104
104
  }
105
105
  .sd-input-label .sd-input-label-suffix .sd-feedback-icon-status-validating {
106
- color: rgb(var(--sd-primary-6));
106
+ color: var(--component-input-input-feedback-icon-color-validating, var(--component-input-feedback-icon-color-validating, var(--color-primary-6, var(--sd-color-primary-6, rgb(var(--sd-primary-6))))));
107
107
  }
108
108
  .sd-input-label .sd-input-label-suffix .sd-feedback-icon-status-success {
109
- color: rgb(var(--sd-success-6));
109
+ color: var(--component-input-input-feedback-icon-color-success, var(--component-input-feedback-icon-color-success, var(--color-success-6, var(--sd-color-success-6, rgb(var(--sd-success-6))))));
110
110
  }
111
111
  .sd-input-label .sd-input-label-suffix .sd-feedback-icon-status-warning {
112
- color: rgb(var(--sd-warning-6));
112
+ color: var(--component-input-input-feedback-icon-color-warning, var(--component-input-feedback-icon-color-warning, var(--color-warning-6, var(--sd-color-warning-6, rgb(var(--sd-warning-6))))));
113
113
  }
114
114
  .sd-input-label .sd-input-label-suffix .sd-feedback-icon-status-error {
115
- color: rgb(var(--sd-danger-6));
115
+ color: var(--component-input-input-feedback-icon-color-error, var(--component-input-feedback-icon-color-error, var(--color-danger-6, var(--sd-color-danger-6, rgb(var(--sd-danger-6))))));
116
116
  }
117
117
  .sd-input-label .sd-input-label-clear-btn {
118
118
  align-self: center;
119
- color: var(--sd-color-text-2);
120
- font-size: 12px;
119
+ color: var(--component-input-input-color-icon-clear, var(--component-input-color-icon-clear, var(--sd-color-text-2)));
120
+ font-size: var(--component-input-input-size-icon-clear, var(--component-input-size-icon-clear, var(--size-3, 12px)));
121
121
  visibility: hidden;
122
122
  cursor: pointer;
123
123
  }
@@ -129,7 +129,7 @@
129
129
  visibility: visible;
130
130
  }
131
131
  .sd-input-label:not(.sd-input-label-focus) .sd-input-label-icon-hover:hover::before {
132
- background-color: var(--sd-color-fill-4);
132
+ background-color: var(--component-input-input-color-icon-clear-bg-hover, var(--component-input-color-icon-clear-bg-hover, var(--sd-color-fill-4)));
133
133
  }
134
134
  .sd-input-label {
135
135
  cursor: pointer;
@@ -155,13 +155,13 @@
155
155
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
156
156
  }
157
157
  .sd-input-label .sd-input-label-input::placeholder {
158
- color: var(--sd-color-text-3);
158
+ color: var(--component-input-input-color-placeholder-text, var(--component-input-color-placeholder-text, var(--sd-color-text-3)));
159
159
  }
160
160
  .sd-input-label .sd-input-label-input[disabled]::placeholder {
161
- color: var(--sd-color-text-4);
161
+ color: var(--component-input-input-color-text-disabled, var(--component-input-color-text-disabled, var(--sd-color-text-4)));
162
162
  }
163
163
  .sd-input-label .sd-input-label-input[disabled] {
164
- -webkit-text-fill-color: var(--sd-color-text-4);
164
+ -webkit-text-fill-color: var(--component-input-input-color-text-disabled, var(--component-input-color-text-disabled, var(--sd-color-text-4)));
165
165
  }
166
166
  .sd-input-label .sd-input-label-input-hidden {
167
167
  position: absolute;
@@ -187,10 +187,10 @@
187
187
  }
188
188
  .sd-input-label.sd-input-label-size-mini .sd-input-label-input, .sd-input-label.sd-input-label-size-mini .sd-input-label-value {
189
189
  /* prettier-ignore */
190
- padding-top: 1px;
190
+ padding-top: calc((22px - 1.667 * var(--component-input-input-size-mini-font-size, var(--component-input-size-mini-font-size, var(--font-size-body-1, 12px)))) / 2);
191
191
  /* prettier-ignore */
192
- padding-bottom: 1px;
193
- font-size: 12px;
192
+ padding-bottom: calc((22px - 1.667 * var(--component-input-input-size-mini-font-size, var(--component-input-size-mini-font-size, var(--font-size-body-1, 12px)))) / 2);
193
+ font-size: var(--component-input-input-size-mini-font-size, var(--component-input-size-mini-font-size, var(--font-size-body-1, 12px)));
194
194
  line-height: 1.667;
195
195
  }
196
196
  .sd-input-label.sd-input-label-size-mini .sd-input-label-value {
@@ -198,10 +198,10 @@
198
198
  }
199
199
  .sd-input-label.sd-input-label-size-medium .sd-input-label-input, .sd-input-label.sd-input-label-size-medium .sd-input-label-value {
200
200
  /* prettier-ignore */
201
- padding-top: 4px;
201
+ padding-top: calc((30px - 1.5715 * var(--component-input-input-size-medium-font-size, var(--component-input-size-medium-font-size, var(--component-input-input-size-default-font-size, var(--component-input-size-default-font-size, var(--font-size-body-3, 14px)))))) / 2);
202
202
  /* prettier-ignore */
203
- padding-bottom: 4px;
204
- font-size: 14px;
203
+ padding-bottom: calc((30px - 1.5715 * var(--component-input-input-size-medium-font-size, var(--component-input-size-medium-font-size, var(--component-input-input-size-default-font-size, var(--component-input-size-default-font-size, var(--font-size-body-3, 14px)))))) / 2);
204
+ font-size: var(--component-input-input-size-medium-font-size, var(--component-input-size-medium-font-size, var(--component-input-input-size-default-font-size, var(--component-input-size-default-font-size, var(--font-size-body-3, 14px)))));
205
205
  line-height: 1.5715;
206
206
  }
207
207
  .sd-input-label.sd-input-label-size-medium .sd-input-label-value {
@@ -209,10 +209,10 @@
209
209
  }
210
210
  .sd-input-label.sd-input-label-size-small .sd-input-label-input, .sd-input-label.sd-input-label-size-small .sd-input-label-value {
211
211
  /* prettier-ignore */
212
- padding-top: 2px;
212
+ padding-top: calc((26px - 1.5715 * var(--component-input-input-size-small-font-size, var(--component-input-size-small-font-size, var(--font-size-body-3, 14px)))) / 2);
213
213
  /* prettier-ignore */
214
- padding-bottom: 2px;
215
- font-size: 14px;
214
+ padding-bottom: calc((26px - 1.5715 * var(--component-input-input-size-small-font-size, var(--component-input-size-small-font-size, var(--font-size-body-3, 14px)))) / 2);
215
+ font-size: var(--component-input-input-size-small-font-size, var(--component-input-size-small-font-size, var(--font-size-body-3, 14px)));
216
216
  line-height: 1.5715;
217
217
  }
218
218
  .sd-input-label.sd-input-label-size-small .sd-input-label-value {
@@ -220,10 +220,10 @@
220
220
  }
221
221
  .sd-input-label.sd-input-label-size-large .sd-input-label-input, .sd-input-label.sd-input-label-size-large .sd-input-label-value {
222
222
  /* prettier-ignore */
223
- padding-top: 6px;
223
+ padding-top: calc((34px - 1.5715 * var(--component-input-input-size-large-font-size, var(--component-input-size-large-font-size, var(--font-size-body-3, 14px)))) / 2);
224
224
  /* prettier-ignore */
225
- padding-bottom: 6px;
226
- font-size: 14px;
225
+ padding-bottom: calc((34px - 1.5715 * var(--component-input-input-size-large-font-size, var(--component-input-size-large-font-size, var(--font-size-body-3, 14px)))) / 2);
226
+ font-size: var(--component-input-input-size-large-font-size, var(--component-input-size-large-font-size, var(--font-size-body-3, 14px)));
227
227
  line-height: 1.5715;
228
228
  }
229
229
  .sd-input-label.sd-input-label-size-large .sd-input-label-value {