Skip to content

Commit 76ebef9

Browse files
lidord-wixlidord-wix
authored
Infra/ design tokens infra (#1752)
* designTokens infra * remove colorsPalette from designToken file * imports * fix modifiers ColorLiterals
1 parent faa8724 commit 76ebef9

File tree

14 files changed

+352
-36
lines changed

14 files changed

+352
-36
lines changed

‎generatedTypes/src/commons/modifiers.d.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import _ from 'lodash';
22
import { BorderRadiusesLiterals } from '../style/borderRadiuses';
33
import TypographyPresets from '../style/typographyPresets';
44
import { colorsPalette } from '../style/colorsPalette';
5+
import { designTokens } from '../style/designTokens';
56
export declare const FLEX_KEY_PATTERN: RegExp;
67
export declare const PADDING_KEY_PATTERN: RegExp;
78
export declare const MARGIN_KEY_PATTERN: RegExp;
@@ -55,7 +56,7 @@ export declare type MarginLiterals = keyof typeof MARGIN_VARIATIONS;
5556
export declare type NativeMarginModifierKeyType = typeof MARGIN_VARIATIONS[MarginLiterals];
5657
export declare type FlexLiterals = keyof typeof STYLE_KEY_CONVERTERS;
5758
export declare type NativeFlexModifierKeyType = typeof STYLE_KEY_CONVERTERS[FlexLiterals];
58-
export declare type ColorLiterals = keyof typeof colorsPalette;
59+
export declare type ColorLiterals = keyof (typeof colorsPalette & typeof designTokens);
5960
export declare type TypographyLiterals = keyof typeof TypographyPresets;
6061
export declare type BorderRadiusLiterals = keyof typeof BorderRadiusesLiterals;
6162
export declare type AlignmentLiterals = 'row' | 'spread' | 'center' | 'centerH' | 'centerV' | 'left' | 'right' | 'top' | 'bottom';

‎generatedTypes/src/components/button/ButtonConstants.d.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,3 @@ export declare const MIN_WIDTH: {
1818
LARGE: number;
1919
};
2020
export declare const DEFAULT_SIZE = ButtonSize.large;
21-
export declare const DISABLED_COLOR: string;

‎generatedTypes/src/components/button/index.d.ts

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,9 +19,6 @@ declare class Button extends PureComponent<Props, ButtonState> {
1919
justifyContent: "center";
2020
alignItems: "center";
2121
};
22-
containerDisabled: {
23-
backgroundColor: string;
24-
};
2522
innerContainerLink: {
2623
minWidth: undefined;
2724
paddingHorizontal: undefined;
@@ -30,7 +27,6 @@ declare class Button extends PureComponent<Props, ButtonState> {
3027
backgroundColor: undefined;
3128
};
3229
shadowStyle: {
33-
shadowColor: string;
3430
shadowOffset: {
3531
height: number;
3632
width: number;
@@ -161,17 +157,27 @@ declare class Button extends PureComponent<Props, ButtonState> {
161157
get isIconButton(): boolean | 0 | undefined;
162158
getBackgroundColor(): any;
163159
getActiveBackgroundColor(): string | undefined;
164-
getLabelColor(): string | undefined;
160+
getLabelColor(): any;
165161
getLabelSizeStyle(): object;
166162
getContainerSizeStyle(): any;
167163
getOutlineStyle(): {
168164
borderWidth: number;
169-
borderColor: string;
165+
borderColor: any;
170166
} | undefined;
171167
getBorderRadiusStyle(): {
172168
borderRadius: number;
173169
};
174-
getShadowStyle(): any[] | undefined;
170+
getShadowStyle(): ({
171+
shadowOffset: {
172+
height: number;
173+
width: number;
174+
};
175+
shadowOpacity: number;
176+
shadowRadius: number;
177+
elevation: number;
178+
} | {
179+
shadowColor: any;
180+
})[] | undefined;
175181
getIconStyle(): import("react-native").StyleProp<ImageStyle>[];
176182
getAnimationDirectionStyle(): {
177183
alignSelf: string;

‎generatedTypes/src/incubator/TextField/usePreset.d.ts

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -275,6 +275,8 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
275275
transparent?: boolean | undefined;
276276
black?: boolean | undefined;
277277
white?: boolean | undefined;
278+
grey1?: boolean | undefined;
279+
grey5?: boolean | undefined;
278280
grey10?: boolean | undefined;
279281
grey20?: boolean | undefined;
280282
grey30?: boolean | undefined;
@@ -283,6 +285,8 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
283285
grey60?: boolean | undefined;
284286
grey70?: boolean | undefined;
285287
grey80?: boolean | undefined;
288+
blue1?: boolean | undefined;
289+
blue5?: boolean | undefined;
286290
blue10?: boolean | undefined;
287291
blue20?: boolean | undefined;
288292
blue30?: boolean | undefined;
@@ -299,6 +303,8 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
299303
cyan60?: boolean | undefined;
300304
cyan70?: boolean | undefined;
301305
cyan80?: boolean | undefined;
306+
green1?: boolean | undefined;
307+
green5?: boolean | undefined;
302308
green10?: boolean | undefined;
303309
green20?: boolean | undefined;
304310
green30?: boolean | undefined;
@@ -307,6 +313,8 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
307313
green60?: boolean | undefined;
308314
green70?: boolean | undefined;
309315
green80?: boolean | undefined;
316+
yellow1?: boolean | undefined;
317+
yellow5?: boolean | undefined;
310318
yellow10?: boolean | undefined;
311319
yellow20?: boolean | undefined;
312320
yellow30?: boolean | undefined;
@@ -315,6 +323,8 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
315323
yellow60?: boolean | undefined;
316324
yellow70?: boolean | undefined;
317325
yellow80?: boolean | undefined;
326+
orange1?: boolean | undefined;
327+
orange5?: boolean | undefined;
318328
orange10?: boolean | undefined;
319329
orange20?: boolean | undefined;
320330
orange30?: boolean | undefined;
@@ -323,6 +333,8 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
323333
orange60?: boolean | undefined;
324334
orange70?: boolean | undefined;
325335
orange80?: boolean | undefined;
336+
red1?: boolean | undefined;
337+
red5?: boolean | undefined;
326338
red10?: boolean | undefined;
327339
red20?: boolean | undefined;
328340
red30?: boolean | undefined;
@@ -331,6 +343,8 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
331343
red60?: boolean | undefined;
332344
red70?: boolean | undefined;
333345
red80?: boolean | undefined;
346+
purple1?: boolean | undefined;
347+
purple5?: boolean | undefined;
334348
purple10?: boolean | undefined;
335349
purple20?: boolean | undefined;
336350
purple30?: boolean | undefined;
@@ -347,6 +361,63 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
347361
violet60?: boolean | undefined;
348362
violet70?: boolean | undefined;
349363
violet80?: boolean | undefined;
364+
backgroundDefault?: boolean | undefined;
365+
backgroundNeutralHeavy?: boolean | undefined;
366+
backgroundIdle?: boolean | undefined;
367+
backgroundNeutralMedium?: boolean | undefined;
368+
backgroundNeutral?: boolean | undefined;
369+
backgroundNeutralLight?: boolean | undefined;
370+
backgroundPrimaryHeavy?: boolean | undefined;
371+
backgroundPrimaryLight?: boolean | undefined;
372+
backgroundPrimary?: boolean | undefined;
373+
backgroundGeneralHeavy?: boolean | undefined;
374+
backgroundGeneralLight?: boolean | undefined;
375+
backgroundGeneral?: boolean | undefined;
376+
backgroundSuccessHeavy?: boolean | undefined;
377+
backgroundSuccess?: boolean | undefined;
378+
backgroundWarningHeavy?: boolean | undefined;
379+
backgroundWarning?: boolean | undefined;
380+
backgroundMajor?: boolean | undefined;
381+
backgroundDangerHeavy?: boolean | undefined;
382+
backgroundDanger?: boolean | undefined;
383+
backgroundDisabled?: boolean | undefined;
384+
backgroundDark?: boolean | undefined;
385+
textDisabled?: boolean | undefined;
386+
textDefault?: boolean | undefined;
387+
textNeutralHeavy?: boolean | undefined;
388+
textNeutral?: boolean | undefined;
389+
textNeutralLight?: boolean | undefined;
390+
textWhite?: boolean | undefined;
391+
textWhiteDisabled?: boolean | undefined;
392+
textPrimary?: boolean | undefined;
393+
textGeneral?: boolean | undefined;
394+
textSuccess?: boolean | undefined;
395+
textMajor?: boolean | undefined;
396+
textDanger?: boolean | undefined;
397+
textDangerLight?: boolean | undefined;
398+
iconDefault?: boolean | undefined;
399+
iconNeutral?: boolean | undefined;
400+
iconWhite?: boolean | undefined;
401+
iconWhiteDisabled?: boolean | undefined;
402+
iconPrimary?: boolean | undefined;
403+
iconPrimaryLight?: boolean | undefined;
404+
iconGeneral?: boolean | undefined;
405+
iconGeneralLight?: boolean | undefined;
406+
iconSuccess?: boolean | undefined;
407+
iconSuccessLight?: boolean | undefined;
408+
iconMajor?: boolean | undefined;
409+
iconDanger?: boolean | undefined;
410+
iconDangerLight?: boolean | undefined;
411+
iconDisabled?: boolean | undefined;
412+
outlineWhite?: boolean | undefined;
413+
outlineNeutral?: boolean | undefined;
414+
outlineDisabled?: boolean | undefined;
415+
outlinePrimary?: boolean | undefined;
416+
outlineGeneral?: boolean | undefined;
417+
outlineWarning?: boolean | undefined;
418+
outlineDanger?: boolean | undefined;
419+
dividerNeutral?: boolean | undefined;
420+
divider?: boolean | undefined;
350421
hint?: string | undefined;
351422
color?: import("./types").ColorType | undefined;
352423
placeholderTextColor?: import("./types").ColorType | undefined;
@@ -606,6 +677,8 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
606677
transparent?: boolean | undefined;
607678
black?: boolean | undefined;
608679
white?: boolean | undefined;
680+
grey1?: boolean | undefined;
681+
grey5?: boolean | undefined;
609682
grey10?: boolean | undefined;
610683
grey20?: boolean | undefined;
611684
grey30?: boolean | undefined;
@@ -614,6 +687,8 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
614687
grey60?: boolean | undefined;
615688
grey70?: boolean | undefined;
616689
grey80?: boolean | undefined;
690+
blue1?: boolean | undefined;
691+
blue5?: boolean | undefined;
617692
blue10?: boolean | undefined;
618693
blue20?: boolean | undefined;
619694
blue30?: boolean | undefined;
@@ -630,6 +705,8 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
630705
cyan60?: boolean | undefined;
631706
cyan70?: boolean | undefined;
632707
cyan80?: boolean | undefined;
708+
green1?: boolean | undefined;
709+
green5?: boolean | undefined;
633710
green10?: boolean | undefined;
634711
green20?: boolean | undefined;
635712
green30?: boolean | undefined;
@@ -638,6 +715,8 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
638715
green60?: boolean | undefined;
639716
green70?: boolean | undefined;
640717
green80?: boolean | undefined;
718+
yellow1?: boolean | undefined;
719+
yellow5?: boolean | undefined;
641720
yellow10?: boolean | undefined;
642721
yellow20?: boolean | undefined;
643722
yellow30?: boolean | undefined;
@@ -646,6 +725,8 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
646725
yellow60?: boolean | undefined;
647726
yellow70?: boolean | undefined;
648727
yellow80?: boolean | undefined;
728+
orange1?: boolean | undefined;
729+
orange5?: boolean | undefined;
649730
orange10?: boolean | undefined;
650731
orange20?: boolean | undefined;
651732
orange30?: boolean | undefined;
@@ -654,6 +735,8 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
654735
orange60?: boolean | undefined;
655736
orange70?: boolean | undefined;
656737
orange80?: boolean | undefined;
738+
red1?: boolean | undefined;
739+
red5?: boolean | undefined;
657740
red10?: boolean | undefined;
658741
red20?: boolean | undefined;
659742
red30?: boolean | undefined;
@@ -662,6 +745,8 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
662745
red60?: boolean | undefined;
663746
red70?: boolean | undefined;
664747
red80?: boolean | undefined;
748+
purple1?: boolean | undefined;
749+
purple5?: boolean | undefined;
665750
purple10?: boolean | undefined;
666751
purple20?: boolean | undefined;
667752
purple30?: boolean | undefined;
@@ -678,6 +763,63 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
678763
violet60?: boolean | undefined;
679764
violet70?: boolean | undefined;
680765
violet80?: boolean | undefined;
766+
backgroundDefault?: boolean | undefined;
767+
backgroundNeutralHeavy?: boolean | undefined;
768+
backgroundIdle?: boolean | undefined;
769+
backgroundNeutralMedium?: boolean | undefined;
770+
backgroundNeutral?: boolean | undefined;
771+
backgroundNeutralLight?: boolean | undefined;
772+
backgroundPrimaryHeavy?: boolean | undefined;
773+
backgroundPrimaryLight?: boolean | undefined;
774+
backgroundPrimary?: boolean | undefined;
775+
backgroundGeneralHeavy?: boolean | undefined;
776+
backgroundGeneralLight?: boolean | undefined;
777+
backgroundGeneral?: boolean | undefined;
778+
backgroundSuccessHeavy?: boolean | undefined;
779+
backgroundSuccess?: boolean | undefined;
780+
backgroundWarningHeavy?: boolean | undefined;
781+
backgroundWarning?: boolean | undefined;
782+
backgroundMajor?: boolean | undefined;
783+
backgroundDangerHeavy?: boolean | undefined;
784+
backgroundDanger?: boolean | undefined;
785+
backgroundDisabled?: boolean | undefined;
786+
backgroundDark?: boolean | undefined;
787+
textDisabled?: boolean | undefined;
788+
textDefault?: boolean | undefined;
789+
textNeutralHeavy?: boolean | undefined;
790+
textNeutral?: boolean | undefined;
791+
textNeutralLight?: boolean | undefined;
792+
textWhite?: boolean | undefined;
793+
textWhiteDisabled?: boolean | undefined;
794+
textPrimary?: boolean | undefined;
795+
textGeneral?: boolean | undefined;
796+
textSuccess?: boolean | undefined;
797+
textMajor?: boolean | undefined;
798+
textDanger?: boolean | undefined;
799+
textDangerLight?: boolean | undefined;
800+
iconDefault?: boolean | undefined;
801+
iconNeutral?: boolean | undefined;
802+
iconWhite?: boolean | undefined;
803+
iconWhiteDisabled?: boolean | undefined;
804+
iconPrimary?: boolean | undefined;
805+
iconPrimaryLight?: boolean | undefined;
806+
iconGeneral?: boolean | undefined;
807+
iconGeneralLight?: boolean | undefined;
808+
iconSuccess?: boolean | undefined;
809+
iconSuccessLight?: boolean | undefined;
810+
iconMajor?: boolean | undefined;
811+
iconDanger?: boolean | undefined;
812+
iconDangerLight?: boolean | undefined;
813+
iconDisabled?: boolean | undefined;
814+
outlineWhite?: boolean | undefined;
815+
outlineNeutral?: boolean | undefined;
816+
outlineDisabled?: boolean | undefined;
817+
outlinePrimary?: boolean | undefined;
818+
outlineGeneral?: boolean | undefined;
819+
outlineWarning?: boolean | undefined;
820+
outlineDanger?: boolean | undefined;
821+
dividerNeutral?: boolean | undefined;
822+
divider?: boolean | undefined;
681823
hint?: string | undefined;
682824
color?: import("./types").ColorType | undefined;
683825
placeholderTextColor?: import("./types").ColorType | undefined;

‎generatedTypes/src/style/colors.d.ts

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,8 @@ export declare class Colors {
5252
areEqual(colorA: string, colorB: string): boolean;
5353
}
5454
declare const colorObject: Colors & {
55+
grey1: string;
56+
grey5: string;
5557
grey10: string;
5658
grey20: string;
5759
grey30: string;
@@ -60,6 +62,8 @@ declare const colorObject: Colors & {
6062
grey60: string;
6163
grey70: string;
6264
grey80: string;
65+
blue1: string;
66+
blue5: string;
6367
blue10: string;
6468
blue20: string;
6569
blue30: string;
@@ -76,6 +80,8 @@ declare const colorObject: Colors & {
7680
cyan60: string;
7781
cyan70: string;
7882
cyan80: string;
83+
green1: string;
84+
green5: string;
7985
green10: string;
8086
green20: string;
8187
green30: string;
@@ -84,6 +90,8 @@ declare const colorObject: Colors & {
8490
green60: string;
8591
green70: string;
8692
green80: string;
93+
yellow1: string;
94+
yellow5: string;
8795
yellow10: string;
8896
yellow20: string;
8997
yellow30: string;
@@ -92,14 +100,22 @@ declare const colorObject: Colors & {
92100
yellow60: string;
93101
yellow70: string;
94102
yellow80: string;
103+
orange1: string;
104+
orange5: string;
95105
orange10: string;
96106
orange20: string;
97107
orange30: string;
98-
orange40: string;
108+
orange40: string; /**
109+
* Set color scheme for app
110+
* arguments:
111+
* scheme - color scheme e.g light/dark/default
112+
*/
99113
orange50: string;
100114
orange60: string;
101115
orange70: string;
102116
orange80: string;
117+
red1: string;
118+
red5: string;
103119
red10: string;
104120
red20: string;
105121
red30: string;
@@ -108,6 +124,8 @@ declare const colorObject: Colors & {
108124
red60: string;
109125
red70: string;
110126
red80: string;
127+
purple1: string;
128+
purple5: string;
111129
purple10: string;
112130
purple20: string;
113131
purple30: string;

0 commit comments

Comments
 (0)