UNPKG

code-colors-react

Version:
210 lines (209 loc) 6.57 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.css = exports.palette = void 0; const nano_theme_1 = require("nano-theme"); exports.palette = { mono1: "hsl(230, 8%, 24%)", mono2: "hsl(230, 6%, 44%)", mono3: "hsl(230, 4%, 64%)", col1: "#2795EE", col2: "hsl(221, 87%, 60%)", col3: "#a626a4", // hue4: 'hsl(119, 34%, 47%)', // hue4: theme.color.color[6], col4: "#718C00", col5: "hsl(5, 74%, 59%)", // hue5: theme.color.color[6], col6: "hsl(35, 99%, 36%)", negative: nano_theme_1.theme.color.sem.negative[2], // positive: theme.color.sem.positive[1], positive: "#718C00", selection: "hsl(230, 1%, 90%)", }; const redSquiggly = { marb: "-2px", bdb: "2px dotted rgba(255,0,0,.6)", d: "inline-block", pos: "relative", "&:after": { d: "block", content: '""', w: "100%", h: "4px", bdb: "2px dotted rgba(255,0,0,.6)", pos: "absolute", t: "calc(1em - 1px)", l: "-2px", }, }; const backgroundPadding = { d: "inline-block", bdrad: ".4em", mar: "-.1em", pad: ".1em", }; const redBackground = Object.assign(Object.assign({}, backgroundPadding), { bg: "rgba(255,0,0,.05)" }); const css = ({ mono1, mono2 = mono1, mono3 = mono2, col1 = mono1, col2 = mono2, col3 = mono3, col4 = mono1, col5 = mono2, col6 = mono3, negative = col5, positive = col4, selection, string: str = col4, keyword = col3, builtin = col4, "class-name": className = col5, function: func = col2, boolean = col2, number = col6, float = number, char = col4, symbol = col5, regex = col4, operator = col1, variable = col2, constant = col6, property = mono1, punctuation = mono1, important = col5, tag = col5, "attr-name": attrName = mono3, "attr-value": attrValue = col4, atrule = col3, selector = col1, nil = mono3, undef = mono3, } = exports.palette) => { const lightBg = "rgba(127,127,127,.1)"; const lighterBg = "rgba(127,127,127,.04)"; return { col: mono1, "::selection": { bg: selection, col: "inherit", bdrad: ".2em", }, ".token": { "&.comment,&.prolog,&.cdata": { col: mono3, }, "&.doctype": { col: mono1, fw: "bold", }, "&.entity": { col: mono1, cur: "help", }, "&.keyword": { col: keyword, "&[text=null],&[text=nil]": { col: nil, }, "&[text=undefined]": { col: undef, }, }, "&.builtin": { col: builtin, }, "&.class-name": { col: className, }, "&.important": Object.assign({ col: important }, redSquiggly), "&.function": { col: func, }, "&.boolean": { col: boolean, "&[text=false]": redBackground, }, "&.number": Object.assign(Object.assign({}, backgroundPadding), { col: number, "&:hover": { bg: lightBg, }, '&[text="0"],&[text="0.0"]': redBackground, '&[text*="."]': { col: float, } }), "&.string": { col: str, "&[text=\"''\"],&[text='\"\"']": redBackground, "&:hover": { td: "underline", }, "&.template-punctuation:hover": { td: "none", }, }, "&.char": { col: char, }, "&.symbol": { col: symbol, }, "&.regex": { col: regex, "&:hover": { td: "underline", }, }, "&.url.string": { td: "underline", }, "&.operator": { col: operator, }, "&.variable": { col: variable, }, "&.constant": { col: constant, }, "&.property": { col: property, "&:hover": Object.assign(Object.assign({}, backgroundPadding), { bg: lightBg }), }, "&.punctuation": { col: punctuation, '&[text="."]': { col: mono3, }, }, "&.tag": { col: tag, }, "&.attr-name": { col: attrName, }, "&.attr-value": { col: attrValue, }, "&.atrule,&.rule": { col: atrule, }, "&.atrule": Object.assign(Object.assign({}, backgroundPadding), { bg: lighterBg }), "&.selector": { col: selector, }, "&.coord": { col: mono3, }, "&.inserted": { col: positive, "&.prefix": Object.assign(Object.assign({}, backgroundPadding), { bg: lighterBg }), }, "&.deleted": { col: negative, "&.prefix": Object.assign(Object.assign({}, backgroundPadding), { bg: lighterBg }), }, "&.content": { color: col2, }, "&.code-snippet": { color: col4, }, "&.bold": { fw: "bold", }, "&.italic": { fs: "italic", }, "&.namespace": { op: 0.8, }, }, ".language-js,.language-javascript": { ".token": { "&.keyword": { "&[text=var],&[text=with],&[text=debugger]": redSquiggly, }, "&.function": { "&[text=eval],&[text=alert]": redSquiggly, }, }, }, ".language-json": { ".token": { "&.property": { fw: "bold", }, }, }, ".language-css": { ".token": { "&.property": { col: mono3, }, }, }, }; }; exports.css = css;