# @featherk/styles

FeatherK shared style assets (CSS, fonts) for Kendo UI enhancements.

## Contents

- `css/` Pre-built vanilla CSS files
- `fonts/` Any webfont files referenced by the CSS/SCSS

## Kendo UI Compatibility

The v8.2.0 assets are a Telerik ThemeBuilder export built on **`@progress/kendo-theme-default` 8.2.0**, which targets **Kendo UI for Vue 6.4.1**.

- `dist/v8.2.0/css/featherk.css` is fully compiled and includes the Kendo theme. Do not also load `@progress/kendo-theme-default`.
- `dist/v8.2.0/scss/` imports `@progress/kendo-theme-default/dist/all`. If you compile the SCSS yourself, install `@progress/kendo-theme-default@~8.2.0` (declared as an optional peer dependency).

## Maintaining The Theme

Changes to v8.2.0 external styles and generated theme assets must follow the
[ThemeBuilder workflow](THEMEBUILDER.md). The v7.2.0 theme is legacy and closed
for routine changes.

## Installation

```bash
npm install @featherk/styles
```

## CSS Setup and Font Loading

### FeatherK Styles Integration

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";

// FeatherK custom styles with Inter font family
import "@featherk/styles/dist/v8.2.0/css/featherk.css";

createApp(App).mount("#app");
```

### 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:

```css
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Regular.woff2") format("woff2");
  /* Additional font variants: Light, Bold, Italic, Medium, etc. */
}
```

#### How Font Loading Works

1. **Package Structure**: The `@featherk/styles` package includes both CSS and font files:

   ```text
   node_modules/@featherk/styles/
   ├── dist/
   │   ├── v7.2.0/
   │   │   ├── css/
   │   │   │   ├── feather-ks.css
   │   │   │   └── feather-k override.css
   │   │   └── fonts/
   │   │       ├── Inter-Regular.woff2
   │   │       ├── Inter-Bold.woff2
   │   │       ├── Inter-Light.woff2
   │   │       └── [other Inter variants]
   │   ├── v8.2.0/
   │   │   ├── css/
   │   │   │   └── featherk.css
   │   │   ├── fonts/
   │   │   │   ├── Inter-Regular.woff2
   │   │   │   ├── Inter-Bold.woff2
   │   │   │   ├── Inter-Light.woff2
   │   │   │   └── [other Inter variants]
   │   │   ├── scss/
   │   │   │   ├── _externalStyles.scss
   │   │   │   ├── _fonts.scss
   │   │   │   ├── _kendo.scss
   │   │   │   ├── _tokens.scss
   │   │   │   ├── index.scss
   │   │   │   └── [other .scss files]
   ```

2. **Relative Path Resolution**: The CSS uses `../fonts/` paths that correctly resolve from `/dist/v8.2.0/css/` to `/dist/v8.2.0/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 styles.

---

## Changelog

Release history for all `@featherk/*` packages is maintained in a single [CHANGELOG.md](https://github.com/NantHealth/featherk/blob/integration/CHANGELOG.md).

## License

FeatherK-authored styles are licensed under MIT. The bundled Inter fonts retain
their SIL Open Font License 1.1; the package's MIT license does not replace it.

The complete Inter copyright and OFL notice is included in the published package
at `dist/licenses/Inter-OFL.txt`. See the
[Inter notice](https://github.com/NantHealth/featherk/blob/integration/packages/styles/licenses/Inter-OFL.txt)
and [upstream Inter license](https://github.com/rsms/inter/blob/master/LICENSE.txt).
Preserve this notice when redistributing the bundled fonts with an application.

This notice reproduces the current upstream Inter license. Verify the provenance
and any additional notices of the exact font releases supplied with the
ThemeBuilder exports before release; adding it does not audit font metadata or
establish redistribution rights for other third-party theme material.