mirror of
https://github.com/ariqnrnns/zauberhaft-astro.git
synced 2025-04-20 03:21: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