@rt-tools/ui-kit-v2 0.26.0 → 0.28.0

package/fesm2022/rt-tools-ui-kit-v2-service-logo.mjs

@@ -0,0 +1,154 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input } from "@angular/core";
+import { BlockDirective, ElemDirective } from "@rt-tools/core";
+import { RtIconComponent } from "@rt-tools/ui-kit-v2/icon";
+const BEM_BLOCK = "rt-service-logo";
+const ICON_SIZES = Object.freeze({
+	sm: "md",
+	md: "xl",
+	lg: "3xl"
+});
+function toMark(item) {
+	return "src" in item ? {
+		label: item.label,
+		src: item.src,
+		icon: null
+	} : {
+		label: item.label,
+		src: null,
+		icon: item.icon
+	};
+}
+var RtServiceLogoComponent = class RtServiceLogoComponent {
+	constructor() {
+		this.marks = computed(() => this.logos().map(toMark), ...ngDevMode ? [{ debugName: "marks" }] : /* istanbul ignore next */ []);
+		this.iconSize = computed(() => ICON_SIZES[this.size()], ...ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []);
+		this.logos = input.required(...ngDevMode ? [{ debugName: "logos" }] : /* istanbul ignore next */ []);
+		this.size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.2",
+			ngImport: i0,
+			type: RtServiceLogoComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.2",
+			type: RtServiceLogoComponent,
+			isStandalone: true,
+			selector: "rt-service-logo",
+			inputs: {
+				logos: {
+					classPropertyName: "logos",
+					publicName: "logos",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				size: {
+					classPropertyName: "size",
+					publicName: "size",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			host: {
+				attributes: { "role": "list" },
+				properties: {
+					"class.rt-service-logo--size-sm": "size() === 'sm'",
+					"class.rt-service-logo--size-lg": "size() === 'lg'"
+				},
+				classAttribute: "rt-service-logo"
+			},
+			ngImport: i0,
+			template: "<ng-container rtBlock=\"rt-service-logo\">\n    @for (mark of marks(); track $index) {\n        <span rtElem=\"plate\" role=\"listitem\" qa-dataid=\"service-logo-plate\" [attr.data-label]=\"mark.label\">\n            @if (mark.src !== null) {\n                <img rtElem=\"image\" qa-dataid=\"service-logo-image\" [src]=\"mark.src\" [alt]=\"mark.label\" />\n            } @else {\n                <span rtElem=\"icon\" role=\"img\" qa-dataid=\"service-logo-icon\" [attr.aria-label]=\"mark.label\">\n                    <rt-icon [name]=\"mark.icon\" [size]=\"iconSize()\" />\n                </span>\n            }\n        </span>\n    }\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-service-logo{--rt-service-logo-size: var(--rt-size-16);--rt-service-logo-mark-height: var(--rt-size-8);--rt-service-logo-step: var(--rt-size-10);--rt-service-logo-shadow: var(--rt-shadow-service-logo-md);--rt-service-logo-radius: var(--rt-radius-full);--rt-service-logo-bg: var(--rt-color-service-logo-bg);--rt-service-logo-color: var(--rt-color-service-logo-mark);display:inline-flex;align-items:center;vertical-align:middle}.rt-service-logo--size-sm{--rt-service-logo-size: var(--rt-size-10);--rt-service-logo-mark-height: var(--rt-size-5);--rt-service-logo-step: var(--rt-size-6);--rt-service-logo-shadow: var(--rt-shadow-service-logo-sm)}.rt-service-logo--size-lg{--rt-service-logo-size: var(--rt-size-24);--rt-service-logo-mark-height: var(--rt-size-12);--rt-service-logo-step: calc(var(--rt-size-12) + var(--rt-size-3));--rt-service-logo-shadow: var(--rt-shadow-service-logo-lg)}.rt-service-logo__plate{position:relative;display:inline-flex;width:var(--rt-service-logo-size);height:var(--rt-service-logo-size);flex:none;align-items:center;justify-content:center;border-radius:var(--rt-service-logo-radius);background:var(--rt-service-logo-bg);box-shadow:var(--rt-service-logo-shadow);color:var(--rt-service-logo-color)}.rt-service-logo__plate+.rt-service-logo__plate{margin-inline-start:calc(var(--rt-service-logo-step) - var(--rt-service-logo-size))}.rt-service-logo__image{display:block;width:calc(var(--rt-service-logo-mark-height) * 1.375);height:var(--rt-service-logo-mark-height);object-fit:contain}.rt-service-logo__icon{display:inline-flex}}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: BlockDirective,
+					selector: "[rtBlock]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "directive",
+					type: ElemDirective,
+					selector: "[rtElem]",
+					inputs: ["rtMod"]
+				},
+				{
+					kind: "component",
+					type: RtIconComponent,
+					selector: "rt-icon",
+					inputs: [
+						"name",
+						"glyph",
+						"glyphStrategy",
+						"size",
+						"color",
+						"fill",
+						"spin",
+						"rotate"
+					]
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush,
+			encapsulation: i0.ViewEncapsulation.None
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: RtServiceLogoComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "rt-service-logo",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None,
+			imports: [
+				BlockDirective,
+				ElemDirective,
+				RtIconComponent
+			],
+			host: {
+				class: BEM_BLOCK,
+				role: "list",
+				"[class.rt-service-logo--size-sm]": "size() === 'sm'",
+				"[class.rt-service-logo--size-lg]": "size() === 'lg'"
+			},
+			template: "<ng-container rtBlock=\"rt-service-logo\">\n    @for (mark of marks(); track $index) {\n        <span rtElem=\"plate\" role=\"listitem\" qa-dataid=\"service-logo-plate\" [attr.data-label]=\"mark.label\">\n            @if (mark.src !== null) {\n                <img rtElem=\"image\" qa-dataid=\"service-logo-image\" [src]=\"mark.src\" [alt]=\"mark.label\" />\n            } @else {\n                <span rtElem=\"icon\" role=\"img\" qa-dataid=\"service-logo-icon\" [attr.aria-label]=\"mark.label\">\n                    <rt-icon [name]=\"mark.icon\" [size]=\"iconSize()\" />\n                </span>\n            }\n        </span>\n    }\n</ng-container>\n",
+			styles: ["@charset \"UTF-8\";@layer rt-kit.components{.rt-service-logo{--rt-service-logo-size: var(--rt-size-16);--rt-service-logo-mark-height: var(--rt-size-8);--rt-service-logo-step: var(--rt-size-10);--rt-service-logo-shadow: var(--rt-shadow-service-logo-md);--rt-service-logo-radius: var(--rt-radius-full);--rt-service-logo-bg: var(--rt-color-service-logo-bg);--rt-service-logo-color: var(--rt-color-service-logo-mark);display:inline-flex;align-items:center;vertical-align:middle}.rt-service-logo--size-sm{--rt-service-logo-size: var(--rt-size-10);--rt-service-logo-mark-height: var(--rt-size-5);--rt-service-logo-step: var(--rt-size-6);--rt-service-logo-shadow: var(--rt-shadow-service-logo-sm)}.rt-service-logo--size-lg{--rt-service-logo-size: var(--rt-size-24);--rt-service-logo-mark-height: var(--rt-size-12);--rt-service-logo-step: calc(var(--rt-size-12) + var(--rt-size-3));--rt-service-logo-shadow: var(--rt-shadow-service-logo-lg)}.rt-service-logo__plate{position:relative;display:inline-flex;width:var(--rt-service-logo-size);height:var(--rt-service-logo-size);flex:none;align-items:center;justify-content:center;border-radius:var(--rt-service-logo-radius);background:var(--rt-service-logo-bg);box-shadow:var(--rt-service-logo-shadow);color:var(--rt-service-logo-color)}.rt-service-logo__plate+.rt-service-logo__plate{margin-inline-start:calc(var(--rt-service-logo-step) - var(--rt-service-logo-size))}.rt-service-logo__image{display:block;width:calc(var(--rt-service-logo-mark-height) * 1.375);height:var(--rt-service-logo-mark-height);object-fit:contain}.rt-service-logo__icon{display:inline-flex}}\n"]
+		}]
+	}],
+	propDecorators: {
+		logos: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "logos",
+				required: true
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}]
+	}
+});
+export { RtServiceLogoComponent };
+
+//# sourceMappingURL=rt-tools-ui-kit-v2-service-logo.mjs.map

