Skip to content

GitLab

Unverified Commit d77db06b authored by Nicolas Lenz's avatar Nicolas Lenz ❄
Browse files
Options

Auto view of color codes for palette page.

parent acbde166
Hide whitespace changes
Inline Side-by-side
Showing with 16 additions and 10 deletions
src/palette.xhtml
View file @ d77db06b
......@@ -16,15 +16,15 @@
<br/>
<p>Background</p>
<div class="colorbox bg-background-super-dark">Background super dark <a href="index.xhtml">Link</a></div>
<div class="colorbox bg-background-very-dark">Background very dark <a href="index.xhtml">Link</a></div>
<div class="colorbox bg-background-dark">Background dark <a href="index.xhtml">Link</a></div>
<div class="colorbox bg-background-dim">Background dim <a href="index.xhtml">Link</a></div>
<div class="colorbox bg-background-medium">Background medium <a href="index.xhtml">Link</a></div>
<div class="colorbox bg-background-light">Background light <a href="index.xhtml">Link</a></div>
<div class="colorbox bg-background-bright">Background bright <a href="index.xhtml">Link</a></div>
<div class="colorbox bg-background-very-bright">Background very bright <a href="index.xhtml">Link</a></div>
<div class="colorbox bg-background-super-bright">Background super bright <a href="index.xhtml">Link</a></div>
<div class="colorbox bg-background-super-dark">Background super dark</div>
<div class="colorbox bg-background-very-dark">Background very dark</div>
<div class="colorbox bg-background-dark">Background dark</div>
<div class="colorbox bg-background-dim">Background dim</div>
<div class="colorbox bg-background-medium">Background medium</div>
<div class="colorbox bg-background-light">Background light</div>
<div class="colorbox bg-background-bright">Background bright</div>
<div class="colorbox bg-background-very-bright">Background very bright</div>
<div class="colorbox bg-background-super-bright">Background super bright</div>
<br/>
<p>Primary</p>
......@@ -49,6 +49,9 @@
<div class="colorbox bg-secondary-medium">Secondary medium</div>
<div class="colorbox bg-secondary-light">Secondary light</div>
<div class="colorbox bg-secondary-bright">Secondary bright</div>
<div class="colorbox bg-secondary-very-bright">Secondary very bright</div>
<div class="colorbox bg-secondary-super-bright">Secondary super bright</div>
<div class="colorbox bg-secondary-extreme-bright">Secondary extreme bright</div>
<br/>
<p>Check</p>
......
src/style/_colors.sass
View file @ d77db06b
......@@ -19,6 +19,9 @@
@for $i from -5 through 5
.bg-#{$color-name}-#{map-get($shade-names, $i)}
background-color: get-color($color-name, $i)
.colorbox.bg-#{$color-name}-#{map-get($shade-names, $i)}::after
font-weight: normal
content: " (#{get-color($color-name, $i)})"
.fg-#{$color-name}-#{map-get($shade-names, $i)}
color: get-color($color-name, $i)
......
src/style/_palette.scss
View file @ d77db06b
......@@ -14,7 +14,7 @@ $palette: (
$mix-intervals: (
"primary": (-4: 18%, -3: 18%, -2: 18%, -1: 14%),
"accent": (),
"secondary": (-4: 30%, -3: 30%, -2: 30%, -1: 30%, 1: 30%, 2: 30%, 3: 30%, 4: 30%),
"secondary": (-5: 30%, -4: 30%, -3: 30%, -2: 30%, -1: 30%, 1: 30%, 2: 30%, 3: 30%, 4: 30%, 5: 30%),
"background": (-4: 40%, -3: 35%, -2: 30%, -1: 26%, 1: 30%, 2: 35%, 3: 40%, 4: 50%),
"fail": (),
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment