diff --git a/themes/portal/_dark.scss b/themes/portal/_dark.scss index 508c87fa24f25d4ab0f5b4a59ea0b03b7b15d248..5dae68aa754f581869c2224036d6795715e52722 100644 --- a/themes/portal/_dark.scss +++ b/themes/portal/_dark.scss @@ -1,17 +1,17 @@ @use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *; html[data-mode='darkmode'] { - --primary-theme: #ffd92a; - --primary-theme-hs: 49.3, 100%; - --primary-color: hsl(var(--primary-theme-hs), 58.24%); - --primary-0: hsl(var(--primary-theme-hs), 88%); // #fffcee; - --primary-100: hsl(var(--primary-theme-hs), 82%); // #fff8db; // default button bg - --primary-200: hsl(var(--primary-theme-hs), 76%); // #fffd2a; // divider - --primary-250: hsl(var(--primary-theme-hs), 70%); // #f1f1c7; - --primary-300: hsl(var(--primary-theme-hs), 64%); // #ffeb2a; // outline, focus fields + // --primary-theme: var(--primary-theme); + // --primary-theme-hsl: 49.3, 100%; + --primary-color: hsl(var(--primary-theme-hsl), 58.24%); + --primary-0: hsl(var(--primary-theme-hsl), 88%); // #fffcee; + --primary-100: hsl(var(--primary-theme-hsl), 82%); // #fff8db; // default button bg + --primary-200: hsl(var(--primary-theme-hsl), 76%); // #fffd2a; // divider + --primary-250: hsl(var(--primary-theme-hsl), 70%); // #f1f1c7; + --primary-300: hsl(var(--primary-theme-hsl), 64%); // #ffeb2a; // outline, focus fields --primary-400: var(--primary-color); // button bg, heading, table titles, links, toggles - --primary-600: hsl(var(--primary-theme-hs), 52%); // #ffc72a; // on press - --primary-800: hsl(var(--primary-theme-hs), 46%); // #ffb62a; // hover + --primary-600: hsl(var(--primary-theme-hsl), 52%); // #ffc72a; // on press + --primary-800: hsl(var(--primary-theme-hsl), 46%); // #ffb62a; // hover --secondary-200: var(--primary-color); --secondary-color: var(--primary-color); --gray-800: var(--white); diff --git a/themes/portal/_layout-base.scss b/themes/portal/_layout-base.scss index 10bc4344be66112993cc62a1fd6197e633a343fa..1a6029bf8cdde19848f70bf76a6916d91b15b7af 100644 --- a/themes/portal/_layout-base.scss +++ b/themes/portal/_layout-base.scss @@ -41,7 +41,7 @@ html[data-theme='default'] { --sbt-class-bar-label-text: var(--gray-800); --sb-filter-bar-bg: var(--white); --sb-container-bg: var(--white); - --sidebar-profil-header-bg: var(--primary-100); + --sidebar-profil-header-bg: var(--sbt-body-bg); --sb-linkmenu-bg: var(--white); --sb-linkmenu-text: var(--primary-400); --sb-linkmenu-active-text: var(--primary-400); diff --git a/themes/portal/_layout-joy.scss b/themes/portal/_layout-joy.scss index ddfaa23ae868851d4619ae1a2875506a05233e2f..795fd4159c7049929fb11fa60df452163a851989 100644 --- a/themes/portal/_layout-joy.scss +++ b/themes/portal/_layout-joy.scss @@ -2,6 +2,13 @@ html[layout='joy'] { --primary-theme: #FFD954; + --primary-theme-hsl: 47, 100%; + --primary-theme-rgb: rgb(255, 217, 84); + --primary-theme-contrast: #000; + --primary-theme-contrast-rgb: rgb(0, 0, 0); + --primary-theme-shade: hsl(var(--primary-theme-hsl), 60%); + --primary-theme-tint: hsl(var(--primary-theme-hsl), 40%); + --primary-hs: 206, 100%; --primary-color: #024f9d; --primary-200: #AFCCE1; diff --git a/themes/portal/_theme-mono1.scss b/themes/portal/_theme-mono1.scss new file mode 100644 index 0000000000000000000000000000000000000000..0feede4f1015fe1d537710402aba1f0109d7a628 --- /dev/null +++ b/themes/portal/_theme-mono1.scss @@ -0,0 +1,76 @@ +@use "~@project-sunbird/sb-styles/assets/mixins/mixins" as *; + +// adjust-hue +// transparentize (color, 0) +// darken () +// lighten () +// saturate (), desaturate +// red() green() blue() +// hue // saturation +// lightness +// alpha + +$primary-theme: #343A40; +$primary-theme-hsl: hue($primary-theme), saturation($primary-theme); +$primary-theme-rgb: red($primary-theme), green($primary-theme), blue($primary-theme); +$primary-theme-shade: darken(adjust-hue($primary-theme, -5), 10%); +$primary-theme-tint: lighten(adjust-hue($primary-theme, 10), 20%); +$primary-theme-contrast: #ffffff; +$primary-theme-contrast-rgb: red($primary-theme-contrast), green($primary-theme-contrast), blue($primary-theme-contrast); + +$primary-color: #6C757D; +$primary-hsl: hue($primary-color), saturation($primary-color); +$primary-color-rgb: red($primary-color), green($primary-color), blue($primary-color); +$primary-color-shade: darken(adjust-hue($primary-color, -5), 10%); +$primary-color-tint: lighten(adjust-hue($primary-color, 5), 10%); +$primary-color-contrast: #000000; +$primary-color-contrast-rgb: red($primary-color-contrast), green($primary-color-contrast), blue($primary-color-contrast); +$primary-0: lighten(adjust-hue($primary-color, 25), 45%); +$primary-100: lighten(adjust-hue($primary-color, 20), 40%); +$primary-200: lighten(adjust-hue($primary-color, 15), 30%); +$primary-250: lighten(adjust-hue($primary-color, 10), 20%); +$primary-300: lighten(adjust-hue($primary-color, 5), 10%); +$primary-400: $primary-color; +$primary-600: darken(adjust-hue($primary-color, -5), 10%); +$primary-800: darken(adjust-hue($primary-color, -10), 20%); + + +html[data-color='mono1'] { + --primary-theme: #{$primary-theme}; + --primary-theme-hsl: #{$primary-theme-hsl}; + --primary-theme-rgb: #{$primary-theme-rgb}; + --primary-theme-contrast: #{$primary-theme-contrast}; + --primary-theme-contrast-rgb: #{$primary-theme-contrast-rgb}; + --primary-theme-shade: #{$primary-theme-shade}; + --primary-theme-tint: #{$primary-theme-tint}; + + --primary-color: #{$primary-color}; + --primary-hsl: #{$primary-hsl}; + --primary-color-rgb: #{$primary-color-rgb}; + --primary-color-contrast: #{$primary-color-contrast}; + --primary-color-contrast-rgb: #{$primary-color-contrast-rgb}; + --primary-color-shade: #{$primary-color-shade}; + --primary-color-tint: #{$primary-color-tint}; + --primary-0: #{$primary-0}; + --primary-100: #{$primary-100}; + --primary-200: #{$primary-200}; + --primary-250: #{$primary-250}; + --primary-300: #{$primary-300}; + --primary-400: #{$primary-400}; + --primary-600: #{$primary-600}; + --primary-800: #{$primary-800}; + + --secondary-color: var(--primary-600); + --sbt-body-bg: var(--primary-0); //DEE2E6 + --sbt-body-bg2: var(--primary-100); //CED4DA + --sbt-primary-bg: var(--primary-theme); + --sbt-compt-bg: var(--sbt-body-bg); + --sb-linkmenu-bg-hover: var(--primary-color); + --sb-footer-bg: var(--primary-theme); + --sbfaq-compt-bg:var(--sbt-body-bg); + + .sb-bg-white { + --white:var(--sbt-body-bg2); + } + +} \ No newline at end of file diff --git a/themes/themes-portal.scss b/themes/themes-portal.scss index 0de8f1fc04f628e84c36844f58134d67fcc284d5..ff82cb1c748f8eb9c4cf04740a0605e3f2be7c74 100644 --- a/themes/themes-portal.scss +++ b/themes/themes-portal.scss @@ -3,5 +3,6 @@ @use './portal/layout-joy' as *; @use './portal/theme-yellow' as *; @use './portal/theme-purple' as *; +@use './portal/theme-mono1' as *; @use './portal/dark' as *; @use './portal/accessibility' as *; \ No newline at end of file