@storybook/theming
Advanced tools
@storybook/theming - npm Package Compare versions
Comparing version 5.0.0-alpha.10 to 5.0.0-alpha.11
@@ -0,1 +1,2 @@ | ||
| import { easing, animation } from './animation'; | ||
| export declare const baseFonts: { | ||
@@ -11,1 +12,88 @@ fontFamily: string; | ||
| }; | ||
| export declare const color: { | ||
| primary: string; | ||
| secondary: string; | ||
| tertiary: string; | ||
| orange: string; | ||
| gold: string; | ||
| green: string; | ||
| seafoam: string; | ||
| purple: string; | ||
| ultraviolet: string; | ||
| lightest: string; | ||
| lighter: string; | ||
| light: string; | ||
| mediumlight: string; | ||
| medium: string; | ||
| mediumdark: string; | ||
| dark: string; | ||
| darker: string; | ||
| darkest: string; | ||
| border: string; | ||
| positive: string; | ||
| danger: string; | ||
| negative: string; | ||
| }; | ||
| export declare const background: { | ||
| app: string; | ||
| appInverse: string; | ||
| positive: string; | ||
| negative: string; | ||
| warning: string; | ||
| }; | ||
| export declare const typography: { | ||
| weight: { | ||
| regular: string; | ||
| bold: string; | ||
| black: string; | ||
| }; | ||
| size: { | ||
| s1: string; | ||
| s2: string; | ||
| s3: string; | ||
| m1: string; | ||
| m2: string; | ||
| m3: string; | ||
| l1: string; | ||
| l2: string; | ||
| l3: string; | ||
| code: string; | ||
| }; | ||
| }; | ||
| export interface Theme { | ||
| color: typeof color; | ||
| background: typeof background; | ||
| typography: typeof typography; | ||
| easing: typeof easing; | ||
| animation: typeof animation; | ||
| mainBackground: string; | ||
| mainBorder: string; | ||
| mainBorderColor: string; | ||
| mainBorderRadius: number; | ||
| mainFill: string; | ||
| mainTextFace: string; | ||
| mainTextColor: string; | ||
| mainTextSize: number; | ||
| monoTextFace: string; | ||
| dimmedTextColor: string; | ||
| inputFill: string; | ||
| barFill: string; | ||
| barTextColor: string; | ||
| barSelectedColor: string; | ||
| layoutMargin: number; | ||
| asideFill: string; | ||
| asideSelected: { | ||
| [key: string]: string | number; | ||
| }; | ||
| asideHover: { | ||
| [key: string]: string | number; | ||
| }; | ||
| brand: (() => object) | null; | ||
| code: { | ||
| [key: string]: string | object; | ||
| }; | ||
| addonActionsTheme: { | ||
| [key: string]: string | object; | ||
| }; | ||
| menuHighlightColor: string; | ||
| } |
@@ -5,15 +5,11 @@ "use strict"; | ||
| fontFamily: [ | ||
| '"Nunito Sans"', | ||
| '-apple-system', | ||
| '".SFNSText-Regular"', | ||
| '"San Francisco"', | ||
| 'BlinkMacSystemFont, "Segoe UI"', | ||
| '"Roboto"', | ||
| '"Oxygen"', | ||
| '"Ubuntu"', | ||
| '"Cantarell"', | ||
| '"Fira Sans"', | ||
| '"Droid Sans"', | ||
| 'BlinkMacSystemFont', | ||
| '"Segoe UI"', | ||
| '"Helvetica Neue"', | ||
| '"Lucida Grande"', | ||
| '"Arial"', | ||
| 'Helvetica', | ||
| 'Arial', | ||
| 'sans-serif', | ||
@@ -39,1 +35,55 @@ ].join(', '), | ||
| }; | ||
| exports.color = { | ||
| // Official color palette | ||
| primary: '#FF4785', | ||
| secondary: '#1EA7FD', | ||
| tertiary: '#DDDDDD', | ||
| orange: '#FC521F', | ||
| gold: '#FFAE00', | ||
| green: '#66BF3C', | ||
| seafoam: '#37D5D3', | ||
| purple: '#6F2CAC', | ||
| ultraviolet: '#2A0481', | ||
| // Monochrome | ||
| lightest: '#FFFFFF', | ||
| lighter: '#F8F8F8', | ||
| light: '#F3F3F3', | ||
| mediumlight: '#EEEEEE', | ||
| medium: '#DDDDDD', | ||
| mediumdark: '#999999', | ||
| dark: '#666666', | ||
| darker: '#444444', | ||
| darkest: '#333333', | ||
| border: 'rgba(0,0,0,.05)', | ||
| // Status | ||
| positive: '#66BF3C', | ||
| danger: '#FC521F', | ||
| negative: '#FF4400', | ||
| }; | ||
| exports.background = { | ||
| app: '#F6F9FC', | ||
| appInverse: '#7A8997', | ||
| // Notification, error, and warning backgrounds | ||
| positive: '#E1FFD4', | ||
| negative: '#FEDED2', | ||
| warning: '#FFF5CF', | ||
| }; | ||
| exports.typography = { | ||
| weight: { | ||
| regular: '400', | ||
| bold: '700', | ||
| black: '900', | ||
| }, | ||
| size: { | ||
| s1: '12', | ||
| s2: '14', | ||
| s3: '16', | ||
| m1: '20', | ||
| m2: '24', | ||
| m3: '28', | ||
| l1: '32', | ||
| l2: '40', | ||
| l3: '48', | ||
| code: '90', | ||
| }, | ||
| }; |
@@ -36,6 +36,8 @@ "use strict"; | ||
| react_1.default.createElement("path", { d: "M 42,520 18,28 H 0 l 18,492 z", fill: "#b57ee5" }))); }; | ||
| var BrandWrapper = styled_1.default.div({ | ||
| var BrandWrapper = styled_1.default.a({ | ||
| minHeight: 30, | ||
| verticalAlign: 'top', | ||
| display: 'flex', | ||
| color: 'inherit', | ||
| textDecoration: 'none', | ||
| }); | ||
@@ -50,3 +52,3 @@ var BrandText = styled_1.default.span({ | ||
| var title = _a.title; | ||
| return (react_1.default.createElement(BrandWrapper, null, | ||
| return (react_1.default.createElement(BrandWrapper, { href: "./" }, | ||
| react_1.default.createElement(Storybook, { height: "30px", inline: true }), | ||
@@ -53,0 +55,0 @@ react_1.default.createElement(BrandText, null, |
@@ -5,470 +5,5 @@ import styled from '@emotion/styled'; | ||
| declare const themes: { | ||
| dark: { | ||
| inputFill: string; | ||
| dimmedTextColor: string; | ||
| highlightColor: string; | ||
| menuHighlightColor: string; | ||
| successColor: string; | ||
| failColor: string; | ||
| warnColor: string; | ||
| overlayBackground: string; | ||
| colors: { | ||
| green1: { | ||
| color: string; | ||
| }; | ||
| red1: { | ||
| color: string; | ||
| }; | ||
| red2: { | ||
| color: string; | ||
| }; | ||
| red3: { | ||
| color: string; | ||
| }; | ||
| red4: { | ||
| color: string; | ||
| }; | ||
| gray1: { | ||
| color: string; | ||
| }; | ||
| cyan1: { | ||
| color: string; | ||
| }; | ||
| cyan2: { | ||
| color: string; | ||
| }; | ||
| blue1: { | ||
| color: string; | ||
| }; | ||
| blue2: { | ||
| color: string; | ||
| }; | ||
| }; | ||
| code: { | ||
| token: { | ||
| fontFamily: string; | ||
| WebkitFontSmoothing: string; | ||
| '&.comment': { | ||
| fontStyle: string; | ||
| color: string; | ||
| }; | ||
| '&.prolog': { | ||
| fontStyle: string; | ||
| color: string; | ||
| }; | ||
| '&.doctype': { | ||
| fontStyle: string; | ||
| color: string; | ||
| }; | ||
| '&.cdata': { | ||
| fontStyle: string; | ||
| color: string; | ||
| }; | ||
| '&.string': { | ||
| color: string; | ||
| }; | ||
| '&.punctuation': { | ||
| color: string; | ||
| }; | ||
| '&.operator': { | ||
| color: string; | ||
| }; | ||
| '&.url': { | ||
| color: string; | ||
| }; | ||
| '&.symbol': { | ||
| color: string; | ||
| }; | ||
| '&.number': { | ||
| color: string; | ||
| }; | ||
| '&.boolean': { | ||
| color: string; | ||
| }; | ||
| '&.variable': { | ||
| color: string; | ||
| }; | ||
| '&.constant': { | ||
| color: string; | ||
| }; | ||
| '&.inserted': { | ||
| color: string; | ||
| }; | ||
| '&.atrule': { | ||
| color: string; | ||
| }; | ||
| '&.keyword': { | ||
| color: string; | ||
| }; | ||
| '&.attr-value': { | ||
| color: string; | ||
| }; | ||
| '&.function': { | ||
| color: string; | ||
| }; | ||
| '&.deleted': { | ||
| color: string; | ||
| }; | ||
| '&.important': { | ||
| fontWeight: string; | ||
| }; | ||
| '&.bold': { | ||
| fontWeight: string; | ||
| }; | ||
| '&.italic': { | ||
| fontStyle: string; | ||
| }; | ||
| '&.class-name': { | ||
| color: string; | ||
| }; | ||
| '&.tag': { | ||
| color: string; | ||
| }; | ||
| '&.selector': { | ||
| color: string; | ||
| }; | ||
| '&.attr-name': { | ||
| color: string; | ||
| }; | ||
| '&.property': { | ||
| color: string; | ||
| }; | ||
| '&.regex': { | ||
| color: string; | ||
| }; | ||
| '&.entity': { | ||
| color: string; | ||
| }; | ||
| '&.directive.tag .tag': { | ||
| color: string; | ||
| background: string; | ||
| }; | ||
| }; | ||
| 'language-json .token.boolean': { | ||
| color: string; | ||
| }; | ||
| 'language-json .token.number': { | ||
| color: string; | ||
| }; | ||
| 'language-json .token.property': { | ||
| color: string; | ||
| }; | ||
| namespace: { | ||
| opacity: number; | ||
| }; | ||
| }; | ||
| addonActionsTheme: any; | ||
| asideFill: string; | ||
| asideSelected: { | ||
| color: string; | ||
| }; | ||
| monoTextFace: string; | ||
| layoutMargin: number; | ||
| barFill: string; | ||
| barSelectedColor: string; | ||
| mainBackground: string; | ||
| mainBorder: string; | ||
| mainBorderColor: string; | ||
| mainBorderRadius: number; | ||
| mainFill: string; | ||
| mainTextFace: string; | ||
| mainTextColor: string; | ||
| mainTextSize: number; | ||
| }; | ||
| normal: { | ||
| inputFill: string; | ||
| dimmedTextColor: string; | ||
| highlightColor: string; | ||
| menuHighlightColor: string; | ||
| successColor: string; | ||
| failColor: string; | ||
| warnColor: string; | ||
| monoTextFace: string; | ||
| overlayBackground: string; | ||
| brand: { | ||
| ({ title }: { | ||
| title: string; | ||
| }): JSX.Element; | ||
| propTypes: { | ||
| title: import("prop-types").Validator<string>; | ||
| }; | ||
| }; | ||
| code: { | ||
| token: { | ||
| fontFamily: string; | ||
| WebkitFontSmoothing: string; | ||
| '&.comment': { | ||
| fontStyle: string; | ||
| color: string; | ||
| }; | ||
| '&.prolog': { | ||
| fontStyle: string; | ||
| color: string; | ||
| }; | ||
| '&.doctype': { | ||
| fontStyle: string; | ||
| color: string; | ||
| }; | ||
| '&.cdata': { | ||
| fontStyle: string; | ||
| color: string; | ||
| }; | ||
| '&.string': { | ||
| color: string; | ||
| }; | ||
| '&.punctuation': { | ||
| color: string; | ||
| }; | ||
| '&.operator': { | ||
| color: string; | ||
| }; | ||
| '&.url': { | ||
| color: string; | ||
| }; | ||
| '&.symbol': { | ||
| color: string; | ||
| }; | ||
| '&.number': { | ||
| color: string; | ||
| }; | ||
| '&.boolean': { | ||
| color: string; | ||
| }; | ||
| '&.variable': { | ||
| color: string; | ||
| }; | ||
| '&.constant': { | ||
| color: string; | ||
| }; | ||
| '&.inserted': { | ||
| color: string; | ||
| }; | ||
| '&.atrule': { | ||
| color: string; | ||
| }; | ||
| '&.keyword': { | ||
| color: string; | ||
| }; | ||
| '&.attr-value': { | ||
| color: string; | ||
| }; | ||
| '&.function': { | ||
| color: string; | ||
| }; | ||
| '&.deleted': { | ||
| color: string; | ||
| }; | ||
| '&.important': { | ||
| fontWeight: string; | ||
| }; | ||
| '&.bold': { | ||
| fontWeight: string; | ||
| }; | ||
| '&.italic': { | ||
| fontStyle: string; | ||
| }; | ||
| '&.class-name': { | ||
| color: string; | ||
| }; | ||
| '&.tag': { | ||
| color: string; | ||
| }; | ||
| '&.selector': { | ||
| color: string; | ||
| }; | ||
| '&.attr-name': { | ||
| color: string; | ||
| }; | ||
| '&.property': { | ||
| color: string; | ||
| }; | ||
| '&.regex': { | ||
| color: string; | ||
| }; | ||
| '&.entity': { | ||
| color: string; | ||
| }; | ||
| '&.directive.tag .tag': { | ||
| color: string; | ||
| background: string; | ||
| }; | ||
| }; | ||
| 'language-json .token.boolean': { | ||
| color: string; | ||
| }; | ||
| 'language-json .token.number': { | ||
| color: string; | ||
| }; | ||
| 'language-json .token.property': { | ||
| color: string; | ||
| }; | ||
| namespace: { | ||
| opacity: number; | ||
| }; | ||
| }; | ||
| addonActionsTheme: any; | ||
| asideFill: string; | ||
| asideSelected: { | ||
| color: string; | ||
| }; | ||
| layoutMargin: number; | ||
| barFill: string; | ||
| barSelectedColor: string; | ||
| mainBackground: string; | ||
| mainBorder: string; | ||
| mainBorderColor: string; | ||
| mainBorderRadius: number; | ||
| mainFill: string; | ||
| mainTextFace: string; | ||
| mainTextColor: string; | ||
| mainTextSize: number; | ||
| }; | ||
| light: { | ||
| inputFill: string; | ||
| dimmedTextColor: string; | ||
| highlightColor: string; | ||
| menuHighlightColor: string; | ||
| successColor: string; | ||
| failColor: string; | ||
| warnColor: string; | ||
| monoTextFace: string; | ||
| overlayBackground: string; | ||
| brand: { | ||
| ({ title }: { | ||
| title: string; | ||
| }): JSX.Element; | ||
| propTypes: { | ||
| title: import("prop-types").Validator<string>; | ||
| }; | ||
| }; | ||
| code: { | ||
| token: { | ||
| fontFamily: string; | ||
| WebkitFontSmoothing: string; | ||
| '&.comment': { | ||
| fontStyle: string; | ||
| color: string; | ||
| }; | ||
| '&.prolog': { | ||
| fontStyle: string; | ||
| color: string; | ||
| }; | ||
| '&.doctype': { | ||
| fontStyle: string; | ||
| color: string; | ||
| }; | ||
| '&.cdata': { | ||
| fontStyle: string; | ||
| color: string; | ||
| }; | ||
| '&.string': { | ||
| color: string; | ||
| }; | ||
| '&.punctuation': { | ||
| color: string; | ||
| }; | ||
| '&.operator': { | ||
| color: string; | ||
| }; | ||
| '&.url': { | ||
| color: string; | ||
| }; | ||
| '&.symbol': { | ||
| color: string; | ||
| }; | ||
| '&.number': { | ||
| color: string; | ||
| }; | ||
| '&.boolean': { | ||
| color: string; | ||
| }; | ||
| '&.variable': { | ||
| color: string; | ||
| }; | ||
| '&.constant': { | ||
| color: string; | ||
| }; | ||
| '&.inserted': { | ||
| color: string; | ||
| }; | ||
| '&.atrule': { | ||
| color: string; | ||
| }; | ||
| '&.keyword': { | ||
| color: string; | ||
| }; | ||
| '&.attr-value': { | ||
| color: string; | ||
| }; | ||
| '&.function': { | ||
| color: string; | ||
| }; | ||
| '&.deleted': { | ||
| color: string; | ||
| }; | ||
| '&.important': { | ||
| fontWeight: string; | ||
| }; | ||
| '&.bold': { | ||
| fontWeight: string; | ||
| }; | ||
| '&.italic': { | ||
| fontStyle: string; | ||
| }; | ||
| '&.class-name': { | ||
| color: string; | ||
| }; | ||
| '&.tag': { | ||
| color: string; | ||
| }; | ||
| '&.selector': { | ||
| color: string; | ||
| }; | ||
| '&.attr-name': { | ||
| color: string; | ||
| }; | ||
| '&.property': { | ||
| color: string; | ||
| }; | ||
| '&.regex': { | ||
| color: string; | ||
| }; | ||
| '&.entity': { | ||
| color: string; | ||
| }; | ||
| '&.directive.tag .tag': { | ||
| color: string; | ||
| background: string; | ||
| }; | ||
| }; | ||
| 'language-json .token.boolean': { | ||
| color: string; | ||
| }; | ||
| 'language-json .token.number': { | ||
| color: string; | ||
| }; | ||
| 'language-json .token.property': { | ||
| color: string; | ||
| }; | ||
| namespace: { | ||
| opacity: number; | ||
| }; | ||
| }; | ||
| addonActionsTheme: any; | ||
| asideFill: string; | ||
| asideSelected: { | ||
| color: string; | ||
| }; | ||
| layoutMargin: number; | ||
| barFill: string; | ||
| barSelectedColor: string; | ||
| mainBackground: string; | ||
| mainBorder: string; | ||
| mainBorderColor: string; | ||
| mainBorderRadius: number; | ||
| mainFill: string; | ||
| mainTextFace: string; | ||
| mainTextColor: string; | ||
| mainTextSize: number; | ||
| }; | ||
| dark: import("./base").Theme; | ||
| normal: import("./base").Theme; | ||
| light: import("./base").Theme; | ||
| }; | ||
@@ -475,0 +10,0 @@ export { themes }; |
@@ -0,7 +1,6 @@ | ||
| interface ColorsHash { | ||
| [key: string]: string; | ||
| } | ||
| export declare const create: ({ colors, mono }: { | ||
| colors: { | ||
| [key: string]: { | ||
| color: string; | ||
| }; | ||
| }; | ||
| colors: ColorsHash; | ||
| mono: { | ||
@@ -123,1 +122,2 @@ monoTextFace: string; | ||
| }; | ||
| export {}; |
@@ -14,27 +14,36 @@ "use strict"; | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| var utils_1 = require("../utils"); | ||
| var convertColors = function (colors) { | ||
| return Object.entries(colors).reduce(function (acc, _a) { | ||
| var k = _a[0], v = _a[1]; | ||
| var _b; | ||
| return (__assign({}, acc, (_b = {}, _b[k] = utils_1.mkColor(v), _b))); | ||
| }, {}); | ||
| }; | ||
| exports.create = function (_a) { | ||
| var colors = _a.colors, mono = _a.mono; | ||
| return ({ | ||
| var colorsObjs = convertColors(colors); | ||
| return { | ||
| token: { | ||
| fontFamily: mono.monoTextFace, | ||
| WebkitFontSmoothing: 'antialiased', | ||
| '&.comment': __assign({}, colors.green1, { fontStyle: 'italic' }), | ||
| '&.prolog': __assign({}, colors.green1, { fontStyle: 'italic' }), | ||
| '&.doctype': __assign({}, colors.green1, { fontStyle: 'italic' }), | ||
| '&.cdata': __assign({}, colors.green1, { fontStyle: 'italic' }), | ||
| '&.string': colors.red1, | ||
| '&.punctuation': colors.gray1, | ||
| '&.operator': colors.gray1, | ||
| '&.url': colors.cyan1, | ||
| '&.symbol': colors.cyan1, | ||
| '&.number': colors.cyan1, | ||
| '&.boolean': colors.cyan1, | ||
| '&.variable': colors.cyan1, | ||
| '&.constant': colors.cyan1, | ||
| '&.inserted': colors.cyan1, | ||
| '&.atrule': colors.blue1, | ||
| '&.keyword': colors.blue1, | ||
| '&.attr-value': colors.blue1, | ||
| '&.function': colors.gray1, | ||
| '&.deleted': colors.red2, | ||
| '&.comment': __assign({}, colorsObjs.green1, { fontStyle: 'italic' }), | ||
| '&.prolog': __assign({}, colorsObjs.green1, { fontStyle: 'italic' }), | ||
| '&.doctype': __assign({}, colorsObjs.green1, { fontStyle: 'italic' }), | ||
| '&.cdata': __assign({}, colorsObjs.green1, { fontStyle: 'italic' }), | ||
| '&.string': colorsObjs.red1, | ||
| '&.punctuation': colorsObjs.gray1, | ||
| '&.operator': colorsObjs.gray1, | ||
| '&.url': colorsObjs.cyan1, | ||
| '&.symbol': colorsObjs.cyan1, | ||
| '&.number': colorsObjs.cyan1, | ||
| '&.boolean': colorsObjs.cyan1, | ||
| '&.variable': colorsObjs.cyan1, | ||
| '&.constant': colorsObjs.cyan1, | ||
| '&.inserted': colorsObjs.cyan1, | ||
| '&.atrule': colorsObjs.blue1, | ||
| '&.keyword': colorsObjs.blue1, | ||
| '&.attr-value': colorsObjs.blue1, | ||
| '&.function': colorsObjs.gray1, | ||
| '&.deleted': colorsObjs.red2, | ||
| '&.important': { | ||
@@ -49,18 +58,18 @@ fontWeight: 'bold', | ||
| }, | ||
| '&.class-name': colors.cyan2, | ||
| '&.tag': colors.red3, | ||
| '&.selector': colors.red3, | ||
| '&.attr-name': colors.red4, | ||
| '&.property': colors.red4, | ||
| '&.regex': colors.red4, | ||
| '&.entity': colors.red4, | ||
| '&.directive.tag .tag': __assign({ background: '#ffff00' }, colors.gray1), | ||
| '&.class-name': colorsObjs.cyan2, | ||
| '&.tag': colorsObjs.red3, | ||
| '&.selector': colorsObjs.red3, | ||
| '&.attr-name': colorsObjs.red4, | ||
| '&.property': colorsObjs.red4, | ||
| '&.regex': colorsObjs.red4, | ||
| '&.entity': colorsObjs.red4, | ||
| '&.directive.tag .tag': __assign({ background: '#ffff00' }, colorsObjs.gray1), | ||
| }, | ||
| 'language-json .token.boolean': colors.blue1, | ||
| 'language-json .token.number': colors.blue1, | ||
| 'language-json .token.property': colors.cyan2, | ||
| 'language-json .token.boolean': colorsObjs.blue1, | ||
| 'language-json .token.number': colorsObjs.blue1, | ||
| 'language-json .token.property': colorsObjs.cyan2, | ||
| namespace: { | ||
| opacity: 0.7, | ||
| }, | ||
| }); | ||
| }; | ||
| }; |
@@ -1,173 +0,3 @@ | ||
| declare const dark: { | ||
| inputFill: string; | ||
| dimmedTextColor: string; | ||
| highlightColor: string; | ||
| menuHighlightColor: string; | ||
| successColor: string; | ||
| failColor: string; | ||
| warnColor: string; | ||
| overlayBackground: string; | ||
| colors: { | ||
| green1: { | ||
| color: string; | ||
| }; | ||
| red1: { | ||
| color: string; | ||
| }; | ||
| red2: { | ||
| color: string; | ||
| }; | ||
| red3: { | ||
| color: string; | ||
| }; | ||
| red4: { | ||
| color: string; | ||
| }; | ||
| gray1: { | ||
| color: string; | ||
| }; | ||
| cyan1: { | ||
| color: string; | ||
| }; | ||
| cyan2: { | ||
| color: string; | ||
| }; | ||
| blue1: { | ||
| color: string; | ||
| }; | ||
| blue2: { | ||
| color: string; | ||
| }; | ||
| }; | ||
| code: { | ||
| token: { | ||
| fontFamily: string; | ||
| WebkitFontSmoothing: string; | ||
| '&.comment': { | ||
| fontStyle: string; | ||
| color: string; | ||
| }; | ||
| '&.prolog': { | ||
| fontStyle: string; | ||
| color: string; | ||
| }; | ||
| '&.doctype': { | ||
| fontStyle: string; | ||
| color: string; | ||
| }; | ||
| '&.cdata': { | ||
| fontStyle: string; | ||
| color: string; | ||
| }; | ||
| '&.string': { | ||
| color: string; | ||
| }; | ||
| '&.punctuation': { | ||
| color: string; | ||
| }; | ||
| '&.operator': { | ||
| color: string; | ||
| }; | ||
| '&.url': { | ||
| color: string; | ||
| }; | ||
| '&.symbol': { | ||
| color: string; | ||
| }; | ||
| '&.number': { | ||
| color: string; | ||
| }; | ||
| '&.boolean': { | ||
| color: string; | ||
| }; | ||
| '&.variable': { | ||
| color: string; | ||
| }; | ||
| '&.constant': { | ||
| color: string; | ||
| }; | ||
| '&.inserted': { | ||
| color: string; | ||
| }; | ||
| '&.atrule': { | ||
| color: string; | ||
| }; | ||
| '&.keyword': { | ||
| color: string; | ||
| }; | ||
| '&.attr-value': { | ||
| color: string; | ||
| }; | ||
| '&.function': { | ||
| color: string; | ||
| }; | ||
| '&.deleted': { | ||
| color: string; | ||
| }; | ||
| '&.important': { | ||
| fontWeight: string; | ||
| }; | ||
| '&.bold': { | ||
| fontWeight: string; | ||
| }; | ||
| '&.italic': { | ||
| fontStyle: string; | ||
| }; | ||
| '&.class-name': { | ||
| color: string; | ||
| }; | ||
| '&.tag': { | ||
| color: string; | ||
| }; | ||
| '&.selector': { | ||
| color: string; | ||
| }; | ||
| '&.attr-name': { | ||
| color: string; | ||
| }; | ||
| '&.property': { | ||
| color: string; | ||
| }; | ||
| '&.regex': { | ||
| color: string; | ||
| }; | ||
| '&.entity': { | ||
| color: string; | ||
| }; | ||
| '&.directive.tag .tag': { | ||
| color: string; | ||
| background: string; | ||
| }; | ||
| }; | ||
| 'language-json .token.boolean': { | ||
| color: string; | ||
| }; | ||
| 'language-json .token.number': { | ||
| color: string; | ||
| }; | ||
| 'language-json .token.property': { | ||
| color: string; | ||
| }; | ||
| namespace: { | ||
| opacity: number; | ||
| }; | ||
| }; | ||
| addonActionsTheme: any; | ||
| asideFill: string; | ||
| asideSelected: { | ||
| color: string; | ||
| }; | ||
| monoTextFace: string; | ||
| layoutMargin: number; | ||
| barFill: string; | ||
| barSelectedColor: string; | ||
| mainBackground: string; | ||
| mainBorder: string; | ||
| mainBorderColor: string; | ||
| mainBorderRadius: number; | ||
| mainFill: string; | ||
| mainTextFace: string; | ||
| mainTextColor: string; | ||
| mainTextSize: number; | ||
| }; | ||
| import { Theme } from '../base'; | ||
| declare const dark: Theme; | ||
| export default dark; |
@@ -15,23 +15,18 @@ "use strict"; | ||
| var react_inspector_1 = require("react-inspector"); | ||
| var utils_1 = require("../utils"); | ||
| var dark_syntax_1 = require("./dark-syntax"); | ||
| var light_syntax_1 = require("./light-syntax"); | ||
| var base_1 = require("../base"); | ||
| var colors = { | ||
| green1: utils_1.mkColor('#008000'), | ||
| red1: utils_1.mkColor('#A31515'), | ||
| red2: utils_1.mkColor('#9a050f'), | ||
| red3: utils_1.mkColor('#800000'), | ||
| red4: utils_1.mkColor('#ff0000'), | ||
| gray1: utils_1.mkColor('#393A34'), | ||
| cyan1: utils_1.mkColor('#36acaa'), | ||
| cyan2: utils_1.mkColor('#2B91AF'), | ||
| blue1: utils_1.mkColor('#0000ff'), | ||
| blue2: utils_1.mkColor('#00009f'), | ||
| var animation_1 = require("../animation"); | ||
| var background = { | ||
| app: '#F6F9FC', | ||
| appInverse: '#7A8997', | ||
| positive: '#E1FFD4', | ||
| negative: '#FEDED2', | ||
| warning: '#FFF5CF', | ||
| }; | ||
| var main = { | ||
| mainBackground: '#112 linear-gradient(to right, #112, #333)', | ||
| mainBorder: '1px solid rgba(255,255,255,0.1)', | ||
| mainBorderColor: 'rgba(255,255,255,0.1)', | ||
| mainBackground: '#1F1F1F', | ||
| mainBorder: '1px solid rgba(255, 255, 255, 0.1)', | ||
| mainBorderColor: 'rgba(255, 255, 255, 0.1)', | ||
| mainBorderRadius: 4, | ||
| mainFill: 'rgba(255,255,255,0.1)', | ||
| mainFill: 'rgba(255,255,255,0.01)', | ||
| mainTextFace: base_1.baseFonts.fontFamily, | ||
@@ -42,4 +37,5 @@ mainTextColor: '#efefef', | ||
| var bar = { | ||
| barFill: 'rgba(0,0,0,1)', | ||
| barSelectedColor: 'rgba(255,255,255,0.4)', | ||
| barFill: 'rgba(255,255,255,1)', | ||
| barTextColor: base_1.color.mediumdark, | ||
| barSelectedColor: base_1.color.secondary, | ||
| }; | ||
@@ -49,12 +45,34 @@ var layout = { | ||
| }; | ||
| var mono = { | ||
| monoTextFace: base_1.monoFonts.fontFamily, | ||
| }; | ||
| var aside = { | ||
| asideFill: 'linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%)', | ||
| asideFill: 'transparent', | ||
| asideSelected: { | ||
| color: '#9fdaff', | ||
| background: base_1.color.secondary, | ||
| color: base_1.color.lightest, | ||
| }, | ||
| asideHover: { | ||
| background: '#EAF3FC', | ||
| }, | ||
| }; | ||
| var dark = __assign({}, main, bar, layout, mono, aside, { inputFill: 'rgba(0,0,0,1)', dimmedTextColor: 'rgba(255,255,255,0.4)', highlightColor: '#9fdaff', menuHighlightColor: '#1ea7fd', successColor: '#0edf62', failColor: '#ff3f3f', warnColor: 'orange', overlayBackground: 'linear-gradient(to bottom right, rgba(17, 17, 34, 0.6), rgba(51, 51, 51, 0.8))', colors: colors, code: dark_syntax_1.create({ colors: colors, mono: mono }), addonActionsTheme: __assign({}, react_inspector_1.chromeDark, { BASE_FONT_FAMILY: base_1.monoFonts.fontFamily, BASE_BACKGROUND_COLOR: 'transparent' }) }); | ||
| var mono = { | ||
| monoTextFace: base_1.monoFonts.fontFamily, | ||
| }; | ||
| var dark = __assign({}, main, bar, layout, mono, aside, { color: base_1.color, | ||
| background: background, | ||
| typography: base_1.typography, | ||
| easing: animation_1.easing, | ||
| animation: animation_1.animation, inputFill: 'rgba(0,0,0,0.1)', dimmedTextColor: 'rgba(0,0,0,0.4)', menuHighlightColor: '#199EFF', monoTextFace: base_1.monoFonts.fontFamily, brand: null, code: light_syntax_1.create({ | ||
| colors: { | ||
| green1: '#008000', | ||
| red1: '#A31515', | ||
| red2: '#9a050f', | ||
| red3: '#800000', | ||
| red4: '#ff0000', | ||
| gray1: '#393A34', | ||
| cyan1: '#36acaa', | ||
| cyan2: '#2B91AF', | ||
| blue1: '#0000ff', | ||
| blue2: '#00009f', | ||
| }, | ||
| mono: mono, | ||
| }), addonActionsTheme: __assign({}, react_inspector_1.chromeDark, { BASE_FONT_FAMILY: base_1.monoFonts.fontFamily, BASE_BACKGROUND_COLOR: 'transparent' }) }); | ||
| exports.default = dark; |
@@ -0,7 +1,6 @@ | ||
| interface ColorsHash { | ||
| [key: string]: string; | ||
| } | ||
| export declare const create: ({ colors, mono }: { | ||
| colors: { | ||
| [key: string]: { | ||
| color: string; | ||
| }; | ||
| }; | ||
| colors: ColorsHash; | ||
| mono: { | ||
@@ -123,1 +122,2 @@ monoTextFace: string; | ||
| }; | ||
| export {}; |
@@ -14,27 +14,36 @@ "use strict"; | ||
| Object.defineProperty(exports, "__esModule", { value: true }); | ||
| var utils_1 = require("../utils"); | ||
| var convertColors = function (colors) { | ||
| return Object.entries(colors).reduce(function (acc, _a) { | ||
| var k = _a[0], v = _a[1]; | ||
| var _b; | ||
| return (__assign({}, acc, (_b = {}, _b[k] = utils_1.mkColor(v), _b))); | ||
| }, {}); | ||
| }; | ||
| exports.create = function (_a) { | ||
| var colors = _a.colors, mono = _a.mono; | ||
| return ({ | ||
| var colorsObjs = convertColors(colors); | ||
| return { | ||
| token: { | ||
| fontFamily: mono.monoTextFace, | ||
| WebkitFontSmoothing: 'antialiased', | ||
| '&.comment': __assign({}, colors.green1, { fontStyle: 'italic' }), | ||
| '&.prolog': __assign({}, colors.green1, { fontStyle: 'italic' }), | ||
| '&.doctype': __assign({}, colors.green1, { fontStyle: 'italic' }), | ||
| '&.cdata': __assign({}, colors.green1, { fontStyle: 'italic' }), | ||
| '&.string': colors.red1, | ||
| '&.punctuation': colors.gray1, | ||
| '&.operator': colors.gray1, | ||
| '&.url': colors.cyan1, | ||
| '&.symbol': colors.cyan1, | ||
| '&.number': colors.cyan1, | ||
| '&.boolean': colors.cyan1, | ||
| '&.variable': colors.cyan1, | ||
| '&.constant': colors.cyan1, | ||
| '&.inserted': colors.cyan1, | ||
| '&.atrule': colors.blue1, | ||
| '&.keyword': colors.blue1, | ||
| '&.attr-value': colors.blue1, | ||
| '&.function': colors.gray1, | ||
| '&.deleted': colors.red2, | ||
| '&.comment': __assign({}, colorsObjs.green1, { fontStyle: 'italic' }), | ||
| '&.prolog': __assign({}, colorsObjs.green1, { fontStyle: 'italic' }), | ||
| '&.doctype': __assign({}, colorsObjs.green1, { fontStyle: 'italic' }), | ||
| '&.cdata': __assign({}, colorsObjs.green1, { fontStyle: 'italic' }), | ||
| '&.string': colorsObjs.red1, | ||
| '&.punctuation': colorsObjs.gray1, | ||
| '&.operator': colorsObjs.gray1, | ||
| '&.url': colorsObjs.cyan1, | ||
| '&.symbol': colorsObjs.cyan1, | ||
| '&.number': colorsObjs.cyan1, | ||
| '&.boolean': colorsObjs.cyan1, | ||
| '&.variable': colorsObjs.cyan1, | ||
| '&.constant': colorsObjs.cyan1, | ||
| '&.inserted': colorsObjs.cyan1, | ||
| '&.atrule': colorsObjs.blue1, | ||
| '&.keyword': colorsObjs.blue1, | ||
| '&.attr-value': colorsObjs.blue1, | ||
| '&.function': colorsObjs.gray1, | ||
| '&.deleted': colorsObjs.red2, | ||
| '&.important': { | ||
@@ -49,18 +58,18 @@ fontWeight: 'bold', | ||
| }, | ||
| '&.class-name': colors.cyan2, | ||
| '&.tag': colors.red3, | ||
| '&.selector': colors.red3, | ||
| '&.attr-name': colors.red4, | ||
| '&.property': colors.red4, | ||
| '&.regex': colors.red4, | ||
| '&.entity': colors.red4, | ||
| '&.directive.tag .tag': __assign({ background: '#ffff00' }, colors.gray1), | ||
| '&.class-name': colorsObjs.cyan2, | ||
| '&.tag': colorsObjs.red3, | ||
| '&.selector': colorsObjs.red3, | ||
| '&.attr-name': colorsObjs.red4, | ||
| '&.property': colorsObjs.red4, | ||
| '&.regex': colorsObjs.red4, | ||
| '&.entity': colorsObjs.red4, | ||
| '&.directive.tag .tag': __assign({ background: '#ffff00' }, colorsObjs.gray1), | ||
| }, | ||
| 'language-json .token.boolean': colors.blue1, | ||
| 'language-json .token.number': colors.blue1, | ||
| 'language-json .token.property': colors.cyan2, | ||
| 'language-json .token.boolean': colorsObjs.blue1, | ||
| 'language-json .token.number': colorsObjs.blue1, | ||
| 'language-json .token.property': colorsObjs.cyan2, | ||
| namespace: { | ||
| opacity: 0.7, | ||
| }, | ||
| }); | ||
| }; | ||
| }; |
@@ -1,149 +0,3 @@ | ||
| declare const light: { | ||
| inputFill: string; | ||
| dimmedTextColor: string; | ||
| highlightColor: string; | ||
| menuHighlightColor: string; | ||
| successColor: string; | ||
| failColor: string; | ||
| warnColor: string; | ||
| monoTextFace: string; | ||
| overlayBackground: string; | ||
| brand: { | ||
| ({ title }: { | ||
| title: string; | ||
| }): JSX.Element; | ||
| propTypes: { | ||
| title: import("prop-types").Validator<string>; | ||
| }; | ||
| }; | ||
| code: { | ||
| token: { | ||
| fontFamily: string; | ||
| WebkitFontSmoothing: string; | ||
| '&.comment': { | ||
| fontStyle: string; | ||
| color: string; | ||
| }; | ||
| '&.prolog': { | ||
| fontStyle: string; | ||
| color: string; | ||
| }; | ||
| '&.doctype': { | ||
| fontStyle: string; | ||
| color: string; | ||
| }; | ||
| '&.cdata': { | ||
| fontStyle: string; | ||
| color: string; | ||
| }; | ||
| '&.string': { | ||
| color: string; | ||
| }; | ||
| '&.punctuation': { | ||
| color: string; | ||
| }; | ||
| '&.operator': { | ||
| color: string; | ||
| }; | ||
| '&.url': { | ||
| color: string; | ||
| }; | ||
| '&.symbol': { | ||
| color: string; | ||
| }; | ||
| '&.number': { | ||
| color: string; | ||
| }; | ||
| '&.boolean': { | ||
| color: string; | ||
| }; | ||
| '&.variable': { | ||
| color: string; | ||
| }; | ||
| '&.constant': { | ||
| color: string; | ||
| }; | ||
| '&.inserted': { | ||
| color: string; | ||
| }; | ||
| '&.atrule': { | ||
| color: string; | ||
| }; | ||
| '&.keyword': { | ||
| color: string; | ||
| }; | ||
| '&.attr-value': { | ||
| color: string; | ||
| }; | ||
| '&.function': { | ||
| color: string; | ||
| }; | ||
| '&.deleted': { | ||
| color: string; | ||
| }; | ||
| '&.important': { | ||
| fontWeight: string; | ||
| }; | ||
| '&.bold': { | ||
| fontWeight: string; | ||
| }; | ||
| '&.italic': { | ||
| fontStyle: string; | ||
| }; | ||
| '&.class-name': { | ||
| color: string; | ||
| }; | ||
| '&.tag': { | ||
| color: string; | ||
| }; | ||
| '&.selector': { | ||
| color: string; | ||
| }; | ||
| '&.attr-name': { | ||
| color: string; | ||
| }; | ||
| '&.property': { | ||
| color: string; | ||
| }; | ||
| '&.regex': { | ||
| color: string; | ||
| }; | ||
| '&.entity': { | ||
| color: string; | ||
| }; | ||
| '&.directive.tag .tag': { | ||
| color: string; | ||
| background: string; | ||
| }; | ||
| }; | ||
| 'language-json .token.boolean': { | ||
| color: string; | ||
| }; | ||
| 'language-json .token.number': { | ||
| color: string; | ||
| }; | ||
| 'language-json .token.property': { | ||
| color: string; | ||
| }; | ||
| namespace: { | ||
| opacity: number; | ||
| }; | ||
| }; | ||
| addonActionsTheme: any; | ||
| asideFill: string; | ||
| asideSelected: { | ||
| color: string; | ||
| }; | ||
| layoutMargin: number; | ||
| barFill: string; | ||
| barSelectedColor: string; | ||
| mainBackground: string; | ||
| mainBorder: string; | ||
| mainBorderColor: string; | ||
| mainBorderRadius: number; | ||
| mainFill: string; | ||
| mainTextFace: string; | ||
| mainTextColor: string; | ||
| mainTextSize: number; | ||
| }; | ||
| import { Theme } from '../base'; | ||
| declare const light: Theme; | ||
| export default light; |
@@ -16,17 +16,4 @@ "use strict"; | ||
| var light_syntax_1 = require("./light-syntax"); | ||
| var brand_1 = require("../brand"); | ||
| var base_1 = require("../base"); | ||
| var utils_1 = require("../utils"); | ||
| var colors = { | ||
| green1: utils_1.mkColor('#008000'), | ||
| red1: utils_1.mkColor('#A31515'), | ||
| red2: utils_1.mkColor('#9a050f'), | ||
| red3: utils_1.mkColor('#800000'), | ||
| red4: utils_1.mkColor('#ff0000'), | ||
| gray1: utils_1.mkColor('#393A34'), | ||
| cyan1: utils_1.mkColor('#36acaa'), | ||
| cyan2: utils_1.mkColor('#2B91AF'), | ||
| blue1: utils_1.mkColor('#0000ff'), | ||
| blue2: utils_1.mkColor('#00009f'), | ||
| }; | ||
| var animation_1 = require("../animation"); | ||
| var main = { | ||
@@ -44,3 +31,4 @@ mainBackground: '#f6f9fc linear-gradient(to bottom right, rgba(0,0,0,0), rgba(0,0,0,0.1))', | ||
| barFill: 'rgba(255,255,255,1)', | ||
| barSelectedColor: 'rgba(0,0,0,0.1)', | ||
| barTextColor: base_1.color.mediumdark, | ||
| barSelectedColor: base_1.color.secondary, | ||
| }; | ||
@@ -53,4 +41,8 @@ var layout = { | ||
| asideSelected: { | ||
| color: '#9fdaff', | ||
| background: base_1.color.secondary, | ||
| color: base_1.color.lightest, | ||
| }, | ||
| asideHover: { | ||
| background: '#EAF3FC', | ||
| }, | ||
| }; | ||
@@ -60,3 +52,23 @@ var mono = { | ||
| }; | ||
| var light = __assign({}, main, bar, layout, mono, aside, { inputFill: 'rgba(0,0,0,0.1)', dimmedTextColor: 'rgba(0,0,0,0.4)', highlightColor: '#9fdaff', menuHighlightColor: '#1ea7fd', successColor: '#09833a', failColor: '#d53535', warnColor: 'orange', monoTextFace: base_1.monoFonts.fontFamily, overlayBackground: 'linear-gradient(to bottom right, rgba(233, 233, 233, 0.6), rgba(255, 255, 255, 0.8))', brand: brand_1.Brand, code: light_syntax_1.create({ colors: colors, mono: mono }), addonActionsTheme: __assign({}, react_inspector_1.chromeLight, { BASE_FONT_FAMILY: base_1.monoFonts.fontFamily, BASE_BACKGROUND_COLOR: 'transparent' }) }); | ||
| var light = __assign({}, main, bar, layout, mono, aside, { | ||
| // DOM: official global style vars | ||
| color: base_1.color, | ||
| background: base_1.background, | ||
| typography: base_1.typography, | ||
| easing: animation_1.easing, | ||
| animation: animation_1.animation, inputFill: 'rgba(0,0,0,0.1)', dimmedTextColor: 'rgba(0,0,0,0.4)', menuHighlightColor: '#199EFF', monoTextFace: base_1.monoFonts.fontFamily, brand: null, code: light_syntax_1.create({ | ||
| colors: { | ||
| green1: '#008000', | ||
| red1: '#A31515', | ||
| red2: '#9a050f', | ||
| red3: '#800000', | ||
| red4: '#ff0000', | ||
| gray1: '#393A34', | ||
| cyan1: '#36acaa', | ||
| cyan2: '#2B91AF', | ||
| blue1: '#0000ff', | ||
| blue2: '#00009f', | ||
| }, | ||
| mono: mono, | ||
| }), addonActionsTheme: __assign({}, react_inspector_1.chromeLight, { BASE_FONT_FAMILY: base_1.monoFonts.fontFamily, BASE_BACKGROUND_COLOR: 'transparent' }) }); | ||
| exports.default = light; |
| { | ||
| "name": "@storybook/theming", | ||
| "version": "5.0.0-alpha.10", | ||
| "version": "5.0.0-alpha.11", | ||
| "description": "Core Storybook Components", | ||
@@ -36,3 +36,3 @@ "keywords": [ | ||
| }, | ||
| "gitHead": "aed4c6c3c54623433e25133f39c0a74691eb4c19" | ||
| "gitHead": "6ecf42b4e75b646edb1df40ab7c306288c46387c" | ||
| } |
127
src/base.ts
@@ -0,16 +1,14 @@ | ||
| import { easing, animation } from './animation'; | ||
| export const baseFonts = { | ||
| fontFamily: [ | ||
| '"Nunito Sans"', | ||
| '-apple-system', | ||
| '".SFNSText-Regular"', | ||
| '"San Francisco"', | ||
| 'BlinkMacSystemFont, "Segoe UI"', | ||
| '"Roboto"', | ||
| '"Oxygen"', | ||
| '"Ubuntu"', | ||
| '"Cantarell"', | ||
| '"Fira Sans"', | ||
| '"Droid Sans"', | ||
| 'BlinkMacSystemFont', | ||
| '"Segoe UI"', | ||
| '"Helvetica Neue"', | ||
| '"Lucida Grande"', | ||
| '"Arial"', | ||
| 'Helvetica', | ||
| 'Arial', | ||
| 'sans-serif', | ||
@@ -37,1 +35,112 @@ ].join(', '), | ||
| }; | ||
| export const color = { | ||
| // Official color palette | ||
| primary: '#FF4785', // coral | ||
| secondary: '#1EA7FD', // ocean | ||
| tertiary: '#DDDDDD', | ||
| orange: '#FC521F', | ||
| gold: '#FFAE00', | ||
| green: '#66BF3C', | ||
| seafoam: '#37D5D3', | ||
| purple: '#6F2CAC', | ||
| ultraviolet: '#2A0481', | ||
| // Monochrome | ||
| lightest: '#FFFFFF', | ||
| lighter: '#F8F8F8', | ||
| light: '#F3F3F3', | ||
| mediumlight: '#EEEEEE', | ||
| medium: '#DDDDDD', | ||
| mediumdark: '#999999', | ||
| dark: '#666666', | ||
| darker: '#444444', | ||
| darkest: '#333333', | ||
| border: 'rgba(0,0,0,.05)', | ||
| // Status | ||
| positive: '#66BF3C', | ||
| danger: '#FC521F', | ||
| negative: '#FF4400', | ||
| }; | ||
| export const background = { | ||
| app: '#F6F9FC', | ||
| appInverse: '#7A8997', | ||
| // Notification, error, and warning backgrounds | ||
| positive: '#E1FFD4', | ||
| negative: '#FEDED2', | ||
| warning: '#FFF5CF', | ||
| }; | ||
| export const typography = { | ||
| weight: { | ||
| regular: '400', | ||
| bold: '700', | ||
| black: '900', | ||
| }, | ||
| size: { | ||
| s1: '12', | ||
| s2: '14', | ||
| s3: '16', | ||
| m1: '20', | ||
| m2: '24', | ||
| m3: '28', | ||
| l1: '32', | ||
| l2: '40', | ||
| l3: '48', | ||
| code: '90', | ||
| }, | ||
| }; | ||
| export interface Theme { | ||
| color: typeof color; | ||
| background: typeof background; | ||
| typography: typeof typography; | ||
| easing: typeof easing; | ||
| animation: typeof animation; | ||
| mainBackground: string; | ||
| mainBorder: string; | ||
| mainBorderColor: string; | ||
| mainBorderRadius: number; | ||
| mainFill: string; | ||
| mainTextFace: string; | ||
| mainTextColor: string; | ||
| mainTextSize: number; | ||
| monoTextFace: string; | ||
| dimmedTextColor: string; | ||
| inputFill: string; | ||
| barFill: string; | ||
| barTextColor: string; | ||
| barSelectedColor: string; | ||
| layoutMargin: number; | ||
| asideFill: string; | ||
| asideSelected: { | ||
| [key: string]: string | number; | ||
| }; | ||
| asideHover: { | ||
| [key: string]: string | number; | ||
| }; | ||
| brand: (() => object) | null; | ||
| code: { | ||
| [key: string]: string | object; | ||
| }; | ||
| addonActionsTheme: { | ||
| [key: string]: string | object; | ||
| }; | ||
| // unknown if still used | ||
| menuHighlightColor: string; | ||
| } |
@@ -1,64 +0,81 @@ | ||
| export const create = ({ colors, mono }: { colors: { [key: string]: { color: string } }; mono: { monoTextFace: string } }) => ({ | ||
| token: { | ||
| fontFamily: mono.monoTextFace, | ||
| WebkitFontSmoothing: 'antialiased', | ||
| import { mkColor } from '../utils'; | ||
| '&.comment': { ...colors.green1, fontStyle: 'italic' }, | ||
| '&.prolog': { ...colors.green1, fontStyle: 'italic' }, | ||
| '&.doctype': { ...colors.green1, fontStyle: 'italic' }, | ||
| '&.cdata': { ...colors.green1, fontStyle: 'italic' }, | ||
| interface ColorsHash { | ||
| [key: string]: string; | ||
| } | ||
| interface ColorsObjectsHash { | ||
| [key: string]: { | ||
| color: string; | ||
| }; | ||
| } | ||
| '&.string': colors.red1, | ||
| const convertColors = (colors: ColorsHash): ColorsObjectsHash => | ||
| Object.entries(colors).reduce((acc, [k, v]) => ({ ...acc, [k]: mkColor(v) }), {}); | ||
| '&.punctuation': colors.gray1, | ||
| '&.operator': colors.gray1, | ||
| export const create = ({ colors, mono }: { colors: ColorsHash; mono: { monoTextFace: string } }) => { | ||
| const colorsObjs = convertColors(colors); | ||
| return { | ||
| token: { | ||
| fontFamily: mono.monoTextFace, | ||
| WebkitFontSmoothing: 'antialiased', | ||
| '&.url': colors.cyan1, | ||
| '&.symbol': colors.cyan1, | ||
| '&.number': colors.cyan1, | ||
| '&.boolean': colors.cyan1, | ||
| '&.variable': colors.cyan1, | ||
| '&.constant': colors.cyan1, | ||
| '&.inserted': colors.cyan1, | ||
| '&.comment': { ...colorsObjs.green1, fontStyle: 'italic' }, | ||
| '&.prolog': { ...colorsObjs.green1, fontStyle: 'italic' }, | ||
| '&.doctype': { ...colorsObjs.green1, fontStyle: 'italic' }, | ||
| '&.cdata': { ...colorsObjs.green1, fontStyle: 'italic' }, | ||
| '&.atrule': colors.blue1, | ||
| '&.keyword': colors.blue1, | ||
| '&.attr-value': colors.blue1, | ||
| '&.string': colorsObjs.red1, | ||
| '&.function': colors.gray1, | ||
| '&.deleted': colors.red2, | ||
| '&.punctuation': colorsObjs.gray1, | ||
| '&.operator': colorsObjs.gray1, | ||
| '&.important': { | ||
| fontWeight: 'bold', | ||
| }, | ||
| '&.bold': { | ||
| fontWeight: 'bold', | ||
| }, | ||
| '&.url': colorsObjs.cyan1, | ||
| '&.symbol': colorsObjs.cyan1, | ||
| '&.number': colorsObjs.cyan1, | ||
| '&.boolean': colorsObjs.cyan1, | ||
| '&.variable': colorsObjs.cyan1, | ||
| '&.constant': colorsObjs.cyan1, | ||
| '&.inserted': colorsObjs.cyan1, | ||
| '&.italic': { | ||
| fontStyle: 'italic', | ||
| }, | ||
| '&.atrule': colorsObjs.blue1, | ||
| '&.keyword': colorsObjs.blue1, | ||
| '&.attr-value': colorsObjs.blue1, | ||
| '&.class-name': colors.cyan2, | ||
| '&.function': colorsObjs.gray1, | ||
| '&.deleted': colorsObjs.red2, | ||
| '&.tag': colors.red3, | ||
| '&.selector': colors.red3, | ||
| '&.important': { | ||
| fontWeight: 'bold', | ||
| }, | ||
| '&.bold': { | ||
| fontWeight: 'bold', | ||
| }, | ||
| '&.attr-name': colors.red4, | ||
| '&.property': colors.red4, | ||
| '&.regex': colors.red4, | ||
| '&.entity': colors.red4, | ||
| '&.italic': { | ||
| fontStyle: 'italic', | ||
| }, | ||
| '&.directive.tag .tag': { | ||
| background: '#ffff00', | ||
| ...colors.gray1, | ||
| '&.class-name': colorsObjs.cyan2, | ||
| '&.tag': colorsObjs.red3, | ||
| '&.selector': colorsObjs.red3, | ||
| '&.attr-name': colorsObjs.red4, | ||
| '&.property': colorsObjs.red4, | ||
| '&.regex': colorsObjs.red4, | ||
| '&.entity': colorsObjs.red4, | ||
| '&.directive.tag .tag': { | ||
| background: '#ffff00', | ||
| ...colorsObjs.gray1, | ||
| }, | ||
| }, | ||
| }, | ||
| 'language-json .token.boolean': colors.blue1, | ||
| 'language-json .token.number': colors.blue1, | ||
| 'language-json .token.property': colors.cyan2, | ||
| 'language-json .token.boolean': colorsObjs.blue1, | ||
| 'language-json .token.number': colorsObjs.blue1, | ||
| 'language-json .token.property': colorsObjs.cyan2, | ||
| namespace: { | ||
| opacity: 0.7, | ||
| }, | ||
| }); | ||
| namespace: { | ||
| opacity: 0.7, | ||
| }, | ||
| }; | ||
| }; |
| import { chromeDark } from 'react-inspector'; | ||
| import { mkColor } from '../utils'; | ||
| import { create as createSyntax } from './dark-syntax'; | ||
| import { create as createSyntax } from './light-syntax'; | ||
| import { baseFonts, monoFonts } from '../base'; | ||
| import { baseFonts, monoFonts, color, Theme, typography } from '../base'; | ||
| import { easing, animation } from '../animation'; | ||
| const colors = { | ||
| green1: mkColor('#008000'), | ||
| red1: mkColor('#A31515'), | ||
| red2: mkColor('#9a050f'), | ||
| red3: mkColor('#800000'), | ||
| red4: mkColor('#ff0000'), | ||
| gray1: mkColor('#393A34'), | ||
| cyan1: mkColor('#36acaa'), | ||
| cyan2: mkColor('#2B91AF'), | ||
| blue1: mkColor('#0000ff'), | ||
| blue2: mkColor('#00009f'), | ||
| const background = { | ||
| app: '#F6F9FC', | ||
| appInverse: '#7A8997', | ||
| positive: '#E1FFD4', | ||
| negative: '#FEDED2', | ||
| warning: '#FFF5CF', | ||
| }; | ||
| const main = { | ||
| mainBackground: '#112 linear-gradient(to right, #112, #333)', | ||
| mainBorder: '1px solid rgba(255,255,255,0.1)', | ||
| mainBorderColor: 'rgba(255,255,255,0.1)', | ||
| mainBackground: '#1F1F1F', | ||
| mainBorder: '1px solid rgba(255, 255, 255, 0.1)', | ||
| mainBorderColor: 'rgba(255, 255, 255, 0.1)', | ||
| mainBorderRadius: 4, | ||
| mainFill: 'rgba(255,255,255,0.1)', | ||
| mainFill: 'rgba(255,255,255,0.01)', | ||
| mainTextFace: baseFonts.fontFamily, | ||
@@ -32,4 +27,5 @@ mainTextColor: '#efefef', | ||
| const bar = { | ||
| barFill: 'rgba(0,0,0,1)', | ||
| barSelectedColor: 'rgba(255,255,255,0.4)', | ||
| barFill: 'rgba(255,255,255,1)', | ||
| barTextColor: color.mediumdark, | ||
| barSelectedColor: color.secondary, | ||
| }; | ||
@@ -41,14 +37,18 @@ | ||
| const mono = { | ||
| monoTextFace: monoFonts.fontFamily, | ||
| }; | ||
| const aside = { | ||
| asideFill: 'linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%)', | ||
| asideFill: 'transparent', | ||
| asideSelected: { | ||
| color: '#9fdaff', | ||
| background: color.secondary, | ||
| color: color.lightest, | ||
| }, | ||
| asideHover: { | ||
| background: '#EAF3FC', | ||
| }, | ||
| }; | ||
| const dark = { | ||
| const mono = { | ||
| monoTextFace: monoFonts.fontFamily, | ||
| }; | ||
| const dark: Theme = { | ||
| ...main, | ||
@@ -59,15 +59,31 @@ ...bar, | ||
| ...aside, | ||
| inputFill: 'rgba(0,0,0,1)', | ||
| dimmedTextColor: 'rgba(255,255,255,0.4)', | ||
| highlightColor: '#9fdaff', | ||
| menuHighlightColor: '#1ea7fd', | ||
| successColor: '#0edf62', | ||
| failColor: '#ff3f3f', | ||
| warnColor: 'orange', | ||
| overlayBackground: 'linear-gradient(to bottom right, rgba(17, 17, 34, 0.6), rgba(51, 51, 51, 0.8))', | ||
| colors, | ||
| color, | ||
| background, | ||
| typography, | ||
| easing, | ||
| animation, | ||
| code: createSyntax({ colors, mono }), | ||
| inputFill: 'rgba(0,0,0,0.1)', | ||
| dimmedTextColor: 'rgba(0,0,0,0.4)', | ||
| menuHighlightColor: '#199EFF', | ||
| monoTextFace: monoFonts.fontFamily, | ||
| brand: null, | ||
| code: createSyntax({ | ||
| colors: { | ||
| green1: '#008000', | ||
| red1: '#A31515', | ||
| red2: '#9a050f', | ||
| red3: '#800000', | ||
| red4: '#ff0000', | ||
| gray1: '#393A34', | ||
| cyan1: '#36acaa', | ||
| cyan2: '#2B91AF', | ||
| blue1: '#0000ff', | ||
| blue2: '#00009f', | ||
| }, | ||
| mono, | ||
| }), | ||
| addonActionsTheme: { | ||
@@ -74,0 +90,0 @@ ...chromeDark, |
@@ -1,64 +0,82 @@ | ||
| export const create = ({ colors, mono }: { colors: { [key: string]: { color: string } }; mono: { monoTextFace: string } }) => ({ | ||
| token: { | ||
| fontFamily: mono.monoTextFace, | ||
| WebkitFontSmoothing: 'antialiased', | ||
| import { mkColor } from '../utils'; | ||
| '&.comment': { ...colors.green1, fontStyle: 'italic' }, | ||
| '&.prolog': { ...colors.green1, fontStyle: 'italic' }, | ||
| '&.doctype': { ...colors.green1, fontStyle: 'italic' }, | ||
| '&.cdata': { ...colors.green1, fontStyle: 'italic' }, | ||
| interface ColorsHash { | ||
| [key: string]: string; | ||
| } | ||
| interface ColorsObjectsHash { | ||
| [key: string]: { | ||
| color: string; | ||
| }; | ||
| } | ||
| '&.string': colors.red1, | ||
| const convertColors = (colors: ColorsHash): ColorsObjectsHash => | ||
| Object.entries(colors).reduce((acc, [k, v]) => ({ ...acc, [k]: mkColor(v) }), {}); | ||
| '&.punctuation': colors.gray1, | ||
| '&.operator': colors.gray1, | ||
| export const create = ({ colors, mono }: { colors: ColorsHash; mono: { monoTextFace: string } }) => { | ||
| const colorsObjs = convertColors(colors); | ||
| '&.url': colors.cyan1, | ||
| '&.symbol': colors.cyan1, | ||
| '&.number': colors.cyan1, | ||
| '&.boolean': colors.cyan1, | ||
| '&.variable': colors.cyan1, | ||
| '&.constant': colors.cyan1, | ||
| '&.inserted': colors.cyan1, | ||
| return { | ||
| token: { | ||
| fontFamily: mono.monoTextFace, | ||
| WebkitFontSmoothing: 'antialiased', | ||
| '&.atrule': colors.blue1, | ||
| '&.keyword': colors.blue1, | ||
| '&.attr-value': colors.blue1, | ||
| '&.comment': { ...colorsObjs.green1, fontStyle: 'italic' }, | ||
| '&.prolog': { ...colorsObjs.green1, fontStyle: 'italic' }, | ||
| '&.doctype': { ...colorsObjs.green1, fontStyle: 'italic' }, | ||
| '&.cdata': { ...colorsObjs.green1, fontStyle: 'italic' }, | ||
| '&.function': colors.gray1, | ||
| '&.deleted': colors.red2, | ||
| '&.string': colorsObjs.red1, | ||
| '&.important': { | ||
| fontWeight: 'bold', | ||
| }, | ||
| '&.bold': { | ||
| fontWeight: 'bold', | ||
| }, | ||
| '&.punctuation': colorsObjs.gray1, | ||
| '&.operator': colorsObjs.gray1, | ||
| '&.italic': { | ||
| fontStyle: 'italic', | ||
| }, | ||
| '&.url': colorsObjs.cyan1, | ||
| '&.symbol': colorsObjs.cyan1, | ||
| '&.number': colorsObjs.cyan1, | ||
| '&.boolean': colorsObjs.cyan1, | ||
| '&.variable': colorsObjs.cyan1, | ||
| '&.constant': colorsObjs.cyan1, | ||
| '&.inserted': colorsObjs.cyan1, | ||
| '&.class-name': colors.cyan2, | ||
| '&.atrule': colorsObjs.blue1, | ||
| '&.keyword': colorsObjs.blue1, | ||
| '&.attr-value': colorsObjs.blue1, | ||
| '&.tag': colors.red3, | ||
| '&.selector': colors.red3, | ||
| '&.function': colorsObjs.gray1, | ||
| '&.deleted': colorsObjs.red2, | ||
| '&.attr-name': colors.red4, | ||
| '&.property': colors.red4, | ||
| '&.regex': colors.red4, | ||
| '&.entity': colors.red4, | ||
| '&.important': { | ||
| fontWeight: 'bold', | ||
| }, | ||
| '&.bold': { | ||
| fontWeight: 'bold', | ||
| }, | ||
| '&.directive.tag .tag': { | ||
| background: '#ffff00', | ||
| ...colors.gray1, | ||
| '&.italic': { | ||
| fontStyle: 'italic', | ||
| }, | ||
| '&.class-name': colorsObjs.cyan2, | ||
| '&.tag': colorsObjs.red3, | ||
| '&.selector': colorsObjs.red3, | ||
| '&.attr-name': colorsObjs.red4, | ||
| '&.property': colorsObjs.red4, | ||
| '&.regex': colorsObjs.red4, | ||
| '&.entity': colorsObjs.red4, | ||
| '&.directive.tag .tag': { | ||
| background: '#ffff00', | ||
| ...colorsObjs.gray1, | ||
| }, | ||
| }, | ||
| }, | ||
| 'language-json .token.boolean': colors.blue1, | ||
| 'language-json .token.number': colors.blue1, | ||
| 'language-json .token.property': colors.cyan2, | ||
| 'language-json .token.boolean': colorsObjs.blue1, | ||
| 'language-json .token.number': colorsObjs.blue1, | ||
| 'language-json .token.property': colorsObjs.cyan2, | ||
| namespace: { | ||
| opacity: 0.7, | ||
| }, | ||
| }); | ||
| namespace: { | ||
| opacity: 0.7, | ||
| }, | ||
| }; | ||
| }; |
| import { chromeLight } from 'react-inspector'; | ||
| import { create as createSyntax } from './light-syntax'; | ||
| import { Brand } from '../brand'; | ||
| import { baseFonts, monoFonts } from '../base'; | ||
| import { baseFonts, monoFonts, color, background, typography, Theme } from '../base'; | ||
| import { easing, animation } from '../animation'; | ||
| import { mkColor } from '../utils'; | ||
| const colors = { | ||
| green1: mkColor('#008000'), | ||
| red1: mkColor('#A31515'), | ||
| red2: mkColor('#9a050f'), | ||
| red3: mkColor('#800000'), | ||
| red4: mkColor('#ff0000'), | ||
| gray1: mkColor('#393A34'), | ||
| cyan1: mkColor('#36acaa'), | ||
| cyan2: mkColor('#2B91AF'), | ||
| blue1: mkColor('#0000ff'), | ||
| blue2: mkColor('#00009f'), | ||
| }; | ||
| const main = { | ||
@@ -35,3 +20,4 @@ mainBackground: '#f6f9fc linear-gradient(to bottom right, rgba(0,0,0,0), rgba(0,0,0,0.1))', | ||
| barFill: 'rgba(255,255,255,1)', | ||
| barSelectedColor: 'rgba(0,0,0,0.1)', | ||
| barTextColor: color.mediumdark, | ||
| barSelectedColor: color.secondary, | ||
| }; | ||
@@ -46,4 +32,8 @@ | ||
| asideSelected: { | ||
| color: '#9fdaff', | ||
| background: color.secondary, | ||
| color: color.lightest, | ||
| }, | ||
| asideHover: { | ||
| background: '#EAF3FC', | ||
| }, | ||
| }; | ||
@@ -55,3 +45,3 @@ | ||
| const light = { | ||
| const light: Theme = { | ||
| ...main, | ||
@@ -62,15 +52,32 @@ ...bar, | ||
| ...aside, | ||
| // DOM: official global style vars | ||
| color, | ||
| background, | ||
| typography, | ||
| easing, | ||
| animation, | ||
| inputFill: 'rgba(0,0,0,0.1)', | ||
| dimmedTextColor: 'rgba(0,0,0,0.4)', | ||
| highlightColor: '#9fdaff', | ||
| menuHighlightColor: '#1ea7fd', | ||
| successColor: '#09833a', | ||
| failColor: '#d53535', | ||
| warnColor: 'orange', | ||
| menuHighlightColor: '#199EFF', | ||
| monoTextFace: monoFonts.fontFamily, | ||
| overlayBackground: 'linear-gradient(to bottom right, rgba(233, 233, 233, 0.6), rgba(255, 255, 255, 0.8))', | ||
| brand: Brand, | ||
| brand: null, | ||
| code: createSyntax({ colors, mono }), | ||
| code: createSyntax({ | ||
| colors: { | ||
| green1: '#008000', | ||
| red1: '#A31515', | ||
| red2: '#9a050f', | ||
| red3: '#800000', | ||
| red4: '#ff0000', | ||
| gray1: '#393A34', | ||
| cyan1: '#36acaa', | ||
| cyan2: '#2B91AF', | ||
| blue1: '#0000ff', | ||
| blue2: '#00009f', | ||
| }, | ||
| mono, | ||
| }), | ||
| addonActionsTheme: { | ||
@@ -77,0 +84,0 @@ ...chromeLight, |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of package files
- increased by10%
33
Worsened metrics
- Total package byte prevSize
- decreased by-17.85%
44481
- Lines of code
- decreased by-20.59%
1446
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes