Skip to content

N
nexpie-grafana-theme
Commit c21b3530 by Torkel Ödegaard
Options

ux(): color/grays palate refactoring

parent a73ef353
Showing with 151 additions and 148 deletions
package.json
......@@ -33,6 +33,7 @@
"grunt-karma": "~0.12.1",
"grunt-ng-annotate": "^1.0.1",
"grunt-notify": "^0.4.3",
"grunt-sass": "^1.1.0",
"grunt-string-replace": "~1.2.1",
"grunt-systemjs-builder": "^0.2.5",
"grunt-tslint": "^3.0.1",
......@@ -51,9 +52,9 @@
"phantomjs": "^1.9.19",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"sass-lint": "^1.5.0",
"systemjs": "0.19.20",
"zone.js": "0.5.10",
"grunt-sass": "^1.1.0"
"zone.js": "0.5.10"
},
"engines": {
"node": "0.4.x",
......
public/sass/_variables.dark.scss
......@@ -6,12 +6,22 @@
// -------------------------
$black: #000;
$gray: #bbb;
$gray-dark: #262626;
$gray-darker: #1f1f1f;
$gray-light: #ADAFAE;
$gray-lighter: #BBBFC2;
$white: #fff;
// -------------------------
$black: #000;
$dark-1: #141414; // (body)
$dark-2: #1f1d1d; // ($gray-darker)
$dark-3: #262626; // ($gray-dark)
$dark-4: #333333;
$dark-5: #444444;
$gray-1: #555555;
$gray-2: #6e7580;
$gray-3: #b3b3b3;
$gray-4: #cfd4d9;
$gray-5: #e8edf0;
$gray-6: #f7f9fa;
$gray-7: #fbfbfb;
$white: #fff;
// Accent colors
// -------------------------
......@@ -38,10 +48,10 @@ $critical: #ed2e18;
// Scaffolding
// -------------------------
$body-bg: rgb(20,20,20);
$page-bg: $gray-darker;
$body-color: $gray-lighter;
$text-color: $gray-lighter;
$body-bg: rgb(20,20,20);
$page-bg: $dark-2;
$body-color: $gray-4;
$text-color: $gray-4;
// Links
// -------------------------
......@@ -52,11 +62,11 @@ $link-hover-color: $white;
// Typography
// -------------------------
$headings-color: darken($white,11%);
$abbr-border-color: $gray-light !default;
$text-muted: darken($link-color,30%);
$abbr-border-color: $gray-3 !default;
$text-muted: darken($link-color,30%);
$blockquote-small-color: $gray-light !default;
$blockquote-border-color: $gray-lighter !default;
$blockquote-small-color: $gray-3 !default;
$blockquote-border-color: $gray-4 !default;
$hr-border-color: rgba(0,0,0,.1) !default;
......@@ -66,25 +76,25 @@ $component-active-bg: $brand-primary !default;
// Panel
// -------------------------
$panel-bg: $gray-darker;
$panel-border: solid 1px $gray-dark;
$panel-bg: $dark-2;
$panel-border: solid 1px $dark-3;
$divider-border-color: #555;
$divider-border-color: #555;
// Graphite Target Editor
$tight-form-border: #050505;
$tight-form-bg: $gray-dark;
$tight-form-bg: $dark-3;
$tight-form-func-bg: #333;
$tight-form-func-highlight-bg: #444;
$tight-form-func-bg: #333;
$tight-form-func-highlight-bg: #444;
$modal-background: $black;
$code-tag-bg: #444;
// Lists
$grafanaListBackground: $gray-dark;
$grafanaListAccent: lighten($gray-darker, 2%);
$grafanaListBorderTop: $gray-dark;
$grafanaListBackground: $dark-3;
$grafanaListAccent: lighten($dark-2, 2%);
$grafanaListBorderTop: $dark-3;
$grafanaListBorderBottom: $black;
$grafanaListHighlight: #333;
$grafanaListMainLinkColor: $text-color;
......@@ -98,8 +108,8 @@ $scrollbarBorder: black;
// -------------------------
$table-bg: transparent; // overall background-color
$table-bg-accent: rgba(100, 100, 100, 0.3); // for striping
$table-bg-hover: $gray-dark; // for hover
$table-border: $gray-dark; // table and cell border
$table-bg-hover: $dark-3; // for hover
$table-border: $dark-3; // table and cell border
// Buttons
// -------------------------
......@@ -119,30 +129,27 @@ $btnWarningBackgroundHighlight: lighten($brand-warning, 8%);
$btnDangerBackground: lighten($red, 3%);
$btnDangerBackgroundHighlight: darken($red, 3%);
$btnInverseBackground: $gray-dark;
$btnInverseBackgroundHighlight: lighten($gray-dark, 1%);
$btnInverseBackground: $dark-3;
$btnInverseBackgroundHighlight: lighten($dark-3, 1%);
$btnInverseText: $link-color;
$btnInverseBorder: #333;
$btnText: $gray;
$btnText: $gray-3;
$iconContainerBackground: $black;
$iconContainerBackgroundHighlight: lighten($black, 5%);
$iconContainerBorder: 1px solid transparent;
$iconContainerShadow: 0 0 14px 2px rgba(255,255,255, 0.05);
$iconContainerBackground: $black;
// Forms
// -------------------------
$input-bg: lighten($gray-dark,5%);
$input-bg: lighten($dark-3,5%);
$input-bg-disabled: #555;
$input-color: $gray-light;
$input-border-color: lighten($gray-dark,5%);
$input-color: $gray-4;
$input-border-color: lighten($dark-2,5%);
$input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default;
$input-border-focus: $input-border-color !default;
$input-box-shadow-focus: rgba(102,175,233,.6) !default;
$input-color-placeholder: #999 !default;
$input-label-bg: $gray-dark;
$input-label-bg: $dark-3;
// Search
......@@ -150,7 +157,7 @@ $searchShadow: 0 0 35px 0 $body-bg;
// Dropdowns
// -------------------------
$dropdownBackground: $gray-dark;
$dropdownBackground: $dark-3;
$dropdownBorder: rgba(0,0,0,.2);
$dropdownDividerTop: transparent;
$dropdownDividerBottom: #444;
......@@ -182,12 +189,12 @@ $horizontalComponentOffset: 180px;
$wellBackground: #131517;
$navbarHeight: 52px;
$navbarBackgroundHighlight: $gray-dark;
$navbarBackground: $gray-dark;
$navbarBackgroundHighlight: $dark-3;
$navbarBackground: $dark-3;
$navbarBorder: 1px solid $body-bg;
$navbarText: $gray-light;
$navbarLinkColor: $gray-light;
$navbarText: $gray-4;
$navbarLinkColor: $gray-4;
$navbarLinkColorHover: $white;
$navbarLinkColorActive: $navbarLinkColorHover;
$navbarLinkBackgroundHover: transparent;
......@@ -200,10 +207,8 @@ $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
// Sidemenu
// -------------------------
$sideMenuTopShadow: $navbarDropdownShadow;
$sideMenuBackground: $gray-dark;
$sideMenuBackgroundHighlight: lighten($gray-dark, 4%);
$sideMenuShadow: 0 0 35px 0 $body-bg;
$side-menu-bg: $dark-3;
$side-menu-item-hover-bg: $dark-4;
// Pagination
// -------------------------
......
public/sass/_variables.light.scss
......@@ -10,15 +10,23 @@
// Grays
// -------------------------
$black: #000;
$gray-darker: lighten(#000, 11.5%); // #222
$gray-dark: lighten(#000, 20%); // #333
$gray: lighten(#000, 33.5%); // #555
$gray-light: lighten(#000, 60%); // #999
$gray-light2: lighten(#000, 70%); // #999
$gray-lighter: lighten(#000, 96.5%); // #eee
$gray-lightest: lighten(#000, 98%); // #eee
$white: #fff;
// -------------------------
$black: #000;
$dark-1: #141414; // (body)
$dark-2: #1f1d1d; // ($gray-darker)
$dark-3: #262626; // ($gray-dark)
$dark-4: #333333;
$dark-5: #444444;
$gray-1: #555555;
$gray-2: #7B7B7B;
$gray-3: #b3b3b3;
$gray-4: #D8D9DA;
$gray-5: #ECECEC;
$gray-6: #f4f5f8;
$gray-7: #fbfbfb;
$white: #fff;
// Accent colors
// -------------------------
......@@ -48,23 +56,23 @@ $critical: #EC2128;
$body-bg: $white;
$page-bg: $white;
$body-color: $gray;
$text-color: $gray;
$body-color: $gray-1;
$text-color: $gray-1;
// Links
// -------------------------
$link-color: $gray;
$link-color: $gray-1;
$link-color-disabled: lighten($link-color,30%);
$link-hover-color: darken($link-color, 20%);
// Typography
// -------------------------
$headings-color: $text-color;
$abbr-border-color: $gray-light !default;
$abbr-border-color: $gray-2 !default;
$text-muted: darken($link-color,30%);
$blockquote-small-color: $gray-light !default;
$blockquote-border-color: $gray-lighter !default;
$blockquote-small-color: $gray-2 !default;
$blockquote-border-color: $gray-3 !default;
$hr-border-color: rgba(0,0,0,.1) !default;
......@@ -75,31 +83,27 @@ $component-active-bg: $brand-primary !default;
// Panel
// -------------------------
$panel-bg: $gray-lightest;
$panel-border: solid 1px $gray-lighter;
$divider-border-color: $gray-light;
$panel-bg: $gray-7;
$panel-border: solid 1px $gray-6;
// Submenu
$submenuBackground: rgb(218, 217, 217);
$submenuBorder: $white;
$divider-border-color: $gray-2;
// Graphite Target Editor
$tight-form-border: #ddd;
$tight-form-bg: #efefef;
$tight-form-border: $gray-4;
$tight-form-bg: $gray-6;
$tight-form-func-bg: darken($tight-form-bg, 5%);
$tight-form-func-highlight-bg: darken($tight-form-bg, 10%);
$tight-form-func-bg: $gray-5;
$tight-form-func-highlight-bg: $gray-6;
$modal-background: $body-bg;
$code-tag-bg: #ddd;
$modal-background: $body-bg;
$code-tag-bg: #ddd;
// Lists
$grafanaListBackground: darken($gray-lighter,5%);
$grafanaListAccent: darken($gray-lighter,8%);
$grafanaListBackground: darken($gray-3,5%);
$grafanaListAccent: darken($gray-3,8%);
$grafanaListBorderTop: #eee;
$grafanaListBorderBottom: #eee;
$grafanaListHighlight: darken($gray-lighter,10%);
$grafanaListHighlight: darken($gray-3,10%);
$grafanaListHighlightContrast: #ddd;
$grafanaListMainLinkColor: $text-color;
......@@ -114,14 +118,14 @@ $table-border: #ddd; // table and cell border
// Scrollbars
$scrollbarBackground: $gray-lighter;
$scrollbarBackground2: $gray-lighter;
$scrollbarBorder: $gray-light;
$scrollbarBackground: $gray-3;
$scrollbarBackground2: $gray-3;
$scrollbarBorder: $gray-2;
// Buttons
// -------------------------
$btnBackground: $gray-lighter;
$btnBackgroundHighlight: darken($gray-lighter, 15%);
$btnBackground: $gray-3;
$btnBackgroundHighlight: darken($gray-3, 15%);
$btnBorder: #bbb;
$btn-primary-bg: $brand-primary;
......@@ -139,50 +143,45 @@ $btnWarningBackgroundHighlight: darken($orange, 3%);
$btnDangerBackground: lighten($red, 3%);
$btnDangerBackgroundHighlight: darken($red, 3%);
$btnInverseBackground: $gray-lighter;
$btnInverseBackgroundHighlight: darken($gray-lighter, 5%);
$btnInverseText: $black;
$btnInverseBorder: $gray-light;
$btnText: $gray-lighter;
$btnInverseBackground: $gray-5;
$btnInverseBackgroundHighlight: darken($gray-5, 5%);
$btnInverseText: $dark-4;
$iconContainerBackground: $white;
$iconContainerBackgroundHighlight: lighten($white, 5%);
$iconContainerBorder: 1px solid rgba(0,0,0, 0.05);
$iconContainerShadow: 0 0 14px 2px rgba(0,0,0, 0.05);
$btnText: $gray-3;
$iconContainerBackground: $white;
// Forms
// -------------------------
$input-bg: $white;
$input-bg-disabled: $gray-lighter;
$input-bg: $gray-7;
$input-bg-disabled: $gray-5;
$input-color: #020202;
$input-border-color: $gray-lighter;
$input-box-shadow: inset 0 1px 1px rgba(0,0,0,.075) !default;
$input-border-focus: #66afe9 !default;
$input-box-shadow-focus: rgba(102,175,233,.6) !default;
$input-color-placeholder: #999 !default;
$input-label-bg: #f8f8f8;
$input-color: $dark-3;
$input-border-color: $gray-5;
$input-box-shadow: none;
$input-border-focus: $blue !default;
$input-box-shadow-focus: $blue !default;
$input-color-placeholder: $gray-4 !default;
$input-label-bg: $gray-5;
// Sidemenu
// -------------------------
$sideMenuBackground: $panel-bg;
$sideMenuBackgroundHighlight: darken($sideMenuBackground, 4%);
$side-menu-bg: $body-bg;
$side-menu-item-hover-bg: $gray-6;
// search
$searchShadow: 0 5px 30px 0 lighten($gray-light, 30%);
$searchShadow: 0 5px 30px 0 lighten($gray-2, 30%);
// Dropdowns
// -------------------------
$dropdownBackground: $white;
$dropdownBorder: $tight-form-border;
$dropdownDividerTop: #e5e5e5;
$dropdownDividerTop: $gray-6;
$dropdownDividerBottom: $white;
$dropdownDivider: $dropdownDividerTop;
$dropdownTitle: #333;
$dropdownTitle: $dark-5;
$dropdownLinkColor: $gray-dark;
$dropdownLinkColor: $dark-3;
$dropdownLinkColorHover: $white;
$dropdownLinkColorActive: $white;
......@@ -196,12 +195,12 @@ $dropdownLinkBackgroundHover: $blue;
// Input placeholder text color
// -------------------------
$placeholderText: $gray-light;
$placeholderText: $gray-2;
// Hr border color
// -------------------------
$hrBorder: $gray-lighter;
$hrBorder: $gray-3;
// Horizontal forms & lists
......@@ -211,7 +210,7 @@ $horizontalComponentOffset: 180px;
// Wells
// -------------------------
$wellBackground: $gray-lighter;
$wellBackground: $gray-3;
// Navbar
......@@ -238,7 +237,7 @@ $navbarButtonBackgroundHighlight: lighten($navbarBackground, 5%);
// Pagination
// -------------------------
$paginationBackground: $gray-light;
$paginationBackground: $gray-2;
$paginationBorder: transparent;
$paginationActiveBackground: $blue;
......@@ -265,7 +264,7 @@ $infoBorder: transparent;
// Tooltips and popovers
// -------------------------
$tooltipColor: $white;
$tooltipBackground: $gray-dark;
$tooltipBackground: $gray-4;
$tooltipArrowWidth: 5px;
$tooltipArrowColor: $tooltipBackground;
$tooltipLinkColor: darken($white,11%);
......
public/sass/_variables.scss
......@@ -127,7 +127,7 @@ $lead-font-size: 1.25rem !default;
$lead-font-weight: 300 !default;
$headings-margin-bottom: ($spacer / 2) !default;
$headings-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
$headings-font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
$headings-font-weight: 400 !default;
$headings-line-height: 1.1 !default;
......@@ -145,9 +145,9 @@ $list-inline-padding: 5px !default;
$line-height-lg: (4 / 3) !default;
$line-height-sm: 1.5 !default;
$border-radius: 0.0rem !default;
$border-radius: 0.2rem !default;
$border-radius-lg: 0.3rem !default;
$border-radius-sm: 0.2rem !default;
$border-radius-sm: 0.1rem !default;
$caret-width: .3em !default;
$caret-width-lg: $caret-width !default;
......
public/sass/base/_forms.scss
......@@ -14,14 +14,14 @@ legend {
margin-bottom: $line-height-base;
font-size: $font-size-base * 1.5;
line-height: $line-height-base * 2;
color: $gray-dark;
color: $gray-3;
border: 0;
border-bottom: 1px solid #e5e5e5;
// Small
small {
font-size: $line-height-base * .75;
color: $gray-light;
color: $gray-2;
}
}
......
public/sass/base/_type.scss
......@@ -27,9 +27,9 @@ em { font-style: italic; color: $headings-color; }
cite { font-style: normal; }
// Utility classes
.muted { color: $gray-light; }
.muted { color: $gray-2; }
a.muted:hover,
a.muted:focus { color: darken($gray-light, 10%); }
a.muted:focus { color: darken($gray-2, 10%); }
.text-warning { color: $state-warning-text; }
a.text-warning:hover,
......@@ -199,7 +199,7 @@ abbr[title],
// Added data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
abbr[data-original-title] {
cursor: help;
border-bottom: 1px dotted $gray-light;
border-bottom: 1px dotted $gray-2;
}
abbr.initialism {
font-size: 90%;
......@@ -210,7 +210,7 @@ abbr.initialism {
blockquote {
padding: 0 0 0 15px;
margin: 0 0 $line-height-base;
border-left: 5px solid $gray-lighter;
border-left: 5px solid $gray-3;
p {
margin-bottom: 0;
font-size: $font-size-base * 1.25;
......@@ -220,7 +220,7 @@ blockquote {
small {
display: block;
line-height: $line-height-base;
color: $gray-light;
color: $gray-2;
&:before {
content: '\2014 \00A0';
}
......@@ -231,7 +231,7 @@ blockquote {
float: right;
padding-right: 15px;
padding-left: 0;
border-right: 5px solid $gray-lighter;
border-right: 5px solid $gray-3;
border-left: 0;
p,
small {
......
public/sass/components/_alerts.scss
......@@ -55,7 +55,7 @@
border-radius: 50%;
border: none;
font-size: 1.1rem;
color: $gray-darker;
color: $gray-2;
.fa {
position: relative;
top: -2px;
......
public/sass/components/_dashboard.scss
......@@ -245,7 +245,7 @@ div.flot-text {
.panel-drop-zone {
display: none;
.panel-container {
border: 1px solid $gray-dark;
border: 1px solid $dark-3;
}
}
......
public/sass/components/_dropdown.scss
......@@ -46,7 +46,6 @@
display: none; // none by default, but block on "open" of the menu
float: left;
min-width: 140px;
padding: 5px 0;
margin: 2px 0 0; // override default ul
list-style: none;
background-color: $dropdownBackground;
......@@ -92,7 +91,7 @@
.dropdown-submenu:focus > a {
text-decoration: none;
color: $dropdownLinkColorHover;
background-color: $grafanaListHighlight;
background-color: $dropdownLinkBackgroundHover;
}
// Active state
......@@ -103,7 +102,7 @@
color: $dropdownLinkColorActive;
text-decoration: none;
outline: 0;
background-color: $grafanaListHighlight;
background-color: $dropdownLinkBackgroundHover;
}
// Disabled state
......@@ -112,7 +111,7 @@
.dropdown-menu > .disabled > a,
.dropdown-menu > .disabled > a:hover,
.dropdown-menu > .disabled > a:focus {
color: $gray-light;
color: $gray-2;
}
// Nuke hover/focus effects
.dropdown-menu > .disabled > a:hover,
......
public/sass/components/_footer.scss
......@@ -3,7 +3,7 @@
bottom: 2px;
left: 3px;
font-size: 80%;
color: darken($gray, 25%);
a { color: darken($gray, 25%); }
color: darken($gray-1, 25%);
a { color: darken($gray-1, 25%); }
}
public/sass/components/_gfbox.scss
......@@ -28,7 +28,7 @@
.gf-box-header-save-btn {
padding: 7px 0;
float: right;
color: $gray-light;
color: $gray-2;
font-style: italic;
}
......
public/sass/components/_sidemenu.scss
......@@ -7,7 +7,7 @@
top: 52px;
left: 0;
width: $side-menu-width;
background-color: $body-bg;
background-color: $side-menu-bg;
z-index: 101;
transform: translate3d(0, -100%, 0);
visibility: hidden;
......@@ -68,7 +68,7 @@
display: block;
top: 0px;
left: $side-menu-width;
background-color: $body-bg;
background-color: $side-menu-bg;
}
}
}
......@@ -112,7 +112,7 @@
display: block;
&:hover {
background-color: $sideMenuBackgroundHighlight;
background-color: $side-menu-item-hover-bg;
}
.sidemenu-item-text {
......@@ -166,7 +166,7 @@
box-sizing: border-box;
cursor: pointer;
&:hover {
background-color: $sideMenuBackgroundHighlight;
background-color: $side-menu-item-hover-bg;
}
display: table;
position: relative;
......
public/sass/components/_tags.scss
......@@ -10,7 +10,7 @@
vertical-align: baseline;
white-space: nowrap;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
background-color: $gray-light;
background-color: $gray-1;
}
......
public/sass/pages/_login.scss
......@@ -105,7 +105,7 @@
margin-top: 10px;
padding: 10px;
a {
color: $gray-light;
color: $gray-2;
}
}
......@@ -117,11 +117,11 @@
.login-divider-line {
width: 100%;
height: 10px;
border-bottom: 1px solid $gray;
border-bottom: 1px solid $gray-1;
.login-divider-text {
background-color: $gray-darker;
color: $gray-light;
background-color: $dark-3;
color: $gray-2;
padding: 0 10px;
}
}
......@@ -168,7 +168,7 @@
}
@include media-breakpoint-up(md) {
.login-box-logo {
.login-box-logo {
img {
width: 125px;
}
......
public/sass/pages/_styleguide.scss
.style-guide-color-card {
list-style: none;
margin: 0 $spacer $spacer 0;
float: left;
padding: $spacer*2;
width: 20rem;
border-radius: 0.5rem;
margin: 0;
padding: $spacer;
width: 100%;
text-align: center;
text-shadow: 0 0 8px #fff;
color: $black;
font-size: $font-size-sm;
......@@ -12,7 +11,7 @@
.color-card-body-bg { background-color: $body-bg; }
.color-card-page-bg { background-color: $page-bg; }
.color-card-gray { background-color: $gray; }
.color-card-gray { background-color: $gray-1; }
.style-guide-button-list {
padding: $spacer;
......
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