From 76d478b67701758ce07eaad681d0515863d82f2b Mon Sep 17 00:00:00 2001 From: Jackie Luo Date: Tue, 15 Mar 2016 10:57:43 -0700 Subject: [PATCH] refactor(ui-variables): Clean UI variables for consistency/usage Summary: Shortens and simplifies UI variables so that unused variables are no longer present. Test Plan: Tested locally. Reviewers: evan, bengotow Reviewed By: bengotow Differential Revision: https://phab.nylas.com/D2738 --- .../attachments/stylesheets/attachments.less | 4 +- .../stylesheets/message-templates.less | 2 +- .../events/stylesheets/events.less | 30 +- .../stylesheets/find-in-thread.less | 2 +- .../stylesheets/message-list.less | 6 +- .../stylesheets/release-bar.less | 34 +- .../stylesheets/notifications.less | 6 +- .../stylesheets/preferences-accounts.less | 6 +- .../stylesheets/preferences-mail-rules.less | 2 +- .../preferences/stylesheets/preferences.less | 6 +- .../search-bar/stylesheets/search-bar.less | 16 +- .../ui-dark/styles/ui-variables.less | 30 +- .../ui-ubuntu/styles/ui-variables.less | 2 +- .../styles/editor.less | 2 +- static/components/button-dropdown.less | 6 +- static/components/editable-list.less | 6 +- static/components/generated-form.less | 6 +- static/components/menu.less | 4 +- static/components/tokenizing-text-field.less | 2 +- static/inputs.less | 6 +- static/type.less | 26 +- static/variables/ui-variables.less | 406 ++++-------------- 22 files changed, 197 insertions(+), 413 deletions(-) diff --git a/internal_packages/attachments/stylesheets/attachments.less b/internal_packages/attachments/stylesheets/attachments.less index 4a881d810..4e0235f45 100644 --- a/internal_packages/attachments/stylesheets/attachments.less +++ b/internal_packages/attachments/stylesheets/attachments.less @@ -61,7 +61,7 @@ width: 0; // Changed by React z-index: 3; display: block; - background: @progress-bar-fill; + background: @blue-light; border-bottom-left-radius:4px; transition: width .3s linear; @@ -74,7 +74,7 @@ width: 100%; z-index: 2; display: block; - background: @progress-bar-background; + background: @background-color-pending; border-bottom-left-radius:4px; border-bottom-right-radius:4px; } diff --git a/internal_packages/composer-templates/stylesheets/message-templates.less b/internal_packages/composer-templates/stylesheets/message-templates.less index 39b8d4d6d..e4919ad64 100755 --- a/internal_packages/composer-templates/stylesheets/message-templates.less +++ b/internal_packages/composer-templates/stylesheets/message-templates.less @@ -10,7 +10,7 @@ overflow-y:scroll; } .footer-container { - border-top: 1px solid @border-secondary-bg; + border-top: 1px solid @border-color-secondary; } } diff --git a/internal_packages/events/stylesheets/events.less b/internal_packages/events/stylesheets/events.less index a73da41c3..8a4dea042 100644 --- a/internal_packages/events/stylesheets/events.less +++ b/internal_packages/events/stylesheets/events.less @@ -14,37 +14,37 @@ border-radius: @border-radius-base; border: 1px solid @border-color-divider; - .event-header{ + .event-header { border-bottom: 1px solid @border-color-divider; padding: 10px; - img{ + img { margin-right: 20px; } - .event-title-text{ + .event-title-text { color: @text-color-very-subtle; } - .event-title{ + .event-title { color: @text-color; } } - .event-body{ + .event-body { padding: @padding-small-horizontal; - .event-date{ + .event-date { display: inline-block; width: 100%; - .event-day{ + .event-day { display: block; font-size: @font-size-large; - color: @text-color-alert; + color: #e64d65; } - .event-time{ + .event-time { display: inline-block; font-size: @font-size-h3; font-weight: @font-weight-blond; @@ -60,7 +60,7 @@ .btn-rsvp { float: left; - padding: @spacing-three-quarters @spacing-sub-double @spacing-three-quarters @spacing-sub-double; + padding: @spacing-three-quarters @spacing-standard * 1.75 @spacing-three-quarters @spacing-standard * 1.75; line-height: 10px; color: @text-color; border-radius: 3px; @@ -69,17 +69,17 @@ margin: 0 7.5px 0 7.5px; &:active {background: transparent;} - &.no{ - background: @error-color; + &.no { + background: @color-error; color: @white; } - &.yes{ - background: @success-color; + &.yes { + background: @color-success; color: @white; } - &.maybe{ + &.maybe { background: @gray-light; color: @white; } diff --git a/internal_packages/message-list/stylesheets/find-in-thread.less b/internal_packages/message-list/stylesheets/find-in-thread.less index cc4aa7b63..071363b87 100644 --- a/internal_packages/message-list/stylesheets/find-in-thread.less +++ b/internal_packages/message-list/stylesheets/find-in-thread.less @@ -17,7 +17,7 @@ body.platform-win32 { &.enabled { padding: 4px 8px; height: 35px; - border-bottom: 1px solid @border-secondary-bg; + border-bottom: 1px solid @border-color-secondary; } .controls-wrap { diff --git a/internal_packages/message-list/stylesheets/message-list.less b/internal_packages/message-list/stylesheets/message-list.less index fe5e69853..64f0448ab 100644 --- a/internal_packages/message-list/stylesheets/message-list.less +++ b/internal_packages/message-list/stylesheets/message-list.less @@ -311,10 +311,10 @@ body.platform-win32 { .message-item-divider { border:0; // remove default hr border left, right - border-top: 2px solid @border-secondary-bg; + border-top: 2px solid @border-color-secondary; height: 3px; background: @background-secondary; - border-bottom: 1px solid @border-primary-bg; + border-bottom: 1px solid @border-color-primary; margin: 0; &.collapsed { @@ -652,7 +652,7 @@ body.platform-win32 { opacity: 0; margin: 5px; cursor: default; - border: 1px solid @border-primary-bg; + border: 1px solid @border-color-primary; border-radius: @border-radius-large; background: @background-primary; padding: 15px; diff --git a/internal_packages/notification-update-available/stylesheets/release-bar.less b/internal_packages/notification-update-available/stylesheets/release-bar.less index c4eba7547..34f7f36f3 100644 --- a/internal_packages/notification-update-available/stylesheets/release-bar.less +++ b/internal_packages/notification-update-available/stylesheets/release-bar.less @@ -1,25 +1,25 @@ @import "ui-variables"; .release-bar { - order: -1; + order: -1; } .release-bar-inner { - height: 25px; - display:block; - padding-left:10px; - padding-top:2px; - color:@text-color-inverse; - background-color: @action-color; - border-bottom:1px solid darken(@action-color, 10%); + height: 25px; + display: block; + padding-left: 10px; + padding-top: 2px; + color: @text-color-inverse; + background-color: @background-color-success; + border-bottom: 1px solid darken(@background-color-success, 10%); - &:hover { - background-color: darken(@action-color, 10%); - border-bottom:1px solid darken(@action-color, 15%); - text-decoration:none; - color:white; - } + &:hover { + background-color: darken(@background-color-success, 10%); + border-bottom: 1px solid darken(@background-color-success, 15%); + text-decoration: none; + color: white; + } - i { - margin-right:8px; - } + i { + margin-right:8px; + } } diff --git a/internal_packages/notifications/stylesheets/notifications.less b/internal_packages/notifications/stylesheets/notifications.less index 5fcae39b6..2dc16f7ca 100644 --- a/internal_packages/notifications/stylesheets/notifications.less +++ b/internal_packages/notifications/stylesheets/notifications.less @@ -93,7 +93,7 @@ } .complete .progress-track .progress { - background-color: @nylas-green; + background-color: @color-success; } } @@ -101,7 +101,7 @@ transition-delay: 2s; &.sidebar-activity-error { .progress { - background-color: @error-color; + background-color: @color-error; } } } @@ -139,7 +139,7 @@ .notification-error { background-color: @background-color-error; border-color: @background-color-error; - color: @error-color; + color: @color-error; } .notification-success { border-color: @background-color-success; diff --git a/internal_packages/preferences/stylesheets/preferences-accounts.less b/internal_packages/preferences/stylesheets/preferences-accounts.less index a3b67fc4d..2a1344936 100644 --- a/internal_packages/preferences/stylesheets/preferences-accounts.less +++ b/internal_packages/preferences/stylesheets/preferences-accounts.less @@ -19,7 +19,7 @@ } .list-item:not(.selected) .sync-error { - color: @text-color-error; + color: @color-error; } .account-name { @@ -46,8 +46,8 @@ .account-details { width: 400px; padding-top: 20px; - padding-left: @spacing-super-double; - padding-right: @spacing-super-double; + padding-left: @spacing-standard * 2.25; + padding-right: @spacing-standard * 2.25; background-color: @gray-lighter; border-top: 1px solid @border-color-divider; border-right: 1px solid @border-color-divider; diff --git a/internal_packages/preferences/stylesheets/preferences-mail-rules.less b/internal_packages/preferences/stylesheets/preferences-mail-rules.less index 4b03429db..e3fb3f286 100644 --- a/internal_packages/preferences/stylesheets/preferences-mail-rules.less +++ b/internal_packages/preferences/stylesheets/preferences-mail-rules.less @@ -11,7 +11,7 @@ height: 350px; } .item-rule-disabled { - color: @error-color; + color: @color-error; padding: 4px 10px; border-bottom: 1px solid @border-color-divider; } diff --git a/internal_packages/preferences/stylesheets/preferences.less b/internal_packages/preferences/stylesheets/preferences.less index 4b2bf3cc2..08a3d5945 100644 --- a/internal_packages/preferences/stylesheets/preferences.less +++ b/internal_packages/preferences/stylesheets/preferences.less @@ -159,7 +159,7 @@ font-weight: 600; color: @text-color; .then { - font-family: @font-family-base; + font-family: @font-family; color: @text-color-very-subtle; font-weight: 400; font-size: 0.9em; @@ -179,11 +179,11 @@ .platform-note { padding: @padding-base-vertical @padding-base-horizontal; background: fade(@black, 4%); - border-left:3px solid @info-color; + border-left:3px solid @color-info; margin:@padding-base-vertical 0; font-size:0.95em; &:before { - color: @info-color; + color: @color-info; font-weight:600; content: "NOTE: "; } diff --git a/internal_packages/search-bar/stylesheets/search-bar.less b/internal_packages/search-bar/stylesheets/search-bar.less index fd54c59cf..a2a505fe9 100644 --- a/internal_packages/search-bar/stylesheets/search-bar.less +++ b/internal_packages/search-bar/stylesheets/search-bar.less @@ -6,14 +6,14 @@ order: -100; overflow: visible; z-index: 100; - width:450px; + width: 450px; margin-top: (38px - 23px) / 2; .menu .header-container { - padding:0; - height:23px; + padding: 0; + height: 23px; background-color: transparent; - border:none; + border: none; input { padding-left: 26px; @@ -21,7 +21,7 @@ width: 100%; height: 23px; border: 1px solid transparent; - box-shadow: 0 0.5px 0 rgba(0,0,0,0.15), 0 -0.5px 0 rgba(0,0,0,0.15), 0.5px 0 0 rgba(0,0,0,0.15), -0.5px 0 0 rgba(0,0,0,0.15); + box-shadow: @shadow-border; } input.empty { text-align: left; @@ -54,7 +54,7 @@ &.showing-suggestions { .suggestions { display: inherit; } .clear { - color: @input-accessory-color; + color: @text-color-subtle; display: inherit; } } @@ -75,7 +75,7 @@ position: absolute; top: 3px; right: 4px; - color: @input-accessory-color; + color: @text-color-subtle; display: none; } } @@ -84,6 +84,6 @@ body.is-blurred { .search-bar .menu .header-container input { background: none; - box-shadow: 0 0.5px 0 rgba(0,0,0,0.15), 0 -0.5px 0 rgba(0,0,0,0.15), 0.5px 0 0 rgba(0,0,0,0.15), -0.5px 0 0 rgba(0,0,0,0.15); + box-shadow: @shadow-border; } } diff --git a/internal_packages/ui-dark/styles/ui-variables.less b/internal_packages/ui-dark/styles/ui-variables.less index df223bc9e..1b04be94a 100644 --- a/internal_packages/ui-dark/styles/ui-variables.less +++ b/internal_packages/ui-dark/styles/ui-variables.less @@ -1,20 +1,23 @@ @gray-base: #ffffff; -@gray-darker: darken(@gray-base, 13.5%); // #222 -@gray-dark: darken(@gray-base, 20%); // #333 -@gray: darken(@gray-base, 33.5%); // #555 -@gray-light: darken(@gray-base, 46.7%); // #777 -@gray-lighter: darken(@gray-base, 92.5%); // #eee +@gray-darker: darken(@gray-base, 13.5%); +@gray-dark: darken(@gray-base, 20%); +@gray: darken(@gray-base, 33.5%); +@gray-light: darken(@gray-base, 46.7%); +@gray-lighter: darken(@gray-base, 92.5%); @white: #0a0b0c; +@accent-primary: #5AA8FA; +@accent-primary-dark: lighten(#3087E1, 10%); + @background-primary: #313131; @background-off-primary: #282828; @background-secondary: #222; @background-tertiary: #6d7987; -@btn-default-bg-color: #404040; -@dropdown-default-bg-color: #404040; -@accent-primary: #5AA8FA; -@accent-primary-dark: lighten(#3087E1, 10%); +@border-color-primary: lighten(@background-primary, 10%); +@border-color-secondary: lighten(@background-secondary, 10%); +@border-color-tertiary: lighten(@background-tertiary, 10%); +@border-color-divider: @border-color-secondary; @text-color: #C2C2C2; @text-color-subtle: fadeout(@text-color, 20%); @@ -24,17 +27,14 @@ @text-color-inverse-very-subtle: fadeout(@text-color-inverse, 50%); @text-color-heading: #FFF; -@border-primary-bg: lighten(@background-primary, 10%); -@border-secondary-bg: lighten(@background-secondary, 10%); -@border-tertiary-bg: lighten(@background-tertiary, 10%); -@border-color-divider: @border-secondary-bg; +@btn-default-bg-color: #404040; +@dropdown-default-bg-color: #404040; @input-bg: #242424; @input-border: @border-color-divider; @list-bg: #333; @list-border: #383838; - @list-selected-color: @text-color-inverse; @toolbar-background-color: @background-secondary; @@ -50,7 +50,7 @@ img.content-light { } .popover { - border: 1px solid @border-primary-bg; + border: 1px solid @border-color-primary; } .mail-label { diff --git a/internal_packages/ui-ubuntu/styles/ui-variables.less b/internal_packages/ui-ubuntu/styles/ui-variables.less index c9eab9246..481192331 100644 --- a/internal_packages/ui-ubuntu/styles/ui-variables.less +++ b/internal_packages/ui-ubuntu/styles/ui-variables.less @@ -5,7 +5,7 @@ @accent-primary: #f07746; @accent-primary-dark: darken(#f07746, 1%); -@border-secondary-bg: lighten(@background-secondary, 10%); +@border-color-secondary: lighten(@background-secondary, 10%); @toolbar-background-color: #41403b; @light: rgb(246, 246, 246); diff --git a/spec/fixtures/packages/theme-with-incomplete-ui-variables/styles/editor.less b/spec/fixtures/packages/theme-with-incomplete-ui-variables/styles/editor.less index 8038101a9..d4b1eb8eb 100755 --- a/spec/fixtures/packages/theme-with-incomplete-ui-variables/styles/editor.less +++ b/spec/fixtures/packages/theme-with-incomplete-ui-variables/styles/editor.less @@ -5,6 +5,6 @@ nylas-theme-wrap { padding-right: @component-padding; padding-bottom: @component-padding; - color: @input-background-color; + color: @input-bg; background-color: @spec-test-variable; // From the fallback variables, not overridden } diff --git a/static/components/button-dropdown.less b/static/components/button-dropdown.less index d5c9f83ba..d74bb3007 100644 --- a/static/components/button-dropdown.less +++ b/static/components/button-dropdown.less @@ -13,7 +13,7 @@ &.open.open-up { .secondary-items { border-radius: @border-radius-base @border-radius-base 0 @border-radius-base; - box-shadow: 0 0.5px 0 rgba(0,0,0,0.15), 0 -0.5px 0 rgba(0,0,0,0.15), 0.5px 0 0 rgba(0,0,0,0.15), -0.5px 0 0 rgba(0,0,0,0.15), 0 -3px 12px rgba(0, 0, 0, 0.2); + box-shadow: 0 0.5px 0 @standard-shadow-color, 0 -0.5px 0 @standard-shadow-color, 0.5px 0 0 @standard-shadow-color, -0.5px 0 0 @standard-shadow-color, 0 -3px 12px @standard-shadow-color; top: -100%; transform:translate(0, -6px); } @@ -24,7 +24,7 @@ &.open.open-down { .secondary-items { border-radius: @border-radius-base 0 @border-radius-base @border-radius-base; - box-shadow: 0 0.5px 0 rgba(0,0,0,0.15), 0 -0.5px 0 rgba(0,0,0,0.15), 0.5px 0 0 rgba(0,0,0,0.15), -0.5px 0 0 rgba(0,0,0,0.15), 0 5px 12px rgba(0, 0, 0, 0.2); + box-shadow: 0 0.5px 0 @standard-shadow-color, 0 -0.5px 0 @standard-shadow-color, 0.5px 0 0 @standard-shadow-color, -0.5px 0 0 @standard-shadow-color, 0 5px 12px @standard-shadow-color; transform:translate(0, 1.5px); } .secondary-picker { @@ -56,7 +56,7 @@ .secondary-picker { .btn(); - box-shadow: rgba(0, 0, 0, 0.15) 0 0.5px 0, rgba(0, 0, 0, 0.15) 0 -0.5px 0, rgba(0, 0, 0, 0.15) 0.5px 0 0, rgba(0, 0, 0, 0.15) 0 0.5px 1px; + box-shadow: @standard-shadow-color 0 0.5px 0, @standard-shadow-color 0 -0.5px 0, @standard-shadow-color 0.5px 0 0, @standard-shadow-color 0 0.5px 1px; border-radius: 0 @border-radius-base @border-radius-base 0; border-left: 0; padding: 0 6px; diff --git a/static/components/editable-list.less b/static/components/editable-list.less index f33deb1cf..d24122de9 100644 --- a/static/components/editable-list.less +++ b/static/components/editable-list.less @@ -11,7 +11,7 @@ .items-wrapper { display: flex; flex-direction: column; - border: 1px solid @border-secondary-bg; + border: 1px solid @border-color-secondary; background-color: @background-primary; height: 90px; font-size: 0.9em; @@ -97,7 +97,7 @@ .buttons-wrapper { display: flex; - border: 1px solid @border-secondary-bg; + border: 1px solid @border-color-secondary; border-top: none; background-color: @background-secondary; @@ -107,7 +107,7 @@ height: 25px; width: 25px; line-height: 25px; - border-right: 1px solid @border-secondary-bg; + border-right: 1px solid @border-color-secondary; font-size: 1em; cursor: default; color: @text-color-subtle; diff --git a/static/components/generated-form.less b/static/components/generated-form.less index 02317c590..8c7a2925d 100644 --- a/static/components/generated-form.less +++ b/static/components/generated-form.less @@ -35,7 +35,7 @@ .form-error { position: absolute; - color: @error-color; + color: @color-error; font-size: @font-size-smaller; margin-top: 0.3em; } @@ -48,7 +48,7 @@ textarea { width: 100%; - border: 1px solid @input-border; + border: 1px solid @input-border-color; } } @@ -82,7 +82,7 @@ font-size: @font-size-larger; background: #fff; border: 0; - border-bottom: 3px solid @input-border; + border-bottom: 3px solid @input-border-color; border-radius: 4px; padding: 7px 35px 2px 35px; } diff --git a/static/components/menu.less b/static/components/menu.less index 3e08e6948..a87044f72 100644 --- a/static/components/menu.less +++ b/static/components/menu.less @@ -8,7 +8,7 @@ .header-container { flex-shrink: 0; // Don't squish the header! There may be a search box here background-color: @background-secondary; - border-bottom: 1px solid @base-border-color; + border-bottom: 1px solid @border-color-secondary; padding: 3px; position: relative; } @@ -52,7 +52,7 @@ .item.divider { font-weight:@headings-font-weight; - color: @menu-divider-color; + color: @border-color-divider; font-size: @font-size-small; text-transform: uppercase; margin-top: 10px; diff --git a/static/components/tokenizing-text-field.less b/static/components/tokenizing-text-field.less index fb95b7141..b80985059 100644 --- a/static/components/tokenizing-text-field.less +++ b/static/components/tokenizing-text-field.less @@ -19,7 +19,7 @@ position: relative; .content-container { - border: 1px solid @border-secondary-bg; + border: 1px solid @border-color-secondary; box-shadow: 0 2px 8px rgba(0,0,0,0.2); border-radius: @border-radius-small; background-color: @background-primary; diff --git a/static/inputs.less b/static/inputs.less index 9e53f7e02..6bd1e0822 100644 --- a/static/inputs.less +++ b/static/inputs.less @@ -23,7 +23,7 @@ input[type="url"] { color: @text-color; border-radius: @border-radius-base; - border: 1px solid @input-border; + border: 1px solid @input-border-color; &:disabled { background: fadeout(@input-bg, 40%); @@ -56,12 +56,12 @@ body.platform-win32 { input[type="url"] { border: 0; border-radius: 0; - box-shadow: 0 0 0 2px @input-border; + box-shadow: 0 0 0 2px @input-border-color; &:focus { border: 0; border-radius: 0; - box-shadow: 0 0 0 2px darken(@input-border, 20%); + box-shadow: 0 0 0 2px darken(@input-border-color, 20%); } } } diff --git a/static/type.less b/static/type.less index 55f215663..0a99681bf 100644 --- a/static/type.less +++ b/static/type.less @@ -87,7 +87,7 @@ small, mark, .mark { - background-color: @state-warning-bg; + background-color: #fcf8e3; padding: .2em; } @@ -111,16 +111,16 @@ mark, .text-emphasis-variant(@accent-primary); } .text-success { - .text-emphasis-variant(@state-success-text); + .text-emphasis-variant(#3c763d); } .text-info { - .text-emphasis-variant(@state-info-text); + .text-emphasis-variant(#31708f); } .text-warning { - .text-emphasis-variant(@state-warning-text); + .text-emphasis-variant(#8a6d3b); } .text-danger { - .text-emphasis-variant(@state-danger-text); + .text-emphasis-variant(#a94442); } // Contextual backgrounds @@ -133,16 +133,16 @@ mark, .bg-variant(@accent-primary); } .bg-success { - .bg-variant(@state-success-bg); + .bg-variant(#dff0d8); } .bg-info { - .bg-variant(@state-info-bg); + .bg-variant(#d9edf7); } .bg-warning { - .bg-variant(@state-warning-bg); + .bg-variant(#fcf8e3); } .bg-danger { - .bg-variant(@state-danger-bg); + .bg-variant(#f2dede); } @@ -204,7 +204,7 @@ abbr[title], // Add 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 @abbr-border-color; + border-bottom: 1px dotted @gray-light; } .initialism { font-size: 90%; @@ -215,7 +215,7 @@ abbr[data-original-title] { blockquote { padding: (@line-height-computed / 2) @line-height-computed; margin: 0 0 @line-height-computed; - border-left: 5px solid @blockquote-border-color; + border-left: 5px solid @gray-lighter; p, ul, @@ -233,7 +233,7 @@ blockquote { display: block; font-size: 80%; // back to default font-size line-height: @line-height-base; - color: @blockquote-small-color; + color: @gray-light; &:before { content: '\2014 \00A0'; // em dash, nbsp @@ -248,7 +248,7 @@ blockquote { blockquote.pull-right { padding-right: 15px; padding-left: 0; - border-right: 5px solid @blockquote-border-color; + border-right: 5px solid @gray-lighter; border-left: 0; text-align: right; diff --git a/static/variables/ui-variables.less b/static/variables/ui-variables.less index 7bc0d785e..1cf475275 100644 --- a/static/variables/ui-variables.less +++ b/static/variables/ui-variables.less @@ -14,19 +14,10 @@ // 4. Generic usage descriptor (.btn-text, .p-body) // 5. Application-specific usage (.message-list-h1) -//=============================== Colors ===============================// -//== Brand colors -@nylas-yellow: #D5DC28; -@nylas-yellow-dark: #A0C23A; -@nylas-green: #5CB346; -@nylas-green-dark: #078E46; -@nylas-blue: #11A1A2; -@nylas-blue-dark: #0F7982; -@nylas-black: #313435; -@nylas-gray: #434648; -//== Generic colors -@black: @nylas-black; +//=============================== Colors ===============================// +//== Color Definitions +@black: #231f20; @gray-base: #0a0b0c; @gray-darker: lighten(@gray-base, 13.5%); // #222 @gray-dark: lighten(@gray-base, 20%); // #333 @@ -35,57 +26,54 @@ @gray-lighter: lighten(@gray-base, 92.5%); // #eee @white: #ffffff; -@blue: #419bf9; @blue-dark: #3187e1; +@blue: #419bf9; +@blue-light: #009ec4; -//== Color descriptors +//== Color Descriptors @accent-primary: @blue; @accent-primary-dark: @blue-dark; -@accent-secondary: @nylas-yellow; -@background-primary: #ffffff; +@background-primary: @white; @background-off-primary: #fdfdfd; @background-secondary: #f6f6f6; @background-tertiary: #6d7987; -@background-selected: @light-blue; -@border-primary-bg: darken(@background-primary, 10%); -@border-secondary-bg: darken(@background-secondary, 10%); -@border-tertiary-bg: darken(@background-tertiary, 10%); -@border-color-divider: @border-secondary-bg; +@color-info: @blue-dark; +@color-success: #5CB346; +@color-warning: #f0ad4e; +@color-error: #d9534f; +@color-danger: #d9534f; -@info-color: @blue-dark; -@success-color: @nylas-green; -@warning-color: #f0ad4e; -@error-color: #d9534f; -@danger-color: #d9534f; +@component-active-color: @accent-primary-dark; +@component-active-bg: @background-primary; + +@background-gradient: linear-gradient(to top, rgba(241,241,241,0.75) 0%, +rgba(253,253,253,0.75) 100%); + +@border-color-primary: darken(@background-primary, 10%); +@border-color-secondary: darken(@background-secondary, 10%); +@border-color-tertiary: darken(@background-tertiary, 10%); +@border-color-divider: @border-color-secondary; //============================= Typography =============================// // ----- Colors ----- -@text-color: @black; -@text-color-subtle: fadeout(@text-color, 20%); -@text-color-very-subtle: fadeout(@text-color, 50%); -@text-color-inverse: @white; -@text-color-inverse-subtle: fadeout(@text-color-inverse, 20%); -@text-color-inverse-very-subtle: fadeout(@text-color-inverse, 50%); -@text-color-alert: #e64d65; +@text-color: @black; +@text-color-subtle: fadeout(@text-color, 20%); +@text-color-very-subtle: fadeout(@text-color, 50%); +@text-color-inverse: @white; +@text-color-inverse-subtle: fadeout(@text-color-inverse, 20%); +@text-color-inverse-very-subtle: fadeout(@text-color-inverse, 50%); -@text-color-heading: @nylas-gray; +@text-color-heading: #434648; @text-color-link: @blue; @text-color-link-hover: @blue-dark; @text-color-link-active: @blue-dark; @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; @text-color-search-match: #fff000; @text-color-search-current-match: #ff8b1a; @@ -94,8 +82,7 @@ @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-base; +@font-family: @font-family-sans-serif; @font-family-heading: @font-family-sans-serif; // ----- Font Weights ----- @@ -109,19 +96,19 @@ // ----- Font Sizes ----- @font-size-base: 14px; -@font-size-tiny: @font-size-base * 0.70; // 10.5px -@font-size-smaller: @font-size-base * 0.80; // 12px -@font-size-small: @font-size-base * 0.93; // 14px -@font-size: @font-size-base; // 15px -@font-size-large: @font-size-base * 1.06; // 16px -@font-size-larger: @font-size-base * 1.20; // 18px +@font-size-tiny: @font-size-base * 0.75; // 10.5px +@font-size-smaller: @font-size-base * 0.86; // 12px +@font-size-small: @font-size-base * 0.93; // 13px +@font-size: @font-size-base; // 14px +@font-size-large: @font-size-base * 1.14; // 16px +@font-size-larger: @font-size-base * 1.29; // 18px -@font-size-h1: @font-size-base * 1.6; // 24px -@font-size-h2: @font-size-base * 1.6; // 24px -@font-size-h3: @font-size-base * 1.4; // 24px -@font-size-h4: @font-size-base * 1.25; // 18px +@font-size-h1: @font-size-base * 1.71; // 24px +@font-size-h2: @font-size-base * 1.71; // 24px +@font-size-h3: @font-size-base * 1.43; // 20px +@font-size-h4: @font-size-base * 1.29; // 18px @font-size-h5: @font-size-base; -@font-size-h6: @font-size-base * 0.85; // 12px +@font-size-h6: @font-size-base * 0.86; // 12px // ----- Line Height ----- @line-height-base: 1.5; // 22.5/15 @@ -129,18 +116,6 @@ @line-height-heading: 1.1; -//============================ 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/"; -//** File name for all font files. -@icon-font-name: "glyphicons-halflings-regular"; -//** Element ID within SVG icon file. -@icon-font-svg-id: "glyphicons_halflingsregular"; - - //============================== Spacing ===============================// // Define common padding and border radius sizes and more. Values based on // 14px text and 1.428 line-height (~20px to start). @@ -150,11 +125,7 @@ @spacing-quarter: @spacing-standard * 0.25; @spacing-half: @spacing-standard * 0.5; @spacing-three-quarters: @spacing-standard * 0.75; - -@spacing-sub-double: @spacing-standard * 1.75; @spacing-double: @spacing-standard * 2; -@spacing-super-double: @spacing-standard * 2.25; - @padding-base-vertical: 5px; @padding-base-horizontal: 12px; @@ -177,9 +148,13 @@ //============================== Shadows ===============================// -@standard-shadow-color: rgba(0, 0, 0, 0.21); + +@standard-shadow-color: rgba(0, 0, 0, 0.15); @standard-shadow: 0 1px 4px 0 @standard-shadow-color; @standard-shadow-up: 0 -1px 4px 0 @standard-shadow-color; +@shadow-border: 0 0.5px 0 @standard-shadow-color, 0 -0.5px 0 @standard-shadow-color, +0.5px 0 0 @standard-shadow-color, -0.5px 0 0 @standard-shadow-color; + //=============================== Buttons ==============================// @@ -188,268 +163,77 @@ @btn-default-bg-color: darken(@background-primary, 0.5%); @btn-default-text-color: @text-color; -@btn-action-bg-color: @success-color; +@btn-action-bg-color: @color-success; @btn-action-text-color: @text-color; @btn-emphasis-bg-color: #5b90fb; @btn-emphasis-text-color: @text-color-inverse; -@btn-danger-bg-color: @danger-color; +@btn-danger-bg-color: @color-danger; @btn-danger-text-color: @text-color-inverse; + //=============================== Dropdowns ============================// @dropdown-default-bg-color: @background-primary; @dropdown-default-text-color: @text-color; -@dropdown-default-border-color: fadeout(@border-color, 10%); +@dropdown-default-border-color: fadeout(@border-color-primary, 10%); + //=============================== Inputs ===============================// -//** `` background color -@input-bg: #fff; -//** `` background color +@input-bg: @white; @input-bg-disabled: @gray-lighter; -@input-background-color: white; - -@input-border-color: fadeout(@border-color, 10%); +@input-border-color: fadeout(@border-color-primary, 10%); @input-border-color-blurred: desaturate(@input-border-color, 100%); -@input-tint-color: fade(@background-selected, 10%); -@input-tint-color-hover: fade(@input-tint-color, 30%); -@input-tint-color-blurred: desaturate(@input-tint-color, 100%); - - -@input-accessory-color-hover: @light-blue; -@input-accessory-color: @gray-light; -@input-cancel-color: @red; - -//** Text color for ``s -@input-color: @gray; -//** `` border color -@input-border: #ccc; - -// TODO: Rename `@input-border-radius` to `@input-border-radius-base` in v4 -//** Default `.form-control` border radius -@input-border-radius: @border-radius-base; -//** Large `.form-control` border radius -@input-border-radius-large: @border-radius-large; -//** Small `.form-control` border radius -@input-border-radius-small: @border-radius-small; - -//** Border color for inputs on focus -@input-border-focus: #66afe9; - -//** Placeholder text color -@input-color-placeholder: #999; - -//** Default `.form-control` height -@input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2); -//** Large `.form-control` height -@input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2); -//** Small `.form-control` height -@input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2); - -//** Background color for textual input addons -@input-group-addon-bg: @gray-lighter; -//** Border color for textual input addons -@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. -// -// Note: These variables are not generated into the Customizer. - -@zindex-navbar: 1000; -@zindex-dropdown: 1000; -@zindex-popover: 1060; -@zindex-tooltip: 1070; -@zindex-navbar-fixed: 1030; -@zindex-modal: 1040; - - - -//** Global color for active items (e.g., navs or dropdowns). -@component-active-color: @accent-primary-dark; -//** Global background color for active items (e.g., navs or dropdowns). -@component-active-bg: @background-primary; - -@component-secondary-active-bg: @background-primary; - -//== Source List (used in Sidebar, iTunes-style) -// -// ## - -//** Background color on `.list-group-item` -@source-list-bg: @panel-background-color; -//** Background color of active list items -@source-list-active-bg: @panel-background-color; -//** Text color of active list items -@source-list-active-color: @component-active-color; - -//== List -// -//## - -//** Background color on `.list-group-item` -@list-bg: #fff; -//** `.list-item` border color -@list-border: #ddd; -//** List group border radius -@list-border-radius: @border-radius-base; - -//** Background color of single list items on hover -@list-hover-bg: darken(@list-bg, 4%); - -//** Text color of active list items -@list-focused-color: @list-bg; -//** Background color of active list items -@list-focused-bg: @component-active-color; -//** Border color of active list elements -@list-focused-border: @list-focused-bg; -//** Text color for content within active list items -@list-focused-color-muted: lighten(@list-focused-bg, 40%); - -//** Text color of active list items -@list-selected-color: inherit; -//** Background color of active list items -@list-selected-bg: mix(@component-active-color, @list-bg, 17%); -//** Border color of active list elements -@list-selected-border: mix(@component-active-color, @list-bg, 50%); -//** Text color for content within active list items -@list-selected-color-muted: lighten(@list-selected-bg, 40%); - -//** Text color of disabled list items -@list-disabled-color: @gray-light; -//** Background color of disabled list items -@list-disabled-bg: @gray-lighter; -//** Text color for content within disabled list items -@list-disabled-text-color: @list-disabled-color; - - -//** Abbreviations and acronyms border color -@abbr-border-color: @gray-light; -//** Blockquote small color -@blockquote-small-color: @gray-light; -//** Blockquote font size -@blockquote-font-size: (@font-size-base * 1.25); -//** Blockquote border color -@blockquote-border-color: @gray-lighter; - - - -//== Form states and alerts -// -//## Define colors for form feedback states and, by default, alerts. - -@state-success-text: #3c763d; -@state-success-bg: #dff0d8; -@state-success-border: darken(spin(@state-success-bg, -10), 5%); - -@state-info-text: #31708f; -@state-info-bg: #d9edf7; -@state-info-border: darken(spin(@state-info-bg, -10), 7%); - -@state-warning-text: #8a6d3b; -@state-warning-bg: #fcf8e3; -@state-warning-border: darken(spin(@state-warning-bg, -10), 5%); - -@state-danger-text: #a94442; -@state-danger-bg: #f2dede; -@state-danger-border: darken(spin(@state-danger-bg, -10), 5%); - -///// - -// ------------- -// EVERYTHING BELOW THIS NEEDS TO BE DEPRECATED OR MOVED ABOVE THIS -// old stuff -// ------------- - -// Private -// -// Do not use these colors outside of this file. -// You should choose variables based on the role of your -// interface elements. In other themes, @light-blue may -// not be light or blue. - -@PANTONE-340-UP: #00ac6f; -@PANTONE-7704-UP: #009ec4; -@PANTONE-7547-UP: #3c505f; -@PANTONE-296-UP: #003c56; -@PANTONE-421-UP: #b4babd; -@PANTONE-Red-032-UP: #f15f4b; -@PANTONE-326-UP: #3bbeb4; -@PANTONE-Process-Black-UP: #231f20; -@PANTONE-Cool-Gray-1-UP: #e1e0dc; - -@green: @PANTONE-340-UP; -@light-blue: @PANTONE-7704-UP; -@blue-gray: @PANTONE-7547-UP; -@dark-blue: @PANTONE-296-UP; -@light-gray: @PANTONE-421-UP; -@red: @PANTONE-Red-032-UP; -@teal: @PANTONE-326-UP; -@black: @PANTONE-Process-Black-UP; -@cool-gray: @PANTONE-Cool-Gray-1-UP; - -@blue-grey: @blue-gray; -@light-grey: @light-gray; - -// Public -// -// Use these variables in your packages. Choose the variable -// that best matches the role of the element you are styling. - -// TEXT - -@unread-color: @blue; //! -@action-color: @green; - -@progress-bar-fill: @light-blue; -@progress-bar-background: @light-gray; - -@background-color-info: @light-blue; -@background-color-success: @green; -@background-color-warning: #ff4800; -@background-color-error: @red; -@background-color-pending: @light-gray; - -@background-gradient: linear-gradient(to top, rgba(241,241,241,0.75) 0%, -rgba(253,253,253,0.75) 100%); - -@base-border-color: darken(@background-primary, 15%); -@border-color: darken(@background-primary, 15%); -@border-color-subtle: darken(@background-primary, 8%); - -// Inputs - -// Menus - -@menu-divider-color: @light-gray; -@menu-item-color-hover: fade(@background-selected, 10%); -@menu-item-color-selected: @background-selected; -@menu-text-color-selected: @text-color-inverse; - -// Sizes - -@disclosure-arrow-size: 12px; @input-font-size: 14px; -@component-padding: 10px; -@component-icon-padding: 5px; -@component-icon-size: 16px; -@component-line-height: 25px; + +//=============================== Components ===========================// + +//== Toolbar +@toolbar-background-color: darken(@white, 17.5%); + +//== Account Sidebar +@panel-background-color: @gray-lighter; +@source-list-bg: @panel-background-color; +@source-list-active-bg: @panel-background-color; +@source-list-active-color: @component-active-color; + +//== Thread List (e.g, `.list-group-item`, `.list-item`) +@list-bg: @white; +@list-border: #ddd; +@list-hover-bg: darken(@list-bg, 4%); +@list-focused-color: @list-bg; +@list-focused-bg: @component-active-color; +@list-focused-border: @list-focused-bg; +@list-selected-color: inherit; +@list-selected-bg: mix(@component-active-color, @list-bg, 17%); +@list-selected-border: mix(@component-active-color, @list-bg, 50%); + +//== Notifications +@background-color-info: @blue-light; +@background-color-success: #009ec4; +@background-color-warning: #ff4800; +@background-color-error: #f15f4b; +@background-color-pending: #b4babd; + +//== Menus +@menu-item-color-hover: fade(@blue-light, 10%); +@menu-item-color-selected: @blue-light; +@menu-text-color-selected: @text-color-inverse; + +//== Sizes +@disclosure-arrow-size: 12px; + +@component-padding: 10px; +@component-icon-padding: 5px; +@component-icon-size: 16px; +@component-line-height: 25px; @component-border-radius: 2px; -//== Panels and Sidebars -@panel-background-color: @gray-lighter; -@toolbar-background-color: darken(@white, 17.5%); - // Helpers for Specs - Do Not Remove @spec-test-variable: rgb(152,123,0);