@juspay/blend-design-system 0.0.37-beta.2 → 0.0.37-beta.3

package/lib/tokens/font.tokens.ts

@@ -0,0 +1,312 @@
+import type { CSSObject } from 'styled-components'
+
+type FontWeightType = Readonly<{
+    100: CSSObject['fontWeight']
+    200: CSSObject['fontWeight']
+    300: CSSObject['fontWeight']
+    400: CSSObject['fontWeight']
+    500: CSSObject['fontWeight']
+    600: CSSObject['fontWeight']
+    700: CSSObject['fontWeight']
+    800: CSSObject['fontWeight']
+    900: CSSObject['fontWeight']
+}>
+
+type FontFamilyType = Readonly<{
+    display: CSSObject['fontFamily']
+    body: CSSObject['fontFamily']
+    heading: CSSObject['fontFamily']
+    mono: CSSObject['fontFamily']
+}>
+
+type LetterSpacingType = Readonly<{
+    compressed: CSSObject['letterSpacing']
+    condensed: CSSObject['letterSpacing']
+    normal: CSSObject['letterSpacing']
+    expanded: CSSObject['letterSpacing']
+    extended: CSSObject['letterSpacing']
+}>
+
+export type FontGroupType = Readonly<{
+    fontSize: CSSObject['fontSize']
+    lineHeight: CSSObject['lineHeight']
+    letterSpacing: CSSObject['letterSpacing']
+}>
+
+type FontSizeType = Readonly<{
+    base: CSSObject['fontSize'] // as 1rem
+    body: {
+        xs: FontGroupType
+        sm: FontGroupType
+        md: FontGroupType
+        lg: FontGroupType
+    }
+    heading: {
+        sm: FontGroupType
+        md: FontGroupType
+        lg: FontGroupType
+        xl: FontGroupType
+        '2xl': FontGroupType
+    }
+    display: {
+        sm: FontGroupType
+        md: FontGroupType
+        lg: FontGroupType
+        xl: FontGroupType
+    }
+    code: {
+        sm: FontGroupType
+        md: FontGroupType
+        lg: FontGroupType
+    }
+}>
+type FontSizesType = Readonly<{
+    10: CSSObject['fontSize']
+    12: CSSObject['fontSize']
+    14: CSSObject['fontSize']
+    16: CSSObject['fontSize']
+    18: CSSObject['fontSize']
+    20: CSSObject['fontSize']
+    24: CSSObject['fontSize']
+    28: CSSObject['fontSize']
+    32: CSSObject['fontSize']
+    36: CSSObject['fontSize']
+    38: CSSObject['fontSize']
+    40: CSSObject['fontSize']
+    44: CSSObject['fontSize']
+    48: CSSObject['fontSize']
+    52: CSSObject['fontSize']
+    56: CSSObject['fontSize']
+    60: CSSObject['fontSize']
+    64: CSSObject['fontSize']
+    68: CSSObject['fontSize']
+    72: CSSObject['fontSize']
+    76: CSSObject['fontSize']
+    80: CSSObject['fontSize']
+    84: CSSObject['fontSize']
+    88: CSSObject['fontSize']
+    92: CSSObject['fontSize']
+    96: CSSObject['fontSize']
+    100: CSSObject['fontSize']
+}>
+type LineHeightType = Readonly<{
+    12: CSSObject['lineHeight']
+    14: CSSObject['lineHeight']
+    16: CSSObject['lineHeight']
+    18: CSSObject['lineHeight']
+    20: CSSObject['lineHeight']
+    24: CSSObject['lineHeight']
+    28: CSSObject['lineHeight']
+    32: CSSObject['lineHeight']
+    36: CSSObject['lineHeight']
+    38: CSSObject['lineHeight']
+    40: CSSObject['lineHeight']
+    44: CSSObject['lineHeight']
+    48: CSSObject['lineHeight']
+    52: CSSObject['lineHeight']
+    56: CSSObject['lineHeight']
+    60: CSSObject['lineHeight']
+    64: CSSObject['lineHeight']
+    68: CSSObject['lineHeight']
+    72: CSSObject['lineHeight']
+    76: CSSObject['lineHeight']
+    80: CSSObject['lineHeight']
+    84: CSSObject['lineHeight']
+    88: CSSObject['lineHeight']
+    92: CSSObject['lineHeight']
+    96: CSSObject['lineHeight']
+    100: CSSObject['lineHeight']
+}>
+
+export type FontTokensType = Readonly<{
+    family: FontFamilyType
+    weight: FontWeightType
+    letterSpacing: LetterSpacingType
+    fontSize: FontSizesType
+    lineHeight: LineHeightType
+    size: FontSizeType
+}>
+
+/**
+ * Font tokens
+ * @description
+ * Font tokens are used to define the font family, weight, size, and letter spacing.
+ * @warning
+ * Whenever changing the font tokens, make sure to handle it in the Text   Component as well.
+ */
+const fontTokens: FontTokensType = {
+    family: {
+        display: 'InterDisplay',
+        body: 'InterDisplay',
+        heading: 'InterDisplay',
+        mono: 'SF Mono',
+    },
+    weight: {
+        100: 100,
+        200: 200,
+        300: 300,
+        400: 400,
+        500: 500,
+        600: 600,
+        700: 700,
+        800: 800,
+        900: 900,
+    },
+    letterSpacing: {
+        compressed: -2,
+        condensed: -1,
+        normal: 0,
+        expanded: 1,
+        extended: 2,
+    },
+    size: {
+        base: 16,
+        body: {
+            xs: {
+                fontSize: 10,
+                lineHeight: 14,
+                letterSpacing: 0,
+            },
+            sm: {
+                fontSize: 12,
+                lineHeight: 18,
+                letterSpacing: 0,
+            },
+            md: {
+                fontSize: 14,
+                lineHeight: 20,
+                letterSpacing: 0,
+            },
+            lg: {
+                fontSize: 16,
+                lineHeight: 24,
+                letterSpacing: 0,
+            },
+        },
+        heading: {
+            sm: {
+                fontSize: 18,
+                lineHeight: 24,
+                letterSpacing: 0,
+            },
+            md: {
+                fontSize: 20,
+                lineHeight: 28,
+                letterSpacing: 0,
+            },
+            lg: {
+                fontSize: 24,
+                lineHeight: 32,
+                letterSpacing: 0,
+            },
+            xl: {
+                fontSize: 32,
+                lineHeight: 38,
+                letterSpacing: 0,
+            },
+            '2xl': {
+                fontSize: 40,
+                lineHeight: 46,
+                letterSpacing: 0,
+            },
+        },
+        display: {
+            sm: {
+                fontSize: 48,
+                lineHeight: 56,
+                letterSpacing: 0,
+            },
+            md: {
+                fontSize: 56,
+                lineHeight: 64,
+                letterSpacing: 0,
+            },
+            lg: {
+                fontSize: 64,
+                lineHeight: 70,
+                letterSpacing: 0,
+            },
+            xl: {
+                fontSize: 72,
+                lineHeight: 78,
+                letterSpacing: 0,
+            },
+        },
+        code: {
+            sm: {
+                fontSize: 10,
+                lineHeight: 14,
+                letterSpacing: 0,
+            },
+            md: {
+                fontSize: 12,
+                lineHeight: 18,
+                letterSpacing: 0,
+            },
+            lg: {
+                fontSize: 14,
+                lineHeight: 18,
+                letterSpacing: 0,
+            },
+        },
+    },
+    fontSize: {
+        10: 10,
+        12: 12,
+        14: 14,
+        16: 16,
+        18: 18,
+        20: 20,
+        24: 24,
+        28: 28,
+        32: 32,
+        36: 36,
+        38: 38,
+        40: 40,
+        44: 44,
+        48: 48,
+        52: 52,
+        56: 56,
+        60: 60,
+        64: 64,
+        68: 68,
+        72: 72,
+        76: 76,
+        80: 80,
+        84: 84,
+        88: 88,
+        92: 92,
+        96: 96,
+        100: 100,
+    },
+    lineHeight: {
+        12: 12,
+        14: 14,
+        16: 16,
+        18: 18,
+        20: 20,
+        24: 24,
+        28: 28,
+        32: 32,
+        36: 36,
+        38: 38,
+        40: 40,
+        44: 44,
+        48: 48,
+        52: 52,
+        56: 56,
+        60: 60,
+        64: 64,
+        68: 68,
+        72: 72,
+        76: 76,
+        80: 80,
+        84: 84,
+        88: 88,
+        92: 92,
+        96: 96,
+        100: 100,
+    },
+}
+
+export default fontTokens

