@koobiq/components 17.8.1 → 18.0.0

package/schematics/new-icons-pack/index.js

@@ -0,0 +1,120 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var chalk = require('chalk');
+var path = require('path');
+var utils_packageConfig = require('../utils/package-config.js');
+var newIconsPack_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);
+
+const { italic, blue, bold } = chalk;
+const data = newIconsPack_data.newIconsPackData;
+function newIconsPack(options) {
+    let targetDir;
+    const breakingIconsVersionRegExp = /^\^|\~?9\.1\.0/;
+    const pkg = '@koobiq/icons';
+    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 handleDeprecatedIcons = (newContent, path) => {
+            if (fix) {
+                data.forEach(({ replace, replaceWith }) => {
+                    newContent = newContent.replace(new RegExp(`kbq-${replace}`, 'g'), `kbq-${replaceWith}`);
+                });
+            }
+            else {
+                const foundIcons = data.filter(({ replace }) => newContent.indexOf(replace) !== -1);
+                if (foundIcons.length) {
+                    showWarning(path, foundIcons, logger);
+                }
+            }
+            return newContent;
+        };
+        // Check if breaking version is used indeed
+        if (tree.exists('package.json')) {
+            const sourceText = tree.read('package.json').toString('utf-8');
+            const json = JSON.parse(sourceText);
+            const isIconsBreakingVersionUsed = ['devDependencies', 'dependencies', 'peerDependencies'].some((type) => json[type] && json[type][pkg] && breakingIconsVersionRegExp.test(json[type][pkg]));
+            if (!isIconsBreakingVersionUsed) {
+                logger.warn('Breaking version of icons is not used. Everything is OK.');
+                return;
+            }
+        }
+        // Update templates & components
+        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('.md')) {
+                const initialContent = entry?.content.toString();
+                let newContent = initialContent;
+                if (newContent) {
+                    newIconsPack_data.iconReplacements.forEach(({ replace, replaceWith }) => {
+                        newContent = newContent.replace(new RegExp(replace, 'g'), replaceWith);
+                    });
+                    newContent = handleDeprecatedIcons(newContent, path);
+                    if (initialContent !== newContent) {
+                        tree.overwrite(path, newContent || '');
+                    }
+                }
+            }
+        });
+        // update 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(stylesExt)) {
+                const initialContent = entry?.content.toString();
+                let newContent = initialContent;
+                if (newContent) {
+                    // replace icons in styles
+                    newContent = newContent.replace(new RegExp('mc-', 'g'), 'kbq-');
+                    newContent = handleDeprecatedIcons(newContent, path);
+                }
+                if (initialContent !== newContent) {
+                    tree.overwrite(path, newContent || '');
+                }
+            }
+        });
+    };
+}
+function showWarning(filePath, foundIcons, logger) {
+    logger.warn('-------------------------');
+    logger.warn(`Please pay attention! Found deprecated icons in file: `);
+    logger.info(`${bold(italic(blue(path__namespace.resolve(`.${filePath}`))))}`);
+    logger.warn(foundIcons.map(({ replace, replaceWith }) => `\t${replace} -> \t${replaceWith}`).join('\n'));
+    logger.warn('-------------------------');
+}
+
+exports.default = newIconsPack;

package/schematics/new-icons-pack/schema.json

