@juspay/blend-design-system 0.0.37-beta.8 → 0.0.37

package/lib/components/InputsV2/UploadV2/UploadV2.light.tokens.ts

@@ -0,0 +1,348 @@
+import { FoundationTokenType } from '../../../tokens/theme.token'
+import type { ResponsiveUploadV2Tokens } from './UploadV2.tokens.types'
+import { UploadDragState, UploadState } from './UploadV2.types'
+
+export const getUploadV2LightTokens = (
+    foundationTokens: FoundationTokenType
+): ResponsiveUploadV2Tokens => {
+    return {
+        sm: {
+            gap: foundationTokens.unit[8],
+            topContainer: {
+                label: {
+                    fontSize: {
+                        sm: foundationTokens.font.fontSize[14],
+                        md: foundationTokens.font.fontSize[14],
+                        lg: foundationTokens.font.fontSize[14],
+                    },
+                    fontWeight: {
+                        sm: foundationTokens.font.weight[500],
+                        md: foundationTokens.font.weight[500],
+                        lg: foundationTokens.font.weight[500],
+                    },
+                    color: {
+                        default: foundationTokens.colors.gray[700],
+                        hover: foundationTokens.colors.gray[700],
+                        focus: foundationTokens.colors.gray[700],
+                        disabled: foundationTokens.colors.gray[400],
+                        error: foundationTokens.colors.red[600],
+                    },
+                    lineHeight: {
+                        sm: foundationTokens.font.lineHeight[20],
+                        md: foundationTokens.font.lineHeight[20],
+                        lg: foundationTokens.font.lineHeight[20],
+                    },
+                },
+                subLabel: {
+                    fontSize: {
+                        sm: foundationTokens.font.fontSize[14],
+                        md: foundationTokens.font.fontSize[14],
+                        lg: foundationTokens.font.fontSize[14],
+                    },
+                    fontWeight: {
+                        sm: foundationTokens.font.weight[400],
+                        md: foundationTokens.font.weight[400],
+                        lg: foundationTokens.font.weight[400],
+                    },
+                    lineHeight: {
+                        sm: foundationTokens.font.lineHeight[20],
+                        md: foundationTokens.font.lineHeight[20],
+                        lg: foundationTokens.font.lineHeight[20],
+                    },
+                    color: {
+                        default: foundationTokens.colors.gray[400],
+                        hover: foundationTokens.colors.gray[400],
+                        focus: foundationTokens.colors.gray[400],
+                        disabled: foundationTokens.colors.gray[300],
+                        error: foundationTokens.colors.red[600],
+                    },
+                },
+                helpIcon: {
+                    width: {
+                        sm: foundationTokens.unit[14],
+                        md: foundationTokens.unit[14],
+                        lg: foundationTokens.unit[14],
+                    },
+                    color: {
+                        default: foundationTokens.colors.gray[400],
+                        hover: foundationTokens.colors.gray[400],
+                        focus: foundationTokens.colors.gray[400],
+                        disabled: foundationTokens.colors.gray[400],
+                        error: foundationTokens.colors.red[600],
+                    },
+                },
+                required: {
+                    color: foundationTokens.colors.red[600],
+                },
+            },
+            uploadContainer: {
+                gap: foundationTokens.unit[20],
+                paddingTop: foundationTokens.unit[20],
+                paddingBottom: foundationTokens.unit[20],
+                paddingLeft: foundationTokens.unit[40],
+                paddingRight: foundationTokens.unit[40],
+                borderRadius: foundationTokens.border.radius[12],
+                border: {
+                    [UploadState.IDLE]: `1px dashed ${foundationTokens.colors.gray[200]}`,
+                    [UploadDragState.DRAG_ENTER]: `1px dashed ${foundationTokens.colors.primary[500]}`,
+                    [UploadDragState.DRAG_LEAVE]: `1px dashed ${foundationTokens.colors.gray[200]}`,
+                    [UploadDragState.DRAG_OVER]: `1px dashed ${foundationTokens.colors.primary[500]}`,
+                    [UploadDragState.DROP]: `1px dashed ${foundationTokens.colors.gray[200]}`,
+                    [UploadState.UPLOADING]: `1px dashed ${foundationTokens.colors.gray[200]}`,
+                    [UploadState.SUCCESS]: `1px dashed ${foundationTokens.colors.green[500]}`,
+                    [UploadState.ERROR]: `1px dashed ${foundationTokens.colors.red[500]}`,
+                    [UploadState.DISABLED]: `1px dashed ${foundationTokens.colors.gray[200]}`,
+                },
+                backgroundColor: {
+                    [UploadState.IDLE]: foundationTokens.colors.gray[0],
+                    [UploadDragState.DRAG_ENTER]:
+                        foundationTokens.colors.primary[50],
+                    [UploadDragState.DRAG_LEAVE]:
+                        foundationTokens.colors.gray[0],
+                    [UploadDragState.DRAG_OVER]:
+                        foundationTokens.colors.primary[50],
+                    [UploadDragState.DROP]: foundationTokens.colors.gray[0],
+                    [UploadState.UPLOADING]: foundationTokens.colors.gray[0],
+                    [UploadState.SUCCESS]: foundationTokens.colors.gray[0],
+                    [UploadState.ERROR]: foundationTokens.colors.gray[0],
+                    [UploadState.DISABLED]: foundationTokens.colors.gray[0],
+                },
+                header: {
+                    gap: foundationTokens.unit[4],
+                    title: {
+                        fontSize: foundationTokens.font.fontSize[16],
+                        fontWeight: foundationTokens.font.weight[600],
+                        color: foundationTokens.colors.gray[700],
+                    },
+                    description: {
+                        fontSize: foundationTokens.font.fontSize[14],
+                        fontWeight: foundationTokens.font.weight[400],
+                        color: foundationTokens.colors.gray[400],
+                    },
+                    errorText: {
+                        fontSize: foundationTokens.font.fontSize[14],
+                        fontWeight: foundationTokens.font.weight[400],
+                        color: foundationTokens.colors.red[600],
+                    },
+                },
+                fileTag: {
+                    maxWidth: foundationTokens.unit[200],
+                    gap: foundationTokens.unit[4],
+                },
+            },
+            bottomContainer: {
+                hintText: {
+                    fontSize: {
+                        sm: foundationTokens.font.fontSize[12],
+                        md: foundationTokens.font.fontSize[12],
+                        lg: foundationTokens.font.fontSize[12],
+                    },
+                    fontWeight: {
+                        sm: foundationTokens.font.weight[400],
+                        md: foundationTokens.font.weight[400],
+                        lg: foundationTokens.font.weight[400],
+                    },
+                    lineHeight: {
+                        sm: foundationTokens.font.lineHeight[16],
+                        md: foundationTokens.font.lineHeight[16],
+                        lg: foundationTokens.font.lineHeight[16],
+                    },
+                    color: {
+                        default: foundationTokens.colors.gray[400],
+                        hover: foundationTokens.colors.gray[400],
+                        focus: foundationTokens.colors.gray[400],
+                        disabled: foundationTokens.colors.gray[300],
+                        error: foundationTokens.colors.gray[400],
+                    },
+                },
+                errorMessage: {
+                    fontSize: {
+                        sm: foundationTokens.font.fontSize[12],
+                        md: foundationTokens.font.fontSize[12],
+                        lg: foundationTokens.font.fontSize[12],
+                    },
+                    fontWeight: {
+                        sm: foundationTokens.font.weight[400],
+                        md: foundationTokens.font.weight[400],
+                        lg: foundationTokens.font.weight[400],
+                    },
+                    lineHeight: {
+                        sm: foundationTokens.font.lineHeight[16],
+                        md: foundationTokens.font.lineHeight[16],
+                        lg: foundationTokens.font.lineHeight[16],
+                    },
+                    color: foundationTokens.colors.red[600],
+                },
+            },
+        },
+        lg: {
+            gap: foundationTokens.unit[8],
+            topContainer: {
+                label: {
+                    fontSize: {
+                        sm: foundationTokens.font.fontSize[14],
+                        md: foundationTokens.font.fontSize[14],
+                        lg: foundationTokens.font.fontSize[14],
+                    },
+                    fontWeight: {
+                        sm: foundationTokens.font.weight[500],
+                        md: foundationTokens.font.weight[500],
+                        lg: foundationTokens.font.weight[500],
+                    },
+                    lineHeight: {
+                        sm: foundationTokens.font.lineHeight[20],
+                        md: foundationTokens.font.lineHeight[20],
+                        lg: foundationTokens.font.lineHeight[20],
+                    },
+                    color: {
+                        default: foundationTokens.colors.gray[700],
+                        hover: foundationTokens.colors.gray[700],
+                        focus: foundationTokens.colors.gray[700],
+                        disabled: foundationTokens.colors.gray[400],
+                        error: foundationTokens.colors.red[600],
+                    },
+                },
+                subLabel: {
+                    fontSize: {
+                        sm: foundationTokens.font.fontSize[14],
+                        md: foundationTokens.font.fontSize[14],
+                        lg: foundationTokens.font.fontSize[14],
+                    },
+                    fontWeight: {
+                        sm: foundationTokens.font.weight[400],
+                        md: foundationTokens.font.weight[400],
+                        lg: foundationTokens.font.weight[400],
+                    },
+                    lineHeight: {
+                        sm: foundationTokens.font.lineHeight[20],
+                        md: foundationTokens.font.lineHeight[20],
+                        lg: foundationTokens.font.lineHeight[20],
+                    },
+                    color: {
+                        default: foundationTokens.colors.gray[400],
+                        hover: foundationTokens.colors.gray[400],
+                        focus: foundationTokens.colors.gray[400],
+                        disabled: foundationTokens.colors.gray[300],
+                        error: foundationTokens.colors.red[600],
+                    },
+                },
+                helpIcon: {
+                    width: {
+                        sm: foundationTokens.unit[14],
+                        md: foundationTokens.unit[14],
+                        lg: foundationTokens.unit[14],
+                    },
+                    color: {
+                        default: foundationTokens.colors.gray[400],
+                        hover: foundationTokens.colors.gray[400],
+                        focus: foundationTokens.colors.gray[400],
+                        disabled: foundationTokens.colors.gray[400],
+                        error: foundationTokens.colors.red[600],
+                    },
+                },
+                required: {
+                    color: foundationTokens.colors.red[600],
+                },
+            },
+            uploadContainer: {
+                gap: foundationTokens.unit[20],
+                paddingTop: foundationTokens.unit[20],
+                paddingBottom: foundationTokens.unit[20],
+                paddingLeft: foundationTokens.unit[40],
+                paddingRight: foundationTokens.unit[40],
+                borderRadius: foundationTokens.border.radius[12],
+                border: {
+                    [UploadState.IDLE]: `1px dashed ${foundationTokens.colors.gray[200]}`,
+                    [UploadDragState.DRAG_ENTER]: `1px dashed ${foundationTokens.colors.primary[500]}`,
+                    [UploadDragState.DRAG_LEAVE]: `1px dashed ${foundationTokens.colors.gray[200]}`,
+                    [UploadDragState.DRAG_OVER]: `1px dashed ${foundationTokens.colors.primary[500]}`,
+                    [UploadDragState.DROP]: `1px dashed ${foundationTokens.colors.gray[200]}`,
+                    [UploadState.UPLOADING]: `1px dashed ${foundationTokens.colors.gray[200]}`,
+                    [UploadState.SUCCESS]: `1px dashed ${foundationTokens.colors.green[500]}`,
+                    [UploadState.ERROR]: `1px dashed ${foundationTokens.colors.red[500]}`,
+                    [UploadState.DISABLED]: `1px dashed ${foundationTokens.colors.gray[200]}`,
+                },
+                backgroundColor: {
+                    [UploadState.IDLE]: foundationTokens.colors.gray[0],
+                    [UploadDragState.DRAG_ENTER]:
+                        foundationTokens.colors.primary[50],
+                    [UploadDragState.DRAG_LEAVE]:
+                        foundationTokens.colors.gray[0],
+                    [UploadDragState.DRAG_OVER]:
+                        foundationTokens.colors.primary[50],
+                    [UploadDragState.DROP]: foundationTokens.colors.gray[0],
+                    [UploadState.UPLOADING]: foundationTokens.colors.gray[0],
+                    [UploadState.SUCCESS]: foundationTokens.colors.gray[0],
+                    [UploadState.ERROR]: foundationTokens.colors.gray[0],
+                    [UploadState.DISABLED]: foundationTokens.colors.gray[0],
+                },
+                header: {
+                    gap: foundationTokens.unit[4],
+                    title: {
+                        fontSize: foundationTokens.font.fontSize[16],
+                        fontWeight: foundationTokens.font.weight[600],
+                        color: foundationTokens.colors.gray[700],
+                    },
+                    description: {
+                        fontSize: foundationTokens.font.fontSize[14],
+                        fontWeight: foundationTokens.font.weight[400],
+                        color: foundationTokens.colors.gray[400],
+                    },
+                    errorText: {
+                        fontSize: foundationTokens.font.fontSize[14],
+                        fontWeight: foundationTokens.font.weight[400],
+                        color: foundationTokens.colors.red[600],
+                    },
+                },
+                fileTag: {
+                    maxWidth: foundationTokens.unit[200],
+                    gap: foundationTokens.unit[4],
+                },
+            },
+            bottomContainer: {
+                hintText: {
+                    fontSize: {
+                        sm: foundationTokens.font.fontSize[12],
+                        md: foundationTokens.font.fontSize[12],
+                        lg: foundationTokens.font.fontSize[12],
+                    },
+                    fontWeight: {
+                        sm: foundationTokens.font.weight[400],
+                        md: foundationTokens.font.weight[400],
+                        lg: foundationTokens.font.weight[400],
+                    },
+                    lineHeight: {
+                        sm: foundationTokens.font.lineHeight[16],
+                        md: foundationTokens.font.lineHeight[16],
+                        lg: foundationTokens.font.lineHeight[16],
+                    },
+                    color: {
+                        default: foundationTokens.colors.gray[400],
+                        hover: foundationTokens.colors.gray[400],
+                        focus: foundationTokens.colors.gray[400],
+                        disabled: foundationTokens.colors.gray[300],
+                        error: foundationTokens.colors.gray[400],
+                    },
+                },
+                errorMessage: {
+                    fontSize: {
+                        sm: foundationTokens.font.fontSize[12],
+                        md: foundationTokens.font.fontSize[12],
+                        lg: foundationTokens.font.fontSize[12],
+                    },
+                    fontWeight: {
+                        sm: foundationTokens.font.weight[400],
+                        md: foundationTokens.font.weight[400],
+                        lg: foundationTokens.font.weight[400],
+                    },
+                    lineHeight: {
+                        sm: foundationTokens.font.lineHeight[16],
+                        md: foundationTokens.font.lineHeight[16],
+                        lg: foundationTokens.font.lineHeight[16],
+                    },
+                    color: foundationTokens.colors.red[600],
+                },
+            },
+        },
+    }
+}

