@koobiq/components 17.1.0 → 17.3.0

package/core/option/_option-theme.scss

@@ -10,15 +10,15 @@
     background: kbq-css-variable(list-#{$style-name}-container-background, map.get($state, container-background));
 
     .kbq-option-text {
-        color: kbq-css-variable(list-#{$style-name}-text, map.get($state, text));
+        color: kbq-css-variable(list-#{$style-name}-text-color, map.get($state, text));
     }
 
     .kbq-option-action .kbq-icon {
-        color: kbq-css-variable(list-#{$style-name}-icon-button, map.get($state, icon-button));
+        color: kbq-css-variable(list-#{$style-name}-icon-button-color, map.get($state, icon-button));
     }
 
     .kbq-option-caption {
-        color: kbq-css-variable(list-#{$style-name}-caption, map.get($state, caption));
+        color: kbq-css-variable(list-#{$style-name}-caption-color, map.get($state, caption));
     }
 }
 
@@ -34,7 +34,10 @@
 
         &.kbq-focused,
         &.kbq-active {
-            border-color: map.get($list-item, states-focused, focus-outline);
+            border-color: kbq-css-variable(
+                list-states-focused-focus-outline-color,
+                map.get($list-item, states-focused, focus-outline)
+            );
         }
 
         &.kbq-selected {

package/core/pop-up/index.d.ts

@@ -1,3 +1,4 @@
 export * from './constants';
 export * from './pop-up';
+export * from './pop-up-styles';
 export * from './pop-up-trigger';

package/core/pop-up/pop-up-styles.d.ts

@@ -0,0 +1,2 @@
+import { ElementRef } from '@angular/core';
+export declare const applyPopupMargins: (element: ElementRef, name: string, value: string) => void;

package/core/pop-up/pop-up.d.ts

@@ -7,8 +7,13 @@ export declare abstract class KbqPopUp implements OnDestroy {
     private changeDetectorRef;
     header: string | TemplateRef<any>;
     content: string | TemplateRef<any>;
+    context: {
+        $implicit: any;
+    } | null;
     classMap: {};
     warning: boolean;
+    arrow: boolean;
+    offset: number | null;
     visibility: PopUpVisibility;
     visibleChange: EventEmitter<boolean>;
     protected prefix: string;

package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

@@ -16,18 +16,18 @@
 
     &.kbq-checked,
     &.kbq-indeterminate {
-        border-color: kbq-css-variable(#{$base}-checked-border, map.get($style, checked, border));
-        background: kbq-css-variable(#{$base}-checked-background, map.get($style, checked, background));
+        border-color: kbq-css-variable(#{$base}-states-checked-border, map.get($style, checked, border));
+        background: kbq-css-variable(#{$base}-states-checked-background, map.get($style, checked, background));
     }
 
     &.kbq-disabled {
         & .kbq-checkbox-checkmark,
         & .kbq-checkbox-mixedmark {
-            color: kbq-css-variable(#{$base}-disabled-color, map.get($style, disabled, color));
+            color: kbq-css-variable(#{$base}-states-disabled-color, map.get($style, disabled, color));
         }
 
-        border-color: kbq-css-variable(#{$base}-disabled-border, map.get($style, disabled, border));
-        background: kbq-css-variable(#{$base}-disabled-background, map.get($style, disabled, background));
+        border-color: kbq-css-variable(#{$base}-states-disabled-border, map.get($style, disabled, border));
+        background: kbq-css-variable(#{$base}-states-disabled-background, map.get($style, disabled, background));
     }
 }
 

package/core/styles/_koobiq-theme.scss

@@ -11,7 +11,6 @@
 @use '../../badge/badge-theme' as *;
 @use '../../button/button-theme' as *;
 @use '../../button-toggle/button-toggle-theme' as *;
-@use '../../card/card-theme' as *;
 @use '../../checkbox/checkbox-theme' as *;
 @use '../../code-block/code-block-theme' as *;
 @use '../../datepicker/datepicker-theme' as *;
@@ -65,7 +64,6 @@
     @include kbq-badge-theme($theme);
     @include kbq-button-theme($theme);
     @include kbq-button-toggle-theme($theme);
-    @include kbq-card-theme($theme);
     @include kbq-checkbox-theme($theme);
     @include kbq-code-block-theme($theme);
     @include kbq-datepicker-theme($theme);
@@ -121,8 +119,8 @@
         $md-config: kbq-markdown-typography-config($tokens);
     }
 
-    @include kbq-base-typography($config);
-    @include kbq-markdown-base-typography($md-config);
+    @include kbq-base-typography();
+    @include kbq-markdown-base-typography();
 
     @include kbq-alert-typography($config);
     @include kbq-badge-typography($config);

package/core/styles/theming/_components-theming.scss

@@ -254,7 +254,7 @@
             )
         ),
         transparent: (
-            theme: (
+            theme-fade-on: (
                 border: map.get($tokens, 'button-#{$scheme}-transparent-theme-fade-on-border'),
                 foreground: map.get($tokens, 'button-#{$scheme}-transparent-theme-fade-on-foreground'),
                 background: map.get($tokens, 'button-#{$scheme}-transparent-theme-fade-on-background'),
@@ -271,7 +271,7 @@
                 states-disabled-right-icon:
                     map.get($tokens, 'button-#{$scheme}-transparent-theme-fade-on-states-disabled-right-icon')
             ),
-            contrast: (
+            contrast-fade-on: (
                 border: map.get($tokens, 'button-#{$scheme}-transparent-contrast-fade-on-border'),
                 foreground: map.get($tokens, 'button-#{$scheme}-transparent-contrast-fade-on-foreground'),
                 background: map.get($tokens, 'button-#{$scheme}-transparent-contrast-fade-on-background'),
@@ -340,29 +340,6 @@
         )
     );
 
-    $card: (
-        error: (
-            vertical-line: map.get($tokens, 'card-#{$scheme}-error-vertical-line'),
-            background: map.get($tokens, 'card-#{$scheme}-error-background'),
-            shadow: map.get($tokens, 'card-#{$scheme}-error-shadow')
-        ),
-        warning: (
-            vertical-line: map.get($tokens, 'card-#{$scheme}-warning-vertical-line'),
-            background: map.get($tokens, 'card-#{$scheme}-warning-background'),
-            shadow: map.get($tokens, 'card-#{$scheme}-warning-shadow')
-        ),
-        success: (
-            vertical-line: map.get($tokens, 'card-#{$scheme}-success-vertical-line'),
-            background: map.get($tokens, 'card-#{$scheme}-success-background'),
-            shadow: map.get($tokens, 'card-#{$scheme}-success-shadow')
-        ),
-        info: (
-            vertical-line: map.get($tokens, 'card-#{$scheme}-info-vertical-line'),
-            background: map.get($tokens, 'card-#{$scheme}-info-background'),
-            shadow: map.get($tokens, 'card-#{$scheme}-info-shadow')
-        )
-    );
-
     $checkbox: (
         theme: (
             default: (
@@ -908,10 +885,8 @@
     );
 
     $link: (
-        default: (
-            text: map.get($tokens, 'link-#{$scheme}-text'),
-            border-bottom: map.get($tokens, 'link-#{$scheme}-border-bottom')
-        ),
+        text: map.get($tokens, 'link-#{$scheme}-text'),
+        border-bottom: map.get($tokens, 'link-#{$scheme}-border-bottom'),
         state-visited: (
             text: map.get($tokens, 'link-#{$scheme}-state-visited-text'),
             border-bottom: map.get($tokens, 'link-#{$scheme}-state-visited-border-bottom')
@@ -1042,25 +1017,25 @@
                 icon-left: map.get($tokens, 'navbar-item-#{$scheme}-default-content-icon-left'),
                 icon-right: map.get($tokens, 'navbar-item-#{$scheme}-default-content-icon-right')
             ),
-            hover: (
+            states-hover: (
                 background: map.get($tokens, 'navbar-item-#{$scheme}-states-hover-content-background'),
                 text: map.get($tokens, 'navbar-item-#{$scheme}-states-hover-content-text'),
                 icon-left: map.get($tokens, 'navbar-item-#{$scheme}-states-hover-content-icon-left'),
                 icon-right: map.get($tokens, 'navbar-item-#{$scheme}-states-hover-content-icon-right')
             ),
-            selected: (
+            states-selected: (
                 background: map.get($tokens, 'navbar-item-#{$scheme}-states-selected-content-background'),
                 text: map.get($tokens, 'navbar-item-#{$scheme}-states-selected-content-text'),
                 icon-left: map.get($tokens, 'navbar-item-#{$scheme}-states-selected-content-icon-left'),
                 icon-right: map.get($tokens, 'navbar-item-#{$scheme}-states-selected-content-icon-right')
             ),
-            selected-hover: (
+            states-selected-hover: (
                 background: map.get($tokens, 'navbar-item-#{$scheme}-states-selected-hover-content-background'),
                 text: map.get($tokens, 'navbar-item-#{$scheme}-states-selected-hover-content-text'),
                 icon-left: map.get($tokens, 'navbar-item-#{$scheme}-states-selected-hover-content-icon-left'),
                 icon-right: map.get($tokens, 'navbar-item-#{$scheme}-states-selected-hover-content-icon-right')
             ),
-            disabled: (
+            states-disabled: (
                 background: map.get($tokens, 'navbar-item-#{$scheme}-states-disabled-content-background'),
                 text: map.get($tokens, 'navbar-item-#{$scheme}-states-disabled-content-text'),
                 icon-left: map.get($tokens, 'navbar-item-#{$scheme}-states-disabled-content-icon-left'),
@@ -1554,20 +1529,20 @@
                 icon: map.get($tokens, 'tag-#{$scheme}-theme-fade-on-default-icon'),
                 close-button: map.get($tokens, 'tag-#{$scheme}-theme-fade-on-default-close-button')
             ),
-            hover: (
+            states-hover: (
                 background: map.get($tokens, 'tag-#{$scheme}-theme-fade-on-states-hover-background'),
                 text: map.get($tokens, 'tag-#{$scheme}-theme-fade-on-states-hover-text'),
                 icon: map.get($tokens, 'tag-#{$scheme}-theme-fade-on-states-hover-icon'),
                 close-button: map.get($tokens, 'tag-#{$scheme}-theme-fade-on-states-hover-close-button')
             ),
-            focus: (
+            states-focus: (
                 background: map.get($tokens, 'tag-#{$scheme}-theme-fade-on-states-focus-background'),
                 text: map.get($tokens, 'tag-#{$scheme}-theme-fade-on-states-focus-text'),
                 icon: map.get($tokens, 'tag-#{$scheme}-theme-fade-on-states-focus-icon'),
                 close-button: map.get($tokens, 'tag-#{$scheme}-theme-fade-on-states-focus-close-button'),
                 outline: map.get($tokens, 'tag-#{$scheme}-theme-fade-on-states-focus-outline')
             ),
-            disabled: (
+            states-disabled: (
                 background: map.get($tokens, 'tag-#{$scheme}-theme-fade-on-states-disabled-background'),
                 text: map.get($tokens, 'tag-#{$scheme}-theme-fade-on-states-disabled-text'),
                 icon: map.get($tokens, 'tag-#{$scheme}-theme-fade-on-states-disabled-icon'),
@@ -1581,20 +1556,20 @@
                 icon: map.get($tokens, 'tag-#{$scheme}-contrast-fade-on-default-icon'),
                 close-button: map.get($tokens, 'tag-#{$scheme}-contrast-fade-on-default-close-button')
             ),
-            hover: (
+            states-hover: (
                 background: map.get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-hover-background'),
                 text: map.get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-hover-text'),
                 icon: map.get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-hover-icon'),
                 close-button: map.get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-hover-close-button')
             ),
-            focus: (
+            states-focus: (
                 background: map.get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-focus-background'),
                 text: map.get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-focus-text'),
                 icon: map.get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-focus-icon'),
                 close-button: map.get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-focus-close-button'),
                 outline: map.get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-focus-outline')
             ),
-            disabled: (
+            states-disabled: (
                 background: map.get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-disabled-background'),
                 text: map.get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-disabled-text'),
                 icon: map.get($tokens, 'tag-#{$scheme}-contrast-fade-on-states-disabled-icon'),
@@ -1608,20 +1583,20 @@
                 icon: map.get($tokens, 'tag-#{$scheme}-error-fade-on-default-icon'),
                 close-button: map.get($tokens, 'tag-#{$scheme}-error-fade-on-default-close-button')
             ),
-            hover: (
+            states-hover: (
                 background: map.get($tokens, 'tag-#{$scheme}-error-fade-on-states-hover-background'),
                 text: map.get($tokens, 'tag-#{$scheme}-error-fade-on-states-hover-text'),
                 icon: map.get($tokens, 'tag-#{$scheme}-error-fade-on-states-hover-icon'),
                 close-button: map.get($tokens, 'tag-#{$scheme}-error-fade-on-states-hover-close-button')
             ),
-            focus: (
+            states-focus: (
                 background: map.get($tokens, 'tag-#{$scheme}-error-fade-on-states-focus-background'),
                 text: map.get($tokens, 'tag-#{$scheme}-error-fade-on-states-focus-text'),
                 icon: map.get($tokens, 'tag-#{$scheme}-error-fade-on-states-focus-icon'),
                 close-button: map.get($tokens, 'tag-#{$scheme}-error-fade-on-states-focus-close-button'),
                 outline: map.get($tokens, 'tag-#{$scheme}-error-fade-on-states-focus-outline')
             ),
-            disabled: (
+            states-disabled: (
                 background: map.get($tokens, 'tag-#{$scheme}-error-fade-on-states-disabled-background'),
                 text: map.get($tokens, 'tag-#{$scheme}-error-fade-on-states-disabled-text'),
                 icon: map.get($tokens, 'tag-#{$scheme}-error-fade-on-states-disabled-icon'),
@@ -1759,6 +1734,16 @@
             background: map.get($tokens, 'tooltip-#{$scheme}-contrast-fade-off-background'),
             text: map.get($tokens, 'tooltip-#{$scheme}-contrast-fade-off-text'),
             shadow: map.get($tokens, 'tooltip-#{$scheme}-contrast-fade-off-shadow')
+        ),
+        warning-fade-off: (
+            background: map.get($tokens, 'tooltip-#{$scheme}-warning-fade-off-background'),
+            text: map.get($tokens, 'tooltip-#{$scheme}-warning-fade-off-text'),
+            shadow: map.get($tokens, 'tooltip-#{$scheme}-warning-fade-off-shadow')
+        ),
+        error-fade-off: (
+            background: map.get($tokens, 'tooltip-#{$scheme}-error-fade-off-background'),
+            text: map.get($tokens, 'tooltip-#{$scheme}-error-fade-off-text'),
+            shadow: map.get($tokens, 'tooltip-#{$scheme}-error-fade-off-shadow')
         )
     );
 
@@ -1827,7 +1812,6 @@
         badge: $badge,
         button: $button,
         button-toggle: $button-toggle,
-        card: $card,
         checkbox: $checkbox,
         code-block: $code-block,
         datepicker: $datepicker,

package/core/styles/theming/_scrollbar-theme.scss

@@ -58,7 +58,8 @@
 
         // firefox
         @supports not selector(::-webkit-scrollbar) {
-            scrollbar-color: map.get($scrollbar, default) transparent;
+            scrollbar-color: kbq-css-variable(scrollbar-thumb-default-background, map.get($scrollbar, default))
+                transparent;
         }
 
         // webkit
@@ -72,18 +73,18 @@
             border-color: transparent;
 
             background-clip: content-box;
-            background-color: map.get($scrollbar, default);
+            background-color: kbq-css-variable(scrollbar-thumb-default-background, map.get($scrollbar, default));
 
             &:hover {
-                background-color: map.get($scrollbar, hover);
+                background-color: kbq-css-variable(scrollbar-thumb-hover-background, map.get($scrollbar, hover));
             }
 
             &:disabled {
-                background-color: map.get($scrollbar, disabled);
+                background-color: kbq-css-variable(scrollbar-thumb-disabled-background, map.get($scrollbar, disabled));
             }
 
             &:active {
-                background-color: map.get($scrollbar, active);
+                background-color: kbq-css-variable(scrollbar-thumb-active-background, map.get($scrollbar, active));
             }
         }
     }