Skip to content

Commit

Permalink
Updated - colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@AndreiIgna
AndreiIgna committed Jun 23, 2021
1 parent 22ac166 commit b4a3d54
Show file tree
Hide file tree
Showing 6 changed files with 213 additions and 7 deletions.
207 changes: 206 additions & 1 deletion components.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,211 @@ <h4>JS &amp; SASS</h4>

<hr>

<section class="py-5">

<div class="container" id="Colors">

<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">
<p class="mb-2"><code>#2A3EB7</code></p>
<p class="text-white mb-0">primary</p>
</div>
</div>
<div class="col">
<div class="bg-secondary p-2 rounded">
<p class="mb-2"><code>#FFB800</code></p>
<p class="text-white mb-0">secondary</p>
</div>
</div>
</div>

<h6 class="card-text">Named colors</h6>
<div class="row mb-4">
<div class="col my-1">
<div class="p-2 rounded" style="background-color: var(--bs-blue);">
<p class="mb-2"><code>#2A3EB7</code></p>
<p class="text-white mb-0">blue</p>
</div>
</div>
<div class="col my-1">
<div class="p-2 rounded" style="background-color: var(--bs-indigo);">
<p class="mb-2"><code>#6610f2</code></p>
<p class="text-white mb-0">indigo</p>
</div>
</div>
<div class="col my-1">
<div class="p-2 rounded" style="background-color: var(--bs-purple);">
<p class="mb-2"><code>#6f42c1</code></p>
<p class="text-white mb-0">purple</p>
</div>
</div>
<div class="col my-1">
<div class="p-2 rounded" style="background-color: var(--bs-pink);">
<p class="mb-2"><code class="text-dark">#e83e8c</code></p>
<p class="text-white mb-0">pink</p>
</div>
</div>
<div class="col my-1">
<div class="p-2 rounded" style="background-color: var(--bs-red);">
<p class="mb-2"><code>#FF7459</code></p>
<p class="text-white mb-0">red</p>
</div>
</div>
<div class="col my-1">
<div class="p-2 rounded" style="background-color: var(--bs-orange);">
<p class="mb-2"><code>#fd7e14</code></p>
<p class="text-white mb-0">orange</p>
</div>
</div>
<div class="col my-1">
<div class="p-2 rounded" style="background-color: var(--bs-yellow);">
<p class="mb-2"><code>#ffc107</code></p>
<p class="text-white mb-0">yellow</p>
</div>
</div>
<div class="col my-1">
<div class="p-2 rounded" style="background-color: var(--bs-green);">
<p class="mb-2"><code>#8DD384</code></p>
<p class="text-white mb-0">green</p>
</div>
</div>
<div class="col my-1">
<div class="p-2 rounded" style="background-color: var(--bs-teal);">
<p class="mb-2"><code>#20c997</code></p>
<p class="text-white mb-0">teal</p>
</div>
</div>
<div class="col my-1">
<div class="p-2 rounded" style="background-color: var(--bs-cyan);">
<p class="mb-2"><code>#17a2b8</code></p>
<p class="text-white mb-0">cyan</p>
</div>
</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-primary-light">
<p class="mb-2"><code>#xxx</code></p>
<p class="text-white mb-0">primary-light</p>
</div>
</div>
<div class="col my-1">
<div class="p-2 rounded bg-primary-lighter">
<p class="mb-2"><code>#xxx</code></p>
<p class="mb-0">primary-lighter</p>
</div>
</div>
<div class="col my-1">
<div class="p-2 rounded bg-secondary-light">
<p class="mb-2"><code>#xxx</code></p>
<p class="mb-0">secondary-light</p>
</div>
</div>
<div class="col my-1">
<div class="p-2 rounded bg-info-light">
<p class="mb-2"><code>#xxx</code></p>
<p class="mb-0">info-light</p>
</div>
</div>
<div class="col my-1">
<div class="p-2 rounded bg-success-light">
<p class="mb-2"><code>#xxx</code></p>
<p class="mb-0">success-light</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>



</div>

</section>

<hr>

<section class="py-5">

<div class="container" id="alerts">
Expand Down Expand Up @@ -348,7 +553,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.1</span></li>
<li><span class="badge badge-outline-dark js-version">v1.5.2</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.1</span></li>
<li><span class="badge badge-outline-dark js-version">v1.5.2</span></li>
</ul>
</div>
<div class="col-xs-6 col-md-3">
Expand Down
2 changes: 1 addition & 1 deletion 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.1",
"version": "1.5.2",
"description": "Layered design system, based on Bootstrap",
"style": "dist/layered.css",
"sass": "src/layered.scss",
Expand Down
5 changes: 3 additions & 2 deletions src/_utilities.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,12 @@ $theme-colors: map-merge(
(
"primary-light": $primary-light,
"primary-lighter": $primary-lighter,
"blue": $blue,
"secondary-light": $gray-200,
"success-light": lighten($success, 50%),
"info-light": #DBEAFE,
"success-light": #D1FAE5,
"danger-light": lighten($danger, 40%),
"warning-light": lighten($warning, 40%),
"info-light": lighten($info, 50%),
)
);

Expand Down

0 comments on commit b4a3d54

Please sign in to comment.