@minvws/manon-themes 16.3.0-beta.2

package/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);
+}

package/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 */
+}

package/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;
+}

package/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);
+}

package/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);
+}

package/basic-bold/icons.scss

@@ -0,0 +1,14 @@
+.icon,
+.icon-only {
+  &.icon-descending::before {
+    content: "\e901";
+  }
+
+  &.icon-ascending::before {
+    content: "\e902";
+  }
+
+  &.icon-sort::before {
+    content: "\e903";
+  }
+}

package/basic-bold/layout/article.scss

@@ -0,0 +1,9 @@
+/* Article */
+
+:root {
+  --article-content-wrapper-padding-top: 0;
+  --article-content-wrapper-gap: var(--spacing-xl);
+
+  /* Sections within an article */
+  --article-section-gap: var(--spacing-l);
+}

package/basic-bold/layout/main.scss

@@ -0,0 +1,10 @@
+/* Main */
+
+:root {
+  --main-padding-top: 0;
+  --main-padding-bottom: 0;
+  --main-flex-direction: column;
+
+  --sidemenu-main-padding-top: var(--main-padding-top);
+  --sidemenu-main-padding-bottom: var(--main-padding-bottom);
+}

package/basic-bold/layout/section.scss

@@ -0,0 +1,7 @@
+/* Section */
+
+:root {
+  --section-content-wrapper-padding-top: var(--spacing-xl);
+  --section-content-wrapper-padding-bottom: var(--spacing-xl);
+  --section-content-wrapper-gap: var(--spacing-s);
+}

package/basic-bold/theme.scss

@@ -0,0 +1,45 @@
+/* Theme: Basic bold */
+
+/* Variables */
+@forward "variables";
+
+/* Fonts & icons */
+@use "fonts";
+@use "icons";
+
+/* Styling on the highest level */
+@use "application-base";
+
+/* Fundamentals */
+@use "fundamentals/spot-large"; /* color set */
+@use "fundamentals/colors";
+@use "fundamentals/body-text-set";
+@use "fundamentals/headings-base-set";
+@use "fundamentals/spacing";
+
+/* Layout */
+@use "layout/article";
+@use "layout/main";
+@use "layout/section";
+
+/* Components */
+@use "components/breadcrumb-bar";
+
+@use "components/icon";
+@use "components/logo";
+@use "components/pagination";
+@use "components/sidemenu";
+@use "components/tile";
+@use "components/button-base";
+@use "components/button-cta";
+@use "components/form-input";
+@use "components/footer";
+@use "components/footer-navigation-link";
+@use "components/skip-to-content";
+
+/* Header */
+@use "components/header";
+@use "components/header-content-wrapper";
+@use "components/header-navigation";
+@use "components/header-navigation-content-wrapper";
+@use "components/header-navigation-link";

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@minvws/manon-themes",
+  "license": "EUPL-1.2",
+  "files": [
+    "**/*.scss",
+    "**/*.ico",
+    "**/*.png",
+    "**/*.svg",
+    "**/*.ttf",
+    "**/*.woff",
+    "**/*.woff2"
+  ],
+  "peerDepencency": {
+    "@minvws/manon": "workspace:*",
+    "sass": ">=1.23"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/minvws/nl-rdo-manon.git",
+    "directory": "themes"
+  },
+  "version": "16.3.0-beta.2",
+  "scripts": {
+    "npm-version": "npm version"
+  }
+}

package/soft/_index.scss

@@ -0,0 +1 @@
+@forward "theme";

package/soft/_variables.scss

@@ -0,0 +1 @@
+$font-path: "@minvws/manon-themes/soft/fonts" !default;

package/soft/application-base.scss

@@ -0,0 +1,6 @@
+/* Application base styling - Variables */
+/* This file contains styling on high level elements such as the body */
+
+:root {
+
+}

package/soft/components/background-color-offset.scss

@@ -0,0 +1,9 @@
+/* Backgroundcolor offset */
+
+:root {
+  --background-color-offset-background-color: #f0f0f0;
+  --background-color-offset-margin-top: var(--content-padding-top);
+  --background-color-offset-margin-bottom: var(--content-padding-bottom);
+  --background-color-offset-padding-top: calc(var(--content-padding-top) * 2);
+  --background-color-offset-padding-bottom: calc(var(--content-padding-bottom) * 2);
+}

package/soft/components/breadcrumb-bar.scss

@@ -0,0 +1,5 @@
+/* Breadcrumb bar */
+
+:root {
+	--breadcrumb-bar-background-color: var(--branding-color-accent-5);
+}

package/soft/components/header-navigation.scss

