razer should be a-ok
Chris Nutter
parent
7fd47915ae
commit
7693697990
|
|
@ -0,0 +1,250 @@
|
|||
!!Xft.dpi: 96
|
||||
!!Xft.antialias: true
|
||||
!!Xft.hinting: true
|
||||
!!Xft.rgba: rgb
|
||||
!!Xft.autohint: false
|
||||
!!Xft.hintstyle: hintslight
|
||||
!!Xft.lcdfilter: lcddefault
|
||||
|
||||
Xft.dpi: 96
|
||||
Xft.antialias: true
|
||||
Xft.hinting: true
|
||||
Xft.rgba: rgb
|
||||
Xft.autohint: false
|
||||
Xft.hintstyle: hintslight
|
||||
Xft.lcdfilter: lcddefault
|
||||
|
||||
XTerm*background: #222D31
|
||||
XTerm*foreground: #d8d8d8
|
||||
XTerm*pointerColor: #1ABB9B
|
||||
XTerm*faceName: Fixed
|
||||
XTerm*faceSize: 11
|
||||
XTerm*reverseVideo: on
|
||||
XTerm*selectToClipboard: true
|
||||
|
||||
*background: #222D31
|
||||
*foreground: #d8d8d8
|
||||
*fading: 8
|
||||
*fadeColor: black
|
||||
*cursorColor: #1ABB9B
|
||||
*pointerColorBackground: #2B2C2B
|
||||
*pointerColorForeground: #16A085
|
||||
|
||||
!! black dark/light
|
||||
*color0: #222D31
|
||||
*color8: #585858
|
||||
|
||||
!! red dark/light
|
||||
*color1: #ab4642
|
||||
*color9: #ab4642
|
||||
|
||||
!! green dark/light
|
||||
*color2: #7E807E
|
||||
*color10: #8D8F8D
|
||||
|
||||
!! yellow dark/light
|
||||
*color3: #f7ca88
|
||||
*color11: #f7ca88
|
||||
|
||||
!! blue dark/light
|
||||
*color4: #7cafc2
|
||||
*color12: #7cafc2
|
||||
|
||||
!! magenta dark/light
|
||||
*color5: #ba8baf
|
||||
*color13: #ba8baf
|
||||
|
||||
!! cyan dark/light
|
||||
*color6: #1ABB9B
|
||||
*color14: #1ABB9B
|
||||
|
||||
!! white dark/light
|
||||
*color7: #d8d8d8
|
||||
*color15: #f8f8f8
|
||||
|
||||
Xcursor.theme: Adwaita
|
||||
Xcursor.size: 0
|
||||
|
||||
!URxvt.font: 9x15,xft:TerminessTTFNerdFontMono
|
||||
!URxvt.font: 9x15,boxxy:size=12
|
||||
!======================================================================
|
||||
URxvt.font: -misc-fixed-medium-r-normal--13-120-75-75-C-70-iso10646-1
|
||||
!URxvt.font: xft:TerminessTTFNerdFontMono:size=12
|
||||
terminal.font: xft:TerminessTTFNerdFontMono:size=12
|
||||
|
||||
! alternative font settings with 'terminus':
|
||||
!URxvt.font: -xos4-terminus-medium-r-normal--16-160-72-72-c-80-iso10646-1
|
||||
!URxvt.bold.font: -xos4-terminus-bold-r-normal--16-160-72-72-c-80-iso10646-1
|
||||
!! terminus names see end of file!
|
||||
|
||||
URxvt.depth: 32
|
||||
URxvt.background: [100]#222D31
|
||||
URxvt*scrollBar: false
|
||||
URxvt*mouseWheelScrollPage: false
|
||||
URxvt*cursorBlink: true
|
||||
URxvt*background: black
|
||||
URxvt*foreground: grey
|
||||
URxvt*saveLines: 5000
|
||||
|
||||
! for 'fake' transparency (without Compton) uncomment the following three lines
|
||||
URxvt*inheritPixmap: true
|
||||
URxvt*transparent: true
|
||||
!URxvt*shading: 138
|
||||
URxvt*shading: 23
|
||||
|
||||
! Normal copy-paste keybindings without perls
|
||||
URxvt.iso14755: false
|
||||
URxvt.keysym.Shift-Control-V: eval:paste_clipboard
|
||||
URxvt.keysym.Shift-Control-C: eval:selection_to_clipboard
|
||||
!Xterm escape codes, word by word movement
|
||||
URxvt.keysym.Control-Left: \033[1;5D
|
||||
URxvt.keysym.Shift-Control-Left: \033[1;6D
|
||||
URxvt.keysym.Control-Right: \033[1;5C
|
||||
URxvt.keysym.Shift-Control-Right: \033[1;6C
|
||||
URxvt.keysym.Control-Up: \033[1;5A
|
||||
URxvt.keysym.Shift-Control-Up: \033[1;6A
|
||||
URxvt.keysym.Control-Down: \033[1;5B
|
||||
URxvt.keysym.Shift-Control-Down: \033[1;6B
|
||||
! Rxvt.perl-ext-common: ...,clipboard
|
||||
! URxvt.keysym.M-C-c: perl:clipboard:copy
|
||||
! URxvt.keysym.M-v: perl:clipboard:paste
|
||||
! URxvt.keysym.M-C-v: perl:clipboard:paste_escaped
|
||||
! URxvt*termName: string
|
||||
! URxvt*geometry: geometry
|
||||
! URxvt*chdir: string
|
||||
! URxvt*loginShell: boolean
|
||||
! URxvt*multiClickTime: number
|
||||
! URxvt*jumpScroll: boolean
|
||||
! URxvt*skipScroll: boolean
|
||||
! URxvt*pastableTabs: boolean
|
||||
! URxvt*scrollstyle: plain
|
||||
! URxvt*scrollBar_right: boolean
|
||||
! URxvt*scrollBar_floating: true
|
||||
! URxvt*scrollBar_align: mode
|
||||
! URxvt*thickness: number
|
||||
! URxvt*scrollTtyOutput: boolean
|
||||
! URxvt*scrollTtyKeypress: boolean
|
||||
! URxvt*scrollWithBuffer: boolean
|
||||
! URxvt*tintColor: !7DA55
|
||||
! URxvt*blurRadius: HxV
|
||||
! URxvt*fading: number
|
||||
! URxvt*fadeColor: color
|
||||
! URxvt*utmpInhibit: boolean
|
||||
! URxvt*urgentOnBell: boolean
|
||||
! URxvt*visualBell: boolean
|
||||
! URxvt*mapAlert: boolean
|
||||
! URxvt*meta8: boolean
|
||||
! URxvt*tripleclickwords: boolean
|
||||
! URxvt*insecure: boolean
|
||||
! URxvt*cursorUnderline: boolean
|
||||
! URxvt*pointerBlank: boolean
|
||||
! URxvt*color0: color
|
||||
! URxvt*color1: color
|
||||
! URxvt*color2: color
|
||||
! URxvt*color3: color
|
||||
! URxvt*color4: color
|
||||
! URxvt*color5: color
|
||||
! URxvt*color6: color
|
||||
! URxvt*color7: color
|
||||
! URxvt*color8: color
|
||||
! URxvt*color9: color
|
||||
! URxvt*color10: color
|
||||
! URxvt*color11: color
|
||||
! URxvt*color12: color
|
||||
! URxvt*color13: color
|
||||
! URxvt*color14: color
|
||||
! URxvt*color15: color
|
||||
! URxvt*colorBD: color
|
||||
! URxvt*colorIT: color
|
||||
! URxvt*colorUL: color
|
||||
! URxvt*colorRV: color
|
||||
! URxvt*underlineColor: color
|
||||
! URxvt*scrollColor: color
|
||||
! URxvt*troughColor: color
|
||||
! URxvt*highlightColor: color
|
||||
! URxvt*highlightTextColor: color
|
||||
! URxvt*cursorColor: color
|
||||
! URxvt*cursorColor2: color
|
||||
! URxvt*pointerColor: color
|
||||
! URxvt*pointerColor2: color
|
||||
! URxvt*borderColor: color
|
||||
! URxvt*iconFile: file
|
||||
! URxvt*font: fontname
|
||||
! URxvt*boldFont: fontname
|
||||
! URxvt*italicFont: fontname
|
||||
! URxvt*boldItalicFont: fontname
|
||||
! URxvt*intensityStyles: boolean
|
||||
! URxvt*inputMethod: name
|
||||
! URxvt*preeditType: style
|
||||
! URxvt*imLocale: string
|
||||
! URxvt*imFont: fontname
|
||||
! URxvt*title: string
|
||||
! URxvt*iconName: string
|
||||
! URxvt*buffered: boolean
|
||||
! URxvt*depth: number
|
||||
! URxvt*visual: number
|
||||
! URxvt*transient-for: windowid
|
||||
! URxvt*override-redirect: boolean
|
||||
! URxvt*hold: boolean
|
||||
! URxvt*externalBorder: number
|
||||
! URxvt*internalBorder: number
|
||||
! URxvt*borderLess: true
|
||||
! URxvt*lineSpace: number
|
||||
! URxvt*letterSpace: number
|
||||
! URxvt*skipBuiltinGlyphs: boolean
|
||||
! URxvt*pointerBlankDelay: number
|
||||
! URxvt*backspacekey: string
|
||||
! URxvt*deletekey: string
|
||||
! URxvt*print-pipe: string
|
||||
! URxvt*modifier: modifier
|
||||
! URxvt*cutchars: string
|
||||
! URxvt*answerbackString: string
|
||||
! URxvt*secondaryScreen: boolean
|
||||
! URxvt*secondaryScroll: boolean
|
||||
! URxvt*perl-lib: string
|
||||
! URxvt*perl-eval: perl-eval
|
||||
! URxvt*perl-ext-common: string
|
||||
! URxvt*perl-ext: string
|
||||
! URxvt*iso14755: boolean
|
||||
! URxvt*iso14755_52: boolean
|
||||
! URxvt*xrm: string
|
||||
! URxvt*keysym.sym: keysym
|
||||
! URxvt*background.border: boolean
|
||||
! URxvt*background.expr: string
|
||||
! URxvt*background.interval: seconds
|
||||
! URxvt*bell-command: string
|
||||
! URxvt*kuake.hotkey: string
|
||||
! URxvt*matcher.button: string
|
||||
! URxvt*matcher.launcher: string
|
||||
! URxvt*matcher.launcher.*: string
|
||||
! URxvt*matcher.pattern.*: string
|
||||
! URxvt*matcher.rend.*: string
|
||||
! URxvt*remote-clipboard.fetch: string
|
||||
! URxvt*remote-clipboard.store: string
|
||||
! URxvt*searchable-scrollback: string
|
||||
! URxvt*selection-autotransform.*: string
|
||||
! URxvt*selection-pastebin.cmd: string
|
||||
! URxvt*selection-pastebin.url: string
|
||||
! URxvt*selection.pattern-0: string
|
||||
! URxvt*tab-bg: colour
|
||||
! URxvt*tab-fg: colour
|
||||
! URxvt*tabbar-bg: colour
|
||||
! URxvt*tabbar-fg: colour
|
||||
! URxvt*url-launcher: string
|
||||
|
||||
! The Terminus font uses the following X-names:
|
||||
! -xos4-terminus-medium-r-normal--12-120-72-72-c-60-iso10646-1
|
||||
! -xos4-terminus-medium-r-normal--14-140-72-72-c-80-iso10646-1
|
||||
! -xos4-terminus-medium-r-normal--16-160-72-72-c-80-iso10646-1
|
||||
! -xos4-terminus-medium-r-normal--20-200-72-72-c-100-iso10646-1
|
||||
! -xos4-terminus-medium-r-normal--22-220-72-72-c-110-iso10646-1
|
||||
! -xos4-terminus-medium-r-normal--24-240-72-72-c-120-iso10646-1
|
||||
! -xos4-terminus-medium-r-normal--28-280-72-72-c-140-iso10646-1
|
||||
! -xos4-terminus-medium-r-normal--32-320-72-72-c-160-iso10646-1
|
||||
! -xos4-terminus-bold-r-normal--12-120-72-72-c-60-iso10646-1
|
||||
! -xos4-terminus-bold-r-normal--14-140-72-72-c-80-iso10646-1
|
||||
! -xos4-terminus-bold-r-normal--16-160-72-72-c-80-iso10646-1
|
||||
! -xos4-terminus-bold-r-normal--20-200-72-72-c-100-iso10646-1
|
||||
! -xos4-terminus-bold-r-normal--24-240-72-72-c-120-iso10646-1
|
||||
! -xos4-terminus-bold-r-normal--28-280-72-72-c-140-iso10646-1
|
||||
! -xos4-terminus-bold-r-normal--32-320-72-72-c-160-iso10646-1
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
.DS_Store
|
||||
npm-debug.log
|
||||
node_modules
|
||||
snippets/
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
Copyright (c) 2017 Silvestre Herrera
|
||||
|
||||
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.
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
|
||||
---
|
||||
|
||||
A syntax theme for [Atom Material UI](https://github.com/silvestreh/atom-material-ui). Inspired by Mattia Astorino's [SublimeText theme](https://github.com/equinusocio/material-theme).
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
@import "styles/base";
|
||||
|
||||
// Languages
|
||||
@import (less) "styles/languages/babel";
|
||||
@import (less) "styles/languages/css";
|
||||
@import (less) "styles/languages/gfm";
|
||||
@import (less) "styles/languages/html";
|
||||
@import (less) "styles/languages/javascript";
|
||||
@import (less) "styles/languages/json";
|
||||
@import (less) "styles/languages/php";
|
||||
@import (less) "styles/languages/python";
|
||||
@import (less) "styles/languages/ruby";
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
{
|
||||
"_from": "https://www.atom.io/api/packages/atom-material-syntax/versions/1.0.8/tarball",
|
||||
"_id": "atom-material-syntax@1.0.8",
|
||||
"_inBundle": false,
|
||||
"_integrity": "sha512-Sr9lYOlqNkLACOvVKQDgGdN8D+qRuhUjWmr9usWFNxKf/ec5WoYafUFah0M7UgdUZEa3CSbT2cBq6sK2rPX+Jw==",
|
||||
"_location": "/atom-material-syntax",
|
||||
"_phantomChildren": {},
|
||||
"_requested": {
|
||||
"type": "remote",
|
||||
"raw": "https://www.atom.io/api/packages/atom-material-syntax/versions/1.0.8/tarball",
|
||||
"rawSpec": "https://www.atom.io/api/packages/atom-material-syntax/versions/1.0.8/tarball",
|
||||
"saveSpec": "https://www.atom.io/api/packages/atom-material-syntax/versions/1.0.8/tarball",
|
||||
"fetchSpec": "https://www.atom.io/api/packages/atom-material-syntax/versions/1.0.8/tarball"
|
||||
},
|
||||
"_requiredBy": [
|
||||
"#USER",
|
||||
"/"
|
||||
],
|
||||
"_resolved": "https://www.atom.io/api/packages/atom-material-syntax/versions/1.0.8/tarball",
|
||||
"_shasum": "7e8a52dc55a491cd3d4338cea7ad769fb436c13d",
|
||||
"_spec": "https://www.atom.io/api/packages/atom-material-syntax/versions/1.0.8/tarball",
|
||||
"_where": "/tmp/apm-install-dir-119228-2437-aocpky.gssto",
|
||||
"bugs": {
|
||||
"url": "https://github.com/silvestreh/atom-material-syntax/issues"
|
||||
},
|
||||
"bundleDependencies": false,
|
||||
"deprecated": false,
|
||||
"description": "A dark syntax theme for Atom that uses Google's Material Design color palette",
|
||||
"engines": {
|
||||
"atom": ">=1.13.0 <2.0.0"
|
||||
},
|
||||
"homepage": "https://github.com/silvestreh/atom-material-syntax#readme",
|
||||
"keywords": [
|
||||
"syntax",
|
||||
"theme",
|
||||
"material",
|
||||
"material design"
|
||||
],
|
||||
"license": "MIT",
|
||||
"name": "atom-material-syntax",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/silvestreh/atom-material-syntax.git"
|
||||
},
|
||||
"theme": "syntax",
|
||||
"version": "1.0.8",
|
||||
"_atomModuleCache": {
|
||||
"version": 1,
|
||||
"dependencies": [],
|
||||
"extensions": {
|
||||
".json": [
|
||||
"package.json"
|
||||
]
|
||||
},
|
||||
"folders": []
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,404 @@
|
|||
@import "syntax-variables";
|
||||
|
||||
atom-text-editor {
|
||||
background-color: @syntax-background-color;
|
||||
color: @syntax-text-color;
|
||||
|
||||
.wrap-guide {
|
||||
background-color: @syntax-indent-guide-color;
|
||||
}
|
||||
|
||||
.indent-guide {
|
||||
color: @syntax-indent-guide-color;
|
||||
}
|
||||
|
||||
.invisible-character {
|
||||
color: @syntax-invisible-character-color;
|
||||
}
|
||||
|
||||
.cursor-line {
|
||||
background-color: fade(darken(@syntax-background-color, 20%), 20%);
|
||||
}
|
||||
|
||||
.gutter {
|
||||
background-color: @syntax-gutter-background-color;
|
||||
color: @syntax-gutter-text-color;
|
||||
|
||||
.line-number {
|
||||
&.cursor-line {
|
||||
background-color: darken(@syntax-background-color, 2.5%);
|
||||
color: @syntax-gutter-text-color-selected;
|
||||
}
|
||||
|
||||
&.cursor-line-no-selection {
|
||||
color: @syntax-gutter-text-color-selected;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fold-marker:after,
|
||||
.gutter .line-number.folded,
|
||||
.gutter .line-number:after {
|
||||
color: @light-gray;
|
||||
}
|
||||
|
||||
.invisible {
|
||||
color: @syntax-text-color;
|
||||
}
|
||||
|
||||
.cursor {
|
||||
color: @syntax-cursor-color;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
.selection .region {
|
||||
background-color: @syntax-selection-color;
|
||||
}
|
||||
}
|
||||
|
||||
atom-text-editor .search-results .syntax--marker .region {
|
||||
background-color: transparent;
|
||||
border: 1px solid @syntax-result-marker-color;
|
||||
}
|
||||
|
||||
atom-text-editor .search-results .syntax--marker.current-result .region {
|
||||
border: 1px solid @syntax-result-marker-color-selected;
|
||||
}
|
||||
|
||||
// Syntax styles
|
||||
.syntax--comment {
|
||||
color: @syntax-comment-color;
|
||||
}
|
||||
|
||||
.syntax--keyword {
|
||||
color: @purple;
|
||||
|
||||
&.syntax--control {
|
||||
color: @purple;
|
||||
|
||||
&.syntax--elements {
|
||||
color: @light-gray;
|
||||
}
|
||||
}
|
||||
|
||||
&.syntax--operator {
|
||||
color: @cyan;
|
||||
}
|
||||
|
||||
&.syntax--other.syntax--special-method {
|
||||
color: @blue;
|
||||
}
|
||||
|
||||
&.syntax--other.syntax--unit {
|
||||
color: @orange;
|
||||
}
|
||||
}
|
||||
|
||||
.syntax--storage {
|
||||
color: @purple;
|
||||
}
|
||||
|
||||
.syntax--constant {
|
||||
color: @red;
|
||||
|
||||
&.syntax--character.syntax--escape {
|
||||
color: @cyan;
|
||||
}
|
||||
|
||||
&.syntax--numeric {
|
||||
color: @strong-orange;
|
||||
}
|
||||
|
||||
&.syntax--other.syntax--color {
|
||||
color: @cyan;
|
||||
}
|
||||
|
||||
&.syntax--other.syntax--symbol {
|
||||
color: @green;
|
||||
}
|
||||
|
||||
&.syntax--language.syntax--null {
|
||||
color: @pink;
|
||||
}
|
||||
}
|
||||
|
||||
.syntax--variable {
|
||||
color: @very-light-gray;
|
||||
|
||||
&.syntax--interpolation {
|
||||
color: darken(@red, 10%);
|
||||
}
|
||||
|
||||
&.syntax--parameter.syntax--function {
|
||||
color: @strong-orange;
|
||||
}
|
||||
|
||||
&.syntax--language {
|
||||
color: @pink;
|
||||
}
|
||||
|
||||
&.syntax--variable {
|
||||
&.syntax--object {
|
||||
color: @orange;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.syntax--invalid.syntax--illegal {
|
||||
background-color: @red;
|
||||
color: @syntax-background-color;
|
||||
}
|
||||
|
||||
.syntax--string {
|
||||
color: @green;
|
||||
|
||||
&.syntax--regexp {
|
||||
color: @cyan;
|
||||
|
||||
.syntax--source.syntax--ruby.syntax--embedded {
|
||||
color: @orange;
|
||||
}
|
||||
}
|
||||
|
||||
&.syntax--other.syntax--link {
|
||||
color: @red;
|
||||
}
|
||||
}
|
||||
|
||||
.syntax--punctuation {
|
||||
&.syntax--definition {
|
||||
&.syntax--comment {
|
||||
color: @syntax-comment-color;
|
||||
}
|
||||
|
||||
&.syntax--array,
|
||||
&.syntax--parameters,
|
||||
&.syntax--string,
|
||||
&.syntax--variable {
|
||||
color: @syntax-text-color;
|
||||
|
||||
&.syntax--begin, &.syntax--end {
|
||||
color: @cyan;
|
||||
}
|
||||
}
|
||||
|
||||
&.syntax--heading,
|
||||
&.syntax--identity {
|
||||
color: @blue;
|
||||
}
|
||||
|
||||
&.syntax--bold {
|
||||
color: @light-orange;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.syntax--italic {
|
||||
color: @purple;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
&.syntax--entity {
|
||||
color: @cyan;
|
||||
}
|
||||
}
|
||||
|
||||
&.syntax--section {
|
||||
&.syntax--array {
|
||||
color: @cyan;
|
||||
}
|
||||
|
||||
&.syntax--embedded {
|
||||
color: @cyan;
|
||||
}
|
||||
}
|
||||
|
||||
&.syntax--separator {
|
||||
&.syntax--key-value {
|
||||
color: @cyan;
|
||||
}
|
||||
}
|
||||
|
||||
&.syntax--terminator {
|
||||
color: @cyan;
|
||||
}
|
||||
}
|
||||
|
||||
.syntax--support {
|
||||
&.syntax--class {
|
||||
color: @orange;
|
||||
}
|
||||
|
||||
&.syntax--function {
|
||||
color: @blue;
|
||||
|
||||
&.syntax--any-method {
|
||||
color: @blue;
|
||||
}
|
||||
}
|
||||
|
||||
&.syntax--type {
|
||||
color: @orange;
|
||||
}
|
||||
|
||||
&.syntax--variable {
|
||||
&.syntax--dom {
|
||||
color: @orange;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.syntax--entity {
|
||||
&.syntax--name {
|
||||
&.syntax--function {
|
||||
color: @blue;
|
||||
}
|
||||
|
||||
&.syntax--type {
|
||||
color: @very-light-gray;
|
||||
}
|
||||
}
|
||||
|
||||
&.syntax--other {
|
||||
&.syntax--inherited-class {
|
||||
color: @green;
|
||||
}
|
||||
|
||||
&.syntax--attribute-name {
|
||||
&.syntax--pseudo-element {
|
||||
color: @purple;
|
||||
}
|
||||
|
||||
&.syntax--attribute {
|
||||
color: @purple;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.syntax--name.syntax--class,
|
||||
&.syntax--name.syntax--type.syntax--class {
|
||||
color: @orange;
|
||||
}
|
||||
|
||||
&.syntax--name.syntax--section {
|
||||
color: @blue;
|
||||
}
|
||||
|
||||
&.syntax--name.syntax--tag {
|
||||
color: @red;
|
||||
}
|
||||
|
||||
&.syntax--other.syntax--attribute-name {
|
||||
color: @orange;
|
||||
}
|
||||
}
|
||||
|
||||
.syntax--meta {
|
||||
&.syntax--class {
|
||||
color: @light-orange;
|
||||
}
|
||||
|
||||
&.syntax--delimiter {
|
||||
&.syntax--period {
|
||||
color: @cyan;
|
||||
}
|
||||
}
|
||||
|
||||
&.syntax--link {
|
||||
color: @orange;
|
||||
}
|
||||
|
||||
&.syntax--require {
|
||||
color: @blue;
|
||||
}
|
||||
|
||||
&.syntax--selector {
|
||||
color: @purple;
|
||||
}
|
||||
|
||||
&.syntax--separator {
|
||||
background-color: @gray;
|
||||
color: @syntax-text-color;
|
||||
}
|
||||
|
||||
&.syntax--brace {
|
||||
&.syntax--round, &.syntax--square {
|
||||
color: @cyan;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.syntax--none {
|
||||
color: @syntax-text-color;
|
||||
}
|
||||
|
||||
.syntax--markup {
|
||||
&.syntax--bold {
|
||||
color: @orange;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.syntax--changed {
|
||||
color: @purple;
|
||||
}
|
||||
|
||||
&.syntax--deleted {
|
||||
color: @red;
|
||||
}
|
||||
|
||||
&.syntax--italic {
|
||||
color: @purple;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
&.syntax--heading .syntax--punctuation.syntax--definition.syntax--heading {
|
||||
color: @blue;
|
||||
}
|
||||
|
||||
&.syntax--inserted {
|
||||
color: @green;
|
||||
}
|
||||
|
||||
&.syntax--list {
|
||||
color: @red;
|
||||
}
|
||||
|
||||
&.syntax--quote {
|
||||
color: @orange;
|
||||
}
|
||||
|
||||
&.syntax--raw.syntax--inline {
|
||||
color: @green;
|
||||
}
|
||||
}
|
||||
|
||||
.syntax--source.syntax--gfm .syntax--markup {
|
||||
-webkit-font-smoothing: auto;
|
||||
|
||||
&.syntax--heading {
|
||||
color: @green;
|
||||
}
|
||||
}
|
||||
|
||||
// Mini editor
|
||||
atom-text-editor[mini] .scroll-view {
|
||||
padding-left: 1px;
|
||||
}
|
||||
|
||||
// Bracket Matcher
|
||||
atom-text-editor {
|
||||
.highlight .region.bracket-matcher {
|
||||
z-index: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.bracket-matcher .region {
|
||||
border-bottom: 1px solid @syntax-cursor-color;
|
||||
box-sizing: border-box;
|
||||
background-color: fade(@syntax-text-color, 10%);
|
||||
box-shadow: inset 0 -1px 0 @syntax-cursor-color;
|
||||
}
|
||||
|
||||
// Misspelled word
|
||||
atom-text-editor .spell-check-misspelling .region {
|
||||
z-index: auto;
|
||||
}
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
// These colors are specific to the theme. Do not use in a package!
|
||||
|
||||
@very-light-gray: #EEFFFF;
|
||||
@light-gray: #B2CCD6;
|
||||
@gray: #373b41;
|
||||
@dark-gray: #282a2e;
|
||||
@very-dark-gray: #263238;
|
||||
|
||||
@green: #C3E88D;
|
||||
@teal: #009688;
|
||||
@light-teal: #73d1c8;
|
||||
@cyan: #89DDF3;
|
||||
@blue: #82AAFF;
|
||||
@indigo: #7986CB;
|
||||
@purple: #C792EA;
|
||||
@pink: #FF5370;
|
||||
@red: #F07178;
|
||||
@strong-orange: #F78C6A;
|
||||
@orange: #FFCB6B;
|
||||
@light-orange: #FFE082;
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
.syntax--jsx {
|
||||
&.syntax--component {
|
||||
color: @red;
|
||||
}
|
||||
}
|
||||
|
||||
atom-text-editor {
|
||||
// Over-nesting to override `language-babel` default styles.
|
||||
.syntax--source.syntax--js.syntax--jsx {
|
||||
.syntax--jsx {
|
||||
.syntax--entity.syntax--other.syntax--attribute-name {
|
||||
font-style: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
.syntax--css {
|
||||
.syntax--support {
|
||||
&.syntax--constant {
|
||||
color: @cyan;
|
||||
}
|
||||
|
||||
&.syntax--property-name {
|
||||
color: @light-teal;
|
||||
}
|
||||
}
|
||||
|
||||
.syntax--keyword {
|
||||
&.syntax--unit {
|
||||
color: @strong-orange;
|
||||
}
|
||||
}
|
||||
|
||||
.syntax--constant {
|
||||
&.syntax--numeric {
|
||||
color: @light-orange;
|
||||
}
|
||||
|
||||
&.syntax--color {
|
||||
color: @light-orange;
|
||||
|
||||
.syntax--punctuation {
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.syntax--entity {
|
||||
&.syntax--tag {
|
||||
color: @light-gray;
|
||||
}
|
||||
|
||||
&.syntax--id {
|
||||
color: @purple;
|
||||
}
|
||||
}
|
||||
|
||||
.syntax--punctuation {
|
||||
&.syntax--delimiter {
|
||||
color: @cyan;
|
||||
|
||||
+ .syntax--constant.syntax--numeric:not(.syntax--color) {
|
||||
color: @strong-orange;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
[data-grammar*="gfm"] {
|
||||
.syntax--markup.syntax--underline.syntax--link {
|
||||
color: lighten(@pink, 10%);
|
||||
|
||||
span.syntax--punctuation {
|
||||
color: @pink;
|
||||
}
|
||||
}
|
||||
.syntax--markup.syntax--strike {
|
||||
position: relative;
|
||||
color: fade(@syntax-text-color, 50%);
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: calc(50% + 4px);
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background-color: fade(@syntax-text-color, 50%);
|
||||
}
|
||||
}
|
||||
.syntax--table .syntax--border {
|
||||
color: fade(@syntax-text-color, 50%);
|
||||
}
|
||||
.syntax--markup.syntax--heading {
|
||||
color: @blue;
|
||||
}
|
||||
.syntax--punctuation.syntax--definition.syntax--begin,
|
||||
.syntax--punctuation.syntax--definition.syntax--end {
|
||||
color: @blue;
|
||||
}
|
||||
.syntax--punctuation.syntax--definition.syntax--begin + span:not(.syntax--function.syntax--parameter) {
|
||||
color: lighten(@blue, 5%);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
.syntax--html, .syntax--jsx {
|
||||
.syntax--meta {
|
||||
&.syntax--tag {
|
||||
&.syntax--doctype {
|
||||
color: @purple;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.syntax--punctuation {
|
||||
&.syntax--tag {
|
||||
color: @cyan;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
.syntax--js {
|
||||
&.syntax--constant {
|
||||
color: @very-light-gray;
|
||||
}
|
||||
|
||||
&.syntax--support {
|
||||
&.syntax--variable {
|
||||
&.syntax--property {
|
||||
color: @very-light-gray;
|
||||
}
|
||||
&.syntax--property.syntax--dom {
|
||||
color: @blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.syntax--entity {
|
||||
&.syntax--name {
|
||||
&.syntax--type {
|
||||
color: @orange;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.syntax--variable {
|
||||
&.syntax--property {
|
||||
color: @blue;
|
||||
}
|
||||
&.syntax--other.syntax--object {
|
||||
color: @very-light-gray;
|
||||
}
|
||||
&.syntax--other.syntax--object.syntax--property {
|
||||
color: @blue;
|
||||
}
|
||||
}
|
||||
|
||||
&.syntax--string.syntax--quoted.syntax--template {
|
||||
.syntax--other.syntax--object.syntax--property {
|
||||
color: @green;
|
||||
}
|
||||
}
|
||||
|
||||
&.syntax--constant {
|
||||
&.syntax--numeric {
|
||||
color: @strong-orange;
|
||||
}
|
||||
|
||||
&.syntax--boolean {
|
||||
color: @red;
|
||||
}
|
||||
}
|
||||
|
||||
&.syntax--punctuation.syntax--begin,
|
||||
&.syntax--punctuation.syntax--end,
|
||||
&.syntax--delimiter.syntax--object.syntax--comma,
|
||||
&.syntax--brace.syntax--curly {
|
||||
color: @cyan;
|
||||
|
||||
.syntax--comment & {
|
||||
color: @syntax-comment-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.syntax--export .syntax--variable.syntax--default {
|
||||
color: @purple;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
.syntax--json {
|
||||
.syntax--meta {
|
||||
&.syntax--array.syntax--structure .syntax--string.syntax--quoted.syntax--double {
|
||||
color: @green;
|
||||
|
||||
> * {
|
||||
color: currentColor;
|
||||
|
||||
&.syntax--punctuation {
|
||||
&.syntax--begin, &.syntax--end {
|
||||
color: @cyan;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.syntax--punctuation.syntax--separator.syntax--key-value + .syntax--string.syntax--quoted {
|
||||
color: @green;
|
||||
|
||||
* {
|
||||
color: currentColor;
|
||||
|
||||
&.syntax--punctuation {
|
||||
&.syntax--begin, &.syntax--end {
|
||||
color: @cyan;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.syntax--structure.syntax--dictionary .syntax--string.syntax--quoted {
|
||||
color: @purple;
|
||||
|
||||
.syntax--punctuation.syntax--string {
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
.syntax--php {
|
||||
&.syntax--keyword {
|
||||
&.syntax--operator {
|
||||
&.syntax--assignment {
|
||||
color: @purple;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.syntax--meta {
|
||||
&.syntax--object {
|
||||
color: @blue;
|
||||
}
|
||||
|
||||
&.syntax--arguments {
|
||||
color: @purple;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
.syntax--python {
|
||||
.syntax--meta {
|
||||
&.syntax--function-call {
|
||||
color: @blue;
|
||||
|
||||
.syntax--punctuation {
|
||||
color: @cyan;
|
||||
}
|
||||
|
||||
.syntax--arguments {
|
||||
color: @indigo;
|
||||
|
||||
&.syntax--punctuation {
|
||||
color: @cyan;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.syntax--variable {
|
||||
&.syntax--self {
|
||||
color: @pink;
|
||||
}
|
||||
}
|
||||
|
||||
.syntax--meta {
|
||||
.syntax--punctuation {
|
||||
&.syntax--inheritance, &.syntax--section {
|
||||
color: @cyan;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.syntax--variable {
|
||||
&.syntax--parameter {
|
||||
color: @cyan;
|
||||
}
|
||||
}
|
||||
|
||||
.syntax--keyword {
|
||||
&.syntax--operator {
|
||||
color: @purple;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
.syntax--ruby {
|
||||
.syntax--punctuation {
|
||||
&.syntax--separator {
|
||||
color: @cyan;
|
||||
}
|
||||
}
|
||||
|
||||
.syntax--variable {
|
||||
&.syntax--block {
|
||||
color: @red;
|
||||
}
|
||||
|
||||
&.syntax--instance {
|
||||
color: @red;
|
||||
|
||||
.syntax--punctuation {
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
@import "colors";
|
||||
|
||||
// This defines all syntax variables that syntax themes must implement when they
|
||||
// include a syntax-variables.less file.
|
||||
|
||||
// General colors
|
||||
@syntax-text-color: @very-light-gray;
|
||||
@syntax-cursor-color: @teal;
|
||||
@syntax-selection-color: lighten(@syntax-background-color, 10%);
|
||||
@syntax-background-color: @very-dark-gray;
|
||||
@syntax-comment-color: lighten(@very-dark-gray, 20%);
|
||||
|
||||
// Guide colors
|
||||
@syntax-wrap-guide-color: @dark-gray;
|
||||
@syntax-indent-guide-color: lighten(@syntax-background-color, 2.5%);
|
||||
@syntax-invisible-character-color: @gray;
|
||||
|
||||
// For find and replace markers
|
||||
@syntax-result-marker-color: @light-gray;
|
||||
@syntax-result-marker-color-selected: white;
|
||||
|
||||
// Gutter colors
|
||||
@syntax-gutter-text-color: fade(@syntax-text-color, 20%);
|
||||
@syntax-gutter-text-color-selected: @syntax-gutter-text-color;
|
||||
@syntax-gutter-background-color: @syntax-background-color;
|
||||
@syntax-gutter-background-color-selected: darken(@syntax-background-color, 5%);
|
||||
|
||||
// For git diff info. i.e. in the gutter
|
||||
@syntax-color-renamed: @blue;
|
||||
@syntax-color-added: @green;
|
||||
@syntax-color-modified: @orange;
|
||||
@syntax-color-removed: @red;
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
root = true
|
||||
|
||||
[*]
|
||||
indent_style = space
|
||||
indent_size = 4
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
|
||||
[package.json]
|
||||
indent_size = 2
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
module.exports = {
|
||||
root: true,
|
||||
parser: 'babel-eslint',
|
||||
parserOptions: {
|
||||
sourceType: 'module',
|
||||
},
|
||||
extends: 'airbnb',
|
||||
env: {
|
||||
browser: true,
|
||||
jasmine: true,
|
||||
},
|
||||
globals: {
|
||||
atom: false,
|
||||
Color: false,
|
||||
waitsForPromise: false,
|
||||
},
|
||||
rules: {
|
||||
indent: ['error', 4],
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
node_modules
|
||||
.npm-debug*
|
||||
styles/user-settings.less
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
|
||||
---
|
||||
# Contributing to Atom Material UI
|
||||
|
||||
Some of this content comes from Atom's Contributing guidelines. Please, don't be intimidated, this is just a *guideline*. All bug reports, feature requests, and questions are **always** welcome.
|
||||
|
||||
## Code contributions
|
||||
If you want to get your hands dirty and contribute with some code, you should fork this repository, make your changes, and then send in a pull request.
|
||||
|
||||
```shell
|
||||
git clone <your_forked_repo>
|
||||
cd atom-material-ui/
|
||||
apm link -d && npm install
|
||||
atom -d .
|
||||
```
|
||||
|
||||
I recommend installing the package [editorconfig](https://atom.io/packages/editorconfig) so you don't have to change your global settings for indentation.
|
||||
|
||||
### Stylesheets
|
||||
|
||||
Use four spaces per indent and leave an empty line between a selector's properties and a nested selector. Also leave a empty line between selectors. The white space helps with readability:
|
||||
|
||||
```scss
|
||||
.selector {
|
||||
property: value;
|
||||
|
||||
.nested {
|
||||
property: value;
|
||||
}
|
||||
}
|
||||
|
||||
.another-selector {
|
||||
property: value;
|
||||
}
|
||||
```
|
||||
|
||||
Don't abuse nesting or we'll all regret it in the future. Having `!important` flags all over to fight specificity is nasty. Try using three levels at the most. `!important` is only allowed if you need to override a package's inline styles.
|
||||
|
||||
Don't be afraid to include another level if you want to target a `&.className`:
|
||||
|
||||
```scss
|
||||
.selector {
|
||||
property: value;
|
||||
|
||||
&.className {
|
||||
property: value;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Using BEM(ish) syntax nesting is OK:
|
||||
|
||||
```scss
|
||||
.block {
|
||||
&__element {
|
||||
&__sub-element {
|
||||
&--modifier {
|
||||
property: value;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
That unholy pyramid doesn't look great, but the output CSS isn't that hard to override.
|
||||
|
||||
### JavaScript
|
||||
|
||||
In a nutshell, we're following Airbnb's JavaScript style guide, except we use four spaces per indent. Make sure to check the [style guide](https://github.com/airbnb/javascript). Also, we have ESLint to catch bugs and style errors, so make sure to install it along with `linter` and `linter-eslint`.
|
||||
|
||||
## Trying new features
|
||||
|
||||
### Getting the development version
|
||||
|
||||
If you'd like to test new features and hunt bugs, follow these simple steps to get the latest (development) version.
|
||||
|
||||
```shell
|
||||
git clone git@github.com:silvestreh/atom-material-ui.git
|
||||
cd atom-material-ui/
|
||||
apm link -d && npm install
|
||||
```
|
||||
|
||||
You'll have to run Atom in *developer mode* to test the theme. To do so, open a terminal and run:
|
||||
|
||||
```shell
|
||||
atom -d .
|
||||
```
|
||||
|
||||
This way both, the APM published version and the development version, can coexist.
|
||||
|
||||
### Reporting a bug
|
||||
|
||||
Before opening an issue please search through the existing ones, even those that are marked as closed. Also, please take these into account before submitting an issue:
|
||||
|
||||
- **Which version of Atom are you using?** You can get the exact version by running `atom -v` in your terminal, or by starting Atom and running the Application: About command from the Command Palette.
|
||||
- **What's the name and version of the OS you're using?**
|
||||
- **Which packages do you have installed?** You can get that list by running `apm list --installed` in a terminal.
|
||||
- **Are you using local styles in your user stylesheets?** If so, provide its contents, preferably in a code block or with a link to a gist.
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!--
|
||||
|
||||
Have you read Atom's Code of Conduct? By filing an Issue, you are expected to comply with it, including treating everyone with respect: https://github.com/atom/atom/blob/master/CODE_OF_CONDUCT.md
|
||||
|
||||
-->
|
||||
|
||||
[Short description of problem here]
|
||||
|
||||
**Reproduction Steps:**
|
||||
|
||||
1. [First Step]
|
||||
2. [Second Step]
|
||||
3. [Other Steps...]
|
||||
|
||||
**Expected behavior:**
|
||||
|
||||
[Describe expected behavior here]
|
||||
|
||||
**Observed behavior:**
|
||||
|
||||
[Describe observed behavior here]
|
||||
|
||||
**Screenshots and GIFs**
|
||||
|
||||
|
||||
|
||||
**Atom version:** [Enter Atom version here]
|
||||
**OS and version:** [Enter OS name and version here]
|
||||
|
||||
**Installed packages:**
|
||||
|
||||
[List of installed packages here]
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
Copyright (c) 2017 Silvestre Herrera.
|
||||
|
||||
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.
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
### Requirements
|
||||
|
||||
* Filling out the template is required. Any pull request that does not include enough information to be reviewed in a timely manner may be closed at the maintainers' discretion.
|
||||
* All new code requires tests to ensure against regressions
|
||||
|
||||
### Description of the Change
|
||||
|
||||
<!--
|
||||
|
||||
We must be able to understand the design of your change from this description. If we can't get a good idea of what the code will be doing from the description here, the pull request may be closed at the maintainers' discretion.
|
||||
|
||||
-->
|
||||
|
||||
### Benefits
|
||||
|
||||
<!-- What benefits will be realized by the code change? -->
|
||||
|
||||
### Possible Drawbacks
|
||||
|
||||
<!-- What are the possible side-effects or negative impacts of the code change? -->
|
||||
|
||||
### Applicable Issues
|
||||
|
||||
<!-- Enter any applicable Issues here -->
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
[](https://travis-ci.org/atom-material/atom-material-ui)
|
||||
[](https://atom.io/packages/atom-material-ui)
|
||||
[](https://atom.io/packages/atom-material-ui)
|
||||
[]()
|
||||
[](https://gitter.im/silvestreh/atom-material-ui)
|
||||
[](https://pledgie.com/campaigns/29552)
|
||||
|
||||
|
||||
---
|
||||
|
||||
A dynamic UI theme for Atom that (kinda) follows Google's Material Design Guidelines. Best with [Atom Material Syntax](https://github.com/atom-material/atom-material-syntax).
|
||||
|
||||
Inspired by Mattia Astorino's [SublimeText theme](https://github.com/equinusocio/material-theme).
|
||||
|
||||
# Installation
|
||||
|
||||
Fire up a console and type:
|
||||
|
||||
```shell
|
||||
apm install atom-material-ui
|
||||
```
|
||||
|
||||
Or, inside Atom's settings select Install and then search for this package.
|
||||
|
||||
# Configuration
|
||||
|
||||
Atom Material UI supports different accent colors. To change it, go to Settings > Themes and click the cog icon next to the theme selector.
|
||||
|
||||
|
||||
|
||||
You'll find the color picker there.
|
||||
|
||||
# Screenshots
|
||||
|
||||
Here's the obligatory screenshot.
|
||||
|
||||
### With [Atom Material Syntax](https://atom.io/packages/atom-material-syntax)
|
||||
|
||||
```shell
|
||||
apm install atom-material-syntax
|
||||
```
|
||||
|
||||
|
||||
|
||||
### With [Light syntax](https://atom.io/packages/atom-material-syntax-light) theme variant
|
||||
|
||||
```shell
|
||||
apm install atom-material-syntax-light
|
||||
```
|
||||
|
||||
|
||||
|
||||
### With [Dark syntax](https://atom.io/packages/atom-material-syntax-dark) theme variant
|
||||
|
||||
```shell
|
||||
apm install atom-material-syntax-dark
|
||||
```
|
||||
|
||||
|
||||
|
||||
# Contributing
|
||||
|
||||
Please check the [CONTRIBUTING.md](https://github.com/atom-material/atom-material-ui/blob/master/CONTRIBUTING.md) file.
|
||||
|
||||
# Extra
|
||||
|
||||
|
||||
|
||||
You can download the redesigned icon from [dropbox](https://www.dropbox.com/s/8gyn40sw95626dx/Atom-MD-Icon.zip?dl=0). It's a ZIP file containing multiple resolution PNGs, ICNS and ICO formats. Windows ICO converted by Akshit Tripathi.
|
||||
|
||||
# License
|
||||
Atom Material UI is licensed under MIT.
|
||||
|
||||
View the license file [here](https://github.com/atom-material/atom-material-ui/blob/master/LICENSE.md)
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,4 @@
|
|||
<svg enable-background="new 0 0 24 24" id="Layer_1" version="1.1" viewBox="0 0 24 24" x="0px" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" y="0px">
|
||||
<path d="M7,10l5,5l5-5H7z" fill="#FFFFFF" opacity="0.5"/>
|
||||
<path d="M0,0h24v24H0V0z" fill="none"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 315 B |
|
|
@ -0,0 +1,4 @@
|
|||
<svg enable-background="new 0 0 24 24" id="Layer_1" version="1.1" viewBox="0 0 24 24" x="0px" xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" y="0px">
|
||||
<path d="M7,10l5,5l5-5H7z" opacity="0.25"/>
|
||||
<path d="M0,0h24v24H0V0z" fill="none"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 301 B |
|
|
@ -0,0 +1,39 @@
|
|||
// Atom Material UI theme
|
||||
|
||||
@import "styles/ui-variables";
|
||||
@import "styles/ui-mixins";
|
||||
|
||||
@import "styles/alert";
|
||||
@import "styles/atom";
|
||||
@import "styles/autocomplete";
|
||||
@import "styles/background-tips";
|
||||
@import "styles/buttons";
|
||||
@import "styles/dock";
|
||||
@import "styles/editor";
|
||||
@import "styles/fuzzy-finder";
|
||||
@import "styles/git";
|
||||
@import "styles/github-panel";
|
||||
@import "styles/incompatible-packages";
|
||||
@import "styles/lists";
|
||||
@import "styles/messages";
|
||||
@import "styles/nav";
|
||||
@import "styles/notifications";
|
||||
@import "styles/overlays";
|
||||
@import "styles/panels";
|
||||
@import "styles/panes";
|
||||
@import "styles/progress";
|
||||
@import "styles/search-replace";
|
||||
@import "styles/sites";
|
||||
@import "styles/spinner";
|
||||
@import "styles/tabs";
|
||||
@import "styles/text";
|
||||
@import "styles/title-bar";
|
||||
@import "styles/tooltips";
|
||||
@import "styles/tree-view";
|
||||
@import "styles/utilities";
|
||||
@import "styles/settings/main";
|
||||
@import "styles/packages/main";
|
||||
|
||||
:root {
|
||||
font-size: @font-size;
|
||||
}
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
{
|
||||
"amber": {
|
||||
"base": "#FFD54F",
|
||||
"accent": "#A28832"
|
||||
},
|
||||
"blue": {
|
||||
"base": "#2196F3",
|
||||
"accent": "#FFFFFF"
|
||||
},
|
||||
"blueGrey": {
|
||||
"base": "#607D8B",
|
||||
"accent": "#FFFFFF"
|
||||
},
|
||||
"brown": {
|
||||
"base": "#795548",
|
||||
"accent": "#FFFFFF"
|
||||
},
|
||||
"cyan": {
|
||||
"base": "#80DEEA",
|
||||
"accent": "#528C94"
|
||||
},
|
||||
"green": {
|
||||
"base": "#AAD875",
|
||||
"accent": "#6F8853"
|
||||
},
|
||||
"grey": {
|
||||
"base": "#7E7E7E",
|
||||
"accent": "#FFFFFF"
|
||||
},
|
||||
"indigo": {
|
||||
"base": "#5C6BC0",
|
||||
"accent": "#FFFFFF"
|
||||
},
|
||||
"lime": {
|
||||
"base": "#CDDC39",
|
||||
"accent": "#737F10"
|
||||
},
|
||||
"orange": {
|
||||
"base": "#FFA726",
|
||||
"accent": "#9F6918"
|
||||
},
|
||||
"pink": {
|
||||
"base": "#EC407A",
|
||||
"accent": "#46FFC1"
|
||||
},
|
||||
"purple": {
|
||||
"base": "#7E57C2",
|
||||
"accent": "#B0E457"
|
||||
},
|
||||
"red": {
|
||||
"base": "#EF5350",
|
||||
"accent": "#59FCFF"
|
||||
},
|
||||
"teal": {
|
||||
"base": "#009688",
|
||||
"accent": "#FFFFFF"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
'use babel';
|
||||
|
||||
import tinycolor from 'tinycolor2';
|
||||
|
||||
export default function buildColorSettings(baseColor = '#009688', accentColor = '#FFFFFF') {
|
||||
const newAccent = (typeof accentColor === 'object') ?
|
||||
accentColor.toHexString() :
|
||||
accentColor;
|
||||
|
||||
const newBase = (typeof baseColor === 'object') ?
|
||||
baseColor.toHexString() :
|
||||
baseColor;
|
||||
|
||||
const luminance = tinycolor(newBase).getLuminance();
|
||||
let accentTextColor = '#666';
|
||||
|
||||
if (luminance <= 0.3 && luminance > 0.22) {
|
||||
accentTextColor = 'rgba(255,255,255,0.9)';
|
||||
} else if (luminance <= 0.22) {
|
||||
accentTextColor = 'rgba(255,255,255,0.8)';
|
||||
} else if (luminance > 0.3) {
|
||||
accentTextColor = 'rgba(0,0,0,0.6)';
|
||||
}
|
||||
|
||||
return `
|
||||
@accent-color: ${newAccent};
|
||||
@accent-text-color: ${accentTextColor};
|
||||
@base-color: ${newBase};
|
||||
`;
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
'use babel';
|
||||
|
||||
import tinycolor from 'tinycolor2';
|
||||
import writeConfigFile from '../helper/write-config-file';
|
||||
import toggleClassName from '../helper/toggle-class-name';
|
||||
import toCamelCase from '../helper/to-camel-case';
|
||||
import colorTemplates from '../color-templates.json';
|
||||
import buildColorSettings from './build-color-settings';
|
||||
|
||||
atom.config.onDidChange('atom-material-ui.colors.abaseColor', ({ newValue }) => {
|
||||
if (atom.config.get('atom-material-ui.colors.genAccent')) {
|
||||
const accentColor = tinycolor(newValue.toHexString())
|
||||
.complement()
|
||||
.saturate(20)
|
||||
.lighten(5);
|
||||
|
||||
return atom.config.set('atom-material-ui.colors.accentColor', accentColor.toRgbString());
|
||||
}
|
||||
|
||||
return writeConfigFile(
|
||||
buildColorSettings(
|
||||
newValue, atom.config.get('atom-material-ui.colors.accentColor'),
|
||||
),
|
||||
true,
|
||||
);
|
||||
});
|
||||
|
||||
atom.config.onDidChange('atom-material-ui.colors.predefinedColor', (value) => {
|
||||
const newValue = toCamelCase(value.newValue);
|
||||
|
||||
atom.config.set('atom-material-ui.colors.abaseColor', colorTemplates[newValue].base);
|
||||
atom.config.set('atom-material-ui.colors.accentColor', colorTemplates[newValue].accent);
|
||||
});
|
||||
|
||||
atom.config.onDidChange('atom-material-ui.colors.accentColor', ({ newValue }) => (
|
||||
writeConfigFile(
|
||||
buildColorSettings(
|
||||
atom.config.get('atom-material-ui.colors.abaseColor'), newValue,
|
||||
),
|
||||
true,
|
||||
)
|
||||
));
|
||||
|
||||
atom.config.observe('atom-material-ui.colors.paintCursor', value => toggleClassName('amu-paint-cursor', value));
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
'use babel';
|
||||
|
||||
import setFontSize from './set-font-size';
|
||||
|
||||
atom.config.observe('atom-material-ui.fonts.fontSize', size => setFontSize(size));
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
'use babel';
|
||||
|
||||
export default function setFontSize(size) {
|
||||
const fontSize = size ? `${size}px` : null;
|
||||
document.documentElement.style.fontSize = fontSize;
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
'use babel';
|
||||
|
||||
export default function toCamelCase(str) {
|
||||
return str
|
||||
.replace(/-/g, ' ')
|
||||
.replace(/_/g, ' ')
|
||||
.replace(/\s(.)/g, $1 => $1.toUpperCase())
|
||||
.replace(/\s/g, '')
|
||||
.replace(/^(.)/, $1 => $1.toLowerCase());
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
'use babel';
|
||||
|
||||
export default function toggleClassName(className, mustAddClass) {
|
||||
const root = document.documentElement;
|
||||
|
||||
if (mustAddClass) {
|
||||
root.classList.add(className);
|
||||
} else {
|
||||
root.classList.remove(className);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
'use babel';
|
||||
|
||||
import fs from 'fs';
|
||||
|
||||
function writeConfigFile(content, reload = false) {
|
||||
return new Promise((resolve, reject) => {
|
||||
if (!content) return reject({ success: false, error: 'No content given' });
|
||||
|
||||
fs.writeFile(`${__dirname}/../../styles/user-settings.less`, content, 'utf8', (error) => {
|
||||
if (error) return reject({ success: false, error: 'Failed to write settings file' });
|
||||
|
||||
if (reload) {
|
||||
const amuPackage = atom.packages.getLoadedPackage('atom-material-ui');
|
||||
|
||||
if (amuPackage) {
|
||||
amuPackage.deactivate();
|
||||
setImmediate(() => amuPackage.activate());
|
||||
}
|
||||
}
|
||||
|
||||
return resolve({ success: true, error: null });
|
||||
});
|
||||
|
||||
return resolve({ success: true, error: null });
|
||||
});
|
||||
}
|
||||
|
||||
export default writeConfigFile;
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
'use babel';
|
||||
|
||||
import setFontSize from './fonts/set-font-size';
|
||||
import toggleClassName from './helper/toggle-class-name';
|
||||
import './colors';
|
||||
import './fonts';
|
||||
import './tab-bar';
|
||||
import './user-interface';
|
||||
|
||||
const classNames = {
|
||||
// Fonts
|
||||
'amu-paint-cursor': atom.config.get('atom-material-ui.colors.paintCursor'),
|
||||
|
||||
// Tabs settings
|
||||
'amu-compact-tab-bar': atom.config.get('atom-material-ui.tabs.compactTabs'),
|
||||
'amu-no-tab-min-width': atom.config.get('atom-material-ui.tabs.noTabMinWidth'),
|
||||
'amu-tinted-tab-bar': atom.config.get('atom-material-ui.tabs.tintedTabBar'),
|
||||
'amu-stretched-tabs': atom.config.get('atom-material-ui.tabs.stretchedTabs'),
|
||||
|
||||
// General UI settings
|
||||
'amu-use-animations': atom.config.get('atom-material-ui.ui.useAnimations'),
|
||||
'amu-panel-contrast': atom.config.get('atom-material-ui.ui.panelContrast'),
|
||||
'amu-panel-shadows': atom.config.get('atom-material-ui.ui.panelShadows'),
|
||||
};
|
||||
|
||||
export default {
|
||||
activate() {
|
||||
Object.keys(classNames).forEach(className => (
|
||||
toggleClassName(className, classNames[className])),
|
||||
);
|
||||
|
||||
setFontSize(atom.config.get('atom-material-ui.fonts.fontSize'));
|
||||
},
|
||||
|
||||
deactivate() {
|
||||
// Reset all the things!
|
||||
Object.keys(classNames).forEach(className => toggleClassName(className, false));
|
||||
setFontSize(null);
|
||||
},
|
||||
};
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
'use babel';
|
||||
|
||||
import toggleClassName from '../helper/toggle-class-name';
|
||||
|
||||
atom.config.observe('atom-material-ui.tabs.tintedTabBar', (value) => {
|
||||
toggleClassName('amu-tinted-tab-bar', value);
|
||||
});
|
||||
|
||||
atom.config.observe('atom-material-ui.tabs.compactTabs', (value) => {
|
||||
toggleClassName('amu-compact-tab-bar', value);
|
||||
});
|
||||
|
||||
atom.config.observe('atom-material-ui.tabs.noTabMinWidth', (value) => {
|
||||
toggleClassName('amu-no-tab-min-width', value);
|
||||
});
|
||||
|
||||
atom.config.observe('atom-material-ui.tabs.stretchedTabs', (value) => {
|
||||
toggleClassName('amu-stretched-tabs', value);
|
||||
});
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
'use babel';
|
||||
|
||||
import toggleClassName from '../helper/toggle-class-name';
|
||||
|
||||
atom.config.observe('atom-material-ui.ui.panelShadows', (value) => {
|
||||
toggleClassName('amu-panel-shadows', value);
|
||||
});
|
||||
|
||||
atom.config.observe('atom-material-ui.ui.panelContrast', (value) => {
|
||||
toggleClassName('amu-panel-contrast', value);
|
||||
});
|
||||
|
||||
atom.config.observe('atom-material-ui.ui.useAnimations', (value) => {
|
||||
toggleClassName('amu-use-animations', value);
|
||||
});
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
.DS_Store
|
||||
ehthumbs.db
|
||||
Icon?
|
||||
Thumbs.db
|
||||
node_modules
|
||||
.idea
|
||||
7
.atom/packages/atom-material-ui/node_modules/tinycolor2/.travis.yml
generated
vendored
Normal file
7
.atom/packages/atom-material-ui/node_modules/tinycolor2/.travis.yml
generated
vendored
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
language: node_js
|
||||
node_js:
|
||||
- "0.11"
|
||||
before_script:
|
||||
- npm install -g grunt-cli
|
||||
script:
|
||||
- grunt default --verbose
|
||||
59
.atom/packages/atom-material-ui/node_modules/tinycolor2/Gruntfile.js
generated
vendored
Normal file
59
.atom/packages/atom-material-ui/node_modules/tinycolor2/Gruntfile.js
generated
vendored
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
|
||||
module.exports = function(grunt) {
|
||||
|
||||
grunt.initConfig({
|
||||
pkg: grunt.file.readJSON('package.json'),
|
||||
meta: {
|
||||
banner: '// TinyColor v<%= pkg.version %>\n' +
|
||||
'// https://github.com/bgrins/TinyColor\n' +
|
||||
'// <%= grunt.template.today("yyyy-mm-dd") %>, Brian Grinstead, MIT License\n'
|
||||
},
|
||||
|
||||
uglify: {
|
||||
options: {
|
||||
mangle: false,
|
||||
banner: '<%= meta.banner %>'
|
||||
},
|
||||
dist: {
|
||||
files: {
|
||||
'dist/tinycolor-min.js': ['tinycolor.js']
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
qunit: {
|
||||
all: ['test/index.html']
|
||||
},
|
||||
|
||||
|
||||
jshint: {
|
||||
options: {
|
||||
browser: true,
|
||||
sub: true,
|
||||
globals: {
|
||||
jQuery: true
|
||||
}
|
||||
},
|
||||
all: ['tinycolor.js']
|
||||
},
|
||||
|
||||
docco: {
|
||||
debug: {
|
||||
src: ['tinycolor.js'],
|
||||
options: {
|
||||
output: 'docs/'
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
grunt.loadNpmTasks('grunt-contrib-uglify');
|
||||
grunt.loadNpmTasks('grunt-contrib-jshint');
|
||||
grunt.loadNpmTasks('grunt-contrib-qunit');
|
||||
grunt.loadNpmTasks('grunt-docco');
|
||||
|
||||
grunt.registerTask('default', ['jshint', 'qunit']);
|
||||
grunt.registerTask('version-bump', ['jshint', 'qunit', 'uglify', 'docco']);
|
||||
|
||||
};
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
Copyright (c), Brian Grinstead, http://briangrinstead.com
|
||||
|
||||
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.
|
||||
466
.atom/packages/atom-material-ui/node_modules/tinycolor2/README.md
generated
vendored
Normal file
466
.atom/packages/atom-material-ui/node_modules/tinycolor2/README.md
generated
vendored
Normal file
|
|
@ -0,0 +1,466 @@
|
|||
# TinyColor
|
||||
|
||||
## JavaScript color tooling
|
||||
|
||||
TinyColor is a small, fast library for color manipulation and conversion in JavaScript. It allows many forms of input, while providing color conversions and other color utility functions. It has no dependencies.
|
||||
|
||||
[](https://travis-ci.org/bgrins/TinyColor)
|
||||
|
||||
## Including in a browser
|
||||
|
||||
Download [tinycolor.js](https://raw.githubusercontent.com/bgrins/TinyColor/master/tinycolor.js) or install it with bower:
|
||||
|
||||
bower install tinycolor
|
||||
|
||||
Then just include it in the page in a `script` tag:
|
||||
|
||||
<script type='text/javascript' src='tinycolor.js'></script>
|
||||
<script type='text/javascript'>
|
||||
var color = tinycolor("red");
|
||||
</script>
|
||||
|
||||
## Including in node
|
||||
|
||||
`tinycolor` may also be included as a [node](http://nodejs.org/) module like so:
|
||||
|
||||
npm install tinycolor2
|
||||
|
||||
Then it can be used in your script like so:
|
||||
|
||||
var tinycolor = require("tinycolor2");
|
||||
var color = tinycolor("red");
|
||||
|
||||
## Usage
|
||||
|
||||
Call `tinycolor(input)` or `new tinycolor(input)`, and you will have an object with the following properties. See Accepted String Input and Accepted Object Input below for more information about what is accepted.
|
||||
|
||||
## Accepted String Input
|
||||
|
||||
The string parsing is very permissive. It is meant to make typing a color as input as easy as possible. All commas, percentages, parenthesis are optional, and most input allow either 0-1, 0%-100%, or 0-n (where n is either 100, 255, or 360 depending on the value).
|
||||
|
||||
HSL and HSV both require either 0%-100% or 0-1 for the `S`/`L`/`V` properties. The `H` (hue) can have values between 0%-100% or 0-360.
|
||||
|
||||
RGB input requires either 0-255 or 0%-100%.
|
||||
|
||||
If you call `tinycolor.fromRatio`, RGB and Hue input can also accept 0-1.
|
||||
|
||||
Here are some examples of string input:
|
||||
|
||||
### Hex, 8-digit (ARGB) Hex
|
||||
|
||||
tinycolor("#000");
|
||||
tinycolor("000");
|
||||
tinycolor("#f0f0f6");
|
||||
tinycolor("f0f0f6");
|
||||
tinycolor("#88f0f0f6");
|
||||
tinycolor("88f0f0f6");
|
||||
|
||||
### RGB, RGBA
|
||||
|
||||
tinycolor("rgb (255, 0, 0)");
|
||||
tinycolor("rgb 255 0 0");
|
||||
tinycolor("rgba (255, 0, 0, .5)");
|
||||
tinycolor({ r: 255, g: 0, b: 0 });
|
||||
tinycolor.fromRatio({ r: 1, g: 0, b: 0 });
|
||||
tinycolor.fromRatio({ r: .5, g: .5, b: .5 });
|
||||
|
||||
### HSL, HSLA
|
||||
|
||||
tinycolor("hsl(0, 100%, 50%)");
|
||||
tinycolor("hsla(0, 100%, 50%, .5)");
|
||||
tinycolor("hsl(0, 100%, 50%)");
|
||||
tinycolor("hsl 0 1.0 0.5");
|
||||
tinycolor({ h: 0, s: 1, l: .5 });
|
||||
tinycolor.fromRatio({ h: 1, s: 0, l: 0 });
|
||||
tinycolor.fromRatio({ h: .5, s: .5, l: .5 });
|
||||
|
||||
### HSV, HSVA
|
||||
|
||||
tinycolor("hsv(0, 100%, 100%)");
|
||||
tinycolor("hsva(0, 100%, 100%, .5)");
|
||||
tinycolor("hsv (0 100% 100%)");
|
||||
tinycolor("hsv 0 1 1");
|
||||
tinycolor({ h: 0, s: 100, v: 100 });
|
||||
tinycolor.fromRatio({ h: 1, s: 0, v: 0 });
|
||||
tinycolor.fromRatio({ h: .5, s: .5, v: .5 });
|
||||
|
||||
### Named
|
||||
|
||||
tinycolor("RED");
|
||||
tinycolor("blanchedalmond");
|
||||
tinycolor("darkblue");
|
||||
|
||||
### Accepted Object Input
|
||||
|
||||
If you are calling this from code, you may want to use object input. Here are some examples of the different types of accepted object inputs:
|
||||
|
||||
{ r: 255, g: 0, b: 0 }
|
||||
{ r: 255, g: 0, b: 0, a: .5 }
|
||||
{ h: 0, s: 100, l: 50 }
|
||||
{ h: 0, s: 100, v: 100 }
|
||||
|
||||
## Methods
|
||||
|
||||
### getFormat
|
||||
|
||||
Returns the format used to create the tinycolor instance
|
||||
```js
|
||||
var color = tinycolor("red");
|
||||
color.getFormat(); // "name"
|
||||
color = tinycolor({r:255, g:255, b:255});
|
||||
color.getFormat(); // "rgb"
|
||||
```
|
||||
|
||||
### getOriginalInput
|
||||
|
||||
Returns the input passed into the constructer used to create the tinycolor instance
|
||||
```js
|
||||
var color = tinycolor("red");
|
||||
color.getOriginalInput(); // "red"
|
||||
color = tinycolor({r:255, g:255, b:255});
|
||||
color.getOriginalInput(); // "{r: 255, g: 255, b: 255}"
|
||||
```
|
||||
|
||||
### isValid
|
||||
|
||||
Return a boolean indicating whether the color was successfully parsed. Note: if the color is not valid then it will act like `black` when being used with other methods.
|
||||
|
||||
var color1 = tinycolor("red");
|
||||
color1.isValid(); // true
|
||||
color1.toHexString(); // "#ff0000"
|
||||
|
||||
var color2 = tinycolor("not a color");
|
||||
color2.isValid(); // false
|
||||
color2.toString(); // "#000000"
|
||||
|
||||
### getBrightness
|
||||
|
||||
Returns the perceived brightness of a color, from `0-255`, as defined by [Web Content Accessibility Guidelines (Version 1.0)](http://www.w3.org/TR/AERT#color-contrast).
|
||||
|
||||
var color1 = tinycolor("#fff");
|
||||
color1.getBrightness(); // 255
|
||||
|
||||
var color2 = tinycolor("#000");
|
||||
color2.getBrightness(); // 0
|
||||
|
||||
### isLight
|
||||
|
||||
Return a boolean indicating whether the color's perceived brightness is light.
|
||||
|
||||
var color1 = tinycolor("#fff");
|
||||
color1.isLight(); // true
|
||||
|
||||
var color2 = tinycolor("#000");
|
||||
color2.isLight(); // false
|
||||
|
||||
### isDark
|
||||
|
||||
Return a boolean indicating whether the color's perceived brightness is dark.
|
||||
|
||||
var color1 = tinycolor("#fff");
|
||||
color1.isDark(); // false
|
||||
|
||||
var color2 = tinycolor("#000");
|
||||
color2.isDark(); // true
|
||||
|
||||
### getLuminance
|
||||
|
||||
Returns the perceived luminance of a color, from `0-1` as defined by [Web Content Accessibility Guidelines (Version 2.0).](http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef)
|
||||
|
||||
var color1 = tinycolor("#fff");
|
||||
color1.getLuminance(); // 1
|
||||
|
||||
var color2 = tinycolor("#000");
|
||||
color2.getLuminance(); // 0
|
||||
|
||||
### getAlpha
|
||||
|
||||
Returns the alpha value of a color, from `0-1`.
|
||||
|
||||
var color1 = tinycolor("rgba(255, 0, 0, .5)");
|
||||
color1.getAlpha(); // 0.5
|
||||
|
||||
var color2 = tinycolor("rgb(255, 0, 0)");
|
||||
color2.getAlpha(); // 1
|
||||
|
||||
var color3 = tinycolor("transparent");
|
||||
color3.getAlpha(); // 0
|
||||
|
||||
### setAlpha
|
||||
|
||||
Sets the alpha value on a current color. Accepted range is in between `0-1`.
|
||||
|
||||
var color = tinycolor("red");
|
||||
color.getAlpha(); // 1
|
||||
color.setAlpha(.5);
|
||||
color.getAlpha(); // .5
|
||||
color.toRgbString(); // "rgba(255, 0, 0, .5)"
|
||||
|
||||
### String Representations
|
||||
|
||||
The following methods will return a property for the `alpha` value, which can be ignored: `toHsv`, `toHsl`, `toRgb`
|
||||
|
||||
### toHsv
|
||||
|
||||
var color = tinycolor("red");
|
||||
color.toHsv(); // { h: 0, s: 1, v: 1, a: 1 }
|
||||
|
||||
### toHsvString
|
||||
|
||||
var color = tinycolor("red");
|
||||
color.toHsvString(); // "hsv(0, 100%, 100%)"
|
||||
color.setAlpha(0.5);
|
||||
color.toHsvString(); // "hsva(0, 100%, 100%, 0.5)"
|
||||
|
||||
### toHsl
|
||||
|
||||
var color = tinycolor("red");
|
||||
color.toHsl(); // { h: 0, s: 1, l: 0.5, a: 1 }
|
||||
|
||||
### toHslString
|
||||
|
||||
var color = tinycolor("red");
|
||||
color.toHslString(); // "hsl(0, 100%, 50%)"
|
||||
color.setAlpha(0.5);
|
||||
color.toHslString(); // "hsla(0, 100%, 50%, 0.5)"
|
||||
|
||||
### toHex
|
||||
|
||||
var color = tinycolor("red");
|
||||
color.toHex(); // "ff0000"
|
||||
|
||||
### toHexString
|
||||
|
||||
var color = tinycolor("red");
|
||||
color.toHexString(); // "#ff0000"
|
||||
|
||||
### toHex8
|
||||
|
||||
var color = tinycolor("red");
|
||||
color.toHex8(); // "ffff0000"
|
||||
|
||||
### toHex8String
|
||||
|
||||
var color = tinycolor("red");
|
||||
color.toHex8String(); // "#ffff0000"
|
||||
|
||||
### toRgb
|
||||
|
||||
var color = tinycolor("red");
|
||||
color.toRgb(); // { r: 255, g: 0, b: 0, a: 1 }
|
||||
|
||||
### toRgbString
|
||||
|
||||
var color = tinycolor("red");
|
||||
color.toRgbString(); // "rgb(255, 0, 0)"
|
||||
color.setAlpha(0.5);
|
||||
color.toRgbString(); // "rgba(255, 0, 0, 0.5)"
|
||||
|
||||
### toPercentageRgb
|
||||
|
||||
var color = tinycolor("red");
|
||||
color.toPercentageRgb() // { r: "100%", g: "0%", b: "0%", a: 1 }
|
||||
|
||||
### toPercentageRgbString
|
||||
|
||||
var color = tinycolor("red");
|
||||
color.toPercentageRgbString(); // "rgb(100%, 0%, 0%)"
|
||||
color.setAlpha(0.5);
|
||||
color.toPercentageRgbString(); // "rgba(100%, 0%, 0%, 0.5)"
|
||||
|
||||
### toName
|
||||
|
||||
var color = tinycolor("red");
|
||||
color.toName(); // "red"
|
||||
|
||||
### toFilter
|
||||
|
||||
var color = tinycolor("red");
|
||||
color.toFilter(); // "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffff0000,endColorstr=#ffff0000)"
|
||||
|
||||
### toString
|
||||
|
||||
Print to a string, depending on the input format. You can also override this by passing one of `"rgb", "prgb", "hex6", "hex3", "hex8", "name", "hsl", "hsv"` into the function.
|
||||
|
||||
var color1 = tinycolor("red");
|
||||
color1.toString(); // "red"
|
||||
color1.toString("hsv"); // "hsv(0, 100%, 100%)"
|
||||
|
||||
var color2 = tinycolor("rgb(255, 0, 0)");
|
||||
color2.toString(); // "rgb(255, 0, 0)"
|
||||
color2.setAlpha(.5);
|
||||
color2.toString(); // "rgba(255, 0, 0, 0.5)"
|
||||
|
||||
### Color Modification
|
||||
|
||||
These methods manipulate the current color, and return it for chaining. For instance:
|
||||
|
||||
tinycolor("red").lighten().desaturate().toHexString() // "#f53d3d"
|
||||
|
||||
### lighten
|
||||
|
||||
`lighten: function(amount = 10) -> TinyColor`. Lighten the color a given amount, from 0 to 100. Providing 100 will always return white.
|
||||
|
||||
tinycolor("#f00").lighten().toString(); // "#ff3333"
|
||||
tinycolor("#f00").lighten(100).toString(); // "#ffffff"
|
||||
|
||||
### brighten
|
||||
|
||||
`brighten: function(amount = 10) -> TinyColor`. Brighten the color a given amount, from 0 to 100.
|
||||
|
||||
tinycolor("#f00").brighten().toString(); // "#ff1919"
|
||||
|
||||
### darken
|
||||
|
||||
`darken: function(amount = 10) -> TinyColor`. Darken the color a given amount, from 0 to 100. Providing 100 will always return black.
|
||||
|
||||
tinycolor("#f00").darken().toString(); // "#cc0000"
|
||||
tinycolor("#f00").darken(100).toString(); // "#000000"
|
||||
|
||||
### desaturate
|
||||
|
||||
`desaturate: function(amount = 10) -> TinyColor`. Desaturate the color a given amount, from 0 to 100. Providing 100 will is the same as calling `greyscale`.
|
||||
|
||||
tinycolor("#f00").desaturate().toString(); // "#f20d0d"
|
||||
tinycolor("#f00").desaturate(100).toString(); // "#808080"
|
||||
|
||||
### saturate
|
||||
|
||||
`saturate: function(amount = 10) -> TinyColor`. Saturate the color a given amount, from 0 to 100.
|
||||
|
||||
tinycolor("hsl(0, 10%, 50%)").saturate().toString(); // "hsl(0, 20%, 50%)"
|
||||
|
||||
### greyscale
|
||||
|
||||
`greyscale: function() -> TinyColor`. Completely desaturates a color into greyscale. Same as calling `desaturate(100)`.
|
||||
|
||||
tinycolor("#f00").greyscale().toString(); // "#808080"
|
||||
|
||||
### spin
|
||||
|
||||
`spin: function(amount = 0) -> TinyColor`. Spin the hue a given amount, from -360 to 360. Calling with 0, 360, or -360 will do nothing (since it sets the hue back to what it was before).
|
||||
|
||||
tinycolor("#f00").spin(180).toString(); // "#00ffff"
|
||||
tinycolor("#f00").spin(-90).toString(); // "#7f00ff"
|
||||
tinycolor("#f00").spin(90).toString(); // "#80ff00"
|
||||
|
||||
// spin(0) and spin(360) do nothing
|
||||
tinycolor("#f00").spin(0).toString(); // "#ff0000"
|
||||
tinycolor("#f00").spin(360).toString(); // "#ff0000"
|
||||
|
||||
### Color Combinations
|
||||
|
||||
Combination functions return an array of TinyColor objects unless otherwise noted.
|
||||
|
||||
### analogous
|
||||
|
||||
`analogous: function(, results = 6, slices = 30) -> array<TinyColor>`.
|
||||
|
||||
var colors = tinycolor("#f00").analogous();
|
||||
|
||||
colors.map(function(t) { return t.toHexString(); }); // [ "#ff0000", "#ff0066", "#ff0033", "#ff0000", "#ff3300", "#ff6600" ]
|
||||
|
||||
### monochromatic
|
||||
|
||||
`monochromatic: function(, results = 6) -> array<TinyColor>`.
|
||||
|
||||
var colors = tinycolor("#f00").monochromatic();
|
||||
|
||||
colors.map(function(t) { return t.toHexString(); }); // [ "#ff0000", "#2a0000", "#550000", "#800000", "#aa0000", "#d40000" ]
|
||||
|
||||
### splitcomplement
|
||||
|
||||
`splitcomplement: function() -> array<TinyColor>`.
|
||||
|
||||
var colors = tinycolor("#f00").splitcomplement();
|
||||
|
||||
colors.map(function(t) { return t.toHexString(); }); // [ "#ff0000", "#ccff00", "#0066ff" ]
|
||||
|
||||
### triad
|
||||
|
||||
`triad: function() -> array<TinyColor>`.
|
||||
|
||||
var colors = tinycolor("#f00").triad();
|
||||
|
||||
colors.map(function(t) { return t.toHexString(); }); // [ "#ff0000", "#00ff00", "#0000ff" ]
|
||||
|
||||
### tetrad
|
||||
|
||||
`tetrad: function() -> array<TinyColor>`.
|
||||
|
||||
var colors = tinycolor("#f00").tetrad();
|
||||
|
||||
colors.map(function(t) { return t.toHexString(); }); // [ "#ff0000", "#80ff00", "#00ffff", "#7f00ff" ]
|
||||
|
||||
|
||||
### complement
|
||||
|
||||
`complement: function() -> TinyColor`.
|
||||
|
||||
tinycolor("#f00").complement().toHexString(); // "#00ffff"
|
||||
|
||||
## Color Utilities
|
||||
|
||||
tinycolor.equals(color1, color2)
|
||||
tinycolor.mix(color1, color2, amount = 50)
|
||||
|
||||
### random
|
||||
|
||||
Returns a random color.
|
||||
```js
|
||||
var color = tinycolor.random();
|
||||
color.toRgb(); // "{r: 145, g: 40, b: 198, a: 1}"
|
||||
```
|
||||
|
||||
### Readability
|
||||
|
||||
TinyColor assesses readability based on the [Web Content Accessibility Guidelines (Version 2.0)](http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef).
|
||||
|
||||
#### readability
|
||||
|
||||
`readability: function(TinyColor, TinyColor) -> Object`.
|
||||
Returns the contrast ratio between two colors.
|
||||
|
||||
tinycolor.readability("#000", "#000"); // 1
|
||||
tinycolor.readability("#000", "#111"); // 1.1121078324840545
|
||||
tinycolor.readability("#000", "#fff"); // 21
|
||||
|
||||
Use the values in your own calculations, or use one of the convenience functions below.
|
||||
|
||||
#### isReadable
|
||||
|
||||
`isReadable: function(TinyColor, TinyColor, Object) -> Boolean`. Ensure that foreground and background color combinations meet WCAG guidelines. `Object` is optional, defaulting to `{level: "AA",size: "small"}`. `level` can be `"AA"` or "AAA" and `size` can be `"small"` or `"large"`.
|
||||
|
||||
Here are links to read more about the [AA](http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) and [AAA](http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast7.html) requirements.
|
||||
|
||||
tinycolor.isReadable("#000", "#111", {}); // false
|
||||
tinycolor.isReadable("#ff0088", "#5c1a72",{level:"AA",size:"small"}); //false
|
||||
tinycolor.isReadable("#ff0088", "#5c1a72",{level:"AA",size:"large"}), //true
|
||||
|
||||
#### mostReadable
|
||||
|
||||
`mostReadable: function(TinyColor, [TinyColor, Tinycolor ...], Object) -> Boolean`.
|
||||
Given a base color and a list of possible foreground or background colors for that base, returns the most readable color.
|
||||
If none of the colors in the list is readable, `mostReadable` will return the better of black or white if `includeFallbackColors:true`.
|
||||
|
||||
tinycolor.mostReadable("#000", ["#f00", "#0f0", "#00f"]).toHexString(); // "#00ff00"
|
||||
tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:false}).toHexString(); // "#112255"
|
||||
tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:true}).toHexString(); // "#ffffff"
|
||||
tinycolor.mostReadable("#ff0088", ["#2e0c3a"],{includeFallbackColors:true,level:"AAA",size:"large"}).toHexString() // "#2e0c3a",
|
||||
tinycolor.mostReadable("#ff0088", ["#2e0c3a"],{includeFallbackColors:true,level:"AAA",size:"small"}).toHexString() // "#000000",
|
||||
|
||||
See [index.html](https://github.com/bgrins/TinyColor/blob/master/index.html) in the project for a demo.
|
||||
|
||||
## Common operations
|
||||
|
||||
### clone
|
||||
|
||||
`clone: function() -> TinyColor`.
|
||||
Instantiate a new TinyColor object with the same color. Any changes to the new one won't affect the old one.
|
||||
|
||||
var color1 = tinycolor("#F00");
|
||||
var color2 = color1.clone();
|
||||
color2.setAlpha(.5);
|
||||
|
||||
color1.toString(); // "#ff0000"
|
||||
color2.toString(); // "rgba(255, 0, 0, 0.5)"
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"name": "tinycolor",
|
||||
"repository": "bgrins/TinyColor",
|
||||
"version": "1.3.0",
|
||||
"main": "tinycolor.js",
|
||||
"scripts": ["tinycolor.js"],
|
||||
"license": "MIT",
|
||||
"ignore": ["test"]
|
||||
}
|
||||
23
.atom/packages/atom-material-ui/node_modules/tinycolor2/demo/demo.css
generated
vendored
Normal file
23
.atom/packages/atom-material-ui/node_modules/tinycolor2/demo/demo.css
generated
vendored
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
|
||||
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
|
||||
body { font-size: 15px; line-height: 1.231; margin: 4px; background-color: #FCFFFD; }
|
||||
body, button, input, select, textarea { font-family: Droid Sans, Verdana, sans-serif; color: #222; }
|
||||
a { color: #33f; }
|
||||
table th { width: 200px; text-align: right; padding-right:10px; font-family: Georgia serif;}
|
||||
#container { width: 90%; margin:0 auto; }
|
||||
#code-output { border: solid 5px #333; margin:15px; border-top-width: 40px; }
|
||||
#color { width: 200px; height: 2em;}
|
||||
#inputter a { padding:3px; }
|
||||
.invisible { visibility: hidden; }
|
||||
h1 { font-size: 3.8em; color: #293c11; font-family:Tahoma; margin: 3px 0; padding:0; }
|
||||
h1 .small { font-size: 0.4em; }
|
||||
h1 a { text-decoration: none }
|
||||
h2 { font-size: 1.5em; color: #293c11; margin: 0;margin-left: 10px; }
|
||||
h3 { color: #293c11; }
|
||||
.description { font-size: 1.2em; margin-bottom: 30px; margin-top: 30px; font-style: italic;}
|
||||
.download { float: right; }
|
||||
pre { background: #000; color: #fff; padding: 15px;}
|
||||
hr { border: 0; width: 80%; border-bottom: 1px solid #aaa}
|
||||
.footer { text-align:center; padding-top:30px; font-style: italic; }
|
||||
|
||||
#filter-output div, #combine-output span { width: 40px; height: 40px; display:inline-block; margin: 10px; }
|
||||
9597
.atom/packages/atom-material-ui/node_modules/tinycolor2/demo/jquery-1.9.1.js
generated
vendored
Normal file
9597
.atom/packages/atom-material-ui/node_modules/tinycolor2/demo/jquery-1.9.1.js
generated
vendored
Normal file
File diff suppressed because it is too large
Load Diff
4
.atom/packages/atom-material-ui/node_modules/tinycolor2/dist/tinycolor-min.js
generated
vendored
Normal file
4
.atom/packages/atom-material-ui/node_modules/tinycolor2/dist/tinycolor-min.js
generated
vendored
Normal file
File diff suppressed because one or more lines are too long
192
.atom/packages/atom-material-ui/node_modules/tinycolor2/docs/docco.css
generated
vendored
Normal file
192
.atom/packages/atom-material-ui/node_modules/tinycolor2/docs/docco.css
generated
vendored
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
/*--------------------- Layout and Typography ----------------------------*/
|
||||
body {
|
||||
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
color: #252519;
|
||||
margin: 0; padding: 0;
|
||||
}
|
||||
a {
|
||||
color: #261a3b;
|
||||
}
|
||||
a:visited {
|
||||
color: #261a3b;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 15px 0;
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
margin: 0px 0 15px 0;
|
||||
}
|
||||
h1 {
|
||||
margin-top: 40px;
|
||||
}
|
||||
hr {
|
||||
border: 0 none;
|
||||
border-top: 1px solid #e5e5ee;
|
||||
height: 1px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
#container {
|
||||
position: relative;
|
||||
}
|
||||
#background {
|
||||
position: fixed;
|
||||
top: 0; left: 525px; right: 0; bottom: 0;
|
||||
background: #f5f5ff;
|
||||
border-left: 1px solid #e5e5ee;
|
||||
z-index: -1;
|
||||
}
|
||||
#jump_to, #jump_page {
|
||||
background: white;
|
||||
-webkit-box-shadow: 0 0 25px #777; -moz-box-shadow: 0 0 25px #777;
|
||||
-webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px;
|
||||
font: 10px Arial;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
text-align: right;
|
||||
}
|
||||
#jump_to, #jump_wrapper {
|
||||
position: fixed;
|
||||
right: 0; top: 0;
|
||||
padding: 5px 10px;
|
||||
}
|
||||
#jump_wrapper {
|
||||
padding: 0;
|
||||
display: none;
|
||||
}
|
||||
#jump_to:hover #jump_wrapper {
|
||||
display: block;
|
||||
}
|
||||
#jump_page {
|
||||
padding: 5px 0 3px;
|
||||
margin: 0 0 25px 25px;
|
||||
}
|
||||
#jump_page .source {
|
||||
display: block;
|
||||
padding: 5px 10px;
|
||||
text-decoration: none;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
#jump_page .source:hover {
|
||||
background: #f5f5ff;
|
||||
}
|
||||
#jump_page .source:first-child {
|
||||
}
|
||||
table td {
|
||||
border: 0;
|
||||
outline: 0;
|
||||
}
|
||||
td.docs, th.docs {
|
||||
max-width: 450px;
|
||||
min-width: 450px;
|
||||
min-height: 5px;
|
||||
padding: 10px 25px 1px 50px;
|
||||
overflow-x: hidden;
|
||||
vertical-align: top;
|
||||
text-align: left;
|
||||
}
|
||||
.docs pre {
|
||||
margin: 15px 0 15px;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.docs p tt, .docs p code {
|
||||
background: #f8f8ff;
|
||||
border: 1px solid #dedede;
|
||||
font-size: 12px;
|
||||
padding: 0 0.2em;
|
||||
}
|
||||
.pilwrap {
|
||||
position: relative;
|
||||
}
|
||||
.pilcrow {
|
||||
font: 12px Arial;
|
||||
text-decoration: none;
|
||||
color: #454545;
|
||||
position: absolute;
|
||||
top: 3px; left: -20px;
|
||||
padding: 1px 2px;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.2s linear;
|
||||
}
|
||||
td.docs:hover .pilcrow {
|
||||
opacity: 1;
|
||||
}
|
||||
td.code, th.code {
|
||||
padding: 14px 15px 16px 25px;
|
||||
width: 100%;
|
||||
vertical-align: top;
|
||||
background: #f5f5ff;
|
||||
border-left: 1px solid #e5e5ee;
|
||||
}
|
||||
pre, tt, code {
|
||||
font-size: 12px; line-height: 18px;
|
||||
font-family: Menlo, Monaco, Consolas, "Lucida Console", monospace;
|
||||
margin: 0; padding: 0;
|
||||
}
|
||||
|
||||
|
||||
/*---------------------- Syntax Highlighting -----------------------------*/
|
||||
td.linenos { background-color: #f0f0f0; padding-right: 10px; }
|
||||
span.lineno { background-color: #f0f0f0; padding: 0 5px 0 5px; }
|
||||
body .hll { background-color: #ffffcc }
|
||||
body .c { color: #408080; font-style: italic } /* Comment */
|
||||
body .err { border: 1px solid #FF0000 } /* Error */
|
||||
body .k { color: #954121 } /* Keyword */
|
||||
body .o { color: #666666 } /* Operator */
|
||||
body .cm { color: #408080; font-style: italic } /* Comment.Multiline */
|
||||
body .cp { color: #BC7A00 } /* Comment.Preproc */
|
||||
body .c1 { color: #408080; font-style: italic } /* Comment.Single */
|
||||
body .cs { color: #408080; font-style: italic } /* Comment.Special */
|
||||
body .gd { color: #A00000 } /* Generic.Deleted */
|
||||
body .ge { font-style: italic } /* Generic.Emph */
|
||||
body .gr { color: #FF0000 } /* Generic.Error */
|
||||
body .gh { color: #000080; font-weight: bold } /* Generic.Heading */
|
||||
body .gi { color: #00A000 } /* Generic.Inserted */
|
||||
body .go { color: #808080 } /* Generic.Output */
|
||||
body .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
|
||||
body .gs { font-weight: bold } /* Generic.Strong */
|
||||
body .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
|
||||
body .gt { color: #0040D0 } /* Generic.Traceback */
|
||||
body .kc { color: #954121 } /* Keyword.Constant */
|
||||
body .kd { color: #954121; font-weight: bold } /* Keyword.Declaration */
|
||||
body .kn { color: #954121; font-weight: bold } /* Keyword.Namespace */
|
||||
body .kp { color: #954121 } /* Keyword.Pseudo */
|
||||
body .kr { color: #954121; font-weight: bold } /* Keyword.Reserved */
|
||||
body .kt { color: #B00040 } /* Keyword.Type */
|
||||
body .m { color: #666666 } /* Literal.Number */
|
||||
body .s { color: #219161 } /* Literal.String */
|
||||
body .na { color: #7D9029 } /* Name.Attribute */
|
||||
body .nb { color: #954121 } /* Name.Builtin */
|
||||
body .nc { color: #0000FF; font-weight: bold } /* Name.Class */
|
||||
body .no { color: #880000 } /* Name.Constant */
|
||||
body .nd { color: #AA22FF } /* Name.Decorator */
|
||||
body .ni { color: #999999; font-weight: bold } /* Name.Entity */
|
||||
body .ne { color: #D2413A; font-weight: bold } /* Name.Exception */
|
||||
body .nf { color: #0000FF } /* Name.Function */
|
||||
body .nl { color: #A0A000 } /* Name.Label */
|
||||
body .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
|
||||
body .nt { color: #954121; font-weight: bold } /* Name.Tag */
|
||||
body .nv { color: #19469D } /* Name.Variable */
|
||||
body .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
|
||||
body .w { color: #bbbbbb } /* Text.Whitespace */
|
||||
body .mf { color: #666666 } /* Literal.Number.Float */
|
||||
body .mh { color: #666666 } /* Literal.Number.Hex */
|
||||
body .mi { color: #666666 } /* Literal.Number.Integer */
|
||||
body .mo { color: #666666 } /* Literal.Number.Oct */
|
||||
body .sb { color: #219161 } /* Literal.String.Backtick */
|
||||
body .sc { color: #219161 } /* Literal.String.Char */
|
||||
body .sd { color: #219161; font-style: italic } /* Literal.String.Doc */
|
||||
body .s2 { color: #219161 } /* Literal.String.Double */
|
||||
body .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */
|
||||
body .sh { color: #219161 } /* Literal.String.Heredoc */
|
||||
body .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */
|
||||
body .sx { color: #954121 } /* Literal.String.Other */
|
||||
body .sr { color: #BB6688 } /* Literal.String.Regex */
|
||||
body .s1 { color: #219161 } /* Literal.String.Single */
|
||||
body .ss { color: #19469D } /* Literal.String.Symbol */
|
||||
body .bp { color: #954121 } /* Name.Builtin.Pseudo */
|
||||
body .vc { color: #19469D } /* Name.Variable.Class */
|
||||
body .vg { color: #19469D } /* Name.Variable.Global */
|
||||
body .vi { color: #19469D } /* Name.Variable.Instance */
|
||||
body .il { color: #666666 } /* Literal.Number.Integer.Long */
|
||||
1003
.atom/packages/atom-material-ui/node_modules/tinycolor2/docs/tinycolor.html
generated
vendored
Normal file
1003
.atom/packages/atom-material-ui/node_modules/tinycolor2/docs/tinycolor.html
generated
vendored
Normal file
File diff suppressed because it is too large
Load Diff
207
.atom/packages/atom-material-ui/node_modules/tinycolor2/index.html
generated
vendored
Normal file
207
.atom/packages/atom-material-ui/node_modules/tinycolor2/index.html
generated
vendored
Normal file
|
|
@ -0,0 +1,207 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
|
||||
<title>TinyColor - Fast, small color manipulation in JavaScript</title>
|
||||
|
||||
<link rel="stylesheet" href="demo/demo.css" type="text/css" media="screen" />
|
||||
<script type='text/javascript' src='demo/jquery-1.9.1.js'></script>
|
||||
<script type='text/javascript' src='tinycolor.js'></script>
|
||||
<script type='text/javascript'>
|
||||
|
||||
function colorChange(color) {
|
||||
var tiny = tinycolor(color);
|
||||
|
||||
var output = [
|
||||
"hex:\t" + tiny.toHexString(),
|
||||
"hex8:\t" + tiny.toHex8String(),
|
||||
"rgb:\t" + tiny.toRgbString(),
|
||||
"hsl:\t" + tiny.toHslString(),
|
||||
"hsv:\t" + tiny.toHsvString(),
|
||||
"name:\t" + (tiny.toName() || "none"),
|
||||
"format:\t" + (tiny.getFormat()),
|
||||
"format string:\t" + tiny.toString(),
|
||||
].join("\n");
|
||||
|
||||
$("#code-output").text(output).css("border-color", tiny.toHexString());
|
||||
|
||||
var filters = $("#filter-output").toggleClass("invisible", !tiny.isValid());
|
||||
|
||||
filters.find(".lighten").css("background-color",
|
||||
tinycolor(color).lighten(20).toHexString()
|
||||
);
|
||||
filters.find(".darken").css("background-color",
|
||||
tinycolor(color).darken(20).toHexString()
|
||||
);
|
||||
filters.find(".saturate").css("background-color",
|
||||
tinycolor(color).saturate(20).toHexString()
|
||||
);
|
||||
filters.find(".desaturate").css("background-color",
|
||||
tinycolor(color).desaturate(20).toHexString()
|
||||
);
|
||||
filters.find(".greyscale").css("background-color",
|
||||
tinycolor(color).greyscale().toHexString()
|
||||
);
|
||||
filters.find(".brighten").css("background-color",
|
||||
tinycolor(color).brighten(20).toHexString()
|
||||
);
|
||||
|
||||
var allColors = [];
|
||||
for (var i in tinycolor.names) {
|
||||
allColors.push(i);
|
||||
}
|
||||
var mostReadable = tinycolor.mostReadable(color, allColors);
|
||||
|
||||
$("#mostReadable").css("background-color",
|
||||
mostReadable.toHexString()
|
||||
);
|
||||
|
||||
var combines = $("#combine-output").toggleClass("invisible", !tiny.isValid());
|
||||
|
||||
function colorArrayToHTML(arr) {
|
||||
return $.map(arr, function(e) {
|
||||
return '<span style="background:'+e.toHexString()+'"></span>'
|
||||
}).join('');
|
||||
}
|
||||
|
||||
var triad = tiny.triad();
|
||||
combines.find(".triad").html(colorArrayToHTML(triad));
|
||||
console.log(triad.map(function(f) {return f.toHexString();}));
|
||||
|
||||
var tetrad = tiny.tetrad();
|
||||
combines.find(".tetrad").html(colorArrayToHTML(tetrad));
|
||||
|
||||
var mono = tiny.monochromatic();
|
||||
combines.find(".mono").html(colorArrayToHTML(mono));
|
||||
|
||||
var analogous = tiny.analogous();
|
||||
combines.find(".analogous").html(colorArrayToHTML(analogous));
|
||||
|
||||
var splitcomplement = tiny.splitcomplement();
|
||||
combines.find(".sc").html(colorArrayToHTML(splitcomplement));
|
||||
}
|
||||
|
||||
$(function() {
|
||||
$("#color").bind("keyup change", function() {
|
||||
colorChange($(this).val());
|
||||
});
|
||||
colorChange({r: 150, g: 0, b: 100});
|
||||
|
||||
$("#inputter a").click(function() {
|
||||
$("#color").val($(this).text()).trigger("change");
|
||||
return false;
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
<h1>TinyColor</h1>
|
||||
<h2>Fast, small color manipulation and conversion for JavaScript</h2>
|
||||
|
||||
<p>
|
||||
<a href="https://github.com/bgrins/TinyColor">TinyColor</a> is a micro framework for inputting colors and outputting colors as different formats.
|
||||
Input is meant to be as permissive as possible.
|
||||
</p>
|
||||
|
||||
<h3>Usage Documentation</h3>
|
||||
<p>Read all the documentation on the <a href='https://github.com/bgrins/TinyColor'>TinyColor project page</a> on github.</p>
|
||||
|
||||
<h3>Code</h3>
|
||||
<p><a href='docs/tinycolor.html'>View the annotated source code</a> or <a href='https://github.com/bgrins/TinyColor/blob/master/tinycolor.js'>see the full source on github</a>.</p>
|
||||
|
||||
<h3>Tests</h3>
|
||||
<p><a href='test/'>View the QUnit Tests</a>.</p>
|
||||
|
||||
<h3>Demo</h3>
|
||||
<div id='demo'>
|
||||
<div id='inputter'>
|
||||
<p>
|
||||
Enter a color: <input type="text" placeholder="any color." id='color' />
|
||||
</p>
|
||||
<p>
|
||||
Or try these:
|
||||
<a href="#">red</a>
|
||||
<a href="#">0f0</a>
|
||||
<a href="#">rgb 255 128 128</a>
|
||||
<a href='#'>hsl(0, 100%, 50%)</a>
|
||||
<a href='#'>hsv 0, 100%, 50%</a>
|
||||
</p>
|
||||
<p>And I'll tell you what I know about it:</p>
|
||||
</div>
|
||||
|
||||
<pre id='code-output'></pre>
|
||||
|
||||
<div id='filter-output'>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Lighten</th>
|
||||
<td><div class='lighten'></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Darken</th>
|
||||
<td><div class='darken'></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Saturate</th>
|
||||
<td><div class='saturate'></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Desaturate</th>
|
||||
<td><div class='desaturate'></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Greyscale</th>
|
||||
<td><div class='greyscale'></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Brighten</th>
|
||||
<td><div class='brighten'></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Most Readable</th>
|
||||
<td><div id='mostReadable'></div></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id='combine-output'>
|
||||
<table>
|
||||
<tr>
|
||||
<th>Triad</th> <td><div class='triad'></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Tetrad</th> <td><div class='tetrad'></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Monochromatic</th> <td><div class='mono'></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Analogous</th> <td><div class='analogous'></div></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Split Complements</th> <td><div class='sc'></div></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<h3>Credit</h3>
|
||||
<p>
|
||||
Developed by <a href='http://briangrinstead.com'>Brian Grinstead</a>. Big thanks to the following places:
|
||||
</p>
|
||||
<ul>
|
||||
<li><a href='https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js'>less.js</a> for some of the modification functions</li>
|
||||
<li><a href='https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js'>jQuery xColor</a> for some of the combination functions</li>
|
||||
<li><a href='http://www.w3.org/TR/css3-color/#svg-color'>w3.org</a> for the color list and parsing rules</li>
|
||||
<li><a href='http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript'>mjijackson.com</a> for the first stab at RGB / HSL / HSV converters</li>
|
||||
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
60
.atom/packages/atom-material-ui/node_modules/tinycolor2/package.json
generated
vendored
Normal file
60
.atom/packages/atom-material-ui/node_modules/tinycolor2/package.json
generated
vendored
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
{
|
||||
"_from": "tinycolor2@1.3.0",
|
||||
"_id": "tinycolor2@1.3.0",
|
||||
"_inBundle": false,
|
||||
"_integrity": "sha1-PzjmQk3kVmEi1VDrGsyAytN6cYQ=",
|
||||
"_location": "/atom-material-ui/tinycolor2",
|
||||
"_phantomChildren": {},
|
||||
"_requested": {
|
||||
"type": "version",
|
||||
"registry": true,
|
||||
"raw": "tinycolor2@1.3.0",
|
||||
"name": "tinycolor2",
|
||||
"escapedName": "tinycolor2",
|
||||
"rawSpec": "1.3.0",
|
||||
"saveSpec": null,
|
||||
"fetchSpec": "1.3.0"
|
||||
},
|
||||
"_requiredBy": [
|
||||
"/atom-material-ui"
|
||||
],
|
||||
"_resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.3.0.tgz",
|
||||
"_shasum": "3f38e6424de4566122d550eb1acc80cad37a7184",
|
||||
"_spec": "tinycolor2@1.3.0",
|
||||
"_where": "/tmp/apm-install-dir-119228-12619-1cn8am1.8d7s/node_modules/atom-material-ui",
|
||||
"author": {
|
||||
"name": "Brian Grinstead",
|
||||
"email": "briangrinstead@gmail.com",
|
||||
"url": "http://briangrinstead.com"
|
||||
},
|
||||
"bundleDependencies": false,
|
||||
"contributors": [],
|
||||
"deprecated": false,
|
||||
"description": "Fast Color Parsing and Manipulation",
|
||||
"devDependencies": {
|
||||
"grunt": "~0.4.1",
|
||||
"grunt-contrib-concat": "~0.1.3",
|
||||
"grunt-contrib-jshint": "~0.1.1",
|
||||
"grunt-contrib-qunit": "^0.7.0",
|
||||
"grunt-contrib-uglify": "~0.2.0",
|
||||
"grunt-docco": "~0.2.0"
|
||||
},
|
||||
"directories": {},
|
||||
"engines": {
|
||||
"node": "*"
|
||||
},
|
||||
"keywords": [
|
||||
"color",
|
||||
"parser",
|
||||
"tinycolor"
|
||||
],
|
||||
"license": "MIT",
|
||||
"main": "./tinycolor.js",
|
||||
"name": "tinycolor2",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://bgrins.github.com/TinyColor"
|
||||
},
|
||||
"url": "http://bgrins.github.com/TinyColor",
|
||||
"version": "1.3.0"
|
||||
}
|
||||
19
.atom/packages/atom-material-ui/node_modules/tinycolor2/test/index.html
generated
vendored
Normal file
19
.atom/packages/atom-material-ui/node_modules/tinycolor2/test/index.html
generated
vendored
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="qunit.css" type="text/css" media="screen" />
|
||||
<script type='text/javascript' src='qunit.js'></script>
|
||||
<script type='text/javascript' src='../demo/jquery-1.9.1.js'></script>
|
||||
<script type='text/javascript' src='../tinycolor.js'></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 id="qunit-header">TinyColor Tests</h1>
|
||||
<h2 id="qunit-banner"></h2>
|
||||
<div id="qunit-testrunner-toolbar"></div>
|
||||
<h2 id="qunit-userAgent"></h2>
|
||||
<ol id="qunit-tests"></ol>
|
||||
<div id="qunit-fixture">test markup, will be hidden</div>
|
||||
<script type='text/javascript' src='test.js'></script>
|
||||
</body>
|
||||
</html>
|
||||
244
.atom/packages/atom-material-ui/node_modules/tinycolor2/test/qunit.css
generated
vendored
Normal file
244
.atom/packages/atom-material-ui/node_modules/tinycolor2/test/qunit.css
generated
vendored
Normal file
|
|
@ -0,0 +1,244 @@
|
|||
/**
|
||||
* QUnit v1.11.0 - A JavaScript Unit Testing Framework
|
||||
*
|
||||
* http://qunitjs.com
|
||||
*
|
||||
* Copyright 2012 jQuery Foundation and other contributors
|
||||
* Released under the MIT license.
|
||||
* http://jquery.org/license
|
||||
*/
|
||||
|
||||
/** Font Family and Sizes */
|
||||
|
||||
#qunit-tests, #qunit-header, #qunit-banner, #qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult {
|
||||
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar, #qunit-userAgent, #qunit-testresult, #qunit-tests li { font-size: small; }
|
||||
#qunit-tests { font-size: smaller; }
|
||||
|
||||
|
||||
/** Resets */
|
||||
|
||||
#qunit-tests, #qunit-header, #qunit-banner, #qunit-userAgent, #qunit-testresult, #qunit-modulefilter {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
/** Header */
|
||||
|
||||
#qunit-header {
|
||||
padding: 0.5em 0 0.5em 1em;
|
||||
|
||||
color: #8699a4;
|
||||
background-color: #0d3349;
|
||||
|
||||
font-size: 1.5em;
|
||||
line-height: 1em;
|
||||
font-weight: normal;
|
||||
|
||||
border-radius: 5px 5px 0 0;
|
||||
-moz-border-radius: 5px 5px 0 0;
|
||||
-webkit-border-top-right-radius: 5px;
|
||||
-webkit-border-top-left-radius: 5px;
|
||||
}
|
||||
|
||||
#qunit-header a {
|
||||
text-decoration: none;
|
||||
color: #c2ccd1;
|
||||
}
|
||||
|
||||
#qunit-header a:hover,
|
||||
#qunit-header a:focus {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar label {
|
||||
display: inline-block;
|
||||
padding: 0 .5em 0 .1em;
|
||||
}
|
||||
|
||||
#qunit-banner {
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
#qunit-testrunner-toolbar {
|
||||
padding: 0.5em 0 0.5em 2em;
|
||||
color: #5E740B;
|
||||
background-color: #eee;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#qunit-userAgent {
|
||||
padding: 0.5em 0 0.5em 2.5em;
|
||||
background-color: #2b81af;
|
||||
color: #fff;
|
||||
text-shadow: rgba(0, 0, 0, 0.5) 2px 2px 1px;
|
||||
}
|
||||
|
||||
#qunit-modulefilter-container {
|
||||
float: right;
|
||||
}
|
||||
|
||||
/** Tests: Pass/Fail */
|
||||
|
||||
#qunit-tests {
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
#qunit-tests li {
|
||||
padding: 0.4em 0.5em 0.4em 2.5em;
|
||||
border-bottom: 1px solid #fff;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
#qunit-tests.hidepass li.pass, #qunit-tests.hidepass li.running {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#qunit-tests li strong {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#qunit-tests li a {
|
||||
padding: 0.5em;
|
||||
color: #c2ccd1;
|
||||
text-decoration: none;
|
||||
}
|
||||
#qunit-tests li a:hover,
|
||||
#qunit-tests li a:focus {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
#qunit-tests li .runtime {
|
||||
float: right;
|
||||
font-size: smaller;
|
||||
}
|
||||
|
||||
.qunit-assert-list {
|
||||
margin-top: 0.5em;
|
||||
padding: 0.5em;
|
||||
|
||||
background-color: #fff;
|
||||
|
||||
border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
}
|
||||
|
||||
.qunit-collapsed {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#qunit-tests table {
|
||||
border-collapse: collapse;
|
||||
margin-top: .2em;
|
||||
}
|
||||
|
||||
#qunit-tests th {
|
||||
text-align: right;
|
||||
vertical-align: top;
|
||||
padding: 0 .5em 0 0;
|
||||
}
|
||||
|
||||
#qunit-tests td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
#qunit-tests pre {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
#qunit-tests del {
|
||||
background-color: #e0f2be;
|
||||
color: #374e0c;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#qunit-tests ins {
|
||||
background-color: #ffcaca;
|
||||
color: #500;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*** Test Counts */
|
||||
|
||||
#qunit-tests b.counts { color: black; }
|
||||
#qunit-tests b.passed { color: #5E740B; }
|
||||
#qunit-tests b.failed { color: #710909; }
|
||||
|
||||
#qunit-tests li li {
|
||||
padding: 5px;
|
||||
background-color: #fff;
|
||||
border-bottom: none;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
/*** Passing Styles */
|
||||
|
||||
#qunit-tests li li.pass {
|
||||
color: #3c510c;
|
||||
background-color: #fff;
|
||||
border-left: 10px solid #C6E746;
|
||||
}
|
||||
|
||||
#qunit-tests .pass { color: #528CE0; background-color: #D2E0E6; }
|
||||
#qunit-tests .pass .test-name { color: #366097; }
|
||||
|
||||
#qunit-tests .pass .test-actual,
|
||||
#qunit-tests .pass .test-expected { color: #999999; }
|
||||
|
||||
#qunit-banner.qunit-pass { background-color: #C6E746; }
|
||||
|
||||
/*** Failing Styles */
|
||||
|
||||
#qunit-tests li li.fail {
|
||||
color: #710909;
|
||||
background-color: #fff;
|
||||
border-left: 10px solid #EE5757;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
#qunit-tests > li:last-child {
|
||||
border-radius: 0 0 5px 5px;
|
||||
-moz-border-radius: 0 0 5px 5px;
|
||||
-webkit-border-bottom-right-radius: 5px;
|
||||
-webkit-border-bottom-left-radius: 5px;
|
||||
}
|
||||
|
||||
#qunit-tests .fail { color: #000000; background-color: #EE5757; }
|
||||
#qunit-tests .fail .test-name,
|
||||
#qunit-tests .fail .module-name { color: #000000; }
|
||||
|
||||
#qunit-tests .fail .test-actual { color: #EE5757; }
|
||||
#qunit-tests .fail .test-expected { color: green; }
|
||||
|
||||
#qunit-banner.qunit-fail { background-color: #EE5757; }
|
||||
|
||||
|
||||
/** Result */
|
||||
|
||||
#qunit-testresult {
|
||||
padding: 0.5em 0.5em 0.5em 2.5em;
|
||||
|
||||
color: #2b81af;
|
||||
background-color: #D2E0E6;
|
||||
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
#qunit-testresult .module-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
/** Fixture */
|
||||
|
||||
#qunit-fixture {
|
||||
position: absolute;
|
||||
top: -10000px;
|
||||
left: -10000px;
|
||||
width: 1000px;
|
||||
height: 1000px;
|
||||
}
|
||||
2152
.atom/packages/atom-material-ui/node_modules/tinycolor2/test/qunit.js
generated
vendored
Normal file
2152
.atom/packages/atom-material-ui/node_modules/tinycolor2/test/qunit.js
generated
vendored
Normal file
File diff suppressed because it is too large
Load Diff
760
.atom/packages/atom-material-ui/node_modules/tinycolor2/test/test.js
generated
vendored
Normal file
760
.atom/packages/atom-material-ui/node_modules/tinycolor2/test/test.js
generated
vendored
Normal file
|
|
@ -0,0 +1,760 @@
|
|||
|
||||
test("TinyColor initialization", function() {
|
||||
ok (typeof tinycolor != "undefined", "tinycolor is initialized on the page");
|
||||
ok (typeof tinycolor("red") == "object", "tinycolor is able to be instantiated");
|
||||
var r = tinycolor("red");
|
||||
ok (tinycolor(r) === r, "when given a tinycolor instance, tinycolor() returns it");
|
||||
ok (new tinycolor(r) === r, "when given a tinycolor instance, new tinycolor() returns it");
|
||||
equal (tinycolor("red", { format: "hex" }).toString(), "#ff0000", "tinycolor options are being parsed");
|
||||
equal (tinycolor.fromRatio({r: 1, g: 0, b: 0 }, { format: "hex" }).toString(), "#ff0000", "tinycolor options are being parsed");
|
||||
});
|
||||
|
||||
test("Original input", function() {
|
||||
var colorRgbUp = "RGB(39, 39, 39)",
|
||||
colorRgbLow = "rgb(39, 39, 39)",
|
||||
colorRgbMix = "RgB(39, 39, 39)",
|
||||
tinycolorObj = tinycolor(colorRgbMix),
|
||||
inputObj = {r:100,g:100,b:100};
|
||||
var r = tinycolor("red");
|
||||
|
||||
ok (tinycolor(colorRgbLow).getOriginalInput() === colorRgbLow, "original lowercase input is returned");
|
||||
ok (tinycolor(colorRgbUp).getOriginalInput() === colorRgbUp, "original uppercase input is returned");
|
||||
ok (tinycolor(colorRgbMix).getOriginalInput() === colorRgbMix, "original mixed input is returned");
|
||||
ok (tinycolor(tinycolorObj).getOriginalInput() === colorRgbMix, "when given a tinycolor instance, the color string is returned");
|
||||
ok (tinycolor(inputObj).getOriginalInput() === inputObj, "when given an object, the object is returned");
|
||||
ok (new tinycolor("").getOriginalInput() === "", "when given an empty string, an empty string is returned");
|
||||
ok (new tinycolor(null).getOriginalInput() === "", "when given a null value, an empty string is returned");
|
||||
});
|
||||
|
||||
test("Cloning color", function() {
|
||||
var originalColor = tinycolor("red");
|
||||
var originalColorRgbString = originalColor.toRgbString();
|
||||
|
||||
var clonedColor = originalColor.clone();
|
||||
ok (clonedColor.toRgbString() === originalColor.toRgbString(), "cloned color is identical");
|
||||
|
||||
clonedColor.setAlpha(0.5);
|
||||
ok (clonedColor.toRgbString() !== originalColor.toRgbString(), "cloned color is changing independently from original color");
|
||||
ok (originalColorRgbString === originalColor.toRgbString(), "original color was not changed by cloned color change");
|
||||
});
|
||||
|
||||
|
||||
// Taken from convertWikipediaColors.html
|
||||
var conversions = [
|
||||
{"hex":"#FFFFFF","hex8":"#FFFFFFFF","rgb":{"r":"100.0%","g":"100.0%","b":"100.0%"},"hsv":{"h":"0","s":"0.000","v":"1.000"},"hsl":{"h":"0","s":"0.000","l":"1.000"}},
|
||||
{"hex":"#808080","hex8":"#FF808080","rgb":{"r":"050.0%","g":"050.0%","b":"050.0%"},"hsv":{"h":"0","s":"0.000","v":"0.500"},"hsl":{"h":"0","s":"0.000","l":"0.500"}},
|
||||
{"hex":"#000000","hex8":"#FF000000","rgb":{"r":"000.0%","g":"000.0%","b":"000.0%"},"hsv":{"h":"0","s":"0.000","v":"0.000"},"hsl":{"h":"0","s":"0.000","l":"0.000"}},
|
||||
{"hex":"#FF0000","hex8":"#FFFF0000","rgb":{"r":"100.0%","g":"000.0%","b":"000.0%"},"hsv":{"h":"0.0","s":"1.000","v":"1.000"},"hsl":{"h":"0.0","s":"1.000","l":"0.500"}},
|
||||
{"hex":"#BFBF00","hex8":"#FFBFBF00","rgb":{"r":"075.0%","g":"075.0%","b":"000.0%"},"hsv":{"h":"60.0","s":"1.000","v":"0.750"},"hsl":{"h":"60.0","s":"1.000","l":"0.375"}},
|
||||
{"hex":"#008000","hex8":"#FF008000","rgb":{"r":"000.0%","g":"050.0%","b":"000.0%"},"hsv":{"h":"120.0","s":"1.000","v":"0.500"},"hsl":{"h":"120.0","s":"1.000","l":"0.250"}},
|
||||
{"hex":"#80FFFF","hex8":"#FF80FFFF","rgb":{"r":"050.0%","g":"100.0%","b":"100.0%"},"hsv":{"h":"180.0","s":"0.500","v":"1.000"},"hsl":{"h":"180.0","s":"1.000","l":"0.750"}},
|
||||
{"hex":"#8080FF","hex8":"#FF8080FF","rgb":{"r":"050.0%","g":"050.0%","b":"100.0%"},"hsv":{"h":"240.0","s":"0.500","v":"1.000"},"hsl":{"h":"240.0","s":"1.000","l":"0.750"}},
|
||||
{"hex":"#BF40BF","hex8":"#FFBF40BF","rgb":{"r":"075.0%","g":"025.0%","b":"075.0%"},"hsv":{"h":"300.0","s":"0.667","v":"0.750"},"hsl":{"h":"300.0","s":"0.500","l":"0.500"}},
|
||||
{"hex":"#A0A424","hex8":"#FFA0A424","rgb":{"r":"062.8%","g":"064.3%","b":"014.2%"},"hsv":{"h":"61.8","s":"0.779","v":"0.643"},"hsl":{"h":"61.8","s":"0.638","l":"0.393"}},
|
||||
{"hex":"#1EAC41","hex8":"#FF1EAC41","rgb":{"r":"011.6%","g":"067.5%","b":"025.5%"},"hsv":{"h":"134.9","s":"0.828","v":"0.675"},"hsl":{"h":"134.9","s":"0.707","l":"0.396"}},
|
||||
{"hex":"#B430E5","hex8":"#FFB430E5","rgb":{"r":"070.4%","g":"018.7%","b":"089.7%"},"hsv":{"h":"283.7","s":"0.792","v":"0.897"},"hsl":{"h":"283.7","s":"0.775","l":"0.542"}},
|
||||
{"hex":"#FEF888","hex8":"#FFFEF888","rgb":{"r":"099.8%","g":"097.4%","b":"053.2%"},"hsv":{"h":"56.9","s":"0.467","v":"0.998"},"hsl":{"h":"56.9","s":"0.991","l":"0.765"}},
|
||||
{"hex":"#19CB97","hex8":"#FF19CB97","rgb":{"r":"009.9%","g":"079.5%","b":"059.1%"},"hsv":{"h":"162.4","s":"0.875","v":"0.795"},"hsl":{"h":"162.4","s":"0.779","l":"0.447"}},
|
||||
{"hex":"#362698","hex8":"#FF362698","rgb":{"r":"021.1%","g":"014.9%","b":"059.7%"},"hsv":{"h":"248.3","s":"0.750","v":"0.597"},"hsl":{"h":"248.3","s":"0.601","l":"0.373"}},
|
||||
{"hex":"#7E7EB8","hex8":"#FF7E7EB8","rgb":{"r":"049.5%","g":"049.3%","b":"072.1%"},"hsv":{"h":"240.5","s":"0.316","v":"0.721"},"hsl":{"h":"240.5","s":"0.290","l":"0.607"}}
|
||||
];
|
||||
|
||||
|
||||
module("Color translations");
|
||||
test("Color Equality", function() {
|
||||
for (var i = 0; i < conversions.length; i++) {
|
||||
var c = conversions[i];
|
||||
var tiny = tinycolor(c.hex);
|
||||
|
||||
ok (true, tiny.isValid());
|
||||
ok (true,
|
||||
"Testing " + c.hex + ": " + tiny.toRgbString() + " " + tiny.toPercentageRgbString() + " " + tiny.toHsvString() + " " + tiny.toHslString() + " " + tiny.toHexString() +
|
||||
"Original: " + JSON.stringify(c.rgb) + " " + JSON.stringify(c.hsv) + " " + JSON.stringify(c.hsl)
|
||||
);
|
||||
ok (tinycolor.equals(c.rgb, c.hex), "RGB equals hex " + c.hex);
|
||||
ok (tinycolor.equals(c.rgb, c.hex8), "RGB equals hex " + c.hex);
|
||||
ok (tinycolor.equals(c.rgb, c.hsl), "RGB equals HSL " + c.hex);
|
||||
ok (tinycolor.equals(c.rgb, c.hsv), "RGB equals HSV " + c.hex);
|
||||
ok (tinycolor.equals(c.rgb, c.rgb), "RGB equals RGB " + c.hex);
|
||||
|
||||
ok (tinycolor.equals(c.hex, c.hex), "hex equals hex " + c.hex);
|
||||
ok (tinycolor.equals(c.hex, c.hex8), "hex equals hex8 " + c.hex);
|
||||
ok (tinycolor.equals(c.hex, c.hsl), "hex equals HSL " + c.hex);
|
||||
ok (tinycolor.equals(c.hex, c.hsv), "hex equals HSV " + c.hex);
|
||||
|
||||
ok (tinycolor.equals(c.hsl, c.hsv), "HSL equals HSV " + c.hex);
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
module("Ratio Parsing");
|
||||
test("With Ratio", function() {
|
||||
equal (tinycolor.fromRatio({r: 1, g: 1, b: 1}).toHexString(), "#ffffff", "white");
|
||||
equal (tinycolor.fromRatio({r: 1, g: 0, b: 0, a: .5 }).toRgbString(), "rgba(255, 0, 0, 0.5)", "alpha works when ratio is parsed");
|
||||
equal (tinycolor.fromRatio({r: 1, g: 0, b: 0, a: 1 }).toRgbString(), "rgb(255, 0, 0)", "alpha = 1 works when ratio is parsed");
|
||||
equal (tinycolor.fromRatio({r: 1, g: 0, b: 0, a: 10 }).toRgbString(), "rgb(255, 0, 0)", "alpha > 1 works when ratio is parsed");
|
||||
equal (tinycolor.fromRatio({r: 1, g: 0, b: 0, a: -1 }).toRgbString(), "rgb(255, 0, 0)", "alpha < 1 works when ratio is parsed");
|
||||
});
|
||||
|
||||
test("Without Ratio", function() {
|
||||
equal (tinycolor({r: 1, g: 1, b: 1}).toHexString(), "#010101", "010101");
|
||||
equal (tinycolor({r: .1, g: .1, b: .1}).toHexString(), "#000000", "000000");
|
||||
equal (tinycolor("rgb .1 .1 .1").toHexString(), "#000000", "000000");
|
||||
});
|
||||
|
||||
|
||||
module("String Parsing");
|
||||
test("RGB Text Parsing", function() {
|
||||
equal (tinycolor("rgb 255 0 0").toHexString(), "#ff0000", "spaced input");
|
||||
equal (tinycolor("rgb(255, 0, 0)").toHexString(), "#ff0000", "parenthesized input");
|
||||
equal (tinycolor("rgb (255, 0, 0)").toHexString(), "#ff0000", "parenthesized spaced input");
|
||||
equal (tinycolor({ r: 255, g: 0, b: 0 }).toHexString(), "#ff0000", "object input");
|
||||
deepEqual (tinycolor({ r: 255, g: 0, b: 0 }).toRgb(), { r: 255, g: 0, b: 0, a: 1 }, "object input and compare");
|
||||
|
||||
|
||||
ok (tinycolor.equals({r:200, g: 100, b: 0 }, "rgb(200, 100, 0)"));
|
||||
ok (tinycolor.equals({r:200, g: 100, b: 0 }, "rgb 200 100 0"));
|
||||
ok (tinycolor.equals({r:200, g: 100, b: 0 }, "rgb 200 100 0"));
|
||||
ok (tinycolor.equals({r:200, g: 100, b: 0, a: .4 }, "rgba 200 100 0 .4"));
|
||||
ok (!tinycolor.equals({r:199, g: 100, b: 0 }, "rgba 200 100 0 1"));
|
||||
|
||||
ok (!tinycolor.equals({r:199, g: 100, b: 0 }, "rgb(200, 100, 0)"));
|
||||
ok (!tinycolor.equals({r:199, g: 100, b: 0 }, "rgb 200 100 0"));
|
||||
ok (!tinycolor.equals({r:199, g: 100, b: 0 }, "rgb 200 100 0"));
|
||||
|
||||
|
||||
ok (tinycolor.equals(tinycolor({r:200, g: 100, b: 0 }), "rgb(200, 100, 0)"));
|
||||
ok (tinycolor.equals(tinycolor({r:200, g: 100, b: 0 }), "rgb 200 100 0"));
|
||||
ok (tinycolor.equals(tinycolor({r:200, g: 100, b: 0 }), "rgb 200 100 0"));
|
||||
});
|
||||
|
||||
test("Percentage RGB Text Parsing", function() {
|
||||
equal (tinycolor("rgb 100% 0% 0%").toHexString(), "#ff0000", "spaced input");
|
||||
equal (tinycolor("rgb(100%, 0%, 0%)").toHexString(), "#ff0000", "parenthesized input");
|
||||
equal (tinycolor("rgb (100%, 0%, 0%)").toHexString(), "#ff0000", "parenthesized spaced input");
|
||||
equal (tinycolor({ r: "100%", g: "0%", b: "0%" }).toHexString(), "#ff0000", "object input");
|
||||
deepEqual (tinycolor({ r: "100%", g: "0%", b: "0%" }).toRgb(), { r: 255, g: 0, b: 0, a: 1 }, "object input and compare");
|
||||
|
||||
|
||||
ok (tinycolor.equals({r:"90%", g: "45%", b: "0%" }, "rgb(90%, 45%, 0%)"));
|
||||
ok (tinycolor.equals({r:"90%", g: "45%", b: "0%" }, "rgb 90% 45% 0%"));
|
||||
ok (tinycolor.equals({r:"90%", g: "45%", b: "0%" }, "rgb 90% 45% 0%"));
|
||||
ok (tinycolor.equals({r:"90%", g: "45%", b: "0%", a: .4 }, "rgba 90% 45% 0% .4"));
|
||||
ok (!tinycolor.equals({r:"89%", g: "45%", b: "0%" }, "rgba 90% 45% 0% 1"));
|
||||
|
||||
ok (!tinycolor.equals({r:"89%", g: "45%", b: "0%" }, "rgb(90%, 45%, 0%)"));
|
||||
ok (!tinycolor.equals({r:"89%", g: "45%", b: "0%" }, "rgb 90% 45% 0%"));
|
||||
ok (!tinycolor.equals({r:"89%", g: "45%", b: "0%" }, "rgb 90% 45% 0%"));
|
||||
|
||||
|
||||
ok (tinycolor.equals(tinycolor({r:"90%", g: "45%", b: "0%" }), "rgb(90%, 45%, 0%)"));
|
||||
ok (tinycolor.equals(tinycolor({r:"90%", g: "45%", b: "0%" }), "rgb 90% 45% 0%"));
|
||||
ok (tinycolor.equals(tinycolor({r:"90%", g: "45%", b: "0%" }), "rgb 90% 45% 0%"));
|
||||
});
|
||||
|
||||
test("HSL parsing", function() {
|
||||
equal (tinycolor({ h: 251, s: 100, l: .38 }).toHexString(), "#2400c2", "to hex");
|
||||
equal (tinycolor({ h: 251, s: 100, l: .38 }).toRgbString(), "rgb(36, 0, 194)", "to rgb");
|
||||
equal (tinycolor({ h: 251, s: 100, l: .38 }).toHslString(), "hsl(251, 100%, 38%)", "to hsl");
|
||||
equal (tinycolor("hsl(251, 100, 38)").toHexString(), "#2400c2", "to hex");
|
||||
equal (tinycolor("hsl(251, 100%, 38%)").toRgbString(), "rgb(36, 0, 194)", "to rgb");
|
||||
equal (tinycolor("hsl(251, 100%, 38%)").toHslString(), "hsl(251, 100%, 38%)", "to hsl");
|
||||
equal (tinycolor("hsl 100 20 10").toHslString(), "hsl(100, 20%, 10%)", "problematic hsl");
|
||||
});
|
||||
|
||||
test("Hex Parsing", function() {
|
||||
equal (tinycolor("rgb 255 0 0").toHexString(), "#ff0000");
|
||||
equal (tinycolor("rgb 255 0 0").toHexString(true), "#f00");
|
||||
equal (tinycolor("rgba 255 0 0 0.5").toHex8String(), "#80ff0000");
|
||||
|
||||
|
||||
equal (tinycolor("rgb 255 0 0").toHex(), "ff0000");
|
||||
equal (tinycolor("rgb 255 0 0").toHex(true), "f00");
|
||||
equal (tinycolor("rgba 255 0 0 0.5").toHex8(), "80ff0000");
|
||||
});
|
||||
|
||||
test("HSV Parsing", function() {
|
||||
equal (tinycolor("hsv 251.1 0.887 .918").toHsvString(), "hsv(251, 89%, 92%)");
|
||||
equal (tinycolor("hsv 251.1 0.887 0.918").toHsvString(), "hsv(251, 89%, 92%)");
|
||||
equal (tinycolor("hsva 251.1 0.887 0.918 0.5").toHsvString(), "hsva(251, 89%, 92%, 0.5)");
|
||||
});
|
||||
|
||||
test("Invalid Parsing", function() {
|
||||
var invalidColor = tinycolor("this is not a color");
|
||||
equal (invalidColor.toHexString(), "#000000");
|
||||
equal (false, invalidColor.isValid());
|
||||
|
||||
invalidColor = tinycolor("#red");
|
||||
equal (invalidColor.toHexString(), "#000000");
|
||||
equal (false, invalidColor.isValid());
|
||||
|
||||
invalidColor = tinycolor(" #red");
|
||||
equal (invalidColor.toHexString(), "#000000");
|
||||
equal (false, invalidColor.isValid());
|
||||
|
||||
invalidColor = tinycolor("##123456");
|
||||
equal (invalidColor.toHexString(), "#000000");
|
||||
equal (false, invalidColor.isValid());
|
||||
|
||||
invalidColor = tinycolor(" ##123456");
|
||||
equal (invalidColor.toHexString(), "#000000");
|
||||
equal (false, invalidColor.isValid());
|
||||
});
|
||||
|
||||
test("Named colors", function() {
|
||||
equal (tinycolor("aliceblue").toHex(), "f0f8ff");
|
||||
equal (tinycolor("antiquewhite").toHex(), "faebd7");
|
||||
equal (tinycolor("aqua").toHex(), "00ffff");
|
||||
equal (tinycolor("aquamarine").toHex(), "7fffd4");
|
||||
equal (tinycolor("azure").toHex(), "f0ffff");
|
||||
equal (tinycolor("beige").toHex(), "f5f5dc");
|
||||
equal (tinycolor("bisque").toHex(), "ffe4c4");
|
||||
equal (tinycolor("black").toHex(), "000000");
|
||||
equal (tinycolor("blanchedalmond").toHex(), "ffebcd");
|
||||
equal (tinycolor("blue").toHex(), "0000ff");
|
||||
equal (tinycolor("blueviolet").toHex(), "8a2be2");
|
||||
equal (tinycolor("brown").toHex(), "a52a2a");
|
||||
equal (tinycolor("burlywood").toHex(), "deb887");
|
||||
equal (tinycolor("cadetblue").toHex(), "5f9ea0");
|
||||
equal (tinycolor("chartreuse").toHex(), "7fff00");
|
||||
equal (tinycolor("chocolate").toHex(), "d2691e");
|
||||
equal (tinycolor("coral").toHex(), "ff7f50");
|
||||
equal (tinycolor("cornflowerblue").toHex(), "6495ed");
|
||||
equal (tinycolor("cornsilk").toHex(), "fff8dc");
|
||||
equal (tinycolor("crimson").toHex(), "dc143c");
|
||||
equal (tinycolor("cyan").toHex(), "00ffff");
|
||||
equal (tinycolor("darkblue").toHex(), "00008b");
|
||||
equal (tinycolor("darkcyan").toHex(), "008b8b");
|
||||
equal (tinycolor("darkgoldenrod").toHex(), "b8860b");
|
||||
equal (tinycolor("darkgray").toHex(), "a9a9a9");
|
||||
equal (tinycolor("darkgreen").toHex(), "006400");
|
||||
equal (tinycolor("darkkhaki").toHex(), "bdb76b");
|
||||
equal (tinycolor("darkmagenta").toHex(), "8b008b");
|
||||
equal (tinycolor("darkolivegreen").toHex(), "556b2f");
|
||||
equal (tinycolor("darkorange").toHex(), "ff8c00");
|
||||
equal (tinycolor("darkorchid").toHex(), "9932cc");
|
||||
equal (tinycolor("darkred").toHex(), "8b0000");
|
||||
equal (tinycolor("darksalmon").toHex(), "e9967a");
|
||||
equal (tinycolor("darkseagreen").toHex(), "8fbc8f");
|
||||
equal (tinycolor("darkslateblue").toHex(), "483d8b");
|
||||
equal (tinycolor("darkslategray").toHex(), "2f4f4f");
|
||||
equal (tinycolor("darkturquoise").toHex(), "00ced1");
|
||||
equal (tinycolor("darkviolet").toHex(), "9400d3");
|
||||
equal (tinycolor("deeppink").toHex(), "ff1493");
|
||||
equal (tinycolor("deepskyblue").toHex(), "00bfff");
|
||||
equal (tinycolor("dimgray").toHex(), "696969");
|
||||
equal (tinycolor("dodgerblue").toHex(), "1e90ff");
|
||||
equal (tinycolor("firebrick").toHex(), "b22222");
|
||||
equal (tinycolor("floralwhite").toHex(), "fffaf0");
|
||||
equal (tinycolor("forestgreen").toHex(), "228b22");
|
||||
equal (tinycolor("fuchsia").toHex(), "ff00ff");
|
||||
equal (tinycolor("gainsboro").toHex(), "dcdcdc");
|
||||
equal (tinycolor("ghostwhite").toHex(), "f8f8ff");
|
||||
equal (tinycolor("gold").toHex(), "ffd700");
|
||||
equal (tinycolor("goldenrod").toHex(), "daa520");
|
||||
equal (tinycolor("gray").toHex(), "808080");
|
||||
equal (tinycolor("grey").toHex(), "808080");
|
||||
equal (tinycolor("green").toHex(), "008000");
|
||||
equal (tinycolor("greenyellow").toHex(), "adff2f");
|
||||
equal (tinycolor("honeydew").toHex(), "f0fff0");
|
||||
equal (tinycolor("hotpink").toHex(), "ff69b4");
|
||||
equal (tinycolor("indianred ").toHex(), "cd5c5c");
|
||||
equal (tinycolor("indigo ").toHex(), "4b0082");
|
||||
equal (tinycolor("ivory").toHex(), "fffff0");
|
||||
equal (tinycolor("khaki").toHex(), "f0e68c");
|
||||
equal (tinycolor("lavender").toHex(), "e6e6fa");
|
||||
equal (tinycolor("lavenderblush").toHex(), "fff0f5");
|
||||
equal (tinycolor("lawngreen").toHex(), "7cfc00");
|
||||
equal (tinycolor("lemonchiffon").toHex(), "fffacd");
|
||||
equal (tinycolor("lightblue").toHex(), "add8e6");
|
||||
equal (tinycolor("lightcoral").toHex(), "f08080");
|
||||
equal (tinycolor("lightcyan").toHex(), "e0ffff");
|
||||
equal (tinycolor("lightgoldenrodyellow").toHex(), "fafad2");
|
||||
equal (tinycolor("lightgrey").toHex(), "d3d3d3");
|
||||
equal (tinycolor("lightgreen").toHex(), "90ee90");
|
||||
equal (tinycolor("lightpink").toHex(), "ffb6c1");
|
||||
equal (tinycolor("lightsalmon").toHex(), "ffa07a");
|
||||
equal (tinycolor("lightseagreen").toHex(), "20b2aa");
|
||||
equal (tinycolor("lightskyblue").toHex(), "87cefa");
|
||||
equal (tinycolor("lightslategray").toHex(), "778899");
|
||||
equal (tinycolor("lightsteelblue").toHex(), "b0c4de");
|
||||
equal (tinycolor("lightyellow").toHex(), "ffffe0");
|
||||
equal (tinycolor("lime").toHex(), "00ff00");
|
||||
equal (tinycolor("limegreen").toHex(), "32cd32");
|
||||
equal (tinycolor("linen").toHex(), "faf0e6");
|
||||
equal (tinycolor("magenta").toHex(), "ff00ff");
|
||||
equal (tinycolor("maroon").toHex(), "800000");
|
||||
equal (tinycolor("mediumaquamarine").toHex(), "66cdaa");
|
||||
equal (tinycolor("mediumblue").toHex(), "0000cd");
|
||||
equal (tinycolor("mediumorchid").toHex(), "ba55d3");
|
||||
equal (tinycolor("mediumpurple").toHex(), "9370db");
|
||||
equal (tinycolor("mediumseagreen").toHex(), "3cb371");
|
||||
equal (tinycolor("mediumslateblue").toHex(), "7b68ee");
|
||||
equal (tinycolor("mediumspringgreen").toHex(), "00fa9a");
|
||||
equal (tinycolor("mediumturquoise").toHex(), "48d1cc");
|
||||
equal (tinycolor("mediumvioletred").toHex(), "c71585");
|
||||
equal (tinycolor("midnightblue").toHex(), "191970");
|
||||
equal (tinycolor("mintcream").toHex(), "f5fffa");
|
||||
equal (tinycolor("mistyrose").toHex(), "ffe4e1");
|
||||
equal (tinycolor("moccasin").toHex(), "ffe4b5");
|
||||
equal (tinycolor("navajowhite").toHex(), "ffdead");
|
||||
equal (tinycolor("navy").toHex(), "000080");
|
||||
equal (tinycolor("oldlace").toHex(), "fdf5e6");
|
||||
equal (tinycolor("olive").toHex(), "808000");
|
||||
equal (tinycolor("olivedrab").toHex(), "6b8e23");
|
||||
equal (tinycolor("orange").toHex(), "ffa500");
|
||||
equal (tinycolor("orangered").toHex(), "ff4500");
|
||||
equal (tinycolor("orchid").toHex(), "da70d6");
|
||||
equal (tinycolor("palegoldenrod").toHex(), "eee8aa");
|
||||
equal (tinycolor("palegreen").toHex(), "98fb98");
|
||||
equal (tinycolor("paleturquoise").toHex(), "afeeee");
|
||||
equal (tinycolor("palevioletred").toHex(), "db7093");
|
||||
equal (tinycolor("papayawhip").toHex(), "ffefd5");
|
||||
equal (tinycolor("peachpuff").toHex(), "ffdab9");
|
||||
equal (tinycolor("peru").toHex(), "cd853f");
|
||||
equal (tinycolor("pink").toHex(), "ffc0cb");
|
||||
equal (tinycolor("plum").toHex(), "dda0dd");
|
||||
equal (tinycolor("powderblue").toHex(), "b0e0e6");
|
||||
equal (tinycolor("purple").toHex(), "800080");
|
||||
equal (tinycolor("rebeccapurple").toHex(), "663399");
|
||||
equal (tinycolor("red").toHex(), "ff0000");
|
||||
equal (tinycolor("rosybrown").toHex(), "bc8f8f");
|
||||
equal (tinycolor("royalblue").toHex(), "4169e1");
|
||||
equal (tinycolor("saddlebrown").toHex(), "8b4513");
|
||||
equal (tinycolor("salmon").toHex(), "fa8072");
|
||||
equal (tinycolor("sandybrown").toHex(), "f4a460");
|
||||
equal (tinycolor("seagreen").toHex(), "2e8b57");
|
||||
equal (tinycolor("seashell").toHex(), "fff5ee");
|
||||
equal (tinycolor("sienna").toHex(), "a0522d");
|
||||
equal (tinycolor("silver").toHex(), "c0c0c0");
|
||||
equal (tinycolor("skyblue").toHex(), "87ceeb");
|
||||
equal (tinycolor("slateblue").toHex(), "6a5acd");
|
||||
equal (tinycolor("slategray").toHex(), "708090");
|
||||
equal (tinycolor("snow").toHex(), "fffafa");
|
||||
equal (tinycolor("springgreen").toHex(), "00ff7f");
|
||||
equal (tinycolor("steelblue").toHex(), "4682b4");
|
||||
equal (tinycolor("tan").toHex(), "d2b48c");
|
||||
equal (tinycolor("teal").toHex(), "008080");
|
||||
equal (tinycolor("thistle").toHex(), "d8bfd8");
|
||||
equal (tinycolor("tomato").toHex(), "ff6347");
|
||||
equal (tinycolor("turquoise").toHex(), "40e0d0");
|
||||
equal (tinycolor("violet").toHex(), "ee82ee");
|
||||
equal (tinycolor("wheat").toHex(), "f5deb3");
|
||||
equal (tinycolor("white").toHex(), "ffffff");
|
||||
equal (tinycolor("whitesmoke").toHex(), "f5f5f5");
|
||||
equal (tinycolor("yellow").toHex(), "ffff00");
|
||||
equal (tinycolor("yellowgreen").toHex(), "9acd32");
|
||||
|
||||
equal (tinycolor("#f00").toName(), "red");
|
||||
equal (tinycolor("#fa0a0a").toName(), false);
|
||||
});
|
||||
|
||||
|
||||
module("Alpha handling");
|
||||
test("Invalid alpha should normalize to 1", function() {
|
||||
equal (tinycolor({r:255,g:20,b:10,a: -1}).toRgbString(), "rgb(255, 20, 10)", "Negative value");
|
||||
equal (tinycolor({r:255,g:20,b:10,a: -0}).toRgbString(), "rgba(255, 20, 10, 0)", "Negative 0");
|
||||
equal (tinycolor({r:255,g:20,b:10,a: 0}).toRgbString(), "rgba(255, 20, 10, 0)", "0");
|
||||
equal (tinycolor({r:255,g:20,b:10,a: .5}).toRgbString(), "rgba(255, 20, 10, 0.5)", ".5");
|
||||
equal (tinycolor({r:255,g:20,b:10,a: 1}).toRgbString(), "rgb(255, 20, 10)", "1");
|
||||
equal (tinycolor({r:255,g:20,b:10,a: 100}).toRgbString(), "rgb(255, 20, 10)", "Greater than 1");
|
||||
equal (tinycolor({r:255,g:20,b:10,a: "asdfasd"}).toRgbString(), "rgb(255, 20, 10)", "Non Numeric");
|
||||
|
||||
equal (tinycolor("#fff").toRgbString(), "rgb(255, 255, 255)", "Hex should be 1");
|
||||
equal (tinycolor("rgba 255 0 0 100").toRgbString(), "rgb(255, 0, 0)", "Greater than 1 in string parsing");
|
||||
});
|
||||
|
||||
test("toString() with alpha set", function() {
|
||||
var redNamed = tinycolor.fromRatio({ r: 255, g: 0, b: 0, a: .5}, {format: "name"});
|
||||
var transparentNamed = tinycolor.fromRatio({ r: 255, g: 0, b: 0, a: 0 }, {format: "name"});
|
||||
var redHex = tinycolor.fromRatio({ r: 255, g: 0, b: 0, a: .5}, {format: "hex"});
|
||||
|
||||
equal(redNamed.getFormat(), "name", "getFormat() is correct");
|
||||
equal(redHex.getFormat(), "hex", "getFormat() is correct");
|
||||
|
||||
equal (redNamed.toString(), "rgba(255, 0, 0, 0.5)", "Names should default to rgba if alpha is < 1");
|
||||
equal (redHex.toString(), "rgba(255, 0, 0, 0.5)", "Hex should default to rgba if alpha is < 1");
|
||||
|
||||
equal (redNamed.toString("hex"), "#ff0000", "Names should not be returned as rgba if format is specified");
|
||||
equal (redNamed.toString("hex6"), "#ff0000", "Names should not be returned as rgba if format is specified");
|
||||
equal (redNamed.toString("hex3"), "#f00", "Names should not be returned as rgba if format is specified");
|
||||
equal (redNamed.toString("name"), "#ff0000", "Semi transparent names should return hex in toString() if name format is specified");
|
||||
|
||||
equal (redNamed.toName(), false, "Semi transparent names should be false in toName()");
|
||||
|
||||
equal (redHex.toString(), "rgba(255, 0, 0, 0.5)", "Hex should default to rgba if alpha is < 1");
|
||||
equal (transparentNamed.toString(), "transparent", "Named color should equal transparent if alpha == 0");
|
||||
|
||||
redHex.setAlpha(0);
|
||||
equal (redHex.toString(), "rgba(255, 0, 0, 0)", "Hex should default to rgba if alpha is = 0");
|
||||
});
|
||||
|
||||
test("setting alpha", function() {
|
||||
var hexSetter = tinycolor("rgba(255, 0, 0, 1)");
|
||||
equal (hexSetter.getAlpha(), 1, "Alpha should start as 1");
|
||||
var returnedFromSetAlpha = hexSetter.setAlpha(.9);
|
||||
equal (returnedFromSetAlpha, hexSetter, "setAlpha return value should be the color.");
|
||||
equal (hexSetter.getAlpha(), .9, "setAlpha should change alpha value");
|
||||
hexSetter.setAlpha(.5);
|
||||
equal (hexSetter.getAlpha(), .5, "setAlpha should change alpha value");
|
||||
hexSetter.setAlpha(0);
|
||||
equal (hexSetter.getAlpha(), 0, "setAlpha should change alpha value");
|
||||
hexSetter.setAlpha(-1);
|
||||
equal (hexSetter.getAlpha(), 1, "setAlpha with value < 0 should be bound to 1");
|
||||
hexSetter.setAlpha(2);
|
||||
equal (hexSetter.getAlpha(), 1, "setAlpha with value > 1 should be bound to 1");
|
||||
hexSetter.setAlpha();
|
||||
equal (hexSetter.getAlpha(), 1, "setAlpha with invalid value should be bound to 1");
|
||||
hexSetter.setAlpha(null);
|
||||
equal (hexSetter.getAlpha(), 1, "setAlpha with invalid value should be bound to 1");
|
||||
hexSetter.setAlpha("test");
|
||||
equal (hexSetter.getAlpha(), 1, "setAlpha with invalid value should be bound to 1");
|
||||
});
|
||||
|
||||
test("Alpha = 0 should act differently on toName()", function() {
|
||||
equal (tinycolor({r:255,g:20,b:10,a: 0}).toName(), "transparent", "0");
|
||||
equal (tinycolor("transparent").toString(), "transparent", "toString when passed");
|
||||
equal (tinycolor("transparent").toHex(), "000000", "toHex");
|
||||
});
|
||||
|
||||
|
||||
module("Brightness handling");
|
||||
test("getBrightness", function() {
|
||||
equal(tinycolor('#000').getBrightness(), 0, 'returns 0 for #000');
|
||||
equal(tinycolor('#fff').getBrightness(), 255, 'returns 255 for #fff');
|
||||
});
|
||||
|
||||
test("getLuminance", function() {
|
||||
equal(tinycolor('#000').getLuminance(), 0, 'returns 0 for #000');
|
||||
equal(tinycolor('#fff').getLuminance(), 1, 'returns 1 for #fff');
|
||||
});
|
||||
|
||||
test("isDark returns true/false for dark/light colors", function() {
|
||||
equal(tinycolor('#000').isDark(), true, '#000 is dark');
|
||||
equal(tinycolor('#111').isDark(), true, '#111 is dark');
|
||||
equal(tinycolor('#222').isDark(), true, '#222 is dark');
|
||||
equal(tinycolor('#333').isDark(), true, '#333 is dark');
|
||||
equal(tinycolor('#444').isDark(), true, '#444 is dark');
|
||||
equal(tinycolor('#555').isDark(), true, '#555 is dark');
|
||||
equal(tinycolor('#666').isDark(), true, '#666 is dark');
|
||||
equal(tinycolor('#777').isDark(), true, '#777 is dark');
|
||||
equal(tinycolor('#888').isDark(), false, '#888 is not dark');
|
||||
equal(tinycolor('#999').isDark(), false, '#999 is not dark');
|
||||
equal(tinycolor('#aaa').isDark(), false, '#aaa is not dark');
|
||||
equal(tinycolor('#bbb').isDark(), false, '#bbb is not dark');
|
||||
equal(tinycolor('#ccc').isDark(), false, '#ccc is not dark');
|
||||
equal(tinycolor('#ddd').isDark(), false, '#ddd is not dark');
|
||||
equal(tinycolor('#eee').isDark(), false, '#eee is not dark');
|
||||
equal(tinycolor('#fff').isDark(), false, '#fff is not dark');
|
||||
});
|
||||
|
||||
test("isLight returns true/false for light/dark colors", function() {
|
||||
equal(tinycolor('#000').isLight(), false, '#000 is not light');
|
||||
equal(tinycolor('#111').isLight(), false, '#111 is not light');
|
||||
equal(tinycolor('#222').isLight(), false, '#222 is not light');
|
||||
equal(tinycolor('#333').isLight(), false, '#333 is not light');
|
||||
equal(tinycolor('#444').isLight(), false, '#444 is not light');
|
||||
equal(tinycolor('#555').isLight(), false, '#555 is not light');
|
||||
equal(tinycolor('#666').isLight(), false, '#666 is not light');
|
||||
equal(tinycolor('#777').isLight(), false, '#777 is not light');
|
||||
equal(tinycolor('#888').isLight(), true, '#888 is light');
|
||||
equal(tinycolor('#999').isLight(), true, '#999 is light');
|
||||
equal(tinycolor('#aaa').isLight(), true, '#aaa is light');
|
||||
equal(tinycolor('#bbb').isLight(), true, '#bbb is light');
|
||||
equal(tinycolor('#ccc').isLight(), true, '#ccc is light');
|
||||
equal(tinycolor('#ddd').isLight(), true, '#ddd is light');
|
||||
equal(tinycolor('#eee').isLight(), true, '#eee is light');
|
||||
equal(tinycolor('#fff').isLight(), true, '#fff is light');
|
||||
});
|
||||
|
||||
|
||||
module("Initialization from tinycolor output");
|
||||
test("HSL Object", function() {
|
||||
for (var i = 0; i < conversions.length; i++) {
|
||||
var c = conversions[i];
|
||||
var tiny = tinycolor(c.hex);
|
||||
equal (tiny.toHexString(), tinycolor(tiny.toHsl()).toHexString(), "HSL Object");
|
||||
}
|
||||
});
|
||||
|
||||
test("HSL String", function() {
|
||||
for (var i = 0; i < conversions.length; i++) {
|
||||
var c = conversions[i];
|
||||
var tiny = tinycolor(c.hex);
|
||||
var input = tiny.toRgb();
|
||||
var output = tinycolor(tiny.toHslString()).toRgb();
|
||||
var maxDiff = 2;
|
||||
|
||||
equal (Math.abs(input.r - output.r) <= maxDiff, true, "toHslString red value difference <= " + maxDiff);
|
||||
equal (Math.abs(input.g - output.g) <= maxDiff, true, "toHslString green value difference <= " + maxDiff);
|
||||
equal (Math.abs(input.b - output.b) <= maxDiff, true, "toHslString blue value difference <= " + maxDiff);
|
||||
}
|
||||
});
|
||||
|
||||
test("HSV String", function() {
|
||||
for (var i = 0; i < conversions.length; i++) {
|
||||
var c = conversions[i];
|
||||
var tiny = tinycolor(c.hex);
|
||||
var input = tiny.toRgb();
|
||||
var output = tinycolor(tiny.toHsvString()).toRgb();
|
||||
var maxDiff = 2;
|
||||
|
||||
equal (Math.abs(input.r - output.r) <= maxDiff, true, "toHsvString red value difference <= " + maxDiff);
|
||||
equal (Math.abs(input.g - output.g) <= maxDiff, true, "toHsvString green value difference <= " + maxDiff);
|
||||
equal (Math.abs(input.b - output.b) <= maxDiff, true, "toHsvString blue value difference <= " + maxDiff);
|
||||
}
|
||||
});
|
||||
|
||||
test("HSV Object", function() {
|
||||
for (var i = 0; i < conversions.length; i++) {
|
||||
var c = conversions[i];
|
||||
var tiny = tinycolor(c.hex);
|
||||
equal (tiny.toHexString(), tinycolor(tiny.toHsv()).toHexString(), "HSV Object");
|
||||
}
|
||||
});
|
||||
|
||||
test("RGB Object", function() {
|
||||
for (var i = 0; i < conversions.length; i++) {
|
||||
var c = conversions[i];
|
||||
var tiny = tinycolor(c.hex);
|
||||
equal (tiny.toHexString(), tinycolor(tiny.toRgb()).toHexString(), "RGB Object");
|
||||
}
|
||||
});
|
||||
|
||||
test("RGB String", function() {
|
||||
for (var i = 0; i < conversions.length; i++) {
|
||||
var c = conversions[i];
|
||||
var tiny = tinycolor(c.hex);
|
||||
equal (tiny.toHexString(), tinycolor(tiny.toRgbString()).toHexString(), "RGB String");
|
||||
}
|
||||
});
|
||||
|
||||
test("PRGB Object", function() {
|
||||
for (var i = 0; i < conversions.length; i++) {
|
||||
var c = conversions[i];
|
||||
var tiny = tinycolor(c.hex);
|
||||
var input = tiny.toRgb();
|
||||
var output = tinycolor(tiny.toPercentageRgb()).toRgb();
|
||||
var maxDiff = 2;
|
||||
|
||||
equal (Math.abs(input.r - output.r) <= maxDiff, true, "Red value difference <= " + maxDiff);
|
||||
equal (Math.abs(input.g - output.g) <= maxDiff, true, "Green value difference <= " + maxDiff);
|
||||
equal (Math.abs(input.b - output.b) <= maxDiff, true, "Blue value difference <= " + maxDiff);
|
||||
}
|
||||
});
|
||||
|
||||
test("PRGB String", function() {
|
||||
for (var i = 0; i < conversions.length; i++) {
|
||||
var c = conversions[i];
|
||||
var tiny = tinycolor(c.hex);
|
||||
var input = tiny.toRgb();
|
||||
var output = tinycolor(tiny.toPercentageRgbString()).toRgb();
|
||||
var maxDiff = 2;
|
||||
|
||||
equal (Math.abs(input.r - output.r) <= maxDiff, true, "Red value difference <= " + maxDiff);
|
||||
equal (Math.abs(input.g - output.g) <= maxDiff, true, "Green value difference <= " + maxDiff);
|
||||
equal (Math.abs(input.b - output.b) <= maxDiff, true, "Blue value difference <= " + maxDiff);
|
||||
}
|
||||
});
|
||||
|
||||
test("Object", function() {
|
||||
for (var i = 0; i < conversions.length; i++) {
|
||||
var c = conversions[i];
|
||||
var tiny = tinycolor(c.hex);
|
||||
equal (tiny.toHexString(), tinycolor(tiny).toHexString(), "Object");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
module("Utilities");
|
||||
test("Color equality", function() {
|
||||
ok (tinycolor.equals("#ff0000", "#ff0000"), "Same hex");
|
||||
ok (tinycolor.equals("#ff0000", "rgb(255, 0, 0)"), "Same alphas");
|
||||
ok (!tinycolor.equals("#ff0000", "rgba(255, 0, 0, .1)"), "Different alphas");
|
||||
ok (tinycolor.equals("ff0000", "#ff0000"), "Same hex");
|
||||
ok (tinycolor.equals("#f00", "#ff0000"), "Same hex");
|
||||
ok (tinycolor.equals("f00", "#ff0000"), "Same hex");
|
||||
equal (tinycolor("010101").toHexString(), "#010101");
|
||||
ok (!tinycolor.equals("#ff0000", "#00ff00"), "Different hex");
|
||||
ok (tinycolor.equals("#ff8000", "rgb(100%, 50%, 0%)"), "Percentage bounds checking");
|
||||
});
|
||||
test("isReadable", function() {
|
||||
|
||||
// "#ff0088", "#8822aa" (values used in old WCAG1 tests)
|
||||
ok (tinycolor.isReadable("#000000", "#ffffff",{level:"AA",size:"small"}), "white/black is readable");
|
||||
ok (!tinycolor.isReadable("#ff0088", "#5c1a72",{}), "not readable - empty wcag2 object");
|
||||
ok (!tinycolor.isReadable("#ff0088", "#8822aa",{level:"AA",size:"small"}), "not readable - AA small");
|
||||
ok (!tinycolor.isReadable("#ff0088", "#8822aa",{level:"AA",size:"large"}), "not readable - AA large");
|
||||
ok (!tinycolor.isReadable("#ff0088", "#8822aa",{level:"AAA",size:"small"}), "not readable - AAA small");
|
||||
ok (!tinycolor.isReadable("#ff0088", "#8822aa",{level:"AAA",size:"large"}), "not readable - AAA large");
|
||||
|
||||
// values derived from and validated using the calculators at http://www.dasplankton.de/ContrastA/
|
||||
// and http://webaim.org/resources/contrastchecker/
|
||||
|
||||
// "#ff0088", "#5c1a72": contrast ratio 3.04
|
||||
ok (!tinycolor.isReadable("#ff0088", "#5c1a72",{level:"AA",size:"small"}), "not readable - AA small");
|
||||
ok (tinycolor.isReadable("#ff0088", "#5c1a72",{level:"AA",size:"large"}), "readable - AA large");
|
||||
ok (!tinycolor.isReadable("#ff0088", "#5c1a72",{level:"AAA",size:"small"}), "not readable - AAA small");
|
||||
ok (!tinycolor.isReadable("#ff0088", "#5c1a72",{level:"AAA",size:"large"}), "not readable - AAA large");
|
||||
|
||||
// "#ff0088", "#2e0c3a": contrast ratio 4.56
|
||||
ok (tinycolor.isReadable("#ff0088", "#2e0c3a",{level:"AA",size:"small"}), "readable - AA small");
|
||||
ok (tinycolor.isReadable("#ff0088", "#2e0c3a",{level:"AA",size:"large"}), "readable - AA large");
|
||||
ok (!tinycolor.isReadable("#ff0088", "#2e0c3a",{level:"AAA",size:"small"}), "not readable - AAA small");
|
||||
ok (tinycolor.isReadable("#ff0088", "#2e0c3a",{level:"AAA",size:"large"}), "readable - AAA large");
|
||||
|
||||
// "#db91b8", "#2e0c3a": contrast ratio 7.12
|
||||
ok (tinycolor.isReadable("#db91b8", "#2e0c3a",{level:"AA",size:"small"}), "readable - AA small");
|
||||
ok (tinycolor.isReadable("#db91b8", "#2e0c3a",{level:"AA",size:"large"}), "readable - AA large");
|
||||
ok (tinycolor.isReadable("#db91b8", "#2e0c3a",{level:"AAA",size:"small"}), "readable - AAA small");
|
||||
ok (tinycolor.isReadable("#db91b8", "#2e0c3a",{level:"AAA",size:"large"}), "readable - AAA large");
|
||||
});
|
||||
|
||||
test("readability", function() {
|
||||
// check return values from readability function. See isReadable above for standards tests.
|
||||
equal(tinycolor.readability("#000", "#000"), 1, "Readability function test 0");
|
||||
deepEqual(tinycolor.readability("#000", "#111"), 1.1121078324840545, "Readability function test 1");
|
||||
deepEqual(tinycolor.readability("#000", "#fff"), 21, "Readability function test 2");
|
||||
});
|
||||
test("mostReadable", function () {
|
||||
equal (tinycolor.mostReadable("#000", ["#111", "#222",{wcag2:{}}]).toHexString(), "#222222", "readable color present");
|
||||
equal (tinycolor.mostReadable("#f00", ["#d00", "#0d0"],{wcag2:{}}).toHexString(), "#00dd00", "readable color present");
|
||||
equal (tinycolor.mostReadable("#fff", ["#fff", "#fff"],{wcag2:{}}).toHexString(), "#ffffff", "no different color in list");
|
||||
//includeFallbackColors
|
||||
equal (tinycolor.mostReadable("#fff", ["#fff", "#fff"],{includeFallbackColors:true}).toHexString(), "#000000", "no different color in list");
|
||||
equal (tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:false}).toHexString(), "#112255", "no readable color in list");
|
||||
equal (tinycolor.mostReadable("#123", ["#000", "#fff"],{includeFallbackColors:false}).toHexString(), "#ffffff", "verify assumption");
|
||||
equal (tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:true}).toHexString(), "#ffffff", "no readable color in list");
|
||||
|
||||
equal (tinycolor.mostReadable("#ff0088", ["#000", "#fff"],{includeFallbackColors:false}).toHexString(), "#000000", "verify assumption");
|
||||
equal (tinycolor.mostReadable("#ff0088", ["#2e0c3a"],{includeFallbackColors:true,level:"AAA",size:"large"}).toHexString(), "#2e0c3a", "readable color present");
|
||||
equal (tinycolor.mostReadable("#ff0088", ["#2e0c3a"],{includeFallbackColors:true,level:"AAA",size:"small"}).toHexString(), "#000000", "no readable color in list");
|
||||
|
||||
equal (tinycolor.mostReadable("#371b2c", ["#000", "#fff"],{includeFallbackColors:false}).toHexString(), "#ffffff", "verify assumption");
|
||||
equal (tinycolor.mostReadable("#371b2c", ["#a9acb6"],{includeFallbackColors:true,level:"AAA",size:"large"}).toHexString(), "#a9acb6", "readable color present");
|
||||
equal (tinycolor.mostReadable("#371b2c", ["#a9acb6"],{includeFallbackColors:true,level:"AAA",size:"small"}).toHexString(), "#ffffff", "no readable color in list");
|
||||
|
||||
});
|
||||
|
||||
|
||||
test("Filters", function () {
|
||||
|
||||
equal (tinycolor("red").toFilter(), "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffff0000,endColorstr=#ffff0000)");
|
||||
equal (tinycolor("red").toFilter("blue"), "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffff0000,endColorstr=#ff0000ff)");
|
||||
|
||||
equal (tinycolor("transparent").toFilter(), "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000,endColorstr=#00000000)");
|
||||
equal (tinycolor("transparent").toFilter("red"), "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000,endColorstr=#ffff0000)");
|
||||
|
||||
equal (tinycolor("#ddf0f0f0").toFilter(), "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ddf0f0f0,endColorstr=#ddf0f0f0)");
|
||||
equal (tinycolor("rgba(0, 0, 255, .5").toFilter(), "progid:DXImageTransform.Microsoft.gradient(startColorstr=#800000ff,endColorstr=#800000ff)");
|
||||
});
|
||||
|
||||
module("Modifications");
|
||||
|
||||
/* Originally generated with:
|
||||
var results = [];
|
||||
for (var i = 0; i <= 100; i++) results.push( tinycolor.saturate("red", i).toHex() )
|
||||
console.log(JSON.stringify(results))
|
||||
*/
|
||||
var DESATURATIONS = ["ff0000","fe0101","fc0303","fb0404","fa0505","f90606","f70808","f60909","f50a0a","f40b0b","f20d0d","f10e0e","f00f0f","ee1111","ed1212","ec1313","eb1414","e91616","e81717","e71818","e61919","e41b1b","e31c1c","e21d1d","e01f1f","df2020","de2121","dd2222","db2424","da2525","d92626","d72828","d62929","d52a2a","d42b2b","d22d2d","d12e2e","d02f2f","cf3030","cd3232","cc3333","cb3434","c93636","c83737","c73838","c63939","c43b3b","c33c3c","c23d3d","c13e3e","bf4040","be4141","bd4242","bb4444","ba4545","b94646","b84747","b64949","b54a4a","b44b4b","b34d4d","b14e4e","b04f4f","af5050","ad5252","ac5353","ab5454","aa5555","a85757","a75858","a65959","a45b5b","a35c5c","a25d5d","a15e5e","9f6060","9e6161","9d6262","9c6363","9a6565","996666","986767","966969","956a6a","946b6b","936c6c","916e6e","906f6f","8f7070","8e7171","8c7373","8b7474","8a7575","887777","877878","867979","857a7a","837c7c","827d7d","817e7e","808080"];
|
||||
var SATURATIONS = ["ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000","ff0000"];
|
||||
var LIGHTENS = ["ff0000","ff0505","ff0a0a","ff0f0f","ff1414","ff1a1a","ff1f1f","ff2424","ff2929","ff2e2e","ff3333","ff3838","ff3d3d","ff4242","ff4747","ff4d4d","ff5252","ff5757","ff5c5c","ff6161","ff6666","ff6b6b","ff7070","ff7575","ff7a7a","ff8080","ff8585","ff8a8a","ff8f8f","ff9494","ff9999","ff9e9e","ffa3a3","ffa8a8","ffadad","ffb3b3","ffb8b8","ffbdbd","ffc2c2","ffc7c7","ffcccc","ffd1d1","ffd6d6","ffdbdb","ffe0e0","ffe5e5","ffebeb","fff0f0","fff5f5","fffafa","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff","ffffff"];
|
||||
var BRIGHTENS = ["ff0000","ff0303","ff0505","ff0808","ff0a0a","ff0d0d","ff0f0f","ff1212","ff1414","ff1717","ff1919","ff1c1c","ff1f1f","ff2121","ff2424","ff2626","ff2929","ff2b2b","ff2e2e","ff3030","ff3333","ff3636","ff3838","ff3b3b","ff3d3d","ff4040","ff4242","ff4545","ff4747","ff4a4a","ff4c4c","ff4f4f","ff5252","ff5454","ff5757","ff5959","ff5c5c","ff5e5e","ff6161","ff6363","ff6666","ff6969","ff6b6b","ff6e6e","ff7070","ff7373","ff7575","ff7878","ff7a7a","ff7d7d","ff7f7f","ff8282","ff8585","ff8787","ff8a8a","ff8c8c","ff8f8f","ff9191","ff9494","ff9696","ff9999","ff9c9c","ff9e9e","ffa1a1","ffa3a3","ffa6a6","ffa8a8","ffabab","ffadad","ffb0b0","ffb2b2","ffb5b5","ffb8b8","ffbaba","ffbdbd","ffbfbf","ffc2c2","ffc4c4","ffc7c7","ffc9c9","ffcccc","ffcfcf","ffd1d1","ffd4d4","ffd6d6","ffd9d9","ffdbdb","ffdede","ffe0e0","ffe3e3","ffe5e5","ffe8e8","ffebeb","ffeded","fff0f0","fff2f2","fff5f5","fff7f7","fffafa","fffcfc","ffffff"];
|
||||
var DARKENS = ["ff0000","fa0000","f50000","f00000","eb0000","e60000","e00000","db0000","d60000","d10000","cc0000","c70000","c20000","bd0000","b80000","b30000","ad0000","a80000","a30000","9e0000","990000","940000","8f0000","8a0000","850000","800000","7a0000","750000","700000","6b0000","660000","610000","5c0000","570000","520000","4d0000","470000","420000","3d0000","380000","330000","2e0000","290000","240000","1f0000","190000","140000","0f0000","0a0000","050000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000","000000"];
|
||||
|
||||
test("Modifications", function () {
|
||||
for (var i = 0; i <= 100; i++) {
|
||||
equal (tinycolor("red").desaturate(i).toHex(), DESATURATIONS[i], "Desaturation " + i + " works");
|
||||
}
|
||||
for (var i = 0; i <= 100; i++) {
|
||||
equal (tinycolor("red").saturate(i).toHex(), SATURATIONS[i], "Saturation " + i + " works");
|
||||
}
|
||||
for (var i = 0; i <= 100; i++) {
|
||||
equal (tinycolor("red").lighten(i).toHex(), LIGHTENS[i], "Lighten " + i + " works");
|
||||
}
|
||||
for (var i = 0; i <= 100; i++) {
|
||||
equal (tinycolor("red").brighten(i).toHex(), BRIGHTENS[i], "Brighter " + i + " works");
|
||||
}
|
||||
for (var i = 0; i <= 100; i++) {
|
||||
equal (tinycolor("red").darken(i).toHex(), DARKENS[i], "Darken " + i + " works");
|
||||
}
|
||||
|
||||
equal (tinycolor("red").greyscale().toHex(), "808080", "Greyscale works");
|
||||
});
|
||||
|
||||
test("Spin", function () {
|
||||
equal (Math.round(tinycolor("#f00").spin(-1234).toHsl().h), 206, "Spinning -1234 works");
|
||||
equal (Math.round(tinycolor("#f00").spin(-360).toHsl().h), 0, "Spinning -360 works");
|
||||
equal (Math.round(tinycolor("#f00").spin(-120).toHsl().h), 240, "Spinning -120 works");
|
||||
equal (Math.round(tinycolor("#f00").spin(0).toHsl().h), 0, "Spinning 0 works");
|
||||
equal (Math.round(tinycolor("#f00").spin(10).toHsl().h), 10, "Spinning 10 works");
|
||||
equal (Math.round(tinycolor("#f00").spin(360).toHsl().h), 0, "Spinning 360 works");
|
||||
equal (Math.round(tinycolor("#f00").spin(2345).toHsl().h), 185, "Spinning 2345 works");
|
||||
});
|
||||
|
||||
test("Mix", function () {
|
||||
// amount 0 or none
|
||||
equal(tinycolor.mix('#000', '#fff').toHsl().l, 0.5, "Mixing without amount works");
|
||||
equal(tinycolor.mix('#f00', '#000', 0).toHex(), 'ff0000', "Mixing with 0 amount works");
|
||||
|
||||
// black and white
|
||||
for (var i = 0; i < 100; i++) {
|
||||
equal(Math.round(tinycolor.mix('#000', '#fff', i).toHsl().l * 100) / 100, i / 100, "Mixing black and white with " + i + " amount works");
|
||||
}
|
||||
|
||||
// with colors
|
||||
for (var i = 0; i < 100; i++) {
|
||||
var new_hex = Math.round(255 * (1 - (i / 100))).toString(16);
|
||||
|
||||
if (new_hex.length === 1) {
|
||||
new_hex = '0' + new_hex;
|
||||
}
|
||||
|
||||
equal(tinycolor.mix('#f00', '#000', i).toHex(), new_hex + '0000', "Mixing " + i + " (red channel)");
|
||||
equal(tinycolor.mix('#0f0', '#000', i).toHex(), '00' + new_hex + '00', "Mixing " + i + " (green channel)");
|
||||
equal(tinycolor.mix('#00f', '#000', i).toHex(), '0000' + new_hex, "Mixing " + i + " (blue channel)");
|
||||
equal(tinycolor.mix(tinycolor('transparent'), '#000', i).toRgb().a, i / 100, "Mixing " + i + " (alpha channel)");
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// The combination tests need to be expanded further
|
||||
module("Combinations");
|
||||
|
||||
function colorsToHexString(colors) {
|
||||
return colors.map(function(c) {
|
||||
return c.toHex();
|
||||
}).join(",");
|
||||
}
|
||||
|
||||
test("complement", function() {
|
||||
var complementDoesntModifyInstance = tinycolor("red");
|
||||
equal (complementDoesntModifyInstance.complement().toHex(), "00ffff", "Complement works");
|
||||
equal (complementDoesntModifyInstance.toHex(), "ff0000", "Complement did not modify this color");
|
||||
});
|
||||
|
||||
test("analogous", function() {
|
||||
var combination = tinycolor("red").analogous();
|
||||
equal(colorsToHexString(combination), "ff0000,ff0066,ff0033,ff0000,ff3300,ff6600", "Correct Combination");
|
||||
});
|
||||
|
||||
test("monochromatic", function() {
|
||||
var combination = tinycolor("red").monochromatic();
|
||||
equal(colorsToHexString(combination), "ff0000,2a0000,550000,800000,aa0000,d40000", "Correct Combination");
|
||||
});
|
||||
|
||||
test("splitcomplement", function() {
|
||||
var combination = tinycolor("red").splitcomplement();
|
||||
equal(colorsToHexString(combination), "ff0000,ccff00,0066ff", "Correct Combination");
|
||||
});
|
||||
|
||||
test("triad", function() {
|
||||
var combination = tinycolor("red").triad();
|
||||
equal(colorsToHexString(combination), "ff0000,00ff00,0000ff", "Correct Combination");
|
||||
});
|
||||
|
||||
test("tetrad", function() {
|
||||
var combination = tinycolor("red").tetrad();
|
||||
equal(colorsToHexString(combination), "ff0000,80ff00,00ffff,7f00ff", "Correct Combination");
|
||||
});
|
||||
1166
.atom/packages/atom-material-ui/node_modules/tinycolor2/tinycolor.js
generated
vendored
Normal file
1166
.atom/packages/atom-material-ui/node_modules/tinycolor2/tinycolor.js
generated
vendored
Normal file
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,243 @@
|
|||
{
|
||||
"_from": "https://www.atom.io/api/packages/atom-material-ui/versions/2.1.3/tarball",
|
||||
"_id": "atom-material-ui@2.1.3",
|
||||
"_inBundle": false,
|
||||
"_integrity": "sha512-vTD4R1nOFN9j5CzpZy3Pn0Gbdgct1v9nvF6iLWiaSaEDAnqjuUHDDpQImpM5znNcqk+uS6/9nGxjrYe53Ex5eg==",
|
||||
"_location": "/atom-material-ui",
|
||||
"_phantomChildren": {},
|
||||
"_requested": {
|
||||
"type": "remote",
|
||||
"raw": "https://www.atom.io/api/packages/atom-material-ui/versions/2.1.3/tarball",
|
||||
"rawSpec": "https://www.atom.io/api/packages/atom-material-ui/versions/2.1.3/tarball",
|
||||
"saveSpec": "https://www.atom.io/api/packages/atom-material-ui/versions/2.1.3/tarball",
|
||||
"fetchSpec": "https://www.atom.io/api/packages/atom-material-ui/versions/2.1.3/tarball"
|
||||
},
|
||||
"_requiredBy": [
|
||||
"#USER",
|
||||
"/"
|
||||
],
|
||||
"_resolved": "https://www.atom.io/api/packages/atom-material-ui/versions/2.1.3/tarball",
|
||||
"_shasum": "f7c5a9f837d2ff5ccdb95d8e0a69589e01b57aa9",
|
||||
"_spec": "https://www.atom.io/api/packages/atom-material-ui/versions/2.1.3/tarball",
|
||||
"_where": "/tmp/apm-install-dir-119228-12619-1cn8am1.8d7s",
|
||||
"bugs": {
|
||||
"url": "https://github.com/atom-material/atom-material-ui/issues"
|
||||
},
|
||||
"bundleDependencies": false,
|
||||
"configSchema": {
|
||||
"colors": {
|
||||
"order": 1,
|
||||
"type": "object",
|
||||
"title": "Colors",
|
||||
"properties": {
|
||||
"abaseColor": {
|
||||
"title": "Primary color",
|
||||
"description": "Changes the main theme color.",
|
||||
"type": "color",
|
||||
"default": "#009688"
|
||||
},
|
||||
"accentColor": {
|
||||
"title": "Secondary color",
|
||||
"description": "This color is used as an accent to the Primary Color.",
|
||||
"type": "color",
|
||||
"default": "#FFFFFF"
|
||||
},
|
||||
"genAccent": {
|
||||
"title": "Generate complementary secondary color",
|
||||
"description": "Generates a complementary color based on your selected Primary Color.",
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"predefinedColor": {
|
||||
"title": "Predefined colors",
|
||||
"description": "Pick a predefined color from the Material Design palette. If you change the Primary Color it will override this settings.",
|
||||
"type": "string",
|
||||
"enum": [
|
||||
"Amber",
|
||||
"Blue",
|
||||
"Blue Grey",
|
||||
"Brown",
|
||||
"Cyan",
|
||||
"Green",
|
||||
"Grey",
|
||||
"Indigo",
|
||||
"Lime",
|
||||
"Orange",
|
||||
"Pink",
|
||||
"Purple",
|
||||
"Red",
|
||||
"Teal"
|
||||
],
|
||||
"default": "Teal"
|
||||
},
|
||||
"paintCursor": {
|
||||
"title": "Paint text editor's cursor",
|
||||
"description": "Overrides the syntax theme's cursor color with the selected Primary Color.",
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
}
|
||||
}
|
||||
},
|
||||
"ui": {
|
||||
"order": 2,
|
||||
"type": "object",
|
||||
"title": "User Interface",
|
||||
"properties": {
|
||||
"useAnimations": {
|
||||
"title": "Use animations",
|
||||
"description": "Enables animations for clicked tabs and other UI elements.",
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"panelContrast": {
|
||||
"title": "Contrasting panels",
|
||||
"description": "Adds a little contrast between panels to differentiate where one starts and the other ends.",
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"panelShadows": {
|
||||
"title": "Panels cast shadows",
|
||||
"description": "Adds depth to the user interface by using shadows.",
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
}
|
||||
}
|
||||
},
|
||||
"tabs": {
|
||||
"order": 3,
|
||||
"type": "object",
|
||||
"title": "Tabs",
|
||||
"properties": {
|
||||
"compactTabs": {
|
||||
"title": "Compact tab bar",
|
||||
"description": "Reduces line height so the tab bar won't be too tall.",
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"tintedTabBar": {
|
||||
"title": "Tinted tab bar",
|
||||
"description": "Paints the tab bar with the chosen primary color.",
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"noTabMinWidth": {
|
||||
"title": "No minimum width for tabs",
|
||||
"description": "Prevents tabs from overflowing off the tab bar.",
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"stretchedTabs": {
|
||||
"title": "Stretched tabs",
|
||||
"description": "Stretch tabs to full available width of the tab bar.",
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
}
|
||||
}
|
||||
},
|
||||
"fonts": {
|
||||
"order": 5,
|
||||
"type": "object",
|
||||
"title": "Fonts",
|
||||
"properties": {
|
||||
"fontSize": {
|
||||
"title": "User interface font size",
|
||||
"description": "Scales the entire UI based on this value.",
|
||||
"type": "number",
|
||||
"default": 16,
|
||||
"minimum": 10,
|
||||
"maximum": 32
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"dependencies": {
|
||||
"tinycolor2": "1.3.0"
|
||||
},
|
||||
"deprecated": false,
|
||||
"description": "A dynamic UI theme for Atom that follows Google's Material Design Guidelines",
|
||||
"devDependencies": {
|
||||
"babel-eslint": "^7.1.1",
|
||||
"eslint": "^3.17.1",
|
||||
"eslint-config-airbnb": "^14.1.0",
|
||||
"eslint-plugin-import": "^2.2.0",
|
||||
"eslint-plugin-jsx-a11y": "^4.0.0",
|
||||
"eslint-plugin-react": "^6.10.0"
|
||||
},
|
||||
"engines": {
|
||||
"atom": ">=1.17.0 <2.0.0"
|
||||
},
|
||||
"homepage": "https://github.com/atom-material/atom-material-ui#readme",
|
||||
"keywords": [
|
||||
"ui",
|
||||
"theme",
|
||||
"material",
|
||||
"md",
|
||||
"dynamic",
|
||||
"adaptive",
|
||||
"adapt to syntax",
|
||||
"material design"
|
||||
],
|
||||
"license": "MIT",
|
||||
"main": "./lib/main",
|
||||
"name": "atom-material-ui",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/atom-material/atom-material-ui.git"
|
||||
},
|
||||
"theme": "ui",
|
||||
"version": "2.1.3",
|
||||
"_atomModuleCache": {
|
||||
"version": 1,
|
||||
"dependencies": [
|
||||
{
|
||||
"name": "tinycolor2",
|
||||
"version": "1.3.0",
|
||||
"path": "node_modules/tinycolor2/tinycolor.js"
|
||||
}
|
||||
],
|
||||
"extensions": {
|
||||
".js": [
|
||||
".eslintrc.js",
|
||||
"lib/colors/build-color-settings.js",
|
||||
"lib/colors/index.js",
|
||||
"lib/fonts/index.js",
|
||||
"lib/fonts/set-font-size.js",
|
||||
"lib/helper/to-camel-case.js",
|
||||
"lib/helper/toggle-class-name.js",
|
||||
"lib/helper/write-config-file.js",
|
||||
"lib/main.js",
|
||||
"lib/tab-bar/index.js",
|
||||
"lib/user-interface/index.js",
|
||||
"node_modules/tinycolor2/Gruntfile.js",
|
||||
"node_modules/tinycolor2/demo/jquery-1.9.1.js",
|
||||
"node_modules/tinycolor2/dist/tinycolor-min.js",
|
||||
"node_modules/tinycolor2/tinycolor.js"
|
||||
],
|
||||
".json": [
|
||||
"lib/color-templates.json",
|
||||
"node_modules/tinycolor2/bower.json",
|
||||
"node_modules/tinycolor2/package.json",
|
||||
"package.json"
|
||||
]
|
||||
},
|
||||
"folders": [
|
||||
{
|
||||
"paths": [
|
||||
"",
|
||||
"lib",
|
||||
"lib/colors",
|
||||
"lib/fonts",
|
||||
"lib/helper",
|
||||
"lib/tab-bar",
|
||||
"lib/user-interface",
|
||||
"spec/colors",
|
||||
"spec/fonts",
|
||||
"spec/helper"
|
||||
],
|
||||
"dependencies": {
|
||||
"tinycolor2": "1.3.0"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
'use babel';
|
||||
|
||||
import buildColorSettings from '../../lib/colors/build-color-settings';
|
||||
|
||||
describe('Settings string', () => {
|
||||
it('should return default values when no arguments are given', () => {
|
||||
const defaultSettings = buildColorSettings();
|
||||
|
||||
expect(typeof defaultSettings).toBe('string');
|
||||
expect(!!defaultSettings).not.toBe(false);
|
||||
|
||||
expect(defaultSettings.indexOf('@base-color: #009688'))
|
||||
.toBeGreaterThan(-1);
|
||||
|
||||
expect(defaultSettings.indexOf('@accent-color: #FFFFFF'))
|
||||
.toBeGreaterThan(-1);
|
||||
|
||||
expect(defaultSettings.indexOf('@accent-text-color: rgba(255,255,255,0.9)'))
|
||||
.toBeGreaterThan(-1);
|
||||
});
|
||||
|
||||
it('should return the selected @base-color', () => {
|
||||
expect(buildColorSettings('#FF0000').indexOf('@base-color: #FF0000'))
|
||||
.toBeGreaterThan(-1);
|
||||
});
|
||||
|
||||
it('should return the selected @base-color and @accent-color', () => {
|
||||
const customSettings = buildColorSettings('#FF0000', '#FAFAFA');
|
||||
|
||||
expect(customSettings.indexOf('@base-color: #FF0000'))
|
||||
.toBeGreaterThan(-1);
|
||||
|
||||
expect(customSettings.indexOf('@accent-color: #FAFAFA'))
|
||||
.toBeGreaterThan(-1);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
'use babel';
|
||||
|
||||
import setFontSize from '../../lib/fonts/set-font-size';
|
||||
|
||||
describe('Font size setter', () => {
|
||||
const root = document.documentElement;
|
||||
|
||||
it('should be able to change root element\'s font-size', () => {
|
||||
expect(root.style.fontSize).toBe('');
|
||||
setFontSize(22);
|
||||
expect(root.style.fontSize).toBe('22px');
|
||||
});
|
||||
|
||||
it('should be able to unset root element\'s font-size', () => {
|
||||
setFontSize(22);
|
||||
expect(root.style.fontSize).toBe('22px');
|
||||
setFontSize(null);
|
||||
expect(root.style.fontSize).toBe('');
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
'use babel';
|
||||
|
||||
import toCamelCase from '../../lib/helper/to-camel-case';
|
||||
|
||||
describe('camelCaseHelper', () => {
|
||||
it('should convert spaces to camelCase', () => {
|
||||
expect(toCamelCase('hello world')).toEqual('helloWorld');
|
||||
});
|
||||
|
||||
it('should convert lisp-case to camelCase', () => {
|
||||
expect(toCamelCase('hello-world')).toEqual('helloWorld');
|
||||
});
|
||||
|
||||
it('should convert snake_case to camelCase', () => {
|
||||
expect(toCamelCase('hello_world')).toEqual('helloWorld');
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
'use babel';
|
||||
|
||||
import toggleClassName from '../../lib/helper/toggle-class-name';
|
||||
|
||||
describe('className toggle helper', () => {
|
||||
const root = document.documentElement;
|
||||
|
||||
it('should add a className to the root element', () => {
|
||||
expect(root.classList.contains('testClass')).toBe(false);
|
||||
toggleClassName('testClass', true);
|
||||
expect(root.classList.contains('testClass')).toBe(true);
|
||||
});
|
||||
|
||||
it('should remove a className from the root element', () => {
|
||||
expect(root.classList.contains('testClass')).toBe(true);
|
||||
toggleClassName('testClass', false);
|
||||
expect(root.classList.contains('testClass')).toBe(false);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
.alert, .settings-view .alert {
|
||||
&-info, &-warning,
|
||||
&-error, &-success,
|
||||
&-danger {
|
||||
border-color: fade(@text-color, 5%);
|
||||
background-color: fade(@text-color, 2%);
|
||||
}
|
||||
|
||||
&-info {
|
||||
color: @text-color-info;
|
||||
}
|
||||
|
||||
&-warning {
|
||||
color: @text-color-warning;
|
||||
}
|
||||
|
||||
&-error, &-danger {
|
||||
color: @text-color-error;
|
||||
}
|
||||
|
||||
&-success {
|
||||
color: @text-color-success;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
atom-workspace {
|
||||
background-color: @app-background-color;
|
||||
font-size: .75rem;
|
||||
}
|
||||
|
||||
.scrollbars-visible-always {
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner,
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: @scrollbar-color;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
autocomplete-suggestion-list {
|
||||
&.select-list.popover-list {
|
||||
background: lighten(@app-background-color, 1.5%);
|
||||
.z-depth-2;
|
||||
|
||||
.suggestion-description {
|
||||
background: darken(@app-background-color, 2.5%);
|
||||
|
||||
span, a {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
a {
|
||||
color: @base-color;
|
||||
}
|
||||
}
|
||||
.suggestion-list-scroller {
|
||||
background: none;
|
||||
|
||||
ol li {
|
||||
background: none;
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.selected {
|
||||
background: @base-color;
|
||||
color: @accent-text-color;
|
||||
|
||||
.word-container span {
|
||||
color: @accent-text-color;
|
||||
}
|
||||
|
||||
.left-label {
|
||||
color: darken(@accent-text-color, 15%);
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
i.icon {
|
||||
background: @accent-text-color;
|
||||
color: @base-color;
|
||||
}
|
||||
}
|
||||
|
||||
.right-label {
|
||||
color: darken(@accent-text-color, 15%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
background-tips {
|
||||
ul.background-message {
|
||||
color: fade(@text-color, 20%);
|
||||
font-weight: 200;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
.btn-background (@color, @hover-color, @selected-color, @text-color) {
|
||||
color: @text-color;
|
||||
background: none;
|
||||
|
||||
&:focus {
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: @text-color-highlight;
|
||||
background: none;
|
||||
.z-depth-2;
|
||||
}
|
||||
|
||||
&:active, &:focus:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&.selected,
|
||||
&.selected:hover {
|
||||
color: @accent-text-color;
|
||||
background-color: @base-color;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-variant (@color) {
|
||||
@bg: darken(@color, 10%);
|
||||
@hover: @color;
|
||||
@selected: @color;
|
||||
.btn-background(@bg, @hover, @selected, @text-color-highlight);
|
||||
}
|
||||
|
||||
.btn {
|
||||
outline: none;
|
||||
transition: box-shadow 250ms;
|
||||
will-change: box-shadow;
|
||||
.z-depth-1;
|
||||
.btn-background(@button-background-color, @button-background-color-hover, @button-background-color-selected, @text-color);
|
||||
|
||||
&:focus, &:active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.btn-group & {
|
||||
box-shadow: none;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
align-items: center;
|
||||
.z-depth-1;
|
||||
}
|
||||
|
||||
.btn.btn-primary {
|
||||
.btn-variant(@base-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);
|
||||
}
|
||||
|
||||
.caret {
|
||||
border-top: 5px solid #fff;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
atom-dock {
|
||||
.amu-panel-shadows & {
|
||||
&.left, &.right {
|
||||
.item-views::after {
|
||||
content: '';
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
opacity: .05;
|
||||
top: 0;
|
||||
width: .25rem;
|
||||
z-index: 5;
|
||||
}
|
||||
}
|
||||
|
||||
&.left .item-views::after {
|
||||
background: linear-gradient(to left, black, transparent);
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&.right .item-views::after {
|
||||
background: linear-gradient(to right, black, transparent);
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.atom-dock {
|
||||
&-inner {
|
||||
position: relative;
|
||||
|
||||
&.bottom {
|
||||
.tab-bar:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-resize-handle {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
|
||||
&.left, &.right {
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&.left {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&.right {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&.top, &.bottom {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&.top {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&.bottom {
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-toggle-button {
|
||||
.atom-dock-toggle-button-inner {
|
||||
background-color: @base-color;
|
||||
color: @accent-text-color;
|
||||
}
|
||||
}
|
||||
|
||||
.amu-use-animations & {
|
||||
&-mask:not(:active) {
|
||||
transition:
|
||||
height 250ms @md-timing-function,
|
||||
width 250ms @md-timing-function;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
.dropdown-menu {
|
||||
background-color: @overlay-background-color;
|
||||
border-radius: 0;
|
||||
border: 1px solid @base-border-color;
|
||||
padding: 0;
|
||||
|
||||
> li > a {
|
||||
.text(normal);
|
||||
}
|
||||
|
||||
> li > a:hover {
|
||||
.text(highlight);
|
||||
background-color: @background-color-highlight;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
atom-text-editor[mini] {
|
||||
position: relative;
|
||||
color: @text-color-highlight;
|
||||
background-color: transparent;
|
||||
line-height: @component-line-height + @component-padding;
|
||||
max-height: none;
|
||||
box-shadow: inset 0 -1px 0 fade(@text-color, 5%);
|
||||
.md-underline(@base-color);
|
||||
|
||||
.amu-paint-cursor & {
|
||||
.cursor {
|
||||
border-color: @base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
atom-text-editor {
|
||||
.amu-paint-cursor & {
|
||||
.cursor {
|
||||
border-color: @base-color;
|
||||
}
|
||||
|
||||
.gutter .cursor-line {
|
||||
color: @accent-color;
|
||||
}
|
||||
|
||||
.gutter .cursor-line-no-selection {
|
||||
color: @base-color;
|
||||
}
|
||||
|
||||
.bracket-matcher .region {
|
||||
border-color: @base-color;
|
||||
box-shadow: inset 0 -1px 0 @base-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
// Thin
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('atom://atom-material-ui/assets/fonts/Roboto/roboto-thin-webfont.woff2') format('woff2');
|
||||
font-weight: 200;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('atom://atom-material-ui/assets/fonts/Roboto/roboto-thinitalic-webfont.woff2') format('woff2');
|
||||
font-weight: 200;
|
||||
font-style: italic;
|
||||
}
|
||||
// Light
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('atom://atom-material-ui/assets/fonts/Roboto/roboto-light-webfont.woff2') format('woff2');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('atom://atom-material-ui/assets/fonts/Roboto/roboto-lightitalic-webfont.woff2') format('woff2');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}
|
||||
// Regular
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('atom://atom-material-ui/assets/fonts/Roboto/roboto-regular-webfont.woff2') format('woff2');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('atom://atom-material-ui/assets/fonts/Roboto/roboto-italic-webfont.woff2') format('woff2');
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
}
|
||||
// Medium
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('atom://atom-material-ui/assets/fonts/Roboto/roboto-medium-webfont.woff2') format('woff2');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('atom://atom-material-ui/assets/fonts/Roboto/roboto-mediumitalic-webfont.woff2') format('woff2');
|
||||
font-weight: 600;
|
||||
font-style: italic;
|
||||
}
|
||||
// Bold
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('atom://atom-material-ui/assets/fonts/Roboto/roboto-bold-webfont.woff2') format('woff2');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('atom://atom-material-ui/assets/fonts/Roboto/roboto-bolditalic-webfont.woff2') format('woff2');
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
}
|
||||
// Black
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('atom://atom-material-ui/assets/fonts/Roboto/roboto-black-webfont.woff2') format('woff2');
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Roboto';
|
||||
src: url('atom://atom-material-ui/assets/fonts/Roboto/roboto-blackitalic-webfont.woff2') format('woff2');
|
||||
font-weight: 900;
|
||||
font-style: italic;
|
||||
}
|
||||
// Condensed Light
|
||||
@font-face {
|
||||
font-family: 'roboto_condensedlight';
|
||||
src: url('atom://atom-material-ui/assets/fonts/Roboto/robotocondensed-light-webfont.woff2') format('woff2');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-stretch: condensed;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'roboto_condensedlight_italic';
|
||||
src: url('atom://atom-material-ui/assets/fonts/Roboto/robotocondensed-lightitalic-webfont.woff2') format('woff2');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
font-stretch: condensed;
|
||||
}
|
||||
// Condensed Regular
|
||||
@font-face {
|
||||
font-family: 'roboto_condenseditalic';
|
||||
src: url('atom://atom-material-ui/assets/fonts/Roboto/robotocondensed-italic-webfont.woff2') format('woff2');
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
font-stretch: condensed;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'roboto_condensedregular';
|
||||
src: url('atom://atom-material-ui/assets/fonts/Roboto/robotocondensed-regular-webfont.woff2') format('woff2');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-stretch: condensed;
|
||||
}
|
||||
// Condensed Bold
|
||||
@font-face {
|
||||
font-family: 'roboto_condensedbold';
|
||||
src: url('atom://atom-material-ui/assets/fonts/Roboto/robotocondensed-bold-webfont.woff2') format('woff2');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-stretch: condensed;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'roboto_condensedbold_italic';
|
||||
src: url('atom://atom-material-ui/assets/fonts/Roboto/robotocondensed-bolditalic-webfont.woff2') format('woff2');
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
font-stretch: condensed;
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
.fuzzy-finder, .command-palette {
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
.status { .text(normal); }
|
||||
.status-added { .text(success); }
|
||||
.status-ignored { .text(subtle); }
|
||||
.status-modified { .text(warning); }
|
||||
.status-removed { .text(error); }
|
||||
.status-renamed { .text(info); }
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
.github-Panel {
|
||||
.github-CommitView, .github-CommitView > *,
|
||||
.github-CommitView atom-text-editor {
|
||||
background: darken(@app-background-color, 1.5%);
|
||||
}
|
||||
|
||||
.github-CommitView-button {
|
||||
background-color: @base-color;
|
||||
color: @accent-text-color;
|
||||
|
||||
&[disabled] {
|
||||
background-color: transparent;
|
||||
color: @text-color;
|
||||
}
|
||||
|
||||
&[disabled]:hover {
|
||||
box-shadow: none;
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
.incompatible-packages {
|
||||
padding: 1rem;
|
||||
|
||||
.alert {
|
||||
display: flex;
|
||||
|
||||
.btn.pull-right {
|
||||
float: none !important;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.incompatible-package {
|
||||
padding: 1rem;
|
||||
border: none;
|
||||
border-radius: 0.125rem;
|
||||
background: lighten(@app-background-color, 5%);
|
||||
margin: 1rem 0;
|
||||
.z-depth-1;
|
||||
|
||||
.heading {
|
||||
margin-bottom: 0;
|
||||
color: @text-color;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 200;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
.btn, button {
|
||||
margin: 0;
|
||||
box-shadow: none;
|
||||
background: none;
|
||||
|
||||
&:hover {
|
||||
.z-depth-1;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
line-height: 2.5rem;
|
||||
margin: 1rem 0 0;
|
||||
padding: 0 0 0 0.5rem;
|
||||
|
||||
.icon {
|
||||
span {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
&::before {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
background: lighten(@app-background-color, 3%);
|
||||
border-radius: 0;
|
||||
margin: 1rem -1rem -1rem;
|
||||
width: ~"calc(100% + 2rem)";
|
||||
color: @text-color;
|
||||
padding: 1rem;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.badge {
|
||||
margin: 0 0 0 1rem;
|
||||
top: 0.3rem;
|
||||
padding: .25rem 1rem .25rem .5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: .75rem;
|
||||
|
||||
&::before {
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
&.badge-info {
|
||||
background-color: @text-color-info;
|
||||
padding-right: 1rem;
|
||||
|
||||
&::before {
|
||||
-webkit-animation: spin 1s linear infinite;
|
||||
content: '\f087';
|
||||
}
|
||||
}
|
||||
|
||||
&.badge-success {
|
||||
background-color: @text-color-success;
|
||||
}
|
||||
|
||||
&.badge-error {
|
||||
background-color: @text-color-error;
|
||||
}
|
||||
|
||||
&.badge-warning {
|
||||
background-color: @text-color-warning;
|
||||
color: darken(@text-color-warning, 30%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
@import "octicon-mixins.less"; // https://github.com/atom/atom/blob/master/static/variables/octicon-mixins.less
|
||||
|
||||
.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-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;
|
||||
}
|
||||
}
|
||||
|
||||
.list-group, .list-tree {
|
||||
li:not(.list-nested-item),
|
||||
li.list-nested-item > .list-item {
|
||||
.text(normal);
|
||||
}
|
||||
|
||||
.icon::before {
|
||||
font-size: 1.35em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.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(@text-color-subtle, ignored);
|
||||
.generate-list-item-status-color(@text-color-added, added);
|
||||
.generate-list-item-status-color(@text-color-renamed, renamed);
|
||||
.generate-list-item-status-color(@text-color-modified, modified);
|
||||
.generate-list-item-status-color(@text-color-removed, removed);
|
||||
|
||||
li:not(.list-nested-item).selected,
|
||||
li.list-nested-item.selected > .list-item {
|
||||
.text(selected);
|
||||
|
||||
&:not(.header)::before {
|
||||
background: fade(@text-color, 5%);
|
||||
}
|
||||
|
||||
:focus & {
|
||||
color: @accent-text-color;
|
||||
|
||||
&::before {
|
||||
background: @base-color;
|
||||
}
|
||||
|
||||
&.status-modified {
|
||||
color: darken(@text-color-modified, 30%);
|
||||
|
||||
&::before {
|
||||
background: @text-color-modified;
|
||||
}
|
||||
}
|
||||
|
||||
&.status-added {
|
||||
color: darken(@text-color-success, 30%);
|
||||
|
||||
&::before {
|
||||
background: @text-color-success;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.character-match {
|
||||
color: @accent-text-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.select-list ol.list-group,
|
||||
&.select-list ol.list-group {
|
||||
li.two-lines {
|
||||
.secondary-line { color: @text-color-subtle; }
|
||||
|
||||
&.selected .secondary-line {
|
||||
color: fade(@accent-text-color, 50%);
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// We want to highlight the background of the list items because we dont
|
||||
// know their size.
|
||||
li.selected {
|
||||
background-color: @base-color;
|
||||
color: @accent-text-color;
|
||||
|
||||
&::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;
|
||||
}
|
||||
|
||||
> li:not(.active)::before {
|
||||
margin-right: @component-icon-padding;
|
||||
}
|
||||
|
||||
li.active {
|
||||
.octicon(check, @active-icon-size);
|
||||
|
||||
&::before {
|
||||
margin-right: @component-icon-padding;
|
||||
color: @text-color-success;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-group .selected::before, .list-tree .selected::before {
|
||||
background-color: fade(@text-color, 5%);
|
||||
|
||||
.focus & {
|
||||
background-color: @base-color;
|
||||
}
|
||||
}
|
||||
|
||||
.select-list.popover-list {
|
||||
background-color: @overlay-background-color;
|
||||
box-shadow: 0 0 10px @base-border-color;
|
||||
padding: @component-padding/2;
|
||||
border-radius: @component-border-radius;
|
||||
border: 1px solid @overlay-border-color;
|
||||
|
||||
atom-text-editor {
|
||||
margin-bottom: @component-padding/2;
|
||||
}
|
||||
|
||||
.list-group li {
|
||||
padding-left: @component-padding/2;
|
||||
}
|
||||
}
|
||||
|
||||
.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: @component-line-height;
|
||||
height: @component-line-height;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
list-style: none;
|
||||
padding: 0 @component-padding;
|
||||
background: @background-color-highlight;
|
||||
box-shadow: 0 0 1px @base-border-color;
|
||||
}
|
||||
|
|
@ -0,0 +1,307 @@
|
|||
// Google Material Design colors
|
||||
|
||||
// Red
|
||||
@md-red-50: #FFEBEE;
|
||||
@md-red-100: #FFCDD2;
|
||||
@md-red-200: #EF9A9A;
|
||||
@md-red-300: #E57373;
|
||||
@md-red-400: #EF5350;
|
||||
@md-red-500: #F44336;
|
||||
@md-red-600: #E53935;
|
||||
@md-red-700: #D32F2F;
|
||||
@md-red-800: #C62828;
|
||||
@md-red-900: #B71C1C;
|
||||
@md-red-A100: #FF8A80;
|
||||
@md-red-A200: #FF5252;
|
||||
@md-red-A400: #FF1744;
|
||||
@md-red-A700: #D50000;
|
||||
|
||||
// Pink
|
||||
@md-pink-50: #FCE4EC;
|
||||
@md-pink-100: #F8BBD0;
|
||||
@md-pink-200: #F48FB1;
|
||||
@md-pink-300: #F06292;
|
||||
@md-pink-400: #EC407A;
|
||||
@md-pink-500: #E91E63;
|
||||
@md-pink-600: #D81B60;
|
||||
@md-pink-700: #C2185B;
|
||||
@md-pink-800: #AD1457;
|
||||
@md-pink-900: #880E4F;
|
||||
@md-pink-A100: #FF80AB;
|
||||
@md-pink-A200: #FF4081;
|
||||
@md-pink-A400: #F50057;
|
||||
@md-pink-A700: #C51162;
|
||||
|
||||
// Purple
|
||||
@md-purple-50: #F3E5F5;
|
||||
@md-purple-100: #E1BEE7;
|
||||
@md-purple-200: #CE93D8;
|
||||
@md-purple-300: #BA68C8;
|
||||
@md-purple-400: #AB47BC;
|
||||
@md-purple-500: #9C27B0;
|
||||
@md-purple-600: #8E24AA;
|
||||
@md-purple-700: #7B1FA2;
|
||||
@md-purple-800: #6A1B9A;
|
||||
@md-purple-900: #4A148C;
|
||||
@md-purple-A100: #EA80FC;
|
||||
@md-purple-A200: #E040FB;
|
||||
@md-purple-A400: #D500F9;
|
||||
@md-purple-A700: #AA00FF;
|
||||
|
||||
// Deep Purple
|
||||
@md-deep-purple-50: #EDE7F6;
|
||||
@md-deep-purple-100: #D1C4E9;
|
||||
@md-deep-purple-200: #B39DDB;
|
||||
@md-deep-purple-300: #9575CD;
|
||||
@md-deep-purple-400: #7E57C2;
|
||||
@md-deep-purple-500: #673AB7;
|
||||
@md-deep-purple-600: #5E35B1;
|
||||
@md-deep-purple-700: #512DA8;
|
||||
@md-deep-purple-800: #4527A0;
|
||||
@md-deep-purple-900: #311B92;
|
||||
@md-deep-purple-A100: #B388FF;
|
||||
@md-deep-purple-A200: #7C4DFF;
|
||||
@md-deep-purple-A400: #651FFF;
|
||||
@md-deep-purple-A700: #6200EA;
|
||||
|
||||
// Indigo
|
||||
@md-indigo-50: #E8EAF6;
|
||||
@md-indigo-100: #C5CAE9;
|
||||
@md-indigo-200: #9FA8DA;
|
||||
@md-indigo-300: #7986CB;
|
||||
@md-indigo-400: #5C6BC0;
|
||||
@md-indigo-500: #3F51B5;
|
||||
@md-indigo-600: #3949AB;
|
||||
@md-indigo-700: #303F9F;
|
||||
@md-indigo-800: #283593;
|
||||
@md-indigo-900: #1A237E;
|
||||
@md-indigo-A100: #8C9EFF;
|
||||
@md-indigo-A200: #536DFE;
|
||||
@md-indigo-A400: #3D5AFE;
|
||||
@md-indigo-A700: #304FFE;
|
||||
|
||||
// Blue
|
||||
@md-blue-50: #E3F2FD;
|
||||
@md-blue-100: #BBDEFB;
|
||||
@md-blue-200: #90CAF9;
|
||||
@md-blue-300: #64B5F6;
|
||||
@md-blue-400: #42A5F5;
|
||||
@md-blue-500: #2196F3;
|
||||
@md-blue-600: #1E88E5;
|
||||
@md-blue-700: #1976D2;
|
||||
@md-blue-800: #1565C0;
|
||||
@md-blue-900: #0D47A1;
|
||||
@md-blue-A100: #82B1FF;
|
||||
@md-blue-A200: #448AFF;
|
||||
@md-blue-A400: #2979FF;
|
||||
@md-blue-A700: #2962FF;
|
||||
|
||||
// Light Blue
|
||||
@md-light-blue-50: #E1F5FE;
|
||||
@md-light-blue-100: #B3E5FC;
|
||||
@md-light-blue-200: #81D4FA;
|
||||
@md-light-blue-300: #4FC3F7;
|
||||
@md-light-blue-400: #29B6F6;
|
||||
@md-light-blue-500: #03A9F4;
|
||||
@md-light-blue-600: #039BE5;
|
||||
@md-light-blue-700: #0288D1;
|
||||
@md-light-blue-800: #0277BD;
|
||||
@md-light-blue-900: #01579B;
|
||||
@md-light-blue-A100: #80D8FF;
|
||||
@md-light-blue-A200: #40C4FF;
|
||||
@md-light-blue-A400: #00B0FF;
|
||||
@md-light-blue-A700: #0091EA;
|
||||
|
||||
// Cyan
|
||||
@md-cyan-50: #E0F7FA;
|
||||
@md-cyan-100: #B2EBF2;
|
||||
@md-cyan-200: #80DEEA;
|
||||
@md-cyan-300: #4DD0E1;
|
||||
@md-cyan-400: #26C6DA;
|
||||
@md-cyan-500: #00BCD4;
|
||||
@md-cyan-600: #00ACC1;
|
||||
@md-cyan-700: #0097A7;
|
||||
@md-cyan-800: #00838F;
|
||||
@md-cyan-900: #006064;
|
||||
@md-cyan-A100: #84FFFF;
|
||||
@md-cyan-A200: #18FFFF;
|
||||
@md-cyan-A400: #00E5FF;
|
||||
@md-cyan-A700: #00B8D4;
|
||||
|
||||
// Teal
|
||||
@md-teal-50: #E0F2F1;
|
||||
@md-teal-100: #B2DFDB;
|
||||
@md-teal-200: #80CBC4;
|
||||
@md-teal-300: #4DB6AC;
|
||||
@md-teal-400: #26A69A;
|
||||
@md-teal-500: #009688;
|
||||
@md-teal-600: #00897B;
|
||||
@md-teal-700: #00796B;
|
||||
@md-teal-800: #00695C;
|
||||
@md-teal-900: #004D40;
|
||||
@md-teal-A100: #A7FFEB;
|
||||
@md-teal-A200: #64FFDA;
|
||||
@md-teal-A400: #1DE9B6;
|
||||
@md-teal-A700: #00BFA5;
|
||||
|
||||
// Green
|
||||
@md-green-50: #E8F5E9;
|
||||
@md-green-100: #C8E6C9;
|
||||
@md-green-200: #A5D6A7;
|
||||
@md-green-300: #81C784;
|
||||
@md-green-400: #66BB6A;
|
||||
@md-green-500: #4CAF50;
|
||||
@md-green-600: #43A047;
|
||||
@md-green-700: #388E3C;
|
||||
@md-green-800: #2E7D32;
|
||||
@md-green-900: #1B5E20;
|
||||
@md-green-A100: #B9F6CA;
|
||||
@md-green-A200: #69F0AE;
|
||||
@md-green-A400: #00E676;
|
||||
@md-green-A700: #00C853;
|
||||
|
||||
// Light Green
|
||||
@md-light-green-50: #F1F8E9;
|
||||
@md-light-green-100: #DCEDC8;
|
||||
@md-light-green-200: #C5E1A5;
|
||||
@md-light-green-300: #AED581;
|
||||
@md-light-green-400: #9CCC65;
|
||||
@md-light-green-500: #8BC34A;
|
||||
@md-light-green-600: #7CB342;
|
||||
@md-light-green-700: #689F38;
|
||||
@md-light-green-800: #558B2F;
|
||||
@md-light-green-900: #33691E;
|
||||
@md-light-green-A100: #CCFF90;
|
||||
@md-light-green-A200: #B2FF59;
|
||||
@md-light-green-A400: #76FF03;
|
||||
@md-light-green-A700: #64DD17;
|
||||
|
||||
// Lime
|
||||
@md-lime-50: #F9FBE7;
|
||||
@md-lime-100: #F0F4C3;
|
||||
@md-lime-200: #E6EE9C;
|
||||
@md-lime-300: #DCE775;
|
||||
@md-lime-400: #D4E157;
|
||||
@md-lime-500: #CDDC39;
|
||||
@md-lime-600: #C0CA33;
|
||||
@md-lime-700: #AFB42B;
|
||||
@md-lime-800: #9E9D24;
|
||||
@md-lime-900: #827717;
|
||||
@md-lime-A100: #F4FF81;
|
||||
@md-lime-A200: #EEFF41;
|
||||
@md-lime-A400: #C6FF00;
|
||||
@md-lime-A700: #AEEA00;
|
||||
|
||||
// Yellow
|
||||
@md-yellow-50: #FFFDE7;
|
||||
@md-yellow-100: #FFF9C4;
|
||||
@md-yellow-200: #FFF59D;
|
||||
@md-yellow-300: #FFF176;
|
||||
@md-yellow-400: #FFEE58;
|
||||
@md-yellow-500: #FFEB3B;
|
||||
@md-yellow-600: #FDD835;
|
||||
@md-yellow-700: #FBC02D;
|
||||
@md-yellow-800: #F9A825;
|
||||
@md-yellow-900: #F57F17;
|
||||
@md-yellow-A100: #FFFF8D;
|
||||
@md-yellow-A200: #FFFF00;
|
||||
@md-yellow-A400: #FFEA00;
|
||||
@md-yellow-A700: #FFD600;
|
||||
|
||||
// Amber
|
||||
@md-amber-50: #FFF8E1;
|
||||
@md-amber-100: #FFECB3;
|
||||
@md-amber-200: #FFE082;
|
||||
@md-amber-300: #FFD54F;
|
||||
@md-amber-400: #FFCA28;
|
||||
@md-amber-500: #FFC107;
|
||||
@md-amber-600: #FFB300;
|
||||
@md-amber-700: #FFA000;
|
||||
@md-amber-800: #FF8F00;
|
||||
@md-amber-900: #FF6F00;
|
||||
@md-amber-A100: #FFE57F;
|
||||
@md-amber-A200: #FFD740;
|
||||
@md-amber-A400: #FFC400;
|
||||
@md-amber-A700: #FFAB00;
|
||||
|
||||
// Orange
|
||||
@md-orange-50: #FFF3E0;
|
||||
@md-orange-100: #FFE0B2;
|
||||
@md-orange-200: #FFCC80;
|
||||
@md-orange-300: #FFB74D;
|
||||
@md-orange-400: #FFA726;
|
||||
@md-orange-500: #FF9800;
|
||||
@md-orange-600: #FB8C00;
|
||||
@md-orange-700: #F57C00;
|
||||
@md-orange-800: #EF6C00;
|
||||
@md-orange-900: #E65100;
|
||||
@md-orange-A100: #FFD180;
|
||||
@md-orange-A200: #FFAB40;
|
||||
@md-orange-A400: #FF9100;
|
||||
@md-orange-A700: #FF6D00;
|
||||
|
||||
// Deep Orange
|
||||
@md-deep-orange-50: #FBE9E7;
|
||||
@md-deep-orange-100: #FFCCBC;
|
||||
@md-deep-orange-200: #FFAB91;
|
||||
@md-deep-orange-300: #FF8A65;
|
||||
@md-deep-orange-400: #FF7043;
|
||||
@md-deep-orange-500: #FF5722;
|
||||
@md-deep-orange-600: #F4511E;
|
||||
@md-deep-orange-700: #E64A19;
|
||||
@md-deep-orange-800: #D84315;
|
||||
@md-deep-orange-900: #BF360C;
|
||||
@md-deep-orange-A100: #FF9E80;
|
||||
@md-deep-orange-A200: #FF6E40;
|
||||
@md-deep-orange-A400: #FF3D00;
|
||||
@md-deep-orange-A700: #DD2C00;
|
||||
|
||||
// Brown
|
||||
@md-brown-50: #EFEBE9;
|
||||
@md-brown-100: #D7CCC8;
|
||||
@md-brown-200: #BCAAA4;
|
||||
@md-brown-300: #A1887F;
|
||||
@md-brown-400: #8D6E63;
|
||||
@md-brown-500: #795548;
|
||||
@md-brown-600: #6D4C41;
|
||||
@md-brown-700: #5D4037;
|
||||
@md-brown-800: #4E342E;
|
||||
@md-brown-900: #3E2723;
|
||||
|
||||
// Grey
|
||||
@md-grey-50: #FAFAFA;
|
||||
@md-grey-100: #F5F5F5;
|
||||
@md-grey-200: #EEEEEE;
|
||||
@md-grey-300: #E0E0E0;
|
||||
@md-grey-400: #BDBDBD;
|
||||
@md-grey-500: #9E9E9E;
|
||||
@md-grey-600: #757575;
|
||||
@md-grey-700: #616161;
|
||||
@md-grey-800: #424242;
|
||||
@md-grey-900: #212121;
|
||||
|
||||
// Blue Grey
|
||||
@md-blue-grey-50: #ECEFF1;
|
||||
@md-blue-grey-100: #CFD8DC;
|
||||
@md-blue-grey-200: #B0BEC5;
|
||||
@md-blue-grey-300: #90A4AE;
|
||||
@md-blue-grey-400: #78909C;
|
||||
@md-blue-grey-500: #607D8B;
|
||||
@md-blue-grey-600: #546E7A;
|
||||
@md-blue-grey-700: #455A64;
|
||||
@md-blue-grey-800: #37474F;
|
||||
@md-blue-grey-900: #263238;
|
||||
|
||||
// Alpha values for grey text, icons, and divider
|
||||
|
||||
// White
|
||||
@md-white-lighter: rgba(255,255,255,.12); // Dividers
|
||||
@md-white-light: rgba(255,255,255,.30); // Disabled / Hint Text
|
||||
@md-white-dark: rgba(255,255,255,.70); // Secondary Text
|
||||
@md-white-darker: rgba(255,255,255, 1); // Text / Icons
|
||||
|
||||
// Black
|
||||
@md-black-lighter: rgba(0,0,0,.12); // Dividers
|
||||
@md-black-light: rgba(0,0,0,.26); // Disabled / Hint Text
|
||||
@md-black-dark: rgba(0,0,0,.54); // Secondary text / Icons
|
||||
@md-black-darker: rgba(0,0,0,.87); // Text
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
ul.background-message {
|
||||
font-weight: bold;
|
||||
color: rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
.nav-tabs {
|
||||
border-bottom: 1px solid @base-border-color;
|
||||
|
||||
li {
|
||||
&.active a,
|
||||
a {
|
||||
border: none;
|
||||
margin-right: 0;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
&.active a,
|
||||
&.active a:hover,
|
||||
a:hover {
|
||||
background-color: @background-color-highlight;
|
||||
border: none;
|
||||
color: @text-color-selected;
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
&.active a {
|
||||
background-color: @tab-background-color-active;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,167 @@
|
|||
atom-notifications {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
flex-flow: column-reverse;
|
||||
padding: 2rem 0.5rem;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
atom-notification {
|
||||
padding: 0 !important;
|
||||
border-radius: 0 0.125rem 0.125rem 0;
|
||||
|
||||
.content {
|
||||
border-radius: 0.125rem;
|
||||
width: 100%;
|
||||
|
||||
> div {
|
||||
padding: 1.25rem 2rem;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.message + .detail {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.detail + .meta {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-toolbar {
|
||||
line-height: 3rem;
|
||||
|
||||
.btn {
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
.btn-copy-report {
|
||||
color: @text-color;
|
||||
line-height: 1;
|
||||
position: relative;
|
||||
top: -0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.detail {
|
||||
background: none;
|
||||
}
|
||||
|
||||
.item {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.close-all.btn {
|
||||
height: 1.75rem !important;
|
||||
line-height: 1.75rem !important;
|
||||
border: none !important;
|
||||
color: @text-color !important;
|
||||
padding: 0 0.5rem !important;
|
||||
}
|
||||
|
||||
&.icon::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.close, .close:hover {
|
||||
color: @text-color !important;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.success, &.error, &.info, &.warning, &.fatal {
|
||||
border-left: 0.125rem solid transparent;
|
||||
|
||||
.content {
|
||||
background-color: darken(@app-background-color, 5%) !important;
|
||||
color: @text-color !important;
|
||||
}
|
||||
|
||||
.close-all.btn, .close-all.btn:hover {
|
||||
border-color: transparent;
|
||||
color: fade(@text-color, 50%);
|
||||
box-shadow: none;
|
||||
line-height: 1.65rem;
|
||||
|
||||
&:hover {
|
||||
.z-depth-1;
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: lighten(@text-color-error, 5%);
|
||||
color: #FFF;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
max-width: 18rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: @text-color;
|
||||
|
||||
&-success, &-primary {
|
||||
color: #FFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.success {
|
||||
border-color: @text-color-success;
|
||||
|
||||
a {
|
||||
color: @text-color-success;
|
||||
}
|
||||
}
|
||||
|
||||
&.error, &.fatal {
|
||||
border-color: @text-color-error;
|
||||
|
||||
a {
|
||||
color: @text-color-error;
|
||||
}
|
||||
}
|
||||
|
||||
&.info {
|
||||
border-color: @text-color-info;
|
||||
|
||||
a {
|
||||
color: @text-color-info;
|
||||
}
|
||||
}
|
||||
|
||||
&.warning {
|
||||
border-color: @text-color-warning;
|
||||
|
||||
a {
|
||||
color: @text-color-warning;
|
||||
}
|
||||
}
|
||||
|
||||
&.has-close {
|
||||
.content > div {
|
||||
padding-right: 4rem;
|
||||
}
|
||||
|
||||
&:only-child {
|
||||
.content > div {
|
||||
padding-right: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child:not(:only-child) {
|
||||
.content > div:first-child {
|
||||
padding-top: 3rem;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.has-stack .stack-toggle {
|
||||
color: @text-color-error;
|
||||
|
||||
.icon {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
.overlay,
|
||||
atom-panel.modal {
|
||||
color: @text-color;
|
||||
background-color: @overlay-background-color;
|
||||
font-size: @font-size;
|
||||
padding: @component-padding;
|
||||
box-shadow: 0 0 10px @base-border-color;
|
||||
border-radius: @component-border-radius;
|
||||
overflow: hidden;
|
||||
.z-depth-3;
|
||||
|
||||
atom-text-editor[mini] {
|
||||
margin-bottom: @component-padding;
|
||||
}
|
||||
|
||||
&.select-list ol.list-group,
|
||||
.select-list ol.list-group {
|
||||
margin: 0 -@component-padding -@component-padding;
|
||||
|
||||
li {
|
||||
padding: @component-padding;
|
||||
border-bottom: 1px solid fade(@text-color, 2.5%);
|
||||
|
||||
&.two-lines {
|
||||
padding: @component-padding/2 @component-padding;
|
||||
}
|
||||
|
||||
.status.icon {
|
||||
float: right;
|
||||
margin-left: @component-icon-padding;
|
||||
|
||||
&::before {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
.status.icon {
|
||||
color: @text-color-selected;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue