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

.npmrc

@@ -1 +1,3 @@
+cafile=VimpelcomCAG2.pem
+@beeline:registry=https://nexus.vimpelcom.ru/repository/npm-all/
 registry=https://nexus.vimpelcom.ru/repository/npm-all/

VimpelcomCAG2.pem

@@ -0,0 +1,59 @@
+-----BEGIN CERTIFICATE-----
+MIIDdTCCAl2gAwIBAgIQQaIoxfL+KLhIxGpv9/PUMzANBgkqhkiG9w0BAQsFADBN
+MRIwEAYKCZImiZPyLGQBGRYCcnUxGTAXBgoJkiaJk/IsZAEZFgl2aW1wZWxjb20x
+HDAaBgNVBAMTE1ZpbXBlbGNvbSBSb290Q0EgRzIwHhcNMTgxMTIxMDkzMjE5WhcN
+MzgxMTIxMDk0MjE5WjBNMRIwEAYKCZImiZPyLGQBGRYCcnUxGTAXBgoJkiaJk/Is
+ZAEZFgl2aW1wZWxjb20xHDAaBgNVBAMTE1ZpbXBlbGNvbSBSb290Q0EgRzIwggEi
+MA0GCSqGSIb3DQEBAQUAA4IBDwAwggEKAoIBAQD7q+kJ4RNskizo7aNgVoAt9Z/p
+tcmjjcuH5iP/5MHLKN8eeWJWxwNm21tevwlIBGXWAvx43v4+xe77IELZdz3RErtA
+W1UYfdzI+c9eYyy9OORc5PgmcWDV2eWuVMFWFnkXbAX0evBM8FPzXie1n393vaT3
+BDmNuoiiuupq/uYY3z5iFVZBpLMZyBxrxYr5adq1oefbfMBeGJGT8N3sqIw1Jzt7
+TsUoYSgpgzSbMY7wbOY8yOcRb0NI1iWo3Rky5DBkyWBm4pvaIe2cXPq7gbXCSFRi
+ewP68+c2b4NTX091paEC542yb9KhKLBfTtcnZPbHAHOABtubhEwf9HfMsehlAgMB
+AAGjUTBPMAsGA1UdDwQEAwIBhjAPBgNVHRMBAf8EBTADAQH/MB0GA1UdDgQWBBTv
+4MjZ3yyuntT6y3fR60JeZm6wTjAQBgkrBgEEAYI3FQEEAwIBADANBgkqhkiG9w0B
+AQsFAAOCAQEApdVkNkRUMuu6p5hq32NdXkgHPTYKKdaxs+c2jEoB3giYrQFIfto+
+UVNPg3IE2iAlpxccRw0jyJ2neC/ai1Imgg6xCZ3a3RYFjoh5eaJWN/aSI8/pg1E8
+MDpzCCJGdo0Ei8zC2eDA8buSrbBtjDN8c//3X9/VhXkZzs3dL7jaIIxSR+EHXWH0
+3al6AavaN/X68qrRWHs2FBpw6qaecL8BPJiliaD3Rl1RyucTUibbUD6ryqeTgMrP
+aeaCPa0Ypb6pw7y0nLyJJPmsX9kgcgS0oEL6RsxhpjZ0eQZcRome/pV9BPUDJyLT
+z8mBO6VYVh9DcuqPmnBxgucMc6mjJiRIEg==
+-----END CERTIFICATE-----
+-----BEGIN CERTIFICATE-----
+MIIGqTCCBZGgAwIBAgITcgAAAAI2SdIO0pgfxQAAAAAAAjANBgkqhkiG9w0BAQsF
+ADBNMRIwEAYKCZImiZPyLGQBGRYCcnUxGTAXBgoJkiaJk/IsZAEZFgl2aW1wZWxj
+b20xHDAaBgNVBAMTE1ZpbXBlbGNvbSBSb290Q0EgRzIwHhcNMTgxMTI2MTAzNzUw
+WhcNMjgxMTI2MTA0NzUwWjBmMRIwEAYKCZImiZPyLGQBGRYCcnUxGTAXBgoJkiaJ
+k/IsZAEZFgl2aW1wZWxjb20xEzARBgoJkiaJk/IsZAEZFgNiZWUxIDAeBgNVBAMT
+F1ZpbXBlbGNvbSBJbnRlcm5hbENBIEcyMIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8A
+MIIBCgKCAQEA2uD2VDoEA25or20KxFS1fWZMIo1M61+WCwHE1kXZVJulbxOxMkEl
+1m8urNyvXkAbU9Gd+nZ6ZPSMkI9lx0ki9EPK5uaBxRY4FDACaT1sEjo+d/ZYMyBB
+P/s4VxIaISbqvD8/MH/h6N5e5eIgAnfqtyblEBKNUuJEDJAirIUb/VnjH7f8gvI/
+CqHa8KOSC/TE2ZqctlJRrm7mRJwwDHrL/VewC7LtwJD7bcWDHNc5+psJLmKc9R9R
+VREi5TfRKD8Mlr0syqmJxqzElfGOusUGSLJqpHS4LUlPrwXjoZ0ZMvWE5U3vftMX
+dHCCVmtB6R+O1iGaM6sK1jnliU8K8NssMwIDAQABo4IDZzCCA2MwEAYJKwYBBAGC
+NxUBBAMCAQAwHQYDVR0OBBYEFEhtK6bKwldIiW8e/DlSWntIC19xMBkGCSsGAQQB
+gjcUAgQMHgoAUwB1AGIAQwBBMAsGA1UdDwQEAwIBhjAPBgNVHRMBAf8EBTADAQH/
+MB8GA1UdIwQYMBaAFO/gyNnfLK6e1PrLd9HrQl5mbrBOMIIBZwYDVR0fBIIBXjCC
+AVowggFWoIIBUqCCAU6GgcZsZGFwOi8vL0NOPVZpbXBlbGNvbSUyMFJvb3RDQSUy
+MEcyLENOPVZpbXBlbFJvb3RDQUcyLENOPUNEUCxDTj1QdWJsaWMlMjBLZXklMjBT
+ZXJ2aWNlcyxDTj1TZXJ2aWNlcyxDTj1Db25maWd1cmF0aW9uLERDPXZpbXBlbGNv
+bSxEQz1ydT9jZXJ0aWZpY2F0ZVJldm9jYXRpb25MaXN0P2Jhc2U/b2JqZWN0Q2xh
+c3M9Y1JMRGlzdHJpYnV0aW9uUG9pbnSGRWh0dHA6Ly9wa2lpbnQuYmVlLnZpbXBl
+bGNvbS5ydS9DZXJ0RW5yb2xsL1ZpbXBlbGNvbSUyMFJvb3RDQSUyMEcyLmNybIY8
+aHR0cDovL3BraWV4dC5iZWVsaW5lLnJ1L3BraS9jZHAvVmltcGVsY29tJTIwUm9v
+dENBJTIwRzIuY3JsMIIBaQYIKwYBBQUHAQEEggFbMIIBVzCBtwYIKwYBBQUHMAKG
+gapsZGFwOi8vL0NOPVZpbXBlbGNvbSUyMFJvb3RDQSUyMEcyLENOPUFJQSxDTj1Q
+dWJsaWMlMjBLZXklMjBTZXJ2aWNlcyxDTj1TZXJ2aWNlcyxDTj1Db25maWd1cmF0
+aW9uLERDPXZpbXBlbGNvbSxEQz1ydT9jQUNlcnRpZmljYXRlP2Jhc2U/b2JqZWN0
+Q2xhc3M9Y2VydGlmaWNhdGlvbkF1dGhvcml0eTBRBggrBgEFBQcwAoZFaHR0cDov
+L3BraWludC5iZWUudmltcGVsY29tLnJ1L0NlcnRFbnJvbGwvVmltcGVsY29tJTIw
+Um9vdENBJTIwRzIuY3J0MEgGCCsGAQUFBzAChjxodHRwOi8vcGtpZXh0LmJlZWxp
+bmUucnUvcGtpL2FpYS9WaW1wZWxjb20lMjBSb290Q0ElMjBHMi5jcnQwDQYJKoZI
+hvcNAQELBQADggEBAHMJHkHITBOqVf2nbsnWveBmZHEjYogxOxNLYezU5f6ySnJl
+ySDz62n7tueq5PFyAPWI4gtDN0K0zdZALCR9CmOT3vf65Wx7HWNU44jBD1slncMi
+rAVkaQW7UcMiB4FWTJMq6B9ozVel6KHkTp96wOGahwaAZgF9g3YtEgZXmrnYaMtw
+g5cjruQ/XAQopeu+47g13kbHTzH1eKaX4rqZI/YHbO5Sv4lX179LjT08qmTx2dc6
+SUyJloalYAK0Spgza8JhEnHPTmwRB6zcZ+PifgkTZVGbx7krsmUyegr53Nlj9hFd
+g5VD1UoDfvcTmkzvdKMVEFfKM7299m0d264YnuM=
+-----END CERTIFICATE-----

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.5.0",
       "license": "MIT",
       "dependencies": {
+        "@beeline/design-tokens": "^1.31.0",
         "vue": "3.4.7"
       },
       "devDependencies": {
@@ -244,6 +245,16 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@beeline/design-tokens": {
+      "version": "1.31.0",
+      "resolved": "https://nexus.vimpelcom.ru/repository/npm-all/@beeline/design-tokens/-/design-tokens-1.31.0.tgz",
+      "integrity": "sha512-sTyldwSkjvrpXuORcIfwjWD9Kmw5odEKB96UvCGv0uxYY5pIFsbnJodPE+DyuKh/eHg0aNsWl2DzEHii13kLqQ==",
+      "hasInstallScript": true,
+      "license": "ISC",
+      "bin": {
+        "ds-migrate": "migrator/migrator.js"
+      }
+    },
     "node_modules/@docsearch/css": {
       "version": "3.3.0",
       "resolved": "https://nexus.vimpelcom.ru/repository/npm-all/@docsearch/css/-/css-3.3.0.tgz",

package.json

@@ -15,14 +15,15 @@
   },
   "license": "MIT",
   "dependencies": {
+    "@beeline/design-tokens": "^1.31.0",
     "vue": "3.4.7"
   },
   "devDependencies": {
     "@docsearch/css": "3.3.0",
     "@types/node": "20.10.7",
+    "@vitejs/plugin-vue": "4.3.4",
     "sass": "1.69.7",
     "vitepress": "1.0.0-rc.40",
-    "vitepress-plugin-tabs": "0.5.0",
-    "@vitejs/plugin-vue": "4.3.4"
+    "vitepress-plugin-tabs": "0.5.0"
   }
 }

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";