@neo4j-cypher/react-codemirror - npm Package Compare versions

Comparing version 2.0.0-canary-b08f11e to 2.0.0-canary-b0e419e

CHANGELOG.md

 # @neo4j-cypher/react-codemirror
 
+## 2.0.0-next.15
+
+### Patch Changes
+
+- adc5b64: using custom light color theme for the cypher editor
+- Updated dependencies [88fbe63]
+- Updated dependencies [22081b0]
+- Updated dependencies [62ac442]
+  - @neo4j-cypher/language-support@2.0.0-next.12
+
+## 2.0.0-next.14
+
+### Patch Changes
+
+- d85c1e0: Fixes bug with auto-completions
+- Updated dependencies [bccf518]
+  - @neo4j-cypher/language-support@2.0.0-next.11
+
+## 2.0.0-next.13
+
+### Patch Changes
+
+- Updated dependencies [8760c02]
+  - @neo4j-cypher/language-support@2.0.0-next.10
+
 ## 2.0.0-next.12
@@ -4,0 +29,0 @@

dist/e2e_tests/autoCompletion.spec.js

 import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/unbound-method */
 import { testData } from '@neo4j-cypher/language-support';
@@ -69,2 +70,14 @@ import { expect, test } from '@playwright/experimental-ct-react';
 });
