deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2024-05-03 14:33:17 +02:00
Code Issues Projects Releases Wiki Activity

Add dark mode docs and prepare for release

Browse source
This commit is contained in:
Rhyne Vlaservich 2020-09-13 13:48:31 -04:00
parent 705a1a2664
commit 18d9cd7522
13 changed files with 1011 additions and 245 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
build/build.js
View file

@ -20,7 +20,9 @@ async function build() {
log('Cleaning "dist/, docs/static/assets/paper.css" folder...');
rimraf.sync('dist', { disableGlob: true });
fs.unlinkSync(paperDocsPath);
if (fs.existsSync(paperDocsPath)) {
fs.unlinkSync(paperDocsPath);
}
log('Compiling SCSS to CSS, entrypoint:', entrypoint);

665
dist/paper.css vendored
View file

File diff suppressed because it is too large Load diff

4
dist/paper.min.css vendored
View file

File diff suppressed because one or more lines are too long

1
docs/config.toml
View file

@ -7,6 +7,7 @@ publishDir = "../public"
# Syntax Highlighting ( https://gohugo.io/content-management/syntax-highlighting/ )
pygmentsCodefences = true
pygmentsStyle = "emacs"
pygmentsUseClasses=true
[params.info]
description = "the less formal CSS framework"

28
docs/content/docs/components/forms.md
View file

@ -165,11 +165,15 @@ description: PaperCSS Forms
</fieldset>
<fieldset class="form-group">
<legend>Sliders</legend>
<label for="input-range">Note /10 :</label>
<input type="range" name="note" id="input-range" min="0" max="10">
<label for="percentage">Percentage (<code>.input-block</code>) :</label>
<input class="input-block" type="range" name="percentage" id="percentage" min="0" max="100" oninput="output.value = this.value + '%';">
<output id="output" for="percentage">50%</output>
<div class="form-group">
<label for="input-range">Note /10 :</label>
<input type="range" name="note" id="input-range" min="0" max="10">
</div>
<div class="form-group">
<label for="percentage">Percentage (<code>.input-block</code>) :</label>
<input class="input-block" type="range" name="percentage" id="percentage" min="0" max="100" oninput="output.value = this.value + '%';">
<output id="output" for="percentage">50%</output>
</div>
</fieldset>
#### Code:
@ -332,10 +336,14 @@ description: PaperCSS Forms
</fieldset>
<fieldset class="form-group">
<legend>Sliders</legend>
<label for="input-range">Note /10 :</label>
<input type="range" name="note" id="input-range" min="0" max="10">
<label for="percentage">Percentage (<code>.input-block</code>) :</label>
<input class="input-block" type="range" name="percentage" id="percentage" min="0" max="100" oninput="output.value = this.value + '%';">
<output id="output" for="percentage">50%</output>
<div class="form-group">
<label for="input-range">Note /10 :</label>
<input type="range" name="note" id="input-range" min="0" max="10">
</div>
<div class="form-group">
<label for="percentage">Percentage (<code>.input-block</code>) :</label>
<input class="input-block" type="range" name="percentage" id="percentage" min="0" max="100" oninput="output.value = this.value + '%';">
<output id="output" for="percentage">50%</output>
</div>
</fieldset>
```

67
docs/content/docs/utilities/dark-mode.md Normal file
View file

@ -0,0 +1,67 @@
---
title: Dark Mode
description: PaperCSS Dark Mode
---
As of version `1.8.0`, PaperCSS supports a dark mode of the framework. Just add the `.dark` class to your `html` tag!
#### Examples
Here's what some of the components look like:
<div class="form-group">
<label for="paperInputs1">Input</label>
<input type="text" placeholder="Nice input" id="paperInputs1">
</div>
<button>
Button
</button>
<div class="progress margin-bottom">
<div class="bar w-25"></div>
</div>
<table>
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Position</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Bob Dylan</td>
<td>Musician</td>
<td>California, USA</td>
</tr>
<tr>
<td>2</td>
<td>Eric Clapton</td>
<td>Musician</td>
<td>Ohio, USA</td>
</tr>
<tr>
<td>3</td>
<td>Daniel Kahneman</td>
<td>Psychologist</td>
<td>California, USA</td>
</tr>
</tbody>
</table>
<script>
var html = document.documentElement;
html.className += 'dark';
</script>
#### Code
```html
<html class='dark'>
Dark mode styles are automatically applied with the dark class!
</html>
```

1
docs/layouts/partials/head/includes.html
View file

@ -1,3 +1,4 @@
<!-- Styles -->
<link rel='stylesheet' href='/assets/paper.css'>
<link rel='stylesheet' href='/assets/demo.css'>
<link rel='stylesheet' href='/assets/syntax.css'>

365
docs/static/assets/syntax.css vendored Normal file
View file

@ -0,0 +1,365 @@
/* LineTableTD */
.chroma .lntd {
border: 0;
margin: 0;
padding: 0;
vertical-align: top;
}
/* LineTable */
.chroma .lntable {
border: 0;
border-spacing: 0;
display: block;
margin: 0;
overflow: auto;
padding: 0;
width: auto;
}
/* LineHighlight */
.chroma .hl {
background-color: #ffc;
display: block;
width: 100%;
}
/* LineNumbersTable */
.chroma .lnt {color: #7f7f7f;
margin-right: 0.4em;
padding: 0 0.4em;
}
/* LineNumbers */
.chroma .ln {color: #7f7f7f;
margin-right: 0.4em;
padding: 0 0.4em;
}
/* Keyword */
.chroma .k {
color: #a2f;
font-weight: bold;
}
/* KeywordConstant */
.chroma .kc {
color: #a2f;
font-weight: bold;
}
/* KeywordDeclaration */
.chroma .kd {
color: #a2f;
font-weight: bold;
}
/* KeywordNamespace */
.chroma .kn {
color: #a2f;
font-weight: bold;
}
/* KeywordPseudo */
.chroma .kp {
color: #a2f;
}
/* KeywordReserved */
.chroma .kr {
color: #a2f;
font-weight: bold;
}
/* KeywordType */
.chroma .kt {
color: #0b0;
font-weight: bold;
}
/* NameAttribute */
.chroma .na {
color: #b44;
}
/* NameBuiltin */
.chroma .nb {
color: #a2f;
}
/* NameClass */
.chroma .nc {
color: #00f;
}
/* NameConstant */
.chroma .no {
color: #800;
}
/* NameDecorator */
.chroma .nd {
color: #a2f;
}
/* NameEntity */
.chroma .ni {
color: #999;
font-weight: bold;
}
/* NameException */
.chroma .ne {
color: #d2413a;
font-weight: bold;
}
/* NameFunction */
.chroma .nf {
color: #00a000;
}
/* NameLabel */
.chroma .nl {
color: #a0a000;
}
/* NameNamespace */
.chroma .nn {
color: #00f;
font-weight: bold;
}
/* NameTag */
.chroma .nt {
color: #008000;
font-weight: bold;
}
/* NameVariable */
.chroma .nv {
color: #b8860b;
}
/* LiteralString */
.chroma .s {
color: #b44;
}
/* LiteralStringAffix */
.chroma .sa {
color: #b44;
}
/* LiteralStringBacktick */
.chroma .sb {
color: #b44;
}
/* LiteralStringChar */
.chroma .sc {
color: #b44;
}
/* LiteralStringDelimiter */
.chroma .dl {
color: #b44;
}
/* LiteralStringDoc */
.chroma .sd {
color: #b44;
font-style: italic;
}
/* LiteralStringDouble */
.chroma .s2 {
color: #b44;
}
/* LiteralStringEscape */
.chroma .se {
color: #b62;
font-weight: bold;
}
/* LiteralStringHeredoc */
.chroma .sh {
color: #b44;
}
/* LiteralStringInterpol */
.chroma .si {
color: #b68;
font-weight: bold;
}
/* LiteralStringOther */
.chroma .sx {
color: #008000;
}
/* LiteralStringRegex */
.chroma .sr {
color: #b68;
}
/* LiteralStringSingle */
.chroma .s1 {
color: #b44;
}
/* LiteralStringSymbol */
.chroma .ss {
color: #b8860b;
}
/* LiteralNumber */
.chroma .m {
color: #666;
}
/* LiteralNumberBin */
.chroma .mb {
color: #666;
}
/* LiteralNumberFloat */
.chroma .mf {
color: #666;
}
/* LiteralNumberHex */
.chroma .mh {
color: #666;
}
/* LiteralNumberInteger */
.chroma .mi {
color: #666;
}
/* LiteralNumberIntegerLong */
.chroma .il {
color: #666;
}
/* LiteralNumberOct */
.chroma .mo {
color: #666;
}
/* Operator */
.chroma .o {
color: #666;
}
/* OperatorWord */
.chroma .ow {
color: #a2f;
font-weight: bold;
}
/* Comment */
.chroma .c {
color: #080;
font-style: italic;
}
/* CommentHashbang */
.chroma .ch {
color: #080;
font-style: italic;
}
/* CommentMultiline */
.chroma .cm {
color: #080;
font-style: italic;
}
/* CommentSingle */
.chroma .c1 {
color: #080;
font-style: italic;
}
/* CommentSpecial */
.chroma .cs {
color: #080;
font-weight: bold;
}
/* CommentPreproc */
.chroma .cp {
color: #080;
}
/* CommentPreprocFile */
.chroma .cpf {
color: #080;
}
/* GenericDeleted */
.chroma .gd {
color: #a00000;
}
/* GenericEmph */
.chroma .ge {
font-style: italic;
}
/* GenericError */
.chroma .gr {
color: #f00;
}
/* GenericHeading */
.chroma .gh {
color: #000080;
font-weight: bold;
}
/* GenericInserted */
.chroma .gi {
color: #00a000;
}
/* GenericOutput */
.chroma .go {
color: #888;
}
/* GenericPrompt */
.chroma .gp {
color: #000080;
font-weight: bold;
}
/* GenericStrong */
.chroma .gs {
font-weight: bold;
}
/* GenericSubheading */
.chroma .gu {
color: #800080;
font-weight: bold;
}
/* GenericTraceback */
.chroma .gt {
color: #04d;
}
/* GenericUnderline */
.chroma .gl {
text-decoration: underline;
}
/* TextWhitespace */
.chroma .w {
color: #bbb;
}

9
src/components/_cards.scss
View file

@ -17,17 +17,18 @@
.card-header,
.card-footer {
@include color('background-color', 'white-dark');
@include color('border-color', 'muted-light');
padding: 0.75rem 1.25rem;
}
.card-header {
@include color('border-color', 'muted-light');
border-bottom: 2px solid;
border-bottom-style: solid;
border-bottom-width: 2px;
}
.card-footer {
@include color('border-color', 'muted-light');
border-top: 2px solid;
border-top-style: solid;
border-top-width: 2px;
}
.card-body {

40
src/components/_forms.scss
View file

@ -331,12 +331,16 @@ select {
input[type='range'] {
appearance: none;
border-width: 0;
padding: 0;
/* For Chromium */
&::-webkit-slider-runnable-track {
background: $secondary;
border: 1px solid $primary;
@include color('background', 'secondary');
@include color('border-color', 'primary');
border-radius: 18px;
border-style: solid;
border-width: 1px;
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
cursor: pointer;
height: 8px;
@ -345,13 +349,16 @@ select {
}
&::-webkit-slider-thumb {
@include color('background', 'white');
@include color('border-color', 'primary');
appearance: none;
background: #fff;
border: 1px solid $primary;
border-bottom-left-radius: 0.7rem 1rem;
border-bottom-right-radius: 1rem 0.9rem;
border-style: solid;
border-top-left-radius: 1rem 1rem;
border-top-right-radius: 1rem 0.6rem;
border-width: 1px;
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
cursor: pointer;
height: 36px;
@ -361,8 +368,9 @@ select {
/* For Mozilla Firefox */
&::-moz-range-track {
background: $secondary;
border: 1px solid $primary;
@include color('background', 'secondary');
@include color('border-color', 'primary');
border-radius: 18px;
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
cursor: pointer;
@ -371,12 +379,15 @@ select {
}
&::-moz-range-thumb {
background: #fff;
border: 1px solid $primary;
@include color('background', 'white');
@include color('border-color', 'primary');
border-bottom-left-radius: 0.7rem 1rem;
border-bottom-right-radius: 1rem 0.9rem;
border-style: solid;
border-top-left-radius: 1rem 1rem;
border-top-right-radius: 1rem 0.6rem;
border-width: 1px;
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
cursor: pointer;
height: 36px;
@ -396,19 +407,26 @@ select {
&::-ms-fill-lower,
&::-ms-fill-upper {
background: $secondary;
border: 1px solid $primary;
@include color('background', 'secondary');
@include color('border-color', 'primary');
border-radius: 18px;
border-style: solid;
border-width: 1px;
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
}
&::-ms-thumb {
background: #fff;
@include color('background', 'white');
@include color('border-color', 'primary');
border: 1px solid $primary;
border-bottom-left-radius: 0.7rem 1rem;
border-bottom-right-radius: 1rem 0.9rem;
border-style: solid;
border-top-left-radius: 1rem 1rem;
border-top-right-radius: 1rem 0.6rem;
border-width: 1px;
box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
cursor: pointer;
height: 36px;

3
src/components/_navbar.scss
View file

@ -139,9 +139,10 @@ nav {
}
.collapsible label {
@include color('border-color', 'primary');
border-bottom-left-radius: 15px 255px;
border-bottom-right-radius: 225px 15px;
border-color: #41403e;
border-style: solid;
border-top-left-radius: 255px 15px;
border-top-right-radius: 15px 225px;

12
src/content/_code.scss
View file

@ -1,13 +1,13 @@
code {
@include color('color', 'secondary');
@include color('background-color', 'primary-light-70');
@include color('background-color', 'primary-shaded-70');
border-radius: 3px;
font-size: 80%;
padding: 2px 4px;
}
kbd {
@include color('color', 'black');
@include color('color', 'primary-inverse');
@include color('background-color', 'primary');
border-radius: 3px;
font-size: 80%;
@ -15,9 +15,9 @@ kbd {
}
pre {
@include color('color', 'black');
@include color('background-color', 'primary-light-70');
@include color('border-color', 'primary-light-50');
@include color('color', 'inverse-primary');
@include color('background-color', 'primary-shaded-70');
@include color('border-color', 'primary-shaded-50');
border-radius: 3px;
border-style: solid;
@ -32,7 +32,7 @@ pre {
word-wrap: break-word;
code {
@include color('color', 'black');
@include color('color', 'inverse-primary');
background: transparent;
display: block;
font-size: inherit;

57
src/core/_config.scss
View file

@ -29,8 +29,6 @@ $danger-dark: darken($danger, 45%) !default;
$muted-dark: darken($muted, 35%) !default;
$primary-light-10: lighten($primary, 10%) !default;
$primary-light-70: lighten($primary, 70%) !default;
$primary-light-50: lighten($primary, 50%) !default;
$secondary-light-10: lighten($secondary, 10%) !default;
$success-light-10: lighten($success, 10%) !default;
$warning-light-10: lighten($warning, 10%) !default;
@ -44,6 +42,8 @@ $warning-dark-10: darken($warning, 10%) !default;
$danger-dark-10: darken($danger, 10%) !default;
$muted-dark-10: darken($muted, 10%) !default;
$primary-shaded-70: lighten($primary, 70%) !default;
$primary-shaded-50: lighten($primary, 50%) !default;
$white-dark: rgba(#000, 0.03) !default;
$white-dark-light-80: lighten($white-dark, 80%) !default;
@ -53,16 +53,18 @@ $main-background: rgba(#fff, 1) !default;
$black: rgba(#000, 1) !default;
$main-background-light: lighten($main-background, 50%) !default;
$primary-text: $primary !default;
$secondary-text: $primary !default;
$success-text: $primary !default;
$warning-text: $primary !default;
$danger-text: $primary !default;
$muted-text: $primary !default;
$primary-text: $primary-dark-10 !default;
$secondary-text: $secondary-dark-10 !default;
$success-text: $success-dark-10 !default;
$warning-text: $warning-dark-10 !default;
$danger-text: $danger-dark-10 !default;
$muted-text: $muted-dark-10 !default;
$shadow-color-regular: hsla(0, 0, 0%, 0.2) !default;
$shadow-color-hover: hsla(0, 0, 0%, 0.3) !default;
$primary-inverse: #fff !default;
// Set dark theme colors
@ -89,8 +91,6 @@ $dark-danger-dark: darken($dark-danger, 45%) !default;
$dark-muted-dark: darken($dark-muted, 35%) !default;
$dark-primary-light-10: lighten($dark-primary, 10%) !default;
$dark-primary-light-70: lighten($dark-primary, 70%) !default;
$dark-primary-light-50: lighten($dark-primary, 50%) !default;
$dark-secondary-light-10: lighten($dark-secondary, 10%) !default;
$dark-success-light-10: lighten($dark-success, 10%) !default;
$dark-warning-light-10: lighten($dark-warning, 10%) !default;
@ -104,24 +104,29 @@ $dark-warning-dark-10: darken($dark-warning, 10%) !default;
$dark-danger-dark-10: darken($dark-danger, 10%) !default;
$dark-muted-dark-10: darken($dark-muted, 10%) !default;
$dark-primary-shaded-70: darken($primary, 7%) !default;
$dark-primary-shaded-50: darken($primary, 5%) !default;
$dark-white-dark: rgba(#fff, 0.03) !default;
$dark-white-dark-light-80: lighten($dark-white-dark, 80%) !default;
$dark-light-dark: rgba(#fff, 0.7) !default;
$dark-white: rgba(#fff, 1) !default;
$dark-main-background: rgba(#41403e, 1) !default;
$dark-main-background: rgba($primary, 1) !default;
$dark-main-background-light: lighten($dark-main-background, 50%) !default;
$dark-black: rgba(#000, 1) !default;
$dark-primary-text: #41403e !default;
$dark-secondary-text: #41403e !default;
$dark-success-text: #41403e !default;
$dark-warning-text: #41403e !default;
$dark-danger-text: #41403e !default;
$dark-muted-text: #41403e !default;
$dark-primary-text: $primary !default;
$dark-secondary-text: $dark-secondary-dark-10 !default;
$dark-success-text: $dark-success-dark-10 !default;
$dark-warning-text: $dark-warning-dark-10 !default;
$dark-danger-text: $dark-danger-dark-10 !default;
$dark-muted-text: $dark-muted-dark-10 !default;
$dark-shadow-color-regular: hsla(0, 0, 0%, 0.2) !default;
$dark-shadow-color-hover: hsla(0, 0, 0%, 0.3) !default;
$dark-primary-inverse: $primary !default;
$theme-map: (
@ -145,8 +150,6 @@ $theme-map: (
danger-dark:$danger-dark,
muted-dark:$muted-dark,
primary-light-10:$primary-light-10,
primary-light-50: $primary-light-50,
primary-light-70: $primary-light-70,
secondary-light-10:$secondary-light-10,
success-light-10:$success-light-10,
warning-light-10:$warning-light-10,
@ -158,13 +161,15 @@ $theme-map: (
warning-dark-10:$warning-dark-10,
danger-dark-10:$danger-dark-10,
muted-dark-10:$muted-dark-10,
primary-shaded-50: $primary-shaded-50,
primary-shaded-70: $primary-shaded-70,
white-dark:$white-dark,
white-dark-light-80:$white-dark-light-80,
light-dark:$light-dark,
white:$white,
'white':$white,
main-background: $main-background,
main-background-light: $main-background-light,
black: $black,
'black': $black,
primary-text:$primary-text,
secondary-text:$secondary-text,
success-text:$success-text,
@ -173,6 +178,7 @@ $theme-map: (
muted-text:$muted-text,
shadow-color-regular: $shadow-color-regular,
shadow-color-hover: $shadow-color-hover,
primary-inverse: $primary-inverse,
),
dark: (
primary: $dark-primary,
@ -194,8 +200,6 @@ $theme-map: (
danger-dark:$dark-danger-dark,
muted-dark:$dark-muted-dark,
primary-light-10:$dark-primary-light-10,
primary-light-50: $dark-primary-light-50,
primary-light-70: $dark-primary-light-70,
secondary-light-10:$dark-secondary-light-10,
success-light-10:$dark-success-light-10,
warning-light-10:$dark-warning-light-10,
@ -207,13 +211,15 @@ $theme-map: (
warning-dark-10:$dark-warning-dark-10,
danger-dark-10:$dark-danger-dark-10,
muted-dark-10:$dark-muted-dark-10,
primary-shaded-50: $dark-primary-shaded-50,
primary-shaded-70: $dark-primary-shaded-70,
white-dark:$dark-white-dark,
white-dark-light-80:$dark-white-dark-light-80,
light-dark:$dark-light-dark,
white:$dark-white,
'white':$dark-white,
main-background: $dark-main-background,
main-background-light: $dark-main-background-light,
black: $dark-black,
'black': $dark-black,
primary-text:$dark-primary-text,
secondary-text:$dark-secondary-text,
success-text:$dark-success-text,
@ -222,6 +228,7 @@ $theme-map: (
muted-text:$dark-muted-text,
shadow-color-regular: $dark-shadow-color-regular,
shadow-color-hover: $dark-shadow-color-hover,
primary-inverse: $dark-primary-inverse,
)
);