package/lib/components/InputsV2/UploadV2/UploadV2.tokens.ts

@@ -0,0 +1,20 @@
+import { FoundationTokenType } from '../../../tokens/theme.token'
+import { Theme } from '../../../context/theme.enum'
+import { getUploadV2DarkTokens } from './UploadV2.dark.tokens'
+import { getUploadV2LightTokens } from './UploadV2.light.tokens'
+import type { ResponsiveUploadV2Tokens } from './UploadV2.tokens.types'
+
+export type {
+    UploadV2TokensType,
+    ResponsiveUploadV2Tokens,
+} from './UploadV2.tokens.types'
+
+export const getUploadV2Tokens = (
+    foundationToken: FoundationTokenType,
+    theme: Theme | string = Theme.LIGHT
+): ResponsiveUploadV2Tokens => {
+    if (theme === Theme.DARK || theme === 'dark') {
+        return getUploadV2DarkTokens(foundationToken)
+    }
+    return getUploadV2LightTokens(foundationToken)
+}

package/lib/components/InputsV2/UploadV2/UploadV2.tokens.types.ts

@@ -0,0 +1,117 @@
+import { CSSObject } from 'styled-components'
+import { InputSizeV2, InputStateV2 } from '../inputV2.types'
+import { BreakpointType } from '../../../breakpoints/breakPoints'
+import { UploadDragState, UploadState } from './UploadV2.types'
+
+export type UploadV2TokensType = {
+    gap: CSSObject['gap']
+    topContainer: {
+        label: {
+            fontSize: {
+                [key in InputSizeV2]: CSSObject['fontSize']
+            }
+            fontWeight: {
+                [key in InputSizeV2]: CSSObject['fontWeight']
+            }
+            lineHeight: {
+                [key in InputSizeV2]: CSSObject['lineHeight']
+            }
+            color: {
+                [key in InputStateV2]: CSSObject['color']
+            }
+        }
+        subLabel: {
+            fontSize: {
+                [key in InputSizeV2]: CSSObject['fontSize']
+            }
+            fontWeight: {
+                [key in InputSizeV2]: CSSObject['fontWeight']
+            }
+            lineHeight: {
+                [key in InputSizeV2]: CSSObject['lineHeight']
+            }
+            color: {
+                [key in InputStateV2]: CSSObject['color']
+            }
+        }
+        required: {
+            color: CSSObject['color']
+        }
+        helpIcon: {
+            width: {
+                [key in InputSizeV2]: CSSObject['width']
+            }
+            color: {
+                [key in InputStateV2]: CSSObject['color']
+            }
+        }
+    }
+    uploadContainer: {
+        gap: CSSObject['gap']
+        paddingTop: CSSObject['paddingTop']
+        paddingBottom: CSSObject['paddingBottom']
+        paddingLeft: CSSObject['paddingLeft']
+        paddingRight: CSSObject['paddingRight']
+        borderRadius: CSSObject['borderRadius']
+        border: {
+            [key in UploadState | UploadDragState]: CSSObject['border']
+        }
+        backgroundColor: {
+            [key in UploadState | UploadDragState]: CSSObject['backgroundColor']
+        }
+        header: {
+            gap: CSSObject['gap']
+            title: {
+                fontSize: CSSObject['fontSize']
+                fontWeight: CSSObject['fontWeight']
+                color: CSSObject['color']
+            }
+            description: {
+                fontSize: CSSObject['fontSize']
+                fontWeight: CSSObject['fontWeight']
+                color: CSSObject['color']
+            }
+            errorText: {
+                fontSize: CSSObject['fontSize']
+                fontWeight: CSSObject['fontWeight']
+                color: CSSObject['color']
+            }
+        }
+        fileTag: {
+            maxWidth: CSSObject['maxWidth']
+            gap: CSSObject['gap']
+        }
+    }
+    bottomContainer: {
+        hintText: {
+            fontSize: {
+                [key in InputSizeV2]: CSSObject['fontSize']
+            }
+            fontWeight: {
+                [key in InputSizeV2]: CSSObject['fontWeight']
+            }
+            lineHeight: {
+                [key in InputSizeV2]: CSSObject['lineHeight']
+            }
+            color: {
+                [key in InputStateV2]: CSSObject['color']
+            }
+        }
+        errorMessage: {
+            fontSize: {
+                [key in InputSizeV2]: CSSObject['fontSize']
+            }
+            fontWeight: {
+                [key in InputSizeV2]: CSSObject['fontWeight']
+            }
+            lineHeight: {
+                [key in InputSizeV2]: CSSObject['lineHeight']
+            }
+            color: CSSObject['color']
+        }
+    }
+}
+
+export type ResponsiveUploadV2Tokens = {
+    [key in keyof BreakpointType]: UploadV2TokensType
+}