Skip to content

Commit

Permalink
Updated - ui colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@AndreiIgna
AndreiIgna committed Sep 18, 2021
1 parent 09244f5 commit b432538
Show file tree
Hide file tree
Showing 7 changed files with 137 additions and 120 deletions.
214 changes: 100 additions & 114 deletions components.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,16 +128,108 @@ <h2 class="mb-3">Colors</h2>
<h6 class="card-text">Brand colors</h6>
<div class="row mb-4">
<div class="col">
<div class="bg-primary p-2 rounded">
<div class="bg-primary p-2 rounded-top">
<p class="mb-2"><code>#2A3EB7</code></p>
<p class="text-white mb-0">primary</p>
</div>
<div class="bg-primary-light p-2">
<p class="mb-2"><code>#2A3EB7</code></p>
<p class="text-white mb-0">primary-light</p>
</div>
<div class="bg-primary-lighter p-2 rounded-bottom">
<p class="mb-2"><code>#2A3EB7</code></p>
<p class="mb-0">primary-lighter</p>
</div>
</div>

<div class="col">
<div class="bg-secondary p-2 rounded">
<div class="bg-secondary p-2 rounded-top">
<p class="mb-2"><code>#FFB800</code></p>
<p class="text-white mb-0">secondary</p>
</div>
<div class="bg-secondary-light p-2">
<p class="mb-2"><code>#FFB800</code></p>
<p class="mb-0">secondary-light</p>
</div>
<div class="bg-secondary-lighter p-2 rounded-bottom">
<p class="mb-2"><code>#FFB800</code></p>
<p class="mb-0">secondary-lighter</p>
</div>
</div>

<div class="col">
<div class="bg-dark p-2 rounded-top">
<p class="mb-2"><code>#FFB800</code></p>
<p class="text-white mb-0">dark</p>
</div>
<div class="bg-gray p-2">
<p class="mb-2"><code>#FFB800</code></p>
<p class="mb-0">gray</p>
</div>
<div class="bg-light p-2 rounded-bottom">
<p class="mb-2"><code>#FFB800</code></p>
<p class="mb-0">light</p>
</div>
</div>

<div class="col">
<div class="bg-info p-2 rounded-top">
<p class="mb-2"><code>#FFB800</code></p>
<p class="text-white mb-0">info</p>
</div>
<div class="bg-info-light p-2">
<p class="mb-2"><code>#FFB800</code></p>
<p class="mb-0">info-light</p>
</div>
<div class="bg-info-lighter p-2 rounded-bottom">
<p class="mb-2"><code>#FFB800</code></p>
<p class="mb-0">info-lighter</p>
</div>
</div>

<div class="col">
<div class="bg-success p-2 rounded-top">
<p class="mb-2"><code>#FFB800</code></p>
<p class="text-white mb-0">success</p>
</div>
<div class="bg-success-light p-2">
<p class="mb-2"><code>#FFB800</code></p>
<p class="mb-0">success-light</p>
</div>
<div class="bg-success-lighter p-2 rounded-bottom">
<p class="mb-2"><code>#FFB800</code></p>
<p class="mb-0">success-lighter</p>
</div>
</div>

<div class="col">
<div class="bg-warning p-2 rounded-top">
<p class="mb-2"><code>#FFB800</code></p>
<p class="text-white mb-0">warning</p>
</div>
<div class="bg-warning-light p-2">
<p class="mb-2"><code>#FFB800</code></p>
<p class="mb-0">warning-light</p>
</div>
<div class="bg-warning-lighter p-2 rounded-bottom">
<p class="mb-2"><code>#FFB800</code></p>
<p class="mb-0">warning-lighter</p>
</div>
</div>

