feat(doc): added ability to change current tokens

apps/doc/project.json

@@ -33,11 +33,6 @@
  "glob": "**/*",
  "input": "node_modules/@taiga-ui/icons/src",
  "output": "assets/taiga-ui/icons"
- },
- {
- "glob": "**/*",
- "input": "libs/icons/base/src/styles/icons",
- "output": "assets/prizm-icons/fonts"
  }
  ],
  "styles": [

apps/doc/src/app/app.module.ts

@@ -38,6 +38,7 @@ import { SetTaskModule } from './how-to-work/set-task/set-task.module';
 import { IntroductionModule } from './forZIIoT/introduction/introduction.module';
 import { LibraryRequirementsModule } from './forZIIoT/library-requirements/library-requirements.module';
 import { PRIZM_ENGLISH_LANGUAGE, PRIZM_RUSSIAN_LANGUAGE, prizmLanguageSwitcher } from '@prizm-ui/i18n';
+import { ThemeTokenChanger } from './theme-token-changer/theme-token-changer.component';
 
 registerLocaleData(localeRu);
 @NgModule({

apps/doc/src/app/logo/logo.component.html

@@ -2,8 +2,22 @@
  <a href="http://prizm.zyfra.com/" target="_blank">
  <img src="/assets/logos/logo-dark.svg" />
  </a>
- <prizm-toggle [ngModel]="isNight$ | async" (ngModelChange)="onMode($event)" iconOn="social-sun">
- </prizm-toggle>
+
+ <div class="buttons-block">
+ <prizm-toggle
+ [ngModel]="isNight$ | async"
+ (ngModelChange)="onMode($event)"
+ iconOn="social-sun"
+ ></prizm-toggle>
+
+ <prizm-icons-svg
+ class="theme-tokens-updater"
+ [size]="24"
+ [name]="PrizmIconSvgEnum.SHAPE_GEOMETRY_SQUARE_CIRCLE_PLUS_TRIANGLE_FILL"
+ (click)="openThemeChanger()"
+ >
+ </prizm-icons-svg>
+ </div>
 </div>
 <div
  class="sub-text x-margin prizm-font-input-text-14px"

apps/doc/src/app/logo/logo.component.less

@@ -29,3 +29,18 @@
  color: var(--prizm-status-info-primary-default);
  }
 }
+
+.buttons-block {
+ display: flex;
+ gap: 0.5rem;
+ align-items: center;
+}
+
+.theme-tokens-updater {
+ color: white;
+ cursor: pointer;
+
+ &:hover {
+ color: var(--prizm-index-plan);
+ }
+}

apps/doc/src/app/logo/logo.component.ts

@@ -2,8 +2,15 @@ import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
 import { debounceTime, filter, map } from 'rxjs/operators';
 import { PrizmThemeService } from '@prizm-ui/theme';
 import { LOCAL_STORAGE } from '@ng-web-apis/common';
-import { PrizmIconsSvgRegistry, PrizmIconSvgEnum, prizmIconSvgOtherGitHub } from '@prizm-ui/icons';
+import {
+ PrizmIconsSvgRegistry,
+ PrizmIconSvgEnum,
+ prizmIconSvgOtherGitHub,
+ prizmIconSvgShapeGeometrySquareCirclePlusTriangleFill,
+} from '@prizm-ui/icons';
 import { PrizmLanguageSwitcher } from '@prizm-ui/i18n';
+import { PolymorphComponent, PrizmDialogService } from '@prizm-ui/components';
+import { ThemeTokenChanger } from '../theme-token-changer/theme-token-changer.component';
 
 @Component({
  selector: 'prizm-doc-logo',
@@ -21,18 +28,34 @@ export class LogoComponent {
  readonly githubSvgName = PrizmIconSvgEnum.OTHER_GIT_HUB;
 
  constructor(
+ private readonly dialogService: PrizmDialogService,
  private readonly themeSwitcher: PrizmThemeService,
  public readonly languageSwitcher: PrizmLanguageSwitcher,
  private readonly svgRegistry: PrizmIconsSvgRegistry,
  @Inject(LOCAL_STORAGE) private readonly storage: Storage
  ) {
- this.svgRegistry.registerIcons([prizmIconSvgOtherGitHub]);
+ this.svgRegistry.registerIcons([
+ prizmIconSvgOtherGitHub,
+ prizmIconSvgShapeGeometrySquareCirclePlusTriangleFill,
+ ]);
  }
 
  public onMode(isNight: boolean): void {
  this.storage.setItem(`night`, isNight ? 'true' : 'false');
  this.themeSwitcher.update(isNight ? 'dark' : 'light');
  }
+
+ protected readonly PrizmIconSvgEnum = PrizmIconSvgEnum;
+
+ public openThemeChanger() {
+ this.dialogService
+ .open(new PolymorphComponent(ThemeTokenChanger), {
+ closeable: true,
+ header: 'Theme changer',
+ height: 800,
+ })
+ .subscribe();
+ }
 }
 
 export const LOGO_CONTENT = 'assets/images/logo.svg';

apps/doc/src/app/logo/logo.module.ts

@@ -5,18 +5,27 @@ import { LogoComponent } from './logo.component';
 import { FormsModule } from '@angular/forms';
 import { CommonModule } from '@angular/common';
 import { PrizmIconsSvgComponent } from '@prizm-ui/icons';
-import { PrizmToggleModule } from '@prizm-ui/components';
+import {
+ PrizmButtonComponent,
+ PrizmDialogComponent,
+ PrizmDialogModule,
+ PrizmToggleComponent,
+} from '@prizm-ui/components';
 import { PrizmLetDirective } from '@prizm-ui/helpers';
+import { ThemeTokenChanger } from '../theme-token-changer/theme-token-changer.component';
 
 @NgModule({
  imports: [
  PrizmLetDirective,
  TuiLinkModule,
+ PrizmButtonComponent,
  CommonModule,
  RouterModule,
+ PrizmDialogModule,
+ ThemeTokenChanger,
  FormsModule,
  PrizmIconsSvgComponent,
- PrizmToggleModule,
+ PrizmToggleComponent,
  ],
  declarations: [LogoComponent],
  exports: [LogoComponent],

apps/doc/src/app/theme-token-changer/theme-token-changer.component.html

@@ -0,0 +1,30 @@
+<div #prizmTheme prizmTheme>
+ <prizm-doc-documentation [hasTestId]="false" heading="Base variables" hostComponentKey="Base variables">
+ <ng-template
+ *ngFor="let token of PRIZM_THEME_TOKEN_BASE_VARIABLES"
+ [documentationPropertyName]="token"
+ [documentationPropertyValue]="getTokenValue(token)"
+ (documentationPropertyValueChange)="themeService.updateTokenValue(token, $event)"
+ documentationPropertyType="string"
+ documentationPropertyMode="css-var"
+ >
+ {{ token }}
+ </ng-template>
+ </prizm-doc-documentation>
+ <prizm-doc-documentation
+ [hasTestId]="false"
+ heading="Palette variables"
+ hostComponentKey="Palette variables"
+ >
+ <ng-template
+ *ngFor="let token of PRIZM_THEME_TOKEN_PALETTE_VARIABLES"
+ [documentationPropertyName]="token"
+ [documentationPropertyValue]="getTokenValue(token)"
+ (documentationPropertyValueChange)="themeService.updateTokenValue(token, $event)"
+ documentationPropertyType="string"
+ documentationPropertyMode="css-var"
+ >
+ {{ token }}
+ </ng-template>
+ </prizm-doc-documentation>
+</div>

apps/doc/src/app/theme-token-changer/theme-token-changer.component.less

@@ -0,0 +1,46 @@
+.logo-block {
+ margin-top: 44px;
+}
+
+.logo-block,
+.sub-text {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.x-margin {
+ margin-left: 1.25rem;
+ margin-right: 1.25rem;
+}
+
+.sub-text {
+ margin-top: 14px;
+ color: var(--prizm-palette-gray-h750-dark);
+ margin-bottom: 32px;
+ text-align: left;
+}
+
+.icon {
+ cursor: pointer;
+ color: var(--prizm-text-icon-exception);
+
+ &:hover {
+ color: var(--prizm-status-info-primary-default);
+ }
+}
+
+.buttons-block {
+ display: flex;
+ gap: 0.5rem;
+ align-items: center;
+}
+
+.theme-tokens-updater {
+ color: white;
+ cursor: pointer;
+
+ &:hover {
+ color: var(--prizm-index-plan);
+ }
+}

apps/doc/src/app/theme-token-changer/theme-token-changer.component.ts

@@ -0,0 +1,61 @@
+import { ChangeDetectionStrategy, Component, ElementRef, Inject, OnInit, ViewChild } from '@angular/core';
+import {
+ PRIZM_THEME_TOKEN_BASE_VARIABLES,
+ PRIZM_THEME_TOKEN_PALETTE_VARIABLES,
+ PrizmThemeModule,
+ PrizmThemeService,
+} from '@prizm-ui/theme';
+import { LOCAL_STORAGE } from '@ng-web-apis/common';
+import {
+ PrizmIconsSvgRegistry,
+ prizmIconSvgOtherGitHub,
+ prizmIconSvgShapeGeometrySquareCirclePlusTriangleFill,
+} from '@prizm-ui/icons';
+import { PrizmLanguageSwitcher } from '@prizm-ui/i18n';
+import { PrizmAddonDocModule } from '@prizm-ui/doc';
+import { DOCUMENT, NgFor } from '@angular/common';
+
+@Component({
+ selector: 'prizm-doc-theme-token-changer',
+ templateUrl: './theme-token-changer.component.html',
+ styleUrls: ['./theme-token-changer.component.less'],
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ standalone: true,
+ imports: [PrizmAddonDocModule, NgFor, PrizmThemeModule],
+})
+export class ThemeTokenChanger implements OnInit {
+ @ViewChild('prizmTheme') prizmThemeElement!: ElementRef<HTMLElement>;
+ readonly PRIZM_THEME_TOKEN_PALETTE_VARIABLES = PRIZM_THEME_TOKEN_PALETTE_VARIABLES;
+ readonly PRIZM_THEME_TOKEN_BASE_VARIABLES = PRIZM_THEME_TOKEN_BASE_VARIABLES;
+ readonly mapValue = new Map<string, string>();
+
+ constructor(
+ public readonly themeService: PrizmThemeService,
+ @Inject(DOCUMENT) public readonly document: Document,
+ private readonly svgRegistry: PrizmIconsSvgRegistry
+ ) {
+ this.svgRegistry.registerIcons([
+ prizmIconSvgOtherGitHub,
+ prizmIconSvgShapeGeometrySquareCirclePlusTriangleFill,
+ ]);
+ }
+
+ ngOnInit(): void {
+ this.init();
+ }
+
+ public getTokenValue(token: string): string {
+ return this.mapValue.get(token) ?? '';
+ }
+
+ private init() {
+ this.addTokenValueToMap(PRIZM_THEME_TOKEN_PALETTE_VARIABLES);
+ this.addTokenValueToMap(PRIZM_THEME_TOKEN_BASE_VARIABLES);
+ }
+
+ private addTokenValueToMap(tokens: string[]) {
+ tokens.forEach((token: string) => {
+ this.mapValue.set(token, this.themeService.getTokenValue(token) ?? '');
+ });
+ }
+}

libs/theme/src/index.ts

@@ -1,3 +1,4 @@
 export * from './lib/services';
 export * from './lib/types';
 export * from './lib/directive';
+export * from './lib/const';