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

package/lib/components/CodeEditorV2/MonacoEditor/monacoTheme.ts

@@ -0,0 +1,133 @@
+import type * as Monaco from 'monaco-editor'
+import type { CodeEditorV2Tokens } from '../codeEditorV2.tokens'
+import { MonacoTheme } from '../codeEditorV2.types'
+import { backupColor } from '../utils'
+const MONACO_COLOR_FALLBACK = '#24292F'
+
+const toMonacoColor = (
+    color: string | undefined,
+    fallback = MONACO_COLOR_FALLBACK
+) => (color ?? fallback).replace('#', '')
+
+/** Token names mapped to syntax key and optional font style for Monaco theme rules */
+const SYNTAX_RULE_SPEC: Array<{
+    token: string
+    syntaxKey: keyof CodeEditorV2Tokens['body']['syntax']
+    fontStyle?: string
+}> = [
+    { token: 'keyword', syntaxKey: 'keyword' },
+    { token: 'keyword.control', syntaxKey: 'keyword', fontStyle: 'bold' },
+    { token: 'keyword.operator', syntaxKey: 'operator' },
+    { token: 'function', syntaxKey: 'function' },
+    { token: 'function.call', syntaxKey: 'function' },
+    { token: 'identifier', syntaxKey: 'text' },
+    { token: 'string', syntaxKey: 'string' },
+    { token: 'string.quoted', syntaxKey: 'string' },
+    { token: 'string.escape', syntaxKey: 'keyword', fontStyle: 'bold' },
+    { token: 'number', syntaxKey: 'number' },
+    { token: 'number.hex', syntaxKey: 'number' },
+    { token: 'number.binary', syntaxKey: 'number' },
+    { token: 'number.octal', syntaxKey: 'number' },
+    { token: 'number.float', syntaxKey: 'number' },
+    { token: 'delimiter', syntaxKey: 'operator' },
+    { token: 'delimiter.bracket', syntaxKey: 'operator' },
+    { token: 'delimiter.parenthesis', syntaxKey: 'operator' },
+    { token: 'delimiter.square', syntaxKey: 'operator' },
+    { token: 'delimiter.curly', syntaxKey: 'operator' },
+    { token: 'operator', syntaxKey: 'operator' },
+    { token: 'comment', syntaxKey: 'comment', fontStyle: 'italic' },
+    { token: 'comment.line', syntaxKey: 'comment', fontStyle: 'italic' },
+    { token: 'comment.block', syntaxKey: 'comment', fontStyle: 'italic' },
+    { token: 'comment.doc', syntaxKey: 'comment', fontStyle: 'italic' },
+    { token: 'variable', syntaxKey: 'variable' },
+    { token: 'variable.name', syntaxKey: 'variable' },
+    { token: 'variable.parameter', syntaxKey: 'variable' },
+    { token: 'type', syntaxKey: 'keyword' },
+    { token: 'type.identifier', syntaxKey: 'keyword' },
+    { token: 'constant', syntaxKey: 'number' },
+    { token: 'constant.language', syntaxKey: 'keyword', fontStyle: 'bold' },
+    { token: 'tag', syntaxKey: 'keyword' },
+    { token: 'tag.id', syntaxKey: 'function' },
+    { token: 'tag.class', syntaxKey: 'function' },
+    { token: 'attribute.name', syntaxKey: 'variable' },
+    { token: 'attribute.value', syntaxKey: 'string' },
+    { token: 'regexp', syntaxKey: 'string', fontStyle: 'bold' },
+    { token: '', syntaxKey: 'text' },
+]
+
+export function createEditorTheme(
+    tokens: CodeEditorV2Tokens
+): Monaco.editor.IStandaloneThemeData {
+    const syntax = tokens.body.syntax
+    const gutter = tokens.body.gutter
+    const highlight = tokens.body.highlightedLine.backgroundColor
+    const keyword = syntax.keyword.color ?? MONACO_COLOR_FALLBACK
+    const gutterColor = gutter.color ?? backupColor.body.gutter.color
+
+    const rules = SYNTAX_RULE_SPEC.map(({ token, syntaxKey, fontStyle }) => ({
+        token,
+        foreground: toMonacoColor(syntax[syntaxKey].color),
+        ...(fontStyle && { fontStyle }),
+    }))
+
+    const base: Monaco.editor.IStandaloneThemeData['base'] =
+        tokens.theme === MonacoTheme.DARK ? 'vs-dark' : 'vs'
+
+    return {
+        base,
+        inherit: true,
+        rules,
+        colors: {
+            'editor.background':
+                tokens.body.backgroundColor || backupColor.body.backgroundColor,
+            'editor.foreground': syntax.text.color || MONACO_COLOR_FALLBACK,
+            'editor.lineHighlightBackground':
+                gutter.backgroundColor.unchanged ||
+                backupColor.body.gutter.backgroundColor.unchanged,
+            'editor.lineHighlightBorder':
+                gutter.borderColor.unchanged ||
+                backupColor.body.gutter.borderColor.unchanged,
+            'editorLineNumber.foreground':
+                gutter.color || backupColor.body.gutter.color,
+            'editorLineNumber.activeForeground':
+                syntax.text.color || MONACO_COLOR_FALLBACK,
+            'editor.selectionBackground': `${keyword}20`,
+            'editor.inactiveSelectionBackground': `${keyword}10`,
+            'editorCursor.foreground':
+                syntax.text.color || MONACO_COLOR_FALLBACK,
+            'editorWhitespace.foreground': 'transparent',
+            'editorIndentGuide.background': 'transparent',
+            'editorIndentGuide.activeBackground': 'transparent',
+            'scrollbarSlider.background': `${gutterColor}40`,
+            'scrollbarSlider.hoverBackground': `${gutterColor}55`,
+            'scrollbarSlider.activeBackground': `${gutterColor}70`,
+            'scrollbar.shadow': `${gutterColor}10`,
+
+            // Diff: inserted (added) line & gutter backgrounds
+            'diffEditor.insertedLineBackground':
+                highlight.added ||
+                backupColor.body.highlightedLine.backgroundColor,
+            'diffEditorGutter.insertedLineBackground':
+                gutter.backgroundColor.added ||
+                backupColor.body.highlightedLine.backgroundColor,
+            'diffEditorOverview.insertedForeground':
+                gutter.borderColor.added ||
+                backupColor.body.gutter.borderColor.added,
+
+            // Diff: removed line & gutter backgrounds
+            'diffEditor.removedLineBackground':
+                highlight.removed ||
+                backupColor.body.highlightedLine.backgroundColor,
+            'diffEditorGutter.removedLineBackground':
+                gutter.backgroundColor.removed ||
+                backupColor.body.gutter.backgroundColor.removed,
+            'diffEditorOverview.removedForeground':
+                gutter.borderColor.removed ||
+                backupColor.body.gutter.borderColor.removed,
+
+            // Diff: unchanged area border
+            'diffEditor.diagonalFill': `${gutterColor}15`,
+            'diffEditor.border': `${gutterColor}30`,
+        },
+    }
+}

