diff --git a/projects/addon-preview/components/preview/pagination/preview-pagination.style.less b/projects/addon-preview/components/preview/pagination/preview-pagination.style.less index 5e58da2a0be5..a93514a5cc65 100644 --- a/projects/addon-preview/components/preview/pagination/preview-pagination.style.less +++ b/projects/addon-preview/components/preview/pagination/preview-pagination.style.less @@ -3,9 +3,9 @@ :host { .preview-item(); - .text-body-s(); display: flex; + font: var(--tui-font-text-s); justify-content: space-between; align-items: center; width: 6.25rem; diff --git a/projects/addon-preview/components/preview/title/preview-title.style.less b/projects/addon-preview/components/preview/title/preview-title.style.less index 87efee9a8204..0bd3cb4ddeb3 100644 --- a/projects/addon-preview/components/preview/title/preview-title.style.less +++ b/projects/addon-preview/components/preview/title/preview-title.style.less @@ -3,8 +3,8 @@ :host { .preview-item(); - .text-body-s(); display: inline-block; + font: var(--tui-font-text-s); padding: 0.375rem 0.75rem; } diff --git a/projects/addon-preview/components/preview/zoom/preview-zoom.style.less b/projects/addon-preview/components/preview/zoom/preview-zoom.style.less index c8b6af9f650b..69c757135eed 100644 --- a/projects/addon-preview/components/preview/zoom/preview-zoom.style.less +++ b/projects/addon-preview/components/preview/zoom/preview-zoom.style.less @@ -8,9 +8,9 @@ .t-zoom { .preview-item(); - .text-body-s(); display: flex; + font: var(--tui-font-text-s); justify-content: space-between; align-items: center; width: 12rem; diff --git a/projects/core/components/error/error.style.less b/projects/core/components/error/error.style.less index 7a6b4aa2d388..886b2d5dc01c 100644 --- a/projects/core/components/error/error.style.less +++ b/projects/core/components/error/error.style.less @@ -1,9 +1,8 @@ @import '@taiga-ui/core/styles/taiga-ui-local'; :host { - .text-basic(); - display: block; + font: var(--tui-font-text-s); color: var(--tui-negative); word-wrap: break-word; animation: tuiPresent 1s infinite; diff --git a/projects/core/components/loader/loader.style.less b/projects/core/components/loader/loader.style.less index bb79016e0bac..7a403d09c9df 100644 --- a/projects/core/components/loader/loader.style.less +++ b/projects/core/components/loader/loader.style.less @@ -91,9 +91,9 @@ } .t-text { - .text-basic(); .text-overflow(); + font: var(--tui-font-text-s); margin-top: 1rem; color: inherit; max-width: 100%; diff --git a/projects/core/components/notification/notification.style.less b/projects/core/components/notification/notification.style.less index 27c4718f7052..37323157a221 100644 --- a/projects/core/components/notification/notification.style.less +++ b/projects/core/components/notification/notification.style.less @@ -1,10 +1,10 @@ @import '@taiga-ui/core/styles/taiga-ui-local'; :host { - .text-basic(); - position: relative; display: flex; + font: var(--tui-font-text-s); + color: var(--tui-text-01); padding: 0.75rem 1rem; border-radius: var(--tui-radius-m); background: #fff; // fallback for IE diff --git a/projects/core/components/root/root.style.less b/projects/core/components/root/root.style.less index b3c49c7528b5..05304dca49c1 100644 --- a/projects/core/components/root/root.style.less +++ b/projects/core/components/root/root.style.less @@ -23,10 +23,10 @@ body { } tui-root { - .text-basic(); - position: relative; display: block; + font: var(--tui-font-text-s); + color: var(--tui-text-01); flex: 1; -webkit-tap-highlight-color: transparent; diff --git a/projects/core/styles/mixins/text.less b/projects/core/styles/mixins/text.less deleted file mode 100644 index 8f27150bdbe5..000000000000 --- a/projects/core/styles/mixins/text.less +++ /dev/null @@ -1,182 +0,0 @@ -.text-basic() { - font: var(--tui-font-text-s); - color: var(--tui-text-01); -} - -// TODO: 4.0 delete all deprecations below - -// headings - -// deprecated -.text-h1() { - font: var(--tui-font-heading-1); -} - -// deprecated -.text-h2() { - font: var(--tui-font-heading-2); -} - -// deprecated -.text-h3() { - font: var(--tui-font-heading-3); -} - -// deprecated -.text-h4() { - font: var(--tui-font-heading-4); -} - -// deprecated -.text-h5() { - font: var(--tui-font-heading-5); -} - -// deprecated -.text-h6() { - font: var(--tui-font-heading-6); -} - -// typed text - -// deprecated -.text-body-xl-bold() { - font: var(--tui-font-text-xl); - font-weight: bold; -} - -// deprecated -.text-body-xl() { - font: var(--tui-font-text-xl); -} - -// deprecated -.text-body-l-bold(@type: 1) { - font: var(--tui-font-text-l); - font-weight: bold; - - & when (@type = 2) { - line-height: 1.25rem; - } - - & when (@type = 3) { - line-height: 1.75rem; - } -} - -// deprecated -.text-body-l(@type: 1) { - font: var(--tui-font-text-l); - - & when (@type = 2) { - line-height: 1.25rem; - } - - & when (@type = 3) { - line-height: 1.75rem; - } -} - -// deprecated -.text-body-m-bold(@type: 1) { - font: var(--tui-font-text-m); - font-weight: bold; - - & when (@type = 2) { - line-height: 1.25rem; - } -} - -// deprecated -.text-body-m(@type: 1) { - font: var(--tui-font-text-m); - - & when (@type = 2) { - line-height: 1.25rem; - } -} - -// deprecated -.text-body-s-bold(@type: 1) { - font: var(--tui-font-text-s); - font-weight: bold; - - & when (@type = 2) { - line-height: 1rem; - } -} - -// deprecated -.text-body-s(@type: 1) { - font: var(--tui-font-text-s); - - & when (@type = 2) { - line-height: 1rem; - } -} - -// deprecated -.text-body-xs() { - font: var(--tui-font-text-xs); -} - -//tabs, tags, category - -// deprecated -.text-caption-l-bold() { - .font(0.8125rem, 1.25rem, bold); - - letter-spacing: 0.0625rem; - text-transform: uppercase; -} - -// deprecated -.text-caption-l() { - .font(0.8125rem, 1.25rem, normal); - - letter-spacing: 0.0625rem; - text-transform: uppercase; -} - -// deprecated -.text-caption-bold() { - .font(0.6875rem, 1rem, bold); - - letter-spacing: 0.0625rem; - text-transform: uppercase; -} - -// deprecated -.text-caption() { - .font(0.6875rem, 1rem, normal); - - letter-spacing: 0.0625rem; - text-transform: uppercase; -} - -// mixins for font properties - -// deprecated -.font_heading(@size, @line-height: normal) { - font-weight: bold; - line-height: @line-height; - font-size: @size; - font-family: var(--tui-font-heading); -} - -// deprecated -.font(@size, @line-height: 'none', @weight: normal, @color: 'none') { - font-weight: @weight; - font-size: @size; - font-family: var(--tui-font-text); -} - -// deprecated -.font(@size, @line-height: 'none', @weight: normal, @color: 'none') when not (@line-height = 'none') { - line-height: @line-height; -} - -// deprecated -.font(@size, @line-height: 'none', @weight: normal, @color: 'none') when not (@color = 'none') { - color: @color; -} diff --git a/projects/core/styles/mixins/text.scss b/projects/core/styles/mixins/text.scss deleted file mode 100644 index 57d718998a2e..000000000000 --- a/projects/core/styles/mixins/text.scss +++ /dev/null @@ -1,180 +0,0 @@ -@mixin text-basic() { - @include text-body-s(); - color: var(--tui-text-01); -} - -// TODO: 4.0 delete all deprecations below - -// headings - -// deprecated -@mixin text-h1() { - font: var(--tui-font-heading-1); -} - -// deprecated -@mixin text-h2() { - font: var(--tui-font-heading-2); -} - -// deprecated -@mixin text-h3() { - font: var(--tui-font-heading-3); -} - -// deprecated -@mixin text-h4() { - font: var(--tui-font-heading-4); -} - -// deprecated -@mixin text-h5() { - font: var(--tui-font-heading-5); -} - -// deprecated -@mixin text-h6() { - font: var(--tui-font-heading-6); -} - -// typed text - -// deprecated -@mixin text-body-xl-bold() { - font: var(--tui-font-text-xl); - font-weight: bold; -} - -// deprecated -@mixin text-body-xl() { - font: var(--tui-font-text-xl); -} - -// deprecated -@mixin text-body-l-bold($type: 1) { - font: var(--tui-font-text-l); - font-weight: bold; - - @if ($type == 2) { - line-height: 20px; - } - - @if ($type == 3) { - line-height: 28px; - } -} - -// deprecated -@mixin text-body-l($type: 1) { - font: var(--tui-font-text-l); - - @if ($type == 2) { - line-height: 20px; - } - - @if ($type == 3) { - line-height: 28px; - } -} - -// deprecated -@mixin text-body-m-bold($type: 1) { - font: var(--tui-font-text-m); - font-weight: bold; - - @if ($type == 2) { - line-height: 20px; - } -} - -// deprecated -@mixin text-body-m($type: 1) { - font: var(--tui-font-text-m); - - @if ($type == 2) { - line-height: 20px; - } -} - -// deprecated -@mixin text-body-s-bold($type: 1) { - font: var(--tui-font-text-s); - font-weight: bold; - - @if ($type == 2) { - line-height: 16px; - } -} - -// deprecated -@mixin text-body-s($type: 1) { - font: var(--tui-font-text-s); - - @if ($type == 2) { - line-height: 16px; - } -} - -// deprecated -@mixin text-body-xs() { - font: var(--tui-font-text-xs); -} - -//tabs, tags, category - -// deprecated -@mixin text-caption-l-bold() { - @include font(13px, 20px, bold); - letter-spacing: 0.0625rem; - text-transform: uppercase; -} - -// deprecated -@mixin text-caption-l() { - @include font(13px, 20px, normal); - letter-spacing: 0.0625rem; - text-transform: uppercase; -} - -// deprecated -@mixin text-caption-bold() { - @include font(11px, 16px, bold); - letter-spacing: 0.0625rem; - text-transform: uppercase; -} - -// deprecated -@mixin text-caption() { - @include font(11px, 16px, normal); - letter-spacing: 0.0625rem; - text-transform: uppercase; -} - -// mixins for font properties - -// deprecated -@mixin font_heading($size, $line-height: normal) { - font-weight: bold; - line-height: $line-height; - font-size: $size; - font-family: var(--tui-font-heading); -} - -// deprecated -@mixin font($size, $line-height: 'none', $weight: normal, $color: 'none') { - font-weight: $weight; - font-size: $size; - font-family: var(--tui-text-font); - - @if ($line-height != 'none') { - line-height: $line-height; - } - - @if ($color != 'none') { - color: $color; - } - - @if ($line-height != 'none') { - line-height: $line-height; - } -} diff --git a/projects/core/styles/mixins/textfield.less b/projects/core/styles/mixins/textfield.less index e6456be375d2..ff729fe8fef5 100644 --- a/projects/core/styles/mixins/textfield.less +++ b/projects/core/styles/mixins/textfield.less @@ -1,6 +1,4 @@ .textfield-host() { - .text-basic(); - position: relative; display: block; text-align: left; @@ -47,7 +45,6 @@ } .textfield-input() { - .text-basic(); .clearinput(); .fullsize(); diff --git a/projects/core/styles/taiga-ui-local.less b/projects/core/styles/taiga-ui-local.less index b49458158c28..3179fb48b3cb 100644 --- a/projects/core/styles/taiga-ui-local.less +++ b/projects/core/styles/taiga-ui-local.less @@ -7,7 +7,6 @@ @import 'mixins/mixins.less'; @import 'mixins/picker.less'; @import 'mixins/slider.less'; -@import 'mixins/text.less'; @import 'mixins/textfield.less'; @import 'mixins/wrapper.less'; @import 'mixins/appearance.less'; diff --git a/projects/core/styles/taiga-ui-local.scss b/projects/core/styles/taiga-ui-local.scss index 1bf7fc9ff9d6..91ee36b69d87 100644 --- a/projects/core/styles/taiga-ui-local.scss +++ b/projects/core/styles/taiga-ui-local.scss @@ -7,7 +7,6 @@ $space: 0.25rem; @import 'mixins/mixins.scss'; @import 'mixins/picker.scss'; @import 'mixins/slider.scss'; -@import 'mixins/text.scss'; @import 'mixins/textfield.scss'; @import 'mixins/wrapper.scss'; @import 'mixins/appearance.scss'; diff --git a/projects/demo/src/modules/components/carousel/index.less b/projects/demo/src/modules/components/carousel/index.less index 2f812b621e1a..8b1ce4c788f7 100644 --- a/projects/demo/src/modules/components/carousel/index.less +++ b/projects/demo/src/modules/components/carousel/index.less @@ -6,7 +6,7 @@ } .plate { - .text-h3(); + font: var(--tui-font-heading-3); display: flex; flex-direction: column; align-items: flex-start; diff --git a/projects/demo/src/modules/components/preview/examples/1/index.less b/projects/demo/src/modules/components/preview/examples/1/index.less index 5d0a8098da83..4bef0b3e145a 100644 --- a/projects/demo/src/modules/components/preview/examples/1/index.less +++ b/projects/demo/src/modules/components/preview/examples/1/index.less @@ -1,7 +1,7 @@ @import '@taiga-ui/core/styles/taiga-ui-local'; .content { - .text-body-xl(); + font: var(--tui-font-text-xl); background-color: var(--tui-base-01); width: 50rem; height: 68.75rem; diff --git a/projects/kit/components/pagination/pagination.style.less b/projects/kit/components/pagination/pagination.style.less index e266ab235aff..2396ccdd9c3c 100644 --- a/projects/kit/components/pagination/pagination.style.less +++ b/projects/kit/components/pagination/pagination.style.less @@ -1,9 +1,9 @@ @import '@taiga-ui/core/styles/taiga-ui-local'; :host { - .text-basic(); - display: block; + font: var(--tui-font-text-s); + color: var(--tui-text-01); text-align: center; }