Описание gold-образа

package.json

@@ -15,17 +15,16 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@beeline/design-tokens": "^1.31.6",
+    "@beeline/design-tokens": "1.31.0",
-    "vue": "^3.5.0"
+    "vue": "3.4.7"
   },
   "devDependencies": {
-    "@docsearch/css": "4.1.0",
+    "@docsearch/css": "3.3.0",
-    "@types/node": "^22.0.0",
+    "@types/node": "20.10.7",
-    "@vitejs/plugin-vue": "^6.0.3",
+    "@vitejs/plugin-vue": "4.3.4",
-    "sass": "^1.70.0",
+    "sass": "1.69.7",
-    "typescript": "^5.9.3",
+    "typescript": "^5.8.3",
-    "vite-plugin-static-copy": "^3.1.4",
+    "vitepress": "1.0.0-rc.40",
-    "vitepress": "^1.6.4",
+    "vitepress-plugin-tabs": "0.5.0"
-    "vitepress-plugin-tabs": "^0.7.3"
   }
-}
+}

src/.vitepress/config.mts

@@ -1,9 +1,6 @@
 import { defineConfig } from 'vitepress'
 import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
-import { viteStaticCopy } from 'vite-plugin-static-copy'
 import { overrideComponents } from './override-components'
-import { resolve } from 'node:path'
-import { fileURLToPath, URL } from 'node:url'
 
 const gitlab = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg
