@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. The v7.2.0 theme is legacy and closed for routine changes.

Installation

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:

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

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

   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.

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 and upstream Inter license. 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.