Style guide page

Documenting the theming architecture for future evolution with a focus on advanced personalization with ease of editing
Mozilla-Ocho · Nov 14, 2023 · 3255bd0 · 3255bd0
1 parent 54b358a
commit 3255bd0
Show file tree

Hide file tree

Showing 2 changed files with 171 additions and 0 deletions.
diff --git a/styling/styleguide.html b/styling/styleguide.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+
+<html>
+  <head>
+    <meta charset="utf-8">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="./styling.css">
+</head>
+
+<body>
+    <div class="body-container">
+        <div class="section">
+            <h2>Color variables</h2>
+            <div class="sub-section">
+                <h3>Interactions</h3>
+                <div class="swatch-group">
+                    <div class="swatch bg-primary">Primary</div>
+                    <div class="swatch bg-primary-hover">Primary Hover</div>
+                    <div class="swatch bg-primary-focus">Primary Focus</div>
+                </div>
+                <div class="swatch-group">
+                    <div class="swatch bg-secondary">Secondary</div>
+                    <div class="swatch bg-secondary-hover">Secondary Hover</div>
+                    <div class="swatch bg-secondary-focus">Secondary Focus</div>
+                </div>
+                <div class="swatch-group">
+                    <div class="swatch bg-interaction-inactive">Interaction Inactive</div>    
+                </div>
+            </div>
+
+            <div class="sub-section">
+                <h3>Base / Backgrounds</h3>
+                <div class="swatch-group">
+                    <div class="swatch bg-base-100">Base-100</div>
+                    <div class="swatch bg-base-200">Base-200</div>
+                </div>
+            </div>
+            <div class="sub-section">
+                <h3>Messaging</h3>
+                <div class="swatch-group">
+                    <div class="swatch bg-info">Info</div>
+                    <div class="swatch bg-success">Success</div>
+                    <div class="swatch bg-warning">Warning</div>
+                    <div class="swatch bg-error">Error</div>    
+                </div>
+            </div>
+    </div>
+
+</body>
+
+</html>
diff --git a/styling/styling.css b/styling/styling.css
@@ -0,0 +1,118 @@
+:root {
+	--primary: linear-gradient(90deg, #FFB3BB 0%, #FFDFBA 26.56%, #FFFFBA 50.52%, #87EBDA 76.04%, #BAE1FF 100%);
+	--primary-hover:linear-gradient(90deg, #FFA8B1 0%, #FFD9AD 26.56%, #FFFFAD 50.52%, #80EAD8 76.04%, #ADDCFF 100%);
+	--primary-focus: linear-gradient(90deg, #FF9EA8 0%, #FFD29E 26.56%, #FFFF9E 50.52%, #73E8D4 76.04%, #99D3FF 100%);
+	--primary-content: #000000;
+	--secondary: #FFBF76;
+	--secondary-hover: #E5AC6A;
+	--secondary-focus: #CC995E;
+	--secondary-content: #000000;
+	--inactive-content:#F9F9F9;
+	--interaction-inactive:#B6B9BF;
+	--base-100: #fff;
+	--base-200: #F0EFEF;
+	--base-content: #2d3d46;
+	--base-content-subtle: #9296a0;
+	--info: #3ac0f8;
+	--info-content: #000;
+	--warning: #fcbc23;
+	--warning-content: #000;
+	--success: #37d399;
+	--success-content: #000;
+	--error: #f87272;
+	--error-content: #000;
+	--border-1: #EDEDED;
+
+	--xxs:4px;
+	--xs:8px;
+	--sm:12px;
+	--md:16px;
+	--lg:24px;
+	--xl:40px;
+}
+
+html {
+	padding:0;
+}
+
+body {
+	margin:0;
+	font-family:'Work Sans', sans-serif;
+	font-size: .9em;
+}
+
+
+.body-container {
+	background: var(--base-100);
+	min-height:100vh;
+}
+
+.swatch {
+	width:200px;
+	height:40px;
+	color: var(--base-content);
+	padding:12px;
+	/* box-shadow: 0px 5px 11px 0px rgba(0, 0, 0, 0.10); */
+	border-radius:8px;
+	margin:12px;
+	border:1px solid var(--border-1);
+}
+.swatch-group {
+	display:flex;
+	flex-direction: row;
+	margin-bottom:12px;
+}
+
+/* Utilities for styleguide */
+.bg-primary {
+	background: var(--primary);
+	color: var(--primary-content);
+}
+.bg-primary-hover {
+	background: var(--primary-hover);
+	color: var(--primary-content);
+}
+.bg-primary-focus {
+	background: var(--primary-focus);
+	color: var(--primary-content);
+}
+.bg-interaction-inactive {
+	background: var(--interaction-inactive);
+	color: var(--inactive-content);
+}
+.bg-secondary {
+	background: var(--secondary);
+	color: var(--secondary-content);
+}
+.bg-secondary-hover {
+	background: var(--secondary-hover);
+	color: var(--secondary-content);
+}
+.bg-secondary-focus {
+	background: var(--secondary-focus);
+	color: var(--secondary-content);
+}
+.bg-base-100 {
+	background: var(--base-100);
+	color: var(--base-content);
+}
+.bg-base-200 {
+	background: var(--base-200);
+	color: var(--base-content);
+}
+.bg-info {
+	background: var(--info);
+	color: var(--info-content);
+}
+.bg-warning {
+	background: var(--warning);
+	color: var(--warning-content);
+}
+.bg-error {
+	background: var(--error);
+	color: var(--error-content);
+}
+.bg-success {
+	background: var(--success);
+	color: var(--success-content);
+}