feat(visual): cleanup old tokens (#DS-3071) (koobiq#428)

Co-authored-by: Roman Turov <[email protected]>

Author: NikGurev

apps/docs/src/app/components/anchors/_anchors-theme.scss

@@ -3,7 +3,7 @@
 @use '../dist/components/core/styles/common';
 
 @mixin kbq-docs-anchors-theme() {
-    $shadow: var(--kbq-foreground-text-less-contrast);
+    $shadow: var(--kbq-foreground-contrast-secondary);
 
     .docs-anchors {
         background-color: var(--kbq-background-bg);

apps/docs/src/app/components/docs-example-source/_docs-example-source-theme.scss

@@ -3,19 +3,19 @@
 
 @mixin kbq-docs-example-source-theme() {
     .docs-example-source__code {
-        background: var(--kbq-background-background-less-contrast);
+        background: var(--kbq-background-bg-secondary);
     }
 
     .docs-example-source__numbers {
-        background: var(--kbq-background-background-less-contrast);
-        color: var(--kbq-foreground-text-disabled);
+        background: var(--kbq-background-bg-secondary);
+        color: var(--kbq-states-foreground-disabled);
     }
 }
 
 @mixin kbq-docs-example-source-typography() {
     .docs-example-source__code,
     .docs-example-source__numbers {
-        @include tokens.kbq-typography-level-to-styles_css-variables(typography, body-mono);
+        @include tokens.kbq-typography-level-to-styles_css-variables(typography, mono-big);
 
         font-size: 14px;
     }

apps/docs/src/app/components/page-not-found/page-not-found.html

@@ -1,6 +1,6 @@
 <i kbq-icon="kbq-cloud-404_256"></i>
 
-<div class="kbq-display-3">Страница не найдена</div>
+<div class="kbq-display-compact">Страница не найдена</div>
 
 <a
     kbq-link

apps/docs/src/app/components/welcome/_welcome-theme.scss

@@ -16,7 +16,7 @@
     }
 
     .docs-welcome__category-item:focus {
-        border-color: var(--kbq-states-focused-color);
+        border-color: var(--kbq-states-line-focus-theme);
     }
 }
 

apps/docs/src/app/containers/icons-viewer/icons-viewer-theme.scss

@@ -15,7 +15,7 @@
         border-color: var(--kbq-divider-color, var(--kbq-line-contrast-less));
 
         > .docs-icons-viewer__table-cell-name {
-            color: var(--kbq-foreground-text-less-contrast);
+            color: var(--kbq-foreground-contrast-secondary);
         }
 
         &:focus {
@@ -32,7 +32,7 @@
     }
 
     .icon-preview-modal__preview-area {
-        background: var(--kbq-background-background-under);
+        background: var(--kbq-background-bg-secondary);
     }
 }
 
@@ -52,6 +52,6 @@
     }
 
     .docs-icons-viewer__table-empty-results {
-        @include tokens.kbq-typography-level-to-styles_css-variables(typography, display-3);
+        @include tokens.kbq-typography-level-to-styles_css-variables(typography, display-compact);
     }
 }

apps/docs/src/assets/stackblitz/package.json

@@ -27,7 +27,7 @@
         "@koobiq/moment-date-adapter": "^3.1.3",
         "@koobiq/luxon-date-adapter": "^3.1.3",
         "@koobiq/date-formatter": "^3.1.3",
-        "@koobiq/design-tokens": "3.7.3",
+        "@koobiq/design-tokens": "3.8.1",
         "marked": "^9.0.0",
         "overlayscrollbars": "2.7.3",
         "@messageformat/core": "^3.0.0",

apps/docs/src/styles/_hot-keys.scss

@@ -1,7 +1,7 @@
 @mixin hot-key-button-theme() {
     .hot-key-button {
         color: var(--kbq-foreground-contrast);
-        border-color: var(--kbq-foreground-border);
+        border-color: var(--kbq-line-contrast-fade);
         box-shadow: var(--kbq-shadow-card);
     }
 }

apps/docs/src/styles/_theme.kbq.scss

@@ -1,7 +1,6 @@
 @use '../dist/components';
 
 @use '../dist/components/core/styles/visual';
-@use '../dist/components/core/styles/typography';
 @use '../dist/components/core/styles/common/tokens';
 
 @use '../dist/components/core/styles/koobiq-theme' as *;