Skip to content

Infra/ design tokens infra #1752

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Jan 5, 2022
Merged

Infra/ design tokens infra #1752

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
adab191
designTokens infra
lidord-wix Jan 2, 2022
43a83c8
remove colorsPalette from designToken file
lidord-wix Jan 4, 2022
f67c797
Merge branch 'master' into infra/designTokens
lidord-wix Jan 4, 2022
dc3dd6b
imports
lidord-wix Jan 4, 2022
d5d136c
fix modifiers ColorLiterals
lidord-wix Jan 4, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion generatedTypes/src/commons/modifiers.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import _ from 'lodash';
import { BorderRadiusesLiterals } from '../style/borderRadiuses';
import TypographyPresets from '../style/typographyPresets';
import { colorsPalette } from '../style/colorsPalette';
import { designTokens } from '../style/designTokens';
export declare const FLEX_KEY_PATTERN: RegExp;
export declare const PADDING_KEY_PATTERN: RegExp;
export declare const MARGIN_KEY_PATTERN: RegExp;
Expand Down Expand Up @@ -55,7 +56,7 @@ export declare type MarginLiterals = keyof typeof MARGIN_VARIATIONS;
export declare type NativeMarginModifierKeyType = typeof MARGIN_VARIATIONS[MarginLiterals];
export declare type FlexLiterals = keyof typeof STYLE_KEY_CONVERTERS;
export declare type NativeFlexModifierKeyType = typeof STYLE_KEY_CONVERTERS[FlexLiterals];
export declare type ColorLiterals = keyof typeof colorsPalette;
export declare type ColorLiterals = keyof (typeof colorsPalette & typeof designTokens);
export declare type TypographyLiterals = keyof typeof TypographyPresets;
export declare type BorderRadiusLiterals = keyof typeof BorderRadiusesLiterals;
export declare type AlignmentLiterals = 'row' | 'spread' | 'center' | 'centerH' | 'centerV' | 'left' | 'right' | 'top' | 'bottom';
Expand Down
1 change: 0 additions & 1 deletion generatedTypes/src/components/button/ButtonConstants.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,3 @@ export declare const MIN_WIDTH: {
LARGE: number;
};
export declare const DEFAULT_SIZE = ButtonSize.large;
export declare const DISABLED_COLOR: string;
20 changes: 13 additions & 7 deletions generatedTypes/src/components/button/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,6 @@ declare class Button extends PureComponent<Props, ButtonState> {
justifyContent: "center";
alignItems: "center";
};
containerDisabled: {
backgroundColor: string;
};
innerContainerLink: {
minWidth: undefined;
paddingHorizontal: undefined;
Expand All @@ -30,7 +27,6 @@ declare class Button extends PureComponent<Props, ButtonState> {
backgroundColor: undefined;
};
shadowStyle: {
shadowColor: string;
shadowOffset: {
height: number;
width: number;
Expand Down Expand Up @@ -161,17 +157,27 @@ declare class Button extends PureComponent<Props, ButtonState> {
get isIconButton(): boolean | 0 | undefined;
getBackgroundColor(): any;
getActiveBackgroundColor(): string | undefined;
getLabelColor(): string | undefined;
getLabelColor(): any;
getLabelSizeStyle(): object;
getContainerSizeStyle(): any;
getOutlineStyle(): {
borderWidth: number;
borderColor: string;
borderColor: any;
} | undefined;
getBorderRadiusStyle(): {
borderRadius: number;
};
getShadowStyle(): any[] | undefined;
getShadowStyle(): ({
shadowOffset: {
height: number;
width: number;
};
shadowOpacity: number;
shadowRadius: number;
elevation: number;
} | {
shadowColor: any;
})[] | undefined;
getIconStyle(): import("react-native").StyleProp<ImageStyle>[];
getAnimationDirectionStyle(): {
alignSelf: string;
Expand Down
142 changes: 142 additions & 0 deletions generatedTypes/src/incubator/TextField/usePreset.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -275,6 +275,8 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
transparent?: boolean | undefined;
black?: boolean | undefined;
white?: boolean | undefined;
grey1?: boolean | undefined;
grey5?: boolean | undefined;
grey10?: boolean | undefined;
grey20?: boolean | undefined;
grey30?: boolean | undefined;
Expand All @@ -283,6 +285,8 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
grey60?: boolean | undefined;
grey70?: boolean | undefined;
grey80?: boolean | undefined;
blue1?: boolean | undefined;
blue5?: boolean | undefined;
blue10?: boolean | undefined;
blue20?: boolean | undefined;
blue30?: boolean | undefined;
Expand All @@ -299,6 +303,8 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
cyan60?: boolean | undefined;
cyan70?: boolean | undefined;
cyan80?: boolean | undefined;
green1?: boolean | undefined;
green5?: boolean | undefined;
green10?: boolean | undefined;
green20?: boolean | undefined;
green30?: boolean | undefined;
Expand All @@ -307,6 +313,8 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
green60?: boolean | undefined;
green70?: boolean | undefined;
green80?: boolean | undefined;
yellow1?: boolean | undefined;
yellow5?: boolean | undefined;
yellow10?: boolean | undefined;
yellow20?: boolean | undefined;
yellow30?: boolean | undefined;
Expand All @@ -315,6 +323,8 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
yellow60?: boolean | undefined;
yellow70?: boolean | undefined;
yellow80?: boolean | undefined;
orange1?: boolean | undefined;
orange5?: boolean | undefined;
orange10?: boolean | undefined;
orange20?: boolean | undefined;
orange30?: boolean | undefined;
Expand All @@ -323,6 +333,8 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
orange60?: boolean | undefined;
orange70?: boolean | undefined;
orange80?: boolean | undefined;
red1?: boolean | undefined;
red5?: boolean | undefined;
red10?: boolean | undefined;
red20?: boolean | undefined;
red30?: boolean | undefined;
Expand All @@ -331,6 +343,8 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
red60?: boolean | undefined;
red70?: boolean | undefined;
red80?: boolean | undefined;
purple1?: boolean | undefined;
purple5?: boolean | undefined;
purple10?: boolean | undefined;
purple20?: boolean | undefined;
purple30?: boolean | undefined;
Expand All @@ -347,6 +361,63 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
violet60?: boolean | undefined;
violet70?: boolean | undefined;
violet80?: boolean | undefined;
backgroundDefault?: boolean | undefined;
backgroundNeutralHeavy?: boolean | undefined;
backgroundIdle?: boolean | undefined;
backgroundNeutralMedium?: boolean | undefined;
backgroundNeutral?: boolean | undefined;
backgroundNeutralLight?: boolean | undefined;
backgroundPrimaryHeavy?: boolean | undefined;
backgroundPrimaryLight?: boolean | undefined;
backgroundPrimary?: boolean | undefined;
backgroundGeneralHeavy?: boolean | undefined;
backgroundGeneralLight?: boolean | undefined;
backgroundGeneral?: boolean | undefined;
backgroundSuccessHeavy?: boolean | undefined;
backgroundSuccess?: boolean | undefined;
backgroundWarningHeavy?: boolean | undefined;
backgroundWarning?: boolean | undefined;
backgroundMajor?: boolean | undefined;
backgroundDangerHeavy?: boolean | undefined;
backgroundDanger?: boolean | undefined;
backgroundDisabled?: boolean | undefined;
backgroundDark?: boolean | undefined;
textDisabled?: boolean | undefined;
textDefault?: boolean | undefined;
textNeutralHeavy?: boolean | undefined;
textNeutral?: boolean | undefined;
textNeutralLight?: boolean | undefined;
textWhite?: boolean | undefined;
textWhiteDisabled?: boolean | undefined;
textPrimary?: boolean | undefined;
textGeneral?: boolean | undefined;
textSuccess?: boolean | undefined;
textMajor?: boolean | undefined;
textDanger?: boolean | undefined;
textDangerLight?: boolean | undefined;
iconDefault?: boolean | undefined;
iconNeutral?: boolean | undefined;
iconWhite?: boolean | undefined;
iconWhiteDisabled?: boolean | undefined;
iconPrimary?: boolean | undefined;
iconPrimaryLight?: boolean | undefined;
iconGeneral?: boolean | undefined;
iconGeneralLight?: boolean | undefined;
iconSuccess?: boolean | undefined;
iconSuccessLight?: boolean | undefined;
iconMajor?: boolean | undefined;
iconDanger?: boolean | undefined;
iconDangerLight?: boolean | undefined;
iconDisabled?: boolean | undefined;
outlineWhite?: boolean | undefined;
outlineNeutral?: boolean | undefined;
outlineDisabled?: boolean | undefined;
outlinePrimary?: boolean | undefined;
outlineGeneral?: boolean | undefined;
outlineWarning?: boolean | undefined;
outlineDanger?: boolean | undefined;
dividerNeutral?: boolean | undefined;
divider?: boolean | undefined;
hint?: string | undefined;
color?: import("./types").ColorType | undefined;
placeholderTextColor?: import("./types").ColorType | undefined;
Expand Down Expand Up @@ -606,6 +677,8 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
transparent?: boolean | undefined;
black?: boolean | undefined;
white?: boolean | undefined;
grey1?: boolean | undefined;
grey5?: boolean | undefined;
grey10?: boolean | undefined;
grey20?: boolean | undefined;
grey30?: boolean | undefined;
Expand All @@ -614,6 +687,8 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
grey60?: boolean | undefined;
grey70?: boolean | undefined;
grey80?: boolean | undefined;
blue1?: boolean | undefined;
blue5?: boolean | undefined;
blue10?: boolean | undefined;
blue20?: boolean | undefined;
blue30?: boolean | undefined;
Expand All @@ -630,6 +705,8 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
cyan60?: boolean | undefined;
cyan70?: boolean | undefined;
cyan80?: boolean | undefined;
green1?: boolean | undefined;
green5?: boolean | undefined;
green10?: boolean | undefined;
green20?: boolean | undefined;
green30?: boolean | undefined;
Expand All @@ -638,6 +715,8 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
green60?: boolean | undefined;
green70?: boolean | undefined;
green80?: boolean | undefined;
yellow1?: boolean | undefined;
yellow5?: boolean | undefined;
yellow10?: boolean | undefined;
yellow20?: boolean | undefined;
yellow30?: boolean | undefined;
Expand All @@ -646,6 +725,8 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
yellow60?: boolean | undefined;
yellow70?: boolean | undefined;
yellow80?: boolean | undefined;
orange1?: boolean | undefined;
orange5?: boolean | undefined;
orange10?: boolean | undefined;
orange20?: boolean | undefined;
orange30?: boolean | undefined;
Expand All @@ -654,6 +735,8 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
orange60?: boolean | undefined;
orange70?: boolean | undefined;
orange80?: boolean | undefined;
red1?: boolean | undefined;
red5?: boolean | undefined;
red10?: boolean | undefined;
red20?: boolean | undefined;
red30?: boolean | undefined;
Expand All @@ -662,6 +745,8 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
red60?: boolean | undefined;
red70?: boolean | undefined;
red80?: boolean | undefined;
purple1?: boolean | undefined;
purple5?: boolean | undefined;
purple10?: boolean | undefined;
purple20?: boolean | undefined;
purple30?: boolean | undefined;
Expand All @@ -678,6 +763,63 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
violet60?: boolean | undefined;
violet70?: boolean | undefined;
violet80?: boolean | undefined;
backgroundDefault?: boolean | undefined;
backgroundNeutralHeavy?: boolean | undefined;
backgroundIdle?: boolean | undefined;
backgroundNeutralMedium?: boolean | undefined;
backgroundNeutral?: boolean | undefined;
backgroundNeutralLight?: boolean | undefined;
backgroundPrimaryHeavy?: boolean | undefined;
backgroundPrimaryLight?: boolean | undefined;
backgroundPrimary?: boolean | undefined;
backgroundGeneralHeavy?: boolean | undefined;
backgroundGeneralLight?: boolean | undefined;
backgroundGeneral?: boolean | undefined;
backgroundSuccessHeavy?: boolean | undefined;
backgroundSuccess?: boolean | undefined;
backgroundWarningHeavy?: boolean | undefined;
backgroundWarning?: boolean | undefined;
backgroundMajor?: boolean | undefined;
backgroundDangerHeavy?: boolean | undefined;
backgroundDanger?: boolean | undefined;
backgroundDisabled?: boolean | undefined;
backgroundDark?: boolean | undefined;
textDisabled?: boolean | undefined;
textDefault?: boolean | undefined;
textNeutralHeavy?: boolean | undefined;
textNeutral?: boolean | undefined;
textNeutralLight?: boolean | undefined;
textWhite?: boolean | undefined;
textWhiteDisabled?: boolean | undefined;
textPrimary?: boolean | undefined;
textGeneral?: boolean | undefined;
textSuccess?: boolean | undefined;
textMajor?: boolean | undefined;
textDanger?: boolean | undefined;
textDangerLight?: boolean | undefined;
iconDefault?: boolean | undefined;
iconNeutral?: boolean | undefined;
iconWhite?: boolean | undefined;
iconWhiteDisabled?: boolean | undefined;
iconPrimary?: boolean | undefined;
iconPrimaryLight?: boolean | undefined;
iconGeneral?: boolean | undefined;
iconGeneralLight?: boolean | undefined;
iconSuccess?: boolean | undefined;
iconSuccessLight?: boolean | undefined;
iconMajor?: boolean | undefined;
iconDanger?: boolean | undefined;
iconDangerLight?: boolean | undefined;
iconDisabled?: boolean | undefined;
outlineWhite?: boolean | undefined;
outlineNeutral?: boolean | undefined;
outlineDisabled?: boolean | undefined;
outlinePrimary?: boolean | undefined;
outlineGeneral?: boolean | undefined;
outlineWarning?: boolean | undefined;
outlineDanger?: boolean | undefined;
dividerNeutral?: boolean | undefined;
divider?: boolean | undefined;
hint?: string | undefined;
color?: import("./types").ColorType | undefined;
placeholderTextColor?: import("./types").ColorType | undefined;
Expand Down
20 changes: 19 additions & 1 deletion generatedTypes/src/style/colors.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,8 @@ export declare class Colors {
areEqual(colorA: string, colorB: string): boolean;
}
declare const colorObject: Colors & {
grey1: string;
grey5: string;
grey10: string;
grey20: string;
grey30: string;
Expand All @@ -60,6 +62,8 @@ declare const colorObject: Colors & {
grey60: string;
grey70: string;
grey80: string;
blue1: string;
blue5: string;
blue10: string;
blue20: string;
blue30: string;
Expand All @@ -76,6 +80,8 @@ declare const colorObject: Colors & {
cyan60: string;
cyan70: string;
cyan80: string;
green1: string;
green5: string;
green10: string;
green20: string;
green30: string;
Expand All @@ -84,6 +90,8 @@ declare const colorObject: Colors & {
green60: string;
green70: string;
green80: string;
yellow1: string;
yellow5: string;
yellow10: string;
yellow20: string;
yellow30: string;
Expand All @@ -92,14 +100,22 @@ declare const colorObject: Colors & {
yellow60: string;
yellow70: string;
yellow80: string;
orange1: string;
orange5: string;
orange10: string;
orange20: string;
orange30: string;
orange40: string;
orange40: string; /**
* Set color scheme for app
* arguments:
* scheme - color scheme e.g light/dark/default
*/
orange50: string;
orange60: string;
orange70: string;
orange80: string;
red1: string;
red5: string;
red10: string;
red20: string;
red30: string;
Expand All @@ -108,6 +124,8 @@ declare const colorObject: Colors & {
red60: string;
red70: string;
red80: string;
purple1: string;
purple5: string;
purple10: string;
purple20: string;
purple30: string;
Expand Down
Loading