@@ -0,0 +1,25 @@
+{
+    "$schema": "http://json-schema.org/schema",
+    "$id": "koobiq-components-new-icons-pack",
+    "title": "koobiq-components new-icons-pack 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

@@ -4,33 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var schematics = require('@angular-devkit/schematics');
 var utility = require('@schematics/angular/utility');
-
-/**
- * Sorts the keys of the given object.
- * @returns A new object instance with sorted keys
- */
-function sortObjectByKeys(obj) {
-    return Object.keys(obj)
-        .sort()
-        .reduce((result, key) => (result[key] = obj[key]) && result, {});
-}
-/**
- * Adds a package to the package.json in the given tree
- */
-function addPackageToPackageJson(tree, pkg, version, devDependency = false) {
-    if (tree.exists('package.json')) {
-        const sourceText = tree.read('package.json').toString('utf-8');
-        const json = JSON.parse(sourceText);
-        const dependenciesType = devDependency ? 'devDependencies' : 'dependencies';
-        const dependencies = json[dependenciesType] || {};
-        if (!dependencies[pkg]) {
-            dependencies[pkg] = version;
-            json[dependenciesType] = sortObjectByKeys(dependencies);
-        }
-        tree.overwrite('package.json', JSON.stringify(json, null, 2));
-    }
-    return tree;
-}
+var utils_packageConfig = require('../utils/package-config.js');
 
 function noProject(project) {
     return `Unable to find project '${project}' in the workspace`;
@@ -51,19 +25,19 @@ function ngAdd(options) {
             }
         }
         // Installing dependencies
-        addPackageToPackageJson(tree, '@angular/cdk', "^17.2.0");
-        addPackageToPackageJson(tree, '@koobiq/cdk', "^17.8.1");
-        addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^17.8.1");
-        addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.1.2");
-        addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.1.2");
-        addPackageToPackageJson(tree, '@koobiq/icons', "^7.1.1");
-        addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.5.1");
-        addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.5.1");
-        addPackageToPackageJson(tree, '@messageformat/core', "^3.0.1");
-        addPackageToPackageJson(tree, 'luxon', "^3.4.4");
-        addPackageToPackageJson(tree, 'marked', "^9.0.0");
-        addPackageToPackageJson(tree, 'overlayscrollbars', "^2.7.3");
-        addPackageToPackageJson(tree, 'ngx-highlightjs', "^10.0.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@angular/cdk', "^18.2.5");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/cdk', "^18.0.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/angular-luxon-adapter', "^18.0.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-formatter', "^3.1.2");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/date-adapter', "^3.1.2");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/icons', "^9.1.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/tokens-builder', "^3.6.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@koobiq/design-tokens', "^3.6.0");
+        utils_packageConfig.addPackageToPackageJson(tree, '@messageformat/core', "^3.0.1");
+        utils_packageConfig.addPackageToPackageJson(tree, 'luxon', "^3.4.4");
+        utils_packageConfig.addPackageToPackageJson(tree, 'marked', "^9.0.0");
+        utils_packageConfig.addPackageToPackageJson(tree, 'overlayscrollbars', "^2.7.3");
+        utils_packageConfig.addPackageToPackageJson(tree, 'ngx-highlightjs', "^10.0.0");
     };
 }
 

package/schematics/utils/package-config.js