package/fesm2022/rt-tools-ui-kit-v2-service-logo.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rt-tools-ui-kit-v2-service-logo.mjs","names":[],"sources":["../../../projects/ui-kit-v2/src/lib/components/service-logo/rt-service-logo.component.ts","../../../projects/ui-kit-v2/src/lib/components/service-logo/rt-service-logo.component.html"],"sourcesContent":["import { ChangeDetectionStrategy, Component, computed, input, InputSignal, Signal, ViewEncapsulation } from '@angular/core';\n\nimport { BlockDirective, ElemDirective } from '@rt-tools/core';\n\nimport { IRtIcon } from '@rt-tools/ui-kit-v2/core';\nimport { RtIconComponent } from '@rt-tools/ui-kit-v2/icon';\n\nimport { IRtServiceLogo } from './rt-service-logo.model';\n\nconst BEM_BLOCK: string = 'rt-service-logo';\n\n/** Высота знака — ступенью значка кита: 20 / 32 / 48, те же числа, что у знака-картинки. */\nconst ICON_SIZES: Readonly<Record<IRtServiceLogo.Size, IRtIcon.Size>> = Object.freeze({\n    sm: 'md',\n    md: 'xl',\n    lg: '3xl',\n});\n\n/** Знак, готовый к отрисовке: картинка или значок, у каждого своё имя для диктора. */\ninterface IRtServiceLogoMark {\n    readonly label: string;\n    readonly src: string | null;\n    readonly icon: IRtIcon.Name | null;\n}\n\nfunction toMark(item: IRtServiceLogo.Item): IRtServiceLogoMark {\n    return 'src' in item ? { label: item.label, src: item.src, icon: null } : { label: item.label, src: null, icon: item.icon };\n}\n\n/**\n * Знак внешней службы в светлом круге с мягкой тенью. Несколько знаков ложатся внахлёст шагом\n * атома, и каждый следующий лежит поверх предыдущего. Знаки чужих компаний приложение передаёт\n * адресом картинки; знак без компании — значок кита в том же круге.\n */\n@Component({\n    selector: 'rt-service-logo',\n    templateUrl: './rt-service-logo.component.html',\n    styleUrl: './rt-service-logo.component.scss',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [\n        // standalone components / directives\n        BlockDirective,\n        ElemDirective,\n        RtIconComponent,\n    ],\n    host: {\n        class: BEM_BLOCK,\n        role: 'list',\n        '[class.rt-service-logo--size-sm]': \"size() === 'sm'\",\n        '[class.rt-service-logo--size-lg]': \"size() === 'lg'\",\n    },\n})\nexport class RtServiceLogoComponent {\n    protected readonly marks: Signal<readonly IRtServiceLogoMark[]> = computed((): readonly IRtServiceLogoMark[] =>\n        this.logos().map(toMark)\n    );\n\n    protected readonly iconSize: Signal<IRtIcon.Size> = computed((): IRtIcon.Size => ICON_SIZES[this.size()]);\n\n    /** Знаки ряда в порядке отрисовки: следующий ложится поверх предыдущего. */\n    public readonly logos: InputSignal<readonly IRtServiceLogo.Item[]> = input.required<readonly IRtServiceLogo.Item[]>();\n\n    /** Размер круга и знака. */\n    public readonly size: InputSignal<IRtServiceLogo.Size> = input<IRtServiceLogo.Size>('md');\n}\n","<ng-container rtBlock=\"rt-service-logo\">\n    @for (mark of marks(); track $index) {\n        <span rtElem=\"plate\" role=\"listitem\" qa-dataid=\"service-logo-plate\" [attr.data-label]=\"mark.label\">\n            @if (mark.src !== null) {\n                <img rtElem=\"image\" qa-dataid=\"service-logo-image\" [src]=\"mark.src\" [alt]=\"mark.label\" />\n            } @else {\n                <span rtElem=\"icon\" role=\"img\" qa-dataid=\"service-logo-icon\" [attr.aria-label]=\"mark.label\">\n                    <rt-icon [name]=\"mark.icon\" [size]=\"iconSize()\" />\n                </span>\n            }\n        </span>\n    }\n</ng-container>\n"],"mappings":";;;;AASA,MAAM,YAAoB;AAG1B,MAAM,aAAkE,OAAO,OAAO;CAClF,IAAI;CACJ,IAAI;CACJ,IAAI;AACP,CAAA;AASD,SAAS,OAAO,MAAyB;CACrC,OAAO,SAAS,OAAO;EAAE,OAAO,KAAK;EAAO,KAAK,KAAK;EAAK,MAAM;CAAI,IAAK;EAAE,OAAO,KAAK;EAAO,KAAK;EAAM,MAAM,KAAK;CAAI;AAC7H;AA0BA,IAAa,yBAAb,MAAa,uBAAsB;CAnBnC,cAAA;EAoBuB,KAAA,QAA+C,eAC9D,KAAK,MAAK,CAAE,CAAC,IAAI,MAAM,GAC1B,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;EAEkB,KAAA,WAAiC,eAA6B,WAAW,KAAK,KAAI,IAAI,GAAA,YAAA,CAAA,EAAA,WAAA,WAAA,CAAA,+BAAA,CAAA,CAAA;EAGzF,KAAA,QAAqD,MAAM,SAA0C,GAAA,YAAA,CAAA,EAAA,WAAA,QAAA,CAAA,+BAAA,CAAA,CAAA;EAGrG,KAAA,OAAyC,MAA2B,MAAK,GAAA,YAAA,CAAA,EAAA,WAAA,OAAA,CAAA,+BAAA,CAAA,CAAA;CAC5F;CAZY;EAAA,KAAA,OAAA,GAAA,mBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,UAAA;GAAA,MAAA;GAAsB,MAAA,CAAA;GAAA,QAAA,GAAA,gBAAA;EAAA,CAAA;CAAA;CAAtB;EAAA,KAAA,OAAA,GAAA,qBAAA;GAAA,YAAA;GAAA,SAAA;GAAA,MAAA;GAAsB,cAAA;GAAA,UAAA;GAAA,QAAA;IAAA,OAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;IAAA,MAAA;KAAA,mBAAA;KAAA,YAAA;KAAA,UAAA;KAAA,YAAA;KAAA,mBAAA;IAAA;GAAA;GAAA,MAAA;IAAA,YAAA,EAAA,QAAA,OAAA;IAAA,YAAA;KAAA,kCAAA;KAAA,kCAAA;IAAA;IAAA,gBAAA;GAAA;GAAA,UAAA;GAAA,UCrDnC;GAaA,QAAA,CAAA,ukDAAA;GAAA,cAAA;IAAA;KAAA,MAAA;KAAA,MD6BQ;KAAc,UAAA;KAAA,QAAA,CAAA,OAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MACd;KAAa,UAAA;KAAA,QAAA,CAAA,OAAA;IAAA;IAAA;KAAA,MAAA;KAAA,MACb;KAAe,UAAA;KAAA,QAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;MAAA;KAAA;IAAA;GAAA;GAAA,iBAAA,GAAA,wBAAA;GAAA,eAAA,GAAA,kBAAA;EAAA,CAAA;CAAA;;AASV,GAAA,yBAAA;CAAA,YAAA;CAAA,SAAA;CAAA,UAAA;CAAA,MAAA;CAAsB,YAAA,CAAA;EAnBlC,MAAA;EACa,MAAA,CAAA;GAAA,UAAA;GAAiB,iBAGV,wBAAwB;GAAM,eAChC,kBAAkB;GAAI,SAC5B;IAEL;IACA;IACA;GACH;GAAA,MACK;IACF,OAAO;IACP,MAAM;IACN,oCAAoC;IACpC,oCAAoC;GACvC;GAAA,UAAA;GAAA,QAAA,CAAA,ukDAAA;EAAA,CAAA"}

package/fesm2022/rt-tools-ui-kit-v2.mjs

@@ -72,6 +72,7 @@ export * from "@rt-tools/ui-kit-v2/radius";
 export * from "@rt-tools/ui-kit-v2/ripple";
 export * from "@rt-tools/ui-kit-v2/scroll-area";
 export * from "@rt-tools/ui-kit-v2/section-nav";
+export * from "@rt-tools/ui-kit-v2/service-logo";
 export * from "@rt-tools/ui-kit-v2/select";
 export * from "@rt-tools/ui-kit-v2/side-menu";
 export * from "@rt-tools/ui-kit-v2/skeleton-wrapper";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rt-tools/ui-kit-v2",
-  "version": "0.26.0",
+  "version": "0.28.0",
   "license": "Apache-2.0",
   "author": "Yauheni Krumin",
   "type": "module",
@@ -365,6 +365,10 @@
       "types": "./types/rt-tools-ui-kit-v2-select.d.ts",
       "default": "./fesm2022/rt-tools-ui-kit-v2-select.mjs"
     },
+    "./service-logo": {
+      "types": "./types/rt-tools-ui-kit-v2-service-logo.d.ts",
+      "default": "./fesm2022/rt-tools-ui-kit-v2-service-logo.mjs"
+    },
     "./side-menu": {
       "types": "./types/rt-tools-ui-kit-v2-side-menu.d.ts",
       "default": "./fesm2022/rt-tools-ui-kit-v2-side-menu.mjs"

package/src/lib/components/card/rt-card.component.scss

@@ -40,6 +40,16 @@
                 }
             }
 
+            /* Место над названием: знак, картинка или иконка. Пустое места не занимает. */
+            &__media {
+                display: flex;
+                margin-block-end: var(--rt-space-md);
+
+                &:empty {
+                    display: none;
+                }
+            }
+
             &__header {
                 margin-block-end: var(--rt-space-md);
 

package/src/lib/components/service-logo/CONTEXT.md

@@ -0,0 +1,40 @@
+# `rt-service-logo`
+
+```html
+<rt-service-logo size="sm" [logos]="[{ src: method.logoUrl, label: method.name }, { icon: 'wallet', label: 'Bank transfer' }]" />
+```
+
+| вход    | тип                              | умолчание  |
+| ------- | -------------------------------- | ---------- |
+| `logos` | `readonly IRtServiceLogo.Item[]` | обязателен |
+| `size`  | `'sm' \| 'md' \| 'lg'`           | `'md'`     |
+
+Выходов нет.
+
+Спек — `docs/specs/ui-kit-v2/service-logo/`; здесь только устройство папки.
+
+## Главное, что нужно знать
+
+**Числа — атома «Service Logo», и все они в свойствах блока.** Круг, высота знака, шаг внахлёст и
+тень объявлены на корне блока ступенями шкалы, модификатор размера их переназначает. Тени и
+заливка круга — свои имена слоя оформления: `--rt-shadow-service-logo-*` и
+`--rt-color-service-logo-bg`.
+
+**Следующий круг лежит поверх предыдущего порядком разметки.** Круги позиционированы без
+`z-index`, нахлёст — отрицательный отступ, равный разнице круга и шага.
+
+**Знак значком — `rt-icon` ступенью, равной высоте знака:** `sm` → `md` (20), `md` → `xl` (32),
+`lg` → `3xl` (48). `rt-icon` сам скрыт от диктора, поэтому имя несёт обёртка с `role="img"`.
+
+## Края
+
+- Знаков компаний в пакете нет: картинку даёт приложение адресом. В витрине стоят заглушки из
+  `stories/component/story-placeholder-marks.ts`.
+- Круг светлый и в тёмной теме: знаки нарисованы под светлый фон. Цвет значка задан кругом
+  (`--rt-color-service-logo-mark`), иначе в тёмной теме значок берёт светлый текст и пропадает.
+- Корень шаблона — `ng-container`: класс блока висит только на хосте.
+
+## Рядом
+
+- [`rt-logo`](../logo/rt-logo.component.ts) — знак самого приложения.
+- [`rt-icon`](../icon/rt-icon.component.ts) — значок кита внутри круга.

package/src/lib/components/service-logo/rt-service-logo.component.scss

@@ -0,0 +1,68 @@
+@layer rt-kit.components {
+    /* rt-service-logo — знаки внешних служб в светлых кругах. ViewEncapsulation.None.
+       Корень шаблона — ng-container, поэтому класс блока висит только на хосте.
+       Числа — атома «Service Logo»: круг, высота знака, шаг внахлёст и размытие тени. */
+
+    .rt-service-logo {
+        --rt-service-logo-size: var(--rt-size-16);
+        --rt-service-logo-mark-height: var(--rt-size-8);
+        --rt-service-logo-step: var(--rt-size-10);
+        --rt-service-logo-shadow: var(--rt-shadow-service-logo-md);
+        --rt-service-logo-radius: var(--rt-radius-full);
+        --rt-service-logo-bg: var(--rt-color-service-logo-bg);
+        --rt-service-logo-color: var(--rt-color-service-logo-mark);
+
+        display: inline-flex;
+        align-items: center;
+        vertical-align: middle;
+
+        &--size-sm {
+            --rt-service-logo-size: var(--rt-size-10);
+            --rt-service-logo-mark-height: var(--rt-size-5);
+            --rt-service-logo-step: var(--rt-size-6);
+            --rt-service-logo-shadow: var(--rt-shadow-service-logo-sm);
+        }
+
+        &--size-lg {
+            --rt-service-logo-size: var(--rt-size-24);
+            --rt-service-logo-mark-height: var(--rt-size-12);
+            --rt-service-logo-step: calc(var(--rt-size-12) + var(--rt-size-3));
+            --rt-service-logo-shadow: var(--rt-shadow-service-logo-lg);
+        }
+
+        /* Круги без z-index: позиционированные соседи ложатся в порядке разметки, и следующий
+           круг стоит поверх предыдущего. Нахлёст — разница круга и шага. */
+        &__plate {
+            position: relative;
+            display: inline-flex;
+            width: var(--rt-service-logo-size);
+            height: var(--rt-service-logo-size);
+            flex: none;
+            align-items: center;
+            justify-content: center;
+            border-radius: var(--rt-service-logo-radius);
+            background: var(--rt-service-logo-bg);
+            box-shadow: var(--rt-service-logo-shadow);
+
+            /* Значок кита берёт цвет текста: круг светлый и в тёмной теме, и значок остаётся тёмным. */
+            color: var(--rt-service-logo-color);
+
+            & + & {
+                margin-inline-start: calc(var(--rt-service-logo-step) - var(--rt-service-logo-size));
+            }
+        }
+
+        /* Рамка знака шире высоты в 1.375 раза (27.5×20, 44×32, 66×48): картинка вписывается в неё
+           целиком, без растяжения и обрезки. */
+        &__image {
+            display: block;
+            width: calc(var(--rt-service-logo-mark-height) * 1.375);
+            height: var(--rt-service-logo-mark-height);
+            object-fit: contain;
+        }
+
+        &__icon {
+            display: inline-flex;
+        }
+    }
+}

package/src/styles/_primitives.scss

@@ -73,6 +73,11 @@
     --rt-gray-350: #b3b3b3; /* трек, light */
     --rt-slate-300: #a9b8cd; /* пройденный прогресс, dark */
 
+    /* Service logo — светлая подложка под знаком внешней службы. Своя ступень: знаки
+       чужих компаний нарисованы под светлый фон, и ни одна нейтральная ступень этот
+       оттенок атома не повторяет. */
+    --rt-mist-50: #f5f6f8; /* круг логотипа службы */
+
     /* Status — success/warning/danger/info.
 
        Ступени 600 и 700 считаны от своей 500 ровным шагом светлоты линейки бренда
@@ -203,6 +208,12 @@
        лежит поверх затемнённой страницы, и слабый ореол на ней не читается. */
     --rt-shadow-dialog: 0 0 40px rgb(0 0 0 / 25%);
 
+    /* Тень круга логотипа службы — ореол без сдвига цвета почти чёрного на 15%;
+       размытие растёт с размером круга, по ступени на размер атома. */
+    --rt-shadow-service-logo-sm: 0 0 24px rgb(24 24 24 / 15%);
+    --rt-shadow-service-logo-md: 0 0 40px rgb(24 24 24 / 15%);
+    --rt-shadow-service-logo-lg: 0 0 56px rgb(24 24 24 / 15%);
+
     /* Size — шкала габаритов: ширина, высота и сторона квадратного узла там, где их
        задаёт не содержимое. Множитель тот же, что у отступов: ступень N равна N × 4px,
        и ряд идёт без промежуточных ступеней — габарит, не легший на ряд, округляется к

package/src/styles/_semantic.scss

@@ -236,6 +236,10 @@
     --rt-icon-button-disabled-color: currentcolor;
     --rt-icon-button-disabled-fill: 100%;
 
+    /* Service logo (rt-service-logo) — подложка круга под знаком внешней службы. */
+    --rt-color-service-logo-bg: var(--rt-mist-50); /* rt-theme-shared: знаки служб нарисованы под светлый фон */
+    --rt-color-service-logo-mark: var(--rt-neutral-900); /* rt-theme-shared: значок тёмный на светлом круге */
+
     /* Spacing aliases — named semantic aliases на primitive numeric scale */
     --rt-space-2xs: var(--rt-space-0-5); /* 2px */
     --rt-space-xs: var(--rt-space-1); /* 4px */

package/styles/tokens.css

@@ -153,6 +153,10 @@
   /* Stepper rail — приглушённые оттенки трека/прогресса прогресс-полосы. */
   --rt-gray-350: #b3b3b3; /* трек, light */
   --rt-slate-300: #a9b8cd; /* пройденный прогресс, dark */
+  /* Service logo — светлая подложка под знаком внешней службы. Своя ступень: знаки
+     чужих компаний нарисованы под светлый фон, и ни одна нейтральная ступень этот
+     оттенок атома не повторяет. */
+  --rt-mist-50: #f5f6f8; /* круг логотипа службы */
   /* Status — success/warning/danger/info.
 
      Ступени 600 и 700 считаны от своей 500 ровным шагом светлоты линейки бренда
@@ -267,6 +271,11 @@
   /* Тень окна — тот же силуэт, что у shadow-card-soft, но вдвое плотнее: окно
      лежит поверх затемнённой страницы, и слабый ореол на ней не читается. */
   --rt-shadow-dialog: 0 0 40px rgb(0 0 0 / 25%);
+  /* Тень круга логотипа службы — ореол без сдвига цвета почти чёрного на 15%;
+     размытие растёт с размером круга, по ступени на размер атома. */
+  --rt-shadow-service-logo-sm: 0 0 24px rgb(24 24 24 / 15%);
+  --rt-shadow-service-logo-md: 0 0 40px rgb(24 24 24 / 15%);
+  --rt-shadow-service-logo-lg: 0 0 56px rgb(24 24 24 / 15%);
   /* Size — шкала габаритов: ширина, высота и сторона квадратного узла там, где их
      задаёт не содержимое. Множитель тот же, что у отступов: ступень N равна N × 4px,
      и ряд идёт без промежуточных ступеней — габарит, не легший на ряд, округляется к
@@ -653,6 +662,9 @@
   --rt-icon-button-disabled-opacity: 0.5;
   --rt-icon-button-disabled-color: currentcolor;
   --rt-icon-button-disabled-fill: 100%;
+  /* Service logo (rt-service-logo) — подложка круга под знаком внешней службы. */
+  --rt-color-service-logo-bg: var(--rt-mist-50); /* rt-theme-shared: знаки служб нарисованы под светлый фон */
+  --rt-color-service-logo-mark: var(--rt-neutral-900); /* rt-theme-shared: значок тёмный на светлом круге */
   /* Spacing aliases — named semantic aliases на primitive numeric scale */
   --rt-space-2xs: var(--rt-space-0-5); /* 2px */
   --rt-space-xs: var(--rt-space-1); /* 4px */
@@ -1567,6 +1579,9 @@ html.rt-theme-dark {
   --rt-icon-button-disabled-opacity: 0.5;
   --rt-icon-button-disabled-color: currentcolor;
   --rt-icon-button-disabled-fill: 100%;
+  /* Service logo (rt-service-logo) — подложка круга под знаком внешней службы. */
+  --rt-color-service-logo-bg: var(--rt-mist-50); /* rt-theme-shared: знаки служб нарисованы под светлый фон */
+  --rt-color-service-logo-mark: var(--rt-neutral-900); /* rt-theme-shared: значок тёмный на светлом круге */
   /* Spacing aliases — named semantic aliases на primitive numeric scale */
   --rt-space-2xs: var(--rt-space-0-5); /* 2px */
   --rt-space-xs: var(--rt-space-1); /* 4px */
@@ -2064,6 +2079,9 @@ html.rt-theme-dark {
   --rt-icon-button-disabled-opacity: 0.5;
   --rt-icon-button-disabled-color: currentcolor;
   --rt-icon-button-disabled-fill: 100%;
+  /* Service logo (rt-service-logo) — подложка круга под знаком внешней службы. */
+  --rt-color-service-logo-bg: var(--rt-mist-50); /* rt-theme-shared: знаки служб нарисованы под светлый фон */
+  --rt-color-service-logo-mark: var(--rt-neutral-900); /* rt-theme-shared: значок тёмный на светлом круге */
   /* Spacing aliases — named semantic aliases на primitive numeric scale */
   --rt-space-2xs: var(--rt-space-0-5); /* 2px */
   --rt-space-xs: var(--rt-space-1); /* 4px */
@@ -2702,6 +2720,9 @@ html.rt-theme-dark {
   --rt-icon-button-disabled-opacity: 0.5;
   --rt-icon-button-disabled-color: currentcolor;
   --rt-icon-button-disabled-fill: 100%;
+  /* Service logo (rt-service-logo) — подложка круга под знаком внешней службы. */
+  --rt-color-service-logo-bg: var(--rt-mist-50); /* rt-theme-shared: знаки служб нарисованы под светлый фон */
+  --rt-color-service-logo-mark: var(--rt-neutral-900); /* rt-theme-shared: значок тёмный на светлом круге */
   /* Spacing aliases — named semantic aliases на primitive numeric scale */
   --rt-space-2xs: var(--rt-space-0-5); /* 2px */
   --rt-space-xs: var(--rt-space-1); /* 4px */
@@ -3402,6 +3423,9 @@ html.rt-theme-dark .rt-preset-material {
   --rt-icon-button-disabled-opacity: 0.5;
   --rt-icon-button-disabled-color: currentcolor;
   --rt-icon-button-disabled-fill: 100%;
+  /* Service logo (rt-service-logo) — подложка круга под знаком внешней службы. */
+  --rt-color-service-logo-bg: var(--rt-mist-50); /* rt-theme-shared: знаки служб нарисованы под светлый фон */
+  --rt-color-service-logo-mark: var(--rt-neutral-900); /* rt-theme-shared: значок тёмный на светлом круге */
   /* Spacing aliases — named semantic aliases на primitive numeric scale */
   --rt-space-2xs: var(--rt-space-0-5); /* 2px */
   --rt-space-xs: var(--rt-space-1); /* 4px */
@@ -4272,6 +4296,9 @@ html.rt-theme-dark [data-theme=light] .rt-preset-material {
   --rt-icon-button-disabled-opacity: 0.5;
   --rt-icon-button-disabled-color: currentcolor;
   --rt-icon-button-disabled-fill: 100%;
+  /* Service logo (rt-service-logo) — подложка круга под знаком внешней службы. */
+  --rt-color-service-logo-bg: var(--rt-mist-50); /* rt-theme-shared: знаки служб нарисованы под светлый фон */
+  --rt-color-service-logo-mark: var(--rt-neutral-900); /* rt-theme-shared: значок тёмный на светлом круге */
   /* Spacing aliases — named semantic aliases на primitive numeric scale */
   --rt-space-2xs: var(--rt-space-0-5); /* 2px */
   --rt-space-xs: var(--rt-space-1); /* 4px */
@@ -4971,6 +4998,9 @@ html.rt-theme-dark [data-theme=light] .rt-preset-material {
   --rt-icon-button-disabled-opacity: 0.5;
   --rt-icon-button-disabled-color: currentcolor;
   --rt-icon-button-disabled-fill: 100%;
+  /* Service logo (rt-service-logo) — подложка круга под знаком внешней службы. */
+  --rt-color-service-logo-bg: var(--rt-mist-50); /* rt-theme-shared: знаки служб нарисованы под светлый фон */
+  --rt-color-service-logo-mark: var(--rt-neutral-900); /* rt-theme-shared: значок тёмный на светлом круге */
   /* Spacing aliases — named semantic aliases на primitive numeric scale */
   --rt-space-2xs: var(--rt-space-0-5); /* 2px */
   --rt-space-xs: var(--rt-space-1); /* 4px */
@@ -5667,6 +5697,9 @@ html.rt-theme-dark [data-theme=light] .rt-preset-material {
   --rt-icon-button-disabled-opacity: 0.5;
   --rt-icon-button-disabled-color: currentcolor;
   --rt-icon-button-disabled-fill: 100%;
+  /* Service logo (rt-service-logo) — подложка круга под знаком внешней службы. */
+  --rt-color-service-logo-bg: var(--rt-mist-50); /* rt-theme-shared: знаки служб нарисованы под светлый фон */
+  --rt-color-service-logo-mark: var(--rt-neutral-900); /* rt-theme-shared: значок тёмный на светлом круге */
   /* Spacing aliases — named semantic aliases на primitive numeric scale */
   --rt-space-2xs: var(--rt-space-0-5); /* 2px */
   --rt-space-xs: var(--rt-space-1); /* 4px */

package/types/rt-tools-ui-kit-v2-card.d.ts

@@ -49,7 +49,7 @@ export declare class RtCardComponent {
     };
   }, {
     "cardClick": "cardClick";
-  }, never, ["[rtCardHeader]", "*", "[rtCardFooter]"], true, [{
+  }, never, ["[rtCardMedia]", "[rtCardHeader]", "*", "[rtCardFooter]"], true, [{
     directive: typeof i1.RtRadiusDirective;
     inputs: {
       "radius": "radius";

package/types/rt-tools-ui-kit-v2-core.d.ts

@@ -1118,7 +1118,7 @@ export declare class RtInfiniteScrollDirective implements OnDestroy {
   }, never, never, true, never>;
 }
 /** The name of a styling property the kit declares itself. */
-export type TRtDesignTokenName = '--rt-amber-400' | '--rt-border-width-medium' | '--rt-border-width-thick' | '--rt-border-width-thin' | '--rt-bp-lg' | '--rt-bp-md' | '--rt-bp-sm' | '--rt-bp-xl' | '--rt-brand-100' | '--rt-brand-200' | '--rt-brand-300' | '--rt-brand-400' | '--rt-brand-50' | '--rt-brand-500' | '--rt-brand-600' | '--rt-brand-700' | '--rt-brand-800' | '--rt-brand-900' | '--rt-brand-950' | '--rt-btn-tint-active' | '--rt-btn-tint-hover' | '--rt-charcoal-700' | '--rt-charcoal-800' | '--rt-charcoal-900' | '--rt-charcoal-950' | '--rt-charcoal-border' | '--rt-charcoal-border-strong' | '--rt-chat-bubble-date' | '--rt-chat-bubble-in-author' | '--rt-chat-bubble-in-bg' | '--rt-chat-bubble-own-author' | '--rt-chat-bubble-own-bg' | '--rt-chat-status-read' | '--rt-color-action-danger' | '--rt-color-action-danger-active' | '--rt-color-action-danger-hover' | '--rt-color-action-danger-on-surface' | '--rt-color-action-disabled' | '--rt-color-action-info' | '--rt-color-action-info-active' | '--rt-color-action-info-hover' | '--rt-color-action-info-on-surface' | '--rt-color-action-on-danger' | '--rt-color-action-on-disabled' | '--rt-color-action-on-info' | '--rt-color-action-on-primary' | '--rt-color-action-on-secondary' | '--rt-color-action-on-success' | '--rt-color-action-on-warning' | '--rt-color-action-primary' | '--rt-color-action-primary-active' | '--rt-color-action-primary-hover' | '--rt-color-action-primary-on-surface' | '--rt-color-action-primary-soft' | '--rt-color-action-primary-subtle' | '--rt-color-action-secondary' | '--rt-color-action-secondary-active' | '--rt-color-action-secondary-hover' | '--rt-color-action-secondary-on-surface' | '--rt-color-action-success' | '--rt-color-action-success-active' | '--rt-color-action-success-hover' | '--rt-color-action-success-on-surface' | '--rt-color-action-warning' | '--rt-color-action-warning-active' | '--rt-color-action-warning-hover' | '--rt-color-action-warning-on-surface' | '--rt-color-bg-hover' | '--rt-color-bg-inverse' | '--rt-color-bg-nav' | '--rt-color-bg-overlay' | '--rt-color-bg-page' | '--rt-color-bg-page-auth' | '--rt-color-bg-subtle' | '--rt-color-bg-surface' | '--rt-color-bg-surface-auth-card' | '--rt-color-bg-surface-subtle' | '--rt-color-bg-surface-subtle-2' | '--rt-color-border-default' | '--rt-color-border-focus' | '--rt-color-border-strong' | '--rt-color-border-subtle' | '--rt-color-field-fill-underline' | '--rt-color-skeleton-base' | '--rt-color-skeleton-wave' | '--rt-color-state-danger' | '--rt-color-state-danger-bg' | '--rt-color-state-error-text' | '--rt-color-state-info' | '--rt-color-state-info-bg' | '--rt-color-state-success' | '--rt-color-state-success-bg' | '--rt-color-state-success-text' | '--rt-color-state-warning' | '--rt-color-state-warning-bg' | '--rt-color-state-warning-text' | '--rt-color-stepper-current' | '--rt-color-stepper-current-subtle' | '--rt-color-stepper-progress' | '--rt-color-stepper-track' | '--rt-color-table-head-bg' | '--rt-color-text-disabled' | '--rt-color-text-inverse' | '--rt-color-text-link' | '--rt-color-text-link-hover' | '--rt-color-text-muted' | '--rt-color-text-primary' | '--rt-control-height-2xl' | '--rt-control-height-lg' | '--rt-control-height-md' | '--rt-control-height-sm' | '--rt-control-height-xl' | '--rt-control-max-width' | '--rt-control-panel-max-height' | '--rt-control-textarea-min-height-lg' | '--rt-control-textarea-min-height-md' | '--rt-control-textarea-min-height-sm' | '--rt-counter-gap' | '--rt-counter-row-color-border' | '--rt-counter-row-gap' | '--rt-counter-row-hint-color' | '--rt-counter-row-hint-font-size' | '--rt-counter-row-label-color' | '--rt-counter-row-label-font-size' | '--rt-counter-row-padding-y' | '--rt-counter-value-color' | '--rt-counter-value-font-size' | '--rt-counter-value-min-width' | '--rt-danger-50' | '--rt-danger-500' | '--rt-danger-600' | '--rt-danger-700' | '--rt-duration-base' | '--rt-duration-fast' | '--rt-duration-slow' | '--rt-duration-slower' | '--rt-field-error-color' | '--rt-field-error-font-size' | '--rt-field-gap' | '--rt-field-hint-color' | '--rt-field-hint-font-size' | '--rt-field-label-color' | '--rt-field-label-font-size' | '--rt-field-label-font-weight' | '--rt-field-label-help-gap' | '--rt-field-required-color' | '--rt-field-value-color' | '--rt-field-value-empty-color' | '--rt-field-value-font-size' | '--rt-focus-ring-color' | '--rt-focus-ring-color-danger' | '--rt-focus-ring-offset' | '--rt-focus-ring-width' | '--rt-font-family-mono' | '--rt-font-family-sans' | '--rt-font-weight-bold' | '--rt-font-weight-medium' | '--rt-font-weight-regular' | '--rt-font-weight-semibold' | '--rt-gray-350' | '--rt-icon-button-color-bg-hover' | '--rt-icon-button-disabled-color' | '--rt-icon-button-disabled-fill' | '--rt-icon-button-disabled-opacity' | '--rt-info-50' | '--rt-info-500' | '--rt-info-600' | '--rt-info-700' | '--rt-input-border-width' | '--rt-input-color-bg' | '--rt-input-color-bg-disabled' | '--rt-input-color-bg-hover' | '--rt-input-color-border' | '--rt-input-color-border-error' | '--rt-input-color-border-focus' | '--rt-input-color-text' | '--rt-input-color-text-placeholder' | '--rt-input-disabled-opacity' | '--rt-input-focus-outline-offset' | '--rt-input-focus-shadow' | '--rt-input-focus-shadow-error' | '--rt-input-font-size' | '--rt-input-gap' | '--rt-input-height' | '--rt-input-height-lg' | '--rt-input-height-md' | '--rt-input-height-sm' | '--rt-input-icon-color' | '--rt-input-icon-size' | '--rt-input-line-height' | '--rt-input-max-width' | '--rt-input-padding-x' | '--rt-input-padding-y' | '--rt-input-panel-max-height' | '--rt-input-radius' | '--rt-input-transition' | '--rt-leading-none' | '--rt-leading-normal' | '--rt-leading-relaxed' | '--rt-leading-snug' | '--rt-leading-tight' | '--rt-letter-spacing-wide' | '--rt-list-action-color' | '--rt-list-action-color-bg-hover' | '--rt-list-action-color-hover' | '--rt-list-action-divider-height' | '--rt-list-action-gap' | '--rt-list-action-icon-size' | '--rt-list-action-radius' | '--rt-list-action-shadow' | '--rt-list-action-shadow-hover' | '--rt-list-content-padding-bottom' | '--rt-list-copy-button-bg' | '--rt-list-copy-button-bg-hover' | '--rt-list-copy-button-color' | '--rt-list-copy-button-radius' | '--rt-list-copy-button-size' | '--rt-list-empty-icon-size' | '--rt-list-empty-icon-wrap-bg' | '--rt-list-empty-icon-wrap-size' | '--rt-list-empty-title-size' | '--rt-list-empty-title-weight' | '--rt-list-filter-line-height' | '--rt-list-placeholder-grow' | '--rt-list-placeholder-min-height' | '--rt-list-search-color-bg' | '--rt-list-search-color-border' | '--rt-list-search-color-placeholder' | '--rt-list-search-font-size' | '--rt-list-search-gap' | '--rt-list-search-height' | '--rt-list-search-icon-color' | '--rt-list-search-icon-size' | '--rt-list-search-padding-x' | '--rt-list-search-radius' | '--rt-list-search-width' | '--rt-list-selector-label-color' | '--rt-list-settings-icon-color' | '--rt-list-settings-item-bg' | '--rt-list-settings-item-radius' | '--rt-list-table-button-radius' | '--rt-list-table-button-size' | '--rt-list-table-head-divider-color' | '--rt-list-table-icon-color' | '--rt-list-table-icon-size' | '--rt-list-toolbar-gap' | '--rt-list-toolbar-padding-bottom' | '--rt-list-toolbar-padding-top' | '--rt-mat-blue-100' | '--rt-mat-blue-20' | '--rt-mat-blue-40' | '--rt-mat-blue-60' | '--rt-mat-blue-80' | '--rt-mat-blue-active' | '--rt-mat-blue-hover' | '--rt-mat-dark-10' | '--rt-mat-dark-20' | '--rt-mat-dark-30' | '--rt-mat-dark-40' | '--rt-mat-green-10' | '--rt-mat-green-100' | '--rt-mat-green-120' | '--rt-mat-green-20' | '--rt-mat-green-40' | '--rt-mat-green-60' | '--rt-mat-green-80' | '--rt-mat-green-active' | '--rt-mat-green-hover' | '--rt-mat-menu-min-width' | '--rt-mat-menu-sm-icon-size' | '--rt-mat-menu-sm-item-height' | '--rt-mat-navy-100' | '--rt-mat-neutral-0' | '--rt-mat-neutral-10' | '--rt-mat-neutral-100' | '--rt-mat-neutral-15' | '--rt-mat-neutral-20' | '--rt-mat-neutral-25' | '--rt-mat-neutral-30' | '--rt-mat-neutral-35' | '--rt-mat-neutral-40' | '--rt-mat-neutral-5' | '--rt-mat-neutral-60' | '--rt-mat-neutral-80' | '--rt-mat-neutral-active' | '--rt-mat-neutral-hover' | '--rt-mat-orange-10' | '--rt-mat-orange-100' | '--rt-mat-orange-20' | '--rt-mat-orange-40' | '--rt-mat-orange-5' | '--rt-mat-orange-60' | '--rt-mat-orange-70' | '--rt-mat-orange-80' | '--rt-mat-orange-active' | '--rt-mat-orange-hover' | '--rt-mat-overlay-black-32' | '--rt-mat-overlay-black-4' | '--rt-mat-overlay-blue-24' | '--rt-mat-overlay-blue-8' | '--rt-mat-radius-4' | '--rt-mat-radius-5' | '--rt-mat-red-10' | '--rt-mat-red-100' | '--rt-mat-red-20' | '--rt-mat-red-40' | '--rt-mat-red-60' | '--rt-mat-red-80' | '--rt-mat-red-active' | '--rt-mat-red-hover' | '--rt-mat-shadow-fab' | '--rt-mat-shadow-fab-hover' | '--rt-mat-shadow-level-2' | '--rt-mat-yellow-100' | '--rt-nav-caret-size' | '--rt-nav-color-disabled' | '--rt-nav-color-focus' | '--rt-nav-header-color-bg' | '--rt-nav-header-padding' | '--rt-nav-item-color' | '--rt-nav-item-color-bg' | '--rt-nav-item-color-bg-active' | '--rt-nav-item-color-border' | '--rt-nav-item-color-caret' | '--rt-nav-item-color-hover' | '--rt-nav-item-color-pressed' | '--rt-nav-item-content-gap' | '--rt-nav-item-font-size' | '--rt-nav-item-font-weight' | '--rt-nav-item-gap' | '--rt-nav-item-height' | '--rt-nav-item-line-height' | '--rt-nav-item-padding' | '--rt-nav-marker-color' | '--rt-nav-marker-size' | '--rt-nav-panel-color-bg' | '--rt-nav-panel-color-border' | '--rt-nav-panel-column-gap' | '--rt-nav-panel-column-width' | '--rt-nav-panel-columns' | '--rt-nav-panel-group-color' | '--rt-nav-panel-group-content-gap' | '--rt-nav-panel-group-font-size' | '--rt-nav-panel-group-font-weight' | '--rt-nav-panel-group-gap' | '--rt-nav-panel-item-color' | '--rt-nav-panel-item-color-active' | '--rt-nav-panel-item-color-bg-active' | '--rt-nav-panel-item-color-bg-hover' | '--rt-nav-panel-item-content-gap' | '--rt-nav-panel-item-font-size' | '--rt-nav-panel-item-font-weight' | '--rt-nav-panel-item-gap' | '--rt-nav-panel-item-height' | '--rt-nav-panel-item-padding' | '--rt-nav-panel-padding' | '--rt-nav-panel-padding-y' | '--rt-nav-panel-shadow' | '--rt-navy-600' | '--rt-navy-900' | '--rt-neutral-0' | '--rt-neutral-100' | '--rt-neutral-200' | '--rt-neutral-300' | '--rt-neutral-400' | '--rt-neutral-50' | '--rt-neutral-500' | '--rt-neutral-600' | '--rt-neutral-700' | '--rt-neutral-800' | '--rt-neutral-900' | '--rt-neutral-950' | '--rt-opacity-disabled' | '--rt-overlay-amber-16' | '--rt-overlay-black-4' | '--rt-overlay-black-50' | '--rt-overlay-black-8' | '--rt-overlay-brand-24' | '--rt-overlay-brand-8' | '--rt-overlay-danger-16' | '--rt-overlay-menu-bg' | '--rt-overlay-menu-current-bg' | '--rt-overlay-menu-danger-color' | '--rt-overlay-menu-danger-label-color' | '--rt-overlay-menu-item-icon-size' | '--rt-overlay-menu-item-min-height' | '--rt-overlay-menu-item-padding-x' | '--rt-overlay-menu-item-padding-y' | '--rt-overlay-menu-item-weight' | '--rt-overlay-menu-min-width' | '--rt-overlay-menu-padding-y' | '--rt-overlay-menu-radius' | '--rt-overlay-menu-shadow' | '--rt-overlay-menu-sm-item-icon-size' | '--rt-overlay-menu-sm-item-min-height' | '--rt-overlay-navy-70' | '--rt-overlay-select-check-display' | '--rt-overlay-select-option-font-size' | '--rt-overlay-select-option-min-height' | '--rt-overlay-select-panel-border-width' | '--rt-overlay-select-radius' | '--rt-overlay-select-selected-bg' | '--rt-overlay-select-selected-weight' | '--rt-overlay-select-shadow' | '--rt-overlay-tooltip-radius' | '--rt-overlay-tooltip-shadow' | '--rt-overlay-white-25' | '--rt-overlay-white-4' | '--rt-overlay-white-40' | '--rt-overlay-white-50' | '--rt-overlay-white-8' | '--rt-pagination-arrow-color' | '--rt-pagination-arrow-radius' | '--rt-pagination-arrow-shadow' | '--rt-pagination-arrow-size' | '--rt-pagination-box-color-border' | '--rt-pagination-box-color-text' | '--rt-pagination-box-current-color-bg' | '--rt-pagination-box-current-color-border' | '--rt-pagination-box-current-color-text' | '--rt-pagination-box-current-font-weight' | '--rt-pagination-box-radius' | '--rt-pagination-box-size' | '--rt-pagination-field-color-bg' | '--rt-pagination-field-color-border' | '--rt-pagination-field-color-text' | '--rt-pagination-field-height' | '--rt-pagination-field-padding-x' | '--rt-pagination-field-radius' | '--rt-pagination-gap' | '--rt-pagination-justify' | '--rt-pagination-nav-gap' | '--rt-pagination-padding-x' | '--rt-pagination-padding-y' | '--rt-pagination-per-page-gap' | '--rt-pagination-per-page-label-white-space' | '--rt-pagination-range-display' | '--rt-profile-avatar-border-width' | '--rt-profile-avatar-font-size' | '--rt-profile-avatar-radius' | '--rt-profile-avatar-size' | '--rt-profile-item-content-gap' | '--rt-profile-item-font-size' | '--rt-profile-item-font-weight' | '--rt-profile-item-padding-y' | '--rt-profile-item-radius' | '--rt-profile-menu-border-width' | '--rt-profile-menu-min-width' | '--rt-profile-menu-padding' | '--rt-profile-menu-radius' | '--rt-profile-menu-shadow' | '--rt-profile-row-inset' | '--rt-profile-theme-icon-padding' | '--rt-profile-theme-icon-radius' | '--rt-radius-2xl' | '--rt-radius-control' | '--rt-radius-full' | '--rt-radius-lg' | '--rt-radius-md' | '--rt-radius-ms' | '--rt-radius-none' | '--rt-radius-sm' | '--rt-radius-xl' | '--rt-radius-xs' | '--rt-shadow-card' | '--rt-shadow-card-soft' | '--rt-shadow-dialog' | '--rt-shadow-focus-ring' | '--rt-shadow-focus-ring-danger' | '--rt-shadow-lg' | '--rt-shadow-md' | '--rt-shadow-nav-panel' | '--rt-shadow-none' | '--rt-shadow-profile-menu' | '--rt-shadow-sm' | '--rt-shadow-status-dot' | '--rt-shadow-step-indicator' | '--rt-shadow-xl' | '--rt-size-1' | '--rt-size-10' | '--rt-size-100' | '--rt-size-12' | '--rt-size-16' | '--rt-size-2' | '--rt-size-20' | '--rt-size-24' | '--rt-size-3' | '--rt-size-30' | '--rt-size-4' | '--rt-size-40' | '--rt-size-5' | '--rt-size-6' | '--rt-size-60' | '--rt-size-64' | '--rt-size-8' | '--rt-slate-300' | '--rt-space-0' | '--rt-space-0-5' | '--rt-space-1' | '--rt-space-10' | '--rt-space-12' | '--rt-space-16' | '--rt-space-2' | '--rt-space-20' | '--rt-space-24' | '--rt-space-2xl' | '--rt-space-2xs' | '--rt-space-3xl' | '--rt-space-4' | '--rt-space-5' | '--rt-space-6' | '--rt-space-8' | '--rt-space-lg' | '--rt-space-md' | '--rt-space-sm' | '--rt-space-xl' | '--rt-space-xs' | '--rt-success-100' | '--rt-success-400' | '--rt-success-50' | '--rt-success-500' | '--rt-success-600' | '--rt-success-700' | '--rt-text-2xl' | '--rt-text-2xs' | '--rt-text-3xl' | '--rt-text-3xs' | '--rt-text-4xl' | '--rt-text-base' | '--rt-text-lg' | '--rt-text-md' | '--rt-text-sm' | '--rt-text-xl' | '--rt-text-xs' | '--rt-textarea-line-height' | '--rt-textarea-min-height' | '--rt-textarea-min-height-lg' | '--rt-textarea-min-height-md' | '--rt-textarea-min-height-sm' | '--rt-textarea-padding-y' | '--rt-toggle-color-border' | '--rt-toggle-color-icon' | '--rt-toggle-color-thumb' | '--rt-toggle-color-track' | '--rt-toggle-color-track-on' | '--rt-toggle-shadow-border' | '--rt-toggle-shadow-thumb' | '--rt-warning-50' | '--rt-warning-500' | '--rt-warning-600' | '--rt-warning-700' | '--rt-yellow-400' | '--rt-z-base' | '--rt-z-dropdown' | '--rt-z-fixed' | '--rt-z-modal' | '--rt-z-modal-backdrop' | '--rt-z-popover' | '--rt-z-sticky' | '--rt-z-tooltip';
+export type TRtDesignTokenName = '--rt-amber-400' | '--rt-border-width-medium' | '--rt-border-width-thick' | '--rt-border-width-thin' | '--rt-bp-lg' | '--rt-bp-md' | '--rt-bp-sm' | '--rt-bp-xl' | '--rt-brand-100' | '--rt-brand-200' | '--rt-brand-300' | '--rt-brand-400' | '--rt-brand-50' | '--rt-brand-500' | '--rt-brand-600' | '--rt-brand-700' | '--rt-brand-800' | '--rt-brand-900' | '--rt-brand-950' | '--rt-btn-tint-active' | '--rt-btn-tint-hover' | '--rt-charcoal-700' | '--rt-charcoal-800' | '--rt-charcoal-900' | '--rt-charcoal-950' | '--rt-charcoal-border' | '--rt-charcoal-border-strong' | '--rt-chat-bubble-date' | '--rt-chat-bubble-in-author' | '--rt-chat-bubble-in-bg' | '--rt-chat-bubble-own-author' | '--rt-chat-bubble-own-bg' | '--rt-chat-status-read' | '--rt-color-action-danger' | '--rt-color-action-danger-active' | '--rt-color-action-danger-hover' | '--rt-color-action-danger-on-surface' | '--rt-color-action-disabled' | '--rt-color-action-info' | '--rt-color-action-info-active' | '--rt-color-action-info-hover' | '--rt-color-action-info-on-surface' | '--rt-color-action-on-danger' | '--rt-color-action-on-disabled' | '--rt-color-action-on-info' | '--rt-color-action-on-primary' | '--rt-color-action-on-secondary' | '--rt-color-action-on-success' | '--rt-color-action-on-warning' | '--rt-color-action-primary' | '--rt-color-action-primary-active' | '--rt-color-action-primary-hover' | '--rt-color-action-primary-on-surface' | '--rt-color-action-primary-soft' | '--rt-color-action-primary-subtle' | '--rt-color-action-secondary' | '--rt-color-action-secondary-active' | '--rt-color-action-secondary-hover' | '--rt-color-action-secondary-on-surface' | '--rt-color-action-success' | '--rt-color-action-success-active' | '--rt-color-action-success-hover' | '--rt-color-action-success-on-surface' | '--rt-color-action-warning' | '--rt-color-action-warning-active' | '--rt-color-action-warning-hover' | '--rt-color-action-warning-on-surface' | '--rt-color-bg-hover' | '--rt-color-bg-inverse' | '--rt-color-bg-nav' | '--rt-color-bg-overlay' | '--rt-color-bg-page' | '--rt-color-bg-page-auth' | '--rt-color-bg-subtle' | '--rt-color-bg-surface' | '--rt-color-bg-surface-auth-card' | '--rt-color-bg-surface-subtle' | '--rt-color-bg-surface-subtle-2' | '--rt-color-border-default' | '--rt-color-border-focus' | '--rt-color-border-strong' | '--rt-color-border-subtle' | '--rt-color-field-fill-underline' | '--rt-color-service-logo-bg' | '--rt-color-service-logo-mark' | '--rt-color-skeleton-base' | '--rt-color-skeleton-wave' | '--rt-color-state-danger' | '--rt-color-state-danger-bg' | '--rt-color-state-error-text' | '--rt-color-state-info' | '--rt-color-state-info-bg' | '--rt-color-state-success' | '--rt-color-state-success-bg' | '--rt-color-state-success-text' | '--rt-color-state-warning' | '--rt-color-state-warning-bg' | '--rt-color-state-warning-text' | '--rt-color-stepper-current' | '--rt-color-stepper-current-subtle' | '--rt-color-stepper-progress' | '--rt-color-stepper-track' | '--rt-color-table-head-bg' | '--rt-color-text-disabled' | '--rt-color-text-inverse' | '--rt-color-text-link' | '--rt-color-text-link-hover' | '--rt-color-text-muted' | '--rt-color-text-primary' | '--rt-control-height-2xl' | '--rt-control-height-lg' | '--rt-control-height-md' | '--rt-control-height-sm' | '--rt-control-height-xl' | '--rt-control-max-width' | '--rt-control-panel-max-height' | '--rt-control-textarea-min-height-lg' | '--rt-control-textarea-min-height-md' | '--rt-control-textarea-min-height-sm' | '--rt-counter-gap' | '--rt-counter-row-color-border' | '--rt-counter-row-gap' | '--rt-counter-row-hint-color' | '--rt-counter-row-hint-font-size' | '--rt-counter-row-label-color' | '--rt-counter-row-label-font-size' | '--rt-counter-row-padding-y' | '--rt-counter-value-color' | '--rt-counter-value-font-size' | '--rt-counter-value-min-width' | '--rt-danger-50' | '--rt-danger-500' | '--rt-danger-600' | '--rt-danger-700' | '--rt-duration-base' | '--rt-duration-fast' | '--rt-duration-slow' | '--rt-duration-slower' | '--rt-field-error-color' | '--rt-field-error-font-size' | '--rt-field-gap' | '--rt-field-hint-color' | '--rt-field-hint-font-size' | '--rt-field-label-color' | '--rt-field-label-font-size' | '--rt-field-label-font-weight' | '--rt-field-label-help-gap' | '--rt-field-required-color' | '--rt-field-value-color' | '--rt-field-value-empty-color' | '--rt-field-value-font-size' | '--rt-focus-ring-color' | '--rt-focus-ring-color-danger' | '--rt-focus-ring-offset' | '--rt-focus-ring-width' | '--rt-font-family-mono' | '--rt-font-family-sans' | '--rt-font-weight-bold' | '--rt-font-weight-medium' | '--rt-font-weight-regular' | '--rt-font-weight-semibold' | '--rt-gray-350' | '--rt-icon-button-color-bg-hover' | '--rt-icon-button-disabled-color' | '--rt-icon-button-disabled-fill' | '--rt-icon-button-disabled-opacity' | '--rt-info-50' | '--rt-info-500' | '--rt-info-600' | '--rt-info-700' | '--rt-input-border-width' | '--rt-input-color-bg' | '--rt-input-color-bg-disabled' | '--rt-input-color-bg-hover' | '--rt-input-color-border' | '--rt-input-color-border-error' | '--rt-input-color-border-focus' | '--rt-input-color-text' | '--rt-input-color-text-placeholder' | '--rt-input-disabled-opacity' | '--rt-input-focus-outline-offset' | '--rt-input-focus-shadow' | '--rt-input-focus-shadow-error' | '--rt-input-font-size' | '--rt-input-gap' | '--rt-input-height' | '--rt-input-height-lg' | '--rt-input-height-md' | '--rt-input-height-sm' | '--rt-input-icon-color' | '--rt-input-icon-size' | '--rt-input-line-height' | '--rt-input-max-width' | '--rt-input-padding-x' | '--rt-input-padding-y' | '--rt-input-panel-max-height' | '--rt-input-radius' | '--rt-input-transition' | '--rt-leading-none' | '--rt-leading-normal' | '--rt-leading-relaxed' | '--rt-leading-snug' | '--rt-leading-tight' | '--rt-letter-spacing-wide' | '--rt-list-action-color' | '--rt-list-action-color-bg-hover' | '--rt-list-action-color-hover' | '--rt-list-action-divider-height' | '--rt-list-action-gap' | '--rt-list-action-icon-size' | '--rt-list-action-radius' | '--rt-list-action-shadow' | '--rt-list-action-shadow-hover' | '--rt-list-content-padding-bottom' | '--rt-list-copy-button-bg' | '--rt-list-copy-button-bg-hover' | '--rt-list-copy-button-color' | '--rt-list-copy-button-radius' | '--rt-list-copy-button-size' | '--rt-list-empty-icon-size' | '--rt-list-empty-icon-wrap-bg' | '--rt-list-empty-icon-wrap-size' | '--rt-list-empty-title-size' | '--rt-list-empty-title-weight' | '--rt-list-filter-line-height' | '--rt-list-placeholder-grow' | '--rt-list-placeholder-min-height' | '--rt-list-search-color-bg' | '--rt-list-search-color-border' | '--rt-list-search-color-placeholder' | '--rt-list-search-font-size' | '--rt-list-search-gap' | '--rt-list-search-height' | '--rt-list-search-icon-color' | '--rt-list-search-icon-size' | '--rt-list-search-padding-x' | '--rt-list-search-radius' | '--rt-list-search-width' | '--rt-list-selector-label-color' | '--rt-list-settings-icon-color' | '--rt-list-settings-item-bg' | '--rt-list-settings-item-radius' | '--rt-list-table-button-radius' | '--rt-list-table-button-size' | '--rt-list-table-head-divider-color' | '--rt-list-table-icon-color' | '--rt-list-table-icon-size' | '--rt-list-toolbar-gap' | '--rt-list-toolbar-padding-bottom' | '--rt-list-toolbar-padding-top' | '--rt-mat-blue-100' | '--rt-mat-blue-20' | '--rt-mat-blue-40' | '--rt-mat-blue-60' | '--rt-mat-blue-80' | '--rt-mat-blue-active' | '--rt-mat-blue-hover' | '--rt-mat-dark-10' | '--rt-mat-dark-20' | '--rt-mat-dark-30' | '--rt-mat-dark-40' | '--rt-mat-green-10' | '--rt-mat-green-100' | '--rt-mat-green-120' | '--rt-mat-green-20' | '--rt-mat-green-40' | '--rt-mat-green-60' | '--rt-mat-green-80' | '--rt-mat-green-active' | '--rt-mat-green-hover' | '--rt-mat-menu-min-width' | '--rt-mat-menu-sm-icon-size' | '--rt-mat-menu-sm-item-height' | '--rt-mat-navy-100' | '--rt-mat-neutral-0' | '--rt-mat-neutral-10' | '--rt-mat-neutral-100' | '--rt-mat-neutral-15' | '--rt-mat-neutral-20' | '--rt-mat-neutral-25' | '--rt-mat-neutral-30' | '--rt-mat-neutral-35' | '--rt-mat-neutral-40' | '--rt-mat-neutral-5' | '--rt-mat-neutral-60' | '--rt-mat-neutral-80' | '--rt-mat-neutral-active' | '--rt-mat-neutral-hover' | '--rt-mat-orange-10' | '--rt-mat-orange-100' | '--rt-mat-orange-20' | '--rt-mat-orange-40' | '--rt-mat-orange-5' | '--rt-mat-orange-60' | '--rt-mat-orange-70' | '--rt-mat-orange-80' | '--rt-mat-orange-active' | '--rt-mat-orange-hover' | '--rt-mat-overlay-black-32' | '--rt-mat-overlay-black-4' | '--rt-mat-overlay-blue-24' | '--rt-mat-overlay-blue-8' | '--rt-mat-radius-4' | '--rt-mat-radius-5' | '--rt-mat-red-10' | '--rt-mat-red-100' | '--rt-mat-red-20' | '--rt-mat-red-40' | '--rt-mat-red-60' | '--rt-mat-red-80' | '--rt-mat-red-active' | '--rt-mat-red-hover' | '--rt-mat-shadow-fab' | '--rt-mat-shadow-fab-hover' | '--rt-mat-shadow-level-2' | '--rt-mat-yellow-100' | '--rt-mist-50' | '--rt-nav-caret-size' | '--rt-nav-color-disabled' | '--rt-nav-color-focus' | '--rt-nav-header-color-bg' | '--rt-nav-header-padding' | '--rt-nav-item-color' | '--rt-nav-item-color-bg' | '--rt-nav-item-color-bg-active' | '--rt-nav-item-color-border' | '--rt-nav-item-color-caret' | '--rt-nav-item-color-hover' | '--rt-nav-item-color-pressed' | '--rt-nav-item-content-gap' | '--rt-nav-item-font-size' | '--rt-nav-item-font-weight' | '--rt-nav-item-gap' | '--rt-nav-item-height' | '--rt-nav-item-line-height' | '--rt-nav-item-padding' | '--rt-nav-marker-color' | '--rt-nav-marker-size' | '--rt-nav-panel-color-bg' | '--rt-nav-panel-color-border' | '--rt-nav-panel-column-gap' | '--rt-nav-panel-column-width' | '--rt-nav-panel-columns' | '--rt-nav-panel-group-color' | '--rt-nav-panel-group-content-gap' | '--rt-nav-panel-group-font-size' | '--rt-nav-panel-group-font-weight' | '--rt-nav-panel-group-gap' | '--rt-nav-panel-item-color' | '--rt-nav-panel-item-color-active' | '--rt-nav-panel-item-color-bg-active' | '--rt-nav-panel-item-color-bg-hover' | '--rt-nav-panel-item-content-gap' | '--rt-nav-panel-item-font-size' | '--rt-nav-panel-item-font-weight' | '--rt-nav-panel-item-gap' | '--rt-nav-panel-item-height' | '--rt-nav-panel-item-padding' | '--rt-nav-panel-padding' | '--rt-nav-panel-padding-y' | '--rt-nav-panel-shadow' | '--rt-navy-600' | '--rt-navy-900' | '--rt-neutral-0' | '--rt-neutral-100' | '--rt-neutral-200' | '--rt-neutral-300' | '--rt-neutral-400' | '--rt-neutral-50' | '--rt-neutral-500' | '--rt-neutral-600' | '--rt-neutral-700' | '--rt-neutral-800' | '--rt-neutral-900' | '--rt-neutral-950' | '--rt-opacity-disabled' | '--rt-overlay-amber-16' | '--rt-overlay-black-4' | '--rt-overlay-black-50' | '--rt-overlay-black-8' | '--rt-overlay-brand-24' | '--rt-overlay-brand-8' | '--rt-overlay-danger-16' | '--rt-overlay-menu-bg' | '--rt-overlay-menu-current-bg' | '--rt-overlay-menu-danger-color' | '--rt-overlay-menu-danger-label-color' | '--rt-overlay-menu-item-icon-size' | '--rt-overlay-menu-item-min-height' | '--rt-overlay-menu-item-padding-x' | '--rt-overlay-menu-item-padding-y' | '--rt-overlay-menu-item-weight' | '--rt-overlay-menu-min-width' | '--rt-overlay-menu-padding-y' | '--rt-overlay-menu-radius' | '--rt-overlay-menu-shadow' | '--rt-overlay-menu-sm-item-icon-size' | '--rt-overlay-menu-sm-item-min-height' | '--rt-overlay-navy-70' | '--rt-overlay-select-check-display' | '--rt-overlay-select-option-font-size' | '--rt-overlay-select-option-min-height' | '--rt-overlay-select-panel-border-width' | '--rt-overlay-select-radius' | '--rt-overlay-select-selected-bg' | '--rt-overlay-select-selected-weight' | '--rt-overlay-select-shadow' | '--rt-overlay-tooltip-radius' | '--rt-overlay-tooltip-shadow' | '--rt-overlay-white-25' | '--rt-overlay-white-4' | '--rt-overlay-white-40' | '--rt-overlay-white-50' | '--rt-overlay-white-8' | '--rt-pagination-arrow-color' | '--rt-pagination-arrow-radius' | '--rt-pagination-arrow-shadow' | '--rt-pagination-arrow-size' | '--rt-pagination-box-color-border' | '--rt-pagination-box-color-text' | '--rt-pagination-box-current-color-bg' | '--rt-pagination-box-current-color-border' | '--rt-pagination-box-current-color-text' | '--rt-pagination-box-current-font-weight' | '--rt-pagination-box-radius' | '--rt-pagination-box-size' | '--rt-pagination-field-color-bg' | '--rt-pagination-field-color-border' | '--rt-pagination-field-color-text' | '--rt-pagination-field-height' | '--rt-pagination-field-padding-x' | '--rt-pagination-field-radius' | '--rt-pagination-gap' | '--rt-pagination-justify' | '--rt-pagination-nav-gap' | '--rt-pagination-padding-x' | '--rt-pagination-padding-y' | '--rt-pagination-per-page-gap' | '--rt-pagination-per-page-label-white-space' | '--rt-pagination-range-display' | '--rt-profile-avatar-border-width' | '--rt-profile-avatar-font-size' | '--rt-profile-avatar-radius' | '--rt-profile-avatar-size' | '--rt-profile-item-content-gap' | '--rt-profile-item-font-size' | '--rt-profile-item-font-weight' | '--rt-profile-item-padding-y' | '--rt-profile-item-radius' | '--rt-profile-menu-border-width' | '--rt-profile-menu-min-width' | '--rt-profile-menu-padding' | '--rt-profile-menu-radius' | '--rt-profile-menu-shadow' | '--rt-profile-row-inset' | '--rt-profile-theme-icon-padding' | '--rt-profile-theme-icon-radius' | '--rt-radius-2xl' | '--rt-radius-control' | '--rt-radius-full' | '--rt-radius-lg' | '--rt-radius-md' | '--rt-radius-ms' | '--rt-radius-none' | '--rt-radius-sm' | '--rt-radius-xl' | '--rt-radius-xs' | '--rt-shadow-card' | '--rt-shadow-card-soft' | '--rt-shadow-dialog' | '--rt-shadow-focus-ring' | '--rt-shadow-focus-ring-danger' | '--rt-shadow-lg' | '--rt-shadow-md' | '--rt-shadow-nav-panel' | '--rt-shadow-none' | '--rt-shadow-profile-menu' | '--rt-shadow-service-logo-lg' | '--rt-shadow-service-logo-md' | '--rt-shadow-service-logo-sm' | '--rt-shadow-sm' | '--rt-shadow-status-dot' | '--rt-shadow-step-indicator' | '--rt-shadow-xl' | '--rt-size-1' | '--rt-size-10' | '--rt-size-100' | '--rt-size-12' | '--rt-size-16' | '--rt-size-2' | '--rt-size-20' | '--rt-size-24' | '--rt-size-3' | '--rt-size-30' | '--rt-size-4' | '--rt-size-40' | '--rt-size-5' | '--rt-size-6' | '--rt-size-60' | '--rt-size-64' | '--rt-size-8' | '--rt-slate-300' | '--rt-space-0' | '--rt-space-0-5' | '--rt-space-1' | '--rt-space-10' | '--rt-space-12' | '--rt-space-16' | '--rt-space-2' | '--rt-space-20' | '--rt-space-24' | '--rt-space-2xl' | '--rt-space-2xs' | '--rt-space-3xl' | '--rt-space-4' | '--rt-space-5' | '--rt-space-6' | '--rt-space-8' | '--rt-space-lg' | '--rt-space-md' | '--rt-space-sm' | '--rt-space-xl' | '--rt-space-xs' | '--rt-success-100' | '--rt-success-400' | '--rt-success-50' | '--rt-success-500' | '--rt-success-600' | '--rt-success-700' | '--rt-text-2xl' | '--rt-text-2xs' | '--rt-text-3xl' | '--rt-text-3xs' | '--rt-text-4xl' | '--rt-text-base' | '--rt-text-lg' | '--rt-text-md' | '--rt-text-sm' | '--rt-text-xl' | '--rt-text-xs' | '--rt-textarea-line-height' | '--rt-textarea-min-height' | '--rt-textarea-min-height-lg' | '--rt-textarea-min-height-md' | '--rt-textarea-min-height-sm' | '--rt-textarea-padding-y' | '--rt-toggle-color-border' | '--rt-toggle-color-icon' | '--rt-toggle-color-thumb' | '--rt-toggle-color-track' | '--rt-toggle-color-track-on' | '--rt-toggle-shadow-border' | '--rt-toggle-shadow-thumb' | '--rt-warning-50' | '--rt-warning-500' | '--rt-warning-600' | '--rt-warning-700' | '--rt-yellow-400' | '--rt-z-base' | '--rt-z-dropdown' | '--rt-z-fixed' | '--rt-z-modal' | '--rt-z-modal-backdrop' | '--rt-z-popover' | '--rt-z-sticky' | '--rt-z-tooltip';
 /** The name of a consumer's handle — a property the kit deliberately does not declare. */
 export type TRtConsumerHandleName = '--rt-action-bar-action-bg-hover' | '--rt-action-bar-action-color-danger' | '--rt-action-bar-action-focus-shadow' | '--rt-action-bar-action-font-size' | '--rt-action-bar-action-height' | '--rt-action-bar-action-padding-block' | '--rt-action-bar-action-padding-inline' | '--rt-action-bar-action-radius' | '--rt-action-bar-action-weight' | '--rt-action-bar-bg' | '--rt-action-bar-close-icon-size' | '--rt-action-bar-close-size' | '--rt-action-bar-color' | '--rt-action-bar-counter-font-size' | '--rt-action-bar-counter-weight' | '--rt-action-bar-font-size' | '--rt-action-bar-gap' | '--rt-action-bar-holder-bottom' | '--rt-action-bar-holder-enter-duration' | '--rt-action-bar-holder-inline' | '--rt-action-bar-holder-leave-duration' | '--rt-action-bar-icon-gap' | '--rt-action-bar-icon-size' | '--rt-action-bar-menu-bg' | '--rt-action-bar-menu-color' | '--rt-action-bar-menu-gap' | '--rt-action-bar-menu-item-font-size' | '--rt-action-bar-menu-padding' | '--rt-action-bar-menu-radius' | '--rt-action-bar-menu-shadow' | '--rt-action-bar-padding' | '--rt-action-bar-radius' | '--rt-action-bar-shadow' | '--rt-aside-bg' | '--rt-aside-content-inset' | '--rt-aside-error-margin-block' | '--rt-aside-footer-gap' | '--rt-aside-footer-inset' | '--rt-aside-footer-justify' | '--rt-aside-footer-margin' | '--rt-aside-header-back-icon-size' | '--rt-aside-header-back-size' | '--rt-aside-header-gap' | '--rt-aside-header-inset' | '--rt-aside-header-min-height' | '--rt-aside-header-subtitle-size' | '--rt-aside-header-title-leading' | '--rt-aside-header-title-size' | '--rt-aside-header-title-weight' | '--rt-aside-width' | '--rt-bottom-sheet-max-height' | '--rt-data-table-scrollbar-color' | '--rt-data-table-scrollbar-horizontal-height' | '--rt-data-table-scrollbar-vertical-width' | '--rt-data-table-scrollbar-width' | '--rt-dialog-bg' | '--rt-dialog-border' | '--rt-dialog-content-max-height' | '--rt-dialog-content-padding' | '--rt-dialog-footer-border' | '--rt-dialog-footer-padding' | '--rt-dialog-header-border' | '--rt-dialog-header-padding' | '--rt-dialog-title-font-size' | '--rt-dialog-title-transform' | '--rt-dialog-title-weight' | '--rt-dialog-width' | '--rt-dynamic-selector-list-actions-gap' | '--rt-dynamic-selector-list-actions-offset' | '--rt-dynamic-selector-list-actions-padding-end' | '--rt-dynamic-selector-list-add-color' | '--rt-dynamic-selector-list-controls-divider-color' | '--rt-dynamic-selector-list-controls-divider-width' | '--rt-dynamic-selector-list-controls-gap' | '--rt-dynamic-selector-list-handle-padding-end' | '--rt-dynamic-selector-list-handle-padding-start' | '--rt-dynamic-selector-list-row-padding-end' | '--rt-dynamic-selector-list-title-gap' | '--rt-dynamic-selector-popup-bg' | '--rt-dynamic-selector-popup-border-width' | '--rt-dynamic-selector-popup-button-font-size' | '--rt-dynamic-selector-popup-button-height' | '--rt-dynamic-selector-popup-empty-gap' | '--rt-dynamic-selector-popup-empty-icon-size' | '--rt-dynamic-selector-popup-empty-icon-wrap-bg' | '--rt-dynamic-selector-popup-empty-text-color' | '--rt-dynamic-selector-popup-empty-text-size' | '--rt-dynamic-selector-popup-empty-text-weight' | '--rt-dynamic-selector-popup-foot-border-width' | '--rt-dynamic-selector-popup-foot-padding' | '--rt-dynamic-selector-popup-highlight-bg' | '--rt-dynamic-selector-popup-highlight-color' | '--rt-dynamic-selector-popup-highlight-radius' | '--rt-dynamic-selector-popup-highlight-weight' | '--rt-dynamic-selector-popup-max-height' | '--rt-dynamic-selector-popup-min-height' | '--rt-dynamic-selector-popup-nav-color' | '--rt-dynamic-selector-popup-option-line-height' | '--rt-dynamic-selector-popup-option-min-height' | '--rt-dynamic-selector-popup-padding' | '--rt-dynamic-selector-popup-radius' | '--rt-dynamic-selector-popup-shadow' | '--rt-dynamic-selector-popup-width' | '--rt-header-content-max-width' | '--rt-header-height' | '--rt-icon-button-bg' | '--rt-icon-button-bg-hover' | '--rt-icon-button-size' | '--rt-icon-color-danger' | '--rt-icon-color-disabled' | '--rt-icon-color-info' | '--rt-icon-color-inverse' | '--rt-icon-color-muted' | '--rt-icon-color-primary' | '--rt-icon-color-success' | '--rt-icon-color-warning' | '--rt-icon-glyph-font' | '--rt-icon-glyph-grade' | '--rt-icon-glyph-opsz' | '--rt-icon-glyph-weight' | '--rt-icon-step-2xl' | '--rt-icon-step-3xl' | '--rt-icon-step-4xl' | '--rt-icon-step-lg' | '--rt-icon-step-md' | '--rt-icon-step-sm' | '--rt-icon-step-xl' | '--rt-icon-step-xs' | '--rt-logo-tagline' | '--rt-logo-tagline-dark' | '--rt-logo-wordmark' | '--rt-logo-wordmark-dark' | '--rt-page-header-bg' | '--rt-side-menu-sub-item-letter-spacing' | '--rt-table-actions-bg' | '--rt-tag-color-bg' | '--rt-tag-color-border' | '--rt-tag-color-text' | '--rt-tag-letter-spacing' | '--rt-tag-padding-block' | '--rt-tag-padding-inline' | '--rt-toast-action-color' | '--rt-toast-bg' | '--rt-toast-border-color' | '--rt-toast-close-color' | '--rt-toast-color' | '--rt-toast-filled-danger-bg' | '--rt-toast-filled-danger-border-color' | '--rt-toast-filled-danger-color' | '--rt-toast-filled-info-bg' | '--rt-toast-filled-info-border-color' | '--rt-toast-filled-info-color' | '--rt-toast-filled-success-bg' | '--rt-toast-filled-success-border-color' | '--rt-toast-filled-success-color' | '--rt-toast-filled-warning-bg' | '--rt-toast-filled-warning-border-color' | '--rt-toast-filled-warning-color' | '--rt-toast-icon-color' | '--rt-toast-progress-color' | '--rt-toast-progress-height' | '--rt-workspace-aside-size' | '--rt-workspace-list-size';
 /** All the styling properties declared by the kit. */