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.
|
@@ -4142,11 +4142,108 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImpor
|
|
|
4142
4142
|
`, styles: [":host{display:contents}\n"] }]
|
|
4143
4143
|
}] });
|
|
4144
4144
|
|
|
4145
|
+
function getNeobrutalAccordionStyle(color) {
|
|
4146
|
+
switch (color) {
|
|
4147
|
+
case AccentEnumColor.Violet:
|
|
4148
|
+
return {
|
|
4149
|
+
'--dd-neo-accordion-bg': 'color-mix(in srgb, var(--dd-neo-ana-3) 14%, var(--dd-neo-paper))',
|
|
4150
|
+
'--dd-neo-accordion-panel': 'color-mix(in srgb, var(--dd-neo-ana-3) 7%, var(--dd-neo-paper))',
|
|
4151
|
+
'--dd-neo-accordion-accent': 'var(--dd-neo-ana-1)',
|
|
4152
|
+
'--dd-neo-accordion-border': 'var(--dd-neo-ink)',
|
|
4153
|
+
'--dd-neo-accordion-text': 'var(--dd-neo-ink)',
|
|
4154
|
+
'--dd-neo-accordion-shadow': 'var(--dd-neo-ana-6)',
|
|
4155
|
+
};
|
|
4156
|
+
case AccentEnumColor.Orange:
|
|
4157
|
+
return {
|
|
4158
|
+
'--dd-neo-accordion-bg': 'color-mix(in srgb, var(--dd-neo-ana-2) 16%, var(--dd-neo-paper))',
|
|
4159
|
+
'--dd-neo-accordion-panel': 'color-mix(in srgb, var(--dd-neo-ana-2) 8%, var(--dd-neo-paper))',
|
|
4160
|
+
'--dd-neo-accordion-accent': 'var(--dd-neo-ana-1)',
|
|
4161
|
+
'--dd-neo-accordion-border': 'var(--dd-neo-ink)',
|
|
4162
|
+
'--dd-neo-accordion-text': 'var(--dd-neo-ink)',
|
|
4163
|
+
'--dd-neo-accordion-shadow': 'var(--dd-neo-ana-5)',
|
|
4164
|
+
};
|
|
4165
|
+
case AccentEnumColor.Gray:
|
|
4166
|
+
return {
|
|
4167
|
+
'--dd-neo-accordion-bg': 'var(--dd-base-100)',
|
|
4168
|
+
'--dd-neo-accordion-panel': 'var(--dd-neo-paper)',
|
|
4169
|
+
'--dd-neo-accordion-accent': 'var(--dd-neo-ana-2)',
|
|
4170
|
+
'--dd-neo-accordion-border': 'var(--dd-neo-ink)',
|
|
4171
|
+
'--dd-neo-accordion-text': 'var(--dd-neo-ink)',
|
|
4172
|
+
'--dd-neo-accordion-shadow': 'var(--dd-neo-ana-6)',
|
|
4173
|
+
};
|
|
4174
|
+
case AccentEnumColor.Dark:
|
|
4175
|
+
return {
|
|
4176
|
+
'--dd-neo-accordion-bg': 'var(--dd-neo-ana-4)',
|
|
4177
|
+
'--dd-neo-accordion-panel': 'color-mix(in srgb, var(--dd-neo-ana-4) 92%, var(--dd-neo-ana-3))',
|
|
4178
|
+
'--dd-neo-accordion-accent': 'var(--dd-neo-ana-1)',
|
|
4179
|
+
'--dd-neo-accordion-border': 'var(--dd-neo-ink)',
|
|
4180
|
+
'--dd-neo-accordion-text': 'var(--dd-neo-ana-4-contrast)',
|
|
4181
|
+
'--dd-neo-accordion-shadow': 'var(--dd-neo-ana-3)',
|
|
4182
|
+
};
|
|
4183
|
+
case AccentEnumColor.White:
|
|
4184
|
+
default:
|
|
4185
|
+
return {
|
|
4186
|
+
'--dd-neo-accordion-bg': 'var(--dd-neo-paper)',
|
|
4187
|
+
'--dd-neo-accordion-panel': 'var(--dd-base-100)',
|
|
4188
|
+
'--dd-neo-accordion-accent': 'var(--dd-neo-ana-6)',
|
|
4189
|
+
'--dd-neo-accordion-border': 'var(--dd-neo-ink)',
|
|
4190
|
+
'--dd-neo-accordion-text': 'var(--dd-neo-ink)',
|
|
4191
|
+
'--dd-neo-accordion-shadow': 'var(--dd-neo-ana-5)',
|
|
4192
|
+
};
|
|
4193
|
+
}
|
|
4194
|
+
}
|
|
4195
|
+
function getNeobrutalAccordionTapeStyle(color) {
|
|
4196
|
+
switch (color) {
|
|
4197
|
+
case AccentEnumColor.Violet:
|
|
4198
|
+
return {
|
|
4199
|
+
'--dd-neo-tape-accent': 'var(--dd-neo-ana-3)',
|
|
4200
|
+
'--dd-neo-tape-bg': 'color-mix(in srgb, var(--dd-neo-ana-3) 20%, var(--dd-neo-paper))',
|
|
4201
|
+
'--dd-neo-tape-stripe': 'var(--dd-neo-ana-3)',
|
|
4202
|
+
'--dd-neo-tape-border': 'var(--dd-neo-ink)',
|
|
4203
|
+
'--dd-neo-tape-text': 'var(--dd-neo-ink)',
|
|
4204
|
+
};
|
|
4205
|
+
case AccentEnumColor.Orange:
|
|
4206
|
+
return {
|
|
4207
|
+
'--dd-neo-tape-accent': 'var(--dd-neo-ana-2)',
|
|
4208
|
+
'--dd-neo-tape-bg': 'color-mix(in srgb, var(--dd-neo-ana-1) 60%, var(--dd-neo-paper))',
|
|
4209
|
+
'--dd-neo-tape-stripe': 'var(--dd-neo-ana-2)',
|
|
4210
|
+
'--dd-neo-tape-border': 'var(--dd-neo-ink)',
|
|
4211
|
+
'--dd-neo-tape-text': 'var(--dd-neo-ink)',
|
|
4212
|
+
};
|
|
4213
|
+
case AccentEnumColor.Gray:
|
|
4214
|
+
return {
|
|
4215
|
+
'--dd-neo-tape-accent': 'var(--dd-neo-ana-6)',
|
|
4216
|
+
'--dd-neo-tape-bg': 'var(--dd-base-200)',
|
|
4217
|
+
'--dd-neo-tape-stripe': 'var(--dd-neo-ana-6)',
|
|
4218
|
+
'--dd-neo-tape-border': 'var(--dd-neo-ink)',
|
|
4219
|
+
'--dd-neo-tape-text': 'var(--dd-neo-ink)',
|
|
4220
|
+
};
|
|
4221
|
+
case AccentEnumColor.Dark:
|
|
4222
|
+
return {
|
|
4223
|
+
'--dd-neo-tape-accent': 'var(--dd-neo-ana-1)',
|
|
4224
|
+
'--dd-neo-tape-bg': 'var(--dd-neo-ana-4)',
|
|
4225
|
+
'--dd-neo-tape-stripe': 'var(--dd-neo-ana-5)',
|
|
4226
|
+
'--dd-neo-tape-border': 'var(--dd-neo-ink)',
|
|
4227
|
+
'--dd-neo-tape-text': 'var(--dd-neo-ana-4-contrast)',
|
|
4228
|
+
};
|
|
4229
|
+
case AccentEnumColor.White:
|
|
4230
|
+
default:
|
|
4231
|
+
return {
|
|
4232
|
+
'--dd-neo-tape-accent': 'var(--dd-neo-ana-6)',
|
|
4233
|
+
'--dd-neo-tape-bg': 'color-mix(in srgb, var(--dd-neo-ana-6) 12%, var(--dd-neo-paper))',
|
|
4234
|
+
'--dd-neo-tape-stripe': 'var(--dd-neo-ana-6)',
|
|
4235
|
+
'--dd-neo-tape-border': 'var(--dd-neo-ink)',
|
|
4236
|
+
'--dd-neo-tape-text': 'var(--dd-neo-ink)',
|
|
4237
|
+
};
|
|
4238
|
+
}
|
|
4239
|
+
}
|
|
4240
|
+
|
|
4145
4241
|
class DuckDevAccordionNeobrutalComponent {
|
|
4146
4242
|
content = input.required({ ...(ngDevMode ? { debugName: "content" } : {}) });
|
|
4147
4243
|
title = input.required({ ...(ngDevMode ? { debugName: "title" } : {}) });
|
|
4148
4244
|
stampLabel = input.required({ ...(ngDevMode ? { debugName: "stampLabel" } : {}) });
|
|
4149
4245
|
color = input(AccentEnumColor.Violet, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
4246
|
+
paletteStyle = computed(() => getNeobrutalAccordionStyle(this.color()), { ...(ngDevMode ? { debugName: "paletteStyle" } : {}) });
|
|
4150
4247
|
isOpen = signal(false, { ...(ngDevMode ? { debugName: "isOpen" } : {}) });
|
|
4151
4248
|
stateLabel = computed(() => (this.isOpen() ? 'OPEN' : 'CLOSED'), { ...(ngDevMode ? { debugName: "stateLabel" } : {}) });
|
|
4152
4249
|
titleTemplate = computed(() => {
|
|
@@ -4161,28 +4258,29 @@ class DuckDevAccordionNeobrutalComponent {
|
|
|
4161
4258
|
this.isOpen.update((prev) => !prev);
|
|
4162
4259
|
}
|
|
4163
4260
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4164
|
-
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()\" [
|
|
4261
|
+
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 });
|
|
4165
4262
|
}
|
|
4166
4263
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalComponent, decorators: [{
|
|
4167
4264
|
type: Component,
|
|
4168
|
-
args: [{ selector: 'duck-dev-accordion-neobrutal', standalone: true, imports: [NgTemplateOutlet, DuckDevIcon], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"dd-accordion-brutal\" [class.is-open]=\"isOpen()\" [
|
|
4265
|
+
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"] }]
|
|
4169
4266
|
}], 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 }] }] } });
|
|
4170
4267
|
|
|
4171
4268
|
class DuckDevAccordionNeobrutalTapeComponent {
|
|
4172
4269
|
content = input.required({ ...(ngDevMode ? { debugName: "content" } : {}) });
|
|
4173
4270
|
title = input.required({ ...(ngDevMode ? { debugName: "title" } : {}) });
|
|
4174
4271
|
color = input(AccentEnumColor.Orange, { ...(ngDevMode ? { debugName: "color" } : {}) });
|
|
4272
|
+
paletteStyle = computed(() => getNeobrutalAccordionTapeStyle(this.color()), { ...(ngDevMode ? { debugName: "paletteStyle" } : {}) });
|
|
4175
4273
|
isOpen = signal(false, { ...(ngDevMode ? { debugName: "isOpen" } : {}) });
|
|
4176
4274
|
stateLabel = computed(() => (this.isOpen() ? 'OPEN' : 'CLOSED'), { ...(ngDevMode ? { debugName: "stateLabel" } : {}) });
|
|
4177
4275
|
toggle() {
|
|
4178
4276
|
this.isOpen.update((prev) => !prev);
|
|
4179
4277
|
}
|
|
4180
4278
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalTapeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4181
|
-
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()\" [
|
|
4279
|
+
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 });
|
|
4182
4280
|
}
|
|
4183
4281
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.1", ngImport: i0, type: DuckDevAccordionNeobrutalTapeComponent, decorators: [{
|
|
4184
4282
|
type: Component,
|
|
4185
|
-
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()\" [
|
|
4283
|
+
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"] }]
|
|
4186
4284
|
}], 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 }] }] } });
|
|
4187
4285
|
|
|
4188
4286
|
class SliderClassic {
|
|
@@ -5223,47 +5321,47 @@ class DuckDevSegmentNeobrutal {
|
|
|
5223
5321
|
switch (color) {
|
|
5224
5322
|
case AccentEnumColor.Violet:
|
|
5225
5323
|
return {
|
|
5226
|
-
'--dd-segment-neo-surface': 'var(--dd-
|
|
5227
|
-
'--dd-segment-neo-panel': 'color-mix(in srgb, var(--dd-
|
|
5228
|
-
'--dd-segment-neo-accent': 'var(--dd-
|
|
5229
|
-
'--dd-segment-neo-shadow': 'var(--dd-
|
|
5230
|
-
'--dd-segment-neo-text': 'var(--dd-
|
|
5231
|
-
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-
|
|
5324
|
+
'--dd-segment-neo-surface': 'var(--dd-neo-ana-3)',
|
|
5325
|
+
'--dd-segment-neo-panel': 'color-mix(in srgb, var(--dd-neo-ana-3) 84%, var(--dd-base-0))',
|
|
5326
|
+
'--dd-segment-neo-accent': 'var(--dd-neo-ana-1)',
|
|
5327
|
+
'--dd-segment-neo-shadow': 'var(--dd-neo-ana-6)',
|
|
5328
|
+
'--dd-segment-neo-text': 'var(--dd-neo-ana-3-contrast)',
|
|
5329
|
+
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-neo-ana-3-contrast) 74%, transparent)',
|
|
5232
5330
|
};
|
|
5233
5331
|
case AccentEnumColor.Orange:
|
|
5234
5332
|
return {
|
|
5235
|
-
'--dd-segment-neo-surface': 'var(--dd-
|
|
5236
|
-
'--dd-segment-neo-panel': 'color-mix(in srgb, var(--dd-
|
|
5237
|
-
'--dd-segment-neo-accent': 'var(--dd-
|
|
5238
|
-
'--dd-segment-neo-shadow': 'var(--dd-
|
|
5239
|
-
'--dd-segment-neo-text': 'var(--dd-
|
|
5240
|
-
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-
|
|
5333
|
+
'--dd-segment-neo-surface': 'var(--dd-neo-ana-2)',
|
|
5334
|
+
'--dd-segment-neo-panel': 'color-mix(in srgb, var(--dd-neo-ana-5) 68%, var(--dd-base-0))',
|
|
5335
|
+
'--dd-segment-neo-accent': 'var(--dd-neo-ana-1)',
|
|
5336
|
+
'--dd-segment-neo-shadow': 'var(--dd-neo-ana-5)',
|
|
5337
|
+
'--dd-segment-neo-text': 'var(--dd-neo-ana-2-contrast)',
|
|
5338
|
+
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-neo-ana-2-contrast) 66%, transparent)',
|
|
5241
5339
|
};
|
|
5242
5340
|
case AccentEnumColor.Gray:
|
|
5243
5341
|
return {
|
|
5244
5342
|
'--dd-segment-neo-surface': 'var(--dd-base-100)',
|
|
5245
5343
|
'--dd-segment-neo-panel': 'var(--dd-base-0)',
|
|
5246
|
-
'--dd-segment-neo-accent': 'var(--dd-
|
|
5247
|
-
'--dd-segment-neo-shadow': 'var(--dd-
|
|
5344
|
+
'--dd-segment-neo-accent': 'var(--dd-neo-ana-1)',
|
|
5345
|
+
'--dd-segment-neo-shadow': 'var(--dd-neo-ana-6)',
|
|
5248
5346
|
'--dd-segment-neo-text': 'var(--dd-base-600)',
|
|
5249
5347
|
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-base-600) 58%, transparent)',
|
|
5250
5348
|
};
|
|
5251
5349
|
case AccentEnumColor.Dark:
|
|
5252
5350
|
return {
|
|
5253
|
-
'--dd-segment-neo-surface': 'var(--dd-
|
|
5254
|
-
'--dd-segment-neo-panel': 'color-mix(in srgb, var(--dd-
|
|
5255
|
-
'--dd-segment-neo-accent': 'var(--dd-
|
|
5256
|
-
'--dd-segment-neo-shadow': 'var(--dd-
|
|
5257
|
-
'--dd-segment-neo-text': 'var(--dd-
|
|
5258
|
-
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-
|
|
5351
|
+
'--dd-segment-neo-surface': 'var(--dd-neo-ana-4)',
|
|
5352
|
+
'--dd-segment-neo-panel': 'color-mix(in srgb, var(--dd-neo-ana-4) 92%, var(--dd-neo-ana-3))',
|
|
5353
|
+
'--dd-segment-neo-accent': 'var(--dd-neo-ana-1)',
|
|
5354
|
+
'--dd-segment-neo-shadow': 'var(--dd-neo-ana-3)',
|
|
5355
|
+
'--dd-segment-neo-text': 'var(--dd-neo-ana-4-contrast)',
|
|
5356
|
+
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-neo-ana-4-contrast) 68%, transparent)',
|
|
5259
5357
|
};
|
|
5260
5358
|
case AccentEnumColor.White:
|
|
5261
5359
|
default:
|
|
5262
5360
|
return {
|
|
5263
5361
|
'--dd-segment-neo-surface': 'var(--dd-base-0)',
|
|
5264
5362
|
'--dd-segment-neo-panel': 'var(--dd-base-100)',
|
|
5265
|
-
'--dd-segment-neo-accent': 'var(--dd-
|
|
5266
|
-
'--dd-segment-neo-shadow': 'var(--dd-
|
|
5363
|
+
'--dd-segment-neo-accent': 'var(--dd-neo-ana-5)',
|
|
5364
|
+
'--dd-segment-neo-shadow': 'var(--dd-neo-ana-6)',
|
|
5267
5365
|
'--dd-segment-neo-text': 'var(--dd-base-600)',
|
|
5268
5366
|
'--dd-segment-neo-muted': 'color-mix(in srgb, var(--dd-base-600) 58%, transparent)',
|
|
5269
5367
|
};
|
|
@@ -5346,47 +5444,47 @@ class DuckDevSegmentNeobrutalVertical {
|
|
|
5346
5444
|
switch (color) {
|
|
5347
5445
|
case AccentEnumColor.Violet:
|
|
5348
5446
|
return {
|
|
5349
|
-
'--dd-segment-neo-v-surface': 'var(--dd-
|
|
5350
|
-
'--dd-segment-neo-v-panel': 'color-mix(in srgb, var(--dd-
|
|
5351
|
-
'--dd-segment-neo-v-accent': 'var(--dd-
|
|
5352
|
-
'--dd-segment-neo-v-shadow': 'var(--dd-
|
|
5353
|
-
'--dd-segment-neo-v-text': 'var(--dd-
|
|
5354
|
-
'--dd-segment-neo-v-muted': 'color-mix(in srgb, var(--dd-
|
|
5447
|
+
'--dd-segment-neo-v-surface': 'var(--dd-neo-ana-3)',
|
|
5448
|
+
'--dd-segment-neo-v-panel': 'color-mix(in srgb, var(--dd-neo-ana-3) 84%, var(--dd-base-0))',
|
|
5449
|
+
'--dd-segment-neo-v-accent': 'var(--dd-neo-ana-1)',
|
|
5450
|
+
'--dd-segment-neo-v-shadow': 'var(--dd-neo-ana-6)',
|
|
5451
|
+
'--dd-segment-neo-v-text': 'var(--dd-neo-ana-3-contrast)',
|
|
5452
|
+
'--dd-segment-neo-v-muted': 'color-mix(in srgb, var(--dd-neo-ana-3-contrast) 74%, transparent)',
|
|
5355
5453
|
};
|
|
5356
5454
|
case AccentEnumColor.Orange:
|
|
5357
5455
|
return {
|
|
5358
|
-
'--dd-segment-neo-v-surface': 'var(--dd-
|
|
5359
|
-
'--dd-segment-neo-v-panel': 'color-mix(in srgb, var(--dd-
|
|
5360
|
-
'--dd-segment-neo-v-accent': 'var(--dd-
|
|
5361
|
-
'--dd-segment-neo-v-shadow': 'var(--dd-
|
|
5362
|
-
'--dd-segment-neo-v-text': 'var(--dd-
|
|
5363
|
-
'--dd-segment-neo-v-muted': 'color-mix(in srgb, var(--dd-
|
|
5456
|
+
'--dd-segment-neo-v-surface': 'var(--dd-neo-ana-2)',
|
|
5457
|
+
'--dd-segment-neo-v-panel': 'color-mix(in srgb, var(--dd-neo-ana-5) 68%, var(--dd-base-0))',
|
|
5458
|
+
'--dd-segment-neo-v-accent': 'var(--dd-neo-ana-1)',
|
|
5459
|
+
'--dd-segment-neo-v-shadow': 'var(--dd-neo-ana-5)',
|
|
5460
|
+
'--dd-segment-neo-v-text': 'var(--dd-neo-ana-2-contrast)',
|
|
5461
|
+
'--dd-segment-neo-v-muted': 'color-mix(in srgb, var(--dd-neo-ana-2-contrast) 66%, transparent)',
|
|
5364
5462
|
};
|
|
5365
5463
|
case AccentEnumColor.Gray:
|
|
5366
5464
|
return {
|
|
5367
5465
|
'--dd-segment-neo-v-surface': 'var(--dd-base-100)',
|
|
5368
5466
|
'--dd-segment-neo-v-panel': 'var(--dd-base-0)',
|
|
5369
|
-
'--dd-segment-neo-v-accent': 'var(--dd-
|
|
5370
|
-
'--dd-segment-neo-v-shadow': 'var(--dd-
|
|
5467
|
+
'--dd-segment-neo-v-accent': 'var(--dd-neo-ana-1)',
|
|
5468
|
+
'--dd-segment-neo-v-shadow': 'var(--dd-neo-ana-6)',
|
|
5371
5469
|
'--dd-segment-neo-v-text': 'var(--dd-base-600)',
|
|
5372
5470
|
'--dd-segment-neo-v-muted': 'color-mix(in srgb, var(--dd-base-600) 58%, transparent)',
|
|
5373
5471
|
};
|
|
5374
5472
|
case AccentEnumColor.Dark:
|
|
5375
5473
|
return {
|
|
5376
|
-
'--dd-segment-neo-v-surface': 'var(--dd-
|
|
5377
|
-
'--dd-segment-neo-v-panel': 'color-mix(in srgb, var(--dd-
|
|
5378
|
-
'--dd-segment-neo-v-accent': 'var(--dd-
|
|
5379
|
-
'--dd-segment-neo-v-shadow': 'var(--dd-
|
|
5380
|
-
'--dd-segment-neo-v-text': 'var(--dd-
|
|
5381
|
-
'--dd-segment-neo-v-muted': 'color-mix(in srgb, var(--dd-
|
|
5474
|
+
'--dd-segment-neo-v-surface': 'var(--dd-neo-ana-4)',
|
|
5475
|
+
'--dd-segment-neo-v-panel': 'color-mix(in srgb, var(--dd-neo-ana-4) 92%, var(--dd-neo-ana-3))',
|
|
5476
|
+
'--dd-segment-neo-v-accent': 'var(--dd-neo-ana-1)',
|
|
5477
|
+
'--dd-segment-neo-v-shadow': 'var(--dd-neo-ana-3)',
|
|
5478
|
+
'--dd-segment-neo-v-text': 'var(--dd-neo-ana-4-contrast)',
|
|
5479
|
+
'--dd-segment-neo-v-muted': 'color-mix(in srgb, var(--dd-neo-ana-4-contrast) 68%, transparent)',
|
|
5382
5480
|
};
|
|
5383
5481
|
case AccentEnumColor.White:
|
|
5384
5482
|
default:
|
|
5385
5483
|
return {
|
|
5386
5484
|
'--dd-segment-neo-v-surface': 'var(--dd-base-0)',
|
|
5387
|
-
'--dd-segment-neo-v-panel': 'color-mix(in srgb, var(--dd-
|
|
5388
|
-
'--dd-segment-neo-v-accent': 'var(--dd-
|
|
5389
|
-
'--dd-segment-neo-v-shadow': 'var(--dd-
|
|
5485
|
+
'--dd-segment-neo-v-panel': 'color-mix(in srgb, var(--dd-neo-ana-5) 14%, var(--dd-base-0))',
|
|
5486
|
+
'--dd-segment-neo-v-accent': 'var(--dd-neo-ana-5)',
|
|
5487
|
+
'--dd-segment-neo-v-shadow': 'var(--dd-neo-ana-6)',
|
|
5390
5488
|
'--dd-segment-neo-v-text': 'var(--dd-base-600)',
|
|
5391
5489
|
'--dd-segment-neo-v-muted': 'color-mix(in srgb, var(--dd-base-400) 72%, transparent)',
|
|
5392
5490
|
};
|
|
@@ -5693,48 +5791,48 @@ class DuckDevBreadcrumbNeobrutal {
|
|
|
5693
5791
|
switch (color) {
|
|
5694
5792
|
case AccentEnumColor.Violet:
|
|
5695
5793
|
return {
|
|
5696
|
-
'--neo-bc-surface': 'var(--dd-
|
|
5697
|
-
'--neo-bc-text': 'var(--dd-
|
|
5698
|
-
'--neo-bc-link': 'var(--dd-
|
|
5699
|
-
'--neo-bc-separator': 'var(--dd-
|
|
5700
|
-
'--neo-bc-shadow': 'var(--dd-
|
|
5701
|
-
'--neo-bc-active': 'var(--dd-
|
|
5794
|
+
'--neo-bc-surface': 'var(--dd-neo-ana-3)',
|
|
5795
|
+
'--neo-bc-text': 'var(--dd-neo-ana-3-contrast)',
|
|
5796
|
+
'--neo-bc-link': 'var(--dd-neo-ana-1)',
|
|
5797
|
+
'--neo-bc-separator': 'var(--dd-neo-ana-1)',
|
|
5798
|
+
'--neo-bc-shadow': 'var(--dd-neo-ana-6)',
|
|
5799
|
+
'--neo-bc-active': 'var(--dd-neo-ana-3-contrast)',
|
|
5702
5800
|
};
|
|
5703
5801
|
case AccentEnumColor.Orange:
|
|
5704
5802
|
return {
|
|
5705
|
-
'--neo-bc-surface': 'var(--dd-
|
|
5706
|
-
'--neo-bc-text': 'var(--dd-
|
|
5707
|
-
'--neo-bc-link': 'var(--dd-
|
|
5708
|
-
'--neo-bc-separator': 'var(--dd-
|
|
5709
|
-
'--neo-bc-shadow': 'var(--dd-
|
|
5710
|
-
'--neo-bc-active': 'var(--dd-
|
|
5803
|
+
'--neo-bc-surface': 'var(--dd-neo-ana-2)',
|
|
5804
|
+
'--neo-bc-text': 'var(--dd-neo-ana-2-contrast)',
|
|
5805
|
+
'--neo-bc-link': 'var(--dd-neo-ana-1)',
|
|
5806
|
+
'--neo-bc-separator': 'var(--dd-neo-ana-5)',
|
|
5807
|
+
'--neo-bc-shadow': 'var(--dd-neo-ana-5)',
|
|
5808
|
+
'--neo-bc-active': 'var(--dd-neo-ana-2-contrast)',
|
|
5711
5809
|
};
|
|
5712
5810
|
case AccentEnumColor.Gray:
|
|
5713
5811
|
return {
|
|
5714
5812
|
'--neo-bc-surface': 'var(--dd-base-200)',
|
|
5715
5813
|
'--neo-bc-text': 'var(--dd-base-600)',
|
|
5716
|
-
'--neo-bc-link': 'var(--dd-
|
|
5717
|
-
'--neo-bc-separator': 'var(--dd-
|
|
5718
|
-
'--neo-bc-shadow': 'var(--dd-
|
|
5814
|
+
'--neo-bc-link': 'var(--dd-neo-ana-1)',
|
|
5815
|
+
'--neo-bc-separator': 'var(--dd-neo-ana-2)',
|
|
5816
|
+
'--neo-bc-shadow': 'var(--dd-neo-ana-6)',
|
|
5719
5817
|
'--neo-bc-active': 'var(--dd-base-600)',
|
|
5720
5818
|
};
|
|
5721
5819
|
case AccentEnumColor.Dark:
|
|
5722
5820
|
return {
|
|
5723
|
-
'--neo-bc-surface': 'var(--dd-
|
|
5724
|
-
'--neo-bc-text': 'var(--dd-
|
|
5725
|
-
'--neo-bc-link': 'var(--dd-
|
|
5726
|
-
'--neo-bc-separator': 'var(--dd-
|
|
5727
|
-
'--neo-bc-shadow': 'var(--dd-
|
|
5728
|
-
'--neo-bc-active': 'var(--dd-
|
|
5821
|
+
'--neo-bc-surface': 'var(--dd-neo-ana-4)',
|
|
5822
|
+
'--neo-bc-text': 'var(--dd-neo-ana-4-contrast)',
|
|
5823
|
+
'--neo-bc-link': 'var(--dd-neo-ana-1)',
|
|
5824
|
+
'--neo-bc-separator': 'var(--dd-neo-ana-5)',
|
|
5825
|
+
'--neo-bc-shadow': 'var(--dd-neo-ana-3)',
|
|
5826
|
+
'--neo-bc-active': 'var(--dd-neo-ana-4-contrast)',
|
|
5729
5827
|
};
|
|
5730
5828
|
case AccentEnumColor.White:
|
|
5731
5829
|
default:
|
|
5732
5830
|
return {
|
|
5733
5831
|
'--neo-bc-surface': 'var(--dd-base-0)',
|
|
5734
5832
|
'--neo-bc-text': 'var(--dd-base-600)',
|
|
5735
|
-
'--neo-bc-link': 'var(--dd-
|
|
5736
|
-
'--neo-bc-separator': 'var(--dd-
|
|
5737
|
-
'--neo-bc-shadow': 'var(--dd-
|
|
5833
|
+
'--neo-bc-link': 'var(--dd-neo-ana-1)',
|
|
5834
|
+
'--neo-bc-separator': 'var(--dd-neo-ana-5)',
|
|
5835
|
+
'--neo-bc-shadow': 'var(--dd-neo-ana-6)',
|
|
5738
5836
|
'--neo-bc-active': 'var(--dd-base-600)',
|
|
5739
5837
|
};
|
|
5740
5838
|
}
|