@@ -80,12 +80,76 @@ Available values for `themeName` are
8080The compiled CSS for the full library and modules, e.g., core, layout, etc., are distributed
8181via [ NPM] ( https://www.npmjs.com/package/fundamental-styles ) .
8282
83+ #### Installation
84+
8385````
8486npm install fundamental-styles --save
8587````
8688
89+ Or with yarn:
90+
91+ ````
92+ yarn add fundamental-styles
93+ ````
94+
8795> NOTE: We only distribute compiled CSS for each component, not the full project or HTML for specific components.
8896
97+ #### Usage
98+
99+ After installation, you can import the styles into your project in several ways:
100+
101+ ** Option 1: Import in JavaScript/TypeScript**
102+
103+ If you're using a bundler like Webpack, Vite, or Rollup, you can import the CSS directly in your JavaScript/TypeScript files:
104+
105+ ``` javascript
106+ // Import all styles
107+ import ' fundamental-styles/dist/fundamental-styles.css' ;
108+ ```
109+
110+ ** Option 2: Import in SCSS/CSS files**
111+
112+ You can also import in your main stylesheet:
113+
114+ ``` scss
115+ /* Import all styles */
116+ @import ' fundamental-styles/dist/fundamental-styles.css' ;
117+ ```
118+
119+ ** Option 3: Import specific components**
120+
121+ To reduce bundle size, you can import only the components you need:
122+
123+ ``` javascript
124+ // Import specific component styles
125+ import ' fundamental-styles/dist/icon.css' ;
126+ import ' fundamental-styles/dist/button.css' ;
127+ import ' fundamental-styles/dist/input.css' ;
128+ ```
129+
130+ #### Theming with NPM
131+
132+ When using the NPM package, you'll also need to install the theming base content:
133+
134+ ``` bash
135+ npm install @sap-theming/theming-base-content --save
136+ ```
137+
138+ Then import the theme CSS files:
139+
140+ ``` javascript
141+ // Import theme base variables
142+ import ' @sap-theming/theming-base-content/content/Base/baseLib/sap_horizon/css_variables.css' ;
143+
144+ // Import fundamental-styles theme customizations
145+ import ' fundamental-styles/dist/theming/sap_horizon.css' ;
146+
147+ // Import fundamental-styles components
148+ import ' fundamental-styles/dist/fundamental-styles.css' ;
149+ ```
150+
151+ Available theme names: ` sap_horizon ` , ` 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 `
152+
89153
90154### Icons
91155
0 commit comments