<div class="col">
<div class="bg-danger p-2 rounded-top">
<p class="mb-2"><code>#FFB800</code></p>
<p class="text-white mb-0">danger</p>
</div>
<div class="bg-danger-light p-2">
<p class="mb-2"><code>#FFB800</code></p>
<p class="mb-0">danger-light</p>
</div>
<div class="bg-danger-lighter p-2 rounded-bottom">
<p class="mb-2"><code>#FFB800</code></p>
<p class="mb-0">danger-lighter</p>
</div>
</div>
</div>

Expand Down Expand Up @@ -205,117 +297,11 @@ <h6 class="card-text">Named colors</h6>
</div>
</div>

<h6 class="card-text">Light colors</h6>
<div class="row mb-4">
<div class="col my-1">
<div class="p-2 rounded bg-purple-300">
<p class="mb-2"><code>#xxx</code></p>
<p class="text-white mb-0">purple-300</p>
</div>
</div>
<div class="col my-1">
<div class="p-2 rounded bg-purple-100">
<p class="mb-2"><code>#xxx</code></p>
<p class="mb-0">purple-100</p>
</div>
</div>
<div class="col my-1">
<div class="p-2 rounded bg-gray-400">
<p class="mb-2"><code>#xxx</code></p>
<p class="mb-0">gray-400</p>
</div>
</div>
<div class="col my-1">
<div class="p-2 rounded bg-blue-100">
<p class="mb-2"><code>#xxx</code></p>
<p class="mb-0">blue-100</p>
</div>
</div>
<div class="col my-1">
<div class="p-2 rounded bg-green-100">
<p class="mb-2"><code>#xxx</code></p>
<p class="mb-0">green-100</p>
</div>
</div>
<div class="col my-1">
<div class="p-2 rounded bg-warning-light">
<p class="mb-2"><code>#xxx</code></p>
<p class="mb-0">warning-light</p>
</div>
</div>
<div class="col my-1">
<div class="p-2 rounded bg-danger-light">
<p class="mb-2"><code>#xxx</code></p>
<p class="mb-0">danger-light</p>
</div>
</div>
</div>

<h6 class="card-text">UI colors</h6>
<div class="row mb-4">
<div class="col">
<div class="bg-white p-2 rounded shadow-sm">
<p class="mb-2"><code>#ffffff</code></p>
<p class="text-dark mb-0">white</p>
</div>
</div>
<div class="col">
<div class="bg-light p-2 rounded shadow-sm">
<p class="mb-2"><code>#f8f9fa</code></p>
<p class="text-dark mb-0">light</p>
</div>
</div>
<div class="col">
<div class="p-2 rounded" style="background-color: var(--bs-gray);">
<p class="mb-2"><code>#6c757d</code></p>
<p class="text-white mb-0">gray</p>
</div>
</div>
<div class="col">
<div class="p-2 rounded" style="background-color: var(--bs-gray-dark);">
<p class="mb-2"><code>#343a40</code></p>
<p class="text-white mb-0">gray-dark</p>
</div>
</div>
<div class="col">
<div class="bg-dark p-2 rounded">
<p class="mb-2"><code>#343a40</code></p>
<p class="text-white mb-0">dark</p>
</div>
</div>
<div class="col">
<div class="bg-success p-2 rounded">
<p class="mb-2"><code>#8DD384</code></p>
<p class="text-white mb-0">success</p>
</div>
</div>
<div class="col">
<div class="bg-info p-2 rounded">
<p class="mb-2"><code>#17a2b8</code></p>
<p class="text-white mb-0">info</p>
</div>
</div>
<div class="col">
<div class="bg-warning p-2 rounded">
<p class="mb-2"><code>#ffc107</code></p>
<p class="text-white mb-0">warning</p>
</div>
</div>
<div class="col">
<div class="bg-danger p-2 rounded">
<p class="mb-2"><code>#FF7459</code></p>
<p class="text-white mb-0">danger</p>
</div>
</div>
</div>

