@onereach/ui-components 2.74.0-beta.2287.0 → 2.74.0

package/src/components/or-code/theme.ts

@@ -1,213 +0,0 @@
-import { EditorView } from '@codemirror/view';
-import { Extension } from '@codemirror/state';
-import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
-import { tags as t } from '@lezer/highlight';
-
-// Using https://github.com/one-dark/vscode-one-dark-theme/ as reference for the colors
-
-const chalky = 'var(--c-warning-darken-20)',
-  coral = 'var(--c-error)',
-  cyan = '#56b6c2',
-  invalid = 'var(--c-white)',
-  ivory = 'var(--c-neutral-6)',
-  stone = 'var(--c-neutral-5)', // Brightened compared to original to increase contrast
-  malibu = '#61afef',
-  sage = 'var(--c-success)',
-  whiskey = 'var(--c-warning-darken-5)',
-  violet = '#c678dd',
-  darkBackground = 'var(--c-neutral-1)',
-  highlightBackground = 'var(--c-neutral-2)',
-  background = 'var(--c-neutral-1)',
-  tooltipBackground = 'var(--c-neutral-2)',
-  selection = 'var(--c-neutral-3)',
-  cursor = 'var(--c-primary)';
-
-/// The colors used in the theme, as CSS color strings.
-export const color = {
-  chalky,
-  coral,
-  cyan,
-  invalid,
-  ivory,
-  stone,
-  malibu,
-  sage,
-  whiskey,
-  violet,
-  darkBackground,
-  highlightBackground,
-  background,
-  tooltipBackground,
-  selection,
-  cursor,
-};
-
-/// The editor theme styles for One Dark.
-export const orCodeTheme = EditorView.theme({
-  '&': {
-    color: ivory,
-    backgroundColor: background,
-  },
-
-  '.cm-content': {
-    caretColor: cursor,
-  },
-
-  '.cm-button': {
-    background: highlightBackground,
-    color: 'var(--c-neutral-6)',
-    border: 0,
-    borderRadius: 'var(--s-2)',
-  },
-
-  '.cm-panel.cm-search input[type=checkbox]': {
-    display: 'inline-block',
-    verticalAlign: 'middle',
-  },
-
-  '.cm-cursor, .cm-dropCursor': { borderLeftColor: cursor },
-  '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
-    backgroundColor: selection,
-  },
-
-  '.cm-panels': {
-    backgroundColor: darkBackground,
-    color: ivory,
-  },
-  '.cm-panels.cm-panels-top': { borderBottom: '2px solid var(--c-neutral-2)' },
-  '.cm-panels.cm-panels-bottom': { borderTop: '2px solid var(--c-neutral-2)' },
-
-  '.cm-searchMatch': {
-    backgroundColor: 'var(--c-neutral-1)',
-    outline: '1px solid var(--c-neutral-2)',
-  },
-  '.cm-searchMatch.cm-searchMatch-selected': {
-    backgroundColor: '#6199ff2f',
-  },
-
-  '.cm-activeLine': { backgroundColor: '#6699ff0b' },
-  '.cm-selectionMatch': { backgroundColor: '#aafe661a' },
-
-  '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
-    backgroundColor: '#bad0f847',
-  },
-
-  '.cm-gutters': {
-    backgroundColor: background,
-    color: stone,
-    border: 'none',
-  },
-
-  '.cm-activeLineGutter': {
-    backgroundColor: highlightBackground,
-  },
-
-  '.cm-foldPlaceholder': {
-    backgroundColor: 'transparent',
-    border: 'none',
-    color: '#ddd',
-  },
-
-  '.cm-tooltip': {
-    border: 'none',
-    backgroundColor: tooltipBackground,
-  },
-  '.cm-tooltip .cm-tooltip-arrow:before': {
-    borderTopColor: 'transparent',
-    borderBottomColor: 'transparent',
-  },
-  '.cm-tooltip .cm-tooltip-arrow:after': {
-    borderTopColor: tooltipBackground,
-    borderBottomColor: tooltipBackground,
-  },
-  '.cm-tooltip-autocomplete': {
-    '& > ul > li[aria-selected]': {
-      backgroundColor: highlightBackground,
-      color: ivory,
-    },
-  },
-  '.cm-textfield': {
-    outline: 'none',
-    background: background,
-    color: 'var(--c-neutral-6)',
-    backgroundColor: 'var(--c-neutral-1)',
-    border: '1px solid var(--c-neutral-2)',
-    borderRadius: 'var(--s-2)',
-  },
-}, { dark: true });
-
-/// The highlighting style for code in the One Dark theme.
-export const orCodeHighlightStyle = HighlightStyle.define([
-  {
-    tag: t.keyword,
-    color: violet,
-  },
-  {
-    tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
-    color: coral,
-  },
-  {
-    tag: [t.function(t.variableName), t.labelName],
-    color: malibu,
-  },
-  {
-    tag: [t.color, t.constant(t.name), t.standard(t.name)],
-    color: whiskey,
-  },
-  {
-    tag: [t.definition(t.name), t.separator],
-    color: ivory,
-  },
-  {
-    tag: [t.typeName, t.className, t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
-    color: chalky,
-  },
-  {
-    tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.link, t.special(t.string)],
-    color: cyan,
-  },
-  {
-    tag: [t.meta, t.comment],
-    color: stone,
-  },
-  {
-    tag: t.strong,
-    fontWeight: 'bold',
-  },
-  {
-    tag: t.emphasis,
-    fontStyle: 'italic',
-  },
-  {
-    tag: t.strikethrough,
-    textDecoration: 'line-through',
-  },
-  {
-    tag: t.link,
-    color: stone,
-    textDecoration: 'underline',
-  },
-  {
-    tag: t.heading,
-    fontWeight: 'bold',
-    color: coral,
-  },
-  {
-    tag: [t.atom, t.bool, t.special(t.variableName)],
-    color: whiskey,
-  },
-  {
-    tag: [t.processingInstruction, t.string, t.inserted],
-    color: sage,
-  },
-  {
-    tag: t.invalid,
-    color: invalid,
-  },
-]);
-
-/// Extension to enable the One Dark theme (both the editor theme and
-/// the highlight style).
-const theme: Extension = [orCodeTheme, syntaxHighlighting(orCodeHighlightStyle)];
-
-export default theme;