mirror of
https://github.com/pulsar-edit/pulsar.git
synced 2024-09-11 19:17:09 +03:00
Bundle styleguide
This commit is contained in:
parent
619d1aae32
commit
d08dc785ce
@ -154,7 +154,7 @@
|
||||
"solarized-light-syntax": "file:packages/solarized-light-syntax",
|
||||
"spell-check": "https://codeload.github.com/atom/spell-check/legacy.tar.gz/refs/tags/v0.77.1",
|
||||
"status-bar": "file:packages/status-bar",
|
||||
"styleguide": "https://codeload.github.com/atom/styleguide/legacy.tar.gz/refs/tags/v0.49.12",
|
||||
"styleguide": "file:./packages/styleguide",
|
||||
"superstring": "^2.4.4",
|
||||
"symbols-view": "file:./packages/symbols-view",
|
||||
"tabs": "file:packages/tabs",
|
||||
|
1
packages/styleguide/.gitignore
vendored
Normal file
1
packages/styleguide/.gitignore
vendored
Normal file
@ -0,0 +1 @@
|
||||
node_modules
|
8
packages/styleguide/README.md
Normal file
8
packages/styleguide/README.md
Normal file
@ -0,0 +1,8 @@
|
||||
# Styleguide package
|
||||
|
||||
Styleguide will show you all the UI components used in Pulsar. It is useful as a reference when developing themes and packages.
|
||||
|
||||
* <kbd>cmd-ctrl-shift-g</kbd> (macOS) and <kbd>ctrl-shift-g</kbd> (Windows and Linux) opens it in a new tab
|
||||
* You can click on the section headings to expand/collapse them
|
||||
|
||||
![Demo](https://cloud.githubusercontent.com/assets/378023/15767543/ccecf9bc-2983-11e6-9c5e-d228d39f52b0.png)
|
5
packages/styleguide/keymaps/styleguide.cson
Normal file
5
packages/styleguide/keymaps/styleguide.cson
Normal file
@ -0,0 +1,5 @@
|
||||
'.platform-darwin':
|
||||
'cmd-ctrl-G': 'styleguide:show'
|
||||
|
||||
'.platform-win32, .platform-linux':
|
||||
'ctrl-G': 'styleguide:show'
|
17
packages/styleguide/lib/code-block.js
Normal file
17
packages/styleguide/lib/code-block.js
Normal file
@ -0,0 +1,17 @@
|
||||
const {TextEditor} = require('atom')
|
||||
|
||||
module.exports =
|
||||
class CodeBlock {
|
||||
constructor (props) {
|
||||
this.editor = new TextEditor({readonly: true, keyboardInputEnabled: false})
|
||||
this.element = document.createElement('div')
|
||||
this.element.appendChild(this.editor.getElement())
|
||||
atom.grammars.assignLanguageMode(this.editor, props.grammarScopeName)
|
||||
this.update(props)
|
||||
}
|
||||
|
||||
update ({cssClass, code}) {
|
||||
this.editor.setText(code)
|
||||
this.element.classList.add(cssClass)
|
||||
}
|
||||
}
|
68
packages/styleguide/lib/example-select-list-view.js
Normal file
68
packages/styleguide/lib/example-select-list-view.js
Normal file
@ -0,0 +1,68 @@
|
||||
/** @babel */
|
||||
/** @jsx etch.dom */
|
||||
|
||||
import SelectListView from 'atom-select-list'
|
||||
import etch from 'etch'
|
||||
import dedent from 'dedent'
|
||||
import CodeBlock from './code-block'
|
||||
|
||||
export default class ExampleSelectListView {
|
||||
constructor () {
|
||||
this.jsExampleCode = dedent`
|
||||
import SelectListView from 'atom-select-list'
|
||||
|
||||
const selectListView = new SelectListView({
|
||||
items: ['one', 'two', 'three'],
|
||||
elementForItem: (item) => {
|
||||
const li = document.createElement('li')
|
||||
li.textContent = item
|
||||
return li
|
||||
},
|
||||
didConfirmSelection: (item) => {
|
||||
console.log('confirmed', item)
|
||||
},
|
||||
didCancelSelection: () => {
|
||||
console.log('cancelled')
|
||||
}
|
||||
})
|
||||
`
|
||||
etch.initialize(this)
|
||||
}
|
||||
|
||||
elementForItem (item) {
|
||||
const li = document.createElement('li')
|
||||
li.textContent = item
|
||||
return li
|
||||
}
|
||||
|
||||
didConfirmSelection (item) {
|
||||
console.log('confirmed', item)
|
||||
}
|
||||
|
||||
didCancelSelection () {
|
||||
console.log('cancelled')
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<div className='example'>
|
||||
<div className='example-rendered'>
|
||||
<atom-panel className='modal'>
|
||||
<SelectListView
|
||||
items={['one', 'two', 'three']}
|
||||
elementForItem={this.elementForItem.bind(this)}
|
||||
onDidConfirmSelection={this.didConfirmSelection.bind(this)}
|
||||
onDidCancelSelection={this.didCancelSelection.bind(this)} />
|
||||
</atom-panel>
|
||||
</div>
|
||||
<div className='example-code show-example-space-pen'>
|
||||
<CodeBlock cssClass='example-space-pen' grammarScopeName='source.js' code={this.jsExampleCode} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
update () {
|
||||
|
||||
}
|
||||
}
|
73
packages/styleguide/lib/styleguide-section.js
Normal file
73
packages/styleguide/lib/styleguide-section.js
Normal file
@ -0,0 +1,73 @@
|
||||
/** @babel */
|
||||
/** @jsx etch.dom */
|
||||
|
||||
import etch from 'etch'
|
||||
|
||||
export default class StyleguideSection {
|
||||
constructor (props, children) {
|
||||
this.collapsed = props.collapsed
|
||||
this.title = props.title
|
||||
this.name = props.name
|
||||
this.children = children
|
||||
etch.initialize(this)
|
||||
if (props.onDidInitialize) {
|
||||
props.onDidInitialize(this)
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
if (this.loaded) {
|
||||
let className = 'bordered'
|
||||
if (this.collapsed) {
|
||||
className += ' collapsed'
|
||||
}
|
||||
return (
|
||||
<section className={className} dataset={{name: this.name}}>
|
||||
<h1 className='section-heading' onclick={() => this.toggle()}>{this.title}</h1>
|
||||
{this.children}
|
||||
</section>
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<section className='bordered collapsed' dataset={{name: this.name}}>
|
||||
<h1 className='section-heading' onclick={() => this.toggle()}>{this.title}</h1>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
update (props, children) {
|
||||
if (props.title) {
|
||||
this.title = props.title
|
||||
}
|
||||
|
||||
if (props.name) {
|
||||
this.name = props.name
|
||||
}
|
||||
|
||||
if (children) {
|
||||
this.children = children
|
||||
}
|
||||
|
||||
if (props.didExpandOrCollapseSection) {
|
||||
this.didExpandOrCollapseSection = props.onDidExpandOrCollapseSection
|
||||
}
|
||||
|
||||
return etch.update(this)
|
||||
}
|
||||
|
||||
toggle () {
|
||||
return this.collapsed ? this.expand() : this.collapse()
|
||||
}
|
||||
|
||||
expand () {
|
||||
this.collapsed = false
|
||||
this.loaded = true
|
||||
return etch.update(this)
|
||||
}
|
||||
|
||||
collapse () {
|
||||
this.collapsed = true
|
||||
return etch.update(this)
|
||||
}
|
||||
}
|
1266
packages/styleguide/lib/styleguide-view.js
Normal file
1266
packages/styleguide/lib/styleguide-view.js
Normal file
File diff suppressed because it is too large
Load Diff
24
packages/styleguide/lib/styleguide.js
Normal file
24
packages/styleguide/lib/styleguide.js
Normal file
@ -0,0 +1,24 @@
|
||||
const {CompositeDisposable} = require('atom')
|
||||
let StyleguideView = null
|
||||
|
||||
const STYLEGUIDE_URI = 'atom://styleguide'
|
||||
|
||||
module.exports = {
|
||||
activate () {
|
||||
this.subscriptions = new CompositeDisposable()
|
||||
this.subscriptions.add(atom.workspace.addOpener(filePath => {
|
||||
if (filePath === STYLEGUIDE_URI) return this.createStyleguideView({uri: STYLEGUIDE_URI})
|
||||
}))
|
||||
this.subscriptions.add(atom.commands.add('atom-workspace', 'styleguide:show', () => atom.workspace.open(STYLEGUIDE_URI))
|
||||
)
|
||||
},
|
||||
|
||||
deactivate () {
|
||||
this.subscriptions.dispose()
|
||||
},
|
||||
|
||||
createStyleguideView (state) {
|
||||
if (StyleguideView == null) StyleguideView = require('./styleguide-view')
|
||||
return new StyleguideView(state)
|
||||
}
|
||||
}
|
10
packages/styleguide/menus/styleguide.cson
Normal file
10
packages/styleguide/menus/styleguide.cson
Normal file
@ -0,0 +1,10 @@
|
||||
'menu': [
|
||||
'label': 'Packages'
|
||||
'submenu': [
|
||||
'label': 'Styleguide'
|
||||
'submenu': [
|
||||
'label': 'Show'
|
||||
'command': 'styleguide:show'
|
||||
]
|
||||
]
|
||||
]
|
50
packages/styleguide/package-lock.json
generated
Normal file
50
packages/styleguide/package-lock.json
generated
Normal file
@ -0,0 +1,50 @@
|
||||
{
|
||||
"name": "styleguide",
|
||||
"version": "0.49.12",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "styleguide",
|
||||
"version": "0.49.12",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"atom-select-list": "^0.7.0",
|
||||
"dedent": "^0.7.0",
|
||||
"etch": "0.9.0"
|
||||
},
|
||||
"engines": {
|
||||
"atom": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/atom-select-list": {
|
||||
"version": "0.7.2",
|
||||
"resolved": "https://registry.npmjs.org/atom-select-list/-/atom-select-list-0.7.2.tgz",
|
||||
"integrity": "sha512-a707OB1DhLGjzqtFrtMQKH7BBxFuCh8UBoUWxgFOrLrSwVh3g+/TlVPVDOz12+U0mDu3mIrnYLqQyhywQOTxhw==",
|
||||
"dependencies": {
|
||||
"etch": "^0.12.6",
|
||||
"fuzzaldrin": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/atom-select-list/node_modules/etch": {
|
||||
"version": "0.12.8",
|
||||
"resolved": "https://registry.npmjs.org/etch/-/etch-0.12.8.tgz",
|
||||
"integrity": "sha512-dFLRe4wLroVtwzyy1vGlE3BSDZHiL0kZME5XgNGzZIULcYTvVno8vbiIleAesoKJmwWaxDTzG+4eppg2zk14JQ=="
|
||||
},
|
||||
"node_modules/dedent": {
|
||||
"version": "0.7.0",
|
||||
"resolved": "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz",
|
||||
"integrity": "sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA=="
|
||||
},
|
||||
"node_modules/etch": {
|
||||
"version": "0.9.0",
|
||||
"resolved": "https://registry.npmjs.org/etch/-/etch-0.9.0.tgz",
|
||||
"integrity": "sha512-UG0mzvvs8JyBo4tDG39mqGuZ7zZGKFn9QOzO+BhrKe17R/f+3U+jFgA/bjW/gTA2ykytcE/Qm826ltykCiIrFA=="
|
||||
},
|
||||
"node_modules/fuzzaldrin": {
|
||||
"version": "2.1.0",
|
||||
"resolved": "https://registry.npmjs.org/fuzzaldrin/-/fuzzaldrin-2.1.0.tgz",
|
||||
"integrity": "sha512-zgllBYwfHR5P3CncJiGbGVPpa3iFYW1yuPaIv8DiTVRrcg5/6uETNL5zvIoKflG1aifXVUZTlIroDehw4WygGA=="
|
||||
}
|
||||
}
|
||||
}
|
19
packages/styleguide/package.json
Normal file
19
packages/styleguide/package.json
Normal file
@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "styleguide",
|
||||
"main": "./lib/styleguide",
|
||||
"version": "0.49.12",
|
||||
"description": "A visual styleguide of the Pulsars's UI components.",
|
||||
"repository": "https://github.com/pulsar-edit/styleguide",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"atom-select-list": "^0.7.0",
|
||||
"dedent": "^0.7.0",
|
||||
"etch": "0.9.0"
|
||||
},
|
||||
"deserializers": {
|
||||
"StyleguideView": "createStyleguideView"
|
||||
},
|
||||
"engines": {
|
||||
"atom": "*"
|
||||
}
|
||||
}
|
103
packages/styleguide/spec/async-spec-helpers.js
Normal file
103
packages/styleguide/spec/async-spec-helpers.js
Normal file
@ -0,0 +1,103 @@
|
||||
/** @babel */
|
||||
|
||||
export function beforeEach (fn) {
|
||||
global.beforeEach(function () {
|
||||
const result = fn()
|
||||
if (result instanceof Promise) {
|
||||
waitsForPromise(() => result)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export function afterEach (fn) {
|
||||
global.afterEach(function () {
|
||||
const result = fn()
|
||||
if (result instanceof Promise) {
|
||||
waitsForPromise(() => result)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
['it', 'fit', 'ffit', 'fffit'].forEach(function (name) {
|
||||
module.exports[name] = function (description, fn) {
|
||||
if (fn === undefined) {
|
||||
global[name](description)
|
||||
return
|
||||
}
|
||||
|
||||
global[name](description, function () {
|
||||
const result = fn()
|
||||
if (result instanceof Promise) {
|
||||
waitsForPromise(() => result)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
export async function conditionPromise (condition, description = 'anonymous condition') {
|
||||
const startTime = Date.now()
|
||||
|
||||
while (true) {
|
||||
await timeoutPromise(100)
|
||||
|
||||
if (await condition()) {
|
||||
return
|
||||
}
|
||||
|
||||
if (Date.now() - startTime > 5000) {
|
||||
throw new Error('Timed out waiting on ' + description)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export function timeoutPromise (timeout) {
|
||||
return new Promise(function (resolve) {
|
||||
global.setTimeout(resolve, timeout)
|
||||
})
|
||||
}
|
||||
|
||||
function waitsForPromise (fn) {
|
||||
const promise = fn()
|
||||
global.waitsFor('spec promise to resolve', function (done) {
|
||||
promise.then(done, function (error) {
|
||||
jasmine.getEnv().currentSpec.fail(error)
|
||||
done()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export function emitterEventPromise (emitter, event, timeout = 15000) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const timeoutHandle = setTimeout(() => {
|
||||
reject(new Error(`Timed out waiting for '${event}' event`))
|
||||
}, timeout)
|
||||
emitter.once(event, () => {
|
||||
clearTimeout(timeoutHandle)
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
export function promisify (original) {
|
||||
return function (...args) {
|
||||
return new Promise((resolve, reject) => {
|
||||
args.push((err, ...results) => {
|
||||
if (err) {
|
||||
reject(err)
|
||||
} else {
|
||||
resolve(...results)
|
||||
}
|
||||
})
|
||||
|
||||
return original(...args)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export function promisifySome (obj, fnNames) {
|
||||
const result = {}
|
||||
for (const fnName of fnNames) {
|
||||
result[fnName] = promisify(obj[fnName])
|
||||
}
|
||||
return result
|
||||
}
|
18
packages/styleguide/spec/styleguide-spec.js
Normal file
18
packages/styleguide/spec/styleguide-spec.js
Normal file
@ -0,0 +1,18 @@
|
||||
const {it, fit, ffit, beforeEach, afterEach} = require('./async-spec-helpers') // eslint-disable-line no-unused-vars
|
||||
|
||||
describe('Style Guide', () => {
|
||||
beforeEach(async () => {
|
||||
await atom.packages.activatePackage('styleguide')
|
||||
})
|
||||
|
||||
describe('the Styleguide view', () => {
|
||||
let styleGuideView
|
||||
beforeEach(async () => {
|
||||
styleGuideView = await atom.workspace.open('atom://styleguide')
|
||||
})
|
||||
|
||||
it('opens the style guide', () => {
|
||||
expect(styleGuideView.element.textContent).toContain('Styleguide')
|
||||
})
|
||||
})
|
||||
})
|
134
packages/styleguide/styles/components.less
Normal file
134
packages/styleguide/styles/components.less
Normal file
@ -0,0 +1,134 @@
|
||||
@import "ui-variables";
|
||||
|
||||
//
|
||||
// This adds some component styles specifically for the Styleguide
|
||||
// --------------------------------
|
||||
|
||||
.styleguide {
|
||||
|
||||
// Icons ---------------
|
||||
|
||||
[data-name="icons"] {
|
||||
.example-rendered {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.example-code {
|
||||
display: none; // remove, doesn't make much sense here
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: relative;
|
||||
flex: 1 0 200px;
|
||||
padding: 10px 0 10px 40px;
|
||||
color: @text-color-subtle;
|
||||
&:before {
|
||||
position: absolute;
|
||||
margin-left: -32px;
|
||||
color: @text-color-highlight;
|
||||
text-align: center;
|
||||
}
|
||||
&:hover {
|
||||
color: @text-color-highlight;
|
||||
&:before {
|
||||
color: @text-color-selected;
|
||||
font-size: 32px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-top: -8px;
|
||||
margin-left: -40px; // 32px (initial) + 8px (grow)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Make the Gist logo bigger
|
||||
.icon-logo-gist {
|
||||
&:before,
|
||||
&:hover:before {
|
||||
font-size: 2.5em;
|
||||
margin-top: -.05em;
|
||||
margin-left: -1.3em;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// Make the GitHub logo bigger
|
||||
.icon-logo-github {
|
||||
&:before,
|
||||
&:hover:before {
|
||||
font-size: 3em;
|
||||
margin-top: .08em;
|
||||
margin-left: -1.2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Inputs + controls ---------------
|
||||
|
||||
.input-search,
|
||||
.input-textarea {
|
||||
margin-top: @component-padding;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
display: block;
|
||||
width: -webkit-max-content;
|
||||
margin: 0 1em 1em 0;
|
||||
}
|
||||
|
||||
.input-color,
|
||||
.input-number,
|
||||
.input-select {
|
||||
margin: 0 @component-padding 0 0 !important;
|
||||
}
|
||||
|
||||
|
||||
// Site colors ---------------
|
||||
|
||||
.ui-site-1,
|
||||
.ui-site-2,
|
||||
.ui-site-3,
|
||||
.ui-site-4,
|
||||
.ui-site-5 {
|
||||
height: 10px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
|
||||
// Modals ---------------
|
||||
|
||||
atom-panel.modal {
|
||||
// makde them responsive in the styleguide
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
// Misc ---------------
|
||||
|
||||
.popover-list {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.popover-list,
|
||||
.select-list {
|
||||
atom-text-editor[mini] { height: 27px; }
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
display: inline-block;
|
||||
margin-right: @component-padding;
|
||||
}
|
||||
|
||||
[data-name="error-messages"] .example-rendered {
|
||||
min-height: 60px; // don't cut off centered messages
|
||||
}
|
||||
|
||||
}
|
129
packages/styleguide/styles/styleguide.less
Normal file
129
packages/styleguide/styles/styleguide.less
Normal file
@ -0,0 +1,129 @@
|
||||
@import "ui-variables";
|
||||
@import "syntax-variables";
|
||||
|
||||
@styleguide-spacing: @component-padding *1.5;
|
||||
@styleguide-bg: darken(@base-background-color, 2%);
|
||||
|
||||
.styleguide {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
a {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.styleguide-controls {
|
||||
position: absolute;
|
||||
right: @component-padding;
|
||||
top: @component-padding;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.styleguide-header {
|
||||
padding: @styleguide-spacing;
|
||||
border-bottom: 1px solid @base-border-color;
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0 0 .5em 0;
|
||||
color: @text-color-highlight;
|
||||
}
|
||||
p {
|
||||
font-size: 1.2em;
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.styleguide-sections {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
|
||||
& > section {
|
||||
background-color: @styleguide-bg;
|
||||
padding: 0;
|
||||
border-bottom: 1px solid @base-border-color;
|
||||
border-top: none;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.collapsed {
|
||||
background-color: @base-background-color;
|
||||
> .section-heading {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding-bottom: @styleguide-spacing;
|
||||
color: @text-color;
|
||||
&:hover {
|
||||
color: @text-color-highlight;
|
||||
background-color: @background-color-highlight;
|
||||
}
|
||||
&:active {
|
||||
background-color: @base-background-color;
|
||||
}
|
||||
}
|
||||
> * {
|
||||
display: none
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.section-heading.section-heading {
|
||||
padding: @styleguide-spacing @styleguide-spacing 0 @styleguide-spacing;
|
||||
cursor: pointer;
|
||||
font-weight: normal;
|
||||
font-size: 1.8em;
|
||||
color: @text-color-highlight;
|
||||
}
|
||||
|
||||
section > h2 {
|
||||
font-size: 1.5em;
|
||||
line-height: 1.2;
|
||||
margin: 1em @styleguide-spacing 0 @styleguide-spacing;
|
||||
color: @text-color-highlight;
|
||||
}
|
||||
|
||||
section > p {
|
||||
font-size: 1.1em;
|
||||
margin: .5em @styleguide-spacing 1em @styleguide-spacing;
|
||||
}
|
||||
}
|
||||
|
||||
// Example -------------------------------
|
||||
|
||||
.styleguide .example {
|
||||
@example-background: @base-background-color;
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
border-radius: @component-border-radius;
|
||||
padding: @component-padding / 2;
|
||||
|
||||
.example-rendered,
|
||||
.example-code {
|
||||
position: relative;
|
||||
flex: 1 1 300px;
|
||||
min-width: 0;
|
||||
margin: @component-padding / 2;
|
||||
border-radius: @component-border-radius;
|
||||
border: 1px solid @tool-panel-border-color;
|
||||
}
|
||||
|
||||
.example-rendered {
|
||||
padding: @component-padding;
|
||||
background: @example-background;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.example-code {
|
||||
background-color: @syntax-background-color;
|
||||
pre {
|
||||
border: none;
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
148
packages/styleguide/styles/variables.less
Normal file
148
packages/styleguide/styles/variables.less
Normal file
@ -0,0 +1,148 @@
|
||||
@import "ui-variables";
|
||||
@import "syntax-variables";
|
||||
|
||||
.styleguide [data-name="variables"] {
|
||||
|
||||
// Text colors
|
||||
.color( text-color );
|
||||
.color( text-color-subtle );
|
||||
.color( text-color-highlight );
|
||||
.color( text-color-selected );
|
||||
.color( text-color-info );
|
||||
.color( text-color-success );
|
||||
.color( text-color-warning );
|
||||
.color( text-color-error );
|
||||
|
||||
// Background colors
|
||||
.color( background-color-info );
|
||||
.color( background-color-success );
|
||||
.color( background-color-warning );
|
||||
.color( background-color-error );
|
||||
.color( background-color-highlight );
|
||||
.color( background-color-selected );
|
||||
.color( app-background-color );
|
||||
|
||||
// Base colors
|
||||
.color( base-background-color );
|
||||
.color( base-border-color );
|
||||
|
||||
// Pane colors
|
||||
.color( pane-item-background-color );
|
||||
.color( pane-item-border-color );
|
||||
|
||||
// Input colors
|
||||
.color( input-background-color );
|
||||
.color( input-border-color );
|
||||
|
||||
// Panel colors
|
||||
.color( tool-panel-background-color );
|
||||
.color( tool-panel-border-color );
|
||||
.color( inset-panel-background-color );
|
||||
.color( inset-panel-border-color );
|
||||
.color( panel-heading-background-color );
|
||||
.color( panel-heading-border-color );
|
||||
.color( overlay-background-color );
|
||||
.color( overlay-border-color );
|
||||
|
||||
// Button colors
|
||||
.color( button-background-color );
|
||||
.color( button-background-color-hover );
|
||||
.color( button-background-color-selected );
|
||||
.color( button-border-color );
|
||||
|
||||
// Tab colors
|
||||
.color( tab-bar-background-color );
|
||||
.color( tab-bar-border-color );
|
||||
.color( tab-background-color );
|
||||
.color( tab-background-color-active );
|
||||
.color( tab-border-color );
|
||||
|
||||
// Tree-view colors
|
||||
.color( tree-view-background-color );
|
||||
.color( tree-view-border-color );
|
||||
|
||||
// Site colors
|
||||
.color( ui-site-color-1 );
|
||||
.color( ui-site-color-2 );
|
||||
.color( ui-site-color-3 );
|
||||
.color( ui-site-color-4 );
|
||||
.color( ui-site-color-5 );
|
||||
|
||||
// Component sizes
|
||||
.size( disclosure-arrow-size );
|
||||
.size( component-padding );
|
||||
.size( component-icon-padding );
|
||||
.size( component-icon-size );
|
||||
.size( component-line-height );
|
||||
.size( tab-height );
|
||||
.size( font-size );
|
||||
|
||||
// Misc
|
||||
.radius( component-border-radius );
|
||||
.font( font-family );
|
||||
|
||||
|
||||
// Visualize --------------------------------
|
||||
|
||||
.is-color:before,
|
||||
.is-size:after,
|
||||
.is-radius:after {
|
||||
content: "";
|
||||
display: inline-block;
|
||||
height: 20px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.is-color:before {
|
||||
margin-right: @component-padding*1.5;
|
||||
width: 20%;
|
||||
}
|
||||
.is-size:after {
|
||||
margin-left: @component-padding*1.5;
|
||||
height: 4px;
|
||||
background-color: @text-color;
|
||||
}
|
||||
.is-radius:after {
|
||||
width: 20px;
|
||||
margin-left: @component-padding*1.5;
|
||||
background-color: @text-color;
|
||||
}
|
||||
.is-font:after {
|
||||
margin-left: @component-padding;
|
||||
color: @text-color-highlight;
|
||||
}
|
||||
|
||||
|
||||
// Mixins --------------------------------
|
||||
|
||||
.color(@variable) {
|
||||
.is-color.@{variable}:before {
|
||||
background-color: @@variable;
|
||||
}
|
||||
}
|
||||
|
||||
.size(@variable) {
|
||||
.is-size.@{variable}:after {
|
||||
width: @@variable;
|
||||
}
|
||||
}
|
||||
|
||||
.radius(@variable) {
|
||||
.is-radius.@{variable}:after {
|
||||
border-radius: @@variable;
|
||||
}
|
||||
}
|
||||
|
||||
.font(@variable) {
|
||||
.is-font.@{variable}:after {
|
||||
content: @@variable;
|
||||
font-family: @@variable;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Custom styling for vars --------------------------------
|
||||
|
||||
.example-code {
|
||||
display: none; // remove, doesn't make much sense here
|
||||
}
|
||||
}
|
@ -9045,9 +9045,8 @@ strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
|
||||
resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
|
||||
integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
|
||||
|
||||
"styleguide@https://codeload.github.com/atom/styleguide/legacy.tar.gz/refs/tags/v0.49.12":
|
||||
"styleguide@file:./packages/styleguide":
|
||||
version "0.49.12"
|
||||
resolved "https://codeload.github.com/atom/styleguide/legacy.tar.gz/refs/tags/v0.49.12#d2c09228e5da99017034227b8bc571fea56bc63b"
|
||||
dependencies:
|
||||
atom-select-list "^0.7.0"
|
||||
dedent "^0.7.0"
|
||||
|
Loading…
Reference in New Issue
Block a user