<h6 class="card-text">To use the colors</h6>
<p class="card-text mb-2">In CSS use CSS variable with color name, ex: <code>background-color: var(--bs-red);</code></p>
<p class="card-text mb-2">For elements background use Bootstrap background utility, ex: <code>class="bg-success"</code></p>
<p class="card-text mb-2">For text color use Background text utility, ex: <code>class="text-dark"</code></p>
<p class="card-text">Learn more about usage in Bootstrap docs <a href="https://getbootstrap.com/docs/4.6/getting-started/theming/#color">https://getbootstrap.com/docs/4.6/getting-started/theming/#color</a></p>


<h6 class="card-text">To use the colors</h6>
<p class="card-text mb-2">In CSS use CSS variable with color name, ex: <code>background-color: var(--bs-red);</code></p>
<p class="card-text mb-2">For elements background use Bootstrap background utility, ex: <code>class="bg-success"</code></p>
<p class="card-text mb-2">For text color use Background text utility, ex: <code>class="text-dark"</code></p>
<p class="card-text">Learn more about usage in Bootstrap docs <a href="https://getbootstrap.com/docs/4.6/getting-started/theming/#color">https://getbootstrap.com/docs/4.6/getting-started/theming/#color</a></p>

</div>

Expand Down Expand Up @@ -553,7 +539,7 @@ <h5 class="subtitle">Layered Design</h5>
<ul class="nicer-list">
<li><a href="#">Submenu</a></li>
<li><a href="#">Support</a></li>
<li><span class="badge badge-outline-dark js-version">v1.5.4</span></li>
<li><span class="badge badge-outline-dark js-version">v1.5.6</span></li>
</ul>
</div>
<div class="col-xs-6 col-md-3">
Expand Down
2 changes: 1 addition & 1 deletion dist/layered.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,7 @@ <h5 class="subtitle">Layered Design</h5>
<ul class="nicer-list">
<li><a href="#">Submenu</a></li>
<li><a href="#">Support</a></li>
<li><span class="badge badge-outline-dark js-version">v1.5.4</span></li>
<li><span class="badge badge-outline-dark js-version">v1.5.6</span></li>
</ul>
</div>
<div class="col-xs-6 col-md-3">
Expand Down
4 changes: 2 additions & 2 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@layered/layered-design",
"version": "1.5.5",
"version": "1.5.6",
"description": "Layered design system, based on Bootstrap",
"style": "dist/layered.css",
"sass": "src/layered.scss",
Expand Down
2 changes: 2 additions & 0 deletions src/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ $primary: #460d8d !default;
$primary-light: #6954F7 !default;
$primary-lighter: transparentize($primary, 0.95) !default;

$info: #0d6efd;

// Spacing

$custom-spacers: (
Expand Down
31 changes: 30 additions & 1 deletion src/layered.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,43 @@
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";

$info: $blue;


$spacers: map-merge($spacers, (
6: $spacer * 4,
));

@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

$all-colors: map-merge-multiple($blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans, $grays);

$success-light: $green-300;
$success-lighter: $green-100;
$info-light: $blue-300;
$info-lighter: $blue-100;
$warning-light: $yellow-300;
$warning-lighter: $yellow-100;
$danger-light: $red-300;
$danger-lighter: $red-100;

$ui-colors: (
'gray': $gray-500,
'primary-light': $primary-light,
'primary-lighter': $primary-lighter,
'secondary-light': $gray-300,
'secondary-lighter': $gray-100,
'success-light': $success-light,
'success-lighter': $success-lighter,
'info-light': $info-light,
'info-lighter': $info-lighter,
'warning-light': $warning-light,
'warning-lighter': $warning-lighter,
'danger-light': $danger-light,
'danger-lighter': $danger-lighter
);

$all-colors: map-merge-multiple($ui-colors, $blues, $indigos, $purples, $pinks, $reds, $oranges, $yellows, $greens, $teals, $cyans, $grays);

$utilities: map-merge(
$utilities,
Expand Down

0 comments on commit b432538

Please sign in to comment.