- @if (color.variants.length > 1) {
-
-
{{color.name}}
- @for (variant of color.variants; track variant) {
-
- {{variant}}
-
- }
+
Color Palettes
+
+ @for (color of colors; track color.name) {
+
+
+
{{color.name}}
+ @for (variant of color.variants; track variant.shade) {
+
+ {{variant.shade}}
+ {{variant.hex}}
+ content_copy
}
- }
-
-
-
-
- Supporting Colors
-
-
-
-
Success
-
-
-
-
Info
-
-
-
-
Warning
-
-
-
Error
-
-
-
-
Surface
-
-
+ }
+
+
+
diff --git a/src/app/styleguide/colors/color.sample.scss b/src/app/styleguide/colors/color.sample.scss
index 7e2279420a9..d23fc6cbb01 100644
--- a/src/app/styleguide/colors/color.sample.scss
+++ b/src/app/styleguide/colors/color.sample.scss
@@ -2,8 +2,6 @@
@use '../../../styles/variables' as *;
.sample-wrapper {
- display: grid;
- grid-template-columns: 1fr;
padding: 0 8px;
}
@@ -13,23 +11,12 @@
.color-palettes {
display: grid;
- grid-template-columns: repeat(3, 1fr);
+ grid-template-columns: repeat(4, 1fr);
column-gap: 16px;
}
.color-palette {
margin-bottom: 48px;
-
- &:empty {
- display: none;
- }
-}
-
-.colors-row {
- display: grid;
- grid-template-columns: repeat(4, 1fr);
- column-gap: 16px;
- margin-bottom: 48px;
}
.color-title {
@@ -37,12 +24,42 @@
text-transform: capitalize;
line-height: 3rem;
padding: 8px 16px;
+ margin: 0;
}
.color-values {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
font-size: 14px;
font-weight: 600;
padding: 8px 16px;
+ cursor: pointer;
+ transition: opacity 0.15s;
+
+ .copy-icon {
+ opacity: 0;
+ font-size: 16px;
+ transition: opacity 0.15s;
+ }
+
+ &:hover {
+ opacity: 0.85;
+
+ .copy-icon {
+ opacity: 1;
+ }
+ }
+}
+
+.shade-label {
+ min-width: 40px;
+}
+
+.hex-value {
+ font-family: monospace;
+ font-size: 12px;
+ opacity: 0.85;
}
.color-container {
diff --git a/src/app/styleguide/colors/color.sample.ts b/src/app/styleguide/colors/color.sample.ts
index 76cfb0ed8dc..631351794bc 100644
--- a/src/app/styleguide/colors/color.sample.ts
+++ b/src/app/styleguide/colors/color.sample.ts
@@ -1,82 +1,131 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ElementRef, OnDestroy, ChangeDetectorRef, ChangeDetectionStrategy, inject, viewChild, afterNextRender } from '@angular/core';
+import { IgxIconComponent } from 'igniteui-angular/icon';
+import { IgxSnackbarComponent } from 'igniteui-angular/snackbar';
+
+interface ColorVariant {
+ shade: string | number;
+ hex: string;
+}
+
+interface ColorGroup {
+ name: string;
+ variants: ColorVariant[];
+}
+
+const COLOR_SHADES: (string | number)[] = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 'A100', 'A200', 'A400', 'A700'];
+const GRAY_SHADES: (string | number)[] = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+
+function buildGroup(name: string, shades: (string | number)[]): ColorGroup {
+ return {
+ name,
+ variants: shades.map(shade => ({ shade, hex: '' }))
+ };
+}
@Component({
selector: 'app-colors-sample',
styleUrls: ['color.sample.scss'],
templateUrl: 'color.sample.html',
- changeDetection: ChangeDetectionStrategy.Eager,
- imports: []
+ changeDetection: ChangeDetectionStrategy.OnPush,
+ imports: [IgxIconComponent, IgxSnackbarComponent]
})
-export class ColorsSampleComponent {
- public colors = [
- {
- name: 'primary',
- variants: [
- 50,
- 100,
- 200,
- 300,
- 400,
- 500,
- 600,
- 700,
- 800,
- 900,
- 'A100',
- 'A200',
- 'A400',
- 'A700'
- ]
- },
- {
- name: 'secondary',
- variants: [
- 50,
- 100,
- 200,
- 300,
- 400,
- 500,
- 600,
- 700,
- 800,
- 900,
- 'A100',
- 'A200',
- 'A400',
- 'A700'
- ]
- },
- {
- name: 'gray',
- variants: [
- 50,
- 100,
- 200,
- 300,
- 400,
- 500,
- 600,
- 700,
- 800,
- 900
- ]
- },
- {
- name: 'success',
- variants: [500]
- },
- {
- name: 'info',
- variants: [500]
- },
- {
- name: 'warn',
- variants: [500]
- },
- {
- name: 'error',
- variants: [500]
- }
+export class ColorsSampleComponent implements OnDestroy {
+ private el = inject(ElementRef
);
+ private cdr = inject(ChangeDetectorRef);
+ private observer: MutationObserver;
+ private canvasCtx: CanvasRenderingContext2D | null = null;
+
+ private snackbar = viewChild('snackbar');
+
+ public copiedHex = '';
+
+ public colors: ColorGroup[] = [
+ buildGroup('primary', COLOR_SHADES),
+ buildGroup('secondary', COLOR_SHADES),
+ buildGroup('surface', COLOR_SHADES),
+ buildGroup('gray', GRAY_SHADES),
+ buildGroup('success', COLOR_SHADES),
+ buildGroup('info', COLOR_SHADES),
+ buildGroup('warn', COLOR_SHADES),
+ buildGroup('error', COLOR_SHADES),
];
+
+ constructor() {
+ afterNextRender(() => {
+ this.refreshHexValues();
+
+ // Re-resolve hex values when the palette changes at runtime
+ this.observer = new MutationObserver(() => this.refreshHexValues());
+ this.observer.observe(document.documentElement, {
+ attributes: true,
+ attributeFilter: ['style', 'class']
+ });
+ });
+ }
+
+ public ngOnDestroy(): void {
+ this.observer?.disconnect();
+ this.canvasCtx = null;
+ }
+
+ public copyHex(hex: string): void {
+ if (hex) {
+ navigator.clipboard.writeText(hex);
+ this.copiedHex = hex;
+ this.snackbar()?.open(`Copied ${hex} to clipboard`);
+ }
+ }
+
+ private refreshHexValues(): void {
+ const styles = getComputedStyle(this.el.nativeElement);
+
+ for (const color of this.colors) {
+ for (const variant of color.variants) {
+ variant.hex = this.resolveHex(styles, color.name, variant.shade);
+ }
+ }
+
+ this.cdr.markForCheck();
+ }
+
+ private resolveHex(styles: CSSStyleDeclaration, name: string, shade: string | number): string {
+ const raw = styles.getPropertyValue(`--ig-${name}-${shade}`).trim();
+ if (!raw) {
+ return '';
+ }
+
+ const temp = document.createElement('div');
+ temp.style.color = raw;
+ document.body.appendChild(temp);
+ const resolved = getComputedStyle(temp).color;
+ document.body.removeChild(temp);
+
+ return this.colorToHex(resolved);
+ }
+
+ /**
+ * Converts any resolved CSS color string to a hex value.
+ * Uses a canvas to reliably handle all CSS color formats
+ * (rgb, color(srgb), oklch, lab, etc.) that modern browsers
+ * may return from getComputedStyle.
+ */
+ private colorToHex(color: string): string {
+ if (!this.canvasCtx) {
+ const canvas = document.createElement('canvas');
+ canvas.width = canvas.height = 1;
+ this.canvasCtx = canvas.getContext('2d');
+ }
+
+ const ctx = this.canvasCtx;
+ if (!ctx) {
+ return '';
+ }
+
+ ctx.clearRect(0, 0, 1, 1);
+ ctx.fillStyle = '#000';
+ ctx.fillStyle = color;
+ ctx.fillRect(0, 0, 1, 1);
+ const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
+ return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()}`;
+ }
}
diff --git a/src/app/tabs-routing/tabs-routing.sample.html b/src/app/tabs-routing/tabs-routing.sample.html
index 289c6d27cac..a3f354751b0 100644
--- a/src/app/tabs-routing/tabs-routing.sample.html
+++ b/src/app/tabs-routing/tabs-routing.sample.html
@@ -1,85 +1,60 @@
-
-
-
Routing sample
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
+
+
-
+
- folder
- Tab 1
-
-
+ >
+ folder
+ Tab 1
+
+
-
-
+
- folder
- Tab 2
-
-
+ >
+ folder
+ Tab 2
+
+
-
-
+
- folder
- Tab 3
-
-
-
+ >
+
folder
+
Tab 3
+
+
+
+
+
-
-
-
-
-
-
Angular Time Picker with Reactive Form
-