From 41a531391ff201b444411773387348ece3eb49e5 Mon Sep 17 00:00:00 2001 From: Ben Ogle Date: Thu, 29 Aug 2013 16:40:16 -0700 Subject: [PATCH] Simplify ui-variables a ton --- themes/neue-dark-ui/buttons.less | 2 +- themes/neue-dark-ui/editor.less | 2 +- themes/neue-dark-ui/lists.less | 4 +- themes/neue-dark-ui/overlay.less | 4 +- themes/neue-dark-ui/panels.less | 12 ++--- themes/neue-dark-ui/popover-list.less | 2 +- themes/neue-dark-ui/section.less | 2 +- themes/neue-dark-ui/tabs.less | 10 ++-- themes/neue-dark-ui/text.less | 4 +- themes/neue-dark-ui/ui-variables.less | 68 ++++++++++++--------------- themes/neue-dark-ui/utilities.less | 2 +- 11 files changed, 52 insertions(+), 60 deletions(-) diff --git a/themes/neue-dark-ui/buttons.less b/themes/neue-dark-ui/buttons.less index 063028692..3fe784727 100644 --- a/themes/neue-dark-ui/buttons.less +++ b/themes/neue-dark-ui/buttons.less @@ -37,7 +37,7 @@ padding: @component-padding/2 @component-padding; z-index: 0; - .btn-background(@button-background-color, @button-background-hover-color, @button-background-selected-color, @text-color); + .btn-background(@button-background-color, @button-background-color-hover, @button-background-color-selected, @text-color); &.selected, &.selected:hover { // we want the selected button to behave like the :hover button; it's on top of the other buttons. diff --git a/themes/neue-dark-ui/editor.less b/themes/neue-dark-ui/editor.less index b0c31cf42..ea64aba85 100644 --- a/themes/neue-dark-ui/editor.less +++ b/themes/neue-dark-ui/editor.less @@ -9,7 +9,7 @@ } .editor.editor-colors.mini.is-focused { - background-color: @input-background-highlight-color; + background-color: lighten(@input-background-color, 5%); } // FIXME: these should go in syntax themes? diff --git a/themes/neue-dark-ui/lists.less b/themes/neue-dark-ui/lists.less index a98c0329a..0cb16995c 100644 --- a/themes/neue-dark-ui/lists.less +++ b/themes/neue-dark-ui/lists.less @@ -51,7 +51,7 @@ // of the list item. .selected:before { content: ''; - background-color: @tool-panel-background-highlight-color; + background-color: @background-color-highlight; position: absolute; left: 0; right: 0; @@ -113,7 +113,7 @@ // We want to highlight the background of the list items because we dont // know their size. li.selected { - background-color: @tool-panel-background-highlight-color; + background-color: @background-color-highlight; &:before{ display: none; } } diff --git a/themes/neue-dark-ui/overlay.less b/themes/neue-dark-ui/overlay.less index 7063a7e3f..57d023b1f 100644 --- a/themes/neue-dark-ui/overlay.less +++ b/themes/neue-dark-ui/overlay.less @@ -5,7 +5,7 @@ background-color: @overlay-background-color; padding: @component-padding; border: 1px solid @overlay-border-color; - box-shadow: 0 0 10px @overlay-shadow-color; + box-shadow: 0 0 10px @base-border-color; border-radius: @component-border-radius; .editor.mini { @@ -14,7 +14,7 @@ &.select-list ol.list-group, .select-list ol.list-group { - background-color: @overlay-inner-background-color; + background-color: lighten(@overlay-background-color, 3%); li { padding: @component-padding; diff --git a/themes/neue-dark-ui/panels.less b/themes/neue-dark-ui/panels.less index cca4fa650..eac78ede7 100644 --- a/themes/neue-dark-ui/panels.less +++ b/themes/neue-dark-ui/panels.less @@ -7,7 +7,7 @@ border-bottom: none; padding: @component-padding - 2px @component-padding; - font-size: @font-size-base; + font-size: @font-size; line-height: 1; background-color: transparent; @@ -19,8 +19,8 @@ position: relative; top: -1px; @bg: lighten(@button-background-color, 10%); - @hover: lighten(@button-background-hover-color, 10%); - @selected: lighten(@button-background-selected-color, 10%); + @hover: lighten(@button-background-color-hover, 10%); + @selected: lighten(@button-background-color-selected, 10%); @text: lighten(@text-color, 10%); .btn-background(@bg, @hover, @selected, @text); } @@ -44,7 +44,7 @@ &.panel-bottom { border-top: 1px solid @tool-panel-border-color; - box-shadow: inset 0 1px 0 @tool-panel-border-highlight-color; + box-shadow: inset 0 1px 0 @background-color-highlight; } &.panel-left { @@ -55,8 +55,8 @@ border-radius: @component-border-radius; border: 1px solid @tool-panel-border-color; - border-bottom-color: @tool-panel-border-highlight-color; - border-right-color: @tool-panel-border-highlight-color; + border-bottom-color: @background-color-highlight; + border-right-color: @background-color-highlight; .panel-heading { margin-right: 1px; diff --git a/themes/neue-dark-ui/popover-list.less b/themes/neue-dark-ui/popover-list.less index 5ffb05327..7083ceed8 100644 --- a/themes/neue-dark-ui/popover-list.less +++ b/themes/neue-dark-ui/popover-list.less @@ -2,7 +2,7 @@ .select-list.popover-list { background-color: @overlay-background-color; - -webkit-box-shadow: 0 0 3px 3px @overlay-shadow-color; + -webkit-box-shadow: 0 0 3px 3px @base-border-color; padding: @component-padding/2; border-radius: @component-border-radius; border: 1px solid @overlay-border-color; diff --git a/themes/neue-dark-ui/section.less b/themes/neue-dark-ui/section.less index 393d07bec..264fb36fb 100644 --- a/themes/neue-dark-ui/section.less +++ b/themes/neue-dark-ui/section.less @@ -9,7 +9,7 @@ section { &.bordered { margin: 0; padding: @component-padding 0; - border-top: 1px solid @tool-panel-border-highlight-color; + border-top: 1px solid @background-color-highlight; border-bottom: 1px solid @tool-panel-border-color; &:first-child { diff --git a/themes/neue-dark-ui/tabs.less b/themes/neue-dark-ui/tabs.less index 44481ca97..72ada1d5b 100644 --- a/themes/neue-dark-ui/tabs.less +++ b/themes/neue-dark-ui/tabs.less @@ -2,7 +2,7 @@ .tab-bar { height: @tab-height + 5px; - border-bottom: 4px solid darken(@tab-background-color-active, 10%); + border-bottom: 4px solid @tab-border-color; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.2), 0 1px 0 rgba(0, 0, 0, 0.5); margin-bottom: 1px; } @@ -12,12 +12,12 @@ line-height: @tab-height; color: @text-color; margin: 0 0 1px 1px; - background-image: -webkit-linear-gradient(@tab-background-color-inactive, darken(@tab-background-color-inactive, 10%)); + background-image: -webkit-linear-gradient(@tab-background-color, darken(@tab-background-color, 10%)); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(0, 0, 0, 1), - inset 1px 0 0 @tool-panel-background-highlight-color, - inset -1px 0 0 @tool-panel-background-highlight-color; + inset 1px 0 0 @background-color-highlight, + inset -1px 0 0 @background-color-highlight; } .tab:hover { @@ -26,7 +26,7 @@ .tab.active { height: @tab-height + 1px; - background-image: -webkit-linear-gradient(@tab-background-color-active, darken(@tab-background-color-active, 10%)); + background-image: -webkit-linear-gradient(@tab-background-color-active, @tab-border-color); color: @text-color-highlight; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); z-index: 2; diff --git a/themes/neue-dark-ui/text.less b/themes/neue-dark-ui/text.less index 5472328c4..eda56f6d2 100644 --- a/themes/neue-dark-ui/text.less +++ b/themes/neue-dark-ui/text.less @@ -29,7 +29,7 @@ pre { code { .text(highlight); - background: @badge-background-color; + background: @background-color-highlight; border-radius: @component-border-radius; } @@ -49,7 +49,7 @@ code { color: @text-color-highlight; font-weight: bold; text-shadow: none; - background-color: @badge-background-color; + background-color: @background-color-highlight; border-radius: @component-border-radius; padding: 1px 3px; } diff --git a/themes/neue-dark-ui/ui-variables.less b/themes/neue-dark-ui/ui-variables.less index 626b8c78e..4d1d51213 100644 --- a/themes/neue-dark-ui/ui-variables.less +++ b/themes/neue-dark-ui/ui-variables.less @@ -1,50 +1,48 @@ -@import "bootstrap/less/variables.less"; - // Colors @text-color: #aaa; -@text-color-highlight: #fff; @text-color-subtle: #555; +@text-color-highlight: #fff; @text-color-info: #5293d8; +@text-color-success: #1fe977; @text-color-warning: #f78a46; @text-color-error: #c00; -@text-color-success: #1fe977; @background-color-info: #0098ff; +@background-color-success: #17ca65; @background-color-warning: #ff4800; @background-color-error: #c00; -@background-color-success: #17ca65; - -@input-background-color: #212224; -@input-background-highlight-color: lighten(@input-background-color, 5%); -@input-border-color: rgba(0, 0, 0, 0.5); - -@tool-panel-background-color: #1d1f21; -@tool-panel-background-highlight-color: rgba(255, 255, 255, 0.05); -@tool-panel-border-color: rgba(0, 0, 0, 0.5); -@tool-panel-border-highlight-color: rgba(255, 255, 255, 0.05); - -@inset-panel-background-color: #161719; -@inset-panel-background-highlight-color: rgba(255, 255, 255, 0.07); - -@panel-heading-background-color: #43484d; - -@overlay-background-color: #202123; -@overlay-inner-background-color: #27292b; -@overlay-border-color: rgba(255, 255, 255, 0.05); -@overlay-shadow-color: rgba(0, 0, 0, 0.5); - -@button-background-color: #43484d; -@button-background-hover-color: lighten(@button-background-color, 5%); -@button-background-selected-color: #5c6064; -@button-border-color: rgba(0, 0, 0, 0.5); +@background-color-highlight: rgba(255, 255, 255, 0.07); @app-background-color: #333; -@workspace-background-color: lighten(@tool-panel-background-color, 5%); +@base-background-color: lighten(@tool-panel-background-color, 5%); +@base-border-color: rgba(0, 0, 0, 0.5); + +@input-background-color: #212224; +@input-border-color: @base-border-color; + +@tool-panel-background-color: #1d1f21; +@tool-panel-border-color: @base-border-color; + +@inset-panel-background-color: #161719; +@inset-panel-border-color: @base-border-color; + +@panel-heading-background-color: #43484d; +@panel-heading-border-color: transparent; + +@overlay-background-color: #202123; +@overlay-border-color: @background-color-highlight; + +@button-background-color: #43484d; +@button-background-color-hover: lighten(@button-background-color, 5%); +@button-background-color-selected: #5c6064; +@button-border-color: @base-border-color; + +@tab-background-color: #292c2f; @tab-background-color-active: @panel-heading-background-color; -@tab-background-color-inactive: #292c2f; +@tab-border-color: darken(@tab-background-color-active, 10%); @site-color-1: #4dd157; @site-color-2: #3facc1; @@ -62,13 +60,7 @@ @component-padding: 10px; @component-icon-padding: 5px; @component-icon-size: 16px; -@component-line-height: @line-height-base * 1.25; +@component-line-height: 25px; @component-border-radius: 2px; @tab-height: 30px; - - -// Non-api variables -// Dont use these in your package! They may change, and all themes may not support them. - -@badge-background-color: lighten(@tool-panel-background-color, 10%); diff --git a/themes/neue-dark-ui/utilities.less b/themes/neue-dark-ui/utilities.less index 3527c7e9b..16524ce2f 100644 --- a/themes/neue-dark-ui/utilities.less +++ b/themes/neue-dark-ui/utilities.less @@ -19,5 +19,5 @@ .badge { .text(highlight); - background: @badge-background-color; + background: @background-color-highlight; }