@minvws/manon-themes 16.3.0-beta.7 → 16.3.0-beta.8

package/icore-open/application-base.scss

@@ -1,9 +1,11 @@
 /* Application base styling - Variables */
 /* This file contains styling on high level elements such as the body */
 
+@use "color-scheme";
+
 :root {
   --application-base-font-family: "IBM Plex Sans", sans-serif;
-  --application-base-text-color: #3b3b3b;
+  --application-base-text-color: #{color-scheme.$oc-gray-9};
   --application-font-size: 1rem;
   --application-base-background-color: #f3f3f3;
 }

package/icore-open/color-scheme/_index.scss

@@ -0,0 +1,6 @@
+/* Color Scheme
+ * From https://github.com/yeun/open-color
+ * Documentation https://yeun.github.io/open-color/
+ */
+
+@forward 'open-color';

package/icore-open/color-scheme/open-color.scss

@@ -0,0 +1,399 @@
+//
+//
+//  𝗖 𝗢 𝗟 𝗢 𝗥
+//  v 1.9.1
+//
+//  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
+
+
+//  General
+//  ───────────────────────────────────
+
+$oc-white:         #ffffff;
+$oc-black:         #000000;
+
+
+//  Gray
+//  ───────────────────────────────────
+
+$oc-gray-list: (
+  "0": #f8f9fa,
+  "1": #f1f3f5,
+  "2": #e9ecef,
+  "3": #dee2e6,
+  "4": #ced4da,
+  "5": #adb5bd,
+  "6": #868e96,
+  "7": #495057,
+  "8": #343a40,
+  "9": #212529
+);
+
+$oc-gray-0: map-get($oc-gray-list, "0");
+$oc-gray-1: map-get($oc-gray-list, "1");
+$oc-gray-2: map-get($oc-gray-list, "2");
+$oc-gray-3: map-get($oc-gray-list, "3");
+$oc-gray-4: map-get($oc-gray-list, "4");
+$oc-gray-5: map-get($oc-gray-list, "5");
+$oc-gray-6: map-get($oc-gray-list, "6");
+$oc-gray-7: map-get($oc-gray-list, "7");
+$oc-gray-8: map-get($oc-gray-list, "8");
+$oc-gray-9: map-get($oc-gray-list, "9");
+
+
+//  Red
+//  ───────────────────────────────────
+
+$oc-red-list: (
+  "0": #fff5f5,
+  "1": #ffe3e3,
+  "2": #ffc9c9,
+  "3": #ffa8a8,
+  "4": #ff8787,
+  "5": #ff6b6b,
+  "6": #fa5252,
+  "7": #f03e3e,
+  "8": #e03131,
+  "9": #c92a2a
+);
+
+$oc-red-0: map-get($oc-red-list, "0");
+$oc-red-1: map-get($oc-red-list, "1");
+$oc-red-2: map-get($oc-red-list, "2");
+$oc-red-3: map-get($oc-red-list, "3");
+$oc-red-4: map-get($oc-red-list, "4");
+$oc-red-5: map-get($oc-red-list, "5");
+$oc-red-6: map-get($oc-red-list, "6");
+$oc-red-7: map-get($oc-red-list, "7");
+$oc-red-8: map-get($oc-red-list, "8");
+$oc-red-9: map-get($oc-red-list, "9");
+
+
+//  Pink
+//  ───────────────────────────────────
+
+$oc-pink-list: (
+  "0": #fff0f6,
+  "1": #ffdeeb,
+  "2": #fcc2d7,
+  "3": #faa2c1,
+  "4": #f783ac,
+  "5": #f06595,
+  "6": #e64980,
+  "7": #d6336c,
+  "8": #c2255c,
+  "9": #a61e4d
+);
+
+$oc-pink-0: map-get($oc-pink-list, "0");
+$oc-pink-1: map-get($oc-pink-list, "1");
+$oc-pink-2: map-get($oc-pink-list, "2");
+$oc-pink-3: map-get($oc-pink-list, "3");
+$oc-pink-4: map-get($oc-pink-list, "4");
+$oc-pink-5: map-get($oc-pink-list, "5");
+$oc-pink-6: map-get($oc-pink-list, "6");
+$oc-pink-7: map-get($oc-pink-list, "7");
+$oc-pink-8: map-get($oc-pink-list, "8");
+$oc-pink-9: map-get($oc-pink-list, "9");
+
+
+//  Grape
+//  ───────────────────────────────────
+
+$oc-grape-list: (
+  "0": #f8f0fc,
+  "1": #f3d9fa,
+  "2": #eebefa,
+  "3": #e599f7,
+  "4": #da77f2,
+  "5": #cc5de8,
+  "6": #be4bdb,
+  "7": #ae3ec9,
+  "8": #9c36b5,
+  "9": #862e9c
+);
+
+$oc-grape-0: map-get($oc-grape-list, "0");
+$oc-grape-1: map-get($oc-grape-list, "1");
+$oc-grape-2: map-get($oc-grape-list, "2");
+$oc-grape-3: map-get($oc-grape-list, "3");
+$oc-grape-4: map-get($oc-grape-list, "4");
+$oc-grape-5: map-get($oc-grape-list, "5");
+$oc-grape-6: map-get($oc-grape-list, "6");
+$oc-grape-7: map-get($oc-grape-list, "7");
+$oc-grape-8: map-get($oc-grape-list, "8");
+$oc-grape-9: map-get($oc-grape-list, "9");
+
+
+//  Violet
+//  ───────────────────────────────────
+
+$oc-violet-list: (
+  "0": #f3f0ff,
+  "1": #e5dbff,
+  "2": #d0bfff,
+  "3": #b197fc,
+  "4": #9775fa,
+  "5": #845ef7,
+  "6": #7950f2,
+  "7": #7048e8,
+  "8": #6741d9,
+  "9": #5f3dc4
+);
+
+$oc-violet-0: map-get($oc-violet-list, "0");
+$oc-violet-1: map-get($oc-violet-list, "1");
+$oc-violet-2: map-get($oc-violet-list, "2");
+$oc-violet-3: map-get($oc-violet-list, "3");
+$oc-violet-4: map-get($oc-violet-list, "4");
+$oc-violet-5: map-get($oc-violet-list, "5");
+$oc-violet-6: map-get($oc-violet-list, "6");
+$oc-violet-7: map-get($oc-violet-list, "7");
+$oc-violet-8: map-get($oc-violet-list, "8");
+$oc-violet-9: map-get($oc-violet-list, "9");
+
+
+//  Indigo
+//  ───────────────────────────────────
+
+$oc-indigo-list: (
+  "0": #edf2ff,
+  "1": #dbe4ff,
+  "2": #bac8ff,
+  "3": #91a7ff,
+  "4": #748ffc,
+  "5": #5c7cfa,
+  "6": #4c6ef5,
+  "7": #4263eb,
+  "8": #3b5bdb,
+  "9": #364fc7
+);
+
+$oc-indigo-0: map-get($oc-indigo-list, "0");
+$oc-indigo-1: map-get($oc-indigo-list, "1");
+$oc-indigo-2: map-get($oc-indigo-list, "2");
+$oc-indigo-3: map-get($oc-indigo-list, "3");
+$oc-indigo-4: map-get($oc-indigo-list, "4");
+$oc-indigo-5: map-get($oc-indigo-list, "5");
+$oc-indigo-6: map-get($oc-indigo-list, "6");
+$oc-indigo-7: map-get($oc-indigo-list, "7");
+$oc-indigo-8: map-get($oc-indigo-list, "8");
+$oc-indigo-9: map-get($oc-indigo-list, "9");
+
+
+//  Blue
+//  ───────────────────────────────────
+
+$oc-blue-list: (
+  "0": #e7f5ff,
+  "1": #d0ebff,
+  "2": #a5d8ff,
+  "3": #74c0fc,
+  "4": #4dabf7,
+  "5": #339af0,
+  "6": #228be6,
+  "7": #1c7ed6,
+  "8": #1971c2,
+  "9": #1864ab
+);
+
+$oc-blue-0: map-get($oc-blue-list, "0");
+$oc-blue-1: map-get($oc-blue-list, "1");
+$oc-blue-2: map-get($oc-blue-list, "2");
+$oc-blue-3: map-get($oc-blue-list, "3");
+$oc-blue-4: map-get($oc-blue-list, "4");
+$oc-blue-5: map-get($oc-blue-list, "5");
+$oc-blue-6: map-get($oc-blue-list, "6");
+$oc-blue-7: map-get($oc-blue-list, "7");
+$oc-blue-8: map-get($oc-blue-list, "8");
+$oc-blue-9: map-get($oc-blue-list, "9");
+
+
+//  Cyan
+//  ───────────────────────────────────
+
+$oc-cyan-list: (
+  "0": #e3fafc,
+  "1": #c5f6fa,
+  "2": #99e9f2,
+  "3": #66d9e8,
+  "4": #3bc9db,
+  "5": #22b8cf,
+  "6": #15aabf,
+  "7": #1098ad,
+  "8": #0c8599,
+  "9": #0b7285
+);
+
+$oc-cyan-0: map-get($oc-cyan-list, "0");
+$oc-cyan-1: map-get($oc-cyan-list, "1");
+$oc-cyan-2: map-get($oc-cyan-list, "2");
+$oc-cyan-3: map-get($oc-cyan-list, "3");
+$oc-cyan-4: map-get($oc-cyan-list, "4");
+$oc-cyan-5: map-get($oc-cyan-list, "5");
+$oc-cyan-6: map-get($oc-cyan-list, "6");
+$oc-cyan-7: map-get($oc-cyan-list, "7");
+$oc-cyan-8: map-get($oc-cyan-list, "8");
+$oc-cyan-9: map-get($oc-cyan-list, "9");
+
+
+//  Teal
+//  ───────────────────────────────────
+
+$oc-teal-list: (
+  "0": #e6fcf5,
+  "1": #c3fae8,
+  "2": #96f2d7,
+  "3": #63e6be,
+  "4": #38d9a9,
+  "5": #20c997,
+  "6": #12b886,
+  "7": #0ca678,
+  "8": #099268,
+  "9": #087f5b
+);
+
+$oc-teal-0: map-get($oc-teal-list, "0");
+$oc-teal-1: map-get($oc-teal-list, "1");
+$oc-teal-2: map-get($oc-teal-list, "2");
+$oc-teal-3: map-get($oc-teal-list, "3");
+$oc-teal-4: map-get($oc-teal-list, "4");
+$oc-teal-5: map-get($oc-teal-list, "5");
+$oc-teal-6: map-get($oc-teal-list, "6");
+$oc-teal-7: map-get($oc-teal-list, "7");
+$oc-teal-8: map-get($oc-teal-list, "8");
+$oc-teal-9: map-get($oc-teal-list, "9");
+
+
+//  Green
+//  ───────────────────────────────────
+
+$oc-green-list: (
+  "0": #ebfbee,
+  "1": #d3f9d8,
+  "2": #b2f2bb,
+  "3": #8ce99a,
+  "4": #69db7c,
+  "5": #51cf66,
+  "6": #40c057,
+  "7": #37b24d,
+  "8": #2f9e44,
+  "9": #2b8a3e
+);
+
+$oc-green-0: map-get($oc-green-list, "0");
+$oc-green-1: map-get($oc-green-list, "1");
+$oc-green-2: map-get($oc-green-list, "2");
+$oc-green-3: map-get($oc-green-list, "3");
+$oc-green-4: map-get($oc-green-list, "4");
+$oc-green-5: map-get($oc-green-list, "5");
+$oc-green-6: map-get($oc-green-list, "6");
+$oc-green-7: map-get($oc-green-list, "7");
+$oc-green-8: map-get($oc-green-list, "8");
+$oc-green-9: map-get($oc-green-list, "9");
+
+
+//  Lime
+//  ───────────────────────────────────
+
+$oc-lime-list: (
+  "0": #f4fce3,
+  "1": #e9fac8,
+  "2": #d8f5a2,
+  "3": #c0eb75,
+  "4": #a9e34b,
+  "5": #94d82d,
+  "6": #82c91e,
+  "7": #74b816,
+  "8": #66a80f,
+  "9": #5c940d
+);
+
+$oc-lime-0: map-get($oc-lime-list, "0");
+$oc-lime-1: map-get($oc-lime-list, "1");
+$oc-lime-2: map-get($oc-lime-list, "2");
+$oc-lime-3: map-get($oc-lime-list, "3");
+$oc-lime-4: map-get($oc-lime-list, "4");
+$oc-lime-5: map-get($oc-lime-list, "5");
+$oc-lime-6: map-get($oc-lime-list, "6");
+$oc-lime-7: map-get($oc-lime-list, "7");
+$oc-lime-8: map-get($oc-lime-list, "8");
+$oc-lime-9: map-get($oc-lime-list, "9");
+
+
+//  Yellow
+//  ───────────────────────────────────
+
+$oc-yellow-list: (
+  "0": #fff9db,
+  "1": #fff3bf,
+  "2": #ffec99,
+  "3": #ffe066,
+  "4": #ffd43b,
+  "5": #fcc419,
+  "6": #fab005,
+  "7": #f59f00,
+  "8": #f08c00,
+  "9": #e67700
+);
+
+$oc-yellow-0: map-get($oc-yellow-list, "0");
+$oc-yellow-1: map-get($oc-yellow-list, "1");
+$oc-yellow-2: map-get($oc-yellow-list, "2");
+$oc-yellow-3: map-get($oc-yellow-list, "3");
+$oc-yellow-4: map-get($oc-yellow-list, "4");
+$oc-yellow-5: map-get($oc-yellow-list, "5");
+$oc-yellow-6: map-get($oc-yellow-list, "6");
+$oc-yellow-7: map-get($oc-yellow-list, "7");
+$oc-yellow-8: map-get($oc-yellow-list, "8");
+$oc-yellow-9: map-get($oc-yellow-list, "9");
+
+
+//  Orange
+//  ───────────────────────────────────
+
+$oc-orange-list: (
+  "0": #fff4e6,
+  "1": #ffe8cc,
+  "2": #ffd8a8,
+  "3": #ffc078,
+  "4": #ffa94d,
+  "5": #ff922b,
+  "6": #fd7e14,
+  "7": #f76707,
+  "8": #e8590c,
+  "9": #d9480f
+);
+
+$oc-orange-0: map-get($oc-orange-list, "0");
+$oc-orange-1: map-get($oc-orange-list, "1");
+$oc-orange-2: map-get($oc-orange-list, "2");
+$oc-orange-3: map-get($oc-orange-list, "3");
+$oc-orange-4: map-get($oc-orange-list, "4");
+$oc-orange-5: map-get($oc-orange-list, "5");
+$oc-orange-6: map-get($oc-orange-list, "6");
+$oc-orange-7: map-get($oc-orange-list, "7");
+$oc-orange-8: map-get($oc-orange-list, "8");
+$oc-orange-9: map-get($oc-orange-list, "9");
+
+
+//  Color list
+//  ───────────────────────────────────
+
+$oc-color-spectrum:   9;
+
+$oc-color-list: (
+  $oc-gray-list:      "gray",
+  $oc-red-list:      "red",
+  $oc-pink-list:      "pink",
+  $oc-grape-list:      "grape",
+  $oc-violet-list:      "violet",
+  $oc-indigo-list:      "indigo",
+  $oc-blue-list:      "blue",
+  $oc-cyan-list:      "cyan",
+  $oc-teal-list:      "teal",
+  $oc-green-list:      "green",
+  $oc-lime-list:      "lime",
+  $oc-yellow-list:      "yellow",
+  $oc-orange-list:      "orange"
+);