package/lib/components/CodeEditorV2/codeEditorV2.dark.tokens.ts

@@ -0,0 +1,168 @@
+import { FoundationTokenType } from '../../tokens/theme.token'
+import { ResponsiveCodeEditorV2Tokens } from './codeEditorV2.tokens'
+import { DiffLineType, MonacoTheme } from './codeEditorV2.types'
+
+export const darkCodeEditorV2Tokens = (
+    foundationToken: FoundationTokenType
+): ResponsiveCodeEditorV2Tokens => {
+    return {
+        sm: {
+            theme: MonacoTheme.DARK,
+            backgroundColor: foundationToken.colors.gray[25],
+            border: `1px solid ${foundationToken.colors.gray[200]}`,
+            borderRadius: foundationToken.border.radius[8],
+            boxShadow: '0px 2px 3px 0px rgba(5, 5, 6, 0.05)',
+            header: {
+                backgroundColor: foundationToken.colors.gray[900],
+                borderBottom: `1px solid ${foundationToken.colors.gray[200]}`,
+                paddingTop: foundationToken.unit[10],
+                paddingBottom: foundationToken.unit[10],
+                paddingLeft: foundationToken.unit[12],
+                paddingRight: foundationToken.unit[12],
+                gap: foundationToken.unit[8],
+                icon: {
+                    width: 16,
+                },
+                text: {
+                    fontSize: foundationToken.font.size.body.md.fontSize,
+                    fontWeight: foundationToken.font.weight[500],
+                    lineHeight: '18px',
+                    color: foundationToken.colors.gray[0],
+                },
+            },
+            body: {
+                paddingTop: foundationToken.unit[12],
+                paddingBottom: foundationToken.unit[12],
+                paddingLeft: foundationToken.unit[0],
+                paddingRight: foundationToken.unit[0],
+                backgroundColor: foundationToken.colors.gray[900],
+
+                gutter: {
+                    width: '40px',
+                    color: foundationToken.colors.gray[0],
+                    backgroundColor: {
+                        [DiffLineType.UNCHANGED]:
+                            foundationToken.colors.gray[200],
+                        [DiffLineType.REMOVED]: foundationToken.colors.red[500],
+                        [DiffLineType.ADDED]: foundationToken.colors.green[500],
+                    },
+                    borderLeft: {
+                        [DiffLineType.UNCHANGED]: 'none',
+                        [DiffLineType.REMOVED]: `2px solid ${foundationToken.colors.red[600]}`,
+                        [DiffLineType.ADDED]: `2px solid ${foundationToken.colors.green[600]}`,
+                    },
+                    borderColor: {
+                        [DiffLineType.UNCHANGED]: 'transparent',
+                        [DiffLineType.REMOVED]: foundationToken.colors.red[600],
+                        [DiffLineType.ADDED]: foundationToken.colors.green[600],
+                    },
+                },
+                code: {
+                    fontFamily: "'JetBrains Mono'",
+                    fontSize: '11px',
+                    lineHeight: '1.5',
+                    paddingTop: foundationToken.unit[4],
+                    paddingBottom: foundationToken.unit[4],
+                    paddingLeft: foundationToken.unit[12],
+                    paddingRight: foundationToken.unit[32],
+                },
+                highlightedLine: {
+                    backgroundColor: {
+                        [DiffLineType.UNCHANGED]: 'transparent',
+                        [DiffLineType.REMOVED]: foundationToken.colors.red[700],
+                        [DiffLineType.ADDED]: foundationToken.colors.green[700],
+                    },
+                },
+                syntax: {
+                    keyword: { color: foundationToken.colors.purple[600] },
+                    function: { color: foundationToken.colors.primary[600] },
+                    string: { color: foundationToken.colors.green[100] },
+                    number: { color: foundationToken.colors.orange[500] },
+                    operator: { color: foundationToken.colors.gray[0] },
+                    variable: { color: foundationToken.colors.gray[0] },
+                    comment: { color: foundationToken.colors.gray[400] },
+                    text: { color: foundationToken.colors.gray[0] },
+                },
+            },
+        },
+        lg: {
+            theme: MonacoTheme.DARK,
+            backgroundColor: foundationToken.colors.gray[25],
+            border: `1px solid ${foundationToken.colors.gray[200]}`,
+            borderRadius: foundationToken.border.radius[8],
+            boxShadow: '0px 2px 3px 0px rgba(5, 5, 6, 0.05)',
+            header: {
+                backgroundColor: foundationToken.colors.gray[900],
+                borderBottom: `1px solid ${foundationToken.colors.gray[200]}`,
+                paddingTop: foundationToken.unit[10],
+                paddingBottom: foundationToken.unit[10],
+                paddingLeft: foundationToken.unit[16],
+                paddingRight: foundationToken.unit[16],
+                gap: foundationToken.unit[12],
+                icon: {
+                    width: 20,
+                },
+                text: {
+                    fontSize: foundationToken.font.size.body.md.fontSize,
+                    fontWeight: foundationToken.font.weight[500],
+                    lineHeight: '20px',
+                    color: foundationToken.colors.gray[0],
+                },
+            },
+            body: {
+                paddingTop: foundationToken.unit[16],
+                paddingBottom: foundationToken.unit[16],
+                paddingLeft: foundationToken.unit[0],
+                paddingRight: foundationToken.unit[0],
+                backgroundColor: foundationToken.colors.gray[900],
+
+                gutter: {
+                    width: '44px',
+                    color: foundationToken.colors.gray[0],
+                    backgroundColor: {
+                        [DiffLineType.UNCHANGED]:
+                            foundationToken.colors.gray[200],
+                        [DiffLineType.REMOVED]: foundationToken.colors.red[500],
+                        [DiffLineType.ADDED]: foundationToken.colors.green[500],
+                    },
+                    borderLeft: {
+                        [DiffLineType.UNCHANGED]: 'none',
+                        [DiffLineType.REMOVED]: `2px solid ${foundationToken.colors.red[600]}`,
+                        [DiffLineType.ADDED]: `2px solid ${foundationToken.colors.green[600]}`,
+                    },
+                    borderColor: {
+                        [DiffLineType.UNCHANGED]: 'transparent',
+                        [DiffLineType.REMOVED]: foundationToken.colors.red[600],
+                        [DiffLineType.ADDED]: foundationToken.colors.green[600],
+                    },
+                },
+                code: {
+                    fontFamily: "'JetBrains Mono'",
+                    fontSize: '12px',
+                    lineHeight: '1.6',
+                    paddingTop: foundationToken.unit[4],
+                    paddingBottom: foundationToken.unit[4],
+                    paddingLeft: foundationToken.unit[12],
+                    paddingRight: foundationToken.unit[32],
+                },
+                highlightedLine: {
+                    backgroundColor: {
+                        [DiffLineType.UNCHANGED]: 'transparent',
+                        [DiffLineType.REMOVED]: foundationToken.colors.red[700],
+                        [DiffLineType.ADDED]: foundationToken.colors.green[700],
+                    },
+                },
+                syntax: {
+                    keyword: { color: foundationToken.colors.purple[600] },
+                    function: { color: foundationToken.colors.primary[600] },
+                    string: { color: foundationToken.colors.green[100] },
+                    number: { color: foundationToken.colors.orange[500] },
+                    operator: { color: foundationToken.colors.gray[0] },
+                    variable: { color: foundationToken.colors.gray[0] },
+                    comment: { color: foundationToken.colors.gray[400] },
+                    text: { color: foundationToken.colors.gray[0] },
+                },
+            },
+        },
+    }
+}

