@koobiq/components 18.5.2 → 18.6.0

package/schematics/migrations/css-selectors/data.js

@@ -0,0 +1,65 @@
+'use strict';
+
+const typographyCssSelectorsReplacement = [
+    { replace: 'kbq-display-1-strong', replaceWith: 'kbq-display-big-strong' },
+    { replace: 'kbq-display-2-strong', replaceWith: 'kbq-display-normal-strong' },
+    { replace: 'kbq-display-3-strong', replaceWith: 'kbq-display-compact-strong' },
+    { replace: 'kbq-body-tabular', replaceWith: 'kbq-tabular-big' },
+    { replace: 'kbq-body-strong', replaceWith: 'kbq-text-big-strong' },
+    { replace: 'kbq-body-mono-strong', replaceWith: 'kbq-mono-big-strong' },
+    { replace: 'kbq-body-mono', replaceWith: 'kbq-mono-big' },
+    { replace: 'kbq-body-caps', replaceWith: 'kbq-caps-big' },
+    { replace: 'kbq-caption-tabular', replaceWith: 'kbq-tabular-normal' },
+    { replace: 'kbq-caption-strong', replaceWith: 'kbq-text-normal-strong' },
+    { replace: 'kbq-caption-mono-strong', replaceWith: 'kbq-mono-normal-strong' },
+    { replace: 'kbq-caption-mono', replaceWith: 'kbq-mono-normal' },
+    { replace: 'kbq-caption-caps', replaceWith: 'kbq-caps-normal' },
+    { replace: 'kbq-extra-small-text-strong', replaceWith: 'kbq-text-compact-strong' },
+    { replace: 'kbq-extra-small-text-mono', replaceWith: 'kbq-mono-compact' },
+    { replace: 'kbq-extra-small-text-caps', replaceWith: 'kbq-caps-compact' },
+    { replace: 'kbq-display-1', replaceWith: 'kbq-display-big' },
+    { replace: 'kbq-display-2', replaceWith: 'kbq-display-normal' },
+    { replace: 'kbq-display-3', replaceWith: 'kbq-display-compact' },
+    { replace: 'kbq-body', replaceWith: 'kbq-text-big' },
+    { replace: 'kbq-caption', replaceWith: 'kbq-text-normal' },
+    { replace: 'kbq-extra-small-text', replaceWith: 'kbq-text-compact' }
+];
+const colorsVarsReplacement = [
+    /* NEUTRAL */
+    { replace: 'neutral-white', replaceWith: '<remove from project>' },
+    /* BRAND */
+    { replace: 'brand-default', replaceWith: '<remove from project>' },
+    { replace: 'brand-palette', replaceWith: '<remove from project>' },
+    /* INFO */
+    { replace: 'info-default', replaceWith: '<remove from project>' },
+    /* BACKGROUND */
+    { replace: 'background-background-disabled', replaceWith: 'states-background-disabled' },
+    { replace: 'background-background-less-contrast', replaceWith: 'states-background-secondary' },
+    { replace: 'background-background-under', replaceWith: 'states-background-secondary' },
+    { replace: 'background-background', replaceWith: 'background-bg' },
+    { replace: 'background-overlay-hover', replaceWith: 'states-background-transparent-hover' },
+    { replace: 'background-overlay-active', replaceWith: 'states-background-transparent-active' },
+    { replace: 'background-overlay-disabled', replaceWith: 'states-background-transparent-disabled' },
+    /* FOREGROUND */
+    { replace: 'foreground-text-less-contrast', replaceWith: 'foreground-contrast-fade' },
+    { replace: 'foreground-text-disabled', replaceWith: 'states-foreground-disabled' },
+    { replace: 'foreground-text-error', replaceWith: 'foreground-contrast-fade' },
+    { replace: 'foreground-text-success', replaceWith: 'foreground-success' },
+    { replace: 'foreground-divider', replaceWith: 'line-contrast-less' },
+    { replace: 'foreground-text', replaceWith: 'foreground-contrast' },
+    { replace: 'foreground-icon', replaceWith: 'icon-contrast' },
+    { replace: 'foreground-border', replaceWith: 'line-contrast-fade' },
+    /* STATES */
+    { replace: 'states-background-ghost-hover', replaceWith: 'states-background-transparent-hover' },
+    { replace: 'states-background-ghost-active', replaceWith: 'states-background-transparent-active' },
+    /* ICON */
+    { replace: 'states-focused-color-error', replaceWith: 'states-line-focus-error' },
+    { replace: 'states-focused-color', replaceWith: 'states-line-focus-theme' },
+    { replace: 'states-selected-color', replaceWith: '<remove from project>' },
+    { replace: 'states-pressed-shadow', replaceWith: '<remove from project>' },
+    { replace: 'states-pressed-shadow', replaceWith: '<remove from project>' },
+    { replace: 'others-brand', replaceWith: '<remove from project>' }
+];
+
+exports.colorsVarsReplacement = colorsVarsReplacement;
+exports.typographyCssSelectorsReplacement = typographyCssSelectorsReplacement;

