feat(core): move theme related styles into separate export (#50)

taiga-family · Dec 7, 2020 · c240274 · c240274
1 parent 42bf3e3
commit c240274
Show file tree

Hide file tree

Showing 210 changed files with 281 additions and 1,642 deletions.
diff --git a/projects/addon-charts/components/axes/axes.style.less b/projects/addon-charts/components/axes/axes.style.less
@@ -1,4 +1,4 @@
-@import 'taiga-ui-angular-local';
+@import 'taiga-ui-local';
 
 :host {
     display: flex;

diff --git a/projects/addon-charts/components/bar-chart/bar-chart.style.less b/projects/addon-charts/components/bar-chart/bar-chart.style.less
@@ -1,4 +1,4 @@
-@import 'taiga-ui-angular-local';
+@import 'taiga-ui-local';
 
 :host {
     display: flex;

diff --git a/projects/addon-charts/components/line-chart/line-chart.style.less b/projects/addon-charts/components/line-chart/line-chart.style.less
@@ -1,4 +1,4 @@
-@import 'taiga-ui-angular-local';
+@import 'taiga-ui-local';
 
 :host {
     display: flex;

diff --git a/projects/addon-charts/components/line-days-chart/line-days-chart.style.less b/projects/addon-charts/components/line-days-chart/line-days-chart.style.less
@@ -1,4 +1,4 @@
-@import 'taiga-ui-angular-local';
+@import 'taiga-ui-local';
 
 :host {
     display: block;

diff --git a/projects/addon-charts/components/pie-chart/pie-chart.style.less b/projects/addon-charts/components/pie-chart/pie-chart.style.less
@@ -1,4 +1,4 @@
-@import 'taiga-ui-angular-local';
+@import 'taiga-ui-local';
 
 @size-xs: 32px;
 @size-s: 64px;

diff --git a/projects/addon-charts/components/ring-chart/ring-chart.style.less b/projects/addon-charts/components/ring-chart/ring-chart.style.less
@@ -1,4 +1,4 @@
-@import 'taiga-ui-angular-local';
+@import 'taiga-ui-local';
 
 @size-s: 64px;
 @size-m: 144px;

diff --git a/projects/addon-commerce/components/card/card.style.less b/projects/addon-commerce/components/card/card.style.less
@@ -1,4 +1,4 @@
-@import 'taiga-ui-angular-local';
+@import 'taiga-ui-local';
 
 @payment-system-logo-height: 10px;
 @brand-logo-size: 14px;

diff --git a/projects/addon-commerce/components/input-CVC/input-CVC.style.less b/projects/addon-commerce/components/input-CVC/input-CVC.style.less
@@ -1,4 +1,4 @@
-@import 'taiga-ui-angular-local';
+@import 'taiga-ui-local';
 
 @font-face {
     font-family: 'cvc';

diff --git a/projects/addon-commerce/components/input-card-grouped/input-card-grouped.style.less b/projects/addon-commerce/components/input-card-grouped/input-card-grouped.style.less
@@ -1,4 +1,4 @@
-@import 'taiga-ui-angular-local';
+@import 'taiga-ui-local';
 
 @width-full: 392px;
 @width-mobile: 288px;
@@ -11,7 +11,7 @@
 
 :host {
     display: block;
-    height: var(--tui-height-extra-large);
+    height: @height-extra-large;
     width: @width-full;
     border-radius: var(--tui-radius);
     overflow: hidden;
@@ -77,7 +77,7 @@
     &_inactive,
     :host._disabled &_inactive {
         color: transparent;
-        transition: color 0s @animation-duration;
+        transition: color 0s 0.3s;
     }
 }
 
@@ -105,7 +105,7 @@
     .textfield-input();
 
     &_card {
-        transition: color 0s @animation-duration;
+        transition: color 0s 0.3s;
 
         :host._disabled & {
             transition: color 0s;

diff --git a/projects/addon-commerce/components/input-card/input-card.style.less b/projects/addon-commerce/components/input-card/input-card.style.less
@@ -1,4 +1,4 @@
-@import 'taiga-ui-angular-local';
+@import 'taiga-ui-local';
 
 :host {
     display: block;

diff --git a/projects/addon-commerce/components/input-expire/input-expire.style.less b/projects/addon-commerce/components/input-expire/input-expire.style.less
@@ -1,4 +1,4 @@
-@import 'taiga-ui-angular-local';
+@import 'taiga-ui-local';
 
 :host {
     display: block;

diff --git a/projects/addon-commerce/components/money/money.style.less b/projects/addon-commerce/components/money/money.style.less
@@ -1,4 +1,4 @@
-@import 'taiga-ui-angular-local';
+@import 'taiga-ui-local';
 
 :host {
     white-space: nowrap;

diff --git a/projects/addon-doc/src/components/code/code.style.less b/projects/addon-doc/src/components/code/code.style.less
@@ -1,4 +1,4 @@
-@import 'taiga-ui-angular-local';
+@import 'taiga-ui-local';
 
 :host {
     display: block;

diff --git a/projects/addon-doc/src/components/copy/copy.style.less b/projects/addon-doc/src/components/copy/copy.style.less
@@ -1,4 +1,4 @@
-@import 'taiga-ui-angular-local';
+@import 'taiga-ui-local';
 
 :host {
     position: relative;

diff --git a/projects/addon-doc/src/components/demo/demo.style.less b/projects/addon-doc/src/components/demo/demo.style.less
@@ -1,4 +1,4 @@
-@import 'taiga-ui-angular-local';
+@import 'taiga-ui-local';
 
 @color-dark: #454e58;
 @color-gray: #e5e7ea;

diff --git a/projects/addon-doc/src/components/documentation/documentation.style.less b/projects/addon-doc/src/components/documentation/documentation.style.less
@@ -1,4 +1,4 @@
-@import 'taiga-ui-angular-local';
+@import 'taiga-ui-local';
 
 @color-property: #8f75d1;
 
@@ -51,10 +51,10 @@
 }
 
 .deprecated {
-    background-color: fade(@color-red-100, 8%);
+    background-color: var(--tui-error-bg);
 }
 
 .deprecated-label {
     margin-right: 2px;
-    color: @color-text-error;
+    color: var(--tui-error-fill);
 }
diff --git a/projects/addon-doc/src/components/example/example.style.less b/projects/addon-doc/src/components/example/example.style.less
@@ -1,4 +1,4 @@
-@import 'taiga-ui-angular-local';
+@import 'taiga-ui-local';
 
 :host {
     position: relative;

diff --git a/projects/addon-doc/src/components/main/main.style.less b/projects/addon-doc/src/components/main/main.style.less
@@ -1,4 +1,4 @@
-@import 'taiga-ui-angular-local';
+@import 'taiga-ui-local';
 
 @keyframes tuiShaking {
     from,

diff --git a/projects/addon-doc/src/components/navigation/navigation.style.less b/projects/addon-doc/src/components/navigation/navigation.style.less
@@ -1,4 +1,4 @@
-@import 'taiga-ui-angular-local';
+@import 'taiga-ui-local';
 
 @sidebar-width: 260px;
 

diff --git a/projects/addon-doc/src/components/page/page.style.less b/projects/addon-doc/src/components/page/page.style.less
@@ -1,4 +1,4 @@
-@import 'taiga-ui-angular-local';
+@import 'taiga-ui-local';
 
 :host {
     display: flex;

diff --git a/projects/addon-doc/src/internal/see-also/see-also.style.less b/projects/addon-doc/src/internal/see-also/see-also.style.less
@@ -1,4 +1,4 @@
-@import 'taiga-ui-angular-local';
+@import 'taiga-ui-local';
 
 :host {
     display: block;

diff --git a/projects/addon-editor/components/color-picker/color-picker.style.less b/projects/addon-editor/components/color-picker/color-picker.style.less
@@ -1,4 +1,4 @@
-@import 'taiga-ui-angular-local';
+@import 'taiga-ui-local';
 
 :host {
     .createStackingContext();
@@ -37,19 +37,19 @@
             z-index: -1;
             background-image: linear-gradient(
                     45deg,
-                    var(--tui-color-border) 25%,
+                    var(--tui-base-03) 25%,
                     transparent 25%,
                     transparent 75%,
-                    var(--tui-color-border) 75%,
-                    var(--tui-color-border)
+                    var(--tui-base-03) 75%,
+                    var(--tui-base-03)
                 ),
                 linear-gradient(
                     45deg,
-                    var(--tui-color-border) 25%,
+                    var(--tui-base-03) 25%,
                     transparent 25%,
                     transparent 75%,
-                    var(--tui-color-border) 75%,
-                    var(--tui-color-border)
+                    var(--tui-base-03) 75%,
+                    var(--tui-base-03)
                 );
             background-size: 6px 6px;
             background-position: 0 0, 3px 3px;

diff --git a/projects/addon-editor/components/color-selector/color-selector.style.less b/projects/addon-editor/components/color-selector/color-selector.style.less
@@ -1,4 +1,4 @@
-@import 'taiga-ui-angular-local';
+@import 'taiga-ui-local';
 
 :host {
     .createStackingContext();
@@ -25,19 +25,19 @@
         z-index: -1;
         background-image: linear-gradient(
                 45deg,
-                var(--tui-color-border) 25%,
+                var(--tui-base-03) 25%,
                 transparent 25%,
                 transparent 75%,
-                var(--tui-color-border) 75%,
-                var(--tui-color-border)
+                var(--tui-base-03) 75%,
+                var(--tui-base-03)
             ),
             linear-gradient(
                 45deg,
-                var(--tui-color-border) 25%,
+                var(--tui-base-03) 25%,
                 transparent 25%,
                 transparent 75%,
-                var(--tui-color-border) 75%,
-                var(--tui-color-border)
+                var(--tui-base-03) 75%,
+                var(--tui-base-03)
             );
         background-size: 6px 6px;
         background-position: 0 0, 3px 3px;
@@ -49,7 +49,7 @@
     height: 1px;
     margin: 0 0 0 -1px;
     border: none;
-    background: var(--tui-color-border);
+    background: var(--tui-base-03);
 }
 
 .gradient {
@@ -85,13 +85,13 @@
 }
 
 .direction {
-    color: var(--tui-color-text-light);
+    color: var(--tui-text-02);
     margin: 0 6px;
 
     &:hover,
     &_active {
-        color: var(--tui-color-primary-text);
-        background: var(--tui-color-secondary-hover);
+        color: var(--tui-primary-text);
+        background: var(--tui-secondary-hover);
     }
 }
 
@@ -101,5 +101,5 @@
 
 .palette {
     box-sizing: border-box;
-    box-shadow: inset 0 1px var(--tui-color-border);
+    box-shadow: inset 0 1px var(--tui-base-03);
 }
diff --git a/projects/addon-editor/components/edit-link/edit-link.style.less b/projects/addon-editor/components/edit-link/edit-link.style.less
@@ -1,15 +1,15 @@
-@import 'taiga-ui-angular-local';
+@import 'taiga-ui-local';
 
 :host {
     display: flex;
-    height: var(--tui-height-extra-large);
+    height: @height-extra-large;
     align-items: center;
     padding-right: 12px;
 }
 
 .label {
     .text-body-s();
-    height: var(--tui-height-extra-large);
+    height: @height-extra-large;
     box-sizing: border-box;
     padding: 7px 16px;
     min-width: 200px;
@@ -33,7 +33,7 @@
 .button {
     width: 32px;
     height: 32px;
-    margin: 0 var(--tui-space);
+    margin: 0 @space;
     transition: background 0.2s;
 }
 

diff --git a/projects/addon-editor/components/editor/editor.style.less b/projects/addon-editor/components/editor/editor.style.less
@@ -1,4 +1,4 @@
-@import 'taiga-ui-angular-local';
+@import 'taiga-ui-local';
 
 :host {
     .createStackingContext();

diff --git a/projects/addon-editor/components/flat-picker/flat-picker.style.less b/projects/addon-editor/components/flat-picker/flat-picker.style.less
@@ -9,5 +9,5 @@
     height: 16px;
     border-radius: 100%;
     margin: -8px 0 0 -8px;
-    box-shadow: inset 0 0 0 2px var(--tui-color-blank), 0 0 0 1px var(--tui-color-border);
+    box-shadow: inset 0 0 0 2px var(--tui-base-01), 0 0 0 1px var(--tui-base-03);
 }
diff --git a/projects/addon-editor/components/input-color/input-color.style.less b/projects/addon-editor/components/input-color/input-color.style.less
@@ -1,4 +1,4 @@
-@import 'taiga-ui-angular-local';
+@import 'taiga-ui-local';
 
 :host {
     display: block;
@@ -16,6 +16,6 @@
 .color {
     width: 24px;
     height: 24px;
-    box-shadow: inset 0 0 0 1px var(--tui-color-border-dark);
+    box-shadow: inset 0 0 0 1px var(--tui-base-03-dark);
     border-radius: 2px;
 }
diff --git a/projects/addon-editor/components/linear-multi-picker/linear-multi-picker.style.less b/projects/addon-editor/components/linear-multi-picker/linear-multi-picker.style.less
@@ -11,5 +11,5 @@
     height: 16px;
     border-radius: 100%;
     margin: 0 -8px;
-    box-shadow: inset 0 0 0 2px var(--tui-color-blank), 0 0 0 1px var(--tui-color-border);
+    box-shadow: inset 0 0 0 2px var(--tui-base-01), 0 0 0 1px var(--tui-base-03);
 }
diff --git a/projects/addon-editor/components/linear-picker/linear-picker.style.less b/projects/addon-editor/components/linear-picker/linear-picker.style.less
@@ -11,5 +11,5 @@
     height: 16px;
     border-radius: 100%;
     margin: 0 -8px;
-    box-shadow: inset 0 0 0 2px var(--tui-color-blank), 0 0 0 1px var(--tui-color-border);
+    box-shadow: inset 0 0 0 2px var(--tui-base-01), 0 0 0 1px var(--tui-base-03);
 }
diff --git a/projects/addon-editor/components/palette/palette.style.less b/projects/addon-editor/components/palette/palette.style.less
@@ -1,4 +1,4 @@
-@import 'taiga-ui-angular-local';
+@import 'taiga-ui-local';
 
 :host {
     display: block;