From c3cd8f260d1be566ac7822a9c8a7000432ba71f3 Mon Sep 17 00:00:00 2001 From: Alex Inkin Date: Fri, 18 Oct 2024 15:36:38 +0400 Subject: [PATCH] feat(core): add new appearances (#9526) Co-authored-by: taiga-family-bot --- .../legend-item/legend-item.template.html | 2 +- .../components/pie-chart/pie-chart.style.less | 1 + .../ring-chart/ring-chart.style.less | 1 + projects/addon-doc/components/code/index.html | 2 +- .../code/tests/code.component.spec.ts | 6 +- .../documentation/documentation.template.html | 2 +- .../components/example/example.component.ts | 2 +- .../components/example/example.style.less | 1 + .../components/language-switcher/index.html | 2 +- .../navigation/navigation.providers.ts | 2 +- .../addon-mobile/styles/common/button.less | 16 ++-- .../components/table/th/th.component.ts | 1 - .../constants/attr-with-values-to-replace.ts | 5 -- .../templates/migrate-button-appearance.ts | 4 +- ...chematic-migrate-button-appearance.spec.ts | 8 +- .../v4/tests/schematic-migrate-button.spec.ts | 2 +- .../utils/miscellaneous/provide-options.ts | 7 +- .../core/components/alert/alert.tokens.ts | 16 +++- .../core/components/dialog/dialog.style.less | 1 + projects/core/components/link/link.options.ts | 2 +- .../notification/notification.directive.ts | 2 +- .../notification/notification.options.ts | 8 +- .../appearance/appearance.options.ts | 19 ++-- projects/core/styles/components/link.less | 2 + .../core/styles/components/notification.less | 2 +- projects/core/styles/mixins/appearance.less | 49 ++++++++--- projects/core/styles/mixins/appearance.scss | 27 ++++++ projects/core/styles/mixins/wrapper.less | 6 +- projects/core/styles/theme/appearance.less | 4 +- .../core/styles/theme/appearance/action.less | 48 +++++++++++ .../core/styles/theme/appearance/flat.less | 23 +++++ .../core/styles/theme/appearance/icon.less | 38 -------- .../core/styles/theme/appearance/link.less | 11 --- .../styles/theme/appearance/opposite.less | 8 +- .../core/styles/theme/appearance/outline.less | 38 ++++++++ .../core/styles/theme/appearance/primary.less | 30 +++++++ .../styles/theme/appearance/secondary.less | 29 ++----- .../core/styles/theme/appearance/status.less | 12 ++- projects/core/styles/theme/wrapper.less | 86 +++++-------------- .../kit/calendar-range/calendar-range.spec.ts | 2 +- .../demo/src/components/appearance/index.ts | 29 ++++--- .../demo/src/modules/app/app.component.ts | 3 +- .../demo/src/modules/app/app.template.html | 9 +- .../version-manager.template.html | 2 +- .../components/alert/examples/2/index.ts | 2 +- .../components/alert/examples/3/index.ts | 4 +- .../components/alert/examples/5/index.ts | 4 +- .../alert/examples/import/define-options.md | 6 +- .../src/modules/components/alert/index.ts | 8 +- .../components/app-bar/examples/4/index.html | 1 - .../components/badge/examples/1/index.html | 4 +- .../src/modules/components/badge/index.ts | 4 +- .../src/modules/components/block/index.ts | 2 +- .../components/button/examples/2/index.html | 51 ++++------- .../components/button/examples/2/index.ts | 10 ++- .../components/button/examples/3/index.html | 2 +- .../src/modules/components/button/index.html | 2 +- .../src/modules/components/button/index.ts | 12 --- .../components/carousel/examples/3/index.html | 2 +- .../components/cell/examples/2/index.html | 4 +- .../components/cell/examples/3/index.html | 4 +- .../components/cell/examples/6/index.html | 2 +- .../components/cell/examples/8/index.html | 6 +- .../components/chip/examples/1/index.html | 6 +- .../components/chip/examples/3/index.html | 8 +- .../components/chip/examples/3/index.ts | 4 +- .../components/confirm/examples/1/index.ts | 5 +- .../components/filter/examples/4/index.html | 2 +- .../icons-group/icons-group.component.ts | 2 +- .../icons-group/icons-group.template.html | 2 +- .../modules/components/input-color/index.html | 2 +- .../examples/4/index.html | 2 +- .../input-phone-international/index.html | 2 +- .../src/modules/components/input/index.html | 2 +- .../src/modules/components/island/index.html | 2 +- .../items-with-more/examples/2/index.html | 2 +- .../components/like/examples/4/index.ts | 2 +- .../components/link/examples/3/index.html | 6 +- .../navigation/examples/1/index.html | 4 +- .../navigation/examples/2/index.html | 2 +- .../navigation/examples/3/index.html | 2 +- .../notification/examples/import/template.md | 2 +- .../components/notification/index.html | 5 +- .../components/primitive-textfield/index.html | 2 +- .../components/status/examples/1/index.html | 2 +- .../swipe-action/examples/1/index.html | 2 +- .../swipe-action/examples/2/index.html | 2 +- .../components/table/examples/2/index.html | 6 +- .../src/modules/components/tag/index.html | 2 +- .../components/textarea/examples/7/index.html | 7 ++ .../components/textarea/examples/7/index.ts | 16 ++++ .../modules/components/textarea/index.html | 7 ++ .../components/tooltip/examples/4/index.html | 2 +- .../customization/dialogs/examples/1/index.ts | 4 +- .../appearance/examples/4/index.html | 22 +++-- .../appearance/examples/4/index.less | 3 +- .../directives/appearance/examples/4/index.ts | 37 ++++---- .../dropdown-open/examples/4/index.html | 2 +- .../hint-manual/examples/1/index.html | 2 +- .../sensitive/examples/2/index.html | 2 +- .../action-bar/action-bar.component.ts | 2 +- .../kit/components/block/block.options.ts | 2 +- .../breadcrumbs/breadcrumbs.component.ts | 2 +- .../components/checkbox/checkbox.options.ts | 3 +- .../kit/components/radio/radio.options.ts | 2 +- .../kit/directives/tooltip/tooltip.style.less | 6 ++ projects/kit/styles/components/badge.less | 18 ++-- projects/kit/styles/components/chip.less | 6 +- .../components/app-bar/app-bar.providers.ts | 2 +- .../components/navigation/aside.component.ts | 2 +- .../components/navigation/aside.style.less | 1 - .../components/navigation/drawer.component.ts | 4 +- .../components/navigation/drawer.style.less | 5 +- .../components/navigation/header.component.ts | 4 +- .../components/navigation/header.style.less | 3 - .../components/tooltip/tooltip.module.ts | 4 +- .../components/tooltip/tooltip.template.html | 5 +- .../directives/wrapper/wrapper.directive.ts | 1 + 118 files changed, 550 insertions(+), 406 deletions(-) create mode 100644 projects/core/styles/theme/appearance/action.less create mode 100644 projects/core/styles/theme/appearance/flat.less delete mode 100644 projects/core/styles/theme/appearance/icon.less delete mode 100644 projects/core/styles/theme/appearance/link.less create mode 100644 projects/demo/src/modules/components/textarea/examples/7/index.html create mode 100644 projects/demo/src/modules/components/textarea/examples/7/index.ts diff --git a/projects/addon-charts/components/legend-item/legend-item.template.html b/projects/addon-charts/components/legend-item/legend-item.template.html index 893ab04776ad..246538809d4a 100644 --- a/projects/addon-charts/components/legend-item/legend-item.template.html +++ b/projects/addon-charts/components/legend-item/legend-item.template.html @@ -1,5 +1,5 @@ \t `.replace('\t', ' '), // prettier problem @@ -71,7 +71,7 @@ describe('TuiDocCodeComponent', () => { expect(fixture.nativeElement.querySelector('.t-code')?.innerHTML.trim()).toEqual( `const a = 10;
- \t
`.replace('\t', ' '), // prettier problem @@ -89,7 +89,7 @@ describe('TuiDocCodeComponent', () => { expect(fixture.nativeElement.querySelector('.t-code')?.innerHTML.trim()).toEqual( `const a = 15;
- \t
`.replace('\t', ' '), // prettier problem diff --git a/projects/addon-doc/components/documentation/documentation.template.html b/projects/addon-doc/components/documentation/documentation.template.html index 2fe0c7107072..e5cb3bf17dcd 100644 --- a/projects/addon-doc/components/documentation/documentation.template.html +++ b/projects/addon-doc/components/documentation/documentation.template.html @@ -46,7 +46,7 @@ Deprecated diff --git a/projects/addon-doc/components/example/example.component.ts b/projects/addon-doc/components/example/example.component.ts index 5d7759902461..acfa2b5b0c62 100644 --- a/projects/addon-doc/components/example/example.component.ts +++ b/projects/addon-doc/components/example/example.component.ts @@ -146,7 +146,7 @@ export class TuiDocExample { protected copyExampleLink(target: EventTarget | null): void { this.clipboard.copy((target as HTMLAnchorElement | null)?.href ?? ''); this.alerts - .open(this.texts[1], {label: this.texts[2], appearance: 'success'}) + .open(this.texts[1], {label: this.texts[2], appearance: 'positive'}) .subscribe(); } diff --git a/projects/addon-doc/components/example/example.style.less b/projects/addon-doc/components/example/example.style.less index f9d4a70db145..ad23e0b39639 100644 --- a/projects/addon-doc/components/example/example.style.less +++ b/projects/addon-doc/components/example/example.style.less @@ -97,6 +97,7 @@ .t-demo { .customize-scroll(); + position: relative; padding: 2rem; max-inline-size: 100%; box-sizing: border-box; diff --git a/projects/addon-doc/components/language-switcher/index.html b/projects/addon-doc/components/language-switcher/index.html index 00220f727f90..fc131ac7a762 100644 --- a/projects/addon-doc/components/language-switcher/index.html +++ b/projects/addon-doc/components/language-switcher/index.html @@ -8,7 +8,7 @@ /> - + - + - + `; -const TEMPLATE_WITH_CONDITION_AFTER = ` +const TEMPLATE_WITH_CONDITION_AFTER = ` ( provide: InjectionToken, @@ -8,9 +8,8 @@ export function tuiProvideOptions( ): FactoryProvider { return { provide, - deps: [[new Optional(), new SkipSelf(), provide]], - useFactory: (parent: T | null): T => ({ - ...(parent || fallback), + useFactory: (): T => ({ + ...(inject(provide, {optional: true, skipSelf: true}) || fallback), ...options, }), }; diff --git a/projects/core/components/alert/alert.tokens.ts b/projects/core/components/alert/alert.tokens.ts index 29835a238280..a6ddae746daf 100644 --- a/projects/core/components/alert/alert.tokens.ts +++ b/projects/core/components/alert/alert.tokens.ts @@ -1,4 +1,4 @@ -import type {Type} from '@angular/core'; +import type {FactoryProvider, Type} from '@angular/core'; import {inject} from '@angular/core'; import type {TuiPopover} from '@taiga-ui/cdk/services'; import {TUI_IS_MOBILE} from '@taiga-ui/cdk/tokens'; @@ -53,3 +53,17 @@ export const TUI_ALERTS_GROUPED = tuiCreateTokenFromFactory(() => }), ), ); + +export function tuiAlertOptionsProvider( + options: Partial, +): FactoryProvider { + return { + provide: TUI_ALERT_OPTIONS, + useFactory: (): TuiAlertOptions => ({ + ...TUI_ALERT_DEFAULT_OPTIONS, + ...(inject(TUI_ALERT_OPTIONS, {optional: true, skipSelf: true}) || + inject(TUI_NOTIFICATION_OPTIONS)), + ...options, + }), + }; +} diff --git a/projects/core/components/dialog/dialog.style.less b/projects/core/components/dialog/dialog.style.less index 9cbe165b99cb..8f0ba87cfbf0 100644 --- a/projects/core/components/dialog/dialog.style.less +++ b/projects/core/components/dialog/dialog.style.less @@ -97,6 +97,7 @@ .t-heading { margin: 0 0 0.5rem; + padding-inline-end: 2rem; overflow-wrap: break-word; font: var(--tui-font-heading-4); diff --git a/projects/core/components/link/link.options.ts b/projects/core/components/link/link.options.ts index d2b54396c8cb..fe5cb365a4de 100644 --- a/projects/core/components/link/link.options.ts +++ b/projects/core/components/link/link.options.ts @@ -7,7 +7,7 @@ export interface TuiLinkOptions extends TuiAppearanceOptions { } export const TUI_LINK_DEFAULT_OPTIONS: TuiLinkOptions = { - appearance: 'link', + appearance: 'action', pseudo: false, }; diff --git a/projects/core/components/notification/notification.directive.ts b/projects/core/components/notification/notification.directive.ts index b57c505795d8..da1b7f2adef2 100644 --- a/projects/core/components/notification/notification.directive.ts +++ b/projects/core/components/notification/notification.directive.ts @@ -41,7 +41,7 @@ class TuiNotificationStyles {} pseudo: true, }), tuiButtonOptionsProvider({ - appearance: 'whiteblock', + appearance: 'outline-grayscale', size: 's', }), ], diff --git a/projects/core/components/notification/notification.options.ts b/projects/core/components/notification/notification.options.ts index ad9065a86377..16a6364d4725 100644 --- a/projects/core/components/notification/notification.options.ts +++ b/projects/core/components/notification/notification.options.ts @@ -11,10 +11,14 @@ export interface TuiNotificationOptions extends TuiAppearanceOptions { const ICONS: Record = { info: '@tui.info', - success: '@tui.circle-check', - error: '@tui.circle-x', + positive: '@tui.circle-check', + negative: '@tui.circle-x', warning: '@tui.circle-alert', neutral: '@tui.info', + /* TODO @deprecated remove in v5 */ + success: '@tui.circle-check', + /* TODO @deprecated remove in v5 */ + error: '@tui.circle-x', }; /** Default values for the notification options. */ diff --git a/projects/core/directives/appearance/appearance.options.ts b/projects/core/directives/appearance/appearance.options.ts index 3266fcac1c22..00c7b424a139 100644 --- a/projects/core/directives/appearance/appearance.options.ts +++ b/projects/core/directives/appearance/appearance.options.ts @@ -7,23 +7,30 @@ import {tuiCreateToken, tuiProvide} from '@taiga-ui/cdk/utils/miscellaneous'; */ type Appearance = TuiLooseUnion< | 'accent' - | 'destructive' - | 'error' + | 'action-destructive' + | 'action-grayscale' + | 'action' + | 'flat-destructive' + | 'flat-grayscale' | 'flat' | 'floating' | 'glass' | 'icon' | 'info' - | 'link' + | 'negative' | 'neutral' - | 'opposite' + | 'outline-destructive' + | 'outline-grayscale' | 'outline' + | 'positive' + | 'primary-destructive' + | 'primary-grayscale' | 'primary' + | 'secondary-destructive' + | 'secondary-grayscale' | 'secondary' - | 'success' | 'textfield' | 'warning' - | 'whiteblock' >; export interface TuiAppearanceOptions { diff --git a/projects/core/styles/components/link.less b/projects/core/styles/components/link.less index 9f2463be9b99..fac8c9ef6dfb 100644 --- a/projects/core/styles/components/link.less +++ b/projects/core/styles/components/link.less @@ -14,6 +14,7 @@ * Icons, Appearance, Button */ [tuiLink] { + // TODO: Remove in v5 --tui-text-tertiary: var(--tui-text-secondary); padding: 0; @@ -27,6 +28,7 @@ text-decoration-thickness: 0.7px; text-decoration-color: color-mix(in lch, currentColor, transparent); + // TODO: Remove in v5 &:hover { --tui-text-secondary: var(--tui-text-primary); } diff --git a/projects/core/styles/components/notification.less b/projects/core/styles/components/notification.less index 156f12d46b9f..ee04e26b20ef 100644 --- a/projects/core/styles/components/notification.less +++ b/projects/core/styles/components/notification.less @@ -11,7 +11,7 @@ * data-size — size (default: 'l') ('s' | 'm' | 'l') * * @example - * + * * * Error * Something went wrong diff --git a/projects/core/styles/mixins/appearance.less b/projects/core/styles/mixins/appearance.less index 1dcaae146769..b9a07b54c271 100644 --- a/projects/core/styles/mixins/appearance.less +++ b/projects/core/styles/mixins/appearance.less @@ -1,44 +1,71 @@ @import 'mixins.less'; -.appearance-hover(@ruleset) { +.appearance-hover(@content) { .interactive({ @media (hover: hover) { &:hover:not(:disabled):not([data-state]) { - @ruleset(); + @content(); } } }); &[data-state='hover'] { - @ruleset(); + @content(); + } + + /* @deprecated TODO remove in v5 */ + @media (hover: hover) { + &[tuiWrapper]:hover:not(._no-hover), + &[tuiWrapper][data-state='hover'] { + @content(); + } } } -.appearance-active(@ruleset) { +.appearance-active(@content) { .interactive({ &:active:not(:disabled):not([data-state]) { - @ruleset(); + @content(); } }); &[data-state='active'] { - @ruleset(); + @content(); + } + + /* @deprecated TODO remove in v5 */ + &[tuiWrapper]:active:not(._no-active), + &[tuiWrapper][data-state='active'], + &[tuiWrapper][data-state='active']:hover { + @content(); } } -.appearance-disabled(@ruleset) { +.appearance-disabled(@content) { &:disabled:not([data-state]), &[data-state='disabled'] { - @ruleset(); + @content(); + } + + /* @deprecated TODO remove in v5 */ + &[tuiWrapper]:disabled:not([data-state]), + &[tuiWrapper][data-state='disabled'] { + @content(); } } -.appearance-focus(@ruleset) { +.appearance-focus(@content) { &:focus-visible:not([data-focus='false']) { - @ruleset(); + @content(); } &[data-focus='true'] { - @ruleset(); + @content(); + } + + /* @deprecated TODO remove in v5 */ + &[tuiWrapper]:not(._focused):has(:focus-visible), + &[tuiWrapper]._focused { + @content(); } } diff --git a/projects/core/styles/mixins/appearance.scss b/projects/core/styles/mixins/appearance.scss index c50bdc66c326..8699493a4fae 100644 --- a/projects/core/styles/mixins/appearance.scss +++ b/projects/core/styles/mixins/appearance.scss @@ -12,6 +12,14 @@ &[data-state='hover'] { @content; } + + /* @deprecated TODO remove in v5 */ + @media (hover: hover) { + &[tuiWrapper]:hover:not(._no-hover), + &[tuiWrapper][data-state='hover'] { + @content; + } + } } @mixin appearance-active { @@ -24,6 +32,13 @@ &[data-state='active'] { @content; } + + /* @deprecated TODO remove in v5 */ + &[tuiWrapper]:active:not(._no-active), + &[tuiWrapper][data-state='active'], + &[tuiWrapper][data-state='active']:hover { + @content; + } } @mixin appearance-disabled { @@ -31,6 +46,12 @@ &[data-state='disabled'] { @content; } + + /* @deprecated TODO remove in v5 */ + &[tuiWrapper]:disabled:not([data-state]), + &[tuiWrapper][data-state='disabled'] { + @content; + } } @mixin appearance-focus { @@ -41,4 +62,10 @@ &[data-focus='true'] { @content; } + + /* @deprecated TODO remove in v5 */ + &[tuiWrapper]:not(._focused):has(:focus-visible), + &[tuiWrapper]._focused { + @content; + } } diff --git a/projects/core/styles/mixins/wrapper.less b/projects/core/styles/mixins/wrapper.less index 86f0d8f0448c..2efc7079fe04 100644 --- a/projects/core/styles/mixins/wrapper.less +++ b/projects/core/styles/mixins/wrapper.less @@ -43,12 +43,14 @@ } .wrapper-focus(@ruleset) { - // TODO: Join rules together once all browsers support focus-visible - // Specificity artificially increased to match `:hover:not()` level &:focus-visible:focus-visible { @ruleset(); } + &:has(:focus-visible) { + @ruleset(); + } + &._focused._focused { @ruleset(); } diff --git a/projects/core/styles/theme/appearance.less b/projects/core/styles/theme/appearance.less index 0342df5faa75..fbd852d49a2e 100644 --- a/projects/core/styles/theme/appearance.less +++ b/projects/core/styles/theme/appearance.less @@ -1,8 +1,8 @@ @import 'appearance/accent.less'; +@import 'appearance/action.less'; +@import 'appearance/flat.less'; @import 'appearance/floating.less'; @import 'appearance/glass.less'; -@import 'appearance/icon.less'; -@import 'appearance/link.less'; @import 'appearance/opposite.less'; @import 'appearance/outline.less'; @import 'appearance/primary.less'; diff --git a/projects/core/styles/theme/appearance/action.less b/projects/core/styles/theme/appearance/action.less new file mode 100644 index 000000000000..b9de3c756ab4 --- /dev/null +++ b/projects/core/styles/theme/appearance/action.less @@ -0,0 +1,48 @@ +/* TODO @deprecated remove in v5 */ +[tuiAppearance][data-appearance='link'] { + color: var(--tui-text-action); + + .appearance-hover({ + color: var(--tui-text-action-hover); + }); + + .appearance-active({ + color: var(--tui-text-action-hover); + }); +} + +[tuiAppearance][data-appearance='action'] { + color: var(--tui-text-action); + + .appearance-hover({ + color: var(--tui-text-action-hover); + }); + + .appearance-active({ + color: var(--tui-text-action-hover); + }); +} + +[tuiAppearance][data-appearance='action-destructive'] { + color: var(--tui-text-negative); + + .appearance-hover({ + color: var(--tui-text-negative-hover); + }); + + .appearance-active({ + color: var(--tui-text-negative-hover); + }); +} + +[tuiAppearance][data-appearance='action-grayscale'] { + color: var(--tui-text-secondary); + + .appearance-hover({ + color: var(--tui-text-primary); + }); + + .appearance-active({ + color: var(--tui-text-primary); + }); +} diff --git a/projects/core/styles/theme/appearance/flat.less b/projects/core/styles/theme/appearance/flat.less new file mode 100644 index 000000000000..4978e744b7de --- /dev/null +++ b/projects/core/styles/theme/appearance/flat.less @@ -0,0 +1,23 @@ +@import '@taiga-ui/core/styles/taiga-ui-local.less'; + +[tuiAppearance][data-appearance='flat'], +[tuiAppearance][data-appearance='flat-destructive'], +[tuiAppearance][data-appearance='flat-grayscale'] { + color: var(--tui-text-action); + + .appearance-hover({ + background: var(--tui-background-neutral-1-hover); + }); + + .appearance-active({ + background: var(--tui-background-neutral-1-pressed); + }); +} + +[tuiAppearance][data-appearance='flat-destructive'] { + color: var(--tui-text-negative); +} + +[tuiAppearance][data-appearance='flat-grayscale'] { + color: var(--tui-text-primary); +} diff --git a/projects/core/styles/theme/appearance/icon.less b/projects/core/styles/theme/appearance/icon.less deleted file mode 100644 index 86d4f1049984..000000000000 --- a/projects/core/styles/theme/appearance/icon.less +++ /dev/null @@ -1,38 +0,0 @@ -@import '@taiga-ui/core/styles/taiga-ui-local.less'; - -[tuiAppearance][data-appearance='icon'] { - color: var(--tui-text-tertiary); - - .appearance-hover({ - color: var(--tui-text-secondary); - }); - - .appearance-active({ - color: var(--tui-text-primary); - }); -} - -// Icons with the directive -[tuiAppearance][data-appearance='whiteblock'], -[tuiAppearance][data-appearance='floating'] { - &::before, - &::after { - .transition(color); - - color: var(--tui-text-tertiary); - } - - .appearance-hover({ - &:before, - &:after { - color: var(--tui-text-secondary); - } - }); - - .appearance-active({ - &:before, - &:after { - color: var(--tui-text-primary); - } - }); -} diff --git a/projects/core/styles/theme/appearance/link.less b/projects/core/styles/theme/appearance/link.less deleted file mode 100644 index bb36896bdbc8..000000000000 --- a/projects/core/styles/theme/appearance/link.less +++ /dev/null @@ -1,11 +0,0 @@ -[tuiAppearance][data-appearance='link'] { - color: var(--tui-text-action); - - .appearance-hover({ - color: var(--tui-text-action-hover); - }); - - .appearance-active({ - color: var(--tui-text-action-hover); - }); -} diff --git a/projects/core/styles/theme/appearance/opposite.less b/projects/core/styles/theme/appearance/opposite.less index ffcfbcaca50d..c3b9b01554c7 100644 --- a/projects/core/styles/theme/appearance/opposite.less +++ b/projects/core/styles/theme/appearance/opposite.less @@ -1,7 +1,8 @@ @import '@taiga-ui/core/styles/taiga-ui-local.less'; +/* TODO @deprecated remove in v5 */ [tuiAppearance][data-appearance='opposite'] { - --tui-border-focus: rgba(255, 255, 255, 0.64); + --tui-border-focus: #979797; background: var(--tui-background-accent-opposite); color: var(--tui-background-base); @@ -14,8 +15,3 @@ background: var(--tui-background-accent-opposite-pressed); }); } - -[tuiTheme='dark'] [tuiAppearance][data-appearance='opposite'], -[tuiTheme='dark'][tuiAppearance][data-appearance='opposite'] { - --tui-border-focus: rgba(51, 51, 51, 0.48); -} diff --git a/projects/core/styles/theme/appearance/outline.less b/projects/core/styles/theme/appearance/outline.less index 4ce0839847bb..f23e75ac8a8a 100644 --- a/projects/core/styles/theme/appearance/outline.less +++ b/projects/core/styles/theme/appearance/outline.less @@ -1,6 +1,9 @@ @import '@taiga-ui/core/styles/taiga-ui-local.less'; [tuiAppearance][data-appearance='outline'], +[tuiAppearance][data-appearance='outline-destructive'], +[tuiAppearance][data-appearance='outline-grayscale'], +/* TODO @deprecated remove in v5 */ [tuiAppearance][data-appearance='whiteblock'] { --t-bs: var(--tui-border-normal); @@ -44,6 +47,41 @@ }); } +[tuiAppearance][data-appearance='outline-grayscale'], +/* TODO @deprecated remove in v5 */ [tuiAppearance][data-appearance='whiteblock'] { color: var(--tui-text-primary); } + +[tuiAppearance][data-appearance='outline-destructive'] { + color: var(--tui-text-negative); +} + +[tuiAppearance][data-appearance='icon'], +[tuiAppearance][data-appearance='outline-grayscale'], +[tuiAppearance][data-appearance='floating'], +/* TODO @deprecated remove in v5 */ +[tuiAppearance][data-appearance='whiteblock'] { + color: var(--tui-text-primary); + + &::before, + &::after { + .transition(color); + + color: var(--tui-text-tertiary); + } + + .appearance-hover({ + &:before, + &:after { + color: var(--tui-text-secondary); + } + }); + + .appearance-active({ + &:before, + &:after { + color: var(--tui-text-primary); + } + }); +} diff --git a/projects/core/styles/theme/appearance/primary.less b/projects/core/styles/theme/appearance/primary.less index ec2b8fce8916..559df1f446d6 100644 --- a/projects/core/styles/theme/appearance/primary.less +++ b/projects/core/styles/theme/appearance/primary.less @@ -19,3 +19,33 @@ --t-bg: var(--tui-background-accent-1-pressed); }); } + +[tuiAppearance][data-appearance='primary-destructive'] { + .transition(filter); + + color: #fff; + background: var(--tui-status-negative); + + .appearance-hover({ + filter: saturate(1) brightness(1.3); + }); + + .appearance-active({ + filter: saturate(0.8) brightness(1); + }); +} + +[tuiAppearance][data-appearance='primary-grayscale'] { + --tui-border-focus: #979797; + + background: var(--tui-background-accent-opposite); + color: var(--tui-background-base); + + .appearance-hover({ + background: var(--tui-background-accent-opposite-hover); + }); + + .appearance-active({ + background: var(--tui-background-accent-opposite-pressed); + }); +} diff --git a/projects/core/styles/theme/appearance/secondary.less b/projects/core/styles/theme/appearance/secondary.less index 76e17a183d9e..def5173dd47d 100644 --- a/projects/core/styles/theme/appearance/secondary.less +++ b/projects/core/styles/theme/appearance/secondary.less @@ -1,7 +1,9 @@ @import '@taiga-ui/core/styles/taiga-ui-local.less'; [tuiAppearance][data-appearance='secondary'], -[tuiAppearance][data-appearance='flat'], +[tuiAppearance][data-appearance='secondary-destructive'], +[tuiAppearance][data-appearance='secondary-grayscale'], +/* TODO @deprecated remove in v5 */ [tuiAppearance][data-appearance='destructive'] { background: var(--tui-background-neutral-1); color: var(--tui-text-action); @@ -62,29 +64,16 @@ } } -[tuiAppearance][data-appearance='flat'], -[tuiAppearance][data-appearance='flat']:invalid:not([data-mode]), -[tuiAppearance][data-appearance='flat'][data-mode~='invalid'] { - background: transparent; -} - -[tuiAppearance][data-appearance='flat']:checked:not([data-mode]), -[tuiAppearance][data-appearance='flat'][data-mode~='checked'] { - background: var(--tui-background-neutral-1); - - .appearance-hover({ - background: var(--tui-background-neutral-1-hover); - }); - - .appearance-active({ - background: var(--tui-background-neutral-1-pressed); - }); -} - +[tuiAppearance][data-appearance='secondary-destructive'], +/* TODO @deprecated remove in v5 */ [tuiAppearance][data-appearance='destructive'] { color: var(--tui-text-negative); } +[tuiAppearance][data-appearance='secondary-grayscale'] { + color: var(--tui-text-primary); +} + // Overriding to darker colors for small items input[type='checkbox'][data-appearance='secondary'], input[type='radio'][data-appearance='secondary'] { diff --git a/projects/core/styles/theme/appearance/status.less b/projects/core/styles/theme/appearance/status.less index 808a5385e45e..9ab92e9b35ef 100644 --- a/projects/core/styles/theme/appearance/status.less +++ b/projects/core/styles/theme/appearance/status.less @@ -1,7 +1,9 @@ @import '@taiga-ui/core/styles/taiga-ui-local.less'; -[tuiAppearance][data-appearance='error'], -[tuiAppearance][data-appearance='success'], +[tuiAppearance][data-appearance='error'], /* TODO @deprecated remove in v5 */ +[tuiAppearance][data-appearance='success'], /* TODO @deprecated remove in v5 */ +[tuiAppearance][data-appearance='negative'], +[tuiAppearance][data-appearance='positive'], [tuiAppearance][data-appearance='warning'], [tuiAppearance][data-appearance='info'], [tuiAppearance][data-appearance='neutral'] { @@ -13,7 +15,8 @@ } } -[tuiAppearance][data-appearance='error'] { +[tuiAppearance][data-appearance='error'], /* TODO @deprecated remove in v5 */ +[tuiAppearance][data-appearance='negative'] { --t-bg: var(--tui-status-negative-pale); &::before, @@ -35,7 +38,8 @@ } } -[tuiAppearance][data-appearance='success'] { +[tuiAppearance][data-appearance='success'], /* TODO @deprecated remove in v5 */ +[tuiAppearance][data-appearance='positive'] { --t-bg: var(--tui-status-positive-pale); &::before, diff --git a/projects/core/styles/theme/wrapper.less b/projects/core/styles/theme/wrapper.less index 15bac3463047..594f4f6c0b87 100644 --- a/projects/core/styles/theme/wrapper.less +++ b/projects/core/styles/theme/wrapper.less @@ -14,36 +14,10 @@ appearance: none; border-radius: inherit; - &::after { - .transition(~'box-shadow, color'); - .fullsize(absolute, inset); - - content: ''; - border-radius: inherit; - border: 1px solid currentColor; - pointer-events: none; - color: transparent; - } - - .wrapper-focus({ - &:after { - border-width: 2px; - color: var(--tui-border-focus); - } - }); - .wrapper-disabled({ pointer-events: none; opacity: var(--tui-disabled-opacity); }); - - // Temporary hide focus in Safari until we figure out a better approach - .safari-only({ - :focus-visible &, - &:focus-visible { - --tui-border-focus: transparent !important; - } - }); } [tuiWrapper][data-appearance='textfield'] { @@ -51,11 +25,17 @@ background: var(--tui-background-base); color: var(--tui-text-primary); + outline: none !important; box-shadow: 0 0.125rem 0.1875rem rgba(0, 0, 0, 0.1); &::after { .transition(color); + .fullsize(absolute, inset); + content: ''; + border-radius: inherit; + border: 1px solid currentColor; + pointer-events: none; color: var(--tui-border-normal); } @@ -67,7 +47,8 @@ box-shadow: none; &:after { - --tui-border-focus: var(--tui-background-accent-1); + border-width: 2px; + color: var(--tui-background-accent-1); } }); @@ -87,7 +68,6 @@ .wrapper-invalid({ &:after { color: var(--tui-text-negative); - --tui-border-focus: var(--tui-status-negative); } }); } @@ -110,10 +90,12 @@ border-radius: 0; background: transparent; color: var(--tui-text-primary); + outline: none !important; /* stylelint-disable meowtec/no-px */ &::before, &[data-appearance='table']::after { + content: ''; position: fixed; top: -0.03125rem; left: -1px; @@ -125,7 +107,6 @@ &::before { .transition(background); - content: ''; z-index: -1; background-repeat: no-repeat; background-position: top right; @@ -133,7 +114,9 @@ } &[data-appearance='table']::after { - border-width: 1px; + border: 1px solid currentColor; + border-radius: inherit; + pointer-events: none; color: var(--tui-border-normal); } @@ -194,40 +177,18 @@ table [tuiWrapper][data-appearance='table'] { } [tuiWrapper][data-appearance='icon'] { - .transition(opacity); - - color: var(--tui-text-primary); - opacity: 0.5; + color: var(--tui-text-tertiary); [tuiWrapper]:not([data-state='readonly']):hover .t-textfield-icon &:not([data-state='disabled']) { - opacity: 0.65; + color: var(--tui-text-secondary); } .wrapper-hover({ - opacity: 0.65; + color: var(--tui-text-secondary); }); .wrapper-active({ - opacity: 1; - }); - - .wrapper-disabled({ - opacity: calc(0.5 * var(--tui-disabled-opacity)); - }); -} - -[tuiTheme='dark'] [tuiWrapper][data-appearance='icon'], -[tuiTheme='dark'][tuiWrapper][data-appearance='icon'] { - [tuiWrapper]:not([data-state='readonly']):hover .t-textfield-icon &:not([data-state='disabled']) { - opacity: 1; - } - - .wrapper-focus({ - --tui-border-focus: var(--tui-background-base); - }); - - .wrapper-hover({ - opacity: 1; + color: var(--tui-text-primary); }); } @@ -235,18 +196,15 @@ tui-primitive-textfield:hover:not(._disabled) [tuiAppearance][data-appearance='i tui-textarea:hover:not(._disabled) [tuiAppearance][data-appearance='icon'], tui-input-tag:hover:not(._disabled) [tuiAppearance][data-appearance='icon'] { color: var(--tui-text-secondary); -} -[tuiTheme='dark'] tui-primitive-textfield:hover:not(._disabled) [tuiAppearance][data-appearance='icon'], -[tuiTheme='dark'] tui-textarea:hover:not(._disabled) [tuiAppearance][data-appearance='icon'], -[tuiTheme='dark'] tui-input-tag:hover:not(._disabled) [tuiAppearance][data-appearance='icon'], -tui-primitive-textfield:hover:not(._disabled)[tuiTheme='dark'] [tuiAppearance][data-appearance='icon'], -tui-textarea:hover:not(._disabled)[tuiTheme='dark'] [tuiAppearance][data-appearance='icon'], -tui-input-tag:hover:not(._disabled)[tuiTheme='dark'] [tuiAppearance][data-appearance='icon'] { - color: var(--tui-text-primary); + .wrapper-active({ + color: var(--tui-text-primary); + }); } [tuiWrapper][data-appearance='none'] { + outline: none; + &::after { border: none; } diff --git a/projects/demo-playwright/tests/kit/calendar-range/calendar-range.spec.ts b/projects/demo-playwright/tests/kit/calendar-range/calendar-range.spec.ts index 33e80a1f6cb5..692cf08b9ebb 100644 --- a/projects/demo-playwright/tests/kit/calendar-range/calendar-range.spec.ts +++ b/projects/demo-playwright/tests/kit/calendar-range/calendar-range.spec.ts @@ -33,7 +33,7 @@ test.describe('CalendarRange', () => { calendarRange = new TuiCalendarRangePO(example.locator('tui-calendar-range')); const getRangeSwitcher = (): Locator => - example.locator('p button[data-appearance="link"]'); + example.locator('p button[data-appearance="action"]'); await expect(example).toHaveScreenshot( '05-calendar-range-correct-display-defaults-items-and-values.png', diff --git a/projects/demo/src/components/appearance/index.ts b/projects/demo/src/components/appearance/index.ts index b7f0103cad42..ddec937b287f 100644 --- a/projects/demo/src/components/appearance/index.ts +++ b/projects/demo/src/components/appearance/index.ts @@ -20,23 +20,30 @@ export class TuiDocAppearance { protected readonly modes = ['invalid', 'checked', ['invalid', 'checked']]; protected readonly appearances = [ 'primary', + 'primary-destructive', + 'primary-grayscale', 'secondary', - 'destructive', - 'neutral', + 'secondary-destructive', + 'secondary-grayscale', 'flat', - 'link', - 'accent', - 'opposite', - 'floating', - 'textfield', - 'whiteblock', + 'flat-destructive', + 'flat-grayscale', 'outline', - 'error', - 'success', + 'outline-destructive', + 'outline-grayscale', + 'action', + 'action-destructive', + 'action-grayscale', + 'neutral', + 'negative', + 'positive', 'warning', 'info', - 'glass', 'icon', + 'floating', + 'textfield', + 'glass', + 'accent', ] as const; protected readonly states: readonly TuiInteractiveState[] = [ diff --git a/projects/demo/src/modules/app/app.component.ts b/projects/demo/src/modules/app/app.component.ts index 47c2fe2c2197..b6158d00397d 100644 --- a/projects/demo/src/modules/app/app.component.ts +++ b/projects/demo/src/modules/app/app.component.ts @@ -18,7 +18,7 @@ import {TuiDemo} from '@demo/utils'; import {WA_LOCAL_STORAGE} from '@ng-web-apis/common'; import {ResizeObserverService} from '@ng-web-apis/resize-observer'; import {TuiButton, TuiDataList, TuiDropdown, TuiIcon} from '@taiga-ui/core'; -import {TuiBadge, TuiBadgedContent} from '@taiga-ui/kit'; +import {TuiBadgedContent} from '@taiga-ui/kit'; import {TuiSheetModule, TuiTextfieldControllerModule} from '@taiga-ui/legacy'; import {distinctUntilChanged, filter, map, startWith} from 'rxjs'; @@ -36,7 +36,6 @@ import {TUI_VERSION_MANAGER_PROVIDERS} from './version-manager/version-manager.p CustomHost, HttpClientModule, TuiAlgoliaSearch, - TuiBadge, TuiBadgedContent, TuiButton, TuiDataList, diff --git a/projects/demo/src/modules/app/app.template.html b/projects/demo/src/modules/app/app.template.html index fa6722e2d497..e9476600220b 100644 --- a/projects/demo/src/modules/app/app.template.html +++ b/projects/demo/src/modules/app/app.template.html @@ -17,7 +17,7 @@ - - - - - - - + +

{{ group.key }}

+
+ +
+ diff --git a/projects/demo/src/modules/directives/appearance/examples/4/index.less b/projects/demo/src/modules/directives/appearance/examples/4/index.less index eed5e8299353..3d2e01567090 100644 --- a/projects/demo/src/modules/directives/appearance/examples/4/index.less +++ b/projects/demo/src/modules/directives/appearance/examples/4/index.less @@ -1,5 +1,4 @@ -:host { +.section { display: flex; gap: 1rem; - flex-wrap: wrap; } diff --git a/projects/demo/src/modules/directives/appearance/examples/4/index.ts b/projects/demo/src/modules/directives/appearance/examples/4/index.ts index 3fcd46e17282..1b6a8dda7e9a 100644 --- a/projects/demo/src/modules/directives/appearance/examples/4/index.ts +++ b/projects/demo/src/modules/directives/appearance/examples/4/index.ts @@ -1,4 +1,4 @@ -import {NgForOf} from '@angular/common'; +import {KeyValuePipe, NgForOf} from '@angular/common'; import {Component} from '@angular/core'; import {changeDetection} from '@demo/emulate/change-detection'; import {encapsulation} from '@demo/emulate/encapsulation'; @@ -6,31 +6,24 @@ import {TuiAppearance, TuiButton, TuiOption} from '@taiga-ui/core'; @Component({ standalone: true, - imports: [NgForOf, TuiAppearance, TuiButton, TuiOption], + imports: [KeyValuePipe, NgForOf, TuiAppearance, TuiButton, TuiOption], templateUrl: './index.html', styleUrls: ['./index.less'], encapsulation, changeDetection, }) export default class Example { - protected readonly appearances = [ - 'primary', - 'secondary', - 'destructive', - 'neutral', - 'flat', - 'link', - 'accent', - 'opposite', - 'floating', - 'textfield', - 'whiteblock', - 'outline', - 'error', - 'success', - 'warning', - 'info', - 'glass', - 'icon', - ] as const; + protected readonly appearances = { + Primary: ['primary', 'primary-destructive', 'primary-grayscale'], + Secondary: ['secondary', 'secondary-destructive', 'secondary-grayscale'], + Flat: ['flat', 'flat-destructive', 'flat-grayscale'], + Outline: ['outline', 'outline-destructive', 'outline-grayscale'], + Action: ['action', 'action-destructive', 'action-grayscale'], + Status: ['neutral', 'negative', 'positive', 'warning', 'info'], + Others: ['icon', 'floating', 'textfield', 'glass', 'accent'], + }; + + protected asIs(): number { + return 0; + } } diff --git a/projects/demo/src/modules/directives/dropdown-open/examples/4/index.html b/projects/demo/src/modules/directives/dropdown-open/examples/4/index.html index 02a868a3f640..4137415974cb 100644 --- a/projects/demo/src/modules/directives/dropdown-open/examples/4/index.html +++ b/projects/demo/src/modules/directives/dropdown-open/examples/4/index.html @@ -1,6 +1,6 @@