diff --git a/public/favicon/favicon-16x16.png b/public/favicon/favicon-16x16.png
new file mode 100644
index 0000000..e86530b
Binary files /dev/null and b/public/favicon/favicon-16x16.png differ
diff --git a/public/favicon/favicon-180x180.png b/public/favicon/favicon-180x180.png
new file mode 100644
index 0000000..522e124
Binary files /dev/null and b/public/favicon/favicon-180x180.png differ
diff --git a/public/favicon/favicon-192x192.png b/public/favicon/favicon-192x192.png
new file mode 100644
index 0000000..9a69ebe
Binary files /dev/null and b/public/favicon/favicon-192x192.png differ
diff --git a/public/favicon/favicon-32x32.png b/public/favicon/favicon-32x32.png
new file mode 100644
index 0000000..5fbddcb
Binary files /dev/null and b/public/favicon/favicon-32x32.png differ
diff --git a/public/logo-40x40.png b/public/logo-40x40.png
new file mode 100644
index 0000000..43512be
Binary files /dev/null and b/public/logo-40x40.png differ
diff --git a/public/robots.txt b/public/robots.txt
new file mode 100644
index 0000000..9dd81c6
--- /dev/null
+++ b/public/robots.txt
@@ -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: /
\ No newline at end of file
diff --git a/public/toggledarktheme.js b/public/toggledarktheme.js
new file mode 100644
index 0000000..9499642
--- /dev/null
+++ b/public/toggledarktheme.js
@@ -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);
\ No newline at end of file
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
new file mode 100644
index 0000000..dd9b4c7
--- /dev/null
+++ b/src/components/Footer.astro
@@ -0,0 +1,207 @@
+
diff --git a/src/components/Header.astro b/src/components/Header.astro
new file mode 100644
index 0000000..00e11e5
--- /dev/null
+++ b/src/components/Header.astro
@@ -0,0 +1,98 @@
+
+
+
+
+
+
+
+
+
+ Mobile hamburger menu icon
+
+
+ Menu
+
+
+
+
+
\ No newline at end of file
diff --git a/src/data/siteMetadata.js b/src/data/siteMetadata.js
new file mode 100644
index 0000000..b8ac453
--- /dev/null
+++ b/src/data/siteMetadata.js
@@ -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"
+};
\ No newline at end of file
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
new file mode 100644
index 0000000..abcb23b
--- /dev/null
+++ b/src/layouts/Layout.astro
@@ -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;
+---
+
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/pages/index.astro b/src/pages/index.astro
new file mode 100644
index 0000000..d73d7ed
--- /dev/null
+++ b/src/pages/index.astro
@@ -0,0 +1,1244 @@
+---
+import Layout from "../layouts/Layout.astro";
+---
+
+
+
+
+
+
+
+
+
+ Accessible & modern website templates 🚀
+
+
+ The best design studio for small business
+
+
+
+ Zauberhaft is a FREE one page agency website template with
+ built-in dark mode to supercharge your project. Zauberhaft is
+ available in: HTML, Next.js, Gatsby & Astro
+
+
+
+
+ Download Astro template
+
+ Download template icon
+
+
+
+
+
+
+
+
SOME OF OUR AMAZING CLIENTS
+
+
+ Client placeholder logo from Logoipsum
+
+
+
+
+ Client placeholder logo from Logoipsum
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Client placeholder logo from Logoipsum
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Client placeholder logo from Logoipsum
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Client placeholder logo from Logoipsum
+
+
+
+
+
+
+
+
+
+
+
+
+ Client placeholder logo from Logoipsum
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Focus on the business & the users
+
+
+
+
+
+ Agency case study blog item icon
+
+
+
+ Start from user research to bring the best product experience
+
+
+
+
+
+
+
+ Continuously work together with clients to deliver satisfying
+ results
+
+
+
+
+ Agency case study blog item icon
+
+
+
+ Group of skilled designers & developers without bureaucratic
+ hurdles
+
+
+
+
+ Download Astro template
+
+ Download template
+
+
+
+
+
+
+
+
+
+
+
+
+
Things Zauberhaft can help you
+
+
+
+
+
+ Brand design identity services icon
+
+
+
+
+
+
Brand design
+
+ Duis at consectetur lorem donec. Ante in nibh mauris cursus
+ mattis
+
+
+
+
+
+
+ Web design services icon
+
+
+
+
+
+
+
+
+
Web design (Webflow, NextJS)
+
+ In nisl nisi scelerisque eu ultrices vitae auctor eu. Amet
+ mattis vulputate enim nulla
+
+
+
+
+
+
+ Mobile app design services icon
+
+
+
+
+
+
+
+
+
+
+
+
+
Mobile app (Native or PWA)
+
+ In metus vulputate eu scelerisque. Tellus modeo nunc non blandit
+
+
+
+
+
+
+
+
+
+
+
+ Clients who successfully launched & revamped their online business
+
+
+
+
+
+
+
+ Companyxyz got a 40% raise in activation rate across all traffic
+ sources
+
+
+
+
+
+
+
+
+ Companyabc have increased their MRR by 17% after redesign
+
+
+
+
+
+
+
+
+
+ Helped Companyfgh integrating the new brand across channels
+
+
+
+
+
+
+
+ Companyxyz have increased purchase rate from returning visitors
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Zauberhaft has streamlined & helped over 15+ high-growth small
+ business companies.
+
+
+
+ We want to continue helping small business owners deliver delightful
+ user experience
+
+
+ Hence, we promise to offer reasonable & transparent pricing without
+ hidden transaction fees
+
+
+
+
+
+
+
+ Starter plan
+
+
+ Mauris cursus mattis Fermentum a iaculis at. Fermentum et
+ sollicitudin
+
+
+
+
+
+ Included benefits & services
+
+
Aliquet risus feugiat in
+
+
+
+
+ Included benefits & services
+
+
Consequat mauris
+
+
+
+
+ Included benefits & services
+
+
Consectetur adipiscing
+
+
+
+ Get started now
+
+
+
+
+ Professional plan
+
+
+ Mauris cursus mattis Fermentum a iaculis at. Fermentum et
+ sollicitudin
+
+
+
+
+
+ Included benefits & services
+
+
Pellentesque id nibh tortor
+
+
+
+
+ Included benefits & services
+
+
Nibh praesent tristique
+
+
+
+
+ Included benefits & services
+
+
Vitae elementum curabitur
+
+
+
+ Let's work together
+
+
+
+
+ Starter plan
+
+
+ Congue nisi vitae suscipit tellus mauris a diam maecenas
+
+
+
+
+
+ Included benefits & services
+
+
Dolor sit amet consectetur
+
+
+
+
+ Included benefits & services
+
+
Porta nibh venenatis cras
+
+
+
+
+ Included benefits & services
+
+
Nulla facilisi etiam
+
+
+
+ Get started now
+
+
+
+
+
+
+
+
+
+ Find out how we help small business expand & grow their services
+
+
+
+
+
+ 1
+
+
+
User research
+
+ Quam id leo in vitae. Sed faucibus turpis in eu
+
+
+
+
+
+ 2
+
+
+
Market research
+
+ Tincidunt dui ut ornare lectus sit. Orci eu lobortis
+
+
+
+
+
+ 2
+
+
+
Analysis & ideation
+
+ Quam id leo in vitae. Sed faucibus turpis in eu
+
+
+
+
+
+ 4
+
+
+
Usability testing
+
+ Tellus morasdie nunc non blandit massa enim nec
+
+
+
+
+
+ 5
+
+
+
UI Design
+
+ Aliquam purus sit amet luctus venenatis lectus
+
+
+
+
+
+ 6
+
+
+
Built the website
+
+ Donec pretium vulputate sapien nec sagittis
+
+
+
+
+
+ 7
+
+
+
QA testing
+
+ Nulla aliquet porttitor lacus luctus accumsan tortor
+
+
+
+
+
+ 8
+
+
+
Delivery
+
Risus nullam eget felis eget nunc lobortis
+
+
+
+
+
+
+
+
+
+ Made with Ravenbright CSS
+
+
+
diff --git a/src/styles/css-variable.css b/src/styles/css-variable.css
new file mode 100644
index 0000000..be6c830
--- /dev/null
+++ b/src/styles/css-variable.css
@@ -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);
+}
\ No newline at end of file
diff --git a/src/styles/dist/ravenbright.min.css b/src/styles/dist/ravenbright.min.css
new file mode 100644
index 0000000..b102a2a
--- /dev/null
+++ b/src/styles/dist/ravenbright.min.css
@@ -0,0 +1,2 @@
+@import url("https://api.fontshare.com/v2/css?f[]=satoshi@700,500,600,400&display=swap");
+/*! Ravenbright CSS [1.0.1] [https://ravenbrightcss.com] [Apache License 2.0] [https://github.com/ravenbrightdesign/ravenbrightcss/blob/main/LICENSE.md] */html{-moz-tab-size:4;-o-tab-size:4;-webkit-text-size-adjust:100%;box-sizing:border-box;line-height:1.25;scroll-behavior:smooth;tab-size:4;width:100%;word-break:normal}*,:after,:before{background-repeat:no-repeat;box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,sans-serif,Segoe UI,Arial;margin:0;padding:0;text-rendering:optimizeLegibility}.visually-hidden{-webkit-clip-path:inset(50%);background-color:var(--rbrh-black);clip-path:inset(50%);color:var(--rbrh-white);height:0;overflow:hidden;position:absolute;white-space:nowrap;width:0}main{display:block}a:focus,a:focus-visible{box-shadow:var(--rbrh-shadow-focus)}[role=button],[type=button],button,input{cursor:pointer;font:inherit;width:-moz-fit-content;width:fit-content}.btn,[role=button],[type=button],button{border:none;height:-moz-fit-content;height:fit-content;outline:none;text-align:center;text-shadow:none;text-transform:none}.spread-link{bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%;z-index:1}.spread-link:focus-visible{border:none;outline:0;padding:0}fieldset label{text-align:left}fieldset{border:none}img{height:auto;width:100%}svg{flex-shrink:0}li,ul{list-style:none;margin:0;padding:0}caption,td{overflow-wrap:break-word;text-align:left}td{margin:0;padding:0}a,h1,h2,h3,h5,h6,p{margin:0;padding:0;text-decoration:none}small{font-size:75%}span{display:inline}[data-theme=light],html{--rbrh-white:#fff;--rbrh-black:#090f17;--rbrh-gray-50:#f7f7f7;--rbrh-gray-100:#ebeef3;--rbrh-gray-200:#dfe4eb;--rbrh-gray-300:#afbbce;--rbrh-gray-600:#385580;--rbrh-gray-700:#1d2c42;--rbrh-gray-800:#172335;--rbrh-gray-900:#0f1723;--rbrh-yellow-100:#fff1c1;--rbrh-yellow-200:#ffe899;--rbrh-yellow-400:#ffd74b;--rbrh-yellow-700:#aa8500;--rbrh-blue-50:#e9eefe;--rbrh-blue-100:#d6dffe;--rbrh-blue-200:#c3d0fd;--rbrh-blue-300:#9db2fc;--rbrh-blue-400:#2c58f8;--rbrh-blue-500:#083bf4;--rbrh-blue-600:#0732ce;--rbrh-blue-700:#052495;--rbrh-blue-800:#041b6f;--rbrh-blue-900:#090f22;--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-20:5rem;--rbrh-spacing-24:6rem;--rbrh-screen-lg:67.5rem;--rbrh-screen-xl:81.25rem;--rbrh-font-family-sans:"Satoshi","Helvetica",system-ui,sans-serif,"Segoe UI","Arial","Verdana";--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-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-xl:1.75rem;--rbrh-line-h-lg:1.5rem;--rbrh-line-h-md:1.5rem;--rbrh-line-h-sm:1.25rem;--rbrh-line-h-xxs:1rem;--rbrh-letter-spacing-lg:0.0125rem;--rbrh-letter-spacing-md:-0.025rem;--rbrh-radius-circle:100rem;--rbrh-radius-lg:1rem;--rbrh-radius-md:0.75rem;--rbrh-radius-sm:0.5rem;--rbrh-shadow-lg:rgba(0,0,0,.2) 0px 4px 48px -4px,rgba(0,0,0,.25) 0px 4px 28px -4px;--rbrh-shadow-md:0 5px 40px -5px rgba(0,0,0,.1);--rbrh-shadow-sm:0px 4px 10px -8px rgba(0,0,0,.1),0px 4px 10px -2px rgba(0,0,0,.1);--rbrh-background-50:var(--rbrh-gray-50);--rbrh-background:var(--rbrh-white);--rbrh-border-200:var(--rbrh-gray-200);--rbrh-text-900:var(--rbrh-gray-900);--rbrh-text-800:var(--rbrh-gray-800);--rbrh-text-link-hover:inherit;--rbrh-shadow-focus:0 0 0 0.3rem var(--rbrh-blue-400)}body{background-color:var(--rbrh-background);font-family:var(--rbrh-font-family-sans)}[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)}@media (min-width:12.5rem){.h1,h1{font-size:var(--rbrh-font-size-5xl);letter-spacing:var(--rbrh-letter-spacing-lg);line-height:var(--rbrh-line-h-5xl)}.h2,h2{font-size:var(--rbrh-font-size-4xl);line-height:var(--rbrh-line-h-4xl)}.h3,h3{font-size:var(--rbrh-font-size-3xl);line-height:var(--rbrh-line-h-3xl)}.h5,h5{font-size:var(--rbrh-font-size-xl);letter-spacing:var(--rbrh-letter-spacing-lg);line-height:var(--rbrh-line-h-xl)}.h6,h6{font-size:var(--rbrh-font-size-lg);letter-spacing:var(--rbrh-letter-spacing-xl);line-height:var(--rbrh-line-h-md)}}@media (min-width:67.5rem){.h1,h1{font-size:var(--rbrh-font-size-7xl);letter-spacing:var(--rbrh-letter-spacing-md);line-height:var(--rbrh-line-h-7xl)}.h2,h2{font-size:var(--rbrh-font-size-6xl);letter-spacing:var(--rbrh-letter-spacing-md);line-height:var(--rbrh-line-h-6xl)}.h3,h3{font-size:var(--rbrh-font-size-5xl);letter-spacing:var(--rbrh-letter-spacing-lg);line-height:var(--rbrh-line-h-5xl)}.h5,h5{font-size:var(--rbrh-font-size-2xl);letter-spacing:var(--rbrh-letter-spacing-lg);line-height:var(--rbrh-line-h-xl)}.h6,h6{font-size:var(--rbrh-font-size-lg);letter-spacing:var(--rbrh-letter-spacing-xl);line-height:var(--rbrh-line-h-md)}}p{font-size:var(--rbrh-font-size-md);letter-spacing:normal;line-height:var(--rbrh-line-h-md)}.subtitle,label{font-size:var(--rbrh-font-size-sm);letter-spacing:normal;line-height:var(--rbrh-line-h-md);width:-moz-fit-content;width:fit-content}.small,small{font-size:var(--rbrh-font-size-xxs);line-height:var(--rbrh-line-h-xxs)}.caption{font-size:var(--rbrh-font-size-xs);line-height:var(--rbrh-line-h-sm)}.h1,h1{color:var(--rbrh-text-900);font-weight:var(--rbrh-font-weight-bold);word-break:normal}.h2,.h3,h2,h3{color:var(--rbrh-text-900);font-weight:var(--rbrh-font-weight-bold)}.h5,.h6,h5,h6{color:var(--rbrh-text-800);font-weight:var(--rbrh-font-weight-bold)}a,li,p,span{color:var(--rbrh-text-800);font-weight:var(--rbrh-font-weight-medium)}label,small{color:var(--rbrh-text-700)}.badge{align-items:center;border-radius:var(--rbrh-radius-md);display:flex;flex-shrink:0;font-weight:var(--rbrh-font-weight-medium);justify-content:center;overflow:hidden;width:-moz-fit-content;width:fit-content}.badge svg,.badge-icon svg{display:inline;flex-shrink:0}.badge-icon{align-items:center;border-radius:var(--rbrh-radius-circle);display:inline-flex;flex-shrink:0;justify-content:center;line-height:0}.badge-sm{font-size:var(--rbrh-font-size-xs);line-height:var(--rbrh-line-h-sm);padding:var(--rbrh-spacing-2) var(--rbrh-spacing-3)}.badge-icon-md{font-size:var(--rbrh-font-size-sm);height:var(--rbrh-spacing-12);letter-spacing:normal;line-height:var(--rbrh-line-h-md);width:var(--rbrh-spacing-12)}.btn,button{align-items:center;background-color:var(--rbrh-blue-600);border-radius:var(--rbrh-radius-sm);color:var(--rbrh-white);display:flex;font-weight:var(--rbrh-font-weight-semibold);justify-content:center;padding:var(--rbrh-spacing-4) var(--rbrh-spacing-6)}.btn:hover,button:hover{transform:translateY(-3px);transition:transform .2s ease}.btn:focus,.btn:target,button:focus,button:target{box-shadow:var(--rbrh-shadow-focus);outline:0}.btn:active,button:active{box-shadow:0 1px 2px var(--rbrh-gray-100) inset;transform:translate(var(--rbrh-spacing-1),var(--rbrh-spacing-1))}.btn-sm{font-size:var(--rbrh-font-size-xs);line-height:var(--rbrh-line-h-sm);padding:var(--rbrh-spacing-3) var(--rbrh-spacing-5)}.btn-md{font-size:var(--rbrh-font-size-xs);line-height:var(--rbrh-line-h-sm);padding:var(--rbrh-spacing-4) var(--rbrh-spacing-6)}.btn-lg{font-size:var(--rbrh-font-size-md);letter-spacing:normal;line-height:var(--rbrh-line-h-md);padding:var(--rbrh-spacing-5) var(--rbrh-spacing-7)}.btn-absolute{background-color:var(--rbrh-background-50)}@media (min-width:12.5rem){.btn-absolute{display:none}}@media (min-width:36rem){.btn-absolute{bottom:var(--rbrh-spacing-5);box-shadow:var(--rbrh-shadow-sm);display:block;min-width:-moz-fit-content;min-width:fit-content;position:fixed;right:var(--rbrh-spacing-5);width:-moz-fit-content;width:fit-content;z-index:1000}}.card{background-color:var(--rbrh-background-50);border-radius:var(--rbrh-radius-lg);display:flex;flex-direction:column;height:-moz-fit-content;height:fit-content;justify-content:space-between;padding:var(--rbrh-spacing-5) var(--rbrh-spacing-7);text-align:left}.clickable{font-weight:var(--rbrh-font-weight-semibold);position:relative;z-index:0}.clickable:hover{text-decoration:none;transform:scale(.98);transition-duration:.5s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.clickable:focus,.clickable:target{box-shadow:var(--rbrh-shadow-focus)}.clickable a{pointer-events:auto}html{--shadow-gradient:0px 2px 32px 4px rgba(8,59,244,.3)}[data-theme=dark] .card.shadow-gradient{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:var(--rbrh-gray-80);box-shadow:var(--shadow-gradient)}.toggle-round{align-content:center;align-items:center;background-color:var(--rbrh-white);border-radius:50%;box-shadow:0 4px 20px hsla(0,2%,63%,.35);display:flex;height:2rem;justify-content:center;transition:var(--transition);width:2rem}.toggle-round:before{content:"\1F31E";font-size:1em;font-weight:700}.toggle-input:checked+.toggle-switch .toggle-round{background-color:var(--rbrh-gray-700);border:1px solid var(--rbrh-gray-700);box-shadow:var(--rbrh-shadow-sm)}.toggle-input:checked+.toggle-switch .toggle-round:before{border:none;content:"\1F31C"}.toggle-switch:hover{cursor:pointer}.toggle-input:focus+.toggle-round{box-shadow:var(--rbrh-shadow-focus);outline:0}footer{background-color:var(--rbrh-footer-background)}.footer-info{-moz-column-gap:var(--rbrh-spacing-24);border-bottom:1px solid var(--rbrh-border-200);border-top:1px solid var(--rbrh-border-200);column-gap:var(--rbrh-spacing-24);display:flex;padding-bottom:var(--rbrh-spacing-6);padding-top:var(--rbrh-spacing-6);width:100%}@media (min-width:12.5rem){.footer-info{align-items:flex-start;flex-direction:column;row-gap:var(--rbrh-spacing-4)}}@media (min-width:55rem){.footer-info{align-items:center;flex-direction:row;justify-content:space-between}}.footer-links{align-items:center;display:flex}@media (min-width:12.5rem){.footer-links:not(:last-child){margin-bottom:var(--rbrh-spacing-5)}}@media (min-width:55rem){.footer-links:not(:last-child){margin-bottom:0}}@media (min-width:67.5rem){.footer-links:not(:last-child){margin-right:var(--rbrh-spacing-4)}}.footer-desc{color:var(--rbrh-text-800);font-size:var(--rbrh-font-size-xs)}@media (min-width:12.5rem){.footer-desc{width:100%}}@media (min-width:55rem){.footer-desc{width:65%}}@media (min-width:67.5rem){.footer-desc{width:45%}}.all-center{margin-left:auto;margin-right:auto}@media (min-width:12.5rem){.all-center{align-items:flex-start;justify-content:flex-start;text-align:left}}@media (min-width:55rem){.all-center{align-items:center;justify-content:center;text-align:center}}.all-center:not(.grid){display:flex;flex-direction:column}.split-screen{display:flex;justify-content:space-between}@media (min-width:12.5rem){.split-screen{align-items:flex-start;flex-direction:column}}@media (min-width:55rem){.split-screen{align-content:center;align-items:center;flex-direction:row}}.split-screen>img{border-radius:var(--rbrh-radius-md)}@media (min-width:12.5rem){.split-screen>img{padding:0;width:100%}}@media (min-width:55rem){.split-screen>img{width:50%}}[data-theme=light] .cta-section,html .cta-section{background:linear-gradient(180deg,rgba(129,75,246,0),rgba(161,121,249,.19))}[data-theme=dark] .cta-section{background:var(--rbrh-blue-900)}.link-footer:focus,.link-footer:hover,.link-navbar:focus,.link-navbar:hover{color:var(--rbrh-text-link-hover);font-weight:var(--rbrh-font-weight-bold);text-decoration:underline;text-decoration-color:var(--rbrh-text-link-hover);text-decoration-thickness:.1em;text-underline-offset:.4em}@media (min-width:12.5rem){.sticky{position:static}}@media (min-width:36rem){.sticky{background-color:var(--rbrh-background);position:sticky;top:0;z-index:100}}@media (min-width:67.5rem){.sticky{position:sticky;top:0;z-index:100}}.bg-transparent{background-color:transparent}.bg-white{background-color:var(--rbrh-white)}.bg-gray-50{background-color:var(--rbrh-gray-50)}.bg-blue-50{background-color:var(--rbrh-blue-50)}.bg-blue-100{background-color:var(--rbrh-blue-100)}.bg-blue-600{background-color:var(--rbrh-blue-600)}.bg-yellow-100{background-color:var(--rbrh-yellow-100)}.bg-yellow-200{background-color:var(--rbrh-yellow-200)}.border-none{border:none}.border-gray-200{border:1px solid var(--rbrh-gray-200)}.border-gray-300{border:1px solid var(--rbrh-gray-300)}.border-blue-400{border:1px solid var(--rbrh-blue-400)}.border-yellow-200{border:1px solid var(--rbrh-yellow-200)}.border-yellow-400{border:1px solid var(--rbrh-yellow-400)}.transparent{color:transparent}.white{color:var(--rbrh-white)}.black{color:var(--rbrh-black)}.gray-800{color:var(--rbrh-gray-800)}.blue-600{color:var(--rbrh-blue-600)}.blue-700{color:var(--rbrh-blue-700)}.blue-800{color:var(--rbrh-blue-800)}[data-theme=dark] .dark-bg-black{background-color:var(--rbrh-black)}[data-theme=dark] .dark-bg-gray-600{background-color:var(--rbrh-gray-600)}[data-theme=dark] .dark-bg-gray-700{background-color:var(--rbrh-gray-700)}[data-theme=dark] .dark-bg-gray-800{background-color:var(--rbrh-gray-800)}[data-theme=dark] .dark-bg-gray-900{background-color:var(--rbrh-gray-900)}[data-theme=dark] .dark-bg-blue-500{background-color:var(--rbrh-blue-500)}[data-theme=dark] .dark-bg-blue-700{background-color:var(--rbrh-blue-700)}[data-theme=dark] .dark-bg-yellow-700{background-color:var(--rbrh-yellow-700)}[data-theme=dark] .dark-border-none{border:none}[data-theme=dark] .dark-border-gray-600{border:1px solid var(--rbrh-gray-600)}[data-theme=dark] .dark-border-gray-700{border:1px solid var(--rbrh-gray-700)}[data-theme=dark] .dark-border-blue-400{border:1px solid var(--rbrh-blue-400)}[data-theme=dark] .dark-white{color:var(--rbrh-white)}[data-theme=dark] .dark-black{color:var(--rbrh-black)}[data-theme=dark] .dark-gray-200{color:var(--rbrh-gray-200)}[data-theme=dark] .dark-blue-200{color:var(--rbrh-blue-200)}[data-theme=dark] .dark-blue-300{color:var(--rbrh-blue-300)}.radius-sm{border-radius:var(--rbrh-radius-sm)}.radius-md{border-radius:var(--rbrh-radius-md)}.radius-lg{border-radius:var(--rbrh-radius-lg)}.border-none{border-width:0}.uppercase{text-transform:uppercase}.underline{text-decoration:underline}.align-left{text-align:left}.item-excerpt{overflow:hidden;overflow-wrap:break-word;text-overflow:ellipsis}.font-extrabold{font-weight:var(--rbrh-font-weight-extrabold)}.font-bold{font-weight:var(--rbrh-font-weight-bold)}.font-semibold{font-weight:var(--rbrh-font-weight-semibold)}.font-medium{font-weight:var(--rbrh-font-weight-medium)}.font-default{font-weight:var(--rbrh-font-weight-default)}.font-size-lg{font-size:var(--rbrh-font-size-lg);letter-spacing:var(--rbrh-letter-spacing-xl);line-height:var(--rbrh-line-h-md)}.font-size-6xl{font-size:var(--rbrh-font-size-6xl);letter-spacing:var(--rbrh-letter-spacing-md);line-height:var(--rbrh-line-h-6xl)}.line-h-lg{line-height:var(--rbrh-line-h-lg)}.shadow-md{box-shadow:var(--rbrh-shadow-md)}.shadow-lg{box-shadow:var(--rbrh-shadow-lg)}.flex{display:flex}.grid{display:grid}.container{margin-left:auto;margin-right:auto;width:100%}@media (min-width:12.5rem){.container{padding-left:var(--rbrh-spacing-7);padding-right:var(--rbrh-spacing-7)}}@media (min-width:36rem){.container{padding-left:var(--rbrh-spacing-9);padding-right:var(--rbrh-spacing-9)}}@media (min-width:55rem){.container{padding-left:var(--rbrh-spacing-8);padding-right:var(--rbrh-spacing-8)}}@media (min-width:67.5rem){.container{padding-left:var(--rbrh-spacing-10);padding-right:var(--rbrh-spacing-10)}}@media (min-width:81.25rem){.container{padding-left:var(--rbrh-spacing-14);padding-right:var(--rbrh-spacing-14)}}@media (min-width:100rem){.container{padding-left:0;padding-right:0}}.container-lg{max-width:var(--rbrh-screen-lg)}.container-xl{max-width:var(--rbrh-screen-xl)}.flex-row{flex-direction:row}.flex-column{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-5{grid-gap:var(--rbrh-spacing-5);gap:var(--rbrh-spacing-5)}.gap-6{grid-gap:var(--rbrh-spacing-6);gap:var(--rbrh-spacing-6)}.gap-8{grid-gap:var(--rbrh-spacing-8);gap:var(--rbrh-spacing-8)}.gap-10{grid-gap:var(--rbrh-spacing-10);gap:var(--rbrh-spacing-10)}.h-10{height:var(--rbrh-spacing-10)}.h-20{height:var(--rbrh-spacing-20)}.p-0{padding:0}.p-6{padding:var(--rbrh-spacing-6)}.p-7{padding:var(--rbrh-spacing-7)}.p-x-3{padding-left:var(--rbrh-spacing-3);padding-right:var(--rbrh-spacing-3)}.p-x-5{padding-left:var(--rbrh-spacing-5);padding-right:var(--rbrh-spacing-5)}.p-y-2{padding-bottom:var(--rbrh-spacing-2);padding-top:var(--rbrh-spacing-2)}.p-y-3{padding-bottom:var(--rbrh-spacing-3);padding-top:var(--rbrh-spacing-3)}.p-y-7{padding-bottom:var(--rbrh-spacing-7);padding-top:var(--rbrh-spacing-7)}.p-y-24{padding-bottom:var(--rbrh-spacing-24);padding-top:var(--rbrh-spacing-24)}.p-t-14{padding-top:var(--rbrh-spacing-14)}.p-b-14{padding-bottom:var(--rbrh-spacing-14)}.m-t-6{margin-top:var(--rbrh-spacing-6)}.m-b-2{margin-bottom:var(--rbrh-spacing-2)}.m-b-3{margin-bottom:var(--rbrh-spacing-3)}.m-b-4{margin-bottom:var(--rbrh-spacing-4)}.m-b-5{margin-bottom:var(--rbrh-spacing-5)}.m-b-6{margin-bottom:var(--rbrh-spacing-6)}.m-b-7{margin-bottom:var(--rbrh-spacing-7)}.m-b-8{margin-bottom:var(--rbrh-spacing-8)}.m-b-10{margin-bottom:var(--rbrh-spacing-10)}.m-b-16{margin-bottom:var(--rbrh-spacing-16)}.m-r-3{margin-right:var(--rbrh-spacing-3)}.m-r-4{margin-right:var(--rbrh-spacing-4)}.m-r-6{margin-right:var(--rbrh-spacing-6)}.m-r-8{margin-right:var(--rbrh-spacing-8)}.m-r-10{margin-right:var(--rbrh-spacing-10)}.m-l-3{margin-left:var(--rbrh-spacing-3)}.m-l-4{margin-left:var(--rbrh-spacing-4)}.w-100{width:100%}.w-10{width:var(--rbrh-spacing-10)}@media (min-width:12.5rem){.xs-d-none{display:none}}@media (min-width:36rem){.sm-flex{display:flex}}@media (min-width:55rem){.md-d-none{display:none}.md-flex{display:flex}}@media (min-width:12.5rem){.xs-flex-wrap{flex-wrap:wrap}}@media (min-width:55rem){.md-flex-no-wrap{flex-wrap:nowrap}}@media (min-width:67.5rem){.lg-flex-no-wrap{flex-wrap:nowrap}}@media (min-width:12.5rem){.xs-grid-cols-1{grid-template-columns:repeat(1,auto)}.xs-grid-cols-2{grid-template-columns:repeat(2,auto)}}@media (min-width:36rem){.sm-grid-cols-2{grid-template-columns:repeat(2,auto)}.sm-grid-cols-3{grid-template-columns:repeat(3,auto)}}@media (min-width:55rem){.md-grid-cols-2{grid-template-columns:repeat(2,auto)}}@media (min-width:67.5rem){.lg-grid-cols-3{grid-template-columns:repeat(3,auto)}.lg-grid-cols-6{grid-template-columns:repeat(6,auto)}}@media (min-width:81.25rem){.xl-grid-cols-3{grid-template-columns:repeat(3,auto)}.xl-grid-cols-4{grid-template-columns:repeat(4,auto)}}@media (min-width:12.5rem){.xs-m-b-7{margin-bottom:var(--rbrh-spacing-7)}.xs-m-b-8{margin-bottom:var(--rbrh-spacing-8)}.xs-m-l-0{margin-left:0}}@media (min-width:36rem){.sm-m-b-0{margin-bottom:0}}@media (min-width:55rem){.md-m-x-0{margin-left:0;margin-right:0}.md-m-b-0{margin-bottom:0}.md-m-r-7{margin-right:var(--rbrh-spacing-7)}.md-m-r-8{margin-right:var(--rbrh-spacing-8)}.md-m-r-10{margin-right:var(--rbrh-spacing-10)}.md-m-r-12{margin-right:var(--rbrh-spacing-12)}}@media (min-width:67.5rem){.lg-m-b-0{margin-bottom:0}.lg-m-r-8{margin-right:var(--rbrh-spacing-8)}}@media (min-width:12.5rem){.xs-p-x-6{padding-left:var(--rbrh-spacing-6);padding-right:var(--rbrh-spacing-6)}.xs-p-x-8{padding-left:var(--rbrh-spacing-8);padding-right:var(--rbrh-spacing-8)}.xs-p-y-8{padding-bottom:var(--rbrh-spacing-8);padding-top:var(--rbrh-spacing-8)}.xs-p-y-16{padding-bottom:var(--rbrh-spacing-16);padding-top:var(--rbrh-spacing-16)}}@media (min-width:55rem){.md-p-x-9{padding-left:var(--rbrh-spacing-9);padding-right:var(--rbrh-spacing-9)}.md-p-y-3{padding-bottom:var(--rbrh-spacing-3);padding-top:var(--rbrh-spacing-3)}.md-p-y-10{padding-bottom:var(--rbrh-spacing-10);padding-top:var(--rbrh-spacing-10)}.md-p-r-4{padding-right:var(--rbrh-spacing-4)}.md-p-l-6{padding-left:var(--rbrh-spacing-6)}}@media (min-width:67.5rem){.lg-p-y-8{padding-bottom:var(--rbrh-spacing-8);padding-top:var(--rbrh-spacing-8)}}@media (min-width:12.5rem){.xs-w-100{width:100%}}@media (min-width:55rem){.md-w-fit{width:-moz-fit-content;width:fit-content}.md-w-50{width:50%}.md-w-75{width:75%}}@media (min-width:67.5rem){.lg-w-35{width:35%}.lg-w-50{width:50%}.lg-w-65{width:65%}.lg-w-75{width:75%}}
\ No newline at end of file
diff --git a/src/styles/main.css b/src/styles/main.css
new file mode 100644
index 0000000..04a0d92
--- /dev/null
+++ b/src/styles/main.css
@@ -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";
+
diff --git a/src/styles/reset.css b/src/styles/reset.css
new file mode 100644
index 0000000..42bd5a6
--- /dev/null
+++ b/src/styles/reset.css
@@ -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;
+}
diff --git a/src/styles/src/components/alert.css b/src/styles/src/components/alert.css
new file mode 100644
index 0000000..eabb666
--- /dev/null
+++ b/src/styles/src/components/alert.css
@@ -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);
+ }
\ No newline at end of file
diff --git a/src/styles/src/components/badge.css b/src/styles/src/components/badge.css
new file mode 100644
index 0000000..f1a4055
--- /dev/null
+++ b/src/styles/src/components/badge.css
@@ -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;
+}
diff --git a/src/styles/src/components/button.css b/src/styles/src/components/button.css
new file mode 100644
index 0000000..fdc6848
--- /dev/null
+++ b/src/styles/src/components/button.css
@@ -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;
+ }
+}
diff --git a/src/styles/src/components/card.css b/src/styles/src/components/card.css
new file mode 100644
index 0000000..61ea3aa
--- /dev/null
+++ b/src/styles/src/components/card.css
@@ -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);
+}
diff --git a/src/styles/src/components/footer.css b/src/styles/src/components/footer.css
new file mode 100644
index 0000000..a01cf09
--- /dev/null
+++ b/src/styles/src/components/footer.css
@@ -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%;
+ }
+}
diff --git a/src/styles/src/components/navbar.css b/src/styles/src/components/navbar.css
new file mode 100644
index 0000000..ee60326
--- /dev/null
+++ b/src/styles/src/components/navbar.css
@@ -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;
+ }
+}
\ No newline at end of file
diff --git a/src/styles/src/components/section.css b/src/styles/src/components/section.css
new file mode 100644
index 0000000..a5b67dc
--- /dev/null
+++ b/src/styles/src/components/section.css
@@ -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);
+}
diff --git a/src/styles/src/components/toggle.css b/src/styles/src/components/toggle.css
new file mode 100644
index 0000000..6123729
--- /dev/null
+++ b/src/styles/src/components/toggle.css
@@ -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;
+}
diff --git a/src/styles/src/css-variable.css b/src/styles/src/css-variable.css
new file mode 100644
index 0000000..85d1a0c
--- /dev/null
+++ b/src/styles/src/css-variable.css
@@ -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);
+}
\ No newline at end of file
diff --git a/src/styles/src/reset.css b/src/styles/src/reset.css
new file mode 100644
index 0000000..42bd5a6
--- /dev/null
+++ b/src/styles/src/reset.css
@@ -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;
+}
diff --git a/src/styles/src/utilities/.vscode/settings.json b/src/styles/src/utilities/.vscode/settings.json
new file mode 100644
index 0000000..7a5cb96
--- /dev/null
+++ b/src/styles/src/utilities/.vscode/settings.json
@@ -0,0 +1,5 @@
+{
+ "cSpell.enableFiletypes": [
+ "postcss"
+ ]
+}
\ No newline at end of file
diff --git a/src/styles/src/utilities/bg-size.css b/src/styles/src/utilities/bg-size.css
new file mode 100644
index 0000000..d160ef1
--- /dev/null
+++ b/src/styles/src/utilities/bg-size.css
@@ -0,0 +1,9 @@
+.bg-auto {
+ background-size: auto;
+}
+.bg-cover {
+ background-size: cover;
+}
+.bg-contain {
+ background-size: contain;
+}
\ No newline at end of file
diff --git a/src/styles/src/utilities/border-radius.css b/src/styles/src/utilities/border-radius.css
new file mode 100644
index 0000000..e78cf82
--- /dev/null
+++ b/src/styles/src/utilities/border-radius.css
@@ -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);
+}
diff --git a/src/styles/src/utilities/border-width.css b/src/styles/src/utilities/border-width.css
new file mode 100644
index 0000000..7ffd9c0
--- /dev/null
+++ b/src/styles/src/utilities/border-width.css
@@ -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;
+}
diff --git a/src/styles/src/utilities/container.css b/src/styles/src/utilities/container.css
new file mode 100644
index 0000000..2e78287
--- /dev/null
+++ b/src/styles/src/utilities/container.css
@@ -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);
+}
diff --git a/src/styles/src/utilities/dark-mode/dark-bg-blue.css b/src/styles/src/utilities/dark-mode/dark-bg-blue.css
new file mode 100644
index 0000000..1067e19
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-bg-blue.css
@@ -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);
+ }
+}
+
diff --git a/src/styles/src/utilities/dark-mode/dark-bg-cyan.css b/src/styles/src/utilities/dark-mode/dark-bg-cyan.css
new file mode 100644
index 0000000..2f0dc11
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-bg-cyan.css
@@ -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);
+ }
+}
+
diff --git a/src/styles/src/utilities/dark-mode/dark-bg-gray.css b/src/styles/src/utilities/dark-mode/dark-bg-gray.css
new file mode 100644
index 0000000..62d544c
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-bg-gray.css
@@ -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);
+ }
+}
diff --git a/src/styles/src/utilities/dark-mode/dark-bg-green.css b/src/styles/src/utilities/dark-mode/dark-bg-green.css
new file mode 100644
index 0000000..30444e2
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-bg-green.css
@@ -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);
+ }
+}
diff --git a/src/styles/src/utilities/dark-mode/dark-bg-indigo.css b/src/styles/src/utilities/dark-mode/dark-bg-indigo.css
new file mode 100644
index 0000000..90e7696
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-bg-indigo.css
@@ -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);
+ }
+}
+
diff --git a/src/styles/src/utilities/dark-mode/dark-bg-lime.css b/src/styles/src/utilities/dark-mode/dark-bg-lime.css
new file mode 100644
index 0000000..ba9e88a
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-bg-lime.css
@@ -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);
+ }
+}
+
diff --git a/src/styles/src/utilities/dark-mode/dark-bg-magenta.css b/src/styles/src/utilities/dark-mode/dark-bg-magenta.css
new file mode 100644
index 0000000..e923555
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-bg-magenta.css
@@ -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);
+ }
+}
+
diff --git a/src/styles/src/utilities/dark-mode/dark-bg-orange.css b/src/styles/src/utilities/dark-mode/dark-bg-orange.css
new file mode 100644
index 0000000..42bf60c
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-bg-orange.css
@@ -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);
+ }
+}
+
diff --git a/src/styles/src/utilities/dark-mode/dark-bg-purple.css b/src/styles/src/utilities/dark-mode/dark-bg-purple.css
new file mode 100644
index 0000000..f011657
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-bg-purple.css
@@ -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);
+ }
+}
+
diff --git a/src/styles/src/utilities/dark-mode/dark-bg-red.css b/src/styles/src/utilities/dark-mode/dark-bg-red.css
new file mode 100644
index 0000000..e4293f2
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-bg-red.css
@@ -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);
+ }
+}
+
diff --git a/src/styles/src/utilities/dark-mode/dark-bg-sky.css b/src/styles/src/utilities/dark-mode/dark-bg-sky.css
new file mode 100644
index 0000000..701a803
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-bg-sky.css
@@ -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);
+ }
+}
+
diff --git a/src/styles/src/utilities/dark-mode/dark-bg-teal.css b/src/styles/src/utilities/dark-mode/dark-bg-teal.css
new file mode 100644
index 0000000..fbd934d
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-bg-teal.css
@@ -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);
+ }
+}
diff --git a/src/styles/src/utilities/dark-mode/dark-bg-violet.css b/src/styles/src/utilities/dark-mode/dark-bg-violet.css
new file mode 100644
index 0000000..9924d52
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-bg-violet.css
@@ -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);
+ }
+}
+
diff --git a/src/styles/src/utilities/dark-mode/dark-bg-yellow.css b/src/styles/src/utilities/dark-mode/dark-bg-yellow.css
new file mode 100644
index 0000000..833943a
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-bg-yellow.css
@@ -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);
+ }
+}
diff --git a/src/styles/src/utilities/dark-mode/dark-blue.css b/src/styles/src/utilities/dark-mode/dark-blue.css
new file mode 100644
index 0000000..e429390
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-blue.css
@@ -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);
+ }
+}
+
diff --git a/src/styles/src/utilities/dark-mode/dark-border-blue.css b/src/styles/src/utilities/dark-mode/dark-border-blue.css
new file mode 100644
index 0000000..c7da2c2
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-border-blue.css
@@ -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);
+ }
+}
diff --git a/src/styles/src/utilities/dark-mode/dark-border-cyan.css b/src/styles/src/utilities/dark-mode/dark-border-cyan.css
new file mode 100644
index 0000000..6828e83
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-border-cyan.css
@@ -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);
+ }
+}
diff --git a/src/styles/src/utilities/dark-mode/dark-border-gray.css b/src/styles/src/utilities/dark-mode/dark-border-gray.css
new file mode 100644
index 0000000..f9526fe
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-border-gray.css
@@ -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);
+ }
+}
diff --git a/src/styles/src/utilities/dark-mode/dark-border-green.css b/src/styles/src/utilities/dark-mode/dark-border-green.css
new file mode 100644
index 0000000..e27ff6d
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-border-green.css
@@ -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);
+ }
+}
diff --git a/src/styles/src/utilities/dark-mode/dark-border-indigo.css b/src/styles/src/utilities/dark-mode/dark-border-indigo.css
new file mode 100644
index 0000000..a288d44
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-border-indigo.css
@@ -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);
+ }
+}
diff --git a/src/styles/src/utilities/dark-mode/dark-border-lime.css b/src/styles/src/utilities/dark-mode/dark-border-lime.css
new file mode 100644
index 0000000..452492d
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-border-lime.css
@@ -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);
+ }
+}
diff --git a/src/styles/src/utilities/dark-mode/dark-border-magenta.css b/src/styles/src/utilities/dark-mode/dark-border-magenta.css
new file mode 100644
index 0000000..0e52935
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-border-magenta.css
@@ -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);
+ }
+}
diff --git a/src/styles/src/utilities/dark-mode/dark-border-orange.css b/src/styles/src/utilities/dark-mode/dark-border-orange.css
new file mode 100644
index 0000000..90fcabf
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-border-orange.css
@@ -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);
+ }
+}
diff --git a/src/styles/src/utilities/dark-mode/dark-border-purple.css b/src/styles/src/utilities/dark-mode/dark-border-purple.css
new file mode 100644
index 0000000..5d78b2d
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-border-purple.css
@@ -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);
+ }
+}
diff --git a/src/styles/src/utilities/dark-mode/dark-border-red.css b/src/styles/src/utilities/dark-mode/dark-border-red.css
new file mode 100644
index 0000000..e8cdd01
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-border-red.css
@@ -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);
+ }
+}
diff --git a/src/styles/src/utilities/dark-mode/dark-border-sky.css b/src/styles/src/utilities/dark-mode/dark-border-sky.css
new file mode 100644
index 0000000..52cad06
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-border-sky.css
@@ -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);
+ }
+}
diff --git a/src/styles/src/utilities/dark-mode/dark-border-teal.css b/src/styles/src/utilities/dark-mode/dark-border-teal.css
new file mode 100644
index 0000000..09b9ea6
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-border-teal.css
@@ -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);
+ }
+}
diff --git a/src/styles/src/utilities/dark-mode/dark-border-violet.css b/src/styles/src/utilities/dark-mode/dark-border-violet.css
new file mode 100644
index 0000000..caac806
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-border-violet.css
@@ -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);
+ }
+}
diff --git a/src/styles/src/utilities/dark-mode/dark-border-width.css b/src/styles/src/utilities/dark-mode/dark-border-width.css
new file mode 100644
index 0000000..b677231
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-border-width.css
@@ -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;
+ }
+}
diff --git a/src/styles/src/utilities/dark-mode/dark-border-yellow.css b/src/styles/src/utilities/dark-mode/dark-border-yellow.css
new file mode 100644
index 0000000..af4d743
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-border-yellow.css
@@ -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);
+ }
+}
diff --git a/src/styles/src/utilities/dark-mode/dark-cyan.css b/src/styles/src/utilities/dark-mode/dark-cyan.css
new file mode 100644
index 0000000..429f3e1
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-cyan.css
@@ -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);
+ }
+}
diff --git a/src/styles/src/utilities/dark-mode/dark-gray.css b/src/styles/src/utilities/dark-mode/dark-gray.css
new file mode 100644
index 0000000..a0f6f1e
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-gray.css
@@ -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);
+ }
+}
+
diff --git a/src/styles/src/utilities/dark-mode/dark-green.css b/src/styles/src/utilities/dark-mode/dark-green.css
new file mode 100644
index 0000000..6d8c900
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-green.css
@@ -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);
+ }
+}
+
diff --git a/src/styles/src/utilities/dark-mode/dark-indigo.css b/src/styles/src/utilities/dark-mode/dark-indigo.css
new file mode 100644
index 0000000..e8c9a79
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-indigo.css
@@ -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);
+ }
+}
+
diff --git a/src/styles/src/utilities/dark-mode/dark-lime.css b/src/styles/src/utilities/dark-mode/dark-lime.css
new file mode 100644
index 0000000..75c56be
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-lime.css
@@ -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);
+ }
+}
+
diff --git a/src/styles/src/utilities/dark-mode/dark-magenta.css b/src/styles/src/utilities/dark-mode/dark-magenta.css
new file mode 100644
index 0000000..9c579bd
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-magenta.css
@@ -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);
+ }
+}
+
diff --git a/src/styles/src/utilities/dark-mode/dark-orange.css b/src/styles/src/utilities/dark-mode/dark-orange.css
new file mode 100644
index 0000000..54b3357
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-orange.css
@@ -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);
+ }
+}
+
diff --git a/src/styles/src/utilities/dark-mode/dark-purple.css b/src/styles/src/utilities/dark-mode/dark-purple.css
new file mode 100644
index 0000000..c8a54e1
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-purple.css
@@ -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);
+ }
+}
+
diff --git a/src/styles/src/utilities/dark-mode/dark-red.css b/src/styles/src/utilities/dark-mode/dark-red.css
new file mode 100644
index 0000000..7c100e6
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-red.css
@@ -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);
+ }
+}
+
diff --git a/src/styles/src/utilities/dark-mode/dark-sky.css b/src/styles/src/utilities/dark-mode/dark-sky.css
new file mode 100644
index 0000000..3651e00
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-sky.css
@@ -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);
+ }
+}
+
diff --git a/src/styles/src/utilities/dark-mode/dark-teal.css b/src/styles/src/utilities/dark-mode/dark-teal.css
new file mode 100644
index 0000000..76bac92
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-teal.css
@@ -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);
+ }
+}
diff --git a/src/styles/src/utilities/dark-mode/dark-violet.css b/src/styles/src/utilities/dark-mode/dark-violet.css
new file mode 100644
index 0000000..69af2a2
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-violet.css
@@ -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);
+ }
+}
+
diff --git a/src/styles/src/utilities/dark-mode/dark-yellow.css b/src/styles/src/utilities/dark-mode/dark-yellow.css
new file mode 100644
index 0000000..b8be284
--- /dev/null
+++ b/src/styles/src/utilities/dark-mode/dark-yellow.css
@@ -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);
+ }
+}
diff --git a/src/styles/src/utilities/display.css b/src/styles/src/utilities/display.css
new file mode 100644
index 0000000..e5d0f49
--- /dev/null
+++ b/src/styles/src/utilities/display.css
@@ -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;
+}
\ No newline at end of file
diff --git a/src/styles/src/utilities/flexbox.css b/src/styles/src/utilities/flexbox.css
new file mode 100644
index 0000000..b64bb1a
--- /dev/null
+++ b/src/styles/src/utilities/flexbox.css
@@ -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;
+}
diff --git a/src/styles/src/utilities/grid.css b/src/styles/src/utilities/grid.css
new file mode 100644
index 0000000..218d6c5
--- /dev/null
+++ b/src/styles/src/utilities/grid.css
@@ -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);
+}
diff --git a/src/styles/src/utilities/height.css b/src/styles/src/utilities/height.css
new file mode 100644
index 0000000..1b0aa90
--- /dev/null
+++ b/src/styles/src/utilities/height.css
@@ -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%;
+}
diff --git a/src/styles/src/utilities/light-mode/bg-blue.css b/src/styles/src/utilities/light-mode/bg-blue.css
new file mode 100644
index 0000000..3eca8f2
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/bg-blue.css
@@ -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);
+}
\ No newline at end of file
diff --git a/src/styles/src/utilities/light-mode/bg-cyan.css b/src/styles/src/utilities/light-mode/bg-cyan.css
new file mode 100644
index 0000000..edb9e30
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/bg-cyan.css
@@ -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);
+}
\ No newline at end of file
diff --git a/src/styles/src/utilities/light-mode/bg-gray.css b/src/styles/src/utilities/light-mode/bg-gray.css
new file mode 100644
index 0000000..9fda10e
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/bg-gray.css
@@ -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);
+}
\ No newline at end of file
diff --git a/src/styles/src/utilities/light-mode/bg-green.css b/src/styles/src/utilities/light-mode/bg-green.css
new file mode 100644
index 0000000..69f6d2c
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/bg-green.css
@@ -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);
+}
\ No newline at end of file
diff --git a/src/styles/src/utilities/light-mode/bg-indigo.css b/src/styles/src/utilities/light-mode/bg-indigo.css
new file mode 100644
index 0000000..0e23024
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/bg-indigo.css
@@ -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);
+}
\ No newline at end of file
diff --git a/src/styles/src/utilities/light-mode/bg-lime.css b/src/styles/src/utilities/light-mode/bg-lime.css
new file mode 100644
index 0000000..32b9b2c
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/bg-lime.css
@@ -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);
+}
\ No newline at end of file
diff --git a/src/styles/src/utilities/light-mode/bg-magenta.css b/src/styles/src/utilities/light-mode/bg-magenta.css
new file mode 100644
index 0000000..7d48e2a
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/bg-magenta.css
@@ -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);
+}
\ No newline at end of file
diff --git a/src/styles/src/utilities/light-mode/bg-orange.css b/src/styles/src/utilities/light-mode/bg-orange.css
new file mode 100644
index 0000000..223552a
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/bg-orange.css
@@ -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);
+}
\ No newline at end of file
diff --git a/src/styles/src/utilities/light-mode/bg-purple.css b/src/styles/src/utilities/light-mode/bg-purple.css
new file mode 100644
index 0000000..ce23136
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/bg-purple.css
@@ -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);
+}
\ No newline at end of file
diff --git a/src/styles/src/utilities/light-mode/bg-red.css b/src/styles/src/utilities/light-mode/bg-red.css
new file mode 100644
index 0000000..235611a
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/bg-red.css
@@ -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);
+}
\ No newline at end of file
diff --git a/src/styles/src/utilities/light-mode/bg-sky.css b/src/styles/src/utilities/light-mode/bg-sky.css
new file mode 100644
index 0000000..7dccd30
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/bg-sky.css
@@ -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);
+}
\ No newline at end of file
diff --git a/src/styles/src/utilities/light-mode/bg-teal.css b/src/styles/src/utilities/light-mode/bg-teal.css
new file mode 100644
index 0000000..72909a4
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/bg-teal.css
@@ -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);
+}
\ No newline at end of file
diff --git a/src/styles/src/utilities/light-mode/bg-violet.css b/src/styles/src/utilities/light-mode/bg-violet.css
new file mode 100644
index 0000000..9f79e8b
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/bg-violet.css
@@ -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);
+}
\ No newline at end of file
diff --git a/src/styles/src/utilities/light-mode/bg-yellow.css b/src/styles/src/utilities/light-mode/bg-yellow.css
new file mode 100644
index 0000000..d13a3a5
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/bg-yellow.css
@@ -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);
+}
\ No newline at end of file
diff --git a/src/styles/src/utilities/light-mode/blue.css b/src/styles/src/utilities/light-mode/blue.css
new file mode 100644
index 0000000..14de541
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/blue.css
@@ -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);
+}
diff --git a/src/styles/src/utilities/light-mode/border-blue.css b/src/styles/src/utilities/light-mode/border-blue.css
new file mode 100644
index 0000000..3819cd2
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/border-blue.css
@@ -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);
+}
diff --git a/src/styles/src/utilities/light-mode/border-cyan.css b/src/styles/src/utilities/light-mode/border-cyan.css
new file mode 100644
index 0000000..144cf1f
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/border-cyan.css
@@ -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);
+}
diff --git a/src/styles/src/utilities/light-mode/border-gray.css b/src/styles/src/utilities/light-mode/border-gray.css
new file mode 100644
index 0000000..715a56a
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/border-gray.css
@@ -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);
+}
diff --git a/src/styles/src/utilities/light-mode/border-green.css b/src/styles/src/utilities/light-mode/border-green.css
new file mode 100644
index 0000000..ee49d91
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/border-green.css
@@ -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);
+}
diff --git a/src/styles/src/utilities/light-mode/border-indigo.css b/src/styles/src/utilities/light-mode/border-indigo.css
new file mode 100644
index 0000000..f3193a1
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/border-indigo.css
@@ -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);
+}
\ No newline at end of file
diff --git a/src/styles/src/utilities/light-mode/border-lime.css b/src/styles/src/utilities/light-mode/border-lime.css
new file mode 100644
index 0000000..1048b1a
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/border-lime.css
@@ -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);
+}
diff --git a/src/styles/src/utilities/light-mode/border-magenta.css b/src/styles/src/utilities/light-mode/border-magenta.css
new file mode 100644
index 0000000..3b23177
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/border-magenta.css
@@ -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);
+}
\ No newline at end of file
diff --git a/src/styles/src/utilities/light-mode/border-orange.css b/src/styles/src/utilities/light-mode/border-orange.css
new file mode 100644
index 0000000..bc0fcd9
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/border-orange.css
@@ -0,0 +1,30 @@
+.border-orange-50 {
+ border: 1px solid var(--rbrh-orange-50);
+}
+.border-orange-100 {
+ border: 1px solid var(--rbrh-orange-100);
+}
+.border-orange-200 {
+ border: 1px solid var(--rbrh-orange-200);
+}
+.border-orange-300 {
+ border: 1px solid var(--rbrh-orange-300);
+}
+.border-orange-400 {
+ border: 1px solid var(--rbrh-orange-400);
+}
+.border-orange-500 {
+ border: 1px solid var(--rbrh-orange-500);
+}
+.border-orange-600 {
+ border: 1px solid var(--rbrh-orange-600);
+}
+.border-orange-700 {
+ border: 1px solid var(--rbrh-orange-700);
+}
+.border-orange-800 {
+ border: 1px solid var(--rbrh-orange-800);
+}
+.border-orange-900 {
+ border: 1px solid var(--rbrh-orange-900);
+}
diff --git a/src/styles/src/utilities/light-mode/border-purple.css b/src/styles/src/utilities/light-mode/border-purple.css
new file mode 100644
index 0000000..0bf38d9
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/border-purple.css
@@ -0,0 +1,30 @@
+.border-purple-50 {
+ border: 1px solid var(--rbrh-purple-50);
+}
+.border-purple-100 {
+ border: 1px solid var(--rbrh-purple-100);
+}
+.border-purple-200 {
+ border: 1px solid var(--rbrh-purple-200);
+}
+.border-purple-300 {
+ border: 1px solid var(--rbrh-purple-300);
+}
+.border-purple-400 {
+ border: 1px solid var(--rbrh-purple-400);
+}
+.border-purple-500 {
+ border: 1px solid var(--rbrh-purple-500);
+}
+.border-purple-600 {
+ border: 1px solid var(--rbrh-purple-600);
+}
+.border-purple-700 {
+ border: 1px solid var(--rbrh-purple-700);
+}
+.border-purple-800 {
+ border: 1px solid var(--rbrh-purple-800);
+}
+.border-purple-900 {
+ border: 1px solid var(--rbrh-purple-900);
+}
diff --git a/src/styles/src/utilities/light-mode/border-red.css b/src/styles/src/utilities/light-mode/border-red.css
new file mode 100644
index 0000000..8b66c25
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/border-red.css
@@ -0,0 +1,30 @@
+.border-red-50 {
+ border: 1px solid var(--rbrh-red-50);
+}
+.border-red-100 {
+ border: 1px solid var(--rbrh-red-100);
+}
+.border-red-200 {
+ border: 1px solid var(--rbrh-red-200);
+}
+.border-red-300 {
+ border: 1px solid var(--rbrh-red-300);
+}
+.border-red-400 {
+ border: 1px solid var(--rbrh-red-400);
+}
+.border-red-500 {
+ border: 1px solid var(--rbrh-red-500);
+}
+.border-red-600 {
+ border: 1px solid var(--rbrh-red-600);
+}
+.border-red-700 {
+ border: 1px solid var(--rbrh-red-700);
+}
+.border-red-800 {
+ border: 1px solid var(--rbrh-red-800);
+}
+.border-red-900 {
+ border: 1px solid var(--rbrh-red-900);
+}
diff --git a/src/styles/src/utilities/light-mode/border-sky.css b/src/styles/src/utilities/light-mode/border-sky.css
new file mode 100644
index 0000000..d0501e8
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/border-sky.css
@@ -0,0 +1,30 @@
+.border-sky-50 {
+ border: 1px solid var(--rbrh-sky-50);
+}
+.border-sky-100 {
+ border: 1px solid var(--rbrh-sky-100);
+}
+.border-sky-200 {
+ border: 1px solid var(--rbrh-sky-200);
+}
+.border-sky-300 {
+ border: 1px solid var(--rbrh-sky-300);
+}
+.border-sky-400 {
+ border: 1px solid var(--rbrh-sky-400);
+}
+.border-sky-500 {
+ border: 1px solid var(--rbrh-sky-500);
+}
+.border-sky-600 {
+ border: 1px solid var(--rbrh-sky-600);
+}
+.border-sky-700 {
+ border: 1px solid var(--rbrh-sky-700);
+}
+.border-sky-800 {
+ border: 1px solid var(--rbrh-sky-800);
+}
+.border-sky-900 {
+ border: 1px solid var(--rbrh-sky-900);
+}
diff --git a/src/styles/src/utilities/light-mode/border-teal.css b/src/styles/src/utilities/light-mode/border-teal.css
new file mode 100644
index 0000000..2d41976
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/border-teal.css
@@ -0,0 +1,30 @@
+.border-teal-50 {
+ border: 1px solid var(--rbrh-teal-50);
+}
+.border-teal-100 {
+ border: 1px solid var(--rbrh-teal-100);
+}
+.border-teal-200 {
+ border: 1px solid var(--rbrh-teal-200);
+}
+.border-teal-300 {
+ border: 1px solid var(--rbrh-teal-300);
+}
+.border-teal-400 {
+ border: 1px solid var(--rbrh-teal-400);
+}
+.border-teal-500 {
+ border: 1px solid var(--rbrh-teal-500);
+}
+.border-teal-600 {
+ border: 1px solid var(--rbrh-teal-600);
+}
+.border-teal-700 {
+ border: 1px solid var(--rbrh-teal-700);
+}
+.border-teal-800 {
+ border: 1px solid var(--rbrh-teal-800);
+}
+.border-teal-900 {
+ border: 1px solid var(--rbrh-teal-900);
+}
diff --git a/src/styles/src/utilities/light-mode/border-violet.css b/src/styles/src/utilities/light-mode/border-violet.css
new file mode 100644
index 0000000..710dc97
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/border-violet.css
@@ -0,0 +1,30 @@
+.border-violet-50 {
+ border: 1px solid var(--rbrh-violet-50);
+}
+.border-violet-100 {
+ border: 1px solid var(--rbrh-violet-100);
+}
+.border-violet-200 {
+ border: 1px solid var(--rbrh-violet-200);
+}
+.border-violet-300 {
+ border: 1px solid var(--rbrh-violet-300);
+}
+.border-violet-400 {
+ border: 1px solid var(--rbrh-violet-400);
+}
+.border-violet-500 {
+ border: 1px solid var(--rbrh-violet-500);
+}
+.border-violet-600 {
+ border: 1px solid var(--rbrh-violet-600);
+}
+.border-violet-700 {
+ border: 1px solid var(--rbrh-violet-700);
+}
+.border-violet-800 {
+ border: 1px solid var(--rbrh-violet-800);
+}
+.border-violet-900 {
+ border: 1px solid var(--rbrh-violet-900);
+}
diff --git a/src/styles/src/utilities/light-mode/border-yellow.css b/src/styles/src/utilities/light-mode/border-yellow.css
new file mode 100644
index 0000000..fd8ca59
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/border-yellow.css
@@ -0,0 +1,30 @@
+.border-yellow-50 {
+ border: 1px solid var(--rbrh-yellow-50);
+}
+.border-yellow-100 {
+ border: 1px solid var(--rbrh-yellow-100);
+}
+.border-yellow-200 {
+ border: 1px solid var(--rbrh-yellow-200);
+}
+.border-yellow-300 {
+ border: 1px solid var(--rbrh-yellow-300);
+}
+.border-yellow-400 {
+ border: 1px solid var(--rbrh-yellow-400);
+}
+.border-yellow-500 {
+ border: 1px solid var(--rbrh-yellow-500);
+}
+.border-yellow-600 {
+ border: 1px solid var(--rbrh-yellow-600);
+}
+.border-yellow-700 {
+ border: 1px solid var(--rbrh-yellow-700);
+}
+.border-yellow-800 {
+ border: 1px solid var(--rbrh-yellow-800);
+}
+.border-yellow-900 {
+ border: 1px solid var(--rbrh-yellow-900);
+}
diff --git a/src/styles/src/utilities/light-mode/cyan.css b/src/styles/src/utilities/light-mode/cyan.css
new file mode 100644
index 0000000..28744c7
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/cyan.css
@@ -0,0 +1,30 @@
+.cyan-50 {
+ color: var(--rbrh-cyan-50);
+}
+.cyan-100 {
+ color: var(--rbrh-cyan-100);
+}
+.cyan-200 {
+ color: var(--rbrh-cyan-200);
+}
+.cyan-300 {
+ color: var(--rbrh-cyan-300);
+}
+.cyan-400 {
+ color: var(--rbrh-cyan-400);
+}
+.cyan-500 {
+ color: var(--rbrh-cyan-500);
+}
+.cyan-600 {
+ color: var(--rbrh-cyan-600);
+}
+.cyan-700 {
+ color: var(--rbrh-cyan-700);
+}
+.cyan-800 {
+ color: var(--rbrh-cyan-800);
+}
+.cyan-900 {
+ color: var(--rbrh-cyan-900);
+}
diff --git a/src/styles/src/utilities/light-mode/gray.css b/src/styles/src/utilities/light-mode/gray.css
new file mode 100644
index 0000000..5307077
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/gray.css
@@ -0,0 +1,39 @@
+.transparent {
+ color: transparent;
+}
+.white {
+ color: var(--rbrh-white);
+}
+.black {
+ color: var(--rbrh-black);
+}
+.gray-50 {
+ color: var(--rbrh-gray-50);
+}
+.gray-100 {
+ color: var(--rbrh-gray-100);
+}
+.gray-200 {
+ color: var(--rbrh-gray-200);
+}
+.gray-300 {
+ color: var(--rbrh-gray-300);
+}
+.gray-400 {
+ color: var(--rbrh-gray-400);
+}
+.gray-500 {
+ color: var(--rbrh-gray-500);
+}
+.gray-600 {
+ color: var(--rbrh-gray-600);
+}
+.gray-700 {
+ color: var(--rbrh-gray-700);
+}
+.gray-800 {
+ color: var(--rbrh-gray-800);
+}
+.gray-900 {
+ color: var(--rbrh-gray-900);
+}
diff --git a/src/styles/src/utilities/light-mode/green.css b/src/styles/src/utilities/light-mode/green.css
new file mode 100644
index 0000000..5c756cd
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/green.css
@@ -0,0 +1,30 @@
+.green-50 {
+ color: var(--rbrh-green-50);
+}
+.green-100 {
+ color: var(--rbrh-green-100);
+}
+.green-200 {
+ color: var(--rbrh-green-200);
+}
+.green-300 {
+ color: var(--rbrh-green-300);
+}
+.green-400 {
+ color: var(--rbrh-green-400);
+}
+.green-500 {
+ color: var(--rbrh-green-500);
+}
+.green-600 {
+ color: var(--rbrh-green-600);
+}
+.green-700 {
+ color: var(--rbrh-green-700);
+}
+.green-800 {
+ color: var(--rbrh-green-800);
+}
+.green-900 {
+ color: var(--rbrh-green-900);
+}
diff --git a/src/styles/src/utilities/light-mode/indigo.css b/src/styles/src/utilities/light-mode/indigo.css
new file mode 100644
index 0000000..13b961a
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/indigo.css
@@ -0,0 +1,30 @@
+.indigo-50 {
+ color: var(--rbrh-indigo-50);
+}
+.indigo-100 {
+ color: var(--rbrh-indigo-100);
+}
+.indigo-200 {
+ color: var(--rbrh-indigo-200);
+}
+.indigo-300 {
+ color: var(--rbrh-indigo-300);
+}
+.indigo-400 {
+ color: var(--rbrh-indigo-400);
+}
+.indigo-500 {
+ color: var(--rbrh-indigo-500);
+}
+.indigo-600 {
+ color: var(--rbrh-indigo-600);
+}
+.indigo-700 {
+ color: var(--rbrh-indigo-700);
+}
+.indigo-800 {
+ color: var(--rbrh-indigo-800);
+}
+.indigo-900 {
+ color: var(--rbrh-indigo-900);
+}
diff --git a/src/styles/src/utilities/light-mode/lime.css b/src/styles/src/utilities/light-mode/lime.css
new file mode 100644
index 0000000..e4256f6
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/lime.css
@@ -0,0 +1,30 @@
+.lime-50 {
+ color: var(--rbrh-lime-50);
+}
+.lime-100 {
+ color: var(--rbrh-lime-100);
+}
+.lime-200 {
+ color: var(--rbrh-lime-200);
+}
+.lime-300 {
+ color: var(--rbrh-lime-300);
+}
+.lime-400 {
+ color: var(--rbrh-lime-400);
+}
+.lime-500 {
+ color: var(--rbrh-lime-500);
+}
+.lime-600 {
+ color: var(--rbrh-lime-600);
+}
+.lime-700 {
+ color: var(--rbrh-lime-700);
+}
+.lime-800 {
+ color: var(--rbrh-lime-800);
+}
+.lime-900 {
+ color: var(--rbrh-lime-900);
+}
diff --git a/src/styles/src/utilities/light-mode/magenta.css b/src/styles/src/utilities/light-mode/magenta.css
new file mode 100644
index 0000000..b60d779
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/magenta.css
@@ -0,0 +1,30 @@
+.magenta-50 {
+ color: var(--rbrh-magenta-50);
+}
+.magenta-100 {
+ color: var(--rbrh-magenta-100);
+}
+.magenta-200 {
+ color: var(--rbrh-magenta-200);
+}
+.magenta-300 {
+ color: var(--rbrh-magenta-300);
+}
+.magenta-400 {
+ color: var(--rbrh-magenta-400);
+}
+.magenta-500 {
+ color: var(--rbrh-magenta-500);
+}
+.magenta-600 {
+ color: var(--rbrh-magenta-600);
+}
+.magenta-700 {
+ color: var(--rbrh-magenta-700);
+}
+.magenta-800 {
+ color: var(--rbrh-magenta-800);
+}
+.magenta-900 {
+ color: var(--rbrh-magenta-900);
+}
diff --git a/src/styles/src/utilities/light-mode/orange.css b/src/styles/src/utilities/light-mode/orange.css
new file mode 100644
index 0000000..331df74
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/orange.css
@@ -0,0 +1,30 @@
+.orange-50 {
+ color: var(--rbrh-orange-50);
+}
+.orange-100 {
+ color: var(--rbrh-orange-100);
+}
+.orange-200 {
+ color: var(--rbrh-orange-200);
+}
+.orange-300 {
+ color: var(--rbrh-orange-300);
+}
+.orange-400 {
+ color: var(--rbrh-orange-400);
+}
+.orange-500 {
+ color: var(--rbrh-orange-500);
+}
+.orange-600 {
+ color: var(--rbrh-orange-600);
+}
+.orange-700 {
+ color: var(--rbrh-orange-700);
+}
+.orange-800 {
+ color: var(--rbrh-orange-800);
+}
+.orange-900 {
+ color: var(--rbrh-orange-900);
+}
diff --git a/src/styles/src/utilities/light-mode/purple.css b/src/styles/src/utilities/light-mode/purple.css
new file mode 100644
index 0000000..2f4ae74
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/purple.css
@@ -0,0 +1,30 @@
+.purple-50 {
+ color: var(--rbrh-purple-50);
+}
+.purple-100 {
+ color: var(--rbrh-purple-100);
+}
+.purple-200 {
+ color: var(--rbrh-purple-200);
+}
+.purple-300 {
+ color: var(--rbrh-purple-300);
+}
+.purple-400 {
+ color: var(--rbrh-purple-400);
+}
+.purple-500 {
+ color: var(--rbrh-purple-500);
+}
+.purple-600 {
+ color: var(--rbrh-purple-600);
+}
+.purple-700 {
+ color: var(--rbrh-purple-700);
+}
+.purple-800 {
+ color: var(--rbrh-purple-800);
+}
+.purple-900 {
+ color: var(--rbrh-purple-900);
+}
diff --git a/src/styles/src/utilities/light-mode/red.css b/src/styles/src/utilities/light-mode/red.css
new file mode 100644
index 0000000..6637aa6
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/red.css
@@ -0,0 +1,30 @@
+.red-50 {
+ color: var(--rbrh-red-50);
+}
+.red-100 {
+ color: var(--rbrh-red-100);
+}
+.red-200 {
+ color: var(--rbrh-red-200);
+}
+.red-300 {
+ color: var(--rbrh-red-300);
+}
+.red-400 {
+ color: var(--rbrh-red-400);
+}
+.red-500 {
+ color: var(--rbrh-red-500);
+}
+.red-600 {
+ color: var(--rbrh-red-600);
+}
+.red-700 {
+ color: var(--rbrh-red-700);
+}
+.red-800 {
+ color: var(--rbrh-red-800);
+}
+.red-900 {
+ color: var(--rbrh-red-900);
+}
diff --git a/src/styles/src/utilities/light-mode/sky.css b/src/styles/src/utilities/light-mode/sky.css
new file mode 100644
index 0000000..0987b35
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/sky.css
@@ -0,0 +1,30 @@
+.sky-50 {
+ color: var(--rbrh-sky-50);
+}
+.sky-100 {
+ color: var(--rbrh-sky-100);
+}
+.sky-200 {
+ color: var(--rbrh-sky-200);
+}
+.sky-300 {
+ color: var(--rbrh-sky-300);
+}
+.sky-400 {
+ color: var(--rbrh-sky-400);
+}
+.sky-500 {
+ color: var(--rbrh-sky-500);
+}
+.sky-600 {
+ color: var(--rbrh-sky-600);
+}
+.sky-700 {
+ color: var(--rbrh-sky-700);
+}
+.sky-800 {
+ color: var(--rbrh-sky-800);
+}
+.sky-900 {
+ color: var(--rbrh-sky-900);
+}
diff --git a/src/styles/src/utilities/light-mode/teal.css b/src/styles/src/utilities/light-mode/teal.css
new file mode 100644
index 0000000..f8eef6c
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/teal.css
@@ -0,0 +1,30 @@
+.teal-50 {
+ color: var(--rbrh-teal-50);
+}
+.teal-100 {
+ color: var(--rbrh-teal-100);
+}
+.teal-200 {
+ color: var(--rbrh-teal-200);
+}
+.teal-300 {
+ color: var(--rbrh-teal-300);
+}
+.teal-400 {
+ color: var(--rbrh-teal-400);
+}
+.teal-500 {
+ color: var(--rbrh-teal-500);
+}
+.teal-600 {
+ color: var(--rbrh-teal-600);
+}
+.teal-700 {
+ color: var(--rbrh-teal-700);
+}
+.teal-800 {
+ color: var(--rbrh-teal-800);
+}
+.teal-900 {
+ color: var(--rbrh-teal-900);
+}
diff --git a/src/styles/src/utilities/light-mode/violet.css b/src/styles/src/utilities/light-mode/violet.css
new file mode 100644
index 0000000..f3ab882
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/violet.css
@@ -0,0 +1,30 @@
+.violet-50 {
+ color: var(--rbrh-violet-50);
+}
+.violet-100 {
+ color: var(--rbrh-violet-100);
+}
+.violet-200 {
+ color: var(--rbrh-violet-200);
+}
+.violet-300 {
+ color: var(--rbrh-violet-300);
+}
+.violet-400 {
+ color: var(--rbrh-violet-400);
+}
+.violet-500 {
+ color: var(--rbrh-violet-500);
+}
+.violet-600 {
+ color: var(--rbrh-violet-600);
+}
+.violet-700 {
+ color: var(--rbrh-violet-700);
+}
+.violet-800 {
+ color: var(--rbrh-violet-800);
+}
+.violet-900 {
+ color: var(--rbrh-violet-900);
+}
diff --git a/src/styles/src/utilities/light-mode/yellow.css b/src/styles/src/utilities/light-mode/yellow.css
new file mode 100644
index 0000000..3ec3596
--- /dev/null
+++ b/src/styles/src/utilities/light-mode/yellow.css
@@ -0,0 +1,30 @@
+.yellow-50 {
+ color: var(--rbrh-yellow-50);
+}
+.yellow-100 {
+ color: var(--rbrh-yellow-100);
+}
+.yellow-200 {
+ color: var(--rbrh-yellow-200);
+}
+.yellow-300 {
+ color: var(--rbrh-yellow-300);
+}
+.yellow-400 {
+ color: var(--rbrh-yellow-400);
+}
+.yellow-500 {
+ color: var(--rbrh-yellow-500);
+}
+.yellow-600 {
+ color: var(--rbrh-yellow-600);
+}
+.yellow-700 {
+ color: var(--rbrh-yellow-700);
+}
+.yellow-800 {
+ color: var(--rbrh-yellow-800);
+}
+.yellow-900 {
+ color: var(--rbrh-yellow-900);
+}
diff --git a/src/styles/src/utilities/margin.css b/src/styles/src/utilities/margin.css
new file mode 100644
index 0000000..3732f28
--- /dev/null
+++ b/src/styles/src/utilities/margin.css
@@ -0,0 +1,402 @@
+.m-0 {
+ margin: 0;
+}
+.m-auto {
+ margin: auto;
+}
+.m-1 {
+ margin: var(--rbrh-spacing-1);
+}
+.m-2 {
+ margin: var(--rbrh-spacing-2);
+}
+.m-3 {
+ margin: var(--rbrh-spacing-3);
+}
+.m-4 {
+ margin: var(--rbrh-spacing-4);
+}
+.m-5 {
+ margin: var(--rbrh-spacing-5);
+}
+.m-6 {
+ margin: var(--rbrh-spacing-6);
+}
+.m-7 {
+ margin: var(--rbrh-spacing-7);
+}
+.m-8 {
+ margin: var(--rbrh-spacing-8);
+}
+.m-9 {
+ margin: var(--rbrh-spacing-9);
+}
+.m-10 {
+ margin: var(--rbrh-spacing-10);
+}
+.m-12 {
+ margin: var(--rbrh-spacing-12);
+}
+.m-14 {
+ margin: var(--rbrh-spacing-14);
+}
+.m-16 {
+ margin: var(--rbrh-spacing-16);
+}
+.m-18 {
+ margin: var(--rbrh-spacing-18);
+}
+.m-20 {
+ margin: var(--rbrh-spacing-20);
+}
+.m-24 {
+ margin: var(--rbrh-spacing-24);
+}
+.m-x-0 {
+ margin-left: 0;
+ margin-right: 0;
+}
+.m-x-auto {
+ margin-left: auto;
+ margin-right: auto;
+}
+.m-x-1 {
+ margin-left: var(--rbrh-spacing-1);
+ margin-right: var(--rbrh-spacing-1);
+}
+.m-x-2 {
+ margin-left: var(--rbrh-spacing-2);
+ margin-right: var(--rbrh-spacing-2);
+}
+.m-x-3 {
+ margin-left: var(--rbrh-spacing-3);
+ margin-right: var(--rbrh-spacing-3);
+}
+.m-x-4 {
+ margin-left: var(--rbrh-spacing-4);
+ margin-right: var(--rbrh-spacing-4);
+}
+.m-x-5 {
+ margin-left: var(--rbrh-spacing-5);
+ margin-right: var(--rbrh-spacing-5);
+}
+.m-x-6 {
+ margin-left: var(--rbrh-spacing-6);
+ margin-right: var(--rbrh-spacing-6);
+}
+.m-x-7 {
+ margin-left: var(--rbrh-spacing-7);
+ margin-right: var(--rbrh-spacing-7);
+}
+.m-x-8 {
+ margin-left: var(--rbrh-spacing-8);
+ margin-right: var(--rbrh-spacing-8);
+}
+.m-x-9 {
+ margin-left: var(--rbrh-spacing-9);
+ margin-right: var(--rbrh-spacing-9);
+}
+.m-x-10 {
+ margin-left: var(--rbrh-spacing-10);
+ margin-right: var(--rbrh-spacing-10);
+}
+.m-x-12 {
+ margin-left: var(--rbrh-spacing-12);
+ margin-right: var(--rbrh-spacing-12);
+}
+.m-x-14 {
+ margin-left: var(--rbrh-spacing-14);
+ margin-right: var(--rbrh-spacing-14);
+}
+.m-x-16 {
+ margin-left: var(--rbrh-spacing-16);
+ margin-right: var(--rbrh-spacing-16);
+}
+.m-x-18 {
+ margin-left: var(--rbrh-spacing-18);
+ margin-right: var(--rbrh-spacing-18);
+}
+.m-x-20 {
+ margin-left: var(--rbrh-spacing-20);
+ margin-right: var(--rbrh-spacing-20);
+}
+.m-x-24 {
+ margin-left: var(--rbrh-spacing-24);
+ margin-right: var(--rbrh-spacing-24);
+}
+.m-y-0 {
+ margin-top: 0;
+ margin-bottom: 0;
+}
+.m-y-auto {
+ margin-top: auto;
+ margin-bottom: auto;
+}
+.m-y-1 {
+ margin-top: var(--rbrh-spacing-1);
+ margin-bottom: var(--rbrh-spacing-1);
+}
+.m-y-2 {
+ margin-top: var(--rbrh-spacing-2);
+ margin-bottom: var(--rbrh-spacing-2);
+}
+.m-y-3 {
+ margin-top: var(--rbrh-spacing-3);
+ margin-bottom: var(--rbrh-spacing-3);
+}
+.m-y-4 {
+ margin-top: var(--rbrh-spacing-4);
+ margin-bottom: var(--rbrh-spacing-4);
+}
+.m-y-5 {
+ margin-top: var(--rbrh-spacing-5);
+ margin-bottom: var(--rbrh-spacing-5);
+}
+.m-y-6 {
+ margin-top: var(--rbrh-spacing-6);
+ margin-bottom: var(--rbrh-spacing-6);
+}
+.m-y-7 {
+ margin-top: var(--rbrh-spacing-7);
+ margin-bottom: var(--rbrh-spacing-7);
+}
+.m-y-8 {
+ margin-top: var(--rbrh-spacing-8);
+ margin-bottom: var(--rbrh-spacing-8);
+}
+.m-y-9 {
+ margin-top: var(--rbrh-spacing-9);
+ margin-bottom: var(--rbrh-spacing-9);
+}
+.m-y-10 {
+ margin-top: var(--rbrh-spacing-10);
+ margin-bottom: var(--rbrh-spacing-10);
+}
+.m-y-12 {
+ margin-top: var(--rbrh-spacing-12);
+ margin-bottom: var(--rbrh-spacing-12);
+}
+.m-y-14 {
+ margin-top: var(--rbrh-spacing-14);
+ margin-bottom: var(--rbrh-spacing-14);
+}
+.m-y-16 {
+ margin-top: var(--rbrh-spacing-16);
+ margin-bottom: var(--rbrh-spacing-16);
+}
+.m-y-18 {
+ margin-top: var(--rbrh-spacing-18);
+ margin-bottom: var(--rbrh-spacing-18);
+}
+.m-y-20 {
+ margin-top: var(--rbrh-spacing-20);
+ margin-bottom: var(--rbrh-spacing-20);
+}
+.m-y-24 {
+ margin-top: var(--rbrh-spacing-24);
+ margin-bottom: var(--rbrh-spacing-24);
+}
+.m-t-0 {
+ margin-top: 0;
+}
+.m-t-1 {
+ margin-top: var(--rbrh-spacing-1);
+}
+.m-t-2 {
+ margin-top: var(--rbrh-spacing-2);
+}
+.m-t-3 {
+ margin-top: var(--rbrh-spacing-3);
+}
+.m-t-4 {
+ margin-top: var(--rbrh-spacing-4);
+}
+.m-t-5 {
+ margin-top: var(--rbrh-spacing-5);
+}
+.m-t-6 {
+ margin-top: var(--rbrh-spacing-6);
+}
+.m-t-7 {
+ margin-top: var(--rbrh-spacing-7);
+}
+.m-t-8 {
+ margin-top: var(--rbrh-spacing-8);
+}
+.m-t-9 {
+ margin-top: var(--rbrh-spacing-9);
+}
+.m-t-10 {
+ margin-top: var(--rbrh-spacing-10);
+}
+.m-t-12 {
+ margin-top: var(--rbrh-spacing-12);
+}
+.m-t-14 {
+ margin-top: var(--rbrh-spacing-14);
+}
+.m-t-16 {
+ margin-top: var(--rbrh-spacing-16);
+}
+.m-t-18 {
+ margin-top: var(--rbrh-spacing-18);
+}
+.m-t-20 {
+ margin-top: var(--rbrh-spacing-20);
+}
+.m-t-24 {
+ margin-top: var(--rbrh-spacing-24);
+}
+.m-b-0 {
+ margin-bottom: 0;
+}
+.m-b-1 {
+ margin-bottom: var(--rbrh-spacing-1);
+}
+.m-b-2 {
+ margin-bottom: var(--rbrh-spacing-2);
+}
+.m-b-3 {
+ margin-bottom: var(--rbrh-spacing-3);
+}
+.m-b-4 {
+ margin-bottom: var(--rbrh-spacing-4);
+}
+.m-b-5 {
+ margin-bottom: var(--rbrh-spacing-5);
+}
+.m-b-6 {
+ margin-bottom: var(--rbrh-spacing-6);
+}
+.m-b-7 {
+ margin-bottom: var(--rbrh-spacing-7);
+}
+.m-b-8 {
+ margin-bottom: var(--rbrh-spacing-8);
+}
+.m-b-9 {
+ margin-bottom: var(--rbrh-spacing-9);
+}
+.m-b-10 {
+ margin-bottom: var(--rbrh-spacing-10);
+}
+.m-b-12 {
+ margin-bottom: var(--rbrh-spacing-12);
+}
+.m-b-14 {
+ margin-bottom: var(--rbrh-spacing-14);
+}
+.m-b-16 {
+ margin-bottom: var(--rbrh-spacing-16);
+}
+.m-b-18 {
+ margin-bottom: var(--rbrh-spacing-18);
+}
+.m-b-20 {
+ margin-bottom: var(--rbrh-spacing-20);
+}
+.m-b-24 {
+ margin-bottom: var(--rbrh-spacing-24);
+}
+.m-r-0 {
+ margin-right: 0;
+}
+.m-r-1 {
+ margin-right: var(--rbrh-spacing-1);
+}
+.m-r-2 {
+ margin-right: var(--rbrh-spacing-2);
+}
+.m-r-3 {
+ margin-right: var(--rbrh-spacing-3);
+}
+.m-r-4 {
+ margin-right: var(--rbrh-spacing-4);
+}
+.m-r-5 {
+ margin-right: var(--rbrh-spacing-5);
+}
+.m-r-6 {
+ margin-right: var(--rbrh-spacing-6);
+}
+.m-r-7 {
+ margin-right: var(--rbrh-spacing-7);
+}
+.m-r-8 {
+ margin-right: var(--rbrh-spacing-8);
+}
+.m-r-9 {
+ margin-right: var(--rbrh-spacing-9);
+}
+.m-r-10 {
+ margin-right: var(--rbrh-spacing-10);
+}
+.m-r-12 {
+ margin-right: var(--rbrh-spacing-12);
+}
+.m-r-14 {
+ margin-right: var(--rbrh-spacing-14);
+}
+.m-r-16 {
+ margin-right: var(--rbrh-spacing-16);
+}
+.m-r-18 {
+ margin-right: var(--rbrh-spacing-18);
+}
+.m-r-20 {
+ margin-right: var(--rbrh-spacing-20);
+}
+.m-r-24 {
+ margin-right: var(--rbrh-spacing-24);
+}
+.m-l-0 {
+ margin-left: 0;
+}
+.m-l-1 {
+ margin-left: var(--rbrh-spacing-1);
+}
+.m-l-2 {
+ margin-left: var(--rbrh-spacing-2);
+}
+.m-l-3 {
+ margin-left: var(--rbrh-spacing-3);
+}
+.m-l-4 {
+ margin-left: var(--rbrh-spacing-4);
+}
+.m-l-5 {
+ margin-left: var(--rbrh-spacing-5);
+}
+.m-l-6 {
+ margin-left: var(--rbrh-spacing-6);
+}
+.m-l-7 {
+ margin-left: var(--rbrh-spacing-7);
+}
+.m-l-8 {
+ margin-left: var(--rbrh-spacing-8);
+}
+.m-l-9 {
+ margin-left: var(--rbrh-spacing-9);
+}
+.m-l-10 {
+ margin-left: var(--rbrh-spacing-10);
+}
+.m-l-12 {
+ margin-left: var(--rbrh-spacing-12);
+}
+.m-l-14 {
+ margin-left: var(--rbrh-spacing-14);
+}
+.m-l-16 {
+ margin-left: var(--rbrh-spacing-16);
+}
+.m-l-18 {
+ margin-left: var(--rbrh-spacing-18);
+}
+.m-l-20 {
+ margin-left: var(--rbrh-spacing-20);
+}
+.m-l-24 {
+ margin-left: var(--rbrh-spacing-24);
+}
diff --git a/src/styles/src/utilities/object.css b/src/styles/src/utilities/object.css
new file mode 100644
index 0000000..f2547aa
--- /dev/null
+++ b/src/styles/src/utilities/object.css
@@ -0,0 +1,15 @@
+.object-center {
+ object-position: center;
+}
+.object-cover {
+ object-fit: cover;
+}
+.object-contain {
+ object-fit: contain;
+}
+.object-top {
+ object-position: top;
+}
+.object-bottom {
+ object-position: bottom;
+}
\ No newline at end of file
diff --git a/src/styles/src/utilities/padding.css b/src/styles/src/utilities/padding.css
new file mode 100644
index 0000000..5cf7aa1
--- /dev/null
+++ b/src/styles/src/utilities/padding.css
@@ -0,0 +1,391 @@
+.p-0 {
+ padding: 0;
+}
+.p-1 {
+ padding: var(--rbrh-spacing-1);
+}
+.p-2 {
+ padding: var(--rbrh-spacing-2);
+}
+.p-3 {
+ padding: var(--rbrh-spacing-3);
+}
+.p-4 {
+ padding: var(--rbrh-spacing-4);
+}
+.p-5 {
+ padding: var(--rbrh-spacing-5);
+}
+.p-6 {
+ padding: var(--rbrh-spacing-6);
+}
+.p-7 {
+ padding: var(--rbrh-spacing-7);
+}
+.p-8 {
+ padding: var(--rbrh-spacing-8);
+}
+.p-9 {
+ padding: var(--rbrh-spacing-9);
+}
+.p-10 {
+ padding: var(--rbrh-spacing-10);
+}
+.p-12 {
+ padding: var(--rbrh-spacing-12);
+}
+.p-14 {
+ padding: var(--rbrh-spacing-14);
+}
+.p-16 {
+ padding: var(--rbrh-spacing-16);
+}
+.p-18 {
+ padding: var(--rbrh-spacing-18);
+}
+.p-20 {
+ padding: var(--rbrh-spacing-20);
+}
+.p-24 {
+ padding: var(--rbrh-spacing-24);
+}
+.p-x-0 {
+ padding-left: 0;
+ padding-right: 0;
+}
+.p-x-1 {
+ padding-left: var(--rbrh-spacing-1);
+ padding-right: var(--rbrh-spacing-1);
+}
+.p-x-2 {
+ padding-left: var(--rbrh-spacing-2);
+ padding-right: var(--rbrh-spacing-2);
+}
+.p-x-3 {
+ padding-left: var(--rbrh-spacing-3);
+ padding-right: var(--rbrh-spacing-3);
+}
+.p-x-4 {
+ padding-left: var(--rbrh-spacing-4);
+ padding-right: var(--rbrh-spacing-4);
+}
+.p-x-5 {
+ padding-left: var(--rbrh-spacing-5);
+ padding-right: var(--rbrh-spacing-5);
+}
+.p-x-6 {
+ padding-left: var(--rbrh-spacing-6);
+ padding-right: var(--rbrh-spacing-6);
+}
+.p-x-7 {
+ padding-left: var(--rbrh-spacing-7);
+ padding-right: var(--rbrh-spacing-7);
+}
+.p-x-8 {
+ padding-left: var(--rbrh-spacing-8);
+ padding-right: var(--rbrh-spacing-8);
+}
+.p-x-9 {
+ padding-left: var(--rbrh-spacing-9);
+ padding-right: var(--rbrh-spacing-9);
+}
+.p-x-10 {
+ padding-left: var(--rbrh-spacing-10);
+ padding-right: var(--rbrh-spacing-10);
+}
+.p-x-12 {
+ padding-left: var(--rbrh-spacing-12);
+ padding-right: var(--rbrh-spacing-12);
+}
+.p-x-14 {
+ padding-left: var(--rbrh-spacing-14);
+ padding-right: var(--rbrh-spacing-14);
+}
+.p-x-16 {
+ padding-left: var(--rbrh-spacing-16);
+ padding-right: var(--rbrh-spacing-16);
+}
+.p-x-18 {
+ padding-left: var(--rbrh-spacing-18);
+ padding-right: var(--rbrh-spacing-18);
+}
+.p-x-20 {
+ padding-left: var(--rbrh-spacing-20);
+ padding-right: var(--rbrh-spacing-20);
+}
+.p-x-24 {
+ padding-left: var(--rbrh-spacing-24);
+ padding-right: var(--rbrh-spacing-24);
+}
+.p-y-0 {
+ padding-top: 0;
+ padding-bottom: 0;
+}
+.p-y-1 {
+ padding-top: var(--rbrh-spacing-1);
+ padding-bottom: var(--rbrh-spacing-1);
+}
+.p-y-2 {
+ padding-top: var(--rbrh-spacing-2);
+ padding-bottom: var(--rbrh-spacing-2);
+}
+.p-y-3 {
+ padding-top: var(--rbrh-spacing-3);
+ padding-bottom: var(--rbrh-spacing-3);
+}
+.p-y-4 {
+ padding-top: var(--rbrh-spacing-4);
+ padding-bottom: var(--rbrh-spacing-4);
+}
+.p-y-5 {
+ padding-top: var(--rbrh-spacing-5);
+ padding-bottom: var(--rbrh-spacing-5);
+}
+.p-y-6 {
+ padding-top: var(--rbrh-spacing-6);
+ padding-bottom: var(--rbrh-spacing-6);
+}
+.p-y-7 {
+ padding-top: var(--rbrh-spacing-7);
+ padding-bottom: var(--rbrh-spacing-7);
+}
+.p-y-8 {
+ padding-top: var(--rbrh-spacing-8);
+ padding-bottom: var(--rbrh-spacing-8);
+}
+.p-y-9 {
+ padding-top: var(--rbrh-spacing-9);
+ padding-bottom: var(--rbrh-spacing-9);
+}
+.p-y-10 {
+ padding-top: var(--rbrh-spacing-10);
+ padding-bottom: var(--rbrh-spacing-10);
+}
+.p-y-12 {
+ padding-top: var(--rbrh-spacing-12);
+ padding-bottom: var(--rbrh-spacing-12);
+}
+.p-y-14 {
+ padding-top: var(--rbrh-spacing-14);
+ padding-bottom: var(--rbrh-spacing-14);
+}
+.p-y-16 {
+ padding-top: var(--rbrh-spacing-16);
+ padding-bottom: var(--rbrh-spacing-16);
+}
+.p-y-18 {
+ padding-top: var(--rbrh-spacing-18);
+ padding-bottom: var(--rbrh-spacing-18);
+}
+.p-y-20 {
+ padding-top: var(--rbrh-spacing-20);
+ padding-bottom: var(--rbrh-spacing-20);
+}
+.p-y-24 {
+ padding-top: var(--rbrh-spacing-24);
+ padding-bottom: var(--rbrh-spacing-24);
+}
+.p-t-0 {
+ padding-top: 0;
+}
+.p-t-1 {
+ padding-top: var(--rbrh-spacing-1);
+}
+.p-t-2 {
+ padding-top: var(--rbrh-spacing-2);
+}
+.p-t-3 {
+ padding-top: var(--rbrh-spacing-3);
+}
+.p-t-4 {
+ padding-top: var(--rbrh-spacing-4);
+}
+.p-t-5 {
+ padding-top: var(--rbrh-spacing-5);
+}
+.p-t-6 {
+ padding-top: var(--rbrh-spacing-6);
+}
+.p-t-7 {
+ padding-top: var(--rbrh-spacing-7);
+}
+.p-t-8 {
+ padding-top: var(--rbrh-spacing-8);
+}
+.p-t-9 {
+ padding-top: var(--rbrh-spacing-9);
+}
+.p-t-10 {
+ padding-top: var(--rbrh-spacing-10);
+}
+.p-t-12 {
+ padding-top: var(--rbrh-spacing-12);
+}
+.p-t-14 {
+ padding-top: var(--rbrh-spacing-14);
+}
+.p-t-16 {
+ padding-top: var(--rbrh-spacing-16);
+}
+.p-t-18 {
+ padding-top: var(--rbrh-spacing-18);
+}
+.p-t-20 {
+ padding-top: var(--rbrh-spacing-20);
+}
+.p-t-24 {
+ padding-top: var(--rbrh-spacing-24);
+}
+.p-b-0 {
+ padding-bottom: 0;
+}
+.p-b-1 {
+ padding-bottom: var(--rbrh-spacing-1);
+}
+.p-b-2 {
+ padding-bottom: var(--rbrh-spacing-2);
+}
+.p-b-3 {
+ padding-bottom: var(--rbrh-spacing-3);
+}
+.p-b-4 {
+ padding-bottom: var(--rbrh-spacing-4);
+}
+.p-b-5 {
+ padding-bottom: var(--rbrh-spacing-5);
+}
+.p-b-6 {
+ padding-bottom: var(--rbrh-spacing-6);
+}
+.p-b-7 {
+ padding-bottom: var(--rbrh-spacing-7);
+}
+.p-b-8 {
+ padding-bottom: var(--rbrh-spacing-8);
+}
+.p-b-9 {
+ padding-bottom: var(--rbrh-spacing-9);
+}
+.p-b-10 {
+ padding-bottom: var(--rbrh-spacing-10);
+}
+.p-b-12 {
+ padding-bottom: var(--rbrh-spacing-12);
+}
+.p-b-14 {
+ padding-bottom: var(--rbrh-spacing-14);
+}
+.p-b-16 {
+ padding-bottom: var(--rbrh-spacing-16);
+}
+.p-b-18 {
+ padding-bottom: var(--rbrh-spacing-18);
+}
+.p-b-20 {
+ padding-bottom: var(--rbrh-spacing-20);
+}
+.p-b-24 {
+ padding-bottom: var(--rbrh-spacing-24);
+}
+.p-r-0 {
+ padding-right: 0;
+}
+.p-r-1 {
+ padding-right: var(--rbrh-spacing-1);
+}
+.p-r-2 {
+ padding-right: var(--rbrh-spacing-2);
+}
+.p-r-3 {
+ padding-right: var(--rbrh-spacing-3);
+}
+.p-r-4 {
+ padding-right: var(--rbrh-spacing-4);
+}
+.p-r-5 {
+ padding-right: var(--rbrh-spacing-5);
+}
+.p-r-6 {
+ padding-right: var(--rbrh-spacing-6);
+}
+.p-r-7 {
+ padding-right: var(--rbrh-spacing-7);
+}
+.p-r-8 {
+ padding-right: var(--rbrh-spacing-8);
+}
+.p-r-9 {
+ padding-right: var(--rbrh-spacing-9);
+}
+.p-r-10 {
+ padding-right: var(--rbrh-spacing-10);
+}
+.p-r-12 {
+ padding-right: var(--rbrh-spacing-12);
+}
+.p-r-14 {
+ padding-right: var(--rbrh-spacing-14);
+}
+.p-r-16 {
+ padding-right: var(--rbrh-spacing-16);
+}
+.p-r-18 {
+ padding-right: var(--rbrh-spacing-18);
+}
+.p-r-20 {
+ padding-right: var(--rbrh-spacing-20);
+}
+.p-r-24 {
+ padding-right: var(--rbrh-spacing-24);
+}
+.p-l-0 {
+ padding-left: 0;
+}
+.p-l-1 {
+ padding-left: var(--rbrh-spacing-1);
+}
+.p-l-2 {
+ padding-left: var(--rbrh-spacing-2);
+}
+.p-l-3 {
+ padding-left: var(--rbrh-spacing-3);
+}
+.p-l-4 {
+ padding-left: var(--rbrh-spacing-4);
+}
+.p-l-5 {
+ padding-left: var(--rbrh-spacing-5);
+}
+.p-l-6 {
+ padding-left: var(--rbrh-spacing-6);
+}
+.p-l-7 {
+ padding-left: var(--rbrh-spacing-7);
+}
+.p-l-8 {
+ padding-left: var(--rbrh-spacing-8);
+}
+.p-l-9 {
+ padding-left: var(--rbrh-spacing-9);
+}
+.p-l-10 {
+ padding-left: var(--rbrh-spacing-10);
+}
+.p-l-12 {
+ padding-left: var(--rbrh-spacing-12);
+}
+.p-l-14 {
+ padding-left: var(--rbrh-spacing-14);
+}
+.p-l-16 {
+ padding-left: var(--rbrh-spacing-16);
+}
+.p-l-18 {
+ padding-left: var(--rbrh-spacing-18);
+}
+.p-l-20 {
+ padding-left: var(--rbrh-spacing-20);
+}
+.p-l-24 {
+ padding-left: var(--rbrh-spacing-24);
+}
\ No newline at end of file
diff --git a/src/styles/src/utilities/responsive-container.css b/src/styles/src/utilities/responsive-container.css
new file mode 100644
index 0000000..402df81
--- /dev/null
+++ b/src/styles/src/utilities/responsive-container.css
@@ -0,0 +1,43 @@
+@mixin screen-xs-up {
+ .xs-container-sm {
+ max-width: var(--rbrh-screen-sm);
+ }
+ .xs-container-md {
+ max-width: var(--rbrh-screen-md);
+ }
+ .xs-container-lg {
+ max-width: var(--rbrh-screen-lg);
+ }
+ .xs-container-xl {
+ max-width: var(--rbrh-screen-xl);
+ }
+}
+@mixin screen-md-up {
+ .md-container-sm {
+ max-width: var(--rbrh-screen-sm);
+ }
+ .md-container-md {
+ max-width: var(--rbrh-screen-md);
+ }
+ .md-container-lg {
+ max-width: var(--rbrh-screen-lg);
+ }
+ .md-container-xl {
+ max-width: var(--rbrh-screen-xl);
+ }
+}
+@mixin screen-lg-up {
+ .lg-container-sm {
+ max-width: var(--rbrh-screen-sm);
+ }
+ .lg-container-md {
+ max-width: var(--rbrh-screen-md);
+ }
+ .lg-container-lg {
+ max-width: var(--rbrh-screen-lg);
+ }
+ .lg-container-xl {
+ max-width: var(--rbrh-screen-xl);
+ }
+}
+
diff --git a/src/styles/src/utilities/responsive-display.css b/src/styles/src/utilities/responsive-display.css
new file mode 100644
index 0000000..5332592
--- /dev/null
+++ b/src/styles/src/utilities/responsive-display.css
@@ -0,0 +1,104 @@
+@mixin screen-xs-up {
+ .xs-d-none {
+ display: none;
+ }
+ .xs-block {
+ display: block;
+ }
+ .xs-flex {
+ display: flex;
+ }
+ .xs-list-item {
+ display: list-item;
+ }
+ .xs-table {
+ display: table;
+ }
+ .xs-inline-block {
+ display: inline-block;
+ }
+ .xs-inline-flex {
+ display: inline-flex;
+ }
+ .xs-grid {
+ display: grid;
+ }
+}
+@mixin screen-sm-up {
+ .sm-d-none {
+ display: none;
+ }
+ .sm-block {
+ display: block;
+ }
+ .sm-flex {
+ display: flex;
+ }
+ .sm-list-item {
+ display: list-item;
+ }
+ .sm-table {
+ display: table;
+ }
+ .sm-inline-block {
+ display: inline-block;
+ }
+ .sm-inline-flex {
+ display: inline-flex;
+ }
+ .sm-grid {
+ display: grid;
+ }
+}
+@mixin screen-md-up {
+ .md-d-none {
+ display: none;
+ }
+ .md-block {
+ display: block;
+ }
+ .md-flex {
+ display: flex;
+ }
+ .md-list-item {
+ display: list-item;
+ }
+ .md-table {
+ display: table;
+ }
+ .md-inline-block {
+ display: inline-block;
+ }
+ .md-inline-flex {
+ display: inline-flex;
+ }
+ .md-grid {
+ display: grid;
+ }
+}
+@mixin screen-lg-up {
+ .lg-d-none {
+ display: none;
+ }
+ .lg-block {
+ display: block;
+ }
+ .lg-flex {
+ display: flex;
+ }
+ .lg-list-item {
+ display: list-item;
+ }
+ .lg-table {
+ display: table;
+ }
+ .lg-inline-block {
+ display: inline-block;
+ }
+ .lg-inline-flex {
+ display: inline-flex;
+ }
+ .lg-grid {
+ display: grid;
+ }
+}
\ No newline at end of file
diff --git a/src/styles/src/utilities/responsive-flexbox.css b/src/styles/src/utilities/responsive-flexbox.css
new file mode 100644
index 0000000..a668ce3
--- /dev/null
+++ b/src/styles/src/utilities/responsive-flexbox.css
@@ -0,0 +1,258 @@
+@mixin screen-xs-up {
+ .xs-flex-row {
+ flex-direction: row;
+ }
+ .xs-flex-column {
+ flex-direction: column;
+ }
+ .xs-flex-wrap {
+ flex-wrap: wrap;
+ }
+ .xs-flex-no-wrap {
+ flex-wrap: nowrap;
+ }
+ .xs-items-start {
+ align-items: flex-start;
+ }
+ .xs-items-end {
+ align-items: flex-end;
+ }
+ .xs-items-center {
+ align-items: center;
+ }
+ .xs-items-baseline {
+ align-items: baseline;
+ }
+ .xs-items-stretch {
+ align-items: stretch;
+ }
+ .xs-self-auto {
+ align-self: auto;
+ }
+ .xs-self-start {
+ align-self: flex-start;
+ }
+ .xs-self-end {
+ align-self: flex-end;
+ }
+ .xs-self-center {
+ align-self: center;
+ }
+ .xs-self-stretch {
+ align-self: stretch;
+ }
+ .xs-content-center {
+ align-content: center;
+ }
+ .xs-content-start {
+ align-content: flex-start;
+ }
+ .xs-content-end {
+ align-content: flex-end;
+ }
+ .xs-content-between {
+ align-content: space-between;
+ }
+ .xs-content-around {
+ align-content: space-around;
+ }
+ .xs-justify-items-start {
+ justify-items: flex-start;
+ }
+ .xs-justify-items-end {
+ justify-items: end;
+ }
+ .xs-justify-items-center {
+ justify-items: center;
+ }
+ .xs-justify-items-stretch {
+ justify-items: stretch;
+ }
+ .xs-justify-start {
+ justify-content: flex-start;
+ }
+ .xs-justify-end {
+ justify-content: flex-end;
+ }
+ .xs-justify-center {
+ justify-content: center;
+ }
+ .xs-justify-between {
+ justify-content: space-between;
+ }
+ .xs-justify-around {
+ justify-content: space-around;
+ }
+}
+@mixin screen-md-up {
+ .md-flex-row {
+ flex-direction: row;
+ }
+ .md-flex-column {
+ flex-direction: column;
+ }
+ .md-flex-wrap {
+ flex-wrap: wrap;
+ }
+ .md-flex-no-wrap {
+ flex-wrap: nowrap;
+ }
+ .md-items-start {
+ align-items: flex-start;
+ }
+ .md-items-end {
+ align-items: flex-end;
+ }
+ .md-items-center {
+ align-items: center;
+ }
+ .md-items-baseline {
+ align-items: baseline;
+ }
+ .md-items-stretch {
+ align-items: stretch;
+ }
+ .md-self-auto {
+ align-self: auto;
+ }
+ .md-self-start {
+ align-self: flex-start;
+ }
+ .md-self-end {
+ align-self: flex-end;
+ }
+ .md-self-center {
+ align-self: center;
+ }
+ .md-self-stretch {
+ align-self: stretch;
+ }
+ .md-content-center {
+ align-content: center;
+ }
+ .md-content-start {
+ align-content: flex-start;
+ }
+ .md-content-end {
+ align-content: flex-end;
+ }
+ .md-content-between {
+ align-content: space-between;
+ }
+ .md-content-around {
+ align-content: space-around;
+ }
+ .md-justify-items-start {
+ justify-items: flex-start;
+ }
+ .md-justify-items-end {
+ justify-items: end;
+ }
+ .md-justify-items-center {
+ justify-items: center;
+ }
+ .md-justify-items-stretch {
+ justify-items: stretch;
+ }
+ .md-justify-start {
+ justify-content: flex-start;
+ }
+ .md-justify-end {
+ justify-content: flex-end;
+ }
+ .md-justify-center {
+ justify-content: center;
+ }
+ .md-justify-between {
+ justify-content: space-between;
+ }
+ .md-justify-around {
+ justify-content: space-around;
+ }
+}
+@mixin screen-lg-up {
+ .lg-flex-row {
+ flex-direction: row;
+ }
+ .lg-flex-column {
+ flex-direction: column;
+ }
+ .lg-flex-wrap {
+ flex-wrap: wrap;
+ }
+ .lg-flex-no-wrap {
+ flex-wrap: nowrap;
+ }
+ .lg-items-start {
+ align-items: flex-start;
+ }
+ .lg-items-end {
+ align-items: flex-end;
+ }
+ .lg-items-center {
+ align-items: center;
+ }
+ .lg-items-baseline {
+ align-items: baseline;
+ }
+ .lg-items-stretch {
+ align-items: stretch;
+ }
+ .lg-self-auto {
+ align-self: auto;
+ }
+ .lg-self-start {
+ align-self: flex-start;
+ }
+ .lg-self-end {
+ align-self: flex-end;
+ }
+ .lg-self-center {
+ align-self: center;
+ }
+ .lg-self-stretch {
+ align-self: stretch;
+ }
+ .lg-content-center {
+ align-content: center;
+ }
+ .lg-content-start {
+ align-content: flex-start;
+ }
+ .lg-content-end {
+ align-content: flex-end;
+ }
+ .lg-content-between {
+ align-content: space-between;
+ }
+ .lg-content-around {
+ align-content: space-around;
+ }
+ .lg-justify-items-start {
+ justify-items: flex-start;
+ }
+ .lg-justify-items-end {
+ justify-items: end;
+ }
+ .lg-justify-items-center {
+ justify-items: center;
+ }
+ .lg-justify-items-stretch {
+ justify-items: stretch;
+ }
+ .lg-justify-start {
+ justify-content: flex-start;
+ }
+ .lg-justify-end {
+ justify-content: flex-end;
+ }
+ .lg-justify-center {
+ justify-content: center;
+ }
+ .lg-justify-between {
+ justify-content: space-between;
+ }
+ .lg-justify-around {
+ justify-content: space-around;
+ }
+}
\ No newline at end of file
diff --git a/src/styles/src/utilities/responsive-grid.css b/src/styles/src/utilities/responsive-grid.css
new file mode 100644
index 0000000..cbbb172
--- /dev/null
+++ b/src/styles/src/utilities/responsive-grid.css
@@ -0,0 +1,920 @@
+@mixin screen-xs-up {
+ .xs-grid-auto-flow-col {
+ grid-auto-flow: column;
+ }
+ .xs-grid-auto-flow-row {
+ grid-auto-flow: row;
+ }
+ .xs-grid-cols-none {
+ grid-template-columns: none;
+ }
+ .xs-grid-cols-1 {
+ grid-template-columns: repeat(1, auto);
+ }
+ .xs-grid-cols-2 {
+ grid-template-columns: repeat(2, auto);
+ }
+ .xs-grid-cols-3 {
+ grid-template-columns: repeat(3, auto);
+ }
+ .xs-grid-cols-4 {
+ grid-template-columns: repeat(4, auto);
+ }
+ .xs-grid-cols-5 {
+ grid-template-columns: repeat(5, auto);
+ }
+ .xs-grid-cols-6 {
+ grid-template-columns: repeat(6, auto);
+ }
+ .xs-grid-cols-fr-1 {
+ grid-template-columns: repeat(1, 1fr);
+ }
+ .xs-grid-cols-fr-2 {
+ grid-template-columns: repeat(2, 1fr);
+ }
+ .xs-grid-cols-fr-3 {
+ grid-template-columns: repeat(3, 1fr);
+ }
+ .xs-grid-cols-fr-4 {
+ grid-template-columns: repeat(4, 1fr);
+ }
+ .xs-grid-cols-fr-5 {
+ grid-template-columns: repeat(5, 1fr);
+ }
+ .xs-grid-cols-fr-6 {
+ grid-template-columns: repeat(6, 1fr);
+ }
+ .xs-grid-rows-none {
+ grid-template-rows: none;
+ }
+ .xs-grid-rows-1 {
+ grid-template-rows: repeat(1, auto);
+ }
+ .xs-grid-rows-2 {
+ grid-template-rows: repeat(2, auto);
+ }
+ .xs-grid-rows-3 {
+ grid-template-rows: repeat(3, auto);
+ }
+ .xs-grid-rows-4 {
+ grid-template-rows: repeat(4, auto);
+ }
+ .xs-grid-rows-5 {
+ grid-template-rows: repeat(5, auto);
+ }
+ .xs-grid-rows-6 {
+ grid-template-rows: repeat(6, auto);
+ }
+ .xs-col-span-1 {
+ grid-column: span 1 / span 1;
+ }
+ .xs-col-span-2 {
+ grid-column: span 2 / span 2;
+ }
+ .xs-col-span-3 {
+ grid-column: span 4 / span 4;
+ }
+ .xs-col-span-4 {
+ grid-column: span 4 / span 4;
+ }
+ .xs-col-span-5 {
+ grid-column: span 5 / span 5;
+ }
+ .xs-col-span-6 {
+ grid-column: span 6 / span 6;
+ }
+ .xs-row-span-1 {
+ grid-row: span 1 / span 1;
+ }
+ .xs-row-span-2 {
+ grid-row: span 2 / span 2;
+ }
+ .xs-row-span-3 {
+ grid-row: span 4 / span 4;
+ }
+ .xs-row-span-4 {
+ grid-row: span 4 / span 4;
+ }
+ .xs-row-span-5 {
+ grid-row: span 5 / span 5;
+ }
+ .xs-row-span-6 {
+ grid-row: span 6 / span 6;
+ }
+ .xs-gap-0 {
+ gap: 0;
+ grid-gap: 0;
+ }
+ .xs-gap-1 {
+ gap: var(--rbrh-spacing-1);
+ grid-gap: var(--rbrh-spacing-1);
+ }
+ .xs-gap-2 {
+ gap: var(--rbrh-spacing-2);
+ grid-gap: var(--rbrh-spacing-2);
+ }
+ .xs-gap-3 {
+ gap: var(--rbrh-spacing-3);
+ grid-gap: var(--rbrh-spacing-3);
+ }
+ .xs-gap-4 {
+ gap: var(--rbrh-spacing-4);
+ grid-gap: var(--rbrh-spacing-4);
+ }
+ .xs-gap-5 {
+ gap: var(--rbrh-spacing-5);
+ grid-gap: var(--rbrh-spacing-5);
+ }
+ .xs-gap-6 {
+ gap: var(--rbrh-spacing-6);
+ grid-gap: var(--rbrh-spacing-6);
+ }
+ .xs-gap-7 {
+ gap: var(--rbrh-spacing-7);
+ grid-gap: var(--rbrh-spacing-7);
+ }
+ .xs-gap-8 {
+ gap: var(--rbrh-spacing-8);
+ grid-gap: var(--rbrh-spacing-8);
+ }
+ .xs-gap-9 {
+ gap: var(--rbrh-spacing-9);
+ grid-gap: var(--rbrh-spacing-9);
+ }
+ .xs-gap-10 {
+ gap: var(--rbrh-spacing-10);
+ grid-gap: var(--rbrh-spacing-10);
+ }
+ .xs-gap-x-1 {
+ column-gap: var(--rbrh-spacing-1);
+ }
+ .xs-gap-x-2 {
+ column-gap: var(--rbrh-spacing-2);
+ }
+ .xs-gap-x-3 {
+ column-gap: var(--rbrh-spacing-3);
+ }
+ .xs-gap-x-4 {
+ column-gap: var(--rbrh-spacing-4);
+ }
+ .xs-gap-x-5 {
+ column-gap: var(--rbrh-spacing-5);
+ }
+ .xs-gap-x-6 {
+ column-gap: var(--rbrh-spacing-6);
+ }
+ .xs-gap-y-1 {
+ row-gap: var(--rbrh-spacing-1);
+ }
+ .xs-gap-y-2 {
+ row-gap: var(--rbrh-spacing-2);
+ }
+ .xs-gap-y-3 {
+ row-gap: var(--rbrh-spacing-3);
+ }
+ .xs-gap-y-4 {
+ row-gap: var(--rbrh-spacing-4);
+ }
+ .xs-gap-y-5 {
+ row-gap: var(--rbrh-spacing-5);
+ }
+ .xs-gap-y-6 {
+ row-gap: var(--rbrh-spacing-6);
+ }
+}
+@mixin screen-sm-up {
+ .sm-grid-auto-flow-col {
+ grid-auto-flow: column;
+ }
+ .sm-grid-auto-flow-row {
+ grid-auto-flow: row;
+ }
+ .sm-grid-cols-none {
+ grid-template-columns: none;
+ }
+ .sm-grid-cols-1 {
+ grid-template-columns: repeat(1, auto);
+ }
+ .sm-grid-cols-2 {
+ grid-template-columns: repeat(2, auto);
+ }
+ .sm-grid-cols-3 {
+ grid-template-columns: repeat(3, auto);
+ }
+ .sm-grid-cols-4 {
+ grid-template-columns: repeat(4, auto);
+ }
+ .sm-grid-cols-5 {
+ grid-template-columns: repeat(5, auto);
+ }
+ .sm-grid-cols-6 {
+ grid-template-columns: repeat(6, auto);
+ }
+ .sm-grid-cols-fr-1 {
+ grid-template-columns: repeat(1, 1fr);
+ }
+ .sm-grid-cols-fr-2 {
+ grid-template-columns: repeat(2, 1fr);
+ }
+ .sm-grid-cols-fr-3 {
+ grid-template-columns: repeat(3, 1fr);
+ }
+ .sm-grid-cols-fr-4 {
+ grid-template-columns: repeat(4, 1fr);
+ }
+ .sm-grid-cols-fr-5 {
+ grid-template-columns: repeat(5, 1fr);
+ }
+ .sm-grid-cols-fr-6 {
+ grid-template-columns: repeat(6, 1fr);
+ }
+ .sm-grid-rows-none {
+ grid-template-rows: none;
+ }
+ .sm-grid-rows-1 {
+ grid-template-rows: repeat(1, auto);
+ }
+ .sm-grid-rows-2 {
+ grid-template-rows: repeat(2, auto);
+ }
+ .sm-grid-rows-3 {
+ grid-template-rows: repeat(3, auto);
+ }
+ .sm-grid-rows-4 {
+ grid-template-rows: repeat(4, auto);
+ }
+ .sm-grid-rows-5 {
+ grid-template-rows: repeat(5, auto);
+ }
+ .sm-grid-rows-6 {
+ grid-template-rows: repeat(6, auto);
+ }
+ .sm-col-span-1 {
+ grid-column: span 1 / span 1;
+ }
+ .sm-col-span-2 {
+ grid-column: span 2 / span 2;
+ }
+ .sm-col-span-3 {
+ grid-column: span 4 / span 4;
+ }
+ .sm-col-span-4 {
+ grid-column: span 4 / span 4;
+ }
+ .sm-col-span-5 {
+ grid-column: span 5 / span 5;
+ }
+ .sm-col-span-6 {
+ grid-column: span 6 / span 6;
+ }
+ .sm-row-span-1 {
+ grid-row: span 1 / span 1;
+ }
+ .sm-row-span-2 {
+ grid-row: span 2 / span 2;
+ }
+ .sm-row-span-3 {
+ grid-row: span 4 / span 4;
+ }
+ .sm-row-span-4 {
+ grid-row: span 4 / span 4;
+ }
+ .sm-row-span-5 {
+ grid-row: span 5 / span 5;
+ }
+ .sm-row-span-6 {
+ grid-row: span 6 / span 6;
+ }
+ .sm-gap-0 {
+ gap: 0;
+ grid-gap: 0;
+ }
+ .sm-gap-1 {
+ gap: var(--rbrh-spacing-1);
+ grid-gap: var(--rbrh-spacing-1);
+ }
+ .sm-gap-2 {
+ gap: var(--rbrh-spacing-2);
+ grid-gap: var(--rbrh-spacing-2);
+ }
+ .sm-gap-3 {
+ gap: var(--rbrh-spacing-3);
+ grid-gap: var(--rbrh-spacing-3);
+ }
+ .sm-gap-4 {
+ gap: var(--rbrh-spacing-4);
+ grid-gap: var(--rbrh-spacing-4);
+ }
+ .sm-gap-5 {
+ gap: var(--rbrh-spacing-5);
+ grid-gap: var(--rbrh-spacing-5);
+ }
+ .sm-gap-6 {
+ gap: var(--rbrh-spacing-6);
+ grid-gap: var(--rbrh-spacing-6);
+ }
+ .sm-gap-7 {
+ gap: var(--rbrh-spacing-7);
+ grid-gap: var(--rbrh-spacing-7);
+ }
+ .sm-gap-8 {
+ gap: var(--rbrh-spacing-8);
+ grid-gap: var(--rbrh-spacing-8);
+ }
+ .sm-gap-9 {
+ gap: var(--rbrh-spacing-9);
+ grid-gap: var(--rbrh-spacing-9);
+ }
+ .sm-gap-10 {
+ gap: var(--rbrh-spacing-10);
+ grid-gap: var(--rbrh-spacing-10);
+ }
+ .sm-gap-x-1 {
+ column-gap: var(--rbrh-spacing-1);
+ }
+ .sm-gap-x-2 {
+ column-gap: var(--rbrh-spacing-2);
+ }
+ .sm-gap-x-3 {
+ column-gap: var(--rbrh-spacing-3);
+ }
+ .sm-gap-x-4 {
+ column-gap: var(--rbrh-spacing-4);
+ }
+ .sm-gap-x-5 {
+ column-gap: var(--rbrh-spacing-5);
+ }
+ .sm-gap-x-6 {
+ column-gap: var(--rbrh-spacing-6);
+ }
+ .sm-gap-y-1 {
+ row-gap: var(--rbrh-spacing-1);
+ }
+ .sm-gap-y-2 {
+ row-gap: var(--rbrh-spacing-2);
+ }
+ .sm-gap-y-3 {
+ row-gap: var(--rbrh-spacing-3);
+ }
+ .sm-gap-y-4 {
+ row-gap: var(--rbrh-spacing-4);
+ }
+ .sm-gap-y-5 {
+ row-gap: var(--rbrh-spacing-5);
+ }
+ .sm-gap-y-6 {
+ row-gap: var(--rbrh-spacing-6);
+ }
+}
+@mixin screen-md-up {
+ .md-grid-auto-flow-col {
+ grid-auto-flow: column;
+ }
+ .md-grid-auto-flow-row {
+ grid-auto-flow: row;
+ }
+ .md-grid-cols-none {
+ grid-template-columns: none;
+ }
+ .md-grid-cols-1 {
+ grid-template-columns: repeat(1, auto);
+ }
+ .md-grid-cols-2 {
+ grid-template-columns: repeat(2, auto);
+ }
+ .md-grid-cols-3 {
+ grid-template-columns: repeat(3, auto);
+ }
+ .md-grid-cols-4 {
+ grid-template-columns: repeat(4, auto);
+ }
+ .md-grid-cols-5 {
+ grid-template-columns: repeat(5, auto);
+ }
+ .md-grid-cols-6 {
+ grid-template-columns: repeat(6, auto);
+ }
+ .md-grid-cols-fr-1 {
+ grid-template-columns: repeat(1, 1fr);
+ }
+ .md-grid-cols-fr-2 {
+ grid-template-columns: repeat(2, 1fr);
+ }
+ .md-grid-cols-fr-3 {
+ grid-template-columns: repeat(3, 1fr);
+ }
+ .md-grid-cols-fr-4 {
+ grid-template-columns: repeat(4, 1fr);
+ }
+ .md-grid-cols-fr-5 {
+ grid-template-columns: repeat(5, 1fr);
+ }
+ .md-grid-cols-fr-6 {
+ grid-template-columns: repeat(6, 1fr);
+ }
+ .md-grid-rows-none {
+ grid-template-rows: none;
+ }
+ .md-grid-rows-1 {
+ grid-template-rows: repeat(1, auto);
+ }
+ .md-grid-rows-2 {
+ grid-template-rows: repeat(2, auto);
+ }
+ .md-grid-rows-3 {
+ grid-template-rows: repeat(3, auto);
+ }
+ .md-grid-rows-4 {
+ grid-template-rows: repeat(4, auto);
+ }
+ .md-grid-rows-5 {
+ grid-template-rows: repeat(5, auto);
+ }
+ .md-grid-rows-6 {
+ grid-template-rows: repeat(6, auto);
+ }
+ .md-col-span-1 {
+ grid-column: span 1 / span 1;
+ }
+ .md-col-span-2 {
+ grid-column: span 2 / span 2;
+ }
+ .md-col-span-3 {
+ grid-column: span 4 / span 4;
+ }
+ .md-col-span-4 {
+ grid-column: span 4 / span 4;
+ }
+ .md-col-span-5 {
+ grid-column: span 5 / span 5;
+ }
+ .md-col-span-6 {
+ grid-column: span 6 / span 6;
+ }
+ .md-row-span-1 {
+ grid-row: span 1 / span 1;
+ }
+ .md-row-span-2 {
+ grid-row: span 2 / span 2;
+ }
+ .md-row-span-3 {
+ grid-row: span 4 / span 4;
+ }
+ .md-row-span-4 {
+ grid-row: span 4 / span 4;
+ }
+ .md-row-span-5 {
+ grid-row: span 5 / span 5;
+ }
+ .md-row-span-6 {
+ grid-row: span 6 / span 6;
+ }
+ .md-gap-0 {
+ gap: 0;
+ grid-gap: 0;
+ }
+ .md-gap-1 {
+ gap: var(--rbrh-spacing-1);
+ grid-gap: var(--rbrh-spacing-1);
+ }
+ .md-gap-2 {
+ gap: var(--rbrh-spacing-2);
+ grid-gap: var(--rbrh-spacing-2);
+ }
+ .md-gap-3 {
+ gap: var(--rbrh-spacing-3);
+ grid-gap: var(--rbrh-spacing-3);
+ }
+ .md-gap-4 {
+ gap: var(--rbrh-spacing-4);
+ grid-gap: var(--rbrh-spacing-4);
+ }
+ .md-gap-5 {
+ gap: var(--rbrh-spacing-5);
+ grid-gap: var(--rbrh-spacing-5);
+ }
+ .md-gap-6 {
+ gap: var(--rbrh-spacing-6);
+ grid-gap: var(--rbrh-spacing-6);
+ }
+ .md-gap-7 {
+ gap: var(--rbrh-spacing-7);
+ grid-gap: var(--rbrh-spacing-7);
+ }
+ .md-gap-8 {
+ gap: var(--rbrh-spacing-8);
+ grid-gap: var(--rbrh-spacing-8);
+ }
+ .md-gap-9 {
+ gap: var(--rbrh-spacing-9);
+ grid-gap: var(--rbrh-spacing-9);
+ }
+ .md-gap-10 {
+ gap: var(--rbrh-spacing-10);
+ grid-gap: var(--rbrh-spacing-10);
+ }
+ .md-gap-x-1 {
+ column-gap: var(--rbrh-spacing-1);
+ }
+ .md-gap-x-2 {
+ column-gap: var(--rbrh-spacing-2);
+ }
+ .md-gap-x-3 {
+ column-gap: var(--rbrh-spacing-3);
+ }
+ .md-gap-x-4 {
+ column-gap: var(--rbrh-spacing-4);
+ }
+ .md-gap-x-5 {
+ column-gap: var(--rbrh-spacing-5);
+ }
+ .md-gap-x-6 {
+ column-gap: var(--rbrh-spacing-6);
+ }
+ .md-gap-y-1 {
+ row-gap: var(--rbrh-spacing-1);
+ }
+ .md-gap-y-2 {
+ row-gap: var(--rbrh-spacing-2);
+ }
+ .md-gap-y-3 {
+ row-gap: var(--rbrh-spacing-3);
+ }
+ .md-gap-y-4 {
+ row-gap: var(--rbrh-spacing-4);
+ }
+ .md-gap-y-5 {
+ row-gap: var(--rbrh-spacing-5);
+ }
+ .md-gap-y-6 {
+ row-gap: var(--rbrh-spacing-6);
+ }
+}
+@mixin screen-lg-up {
+ .lg-grid-auto-flow-col {
+ grid-auto-flow: column;
+ }
+ .lg-grid-auto-flow-row {
+ grid-auto-flow: row;
+ }
+ .lg-grid-cols-none {
+ grid-template-columns: none;
+ }
+ .lg-grid-cols-1 {
+ grid-template-columns: repeat(1, auto);
+ }
+ .lg-grid-cols-2 {
+ grid-template-columns: repeat(2, auto);
+ }
+ .lg-grid-cols-3 {
+ grid-template-columns: repeat(3, auto);
+ }
+ .lg-grid-cols-4 {
+ grid-template-columns: repeat(4, auto);
+ }
+ .lg-grid-cols-5 {
+ grid-template-columns: repeat(5, auto);
+ }
+ .lg-grid-cols-6 {
+ grid-template-columns: repeat(6, auto);
+ }
+ .lg-grid-cols-fr-1 {
+ grid-template-columns: repeat(1, 1fr);
+ }
+ .lg-grid-cols-fr-2 {
+ grid-template-columns: repeat(2, 1fr);
+ }
+ .lg-grid-cols-fr-3 {
+ grid-template-columns: repeat(3, 1fr);
+ }
+ .lg-grid-cols-fr-4 {
+ grid-template-columns: repeat(4, 1fr);
+ }
+ .lg-grid-cols-fr-5 {
+ grid-template-columns: repeat(5, 1fr);
+ }
+ .lg-grid-cols-fr-6 {
+ grid-template-columns: repeat(6, 1fr);
+ }
+ .lg-grid-rows-none {
+ grid-template-rows: none;
+ }
+ .lg-grid-rows-1 {
+ grid-template-rows: repeat(1, auto);
+ }
+ .lg-grid-rows-2 {
+ grid-template-rows: repeat(2, auto);
+ }
+ .lg-grid-rows-3 {
+ grid-template-rows: repeat(3, auto);
+ }
+ .lg-grid-rows-4 {
+ grid-template-rows: repeat(4, auto);
+ }
+ .lg-grid-rows-5 {
+ grid-template-rows: repeat(5, auto);
+ }
+ .lg-grid-rows-6 {
+ grid-template-rows: repeat(6, auto);
+ }
+ .lg-col-span-1 {
+ grid-column: span 1 / span 1;
+ }
+ .lg-col-span-2 {
+ grid-column: span 2 / span 2;
+ }
+ .lg-col-span-3 {
+ grid-column: span 4 / span 4;
+ }
+ .lg-col-span-4 {
+ grid-column: span 4 / span 4;
+ }
+ .lg-col-span-5 {
+ grid-column: span 5 / span 5;
+ }
+ .lg-col-span-6 {
+ grid-column: span 6 / span 6;
+ }
+ .lg-row-span-1 {
+ grid-row: span 1 / span 1;
+ }
+ .lg-row-span-2 {
+ grid-row: span 2 / span 2;
+ }
+ .lg-row-span-3 {
+ grid-row: span 4 / span 4;
+ }
+ .lg-row-span-4 {
+ grid-row: span 4 / span 4;
+ }
+ .lg-row-span-5 {
+ grid-row: span 5 / span 5;
+ }
+ .lg-row-span-6 {
+ grid-row: span 6 / span 6;
+ }
+ .lg-gap-0 {
+ gap: 0;
+ grid-gap: 0;
+ }
+ .lg-gap-1 {
+ gap: var(--rbrh-spacing-1);
+ grid-gap: var(--rbrh-spacing-1);
+ }
+ .lg-gap-2 {
+ gap: var(--rbrh-spacing-2);
+ grid-gap: var(--rbrh-spacing-2);
+ }
+ .lg-gap-3 {
+ gap: var(--rbrh-spacing-3);
+ grid-gap: var(--rbrh-spacing-3);
+ }
+ .lg-gap-4 {
+ gap: var(--rbrh-spacing-4);
+ grid-gap: var(--rbrh-spacing-4);
+ }
+ .lg-gap-5 {
+ gap: var(--rbrh-spacing-5);
+ grid-gap: var(--rbrh-spacing-5);
+ }
+ .lg-gap-6 {
+ gap: var(--rbrh-spacing-6);
+ grid-gap: var(--rbrh-spacing-6);
+ }
+ .lg-gap-7 {
+ gap: var(--rbrh-spacing-7);
+ grid-gap: var(--rbrh-spacing-7);
+ }
+ .lg-gap-8 {
+ gap: var(--rbrh-spacing-8);
+ grid-gap: var(--rbrh-spacing-8);
+ }
+ .lg-gap-9 {
+ gap: var(--rbrh-spacing-9);
+ grid-gap: var(--rbrh-spacing-9);
+ }
+ .lg-gap-10 {
+ gap: var(--rbrh-spacing-10);
+ grid-gap: var(--rbrh-spacing-10);
+ }
+ .lg-gap-x-1 {
+ column-gap: var(--rbrh-spacing-1);
+ }
+ .lg-gap-x-2 {
+ column-gap: var(--rbrh-spacing-2);
+ }
+ .lg-gap-x-3 {
+ column-gap: var(--rbrh-spacing-3);
+ }
+ .lg-gap-x-4 {
+ column-gap: var(--rbrh-spacing-4);
+ }
+ .lg-gap-x-5 {
+ column-gap: var(--rbrh-spacing-5);
+ }
+ .lg-gap-x-6 {
+ column-gap: var(--rbrh-spacing-6);
+ }
+ .lg-gap-y-1 {
+ row-gap: var(--rbrh-spacing-1);
+ }
+ .lg-gap-y-2 {
+ row-gap: var(--rbrh-spacing-2);
+ }
+ .lg-gap-y-3 {
+ row-gap: var(--rbrh-spacing-3);
+ }
+ .lg-gap-y-4 {
+ row-gap: var(--rbrh-spacing-4);
+ }
+ .lg-gap-y-5 {
+ row-gap: var(--rbrh-spacing-5);
+ }
+ .lg-gap-y-6 {
+ row-gap: var(--rbrh-spacing-6);
+ }
+}
+@mixin screen-xl-up {
+ .xl-grid-auto-flow-col {
+ grid-auto-flow: column;
+ }
+ .xl-grid-auto-flow-row {
+ grid-auto-flow: row;
+ }
+ .xl-grid-cols-none {
+ grid-template-columns: none;
+ }
+ .xl-grid-cols-1 {
+ grid-template-columns: repeat(1, auto);
+ }
+ .xl-grid-cols-2 {
+ grid-template-columns: repeat(2, auto);
+ }
+ .xl-grid-cols-3 {
+ grid-template-columns: repeat(3, auto);
+ }
+ .xl-grid-cols-4 {
+ grid-template-columns: repeat(4, auto);
+ }
+ .xl-grid-cols-5 {
+ grid-template-columns: repeat(5, auto);
+ }
+ .xl-grid-cols-6 {
+ grid-template-columns: repeat(6, auto);
+ }
+ .xl-grid-cols-fr-1 {
+ grid-template-columns: repeat(1, 1fr);
+ }
+ .xl-grid-cols-fr-2 {
+ grid-template-columns: repeat(2, 1fr);
+ }
+ .xl-grid-cols-fr-3 {
+ grid-template-columns: repeat(3, 1fr);
+ }
+ .xl-grid-cols-fr-4 {
+ grid-template-columns: repeat(4, 1fr);
+ }
+ .xl-grid-cols-fr-5 {
+ grid-template-columns: repeat(5, 1fr);
+ }
+ .xl-grid-cols-fr-6 {
+ grid-template-columns: repeat(6, 1fr);
+ }
+ .xl-grid-rows-none {
+ grid-template-rows: none;
+ }
+ .xl-grid-rows-1 {
+ grid-template-rows: repeat(1, auto);
+ }
+ .xl-grid-rows-2 {
+ grid-template-rows: repeat(2, auto);
+ }
+ .xl-grid-rows-3 {
+ grid-template-rows: repeat(3, auto);
+ }
+ .xl-grid-rows-4 {
+ grid-template-rows: repeat(4, auto);
+ }
+ .xl-grid-rows-5 {
+ grid-template-rows: repeat(5, auto);
+ }
+ .xl-grid-rows-6 {
+ grid-template-rows: repeat(6, auto);
+ }
+ .xl-col-span-1 {
+ grid-column: span 1 / span 1;
+ }
+ .xl-col-span-2 {
+ grid-column: span 2 / span 2;
+ }
+ .xl-col-span-3 {
+ grid-column: span 4 / span 4;
+ }
+ .xl-col-span-4 {
+ grid-column: span 4 / span 4;
+ }
+ .xl-col-span-5 {
+ grid-column: span 5 / span 5;
+ }
+ .xl-col-span-6 {
+ grid-column: span 6 / span 6;
+ }
+ .xl-row-span-1 {
+ grid-row: span 1 / span 1;
+ }
+ .xl-row-span-2 {
+ grid-row: span 2 / span 2;
+ }
+ .xl-row-span-3 {
+ grid-row: span 4 / span 4;
+ }
+ .xl-row-span-4 {
+ grid-row: span 4 / span 4;
+ }
+ .xl-row-span-5 {
+ grid-row: span 5 / span 5;
+ }
+ .xl-row-span-6 {
+ grid-row: span 6 / span 6;
+ }
+ .xl-gap-0 {
+ gap: 0;
+ grid-gap: 0;
+ }
+ .xl-gap-1 {
+ gap: var(--rbrh-spacing-1);
+ grid-gap: var(--rbrh-spacing-1);
+ }
+ .xl-gap-2 {
+ gap: var(--rbrh-spacing-2);
+ grid-gap: var(--rbrh-spacing-2);
+ }
+ .xl-gap-3 {
+ gap: var(--rbrh-spacing-3);
+ grid-gap: var(--rbrh-spacing-3);
+ }
+ .xl-gap-4 {
+ gap: var(--rbrh-spacing-4);
+ grid-gap: var(--rbrh-spacing-4);
+ }
+ .xl-gap-5 {
+ gap: var(--rbrh-spacing-5);
+ grid-gap: var(--rbrh-spacing-5);
+ }
+ .xl-gap-6 {
+ gap: var(--rbrh-spacing-6);
+ grid-gap: var(--rbrh-spacing-6);
+ }
+ .xl-gap-7 {
+ gap: var(--rbrh-spacing-7);
+ grid-gap: var(--rbrh-spacing-7);
+ }
+ .xl-gap-8 {
+ gap: var(--rbrh-spacing-8);
+ grid-gap: var(--rbrh-spacing-8);
+ }
+ .xl-gap-9 {
+ gap: var(--rbrh-spacing-9);
+ grid-gap: var(--rbrh-spacing-9);
+ }
+ .xl-gap-10 {
+ gap: var(--rbrh-spacing-10);
+ grid-gap: var(--rbrh-spacing-10);
+ }
+ .xl-gap-x-1 {
+ column-gap: var(--rbrh-spacing-1);
+ }
+ .xl-gap-x-2 {
+ column-gap: var(--rbrh-spacing-2);
+ }
+ .xl-gap-x-3 {
+ column-gap: var(--rbrh-spacing-3);
+ }
+ .xl-gap-x-4 {
+ column-gap: var(--rbrh-spacing-4);
+ }
+ .xl-gap-x-5 {
+ column-gap: var(--rbrh-spacing-5);
+ }
+ .xl-gap-x-6 {
+ column-gap: var(--rbrh-spacing-6);
+ }
+ .xl-gap-y-1 {
+ row-gap: var(--rbrh-spacing-1);
+ }
+ .xl-gap-y-2 {
+ row-gap: var(--rbrh-spacing-2);
+ }
+ .xl-gap-y-3 {
+ row-gap: var(--rbrh-spacing-3);
+ }
+ .xl-gap-y-4 {
+ row-gap: var(--rbrh-spacing-4);
+ }
+ .xl-gap-y-5 {
+ row-gap: var(--rbrh-spacing-5);
+ }
+ .xl-gap-y-6 {
+ row-gap: var(--rbrh-spacing-6);
+ }
+}
diff --git a/src/styles/src/utilities/responsive-height.css b/src/styles/src/utilities/responsive-height.css
new file mode 100644
index 0000000..c726195
--- /dev/null
+++ b/src/styles/src/utilities/responsive-height.css
@@ -0,0 +1,336 @@
+@mixin screen-xs-up {
+ .xs-h-0 {
+ height: 0;
+ }
+ .xs-h-auto {
+ height: auto;
+ }
+ .xs-h-fit {
+ height: fit-content;
+ }
+ .xs-h-max {
+ height: max-content;
+ }
+ .xs-h-25 {
+ height: 25%;
+ }
+ .xs-h-35 {
+ height: 35%;
+ }
+ .xs-h-50 {
+ height: 50%;
+ }
+ .xs-h-65 {
+ height: 65%;
+ }
+ .xs-h-75 {
+ height: 75%;
+ }
+ .xs-h-100 {
+ height: 100%;
+ }
+ .xs-h-1 {
+ height: var(--rbrh-spacing-1);
+ }
+ .xs-h-2 {
+ height: var(--rbrh-spacing-2);
+ }
+ .xs-h-3 {
+ height: var(--rbrh-spacing-3);
+ }
+ .xs-h-4 {
+ height: var(--rbrh-spacing-4);
+ }
+ .xs-h-5 {
+ height: var(--rbrh-spacing-5);
+ }
+ .xs-h-6 {
+ height: var(--rbrh-spacing-6);
+ }
+ .xs-h-7 {
+ height: var(--rbrh-spacing-7);
+ }
+ .xs-h-8 {
+ height: var(--rbrh-spacing-8);
+ }
+ .xs-h-9 {
+ height: var(--rbrh-spacing-9);
+ }
+ .xs-h-10 {
+ height: var(--rbrh-spacing-10);
+ }
+ .xs-h-12 {
+ height: var(--rbrh-spacing-12);
+ }
+ .xs-h-14 {
+ height: var(--rbrh-spacing-14);
+ }
+ .xs-h-16 {
+ height: var(--rbrh-spacing-16);
+ }
+ .xs-h-18 {
+ height: var(--rbrh-spacing-18);
+ }
+ .xs-h-20 {
+ height: var(--rbrh-spacing-20);
+ }
+ .xs-h-24 {
+ height: var(--rbrh-spacing-24);
+ }
+
+ .xs-max-h-fit {
+ max-height: fit-content;
+ }
+ .xs-max-h-0 {
+ max-height: 0;
+ }
+ .xs-max-h-max {
+ max-height: max-content;
+ }
+ .xs-max-h-min {
+ max-height: min-content;
+ }
+ .xs-max-h-100 {
+ max-height: 100%;
+ }
+
+ .xs-min-h-fit {
+ min-height: fit-content;
+ }
+ .xs-min-h-0 {
+ min-height: 0;
+ }
+ .xs-min-h-max {
+ min-height: max-content;
+ }
+ .xs-min-h-min {
+ min-height: min-content;
+ }
+ .xs-min-h-100 {
+ min-height: 100%;
+ }
+}
+@mixin screen-md-up {
+ .md-h-0 {
+ height: 0;
+ }
+ .md-h-auto {
+ height: auto;
+ }
+ .md-h-fit {
+ height: fit-content;
+ }
+ .md-h-max {
+ height: max-content;
+ }
+ .md-h-25 {
+ height: 25%;
+ }
+ .md-h-35 {
+ height: 35%;
+ }
+ .md-h-50 {
+ height: 50%;
+ }
+ .md-h-65 {
+ height: 65%;
+ }
+ .md-h-75 {
+ height: 75%;
+ }
+ .md-h-100 {
+ height: 100%;
+ }
+ .md-h-1 {
+ height: var(--rbrh-spacing-1);
+ }
+ .md-h-2 {
+ height: var(--rbrh-spacing-2);
+ }
+ .md-h-3 {
+ height: var(--rbrh-spacing-3);
+ }
+ .md-h-4 {
+ height: var(--rbrh-spacing-4);
+ }
+ .md-h-5 {
+ height: var(--rbrh-spacing-5);
+ }
+ .md-h-6 {
+ height: var(--rbrh-spacing-6);
+ }
+ .md-h-7 {
+ height: var(--rbrh-spacing-7);
+ }
+ .md-h-8 {
+ height: var(--rbrh-spacing-8);
+ }
+ .md-h-9 {
+ height: var(--rbrh-spacing-9);
+ }
+ .md-h-10 {
+ height: var(--rbrh-spacing-10);
+ }
+ .md-h-12 {
+ height: var(--rbrh-spacing-12);
+ }
+ .md-h-14 {
+ height: var(--rbrh-spacing-14);
+ }
+ .md-h-16 {
+ height: var(--rbrh-spacing-16);
+ }
+ .md-h-18 {
+ height: var(--rbrh-spacing-18);
+ }
+ .md-h-20 {
+ height: var(--rbrh-spacing-20);
+ }
+ .md-h-24 {
+ height: var(--rbrh-spacing-24);
+ }
+
+ .md-max-h-fit {
+ max-height: fit-content;
+ }
+ .md-max-h-0 {
+ max-height: 0;
+ }
+ .md-max-h-max {
+ max-height: max-content;
+ }
+ .md-max-h-min {
+ max-height: min-content;
+ }
+ .md-max-h-100 {
+ max-height: 100%;
+ }
+
+ .md-min-h-fit {
+ min-height: fit-content;
+ }
+ .md-min-h-0 {
+ min-height: 0;
+ }
+ .md-min-h-max {
+ min-height: max-content;
+ }
+ .md-min-h-min {
+ min-height: min-content;
+ }
+ .md-min-h-100 {
+ min-height: 100%;
+ }
+}
+@mixin screen-lg-up {
+ .lg-h-0 {
+ height: 0;
+ }
+ .lg-h-auto {
+ height: auto;
+ }
+ .lg-h-fit {
+ height: fit-content;
+ }
+ .lg-h-max {
+ height: max-content;
+ }
+ .lg-h-25 {
+ height: 25%;
+ }
+ .lg-h-35 {
+ height: 35%;
+ }
+ .lg-h-50 {
+ height: 50%;
+ }
+ .lg-h-65 {
+ height: 65%;
+ }
+ .lg-h-75 {
+ height: 75%;
+ }
+ .lg-h-100 {
+ height: 100%;
+ }
+ .lg-h-1 {
+ height: var(--rbrh-spacing-1);
+ }
+ .lg-h-2 {
+ height: var(--rbrh-spacing-2);
+ }
+ .lg-h-3 {
+ height: var(--rbrh-spacing-3);
+ }
+ .lg-h-4 {
+ height: var(--rbrh-spacing-4);
+ }
+ .lg-h-5 {
+ height: var(--rbrh-spacing-5);
+ }
+ .lg-h-6 {
+ height: var(--rbrh-spacing-6);
+ }
+ .lg-h-7 {
+ height: var(--rbrh-spacing-7);
+ }
+ .lg-h-8 {
+ height: var(--rbrh-spacing-8);
+ }
+ .lg-h-9 {
+ height: var(--rbrh-spacing-9);
+ }
+ .lg-h-10 {
+ height: var(--rbrh-spacing-10);
+ }
+ .lg-h-12 {
+ height: var(--rbrh-spacing-12);
+ }
+ .lg-h-14 {
+ height: var(--rbrh-spacing-14);
+ }
+ .lg-h-16 {
+ height: var(--rbrh-spacing-16);
+ }
+ .lg-h-18 {
+ height: var(--rbrh-spacing-18);
+ }
+ .lg-h-20 {
+ height: var(--rbrh-spacing-20);
+ }
+ .lg-h-24 {
+ height: var(--rbrh-spacing-24);
+ }
+
+ .lg-max-h-fit {
+ max-height: fit-content;
+ }
+ .lg-max-h-0 {
+ max-height: 0;
+ }
+ .lg-max-h-max {
+ max-height: max-content;
+ }
+ .lg-max-h-min {
+ max-height: min-content;
+ }
+ .lg-max-h-100 {
+ max-height: 100%;
+ }
+
+ .lg-min-h-fit {
+ min-height: fit-content;
+ }
+ .lg-min-h-0 {
+ min-height: 0;
+ }
+ .lg-min-h-max {
+ min-height: max-content;
+ }
+ .lg-min-h-min {
+ min-height: min-content;
+ }
+ .lg-min-h-100 {
+ min-height: 100%;
+ }
+}
\ No newline at end of file
diff --git a/src/styles/src/utilities/responsive-margin.css b/src/styles/src/utilities/responsive-margin.css
new file mode 100644
index 0000000..eb9141c
--- /dev/null
+++ b/src/styles/src/utilities/responsive-margin.css
@@ -0,0 +1,2103 @@
+@mixin screen-xs-up {
+ .xs-m-0 {
+ margin: 0;
+ }
+
+ .xs-m-auto {
+ margin: auto;
+ }
+
+ .xs-m-1 {
+ margin: var(--rbrh-spacing-1);
+ }
+
+ .xs-m-2 {
+ margin: var(--rbrh-spacing-2);
+ }
+
+ .xs-m-3 {
+ margin: var(--rbrh-spacing-3);
+ }
+
+ .xs-m-4 {
+ margin: var(--rbrh-spacing-4);
+ }
+
+ .xs-m-5 {
+ margin: var(--rbrh-spacing-5);
+ }
+
+ .xs-m-6 {
+ margin: var(--rbrh-spacing-6);
+ }
+
+ .xs-m-7 {
+ margin: var(--rbrh-spacing-7);
+ }
+
+ .xs-m-8 {
+ margin: var(--rbrh-spacing-8);
+ }
+
+ .xs-m-9 {
+ margin: var(--rbrh-spacing-9);
+ }
+
+ .xs-m-10 {
+ margin: var(--rbrh-spacing-10);
+ }
+
+ .xs-m-12 {
+ margin: var(--rbrh-spacing-12);
+ }
+
+ .xs-m-14 {
+ margin: var(--rbrh-spacing-14);
+ }
+
+ .xs-m-16 {
+ margin: var(--rbrh-spacing-16);
+ }
+
+ .xs-m-18 {
+ margin: var(--rbrh-spacing-18);
+ }
+
+ .xs-m-20 {
+ margin: var(--rbrh-spacing-20);
+ }
+
+ .xs-m-24 {
+ margin: var(--rbrh-spacing-24);
+ }
+
+ .xs-m-x-0 {
+ margin-left: 0;
+ margin-right: 0;
+ }
+
+ .xs-m-x-auto {
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .xs-m-x-1 {
+ margin-left: var(--rbrh-spacing-1);
+ margin-right: var(--rbrh-spacing-1);
+ }
+
+ .xs-m-x-2 {
+ margin-left: var(--rbrh-spacing-2);
+ margin-right: var(--rbrh-spacing-2);
+ }
+
+ .xs-m-x-3 {
+ margin-left: var(--rbrh-spacing-3);
+ margin-right: var(--rbrh-spacing-3);
+ }
+
+ .xs-m-x-4 {
+ margin-left: var(--rbrh-spacing-4);
+ margin-right: var(--rbrh-spacing-4);
+ }
+
+ .xs-m-x-5 {
+ margin-left: var(--rbrh-spacing-5);
+ margin-right: var(--rbrh-spacing-5);
+ }
+
+ .xs-m-x-6 {
+ margin-left: var(--rbrh-spacing-6);
+ margin-right: var(--rbrh-spacing-6);
+ }
+
+ .xs-m-x-7 {
+ margin-left: var(--rbrh-spacing-7);
+ margin-right: var(--rbrh-spacing-7);
+ }
+
+ .xs-m-x-8 {
+ margin-left: var(--rbrh-spacing-8);
+ margin-right: var(--rbrh-spacing-8);
+ }
+
+ .xs-m-x-9 {
+ margin-left: var(--rbrh-spacing-9);
+ margin-right: var(--rbrh-spacing-9);
+ }
+
+ .xs-m-x-10 {
+ margin-left: var(--rbrh-spacing-10);
+ margin-right: var(--rbrh-spacing-10);
+ }
+
+ .xs-m-x-12 {
+ margin-left: var(--rbrh-spacing-12);
+ margin-right: var(--rbrh-spacing-12);
+ }
+
+ .xs-m-x-14 {
+ margin-left: var(--rbrh-spacing-14);
+ margin-right: var(--rbrh-spacing-14);
+ }
+
+ .xs-m-x-16 {
+ margin-left: var(--rbrh-spacing-16);
+ margin-right: var(--rbrh-spacing-16);
+ }
+
+ .xs-m-x-18 {
+ margin-left: var(--rbrh-spacing-18);
+ margin-right: var(--rbrh-spacing-18);
+ }
+
+ .xs-m-x-20 {
+ margin-left: var(--rbrh-spacing-20);
+ margin-right: var(--rbrh-spacing-20);
+ }
+
+ .xs-m-x-24 {
+ margin-left: var(--rbrh-spacing-24);
+ margin-right: var(--rbrh-spacing-24);
+ }
+
+ .xs-m-y-0 {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ .xs-m-y-auto {
+ margin-top: auto;
+ margin-bottom: auto;
+ }
+
+ .xs-m-y-1 {
+ margin-top: var(--rbrh-spacing-1);
+ margin-bottom: var(--rbrh-spacing-1);
+ }
+
+ .xs-m-y-2 {
+ margin-top: var(--rbrh-spacing-2);
+ margin-bottom: var(--rbrh-spacing-2);
+ }
+
+ .xs-m-y-3 {
+ margin-top: var(--rbrh-spacing-3);
+ margin-bottom: var(--rbrh-spacing-3);
+ }
+
+ .xs-m-y-4 {
+ margin-top: var(--rbrh-spacing-4);
+ margin-bottom: var(--rbrh-spacing-4);
+ }
+
+ .xs-m-y-5 {
+ margin-top: var(--rbrh-spacing-5);
+ margin-bottom: var(--rbrh-spacing-5);
+ }
+
+ .xs-m-y-6 {
+ margin-top: var(--rbrh-spacing-6);
+ margin-bottom: var(--rbrh-spacing-6);
+ }
+
+ .xs-m-y-7 {
+ margin-top: var(--rbrh-spacing-7);
+ margin-bottom: var(--rbrh-spacing-7);
+ }
+
+ .xs-m-y-8 {
+ margin-top: var(--rbrh-spacing-8);
+ margin-bottom: var(--rbrh-spacing-8);
+ }
+
+ .xs-m-y-9 {
+ margin-top: var(--rbrh-spacing-9);
+ margin-bottom: var(--rbrh-spacing-9);
+ }
+
+ .xs-m-y-10 {
+ margin-top: var(--rbrh-spacing-10);
+ margin-bottom: var(--rbrh-spacing-10);
+ }
+
+ .xs-m-y-12 {
+ margin-top: var(--rbrh-spacing-12);
+ margin-bottom: var(--rbrh-spacing-12);
+ }
+
+ .xs-m-y-14 {
+ margin-top: var(--rbrh-spacing-14);
+ margin-bottom: var(--rbrh-spacing-14);
+ }
+
+ .xs-m-y-16 {
+ margin-top: var(--rbrh-spacing-16);
+ margin-bottom: var(--rbrh-spacing-16);
+ }
+
+ .xs-m-y-18 {
+ margin-top: var(--rbrh-spacing-18);
+ margin-bottom: var(--rbrh-spacing-18);
+ }
+
+ .xs-m-y-20 {
+ margin-top: var(--rbrh-spacing-20);
+ margin-bottom: var(--rbrh-spacing-20);
+ }
+
+ .xs-m-y-24 {
+ margin-top: var(--rbrh-spacing-24);
+ margin-bottom: var(--rbrh-spacing-24);
+ }
+
+ .xs-m-t-0 {
+ margin-top: 0;
+ }
+
+ .xs-m-t-1 {
+ margin-top: var(--rbrh-spacing-1);
+ }
+
+ .xs-m-t-2 {
+ margin-top: var(--rbrh-spacing-2);
+ }
+
+ .xs-m-t-3 {
+ margin-top: var(--rbrh-spacing-3);
+ }
+
+ .xs-m-t-4 {
+ margin-top: var(--rbrh-spacing-4);
+ }
+
+ .xs-m-t-5 {
+ margin-top: var(--rbrh-spacing-5);
+ }
+
+ .xs-m-t-6 {
+ margin-top: var(--rbrh-spacing-6);
+ }
+
+ .xs-m-t-7 {
+ margin-top: var(--rbrh-spacing-7);
+ }
+
+ .xs-m-t-8 {
+ margin-top: var(--rbrh-spacing-8);
+ }
+
+ .xs-m-t-9 {
+ margin-top: var(--rbrh-spacing-9);
+ }
+
+ .xs-m-t-10 {
+ margin-top: var(--rbrh-spacing-10);
+ }
+
+ .xs-m-t-12 {
+ margin-top: var(--rbrh-spacing-12);
+ }
+
+ .xs-m-t-14 {
+ margin-top: var(--rbrh-spacing-14);
+ }
+
+ .xs-m-t-16 {
+ margin-top: var(--rbrh-spacing-16);
+ }
+
+ .xs-m-t-18 {
+ margin-top: var(--rbrh-spacing-18);
+ }
+
+ .xs-m-t-20 {
+ margin-top: var(--rbrh-spacing-20);
+ }
+
+ .xs-m-t-24 {
+ margin-top: var(--rbrh-spacing-24);
+ }
+
+ .xs-m-b-0 {
+ margin-bottom: 0;
+ }
+
+ .xs-m-b-1 {
+ margin-bottom: var(--rbrh-spacing-1);
+ }
+
+ .xs-m-b-2 {
+ margin-bottom: var(--rbrh-spacing-2);
+ }
+
+ .xs-m-b-3 {
+ margin-bottom: var(--rbrh-spacing-3);
+ }
+
+ .xs-m-b-4 {
+ margin-bottom: var(--rbrh-spacing-4);
+ }
+
+ .xs-m-b-5 {
+ margin-bottom: var(--rbrh-spacing-5);
+ }
+
+ .xs-m-b-6 {
+ margin-bottom: var(--rbrh-spacing-6);
+ }
+
+ .xs-m-b-7 {
+ margin-bottom: var(--rbrh-spacing-7);
+ }
+
+ .xs-m-b-8 {
+ margin-bottom: var(--rbrh-spacing-8);
+ }
+
+ .xs-m-b-9 {
+ margin-bottom: var(--rbrh-spacing-9);
+ }
+
+ .xs-m-b-10 {
+ margin-bottom: var(--rbrh-spacing-10);
+ }
+
+ .xs-m-b-12 {
+ margin-bottom: var(--rbrh-spacing-12);
+ }
+
+ .xs-m-b-14 {
+ margin-bottom: var(--rbrh-spacing-14);
+ }
+
+ .xs-m-b-16 {
+ margin-bottom: var(--rbrh-spacing-16);
+ }
+
+ .xs-m-b-18 {
+ margin-bottom: var(--rbrh-spacing-18);
+ }
+
+ .xs-m-b-20 {
+ margin-bottom: var(--rbrh-spacing-20);
+ }
+
+ .xs-m-b-24 {
+ margin-bottom: var(--rbrh-spacing-24);
+ }
+
+ .xs-m-r-0 {
+ margin-right: 0;
+ }
+
+ .xs-m-r-1 {
+ margin-right: var(--rbrh-spacing-1);
+ }
+
+ .xs-m-r-2 {
+ margin-right: var(--rbrh-spacing-2);
+ }
+
+ .xs-m-r-3 {
+ margin-right: var(--rbrh-spacing-3);
+ }
+
+ .xs-m-r-4 {
+ margin-right: var(--rbrh-spacing-4);
+ }
+
+ .xs-m-r-5 {
+ margin-right: var(--rbrh-spacing-5);
+ }
+
+ .xs-m-r-6 {
+ margin-right: var(--rbrh-spacing-6);
+ }
+
+ .xs-m-r-7 {
+ margin-right: var(--rbrh-spacing-7);
+ }
+
+ .xs-m-r-8 {
+ margin-right: var(--rbrh-spacing-8);
+ }
+
+ .xs-m-r-9 {
+ margin-right: var(--rbrh-spacing-9);
+ }
+
+ .xs-m-r-10 {
+ margin-right: var(--rbrh-spacing-10);
+ }
+
+ .xs-m-r-12 {
+ margin-right: var(--rbrh-spacing-12);
+ }
+
+ .xs-m-r-14 {
+ margin-right: var(--rbrh-spacing-14);
+ }
+
+ .xs-m-r-16 {
+ margin-right: var(--rbrh-spacing-16);
+ }
+
+ .xs-m-r-18 {
+ margin-right: var(--rbrh-spacing-18);
+ }
+
+ .xs-m-r-20 {
+ margin-right: var(--rbrh-spacing-20);
+ }
+
+ .xs-m-r-24 {
+ margin-right: var(--rbrh-spacing-24);
+ }
+
+ .xs-m-l-0 {
+ margin-left: 0;
+ }
+
+ .xs-m-l-1 {
+ margin-left: var(--rbrh-spacing-1);
+ }
+
+ .xs-m-l-2 {
+ margin-left: var(--rbrh-spacing-2);
+ }
+
+ .xs-m-l-3 {
+ margin-left: var(--rbrh-spacing-3);
+ }
+
+ .xs-m-l-4 {
+ margin-left: var(--rbrh-spacing-4);
+ }
+
+ .xs-m-l-5 {
+ margin-left: var(--rbrh-spacing-5);
+ }
+
+ .xs-m-l-6 {
+ margin-left: var(--rbrh-spacing-6);
+ }
+
+ .xs-m-l-7 {
+ margin-left: var(--rbrh-spacing-7);
+ }
+
+ .xs-m-l-8 {
+ margin-left: var(--rbrh-spacing-8);
+ }
+
+ .xs-m-l-9 {
+ margin-left: var(--rbrh-spacing-9);
+ }
+
+ .xs-m-l-10 {
+ margin-left: var(--rbrh-spacing-10);
+ }
+
+ .xs-m-l-12 {
+ margin-left: var(--rbrh-spacing-12);
+ }
+
+ .xs-m-l-14 {
+ margin-left: var(--rbrh-spacing-14);
+ }
+
+ .xs-m-l-16 {
+ margin-left: var(--rbrh-spacing-16);
+ }
+
+ .xs-m-l-18 {
+ margin-left: var(--rbrh-spacing-18);
+ }
+
+ .xs-m-l-20 {
+ margin-left: var(--rbrh-spacing-20);
+ }
+
+ .xs-m-l-24 {
+ margin-left: var(--rbrh-spacing-24);
+ }
+}
+
+@mixin screen-sm-up {
+ .sm-m-0 {
+ margin: 0;
+ }
+
+ .sm-m-auto {
+ margin: auto;
+ }
+
+ .sm-m-1 {
+ margin: var(--rbrh-spacing-1);
+ }
+
+ .sm-m-2 {
+ margin: var(--rbrh-spacing-2);
+ }
+
+ .sm-m-3 {
+ margin: var(--rbrh-spacing-3);
+ }
+
+ .sm-m-4 {
+ margin: var(--rbrh-spacing-4);
+ }
+
+ .sm-m-5 {
+ margin: var(--rbrh-spacing-5);
+ }
+
+ .sm-m-6 {
+ margin: var(--rbrh-spacing-6);
+ }
+
+ .sm-m-7 {
+ margin: var(--rbrh-spacing-7);
+ }
+
+ .sm-m-8 {
+ margin: var(--rbrh-spacing-8);
+ }
+
+ .sm-m-9 {
+ margin: var(--rbrh-spacing-9);
+ }
+
+ .sm-m-10 {
+ margin: var(--rbrh-spacing-10);
+ }
+
+ .sm-m-12 {
+ margin: var(--rbrh-spacing-12);
+ }
+
+ .sm-m-14 {
+ margin: var(--rbrh-spacing-14);
+ }
+
+ .sm-m-16 {
+ margin: var(--rbrh-spacing-16);
+ }
+
+ .sm-m-18 {
+ margin: var(--rbrh-spacing-18);
+ }
+
+ .sm-m-20 {
+ margin: var(--rbrh-spacing-20);
+ }
+
+ .sm-m-24 {
+ margin: var(--rbrh-spacing-24);
+ }
+
+ .sm-m-x-0 {
+ margin-left: 0;
+ margin-right: 0;
+ }
+
+ .sm-m-x-auto {
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .sm-m-x-1 {
+ margin-left: var(--rbrh-spacing-1);
+ margin-right: var(--rbrh-spacing-1);
+ }
+
+ .sm-m-x-2 {
+ margin-left: var(--rbrh-spacing-2);
+ margin-right: var(--rbrh-spacing-2);
+ }
+
+ .sm-m-x-3 {
+ margin-left: var(--rbrh-spacing-3);
+ margin-right: var(--rbrh-spacing-3);
+ }
+
+ .sm-m-x-4 {
+ margin-left: var(--rbrh-spacing-4);
+ margin-right: var(--rbrh-spacing-4);
+ }
+
+ .sm-m-x-5 {
+ margin-left: var(--rbrh-spacing-5);
+ margin-right: var(--rbrh-spacing-5);
+ }
+
+ .sm-m-x-6 {
+ margin-left: var(--rbrh-spacing-6);
+ margin-right: var(--rbrh-spacing-6);
+ }
+
+ .sm-m-x-7 {
+ margin-left: var(--rbrh-spacing-7);
+ margin-right: var(--rbrh-spacing-7);
+ }
+
+ .sm-m-x-8 {
+ margin-left: var(--rbrh-spacing-8);
+ margin-right: var(--rbrh-spacing-8);
+ }
+
+ .sm-m-x-9 {
+ margin-left: var(--rbrh-spacing-9);
+ margin-right: var(--rbrh-spacing-9);
+ }
+
+ .sm-m-x-10 {
+ margin-left: var(--rbrh-spacing-10);
+ margin-right: var(--rbrh-spacing-10);
+ }
+
+ .sm-m-x-12 {
+ margin-left: var(--rbrh-spacing-12);
+ margin-right: var(--rbrh-spacing-12);
+ }
+
+ .sm-m-x-14 {
+ margin-left: var(--rbrh-spacing-14);
+ margin-right: var(--rbrh-spacing-14);
+ }
+
+ .sm-m-x-16 {
+ margin-left: var(--rbrh-spacing-16);
+ margin-right: var(--rbrh-spacing-16);
+ }
+
+ .sm-m-x-18 {
+ margin-left: var(--rbrh-spacing-18);
+ margin-right: var(--rbrh-spacing-18);
+ }
+
+ .sm-m-x-20 {
+ margin-left: var(--rbrh-spacing-20);
+ margin-right: var(--rbrh-spacing-20);
+ }
+
+ .sm-m-x-24 {
+ margin-left: var(--rbrh-spacing-24);
+ margin-right: var(--rbrh-spacing-24);
+ }
+
+ .sm-m-y-0 {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ .sm-m-y-auto {
+ margin-top: auto;
+ margin-bottom: auto;
+ }
+
+ .sm-m-y-1 {
+ margin-top: var(--rbrh-spacing-1);
+ margin-bottom: var(--rbrh-spacing-1);
+ }
+
+ .sm-m-y-2 {
+ margin-top: var(--rbrh-spacing-2);
+ margin-bottom: var(--rbrh-spacing-2);
+ }
+
+ .sm-m-y-3 {
+ margin-top: var(--rbrh-spacing-3);
+ margin-bottom: var(--rbrh-spacing-3);
+ }
+
+ .sm-m-y-4 {
+ margin-top: var(--rbrh-spacing-4);
+ margin-bottom: var(--rbrh-spacing-4);
+ }
+
+ .sm-m-y-5 {
+ margin-top: var(--rbrh-spacing-5);
+ margin-bottom: var(--rbrh-spacing-5);
+ }
+
+ .sm-m-y-6 {
+ margin-top: var(--rbrh-spacing-6);
+ margin-bottom: var(--rbrh-spacing-6);
+ }
+
+ .sm-m-y-7 {
+ margin-top: var(--rbrh-spacing-7);
+ margin-bottom: var(--rbrh-spacing-7);
+ }
+
+ .sm-m-y-8 {
+ margin-top: var(--rbrh-spacing-8);
+ margin-bottom: var(--rbrh-spacing-8);
+ }
+
+ .sm-m-y-9 {
+ margin-top: var(--rbrh-spacing-9);
+ margin-bottom: var(--rbrh-spacing-9);
+ }
+
+ .sm-m-y-10 {
+ margin-top: var(--rbrh-spacing-10);
+ margin-bottom: var(--rbrh-spacing-10);
+ }
+
+ .sm-m-y-12 {
+ margin-top: var(--rbrh-spacing-12);
+ margin-bottom: var(--rbrh-spacing-12);
+ }
+
+ .sm-m-y-14 {
+ margin-top: var(--rbrh-spacing-14);
+ margin-bottom: var(--rbrh-spacing-14);
+ }
+
+ .sm-m-y-16 {
+ margin-top: var(--rbrh-spacing-16);
+ margin-bottom: var(--rbrh-spacing-16);
+ }
+
+ .sm-m-y-18 {
+ margin-top: var(--rbrh-spacing-18);
+ margin-bottom: var(--rbrh-spacing-18);
+ }
+
+ .sm-m-y-20 {
+ margin-top: var(--rbrh-spacing-20);
+ margin-bottom: var(--rbrh-spacing-20);
+ }
+
+ .sm-m-y-24 {
+ margin-top: var(--rbrh-spacing-24);
+ margin-bottom: var(--rbrh-spacing-24);
+ }
+
+ .sm-m-t-0 {
+ margin-top: 0;
+ }
+
+ .sm-m-t-1 {
+ margin-top: var(--rbrh-spacing-1);
+ }
+
+ .sm-m-t-2 {
+ margin-top: var(--rbrh-spacing-2);
+ }
+
+ .sm-m-t-3 {
+ margin-top: var(--rbrh-spacing-3);
+ }
+
+ .sm-m-t-4 {
+ margin-top: var(--rbrh-spacing-4);
+ }
+
+ .sm-m-t-5 {
+ margin-top: var(--rbrh-spacing-5);
+ }
+
+ .sm-m-t-6 {
+ margin-top: var(--rbrh-spacing-6);
+ }
+
+ .sm-m-t-7 {
+ margin-top: var(--rbrh-spacing-7);
+ }
+
+ .sm-m-t-8 {
+ margin-top: var(--rbrh-spacing-8);
+ }
+
+ .sm-m-t-9 {
+ margin-top: var(--rbrh-spacing-9);
+ }
+
+ .sm-m-t-10 {
+ margin-top: var(--rbrh-spacing-10);
+ }
+
+ .sm-m-t-12 {
+ margin-top: var(--rbrh-spacing-12);
+ }
+
+ .sm-m-t-14 {
+ margin-top: var(--rbrh-spacing-14);
+ }
+
+ .sm-m-t-16 {
+ margin-top: var(--rbrh-spacing-16);
+ }
+
+ .sm-m-t-18 {
+ margin-top: var(--rbrh-spacing-18);
+ }
+
+ .sm-m-t-20 {
+ margin-top: var(--rbrh-spacing-20);
+ }
+
+ .sm-m-t-24 {
+ margin-top: var(--rbrh-spacing-24);
+ }
+
+ .sm-m-b-0 {
+ margin-bottom: 0;
+ }
+
+ .sm-m-b-1 {
+ margin-bottom: var(--rbrh-spacing-1);
+ }
+
+ .sm-m-b-2 {
+ margin-bottom: var(--rbrh-spacing-2);
+ }
+
+ .sm-m-b-3 {
+ margin-bottom: var(--rbrh-spacing-3);
+ }
+
+ .sm-m-b-4 {
+ margin-bottom: var(--rbrh-spacing-4);
+ }
+
+ .sm-m-b-5 {
+ margin-bottom: var(--rbrh-spacing-5);
+ }
+
+ .sm-m-b-6 {
+ margin-bottom: var(--rbrh-spacing-6);
+ }
+
+ .sm-m-b-7 {
+ margin-bottom: var(--rbrh-spacing-7);
+ }
+
+ .sm-m-b-8 {
+ margin-bottom: var(--rbrh-spacing-8);
+ }
+
+ .sm-m-b-9 {
+ margin-bottom: var(--rbrh-spacing-9);
+ }
+
+ .sm-m-b-10 {
+ margin-bottom: var(--rbrh-spacing-10);
+ }
+
+ .sm-m-b-12 {
+ margin-bottom: var(--rbrh-spacing-12);
+ }
+
+ .sm-m-b-14 {
+ margin-bottom: var(--rbrh-spacing-14);
+ }
+
+ .sm-m-b-16 {
+ margin-bottom: var(--rbrh-spacing-16);
+ }
+
+ .sm-m-b-18 {
+ margin-bottom: var(--rbrh-spacing-18);
+ }
+
+ .sm-m-b-20 {
+ margin-bottom: var(--rbrh-spacing-20);
+ }
+
+ .sm-m-b-24 {
+ margin-bottom: var(--rbrh-spacing-24);
+ }
+
+ .sm-m-r-0 {
+ margin-right: 0;
+ }
+
+ .sm-m-r-1 {
+ margin-right: var(--rbrh-spacing-1);
+ }
+
+ .sm-m-r-2 {
+ margin-right: var(--rbrh-spacing-2);
+ }
+
+ .sm-m-r-3 {
+ margin-right: var(--rbrh-spacing-3);
+ }
+
+ .sm-m-r-4 {
+ margin-right: var(--rbrh-spacing-4);
+ }
+
+ .sm-m-r-5 {
+ margin-right: var(--rbrh-spacing-5);
+ }
+
+ .sm-m-r-6 {
+ margin-right: var(--rbrh-spacing-6);
+ }
+
+ .sm-m-r-7 {
+ margin-right: var(--rbrh-spacing-7);
+ }
+
+ .sm-m-r-8 {
+ margin-right: var(--rbrh-spacing-8);
+ }
+
+ .sm-m-r-9 {
+ margin-right: var(--rbrh-spacing-9);
+ }
+
+ .sm-m-r-10 {
+ margin-right: var(--rbrh-spacing-10);
+ }
+
+ .sm-m-r-12 {
+ margin-right: var(--rbrh-spacing-12);
+ }
+
+ .sm-m-r-14 {
+ margin-right: var(--rbrh-spacing-14);
+ }
+
+ .sm-m-r-16 {
+ margin-right: var(--rbrh-spacing-16);
+ }
+
+ .sm-m-r-18 {
+ margin-right: var(--rbrh-spacing-18);
+ }
+
+ .sm-m-r-20 {
+ margin-right: var(--rbrh-spacing-20);
+ }
+
+ .sm-m-r-24 {
+ margin-right: var(--rbrh-spacing-24);
+ }
+
+ .sm-m-l-0 {
+ margin-left: 0;
+ }
+
+ .sm-m-l-1 {
+ margin-left: var(--rbrh-spacing-1);
+ }
+
+ .sm-m-l-2 {
+ margin-left: var(--rbrh-spacing-2);
+ }
+
+ .sm-m-l-3 {
+ margin-left: var(--rbrh-spacing-3);
+ }
+
+ .sm-m-l-4 {
+ margin-left: var(--rbrh-spacing-4);
+ }
+
+ .sm-m-l-5 {
+ margin-left: var(--rbrh-spacing-5);
+ }
+
+ .sm-m-l-6 {
+ margin-left: var(--rbrh-spacing-6);
+ }
+
+ .sm-m-l-7 {
+ margin-left: var(--rbrh-spacing-7);
+ }
+
+ .sm-m-l-8 {
+ margin-left: var(--rbrh-spacing-8);
+ }
+
+ .sm-m-l-9 {
+ margin-left: var(--rbrh-spacing-9);
+ }
+
+ .sm-m-l-10 {
+ margin-left: var(--rbrh-spacing-10);
+ }
+
+ .sm-m-l-12 {
+ margin-left: var(--rbrh-spacing-12);
+ }
+
+ .sm-m-l-14 {
+ margin-left: var(--rbrh-spacing-14);
+ }
+
+ .sm-m-l-16 {
+ margin-left: var(--rbrh-spacing-16);
+ }
+
+ .sm-m-l-18 {
+ margin-left: var(--rbrh-spacing-18);
+ }
+
+ .sm-m-l-20 {
+ margin-left: var(--rbrh-spacing-20);
+ }
+
+ .sm-m-l-24 {
+ margin-left: var(--rbrh-spacing-24);
+ }
+}
+
+@mixin screen-md-up {
+ .md-m-0 {
+ margin: 0;
+ }
+
+ .md-m-auto {
+ margin: auto;
+ }
+
+ .md-m-1 {
+ margin: var(--rbrh-spacing-1);
+ }
+
+ .md-m-2 {
+ margin: var(--rbrh-spacing-2);
+ }
+
+ .md-m-3 {
+ margin: var(--rbrh-spacing-3);
+ }
+
+ .md-m-4 {
+ margin: var(--rbrh-spacing-4);
+ }
+
+ .md-m-5 {
+ margin: var(--rbrh-spacing-5);
+ }
+
+ .md-m-6 {
+ margin: var(--rbrh-spacing-6);
+ }
+
+ .md-m-7 {
+ margin: var(--rbrh-spacing-7);
+ }
+
+ .md-m-8 {
+ margin: var(--rbrh-spacing-8);
+ }
+
+ .md-m-9 {
+ margin: var(--rbrh-spacing-9);
+ }
+
+ .md-m-10 {
+ margin: var(--rbrh-spacing-10);
+ }
+
+ .md-m-12 {
+ margin: var(--rbrh-spacing-12);
+ }
+
+ .md-m-14 {
+ margin: var(--rbrh-spacing-14);
+ }
+
+ .md-m-16 {
+ margin: var(--rbrh-spacing-16);
+ }
+
+ .md-m-18 {
+ margin: var(--rbrh-spacing-18);
+ }
+
+ .md-m-20 {
+ margin: var(--rbrh-spacing-20);
+ }
+
+ .md-m-24 {
+ margin: var(--rbrh-spacing-24);
+ }
+
+ .md-m-x-0 {
+ margin-left: 0;
+ margin-right: 0;
+ }
+
+ .md-m-x-auto {
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .md-m-x-1 {
+ margin-left: var(--rbrh-spacing-1);
+ margin-right: var(--rbrh-spacing-1);
+ }
+
+ .md-m-x-2 {
+ margin-left: var(--rbrh-spacing-2);
+ margin-right: var(--rbrh-spacing-2);
+ }
+
+ .md-m-x-3 {
+ margin-left: var(--rbrh-spacing-3);
+ margin-right: var(--rbrh-spacing-3);
+ }
+
+ .md-m-x-4 {
+ margin-left: var(--rbrh-spacing-4);
+ margin-right: var(--rbrh-spacing-4);
+ }
+
+ .md-m-x-5 {
+ margin-left: var(--rbrh-spacing-5);
+ margin-right: var(--rbrh-spacing-5);
+ }
+
+ .md-m-x-6 {
+ margin-left: var(--rbrh-spacing-6);
+ margin-right: var(--rbrh-spacing-6);
+ }
+
+ .md-m-x-7 {
+ margin-left: var(--rbrh-spacing-7);
+ margin-right: var(--rbrh-spacing-7);
+ }
+
+ .md-m-x-8 {
+ margin-left: var(--rbrh-spacing-8);
+ margin-right: var(--rbrh-spacing-8);
+ }
+
+ .md-m-x-9 {
+ margin-left: var(--rbrh-spacing-9);
+ margin-right: var(--rbrh-spacing-9);
+ }
+
+ .md-m-x-10 {
+ margin-left: var(--rbrh-spacing-10);
+ margin-right: var(--rbrh-spacing-10);
+ }
+
+ .md-m-x-12 {
+ margin-left: var(--rbrh-spacing-12);
+ margin-right: var(--rbrh-spacing-12);
+ }
+
+ .md-m-x-14 {
+ margin-left: var(--rbrh-spacing-14);
+ margin-right: var(--rbrh-spacing-14);
+ }
+
+ .md-m-x-16 {
+ margin-left: var(--rbrh-spacing-16);
+ margin-right: var(--rbrh-spacing-16);
+ }
+
+ .md-m-x-18 {
+ margin-left: var(--rbrh-spacing-18);
+ margin-right: var(--rbrh-spacing-18);
+ }
+
+ .md-m-x-20 {
+ margin-left: var(--rbrh-spacing-20);
+ margin-right: var(--rbrh-spacing-20);
+ }
+
+ .md-m-x-24 {
+ margin-left: var(--rbrh-spacing-24);
+ margin-right: var(--rbrh-spacing-24);
+ }
+
+ .md-m-y-0 {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ .md-m-y-auto {
+ margin-top: auto;
+ margin-bottom: auto;
+ }
+
+ .md-m-y-1 {
+ margin-top: var(--rbrh-spacing-1);
+ margin-bottom: var(--rbrh-spacing-1);
+ }
+
+ .md-m-y-2 {
+ margin-top: var(--rbrh-spacing-2);
+ margin-bottom: var(--rbrh-spacing-2);
+ }
+
+ .md-m-y-3 {
+ margin-top: var(--rbrh-spacing-3);
+ margin-bottom: var(--rbrh-spacing-3);
+ }
+
+ .md-m-y-4 {
+ margin-top: var(--rbrh-spacing-4);
+ margin-bottom: var(--rbrh-spacing-4);
+ }
+
+ .md-m-y-5 {
+ margin-top: var(--rbrh-spacing-5);
+ margin-bottom: var(--rbrh-spacing-5);
+ }
+
+ .md-m-y-6 {
+ margin-top: var(--rbrh-spacing-6);
+ margin-bottom: var(--rbrh-spacing-6);
+ }
+
+ .md-m-y-7 {
+ margin-top: var(--rbrh-spacing-7);
+ margin-bottom: var(--rbrh-spacing-7);
+ }
+
+ .md-m-y-8 {
+ margin-top: var(--rbrh-spacing-8);
+ margin-bottom: var(--rbrh-spacing-8);
+ }
+
+ .md-m-y-9 {
+ margin-top: var(--rbrh-spacing-9);
+ margin-bottom: var(--rbrh-spacing-9);
+ }
+
+ .md-m-y-10 {
+ margin-top: var(--rbrh-spacing-10);
+ margin-bottom: var(--rbrh-spacing-10);
+ }
+
+ .md-m-y-12 {
+ margin-top: var(--rbrh-spacing-12);
+ margin-bottom: var(--rbrh-spacing-12);
+ }
+
+ .md-m-y-14 {
+ margin-top: var(--rbrh-spacing-14);
+ margin-bottom: var(--rbrh-spacing-14);
+ }
+
+ .md-m-y-16 {
+ margin-top: var(--rbrh-spacing-16);
+ margin-bottom: var(--rbrh-spacing-16);
+ }
+
+ .md-m-y-18 {
+ margin-top: var(--rbrh-spacing-18);
+ margin-bottom: var(--rbrh-spacing-18);
+ }
+
+ .md-m-y-20 {
+ margin-top: var(--rbrh-spacing-20);
+ margin-bottom: var(--rbrh-spacing-20);
+ }
+
+ .md-m-y-24 {
+ margin-top: var(--rbrh-spacing-24);
+ margin-bottom: var(--rbrh-spacing-24);
+ }
+
+ .md-m-t-0 {
+ margin-top: 0;
+ }
+
+ .md-m-t-1 {
+ margin-top: var(--rbrh-spacing-1);
+ }
+
+ .md-m-t-2 {
+ margin-top: var(--rbrh-spacing-2);
+ }
+
+ .md-m-t-3 {
+ margin-top: var(--rbrh-spacing-3);
+ }
+
+ .md-m-t-4 {
+ margin-top: var(--rbrh-spacing-4);
+ }
+
+ .md-m-t-5 {
+ margin-top: var(--rbrh-spacing-5);
+ }
+
+ .md-m-t-6 {
+ margin-top: var(--rbrh-spacing-6);
+ }
+
+ .md-m-t-7 {
+ margin-top: var(--rbrh-spacing-7);
+ }
+
+ .md-m-t-8 {
+ margin-top: var(--rbrh-spacing-8);
+ }
+
+ .md-m-t-9 {
+ margin-top: var(--rbrh-spacing-9);
+ }
+
+ .md-m-t-10 {
+ margin-top: var(--rbrh-spacing-10);
+ }
+
+ .md-m-t-12 {
+ margin-top: var(--rbrh-spacing-12);
+ }
+
+ .md-m-t-14 {
+ margin-top: var(--rbrh-spacing-14);
+ }
+
+ .md-m-t-16 {
+ margin-top: var(--rbrh-spacing-16);
+ }
+
+ .md-m-t-18 {
+ margin-top: var(--rbrh-spacing-18);
+ }
+
+ .md-m-t-20 {
+ margin-top: var(--rbrh-spacing-20);
+ }
+
+ .md-m-t-24 {
+ margin-top: var(--rbrh-spacing-24);
+ }
+
+ .md-m-b-0 {
+ margin-bottom: 0;
+ }
+
+ .md-m-b-1 {
+ margin-bottom: var(--rbrh-spacing-1);
+ }
+
+ .md-m-b-2 {
+ margin-bottom: var(--rbrh-spacing-2);
+ }
+
+ .md-m-b-3 {
+ margin-bottom: var(--rbrh-spacing-3);
+ }
+
+ .md-m-b-4 {
+ margin-bottom: var(--rbrh-spacing-4);
+ }
+
+ .md-m-b-5 {
+ margin-bottom: var(--rbrh-spacing-5);
+ }
+
+ .md-m-b-6 {
+ margin-bottom: var(--rbrh-spacing-6);
+ }
+
+ .md-m-b-7 {
+ margin-bottom: var(--rbrh-spacing-7);
+ }
+
+ .md-m-b-8 {
+ margin-bottom: var(--rbrh-spacing-8);
+ }
+
+ .md-m-b-9 {
+ margin-bottom: var(--rbrh-spacing-9);
+ }
+
+ .md-m-b-10 {
+ margin-bottom: var(--rbrh-spacing-10);
+ }
+
+ .md-m-b-12 {
+ margin-bottom: var(--rbrh-spacing-12);
+ }
+
+ .md-m-b-14 {
+ margin-bottom: var(--rbrh-spacing-14);
+ }
+
+ .md-m-b-16 {
+ margin-bottom: var(--rbrh-spacing-16);
+ }
+
+ .md-m-b-18 {
+ margin-bottom: var(--rbrh-spacing-18);
+ }
+
+ .md-m-b-20 {
+ margin-bottom: var(--rbrh-spacing-20);
+ }
+
+ .md-m-b-24 {
+ margin-bottom: var(--rbrh-spacing-24);
+ }
+
+ .md-m-r-0 {
+ margin-right: 0;
+ }
+
+ .md-m-r-1 {
+ margin-right: var(--rbrh-spacing-1);
+ }
+
+ .md-m-r-2 {
+ margin-right: var(--rbrh-spacing-2);
+ }
+
+ .md-m-r-3 {
+ margin-right: var(--rbrh-spacing-3);
+ }
+
+ .md-m-r-4 {
+ margin-right: var(--rbrh-spacing-4);
+ }
+
+ .md-m-r-5 {
+ margin-right: var(--rbrh-spacing-5);
+ }
+
+ .md-m-r-6 {
+ margin-right: var(--rbrh-spacing-6);
+ }
+
+ .md-m-r-7 {
+ margin-right: var(--rbrh-spacing-7);
+ }
+
+ .md-m-r-8 {
+ margin-right: var(--rbrh-spacing-8);
+ }
+
+ .md-m-r-9 {
+ margin-right: var(--rbrh-spacing-9);
+ }
+
+ .md-m-r-10 {
+ margin-right: var(--rbrh-spacing-10);
+ }
+
+ .md-m-r-12 {
+ margin-right: var(--rbrh-spacing-12);
+ }
+
+ .md-m-r-14 {
+ margin-right: var(--rbrh-spacing-14);
+ }
+
+ .md-m-r-16 {
+ margin-right: var(--rbrh-spacing-16);
+ }
+
+ .md-m-r-18 {
+ margin-right: var(--rbrh-spacing-18);
+ }
+
+ .md-m-r-20 {
+ margin-right: var(--rbrh-spacing-20);
+ }
+
+ .md-m-r-24 {
+ margin-right: var(--rbrh-spacing-24);
+ }
+
+ .md-m-l-0 {
+ margin-left: 0;
+ }
+
+ .md-m-l-1 {
+ margin-left: var(--rbrh-spacing-1);
+ }
+
+ .md-m-l-2 {
+ margin-left: var(--rbrh-spacing-2);
+ }
+
+ .md-m-l-3 {
+ margin-left: var(--rbrh-spacing-3);
+ }
+
+ .md-m-l-4 {
+ margin-left: var(--rbrh-spacing-4);
+ }
+
+ .md-m-l-5 {
+ margin-left: var(--rbrh-spacing-5);
+ }
+
+ .md-m-l-6 {
+ margin-left: var(--rbrh-spacing-6);
+ }
+
+ .md-m-l-7 {
+ margin-left: var(--rbrh-spacing-7);
+ }
+
+ .md-m-l-8 {
+ margin-left: var(--rbrh-spacing-8);
+ }
+
+ .md-m-l-9 {
+ margin-left: var(--rbrh-spacing-9);
+ }
+
+ .md-m-l-10 {
+ margin-left: var(--rbrh-spacing-10);
+ }
+
+ .md-m-l-12 {
+ margin-left: var(--rbrh-spacing-12);
+ }
+
+ .md-m-l-14 {
+ margin-left: var(--rbrh-spacing-14);
+ }
+
+ .md-m-l-16 {
+ margin-left: var(--rbrh-spacing-16);
+ }
+
+ .md-m-l-18 {
+ margin-left: var(--rbrh-spacing-18);
+ }
+
+ .md-m-l-20 {
+ margin-left: var(--rbrh-spacing-20);
+ }
+
+ .md-m-l-24 {
+ margin-left: var(--rbrh-spacing-24);
+ }
+}
+
+@mixin screen-lg-up {
+ .lg-m-0 {
+ margin: 0;
+ }
+
+ .lg-m-auto {
+ margin: auto;
+ }
+
+ .lg-m-1 {
+ margin: var(--rbrh-spacing-1);
+ }
+
+ .lg-m-2 {
+ margin: var(--rbrh-spacing-2);
+ }
+
+ .lg-m-3 {
+ margin: var(--rbrh-spacing-3);
+ }
+
+ .lg-m-4 {
+ margin: var(--rbrh-spacing-4);
+ }
+
+ .lg-m-5 {
+ margin: var(--rbrh-spacing-5);
+ }
+
+ .lg-m-6 {
+ margin: var(--rbrh-spacing-6);
+ }
+
+ .lg-m-7 {
+ margin: var(--rbrh-spacing-7);
+ }
+
+ .lg-m-8 {
+ margin: var(--rbrh-spacing-8);
+ }
+
+ .lg-m-9 {
+ margin: var(--rbrh-spacing-9);
+ }
+
+ .lg-m-10 {
+ margin: var(--rbrh-spacing-10);
+ }
+
+ .lg-m-12 {
+ margin: var(--rbrh-spacing-12);
+ }
+
+ .lg-m-14 {
+ margin: var(--rbrh-spacing-14);
+ }
+
+ .lg-m-16 {
+ margin: var(--rbrh-spacing-16);
+ }
+
+ .lg-m-18 {
+ margin: var(--rbrh-spacing-18);
+ }
+
+ .lg-m-20 {
+ margin: var(--rbrh-spacing-20);
+ }
+
+ .lg-m-24 {
+ margin: var(--rbrh-spacing-24);
+ }
+
+ .lg-m-x-0 {
+ margin-left: 0;
+ margin-right: 0;
+ }
+
+ .lg-m-x-auto {
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .lg-m-x-1 {
+ margin-left: var(--rbrh-spacing-1);
+ margin-right: var(--rbrh-spacing-1);
+ }
+
+ .lg-m-x-2 {
+ margin-left: var(--rbrh-spacing-2);
+ margin-right: var(--rbrh-spacing-2);
+ }
+
+ .lg-m-x-3 {
+ margin-left: var(--rbrh-spacing-3);
+ margin-right: var(--rbrh-spacing-3);
+ }
+
+ .lg-m-x-4 {
+ margin-left: var(--rbrh-spacing-4);
+ margin-right: var(--rbrh-spacing-4);
+ }
+
+ .lg-m-x-5 {
+ margin-left: var(--rbrh-spacing-5);
+ margin-right: var(--rbrh-spacing-5);
+ }
+
+ .lg-m-x-6 {
+ margin-left: var(--rbrh-spacing-6);
+ margin-right: var(--rbrh-spacing-6);
+ }
+
+ .lg-m-x-7 {
+ margin-left: var(--rbrh-spacing-7);
+ margin-right: var(--rbrh-spacing-7);
+ }
+
+ .lg-m-x-8 {
+ margin-left: var(--rbrh-spacing-8);
+ margin-right: var(--rbrh-spacing-8);
+ }
+
+ .lg-m-x-9 {
+ margin-left: var(--rbrh-spacing-9);
+ margin-right: var(--rbrh-spacing-9);
+ }
+
+ .lg-m-x-10 {
+ margin-left: var(--rbrh-spacing-10);
+ margin-right: var(--rbrh-spacing-10);
+ }
+
+ .lg-m-x-12 {
+ margin-left: var(--rbrh-spacing-12);
+ margin-right: var(--rbrh-spacing-12);
+ }
+
+ .lg-m-x-14 {
+ margin-left: var(--rbrh-spacing-14);
+ margin-right: var(--rbrh-spacing-14);
+ }
+
+ .lg-m-x-16 {
+ margin-left: var(--rbrh-spacing-16);
+ margin-right: var(--rbrh-spacing-16);
+ }
+
+ .lg-m-x-18 {
+ margin-left: var(--rbrh-spacing-18);
+ margin-right: var(--rbrh-spacing-18);
+ }
+
+ .lg-m-x-20 {
+ margin-left: var(--rbrh-spacing-20);
+ margin-right: var(--rbrh-spacing-20);
+ }
+
+ .lg-m-x-24 {
+ margin-left: var(--rbrh-spacing-24);
+ margin-right: var(--rbrh-spacing-24);
+ }
+
+ .lg-m-y-0 {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ .lg-m-y-auto {
+ margin-top: auto;
+ margin-bottom: auto;
+ }
+
+ .lg-m-y-1 {
+ margin-top: var(--rbrh-spacing-1);
+ margin-bottom: var(--rbrh-spacing-1);
+ }
+
+ .lg-m-y-2 {
+ margin-top: var(--rbrh-spacing-2);
+ margin-bottom: var(--rbrh-spacing-2);
+ }
+
+ .lg-m-y-3 {
+ margin-top: var(--rbrh-spacing-3);
+ margin-bottom: var(--rbrh-spacing-3);
+ }
+
+ .lg-m-y-4 {
+ margin-top: var(--rbrh-spacing-4);
+ margin-bottom: var(--rbrh-spacing-4);
+ }
+
+ .lg-m-y-5 {
+ margin-top: var(--rbrh-spacing-5);
+ margin-bottom: var(--rbrh-spacing-5);
+ }
+
+ .lg-m-y-6 {
+ margin-top: var(--rbrh-spacing-6);
+ margin-bottom: var(--rbrh-spacing-6);
+ }
+
+ .lg-m-y-7 {
+ margin-top: var(--rbrh-spacing-7);
+ margin-bottom: var(--rbrh-spacing-7);
+ }
+
+ .lg-m-y-8 {
+ margin-top: var(--rbrh-spacing-8);
+ margin-bottom: var(--rbrh-spacing-8);
+ }
+
+ .lg-m-y-9 {
+ margin-top: var(--rbrh-spacing-9);
+ margin-bottom: var(--rbrh-spacing-9);
+ }
+
+ .lg-m-y-10 {
+ margin-top: var(--rbrh-spacing-10);
+ margin-bottom: var(--rbrh-spacing-10);
+ }
+
+ .lg-m-y-12 {
+ margin-top: var(--rbrh-spacing-12);
+ margin-bottom: var(--rbrh-spacing-12);
+ }
+
+ .lg-m-y-14 {
+ margin-top: var(--rbrh-spacing-14);
+ margin-bottom: var(--rbrh-spacing-14);
+ }
+
+ .lg-m-y-16 {
+ margin-top: var(--rbrh-spacing-16);
+ margin-bottom: var(--rbrh-spacing-16);
+ }
+
+ .lg-m-y-18 {
+ margin-top: var(--rbrh-spacing-18);
+ margin-bottom: var(--rbrh-spacing-18);
+ }
+
+ .lg-m-y-20 {
+ margin-top: var(--rbrh-spacing-20);
+ margin-bottom: var(--rbrh-spacing-20);
+ }
+
+ .lg-m-y-24 {
+ margin-top: var(--rbrh-spacing-24);
+ margin-bottom: var(--rbrh-spacing-24);
+ }
+
+ .lg-m-t-0 {
+ margin-top: 0;
+ }
+
+ .lg-m-t-1 {
+ margin-top: var(--rbrh-spacing-1);
+ }
+
+ .lg-m-t-2 {
+ margin-top: var(--rbrh-spacing-2);
+ }
+
+ .lg-m-t-3 {
+ margin-top: var(--rbrh-spacing-3);
+ }
+
+ .lg-m-t-4 {
+ margin-top: var(--rbrh-spacing-4);
+ }
+
+ .lg-m-t-5 {
+ margin-top: var(--rbrh-spacing-5);
+ }
+
+ .lg-m-t-6 {
+ margin-top: var(--rbrh-spacing-6);
+ }
+
+ .lg-m-t-7 {
+ margin-top: var(--rbrh-spacing-7);
+ }
+
+ .lg-m-t-8 {
+ margin-top: var(--rbrh-spacing-8);
+ }
+
+ .lg-m-t-9 {
+ margin-top: var(--rbrh-spacing-9);
+ }
+
+ .lg-m-t-10 {
+ margin-top: var(--rbrh-spacing-10);
+ }
+
+ .lg-m-t-12 {
+ margin-top: var(--rbrh-spacing-12);
+ }
+
+ .lg-m-t-14 {
+ margin-top: var(--rbrh-spacing-14);
+ }
+
+ .lg-m-t-16 {
+ margin-top: var(--rbrh-spacing-16);
+ }
+
+ .lg-m-t-18 {
+ margin-top: var(--rbrh-spacing-18);
+ }
+
+ .lg-m-t-20 {
+ margin-top: var(--rbrh-spacing-20);
+ }
+
+ .lg-m-t-24 {
+ margin-top: var(--rbrh-spacing-24);
+ }
+
+ .lg-m-b-0 {
+ margin-bottom: 0;
+ }
+
+ .lg-m-b-1 {
+ margin-bottom: var(--rbrh-spacing-1);
+ }
+
+ .lg-m-b-2 {
+ margin-bottom: var(--rbrh-spacing-2);
+ }
+
+ .lg-m-b-3 {
+ margin-bottom: var(--rbrh-spacing-3);
+ }
+
+ .lg-m-b-4 {
+ margin-bottom: var(--rbrh-spacing-4);
+ }
+
+ .lg-m-b-5 {
+ margin-bottom: var(--rbrh-spacing-5);
+ }
+
+ .lg-m-b-6 {
+ margin-bottom: var(--rbrh-spacing-6);
+ }
+
+ .lg-m-b-7 {
+ margin-bottom: var(--rbrh-spacing-7);
+ }
+
+ .lg-m-b-8 {
+ margin-bottom: var(--rbrh-spacing-8);
+ }
+
+ .lg-m-b-9 {
+ margin-bottom: var(--rbrh-spacing-9);
+ }
+
+ .lg-m-b-10 {
+ margin-bottom: var(--rbrh-spacing-10);
+ }
+
+ .lg-m-b-12 {
+ margin-bottom: var(--rbrh-spacing-12);
+ }
+
+ .lg-m-b-14 {
+ margin-bottom: var(--rbrh-spacing-14);
+ }
+
+ .lg-m-b-16 {
+ margin-bottom: var(--rbrh-spacing-16);
+ }
+
+ .lg-m-b-18 {
+ margin-bottom: var(--rbrh-spacing-18);
+ }
+
+ .lg-m-b-20 {
+ margin-bottom: var(--rbrh-spacing-20);
+ }
+
+ .lg-m-b-24 {
+ margin-bottom: var(--rbrh-spacing-24);
+ }
+
+ .lg-m-r-0 {
+ margin-right: 0;
+ }
+
+ .lg-m-r-1 {
+ margin-right: var(--rbrh-spacing-1);
+ }
+
+ .lg-m-r-2 {
+ margin-right: var(--rbrh-spacing-2);
+ }
+
+ .lg-m-r-3 {
+ margin-right: var(--rbrh-spacing-3);
+ }
+
+ .lg-m-r-4 {
+ margin-right: var(--rbrh-spacing-4);
+ }
+
+ .lg-m-r-5 {
+ margin-right: var(--rbrh-spacing-5);
+ }
+
+ .lg-m-r-6 {
+ margin-right: var(--rbrh-spacing-6);
+ }
+
+ .lg-m-r-7 {
+ margin-right: var(--rbrh-spacing-7);
+ }
+
+ .lg-m-r-8 {
+ margin-right: var(--rbrh-spacing-8);
+ }
+
+ .lg-m-r-9 {
+ margin-right: var(--rbrh-spacing-9);
+ }
+
+ .lg-m-r-10 {
+ margin-right: var(--rbrh-spacing-10);
+ }
+
+ .lg-m-r-12 {
+ margin-right: var(--rbrh-spacing-12);
+ }
+
+ .lg-m-r-14 {
+ margin-right: var(--rbrh-spacing-14);
+ }
+
+ .lg-m-r-16 {
+ margin-right: var(--rbrh-spacing-16);
+ }
+
+ .lg-m-r-18 {
+ margin-right: var(--rbrh-spacing-18);
+ }
+
+ .lg-m-r-20 {
+ margin-right: var(--rbrh-spacing-20);
+ }
+
+ .lg-m-r-24 {
+ margin-right: var(--rbrh-spacing-24);
+ }
+
+ .lg-m-l-0 {
+ margin-left: 0;
+ }
+
+ .lg-m-l-1 {
+ margin-left: var(--rbrh-spacing-1);
+ }
+
+ .lg-m-l-2 {
+ margin-left: var(--rbrh-spacing-2);
+ }
+
+ .lg-m-l-3 {
+ margin-left: var(--rbrh-spacing-3);
+ }
+
+ .lg-m-l-4 {
+ margin-left: var(--rbrh-spacing-4);
+ }
+
+ .lg-m-l-5 {
+ margin-left: var(--rbrh-spacing-5);
+ }
+
+ .lg-m-l-6 {
+ margin-left: var(--rbrh-spacing-6);
+ }
+
+ .lg-m-l-7 {
+ margin-left: var(--rbrh-spacing-7);
+ }
+
+ .lg-m-l-8 {
+ margin-left: var(--rbrh-spacing-8);
+ }
+
+ .lg-m-l-9 {
+ margin-left: var(--rbrh-spacing-9);
+ }
+
+ .lg-m-l-10 {
+ margin-left: var(--rbrh-spacing-10);
+ }
+
+ .lg-m-l-12 {
+ margin-left: var(--rbrh-spacing-12);
+ }
+
+ .lg-m-l-14 {
+ margin-left: var(--rbrh-spacing-14);
+ }
+
+ .lg-m-l-16 {
+ margin-left: var(--rbrh-spacing-16);
+ }
+
+ .lg-m-l-18 {
+ margin-left: var(--rbrh-spacing-18);
+ }
+
+ .lg-m-l-20 {
+ margin-left: var(--rbrh-spacing-20);
+ }
+
+ .lg-m-l-24 {
+ margin-left: var(--rbrh-spacing-24);
+ }
+}
\ No newline at end of file
diff --git a/src/styles/src/utilities/responsive-padding.css b/src/styles/src/utilities/responsive-padding.css
new file mode 100644
index 0000000..ac281a2
--- /dev/null
+++ b/src/styles/src/utilities/responsive-padding.css
@@ -0,0 +1,1198 @@
+@mixin screen-xs-up {
+ .xs-p-0 {
+ padding: 0;
+ }
+ .xs-p-1 {
+ padding: var(--rbrh-spacing-1);
+ }
+ .xs-p-2 {
+ padding: var(--rbrh-spacing-2);
+ }
+ .xs-p-3 {
+ padding: var(--rbrh-spacing-3);
+ }
+ .xs-p-4 {
+ padding: var(--rbrh-spacing-4);
+ }
+ .xs-p-5 {
+ padding: var(--rbrh-spacing-5);
+ }
+ .xs-p-6 {
+ padding: var(--rbrh-spacing-6);
+ }
+ .xs-p-7 {
+ padding: var(--rbrh-spacing-7);
+ }
+ .xs-p-8 {
+ padding: var(--rbrh-spacing-8);
+ }
+ .xs-p-9 {
+ padding: var(--rbrh-spacing-9);
+ }
+ .xs-p-10 {
+ padding: var(--rbrh-spacing-10);
+ }
+ .xs-p-12 {
+ padding: var(--rbrh-spacing-12);
+ }
+ .xs-p-14 {
+ padding: var(--rbrh-spacing-14);
+ }
+ .xs-p-16 {
+ padding: var(--rbrh-spacing-16);
+ }
+ .xs-p-18 {
+ padding: var(--rbrh-spacing-18);
+ }
+ .xs-p-20 {
+ padding: var(--rbrh-spacing-20);
+ }
+ .xs-p-24 {
+ padding: var(--rbrh-spacing-24);
+ }
+
+ .xs-p-x-0 {
+ padding-left: 0;
+ padding-right: 0;
+ }
+ .xs-p-x-1 {
+ padding-left: var(--rbrh-spacing-1);
+ padding-right: var(--rbrh-spacing-1);
+ }
+ .xs-p-x-2 {
+ padding-left: var(--rbrh-spacing-2);
+ padding-right: var(--rbrh-spacing-2);
+ }
+ .xs-p-x-3 {
+ padding-left: var(--rbrh-spacing-3);
+ padding-right: var(--rbrh-spacing-3);
+ }
+ .xs-p-x-4 {
+ padding-left: var(--rbrh-spacing-4);
+ padding-right: var(--rbrh-spacing-4);
+ }
+ .xs-p-x-5 {
+ padding-left: var(--rbrh-spacing-5);
+ padding-right: var(--rbrh-spacing-5);
+ }
+ .xs-p-x-6 {
+ padding-left: var(--rbrh-spacing-6);
+ padding-right: var(--rbrh-spacing-6);
+ }
+ .xs-p-x-7 {
+ padding-left: var(--rbrh-spacing-7);
+ padding-right: var(--rbrh-spacing-7);
+ }
+ .xs-p-x-8 {
+ padding-left: var(--rbrh-spacing-8);
+ padding-right: var(--rbrh-spacing-8);
+ }
+ .xs-p-x-9 {
+ padding-left: var(--rbrh-spacing-9);
+ padding-right: var(--rbrh-spacing-9);
+ }
+ .xs-p-x-10 {
+ padding-left: var(--rbrh-spacing-10);
+ padding-right: var(--rbrh-spacing-10);
+ }
+ .xs-p-x-12 {
+ padding-left: var(--rbrh-spacing-12);
+ padding-right: var(--rbrh-spacing-12);
+ }
+ .xs-p-x-14 {
+ padding-left: var(--rbrh-spacing-14);
+ padding-right: var(--rbrh-spacing-14);
+ }
+ .xs-p-x-16 {
+ padding-left: var(--rbrh-spacing-16);
+ padding-right: var(--rbrh-spacing-16);
+ }
+ .xs-p-x-18 {
+ padding-left: var(--rbrh-spacing-18);
+ padding-right: var(--rbrh-spacing-18);
+ }
+ .xs-p-x-20 {
+ padding-left: var(--rbrh-spacing-20);
+ padding-right: var(--rbrh-spacing-20);
+ }
+ .xs-p-x-24 {
+ padding-left: var(--rbrh-spacing-24);
+ padding-right: var(--rbrh-spacing-24);
+ }
+
+ .xs-p-y-0 {
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+
+ .xs-p-y-1 {
+ padding-top: var(--rbrh-spacing-1);
+ padding-bottom: var(--rbrh-spacing-1);
+ }
+ .xs-p-y-2 {
+ padding-top: var(--rbrh-spacing-2);
+ padding-bottom: var(--rbrh-spacing-2);
+ }
+ .xs-p-y-3 {
+ padding-top: var(--rbrh-spacing-3);
+ padding-bottom: var(--rbrh-spacing-3);
+ }
+ .xs-p-y-4 {
+ padding-top: var(--rbrh-spacing-4);
+ padding-bottom: var(--rbrh-spacing-4);
+ }
+ .xs-p-y-5 {
+ padding-top: var(--rbrh-spacing-5);
+ padding-bottom: var(--rbrh-spacing-5);
+ }
+ .xs-p-y-6 {
+ padding-top: var(--rbrh-spacing-6);
+ padding-bottom: var(--rbrh-spacing-6);
+ }
+ .xs-p-y-7 {
+ padding-top: var(--rbrh-spacing-7);
+ padding-bottom: var(--rbrh-spacing-7);
+ }
+ .xs-p-y-8 {
+ padding-top: var(--rbrh-spacing-8);
+ padding-bottom: var(--rbrh-spacing-8);
+ }
+ .xs-p-y-9 {
+ padding-top: var(--rbrh-spacing-9);
+ padding-bottom: var(--rbrh-spacing-9);
+ }
+ .xs-p-y-10 {
+ padding-top: var(--rbrh-spacing-10);
+ padding-bottom: var(--rbrh-spacing-10);
+ }
+ .xs-p-y-12 {
+ padding-top: var(--rbrh-spacing-12);
+ padding-bottom: var(--rbrh-spacing-12);
+ }
+ .xs-p-y-14 {
+ padding-top: var(--rbrh-spacing-14);
+ padding-bottom: var(--rbrh-spacing-14);
+ }
+ .xs-p-y-16 {
+ padding-top: var(--rbrh-spacing-16);
+ padding-bottom: var(--rbrh-spacing-16);
+ }
+ .xs-p-y-18 {
+ padding-top: var(--rbrh-spacing-18);
+ padding-bottom: var(--rbrh-spacing-18);
+ }
+ .xs-p-y-20 {
+ padding-top: var(--rbrh-spacing-20);
+ padding-bottom: var(--rbrh-spacing-20);
+ }
+ .xs-p-y-24 {
+ padding-top: var(--rbrh-spacing-24);
+ padding-bottom: var(--rbrh-spacing-24);
+ }
+
+ .xs-p-t-0 {
+ padding-top: 0;
+ }
+ .xs-p-t-1 {
+ padding-top: var(--rbrh-spacing-1);
+ }
+ .xs-p-t-2 {
+ padding-top: var(--rbrh-spacing-2);
+ }
+ .xs-p-t-3 {
+ padding-top: var(--rbrh-spacing-3);
+ }
+ .xs-p-t-4 {
+ padding-top: var(--rbrh-spacing-4);
+ }
+ .xs-p-t-5 {
+ padding-top: var(--rbrh-spacing-5);
+ }
+ .xs-p-t-6 {
+ padding-top: var(--rbrh-spacing-6);
+ }
+ .xs-p-t-7 {
+ padding-top: var(--rbrh-spacing-7);
+ }
+ .xs-p-t-8 {
+ padding-top: var(--rbrh-spacing-8);
+ }
+ .xs-p-t-9 {
+ padding-top: var(--rbrh-spacing-9);
+ }
+ .xs-p-t-10 {
+ padding-top: var(--rbrh-spacing-10);
+ }
+ .xs-p-t-12 {
+ padding-top: var(--rbrh-spacing-12);
+ }
+ .xs-p-t-14 {
+ padding-top: var(--rbrh-spacing-14);
+ }
+ .xs-p-t-16 {
+ padding-top: var(--rbrh-spacing-16);
+ }
+ .xs-p-t-18 {
+ padding-top: var(--rbrh-spacing-18);
+ }
+ .xs-p-t-20 {
+ padding-top: var(--rbrh-spacing-20);
+ }
+ .xs-p-t-24 {
+ padding-top: var(--rbrh-spacing-24);
+ }
+
+ .xs-p-b-0 {
+ padding-bottom: 0;
+ }
+ .xs-p-b-1 {
+ padding-bottom: var(--rbrh-spacing-1);
+ }
+ .xs-p-b-2 {
+ padding-bottom: var(--rbrh-spacing-2);
+ }
+ .xs-p-b-3 {
+ padding-bottom: var(--rbrh-spacing-3);
+ }
+ .xs-p-b-4 {
+ padding-bottom: var(--rbrh-spacing-4);
+ }
+ .xs-p-b-5 {
+ padding-bottom: var(--rbrh-spacing-5);
+ }
+ .xs-p-b-6 {
+ padding-bottom: var(--rbrh-spacing-6);
+ }
+ .xs-p-b-7 {
+ padding-bottom: var(--rbrh-spacing-7);
+ }
+ .xs-p-b-8 {
+ padding-bottom: var(--rbrh-spacing-8);
+ }
+ .xs-p-b-9 {
+ padding-bottom: var(--rbrh-spacing-9);
+ }
+ .xs-p-b-10 {
+ padding-bottom: var(--rbrh-spacing-10);
+ }
+ .xs-p-b-12 {
+ padding-bottom: var(--rbrh-spacing-12);
+ }
+ .xs-p-b-14 {
+ padding-bottom: var(--rbrh-spacing-14);
+ }
+ .xs-p-b-16 {
+ padding-bottom: var(--rbrh-spacing-16);
+ }
+ .xs-p-b-18 {
+ padding-bottom: var(--rbrh-spacing-18);
+ }
+ .xs-p-b-20 {
+ padding-bottom: var(--rbrh-spacing-20);
+ }
+ .xs-p-b-24 {
+ padding-bottom: var(--rbrh-spacing-24);
+ }
+
+ .xs-p-r-0 {
+ padding-right: 0;
+ }
+ .xs-p-r-1 {
+ padding-right: var(--rbrh-spacing-1);
+ }
+ .xs-p-r-2 {
+ padding-right: var(--rbrh-spacing-2);
+ }
+ .xs-p-r-3 {
+ padding-right: var(--rbrh-spacing-3);
+ }
+ .xs-p-r-4 {
+ padding-right: var(--rbrh-spacing-4);
+ }
+ .xs-p-r-5 {
+ padding-right: var(--rbrh-spacing-5);
+ }
+ .xs-p-r-6 {
+ padding-right: var(--rbrh-spacing-6);
+ }
+ .xs-p-r-7 {
+ padding-right: var(--rbrh-spacing-7);
+ }
+ .xs-p-r-8 {
+ padding-right: var(--rbrh-spacing-8);
+ }
+ .xs-p-r-9 {
+ padding-right: var(--rbrh-spacing-9);
+ }
+ .xs-p-r-10 {
+ padding-right: var(--rbrh-spacing-10);
+ }
+ .xs-p-r-12 {
+ padding-right: var(--rbrh-spacing-12);
+ }
+ .xs-p-r-14 {
+ padding-right: var(--rbrh-spacing-14);
+ }
+ .xs-p-r-16 {
+ padding-right: var(--rbrh-spacing-16);
+ }
+ .xs-p-r-18 {
+ padding-right: var(--rbrh-spacing-18);
+ }
+ .xs-p-r-20 {
+ padding-right: var(--rbrh-spacing-20);
+ }
+ .xs-p-r-24 {
+ padding-right: var(--rbrh-spacing-24);
+ }
+
+ .xs-p-l-0 {
+ padding-left: 0;
+ }
+ .xs-p-l-1 {
+ padding-left: var(--rbrh-spacing-1);
+ }
+ .xs-p-l-2 {
+ padding-left: var(--rbrh-spacing-2);
+ }
+ .xs-p-l-3 {
+ padding-left: var(--rbrh-spacing-3);
+ }
+ .xs-p-l-4 {
+ padding-left: var(--rbrh-spacing-4);
+ }
+ .xs-p-l-5 {
+ padding-left: var(--rbrh-spacing-5);
+ }
+ .xs-p-l-6 {
+ padding-left: var(--rbrh-spacing-6);
+ }
+ .xs-p-l-7 {
+ padding-left: var(--rbrh-spacing-7);
+ }
+ .xs-p-l-8 {
+ padding-left: var(--rbrh-spacing-8);
+ }
+ .xs-p-l-9 {
+ padding-left: var(--rbrh-spacing-9);
+ }
+ .xs-p-l-10 {
+ padding-left: var(--rbrh-spacing-10);
+ }
+ .xs-p-l-12 {
+ padding-left: var(--rbrh-spacing-12);
+ }
+ .xs-p-l-14 {
+ padding-left: var(--rbrh-spacing-14);
+ }
+ .xs-p-l-16 {
+ padding-left: var(--rbrh-spacing-16);
+ }
+ .xs-p-l-18 {
+ padding-left: var(--rbrh-spacing-18);
+ }
+ .xs-p-l-20 {
+ padding-left: var(--rbrh-spacing-20);
+ }
+ .xs-p-l-24 {
+ padding-left: var(--rbrh-spacing-24);
+ }
+}
+@mixin screen-md-up {
+ .md-p-0 {
+ padding: 0;
+ }
+ .md-p-1 {
+ padding: var(--rbrh-spacing-1);
+ }
+ .md-p-2 {
+ padding: var(--rbrh-spacing-2);
+ }
+ .md-p-3 {
+ padding: var(--rbrh-spacing-3);
+ }
+ .md-p-4 {
+ padding: var(--rbrh-spacing-4);
+ }
+ .md-p-5 {
+ padding: var(--rbrh-spacing-5);
+ }
+ .md-p-6 {
+ padding: var(--rbrh-spacing-6);
+ }
+ .md-p-7 {
+ padding: var(--rbrh-spacing-7);
+ }
+ .md-p-8 {
+ padding: var(--rbrh-spacing-8);
+ }
+ .md-p-9 {
+ padding: var(--rbrh-spacing-9);
+ }
+ .md-p-10 {
+ padding: var(--rbrh-spacing-10);
+ }
+ .md-p-12 {
+ padding: var(--rbrh-spacing-12);
+ }
+ .md-p-14 {
+ padding: var(--rbrh-spacing-14);
+ }
+ .md-p-16 {
+ padding: var(--rbrh-spacing-16);
+ }
+ .md-p-18 {
+ padding: var(--rbrh-spacing-18);
+ }
+ .md-p-20 {
+ padding: var(--rbrh-spacing-20);
+ }
+ .md-p-24 {
+ padding: var(--rbrh-spacing-24);
+ }
+
+ .md-p-x-0 {
+ padding-left: 0;
+ padding-right: 0;
+ }
+ .md-p-x-1 {
+ padding-left: var(--rbrh-spacing-1);
+ padding-right: var(--rbrh-spacing-1);
+ }
+ .md-p-x-2 {
+ padding-left: var(--rbrh-spacing-2);
+ padding-right: var(--rbrh-spacing-2);
+ }
+ .md-p-x-3 {
+ padding-left: var(--rbrh-spacing-3);
+ padding-right: var(--rbrh-spacing-3);
+ }
+ .md-p-x-4 {
+ padding-left: var(--rbrh-spacing-4);
+ padding-right: var(--rbrh-spacing-4);
+ }
+ .md-p-x-5 {
+ padding-left: var(--rbrh-spacing-5);
+ padding-right: var(--rbrh-spacing-5);
+ }
+ .md-p-x-6 {
+ padding-left: var(--rbrh-spacing-6);
+ padding-right: var(--rbrh-spacing-6);
+ }
+ .md-p-x-7 {
+ padding-left: var(--rbrh-spacing-7);
+ padding-right: var(--rbrh-spacing-7);
+ }
+ .md-p-x-8 {
+ padding-left: var(--rbrh-spacing-8);
+ padding-right: var(--rbrh-spacing-8);
+ }
+ .md-p-x-9 {
+ padding-left: var(--rbrh-spacing-9);
+ padding-right: var(--rbrh-spacing-9);
+ }
+ .md-p-x-10 {
+ padding-left: var(--rbrh-spacing-10);
+ padding-right: var(--rbrh-spacing-10);
+ }
+ .md-p-x-12 {
+ padding-left: var(--rbrh-spacing-12);
+ padding-right: var(--rbrh-spacing-12);
+ }
+ .md-p-x-14 {
+ padding-left: var(--rbrh-spacing-14);
+ padding-right: var(--rbrh-spacing-14);
+ }
+ .md-p-x-16 {
+ padding-left: var(--rbrh-spacing-16);
+ padding-right: var(--rbrh-spacing-16);
+ }
+ .md-p-x-18 {
+ padding-left: var(--rbrh-spacing-18);
+ padding-right: var(--rbrh-spacing-18);
+ }
+ .md-p-x-20 {
+ padding-left: var(--rbrh-spacing-20);
+ padding-right: var(--rbrh-spacing-20);
+ }
+ .md-p-x-24 {
+ padding-left: var(--rbrh-spacing-24);
+ padding-right: var(--rbrh-spacing-24);
+ }
+
+ .md-p-y-0 {
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+ .md-p-y-1 {
+ padding-top: var(--rbrh-spacing-1);
+ padding-bottom: var(--rbrh-spacing-1);
+ }
+ .md-p-y-2 {
+ padding-top: var(--rbrh-spacing-2);
+ padding-bottom: var(--rbrh-spacing-2);
+ }
+ .md-p-y-3 {
+ padding-top: var(--rbrh-spacing-3);
+ padding-bottom: var(--rbrh-spacing-3);
+ }
+ .md-p-y-4 {
+ padding-top: var(--rbrh-spacing-4);
+ padding-bottom: var(--rbrh-spacing-4);
+ }
+ .md-p-y-5 {
+ padding-top: var(--rbrh-spacing-5);
+ padding-bottom: var(--rbrh-spacing-5);
+ }
+ .md-p-y-6 {
+ padding-top: var(--rbrh-spacing-6);
+ padding-bottom: var(--rbrh-spacing-6);
+ }
+ .md-p-y-7 {
+ padding-top: var(--rbrh-spacing-7);
+ padding-bottom: var(--rbrh-spacing-7);
+ }
+ .md-p-y-8 {
+ padding-top: var(--rbrh-spacing-8);
+ padding-bottom: var(--rbrh-spacing-8);
+ }
+ .md-p-y-9 {
+ padding-top: var(--rbrh-spacing-9);
+ padding-bottom: var(--rbrh-spacing-9);
+ }
+ .md-p-y-10 {
+ padding-top: var(--rbrh-spacing-10);
+ padding-bottom: var(--rbrh-spacing-10);
+ }
+ .md-p-y-12 {
+ padding-top: var(--rbrh-spacing-12);
+ padding-bottom: var(--rbrh-spacing-12);
+ }
+ .md-p-y-14 {
+ padding-top: var(--rbrh-spacing-14);
+ padding-bottom: var(--rbrh-spacing-14);
+ }
+ .md-p-y-16 {
+ padding-top: var(--rbrh-spacing-16);
+ padding-bottom: var(--rbrh-spacing-16);
+ }
+ .md-p-y-18 {
+ padding-top: var(--rbrh-spacing-18);
+ padding-bottom: var(--rbrh-spacing-18);
+ }
+ .md-p-y-20 {
+ padding-top: var(--rbrh-spacing-20);
+ padding-bottom: var(--rbrh-spacing-20);
+ }
+ .md-p-y-24 {
+ padding-top: var(--rbrh-spacing-24);
+ padding-bottom: var(--rbrh-spacing-24);
+ }
+
+ .md-p-t-0 {
+ padding-top: 0;
+ }
+ .md-p-t-1 {
+ padding-top: var(--rbrh-spacing-1);
+ }
+ .md-p-t-2 {
+ padding-top: var(--rbrh-spacing-2);
+ }
+ .md-p-t-3 {
+ padding-top: var(--rbrh-spacing-3);
+ }
+ .md-p-t-4 {
+ padding-top: var(--rbrh-spacing-4);
+ }
+ .md-p-t-5 {
+ padding-top: var(--rbrh-spacing-5);
+ }
+ .md-p-t-6 {
+ padding-top: var(--rbrh-spacing-6);
+ }
+ .md-p-t-7 {
+ padding-top: var(--rbrh-spacing-7);
+ }
+ .md-p-t-8 {
+ padding-top: var(--rbrh-spacing-8);
+ }
+ .md-p-t-9 {
+ padding-top: var(--rbrh-spacing-9);
+ }
+ .md-p-t-10 {
+ padding-top: var(--rbrh-spacing-10);
+ }
+ .md-p-t-12 {
+ padding-top: var(--rbrh-spacing-12);
+ }
+ .md-p-t-14 {
+ padding-top: var(--rbrh-spacing-14);
+ }
+ .md-p-t-16 {
+ padding-top: var(--rbrh-spacing-16);
+ }
+ .md-p-t-18 {
+ padding-top: var(--rbrh-spacing-18);
+ }
+ .md-p-t-20 {
+ padding-top: var(--rbrh-spacing-20);
+ }
+ .md-p-t-24 {
+ padding-top: var(--rbrh-spacing-24);
+ }
+
+ .md-p-b-0 {
+ padding-bottom: 0;
+ }
+ .md-p-b-1 {
+ padding-bottom: var(--rbrh-spacing-1);
+ }
+ .md-p-b-2 {
+ padding-bottom: var(--rbrh-spacing-2);
+ }
+ .md-p-b-3 {
+ padding-bottom: var(--rbrh-spacing-3);
+ }
+ .md-p-b-4 {
+ padding-bottom: var(--rbrh-spacing-4);
+ }
+ .md-p-b-5 {
+ padding-bottom: var(--rbrh-spacing-5);
+ }
+ .md-p-b-6 {
+ padding-bottom: var(--rbrh-spacing-6);
+ }
+ .md-p-b-7 {
+ padding-bottom: var(--rbrh-spacing-7);
+ }
+ .md-p-b-8 {
+ padding-bottom: var(--rbrh-spacing-8);
+ }
+ .md-p-b-9 {
+ padding-bottom: var(--rbrh-spacing-9);
+ }
+ .md-p-b-10 {
+ padding-bottom: var(--rbrh-spacing-10);
+ }
+ .md-p-b-12 {
+ padding-bottom: var(--rbrh-spacing-12);
+ }
+ .md-p-b-14 {
+ padding-bottom: var(--rbrh-spacing-14);
+ }
+ .md-p-b-16 {
+ padding-bottom: var(--rbrh-spacing-16);
+ }
+ .md-p-b-18 {
+ padding-bottom: var(--rbrh-spacing-18);
+ }
+ .md-p-b-20 {
+ padding-bottom: var(--rbrh-spacing-20);
+ }
+ .md-p-b-24 {
+ padding-bottom: var(--rbrh-spacing-24);
+ }
+
+ .md-p-r-0 {
+ padding-right: 0;
+ }
+ .md-p-r-1 {
+ padding-right: var(--rbrh-spacing-1);
+ }
+ .md-p-r-2 {
+ padding-right: var(--rbrh-spacing-2);
+ }
+ .md-p-r-3 {
+ padding-right: var(--rbrh-spacing-3);
+ }
+ .md-p-r-4 {
+ padding-right: var(--rbrh-spacing-4);
+ }
+ .md-p-r-5 {
+ padding-right: var(--rbrh-spacing-5);
+ }
+ .md-p-r-6 {
+ padding-right: var(--rbrh-spacing-6);
+ }
+ .md-p-r-7 {
+ padding-right: var(--rbrh-spacing-7);
+ }
+ .md-p-r-8 {
+ padding-right: var(--rbrh-spacing-8);
+ }
+ .md-p-r-9 {
+ padding-right: var(--rbrh-spacing-9);
+ }
+ .md-p-r-10 {
+ padding-right: var(--rbrh-spacing-10);
+ }
+ .md-p-r-12 {
+ padding-right: var(--rbrh-spacing-12);
+ }
+ .md-p-r-14 {
+ padding-right: var(--rbrh-spacing-14);
+ }
+ .md-p-r-16 {
+ padding-right: var(--rbrh-spacing-16);
+ }
+ .md-p-r-18 {
+ padding-right: var(--rbrh-spacing-18);
+ }
+ .md-p-r-20 {
+ padding-right: var(--rbrh-spacing-20);
+ }
+ .md-p-r-24 {
+ padding-right: var(--rbrh-spacing-24);
+ }
+
+ .md-p-l-0 {
+ padding-left: 0;
+ }
+ .md-p-l-1 {
+ padding-left: var(--rbrh-spacing-1);
+ }
+ .md-p-l-2 {
+ padding-left: var(--rbrh-spacing-2);
+ }
+ .md-p-l-3 {
+ padding-left: var(--rbrh-spacing-3);
+ }
+ .md-p-l-4 {
+ padding-left: var(--rbrh-spacing-4);
+ }
+ .md-p-l-5 {
+ padding-left: var(--rbrh-spacing-5);
+ }
+ .md-p-l-6 {
+ padding-left: var(--rbrh-spacing-6);
+ }
+ .md-p-l-7 {
+ padding-left: var(--rbrh-spacing-7);
+ }
+ .md-p-l-8 {
+ padding-left: var(--rbrh-spacing-8);
+ }
+ .md-p-l-9 {
+ padding-left: var(--rbrh-spacing-9);
+ }
+ .md-p-l-10 {
+ padding-left: var(--rbrh-spacing-10);
+ }
+ .md-p-l-12 {
+ padding-left: var(--rbrh-spacing-12);
+ }
+ .md-p-l-14 {
+ padding-left: var(--rbrh-spacing-14);
+ }
+ .md-p-l-16 {
+ padding-left: var(--rbrh-spacing-16);
+ }
+ .md-p-l-18 {
+ padding-left: var(--rbrh-spacing-18);
+ }
+ .md-p-l-20 {
+ padding-left: var(--rbrh-spacing-20);
+ }
+ .md-p-l-24 {
+ padding-left: var(--rbrh-spacing-24);
+ }
+}
+@mixin screen-lg-up {
+ .lg-p-0 {
+ padding: 0;
+ }
+ .lg-p-1 {
+ padding: var(--rbrh-spacing-1);
+ }
+ .lg-p-2 {
+ padding: var(--rbrh-spacing-2);
+ }
+ .lg-p-3 {
+ padding: var(--rbrh-spacing-3);
+ }
+ .lg-p-4 {
+ padding: var(--rbrh-spacing-4);
+ }
+ .lg-p-5 {
+ padding: var(--rbrh-spacing-5);
+ }
+ .lg-p-6 {
+ padding: var(--rbrh-spacing-6);
+ }
+ .lg-p-7 {
+ padding: var(--rbrh-spacing-7);
+ }
+ .lg-p-8 {
+ padding: var(--rbrh-spacing-8);
+ }
+ .lg-p-9 {
+ padding: var(--rbrh-spacing-9);
+ }
+ .lg-p-10 {
+ padding: var(--rbrh-spacing-10);
+ }
+ .lg-p-12 {
+ padding: var(--rbrh-spacing-12);
+ }
+ .lg-p-14 {
+ padding: var(--rbrh-spacing-14);
+ }
+ .lg-p-16 {
+ padding: var(--rbrh-spacing-16);
+ }
+ .lg-p-18 {
+ padding: var(--rbrh-spacing-18);
+ }
+ .lg-p-20 {
+ padding: var(--rbrh-spacing-20);
+ }
+ .lg-p-24 {
+ padding: var(--rbrh-spacing-24);
+ }
+
+ .lg-p-x-0 {
+ padding-left: 0;
+ padding-right: 0;
+ }
+ .lg-p-x-1 {
+ padding-left: var(--rbrh-spacing-1);
+ padding-right: var(--rbrh-spacing-1);
+ }
+ .lg-p-x-2 {
+ padding-left: var(--rbrh-spacing-2);
+ padding-right: var(--rbrh-spacing-2);
+ }
+ .lg-p-x-3 {
+ padding-left: var(--rbrh-spacing-3);
+ padding-right: var(--rbrh-spacing-3);
+ }
+ .lg-p-x-4 {
+ padding-left: var(--rbrh-spacing-4);
+ padding-right: var(--rbrh-spacing-4);
+ }
+ .lg-p-x-5 {
+ padding-left: var(--rbrh-spacing-5);
+ padding-right: var(--rbrh-spacing-5);
+ }
+ .lg-p-x-6 {
+ padding-left: var(--rbrh-spacing-6);
+ padding-right: var(--rbrh-spacing-6);
+ }
+ .lg-p-x-7 {
+ padding-left: var(--rbrh-spacing-7);
+ padding-right: var(--rbrh-spacing-7);
+ }
+ .lg-p-x-8 {
+ padding-left: var(--rbrh-spacing-8);
+ padding-right: var(--rbrh-spacing-8);
+ }
+ .lg-p-x-9 {
+ padding-left: var(--rbrh-spacing-9);
+ padding-right: var(--rbrh-spacing-9);
+ }
+ .lg-p-x-10 {
+ padding-left: var(--rbrh-spacing-10);
+ padding-right: var(--rbrh-spacing-10);
+ }
+ .lg-p-x-12 {
+ padding-left: var(--rbrh-spacing-12);
+ padding-right: var(--rbrh-spacing-12);
+ }
+ .lg-p-x-14 {
+ padding-left: var(--rbrh-spacing-14);
+ padding-right: var(--rbrh-spacing-14);
+ }
+ .lg-p-x-16 {
+ padding-left: var(--rbrh-spacing-16);
+ padding-right: var(--rbrh-spacing-16);
+ }
+ .lg-p-x-18 {
+ padding-left: var(--rbrh-spacing-18);
+ padding-right: var(--rbrh-spacing-18);
+ }
+ .lg-p-x-20 {
+ padding-left: var(--rbrh-spacing-20);
+ padding-right: var(--rbrh-spacing-20);
+ }
+ .lg-p-x-24 {
+ padding-left: var(--rbrh-spacing-24);
+ padding-right: var(--rbrh-spacing-24);
+ }
+
+ .lg-p-y-0 {
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+ .lg-p-y-1 {
+ padding-top: var(--rbrh-spacing-1);
+ padding-bottom: var(--rbrh-spacing-1);
+ }
+ .lg-p-y-2 {
+ padding-top: var(--rbrh-spacing-2);
+ padding-bottom: var(--rbrh-spacing-2);
+ }
+ .lg-p-y-3 {
+ padding-top: var(--rbrh-spacing-3);
+ padding-bottom: var(--rbrh-spacing-3);
+ }
+ .lg-p-y-4 {
+ padding-top: var(--rbrh-spacing-4);
+ padding-bottom: var(--rbrh-spacing-4);
+ }
+ .lg-p-y-5 {
+ padding-top: var(--rbrh-spacing-5);
+ padding-bottom: var(--rbrh-spacing-5);
+ }
+ .lg-p-y-6 {
+ padding-top: var(--rbrh-spacing-6);
+ padding-bottom: var(--rbrh-spacing-6);
+ }
+ .lg-p-y-7 {
+ padding-top: var(--rbrh-spacing-7);
+ padding-bottom: var(--rbrh-spacing-7);
+ }
+ .lg-p-y-8 {
+ padding-top: var(--rbrh-spacing-8);
+ padding-bottom: var(--rbrh-spacing-8);
+ }
+ .lg-p-y-9 {
+ padding-top: var(--rbrh-spacing-9);
+ padding-bottom: var(--rbrh-spacing-9);
+ }
+ .lg-p-y-10 {
+ padding-top: var(--rbrh-spacing-10);
+ padding-bottom: var(--rbrh-spacing-10);
+ }
+ .lg-p-y-12 {
+ padding-top: var(--rbrh-spacing-12);
+ padding-bottom: var(--rbrh-spacing-12);
+ }
+ .lg-p-y-14 {
+ padding-top: var(--rbrh-spacing-14);
+ padding-bottom: var(--rbrh-spacing-14);
+ }
+ .lg-p-y-16 {
+ padding-top: var(--rbrh-spacing-16);
+ padding-bottom: var(--rbrh-spacing-16);
+ }
+ .lg-p-y-18 {
+ padding-top: var(--rbrh-spacing-18);
+ padding-bottom: var(--rbrh-spacing-18);
+ }
+ .lg-p-y-20 {
+ padding-top: var(--rbrh-spacing-20);
+ padding-bottom: var(--rbrh-spacing-20);
+ }
+ .lg-p-y-24 {
+ padding-top: var(--rbrh-spacing-24);
+ padding-bottom: var(--rbrh-spacing-24);
+ }
+
+ .lg-p-t-0 {
+ padding-top: 0;
+ }
+ .lg-p-t-1 {
+ padding-top: var(--rbrh-spacing-1);
+ }
+ .lg-p-t-2 {
+ padding-top: var(--rbrh-spacing-2);
+ }
+ .lg-p-t-3 {
+ padding-top: var(--rbrh-spacing-3);
+ }
+ .lg-p-t-4 {
+ padding-top: var(--rbrh-spacing-4);
+ }
+ .lg-p-t-5 {
+ padding-top: var(--rbrh-spacing-5);
+ }
+ .lg-p-t-6 {
+ padding-top: var(--rbrh-spacing-6);
+ }
+ .lg-p-t-7 {
+ padding-top: var(--rbrh-spacing-7);
+ }
+ .lg-p-t-8 {
+ padding-top: var(--rbrh-spacing-8);
+ }
+ .lg-p-t-9 {
+ padding-top: var(--rbrh-spacing-9);
+ }
+ .lg-p-t-10 {
+ padding-top: var(--rbrh-spacing-10);
+ }
+ .lg-p-t-12 {
+ padding-top: var(--rbrh-spacing-12);
+ }
+ .lg-p-t-14 {
+ padding-top: var(--rbrh-spacing-14);
+ }
+ .lg-p-t-16 {
+ padding-top: var(--rbrh-spacing-16);
+ }
+ .lg-p-t-18 {
+ padding-top: var(--rbrh-spacing-18);
+ }
+ .lg-p-t-20 {
+ padding-top: var(--rbrh-spacing-20);
+ }
+ .lg-p-t-24 {
+ padding-top: var(--rbrh-spacing-24);
+ }
+
+ .lg-p-b-0 {
+ padding-bottom: 0;
+ }
+ .lg-p-b-1 {
+ padding-bottom: var(--rbrh-spacing-1);
+ }
+ .lg-p-b-2 {
+ padding-bottom: var(--rbrh-spacing-2);
+ }
+ .lg-p-b-3 {
+ padding-bottom: var(--rbrh-spacing-3);
+ }
+ .lg-p-b-4 {
+ padding-bottom: var(--rbrh-spacing-4);
+ }
+ .lg-p-b-5 {
+ padding-bottom: var(--rbrh-spacing-5);
+ }
+ .lg-p-b-6 {
+ padding-bottom: var(--rbrh-spacing-6);
+ }
+ .lg-p-b-7 {
+ padding-bottom: var(--rbrh-spacing-7);
+ }
+ .lg-p-b-8 {
+ padding-bottom: var(--rbrh-spacing-8);
+ }
+ .lg-p-b-9 {
+ padding-bottom: var(--rbrh-spacing-9);
+ }
+ .lg-p-b-10 {
+ padding-bottom: var(--rbrh-spacing-10);
+ }
+ .lg-p-b-12 {
+ padding-bottom: var(--rbrh-spacing-12);
+ }
+ .lg-p-b-14 {
+ padding-bottom: var(--rbrh-spacing-14);
+ }
+ .lg-p-b-16 {
+ padding-bottom: var(--rbrh-spacing-16);
+ }
+ .lg-p-b-18 {
+ padding-bottom: var(--rbrh-spacing-18);
+ }
+ .lg-p-b-20 {
+ padding-bottom: var(--rbrh-spacing-20);
+ }
+ .lg-p-b-24 {
+ padding-bottom: var(--rbrh-spacing-24);
+ }
+
+ .lg-p-r-0 {
+ padding-right: 0;
+ }
+ .lg-p-r-1 {
+ padding-right: var(--rbrh-spacing-1);
+ }
+ .lg-p-r-2 {
+ padding-right: var(--rbrh-spacing-2);
+ }
+ .lg-p-r-3 {
+ padding-right: var(--rbrh-spacing-3);
+ }
+ .lg-p-r-4 {
+ padding-right: var(--rbrh-spacing-4);
+ }
+ .lg-p-r-5 {
+ padding-right: var(--rbrh-spacing-5);
+ }
+ .lg-p-r-6 {
+ padding-right: var(--rbrh-spacing-6);
+ }
+ .lg-p-r-7 {
+ padding-right: var(--rbrh-spacing-7);
+ }
+ .lg-p-r-8 {
+ padding-right: var(--rbrh-spacing-8);
+ }
+ .lg-p-r-9 {
+ padding-right: var(--rbrh-spacing-9);
+ }
+ .lg-p-r-10 {
+ padding-right: var(--rbrh-spacing-10);
+ }
+ .lg-p-r-12 {
+ padding-right: var(--rbrh-spacing-12);
+ }
+ .lg-p-r-14 {
+ padding-right: var(--rbrh-spacing-14);
+ }
+ .lg-p-r-16 {
+ padding-right: var(--rbrh-spacing-16);
+ }
+ .lg-p-r-18 {
+ padding-right: var(--rbrh-spacing-18);
+ }
+ .lg-p-r-20 {
+ padding-right: var(--rbrh-spacing-20);
+ }
+ .lg-p-r-24 {
+ padding-right: var(--rbrh-spacing-24);
+ }
+
+ .lg-p-l-0 {
+ padding-left: 0;
+ }
+ .lg-p-l-1 {
+ padding-left: var(--rbrh-spacing-1);
+ }
+ .lg-p-l-2 {
+ padding-left: var(--rbrh-spacing-2);
+ }
+ .lg-p-l-3 {
+ padding-left: var(--rbrh-spacing-3);
+ }
+ .lg-p-l-4 {
+ padding-left: var(--rbrh-spacing-4);
+ }
+ .lg-p-l-5 {
+ padding-left: var(--rbrh-spacing-5);
+ }
+ .lg-p-l-6 {
+ padding-left: var(--rbrh-spacing-6);
+ }
+ .lg-p-l-7 {
+ padding-left: var(--rbrh-spacing-7);
+ }
+ .lg-p-l-8 {
+ padding-left: var(--rbrh-spacing-8);
+ }
+ .lg-p-l-9 {
+ padding-left: var(--rbrh-spacing-9);
+ }
+ .lg-p-l-10 {
+ padding-left: var(--rbrh-spacing-10);
+ }
+ .lg-p-l-12 {
+ padding-left: var(--rbrh-spacing-12);
+ }
+ .lg-p-l-14 {
+ padding-left: var(--rbrh-spacing-14);
+ }
+ .lg-p-l-16 {
+ padding-left: var(--rbrh-spacing-16);
+ }
+ .lg-p-l-18 {
+ padding-left: var(--rbrh-spacing-18);
+ }
+ .lg-p-l-20 {
+ padding-left: var(--rbrh-spacing-20);
+ }
+ .lg-p-l-24 {
+ padding-left: var(--rbrh-spacing-24);
+ }
+}
\ No newline at end of file
diff --git a/src/styles/src/utilities/responsive-width.css b/src/styles/src/utilities/responsive-width.css
new file mode 100644
index 0000000..87465d6
--- /dev/null
+++ b/src/styles/src/utilities/responsive-width.css
@@ -0,0 +1,336 @@
+@mixin screen-xs-up {
+ .xs-w-0 {
+ width: 0;
+ }
+ .xs-w-auto {
+ width: auto;
+ }
+ .xs-w-fit {
+ width: fit-content;
+ }
+ .xs-w-max {
+ width: max-content;
+ }
+ .xs-w-25 {
+ width: 25%;
+ }
+ .xs-w-35 {
+ width: 35%;
+ }
+ .xs-w-50 {
+ width: 50%;
+ }
+ .xs-w-65 {
+ width: 65%;
+ }
+ .xs-w-75 {
+ width: 75%;
+ }
+ .xs-w-100 {
+ width: 100%;
+ }
+ .xs-w-1 {
+ width: var(--rbrh-spacing-1);
+ }
+ .xs-w-2 {
+ width: var(--rbrh-spacing-2);
+ }
+ .xs-w-3 {
+ width: var(--rbrh-spacing-3);
+ }
+ .xs-w-4 {
+ width: var(--rbrh-spacing-4);
+ }
+ .xs-w-5 {
+ width: var(--rbrh-spacing-5);
+ }
+ .xs-w-6 {
+ width: var(--rbrh-spacing-6);
+ }
+ .xs-w-7 {
+ width: var(--rbrh-spacing-7);
+ }
+ .xs-w-8 {
+ width: var(--rbrh-spacing-8);
+ }
+ .xs-w-9 {
+ width: var(--rbrh-spacing-9);
+ }
+ .xs-w-10 {
+ width: var(--rbrh-spacing-10);
+ }
+ .xs-w-12 {
+ width: var(--rbrh-spacing-12);
+ }
+ .xs-w-14 {
+ width: var(--rbrh-spacing-14);
+ }
+ .xs-w-16 {
+ width: var(--rbrh-spacing-16);
+ }
+ .xs-w-18 {
+ width: var(--rbrh-spacing-18);
+ }
+ .xs-w-20 {
+ width: var(--rbrh-spacing-20);
+ }
+ .xs-w-24 {
+ width: var(--rbrh-spacing-24);
+ }
+
+ .xs-max-w-fit {
+ max-width: fit-content;
+ }
+ .xs-max-w-0 {
+ max-width: 0;
+ }
+ .xs-max-w-max {
+ max-width: max-content;
+ }
+ .xs-max-w-min {
+ max-width: min-content;
+ }
+ .xs-max-w-100 {
+ max-width: 100%;
+ }
+
+ .xs-min-w-fit {
+ min-width: fit-content;
+ }
+ .xs-min-w-0 {
+ min-width: 0;
+ }
+ .xs-min-w-max {
+ min-width: max-content;
+ }
+ .xs-min-w-min {
+ min-width: min-content;
+ }
+ .xs-min-w-100 {
+ min-width: 100%;
+ }
+}
+@mixin screen-md-up {
+ .md-w-0 {
+ width: 0;
+ }
+ .md-w-auto {
+ width: auto;
+ }
+ .md-w-fit {
+ width: fit-content;
+ }
+ .md-w-max {
+ width: max-content;
+ }
+ .md-w-25 {
+ width: 25%;
+ }
+ .md-w-35 {
+ width: 35%;
+ }
+ .md-w-50 {
+ width: 50%;
+ }
+ .md-w-65 {
+ width: 65%;
+ }
+ .md-w-75 {
+ width: 75%;
+ }
+ .md-w-100 {
+ width: 100%;
+ }
+ .md-w-1 {
+ width: var(--rbrh-spacing-1);
+ }
+ .md-w-2 {
+ width: var(--rbrh-spacing-2);
+ }
+ .md-w-3 {
+ width: var(--rbrh-spacing-3);
+ }
+ .md-w-4 {
+ width: var(--rbrh-spacing-4);
+ }
+ .md-w-5 {
+ width: var(--rbrh-spacing-5);
+ }
+ .md-w-6 {
+ width: var(--rbrh-spacing-6);
+ }
+ .md-w-7 {
+ width: var(--rbrh-spacing-7);
+ }
+ .md-w-8 {
+ width: var(--rbrh-spacing-8);
+ }
+ .md-w-9 {
+ width: var(--rbrh-spacing-9);
+ }
+ .md-w-10 {
+ width: var(--rbrh-spacing-10);
+ }
+ .md-w-12 {
+ width: var(--rbrh-spacing-12);
+ }
+ .md-w-14 {
+ width: var(--rbrh-spacing-14);
+ }
+ .md-w-16 {
+ width: var(--rbrh-spacing-16);
+ }
+ .md-w-18 {
+ width: var(--rbrh-spacing-18);
+ }
+ .md-w-20 {
+ width: var(--rbrh-spacing-20);
+ }
+ .md-w-24 {
+ width: var(--rbrh-spacing-24);
+ }
+
+ .md-max-w-fit {
+ max-width: fit-content;
+ }
+ .md-max-w-0 {
+ max-width: 0;
+ }
+ .md-max-w-max {
+ max-width: max-content;
+ }
+ .md-max-w-min {
+ max-width: min-content;
+ }
+ .md-max-w-100 {
+ max-width: 100%;
+ }
+
+ .md-min-w-fit {
+ min-width: fit-content;
+ }
+ .md-min-w-0 {
+ min-width: 0;
+ }
+ .md-min-w-max {
+ min-width: max-content;
+ }
+ .md-min-w-min {
+ min-width: min-content;
+ }
+ .md-min-w-100 {
+ min-width: 100%;
+ }
+}
+@mixin screen-lg-up {
+ .lg-w-0 {
+ width: 0;
+ }
+ .lg-w-auto {
+ width: auto;
+ }
+ .lg-w-fit {
+ width: fit-content;
+ }
+ .lg-w-max {
+ width: max-content;
+ }
+ .lg-w-25 {
+ width: 25%;
+ }
+ .lg-w-35 {
+ width: 35%;
+ }
+ .lg-w-50 {
+ width: 50%;
+ }
+ .lg-w-65 {
+ width: 65%;
+ }
+ .lg-w-75 {
+ width: 75%;
+ }
+ .lg-w-100 {
+ width: 100%;
+ }
+ .lg-w-1 {
+ width: var(--rbrh-spacing-1);
+ }
+ .lg-w-2 {
+ width: var(--rbrh-spacing-2);
+ }
+ .lg-w-3 {
+ width: var(--rbrh-spacing-3);
+ }
+ .lg-w-4 {
+ width: var(--rbrh-spacing-4);
+ }
+ .lg-w-5 {
+ width: var(--rbrh-spacing-5);
+ }
+ .lg-w-6 {
+ width: var(--rbrh-spacing-6);
+ }
+ .lg-w-7 {
+ width: var(--rbrh-spacing-7);
+ }
+ .lg-w-8 {
+ width: var(--rbrh-spacing-8);
+ }
+ .lg-w-9 {
+ width: var(--rbrh-spacing-9);
+ }
+ .lg-w-10 {
+ width: var(--rbrh-spacing-10);
+ }
+ .lg-w-12 {
+ width: var(--rbrh-spacing-12);
+ }
+ .lg-w-14 {
+ width: var(--rbrh-spacing-14);
+ }
+ .lg-w-16 {
+ width: var(--rbrh-spacing-16);
+ }
+ .lg-w-18 {
+ width: var(--rbrh-spacing-18);
+ }
+ .lg-w-20 {
+ width: var(--rbrh-spacing-20);
+ }
+ .lg-w-24 {
+ width: var(--rbrh-spacing-24);
+ }
+
+ .lg-max-w-fit {
+ max-width: fit-content;
+ }
+ .lg-max-w-0 {
+ max-width: 0;
+ }
+ .lg-max-w-max {
+ max-width: max-content;
+ }
+ .lg-max-w-min {
+ max-width: min-content;
+ }
+ .lg-max-w-100 {
+ max-width: 100%;
+ }
+
+ .lg-min-w-fit {
+ min-width: fit-content;
+ }
+ .lg-min-w-0 {
+ min-width: 0;
+ }
+ .lg-min-w-max {
+ min-width: max-content;
+ }
+ .lg-min-w-min {
+ min-width: min-content;
+ }
+ .lg-min-w-100 {
+ min-width: 100%;
+ }
+}
\ No newline at end of file
diff --git a/src/styles/src/utilities/shadow.css b/src/styles/src/utilities/shadow.css
new file mode 100644
index 0000000..df6d9a4
--- /dev/null
+++ b/src/styles/src/utilities/shadow.css
@@ -0,0 +1,30 @@
+.shadow-xs {
+ box-shadow: var(--rbrh-shadow-xs);
+}
+.shadow-sm {
+ box-shadow: var(--rbrh-shadow-sm);
+}
+.shadow-md {
+ box-shadow: var(--rbrh-shadow-md);
+}
+.shadow-lg {
+ box-shadow: var(--rbrh-shadow-lg);
+}
+.shadow-xl {
+ box-shadow: var(--rbrh-shadow-xl);
+}
+.shadow-inset-none {
+ box-shadow: none;
+}
+.shadow-none {
+ box-shadow: none;
+}
+.shadow-inset-xs {
+ box-shadow: var(--rbrh-shadow-inset-xs);
+}
+.shadow-inset-sm {
+ box-shadow: var(--rbrh-shadow-inset-sm);
+}
+.shadow-inset-md {
+ box-shadow: var(--rbrh-shadow-inset-md);
+}
diff --git a/src/styles/src/utilities/typography.css b/src/styles/src/utilities/typography.css
new file mode 100644
index 0000000..6fd987e
--- /dev/null
+++ b/src/styles/src/utilities/typography.css
@@ -0,0 +1,135 @@
+.uppercase {
+ text-transform: uppercase;
+}
+.capitalize {
+ text-transform: capitalize;
+}
+.underline {
+ text-decoration: underline;
+}
+strong,
+.bold {
+ font-weight: var(--rbrh-font-weight-bold);
+}
+.italic {
+ font-style: italic;
+}
+.align-center {
+ text-align: center;
+}
+.align-left {
+ text-align: left;
+}
+.align-right {
+ text-align: right;
+}
+.item-excerpt {
+ overflow: hidden;
+ overflow-wrap: break-word;
+ text-overflow: ellipsis;
+}
+.font-extrabold {
+ font-weight: var(--rbrh-font-weight-extrabold);
+}
+.font-bold {
+ font-weight: var(--rbrh-font-weight-bold);
+}
+.font-semibold {
+ font-weight: var(--rbrh-font-weight-semibold);
+}
+.font-medium {
+ font-weight: var(--rbrh-font-weight-medium);
+}
+.font-default {
+ font-weight: var(--rbrh-font-weight-default);
+}
+.font-light {
+ font-weight: var(--rbrh-font-weight-light);
+}
+.font-size-xxs {
+ @mixin font-size-xxs;
+}
+.font-size-xs {
+ @mixin font-size-xs;
+}
+.font-size-sm {
+ @mixin font-size-sm;
+}
+.font-size-md {
+ @mixin font-size-md;
+}
+.font-size-lg {
+ @mixin font-size-lg;
+}
+.font-size-xl {
+ @mixin font-size-xl;
+}
+.font-size-2xl {
+ @mixin font-size-2xl;
+}
+.font-size-3xl {
+ @mixin font-size-3xl;
+}
+.font-size-4xl {
+ @mixin font-size-4xl;
+}
+.font-size-5xl {
+ @mixin font-size-5xl;
+}
+.font-size-6xl {
+ @mixin font-size-6xl;
+}
+.font-size-7xl {
+ @mixin font-size-7xl;
+}
+.line-h-xxs {
+ line-height: var(--rbrh-line-h-xxs);
+}
+.line-h-xs {
+ line-height: var(--rbrh-line-h-xs);
+}
+.line-h-sm {
+ line-height: var(--rbrh-line-h-sm);
+}
+.line-h-md {
+ line-height: var(--rbrh-line-h-md);
+}
+.line-h-lg {
+ line-height: var(--rbrh-line-h-lg);
+}
+.line-h-xl {
+ line-height: var(--rbrh-line-h-xl);
+}
+.line-h-2xl {
+ line-height: var(--rbrh-line-h-2xl);
+}
+.line-h-3xl {
+ line-height: var(--rbrh-line-h-3xl);
+}
+.line-h-4xl {
+ line-height: var(--rbrh-line-h-4xl);
+}
+.line-h-5xl {
+ line-height: var(--rbrh-line-h-5xl);
+}
+.line-h-6xl {
+ line-height: var(--rbrh-line-h-6xl);
+}
+.line-h-7xl {
+ line-height: var(--rbrh-line-h-7xl);
+}
+.letter-spacing-xs {
+ letter-spacing: var(--rbrh-letter-spacing-xs);
+}
+.letter-spacing-sm {
+ letter-spacing: var(--rbrh-letter-spacing-sm);
+}
+.letter-spacing-md {
+ letter-spacing: var(--rbrh-letter-spacing-md);
+}
+.letter-spacing-lg {
+ letter-spacing: var(--rbrh-letter-spacing-lg);
+}
+.letter-spacing-xl {
+ letter-spacing: var(--rbrh-letter-spacing-xl);
+}
\ No newline at end of file
diff --git a/src/styles/src/utilities/width.css b/src/styles/src/utilities/width.css
new file mode 100644
index 0000000..b349aa5
--- /dev/null
+++ b/src/styles/src/utilities/width.css
@@ -0,0 +1,110 @@
+.w-0 {
+ width: 0;
+}
+.w-auto {
+ width: auto;
+}
+.w-fit {
+ width: fit-content;
+}
+.w-max {
+ width: max-content;
+}
+.w-25 {
+ width: 25%;
+}
+.w-35 {
+ width: 35%;
+}
+.w-50 {
+ width: 50%;
+}
+.w-65 {
+ width: 65%;
+}
+.w-75 {
+ width: 75%;
+}
+.w-100 {
+ width: 100%;
+}
+.w-1 {
+ width: var(--rbrh-spacing-1);
+}
+.w-2 {
+ width: var(--rbrh-spacing-2);
+}
+.w-3 {
+ width: var(--rbrh-spacing-3);
+}
+.w-4 {
+ width: var(--rbrh-spacing-4);
+}
+.w-5 {
+ width: var(--rbrh-spacing-5);
+}
+.w-6 {
+ width: var(--rbrh-spacing-6);
+}
+.w-7 {
+ width: var(--rbrh-spacing-7);
+}
+.w-8 {
+ width: var(--rbrh-spacing-8);
+}
+.w-9 {
+ width: var(--rbrh-spacing-9);
+}
+.w-10 {
+ width: var(--rbrh-spacing-10);
+}
+.w-12 {
+ width: var(--rbrh-spacing-12);
+}
+.w-14 {
+ width: var(--rbrh-spacing-14);
+}
+.w-16 {
+ width: var(--rbrh-spacing-16);
+}
+.w-18 {
+ width: var(--rbrh-spacing-18);
+}
+.w-20 {
+ width: var(--rbrh-spacing-20);
+}
+.w-24 {
+ width: var(--rbrh-spacing-24);
+}
+
+.max-w-fit {
+ max-width: fit-content;
+}
+.max-w-0 {
+ max-width: 0;
+}
+.max-w-max {
+ max-width: max-content;
+}
+.max-w-min {
+ max-width: min-content;
+}
+.max-w-100 {
+ max-width: 100%;
+}
+
+.min-w-fit {
+ min-width: fit-content;
+}
+.min-w-0 {
+ min-width: 0;
+}
+.min-w-max {
+ min-width: max-content;
+}
+.min-w-min {
+ min-width: min-content;
+}
+.min-w-100 {
+ min-width: 100%;
+}
\ No newline at end of file