package/schematics/migrations/css-selectors/index.js

@@ -0,0 +1,103 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var path = require('path');
+var utils_packageConfig = require('../../utils/package-config.js');
+var migrations_cssSelectors_data = require('./data.js');
+require('@angular-devkit/schematics');
+require('@schematics/angular/utility');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var path__namespace = /*#__PURE__*/_interopNamespaceDefault(path);
+
+function cssSelectors(options) {
+    let targetDir;
+    return async (tree, context) => {
+        const { project, fix, stylesExt } = options;
+        try {
+            const projectDefinition = await utils_packageConfig.setupOptions(project, tree);
+            targetDir = projectDefinition ? tree.getDir(projectDefinition.root) : tree;
+        }
+        catch (e) {
+            targetDir = tree;
+        }
+        const { logger } = context;
+        const getDeprecatedFrom = (content, replacementInfo) => {
+            return replacementInfo.filter(({ replace }) => new RegExp(`\\b${replace}\\b`, 'g').exec(content));
+        };
+        const handleReplacements = (newContent, path) => {
+            if (fix) {
+                migrations_cssSelectors_data.typographyCssSelectorsReplacement.forEach(({ replace, replaceWith }) => {
+                    newContent = newContent.replace(new RegExp(`\\b${replace}\\b`, 'g'), replaceWith);
+                });
+            }
+            else {
+                const foundSelectors = getDeprecatedFrom(newContent, migrations_cssSelectors_data.typographyCssSelectorsReplacement);
+                if (foundSelectors.length) {
+                    logger.warn(getTypographyReplacements(path, foundSelectors));
+                }
+            }
+            // Just suggest about colors replacements without changing file,
+            // since it's potentially a complex task to handle
+            const foundColors = getDeprecatedFrom(newContent, migrations_cssSelectors_data.colorsVarsReplacement);
+            if (foundColors.length) {
+                logger.warn(getBaseReplacements(path, foundColors));
+            }
+            return newContent;
+        };
+        // Update templates & components & styles
+        targetDir.visit((path, entry) => {
+            // if project property not provided, provide node_modules to be changed
+            if (path.includes('node_modules'))
+                return;
+            if (path.endsWith('.html') || path.endsWith('.ts') || path.endsWith(stylesExt)) {
+                const initialContent = entry?.content.toString();
+                let newContent = initialContent;
+                if (newContent) {
+                    newContent = handleReplacements(newContent, path);
+                    if (initialContent !== newContent) {
+                        tree.overwrite(path, newContent || '');
+                    }
+                }
+            }
+        });
+    };
+}
+function getBaseReplacements(filePath, foundSelectors) {
+    const parsedFilePath = path__namespace.relative(__dirname, `.${filePath}`);
+    return `
+-------------------------
+Please pay attention! Found deprecated сss-selectors in file: 
+${parsedFilePath.replace(/\\/g, '/')}
+Replace with specified rules: 
+${foundSelectors.map(({ replace, replaceWith }) => `\t${replace} -> \t${replaceWith}`).join('\n')}
+-------------------------
+    `;
+}
+function getTypographyReplacements(filePath, foundSelectors) {
+    const baseMessage = getBaseReplacements(filePath, foundSelectors);
+    return `${baseMessage}\n
+Or use --fix=true to replace automatically
+Pay attention: overwriting is possible. Check the code after automatic replacement was done.
+-------------------------
+    `;
+}
+
+exports.default = cssSelectors;

