Skip to content

N
nexpie-grafana-theme
Commit 71576a63 by Dominik Prokop
Options

Do not use js theme variables in sass (poor dev experience for now)

parent bb8bec5a
Showing with 117 additions and 238 deletions
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",
......
packages/grafana-ui/.storybook/webpack.config.js
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
},
},
],
......
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;
......
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;
......
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;
......
scripts/webpack/getThemeVariable.js deleted 100644 → 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;
scripts/webpack/getThemeVariable.test.js deleted 100644 → 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();
});
});
scripts/webpack/sass.rule.js
'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
},
},
],
......
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'
}
],
},
......
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"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment