From 334cc932b91ff6180d511c380bbaa7b11f489a9a Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Mon, 7 Oct 2019 14:51:58 +0200 Subject: [PATCH 01/13] create new vscode theme for new redesign --- .../src/embed/components/Header/elements.js | 3 +- .../src/embed/components/Sidebar/elements.js | 2 +- packages/app/src/embed/index.js | 6 +- packages/app/src/embed/theme/index.js | 10 + packages/app/src/embed/theme/theme.js | 37 + packages/app/src/embed/theme/vscode.json | 1557 ++++++++++++++++ .../common/src/themes/codesandbox-nu.json | 1558 +++++++++++++++++ packages/common/src/themes/index.ts | 6 + yarn.lock | 2 +- 9 files changed, 3173 insertions(+), 8 deletions(-) create mode 100644 packages/app/src/embed/theme/index.js create mode 100644 packages/app/src/embed/theme/theme.js create mode 100644 packages/app/src/embed/theme/vscode.json create mode 100644 packages/common/src/themes/codesandbox-nu.json diff --git a/packages/app/src/embed/components/Header/elements.js b/packages/app/src/embed/components/Header/elements.js index a38cb65a43e..f7773f37231 100644 --- a/packages/app/src/embed/components/Header/elements.js +++ b/packages/app/src/embed/components/Header/elements.js @@ -30,8 +30,7 @@ export const Container = styled.div` height: 3rem; padding: 0 1rem; box-sizing: border-box; - border-bottom: 1px solid ${props => props.theme.background.darken(0.3)}; - background-color: ${props => props.theme.background}; + background-color: ${props => props.theme['editor.background']}; `; export const MenuIcon = styled(MenuIconSVG)` diff --git a/packages/app/src/embed/components/Sidebar/elements.js b/packages/app/src/embed/components/Sidebar/elements.js index 775c5d85912..3afbf143644 100644 --- a/packages/app/src/embed/components/Sidebar/elements.js +++ b/packages/app/src/embed/components/Sidebar/elements.js @@ -11,7 +11,7 @@ export const Container = styled.div` height: ${isIOS ? '100%' : '100vh'}; color: rgba(255, 255, 255, 0.8); z-index: 10; - background-color: ${props => props.theme.sidebar}; + background-color: ${props => props.theme['sideBar.background']}; overflow: auto; `; diff --git a/packages/app/src/embed/index.js b/packages/app/src/embed/index.js index 239d8983fa3..45743bf08a4 100644 --- a/packages/app/src/embed/index.js +++ b/packages/app/src/embed/index.js @@ -5,12 +5,10 @@ import { ThemeProvider } from 'styled-components'; import requirePolyfills from '@codesandbox/common/lib/load-dynamic-polyfills'; import 'normalize.css'; -import theme from '@codesandbox/common/lib/theme'; import '@codesandbox/common/lib/global.css'; - -import codesandbox from '@codesandbox/common/lib/themes/codesandbox.json'; import track from '@codesandbox/common/lib/utils/analytics'; +import theme from './theme'; import App from './components/App'; document.addEventListener('click', () => { @@ -20,7 +18,7 @@ document.addEventListener('click', () => { requirePolyfills().then(() => { function renderApp(Component) { render( - + , document.getElementById('root') diff --git a/packages/app/src/embed/theme/index.js b/packages/app/src/embed/theme/index.js new file mode 100644 index 00000000000..6411282c2e7 --- /dev/null +++ b/packages/app/src/embed/theme/index.js @@ -0,0 +1,10 @@ +import applicationTheme from '@codesandbox/common/lib/theme'; +import codesandboxNu from '@codesandbox/common/lib/themes/codesandbox-nu.json'; + +const theme = { + ...applicationTheme, + ...codesandboxNu.colors, + vscodeTheme: codesandboxNu, +}; + +export default theme; diff --git a/packages/app/src/embed/theme/theme.js b/packages/app/src/embed/theme/theme.js new file mode 100644 index 00000000000..c9b3d07d4aa --- /dev/null +++ b/packages/app/src/embed/theme/theme.js @@ -0,0 +1,37 @@ +// this theme follows the System UI Theme Specification +// Ref: https://system-ui.com/theme + +const colors = { + white: '#fff', + grays: { + 100: '#fff9f9', // found this lingering around + 200: '#e6e6e6', // danny's gray-0 + 300: '#999999', // danny's gray-1 + 400: '#757575', // danny's gray-2 + 500: '#242424', // danny's dark-3 + 600: 'pink', // doesn't exist yet + 700: '#151515', // danny's dark-2 + 800: '#040404', // danny's dark-1 + 900: '#111111', // danny's dark-0 + }, + blues: { + 300: '#6CC7F6', // danny's teal + 600: '#0971f1', // danny's blue + }, +}; + +const theme = { + colors, + space: [0, 4, 8, 16, 32], + fontSizes: [0, 12, 13, 14, 16, 20, 24, 32], + + shadows: { + // this part is ugly, this can be improved. + // bonus: these are terrible names + active: `inset 0px -2px 0px ${colors.blues[300]}`, + underline: `inset 0px -2px 0px ${colors.grays[100] + '1a'}`, + fadeunder: `inset 0px 8px 8px 0px ${colors.grays[700] + 'cc'}`, + }, +}; + +export default theme; diff --git a/packages/app/src/embed/theme/vscode.json b/packages/app/src/embed/theme/vscode.json new file mode 100644 index 00000000000..bfdfdf1e5b1 --- /dev/null +++ b/packages/app/src/embed/theme/vscode.json @@ -0,0 +1,1557 @@ +{ + "name": "Embed Theme", + "type": "dark", + "colors": { + "editor.background": "#151515", + "sideBar.background": "#151515", + "sideBar.border": "#242424", + "list.hoverBackground": "#242424", + "list.inactiveSelectionBackground": "#242424", + "list.activeSelectionBackground": "#242424", + "editor.selectionBackground": "#242424", + "editorGroup.border": "#242424", + "editorGroupHeader.tabsBackground": "#151515", + "tab.border": "#151515", + "tab.activeBackground": "#151515", + "tab.activeBorder": "#64D2FF", + "tab.inactiveBackground": "#111518", + "input.background": "#242424", + "input.foreground": "#FFFFFF", + + "editorCursor.foreground": "#64D2FF", + "badge.background": "#151515", + "statusBar.background": "#151515", + "scrollbarSlider.background": "#242424", + "scrollbarSlider.activeBackground": "#757575", + "editorHoverWidget.background": "#242424", + "editorHoverWidget.border": "#040404", + "peekViewEditor.background": "#242424", + "focusBorder": "#64D2FF", + "button.background": "#0971F1", + "button.hoverBackground": "#368cf7", + + "activityBar.background": "#f00", + "titleBar.activeBackground": "#f00", + "titleBar.border": "#f00", + "menu.background": "#f00", + "menu.selectionBackground": "#f00", + "menu.selectionForeground": "#f00", + "editorSuggestWidget.background": "#f00", + "editorSuggestWidget.selectedBackground": "#f00", + "editorSuggestWidget.border": "#f00", + "inputOption.activeBorder": "#f00" + }, + "tokenColors": [ + { + "name": "Comment", + "scope": ["comment"], + "settings": { + "foreground": "#5C6370", + "fontStyle": "italic" + } + }, + { + "name": "Comment Markup Link", + "scope": ["comment markup.link"], + "settings": { + "foreground": "#5C6370" + } + }, + { + "name": "Entity Name Type", + "scope": ["entity.name.type"], + "settings": { + "foreground": "#E5C07B" + } + }, + { + "name": "Entity Other Inherited Class", + "scope": ["entity.other.inherited-class"], + "settings": { + "foreground": "#98C379" + } + }, + { + "name": "Keyword", + "scope": ["keyword"], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "Keyword Control", + "scope": ["keyword.control"], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "Keyword Operator", + "scope": ["keyword.operator"], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "Keyword Other Special Method", + "scope": ["keyword.other.special-method"], + "settings": { + "foreground": "#61AFEF" + } + }, + { + "name": "Keyword Other Unit", + "scope": ["keyword.other.unit"], + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "Storage", + "scope": ["storage"], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "Storage Type Annotation,storage Type Primitive", + "scope": ["storage.type.annotation", "storage.type.primitive"], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "Storage Modifier Package,storage Modifier Import", + "scope": ["storage.modifier.package", "storage.modifier.import"], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "Constant", + "scope": ["constant"], + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "Constant Variable", + "scope": ["constant.variable"], + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "Constant Character Escape", + "scope": ["constant.character.escape"], + "settings": { + "foreground": "#56B6C2" + } + }, + { + "name": "Constant Numeric", + "scope": ["constant.numeric"], + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "Constant Other Color", + "scope": ["constant.other.color"], + "settings": { + "foreground": "#56B6C2" + } + }, + { + "name": "Constant Other Symbol", + "scope": ["constant.other.symbol"], + "settings": { + "foreground": "#56B6C2" + } + }, + { + "name": "Variable", + "scope": ["variable"], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "Variable Interpolation", + "scope": ["variable.interpolation"], + "settings": { + "foreground": "#BE5046" + } + }, + { + "name": "Variable Parameter", + "scope": ["variable.parameter"], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "String", + "scope": ["string"], + "settings": { + "foreground": "#98C379" + } + }, + { + "name": "String Regexp", + "scope": ["string.regexp"], + "settings": { + "foreground": "#56B6C2" + } + }, + { + "name": "String Regexp Source Ruby Embedded", + "scope": ["string.regexp source.ruby.embedded"], + "settings": { + "foreground": "#E5C07B" + } + }, + { + "name": "String Other Link", + "scope": ["string.other.link"], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "Punctuation Definition Comment", + "scope": ["punctuation.definition.comment"], + "settings": { + "foreground": "#5C6370" + } + }, + { + "name": "Punctuation Definition Method Parameters,punctuation Definition Function Parameters,punctuation Definition Parameters,punctuation Definition Separator,punctuation Definition Seperator,punctuation Definition Array", + "scope": [ + "punctuation.definition.method-parameters", + "punctuation.definition.function-parameters", + "punctuation.definition.parameters", + "punctuation.definition.separator", + "punctuation.definition.seperator", + "punctuation.definition.array" + ], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "Punctuation Definition Heading,punctuation Definition Identity", + "scope": [ + "punctuation.definition.heading", + "punctuation.definition.identity" + ], + "settings": { + "foreground": "#61AFEF" + } + }, + { + "name": "Punctuation Definition Bold", + "scope": ["punctuation.definition.bold"], + "settings": { + "foreground": "#E5C07B", + "fontStyle": "bold" + } + }, + { + "name": "Punctuation Definition Italic", + "scope": ["punctuation.definition.italic"], + "settings": { + "foreground": "#C678DD", + "fontStyle": "italic" + } + }, + { + "name": "Punctuation Section Embedded", + "scope": ["punctuation.section.embedded"], + "settings": { + "foreground": "#BE5046" + } + }, + { + "name": "Punctuation Section Method,punctuation Section Class,punctuation Section Inner Class", + "scope": [ + "punctuation.section.method", + "punctuation.section.class", + "punctuation.section.inner-class" + ], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "Support Class", + "scope": ["support.class"], + "settings": { + "foreground": "#E5C07B" + } + }, + { + "name": "Support Type", + "scope": ["support.type"], + "settings": { + "foreground": "#56B6C2" + } + }, + { + "name": "Support Function", + "scope": ["support.function"], + "settings": { + "foreground": "#56B6C2" + } + }, + { + "name": "Support Function Any Method", + "scope": ["support.function.any-method"], + "settings": { + "foreground": "#61AFEF" + } + }, + { + "name": "Entity Name Function", + "scope": ["entity.name.function"], + "settings": { + "foreground": "#61AFEF" + } + }, + { + "name": "Entity Name Class,entity Name Type Class", + "scope": ["entity.name.class", "entity.name.type.class"], + "settings": { + "foreground": "#E5C07B" + } + }, + { + "name": "Entity Name Section", + "scope": ["entity.name.section"], + "settings": { + "foreground": "#61AFEF" + } + }, + { + "name": "Entity Name Tag", + "scope": ["entity.name.tag"], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "Entity Other Attribute Name", + "scope": ["entity.other.attribute-name"], + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "Entity Other Attribute Name Id", + "scope": ["entity.other.attribute-name.id"], + "settings": { + "foreground": "#61AFEF" + } + }, + { + "name": "Meta Class", + "scope": ["meta.class"], + "settings": { + "foreground": "#E5C07B" + } + }, + { + "name": "Meta Class Body", + "scope": ["meta.class.body"], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "Meta Method Call,meta Method", + "scope": ["meta.method-call", "meta.method"], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "Meta Definition Variable", + "scope": ["meta.definition.variable"], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "Meta Link", + "scope": ["meta.link"], + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "Meta Require", + "scope": ["meta.require"], + "settings": { + "foreground": "#61AFEF" + } + }, + { + "name": "Meta Selector", + "scope": ["meta.selector"], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "Meta Separator", + "scope": ["meta.separator"], + "settings": { + "background": "#373B41", + "foreground": "#ABB2BF" + } + }, + { + "name": "Meta Tag", + "scope": ["meta.tag"], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "Underline", + "scope": ["underline"], + "settings": { + "text-decoration": "underline" + } + }, + { + "name": "None", + "scope": ["none"], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "Invalid Deprecated", + "scope": ["invalid.deprecated"], + "settings": { + "foreground": "#523D14", + "background": "#E0C285" + } + }, + { + "name": "Invalid Illegal", + "scope": ["invalid.illegal"], + "settings": { + "foreground": "white", + "background": "#E05252" + } + }, + { + "name": "Markup Bold", + "scope": ["markup.bold"], + "settings": { + "foreground": "#D19A66", + "fontStyle": "bold" + } + }, + { + "name": "Markup Changed", + "scope": ["markup.changed"], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "Markup Deleted", + "scope": ["markup.deleted"], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "Markup Italic", + "scope": ["markup.italic"], + "settings": { + "foreground": "#C678DD", + "fontStyle": "italic" + } + }, + { + "name": "Markup Heading", + "scope": ["markup.heading"], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "Markup Heading Punctuation Definition Heading", + "scope": ["markup.heading punctuation.definition.heading"], + "settings": { + "foreground": "#61AFEF" + } + }, + { + "name": "Markup Link", + "scope": ["markup.link"], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "Markup Inserted", + "scope": ["markup.inserted"], + "settings": { + "foreground": "#98C379" + } + }, + { + "name": "Markup Quote", + "scope": ["markup.quote"], + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "Markup Raw", + "scope": ["markup.raw"], + "settings": { + "foreground": "#98C379" + } + }, + { + "name": "Source C Keyword Operator", + "scope": ["source.c keyword.operator"], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "Source Cpp Keyword Operator", + "scope": ["source.cpp keyword.operator"], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "Source Cs Keyword Operator", + "scope": ["source.cs keyword.operator"], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "Source Css Property Name,source Css Property Value", + "scope": ["source.css property-name", "source.css property-value"], + "settings": { + "foreground": "#828997" + } + }, + { + "name": "Source Css Property Name Support,source Css Property Value Support", + "scope": [ + "source.css property-name.support", + "source.css property-value.support" + ], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "Source Gfm Markup", + "scope": ["source.gfm markup"], + "settings": { + "-webkit-font-smoothing": "auto" + } + }, + { + "name": "Source Gfm Link Entity", + "scope": ["source.gfm link entity"], + "settings": { + "foreground": "#61AFEF" + } + }, + { + "name": "Source Go Storage Type String", + "scope": ["source.go storage.type.string"], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "Source Ini Keyword Other Definition Ini", + "scope": ["source.ini keyword.other.definition.ini"], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "Source Java Storage Modifier Import", + "scope": ["source.java storage.modifier.import"], + "settings": { + "foreground": "#E5C07B" + } + }, + { + "name": "Source Java Storage Type", + "scope": ["source.java storage.type"], + "settings": { + "foreground": "#E5C07B" + } + }, + { + "name": "Source Java Keyword Operator Instanceof", + "scope": ["source.java keyword.operator.instanceof"], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "Source Java Properties Meta Key Pair", + "scope": ["source.java-properties meta.key-pair"], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "Source Java Properties Meta Key Pair > Punctuation", + "scope": ["source.java-properties meta.key-pair > punctuation"], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "Source Js Keyword Operator", + "scope": ["source.js keyword.operator"], + "settings": { + "foreground": "#56B6C2" + } + }, + { + "name": "Source Js Keyword Operator Delete,source Js Keyword Operator In,source Js Keyword Operator Of,source Js Keyword Operator Instanceof,source Js Keyword Operator New,source Js Keyword Operator Typeof,source Js Keyword Operator Void", + "scope": [ + "source.js keyword.operator.delete", + "source.js keyword.operator.in", + "source.js keyword.operator.of", + "source.js keyword.operator.instanceof", + "source.js keyword.operator.new", + "source.js keyword.operator.typeof", + "source.js keyword.operator.void" + ], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "Source Json Meta Structure Dictionary Json > String Quoted Json", + "scope": [ + "source.json meta.structure.dictionary.json > string.quoted.json" + ], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "Source Json Meta Structure Dictionary Json > String Quoted Json > Punctuation String", + "scope": [ + "source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string" + ], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "Source Json Meta Structure Dictionary Json > Value Json > String Quoted Json,source Json Meta Structure Array Json > Value Json > String Quoted Json,source Json Meta Structure Dictionary Json > Value Json > String Quoted Json > Punctuation,source Json Meta Structure Array Json > Value Json > String Quoted Json > Punctuation", + "scope": [ + "source.json meta.structure.dictionary.json > value.json > string.quoted.json", + "source.json meta.structure.array.json > value.json > string.quoted.json", + "source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation", + "source.json meta.structure.array.json > value.json > string.quoted.json > punctuation" + ], + "settings": { + "foreground": "#98C379" + } + }, + { + "name": "Source Json Meta Structure Dictionary Json > Constant Language Json,source Json Meta Structure Array Json > Constant Language Json", + "scope": [ + "source.json meta.structure.dictionary.json > constant.language.json", + "source.json meta.structure.array.json > constant.language.json" + ], + "settings": { + "foreground": "#56B6C2" + } + }, + { + "name": "Source Ruby Constant Other Symbol > Punctuation", + "scope": ["source.ruby constant.other.symbol > punctuation"], + "settings": { + "foreground": "inherit" + } + }, + { + "name": "Source Python Keyword Operator Logical Python", + "scope": ["source.python keyword.operator.logical.python"], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "Source Python Variable Parameter", + "scope": ["source.python variable.parameter"], + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "Meta Attribute Rust", + "scope": ["meta.attribute.rust"], + "settings": { + "foreground": "#BCC199" + } + }, + { + "name": "Storage Modifier Lifetime Rust,entity Name Lifetime Rust", + "scope": ["storage.modifier.lifetime.rust", "entity.name.lifetime.rust"], + "settings": { + "foreground": "#33E8EC" + } + }, + { + "name": "Keyword Unsafe Rust", + "scope": ["keyword.unsafe.rust"], + "settings": { + "foreground": "#CC6B73" + } + }, + { + "name": "customrule", + "scope": "customrule", + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] Support Type Property Name", + "scope": "support.type.property-name", + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] Punctuation for Quoted String", + "scope": "string.quoted.double punctuation", + "settings": { + "foreground": "#98C379" + } + }, + { + "name": "[VSCODE-CUSTOM] Support Constant", + "scope": "support.constant", + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "[VSCODE-CUSTOM] JSON Property Name", + "scope": "support.type.property-name.json", + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] JSON Punctuation for Property Name", + "scope": "support.type.property-name.json punctuation", + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Punctuation for key-value", + "scope": [ + "punctuation.separator.key-value.ts", + "punctuation.separator.key-value.js", + "punctuation.separator.key-value.tsx" + ], + "settings": { + "foreground": "#56B6C2" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Embedded Operator", + "scope": [ + "source.js.embedded.html keyword.operator", + "source.ts.embedded.html keyword.operator" + ], + "settings": { + "foreground": "#56B6C2" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Variable Other Readwrite", + "scope": [ + "variable.other.readwrite.js", + "variable.other.readwrite.ts", + "variable.other.readwrite.tsx" + ], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Support Variable Dom", + "scope": ["support.variable.dom.js", "support.variable.dom.ts"], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Support Variable Property Dom", + "scope": [ + "support.variable.property.dom.js", + "support.variable.property.dom.ts" + ], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Interpolation String Punctuation", + "scope": [ + "meta.template.expression.js punctuation.definition", + "meta.template.expression.ts punctuation.definition" + ], + "settings": { + "foreground": "#BE5046" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Punctuation Type Parameters", + "scope": [ + "source.ts punctuation.definition.typeparameters", + "source.js punctuation.definition.typeparameters", + "source.tsx punctuation.definition.typeparameters" + ], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Definition Block", + "scope": [ + "source.ts punctuation.definition.block", + "source.js punctuation.definition.block", + "source.tsx punctuation.definition.block" + ], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Punctuation Separator Comma", + "scope": [ + "source.ts punctuation.separator.comma", + "source.js punctuation.separator.comma", + "source.tsx punctuation.separator.comma" + ], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Variable Property", + "scope": [ + "support.variable.property.js", + "support.variable.property.ts", + "support.variable.property.tsx" + ], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Default Keyword", + "scope": [ + "keyword.control.default.js", + "keyword.control.default.ts", + "keyword.control.default.tsx" + ], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Instanceof Keyword", + "scope": [ + "keyword.operator.expression.instanceof.js", + "keyword.operator.expression.instanceof.ts", + "keyword.operator.expression.instanceof.tsx" + ], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Of Keyword", + "scope": [ + "keyword.operator.expression.of.js", + "keyword.operator.expression.of.ts", + "keyword.operator.expression.of.tsx" + ], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Braces/Brackets", + "scope": [ + "meta.brace.round.js", + "meta.array-binding-pattern-variable.js", + "meta.brace.square.js", + "meta.brace.round.ts", + "meta.array-binding-pattern-variable.ts", + "meta.brace.square.ts", + "meta.brace.round.tsx", + "meta.array-binding-pattern-variable.tsx", + "meta.brace.square.tsx" + ], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Punctuation Accessor", + "scope": [ + "source.js punctuation.accessor", + "source.ts punctuation.accessor", + "source.tsx punctuation.accessor" + ], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Punctuation Terminator Statement", + "scope": [ + "punctuation.terminator.statement.js", + "punctuation.terminator.statement.ts", + "punctuation.terminator.statement.tsx" + ], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Array variables", + "scope": [ + "meta.array-binding-pattern-variable.js variable.other.readwrite.js", + "meta.array-binding-pattern-variable.ts variable.other.readwrite.ts", + "meta.array-binding-pattern-variable.tsx variable.other.readwrite.tsx" + ], + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Support Variables", + "scope": [ + "source.js support.variable", + "source.ts support.variable", + "source.tsx support.variable" + ], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Support Variables", + "scope": [ + "variable.other.constant.property.js", + "variable.other.constant.property.ts", + "variable.other.constant.property.tsx" + ], + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Keyword New", + "scope": [ + "keyword.operator.new.ts", + "keyword.operator.new.j", + "keyword.operator.new.tsx" + ], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "[VSCODE-CUSTOM] TS Keyword Operator", + "scope": ["source.ts keyword.operator", "source.tsx keyword.operator"], + "settings": { + "foreground": "#56B6C2" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Punctuation Parameter Separator", + "scope": [ + "punctuation.separator.parameter.js", + "punctuation.separator.parameter.ts", + "punctuation.separator.parameter.tsx " + ], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Import", + "scope": [ + "constant.language.import-export-all.js", + "constant.language.import-export-all.ts" + ], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] JSX/TSX Import", + "scope": [ + "constant.language.import-export-all.jsx", + "constant.language.import-export-all.tsx" + ], + "settings": { + "foreground": "#56B6C2" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Keyword Control As", + "scope": [ + "keyword.control.as.js", + "keyword.control.as.ts", + "keyword.control.as.jsx", + "keyword.control.as.tsx" + ], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Variable Alias", + "scope": [ + "variable.other.readwrite.alias.js", + "variable.other.readwrite.alias.ts", + "variable.other.readwrite.alias.jsx", + "variable.other.readwrite.alias.tsx" + ], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Constants", + "scope": [ + "variable.other.constant.js", + "variable.other.constant.ts", + "variable.other.constant.jsx", + "variable.other.constant.tsx" + ], + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Export Variable", + "scope": [ + "meta.export.default.js variable.other.readwrite.js", + "meta.export.default.ts variable.other.readwrite.ts" + ], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Template Strings Punctuation Accessor", + "scope": [ + "source.js meta.template.expression.js punctuation.accessor", + "source.ts meta.template.expression.ts punctuation.accessor", + "source.tsx meta.template.expression.tsx punctuation.accessor" + ], + "settings": { + "foreground": "#98C379" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Import equals", + "scope": [ + "source.js meta.import-equals.external.js keyword.operator", + "source.jsx meta.import-equals.external.jsx keyword.operator", + "source.ts meta.import-equals.external.ts keyword.operator", + "source.tsx meta.import-equals.external.tsx keyword.operator" + ], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Type Module", + "scope": "entity.name.type.module.js,entity.name.type.module.ts,entity.name.type.module.jsx,entity.name.type.module.tsx", + "settings": { + "foreground": "#98C379" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Meta Class", + "scope": "meta.class.js,meta.class.ts,meta.class.jsx,meta.class.tsx", + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Property Definition Variable", + "scope": [ + "meta.definition.property.js variable", + "meta.definition.property.ts variable", + "meta.definition.property.jsx variable", + "meta.definition.property.tsx variable" + ], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Meta Type Parameters Type", + "scope": [ + "meta.type.parameters.js support.type", + "meta.type.parameters.jsx support.type", + "meta.type.parameters.ts support.type", + "meta.type.parameters.tsx support.type" + ], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Meta Tag Keyword Operator", + "scope": [ + "source.js meta.tag.js keyword.operator", + "source.jsx meta.tag.jsx keyword.operator", + "source.ts meta.tag.ts keyword.operator", + "source.tsx meta.tag.tsx keyword.operator" + ], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Meta Tag Punctuation", + "scope": [ + "meta.tag.js punctuation.section.embedded", + "meta.tag.jsx punctuation.section.embedded", + "meta.tag.ts punctuation.section.embedded", + "meta.tag.tsx punctuation.section.embedded" + ], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Meta Array Literal Variable", + "scope": [ + "meta.array.literal.js variable", + "meta.array.literal.jsx variable", + "meta.array.literal.ts variable", + "meta.array.literal.tsx variable" + ], + "settings": { + "foreground": "#E5C07B" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Module Exports", + "scope": [ + "support.type.object.module.js", + "support.type.object.module.jsx", + "support.type.object.module.ts", + "support.type.object.module.tsx" + ], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] JSON Constants", + "scope": ["constant.language.json"], + "settings": { + "foreground": "#56B6C2" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Object Constants", + "scope": [ + "variable.other.constant.object.js", + "variable.other.constant.object.jsx", + "variable.other.constant.object.ts", + "variable.other.constant.object.tsx" + ], + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Properties Keyword", + "scope": [ + "storage.type.property.js", + "storage.type.property.jsx", + "storage.type.property.ts", + "storage.type.property.tsx" + ], + "settings": { + "foreground": "#56B6C2" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Single Quote Inside Templated String", + "scope": [ + "meta.template.expression.js string.quoted punctuation.definition", + "meta.template.expression.jsx string.quoted punctuation.definition", + "meta.template.expression.ts string.quoted punctuation.definition", + "meta.template.expression.tsx string.quoted punctuation.definition" + ], + "settings": { + "foreground": "#98C379" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Backtick inside Templated String", + "scope": [ + "meta.template.expression.js string.template punctuation.definition.string.template", + "meta.template.expression.jsx string.template punctuation.definition.string.template", + "meta.template.expression.ts string.template punctuation.definition.string.template", + "meta.template.expression.tsx string.template punctuation.definition.string.template" + ], + "settings": { + "foreground": "#98C379" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS In Keyword for Loops", + "scope": [ + "keyword.operator.expression.in.js", + "keyword.operator.expression.in.jsx", + "keyword.operator.expression.in.ts", + "keyword.operator.expression.in.tsx" + ], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "[VSCODE-CUSTOM] Python Constants Other", + "scope": "source.python constant.other", + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] Python Constants", + "scope": "source.python constant", + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "[VSCODE-CUSTOM] Python Placeholder Character", + "scope": "constant.character.format.placeholder.other.python storage", + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "[VSCODE-CUSTOM] Python Magic", + "scope": "support.variable.magic.python", + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] Python Meta Function Parameters", + "scope": "meta.function.parameters.python", + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "[VSCODE-CUSTOM] Python Function Separator Annotation", + "scope": "punctuation.separator.annotation.python", + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] Python Function Separator Punctuation", + "scope": "punctuation.separator.parameters.python", + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] CSharp Fields", + "scope": "entity.name.variable.field.cs", + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] CSharp Keyword Operators", + "scope": "source.cs keyword.operator", + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] CSharp Variables", + "scope": "variable.other.readwrite.cs", + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] CSharp Variables Other", + "scope": "variable.other.object.cs", + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] CSharp Property Other", + "scope": "variable.other.object.property.cs", + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] CSharp Property", + "scope": "entity.name.variable.property.cs", + "settings": { + "foreground": "#61AFEF" + } + }, + { + "name": "[VSCODE-CUSTOM] CSharp Storage Type", + "scope": "storage.type.cs", + "settings": { + "foreground": "#E5C07B" + } + }, + { + "name": "[VSCODE-CUSTOM] Rust Unsafe Keyword", + "scope": "keyword.other.unsafe.rust", + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] Markdown Raw Block", + "scope": "markup.raw.block.markdown", + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] Shell Variables Punctuation Definition", + "scope": "punctuation.definition.variable.shell", + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] Css Support Constant Value", + "scope": "support.constant.property-value.css", + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] Css Punctuation Definition Constant", + "scope": "punctuation.definition.constant.css", + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "[VSCODE-CUSTOM] Sass Punctuation for key-value", + "scope": "punctuation.separator.key-value.scss", + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] Sass Punctuation for constants", + "scope": "punctuation.definition.constant.scss", + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "[VSCODE-CUSTOM] Sass Punctuation for key-value", + "scope": "meta.property-list.scss punctuation.separator.key-value.scss", + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] Java Storage Type Primitive Array", + "scope": "storage.type.primitive.array.java", + "settings": { + "foreground": "#E5C07B" + } + }, + { + "name": "[VSCODE-CUSTOM] Markdown headings", + "scope": "entity.name.section.markdown", + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] Markdown heading Punctuation Definition", + "scope": "punctuation.definition.heading.markdown", + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] Markdown heading setext", + "scope": "markup.heading.setext", + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] Markdown Punctuation Definition Bold", + "scope": "punctuation.definition.bold.markdown", + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "[VSCODE-CUSTOM] Markdown Inline Raw", + "scope": "markup.inline.raw.markdown", + "settings": { + "foreground": "#98C379" + } + }, + { + "name": "[VSCODE-CUSTOM] Markdown List Punctuation Definition", + "scope": "beginning.punctuation.definition.list.markdown", + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] Markdown Quote", + "scope": "markup.quote.markdown", + "settings": { + "foreground": "#5C6370", + "fontStyle": "italic" + } + }, + { + "name": "[VSCODE-CUSTOM] Markdown Punctuation Definition String", + "scope": [ + "punctuation.definition.string.begin.markdown", + "punctuation.definition.string.end.markdown", + "punctuation.definition.metadata.markdown" + ], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] Markdown Punctuation Definition Link", + "scope": "punctuation.definition.metadata.markdown", + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "[VSCODE-CUSTOM] Markdown Underline Link/Image", + "scope": [ + "markup.underline.link.markdown", + "markup.underline.link.image.markdown" + ], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "[VSCODE-CUSTOM] Markdown Link Title/Description", + "scope": [ + "string.other.link.title.markdown", + "string.other.link.description.markdown" + ], + "settings": { + "foreground": "#61AFEF" + } + }, + { + "name": "[VSCODE-CUSTOM] Ruby Punctuation Separator Variable", + "scope": "punctuation.separator.variable.ruby", + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] Ruby Other Constant Variable", + "scope": "variable.other.constant.ruby", + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "[VSCODE-CUSTOM] Ruby Keyword Operator Other", + "scope": "keyword.operator.other.ruby", + "settings": { + "foreground": "#98C379" + } + }, + { + "name": "[VSCODE-CUSTOM] PHP Punctuation Variable Definition", + "scope": "punctuation.definition.variable.php", + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] PHP Meta Class", + "scope": "meta.class.php", + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "scope": "token.info-token", + "settings": { + "foreground": "#6796e6" + } + }, + { + "scope": "token.warn-token", + "settings": { + "foreground": "#cd9731" + } + }, + { + "scope": "token.error-token", + "settings": { + "foreground": "#f44747" + } + }, + { + "scope": "token.debug-token", + "settings": { + "foreground": "#b267e6" + } + } + ] +} diff --git a/packages/common/src/themes/codesandbox-nu.json b/packages/common/src/themes/codesandbox-nu.json new file mode 100644 index 00000000000..6cf1f839ec8 --- /dev/null +++ b/packages/common/src/themes/codesandbox-nu.json @@ -0,0 +1,1558 @@ +{ + "name": "Embed Theme", + "type": "dark", + "colors": { + "editor.background": "#151515", + "sideBar.background": "#151515", + "sideBar.border": "#242424", + "list.hoverBackground": "#242424", + "list.inactiveSelectionBackground": "#242424", + "list.activeSelectionBackground": "#242424", + "editor.selectionBackground": "#242424", + "editorGroup.border": "#242424", + "editorGroupHeader.tabsBackground": "#151515", + "tab.border": "#151515", + "tab.activeBackground": "#151515", + "tab.activeBorder": "#64D2FF", + "tab.inactiveBackground": "#111518", + "input.background": "#242424", + "input.foreground": "#FFFFFF", + + "editorCursor.foreground": "#64D2FF", + "badge.background": "#151515", + "statusBar.background": "#151515", + "scrollbarSlider.background": "#242424", + "scrollbarSlider.activeBackground": "#757575", + "editorHoverWidget.background": "#242424", + "editorHoverWidget.border": "#040404", + "peekViewEditor.background": "#242424", + "focusBorder": "#64D2FF", + + "button.background": "#40A9F3", + "button.hoverBackground": "#66B9F4", + + "activityBar.background": "#f00", + "titleBar.activeBackground": "#f00", + "titleBar.border": "#f00", + "menu.background": "#f00", + "menu.selectionBackground": "#f00", + "menu.selectionForeground": "#f00", + "editorSuggestWidget.background": "#f00", + "editorSuggestWidget.selectedBackground": "#f00", + "editorSuggestWidget.border": "#f00", + "inputOption.activeBorder": "#f00" + }, + "tokenColors": [ + { + "name": "Comment", + "scope": ["comment"], + "settings": { + "foreground": "#5C6370", + "fontStyle": "italic" + } + }, + { + "name": "Comment Markup Link", + "scope": ["comment markup.link"], + "settings": { + "foreground": "#5C6370" + } + }, + { + "name": "Entity Name Type", + "scope": ["entity.name.type"], + "settings": { + "foreground": "#E5C07B" + } + }, + { + "name": "Entity Other Inherited Class", + "scope": ["entity.other.inherited-class"], + "settings": { + "foreground": "#98C379" + } + }, + { + "name": "Keyword", + "scope": ["keyword"], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "Keyword Control", + "scope": ["keyword.control"], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "Keyword Operator", + "scope": ["keyword.operator"], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "Keyword Other Special Method", + "scope": ["keyword.other.special-method"], + "settings": { + "foreground": "#61AFEF" + } + }, + { + "name": "Keyword Other Unit", + "scope": ["keyword.other.unit"], + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "Storage", + "scope": ["storage"], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "Storage Type Annotation,storage Type Primitive", + "scope": ["storage.type.annotation", "storage.type.primitive"], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "Storage Modifier Package,storage Modifier Import", + "scope": ["storage.modifier.package", "storage.modifier.import"], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "Constant", + "scope": ["constant"], + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "Constant Variable", + "scope": ["constant.variable"], + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "Constant Character Escape", + "scope": ["constant.character.escape"], + "settings": { + "foreground": "#56B6C2" + } + }, + { + "name": "Constant Numeric", + "scope": ["constant.numeric"], + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "Constant Other Color", + "scope": ["constant.other.color"], + "settings": { + "foreground": "#56B6C2" + } + }, + { + "name": "Constant Other Symbol", + "scope": ["constant.other.symbol"], + "settings": { + "foreground": "#56B6C2" + } + }, + { + "name": "Variable", + "scope": ["variable"], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "Variable Interpolation", + "scope": ["variable.interpolation"], + "settings": { + "foreground": "#BE5046" + } + }, + { + "name": "Variable Parameter", + "scope": ["variable.parameter"], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "String", + "scope": ["string"], + "settings": { + "foreground": "#98C379" + } + }, + { + "name": "String Regexp", + "scope": ["string.regexp"], + "settings": { + "foreground": "#56B6C2" + } + }, + { + "name": "String Regexp Source Ruby Embedded", + "scope": ["string.regexp source.ruby.embedded"], + "settings": { + "foreground": "#E5C07B" + } + }, + { + "name": "String Other Link", + "scope": ["string.other.link"], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "Punctuation Definition Comment", + "scope": ["punctuation.definition.comment"], + "settings": { + "foreground": "#5C6370" + } + }, + { + "name": "Punctuation Definition Method Parameters,punctuation Definition Function Parameters,punctuation Definition Parameters,punctuation Definition Separator,punctuation Definition Seperator,punctuation Definition Array", + "scope": [ + "punctuation.definition.method-parameters", + "punctuation.definition.function-parameters", + "punctuation.definition.parameters", + "punctuation.definition.separator", + "punctuation.definition.seperator", + "punctuation.definition.array" + ], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "Punctuation Definition Heading,punctuation Definition Identity", + "scope": [ + "punctuation.definition.heading", + "punctuation.definition.identity" + ], + "settings": { + "foreground": "#61AFEF" + } + }, + { + "name": "Punctuation Definition Bold", + "scope": ["punctuation.definition.bold"], + "settings": { + "foreground": "#E5C07B", + "fontStyle": "bold" + } + }, + { + "name": "Punctuation Definition Italic", + "scope": ["punctuation.definition.italic"], + "settings": { + "foreground": "#C678DD", + "fontStyle": "italic" + } + }, + { + "name": "Punctuation Section Embedded", + "scope": ["punctuation.section.embedded"], + "settings": { + "foreground": "#BE5046" + } + }, + { + "name": "Punctuation Section Method,punctuation Section Class,punctuation Section Inner Class", + "scope": [ + "punctuation.section.method", + "punctuation.section.class", + "punctuation.section.inner-class" + ], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "Support Class", + "scope": ["support.class"], + "settings": { + "foreground": "#E5C07B" + } + }, + { + "name": "Support Type", + "scope": ["support.type"], + "settings": { + "foreground": "#56B6C2" + } + }, + { + "name": "Support Function", + "scope": ["support.function"], + "settings": { + "foreground": "#56B6C2" + } + }, + { + "name": "Support Function Any Method", + "scope": ["support.function.any-method"], + "settings": { + "foreground": "#61AFEF" + } + }, + { + "name": "Entity Name Function", + "scope": ["entity.name.function"], + "settings": { + "foreground": "#61AFEF" + } + }, + { + "name": "Entity Name Class,entity Name Type Class", + "scope": ["entity.name.class", "entity.name.type.class"], + "settings": { + "foreground": "#E5C07B" + } + }, + { + "name": "Entity Name Section", + "scope": ["entity.name.section"], + "settings": { + "foreground": "#61AFEF" + } + }, + { + "name": "Entity Name Tag", + "scope": ["entity.name.tag"], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "Entity Other Attribute Name", + "scope": ["entity.other.attribute-name"], + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "Entity Other Attribute Name Id", + "scope": ["entity.other.attribute-name.id"], + "settings": { + "foreground": "#61AFEF" + } + }, + { + "name": "Meta Class", + "scope": ["meta.class"], + "settings": { + "foreground": "#E5C07B" + } + }, + { + "name": "Meta Class Body", + "scope": ["meta.class.body"], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "Meta Method Call,meta Method", + "scope": ["meta.method-call", "meta.method"], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "Meta Definition Variable", + "scope": ["meta.definition.variable"], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "Meta Link", + "scope": ["meta.link"], + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "Meta Require", + "scope": ["meta.require"], + "settings": { + "foreground": "#61AFEF" + } + }, + { + "name": "Meta Selector", + "scope": ["meta.selector"], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "Meta Separator", + "scope": ["meta.separator"], + "settings": { + "background": "#373B41", + "foreground": "#ABB2BF" + } + }, + { + "name": "Meta Tag", + "scope": ["meta.tag"], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "Underline", + "scope": ["underline"], + "settings": { + "text-decoration": "underline" + } + }, + { + "name": "None", + "scope": ["none"], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "Invalid Deprecated", + "scope": ["invalid.deprecated"], + "settings": { + "foreground": "#523D14", + "background": "#E0C285" + } + }, + { + "name": "Invalid Illegal", + "scope": ["invalid.illegal"], + "settings": { + "foreground": "white", + "background": "#E05252" + } + }, + { + "name": "Markup Bold", + "scope": ["markup.bold"], + "settings": { + "foreground": "#D19A66", + "fontStyle": "bold" + } + }, + { + "name": "Markup Changed", + "scope": ["markup.changed"], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "Markup Deleted", + "scope": ["markup.deleted"], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "Markup Italic", + "scope": ["markup.italic"], + "settings": { + "foreground": "#C678DD", + "fontStyle": "italic" + } + }, + { + "name": "Markup Heading", + "scope": ["markup.heading"], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "Markup Heading Punctuation Definition Heading", + "scope": ["markup.heading punctuation.definition.heading"], + "settings": { + "foreground": "#61AFEF" + } + }, + { + "name": "Markup Link", + "scope": ["markup.link"], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "Markup Inserted", + "scope": ["markup.inserted"], + "settings": { + "foreground": "#98C379" + } + }, + { + "name": "Markup Quote", + "scope": ["markup.quote"], + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "Markup Raw", + "scope": ["markup.raw"], + "settings": { + "foreground": "#98C379" + } + }, + { + "name": "Source C Keyword Operator", + "scope": ["source.c keyword.operator"], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "Source Cpp Keyword Operator", + "scope": ["source.cpp keyword.operator"], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "Source Cs Keyword Operator", + "scope": ["source.cs keyword.operator"], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "Source Css Property Name,source Css Property Value", + "scope": ["source.css property-name", "source.css property-value"], + "settings": { + "foreground": "#828997" + } + }, + { + "name": "Source Css Property Name Support,source Css Property Value Support", + "scope": [ + "source.css property-name.support", + "source.css property-value.support" + ], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "Source Gfm Markup", + "scope": ["source.gfm markup"], + "settings": { + "-webkit-font-smoothing": "auto" + } + }, + { + "name": "Source Gfm Link Entity", + "scope": ["source.gfm link entity"], + "settings": { + "foreground": "#61AFEF" + } + }, + { + "name": "Source Go Storage Type String", + "scope": ["source.go storage.type.string"], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "Source Ini Keyword Other Definition Ini", + "scope": ["source.ini keyword.other.definition.ini"], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "Source Java Storage Modifier Import", + "scope": ["source.java storage.modifier.import"], + "settings": { + "foreground": "#E5C07B" + } + }, + { + "name": "Source Java Storage Type", + "scope": ["source.java storage.type"], + "settings": { + "foreground": "#E5C07B" + } + }, + { + "name": "Source Java Keyword Operator Instanceof", + "scope": ["source.java keyword.operator.instanceof"], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "Source Java Properties Meta Key Pair", + "scope": ["source.java-properties meta.key-pair"], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "Source Java Properties Meta Key Pair > Punctuation", + "scope": ["source.java-properties meta.key-pair > punctuation"], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "Source Js Keyword Operator", + "scope": ["source.js keyword.operator"], + "settings": { + "foreground": "#56B6C2" + } + }, + { + "name": "Source Js Keyword Operator Delete,source Js Keyword Operator In,source Js Keyword Operator Of,source Js Keyword Operator Instanceof,source Js Keyword Operator New,source Js Keyword Operator Typeof,source Js Keyword Operator Void", + "scope": [ + "source.js keyword.operator.delete", + "source.js keyword.operator.in", + "source.js keyword.operator.of", + "source.js keyword.operator.instanceof", + "source.js keyword.operator.new", + "source.js keyword.operator.typeof", + "source.js keyword.operator.void" + ], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "Source Json Meta Structure Dictionary Json > String Quoted Json", + "scope": [ + "source.json meta.structure.dictionary.json > string.quoted.json" + ], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "Source Json Meta Structure Dictionary Json > String Quoted Json > Punctuation String", + "scope": [ + "source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string" + ], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "Source Json Meta Structure Dictionary Json > Value Json > String Quoted Json,source Json Meta Structure Array Json > Value Json > String Quoted Json,source Json Meta Structure Dictionary Json > Value Json > String Quoted Json > Punctuation,source Json Meta Structure Array Json > Value Json > String Quoted Json > Punctuation", + "scope": [ + "source.json meta.structure.dictionary.json > value.json > string.quoted.json", + "source.json meta.structure.array.json > value.json > string.quoted.json", + "source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation", + "source.json meta.structure.array.json > value.json > string.quoted.json > punctuation" + ], + "settings": { + "foreground": "#98C379" + } + }, + { + "name": "Source Json Meta Structure Dictionary Json > Constant Language Json,source Json Meta Structure Array Json > Constant Language Json", + "scope": [ + "source.json meta.structure.dictionary.json > constant.language.json", + "source.json meta.structure.array.json > constant.language.json" + ], + "settings": { + "foreground": "#56B6C2" + } + }, + { + "name": "Source Ruby Constant Other Symbol > Punctuation", + "scope": ["source.ruby constant.other.symbol > punctuation"], + "settings": { + "foreground": "inherit" + } + }, + { + "name": "Source Python Keyword Operator Logical Python", + "scope": ["source.python keyword.operator.logical.python"], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "Source Python Variable Parameter", + "scope": ["source.python variable.parameter"], + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "Meta Attribute Rust", + "scope": ["meta.attribute.rust"], + "settings": { + "foreground": "#BCC199" + } + }, + { + "name": "Storage Modifier Lifetime Rust,entity Name Lifetime Rust", + "scope": ["storage.modifier.lifetime.rust", "entity.name.lifetime.rust"], + "settings": { + "foreground": "#33E8EC" + } + }, + { + "name": "Keyword Unsafe Rust", + "scope": ["keyword.unsafe.rust"], + "settings": { + "foreground": "#CC6B73" + } + }, + { + "name": "customrule", + "scope": "customrule", + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] Support Type Property Name", + "scope": "support.type.property-name", + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] Punctuation for Quoted String", + "scope": "string.quoted.double punctuation", + "settings": { + "foreground": "#98C379" + } + }, + { + "name": "[VSCODE-CUSTOM] Support Constant", + "scope": "support.constant", + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "[VSCODE-CUSTOM] JSON Property Name", + "scope": "support.type.property-name.json", + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] JSON Punctuation for Property Name", + "scope": "support.type.property-name.json punctuation", + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Punctuation for key-value", + "scope": [ + "punctuation.separator.key-value.ts", + "punctuation.separator.key-value.js", + "punctuation.separator.key-value.tsx" + ], + "settings": { + "foreground": "#56B6C2" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Embedded Operator", + "scope": [ + "source.js.embedded.html keyword.operator", + "source.ts.embedded.html keyword.operator" + ], + "settings": { + "foreground": "#56B6C2" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Variable Other Readwrite", + "scope": [ + "variable.other.readwrite.js", + "variable.other.readwrite.ts", + "variable.other.readwrite.tsx" + ], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Support Variable Dom", + "scope": ["support.variable.dom.js", "support.variable.dom.ts"], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Support Variable Property Dom", + "scope": [ + "support.variable.property.dom.js", + "support.variable.property.dom.ts" + ], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Interpolation String Punctuation", + "scope": [ + "meta.template.expression.js punctuation.definition", + "meta.template.expression.ts punctuation.definition" + ], + "settings": { + "foreground": "#BE5046" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Punctuation Type Parameters", + "scope": [ + "source.ts punctuation.definition.typeparameters", + "source.js punctuation.definition.typeparameters", + "source.tsx punctuation.definition.typeparameters" + ], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Definition Block", + "scope": [ + "source.ts punctuation.definition.block", + "source.js punctuation.definition.block", + "source.tsx punctuation.definition.block" + ], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Punctuation Separator Comma", + "scope": [ + "source.ts punctuation.separator.comma", + "source.js punctuation.separator.comma", + "source.tsx punctuation.separator.comma" + ], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Variable Property", + "scope": [ + "support.variable.property.js", + "support.variable.property.ts", + "support.variable.property.tsx" + ], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Default Keyword", + "scope": [ + "keyword.control.default.js", + "keyword.control.default.ts", + "keyword.control.default.tsx" + ], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Instanceof Keyword", + "scope": [ + "keyword.operator.expression.instanceof.js", + "keyword.operator.expression.instanceof.ts", + "keyword.operator.expression.instanceof.tsx" + ], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Of Keyword", + "scope": [ + "keyword.operator.expression.of.js", + "keyword.operator.expression.of.ts", + "keyword.operator.expression.of.tsx" + ], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Braces/Brackets", + "scope": [ + "meta.brace.round.js", + "meta.array-binding-pattern-variable.js", + "meta.brace.square.js", + "meta.brace.round.ts", + "meta.array-binding-pattern-variable.ts", + "meta.brace.square.ts", + "meta.brace.round.tsx", + "meta.array-binding-pattern-variable.tsx", + "meta.brace.square.tsx" + ], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Punctuation Accessor", + "scope": [ + "source.js punctuation.accessor", + "source.ts punctuation.accessor", + "source.tsx punctuation.accessor" + ], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Punctuation Terminator Statement", + "scope": [ + "punctuation.terminator.statement.js", + "punctuation.terminator.statement.ts", + "punctuation.terminator.statement.tsx" + ], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Array variables", + "scope": [ + "meta.array-binding-pattern-variable.js variable.other.readwrite.js", + "meta.array-binding-pattern-variable.ts variable.other.readwrite.ts", + "meta.array-binding-pattern-variable.tsx variable.other.readwrite.tsx" + ], + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Support Variables", + "scope": [ + "source.js support.variable", + "source.ts support.variable", + "source.tsx support.variable" + ], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Support Variables", + "scope": [ + "variable.other.constant.property.js", + "variable.other.constant.property.ts", + "variable.other.constant.property.tsx" + ], + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Keyword New", + "scope": [ + "keyword.operator.new.ts", + "keyword.operator.new.j", + "keyword.operator.new.tsx" + ], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "[VSCODE-CUSTOM] TS Keyword Operator", + "scope": ["source.ts keyword.operator", "source.tsx keyword.operator"], + "settings": { + "foreground": "#56B6C2" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Punctuation Parameter Separator", + "scope": [ + "punctuation.separator.parameter.js", + "punctuation.separator.parameter.ts", + "punctuation.separator.parameter.tsx " + ], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Import", + "scope": [ + "constant.language.import-export-all.js", + "constant.language.import-export-all.ts" + ], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] JSX/TSX Import", + "scope": [ + "constant.language.import-export-all.jsx", + "constant.language.import-export-all.tsx" + ], + "settings": { + "foreground": "#56B6C2" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Keyword Control As", + "scope": [ + "keyword.control.as.js", + "keyword.control.as.ts", + "keyword.control.as.jsx", + "keyword.control.as.tsx" + ], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Variable Alias", + "scope": [ + "variable.other.readwrite.alias.js", + "variable.other.readwrite.alias.ts", + "variable.other.readwrite.alias.jsx", + "variable.other.readwrite.alias.tsx" + ], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Constants", + "scope": [ + "variable.other.constant.js", + "variable.other.constant.ts", + "variable.other.constant.jsx", + "variable.other.constant.tsx" + ], + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Export Variable", + "scope": [ + "meta.export.default.js variable.other.readwrite.js", + "meta.export.default.ts variable.other.readwrite.ts" + ], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Template Strings Punctuation Accessor", + "scope": [ + "source.js meta.template.expression.js punctuation.accessor", + "source.ts meta.template.expression.ts punctuation.accessor", + "source.tsx meta.template.expression.tsx punctuation.accessor" + ], + "settings": { + "foreground": "#98C379" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Import equals", + "scope": [ + "source.js meta.import-equals.external.js keyword.operator", + "source.jsx meta.import-equals.external.jsx keyword.operator", + "source.ts meta.import-equals.external.ts keyword.operator", + "source.tsx meta.import-equals.external.tsx keyword.operator" + ], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Type Module", + "scope": "entity.name.type.module.js,entity.name.type.module.ts,entity.name.type.module.jsx,entity.name.type.module.tsx", + "settings": { + "foreground": "#98C379" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Meta Class", + "scope": "meta.class.js,meta.class.ts,meta.class.jsx,meta.class.tsx", + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Property Definition Variable", + "scope": [ + "meta.definition.property.js variable", + "meta.definition.property.ts variable", + "meta.definition.property.jsx variable", + "meta.definition.property.tsx variable" + ], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Meta Type Parameters Type", + "scope": [ + "meta.type.parameters.js support.type", + "meta.type.parameters.jsx support.type", + "meta.type.parameters.ts support.type", + "meta.type.parameters.tsx support.type" + ], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Meta Tag Keyword Operator", + "scope": [ + "source.js meta.tag.js keyword.operator", + "source.jsx meta.tag.jsx keyword.operator", + "source.ts meta.tag.ts keyword.operator", + "source.tsx meta.tag.tsx keyword.operator" + ], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Meta Tag Punctuation", + "scope": [ + "meta.tag.js punctuation.section.embedded", + "meta.tag.jsx punctuation.section.embedded", + "meta.tag.ts punctuation.section.embedded", + "meta.tag.tsx punctuation.section.embedded" + ], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Meta Array Literal Variable", + "scope": [ + "meta.array.literal.js variable", + "meta.array.literal.jsx variable", + "meta.array.literal.ts variable", + "meta.array.literal.tsx variable" + ], + "settings": { + "foreground": "#E5C07B" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Module Exports", + "scope": [ + "support.type.object.module.js", + "support.type.object.module.jsx", + "support.type.object.module.ts", + "support.type.object.module.tsx" + ], + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] JSON Constants", + "scope": ["constant.language.json"], + "settings": { + "foreground": "#56B6C2" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Object Constants", + "scope": [ + "variable.other.constant.object.js", + "variable.other.constant.object.jsx", + "variable.other.constant.object.ts", + "variable.other.constant.object.tsx" + ], + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Properties Keyword", + "scope": [ + "storage.type.property.js", + "storage.type.property.jsx", + "storage.type.property.ts", + "storage.type.property.tsx" + ], + "settings": { + "foreground": "#56B6C2" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Single Quote Inside Templated String", + "scope": [ + "meta.template.expression.js string.quoted punctuation.definition", + "meta.template.expression.jsx string.quoted punctuation.definition", + "meta.template.expression.ts string.quoted punctuation.definition", + "meta.template.expression.tsx string.quoted punctuation.definition" + ], + "settings": { + "foreground": "#98C379" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS Backtick inside Templated String", + "scope": [ + "meta.template.expression.js string.template punctuation.definition.string.template", + "meta.template.expression.jsx string.template punctuation.definition.string.template", + "meta.template.expression.ts string.template punctuation.definition.string.template", + "meta.template.expression.tsx string.template punctuation.definition.string.template" + ], + "settings": { + "foreground": "#98C379" + } + }, + { + "name": "[VSCODE-CUSTOM] JS/TS In Keyword for Loops", + "scope": [ + "keyword.operator.expression.in.js", + "keyword.operator.expression.in.jsx", + "keyword.operator.expression.in.ts", + "keyword.operator.expression.in.tsx" + ], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "[VSCODE-CUSTOM] Python Constants Other", + "scope": "source.python constant.other", + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] Python Constants", + "scope": "source.python constant", + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "[VSCODE-CUSTOM] Python Placeholder Character", + "scope": "constant.character.format.placeholder.other.python storage", + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "[VSCODE-CUSTOM] Python Magic", + "scope": "support.variable.magic.python", + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] Python Meta Function Parameters", + "scope": "meta.function.parameters.python", + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "[VSCODE-CUSTOM] Python Function Separator Annotation", + "scope": "punctuation.separator.annotation.python", + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] Python Function Separator Punctuation", + "scope": "punctuation.separator.parameters.python", + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] CSharp Fields", + "scope": "entity.name.variable.field.cs", + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] CSharp Keyword Operators", + "scope": "source.cs keyword.operator", + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] CSharp Variables", + "scope": "variable.other.readwrite.cs", + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] CSharp Variables Other", + "scope": "variable.other.object.cs", + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] CSharp Property Other", + "scope": "variable.other.object.property.cs", + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] CSharp Property", + "scope": "entity.name.variable.property.cs", + "settings": { + "foreground": "#61AFEF" + } + }, + { + "name": "[VSCODE-CUSTOM] CSharp Storage Type", + "scope": "storage.type.cs", + "settings": { + "foreground": "#E5C07B" + } + }, + { + "name": "[VSCODE-CUSTOM] Rust Unsafe Keyword", + "scope": "keyword.other.unsafe.rust", + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] Markdown Raw Block", + "scope": "markup.raw.block.markdown", + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] Shell Variables Punctuation Definition", + "scope": "punctuation.definition.variable.shell", + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] Css Support Constant Value", + "scope": "support.constant.property-value.css", + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] Css Punctuation Definition Constant", + "scope": "punctuation.definition.constant.css", + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "[VSCODE-CUSTOM] Sass Punctuation for key-value", + "scope": "punctuation.separator.key-value.scss", + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] Sass Punctuation for constants", + "scope": "punctuation.definition.constant.scss", + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "[VSCODE-CUSTOM] Sass Punctuation for key-value", + "scope": "meta.property-list.scss punctuation.separator.key-value.scss", + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] Java Storage Type Primitive Array", + "scope": "storage.type.primitive.array.java", + "settings": { + "foreground": "#E5C07B" + } + }, + { + "name": "[VSCODE-CUSTOM] Markdown headings", + "scope": "entity.name.section.markdown", + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] Markdown heading Punctuation Definition", + "scope": "punctuation.definition.heading.markdown", + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] Markdown heading setext", + "scope": "markup.heading.setext", + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] Markdown Punctuation Definition Bold", + "scope": "punctuation.definition.bold.markdown", + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "[VSCODE-CUSTOM] Markdown Inline Raw", + "scope": "markup.inline.raw.markdown", + "settings": { + "foreground": "#98C379" + } + }, + { + "name": "[VSCODE-CUSTOM] Markdown List Punctuation Definition", + "scope": "beginning.punctuation.definition.list.markdown", + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] Markdown Quote", + "scope": "markup.quote.markdown", + "settings": { + "foreground": "#5C6370", + "fontStyle": "italic" + } + }, + { + "name": "[VSCODE-CUSTOM] Markdown Punctuation Definition String", + "scope": [ + "punctuation.definition.string.begin.markdown", + "punctuation.definition.string.end.markdown", + "punctuation.definition.metadata.markdown" + ], + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "name": "[VSCODE-CUSTOM] Markdown Punctuation Definition Link", + "scope": "punctuation.definition.metadata.markdown", + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "[VSCODE-CUSTOM] Markdown Underline Link/Image", + "scope": [ + "markup.underline.link.markdown", + "markup.underline.link.image.markdown" + ], + "settings": { + "foreground": "#C678DD" + } + }, + { + "name": "[VSCODE-CUSTOM] Markdown Link Title/Description", + "scope": [ + "string.other.link.title.markdown", + "string.other.link.description.markdown" + ], + "settings": { + "foreground": "#61AFEF" + } + }, + { + "name": "[VSCODE-CUSTOM] Ruby Punctuation Separator Variable", + "scope": "punctuation.separator.variable.ruby", + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] Ruby Other Constant Variable", + "scope": "variable.other.constant.ruby", + "settings": { + "foreground": "#D19A66" + } + }, + { + "name": "[VSCODE-CUSTOM] Ruby Keyword Operator Other", + "scope": "keyword.operator.other.ruby", + "settings": { + "foreground": "#98C379" + } + }, + { + "name": "[VSCODE-CUSTOM] PHP Punctuation Variable Definition", + "scope": "punctuation.definition.variable.php", + "settings": { + "foreground": "#E06C75" + } + }, + { + "name": "[VSCODE-CUSTOM] PHP Meta Class", + "scope": "meta.class.php", + "settings": { + "foreground": "#ABB2BF" + } + }, + { + "scope": "token.info-token", + "settings": { + "foreground": "#6796e6" + } + }, + { + "scope": "token.warn-token", + "settings": { + "foreground": "#cd9731" + } + }, + { + "scope": "token.error-token", + "settings": { + "foreground": "#f44747" + } + }, + { + "scope": "token.debug-token", + "settings": { + "foreground": "#b267e6" + } + } + ] +} diff --git a/packages/common/src/themes/index.ts b/packages/common/src/themes/index.ts index c07bc4c8a3f..2fc98e0018b 100644 --- a/packages/common/src/themes/index.ts +++ b/packages/common/src/themes/index.ts @@ -1,4 +1,5 @@ import codesandbox from './codesandbox.json'; +import codesandboxNu from './codesandbox-nu.json'; export default [ { @@ -6,6 +7,11 @@ export default [ id: 'codesandbox', content: codesandbox, }, + { + name: 'CodeSandbox Nu', + id: 'codesandboxNu', + content: codesandboxNu, + }, { name: 'Night Owl', id: 'nightOwl', diff --git a/yarn.lock b/yarn.lock index 66222a2fa7b..c03cfd459c7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1144,7 +1144,7 @@ exec-sh "^0.3.2" minimist "^1.2.0" -"@codesandbox/template-icons@^1.0.1", "@codesandbox/template-icons@^1.01": +"@codesandbox/template-icons@^1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@codesandbox/template-icons/-/template-icons-1.0.1.tgz#c29068ce93d7d1db8dfbf0c82d618ee7192d9fb8" integrity sha512-o7Zgw88GoV/xogZ56rwXFohIYoYsB2UiKERC49Y1yuwV6SFAshPLdUBx9GX6HAHLUQg5R0pOoRrSeEsan+dHEw== From 0677eb6b02529e3a23b51823453fc85ff2c550e0 Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Mon, 7 Oct 2019 14:58:16 +0200 Subject: [PATCH 02/13] remove dead code --- packages/app/src/embed/theme/theme.js | 37 - packages/app/src/embed/theme/vscode.json | 1557 ---------------------- 2 files changed, 1594 deletions(-) delete mode 100644 packages/app/src/embed/theme/theme.js delete mode 100644 packages/app/src/embed/theme/vscode.json diff --git a/packages/app/src/embed/theme/theme.js b/packages/app/src/embed/theme/theme.js deleted file mode 100644 index c9b3d07d4aa..00000000000 --- a/packages/app/src/embed/theme/theme.js +++ /dev/null @@ -1,37 +0,0 @@ -// this theme follows the System UI Theme Specification -// Ref: https://system-ui.com/theme - -const colors = { - white: '#fff', - grays: { - 100: '#fff9f9', // found this lingering around - 200: '#e6e6e6', // danny's gray-0 - 300: '#999999', // danny's gray-1 - 400: '#757575', // danny's gray-2 - 500: '#242424', // danny's dark-3 - 600: 'pink', // doesn't exist yet - 700: '#151515', // danny's dark-2 - 800: '#040404', // danny's dark-1 - 900: '#111111', // danny's dark-0 - }, - blues: { - 300: '#6CC7F6', // danny's teal - 600: '#0971f1', // danny's blue - }, -}; - -const theme = { - colors, - space: [0, 4, 8, 16, 32], - fontSizes: [0, 12, 13, 14, 16, 20, 24, 32], - - shadows: { - // this part is ugly, this can be improved. - // bonus: these are terrible names - active: `inset 0px -2px 0px ${colors.blues[300]}`, - underline: `inset 0px -2px 0px ${colors.grays[100] + '1a'}`, - fadeunder: `inset 0px 8px 8px 0px ${colors.grays[700] + 'cc'}`, - }, -}; - -export default theme; diff --git a/packages/app/src/embed/theme/vscode.json b/packages/app/src/embed/theme/vscode.json deleted file mode 100644 index bfdfdf1e5b1..00000000000 --- a/packages/app/src/embed/theme/vscode.json +++ /dev/null @@ -1,1557 +0,0 @@ -{ - "name": "Embed Theme", - "type": "dark", - "colors": { - "editor.background": "#151515", - "sideBar.background": "#151515", - "sideBar.border": "#242424", - "list.hoverBackground": "#242424", - "list.inactiveSelectionBackground": "#242424", - "list.activeSelectionBackground": "#242424", - "editor.selectionBackground": "#242424", - "editorGroup.border": "#242424", - "editorGroupHeader.tabsBackground": "#151515", - "tab.border": "#151515", - "tab.activeBackground": "#151515", - "tab.activeBorder": "#64D2FF", - "tab.inactiveBackground": "#111518", - "input.background": "#242424", - "input.foreground": "#FFFFFF", - - "editorCursor.foreground": "#64D2FF", - "badge.background": "#151515", - "statusBar.background": "#151515", - "scrollbarSlider.background": "#242424", - "scrollbarSlider.activeBackground": "#757575", - "editorHoverWidget.background": "#242424", - "editorHoverWidget.border": "#040404", - "peekViewEditor.background": "#242424", - "focusBorder": "#64D2FF", - "button.background": "#0971F1", - "button.hoverBackground": "#368cf7", - - "activityBar.background": "#f00", - "titleBar.activeBackground": "#f00", - "titleBar.border": "#f00", - "menu.background": "#f00", - "menu.selectionBackground": "#f00", - "menu.selectionForeground": "#f00", - "editorSuggestWidget.background": "#f00", - "editorSuggestWidget.selectedBackground": "#f00", - "editorSuggestWidget.border": "#f00", - "inputOption.activeBorder": "#f00" - }, - "tokenColors": [ - { - "name": "Comment", - "scope": ["comment"], - "settings": { - "foreground": "#5C6370", - "fontStyle": "italic" - } - }, - { - "name": "Comment Markup Link", - "scope": ["comment markup.link"], - "settings": { - "foreground": "#5C6370" - } - }, - { - "name": "Entity Name Type", - "scope": ["entity.name.type"], - "settings": { - "foreground": "#E5C07B" - } - }, - { - "name": "Entity Other Inherited Class", - "scope": ["entity.other.inherited-class"], - "settings": { - "foreground": "#98C379" - } - }, - { - "name": "Keyword", - "scope": ["keyword"], - "settings": { - "foreground": "#C678DD" - } - }, - { - "name": "Keyword Control", - "scope": ["keyword.control"], - "settings": { - "foreground": "#C678DD" - } - }, - { - "name": "Keyword Operator", - "scope": ["keyword.operator"], - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "Keyword Other Special Method", - "scope": ["keyword.other.special-method"], - "settings": { - "foreground": "#61AFEF" - } - }, - { - "name": "Keyword Other Unit", - "scope": ["keyword.other.unit"], - "settings": { - "foreground": "#D19A66" - } - }, - { - "name": "Storage", - "scope": ["storage"], - "settings": { - "foreground": "#C678DD" - } - }, - { - "name": "Storage Type Annotation,storage Type Primitive", - "scope": ["storage.type.annotation", "storage.type.primitive"], - "settings": { - "foreground": "#C678DD" - } - }, - { - "name": "Storage Modifier Package,storage Modifier Import", - "scope": ["storage.modifier.package", "storage.modifier.import"], - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "Constant", - "scope": ["constant"], - "settings": { - "foreground": "#D19A66" - } - }, - { - "name": "Constant Variable", - "scope": ["constant.variable"], - "settings": { - "foreground": "#D19A66" - } - }, - { - "name": "Constant Character Escape", - "scope": ["constant.character.escape"], - "settings": { - "foreground": "#56B6C2" - } - }, - { - "name": "Constant Numeric", - "scope": ["constant.numeric"], - "settings": { - "foreground": "#D19A66" - } - }, - { - "name": "Constant Other Color", - "scope": ["constant.other.color"], - "settings": { - "foreground": "#56B6C2" - } - }, - { - "name": "Constant Other Symbol", - "scope": ["constant.other.symbol"], - "settings": { - "foreground": "#56B6C2" - } - }, - { - "name": "Variable", - "scope": ["variable"], - "settings": { - "foreground": "#E06C75" - } - }, - { - "name": "Variable Interpolation", - "scope": ["variable.interpolation"], - "settings": { - "foreground": "#BE5046" - } - }, - { - "name": "Variable Parameter", - "scope": ["variable.parameter"], - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "String", - "scope": ["string"], - "settings": { - "foreground": "#98C379" - } - }, - { - "name": "String Regexp", - "scope": ["string.regexp"], - "settings": { - "foreground": "#56B6C2" - } - }, - { - "name": "String Regexp Source Ruby Embedded", - "scope": ["string.regexp source.ruby.embedded"], - "settings": { - "foreground": "#E5C07B" - } - }, - { - "name": "String Other Link", - "scope": ["string.other.link"], - "settings": { - "foreground": "#E06C75" - } - }, - { - "name": "Punctuation Definition Comment", - "scope": ["punctuation.definition.comment"], - "settings": { - "foreground": "#5C6370" - } - }, - { - "name": "Punctuation Definition Method Parameters,punctuation Definition Function Parameters,punctuation Definition Parameters,punctuation Definition Separator,punctuation Definition Seperator,punctuation Definition Array", - "scope": [ - "punctuation.definition.method-parameters", - "punctuation.definition.function-parameters", - "punctuation.definition.parameters", - "punctuation.definition.separator", - "punctuation.definition.seperator", - "punctuation.definition.array" - ], - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "Punctuation Definition Heading,punctuation Definition Identity", - "scope": [ - "punctuation.definition.heading", - "punctuation.definition.identity" - ], - "settings": { - "foreground": "#61AFEF" - } - }, - { - "name": "Punctuation Definition Bold", - "scope": ["punctuation.definition.bold"], - "settings": { - "foreground": "#E5C07B", - "fontStyle": "bold" - } - }, - { - "name": "Punctuation Definition Italic", - "scope": ["punctuation.definition.italic"], - "settings": { - "foreground": "#C678DD", - "fontStyle": "italic" - } - }, - { - "name": "Punctuation Section Embedded", - "scope": ["punctuation.section.embedded"], - "settings": { - "foreground": "#BE5046" - } - }, - { - "name": "Punctuation Section Method,punctuation Section Class,punctuation Section Inner Class", - "scope": [ - "punctuation.section.method", - "punctuation.section.class", - "punctuation.section.inner-class" - ], - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "Support Class", - "scope": ["support.class"], - "settings": { - "foreground": "#E5C07B" - } - }, - { - "name": "Support Type", - "scope": ["support.type"], - "settings": { - "foreground": "#56B6C2" - } - }, - { - "name": "Support Function", - "scope": ["support.function"], - "settings": { - "foreground": "#56B6C2" - } - }, - { - "name": "Support Function Any Method", - "scope": ["support.function.any-method"], - "settings": { - "foreground": "#61AFEF" - } - }, - { - "name": "Entity Name Function", - "scope": ["entity.name.function"], - "settings": { - "foreground": "#61AFEF" - } - }, - { - "name": "Entity Name Class,entity Name Type Class", - "scope": ["entity.name.class", "entity.name.type.class"], - "settings": { - "foreground": "#E5C07B" - } - }, - { - "name": "Entity Name Section", - "scope": ["entity.name.section"], - "settings": { - "foreground": "#61AFEF" - } - }, - { - "name": "Entity Name Tag", - "scope": ["entity.name.tag"], - "settings": { - "foreground": "#E06C75" - } - }, - { - "name": "Entity Other Attribute Name", - "scope": ["entity.other.attribute-name"], - "settings": { - "foreground": "#D19A66" - } - }, - { - "name": "Entity Other Attribute Name Id", - "scope": ["entity.other.attribute-name.id"], - "settings": { - "foreground": "#61AFEF" - } - }, - { - "name": "Meta Class", - "scope": ["meta.class"], - "settings": { - "foreground": "#E5C07B" - } - }, - { - "name": "Meta Class Body", - "scope": ["meta.class.body"], - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "Meta Method Call,meta Method", - "scope": ["meta.method-call", "meta.method"], - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "Meta Definition Variable", - "scope": ["meta.definition.variable"], - "settings": { - "foreground": "#E06C75" - } - }, - { - "name": "Meta Link", - "scope": ["meta.link"], - "settings": { - "foreground": "#D19A66" - } - }, - { - "name": "Meta Require", - "scope": ["meta.require"], - "settings": { - "foreground": "#61AFEF" - } - }, - { - "name": "Meta Selector", - "scope": ["meta.selector"], - "settings": { - "foreground": "#C678DD" - } - }, - { - "name": "Meta Separator", - "scope": ["meta.separator"], - "settings": { - "background": "#373B41", - "foreground": "#ABB2BF" - } - }, - { - "name": "Meta Tag", - "scope": ["meta.tag"], - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "Underline", - "scope": ["underline"], - "settings": { - "text-decoration": "underline" - } - }, - { - "name": "None", - "scope": ["none"], - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "Invalid Deprecated", - "scope": ["invalid.deprecated"], - "settings": { - "foreground": "#523D14", - "background": "#E0C285" - } - }, - { - "name": "Invalid Illegal", - "scope": ["invalid.illegal"], - "settings": { - "foreground": "white", - "background": "#E05252" - } - }, - { - "name": "Markup Bold", - "scope": ["markup.bold"], - "settings": { - "foreground": "#D19A66", - "fontStyle": "bold" - } - }, - { - "name": "Markup Changed", - "scope": ["markup.changed"], - "settings": { - "foreground": "#C678DD" - } - }, - { - "name": "Markup Deleted", - "scope": ["markup.deleted"], - "settings": { - "foreground": "#E06C75" - } - }, - { - "name": "Markup Italic", - "scope": ["markup.italic"], - "settings": { - "foreground": "#C678DD", - "fontStyle": "italic" - } - }, - { - "name": "Markup Heading", - "scope": ["markup.heading"], - "settings": { - "foreground": "#E06C75" - } - }, - { - "name": "Markup Heading Punctuation Definition Heading", - "scope": ["markup.heading punctuation.definition.heading"], - "settings": { - "foreground": "#61AFEF" - } - }, - { - "name": "Markup Link", - "scope": ["markup.link"], - "settings": { - "foreground": "#C678DD" - } - }, - { - "name": "Markup Inserted", - "scope": ["markup.inserted"], - "settings": { - "foreground": "#98C379" - } - }, - { - "name": "Markup Quote", - "scope": ["markup.quote"], - "settings": { - "foreground": "#D19A66" - } - }, - { - "name": "Markup Raw", - "scope": ["markup.raw"], - "settings": { - "foreground": "#98C379" - } - }, - { - "name": "Source C Keyword Operator", - "scope": ["source.c keyword.operator"], - "settings": { - "foreground": "#C678DD" - } - }, - { - "name": "Source Cpp Keyword Operator", - "scope": ["source.cpp keyword.operator"], - "settings": { - "foreground": "#C678DD" - } - }, - { - "name": "Source Cs Keyword Operator", - "scope": ["source.cs keyword.operator"], - "settings": { - "foreground": "#C678DD" - } - }, - { - "name": "Source Css Property Name,source Css Property Value", - "scope": ["source.css property-name", "source.css property-value"], - "settings": { - "foreground": "#828997" - } - }, - { - "name": "Source Css Property Name Support,source Css Property Value Support", - "scope": [ - "source.css property-name.support", - "source.css property-value.support" - ], - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "Source Gfm Markup", - "scope": ["source.gfm markup"], - "settings": { - "-webkit-font-smoothing": "auto" - } - }, - { - "name": "Source Gfm Link Entity", - "scope": ["source.gfm link entity"], - "settings": { - "foreground": "#61AFEF" - } - }, - { - "name": "Source Go Storage Type String", - "scope": ["source.go storage.type.string"], - "settings": { - "foreground": "#C678DD" - } - }, - { - "name": "Source Ini Keyword Other Definition Ini", - "scope": ["source.ini keyword.other.definition.ini"], - "settings": { - "foreground": "#E06C75" - } - }, - { - "name": "Source Java Storage Modifier Import", - "scope": ["source.java storage.modifier.import"], - "settings": { - "foreground": "#E5C07B" - } - }, - { - "name": "Source Java Storage Type", - "scope": ["source.java storage.type"], - "settings": { - "foreground": "#E5C07B" - } - }, - { - "name": "Source Java Keyword Operator Instanceof", - "scope": ["source.java keyword.operator.instanceof"], - "settings": { - "foreground": "#C678DD" - } - }, - { - "name": "Source Java Properties Meta Key Pair", - "scope": ["source.java-properties meta.key-pair"], - "settings": { - "foreground": "#E06C75" - } - }, - { - "name": "Source Java Properties Meta Key Pair > Punctuation", - "scope": ["source.java-properties meta.key-pair > punctuation"], - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "Source Js Keyword Operator", - "scope": ["source.js keyword.operator"], - "settings": { - "foreground": "#56B6C2" - } - }, - { - "name": "Source Js Keyword Operator Delete,source Js Keyword Operator In,source Js Keyword Operator Of,source Js Keyword Operator Instanceof,source Js Keyword Operator New,source Js Keyword Operator Typeof,source Js Keyword Operator Void", - "scope": [ - "source.js keyword.operator.delete", - "source.js keyword.operator.in", - "source.js keyword.operator.of", - "source.js keyword.operator.instanceof", - "source.js keyword.operator.new", - "source.js keyword.operator.typeof", - "source.js keyword.operator.void" - ], - "settings": { - "foreground": "#C678DD" - } - }, - { - "name": "Source Json Meta Structure Dictionary Json > String Quoted Json", - "scope": [ - "source.json meta.structure.dictionary.json > string.quoted.json" - ], - "settings": { - "foreground": "#E06C75" - } - }, - { - "name": "Source Json Meta Structure Dictionary Json > String Quoted Json > Punctuation String", - "scope": [ - "source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string" - ], - "settings": { - "foreground": "#E06C75" - } - }, - { - "name": "Source Json Meta Structure Dictionary Json > Value Json > String Quoted Json,source Json Meta Structure Array Json > Value Json > String Quoted Json,source Json Meta Structure Dictionary Json > Value Json > String Quoted Json > Punctuation,source Json Meta Structure Array Json > Value Json > String Quoted Json > Punctuation", - "scope": [ - "source.json meta.structure.dictionary.json > value.json > string.quoted.json", - "source.json meta.structure.array.json > value.json > string.quoted.json", - "source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation", - "source.json meta.structure.array.json > value.json > string.quoted.json > punctuation" - ], - "settings": { - "foreground": "#98C379" - } - }, - { - "name": "Source Json Meta Structure Dictionary Json > Constant Language Json,source Json Meta Structure Array Json > Constant Language Json", - "scope": [ - "source.json meta.structure.dictionary.json > constant.language.json", - "source.json meta.structure.array.json > constant.language.json" - ], - "settings": { - "foreground": "#56B6C2" - } - }, - { - "name": "Source Ruby Constant Other Symbol > Punctuation", - "scope": ["source.ruby constant.other.symbol > punctuation"], - "settings": { - "foreground": "inherit" - } - }, - { - "name": "Source Python Keyword Operator Logical Python", - "scope": ["source.python keyword.operator.logical.python"], - "settings": { - "foreground": "#C678DD" - } - }, - { - "name": "Source Python Variable Parameter", - "scope": ["source.python variable.parameter"], - "settings": { - "foreground": "#D19A66" - } - }, - { - "name": "Meta Attribute Rust", - "scope": ["meta.attribute.rust"], - "settings": { - "foreground": "#BCC199" - } - }, - { - "name": "Storage Modifier Lifetime Rust,entity Name Lifetime Rust", - "scope": ["storage.modifier.lifetime.rust", "entity.name.lifetime.rust"], - "settings": { - "foreground": "#33E8EC" - } - }, - { - "name": "Keyword Unsafe Rust", - "scope": ["keyword.unsafe.rust"], - "settings": { - "foreground": "#CC6B73" - } - }, - { - "name": "customrule", - "scope": "customrule", - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "[VSCODE-CUSTOM] Support Type Property Name", - "scope": "support.type.property-name", - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "[VSCODE-CUSTOM] Punctuation for Quoted String", - "scope": "string.quoted.double punctuation", - "settings": { - "foreground": "#98C379" - } - }, - { - "name": "[VSCODE-CUSTOM] Support Constant", - "scope": "support.constant", - "settings": { - "foreground": "#D19A66" - } - }, - { - "name": "[VSCODE-CUSTOM] JSON Property Name", - "scope": "support.type.property-name.json", - "settings": { - "foreground": "#E06C75" - } - }, - { - "name": "[VSCODE-CUSTOM] JSON Punctuation for Property Name", - "scope": "support.type.property-name.json punctuation", - "settings": { - "foreground": "#E06C75" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Punctuation for key-value", - "scope": [ - "punctuation.separator.key-value.ts", - "punctuation.separator.key-value.js", - "punctuation.separator.key-value.tsx" - ], - "settings": { - "foreground": "#56B6C2" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Embedded Operator", - "scope": [ - "source.js.embedded.html keyword.operator", - "source.ts.embedded.html keyword.operator" - ], - "settings": { - "foreground": "#56B6C2" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Variable Other Readwrite", - "scope": [ - "variable.other.readwrite.js", - "variable.other.readwrite.ts", - "variable.other.readwrite.tsx" - ], - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Support Variable Dom", - "scope": ["support.variable.dom.js", "support.variable.dom.ts"], - "settings": { - "foreground": "#E06C75" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Support Variable Property Dom", - "scope": [ - "support.variable.property.dom.js", - "support.variable.property.dom.ts" - ], - "settings": { - "foreground": "#E06C75" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Interpolation String Punctuation", - "scope": [ - "meta.template.expression.js punctuation.definition", - "meta.template.expression.ts punctuation.definition" - ], - "settings": { - "foreground": "#BE5046" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Punctuation Type Parameters", - "scope": [ - "source.ts punctuation.definition.typeparameters", - "source.js punctuation.definition.typeparameters", - "source.tsx punctuation.definition.typeparameters" - ], - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Definition Block", - "scope": [ - "source.ts punctuation.definition.block", - "source.js punctuation.definition.block", - "source.tsx punctuation.definition.block" - ], - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Punctuation Separator Comma", - "scope": [ - "source.ts punctuation.separator.comma", - "source.js punctuation.separator.comma", - "source.tsx punctuation.separator.comma" - ], - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Variable Property", - "scope": [ - "support.variable.property.js", - "support.variable.property.ts", - "support.variable.property.tsx" - ], - "settings": { - "foreground": "#E06C75" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Default Keyword", - "scope": [ - "keyword.control.default.js", - "keyword.control.default.ts", - "keyword.control.default.tsx" - ], - "settings": { - "foreground": "#E06C75" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Instanceof Keyword", - "scope": [ - "keyword.operator.expression.instanceof.js", - "keyword.operator.expression.instanceof.ts", - "keyword.operator.expression.instanceof.tsx" - ], - "settings": { - "foreground": "#C678DD" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Of Keyword", - "scope": [ - "keyword.operator.expression.of.js", - "keyword.operator.expression.of.ts", - "keyword.operator.expression.of.tsx" - ], - "settings": { - "foreground": "#C678DD" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Braces/Brackets", - "scope": [ - "meta.brace.round.js", - "meta.array-binding-pattern-variable.js", - "meta.brace.square.js", - "meta.brace.round.ts", - "meta.array-binding-pattern-variable.ts", - "meta.brace.square.ts", - "meta.brace.round.tsx", - "meta.array-binding-pattern-variable.tsx", - "meta.brace.square.tsx" - ], - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Punctuation Accessor", - "scope": [ - "source.js punctuation.accessor", - "source.ts punctuation.accessor", - "source.tsx punctuation.accessor" - ], - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Punctuation Terminator Statement", - "scope": [ - "punctuation.terminator.statement.js", - "punctuation.terminator.statement.ts", - "punctuation.terminator.statement.tsx" - ], - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Array variables", - "scope": [ - "meta.array-binding-pattern-variable.js variable.other.readwrite.js", - "meta.array-binding-pattern-variable.ts variable.other.readwrite.ts", - "meta.array-binding-pattern-variable.tsx variable.other.readwrite.tsx" - ], - "settings": { - "foreground": "#D19A66" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Support Variables", - "scope": [ - "source.js support.variable", - "source.ts support.variable", - "source.tsx support.variable" - ], - "settings": { - "foreground": "#E06C75" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Support Variables", - "scope": [ - "variable.other.constant.property.js", - "variable.other.constant.property.ts", - "variable.other.constant.property.tsx" - ], - "settings": { - "foreground": "#D19A66" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Keyword New", - "scope": [ - "keyword.operator.new.ts", - "keyword.operator.new.j", - "keyword.operator.new.tsx" - ], - "settings": { - "foreground": "#C678DD" - } - }, - { - "name": "[VSCODE-CUSTOM] TS Keyword Operator", - "scope": ["source.ts keyword.operator", "source.tsx keyword.operator"], - "settings": { - "foreground": "#56B6C2" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Punctuation Parameter Separator", - "scope": [ - "punctuation.separator.parameter.js", - "punctuation.separator.parameter.ts", - "punctuation.separator.parameter.tsx " - ], - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Import", - "scope": [ - "constant.language.import-export-all.js", - "constant.language.import-export-all.ts" - ], - "settings": { - "foreground": "#E06C75" - } - }, - { - "name": "[VSCODE-CUSTOM] JSX/TSX Import", - "scope": [ - "constant.language.import-export-all.jsx", - "constant.language.import-export-all.tsx" - ], - "settings": { - "foreground": "#56B6C2" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Keyword Control As", - "scope": [ - "keyword.control.as.js", - "keyword.control.as.ts", - "keyword.control.as.jsx", - "keyword.control.as.tsx" - ], - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Variable Alias", - "scope": [ - "variable.other.readwrite.alias.js", - "variable.other.readwrite.alias.ts", - "variable.other.readwrite.alias.jsx", - "variable.other.readwrite.alias.tsx" - ], - "settings": { - "foreground": "#E06C75" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Constants", - "scope": [ - "variable.other.constant.js", - "variable.other.constant.ts", - "variable.other.constant.jsx", - "variable.other.constant.tsx" - ], - "settings": { - "foreground": "#D19A66" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Export Variable", - "scope": [ - "meta.export.default.js variable.other.readwrite.js", - "meta.export.default.ts variable.other.readwrite.ts" - ], - "settings": { - "foreground": "#E06C75" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Template Strings Punctuation Accessor", - "scope": [ - "source.js meta.template.expression.js punctuation.accessor", - "source.ts meta.template.expression.ts punctuation.accessor", - "source.tsx meta.template.expression.tsx punctuation.accessor" - ], - "settings": { - "foreground": "#98C379" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Import equals", - "scope": [ - "source.js meta.import-equals.external.js keyword.operator", - "source.jsx meta.import-equals.external.jsx keyword.operator", - "source.ts meta.import-equals.external.ts keyword.operator", - "source.tsx meta.import-equals.external.tsx keyword.operator" - ], - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Type Module", - "scope": "entity.name.type.module.js,entity.name.type.module.ts,entity.name.type.module.jsx,entity.name.type.module.tsx", - "settings": { - "foreground": "#98C379" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Meta Class", - "scope": "meta.class.js,meta.class.ts,meta.class.jsx,meta.class.tsx", - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Property Definition Variable", - "scope": [ - "meta.definition.property.js variable", - "meta.definition.property.ts variable", - "meta.definition.property.jsx variable", - "meta.definition.property.tsx variable" - ], - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Meta Type Parameters Type", - "scope": [ - "meta.type.parameters.js support.type", - "meta.type.parameters.jsx support.type", - "meta.type.parameters.ts support.type", - "meta.type.parameters.tsx support.type" - ], - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Meta Tag Keyword Operator", - "scope": [ - "source.js meta.tag.js keyword.operator", - "source.jsx meta.tag.jsx keyword.operator", - "source.ts meta.tag.ts keyword.operator", - "source.tsx meta.tag.tsx keyword.operator" - ], - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Meta Tag Punctuation", - "scope": [ - "meta.tag.js punctuation.section.embedded", - "meta.tag.jsx punctuation.section.embedded", - "meta.tag.ts punctuation.section.embedded", - "meta.tag.tsx punctuation.section.embedded" - ], - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Meta Array Literal Variable", - "scope": [ - "meta.array.literal.js variable", - "meta.array.literal.jsx variable", - "meta.array.literal.ts variable", - "meta.array.literal.tsx variable" - ], - "settings": { - "foreground": "#E5C07B" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Module Exports", - "scope": [ - "support.type.object.module.js", - "support.type.object.module.jsx", - "support.type.object.module.ts", - "support.type.object.module.tsx" - ], - "settings": { - "foreground": "#E06C75" - } - }, - { - "name": "[VSCODE-CUSTOM] JSON Constants", - "scope": ["constant.language.json"], - "settings": { - "foreground": "#56B6C2" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Object Constants", - "scope": [ - "variable.other.constant.object.js", - "variable.other.constant.object.jsx", - "variable.other.constant.object.ts", - "variable.other.constant.object.tsx" - ], - "settings": { - "foreground": "#D19A66" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Properties Keyword", - "scope": [ - "storage.type.property.js", - "storage.type.property.jsx", - "storage.type.property.ts", - "storage.type.property.tsx" - ], - "settings": { - "foreground": "#56B6C2" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Single Quote Inside Templated String", - "scope": [ - "meta.template.expression.js string.quoted punctuation.definition", - "meta.template.expression.jsx string.quoted punctuation.definition", - "meta.template.expression.ts string.quoted punctuation.definition", - "meta.template.expression.tsx string.quoted punctuation.definition" - ], - "settings": { - "foreground": "#98C379" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS Backtick inside Templated String", - "scope": [ - "meta.template.expression.js string.template punctuation.definition.string.template", - "meta.template.expression.jsx string.template punctuation.definition.string.template", - "meta.template.expression.ts string.template punctuation.definition.string.template", - "meta.template.expression.tsx string.template punctuation.definition.string.template" - ], - "settings": { - "foreground": "#98C379" - } - }, - { - "name": "[VSCODE-CUSTOM] JS/TS In Keyword for Loops", - "scope": [ - "keyword.operator.expression.in.js", - "keyword.operator.expression.in.jsx", - "keyword.operator.expression.in.ts", - "keyword.operator.expression.in.tsx" - ], - "settings": { - "foreground": "#C678DD" - } - }, - { - "name": "[VSCODE-CUSTOM] Python Constants Other", - "scope": "source.python constant.other", - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "[VSCODE-CUSTOM] Python Constants", - "scope": "source.python constant", - "settings": { - "foreground": "#D19A66" - } - }, - { - "name": "[VSCODE-CUSTOM] Python Placeholder Character", - "scope": "constant.character.format.placeholder.other.python storage", - "settings": { - "foreground": "#D19A66" - } - }, - { - "name": "[VSCODE-CUSTOM] Python Magic", - "scope": "support.variable.magic.python", - "settings": { - "foreground": "#E06C75" - } - }, - { - "name": "[VSCODE-CUSTOM] Python Meta Function Parameters", - "scope": "meta.function.parameters.python", - "settings": { - "foreground": "#D19A66" - } - }, - { - "name": "[VSCODE-CUSTOM] Python Function Separator Annotation", - "scope": "punctuation.separator.annotation.python", - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "[VSCODE-CUSTOM] Python Function Separator Punctuation", - "scope": "punctuation.separator.parameters.python", - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "[VSCODE-CUSTOM] CSharp Fields", - "scope": "entity.name.variable.field.cs", - "settings": { - "foreground": "#E06C75" - } - }, - { - "name": "[VSCODE-CUSTOM] CSharp Keyword Operators", - "scope": "source.cs keyword.operator", - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "[VSCODE-CUSTOM] CSharp Variables", - "scope": "variable.other.readwrite.cs", - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "[VSCODE-CUSTOM] CSharp Variables Other", - "scope": "variable.other.object.cs", - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "[VSCODE-CUSTOM] CSharp Property Other", - "scope": "variable.other.object.property.cs", - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "[VSCODE-CUSTOM] CSharp Property", - "scope": "entity.name.variable.property.cs", - "settings": { - "foreground": "#61AFEF" - } - }, - { - "name": "[VSCODE-CUSTOM] CSharp Storage Type", - "scope": "storage.type.cs", - "settings": { - "foreground": "#E5C07B" - } - }, - { - "name": "[VSCODE-CUSTOM] Rust Unsafe Keyword", - "scope": "keyword.other.unsafe.rust", - "settings": { - "foreground": "#E06C75" - } - }, - { - "name": "[VSCODE-CUSTOM] Markdown Raw Block", - "scope": "markup.raw.block.markdown", - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "[VSCODE-CUSTOM] Shell Variables Punctuation Definition", - "scope": "punctuation.definition.variable.shell", - "settings": { - "foreground": "#E06C75" - } - }, - { - "name": "[VSCODE-CUSTOM] Css Support Constant Value", - "scope": "support.constant.property-value.css", - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "[VSCODE-CUSTOM] Css Punctuation Definition Constant", - "scope": "punctuation.definition.constant.css", - "settings": { - "foreground": "#D19A66" - } - }, - { - "name": "[VSCODE-CUSTOM] Sass Punctuation for key-value", - "scope": "punctuation.separator.key-value.scss", - "settings": { - "foreground": "#E06C75" - } - }, - { - "name": "[VSCODE-CUSTOM] Sass Punctuation for constants", - "scope": "punctuation.definition.constant.scss", - "settings": { - "foreground": "#D19A66" - } - }, - { - "name": "[VSCODE-CUSTOM] Sass Punctuation for key-value", - "scope": "meta.property-list.scss punctuation.separator.key-value.scss", - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "[VSCODE-CUSTOM] Java Storage Type Primitive Array", - "scope": "storage.type.primitive.array.java", - "settings": { - "foreground": "#E5C07B" - } - }, - { - "name": "[VSCODE-CUSTOM] Markdown headings", - "scope": "entity.name.section.markdown", - "settings": { - "foreground": "#E06C75" - } - }, - { - "name": "[VSCODE-CUSTOM] Markdown heading Punctuation Definition", - "scope": "punctuation.definition.heading.markdown", - "settings": { - "foreground": "#E06C75" - } - }, - { - "name": "[VSCODE-CUSTOM] Markdown heading setext", - "scope": "markup.heading.setext", - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "[VSCODE-CUSTOM] Markdown Punctuation Definition Bold", - "scope": "punctuation.definition.bold.markdown", - "settings": { - "foreground": "#D19A66" - } - }, - { - "name": "[VSCODE-CUSTOM] Markdown Inline Raw", - "scope": "markup.inline.raw.markdown", - "settings": { - "foreground": "#98C379" - } - }, - { - "name": "[VSCODE-CUSTOM] Markdown List Punctuation Definition", - "scope": "beginning.punctuation.definition.list.markdown", - "settings": { - "foreground": "#E06C75" - } - }, - { - "name": "[VSCODE-CUSTOM] Markdown Quote", - "scope": "markup.quote.markdown", - "settings": { - "foreground": "#5C6370", - "fontStyle": "italic" - } - }, - { - "name": "[VSCODE-CUSTOM] Markdown Punctuation Definition String", - "scope": [ - "punctuation.definition.string.begin.markdown", - "punctuation.definition.string.end.markdown", - "punctuation.definition.metadata.markdown" - ], - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "name": "[VSCODE-CUSTOM] Markdown Punctuation Definition Link", - "scope": "punctuation.definition.metadata.markdown", - "settings": { - "foreground": "#C678DD" - } - }, - { - "name": "[VSCODE-CUSTOM] Markdown Underline Link/Image", - "scope": [ - "markup.underline.link.markdown", - "markup.underline.link.image.markdown" - ], - "settings": { - "foreground": "#C678DD" - } - }, - { - "name": "[VSCODE-CUSTOM] Markdown Link Title/Description", - "scope": [ - "string.other.link.title.markdown", - "string.other.link.description.markdown" - ], - "settings": { - "foreground": "#61AFEF" - } - }, - { - "name": "[VSCODE-CUSTOM] Ruby Punctuation Separator Variable", - "scope": "punctuation.separator.variable.ruby", - "settings": { - "foreground": "#E06C75" - } - }, - { - "name": "[VSCODE-CUSTOM] Ruby Other Constant Variable", - "scope": "variable.other.constant.ruby", - "settings": { - "foreground": "#D19A66" - } - }, - { - "name": "[VSCODE-CUSTOM] Ruby Keyword Operator Other", - "scope": "keyword.operator.other.ruby", - "settings": { - "foreground": "#98C379" - } - }, - { - "name": "[VSCODE-CUSTOM] PHP Punctuation Variable Definition", - "scope": "punctuation.definition.variable.php", - "settings": { - "foreground": "#E06C75" - } - }, - { - "name": "[VSCODE-CUSTOM] PHP Meta Class", - "scope": "meta.class.php", - "settings": { - "foreground": "#ABB2BF" - } - }, - { - "scope": "token.info-token", - "settings": { - "foreground": "#6796e6" - } - }, - { - "scope": "token.warn-token", - "settings": { - "foreground": "#cd9731" - } - }, - { - "scope": "token.error-token", - "settings": { - "foreground": "#f44747" - } - }, - { - "scope": "token.debug-token", - "settings": { - "foreground": "#b267e6" - } - } - ] -} From 51acf26e1e66735757171e8a33f78d9f3c6a37f1 Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Mon, 7 Oct 2019 16:30:20 +0200 Subject: [PATCH 03/13] tiny polish for missing tab styles --- .../src/app/pages/Sandbox/Editor/Content/Tabs/Tab/elements.ts | 2 +- packages/app/src/embed/components/Content/elements.ts | 4 ++-- packages/common/src/themes/codesandbox-nu.json | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/Tab/elements.ts b/packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/Tab/elements.ts index 83179263af6..c87e3a8f1d3 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/Tab/elements.ts +++ b/packages/app/src/app/pages/Sandbox/Editor/Content/Tabs/Tab/elements.ts @@ -11,7 +11,7 @@ export const Container = styled.div<{ justify-content: center; align-items: center; line-height: 1; - height: calc(100% - 1px); + height: 100%; font-size: 0.875rem; cursor: pointer; diff --git a/packages/app/src/embed/components/Content/elements.ts b/packages/app/src/embed/components/Content/elements.ts index fe7704da939..8f2236c8f08 100644 --- a/packages/app/src/embed/components/Content/elements.ts +++ b/packages/app/src/embed/components/Content/elements.ts @@ -3,7 +3,7 @@ import styled from 'styled-components'; export const Container = styled.div` display: flex; position: relative; - background-color: ${props => props.theme.background2}; + background-color: ${props => props.theme['editor.background']}; height: calc(100% - 2.5rem); `; @@ -11,7 +11,7 @@ export const Tabs = styled.div` display: flex; height: 35px; min-height: 35px; - background-color: rgba(0, 0, 0, 0.3); + background-color: ${props => props.theme['tab.inactiveBackground']}; overflow-x: auto; font-size: 0.875rem; diff --git a/packages/common/src/themes/codesandbox-nu.json b/packages/common/src/themes/codesandbox-nu.json index 6cf1f839ec8..5d48ea644f4 100644 --- a/packages/common/src/themes/codesandbox-nu.json +++ b/packages/common/src/themes/codesandbox-nu.json @@ -14,7 +14,7 @@ "tab.border": "#151515", "tab.activeBackground": "#151515", "tab.activeBorder": "#64D2FF", - "tab.inactiveBackground": "#111518", + "tab.inactiveBackground": "#151515", "input.background": "#242424", "input.foreground": "#FFFFFF", From d97a78bbcfe094b9d175e51d935e148e1b0010a4 Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Mon, 7 Oct 2019 16:35:53 +0200 Subject: [PATCH 04/13] copy sidebar border --- packages/app/src/embed/components/Header/elements.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/app/src/embed/components/Header/elements.js b/packages/app/src/embed/components/Header/elements.js index f7773f37231..deae7379edd 100644 --- a/packages/app/src/embed/components/Header/elements.js +++ b/packages/app/src/embed/components/Header/elements.js @@ -31,6 +31,8 @@ export const Container = styled.div` padding: 0 1rem; box-sizing: border-box; background-color: ${props => props.theme['editor.background']}; + /* match sidebar border */ + border-bottom: 1px solid rgba(0, 0, 0, 0.2); `; export const MenuIcon = styled(MenuIconSVG)` From 934146015b77786da97fef316181c6e7404fb284 Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Thu, 10 Oct 2019 11:21:23 +0200 Subject: [PATCH 05/13] Fix bad merge --- packages/app/src/embed/index.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/app/src/embed/index.js b/packages/app/src/embed/index.js index ec36c17ba18..518797d41f1 100644 --- a/packages/app/src/embed/index.js +++ b/packages/app/src/embed/index.js @@ -6,8 +6,6 @@ import { ThemeProvider } from 'styled-components'; import requirePolyfills from '@codesandbox/common/lib/load-dynamic-polyfills'; import 'normalize.css'; import '@codesandbox/common/lib/global.css'; -import track from '@codesandbox/common/lib/utils/analytics'; -import codesandbox from '@codesandbox/common/lib/themes/codesandbox.json'; import track, { identify } from '@codesandbox/common/lib/utils/analytics'; import theme from './theme'; From 9892b6083b1b2e76f922fab19f1fbe891bbaf835 Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Fri, 11 Oct 2019 15:21:07 +0200 Subject: [PATCH 06/13] Get tokens + styled-system going [skip ci] --- packages/app/package.json | 1 + .../Sidebar/AvatarBlock/elements.js | 26 ++++++++++ .../components/Sidebar/AvatarBlock/index.js | 11 +++++ .../Sidebar/SandboxInfo/elements.js | 25 ++++++++++ .../components/Sidebar/SandboxInfo/index.js | 22 +++++++++ .../src/embed/components/Sidebar/elements.js | 11 +++-- .../app/src/embed/components/Sidebar/index.js | 24 ++-------- packages/app/src/embed/index.html | 1 + packages/app/src/embed/theme/index.js | 7 +-- packages/app/src/embed/theme/tokens.js | 48 +++++++++++++++++++ yarn.lock | 45 ++++------------- 11 files changed, 156 insertions(+), 65 deletions(-) create mode 100644 packages/app/src/embed/components/Sidebar/AvatarBlock/elements.js create mode 100644 packages/app/src/embed/components/Sidebar/AvatarBlock/index.js create mode 100644 packages/app/src/embed/components/Sidebar/SandboxInfo/elements.js create mode 100644 packages/app/src/embed/components/Sidebar/SandboxInfo/index.js create mode 100644 packages/app/src/embed/theme/tokens.js diff --git a/packages/app/package.json b/packages/app/package.json index b1bfcd08d43..1516757a62e 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -73,6 +73,7 @@ "@codesandbox/template-icons": "^1.0.1", "@emmetio/codemirror-plugin": "^0.3.5", "@sentry/webpack-plugin": "^1.8.0", + "@styled-system/css": "^5.0.23", "@svgr/core": "^2.4.1", "@typeform/embed": "^0.12.0", "@types/rc-slider": "^8.6.5", diff --git a/packages/app/src/embed/components/Sidebar/AvatarBlock/elements.js b/packages/app/src/embed/components/Sidebar/AvatarBlock/elements.js new file mode 100644 index 00000000000..beecd2ec561 --- /dev/null +++ b/packages/app/src/embed/components/Sidebar/AvatarBlock/elements.js @@ -0,0 +1,26 @@ +import styled from 'styled-components'; +import css from '@styled-system/css'; + +export const Container = styled.div( + css({ + display: 'flex', + alignItems: 'center', + }) +); + +export const Avatar = styled.img( + css({ + size: '24px', + borderRadius: '2px', + border: '1px solid', + borderColor: 'grays.400', + }) +); + +export const Name = styled.span( + css({ + display: 'inline-block', + fontSize: 2, + marginLeft: 2, + }) +); diff --git a/packages/app/src/embed/components/Sidebar/AvatarBlock/index.js b/packages/app/src/embed/components/Sidebar/AvatarBlock/index.js new file mode 100644 index 00000000000..ec18d338e03 --- /dev/null +++ b/packages/app/src/embed/components/Sidebar/AvatarBlock/index.js @@ -0,0 +1,11 @@ +import React from 'react'; +import { Container, Avatar, Name } from './elements'; + +const AvatarBlock = ({ url, name }) => ( + + + {name} + +); + +export default AvatarBlock; diff --git a/packages/app/src/embed/components/Sidebar/SandboxInfo/elements.js b/packages/app/src/embed/components/Sidebar/SandboxInfo/elements.js new file mode 100644 index 00000000000..f2ee39dde3a --- /dev/null +++ b/packages/app/src/embed/components/Sidebar/SandboxInfo/elements.js @@ -0,0 +1,25 @@ +import styled from 'styled-components'; +import css from '@styled-system/css'; + +export const Container = styled.div( + css({ + padding: 4, + }) +); + +export const Title = styled.h2( + css({ + fontSize: 3, + fontWeight: 'medium', + margin: 0, + marginBottom: 1, + }) +); + +export const Description = styled.div( + css({ + fontSize: 2, + color: 'grays.300', + marginBottom: 4, + }) +); diff --git a/packages/app/src/embed/components/Sidebar/SandboxInfo/index.js b/packages/app/src/embed/components/Sidebar/SandboxInfo/index.js new file mode 100644 index 00000000000..37d05ecbc71 --- /dev/null +++ b/packages/app/src/embed/components/Sidebar/SandboxInfo/index.js @@ -0,0 +1,22 @@ +import React from 'react'; +import { Container, Title, Description } from './elements'; +import AvatarBlock from '../AvatarBlock'; + +const SandboxInfo = ({ sandbox }) => { + const title = sandbox.title || sandbox.id; + + return ( + + {title} + {sandbox.description && {sandbox.description}} + {sandbox.author && ( + + )} + + ); +}; + +export default SandboxInfo; diff --git a/packages/app/src/embed/components/Sidebar/elements.js b/packages/app/src/embed/components/Sidebar/elements.js index 3afbf143644..7b43e89bb85 100644 --- a/packages/app/src/embed/components/Sidebar/elements.js +++ b/packages/app/src/embed/components/Sidebar/elements.js @@ -5,14 +5,17 @@ import { isIOS } from '@codesandbox/common/lib/utils/platform'; export const Container = styled.div` flex: 250px; width: 250px; - /* There is a bug with ios that causes the sidebar to be longer than the preview, when you then - * scroll the preview it scrolls the editor down (page is longer). If I set this to 100% scrolling - * is broken in Chrome though. That's why we have this check */ - height: ${isIOS ? '100%' : '100vh'}; + color: rgba(255, 255, 255, 0.8); z-index: 10; background-color: ${props => props.theme['sideBar.background']}; overflow: auto; + font-family: Inter, sans-serif; + + /* There is a bug with ios that causes the sidebar to be longer than the preview, when you then + * scroll the preview it scrolls the editor down (page is longer). If I set this to 100% scrolling + * is broken in Chrome though. That's why we have this check */ + height: ${isIOS ? '100%' : '100vh'}; `; export const Title = styled.h2` diff --git a/packages/app/src/embed/components/Sidebar/index.js b/packages/app/src/embed/components/Sidebar/index.js index 50813e69173..119d862aaac 100644 --- a/packages/app/src/embed/components/Sidebar/index.js +++ b/packages/app/src/embed/components/Sidebar/index.js @@ -1,4 +1,3 @@ -// @flow import * as React from 'react'; import type { Sandbox } from '@codesandbox/common/lib/types'; @@ -8,16 +7,9 @@ import { EntryContainer } from 'app/pages/Sandbox/Editor/Workspace/elements'; import EditorLink from '../EditorLink'; import Files from '../Files'; +import SandboxInfo from './SandboxInfo'; -import { - Container, - Title, - Subtitle, - Description, - Item, - Version, - Author, -} from './elements'; +import { Container, Title, Subtitle, Item, Version } from './elements'; const getNormalizedUrl = (url: string) => `${url.replace(/\/$/g, '')}/`; @@ -56,20 +48,10 @@ function Sidebar({ sandbox, setCurrentModule, currentModule }: Props) { npmDependencies = npmDependencies || {}; - const sandboxTitle = sandbox.title || sandbox.id; - return ( - {sandboxTitle} - {sandbox.author && ( - - Made by {sandbox.author.username} - - )} - {sandbox.description && ( - {sandbox.description} - )} + diff --git a/packages/app/src/embed/index.html b/packages/app/src/embed/index.html index e672ca85981..86e8f9236f7 100644 --- a/packages/app/src/embed/index.html +++ b/packages/app/src/embed/index.html @@ -21,6 +21,7 @@ + Embed - CodeSandbox diff --git a/packages/app/src/embed/theme/index.js b/packages/app/src/embed/theme/index.js index 6411282c2e7..1326ba3a634 100644 --- a/packages/app/src/embed/theme/index.js +++ b/packages/app/src/embed/theme/index.js @@ -1,10 +1,11 @@ import applicationTheme from '@codesandbox/common/lib/theme'; -import codesandboxNu from '@codesandbox/common/lib/themes/codesandbox-nu.json'; +import codesandboxBlack from '@codesandbox/common/lib/themes/codesandbox-nu.json'; +import tokens from './tokens'; const theme = { ...applicationTheme, - ...codesandboxNu.colors, - vscodeTheme: codesandboxNu, + ...tokens, + vscodeTheme: codesandboxBlack, }; export default theme; diff --git a/packages/app/src/embed/theme/tokens.js b/packages/app/src/embed/theme/tokens.js new file mode 100644 index 00000000000..5f851d4bd05 --- /dev/null +++ b/packages/app/src/embed/theme/tokens.js @@ -0,0 +1,48 @@ +// this theme follows the System UI Theme Specification +// Ref: https://system-ui.com/theme + +const colors = { + white: '#fff', + grays: { + 100: '#fff9f9', // found this lingering around + 200: '#e6e6e6', // danny's gray-0 + 300: '#999999', // danny's gray-1 + 400: '#757575', // danny's gray-2 + 500: '#242424', // danny's dark-3 + 600: 'pink', // doesn't exist yet + 700: '#151515', // danny's dark-2 + 800: '#040404', // danny's dark-1 + 900: '#111111', // danny's dark-0 + }, + blues: { + 300: '#6CC7F6', // danny's teal + 600: '#0971f1', // danny's blue + }, +}; + +const theme = { + colors, + space: [0, 4, 8, 12, 16, 20, 24, 28, 32], + fontSizes: [0, 10, 12, 13, 14, 16, 20, 24, 32], + fontWeights: { + // matches Inter weights + thin: 100, + light: 300, + normal: 400, + medium: 500, + semibold: 600, + bold: 700, + extrabold: 800, + black: 900, + }, + + shadows: { + // this part is ugly, this can be improved. + // bonus: these are terrible names + active: `inset 0px -2px 0px ${colors.blues[300]}`, + underline: `inset 0px -2px 0px ${colors.grays[100] + '1a'}`, + fadeunder: `inset 0px 8px 8px 0px ${colors.grays[700] + 'cc'}`, + }, +}; + +export default theme; diff --git a/yarn.lock b/yarn.lock index fc15515c206..1f324a063bd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3637,6 +3637,11 @@ telejson "^2.2.1" util-deprecate "^1.0.2" +"@styled-system/css@^5.0.23": + version "5.0.23" + resolved "https://registry.yarnpkg.com/@styled-system/css/-/css-5.0.23.tgz#35ad4f34fe0fec9b011a5468ac0821f12f5e4b1a" + integrity sha512-yC3S0Iox8OTPAyrP1t5yY9nURUICcUdhVYOkwffftuxa5+txxI4qkT2e9JNCc2aaem+DG8mlXTdnYefjqge5wg== + "@svgr/babel-plugin-add-jsx-attribute@^4.2.0": version "4.2.0" resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz#dadcb6218503532d6884b210e7f3c502caaa44b1" @@ -5028,7 +5033,7 @@ ansi-escapes@^3.0.0, ansi-escapes@^3.2.0: resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b" integrity sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ== -ansi-escapes@^4.1.0, ansi-escapes@^4.2.1: +ansi-escapes@^4.1.0: version "4.2.1" resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-4.2.1.tgz#4dccdb846c3eee10f6d64dea66273eab90c37228" integrity sha512-Cg3ymMAdN10wOk/VYfLV7KCQyv7EDirJ64500sU7n9UlmioEtDuU5Gd+hj73hXSU/ex7tHJSssmyftDdkMLO8Q== @@ -7551,13 +7556,6 @@ cli-cursor@^2.0.0, cli-cursor@^2.1.0: dependencies: restore-cursor "^2.0.0" -cli-cursor@^3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/cli-cursor/-/cli-cursor-3.1.0.tgz#264305a7ae490d1d03bf0c9ba7c925d1753af307" - integrity sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw== - dependencies: - restore-cursor "^3.1.0" - cli-spinners@^1.0.0, cli-spinners@^1.3.1: version "1.3.1" resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-1.3.1.tgz#002c1990912d0d59580c93bd36c056de99e4259a" @@ -9853,11 +9851,6 @@ emoji-regex@^7.0.1, emoji-regex@^7.0.2: resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-7.0.3.tgz#933a04052860c85e83c122479c4748a8e4c72156" integrity sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA== -emoji-regex@^8.0.0: - version "8.0.0" - resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37" - integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A== - emojis-list@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389" @@ -14530,11 +14523,6 @@ is-fullwidth-code-point@^2.0.0: resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz#a3b30a5c4f199183167aaab93beefae3ddfb654f" integrity sha1-o7MKXE8ZkYMWeqq5O+764937ZU8= -is-fullwidth-code-point@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d" - integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg== - is-function@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.1.tgz#12cfb98b65b57dd3d193a3121f5f6e2f437602b5" @@ -16603,7 +16591,7 @@ lodash@4.17.5: version "4.17.5" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.5.tgz#99a92d65c0272debe8c96b6057bc8fbfa3bed511" -"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.0.1, lodash@^4.11.1, lodash@^4.11.2, lodash@^4.13.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0: +"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.0.1, lodash@^4.11.1, lodash@^4.11.2, lodash@^4.13.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.2, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.0, lodash@^4.2.1, lodash@^4.3.0: version "4.17.15" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548" integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A== @@ -17615,7 +17603,7 @@ mute-stream@0.0.7: resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab" integrity sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s= -mute-stream@0.0.8, mute-stream@~0.0.4: +mute-stream@~0.0.4: version "0.0.8" resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d" integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA== @@ -22588,14 +22576,6 @@ restore-cursor@^2.0.0: onetime "^2.0.0" signal-exit "^3.0.2" -restore-cursor@^3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-3.1.0.tgz#39f67c54b3a7a58cea5236d95cf0034239631f7e" - integrity sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA== - dependencies: - onetime "^5.1.0" - signal-exit "^3.0.2" - ret@~0.1.10: version "0.1.15" resolved "https://registry.yarnpkg.com/ret/-/ret-0.1.15.tgz#b8a4825d5bdb1fc3f6f53c2bc33f81388681c7bc" @@ -24217,15 +24197,6 @@ string-width@^3.0.0, string-width@^3.1.0: is-fullwidth-code-point "^2.0.0" strip-ansi "^5.1.0" -string-width@^4.1.0: - version "4.1.0" - resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.1.0.tgz#ba846d1daa97c3c596155308063e075ed1c99aff" - integrity sha512-NrX+1dVVh+6Y9dnQ19pR0pP4FiEIlUvdTGn8pw6CKTNq5sgib2nIhmUNT5TAmhWmvKr3WcxBcP3E8nWezuipuQ== - dependencies: - emoji-regex "^8.0.0" - is-fullwidth-code-point "^3.0.0" - strip-ansi "^5.2.0" - string.prototype.matchall@^3.0.1: version "3.0.1" resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-3.0.1.tgz#5a9e0b64bcbeb336aa4814820237c2006985646d" From 6b92dd63a050650b7d422ff7282232616a99a667 Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Fri, 11 Oct 2019 17:06:49 +0200 Subject: [PATCH 07/13] get sidebar sections in [skip ci] --- packages/app/package.json | 1 + .../components/Sidebar/Section/elements.js | 33 +++++++++++++++++ .../embed/components/Sidebar/Section/index.js | 36 +++++++++++++++++++ .../app/src/embed/components/Sidebar/index.js | 19 ++++------ packages/app/src/embed/theme/index.js | 12 ++++++- yarn.lock | 8 +++++ 6 files changed, 96 insertions(+), 13 deletions(-) create mode 100644 packages/app/src/embed/components/Sidebar/Section/elements.js create mode 100644 packages/app/src/embed/components/Sidebar/Section/index.js diff --git a/packages/app/package.json b/packages/app/package.json index 1516757a62e..a4e64021860 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -108,6 +108,7 @@ "date-fns": "^2.4.1", "date-fns-tz": "^1.0.7", "debug": "^2.6.8", + "dot-object": "^1.9.0", "downshift": "^1.0.0-rc.14", "eslint-plugin-react-hooks": "1.6.0", "eslint-plugin-vue": "^4.2.2", diff --git a/packages/app/src/embed/components/Sidebar/Section/elements.js b/packages/app/src/embed/components/Sidebar/Section/elements.js new file mode 100644 index 00000000000..0b86f05eea5 --- /dev/null +++ b/packages/app/src/embed/components/Sidebar/Section/elements.js @@ -0,0 +1,33 @@ +import styled from 'styled-components'; +import css from '@styled-system/css'; + +export const Header = styled.div( + css({ + display: 'flex', + alignItems: 'center', + height: '32px', + paddingX: 3, + borderBottom: '1px solid', + borderColor: 'sideBar.border', + cursor: 'pointer', + ':hover': { + backgroundColor: 'sideBar.border', + }, + ':focus': { + backgroundColor: 'sideBar.border', + }, + }) +); + +export const Title = styled.div( + css({ + fontSize: 3, + }) +); + +export const Icon = styled.svg(props => + css({ + marginRight: 1, + transform: props.open ? 'rotate(0)' : 'rotate(-90deg)', + }) +); diff --git a/packages/app/src/embed/components/Sidebar/Section/index.js b/packages/app/src/embed/components/Sidebar/Section/index.js new file mode 100644 index 00000000000..02417fa0c97 --- /dev/null +++ b/packages/app/src/embed/components/Sidebar/Section/index.js @@ -0,0 +1,36 @@ +import React from 'react'; +import { Header, Icon, Title } from './elements'; + +function Section(props) { + const [open, setOpen] = React.useState(props.defaultOpen || false); + const toggle = () => setOpen(!open); + + return ( +
+
+ + {props.title} +
+ {open ? props.children : null} +
+ ); +} + +function ToggleIcon(props) { + return ( + + + + ); +} + +export default Section; diff --git a/packages/app/src/embed/components/Sidebar/index.js b/packages/app/src/embed/components/Sidebar/index.js index 119d862aaac..56ca21b5f2a 100644 --- a/packages/app/src/embed/components/Sidebar/index.js +++ b/packages/app/src/embed/components/Sidebar/index.js @@ -7,6 +7,7 @@ import { EntryContainer } from 'app/pages/Sandbox/Editor/Workspace/elements'; import EditorLink from '../EditorLink'; import Files from '../Files'; +import Section from './Section'; import SandboxInfo from './SandboxInfo'; import { Container, Title, Subtitle, Item, Version } from './elements'; @@ -50,12 +51,10 @@ function Sidebar({ sandbox, setCurrentModule, currentModule }: Props) { return ( - +
- - - - Files +
+
- - - - Dependencies - +
+
npm dependencies {Object.keys(npmDependencies).map(dep => ( @@ -94,8 +90,7 @@ function Sidebar({ sandbox, setCurrentModule, currentModule }: Props) { ))} )} - - +
diff --git a/packages/app/src/embed/theme/index.js b/packages/app/src/embed/theme/index.js index 1326ba3a634..6e58f09b7d6 100644 --- a/packages/app/src/embed/theme/index.js +++ b/packages/app/src/embed/theme/index.js @@ -1,11 +1,21 @@ +import dot from 'dot-object'; import applicationTheme from '@codesandbox/common/lib/theme'; import codesandboxBlack from '@codesandbox/common/lib/themes/codesandbox-nu.json'; import tokens from './tokens'; +// merge vscode colors into tokens +Object.assign(tokens.colors, dot.object(codesandboxBlack.colors)); + const theme = { + // hope to remove this bit ...applicationTheme, - ...tokens, + + // used for parts imported from outside embed + ...codesandboxBlack.colors, + // used for syntax highlighting vscodeTheme: codesandboxBlack, + // used for embed styles + ...tokens, }; export default theme; diff --git a/yarn.lock b/yarn.lock index 1f324a063bd..6c806fc493c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9632,6 +9632,14 @@ domutils@^1.5.1, domutils@^1.7.0: dom-serializer "0" domelementtype "1" +dot-object@^1.9.0: + version "1.9.0" + resolved "https://registry.yarnpkg.com/dot-object/-/dot-object-1.9.0.tgz#6e3d6d8379f794c5174599ddf05528f5990f076e" + integrity sha512-7MPN6y7XhAO4vM4eguj5+5HNKLjJYfkVG1ZR1Aput4Q4TR6SYeSjhpVQ77IzJHoSHffKbDxBC+48aCiiRurDPw== + dependencies: + commander "^2.20.0" + glob "^7.1.4" + dot-prop@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-3.0.0.tgz#1b708af094a49c9a0e7dbcad790aba539dac1177" From 6d65b50ea04924de2c956580e6128d365b3d0fe3 Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Mon, 14 Oct 2019 11:38:16 +0200 Subject: [PATCH 08/13] add stats to sandbox info --- .../components/Sidebar/AvatarBlock/elements.js | 1 + .../components/Sidebar/SandboxInfo/elements.js | 17 +++++++++++++++++ .../components/Sidebar/SandboxInfo/index.js | 3 ++- .../embed/components/Sidebar/Section/index.js | 4 ++-- 4 files changed, 22 insertions(+), 3 deletions(-) diff --git a/packages/app/src/embed/components/Sidebar/AvatarBlock/elements.js b/packages/app/src/embed/components/Sidebar/AvatarBlock/elements.js index beecd2ec561..65c375de59b 100644 --- a/packages/app/src/embed/components/Sidebar/AvatarBlock/elements.js +++ b/packages/app/src/embed/components/Sidebar/AvatarBlock/elements.js @@ -5,6 +5,7 @@ export const Container = styled.div( css({ display: 'flex', alignItems: 'center', + marginBottom: 4, }) ); diff --git a/packages/app/src/embed/components/Sidebar/SandboxInfo/elements.js b/packages/app/src/embed/components/Sidebar/SandboxInfo/elements.js index f2ee39dde3a..d2ae72b5f80 100644 --- a/packages/app/src/embed/components/Sidebar/SandboxInfo/elements.js +++ b/packages/app/src/embed/components/Sidebar/SandboxInfo/elements.js @@ -1,5 +1,7 @@ import styled from 'styled-components'; import css from '@styled-system/css'; +import CommonStats from '@codesandbox/common/lib/components/Stats'; +import { CenteredText } from '@codesandbox/common/lib/components/Stats/Stat/elements'; export const Container = styled.div( css({ @@ -23,3 +25,18 @@ export const Description = styled.div( marginBottom: 4, }) ); + +export const Stats = styled(CommonStats)( + css({ + fontSize: 1, + // ouch ouch ouch, modifying a child of + // a common element is just pure evil + // this will definitely break on the + // slightest touch to the Stats component + // TODO: Refactor stats component to accept + // justify as an input + [CenteredText]: { + justifyContent: 'start', + }, + }) +); diff --git a/packages/app/src/embed/components/Sidebar/SandboxInfo/index.js b/packages/app/src/embed/components/Sidebar/SandboxInfo/index.js index 37d05ecbc71..6e788563acb 100644 --- a/packages/app/src/embed/components/Sidebar/SandboxInfo/index.js +++ b/packages/app/src/embed/components/Sidebar/SandboxInfo/index.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Container, Title, Description } from './elements'; +import { Container, Title, Description, Stats } from './elements'; import AvatarBlock from '../AvatarBlock'; const SandboxInfo = ({ sandbox }) => { @@ -15,6 +15,7 @@ const SandboxInfo = ({ sandbox }) => { name={sandbox.author.username} /> )} + ); }; diff --git a/packages/app/src/embed/components/Sidebar/Section/index.js b/packages/app/src/embed/components/Sidebar/Section/index.js index 02417fa0c97..3e003e056a7 100644 --- a/packages/app/src/embed/components/Sidebar/Section/index.js +++ b/packages/app/src/embed/components/Sidebar/Section/index.js @@ -7,9 +7,9 @@ function Section(props) { return (
-
+
- {props.title} + {props.title}
{open ? props.children : null}
From 849dd9a9dd8153f09613cfd090e02eb2d3a03edc Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Mon, 14 Oct 2019 11:50:07 +0200 Subject: [PATCH 09/13] linter oh linter --- packages/app/src/embed/components/Sidebar/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/app/src/embed/components/Sidebar/index.js b/packages/app/src/embed/components/Sidebar/index.js index 56ca21b5f2a..98cb9a7a460 100644 --- a/packages/app/src/embed/components/Sidebar/index.js +++ b/packages/app/src/embed/components/Sidebar/index.js @@ -10,7 +10,7 @@ import Files from '../Files'; import Section from './Section'; import SandboxInfo from './SandboxInfo'; -import { Container, Title, Subtitle, Item, Version } from './elements'; +import { Container, Subtitle, Item, Version } from './elements'; const getNormalizedUrl = (url: string) => `${url.replace(/\/$/g, '')}/`; @@ -51,7 +51,7 @@ function Sidebar({ sandbox, setCurrentModule, currentModule }: Props) { return ( -
+
From 87e1874e9efe6f16e508574dddc680d38850637d Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Mon, 14 Oct 2019 12:14:50 +0200 Subject: [PATCH 10/13] drone is confused, i need a commit --- packages/app/src/embed/theme/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/app/src/embed/theme/index.js b/packages/app/src/embed/theme/index.js index 6e58f09b7d6..41977a20579 100644 --- a/packages/app/src/embed/theme/index.js +++ b/packages/app/src/embed/theme/index.js @@ -9,7 +9,6 @@ Object.assign(tokens.colors, dot.object(codesandboxBlack.colors)); const theme = { // hope to remove this bit ...applicationTheme, - // used for parts imported from outside embed ...codesandboxBlack.colors, // used for syntax highlighting From d61cbd8416ccfe6cc6dd1c0dbc5e6e2021ab6ded Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Mon, 14 Oct 2019 13:25:38 +0200 Subject: [PATCH 11/13] get the border right --- .../app/src/embed/components/Sidebar/Section/elements.js | 7 +++++++ packages/app/src/embed/components/Sidebar/Section/index.js | 4 ++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/app/src/embed/components/Sidebar/Section/elements.js b/packages/app/src/embed/components/Sidebar/Section/elements.js index 0b86f05eea5..a54fcc4d7c3 100644 --- a/packages/app/src/embed/components/Sidebar/Section/elements.js +++ b/packages/app/src/embed/components/Sidebar/Section/elements.js @@ -1,6 +1,13 @@ import styled from 'styled-components'; import css from '@styled-system/css'; +export const Body = styled.div( + css({ + borderBottom: '1px solid', + borderColor: 'sideBar.border', + }) +); + export const Header = styled.div( css({ display: 'flex', diff --git a/packages/app/src/embed/components/Sidebar/Section/index.js b/packages/app/src/embed/components/Sidebar/Section/index.js index 3e003e056a7..b06baa268ce 100644 --- a/packages/app/src/embed/components/Sidebar/Section/index.js +++ b/packages/app/src/embed/components/Sidebar/Section/index.js @@ -1,5 +1,5 @@ import React from 'react'; -import { Header, Icon, Title } from './elements'; +import { Header, Icon, Title, Body } from './elements'; function Section(props) { const [open, setOpen] = React.useState(props.defaultOpen || false); @@ -11,7 +11,7 @@ function Section(props) { {props.title} - {open ? props.children : null} + {open ? {props.children} : null}
); } From b29c67210789d348ba2bcc8d6e0b44e68a4de04b Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Mon, 14 Oct 2019 13:57:45 +0200 Subject: [PATCH 12/13] who knew dot object mutates object! --- packages/app/src/embed/theme/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app/src/embed/theme/index.js b/packages/app/src/embed/theme/index.js index 41977a20579..fd3b32da94c 100644 --- a/packages/app/src/embed/theme/index.js +++ b/packages/app/src/embed/theme/index.js @@ -4,7 +4,7 @@ import codesandboxBlack from '@codesandbox/common/lib/themes/codesandbox-nu.json import tokens from './tokens'; // merge vscode colors into tokens -Object.assign(tokens.colors, dot.object(codesandboxBlack.colors)); +Object.assign(tokens.colors, dot.object({ ...codesandboxBlack.colors })); const theme = { // hope to remove this bit From f039a435db3ef2d2862cc3a859181991bc7f19b6 Mon Sep 17 00:00:00 2001 From: siddharthkp Date: Mon, 14 Oct 2019 14:04:01 +0200 Subject: [PATCH 13/13] sync the sidebar border color --- packages/app/src/embed/components/App/elements.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app/src/embed/components/App/elements.js b/packages/app/src/embed/components/App/elements.js index 16569206bbd..822d0815aee 100644 --- a/packages/app/src/embed/components/App/elements.js +++ b/packages/app/src/embed/components/App/elements.js @@ -33,6 +33,6 @@ export const Moving = styled.div` left: 250px; transform: inherit; box-shadow: none; - border-left: 1px solid ${props => props.theme.background4}; + border-left: 1px solid ${props => props.theme.colors.sideBar.border}; } `;