From b63aad83f182ec664cf2e993e578389f04bb36b1 Mon Sep 17 00:00:00 2001 From: Evan Morikawa Date: Tue, 3 Mar 2015 12:24:48 -0800 Subject: [PATCH] more UI variable improvements --- .../stylesheets/account-sidebar.less | 2 +- .../attachments/stylesheets/attachments.less | 2 +- .../composer/stylesheets/composer.less | 4 +- .../stylesheets/message-list.less | 8 +- .../stylesheets/notifications.less | 2 +- .../search-bar/stylesheets/search-bar.less | 2 +- .../thread-list/stylesheets/thread-list.less | 4 +- src/package.coffee | 1 + static/index.js | 1 + static/type.less | 5 +- static/variables/ui-variables.less | 96 ++++++++++--------- 11 files changed, 67 insertions(+), 60 deletions(-) diff --git a/internal_packages/account-sidebar/stylesheets/account-sidebar.less b/internal_packages/account-sidebar/stylesheets/account-sidebar.less index d1eb4e131..3caa96074 100644 --- a/internal_packages/account-sidebar/stylesheets/account-sidebar.less +++ b/internal_packages/account-sidebar/stylesheets/account-sidebar.less @@ -11,7 +11,7 @@ -webkit-user-select: none; .item { - color: @text-color-muted; + color: @text-color-subtle; font-size: @font-size-small; font-weight: 400; padding-left: @padding-base-horizontal; diff --git a/internal_packages/attachments/stylesheets/attachments.less b/internal_packages/attachments/stylesheets/attachments.less index fd24f1388..8282cae72 100644 --- a/internal_packages/attachments/stylesheets/attachments.less +++ b/internal_packages/attachments/stylesheets/attachments.less @@ -4,7 +4,7 @@ .attachment-file-wrap { display: inline-block; position: relative; - font-size: @minor-font-size; + font-size: @font-size-small; margin-bottom: 0.5em; margin-right: 0.5em; diff --git a/internal_packages/composer/stylesheets/composer.less b/internal_packages/composer/stylesheets/composer.less index 1691ca0d4..5a5573f0f 100644 --- a/internal_packages/composer/stylesheets/composer.less +++ b/internal_packages/composer/stylesheets/composer.less @@ -115,7 +115,7 @@ .composer-header-actions { float: right; color: @text-color-subtle; - font-size: @minor-font-size; + font-size: @font-size-small; } .header-action { padding-left: 1em; @@ -172,7 +172,7 @@ margin: 9px 15px 0 15px; input { - font-size: @major-font-size; + font-size: @font-size-large; height:30px; } } diff --git a/internal_packages/message-list/stylesheets/message-list.less b/internal_packages/message-list/stylesheets/message-list.less index 28f192101..e6ef4f005 100644 --- a/internal_packages/message-list/stylesheets/message-list.less +++ b/internal_packages/message-list/stylesheets/message-list.less @@ -112,7 +112,7 @@ } .message-time, .message-indicator { - font-size: @minor-font-size; + font-size: @font-size-small; color: @text-color-subtle; margin-top: 3px; float: right; @@ -133,19 +133,19 @@ .from-contact { font-weight:@headings-font-weight; color: @text-color; - font-size: @major-font-size; + font-size: @font-size-large; margin-right: 15px; } .to-label, .cc-label { - font-size: @minor-font-size; + font-size: @font-size-small; color: @text-color; } .cc-label { margin-left: 15px; } .to-contact, .cc-contact, .to-everyone { - font-size: @minor-font-size; + font-size: @font-size-small; color: @text-color-subtle; } diff --git a/internal_packages/notifications/stylesheets/notifications.less b/internal_packages/notifications/stylesheets/notifications.less index c4034a015..719d5d212 100644 --- a/internal_packages/notifications/stylesheets/notifications.less +++ b/internal_packages/notifications/stylesheets/notifications.less @@ -17,7 +17,7 @@ .notifications { text-align: center; - font-size: @minor-font-size; + font-size: @font-size-small; height: 19px; overflow: auto; } diff --git a/internal_packages/search-bar/stylesheets/search-bar.less b/internal_packages/search-bar/stylesheets/search-bar.less index c40d2a666..5d10ba8b4 100644 --- a/internal_packages/search-bar/stylesheets/search-bar.less +++ b/internal_packages/search-bar/stylesheets/search-bar.less @@ -45,7 +45,7 @@ .divider { font-weight:@headings-font-weight; color: @menu-divider-color; - font-size: @minor-font-size; + font-size: @font-size-small; text-transform: uppercase; margin-top: 10px; padding: 4px; diff --git a/internal_packages/thread-list/stylesheets/thread-list.less b/internal_packages/thread-list/stylesheets/thread-list.less index 4793d284d..7d1b54fca 100644 --- a/internal_packages/thread-list/stylesheets/thread-list.less +++ b/internal_packages/thread-list/stylesheets/thread-list.less @@ -30,11 +30,11 @@ .snippet, .timestamp { font-size: @font-size-small; - color: @text-color-muted; + color: @text-color-subtle; } .no-subject { - color: @text-color-muted; + color: @text-color-subtle; } .participants { diff --git a/src/package.coffee b/src/package.coffee index 679297307..7ea56c2d2 100644 --- a/src/package.coffee +++ b/src/package.coffee @@ -129,6 +129,7 @@ class Package catch error console.warn "Failed to load package named '#{@name}'", error.stack ? error + console.error(error.message, error) this reset: -> diff --git a/static/index.js b/static/index.js index 9347a5f34..4bf95d550 100644 --- a/static/index.js +++ b/static/index.js @@ -75,5 +75,6 @@ window.onload = function() { currentWindow.show(); currentWindow.openDevTools(); console.error(error.stack || error); + console.error(error.message, error); } } diff --git a/static/type.less b/static/type.less index 72d432adb..37be4e4c9 100644 --- a/static/type.less +++ b/static/type.less @@ -8,10 +8,9 @@ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { - font-family: @headings-font-family; + font-family: @font-family-heading; font-weight: @headings-font-weight; - line-height: @headings-line-height; - color: @headings-color; + line-height: @line-height-heading; small, .small { diff --git a/static/variables/ui-variables.less b/static/variables/ui-variables.less index adbd8e6f6..5db7fc0b1 100644 --- a/static/variables/ui-variables.less +++ b/static/variables/ui-variables.less @@ -51,24 +51,25 @@ //============================= Typography =============================// -@text-color: @black; +// ----- Colors ----- +@text-color: @black; @text-color-inverse: @white; -@text-color-subtle: fadeout(@text-color, 50%); +@text-color-subtle: fadeout(@text-color, 50%); -@text-color-link: @nilas-blue; -@text-color-link-hover: @nilas-blue-dark; +@text-color-link: @nilas-blue; +@text-color-link-hover: @nilas-blue-dark; @text-color-link-active: @nilas-blue-dark; -@text-color-highlight: @black; -@text-color-selected: @white; -@text-color-info: @light-blue; -@text-color-success: @green; -@text-color-warning: #ff982d; -@text-color-error: @red; -@text-color-destructive: @red; - +@text-color-selected: @text-color-inverse; +@text-color-highlight: @text-color; +@text-color-info: @info-color; +@text-color-success: @success-color; +@text-color-warning: @warning-color; +@text-color-error: @error-color; +@text-color-destructive: @danger-color; +// ----- Font Families ----- @font-face { font-family: 'FaktPro'; font-style: normal; @@ -94,10 +95,14 @@ @font-family-smallcap: "Proxima Nova Regular Small Cap", "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; -@font-family: @font-family-sans-serif; +@font-family-base: @font-family-sans-serif; +@font-family: @font-family-base; +@font-family-heading: @font-family-sans-serif; + +// ----- Font Sizes ----- @font-size-base: 15px; +@font-size: @font-size-base; @font-size-large: ceil((@font-size-base * 1.25)); // ~18px @font-size-small: ceil((@font-size-base * 0.85)); // ~12px @@ -108,21 +113,17 @@ @font-size-h5: @font-size-base; @font-size-h6: ceil((@font-size-base * 0.85)); // ~12px -//** Unit-less `line-height` for use in components like buttons. -@line-height-base: 1.428571429; // 20/14 -//** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc. -@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px +// ----- Line Height ----- +@line-height-base: 1.428571429; // 20/14 +@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px +@line-height-heading: 1.1; -//** By default, this inherits from the ``. -@headings-font-family: inherit; @headings-font-weight: 500; -@headings-line-height: 1.1; -@headings-color: inherit; -//== Iconography -// -//## Specify custom location and filename of the included Glyphicons icon font. Useful for those including Bootstrap via Bower. +//============================ Iconography =============================// +// Specify custom location and filename of the included Glyphicons icon +// font. Useful for those including Bootstrap via Bower. //** Load fonts from this directory. @icon-font-path: "../fonts/"; @@ -132,9 +133,9 @@ @icon-font-svg-id: "glyphicons_halflingsregular"; -//== Components -// -//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start). +//============================== Spacing ===============================// +// Define common padding and border radius sizes and more. Values based on +// 14px text and 1.428 line-height (~20px to start). @padding-base-vertical: 6px; @padding-base-horizontal: 12px; @@ -160,9 +161,10 @@ //** Global background color for active items (e.g., navs or dropdowns). @component-active-bg: #3a3e44; -//== Tables -// -//## Customizes the `.table` component with basic values, each used across all table variations. + +//============================== Tables ===============================// +// Customizes the `.table` component with basic values, each used across +// all table variations. //** Padding for ``s and ``s. @table-cell-padding: 8px; @@ -181,9 +183,7 @@ @table-border-color: #ddd; -//== Buttons -// -//## For each of Bootstrap's buttons, define text, background and border color. +//=============================== Buttons ==============================// @btn-font-weight: normal; @@ -218,9 +218,7 @@ @btn-link-disabled-color: @gray-light; -//== Forms -// -//## +//================================ Forms ===============================// //** `` background color @input-bg: #fff; @@ -259,10 +257,12 @@ @input-group-addon-border-color: @input-border; +//=============================== Z-Index ==============================// //-- Z-index master list // -// Warning: Avoid customizing these values. They're used for a bird's eye view -// of components dependent on the z-axis and are designed to all work together. +// Warning: Avoid customizing these values. They're used for a bird's eye +// view of components dependent on the z-axis and are designed to all work +// together. // // Note: These variables are not generated into the Customizer. @@ -273,6 +273,17 @@ @zindex-navbar-fixed: 1030; @zindex-modal: 1040; + + + + + + + + + + + //== Source List (used in Sidebar, iTunes-style) // // ## @@ -320,7 +331,6 @@ //** Horizontal offset for forms and lists. @component-offset-horizontal: 180px; //** Text muted color -@text-color-muted: @gray-light; //** Abbreviations and acronyms border color @abbr-border-color: @gray-light; @@ -449,12 +459,8 @@ // Sizes -@font-size: 15px; -@minor-font-size: 13px; -@major-font-size: 17px; - -@input-font-size: 14px; @disclosure-arrow-size: 12px; +@input-font-size: 14px; @component-padding: 10px; @component-icon-padding: 5px;