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

package/lib/token-engine.ts

@@ -0,0 +1,105 @@
+/**
+ * Token Engine — re-exported from @blend-design/token-engine (workspace)
+ *
+ * Consumer import: import { resolveBrandTokens } from '@juspay/blend-design-system/tokens'
+ *
+ * This entry includes React component token resolvers.
+ * For server-safe imports, use: '@juspay/blend-design-system/tokens/server'
+ */
+
+// @blend-design/token-engine is a workspace package (private, not published).
+// Vite resolves it to source via alias, bundles it into this dist entry.
+
+export {
+    resolveBrandTokens,
+    buildBrandFoundation,
+    resolveAllTokens,
+    V2_COMPONENT_KEYS,
+    clearTokenCache,
+    registerResolver,
+    validateBrandConfig,
+    diffBrandConfigs,
+    generateColorScale,
+    isValidHexColor,
+    getContrastRatio,
+    getContrastRatioHex,
+    analyzeContrast,
+    validatePaletteContrast,
+    suggestForeground,
+    hexToRgb,
+    relativeLuminance,
+    meetsWCAG,
+    getPreset,
+    listPresets,
+    PRESETS,
+    PRESET_BLEND_DEFAULT,
+    PRESET_JUSPAY,
+    PRESET_PURPLE,
+    PRESET_GREEN,
+    PRESET_ORANGE,
+    resolveWithInheritance,
+    validateAgainstLocks,
+    extractOverridePaths,
+    RADIUS_PRESETS,
+    BRANCH_ID_PATTERN,
+    VERSION_PATTERN,
+    generateBranchId,
+    parseBranchId,
+    validateBranchId,
+    validateVersion,
+    incrementVersion,
+    TEAM_ROLE_PERMISSIONS,
+    BRANCH_COLLECTION,
+    VERSION_SUBCOLLECTION,
+    SNAPSHOT_SUBCOLLECTION,
+    versionsPath,
+    snapshotsPath,
+    getDefaultPreferences,
+    getDefaultOnboardingState,
+    STORAGE_KEYS,
+    canUserPerformAction,
+} from '@blend-design/token-engine'
+
+export type {
+    BrandConfig,
+    BrandColors,
+    ColorOverrides,
+    RadiusOverrides,
+    ShadowOverrides,
+    FontOverrides,
+    ComponentOverrides,
+    RadiusPreset,
+    ValidationResult,
+    ValidationError,
+    ValidationWarning,
+    TokenDiff,
+    ContrastResult,
+    ContrastViolation,
+    WCAGLevel,
+    WCAGContext,
+    LockViolation,
+    InheritanceResult,
+    TokenLockEntry,
+    BranchStatus,
+    BranchVisibility,
+    BranchPermissions,
+    BranchOwner,
+    BranchMeta,
+    BranchReference,
+    Branch,
+    CreateBranchInput,
+    UpdateBranchInput,
+    Version,
+    CreateVersionInput,
+    Snapshot,
+    CreateSnapshotInput,
+    BranchListFilters,
+    BranchListOptions,
+    BranchListResult,
+    BranchDiff,
+    ResolvedTokensResponse,
+    TeamRole,
+    TeamPermissions,
+    UserPreferences,
+    OnboardingState,
+} from '@blend-design/token-engine'

package/lib/tokens/border.tokens.ts

@@ -0,0 +1,58 @@
+import type { CSSObject } from 'styled-components'
+
+type BorderWidthType = Readonly<{
+    0: CSSObject['borderWidth']
+    1: CSSObject['borderWidth']
+    1.5: CSSObject['borderWidth']
+    2: CSSObject['borderWidth']
+    3: CSSObject['borderWidth']
+    4: CSSObject['borderWidth']
+    [key: string]: CSSObject['borderWidth']
+}>
+
+type BorderRadiusType = Readonly<{
+    0: CSSObject['borderRadius']
+    2: CSSObject['borderRadius']
+    4: CSSObject['borderRadius']
+    6: CSSObject['borderRadius']
+    8: CSSObject['borderRadius']
+    10: CSSObject['borderRadius']
+    12: CSSObject['borderRadius']
+    16: CSSObject['borderRadius']
+    20: CSSObject['borderRadius']
+    full: CSSObject['borderRadius']
+    [key: string]: CSSObject['borderRadius']
+}>
+
+export type BorderTokensType = Readonly<{
+    width: BorderWidthType
+    radius: BorderRadiusType
+}>
+
+const borderTokens: BorderTokensType = {
+    width: {
+        0: '0px',
+        1: '1px',
+        1.5: '1.5px',
+        2: '2px',
+        3: '3px',
+        4: '4px',
+    },
+    radius: {
+        0: '0px',
+        2: '2px',
+        4: '4px',
+        6: '6px',
+        8: '8px',
+        10: '10px',
+        12: '12px',
+        16: '16px',
+        20: '20px',
+        24: '24px',
+        28: '28px',
+        100: '100px',
+        full: '9999px',
+    },
+}
+
+export default borderTokens