package/icore-open/color-scheme/open-color.scss.license

@@ -0,0 +1,2 @@
+Copyright (c) 2016-2018 heeyeun
+SPDX-License-Identifier: MIT

package/icore-open/components/article-content-wrapper.scss

@@ -0,0 +1,8 @@
+/* Article content wrapper */
+
+:root {
+  --article-content-wrapper-padding-top: 0;
+  --article-content-wrapper-padding-right: 0;
+  --article-content-wrapper-padding-bottom: 0;
+  --article-content-wrapper-padding-left: 0;
+}

package/icore-open/components/article.scss

@@ -0,0 +1,7 @@
+/* Article */
+
+:root {
+  --article-padding-left: 0;
+  --article-gap: var(--spacing-125);
+  --article-max-width: 50rem;
+}

package/icore-open/components/button-base.scss

@@ -1,17 +1,19 @@
 /* Button base styling */
 
+@use "../color-scheme";
+
 :root {
   --button-base-border-radius: var(--border-radius-m);
-  --button-base-background-color: var(--white);
+  --button-base-background-color: #{color-scheme.$oc-white};
   --button-base-border-width: 1px;
-  --button-base-border-color: #d4d4d4;
-  --button-base-text-color: #006fb3;
+  --button-base-border-color: #{color-scheme.$oc-gray-3};
+  --button-base-text-color: #{color-scheme.$oc-blue-8};
   --button-base-font-size: 1rem;
 
   /* Hover */
   --button-base-hover-background-color: var(--button-base-background-color);
-  --button-base-hover-border-color: #005c94;
-  --button-base-hover-text-color: #005c94;
+  --button-base-hover-border-color: #{color-scheme.$oc-blue-9};
+  --button-base-hover-text-color: #{color-scheme.$oc-blue-9};
   --button-base-hover-border-radius: var(--button-base-border-radius);
 
   /* Active */
@@ -27,8 +29,12 @@
     --button-base-hover-background-color
   );
 
