Browse Source

Add theme template

master
simurai 7 years ago
parent
commit
464a957427
  1. 3
      CHANGELOG.md
  2. 1
      LICENSE.md
  3. 29
      README.md
  4. 27
      index.less
  5. 15
      package.json
  6. 22
      styles/base.less
  7. 63
      styles/buttons.less
  8. 27
      styles/editor.less
  9. 10
      styles/find-and-replace.less
  10. 12
      styles/git.less
  11. 19
      styles/key-binding.less
  12. 58
      styles/lists.less
  13. 27
      styles/panels.less
  14. 26
      styles/progress.less
  15. 11
      styles/sites.less
  16. 14
      styles/status-bar.less
  17. 57
      styles/tabs.less
  18. 40
      styles/text.less
  19. 23
      styles/tooltips.less
  20. 20
      styles/tree-view.less
  21. 94
      styles/ui-variables.less

3
CHANGELOG.md

@ -0,0 +1,3 @@
## 0.1.0 - First Release
* Every feature added
* Every bug fixed

1
LICENSE → LICENSE.md

@ -19,4 +19,3 @@ 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.

29
README.md

@ -1,2 +1,27 @@
# ui-theme-template
This is a template to create an Atom UI theme.
# UI Theme template
This is a __starter template__ for creating an Atom UI theme.
This template only includes the __minimum of styling__ needed and comes with a neutral look. It could already be used as a real theme, but its purpose is to serve as a basis for creating your own theme. It is documented throughout and invites you to make changes to your liking. For some inspiration take a look at other Atom themes at [atom.io/themes](https://atom.io/themes/). Or you're always free to fork a theme that already comes close to your vision.
Happy theming! 🚀
## Getting started
1. Fork this repository.
2. Continue with step 2 from [Creating an Interface Theme](https://atom.io/docs/v1.0.17/hacking-atom-creating-a-theme#creating-an-interface-theme)
If you get stuck somewhere, feel free to create an [issue](https://github.com/atom-community/ui-theme-template/issues/new).
ps. Don't forget to delete the above and edit the below in your own `README.md`.
---
# My UI theme
A short description of your theme.
![A screenshot of your theme](https://cloud.githubusercontent.com/assets/378023/8842525/4215f26c-3136-11e5-9d94-d2c078a05d24.png)

27
index.less

@ -0,0 +1,27 @@
// UI Theme
// -------------------
// This is the main file that imports all the Less files from the `/styles` directory.
// For more infos about creating themes, check out:
// https://atom.io/docs/latest/hacking-atom-creating-a-theme
@import "styles/ui-variables";
@import "styles/base";
@import "styles/buttons";
@import "styles/editor";
@import "styles/find-and-replace";
@import "styles/git";
@import "styles/key-binding";
@import "styles/lists";
@import "styles/panels";
@import "styles/progress";
@import "styles/sites";
@import "styles/status-bar";
@import "styles/tabs";
@import "styles/text";
@import "styles/tooltips";
@import "styles/tree-view";

15
package.json

@ -0,0 +1,15 @@
{
"name": "ui-theme-template",
"theme": "ui",
"version": "0.0.0",
"description": "A short description of your UI theme",
"keywords": [
"ui",
"theme"
],
"repository": "https://github.com/atom-community/ui-theme-template",
"license": "MIT",
"engines": {
"atom": ">=1.0.0 <2.0.0"
}
}

22
styles/base.less

@ -0,0 +1,22 @@
// Base
// -------------------
// Used for global styles
// Or to override certain Atom core styles
// -------------------
body {
font-size: @font-size;
color: @text-color;
background-color: @app-background-color;
}
atom-pane {
border-right: 1px solid @base-border-color;
&:last-child {
border-right: none;
}
}

63
styles/buttons.less

@ -0,0 +1,63 @@
// Buttons
// -------------------
// Overrides: atom/atom/static/buttons.less
.btn {
color: lighten(@text-color, 6%);
background-color: @button-background-color;
&:hover,
&:focus {
color: @text-color-highlight;
background-color: @button-background-color-hover;
}
&:active {
color: fade(@text-color-selected, 66%);
background-color: darken(@button-background-color, 2%);
}
&.selected {
color: @text-color-selected;
background-color: @button-background-color-selected;
}
&:focus,
&:focus:active {
outline: none;
}
}
// Colored buttons -----------------------
.btn.btn-primary { .btn-color(@background-color-info); }
.btn.btn-info { .btn-color(@background-color-info); }
.btn.btn-success { .btn-color(@background-color-success); }
.btn.btn-warning { .btn-color(@background-color-warning); }
.btn.btn-error { .btn-color(@background-color-error); }
.btn-color(@bg) {
color: @text-color-selected;
background-color: @bg;
&:hover,
&:focus {
background-color: lighten(@bg, 4%);
}
&:active {
background-color: darken(@bg, 4%);
}
&.selected {
background-color: lighten(@bg, 4%);
}
&.selected:focus,
&.selected:hover {
background-color: lighten(@bg, 8%);
}
}
// Button Group -----------------------
.btn-group > .btn {
border-color: hsla(0,0%,0%,.2);;
}

27
styles/editor.less

@ -0,0 +1,27 @@
// Mini Editor
// -------------------
// Mini Editors are the "text inputs" used in find+replace or in the settings.
atom-text-editor[mini] {
padding-left: @component-padding/2;
color: @text-color;
border-radius: @component-border-radius;
background-color: @input-background-color;
&.is-focused {
background-color: darken(@input-background-color, 5%);
}
&, // <-- Deprecated. The `&,` can be removed once the Shadow DOM can't be turned off in the settings.
&::shadow {
.placeholder-text {
color: @text-color-subtle;
}
.selection .region {
background-color: @background-color-selected;
}
}
}

10
styles/find-and-replace.less

@ -0,0 +1,10 @@
// Find + Replace
// -------------------
// Find and replace in the current buffer or across the entire project.
// Overrides: atom/find-and-replace
.find-and-replace {
border-top: 1px solid @base-border-color;
}

12
styles/git.less

@ -0,0 +1,12 @@
// Git
// -------------------
// Used to color git status
.status { color: @text-color; }
.status-added { color: @text-color-success; } // green
.status-ignored { color: @text-color-subtle; } // faded
.status-modified { color: @text-color-warning; } // orange
.status-removed { color: @text-color-error; } // red
.status-renamed { color: @text-color-info; } // blue

19
styles/key-binding.less

@ -0,0 +1,19 @@
// Key Binding
// -------------------
// Styles key-bindings used in a Select List
// Overrides: Bootstrap's `kbd`.
.key-binding {
display: inline-block;
margin-left: 1px;
padding: 0 @component-padding/2;
line-height: 2;
font-family: 'Helvetica Neue', Arial, sans-serif;
font-size: .8em;
letter-spacing: 1px;
border-radius: @component-border-radius;
background-color: @app-background-color;
}

58
styles/lists.less

@ -0,0 +1,58 @@
// Lists
// -------------------
// Used in different places, like the Tree View, Commmand Palette etc.
// Overrides: atom/static/lists.less
// List Group -------------------
.list-group {
li {
padding-left: @component-padding/2;
// We want to highlight the background of the list items because we dont know their size.
&.selected {
color: @text-color-selected;
background-color: @background-color-selected;
&:before{ display: none; }
}
}
}
// List Tree -------------------
.list-tree {
.selected {
color: @text-color-selected;
}
}
// Select List -------------------
.select-list {
li {
padding: @component-padding/2 @component-padding;
}
.status {
float: right;
}
}
// Popover List -------------------
// Used as a popover for something like autocomplete.
.select-list.popover-list {
@popover-list-padding: @component-padding/2;
padding: @popover-list-padding;
border-radius: @component-border-radius;
background-color: @overlay-background-color;
box-shadow: 0 2px 8px 1px hsla(0,0%,0%,.3);
.list-group {
margin-top: @popover-list-padding;
li {
padding-left: @popover-list-padding;
}
}
}

27
styles/panels.less

@ -0,0 +1,27 @@
// Panels
// -------------------
// Overrides: atom/static/panels.less
.panel-heading {
border-bottom: 1px solid @panel-heading-border-color;
background-color: @panel-heading-background-color;
}
.inset-panel {
background-color: @inset-panel-background-color;
.panel-heading {
background-color: lighten(@inset-panel-background-color, 4%);
}
}
// Modal -------------------
// Used on top of the editor, like the Command Palette.
atom-panel.modal {
border: 1px solid @overlay-border-color;
border-top: none;
box-shadow: 0 2px 8px 1px hsla(0,0%,0%,.3);
}

26
styles/progress.less

@ -0,0 +1,26 @@
// Progress
// -------------------
// The `progress` element is unstyled and defined by the OS.
// See https://css-tricks.com/html5-progress-element/ in case you want to customize it.
// Spinner -------------------
.loading-spinner-large { .loading-spinner(64px); }
.loading-spinner-medium { .loading-spinner(48px); }
.loading-spinner-small { .loading-spinner(32px); }
.loading-spinner-tiny { .loading-spinner(16px); }
.loading-spinner(@size) {
display: block;
width: @size;
height: @size;
background-image: url(images/octocat-spinner-128.gif);
background-repeat: no-repeat;
background-size: @size @size;
&.inline-block {
display: inline-block;
}
}

11
styles/sites.less

@ -0,0 +1,11 @@
// Site Colors
// -------------------
// Used when a few different/radom colors are needed.
.ui-site-1 { background-color: @ui-site-color-1; }
.ui-site-2 { background-color: @ui-site-color-2; }
.ui-site-3 { background-color: @ui-site-color-3; }
.ui-site-4 { background-color: @ui-site-color-4; }
.ui-site-5 { background-color: @ui-site-color-5; }

14
styles/status-bar.less

@ -0,0 +1,14 @@
// Status Bar
// -------------------
// Located at the bottom.
// Displays information about the current editor.
// Overrides: atom/status-bar
.status-bar {
font-size: @font-size;
color: @text-color;
border-top: 1px solid @base-border-color;
background-color: @tree-view-background-color;
}

57
styles/tabs.less

@ -0,0 +1,57 @@
// Tabs
// -------------------
// Displays selectable tabs above the editor.
// Overrides: atom/tabs
.tab-bar {
background-color: @tab-bar-background-color;
border-bottom: 1px solid @base-border-color;
.tab {
color: @text-color;
height: @tab-height;
line-height: @tab-height;
font-size: @font-size;
border-right: 1px solid @tab-border-color;
background-color: @tab-background-color;
&.active {
color: @text-color-selected;
background-color: @tab-background-color-active;
}
// Modified Icon (the blue circle) -------------------
&.modified:not(:hover) .close-icon {
top: 50%;
right: @component-padding + 4px; // 4px -> half of icon size
margin-top: -3px;
border-color: @text-color-info;
}
&.modified:hover .close-icon {
color: currentColor;
}
// Close Icon (the X) -------------------
.close-icon:hover {
color: @text-color-selected;
}
&.active .close-icon:hover {
color: @text-color;
}
// Dragging -------------------
// Styles get applied while dragging a tab
&.is-dragging {
background: darken(@tab-background-color, 10%);
border-color: transparent;
opacity: .5;
& .close-icon {
visibility: hidden;
}
}
}
}

40
styles/text.less

@ -0,0 +1,40 @@
// Text
// -------------------
.text-smaller {
font-size: smaller;
}
.text-subtle { color: @text-color-subtle; }
.text-highlight { color: @text-color-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; }
// Highlights ---------------
.highlight { .highlight-mixin(@background-color-highlight); }
.highlight-info { .highlight-mixin(@background-color-info); }
.highlight-warning { .highlight-mixin(@background-color-warning); }
.highlight-error { .highlight-mixin(@background-color-error); }
.highlight-success { .highlight-mixin(@background-color-success); }
.highlight-mixin(@color) {
padding: 1px 4px;
color: @text-color-highlight;
border-radius: @component-border-radius;
background-color: @color;
}
// Background Message ---------------
// Shown when no tabs are open.
.background-message {
font-weight: bold;
color: @text-color-subtle;
}

23
styles/tooltips.less

@ -0,0 +1,23 @@
// Tooltips
// -------------------
// Overrides: Bootstrap's `.tooltip`.
.tooltip {
.tooltip-inner {
line-height: 1;
padding: .75em;
white-space: nowrap;
max-width: none;
}
.keystroke {
padding: .15em .4em;
margin: 0 -.3em 0 .25em;
border-radius: max(2px, @component-border-radius / 2);
color: @text-color-selected;
background: @background-color-selected;
}
}

20
styles/tree-view.less

@ -0,0 +1,20 @@
// Tree View
// -------------------
// Used to explore and open files in the current project.
// Overrides: atom/tree-view
.tree-view-resizer {
border-right: 1px solid @base-border-color;
}
.tree-view {
color: @text-color;
background-color: @tree-view-background-color;
.list-item.selected {
color: @text-color-selected;
}
}

94
styles/ui-variables.less

@ -0,0 +1,94 @@
// UI Variables
// -------------------
// These are the official UI variables that every UI theme should define.
// It allows other packages to match your theme.
// Overrides: atom/static/variables/ui-variables.less
// Try to edit some of the values below to see your theme change.
// A good start is to change the color of the `@base-background-color` variable.
// Text Colors
@text-color: hsl(0,0%,66%);
@text-color-subtle: hsl(0,0%,50%);
@text-color-highlight: hsl(0,0%,94%);
@text-color-selected: hsl(0,0%,100%);
@text-color-info: hsl(219, 79%, 66%);
@text-color-success: hsl(140, 44%, 62%);
@text-color-warning: hsl( 36, 60%, 72%);
@text-color-error: hsl( 9, 100%, 64%);
// Background colors
@background-color-info: hsl(208, 100%, 50%);
@background-color-success: hsl(160, 70%, 36%);
@background-color-warning: hsl(32, 60%, 50%);
@background-color-error: hsl(0, 70%, 50%);
@background-color-highlight: lighten(@base-background-color, 5%);
@background-color-selected: lighten(@base-background-color, 10%);
@app-background-color: darken(@base-background-color, 5%);
// Base colors
@base-background-color: hsl(222,6%,22%);
@base-border-color: darken(@base-background-color, 8%);
// Component colors
@pane-item-background-color: @base-background-color;
@pane-item-border-color: @base-border-color;
@input-background-color: @app-background-color;
@input-border-color: @base-border-color;
@tool-panel-background-color: @base-background-color;
@tool-panel-border-color: @base-border-color;
@inset-panel-background-color: lighten(@base-background-color, 4%);;
@inset-panel-border-color: @base-border-color;
@panel-heading-background-color: lighten(@base-background-color, 4%);
@panel-heading-border-color: @base-border-color;
@overlay-background-color: lighten(@base-background-color, 5%);
@overlay-border-color: @base-border-color;
@button-background-color: lighten(@base-background-color, 10%);
@button-background-color-hover: lighten(@button-background-color, 12%);
@button-background-color-selected: @button-background-color-hover;
@button-border-color: @base-border-color;
@tab-bar-background-color: @base-background-color;
@tab-bar-border-color: @base-border-color;
@tab-background-color: @tab-bar-background-color;
@tab-background-color-active: lighten(@tab-bar-background-color, 10%);
@tab-border-color: @base-border-color;
@tree-view-background-color: @base-background-color;
@tree-view-border-color: @base-border-color;
// Site colors
@ui-site-color-1: hsl(208, 100%, 50%); // blue
@ui-site-color-2: hsl(160, 70%, 42%); // green
@ui-site-color-3: hsl(32, 60%, 50%); // 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;
@component-line-height: 25px;
@tab-height: 30px;
// Misc
@component-border-radius: 2px;
@font-family: 'SF UI Text', 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif;
Loading…
Cancel
Save