@qasa/qds-ui 0.2.0 → 0.4.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 (38) hide show
  1. package/dist/cjs/index.js +1 -1
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/cjs/types/components/avatar/avatar.d.ts +1 -0
  4. package/dist/cjs/types/components/button/button-styles.d.ts +67 -40
  5. package/dist/cjs/types/components/heading/heading.d.ts +37 -21
  6. package/dist/cjs/types/components/icon/create-icon.d.ts +31 -12
  7. package/dist/cjs/types/components/icon/icons/index.d.ts +1 -0
  8. package/dist/cjs/types/components/icon/icons/minus.d.ts +2 -0
  9. package/dist/cjs/types/components/icon-button/icon-button-styles.d.ts +50 -28
  10. package/dist/cjs/types/components/label/label.d.ts +24 -14
  11. package/dist/cjs/types/components/loading-dots/loading-dots.d.ts +23 -11
  12. package/dist/cjs/types/components/paragraph/paragraph.d.ts +24 -14
  13. package/dist/cjs/types/styles/common-styles.d.ts +28 -11
  14. package/dist/cjs/types/theme/foundations/colors.d.ts +21 -13
  15. package/dist/cjs/types/theme/foundations/index.d.ts +23 -11
  16. package/dist/cjs/types/theme/foundations/typography.d.ts +2 -0
  17. package/dist/cjs/types/theme/theme-tools.d.ts +23 -11
  18. package/dist/cjs/types/theme/theme.d.ts +23 -11
  19. package/dist/esm/index.js +1 -1
  20. package/dist/esm/index.js.map +1 -1
  21. package/dist/esm/types/components/avatar/avatar.d.ts +1 -0
  22. package/dist/esm/types/components/button/button-styles.d.ts +67 -40
  23. package/dist/esm/types/components/heading/heading.d.ts +37 -21
  24. package/dist/esm/types/components/icon/create-icon.d.ts +31 -12
  25. package/dist/esm/types/components/icon/icons/index.d.ts +1 -0
  26. package/dist/esm/types/components/icon/icons/minus.d.ts +2 -0
  27. package/dist/esm/types/components/icon-button/icon-button-styles.d.ts +50 -28
  28. package/dist/esm/types/components/label/label.d.ts +24 -14
  29. package/dist/esm/types/components/loading-dots/loading-dots.d.ts +23 -11
  30. package/dist/esm/types/components/paragraph/paragraph.d.ts +24 -14
  31. package/dist/esm/types/styles/common-styles.d.ts +28 -11
  32. package/dist/esm/types/theme/foundations/colors.d.ts +21 -13
  33. package/dist/esm/types/theme/foundations/index.d.ts +23 -11
  34. package/dist/esm/types/theme/foundations/typography.d.ts +2 -0
  35. package/dist/esm/types/theme/theme-tools.d.ts +23 -11
  36. package/dist/esm/types/theme/theme.d.ts +23 -11
  37. package/dist/index.d.ts +334 -174
  38. package/package.json +1 -1
