alex/fox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

VEGA-4499: адаптация UI главной страницы документации

Browse Source
This commit is contained in:
Захаров Дмитрий Анатольевич
2025-08-25 11:21:09 +00:00
committed by Речкина Елена Валерьевна
parent 2ce47117e1
commit baca55494c
140 changed files with 2458 additions and 325 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/scss/bulma/_index.scss
+51
View File
@@ -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
+12
View File
@@ -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
+11
View File
@@ -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
+16
View File
@@ -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
+7
View File
@@ -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
+42
View File
@@ -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
+15
View File
@@ -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
+38
View File
@@ -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
+4
View File
@@ -0,0 +1,4 @@
@import 'shared';
@import 'select';
@import 'input-textarea';
@import 'title';
src/assets/scss/bulma/overrides/form/_input-textarea.scss
+46
View File
@@ -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
+48
View File
@@ -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
+11
View File
@@ -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
+14
View File
@@ -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');
}
}