@@ -0,0 +1,50 @@
+/* Header navigation */
+
+:root {
+    /* Header */
+    --header-content-wrapper-gap: 0;
+    --header-border-width: 3px 0 0 0;
+    --header-border-color: var(--branding-color-1);
+
+    /* 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);
+
+    /* 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;
+}

package/soft/components/icon.scss

@@ -0,0 +1,5 @@
+/* Icon */
+
+:root {
+  --icon-font-family: "manon-soft-icons";
+}

package/soft/components/logo.scss

@@ -0,0 +1,6 @@
+/* Logo */
+
+:root {
+    --logo-background-color: #000; 
+    --logo-border-radius: 50%;
+}

package/soft/components/tile.scss

@@ -0,0 +1,5 @@
+/* Tile styling */
+
+:root {
+  --tile-border-radius: 0.5rem;
+}

package/soft/fonts/icons/manon-soft-icons-0.3.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Generated by IcoMoon</metadata>
+<defs>
+<font id="manon-soft-icons" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="870.850439882698" descent="-153.14956011730206" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="0" d="" />
+<glyph unicode="&#xe901;" glyph-name="descending" horiz-adv-x="849" d="M20.297 516.327l358.581-361.964c27.062-27.062 64.274-27.062 91.337 0l358.581 361.964c10.149 13.531 16.915 23.68 16.915 37.211h-845.71c3.383-13.531 10.149-27.062 20.297-37.211z" />
+<glyph unicode="&#xe902;" glyph-name="ascending" horiz-adv-x="849" d="M828.796 174.66l-358.581 358.581c-27.062 27.062-64.274 27.062-91.337 0l-358.581-358.581c-10.149-10.149-16.915-23.68-16.915-37.211h845.71c-3.383 13.531-10.149 27.062-20.297 37.211z" />
+<glyph unicode="&#xe903;" glyph-name="sort" horiz-adv-x="849" d="M832.179 462.202l-361.964 361.964c-27.062 27.062-64.274 27.062-91.337 0l-358.581-361.964c-10.149-10.149-16.915-23.68-16.915-37.211h845.71c-3.383 13.531-10.149 27.062-16.915 37.211zM20.297 228.786l358.581-358.581c27.062-27.062 64.274-27.062 91.337 0l358.581 358.581c13.531 13.531 20.297 33.828 16.915 54.126h-845.71c0-20.297 3.383-37.211 20.297-54.126z" />
+</font></defs></svg>

package/soft/fonts.scss

@@ -0,0 +1,66 @@
+@use "variables";
+
+/* Neuton */
+@font-face {
+  font-family: "Neuton";
+  font-weight: bold;
+  font-style: normal;
+  font-display: var(--text-magazine-font-display, swap);
+  src: url("#{variables.$font-path}/Neuton/Neuton-Bold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Neuton";
+  font-weight: normal;
+  font-style: italic;
+  font-display: var(--text-magazine-font-display, swap);
+  src: url("#{variables.$font-path}/Neuton/Neuton-Italic.woff2") format("woff2");
+}
+
+/* Open sans */
+/* Regular */
+@font-face {
+  font-family: "Open Sans";
+  font-weight: normal;
+  font-style: normal;
+  font-display: var(--text-body-font-display, swap);
+  src: url("#{variables.$font-path}/OpenSans/OpenSans-Regular.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-weight: normal;
+  font-style: italic;
+  font-display: var(--text-body-font-display, swap);
+  src: url("#{variables.$font-path}/OpenSans/OpenSans-Italic.woff2") format("woff2");
+}
+
+/* Semi bold */
+@font-face {
+  font-family: "Open Sans";
+  font-weight: 600;
+  font-style: normal;
+  font-display: var(--text-body-font-display, swap);
+  src: url("#{variables.$font-path}/OpenSans/OpenSans-SemiBold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Open Sans";
+  font-weight: 600;
+  font-style: italic;
+  font-display: var(--text-body-font-display, swap);
+  src: url("#{variables.$font-path}/OpenSans/OpenSans-SemiBoldItalic.woff2") format("woff2");
+}
+
+/* Icon font */
+@font-face {
+  font-family: "manon-soft-icons";
+  font-weight: normal;
+  font-style: normal;
+  font-display: var(--text-icon-font-display, block);
+  src: url("#{variables.$font-path}/icons/manon-soft-icons-0.3.eot");
+  src:
+    url("#{variables.$font-path}/icons/manon-soft-icons-0.3.woff") format("woff"),
+    url("#{variables.$font-path}/icons/manon-soft-icons-0.3.ttf") format("truetype"),
+    url("#{variables.$font-path}/icons/manon-soft-icons-0.3.svg#manon-soft-icons") format("svg");
+}

package/soft/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);
+}

package/soft/fundamentals/headings-base-set.scss

@@ -0,0 +1,5 @@
+/* Heading set basic - Variables */
+
+:root {
+  --headings-base-set-font-family: "Neuton", sans-serif;
+}