package/lib/tokens/index.ts

@@ -0,0 +1,2 @@
+export { default as FOUNDATION_THEME } from './theme.token'
+export type { FoundationTokenType as ThemeType } from './theme.token'

package/lib/tokens/opacity.tokens.ts

@@ -0,0 +1,34 @@
+import type { CSSObject } from 'styled-components'
+
+export type OpacityTokensType = Readonly<{
+    0: CSSObject['opacity']
+    5: CSSObject['opacity']
+    10: CSSObject['opacity']
+    20: CSSObject['opacity']
+    30: CSSObject['opacity']
+    40: CSSObject['opacity']
+    50: CSSObject['opacity']
+    60: CSSObject['opacity']
+    70: CSSObject['opacity']
+    80: CSSObject['opacity']
+    90: CSSObject['opacity']
+    100: CSSObject['opacity']
+    [key: string]: CSSObject['opacity']
+}>
+
+const opacityTokens: OpacityTokensType = {
+    0: 0,
+    5: 0.05,
+    10: 0.1,
+    20: 0.2,
+    30: 0.3,
+    40: 0.4,
+    50: 0.5,
+    60: 0.6,
+    70: 0.7,
+    80: 0.8,
+    90: 0.9,
+    100: 1,
+}
+
+export default opacityTokens

