@featherk/styles 0.1.9 → 0.2.1

package/README.md

@@ -26,7 +26,7 @@ import './style.css'
 import App from './App.vue'
 
 // FeatherK custom styles with Inter font family
-import "@featherk/styles/dist/css/featherk-q3-2024-v1.css"
+import "@featherk/styles/dist/v1/css/featherk-q3-2024-v1.css"
 
 createApp(App).mount('#app')
 ```
@@ -50,16 +50,26 @@ The FeatherK styles include the Inter font family with automatic font loading. T
    ```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]
+   │   ├── v0/
+   │   │   ├── css/
+   │   │   │   ├── feather-ks.css
+   │   │   │   └── feather-k override.css
+   │   │   └── fonts/
+   │   │       ├── Inter-Regular.woff2
+   │   │       ├── Inter-Bold.woff2
+   │   │       ├── Inter-Light.woff2
+   │   │       └── [other Inter variants]
+   │   ├── v1/
+   │   │   ├── 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/`
+2. **Relative Path Resolution**: The CSS uses `../fonts/` paths that correctly resolve from `/dist/v1/css/` to `/dist/v1/fonts/`
 
 3. **Vite Processing**:
    - **Development**: Vite serves fonts directly from `node_modules` with correct path resolution

package/dist/v1/external-styles/featherk-map-evitiAdvisor.css

@@ -0,0 +1,70 @@
+:root {
+     /* ——— Border radii ——— */
+     --border-radius-sm: var(--kendo-border-radius-md);
+     --border-radius-md: var(--kendo-border-radius-xl);
+     --border-radius-lg: var(--kendo-border-radius-xxxl);
+
+     /* ——— Box shadows / elevation ——— */
+     --box-shadow-sm: var(--kendo-elevation-2);
+     /* --feather-elevation-02dp: 
+     box-shadow(0px 3px -2px 1px rgba(10,11,28,0.2)), 
+     box-shadow(0px 2px 0px 2px rgba(10,11,28,0.14)), 
+     box-shadow(0px 1px 0px 5px rgba(10,11,28,0.12)); */
+     --box-shadow-md: var(--kendo-elevation-3);
+     --box-shadow-lg: var(--kendo-elevation-4);
+
+     /* ——— Font sizes ——— */
+     /* sm≈0.8rem, md=1rem, lg=1.25rem, xl=1.5rem */
+     --font-size-sm: var(--kendo-font-size-md);
+     /* --feather-font-size-md: 0.875rem */
+     --font-size-md: var(--kendo-font-size-lg);
+     /* --feather-font-size-lg: 1rem */
+     --font-size-lg: var(--kendo-font-size-xl);
+     /* --feather-font-size-xl: 1.25rem */
+     --font-size-xl: 1.5rem;
+     /* --feather-font-size-xxl: 1.5rem - no direct match from named Kendo vars */
+
+     /* ——— Font weights ——— */
+     --font-weight-normal: var(--kendo-font-weight-normal);
+     /* 500 - same value as feather variable, no need to alias */
+     --font-weight-bold: var(--kendo-font-weight-bold);
+     /* 700 - same value as feather variable, no need to alias */
+
+     /* ——— Colors ——— */
+     --color-white: var(--kendo-color-app-surface);
+     /* --feather-surface: #FFFFFF; */
+     --color-primary: var(--kendo-color-primary);
+     /* --feather-primary: #195bb5; */
+     --color-light-primary: var(--kendo-color-primary-emphasis);
+     /* --feather-primary-variant: #003585; */
+     --color-light-gray: var(--kendo-color-light);
+     /* --feather-shade-1; */
+     --color-medium-gray: var(--kendo-color-light-emphasis);
+     /* --feather-shade-2; */
+     --color-dark-gray: var(--kendo-color-dark-emphasis);
+     /* --feather-shade-3 */
+     --color-darker-gray: var(--kendo-color-dark);
+     /* --feather-shade-4 */
+
+     /* ——— Spacing (margins & padding) ——— */
+     --spacing-xs: var(--kendo-spacing-1);
+     /* --feather-spacing-min: 0.25rem; */
+     --spacing-sm: var(--kendo-spacing-2);
+     /* --feather-spacing-xs: 0.5rem;  */
+     --spacing-md: var(--kendo-spacing-4);
+     /* --feather-spacing-md: 1rem:    */
+     --spacing-lg: var(--kendo-spacing-6);
+     /* --feather-spacing-lg: 1.5rem  */
+     --spacing-xl: var(--kendo-spacing-8);
+     /* --feather-spacing-xl: 2rem    */
+     --spacing-2xl: var(--kendo-spacing-12);
+     /* --feather-spacing-max: 3rem    */
+
+     /* ——— Breakpoints (not provided by Themebuilder) ——— */
+     --breakpoint-sm: 320px;
+     /* --feather-bp-min: 320px */
+     --breakpoint-md: 600px;
+     /* --feather-bp-tablet: 600px; */
+     --breakpoint-lg: 1440px;
+     /* --feather-bp-desktop: 1440px; */
+}

package/dist/v1/external-styles/featherk-overrides--k-grid.css

@@ -0,0 +1,37 @@
+/* NOTES:
+This override forces the Kendo UI grid to replace the "overflow" icon with a "filter" icon to properly communicate the filtered or unfiltered state when active. The icon is "built in" to the content as SVG code, so it doesn't depend on external assets. The icon is animated based on the user interaction with the Kendo UI grid header.
+*/
+
+.k-grid .k-header .k-grid-header-menu.k-grid-column-menu {
+  background-color: transparent;
+  color: transparent;
+}
+
+.k-grid .k-header .k-grid-header-menu.k-grid-column-menu:hover {
+  background-color: #e9ecf7;
+  color: transparent;
+}
+
+/* .fk-grid overrides */
+.fk-grid .k-table-th.active .k-link::after {
+  content: url('data:image/svg+xml;utf8,<svg id="b" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><g id="c" data-name="Icons"><g><path d="M18.25,3.99l-5.58,6.39v6.29c0,.55-.45,1-1,1h-3.34c-.55,0-1-.45-1-1v-6.29L1.75,3.99c-.26-.29-.32-.71-.16-1.07.16-.36.52-.59.91-.59h15c.39,0,.75.23.91.59.16.36.1.78-.16,1.07Z" fill="rgb(0, 53 ,131)"/><rect width="20" height="20" fill="none"/></g></g></svg>');
+  position: sticky;
+  transform: translate(-0.875rem, 0.125rem);
+  scale: 0.625;
+}
+.fk-grid .k-table-th:not(.k-sorted) .k-cell-inner .k-link::after {
+  transform: translate(0, 0.125rem);
+}
+.fk-grid .k-table-th .k-link {
+  pointer-events: none;
+}
+.fk-grid .k-grid-header-menu.k-grid-column-menu {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 100%;
+  opacity: 0;
+  pointer-events: none;
+  z-index: -1;
+  overflow: hidden;
+}

package/dist/v1/external-styles/featherk-overrides--k-slider.css

@@ -0,0 +1,22 @@
+/* This rule eliminates the visual ticks by removing the background image parameter from the ticks. This preserves the numbers, while removing the veritcal geometry. */
+
+.k-slider .k-tick {
+     background-image: none;
+}
+
+/* Kendo only provides access to styling for the second drag handle for a two-handle slider. This rule replicates the CSS styling across both drag handles when hovered and focused. This fragment also provides the necessary transition attributes to ensure smooth, matching transitions across all drag handles. */
+
+.k-slider .k-draghandle {
+     transition: border-style 280ms ease-out, box-shadow 280ms ease-out;
+}
+
+.k-slider .k-draghandle.k-draghandle-end:hover,
+.k-slider .k-draghandle.k-draghandle-start:hover {
+     border-style: none;
+     box-shadow: 0px 0px 0px 2px var(--kendo-color-primary);
+}
+
+.k-slider .k-draghandle.k-draghandle-end:focus,
+.k-slider .k-draghandle.k-draghandle-start:focus {
+     box-shadow: 0 0px 0px 2px var(--kendo-color-on-primary), 0px 0px 0px 5px var(--kendo-color-primary)
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@featherk/styles",
-  "version": "0.1.9",
+  "version": "0.2.1",
   "type": "module",
   "files": [
     "dist"