@@ -50,7 +47,6 @@ export default defineConfig({
   description: "Документация Beeline Cloud",
   head: [['link', { rel: 'icon', type: 'image/png', sizes: '32x32', href: '/bee-favicon.png' }]],
   base: typeof new_version !== 'undefined' ? '/' : '/docs/',
-  appearance: false,
   markdown: {
     config(md) {
       md.use(tabsMarkdownPlugin)
@@ -58,31 +54,8 @@ export default defineConfig({
   },
   vite: {
     resolve: {
-      alias: [
+      alias: overrideComponents(),
-        ...overrideComponents(),
+    }
-        {
-          find: '@',
-          replacement: fileURLToPath(new URL('./theme', import.meta.url))
-        },
-      ],
-    },
-    plugins: [
-      viteStaticCopy({
-        targets: [
-          {
-            src: resolve(__dirname, '../../node_modules/@beeline/design-tokens/assets/fonts'),
-            dest: 'assets',
-          },
-        ],
-      }),
-    ],
-    css: {
-      preprocessorOptions: {
-        scss: {
-          api: 'modern-compiler',
-        },
-      },
-    },
   },
   locales: {
     root: {

src/.vitepress/theme/components/CustomDoc.vue

@@ -76,7 +76,7 @@ const pageName = computed(() =>
 </template>
 
 <style scoped lang="scss">
-@use '@/scss/helpers/media';
+@use 'src/assets/scss/app/helpers/media';
 
 .VPDoc {
   padding: 32px 24px 96px;

src/.vitepress/theme/scss/components/vp-sidebar.scss

@@ -1,6 +1,6 @@
 @use '@beeline/design-tokens/scss/tokens/components/navigationDrawer';
 @use '@beeline/design-tokens/scss/tokens/themes/theme-variables' as theme;
-@use '@/scss/helpers/media';
+@use 'src/assets/scss/app/helpers/media';
 
 .VPSidebar {
   --vp-sidebar-bg-color: var(--vp-c-bg);

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

@@ -1,8 +1,3 @@
-@use '@beeline/design-tokens/scss/font-face';
-@use "@beeline/design-tokens/scss/iconfont/iconfont" with (
-  $font-path-iconfont: '../assets/fonts/iconfont'
-);
-@use "@beeline/design-tokens/scss/iconfont/icons";
 @use '@beeline/design-tokens/scss/tokens/themes/dark';
 @use '@beeline/design-tokens/scss/tokens/themes';
 

src/.vitepress/theme/scss/fonts.scss

@@ -0,0 +1,57 @@
+@use "@beeline/design-tokens/scss/iconfont/iconfont" with (
+  $font-path-iconfont: '/fonts/iconfont'
+);
+@use "@beeline/design-tokens/scss/iconfont/icons";
+
+$font-path-beeline-sans: '/fonts/beeline-sans' !default;
+
+@mixin beeline-sans-font($type, $weight, $style: normal) {
+  @font-face {
+    font-family: "Beeline Sans";
+    src:url('#{$font-path-beeline-sans}/BeelineSans-#{$type}.woff2') format('woff2'),
+		url('#{$font-path-beeline-sans}/BeelineSans-#{$type}.woff') format('woff'),
+		url('#{$font-path-beeline-sans}/BeelineSans-#{$type}.ttf') format('truetype');
+    font-weight: $weight;
+    font-style: $style;
+  }
+}
+
+@mixin beeline-sans-font-pair($type, $weight) {
+  @include beeline-sans-font($type, $weight);
+  
+}
+
+@include beeline-sans-font-pair(Regular, 400);
+
+@include beeline-sans-font-pair(Medium, 500);
+
+@include beeline-sans-font-pair(Bold, 700);
+
+@include beeline-sans-font-pair(Black, 900);
+
+$font-path-roboto-mono: '/fonts/roboto-mono' !default;
+
+@mixin roboto-mono-font($type, $weight, $style: normal) {
+  @font-face {
+    font-family: "Roboto Mono";
+    src:url('#{$font-path-roboto-mono}/RobotoMono-#{$type}.woff2') format('woff2'),
+		url('#{$font-path-roboto-mono}/RobotoMono-#{$type}.woff') format('woff'),
+		url('#{$font-path-roboto-mono}/RobotoMono-#{$type}.ttf') format('truetype');
+    font-weight: $weight;
+    font-style: $style;
+  }
+}
+
+@mixin roboto-mono-font-pair($type, $weight) {
+  @include roboto-mono-font($type, $weight);
+  
+}
+
+@include roboto-mono-font-pair(Light, 300);
+
+@include roboto-mono-font-pair(Regular, 400);
+
+@include roboto-mono-font-pair(Medium, 500);
+
+@include roboto-mono-font-pair(Bold, 700);
+

src/.vitepress/theme/scss/helpers/_index.scss

@@ -1 +0,0 @@
-@forward "media";

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

@@ -1,3 +1,4 @@
-@use "design-tokens";
+@use "fonts";
+@use "design-system";
 @use "vars";
 @use "components";

src/assets/scss/app/_base.scss

@@ -0,0 +1,38 @@
+@use '@beeline/design-tokens/scss/tokens/themes' as *;
+
+:root {
+  --app-navbar-height: #{$app-navbar-height};
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+}
+
+html {
+  overflow-y: auto;
+}
+
+#app {
+  height: 100vh;
+}
+
+html.dark-theme {
+  background-color: $color-background-base;
+  color: $color-text-active;
+}
+
+a:visited {
+  color: $color-text-active !important;
+}
+
+a:hover {
+  text-decoration: none !important;
+}

src/assets/scss/app/_index.scss

@@ -0,0 +1,5 @@
+@import 'variables';
+@import 'base';
+@import 'form';
+@import 'helpers';
+@import 'components';

src/assets/scss/app/_variables.scss

@@ -0,0 +1,3 @@
+// Navbar
+$app-navbar-height: 3.5rem;
+$app-header-height: 64px;

src/assets/scss/app/components/_fab.scss

@@ -0,0 +1,122 @@
+@use '@beeline/design-tokens/scss/tokens/themes' as *;
+@use '@beeline/design-tokens/scss/tokens/components/fab' as *;
+@use '@beeline/design-tokens/scss/tokens/components/button' as *;
+@use '@beeline/design-tokens/scss/tokens/globals' as *;
+@use '@beeline/design-tokens/scss/mixin';
+
+@mixin fab_button {
+  background-color: $button-overlay-background-color;
+  padding-left: $button-only-text-small-padding-horizontal;
+  padding-right: $button-only-text-small-padding-horizontal;
+  letter-spacing: $button-small-text-font-letter-spacing;
+  line-height: $button-small-text-font-line-height;
+  font-size: $button-small-text-font-size;
+  height: $button-small-height;
+  color: $button-overlay-text-color;
+  box-shadow: none;
+  border: 1px solid $button-outline-border-color;
+  border-radius: $button-border-radius;
+
+  &:hover {
+    cursor: pointer;
+    background-color: $button-overlay-background-color-hover;
+  }
+}
+
+.app-fab {
+  height: $fab-standard-height;
+  width: $fab-standard-width;
+  position: fixed;
+  z-index: 50;
+  display: inline-flex;
+  align-items: center;
+  border: 0;
+  padding: $fab-standard-padding;
+  letter-spacing: $fab-text-font-letter-spacing;
+  line-height: $fab-text-font-line-height;
+  font-size: $fab-text-font-size;
+  font-weight: $fab-text-font-weight;
+  box-shadow: $fab-shadow;
+  background-color: $color-background-inverse;
+  color: $color-text-active-inverse;
+  cursor: pointer;
+
+  &__icon {
+    width: 24px;
+    height: 24px;
+  }
+
+  &:hover {
+    // background-color: $fab-hover-background-color;
+  }
+
+  &--focused {
+    border-color: $fab-focused-border-color;
+    border-width: $fab-focused-border-width;
+  }
+
+  &--mini {
+    height: $fab-mini-height;
+    width: $fab-mini-width;
+    border-radius: $fab-mini-border-radius;
+    padding: $fab-mini-padding;
+  }
+
+  &--extended {
+    height: $fab-extended-height;
+    border-radius: $fab-extended-border-radius;
+    padding-right: $fab-extended-padding-right;
+    padding-left: $fab-extended-padding-left;
+
+    & &__icon {
+      margin-right: $fab-extended-icon-spacing;
+    }
+  }
+
+  .app-fab--extended.app-fab--mini {
+    height: $fab-mini-height;
+  }
+
+  &--disabled {
+    opacity: $fab-disabled-opacity;
+  }
+}
+
+.app-fab-dialog {
+  position: fixed;
+  bottom: 44px;
+  right: 0;
+  // background-color: $color-background-medium;
+  background-color: transparent;
+  // border-radius: 12px;
+  padding: 1rem;
+  // border: 1px solid $color-border;
+  // min-width: 300px;
+  // box-shadow: $elevation-medium;
+
+  .icon-contained {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    height: 40px;
+    background-color: $color-status-neutral-background;
+    color: $color-status-neutral;
+    border-radius: 12px;
+  }
+
+  #feedback_button {
+    @include fab_button();
+  }
+
+  #bug_button {
+    @include fab_button();
+    line-height: 38px;
+  }
+
+  a#bug_button,
+  a#bug_button:visited,
+  a#bug_button:active {
+    color: $button-overlay-text-color !important;
+  }
+}

src/assets/scss/app/components/_index.scss

@@ -0,0 +1 @@
+@import 'fab';

src/assets/scss/app/form/_states.scss

@@ -0,0 +1 @@
+@use '@beeline/design-tokens/scss/tokens/components/formfield' as formfield;

src/assets/scss/app/form/_textarea.scss

@@ -0,0 +1,104 @@
+@use '@beeline/design-tokens/scss/tokens/components/textarea' as *;
+@use '@beeline/design-tokens/scss/tokens/components/formfield';
+@use '@beeline/design-tokens/scss/tokens/themes';
+
+.textarea-field {
+  $px: 16px;
+
+  display: block;
+  width: 100%;
+  position: relative;
+  padding: $textarea-without-label-medium-text-margin-top $px $textarea-text-margin-bottom;
+  height: $textarea-without-label-medium-height;
+  background: formfield.$formfield-background-color;
+  border: formfield.$formfield-border-width formfield.$formfield-border-style formfield.$formfield-border-color;
+  border-radius: formfield.$formfield-border-radius;
+
+  & &__label {
+    position: absolute;
+    top: $textarea-with-label-text-margin-top;
+    left: $px;
+    transition: font-size 300ms ease-out;
+    color: formfield.$formfield-label-color;
+  }
+
+  & textarea {
+    height: $textarea-medium-text-height;
+    width: 100%;
+    outline: none;
+    border: none;
+    box-shadow: none;
+    resize: none;
+    background-color: transparent;
+    color: themes.$color-text-active;
+  }
+
+  & &__resizer {
+    position: absolute;
+    bottom: $textarea-resizer-margin-bottom;
+    right: $textarea-resizer-margin-right;
+    rotate: -45deg;
+    width: 1em;
+    height: 1em;
+
+    &:hover {
+      cursor: nwse-resize;
+    }
+
+    &::before {
+      content: '';
+      display: flex;
+      background-color: darkslategrey;
+      width: 10px;
+      height: 1px;
+    }
+
+    &::after {
+      content: '';
+      display: flex;
+      position: relative;
+      right: -3px;
+      bottom: -2px;
+      background-color: darkslategrey;
+      width: 4px;
+      height: 1px;
+    }
+  }
+
+  &.textarea-field--with-label {
+    height: $textarea-with-label-medium-height;
+    padding-top: $textarea-with-label-text-margin-top;
+
+    &.textarea-field--floated .textarea-field__label {
+      top: $textarea-medium-label-floated-margin-top;
+      line-height: $textarea-small-label-floated-font-line-height;
+      font-size: $textarea-small-label-floated-font-size;
+    }
+
+    &.textarea-field--small {
+      height: $textarea-with-label-small-height;
+      padding-top: $textarea-small-label-margin-top;
+      top: $textarea-small-label-floated-margin-top;
+
+      & .textarea-field__label {
+        font-size: $textarea-small-label-font-size;
+        font-weight: $textarea-small-label-font-weight;
+        letter-spacing: $textarea-small-label-font-letter-spacing;
+      }
+    }
+  }
+
+  &.textarea-field--focused {
+    border-color: formfield.$formfield-border-color-focus;
+    background-color: transparent;
+  }
+
+  &.textarea-field--small {
+    padding-top: $textarea-without-label-small-text-margin-top;
+    height: $textarea-without-label-small-height;
+
+    & textarea {
+      height: $textarea-small-text-height;
+    }
+  }
+}

src/assets/scss/app/form/_textfield.scss

@@ -0,0 +1,70 @@
+@use '@beeline/design-tokens/scss/tokens/components/textfield' as *;
+@use '@beeline/design-tokens/scss/tokens/globals';
+@use '@beeline/design-tokens/scss/tokens/themes' as theme;
+
+.textfield {
+  display: block;
+  position: relative;
+  width: 100%;
+  height: globals.$size-control-height-medium;
+  border: globals.$size-border-width-regular solid transparent;
+  padding-top: $textfield-without-label-medium-text-margin-vertical;
+  padding-bottom: $textfield-without-label-medium-text-margin-vertical;
+  background-color: theme.$color-control-background;
+  border-radius: 12px; // globals.$size-border-radius-x6;
+
+  &:hover {
+    background-color: theme.$color-control-background-hover;
+  }
+
+  // input
+  input {
+    outline: none;
+    box-shadow: none;
+  }
+
+  // label
+  &--with-label {
+    // padding-top: $textfield-with-label-medium-text-margin-top;
+    // padding-bottom: $textfield-with-label-medium-text-margin-bottom;
+  }
+
+  &__label {
+    // padding-top: $textfield-medium-label-margin-top;
+
+    &.textfield__label--floated {
+      // padding-top: $textfield-medium-label-margin-top-floated;
+    }
+  }
+
+  // small
+  &--small {
+    height: globals.$size-control-height-small;
+  }
+
+  // large
+  &--large {
+    height: globals.$size-control-height-large;
+    padding-top: $textfield-without-label-large-text-margin-vertical;
+    padding-bottom: $textfield-without-label-large-text-margin-vertical;
+
+    &.textfield--with-label {
+      padding-top: $textfield-with-label-large-text-margin-top;
+      padding-bottom: $textfield-with-label-large-text-margin-bottom;
+    }
+
+    .textfield__label {
+      padding-top: $textfield-large-label-margin-top;
+
+      &.textfield__label--floated {
+        padding-top: $textfield-large-label-margin-top-floated;
+      }
+    }
+  }
+
+  // states
+  &--focused {
+    border-color: theme.$color-border-focus;
+    background-color: theme.$color-background-base;
+  }
+}

src/assets/scss/app/helpers/_color.scss

@@ -0,0 +1,5 @@
+@use '@beeline/design-tokens/scss/tokens/themes' as *;
+
+.app-bg-status-error {
+  background-color: $color-status-error-background;
+}

src/assets/scss/app/helpers/_common.scss

@@ -0,0 +1,3 @@
+.app-cursor-pointer {
+  cursor: pointer;
+}

src/assets/scss/app/helpers/_index.scss

@@ -0,0 +1,4 @@
+@import 'text';
+@import 'color';
+@import 'media';
+@import 'common';

src/assets/scss/app/helpers/_media.scss

@@ -1,5 +1,3 @@
-@use "sass:map";
-
 // @deprecated
 @mixin media($minWidth, $maxWidth) {
   @media (min-width: $minWidth) and (max-width: $maxWidth) {
@@ -29,7 +27,7 @@ $breakpoints: (
 );
 
 @mixin max($breakpoint) {
-  $value: map.get($breakpoints, $breakpoint);
+  $value: map-get($breakpoints, $breakpoint);
 
   @if $value {
     @media (max-width: $value) {

src/assets/scss/app/helpers/_text.scss

@@ -0,0 +1,80 @@
+@use '@beeline/design-tokens/scss/tokens/themes' as theme;
+@use 'src/assets/scss/app/mixins' as mixins;
+
+@mixin truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@mixin truncate-lines($lines: 2) {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $lines;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.app-text-active {
+  color: theme.$color-text-active;
+}
+
+.app-text-inactive {
+  color: theme.$color-text-inactive;
+}
+
+// styles for hyperlinks
+.app-link {
+  color: theme.$color-text-active;
+
+  &:hover {
+    color: theme.$color-text-active;
+  }
+}
+
+.app-text-caption {
+  @include mixins.text-caption;
+}
+
+.app-text-truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// Sizes
+.app-text-size-subtitle-3 {
+  font-size: 15px;
+  line-height: 20px;
+  font-weight: 500;
+  letter-spacing: 0.2px;
+}
+
+.app-text-size-body-3 {
+  font-size: 15px;
+  line-height: 18px;
+  letter-spacing: 0.2px;
+  font-weight: 400;
+}
+
+// Colors
+.app-text-color-caption {
+  color: theme.$color-text-inactive;
+}
+.app-text-warning {
+  color: theme.$color-status-warning;
+}
+.app-text-info {
+  color: theme.$color-status-info;
+}
+.app-text-error {
+  color: theme.$color-status-error;
+}
+.app-text-success {
+  color: theme.$color-status-success;
+}
+
+// Breaks
+.app-break-keep-all {
+  word-break: keep-all;
+}

src/assets/scss/app/loading/_index.scss

@@ -0,0 +1 @@
+@import 'spinner';

src/assets/scss/app/loading/_spinner.scss

@@ -0,0 +1,6 @@
+@use 'src/assets/scss/app/variables' as v;
+
+.app-loading-screen {
+  display: block;
+  height: calc(100vh - v.$app-header-height);
+}

src/assets/scss/app/mixins/_index.scss

@@ -0,0 +1 @@
+@forward 'text';

src/assets/scss/app/mixins/_text.scss

@@ -0,0 +1,29 @@
+@use '@beeline/design-tokens/scss/tokens/themes' as theme;
+
+%text_caption {
+  font-size: 13px;
+  line-height: 16px;
+}
+
+@mixin text_caption {
+  @extend %text_caption;
+  color: theme.$color-text-inactive;
+}
+
+@mixin text_caption_error {
+  @extend %text_caption;
+  color: theme.$color-status-error;
+}
+
+@mixin text_body_2 {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 17px;
+  line-height: 22px;
+}
+
+@mixin truncate {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

src/assets/scss/beeline/_base.scss

@@ -0,0 +1,10 @@
+@use '@beeline/design-tokens/scss/tokens/themes';
+@use '@beeline/design-tokens/scss/tokens/themes/dark';
+
+:root {
+  @include themes.theme();
+}
+
+.dark-theme {
+  @include themes.theme(dark.$theme);
+}

src/assets/scss/beeline/_fonts.scss

@@ -0,0 +1,3 @@
+@use '@beeline/design-tokens/scss/font-face' with (
+  $font-path-beeline-sans: '../fonts/beeline-sans'
+);

src/assets/scss/beeline/_icons.scss

@@ -0,0 +1,40 @@
+// @use "@beeline/design-tokens/scss/iconfont/iconfont" with (
+//     $font-path-iconfont: '../fonts/iconfont'
+// );
+@use '@beeline/design-tokens/scss/iconfont/icons';
+
+@font-face {
+  font-display: block;
+  font-family: 'BeelineIcons';
+  font-style: normal;
+  font-weight: 400;
+  src:
+    url('../fonts/iconfont/BeelineIcons.woff2') format('woff2'),
+    url('../fonts/iconfont/BeelineIcons.woff') format('woff'),
+    url('../fonts/iconfont/BeelineIcons.ttf') format('ttf');
+}
+
+.beeline-icons {
+  font-family: 'BeelineIcons', sans-serif;
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px; /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+}

src/assets/scss/beeline/_index.scss

@@ -0,0 +1,4 @@
+@import 'fonts';
+@import 'icons';
+@import 'base';
+@import 'scrollbar';

src/assets/scss/beeline/_scrollbar.scss

@@ -0,0 +1,29 @@
+@use '@beeline/design-tokens/scss/tokens/themes';
+
+html {
+  scrollbar-color: themes.$color-text-inactive transparent;
+}
+
+* {
+  scrollbar-width: thin;
+}
+
+body::-webkit-scrollbar {
+  display: none;
+}
+
+::-webkit-scrollbar {
+  width: 15px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: themes.$color-text-inactive;
+  border: 4px solid transparent;
+  background-clip: content-box;
+  border-radius: 100px;
+  min-height: 28px;
+}

src/assets/scss/bulma/_index.scss

@@ -0,0 +1,51 @@
+@use 'sass:map';
+@use '@beeline/design-tokens/scss/tokens/globals';
+@use '@beeline/design-tokens/scss/tokens/themes/light';
+@use '@beeline/design-tokens/scss/tokens/components/button';
+
+// Colors
+$primary: globals.$color-background-brand;
+$background: map.get(light.$theme, 'color-background-base');
+$info: map.get(light.$theme, 'color-status-info');
+$success: map.get(light.$theme, 'color-status-success');
+$warning: map.get(light.$theme, 'color-status-warning');
+$danger: map.get(light.$theme, 'color-status-error');
+
+// Typography
+$family-primary: globals.$font-family-text;
+$title-color: map.get(light.$theme, 'color-text-active');
+$subtitle-color: map.get(light.$theme, 'color-text-inactive');
+
+// Radius
+$radius: globals.$size-border-radius-x6;
+
+// Buttons
+$button-padding-vertical: globals.$size-spacing-x4;
+$button-padding-horizontal: globals.$size-spacing-x5;
+$button-background-color: button.$button-plain-background-color;
+$button-focus-border-color: map.get(light.$theme, 'color-background-base-focused');
+$button-disabled-opacity: button.$button-opacity-disabled;
+
+// Box
+$box-radius: $radius;
+$box-shadow: globals.$elevation-low;
+$box-padding: globals.$size-spacing-x6;
+$box-link-hover-shadow: globals.$elevation-medium;
+$box-link-active-shadow: globals.$elevation-medium;
+
+// Form
+$input-color: map.get(light.$theme, 'color-text-active');
+$input-background-color: map.get(light.$theme, 'color-control-background');
+$label-color: map.get(light.$theme, 'color-text-inactive');
+$label-weight: globals.$font-weight-caption;
+
+// Table
+$table-color: map.get(light.$theme, 'color-text-active');
+$table-background-color: map.get(light.$theme, 'color-background-base');
+$table-cell-border: 1px solid map.get(light.$theme, 'color-control-background');
+$table-cell-padding: 16px 16px;
+$table-cell-heading-color: map.get(light.$theme, 'color-text-active');
+$table-head-cell-border-width: 1px;
+
+@import 'bulma/bulma';
+@import 'overrides';

src/assets/scss/bulma/overrides/_box.scss

@@ -0,0 +1,12 @@
+@use 'sass:map';
+@use '@beeline/design-tokens/scss/tokens/themes/dark';
+
+.box {
+  .dark-theme & {
+    background-color: map.get(dark.$theme, 'color-background-low');
+
+    &:hover {
+      background-color: map.get(dark.$theme, 'color-background-medium');
+    }
+  }
+}

src/assets/scss/bulma/overrides/_button.scss

@@ -0,0 +1,11 @@
+@use '@beeline/design-tokens/scss/tokens/components/button' as button;
+@use '@beeline/design-tokens/scss/tokens/themes';
+
+.button {
+  font-weight: button.$button-medium-text-font-weight;
+  color: themes.$color-text-active;
+
+  &:hover {
+    color: themes.$color-text-active;
+  }
+}

src/assets/scss/bulma/overrides/_dropdown.scss

@@ -0,0 +1,16 @@
+@use '@beeline/design-tokens/scss/tokens/themes';
+
+.dropdown {
+  &-content {
+    background-color: themes.$color-background-medium;
+  }
+
+  .dropdown-item {
+    color: themes.$color-text-active;
+
+    &:hover {
+      background-color: themes.$color-background-base-hover;
+      color: themes.$color-text-active;
+    }
+  }
+}

src/assets/scss/bulma/overrides/_index.scss

@@ -0,0 +1,7 @@
+@import 'button';
+@import 'title';
+@import 'box';
+@import 'form';
+@import 'table';
+@import 'dropdown';
+@import 'text';

src/assets/scss/bulma/overrides/_table.scss

@@ -0,0 +1,42 @@
+@use 'sass:map';
+@use '@beeline/design-tokens/scss/tokens/globals';
+@use '@beeline/design-tokens/scss/tokens/themes/light';
+@use '@beeline/design-tokens/scss/tokens/themes/dark';
+@use '@beeline/design-tokens/scss/tokens/components/button';
+
+.table {
+  .dark-theme & {
+    color: map.get(dark.$theme, 'color-text-active');
+    background-color: map.get(dark.$theme, 'color-background-base');
+
+    td,
+    th {
+      border: 1px solid map.get(dark.$theme, 'color-control-background');
+    }
+
+    th {
+      color: map.get(dark.$theme, 'color-text-active');
+    }
+  }
+
+  td,
+  th {
+    border-width: 1px;
+    border-style: solid;
+  }
+
+  th {
+    font-weight: globals.$font-weight-medium;
+  }
+
+  tbody {
+    tr {
+      &:last-child {
+        td,
+        th {
+          border-bottom-width: 1px;
+        }
+      }
+    }
+  }
+}

src/assets/scss/bulma/overrides/_text.scss

@@ -0,0 +1,15 @@
+@use '@beeline/design-tokens/scss/tokens/themes' as *;
+
+code {
+  background-color: $color-background-base;
+}
+
+pre {
+  color: $color-text-active;
+  background-color: $color-background-base;
+}
+
+.help {
+  font-size: 13px;
+  line-height: 16px;
+}

src/assets/scss/bulma/overrides/_title.scss

@@ -0,0 +1,38 @@
+@use '@beeline/design-tokens/scss/mixin' as bee;
+
+.title {
+  @include bee.h3();
+
+  &.is-1 {
+    @include bee.h1();
+  }
+  &.is-2 {
+    @include bee.h2();
+  }
+  &.is-3 {
+    @include bee.h3();
+  }
+  &.is-4 {
+    @include bee.h4();
+  }
+  &.is-5 {
+    @include bee.h5();
+  }
+  &.is-6 {
+    @include bee.h6();
+  }
+}
+
+.subtitle {
+  @include bee.subtitle2();
+
+  &.is-1 {
+    @include bee.subtitle1();
+  }
+  &.is-2 {
+    @include bee.subtitle2();
+  }
+  &.is-3 {
+    @include bee.subtitle3();
+  }
+}

src/assets/scss/bulma/overrides/form/_index.scss

@@ -0,0 +1,4 @@
+@import 'shared';
+@import 'select';
+@import 'input-textarea';
+@import 'title';

src/assets/scss/bulma/overrides/form/_input-textarea.scss

@@ -0,0 +1,46 @@
+@use 'sass:map';
+// @use "@beeline/design-tokens/scss/tokens/globals";
+@use '@beeline/design-tokens/scss/tokens/themes/light';
+@use '@beeline/design-tokens/scss/tokens/themes/dark';
+
+%input-textarea {
+  box-shadow: none;
+  border: 1px solid transparent;
+  color: map.get(light.$theme, 'color-text-active');
+  background: map.get(light.$theme, 'color-control-background');
+
+  &:hover {
+    border-color: map.get(light.$theme, 'color-border-focus');
+  }
+
+  .dark-theme & {
+    color: map.get(dark.$theme, 'color-text-active');
+    background: map.get(dark.$theme, 'color-control-background');
+
+    &:hover {
+      border-color: map.get(dark.$theme, 'color-border-focus');
+    }
+  }
+
+  &:focus,
+  &.is-focused,
+  &:active,
+  &.is-active {
+    box-shadow: none !important;
+    border-color: map.get(light.$theme, 'color-border-focus');
+    background: map.get(light.$theme, 'color-background-base');
+
+    .dark-theme & {
+      background: map.get(dark.$theme, 'color-background-base');
+      border-color: map.get(dark.$theme, 'color-border-focus');
+    }
+  }
+}
+
+.input {
+  @extend %input-textarea;
+}
+
+.textarea {
+  @extend %input-textarea;
+}

src/assets/scss/bulma/overrides/form/_select.scss

@@ -0,0 +1,48 @@
+@use 'sass:map';
+@use '@beeline/design-tokens/scss/tokens/themes/dark';
+@use '@beeline/design-tokens/scss/tokens/themes/light';
+
+.select {
+  select {
+    border: 1px solid transparent;
+
+    &:focus,
+    &:active {
+      border: 1px solid map.get(light.$theme, 'color-border-focus');
+      background-color: map.get(light.$theme, 'color-background-base');
+      box-shadow: none;
+    }
+  }
+
+  &:not(.is-multiple):not(.is-loading)::after {
+    content: none;
+  }
+
+  &:focus,
+  &.is-focused,
+  &:active,
+  &.is-active {
+    select {
+      border: 1px solid map.get(light.$theme, 'color-border-focus');
+      background-color: map.get(light.$theme, 'color-background-base');
+      box-shadow: none;
+    }
+
+    .dark-theme & {
+      select {
+        border: 1px solid map.get(dark.$theme, 'color-border-focus');
+        background-color: map.get(dark.$theme, 'color-background-base');
+        box-shadow: none;
+      }
+    }
+  }
+
+  .dark-theme & {
+    color: map.get(dark.$theme, 'color-text-active');
+
+    & select {
+      color: map.get(dark.$theme, 'color-text-active');
+      background-color: map.get(dark.$theme, 'color-control-background');
+    }
+  }
+}

src/assets/scss/bulma/overrides/form/_shared.scss

@@ -0,0 +1,11 @@
+@use 'sass:map';
+@use '@beeline/design-tokens/scss/tokens/globals';
+@use '@beeline/design-tokens/scss/tokens/themes/dark';
+
+.label {
+  line-height: globals.$font-line-height-caption;
+
+  .dark-theme & {
+    color: map.get(dark.$theme, 'color-text-inactive');
+  }
+}

src/assets/scss/bulma/overrides/form/_title.scss

@@ -0,0 +1,14 @@
+@use 'sass:map';
+@use '@beeline/design-tokens/scss/tokens/themes/dark';
+
+.title {
+  .dark-theme & {
+    color: map.get(dark.$theme, 'color-text-active');
+  }
+}
+
+.subtitle {
+  .dark-theme & {
+    color: map.get(dark.$theme, 'color-text-inactive');
+  }
+}

src/assets/scss/style.scss

@@ -0,0 +1,8 @@
+@use 'beeline';
+@use 'bulma';
+@use 'app';
+
+.proto {
+  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+  color: #f55;
+}

src/index.md

@@ -113,28 +113,22 @@ services:
       - title: Защита веб-приложений (WAF)
         description: В работе
         icon: security
-      - title: Защита серверов и рабочих станций (EPP)
+      - title: Защита серверов и рабочих мест
         description: В работе
         icon: security
-      - title: Управление мобильными устройствами (MDM)
+      - title: Защита устройств пользователей
         description: В работе
         icon: security
-      - title: Сканер уязвимостей (VS)
+      - title: Сканер уязвимостей
         description: В работе
         icon: security
-      - title: Обучение основам киберграмотности (SA)
+      - title: Курсы кибербезопасности
         description: В работе
         icon: security
-      - title: Многофакторная аутентификация (MFA)
+      - title: Многофакторная аутентификация
         description: В работе
         icon: security
-      - title: Защита электронной почты (SEG)
+      - title: Фильтрация почтового трафика
-        description: В работе
-        icon: security
-      - title: Защита от DDoS
-        description: В работе
-        icon: security
-      - title: ГОСТ VPN
         description: В работе
         icon: security
   - title: Виртуальное рабочее место