package/lib/components/CodeEditorV2/codeEditorV2.light.token.ts

@@ -0,0 +1,170 @@
+import { FoundationTokenType } from '../../tokens/theme.token'
+import { ResponsiveCodeEditorV2Tokens } from './codeEditorV2.tokens'
+import { DiffLineType, MonacoTheme } from './codeEditorV2.types'
+
+export const lightCodeEditorV2Tokens = (
+    foundationToken: FoundationTokenType
+): ResponsiveCodeEditorV2Tokens => {
+    return {
+        sm: {
+            backgroundColor: foundationToken.colors.gray[25],
+            border: `1px solid ${foundationToken.colors.gray[200]}`,
+            borderRadius: foundationToken.border.radius[8],
+            boxShadow: '0px 2px 3px 0px rgba(5, 5, 6, 0.05)',
+            theme: MonacoTheme.LIGHT,
+            header: {
+                backgroundColor: foundationToken.colors.gray[50],
+                borderBottom: `1px solid ${foundationToken.colors.gray[200]}`,
+                paddingTop: foundationToken.unit[10],
+                paddingBottom: foundationToken.unit[10],
+                paddingLeft: foundationToken.unit[12],
+                paddingRight: foundationToken.unit[12],
+                gap: foundationToken.unit[8],
+                icon: {
+                    width: 16,
+                },
+                text: {
+                    fontSize: foundationToken.font.size.body.md.fontSize,
+                    fontWeight: foundationToken.font.weight[500],
+                    lineHeight: '18px',
+                    color: foundationToken.colors.gray[900],
+                },
+            },
+            body: {
+                paddingTop: foundationToken.unit[12],
+                paddingBottom: foundationToken.unit[12],
+                paddingLeft: foundationToken.unit[0],
+                paddingRight: foundationToken.unit[0],
+                backgroundColor: foundationToken.colors.gray[25],
+
+                gutter: {
+                    width: '40px',
+                    color: foundationToken.colors.gray[400],
+                    backgroundColor: {
+                        [DiffLineType.UNCHANGED]:
+                            foundationToken.colors.gray[200],
+                        [DiffLineType.REMOVED]: foundationToken.colors.red[200],
+                        [DiffLineType.ADDED]: foundationToken.colors.green[200],
+                    },
+                    borderLeft: {
+                        [DiffLineType.UNCHANGED]: 'none',
+                        [DiffLineType.REMOVED]: `2px solid ${foundationToken.colors.red[600]}`,
+                        [DiffLineType.ADDED]: `2px solid ${foundationToken.colors.green[600]}`,
+                    },
+                    borderColor: {
+                        [DiffLineType.UNCHANGED]:
+                            foundationToken.colors.gray[0],
+                        [DiffLineType.REMOVED]: foundationToken.colors.red[600],
+                        [DiffLineType.ADDED]: foundationToken.colors.green[600],
+                    },
+                },
+                code: {
+                    fontFamily: "'JetBrains Mono'",
+                    fontSize: '11px',
+                    lineHeight: '1.5',
+                    paddingTop: foundationToken.unit[4],
+                    paddingBottom: foundationToken.unit[4],
+                    paddingLeft: foundationToken.unit[12],
+                    paddingRight: foundationToken.unit[32],
+                },
+                highlightedLine: {
+                    backgroundColor: {
+                        [DiffLineType.UNCHANGED]: 'transparent',
+                        [DiffLineType.REMOVED]: foundationToken.colors.red[100],
+                        [DiffLineType.ADDED]: foundationToken.colors.green[100],
+                    },
+                },
+                syntax: {
+                    keyword: { color: foundationToken.colors.purple[600] },
+                    function: { color: foundationToken.colors.primary[600] },
+                    string: { color: foundationToken.colors.green[600] },
+                    number: { color: foundationToken.colors.orange[500] },
+                    operator: { color: foundationToken.colors.gray[600] },
+                    variable: { color: foundationToken.colors.gray[800] },
+                    comment: { color: foundationToken.colors.gray[400] },
+                    text: { color: foundationToken.colors.gray[900] },
+                },
+            },
+        },
+        lg: {
+            backgroundColor: foundationToken.colors.gray[25],
+            border: `1px solid ${foundationToken.colors.gray[200]}`,
+            borderRadius: foundationToken.border.radius[8],
+            boxShadow: '0px 2px 3px 0px rgba(5, 5, 6, 0.05)',
+            theme: MonacoTheme.LIGHT,
+            header: {
+                backgroundColor: foundationToken.colors.gray[50],
+                borderBottom: `1px solid ${foundationToken.colors.gray[200]}`,
+                paddingTop: foundationToken.unit[10],
+                paddingBottom: foundationToken.unit[10],
+                paddingLeft: foundationToken.unit[16],
+                paddingRight: foundationToken.unit[16],
+                gap: foundationToken.unit[12],
+                icon: {
+                    width: 20,
+                },
+                text: {
+                    fontSize: foundationToken.font.size.body.md.fontSize,
+                    fontWeight: foundationToken.font.weight[500],
+                    lineHeight: '20px',
+                    color: foundationToken.colors.gray[900],
+                },
+            },
+            body: {
+                paddingTop: foundationToken.unit[16],
+                paddingBottom: foundationToken.unit[16],
+                paddingLeft: foundationToken.unit[0],
+                paddingRight: foundationToken.unit[0],
+                backgroundColor: foundationToken.colors.gray[25],
+
+                gutter: {
+                    width: '44px',
+                    color: foundationToken.colors.gray[400],
+                    backgroundColor: {
+                        [DiffLineType.UNCHANGED]:
+                            foundationToken.colors.gray[200],
+                        [DiffLineType.REMOVED]: foundationToken.colors.red[200],
+                        [DiffLineType.ADDED]: foundationToken.colors.green[200],
+                    },
+                    borderLeft: {
+                        [DiffLineType.UNCHANGED]: 'none',
+                        [DiffLineType.REMOVED]: `2px solid ${foundationToken.colors.red[600]}`,
+                        [DiffLineType.ADDED]: `2px solid ${foundationToken.colors.green[600]}`,
+                    },
+                    borderColor: {
+                        [DiffLineType.UNCHANGED]:
+                            foundationToken.colors.gray[0],
+                        [DiffLineType.REMOVED]: foundationToken.colors.red[600],
+                        [DiffLineType.ADDED]: foundationToken.colors.green[600],
+                    },
+                },
+                code: {
+                    fontFamily: "'JetBrains Mono'",
+                    fontSize: '12px',
+                    lineHeight: '1.6',
+                    paddingTop: foundationToken.unit[4],
+                    paddingBottom: foundationToken.unit[4],
+                    paddingLeft: foundationToken.unit[12],
+                    paddingRight: foundationToken.unit[32],
+                },
+                highlightedLine: {
+                    backgroundColor: {
+                        [DiffLineType.UNCHANGED]: 'transparent',
+                        [DiffLineType.REMOVED]: foundationToken.colors.red[100],
+                        [DiffLineType.ADDED]: foundationToken.colors.green[100],
+                    },
+                },
+                syntax: {
+                    keyword: { color: foundationToken.colors.purple[600] },
+                    function: { color: foundationToken.colors.primary[600] },
+                    string: { color: foundationToken.colors.green[600] },
+                    number: { color: foundationToken.colors.orange[500] },
+                    operator: { color: foundationToken.colors.gray[600] },
+                    variable: { color: foundationToken.colors.gray[800] },
+                    comment: { color: foundationToken.colors.gray[400] },
+                    text: { color: foundationToken.colors.gray[900] },
+                },
+            },
+        },
+    }
+}

