diff --git a/assets/scss/_front-page.scss b/assets/scss/_front-page.scss
index 23327c05992..24dbe436b32 100644
--- a/assets/scss/_front-page.scss
+++ b/assets/scss/_front-page.scss
@@ -3,6 +3,7 @@
.td-main main.lp {
padding: 2rem 2.5rem;
padding-top: 0 !important; // top clearance handled by lp-mobile-bar (mobile) and lp-hero (desktop)
+ background-color: $gray-200;
@include media-breakpoint-up(md) {
padding-top: 0 !important;
@@ -20,7 +21,7 @@ div.lp-container {
}
.lp-hero {
- background-color: $dark;
+ background-color: $gray-300;
min-height: 350px;
margin-left: -2.5rem;
margin-right: -2.5rem;
@@ -33,6 +34,9 @@ div.lp-container {
.hero-text {
flex: 0 0 100%;
+ color: $primary;
+ margin-right: 4rem;
+
// Stretch out text once image disappears (smaller viewports)
@include media-breakpoint-up(lg) {
flex: 0 0 auto;
@@ -63,7 +67,6 @@ h5.lp-description {
width: auto;
max-width: unset;
flex-shrink: 0;
-
}
img.card-icon {
@@ -75,7 +78,7 @@ img.card-icon {
}
h4.card-title {
- color: $gray-900;
+ color: $primary;
font-weight: 600;
font-size: 1.25rem;
border-top: 3px solid;
@@ -94,15 +97,15 @@ ul.card-text {
content: "\00a0→"; // Add a nonbreaking space (\00a0) and arrow to links
}
&:hover {
- color: $link-hover-color;
+ color: $link-color;
text-decoration: underline;
}
- color: $secondary;
+ color: $primary;
}
}
div.lp-panel {
- background: #171717;
+ background: $white;
box-sizing: border-box;
border-radius: 8px;
padding: 1.5rem 1.25rem;
@@ -110,7 +113,7 @@ div.lp-panel {
}
h4.lp-panel-title {
- color: #FFFFFFEB;
+ color: $primary;
font-weight: 600;
font-size: 1.125rem;
margin-bottom: 0.875rem !important;
@@ -122,16 +125,16 @@ li.lp-panel-list {
list-style: none;
margin-bottom: 0.5rem;
a {
- color: #8AC4FF !important;
+ color: $info-7 !important;
&:hover {
- color: #99D0FF !important;
+ color: $info-9 !important;
}
}
}
p.rn-date {
- color: #FFFFFFD4;
+ color: $info-10;
font-size: 0.75rem;
font-weight: 400;
margin-bottom: 0rem;
diff --git a/assets/scss/_siemens-colors-primitives.scss b/assets/scss/_siemens-colors-primitives.scss
new file mode 100644
index 00000000000..de4eb70c905
--- /dev/null
+++ b/assets/scss/_siemens-colors-primitives.scss
@@ -0,0 +1,234 @@
+// # Siemens Design Language primitive color tokens
+
+// ## Brand
+$main-brand-white: #ffffff;
+$main-brand-interactive-coral: #00cccc;
+$main-brand-light-petrol: #00c1b6;
+$main-brand-petrol: #009999;
+$main-brand-teal-90: #196269;
+$main-brand-teal: #005159;
+$main-brand-black: #000000;
+$main-brand-focus: #199fff;
+$main-brand-focus-light: #008ff5;
+
+// ## Deep blue
+$main-deep-blue-50: #ebebee;
+$main-deep-blue-100: #e5e5e9;
+$main-deep-blue-200: #ccccd4;
+$main-deep-blue-300: #b3b3be;
+$main-deep-blue-400: #9999a9;
+$main-deep-blue-500: #7d8099;
+$main-deep-blue-600: #66667e;
+$main-deep-blue-650: #4c4c68;
+$main-deep-blue-700: #40405e;
+$main-deep-blue-750: #333353;
+$main-deep-blue-775: #2d2d45;
+$main-deep-blue-800: #23233c;
+$main-deep-blue-850: #161632;
+$main-deep-blue-875: #12122e;
+$main-deep-blue-900: #000028;
+
+// ## Sand
+$main-sand-100: #fafafa;
+$main-sand-200: #f5f5f5;
+$main-sand-300: #f0f0ef;
+$main-sand-400: #ededed;
+$main-sand-500: #e0e0de;
+$main-sand-600: #cfcfcb;
+$main-sand-700: #b0b0ab;
+$main-sand-800: #8a8a85;
+$main-sand-900: #5e5e5a;
+
+// ## Interactive blue
+$main-interactive-blue-100: #e0f1f4;
+$main-interactive-blue-200: #c2e2e9;
+$main-interactive-blue-300: #a9d5df;
+$main-interactive-blue-400: #8ec7d4;
+$main-interactive-blue-500: #73bac9;
+$main-interactive-blue-600: #3d95a9;
+$main-interactive-blue-700: #006b80;
+$main-interactive-blue-800: #004f60;
+$main-interactive-blue-900: #00333e;
+
+// ## Bold green
+$main-bold-green-100: #d1fff2;
+$main-bold-green-200: #c2ffee;
+$main-bold-green-300: #66ffd5;
+$main-bold-green-400: #00ffb9;
+$main-bold-green-500: #00e5aa;
+$main-bold-green-600: #00997f;
+$main-bold-green-700: #007369;
+$main-bold-green-800: #16565c;
+$main-bold-green-900: #001f39;
+
+// ## Blue
+$main-blue-100: #d2e2f7;
+$main-blue-200: #a9c7f1;
+$main-blue-300: #81adeb;
+$main-blue-400: #518de2;
+$main-blue-500: #206ed9;
+$main-blue-600: #1f60b9;
+$main-blue-700: #1e5299;
+$main-blue-800: #1c4680;
+$main-blue-900: #193966;
+
+// ## Green
+$main-green-100: #c1f2d6;
+$main-green-200: #99ecbd;
+$main-green-300: #72e6a3;
+$main-green-400: #4dd384;
+$main-green-500: #28bf66;
+$main-green-600: #229753;
+$main-green-700: #1c703f;
+$main-green-800: #17522f;
+$main-green-900: #12331f;
+
+// ## Yellow
+$main-yellow-100: #fff2ba;
+$main-yellow-200: #ffe576;
+$main-yellow-300: #ffd732;
+$main-yellow-400: #ffd00f;
+$main-yellow-500: #edbf00;
+$main-yellow-600: #ba9600;
+$main-yellow-700: #876d00;
+$main-yellow-800: #4d3901;
+$main-yellow-900: #322501;
+
+// ## Orange
+$main-orange-100: #fee1cc;
+$main-orange-200: #ffcd88;
+$main-orange-300: #ffa525;
+$main-orange-400: #ff9000;
+$main-orange-500: #e37200;
+$main-orange-600: #c75300;
+$main-orange-700: #a84100;
+$main-orange-800: #8f3700;
+$main-orange-900: #421a00;
+
+// ## Red
+$main-red-100: #fcccd7;
+$main-red-200: #fda7b0;
+$main-red-300: #ff8e9c;
+$main-red-400: #eb5361;
+$main-red-500: #d72339;
+$main-red-600: #bf162e;
+$main-red-700: #a60823;
+$main-red-800: #650011;
+$main-red-900: #42000c;
+
+// ## Data brand
+$data-brand-bold-green: #00ffb9;
+$data-brand-light-petrol: #00c1b6;
+$data-brand-petrol: #009999;
+
+// ## Data deep blue
+$data-deep-blue-100: #e5e5e9;
+$data-deep-blue-200: #ccccd4;
+$data-deep-blue-400: #9999a9;
+$data-deep-blue-500: #7d8099;
+$data-deep-blue-700: #4c4c68;
+$data-deep-blue-900: #262648;
+
+// ## Data turquoise
+$data-turquoise-100: #85e9d2;
+$data-turquoise-200: #47e2bb;
+$data-turquoise-400: #00d7a0;
+$data-turquoise-500: #00af8e;
+$data-turquoise-700: #1a747d;
+$data-turquoise-900: #005159;
+
+// ## Data sand
+$data-sand-100: #efefec;
+$data-sand-200: #dfdfd9;
+$data-sand-400: #c5c5b8;
+$data-sand-500: #aaaa96;
+$data-sand-700: #757563;
+$data-sand-900: #5e5e4a;
+
+// ## Data royal blue
+$data-royal-blue-100: #b2e0ff;
+$data-royal-blue-200: #97c7ff;
+$data-royal-blue-400: #6895f6;
+$data-royal-blue-500: #3664c6;
+$data-royal-blue-700: #00237a;
+$data-royal-blue-900: #00004a;
+
+// ## Data blue
+$data-blue-100: #ccf2f8;
+$data-blue-200: #80dfed;
+$data-blue-400: #4dd1e7;
+$data-blue-500: #00bedc;
+$data-blue-700: #0087be;
+$data-blue-900: #00557c;
+
+// ## Data interactive coral
+$data-interactive-coral-100: #ccf5f5;
+$data-interactive-coral-200: #66e0e0;
+$data-interactive-coral-400: #00cccc;
+$data-interactive-coral-500: #00a3ab;
+$data-interactive-coral-700: #007082;
+$data-interactive-coral-900: #002949;
+
+// ## Data plum
+$data-plum-100: #ffbeda;
+$data-plum-200: #ff98c4;
+$data-plum-400: #e5659b;
+$data-plum-500: #c04774;
+$data-plum-700: #9f1853;
+$data-plum-900: #4f153d;
+
+// ## Data purple
+$data-purple-100: #d2cbff;
+$data-purple-200: #bfb0f3;
+$data-purple-400: #a68dff;
+$data-purple-500: #805cff;
+$data-purple-700: #7353e5;
+$data-purple-900: #553ba3;
+
+// ## Data orchid
+$data-orchid-100: #edd6f2;
+$data-orchid-200: #d59cde;
+$data-orchid-400: #b95cc9;
+$data-orchid-500: #a733bc;
+$data-orchid-700: #740089;
+$data-orchid-900: #52245c;
+
+// ## Data orange
+$data-orange-100: #ffdeb2;
+$data-orange-200: #ffbc66;
+$data-orange-400: #ff9000;
+$data-orange-500: #e57700;
+$data-orange-700: #be5925;
+$data-orange-900: #801100;
+
+// ## Data yellow
+$data-yellow-100: #fff7d6;
+$data-yellow-200: #ffe784;
+$data-yellow-400: #ffd732;
+$data-yellow-500: #e5bd19;
+$data-yellow-700: #b28a00;
+$data-yellow-900: #805800;
+
+// ## Data red
+$data-red-100: #fcccd7;
+$data-red-200: #ffa8b3;
+$data-red-400: #ff6779;
+$data-red-500: #ff2640;
+$data-red-700: #d72339;
+$data-red-900: #990000;
+
+// ## Data green
+$data-green-100: #ccf7de;
+$data-green-200: #80ebac;
+$data-green-400: #01d65a;
+$data-green-500: #00a327;
+$data-green-700: #00890e;
+$data-green-900: #005700;
+
+// ## Data avocado
+$data-avocado-100: #f3f9e0;
+$data-avocado-200: #d1e98a;
+$data-avocado-400: #9ec625;
+$data-avocado-500: #637d17;
+$data-avocado-700: #435410;
+$data-avocado-900: #2e3a0a;
diff --git a/assets/scss/_siemens-colors-semantic.scss b/assets/scss/_siemens-colors-semantic.scss
new file mode 100644
index 00000000000..8fbdb9546d9
--- /dev/null
+++ b/assets/scss/_siemens-colors-semantic.scss
@@ -0,0 +1,209 @@
+// # Siemens Design Language semantic color tokens
+
+// ## Background
+$background-0: light-dark($main-sand-200, $main-deep-blue-900);
+$background-1: light-dark($main-brand-white, $main-deep-blue-800);
+$background-2: light-dark($main-sand-300, $main-deep-blue-875);
+$background-3: light-dark($main-brand-white, $main-deep-blue-775);
+$background-4: light-dark($main-sand-100, $main-deep-blue-850);
+$background-hover: light-dark($main-sand-400, $main-deep-blue-750);
+$background-active: light-dark($main-sand-500, $main-deep-blue-700);
+$background-accent: light-dark($main-interactive-blue-700, $main-brand-interactive-coral);
+$background-accent-hover: light-dark($main-brand-teal, $main-bold-green-400);
+$background-accent-active: light-dark($main-interactive-blue-800, $main-bold-green-500);
+$background-accent-secondary: rgba(0, 204, 204, 0);
+$background-accent-secondary-hover: light-dark($main-bold-green-100, $main-interactive-blue-900);
+$background-accent-secondary-active: light-dark($main-bold-green-200, $main-bold-green-900);
+$background-caution: light-dark($main-yellow-500, $main-yellow-300);
+$background-caution-hover: light-dark($main-yellow-400, $main-yellow-500);
+$background-caution-active: light-dark($main-yellow-300, $main-yellow-600);
+$background-caution-subtle: light-dark($main-yellow-100, $main-yellow-900);
+$background-critical: $data-orchid-500;
+$background-critical-hover: $data-orchid-700;
+$background-critical-active: $data-orchid-900;
+$background-critical-subtle: light-dark($data-orchid-100, $data-orchid-900);
+$background-danger: $main-red-500;
+$background-danger-hover: $main-red-600;
+$background-danger-active: $main-red-700;
+$background-danger-subtle: light-dark($main-red-100, $main-red-900);
+$background-danger-secondary: rgba(215, 35, 57, 0);
+$background-disabled: light-dark($main-deep-blue-300, $main-deep-blue-700);
+$background-information: $main-blue-500;
+$background-information-hover: $main-blue-600;
+$background-information-active: $main-blue-700;
+$background-information-subtle: light-dark($main-blue-100, $main-blue-900);
+$background-inverse: light-dark($main-deep-blue-900, $main-brand-white);
+$background-neutral: light-dark($main-sand-500, $main-deep-blue-600);
+$background-neutral-hover: light-dark($main-sand-600, $main-deep-blue-750);
+$background-neutral-active: light-dark($main-sand-700, $main-deep-blue-775);
+$background-success: light-dark($main-green-700, $main-green-500);
+$background-success-hover: light-dark($main-green-800, $main-green-400);
+$background-success-active: light-dark($main-green-900, $main-green-300);
+$background-success-subtle: light-dark($main-green-100, $main-green-900);
+$background-warning: light-dark($main-orange-600, $main-orange-400);
+$background-warning-hover: light-dark($main-orange-700, $main-orange-500);
+$background-warning-active: light-dark($main-orange-800, $main-orange-600);
+$background-warning-subtle: light-dark($main-orange-100, $main-orange-900);
+$background-warning-secondary: rgba(199, 83, 0, 0);
+
+// ## Border
+$border-1: light-dark($main-deep-blue-900, $main-brand-white);
+$border-2: light-dark($main-deep-blue-600, $main-deep-blue-400);
+$border-3: light-dark($main-deep-blue-400, $main-deep-blue-600);
+$border-4: light-dark($main-deep-blue-100, $main-deep-blue-650);
+$border-accent: light-dark($main-interactive-blue-700, $main-brand-interactive-coral);
+$border-accent-hover: light-dark($main-brand-teal, $main-bold-green-400);
+$border-accent-active: light-dark($main-interactive-blue-800, $main-bold-green-500);
+$border-caution: light-dark($main-yellow-500, $main-yellow-400);
+$border-critical: $data-orchid-500;
+$border-danger: $main-red-500;
+$border-danger-secondary: light-dark($main-red-600, $main-red-300);
+$border-information: $main-blue-500;
+$border-inverse: light-dark($main-sand-200, $main-deep-blue-900);
+$border-neutral: light-dark($main-deep-blue-400, $main-deep-blue-600);
+$border-success: light-dark($main-green-700, $main-green-500);
+$border-warning: light-dark($main-orange-600, $main-orange-400);
+$border-warning-secondary: light-dark($main-orange-700, $main-orange-300);
+
+// ## Code
+$code-1: light-dark($main-deep-blue-900, $main-deep-blue-100);
+$code-2: light-dark($main-blue-800, $data-royal-blue-200);
+$code-3: light-dark($data-blue-900, $data-blue-200);
+$code-4: light-dark($main-orange-700, $data-orange-200);
+$code-5: light-dark($main-yellow-700, $data-yellow-200);
+$code-6: light-dark($main-green-700, $data-green-200);
+$code-7: light-dark($data-orchid-500, $data-orchid-200);
+$code-8: light-dark($data-sand-900, $data-sand-500);
+$code-9: light-dark($data-deep-blue-700, $data-deep-blue-400);
+$code-10: light-dark($data-purple-900, $data-purple-400);
+$code-11: light-dark($data-turquoise-700, $data-turquoise-100);
+$code-12: light-dark($main-red-700, $main-red-300);
+
+// ## Data
+$data-categorical-1: light-dark($data-brand-petrol, $data-brand-light-petrol);
+$data-categorical-2: light-dark($data-turquoise-900, $data-brand-bold-green);
+$data-categorical-3: light-dark($data-green-700, $data-green-400);
+$data-categorical-4: light-dark($data-turquoise-700, $data-turquoise-100);
+$data-categorical-5: light-dark($data-royal-blue-500, $data-royal-blue-400);
+$data-categorical-6: light-dark($data-interactive-coral-900, $data-interactive-coral-100);
+$data-categorical-7: light-dark($data-purple-700, $data-purple-500);
+$data-categorical-8: light-dark($data-purple-900, $data-purple-200);
+$data-categorical-9: light-dark($data-orchid-700, $data-orchid-400);
+$data-categorical-10: light-dark($data-red-700, $data-red-500);
+$data-categorical-11: light-dark($data-plum-900, $data-plum-400);
+$data-categorical-12: light-dark($data-plum-500, $data-plum-200);
+$data-categorical-13: light-dark($data-royal-blue-700, $data-royal-blue-200);
+$data-categorical-14: light-dark($data-orange-900, $data-orange-400);
+$data-categorical-15: light-dark($data-yellow-900, $data-yellow-400);
+$data-categorical-16: light-dark($data-sand-700, $data-sand-500);
+$data-categorical-17: light-dark($data-deep-blue-700, $data-deep-blue-500);
+$data-rating-bad: $main-red-500;
+$data-rating-poor: $main-orange-500;
+$data-rating-average: $main-yellow-500;
+$data-rating-good: $data-avocado-400;
+$data-rating-excellent: $data-green-500;
+$data-sequential-avocado-1: light-dark($data-avocado-400, $data-avocado-200);
+$data-sequential-avocado-2: light-dark($data-avocado-500, $data-avocado-400);
+$data-sequential-avocado-3: light-dark($data-avocado-700, $data-avocado-500);
+$data-sequential-avocado-4: light-dark($data-avocado-900, $data-avocado-700);
+$data-sequential-blue-1: light-dark($data-blue-400, $data-blue-200);
+$data-sequential-blue-2: light-dark($data-blue-500, $data-blue-400);
+$data-sequential-blue-3: light-dark($data-blue-700, $data-blue-500);
+$data-sequential-blue-4: light-dark($data-blue-900, $data-blue-700);
+$data-sequential-deep-blue-1: light-dark($data-deep-blue-400, $data-deep-blue-200);
+$data-sequential-deep-blue-2: light-dark($data-deep-blue-500, $data-deep-blue-400);
+$data-sequential-deep-blue-3: light-dark($data-deep-blue-700, $data-deep-blue-500);
+$data-sequential-deep-blue-4: light-dark($data-deep-blue-900, $data-deep-blue-700);
+$data-sequential-green-1: light-dark($data-green-400, $data-green-200);
+$data-sequential-green-2: light-dark($data-green-500, $data-green-400);
+$data-sequential-green-3: light-dark($data-green-700, $data-green-500);
+$data-sequential-green-4: light-dark($data-green-900, $data-green-700);
+$data-sequential-interactive-coral-1: light-dark($data-interactive-coral-400, $data-interactive-coral-200);
+$data-sequential-interactive-coral-2: light-dark($data-interactive-coral-500, $data-interactive-coral-400);
+$data-sequential-interactive-coral-3: light-dark($data-interactive-coral-700, $data-interactive-coral-500);
+$data-sequential-interactive-coral-4: light-dark($data-interactive-coral-900, $data-interactive-coral-700);
+$data-sequential-orange-1: $data-orange-200;
+$data-sequential-orange-2: $data-orange-400;
+$data-sequential-orange-3: $data-orange-500;
+$data-sequential-orange-4: $data-orange-700;
+$data-sequential-orchid-1: light-dark($data-orchid-400, $data-orchid-200);
+$data-sequential-orchid-2: light-dark($data-orchid-500, $data-orchid-400);
+$data-sequential-orchid-3: light-dark($data-orchid-700, $data-orchid-500);
+$data-sequential-orchid-4: light-dark($data-orchid-900, $data-orchid-700);
+$data-sequential-plum-1: light-dark($data-plum-400, $data-plum-200);
+$data-sequential-plum-2: light-dark($data-plum-500, $data-plum-400);
+$data-sequential-plum-3: light-dark($data-plum-700, $data-plum-500);
+$data-sequential-plum-4: light-dark($data-plum-900, $data-plum-700);
+$data-sequential-purple-1: light-dark($data-purple-400, $data-purple-200);
+$data-sequential-purple-2: light-dark($data-purple-500, $data-purple-400);
+$data-sequential-purple-3: light-dark($data-purple-700, $data-purple-500);
+$data-sequential-purple-4: light-dark($data-purple-900, $data-purple-700);
+$data-sequential-red-1: light-dark($data-red-400, $data-red-200);
+$data-sequential-red-2: light-dark($data-red-500, $data-red-400);
+$data-sequential-red-3: light-dark($data-red-700, $data-red-500);
+$data-sequential-red-4: light-dark($data-red-900, $data-red-700);
+$data-sequential-royal-blue-1: light-dark($data-royal-blue-200, $data-royal-blue-100);
+$data-sequential-royal-blue-2: light-dark($data-royal-blue-400, $data-royal-blue-200);
+$data-sequential-royal-blue-3: light-dark($data-royal-blue-500, $data-royal-blue-400);
+$data-sequential-royal-blue-4: light-dark($data-royal-blue-700, $data-royal-blue-500);
+$data-sequential-sand-1: light-dark($data-sand-400, $data-sand-200);
+$data-sequential-sand-2: light-dark($data-sand-500, $data-sand-400);
+$data-sequential-sand-3: light-dark($data-sand-700, $data-sand-500);
+$data-sequential-sand-4: light-dark($data-sand-900, $data-sand-700);
+$data-sequential-turquoise-1: light-dark($data-turquoise-400, $data-turquoise-200);
+$data-sequential-turquoise-2: light-dark($data-turquoise-500, $data-turquoise-400);
+$data-sequential-turquoise-3: light-dark($data-turquoise-700, $data-turquoise-500);
+$data-sequential-turquoise-4: light-dark($data-turquoise-900, $data-turquoise-700);
+$data-sequential-yellow-1: light-dark($data-yellow-400, $data-yellow-200);
+$data-sequential-yellow-2: light-dark($data-yellow-500, $data-yellow-400);
+$data-sequential-yellow-3: light-dark($data-yellow-700, $data-yellow-500);
+$data-sequential-yellow-4: light-dark($data-yellow-900, $data-yellow-700);
+
+// ## Effects
+$effects-backdrop: light-dark(rgba(0, 0, 0, 0.3), color-mix(in srgb, $main-deep-blue-900 70%, transparent));
+$effects-focus: light-dark($main-brand-focus-light, $main-brand-focus);
+$effects-logo: light-dark($main-brand-petrol, $main-brand-white);
+// Per level: layer-1 shadow, layer-2 shadow
+$effects-shadow-1:
+ 0 0.5px 1px 0 light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 1)),
+ 0 -0.25px 1px 0 light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.8));
+$effects-shadow-2:
+ 0 1px 2px 0 light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.6)),
+ 0 -0.25px 2px 0 light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.2));
+$effects-shadow-3:
+ 0 2px 6px 0 light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.6)),
+ 0 -0.25px 2px 0 light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.2));
+$effects-shadow-4:
+ 0 4px 12px 0 light-dark(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.6)),
+ 0 -0.25px 2px 0 light-dark(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.2));
+
+// ## Text
+$text-accent: light-dark($main-interactive-blue-700, $main-brand-interactive-coral);
+$text-accent-hover: light-dark($main-brand-teal, $main-bold-green-400);
+$text-accent-active: light-dark($main-interactive-blue-800, $main-bold-green-500);
+$text-caution: light-dark($main-yellow-800, $main-yellow-300);
+$text-critical: light-dark($data-orchid-700, $data-orchid-200);
+$text-danger: light-dark($main-red-700, $main-red-300);
+$text-disabled: light-dark($main-deep-blue-400, $main-deep-blue-600);
+$text-information: light-dark($main-blue-700, $main-blue-200);
+$text-inverse: light-dark($main-brand-white, $main-deep-blue-900);
+$text-on-accent: light-dark($main-brand-white, $main-deep-blue-900);
+$text-on-accent-secondary: light-dark($main-interactive-blue-700, $main-brand-interactive-coral);
+$text-on-accent-secondary-hover: light-dark($main-brand-teal, $main-bold-green-400);
+$text-on-accent-secondary-active: light-dark($main-interactive-blue-800, $main-bold-green-500);
+$text-on-caution: $main-deep-blue-900;
+$text-on-critical: $main-brand-white;
+$text-on-danger: $main-brand-white;
+$text-on-danger-secondary: light-dark($main-red-600, $main-red-300);
+$text-on-information: $main-brand-white;
+$text-on-neutral: light-dark($main-deep-blue-900, $main-brand-white);
+$text-on-success: light-dark($main-brand-white, $main-deep-blue-900);
+$text-on-warning: light-dark($main-brand-white, $main-deep-blue-900);
+$text-on-warning-secondary: light-dark($main-orange-700, $main-orange-300);
+$text-primary: light-dark($main-deep-blue-900, $main-brand-white);
+$text-secondary: light-dark($main-deep-blue-650, $main-deep-blue-300);
+$text-success: light-dark($main-green-700, $main-green-300);
+$text-warning: light-dark($main-orange-700, $main-orange-300);
+
+// ## MxDock additions (not in the Siemens spec)
+$mxdock-logo: light-dark($main-interactive-blue-700, $main-brand-white);
diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
index bc975dc6417..90689c1da94 100644
--- a/assets/scss/_styles_project.scss
+++ b/assets/scss/_styles_project.scss
@@ -6,6 +6,10 @@
@import "badge";
@import "numbered-headings";
+body {
+ color: $primary; // Set base text color for body
+}
+
// _alert.scss - Style alert boxes (alert layout defined in alert.html)
.alert {
@@ -36,6 +40,65 @@
margin-right:12px;
}
+// Feedback Style for the feedback section defined in feedback.html
+.feedback--footer {
+ margin-top: 3rem;
+ padding: 2rem;
+ border-top-width: 0.15rem;
+ border-top-style: solid;
+ border-top-color: $info-7;
+ width: 100%;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+}
+
+.feedback-container {
+ margin-right: 2rem;
+}
+
+.feedback--answer {
+ display: inline-block;
+ background-color: $primary-light !important;
+ border-color: $primary-light !important;
+ border-radius: 0 !important;
+ color: $primary !important;
+}
+
+.feedback--answer:hover,
+.feedback--answer:focus,
+.feedback--answer:active {
+ background-color: darken($primary-light, 6%) !important;
+ border-color: darken($primary-light, 6%) !important;
+ border-radius: 0 !important;
+ color: #000028 !important;
+}
+
+.feedback--answer-no {
+ margin-left: 1em;
+}
+
+.feedback--response {
+ display: none;
+ margin-top: 1em;
+}
+
+.feedback--response__visible {
+ display: block;
+}
+
+.get-started-container {
+ width: fit-content;
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+}
+
+.get-started svg {
+ max-width: 100%;
+ max-height: 100%;
+}
+
// Anchor icon styling for anchor.js
.anchor-icon {
@@ -49,9 +112,13 @@
background: $gray-light;
}
-// _code.scss - Code formatting
+// Style Markdown content
.td-content {
+ order: 1;
+ margin-left: 2rem; // NK - custom edit
+ max-width: 90%; // NK - fixed width of all content to 90%
+
// Highlighted code.
.highlight {
@extend .card;
@@ -79,15 +146,7 @@
padding: .0rem;
}
}
-}
-
-// _content.scss - Style Markdown content
-
-.td-content {
- order: 1;
- margin-left: 2rem; // NK - custom edit
- max-width: 90%; // NK - fixed width of all content to 90%
-
+
p, li, td {
font-weight: $td-font-weight-body-text;
}
@@ -147,29 +206,33 @@ a:not(.btn):not(.td-sidebar-link):not(.card-text a):visited {
// Add icon after external links in main content (but exclude some content)
main a[href*="https://"]:not(.btn):not(.td-breadcrumbs a):not(.get-started):not(.lp-panel-list a)::after {
+ content: "";
display: inline-block;
width: 1rem;
height: 1rem;
margin-left: .2rem;
vertical-align: sub;
- content: url("/mx-icons/external.svg");
- filter: invert(14%) sepia(99%) saturate(4690%) hue-rotate(225deg) brightness(93%) contrast(95%); // Matches to $link-color (blue-8 from PDS). Keep updated with _variables_project.scss.
+ background-color: $info-7;
+ -webkit-mask: url("/mx-icons/external.svg") center / contain no-repeat;
+ mask: url("/mx-icons/external.svg") center / contain no-repeat;
}
// Add icon after external links in lp-panel-list - need to be a different colour
.lp-panel-list a[href*="https://"]:not(.btn):not(.td-breadcrumbs a):not(.get-started)::after {
+ content: "";
display: inline-block;
width: 1rem;
height: 1rem;
margin-left: .2rem;
vertical-align: sub;
- content: url("/mx-icons/external.svg");
- filter: invert(81%) sepia(55%) saturate(2783%) hue-rotate(181deg) brightness(103%) contrast(101%); // Matches to #8AC4FF specified in lp-panel-list in _front-page.scss. Keep updated with _variables_project.scss. Calculated using https://isotropic.co/tool/hex-color-to-css-filter/
+ background-color: $info-7;
+ -webkit-mask: url("/mx-icons/external.svg") center / contain no-repeat;
+ mask: url("/mx-icons/external.svg") center / contain no-repeat;
}
// Change external link icon color upon hover
main a[href*="https://"]:hover::after {
- filter: invert(15%) sepia(65%) saturate(5388%) hue-rotate(231deg) brightness(79%) contrast(121%); // Matches to $link-hover-color (blue-9 from PDS). Keep updated with _variables_project.scss.
+ background-color: $link-hover-color;
}
.btn {
@@ -218,6 +281,7 @@ html {
}
.td-main main {
+ background-color: $gray-300;
padding-top: 4rem; // DB - Moved out of breakpoint
@include media-breakpoint-up(md) {
border-left: 1px solid $gray-border; // NK - moved from toc, to fully span height of screen
@@ -405,7 +469,7 @@ img {
.td-sidebar-link {
display: block;
padding-bottom: 0.375rem;
-
+
// NK - overrides special styling for pages with no children
&__page {
color: inherit;//$gray-700;
diff --git a/assets/scss/_variables_project.scss b/assets/scss/_variables_project.scss
index c3967195b17..7efd7670443 100644
--- a/assets/scss/_variables_project.scss
+++ b/assets/scss/_variables_project.scss
@@ -1,4 +1,9 @@
// Page for defining variables (colors, values, etc.) to be referenced by other SCSS files
+@import "siemens-colors-primitives";
+@import "siemens-colors-semantic";
+
+// Component specific variables
+$company-approved: #E0FAE1; // NC - Company approved Marketplace label
$enable-gradients: true; // TODO: consider removing this duplicate variable from this custom file
$enable-shadows: true; //TODO: consider removing this duplicate variable from this custom file
@@ -9,76 +14,78 @@ $enable-shadows: true; //TODO: consider removing this duplicate variable from th
// Codes taken mostly from PDS (https://designsystem.mendix.com)
// See also filters in _styles_project.scss if any of these colours is changed
-$primary: #146FF4; // MX Blue (Blue-7 from PDS) YL - updated the Mendix Blue color to its latest version in MX 10
-$primary-light: #47A9FF; // DB - Blue-5 from PDS
-$secondary: #0A1324; // Gray-10 from PDS (MxDock color)
-$success: #0D990D; // DB - Green-8 from PDS
-$info: #146FF4; // MX Blue YL - updated the Mendix Blue color to its latest version in MX 10
-$warning: #C97800; // DB - Yellow-8 from PDS
-$danger: #D31E23; // DB - Red-7 PDS
-$white: #fff; // YL - Override the default color defined in _variables_forward.scss
-$light: #99D0FF; // DB - Blue-3 from PDS
-$dark: #0A1324; // Gray-10 from PDS (MxDock color)
-$blue: #146FF4; // YL - Mendix Blue in SP 10; Override the default color defined in _variables_forward.scss
-$company-approved: #E0FAE1; // NC - Company approved Marketplace label
-$gray-100: #f7f7f7;
-$gray-200: #f2f2f3;
-$gray-light: $gray-200;
-$gray-300: #e7e7e9; // YL - Override the default color defined in _variables_forward.scss
-$gray-400: #d9dbdd;
-$gray-500: #c1c3c8;
+$primary: $main-deep-blue-900;
+$primary-light: $main-brand-light-petrol;
+$secondary: $main-deep-blue-650;
+$success: $main-green-700;
+$info: $main-blue-500;
+$danger: $main-red-500;
+$warning: $main-orange-600;
+
+$white: $main-brand-white;
+$light: $main-brand-teal-90;
+$dark: $main-brand-teal;
+$blue: $main-brand-focus;
+
+
+$gray-100: $main-sand-100;
+$gray-200: $main-sand-200;
+$gray-300: $main-sand-300;
+$gray-400: $main-sand-400;
+$gray-500: $main-sand-500;
+$gray-600: $main-sand-600;
+$gray-700: $main-sand-700;
+$gray-800: $main-sand-800;
+$gray-900: $main-sand-900;
+
$gray-border: $gray-500;
-$gray-600: #9ea2a9; // YL - Override the default color defined in _variables_forward.scss
-$gray-700: #6b707b;
-$gray-800: #535965;
-$gray-900: #2f3646;
-$black: #000; // YL - Override the default color defined in _variables_forward.scss
-
-$info-1: #dceefe;
-$info-2: #c2e2ff;
-$info-3: #99d0ff;
-$info-4: #6ebdff;
-$info-5: #47a9ff;
-$info-6: #298efb;
-$info-7: #146ff4;
-$info-8: #064ae4;
-$info-9: #0123c6;
-$info-10: #0006ab;
-
-$success-1: #e1fae1;
-$success-2: #b8f3b8;
-$success-3: #92ee92;
-$success-4: #6ce66c;
-$success-5: #4fd84f;
-$success-6: #31c431;
-$success-7: #1db11d;
-$success-8: #0d990d;
-$success-9: #0a7d0a;
-$success-10: #076407;
-
-$warning-1: #fff2cf;
-$warning-2: #ffe9ac;
-$warning-3: #ffde84;
-$warning-4: #ffd45d;
-$warning-5: #fcc73a;
-$warning-6: #f1b00b;
-$warning-7: #e39600;
-$warning-8: #c97800;
-$warning-9: #a05700;
-$warning-10: #803600;
-
-$danger-1: #ffe5e9;
-$danger-2: #fec3c3;
-$danger-3: #fd9c9d;
-$danger-4: #fd7072;
-$danger-5: #fb4a4c;
-$danger-6: #eb2c30;
-$danger-7: #d31e23;
-$danger-8: #bc1622;
-$danger-9: #9e051b;
-$danger-10: #780328;
-
-$purple: #4701d4;
+$gray-light: $gray-200;
+
+
+$black: $main-brand-black;
+
+$info-1: $main-interactive-blue-100;
+$info-2: $main-interactive-blue-200;
+$info-3: $main-interactive-blue-300;
+$info-4: $main-interactive-blue-400;
+$info-5: $main-interactive-blue-500;
+$info-6: $main-interactive-blue-600;
+$info-7: $main-interactive-blue-700;
+$info-8: $main-interactive-blue-800;
+$info-9: $main-interactive-blue-900;
+$info-10: $data-deep-blue-700;
+
+$success-1: $main-green-100;
+$success-2: $main-green-200;
+$success-3: $main-green-300;
+$success-4: $main-green-400;
+$success-5: $main-green-500;
+$success-6: $main-green-600;
+$success-7: $main-green-700;
+$success-8: $main-green-800;
+$success-9: $main-green-900;
+
+$warning-1: $main-yellow-100;
+$warning-2: $main-yellow-200;
+$warning-3: $main-yellow-300;
+$warning-4: $main-yellow-400;
+$warning-5: $main-yellow-500;
+$warning-6: $main-yellow-600;
+$warning-7: $main-yellow-700;
+$warning-8: $main-yellow-800;
+$warning-9: $main-yellow-900;
+
+$danger-1: $main-red-100;
+$danger-2: $main-red-200;
+$danger-3: $main-red-300;
+$danger-4: $main-red-400;
+$danger-5: $main-red-500;
+$danger-6: $main-red-600;
+$danger-7: $main-red-700;
+$danger-8: $main-red-800;
+$danger-9: $main-red-900;
+
+$purple: $main-interactive-blue-800;
$custom-theme-colors: (
"info-1": $info-1,
@@ -100,7 +107,6 @@ $custom-theme-colors: (
"success-7": $success-7,
"success-8": $success-8,
"success-9": $success-9,
- "success-10": $success-10,
"warning-1": $warning-1,
"warning-2": $warning-2,
"warning-3": $warning-3,
@@ -110,7 +116,6 @@ $custom-theme-colors: (
"warning-7": $warning-7,
"warning-8": $warning-8,
"warning-9": $warning-9,
- "warning-10": $warning-10,
"danger-1": $danger-1,
"danger-2": $danger-2,
"danger-3": $danger-3,
@@ -120,23 +125,23 @@ $custom-theme-colors: (
"danger-7": $danger-7,
"danger-8": $danger-8,
"danger-9": $danger-9,
- "danger-10": $danger-10,
- "$purple": $purple,
+ "purple": $purple,
);
// UI element colors
-$border-color: $gray-200; // NK - changed to better align to Figma Docs mockup
-$td-sidebar-bg-color: $gray-light;//rgba($primary, 0.03) !default;
+$border-color: $main-interactive-blue-700;
+$td-sidebar-bg-color: $white;
// Background colors for the sections on home page etc. It is a paint by number system, starting at 0, where the number is taken from the shortcode's ordinal
// if not provided by the user.
// These colors are all part of the theme palette, but the mix is fairly random to create variation. This can be overridden by the project if needed.
$td-box-colors: $dark, $primary, $secondary, $info, $primary-light, $gray-600, $success, $warning, $dark, $danger, $primary, $secondary, !default;
-$link-color: $info-8;
-$link-hover-color: $info-9;
+
+$link-color: $main-interactive-blue-700;
+$link-hover-color: $main-brand-teal;
// Fonts
diff --git a/layouts/partials/feedback.html b/layouts/partials/feedback.html
index a98b1a38b92..6ff85a04bd0 100644
--- a/layouts/partials/feedback.html
+++ b/layouts/partials/feedback.html
@@ -1,43 +1,3 @@
-
-