@featherk/styles 0.4.9 → 0.4.10

package/dist/v8.2.0/external-styles/featherk-overrides--k-tooltip.css

@@ -1,6 +1,6 @@
 /* Tooltip is created in the DOM as too often used .k-animation-container */
 .k-animation-container:has(.k-tooltip) {
-  white-space: normal;
+  white-space: overflow-wrap;
   background-color: var(--kendo-color-primary-hover);
   border-radius: 0.25rem;
   max-width: 50ch;

package/dist/v8.2.0/scss/_externalStyles.scss

@@ -6,4 +6,6 @@
   
       @use "../external-styles/featherk-overrides--k-loader.css";
   
-      @use "../external-styles/featherk-overrides--k-popup-alert.css";
+      @use "../external-styles/featherk-overrides--k-popup-alert.css";
+  
+      @use "../external-styles/featherk-overrides--k-tooltip.css";

package/dist/v8.2.0/scss/_overrides.scss

@@ -89,10 +89,6 @@
             border-top-right-radius: $feather-kendo-border-radius-md;
             overflow: hidden;
         
-}
-    .k-menu-button.k-button{
-    text-transform: uppercase;
-        
 }
     .k-chip.k-chip-solid-base{
     color: $feather-feather-secondary-text-on-surface;
@@ -205,7 +201,7 @@
 }
     .k-button.k-hover.k-button-outline.k-button-outline-primary,.k-button.k-state-hover.k-button-outline.k-button-outline-primary,.k-button.k-state-hovered.k-button-outline.k-button-outline-primary,.k-button:hover.k-button-outline.k-button-outline-primary{
     color: k-color( primary );
-            background-color: k-color( app-surface );
+            background-color: initial;
             background-image: $feather-feather-hover-on-surface-gradient;
         
 }
@@ -215,7 +211,7 @@
 }
     .k-button.k-active.k-button-outline.k-button-outline-primary,.k-button.k-state-active.k-button-outline.k-button-outline-primary,.k-button:active.k-button-outline.k-button-outline-primary{
     color: k-color( primary );
-            background-color: k-color( app-surface );
+            background-color: initial;
             background-image: $feather-feather-active-on-surface-gradient;
         
 }
