From b120777facbed95bed48984b28b3d94cba4b2ac5 Mon Sep 17 00:00:00 2001 From: Jason Rudolph Date: Fri, 24 Aug 2018 11:15:12 -0400 Subject: [PATCH] :arrow_right: Migrate core package 'one-light-ui' into ./packages --- package-lock.json | 3 +- package.json | 4 +- packages/README.md | 2 +- packages/one-light-ui/.coffeelintignore | 1 + packages/one-light-ui/.gitignore | 1 + packages/one-light-ui/LICENSE.md | 20 ++ packages/one-light-ui/README.md | 42 +++ packages/one-light-ui/coffeelint.json | 37 +++ packages/one-light-ui/index.less | 35 +++ packages/one-light-ui/lib/main.coffee | 86 ++++++ packages/one-light-ui/package.json | 78 ++++++ packages/one-light-ui/spec/theme-spec.coffee | 36 +++ packages/one-light-ui/styles/atom.less | 67 +++++ packages/one-light-ui/styles/badges.less | 14 + packages/one-light-ui/styles/buttons.less | 186 +++++++++++++ packages/one-light-ui/styles/config.less | 156 +++++++++++ packages/one-light-ui/styles/core.less | 25 ++ packages/one-light-ui/styles/docks.less | 43 +++ packages/one-light-ui/styles/dropdowns.less | 15 ++ packages/one-light-ui/styles/editor.less | 44 +++ packages/one-light-ui/styles/git.less | 6 + packages/one-light-ui/styles/inputs.less | 87 ++++++ packages/one-light-ui/styles/key-binding.less | 12 + packages/one-light-ui/styles/lists.less | 150 +++++++++++ packages/one-light-ui/styles/messages.less | 16 ++ packages/one-light-ui/styles/modal.less | 125 +++++++++ packages/one-light-ui/styles/nav.less | 25 ++ .../one-light-ui/styles/notifications.less | 45 ++++ packages/one-light-ui/styles/packages.less | 231 ++++++++++++++++ packages/one-light-ui/styles/panels.less | 64 +++++ packages/one-light-ui/styles/panes.less | 22 ++ packages/one-light-ui/styles/progress.less | 94 +++++++ packages/one-light-ui/styles/settings.less | 140 ++++++++++ packages/one-light-ui/styles/sites.less | 13 + packages/one-light-ui/styles/status-bar.less | 97 +++++++ packages/one-light-ui/styles/tabs.less | 250 ++++++++++++++++++ packages/one-light-ui/styles/text.less | 84 ++++++ packages/one-light-ui/styles/title-bar.less | 4 + packages/one-light-ui/styles/tooltips.less | 53 ++++ packages/one-light-ui/styles/tree-view.less | 85 ++++++ packages/one-light-ui/styles/ui-mixins.less | 49 ++++ .../styles/ui-variables-custom.less | 132 +++++++++ .../one-light-ui/styles/ui-variables.less | 97 +++++++ 43 files changed, 2771 insertions(+), 5 deletions(-) create mode 100644 packages/one-light-ui/.coffeelintignore create mode 100644 packages/one-light-ui/.gitignore create mode 100644 packages/one-light-ui/LICENSE.md create mode 100644 packages/one-light-ui/README.md create mode 100644 packages/one-light-ui/coffeelint.json create mode 100644 packages/one-light-ui/index.less create mode 100644 packages/one-light-ui/lib/main.coffee create mode 100644 packages/one-light-ui/package.json create mode 100644 packages/one-light-ui/spec/theme-spec.coffee create mode 100644 packages/one-light-ui/styles/atom.less create mode 100644 packages/one-light-ui/styles/badges.less create mode 100644 packages/one-light-ui/styles/buttons.less create mode 100644 packages/one-light-ui/styles/config.less create mode 100644 packages/one-light-ui/styles/core.less create mode 100644 packages/one-light-ui/styles/docks.less create mode 100644 packages/one-light-ui/styles/dropdowns.less create mode 100644 packages/one-light-ui/styles/editor.less create mode 100644 packages/one-light-ui/styles/git.less create mode 100644 packages/one-light-ui/styles/inputs.less create mode 100644 packages/one-light-ui/styles/key-binding.less create mode 100644 packages/one-light-ui/styles/lists.less create mode 100644 packages/one-light-ui/styles/messages.less create mode 100644 packages/one-light-ui/styles/modal.less create mode 100644 packages/one-light-ui/styles/nav.less create mode 100644 packages/one-light-ui/styles/notifications.less create mode 100644 packages/one-light-ui/styles/packages.less create mode 100644 packages/one-light-ui/styles/panels.less create mode 100644 packages/one-light-ui/styles/panes.less create mode 100644 packages/one-light-ui/styles/progress.less create mode 100644 packages/one-light-ui/styles/settings.less create mode 100644 packages/one-light-ui/styles/sites.less create mode 100644 packages/one-light-ui/styles/status-bar.less create mode 100644 packages/one-light-ui/styles/tabs.less create mode 100644 packages/one-light-ui/styles/text.less create mode 100644 packages/one-light-ui/styles/title-bar.less create mode 100644 packages/one-light-ui/styles/tooltips.less create mode 100644 packages/one-light-ui/styles/tree-view.less create mode 100644 packages/one-light-ui/styles/ui-mixins.less create mode 100644 packages/one-light-ui/styles/ui-variables-custom.less create mode 100644 packages/one-light-ui/styles/ui-variables.less diff --git a/package-lock.json b/package-lock.json index ea8cdabf6..f4b1aeb49 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4149,8 +4149,7 @@ "integrity": "sha512-fXUzR34G+uepHq9vzmZZyKK6bGehOt2shX91iNqdecPvoHxR3lwWmAHoUMux7O0rXvClz5z0efVmnxgiDml6hQ==" }, "one-light-ui": { - "version": "https://www.atom.io/api/packages/one-light-ui/versions/1.12.4/tarball", - "integrity": "sha512-uU3Kvl3yPxy3Cdd8DukjRdtdW2f+BuwmgnDKCA3wXrAVKcDDsz+FLUyEYsvSG13EtaAACe2yUIaGa52PMmIS7w==" + "version": "file:packages/one-light-ui" }, "oniguruma": { "version": "6.2.1", diff --git a/package.json b/package.json index 7b5a34f46..7d2111163 100644 --- a/package.json +++ b/package.json @@ -130,7 +130,7 @@ "one-dark-syntax": "https://www.atom.io/api/packages/one-dark-syntax/versions/1.8.4/tarball", "one-dark-ui": "https://www.atom.io/api/packages/one-dark-ui/versions/1.12.4/tarball", "one-light-syntax": "https://www.atom.io/api/packages/one-light-syntax/versions/1.8.4/tarball", - "one-light-ui": "https://www.atom.io/api/packages/one-light-ui/versions/1.12.4/tarball", + "one-light-ui": "file:packages/one-light-ui", "oniguruma": "6.2.1", "open-on-github": "https://www.atom.io/api/packages/open-on-github/versions/1.3.1/tarball", "package-generator": "https://www.atom.io/api/packages/package-generator/versions/1.3.0/tarball", @@ -178,7 +178,7 @@ "base16-tomorrow-dark-theme": "1.5.0", "base16-tomorrow-light-theme": "1.5.0", "one-dark-ui": "1.12.4", - "one-light-ui": "1.12.4", + "one-light-ui": "file:./packages/one-light-ui", "one-dark-syntax": "1.8.4", "one-light-syntax": "1.8.4", "solarized-dark-syntax": "1.1.5", diff --git a/packages/README.md b/packages/README.md index 379324a33..f57018ed3 100644 --- a/packages/README.md +++ b/packages/README.md @@ -81,7 +81,7 @@ See [RFC 003](https://github.com/atom/atom/blob/master/docs/rfcs/003-consolidate | **one-dark-syntax** | [`atom/one-dark-syntax`][one-dark-syntax] | [#17853](https://github.com/atom/atom/issues/17853) | | **one-dark-ui** | [`atom/one-dark-ui`][one-dark-ui] | [#17854](https://github.com/atom/atom/issues/17854) | | **one-light-syntax** | [`atom/one-light-syntax`][one-light-syntax] | [#17855](https://github.com/atom/atom/issues/17855) | -| **one-light-ui** | [`atom/one-light-ui`][one-light-ui] | | +| **one-light-ui** | [`./packages/one-light-ui`](./one-light-ui) | | | **open-on-github** | [`atom/open-on-github`][open-on-github] | | | **package-generator** | [`atom/package-generator`][package-generator] | | | **settings-view** | [`atom/settings-view`][settings-view] | | diff --git a/packages/one-light-ui/.coffeelintignore b/packages/one-light-ui/.coffeelintignore new file mode 100644 index 000000000..1db51fed7 --- /dev/null +++ b/packages/one-light-ui/.coffeelintignore @@ -0,0 +1 @@ +spec/fixtures diff --git a/packages/one-light-ui/.gitignore b/packages/one-light-ui/.gitignore new file mode 100644 index 000000000..3c3629e64 --- /dev/null +++ b/packages/one-light-ui/.gitignore @@ -0,0 +1 @@ +node_modules diff --git a/packages/one-light-ui/LICENSE.md b/packages/one-light-ui/LICENSE.md new file mode 100644 index 000000000..4d231b456 --- /dev/null +++ b/packages/one-light-ui/LICENSE.md @@ -0,0 +1,20 @@ +Copyright (c) 2014 GitHub Inc. + +Permission is hereby granted, free of charge, to any person obtaining +a copy of this software and associated documentation files (the +"Software"), to deal in the Software without restriction, including +without limitation the rights to use, copy, modify, merge, publish, +distribute, sublicense, and/or sell copies of the Software, and to +permit persons to whom the Software is furnished to do so, subject to +the following conditions: + +The above copyright notice and this permission notice shall be +included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE +LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION +OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION +WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/packages/one-light-ui/README.md b/packages/one-light-ui/README.md new file mode 100644 index 000000000..4d985856a --- /dev/null +++ b/packages/one-light-ui/README.md @@ -0,0 +1,42 @@ +## One Light UI theme [![Build Status](https://travis-ci.org/atom/one-light-ui.svg?branch=master)](https://travis-ci.org/atom/one-light-ui) + +A light UI theme that adapts to most syntax themes. + +![One light UI](https://cloud.githubusercontent.com/assets/378023/26246819/0826f04e-3cd6-11e7-98eb-cd94bc48b090.png) + +> The font used in the screenshot is [Fira Mono](https://github.com/mozilla/Fira). + + +### Install + +This theme comes bundled with Atom and can be activated by going to the __Settings > Themes__ section and selecting "One Light" from the __UI Themes__ drop-down menu. + + +### Settings + +In the theme settings you can: + +- Change the __Font Size__ to scale the whole UI up or down. +- Choose between 3 __Tab Sizing__ modes. +- Hide the __dock buttons__. + +To make changes, go to `Settings > Themes > One Light UI > Settings` or the cog icon next to the theme picker. + + +### Customize + +It's also possible to resize only certain areas by adding the following to your `styles.less` (Use DevTools to find the right selectors): + +```css +.theme-one-light-ui { + .tab-bar { font-size: 18px; } + .tree-view { font-size: 14px; } + .status-bar { font-size: 12px; } +} +``` + + +### FAQ + +__Why do the colors change when I switch Syntax themes.__ +This UI theme uses the same background color as the chosen syntax theme. If that syntax theme has a dark background color, it only uses its hue, but otherwise stays light. This lets you use light-dark combos. diff --git a/packages/one-light-ui/coffeelint.json b/packages/one-light-ui/coffeelint.json new file mode 100644 index 000000000..a5dd715e3 --- /dev/null +++ b/packages/one-light-ui/coffeelint.json @@ -0,0 +1,37 @@ +{ + "max_line_length": { + "level": "ignore" + }, + "no_empty_param_list": { + "level": "error" + }, + "arrow_spacing": { + "level": "error" + }, + "no_interpolation_in_single_quotes": { + "level": "error" + }, + "no_debugger": { + "level": "error" + }, + "prefer_english_operator": { + "level": "error" + }, + "colon_assignment_spacing": { + "spacing": { + "left": 0, + "right": 1 + }, + "level": "error" + }, + "braces_spacing": { + "spaces": 0, + "level": "error" + }, + "spacing_after_comma": { + "level": "error" + }, + "no_stand_alone_at": { + "level": "error" + } +} diff --git a/packages/one-light-ui/index.less b/packages/one-light-ui/index.less new file mode 100644 index 000000000..09b35c279 --- /dev/null +++ b/packages/one-light-ui/index.less @@ -0,0 +1,35 @@ + +// Atom UI Theme: One + +@import "styles/ui-variables.less"; +@import "styles/ui-mixins.less"; +@import "octicon-mixins.less"; // https://github.com/atom/atom/blob/master/static/variables/octicon-mixins.less + +@import "styles/atom.less"; +@import "styles/badges.less"; +@import "styles/buttons.less"; +@import "styles/docks.less"; +@import "styles/editor.less"; +@import "styles/git.less"; +@import "styles/inputs.less"; +@import "styles/lists.less"; +@import "styles/messages.less"; +@import "styles/nav.less"; +@import "styles/notifications.less"; +@import "styles/modal.less"; +@import "styles/panels.less"; +@import "styles/panes.less"; +@import "styles/progress.less"; +@import "styles/tabs.less"; +@import "styles/text.less"; +@import "styles/title-bar.less"; +@import "styles/tooltips.less"; +@import "styles/tree-view.less"; +@import "styles/status-bar.less"; +@import "styles/key-binding.less"; +@import "styles/sites.less"; + +@import "styles/settings.less"; +@import "styles/packages.less"; +@import "styles/core.less"; +@import "styles/config.less"; diff --git a/packages/one-light-ui/lib/main.coffee b/packages/one-light-ui/lib/main.coffee new file mode 100644 index 000000000..815691a56 --- /dev/null +++ b/packages/one-light-ui/lib/main.coffee @@ -0,0 +1,86 @@ +root = document.documentElement +themeName = 'one-light-ui' + + +module.exports = + activate: (state) -> + atom.config.observe "#{themeName}.fontSize", (value) -> + setFontSize(value) + + atom.config.observe "#{themeName}.tabSizing", (value) -> + setTabSizing(value) + + atom.config.observe "#{themeName}.tabCloseButton", (value) -> + setTabCloseButton(value) + + atom.config.observe "#{themeName}.hideDockButtons", (value) -> + setHideDockButtons(value) + + atom.config.observe "#{themeName}.stickyHeaders", (value) -> + setStickyHeaders(value) + + # DEPRECATED: This can be removed at some point (added in Atom 1.17/1.18ish) + # It removes `layoutMode` + if atom.config.get("#{themeName}.layoutMode") + atom.config.unset("#{themeName}.layoutMode") + + deactivate: -> + unsetFontSize() + unsetTabSizing() + unsetTabCloseButton() + unsetHideDockButtons() + unsetStickyHeaders() + + +# Font Size ----------------------- + +setFontSize = (currentFontSize) -> + root.style.fontSize = "#{currentFontSize}px" + +unsetFontSize = -> + root.style.fontSize = '' + + +# Tab Sizing ----------------------- + +setTabSizing = (tabSizing) -> + root.setAttribute("theme-#{themeName}-tabsizing", tabSizing.toLowerCase()) + +unsetTabSizing = -> + root.removeAttribute("theme-#{themeName}-tabsizing") + + +# Tab Close Button ----------------------- + +setTabCloseButton = (tabCloseButton) -> + if tabCloseButton is 'Left' + root.setAttribute("theme-#{themeName}-tab-close-button", 'left') + else + unsetTabCloseButton() + +unsetTabCloseButton = -> + root.removeAttribute("theme-#{themeName}-tab-close-button") + + +# Dock Buttons ----------------------- + +setHideDockButtons = (hideDockButtons) -> + if hideDockButtons + root.setAttribute("theme-#{themeName}-dock-buttons", 'hidden') + else + unsetHideDockButtons() + +unsetHideDockButtons = -> + root.removeAttribute("theme-#{themeName}-dock-buttons") + + +# Sticky Headers ----------------------- + +setStickyHeaders = (stickyHeaders) -> + if stickyHeaders + root.setAttribute("theme-#{themeName}-sticky-headers", 'sticky') + else + unsetStickyHeaders() + +unsetStickyHeaders = -> + root.removeAttribute("theme-#{themeName}-sticky-headers") diff --git a/packages/one-light-ui/package.json b/packages/one-light-ui/package.json new file mode 100644 index 000000000..9d4c47be7 --- /dev/null +++ b/packages/one-light-ui/package.json @@ -0,0 +1,78 @@ +{ + "name": "one-light-ui", + "theme": "ui", + "version": "1.12.5", + "description": "Atom One light UI theme", + "keywords": [ + "light", + "adaptive", + "ui" + ], + "license": "MIT", + "repository": "https://github.com/atom/one-light-ui", + "main": "lib/main", + "engines": { + "atom": ">0.40.0" + }, + "devDependencies": { + "coffeelint": "^1.9.7" + }, + "configSchema": { + "fontSize": { + "title": "Font Size", + "description": "Change the font size for the UI.", + "type": "integer", + "default": 12, + "enum": [ + 10, + 11, + 12, + 13, + 14, + 15, + 16, + 17, + 18, + 19, + 20 + ], + "order": 1 + }, + "tabSizing": { + "title": "Tab Sizing", + "description": "In Even mode all tabs will be the same size. Great for quickly closing many tabs. In Maximum mode the tabs will expand to take up the full width. In Minimum mode the tabs will only take as little space as needed and also show longer file names.", + "type": "string", + "default": "Even", + "enum": [ + "Even", + "Maximum", + "Minimum" + ], + "order": 2 + }, + "tabCloseButton": { + "title": "Tab Close Button", + "description": "Choose the position of the close button shown in tabs.", + "type": "string", + "default": "Right", + "enum": [ + "Left", + "Right" + ], + "order": 3 + }, + "hideDockButtons": { + "title": "Hide dock toggle buttons", + "description": "Note: When hiding the toggle buttons, opening a dock needs to be done by using the keyboard or other alternatives.", + "type": "boolean", + "default": "false", + "order": 4 + }, + "stickyHeaders": { + "title": "Make tree-view project headers sticky", + "type": "boolean", + "default": "false", + "order": 5 + } + } +} diff --git a/packages/one-light-ui/spec/theme-spec.coffee b/packages/one-light-ui/spec/theme-spec.coffee new file mode 100644 index 000000000..909939f69 --- /dev/null +++ b/packages/one-light-ui/spec/theme-spec.coffee @@ -0,0 +1,36 @@ +themeName = 'one-light-ui' + +describe "#{themeName} theme", -> + beforeEach -> + waitsForPromise -> + atom.packages.activatePackage(themeName) + + it "allows the font size to be set via config", -> + expect(document.documentElement.style.fontSize).toBe '12px' + + atom.config.set("#{themeName}.fontSize", '10') + expect(document.documentElement.style.fontSize).toBe '10px' + + it "allows the tab sizing to be set via config", -> + atom.config.set("#{themeName}.tabSizing", 'Maximum') + expect(document.documentElement.getAttribute("theme-#{themeName}-tabsizing")).toBe 'maximum' + + it "allows the tab sizing to be set via config", -> + atom.config.set("#{themeName}.tabSizing", 'Minimum') + expect(document.documentElement.getAttribute("theme-#{themeName}-tabsizing")).toBe 'minimum' + + it "allows the tab close button to be shown on the left via config", -> + atom.config.set("#{themeName}.tabCloseButton", 'Left') + expect(document.documentElement.getAttribute("theme-#{themeName}-tab-close-button")).toBe 'left' + + it "allows the dock toggle buttons to be hidden via config", -> + atom.config.set("#{themeName}.hideDockButtons", true) + expect(document.documentElement.getAttribute("theme-#{themeName}-dock-buttons")).toBe 'hidden' + + it "allows the tree-view headers to be sticky via config", -> + atom.config.set("#{themeName}.stickyHeaders", true) + expect(document.documentElement.getAttribute("theme-#{themeName}-sticky-headers")).toBe 'sticky' + + it "allows the tree-view headers to not be sticky via config", -> + atom.config.set("#{themeName}.stickyHeaders", false) + expect(document.documentElement.getAttribute("theme-#{themeName}-sticky-headers")).toBe null diff --git a/packages/one-light-ui/styles/atom.less b/packages/one-light-ui/styles/atom.less new file mode 100644 index 000000000..911a7ac5a --- /dev/null +++ b/packages/one-light-ui/styles/atom.less @@ -0,0 +1,67 @@ +* { + box-sizing: border-box; +} + +html { + font-size: @font-size; +} + +atom-workspace { + background-color: @app-background-color; +} + + +// Scrollbars ------------------------------------ + +.scrollbars-visible-always { + ::-webkit-scrollbar { + width: 10px; + height: 10px; + } + + ::-webkit-scrollbar-track { + background: @scrollbar-background-color; + } + + ::-webkit-scrollbar-thumb { + border-radius: 5px; + border: 3px solid @scrollbar-background-color; + background: @scrollbar-color; + background-clip: content-box; + } + + ::-webkit-scrollbar-corner { + background: @scrollbar-background-color; + } + + ::-webkit-scrollbar-thumb:vertical:active { + border-radius: 0; + border-left-width: 0; + border-right-width: 0; + } + + ::-webkit-scrollbar-thumb:horizontal:active { + border-radius: 0; + border-top-width: 0; + border-bottom-width: 0; + } + + atom-text-editor { + ::-webkit-scrollbar-track { + background: @scrollbar-background-color-editor; + } + ::-webkit-scrollbar-corner { + background: @scrollbar-background-color-editor; + } + ::-webkit-scrollbar-thumb { + border-color: @scrollbar-background-color-editor; + background: @scrollbar-color-editor; + } + } +} + +// TODO: Move to a better place, not sure where it gets used +.caret { + border-top: 5px solid #fff; + margin-top: -1px; +} diff --git a/packages/one-light-ui/styles/badges.less b/packages/one-light-ui/styles/badges.less new file mode 100644 index 000000000..a1020805d --- /dev/null +++ b/packages/one-light-ui/styles/badges.less @@ -0,0 +1,14 @@ +.badge { + padding: @ui-padding/4 @ui-padding/2.5; + min-width: @ui-padding*1.25; + .text(highlight); + border-radius: @ui-size*2; + background-color: @badge-background-color; + + // Icon ---------------------- + &.icon { + font-size: @ui-size; + padding: @ui-padding-icon @ui-padding-icon*1.5; + } + +} diff --git a/packages/one-light-ui/styles/buttons.less b/packages/one-light-ui/styles/buttons.less new file mode 100644 index 000000000..8a1b3989a --- /dev/null +++ b/packages/one-light-ui/styles/buttons.less @@ -0,0 +1,186 @@ + +@btn-border: 1px solid @button-border-color; +@btn-padding: 0 @ui-size/1.25; + +// Mixins ----------------------- + +.btn-default (@color, @hover-color, @selected-color, @text-color) { + color: @text-color; + text-shadow: none; + border: @btn-border; + background-color: @color; + background-image: linear-gradient(lighten(@color, 2%), @color); + + &:hover { + color: @text-color-highlight; + background-image: linear-gradient(lighten(@hover-color, 2%), @hover-color); + } + &:active { + background: darken(@color, 4%); + box-shadow: none; + } + &.selected { + background: @selected-color; + } + &.selected:focus, + &.selected:hover { + background: lighten(@selected-color, 2%); + } + &:focus { + .focus(); // unfortunately :focus styles stay even after releasing mouse. + } +} + +.btn-variant (@color) { + @_text-color: contrast(@color, white, hsl(0,0%,20%), 33% ); + .btn-default( + @color, + lighten(@color, 3%), + saturate(darken(@color, 12%), 20%), + @text-color-highlight + ); + color: @_text-color; + + & when (@ui-lightness > 50%) { + border-color: transparent; // hide border on light backgrounds + } + + &:hover, + &:focus { + color: @_text-color; + } + &:focus { + border-color: transparent; + background-clip: padding-box; + box-shadow: inset 0 0 0 1px fade(@base-border-color, 50%), 0 0 0 1px @color; + } + + &.icon:before { + color: @_text-color; + } +} + + +// Buttons ----------------------- + +.btn { + height: initial; + padding: @btn-padding; + font-size: @ui-size; + line-height: @ui-line-height; +} + +.btn, +.btn.btn-default { + .btn-default(@button-background-color, @button-background-color-hover, @button-background-color-selected, @text-color); +} + +.btn.btn-primary { + .btn-variant(@accent-bg-color); +} +.btn.btn-info { + .btn-variant(@background-color-info); +} +.btn.btn-success { + .btn-variant(@background-color-success); +} +.btn.btn-warning { + .btn-variant(@background-color-warning); +} +.btn.btn-error { + .btn-variant(@background-color-error); +} + + +// Button Sizes ----------------------- + +.btn.btn-xs, +.btn-group-xs > .btn { + font-size: @ui-size*.8; + line-height: @ui-line-height; + padding: @btn-padding; +} +.btn.btn-sm, +.btn-group-sm > .btn { + font-size: @ui-size*.9; + line-height: @ui-line-height; + padding: @btn-padding; +} +.btn.btn-lg, +.btn-group-lg > .btn { + font-size: @ui-size * 1.5; + line-height: @ui-line-height; + padding: @btn-padding; +} + + +// Button Group ----------------------- + +.btn-group > .btn { + z-index: 0; + &:hover { + z-index: 0; + } + &.btn:focus { + z-index: 1; + .focus(); + } + + &:first-child { + border-left: @btn-border; + } + &:last-child, + &.selected:last-child { + border-right: @btn-border; + } + + // hide border on light backgrounds + & when (@ui-lightness > 50%) { + &.btn-primary:first-child, + &.btn-info:first-child, + &.btn-success:first-child, + &.btn-warning:first-child, + &.btn-error:first-child { + border-left-color: transparent; + } + + &.btn-primary:last-child, + &.btn-info:last-child, + &.btn-success:last-child, + &.btn-warning:last-child, + &.btn-error:last-child { + border-right-color: transparent; + } + } + + &.selected, + &.selected:first-child, + &.selected:last-child { + color: @button-text-color-selected; + border-color: @button-border-color-selected; + } + + & when (@ui-lightness > 50%) { + &.selected + .btn { + border-left-color: @button-border-color-selected; + } + &.selected + .selected { + border-left-color: mix(@button-border-color, @button-border-color-selected); + } + } + + &.selected:focus { + border-color: @button-background-color-selected; + box-shadow: inset 0 0 0 1px fade(@base-border-color, 50%), 0 0 0 1px @button-background-color-selected; + } +} + + +// Button Icons ----------------------- + +.btn.icon:before { + width: auto; + height: auto; + font-size: 1.333333em; + vertical-align: -.1em; +} diff --git a/packages/one-light-ui/styles/config.less b/packages/one-light-ui/styles/config.less new file mode 100644 index 000000000..a0970cc8c --- /dev/null +++ b/packages/one-light-ui/styles/config.less @@ -0,0 +1,156 @@ + +// Theme config +// This gets changed from the theme settings + +@theme-tabsizing: ~'theme-@{ui-theme-name}-tabsizing'; +@theme-dockButtons: ~'theme-@{ui-theme-name}-dock-buttons'; +@theme-stickyHeaders: ~'theme-@{ui-theme-name}-sticky-headers'; +@theme-closeButton: ~'theme-@{ui-theme-name}-tab-close-button'; + + +// Tabs ---------------------------------------------- + +@tab-min-width: 7em; // ~ icon + 6 characters + +// Even (default) + +.tab-bar { + .tab, + .tab.active { + flex: 1 1 0; + max-width: 22em; + min-width: @tab-min-width; + } + atom-dock & { + .tab, + .tab.active { + max-width: none; + } + } + + // TODO: Turn this into a config + // Truncates the beginning instead + // .title.title.title { + // direction: rtl; // change direction + // } +} + + +// Maximum (full width) + +[@{theme-tabsizing}="maximum"] .tab-bar { + .tab, + .tab.active { + max-width: none; + } +} + + +// Minimum (show long paths) + +[@{theme-tabsizing}="minimum"] .tab-bar { + .tab, + .tab.active { + flex: 0 0 auto; + min-width: 2.75em; + max-width: @tab-min-width * 3.3; + } + atom-dock { + .tab, + .tab.active { + max-width: @tab-min-width * 2; + } + } +} + + +// Tabs: close button position ------------------------------ + +[@{theme-closeButton}="left"] { + + .tab-bar .tab { + .close-icon { + right: auto; + left: @icon-padding-right; + } + } + +} + + +// Hide docks toggle buttons ------------------------------ + +[@{theme-dockButtons}="hidden"] { + + // Hide docks when not open + .atom-dock-inner:not(.atom-dock-open) { + display: none; + } + + // Hide toggle buttons + .atom-dock-toggle-button { + display: none; + } + +} + + +// Sticky Projects ------------------------------ + +[@{theme-stickyHeaders}="sticky"] { + + .tree-view { + .project-root-header { + position: sticky; + top: 0; + z-index: 3; + padding-left: 5px; + padding-right: 10px; + border-bottom: 1px solid @base-border-color; + background-color: @tree-view-background-color; + } + .project-root.project-root { + margin-left: -5px; + margin-right: -10px; + + // Disable selection + &::before { + display: none; + } + + // Add selection back + &.selected .project-root-header { + background-color: @background-color-selected; + } + } + &:focus .selected .project-root-header.project-root-header { + background: @button-background-color-selected; + } + + // Fix sticky header from covering auto-revealed files + .entry.file.selected { + padding-top: @ui-tab-height; + margin-top: -@ui-tab-height; + } + + // Fix sticky header from covering auto-revealed directories when using up/down keys + // for directories, scroll test moves to .header, see https://github.com/atom/tree-view/blob/d2857ad4d7eeb7dad5cf94b33257a8740211480e/lib/tree-view.coffee#L839 + .entry.directory.selected:not(.project-root) { + & > .header { + padding-top: @ui-tab-height; + margin-top: -@ui-tab-height; + } + &::before { + margin-top: @ui-tab-height; + } + } + + // Fix above directory is not being clickable + .entry.directory:not(.project-root) > .header { + z-index: 2; + } + .entry.directory.selected:not(.project-root) > .header { + z-index: 1; + } + } +} diff --git a/packages/one-light-ui/styles/core.less b/packages/one-light-ui/styles/core.less new file mode 100644 index 000000000..0f30626c0 --- /dev/null +++ b/packages/one-light-ui/styles/core.less @@ -0,0 +1,25 @@ +// Misc + +.preview-pane .results-view .path-match-number { + // show number also on selected item + color: inherit; + opacity: .6; +} + +.tool-panel.incompatible-packages { + // incompatible-packages isn't really a tool-panel and more a whole pane + .text(normal); + background-color: @level-2-color; +} + +// Styleguide ---------------------------------------------- + +.styleguide { + // Modal + atom-panel.modal:after { + position: absolute; // prevent overlay backdrop from leaking outside + left: -@ui-padding; + right: -@ui-padding; + bottom: -@ui-padding; + } +} diff --git a/packages/one-light-ui/styles/docks.less b/packages/one-light-ui/styles/docks.less new file mode 100644 index 000000000..c91681e21 --- /dev/null +++ b/packages/one-light-ui/styles/docks.less @@ -0,0 +1,43 @@ + +// Docks ------------------------------ + +// Make handles not take up any space when dock is open +.atom-dock-resize-handle { + position: absolute; + z-index: 11; // same as toggle buttons + + &.left { + top: 0; + right: 0; + bottom: 0; + } + &.right { + top: 0; + left: 0; + bottom: 0; + } + &.bottom { + top: 0; + left: 0; + right: 0; + } +} + +// Add borders +.atom-dock-inner.atom-dock-open.left { + border-right: 1px solid @base-border-color; +} +.atom-dock-inner.atom-dock-open.right { + border-left: 1px solid @base-border-color; +} + +// Make toggle buttons cover ^ border +.atom-dock-toggle-button.left { + margin-left: -2px; +} +.atom-dock-toggle-button.right { + margin-right: -2px; +} +.atom-dock-inner:not(.atom-dock-open) .atom-dock-toggle-button.bottom { + margin-bottom: -1px; +} diff --git a/packages/one-light-ui/styles/dropdowns.less b/packages/one-light-ui/styles/dropdowns.less new file mode 100644 index 000000000..d793523bb --- /dev/null +++ b/packages/one-light-ui/styles/dropdowns.less @@ -0,0 +1,15 @@ +.dropdown-menu { + background-color: @overlay-background-color; + border-radius: @component-border-radius; + border: 1px solid @base-border-color; + padding: 0; + + > li > a { + .text(normal); + } + + > li > a:hover { + .text(highlight); + background-color: @background-color-highlight; + } +} diff --git a/packages/one-light-ui/styles/editor.less b/packages/one-light-ui/styles/editor.less new file mode 100644 index 000000000..1a73d4dcc --- /dev/null +++ b/packages/one-light-ui/styles/editor.less @@ -0,0 +1,44 @@ + +// Editor in a panel + +// TODO: Find a better selector, maybe a new class like atom-text-editor[medium] +atom-panel-container atom-text-editor.is-focused { + .focus(); +} + + +// Mini +// Usually just single line inputs + +atom-text-editor[mini] { + overflow: auto; + font-size: @ui-input-size; + line-height: @ui-line-height; + max-height: @ui-line-height * 5; // rows + padding-left: @ui-padding/3; + border-radius: @component-border-radius; + color: @text-color-highlight; + border: 1px solid @input-border-color; + background-color: @input-background-color; + + .placeholder-text { + color: @text-color-subtle; + } + + .selection .region { + background-color: @input-selection-color; + } + + .cursor { + border-color: @accent-color; + border-width: 2px; + } + + &.is-focused { + .focus(); + background-color: @input-background-color-focus; + .selection .region { + background-color: @input-selection-color-focus; + } + } +} diff --git a/packages/one-light-ui/styles/git.less b/packages/one-light-ui/styles/git.less new file mode 100644 index 000000000..2b6f2f8a4 --- /dev/null +++ b/packages/one-light-ui/styles/git.less @@ -0,0 +1,6 @@ +.status { .text(normal); } +.status-added { .text(success); } // green +.status-ignored { .text(subtle); } // faded +.status-modified { .text(warning); } // orange +.status-removed { .text(error); } // red +.status-renamed { .text(info); } // blue diff --git a/packages/one-light-ui/styles/inputs.less b/packages/one-light-ui/styles/inputs.less new file mode 100644 index 000000000..fe7e5e294 --- /dev/null +++ b/packages/one-light-ui/styles/inputs.less @@ -0,0 +1,87 @@ + +// +// Checkbox +// ------------------------- + +.input-checkbox { + &:active { + background-color: @accent-color; + } + &:before, + &:after { + background-color: @accent-text-color; + } + &:checked { + background-color: @accent-color; + } + + &:indeterminate { + background-color: @accent-color; + } +} + + +// +// Radio +// ------------------------- + +.input-radio { + &:before { + background-color: @accent-text-color; + } + &:active { + background-color: @accent-color; + } + &:checked { + background-color: @accent-color; + } +} + + +// +// Range (Slider) +// ------------------------- + +.input-range { + &::-webkit-slider-thumb { + background-color: @accent-color; + } +} + + +// +// Toggle +// ------------------------- + +.input-toggle { + &:checked { + background-color: @accent-color; + } + &:before { + background-color: @accent-text-color; + } +} + + + +// States ------------------------- + +.input-text, +.input-search, +.input-number, +.input-textarea, +.input-select, +.input-color { + &:focus { + .focus(); + } +} + +.input-text, +.input-search, +.input-number, +.input-textarea { + &:invalid { + .invalid(); + } +} diff --git a/packages/one-light-ui/styles/key-binding.less b/packages/one-light-ui/styles/key-binding.less new file mode 100644 index 000000000..c4dff4133 --- /dev/null +++ b/packages/one-light-ui/styles/key-binding.less @@ -0,0 +1,12 @@ +.key-binding { + display: inline-block; + margin-left: @ui-padding-icon; + padding: 0 @ui-padding/4; + line-height: 2; + font-family: inherit; + font-size: max(1em, @ui-size*.85); + letter-spacing: @ui-size/10; + border-radius: @component-border-radius; + color: @accent-bg-text-color; + background-color: @accent-bg-color; +} diff --git a/packages/one-light-ui/styles/lists.less b/packages/one-light-ui/styles/lists.less new file mode 100644 index 000000000..ddae9f44a --- /dev/null +++ b/packages/one-light-ui/styles/lists.less @@ -0,0 +1,150 @@ +.list-group, +.list-tree { + li:not(.list-nested-item), + li.list-nested-item > .list-item { + .text(normal); + } + + .generate-list-item-text-color(@class) { + li:not(.list-nested-item).text-@{class}, + li.list-nested-item.text-@{class} > .list-item { + .text(@class); + } + } + .generate-list-item-text-color(subtle); + .generate-list-item-text-color(info); + .generate-list-item-text-color(success); + .generate-list-item-text-color(warning); + .generate-list-item-text-color(error); + .generate-list-item-text-color(selected); + + .generate-list-item-status-color(@color, @status) { + li:not(.list-nested-item).status-@{status}, + li.list-nested-item.status-@{status} > .list-item { + color: @color; + } + + li:not(.list-nested-item).selected.status-@{status}, + li.list-nested-item.selected.status-@{status} > .list-item { + color: @color; + } + + } + + .generate-list-item-status-color(@text-color-added, added); + .generate-list-item-status-color(@text-color-ignored, ignored); + .generate-list-item-status-color(@text-color-modified, modified); + .generate-list-item-status-color(@text-color-removed, removed); + .generate-list-item-status-color(@text-color-renamed, renamed); + + li:not(.list-nested-item).selected, + li.list-nested-item.selected > .list-item { + .text(selected); + } + + .no-icon { + padding-left: calc(@ui-padding-icon ~"+" @component-icon-size); + } +} + +.list-tree.has-collapsable-children .list-nested-item > .list-item::before { + text-align: center; +} + +.select-list ol.list-group, +&.select-list ol.list-group { + li.two-lines { + .secondary-line { + color: @text-color-subtle; + } + &.selected .secondary-line { + color: fade(@text-color-highlight, 50%); + text-shadow: none; + } + } + + // Reset icon to allow nesting + .icon { + display: initial; + height: initial; + } + + // We want to highlight the background of the list items because we dont + // know their size. + li.selected { + background-color: @background-color-selected; + &:before{ display: none; } + } + + &.mark-active { + @active-icon-size: 14px; + + // pad in front of the text where the icon would be We'll pad the non- + // active items with a 'fake' icon so other classes can pad the item + // without worrying about the icon padding. + li:before { + content: ''; + background-color: transparent; + position: static; + display: inline-block; + left: auto; right: auto; + height: @active-icon-size; + width: @active-icon-size; + font-size: @active-icon-size; + } + > li:not(.active):before { + margin-right: @ui-padding-icon; + } + li.active { + .octicon(check, @active-icon-size); + &:before { + margin-right: @ui-padding-icon; + color: @text-color-success; + } + } + } +} + +.select-list.popover-list { + @popover-list-padding: @ui-padding/4; + background-color: @overlay-background-color; + box-shadow: 0 2px 8px 1px rgba(0, 0, 0, 0.3); + padding: @popover-list-padding; + border-radius: @component-border-radius; + + atom-text-editor[mini] { + margin-bottom: @popover-list-padding; + } + + ol.list-group { + margin-top: @popover-list-padding; + } + + .list-group li { + padding-left: @popover-list-padding; + } +} + +.ui-sortable { + li { + line-height: 2.5; + } + + // For sortable lists in the settings view + li.ui-sortable-placeholder { + visibility: visible !important; + background-color: darken(@pane-item-background-color, 10%); + } +} + +li.ui-draggable-dragging, +li.ui-sortable-helper { + line-height: @ui-line-height; + height: @ui-line-height; + border: 0; + border-radius: 0; + list-style: none; + padding: 0 @ui-padding; + background: @background-color-highlight; + box-shadow: 0 0 1px @base-border-color; +} diff --git a/packages/one-light-ui/styles/messages.less b/packages/one-light-ui/styles/messages.less new file mode 100644 index 000000000..dda181c60 --- /dev/null +++ b/packages/one-light-ui/styles/messages.less @@ -0,0 +1,16 @@ +background-tips ul.background-message { + font-weight: 500; + font-size: 2em; + color: @text-color-faded; + + .message { + padding: 0 @component-padding * 10; + + .keystroke { + white-space: nowrap; + vertical-align: middle; + line-height: 1; + padding: .1em .4em; + } + } +} diff --git a/packages/one-light-ui/styles/modal.less b/packages/one-light-ui/styles/modal.less new file mode 100644 index 000000000..7bc0a42d1 --- /dev/null +++ b/packages/one-light-ui/styles/modal.less @@ -0,0 +1,125 @@ + +@modal-padding: @ui-padding/2 @ui-padding/1.5; +@modal-width: @ui-size * 50; + +atom-panel-container.modal { + position: absolute; + top: 0; left: 0; right: 0; +} + +atom-panel.modal { + position: relative; + width: 100%; + max-width: @modal-width; + margin: 0 auto; + left: initial; + color: @text-color; + background-color: transparent; + padding: @ui-padding/2; + + &.from-top { + top: @component-padding * 5; + } + + atom-text-editor[mini] { + margin-bottom: @ui-padding/2; + } + + .select-list ol.list-group, + &.select-list ol.list-group { + border: 1px solid @overlay-border-color; + background-color: lighten(@overlay-background-color, 2%); + + &:empty { + border: none; + margin-top: 0; + } + + li { + padding: @modal-padding; + line-height: @ui-line-height; + border-bottom: 1px solid @overlay-border-color; + + &:last-of-type { + border-bottom: none; + } + + .icon::before { + margin-left: 1px; + } + + .icon.status { + float: right; + margin-left: @ui-padding-icon; + &:before { + margin-left: 0; + margin-right: 0; + } + } + + &.selected { + .status.icon { + color: @text-color-selected; + } + } + } + + } + + .select-list .key-binding { + margin-top: -1px; + margin-left: @ui-padding/2; + margin-right: calc( -@ui-padding/3 ~"+" 1px); + } + + .select-list .primary-line { + display: block; + } + + & > * { + position: relative; // fixes stacking order + } + + .command-palette { + padding: 1px; // prevents the box-shadow of the input from being cut off + background-color: @overlay-background-color; + } + + + // Container + &:before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 0; + background-color: @overlay-background-color; + border-radius: @component-border-radius*2; + box-shadow: 0 6px 12px -2px hsla(0,0%,0%,.4); + } + + // Backdrop + // TODO: Add extra wrapper to translate individually or easier positioning + + &:after { + content: ""; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: -1; + background: @overlay-backdrop-color; + opacity: @overlay-backdrop-opacity; + backface-visibility: hidden; // fixes scrollbar on retina screens + -webkit-animation: overlay-fade .24s cubic-bezier(0.215, 0.61, 0.355, 1); + } + + @-webkit-keyframes overlay-fade { + 0% { opacity: 0; } + 100% { opacity: @overlay-backdrop-opacity; } + } + +} diff --git a/packages/one-light-ui/styles/nav.less b/packages/one-light-ui/styles/nav.less new file mode 100644 index 000000000..2d35bfdd9 --- /dev/null +++ b/packages/one-light-ui/styles/nav.less @@ -0,0 +1,25 @@ +.nav-tabs { + border-bottom: 1px solid @base-border-color; + li { + a, + &.active a { + border: none; + margin-right: 0px; + margin-bottom: 1px; + } + + a:hover, + &.active a, + &.active a:hover { + background-color: @background-color-highlight; + border: none; + color: @text-color-selected; + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; + } + + &.active a { + background-color: @tab-background-color-active; + } + } +} diff --git a/packages/one-light-ui/styles/notifications.less b/packages/one-light-ui/styles/notifications.less new file mode 100644 index 000000000..3f7ec520d --- /dev/null +++ b/packages/one-light-ui/styles/notifications.less @@ -0,0 +1,45 @@ + +atom-notifications { + font-size: @ui-size * 1.2; + + atom-notification { + width: 32em; + &.has-detail { + width: 32em; + } + + &:first-child.has-close .message { + padding-right: 9em; + } + &:only-child.has-close .message, + &.has-close .message { + padding-right: 2.5em; + } + .item { + padding: @ui-padding/2; + } + + .detail, + .description { + font-size: .85em; + } + + &.icon:before { + padding-top: .85em; + } + .close { + width: 2.5em; + height: 3em; + line-height: 3em; + font-size: inherit; + } + .close-all.btn { + top: .5em; + right: 2.5em; + } + .btn-copy-report { + line-height: 2em; + margin-left: .5em; + } + } +} diff --git a/packages/one-light-ui/styles/packages.less b/packages/one-light-ui/styles/packages.less new file mode 100644 index 000000000..73dd79c28 --- /dev/null +++ b/packages/one-light-ui/styles/packages.less @@ -0,0 +1,231 @@ +// Overrides packages + +// find-and-replace + project-find --------------------------- + +.find-and-replace, +.project-find { + padding: @ui-padding/4; + .input-block-item { + padding: @ui-padding/4; + } +} + +// find-and-replace +.find-and-replace { + .header, + .input-block { + min-width: @ui-size*22; + } + + .input-block-item { + flex: 1 1 @ui-size*22; + } + .input-block-item--flex { + flex: 100 1 @ui-size*22; + } + + .btn, + .btn-group-options .btn { + font-size: @ui-size*1.1; + padding: 0; + } + + .btn-group-options .btn, + .btn-group-options .btn.option-selection, + .btn-group-options .btn.option-whole-word { + padding: 0; + font-size: @ui-input-size; // keep same as text input + } + + .find-container atom-text-editor { + padding-right: @ui-size*5; // leave some room for the results count + } + .find-meta-container { + top: 0; + font-size: @ui-size; + line-height: @ui-size*2.5; + } +} + +// project-find +.project-find { + .header, + .input-block { + min-width: @ui-size*15; + } + + .input-block-item { + flex: 1 1 @ui-size*14; + } + .input-block-item--flex { + flex: 100 1 @ui-size*20; + } + + .btn { + font-size: @ui-size*1.1; + padding: 0; + } + .btn-group-options .btn { + padding: 0; + font-size: @ui-input-size; // keep same as text input + } +} + +// Colorize find-and-replace based on results +& when (@ui-hue >= 190) and (@ui-hue <= 340) { + .find-and-replace { + &.has-no-results .find-container atom-text-editor[mini].is-focused { + .invalid(); + .selection .region { + background-color: mix(@text-color-error, @input-background-color, 50%); + } + .cursor { + border-color: @text-color-error; + } + } + + &.has-results .find-container atom-text-editor[mini].is-focused { + .valid(); + .selection .region { + background-color: mix(@text-color-success, @input-background-color, 50%); + } + .cursor { + border-color: @text-color-success; + } + } + + &.has-results .find-container .result-counter { color: @text-color-success; } + &.has-no-results .find-container .result-counter { color: @text-color-error; } + } +} + + + + +// Timecop --------------------------- + +.timecop { + .timecop-panel { + padding: @component-padding/2; + background-color: @level-2-color; + } + + .tool-panel { + padding: @component-padding/2; + background-color: @level-2-color; + } + + .inset-panel { + border: 1px solid @base-border-color; + } + + .panel-heading { + .text(highlight); + border-color: @base-border-color; + background-color: @level-1-color; + } + + .list-item .inline-block { + line-height: 1.5; + } +} + + +// Command Palette + Fuzzy Finder --------------------------- + +.command-palette .list-group .character-match, +.fuzzy-finder .list-group .character-match { + color: @accent-only-text-color; +} + + +// Deprecation Cop --------------------------- + +.deprecation-cop { + .deprecation-overview { + background-color: @level-2-color; + border-bottom: 1px solid @base-border-color; + } +} + + +// Tool Bar --------------------------- + +.tool-bar { + // Make it look the same as other panels + background-color: @level-3-color; + border: none; + + // just a single border + more spacing + &.tool-bar-horizontal .tool-bar-spacer { + border-left: 0 none; + margin-left: .5em; + margin-right: .5em; + } + &.tool-bar-vertical .tool-bar-spacer { + border-bottom: 0 none; + margin-top: .5em; + margin-bottom: .5em; + } + + // only show button styles on hover + button.tool-bar-btn { + background-color: @level-3-color; + background-image: none; + border-color: @level-3-color; + } +} + + + +// GitHub package --------------------------------------------------- + +.github { + + // Fix focus styles + // Since it's not possible to add a padding to + // a pseudo element is used to add the border when focused. + &-CommitView-editor atom-text-editor.is-focused { + box-shadow: none; + &:before { + content: ""; + position: absolute; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; + border: 2px solid; + border-color: inherit; + border-radius: @component-border-radius; + } + } + + // Add focus styles since :focus doesn't work + &-CommitView-coAuthorEditor { + &.is-focused { + .focus(); + } + &.is-open { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + + + .Select-option { + &.is-focused { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + color: @accent-text-color; + background-color: @accent-color; + } + } + .Select-menu-outer { + left: -2px; + right: -2px; + bottom: 100%; + border: 2px solid @accent-color; + background-color: @overlay-background-color; + } + } + +} diff --git a/packages/one-light-ui/styles/panels.less b/packages/one-light-ui/styles/panels.less new file mode 100644 index 000000000..0d8b10850 --- /dev/null +++ b/packages/one-light-ui/styles/panels.less @@ -0,0 +1,64 @@ + +// Panels + +atom-panel { + .text(normal); + position: relative; + border-bottom: 1px solid @base-border-color; + + &.top { + border-right: 1px solid @base-border-color; + } + &.left { + border-right: 1px solid @base-border-color; + } + &.right { + border-left: 1px solid @base-border-color; + } + &.bottom { + border-right: 1px solid @base-border-color; + } + &.footer:last-child { + border-bottom: none; + } + &.tool-panel:empty { + border: none; + } +} + +.panel { + &.bordered { + border: 1px solid @base-border-color; + border-radius: @component-border-radius; + } +} + +.inset-panel { + position: relative; + background-color: @inset-panel-background-color; + border-radius: @component-border-radius; + &.bordered { + border: 1px solid @base-border-color; + border-radius: @component-border-radius; + } + & .panel-heading { + border-color: @inset-panel-border-color; + } +} + +.panel-heading { + .text(normal); + border-bottom: 1px solid @panel-heading-border-color; + background-color: @panel-heading-background-color; + + .btn { + padding-left: 8px; + padding-right: 8px; + .btn-default( + lighten(@button-background-color, 10%), + lighten(@button-background-color-hover, 10%), + lighten(@button-background-color-selected, 10%), + lighten(@text-color, 10%) + ); + } +} diff --git a/packages/one-light-ui/styles/panes.less b/packages/one-light-ui/styles/panes.less new file mode 100644 index 000000000..1842937ee --- /dev/null +++ b/packages/one-light-ui/styles/panes.less @@ -0,0 +1,22 @@ + +atom-pane-container { + + atom-pane { + position: relative; + border-right: 1px solid @base-border-color; + border-bottom: 1px solid @base-border-color; + + .item-views { + // prevent atom-text-editor from leaking ouside might improve performance + overflow: hidden; + } + } + +} + +// Hide right-most border +atom-pane:only-child, +atom-pane-axis.pane-row > atom-pane:last-child, +atom-pane-axis.pane-column:last-child > atom-pane { + border-right: none; +} diff --git a/packages/one-light-ui/styles/progress.less b/packages/one-light-ui/styles/progress.less new file mode 100644 index 000000000..0c070df60 --- /dev/null +++ b/packages/one-light-ui/styles/progress.less @@ -0,0 +1,94 @@ + +// Spinner ---------------------- + +@spinner-duration: 1.2s; + +.loading-spinner(@size) { + position: relative; + display: block; + width: 1em; + height: 1em; + font-size: @size; + background: radial-gradient(@accent-color .1em, transparent .11em); + + &::before, + &::after { + content: ""; + position: absolute; + z-index: 10; // prevent sibling elements from getting their own layers + top: 0; + left: 0; + border-radius: 1em; + width: inherit; + height: inherit; + border-radius: 1em; + border: 2px solid; + -webkit-animation: spinner-animation @spinner-duration infinite; + -webkit-animation-fill-mode: backwards; + } + &::before { + border-color: @accent-color transparent transparent transparent; + } + &::after { + border-color: transparent lighten(@accent-color, 15%) transparent transparent; + -webkit-animation-delay: @spinner-duration/2; + } + + &.inline-block { + display: inline-block; + } +} + +@-webkit-keyframes spinner-animation { + 0% { transform: rotateZ( 0deg); -webkit-animation-timing-function: cubic-bezier(0, 0, .8, .2); } + 50% { transform: rotateZ(180deg); -webkit-animation-timing-function: cubic-bezier(.2, .8, 1, 1); } + 100% { transform: rotateZ(360deg); } +} + +// Spinner sizes +.loading-spinner-tiny { .loading-spinner(16px); &::before, &::after { border-width: 1px; } } +.loading-spinner-small { .loading-spinner(32px); } +.loading-spinner-medium { .loading-spinner(48px); } +.loading-spinner-large { .loading-spinner(64px); } + + + + +// Progress Bar ---------------------- + +@progress-height: 8px; +@progress-buffer-color: fade(@progress-background-color, 20%); + +progress { + -webkit-appearance: none; + height: @progress-height; + border-radius: @component-border-radius; + background-color: @input-background-color; + box-shadow: inset 0 0 0 1px @input-border-color; + + &::-webkit-progress-bar { + background-color: transparent; + } + + &::-webkit-progress-value { + border-radius: @component-border-radius; + background-color: @progress-background-color; + } + + // Is buffering (when no value is set) + &:indeterminate { + background-image: + linear-gradient(-45deg, transparent 33%, @progress-buffer-color 33%, + @progress-buffer-color 66%, transparent 66%); + background-size: 25px @progress-height, 100% 100%, 100% 100%; + + // Plays animation for 1min (12runs) at normal speed, + // then slows down frame-rate for 9mins (108runs) to limit CPU usage + -webkit-animation: progress-buffering 5s linear 12, + progress-buffering 5s 60s steps(10) 108; + } +} + +@-webkit-keyframes progress-buffering { + 100% { background-position: -100px 0px; } +} diff --git a/packages/one-light-ui/styles/settings.less b/packages/one-light-ui/styles/settings.less new file mode 100644 index 000000000..a3a2642ef --- /dev/null +++ b/packages/one-light-ui/styles/settings.less @@ -0,0 +1,140 @@ + +// Settings + +// Modular Scale (1.125): http://www.modularscale.com/?1&em&1.125&web&table +@ms-6: @ui-size * 2.027; +@ms-5: @ui-size * 1.802; +@ms-4: @ui-size * 1.602; +@ms-3: @ui-size * 1.424; +@ms-2: @ui-size * 1.266; +@ms-1: @ui-size * 1.125; +@ms-0: @ui-size * 1; +@ms_1: @ui-size * 0.889; +@ms_2: @ui-size * 0.790; + + + +.settings-view { + + // Menu ------------------------------ + + .config-menu { + position: relative; + min-width: @ui-size * 15; + max-width: @ui-size * 20; + border-width: 0 1px 0 0; + border-image: linear-gradient(@level-2-color 10px, @base-border-color 200px) 0 1 0 0 stretch; + background: @level-2-color; + + .btn { + white-space: initial; + font-size: @ms_1; + line-height: 1; + padding: @ui-padding/3 @ui-padding/2; + &::before { + vertical-align: middle; + } + } + + + } + .nav { + & > li > a { + padding: @ui-padding/2 @ui-padding; + line-height: @ui-line-height; + } + } + + + // Sections ------------------------------ + + & > .panels { + background-color: @level-2-color; + } + + .section-container { + max-width: @ui-size*60; + } + .sub-section { + margin: @ui-padding*3 0; + } + + .section, + .section:first-child, + .section:last-child { + padding: @ui-padding*3; + } + + .themes-panel .control-group { + margin-top: @ui-padding*2; + } + + + // Titles ------------------------------ + + .section .section-heading { + margin-bottom: @ui-padding/1.5; + } + + .sub-section-heading.icon:before, + .section-heading.icon:before { + margin-right: @ui-padding-icon; + } + + + + // Cards ------------------------------ + + .package-card { + padding: @ui-padding; + .meta-controls .status-indicator { + width: @ui-padding/4; + &:before { + content: "\00a0"; // fixes 0 height + } + } + } + + + // Components ------------------------------ + + .icon::before { + color: @text-color-subtle; + } + + .editor-container { + margin: @ui-padding 0; + } + + .form-control { + font-size: @ui-size*1.25; + height: @ui-line-height; + padding-top: 0; + padding-bottom: 0; + } + + .update-all-button { + font-size: .75em; + } + + .install-button { + .btn-variant(@accent-bg-color); + } + + input[type="checkbox"] { + background-color: @background-color-selected; + &:active, + &:checked { + background-color: @accent-color; + } + &:before, + &:after { + background-color: @accent-text-color; + } + } + + .search-container .btn { + font-size: @ui-input-size; + } + +} diff --git a/packages/one-light-ui/styles/sites.less b/packages/one-light-ui/styles/sites.less new file mode 100644 index 000000000..4a02affed --- /dev/null +++ b/packages/one-light-ui/styles/sites.less @@ -0,0 +1,13 @@ +// Site Colors + +.ui-site(@num, @color) { + .ui-site-@{num} { + background-color: @color; + } +} + +.ui-site(1, @ui-site-color-1); +.ui-site(2, @ui-site-color-2); +.ui-site(3, @ui-site-color-3); +.ui-site(4, @ui-site-color-4); +.ui-site(5, @ui-site-color-5); diff --git a/packages/one-light-ui/styles/status-bar.less b/packages/one-light-ui/styles/status-bar.less new file mode 100644 index 000000000..1a171f501 --- /dev/null +++ b/packages/one-light-ui/styles/status-bar.less @@ -0,0 +1,97 @@ + +@status-bar-height: @ui-tab-height; // same as tabs +@status-bar-padding: @ui-padding; + +.status-bar { + font-size: @ui-size; + height: @status-bar-height; + line-height: @status-bar-height; + background-color: @level-3-color; + + .flexbox-repaint-hack { + padding: 0; // override default + } + + // underlines should only be used for external links + a:hover, + a:focus { + text-decoration: none; + cursor: default; + } + + .inline-block { + margin: 0; // override default + padding: 0 @status-bar-padding/2; + vertical-align: top; + + &:hover { + text-decoration: none; + background-color: @level-3-color-hover; + } + &:active { + background-color: @level-3-color-active; + } + + // reset on child inline-block + .inline-block { + margin: 0; + padding: 0; + } + } + + .status-bar-right { + .inline-block { + margin-left: 0; // override default + } + } + .icon { + vertical-align: middle; + } + .icon::before { + font-size: 1.33333em; // should be 16px with a default of 12px + width: auto; // use natural width + line-height: 1; + height: 1em; // same as line-height + margin-right: .25em; + top: auto; + } +} + + +// Package overrides ------------------------------- + +.status-bar.status-bar { + + // Read-only -> Remove hover effect + .is-read-only, // <- use this class in packages + status-bar-launch-mode, + busy-signal { + &:hover, + &:active, + .inline-block:hover, + .inline-block:active { + background-color: transparent; + } + } + + // Remove underline + .package-updates-status-view, + .github-ChangedFilesCount { + &:hover, + &:focus { + text-decoration: none; + cursor: default; + } + } + + // Remove margin for icon without text + status-bar-launch-mode::before, // Launch mode + .about-release-notes::before, // New release squirrel + .PortalStatusBarIndicator .icon::before, // Teletype + .icon.is-icon-only::before { + margin-right: 0; + } + .github-PushPull-label.is-push:empty { // GitHub package when nothing to push + margin-right: -.25em; + } +} diff --git a/packages/one-light-ui/styles/tabs.less b/packages/one-light-ui/styles/tabs.less new file mode 100644 index 000000000..be3c0990e --- /dev/null +++ b/packages/one-light-ui/styles/tabs.less @@ -0,0 +1,250 @@ + +// Tabs + +@tab-border: 1px solid @tab-border-color; +@title-padding: .66em; +@icon-padding-top: .5em; // 2.5 (total) - 1.5 (text) / 2 +@icon-padding-right: .5em; + +.tab-bar { + position: relative; + height: @ui-tab-height; + box-shadow: inset 0 -1px 0 @tab-border-color; + background: @tab-bar-background-color; + overflow-x: auto; + overflow-y: hidden; + border-radius: 0; + + &::-webkit-scrollbar { + display: none; + } + + &:empty { + display: none; + } + + + // Tab ---------------------- + + .tab { + position: relative; + top: 0; + padding: 0; + margin: 0; + height: inherit; + font-size: inherit; + line-height: @ui-tab-height; + color: @tab-text-color; + background-color: @tab-background-color; + box-shadow: inherit; + border-left: @tab-border; + &.active { + color: @tab-text-color-active; + background-color: @tab-background-color-active; + box-shadow: none; + } + &:first-of-type { + border-left-color: transparent; + } + &:last-of-type { + // use box-shadow to not take up any space + box-shadow: inset 0 -1px 0 @tab-border-color, 1px 0 0 @base-border-color; + } + &.active:last-of-type { + box-shadow: 1px 0 0 @base-border-color; + } + + + // Title ---------------------- + + .title { + text-align: center; + margin: 0 @title-padding; + } + + // VCS coloring ---------------------- + &:not(.active) .status-added { color: @tab-inactive-status-added; } + &:not(.active) .status-modified { color: @tab-inactive-status-modified; } + + + // Icons ---------------------- + + .title.title:before { + margin-right: .3em; + width: auto; + height: auto; + line-height: 1; + font-size: 1.125em; + vertical-align: -.0625em; // Adjust center for the 0.1em font-size increase + } + + // Close icon ---------------------- + + .close-icon { + top: @icon-padding-top; + right: @icon-padding-right; + z-index: 2; + font-size: 1em; + width: 1.5em; + height: 1.5em; + line-height: 1.5; + text-align: center; + border-radius: @component-border-radius; + background-color: inherit; + overflow: hidden; + transform: scale(0); + transition: transform .08s; + &:hover { + color: @accent-text-color; + background-color: @accent-color; + } + &:active { + background-color: fade(@accent-color, 50%); + } + &::before { + z-index: 1; + font-size: 1.1em; + vertical-align: -.05em; // Adjust center for the 0.1em font-size increase + width: auto; + height: auto; + pointer-events: none; + } + } + &:hover .close-icon { + transform: scale(1); + transition-duration: .16s; + } + } + + // Modified icon ---------------------- + + .tab.modified { + &:hover .close-icon { + color: @accent-color; + &:hover { + color: @accent-bg-text-color; + } + } + &:not(:hover) .close-icon { + top: @icon-padding-top; + right: @icon-padding-right; + width: 1.5em; + height: 1.5em; + line-height: 1.5; + color: @accent-color; + border-radius: @component-border-radius; + border: none; + transform: scale(1); + &::before { + content: "\f052"; + display: inline-block; + } + } + } + + + // Tabs in the docks ---------------------- + + atom-dock & { + .tab.active { + background-color: @tool-panel-background-color; + } + } + + + // Dragging ---------------------- + + .tab.is-dragging { + opacity: .5; + + .close-icon, + &:before { + visibility: hidden; + } + } + + .placeholder { + position: relative; + pointer-events: none; + + // bar + &:before { + z-index: 1; + margin: 0; + width: 2px; + height: @ui-tab-height; + background-color: @accent-color; + } + + // arrow + &:after { + z-index: 0; + top: @ui-tab-height/2; + margin: -4px 0 0 -3px; + border-radius: 0; + border: 4px solid @accent-color; + transform: rotate(45deg); + background: transparent; + } + + &:last-child { + &:before { + margin-left: -2px; + } + &:after { + transform: none; + margin-left: -10px; + border-color: transparent @accent-color transparent transparent; + } + } + } + + + // Overrides ---------------------- + + // keep tabs same size when active + .tab, + .tab.active { + padding-right: 0; + .title { + padding: 0; + } + } +} + + +// Active pane marker -------------- + +atom-pane-axis > atom-pane.active, +atom-pane-container > atom-pane.pane { + .tab.active:before { + content: ""; + position: absolute; + pointer-events: none; + z-index: 2; + top: 0; + left: -1px; // cover left border + bottom: 0; + width: 2px; + background: @accent-color; + } +} + +// hide marker in docks +atom-dock .tab-bar .tab::before { + display: none; +} + + +// Custom tabs -------------- + +.tab-bar .tab.active { + &[data-type$="Editor"], + &[data-type$="AboutView"], + &[data-type$="TimecopView"], + &[data-type$="StyleguideView"], + &[data-type="MarkdownPreviewView"] { + color: @tab-text-color-editor; + background-color: @tab-background-color-editor; // Match syntax background color + } +} diff --git a/packages/one-light-ui/styles/text.less b/packages/one-light-ui/styles/text.less new file mode 100644 index 000000000..399ff06d1 --- /dev/null +++ b/packages/one-light-ui/styles/text.less @@ -0,0 +1,84 @@ +h1, +h2, +h3 { + line-height: 1em; + margin-bottom: 15px +} +h1 { font-size: 2em; } +h2 { font-size: 1.5em; } +h3 { font-size: 1.2em; } + +p { + line-height: 1.6; + margin-bottom: 15px; +} + +label { + font-weight: normal; +} + +pre { + box-shadow: none; + color: @text-color; + background: @inset-panel-background-color; + border-radius: @component-border-radius; + border: none; + margin: 0; +} + +code { + .text(highlight); + background: @background-color-highlight; + border-radius: @component-border-radius; +} + +.selected { .text(highlight); } + +.text-smaller { font-size: 0.9em; } + +.text-subtle { .text(subtle); } +.text-highlight { .text(highlight); } + +.text-error { .text(error); } +.text-info { + .text(info); + &:hover { color: @text-color-info; } +} +.text-warning { + .text(warning); + &:hover { color: @text-color-warning; } +} +.text-success { + .text(success); + &:hover { color: @text-color-success; } +} + +.highlight-mixin { + padding: 1px 4px; + border-radius: 2px; +} + +.highlight { + .highlight-mixin(); + font-weight: 700; + color: @text-color-highlight; + background-color: @background-color-highlight; +} + +.highlight-color(@name, @background-color) { + .highlight-@{name} { + .highlight-mixin(); + font-weight: 500; + color: white; + text-shadow: 0 1px 0px hsla(0,0%,0%,.2); + background-color: @background-color; + } +} +.highlight-color( info, @background-color-info); +.highlight-color(warning, @background-color-warning); +.highlight-color( error, @background-color-error); +.highlight-color(success, @background-color-success); + +.results-view .path-details.list-item { + color: darken(@text-color-highlight, 18%); +} diff --git a/packages/one-light-ui/styles/title-bar.less b/packages/one-light-ui/styles/title-bar.less new file mode 100644 index 000000000..7e1b945a4 --- /dev/null +++ b/packages/one-light-ui/styles/title-bar.less @@ -0,0 +1,4 @@ +.title-bar { + height: 22px; // remove 1px since there is no border + border-bottom: none; +} diff --git a/packages/one-light-ui/styles/tooltips.less b/packages/one-light-ui/styles/tooltips.less new file mode 100644 index 000000000..f034f0e9b --- /dev/null +++ b/packages/one-light-ui/styles/tooltips.less @@ -0,0 +1,53 @@ +.tooltip { + white-space: nowrap; + font-size: @ui-size*1.15; + + &.in { + opacity: 1; + transition: opacity .12s ease-out; + } + + .tooltip-inner { + line-height: 1; + padding: @ui-padding*.5 @ui-padding*.65; + border-radius: @component-border-radius; + background-color: @tooltip-background-color; + color: @tooltip-text-color; + white-space: nowrap; + max-width: none; + } + + .keystroke { + font-size: max(1em, @ui-size*.85); + padding: .1em .4em; + margin: 0 @ui-padding*-.35 0 @ui-padding*.25; + border-radius: max(2px, @component-border-radius / 2); + color: @tooltip-text-key-color; + background: @tooltip-background-key-color; + } + + &.top .tooltip-arrow { + border-top-color: @tooltip-background-color; + } + &.top-left .tooltip-arrow { + border-top-color: @tooltip-background-color; + } + &.top-right .tooltip-arrow { + border-top-color: @tooltip-background-color; + } + &.right .tooltip-arrow { + border-right-color: @tooltip-background-color; + } + &.left .tooltip-arrow { + border-left-color: @tooltip-background-color; + } + &.bottom .tooltip-arrow { + border-bottom-color: @tooltip-background-color; + } + &.bottom-left .tooltip-arrow { + border-bottom-color: @tooltip-background-color; + } + &.bottom-right .tooltip-arrow { + border-bottom-color: @tooltip-background-color; + } +} diff --git a/packages/one-light-ui/styles/tree-view.less b/packages/one-light-ui/styles/tree-view.less new file mode 100644 index 000000000..9063d7dd9 --- /dev/null +++ b/packages/one-light-ui/styles/tree-view.less @@ -0,0 +1,85 @@ +@tree-view-height: @ui-line-height; + +.tree-view { + font-size: @ui-size; + background: @tree-view-background-color; + + .project-root.project-root { + &:before { + height: @ui-tab-height; + background-clip: padding-box; + } + & > .header .name { + line-height: @ui-tab-height; + } + } + + // Selected state + .selected:before { + background: @background-color-selected; + } + + // Focus + selected state + &:focus { + .selected.list-item > .name, // files + .selected.list-nested-item > .list-item > .name, // folders + .selected.list-nested-item > .header:before { // arrow icon + color: contrast(@button-background-color-selected); + } + .selected:before { + background: @button-background-color-selected; + } + } +} + +.theme-one-dark-ui .tree-view .project-root.project-root::before { + border-top: 1px solid transparent; + background-clip: padding-box; +} + +.tree-view-resizer { + .tree-view-resize-handle { + width: 8px; + } +} + +// Variable height, based on ems +.list-group li:not(.list-nested-item), +.list-tree li:not(.list-nested-item), +.list-group li.list-nested-item > .list-item, +.list-tree li.list-nested-item > .list-item { + line-height: @tree-view-height; +} + +.list-group .selected::before, +.list-tree .selected::before { + height: @tree-view-height; +} + +// icon +.list-group .icon, +.list-tree .icon { + display: inline-block; + height: inherit; + &::before { + top: initial; + line-height: inherit; + height: inherit; + vertical-align: top; + } +} + +// Arrow icon +.list-group, +.list-tree { + .header.header.header.header::before { + top: initial; + line-height: inherit; + height: inherit; + vertical-align: top; + font-size: inherit; + } +} +.tree-view .project-root-header.project-root-header.project-root-header.project-root-header::before { + line-height: @ui-tab-height; +} diff --git a/packages/one-light-ui/styles/ui-mixins.less b/packages/one-light-ui/styles/ui-mixins.less new file mode 100644 index 000000000..e50a63aff --- /dev/null +++ b/packages/one-light-ui/styles/ui-mixins.less @@ -0,0 +1,49 @@ +// Pattern matching; ish is cray. +// http://lesscss.org/#-pattern-matching-and-guard-expressions + +.text(normal) { + font-weight: normal; + color: @text-color; +} +.text(subtle) { + font-weight: normal; + color: @text-color-subtle; +} +.text(highlight) { + font-weight: normal; + color: @text-color-highlight; +} +.text(selected) { + .text(highlight) +} + +.text(info) { + color: @text-color-info; +} +.text(success) { + color: @text-color-success; +} +.text(warning) { + color: @text-color-warning; +} +.text(error) { + color: @text-color-error; +} + +.focus() { + outline: none; + border-color: @accent-color; + box-shadow: 0 0 0 1px @accent-color; +} + +.valid() { + border-color: @text-color-success; + box-shadow: 0 0 0 1px @text-color-success; + background-color: mix(@text-color-success, @input-background-color, 10%); +} + +.invalid() { + border-color: @text-color-error; + box-shadow: 0 0 0 1px @text-color-error; + background-color: mix(@text-color-error, @input-background-color, 10%); +} diff --git a/packages/one-light-ui/styles/ui-variables-custom.less b/packages/one-light-ui/styles/ui-variables-custom.less new file mode 100644 index 000000000..c43f5aabd --- /dev/null +++ b/packages/one-light-ui/styles/ui-variables-custom.less @@ -0,0 +1,132 @@ + +// ONE light UI variables +// ---------------------------------------------- + +@import "syntax-variables"; + +.ui-syntax-color() { @syntax-background-color: hsl(220,1%,98%); } .ui-syntax-color(); // fallback color +@ui-syntax-color: @syntax-background-color; + +// Color guards ----------------- +@ui-s-h: hue(@ui-syntax-color); +.ui-hue() when (@ui-s-h = 0) { @ui-hue: 220; } // Use blue hue when no saturation +.ui-hue() when (@ui-s-h > 0) { @ui-hue: @ui-s-h; } +.ui-hue(); + +@ui-saturation: min( saturation(@ui-syntax-color), 24%); // max saturation +@ui-lightness: max( lightness(@ui-syntax-color), 92%); // min lightness + +// Main colors ----------------- +@ui-fg: hsl(@ui-hue, @ui-saturation, @ui-lightness - 72%); +@ui-bg: hsl(@ui-hue, @ui-saturation, @ui-lightness); // normalized @syntax-background-color +@ui-border: darken(@level-3-color, 6%); + + + + +// Custom variables +// These variables are only used in this theme +// ---------------------------------------------- + +@ui-theme-name: one-light-ui; + +// Text (Custom) ----------------- +@text-color-faded: fade(@text-color, 30%); + +@text-color-added: @text-color-success; // green +@text-color-ignored: @text-color-subtle; // faded +@text-color-modified: @text-color-warning; // orange +@text-color-removed: @text-color-error; // red +@text-color-renamed: @text-color-info; // blue + + +// Background (Custom) ----------------- +@level-1-color: lighten(@base-background-color, 4%); +@level-2-color: @base-background-color; +@level-3-color: darken(@base-background-color, 6%); + +@level-3-color-hover: darken(@level-3-color, 6%); +@level-3-color-active: darken(@level-3-color, 3%); + + +// Accent (Custom) ----------------- +@accent-luma: luma( hsl(@ui-hue, 50%, 50%) ); // get lightness of current hue + +// used for marker, inputs (smaller things) +@accent-color: mix( hsv( @ui-hue, 60%, 60%), hsl( @ui-hue, 100%, 68%), @accent-luma * 2 ); // mix hsv + hsl (favor hsl for dark, hsv for light colors) +@accent-text-color: contrast(@accent-color, hsl(@ui-hue,100%,16%), #fff, 40% ); + +// used for button, tooltip (larger things) +@accent-bg-color: mix( hsv( @ui-hue, 40%, 72%), hsl( @ui-hue, 100%, 66%), @accent-luma * 2 ); // mix hsv + hsl (favor hsl for dark, hsv for light colors) +@accent-bg-text-color: contrast(@accent-bg-color, hsl(@ui-hue,100%,10%), #fff, 40% ); + +// used for text only +@accent-only-text-color: mix( hsv( @ui-hue, 70%, 50%), hsl( @ui-hue, 100%, 60%), @accent-luma * 2 ); // mix hsv + hsl (favor hsl for dark, hsv for light colors) + + +// Components (Custom) ----------------- +@badge-background-color: @background-color-selected; + +@button-text-color-selected: @accent-bg-text-color; +@button-border-color-selected: @accent-color; + +@checkbox-background-color: fade(@accent-bg-color, 33%); + +@input-background-color-focus: hsl(@ui-hue, 100%, 96%); +@input-selection-color: mix( hsv( @ui-hue, 33%, 95%), hsl( @ui-hue, 100%, 98%), @accent-luma * 2 ); // mix hsv + hsl (favor hsl for dark, hsv for light colors) +@input-selection-color-focus: mix( hsv( @ui-hue, 44%, 90%), hsl( @ui-hue, 100%, 94%), @accent-luma * 2 ); // mix hsv + hsl (favor hsl for dark, hsv for light colors) + +@overlay-backdrop-color: hsl(@ui-hue, @ui-saturation*0.4, @ui-lightness*0.8); +@overlay-backdrop-opacity: .66; + +@progress-background-color: @accent-color; + +@scrollbar-color: darken(@level-3-color, 14%); +@scrollbar-background-color: @level-3-color; // replaced `transparent` with a solid color to test https://github.com/atom/one-light-ui/issues/4 +@scrollbar-color-editor: contrast(@ui-syntax-color, darken(@ui-syntax-color, 14%), lighten(@ui-syntax-color, 9%) ); +@scrollbar-background-color-editor: @ui-syntax-color; + +@tab-text-color: @text-color-subtle; +@tab-text-color-active: @text-color-highlight; +@tab-text-color-editor: contrast(@ui-syntax-color, lighten(@ui-syntax-color, 70%), @text-color-highlight ); +@tab-background-color-editor: @ui-syntax-color; +@tab-inactive-status-added: fade(@text-color-success, 77%); +@tab-inactive-status-modified: fade(@text-color-warning, 77%); + +@tooltip-background-color: @accent-bg-color; +@tooltip-text-color: @accent-bg-text-color; +@tooltip-text-key-color: @tooltip-background-color; +@tooltip-background-key-color: @tooltip-text-color; + + +// Sizes (Custom) ----------------- + +@ui-size: 1em; +@ui-input-size: @ui-size*1.15; +@ui-padding: @ui-size*1.5; +@ui-padding-pane: @ui-size*.5; +@ui-padding-icon: @ui-padding/3.3; +@ui-line-height: @ui-size*2; +@ui-tab-height: @ui-size*2.5; + + + + + +// Packages variables +// These variables are used to override packages +// ---------------------------------------------- + +@settings-list-background-color: darken(@level-2-color, 3%); +@theme-config-box-shadow: inset 0 1px 2px hsla(0, 0%, 0%, .2), 0 1px 0 hsla(0, 0%, 100%, .3); +@theme-config-box-shadow-selected: inset 0 1px 3px hsla(0, 0%, 0%, .2); +@theme-config-border-selected: hsla(0, 0%, 0%, .5); + + +// Debug +// Output variables to the top of the UI +// ------------------------------------- + +// html:before { +// content: "@{variable}"; +// } diff --git a/packages/one-light-ui/styles/ui-variables.less b/packages/one-light-ui/styles/ui-variables.less new file mode 100644 index 000000000..5749b6393 --- /dev/null +++ b/packages/one-light-ui/styles/ui-variables.less @@ -0,0 +1,97 @@ + +@import "ui-variables-custom.less"; // import colors and custom variables + +// ONE light UI variables +// ---------------------------------------------- + +// Official variables +// These variables must be defined in every theme +// Source: https://github.com/atom/atom/blob/master/static/variables/ui-variables.less +// ---------------------------------------------- + + +// Text ----------------- +@text-color: @ui-fg; +@text-color-subtle: lighten(@text-color, 30%); +@text-color-highlight: darken(@text-color, 12%); +@text-color-selected: darken(@text-color-highlight, 12%); + +@text-color-info: hsl(208, 100%, 54%); +@text-color-success: hsl(132, 60%, 44%); +@text-color-warning: hsl( 37, 90%, 44%); +@text-color-error: hsl( 0, 90%, 56%); + + +// Background ----------------- +@background-color-info: hsl(208, 100%, 56%); +@background-color-success: hsl(132, 52%, 48%); +@background-color-warning: hsl( 40, 60%, 48%); +@background-color-error: hsl( 5, 72%, 56%); + +@background-color-highlight: darken(@level-3-color, 2%); +@background-color-selected: darken(@level-3-color, 6%); + +@app-background-color: @level-3-color; + + +// Base ----------------- +@base-background-color: @ui-bg; +@base-border-color: @ui-border; + + +// Components ----------------- +@pane-item-background-color: @base-background-color; +@pane-item-border-color: @base-border-color; + +@input-background-color: @level-1-color; +@input-border-color: @base-border-color; + +@tool-panel-background-color: @level-3-color; +@tool-panel-border-color: @base-border-color; + +@inset-panel-background-color: lighten(@level-2-color, 4%); +@inset-panel-border-color: fadeout(@base-border-color, 15%); + +@panel-heading-background-color: @level-2-color; +@panel-heading-border-color: @base-border-color; + +@overlay-background-color: mix(@level-2-color, @level-3-color); +@overlay-border-color: @base-border-color; + +@button-background-color: @level-1-color; +@button-background-color-hover: darken(@button-background-color, 4%); +@button-background-color-selected: @accent-bg-color; +@button-border-color: @base-border-color; + +@tab-bar-background-color: @level-3-color; +@tab-bar-border-color: @base-border-color; +@tab-background-color: @level-3-color; +@tab-background-color-active: @level-2-color; +@tab-border-color: @base-border-color; + +@tree-view-background-color: @level-3-color; +@tree-view-border-color: @base-border-color; + +@ui-site-color-1: hsl(208, 100%, 56%); // blue +@ui-site-color-2: hsl(132, 48%, 48%); // green +@ui-site-color-3: hsl( 40, 60%, 52%); // orange +@ui-site-color-4: #D831B0; // pink +@ui-site-color-5: #EBDD5B; // yellow + + +// Sizes ----------------- +@font-size: 12px; +@input-font-size: 14px; +@disclosure-arrow-size: 12px; + +@component-padding: 10px; +@component-icon-padding: 5px; +@component-icon-size: 16px; // needs to stay 16px to look sharpest +@component-line-height: 25px; +@component-border-radius: 3px; + +@tab-height: 30px; + + +// Font ----------------- +@font-family: system-ui;