package/schematics/migrations/css-selectors/schema.json

@@ -0,0 +1,25 @@
+{
+    "$schema": "http://json-schema.org/schema",
+    "$id": "koobiq-components-css-selectors",
+    "title": "koobiq-components css-selectors schematic",
+    "type": "object",
+    "properties": {
+        "project": {
+            "type": "string",
+            "description": "Name of the project",
+            "$default": {
+                "$source": "projectName"
+            }
+        },
+        "fix": {
+            "type": "boolean",
+            "description": "Whether overwrite icons prefixes or simply inform in console",
+            "default": false
+        },
+        "stylesExt": {
+            "type": "string",
+            "description": "Use this option to specify styles extension preferred in your project",
+            "default": "scss"
+        }
+    }
+}

package/schematics/ng-add/index.js

@@ -41,13 +41,13 @@ function ngAdd(options) {
         }
         // Installing dependencies
         utils_packageConfig.addPackageToPackageJson(tree, '@angular/cdk', "^18.2.6");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.5.2");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.5.2");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.6.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.6.0");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.1.3");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.1.3");
         utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^9.1.0");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.7.3");
-        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.7.3");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.8.1");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.8.1");
         utils_packageConfig.addPackageToPackageJson(tree, '@messageformat/core', "^3.0.1");
         utils_packageConfig.addPackageToPackageJson(tree, '@radix-ng/primitives', VERSIONS.RADIX_NG);
         utils_packageConfig.addPackageToPackageJson(tree, 'luxon', "^3.4.4");

package/select/_select-theme.scss

@@ -11,14 +11,14 @@
         }
 
         &.kbq-disabled {
-            color: var(--kbq-foreground-text-disabled);
+            color: var(--kbq-states-foreground-disabled);
         }
     }
 
     .kbq-select__placeholder {
         text-overflow: ellipsis;
 
-        color: var(--kbq-foreground-text-disabled);
+        color: var(--kbq-states-foreground-disabled);
     }
 
     .kbq-select__panel {
@@ -35,16 +35,16 @@
     }
 
     .kbq-select__no-options-message {
-        color: var(--kbq-foreground-text-less-contrast);
+        color: var(--kbq-foreground-contrast-secondary);
     }
 }
 
 @mixin kbq-select-typography() {
     .kbq-select {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
     }
 
     .kbq-select__panel {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
     }
 }

package/sidepanel/_sidepanel-theme.scss

@@ -19,11 +19,11 @@
 
 @mixin kbq-sidepanel-typography() {
     .kbq-sidepanel-title {
-        @include kbq-typography-level-to-styles_css-variables(typography, title);
+        @include kbq-typography-level-to-styles-css-variables(typography, title);
     }
 
     .kbq-sidepanel-container,
     .kbq-sidepanel-footer {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
     }
 }

package/splitter/_splitter-theme.scss

@@ -14,7 +14,7 @@
         }
 
         &[disabled] {
-            background-color: var(--kbq-background-background-disabled);
+            background-color: var(--kbq-states-background-disabled);
 
             cursor: default;
         }

package/table/_table-theme.scss

@@ -41,7 +41,7 @@
                 font-weight: normal;
             }
 
-            @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
+            @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
         }
 
         & > tbody {
@@ -49,7 +49,7 @@
                 font-weight: normal;
             }
 
-            @include kbq-typography-level-to-styles_css-variables(typography, tabular-normal);
+            @include kbq-typography-level-to-styles-css-variables(typography, tabular-normal);
         }
     }
 }

package/tabs/_tabs-theme.scss

@@ -151,6 +151,6 @@
 @mixin kbq-tabs-typography() {
     .kbq-tab-label,
     .kbq-tab-link {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-normal-medium);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-normal-medium);
     }
 }

package/tags/_tag-theme.scss