@@ -235,7 +231,7 @@
       
 }
     .k-button.k-focus.k-button-flat.k-button-flat-primary,.k-button.k-state-focus.k-button-flat.k-button-flat-primary,.k-button.k-state-focused.k-button-flat.k-button-flat-primary,.k-button:focus.k-button-flat.k-button-flat-primary{
-                    @extend %feather-effects-feather-focus-outer-on-color-important;
+                    @extend %feather-effects-feather-focus-outer-on-surface-important;
       
 }
     .k-button.k-button-flat.k-button-flat-primary{
@@ -264,7 +260,7 @@
         
 }
     .k-button.k-focus.k-button-outline.k-button-outline-primary,.k-button.k-state-focus.k-button-outline.k-button-outline-primary,.k-button.k-state-focused.k-button-outline.k-button-outline-primary,.k-button:focus.k-button-outline.k-button-outline-primary{
-                    @extend %feather-effects-feather-focus-outer-on-color;
+                    @extend %feather-effects-feather-focus-outer-on-surface;
       
 }
     .k-multiselect.k-input .k-input-values .k-chip-list.k-chip-list-md .k-chip{
@@ -3658,7 +3654,7 @@
             border-right-style: solid;
             border-top-style: solid;
             background-color: rgba(0, 0, 0, 0);
-            background-image: linear-gradient(#FFFFFF, #FFFFFF);
+            background-image: none;
             transition-property: all;
             transition-duration: 280ms;
             transition-timing-function: ease-out;
@@ -3967,7 +3963,8 @@
         
 }
     .k-card .k-card-header .k-card-title{
-    color: $feather-feather-primary-text-on-surface;
+                    @extend %feather-typography-feather-heading-3;
+          color: $feather-feather-secondary-text-on-surface;
         
 }
     .k-breadcrumb .k-breadcrumb-container .k-breadcrumb-item .k-breadcrumb-link.k-hover,.k-breadcrumb .k-breadcrumb-container .k-breadcrumb-item .k-breadcrumb-link.k-state-hover,.k-breadcrumb .k-breadcrumb-container .k-breadcrumb-item .k-breadcrumb-link.k-state-hovered,.k-breadcrumb .k-breadcrumb-container .k-breadcrumb-item .k-breadcrumb-link:hover{
@@ -4135,10 +4132,10 @@
         
 }
     .k-button.k-button-outline.k-button-outline-primary.k-icon-button{
-    border-bottom-left-radius: $feather-feather-border-radius;
-            border-bottom-right-radius: $feather-feather-border-radius;
-            border-top-left-radius: $feather-feather-border-radius;
-            border-top-right-radius: $feather-feather-border-radius;
+    border-bottom-left-radius: $feather-feather-border-radius-full;
+            border-bottom-right-radius: $feather-feather-border-radius-full;
+            border-top-left-radius: $feather-feather-border-radius-full;
+            border-top-right-radius: $feather-feather-border-radius-full;
         
 }
     .k-button.k-button-solid-primary .k-button-icon.k-icon.k-svg-icon >svg{
@@ -4161,6 +4158,7 @@
     .k-button.k-icon-button{
     aspect-ratio: 1/1;
             width: $feather-feather-container-height-md;
+            overflow: hidden;
         
 }
     .k-button.k-icon-button.k-button-md{
@@ -4169,13 +4167,6 @@
             padding-right: 0px;
             padding-top: 0px;
         
-}
-    .k-button.k-button-solid-base.k-icon-button.k-rounded-md{
-    border-bottom-left-radius: $feather-feather-border-radius-full;
-            border-bottom-right-radius: $feather-feather-border-radius-full;
-            border-top-left-radius: $feather-feather-border-radius-full;
-            border-top-right-radius: $feather-feather-border-radius-full;
-        
 }
     .k-button.k-icon-button .k-button-icon.k-icon.k-svg-icon >svg{
     width: $feather-kendo-icon-size;
@@ -4259,13 +4250,6 @@
     .k-button-group .k-button.k-selected{
     box-shadow: inset 1px 0px 0px 0px $feather-feather-disabled-text-on-color,inset -1px 0px 0px 0px $feather-feather-disabled-text-on-color;
         
-}
-    .k-button.k-button-solid-base.k-icon-button.k-rounded-md{
-    border-bottom-left-radius: $feather-feather-border-radius-full;
-            border-bottom-right-radius: $feather-feather-border-radius-full;
-            border-top-left-radius: $feather-feather-border-radius-full;
-            border-top-right-radius: $feather-feather-border-radius-full;
-        
 }
     .k-button-group .k-button.k-active.k-icon-button,.k-button-group .k-button.k-state-active.k-icon-button,.k-button-group .k-button:active.k-icon-button{
     border-bottom-left-radius: inherit;
@@ -4591,6 +4575,14 @@
     transition-property: all;
             transition-duration: 280ms;
             transition-timing-function: ease-out;
+            border-bottom-style: none;
+            border-left-style: none;
+            border-right-style: none;
+            border-top-style: none;
+            border-bottom-left-radius: $feather-feather-border-radius-s;
+            border-bottom-right-radius: $feather-feather-border-radius-s;
+            border-top-left-radius: $feather-feather-border-radius-s;
+            border-top-right-radius: $feather-feather-border-radius-s;
         
 }
     .k-expander.k-expanded .k-expander-content-wrapper{
@@ -4602,4 +4594,71 @@
     .k-grid.k-grid-md .k-grid-header .k-grid-header-wrap{
     visibility: visible;
         
+}
+    .k-expander .k-expander-header .k-expander-title{
+    text-transform: none;
+            font-weight: 600;
+        
+}
+    .k-expander .k-expander-header.k-hover,.k-expander .k-expander-header.k-state-hover,.k-expander .k-expander-header.k-state-hovered,.k-expander .k-expander-header:hover{
+    background-color: initial;
+            background-image: $feather-feather-hover-on-surface-gradient;
+        
+}
+    .k-expander.k-focus,.k-expander.k-state-focus,.k-expander.k-state-focused,.k-expander:focus{
+                    @extend %feather-effects-feather-focus-outer-on-surface;
+          outline-style: none;
+            z-index: 999;
+        
+}
+    .k-expander.k-disabled .k-expander-header .k-expander-title,.k-expander.k-state-disabled .k-expander-header .k-expander-title,.k-expander:disabled .k-expander-header .k-expander-title{
+    color: $feather-feather-disabled-text-on-surface;
+        
+}
+    .k-expander.k-disabled .k-expander-header .k-expander-sub-title,.k-expander.k-state-disabled .k-expander-header .k-expander-sub-title,.k-expander:disabled .k-expander-header .k-expander-sub-title{
+    color: $feather-feather-disabled-text-on-surface;
+        
+}
+    .k-expander.k-disabled .k-expander-header .k-expander-indicator .k-icon.k-svg-icon.k-svg-i-chevron-down >svg,.k-expander.k-state-disabled .k-expander-header .k-expander-indicator .k-icon.k-svg-icon.k-svg-i-chevron-down >svg,.k-expander:disabled .k-expander-header .k-expander-indicator .k-icon.k-svg-icon.k-svg-i-chevron-down >svg{
+    color: $feather-feather-border-on-surface;
+        
+}
+    .k-expander.k-disabled .k-expander-header,.k-expander.k-state-disabled .k-expander-header,.k-expander:disabled .k-expander-header{
+    visibility: visible;
+        
+}
+    .k-expander.k-disabled,.k-expander.k-state-disabled,.k-expander:disabled{
+    opacity: 100%;
+        
+}
+    .k-expander.k-expanded.k-disabled .k-expander-content-wrapper .k-expander-content,.k-expander.k-expanded.k-state-disabled .k-expander-content-wrapper .k-expander-content,.k-expander.k-expanded:disabled .k-expander-content-wrapper .k-expander-content{
+    color: $feather-feather-disabled-text-on-surface;
+        
+}
+    .k-expander .k-expander-header.k-focus,.k-expander .k-expander-header.k-state-focus,.k-expander .k-expander-header.k-state-focused,.k-expander .k-expander-header:focus{
+    box-shadow: none;
+            background-color: initial;
+            background-image: $feather-feather-focused-on-surface-gradient;
+        
+}
+    .k-expander .k-expander-header{
+    border-bottom-left-radius: $feather-feather-border-radius-s;
+            border-bottom-right-radius: $feather-feather-border-radius-s;
+            border-top-left-radius: $feather-feather-border-radius-s;
+            border-top-right-radius: $feather-feather-border-radius-s;
+        
+}
+    .k-expander.k-expanded{
+    transition-property: all;
+            transition-duration: 280ms;
+            transition-timing-function: ease-out;
+        
+}
+    .k-card .k-card-header .k-card-subtitle{
+                    @extend %feather-typography-feather-caption-text;
+      
+}
+    .k-card .k-card-body >p{
+                    @extend %feather-typography-feather-body-small;
+      
 }

package/dist/v8.2.0/scss/_tokens.scss

@@ -165,7 +165,7 @@ $feather-feather-secondary-text-on-surface: rgba(10,12,27,0.7);
 $feather-feather-surface-shade-3: rgba(232,232,240,1);
 $feather-feather-border-on-surface: rgba(10, 12, 27, 0.12);
 $feather-feather-surface: rgba(252,252,255,1);
-$feather-feather-primary: rgba(0, 53, 131, 1);
+$feather-feather-primary: #003583;
 $feather-feather-surface-shade-2: rgba(237,237,245,1);
 $feather-primary-hover:  rgb(0, 50.88, 125.76);
 $feather-kendo-button-bg: transparent;
@@ -174,6 +174,7 @@ $feather-kendo-calendar-cell-hover-bg: transparent;
 $feather-kendo-checkbox-bg: transparent;
 $feather-error: #a5021f;
 $feather-feather-surface-shade-1: rgba(242,242,250,1);
+$feather-base: #f5f5f5;
 $feather-feather-primary-text-on-surface: rgba(10,12,27,0.9);
 $feather-base-hover: #ebebeb;
 $feather-primary-subtle:  rgb(204, 214.6, 230.2);
@@ -185,7 +186,7 @@ $feather-feather-disabled-text-on-surface: rgba(10,12,27,0.4);
 $feather-feather-secondary-text-on-color: rgba(255, 255, 255, 0.7);
 $feather-feather-icon-on-neutral: rgba(10, 12, 27, 0.60);
 $feather-feather-border-on-color: rgba(255,255,255,0.24);
-$feather-feather-primary-variant: rgba(25,91,181,1);
+$feather-feather-primary-variant: #195bb5;
 $feather-feather-secondary: rgba(125,52,201,1);
 $feather-feather-secondary-variant: rgba(81,18,145,1);
 $feather-feather-background: rgba(227,227,235,1);
@@ -205,7 +206,6 @@ $feather-primary-subtle-hover:  rgb(165.75, 184.3, 211.6);
 $feather-primary-subtle-active:  rgb(127.5, 154, 193);
 $feather-primary-emphasis:  rgb(63.75, 103.5, 162);
 $feather-primary-on-subtle:  rgb(0, 18.55, 45.85);
-$feather-primary-on-surface:  rgb(0, 39.75, 98.25);
 $feather-secondary-subtle:  rgb(209, 222.2, 240.2);
 $feather-secondary-subtle-hover:  rgb(174.5, 197.6, 229.1);
 $feather-secondary-subtle-active:  #8cadda;
@@ -281,10 +281,12 @@ $feather-kendo-chip-outline-border: $feather-feather-secondary-text-on-surface;
 $feather-kendo-chip-outline-hover-bg: $feather-kendo-button-hover-bg;
 $feather-kendo-chip-outline-selected-bg: $feather-feather-primary;
 $feather-kendo-chip-outline-selected-text: $feather-feather-primary-text-on-color;
+$feather-kendo-color-editor-bg: $feather-base;
 $feather-kendo-component-bg: $feather-feather-surface;
 $feather-kendo-component-text: $feather-feather-secondary-text-on-surface;
 $feather-kendo-component-header-text: $feather-feather-primary-text-on-surface;
 $feather-kendo-drawer-hover-bg: $feather-base-hover;
+$feather-kendo-expander-title-text: $feather-feather-primary-text-on-surface;
 $feather-kendo-fieldset-legend-text: $feather-feather-primary-text-on-surface;
 $feather-kendo-input-bg: $feather-app-surface;
 $feather-kendo-input-text: $feather-kendo-component-text;
@@ -307,6 +309,7 @@ $feather-kendo-link-hover-text: $feather-feather-secondary-variant;
 $feather-kendo-link-text: $feather-feather-secondary;
 $feather-kendo-color-inverse: $feather-feather-primary-text-on-color;
 $feather-kendo-base-bg: $feather-feather-background;
+$feather-primary-on-surface: $feather-feather-primary;
 $feather-secondary: $feather-feather-primary-variant;
 $feather-tertiary: $feather-feather-secondary;
 
@@ -461,10 +464,12 @@ $kendo-chip-outline-border: $feather-kendo-chip-outline-border;
 $kendo-chip-outline-hover-bg: $feather-kendo-chip-outline-hover-bg;
 $kendo-chip-outline-selected-bg: $feather-kendo-chip-outline-selected-bg;
 $kendo-chip-outline-selected-text: $feather-kendo-chip-outline-selected-text;
+$kendo-color-editor-bg: $feather-kendo-color-editor-bg;
 $kendo-component-bg: $feather-kendo-component-bg;
 $kendo-component-text: $feather-kendo-component-text;
 $kendo-component-header-text: $feather-kendo-component-header-text;
 $kendo-drawer-hover-bg: $feather-kendo-drawer-hover-bg;
+$kendo-expander-title-text: $feather-kendo-expander-title-text;
 $kendo-fieldset-legend-text: $feather-kendo-fieldset-legend-text;
 $kendo-input-bg: $feather-kendo-input-bg;
 $kendo-input-text: $feather-kendo-input-text;
@@ -476,7 +481,7 @@ $kendo-menu-popup-bg: $feather-kendo-menu-popup-bg;
 $kendo-picker-text: $feather-kendo-picker-text;
 $kendo-picker-border: $feather-kendo-picker-border;
 $kendo-switch-off-track-border: $feather-kendo-switch-off-track-border;
-    $kendo-font-family: TB_Inter;
+    $kendo-font-family: Inter;
     $kendo-font-size: 0.875rem;
     $kendo-font-weight-normal: 500;
     $kendo-line-height: 1.4285714286;
@@ -492,7 +497,6 @@ primary-subtle-hover:  rgb(165.75, 184.3, 211.6),
 primary-subtle-active:  rgb(127.5, 154, 193),
 primary-emphasis:  rgb(63.75, 103.5, 162),
 primary-on-subtle:  rgb(0, 18.55, 45.85),
-primary-on-surface:  rgb(0, 39.75, 98.25),
 secondary-subtle:  rgb(209, 222.2, 240.2),
 secondary-subtle-hover:  rgb(174.5, 197.6, 229.1),
 secondary-subtle-active:  #8cadda,
@@ -547,6 +551,7 @@ app-surface: $feather-feather-surface,
 primary: $feather-feather-primary,
 surface: $feather-feather-surface-shade-2,
 border-alt: $feather-feather-border-light-on-surface,
+primary-on-surface: $feather-feather-primary,
 secondary: $feather-feather-primary-variant,
 tertiary: $feather-feather-secondary,
 );
@@ -605,7 +610,7 @@ $feather-typography: (
       font-size: 1.1875rem,
       font-weight: 700,
       line-height: 1.4736842105,
-      letter-spacing: 0.02em,
+      letter-spacing: 0em,
           ),
   feather-heading-4: (
       font-family: (Inter),
@@ -659,7 +664,7 @@ $feather-typography: (
   @each $selector, $property in $typography {
     &-#{$selector} {
       @each $propName, $propValue in $property {
-        #{$propName}: #{$propValue};
+        #{$propName}: $propValue;
       }
     } &-#{$selector}-important {
       @each $propName, $propValue in $property {
@@ -673,15 +678,15 @@ $feather-effects: (
   tb-internal-none-effects: (
       box-shadow: (none), filter: (none), backdrop-filter: (none),  ),
   feather-focus-outer-on-color: (
-      box-shadow: (0px 0px 0px 1.5px $feather-feather-primary-text-on-color, 0px 0px 0px 3.5px $feather-feather-primary),  ),
+      box-shadow: (0px 0px 0px 1.5px $feather-feather-primary-text-on-color, 0px 0px 0px 3.5px $feather-feather-primary-variant),  ),
   feather-focus-invalid-outer: (
       box-shadow: (0px 0px 0px 2px $feather-error),  ),
   feather-focus-inner-on-color: (
-      box-shadow: (inset 0px 0px 0px 1.5px $feather-feather-primary, inset 0px 0px 0px 3px $feather-feather-primary-text-on-color),  ),
+      box-shadow: (inset 0px 0px 0px 1.5px $feather-feather-primary-variant, inset 0px 0px 0px 3px $feather-feather-primary-text-on-color),  ),
   feather-focus-outer-on-surface: (
-      box-shadow: (0px 0px 0px 1px $feather-feather-primary),  ),
+      box-shadow: (0px 0px 0px 2px $feather-feather-primary-variant),  ),
   feather-focus-inner-on-surface: (
-      box-shadow: (inset 0px 0px 0px 2px $feather-feather-primary),  ),
+      box-shadow: (inset 0px 0px 0px 2px $feather-feather-primary-variant),  ),
   feather-elevation-00dp: (
       box-shadow: (0px 0px 0px 1px $feather-feather-border-on-surface),  ),
   feather-elevation-02dp: (

package/package.json

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