@@ -0,0 +1,65 @@
+'use strict';
+
+var schematics = require('@angular-devkit/schematics');
+var utility = require('@schematics/angular/utility');
+
+function noProject(project) {
+    return `Unable to find project '${project}' in the workspace`;
+}
+
+/**
+ * Sorts the keys of the given object.
+ * @returns A new object instance with sorted keys
+ */
+function sortObjectByKeys(obj) {
+    return Object.keys(obj)
+        .sort()
+        .reduce((result, key) => (result[key] = obj[key]) && result, {});
+}
+/**
+ * Adds a package to the package.json in the given tree
+ */
+function addPackageToPackageJson(tree, pkg, version, devDependency = false) {
+    if (tree.exists('package.json')) {
+        const sourceText = tree.read('package.json').toString('utf-8');
+        const json = JSON.parse(sourceText);
+        const dependenciesType = devDependency ? 'devDependencies' : 'dependencies';
+        const dependencies = json[dependenciesType] || {};
+        if (!dependencies[pkg]) {
+            dependencies[pkg] = version;
+            json[dependenciesType] = sortObjectByKeys(dependencies);
+        }
+        tree.overwrite('package.json', JSON.stringify(json, null, 2));
+    }
+    return tree;
+}
+/**
+ * Gets the version of the specified package by looking at the package.json in the given tree
+ */
+function getPackageVersionFromPackageJson(tree, name, includeDevDependencies = false) {
+    if (!tree.exists('package.json')) {
+        return null;
+    }
+    const packageJson = JSON.parse(tree.read('package.json').toString('utf8'));
+    if (packageJson.dependencies && packageJson.dependencies[name]) {
+        return packageJson.dependencies[name];
+    }
+    if (includeDevDependencies && packageJson.devDependencies && packageJson.devDependencies[name]) {
+        return packageJson.devDependencies[name];
+    }
+    return null;
+}
+async function setupOptions(project, tree) {
+    if (project) {
+        const workspace = await utility.readWorkspace(tree);
+        const projectWorkspace = workspace.projects.get(project);
+        if (!projectWorkspace) {
+            throw new schematics.SchematicsException(noProject(project));
+        }
+        return projectWorkspace;
+    }
+}
+
+exports.addPackageToPackageJson = addPackageToPackageJson;
+exports.getPackageVersionFromPackageJson = getPackageVersionFromPackageJson;
+exports.setupOptions = setupOptions;

package/scrollbar/scrollbar-tokens.scss

@@ -1,17 +1,19 @@
+/* stylelint-disable no-unknown-custom-properties */
+
 .kbq-scrollbar-component {
-    --kbq-scrollbar-size-track-dimension: 16px;
-    --kbq-scrollbar-size-track-padding-vertical: 2px;
-    --kbq-scrollbar-size-track-padding-horizontal: 2px;
-    --kbq-scrollbar-size-thumb-width: 8px;
-    --kbq-scrollbar-size-thumb-min-size: 20px;
-    --kbq-scrollbar-size-thumb-border-radius: 8px;
+    --kbq-scrollbar-size-track-dimension: var(--kbq-size-l);
+    --kbq-scrollbar-size-track-padding-vertical: var(--kbq-size-3xs);
+    --kbq-scrollbar-size-track-padding-horizontal: var(--kbq-size-3xs);
+    --kbq-scrollbar-size-thumb-width: var(--kbq-size-s);
+    --kbq-scrollbar-size-thumb-min-size: var(--kbq-size-xl);
+    --kbq-scrollbar-size-thumb-border-radius: var(--kbq-size-s);
 }
 
 :where(.kbq-light, .theme-light, .kbq-theme-light) {
-    --kbq-scrollbar-thumb-default-background: hsla(229, 15%, 60%, 100%);
-    --kbq-scrollbar-thumb-hover-background: hsla(229, 15%, 50%, 100%);
-    --kbq-scrollbar-thumb-active-background: hsla(229, 15%, 40%, 100%);
-    --kbq-scrollbar-thumb-disabled-background: hsla(229, 15%, 15%, 32%);
+    --kbq-scrollbar-thumb-default-background: var(--kbq-icon-contrast-fade);
+    --kbq-scrollbar-thumb-hover-background: var(--kbq-states-icon-contrast-fade-hover);
+    --kbq-scrollbar-thumb-active-background: var(--kbq-states-icon-contrast-fade-active);
+    --kbq-scrollbar-thumb-disabled-background: var(--kbq-states-icon-disabled);
     --kbq-scrollbar-track-default-border: transparent;
     --kbq-scrollbar-track-default-background: transparent;
     --kbq-scrollbar-track-hover-border: transparent;
@@ -21,10 +23,10 @@
 }
 
 :where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