@@ -55,10 +55,10 @@
 
 @mixin kbq-tag-typography() {
     .kbq-tag {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-normal-medium);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-normal-medium);
     }
 
     .kbq-tag-input {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
     }
 }

package/textarea/_textarea-theme.scss

@@ -2,6 +2,6 @@
 
 @mixin kbq-textarea-typography() {
     .kbq-textarea {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
     }
 }

package/timezone/_timezone-option-theme.scss

@@ -17,18 +17,18 @@
 
 @mixin kbq-timezone-option-typography() {
     .kbq-timezone-option__offset {
-        @include kbq-typography-level-to-styles_css-variables(typography, tabular-normal);
+        @include kbq-typography-level-to-styles-css-variables(typography, tabular-normal);
     }
 
     .kbq-timezone-option__city {
-        @include kbq-typography-level-to-styles_css-variables(typography, tabular-normal);
+        @include kbq-typography-level-to-styles-css-variables(typography, tabular-normal);
     }
 
     .kbq-timezone-option__cities {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-compact);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
     }
 
     .kbq-timezone-select__panel.kbq-select__panel .kbq-optgroup-label {
-        @include kbq-typography-level-to-styles_css-variables(typography, caps-compact-strong);
+        @include kbq-typography-level-to-styles-css-variables(typography, caps-compact-strong);
     }
 }

package/toast/_toast-theme.scss

@@ -36,10 +36,10 @@
 
 @mixin kbq-toast-typography() {
     .kbq-toast {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
     }
 
     .kbq-toast__title {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
     }
 }

package/toast/toast.component.scss

@@ -89,11 +89,16 @@
                             [calc(var(--kbq-icon-button-size-small-vertical-padding) * 2),
                             16px]
                         ),
-                        toast-font-title-line-height]
+                        typography-text-normal-line-height]
                     ) / 2
             )]
     );
     margin-right: var(--kbq-toast-size-close-button-margin-right);
+
+    &.kbq-icon-button {
+        --kbq-icon-button-size-normal-horizontal-padding: 4px;
+        --kbq-icon-button-size-normal-vertical-padding: 4px;
+    }
 }
 
 @include kbq-toast-theme();

package/toggle/_toggle-theme.scss

@@ -61,17 +61,17 @@
         }
 
         &.kbq-disabled {
-            color: var(--kbq-foreground-text-disabled);
+            color: var(--kbq-states-foreground-disabled);
         }
     }
 }
 
 @mixin kbq-toggle-typography() {
     .kbq-toggle:not(.kbq-toggle_big) {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
 
         & .kbq-hint {
-            @include kbq-typography-level-to-styles_css-variables(typography, text-compact);
+            @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
         }
 
         & .kbq-toggle-bar-container {
@@ -80,10 +80,10 @@
     }
 
     .kbq-toggle.kbq-toggle_big {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-big);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-big);
 
         & .kbq-hint {
-            @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
+            @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
         }
 
         & .kbq-toggle-bar-container {

package/tooltip/_tooltip-theme.scss

@@ -39,10 +39,10 @@
 
 @mixin kbq-tooltip-typography() {
     .kbq-tooltip {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-compact);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
 
         .kbq-tooltip__header {
-            @include kbq-typography-level-to-styles_css-variables(typography, text-compact);
+            @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
         }
     }
 }

package/tree/_tree-theme.scss

@@ -59,10 +59,10 @@
 
 @mixin kbq-tree-typography() {
     .kbq-tree-option {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
     }
 
     .kbq-tree-option-caption {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-compact);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
     }
 }

package/tree-select/_tree-select-theme.scss

@@ -9,14 +9,14 @@
         }
 
         &.kbq-disabled {
-            color: var(--kbq-foreground-text-disabled);
+            color: var(--kbq-states-foreground-disabled);
         }
     }
 
     .kbq-select__placeholder {
         text-overflow: ellipsis;
 
-        color: var(--kbq-foreground-text-disabled);
+        color: var(--kbq-states-foreground-disabled);
     }
 
     .kbq-tree-select__panel {
@@ -32,6 +32,6 @@
 @mixin kbq-tree-select-typography() {
     .kbq-tree-select,
     .kbq-tree-select__panel {
-        @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
+        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
     }
 }