From 71576a634e6057955087a862185f859ba04f705d Mon Sep 17 00:00:00 2001 From: Dominik Prokop Date: Fri, 8 Feb 2019 14:06:06 +0100 Subject: [PATCH] Do not use js theme variables in sass (poor dev experience for now) --- package.json | 1 - .../grafana-ui/.storybook/webpack.config.js | 6 +- public/sass/_variables.dark.scss | 103 +++++++++--------- public/sass/_variables.light.scss | 92 +++++++--------- public/sass/_variables.scss | 44 ++++---- scripts/webpack/getThemeVariable.js | 50 --------- scripts/webpack/getThemeVariable.test.js | 40 ------- scripts/webpack/sass.rule.js | 6 +- scripts/webpack/webpack.hot.js | 8 +- yarn.lock | 5 - 10 files changed, 117 insertions(+), 238 deletions(-) delete mode 100644 scripts/webpack/getThemeVariable.js delete mode 100644 scripts/webpack/getThemeVariable.test.js diff --git a/package.json b/package.json index 41c319c7f82..5ac751ced3f 100644 --- a/package.json +++ b/package.json @@ -76,7 +76,6 @@ "ng-annotate-webpack-plugin": "^0.3.0", "ngtemplate-loader": "^2.0.1", "node-sass": "^4.11.0", - "node-sass-utils": "^1.1.2", "npm": "^5.4.2", "optimize-css-assets-webpack-plugin": "^4.0.2", "phantomjs-prebuilt": "^2.1.15", diff --git a/packages/grafana-ui/.storybook/webpack.config.js b/packages/grafana-ui/.storybook/webpack.config.js index 4f27b71bb60..307a1142a7d 100644 --- a/packages/grafana-ui/.storybook/webpack.config.js +++ b/packages/grafana-ui/.storybook/webpack.config.js @@ -1,5 +1,4 @@ const path = require('path'); -const getThemeVariable = require('../../../scripts/webpack/getThemeVariable'); module.exports = (baseConfig, env, config) => { config.module.rules.push({ @@ -36,10 +35,7 @@ module.exports = (baseConfig, env, config) => { { loader: 'sass-loader', options: { - sourceMap: false, - functions: { - 'getThemeVariable($themeVar, $themeName: dark)': getThemeVariable, - }, + sourceMap: false }, }, ], diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 16d29ce41f7..149a1247b8e 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -3,69 +3,67 @@ $theme-name: dark; +// Grays // ------------------------- -$black: getThemeVariable('colors.black', $theme-name); -$dark-1: getThemeVariable('colors.dark1', $theme-name); -$dark-2: getThemeVariable('colors.dark2', $theme-name); -$dark-3: getThemeVariable('colors.dark3', $theme-name); -$dark-4: getThemeVariable('colors.dark4', $theme-name); -$dark-5: getThemeVariable('colors.dark5', $theme-name); -$gray-1: getThemeVariable('colors.gray1', $theme-name); -$gray-2: getThemeVariable('colors.gray2', $theme-name); -$gray-3: getThemeVariable('colors.gray3', $theme-name); -$gray-4: getThemeVariable('colors.gray4', $theme-name); -$gray-5: getThemeVariable('colors.gray5', $theme-name); -$gray-6: getThemeVariable('colors.gray6', $theme-name); -$gray-7: getThemeVariable('colors.gray7', $theme-name); - -$gray-blue: getThemeVariable('colors.grayBlue', $theme-name); -$input-black: getThemeVariable('colors.inputBlack', $theme-name); - -$white: getThemeVariable('colors.white', $theme-name); +$black: #000; +$dark-1: #141414; +$dark-2: #1f1f20; +$dark-3: #262628; +$dark-4: #333333; +$dark-5: #444444; +$gray-1: #555555; +$gray-2: #8e8e8e; +$gray-3: #b3b3b3; +$gray-4: #d8d9da; +$gray-5: #ececec; +$gray-7: #fbfbfb; + +$gray-blue: #212327; +$input-black: #09090b; + +$white: #fff; // Accent colors // ------------------------- -$blue: getThemeVariable('colors.blue', $theme-name); -$blue-dark: getThemeVariable('colors.blueDark', $theme-name); -$green: getThemeVariable('colors.green', $theme-name); -$red: getThemeVariable('colors.red', $theme-name); -$yellow: getThemeVariable('colors.yellow', $theme-name); -$pink: getThemeVariable('colors.pink', $theme-name); -$purple: getThemeVariable('colors.purple', $theme-name); -$variable: getThemeVariable('colors.variable', $theme-name); -$orange: getThemeVariable('colors.orange', $theme-name); +$blue: #33b5e5; +$blue-dark: #005f81; +$green: #299c46; +$red: #d44a3a; +$yellow: #ecbb13; +$purple: #9933cc; +$variable: #32d1df; +$orange: #eb7b18; $brand-primary: $orange; $brand-success: $green; $brand-warning: $brand-primary; $brand-danger: $red; -$query-red: getThemeVariable('colors.queryRed', $theme-name); -$query-green: getThemeVariable('colors.queryGreen', $theme-name); -$query-purple: getThemeVariable('colors.queryPurple', $theme-name); -$query-keyword: getThemeVariable('colors.queryKeyword', $theme-name); -$query-orange: getThemeVariable('colors.queryOrange', $theme-name); +$query-red: #e24d42; +$query-green: #74e680; +$query-purple: #fe85fc; +$query-keyword: #66d9ef; +$query-orange: $orange; // Status colors // ------------------------- -$online: getThemeVariable('colors.online', $theme-name); -$warn: getThemeVariable('colors.warn', $theme-name); -$critical: getThemeVariable('colors.critical', $theme-name); +$online: #10a345; +$warn: #f79520; +$critical: #ed2e18; // Scaffolding // ------------------------- -$body-bg: getThemeVariable('colors.bodyBg', $theme-name); -$page-bg: getThemeVariable('colors.pageBg', $theme-name); - -$body-color: getThemeVariable('colors.bodyColor', $theme-name); -$text-color: getThemeVariable('colors.textColor', $theme-name); -$text-color-strong: getThemeVariable('colors.textColorStrong', $theme-name); -$text-color-weak: getThemeVariable('colors.textColorWeak', $theme-name); -$text-color-faint: getThemeVariable('colors.textColorFaint', $theme-name); -$text-color-emphasis: getThemeVariable('colors.textColorEmphasis', $theme-name); - -$text-shadow-strong: 1px 1px 4px getThemeVariable('colors.black', $theme-name); -$text-shadow-faint: 1px 1px 4px #2d2d2d; +$body-bg: rgb(23, 24, 25); +$page-bg: rgb(22, 23, 25); + +$body-color: $gray-4; +$text-color: $gray-4; +$text-color-strong: $white; +$text-color-weak: $gray-2; +$text-color-faint: $dark-5; +$text-color-emphasis: $gray-5; + +$text-shadow-faint: 1px 1px 4px rgb(45, 45, 45); $textShadow: none; // gradients @@ -81,11 +79,10 @@ $edit-gradient: linear-gradient(180deg, rgb(22, 23, 25) 50%, #090909); // Links // ------------------------- -$link-color: getThemeVariable('colors.linkColor', $theme-name); -$link-color-disabled: getThemeVariable('colors.linkColorDisabled', $theme-name); -$link-hover-color: getThemeVariable('colors.linkColorHover', $theme-name); - -$external-link-color: getThemeVariable('colors.linkColorExternal', $theme-name); +$link-color: darken($white, 11%); +$link-color-disabled: darken($link-color, 30%); +$link-hover-color: $white; +$external-link-color: $blue; // Typography // ------------------------- @@ -132,7 +129,7 @@ $list-item-shadow: $card-shadow; $empty-list-cta-bg: $gray-blue; // Scrollbars -$scrollbarBackground: #aeb5df; +$scrollbarBackground: #404357; $scrollbarBackground2: #3a3a3a; $scrollbarBorder: black; diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index a4e4e806a68..97d7a374765 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -6,66 +6,59 @@ $theme-name: light; // Grays // ------------------------- $black: #000; - -// ------------------------- -$black: getThemeVariable('colors.black', $theme-name); -$dark-1: getThemeVariable('colors.dark1', $theme-name); -$dark-2: getThemeVariable('colors.dark2', $theme-name); -$dark-3: getThemeVariable('colors.dark3', $theme-name); -$dark-4: getThemeVariable('colors.dark4', $theme-name); -$dark-5: getThemeVariable('colors.dark5', $theme-name); -$gray-1: getThemeVariable('colors.gray1', $theme-name); -$gray-2: getThemeVariable('colors.gray2', $theme-name); -$gray-3: getThemeVariable('colors.gray3', $theme-name); -$gray-4: getThemeVariable('colors.gray4', $theme-name); -$gray-5: getThemeVariable('colors.gray5', $theme-name); -$gray-6: getThemeVariable('colors.gray6', $theme-name); -$gray-7: getThemeVariable('colors.gray7', $theme-name); - -$white: getThemeVariable('colors.white', $theme-name); +$dark-2: #1e2028; +$dark-3: #303133; +$dark-4: #35373f; +$dark-5: #41444b; +$gray-1: #52545c; +$gray-2: #767980; +$gray-3: #acb6bf; +$gray-4: #c7d0d9; +$gray-5: #dde4ed; +$gray-6: #e9edf2; +$gray-7: #f7f8fa; + +$white: #fff; // Accent colors // ------------------------- -$blue: getThemeVariable('colors.blue', $theme-name); -$blue-dark: getThemeVariable('colors.blueDark', $theme-name); -$blue-light: getThemeVariable('colors.blueLight', $theme-name); -$green: getThemeVariable('colors.green', $theme-name); -$red: getThemeVariable('colors.red', $theme-name); -$yellow: getThemeVariable('colors.yellow', $theme-name); -$orange: getThemeVariable('colors.orange', $theme-name); -$pink: getThemeVariable('colors.pink', $theme-name); -$purple: getThemeVariable('colors.purple', $theme-name); -$variable: getThemeVariable('colors.variable', $theme-name); +$blue: #0083b3; +$blue-light: #00a8e6; +$green: #3aa655; +$red: #d44939; +$yellow: #ff851b; +$orange: #ff7941; +$purple: #9954bb; +$variable: $blue; $brand-primary: $orange; $brand-success: $green; $brand-warning: $orange; $brand-danger: $red; -$query-red: getThemeVariable('colors.queryRed', $theme-name); -$query-green: getThemeVariable('colors.queryGreen', $theme-name); -$query-purple: getThemeVariable('colors.queryPurple', $theme-name); -$query-keyword: getThemeVariable('colors.queryKeyword', $theme-name); -$query-orange: getThemeVariable('colors.queryOrange', $theme-name); +$query-red: $red; +$query-green: $green; +$query-purple: $purple; +$query-orange: $orange; +$query-keyword: $blue; // Status colors // ------------------------- -$online: getThemeVariable('colors.online', $theme-name); -$warn: getThemeVariable('colors.warn', $theme-name); -$critical: getThemeVariable('colors.critical', $theme-name); +$online: #01a64f; +$warn: #f79520; +$critical: #ec2128; // Scaffolding // ------------------------- +$body-bg: $gray-7; +$page-bg: $gray-7; -$body-bg: getThemeVariable('colors.bodyBg', $theme-name); -$page-bg: getThemeVariable('colors.pageBg', $theme-name); - -$body-color: getThemeVariable('colors.bodyColor', $theme-name); -$text-color: getThemeVariable('colors.textColor', $theme-name); -$text-color-strong: getThemeVariable('colors.textColorStrong', $theme-name); -$text-color-weak: getThemeVariable('colors.textColorWeak', $theme-name); -$text-color-faint: getThemeVariable('colors.textColorFaint', $theme-name); -$text-color-emphasis: getThemeVariable('colors.textColorEmphasis', $theme-name); +$body-color: $gray-1; +$text-color: $gray-1; +$text-color-strong: $dark-2; +$text-color-weak: $gray-2; +$text-color-faint: $gray-4; +$text-color-emphasis: $dark-5; $text-shadow-faint: none; $textShadow: none; @@ -83,15 +76,14 @@ $edit-gradient: linear-gradient(-60deg, $gray-7, #f5f6f9 70%, $gray-7 98%); // Links // ------------------------- -$link-color: getThemeVariable('colors.linkColor', $theme-name); -$link-color-disabled: getThemeVariable('colors.linkColorDisabled', $theme-name); -$link-hover-color: getThemeVariable('colors.linkColorHover', $theme-name); - -$external-link-color: getThemeVariable('colors.linkColorExternal', $theme-name); +$link-color: $gray-1; +$link-color-disabled: lighten($link-color, 30%); +$link-hover-color: darken($link-color, 20%); +$external-link-color: $blue-light; // Typography // ------------------------- -$headings-color: getThemeVariable('colors.headingColor', $theme-name); +$headings-color: $text-color; $abbr-border-color: $gray-2 !default; $text-muted: $text-color-weak; diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index eab0e8c7f5a..4e9e69c4d2f 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -47,45 +47,45 @@ $enable-flex: true; // Typography // ------------------------- -$font-family-sans-serif: getThemeVariable('typography.fontFamily.sansSerif'); -$font-family-serif: getThemeVariable('typography.fontFamily.serif'); -$font-family-monospace: getThemeVariable('typography.fontFamily.monospace'); +$font-family-sans-serif: 'Roboto', Helvetica, Arial, sans-serif; +$font-family-serif: Georgia, 'Times New Roman', Times, serif; +$font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace; $font-family-base: $font-family-sans-serif !default; -$font-size-root: getThemeVariable('typography.size.m') !default; -$font-size-base: getThemeVariable('typography.size.base') !default; +$font-size-root: 14px !default; +$font-size-base: 13px !default; -$font-size-lg: getThemeVariable('typography.size.l') !default; -$font-size-md: getThemeVariable('typography.size.m') !default; -$font-size-sm: getThemeVariable('typography.size.s') !default; -$font-size-xs: getThemeVariable('typography.size.xs') !default; +$font-size-lg: 18px !default; +$font-size-md: 14px !default; +$font-size-sm: 12px !default; +$font-size-xs: 10px !default; -$line-height-base: getThemeVariable('typography.lineHeight.l') !default; -$font-weight-semi-bold: getThemeVariable('typography.weight.semibold'); +$line-height-base: 1.5 !default; +$font-weight-semi-bold: 500; -$font-size-h1: getThemeVariable('typography.heading.h1') !default; -$font-size-h2: getThemeVariable('typography.heading.h2') !default; -$font-size-h3: getThemeVariable('typography.heading.h3') !default; -$font-size-h4: getThemeVariable('typography.heading.h4') !default; -$font-size-h5: getThemeVariable('typography.heading.h5') !default; -$font-size-h6: getThemeVariable('typography.heading.h6') !default; +$font-size-h1: 2rem !default; +$font-size-h2: 1.75rem !default; +$font-size-h3: 1.5rem !default; +$font-size-h4: 1.3rem !default; +$font-size-h5: 1.2rem !default; +$font-size-h6: 1rem !default; $display1-size: 6rem !default; $display2-size: 5.5rem !default; $display3-size: 4.5rem !default; $display4-size: 3.5rem !default; -$display1-weight: getThemeVariable('typography.weight.normal') !default; -$display2-weight: getThemeVariable('typography.weight.normal') !default; -$display3-weight: getThemeVariable('typography.weight.normal') !default; -$display4-weight: getThe1meVariable('typography.weight.normal') !default; +$display1-weight: 400 !default; +$display2-weight: 400 !default; +$display3-weight: 400 !default; +$display4-weight: 400 !default; $lead-font-size: 1.25rem !default; $lead-font-weight: 300 !default; $headings-margin-bottom: ($spacer / 2) !default; $headings-font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif; -$headings-font-weight: getThemeVariable('typography.weight.normal') !default; +$headings-font-weight: 400 !default; $headings-line-height: 1.1 !default; $hr-border-width: $border-width !default; diff --git a/scripts/webpack/getThemeVariable.js b/scripts/webpack/getThemeVariable.js deleted file mode 100644 index 3bd9b2a53d0..00000000000 --- a/scripts/webpack/getThemeVariable.js +++ /dev/null @@ -1,50 +0,0 @@ -const sass = require('node-sass'); -const sassUtils = require('node-sass-utils')(sass); -const { get } = require('lodash'); -const tinycolor = require('tinycolor2'); -const { getTheme } = require('@grafana/ui/src/themes'); - -const units = ['rem', 'em', 'vh', 'vw', 'vmin', 'vmax', 'ex', '%', 'px', 'cm', 'mm', 'in', 'pt', 'pc', 'ch']; -const matchDimension = value => value.match(/[a-zA-Z]+|[0-9]+/g); - -const isHex = value => { - const hexRegex = /^((0x){0,1}|#{0,1})([0-9A-F]{8}|[0-9A-F]{6})$/gi; - return hexRegex.test(value); -}; - -const isDimension = value => { - if (typeof value !== 'string') { - return false; - } - const [val, unit] = matchDimension(value); - return units.indexOf(unit) > -1; -}; - -/** - * @param {SassString} variablePath - * @param {"dark"|"light"} themeName - */ -function getThemeVariable(variablePath, themeName) { - const theme = getTheme(themeName.getValue()); - const variable = get(theme, variablePath.getValue()); - - if (!variable) { - throw new Error(`${variablePath.getValue()} is not defined for ${themeName.getValue()}`); - } - - if (isHex(variable)) { - const rgb = new tinycolor(variable).toRgb(); - const color = new sass.types.Color(rgb.r, rgb.g, rgb.b); - return color; - } - - if (isDimension(variable)) { - const [value, unit] = matchDimension(variable); - const dimension = new sassUtils.SassDimension(parseInt(value, 10), unit); - return sassUtils.castToSass(dimension); - } - - return sassUtils.castToSass(variable); -} - -module.exports = getThemeVariable; diff --git a/scripts/webpack/getThemeVariable.test.js b/scripts/webpack/getThemeVariable.test.js deleted file mode 100644 index 57a6fb5236c..00000000000 --- a/scripts/webpack/getThemeVariable.test.js +++ /dev/null @@ -1,40 +0,0 @@ -const sass = require('node-sass'); -const getThemeVariable = require('./getThemeVariable'); -const { mockTheme } = require('@grafana/ui'); - -const themeMock = { - color: { - background: '#ff0000', - }, - spacing: { - padding: '2em', - }, - typography: { - fontFamily: 'Arial, sans-serif', - }, -}; - -describe('Variables retrieval', () => { - const restoreTheme = mockTheme(() => themeMock); - - afterAll(() => { - restoreTheme(); - }); - - it('returns sass Color for color values', () => { - const result = getThemeVariable({ getValue: () => 'color.background' }, { getValue: () => {} }); - expect(result).toBeInstanceOf(sass.types.Color); - }); - it('returns sass Number for dimension values', () => { - const result = getThemeVariable({ getValue: () => 'spacing.padding' }, { getValue: () => {} }); - expect(result).toBeInstanceOf(sass.types.Number); - }); - it('returns sass String for string values', () => { - const result = getThemeVariable({ getValue: () => 'typography.fontFamily' }, { getValue: () => {} }); - expect(result).toBeInstanceOf(sass.types.String); - }); - - it('throws for unknown theme paths', () => { - expect(() => getThemeVariable({ getValue: () => 'what.ever' }, { getValue: () => {} })).toThrow(); - }); -}); diff --git a/scripts/webpack/sass.rule.js b/scripts/webpack/sass.rule.js index 78f6b60d33f..66a48a12b32 100644 --- a/scripts/webpack/sass.rule.js +++ b/scripts/webpack/sass.rule.js @@ -1,7 +1,6 @@ 'use strict'; const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const getThemeVariable = require('./getThemeVariable'); module.exports = function(options) { return { @@ -27,10 +26,7 @@ module.exports = function(options) { { loader: 'sass-loader', options: { - sourceMap: options.sourceMap, - functions: { - 'getThemeVariable($themeVar, $themeName: dark)': getThemeVariable, - }, + sourceMap: options.sourceMap }, }, ], diff --git a/scripts/webpack/webpack.hot.js b/scripts/webpack/webpack.hot.js index 4519e292c6b..c1053f1f7da 100644 --- a/scripts/webpack/webpack.hot.js +++ b/scripts/webpack/webpack.hot.js @@ -8,7 +8,6 @@ const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const IgnoreNotFoundExportPlugin = require("./IgnoreNotFoundExportPlugin.js"); -const getThemeVariable = require("./getThemeVariable"); module.exports = merge(common, { entry: { @@ -87,12 +86,7 @@ module.exports = merge(common, { }, }, { - loader: 'sass-loader', - options: { - functions: { - "getThemeVariable($themeVar, $themeName: dark)": getThemeVariable - } - } + loader: 'sass-loader' } ], }, diff --git a/yarn.lock b/yarn.lock index cd3dfbbebd8..df2e1cea37e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11910,11 +11910,6 @@ node-releases@^1.0.0-alpha.11, node-releases@^1.1.3: dependencies: semver "^5.3.0" -node-sass-utils@^1.1.2: - version "1.1.2" - resolved "https://registry.yarnpkg.com/node-sass-utils/-/node-sass-utils-1.1.2.tgz#d03639cfa4fc962398ba3648ab466f0db7cc2131" - integrity sha1-0DY5z6T8liOYujZIq0ZvDbfMITE= - node-sass@^4.11.0: version "4.11.0" resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.11.0.tgz#183faec398e9cbe93ba43362e2768ca988a6369a"