-    --kbq-scrollbar-thumb-default-background: hsla(229, 15%, 45%, 100%);
-    --kbq-scrollbar-thumb-hover-background: hsla(229, 15%, 50%, 100%);
-    --kbq-scrollbar-thumb-active-background: hsla(229, 15%, 40%, 100%);
-    --kbq-scrollbar-thumb-disabled-background: hsla(229, 15%, 30%, 100%);
+    --kbq-scrollbar-thumb-default-background: var(--kbq-icon-contrast-fade);
+    --kbq-scrollbar-thumb-hover-background: var(--kbq-states-icon-contrast-fade-hover);
+    --kbq-scrollbar-thumb-active-background: var(--kbq-states-icon-contrast-fade-active);
+    --kbq-scrollbar-thumb-disabled-background: var(--kbq-states-icon-disabled);
     --kbq-scrollbar-track-default-border: transparent;
     --kbq-scrollbar-track-default-background: transparent;
     --kbq-scrollbar-track-hover-border: transparent;

package/scrollbar/scrollbar.component.d.ts

@@ -1,6 +1,9 @@
 import { AfterViewInit, ElementRef, EventEmitter, NgZone, OnDestroy } from '@angular/core';
 import { KbqScrollbarEvents, KbqScrollbarOptions, KbqScrollbarTarget } from './scrollbar.types';
 import * as i0 from "@angular/core";
