@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

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

MIT