+test('can complete properties with backticks', async ({ mount, page }) => {
+    const component = await mount(_jsx(CypherEditor, { schema: {
+            propertyKeys: ['foo bar'],
+        } }));
+    const textField = page.getByRole('textbox');
+    await textField.fill('MATCH (n) RETURN n.foo');
+    await textField.press('Escape');
+    await textField.press('Control+ ');
+    await page.locator('.cm-tooltip-autocomplete').getByText('foo bar').click();
+    await expect(page.locator('.cm-tooltip-autocomplete')).not.toBeVisible();
+    await expect(component).toContainText('MATCH (n) RETURN n.`foo bar`');
+});
 test('can update dbschema', async ({ mount, page }) => {
@@ -201,3 +214,3 @@ const component = await mount(_jsx(CypherEditor, { schema: {
     // and trusting the CSS is making this truly strikethrough
-    await expect(page.locator('.cm-deprecated-completion')).toBeVisible();
+    await expect(page.locator('.cm-deprecated-element')).toBeVisible();
 });
@@ -215,11 +228,4 @@ test('shows deprecated function as strikethrough on auto-completion', async ({ page, mount, }) => {
     // and trusting the CSS is making this truly strikethrough
-    await expect(page.locator('.cm-deprecated-completion')).toBeVisible();
+    await expect(page.locator('.cm-deprecated-element')).toBeVisible();
 });
-test('does not signature help information on auto-completion if flag not enabled explicitly', async ({ page, mount, }) => {
-    await mount(_jsx(CypherEditor, { schema: testData.mockSchema }));
-    const textField = page.getByRole('textbox');
-    await textField.fill('CALL apoc.periodic.');
-    await expect(page.locator('.cm-tooltip-autocomplete')).toBeVisible();
-    await expect(page.locator('.cm-completionInfo')).not.toBeVisible();
-});
 test('does not signature help information on auto-completion if docs and signature are empty', async ({ page, mount, }) => {
@@ -226,0 +232,0 @@ await mount(_jsx(CypherEditor, { schema: testData.mockSchema, featureFlags: {

dist/e2e_tests/performanceTest.spec.js

@@ -7,3 +7,4 @@ import { jsx as _jsx } from "react/jsx-runtime";
 test.use({ viewport: { width: 1000, height: 500 } });
-test('benchmarking & performance test session', async ({ mount, page }) => {
+test('benchmarking & performance test session', async ({ browserName, mount, page, }) => {
+    test.skip(browserName !== 'chromium');
     const client = await page.context().newCDPSession(page);
@@ -10,0 +11,0 @@ if (process.env.BENCHMARKING === 'true') {

dist/e2e_tests/syntaxHighlighting.spec.js

@@ -17,11 +17,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
     const keywordcolors = await Promise.all(['MATCH', 'WHERE', 'RETURN'].map((kw) => editorPage.getHexColorOfLocator(page.getByText(kw))));
-    keywordcolors.every((kw) => expect(kw).toEqual(lightThemeConstants.highlightStyles.keyword));
+    keywordcolors.every((kw) => expect(kw).toEqual(lightThemeConstants.highlightStyles.keyword.toLowerCase()));
     const labelReltype = await Promise.all(['Label', 'REL_TYPE'].map((kw) => editorPage.getHexColorOfLocator(page.getByText(kw))));
-    labelReltype.every((kw) => expect(kw).toEqual(lightThemeConstants.highlightStyles.label));
-    expect(await editorPage.getHexColorOfLocator(page.getByText('parameter'))).toEqual(lightThemeConstants.highlightStyles.paramValue);
-    expect(await editorPage.getHexColorOfLocator(page.getByText('property'))).toEqual(lightThemeConstants.highlightStyles.property);
-    expect(await editorPage.getHexColorOfLocator(page.getByText('false'))).toEqual(lightThemeConstants.highlightStyles.booleanLiteral);
-    expect(await editorPage.getHexColorOfLocator(page.getByText('String'))).toEqual(lightThemeConstants.highlightStyles.stringLiteral);
-    expect(await editorPage.getHexColorOfLocator(page.getByText('comment'))).toEqual(lightThemeConstants.highlightStyles.comment);
-    expect(await editorPage.getHexColorOfLocator(page.getByText('1234', { exact: true }))).toEqual(lightThemeConstants.highlightStyles.numberLiteral);
+    labelReltype.every((kw) => expect(kw).toEqual(lightThemeConstants.highlightStyles.label.toLowerCase()));
+    expect(await editorPage.getHexColorOfLocator(page.getByText('parameter'))).toEqual(lightThemeConstants.highlightStyles.paramValue.toLowerCase());
+    expect(await editorPage.getHexColorOfLocator(page.getByText('property'))).toEqual(lightThemeConstants.highlightStyles.property.toLowerCase());
+    expect(await editorPage.getHexColorOfLocator(page.getByText('false'))).toEqual(lightThemeConstants.highlightStyles.booleanLiteral.toLowerCase());
+    expect(await editorPage.getHexColorOfLocator(page.getByText('String'))).toEqual(lightThemeConstants.highlightStyles.stringLiteral.toLowerCase());
+    expect(await editorPage.getHexColorOfLocator(page.getByText('comment'))).toEqual(lightThemeConstants.highlightStyles.comment.toLowerCase());
+    expect(await editorPage.getHexColorOfLocator(page.getByText('1234', { exact: true }))).toEqual(lightThemeConstants.highlightStyles.numberLiteral.toLowerCase());
     expect(await editorPage.editorBackgroundIsUnset()).toEqual(false);
@@ -40,11 +40,11 @@ });
     const keywordcolors = await Promise.all(['MATCH', 'WHERE', 'RETURN'].map((kw) => editorPage.getHexColorOfLocator(page.getByText(kw))));
-    keywordcolors.every((kw) => expect(kw).toEqual(darkThemeConstants.highlightStyles.keyword));
+    keywordcolors.every((kw) => expect(kw).toEqual(darkThemeConstants.highlightStyles.keyword.toLowerCase()));
     const labelReltype = await Promise.all(['Label', 'REL_TYPE'].map((kw) => editorPage.getHexColorOfLocator(page.getByText(kw))));
-    labelReltype.every((kw) => expect(kw).toEqual(darkThemeConstants.highlightStyles.label));
-    expect(await editorPage.getHexColorOfLocator(page.getByText('parameter'))).toEqual(darkThemeConstants.highlightStyles.paramValue);
-    expect(await editorPage.getHexColorOfLocator(page.getByText('property'))).toEqual(darkThemeConstants.highlightStyles.property);
-    expect(await editorPage.getHexColorOfLocator(page.getByText('false'))).toEqual(darkThemeConstants.highlightStyles.booleanLiteral);
-    expect(await editorPage.getHexColorOfLocator(page.getByText('String'))).toEqual(darkThemeConstants.highlightStyles.stringLiteral);
-    expect(await editorPage.getHexColorOfLocator(page.getByText('comment'))).toEqual(darkThemeConstants.highlightStyles.comment);
-    expect(await editorPage.getHexColorOfLocator(page.getByText('1234', { exact: true }))).toEqual(darkThemeConstants.highlightStyles.numberLiteral);
+    labelReltype.every((kw) => expect(kw).toEqual(darkThemeConstants.highlightStyles.label.toLowerCase()));
+    expect(await editorPage.getHexColorOfLocator(page.getByText('parameter'))).toEqual(darkThemeConstants.highlightStyles.paramValue.toLowerCase());
+    expect(await editorPage.getHexColorOfLocator(page.getByText('property'))).toEqual(darkThemeConstants.highlightStyles.property.toLowerCase());
+    expect(await editorPage.getHexColorOfLocator(page.getByText('false'))).toEqual(darkThemeConstants.highlightStyles.booleanLiteral.toLowerCase());
+    expect(await editorPage.getHexColorOfLocator(page.getByText('String'))).toEqual(darkThemeConstants.highlightStyles.stringLiteral.toLowerCase());
+    expect(await editorPage.getHexColorOfLocator(page.getByText('comment'))).toEqual(darkThemeConstants.highlightStyles.comment.toLowerCase());
+    expect(await editorPage.getHexColorOfLocator(page.getByText('1234', { exact: true }))).toEqual(darkThemeConstants.highlightStyles.numberLiteral.toLowerCase());
     expect(await editorPage.editorBackgroundIsUnset()).toEqual(false);
@@ -55,5 +55,5 @@ });
     const component = await mount(_jsx(CypherEditor, { theme: "light", value: "RETURN" }));
-    expect(await editorPage.getHexColorOfLocator(page.getByText('RETURN', { exact: true }))).toEqual(lightThemeConstants.highlightStyles.keyword);
+    expect(await editorPage.getHexColorOfLocator(page.getByText('RETURN', { exact: true }))).toEqual(lightThemeConstants.highlightStyles.keyword.toLowerCase());
     await component.update(_jsx(CypherEditor, { theme: "dark", value: "RETURN" }));
-    expect(await editorPage.getHexColorOfLocator(page.getByText('RETURN', { exact: true }))).toEqual(darkThemeConstants.highlightStyles.keyword);
+    expect(await editorPage.getHexColorOfLocator(page.getByText('RETURN', { exact: true }))).toEqual(darkThemeConstants.highlightStyles.keyword.toLowerCase());
 });
@@ -71,3 +71,3 @@ test('respects prop to allow overriding bkg color', async ({ page, mount }) => {
     await mount(_jsx(CypherEditor, { theme: "light", value: query }));
-    expect(await editorPage.getHexColorOfLocator(page.getByText('multilinestring'))).toEqual(lightThemeConstants.highlightStyles.stringLiteral);
+    expect(await editorPage.getHexColorOfLocator(page.getByText('multilinestring'))).toEqual(lightThemeConstants.highlightStyles.stringLiteral.toLowerCase());
 });
@@ -82,3 +82,3 @@ test('highlights multiline label correctly', async ({ page, mount }) => {
     await mount(_jsx(CypherEditor, { theme: "light", value: query }));
-    expect(await editorPage.getHexColorOfLocator(page.getByText('Label'))).toEqual(lightThemeConstants.highlightStyles.label);
+    expect(await editorPage.getHexColorOfLocator(page.getByText('Label'))).toEqual(lightThemeConstants.highlightStyles.label.toLowerCase());
 });
@@ -93,4 +93,4 @@ test('highlights multiline comment correctly', async ({ page, mount }) => {
     await mount(_jsx(CypherEditor, { theme: "light", value: query }));
-    expect(await editorPage.getHexColorOfLocator(page.getByText('comment'))).toEqual(lightThemeConstants.highlightStyles.comment);
+    expect(await editorPage.getHexColorOfLocator(page.getByText('comment'))).toEqual(lightThemeConstants.highlightStyles.comment.toLowerCase());
 });
 //# sourceMappingURL=syntaxHighlighting.spec.js.map

dist/e2e_tests/syntaxValidation.spec.js

 import { jsx as _jsx } from "react/jsx-runtime";
+import { testData } from '@neo4j-cypher/language-support';
 import { expect, test } from '@playwright/experimental-ct-react';
@@ -46,2 +47,9 @@ import { CypherEditor } from '../CypherEditor';
 });
+test('Semantic errors work in firefox', async ({ browserName, page, mount, }) => {
+    test.skip(browserName !== 'firefox');
+    const editorPage = new CypherEditorPage(page);
+    const query = 'MATCH (n:OperationalPoint)--(m:OperationalPoint) RETURN s,m,n';
+    await mount(_jsx(CypherEditor, { value: query, schema: testData.mockSchema }));
+    await editorPage.checkErrorMessage('s,m,n', 'Variable `s` not defined');
+});
 test('Semantic errors are surfaced when there are no syntactic errors', async ({ page, mount, }) => {
@@ -80,2 +88,16 @@ const editorPage = new CypherEditorPage(page);
 });
+test('Strikethroughs are shown for deprecated functions', async ({ page, mount }) => {
+    const editorPage = new CypherEditorPage(page);
+    const query = `RETURN id()`;
+    await mount(_jsx(CypherEditor, { value: query, schema: testData.mockSchema }));
+    await expect(editorPage.page.locator('.cm-deprecated-element').last()).toBeVisible({ timeout: 3000 });
+    await editorPage.checkWarningMessage('id', "Function id is deprecated.");
+});
+test('Strikethroughs are shown for deprecated procedures', async ({ page, mount }) => {
+    const editorPage = new CypherEditorPage(page);
+    const query = `CALL apoc.create.uuids()`;
+    await mount(_jsx(CypherEditor, { value: query, schema: testData.mockSchema }));
+    await expect(editorPage.page.locator('.cm-deprecated-element').last()).toBeVisible({ timeout: 3000 });
+    await editorPage.checkWarningMessage('apoc.create.uuids', "Procedure apoc.create.uuids is deprecated.");
+});
 //# sourceMappingURL=syntaxValidation.spec.js.map

dist/lang-cypher/autocomplete.js

@@ -38,3 +38,3 @@ import { snippet, } from '@codemirror/autocomplete';
     if (completion.deprecated) {
-        return 'cm-deprecated-completion';
+        return 'cm-deprecated-element';
     }
@@ -58,59 +58,43 @@ else {
     }
-    const options = autocomplete(documentText, config.schema ?? {}, context.pos, context.explicit);
-    if (config.featureFlags?.signatureInfoOnAutoCompletions) {
-        return {
-            from: context.matchBefore(/(\w|\$)*$/).from,
-            options: options.map((o) => {
-                let maybeInfo = {};
-                let emptyInfo = true;
-                const newDiv = document.createElement('div');
-                if (o.signature) {
-                    const header = document.createElement('p');
-                    header.setAttribute('class', 'cm-completionInfo-signature');
-                    header.textContent = o.signature;
-                    if (header.textContent.length > 0) {
-                        emptyInfo = false;
-                        newDiv.appendChild(header);
-                    }
+    const options = autocomplete(
+    // TODO This is a temporary hack because completions are not working well
+    documentText.slice(0, context.pos), config.schema ?? {}, context.pos, context.explicit);
+    return {
+        from: context.matchBefore(/(\w|\$)*$/).from,
+        options: options.map((o) => {
+            let maybeInfo = {};
+            let emptyInfo = true;
+            const newDiv = document.createElement('div');
+            if (o.signature) {
+                const header = document.createElement('p');
+                header.setAttribute('class', 'cm-completionInfo-signature');
+                header.textContent = o.signature;
+                if (header.textContent.length > 0) {
+                    emptyInfo = false;
+                    newDiv.appendChild(header);
                 }
-                if (o.documentation) {
-                    const paragraph = document.createElement('p');
-                    paragraph.textContent = getDocString(o.documentation);
-                    if (paragraph.textContent.length > 0) {
-                        emptyInfo = false;
-                        newDiv.appendChild(paragraph);
-                    }
+            }
+            if (o.documentation) {
+                const paragraph = document.createElement('p');
+                paragraph.textContent = getDocString(o.documentation);
+                if (paragraph.textContent.length > 0) {
+                    emptyInfo = false;
+                    newDiv.appendChild(paragraph);
                 }
-                if (!emptyInfo) {
-                    maybeInfo = {
-                        info: () => Promise.resolve(newDiv),
-                    };
-                }
-                const deprecated = o.tags?.find((tag) => tag === CompletionItemTag.Deprecated) ??
-                    false;
-                // The negative boost moves the deprecation down the list
-                // so we offer the user the completions that are
-                // deprecated the last
-                const maybeDeprecated = deprecated
-                    ? { boost: -99, deprecated: true }
-                    : {};
-                return {
-                    label: o.label,
-                    type: completionKindToCodemirrorIcon(o.kind),
-                    apply: o.kind === CompletionItemKind.Snippet
-                        ? // codemirror requires an empty snippet space to be able to tab out of the completion
-                            snippet((o.insertText ?? o.label) + '${}')
-                        : undefined,
-                    detail: o.detail,
-                    ...maybeDeprecated,
-                    ...maybeInfo,
+            }
+            if (!emptyInfo) {
+                maybeInfo = {
+                    info: () => Promise.resolve(newDiv),
                 };
-            }),
-        };
-    }
-    else {
-        return {
-            from: context.matchBefore(/(\w|\$)*$/).from,
-            options: options.map((o) => ({
-                label: o.label,
+            }
+            const deprecated = o.tags?.find((tag) => tag === CompletionItemTag.Deprecated) ?? false;
+            // The negative boost moves the deprecation down the list
+            // so we offer the user the completions that are
+            // deprecated the last
+            const maybeDeprecated = deprecated
+                ? { boost: -99, deprecated: true }
+                : {};
+            return {
+                label: o.insertText ? o.insertText : o.label,
+                displayLabel: o.label,
                 type: completionKindToCodemirrorIcon(o.kind),
@@ -122,6 +106,8 @@ apply: o.kind === CompletionItemKind.Snippet
                 detail: o.detail,
-            })),
-        };
-    }
+                ...maybeDeprecated,
+                ...maybeInfo,
+            };
+        }),
+    };
 };
 //# sourceMappingURL=autocomplete.js.map

dist/lang-cypher/constants.d.ts

@@ -35,2 +35,4 @@ import type { Facet } from '@codemirror/state';
     number: NodeType;
+    setting: NodeType;
+    settingValue: NodeType;
 };
@@ -37,0 +39,0 @@ export type PrismSpecificTokenType = 'class-name' | 'identifier' | 'string' | 'relationship' | 'boolean' | 'number';

dist/lang-cypher/constants.js

@@ -40,2 +40,4 @@ import { languageDataProp } from '@codemirror/language';
     number: NodeType.define({ id: 28, name: 'numberLiteral' }),
+    setting: NodeType.define({ id: 29, name: 'setting' }),
+    settingValue: NodeType.define({ id: 30, name: 'settingValue' }),
 });
@@ -64,4 +66,6 @@ export const tokenTypeToStyleTag = {
     consoleCommand: tags.macroName,
+    setting: tags.attributeName,
+    settingValue: tags.attributeValue,
 };
 export const parserAdapterNodeSet = (nodes) => new NodeSet(Object.values(nodes)).extend(styleTags(tokenTypeToStyleTag));
 //# sourceMappingURL=constants.js.map

dist/lang-cypher/createCypherTheme.js

@@ -88,3 +88,3 @@ import { HighlightStyle, syntaxHighlighting, } from '@codemirror/language';
         },
-        '.cm-deprecated-completion': {
+        '.cm-deprecated-element': {
             'text-decoration': 'line-through',
@@ -91,0 +91,0 @@ },

dist/lang-cypher/langCypher.d.ts

@@ -7,3 +7,2 @@ import { LanguageSupport } from '@codemirror/language';
     featureFlags?: {
-        signatureInfoOnAutoCompletions?: boolean;
         consoleCommands?: boolean;
@@ -10,0 +9,0 @@ };

dist/lang-cypher/syntaxValidation.js

 import { linter } from '@codemirror/lint';
 import { parserWrapper, validateSyntax } from '@neo4j-cypher/language-support';
-import { DiagnosticSeverity } from 'vscode-languageserver-types';
+import { DiagnosticSeverity, DiagnosticTag } from 'vscode-languageserver-types';
 import workerpool from 'workerpool';
@@ -49,10 +49,17 @@ import WorkerURL from './lintWorker?worker&url';
         const result = await lastSemanticJob;
-        return result.map((diag) => {
+        const a = result.map((diagnostic) => {
             return {
-                from: diag.offsets.start,
-                to: diag.offsets.end,
-                severity: diag.severity === DiagnosticSeverity.Error ? 'error' : 'warning',
-                message: diag.message,
+                from: diagnostic.offsets.start,
+                to: diagnostic.offsets.end,
+                severity: diagnostic.severity === DiagnosticSeverity.Error
+                    ? 'error'
+                    : 'warning',
+                message: diagnostic.message,
+                ...(diagnostic.tags !== undefined &&
+                    diagnostic.tags.includes(DiagnosticTag.Deprecated)
+                    ? { markClass: 'cm-deprecated-element' }
+                    : {}),
             };
         });
+        return a;
     }
@@ -59,0 +66,0 @@ catch (err) {

dist/ndlTokensCopy.d.ts

 export declare const tokens: {
+    transitions: {
+        values: {
+            properties: {
+                default: string;
+            };
+            duration: {
+                quick: string;
+                slow: string;
+            };
+            'timing-function': {
+                default: string;
+            };
+        };
+        stripped: {
+            quick: string;
+            slow: string;
+        };
+        full: {
+            quick: string;
+            slow: string;
+        };
+    };
     borderRadius: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
         '1xl': string;
@@ -9,329 +36,472 @@ '2xl': string;
         full: string;
-        lg: string;
-        md: string;
-        none: string;
-        sm: string;
-        xl: string;
     };
-    boxShadow: {
-        l2: string;
-        l3: string;
-        l4: string;
-        l5: string;
-    };
     breakpoints: {
-        '2xl': string;
+        xs: string;
+        sm: string;
+        md: string;
         lg: string;
-        md: string;
-        sm: string;
         xl: string;
-        xs: string;
+        '2xl': string;
     };
+    palette: {
+        categorical: {
+            '1': string;
+            '2': string;
+            '3': string;
+            '4': string;
+            '5': string;
+            '6': string;
+            '7': string;
+            '8': string;
+            '9': string;
+            '10': string;
+            '11': string;
+            '12': string;
+        };
+        graph: {
+            '1': string;
+            '2': string;
+            '3': string;
+            '4': string;
+            '5': string;
+            '6': string;
+            '7': string;
+            '8': string;
+            '9': string;
+            '10': string;
+            '11': string;
+            '12': string;
+        };
+    };
     colors: {
-        blueberry: {
+        baltic: {
             '10': string;
+            '15': string;
             '20': string;
+            '25': string;
             '30': string;
+            '35': string;
             '40': string;
+            '45': string;
             '50': string;
+            '55': string;
             '60': string;
+            '65': string;
             '70': string;
+            '75': string;
+            '80': string;
         };
-        danger: {
+        hibiscus: {
             '10': string;
+            '15': string;
             '20': string;
+            '25': string;
             '30': string;
+            '35': string;
             '40': string;
+            '45': string;
             '50': string;
+            '55': string;
             '60': string;
+            '65': string;
             '70': string;
+            '75': string;
+            '80': string;
         };
-        mint: {
+        forest: {
             '10': string;
+            '15': string;
             '20': string;
+            '25': string;
             '30': string;
+            '35': string;
             '40': string;
+            '45': string;
             '50': string;
+            '55': string;
             '60': string;
+            '65': string;
             '70': string;
+            '75': string;
+            '80': string;
         };
-        neutral: {
+        lemon: {
             '10': string;
+            '15': string;
             '20': string;
+            '25': string;
             '30': string;
+            '35': string;
             '40': string;
+            '45': string;
             '50': string;
+            '55': string;
             '60': string;
+            '65': string;
             '70': string;
+            '75': string;
             '80': string;
-            '90': string;
         };
-        primary: {
+        lavender: {
             '10': string;
+            '15': string;
             '20': string;
+            '25': string;
             '30': string;
+            '35': string;
             '40': string;
+            '45': string;
             '50': string;
+            '55': string;
             '60': string;
+            '65': string;
             '70': string;
+            '75': string;
+            '80': string;
         };
-        success: {
+        marigold: {
             '10': string;
+            '15': string;
             '20': string;
+            '25': string;
             '30': string;
+            '35': string;
             '40': string;
+            '45': string;
             '50': string;
+            '55': string;
             '60': string;
+            '65': string;
             '70': string;
+            '75': string;
+            '80': string;
         };
-        warning: {
+        earth: {
             '10': string;
+            '15': string;
             '20': string;
+            '25': string;
             '30': string;
+            '35': string;
             '40': string;
+            '45': string;
             '50': string;
+            '55': string;
             '60': string;
+            '65': string;
             '70': string;
+            '75': string;
+            '80': string;
         };
-    };
-    font: {
-        size: {
-            'body-large': string;
-            'body-medium': string;
-            'body-small': string;
-            code: string;
-            h1: string;
-            h2: string;
-            h3: string;
-            h4: string;
-            h5: string;
-            h6: string;
-            label: string;
-            'subheading-large': string;
-            'subheading-medium': string;
-            'subheading-small': string;
+        neutral: {
+            '10': string;
+            '15': string;
+            '20': string;
+            '25': string;
+            '30': string;
+            '35': string;
+            '40': string;
+            '45': string;
+            '50': string;
+            '55': string;
+            '60': string;
+            '65': string;
+            '70': string;
+            '75': string;
+            '80': string;
         };
-        weight: {
-            bold: string;
-            light: string;
-            medium: string;
-            normal: string;
-            semibold: string;
+        beige: {
+            '10': string;
+            '20': string;
+            '30': string;
+            '40': string;
+            '50': string;
+            '60': string;
+            '70': string;
         };
+        highlights: {
+            yellow: string;
+            periwinkle: string;
+        };
     };
-    palette: {
-        categorical: {
-            '1': string;
-            '10': string;
-            '11': string;
-            '12': string;
-            '2': string;
-            '3': string;
-            '4': string;
-            '5': string;
-            '6': string;
-            '7': string;
-            '8': string;
-            '9': string;
-        };
+    theme: {
         dark: {
-            danger: {
-                bg: {
-                    strong: string;
-                    weak: string;
-                };
-                border: {
-                    strong: string;
-                    weak: string;
-                };
-                hover: {
-                    strong: string;
-                    weak: string;
-                };
-                icon: string;
-                pressed: {
-                    strong: string;
-                    weak: string;
-                };
-                text: string;
+            boxShadow: {
+                raised: string;
+                overlay: string;
             };
-            neutral: {
-                bg: {
-                    default: string;
-                    strong: string;
-                    strongest: string;
-                    weak: string;
+            palette: {
+                neutral: {
+                    text: {
+                        weakest: string;
+                        weaker: string;
+                        weak: string;
+                        default: string;
+                        inverse: string;
+                    };
+                    icon: string;
+                    bg: {
+                        weak: string;
+                        default: string;
+                        strong: string;
+                        stronger: string;
+                        strongest: string;
+                        status: string;
+                        'on-bg-weak': string;
+                    };
+                    border: {
+                        weak: string;
+                        strong: string;
+                        strongest: string;
+                    };
+                    hover: string;
+                    pressed: string;
                 };
-                border: {
-                    strong: string;
-                    weak: string;
+                primary: {
+                    text: string;
+                    icon: string;
+                    bg: {
+                        weak: string;
+                        strong: string;
+                        status: string;
+                        selected: string;
+                    };
+                    border: {
+                        strong: string;
+                        weak: string;
+                    };
+                    focus: string;
+                    hover: {
+                        weak: string;
+                        strong: string;
+                    };
+                    pressed: {
+                        weak: string;
+                        strong: string;
+                    };
                 };
-                hover: string;
-                icon: string;
-                pressed: string;
-                text: {
-                    default: string;
-                    inverse: string;
-                    weak: string;
-                    weaker: string;
-                    weakest: string;
+                danger: {
+                    text: string;
+                    icon: string;
+                    bg: {
+                        strong: string;
+                        weak: string;
+                        status: string;
+                    };
+                    border: {
+                        strong: string;
+                        weak: string;
+                    };
+                    hover: {
+                        weak: string;
+                        strong: string;
+                    };
+                    pressed: {
+                        weak: string;
+                        strong: string;
+                    };
                 };
-            };
-            primary: {
-                bg: {
-                    strong: string;
-                    weak: string;
+                warning: {
+                    text: string;
+                    icon: string;
+                    bg: {
+                        strong: string;
+                        weak: string;
+                        status: string;
+                    };
+                    border: {
+                        strong: string;
+                        weak: string;
+                    };
                 };
-                border: {
-                    strong: string;
-                    weak: string;
+                success: {
+                    text: string;
+                    icon: string;
+                    bg: {
+                        strong: string;
+                        weak: string;
+                        status: string;
+                    };
+                    border: {
+                        strong: string;
+                        weak: string;
+                    };
                 };
-                focus: string;
-                hover: {
-                    strong: string;
-                    weak: string;
+                discovery: {
+                    text: string;
+                    icon: string;
+                    bg: {
+                        strong: string;
+                        weak: string;
+                        status: string;
+                    };
+                    border: {
+                        strong: string;
+                        weak: string;
+                    };
                 };
-                icon: string;
-                pressed: {
-                    strong: string;
-                    weak: string;
-                };
-                text: string;
             };
-            success: {
-                bg: {
-                    strong: string;
-                    weak: string;
-                };
-                border: {
-                    strong: string;
-                    weak: string;
-                };
-                icon: string;
-                text: string;
-            };
-            warning: {
-                bg: {
-                    strong: string;
-                    weak: string;
-                };
-                border: {
-                    strong: string;
-                    weak: string;
-                };
-                icon: string;
-                text: string;
-            };
         };
-        graph: {
-            '1': string;
-            '10': string;
-            '11': string;
-            '12': string;
-            '2': string;
-            '3': string;
-            '4': string;
-            '5': string;
-            '6': string;
-            '7': string;
-            '8': string;
-            '9': string;
-        };
         light: {
-            danger: {
-                bg: {
-                    strong: string;
-                    weak: string;
-                };
-                border: {
-                    strong: string;
-                    weak: string;
-                };
-                hover: {
-                    strong: string;
-                    weak: string;
-                };
-                icon: string;
-                pressed: {
-                    strong: string;
-                    weak: string;
-                };
-                text: string;
+            boxShadow: {
+                raised: string;
+                overlay: string;
             };
-            neutral: {
-                bg: {
-                    default: string;
-                    strong: string;
-                    strongest: string;
-                    weak: string;
+            palette: {
+                neutral: {
+                    text: {
+                        weakest: string;
+                        weaker: string;
+                        weak: string;
+                        default: string;
+                        inverse: string;
+                    };
+                    icon: string;
+                    bg: {
+                        weak: string;
+                        default: string;
+                        'on-bg-weak': string;
+                        strong: string;
+                        stronger: string;
+                        strongest: string;
+                        status: string;
+                    };
+                    border: {
+                        weak: string;
+                        strong: string;
+                        strongest: string;
+                    };
+                    hover: string;
+                    pressed: string;
                 };
-                border: {
-                    strong: string;
-                    weak: string;
+                primary: {
+                    text: string;
+                    icon: string;
+                    bg: {
+                        weak: string;
+                        strong: string;
+                        status: string;
+                        selected: string;
+                    };
+                    border: {
+                        strong: string;
+                        weak: string;
+                    };
+                    focus: string;
+                    hover: {
+                        weak: string;
+                        strong: string;
+                    };
+                    pressed: {
+                        weak: string;
+                        strong: string;
+                    };
                 };
-                hover: string;
-                icon: string;
-                pressed: string;
-                text: {
-                    default: string;
-                    inverse: string;
-                    weak: string;
-                    weaker: string;
-                    weakest: string;
+                danger: {
+                    text: string;
+                    icon: string;
+                    bg: {
+                        strong: string;
+                        weak: string;
+                        status: string;
+                    };
+                    border: {
+                        strong: string;
+                        weak: string;
+                    };
+                    hover: {
+                        weak: string;
+                        strong: string;
+                    };
+                    pressed: {
+                        weak: string;
+                        strong: string;
+                    };
                 };
-            };
-            primary: {
-                bg: {
-                    strong: string;
-                    weak: string;
+                warning: {
+                    text: string;
+                    icon: string;
+                    bg: {
+                        strong: string;
+                        weak: string;
+                        status: string;
+                    };
+                    border: {
+                        strong: string;
+                        weak: string;
+                    };
                 };
-                border: {
-                    strong: string;
-                    weak: string;
+                success: {
+                    text: string;
+                    icon: string;
+                    bg: {
+                        strong: string;
+                        weak: string;
+                        status: string;
+                    };
+                    border: {
+                        strong: string;
+                        weak: string;
+                    };
                 };
-                focus: string;
-                hover: {
-                    strong: string;
-                    weak: string;
+                discovery: {
+                    text: string;
+                    icon: string;
+                    bg: {
+                        strong: string;
+                        weak: string;
+                        status: string;
+                    };
+                    border: {
+                        strong: string;
+                        weak: string;
+                    };
                 };
-                icon: string;
-                pressed: {
-                    strong: string;
-                    weak: string;
-                };
-                text: string;
             };
-            success: {
-                bg: {
-                    strong: string;
-                    weak: string;
-                };
-                border: {
-                    strong: string;
-                    weak: string;
-                };
-                icon: string;
-                text: string;
-            };
-            warning: {
-                bg: {
-                    strong: string;
-                    weak: string;
-                };
-                border: {
-                    strong: string;
-                    weak: string;
-                };
-                icon: string;
-                text: string;
-            };
         };
     };
+    font: {
+        size: {
+            h1: string;
+            h2: string;
+            h3: string;
+            h4: string;
+            h5: string;
+            h6: string;
+            'subheading-large': string;
+            'subheading-medium': string;
+            'subheading-small': string;
+            'body-large': string;
+            'body-medium': string;
+            'body-small': string;
+            code: string;
+            label: string;
+        };
+        weight: {
+            bold: string;
+            semibold: string;
+            normal: string;
+            medium: string;
+            light: string;
+        };
+        'font-family': {
+            h1: string;
+            h2: string;
+            h3: string;
+            h4: string;
+            h5: string;
+            h6: string;
+            'subheading-large': string;
+            'subheading-medium': string;
+            'subheading-small': string;
+            'body-large': string;
+            'body-medium': string;
+            'body-small': string;
+            code: string;
+            label: string;
+        };
+    };
     space: {
         '0': string;
         '1': string;
-        '10': string;
-        '11': string;
-        '12': string;
-        '13': string;
         '2': string;
@@ -345,18 +515,7 @@ '3': string;
         '9': string;
+        '10': string;
+        '11': string;
+        '12': string;
+        '13': string;
     };
-    transitions: {
-        default: string;
-        stripped: string;
-        values: {
-            duration: {
-                default: string;
-            };
-            properties: {
-                default: string;
-            };
-            'timing-function': {
-                default: string;
-            };
-        };
-    };
     zIndex: {
@@ -370,13 +529,13 @@ '0': number;
         '60': number;
+        deep: number;
+        auto: string;
         alias: {
+            overlay: number;
             banner: number;
             blanket: number;
-            modal: number;
-            overlay: number;
             popover: number;
             tooltip: number;
+            modal: number;
         };
-        auto: string;
-        deep: number;
     };
 };

dist/ndlTokensCopy.js

 export const tokens = {
+    transitions: {
+        values: {
+            properties: {
+                default: 'all',
+            },
+            duration: {
+                quick: '100ms',
+                slow: '250ms',
+            },
+            'timing-function': {
+                default: 'cubic-bezier(0.420, 0.000, 0.580, 1.000)',
+            },
+        },
+        stripped: {
+            quick: '100ms cubic-bezier(0.420, 0.000, 0.580, 1.000)',
+            slow: '250ms cubic-bezier(0.420, 0.000, 0.580, 1.000)',
+        },
+        full: {
+            quick: 'all 100ms cubic-bezier(0.420, 0.000, 0.580, 1.000)',
+            slow: 'all 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000)',
+        },
+    },
     borderRadius: {
+        none: '0px',
+        sm: '4px',
+        md: '6px',
+        lg: '8px',
+        xl: '10px',
         '1xl': '12px',
@@ -9,120 +36,14 @@ '2xl': '14px',
         full: '9999px',
-        lg: '8px',
-        md: '6px',
-        none: '0px',
-        sm: '4px',
-        xl: '10px',
     },
-    boxShadow: {
-        l2: '0px 1px 2px 0px rgba(12, 26, 37, 0.18)',
-        l3: '0px 4px 8px 0px rgba(12, 26, 37, 0.04)',
-        l4: '0px 4px 8px 0px rgba(12, 26, 37, 0.08)',
-        l5: '0px 8px 20px 0px rgba(12, 26, 37, 0.12)',
-    },
     breakpoints: {
-        '2xl': '1536px',
+        xs: '450px',
+        sm: '640px',
+        md: '768px',
         lg: '1024px',
-        md: '768px',
-        sm: '640px',
         xl: '1280px',
-        xs: '450px',
+        '2xl': '1536px',
     },
-    colors: {
-        blueberry: {
-            '10': '#E8EBF6',
-            '20': '#C4CCE9',
-            '30': '#9DABD9',
-            '40': '#768ACA',
-            '50': '#3557B4',
-            '60': '#25459E',
-            '70': '#0B297D',
-        },
-        danger: {
-            '10': '#ffe6e9',
-            '20': '#ffb8c4',
-            '30': '#ff668a',
-            '40': '#ed1252',
-            '50': '#cc254b',
-            '60': '#a1003b',
-            '70': '#7a0031',
-        },
-        mint: {
-            '10': '#F0FFFA',
-            '20': '#D1FFF4',
-            '30': '#A8FFEE',
-            '40': '#55F9E2',
-            '50': '#3DD4C5',
-            '60': '#2AADA5',
-            '70': '#116161',
-        },
-        neutral: {
-            '10': '#FFFFFF',
-            '20': '#F5F7FA',
-            '30': '#EEF1F6',
-            '40': '#E6E9EE',
-            '50': '#C4C8CD',
-            '60': '#B2B7BD',
-            '70': '#717780',
-            '80': '#535B66',
-            '90': '#151E29',
-        },
-        primary: {
-            '10': '#e6f8ff',
-            '20': '#a3e2ff',
-            '30': '#7ad1ff',
-            '40': '#018bff',
-            '50': '#006FD6',
-            '60': '#0056b3',
-            '70': '#004092',
-        },
-        success: {
-            '10': '#E1FAEF',
-            '20': '#98EDCB',
-            '30': '#44D4A4',
-            '40': '#00BA88',
-            '50': '#327D60',
-            '60': '#006E58',
-            '70': '#00473B',
-        },
-        warning: {
-            '10': '#FFFBDE',
-            '20': '#FFF4B5',
-            '30': '#FFEA8C',
-            '40': '#FFDE63',
-            '50': '#D9B54A',
-            '60': '#966c2e',
-            '70': '#664817',
-        },
-    },
-    font: {
-        size: {
-            'body-large': '1rem',
-            'body-medium': '0.875rem',
-            'body-small': '0.75rem',
-            code: '0.875rem',
-            h1: '3rem',
-            h2: '2.5rem',
-            h3: '1.875rem',
-            h4: '1.5rem',
-            h5: '1.25rem',
-            h6: '1rem',
-            label: '0.875rem',
-            'subheading-large': '1.25rem',
-            'subheading-medium': '1rem',
-            'subheading-small': '0.875rem',
-        },
-        weight: {
-            bold: '700',
-            light: '300',
-            medium: '500',
-            normal: '400',
-            semibold: '600',
-        },
-    },
     palette: {
         categorical: {
             '1': '#55BDC5',
-            '10': '#BF732D',
-            '11': '#478A6E',
-            '12': '#ADE86B',
             '2': '#4D49CB',
@@ -136,97 +57,8 @@ '3': '#DC8B39',
             '9': '#DBBF40',
+            '10': '#BF732D',
+            '11': '#478A6E',
+            '12': '#ADE86B',
         },
-        dark: {
-            danger: {
-                bg: {
-                    strong: '#ffb8c4',
-                    weak: '68, 61, 72',
-                },
-                border: {
-                    strong: '#ffb8c4',
-                    weak: '114, 91, 103',
-                },
-                hover: {
-                    strong: '#ff668a',
-                    weak: 'rgba(255, 102, 138,0.08)',
-                },
-                icon: '#ffb8c4',
-                pressed: {
-                    strong: '#ff668a',
-                    weak: 'rgba(255, 102, 138,0.12)',
-                },
-                text: '#ffb8c4',
-            },
-            neutral: {
-                bg: {
-                    default: '#151E29',
-                    strong: '45, 53, 63',
-                    strongest: '#FFFFFF',
-                    weak: '29, 38, 49',
-                },
-                border: {
-                    strong: '#717780',
-                    weak: '37, 47, 59',
-                },
-                hover: 'rgba(196, 200, 205,0.1)',
-                icon: '#C4C8CD',
-                pressed: 'rgba(196, 200, 205,0.2)',
-                text: {
-                    default: '#F5F7FA',
-                    inverse: '#151E29',
-                    weak: '#C4C8CD',
-                    weaker: '#B2B7BD',
-                    weakest: '#717780',
-                },
-            },
-            primary: {
-                bg: {
-                    strong: '#a3e2ff',
-                    weak: '49, 69, 84',
-                },
-                border: {
-                    strong: '#a3e2ff',
-                    weak: '78, 108, 126',
-                },
-                focus: '#7ad1ff',
-                hover: {
-                    strong: '#7ad1ff',
-                    weak: 'rgba(122, 209, 255,0.08)',
-                },
-                icon: '#a3e2ff',
-                pressed: {
-                    strong: '#7ad1ff',
-                    weak: 'rgba(122, 209, 255,0.12)',
-                },
-                text: '#a3e2ff',
-            },
-            success: {
-                bg: {
-                    strong: '#98EDCB',
-                    weak: '47, 71, 73',
-                },
-                border: {
-                    strong: '#98EDCB',
-                    weak: '73, 113, 106',
-                },
-                icon: '#98EDCB',
-                text: '#98EDCB',
-            },
-            warning: {
-                bg: {
-                    strong: '#FFEA8C',
-                    weak: '68, 71, 60',
-                },
-                border: {
-                    strong: '#FFEA8C',
-                    weak: '114, 111, 80',
-                },
-                icon: '#FFEA8C',
-                text: '#FFEA8C',
-            },
-        },
         graph: {
             '1': '#FFDF81',
-            '10': '#FFC354',
-            '11': '#DA7294',
-            '12': '#579380',
             '2': '#C990C0',
@@ -240,100 +72,438 @@ '3': '#F79767',
             '9': '#4D8DDA',
+            '10': '#FFC354',
+            '11': '#DA7294',
+            '12': '#579380',
         },
-        light: {
-            danger: {
-                bg: {
-                    strong: '#cc254b',
-                    weak: '#ffe6e9',
+    },
+    colors: {
+        baltic: {
+            '10': '#E7FAFB',
+            '15': '#C3F8FB',
+            '20': '#8FE3E8',
+            '25': '#5CC3C9',
+            '30': '#5DB3BF',
+            '35': '#51A6B1',
+            '40': '#4C99A4',
+            '45': '#30839D',
+            '50': '#0A6190',
+            '55': '#02507B',
+            '60': '#014063',
+            '65': '#262F31',
+            '70': '#081E2B',
+            '75': '#041823',
+            '80': '#01121C',
+        },
+        hibiscus: {
+            '10': '#FFE9E7',
+            '15': '#FFD7D2',
+            '20': '#FFAA97',
+            '25': '#FF8E6A',
+            '30': '#F96746',
+            '35': '#E84E2C',
+            '40': '#D43300',
+            '45': '#BB2D00',
+            '50': '#961200',
+            '55': '#730E00',
+            '60': '#432520',
+            '65': '#4E0900',
+            '70': '#3F0800',
+            '75': '#360700',
+            '80': '#280500',
+        },
+        forest: {
+            '10': '#E7FCD7',
+            '15': '#BCF194',
+            '20': '#90CB62',
+            '25': '#80BB53',
+            '30': '#6FA646',
+            '35': '#5B992B',
+            '40': '#4D8622',
+            '45': '#3F7824',
+            '50': '#296127',
+            '55': '#145439',
+            '60': '#0C4D31',
+            '65': '#0A4324',
+            '70': '#262D24',
+            '75': '#052618',
+            '80': '#021D11',
+        },
+        lemon: {
+            '10': '#FFFAD1',
+            '15': '#FFF8BD',
+            '20': '#FFF178',
+            '25': '#FFE500',
+            '30': '#FFD600',
+            '35': '#F4C318',
+            '40': '#D7AA0A',
+            '45': '#B48409',
+            '50': '#996E00',
+            '55': '#765500',
+            '60': '#614600',
+            '65': '#4D3700',
+            '70': '#312E1A',
+            '75': '#2E2100',
+            '80': '#251B00',
+        },
+        lavender: {
+            '10': '#F7F3FF',
+            '15': '#E9DEFF',
+            '20': '#CCB4FF',
+            '25': '#B38EFF',
+            '30': '#A07BEC',
+            '35': '#8C68D9',
+            '40': '#754EC8',
+            '45': '#5A34AA',
+            '50': '#4B2894',
+            '55': '#3B1982',
+            '60': '#2C2A34',
+            '65': '#220954',
+            '70': '#170146',
+            '75': '#0E002D',
+            '80': '#09001C',
+        },
+        marigold: {
+            '10': '#FFF0D2',
+            '15': '#FFDE9D',
+            '20': '#FFCF72',
+            '25': '#FFC450',
+            '30': '#FFB422',
+            '35': '#FFA901',
+            '40': '#EC9C00',
+            '45': '#DA9105',
+            '50': '#BA7A00',
+            '55': '#986400',
+            '60': '#795000',
+            '65': '#624100',
+            '70': '#543800',
+            '75': '#422C00',
+            '80': '#251900',
+        },
+        earth: {
+            '10': '#FFF7F0',
+            '15': '#FDEDDA',
+            '20': '#FFE1C5',
+            '25': '#F8D1AE',
+            '30': '#ECBF96',
+            '35': '#E0AE7F',
+            '40': '#D19660',
+            '45': '#AF7C4D',
+            '50': '#8D5D31',
+            '55': '#763F18',
+            '60': '#66310B',
+            '65': '#5B2B09',
+            '70': '#481F01',
+            '75': '#361700',
+            '80': '#220E00',
+        },
+        neutral: {
+            '10': '#FFFFFF',
+            '15': '#F5F6F6',
+            '20': '#E2E3E5',
+            '25': '#CFD1D4',
+            '30': '#BBBEC3',
+            '35': '#A8ACB2',
+            '40': '#959AA1',
+            '45': '#818790',
+            '50': '#6F757E',
+            '55': '#5E636A',
+            '60': '#4D5157',
+            '65': '#3C3F44',
+            '70': '#212325',
+            '75': '#1A1B1D',
+            '80': '#09090A',
+        },
+        beige: {
+            '10': '#FFFCF4',
+            '20': '#FFF7E3',
+            '30': '#F2EAD4',
+            '40': '#C1B9A0',
+            '50': '#999384',
+            '60': '#666050',
+            '70': '#3F3824',
+        },
+        highlights: {
+            yellow: '#FAFF00',
+            periwinkle: '#6A82FF',
+        },
+    },
+    theme: {
+        dark: {
+            boxShadow: {
+                raised: '0px 1px 2px 0px rgba(9, 9, 10, 0.50)',
+                overlay: '0px 8px 20px 0px rgba(9, 9, 10, 0.50)',
+            },
+            palette: {
+                neutral: {
+                    text: {
+                        weakest: '#818790',
+                        weaker: '#A8ACB2',
+                        weak: '#CFD1D4',
+                        default: '#F5F6F6',
+                        inverse: '#1A1B1D',
+                    },
+                    icon: '#CFD1D4',
+                    bg: {
+                        weak: '#212325',
+                        default: '#1A1B1D',
+                        strong: '#3C3F44',
+                        stronger: '#6F757E',
+                        strongest: '#F5F6F6',
+                        status: '#A8ACB2',
+                        'on-bg-weak': '#818790',
+                    },
+                    border: {
+                        weak: '#3C3F44',
+                        strong: '#6F757E',
+                        strongest: '#BBBEC3',
+                    },
+                    hover: '#959AA1',
+                    pressed: '#959AA1',
                 },
-                border: {
-                    strong: '#cc254b',
-                    weak: '#ffb8c4',
+                primary: {
+                    text: '#8FE3E8',
+                    icon: '#8FE3E8',
+                    bg: {
+                        weak: '#262F31',
+                        strong: '#8FE3E8',
+                        status: '#8FE3E8',
+                        selected: '#262F31',
+                    },
+                    border: {
+                        strong: '#8FE3E8',
+                        weak: '#02507B',
+                    },
+                    focus: '#5DB3BF',
+                    hover: {
+                        weak: '#8FE3E8',
+                        strong: '#5DB3BF',
+                    },
+                    pressed: {
+                        weak: '#8FE3E8',
+                        strong: '#4C99A4',
+                    },
                 },
-                hover: {
-                    strong: '#a1003b',
-                    weak: 'rgba(237,18,82,0.08)',
+                danger: {
+                    text: '#FFAA97',
+                    icon: '#FFAA97',
+                    bg: {
+                        strong: '#FFAA97',
+                        weak: '#432520',
+                        status: '#FFAA97',
+                    },
+                    border: {
+                        strong: '#FFAA97',
+                        weak: '#730E00',
+                    },
+                    hover: {
+                        weak: '#FFAA97',
+                        strong: '#F96746',
+                    },
+                    pressed: {
+                        weak: '#FFAA97',
+                        strong: '#E84E2C',
+                    },
                 },
-                icon: '#cc254b',
-                pressed: {
-                    strong: '#7a0031',
-                    weak: 'rgba(237,18,82,0.12)',
+                warning: {
+                    text: '#FFD600',
+                    icon: '#FFD600',
+                    bg: {
+                        strong: '#FFD600',
+                        weak: '#312E1A',
+                        status: '#FFD600',
+                    },
+                    border: {
+                        strong: '#FFD600',
+                        weak: '#765500',
+                    },
                 },
-                text: '#cc254b',
-            },
-            neutral: {
-                bg: {
-                    default: '#F5F7FA',
-                    strong: '#E6E9EE',
-                    strongest: '#535B66',
-                    weak: '#FFFFFF',
+                success: {
+                    text: '#90CB62',
+                    icon: '#90CB62',
+                    bg: {
+                        strong: '#90CB62',
+                        weak: '#262D24',
+                        status: '#90CB62',
+                    },
+                    border: {
+                        strong: '#90CB62',
+                        weak: '#296127',
+                    },
                 },
-                border: {
-                    strong: '#C4C8CD',
-                    weak: '#EEF1F6',
+                discovery: {
+                    text: '#CCB4FF',
+                    icon: '#CCB4FF',
+                    bg: {
+                        strong: '#CCB4FF',
+                        weak: '#2C2A34',
+                        status: '#CCB4FF',
+                    },
+                    border: {
+                        strong: '#CCB4FF',
+                        weak: '#4B2894',
+                    },
                 },
-                hover: 'rgba(113,119,128,0.1)',
-                icon: '#535B66',
-                pressed: 'rgba(113,119,128,0.2)',
-                text: {
-                    default: '#151E29',
-                    inverse: '#FFFFFF',
-                    weak: '#535B66',
-                    weaker: '#717780',
-                    weakest: '#B2B7BD',
-                },
             },
-            primary: {
-                bg: {
-                    strong: '#006FD6',
-                    weak: '#e6f8ff',
+        },
+        light: {
+            boxShadow: {
+                raised: '0px 1px 2px 0px rgba(26, 27, 29, 0.18)',
+                overlay: '0px 4px 8px 0px rgba(26, 27, 29, 0.12)',
+            },
+            palette: {
+                neutral: {
+                    text: {
+                        weakest: '#A8ACB2',
+                        weaker: '#5E636A',
+                        weak: '#4D5157',
+                        default: '#1A1B1D',
+                        inverse: '#FFFFFF',
+                    },
+                    icon: '#4D5157',
+                    bg: {
+                        weak: '#FFFFFF',
+                        default: '#F5F6F6',
+                        'on-bg-weak': '#F5F6F6',
+                        strong: '#E2E3E5',
+                        stronger: '#A8ACB2',
+                        strongest: '#3C3F44',
+                        status: '#A8ACB2',
+                    },
+                    border: {
+                        weak: '#E2E3E5',
+                        strong: '#BBBEC3',
+                        strongest: '#6F757E',
+                    },
+                    hover: '#6F757E',
+                    pressed: '#6F757E',
                 },
-                border: {
-                    strong: '#006FD6',
-                    weak: '#7ad1ff',
+                primary: {
+                    text: '#0A6190',
+                    icon: '#0A6190',
+                    bg: {
+                        weak: '#E7FAFB',
+                        strong: '#0A6190',
+                        status: '#4C99A4',
+                        selected: '#E7FAFB',
+                    },
+                    border: {
+                        strong: '#0A6190',
+                        weak: '#8FE3E8',
+                    },
+                    focus: '#30839D',
+                    hover: {
+                        weak: '#30839D',
+                        strong: '#02507B',
+                    },
+                    pressed: {
+                        weak: '#30839D',
+                        strong: '#014063',
+                    },
                 },
-                focus: '#018bff',
-                hover: {
-                    strong: '#0056b3',
-                    weak: 'rgba(1,139,255,0.08)',
+                danger: {
+                    text: '#BB2D00',
+                    icon: '#BB2D00',
+                    bg: {
+                        strong: '#BB2D00',
+                        weak: '#FFE9E7',
+                        status: '#E84E2C',
+                    },
+                    border: {
+                        strong: '#BB2D00',
+                        weak: '#FFAA97',
+                    },
+                    hover: {
+                        weak: '#D43300',
+                        strong: '#961200',
+                    },
+                    pressed: {
+                        weak: '#D43300',
+                        strong: '#730E00',
+                    },
                 },
-                icon: '#006FD6',
-                pressed: {
-                    strong: '#004092',
-                    weak: 'rgba(1,139,255,0.12)',
+                warning: {
+                    text: '#765500',
+                    icon: '#765500',
+                    bg: {
+                        strong: '#765500',
+                        weak: '#FFFAD1',
+                        status: '#D7AA0A',
+                    },
+                    border: {
+                        strong: '#996E00',
+                        weak: '#FFD600',
+                    },
                 },
-                text: '#006FD6',
-            },
-            success: {
-                bg: {
-                    strong: '#327D60',
-                    weak: '#E1FAEF',
+                success: {
+                    text: '#3F7824',
+                    icon: '#3F7824',
+                    bg: {
+                        strong: '#3F7824',
+                        weak: '#E7FCD7',
+                        status: '#5B992B',
+                    },
+                    border: {
+                        strong: '#3F7824',
+                        weak: '#90CB62',
+                    },
                 },
-                border: {
-                    strong: '#327D60',
-                    weak: '#98EDCB',
+                discovery: {
+                    text: '#5A34AA',
+                    icon: '#5A34AA',
+                    bg: {
+                        strong: '#5A34AA',
+                        weak: '#E9DEFF',
+                        status: '#754EC8',
+                    },
+                    border: {
+                        strong: '#5A34AA',
+                        weak: '#B38EFF',
+                    },
                 },
-                icon: '#327D60',
-                text: '#327D60',
             },
-            warning: {
-                bg: {
-                    strong: '#966c2e',
-                    weak: '#FFFBDE',
-                },
-                border: {
-                    strong: '#966c2e',
-                    weak: '#FFEA8C',
-                },
-                icon: '#966c2e',
-                text: '#966c2e',
-            },
         },
     },
+    font: {
+        size: {
+            h1: '3rem',
+            h2: '2.5rem',
+            h3: '1.875rem',
+            h4: '1.5rem',
+            h5: '1.25rem',
+            h6: '1rem',
+            'subheading-large': '1.25rem',
+            'subheading-medium': '1rem',
+            'subheading-small': '0.875rem',
+            'body-large': '1rem',
+            'body-medium': '0.875rem',
+            'body-small': '0.75rem',
+            code: '0.875rem',
+            label: '0.875rem',
+        },
+        weight: {
+            bold: '700',
+            semibold: '600',
+            normal: '400',
+            medium: '500',
+            light: '300',
+        },
+        'font-family': {
+            h1: 'Syne Neo',
+            h2: 'Syne Neo',
+            h3: 'Public Sans',
+            h4: 'Public Sans',
+            h5: 'Public Sans',
+            h6: 'Public Sans',
+            'subheading-large': 'Public Sans',
+            'subheading-medium': 'Public Sans',
+            'subheading-small': 'Public Sans',
+            'body-large': 'Public Sans',
+            'body-medium': 'Public Sans',
+            'body-small': 'Public Sans',
+            code: 'Fira Code',
+            label: 'Public Sans',
+        },
+    },
     space: {
         '0': '0px',
         '1': '1px',
-        '10': '64px',
-        '11': '96px',
-        '12': '128px',
-        '13': '320px',
         '2': '2px',
@@ -347,18 +517,7 @@ '3': '4px',
         '9': '48px',
+        '10': '64px',
+        '11': '96px',
+        '12': '128px',
+        '13': '320px',
     },
-    transitions: {
-        default: 'all 100ms cubic-bezier(0.420, 0.000, 0.580, 1.000)',
-        stripped: '100ms cubic-bezier(0.420, 0.000, 0.580, 1.000)',
-        values: {
-            duration: {
-                default: '100ms',
-            },
-            properties: {
-                default: 'all',
-            },
-            'timing-function': {
-                default: 'cubic-bezier(0.420, 0.000, 0.580, 1.000)',
-            },
-        },
-    },
     zIndex: {
@@ -372,14 +531,14 @@ '0': 0,
         '60': 60,
+        deep: -999999,
+        auto: 'auto',
         alias: {
+            overlay: 10,
             banner: 20,
             blanket: 30,
-            modal: 60,
-            overlay: 10,
             popover: 40,
             tooltip: 50,
+            modal: 60,
         },
-        auto: 'auto',
-        deep: -999999,
     },
 };
 //# sourceMappingURL=ndlTokensCopy.js.map

dist/themes.js

@@ -1,26 +0,12 @@
-import { light, mirage } from 'ayu';
+import { mirage } from 'ayu';
 import { createCypherTheme, } from './lang-cypher/createCypherTheme';
 import { tokens } from './ndlTokensCopy';
-/* ndl exports most tokens as hex colors but some tokens are exported as rgb colors, in the form of "10, 20, 30"
-   This should be fixed in version 2 of ndl.
-   Meanwhile we can use this function */
-const convertToHex = (color) => {
-    if (color.startsWith('#')) {
-        return color;
-    }
-    const rgb = color.match(/\d+/g);
-    if (!rgb) {
-        return color;
-    }
-    const [r, g, b] = rgb;
-    return `#${Number(r).toString(16)}${Number(g).toString(16)}${Number(b).toString(16)}`;
-};
 export const lightThemeConstants = {
     dark: false,
     editorSettings: {
-        background: light.editor.bg.hex(),
-        foreground: light.editor.fg.hex(),
-        gutterForeground: light.editor.gutter.normal.hex(),
-        selection: light.editor.selection.active.hex(),
-        textMatchingSelection: light.editor.findMatch.active.hex(),
+        background: '#FEFEFE',
+        foreground: '#545454',
+        gutterForeground: '#a3a7ae',
+        selection: tokens.colors.neutral['20'],
+        textMatchingSelection: tokens.colors.lavender['15'],
         cursor: '#000000',
@@ -33,24 +19,21 @@ autoCompletionPanel: {
         searchPanel: {
-            background: tokens.palette.light.neutral.bg.default,
-            text: tokens.palette.light.neutral.text.default,
-            buttonHoverBackground: tokens.palette.light.neutral.bg.strong,
+            background: '#FEFEFE',
+            text: '#545454',
+            buttonHoverBackground: tokens.theme.light.palette.neutral.bg.strong,
         },
     },
     highlightStyles: {
-        comment: light.syntax.comment.hex(),
-        keyword: light.syntax.keyword.hex(),
-        keywordLiteral: light.syntax.keyword.hex(),
-        label: light.syntax.markup.hex(),
-        predicateFunction: light.syntax.func.hex(),
-        function: light.syntax.func.hex(),
-        procedure: light.syntax.func.hex(),
-        stringLiteral: light.syntax.string.hex(),
-        numberLiteral: light.syntax.constant.hex(),
-        booleanLiteral: light.syntax.constant.hex(),
-        operator: light.syntax.operator.hex(),
-        property: light.syntax.tag.hex(),
-        paramDollar: light.syntax.regexp.hex(),
-        paramValue: light.syntax.regexp.hex(),
-        namespace: light.syntax.special.hex(),
-        consoleCommand: light.editor.fg.hex(),
+        comment: '#a3a7ae',
+        keyword: '#008561',
+        keywordLiteral: '#008561',
+        label: '#de064e',
+        predicateFunction: '#0177b8',
+        function: '#0177b8',
+        procedure: '#0177b8',
+        stringLiteral: '#8c6b41',
+        numberLiteral: '#9a4fcb',
+        booleanLiteral: '#9a4fcb',
+        operator: '#008561',
+        property: '#0055ae',
+        paramValue: '#9a4fcb',
     },
@@ -73,5 +56,5 @@ };
         searchPanel: {
-            background: convertToHex(tokens.palette.dark.neutral.bg.default),
-            text: convertToHex(tokens.palette.dark.neutral.text.default),
-            buttonHoverBackground: convertToHex(tokens.palette.dark.neutral.bg.strong),
+            background: tokens.theme.dark.palette.neutral.bg.default,
+            text: tokens.theme.dark.palette.neutral.text.default,
+            buttonHoverBackground: tokens.theme.dark.palette.neutral.bg.strong,
         },
@@ -78,0 +61,0 @@ },

package.json

@@ -20,3 +20,3 @@ {
   ],
-  "version": "2.0.0-canary-b08f11e",
+  "version": "2.0.0-canary-b0e419e",
   "main": "./dist/index.js",
@@ -55,3 +55,3 @@ "types": "./dist/index.d.ts",
     "@lezer/highlight": "^1.1.3",
-    "@neo4j-cypher/language-support": "2.0.0-canary-b08f11e",
+    "@neo4j-cypher/language-support": "2.0.0-canary-b0e419e",
     "@types/prismjs": "^1.26.3",
@@ -67,3 +67,3 @@ "@types/workerpool": "^6.4.7",
   "devDependencies": {
-    "@neo4j-ndl/base": "^1.10.1",
+    "@neo4j-ndl/base": "^3.0.10",
     "@playwright/experimental-ct-react": "^1.45.3",
@@ -70,0 +70,0 @@ "@playwright/test": "^1.45.3",

src/lang-cypher/autocomplete.ts

@@ -52,3 +52,3 @@ import {
   if (completion.deprecated) {
-    return 'cm-deprecated-completion';
+    return 'cm-deprecated-element';
   } else {
@@ -81,3 +81,4 @@ return null;
     const options = autocomplete(
-      documentText,
+      // TODO This is a temporary hack because completions are not working well
+      documentText.slice(0, context.pos),
       config.schema ?? {},
@@ -88,63 +89,45 @@ context.pos,
 
-    if (config.featureFlags?.signatureInfoOnAutoCompletions) {
-      return {
-        from: context.matchBefore(/(\w|\$)*$/).from,
-        options: options.map((o) => {
-          let maybeInfo = {};
-          let emptyInfo = true;
-          const newDiv = document.createElement('div');
+    return {
+      from: context.matchBefore(/(\w|\$)*$/).from,
+      options: options.map((o) => {
+        let maybeInfo = {};
+        let emptyInfo = true;
+        const newDiv = document.createElement('div');
 
-          if (o.signature) {
-            const header = document.createElement('p');
-            header.setAttribute('class', 'cm-completionInfo-signature');
-            header.textContent = o.signature;
-            if (header.textContent.length > 0) {
-              emptyInfo = false;
-              newDiv.appendChild(header);
-            }
+        if (o.signature) {
+          const header = document.createElement('p');
+          header.setAttribute('class', 'cm-completionInfo-signature');
+          header.textContent = o.signature;
+          if (header.textContent.length > 0) {
+            emptyInfo = false;
+            newDiv.appendChild(header);
           }
+        }
 
-          if (o.documentation) {
-            const paragraph = document.createElement('p');
-            paragraph.textContent = getDocString(o.documentation);
-            if (paragraph.textContent.length > 0) {
-              emptyInfo = false;
-              newDiv.appendChild(paragraph);
-            }
+        if (o.documentation) {
+          const paragraph = document.createElement('p');
+          paragraph.textContent = getDocString(o.documentation);
+          if (paragraph.textContent.length > 0) {
+            emptyInfo = false;
+            newDiv.appendChild(paragraph);
           }
+        }
 
-          if (!emptyInfo) {
-            maybeInfo = {
-              info: () => Promise.resolve(newDiv),
-            };
-          }
-          const deprecated =
-            o.tags?.find((tag) => tag === CompletionItemTag.Deprecated) ??
-            false;
-          // The negative boost moves the deprecation down the list
-          // so we offer the user the completions that are
-          // deprecated the last
-          const maybeDeprecated = deprecated
-            ? { boost: -99, deprecated: true }
-            : {};
+        if (!emptyInfo) {
+          maybeInfo = {
+            info: () => Promise.resolve(newDiv),
+          };
+        }
+        const deprecated =
+          o.tags?.find((tag) => tag === CompletionItemTag.Deprecated) ?? false;
+        // The negative boost moves the deprecation down the list
+        // so we offer the user the completions that are
+        // deprecated the last
+        const maybeDeprecated = deprecated
+          ? { boost: -99, deprecated: true }
+          : {};
 
-          return {
-            label: o.label,
-            type: completionKindToCodemirrorIcon(o.kind),
-            apply:
-              o.kind === CompletionItemKind.Snippet
-                ? // codemirror requires an empty snippet space to be able to tab out of the completion
-                  snippet((o.insertText ?? o.label) + '${}')
-                : undefined,
-            detail: o.detail,
-            ...maybeDeprecated,
-            ...maybeInfo,
-          };
-        }),
-      };
-    } else {
-      return {
-        from: context.matchBefore(/(\w|\$)*$/).from,
-        options: options.map((o) => ({
-          label: o.label,
+        return {
+          label: o.insertText ? o.insertText : o.label,
+          displayLabel: o.label,
           type: completionKindToCodemirrorIcon(o.kind),
@@ -157,5 +140,7 @@ apply:
           detail: o.detail,
-        })),
-      };
-    }
+          ...maybeDeprecated,
+          ...maybeInfo,
+        };
+      }),
+    };
   };

src/lang-cypher/constants.ts

@@ -43,2 +43,4 @@ import { languageDataProp } from '@codemirror/language';
   number: NodeType.define({ id: 28, name: 'numberLiteral' }),
+  setting: NodeType.define({ id: 29, name: 'setting' }),
+  settingValue: NodeType.define({ id: 30, name: 'settingValue' }),
 });
@@ -82,2 +84,4 @@
   consoleCommand: tags.macroName,
+  setting: tags.attributeName,
+  settingValue: tags.attributeValue,
 };
@@ -84,0 +88,0 @@

src/lang-cypher/createCypherTheme.ts

@@ -133,3 +133,3 @@ import {
     },
-    '.cm-deprecated-completion': {
+    '.cm-deprecated-element': {
       'text-decoration': 'line-through',
@@ -136,0 +136,0 @@ },

src/lang-cypher/langCypher.ts

@@ -25,3 +25,2 @@ import { autocompletion } from '@codemirror/autocomplete';
   featureFlags?: {
-    signatureInfoOnAutoCompletions?: boolean;
     consoleCommands?: boolean;
@@ -28,0 +27,0 @@ };

src/lang-cypher/syntaxValidation.ts

 import { Diagnostic, linter } from '@codemirror/lint';
 import { Extension } from '@codemirror/state';
 import { parserWrapper, validateSyntax } from '@neo4j-cypher/language-support';
-import { DiagnosticSeverity } from 'vscode-languageserver-types';
+import { DiagnosticSeverity, DiagnosticTag } from 'vscode-languageserver-types';
 import workerpool from 'workerpool';
@@ -77,11 +77,18 @@ import type { CypherConfig } from './langCypher';
 
-      return result.map((diag) => {
+      const a: Diagnostic[] = result.map((diagnostic) => {
         return {
-          from: diag.offsets.start,
-          to: diag.offsets.end,
+          from: diagnostic.offsets.start,
+          to: diagnostic.offsets.end,
           severity:
-            diag.severity === DiagnosticSeverity.Error ? 'error' : 'warning',
-          message: diag.message,
+            diagnostic.severity === DiagnosticSeverity.Error
+              ? 'error'
+              : 'warning',
+          message: diagnostic.message,
+          ...(diagnostic.tags !== undefined &&
+          diagnostic.tags.includes(DiagnosticTag.Deprecated)
+            ? { markClass: 'cm-deprecated-element' }
+            : {}),
         };
       });
+      return a;
     } catch (err) {
@@ -88,0 +95,0 @@ if (!(err instanceof workerpool.Promise.CancellationError)) {

src/ndlTokensCopy.ts

 export const tokens = {
+  transitions: {
+    values: {
+      properties: {
+        default: 'all',
+      },
+      duration: {
+        quick: '100ms',
+        slow: '250ms',
+      },
+      'timing-function': {
+        default: 'cubic-bezier(0.420, 0.000, 0.580, 1.000)',
+      },
+    },
+    stripped: {
+      quick: '100ms cubic-bezier(0.420, 0.000, 0.580, 1.000)',
+      slow: '250ms cubic-bezier(0.420, 0.000, 0.580, 1.000)',
+    },
+    full: {
+      quick: 'all 100ms cubic-bezier(0.420, 0.000, 0.580, 1.000)',
+      slow: 'all 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000)',
+    },
+  },
   borderRadius: {
+    none: '0px',
+    sm: '4px',
+    md: '6px',
+    lg: '8px',
+    xl: '10px',
     '1xl': '12px',
@@ -9,120 +36,14 @@ '2xl': '14px',
     full: '9999px',
-    lg: '8px',
-    md: '6px',
-    none: '0px',
-    sm: '4px',
-    xl: '10px',
   },
-  boxShadow: {
-    l2: '0px 1px 2px 0px rgba(12, 26, 37, 0.18)',
-    l3: '0px 4px 8px 0px rgba(12, 26, 37, 0.04)',
-    l4: '0px 4px 8px 0px rgba(12, 26, 37, 0.08)',
-    l5: '0px 8px 20px 0px rgba(12, 26, 37, 0.12)',
-  },
   breakpoints: {
-    '2xl': '1536px',
+    xs: '450px',
+    sm: '640px',
+    md: '768px',
     lg: '1024px',
-    md: '768px',
-    sm: '640px',
     xl: '1280px',
-    xs: '450px',
+    '2xl': '1536px',
   },
-  colors: {
-    blueberry: {
-      '10': '#E8EBF6',
-      '20': '#C4CCE9',
-      '30': '#9DABD9',
-      '40': '#768ACA',
-      '50': '#3557B4',
-      '60': '#25459E',
-      '70': '#0B297D',
-    },
-    danger: {
-      '10': '#ffe6e9',
-      '20': '#ffb8c4',
-      '30': '#ff668a',
-      '40': '#ed1252',
-      '50': '#cc254b',
-      '60': '#a1003b',
-      '70': '#7a0031',
-    },
-    mint: {
-      '10': '#F0FFFA',
-      '20': '#D1FFF4',
-      '30': '#A8FFEE',
-      '40': '#55F9E2',
-      '50': '#3DD4C5',
-      '60': '#2AADA5',
-      '70': '#116161',
-    },
-    neutral: {
-      '10': '#FFFFFF',
-      '20': '#F5F7FA',
-      '30': '#EEF1F6',
-      '40': '#E6E9EE',
-      '50': '#C4C8CD',
-      '60': '#B2B7BD',
-      '70': '#717780',
-      '80': '#535B66',
-      '90': '#151E29',
-    },
-    primary: {
-      '10': '#e6f8ff',
-      '20': '#a3e2ff',
-      '30': '#7ad1ff',
-      '40': '#018bff',
-      '50': '#006FD6',
-      '60': '#0056b3',
-      '70': '#004092',
-    },
-    success: {
-      '10': '#E1FAEF',
-      '20': '#98EDCB',
-      '30': '#44D4A4',
-      '40': '#00BA88',
-      '50': '#327D60',
-      '60': '#006E58',
-      '70': '#00473B',
-    },
-    warning: {
-      '10': '#FFFBDE',
-      '20': '#FFF4B5',
-      '30': '#FFEA8C',
-      '40': '#FFDE63',
-      '50': '#D9B54A',
-      '60': '#966c2e',
-      '70': '#664817',
-    },
-  },
-  font: {
-    size: {
-      'body-large': '1rem',
-      'body-medium': '0.875rem',
-      'body-small': '0.75rem',
-      code: '0.875rem',
-      h1: '3rem',
-      h2: '2.5rem',
-      h3: '1.875rem',
-      h4: '1.5rem',
-      h5: '1.25rem',
-      h6: '1rem',
-      label: '0.875rem',
-      'subheading-large': '1.25rem',
-      'subheading-medium': '1rem',
-      'subheading-small': '0.875rem',
-    },
-    weight: {
-      bold: '700',
-      light: '300',
-      medium: '500',
-      normal: '400',
-      semibold: '600',
-    },
-  },
   palette: {
     categorical: {
       '1': '#55BDC5',
-      '10': '#BF732D',
-      '11': '#478A6E',
-      '12': '#ADE86B',
       '2': '#4D49CB',
@@ -136,97 +57,8 @@ '3': '#DC8B39',
       '9': '#DBBF40',
+      '10': '#BF732D',
+      '11': '#478A6E',
+      '12': '#ADE86B',
     },
-    dark: {
-      danger: {
-        bg: {
-          strong: '#ffb8c4',
-          weak: '68, 61, 72',
-        },
-        border: {
-          strong: '#ffb8c4',
-          weak: '114, 91, 103',
-        },
-        hover: {
-          strong: '#ff668a',
-          weak: 'rgba(255, 102, 138,0.08)',
-        },
-        icon: '#ffb8c4',
-        pressed: {
-          strong: '#ff668a',
-          weak: 'rgba(255, 102, 138,0.12)',
-        },
-        text: '#ffb8c4',
-      },
-      neutral: {
-        bg: {
-          default: '#151E29',
-          strong: '45, 53, 63',
-          strongest: '#FFFFFF',
-          weak: '29, 38, 49',
-        },
-        border: {
-          strong: '#717780',
-          weak: '37, 47, 59',
-        },
-        hover: 'rgba(196, 200, 205,0.1)',
-        icon: '#C4C8CD',
-        pressed: 'rgba(196, 200, 205,0.2)',
-        text: {
-          default: '#F5F7FA',
-          inverse: '#151E29',
-          weak: '#C4C8CD',
-          weaker: '#B2B7BD',
-          weakest: '#717780',
-        },
-      },
-      primary: {
-        bg: {
-          strong: '#a3e2ff',
-          weak: '49, 69, 84',
-        },
-        border: {
-          strong: '#a3e2ff',
-          weak: '78, 108, 126',
-        },
-        focus: '#7ad1ff',
-        hover: {
-          strong: '#7ad1ff',
-          weak: 'rgba(122, 209, 255,0.08)',
-        },
-        icon: '#a3e2ff',
-        pressed: {
-          strong: '#7ad1ff',
-          weak: 'rgba(122, 209, 255,0.12)',
-        },
-        text: '#a3e2ff',
-      },
-      success: {
-        bg: {
-          strong: '#98EDCB',
-          weak: '47, 71, 73',
-        },
-        border: {
-          strong: '#98EDCB',
-          weak: '73, 113, 106',
-        },
-        icon: '#98EDCB',
-        text: '#98EDCB',
-      },
-      warning: {
-        bg: {
-          strong: '#FFEA8C',
-          weak: '68, 71, 60',
-        },
-        border: {
-          strong: '#FFEA8C',
-          weak: '114, 111, 80',
-        },
-        icon: '#FFEA8C',
-        text: '#FFEA8C',
-      },
-    },
     graph: {
       '1': '#FFDF81',
-      '10': '#FFC354',
-      '11': '#DA7294',
-      '12': '#579380',
       '2': '#C990C0',
@@ -240,100 +72,438 @@ '3': '#F79767',
       '9': '#4D8DDA',
+      '10': '#FFC354',
+      '11': '#DA7294',
+      '12': '#579380',
     },
-    light: {
-      danger: {
-        bg: {
-          strong: '#cc254b',
-          weak: '#ffe6e9',
+  },
+  colors: {
+    baltic: {
+      '10': '#E7FAFB',
+      '15': '#C3F8FB',
+      '20': '#8FE3E8',
+      '25': '#5CC3C9',
+      '30': '#5DB3BF',
+      '35': '#51A6B1',
+      '40': '#4C99A4',
+      '45': '#30839D',
+      '50': '#0A6190',
+      '55': '#02507B',
+      '60': '#014063',
+      '65': '#262F31',
+      '70': '#081E2B',
+      '75': '#041823',
+      '80': '#01121C',
+    },
+    hibiscus: {
+      '10': '#FFE9E7',
+      '15': '#FFD7D2',
+      '20': '#FFAA97',
+      '25': '#FF8E6A',
+      '30': '#F96746',
+      '35': '#E84E2C',
+      '40': '#D43300',
+      '45': '#BB2D00',
+      '50': '#961200',
+      '55': '#730E00',
+      '60': '#432520',
+      '65': '#4E0900',
+      '70': '#3F0800',
+      '75': '#360700',
+      '80': '#280500',
+    },
+    forest: {
+      '10': '#E7FCD7',
+      '15': '#BCF194',
+      '20': '#90CB62',
+      '25': '#80BB53',
+      '30': '#6FA646',
+      '35': '#5B992B',
+      '40': '#4D8622',
+      '45': '#3F7824',
+      '50': '#296127',
+      '55': '#145439',
+      '60': '#0C4D31',
+      '65': '#0A4324',
+      '70': '#262D24',
+      '75': '#052618',
+      '80': '#021D11',
+    },
+    lemon: {
+      '10': '#FFFAD1',
+      '15': '#FFF8BD',
+      '20': '#FFF178',
+      '25': '#FFE500',
+      '30': '#FFD600',
+      '35': '#F4C318',
+      '40': '#D7AA0A',
+      '45': '#B48409',
+      '50': '#996E00',
+      '55': '#765500',
+      '60': '#614600',
+      '65': '#4D3700',
+      '70': '#312E1A',
+      '75': '#2E2100',
+      '80': '#251B00',
+    },
+    lavender: {
+      '10': '#F7F3FF',
+      '15': '#E9DEFF',
+      '20': '#CCB4FF',
+      '25': '#B38EFF',
+      '30': '#A07BEC',
+      '35': '#8C68D9',
+      '40': '#754EC8',
+      '45': '#5A34AA',
+      '50': '#4B2894',
+      '55': '#3B1982',
+      '60': '#2C2A34',
+      '65': '#220954',
+      '70': '#170146',
+      '75': '#0E002D',
+      '80': '#09001C',
+    },
+    marigold: {
+      '10': '#FFF0D2',
+      '15': '#FFDE9D',
+      '20': '#FFCF72',
+      '25': '#FFC450',
+      '30': '#FFB422',
+      '35': '#FFA901',
+      '40': '#EC9C00',
+      '45': '#DA9105',
+      '50': '#BA7A00',
+      '55': '#986400',
+      '60': '#795000',
+      '65': '#624100',
+      '70': '#543800',
+      '75': '#422C00',
+      '80': '#251900',
+    },
+    earth: {
+      '10': '#FFF7F0',
+      '15': '#FDEDDA',
+      '20': '#FFE1C5',
+      '25': '#F8D1AE',
+      '30': '#ECBF96',
+      '35': '#E0AE7F',
+      '40': '#D19660',
+      '45': '#AF7C4D',
+      '50': '#8D5D31',
+      '55': '#763F18',
+      '60': '#66310B',
+      '65': '#5B2B09',
+      '70': '#481F01',
+      '75': '#361700',
+      '80': '#220E00',
+    },
+    neutral: {
+      '10': '#FFFFFF',
+      '15': '#F5F6F6',
+      '20': '#E2E3E5',
+      '25': '#CFD1D4',
+      '30': '#BBBEC3',
+      '35': '#A8ACB2',
+      '40': '#959AA1',
+      '45': '#818790',
+      '50': '#6F757E',
+      '55': '#5E636A',
+      '60': '#4D5157',
+      '65': '#3C3F44',
+      '70': '#212325',
+      '75': '#1A1B1D',
+      '80': '#09090A',
+    },
+    beige: {
+      '10': '#FFFCF4',
+      '20': '#FFF7E3',
+      '30': '#F2EAD4',
+      '40': '#C1B9A0',
+      '50': '#999384',
+      '60': '#666050',
+      '70': '#3F3824',
+    },
+    highlights: {
+      yellow: '#FAFF00',
+      periwinkle: '#6A82FF',
+    },
+  },
+  theme: {
+    dark: {
+      boxShadow: {
+        raised: '0px 1px 2px 0px rgba(9, 9, 10, 0.50)',
+        overlay: '0px 8px 20px 0px rgba(9, 9, 10, 0.50)',
+      },
+      palette: {
+        neutral: {
+          text: {
+            weakest: '#818790',
+            weaker: '#A8ACB2',
+            weak: '#CFD1D4',
+            default: '#F5F6F6',
+            inverse: '#1A1B1D',
+          },
+          icon: '#CFD1D4',
+          bg: {
+            weak: '#212325',
+            default: '#1A1B1D',
+            strong: '#3C3F44',
+            stronger: '#6F757E',
+            strongest: '#F5F6F6',
+            status: '#A8ACB2',
+            'on-bg-weak': '#818790',
+          },
+          border: {
+            weak: '#3C3F44',
+            strong: '#6F757E',
+            strongest: '#BBBEC3',
+          },
+          hover: '#959AA1',
+          pressed: '#959AA1',
         },
-        border: {
-          strong: '#cc254b',
-          weak: '#ffb8c4',
+        primary: {
+          text: '#8FE3E8',
+          icon: '#8FE3E8',
+          bg: {
+            weak: '#262F31',
+            strong: '#8FE3E8',
+            status: '#8FE3E8',
+            selected: '#262F31',
+          },
+          border: {
+            strong: '#8FE3E8',
+            weak: '#02507B',
+          },
+          focus: '#5DB3BF',
+          hover: {
+            weak: '#8FE3E8',
+            strong: '#5DB3BF',
+          },
+          pressed: {
+            weak: '#8FE3E8',
+            strong: '#4C99A4',
+          },
         },
-        hover: {
-          strong: '#a1003b',
-          weak: 'rgba(237,18,82,0.08)',
+        danger: {
+          text: '#FFAA97',
+          icon: '#FFAA97',
+          bg: {
+            strong: '#FFAA97',
+            weak: '#432520',
+            status: '#FFAA97',
+          },
+          border: {
+            strong: '#FFAA97',
+            weak: '#730E00',
+          },
+          hover: {
+            weak: '#FFAA97',
+            strong: '#F96746',
+          },
+          pressed: {
+            weak: '#FFAA97',
+            strong: '#E84E2C',
+          },
         },
-        icon: '#cc254b',
-        pressed: {
-          strong: '#7a0031',
-          weak: 'rgba(237,18,82,0.12)',
+        warning: {
+          text: '#FFD600',
+          icon: '#FFD600',
+          bg: {
+            strong: '#FFD600',
+            weak: '#312E1A',
+            status: '#FFD600',
+          },
+          border: {
+            strong: '#FFD600',
+            weak: '#765500',
+          },
         },
-        text: '#cc254b',
-      },
-      neutral: {
-        bg: {
-          default: '#F5F7FA',
-          strong: '#E6E9EE',
-          strongest: '#535B66',
-          weak: '#FFFFFF',
+        success: {
+          text: '#90CB62',
+          icon: '#90CB62',
+          bg: {
+            strong: '#90CB62',
+            weak: '#262D24',
+            status: '#90CB62',
+          },
+          border: {
+            strong: '#90CB62',
+            weak: '#296127',
+          },
         },
-        border: {
-          strong: '#C4C8CD',
-          weak: '#EEF1F6',
+        discovery: {
+          text: '#CCB4FF',
+          icon: '#CCB4FF',
+          bg: {
+            strong: '#CCB4FF',
+            weak: '#2C2A34',
+            status: '#CCB4FF',
+          },
+          border: {
+            strong: '#CCB4FF',
+            weak: '#4B2894',
+          },
         },
-        hover: 'rgba(113,119,128,0.1)',
-        icon: '#535B66',
-        pressed: 'rgba(113,119,128,0.2)',
-        text: {
-          default: '#151E29',
-          inverse: '#FFFFFF',
-          weak: '#535B66',
-          weaker: '#717780',
-          weakest: '#B2B7BD',
-        },
       },
-      primary: {
-        bg: {
-          strong: '#006FD6',
-          weak: '#e6f8ff',
+    },
+    light: {
+      boxShadow: {
+        raised: '0px 1px 2px 0px rgba(26, 27, 29, 0.18)',
+        overlay: '0px 4px 8px 0px rgba(26, 27, 29, 0.12)',
+      },
+      palette: {
+        neutral: {
+          text: {
+            weakest: '#A8ACB2',
+            weaker: '#5E636A',
+            weak: '#4D5157',
+            default: '#1A1B1D',
+            inverse: '#FFFFFF',
+          },
+          icon: '#4D5157',
+          bg: {
+            weak: '#FFFFFF',
+            default: '#F5F6F6',
+            'on-bg-weak': '#F5F6F6',
+            strong: '#E2E3E5',
+            stronger: '#A8ACB2',
+            strongest: '#3C3F44',
+            status: '#A8ACB2',
+          },
+          border: {
+            weak: '#E2E3E5',
+            strong: '#BBBEC3',
+            strongest: '#6F757E',
+          },
+          hover: '#6F757E',
+          pressed: '#6F757E',
         },
-        border: {
-          strong: '#006FD6',
-          weak: '#7ad1ff',
+        primary: {
+          text: '#0A6190',
+          icon: '#0A6190',
+          bg: {
+            weak: '#E7FAFB',
+            strong: '#0A6190',
+            status: '#4C99A4',
+            selected: '#E7FAFB',
+          },
+          border: {
+            strong: '#0A6190',
+            weak: '#8FE3E8',
+          },
+          focus: '#30839D',
+          hover: {
+            weak: '#30839D',
+            strong: '#02507B',
+          },
+          pressed: {
+            weak: '#30839D',
+            strong: '#014063',
+          },
         },
-        focus: '#018bff',
-        hover: {
-          strong: '#0056b3',
-          weak: 'rgba(1,139,255,0.08)',
+        danger: {
+          text: '#BB2D00',
+          icon: '#BB2D00',
+          bg: {
+            strong: '#BB2D00',
+            weak: '#FFE9E7',
+            status: '#E84E2C',
+          },
+          border: {
+            strong: '#BB2D00',
+            weak: '#FFAA97',
+          },
+          hover: {
+            weak: '#D43300',
+            strong: '#961200',
+          },
+          pressed: {
+            weak: '#D43300',
+            strong: '#730E00',
+          },
         },
-        icon: '#006FD6',
-        pressed: {
-          strong: '#004092',
-          weak: 'rgba(1,139,255,0.12)',
+        warning: {
+          text: '#765500',
+          icon: '#765500',
+          bg: {
+            strong: '#765500',
+            weak: '#FFFAD1',
+            status: '#D7AA0A',
+          },
+          border: {
+            strong: '#996E00',
+            weak: '#FFD600',
+          },
         },
-        text: '#006FD6',
-      },
-      success: {
-        bg: {
-          strong: '#327D60',
-          weak: '#E1FAEF',
+        success: {
+          text: '#3F7824',
+          icon: '#3F7824',
+          bg: {
+            strong: '#3F7824',
+            weak: '#E7FCD7',
+            status: '#5B992B',
+          },
+          border: {
+            strong: '#3F7824',
+            weak: '#90CB62',
+          },
         },
-        border: {
-          strong: '#327D60',
-          weak: '#98EDCB',
+        discovery: {
+          text: '#5A34AA',
+          icon: '#5A34AA',
+          bg: {
+            strong: '#5A34AA',
+            weak: '#E9DEFF',
+            status: '#754EC8',
+          },
+          border: {
+            strong: '#5A34AA',
+            weak: '#B38EFF',
+          },
         },
-        icon: '#327D60',
-        text: '#327D60',
       },
-      warning: {
-        bg: {
-          strong: '#966c2e',
-          weak: '#FFFBDE',
-        },
-        border: {
-          strong: '#966c2e',
-          weak: '#FFEA8C',
-        },
-        icon: '#966c2e',
-        text: '#966c2e',
-      },
     },
   },
+  font: {
+    size: {
+      h1: '3rem',
+      h2: '2.5rem',
+      h3: '1.875rem',
+      h4: '1.5rem',
+      h5: '1.25rem',
+      h6: '1rem',
+      'subheading-large': '1.25rem',
+      'subheading-medium': '1rem',
+      'subheading-small': '0.875rem',
+      'body-large': '1rem',
+      'body-medium': '0.875rem',
+      'body-small': '0.75rem',
+      code: '0.875rem',
+      label: '0.875rem',
+    },
+    weight: {
+      bold: '700',
+      semibold: '600',
+      normal: '400',
+      medium: '500',
+      light: '300',
+    },
+    'font-family': {
+      h1: 'Syne Neo',
+      h2: 'Syne Neo',
+      h3: 'Public Sans',
+      h4: 'Public Sans',
+      h5: 'Public Sans',
+      h6: 'Public Sans',
+      'subheading-large': 'Public Sans',
+      'subheading-medium': 'Public Sans',
+      'subheading-small': 'Public Sans',
+      'body-large': 'Public Sans',
+      'body-medium': 'Public Sans',
+      'body-small': 'Public Sans',
+      code: 'Fira Code',
+      label: 'Public Sans',
+    },
+  },
   space: {
     '0': '0px',
     '1': '1px',
-    '10': '64px',
-    '11': '96px',
-    '12': '128px',
-    '13': '320px',
     '2': '2px',
@@ -347,18 +517,7 @@ '3': '4px',
     '9': '48px',
+    '10': '64px',
+    '11': '96px',
+    '12': '128px',
+    '13': '320px',
   },
-  transitions: {
-    default: 'all 100ms cubic-bezier(0.420, 0.000, 0.580, 1.000)',
-    stripped: '100ms cubic-bezier(0.420, 0.000, 0.580, 1.000)',
-    values: {
-      duration: {
-        default: '100ms',
-      },
-      properties: {
-        default: 'all',
-      },
-      'timing-function': {
-        default: 'cubic-bezier(0.420, 0.000, 0.580, 1.000)',
-      },
-    },
-  },
   zIndex: {
@@ -372,13 +531,13 @@ '0': 0,
     '60': 60,
+    deep: -999999,
+    auto: 'auto',
     alias: {
+      overlay: 10,
       banner: 20,
       blanket: 30,
-      modal: 60,
-      overlay: 10,
       popover: 40,
       tooltip: 50,
+      modal: 60,
     },
-    auto: 'auto',
-    deep: -999999,
   },
 };

src/themes.ts

 import { Extension } from '@codemirror/state';
-import { light, mirage } from 'ayu';
+import { mirage } from 'ayu';
 import {
@@ -9,28 +9,10 @@ createCypherTheme,
 
-/* ndl exports most tokens as hex colors but some tokens are exported as rgb colors, in the form of "10, 20, 30"
-   This should be fixed in version 2 of ndl.
-   Meanwhile we can use this function */
-const convertToHex = (color: string) => {
-  if (color.startsWith('#')) {
-    return color;
-  }
-
-  const rgb = color.match(/\d+/g);
-  if (!rgb) {
-    return color;
-  }
-  const [r, g, b] = rgb;
-  return `#${Number(r).toString(16)}${Number(g).toString(16)}${Number(
-    b,
-  ).toString(16)}`;
-};
-
 export const lightThemeConstants: ThemeOptions = {
   dark: false,
   editorSettings: {
-    background: light.editor.bg.hex(),
-    foreground: light.editor.fg.hex(),
-    gutterForeground: light.editor.gutter.normal.hex(),
-    selection: light.editor.selection.active.hex(),
-    textMatchingSelection: light.editor.findMatch.active.hex(),
+    background: '#FEFEFE',
+    foreground: '#545454',
+    gutterForeground: '#a3a7ae',
+    selection: tokens.colors.neutral['20'],
+    textMatchingSelection: tokens.colors.lavender['15'],
     cursor: '#000000',
@@ -43,24 +25,21 @@ autoCompletionPanel: {
     searchPanel: {
-      background: tokens.palette.light.neutral.bg.default,
-      text: tokens.palette.light.neutral.text.default,
-      buttonHoverBackground: tokens.palette.light.neutral.bg.strong,
+      background: '#FEFEFE',
+      text: '#545454',
+      buttonHoverBackground: tokens.theme.light.palette.neutral.bg.strong,
     },
   },
   highlightStyles: {
-    comment: light.syntax.comment.hex(),
-    keyword: light.syntax.keyword.hex(),
-    keywordLiteral: light.syntax.keyword.hex(),
-    label: light.syntax.markup.hex(),
-    predicateFunction: light.syntax.func.hex(),
-    function: light.syntax.func.hex(),
-    procedure: light.syntax.func.hex(),
-    stringLiteral: light.syntax.string.hex(),
-    numberLiteral: light.syntax.constant.hex(),
-    booleanLiteral: light.syntax.constant.hex(),
-    operator: light.syntax.operator.hex(),
-    property: light.syntax.tag.hex(),
-    paramDollar: light.syntax.regexp.hex(),
-    paramValue: light.syntax.regexp.hex(),
-    namespace: light.syntax.special.hex(),
-    consoleCommand: light.editor.fg.hex(),
+    comment: '#a3a7ae',
+    keyword: '#008561',
+    keywordLiteral: '#008561',
+    label: '#de064e',
+    predicateFunction: '#0177b8',
+    function: '#0177b8',
+    procedure: '#0177b8',
+    stringLiteral: '#8c6b41',
+    numberLiteral: '#9a4fcb',
+    booleanLiteral: '#9a4fcb',
+    operator: '#008561',
+    property: '#0055ae',
+    paramValue: '#9a4fcb',
   },
@@ -84,7 +63,5 @@ };
     searchPanel: {
-      background: convertToHex(tokens.palette.dark.neutral.bg.default),
-      text: convertToHex(tokens.palette.dark.neutral.text.default),
-      buttonHoverBackground: convertToHex(
-        tokens.palette.dark.neutral.bg.strong,
-      ),
+      background: tokens.theme.dark.palette.neutral.bg.default,
+      text: tokens.theme.dark.palette.neutral.text.default,
+      buttonHoverBackground: tokens.theme.dark.palette.neutral.bg.strong,
     },
@@ -91,0 +68,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

695818

increased by3.11%

Lines of code

9523

increased by5.69%

Dependency changes

• + Added@neo4j-cypher/language-support@2.0.0-canary-b0e419e(transitive)

• - Removed@neo4j-cypher/language-support@2.0.0-canary-b08f11e(transitive)

• Updated@neo4j-cypher/language-support@2.0.0-canary-b0e419e