package/lib/tokens/shadows.tokens.ts

@@ -0,0 +1,28 @@
+import type { CSSObject } from 'styled-components'
+
+export type ShadowTokensType = Readonly<{
+    xs: CSSObject['boxShadow']
+    sm: CSSObject['boxShadow']
+    md: CSSObject['boxShadow']
+    lg: CSSObject['boxShadow']
+    xl: CSSObject['boxShadow']
+    '2xl': CSSObject['boxShadow']
+    full: CSSObject['boxShadow']
+    focusPrimary: CSSObject['boxShadow']
+    focusError: CSSObject['boxShadow']
+    [key: string]: CSSObject['boxShadow']
+}>
+
+const shadowTokens: ShadowTokensType = {
+    xs: '0px 1px 1px 0px rgba(5, 5, 6, 0.04)',
+    sm: '0px 2px 3px 0px rgba(5, 5, 6, 0.05)',
+    md: '0px 2px 8px 1px rgba(5, 5, 6, 0.07)',
+    lg: '0px 3px 16px 3px rgba(5, 5, 6, 0.07)',
+    xl: '0px 10px 20px 3px rgba(5, 5, 6, 0.07)',
+    '2xl': '0px 12px 24px 4px rgba(5, 5, 6, 0.07)',
+    full: '0px 24px 48px 8px rgba(5, 5, 6, 0.07)',
+    focusPrimary: '0px 0px 0px 3px #EFF6FF',
+    focusError: '0px 0px 0px 3px #FFC9C9',
+}
+
+export default shadowTokens

package/lib/tokens/theme.token.ts

