Add theme

minvws · Sep 29, 2023 · 220c53d · 220c53d
1 parent b446326
commit 220c53d
Show file tree

Hide file tree

Showing 22 changed files with 428 additions and 63 deletions.
diff --git a/docs/documentation/components/pagination.html b/docs/documentation/components/pagination.html
@@ -10,29 +10,41 @@
   </head>
   <body id="index" class="documentation">
     <header>
-      <a href="#main-content" class="button focus-only skip-to-content">Ga direct naar inhoud</a>
-
-      <nav aria-label="Hoofdnavigatie">
-        <div>
-          <ul>
-            <li><a href="../../index.html">Home</a></li>
-            <li><a href="../components.html">Componenten</a></li>
-            <li><a href="../documentation.html">Documentatie</a></li>
-          </ul>
-        </div>
-      </nav>
-
-      <nav class="breadcrumb-bar">
-        <div>
-          <ul>
-            <li><a href="../components.html">Componenten</a></li>
-            <li>
-              <a href="./pagination.html" aria-current="page">Paginering</a>
-            </li>
-          </ul>
-        </div>
-      </nav>
+      <div>
+        <a href="#main-content" class="button focus-only skip-to-content">Ga direct naar inhoud</a>
+
+        <a href="./logo.html" class="logo">
+            <img src="../../static/img/logo-white.svg" alt="Placeholder logo">Bedrijfs of productnaam
+        </a>
+
+        <nav
+        data-open-label="Menu"
+        data-close-label="Sluit menu"
+        data-media="(min-width: 30rem)"
+        aria-label="Hoofdnavigatie"
+        class="collapsible">
+
+          <div class="collapsing-element">
+              <ul>
+              <li><a href="../../index.html">Home</a></li>
+              <li><a href="../components.html" aria-current="page">Componenten</a></li>
+              <li><a href="../documentation.html">Documentatie</a></li>
+              </ul>
+          </div>
+        </nav>
+      </div>
     </header>
+
+    <nav class="breadcrumb-bar">
+      <div>
+        <ul>
+          <li><a href="../components.html">Componenten</a></li>
+          <li>
+            <a href="./pagination.html" aria-current="page">Paginering</a>
+          </li>
+        </ul>
+      </div>
+    </nav>
 
     <main class="sidemenu" id="main-content" tabindex="-1">
       <nav

diff --git a/docs/scss/main.scss b/docs/scss/main.scss
@@ -1,10 +1,10 @@
 /* Main project styles */
 @import "manon"; /* Manon components */
 @import "docs"; /* Docs overrides which aren't theme related */
-@import "fonts"; 
+@import "fonts";
 
 /* Styling for visual examples out of their usual html-structure */
 @import "documentation-example-footer";
 
 /* Theme */