-  --button-base-focus-border-color: var(--button-base-hover-border-color);
-  --button-base-focus-text-color: var(--button-base-hover-text-color);
+  --button-base-focus-border-color: #{color-scheme.$oc-blue-6};
+  --button-base-focus-text-color: #{color-scheme.$oc-blue-8};
+  --button-base-focus-outline-style: solid;
+  --button-base-focus-outline-color: #{color-scheme.$oc-gray-3};
+  --button-base-focus-outline-width: 1px;
+  --button-base-focus-outline-offset: -0.25rem;
 
   /* Selected */
   --button-base-selected-background-color: var(

package/icore-open/components/button-cta.scss

@@ -0,0 +1,8 @@
+/* Button cta */
+
+@use "../color-scheme";
+
+:root {
+  --button-cta-background-color: #{color-scheme.$oc-blue-8};
+  --button-cta-hover-background-color: #{color-scheme.$oc-blue-9};
+}

package/icore-open/components/code.scss

@@ -0,0 +1,9 @@
+/* Code */
+
+@use "../color-scheme";
+
+:root {
+  --code-base-base-background-color: #{color-scheme.$oc-gray-1};
+  --code-base-base-text-color: var(--application-base-text-color);
+  --code-base-padding: 0 0.5rem;
+}

package/icore-open/components/footer-navigation-link-active.scss

@@ -0,0 +1,7 @@
+/* Footer navigation link active */
+
+@use "../color-scheme";
+
+:root {
+  --footer-navigation-link-active-text-color: #{color-scheme.$oc-blue-9};
+}

package/icore-open/components/footer-navigation-link-focus.scss

@@ -0,0 +1,10 @@
+/* Footer navigation link focus */
+
+@use "../color-scheme";
+
+:root {
+  --footer-navigation-link-focus-text-color: #{color-scheme.$oc-blue-8};
+  --footer-navigation-link-focus-text-decoration: #{color-scheme.$oc-blue-8};
+  --footer-navigation-link-focus-outline: 1px solid #{color-scheme.$oc-blue-8};
+  --footer-navigation-link-focus-outline-offset: 0.25rem;
+}

package/icore-open/components/footer-navigation-link-hover.scss

@@ -0,0 +1,7 @@
+/* footer navigation link hover */
+
+@use "../color-scheme";
+
+:root {
+  --footer-navigation-link-hover-text-color: #{color-scheme.$oc-blue-9};
+}

package/icore-open/components/footer-navigation-link-visited.scss

@@ -0,0 +1,7 @@
+/* Footer navigation link Visited */
+
+@use "../color-scheme";
+
+:root {
+  --footer-navigation-link-visited-text-color: #{color-scheme.$oc-grape-8};
+}

package/icore-open/components/footer-navigation-link.scss

@@ -0,0 +1,9 @@
+/* Footer navigation Link */
+
+@use "../color-scheme";
+
+:root {
+  --footer-navigation-link-text-color: var(--link-text-color);
+  --footer-navigation-link-font-weight: var(--link-font-weight);
+  --footer-navigation-link-text-decoration: var(--link-text-decoration);
+}

package/icore-open/components/footer.scss

@@ -1,5 +1,9 @@
 /* Footer */
 
+@use "../color-scheme";
+
 :root {
-  --footer-background-color: #fff;
+  --footer-background-color: #{color-scheme.$oc-white};
+  --footer-navigation-list-item-list-style: none;
+  --footer-align-items: flex-end;
 }

package/icore-open/components/form-accent-color.scss

@@ -1,5 +1,7 @@
 /* Form accent color */
 
+@use "../color-scheme";
+
 :root {
-  --form-accent-color-color: #006fb3;
+  --form-accent-color-color: #{color-scheme.$oc-blue-8};
 }

package/icore-open/components/form-base.scss

@@ -1,9 +1,15 @@
 /* Form input */
 
+@use "../color-scheme";
+
 :root {
-  --form-base-text-color: #3b3b3b;
+  --form-base-text-color: #{color-scheme.$oc-gray-9};
   --form-base-font-size: 1rem;
   --form-base-font-weight: bold;
-  --form-base-gap: var(--spacing-025);
-  --form-base-background-color: #fff;
+  --form-base-gap: var(--spacing-100);
+  --form-base-background-color: #{color-scheme.$oc-white};
+  --form-base-padding-top: 0;
+  --form-base-padding-right: 0;
+  --form-base-padding-bottom: 0;
+  --form-base-padding-left: 0;
 }

package/icore-open/components/form-button.scss

@@ -2,14 +2,5 @@
 
 :root {
   --form-button-font-size: 1rem;
-}
-
-form {
-  button,
-  a.button,
-  input[type="button"],
-  input[type="submit"],
-  input[type="reset"] {
-    margin-top: var(--spacing-100);
-  }
+  --form-button-margin-top: var(--spacing-050);
 }

package/icore-open/components/form-fieldset.scss

@@ -0,0 +1,7 @@
+/* Form fieldset */
+
+:root {
+  --form-fieldset-legend-margin-bottom: var(--spacing-0);
+  --form-fieldset-legend-margin-bottom: var(--form-group-gap);
+  --form-fieldset-label-margin-bottom: var(--form-group-gap);
+}

package/icore-open/components/form-input.scss

@@ -1,8 +1,10 @@
 /* Form input */
 
+@use "../color-scheme";
+
 :root {
   --form-input-border-radius: var(--border-radius-s);
   --form-input-border-width: 1px;
   --form-input-border-style: solid;
-  --form-input-border-color: #888;
+  --form-input-border-color: #{color-scheme.$oc-gray-6};
 }

package/icore-open/components/header-navigation-collapsible.scss

@@ -1,9 +1,11 @@
 /* Header collapsible */
 
+@use "../color-scheme";
+
 :root {
   /* Collapsible menu */
   --header-navigation-collapsible-menu-top: 4rem;
-  --header-navigation-collapsible-background-color: var(--white);
+  --header-navigation-collapsible-background-color: #{color-scheme.$oc-white};
   --header-navigation-collapsible-top: var(--header-navigation-min-height);
 
   /* Menu item */
@@ -26,7 +28,7 @@
   --header-navigation-collapsible-button-background-color: transparent;
 
   /* Icon */
-  --header-navigation-collapsible-icon-color: var(--white);
+  --header-navigation-collapsible-icon-color: #{color-scheme.$oc-white};
   --header-navigation-button-icon-font-family: var(--icon-font-family);
   --header-navigation-collapsible-icon-font-size: var(
     --body-text-large-font-size

package/icore-open/components/header-navigation.scss

@@ -1,5 +1,5 @@
 /* Header navigation */
-@use "../fundamentals/colors";
+@use "../color-scheme";
 
 :root {
   --header-navigation-padding-top: 0;
@@ -10,8 +10,8 @@
   --header-navigation-position: static;
 
   /* Header navigation */
-  --header-navigation-background-color: var(--grey-2);
-  --header-navigation-text-color: var(--white);
+  --header-navigation-background-color: #{color-scheme.$oc-gray-9};
+  --header-navigation-text-color: #{color-scheme.$oc-white};
   --header-navigation-font-weight: bold;
   --header-navigation-max-width: 100%;
   --header-navigation-align-items: stretch;
@@ -27,7 +27,7 @@
   --header-navigation-link-font-weight: bold;
 
   /* Link hover */
-  --header-navigation-link-hover-background-color: var(--grey-1);
+  --header-navigation-link-hover-background-color: #{color-scheme.$oc-gray-7};
   --header-navigation-link-hover-font-weight: var(
     --header-navigation-link-font-weight
   );

package/icore-open/components/layout-authentication.scss

@@ -0,0 +1,9 @@
+/* Layout authentication */
+
+:root {
+  --layout-authentication-background-color: #fff;
+  --layout-authentication-padding-top: var(--spacing-150);
+  --layout-authentication-padding-right: var(--spacing-150);
+  --layout-authentication-padding-bottom: var(--spacing-150);
+  --layout-authentication-padding-left: var(--spacing-150);
+}

package/icore-open/components/link-focus.scss

@@ -0,0 +1,10 @@
+/* Link Focus */
+
+@use "../color-scheme";
+
+:root {
+  --link-focus-text-color: #{color-scheme.$oc-blue-8};
+  --link-focus-text-decoration: #{color-scheme.$oc-blue-8};
+  --link-focus-outline: 1px solid #{color-scheme.$oc-blue-8};
+  --link-focus-outline-offset: 0.25rem;
+}

package/icore-open/components/link-hover.scss

@@ -0,0 +1,7 @@
+/* Link Hover */
+
+@use "../color-scheme";
+
+:root {
+  --link-hover-text-color: #{color-scheme.$oc-blue-9};
+}

package/icore-open/components/link-visited-hover.scss

@@ -0,0 +1,7 @@
+/* Link Visited Hover */
+
+@use "../color-scheme";
+
+:root {
+  --link-visited-hover-text-color: #{color-scheme.$oc-grape-9};
+}

package/icore-open/components/link-visited.scss

@@ -0,0 +1,7 @@
+/* Link Visited */
+
+@use "../color-scheme";
+
+:root {
+  --link-visited-text-color: #{color-scheme.$oc-grape-8};
+}

package/icore-open/components/link.scss

@@ -0,0 +1,9 @@
+/* Link */
+
+@use "../color-scheme";
+
+:root {
+  --link-text-color: #{color-scheme.$oc-blue-8};
+  --link-font-weight: normal;
+  --link-text-decoration: underline;
+}

package/icore-open/components/main-content-wrapper.scss

@@ -0,0 +1,6 @@
+/* Main content wrapper */
+
+:root {
+  --main-content-wrapper-justify-content: center;
+  --main-content-wrapper-max-width: 50rem;
+}

package/icore-open/components/notification-block-element.scss

@@ -0,0 +1,10 @@
+/* Notification error */
+
+@use "../color-scheme";
+
+:root {
+  --notification-block-element-padding-top: 1rem;
+  --notification-block-element-padding-right: 1rem;
+  --notification-block-element-padding-bottom: 1rem;
+  --notification-block-element-padding-left: 1rem;
+}

package/icore-open/components/radio-input.scss

@@ -1,5 +1,7 @@
 /* Radio input */
 
+@use "../color-scheme";
+
 :root {
-  --radio-input-accent-color: #006fb3;
+  --radio-input-accent-color: #{color-scheme.$oc-blue-8};
 }

package/icore-open/components/section.scss

@@ -2,4 +2,6 @@
 
 :root {
   --section-padding-left: 0;
+  --section-gap: var(--spacing-125);
+  --section-max-width: 50rem;
 }

package/icore-open/components/table.scss

@@ -1,16 +1,18 @@
 /* Table */
 
+@use "../color-scheme";
+
 :root {
   /* Base */
-  --table-background-color: #ffffff;
+  --table-background-color: #{color-scheme.$oc-white};
   --table-text-color: var(--application-base-text-color);
   --table-text-align: left;
 
   /* Table header */
-  --table-head-background-color: #ffffff;
+  --table-head-background-color: #{color-scheme.$oc-white};
   --table-head-border-width: 0 0 2px 0;
   --table-head-border-style: solid;
-  --table-head-border-color: #01689b;
+  --table-head-border-color: #{color-scheme.$oc-blue-8};
   --table-head-cell-padding: var(--spacing-075);
 
   /* Table row */
@@ -26,7 +28,7 @@
   /* Table cell */
   --table-cell-border-width: 0 0 1px 0;
   --table-cell-border-style: solid;
-  --table-cell-border-color: #cccccc;
+  --table-cell-border-color: #{color-scheme.$oc-gray-3};
   --table-cell-padding: 0.5rem 1rem;
   --table-cells-padding: 0.25rem 1rem;
 
@@ -36,20 +38,20 @@
   --table-action-buttons-button-hover-text-color: var(--link-text-color);
 
   /* Table footer */
-  --table-foot-background-color: var(--white);
+  --table-foot-background-color: #{color-scheme.$oc-white};
   --table-foot-font-weight: 600;
   --table-foot-font-size: var(--table-font-size);
   --table-foot-border-width: 2px 0 0 0;
-  --table-foot-border-color: #01689b;
+  --table-foot-border-color: #{color-scheme.$oc-blue-8};
 
   /* Table footer cell */
-  --table-foot-header-background-color: var(--white);
+  --table-foot-header-background-color: #{color-scheme.$oc-white};
   --table-foot-header-border-width: var(--table-cell-border-width);
   --table-foot-header-border-style: var(--table-cell-border-style);
   --table-foot-header-border-color: var(--table-cell-border-color);
 
   /* Table footer cell */
-  --table-foot-cell-background-color: var(--white);
+  --table-foot-cell-background-color: #{color-scheme.$oc-white};
   --table-foot-cell-border-width: var(--table-cell-border-width);
   --table-foot-cell-border-style: var(--table-cell-border-style);
   --table-foot-cell-border-color: var(--table-cell-border-color);

package/icore-open/{fonts.scss → fonts/fonts.scss}

@@ -1,4 +1,6 @@
-@use "variables";
+/* Fonts */
+
+@use "../variables";
 
 /* IBM Plex Sans */
 /* Regular */

package/icore-open/fundamentals/body-text-set.scss

@@ -1,5 +1,7 @@
 /* body-text-set - variables */
 
+@use "../color-scheme";
+
 :root {
   /* Available variables to use within all text types */
   --text-set-font-family: "Open Sans", sans-serif;
@@ -7,14 +9,14 @@
   --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-color: var(--application-base-text-color);
   --text-set-text-align: left;
 
   /* Body text small */
   --body-text-small-font-size: 0.875rem;
   --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-color: #{color-scheme.$oc-gray-7};
   --body-text-small-text-align: var(--text-set-text-align);
 
   /* Strong */

package/icore-open/theme-specific-components/avatar.scss

@@ -0,0 +1,15 @@
+/* Avatar */
+
+@use "../color-scheme";
+
+.avatar {
+  display: flex;
+  align-self: center;
+  background-color: #{color-scheme.$oc-blue-8};
+  border-radius: 50%;
+  color: #{color-scheme.$oc-white};
+  height: 3rem;
+  width: 3rem;
+  padding: 0;
+  text-decoration: none;
+}

package/icore-open/theme-specific-components/header-navigation-actions.scss

@@ -0,0 +1,8 @@
+/* Header navigation actions */
+
+@use "../color-scheme";
+
+body > header nav .actions {
+  display: flex;
+  gap: var(--spacing-100);
+}

package/icore-open/theme-specific-components/visually-grouped.scss

@@ -1,7 +1,9 @@
 /* Visually grouped */
 
+@use "../color-scheme";
+
 %visually-grouped {
-  background-color: var(--white);
+  background-color: #{color-scheme.$oc-white};
   padding-top: var(--spacing-100);
   padding-right: var(--spacing-150);
   padding-bottom: var(--spacing-150);

package/icore-open/theme.scss

@@ -4,7 +4,7 @@
 @forward "variables";
 
 /* Fonts */
-@use "fonts";
+@use "fonts/fonts";
 
 /* Styling on the highest level */
 @use "application-base";
@@ -12,17 +12,32 @@
 /* Fundamentals */
 @use "fundamentals/body-text-set";
 @use "fundamentals/border-radii";
-@use "fundamentals/colors";
 @use "fundamentals/headings-base-set";
 @use "fundamentals/shadows";
 @use "fundamentals/spacing";
 
 /* Layout */
+@use "components/layout-authentication";
+
+/* Link */
+@use "components/link";
+@use "components/link-hover";
+@use "components/link-visited";
+@use "components/link-visited-hover";
+@use "components/link-focus";
+@use "components/footer-navigation-link";
+@use "components/footer-navigation-link-visited";
+@use "components/footer-navigation-link-hover";
+@use "components/footer-navigation-link-active";
+@use "components/footer-navigation-link-focus.scss";
 
 /* Components */
 @use "components/breadcrumb-bar";
 @use "components/button-base";
+@use "components/button-cta";
+@use "components/code";
 @use "components/footer";
+@use "components/form-fieldset";
 @use "components/form-accent-color";
 @use "components/form-base";
 @use "components/form-button";
@@ -42,10 +57,18 @@
 
 /* Layout */
 @use "components/main";
+@use "components/main-content-wrapper";
 @use "components/section";
 @use "components/section-content-wrapper";
+@use "components/article";
+@use "components/article-content-wrapper";
+
+/* Notifications */
+@use "components/notification-block-element";
 
 /* Theme specific components */
 /* These are components that aren't build on an exsisting Manon component
 And are specific to this theme */
 @use "theme-specific-components/visually-grouped";
+@use "theme-specific-components/avatar";
+@use "theme-specific-components/header-navigation-actions";

package/package.json

@@ -13,14 +13,14 @@
     "**/*.license"
   ],
   "peerDependencies": {
-    "@minvws/manon": "16.3.0-beta.7"
+    "@minvws/manon": "16.3.0-beta.8"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/minvws/nl-rdo-manon.git",
     "directory": "themes"
   },
-  "version": "16.3.0-beta.7",
+  "version": "16.3.0-beta.8",
   "scripts": {
     "npm-version": "npm version"
   }

package/icore-open/fundamentals/colors.scss

@@ -1,10 +0,0 @@
-/* Colors */
-
-:root {
-  --white: #fff;
-  --black: #000;
-
-  /* Grey */
-  --grey-1: #535353;
-  --grey-2: #1d1d1d;
-}