package/lib/components/CodeEditorV2/codeEditorV2.tokens.ts

@@ -0,0 +1,99 @@
+import type { CSSObject } from 'styled-components'
+import { DiffLineType } from './codeEditorV2.types'
+import { BreakpointType } from '../../breakpoints/breakPoints'
+import { FoundationTokenType } from '../../tokens/theme.token'
+import { darkCodeEditorV2Tokens } from './codeEditorV2.dark.tokens'
+import { lightCodeEditorV2Tokens } from './codeEditorV2.light.token'
+import { Theme } from '../../context/theme.enum'
+
+export type CodeEditorV2Tokens = {
+    backgroundColor: CSSObject['backgroundColor']
+    border: CSSObject['border']
+    borderRadius: CSSObject['borderRadius']
+    boxShadow: CSSObject['boxShadow']
+    theme: 'light' | 'dark'
+    // Header tokens
+    header: {
+        backgroundColor: CSSObject['backgroundColor']
+        borderBottom: CSSObject['borderBottom']
+        paddingTop: CSSObject['paddingTop']
+        paddingBottom: CSSObject['paddingBottom']
+        paddingLeft: CSSObject['paddingLeft']
+        paddingRight: CSSObject['paddingRight']
+        gap: CSSObject['gap']
+        icon: {
+            width: CSSObject['width']
+        }
+        text: {
+            fontSize: CSSObject['fontSize']
+            fontWeight: CSSObject['fontWeight']
+            lineHeight: CSSObject['lineHeight']
+            color: CSSObject['color']
+        }
+    }
+    // Content area tokens
+    body: {
+        paddingTop: CSSObject['paddingTop']
+        paddingBottom: CSSObject['paddingBottom']
+        paddingLeft: CSSObject['paddingLeft']
+        paddingRight: CSSObject['paddingRight']
+        backgroundColor: CSSObject['backgroundColor']
+
+        // Gutter (line numbers) tokens
+        gutter: {
+            width: CSSObject['width']
+            color: CSSObject['color']
+            backgroundColor: {
+                [key in DiffLineType]: CSSObject['backgroundColor']
+            }
+            borderLeft: {
+                [key in DiffLineType]: CSSObject['borderLeft']
+            }
+            borderColor: {
+                [key in DiffLineType]: CSSObject['color']
+            }
+        }
+        // Code tokens
+        code: {
+            fontFamily: CSSObject['fontFamily']
+            fontSize: CSSObject['fontSize']
+            lineHeight: CSSObject['lineHeight']
+            paddingTop: CSSObject['paddingTop']
+            paddingBottom: CSSObject['paddingBottom']
+            paddingLeft: CSSObject['paddingLeft']
+            paddingRight: CSSObject['paddingRight']
+        }
+        // Highlighted line tokens (for diff mode and code highlighting)
+        highlightedLine: {
+            backgroundColor: {
+                [key in DiffLineType]: CSSObject['backgroundColor']
+            }
+        }
+        // Syntax highlighting tokens
+        syntax: {
+            keyword: { color: CSSObject['color'] }
+            function: { color: CSSObject['color'] }
+            string: { color: CSSObject['color'] }
+            number: { color: CSSObject['color'] }
+            operator: { color: CSSObject['color'] }
+            variable: { color: CSSObject['color'] }
+            comment: { color: CSSObject['color'] }
+            text: { color: CSSObject['color'] }
+        }
+    }
+}
+
+export type ResponsiveCodeEditorV2Tokens = {
+    [key in keyof BreakpointType]: CodeEditorV2Tokens
+}
+
+export const getCodeEditorV2Tokens = (
+    foundationToken: FoundationTokenType,
+    theme: Theme | string = Theme.LIGHT
+): ResponsiveCodeEditorV2Tokens => {
+    if (theme === Theme.DARK || theme === 'dark') {
+        return darkCodeEditorV2Tokens(foundationToken)
+    }
+
+    return lightCodeEditorV2Tokens(foundationToken)
+}