feat(styles): add theming sets (#5805)

* feat(styles): add theming sets

* fix(styles): update import [ci visual]

.stylelintrc.json

@@ -7,6 +7,7 @@
     "property-no-unknown": null,
     "custom-property-pattern": null,
     "import-notation": "string",
+    "no-invalid-position-at-import-rule": null,
     "selector-id-pattern": null,
     "selector-class-pattern": null,
     "function-no-unknown": null,

README.md

@@ -67,10 +67,12 @@ Available values for `themeName` are
 `sap_horizon_dark`,
 `sap_horizon_hcb`,
 `sap_horizon_hcw`,
+`sap_horizon_set`,
 `sap_fiori_3`,
 `sap_fiori_3_dark`,
 `sap_fiori_3_hcb`,
 `sap_fiori_3_hcw`,
+`sap_fiori_3_set`,
 `sap_fiori_3_light_dark`
 
 ### NPM Package

packages/styles/README.md

@@ -70,10 +70,12 @@ Available values for `themeName` are
 `sap_horizon_dark`,
 `sap_horizon_hcb`,
 `sap_horizon_hcw`,
+`sap_horizon_set`,
 `sap_fiori_3`,
 `sap_fiori_3_dark`,
 `sap_fiori_3_hcb`,
 `sap_fiori_3_hcw`,
+`sap_fiori_3_set`,
 `sap_fiori_3_light_dark`
 
 ### NPM Package

packages/styles/package-config.ts

@@ -5,6 +5,8 @@ import {PackageConfigInterface} from "fundamental-styles/storybook";
 // @ts-ignore
 import sap_horizon from './theming/sap_horizon.scss?inline';
 // @ts-ignore
+import sap_horizon_set from './theming/sap_horizon_set.scss?inline';
+// @ts-ignore
 import sap_horizon_dark from './theming/sap_horizon_dark.scss?inline';
 // @ts-ignore
 import sap_horizon_hcb from './theming/sap_horizon_hcb.scss?inline';
@@ -13,6 +15,8 @@ import sap_horizon_hcw from './theming/sap_horizon_hcw.scss?inline';
 // @ts-ignore
 import sap_fiori_3 from './theming/sap_fiori_3.scss?inline';
 // @ts-ignore
+import sap_fiori_3_set from './theming/sap_fiori_3_set.scss?inline';
+// @ts-ignore
 import sap_belize from './theming/sap_belize.scss?inline';
 // @ts-ignore
 import sap_belize_hcb from './theming/sap_belize_hcb.scss?inline';
@@ -33,10 +37,12 @@ import {projects} from '../../projects';
 
 const themesVariables = {
     sap_horizon,
+    sap_horizon_set,
     sap_horizon_dark,
     sap_horizon_hcb,
     sap_horizon_hcw,
     sap_fiori_3,
+    sap_fiori_3_set,
     sap_fiori_3_dark,
     sap_fiori_3_light_dark,
     sap_fiori_3_hcw,

packages/styles/src/theming/sap_fiori_3_set.scss

@@ -0,0 +1,17 @@
+@use "sass:map";
+
+@container style(--sapSapThemeId: sap_fiori_3) {
+  @import './sap_fiori_3';
+}
+
+@container style(--sapSapThemeId: sap_fiori_3_dark) {
+  @import './sap_fiori_3_dark';
+}
+
+@container style(--sapSapThemeId: sap_fiori_3_hcb) {
+  @import './sap_fiori_3_hcb';
+}
+
+@container style(--sapSapThemeId: sap_fiori_3_hcw) {
+  @import './sap_fiori_3_hcw';
+}

packages/styles/src/theming/sap_horizon_set.scss

@@ -0,0 +1,17 @@
+@use "sass:map";
+
+@container style(--sapSapThemeId: sap_horizon) {
+    @import 'sap_horizon';
+}
+
+@container style(--sapSapThemeId: sap_horizon_dark) {
+    @import 'sap_horizon_dark';
+}
+
+@container style(--sapSapThemeId: sap_horizon_hcb) {
+    @import 'sap_horizon_hcb';
+}
+
+@container style(--sapSapThemeId: sap_horizon_hcw) {
+    @import 'sap_horizon_hcw';
+}

packages/styles/theming/sap_fiori_3_set.scss

@@ -0,0 +1,7 @@
+@use "sass:map";
+
+@import '@sap-theming/theming-base-content/content/Base/baseLib/sap_fiori_3_set/css_variables.css';
+@import '../src/theming/sap_fiori_3.scss' only screen and (prefers-color-scheme: light) and (prefers-contrast: no-preference), screen and (prefers-color-scheme: light) and (prefers-contrast: less);
+@import '../src/theming/sap_fiori_3_dark.scss' only screen and (prefers-color-scheme: dark) and (prefers-contrast: no-preference), screen and (prefers-color-scheme: dark) and (prefers-contrast: less);
+@import '../src/theming/sap_fiori_3_hcb.scss' only screen and (prefers-color-scheme: dark) and (prefers-contrast: custom), screen and (prefers-color-scheme: dark) and (prefers-contrast: more);
+@import '../src/theming/sap_fiori_3_hcw.scss' only screen and (prefers-color-scheme: light) and (prefers-contrast: custom), screen and (prefers-color-scheme: light) and (prefers-contrast: more);

packages/styles/theming/sap_horizon_set.scss

@@ -0,0 +1,7 @@
+@use "sass:map";
+
+@import '@sap-theming/theming-base-content/content/Base/baseLib/sap_horizon_set/css_variables.css';
+@import '../src/theming/sap_horizon.scss' only screen and (prefers-color-scheme: light) and (prefers-contrast: no-preference), screen and (prefers-color-scheme: light) and (prefers-contrast: less);
+@import '../src/theming/sap_horizon_dark.scss' only screen and (prefers-color-scheme: dark) and (prefers-contrast: no-preference), screen and (prefers-color-scheme: dark) and (prefers-contrast: less);
+@import '../src/theming/sap_horizon_hcb.scss' only screen and (prefers-color-scheme: dark) and (prefers-contrast: custom), screen and (prefers-color-scheme: dark) and (prefers-contrast: more);
+@import '../src/theming/sap_horizon_hcw.scss' only screen and (prefers-color-scheme: light) and (prefers-contrast: custom), screen and (prefers-color-scheme: light) and (prefers-contrast: more);

projects.js

@@ -41,6 +41,10 @@ const stylesThemes = {
             value: 'sap_horizon_hcw',
             title: 'Horizon High Contrast White'
         },
+        {
+            value: 'sap_horizon_set',
+            title: 'Horizon Set'
+        },
         {
             value: 'sap_fiori_3',
             title: 'Quartz Light'
@@ -61,6 +65,10 @@ const stylesThemes = {
             value: 'sap_fiori_3_hcb',
             title: 'Quartz High Contrast Black'
         },
+        {
+            value: 'sap_fiori_3_set',
+            title: 'Quartz Set'
+        },
         {
             value: 'sap_belize',
             title: 'Belize(Preview)'