Добавление дизайн токенов

src/.vitepress/theme/scss/components/SectionLinkList.scss

@@ -0,0 +1,19 @@
+@use "@beeline/design-tokens/scss/tokens/themes";
+@use "@beeline/design-tokens/scss/tokens/globals/sizes";
+
+.SectionLinkList {
+  $el: &;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: sizes.$size-spacing-x6 sizes.$size-spacing-x6;
+
+  &__Item {
+    display: flex;
+    flex-direction: column;
+    gap: sizes.$size-spacing-x2;
+  }
+
+  &__Description {
+    color: themes.$color-text-inactive;
+  }
+}

src/.vitepress/theme/scss/components/_index.scss

@@ -1,4 +1,5 @@
-@use "vp-doc.scss";
-@use "vp-custom-block.scss";
-@use "vp-doc-aside.scss";
-@use "vp-sidebar.scss";
+@use "vp-doc";
+@use "vp-custom-block";
+@use "vp-doc-aside";
+@use "vp-sidebar";
+@use "SectionLinkList";

src/.vitepress/theme/scss/design-system.scss

@@ -1,3 +1,6 @@
+@use '@beeline/design-tokens/scss/tokens/themes/dark';
+@use '@beeline/design-tokens/scss/tokens/themes';
+
 :root {
     --color-text-active: rgba(9, 11, 22, 0.94);
     --color-text-inactive: rgba(25, 28, 52, 0.7);
@@ -7,9 +10,13 @@
     --color-button-contained-background-color: #fdd835;
     --color-button-contained-hover-background-color: #fdc435;
     --color-button-contained-text-color: rgba(9, 11, 22, 0.94);
+
+    @include themes.theme();
 }
 
 .dark {
     --color-text-active: rgba(255, 255, 255, 0.87);
     --color-text-inactive: rgba(255, 255, 255, 0.6);
+
+    @include themes.theme(dark.$theme);
 }

src/.vitepress/theme/scss/style.scss

@@ -1,4 +1,4 @@
-@use "fonts.scss";
-@use "design-system.scss";
-@use "vars.scss";
+@use "fonts";
+@use "design-system";
+@use "vars";
 @use "components";