chore(docs): replaced generated theme with built-in tokens (#DS-3925) (#1331)

Author: NikGurev

apps/docs/scripts/build-tokens.js

@@ -1,9 +1,7 @@
-@use '../../../styles/koobiq/default-theme/variables' as *;
-
 .docs-anchors {
     position: sticky;
 
-    top: $size-7xl;
+    top: var(--kbq-size-7xl);
 
     display: flex;
     flex-direction: column;

apps/docs/src/app/components/anchors/anchors.component.scss

@@ -1,5 +1,3 @@
-@use '../../../../styles/koobiq/default-theme/variables' as *;
-
 .docs-icon-preview-modal .kbq-modal-body {
     display: flex;
     flex-direction: column;
@@ -58,8 +56,8 @@
     display: flex;
     flex-wrap: wrap;
 
-    margin-top: $size-xxs;
-    gap: $size-xxs;
+    margin-top: var(--kbq-size-xxs);
+    gap: var(--kbq-size-xxs);
 
     .kbq-badge {
         cursor: pointer;

apps/docs/src/app/components/icons-viewer/icon-preview-modal/icon-preview-modal.scss

@@ -1,6 +1,3 @@
-@use 'components/core/styles/core' as common;
-@use '../../../styles/koobiq/default-theme/variables' as *;
-
 .docs-icons-viewer {
     overflow-y: auto;
 
@@ -47,7 +44,7 @@
 }
 
 .docs-icons-viewer__table-empty-results {
-    margin: $size-3xl auto;
+    margin: var(--kbq-size-3xl) auto;
 }
 
 .docs-icons-viewer__table-row-header {
@@ -61,10 +58,10 @@
 
 .docs-icons-viewer__table-row {
     display: grid;
-    column-gap: $size-l;
-    row-gap: $size-l;
+    column-gap: var(--kbq-size-l);
+    row-gap: var(--kbq-size-l);
 
-    margin-top: $size-s;
+    margin-top: var(--kbq-size-s);
 }
 
 .docs-icons-viewer__table-row_16 {

apps/docs/src/app/components/icons-viewer/icons-viewer.scss

@@ -1,13 +1,11 @@
-@use '../../../styles/koobiq/default-theme/variables' as *;
-
 .docs-navbar {
     position: sticky;
 
     display: flex;
     flex-direction: row;
     justify-content: space-between;
 
-    padding: $size-l $size-xxl;
+    padding: var(--kbq-size-l) var(--kbq-size-xxl);
 }
 
 .docs-navbar-show-small {
@@ -32,8 +30,8 @@
         }
 
         & .kbq-icon {
-            width: $size-l;
-            height: $size-l;
+            width: var(--kbq-size-l);
+            height: var(--kbq-size-l);
         }
     }
 
@@ -55,7 +53,7 @@
     }
 
     .docs-navbar {
-        padding: $size-s $size-xxs $size-s $size-l;
+        padding: var(--kbq-size-s) var(--kbq-size-xxs) var(--kbq-size-s) var(--kbq-size-l);
 
         .docs-navbar__links {
             margin-left: var(--kbq-size-xxs);
@@ -64,8 +62,8 @@
 
         .DocSearch-Button,
         .kbq-button-icon {
-            width: $size-5xl;
-            height: $size-5xl;
+            width: var(--kbq-size-5xl);
+            height: var(--kbq-size-5xl);
         }
 
         .docs-navbar__right {

apps/docs/src/app/components/navbar/navbar.scss

@@ -1,5 +1,3 @@
-@use '../../../styles/koobiq/default-theme/variables' as *;
-
 .docs-welcome {
     display: flex;
     flex-direction: column;
@@ -22,18 +20,18 @@
 
 .docs-welcome__description {
     max-width: 900px;
-    margin-top: $size-xxl;
+    margin-top: var(--kbq-size-xxl);
 }
 
 .docs-welcome__category {
-    margin-top: $size-5xl;
+    margin-top: var(--kbq-size-5xl);
     max-width: 1300px;
 }
 
 .docs-welcome__category-items {
     flex-wrap: wrap;
 
-    gap: $size-4xl;
+    gap: var(--kbq-size-4xl);
 }
 
 .docs-welcome__category-item {
@@ -47,31 +45,31 @@
 }
 
 .docs-welcome__category-item-title {
-    margin-top: $size-m;
+    margin-top: var(--kbq-size-m);
 }
 
 @media (width < 768px) {
     .docs-welcome {
-        padding: $size-l $size-l 160px;
+        padding: var(--kbq-size-l) var(--kbq-size-l) 160px;
     }
 
     .docs-welcome__category-items {
-        gap: $size-l;
+        gap: var(--kbq-size-l);
     }
 
     .docs-welcome__category-item {
-        width: calc(50% - #{$size-l} / 2);
+        width: calc(50% - var(--kbq-size-l) / 2);
     }
 }
 
 @media (768px <= width < 1200px) {
     .docs-welcome {
-        padding: 0 $size-xxl 160px $size-xxl;
+        padding: 0 var(--kbq-size-xxl) 160px var(--kbq-size-xxl);
     }
 }
 
 @media (1200px <= width < 1920px) {
     .docs-welcome {
-        padding: 0 $size-7xl 160px $size-7xl;
+        padding: 0 var(--kbq-size-7xl) 160px var(--kbq-size-7xl);
     }
 }

apps/docs/src/app/components/welcome/welcome.component.scss

@@ -1,3 +1,16 @@
-@forward 'default-theme/css-tokens.css';
-@forward 'default-theme/css-tokens-dark.css';
-@forward 'default-theme/css-tokens-light.css';
+@forward '@koobiq/design-tokens/web/css/size.css';
+@forward '@koobiq/design-tokens/web/css/font.css';
+@forward '@koobiq/design-tokens/web/css/md-typography.css';
+@forward '@koobiq/design-tokens/web/css/typography.css';
+
+@forward '@koobiq/design-tokens/web/css/palette/grey.css';
+@forward '@koobiq/design-tokens/web/css/palette/green.css';
+@forward '@koobiq/design-tokens/web/css/palette/blue.css';
+@forward '@koobiq/design-tokens/web/css/palette/red.css';
+@forward '@koobiq/design-tokens/web/css/palette/purple.css';
+
+@forward '@koobiq/design-tokens/web/css/light/semantic-colors.css';
+@forward '@koobiq/design-tokens/web/css/light/shadows.css';
+
+@forward '@koobiq/design-tokens/web/css/dark/semantic-colors.css';
+@forward '@koobiq/design-tokens/web/css/dark/shadows.css';