@atlaskit/textarea 5.8.2 → 7.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 (20) hide show
  1. package/CHANGELOG.md +41 -0
  2. package/dist/cjs/text-area.compiled.css +88 -0
  3. package/dist/cjs/text-area.js +59 -30
  4. package/dist/es2019/text-area.compiled.css +88 -0
  5. package/dist/es2019/text-area.js +45 -27
  6. package/dist/esm/text-area.compiled.css +88 -0
  7. package/dist/esm/text-area.js +58 -30
  8. package/package.json +3 -5
  9. package/component-tokens/package.json +0 -17
  10. package/dist/cjs/component-tokens.js +0 -20
  11. package/dist/cjs/styles.js +0 -312
  12. package/dist/es2019/component-tokens.js +0 -14
  13. package/dist/es2019/styles.js +0 -295
  14. package/dist/esm/component-tokens.js +0 -14
  15. package/dist/esm/styles.js +0 -304
  16. package/dist/types/component-tokens.d.ts +0 -13
  17. package/dist/types/styles.d.ts +0 -11
  18. package/dist/types-ts4.5/component-tokens.d.ts +0 -13
  19. package/dist/types-ts4.5/styles.d.ts +0 -11
  20. package/styles/package.json +0 -17
package/dist/es2019/styles.js DELETED
@@ -1,295 +0,0 @@
1
- /**
2
- * @jsxRuntime classic
3
- * @jsx jsx
4
- */
5
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
6
- import { css } from '@emotion/react';
7
- import { fg } from '@atlaskit/platform-feature-flags';
8
- import { media } from '@atlaskit/primitives';
9
- import * as componentTokens from './component-tokens';
10
- const disabledRules = {
11
- backgroundColor: componentTokens.disabledBackground,
12
- backgroundColorFocus: componentTokens.disabledBackground,
13
- backgroundColorHover: componentTokens.disabledBackground,
14
- borderColor: componentTokens.disabledBorder,
15
- borderColorFocus: componentTokens.defaultBorderColorFocus,
16
- textColor: componentTokens.disabledTextColor
17
- };
18
- const invalidRules = {
19
- borderColor: componentTokens.invalidBorderColor,
20
- borderColorFocus: componentTokens.defaultBorderColorFocus,
21
- backgroundColor: componentTokens.defaultBackgroundColor,
22
- backgroundColorFocus: componentTokens.defaultBackgroundColorFocus,
23
- backgroundColorHover: componentTokens.defaultBackgroundColorHover
24
- };
25
- const backgroundColor = {
26
- standard: componentTokens.defaultBackgroundColor,
27
- subtle: componentTokens.transparent,
28
- none: componentTokens.transparent
29
- };
30
- const backgroundColorFocus = {
31
- standard: componentTokens.defaultBackgroundColorFocus,
32
- subtle: componentTokens.defaultBackgroundColorFocus,
33
- none: componentTokens.transparent
34
- };
35
- const backgroundColorHover = {
36
- standard: componentTokens.defaultBackgroundColorHover,
37
- subtle: componentTokens.defaultBackgroundColorHover,
38
- none: componentTokens.transparent
39
- };
40
- const borderColor = {
41
- standard: componentTokens.defaultBorderColor,
42
- subtle: componentTokens.transparent,
43
- none: componentTokens.transparent
44
- };
45
- const borderColorFocus = {
46
- standard: componentTokens.defaultBorderColorFocus,
47
- subtle: componentTokens.defaultBorderColorFocus,
48
- none: componentTokens.transparent
49
- };
50
- const borderColorHover = {
51
- standard: componentTokens.defaultBorderColor,
52
- subtle: componentTokens.subtleBorderColorHover,
53
- none: componentTokens.transparent
54
- };
55
- const lineHeightBase = 8 * 2.5;
56
- const lineHeightCompact = 8 * 2;
57
- const compactVerticalPadding = 2;
58
- const verticalPadding = 6;
59
- const horizontalPadding = 8;
60
- const transitionDuration = '0.2s';
61
- export const borderWidth = 2;
62
-
63
- // Safari puts on some difficult to remove styles, mainly for disabled inputs
64
- // but we want full control so need to override them in all cases
65
- const overrideSafariDisabledStyles = {
66
- WebkitTextFillColor: 'unset',
67
- WebkitOpacity: '1'
68
- };
69
- const borderBoxMinHeight = (minimumRows, borderHeight) => {
70
- const contentHeight = lineHeightBase * minimumRows;
71
- return contentHeight + verticalPadding * 2 + borderHeight * 2;
72
- };
73
- const borderBoxMinHeightCompact = (minimumRows, borderHeight) => {
74
- const contentHeightCompact = lineHeightCompact * minimumRows;
75
- return contentHeightCompact + compactVerticalPadding * 2 + borderHeight * 2;
76
- };
77
- const bgAndBorderColorStyles = appearance => appearance && css({
78
- '&:focus': {
79
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
80
- backgroundColor: backgroundColorFocus[appearance],
81
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
82
- borderColor: borderColorFocus[appearance],
83
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
84
- boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${borderColorFocus[appearance]}`
85
- },
86
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
87
- '&:not(:focus)': {
88
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
89
- backgroundColor: backgroundColor[appearance],
90
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
91
- borderColor: borderColor[appearance]
92
- },
93
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
94
- '&[data-invalid]:focus': {
95
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
96
- backgroundColor: invalidRules.backgroundColorFocus,
97
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
98
- borderColor: invalidRules.borderColorFocus,
99
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
100
- boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${invalidRules.borderColorFocus}`
101
- },
102
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
103
- '&[data-invalid]:not(:focus)': {
104
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
105
- backgroundColor: invalidRules.backgroundColor,
106
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
107
- borderColor: invalidRules.borderColor,
108
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
109
- boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${invalidRules.borderColor}`
110
- },
111
- // Disabled background and border styles should not be applied to components that
112
- // have either no background or transparent background to begin with
113
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
114
- ...(appearance === 'standard' ? {
115
- '&:disabled:focus': {
116
- backgroundColor: disabledRules.backgroundColorFocus,
117
- borderColor: disabledRules.borderColorFocus
118
- },
119
- '&:disabled:not(:focus)': {
120
- backgroundColor: disabledRules.backgroundColor,
121
- borderColor: disabledRules.borderColor
122
- }
123
- } : {})
124
- });
125
- const placeholderStyles = css({
126
- '&::placeholder': {
127
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
128
- color: componentTokens.placeholderTextColor
129
- },
130
- '&:disabled::placeholder': {
131
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
132
- color: disabledRules.textColor
133
- }
134
- });
135
- const hoverBackgroundAndBorderStyles = appearance => appearance && css({
136
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
137
- '&:hover:not(:read-only):not(:focus)': {
138
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
139
- backgroundColor: backgroundColorHover[appearance],
140
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
141
- borderColor: borderColorHover[appearance],
142
- '&:disabled': {
143
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
144
- backgroundColor: disabledRules.backgroundColorHover
145
- },
146
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
147
- '&[data-invalid]': {
148
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
149
- backgroundColor: invalidRules.backgroundColorHover,
150
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
151
- borderColor: invalidRules.borderColor,
152
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
153
- boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${invalidRules.borderColor}`
154
- }
155
- }
156
- });
157
- const resizeStyle = resize => {
158
- if (resize === 'horizontal' || resize === 'vertical') {
159
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
160
- return css({
161
- resize
162
- });
163
- }
164
- if (resize === 'auto') {
165
- return css({
166
- resize: 'both'
167
- });
168
- }
169
- return css({
170
- resize: 'none'
171
- });
172
- };
173
- const borderStyle = appearance => css({
174
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
175
- borderStyle: appearance === 'none' ? 'none' : 'solid'
176
- });
177
- const fontFamilyStyle = isMonospaced => css({
178
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
179
- fontFamily: isMonospaced ? "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)" : "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
180
- });
181
- const borderPaddingAndHeightStyles = (minimumRows = 1, appearance) => {
182
- const borderWidth = appearance !== 'none' ? 1 : 2;
183
- const horizontalPaddingWithoutBorderWidth = horizontalPadding - borderWidth;
184
- const borderHeight = borderWidth;
185
- return css({
186
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
187
- '&[data-compact]': {
188
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
189
- minHeight: borderBoxMinHeightCompact(minimumRows, borderHeight),
190
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
191
- padding: `${compactVerticalPadding}px ${horizontalPaddingWithoutBorderWidth}px`,
192
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography
193
- lineHeight: lineHeightCompact / 14
194
- },
195
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
196
- '&:not([data-compact])': {
197
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
198
- minHeight: borderBoxMinHeight(minimumRows, borderHeight),
199
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
200
- padding: `${verticalPadding}px ${horizontalPaddingWithoutBorderWidth}px`,
201
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography
202
- lineHeight: lineHeightBase / 14
203
- }
204
- });
205
- };
206
- const staticStyles = css({
207
- display: 'block',
208
- boxSizing: 'border-box',
209
- width: '100%',
210
- minWidth: 0,
211
- maxWidth: '100%',
212
- margin: 0,
213
- position: 'relative',
214
- flex: '1 1 100%',
215
- borderRadius: "var(--ds-border-radius, 3px)",
216
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
217
- borderWidth: 1,
218
- font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
219
- outline: 'none',
220
- overflow: 'auto',
221
- transition: `background-color ${transitionDuration} ease-in-out,
222
- border-color ${transitionDuration} ease-in-out`,
223
- wordWrap: 'break-word',
224
- '&:disabled': {
225
- cursor: 'not-allowed',
226
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
227
- ...overrideSafariDisabledStyles
228
- },
229
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
230
- '&::-ms-clear': {
231
- display: 'none'
232
- },
233
- '&:invalid': {
234
- boxShadow: 'none'
235
- }
236
- });
237
-
238
- // suggestion: these two could be merged into cssMap during @compiled rewrite
239
- const newFontStyles = css({
240
- font: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
241
- [media.above.xs]: {
242
- font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
243
- }
244
- });
245
- const monospacedFontFamilyStyles = css({
246
- fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
247
- [media.above.xs]: {
248
- // Reapply the monospaced font family as the font declaration used in the breakpoint in newFontStyles overrides it otherwise
249
- fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
250
- }
251
- });
252
- export const getBaseStyles = ({
253
- minimumRows,
254
- resize,
255
- appearance,
256
- isMonospaced,
257
- maxHeight
258
- }) =>
259
- // eslint-disable-next-line @repo/internal/styles/no-exported-styles
260
- css(
261
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
262
- staticStyles,
263
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
264
- borderPaddingAndHeightStyles(minimumRows, appearance),
265
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
266
- resizeStyle(resize),
267
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
268
- borderStyle(appearance),
269
- // @todo: remove in `platform_design_system_team_safari_input_fix` cleanup
270
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
271
- fontFamilyStyle(isMonospaced),
272
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
273
- fg('platform_design_system_team_safari_input_fix') ? newFontStyles : undefined,
274
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
275
- isMonospaced && fg('platform_design_system_team_safari_input_fix') ? monospacedFontFamilyStyles : undefined,
276
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
277
- {
278
- maxHeight
279
- });
280
- export const dynamicStyles = appearance =>
281
- // eslint-disable-next-line @repo/internal/styles/no-exported-styles
282
- css(
283
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
284
- bgAndBorderColorStyles(appearance),
285
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
286
- hoverBackgroundAndBorderStyles(appearance),
287
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
288
- placeholderStyles, {
289
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
290
- color: componentTokens.textColor,
291
- '&:disabled': {
292
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
293
- color: disabledRules.textColor
294
- }
295
- });
package/dist/esm/component-tokens.js DELETED
@@ -1,14 +0,0 @@
1
- import { B200, N0, N10, N100, N20, N200, N30, N40, N70, N900, R400 } from '@atlaskit/theme/colors';
2
- export var disabledBackground = "var(--ds-background-disabled, ".concat(N20, ")");
3
- export var disabledBorder = "var(--ds-border-disabled, ".concat(N40, ")");
4
- export var invalidBorderColor = "var(--ds-border-danger, ".concat(R400, ")");
5
- export var defaultBorderColor = "var(--ds-border-input, ".concat(N100, ")");
6
- export var defaultBorderColorFocus = "var(--ds-border-focused, ".concat(B200, ")");
7
- export var defaultBackgroundColor = "var(--ds-background-input, ".concat(N10, ")");
8
- export var defaultBackgroundColorHover = "var(--ds-background-input-hovered, ".concat(N30, ")");
9
- export var defaultBackgroundColorFocus = "var(--ds-background-input-pressed, ".concat(N0, ")");
10
- export var subtleBorderColorHover = "var(--ds-border-input, transparent)";
11
- export var placeholderTextColor = "var(--ds-text-subtlest, ".concat(N200, ")");
12
- export var textColor = "var(--ds-text, ".concat(N900, ")");
13
- export var disabledTextColor = "var(--ds-text-disabled, ".concat(N70, ")");
14
- export var transparent = 'transparent';
package/dist/esm/styles.js DELETED
@@ -1,304 +0,0 @@
1
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
3
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
4
- /**
5
- * @jsxRuntime classic
6
- * @jsx jsx
7
- */
8
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
9
- import { css } from '@emotion/react';
10
- import { fg } from '@atlaskit/platform-feature-flags';
11
- import { media } from '@atlaskit/primitives';
12
- import * as componentTokens from './component-tokens';
13
- var disabledRules = {
14
- backgroundColor: componentTokens.disabledBackground,
15
- backgroundColorFocus: componentTokens.disabledBackground,
16
- backgroundColorHover: componentTokens.disabledBackground,
17
- borderColor: componentTokens.disabledBorder,
18
- borderColorFocus: componentTokens.defaultBorderColorFocus,
19
- textColor: componentTokens.disabledTextColor
20
- };
21
- var invalidRules = {
22
- borderColor: componentTokens.invalidBorderColor,
23
- borderColorFocus: componentTokens.defaultBorderColorFocus,
24
- backgroundColor: componentTokens.defaultBackgroundColor,
25
- backgroundColorFocus: componentTokens.defaultBackgroundColorFocus,
26
- backgroundColorHover: componentTokens.defaultBackgroundColorHover
27
- };
28
- var backgroundColor = {
29
- standard: componentTokens.defaultBackgroundColor,
30
- subtle: componentTokens.transparent,
31
- none: componentTokens.transparent
32
- };
33
- var backgroundColorFocus = {
34
- standard: componentTokens.defaultBackgroundColorFocus,
35
- subtle: componentTokens.defaultBackgroundColorFocus,
36
- none: componentTokens.transparent
37
- };
38
- var backgroundColorHover = {
39
- standard: componentTokens.defaultBackgroundColorHover,
40
- subtle: componentTokens.defaultBackgroundColorHover,
41
- none: componentTokens.transparent
42
- };
43
- var borderColor = {
44
- standard: componentTokens.defaultBorderColor,
45
- subtle: componentTokens.transparent,
46
- none: componentTokens.transparent
47
- };
48
- var borderColorFocus = {
49
- standard: componentTokens.defaultBorderColorFocus,
50
- subtle: componentTokens.defaultBorderColorFocus,
51
- none: componentTokens.transparent
52
- };
53
- var borderColorHover = {
54
- standard: componentTokens.defaultBorderColor,
55
- subtle: componentTokens.subtleBorderColorHover,
56
- none: componentTokens.transparent
57
- };
58
- var lineHeightBase = 8 * 2.5;
59
- var lineHeightCompact = 8 * 2;
60
- var compactVerticalPadding = 2;
61
- var verticalPadding = 6;
62
- var horizontalPadding = 8;
63
- var transitionDuration = '0.2s';
64
- export var borderWidth = 2;
65
-
66
- // Safari puts on some difficult to remove styles, mainly for disabled inputs
67
- // but we want full control so need to override them in all cases
68
- var overrideSafariDisabledStyles = {
69
- WebkitTextFillColor: 'unset',
70
- WebkitOpacity: '1'
71
- };
72
- var borderBoxMinHeight = function borderBoxMinHeight(minimumRows, borderHeight) {
73
- var contentHeight = lineHeightBase * minimumRows;
74
- return contentHeight + verticalPadding * 2 + borderHeight * 2;
75
- };
76
- var borderBoxMinHeightCompact = function borderBoxMinHeightCompact(minimumRows, borderHeight) {
77
- var contentHeightCompact = lineHeightCompact * minimumRows;
78
- return contentHeightCompact + compactVerticalPadding * 2 + borderHeight * 2;
79
- };
80
- var bgAndBorderColorStyles = function bgAndBorderColorStyles(appearance) {
81
- return appearance && css(_objectSpread({
82
- '&:focus': {
83
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
84
- backgroundColor: backgroundColorFocus[appearance],
85
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
86
- borderColor: borderColorFocus[appearance],
87
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
88
- boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColorFocus[appearance])
89
- },
90
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
91
- '&:not(:focus)': {
92
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
93
- backgroundColor: backgroundColor[appearance],
94
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
95
- borderColor: borderColor[appearance]
96
- },
97
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
98
- '&[data-invalid]:focus': {
99
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
100
- backgroundColor: invalidRules.backgroundColorFocus,
101
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
102
- borderColor: invalidRules.borderColorFocus,
103
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
104
- boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", invalidRules.borderColorFocus)
105
- },
106
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
107
- '&[data-invalid]:not(:focus)': {
108
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
109
- backgroundColor: invalidRules.backgroundColor,
110
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
111
- borderColor: invalidRules.borderColor,
112
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
113
- boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", invalidRules.borderColor)
114
- }
115
- }, appearance === 'standard' ? {
116
- '&:disabled:focus': {
117
- backgroundColor: disabledRules.backgroundColorFocus,
118
- borderColor: disabledRules.borderColorFocus
119
- },
120
- '&:disabled:not(:focus)': {
121
- backgroundColor: disabledRules.backgroundColor,
122
- borderColor: disabledRules.borderColor
123
- }
124
- } : {}));
125
- };
126
- var placeholderStyles = css({
127
- '&::placeholder': {
128
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
129
- color: componentTokens.placeholderTextColor
130
- },
131
- '&:disabled::placeholder': {
132
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
133
- color: disabledRules.textColor
134
- }
135
- });
136
- var hoverBackgroundAndBorderStyles = function hoverBackgroundAndBorderStyles(appearance) {
137
- return appearance && css({
138
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
139
- '&:hover:not(:read-only):not(:focus)': {
140
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
141
- backgroundColor: backgroundColorHover[appearance],
142
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
143
- borderColor: borderColorHover[appearance],
144
- '&:disabled': {
145
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
146
- backgroundColor: disabledRules.backgroundColorHover
147
- },
148
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
149
- '&[data-invalid]': {
150
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
151
- backgroundColor: invalidRules.backgroundColorHover,
152
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
153
- borderColor: invalidRules.borderColor,
154
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
155
- boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", invalidRules.borderColor)
156
- }
157
- }
158
- });
159
- };
160
- var resizeStyle = function resizeStyle(resize) {
161
- if (resize === 'horizontal' || resize === 'vertical') {
162
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
163
- return css({
164
- resize: resize
165
- });
166
- }
167
- if (resize === 'auto') {
168
- return css({
169
- resize: 'both'
170
- });
171
- }
172
- return css({
173
- resize: 'none'
174
- });
175
- };
176
- var borderStyle = function borderStyle(appearance) {
177
- return css({
178
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
179
- borderStyle: appearance === 'none' ? 'none' : 'solid'
180
- });
181
- };
182
- var fontFamilyStyle = function fontFamilyStyle(isMonospaced) {
183
- return css({
184
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
185
- fontFamily: isMonospaced ? "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)" : "var(--ds-font-family-body, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
186
- });
187
- };
188
- var borderPaddingAndHeightStyles = function borderPaddingAndHeightStyles() {
189
- var minimumRows = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
190
- var appearance = arguments.length > 1 ? arguments[1] : undefined;
191
- var borderWidth = appearance !== 'none' ? 1 : 2;
192
- var horizontalPaddingWithoutBorderWidth = horizontalPadding - borderWidth;
193
- var borderHeight = borderWidth;
194
- return css({
195
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
196
- '&[data-compact]': {
197
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
198
- minHeight: borderBoxMinHeightCompact(minimumRows, borderHeight),
199
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
200
- padding: "".concat(compactVerticalPadding, "px ").concat(horizontalPaddingWithoutBorderWidth, "px"),
201
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography
202
- lineHeight: lineHeightCompact / 14
203
- },
204
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
205
- '&:not([data-compact])': {
206
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
207
- minHeight: borderBoxMinHeight(minimumRows, borderHeight),
208
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
209
- padding: "".concat(verticalPadding, "px ").concat(horizontalPaddingWithoutBorderWidth, "px"),
210
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography
211
- lineHeight: lineHeightBase / 14
212
- }
213
- });
214
- };
215
- var staticStyles = css({
216
- display: 'block',
217
- boxSizing: 'border-box',
218
- width: '100%',
219
- minWidth: 0,
220
- maxWidth: '100%',
221
- margin: 0,
222
- position: 'relative',
223
- flex: '1 1 100%',
224
- borderRadius: "var(--ds-border-radius, 3px)",
225
- // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
226
- borderWidth: 1,
227
- font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
228
- outline: 'none',
229
- overflow: 'auto',
230
- transition: "background-color ".concat(transitionDuration, " ease-in-out,\n border-color ").concat(transitionDuration, " ease-in-out"),
231
- wordWrap: 'break-word',
232
- '&:disabled': _objectSpread({
233
- cursor: 'not-allowed'
234
- }, overrideSafariDisabledStyles),
235
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
236
- '&::-ms-clear': {
237
- display: 'none'
238
- },
239
- '&:invalid': {
240
- boxShadow: 'none'
241
- }
242
- });
243
-
244
- // suggestion: these two could be merged into cssMap during @compiled rewrite
245
- var newFontStyles = css(_defineProperty({
246
- font: "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
247
- }, media.above.xs, {
248
- font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
249
- }));
250
- var monospacedFontFamilyStyles = css(_defineProperty({
251
- fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
252
- }, media.above.xs, {
253
- // Reapply the monospaced font family as the font declaration used in the breakpoint in newFontStyles overrides it otherwise
254
- fontFamily: "var(--ds-font-family-code, ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)"
255
- }));
256
- export var getBaseStyles = function getBaseStyles(_ref) {
257
- var minimumRows = _ref.minimumRows,
258
- resize = _ref.resize,
259
- appearance = _ref.appearance,
260
- isMonospaced = _ref.isMonospaced,
261
- maxHeight = _ref.maxHeight;
262
- return (
263
- // eslint-disable-next-line @repo/internal/styles/no-exported-styles
264
- css(
265
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
266
- staticStyles,
267
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
268
- borderPaddingAndHeightStyles(minimumRows, appearance),
269
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
270
- resizeStyle(resize),
271
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
272
- borderStyle(appearance),
273
- // @todo: remove in `platform_design_system_team_safari_input_fix` cleanup
274
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
275
- fontFamilyStyle(isMonospaced),
276
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
277
- fg('platform_design_system_team_safari_input_fix') ? newFontStyles : undefined,
278
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
279
- isMonospaced && fg('platform_design_system_team_safari_input_fix') ? monospacedFontFamilyStyles : undefined,
280
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
281
- {
282
- maxHeight: maxHeight
283
- })
284
- );
285
- };
286
- export var dynamicStyles = function dynamicStyles(appearance) {
287
- return (
288
- // eslint-disable-next-line @repo/internal/styles/no-exported-styles
289
- css(
290
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
291
- bgAndBorderColorStyles(appearance),
292
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
293
- hoverBackgroundAndBorderStyles(appearance),
294
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
295
- placeholderStyles, {
296
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
297
- color: componentTokens.textColor,
298
- '&:disabled': {
299
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
300
- color: disabledRules.textColor
301
- }
302
- })
303
- );
304
- };
package/dist/types/component-tokens.d.ts DELETED
@@ -1,13 +0,0 @@
1
- export declare const disabledBackground: "var(--ds-background-disabled)";
2
- export declare const disabledBorder: "var(--ds-border-disabled)";
3
- export declare const invalidBorderColor: "var(--ds-border-danger)";
4
- export declare const defaultBorderColor: "var(--ds-border-input)";
5
- export declare const defaultBorderColorFocus: "var(--ds-border-focused)";
6
- export declare const defaultBackgroundColor: "var(--ds-background-input)";
7
- export declare const defaultBackgroundColorHover: "var(--ds-background-input-hovered)";
8
- export declare const defaultBackgroundColorFocus: "var(--ds-background-input-pressed)";
9
- export declare const subtleBorderColorHover: "var(--ds-border-input)";
10
- export declare const placeholderTextColor: "var(--ds-text-subtlest)";
11
- export declare const textColor: "var(--ds-text)";
12
- export declare const disabledTextColor: "var(--ds-text-disabled)";
13
- export declare const transparent = "transparent";
package/dist/types/styles.d.ts DELETED
@@ -1,11 +0,0 @@
1
- import { type TextAreaProps } from './types';
2
- export interface StyleProps {
3
- minimumRows: number | undefined;
4
- resize: string | undefined;
5
- appearance: string | undefined;
6
- isMonospaced: boolean | undefined;
7
- maxHeight: string;
8
- }
9
- export declare const borderWidth = 2;
10
- export declare const getBaseStyles: ({ minimumRows, resize, appearance, isMonospaced, maxHeight, }: StyleProps) => import("@emotion/react").SerializedStyles;
11
- export declare const dynamicStyles: (appearance: TextAreaProps['appearance']) => import("@emotion/react").SerializedStyles;
package/dist/types-ts4.5/component-tokens.d.ts DELETED
@@ -1,13 +0,0 @@
1
- export declare const disabledBackground: "var(--ds-background-disabled)";
2
- export declare const disabledBorder: "var(--ds-border-disabled)";
3
- export declare const invalidBorderColor: "var(--ds-border-danger)";
4
- export declare const defaultBorderColor: "var(--ds-border-input)";
5
- export declare const defaultBorderColorFocus: "var(--ds-border-focused)";
6
- export declare const defaultBackgroundColor: "var(--ds-background-input)";
7
- export declare const defaultBackgroundColorHover: "var(--ds-background-input-hovered)";
8
- export declare const defaultBackgroundColorFocus: "var(--ds-background-input-pressed)";
9
- export declare const subtleBorderColorHover: "var(--ds-border-input)";
10
- export declare const placeholderTextColor: "var(--ds-text-subtlest)";
11
- export declare const textColor: "var(--ds-text)";
12
- export declare const disabledTextColor: "var(--ds-text-disabled)";
13
- export declare const transparent = "transparent";