+/**
+ * The component-wrapper for `overlayscrollbars` library.
+ */
 export declare class KbqScrollbar implements AfterViewInit, OnDestroy {
     private ngZone;
     private targetElement;
@@ -29,5 +32,5 @@ export declare class KbqScrollbar implements AfterViewInit, OnDestroy {
     mergeEvents(): KbqScrollbarEvents;
     private dispatchEventIfHasObservers;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqScrollbar, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqScrollbar, "kbq-scrollbar, [kbq-scrollbar]", ["kbqScrollbar"], { "initializationTarget": { "alias": "initializationTarget"; "required": false; }; "options": { "alias": "options"; "required": false; }; "events": { "alias": "events"; "required": false; }; "defer": { "alias": "defer"; "required": false; }; }, { "onInitialize": "onInitialize"; "onUpdate": "onUpdate"; "onDestroy": "onDestroy"; "onScroll": "onScroll"; }, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqScrollbar, "kbq-scrollbar, [kbq-scrollbar]", ["kbqScrollbar"], { "initializationTarget": { "alias": "initializationTarget"; "required": false; }; "options": { "alias": "options"; "required": false; }; "events": { "alias": "events"; "required": false; }; "defer": { "alias": "defer"; "required": false; }; }, { "onInitialize": "onInitialize"; "onUpdate": "onUpdate"; "onDestroy": "onDestroy"; "onScroll": "onScroll"; }, never, ["*"], true, never>;
 }

package/scrollbar/scrollbar.directive.d.ts

@@ -2,6 +2,9 @@ import { NgZone, OnDestroy } from '@angular/core';
 import { OverlayScrollbars } from 'overlayscrollbars';
 import { KbqScrollbarEvents, KbqScrollbarOptions, KbqScrollbarTarget } from './scrollbar.types';
 import * as i0 from "@angular/core";
+/**
+ * A directive for adding `overlayscrollbars` to an element.
+ */
 export declare class KbqScrollbarDirective implements OnDestroy {
     private ngZone;
     private scrollbarConfig?;
@@ -17,32 +20,9 @@ export declare class KbqScrollbarDirective implements OnDestroy {
     /** Whether to defer the initialization to a point in time when the browser is idle. (or to the next frame if `window.requestIdleCallback` is not supported) */
     defer?: boolean | IdleRequestOptions;
     scrollbarInstance?: OverlayScrollbars;
-    constructor(ngZone: NgZone, scrollbarConfig?: {
-        paddingAbsolute?: boolean | undefined;
-        showNativeOverlaidScrollbars?: boolean | undefined;
-        update?: {
-            elementEvents?: [elementSelector: string, eventNames: string][] | null | undefined;
-            debounce?: number | [timeout: number, maxWait: number] | null | undefined;
-            attributes?: string[] | null | undefined;
-            ignoreMutation?: ((mutation: MutationRecord) => any) | null | undefined;
-        } | undefined;
-        overflow?: {
-            x?: import("overlayscrollbars").OverflowBehavior | undefined;
-            y?: import("overlayscrollbars").OverflowBehavior | undefined;
-        } | undefined;
-        scrollbars?: {
-            theme?: string | null | undefined;
-            visibility?: import("overlayscrollbars").ScrollbarsVisibilityBehavior | undefined;
-            autoHide?: import("overlayscrollbars").ScrollbarsAutoHideBehavior | undefined;
-            autoHideDelay?: number | undefined;
-            autoHideSuspend?: boolean | undefined;
-            dragScroll?: boolean | undefined;
-            clickScroll?: boolean | undefined;
-            pointers?: string[] | null | undefined;
-        } | undefined;
-    } | undefined);
+    constructor(ngZone: NgZone, scrollbarConfig?: KbqScrollbarOptions | undefined);
     initialize(target: KbqScrollbarTarget): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqScrollbarDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqScrollbarDirective, "[kbqScrollbar]", never, { "options": { "alias": "options"; "required": false; }; "events": { "alias": "events"; "required": false; }; "defer": { "alias": "defer"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqScrollbarDirective, "[kbqScrollbar]", never, { "options": { "alias": "options"; "required": false; }; "events": { "alias": "events"; "required": false; }; "defer": { "alias": "defer"; "required": false; }; }, {}, never, never, true, never>;
 }

package/scrollbar/scrollbar.module.d.ts

@@ -3,6 +3,6 @@ import * as i1 from "./scrollbar.component";
 import * as i2 from "./scrollbar.directive";
 export declare class KbqScrollbarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqScrollbarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqScrollbarModule, [typeof i1.KbqScrollbar, typeof i2.KbqScrollbarDirective], never, [typeof i1.KbqScrollbar, typeof i2.KbqScrollbarDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqScrollbarModule, never, [typeof i1.KbqScrollbar, typeof i2.KbqScrollbarDirective], [typeof i1.KbqScrollbar, typeof i2.KbqScrollbarDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqScrollbarModule>;
 }

package/select/select-tokens.scss

@@ -1,59 +1,42 @@
+/* stylelint-disable no-unknown-custom-properties */
+
 .kbq-select,
 .kbq-select__panel {
-    --kbq-size-xxs: 4px;
-    --kbq-size-m: 12px;
-    --kbq-option-size-horizontal-padding: 12px;
-    --kbq-option-size-height: 32px;
+    --kbq-option-size-horizontal-padding: var(--kbq-size-m);
+    --kbq-option-size-height: var(--kbq-size-3xl);
     --kbq-option-size-border-width: 2px;
-    --kbq-select-size-single-padding-left: 12px;
-    --kbq-select-size-single-padding-right: 4px;
-    --kbq-select-size-single-padding-vertical: 6px;
-    --kbq-select-size-single-content-gap: 4px;
-    --kbq-select-size-multiple-padding-left: 4px;
-    --kbq-select-size-multiple-padding-right: 4px;
-    --kbq-select-size-multiple-padding-vertical: 4px;
-    --kbq-select-size-multiple-content-gap: 4px;
-    --kbq-select-font-default-font-size: 14px;
-    --kbq-select-font-default-line-height: 20px;
-    --kbq-select-font-default-letter-spacing: -0.006em;
-    --kbq-select-font-default-font-weight: normal;
-    --kbq-select-font-default-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial,
-        sans-serif;
-    --kbq-select-font-default-text-transform: null;
-    --kbq-select-font-default-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
-    --kbq-select-panel-size-border-radius: 8px;
+    --kbq-select-size-single-padding-left: var(--kbq-size-m);
+    --kbq-select-size-single-padding-right: var(--kbq-size-xxs);
+    --kbq-select-size-single-padding-vertical: var(--kbq-size-xs);
+    --kbq-select-size-single-content-gap: var(--kbq-size-xxs);
+    --kbq-select-size-multiple-padding-left: var(--kbq-size-xxs);
+    --kbq-select-size-multiple-padding-right: var(--kbq-size-xxs);
+    --kbq-select-size-multiple-padding-vertical: var(--kbq-size-xxs);
+    --kbq-select-size-multiple-content-gap: var(--kbq-size-xxs);
+    --kbq-select-font-default-font-size: var(--kbq-typography-text-normal-font-size);
+    --kbq-select-font-default-line-height: var(--kbq-typography-text-normal-line-height);
+    --kbq-select-font-default-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
+    --kbq-select-font-default-font-weight: var(--kbq-typography-text-normal-font-weight);
+    --kbq-select-font-default-font-family: var(--kbq-typography-text-normal-font-family);
+    --kbq-select-font-default-text-transform: var(--kbq-typography-text-normal-text-transform);
+    --kbq-select-font-default-font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
+    --kbq-select-panel-size-border-radius: var(--kbq-size-s);
     --kbq-select-panel-size-max-height: 256px;
-    --kbq-select-panel-font-default-font-size: 14px;
-    --kbq-select-panel-font-default-line-height: 20px;
-    --kbq-select-panel-font-default-letter-spacing: -0.006em;
-    --kbq-select-panel-font-default-font-weight: normal;
-    --kbq-select-panel-font-default-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
-        Arial, sans-serif;
-    --kbq-select-panel-font-default-text-transform: null;
-    --kbq-select-panel-font-default-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-select-panel-font-default-font-size: var(--kbq-typography-text-normal-font-size);
+    --kbq-select-panel-font-default-line-height: var(--kbq-typography-text-normal-line-height);
+    --kbq-select-panel-font-default-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
+    --kbq-select-panel-font-default-font-weight: var(--kbq-typography-text-normal-font-weight);
+    --kbq-select-panel-font-default-font-family: var(--kbq-typography-text-normal-font-family);
+    --kbq-select-panel-font-default-text-transform: var(--kbq-typography-text-normal-text-transform);
+    --kbq-select-panel-font-default-font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
 }
 
 :where(.kbq-light, .theme-light, .kbq-theme-light) {
-    --kbq-error-default: hsla(7, 97%, 50%, 100%);
-    --kbq-foreground-contrast: hsla(229, 15%, 15%, 100%);
-    --kbq-foreground-contrast-secondary: hsla(229, 15%, 50%, 100%);
-    --kbq-foreground-contrast-tertiary: hsla(229, 15%, 60%, 100%);
-    --kbq-foreground-text-less-contrast: hsla(229, 15%, 50%, 100%);
-    --kbq-foreground-text-disabled: hsla(229, 15%, 70%, 100%);
-    --kbq-divider-color: hsla(229, 15%, 6%, 12%);
-    --kbq-select-panel-dropdown-background: hsla(229, 15%, 100%, 100%);
-    --kbq-select-panel-dropdown-shadow: 0 0 0 1px hsla(229, 15%, 6%, 3%), 0 2px 8px hsla(229, 15%, 6%, 6%),
-        0 3px 8px hsla(229, 15%, 6%, 12%);
+    --kbq-select-panel-dropdown-background: var(--kbq-background-card);
+    --kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup);
 }
 
 :where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
-    --kbq-error-default: hsla(7, 97%, 50%, 100%);
-    --kbq-foreground-contrast: hsla(229, 15%, 80%, 100%);
-    --kbq-foreground-contrast-secondary: hsla(229, 15%, 60%, 100%);
-    --kbq-foreground-contrast-tertiary: hsla(229, 15%, 45%, 100%);
-    --kbq-foreground-text-less-contrast: hsla(229, 15%, 50%, 100%);
-    --kbq-foreground-text-disabled: hsla(229, 15%, 70%, 100%);
-    --kbq-divider-color: hsla(229, 15%, 22%, 100%);
-    --kbq-select-panel-dropdown-background: hsla(229, 15%, 15%, 100%);
-    --kbq-select-panel-dropdown-shadow: 0 0 0 1px hsla(229, 100%, 85%, 15%);
+    --kbq-select-panel-dropdown-background: var(--kbq-background-card);
+    --kbq-select-panel-dropdown-shadow: var(--kbq-shadow-popup);
 }

package/sidepanel/sidepanel-tokens.scss

@@ -1,48 +1,47 @@
+/* stylelint-disable no-unknown-custom-properties */
+
 .kbq-sidepanel-container {
     --kbq-sidepanel-size-small-width: 400px;
     --kbq-sidepanel-size-medium-width: 640px;
     --kbq-sidepanel-size-large-width: 960px;
-    --kbq-sidepanel-size-header-padding-vertical: 16px;
-    --kbq-sidepanel-size-header-padding-left: 32px;
-    --kbq-sidepanel-size-header-padding-right: 12px;
-    --kbq-sidepanel-size-close-button-margin-left: 8px;
-    --kbq-sidepanel-size-content-padding-horizontal: 32px;
-    --kbq-sidepanel-size-content-padding-bottom: 24px;
-    --kbq-sidepanel-size-footer-padding-top: 8px;
-    --kbq-sidepanel-size-footer-padding-bottom: 32px;
-    --kbq-sidepanel-size-footer-padding-horizontal: 32px;
-    --kbq-sidepanel-size-footer-content-gap-horizontal: 16px;
-    --kbq-sidepanel-font-header-font-size: 20px;
-    --kbq-sidepanel-font-header-line-height: 28px;
-    --kbq-sidepanel-font-header-letter-spacing: normal;
-    --kbq-sidepanel-font-header-font-weight: 700;
-    --kbq-sidepanel-font-header-font-family: 'TT-Positive', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI',
-        'Helvetica Neue', Arial, sans-serif;
-    --kbq-sidepanel-font-header-text-transform: null;
-    --kbq-sidepanel-font-header-font-feature-settings: 'calt', 'kern', 'liga';
-    --kbq-sidepanel-font-content-font-size: 14px;
-    --kbq-sidepanel-font-content-line-height: 20px;
-    --kbq-sidepanel-font-content-letter-spacing: -0.006em;
-    --kbq-sidepanel-font-content-font-weight: normal;
-    --kbq-sidepanel-font-content-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
-        Arial, sans-serif;
-    --kbq-sidepanel-font-content-text-transform: null;
-    --kbq-sidepanel-font-content-font-feature-settings: 'calt', 'kern', 'liga', 'ss01', 'ss04';
+    --kbq-sidepanel-size-header-padding-vertical: var(--kbq-size-l);
+    --kbq-sidepanel-size-header-padding-left: var(--kbq-size-3xl);
+    --kbq-sidepanel-size-header-padding-right: var(--kbq-size-m);
+    --kbq-sidepanel-size-close-button-margin-left: var(--kbq-size-s);
+    --kbq-sidepanel-size-content-padding-horizontal: var(--kbq-size-3xl);
+    --kbq-sidepanel-size-content-padding-bottom: var(--kbq-size-xxl);
+    --kbq-sidepanel-size-footer-padding-top: var(--kbq-size-s);
+    --kbq-sidepanel-size-footer-padding-bottom: var(--kbq-size-3xl);
+    --kbq-sidepanel-size-footer-padding-horizontal: var(--kbq-size-3xl);
+    --kbq-sidepanel-size-footer-content-gap-horizontal: var(--kbq-size-l);
+    --kbq-sidepanel-font-header-font-size: var(--kbq-typography-title-font-size);
+    --kbq-sidepanel-font-header-line-height: var(--kbq-typography-title-line-height);
+    --kbq-sidepanel-font-header-letter-spacing: var(--kbq-typography-title-letter-spacing);
+    --kbq-sidepanel-font-header-font-weight: var(--kbq-typography-title-font-weight);
+    --kbq-sidepanel-font-header-font-family: var(--kbq-typography-title-font-family);
+    --kbq-sidepanel-font-header-text-transform: var(--kbq-typography-title-text-transform);
+    --kbq-sidepanel-font-header-font-feature-settings: var(--kbq-typography-title-font-feature-settings);
+    --kbq-sidepanel-font-content-font-size: var(--kbq-typography-text-normal-font-size);
+    --kbq-sidepanel-font-content-line-height: var(--kbq-typography-text-normal-line-height);
+    --kbq-sidepanel-font-content-letter-spacing: var(--kbq-typography-text-normal-letter-spacing);
+    --kbq-sidepanel-font-content-font-weight: var(--kbq-typography-text-normal-font-weight);
+    --kbq-sidepanel-font-content-font-family: var(--kbq-typography-text-normal-font-family);
+    --kbq-sidepanel-font-content-text-transform: var(--kbq-typography-text-normal-text-transform);
+    --kbq-sidepanel-font-content-font-feature-settings: var(--kbq-typography-text-normal-font-feature-settings);
 }
 
 :where(.kbq-light, .theme-light, .kbq-theme-light) {
-    --kbq-sidepanel-overlay-background: hsla(229, 15%, 20%, 32%);
-    --kbq-sidepanel-container-background: hsla(229, 15%, 100%, 100%);
-    --kbq-sidepanel-container-box-shadow: 0 0 0 1px hsla(229, 15%, 6%, 3%), 0 3px 16px hsla(229, 15%, 6%, 6%),
-        0 4px 32px hsla(229, 15%, 6%, 12%);
-    --kbq-sidepanel-header-text-color: hsla(229, 15%, 15%, 100%);
-    --kbq-sidepanel-content-text-color: hsla(229, 15%, 15%, 100%);
+    --kbq-sidepanel-overlay-background: var(--kbq-background-overlay);
+    --kbq-sidepanel-container-background: var(--kbq-background-card);
+    --kbq-sidepanel-container-box-shadow: var(--kbq-shadow-overlay);
+    --kbq-sidepanel-header-text-color: var(--kbq-foreground-contrast);
+    --kbq-sidepanel-content-text-color: var(--kbq-foreground-contrast);
 }
 
 :where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
-    --kbq-sidepanel-overlay-background: hsla(229, 15%, 6%, 64%);
-    --kbq-sidepanel-container-background: hsla(229, 15%, 15%, 100%);
-    --kbq-sidepanel-container-box-shadow: 0 0 0 1px hsla(229, 100%, 85%, 15%);
-    --kbq-sidepanel-header-text-color: hsla(229, 15%, 80%, 100%);
-    --kbq-sidepanel-content-text-color: hsla(229, 15%, 80%, 100%);
+    --kbq-sidepanel-overlay-background: var(--kbq-background-overlay);
+    --kbq-sidepanel-container-background: var(--kbq-background-card);
+    --kbq-sidepanel-container-box-shadow: var(--kbq-shadow-overlay);
+    --kbq-sidepanel-header-text-color: var(--kbq-foreground-contrast);
+    --kbq-sidepanel-content-text-color: var(--kbq-foreground-contrast);
 }

package/splitter/splitter-tokens.scss

@@ -1,7 +1 @@
-:where(.kbq-light, .theme-light, .kbq-theme-light) {
-    --kbq-background-background-disabled: hsla(229, 15%, 95%, 100%);
-}
-
-:where(.kbq-dark, .theme-dark, .kbq-theme-dark) {
-    --kbq-background-background-disabled: hsla(229, 15%, 95%, 100%);
-}
+/* stylelint-disable no-unknown-custom-properties */