@@ -0,0 +1,29 @@
+import shadowTokens, { type ShadowTokensType } from './shadows.tokens'
+import borderTokens, { type BorderTokensType } from './border.tokens'
+import fontTokens, { type FontTokensType } from './font.tokens'
+import opacityTokens, { type OpacityTokensType } from './opacity.tokens'
+import unitTokens, { type UnitTokensType } from './unit.tokens'
+import colorTokens, { type ColorTokensType } from './color.tokens'
+import zIndexTokens, { type ZIndexTokensType } from './zIndex.tokens'
+
+export type FoundationTokenType = {
+    shadows: ShadowTokensType
+    border: BorderTokensType
+    font: FontTokensType
+    opacity: OpacityTokensType
+    unit: UnitTokensType
+    colors: ColorTokensType
+    zIndex: ZIndexTokensType
+}
+
+const FOUNDATION_THEME: FoundationTokenType = {
+    shadows: shadowTokens,
+    border: borderTokens,
+    font: fontTokens,
+    opacity: opacityTokens,
+    unit: unitTokens,
+    colors: colorTokens,
+    zIndex: zIndexTokens,
+}
+
+export default FOUNDATION_THEME

package/lib/tokens/unit.tokens.ts

@@ -0,0 +1,101 @@
+import type { CSSObject } from 'styled-components'
+
+type UnitType =
+    | CSSObject['width']
+    | CSSObject['height']
+    | CSSObject['gap']
+    | CSSObject['padding']
+    | CSSObject['margin']
+
+export type UnitTokensType = Readonly<{
+    0: UnitType
+    0.5: UnitType
+    1: UnitType
+    1.5: UnitType
+    2: UnitType
+    3: UnitType
+    4: UnitType
+    5: UnitType
+    6: UnitType
+    7: UnitType
+    8: UnitType
+    9: UnitType
+    10: UnitType
+    12: UnitType
+    14: UnitType
+    15: UnitType
+    16: UnitType
+    18: UnitType
+    18.5: UnitType
+    20: UnitType
+    22: UnitType
+    24: UnitType
+    28: UnitType
+    30: UnitType
+    32: UnitType
+    36: UnitType
+    40: UnitType
+    44: UnitType
+    48: UnitType
+    52: UnitType
+    56: UnitType
+    64: UnitType
+    80: UnitType
+    100: UnitType
+    120: UnitType
+    144: UnitType
+    150: UnitType
+    auto: UnitType
+    [key: string]: UnitType
+}>
+
+const unitTokens: UnitTokensType = {
+    0: '0px',
+    0.5: '0.5px',
+    1: '1px',
+    1.5: '1.5px',
+    2: '2px',
+    3: '3px',
+    4: '4px',
+    5: '5px',
+    6: '6px',
+    7: '7px',
+    8: '8px',
+    9: '9px',
+    10: '10px',
+    11: '11px',
+    12: '12px',
+    13: '13px',
+    14: '14px',
+    15: '15px',
+    16: '16px',
+    16.5: '16.5px',
+    18: '18px',
+    18.5: '18.5px',
+    20: '20px',
+    22: '22px',
+    24: '24px',
+    28: '28px',
+    30: '30px',
+    32: '32px',
+    36: '36px',
+    40: '40px',
+    42: '42px',
+    44: '44px',
+    48: '48px',
+    50: '50px',
+    52: '52px',
+    56: '56px',
+    64: '64px',
+    80: '80px',
+    100: '100px',
+    120: '120px',
+    144: '144px',
+    150: '150px',
+    190: '190px',
+    200: '200px',
+    350: '350px',
+    auto: 'auto',
+}
+
+export default unitTokens

package/lib/tokens/zIndex.tokens.ts

@@ -0,0 +1,25 @@
+import type { CSSObject } from 'styled-components'
+
+export type ZIndexTokensType = Readonly<{
+    0: CSSObject['zIndex']
+    9999: CSSObject['zIndex']
+    1000: CSSObject['zIndex']
+    1100: CSSObject['zIndex']
+    1200: CSSObject['zIndex']
+    101: CSSObject['zIndex']
+    [key: string]: CSSObject['zIndex']
+}>
+
+const zIndexTokens: ZIndexTokensType = {
+    0: 0,
+    10: 10,
+    99: 99,
+    100: 100,
+    101: 101,
+    9999: 9999,
+    1000: 1000,
+    1100: 1100,
+    1200: 1200,
+}
+
+export default zIndexTokens