@@ -58,15 +58,18 @@ declare const getSizeStyles: (theme: {
58
58
  gray30: string;
59
59
  gray20: string;
60
60
  gray10: string;
61
- brand90: string;
62
- brand80: string;
63
- brand70: string;
64
- brand60: string;
65
- brand50: string;
66
- brand40: string;
67
- brand30: string;
68
- brand20: string;
69
- brand10: string;
61
+ uiPink: string;
62
+ uiPinkDark: string;
63
+ uiPinkLight: string;
64
+ brown: string;
65
+ brownDark: string;
66
+ brownLight: string;
67
+ offWhite: string;
68
+ offWhiteDark: string;
69
+ offWhiteLight: string;
70
+ softPink: string;
71
+ warmYellow: string;
72
+ softYellow: string;
70
73
  red10: string;
71
74
  red20: string;
72
75
  red30: string;
@@ -113,6 +116,9 @@ declare const getSizeStyles: (theme: {
113
116
  brandSecondary: string;
114
117
  brandSecondaryHover: string;
115
118
  brandSecondaryActive: string;
119
+ brandTertiary: string;
120
+ brandTertiaryHover: string;
121
+ brandTertiaryActive: string;
116
122
  negative: string;
117
123
  warning: string;
118
124
  positive: string;
@@ -127,7 +133,9 @@ declare const getSizeStyles: (theme: {
127
133
  negative: string;
128
134
  warning: string;
129
135
  positive: string;
130
- onColor: string;
136
+ onBrandPrimary: string;
137
+ onBrandSecondary: string;
138
+ onBrandTertiary: string;
131
139
  };
132
140
  icon: {
133
141
  default: string;
@@ -137,7 +145,9 @@ declare const getSizeStyles: (theme: {
137
145
  negative: string;
138
146
  warning: string;
139
147
  success: string;
140
- onColor: string;
148
+ onBrandPrimary: string;
149
+ onBrandSecondary: string;
150
+ onBrandTertiary: string;
141
151
  };
142
152
  border: {
143
153
  default: string;
@@ -206,6 +216,7 @@ declare const getSizeStyles: (theme: {
206
216
  fontSize: string;
207
217
  lineHeight: string;
208
218
  letterSpacing: string;
219
+ fontFeatureSettings: string;
209
220
  };
210
221
  md: {
211
222
  fontFamily: string;
@@ -213,6 +224,7 @@ declare const getSizeStyles: (theme: {
213
224
  fontSize: string;
214
225
  lineHeight: string;
215
226
  letterSpacing: string;
227
+ fontFeatureSettings: string;
216
228
  };
217
229
  };
218
230
  title: {
@@ -328,9 +340,7 @@ declare const getSizeStyles: (theme: {
328
340
  letterSpacing: string;
329
341
  };
330
342
  };
331
- }; /**
332
- * Size of the label
333
- */
343
+ };
334
344
  }) => {
335
345
  sm: {
336
346
  fontFamily: string;
@@ -59,15 +59,18 @@ declare const getSizeStyles: (theme: {
59
59
  gray30: string;
60
60
  gray20: string;
61
61
  gray10: string;
62
- brand90: string;
63
- brand80: string;
64
- brand70: string;
65
- brand60: string;
66
- brand50: string;
67
- brand40: string;
68
- brand30: string;
69
- brand20: string;
70
- brand10: string;
62
+ uiPink: string;
63
+ uiPinkDark: string;
64
+ uiPinkLight: string;
65
+ brown: string;
66
+ brownDark: string;
67
+ brownLight: string;
68
+ offWhite: string;
69
+ offWhiteDark: string;
70
+ offWhiteLight: string;
71
+ softPink: string;
72
+ warmYellow: string;
73
+ softYellow: string;
71
74
  red10: string;
72
75
  red20: string;
73
76
  red30: string;
@@ -114,6 +117,9 @@ declare const getSizeStyles: (theme: {
114
117
  brandSecondary: string;
115
118
  brandSecondaryHover: string;
116
119
  brandSecondaryActive: string;
120
+ brandTertiary: string;
121
+ brandTertiaryHover: string;
122
+ brandTertiaryActive: string;
117
123
  negative: string;
118
124
  warning: string;
119
125
  positive: string;
@@ -128,7 +134,9 @@ declare const getSizeStyles: (theme: {
128
134
  negative: string;
129
135
  warning: string;
130
136
  positive: string;
131
- onColor: string;
137
+ onBrandPrimary: string;
138
+ onBrandSecondary: string;
139
+ onBrandTertiary: string;
132
140
  };
133
141
  icon: {
134
142
  default: string;
@@ -138,7 +146,9 @@ declare const getSizeStyles: (theme: {
138
146
  negative: string;
139
147
  warning: string;
140
148
  success: string;
141
- onColor: string;
149
+ onBrandPrimary: string;
150
+ onBrandSecondary: string;
151
+ onBrandTertiary: string;
142
152
  };
143
153
  border: {
144
154
  default: string;
@@ -207,6 +217,7 @@ declare const getSizeStyles: (theme: {
207
217
  fontSize: string;
208
218
  lineHeight: string;
209
219
  letterSpacing: string;
220
+ fontFeatureSettings: string;
210
221
  };
211
222
  md: {
212
223
  fontFamily: string;
@@ -214,6 +225,7 @@ declare const getSizeStyles: (theme: {
214
225
  fontSize: string;
215
226
  lineHeight: string;
216
227
  letterSpacing: string;
228
+ fontFeatureSettings: string;
217
229
  };
218
230
  };
219
231
  title: {
@@ -59,15 +59,18 @@ declare const getSizeStyles: (theme: {
59
59
  gray30: string;
60
60
  gray20: string;
61
61
  gray10: string;
62
- brand90: string;
63
- brand80: string;
64
- brand70: string;
65
- brand60: string;
66
- brand50: string;
67
- brand40: string;
68
- brand30: string;
69
- brand20: string;
70
- brand10: string;
62
+ uiPink: string;
63
+ uiPinkDark: string;
64
+ uiPinkLight: string;
65
+ brown: string;
66
+ brownDark: string;
67
+ brownLight: string;
68
+ offWhite: string;
69
+ offWhiteDark: string;
70
+ offWhiteLight: string;
71
+ softPink: string;
72
+ warmYellow: string;
73
+ softYellow: string;
71
74
  red10: string;
72
75
  red20: string;
73
76
  red30: string;
@@ -114,6 +117,9 @@ declare const getSizeStyles: (theme: {
114
117
  brandSecondary: string;
115
118
  brandSecondaryHover: string;
116
119
  brandSecondaryActive: string;
120
+ brandTertiary: string;
121
+ brandTertiaryHover: string;
122
+ brandTertiaryActive: string;
117
123
  negative: string;
118
124
  warning: string;
119
125
  positive: string;
@@ -128,7 +134,9 @@ declare const getSizeStyles: (theme: {
128
134
  negative: string;
129
135
  warning: string;
130
136
  positive: string;
131
- onColor: string;
137
+ onBrandPrimary: string;
138
+ onBrandSecondary: string;
139
+ onBrandTertiary: string;
132
140
  };
133
141
  icon: {
134
142
  default: string;
@@ -138,7 +146,9 @@ declare const getSizeStyles: (theme: {
138
146
  negative: string;
139
147
  warning: string;
140
148
  success: string;
141
- onColor: string;
149
+ onBrandPrimary: string;
150
+ onBrandSecondary: string;
151
+ onBrandTertiary: string;
142
152
  };
143
153
  border: {
144
154
  default: string;
@@ -207,6 +217,7 @@ declare const getSizeStyles: (theme: {
207
217
  fontSize: string;
208
218
  lineHeight: string;
209
219
  letterSpacing: string;
220
+ fontFeatureSettings: string;
210
221
  };
211
222
  md: {
212
223
  fontFamily: string;
@@ -214,6 +225,7 @@ declare const getSizeStyles: (theme: {
214
225
  fontSize: string;
215
226
  lineHeight: string;
216
227
  letterSpacing: string;
228
+ fontFeatureSettings: string;
217
229
  };
218
230
  };
219
231
  title: {
@@ -246,9 +258,7 @@ declare const getSizeStyles: (theme: {
246
258
  letterSpacing: string;
247
259
  };
248
260
  '2xs': {
249
- fontFamily: string; /**
250
- * Truncates the text after a specific number of lines
251
- */
261
+ fontFamily: string;
252
262
  fontWeight: string;
253
263
  fontSize: string;
254
264
  lineHeight: string;
@@ -56,15 +56,18 @@ export declare const getFormFieldBaseStyles: (theme: {
56
56
  gray30: string;
57
57
  gray20: string;
58
58
  gray10: string;
59
- brand90: string;
60
- brand80: string;
61
- brand70: string;
62
- brand60: string;
63
- brand50: string;
64
- brand40: string;
65
- brand30: string;
66
- brand20: string;
67
- brand10: string;
59
+ uiPink: string;
60
+ uiPinkDark: string;
61
+ uiPinkLight: string;
62
+ brown: string;
63
+ brownDark: string;
64
+ brownLight: string;
65
+ offWhite: string;
66
+ offWhiteDark: string;
67
+ offWhiteLight: string;
68
+ softPink: string;
69
+ warmYellow: string;
70
+ softYellow: string;
68
71
  red10: string;
69
72
  red20: string;
70
73
  red30: string;
@@ -111,6 +114,9 @@ export declare const getFormFieldBaseStyles: (theme: {
111
114
  brandSecondary: string;
112
115
  brandSecondaryHover: string;
113
116
  brandSecondaryActive: string;
117
+ brandTertiary: string;
118
+ brandTertiaryHover: string;
119
+ brandTertiaryActive: string;
114
120
  negative: string;
115
121
  warning: string;
116
122
  positive: string;
@@ -125,7 +131,9 @@ export declare const getFormFieldBaseStyles: (theme: {
125
131
  negative: string;
126
132
  warning: string;
127
133
  positive: string;
128
- onColor: string;
134
+ onBrandPrimary: string;
135
+ onBrandSecondary: string;
136
+ onBrandTertiary: string;
129
137
  };
130
138
  icon: {
131
139
  default: string;
@@ -135,7 +143,9 @@ export declare const getFormFieldBaseStyles: (theme: {
135
143
  negative: string;
136
144
  warning: string;
137
145
  success: string;
138
- onColor: string;
146
+ onBrandPrimary: string;
147
+ onBrandSecondary: string;
148
+ onBrandTertiary: string;
139
149
  };
140
150
  border: {
141
151
  default: string;
@@ -204,6 +214,7 @@ export declare const getFormFieldBaseStyles: (theme: {
204
214
  fontSize: string;
205
215
  lineHeight: string;
206
216
  letterSpacing: string;
217
+ fontFeatureSettings: string;
207
218
  };
208
219
  md: {
209
220
  fontFamily: string;
@@ -211,6 +222,7 @@ export declare const getFormFieldBaseStyles: (theme: {
211
222
  fontSize: string;
212
223
  lineHeight: string;
213
224
  letterSpacing: string;
225
+ fontFeatureSettings: string;
214
226
  };
215
227
  };
216
228
  title: {
@@ -365,5 +377,10 @@ export declare const getFormFieldBaseStyles: (theme: {
365
377
  borderRadius: string;
366
378
  backgroundColor: string;
367
379
  color: string;
380
+ WebkitTouchCallout: "none";
381
+ WebkitTapHighlightColor: "transparent";
382
+ '&::-webkit-date-and-time-value': {
383
+ textAlign: "left";
384
+ };
368
385
  alignItems: "center";
369
386
  };
@@ -11,15 +11,18 @@ export declare const colors: {
11
11
  gray30: string;
12
12
  gray20: string;
13
13
  gray10: string;
14
- brand90: string;
15
- brand80: string;
16
- brand70: string;
17
- brand60: string;
18
- brand50: string;
19
- brand40: string;
20
- brand30: string;
21
- brand20: string;
22
- brand10: string;
14
+ uiPink: string;
15
+ uiPinkDark: string;
16
+ uiPinkLight: string;
17
+ brown: string;
18
+ brownDark: string;
19
+ brownLight: string;
20
+ offWhite: string;
21
+ offWhiteDark: string;
22
+ offWhiteLight: string;
23
+ softPink: string;
24
+ warmYellow: string;
25
+ softYellow: string;
23
26
  red10: string;
24
27
  red20: string;
25
28
  red30: string;
@@ -66,6 +69,9 @@ export declare const colors: {
66
69
  brandSecondary: string;
67
70
  brandSecondaryHover: string;
68
71
  brandSecondaryActive: string;
72
+ brandTertiary: string;
73
+ brandTertiaryHover: string;
74
+ brandTertiaryActive: string;
69
75
  negative: string;
70
76
  warning: string;
71
77
  positive: string;
@@ -80,8 +86,9 @@ export declare const colors: {
80
86
  negative: string;
81
87
  warning: string;
82
88
  positive: string;
83
- /** For usage on colored/darker backgrounds */
84
- onColor: string;
89
+ onBrandPrimary: string;
90
+ onBrandSecondary: string;
91
+ onBrandTertiary: string;
85
92
  };
86
93
  icon: {
87
94
  default: string;
@@ -91,8 +98,9 @@ export declare const colors: {
91
98
  negative: string;
92
99
  warning: string;
93
100
  success: string;
94
- /** For usage on colored/darker backgrounds */
95
- onColor: string;
101
+ onBrandPrimary: string;
102
+ onBrandSecondary: string;
103
+ onBrandTertiary: string;
96
104
  };
97
105
  border: {
98
106
  default: string;
@@ -61,15 +61,18 @@ export declare const foundations: {
61
61
  gray30: string;
62
62
  gray20: string;
63
63
  gray10: string;
64
- brand90: string;
65
- brand80: string;
66
- brand70: string;
67
- brand60: string;
68
- brand50: string;
69
- brand40: string;
70
- brand30: string;
71
- brand20: string;
72
- brand10: string;
64
+ uiPink: string;
65
+ uiPinkDark: string;
66
+ uiPinkLight: string;
67
+ brown: string;
68
+ brownDark: string;
69
+ brownLight: string;
70
+ offWhite: string;
71
+ offWhiteDark: string;
72
+ offWhiteLight: string;
73
+ softPink: string;
74
+ warmYellow: string;
75
+ softYellow: string;
73
76
  red10: string;
74
77
  red20: string;
75
78
  red30: string;
@@ -116,6 +119,9 @@ export declare const foundations: {
116
119
  brandSecondary: string;
117
120
  brandSecondaryHover: string;
118
121
  brandSecondaryActive: string;
122
+ brandTertiary: string;
123
+ brandTertiaryHover: string;
124
+ brandTertiaryActive: string;
119
125
  negative: string;
120
126
  warning: string;
121
127
  positive: string;
@@ -130,7 +136,9 @@ export declare const foundations: {
130
136
  negative: string;
131
137
  warning: string;
132
138
  positive: string;
133
- onColor: string;
139
+ onBrandPrimary: string;
140
+ onBrandSecondary: string;
141
+ onBrandTertiary: string;
134
142
  };
135
143
  icon: {
136
144
  default: string;
@@ -140,7 +148,9 @@ export declare const foundations: {
140
148
  negative: string;
141
149
  warning: string;
142
150
  success: string;
143
- onColor: string;
151
+ onBrandPrimary: string;
152
+ onBrandSecondary: string;
153
+ onBrandTertiary: string;
144
154
  };
145
155
  border: {
146
156
  default: string;
@@ -209,6 +219,7 @@ export declare const foundations: {
209
219
  fontSize: string;
210
220
  lineHeight: string;
211
221
  letterSpacing: string;
222
+ fontFeatureSettings: string;
212
223
  };
213
224
  md: {
214
225
  fontFamily: string;
@@ -216,6 +227,7 @@ export declare const foundations: {
216
227
  fontSize: string;
217
228
  lineHeight: string;
218
229
  letterSpacing: string;
230
+ fontFeatureSettings: string;
219
231
  };
220
232
  };
221
233
  title: {
@@ -6,6 +6,7 @@ export declare const typography: {
6
6
  fontSize: string;
7
7
  lineHeight: string;
8
8
  letterSpacing: string;
9
+ fontFeatureSettings: string;
9
10
  };
10
11
  md: {
11
12
  fontFamily: string;
@@ -13,6 +14,7 @@ export declare const typography: {
13
14
  fontSize: string;
14
15
  lineHeight: string;
15
16
  letterSpacing: string;
17
+ fontFeatureSettings: string;
16
18
  };
17
19
  };
18
20
  title: {
@@ -21,6 +21,7 @@ export declare const overrideTheme: (overrides: ThemeOverrides) => {
21
21
  fontSize: string;
22
22
  lineHeight: string;
23
23
  letterSpacing: string;
24
+ fontFeatureSettings: string;
24
25
  };
25
26
  md: {
26
27
  fontFamily: string;
@@ -28,6 +29,7 @@ export declare const overrideTheme: (overrides: ThemeOverrides) => {
28
29
  fontSize: string;
29
30
  lineHeight: string;
30
31
  letterSpacing: string;
32
+ fontFeatureSettings: string;
31
33
  };
32
34
  };
33
35
  title: {
@@ -157,15 +159,18 @@ export declare const overrideTheme: (overrides: ThemeOverrides) => {
157
159
  gray30: string;
158
160
  gray20: string;
159
161
  gray10: string;
160
- brand90: string;
161
- brand80: string;
162
- brand70: string;
163
- brand60: string;
164
- brand50: string;
165
- brand40: string;
166
- brand30: string;
167
- brand20: string;
168
- brand10: string;
162
+ uiPink: string;
163
+ uiPinkDark: string;
164
+ uiPinkLight: string;
165
+ brown: string;
166
+ brownDark: string;
167
+ brownLight: string;
168
+ offWhite: string;
169
+ offWhiteDark: string;
170
+ offWhiteLight: string;
171
+ softPink: string;
172
+ warmYellow: string;
173
+ softYellow: string;
169
174
  red10: string;
170
175
  red20: string;
171
176
  red30: string;
@@ -212,6 +217,9 @@ export declare const overrideTheme: (overrides: ThemeOverrides) => {
212
217
  brandSecondary: string;
213
218
  brandSecondaryHover: string;
214
219
  brandSecondaryActive: string;
220
+ brandTertiary: string;
221
+ brandTertiaryHover: string;
222
+ brandTertiaryActive: string;
215
223
  negative: string;
216
224
  warning: string;
217
225
  positive: string;
@@ -226,7 +234,9 @@ export declare const overrideTheme: (overrides: ThemeOverrides) => {
226
234
  negative: string;
227
235
  warning: string;
228
236
  positive: string;
229
- onColor: string;
237
+ onBrandPrimary: string;
238
+ onBrandSecondary: string;
239
+ onBrandTertiary: string;
230
240
  };
231
241
  icon: {
232
242
  default: string;
@@ -236,7 +246,9 @@ export declare const overrideTheme: (overrides: ThemeOverrides) => {
236
246
  negative: string;
237
247
  warning: string;
238
248
  success: string;
239
- onColor: string;
249
+ onBrandPrimary: string;
250
+ onBrandSecondary: string;
251
+ onBrandTertiary: string;
240
252
  };
241
253
  border: {
242
254
  default: string;
@@ -56,15 +56,18 @@ export declare const theme: {
56
56
  gray30: string;
57
57
  gray20: string;
58
58
  gray10: string;
59
- brand90: string;
60
- brand80: string;
61
- brand70: string;
62
- brand60: string;
63
- brand50: string;
64
- brand40: string;
65
- brand30: string;
66
- brand20: string;
67
- brand10: string;
59
+ uiPink: string;
60
+ uiPinkDark: string;
61
+ uiPinkLight: string;
62
+ brown: string;
63
+ brownDark: string;
64
+ brownLight: string;
65
+ offWhite: string;
66
+ offWhiteDark: string;
67
+ offWhiteLight: string;
68
+ softPink: string;
69
+ warmYellow: string;
70
+ softYellow: string;
68
71
  red10: string;
69
72
  red20: string;
70
73
  red30: string;
@@ -111,6 +114,9 @@ export declare const theme: {
111
114
  brandSecondary: string;
112
115
  brandSecondaryHover: string;
113
116
  brandSecondaryActive: string;
117
+ brandTertiary: string;
118
+ brandTertiaryHover: string;
119
+ brandTertiaryActive: string;
114
120
  negative: string;
115
121
  warning: string;
116
122
  positive: string;
@@ -125,7 +131,9 @@ export declare const theme: {
125
131
  negative: string;
126
132
  warning: string;
127
133
  positive: string;
128
- onColor: string;
134
+ onBrandPrimary: string;
135
+ onBrandSecondary: string;
136
+ onBrandTertiary: string;
129
137
  };
130
138
  icon: {
131
139
  default: string;
@@ -135,7 +143,9 @@ export declare const theme: {
135
143
  negative: string;
136
144
  warning: string;
137
145
  success: string;
138
- onColor: string;
146
+ onBrandPrimary: string;
147
+ onBrandSecondary: string;
148
+ onBrandTertiary: string;
139
149
  };
140
150
  border: {
141
151
  default: string;
@@ -204,6 +214,7 @@ export declare const theme: {
204
214
  fontSize: string;
205
215
  lineHeight: string;
206
216
  letterSpacing: string;
217
+ fontFeatureSettings: string;
207
218
  };
208
219
  md: {
209
220
  fontFamily: string;
@@ -211,6 +222,7 @@ export declare const theme: {
211
222
  fontSize: string;
212
223
  lineHeight: string;
213
224
  letterSpacing: string;
225
+ fontFeatureSettings: string;
214
226
  };
215
227
  };
216
228
  title: {