duck-dev-lib 0.0.92 → 0.0.94
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2545,11 +2545,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
2545
2545
|
args: [{ selector: 'duck-dev-accordion', standalone: true, imports: [NgTemplateOutlet, DuckDevIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"duck-dev-accordion\">\n <button\n type=\"button\"\n class=\"accordion-header\"\n [class.open]=\"isOpen()\"\n [attr.data-color]=\"color()\"\n (click)=\"toggle()\"\n >\n {{ title() }}\n <duck-dev-icon name=\"duck-dev-chevron-right-medium\" [class.open-chevron]=\"isOpen()\" />\n </button>\n @if (isOpen()) {\n <div class=\"accordion-content\" animate.enter=\"enter-animation\" animate.leave=\"leaving\">\n <ng-container [ngTemplateOutlet]=\"content()\"></ng-container>\n </div>\n }\n</div>\n", styles: ["@charset \"UTF-8\";.duck-dev-accordion{border:1px solid var(--dd-base-200);border-radius:12px;background:var(--dd-base-300);overflow:hidden}.accordion-header{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;font-size:14px;font-weight:600;background:var(--dd-base-0);border:none;cursor:pointer;position:relative;transition:background-color .12s ease,color .12s ease,box-shadow .12s ease;color:var(--dd-base-600)}.accordion-header[data-color=violet]{background:color-mix(in srgb,var(--dd-base-accent-blue) 14%,transparent);color:var(--dd-base-accent-blue)}.accordion-header[data-color=violet]:hover{background:color-mix(in srgb,var(--dd-base-accent-blue) 24%,transparent)}.accordion-header[data-color=orange]{background:color-mix(in srgb,var(--dd-base-accent-orange) 14%,transparent);color:var(--dd-base-accent-orange)}.accordion-header[data-color=orange]:hover{background:color-mix(in srgb,var(--dd-base-accent-orange) 24%,transparent)}.accordion-header[data-color=gray]{background:var(--dd-base-100);color:var(--dd-base-600)}.accordion-header[data-color=gray]:hover{background:var(--dd-base-200)}.accordion-header[data-color=dark]{background:var(--dd-base-200);color:var(--dd-base-700)}.accordion-header[data-color=dark]:hover{background:var(--dd-base-300)}.accordion-header[data-color=white],.accordion-header:not([data-color]){background:var(--dd-base-0);color:var(--dd-base-600)}.accordion-header[data-color=white]:hover,.accordion-header:not([data-color]):hover{background:var(--dd-base-100)}.accordion-content{overflow:hidden;background-color:var(--dd-base-100);line-height:1.5}duck-dev-icon{transition:transform .3s}.open-chevron{transform:rotate(90deg)}.enter-animation{animation:slideDown .5s forwards}@keyframes slideDown{0%{max-height:0}to{max-height:500px}}.leaving{animation:slideUp .3s forwards}@keyframes slideUp{0%{max-height:300px}to{max-height:0}}\n"] }]
|
|
2546
2546
|
}], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
2547
2547
|
|
|
2548
|
+
function getNeobrutalAccordionStyle(color) {
|
|
2549
|
+
switch (color) {
|
|
2550
|
+
case AccentEnumColor.Violet:
|
|
2551
|
+
return {
|
|
2552
|
+
'--dd-neo-accordion-bg': 'color-mix(in srgb, var(--dd-neo-ana-3) 14%, var(--dd-neo-paper))',
|
|
2553
|
+
'--dd-neo-accordion-panel': 'color-mix(in srgb, var(--dd-neo-ana-3) 7%, var(--dd-neo-paper))',
|
|
2554
|
+
'--dd-neo-accordion-accent': 'var(--dd-neo-ana-1)',
|
|
2555
|
+
'--dd-neo-accordion-border': 'var(--dd-neo-ink)',
|
|
2556
|
+
'--dd-neo-accordion-text': 'var(--dd-neo-ink)',
|
|
2557
|
+
'--dd-neo-accordion-shadow': 'var(--dd-neo-ana-6)',
|
|
2558
|
+
};
|
|
2559
|
+
case AccentEnumColor.Orange:
|
|
2560
|
+
return {
|
|
2561
|
+
'--dd-neo-accordion-bg': 'color-mix(in srgb, var(--dd-neo-ana-2) 16%, var(--dd-neo-paper))',
|
|
2562
|
+
'--dd-neo-accordion-panel': 'color-mix(in srgb, var(--dd-neo-ana-2) 8%, var(--dd-neo-paper))',
|
|
2563
|
+
'--dd-neo-accordion-accent': 'var(--dd-neo-ana-1)',
|
|
2564
|
+
'--dd-neo-accordion-border': 'var(--dd-neo-ink)',
|
|
2565
|
+
'--dd-neo-accordion-text': 'var(--dd-neo-ink)',
|
|
2566
|
+
'--dd-neo-accordion-shadow': 'var(--dd-neo-ana-5)',
|
|
2567
|
+
};
|
|
2568
|
+
case AccentEnumColor.Gray:
|
|
2569
|
+
return {
|
|
2570
|
+
'--dd-neo-accordion-bg': 'var(--dd-base-100)',
|
|
2571
|
+
'--dd-neo-accordion-panel': 'var(--dd-neo-paper)',
|
|
2572
|
+
'--dd-neo-accordion-accent': 'var(--dd-neo-ana-2)',
|
|
2573
|
+
'--dd-neo-accordion-border': 'var(--dd-neo-ink)',
|
|
2574
|
+
'--dd-neo-accordion-text': 'var(--dd-neo-ink)',
|
|
2575
|
+
'--dd-neo-accordion-shadow': 'var(--dd-neo-ana-6)',
|
|
2576
|
+
};
|
|
2577
|
+
case AccentEnumColor.Dark:
|
|
2578
|
+
return {
|
|
2579
|
+
'--dd-neo-accordion-bg': 'var(--dd-neo-ana-4)',
|
|
2580
|
+
'--dd-neo-accordion-panel': 'color-mix(in srgb, var(--dd-neo-ana-4) 92%, var(--dd-neo-ana-3))',
|
|
2581
|
+
'--dd-neo-accordion-accent': 'var(--dd-neo-ana-1)',
|
|
2582
|
+
'--dd-neo-accordion-border': 'var(--dd-neo-ink)',
|
|
2583
|
+
'--dd-neo-accordion-text': 'var(--dd-neo-ana-4-contrast)',
|
|
2584
|
+
'--dd-neo-accordion-shadow': 'var(--dd-neo-ana-3)',
|
|
2585
|
+
};
|
|
2586
|
+
case AccentEnumColor.White:
|
|
2587
|
+
default:
|
|
2588
|
+
return {
|
|
2589
|
+
'--dd-neo-accordion-bg': 'var(--dd-neo-paper)',
|
|
2590
|
+
'--dd-neo-accordion-panel': 'var(--dd-base-100)',
|
|
2591
|
+
'--dd-neo-accordion-accent': 'var(--dd-neo-ana-6)',
|
|
2592
|
+
'--dd-neo-accordion-border': 'var(--dd-neo-ink)',
|
|
2593
|
+
'--dd-neo-accordion-text': 'var(--dd-neo-ink)',
|
|
2594
|
+
'--dd-neo-accordion-shadow': 'var(--dd-neo-ana-5)',
|
|
2595
|
+
};
|
|
2596
|
+
}
|
|
2597
|
+
}
|
|
2598
|
+
function getNeobrutalAccordionTapeStyle(color) {
|
|
2599
|
+
switch (color) {
|
|
2600
|
+
case AccentEnumColor.Violet:
|
|
2601
|
+
return {
|
|
2602
|
+
'--dd-neo-tape-accent': 'var(--dd-neo-ana-3)',
|
|
2603
|
+
'--dd-neo-tape-bg': 'color-mix(in srgb, var(--dd-neo-ana-3) 20%, var(--dd-neo-paper))',
|
|
2604
|
+
'--dd-neo-tape-stripe': 'var(--dd-neo-ana-3)',
|
|
2605
|
+
'--dd-neo-tape-border': 'var(--dd-neo-ink)',
|
|
2606
|
+
'--dd-neo-tape-text': 'var(--dd-neo-ink)',
|
|
2607
|
+
};
|
|
2608
|
+
case AccentEnumColor.Orange:
|
|
2609
|
+
return {
|
|
2610
|
+
'--dd-neo-tape-accent': 'var(--dd-neo-ana-2)',
|
|
2611
|
+
'--dd-neo-tape-bg': 'color-mix(in srgb, var(--dd-neo-ana-1) 60%, var(--dd-neo-paper))',
|
|
2612
|
+
'--dd-neo-tape-stripe': 'var(--dd-neo-ana-2)',
|
|
2613
|
+
'--dd-neo-tape-border': 'var(--dd-neo-ink)',
|
|
2614
|
+
'--dd-neo-tape-text': 'var(--dd-neo-ink)',
|
|
2615
|
+
};
|
|
2616
|
+
case AccentEnumColor.Gray:
|
|
2617
|
+
return {
|
|
2618
|
+
'--dd-neo-tape-accent': 'var(--dd-neo-ana-6)',
|
|
2619
|
+
'--dd-neo-tape-bg': 'var(--dd-base-200)',
|
|
2620
|
+
'--dd-neo-tape-stripe': 'var(--dd-neo-ana-6)',
|
|
2621
|
+
'--dd-neo-tape-border': 'var(--dd-neo-ink)',
|
|
2622
|
+
'--dd-neo-tape-text': 'var(--dd-neo-ink)',
|
|
2623
|
+
};
|
|
2624
|
+
case AccentEnumColor.Dark:
|
|
2625
|
+
return {
|
|
2626
|
+
'--dd-neo-tape-accent': 'var(--dd-neo-ana-1)',
|
|
2627
|
+
'--dd-neo-tape-bg': 'var(--dd-neo-ana-4)',
|
|
2628
|
+
'--dd-neo-tape-stripe': 'var(--dd-neo-ana-5)',
|
|
2629
|
+
'--dd-neo-tape-border': 'var(--dd-neo-ink)',
|
|
2630
|
+
'--dd-neo-tape-text': 'var(--dd-neo-ana-4-contrast)',
|
|
2631
|
+
};
|
|
2632
|
+
case AccentEnumColor.White:
|
|
2633
|
+
default:
|
|
2634
|
+
return {
|
|
2635
|
+
'--dd-neo-tape-accent': 'var(--dd-neo-ana-6)',
|
|
2636
|
+
'--dd-neo-tape-bg': 'color-mix(in srgb, var(--dd-neo-ana-6) 12%, var(--dd-neo-paper))',
|
|
2637
|
+
'--dd-neo-tape-stripe': 'var(--dd-neo-ana-6)',
|
|
2638
|
+
'--dd-neo-tape-border': 'var(--dd-neo-ink)',
|
|
2639
|
+
'--dd-neo-tape-text': 'var(--dd-neo-ink)',
|
|
2640
|
+
};
|
|
2641
|
+
}
|
|
2642
|
+
}
|
|
2643
|
+
|
|
2548
2644
|
class DuckDevAccordionNeobrutalComponent {
|
|
2549
2645
|
content = input.required({ ...(ngDevMode ? { debugName: "content" } : {}) });
|
|
2550
2646
|
title = input.required({ ...(ngDevMode ? { debugName: "title" } : {}) });
|
|
2551
2647
|
stampLabel = input.required({ ...(ngDevMode ? { debugName: "stampLabel" } : {}) });
|
|
2552
2648
|
color = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
2649
|
+
paletteStyle = computed(() => getNeobrutalAccordionStyle(this.color()), { ...(ngDevMode ? { debugName: "paletteStyle" } : {}) });
|
|
2553
2650
|
isOpen = signal(false, { ...(ngDevMode ? { debugName: "isOpen" } : {}) });
|
|
2554
2651
|
stateLabel = computed(() => (this.isOpen() ? 'OPEN' : 'CLOSED'), { ...(ngDevMode ? { debugName: "stateLabel" } : {}) });
|
|
2555
2652
|
titleTemplate = computed(() => {
|
|
@@ -2564,28 +2661,29 @@ class DuckDevAccordionNeobrutalComponent {
|
|
|
2564
2661
|
this.isOpen.update((prev) => !prev);
|
|
2565
2662
|
}
|
|
2566
2663
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2567
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevAccordionNeobrutalComponent, isStandalone: true, selector: "duck-dev-accordion-neobrutal", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, stampLabel: { classPropertyName: "stampLabel", publicName: "stampLabel", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dd-accordion-brutal\" [class.is-open]=\"isOpen()\" [
|
|
2664
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.1", type: DuckDevAccordionNeobrutalComponent, isStandalone: true, selector: "duck-dev-accordion-neobrutal", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, stampLabel: { classPropertyName: "stampLabel", publicName: "stampLabel", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dd-accordion-brutal\" [class.is-open]=\"isOpen()\" [ngStyle]=\"paletteStyle()\">\n <button\n type=\"button\"\n class=\"dd-accordion-brutal__header\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"toggle()\"\n >\n @if (titleTemplate(); as headerTemplate) {\n <span class=\"dd-accordion-brutal__custom-header\">\n <ng-container [ngTemplateOutlet]=\"headerTemplate\" />\n </span>\n } @else {\n <span class=\"dd-accordion-brutal__stamp\">{{ stampLabel() }}</span>\n\n <span class=\"dd-accordion-brutal__headline\">\n <span class=\"dd-accordion-brutal__title\">{{ title() }}</span>\n <span class=\"dd-accordion-brutal__state\">{{ stateLabel() }}</span>\n </span>\n }\n\n <span class=\"dd-accordion-brutal__action\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n <duck-dev-icon name=\"duck-dev-chevron-right-medium\" />\n </span>\n </button>\n\n <div\n class=\"dd-accordion-brutal__body-shell\"\n [class.is-open]=\"isOpen()\"\n [attr.aria-hidden]=\"!isOpen()\"\n >\n <div class=\"dd-accordion-brutal__body-frame\">\n <div class=\"dd-accordion-brutal__body-content\">\n <ng-container [ngTemplateOutlet]=\"content()\" />\n </div>\n </div>\n </div>\n</div>\n", styles: [".dd-accordion-brutal{display:block;background:var(--dd-neo-accordion-bg);border:4px solid var(--dd-neo-accordion-border);box-shadow:10px 10px 0 var(--dd-neo-accordion-shadow);overflow:clip;color:var(--dd-neo-accordion-text)}.dd-accordion-brutal__header{position:relative;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:18px 20px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-accordion-accent) 24%,transparent) 0 16%,transparent 16% 100%),var(--dd-neo-accordion-bg);color:inherit;border:0;cursor:pointer;text-align:left;transition:transform .24s cubic-bezier(.22,1,.36,1),background-color .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__header:after{content:\"\";position:absolute;inset:auto 0 0;height:4px;background:var(--dd-neo-accordion-border);transform-origin:left center;transform:scaleX(.92);transition:transform .32s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__header:hover{transform:translate(-2px,-2px)}.dd-accordion-brutal.is-open .dd-accordion-brutal__header:after{transform:scaleX(1)}.dd-accordion-brutal__stamp{display:inline-flex;align-items:center;justify-content:center;min-width:74px;padding:7px 10px;border:3px solid var(--dd-neo-accordion-border);background:var(--dd-neo-paper);box-shadow:4px 4px 0 var(--dd-neo-accordion-accent);font-size:11px;font-weight:900;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--dd-neo-accordion-border);transform:rotate(-4deg)}.dd-accordion-brutal__headline{display:grid;gap:8px;min-width:0}.dd-accordion-brutal__custom-header{display:block;grid-column:1/-2;min-width:0}.dd-accordion-brutal__title{font-size:18px;line-height:1.15;font-weight:900;letter-spacing:.02em;text-transform:uppercase;text-wrap:balance}.dd-accordion-brutal__state{display:inline-flex;width:fit-content;padding:3px 8px;border:2px solid var(--dd-neo-accordion-border);background:color-mix(in srgb,var(--dd-neo-accordion-accent) 14%,var(--dd-neo-accordion-bg));font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.dd-accordion-brutal__action{display:grid;place-items:center;width:48px;height:48px;border:3px solid var(--dd-neo-accordion-border);background:var(--dd-neo-paper);box-shadow:4px 4px 0 var(--dd-neo-accordion-accent);transform:rotate(-8deg);transition:transform .42s cubic-bezier(.22,1.2,.36,1),box-shadow .24s cubic-bezier(.22,1,.36,1),background-color .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__action.is-open{transform:rotate(90deg) scale(1.05);background:color-mix(in srgb,var(--dd-neo-accordion-accent) 20%,var(--dd-neo-paper));box-shadow:2px 2px 0 var(--dd-neo-accordion-accent)}.dd-accordion-brutal__body-shell{display:grid;grid-template-rows:0fr;background:var(--dd-neo-accordion-panel);transition:grid-template-rows .46s cubic-bezier(.2,.9,.24,1),background-color .22s ease}.dd-accordion-brutal__body-shell.is-open{grid-template-rows:1fr}.dd-accordion-brutal__body-frame{min-height:0;overflow:hidden;border-top:4px solid var(--dd-neo-accordion-border)}.dd-accordion-brutal__body-content{position:relative;padding:0 20px 0 24px;opacity:0;transform:translateY(-12px) scale(.98);transition:opacity .22s ease,transform .42s cubic-bezier(.22,1,.36,1),padding .42s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__body-content:before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:8px;background:var(--dd-neo-accordion-accent)}.dd-accordion-brutal__body-shell.is-open .dd-accordion-brutal__body-content{padding-top:20px;padding-bottom:22px;opacity:1;transform:translateY(0) scale(1);transition-delay:40ms,0ms,0ms}.dd-accordion-brutal__body-content :first-child{margin-top:0}.dd-accordion-brutal__body-content :last-child{margin-bottom:0}@media(max-width:640px){.dd-accordion-brutal{box-shadow:10px 10px 0 var(--dd-neo-accordion-shadow)}.dd-accordion-brutal__header{grid-template-columns:1fr auto;padding:16px}.dd-accordion-brutal__stamp{grid-column:1/-1;width:fit-content;min-width:0}.dd-accordion-brutal__title{font-size:16px}.dd-accordion-brutal__action{width:44px;height:44px}.dd-accordion-brutal__body-content{padding-right:16px;padding-left:20px}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2568
2665
|
}
|
|
2569
2666
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalComponent, decorators: [{
|
|
2570
2667
|
type: Component,
|
|
2571
|
-
args: [{ selector: 'duck-dev-accordion-neobrutal', standalone: true, imports: [NgTemplateOutlet, DuckDevIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dd-accordion-brutal\" [class.is-open]=\"isOpen()\" [
|
|
2668
|
+
args: [{ selector: 'duck-dev-accordion-neobrutal', standalone: true, imports: [NgStyle, NgTemplateOutlet, DuckDevIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dd-accordion-brutal\" [class.is-open]=\"isOpen()\" [ngStyle]=\"paletteStyle()\">\n <button\n type=\"button\"\n class=\"dd-accordion-brutal__header\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"ariaLabel()\"\n (click)=\"toggle()\"\n >\n @if (titleTemplate(); as headerTemplate) {\n <span class=\"dd-accordion-brutal__custom-header\">\n <ng-container [ngTemplateOutlet]=\"headerTemplate\" />\n </span>\n } @else {\n <span class=\"dd-accordion-brutal__stamp\">{{ stampLabel() }}</span>\n\n <span class=\"dd-accordion-brutal__headline\">\n <span class=\"dd-accordion-brutal__title\">{{ title() }}</span>\n <span class=\"dd-accordion-brutal__state\">{{ stateLabel() }}</span>\n </span>\n }\n\n <span class=\"dd-accordion-brutal__action\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n <duck-dev-icon name=\"duck-dev-chevron-right-medium\" />\n </span>\n </button>\n\n <div\n class=\"dd-accordion-brutal__body-shell\"\n [class.is-open]=\"isOpen()\"\n [attr.aria-hidden]=\"!isOpen()\"\n >\n <div class=\"dd-accordion-brutal__body-frame\">\n <div class=\"dd-accordion-brutal__body-content\">\n <ng-container [ngTemplateOutlet]=\"content()\" />\n </div>\n </div>\n </div>\n</div>\n", styles: [".dd-accordion-brutal{display:block;background:var(--dd-neo-accordion-bg);border:4px solid var(--dd-neo-accordion-border);box-shadow:10px 10px 0 var(--dd-neo-accordion-shadow);overflow:clip;color:var(--dd-neo-accordion-text)}.dd-accordion-brutal__header{position:relative;width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;padding:18px 20px;background:linear-gradient(135deg,color-mix(in srgb,var(--dd-neo-accordion-accent) 24%,transparent) 0 16%,transparent 16% 100%),var(--dd-neo-accordion-bg);color:inherit;border:0;cursor:pointer;text-align:left;transition:transform .24s cubic-bezier(.22,1,.36,1),background-color .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__header:after{content:\"\";position:absolute;inset:auto 0 0;height:4px;background:var(--dd-neo-accordion-border);transform-origin:left center;transform:scaleX(.92);transition:transform .32s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__header:hover{transform:translate(-2px,-2px)}.dd-accordion-brutal.is-open .dd-accordion-brutal__header:after{transform:scaleX(1)}.dd-accordion-brutal__stamp{display:inline-flex;align-items:center;justify-content:center;min-width:74px;padding:7px 10px;border:3px solid var(--dd-neo-accordion-border);background:var(--dd-neo-paper);box-shadow:4px 4px 0 var(--dd-neo-accordion-accent);font-size:11px;font-weight:900;line-height:1;letter-spacing:.14em;text-transform:uppercase;color:var(--dd-neo-accordion-border);transform:rotate(-4deg)}.dd-accordion-brutal__headline{display:grid;gap:8px;min-width:0}.dd-accordion-brutal__custom-header{display:block;grid-column:1/-2;min-width:0}.dd-accordion-brutal__title{font-size:18px;line-height:1.15;font-weight:900;letter-spacing:.02em;text-transform:uppercase;text-wrap:balance}.dd-accordion-brutal__state{display:inline-flex;width:fit-content;padding:3px 8px;border:2px solid var(--dd-neo-accordion-border);background:color-mix(in srgb,var(--dd-neo-accordion-accent) 14%,var(--dd-neo-accordion-bg));font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.dd-accordion-brutal__action{display:grid;place-items:center;width:48px;height:48px;border:3px solid var(--dd-neo-accordion-border);background:var(--dd-neo-paper);box-shadow:4px 4px 0 var(--dd-neo-accordion-accent);transform:rotate(-8deg);transition:transform .42s cubic-bezier(.22,1.2,.36,1),box-shadow .24s cubic-bezier(.22,1,.36,1),background-color .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__action.is-open{transform:rotate(90deg) scale(1.05);background:color-mix(in srgb,var(--dd-neo-accordion-accent) 20%,var(--dd-neo-paper));box-shadow:2px 2px 0 var(--dd-neo-accordion-accent)}.dd-accordion-brutal__body-shell{display:grid;grid-template-rows:0fr;background:var(--dd-neo-accordion-panel);transition:grid-template-rows .46s cubic-bezier(.2,.9,.24,1),background-color .22s ease}.dd-accordion-brutal__body-shell.is-open{grid-template-rows:1fr}.dd-accordion-brutal__body-frame{min-height:0;overflow:hidden;border-top:4px solid var(--dd-neo-accordion-border)}.dd-accordion-brutal__body-content{position:relative;padding:0 20px 0 24px;opacity:0;transform:translateY(-12px) scale(.98);transition:opacity .22s ease,transform .42s cubic-bezier(.22,1,.36,1),padding .42s cubic-bezier(.22,1,.36,1)}.dd-accordion-brutal__body-content:before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:8px;background:var(--dd-neo-accordion-accent)}.dd-accordion-brutal__body-shell.is-open .dd-accordion-brutal__body-content{padding-top:20px;padding-bottom:22px;opacity:1;transform:translateY(0) scale(1);transition-delay:40ms,0ms,0ms}.dd-accordion-brutal__body-content :first-child{margin-top:0}.dd-accordion-brutal__body-content :last-child{margin-bottom:0}@media(max-width:640px){.dd-accordion-brutal{box-shadow:10px 10px 0 var(--dd-neo-accordion-shadow)}.dd-accordion-brutal__header{grid-template-columns:1fr auto;padding:16px}.dd-accordion-brutal__stamp{grid-column:1/-1;width:fit-content;min-width:0}.dd-accordion-brutal__title{font-size:16px}.dd-accordion-brutal__action{width:44px;height:44px}.dd-accordion-brutal__body-content{padding-right:16px;padding-left:20px}}\n"] }]
|
|
2572
2669
|
}], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], stampLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "stampLabel", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
2573
2670
|
|
|
2574
2671
|
class DuckDevAccordionNeobrutalTapeComponent {
|
|
2575
2672
|
content = input.required({ ...(ngDevMode ? { debugName: "content" } : {}) });
|
|
2576
2673
|
title = input.required({ ...(ngDevMode ? { debugName: "title" } : {}) });
|
|
2577
2674
|
color = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
2675
|
+
paletteStyle = computed(() => getNeobrutalAccordionTapeStyle(this.color()), { ...(ngDevMode ? { debugName: "paletteStyle" } : {}) });
|
|
2578
2676
|
isOpen = signal(false, { ...(ngDevMode ? { debugName: "isOpen" } : {}) });
|
|
2579
2677
|
stateLabel = computed(() => (this.isOpen() ? 'OPEN' : 'CLOSED'), { ...(ngDevMode ? { debugName: "stateLabel" } : {}) });
|
|
2580
2678
|
toggle() {
|
|
2581
2679
|
this.isOpen.update((prev) => !prev);
|
|
2582
2680
|
}
|
|
2583
2681
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalTapeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2584
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevAccordionNeobrutalTapeComponent, isStandalone: true, selector: "duck-dev-accordion-neobrutal-tape", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dd-accordion-tape\" [class.is-open]=\"isOpen()\" [
|
|
2682
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.1", type: DuckDevAccordionNeobrutalTapeComponent, isStandalone: true, selector: "duck-dev-accordion-neobrutal-tape", inputs: { content: { classPropertyName: "content", publicName: "content", isSignal: true, isRequired: true, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"dd-accordion-tape\" [class.is-open]=\"isOpen()\" [ngStyle]=\"paletteStyle()\">\n <button\n type=\"button\"\n class=\"dd-accordion-tape__header\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"title()\"\n (click)=\"toggle()\"\n >\n <span class=\"dd-accordion-tape__stripe-left\" aria-hidden=\"true\"></span>\n\n <span class=\"dd-accordion-tape__title-area\">\n <span class=\"dd-accordion-tape__title\">{{ title() }}</span>\n <span class=\"dd-accordion-tape__action\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n <duck-dev-icon name=\"duck-dev-chevron-right-medium\" />\n </span>\n </span>\n\n <span class=\"dd-accordion-tape__stripe-right\" aria-hidden=\"true\"></span>\n </button>\n\n <div\n class=\"dd-accordion-tape__body-shell\"\n [class.is-open]=\"isOpen()\"\n [attr.aria-hidden]=\"!isOpen()\"\n >\n <div class=\"dd-accordion-tape__body-frame\">\n <div class=\"dd-accordion-tape__body-content\">\n <ng-container [ngTemplateOutlet]=\"content()\" />\n </div>\n </div>\n </div>\n</div>\n", styles: [".dd-accordion-tape{display:block;position:relative}.dd-accordion-tape__header{display:flex;align-items:stretch;width:100%;padding:0;background:var(--dd-neo-tape-bg);border:3px solid var(--dd-neo-tape-border);cursor:pointer;color:var(--dd-neo-tape-text);text-align:left;position:relative;transform:rotate(-.8deg);box-shadow:4px 4px 0 var(--dd-neo-tape-accent);transition:transform .24s cubic-bezier(.22,1,.36,1),box-shadow .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-tape__header:hover{transform:rotate(-.8deg) translate(-1px,-1px);box-shadow:6px 6px 0 var(--dd-neo-tape-accent)}.dd-accordion-tape.is-open .dd-accordion-tape__header{transform:rotate(-.4deg)}.dd-accordion-tape__stripe-left,.dd-accordion-tape__stripe-right{display:block;width:28px;flex-shrink:0}.dd-accordion-tape__stripe-left{background:repeating-linear-gradient(-45deg,var(--dd-neo-tape-stripe) 0 4px,transparent 4px 10px);border-right:3px solid var(--dd-neo-tape-border)}.dd-accordion-tape__stripe-right{background:repeating-linear-gradient(45deg,var(--dd-neo-tape-stripe) 0 4px,transparent 4px 10px);border-left:3px solid var(--dd-neo-tape-border)}.dd-accordion-tape__title-area{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 12px;min-width:0}.dd-accordion-tape__title{font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;line-height:1.2;text-wrap:balance}.dd-accordion-tape__action{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;transition:transform .38s cubic-bezier(.22,1.2,.36,1)}.dd-accordion-tape__action.is-open{transform:rotate(90deg)}.dd-accordion-tape__body-shell{display:grid;grid-template-rows:0fr;transition:grid-template-rows .46s cubic-bezier(.2,.9,.24,1)}.dd-accordion-tape__body-shell.is-open{grid-template-rows:1fr}.dd-accordion-tape__body-frame{min-height:0;overflow:hidden}.dd-accordion-tape__body-content{border:3px solid var(--dd-neo-tape-border);border-top:none;background:var(--dd-neo-paper);padding:0 20px;margin-top:-2px;position:relative;box-shadow:4px 4px 0 var(--dd-neo-tape-accent);opacity:0;transform:translateY(-8px);transition:opacity .22s ease,transform .38s cubic-bezier(.22,1,.36,1),padding .38s cubic-bezier(.22,1,.36,1)}.dd-accordion-tape__body-content:before{content:\"\";position:absolute;top:0;left:16px;right:16px;height:3px;background:repeating-linear-gradient(90deg,var(--dd-neo-tape-stripe) 0 6px,transparent 6px 12px)}.dd-accordion-tape__body-shell.is-open .dd-accordion-tape__body-content{padding-top:18px;padding-bottom:18px;opacity:1;transform:translateY(0);transition-delay:40ms,0ms,0ms}.dd-accordion-tape__body-content :first-child{margin-top:0}.dd-accordion-tape__body-content :last-child{margin-bottom:0}@media(max-width:640px){.dd-accordion-tape__stripe-left,.dd-accordion-tape__stripe-right{width:20px}.dd-accordion-tape__title{font-size:14px}.dd-accordion-tape__title-area{padding:12px 10px}.dd-accordion-tape__body-content{padding-left:16px;padding-right:16px}}\n"], dependencies: [{ kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: DuckDevIcon, selector: "duck-dev-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
2585
2683
|
}
|
|
2586
2684
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalTapeComponent, decorators: [{
|
|
2587
2685
|
type: Component,
|
|
2588
|
-
args: [{ selector: 'duck-dev-accordion-neobrutal-tape', standalone: true, imports: [NgTemplateOutlet, DuckDevIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dd-accordion-tape\" [class.is-open]=\"isOpen()\" [
|
|
2686
|
+
args: [{ selector: 'duck-dev-accordion-neobrutal-tape', standalone: true, imports: [NgStyle, NgTemplateOutlet, DuckDevIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dd-accordion-tape\" [class.is-open]=\"isOpen()\" [ngStyle]=\"paletteStyle()\">\n <button\n type=\"button\"\n class=\"dd-accordion-tape__header\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-label]=\"title()\"\n (click)=\"toggle()\"\n >\n <span class=\"dd-accordion-tape__stripe-left\" aria-hidden=\"true\"></span>\n\n <span class=\"dd-accordion-tape__title-area\">\n <span class=\"dd-accordion-tape__title\">{{ title() }}</span>\n <span class=\"dd-accordion-tape__action\" [class.is-open]=\"isOpen()\" aria-hidden=\"true\">\n <duck-dev-icon name=\"duck-dev-chevron-right-medium\" />\n </span>\n </span>\n\n <span class=\"dd-accordion-tape__stripe-right\" aria-hidden=\"true\"></span>\n </button>\n\n <div\n class=\"dd-accordion-tape__body-shell\"\n [class.is-open]=\"isOpen()\"\n [attr.aria-hidden]=\"!isOpen()\"\n >\n <div class=\"dd-accordion-tape__body-frame\">\n <div class=\"dd-accordion-tape__body-content\">\n <ng-container [ngTemplateOutlet]=\"content()\" />\n </div>\n </div>\n </div>\n</div>\n", styles: [".dd-accordion-tape{display:block;position:relative}.dd-accordion-tape__header{display:flex;align-items:stretch;width:100%;padding:0;background:var(--dd-neo-tape-bg);border:3px solid var(--dd-neo-tape-border);cursor:pointer;color:var(--dd-neo-tape-text);text-align:left;position:relative;transform:rotate(-.8deg);box-shadow:4px 4px 0 var(--dd-neo-tape-accent);transition:transform .24s cubic-bezier(.22,1,.36,1),box-shadow .24s cubic-bezier(.22,1,.36,1)}.dd-accordion-tape__header:hover{transform:rotate(-.8deg) translate(-1px,-1px);box-shadow:6px 6px 0 var(--dd-neo-tape-accent)}.dd-accordion-tape.is-open .dd-accordion-tape__header{transform:rotate(-.4deg)}.dd-accordion-tape__stripe-left,.dd-accordion-tape__stripe-right{display:block;width:28px;flex-shrink:0}.dd-accordion-tape__stripe-left{background:repeating-linear-gradient(-45deg,var(--dd-neo-tape-stripe) 0 4px,transparent 4px 10px);border-right:3px solid var(--dd-neo-tape-border)}.dd-accordion-tape__stripe-right{background:repeating-linear-gradient(45deg,var(--dd-neo-tape-stripe) 0 4px,transparent 4px 10px);border-left:3px solid var(--dd-neo-tape-border)}.dd-accordion-tape__title-area{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 12px;min-width:0}.dd-accordion-tape__title{font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.04em;line-height:1.2;text-wrap:balance}.dd-accordion-tape__action{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;transition:transform .38s cubic-bezier(.22,1.2,.36,1)}.dd-accordion-tape__action.is-open{transform:rotate(90deg)}.dd-accordion-tape__body-shell{display:grid;grid-template-rows:0fr;transition:grid-template-rows .46s cubic-bezier(.2,.9,.24,1)}.dd-accordion-tape__body-shell.is-open{grid-template-rows:1fr}.dd-accordion-tape__body-frame{min-height:0;overflow:hidden}.dd-accordion-tape__body-content{border:3px solid var(--dd-neo-tape-border);border-top:none;background:var(--dd-neo-paper);padding:0 20px;margin-top:-2px;position:relative;box-shadow:4px 4px 0 var(--dd-neo-tape-accent);opacity:0;transform:translateY(-8px);transition:opacity .22s ease,transform .38s cubic-bezier(.22,1,.36,1),padding .38s cubic-bezier(.22,1,.36,1)}.dd-accordion-tape__body-content:before{content:\"\";position:absolute;top:0;left:16px;right:16px;height:3px;background:repeating-linear-gradient(90deg,var(--dd-neo-tape-stripe) 0 6px,transparent 6px 12px)}.dd-accordion-tape__body-shell.is-open .dd-accordion-tape__body-content{padding-top:18px;padding-bottom:18px;opacity:1;transform:translateY(0);transition-delay:40ms,0ms,0ms}.dd-accordion-tape__body-content :first-child{margin-top:0}.dd-accordion-tape__body-content :last-child{margin-bottom:0}@media(max-width:640px){.dd-accordion-tape__stripe-left,.dd-accordion-tape__stripe-right{width:20px}.dd-accordion-tape__title{font-size:14px}.dd-accordion-tape__title-area{padding:12px 10px}.dd-accordion-tape__body-content{padding-left:16px;padding-right:16px}}\n"] }]
|
|
2589
2687
|
}], propDecorators: { content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
2590
2688
|
|
|
2591
2689
|
class SliderClassic {
|
|
@@ -3635,47 +3733,47 @@ class DuckDevSegmentNeobrutal {
|
|
|
3635
3733
|
switch (color) {
|
|
3636
3734
|
case AccentEnumColor.Violet:
|
|
3637
3735
|
return {
|
|
3638
|
-
'--dd-segment-neo-surface': 'var(--dd-
|
|
3639
|
-
'--dd-segment-neo-panel': 'color-mix(in srgb, var(--dd-
|
|
3640
|
-
'--dd-segment-neo-accent': 'var(--dd-
|
|
3641
|
-
'--dd-segment-neo-shadow': 'var(--dd-
|
|
3642
|
-
'--dd-segment-neo-text': 'var(--dd-
|
|
3643
|
-
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-
|
|
3736
|
+
'--dd-segment-neo-surface': 'var(--dd-neo-ana-3)',
|
|
3737
|
+
'--dd-segment-neo-panel': 'color-mix(in srgb, var(--dd-neo-ana-3) 84%, var(--dd-base-0))',
|
|
3738
|
+
'--dd-segment-neo-accent': 'var(--dd-neo-ana-1)',
|
|
3739
|
+
'--dd-segment-neo-shadow': 'var(--dd-neo-ana-6)',
|
|
3740
|
+
'--dd-segment-neo-text': 'var(--dd-neo-ana-3-contrast)',
|
|
3741
|
+
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-neo-ana-3-contrast) 74%, transparent)',
|
|
3644
3742
|
};
|
|
3645
3743
|
case AccentEnumColor.Orange:
|
|
3646
3744
|
return {
|
|
3647
|
-
'--dd-segment-neo-surface': 'var(--dd-
|
|
3648
|
-
'--dd-segment-neo-panel': 'color-mix(in srgb, var(--dd-
|
|
3649
|
-
'--dd-segment-neo-accent': 'var(--dd-
|
|
3650
|
-
'--dd-segment-neo-shadow': 'var(--dd-
|
|
3651
|
-
'--dd-segment-neo-text': 'var(--dd-
|
|
3652
|
-
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-
|
|
3745
|
+
'--dd-segment-neo-surface': 'var(--dd-neo-ana-2)',
|
|
3746
|
+
'--dd-segment-neo-panel': 'color-mix(in srgb, var(--dd-neo-ana-5) 68%, var(--dd-base-0))',
|
|
3747
|
+
'--dd-segment-neo-accent': 'var(--dd-neo-ana-1)',
|
|
3748
|
+
'--dd-segment-neo-shadow': 'var(--dd-neo-ana-5)',
|
|
3749
|
+
'--dd-segment-neo-text': 'var(--dd-neo-ana-2-contrast)',
|
|
3750
|
+
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-neo-ana-2-contrast) 66%, transparent)',
|
|
3653
3751
|
};
|
|
3654
3752
|
case AccentEnumColor.Gray:
|
|
3655
3753
|
return {
|
|
3656
3754
|
'--dd-segment-neo-surface': 'var(--dd-base-100)',
|
|
3657
3755
|
'--dd-segment-neo-panel': 'var(--dd-base-0)',
|
|
3658
|
-
'--dd-segment-neo-accent': 'var(--dd-
|
|
3659
|
-
'--dd-segment-neo-shadow': 'var(--dd-
|
|
3756
|
+
'--dd-segment-neo-accent': 'var(--dd-neo-ana-1)',
|
|
3757
|
+
'--dd-segment-neo-shadow': 'var(--dd-neo-ana-6)',
|
|
3660
3758
|
'--dd-segment-neo-text': 'var(--dd-base-600)',
|
|
3661
3759
|
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-base-600) 58%, transparent)',
|
|
3662
3760
|
};
|
|
3663
3761
|
case AccentEnumColor.Dark:
|
|
3664
3762
|
return {
|
|
3665
|
-
'--dd-segment-neo-surface': 'var(--dd-
|
|
3666
|
-
'--dd-segment-neo-panel': 'color-mix(in srgb, var(--dd-
|
|
3667
|
-
'--dd-segment-neo-accent': 'var(--dd-
|
|
3668
|
-
'--dd-segment-neo-shadow': 'var(--dd-
|
|
3669
|
-
'--dd-segment-neo-text': 'var(--dd-
|
|
3670
|
-
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-
|
|
3763
|
+
'--dd-segment-neo-surface': 'var(--dd-neo-ana-4)',
|
|
3764
|
+
'--dd-segment-neo-panel': 'color-mix(in srgb, var(--dd-neo-ana-4) 92%, var(--dd-neo-ana-3))',
|
|
3765
|
+
'--dd-segment-neo-accent': 'var(--dd-neo-ana-1)',
|
|
3766
|
+
'--dd-segment-neo-shadow': 'var(--dd-neo-ana-3)',
|
|
3767
|
+
'--dd-segment-neo-text': 'var(--dd-neo-ana-4-contrast)',
|
|
3768
|
+
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-neo-ana-4-contrast) 68%, transparent)',
|
|
3671
3769
|
};
|
|
3672
3770
|
case AccentEnumColor.White:
|
|
3673
3771
|
default:
|
|
3674
3772
|
return {
|
|
3675
3773
|
'--dd-segment-neo-surface': 'var(--dd-base-0)',
|
|
3676
3774
|
'--dd-segment-neo-panel': 'var(--dd-base-100)',
|
|
3677
|
-
'--dd-segment-neo-accent': 'var(--dd-
|
|
3678
|
-
'--dd-segment-neo-shadow': 'var(--dd-
|
|
3775
|
+
'--dd-segment-neo-accent': 'var(--dd-neo-ana-5)',
|
|
3776
|
+
'--dd-segment-neo-shadow': 'var(--dd-neo-ana-6)',
|
|
3679
3777
|
'--dd-segment-neo-text': 'var(--dd-base-600)',
|
|
3680
3778
|
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-base-600) 58%, transparent)',
|
|
3681
3779
|
};
|
|
@@ -3758,47 +3856,47 @@ class DuckDevSegmentNeobrutalVertical {
|
|
|
3758
3856
|
switch (color) {
|
|
3759
3857
|
case AccentEnumColor.Violet:
|
|
3760
3858
|
return {
|
|
3761
|
-
'--dd-segment-neo-v-surface': 'var(--dd-
|
|
3762
|
-
'--dd-segment-neo-v-panel': 'color-mix(in srgb, var(--dd-
|
|
3763
|
-
'--dd-segment-neo-v-accent': 'var(--dd-
|
|
3764
|
-
'--dd-segment-neo-v-shadow': 'var(--dd-
|
|
3765
|
-
'--dd-segment-neo-v-text': 'var(--dd-
|
|
3766
|
-
'--dd-segment-neo-v-muted': 'color-mix(in srgb, var(--dd-
|
|
3859
|
+
'--dd-segment-neo-v-surface': 'var(--dd-neo-ana-3)',
|
|
3860
|
+
'--dd-segment-neo-v-panel': 'color-mix(in srgb, var(--dd-neo-ana-3) 84%, var(--dd-base-0))',
|
|
3861
|
+
'--dd-segment-neo-v-accent': 'var(--dd-neo-ana-1)',
|
|
3862
|
+
'--dd-segment-neo-v-shadow': 'var(--dd-neo-ana-6)',
|
|
3863
|
+
'--dd-segment-neo-v-text': 'var(--dd-neo-ana-3-contrast)',
|
|
3864
|
+
'--dd-segment-neo-v-muted': 'color-mix(in srgb, var(--dd-neo-ana-3-contrast) 74%, transparent)',
|
|
3767
3865
|
};
|
|
3768
3866
|
case AccentEnumColor.Orange:
|
|
3769
3867
|
return {
|
|
3770
|
-
'--dd-segment-neo-v-surface': 'var(--dd-
|
|
3771
|
-
'--dd-segment-neo-v-panel': 'color-mix(in srgb, var(--dd-
|
|
3772
|
-
'--dd-segment-neo-v-accent': 'var(--dd-
|
|
3773
|
-
'--dd-segment-neo-v-shadow': 'var(--dd-
|
|
3774
|
-
'--dd-segment-neo-v-text': 'var(--dd-
|
|
3775
|
-
'--dd-segment-neo-v-muted': 'color-mix(in srgb, var(--dd-
|
|
3868
|
+
'--dd-segment-neo-v-surface': 'var(--dd-neo-ana-2)',
|
|
3869
|
+
'--dd-segment-neo-v-panel': 'color-mix(in srgb, var(--dd-neo-ana-5) 68%, var(--dd-base-0))',
|
|
3870
|
+
'--dd-segment-neo-v-accent': 'var(--dd-neo-ana-1)',
|
|
3871
|
+
'--dd-segment-neo-v-shadow': 'var(--dd-neo-ana-5)',
|
|
3872
|
+
'--dd-segment-neo-v-text': 'var(--dd-neo-ana-2-contrast)',
|
|
3873
|
+
'--dd-segment-neo-v-muted': 'color-mix(in srgb, var(--dd-neo-ana-2-contrast) 66%, transparent)',
|
|
3776
3874
|
};
|
|
3777
3875
|
case AccentEnumColor.Gray:
|
|
3778
3876
|
return {
|
|
3779
3877
|
'--dd-segment-neo-v-surface': 'var(--dd-base-100)',
|
|
3780
3878
|
'--dd-segment-neo-v-panel': 'var(--dd-base-0)',
|
|
3781
|
-
'--dd-segment-neo-v-accent': 'var(--dd-
|
|
3782
|
-
'--dd-segment-neo-v-shadow': 'var(--dd-
|
|
3879
|
+
'--dd-segment-neo-v-accent': 'var(--dd-neo-ana-1)',
|
|
3880
|
+
'--dd-segment-neo-v-shadow': 'var(--dd-neo-ana-6)',
|
|
3783
3881
|
'--dd-segment-neo-v-text': 'var(--dd-base-600)',
|
|
3784
3882
|
'--dd-segment-neo-v-muted': 'color-mix(in srgb, var(--dd-base-600) 58%, transparent)',
|
|
3785
3883
|
};
|
|
3786
3884
|
case AccentEnumColor.Dark:
|
|
3787
3885
|
return {
|
|
3788
|
-
'--dd-segment-neo-v-surface': 'var(--dd-
|
|
3789
|
-
'--dd-segment-neo-v-panel': 'color-mix(in srgb, var(--dd-
|
|
3790
|
-
'--dd-segment-neo-v-accent': 'var(--dd-
|
|
3791
|
-
'--dd-segment-neo-v-shadow': 'var(--dd-
|
|
3792
|
-
'--dd-segment-neo-v-text': 'var(--dd-
|
|
3793
|
-
'--dd-segment-neo-v-muted': 'color-mix(in srgb, var(--dd-
|
|
3886
|
+
'--dd-segment-neo-v-surface': 'var(--dd-neo-ana-4)',
|
|
3887
|
+
'--dd-segment-neo-v-panel': 'color-mix(in srgb, var(--dd-neo-ana-4) 92%, var(--dd-neo-ana-3))',
|
|
3888
|
+
'--dd-segment-neo-v-accent': 'var(--dd-neo-ana-1)',
|
|
3889
|
+
'--dd-segment-neo-v-shadow': 'var(--dd-neo-ana-3)',
|
|
3890
|
+
'--dd-segment-neo-v-text': 'var(--dd-neo-ana-4-contrast)',
|
|
3891
|
+
'--dd-segment-neo-v-muted': 'color-mix(in srgb, var(--dd-neo-ana-4-contrast) 68%, transparent)',
|
|
3794
3892
|
};
|
|
3795
3893
|
case AccentEnumColor.White:
|
|
3796
3894
|
default:
|
|
3797
3895
|
return {
|
|
3798
3896
|
'--dd-segment-neo-v-surface': 'var(--dd-base-0)',
|
|
3799
|
-
'--dd-segment-neo-v-panel': 'color-mix(in srgb, var(--dd-
|
|
3800
|
-
'--dd-segment-neo-v-accent': 'var(--dd-
|
|
3801
|
-
'--dd-segment-neo-v-shadow': 'var(--dd-
|
|
3897
|
+
'--dd-segment-neo-v-panel': 'color-mix(in srgb, var(--dd-neo-ana-5) 14%, var(--dd-base-0))',
|
|
3898
|
+
'--dd-segment-neo-v-accent': 'var(--dd-neo-ana-5)',
|
|
3899
|
+
'--dd-segment-neo-v-shadow': 'var(--dd-neo-ana-6)',
|
|
3802
3900
|
'--dd-segment-neo-v-text': 'var(--dd-base-600)',
|
|
3803
3901
|
'--dd-segment-neo-v-muted': 'color-mix(in srgb, var(--dd-base-400) 72%, transparent)',
|
|
3804
3902
|
};
|
|
@@ -5633,48 +5731,48 @@ class DuckDevBreadcrumbNeobrutal {
|
|
|
5633
5731
|
switch (color) {
|
|
5634
5732
|
case AccentEnumColor.Violet:
|
|
5635
5733
|
return {
|
|
5636
|
-
'--neo-bc-surface': 'var(--dd-
|
|
5637
|
-
'--neo-bc-text': 'var(--dd-
|
|
5638
|
-
'--neo-bc-link': 'var(--dd-
|
|
5639
|
-
'--neo-bc-separator': 'var(--dd-
|
|
5640
|
-
'--neo-bc-shadow': 'var(--dd-
|
|
5641
|
-
'--neo-bc-active': 'var(--dd-
|
|
5734
|
+
'--neo-bc-surface': 'var(--dd-neo-ana-3)',
|
|
5735
|
+
'--neo-bc-text': 'var(--dd-neo-ana-3-contrast)',
|
|
5736
|
+
'--neo-bc-link': 'var(--dd-neo-ana-1)',
|
|
5737
|
+
'--neo-bc-separator': 'var(--dd-neo-ana-1)',
|
|
5738
|
+
'--neo-bc-shadow': 'var(--dd-neo-ana-6)',
|
|
5739
|
+
'--neo-bc-active': 'var(--dd-neo-ana-3-contrast)',
|
|
5642
5740
|
};
|
|
5643
5741
|
case AccentEnumColor.Orange:
|
|
5644
5742
|
return {
|
|
5645
|
-
'--neo-bc-surface': 'var(--dd-
|
|
5646
|
-
'--neo-bc-text': 'var(--dd-
|
|
5647
|
-
'--neo-bc-link': 'var(--dd-
|
|
5648
|
-
'--neo-bc-separator': 'var(--dd-
|
|
5649
|
-
'--neo-bc-shadow': 'var(--dd-
|
|
5650
|
-
'--neo-bc-active': 'var(--dd-
|
|
5743
|
+
'--neo-bc-surface': 'var(--dd-neo-ana-2)',
|
|
5744
|
+
'--neo-bc-text': 'var(--dd-neo-ana-2-contrast)',
|
|
5745
|
+
'--neo-bc-link': 'var(--dd-neo-ana-1)',
|
|
5746
|
+
'--neo-bc-separator': 'var(--dd-neo-ana-5)',
|
|
5747
|
+
'--neo-bc-shadow': 'var(--dd-neo-ana-5)',
|
|
5748
|
+
'--neo-bc-active': 'var(--dd-neo-ana-2-contrast)',
|
|
5651
5749
|
};
|
|
5652
5750
|
case AccentEnumColor.Gray:
|
|
5653
5751
|
return {
|
|
5654
5752
|
'--neo-bc-surface': 'var(--dd-base-200)',
|
|
5655
5753
|
'--neo-bc-text': 'var(--dd-base-600)',
|
|
5656
|
-
'--neo-bc-link': 'var(--dd-
|
|
5657
|
-
'--neo-bc-separator': 'var(--dd-
|
|
5658
|
-
'--neo-bc-shadow': 'var(--dd-
|
|
5754
|
+
'--neo-bc-link': 'var(--dd-neo-ana-1)',
|
|
5755
|
+
'--neo-bc-separator': 'var(--dd-neo-ana-2)',
|
|
5756
|
+
'--neo-bc-shadow': 'var(--dd-neo-ana-6)',
|
|
5659
5757
|
'--neo-bc-active': 'var(--dd-base-600)',
|
|
5660
5758
|
};
|
|
5661
5759
|
case AccentEnumColor.Dark:
|
|
5662
5760
|
return {
|
|
5663
|
-
'--neo-bc-surface': 'var(--dd-
|
|
5664
|
-
'--neo-bc-text': 'var(--dd-
|
|
5665
|
-
'--neo-bc-link': 'var(--dd-
|
|
5666
|
-
'--neo-bc-separator': 'var(--dd-
|
|
5667
|
-
'--neo-bc-shadow': 'var(--dd-
|
|
5668
|
-
'--neo-bc-active': 'var(--dd-
|
|
5761
|
+
'--neo-bc-surface': 'var(--dd-neo-ana-4)',
|
|
5762
|
+
'--neo-bc-text': 'var(--dd-neo-ana-4-contrast)',
|
|
5763
|
+
'--neo-bc-link': 'var(--dd-neo-ana-1)',
|
|
5764
|
+
'--neo-bc-separator': 'var(--dd-neo-ana-5)',
|
|
5765
|
+
'--neo-bc-shadow': 'var(--dd-neo-ana-3)',
|
|
5766
|
+
'--neo-bc-active': 'var(--dd-neo-ana-4-contrast)',
|
|
5669
5767
|
};
|
|
5670
5768
|
case AccentEnumColor.White:
|
|
5671
5769
|
default:
|
|
5672
5770
|
return {
|
|
5673
5771
|
'--neo-bc-surface': 'var(--dd-base-0)',
|
|
5674
5772
|
'--neo-bc-text': 'var(--dd-base-600)',
|
|
5675
|
-
'--neo-bc-link': 'var(--dd-
|
|
5676
|
-
'--neo-bc-separator': 'var(--dd-
|
|
5677
|
-
'--neo-bc-shadow': 'var(--dd-
|
|
5773
|
+
'--neo-bc-link': 'var(--dd-neo-ana-1)',
|
|
5774
|
+
'--neo-bc-separator': 'var(--dd-neo-ana-5)',
|
|
5775
|
+
'--neo-bc-shadow': 'var(--dd-neo-ana-6)',
|
|
5678
5776
|
'--neo-bc-active': 'var(--dd-base-600)',
|
|
5679
5777
|
};
|
|
5680
5778
|
}
|