mirror of
https://github.com/ariqnrnns/zauberhaft-astro.git
synced 2025-04-20 06:01:53 +02:00
Add public & CSS src files
This commit is contained in:
henk
parent
759c245979
commit
2804a5084f
134 changed files with 13244 additions and 0 deletions
BIN
public/favicon/favicon-16x16.png
Normal file
BIN
public/favicon/favicon-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 594 B |
BIN
public/favicon/favicon-180x180.png
Normal file
BIN
public/favicon/favicon-180x180.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6 KiB |
BIN
public/favicon/favicon-192x192.png
Normal file
BIN
public/favicon/favicon-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7 KiB |
BIN
public/favicon/favicon-32x32.png
Normal file
BIN
public/favicon/favicon-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
public/logo-40x40.png
Normal file
BIN
public/logo-40x40.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
4
public/robots.txt
Normal file
4
public/robots.txt
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
# Example: Allow all bots to scan and index your site.
|
||||||
|
# Full syntax: https://developers.google.com/search/docs/advanced/robots/create-robots-txt
|
||||||
|
User-agent: *
|
||||||
|
Allow: /
|
||||||
23
public/toggledarktheme.js
Normal file
23
public/toggledarktheme.js
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
var button = document.getElementById("switch");
|
||||||
|
var themeInStorage = localStorage.getItem('theme');
|
||||||
|
|
||||||
|
if (themeInStorage === 'dark') {
|
||||||
|
document.documentElement.setAttribute("data-theme", 'dark');
|
||||||
|
}
|
||||||
|
|
||||||
|
document.documentElement.setAttribute("data-theme", 'light');
|
||||||
|
localStorage.setItem('theme', 'light');
|
||||||
|
|
||||||
|
function changeMode(event) {
|
||||||
|
var existingDataTheme = document.documentElement.getAttribute('data-theme');
|
||||||
|
if (existingDataTheme === 'light') {
|
||||||
|
document.documentElement.setAttribute("data-theme", 'dark');
|
||||||
|
localStorage.setItem('theme', 'dark');
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
document.documentElement.setAttribute("data-theme", 'light');
|
||||||
|
localStorage.setItem('theme', 'light');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
button.addEventListener('change', changeMode, false);
|
||||||
207
src/components/Footer.astro
Normal file
207
src/components/Footer.astro
Normal file
|
|
@ -0,0 +1,207 @@
|
||||||
|
<footer id="footer" class="p-y-24 flex flex-column">
|
||||||
|
<!--Links-->
|
||||||
|
<div class="container container-xl">
|
||||||
|
<div class="footer-info border-none">
|
||||||
|
<ul class="footer-links">
|
||||||
|
<li class="m-r-8">
|
||||||
|
<a href="/" class="flex items-center">
|
||||||
|
<img
|
||||||
|
alt="Zauberhaft Logo"
|
||||||
|
src="/logo-40x40.png"
|
||||||
|
class="w-10 h-10"
|
||||||
|
width="100"
|
||||||
|
height="100"
|
||||||
|
/>
|
||||||
|
<div class="m-l-4 flex items-start flex-column">
|
||||||
|
<h1 class="h5 font-bold line-h-lg">Zauberhaft</h1>
|
||||||
|
<p class="small align-left">By Ravenbright CSS</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<ul class="footer-links xs-flex-wrap md-flex-no-wrap">
|
||||||
|
<li class="xs-m-b-8 sm-m-b-0 m-r-10">
|
||||||
|
<a href="#0" class="subtitle link-footer">Works</a>
|
||||||
|
</li>
|
||||||
|
<li class="xs-m-b-8 sm-m-b-0 m-r-10">
|
||||||
|
<a href="#0" class="subtitle link-footer">Services</a>
|
||||||
|
</li>
|
||||||
|
<li class="xs-m-b-8 sm-m-b-0 m-r-10">
|
||||||
|
<a href="#0" class="subtitle link-footer">About</a>
|
||||||
|
</li>
|
||||||
|
<li class="xs-m-b-8 sm-m-b-0 m-r-10">
|
||||||
|
<a href="#0" class="subtitle link-footer">Approach</a>
|
||||||
|
</li>
|
||||||
|
<li class="xs-m-b-8 sm-m-b-0">
|
||||||
|
<a href="#0" class="subtitle link-footer">Blog</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--Social media & copyright-->
|
||||||
|
<div class="container container-xl m-b-6">
|
||||||
|
<div class="footer-info">
|
||||||
|
<div class="footer-links">
|
||||||
|
<a
|
||||||
|
href="https://github.com/ravenbrightdesign/ravenbrightcss"
|
||||||
|
class="m-r-8"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="22"
|
||||||
|
height="22"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="currentColor"
|
||||||
|
stroke-width="2.25"
|
||||||
|
class="ai ai-GithubFill"
|
||||||
|
>
|
||||||
|
<title>GitHub link icon</title>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://www.figma.com/@ariqnarasaputra"
|
||||||
|
class="m-r-8"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
role="img"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
stroke-width="2"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<title>Figma link icon</title>
|
||||||
|
<path
|
||||||
|
d="M6 6C6 5.20435 6.31607 4.44129 6.87868 3.87868C7.44129 3.31607 8.20435 3 9 3H12V9H9C8.20435 9 7.44129 8.68393 6.87868 8.12132C6.31607 7.55871 6 6.79565 6 6Z"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"></path>
|
||||||
|
<path
|
||||||
|
d="M12 3H15C15.394 3 15.7841 3.0776 16.1481 3.22836C16.512 3.37913 16.8427 3.6001 17.1213 3.87868C17.3999 4.15726 17.6209 4.48797 17.7716 4.85195C17.9224 5.21593 18 5.60603 18 6C18 6.39397 17.9224 6.78407 17.7716 7.14805C17.6209 7.51203 17.3999 7.84274 17.1213 8.12132C16.8427 8.3999 16.512 8.62087 16.1481 8.77164C15.7841 8.9224 15.394 9 15 9H12V3Z"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"></path>
|
||||||
|
<path
|
||||||
|
d="M12 12C12 11.606 12.0776 11.2159 12.2284 10.8519C12.3791 10.488 12.6001 10.1573 12.8787 9.87868C13.1573 9.6001 13.488 9.37913 13.8519 9.22836C14.2159 9.0776 14.606 9 15 9C15.394 9 15.7841 9.0776 16.1481 9.22836C16.512 9.37913 16.8427 9.6001 17.1213 9.87868C17.3999 10.1573 17.6209 10.488 17.7716 10.8519C17.9224 11.2159 18 11.606 18 12C18 12.394 17.9224 12.7841 17.7716 13.1481C17.6209 13.512 17.3999 13.8427 17.1213 14.1213C16.8427 14.3999 16.512 14.6209 16.1481 14.7716C15.7841 14.9224 15.394 15 15 15C14.606 15 14.2159 14.9224 13.8519 14.7716C13.488 14.6209 13.1573 14.3999 12.8787 14.1213C12.6001 13.8427 12.3791 13.512 12.2284 13.1481C12.0776 12.7841 12 12.394 12 12V12Z"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"></path>
|
||||||
|
<path
|
||||||
|
d="M6 18C6 17.2044 6.31607 16.4413 6.87868 15.8787C7.44129 15.3161 8.20435 15 9 15H12V18C12 18.7956 11.6839 19.5587 11.1213 20.1213C10.5587 20.6839 9.79565 21 9 21C8.20435 21 7.44129 20.6839 6.87868 20.1213C6.31607 19.5587 6 18.7956 6 18Z"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"></path>
|
||||||
|
<path
|
||||||
|
d="M6 12C6 11.2044 6.31607 10.4413 6.87868 9.87868C7.44129 9.31607 8.20435 9 9 9H12V15H9C8.20435 15 7.44129 14.6839 6.87868 14.1213C6.31607 13.5587 6 12.7956 6 12Z"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="https://codepen.io/ariqnarasaputra"
|
||||||
|
class="m-r-8"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="22"
|
||||||
|
height="22"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="currentColor"
|
||||||
|
stroke-width="2.25"
|
||||||
|
class="ai ai-CodepenFill"
|
||||||
|
>
|
||||||
|
<title>Codepen link icon</title>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M11.372.19c.38-.253.875-.253 1.256 0L23.492 7.4c.317.21.508.565.508.946v7.308c0 .38-.19.736-.508.947l-10.864 7.21c-.38.252-.875.252-1.256 0L.508 16.6A1.136 1.136 0 0 1 0 15.654V8.346c0-.38.19-.736.508-.947L11.372.19zm-9.1 10.273v3.058l2.288-1.54-2.288-1.518zm4.337 2.878L3.18 15.648l7.684 5.1v-4.583L6.61 13.341zm6.527 2.824v4.582l7.684-5.1-3.43-2.306-4.254 2.824zm6.303-4.183l2.29 1.54v-3.06l-2.29 1.52zm1.371-3.636l-3.41 2.263-4.264-2.868V3.253l7.674 5.093zm-9.946-5.093V7.74l-4.263 2.868L3.19 8.346l7.674-5.093zM12 9.715l-3.35 2.254L12 14.192l3.35-2.223L12 9.715z"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<small
|
||||||
|
>Designed, developed & maintained by <a
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
href="https://github.com/ariqnrnns"
|
||||||
|
class="small underline">Ariq N</a
|
||||||
|
>
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--Descriptions-->
|
||||||
|
<div class="container container-xl">
|
||||||
|
<div class="flex flex-column">
|
||||||
|
<p class="footer-desc m-b-6 caption lg-w-50">
|
||||||
|
This website is built with
|
||||||
|
<a
|
||||||
|
href="https://ravenbrightcss.com"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
class="caption underline"
|
||||||
|
>
|
||||||
|
Ravenbright CSS
|
||||||
|
</a> Icons are courtesy of
|
||||||
|
<a
|
||||||
|
href="https://akaricons.com"
|
||||||
|
class="caption underline"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
Akar Icons
|
||||||
|
</a> &
|
||||||
|
<a
|
||||||
|
href="https://tabler-icons.io/"
|
||||||
|
class="caption underline"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>Tabler Icons
|
||||||
|
</a>. Photos are courtesy of <a
|
||||||
|
href="https://unsplash.com"
|
||||||
|
class="caption underline"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer">Unsplash</a
|
||||||
|
>. Typeface:
|
||||||
|
<a
|
||||||
|
href="https://www.fontshare.com/fonts/satoshi"
|
||||||
|
class="caption underline"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
Satoshi Font Family by Indian Type Foundry
|
||||||
|
</a>
|
||||||
|
. Placeholder Logo is using
|
||||||
|
<a
|
||||||
|
href="https://logoipsum.com/"
|
||||||
|
class="caption underline"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
Logoipsum.
|
||||||
|
</a>
|
||||||
|
Code released under
|
||||||
|
<a
|
||||||
|
class="caption underline"
|
||||||
|
href="https://github.com/ariqnrnns/zauberhaft-astro/blob/main/LICENSE.md"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
Apache License 2.0
|
||||||
|
</a>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
98
src/components/Header.astro
Normal file
98
src/components/Header.astro
Normal file
|
|
@ -0,0 +1,98 @@
|
||||||
|
|
||||||
|
<!--Nav for large screens-->
|
||||||
|
<header class="sticky flex items-center bg-white dark-bg-black h-20 lg-p-y-8">
|
||||||
|
<nav class="container container-xl flex justify-between items-center gap-8"
|
||||||
|
aria-label="primary nav">
|
||||||
|
<!--Links-->
|
||||||
|
<ul class="flex items-center gap-8">
|
||||||
|
<!--Logo-->
|
||||||
|
<li class="m-r-8">
|
||||||
|
<a href="/" class="flex items-center">
|
||||||
|
<img alt="Zauberhaft Logo" src="/logo-40x40.png" class="w-10 h-10" width="100" height="100">
|
||||||
|
<div class="m-l-4 flex items-start flex-column xs-d-none sm-flex">
|
||||||
|
<h1 class="h5 font-bold line-h-lg">Zauberhaft</h1>
|
||||||
|
<p class="small align-left">
|
||||||
|
By Ravenbright CSS
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
<li class="xs-d-none sm-flex">
|
||||||
|
<!--Toggle for dark mode-->
|
||||||
|
<fieldset>
|
||||||
|
<legend class="visually-hidden">Toggle for dark mode</legend>
|
||||||
|
<input class="toggle-input visually-hidden"
|
||||||
|
id="switch"
|
||||||
|
type="checkbox"
|
||||||
|
role="switch">
|
||||||
|
<label for="switch"
|
||||||
|
class="toggle-switch"
|
||||||
|
aria-label="toggle switch">
|
||||||
|
<span class="visually-hidden">Label for the toggle</span>
|
||||||
|
<span class="toggle-round"></span>
|
||||||
|
</label>
|
||||||
|
</fieldset>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<!--Hamburger button-->
|
||||||
|
<button class="btn-md p-0 bg-transparent gray-800 dark-gray-200 xs-d-flex md-d-none"
|
||||||
|
aria-label="Mobile menu"
|
||||||
|
aria-expanded="false">
|
||||||
|
<svg aria-label="hamburger menu"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="26"
|
||||||
|
height="26"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
class="ai ai-TextAlignJustified m-r-3">
|
||||||
|
<title>Mobile hamburger menu icon</title>
|
||||||
|
<path d="M3 6h18M3 12h18M3 18h18"></path>
|
||||||
|
</svg>
|
||||||
|
Menu
|
||||||
|
</button>
|
||||||
|
<ul
|
||||||
|
class="xs-d-none md-flex items-center gap-5 bg-gray-50 dark-bg-gray-800 dark-white md-p-r-4 md-p-l-6 md-p-y-3 radius-sm flex-wrap">
|
||||||
|
<!--Works-->
|
||||||
|
<li class="m-r-6">
|
||||||
|
<a href="#0" class="link-navbar">Works</a>
|
||||||
|
</li>
|
||||||
|
<!--About-->
|
||||||
|
<li class="m-r-6">
|
||||||
|
<a href="#0" class="link-navbar">About</a>
|
||||||
|
</li>
|
||||||
|
<!--Approach-->
|
||||||
|
<li class="m-r-4">
|
||||||
|
<a href="#0"
|
||||||
|
class="link-navbar">Approach</a>
|
||||||
|
</li>
|
||||||
|
<!--Button-->
|
||||||
|
<li class="">
|
||||||
|
<a href="https://ravenbrightdesign.gumroad.com"
|
||||||
|
class="btn bg-transparent blue-800 dark-blue-200 border-blue-400 dark-border-blue-400 btn-sm"
|
||||||
|
aria-label="download Astro template"
|
||||||
|
role="button">
|
||||||
|
Download Astro template
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="16"
|
||||||
|
height="16"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2.25"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
class="m-l-3 ai ai-Download">
|
||||||
|
<title>Download template icon</title>
|
||||||
|
<path d="M12 15V3m0 12l-4-4m4 4l4-4" />
|
||||||
|
<path d="M2 17l.621 2.485A2 2 0 0 0 4.561 21H19.439a2 2 0 0 0 1.94-1.515L22 17" />
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
9
src/data/siteMetadata.js
Normal file
9
src/data/siteMetadata.js
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
export default {
|
||||||
|
name: "Zauberhaft modern Astro Agency Template",
|
||||||
|
description: "Build modern & unique agency portfolio websites that convert. Supercharge your online presence & get more customers with responsive & high performance dark mode Astro template. Easily customize the template with utility classes & CSS custom properties.",
|
||||||
|
keywords: "Free HTML template, agency HTML template, free responsive HTML template, zero configuration, lightweight & minimal CSS library, dark mode HTML template, modern HTML template, HTML kit, UI template, HTML template, free HTML, free HTML responsive, Astro template, Free Astro template, Astro starter, Nextjs template, Free Nextjs template, Nextjs starter, Gatsby template, Free Gatsby template, Gatsby starter",
|
||||||
|
author: "Ariq N",
|
||||||
|
siteUrl: "https://zauberhaft.ravenbright.design",
|
||||||
|
GitHubUrl: "https://github.com/ariqnrnns/zauberhaft-astro",
|
||||||
|
language: "English"
|
||||||
|
};
|
||||||
104
src/layouts/Layout.astro
Normal file
104
src/layouts/Layout.astro
Normal file
|
|
@ -0,0 +1,104 @@
|
||||||
|
---
|
||||||
|
import "../styles/dist/ravenbright.min.css";
|
||||||
|
|
||||||
|
|
||||||
|
/* Load components */
|
||||||
|
import Header from "../components/Header.astro";
|
||||||
|
import Footer from "../components/Footer.astro";
|
||||||
|
|
||||||
|
/* Load site metadata */
|
||||||
|
import siteMetadata from "../data/siteMetadata.js";
|
||||||
|
|
||||||
|
const { title } = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta name="robots" content="index,follow" />
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||||
|
|
||||||
|
<title>{title}</title>
|
||||||
|
<meta name="description" content={siteMetadata.description} />
|
||||||
|
<meta name="keywords" content={siteMetadata.keywords} />
|
||||||
|
<meta name="author" content={siteMetadata.author} />
|
||||||
|
<meta name="language" content={siteMetadata.language} />
|
||||||
|
|
||||||
|
<!-- Open Graph Tags -->
|
||||||
|
<meta property="og:site_name" content={siteMetadata.author} />
|
||||||
|
<meta property="og:url" content={siteMetadata.siteUrl} />
|
||||||
|
<meta property="og:title" content={title} />
|
||||||
|
<meta property="og:locale" content="en_US" />
|
||||||
|
<meta property="og:description" content={siteMetadata.description} />
|
||||||
|
<meta property="og:image" content="https://example.com/image.jpg" />
|
||||||
|
<meta
|
||||||
|
property="og:image:alt"
|
||||||
|
content="A description of what is in the image (not a caption)"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Twiter Card Tags -->
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta name="twitter:title" content={title} />
|
||||||
|
<meta name="twitter:description" content={siteMetadata.description} />
|
||||||
|
<meta name="twitter:url" content={siteMetadata.name} />
|
||||||
|
<meta name="twitter:creator" content={siteMetadata.author} />
|
||||||
|
<meta name="twitter:image" content="https://example.com/image.jpg" />
|
||||||
|
<meta
|
||||||
|
name="twitter:image:alt"
|
||||||
|
content="A text description of the image conveying the essential nature of an image to users who are visually impaired. Maximum 420 characters."
|
||||||
|
/>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Font -->
|
||||||
|
<link rel="preconnect" href="https://api.fontshare.com/v2/" crossorigin />
|
||||||
|
<link
|
||||||
|
rel="preload"
|
||||||
|
as="style"
|
||||||
|
href="https://api.fontshare.com/v2/css?f=satoshi@900,700,500,400&display=swap"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://api.fontshare.com/v2/css?f=satoshi@900,700,500,400&display=swap"
|
||||||
|
media="print"
|
||||||
|
onload="this.media='all'"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Favicon -->
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="32x32"
|
||||||
|
href="/favicon/favicon-16x16.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="icon"
|
||||||
|
type="image/png"
|
||||||
|
sizes="16x16"
|
||||||
|
href="/favicon/favicon-32x32.png"
|
||||||
|
/>
|
||||||
|
<link
|
||||||
|
rel="apple-touch-icon"
|
||||||
|
sizes="180x180"
|
||||||
|
href="/favicon/favicon-180x180.png"
|
||||||
|
/>
|
||||||
|
<link rel="icon" sizes="192x192" href="/favicon/favicon-180x180.png" />
|
||||||
|
|
||||||
|
<!-- Links -->
|
||||||
|
<link rel="canonical" href="https://example.com/article" />
|
||||||
|
<link rel="manifest" href="manifest.json" />
|
||||||
|
|
||||||
|
<!-- Script -->
|
||||||
|
<script src="/toggledarktheme.js" defer></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<Header />
|
||||||
|
|
||||||
|
<slot />
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1244
src/pages/index.astro
Normal file
1244
src/pages/index.astro
Normal file
File diff suppressed because one or more lines are too long
535
src/styles/css-variable.css
Normal file
535
src/styles/css-variable.css
Normal file
|
|
@ -0,0 +1,535 @@
|
||||||
|
/*
|
||||||
|
* This file contains CSS variables, mixins & typography helpers.
|
||||||
|
*** Read Ravenbright CSS docs 👉: https://ravenbrightcss.com/docs/cssvar
|
||||||
|
* Steps to customize
|
||||||
|
*** 1. Download Ravenbright CSS 👉: https://github.com/ravenbrightdesign
|
||||||
|
*** 2. Run `npm install`
|
||||||
|
*** 3. Run `npm run dev`
|
||||||
|
*** 4. Change the CSS properties or values & it's done!
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@700,500,600,400&display=swap');
|
||||||
|
|
||||||
|
|
||||||
|
/* CSS variables
|
||||||
|
============================================= */
|
||||||
|
html,
|
||||||
|
html[data-theme="light"] {
|
||||||
|
/* Colors */
|
||||||
|
--rbrh-white: #fff;
|
||||||
|
--rbrh-black: #090f17;
|
||||||
|
--rbrh-gray-50: #f7f7f7;
|
||||||
|
--rbrh-gray-100: #ebeef3;
|
||||||
|
--rbrh-gray-200: #dfe4eb;
|
||||||
|
--rbrh-gray-300: #afbbce;
|
||||||
|
--rbrh-gray-400: #7e92b0;
|
||||||
|
--rbrh-gray-500: #5c7496;
|
||||||
|
--rbrh-gray-600: #385580;
|
||||||
|
--rbrh-gray-700: #1d2c42;
|
||||||
|
--rbrh-gray-800: #172335;
|
||||||
|
--rbrh-gray-900: #0f1723;
|
||||||
|
--rbrh-green-50: #f6fefa;
|
||||||
|
--rbrh-green-100: #e4fdf1;
|
||||||
|
--rbrh-green-200: #adf8d6;
|
||||||
|
--rbrh-green-300: #9df0cb;
|
||||||
|
--rbrh-green-400: #62e3a7;
|
||||||
|
--rbrh-green-500: #29d082;
|
||||||
|
--rbrh-green-600: #078848;
|
||||||
|
--rbrh-green-700: #054a2b;
|
||||||
|
--rbrh-green-800: #032114;
|
||||||
|
--rbrh-green-900: #04100a;
|
||||||
|
--rbrh-lime-50: #f8fcf7;
|
||||||
|
--rbrh-lime-100: #ebf7e9;
|
||||||
|
--rbrh-lime-200: #d0edcc;
|
||||||
|
--rbrh-lime-300: #c3e8bd;
|
||||||
|
--rbrh-lime-400: #9bd991;
|
||||||
|
--rbrh-lime-500: #59bf49;
|
||||||
|
--rbrh-lime-600: #050605;
|
||||||
|
--rbrh-lime-700: #1d310e;
|
||||||
|
--rbrh-lime-800: #0e1c04;
|
||||||
|
--rbrh-lime-900: #0b0f06;
|
||||||
|
--rbrh-cyan-50: #ebf9f9;
|
||||||
|
--rbrh-cyan-100: #c0eeec;
|
||||||
|
--rbrh-cyan-200: #a2e5e2;
|
||||||
|
--rbrh-cyan-300: #78d9d5;
|
||||||
|
--rbrh-cyan-400: #5dd2cd;
|
||||||
|
--rbrh-cyan-500: #35c7c1;
|
||||||
|
--rbrh-cyan-600: #098480;
|
||||||
|
--rbrh-cyan-700: #13716e;
|
||||||
|
--rbrh-cyan-800: #0e5653;
|
||||||
|
--rbrh-cyan-900: #0b4d4b;
|
||||||
|
--rbrh-teal-50: #e7f5f2;
|
||||||
|
--rbrh-teal-100: #d6f5ed;
|
||||||
|
--rbrh-teal-200: #acebdc;
|
||||||
|
--rbrh-teal-300: #7ae5cc;
|
||||||
|
--rbrh-teal-400: #42e0ba;
|
||||||
|
--rbrh-teal-500: #14cc9f;
|
||||||
|
--rbrh-teal-600: #048464;
|
||||||
|
--rbrh-teal-700: #077156;
|
||||||
|
--rbrh-teal-800: #053f31;
|
||||||
|
--rbrh-teal-900: #022019;
|
||||||
|
--rbrh-red-50: #fee7e7;
|
||||||
|
--rbrh-red-100: #fdd5d5;
|
||||||
|
--rbrh-red-200: #faafaf;
|
||||||
|
--rbrh-red-300: #ec757b;
|
||||||
|
--rbrh-red-400: #e85a61;
|
||||||
|
--rbrh-red-500: #e2313a;
|
||||||
|
--rbrh-red-600: #ce2d35;
|
||||||
|
--rbrh-red-700: #a02329;
|
||||||
|
--rbrh-red-800: #7c1b20;
|
||||||
|
--rbrh-red-900: #5f1518;
|
||||||
|
--rbrh-magenta-50: #ffedf4;
|
||||||
|
--rbrh-magenta-100: #ffc6dc;
|
||||||
|
--rbrh-magenta-200: #ff99c0;
|
||||||
|
--rbrh-magenta-300: #ff72a8;
|
||||||
|
--rbrh-magenta-400: #ff297a;
|
||||||
|
--rbrh-magenta-500: #ff0262;
|
||||||
|
--rbrh-magenta-600: #d90052;
|
||||||
|
--rbrh-magenta-700: #9f003c;
|
||||||
|
--rbrh-magenta-800: #77002d;
|
||||||
|
--rbrh-magenta-900: #3d0017;
|
||||||
|
--rbrh-orange-50: #fff2e6;
|
||||||
|
--rbrh-orange-100: #ffd6b0;
|
||||||
|
--rbrh-orange-200: #ffc28a;
|
||||||
|
--rbrh-orange-300: #fea654;
|
||||||
|
--rbrh-orange-400: #fe9533;
|
||||||
|
--rbrh-orange-500: #fe7a00;
|
||||||
|
--rbrh-orange-600: #e76f00;
|
||||||
|
--rbrh-orange-700: #b45700;
|
||||||
|
--rbrh-orange-800: #8c4300;
|
||||||
|
--rbrh-orange-900: #6b3300;
|
||||||
|
--rbrh-yellow-50: #fffae8;
|
||||||
|
--rbrh-yellow-100: #fff1c1;
|
||||||
|
--rbrh-yellow-200: #ffe899;
|
||||||
|
--rbrh-yellow-300: #ffe072;
|
||||||
|
--rbrh-yellow-400: #ffd74b;
|
||||||
|
--rbrh-yellow-500: #ffce24;
|
||||||
|
--rbrh-yellow-600: #e0ae00;
|
||||||
|
--rbrh-yellow-700: #aa8500;
|
||||||
|
--rbrh-yellow-800: #866800;
|
||||||
|
--rbrh-yellow-900: #5e4a00;
|
||||||
|
--rbrh-blue-50: #e9eefe;
|
||||||
|
--rbrh-blue-100: #d6dffe;
|
||||||
|
--rbrh-blue-200: #c3d0fd;
|
||||||
|
--rbrh-blue-300: #9db2fc;
|
||||||
|
--rbrh-blue-400: #2c58f8;
|
||||||
|
--rbrh-blue-500: rgb(8, 59, 244);
|
||||||
|
--rbrh-blue-600: #0732ce;
|
||||||
|
--rbrh-blue-700: #052495;
|
||||||
|
--rbrh-blue-800: #041b6f;
|
||||||
|
--rbrh-blue-900: #090f22;
|
||||||
|
--rbrh-sky-50: #e6f7fe;
|
||||||
|
--rbrh-sky-100: #d8f5ff;
|
||||||
|
--rbrh-sky-200: #a5e7ff;
|
||||||
|
--rbrh-sky-300: #78dbff;
|
||||||
|
--rbrh-sky-400: #5ad0fb;
|
||||||
|
--rbrh-sky-500: #00b2f1;
|
||||||
|
--rbrh-sky-600: #0c78a0;
|
||||||
|
--rbrh-sky-700: #086385;
|
||||||
|
--rbrh-sky-800: #08485f;
|
||||||
|
--rbrh-sky-900: #063b4c;
|
||||||
|
--rbrh-indigo-50: #eeedfe;
|
||||||
|
--rbrh-indigo-100: #cac6fc;
|
||||||
|
--rbrh-indigo-200: #b0abfa;
|
||||||
|
--rbrh-indigo-300: #8c84f8;
|
||||||
|
--rbrh-indigo-400: #756df7;
|
||||||
|
--rbrh-indigo-500: #5348f5;
|
||||||
|
--rbrh-indigo-600: #4c42df;
|
||||||
|
--rbrh-indigo-700: #3b33ae;
|
||||||
|
--rbrh-indigo-800: #040405;
|
||||||
|
--rbrh-indigo-900: #231e67;
|
||||||
|
--rbrh-purple-50: #f6ebff;
|
||||||
|
--rbrh-purple-100: #e4c4ff;
|
||||||
|
--rbrh-purple-200: #dcb0ff;
|
||||||
|
--rbrh-purple-300: #ca89ff;
|
||||||
|
--rbrh-purple-400: #af4eff;
|
||||||
|
--rbrh-purple-500: #8c00ff;
|
||||||
|
--rbrh-purple-600: #59039f;
|
||||||
|
--rbrh-purple-700: #480182;
|
||||||
|
--rbrh-purple-800: #2b004e;
|
||||||
|
--rbrh-purple-900: #150027;
|
||||||
|
--rbrh-violet-50: #eee9fd;
|
||||||
|
--rbrh-violet-100: #cbbbf8;
|
||||||
|
--rbrh-violet-200: #b29af4;
|
||||||
|
--rbrh-violet-300: #8f6cf0;
|
||||||
|
--rbrh-violet-400: #7950ed;
|
||||||
|
--rbrh-violet-500: #5824e8;
|
||||||
|
--rbrh-violet-600: #5021d3;
|
||||||
|
--rbrh-violet-700: #3e1aa5;
|
||||||
|
--rbrh-violet-800: #301480;
|
||||||
|
--rbrh-violet-900: #250f61;
|
||||||
|
/* Spacing */
|
||||||
|
--rbrh-spacing-0: 0rem;
|
||||||
|
--rbrh-spacing-1: 0.125rem;
|
||||||
|
--rbrh-spacing-2: 0.25rem;
|
||||||
|
--rbrh-spacing-3: 0.5rem;
|
||||||
|
--rbrh-spacing-4: 0.75rem;
|
||||||
|
--rbrh-spacing-5: 1rem;
|
||||||
|
--rbrh-spacing-6: 1.25rem;
|
||||||
|
--rbrh-spacing-7: 1.5rem;
|
||||||
|
--rbrh-spacing-8: 1.75rem;
|
||||||
|
--rbrh-spacing-9: 2rem;
|
||||||
|
--rbrh-spacing-10: 2.5rem;
|
||||||
|
--rbrh-spacing-12: 3rem;
|
||||||
|
--rbrh-spacing-14: 3.5rem;
|
||||||
|
--rbrh-spacing-16: 4rem;
|
||||||
|
--rbrh-spacing-18: 4.5rem;
|
||||||
|
--rbrh-spacing-20: 5rem;
|
||||||
|
--rbrh-spacing-22: 5.5rem;
|
||||||
|
--rbrh-spacing-24: 6rem;
|
||||||
|
--rbrh-screen-sm: 36rem;
|
||||||
|
--rbrh-screen-md: 55rem;
|
||||||
|
--rbrh-screen-lg: 67.5rem;
|
||||||
|
--rbrh-screen-xl: 81.25rem;
|
||||||
|
/* Typography */
|
||||||
|
--rbrh-font-family-sans: "Satoshi", "Helvetica", system-ui, sans-serif,
|
||||||
|
"Segoe UI", "Arial", "Verdana";
|
||||||
|
--rbrh-font-family-serif: serif, "Times", "Georgia", "Times New Roman";
|
||||||
|
--rbrh-font-weight-extrabold: 800;
|
||||||
|
--rbrh-font-weight-bold: 700;
|
||||||
|
--rbrh-font-weight-semibold: 600;
|
||||||
|
--rbrh-font-weight-medium: 500;
|
||||||
|
--rbrh-font-weight-default: 400;
|
||||||
|
--rbrh-font-weight-light: 300;
|
||||||
|
--rbrh-font-size-7xl: 5rem;
|
||||||
|
--rbrh-font-size-6xl: 3.5rem;
|
||||||
|
--rbrh-font-size-5xl: 2.9rem;
|
||||||
|
--rbrh-font-size-4xl: 2.1rem;
|
||||||
|
--rbrh-font-size-3xl: 1.8rem;
|
||||||
|
--rbrh-font-size-2xl: 1.5rem;
|
||||||
|
--rbrh-font-size-xl: 1.375rem;
|
||||||
|
--rbrh-font-size-lg: 1.25rem;
|
||||||
|
--rbrh-font-size-md: 1.125rem;
|
||||||
|
--rbrh-font-size-sm: 1rem;
|
||||||
|
--rbrh-font-size-xs: 0.875rem;
|
||||||
|
--rbrh-font-size-xxs: 0.75rem;
|
||||||
|
--rbrh-line-h-7xl: 5.25rem;
|
||||||
|
--rbrh-line-h-6xl: 3.75rem;
|
||||||
|
--rbrh-line-h-5xl: 3.15rem;
|
||||||
|
--rbrh-line-h-4xl: 2.5rem;
|
||||||
|
--rbrh-line-h-3xl: 2.2rem;
|
||||||
|
--rbrh-line-h-2xl: 2rem;
|
||||||
|
--rbrh-line-h-xl: 1.75rem;
|
||||||
|
--rbrh-line-h-lg: 1.5rem;
|
||||||
|
--rbrh-line-h-md: 1.5rem;
|
||||||
|
--rbrh-line-h-sm: 1.25rem;
|
||||||
|
--rbrh-line-h-xs: 1.25rem;
|
||||||
|
--rbrh-line-h-xxs: 1rem;
|
||||||
|
--rbrh-letter-spacing-lg: 0.0125rem;
|
||||||
|
--rbrh-letter-spacing-md: -0.025rem;
|
||||||
|
--rbrh-letter-spacing-sm: -0.0375rem;
|
||||||
|
--rbrh-letter-spacing-xs: -0.05rem;
|
||||||
|
/* Border radius */
|
||||||
|
--rbrh-radius-circle: 100rem;
|
||||||
|
--rbrh-radius-xl: 1.25rem;
|
||||||
|
--rbrh-radius-lg: 1rem;
|
||||||
|
--rbrh-radius-md: 0.75rem;
|
||||||
|
--rbrh-radius-sm: 0.5rem;
|
||||||
|
--rbrh-radius-xs: 0.25rem;
|
||||||
|
/* Box shadow */
|
||||||
|
--rbrh-shadow-xl: rgba(0, 0, 0, 0.1) 0px 16px 32px;
|
||||||
|
--rbrh-shadow-lg: rgba(0, 0, 0, 0.2) 0px 4px 48px -4px,
|
||||||
|
rgba(0, 0, 0, 0.25) 0px 4px 28px -4px;
|
||||||
|
--rbrh-shadow-md: 0 5px 40px -5px rgba(0, 0, 0, 0.1);
|
||||||
|
--rbrh-shadow-sm: 0px 4px 10px -8px rgba(0, 0, 0, 0.1),
|
||||||
|
0px 4px 10px -2px rgba(0, 0, 0, 0.1);
|
||||||
|
--rbrh-shadow-xs: 0px 2px 8px -3px rgba(0, 0, 0, 0.07),
|
||||||
|
0px 2px 8px -1px rgba(0, 0, 0, 0.08);
|
||||||
|
--rbrh-shadow-inset-xs: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
|
||||||
|
--rbrh-shadow-inset-sm: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.08);
|
||||||
|
--rbrh-shadow-inset-md: inset 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
|
||||||
|
/* Theming */
|
||||||
|
--rbrh-background-300: var(--rbrh-gray-300);
|
||||||
|
--rbrh-background-200: var(--rbrh-gray-200);
|
||||||
|
--rbrh-background-50: var(--rbrh-gray-50);
|
||||||
|
--rbrh-background: var(--rbrh-white);
|
||||||
|
|
||||||
|
--rbrh-border-500: var(--rbrh-gray-500);
|
||||||
|
--rbrh-border-400: var(--rbrh-gray-400);
|
||||||
|
--rbrh-border-300: var(--rbrh-gray-300);
|
||||||
|
--rbrh-border-200: var(--rbrh-gray-200);
|
||||||
|
--rbrh-border-100: var(--rbrh-gray-100);
|
||||||
|
|
||||||
|
--rbrh-text: var(--rbrh-black);
|
||||||
|
--rbrh-text-900: var(--rbrh-gray-900);
|
||||||
|
--rbrh-text-800: var(--rbrh-gray-800);
|
||||||
|
--rbrh-text-700: var(--rbrh-gray-700);
|
||||||
|
--rbrh-text-600: var(--rbrh-gray-600);
|
||||||
|
--rbrh-text-link-hover: inherit;
|
||||||
|
--rbrh-text-link: var(--rbrh-white);
|
||||||
|
|
||||||
|
--rbrh-shadow-focus: 0 0 0 0.3rem var(--rbrh-blue-400);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Font-family & background-color
|
||||||
|
============================================= */
|
||||||
|
body {
|
||||||
|
font-family: var(--rbrh-font-family-sans);
|
||||||
|
background-color: var(--rbrh-background);
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-theme="dark"] {
|
||||||
|
--rbrh-background-300: var(--rbrh-gray-600);
|
||||||
|
--rbrh-background-200: var(--rbrh-gray-700);
|
||||||
|
--rbrh-background-50: var(--rbrh-gray-800);
|
||||||
|
--rbrh-background: var(--rbrh-black);
|
||||||
|
|
||||||
|
--rbrh-border-500: var(--rbrh-gray-500);
|
||||||
|
--rbrh-border-400: var(--rbrh-gray-400);
|
||||||
|
--rbrh-border-300: var(--rbrh-gray-700);
|
||||||
|
--rbrh-border-200: var(--rbrh-gray-800);
|
||||||
|
--rbrh-border-100: var(--rbrh-gray-900);
|
||||||
|
|
||||||
|
--rbrh-text: var(--rbrh-gray-50);
|
||||||
|
--rbrh-text-900: var(--rbrh-gray-100);
|
||||||
|
--rbrh-text-800: var(--rbrh-gray-200);
|
||||||
|
--rbrh-text-700: var(--rbrh-gray-300);
|
||||||
|
--rbrh-text-600: var(--rbrh-gray-400);
|
||||||
|
--rbrh-text-link-hover: var(--rbrh-white);
|
||||||
|
--rbrh-text-link: var(--rbrh-white);
|
||||||
|
|
||||||
|
--rbrh-shadow-focus: 0 0 0 0.3rem var(--rbrh-blue-300);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Breakpoint mixins
|
||||||
|
============================================= */
|
||||||
|
@define-mixin screen-xs-up {
|
||||||
|
@media (min-width: 12.5rem) {
|
||||||
|
@mixin-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@define-mixin screen-sm-up {
|
||||||
|
@media (min-width: 36rem) {
|
||||||
|
@mixin-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@define-mixin screen-md-up {
|
||||||
|
@media (min-width: 55rem) {
|
||||||
|
@mixin-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@define-mixin screen-lg-up {
|
||||||
|
@media (min-width: 67.5rem) {
|
||||||
|
@mixin-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@define-mixin screen-xl-up {
|
||||||
|
@media (min-width: 81.25rem) {
|
||||||
|
@mixin-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@define-mixin screen-xxl-up {
|
||||||
|
@media (min-width: 100rem) {
|
||||||
|
@mixin-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Typography mixins
|
||||||
|
============================================= */
|
||||||
|
@define-mixin font-size-7xl {
|
||||||
|
font-size: var(--rbrh-font-size-7xl);
|
||||||
|
line-height: var(--rbrh-line-h-7xl);
|
||||||
|
letter-spacing: var(--rbrh-letter-spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
@define-mixin font-size-6xl {
|
||||||
|
font-size: var(--rbrh-font-size-6xl);
|
||||||
|
line-height: var(--rbrh-line-h-6xl);
|
||||||
|
letter-spacing: var(--rbrh-letter-spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
@define-mixin font-size-5xl {
|
||||||
|
font-size: var(--rbrh-font-size-5xl);
|
||||||
|
line-height: var(--rbrh-line-h-5xl);
|
||||||
|
letter-spacing: var(--rbrh-letter-spacing-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
@define-mixin font-size-4xl {
|
||||||
|
font-size: var(--rbrh-font-size-4xl);
|
||||||
|
line-height: var(--rbrh-line-h-4xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
@define-mixin font-size-3xl {
|
||||||
|
font-size: var(--rbrh-font-size-3xl);
|
||||||
|
line-height: var(--rbrh-line-h-3xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
@define-mixin font-size-2xl {
|
||||||
|
font-size: var(--rbrh-font-size-2xl);
|
||||||
|
line-height: var(--rbrh-line-h-xl);
|
||||||
|
letter-spacing: var(--rbrh-letter-spacing-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
@define-mixin font-size-xl {
|
||||||
|
font-size: var(--rbrh-font-size-xl);
|
||||||
|
line-height: var(--rbrh-line-h-xl);
|
||||||
|
letter-spacing: var(--rbrh-letter-spacing-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
@define-mixin font-size-lg {
|
||||||
|
font-size: var(--rbrh-font-size-lg);
|
||||||
|
line-height: var(--rbrh-line-h-md);
|
||||||
|
letter-spacing: var(--rbrh-letter-spacing-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
@define-mixin font-size-md {
|
||||||
|
font-size: var(--rbrh-font-size-md);
|
||||||
|
line-height: var(--rbrh-line-h-md);
|
||||||
|
letter-spacing: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@define-mixin font-size-sm {
|
||||||
|
font-size: var(--rbrh-font-size-sm);
|
||||||
|
line-height: var(--rbrh-line-h-md);
|
||||||
|
letter-spacing: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@define-mixin font-size-xs {
|
||||||
|
font-size: var(--rbrh-font-size-xs);
|
||||||
|
line-height: var(--rbrh-line-h-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
@define-mixin font-size-xxs {
|
||||||
|
font-size: var(--rbrh-font-size-xxs);
|
||||||
|
line-height: var(--rbrh-line-h-xxs);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Font size
|
||||||
|
============================================= */
|
||||||
|
@mixin screen-xs-up {
|
||||||
|
|
||||||
|
h1,
|
||||||
|
.h1 {
|
||||||
|
@mixin font-size-5xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2,
|
||||||
|
.h2 {
|
||||||
|
@mixin font-size-4xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3,
|
||||||
|
.h3 {
|
||||||
|
@mixin font-size-3xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4,
|
||||||
|
.h4 {
|
||||||
|
@mixin font-size-2xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5,
|
||||||
|
.h5 {
|
||||||
|
@mixin font-size-xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6,
|
||||||
|
.h6 {
|
||||||
|
@mixin font-size-lg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin screen-lg-up {
|
||||||
|
|
||||||
|
h1,
|
||||||
|
.h1 {
|
||||||
|
@mixin font-size-7xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2,
|
||||||
|
.h2 {
|
||||||
|
@mixin font-size-6xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3,
|
||||||
|
.h3 {
|
||||||
|
@mixin font-size-5xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4,
|
||||||
|
.h4 {
|
||||||
|
@mixin font-size-4xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5,
|
||||||
|
.h5 {
|
||||||
|
@mixin font-size-2xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6,
|
||||||
|
.h6 {
|
||||||
|
@mixin font-size-lg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p,
|
||||||
|
.par {
|
||||||
|
@mixin font-size-md;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle,
|
||||||
|
label,
|
||||||
|
summary {
|
||||||
|
@mixin font-size-sm;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
small,
|
||||||
|
.small {
|
||||||
|
@mixin font-size-xxs;
|
||||||
|
}
|
||||||
|
|
||||||
|
.caption {
|
||||||
|
@mixin font-size-xs;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Text styles
|
||||||
|
============================================= */
|
||||||
|
.h1,
|
||||||
|
h1 {
|
||||||
|
color: var(--rbrh-text-900);
|
||||||
|
font-weight: var(--rbrh-font-weight-bold);
|
||||||
|
word-break: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h2,
|
||||||
|
h2,
|
||||||
|
.h3,
|
||||||
|
h3,
|
||||||
|
.h4,
|
||||||
|
h4 {
|
||||||
|
color: var(--rbrh-text-900);
|
||||||
|
font-weight: var(--rbrh-font-weight-bold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.h5,
|
||||||
|
h5,
|
||||||
|
.h6,
|
||||||
|
h6 {
|
||||||
|
color: var(--rbrh-text-800);
|
||||||
|
font-weight: var(--rbrh-font-weight-bold);
|
||||||
|
}
|
||||||
|
|
||||||
|
p,
|
||||||
|
a,
|
||||||
|
span,
|
||||||
|
li {
|
||||||
|
font-weight: var(--rbrh-font-weight-medium);
|
||||||
|
color: var(--rbrh-text-800);
|
||||||
|
}
|
||||||
|
|
||||||
|
small,
|
||||||
|
label,
|
||||||
|
cite,
|
||||||
|
summary {
|
||||||
|
color: var(--rbrh-text-700);
|
||||||
|
}
|
||||||
|
|
||||||
|
summary {
|
||||||
|
font-weight: var(--rbrh-font-weight-semibold);
|
||||||
|
}
|
||||||
2
src/styles/dist/ravenbright.min.css
vendored
Normal file
2
src/styles/dist/ravenbright.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
98
src/styles/main.css
Normal file
98
src/styles/main.css
Normal file
|
|
@ -0,0 +1,98 @@
|
||||||
|
/*! purgecss start ignore */
|
||||||
|
/*! Ravenbright CSS [1.0.1] [https://ravenbrightcss.com] [Apache License 2.0] [https://github.com/ravenbrightdesign/ravenbrightcss/blob/main/LICENSE.md] */
|
||||||
|
/*! purgecss end ignore */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* **********************************************
|
||||||
|
* Hello everyone 👋
|
||||||
|
* This is the entry point for all Ravenbright CSS features (without dark mode)
|
||||||
|
* 🚀 It's easy to get started: run 'npm install', run 'npm run dev', & it's done!
|
||||||
|
* **********************************************
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
* **********************************************
|
||||||
|
* 📟 CSS reset & CSS variable
|
||||||
|
* **********************************************
|
||||||
|
*/
|
||||||
|
@import "/src/reset.css";
|
||||||
|
@import "/src/css-variable.css";
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 📦 Minimal components
|
||||||
|
*/
|
||||||
|
@import "src/components/alert.css";
|
||||||
|
@import "src/components/badge.css";
|
||||||
|
@import "src/components/button.css";
|
||||||
|
@import "src/components/card.css";
|
||||||
|
@import "src/components/toggle.css";
|
||||||
|
@import "src/components/footer.css";
|
||||||
|
@import "src/components/section.css";
|
||||||
|
@import "src/components/navbar.css";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* ☀️ Light mode (without dark mode)
|
||||||
|
* Note that: 'bg' means background
|
||||||
|
* Black & white color is included in 'gray';
|
||||||
|
*/
|
||||||
|
@import "src/utilities/light-mode/bg-gray.css";
|
||||||
|
@import "src/utilities/light-mode/bg-blue.css";
|
||||||
|
@import "src/utilities/light-mode/bg-yellow.css";
|
||||||
|
@import "src/utilities/light-mode/border-gray.css";
|
||||||
|
@import "src/utilities/light-mode/border-blue.css";
|
||||||
|
@import "src/utilities/light-mode/border-yellow.css";
|
||||||
|
@import "src/utilities/light-mode/gray.css";
|
||||||
|
@import "src/utilities/light-mode/blue.css";
|
||||||
|
@import "src/utilities/light-mode/yellow.css";
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 🌙 Dark mode utility classes
|
||||||
|
*/
|
||||||
|
@import "src/utilities/dark-mode/dark-bg-gray.css";
|
||||||
|
@import "src/utilities/dark-mode/dark-bg-blue.css";
|
||||||
|
@import "src/utilities/dark-mode/dark-bg-yellow.css";
|
||||||
|
@import "src/utilities/dark-mode/dark-border-gray.css";
|
||||||
|
@import "src/utilities/dark-mode/dark-border-blue.css";
|
||||||
|
@import "src/utilities/dark-mode/dark-border-yellow.css";
|
||||||
|
@import "src/utilities/dark-mode/dark-gray.css";
|
||||||
|
@import "src/utilities/dark-mode/dark-blue.css";
|
||||||
|
@import "src/utilities/dark-mode/dark-yellow.css";
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 🧲 General utility classes (without responsive sizing)
|
||||||
|
*/
|
||||||
|
@import "src/utilities/bg-size.css";
|
||||||
|
@import "src/utilities/object.css";
|
||||||
|
|
||||||
|
@import "src/utilities/border-radius.css";
|
||||||
|
@import "src/utilities/border-width.css";
|
||||||
|
@import "src/utilities/typography.css";
|
||||||
|
@import "src/utilities/shadow.css";
|
||||||
|
@import "src/utilities/display.css";
|
||||||
|
|
||||||
|
@import "src/utilities/container.css";
|
||||||
|
@import "src/utilities/flexbox.css";
|
||||||
|
@import "src/utilities/grid.css";
|
||||||
|
|
||||||
|
@import "src/utilities/height.css";
|
||||||
|
@import "src/utilities/padding.css";
|
||||||
|
@import "src/utilities/margin.css";
|
||||||
|
@import "src/utilities/width.css";
|
||||||
|
|
||||||
|
/*
|
||||||
|
* 📐 Responsive sizing
|
||||||
|
*/
|
||||||
|
@import "src/utilities/responsive-display.css";
|
||||||
|
@import "src/utilities/responsive-flexbox.css";
|
||||||
|
@import "src/utilities/responsive-grid.css";
|
||||||
|
@import "src/utilities/responsive-height.css";
|
||||||
|
@import "src/utilities/responsive-margin.css";
|
||||||
|
@import "src/utilities/responsive-padding.css";
|
||||||
|
|
||||||
|
@import "src/utilities/responsive-container.css";
|
||||||
|
@import "src/utilities/responsive-width.css";
|
||||||
|
|
||||||
187
src/styles/reset.css
Normal file
187
src/styles/reset.css
Normal file
|
|
@ -0,0 +1,187 @@
|
||||||
|
/* Ravenbright CSS reset
|
||||||
|
============================================= */
|
||||||
|
html {
|
||||||
|
box-sizing: border-box;
|
||||||
|
word-break: normal;
|
||||||
|
tab-size: 4;
|
||||||
|
width: 100%;
|
||||||
|
line-height: 1.25;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
*,
|
||||||
|
*:before,
|
||||||
|
*:after {
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
font-family: -apple-system, sans-serif, "Segoe UI", Arial;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
Accessible way to hide elements visually for screen readers
|
||||||
|
*/
|
||||||
|
.visually-hidden {
|
||||||
|
clip-path: inset(50%);
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
position: absolute;
|
||||||
|
white-space: nowrap;
|
||||||
|
background-color: var(--rbrh-black);
|
||||||
|
color: var(--rbrh-white);
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
Accordion
|
||||||
|
*/
|
||||||
|
main,
|
||||||
|
details {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
summary {
|
||||||
|
display: list-item;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
Button & link
|
||||||
|
*/
|
||||||
|
a:focus,
|
||||||
|
a:focus-visible {
|
||||||
|
box-shadow: var(--rbrh-shadow-focus);
|
||||||
|
}
|
||||||
|
button,
|
||||||
|
[role="button"],
|
||||||
|
[type="button"],
|
||||||
|
input,
|
||||||
|
textarea,
|
||||||
|
select,
|
||||||
|
summary {
|
||||||
|
font: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
button,
|
||||||
|
[role="button"],
|
||||||
|
[type="button"],
|
||||||
|
.btn {
|
||||||
|
text-transform: none;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
text-shadow: none;
|
||||||
|
height: fit-content;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.spread-link {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 1;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
&:focus-visible {
|
||||||
|
padding: 0;
|
||||||
|
border: none;
|
||||||
|
outline: 0;
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
Forms
|
||||||
|
*/
|
||||||
|
form label,
|
||||||
|
fieldset label {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
fieldset {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
Image
|
||||||
|
*/
|
||||||
|
hr {
|
||||||
|
height: 0;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
img,
|
||||||
|
picture {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
svg {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
Lists
|
||||||
|
*/
|
||||||
|
ol,
|
||||||
|
ul,
|
||||||
|
li {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
Table
|
||||||
|
*/
|
||||||
|
table {
|
||||||
|
display: table;
|
||||||
|
border-collapse: collapse;
|
||||||
|
table-layout: fixed;
|
||||||
|
text-indent: 0;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
border-color: inherit;
|
||||||
|
}
|
||||||
|
caption,
|
||||||
|
th,
|
||||||
|
tr,
|
||||||
|
td {
|
||||||
|
text-align: left;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
}
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
Typography
|
||||||
|
*/
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
p,
|
||||||
|
a,
|
||||||
|
figure,
|
||||||
|
blockquote {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
small {
|
||||||
|
font-size: 75%;
|
||||||
|
}
|
||||||
|
pre,
|
||||||
|
video {
|
||||||
|
overflow: auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
code,
|
||||||
|
pre,
|
||||||
|
kbd {
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
19
src/styles/src/components/alert.css
Normal file
19
src/styles/src/components/alert.css
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
/* To debug & customize this component,
|
||||||
|
check 👉 src/css-variable.css
|
||||||
|
============================================= */
|
||||||
|
.alert {
|
||||||
|
display: flex;
|
||||||
|
color: var(--rbrh-text-800);
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
padding: var(--rbrh-spacing-5) var(--rbrh-spacing-6);
|
||||||
|
overflow: hidden;
|
||||||
|
font-weight: var(--rbrh-font-weight-medium);
|
||||||
|
}
|
||||||
|
/* Variants
|
||||||
|
============================================= */
|
||||||
|
.alert-neutral {
|
||||||
|
background-color: var(--rbrh-background-200);
|
||||||
|
color: var(--rbrh-text-900);
|
||||||
|
border-bottom: 1px solid var(--rbrh-border-400);
|
||||||
|
}
|
||||||
65
src/styles/src/components/badge.css
Normal file
65
src/styles/src/components/badge.css
Normal file
|
|
@ -0,0 +1,65 @@
|
||||||
|
/* To debug & customize this component,
|
||||||
|
check 👉 src/css-variable.css
|
||||||
|
============================================= */
|
||||||
|
/* Base badge
|
||||||
|
============================================= */
|
||||||
|
.badge {
|
||||||
|
display: flex;
|
||||||
|
border-radius: var(--rbrh-radius-md);
|
||||||
|
width: fit-content;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
overflow: hidden;
|
||||||
|
font-weight: var(--rbrh-font-weight-medium);
|
||||||
|
flex-shrink: 0
|
||||||
|
}
|
||||||
|
.badge svg, .badge-icon svg {
|
||||||
|
display: inline;
|
||||||
|
flex-shrink: 0
|
||||||
|
}
|
||||||
|
.badge-icon {
|
||||||
|
border-radius: var(--rbrh-radius-circle);
|
||||||
|
line-height: 0;
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-shrink: 0
|
||||||
|
}
|
||||||
|
/* Variants
|
||||||
|
============================================= */
|
||||||
|
.badge-xs {
|
||||||
|
@mixin font-size-xxs;
|
||||||
|
padding: var(--rbrh-spacing-1) var(--rbrh-spacing-2);
|
||||||
|
}
|
||||||
|
.badge-sm {
|
||||||
|
@mixin font-size-xs;
|
||||||
|
padding: var(--rbrh-spacing-2) var(--rbrh-spacing-3);
|
||||||
|
}
|
||||||
|
.badge-md {
|
||||||
|
@mixin font-size-sm;
|
||||||
|
padding: var(--rbrh-spacing-3) var(--rbrh-spacing-4);
|
||||||
|
}
|
||||||
|
.badge-lg {
|
||||||
|
@mixin font-size-md;
|
||||||
|
padding: var(--rbrh-spacing-3) var(--rbrh-spacing-6);
|
||||||
|
}
|
||||||
|
.badge-icon-xs {
|
||||||
|
width: var(--rbrh-spacing-7);
|
||||||
|
height: var(--rbrh-spacing-7);
|
||||||
|
@mixin font-size-xs;
|
||||||
|
}
|
||||||
|
.badge-icon-sm {
|
||||||
|
width: var(--rbrh-spacing-9);
|
||||||
|
height: var(--rbrh-spacing-9);
|
||||||
|
@mixin font-size-xs;
|
||||||
|
}
|
||||||
|
.badge-icon-md {
|
||||||
|
width: var(--rbrh-spacing-12);
|
||||||
|
height: var(--rbrh-spacing-12);
|
||||||
|
@mixin font-size-sm;
|
||||||
|
}
|
||||||
|
.badge-icon-lg {
|
||||||
|
width: var(--rbrh-spacing-15);
|
||||||
|
height: var(--rbrh-spacing-15);
|
||||||
|
@mixin font-size-md;
|
||||||
|
}
|
||||||
62
src/styles/src/components/button.css
Normal file
62
src/styles/src/components/button.css
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
/* To debug & customize this component,
|
||||||
|
check 👉 src/css-variable.css
|
||||||
|
============================================= */
|
||||||
|
/* Base button
|
||||||
|
============================================= */
|
||||||
|
button,
|
||||||
|
.btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-weight: var(--rbrh-font-weight-semibold);
|
||||||
|
background-color: var(--rbrh-blue-600);
|
||||||
|
border-radius: var(--rbrh-radius-sm);
|
||||||
|
color: var(--rbrh-white);
|
||||||
|
padding: var(--rbrh-spacing-4) var(--rbrh-spacing-6);
|
||||||
|
&:hover {
|
||||||
|
transform: translateY(-3px);
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
}
|
||||||
|
&:target,
|
||||||
|
&:focus {
|
||||||
|
box-shadow: var(--rbrh-shadow-focus);
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
transform: translate(var(--rbrh-spacing-1), var(--rbrh-spacing-1));
|
||||||
|
box-shadow: 0 1px 2px var(--rbrh-gray-100) inset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* Variants
|
||||||
|
============================================= */
|
||||||
|
.btn-sm {
|
||||||
|
padding: var(--rbrh-spacing-3) var(--rbrh-spacing-5);
|
||||||
|
@mixin font-size-xs;
|
||||||
|
}
|
||||||
|
.btn-md {
|
||||||
|
padding: var(--rbrh-spacing-4) var(--rbrh-spacing-6);
|
||||||
|
font-size: var(--rbrh-font-size-xs);
|
||||||
|
line-height: var(--rbrh-line-h-sm);
|
||||||
|
}
|
||||||
|
.btn-lg {
|
||||||
|
padding: var(--rbrh-spacing-5) var(--rbrh-spacing-7);
|
||||||
|
@mixin font-size-md;
|
||||||
|
}
|
||||||
|
/* Absolute button
|
||||||
|
============================================= */
|
||||||
|
.btn-absolute {
|
||||||
|
background-color: var(--rbrh-background-50);
|
||||||
|
@mixin screen-xs-up {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
@mixin screen-sm-up {
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
bottom: var(--rbrh-spacing-5);
|
||||||
|
right: var(--rbrh-spacing-5);
|
||||||
|
box-shadow: var(--rbrh-shadow-sm);
|
||||||
|
width: fit-content;
|
||||||
|
z-index: 1000;
|
||||||
|
min-width: fit-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
49
src/styles/src/components/card.css
Normal file
49
src/styles/src/components/card.css
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
/* To debug & customize this component,
|
||||||
|
check 👉 src/css-variable.css
|
||||||
|
============================================= */
|
||||||
|
/* Base card
|
||||||
|
============================================= */
|
||||||
|
.card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: left;
|
||||||
|
justify-content: space-between;
|
||||||
|
background-color: var(--rbrh-background-50);
|
||||||
|
border-radius: var(--rbrh-radius-lg);
|
||||||
|
padding: var(--rbrh-spacing-5) var(--rbrh-spacing-7);
|
||||||
|
height: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Variants
|
||||||
|
============================================= */
|
||||||
|
.clickable {
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
font-weight: var(--rbrh-font-weight-semibold);
|
||||||
|
&:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
transition-property: transform;
|
||||||
|
transform: scale(0.98);
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 500ms;
|
||||||
|
}
|
||||||
|
&:target,
|
||||||
|
&:focus {
|
||||||
|
box-shadow: var(--rbrh-shadow-focus);
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Gradient
|
||||||
|
============================================= */
|
||||||
|
html {
|
||||||
|
--shadow-gradient: 0px 2px 32px 4px rgba(8, 59, 244, 0.3);
|
||||||
|
}
|
||||||
|
[data-theme="dark"] .card.shadow-gradient {
|
||||||
|
box-shadow: var(--shadow-gradient);
|
||||||
|
background: var(--rbrh-gray-80);
|
||||||
|
backdrop-filter: blur(16px);
|
||||||
|
-webkit-backdrop-filter: blur(16px);
|
||||||
|
}
|
||||||
83
src/styles/src/components/footer.css
Normal file
83
src/styles/src/components/footer.css
Normal file
|
|
@ -0,0 +1,83 @@
|
||||||
|
/* To debug & customize this component,
|
||||||
|
check 👉 src/css-variable.css
|
||||||
|
============================================= */
|
||||||
|
footer {
|
||||||
|
background-color: var(--rbrh-footer-background);
|
||||||
|
}
|
||||||
|
/* Base footer
|
||||||
|
============================================= */
|
||||||
|
.footer-main {
|
||||||
|
display: grid;
|
||||||
|
@mixin screen-xs-up {
|
||||||
|
grid-template-columns: repeat(1, minmax(auto, 1fr));
|
||||||
|
grid-gap: var(--rbrh-spacing-12);
|
||||||
|
}
|
||||||
|
@mixin screen-md-up {
|
||||||
|
grid-template-columns: repeat(2, minmax(auto, 1fr));
|
||||||
|
grid-gap: var(--rbrh-spacing-16);
|
||||||
|
gap: var(--rbrh-spacing-16);
|
||||||
|
}
|
||||||
|
@mixin screen-xl-up {
|
||||||
|
grid-template-columns: repeat(6, minmax(auto, 1fr));
|
||||||
|
grid-gap: var(--rbrh-spacing-12);
|
||||||
|
gap: var(--rbrh-spacing-12);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Logo, site links, social media links & copyright
|
||||||
|
============================================= */
|
||||||
|
.footer-info {
|
||||||
|
border-top: 1px solid var(--rbrh-border-200);
|
||||||
|
border-bottom: 1px solid var(--rbrh-border-200);
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
column-gap: var(--rbrh-spacing-24);
|
||||||
|
padding-top: var(--rbrh-spacing-6);
|
||||||
|
padding-bottom: var(--rbrh-spacing-6);
|
||||||
|
@mixin screen-xs-up {
|
||||||
|
flex-direction: column;
|
||||||
|
row-gap: var(--rbrh-spacing-4);
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
@mixin screen-md-up {
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* Links inside the footer
|
||||||
|
============================================= */
|
||||||
|
.footer-links {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.footer-links:not(:last-child) {
|
||||||
|
@mixin screen-xs-up {
|
||||||
|
margin-bottom: var(--rbrh-spacing-5);
|
||||||
|
}
|
||||||
|
@mixin screen-md-up {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
@mixin screen-lg-up {
|
||||||
|
margin-right: var(--rbrh-spacing-4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Additional & helper text
|
||||||
|
============================================= */
|
||||||
|
|
||||||
|
.footer-desc {
|
||||||
|
font-size: var(--rbrh-font-size-xs);
|
||||||
|
color: var(--rbrh-text-800);
|
||||||
|
@mixin screen-xs-up {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
@mixin screen-md-up {
|
||||||
|
width: 65%;
|
||||||
|
}
|
||||||
|
@mixin screen-lg-up {
|
||||||
|
width: 45%;
|
||||||
|
}
|
||||||
|
}
|
||||||
31
src/styles/src/components/navbar.css
Normal file
31
src/styles/src/components/navbar.css
Normal file
|
|
@ -0,0 +1,31 @@
|
||||||
|
/* Hover states
|
||||||
|
============================================= */
|
||||||
|
.link-footer, .link-navbar {
|
||||||
|
&:hover,
|
||||||
|
&:focus {
|
||||||
|
text-decoration: underline;
|
||||||
|
text-underline-offset: 0.4em;
|
||||||
|
color: var(--rbrh-text-link-hover);
|
||||||
|
text-decoration-color: var(--rbrh-text-link-hover);
|
||||||
|
font-weight: var(--rbrh-font-weight-bold);
|
||||||
|
text-decoration-thickness: 0.1em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* Sticky navbar
|
||||||
|
============================================= */
|
||||||
|
.sticky {
|
||||||
|
@mixin screen-xs-up {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
@mixin screen-sm-up {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
background-color: var(--rbrh-background);
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
@mixin screen-lg-up {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
}
|
||||||
63
src/styles/src/components/section.css
Normal file
63
src/styles/src/components/section.css
Normal file
|
|
@ -0,0 +1,63 @@
|
||||||
|
/* To debug & customize this component,
|
||||||
|
check 👉 src/css-variable.css
|
||||||
|
============================================= */
|
||||||
|
/* Make everything is centered
|
||||||
|
============================================= */
|
||||||
|
.all-center {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
@mixin screen-xs-up {
|
||||||
|
text-align: left;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
@mixin screen-md-up {
|
||||||
|
text-align: center;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.all-center:not(.grid) {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
/* One screen divided in two
|
||||||
|
============================================= */
|
||||||
|
.split-screen {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
@mixin screen-xs-up {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
@mixin screen-md-up {
|
||||||
|
align-items: center;
|
||||||
|
align-content: center;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.split-screen > img {
|
||||||
|
border-radius: var(--rbrh-radius-md);
|
||||||
|
@mixin screen-xs-up {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
@mixin screen-md-up {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Gradient
|
||||||
|
============================================= */
|
||||||
|
html .cta-section,
|
||||||
|
[data-theme="light"] .cta-section {
|
||||||
|
background: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgba(129, 75, 246, 0) 0%,
|
||||||
|
rgba(161, 121, 249, 0.19) 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="dark"] .cta-section {
|
||||||
|
background: var(--rbrh-blue-900);
|
||||||
|
}
|
||||||
48
src/styles/src/components/toggle.css
Normal file
48
src/styles/src/components/toggle.css
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
/* To debug & customize this component,
|
||||||
|
check 👉 src/css-variable.css
|
||||||
|
============================================= */
|
||||||
|
/* Base toggle
|
||||||
|
============================================= */
|
||||||
|
.toggle-round {
|
||||||
|
display: flex;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
|
background-color: var(--rbrh-white);
|
||||||
|
border-radius: 50%;
|
||||||
|
transition: var(--transition);
|
||||||
|
box-shadow: 0 4px 20px rgba(162, 159, 159, 0.35);
|
||||||
|
|
||||||
|
/*Moon emoji*/
|
||||||
|
&:before {
|
||||||
|
content: "\1F31E";
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* States
|
||||||
|
============================================= */
|
||||||
|
.toggle-input:checked + .toggle-switch {
|
||||||
|
.toggle-round {
|
||||||
|
border: 1px solid var(--rbrh-gray-100);
|
||||||
|
box-shadow: var(--rbrh-shadow-sm);
|
||||||
|
|
||||||
|
background-color: var(--rbrh-gray-700);
|
||||||
|
border: 1px solid var(--rbrh-gray-700);
|
||||||
|
/*Sun emoji*/
|
||||||
|
&::before {
|
||||||
|
border: none;
|
||||||
|
content: "\1F31C";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.toggle-switch:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.toggle-input:focus + .toggle-round {
|
||||||
|
box-shadow: var(--rbrh-shadow-focus);
|
||||||
|
outline: 0;
|
||||||
|
}
|
||||||
537
src/styles/src/css-variable.css
Normal file
537
src/styles/src/css-variable.css
Normal file
|
|
@ -0,0 +1,537 @@
|
||||||
|
/*
|
||||||
|
* This file contains CSS variables (without dark mode), mixins & typography helpers.
|
||||||
|
*** Read Ravenbright CSS docs 👉: https://ravenbrightcss.com/docs/customize/cssvariables
|
||||||
|
* Steps to customize
|
||||||
|
*** 1. Download Ravenbright CSS 👉: https://github.com/ravenbrightdesign/ravenbrightcss
|
||||||
|
*** 2. Run `npm install`
|
||||||
|
*** 3. Run `npm run dev`
|
||||||
|
*** 4. Change the CSS properties or values & it's done!
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@700,500,600,400&display=swap');
|
||||||
|
|
||||||
|
|
||||||
|
/* CSS variables
|
||||||
|
============================================= */
|
||||||
|
html,
|
||||||
|
[data-theme="light"] {
|
||||||
|
/* Colors */
|
||||||
|
--rbrh-white: #fff;
|
||||||
|
--rbrh-black: #090f17;
|
||||||
|
--rbrh-gray-50: #f7f7f7;
|
||||||
|
--rbrh-gray-100: #ebeef3;
|
||||||
|
--rbrh-gray-200: #dfe4eb;
|
||||||
|
--rbrh-gray-300: #afbbce;
|
||||||
|
--rbrh-gray-400: #7e92b0;
|
||||||
|
--rbrh-gray-500: #5c7496;
|
||||||
|
--rbrh-gray-600: #385580;
|
||||||
|
--rbrh-gray-700: #1d2c42;
|
||||||
|
--rbrh-gray-800: #172335;
|
||||||
|
--rbrh-gray-900: #0f1723;
|
||||||
|
--rbrh-green-50: #f6fefa;
|
||||||
|
--rbrh-green-100: #e4fdf1;
|
||||||
|
--rbrh-green-200: #adf8d6;
|
||||||
|
--rbrh-green-300: #9df0cb;
|
||||||
|
--rbrh-green-400: #62e3a7;
|
||||||
|
--rbrh-green-500: #29d082;
|
||||||
|
--rbrh-green-600: #078848;
|
||||||
|
--rbrh-green-700: #054a2b;
|
||||||
|
--rbrh-green-800: #032114;
|
||||||
|
--rbrh-green-900: #04100a;
|
||||||
|
--rbrh-lime-50: #f8fcf7;
|
||||||
|
--rbrh-lime-100: #ebf7e9;
|
||||||
|
--rbrh-lime-200: #d0edcc;
|
||||||
|
--rbrh-lime-300: #c3e8bd;
|
||||||
|
--rbrh-lime-400: #9bd991;
|
||||||
|
--rbrh-lime-500: #59bf49;
|
||||||
|
--rbrh-lime-600: #050605;
|
||||||
|
--rbrh-lime-700: #1d310e;
|
||||||
|
--rbrh-lime-800: #0e1c04;
|
||||||
|
--rbrh-lime-900: #0b0f06;
|
||||||
|
--rbrh-cyan-50: #ebf9f9;
|
||||||
|
--rbrh-cyan-100: #c0eeec;
|
||||||
|
--rbrh-cyan-200: #a2e5e2;
|
||||||
|
--rbrh-cyan-300: #78d9d5;
|
||||||
|
--rbrh-cyan-400: #5dd2cd;
|
||||||
|
--rbrh-cyan-500: #35c7c1;
|
||||||
|
--rbrh-cyan-600: #098480;
|
||||||
|
--rbrh-cyan-700: #13716e;
|
||||||
|
--rbrh-cyan-800: #0e5653;
|
||||||
|
--rbrh-cyan-900: #0b4d4b;
|
||||||
|
--rbrh-teal-50: #e7f5f2;
|
||||||
|
--rbrh-teal-100: #d6f5ed;
|
||||||
|
--rbrh-teal-200: #acebdc;
|
||||||
|
--rbrh-teal-300: #7ae5cc;
|
||||||
|
--rbrh-teal-400: #42e0ba;
|
||||||
|
--rbrh-teal-500: #14cc9f;
|
||||||
|
--rbrh-teal-600: #048464;
|
||||||
|
--rbrh-teal-700: #077156;
|
||||||
|
--rbrh-teal-800: #053f31;
|
||||||
|
--rbrh-teal-900: #022019;
|
||||||
|
--rbrh-red-50: #fee7e7;
|
||||||
|
--rbrh-red-100: #fdd5d5;
|
||||||
|
--rbrh-red-200: #faafaf;
|
||||||
|
--rbrh-red-300: #ec757b;
|
||||||
|
--rbrh-red-400: #e85a61;
|
||||||
|
--rbrh-red-500: #e2313a;
|
||||||
|
--rbrh-red-600: #ce2d35;
|
||||||
|
--rbrh-red-700: #a02329;
|
||||||
|
--rbrh-red-800: #7c1b20;
|
||||||
|
--rbrh-red-900: #5f1518;
|
||||||
|
--rbrh-magenta-50: #ffedf4;
|
||||||
|
--rbrh-magenta-100: #ffc6dc;
|
||||||
|
--rbrh-magenta-200: #ff99c0;
|
||||||
|
--rbrh-magenta-300: #ff72a8;
|
||||||
|
--rbrh-magenta-400: #ff297a;
|
||||||
|
--rbrh-magenta-500: #ff0262;
|
||||||
|
--rbrh-magenta-600: #d90052;
|
||||||
|
--rbrh-magenta-700: #9f003c;
|
||||||
|
--rbrh-magenta-800: #77002d;
|
||||||
|
--rbrh-magenta-900: #3d0017;
|
||||||
|
--rbrh-orange-50: #fff2e6;
|
||||||
|
--rbrh-orange-100: #ffd6b0;
|
||||||
|
--rbrh-orange-200: #ffc28a;
|
||||||
|
--rbrh-orange-300: #fea654;
|
||||||
|
--rbrh-orange-400: #fe9533;
|
||||||
|
--rbrh-orange-500: #fe7a00;
|
||||||
|
--rbrh-orange-600: #e76f00;
|
||||||
|
--rbrh-orange-700: #b45700;
|
||||||
|
--rbrh-orange-800: #8c4300;
|
||||||
|
--rbrh-orange-900: #6b3300;
|
||||||
|
--rbrh-yellow-50: #fffae8;
|
||||||
|
--rbrh-yellow-100: #fff1c1;
|
||||||
|
--rbrh-yellow-200: #ffe899;
|
||||||
|
--rbrh-yellow-300: #ffe072;
|
||||||
|
--rbrh-yellow-400: #ffd74b;
|
||||||
|
--rbrh-yellow-500: #ffce24;
|
||||||
|
--rbrh-yellow-600: #e0ae00;
|
||||||
|
--rbrh-yellow-700: #aa8500;
|
||||||
|
--rbrh-yellow-800: #866800;
|
||||||
|
--rbrh-yellow-900: #5e4a00;
|
||||||
|
--rbrh-blue-50: #e9eefe;
|
||||||
|
--rbrh-blue-100: #d6dffe;
|
||||||
|
--rbrh-blue-200: #c3d0fd;
|
||||||
|
--rbrh-blue-300: #9db2fc;
|
||||||
|
--rbrh-blue-400: #2c58f8;
|
||||||
|
--rbrh-blue-500: rgb(8, 59, 244);
|
||||||
|
--rbrh-blue-600: #0732ce;
|
||||||
|
--rbrh-blue-700: #052495;
|
||||||
|
--rbrh-blue-800: #041b6f;
|
||||||
|
--rbrh-blue-900: #090f22;
|
||||||
|
--rbrh-sky-50: #e6f7fe;
|
||||||
|
--rbrh-sky-100: #d8f5ff;
|
||||||
|
--rbrh-sky-200: #a5e7ff;
|
||||||
|
--rbrh-sky-300: #78dbff;
|
||||||
|
--rbrh-sky-400: #5ad0fb;
|
||||||
|
--rbrh-sky-500: #00b2f1;
|
||||||
|
--rbrh-sky-600: #0c78a0;
|
||||||
|
--rbrh-sky-700: #086385;
|
||||||
|
--rbrh-sky-800: #08485f;
|
||||||
|
--rbrh-sky-900: #063b4c;
|
||||||
|
--rbrh-indigo-50: #eeedfe;
|
||||||
|
--rbrh-indigo-100: #cac6fc;
|
||||||
|
--rbrh-indigo-200: #b0abfa;
|
||||||
|
--rbrh-indigo-300: #8c84f8;
|
||||||
|
--rbrh-indigo-400: #756df7;
|
||||||
|
--rbrh-indigo-500: #5348f5;
|
||||||
|
--rbrh-indigo-600: #4c42df;
|
||||||
|
--rbrh-indigo-700: #3b33ae;
|
||||||
|
--rbrh-indigo-800: #040405;
|
||||||
|
--rbrh-indigo-900: #231e67;
|
||||||
|
--rbrh-purple-50: #f6ebff;
|
||||||
|
--rbrh-purple-100: #e4c4ff;
|
||||||
|
--rbrh-purple-200: #dcb0ff;
|
||||||
|
--rbrh-purple-300: #ca89ff;
|
||||||
|
--rbrh-purple-400: #af4eff;
|
||||||
|
--rbrh-purple-500: #8c00ff;
|
||||||
|
--rbrh-purple-600: #59039f;
|
||||||
|
--rbrh-purple-700: #480182;
|
||||||
|
--rbrh-purple-800: #2b004e;
|
||||||
|
--rbrh-purple-900: #150027;
|
||||||
|
--rbrh-violet-50: #eee9fd;
|
||||||
|
--rbrh-violet-100: #cbbbf8;
|
||||||
|
--rbrh-violet-200: #b29af4;
|
||||||
|
--rbrh-violet-300: #8f6cf0;
|
||||||
|
--rbrh-violet-400: #7950ed;
|
||||||
|
--rbrh-violet-500: #5824e8;
|
||||||
|
--rbrh-violet-600: #5021d3;
|
||||||
|
--rbrh-violet-700: #3e1aa5;
|
||||||
|
--rbrh-violet-800: #301480;
|
||||||
|
--rbrh-violet-900: #250f61;
|
||||||
|
/* Spacing */
|
||||||
|
--rbrh-spacing-0: 0rem;
|
||||||
|
--rbrh-spacing-1: 0.125rem;
|
||||||
|
--rbrh-spacing-2: 0.25rem;
|
||||||
|
--rbrh-spacing-3: 0.5rem;
|
||||||
|
--rbrh-spacing-4: 0.75rem;
|
||||||
|
--rbrh-spacing-5: 1rem;
|
||||||
|
--rbrh-spacing-6: 1.25rem;
|
||||||
|
--rbrh-spacing-7: 1.5rem;
|
||||||
|
--rbrh-spacing-8: 1.75rem;
|
||||||
|
--rbrh-spacing-9: 2rem;
|
||||||
|
--rbrh-spacing-10: 2.5rem;
|
||||||
|
--rbrh-spacing-12: 3rem;
|
||||||
|
--rbrh-spacing-14: 3.5rem;
|
||||||
|
--rbrh-spacing-16: 4rem;
|
||||||
|
--rbrh-spacing-18: 4.5rem;
|
||||||
|
--rbrh-spacing-20: 5rem;
|
||||||
|
--rbrh-spacing-22: 5.5rem;
|
||||||
|
--rbrh-spacing-24: 6rem;
|
||||||
|
--rbrh-screen-sm: 36rem;
|
||||||
|
--rbrh-screen-md: 55rem;
|
||||||
|
--rbrh-screen-lg: 67.5rem;
|
||||||
|
--rbrh-screen-xl: 81.25rem;
|
||||||
|
/* Typography */
|
||||||
|
--rbrh-font-family-sans: "Satoshi", "Helvetica", system-ui, sans-serif,
|
||||||
|
"Segoe UI", "Arial", "Verdana";
|
||||||
|
--rbrh-font-family-serif: serif, "Times", "Georgia", "Times New Roman";
|
||||||
|
--rbrh-font-weight-extrabold: 800;
|
||||||
|
--rbrh-font-weight-bold: 700;
|
||||||
|
--rbrh-font-weight-semibold: 600;
|
||||||
|
--rbrh-font-weight-medium: 500;
|
||||||
|
--rbrh-font-weight-default: 400;
|
||||||
|
--rbrh-font-weight-light: 300;
|
||||||
|
--rbrh-font-size-7xl: 5rem;
|
||||||
|
--rbrh-font-size-6xl: 3.5rem;
|
||||||
|
--rbrh-font-size-5xl: 2.9rem;
|
||||||
|
--rbrh-font-size-4xl: 2.1rem;
|
||||||
|
--rbrh-font-size-3xl: 1.8rem;
|
||||||
|
--rbrh-font-size-2xl: 1.5rem;
|
||||||
|
--rbrh-font-size-xl: 1.375rem;
|
||||||
|
--rbrh-font-size-lg: 1.25rem;
|
||||||
|
--rbrh-font-size-md: 1.125rem;
|
||||||
|
--rbrh-font-size-sm: 1rem;
|
||||||
|
--rbrh-font-size-xs: 0.875rem;
|
||||||
|
--rbrh-font-size-xxs: 0.75rem;
|
||||||
|
--rbrh-line-h-7xl: 5.25rem;
|
||||||
|
--rbrh-line-h-6xl: 3.75rem;
|
||||||
|
--rbrh-line-h-5xl: 3.15rem;
|
||||||
|
--rbrh-line-h-4xl: 2.5rem;
|
||||||
|
--rbrh-line-h-3xl: 2.2rem;
|
||||||
|
--rbrh-line-h-2xl: 2rem;
|
||||||
|
--rbrh-line-h-xl: 1.75rem;
|
||||||
|
--rbrh-line-h-lg: 1.5rem;
|
||||||
|
--rbrh-line-h-md: 1.5rem;
|
||||||
|
--rbrh-line-h-sm: 1.25rem;
|
||||||
|
--rbrh-line-h-xs: 1.25rem;
|
||||||
|
--rbrh-line-h-xxs: 1rem;
|
||||||
|
--rbrh-letter-spacing-lg: 0.0125rem;
|
||||||
|
--rbrh-letter-spacing-md: -0.025rem;
|
||||||
|
--rbrh-letter-spacing-sm: -0.0375rem;
|
||||||
|
--rbrh-letter-spacing-xs: -0.05rem;
|
||||||
|
/* Border radius */
|
||||||
|
--rbrh-radius-circle: 100rem;
|
||||||
|
--rbrh-radius-xl: 1.25rem;
|
||||||
|
--rbrh-radius-lg: 1rem;
|
||||||
|
--rbrh-radius-md: 0.75rem;
|
||||||
|
--rbrh-radius-sm: 0.5rem;
|
||||||
|
--rbrh-radius-xs: 0.25rem;
|
||||||
|
/* Box shadow */
|
||||||
|
--rbrh-shadow-xl: rgba(0, 0, 0, 0.1) 0px 16px 32px;
|
||||||
|
--rbrh-shadow-lg: rgba(0, 0, 0, 0.2) 0px 4px 48px -4px,
|
||||||
|
rgba(0, 0, 0, 0.25) 0px 4px 28px -4px;
|
||||||
|
--rbrh-shadow-md: 0 5px 40px -5px rgba(0, 0, 0, 0.1);
|
||||||
|
--rbrh-shadow-sm: 0px 4px 10px -8px rgba(0, 0, 0, 0.1),
|
||||||
|
0px 4px 10px -2px rgba(0, 0, 0, 0.1);
|
||||||
|
--rbrh-shadow-xs: 0px 2px 8px -3px rgba(0, 0, 0, 0.07),
|
||||||
|
0px 2px 8px -1px rgba(0, 0, 0, 0.08);
|
||||||
|
--rbrh-shadow-inset-xs: inset 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
|
||||||
|
--rbrh-shadow-inset-sm: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.08);
|
||||||
|
--rbrh-shadow-inset-md: inset 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
|
||||||
|
/* Theming */
|
||||||
|
--rbrh-background-300: var(--rbrh-gray-300);
|
||||||
|
--rbrh-background-200: var(--rbrh-gray-200);
|
||||||
|
--rbrh-background-50: var(--rbrh-gray-50);
|
||||||
|
--rbrh-background: var(--rbrh-white);
|
||||||
|
|
||||||
|
--rbrh-border-500: var(--rbrh-gray-500);
|
||||||
|
--rbrh-border-400: var(--rbrh-gray-400);
|
||||||
|
--rbrh-border-300: var(--rbrh-gray-300);
|
||||||
|
--rbrh-border-200: var(--rbrh-gray-200);
|
||||||
|
--rbrh-border-100: var(--rbrh-gray-100);
|
||||||
|
|
||||||
|
--rbrh-text: var(--rbrh-black);
|
||||||
|
--rbrh-text-900: var(--rbrh-gray-900);
|
||||||
|
--rbrh-text-800: var(--rbrh-gray-800);
|
||||||
|
--rbrh-text-700: var(--rbrh-gray-700);
|
||||||
|
--rbrh-text-600: var(--rbrh-gray-600);
|
||||||
|
--rbrh-text-link-hover: inherit;
|
||||||
|
--rbrh-text-link: var(--rbrh-white);
|
||||||
|
|
||||||
|
--rbrh-shadow-focus: 0 0 0 0.3rem var(--rbrh-blue-400);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Font-family & background-color
|
||||||
|
============================================= */
|
||||||
|
body {
|
||||||
|
font-family: var(--rbrh-font-family-sans);
|
||||||
|
background-color: var(--rbrh-background);
|
||||||
|
}
|
||||||
|
/*! purgecss start ignore */
|
||||||
|
[data-theme="dark"] {
|
||||||
|
--rbrh-background-300: var(--rbrh-gray-600);
|
||||||
|
--rbrh-background-200: var(--rbrh-gray-700);
|
||||||
|
--rbrh-background-50: var(--rbrh-gray-800);
|
||||||
|
--rbrh-background: var(--rbrh-black);
|
||||||
|
|
||||||
|
--rbrh-border-500: var(--rbrh-gray-500);
|
||||||
|
--rbrh-border-400: var(--rbrh-gray-400);
|
||||||
|
--rbrh-border-300: var(--rbrh-gray-700);
|
||||||
|
--rbrh-border-200: var(--rbrh-gray-800);
|
||||||
|
--rbrh-border-100: var(--rbrh-gray-900);
|
||||||
|
|
||||||
|
--rbrh-text: var(--rbrh-gray-50);
|
||||||
|
--rbrh-text-900: var(--rbrh-gray-100);
|
||||||
|
--rbrh-text-800: var(--rbrh-gray-200);
|
||||||
|
--rbrh-text-700: var(--rbrh-gray-300);
|
||||||
|
--rbrh-text-600: var(--rbrh-gray-400);
|
||||||
|
--rbrh-text-link-hover: var(--rbrh-white);
|
||||||
|
--rbrh-text-link: var(--rbrh-white);
|
||||||
|
|
||||||
|
--rbrh-shadow-focus: 0 0 0 0.3rem var(--rbrh-blue-300);
|
||||||
|
}
|
||||||
|
/*! purgecss end ignore */
|
||||||
|
|
||||||
|
|
||||||
|
/* Breakpoint mixins
|
||||||
|
============================================= */
|
||||||
|
@define-mixin screen-xs-up {
|
||||||
|
@media (min-width: 12.5rem) {
|
||||||
|
@mixin-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@define-mixin screen-sm-up {
|
||||||
|
@media (min-width: 36rem) {
|
||||||
|
@mixin-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@define-mixin screen-md-up {
|
||||||
|
@media (min-width: 55rem) {
|
||||||
|
@mixin-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@define-mixin screen-lg-up {
|
||||||
|
@media (min-width: 67.5rem) {
|
||||||
|
@mixin-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@define-mixin screen-xl-up {
|
||||||
|
@media (min-width: 81.25rem) {
|
||||||
|
@mixin-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@define-mixin screen-xxl-up {
|
||||||
|
@media (min-width: 100rem) {
|
||||||
|
@mixin-content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Typography mixins
|
||||||
|
============================================= */
|
||||||
|
@define-mixin font-size-7xl {
|
||||||
|
font-size: var(--rbrh-font-size-7xl);
|
||||||
|
line-height: var(--rbrh-line-h-7xl);
|
||||||
|
letter-spacing: var(--rbrh-letter-spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
@define-mixin font-size-6xl {
|
||||||
|
font-size: var(--rbrh-font-size-6xl);
|
||||||
|
line-height: var(--rbrh-line-h-6xl);
|
||||||
|
letter-spacing: var(--rbrh-letter-spacing-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
@define-mixin font-size-5xl {
|
||||||
|
font-size: var(--rbrh-font-size-5xl);
|
||||||
|
line-height: var(--rbrh-line-h-5xl);
|
||||||
|
letter-spacing: var(--rbrh-letter-spacing-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
@define-mixin font-size-4xl {
|
||||||
|
font-size: var(--rbrh-font-size-4xl);
|
||||||
|
line-height: var(--rbrh-line-h-4xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
@define-mixin font-size-3xl {
|
||||||
|
font-size: var(--rbrh-font-size-3xl);
|
||||||
|
line-height: var(--rbrh-line-h-3xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
@define-mixin font-size-2xl {
|
||||||
|
font-size: var(--rbrh-font-size-2xl);
|
||||||
|
line-height: var(--rbrh-line-h-xl);
|
||||||
|
letter-spacing: var(--rbrh-letter-spacing-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
@define-mixin font-size-xl {
|
||||||
|
font-size: var(--rbrh-font-size-xl);
|
||||||
|
line-height: var(--rbrh-line-h-xl);
|
||||||
|
letter-spacing: var(--rbrh-letter-spacing-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
@define-mixin font-size-lg {
|
||||||
|
font-size: var(--rbrh-font-size-lg);
|
||||||
|
line-height: var(--rbrh-line-h-md);
|
||||||
|
letter-spacing: var(--rbrh-letter-spacing-xl);
|
||||||
|
}
|
||||||
|
|
||||||
|
@define-mixin font-size-md {
|
||||||
|
font-size: var(--rbrh-font-size-md);
|
||||||
|
line-height: var(--rbrh-line-h-md);
|
||||||
|
letter-spacing: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@define-mixin font-size-sm {
|
||||||
|
font-size: var(--rbrh-font-size-sm);
|
||||||
|
line-height: var(--rbrh-line-h-md);
|
||||||
|
letter-spacing: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
@define-mixin font-size-xs {
|
||||||
|
font-size: var(--rbrh-font-size-xs);
|
||||||
|
line-height: var(--rbrh-line-h-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
@define-mixin font-size-xxs {
|
||||||
|
font-size: var(--rbrh-font-size-xxs);
|
||||||
|
line-height: var(--rbrh-line-h-xxs);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Font size
|
||||||
|
============================================= */
|
||||||
|
@mixin screen-xs-up {
|
||||||
|
|
||||||
|
h1,
|
||||||
|
.h1 {
|
||||||
|
@mixin font-size-5xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2,
|
||||||
|
.h2 {
|
||||||
|
@mixin font-size-4xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3,
|
||||||
|
.h3 {
|
||||||
|
@mixin font-size-3xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4,
|
||||||
|
.h4 {
|
||||||
|
@mixin font-size-2xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5,
|
||||||
|
.h5 {
|
||||||
|
@mixin font-size-xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6,
|
||||||
|
.h6 {
|
||||||
|
@mixin font-size-lg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin screen-lg-up {
|
||||||
|
|
||||||
|
h1,
|
||||||
|
.h1 {
|
||||||
|
@mixin font-size-7xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2,
|
||||||
|
.h2 {
|
||||||
|
@mixin font-size-6xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3,
|
||||||
|
.h3 {
|
||||||
|
@mixin font-size-5xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4,
|
||||||
|
.h4 {
|
||||||
|
@mixin font-size-4xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
h5,
|
||||||
|
.h5 {
|
||||||
|
@mixin font-size-2xl;
|
||||||
|
}
|
||||||
|
|
||||||
|
h6,
|
||||||
|
.h6 {
|
||||||
|
@mixin font-size-lg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p,
|
||||||
|
.par {
|
||||||
|
@mixin font-size-md;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle,
|
||||||
|
label,
|
||||||
|
summary {
|
||||||
|
@mixin font-size-sm;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
small,
|
||||||
|
.small {
|
||||||
|
@mixin font-size-xxs;
|
||||||
|
}
|
||||||
|
|
||||||
|
.caption {
|
||||||
|
@mixin font-size-xs;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Text styles
|
||||||
|
============================================= */
|
||||||
|
.h1,
|
||||||
|
h1 {
|
||||||
|
color: var(--rbrh-text-900);
|
||||||
|
font-weight: var(--rbrh-font-weight-bold);
|
||||||
|
word-break: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.h2,
|
||||||
|
h2,
|
||||||
|
.h3,
|
||||||
|
h3,
|
||||||
|
.h4,
|
||||||
|
h4 {
|
||||||
|
color: var(--rbrh-text-900);
|
||||||
|
font-weight: var(--rbrh-font-weight-bold);
|
||||||
|
}
|
||||||
|
|
||||||
|
.h5,
|
||||||
|
h5,
|
||||||
|
.h6,
|
||||||
|
h6 {
|
||||||
|
color: var(--rbrh-text-800);
|
||||||
|
font-weight: var(--rbrh-font-weight-bold);
|
||||||
|
}
|
||||||
|
|
||||||
|
p,
|
||||||
|
a,
|
||||||
|
span,
|
||||||
|
li {
|
||||||
|
font-weight: var(--rbrh-font-weight-medium);
|
||||||
|
color: var(--rbrh-text-800);
|
||||||
|
}
|
||||||
|
|
||||||
|
small,
|
||||||
|
label,
|
||||||
|
cite,
|
||||||
|
summary {
|
||||||
|
color: var(--rbrh-text-700);
|
||||||
|
}
|
||||||
|
|
||||||
|
summary {
|
||||||
|
font-weight: var(--rbrh-font-weight-semibold);
|
||||||
|
}
|
||||||
187
src/styles/src/reset.css
Normal file
187
src/styles/src/reset.css
Normal file
|
|
@ -0,0 +1,187 @@
|
||||||
|
/* Ravenbright CSS reset
|
||||||
|
============================================= */
|
||||||
|
html {
|
||||||
|
box-sizing: border-box;
|
||||||
|
word-break: normal;
|
||||||
|
tab-size: 4;
|
||||||
|
width: 100%;
|
||||||
|
line-height: 1.25;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
*,
|
||||||
|
*:before,
|
||||||
|
*:after {
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
font-family: -apple-system, sans-serif, "Segoe UI", Arial;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
Accessible way to hide elements visually for screen readers
|
||||||
|
*/
|
||||||
|
.visually-hidden {
|
||||||
|
clip-path: inset(50%);
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
position: absolute;
|
||||||
|
white-space: nowrap;
|
||||||
|
background-color: var(--rbrh-black);
|
||||||
|
color: var(--rbrh-white);
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
Accordion
|
||||||
|
*/
|
||||||
|
main,
|
||||||
|
details {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
summary {
|
||||||
|
display: list-item;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
Button & link
|
||||||
|
*/
|
||||||
|
a:focus,
|
||||||
|
a:focus-visible {
|
||||||
|
box-shadow: var(--rbrh-shadow-focus);
|
||||||
|
}
|
||||||
|
button,
|
||||||
|
[role="button"],
|
||||||
|
[type="button"],
|
||||||
|
input,
|
||||||
|
textarea,
|
||||||
|
select,
|
||||||
|
summary {
|
||||||
|
font: inherit;
|
||||||
|
cursor: pointer;
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
button,
|
||||||
|
[role="button"],
|
||||||
|
[type="button"],
|
||||||
|
.btn {
|
||||||
|
text-transform: none;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
text-shadow: none;
|
||||||
|
height: fit-content;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.spread-link {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 1;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
&:focus-visible {
|
||||||
|
padding: 0;
|
||||||
|
border: none;
|
||||||
|
outline: 0;
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
Forms
|
||||||
|
*/
|
||||||
|
form label,
|
||||||
|
fieldset label {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
fieldset {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
Image
|
||||||
|
*/
|
||||||
|
hr {
|
||||||
|
height: 0;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
img,
|
||||||
|
picture {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
svg {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
Lists
|
||||||
|
*/
|
||||||
|
ol,
|
||||||
|
ul,
|
||||||
|
li {
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
Table
|
||||||
|
*/
|
||||||
|
table {
|
||||||
|
display: table;
|
||||||
|
border-collapse: collapse;
|
||||||
|
table-layout: fixed;
|
||||||
|
text-indent: 0;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
border-color: inherit;
|
||||||
|
}
|
||||||
|
caption,
|
||||||
|
th,
|
||||||
|
tr,
|
||||||
|
td {
|
||||||
|
text-align: left;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
}
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
/*
|
||||||
|
Typography
|
||||||
|
*/
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
p,
|
||||||
|
a,
|
||||||
|
figure,
|
||||||
|
blockquote {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
small {
|
||||||
|
font-size: 75%;
|
||||||
|
}
|
||||||
|
pre,
|
||||||
|
video {
|
||||||
|
overflow: auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
code,
|
||||||
|
pre,
|
||||||
|
kbd {
|
||||||
|
font-family: monospace;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
5
src/styles/src/utilities/.vscode/settings.json
vendored
Normal file
5
src/styles/src/utilities/.vscode/settings.json
vendored
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
{
|
||||||
|
"cSpell.enableFiletypes": [
|
||||||
|
"postcss"
|
||||||
|
]
|
||||||
|
}
|
||||||
9
src/styles/src/utilities/bg-size.css
Normal file
9
src/styles/src/utilities/bg-size.css
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
.bg-auto {
|
||||||
|
background-size: auto;
|
||||||
|
}
|
||||||
|
.bg-cover {
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
.bg-contain {
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
21
src/styles/src/utilities/border-radius.css
Normal file
21
src/styles/src/utilities/border-radius.css
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
.radius-none {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.radius-xs {
|
||||||
|
border-radius: var(--rbrh-radius-xs);
|
||||||
|
}
|
||||||
|
.radius-sm {
|
||||||
|
border-radius: var(--rbrh-radius-sm);
|
||||||
|
}
|
||||||
|
.radius-md {
|
||||||
|
border-radius: var(--rbrh-radius-md);
|
||||||
|
}
|
||||||
|
.radius-lg {
|
||||||
|
border-radius: var(--rbrh-radius-lg);
|
||||||
|
}
|
||||||
|
.radius-xl {
|
||||||
|
border-radius: var(--rbrh-radius-xl);
|
||||||
|
}
|
||||||
|
.radius-circle {
|
||||||
|
border-radius: var(--rbrh-radius-circle);
|
||||||
|
}
|
||||||
24
src/styles/src/utilities/border-width.css
Normal file
24
src/styles/src/utilities/border-width.css
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
.border-none {
|
||||||
|
border-width: 0;
|
||||||
|
}
|
||||||
|
.border-1 {
|
||||||
|
border-width: 1px;
|
||||||
|
}
|
||||||
|
.border-2 {
|
||||||
|
border-width: 2px;
|
||||||
|
}
|
||||||
|
.border-3 {
|
||||||
|
border-width: 3px;
|
||||||
|
}
|
||||||
|
.border-4 {
|
||||||
|
border-width: 4px;
|
||||||
|
}
|
||||||
|
.border-6 {
|
||||||
|
border-width: 6px;
|
||||||
|
}
|
||||||
|
.border-8 {
|
||||||
|
border-width: 8px;
|
||||||
|
}
|
||||||
|
.border-10 {
|
||||||
|
border-width: 10px;
|
||||||
|
}
|
||||||
47
src/styles/src/utilities/container.css
Normal file
47
src/styles/src/utilities/container.css
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
/* To debug & customize this component,
|
||||||
|
check 👉 src/css-variable.css
|
||||||
|
============================================= */
|
||||||
|
.container {
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
width: 100%;
|
||||||
|
@mixin screen-xs-up {
|
||||||
|
padding-left: var(--rbrh-spacing-7);
|
||||||
|
padding-right: var(--rbrh-spacing-7);
|
||||||
|
}
|
||||||
|
@mixin screen-sm-up {
|
||||||
|
padding-left: var(--rbrh-spacing-9);
|
||||||
|
padding-right: var(--rbrh-spacing-9);
|
||||||
|
}
|
||||||
|
@mixin screen-md-up {
|
||||||
|
padding-left: var(--rbrh-spacing-8);
|
||||||
|
padding-right: var(--rbrh-spacing-8);
|
||||||
|
}
|
||||||
|
@mixin screen-lg-up {
|
||||||
|
padding-left: var(--rbrh-spacing-10);
|
||||||
|
padding-right: var(--rbrh-spacing-10);
|
||||||
|
}
|
||||||
|
@mixin screen-xl-up {
|
||||||
|
padding-left: var(--rbrh-spacing-14);
|
||||||
|
padding-right: var(--rbrh-spacing-14);
|
||||||
|
}
|
||||||
|
@mixin screen-xxl-up {
|
||||||
|
padding-left: 0;
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.container-sm {
|
||||||
|
max-width: var(--rbrh-screen-sm);
|
||||||
|
}
|
||||||
|
.container-md {
|
||||||
|
max-width: var(--rbrh-screen-md);
|
||||||
|
}
|
||||||
|
.container-lg {
|
||||||
|
max-width: var(--rbrh-screen-lg);
|
||||||
|
}
|
||||||
|
.container-xl {
|
||||||
|
max-width: var(--rbrh-screen-xl);
|
||||||
|
}
|
||||||
|
.container-2xl {
|
||||||
|
max-width: var(--rbrh-screen-xxl);
|
||||||
|
}
|
||||||
33
src/styles/src/utilities/dark-mode/dark-bg-blue.css
Normal file
33
src/styles/src/utilities/dark-mode/dark-bg-blue.css
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-bg-blue-50 {
|
||||||
|
background-color: var(--rbrh-blue-50);
|
||||||
|
}
|
||||||
|
.dark-bg-blue-100 {
|
||||||
|
background-color: var(--rbrh-blue-100);
|
||||||
|
}
|
||||||
|
.dark-bg-blue-200 {
|
||||||
|
background-color: var(--rbrh-blue-200);
|
||||||
|
}
|
||||||
|
.dark-bg-blue-300 {
|
||||||
|
background-color: var(--rbrh-blue-300);
|
||||||
|
}
|
||||||
|
.dark-bg-blue-400 {
|
||||||
|
background-color: var(--rbrh-blue-400);
|
||||||
|
}
|
||||||
|
.dark-bg-blue-500 {
|
||||||
|
background-color: var(--rbrh-blue-500);
|
||||||
|
}
|
||||||
|
.dark-bg-blue-600 {
|
||||||
|
background-color: var(--rbrh-blue-600);
|
||||||
|
}
|
||||||
|
.dark-bg-blue-700 {
|
||||||
|
background-color: var(--rbrh-blue-700);
|
||||||
|
}
|
||||||
|
.dark-bg-blue-800 {
|
||||||
|
background-color: var(--rbrh-blue-800);
|
||||||
|
}
|
||||||
|
.dark-bg-blue-900 {
|
||||||
|
background-color: var(--rbrh-blue-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
33
src/styles/src/utilities/dark-mode/dark-bg-cyan.css
Normal file
33
src/styles/src/utilities/dark-mode/dark-bg-cyan.css
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-bg-cyan-50 {
|
||||||
|
background-color: var(--rbrh-cyan-50);
|
||||||
|
}
|
||||||
|
.dark-bg-cyan-100 {
|
||||||
|
background-color: var(--rbrh-cyan-100);
|
||||||
|
}
|
||||||
|
.dark-bg-cyan-200 {
|
||||||
|
background-color: var(--rbrh-cyan-200);
|
||||||
|
}
|
||||||
|
.dark-bg-cyan-300 {
|
||||||
|
background-color: var(--rbrh-cyan-300);
|
||||||
|
}
|
||||||
|
.dark-bg-cyan-400 {
|
||||||
|
background-color: var(--rbrh-cyan-400);
|
||||||
|
}
|
||||||
|
.dark-bg-cyan-500 {
|
||||||
|
background-color: var(--rbrh-cyan-500);
|
||||||
|
}
|
||||||
|
.dark-bg-cyan-600 {
|
||||||
|
background-color: var(--rbrh-cyan-600);
|
||||||
|
}
|
||||||
|
.dark-bg-cyan-700 {
|
||||||
|
background-color: var(--rbrh-cyan-700);
|
||||||
|
}
|
||||||
|
.dark-bg-cyan-800 {
|
||||||
|
background-color: var(--rbrh-cyan-800);
|
||||||
|
}
|
||||||
|
.dark-bg-cyan-900 {
|
||||||
|
background-color: var(--rbrh-cyan-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
41
src/styles/src/utilities/dark-mode/dark-bg-gray.css
Normal file
41
src/styles/src/utilities/dark-mode/dark-bg-gray.css
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-bg-transparent {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.dark-bg-black {
|
||||||
|
background-color: var(--rbrh-black);
|
||||||
|
}
|
||||||
|
.dark-bg-white {
|
||||||
|
background-color: var(--rbrh-white);
|
||||||
|
}
|
||||||
|
.dark-bg-gray-50 {
|
||||||
|
background-color: var(--rbrh-gray-50);
|
||||||
|
}
|
||||||
|
.dark-bg-gray-100 {
|
||||||
|
background-color: var(--rbrh-gray-100);
|
||||||
|
}
|
||||||
|
.dark-bg-gray-200 {
|
||||||
|
background-color: var(--rbrh-gray-200);
|
||||||
|
}
|
||||||
|
.dark-bg-gray-300 {
|
||||||
|
background-color: var(--rbrh-gray-300);
|
||||||
|
}
|
||||||
|
.dark-bg-gray-400 {
|
||||||
|
background-color: var(--rbrh-gray-400);
|
||||||
|
}
|
||||||
|
.dark-bg-gray-500 {
|
||||||
|
background-color: var(--rbrh-gray-500);
|
||||||
|
}
|
||||||
|
.dark-bg-gray-600 {
|
||||||
|
background-color: var(--rbrh-gray-600);
|
||||||
|
}
|
||||||
|
.dark-bg-gray-700 {
|
||||||
|
background-color: var(--rbrh-gray-700);
|
||||||
|
}
|
||||||
|
.dark-bg-gray-800 {
|
||||||
|
background-color: var(--rbrh-gray-800);
|
||||||
|
}
|
||||||
|
.dark-bg-gray-900 {
|
||||||
|
background-color: var(--rbrh-gray-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
32
src/styles/src/utilities/dark-mode/dark-bg-green.css
Normal file
32
src/styles/src/utilities/dark-mode/dark-bg-green.css
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-bg-green-50 {
|
||||||
|
background-color: var(--rbrh-green-50);
|
||||||
|
}
|
||||||
|
.dark-bg-green-100 {
|
||||||
|
background-color: var(--rbrh-green-100);
|
||||||
|
}
|
||||||
|
.dark-bg-green-200 {
|
||||||
|
background-color: var(--rbrh-green-200);
|
||||||
|
}
|
||||||
|
.dark-bg-green-300 {
|
||||||
|
background-color: var(--rbrh-green-300);
|
||||||
|
}
|
||||||
|
.dark-bg-green-400 {
|
||||||
|
background-color: var(--rbrh-green-400);
|
||||||
|
}
|
||||||
|
.dark-bg-green-500 {
|
||||||
|
background-color: var(--rbrh-green-500);
|
||||||
|
}
|
||||||
|
.dark-bg-green-600 {
|
||||||
|
background-color: var(--rbrh-green-600);
|
||||||
|
}
|
||||||
|
.dark-bg-green-700 {
|
||||||
|
background-color: var(--rbrh-green-700);
|
||||||
|
}
|
||||||
|
.dark-bg-green-800 {
|
||||||
|
background-color: var(--rbrh-green-800);
|
||||||
|
}
|
||||||
|
.dark-bg-green-900 {
|
||||||
|
background-color: var(--rbrh-green-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
33
src/styles/src/utilities/dark-mode/dark-bg-indigo.css
Normal file
33
src/styles/src/utilities/dark-mode/dark-bg-indigo.css
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-bg-indigo-50 {
|
||||||
|
background-color: var(--rbrh-indigo-50);
|
||||||
|
}
|
||||||
|
.dark-bg-indigo-100 {
|
||||||
|
background-color: var(--rbrh-indigo-100);
|
||||||
|
}
|
||||||
|
.dark-bg-indigo-200 {
|
||||||
|
background-color: var(--rbrh-indigo-200);
|
||||||
|
}
|
||||||
|
.dark-bg-indigo-300 {
|
||||||
|
background-color: var(--rbrh-indigo-300);
|
||||||
|
}
|
||||||
|
.dark-bg-indigo-400 {
|
||||||
|
background-color: var(--rbrh-indigo-400);
|
||||||
|
}
|
||||||
|
.dark-bg-indigo-500 {
|
||||||
|
background-color: var(--rbrh-indigo-500);
|
||||||
|
}
|
||||||
|
.dark-bg-indigo-600 {
|
||||||
|
background-color: var(--rbrh-indigo-600);
|
||||||
|
}
|
||||||
|
.dark-bg-indigo-700 {
|
||||||
|
background-color: var(--rbrh-indigo-700);
|
||||||
|
}
|
||||||
|
.dark-bg-indigo-800 {
|
||||||
|
background-color: var(--rbrh-indigo-800);
|
||||||
|
}
|
||||||
|
.dark-bg-indigo-900 {
|
||||||
|
background-color: var(--rbrh-indigo-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
33
src/styles/src/utilities/dark-mode/dark-bg-lime.css
Normal file
33
src/styles/src/utilities/dark-mode/dark-bg-lime.css
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-bg-lime-50 {
|
||||||
|
background-color: var(--rbrh-lime-50);
|
||||||
|
}
|
||||||
|
.dark-bg-lime-100 {
|
||||||
|
background-color: var(--rbrh-lime-100);
|
||||||
|
}
|
||||||
|
.dark-bg-lime-200 {
|
||||||
|
background-color: var(--rbrh-lime-200);
|
||||||
|
}
|
||||||
|
.dark-bg-lime-300 {
|
||||||
|
background-color: var(--rbrh-lime-300);
|
||||||
|
}
|
||||||
|
.dark-bg-lime-400 {
|
||||||
|
background-color: var(--rbrh-lime-400);
|
||||||
|
}
|
||||||
|
.dark-bg-lime-500 {
|
||||||
|
background-color: var(--rbrh-lime-500);
|
||||||
|
}
|
||||||
|
.dark-bg-lime-600 {
|
||||||
|
background-color: var(--rbrh-lime-600);
|
||||||
|
}
|
||||||
|
.dark-bg-lime-700 {
|
||||||
|
background-color: var(--rbrh-lime-700);
|
||||||
|
}
|
||||||
|
.dark-bg-lime-800 {
|
||||||
|
background-color: var(--rbrh-lime-800);
|
||||||
|
}
|
||||||
|
.dark-bg-lime-900 {
|
||||||
|
background-color: var(--rbrh-lime-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
33
src/styles/src/utilities/dark-mode/dark-bg-magenta.css
Normal file
33
src/styles/src/utilities/dark-mode/dark-bg-magenta.css
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-bg-magenta-50 {
|
||||||
|
background-color: var(--rbrh-magenta-50);
|
||||||
|
}
|
||||||
|
.dark-bg-magenta-100 {
|
||||||
|
background-color: var(--rbrh-magenta-100);
|
||||||
|
}
|
||||||
|
.dark-bg-magenta-200 {
|
||||||
|
background-color: var(--rbrh-magenta-200);
|
||||||
|
}
|
||||||
|
.dark-bg-magenta-300 {
|
||||||
|
background-color: var(--rbrh-magenta-300);
|
||||||
|
}
|
||||||
|
.dark-bg-magenta-400 {
|
||||||
|
background-color: var(--rbrh-magenta-400);
|
||||||
|
}
|
||||||
|
.dark-bg-magenta-500 {
|
||||||
|
background-color: var(--rbrh-magenta-500);
|
||||||
|
}
|
||||||
|
.dark-bg-magenta-600 {
|
||||||
|
background-color: var(--rbrh-magenta-600);
|
||||||
|
}
|
||||||
|
.dark-bg-magenta-700 {
|
||||||
|
background-color: var(--rbrh-magenta-700);
|
||||||
|
}
|
||||||
|
.dark-bg-magenta-800 {
|
||||||
|
background-color: var(--rbrh-magenta-800);
|
||||||
|
}
|
||||||
|
.dark-bg-magenta-900 {
|
||||||
|
background-color: var(--rbrh-magenta-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
33
src/styles/src/utilities/dark-mode/dark-bg-orange.css
Normal file
33
src/styles/src/utilities/dark-mode/dark-bg-orange.css
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-bg-orange-50 {
|
||||||
|
background-color: var(--rbrh-orange-50);
|
||||||
|
}
|
||||||
|
.dark-bg-orange-100 {
|
||||||
|
background-color: var(--rbrh-orange-100);
|
||||||
|
}
|
||||||
|
.dark-bg-orange-200 {
|
||||||
|
background-color: var(--rbrh-orange-200);
|
||||||
|
}
|
||||||
|
.dark-bg-orange-300 {
|
||||||
|
background-color: var(--rbrh-orange-300);
|
||||||
|
}
|
||||||
|
.dark-bg-orange-400 {
|
||||||
|
background-color: var(--rbrh-orange-400);
|
||||||
|
}
|
||||||
|
.dark-bg-orange-500 {
|
||||||
|
background-color: var(--rbrh-orange-500);
|
||||||
|
}
|
||||||
|
.dark-bg-orange-600 {
|
||||||
|
background-color: var(--rbrh-orange-600);
|
||||||
|
}
|
||||||
|
.dark-bg-orange-700 {
|
||||||
|
background-color: var(--rbrh-orange-700);
|
||||||
|
}
|
||||||
|
.dark-bg-orange-800 {
|
||||||
|
background-color: var(--rbrh-orange-800);
|
||||||
|
}
|
||||||
|
.dark-bg-orange-900 {
|
||||||
|
background-color: var(--rbrh-orange-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
33
src/styles/src/utilities/dark-mode/dark-bg-purple.css
Normal file
33
src/styles/src/utilities/dark-mode/dark-bg-purple.css
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-bg-purple-50 {
|
||||||
|
background-color: var(--rbrh-purple-50);
|
||||||
|
}
|
||||||
|
.dark-bg-purple-100 {
|
||||||
|
background-color: var(--rbrh-purple-100);
|
||||||
|
}
|
||||||
|
.dark-bg-purple-200 {
|
||||||
|
background-color: var(--rbrh-purple-200);
|
||||||
|
}
|
||||||
|
.dark-bg-purple-300 {
|
||||||
|
background-color: var(--rbrh-purple-300);
|
||||||
|
}
|
||||||
|
.dark-bg-purple-400 {
|
||||||
|
background-color: var(--rbrh-purple-400);
|
||||||
|
}
|
||||||
|
.dark-bg-purple-500 {
|
||||||
|
background-color: var(--rbrh-purple-500);
|
||||||
|
}
|
||||||
|
.dark-bg-purple-600 {
|
||||||
|
background-color: var(--rbrh-purple-600);
|
||||||
|
}
|
||||||
|
.dark-bg-purple-700 {
|
||||||
|
background-color: var(--rbrh-purple-700);
|
||||||
|
}
|
||||||
|
.dark-bg-purple-800 {
|
||||||
|
background-color: var(--rbrh-purple-800);
|
||||||
|
}
|
||||||
|
.dark-bg-purple-900 {
|
||||||
|
background-color: var(--rbrh-purple-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
33
src/styles/src/utilities/dark-mode/dark-bg-red.css
Normal file
33
src/styles/src/utilities/dark-mode/dark-bg-red.css
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-bg-red-50 {
|
||||||
|
background-color: var(--rbrh-red-50);
|
||||||
|
}
|
||||||
|
.dark-bg-red-100 {
|
||||||
|
background-color: var(--rbrh-red-100);
|
||||||
|
}
|
||||||
|
.dark-bg-red-200 {
|
||||||
|
background-color: var(--rbrh-red-200);
|
||||||
|
}
|
||||||
|
.dark-bg-red-300 {
|
||||||
|
background-color: var(--rbrh-red-300);
|
||||||
|
}
|
||||||
|
.dark-bg-red-400 {
|
||||||
|
background-color: var(--rbrh-red-400);
|
||||||
|
}
|
||||||
|
.dark-bg-red-500 {
|
||||||
|
background-color: var(--rbrh-red-500);
|
||||||
|
}
|
||||||
|
.dark-bg-red-600 {
|
||||||
|
background-color: var(--rbrh-red-600);
|
||||||
|
}
|
||||||
|
.dark-bg-red-700 {
|
||||||
|
background-color: var(--rbrh-red-700);
|
||||||
|
}
|
||||||
|
.dark-bg-red-800 {
|
||||||
|
background-color: var(--rbrh-red-800);
|
||||||
|
}
|
||||||
|
.dark-bg-red-900 {
|
||||||
|
background-color: var(--rbrh-red-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
33
src/styles/src/utilities/dark-mode/dark-bg-sky.css
Normal file
33
src/styles/src/utilities/dark-mode/dark-bg-sky.css
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-bg-sky-50 {
|
||||||
|
background-color: var(--rbrh-sky-50);
|
||||||
|
}
|
||||||
|
.dark-bg-sky-100 {
|
||||||
|
background-color: var(--rbrh-sky-100);
|
||||||
|
}
|
||||||
|
.dark-bg-sky-200 {
|
||||||
|
background-color: var(--rbrh-sky-200);
|
||||||
|
}
|
||||||
|
.dark-bg-sky-300 {
|
||||||
|
background-color: var(--rbrh-sky-300);
|
||||||
|
}
|
||||||
|
.dark-bg-sky-400 {
|
||||||
|
background-color: var(--rbrh-sky-400);
|
||||||
|
}
|
||||||
|
.dark-bg-sky-500 {
|
||||||
|
background-color: var(--rbrh-sky-500);
|
||||||
|
}
|
||||||
|
.dark-bg-sky-600 {
|
||||||
|
background-color: var(--rbrh-sky-600);
|
||||||
|
}
|
||||||
|
.dark-bg-sky-700 {
|
||||||
|
background-color: var(--rbrh-sky-700);
|
||||||
|
}
|
||||||
|
.dark-bg-sky-800 {
|
||||||
|
background-color: var(--rbrh-sky-800);
|
||||||
|
}
|
||||||
|
.dark-bg-sky-900 {
|
||||||
|
background-color: var(--rbrh-sky-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
32
src/styles/src/utilities/dark-mode/dark-bg-teal.css
Normal file
32
src/styles/src/utilities/dark-mode/dark-bg-teal.css
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-bg-teal-50 {
|
||||||
|
background-color: var(--rbrh-teal-50);
|
||||||
|
}
|
||||||
|
.dark-bg-teal-100 {
|
||||||
|
background-color: var(--rbrh-teal-100);
|
||||||
|
}
|
||||||
|
.dark-bg-teal-200 {
|
||||||
|
background-color: var(--rbrh-teal-200);
|
||||||
|
}
|
||||||
|
.dark-bg-teal-300 {
|
||||||
|
background-color: var(--rbrh-teal-300);
|
||||||
|
}
|
||||||
|
.dark-bg-teal-400 {
|
||||||
|
background-color: var(--rbrh-teal-400);
|
||||||
|
}
|
||||||
|
.dark-bg-teal-500 {
|
||||||
|
background-color: var(--rbrh-teal-500);
|
||||||
|
}
|
||||||
|
.dark-bg-teal-600 {
|
||||||
|
background-color: var(--rbrh-teal-600);
|
||||||
|
}
|
||||||
|
.dark-bg-teal-700 {
|
||||||
|
background-color: var(--rbrh-teal-700);
|
||||||
|
}
|
||||||
|
.dark-bg-teal-800 {
|
||||||
|
background-color: var(--rbrh-teal-800);
|
||||||
|
}
|
||||||
|
.dark-bg-teal-900 {
|
||||||
|
background-color: var(--rbrh-teal-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
34
src/styles/src/utilities/dark-mode/dark-bg-violet.css
Normal file
34
src/styles/src/utilities/dark-mode/dark-bg-violet.css
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-bg-violet-50 {
|
||||||
|
background-color: var(--rbrh-violet-50);
|
||||||
|
}
|
||||||
|
.dark-bg-violet-100 {
|
||||||
|
background-color: var(--rbrh-violet-100);
|
||||||
|
}
|
||||||
|
.dark-bg-violet-200 {
|
||||||
|
background-color: var(--rbrh-violet-200);
|
||||||
|
}
|
||||||
|
.dark-bg-violet-300 {
|
||||||
|
background-color: var(--rbrh-violet-300);
|
||||||
|
}
|
||||||
|
.dark-bg-violet-400 {
|
||||||
|
background-color: var(--rbrh-violet-400);
|
||||||
|
}
|
||||||
|
.dark-bg-violet-500 {
|
||||||
|
background-color: var(--rbrh-violet-500);
|
||||||
|
}
|
||||||
|
.dark-bg-violet-600 {
|
||||||
|
background-color: var(--rbrh-violet-600);
|
||||||
|
}
|
||||||
|
.dark-bg-violet-700 {
|
||||||
|
background-color: var(--rbrh-violet-700);
|
||||||
|
}
|
||||||
|
.dark-bg-violet-800 {
|
||||||
|
background-color: var(--rbrh-violet-800);
|
||||||
|
}
|
||||||
|
.dark-bg-violet-900 {
|
||||||
|
background-color: var(--rbrh-violet-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
32
src/styles/src/utilities/dark-mode/dark-bg-yellow.css
Normal file
32
src/styles/src/utilities/dark-mode/dark-bg-yellow.css
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-bg-yellow-50 {
|
||||||
|
background-color: var(--rbrh-yellow-50);
|
||||||
|
}
|
||||||
|
.dark-bg-yellow-100 {
|
||||||
|
background-color: var(--rbrh-yellow-100);
|
||||||
|
}
|
||||||
|
.dark-bg-yellow-200 {
|
||||||
|
background-color: var(--rbrh-yellow-200);
|
||||||
|
}
|
||||||
|
.dark-bg-yellow-300 {
|
||||||
|
background-color: var(--rbrh-yellow-300);
|
||||||
|
}
|
||||||
|
.dark-bg-yellow-400 {
|
||||||
|
background-color: var(--rbrh-yellow-400);
|
||||||
|
}
|
||||||
|
.dark-bg-yellow-500 {
|
||||||
|
background-color: var(--rbrh-yellow-500);
|
||||||
|
}
|
||||||
|
.dark-bg-yellow-600 {
|
||||||
|
background-color: var(--rbrh-yellow-600);
|
||||||
|
}
|
||||||
|
.dark-bg-yellow-700 {
|
||||||
|
background-color: var(--rbrh-yellow-700);
|
||||||
|
}
|
||||||
|
.dark-bg-yellow-800 {
|
||||||
|
background-color: var(--rbrh-yellow-800);
|
||||||
|
}
|
||||||
|
.dark-bg-yellow-900 {
|
||||||
|
background-color: var(--rbrh-yellow-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
33
src/styles/src/utilities/dark-mode/dark-blue.css
Normal file
33
src/styles/src/utilities/dark-mode/dark-blue.css
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-blue-50 {
|
||||||
|
color: var(--rbrh-blue-50);
|
||||||
|
}
|
||||||
|
.dark-blue-100 {
|
||||||
|
color: var(--rbrh-blue-100);
|
||||||
|
}
|
||||||
|
.dark-blue-200 {
|
||||||
|
color: var(--rbrh-blue-200);
|
||||||
|
}
|
||||||
|
.dark-blue-300 {
|
||||||
|
color: var(--rbrh-blue-300);
|
||||||
|
}
|
||||||
|
.dark-blue-400 {
|
||||||
|
color: var(--rbrh-blue-400);
|
||||||
|
}
|
||||||
|
.dark-blue-500 {
|
||||||
|
color: var(--rbrh-blue-500);
|
||||||
|
}
|
||||||
|
.dark-blue-600 {
|
||||||
|
color: var(--rbrh-blue-600);
|
||||||
|
}
|
||||||
|
.dark-blue-700 {
|
||||||
|
color: var(--rbrh-blue-700);
|
||||||
|
}
|
||||||
|
.dark-blue-800 {
|
||||||
|
color: var(--rbrh-blue-800);
|
||||||
|
}
|
||||||
|
.dark-blue-900 {
|
||||||
|
color: var(--rbrh-blue-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
32
src/styles/src/utilities/dark-mode/dark-border-blue.css
Normal file
32
src/styles/src/utilities/dark-mode/dark-border-blue.css
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-border-blue-50 {
|
||||||
|
border: 1px solid var(--rbrh-blue-50);
|
||||||
|
}
|
||||||
|
.dark-border-blue-100 {
|
||||||
|
border: 1px solid var(--rbrh-blue-100);
|
||||||
|
}
|
||||||
|
.dark-border-blue-200 {
|
||||||
|
border: 1px solid var(--rbrh-blue-200);
|
||||||
|
}
|
||||||
|
.dark-border-blue-300 {
|
||||||
|
border: 1px solid var(--rbrh-blue-300);
|
||||||
|
}
|
||||||
|
.dark-border-blue-400 {
|
||||||
|
border: 1px solid var(--rbrh-blue-400);
|
||||||
|
}
|
||||||
|
.dark-border-blue-500 {
|
||||||
|
border: 1px solid var(--rbrh-blue-500);
|
||||||
|
}
|
||||||
|
.dark-border-blue-600 {
|
||||||
|
border: 1px solid var(--rbrh-blue-600);
|
||||||
|
}
|
||||||
|
.dark-border-blue-700 {
|
||||||
|
border: 1px solid var(--rbrh-blue-700);
|
||||||
|
}
|
||||||
|
.dark-border-blue-800 {
|
||||||
|
border: 1px solid var(--rbrh-blue-800);
|
||||||
|
}
|
||||||
|
.dark-border-blue-900 {
|
||||||
|
border: 1px solid var(--rbrh-blue-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
32
src/styles/src/utilities/dark-mode/dark-border-cyan.css
Normal file
32
src/styles/src/utilities/dark-mode/dark-border-cyan.css
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-border-cyan-50 {
|
||||||
|
border: 1px solid var(--rbrh-cyan-50);
|
||||||
|
}
|
||||||
|
.dark-border-cyan-100 {
|
||||||
|
border: 1px solid var(--rbrh-cyan-100);
|
||||||
|
}
|
||||||
|
.dark-border-cyan-200 {
|
||||||
|
border: 1px solid var(--rbrh-cyan-200);
|
||||||
|
}
|
||||||
|
.dark-border-cyan-300 {
|
||||||
|
border: 1px solid var(--rbrh-cyan-300);
|
||||||
|
}
|
||||||
|
.dark-border-cyan-400 {
|
||||||
|
border: 1px solid var(--rbrh-cyan-400);
|
||||||
|
}
|
||||||
|
.dark-border-cyan-500 {
|
||||||
|
border: 1px solid var(--rbrh-cyan-500);
|
||||||
|
}
|
||||||
|
.dark-border-cyan-600 {
|
||||||
|
border: 1px solid var(--rbrh-cyan-600);
|
||||||
|
}
|
||||||
|
.dark-border-cyan-700 {
|
||||||
|
border: 1px solid var(--rbrh-cyan-700);
|
||||||
|
}
|
||||||
|
.dark-border-cyan-800 {
|
||||||
|
border: 1px solid var(--rbrh-cyan-800);
|
||||||
|
}
|
||||||
|
.dark-border-cyan-900 {
|
||||||
|
border: 1px solid var(--rbrh-cyan-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
41
src/styles/src/utilities/dark-mode/dark-border-gray.css
Normal file
41
src/styles/src/utilities/dark-mode/dark-border-gray.css
Normal file
|
|
@ -0,0 +1,41 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-border-none {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.dark-border-black {
|
||||||
|
border: 1px solid var(--rbrh-black);
|
||||||
|
}
|
||||||
|
.dark-border-white {
|
||||||
|
border: 1px solid var(--rbrh-white);
|
||||||
|
}
|
||||||
|
.dark-border-gray-50 {
|
||||||
|
border: 1px solid var(--rbrh-gray-50);
|
||||||
|
}
|
||||||
|
.dark-border-gray-100 {
|
||||||
|
border: 1px solid var(--rbrh-gray-100);
|
||||||
|
}
|
||||||
|
.dark-border-gray-200 {
|
||||||
|
border: 1px solid var(--rbrh-gray-200);
|
||||||
|
}
|
||||||
|
.dark-border-gray-300 {
|
||||||
|
border: 1px solid var(--rbrh-gray-300);
|
||||||
|
}
|
||||||
|
.dark-border-gray-400 {
|
||||||
|
border: 1px solid var(--rbrh-gray-400);
|
||||||
|
}
|
||||||
|
.dark-border-gray-500 {
|
||||||
|
border: 1px solid var(--rbrh-gray-500);
|
||||||
|
}
|
||||||
|
.dark-border-gray-600 {
|
||||||
|
border: 1px solid var(--rbrh-gray-600);
|
||||||
|
}
|
||||||
|
.dark-border-gray-700 {
|
||||||
|
border: 1px solid var(--rbrh-gray-700);
|
||||||
|
}
|
||||||
|
.dark-border-gray-800 {
|
||||||
|
border: 1px solid var(--rbrh-gray-800);
|
||||||
|
}
|
||||||
|
.dark-border-gray-900 {
|
||||||
|
border: 1px solid var(--rbrh-gray-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
32
src/styles/src/utilities/dark-mode/dark-border-green.css
Normal file
32
src/styles/src/utilities/dark-mode/dark-border-green.css
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-border-green-50 {
|
||||||
|
border: 1px solid var(--rbrh-green-50);
|
||||||
|
}
|
||||||
|
.dark-border-green-100 {
|
||||||
|
border: 1px solid var(--rbrh-green-100);
|
||||||
|
}
|
||||||
|
.dark-border-green-200 {
|
||||||
|
border: 1px solid var(--rbrh-green-200);
|
||||||
|
}
|
||||||
|
.dark-border-green-300 {
|
||||||
|
border: 1px solid var(--rbrh-green-300);
|
||||||
|
}
|
||||||
|
.dark-border-green-400 {
|
||||||
|
border: 1px solid var(--rbrh-green-400);
|
||||||
|
}
|
||||||
|
.dark-border-green-500 {
|
||||||
|
border: 1px solid var(--rbrh-green-500);
|
||||||
|
}
|
||||||
|
.dark-border-green-600 {
|
||||||
|
border: 1px solid var(--rbrh-green-600);
|
||||||
|
}
|
||||||
|
.dark-border-green-700 {
|
||||||
|
border: 1px solid var(--rbrh-green-700);
|
||||||
|
}
|
||||||
|
.dark-border-green-800 {
|
||||||
|
border: 1px solid var(--rbrh-green-800);
|
||||||
|
}
|
||||||
|
.dark-border-green-900 {
|
||||||
|
border: 1px solid var(--rbrh-green-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
32
src/styles/src/utilities/dark-mode/dark-border-indigo.css
Normal file
32
src/styles/src/utilities/dark-mode/dark-border-indigo.css
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-border-indigo-50 {
|
||||||
|
border: 1px solid var(--rbrh-indigo-50);
|
||||||
|
}
|
||||||
|
.dark-border-indigo-100 {
|
||||||
|
border: 1px solid var(--rbrh-indigo-100);
|
||||||
|
}
|
||||||
|
.dark-border-indigo-200 {
|
||||||
|
border: 1px solid var(--rbrh-indigo-200);
|
||||||
|
}
|
||||||
|
.dark-border-indigo-300 {
|
||||||
|
border: 1px solid var(--rbrh-indigo-300);
|
||||||
|
}
|
||||||
|
.dark-border-indigo-400 {
|
||||||
|
border: 1px solid var(--rbrh-indigo-400);
|
||||||
|
}
|
||||||
|
.dark-border-indigo-500 {
|
||||||
|
border: 1px solid var(--rbrh-indigo-500);
|
||||||
|
}
|
||||||
|
.dark-border-indigo-600 {
|
||||||
|
border: 1px solid var(--rbrh-indigo-600);
|
||||||
|
}
|
||||||
|
.dark-border-indigo-700 {
|
||||||
|
border: 1px solid var(--rbrh-indigo-700);
|
||||||
|
}
|
||||||
|
.dark-border-indigo-800 {
|
||||||
|
border: 1px solid var(--rbrh-indigo-800);
|
||||||
|
}
|
||||||
|
.dark-border-indigo-900 {
|
||||||
|
border: 1px solid var(--rbrh-indigo-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
32
src/styles/src/utilities/dark-mode/dark-border-lime.css
Normal file
32
src/styles/src/utilities/dark-mode/dark-border-lime.css
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-border-lime-50 {
|
||||||
|
border: 1px solid var(--rbrh-lime-50);
|
||||||
|
}
|
||||||
|
.dark-border-lime-100 {
|
||||||
|
border: 1px solid var(--rbrh-lime-100);
|
||||||
|
}
|
||||||
|
.dark-border-lime-200 {
|
||||||
|
border: 1px solid var(--rbrh-lime-200);
|
||||||
|
}
|
||||||
|
.dark-border-lime-300 {
|
||||||
|
border: 1px solid var(--rbrh-lime-300);
|
||||||
|
}
|
||||||
|
.dark-border-lime-400 {
|
||||||
|
border: 1px solid var(--rbrh-lime-400);
|
||||||
|
}
|
||||||
|
.dark-border-lime-500 {
|
||||||
|
border: 1px solid var(--rbrh-lime-500);
|
||||||
|
}
|
||||||
|
.dark-border-lime-600 {
|
||||||
|
border: 1px solid var(--rbrh-lime-600);
|
||||||
|
}
|
||||||
|
.dark-border-lime-700 {
|
||||||
|
border: 1px solid var(--rbrh-lime-700);
|
||||||
|
}
|
||||||
|
.dark-border-lime-800 {
|
||||||
|
border: 1px solid var(--rbrh-lime-800);
|
||||||
|
}
|
||||||
|
.dark-border-lime-900 {
|
||||||
|
border: 1px solid var(--rbrh-lime-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
32
src/styles/src/utilities/dark-mode/dark-border-magenta.css
Normal file
32
src/styles/src/utilities/dark-mode/dark-border-magenta.css
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-border-magenta-50 {
|
||||||
|
border: 1px solid var(--rbrh-magenta-50);
|
||||||
|
}
|
||||||
|
.dark-border-magenta-100 {
|
||||||
|
border: 1px solid var(--rbrh-magenta-100);
|
||||||
|
}
|
||||||
|
.dark-border-magenta-200 {
|
||||||
|
border: 1px solid var(--rbrh-magenta-200);
|
||||||
|
}
|
||||||
|
.dark-border-magenta-300 {
|
||||||
|
border: 1px solid var(--rbrh-magenta-300);
|
||||||
|
}
|
||||||
|
.dark-border-magenta-400 {
|
||||||
|
border: 1px solid var(--rbrh-magenta-400);
|
||||||
|
}
|
||||||
|
.dark-border-magenta-500 {
|
||||||
|
border: 1px solid var(--rbrh-magenta-500);
|
||||||
|
}
|
||||||
|
.dark-border-magenta-600 {
|
||||||
|
border: 1px solid var(--rbrh-magenta-600);
|
||||||
|
}
|
||||||
|
.dark-border-magenta-700 {
|
||||||
|
border: 1px solid var(--rbrh-magenta-700);
|
||||||
|
}
|
||||||
|
.dark-border-magenta-800 {
|
||||||
|
border: 1px solid var(--rbrh-magenta-800);
|
||||||
|
}
|
||||||
|
.dark-border-magenta-900 {
|
||||||
|
border: 1px solid var(--rbrh-magenta-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
32
src/styles/src/utilities/dark-mode/dark-border-orange.css
Normal file
32
src/styles/src/utilities/dark-mode/dark-border-orange.css
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-border-orange-50 {
|
||||||
|
border: 1px solid var(--rbrh-orange-50);
|
||||||
|
}
|
||||||
|
.dark-border-orange-100 {
|
||||||
|
border: 1px solid var(--rbrh-orange-100);
|
||||||
|
}
|
||||||
|
.dark-border-orange-200 {
|
||||||
|
border: 1px solid var(--rbrh-orange-200);
|
||||||
|
}
|
||||||
|
.dark-border-orange-300 {
|
||||||
|
border: 1px solid var(--rbrh-orange-300);
|
||||||
|
}
|
||||||
|
.dark-border-orange-400 {
|
||||||
|
border: 1px solid var(--rbrh-orange-400);
|
||||||
|
}
|
||||||
|
.dark-border-orange-500 {
|
||||||
|
border: 1px solid var(--rbrh-orange-500);
|
||||||
|
}
|
||||||
|
.dark-border-orange-600 {
|
||||||
|
border: 1px solid var(--rbrh-orange-600);
|
||||||
|
}
|
||||||
|
.dark-border-orange-700 {
|
||||||
|
border: 1px solid var(--rbrh-orange-700);
|
||||||
|
}
|
||||||
|
.dark-border-orange-800 {
|
||||||
|
border: 1px solid var(--rbrh-orange-800);
|
||||||
|
}
|
||||||
|
.dark-border-orange-900 {
|
||||||
|
border: 1px solid var(--rbrh-orange-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
32
src/styles/src/utilities/dark-mode/dark-border-purple.css
Normal file
32
src/styles/src/utilities/dark-mode/dark-border-purple.css
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-border-purple-50 {
|
||||||
|
border: 1px solid var(--rbrh-purple-50);
|
||||||
|
}
|
||||||
|
.dark-border-purple-100 {
|
||||||
|
border: 1px solid var(--rbrh-purple-100);
|
||||||
|
}
|
||||||
|
.dark-border-purple-200 {
|
||||||
|
border: 1px solid var(--rbrh-purple-200);
|
||||||
|
}
|
||||||
|
.dark-border-purple-300 {
|
||||||
|
border: 1px solid var(--rbrh-purple-300);
|
||||||
|
}
|
||||||
|
.dark-border-purple-400 {
|
||||||
|
border: 1px solid var(--rbrh-purple-400);
|
||||||
|
}
|
||||||
|
.dark-border-purple-500 {
|
||||||
|
border: 1px solid var(--rbrh-purple-500);
|
||||||
|
}
|
||||||
|
.dark-border-purple-600 {
|
||||||
|
border: 1px solid var(--rbrh-purple-600);
|
||||||
|
}
|
||||||
|
.dark-border-purple-700 {
|
||||||
|
border: 1px solid var(--rbrh-purple-700);
|
||||||
|
}
|
||||||
|
.dark-border-purple-800 {
|
||||||
|
border: 1px solid var(--rbrh-purple-800);
|
||||||
|
}
|
||||||
|
.dark-border-purple-900 {
|
||||||
|
border: 1px solid var(--rbrh-purple-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
32
src/styles/src/utilities/dark-mode/dark-border-red.css
Normal file
32
src/styles/src/utilities/dark-mode/dark-border-red.css
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-border-red-50 {
|
||||||
|
border: 1px solid var(--rbrh-red-50);
|
||||||
|
}
|
||||||
|
.dark-border-red-100 {
|
||||||
|
border: 1px solid var(--rbrh-red-100);
|
||||||
|
}
|
||||||
|
.dark-border-red-200 {
|
||||||
|
border: 1px solid var(--rbrh-red-200);
|
||||||
|
}
|
||||||
|
.dark-border-red-300 {
|
||||||
|
border: 1px solid var(--rbrh-red-300);
|
||||||
|
}
|
||||||
|
.dark-border-red-400 {
|
||||||
|
border: 1px solid var(--rbrh-red-400);
|
||||||
|
}
|
||||||
|
.dark-border-red-500 {
|
||||||
|
border: 1px solid var(--rbrh-red-500);
|
||||||
|
}
|
||||||
|
.dark-border-red-600 {
|
||||||
|
border: 1px solid var(--rbrh-red-600);
|
||||||
|
}
|
||||||
|
.dark-border-red-700 {
|
||||||
|
border: 1px solid var(--rbrh-red-700);
|
||||||
|
}
|
||||||
|
.dark-border-red-800 {
|
||||||
|
border: 1px solid var(--rbrh-red-800);
|
||||||
|
}
|
||||||
|
.dark-border-red-900 {
|
||||||
|
border: 1px solid var(--rbrh-red-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
32
src/styles/src/utilities/dark-mode/dark-border-sky.css
Normal file
32
src/styles/src/utilities/dark-mode/dark-border-sky.css
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-border-sky-50 {
|
||||||
|
border: 1px solid var(--rbrh-sky-50);
|
||||||
|
}
|
||||||
|
.dark-border-sky-100 {
|
||||||
|
border: 1px solid var(--rbrh-sky-100);
|
||||||
|
}
|
||||||
|
.dark-border-sky-200 {
|
||||||
|
border: 1px solid var(--rbrh-sky-200);
|
||||||
|
}
|
||||||
|
.dark-border-sky-300 {
|
||||||
|
border: 1px solid var(--rbrh-sky-300);
|
||||||
|
}
|
||||||
|
.dark-border-sky-400 {
|
||||||
|
border: 1px solid var(--rbrh-sky-400);
|
||||||
|
}
|
||||||
|
.dark-border-sky-500 {
|
||||||
|
border: 1px solid var(--rbrh-sky-500);
|
||||||
|
}
|
||||||
|
.dark-border-sky-600 {
|
||||||
|
border: 1px solid var(--rbrh-sky-600);
|
||||||
|
}
|
||||||
|
.dark-border-sky-700 {
|
||||||
|
border: 1px solid var(--rbrh-sky-700);
|
||||||
|
}
|
||||||
|
.dark-border-sky-800 {
|
||||||
|
border: 1px solid var(--rbrh-sky-800);
|
||||||
|
}
|
||||||
|
.dark-border-sky-900 {
|
||||||
|
border: 1px solid var(--rbrh-sky-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
32
src/styles/src/utilities/dark-mode/dark-border-teal.css
Normal file
32
src/styles/src/utilities/dark-mode/dark-border-teal.css
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-border-teal-50 {
|
||||||
|
border: 1px solid var(--rbrh-teal-50);
|
||||||
|
}
|
||||||
|
.dark-border-teal-100 {
|
||||||
|
border: 1px solid var(--rbrh-teal-100);
|
||||||
|
}
|
||||||
|
.dark-border-teal-200 {
|
||||||
|
border: 1px solid var(--rbrh-teal-200);
|
||||||
|
}
|
||||||
|
.dark-border-teal-300 {
|
||||||
|
border: 1px solid var(--rbrh-teal-300);
|
||||||
|
}
|
||||||
|
.dark-border-teal-400 {
|
||||||
|
border: 1px solid var(--rbrh-teal-400);
|
||||||
|
}
|
||||||
|
.dark-border-teal-500 {
|
||||||
|
border: 1px solid var(--rbrh-teal-500);
|
||||||
|
}
|
||||||
|
.dark-border-teal-600 {
|
||||||
|
border: 1px solid var(--rbrh-teal-600);
|
||||||
|
}
|
||||||
|
.dark-border-teal-700 {
|
||||||
|
border: 1px solid var(--rbrh-teal-700);
|
||||||
|
}
|
||||||
|
.dark-border-teal-800 {
|
||||||
|
border: 1px solid var(--rbrh-teal-800);
|
||||||
|
}
|
||||||
|
.dark-border-teal-900 {
|
||||||
|
border: 1px solid var(--rbrh-teal-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
32
src/styles/src/utilities/dark-mode/dark-border-violet.css
Normal file
32
src/styles/src/utilities/dark-mode/dark-border-violet.css
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-border-violet-50 {
|
||||||
|
border: 1px solid var(--rbrh-violet-50);
|
||||||
|
}
|
||||||
|
.dark-border-violet-100 {
|
||||||
|
border: 1px solid var(--rbrh-violet-100);
|
||||||
|
}
|
||||||
|
.dark-border-violet-200 {
|
||||||
|
border: 1px solid var(--rbrh-violet-200);
|
||||||
|
}
|
||||||
|
.dark-border-violet-300 {
|
||||||
|
border: 1px solid var(--rbrh-violet-300);
|
||||||
|
}
|
||||||
|
.dark-border-violet-400 {
|
||||||
|
border: 1px solid var(--rbrh-violet-400);
|
||||||
|
}
|
||||||
|
.dark-border-violet-500 {
|
||||||
|
border: 1px solid var(--rbrh-violet-500);
|
||||||
|
}
|
||||||
|
.dark-border-violet-600 {
|
||||||
|
border: 1px solid var(--rbrh-violet-600);
|
||||||
|
}
|
||||||
|
.dark-border-violet-700 {
|
||||||
|
border: 1px solid var(--rbrh-violet-700);
|
||||||
|
}
|
||||||
|
.dark-border-violet-800 {
|
||||||
|
border: 1px solid var(--rbrh-violet-800);
|
||||||
|
}
|
||||||
|
.dark-border-violet-900 {
|
||||||
|
border: 1px solid var(--rbrh-violet-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
23
src/styles/src/utilities/dark-mode/dark-border-width.css
Normal file
23
src/styles/src/utilities/dark-mode/dark-border-width.css
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-border-1 {
|
||||||
|
border-width: 1px;
|
||||||
|
}
|
||||||
|
.dark-border-2 {
|
||||||
|
border-width: 2px;
|
||||||
|
}
|
||||||
|
.dark-border-3 {
|
||||||
|
border-width: 3px;
|
||||||
|
}
|
||||||
|
.dark-border-4 {
|
||||||
|
border-width: 4px;
|
||||||
|
}
|
||||||
|
.dark-border-6 {
|
||||||
|
border-width: 6px;
|
||||||
|
}
|
||||||
|
.dark-border-8 {
|
||||||
|
border-width: 8px;
|
||||||
|
}
|
||||||
|
.dark-border-10 {
|
||||||
|
border-width: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
32
src/styles/src/utilities/dark-mode/dark-border-yellow.css
Normal file
32
src/styles/src/utilities/dark-mode/dark-border-yellow.css
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-border-yellow-50 {
|
||||||
|
border: 1px solid var(--rbrh-yellow-50);
|
||||||
|
}
|
||||||
|
.dark-border-yellow-100 {
|
||||||
|
border: 1px solid var(--rbrh-yellow-100);
|
||||||
|
}
|
||||||
|
.dark-border-yellow-200 {
|
||||||
|
border: 1px solid var(--rbrh-yellow-200);
|
||||||
|
}
|
||||||
|
.dark-border-yellow-300 {
|
||||||
|
border: 1px solid var(--rbrh-yellow-300);
|
||||||
|
}
|
||||||
|
.dark-border-yellow-400 {
|
||||||
|
border: 1px solid var(--rbrh-yellow-400);
|
||||||
|
}
|
||||||
|
.dark-border-yellow-500 {
|
||||||
|
border: 1px solid var(--rbrh-yellow-500);
|
||||||
|
}
|
||||||
|
.dark-border-yellow-600 {
|
||||||
|
border: 1px solid var(--rbrh-yellow-600);
|
||||||
|
}
|
||||||
|
.dark-border-yellow-700 {
|
||||||
|
border: 1px solid var(--rbrh-yellow-700);
|
||||||
|
}
|
||||||
|
.dark-border-yellow-800 {
|
||||||
|
border: 1px solid var(--rbrh-yellow-800);
|
||||||
|
}
|
||||||
|
.dark-border-yellow-900 {
|
||||||
|
border: 1px solid var(--rbrh-yellow-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
32
src/styles/src/utilities/dark-mode/dark-cyan.css
Normal file
32
src/styles/src/utilities/dark-mode/dark-cyan.css
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-cyan-50 {
|
||||||
|
color: var(--rbrh-cyan-50);
|
||||||
|
}
|
||||||
|
.dark-cyan-100 {
|
||||||
|
color: var(--rbrh-cyan-100);
|
||||||
|
}
|
||||||
|
.dark-cyan-200 {
|
||||||
|
color: var(--rbrh-cyan-200);
|
||||||
|
}
|
||||||
|
.dark-cyan-300 {
|
||||||
|
color: var(--rbrh-cyan-300);
|
||||||
|
}
|
||||||
|
.dark-cyan-400 {
|
||||||
|
color: var(--rbrh-cyan-400);
|
||||||
|
}
|
||||||
|
.dark-cyan-500 {
|
||||||
|
color: var(--rbrh-cyan-500);
|
||||||
|
}
|
||||||
|
.dark-cyan-600 {
|
||||||
|
color: var(--rbrh-cyan-600);
|
||||||
|
}
|
||||||
|
.dark-cyan-700 {
|
||||||
|
color: var(--rbrh-cyan-700);
|
||||||
|
}
|
||||||
|
.dark-cyan-800 {
|
||||||
|
color: var(--rbrh-cyan-800);
|
||||||
|
}
|
||||||
|
.dark-cyan-900 {
|
||||||
|
color: var(--rbrh-cyan-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
42
src/styles/src/utilities/dark-mode/dark-gray.css
Normal file
42
src/styles/src/utilities/dark-mode/dark-gray.css
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-transparent {
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
.dark-white {
|
||||||
|
color: var(--rbrh-white);
|
||||||
|
}
|
||||||
|
.dark-black {
|
||||||
|
color: var(--rbrh-black);
|
||||||
|
}
|
||||||
|
.dark-gray-50 {
|
||||||
|
color: var(--rbrh-gray-50);
|
||||||
|
}
|
||||||
|
.dark-gray-100 {
|
||||||
|
color: var(--rbrh-gray-100);
|
||||||
|
}
|
||||||
|
.dark-gray-200 {
|
||||||
|
color: var(--rbrh-gray-200);
|
||||||
|
}
|
||||||
|
.dark-gray-300 {
|
||||||
|
color: var(--rbrh-gray-300);
|
||||||
|
}
|
||||||
|
.dark-gray-400 {
|
||||||
|
color: var(--rbrh-gray-400);
|
||||||
|
}
|
||||||
|
.dark-gray-500 {
|
||||||
|
color: var(--rbrh-gray-500);
|
||||||
|
}
|
||||||
|
.dark-gray-600 {
|
||||||
|
color: var(--rbrh-gray-600);
|
||||||
|
}
|
||||||
|
.dark-gray-700 {
|
||||||
|
color: var(--rbrh-gray-700);
|
||||||
|
}
|
||||||
|
.dark-gray-800 {
|
||||||
|
color: var(--rbrh-gray-800);
|
||||||
|
}
|
||||||
|
.dark-gray-900 {
|
||||||
|
color: var(--rbrh-gray-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
33
src/styles/src/utilities/dark-mode/dark-green.css
Normal file
33
src/styles/src/utilities/dark-mode/dark-green.css
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-green-50 {
|
||||||
|
color: var(--rbrh-green-50);
|
||||||
|
}
|
||||||
|
.dark-green-100 {
|
||||||
|
color: var(--rbrh-green-100);
|
||||||
|
}
|
||||||
|
.dark-green-200 {
|
||||||
|
color: var(--rbrh-green-200);
|
||||||
|
}
|
||||||
|
.dark-green-300 {
|
||||||
|
color: var(--rbrh-green-300);
|
||||||
|
}
|
||||||
|
.dark-green-400 {
|
||||||
|
color: var(--rbrh-green-400);
|
||||||
|
}
|
||||||
|
.dark-green-500 {
|
||||||
|
color: var(--rbrh-green-500);
|
||||||
|
}
|
||||||
|
.dark-green-600 {
|
||||||
|
color: var(--rbrh-green-600);
|
||||||
|
}
|
||||||
|
.dark-green-700 {
|
||||||
|
color: var(--rbrh-green-700);
|
||||||
|
}
|
||||||
|
.dark-green-800 {
|
||||||
|
color: var(--rbrh-green-800);
|
||||||
|
}
|
||||||
|
.dark-green-900 {
|
||||||
|
color: var(--rbrh-green-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
33
src/styles/src/utilities/dark-mode/dark-indigo.css
Normal file
33
src/styles/src/utilities/dark-mode/dark-indigo.css
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-indigo-50 {
|
||||||
|
color: var(--rbrh-indigo-50);
|
||||||
|
}
|
||||||
|
.dark-indigo-100 {
|
||||||
|
color: var(--rbrh-indigo-100);
|
||||||
|
}
|
||||||
|
.dark-indigo-200 {
|
||||||
|
color: var(--rbrh-indigo-200);
|
||||||
|
}
|
||||||
|
.dark-indigo-300 {
|
||||||
|
color: var(--rbrh-indigo-300);
|
||||||
|
}
|
||||||
|
.dark-indigo-400 {
|
||||||
|
color: var(--rbrh-indigo-400);
|
||||||
|
}
|
||||||
|
.dark-indigo-500 {
|
||||||
|
color: var(--rbrh-indigo-500);
|
||||||
|
}
|
||||||
|
.dark-indigo-600 {
|
||||||
|
color: var(--rbrh-indigo-600);
|
||||||
|
}
|
||||||
|
.dark-indigo-700 {
|
||||||
|
color: var(--rbrh-indigo-700);
|
||||||
|
}
|
||||||
|
.dark-indigo-800 {
|
||||||
|
color: var(--rbrh-indigo-800);
|
||||||
|
}
|
||||||
|
.dark-indigo-900 {
|
||||||
|
color: var(--rbrh-indigo-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
33
src/styles/src/utilities/dark-mode/dark-lime.css
Normal file
33
src/styles/src/utilities/dark-mode/dark-lime.css
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-lime-50 {
|
||||||
|
color: var(--rbrh-lime-50);
|
||||||
|
}
|
||||||
|
.dark-lime-100 {
|
||||||
|
color: var(--rbrh-lime-100);
|
||||||
|
}
|
||||||
|
.dark-lime-200 {
|
||||||
|
color: var(--rbrh-lime-200);
|
||||||
|
}
|
||||||
|
.dark-lime-300 {
|
||||||
|
color: var(--rbrh-lime-300);
|
||||||
|
}
|
||||||
|
.dark-lime-400 {
|
||||||
|
color: var(--rbrh-lime-400);
|
||||||
|
}
|
||||||
|
.dark-lime-500 {
|
||||||
|
color: var(--rbrh-lime-500);
|
||||||
|
}
|
||||||
|
.dark-lime-600 {
|
||||||
|
color: var(--rbrh-lime-600);
|
||||||
|
}
|
||||||
|
.dark-lime-700 {
|
||||||
|
color: var(--rbrh-lime-700);
|
||||||
|
}
|
||||||
|
.dark-lime-800 {
|
||||||
|
color: var(--rbrh-lime-800);
|
||||||
|
}
|
||||||
|
.dark-lime-900 {
|
||||||
|
color: var(--rbrh-lime-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
33
src/styles/src/utilities/dark-mode/dark-magenta.css
Normal file
33
src/styles/src/utilities/dark-mode/dark-magenta.css
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-magenta-50 {
|
||||||
|
color: var(--rbrh-magenta-50);
|
||||||
|
}
|
||||||
|
.dark-magenta-100 {
|
||||||
|
color: var(--rbrh-magenta-100);
|
||||||
|
}
|
||||||
|
.dark-magenta-200 {
|
||||||
|
color: var(--rbrh-magenta-200);
|
||||||
|
}
|
||||||
|
.dark-magenta-300 {
|
||||||
|
color: var(--rbrh-magenta-300);
|
||||||
|
}
|
||||||
|
.dark-magenta-400 {
|
||||||
|
color: var(--rbrh-magenta-400);
|
||||||
|
}
|
||||||
|
.dark-magenta-500 {
|
||||||
|
color: var(--rbrh-magenta-500);
|
||||||
|
}
|
||||||
|
.dark-magenta-600 {
|
||||||
|
color: var(--rbrh-magenta-600);
|
||||||
|
}
|
||||||
|
.dark-magenta-700 {
|
||||||
|
color: var(--rbrh-magenta-700);
|
||||||
|
}
|
||||||
|
.dark-magenta-800 {
|
||||||
|
color: var(--rbrh-magenta-800);
|
||||||
|
}
|
||||||
|
.dark-magenta-900 {
|
||||||
|
color: var(--rbrh-magenta-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
33
src/styles/src/utilities/dark-mode/dark-orange.css
Normal file
33
src/styles/src/utilities/dark-mode/dark-orange.css
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-orange-50 {
|
||||||
|
color: var(--rbrh-orange-50);
|
||||||
|
}
|
||||||
|
.dark-orange-100 {
|
||||||
|
color: var(--rbrh-orange-100);
|
||||||
|
}
|
||||||
|
.dark-orange-200 {
|
||||||
|
color: var(--rbrh-orange-200);
|
||||||
|
}
|
||||||
|
.dark-orange-300 {
|
||||||
|
color: var(--rbrh-orange-300);
|
||||||
|
}
|
||||||
|
.dark-orange-400 {
|
||||||
|
color: var(--rbrh-orange-400);
|
||||||
|
}
|
||||||
|
.dark-orange-500 {
|
||||||
|
color: var(--rbrh-orange-500);
|
||||||
|
}
|
||||||
|
.dark-orange-600 {
|
||||||
|
color: var(--rbrh-orange-600);
|
||||||
|
}
|
||||||
|
.dark-orange-700 {
|
||||||
|
color: var(--rbrh-orange-700);
|
||||||
|
}
|
||||||
|
.dark-orange-800 {
|
||||||
|
color: var(--rbrh-orange-800);
|
||||||
|
}
|
||||||
|
.dark-orange-900 {
|
||||||
|
color: var(--rbrh-orange-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
33
src/styles/src/utilities/dark-mode/dark-purple.css
Normal file
33
src/styles/src/utilities/dark-mode/dark-purple.css
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-purple-50 {
|
||||||
|
color: var(--rbrh-purple-50);
|
||||||
|
}
|
||||||
|
.dark-purple-100 {
|
||||||
|
color: var(--rbrh-purple-100);
|
||||||
|
}
|
||||||
|
.dark-purple-200 {
|
||||||
|
color: var(--rbrh-purple-200);
|
||||||
|
}
|
||||||
|
.dark-purple-300 {
|
||||||
|
color: var(--rbrh-purple-300);
|
||||||
|
}
|
||||||
|
.dark-purple-400 {
|
||||||
|
color: var(--rbrh-purple-400);
|
||||||
|
}
|
||||||
|
.dark-purple-500 {
|
||||||
|
color: var(--rbrh-purple-500);
|
||||||
|
}
|
||||||
|
.dark-purple-600 {
|
||||||
|
color: var(--rbrh-purple-600);
|
||||||
|
}
|
||||||
|
.dark-purple-700 {
|
||||||
|
color: var(--rbrh-purple-700);
|
||||||
|
}
|
||||||
|
.dark-purple-800 {
|
||||||
|
color: var(--rbrh-purple-800);
|
||||||
|
}
|
||||||
|
.dark-purple-900 {
|
||||||
|
color: var(--rbrh-purple-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
33
src/styles/src/utilities/dark-mode/dark-red.css
Normal file
33
src/styles/src/utilities/dark-mode/dark-red.css
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-red-50 {
|
||||||
|
color: var(--rbrh-red-50);
|
||||||
|
}
|
||||||
|
.dark-red-100 {
|
||||||
|
color: var(--rbrh-red-100);
|
||||||
|
}
|
||||||
|
.dark-red-200 {
|
||||||
|
color: var(--rbrh-red-200);
|
||||||
|
}
|
||||||
|
.dark-red-300 {
|
||||||
|
color: var(--rbrh-red-300);
|
||||||
|
}
|
||||||
|
.dark-red-400 {
|
||||||
|
color: var(--rbrh-red-400);
|
||||||
|
}
|
||||||
|
.dark-red-500 {
|
||||||
|
color: var(--rbrh-red-500);
|
||||||
|
}
|
||||||
|
.dark-red-600 {
|
||||||
|
color: var(--rbrh-red-600);
|
||||||
|
}
|
||||||
|
.dark-red-700 {
|
||||||
|
color: var(--rbrh-red-700);
|
||||||
|
}
|
||||||
|
.dark-red-800 {
|
||||||
|
color: var(--rbrh-red-800);
|
||||||
|
}
|
||||||
|
.dark-red-900 {
|
||||||
|
color: var(--rbrh-red-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
33
src/styles/src/utilities/dark-mode/dark-sky.css
Normal file
33
src/styles/src/utilities/dark-mode/dark-sky.css
Normal file
|
|
@ -0,0 +1,33 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-sky-50 {
|
||||||
|
color: var(--rbrh-sky-50);
|
||||||
|
}
|
||||||
|
.dark-sky-100 {
|
||||||
|
color: var(--rbrh-sky-100);
|
||||||
|
}
|
||||||
|
.dark-sky-200 {
|
||||||
|
color: var(--rbrh-sky-200);
|
||||||
|
}
|
||||||
|
.dark-sky-300 {
|
||||||
|
color: var(--rbrh-sky-300);
|
||||||
|
}
|
||||||
|
.dark-sky-400 {
|
||||||
|
color: var(--rbrh-sky-400);
|
||||||
|
}
|
||||||
|
.dark-sky-500 {
|
||||||
|
color: var(--rbrh-sky-500);
|
||||||
|
}
|
||||||
|
.dark-sky-600 {
|
||||||
|
color: var(--rbrh-sky-600);
|
||||||
|
}
|
||||||
|
.dark-sky-700 {
|
||||||
|
color: var(--rbrh-sky-700);
|
||||||
|
}
|
||||||
|
.dark-sky-800 {
|
||||||
|
color: var(--rbrh-sky-800);
|
||||||
|
}
|
||||||
|
.dark-sky-900 {
|
||||||
|
color: var(--rbrh-sky-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
32
src/styles/src/utilities/dark-mode/dark-teal.css
Normal file
32
src/styles/src/utilities/dark-mode/dark-teal.css
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-teal-50 {
|
||||||
|
color: var(--rbrh-teal-50);
|
||||||
|
}
|
||||||
|
.dark-teal-100 {
|
||||||
|
color: var(--rbrh-teal-100);
|
||||||
|
}
|
||||||
|
.dark-teal-200 {
|
||||||
|
color: var(--rbrh-teal-200);
|
||||||
|
}
|
||||||
|
.dark-teal-300 {
|
||||||
|
color: var(--rbrh-teal-300);
|
||||||
|
}
|
||||||
|
.dark-teal-400 {
|
||||||
|
color: var(--rbrh-teal-400);
|
||||||
|
}
|
||||||
|
.dark-teal-500 {
|
||||||
|
color: var(--rbrh-teal-500);
|
||||||
|
}
|
||||||
|
.dark-teal-600 {
|
||||||
|
color: var(--rbrh-teal-600);
|
||||||
|
}
|
||||||
|
.dark-teal-700 {
|
||||||
|
color: var(--rbrh-teal-700);
|
||||||
|
}
|
||||||
|
.dark-teal-800 {
|
||||||
|
color: var(--rbrh-teal-800);
|
||||||
|
}
|
||||||
|
.dark-teal-900 {
|
||||||
|
color: var(--rbrh-teal-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
34
src/styles/src/utilities/dark-mode/dark-violet.css
Normal file
34
src/styles/src/utilities/dark-mode/dark-violet.css
Normal file
|
|
@ -0,0 +1,34 @@
|
||||||
|
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-violet-50 {
|
||||||
|
color: var(--rbrh-violet-50);
|
||||||
|
}
|
||||||
|
.dark-violet-100 {
|
||||||
|
color: var(--rbrh-violet-100);
|
||||||
|
}
|
||||||
|
.dark-violet-200 {
|
||||||
|
color: var(--rbrh-violet-200);
|
||||||
|
}
|
||||||
|
.dark-violet-300 {
|
||||||
|
color: var(--rbrh-violet-300);
|
||||||
|
}
|
||||||
|
.dark-violet-400 {
|
||||||
|
color: var(--rbrh-violet-400);
|
||||||
|
}
|
||||||
|
.dark-violet-500 {
|
||||||
|
color: var(--rbrh-violet-500);
|
||||||
|
}
|
||||||
|
.dark-violet-600 {
|
||||||
|
color: var(--rbrh-violet-600);
|
||||||
|
}
|
||||||
|
.dark-violet-700 {
|
||||||
|
color: var(--rbrh-violet-700);
|
||||||
|
}
|
||||||
|
.dark-violet-800 {
|
||||||
|
color: var(--rbrh-violet-800);
|
||||||
|
}
|
||||||
|
.dark-violet-900 {
|
||||||
|
color: var(--rbrh-violet-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
32
src/styles/src/utilities/dark-mode/dark-yellow.css
Normal file
32
src/styles/src/utilities/dark-mode/dark-yellow.css
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
[data-theme="dark"] {
|
||||||
|
.dark-yellow-50 {
|
||||||
|
color: var(--rbrh-yellow-50);
|
||||||
|
}
|
||||||
|
.dark-yellow-100 {
|
||||||
|
color: var(--rbrh-yellow-100);
|
||||||
|
}
|
||||||
|
.dark-yellow-200 {
|
||||||
|
color: var(--rbrh-yellow-200);
|
||||||
|
}
|
||||||
|
.dark-yellow-300 {
|
||||||
|
color: var(--rbrh-yellow-300);
|
||||||
|
}
|
||||||
|
.dark-yellow-400 {
|
||||||
|
color: var(--rbrh-yellow-400);
|
||||||
|
}
|
||||||
|
.dark-yellow-500 {
|
||||||
|
color: var(--rbrh-yellow-500);
|
||||||
|
}
|
||||||
|
.dark-yellow-600 {
|
||||||
|
color: var(--rbrh-yellow-600);
|
||||||
|
}
|
||||||
|
.dark-yellow-700 {
|
||||||
|
color: var(--rbrh-yellow-700);
|
||||||
|
}
|
||||||
|
.dark-yellow-800 {
|
||||||
|
color: var(--rbrh-yellow-800);
|
||||||
|
}
|
||||||
|
.dark-yellow-900 {
|
||||||
|
color: var(--rbrh-yellow-900);
|
||||||
|
}
|
||||||
|
}
|
||||||
24
src/styles/src/utilities/display.css
Normal file
24
src/styles/src/utilities/display.css
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
.d-none {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.block {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.list-item {
|
||||||
|
display: list-item;
|
||||||
|
}
|
||||||
|
.table {
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
.inline-block {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
.inline-flex {
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
.grid {
|
||||||
|
display: grid;
|
||||||
|
}
|
||||||
84
src/styles/src/utilities/flexbox.css
Normal file
84
src/styles/src/utilities/flexbox.css
Normal file
|
|
@ -0,0 +1,84 @@
|
||||||
|
.flex-row {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
.flex-column {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.flex-wrap {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.flex-no-wrap {
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
}
|
||||||
|
.items-start {
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
.items-end {
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
.items-center {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.items-baseline {
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
.items-stretch {
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
.self-auto {
|
||||||
|
align-self: auto;
|
||||||
|
}
|
||||||
|
.self-start {
|
||||||
|
align-self: flex-start;
|
||||||
|
}
|
||||||
|
.self-end {
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
.self-center {
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
.self-stretch {
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
.content-center {
|
||||||
|
align-content: center;
|
||||||
|
}
|
||||||
|
.content-start {
|
||||||
|
align-content: flex-start;
|
||||||
|
}
|
||||||
|
.content-end {
|
||||||
|
align-content: flex-end;
|
||||||
|
}
|
||||||
|
.content-between {
|
||||||
|
align-content: space-between;
|
||||||
|
}
|
||||||
|
.content-around {
|
||||||
|
align-content: space-around;
|
||||||
|
}
|
||||||
|
.justify-items-start {
|
||||||
|
justify-items: flex-start;
|
||||||
|
}
|
||||||
|
.justify-items-end {
|
||||||
|
justify-items: end;
|
||||||
|
}
|
||||||
|
.justify-items-center {
|
||||||
|
justify-items: center;
|
||||||
|
}
|
||||||
|
.justify-items-stretch {
|
||||||
|
justify-items: stretch;
|
||||||
|
}
|
||||||
|
.justify-start {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
.justify-end {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
.justify-center {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.justify-between {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.justify-around {
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
182
src/styles/src/utilities/grid.css
Normal file
182
src/styles/src/utilities/grid.css
Normal file
|
|
@ -0,0 +1,182 @@
|
||||||
|
.grid-auto-flow-col {
|
||||||
|
grid-auto-flow: column;
|
||||||
|
}
|
||||||
|
.grid-auto-flow-row {
|
||||||
|
grid-auto-flow: row;
|
||||||
|
}
|
||||||
|
.grid-cols-none {
|
||||||
|
grid-template-columns: none;
|
||||||
|
}
|
||||||
|
.grid-cols-1 {
|
||||||
|
grid-template-columns: repeat(1, auto);
|
||||||
|
}
|
||||||
|
.grid-cols-2 {
|
||||||
|
grid-template-columns: repeat(2, auto);
|
||||||
|
}
|
||||||
|
.grid-cols-3 {
|
||||||
|
grid-template-columns: repeat(3, auto);
|
||||||
|
}
|
||||||
|
.grid-cols-4 {
|
||||||
|
grid-template-columns: repeat(4, auto);
|
||||||
|
}
|
||||||
|
.grid-cols-5 {
|
||||||
|
grid-template-columns: repeat(5, auto);
|
||||||
|
}
|
||||||
|
.grid-cols-6 {
|
||||||
|
grid-template-columns: repeat(6, auto);
|
||||||
|
}
|
||||||
|
.grid-cols-fr-1 {
|
||||||
|
grid-template-columns: repeat(1, 1fr);
|
||||||
|
}
|
||||||
|
.grid-cols-fr-2 {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
.grid-cols-fr-3 {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
.grid-cols-fr-4 {
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
}
|
||||||
|
.grid-cols-fr-5 {
|
||||||
|
grid-template-columns: repeat(5, 1fr);
|
||||||
|
}
|
||||||
|
.grid-cols-fr-6 {
|
||||||
|
grid-template-columns: repeat(6, 1fr);
|
||||||
|
}
|
||||||
|
.grid-rows-none {
|
||||||
|
grid-template-rows: none;
|
||||||
|
}
|
||||||
|
.grid-rows-1 {
|
||||||
|
grid-template-rows: repeat(1, auto);
|
||||||
|
}
|
||||||
|
.grid-rows-2 {
|
||||||
|
grid-template-rows: repeat(2, auto);
|
||||||
|
}
|
||||||
|
.grid-rows-3 {
|
||||||
|
grid-template-rows: repeat(3, auto);
|
||||||
|
}
|
||||||
|
.grid-rows-4 {
|
||||||
|
grid-template-rows: repeat(4, auto);
|
||||||
|
}
|
||||||
|
.grid-rows-5 {
|
||||||
|
grid-template-rows: repeat(5, auto);
|
||||||
|
}
|
||||||
|
.grid-rows-6 {
|
||||||
|
grid-template-rows: repeat(6, auto);
|
||||||
|
}
|
||||||
|
.col-span-1 {
|
||||||
|
grid-column: span 1 / span 1;
|
||||||
|
}
|
||||||
|
.col-span-2 {
|
||||||
|
grid-column: span 2 / span 2;
|
||||||
|
}
|
||||||
|
.col-span-3 {
|
||||||
|
grid-column: span 4 / span 4;
|
||||||
|
}
|
||||||
|
.col-span-4 {
|
||||||
|
grid-column: span 4 / span 4;
|
||||||
|
}
|
||||||
|
.col-span-5 {
|
||||||
|
grid-column: span 5 / span 5;
|
||||||
|
}
|
||||||
|
.col-span-6 {
|
||||||
|
grid-column: span 6 / span 6;
|
||||||
|
}
|
||||||
|
.row-span-1 {
|
||||||
|
grid-row: span 1 / span 1;
|
||||||
|
}
|
||||||
|
.row-span-2 {
|
||||||
|
grid-row: span 2 / span 2;
|
||||||
|
}
|
||||||
|
.row-span-3 {
|
||||||
|
grid-row: span 4 / span 4;
|
||||||
|
}
|
||||||
|
.row-span-4 {
|
||||||
|
grid-row: span 4 / span 4;
|
||||||
|
}
|
||||||
|
.row-span-5 {
|
||||||
|
grid-row: span 5 / span 5;
|
||||||
|
}
|
||||||
|
.row-span-6 {
|
||||||
|
grid-row: span 6 / span 6;
|
||||||
|
}
|
||||||
|
.gap-0 {
|
||||||
|
gap: 0;
|
||||||
|
grid-gap: 0;
|
||||||
|
}
|
||||||
|
.gap-1 {
|
||||||
|
gap: var(--rbrh-spacing-1);
|
||||||
|
grid-gap: var(--rbrh-spacing-1);
|
||||||
|
}
|
||||||
|
.gap-2 {
|
||||||
|
gap: var(--rbrh-spacing-2);
|
||||||
|
grid-gap: var(--rbrh-spacing-2);
|
||||||
|
}
|
||||||
|
.gap-3 {
|
||||||
|
gap: var(--rbrh-spacing-3);
|
||||||
|
grid-gap: var(--rbrh-spacing-3);
|
||||||
|
}
|
||||||
|
.gap-4 {
|
||||||
|
gap: var(--rbrh-spacing-4);
|
||||||
|
grid-gap: var(--rbrh-spacing-4);
|
||||||
|
}
|
||||||
|
.gap-5 {
|
||||||
|
gap: var(--rbrh-spacing-5);
|
||||||
|
grid-gap: var(--rbrh-spacing-5);
|
||||||
|
}
|
||||||
|
.gap-6 {
|
||||||
|
gap: var(--rbrh-spacing-6);
|
||||||
|
grid-gap: var(--rbrh-spacing-6);
|
||||||
|
}
|
||||||
|
.gap-7 {
|
||||||
|
gap: var(--rbrh-spacing-7);
|
||||||
|
grid-gap: var(--rbrh-spacing-7);
|
||||||
|
}
|
||||||
|
.gap-8 {
|
||||||
|
gap: var(--rbrh-spacing-8);
|
||||||
|
grid-gap: var(--rbrh-spacing-8);
|
||||||
|
}
|
||||||
|
.gap-9 {
|
||||||
|
gap: var(--rbrh-spacing-9);
|
||||||
|
grid-gap: var(--rbrh-spacing-9);
|
||||||
|
}
|
||||||
|
.gap-10 {
|
||||||
|
gap: var(--rbrh-spacing-10);
|
||||||
|
grid-gap: var(--rbrh-spacing-10);
|
||||||
|
}
|
||||||
|
.gap-x-1 {
|
||||||
|
column-gap: var(--rbrh-spacing-1);
|
||||||
|
}
|
||||||
|
.gap-x-2 {
|
||||||
|
column-gap: var(--rbrh-spacing-2);
|
||||||
|
}
|
||||||
|
.gap-x-3 {
|
||||||
|
column-gap: var(--rbrh-spacing-3);
|
||||||
|
}
|
||||||
|
.gap-x-4 {
|
||||||
|
column-gap: var(--rbrh-spacing-4);
|
||||||
|
}
|
||||||
|
.gap-x-5 {
|
||||||
|
column-gap: var(--rbrh-spacing-5);
|
||||||
|
}
|
||||||
|
.gap-x-6 {
|
||||||
|
column-gap: var(--rbrh-spacing-6);
|
||||||
|
}
|
||||||
|
.gap-y-1 {
|
||||||
|
row-gap: var(--rbrh-spacing-1);
|
||||||
|
}
|
||||||
|
.gap-y-2 {
|
||||||
|
row-gap: var(--rbrh-spacing-2);
|
||||||
|
}
|
||||||
|
.gap-y-3 {
|
||||||
|
row-gap: var(--rbrh-spacing-3);
|
||||||
|
}
|
||||||
|
.gap-y-4 {
|
||||||
|
row-gap: var(--rbrh-spacing-4);
|
||||||
|
}
|
||||||
|
.gap-y-5 {
|
||||||
|
row-gap: var(--rbrh-spacing-5);
|
||||||
|
}
|
||||||
|
.gap-y-6 {
|
||||||
|
row-gap: var(--rbrh-spacing-6);
|
||||||
|
}
|
||||||
108
src/styles/src/utilities/height.css
Normal file
108
src/styles/src/utilities/height.css
Normal file
|
|
@ -0,0 +1,108 @@
|
||||||
|
.h-0 {
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
.h-auto {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
.h-fit {
|
||||||
|
height: fit-content;
|
||||||
|
}
|
||||||
|
.h-max {
|
||||||
|
height: max-content;
|
||||||
|
}
|
||||||
|
.h-25 {
|
||||||
|
height: 25%;
|
||||||
|
}
|
||||||
|
.h-35 {
|
||||||
|
height: 35%;
|
||||||
|
}
|
||||||
|
.h-50 {
|
||||||
|
height: 50%;
|
||||||
|
}
|
||||||
|
.h-65 {
|
||||||
|
height: 65%;
|
||||||
|
}
|
||||||
|
.h-75 {
|
||||||
|
height: 75%;
|
||||||
|
}
|
||||||
|
.h-100 {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.h-1 {
|
||||||
|
height: var(--rbrh-spacing-1);
|
||||||
|
}
|
||||||
|
.h-2 {
|
||||||
|
height: var(--rbrh-spacing-2);
|
||||||
|
}
|
||||||
|
.h-3 {
|
||||||
|
height: var(--rbrh-spacing-3);
|
||||||
|
}
|
||||||
|
.h-4 {
|
||||||
|
height: var(--rbrh-spacing-4);
|
||||||
|
}
|
||||||
|
.h-5 {
|
||||||
|
height: var(--rbrh-spacing-5);
|
||||||
|
}
|
||||||
|
.h-6 {
|
||||||
|
height: var(--rbrh-spacing-6);
|
||||||
|
}
|
||||||
|
.h-7 {
|
||||||
|
height: var(--rbrh-spacing-7);
|
||||||
|
}
|
||||||
|
.h-8 {
|
||||||
|
height: var(--rbrh-spacing-8);
|
||||||
|
}
|
||||||
|
.h-9 {
|
||||||
|
height: var(--rbrh-spacing-9);
|
||||||
|
}
|
||||||
|
.h-10 {
|
||||||
|
height: var(--rbrh-spacing-10);
|
||||||
|
}
|
||||||
|
.h-12 {
|
||||||
|
height: var(--rbrh-spacing-12);
|
||||||
|
}
|
||||||
|
.h-14 {
|
||||||
|
height: var(--rbrh-spacing-14);
|
||||||
|
}
|
||||||
|
.h-16 {
|
||||||
|
height: var(--rbrh-spacing-16);
|
||||||
|
}
|
||||||
|
.h-18 {
|
||||||
|
height: var(--rbrh-spacing-18);
|
||||||
|
}
|
||||||
|
.h-20 {
|
||||||
|
height: var(--rbrh-spacing-20);
|
||||||
|
}
|
||||||
|
.h-24 {
|
||||||
|
height: var(--rbrh-spacing-24);
|
||||||
|
}
|
||||||
|
.max-h-fit {
|
||||||
|
max-height: fit-content;
|
||||||
|
}
|
||||||
|
.max-h-0 {
|
||||||
|
max-height: 0;
|
||||||
|
}
|
||||||
|
.max-h-max {
|
||||||
|
max-height: max-content;
|
||||||
|
}
|
||||||
|
.max-h-min {
|
||||||
|
max-height: min-content;
|
||||||
|
}
|
||||||
|
.max-h-100 {
|
||||||
|
max-height: 100%;
|
||||||
|
}
|
||||||
|
.min-h-fit {
|
||||||
|
min-height: fit-content;
|
||||||
|
}
|
||||||
|
.min-h-0 {
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
.min-h-max {
|
||||||
|
min-height: max-content;
|
||||||
|
}
|
||||||
|
.min-h-min {
|
||||||
|
min-height: min-content;
|
||||||
|
}
|
||||||
|
.min-h-100 {
|
||||||
|
min-height: 100%;
|
||||||
|
}
|
||||||
30
src/styles/src/utilities/light-mode/bg-blue.css
Normal file
30
src/styles/src/utilities/light-mode/bg-blue.css
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
.bg-blue-50 {
|
||||||
|
background-color: var(--rbrh-blue-50);
|
||||||
|
}
|
||||||
|
.bg-blue-100 {
|
||||||
|
background-color: var(--rbrh-blue-100);
|
||||||
|
}
|
||||||
|
.bg-blue-200 {
|
||||||
|
background-color: var(--rbrh-blue-200);
|
||||||
|
}
|
||||||
|
.bg-blue-300 {
|
||||||
|
background-color: var(--rbrh-blue-300);
|
||||||
|
}
|
||||||
|
.bg-blue-400 {
|
||||||
|
background-color: var(--rbrh-blue-400);
|
||||||
|
}
|
||||||
|
.bg-blue-500 {
|
||||||
|
background-color: var(--rbrh-blue-500);
|
||||||
|
}
|
||||||
|
.bg-blue-600 {
|
||||||
|
background-color: var(--rbrh-blue-600);
|
||||||
|
}
|
||||||
|
.bg-blue-700 {
|
||||||
|
background-color: var(--rbrh-blue-700);
|
||||||
|
}
|
||||||
|
.bg-blue-800 {
|
||||||
|
background-color: var(--rbrh-blue-800);
|
||||||
|
}
|
||||||
|
.bg-blue-900 {
|
||||||
|
background-color: var(--rbrh-blue-900);
|
||||||
|
}
|
||||||
30
src/styles/src/utilities/light-mode/bg-cyan.css
Normal file
30
src/styles/src/utilities/light-mode/bg-cyan.css
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
.bg-cyan-50 {
|
||||||
|
background-color: var(--rbrh-cyan-50);
|
||||||
|
}
|
||||||
|
.bg-cyan-100 {
|
||||||
|
background-color: var(--rbrh-cyan-100);
|
||||||
|
}
|
||||||
|
.bg-cyan-200 {
|
||||||
|
background-color: var(--rbrh-cyan-200);
|
||||||
|
}
|
||||||
|
.bg-cyan-300 {
|
||||||
|
background-color: var(--rbrh-cyan-300);
|
||||||
|
}
|
||||||
|
.bg-cyan-400 {
|
||||||
|
background-color: var(--rbrh-cyan-400);
|
||||||
|
}
|
||||||
|
.bg-cyan-500 {
|
||||||
|
background-color: var(--rbrh-cyan-500);
|
||||||
|
}
|
||||||
|
.bg-cyan-600 {
|
||||||
|
background-color: var(--rbrh-cyan-600);
|
||||||
|
}
|
||||||
|
.bg-cyan-700 {
|
||||||
|
background-color: var(--rbrh-cyan-700);
|
||||||
|
}
|
||||||
|
.bg-cyan-800 {
|
||||||
|
background-color: var(--rbrh-cyan-800);
|
||||||
|
}
|
||||||
|
.bg-cyan-900 {
|
||||||
|
background-color: var(--rbrh-cyan-900);
|
||||||
|
}
|
||||||
39
src/styles/src/utilities/light-mode/bg-gray.css
Normal file
39
src/styles/src/utilities/light-mode/bg-gray.css
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
.bg-transparent {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
.bg-white {
|
||||||
|
background-color: var(--rbrh-white);
|
||||||
|
}
|
||||||
|
.bg-black {
|
||||||
|
background-color: var(--rbrh-black);
|
||||||
|
}
|
||||||
|
.bg-gray-50 {
|
||||||
|
background-color: var(--rbrh-gray-50);
|
||||||
|
}
|
||||||
|
.bg-gray-100 {
|
||||||
|
background-color: var(--rbrh-gray-100);
|
||||||
|
}
|
||||||
|
.bg-gray-200 {
|
||||||
|
background-color: var(--rbrh-gray-200);
|
||||||
|
}
|
||||||
|
.bg-gray-300 {
|
||||||
|
background-color: var(--rbrh-gray-300);
|
||||||
|
}
|
||||||
|
.bg-gray-400 {
|
||||||
|
background-color: var(--rbrh-gray-400);
|
||||||
|
}
|
||||||
|
.bg-gray-500 {
|
||||||
|
background-color: var(--rbrh-gray-500);
|
||||||
|
}
|
||||||
|
.bg-gray-600 {
|
||||||
|
background-color: var(--rbrh-gray-600);
|
||||||
|
}
|
||||||
|
.bg-gray-700 {
|
||||||
|
background-color: var(--rbrh-gray-700);
|
||||||
|
}
|
||||||
|
.bg-gray-800 {
|
||||||
|
background-color: var(--rbrh-gray-800);
|
||||||
|
}
|
||||||
|
.bg-gray-900 {
|
||||||
|
background-color: var(--rbrh-gray-900);
|
||||||
|
}
|
||||||
30
src/styles/src/utilities/light-mode/bg-green.css
Normal file
30
src/styles/src/utilities/light-mode/bg-green.css
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
.bg-green-50 {
|
||||||
|
background-color: var(--rbrh-green-50);
|
||||||
|
}
|
||||||
|
.bg-green-100 {
|
||||||
|
background-color: var(--rbrh-green-100);
|
||||||
|
}
|
||||||
|
.bg-green-200 {
|
||||||
|
background-color: var(--rbrh-green-200);
|
||||||
|
}
|
||||||
|
.bg-green-300 {
|
||||||
|
background-color: var(--rbrh-green-300);
|
||||||
|
}
|
||||||
|
.bg-green-400 {
|
||||||
|
background-color: var(--rbrh-green-400);
|
||||||
|
}
|
||||||
|
.bg-green-500 {
|
||||||
|
background-color: var(--rbrh-green-500);
|
||||||
|
}
|
||||||
|
.bg-green-600 {
|
||||||
|
background-color: var(--rbrh-green-600);
|
||||||
|
}
|
||||||
|
.bg-green-700 {
|
||||||
|
background-color: var(--rbrh-green-700);
|
||||||
|
}
|
||||||
|
.bg-green-800 {
|
||||||
|
background-color: var(--rbrh-green-800);
|
||||||
|
}
|
||||||
|
.bg-green-900 {
|
||||||
|
background-color: var(--rbrh-green-900);
|
||||||
|
}
|
||||||
30
src/styles/src/utilities/light-mode/bg-indigo.css
Normal file
30
src/styles/src/utilities/light-mode/bg-indigo.css
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
.bg-indigo-50 {
|
||||||
|
background-color: var(--rbrh-indigo-50);
|
||||||
|
}
|
||||||
|
.bg-indigo-100 {
|
||||||
|
background-color: var(--rbrh-indigo-100);
|
||||||
|
}
|
||||||
|
.bg-indigo-200 {
|
||||||
|
background-color: var(--rbrh-indigo-200);
|
||||||
|
}
|
||||||
|
.bg-indigo-300 {
|
||||||
|
background-color: var(--rbrh-indigo-300);
|
||||||
|
}
|
||||||
|
.bg-indigo-400 {
|
||||||
|
background-color: var(--rbrh-indigo-400);
|
||||||
|
}
|
||||||
|
.bg-indigo-500 {
|
||||||
|
background-color: var(--rbrh-indigo-500);
|
||||||
|
}
|
||||||
|
.bg-indigo-600 {
|
||||||
|
background-color: var(--rbrh-indigo-600);
|
||||||
|
}
|
||||||
|
.bg-indigo-700 {
|
||||||
|
background-color: var(--rbrh-indigo-700);
|
||||||
|
}
|
||||||
|
.bg-indigo-800 {
|
||||||
|
background-color: var(--rbrh-indigo-800);
|
||||||
|
}
|
||||||
|
.bg-indigo-900 {
|
||||||
|
background-color: var(--rbrh-indigo-900);
|
||||||
|
}
|
||||||
30
src/styles/src/utilities/light-mode/bg-lime.css
Normal file
30
src/styles/src/utilities/light-mode/bg-lime.css
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
.bg-lime-50 {
|
||||||
|
background-color: var(--rbrh-lime-50);
|
||||||
|
}
|
||||||
|
.bg-lime-100 {
|
||||||
|
background-color: var(--rbrh-lime-100);
|
||||||
|
}
|
||||||
|
.bg-lime-200 {
|
||||||
|
background-color: var(--rbrh-lime-200);
|
||||||
|
}
|
||||||
|
.bg-lime-300 {
|
||||||
|
background-color: var(--rbrh-lime-300);
|
||||||
|
}
|
||||||
|
.bg-lime-400 {
|
||||||
|
background-color: var(--rbrh-lime-400);
|
||||||
|
}
|
||||||
|
.bg-lime-500 {
|
||||||
|
background-color: var(--rbrh-lime-500);
|
||||||
|
}
|
||||||
|
.bg-lime-600 {
|
||||||
|
background-color: var(--rbrh-lime-600);
|
||||||
|
}
|
||||||
|
.bg-lime-700 {
|
||||||
|
background-color: var(--rbrh-lime-700);
|
||||||
|
}
|
||||||
|
.bg-lime-800 {
|
||||||
|
background-color: var(--rbrh-lime-800);
|
||||||
|
}
|
||||||
|
.bg-lime-900 {
|
||||||
|
background-color: var(--rbrh-lime-900);
|
||||||
|
}
|
||||||
30
src/styles/src/utilities/light-mode/bg-magenta.css
Normal file
30
src/styles/src/utilities/light-mode/bg-magenta.css
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
.bg-magenta-50 {
|
||||||
|
background-color: var(--rbrh-magenta-50);
|
||||||
|
}
|
||||||
|
.bg-magenta-100 {
|
||||||
|
background-color: var(--rbrh-magenta-100);
|
||||||
|
}
|
||||||
|
.bg-magenta-200 {
|
||||||
|
background-color: var(--rbrh-magenta-200);
|
||||||
|
}
|
||||||
|
.bg-magenta-300 {
|
||||||
|
background-color: var(--rbrh-magenta-300);
|
||||||
|
}
|
||||||
|
.bg-magenta-400 {
|
||||||
|
background-color: var(--rbrh-magenta-400);
|
||||||
|
}
|
||||||
|
.bg-magenta-500 {
|
||||||
|
background-color: var(--rbrh-magenta-500);
|
||||||
|
}
|
||||||
|
.bg-magenta-600 {
|
||||||
|
background-color: var(--rbrh-magenta-600);
|
||||||
|
}
|
||||||
|
.bg-magenta-700 {
|
||||||
|
background-color: var(--rbrh-magenta-700);
|
||||||
|
}
|
||||||
|
.bg-magenta-800 {
|
||||||
|
background-color: var(--rbrh-magenta-800);
|
||||||
|
}
|
||||||
|
.bg-magenta-900 {
|
||||||
|
background-color: var(--rbrh-magenta-900);
|
||||||
|
}
|
||||||
30
src/styles/src/utilities/light-mode/bg-orange.css
Normal file
30
src/styles/src/utilities/light-mode/bg-orange.css
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
.bg-orange-50 {
|
||||||
|
background-color: var(--rbrh-orange-50);
|
||||||
|
}
|
||||||
|
.bg-orange-100 {
|
||||||
|
background-color: var(--rbrh-orange-100);
|
||||||
|
}
|
||||||
|
.bg-orange-200 {
|
||||||
|
background-color: var(--rbrh-orange-200);
|
||||||
|
}
|
||||||
|
.bg-orange-300 {
|
||||||
|
background-color: var(--rbrh-orange-300);
|
||||||
|
}
|
||||||
|
.bg-orange-400 {
|
||||||
|
background-color: var(--rbrh-orange-400);
|
||||||
|
}
|
||||||
|
.bg-orange-500 {
|
||||||
|
background-color: var(--rbrh-orange-500);
|
||||||
|
}
|
||||||
|
.bg-orange-600 {
|
||||||
|
background-color: var(--rbrh-orange-600);
|
||||||
|
}
|
||||||
|
.bg-orange-700 {
|
||||||
|
background-color: var(--rbrh-orange-700);
|
||||||
|
}
|
||||||
|
.bg-orange-800 {
|
||||||
|
background-color: var(--rbrh-orange-800);
|
||||||
|
}
|
||||||
|
.bg-orange-900 {
|
||||||
|
background-color: var(--rbrh-orange-900);
|
||||||
|
}
|
||||||
30
src/styles/src/utilities/light-mode/bg-purple.css
Normal file
30
src/styles/src/utilities/light-mode/bg-purple.css
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
.bg-purple-50 {
|
||||||
|
background-color: var(--rbrh-purple-50);
|
||||||
|
}
|
||||||
|
.bg-purple-100 {
|
||||||
|
background-color: var(--rbrh-purple-100);
|
||||||
|
}
|
||||||
|
.bg-purple-200 {
|
||||||
|
background-color: var(--rbrh-purple-200);
|
||||||
|
}
|
||||||
|
.bg-purple-300 {
|
||||||
|
background-color: var(--rbrh-purple-300);
|
||||||
|
}
|
||||||
|
.bg-purple-400 {
|
||||||
|
background-color: var(--rbrh-purple-400);
|
||||||
|
}
|
||||||
|
.bg-purple-500 {
|
||||||
|
background-color: var(--rbrh-purple-500);
|
||||||
|
}
|
||||||
|
.bg-purple-600 {
|
||||||
|
background-color: var(--rbrh-purple-600);
|
||||||
|
}
|
||||||
|
.bg-purple-700 {
|
||||||
|
background-color: var(--rbrh-purple-700);
|
||||||
|
}
|
||||||
|
.bg-purple-800 {
|
||||||
|
background-color: var(--rbrh-purple-800);
|
||||||
|
}
|
||||||
|
.bg-purple-900 {
|
||||||
|
background-color: var(--rbrh-purple-900);
|
||||||
|
}
|
||||||
30
src/styles/src/utilities/light-mode/bg-red.css
Normal file
30
src/styles/src/utilities/light-mode/bg-red.css
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
.bg-red-50 {
|
||||||
|
background-color: var(--rbrh-red-50);
|
||||||
|
}
|
||||||
|
.bg-red-100 {
|
||||||
|
background-color: var(--rbrh-red-100);
|
||||||
|
}
|
||||||
|
.bg-red-200 {
|
||||||
|
background-color: var(--rbrh-red-200);
|
||||||
|
}
|
||||||
|
.bg-red-300 {
|
||||||
|
background-color: var(--rbrh-red-300);
|
||||||
|
}
|
||||||
|
.bg-red-400 {
|
||||||
|
background-color: var(--rbrh-red-400);
|
||||||
|
}
|
||||||
|
.bg-red-500 {
|
||||||
|
background-color: var(--rbrh-red-500);
|
||||||
|
}
|
||||||
|
.bg-red-600 {
|
||||||
|
background-color: var(--rbrh-red-600);
|
||||||
|
}
|
||||||
|
.bg-red-700 {
|
||||||
|
background-color: var(--rbrh-red-700);
|
||||||
|
}
|
||||||
|
.bg-red-800 {
|
||||||
|
background-color: var(--rbrh-red-800);
|
||||||
|
}
|
||||||
|
.bg-red-900 {
|
||||||
|
background-color: var(--rbrh-red-900);
|
||||||
|
}
|
||||||
30
src/styles/src/utilities/light-mode/bg-sky.css
Normal file
30
src/styles/src/utilities/light-mode/bg-sky.css
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
.bg-sky-50 {
|
||||||
|
background-color: var(--rbrh-sky-50);
|
||||||
|
}
|
||||||
|
.bg-sky-100 {
|
||||||
|
background-color: var(--rbrh-sky-100);
|
||||||
|
}
|
||||||
|
.bg-sky-200 {
|
||||||
|
background-color: var(--rbrh-sky-200);
|
||||||
|
}
|
||||||
|
.bg-sky-300 {
|
||||||
|
background-color: var(--rbrh-sky-300);
|
||||||
|
}
|
||||||
|
.bg-sky-400 {
|
||||||
|
background-color: var(--rbrh-sky-400);
|
||||||
|
}
|
||||||
|
.bg-sky-500 {
|
||||||
|
background-color: var(--rbrh-sky-500);
|
||||||
|
}
|
||||||
|
.bg-sky-600 {
|
||||||
|
background-color: var(--rbrh-sky-600);
|
||||||
|
}
|
||||||
|
.bg-sky-700 {
|
||||||
|
background-color: var(--rbrh-sky-700);
|
||||||
|
}
|
||||||
|
.bg-sky-800 {
|
||||||
|
background-color: var(--rbrh-sky-800);
|
||||||
|
}
|
||||||
|
.bg-sky-900 {
|
||||||
|
background-color: var(--rbrh-sky-900);
|
||||||
|
}
|
||||||
30
src/styles/src/utilities/light-mode/bg-teal.css
Normal file
30
src/styles/src/utilities/light-mode/bg-teal.css
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
.bg-teal-50 {
|
||||||
|
background-color: var(--rbrh-teal-50);
|
||||||
|
}
|
||||||
|
.bg-teal-100 {
|
||||||
|
background-color: var(--rbrh-teal-100);
|
||||||
|
}
|
||||||
|
.bg-teal-200 {
|
||||||
|
background-color: var(--rbrh-teal-200);
|
||||||
|
}
|
||||||
|
.bg-teal-300 {
|
||||||
|
background-color: var(--rbrh-teal-300);
|
||||||
|
}
|
||||||
|
.bg-teal-400 {
|
||||||
|
background-color: var(--rbrh-teal-400);
|
||||||
|
}
|
||||||
|
.bg-teal-500 {
|
||||||
|
background-color: var(--rbrh-teal-500);
|
||||||
|
}
|
||||||
|
.bg-teal-600 {
|
||||||
|
background-color: var(--rbrh-teal-600);
|
||||||
|
}
|
||||||
|
.bg-teal-700 {
|
||||||
|
background-color: var(--rbrh-teal-700);
|
||||||
|
}
|
||||||
|
.bg-teal-800 {
|
||||||
|
background-color: var(--rbrh-teal-800);
|
||||||
|
}
|
||||||
|
.bg-teal-900 {
|
||||||
|
background-color: var(--rbrh-teal-900);
|
||||||
|
}
|
||||||
30
src/styles/src/utilities/light-mode/bg-violet.css
Normal file
30
src/styles/src/utilities/light-mode/bg-violet.css
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
.bg-violet-50 {
|
||||||
|
background-color: var(--rbrh-violet-50);
|
||||||
|
}
|
||||||
|
.bg-violet-100 {
|
||||||
|
background-color: var(--rbrh-violet-100);
|
||||||
|
}
|
||||||
|
.bg-violet-200 {
|
||||||
|
background-color: var(--rbrh-violet-200);
|
||||||
|
}
|
||||||
|
.bg-violet-300 {
|
||||||
|
background-color: var(--rbrh-violet-300);
|
||||||
|
}
|
||||||
|
.bg-violet-400 {
|
||||||
|
background-color: var(--rbrh-violet-400);
|
||||||
|
}
|
||||||
|
.bg-violet-500 {
|
||||||
|
background-color: var(--rbrh-violet-500);
|
||||||
|
}
|
||||||
|
.bg-violet-600 {
|
||||||
|
background-color: var(--rbrh-violet-600);
|
||||||
|
}
|
||||||
|
.bg-violet-700 {
|
||||||
|
background-color: var(--rbrh-violet-700);
|
||||||
|
}
|
||||||
|
.bg-violet-800 {
|
||||||
|
background-color: var(--rbrh-violet-800);
|
||||||
|
}
|
||||||
|
.bg-violet-900 {
|
||||||
|
background-color: var(--rbrh-violet-900);
|
||||||
|
}
|
||||||
30
src/styles/src/utilities/light-mode/bg-yellow.css
Normal file
30
src/styles/src/utilities/light-mode/bg-yellow.css
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
.bg-yellow-50 {
|
||||||
|
background-color: var(--rbrh-yellow-50);
|
||||||
|
}
|
||||||
|
.bg-yellow-100 {
|
||||||
|
background-color: var(--rbrh-yellow-100);
|
||||||
|
}
|
||||||
|
.bg-yellow-200 {
|
||||||
|
background-color: var(--rbrh-yellow-200);
|
||||||
|
}
|
||||||
|
.bg-yellow-300 {
|
||||||
|
background-color: var(--rbrh-yellow-300);
|
||||||
|
}
|
||||||
|
.bg-yellow-400 {
|
||||||
|
background-color: var(--rbrh-yellow-400);
|
||||||
|
}
|
||||||
|
.bg-yellow-500 {
|
||||||
|
background-color: var(--rbrh-yellow-500);
|
||||||
|
}
|
||||||
|
.bg-yellow-600 {
|
||||||
|
background-color: var(--rbrh-yellow-600);
|
||||||
|
}
|
||||||
|
.bg-yellow-700 {
|
||||||
|
background-color: var(--rbrh-yellow-700);
|
||||||
|
}
|
||||||
|
.bg-yellow-800 {
|
||||||
|
background-color: var(--rbrh-yellow-800);
|
||||||
|
}
|
||||||
|
.bg-yellow-900 {
|
||||||
|
background-color: var(--rbrh-yellow-900);
|
||||||
|
}
|
||||||
30
src/styles/src/utilities/light-mode/blue.css
Normal file
30
src/styles/src/utilities/light-mode/blue.css
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
.blue-50 {
|
||||||
|
color: var(--rbrh-blue-50);
|
||||||
|
}
|
||||||
|
.blue-100 {
|
||||||
|
color: var(--rbrh-blue-100);
|
||||||
|
}
|
||||||
|
.blue-200 {
|
||||||
|
color: var(--rbrh-blue-200);
|
||||||
|
}
|
||||||
|
.blue-300 {
|
||||||
|
color: var(--rbrh-blue-300);
|
||||||
|
}
|
||||||
|
.blue-400 {
|
||||||
|
color: var(--rbrh-blue-400);
|
||||||
|
}
|
||||||
|
.blue-500 {
|
||||||
|
color: var(--rbrh-blue-500);
|
||||||
|
}
|
||||||
|
.blue-600 {
|
||||||
|
color: var(--rbrh-blue-600);
|
||||||
|
}
|
||||||
|
.blue-700 {
|
||||||
|
color: var(--rbrh-blue-700);
|
||||||
|
}
|
||||||
|
.blue-800 {
|
||||||
|
color: var(--rbrh-blue-800);
|
||||||
|
}
|
||||||
|
.blue-900 {
|
||||||
|
color: var(--rbrh-blue-900);
|
||||||
|
}
|
||||||
30
src/styles/src/utilities/light-mode/border-blue.css
Normal file
30
src/styles/src/utilities/light-mode/border-blue.css
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
.border-blue-50 {
|
||||||
|
border: 1px solid var(--rbrh-blue-50);
|
||||||
|
}
|
||||||
|
.border-blue-100 {
|
||||||
|
border: 1px solid var(--rbrh-blue-100);
|
||||||
|
}
|
||||||
|
.border-blue-200 {
|
||||||
|
border: 1px solid var(--rbrh-blue-200);
|
||||||
|
}
|
||||||
|
.border-blue-300 {
|
||||||
|
border: 1px solid var(--rbrh-blue-300);
|
||||||
|
}
|
||||||
|
.border-blue-400 {
|
||||||
|
border: 1px solid var(--rbrh-blue-400);
|
||||||
|
}
|
||||||
|
.border-blue-500 {
|
||||||
|
border: 1px solid var(--rbrh-blue-500);
|
||||||
|
}
|
||||||
|
.border-blue-600 {
|
||||||
|
border: 1px solid var(--rbrh-blue-600);
|
||||||
|
}
|
||||||
|
.border-blue-700 {
|
||||||
|
border: 1px solid var(--rbrh-blue-700);
|
||||||
|
}
|
||||||
|
.border-blue-800 {
|
||||||
|
border: 1px solid var(--rbrh-blue-800);
|
||||||
|
}
|
||||||
|
.border-blue-900 {
|
||||||
|
border: 1px solid var(--rbrh-blue-900);
|
||||||
|
}
|
||||||
30
src/styles/src/utilities/light-mode/border-cyan.css
Normal file
30
src/styles/src/utilities/light-mode/border-cyan.css
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
.border-cyan-50 {
|
||||||
|
border: 1px solid var(--rbrh-cyan-50);
|
||||||
|
}
|
||||||
|
.border-cyan-100 {
|
||||||
|
border: 1px solid var(--rbrh-cyan-100);
|
||||||
|
}
|
||||||
|
.border-cyan-200 {
|
||||||
|
border: 1px solid var(--rbrh-cyan-200);
|
||||||
|
}
|
||||||
|
.border-cyan-300 {
|
||||||
|
border: 1px solid var(--rbrh-cyan-300);
|
||||||
|
}
|
||||||
|
.border-cyan-400 {
|
||||||
|
border: 1px solid var(--rbrh-cyan-400);
|
||||||
|
}
|
||||||
|
.border-cyan-500 {
|
||||||
|
border: 1px solid var(--rbrh-cyan-500);
|
||||||
|
}
|
||||||
|
.border-cyan-600 {
|
||||||
|
border: 1px solid var(--rbrh-cyan-600);
|
||||||
|
}
|
||||||
|
.border-cyan-700 {
|
||||||
|
border: 1px solid var(--rbrh-cyan-700);
|
||||||
|
}
|
||||||
|
.border-cyan-800 {
|
||||||
|
border: 1px solid var(--rbrh-cyan-800);
|
||||||
|
}
|
||||||
|
.border-cyan-900 {
|
||||||
|
border: 1px solid var(--rbrh-cyan-900);
|
||||||
|
}
|
||||||
39
src/styles/src/utilities/light-mode/border-gray.css
Normal file
39
src/styles/src/utilities/light-mode/border-gray.css
Normal file
|
|
@ -0,0 +1,39 @@
|
||||||
|
.border-none {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.border-white {
|
||||||
|
border: 1px solid var(--rbrh-white);
|
||||||
|
}
|
||||||
|
.border-black {
|
||||||
|
border: 1px solid var(--rbrh-black);
|
||||||
|
}
|
||||||
|
.border-gray-50 {
|
||||||
|
border: 1px solid var(--rbrh-gray-50);
|
||||||
|
}
|
||||||
|
.border-gray-100 {
|
||||||
|
border: 1px solid var(--rbrh-gray-100);
|
||||||
|
}
|
||||||
|
.border-gray-200 {
|
||||||
|
border: 1px solid var(--rbrh-gray-200);
|
||||||
|
}
|
||||||
|
.border-gray-300 {
|
||||||
|
border: 1px solid var(--rbrh-gray-300);
|
||||||
|
}
|
||||||
|
.border-gray-400 {
|
||||||
|
border: 1px solid var(--rbrh-gray-400);
|
||||||
|
}
|
||||||
|
.border-gray-500 {
|
||||||
|
border: 1px solid var(--rbrh-gray-500);
|
||||||
|
}
|
||||||
|
.border-gray-600 {
|
||||||
|
border: 1px solid var(--rbrh-gray-600);
|
||||||
|
}
|
||||||
|
.border-gray-700 {
|
||||||
|
border: 1px solid var(--rbrh-gray-700);
|
||||||
|
}
|
||||||
|
.border-gray-800 {
|
||||||
|
border: 1px solid var(--rbrh-gray-800);
|
||||||
|
}
|
||||||
|
.border-gray-900 {
|
||||||
|
border: 1px solid var(--rbrh-gray-900);
|
||||||
|
}
|
||||||
30
src/styles/src/utilities/light-mode/border-green.css
Normal file
30
src/styles/src/utilities/light-mode/border-green.css
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
.border-green-50 {
|
||||||
|
border: 1px solid var(--rbrh-green-50);
|
||||||
|
}
|
||||||
|
.border-green-100 {
|
||||||
|
border: 1px solid var(--rbrh-green-100);
|
||||||
|
}
|
||||||
|
.border-green-200 {
|
||||||
|
border: 1px solid var(--rbrh-green-200);
|
||||||
|
}
|
||||||
|
.border-green-300 {
|
||||||
|
border: 1px solid var(--rbrh-green-300);
|
||||||
|
}
|
||||||
|
.border-green-400 {
|
||||||
|
border: 1px solid var(--rbrh-green-400);
|
||||||
|
}
|
||||||
|
.border-green-500 {
|
||||||
|
border: 1px solid var(--rbrh-green-500);
|
||||||
|
}
|
||||||
|
.border-green-600 {
|
||||||
|
border: 1px solid var(--rbrh-green-600);
|
||||||
|
}
|
||||||
|
.border-green-700 {
|
||||||
|
border: 1px solid var(--rbrh-green-700);
|
||||||
|
}
|
||||||
|
.border-green-800 {
|
||||||
|
border: 1px solid var(--rbrh-green-800);
|
||||||
|
}
|
||||||
|
.border-green-900 {
|
||||||
|
border: 1px solid var(--rbrh-green-900);
|
||||||
|
}
|
||||||
30
src/styles/src/utilities/light-mode/border-indigo.css
Normal file
30
src/styles/src/utilities/light-mode/border-indigo.css
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
.border-indigo-50 {
|
||||||
|
border: 1px solid var(--rbrh-indigo-50);
|
||||||
|
}
|
||||||
|
.border-indigo-100 {
|
||||||
|
border: 1px solid var(--rbrh-indigo-100);
|
||||||
|
}
|
||||||
|
.border-indigo-200 {
|
||||||
|
border: 1px solid var(--rbrh-indigo-200);
|
||||||
|
}
|
||||||
|
.border-indigo-300 {
|
||||||
|
border: 1px solid var(--rbrh-indigo-300);
|
||||||
|
}
|
||||||
|
.border-indigo-400 {
|
||||||
|
border: 1px solid var(--rbrh-indigo-400);
|
||||||
|
}
|
||||||
|
.border-indigo-500 {
|
||||||
|
border: 1px solid var(--rbrh-indigo-500);
|
||||||
|
}
|
||||||
|
.border-indigo-600 {
|
||||||
|
border: 1px solid var(--rbrh-indigo-600);
|
||||||
|
}
|
||||||
|
.border-indigo-700 {
|
||||||
|
border: 1px solid var(--rbrh-indigo-700);
|
||||||
|
}
|
||||||
|
.border-indigo-800 {
|
||||||
|
border: 1px solid var(--rbrh-indigo-800);
|
||||||
|
}
|
||||||
|
.border-indigo-900 {
|
||||||
|
border: 1px solid var(--rbrh-indigo-900);
|
||||||
|
}
|
||||||
30
src/styles/src/utilities/light-mode/border-lime.css
Normal file
30
src/styles/src/utilities/light-mode/border-lime.css
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
.border-lime-50 {
|
||||||
|
border: 1px solid var(--rbrh-lime-50);
|
||||||
|
}
|
||||||
|
.border-lime-100 {
|
||||||
|
border: 1px solid var(--rbrh-lime-100);
|
||||||
|
}
|
||||||
|
.border-lime-200 {
|
||||||
|
border: 1px solid var(--rbrh-lime-200);
|
||||||
|
}
|
||||||
|
.border-lime-300 {
|
||||||
|
border: 1px solid var(--rbrh-lime-300);
|
||||||
|
}
|
||||||
|
.border-lime-400 {
|
||||||
|
border: 1px solid var(--rbrh-lime-400);
|
||||||
|
}
|
||||||
|
.border-lime-500 {
|
||||||
|
border: 1px solid var(--rbrh-lime-500);
|
||||||
|
}
|
||||||
|
.border-lime-600 {
|
||||||
|
border: 1px solid var(--rbrh-lime-600);
|
||||||
|
}
|
||||||
|
.border-lime-700 {
|
||||||
|
border: 1px solid var(--rbrh-lime-700);
|
||||||
|
}
|
||||||
|
.border-lime-800 {
|
||||||
|
border: 1px solid var(--rbrh-lime-800);
|
||||||
|
}
|
||||||
|
.border-lime-900 {
|
||||||
|
border: 1px solid var(--rbrh-lime-900);
|
||||||
|
}
|
||||||
30
src/styles/src/utilities/light-mode/border-magenta.css
Normal file
30
src/styles/src/utilities/light-mode/border-magenta.css
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
.border-magenta-50 {
|
||||||
|
border: 1px solid var(--rbrh-magenta-50);
|
||||||
|
}
|
||||||
|
.border-magenta-100 {
|
||||||
|
border: 1px solid var(--rbrh-magenta-100);
|
||||||
|
}
|
||||||
|
.border-magenta-200 {
|
||||||
|
border: 1px solid var(--rbrh-magenta-200);
|
||||||
|
}
|
||||||
|
.border-magenta-300 {
|
||||||
|
border: 1px solid var(--rbrh-magenta-300);
|
||||||
|
}
|
||||||
|
.border-magenta-400 {
|
||||||
|
border: 1px solid var(--rbrh-magenta-400);
|
||||||
|
}
|
||||||
|
.border-magenta-500 {
|
||||||
|
border: 1px solid var(--rbrh-magenta-500);
|
||||||
|
}
|
||||||
|
.border-magenta-600 {
|
||||||
|
border: 1px solid var(--rbrh-magenta-600);
|
||||||
|
}
|
||||||
|
.border-magenta-700 {
|
||||||
|
border: 1px solid var(--rbrh-magenta-700);
|
||||||
|
}
|
||||||
|
.border-magenta-800 {
|
||||||
|
border: 1px solid var(--rbrh-magenta-800);
|
||||||
|
}
|
||||||
|
.border-magenta-900 {
|
||||||
|
border: 1px solid var(--rbrh-magenta-900);
|
||||||
|
}
|
||||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Reference in a new issue