-@import "themes/soft/theme"; /* Soft */
+@import "themes/basic-bold/theme";
diff --git a/docs/scss/themes/basic-bold/application-base.scss b/docs/scss/themes/basic-bold/application-base.scss
@@ -0,0 +1,6 @@
+/* Application base styling - Variables */
+/* This file contains styling on high level elements such as the body */
+
+:root {
+  --application-base-text-color: #1a1a1a;
+}
diff --git a/docs/scss/themes/basic-bold/components/breadcrumb-bar.scss b/docs/scss/themes/basic-bold/components/breadcrumb-bar.scss
@@ -0,0 +1,12 @@
+/* Breadcrumb bar */
+
+:root {
+  --breadcrumb-bar-background-color: transparent;
+  --breadcrumb-bar-padding-top: 1rem;
+  --breadcrumb-bar-padding-bottom: 1rem;
+
+  /* Links */
+  --breadcrumb-bar-link-text-color: var(--application-base-text-color);
+  --breadcrumb-bar-link-hover-text-color: var(--application-base-text-color);
+  --breadcrumb-bar-link-visited-text-color: var(--application-base-text-color);
+}
diff --git a/docs/scss/themes/basic-bold/components/header-navigation.scss b/docs/scss/themes/basic-bold/components/header-navigation.scss
@@ -0,0 +1,53 @@
+/* Header navigation */
+
+:root {
+  /* Header */
+  --header-content-wrapper-gap: 0;
+  --header-border-width: 0 0 1px 0;
+  --header-border-color: #ccc;
+
+  /* Content wrapper */
+  --header-content-wrapper-align-items: stretch;
+  --header-content-wrapper-padding-right: var(--page-whitespace-right);
+  --header-content-wrapper-padding-left: var(--page-whitespace-left);
+
+  /* Header navigation */
+  --header-navigation-background-color: #fff;
+  --header-navigation-text-color: var(--text-set-text-color);
+  --header-navigation-max-width: 100%;
+  --header-navigation-align-items: stretch;
+  --header-navigation-justify-content: space-between;
+
+  /* Content wrapper */
+  --header-navigation-content-wrapper-gap: 0;
+  --header-navigation-content-wrapper-max-width: var(--content-max-width);
+  --header-navigation-content-wrapper-justify-content: flex-end;
+
+  /* List */
+  --header-navigation-list-align-content: stretch;
+  --header-navigation-list-width: auto;
+
+  /* Menu items links */
+  --header-navigation-link-border-width: 4px 0 0 0;
+  --header-navigation-link-border-color: transparent;
+  --header-navigation-link-min-height: 3rem;
+  --header-navigation-link-font-size: var(--body-text-medium-font-size);
+
+  /* Link styling */
+  --header-navigation-link-text-color: var(--application-base-text-color);
+  --header-navigation-link-visited-text-color: var(--header-navigation-link-text-color);
+
+  /* Hover */
+  --header-navigation-link-hover-border-color: #ede1c7;
+  --header-navigation-link-hover-text-color: var(--header-navigation-link-text-color);
+
+  /* Active link */
+  --header-navigation-link-active-border-color: var(--branding-color-1);
+  --header-navigation-link-active-text-color: var(--header-navigation-link-hover-text-color);
+  --header-navigation-link-visited-active-text-color: var(
+    --header-navigation-link-hover-text-color
+  );
+
+  /* Collapsed icon */
+  --navigation-collapsible-menu-icon-font-size: 2rem;
+}
diff --git a/docs/scss/themes/basic-bold/components/logo.scss b/docs/scss/themes/basic-bold/components/logo.scss
@@ -0,0 +1,6 @@
+/* Logo */
+
+:root {
+    --logo-background-color: #000; 
+    --logo-border-radius: 50%;
+}
diff --git a/docs/scss/themes/basic-bold/components/pagination.scss b/docs/scss/themes/basic-bold/components/pagination.scss
@@ -0,0 +1,9 @@
+/* Pagination */
+
+:root {
+  --pagination-border-width: 0;
+  --pagination-link-active-background-color: var(--basic-bold-accent-color-1);
+
+  /* Hover */
+  --pagination-link-hover-background-color: var(--basic-bold-accent-color-1);
+}
diff --git a/docs/scss/themes/basic-bold/components/sidemenu.scss b/docs/scss/themes/basic-bold/components/sidemenu.scss
@@ -0,0 +1,14 @@
+/* Side menu */
+
+:root {
+  /* Nav */
+  --sidemenu-nav-border-width: 0;
+  --sidemenu-nav-padding-top: 0;
+
+  /* List */
+  --sidemenu-ul-padding: 0;
+
+  /* List item */
+  --sidemenu-list-item-text-color: var(--application-base-text-color);
+  --sidemenu-list-item-list-style: none;
+}
diff --git a/docs/scss/themes/basic-bold/components/tile.scss b/docs/scss/themes/basic-bold/components/tile.scss
@@ -0,0 +1,5 @@
+/* Tile styling */
+
+:root {
+  --tile-border-radius: 0.5rem;
+}
diff --git a/docs/scss/themes/basic-bold/fundamentals/body-text-set.scss b/docs/scss/themes/basic-bold/fundamentals/body-text-set.scss
@@ -0,0 +1,42 @@
+/* body-text-set - variables */
+
+:root {
+  /* Available variables to use within all text types */
+  --text-set-font-family: "Open Sans", sans-serif;
+  --text-set-font-size: 1rem;
+  --text-set-font-weight: normal;
+  --text-set-strong-font-weight: 600;
+  --text-set-line-height: 1.75;
+  --text-set-text-color: #000;
+  --text-set-text-align: left;
+
+  /* Body text small */
+  --body-text-small-font-size: 0.8rem;
+  --body-text-small-font-weight: var(--text-set-font-weight);
+  --body-text-small-line-height: var(--text-set-line-height);
+  --body-text-small-color: #696969;
+  --body-text-small-text-align: var(--text-set-text-align);
+
+  /* Strong */
+  --body-text-small-strong-font-weight: var(--text-set-strong-font-weight);
+
+  /* Body text medium */
+  --body-text-medium-font-size: var(--text-set-font-size);
+  --body-text-medium-font-weight: var(--text-set-font-weight);
+  --body-text-medium-line-height: var(--text-set-line-height);
+  --body-text-medium-color: var(--text-set-text-color);
+  --body-text-medium-text-align: var(--text-set-text-align);
+
+  /* Strong */
+  --body-text-medium-strong-font-weight: var(--text-set-strong-font-weight);
+
+  /* Body text large */
+  --body-text-large-font-size: 1.5rem;
+  --body-text-large-font-weight: var(--text-set-font-weight);
+  --body-text-large-line-height: var(--text-set-line-height);
+  --body-text-large-color: var(--text-set-text-color);
+  --body-text-large-text-align: var(--text-set-text-align);
+
+  /* Strong */
+  --body-text-large-strong-font-weight: var(--text-set-strong-font-weight);
+}
diff --git a/docs/scss/themes/basic-bold/fundamentals/colors.scss b/docs/scss/themes/basic-bold/fundamentals/colors.scss
@@ -0,0 +1,6 @@
+/* Theme colors */
+
+:root {
+  --basic-bold-accent-color-1: #c4d8c4; /* Green */
+  --basic-bold-accent-color-2: #ffea9e; /* Yellow */
+}
diff --git a/docs/scss/themes/basic-bold/fundamentals/headings-base-set.scss b/docs/scss/themes/basic-bold/fundamentals/headings-base-set.scss
@@ -0,0 +1,5 @@
+/* Heading set basic - Variables */
+
+:root {
+  --headings-base-set-font-family: "Open Sans", sans-serif;
+}
diff --git a/docs/scss/themes/basic-bold/fundamentals/spacing.scss b/docs/scss/themes/basic-bold/fundamentals/spacing.scss
@@ -0,0 +1,44 @@
+/* Theme spacing */
+
+:root {
+  --spacing-xxxl: 5rem;
+  --spacing-xxl: 4rem;
+  --spacing-xl: 3rem;
+  --spacing-l: 2rem;
+  --spacing-m: 1.5rem;
+  --spacing-s: 1rem;
+  --spacing-xs: 0.5rem;
+  --spacing-xxs: 0.25rem;
+}
+
+.spacing-xxxl {
+  gap: var(--spacing-xxxl);
+}
+
+.spacing-xxl {
+  gap: var(--spacing-xxl);
+}
+
+.spacing-xl {
+  gap: var(--spacing-xl);
+}
+
+.spacing-l {
+  gap: var(--spacing-l);
+}
+
+.spacing-m {
+  gap: var(--spacing-m);
+}
+
+.spacing-s {
+  gap: var(--spacing-s);
+}
+
+.spacing-xs {
+  gap: var(--spacing-xs);
+}
+
+.spacing-xxs {
+  gap: var(--spacing-xxs);
+}
diff --git a/docs/scss/themes/basic-bold/fundamentals/spot-large.scss b/docs/scss/themes/basic-bold/fundamentals/spot-large.scss
@@ -0,0 +1,103 @@
+:root {
+
+  /* Color sets */
+  /* Spot large */
+  /* Main colors */
+
+    /* Gold */
+    --branding-color-1: #E1C282;
+
+    /* Pink */
+    --branding-color-2: #F7D0D3;
+
+  /* Accent colors */
+
+    /* Dark navy */
+    --branding-color-accent-1: #111416;
+
+    /* Soft blue */
+    --branding-color-accent-2: #5B76A9;
+
+    /* Soft green */
+    --branding-color-accent-3: #6FB07D;
+
+    /* Soft red */
+    --branding-color-accent-4: #B95D5D;
+
+    /* Soft gold */
+    --branding-color-accent-5: #FFF4DD;
+
+  /* Branding color combinations. 
+  e.g if a branding color is used as a background-color. What should the text
+  and link colors be.
+
+  /* Branding color 1 */
+  --branding-color-1-background-color: var(--branding-color-1);
+  --branding-color-1-text-color: black;
+
+  --branding-color-1-link-text-color: var(--branding-color-1-text-color);
+  --branding-color-1-link-active-text-color: var(--branding-color-1-text-color);
+  --branding-color-1-link-visited-text-color: var(--branding-color-1-text-color);
+  --branding-color-1-link-hover-text-color: var(--branding-color-1-text-color);
+  --branding-color-1-link-visited-hover-text-color: var(--branding-color-1-text-color);
+
+  /* Branding color 2 */
+  --branding-color-2-background-color: var(--branding-color-2);
+  --branding-color-2-text-color: black;
+
+  --branding-color-2-link-text-color: var(--branding-color-2-text-color);
+  --branding-color-2-link-active-text-color: var(--branding-color-2-text-color);
+  --branding-color-2-link-visited-text-color: var(--branding-color-2-text-color);
+  --branding-color-2-link-hover-text-color: var(--branding-color-2-text-color);
+  --branding-color-2-link-visited-hover-text-color: var(--branding-color-2-text-color);
+
+  /* Accent color 1 */
+  --branding-color-accent-1-background-color: var(--branding-color-accent-1);
+  --branding-color-accent-1-text-color: white;
+
+  --branding-color-accent-1-link-text-color: var(--branding-color-accent-1-text-color);
+  --branding-color-accent-1-link-active-text-color: var(--branding-color-accent-1-text-color);
+  --branding-color-accent-1-link-visited-text-color: var(--branding-color-accent-1-text-color);
+  --branding-color-accent-1-link-hover-text-color: var(--branding-color-accent-1-text-color);
+  --branding-color-accent-1-link-visited-hover-text-color: var(--branding-color-accent-1-text-color);
+
+  /* Accent color 2 */
+  --branding-color-accent-2-background-color: var(--branding-color-accent-2);
+  --branding-color-accent-2-text-color: white;
+
+  --branding-color-accent-2-link-text-color: var(--branding-color-accent-2-text-color);
+  --branding-color-accent-2-link-active-text-color: var(--branding-color-accent-2-text-color);
+  --branding-color-accent-2-link-visited-text-color: var(--branding-color-accent-2-text-color);
+  --branding-color-accent-2-link-hover-text-color: var(--branding-color-accent-2-text-color);
+  --branding-color-accent-2-link-visited-hover-text-color: var(--branding-color-accent-2-text-color);
+
+  /* Accent color 3 */
+  --branding-color-accent-3-background-color: var(--branding-color-accent-3);
+  --branding-color-accent-3-text-color: black;
+
+  --branding-color-accent-3-link-text-color: var(--branding-color-accent-3-text-color);
+  --branding-color-accent-3-link-active-text-color: var(--branding-color-accent-3-text-color);
+  --branding-color-accent-3-link-visited-text-color: var(--branding-color-accent-3-text-color);
+  --branding-color-accent-3-link-hover-text-color: var(--branding-color-accent-3-text-color);
+  --branding-color-accent-3-link-visited-hover-text-color: var(--branding-color-accent-3-text-color);
+
+  /* Accent color 4 */
+  --branding-color-accent-4-background-color: var(--branding-color-accent-4);
+  --branding-color-accent-4-text-color: black;
+
+  --branding-color-accent-4-link-text-color: var(--branding-color-accent-4-text-color);
+  --branding-color-accent-4-link-active-text-color: var(--branding-color-accent-4-text-color);
+  --branding-color-accent-4-link-visited-text-color: var(--branding-color-accent-4-text-color);
+  --branding-color-accent-4-link-hover-text-color: var(--branding-color-accent-4-text-color);
+  --branding-color-accent-4-link-visited-hover-text-color: var(--branding-color-accent-4-text-color);
+
+  /* Accent color 5 */
+  --branding-color-accent-5-background-color: var(--branding-color-accent-5);
+  --branding-color-accent-5-text-color: black;
+
+  --branding-color-accent-5-link-text-color: var(--branding-color-accent-5-text-color);
+  --branding-color-accent-5-link-active-text-color: var(--branding-color-accent-5-text-color);
+  --branding-color-accent-5-link-visited-text-color: var(--branding-color-accent-5-text-color);
+  --branding-color-accent-5-link-hover-text-color: var(--branding-color-accent-5-text-color);
+  --branding-color-accent-5-link-visited-hover-text-color: var(--branding-color-accent-5-text-color);
+}