@atlaskit/textfield 5.6.8 → 6.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 (22) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/index.js +1 -8
  3. package/dist/cjs/styles.js +43 -98
  4. package/dist/cjs/text-field.js +6 -12
  5. package/dist/es2019/index.js +1 -2
  6. package/dist/es2019/styles.js +43 -92
  7. package/dist/es2019/text-field.js +3 -7
  8. package/dist/esm/index.js +1 -2
  9. package/dist/esm/styles.js +42 -91
  10. package/dist/esm/text-field.js +4 -9
  11. package/dist/types/index.d.ts +0 -1
  12. package/dist/types/styles.d.ts +2 -127
  13. package/dist/types-ts4.5/index.d.ts +0 -1
  14. package/dist/types-ts4.5/styles.d.ts +2 -127
  15. package/package.json +4 -3
  16. package/report.api.md +0 -126
  17. package/tmp/api-report-tmp.d.ts +0 -126
  18. package/dist/cjs/component-tokens.js +0 -63
  19. package/dist/es2019/component-tokens.js +0 -46
  20. package/dist/esm/component-tokens.js +0 -46
  21. package/dist/types/component-tokens.d.ts +0 -44
  22. package/dist/types-ts4.5/component-tokens.d.ts +0 -44
package/report.api.md CHANGED
@@ -28,132 +28,6 @@ const _default: React_2.NamedExoticComponent<
28
28
  >;
29
29
  export default _default;
30
30
 
31
- // @public (undocumented)
32
- export const TextFieldColors: {
33
- backgroundColor: {
34
- standard: {
35
- light: 'var(--ds-background-input)';
36
- dark: 'var(--ds-background-input)';
37
- };
38
- subtle: {
39
- light: string;
40
- dark: string;
41
- };
42
- none: {
43
- light: string;
44
- dark: string;
45
- };
46
- };
47
- backgroundColorFocus: {
48
- standard: {
49
- light: 'var(--ds-background-input-pressed)';
50
- dark: 'var(--ds-background-input-pressed)';
51
- };
52
- subtle: {
53
- light: 'var(--ds-background-input-pressed)';
54
- dark: 'var(--ds-background-input-pressed)';
55
- };
56
- none: {
57
- light: string;
58
- dark: string;
59
- };
60
- };
61
- backgroundColorHover: {
62
- standard: {
63
- light: 'var(--ds-background-input-hovered)';
64
- dark: 'var(--ds-background-input-hovered)';
65
- };
66
- subtle: {
67
- light: 'var(--ds-background-input-hovered)';
68
- dark: 'var(--ds-background-input-hovered)';
69
- };
70
- none: {
71
- light: string;
72
- dark: string;
73
- };
74
- };
75
- borderColor: {
76
- standard: {
77
- light: 'var(--ds-border-input)';
78
- dark: 'var(--ds-border-input)';
79
- };
80
- subtle: {
81
- light: string;
82
- dark: string;
83
- };
84
- none: {
85
- light: string;
86
- dark: string;
87
- };
88
- };
89
- borderColorFocus: {
90
- standard: {
91
- light: 'var(--ds-border-focused)';
92
- dark: 'var(--ds-border-focused)';
93
- };
94
- subtle: {
95
- light: 'var(--ds-border-focused)';
96
- dark: 'var(--ds-border-focused)';
97
- };
98
- none: {
99
- light: string;
100
- dark: string;
101
- };
102
- };
103
- borderColorHover: {
104
- standard: {
105
- light: 'var(--ds-border-input)';
106
- dark: 'var(--ds-border-input)';
107
- };
108
- subtle: {
109
- light: 'var(--ds-border-input)';
110
- dark: 'var(--ds-border-input)';
111
- };
112
- none: {
113
- light: string;
114
- dark: string;
115
- };
116
- };
117
- placeholderTextColor: {
118
- light: 'var(--ds-text-subtlest)';
119
- dark: 'var(--ds-text-subtlest)';
120
- };
121
- textColor: {
122
- light: 'var(--ds-text)';
123
- dark: 'var(--ds-text)';
124
- };
125
- invalidRules: {
126
- light: {
127
- backgroundColor: 'var(--ds-background-input)';
128
- backgroundColorHover: 'var(--ds-background-input-hovered)';
129
- backgroundColorFocus: 'var(--ds-background-input-pressed)';
130
- borderColor: 'var(--ds-border-danger)';
131
- borderColorFocus: 'var(--ds-border-focused)';
132
- };
133
- dark: {
134
- backgroundColor: 'var(--ds-background-input)';
135
- backgroundColorHover: 'var(--ds-background-input-hovered)';
136
- backgroundColorFocus: 'var(--ds-background-input-pressed)';
137
- borderColor: 'var(--ds-border-danger)';
138
- borderColorFocus: 'var(--ds-border-focused)';
139
- };
140
- };
141
- disabledRules: {
142
- light: {
143
- backgroundColor: 'var(--ds-background-disabled)';
144
- backgroundColorHover: 'var(--ds-background-disabled)';
145
- borderColor: 'var(--ds-background-disabled)';
146
- textColor: 'var(--ds-text-disabled)';
147
- };
148
- dark: {
149
- backgroundColor: 'var(--ds-background-disabled)';
150
- backgroundColorHover: 'var(--ds-background-disabled)';
151
- borderColor: 'var(--ds-background-disabled)';
152
- textColor: 'var(--ds-text-disabled)';
153
- };
154
- };
155
- };
156
-
157
31
  // @public (undocumented)
