@featherk/styles 0.1.4 → 0.1.6

package/README.md

@@ -5,8 +5,6 @@ FeatherK shared style assets (CSS, SCSS, fonts) for Kendo UI enhancements.
 ## Contents
 
 - `css/` Pre-built vanilla CSS files
-- `scss/` Source SCSS you can customize & compile
-- `external-Styles/` Placeholder for 3rd-party or vendor styles you want distributed
 - `fonts/` Any webfont files referenced by the CSS/SCSS
 
 ## Installation
@@ -15,29 +13,73 @@ FeatherK shared style assets (CSS, SCSS, fonts) for Kendo UI enhancements.
 npm install @featherk/styles
 ```
 
-## Usage
+## CSS Setup and Font Loading
 
-Import individual CSS files:
+### FeatherK Styles Integration
 
-```ts
-import '@featherk/styles/css/base.css';
+Use the `@featherk/styles` package to provide consistent styling and typography. The styles are imported in the main application entry point:
+
+```typescript
+// src/main.ts
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+
+// Kendo UI theme (required for component functionality)
+import "@progress/kendo-theme-default/dist/all.css"
+
+// FeatherK custom styles with Inter font family
+import "@featherk/styles/dist/css/featherk-q3-2024-v1.css"
+
+createApp(App).mount('#app')
 ```
 
-Or import SCSS (if your bundler handles SCSS):
+### Font Resolution
+
+The FeatherK styles include the Inter font family with automatic font loading. The CSS file contains font-face declarations that use relative paths:
 
-```scss
-@use '@featherk/styles/scss/variables';
+```css
+@font-face {
+  font-family: 'Inter';
+  src: url("../fonts/Inter-Regular.woff2") format("woff2");
+  /* Additional font variants: Light, Bold, Italic, Medium, etc. */
+}
 ```
 
-Fonts will be resolved relative to the package after build. Ensure your bundler copies font files from `node_modules/@featherk/styles/dist/fonts` if not automatically served.
+#### How Font Loading Works
+
+1. **Package Structure**: The `@featherk/styles` package includes both CSS and font files:
+
+   ```text
+   node_modules/@featherk/styles/
+   ├── dist/
+   │   ├── css/
+   │   │   └── featherk-q3-2024-v1.css
+   │   └── fonts/
+   │       ├── Inter-Regular.woff2
+   │       ├── Inter-Bold.woff2
+   │       ├── Inter-Light.woff2
+   │       └── [other Inter variants]
+   ```
+
+2. **Relative Path Resolution**: The CSS uses `../fonts/` paths that correctly resolve from `/dist/css/` to `/dist/fonts/`
+
+3. **Vite Processing**:
+   - **Development**: Vite serves fonts directly from `node_modules` with correct path resolution
+   - **Production**: Vite copies font assets to the build output and updates CSS URLs automatically
+
+4. **Browser Loading**: Fonts load seamlessly without additional configuration - the Inter font family is applied throughout the application according to the FeatherK design system.
+
+### Import Order
 
-## Customizing
+The CSS import order is important for proper styling:
 
-Copy the SCSS files into your project, modify variables, and compile. Or extend them using SCSS `@use` or `@forward`.
+1. **Kendo Theme** (`@progress/kendo-theme-default`) - Provides base component styling
+2. **FeatherK Styles** (`@featherk/styles`) - Applies custom design system and typography
 
-## Publishing Notes
+This ensures that FeatherK customizations properly override Kendo defaults while maintaining component functionality.
 
-The build step copies all asset directories into `dist/` and compiles any root-level SCSS files into CSS.
+---
 
 ## License