diff --git a/packages/app/package.json b/packages/app/package.json index b1bfcd08d43..a4e64021860 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", @@ -107,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/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/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}; } `; 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/app/src/embed/components/Header/elements.js b/packages/app/src/embed/components/Header/elements.js index a38cb65a43e..deae7379edd 100644 --- a/packages/app/src/embed/components/Header/elements.js +++ b/packages/app/src/embed/components/Header/elements.js @@ -30,8 +30,9 @@ 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']}; + /* match sidebar border */ + border-bottom: 1px solid rgba(0, 0, 0, 0.2); `; export const MenuIcon = styled(MenuIconSVG)` 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..65c375de59b --- /dev/null +++ b/packages/app/src/embed/components/Sidebar/AvatarBlock/elements.js @@ -0,0 +1,27 @@ +import styled from 'styled-components'; +import css from '@styled-system/css'; + +export const Container = styled.div( + css({ + display: 'flex', + alignItems: 'center', + marginBottom: 4, + }) +); + +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..d2ae72b5f80 --- /dev/null +++ b/packages/app/src/embed/components/Sidebar/SandboxInfo/elements.js @@ -0,0 +1,42 @@ +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({ + 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, + }) +); + +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 new file mode 100644 index 00000000000..6e788563acb --- /dev/null +++ b/packages/app/src/embed/components/Sidebar/SandboxInfo/index.js @@ -0,0 +1,23 @@ +import React from 'react'; +import { Container, Title, Description, Stats } 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/Section/elements.js b/packages/app/src/embed/components/Sidebar/Section/elements.js new file mode 100644 index 00000000000..a54fcc4d7c3 --- /dev/null +++ b/packages/app/src/embed/components/Sidebar/Section/elements.js @@ -0,0 +1,40 @@ +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', + 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..b06baa268ce --- /dev/null +++ b/packages/app/src/embed/components/Sidebar/Section/index.js @@ -0,0 +1,36 @@ +import React from 'react'; +import { Header, Icon, Title, Body } 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/elements.js b/packages/app/src/embed/components/Sidebar/elements.js index 775c5d85912..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; + + 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'}; - color: rgba(255, 255, 255, 0.8); - z-index: 10; - background-color: ${props => props.theme.sidebar}; - overflow: auto; `; 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..98cb9a7a460 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,10 @@ 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, - Description, - Item, - Version, - Author, -} from './elements'; +import { Container, Subtitle, Item, Version } from './elements'; const getNormalizedUrl = (url: string) => `${url.replace(/\/$/g, '')}/`; @@ -56,24 +49,12 @@ 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} - )} - - - - Files +
+ +
+
- - - - Dependencies - +
+
npm dependencies {Object.keys(npmDependencies).map(dep => ( @@ -112,8 +90,7 @@ function Sidebar({ sandbox, setCurrentModule, currentModule }: Props) { ))} )} - - +
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/index.js b/packages/app/src/embed/index.js index ca6e5296586..518797d41f1 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, { identify } from '@codesandbox/common/lib/utils/analytics'; +import theme from './theme'; import App from './components/App'; try { @@ -25,7 +23,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..fd3b32da94c --- /dev/null +++ b/packages/app/src/embed/theme/index.js @@ -0,0 +1,20 @@ +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, + // 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/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/packages/common/src/themes/codesandbox-nu.json b/packages/common/src/themes/codesandbox-nu.json new file mode 100644 index 00000000000..5d48ea644f4 --- /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": "#151515", + "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 fc15515c206..6c806fc493c 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" @@ -9634,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" @@ -9853,11 +9859,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 +14531,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 +16599,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 +17611,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 +22584,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 +24205,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"