158
32
  export interface TextFieldProps
159
33
  extends Omit<AllHTMLAttributes<HTMLInputElement>, 'disabled'> {
package/tmp/api-report-tmp.d.ts CHANGED
@@ -15,132 +15,6 @@ export type Appearance = 'none' | 'standard' | 'subtle';
15
15
  const _default: React_2.NamedExoticComponent<TextFieldProps & React_2.RefAttributes<unknown>>;
16
16
  export default _default;
17
17
 
18
- // @public (undocumented)
19
- export const TextFieldColors: {
20
- backgroundColor: {
21
- standard: {
22
- light: "var(--ds-background-input)";
23
- dark: "var(--ds-background-input)";
24
- };
25
- subtle: {
26
- light: string;
27
- dark: string;
28
- };
29
- none: {
30
- light: string;
31
- dark: string;
32
- };
33
- };
34
- backgroundColorFocus: {
35
- standard: {
36
- light: "var(--ds-background-input-pressed)";
37
- dark: "var(--ds-background-input-pressed)";
38
- };
39
- subtle: {
40
- light: "var(--ds-background-input-pressed)";
41
- dark: "var(--ds-background-input-pressed)";
42
- };
43
- none: {
44
- light: string;
45
- dark: string;
46
- };
47
- };
48
- backgroundColorHover: {
49
- standard: {
50
- light: "var(--ds-background-input-hovered)";
51
- dark: "var(--ds-background-input-hovered)";
52
- };
53
- subtle: {
54
- light: "var(--ds-background-input-hovered)";
55
- dark: "var(--ds-background-input-hovered)";
56
- };
57
- none: {
58
- light: string;
59
- dark: string;
60
- };
61
- };
62
- borderColor: {
63
- standard: {
64
- light: "var(--ds-border-input)";
65
- dark: "var(--ds-border-input)";
66
- };
67
- subtle: {
68
- light: string;
69
- dark: string;
70
- };
71
- none: {
72
- light: string;
73
- dark: string;
74
- };
75
- };
76
- borderColorFocus: {
77
- standard: {
78
- light: "var(--ds-border-focused)";
79
- dark: "var(--ds-border-focused)";
80
- };
81
- subtle: {
82
- light: "var(--ds-border-focused)";
83
- dark: "var(--ds-border-focused)";
84
- };
85
- none: {
86
- light: string;
87
- dark: string;
88
- };
89
- };
90
- borderColorHover: {
91
- standard: {
92
- light: "var(--ds-border-input)";
93
- dark: "var(--ds-border-input)";
94
- };
95
- subtle: {
96
- light: "var(--ds-border-input)";
97
- dark: "var(--ds-border-input)";
98
- };
99
- none: {
100
- light: string;
101
- dark: string;
102
- };
103
- };
104
- placeholderTextColor: {
105
- light: "var(--ds-text-subtlest)";
106
- dark: "var(--ds-text-subtlest)";
107
- };
108
- textColor: {
109
- light: "var(--ds-text)";
110
- dark: "var(--ds-text)";
111
- };
112
- invalidRules: {
113
- light: {
114
- backgroundColor: "var(--ds-background-input)";
115
- backgroundColorHover: "var(--ds-background-input-hovered)";
116
- backgroundColorFocus: "var(--ds-background-input-pressed)";
117
- borderColor: "var(--ds-border-danger)";
118
- borderColorFocus: "var(--ds-border-focused)";
119
- };
120
- dark: {
121
- backgroundColor: "var(--ds-background-input)";
122
- backgroundColorHover: "var(--ds-background-input-hovered)";
123
- backgroundColorFocus: "var(--ds-background-input-pressed)";
124
- borderColor: "var(--ds-border-danger)";
125
- borderColorFocus: "var(--ds-border-focused)";
126
- };
127
- };
128
- disabledRules: {
129
- light: {
130
- backgroundColor: "var(--ds-background-disabled)";
131
- backgroundColorHover: "var(--ds-background-disabled)";
132
- borderColor: "var(--ds-background-disabled)";
133
- textColor: "var(--ds-text-disabled)";
134
- };
135
- dark: {
136
- backgroundColor: "var(--ds-background-disabled)";
137
- backgroundColorHover: "var(--ds-background-disabled)";
138
- borderColor: "var(--ds-background-disabled)";
139
- textColor: "var(--ds-text-disabled)";
140
- };
141
- };
142
- };
143
-
144
18
  // @public (undocumented)
145
19
  export interface TextFieldProps extends Omit<AllHTMLAttributes<HTMLInputElement>, 'disabled'> {
146
20
  appearance?: Appearance;
package/dist/cjs/component-tokens.js DELETED
@@ -1,63 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.transparent = exports.textColor = exports.subtleBorderColorHover = exports.placeholderTextColor = exports.disabledTextColor = exports.disabledBackgroundColor = exports.defaultBorderColorFocus = exports.defaultBorderColor = exports.defaultBackgroundColorHover = exports.defaultBackgroundColorFocus = exports.defaultBackgroundColor = void 0;
7
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
8
- var _colors = require("@atlaskit/theme/colors");
9
- var disabledBackgroundColor = {
10
- light: "var(--ds-background-disabled, ".concat(_colors.N10, ")"),
11
- dark: "var(--ds-background-disabled, ".concat(_colors.DN10, ")")
12
- };
13
- exports.disabledBackgroundColor = disabledBackgroundColor;
14
- var defaultBackgroundColor = {
15
- light: "var(--ds-background-input, ".concat(_colors.N10, ")"),
16
- dark: "var(--ds-background-input, ".concat(_colors.DN10, ")")
17
- };
18
- exports.defaultBackgroundColor = defaultBackgroundColor;
19
- var defaultBackgroundColorFocus = {
20
- light: "var(--ds-background-input-pressed, ".concat(_colors.N0, ")"),
21
- dark: "var(--ds-background-input-pressed, ".concat(_colors.DN10, ")")
22
- };
23
- exports.defaultBackgroundColorFocus = defaultBackgroundColorFocus;
24
- var defaultBackgroundColorHover = {
25
- light: "var(--ds-background-input-hovered, ".concat(_colors.N30, ")"),
26
- dark: "var(--ds-background-input-hovered, ".concat(_colors.DN30, ")")
27
- };
28
- exports.defaultBackgroundColorHover = defaultBackgroundColorHover;
29
- var defaultBorderColor = {
30
- light: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? _colors.N100 : _colors.N40, ")"),
31
- dark: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? _colors.DN200 : _colors.DN40, ")")
32
- };
33
- exports.defaultBorderColor = defaultBorderColor;
34
- var defaultBorderColorFocus = {
35
- light: "var(--ds-border-focused, ".concat(_colors.B200, ")"),
36
- dark: "var(--ds-border-focused, ".concat(_colors.B100, ")")
37
- };
38
- exports.defaultBorderColorFocus = defaultBorderColorFocus;
39
- var subtleBorderColorHover = {
40
- light: "var(--ds-border-input, transparent)",
41
- dark: "var(--ds-border-input, transparent)"
42
- };
43
- exports.subtleBorderColorHover = subtleBorderColorHover;
44
- var transparent = {
45
- light: 'transparent',
46
- dark: 'transparent'
47
- };
48
- exports.transparent = transparent;
49
- var textColor = {
50
- light: "var(--ds-text, ".concat(_colors.N900, ")"),
51
- dark: "var(--ds-text, ".concat(_colors.DN600, ")")
52
- };
53
- exports.textColor = textColor;
54
- var disabledTextColor = {
55
- light: "var(--ds-text-disabled, ".concat(_colors.N70, ")"),
56
- dark: "var(--ds-text-disabled, ".concat(_colors.DN90, ")")
57
- };
58
- exports.disabledTextColor = disabledTextColor;
59
- var placeholderTextColor = {
60
- light: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
61
- dark: "var(--ds-text-subtlest, ".concat(_colors.DN200, ")")
62
- };
63
- exports.placeholderTextColor = placeholderTextColor;
package/dist/es2019/component-tokens.js DELETED
@@ -1,46 +0,0 @@
1
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
2
- import { B100, B200, DN10, DN200, DN30, DN40, DN600, DN90, N0, N10, N100, N200, N30, N40, N70, N900 } from '@atlaskit/theme/colors';
3
- export const disabledBackgroundColor = {
4
- light: `var(--ds-background-disabled, ${N10})`,
5
- dark: `var(--ds-background-disabled, ${DN10})`
6
- };
7
- export const defaultBackgroundColor = {
8
- light: `var(--ds-background-input, ${N10})`,
9
- dark: `var(--ds-background-input, ${DN10})`
10
- };
11
- export const defaultBackgroundColorFocus = {
12
- light: `var(--ds-background-input-pressed, ${N0})`,
13
- dark: `var(--ds-background-input-pressed, ${DN10})`
14
- };
15
- export const defaultBackgroundColorHover = {
16
- light: `var(--ds-background-input-hovered, ${N30})`,
17
- dark: `var(--ds-background-input-hovered, ${DN30})`
18
- };
19
- export const defaultBorderColor = {
20
- light: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40})`,
21
- dark: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? DN200 : DN40})`
22
- };
23
- export const defaultBorderColorFocus = {
24
- light: `var(--ds-border-focused, ${B200})`,
25
- dark: `var(--ds-border-focused, ${B100})`
26
- };
27
- export const subtleBorderColorHover = {
28
- light: "var(--ds-border-input, transparent)",
29
- dark: "var(--ds-border-input, transparent)"
30
- };
31
- export const transparent = {
32
- light: 'transparent',
33
- dark: 'transparent'
34
- };
35
- export const textColor = {
36
- light: `var(--ds-text, ${N900})`,
37
- dark: `var(--ds-text, ${DN600})`
38
- };
39
- export const disabledTextColor = {
40
- light: `var(--ds-text-disabled, ${N70})`,
41
- dark: `var(--ds-text-disabled, ${DN90})`
42
- };
43
- export const placeholderTextColor = {
44
- light: `var(--ds-text-subtlest, ${N200})`,
45
- dark: `var(--ds-text-subtlest, ${DN200})`
46
- };
package/dist/esm/component-tokens.js DELETED
@@ -1,46 +0,0 @@
1
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
2
- import { B100, B200, DN10, DN200, DN30, DN40, DN600, DN90, N0, N10, N100, N200, N30, N40, N70, N900 } from '@atlaskit/theme/colors';
3
- export var disabledBackgroundColor = {
4
- light: "var(--ds-background-disabled, ".concat(N10, ")"),
5
- dark: "var(--ds-background-disabled, ".concat(DN10, ")")
6
- };
7
- export var defaultBackgroundColor = {
8
- light: "var(--ds-background-input, ".concat(N10, ")"),
9
- dark: "var(--ds-background-input, ".concat(DN10, ")")
10
- };
11
- export var defaultBackgroundColorFocus = {
12
- light: "var(--ds-background-input-pressed, ".concat(N0, ")"),
13
- dark: "var(--ds-background-input-pressed, ".concat(DN10, ")")
14
- };
15
- export var defaultBackgroundColorHover = {
16
- light: "var(--ds-background-input-hovered, ".concat(N30, ")"),
17
- dark: "var(--ds-background-input-hovered, ".concat(DN30, ")")
18
- };
19
- export var defaultBorderColor = {
20
- light: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40, ")"),
21
- dark: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? DN200 : DN40, ")")
22
- };
23
- export var defaultBorderColorFocus = {
24
- light: "var(--ds-border-focused, ".concat(B200, ")"),
25
- dark: "var(--ds-border-focused, ".concat(B100, ")")
26
- };
27
- export var subtleBorderColorHover = {
28
- light: "var(--ds-border-input, transparent)",
29
- dark: "var(--ds-border-input, transparent)"
30
- };
31
- export var transparent = {
32
- light: 'transparent',
33
- dark: 'transparent'
34
- };
35
- export var textColor = {
36
- light: "var(--ds-text, ".concat(N900, ")"),
37
- dark: "var(--ds-text, ".concat(DN600, ")")
38
- };
39
- export var disabledTextColor = {
40
- light: "var(--ds-text-disabled, ".concat(N70, ")"),
41
- dark: "var(--ds-text-disabled, ".concat(DN90, ")")
42
- };
43
- export var placeholderTextColor = {
44
- light: "var(--ds-text-subtlest, ".concat(N200, ")"),
45
- dark: "var(--ds-text-subtlest, ".concat(DN200, ")")
46
- };
package/dist/types/component-tokens.d.ts DELETED
@@ -1,44 +0,0 @@
1
- export declare const disabledBackgroundColor: {
2
- light: "var(--ds-background-disabled)";
3
- dark: "var(--ds-background-disabled)";
4
- };
5
- export declare const defaultBackgroundColor: {
6
- light: "var(--ds-background-input)";
7
- dark: "var(--ds-background-input)";
8
- };
9
- export declare const defaultBackgroundColorFocus: {
10
- light: "var(--ds-background-input-pressed)";
11
- dark: "var(--ds-background-input-pressed)";
12
- };
13
- export declare const defaultBackgroundColorHover: {
14
- light: "var(--ds-background-input-hovered)";
15
- dark: "var(--ds-background-input-hovered)";
16
- };
17
- export declare const defaultBorderColor: {
18
- light: "var(--ds-border-input)";
19
- dark: "var(--ds-border-input)";
20
- };
21
- export declare const defaultBorderColorFocus: {
22
- light: "var(--ds-border-focused)";
23
- dark: "var(--ds-border-focused)";
24
- };
25
- export declare const subtleBorderColorHover: {
26
- light: "var(--ds-border-input)";
27
- dark: "var(--ds-border-input)";
28
- };
29
- export declare const transparent: {
30
- light: string;
31
- dark: string;
32
- };
33
- export declare const textColor: {
34
- light: "var(--ds-text)";
35
- dark: "var(--ds-text)";
36
- };
37
- export declare const disabledTextColor: {
38
- light: "var(--ds-text-disabled)";
39
- dark: "var(--ds-text-disabled)";
40
- };
41
- export declare const placeholderTextColor: {
42
- light: "var(--ds-text-subtlest)";
43
- dark: "var(--ds-text-subtlest)";
44
- };
package/dist/types-ts4.5/component-tokens.d.ts DELETED
@@ -1,44 +0,0 @@
1
- export declare const disabledBackgroundColor: {
2
- light: "var(--ds-background-disabled)";
3
- dark: "var(--ds-background-disabled)";
4
- };
5
- export declare const defaultBackgroundColor: {
6
- light: "var(--ds-background-input)";
7
- dark: "var(--ds-background-input)";
8
- };
9
- export declare const defaultBackgroundColorFocus: {
10
- light: "var(--ds-background-input-pressed)";
11
- dark: "var(--ds-background-input-pressed)";
12
- };
13
- export declare const defaultBackgroundColorHover: {
14
- light: "var(--ds-background-input-hovered)";
15
- dark: "var(--ds-background-input-hovered)";
16
- };
17
- export declare const defaultBorderColor: {
18
- light: "var(--ds-border-input)";
19
- dark: "var(--ds-border-input)";
20
- };
21
- export declare const defaultBorderColorFocus: {
22
- light: "var(--ds-border-focused)";
23
- dark: "var(--ds-border-focused)";
24
- };
25
- export declare const subtleBorderColorHover: {
26
- light: "var(--ds-border-input)";
27
- dark: "var(--ds-border-input)";
28
- };
29
- export declare const transparent: {
30
- light: string;
31
- dark: string;
32
- };
33
- export declare const textColor: {
34
- light: "var(--ds-text)";
35
- dark: "var(--ds-text)";
36
- };
37
- export declare const disabledTextColor: {
38
- light: "var(--ds-text-disabled)";
39
- dark: "var(--ds-text-disabled)";
40
- };
41
- export declare const placeholderTextColor: {
42
- light: "var(--ds-text-subtlest)";
43
- dark: "var(--ds-text-subtlest)";
44
- };