package/lib/tokens/color.tokens.ts

@@ -0,0 +1,116 @@
+import type { CSSObject } from 'styled-components'
+
+type ColorGroupType = Readonly<{
+    [key: string]: CSSObject['color']
+}>
+
+export type ColorTokensType = {
+    gray: ColorGroupType
+    primary: ColorGroupType
+    purple: ColorGroupType
+    orange: ColorGroupType
+    red: ColorGroupType
+    green: ColorGroupType
+    yellow: ColorGroupType
+    [key: string]: ColorGroupType
+}
+
+const colorTokens: ColorTokensType = {
+    gray: {
+        0: '#FFFFFF',
+        25: '#FCFCFD',
+        50: '#F5F7FA',
+        100: '#F2F4F8',
+        150: '#ECEFF3',
+        200: '#E1E4EA',
+        300: '#CACFD8',
+        400: '#99A0AE',
+        500: '#717784',
+        600: '#525866',
+        700: '#2B303B',
+        800: '#222530',
+        900: '#181B25',
+        950: '#0E121B',
+        1000: '#050506',
+    },
+    primary: {
+        50: '#EFF6FF',
+        100: '#DBEAFE',
+        200: '#BEDBFF',
+        300: '#8EC5FF',
+        400: '#51A2FF',
+        500: '#2B7FFF',
+        600: '#0561E2',
+        700: '#1447E6',
+        800: '#193CB8',
+        900: '#1C398E',
+        950: '#162456',
+    },
+    purple: {
+        50: '#FAF5FF',
+        100: '#F3E8FF',
+        200: '#E9D4FF',
+        300: '#DAB2FF',
+        400: '#C27AFF',
+        500: '#AD46FF',
+        600: '#9810FA',
+        700: '#8200DB',
+        800: '#6E11B0',
+        900: '#59168B',
+        950: '#3C0366',
+    },
+    orange: {
+        50: '#FFF7ED',
+        100: '#FFEDD4',
+        200: '#FFD6A8',
+        300: '#FFB86A',
+        400: '#FF8904',
+        500: '#FF6900',
+        600: '#F54A00',
+        700: '#CA3500',
+        800: '#9F2D00',
+        900: '#7E2A0C',
+        950: '#441306',
+    },
+    red: {
+        50: '#FEF2F2',
+        100: '#FFE2E2',
+        200: '#FFC9C9',
+        300: '#FFA2A2',
+        400: '#FF6467',
+        500: '#FB2C36',
+        600: '#E7000B',
+        700: '#C10007',
+        800: '#9F0712',
+        900: '#82181A',
+        950: '#460809',
+    },
+    green: {
+        50: '#F0FDF4',
+        100: '#DCFCE7',
+        200: '#B9F8CF',
+        300: '#7BF1A8',
+        400: '#00D492',
+        500: '#00C951',
+        600: '#00A63E',
+        700: '#008236',
+        800: '#016630',
+        900: '#0D542B',
+        950: '#052E16',
+    },
+    yellow: {
+        50: '#FEFCE8',
+        100: '#FEF9C2',
+        200: '#FFF085',
+        300: '#FFDF20',
+        400: '#FCC800',
+        500: '#EFB100',
+        600: '#D08700',
+        700: '#A65F00',
+        800: '#894B00',
+        900: '#733E0A',
+        950: '#432004',
+    },
+}
+
+export default colorTokens

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