From c0ba015e4ecaf9c449ecd5ad0f89cf1eb1021e78 Mon Sep 17 00:00:00 2001 From: NasgulNexus Date: Wed, 4 Dec 2024 18:30:55 +0100 Subject: [PATCH 1/3] feat: css api --- .storybook/main.ts | 2 +- .../Form/hooks/useSearch/useSearch.scss | 4 +- .../AccordeonCard/AccordeonCard.scss | 12 +- src/lib/kit/components/Card/Card.scss | 16 +- .../components/GroupIndent/GroupIndent.scss | 14 +- .../Inputs/ArrayBase/ArrayBase.scss | 8 +- .../Inputs/CheckboxGroup/CheckboxGroup.scss | 8 +- .../Inputs/FileInput/FileInput.scss | 6 +- .../Inputs/MonacoInput/MonacoHeader.scss | 2 +- .../Inputs/MonacoInput/MonacoInputDialog.scss | 2 +- .../Inputs/MultiOneOf/MultiOneOf.scss | 10 +- .../Inputs/MultiSelect/MultiSelect.scss | 4 +- .../NumberWithScale/NumberWithScale.scss | 6 +- .../Inputs/ObjectBase/ObjectBase.scss | 12 +- .../kit/components/Inputs/OneOf/OneOf.scss | 22 +- .../kit/components/Inputs/Select/Select.scss | 4 +- .../TableArrayInput/TableArrayInput.scss | 15 +- .../Inputs/TextContent/TextContent.scss | 4 +- .../AccordeonCard/AccordeonCardForm.scss | 2 +- src/lib/kit/components/Layouts/Row/Row.scss | 26 +- .../components/Layouts/Section/Section.scss | 16 +- .../Layouts/Transparent/Transparent.scss | 10 +- .../SimpleVerticalAccordeon.scss | 21 +- .../components/TogglerCard/TogglerCard.scss | 10 +- .../ViewLayouts/ViewRow/ViewRow.scss | 23 +- .../ViewTableCell/ViewTableCell.scss | 6 +- .../ViewTransparent/ViewTransparent.scss | 4 +- .../Views/ArrayBaseView/ArrayBaseView.scss | 2 +- .../CheckboxGroupView/CheckboxGroupView.scss | 10 +- .../Views/MonacoInputView/MonacoBaseView.scss | 4 +- .../MonacoInputView/MonacoViewDialog.scss | 2 +- .../Views/MultiOneOfView/MultiOneOfView.scss | 10 +- .../MultiSelectView/MultiSelectView.scss | 4 +- .../NumberWithScaleView.scss | 2 +- .../Views/ObjectBaseView/ObjectBaseView.scss | 8 +- .../components/Views/OneOfView/OneOfView.scss | 8 +- .../Views/TableArrayView/TableArrayView.scss | 11 +- .../Views/TextAreaView/TextAreaView.scss | 2 +- src/lib/kit/hooks/useOneOf/useOneOf.scss | 8 +- src/lib/kit/styles/variables.scss | 52 +-- src/stories/DocsStyles.mdx | 327 ++++++++++++++++++ 41 files changed, 549 insertions(+), 170 deletions(-) create mode 100644 src/stories/DocsStyles.mdx diff --git a/.storybook/main.ts b/.storybook/main.ts index f89b655e..ff26ed51 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -3,7 +3,7 @@ import type {StorybookConfig} from '@storybook/react-webpack5'; const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); const config: StorybookConfig = { - stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], + stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], addons: ['@storybook/addon-essentials', '@storybook/preset-scss'], framework: { name: '@storybook/react-webpack5', diff --git a/src/lib/core/components/Form/hooks/useSearch/useSearch.scss b/src/lib/core/components/Form/hooks/useSearch/useSearch.scss index c9296735..1b73d5ac 100644 --- a/src/lib/core/components/Form/hooks/useSearch/useSearch.scss +++ b/src/lib/core/components/Form/hooks/useSearch/useSearch.scss @@ -1,13 +1,13 @@ @import '../../../../../kit/styles/variables.scss'; .#{$ns}use-search { - margin-bottom: 15px; + margin-bottom: $df-offset-15; &_hidden { display: none; } &:last-child { - margin-bottom: 0; + margin-bottom: var(--g-spacing-0); } } diff --git a/src/lib/kit/components/AccordeonCard/AccordeonCard.scss b/src/lib/kit/components/AccordeonCard/AccordeonCard.scss index 3fa2d131..29d7362e 100644 --- a/src/lib/kit/components/AccordeonCard/AccordeonCard.scss +++ b/src/lib/kit/components/AccordeonCard/AccordeonCard.scss @@ -6,7 +6,7 @@ justify-content: space-between; box-sizing: border-box; box-shadow: 0 1px 5px var(--g-color-sfx-shadow); - border-radius: 5px; + border-radius: $df-border-radius-xs; color: var(--g-color-text-primary); background-color: var(--g-color-base-float); .#{$ns}row { @@ -30,7 +30,7 @@ } &:last-child { - margin-bottom: 0; + margin-bottom: var(--g-spacing-0); } &_empty { @@ -49,7 +49,7 @@ position: relative; box-sizing: border-box; width: 100%; - padding: 16px; + padding: var(--g-spacing-4); &:hover { cursor: pointer; @@ -78,7 +78,7 @@ } &-content-description { - margin-top: 12px; + margin-top: var(--g-spacing-3); color: var(--g-color-text-complementary); } @@ -90,7 +90,7 @@ } &__interal-actions { - margin-right: 5px; + margin-right: $df-offset-5; } &__toggle-icon_open { @@ -99,7 +99,7 @@ &__body { display: none; - padding: 16px; + padding: var(--g-spacing-4); &_open { display: block; diff --git a/src/lib/kit/components/Card/Card.scss b/src/lib/kit/components/Card/Card.scss index 1ca8a7aa..7e0f81ec 100644 --- a/src/lib/kit/components/Card/Card.scss +++ b/src/lib/kit/components/Card/Card.scss @@ -1,10 +1,12 @@ @import '../../styles/variables.scss'; .#{$ns}card { - margin-bottom: 20px; + --_--title-max-width: 533px; + + margin-bottom: var(--g-spacing-5); &:last-child { - margin-bottom: 0; + margin-bottom: var(--g-spacing-0); } .#{$ns}row { @@ -41,7 +43,7 @@ display: flex; justify-content: space-between; align-items: center; - padding: 20px; + padding: var(--g-spacing-5); &_interactive { cursor: pointer; @@ -59,12 +61,12 @@ align-items: center; & > * { - margin-left: 10px; + margin-left: $df-offset-10; } } &__title { - max-width: 533px; + max-width: var(--df-card-title-max-width, var(--_--title-max-width)); height: 20px; } @@ -73,7 +75,7 @@ } &__note { - margin-left: 5px; + margin-left: $df-offset-5; .gc-help-popover { display: flex; @@ -92,7 +94,7 @@ &__body { display: none; - padding: 0 20px 20px; + padding: 0 var(--g-spacing-5) var(--g-spacing-5); &_open { display: block; diff --git a/src/lib/kit/components/GroupIndent/GroupIndent.scss b/src/lib/kit/components/GroupIndent/GroupIndent.scss index 7814c5f7..48d6947b 100644 --- a/src/lib/kit/components/GroupIndent/GroupIndent.scss +++ b/src/lib/kit/components/GroupIndent/GroupIndent.scss @@ -1,15 +1,15 @@ @import '../../styles/variables.scss'; .#{$ns}group-indent { - padding-top: 11px; - padding-left: $normalOffset; - margin-top: -11px; - margin-bottom: 20px; - margin-left: 5px; + padding-top: $df-offset-11; + padding-left: var(--g-spacing-5); + margin-top: -$df-offset-11; + margin-bottom: var(--g-spacing-5); + margin-left: $df-offset-5; border-left: 1px solid var(--g-color-line-generic-accent); &:last-child { - margin-bottom: 0; + margin-bottom: var(--g-spacing-0); } &:empty { @@ -17,6 +17,6 @@ } & > .#{$ns}simple-vertical-accordeon_view { - margin-top: -10px; + margin-top: -$df-offset-10; } } diff --git a/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.scss b/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.scss index 58837a6d..8515c494 100644 --- a/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.scss +++ b/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.scss @@ -12,7 +12,7 @@ &__items-wrapper { &_add-button-down { - margin-bottom: 15px; + margin-bottom: $df-offset-15; } &_items-primitive { @@ -25,13 +25,13 @@ } &__item-prefix { - margin-top: -7px; - margin-bottom: 8px; + margin-top: -$df-offset-7; + margin-bottom: var(--g-spacing-2); } &__add-button { &_right { - margin-left: 4px; + margin-left: var(--g-spacing-1); } } } diff --git a/src/lib/kit/components/Inputs/CheckboxGroup/CheckboxGroup.scss b/src/lib/kit/components/Inputs/CheckboxGroup/CheckboxGroup.scss index 33783359..61f98653 100644 --- a/src/lib/kit/components/Inputs/CheckboxGroup/CheckboxGroup.scss +++ b/src/lib/kit/components/Inputs/CheckboxGroup/CheckboxGroup.scss @@ -6,18 +6,18 @@ height: 28px; & > *:not(:last-child) { - margin-right: 6px; + margin-right: $df-offset-6; } &_vertical { flex-direction: column; align-items: flex-start; - margin-top: 8px; + margin-top: var(--g-spacing-2); height: auto; & > *:not(:last-child) { - margin-right: 0px; - margin-bottom: 6px; + margin-right: var(--g-spacing-0); + margin-bottom: $df-offset-6; } } } diff --git a/src/lib/kit/components/Inputs/FileInput/FileInput.scss b/src/lib/kit/components/Inputs/FileInput/FileInput.scss index 0d1a380b..596d658b 100644 --- a/src/lib/kit/components/Inputs/FileInput/FileInput.scss +++ b/src/lib/kit/components/Inputs/FileInput/FileInput.scss @@ -1,6 +1,8 @@ @import '../../../styles/variables.scss'; .#{$ns}file-input { + --_--file-name-max-width: 160px; + display: flex; &__input { @@ -9,7 +11,7 @@ &__file-name { display: block; - margin: auto 10px; - max-width: 160px; + margin: auto $df-offset-10; + max-width: var(--df-file-input-file-name-max-width, var(--_--file-name-max-width)); } } diff --git a/src/lib/kit/components/Inputs/MonacoInput/MonacoHeader.scss b/src/lib/kit/components/Inputs/MonacoInput/MonacoHeader.scss index c59f077d..1b6a6f7c 100644 --- a/src/lib/kit/components/Inputs/MonacoInput/MonacoHeader.scss +++ b/src/lib/kit/components/Inputs/MonacoInput/MonacoHeader.scss @@ -4,7 +4,7 @@ height: 52px; display: flex; justify-content: space-between; - padding: 15px; + padding: $df-offset-3; align-items: center; background-color: var(--g-color-base-float-hover); } diff --git a/src/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.scss b/src/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.scss index b7f173b6..58223baf 100644 --- a/src/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.scss +++ b/src/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.scss @@ -2,7 +2,7 @@ .#{$ns}monaco-input-dialog { .g-dialog-footer { - padding: 10px 32px 32px; + padding: $df-offset-6 var(--g-spacing-8) var(--g-spacing-8); } &__container { diff --git a/src/lib/kit/components/Inputs/MultiOneOf/MultiOneOf.scss b/src/lib/kit/components/Inputs/MultiOneOf/MultiOneOf.scss index 462f5526..1c8bd2cf 100644 --- a/src/lib/kit/components/Inputs/MultiOneOf/MultiOneOf.scss +++ b/src/lib/kit/components/Inputs/MultiOneOf/MultiOneOf.scss @@ -1,19 +1,21 @@ @import '../../../styles/variables'; .#{$ns}multi-oneof { + --_--select-max-width: 305px; + &__select { - max-width: 305px; + max-width: var(--df-multi-oneof-max-width-select, var(--_--select-max-width)); } &__content { &_flat { & > .#{$ns}group-indent { - margin: 0; + margin: var(--g-spacing-0); border-left: none; - padding: 0; + padding: var(--g-spacing-0); & > .#{$ns}use-search { - margin-top: 15px; + margin-top: $df-offset-15; &:empty { display: none; diff --git a/src/lib/kit/components/Inputs/MultiSelect/MultiSelect.scss b/src/lib/kit/components/Inputs/MultiSelect/MultiSelect.scss index 79c93b70..cbf3fc79 100644 --- a/src/lib/kit/components/Inputs/MultiSelect/MultiSelect.scss +++ b/src/lib/kit/components/Inputs/MultiSelect/MultiSelect.scss @@ -1,7 +1,9 @@ @import '../../../styles/variables'; .#{$ns}multi-select { - max-width: 305px; + --_--max-width: 305px; + + max-width: var(--df-multi-select-max-width, var(--_--max-width)); &__meta-text { display: block; diff --git a/src/lib/kit/components/Inputs/NumberWithScale/NumberWithScale.scss b/src/lib/kit/components/Inputs/NumberWithScale/NumberWithScale.scss index 89c45bcf..c354fe94 100644 --- a/src/lib/kit/components/Inputs/NumberWithScale/NumberWithScale.scss +++ b/src/lib/kit/components/Inputs/NumberWithScale/NumberWithScale.scss @@ -1,12 +1,14 @@ @import '../../../styles/variables'; .#{$ns}number-with-scale { + $df-number-with-scale-max-width: 102px; + &__wrapper { display: flex; } &__select { - max-width: 102px; - margin-left: 5px; + max-width: $df-number-with-scale-max-width; + margin-left: $df-offset-5; } } diff --git a/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.scss b/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.scss index 5855a0aa..db904b60 100644 --- a/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.scss +++ b/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.scss @@ -6,12 +6,14 @@ display: flex; & > .#{$ns}use-search { - width: 150px; - margin-bottom: 0; - margin-right: 8px; + --_--inline-width: 150px; + + width: var(--df-object-base-inline-width, var(--_--inline-width)); + margin-bottom: var(--g-spacing-0); + margin-right: var(--g-spacing-2); &:last-child { - margin-right: 0; + margin-right: var(--g-spacing-0); } } } @@ -20,7 +22,7 @@ &__delimiter { height: 28px; display: flex; - margin-right: 8px; + margin-right: var(--g-spacing-2); align-items: center; white-space: nowrap; } diff --git a/src/lib/kit/components/Inputs/OneOf/OneOf.scss b/src/lib/kit/components/Inputs/OneOf/OneOf.scss index 87eb31ba..2d1821b6 100644 --- a/src/lib/kit/components/Inputs/OneOf/OneOf.scss +++ b/src/lib/kit/components/Inputs/OneOf/OneOf.scss @@ -6,7 +6,7 @@ &:last-child { & > .#{$ns}group-indent { - margin-bottom: 0; + margin-bottom: var(--g-spacing-0); } } @@ -15,11 +15,11 @@ all: unset; & > .#{$ns}use-search { - padding-top: 11px; - padding-left: $normalOffset; - margin-top: 4px; - margin-bottom: 20px; - margin-left: 5px; + padding-top: $df-offset-11; + padding-left: var(--g-spacing-5); + margin-top: var(--g-spacing-1); + margin-bottom: var(--g-spacing-5); + margin-left: $df-offset-5; border-left: 1px solid var(--g-color-line-generic-accent); &:empty { @@ -27,11 +27,11 @@ } &:last-child { - margin-bottom: 0; + margin-bottom: var(--g-spacing-0); } & > .#{$ns}simple-vertical-accordeon_view { - margin-top: -10px; + margin-top: -$df-offset-10; } } } @@ -39,12 +39,12 @@ &_flat { & > .#{$ns}group-indent { - margin: 0; + margin: var(--g-spacing-0); border-left: none; - padding: 0; + padding: var(--g-spacing-0); & > .#{$ns}use-search { - margin-top: 15px; + margin-top: $df-offset-15; &:empty { display: none; diff --git a/src/lib/kit/components/Inputs/Select/Select.scss b/src/lib/kit/components/Inputs/Select/Select.scss index d6a6884c..f323007f 100644 --- a/src/lib/kit/components/Inputs/Select/Select.scss +++ b/src/lib/kit/components/Inputs/Select/Select.scss @@ -1,8 +1,10 @@ @import '../../../styles/variables'; .#{$ns}select { + --_--max-width: 305px; + // TODO: Remove this styles - max-width: 305px; + max-width: var(--df-select-max-width, var(--_--max-width)); &__meta-text { display: block; diff --git a/src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.scss b/src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.scss index 55bdba55..c4935aa2 100644 --- a/src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.scss +++ b/src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.scss @@ -1,8 +1,11 @@ @import '../../../styles/variables'; .#{$ns}table-array { + --_--cell-max-width: 150px; + --_--cell-min-width: 150px; + &__table { - margin-bottom: 10px; + margin-bottom: $df-offset-10; .g-table__cell { border-bottom: 0px transparent; @@ -27,13 +30,13 @@ .g-select-control, .yc-select, .g-select { - max-width: 150px; - min-width: 150px; + max-width: var(--df-table-cell-max-width, var(--_--cell-max-width)); + min-width: var(--df-table-cell-min-width, var(--_--cell-min-width)); } &_arr, &_obj { - padding-left: 3px; + padding-left: $df-offset-3; .yc-text-input, .g-text-input, @@ -45,7 +48,7 @@ } & > .simple-vertical-accordeon { - margin-bottom: 0; + margin-bottom: var(--g-spacing-0); } } @@ -56,6 +59,6 @@ } &__idx { - padding-top: 6px; + padding-top: $df-offset-6; } } diff --git a/src/lib/kit/components/Inputs/TextContent/TextContent.scss b/src/lib/kit/components/Inputs/TextContent/TextContent.scss index 7453eff3..d0ae91af 100644 --- a/src/lib/kit/components/Inputs/TextContent/TextContent.scss +++ b/src/lib/kit/components/Inputs/TextContent/TextContent.scss @@ -14,7 +14,7 @@ &__icon { display: flex; align-items: center; - margin-right: 4px; + margin-right: var(--g-spacing-1); } &__wrapper { @@ -22,6 +22,6 @@ } &__separator { - margin: 0 4px; + margin: var(--g-spacing-0) var(--g-spacing-1); } } diff --git a/src/lib/kit/components/Layouts/AccordeonCard/AccordeonCardForm.scss b/src/lib/kit/components/Layouts/AccordeonCard/AccordeonCardForm.scss index 4979f768..0cb7620a 100644 --- a/src/lib/kit/components/Layouts/AccordeonCard/AccordeonCardForm.scss +++ b/src/lib/kit/components/Layouts/AccordeonCard/AccordeonCardForm.scss @@ -2,6 +2,6 @@ .#{$ns}accordeon-card-form { &__accordeon-card-body { - padding-right: 32px; + padding-right: var(--g-spacing-8); } } diff --git a/src/lib/kit/components/Layouts/Row/Row.scss b/src/lib/kit/components/Layouts/Row/Row.scss index fd20b220..a7a189de 100644 --- a/src/lib/kit/components/Layouts/Row/Row.scss +++ b/src/lib/kit/components/Layouts/Row/Row.scss @@ -1,17 +1,21 @@ @import '../../../styles/variables.scss'; .#{$ns}row { + --_--width: 500px; + --_--max-width: 500px; + --_--left-width: 180px; + display: flex; - width: 500px; - max-width: 500px; - margin-bottom: 15px; + width: var(--df-row-width, var(--_--width)); + max-width: var(--df-row-max-width, var(--_--max-width)); + margin-bottom: $df-offset-15; &:last-child { - margin-bottom: 0; + margin-bottom: var(--g-spacing-0); } &__left { - width: 180px; + width: var(--df-row-left-width, var(--_--left-width)); min-height: 28px; display: flex; margin-bottom: auto; @@ -33,7 +37,7 @@ &__title { word-break: break-word; - margin-right: 3px; + margin-right: $df-offset-3; &_required { &::after { @@ -44,12 +48,12 @@ } &__note { - padding-right: 16px; + padding-right: var(--g-spacing-4); position: relative; &-inner { position: absolute; - margin-top: 1px; + margin-top: $df-offset-1; .g-help-popover { display: flex; @@ -65,7 +69,7 @@ display: flex; flex-direction: column; flex-grow: 1; - margin-left: 15px; + margin-left: $df-offset-15; &-inner { display: flex; @@ -74,13 +78,13 @@ } &__description { - margin-top: 10px; + margin-top: $df-offset-10; color: var(--g-color-text-secondary); word-break: break-word; } &__remove-button { - margin-left: 5px; + margin-left: $df-offset-5; } &__required-mark { diff --git a/src/lib/kit/components/Layouts/Section/Section.scss b/src/lib/kit/components/Layouts/Section/Section.scss index c9d23d6f..252351a0 100644 --- a/src/lib/kit/components/Layouts/Section/Section.scss +++ b/src/lib/kit/components/Layouts/Section/Section.scss @@ -3,18 +3,20 @@ $block: '.#{$ns}section'; #{$block} { - margin-bottom: $normalOffset; + --_--title-max-width: 533px; + + margin-bottom: var(--g-spacing-5); $block: &; &:last-child { - margin-bottom: 0; + margin-bottom: var(--g-spacing-0); } &__header { display: flex; align-items: center; - margin-bottom: $normalOffset; + margin-bottom: var(--g-spacing-5); &_size_s { height: 18px; @@ -26,7 +28,7 @@ $block: '.#{$ns}section'; } &__title { - max-width: 533px; + max-width: var(--df-section-title-max-width, var(--_--title-max-width)); } &__title-popover { @@ -39,7 +41,7 @@ $block: '.#{$ns}section'; } &__note { - margin-left: 5px; + margin-left: $df-offset-5; .g-help-popover { display: flex; @@ -51,10 +53,10 @@ $block: '.#{$ns}section'; } &__description { - margin-top: 4px; + margin-top: var(--g-spacing-1); } &__remove-button { - margin-left: 5px; + margin-left: $df-offset-5; } } diff --git a/src/lib/kit/components/Layouts/Transparent/Transparent.scss b/src/lib/kit/components/Layouts/Transparent/Transparent.scss index c38f4a6d..15684c1b 100644 --- a/src/lib/kit/components/Layouts/Transparent/Transparent.scss +++ b/src/lib/kit/components/Layouts/Transparent/Transparent.scss @@ -1,15 +1,17 @@ @import '../../../styles/variables.scss'; .#{$ns}transparent { + --_--array-item-max-width: 338px; + display: flex; - margin-bottom: 15px; + margin-bottom: $df-offset-15; &:last-child { - margin-bottom: 0; + margin-bottom: var(--g-spacing-0); } &_array-item { - max-width: 338px; + max-width: var(--df-transparent-array-item-max-width, var(--_--array-item-max-width)); } &_without-max-width { @@ -21,6 +23,6 @@ } &__remove-button { - margin-left: 5px; + margin-left: $df-offset-5; } } diff --git a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss index 0716c131..635a6158 100644 --- a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss +++ b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss @@ -3,15 +3,17 @@ $animationDuration: 0.3s; .#{$ns}simple-vertical-accordeon { - margin-bottom: $normalOffset; + --_--inner-max-width: 533px; + + margin-bottom: var(--g-spacing-5); &:last-child { margin-bottom: 0; } &_branch &__body { - padding-left: $normalOffset; - margin-left: 5px; + padding-left: var(--g-spacing-5); + margin-left: $df-offset-5; border-left: 1px solid var(--g-color-line-generic-accent); } @@ -20,8 +22,11 @@ $animationDuration: 0.3s; align-items: center; &-inner { - margin-left: -13px; - max-width: 533px; + margin-left: -$df-offset-13; + max-width: var( + --df-simple-vertical-accordeon-header-inner-max-width, + var(--_--inner-max-width) + ); } .g-popover__handler { @@ -30,7 +35,7 @@ $animationDuration: 0.3s; } &__tooltip { - margin: 0px 5px; + margin: var(--g-spacing-0) $df-offset-5; } &__chevron { @@ -42,8 +47,8 @@ $animationDuration: 0.3s; } &__body { - margin-top: 4px; - padding-top: $smallOffset - 4px; + margin-top: var(--g-spacing-1); + padding-top: $df-offset-6; &_hidden { display: none; diff --git a/src/lib/kit/components/TogglerCard/TogglerCard.scss b/src/lib/kit/components/TogglerCard/TogglerCard.scss index cc760ca6..cc70090e 100644 --- a/src/lib/kit/components/TogglerCard/TogglerCard.scss +++ b/src/lib/kit/components/TogglerCard/TogglerCard.scss @@ -1,8 +1,10 @@ @import '../../styles/variables.scss'; .#{$ns}toggler-card { - width: 254px; - padding: 10px; + --_--width: 254px; + + width: var(--df-toggler-card-width, var(--_--width)); + padding: $df-offset-6; height: 88px; &__header { @@ -12,9 +14,9 @@ } &__text { - margin-top: 12px; + margin-top: var(--g-spacing-3); display: block; - margin-right: 15px; + margin-right: $df-offset-15; height: 36px; overflow: hidden; text-overflow: ellipsis; diff --git a/src/lib/kit/components/ViewLayouts/ViewRow/ViewRow.scss b/src/lib/kit/components/ViewLayouts/ViewRow/ViewRow.scss index 5a00f7bb..26eeaf2d 100644 --- a/src/lib/kit/components/ViewLayouts/ViewRow/ViewRow.scss +++ b/src/lib/kit/components/ViewLayouts/ViewRow/ViewRow.scss @@ -2,18 +2,23 @@ @import '../../../styles/mixins.scss'; .#{$ns}view-row { + --_--left-width: 300px; + --_--left-max-width: 300px; + --_--left-min-width: 300px; + --_--right-width: 480px; + width: 100%; display: flex; - margin-bottom: 20px; + margin-bottom: var(--g-spacing-5); &:last-child { - margin-bottom: 0; + margin-bottom: var(--g-spacing-0); } &__left { - width: 300px; - max-width: 300px; - min-width: 300px; + width: var(--df-view-row-left-width, var(--_--left-width)); + max-width: var(--df-view-row-left-max-width, var(--_--left-max-width)); + min-width: var(--df-view-row-left-min-width, var(--_--left-min-width)); display: flex; align-items: baseline; overflow: hidden; @@ -26,21 +31,21 @@ &__dots { min-width: 40px; flex-grow: 1; - margin: 0 2px; + margin: var(--g-spacing-0) var(--g-spacing-half); border-bottom: 1px dotted var(--g-color-text-secondary); } &__right { - max-width: 480px; + max-width: var(--df-view-row-right-width, var(--_--right-width)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; & > .#{$ns}view-transparent { - margin-bottom: 6px; + margin-bottom: $df-offset-6; &:last-child { - margin-bottom: 0; + margin-bottom: var(--g-spacing-0); } } } diff --git a/src/lib/kit/components/ViewLayouts/ViewTableCell/ViewTableCell.scss b/src/lib/kit/components/ViewLayouts/ViewTableCell/ViewTableCell.scss index e3c89176..02773bc4 100644 --- a/src/lib/kit/components/ViewLayouts/ViewTableCell/ViewTableCell.scss +++ b/src/lib/kit/components/ViewLayouts/ViewTableCell/ViewTableCell.scss @@ -11,14 +11,14 @@ justify-content: center; & > .#{$ns}view-row:last-child { - margin-bottom: 0; + margin-bottom: var(--g-spacing-0); } & > .#{$ns}view-transparent { - margin-bottom: 6px; + margin-bottom: $df-offset-6; &:last-child { - margin-bottom: 0; + margin-bottom: var(--g-spacing-0); } } } diff --git a/src/lib/kit/components/ViewLayouts/ViewTransparent/ViewTransparent.scss b/src/lib/kit/components/ViewLayouts/ViewTransparent/ViewTransparent.scss index 1d933074..f47ae6c1 100644 --- a/src/lib/kit/components/ViewLayouts/ViewTransparent/ViewTransparent.scss +++ b/src/lib/kit/components/ViewLayouts/ViewTransparent/ViewTransparent.scss @@ -3,10 +3,10 @@ .#{$ns}view-transparent { display: flex; - margin-bottom: 20px; + margin-bottom: var(--g-spacing-5); &:last-child { - margin-bottom: 0; + margin-bottom: var(--g-spacing-0); } @include with-copy-button(); diff --git a/src/lib/kit/components/Views/ArrayBaseView/ArrayBaseView.scss b/src/lib/kit/components/Views/ArrayBaseView/ArrayBaseView.scss index ce456227..b935fed6 100644 --- a/src/lib/kit/components/Views/ArrayBaseView/ArrayBaseView.scss +++ b/src/lib/kit/components/Views/ArrayBaseView/ArrayBaseView.scss @@ -2,6 +2,6 @@ .#{$ns}array-base-view { &__item-prefix { - margin-bottom: 6px; + margin-bottom: $df-offset-6; } } diff --git a/src/lib/kit/components/Views/CheckboxGroupView/CheckboxGroupView.scss b/src/lib/kit/components/Views/CheckboxGroupView/CheckboxGroupView.scss index be579464..9baf0b9a 100644 --- a/src/lib/kit/components/Views/CheckboxGroupView/CheckboxGroupView.scss +++ b/src/lib/kit/components/Views/CheckboxGroupView/CheckboxGroupView.scss @@ -4,7 +4,7 @@ display: flex; & > *:not(:last-child) { - margin-right: 6px; + margin-right: $df-offset-6; } &_vertical { @@ -12,8 +12,8 @@ align-items: flex-start; & > *:not(:last-child) { - margin-right: 0px; - margin-bottom: 6px; + margin-right: var(--g-spacing-0); + margin-bottom: $df-offset-6; } } @@ -26,10 +26,10 @@ overflow: hidden; text-overflow: ellipsis; display: block; - margin-bottom: 6px; + margin-bottom: $df-offset-6; &:last-child { - margin-bottom: 0; + margin-bottom: var(--g-spacing-0); } } } diff --git a/src/lib/kit/components/Views/MonacoInputView/MonacoBaseView.scss b/src/lib/kit/components/Views/MonacoInputView/MonacoBaseView.scss index 71a1e1a1..41aa3279 100644 --- a/src/lib/kit/components/Views/MonacoInputView/MonacoBaseView.scss +++ b/src/lib/kit/components/Views/MonacoInputView/MonacoBaseView.scss @@ -1,6 +1,8 @@ @import '../../../styles/variables.scss'; .#{$ns}monaco-base-view { + --_--width: 550px; + border: 1px solid var(--g-color-line-generic); - width: 550px; + width: var(--df-monaco-base-view-width, var(--_--width)); } diff --git a/src/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.scss b/src/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.scss index d4ec447c..f226d24c 100644 --- a/src/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.scss +++ b/src/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.scss @@ -2,7 +2,7 @@ .#{$ns}monaco-view-dialog { .g-dialog-footer { - padding: 10px 32px 32px; + padding: $df-offset-10 var(--g-spacing-8) var(--g-spacing-8); } &__container { diff --git a/src/lib/kit/components/Views/MultiOneOfView/MultiOneOfView.scss b/src/lib/kit/components/Views/MultiOneOfView/MultiOneOfView.scss index 01432861..f135abe5 100644 --- a/src/lib/kit/components/Views/MultiOneOfView/MultiOneOfView.scss +++ b/src/lib/kit/components/Views/MultiOneOfView/MultiOneOfView.scss @@ -10,25 +10,25 @@ overflow: hidden; text-overflow: ellipsis; display: block; - margin-bottom: 6px; + margin-bottom: $df-offset-6; &:last-child { - margin-bottom: 0; + margin-bottom: var(--g-spacing-0); } } &__content { &_multiple-values { & > .#{$ns}group-indent { - padding-top: 0px; + padding-top: var(--g-spacing-0); } } &_flat { & > .#{$ns}group-indent { - margin: 0 0 20px; + margin: var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-5); border-left: none; - padding: 0; + padding: var(--g-spacing-0); } } } diff --git a/src/lib/kit/components/Views/MultiSelectView/MultiSelectView.scss b/src/lib/kit/components/Views/MultiSelectView/MultiSelectView.scss index 44acf312..39397d2f 100644 --- a/src/lib/kit/components/Views/MultiSelectView/MultiSelectView.scss +++ b/src/lib/kit/components/Views/MultiSelectView/MultiSelectView.scss @@ -10,10 +10,10 @@ overflow: hidden; text-overflow: ellipsis; display: block; - margin-bottom: 6px; + margin-bottom: $df-offset-6; &:last-child { - margin-bottom: 0; + margin-bottom: var(--g-spacing-0); } } } diff --git a/src/lib/kit/components/Views/NumberWithScaleView/NumberWithScaleView.scss b/src/lib/kit/components/Views/NumberWithScaleView/NumberWithScaleView.scss index f1341241..4022d50d 100644 --- a/src/lib/kit/components/Views/NumberWithScaleView/NumberWithScaleView.scss +++ b/src/lib/kit/components/Views/NumberWithScaleView/NumberWithScaleView.scss @@ -15,6 +15,6 @@ } &__size { - margin-left: 2px; + margin-left: var(--g-spacing-half); } } diff --git a/src/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.scss b/src/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.scss index cd55ee8b..15e620bb 100644 --- a/src/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.scss +++ b/src/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.scss @@ -7,11 +7,11 @@ & > div { flex: auto; - margin-right: 8px; - margin-bottom: 0; + margin-right: var(--g-spacing-2); + margin-bottom: var(--g-spacing-0); &:last-child { - margin-right: 0; + margin-right: var(--g-spacing-0); } } } @@ -19,7 +19,7 @@ &__delimiter { display: flex; - margin-right: 8px; + margin-right: var(--g-spacing-2); align-items: center; white-space: nowrap; } diff --git a/src/lib/kit/components/Views/OneOfView/OneOfView.scss b/src/lib/kit/components/Views/OneOfView/OneOfView.scss index 3bd813ac..0ed7582e 100644 --- a/src/lib/kit/components/Views/OneOfView/OneOfView.scss +++ b/src/lib/kit/components/Views/OneOfView/OneOfView.scss @@ -2,18 +2,18 @@ .#{$ns}oneof-view { & > .#{$ns}group-indent { - margin-bottom: 20px; + margin-bottom: var(--g-spacing-5); } &:last-child > .#{$ns}group-indent { - margin-bottom: 0; + margin-bottom: var(--g-spacing-0); } &_flat { & > .#{$ns}group-indent { - margin: 0 0 20px; + margin: var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-5); border-left: none; - padding: 0; + padding: var(--g-spacing-0); } } } diff --git a/src/lib/kit/components/Views/TableArrayView/TableArrayView.scss b/src/lib/kit/components/Views/TableArrayView/TableArrayView.scss index 01ef24ee..a6740883 100644 --- a/src/lib/kit/components/Views/TableArrayView/TableArrayView.scss +++ b/src/lib/kit/components/Views/TableArrayView/TableArrayView.scss @@ -1,20 +1,23 @@ @import '../../../styles/variables'; .#{$ns}table-array-view { + --_--cell-min-width: 150px; + --_--cell-max-width: 150px; + &__table { - margin-bottom: 10px; + margin-bottom: $df-offset-10; } &__cell { - max-width: 150px; - min-width: 150px; + max-width: var(--df-table-array-view-cell-min-width, var(--_--cell-min-width)); + min-width: var(--df-table-array-view-cell-max-width, var(--_--cell-max-width)); &_arr, &_obj { max-width: unset; & > .simple-vertical-accordeon { - margin-bottom: 0; + margin-bottom: var(--g-spacing-0); } } diff --git a/src/lib/kit/components/Views/TextAreaView/TextAreaView.scss b/src/lib/kit/components/Views/TextAreaView/TextAreaView.scss index f18e7019..b8749704 100644 --- a/src/lib/kit/components/Views/TextAreaView/TextAreaView.scss +++ b/src/lib/kit/components/Views/TextAreaView/TextAreaView.scss @@ -8,7 +8,7 @@ } &__chevron { - margin: 3px; + margin: $df-offset-3; &_open { transform: rotate(180deg); diff --git a/src/lib/kit/hooks/useOneOf/useOneOf.scss b/src/lib/kit/hooks/useOneOf/useOneOf.scss index c0f4e9eb..908edd73 100644 --- a/src/lib/kit/hooks/useOneOf/useOneOf.scss +++ b/src/lib/kit/hooks/useOneOf/useOneOf.scss @@ -12,8 +12,8 @@ &_card { & + .#{$ns}group-indent { & > .#{$ns}use-search:not(.#{$ns}group-indent) { - padding-top: 0px; - margin-top: 15px; + padding-top: var(--g-spacing-0); + margin-top: $df-offset-15; } } } @@ -23,11 +23,11 @@ display: flex; & > * { - margin-right: 8px; + margin-right: var(--g-spacing-2); } & > :last-child { - margin-right: 0; + margin-right: var(--g-spacing-0); } } diff --git a/src/lib/kit/styles/variables.scss b/src/lib/kit/styles/variables.scss index f9264ec1..d8386845 100644 --- a/src/lib/kit/styles/variables.scss +++ b/src/lib/kit/styles/variables.scss @@ -1,27 +1,37 @@ $ns: 'df-'; -// Sizes -$groupActionsHeight: 56px; -$pageHeaderHeight: 64px; -$pageBottomPadding: 40px; -$ycMenuWidth: 295px; -$sideMenuWidth: 256px; -$scrollWidth: 20px; -$bigOffset: 40px; -$normalOffset: 20px; -$smallOffset: $normalOffset * 0.5; -$tinyOffset: 5px; -$inlineOffset: 12px; -$userSize: 42px; -$userSizeSmall: 28px; -$mainRightWidth: 295px; -$priceBlockWidth: 224px; -$tabsContentMarginTop: 15px; +//Spasing use from @gravity-uikit +/* +@mixin variables { + --g-spacing-base: 4px; -// Layers -$primaryLayoutLayer: 100; -$secondaryLayoutLayer: 50; -$notificationLayer: 30000; // to be higher than modal overlay + --g-spacing-0: calc(var(--g-spacing-base) * 0); //0px + --g-spacing-half: calc(var(--g-spacing-base) * 0.5); //2px + --g-spacing-1: var(--g-spacing-base); // 4px + --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px + --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px + --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px + --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px + --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px + --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px + --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px + --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px + --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px +} +*/ +//DOUNT use TODO replace with spacing from gravity +$df-offset-1: 1px; +$df-offset-3: 3px; +$df-offset-5: 5px; +$df-offset-6: 6px; +$df-offset-7: 7px; +$df-offset-10: 10px; +$df-offset-11: 11px; +$df-offset-13: 13px; +$df-offset-15: 15px; + +/* Border-radius */ +$df-border-radius-xs: 5px; // Fonts $defaultFontFamily: var(--g-text-body-font-family); diff --git a/src/stories/DocsStyles.mdx b/src/stories/DocsStyles.mdx new file mode 100644 index 00000000..7a2e2d1c --- /dev/null +++ b/src/stories/DocsStyles.mdx @@ -0,0 +1,327 @@ +import {Meta} from '@storybook/addon-docs'; + + + +# Styles + +This section of the documentation lists SCSS variables for customizing component styles. + +## Layouts + +### Row, RowVerbose + + + + + + + + + + + + + + + + + + + + + + +
VariableDefault ValueDescription
`--df-row-width``500px`Width of the row
`--df-row-max-width``500px`Maximum width of the row
`--df-row-left-width``180px`Width of the left part (field name and description)
+ +### Section, Section2, SectionWithSubtitle, SectionWithSubtitle2, Group, Group2 + + + + + + + + + + + + +
VariableDefault ValueDescription
`--df-section-title-max-width``533px`Maximum width of the title
+ +### Transparent + + + + + + + + + + + + +
VariableDefault ValueDescription
`--df-transparent-array-item-max-width``338px`Length for an array item
+ +## ViewLayouts + +### ViewRow + + + + + + + + + + + + + + + + + + + + + + + + + + + +
VariableDefault ValueDescription
`--df-view-row-left-width``300px`Width of the left part (title and description)
`--df-view-row-left-max-width``300px `Maximum width of the left part (title and description)
`--df-view-row-left-min-width``300px`Minimum width of the left part (title and description)
`--df-view-row-right-width``480px`Width of the value display
+ +## Inputs + +### FileInput + + + + + + + + + + + + +
VariableDefault ValueDescription
`--df-file-input-file-name-max-width``160px`Width of the file name
+ +### MultiOneof, MultiOneofFlat + + + + + + + + + + + + +
VariableDefault ValueDescription
`--df-multi-oneof-max-width-select``305px`Width of the selector
+ +### MultiSelect + + + + + + + + + + + + +
VariableDefault ValueDescription
`--df-multi-select-max-width``305px `Width of the selector
+ +### Select + + + + + + + + + + + + +
VariableDefault ValueDescription
`--df-select-max-width``305px`Width of the selector
+ +### TableArray + + + + + + + + + + + + + + + + + +
VariableDefault ValueDescription
`--df-table-cell-max-width``150px`Maximum width of the input in the row
`--df-table-cell-min-width``150px`Minimum width of the input in the row
+ +### Object-inline + + + + + + + + + + + + +
VariableDefault ValueDescription
`--df-object-base-inline-width``150px`Width of the child input
+ +## Views + +### MonacoView + + + + + + + + + + + + +
VariableDefault ValueDescription
`--df-monaco-base-view-width``550px`Width of Monaco editor
+ +### TableArrayView + + + + + + + + + + + + + + + + + +
VariableDefault ValueDescription
`--df-table-array-view-cell-min-width``150px`Minimum width of the input in the row
`--df-table-array-view-cell-max-width``150px`Maximum width of the input in the row
+ +## Components + +### Card + + + + + + + + + + + + +
VariableDefault ValueDescription
`--df-card-title-max-width``533px`Maximum width of the title
+ +### SimpleVerticalAccordeon + + + + + + + + + + + + +
VariableDefault ValueDescription
`--df-simple-vertical-accordion-header-inner-max-width``533px`Maximum length of the header
+ +### TogglerCard + + + + + + + + + + + + +
VariableDefault ValueDescription
`--df-toggler-card-width``254px`Width of the card
+ +## How to Use the CSS API + +### How to Adjust Spacing + +Spacing adjustments are based on the `--g-spacing` variables from `@gravity-ui/uikit`. + +Here is an example of SCSS variables: + +```scss +@mixin variables { + --g-spacing-base: 4px; + + --g-spacing-0: calc(var(--g-spacing-base) * 0); // 0px + --g-spacing-half: calc(var(--g-spacing-base) * 0.5); // 2px + --g-spacing-1: var(--g-spacing-base); // 4px + --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px + --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px + --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px + --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px + --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px + --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px + --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px + --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px + --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px +} +``` + +### Examples of Overriding SCSS Variables + +#### 1. Including DynamicField or DynamicView + +In your component file: + +```tsx +
+ +
+``` + +#### 2. In a Nearby SCSS File or a Global Stylesheet + +```scss +.my-component { + --df-row-width: 800px; + --df-row-max-width: 800px; +} +``` + +This will adjust the `--df-row-width` and `--df-row-max-width` variables for the `DynamicField` component within MyComponent, changing the width to `800px`. From 7b480387672b341be80a4004dee1765e96a22db1 Mon Sep 17 00:00:00 2001 From: NasgulNexus Date: Wed, 18 Dec 2024 09:19:19 +0100 Subject: [PATCH 2/3] feat: add css variables --- docs/styles.md | 580 ++++++++++++++++++ .../Form/hooks/useSearch/useSearch.scss | 4 +- .../AccordeonCard/AccordeonCard.scss | 19 +- src/lib/kit/components/Card/Card.scss | 27 +- .../components/ErrorWrapper/ErrorWrapper.scss | 4 +- .../GenerateRandomValueButton.scss | 2 +- .../components/GroupIndent/GroupIndent.scss | 20 +- .../Inputs/ArrayBase/ArrayBase.scss | 12 +- .../components/Inputs/Checkbox/Checkbox.scss | 2 +- .../Inputs/CheckboxGroup/CheckboxGroup.scss | 12 +- .../Inputs/DateInput/DateInput.scss | 2 +- .../Inputs/FileInput/FileInput.scss | 6 +- .../Inputs/MonacoInput/MonacoHeader.scss | 4 +- .../Inputs/MonacoInput/MonacoInputBase.scss | 2 +- .../Inputs/MonacoInput/MonacoInputDialog.scss | 7 +- .../Inputs/MultiOneOf/MultiOneOf.scss | 10 +- .../Inputs/MultiSelect/MultiSelect.scss | 4 +- .../NumberWithScale/NumberWithScale.scss | 6 +- .../Inputs/ObjectBase/ObjectBase.scss | 16 +- .../kit/components/Inputs/OneOf/OneOf.scss | 28 +- .../kit/components/Inputs/Select/Select.scss | 4 +- .../kit/components/Inputs/Switch/Switch.scss | 2 +- .../TableArrayInput/TableArrayInput.scss | 18 +- .../Inputs/TextContent/TextContent.scss | 4 +- .../AccordeonCard/AccordeonCardForm.scss | 2 +- .../kit/components/Layouts/Column/Column.scss | 12 +- src/lib/kit/components/Layouts/Row/Row.scss | 28 +- .../components/Layouts/Section/Section.scss | 20 +- .../Layouts/Transparent/Transparent.scss | 10 +- .../kit/components/LongValue/LongValue.scss | 2 +- .../SimpleVerticalAccordeon.scss | 24 +- .../components/TogglerCard/TogglerCard.scss | 16 +- .../ViewLayouts/ViewColumn/ViewColumn.scss | 13 +- .../ViewLayouts/ViewRow/ViewRow.scss | 32 +- .../ViewTableCell/ViewTableCell.scss | 11 +- .../ViewTransparent/ViewTransparent.scss | 8 +- .../Views/ArrayBaseView/ArrayBaseView.scss | 2 +- .../CheckboxGroupView/CheckboxGroupView.scss | 17 +- .../Views/MonacoInputView/MonacoBaseView.scss | 4 +- .../MonacoInputView/MonacoViewDialog.scss | 7 +- .../Views/MultiOneOfView/MultiOneOfView.scss | 21 +- .../MultiSelectView/MultiSelectView.scss | 9 +- .../NumberWithScaleView.scss | 4 +- .../Views/ObjectBaseView/ObjectBaseView.scss | 10 +- .../components/Views/OneOfView/OneOfView.scss | 11 +- .../Views/TableArrayView/TableArrayView.scss | 11 +- .../Views/TextAreaView/TextAreaView.scss | 2 +- src/lib/kit/hooks/useOneOf/useOneOf.scss | 10 +- src/lib/kit/styles/variables.scss | 19 +- src/stories/DocsStyles.mdx | 328 +--------- 50 files changed, 865 insertions(+), 563 deletions(-) create mode 100644 docs/styles.md diff --git a/docs/styles.md b/docs/styles.md new file mode 100644 index 00000000..cfba2921 --- /dev/null +++ b/docs/styles.md @@ -0,0 +1,580 @@ +# How to Use the CSS API + +## How to Adjust Spacing + +We base our spacing on the [modular grid system](https://gravity-ui.com/design/branding/module) with a base unit of `4px`. + +We take the `--g-spacing` variables from the `@gravity-ui/uikit` package as our foundation. + +Here is an example of SCSS variables: + +```scss +@mixin variables { + --g-spacing-base: 4px; + + --g-spacing-0: calc(var(--g-spacing-base) * 0); // 0px + --g-spacing-half: calc(var(--g-spacing-base) * 0.5); // 2px + --g-spacing-1: var(--g-spacing-base); // 4px + --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px + --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px + --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px + --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px + --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px + --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px + --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px + --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px + --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px +} +``` + +## Examples of Overriding SCSS Variables + +The CSS API is convenient for fine-tuning styles in components that use `DynamicField` or `DynamicView`. + +### 1. Using DynamicField or DynamicView + +In your component file: + +```tsx +
+ +
+``` + +### 2. In a Related SCSS File or Global Stylesheet + +```scss +.my-component { + --df-row-width: 800px; + --df-row-max-width: 800px; +} +``` + +This will adjust the `--df-row-width` and `--df-row-max-width` variables for the `DynamicField` component within MyComponent, changing the width to `800px`. + +--- + +## Common variables + +Below is a list of common CSS variables that you can use to adjust various aspects of the components: + +| Variable | Default Value | Description | +| :------------------------------------- | :------------ | :--------------------------------------------------------------------- | +| `--df-spacing-inputs` | `15px` | Spacing between inputs (TODO: consider using `--g-spacing`) | +| `--df-spacing-last-child` | `0px` | Spacing for the last values in inputs | +| `--df-spacing-inputs-section` | `20px` | Spacing between sections and inputs | +| `--df-tooltip-container-max-width` | `100%` | Maximum width of the tooltip container | +| `--df-tooltip-container-margin-bottom` | `6px` | Bottom margin of the tooltip container | +| `--df-remove-button-margin-left` | `5px` | Left margin for the remove button (TODO: consider using `--g-spacing`) | +| `--df-spacing-view` | `20px` | Spacing in the view component | +| `--df-checkbox-height` | `28px` | Height of the checkbox | + +--- + +## Components + +### Accordeon card + +The following CSS variables are specific to the Accordion Card component: + +| Variable | Default Value | Description | +| :--------------------------------------------------- | :-----------: | :-------------------------------------------------- | +| `--df-accordeon-card-row-width` | `100%` | Width of the accordion card row | +| `--df-accordeon-card-monaco-input-width` | `100%` | Width of the Monaco input within the accordion card | +| `--df-accordeon-card-header-width` | `100%` | Width of the accordion card header | +| `--df-accordeon-card-header-padding` | `16px` | Padding of the accordion card header | +| `--df-accordeon-card-content-description-margin-top` | `12px` | Top margin of the content description | +| `--df-accordeon-card-interal-actions-margin-right` | `20px` | Right margin for internal actions | +| `--df-accordeon-card-body-padding` | `20px` | Padding of the accordion card body | + +--- + +### Card + +The following CSS variables are specific to the Card component: + +| Variable | Default Value | Description | +| :----------------------------------------- | :-------------: | :--------------------------------------------------- | +| `--df-card-row-width` | `100%` | Width of the card row | +| `--df-card-monaco-input-width` | `100%` | Width of the Monaco input within the card | +| `--df-card-header-padding` | `20px` | Padding of the card header | +| `--df-card-title-max-width` | `533px` | Maximum width of the card title | +| `--df-card-header-right-child-margin-left` | `10px` | Left margin of the header's right child | +| `--df-card-title-height` | `20px` | Height of the card title | +| `--df-card-title-popover-height` | `20px` | Height of the card title popover | +| `--df-card-note-margin-left` | `5px` | Left margin of the card note | +| `--df-card-body-padding` | `0px 20px 20px` | Padding of the card body (top, right & left, bottom) | + +--- + +### Group indent + +The Group Indent variables adjust the indentation and spacing of grouped elements: + +| Variable | Default Value | Description | +| :------------------------------------------------------------ | :------------------: | :-------------------------------------------------------------------- | +| `--df-group-indent-padding` | `-11px 0px 0px 20px` | Padding for the group indent (top, right, bottom, left) | +| `--df-group-indent-margin` | `-11px 0px 0px 5px` | Margin for the group indent (top, right, bottom, left) | +| `--df-group-indent-simple-vertical-accordeon-view-margin-top` | `-10px` | Top margin for the simple vertical accordion view within group indent | + +--- + +### Error wrapper + +Variables for customizing the Error Wrapper component: + +| Variable | Default Value | Description | +| :----------------------------------------- | :-----------: | :---------------------------------------------- | +| `--df-error-wrapper-width` | `100%` | Width of the error wrapper | +| `--df-error-wrapper-error-text-margin-top` | `2px` | Top margin of the error text within the wrapper | + +--- + +### Generate random value button + +Variable for the Generate Random Value button: + +| Variable | Default Value | Description | +| :---------------------------------------------- | :-----------: | :---------------------------------- | +| `--df-generate-random-value-button-margin-left` | `8px` | Left margin for the generate button | + +--- + +### Long value + +Variable for the Long Value component: + +| Variable | Default Value | Description | +| :-------------------------- | :-----------: | :------------------------- | +| `--df-long-value-max-width` | `100%` | Maximum width of the value | + +--- + +### Simple vertical accordeon + +Variables for customizing the Simple Vertical Accordion component: + +| Variable | Default Value | Description | +| :-------------------------------------------------------- | :-----------: | :------------------------------------------ | +| `--df-simple-vertical-accordeon-body-padding-left` | `20px` | Left padding of the accordion body | +| `--df-simple-vertical-accordeon-body-margin-left` | `5px` | Left margin of the accordion body | +| `--df-simple-vertical-accordeon-header-inner-margin-left` | `-13px` | Left margin of the header inner element | +| `--df-simple-vertical-accordeon-header-inner-max-width` | `533px` | Maximum width of the header inner element | +| `--df-simple-vertical-accordeon-tooltip-margin` | `0px 5px` | Margin for the tooltip within the accordion | +| `--df-simple-vertical-accordeon-body-margin-top` | `4px` | Top margin of the accordion body | +| `--df-simple-vertical-accordeon-body-padding-top` | `6px` | Top padding of the accordion body | + +--- + +### Toggler card + +Variables for customizing the Toggler Card component: + +| Variable | Default Value | Description | +| :------------------------------ | :-----------------: | :----------------------------------------------------------------- | +| `--df-toggler-card-width` | `254px` | Width of the toggler card | +| `--df-toggler-card-padding` | `6px` | Padding inside the toggler card | +| `--df-toggler-card-height` | `88px` | Height of the toggler card | +| `--df-toggler-card-text-margin` | `12px 15px 0px 0px` | Margin for the text in the toggler card (top, right, bottom, left) | +| `--df-toggler-card-text-height` | `36px` | Height of the text field within the toggler card | + +--- + +## Inputs + +### Array base + +Variables for the Array Base input component: + +| Variable | Default Value | Description | +| :--------------------------------------------- | :------------: | :---------------------------------------------- | +| `--df-array-base-items-primitive-min-width` | `100%` | Minimum width for primitive array items | +| `--df-array-base-item-prefix-margin` | `-7px 0px 8px` | Margin for the item prefix (top, right, bottom) | +| `--df-array-base-add-button-right-margin-left` | `4px` | Left margin for the "Add" button on the right | + +--- + +### Checkbox group + +Variables for the Checkbox Group component: + +| Variable | Default Value | Description | +| :------------------------------------------ | :-----------: | :-------------------------------------------------------------------- | +| `--df-checkbox-group-child-margin-right` | `6px` | Right margin for child checkbox elements | +| `--df-checkbox-group-vertical-margin-top` | `8px` | Top margin in vertical layout | +| `--df-checkbox-group-vertical-child-margin` | `0px 0px 6px` | Margin for child elements in vertical view (top, right, bottom, left) | + +--- + +### Date input + +Variables for the Date Input component: + +| Variable | Default Value | Description | +| :---------------------- | :-----------: | :---------------------------- | +| `--df-date-input-width` | `100%` | Width of the date input field | + +--- + +### File input + +Variables for the File Input component: + +| Variable | Default Value | Description | +| :------------------------------------ | :-----------: | :------------------------------------------------ | +| `--df-file-input-file-name-margin` | `auto 10px` | Margin for the file name (top/bottom, left/right) | +| `--df-file-input-file-name-max-width` | `160px` | Maximum width for the displayed file name | + +--- + +### Monaco input + +Variables for the Monaco Input component: + +| Variable | Default Value | Description | +| :----------------------------------------------- | :-------------: | :-------------------------------------------------------- | +| `--df-monaco-input-width` | `550px` | Width of the Monaco editor input | +| `--df-monaco-header-height` | `52px` | Height of the Monaco editor header | +| `--df-monaco-header-padding` | `15px` | Padding inside the Monaco editor header | +| `--df-monaco-input-dialog-dialog-footer-padding` | `6px 32px 32px` | Padding for the Monaco dialog footer (top, sides, bottom) | +| `--df-monaco-dialog-header-caption-min-height` | `24px` | Minimum height for the Monaco dialog header caption | + +--- + +### Multi OneOf + +Variables for the Multi OneOf input component: + +| Variable | Default Value | Description | +| :-------------------------------------- | :-----------: | :-------------------------------- | +| `--df-multi-oneof-select-max-width` | `305px` | Maximum width of the select input | +| `--df-multi-oneof-content-flat-margin` | `0px` | Margin for flat content | +| `--df-multi-oneof-content-flat-padding` | `0px` | Padding for flat content | + +--- + +### Multi Select + +Variables for the Multi Select component: + +| Variable | Default Value | Description | +| :---------------------------- | :-----------: | :-------------------------------------- | +| `--df-multi-select-max-width` | `305px` | Maximum width of the multi select input | + +--- + +### Number with Scale + +Variables for the Number with Scale input component: + +| Variable | Default Value | Description | +| :------------------------------------------ | :-----------: | :-------------------------------- | +| `--df-number-with-scale-select-max-width` | `102px` | Maximum width of the select input | +| `--df-number-with-scale-select-margin-left` | `5px` | Left margin of the select input | + +--- + +### Object Base + +Variables for the Object Base component: + +| Variable | Default Value | Description | +| :---------------------------------------- | :----------------: | :---------------------------------------------------- | +| `--df-object-base-inline-width` | `150px` | Width of inline input fields | +| `--df-object-base-inline-margin` | `0px 8px 0px 0px ` | Margin for inline elements (top, right, bottom, left) | +| `--df-object-base-delimiter-height` | `28px` | Height of the delimiter (e.g., colon or separator) | +| `--df-object-base-delimiter-margin-right` | `8px` | Right margin of the delimiter | + +--- + +### OneOf + +Variables for the OneOf component: + +| Variable | Default Value | Description | +| :----------------------------------------------------- | :-----------------: | :--------------------------------------- | +| `--df-oneof-base-padding` | `11px 0px 0px 20px` | Base padding (top, right, bottom, left) | +| `--df-oneof-base-margin` | `4px 0px 20px 5px` | Base margin (top, right, bottom, left) | +| `--df-oneof-base-simple-vertical-accordeon-margin-top` | `-10px` | Top margin for simple vertical accordion | +| `--df-oneof-flat-margin` | `0px` | Margin for flat layout | +| `--df-oneof-flat-padding` | `0px` | Padding for flat layout | + +--- + +### Select + +Variables for the Select component: + +| Variable | Default Value | Description | +| :---------------------- | :-----------: | :-------------------------------- | +| `--df-select-max-width` | `305px` | Maximum width of the select input | + +--- + +### Switch + +Variables for the Switch component: + +| Variable | Default Value | Description | +| :------------------- | :-----------: | :----------------------------- | +| `--df-switch-height` | `28px` | Height of the switch component | + +--- + +### Table Array + +Variables for the Table Array component: + +| Variable | Default Value | Description | +| :------------------------------------------------------------------ | :-----------: | :----------------------------------------------------------- | +| `--df-table-array-table-margin-bottom` | `10px` | Bottom margin of the table | +| `--df-table-array-cell-max-width` | `150px` | Maximum width of a table cell | +| `--df-table-array-cell-min-width` | `150px` | Minimum width of a table cell | +| `--df-table-array-cell-obj-padding-left` | `3px` | Left padding within a cell containing an object | +| `--df-table-array-idx-padding-top` | `6px` | Top padding for the index column in the table | +| `--df-table-array-cell-obj-simple-vertical-accordeon-margin-bottom` | `0px` | ottom margin for cell objects with simple vertical accordion | + +--- + +### Text Content + +Variables for the Text Content component: + +| Variable | Default Value | Description | +| :------------------------------------ | :-----------: | :------------------------------------------------- | +| `--df-text-content-icon-margin-right` | `4px` | Right margin of the icon | +| `--df-text-content-separator-margin` | `0px 4px` | Margin of the separator (top, right, bottom, left) | + +--- + +## Views + +### Array Base View + +Variables for the Array Base View component: + +| Variable | Default Value | Description | +| :----------------------------------------------- | :-----------: | :------------------------------- | +| `--df-array-base-view-item-prefix-margin-bottom` | `6px` | Bottom margin of the item prefix | + +--- + +### Checkbox Group View + +Variables for the Checkbox Group View component: + +| Variable | Default Value | Description | +| :----------------------------------------------- | :-----------: | :--------------------------------------------------------- | +| `--df-checkbox-group-view-child-margin-right` | `6px` | Right margin of child items | +| `--df-checkbox-group-view-vertical-child-margin` | `0px 0px 6px` | Margin for vertical child items (top, right, bottom, left) | + +--- + +### Monaco Input View + +Variables for the Monaco Input View component: + +| Variable | Default Value | Description | +| :--------------------------------------- | :--------------: | :------------------------------------------------ | +| `--df-monaco-base-view-width` | `550px` | Width of the Monaco input view | +| `--df-monaco-view-dialog-footer-padding` | `10px 32px 32px` | Padding of the dialog footer (top, sides, bottom) | +| `--df-monaco-view-dialog-header-height` | `48px` | Height of the dialog header | + +--- + +### Multi OneOf View + +Variables for the Multi OneOf View component: + +| Variable | Default Value | Description | +| :---------------------------------------------------------------- | :------------: | :------------------------------------------------------ | +| `--df-multi-oneof-view-content-multiple-values-child-padding-top` | `0px` | Top padding of the multiple values child | +| `--df-multi-oneof-view-content-flat-child-margin` | `0px 0px 20px` | Margin of flat content child (top, right, bottom, left) | +| `--df-multi-oneof-view-content-flat-child-padding` | `0px` | Padding of flat content child | + +--- + +### Number with Scale View + +Variables for the Number with Scale View component: + +| Variable | Default Value | Description | +| :--------------------------------------------- | :-----------: | :---------------------- | +| `--df-number-with-scale-view-size-margin-left` | `6px` | Left margin of the size | + +--- + +### Object Base View + +Variables for the Object Base View component: + +| Variable | Default Value | Description | +| :-------------------------------------------- | :---------------: | :--------------------------------------------------- | +| `--df-object-base-view-content-inline-margin` | `0px 2px 0px 0px` | Margin for inline content (top, right, bottom, left) | +| `--df-object-base-view-delimiter-right` | `8px` | Right position of the delimiter | + +--- + +### OneOf View + +Variables for the OneOf View component: + +| Variable | Default Value | Description | +| :----------------------------------- | :------------: | :---------------------------------------------- | +| `--df-oneof-view-flat-child-margin` | `0px 0px 20px` | Margin of flat child (top, right, bottom, left) | +| `--df-oneof-view-flat-child-padding` | `0px` | Padding of flat child | + +--- + +### Table Array View + +Variables for the Table Array View component: + +| Variable | Default Value | Description | +| :------------------------------------------ | :-----------: | :------------------------- | +| `--df-table-array-view-cell-min-width` | `150px` | Minimum width of cell | +| `--df-table-array-view-cell-max-width` | `150px` | Maximum width of cell | +| `--df-table-array-view-table-margin-bottom` | `10px` | Bottom margin of the table | + +--- + +### Text Area View + +Variables for the Text Area View component: + +| Variable | Default Value | Description | +| :----------------------------------- | :-----------: | :-------------------------- | +| `--df-text-area-view-chevron-margin` | `3px` | Margin for the chevron icon | + +--- + +## Layouts + +### Accordion Card Form + +Variables for the Accordion Card Form layout: + +| Variable | Default Value | Description | +| :-------------------------------------------- | :-----------: | :------------------------ | +| `--df-accordeon-card-form-body-padding-right` | `32px` | Right padding of the body | + +--- + +### Column + +Variables for the Column layout: + +| Variable | Default Value | Description | +| :---------------------------------- | :-----------: | :------------------------------ | +| `--df-column-first-row-min-height` | `28px` | Minimum height of the first row | +| `--df-column-title-margin-right` | `3px` | Right margin of the title | +| `--df-column-note-inner-margin-top` | `1px` | Top margin inside the note | + +--- + +### Row + +Variables for the Row layout: + +| Variable | Default Value | Description | +| :-------------------------------- | :-----------: | :--------------------------------- | +| `--df-row-width` | `500px` | Width of the row | +| `--df-row-max-width` | `500px` | Maximum width of the row | +| `--df-row-left-width` | `180px` | Width of the left section | +| `--df-row-left-min-height` | `28px` | Minimum height of the left section | +| `--df-row-title-margin-right` | `3px` | Right margin of the title | +| `--df-row-note-padding-right` | `16px` | Right padding of the note | +| `--df-row-note-inner-margin-top` | `1px` | Top margin inside the note | +| `--df-row-right-margin-left` | `15px` | Left margin of the right section | +| `--df-row-description-margin-top` | `10px` | Top margin of the description | + +--- + +### Section + +Variables for the Section layout: + +| Variable | Default Value | Description | +| :------------------------------------ | :-----------: | :--------------------------------- | +| `--df-section-header-margin-bottom` | `20px` | Bottom margin of the header | +| `--df-section-header-size-s` | `18px` | Headers size for small headers | +| `--df-section-header-size-m` | `20px` | Headers size for medium headers | +| `--df-section-title-max-width` | `533px` | Maximum width of the section title | +| `--df-section-note-margin-left` | `5px` | Left margin of the note | +| `--df-section-description-margin-top` | `4px` | Top margin of the description | + +--- + +### Transparent + +Variables for the Transparent layout: + +| Variable | Default Value | Description | +| :-------------------------------------- | :-----------: | :--------------------------- | +| `--df-transparent-array-item-max-width` | `338px` | Maximum width of array items | + +--- + +## View Layouts + +### View Column + +Variables for the View Column layout: + +| Variable | Default Value | Description | +| :----------------------------------------------------------------- | :-----------: | :---------------------------------------------------------- | +| `--df-view-column-note-margin-inline-start` | `2px` | Inline start margin for notes | +| `--df-view-column-second-row-child-view-transperant-margin-bottom` | `6px` | Bottom margin for transparent child views in the second row | + +--- + +### View Row + +Variables for the View Row layout: + +| Variable | Default Value | Description | +| :--------------------------------------------------------- | :-----------: | :------------------------------------------------------------------- | +| `--df-view-row-width` | `100%` | Width of the view row | +| `--df-view-row-left-width` | `300px` | Width of the left section | +| `--df-view-row-left-max-width` | `300px` | Maximum width of the left section | +| `--df-view-row-left-min-width` | `300px` | Minimum width of the left section | +| `--df-view-row-note-margin-inline-start` | `2px` | Start margin inline for the note | +| `--df-view-row-dots-min-width` | `40px` | Minimum width for spacer dots (used between left and right sections) | +| `--df-view-row-dots-margin` | `0px 2px` | Margin around the dots (vertical, horizontal) | +| `--df-view-row-right-width` | `480px` | Width of the right section | +| `--df-view-row-right-child-view-transparent-margin-bottom` | `6px` | Bottom margin for transparent child views in the right section | + +--- + +### View Table Cell + +Variables for the ViewTableCell component: + +| Variable | Default Value | Description | +| :---------------------------------------------------------------- | :-----------: | :-------------------------------------------------------------- | +| `--df-view-table-cell-inner-max-width` | `100%` | Maximum width of the inner content within the table cell | +| `--df-view-table-cell-inner-child-view-transparent-margin-bottom` | `6px` | Bottom margin for transparent child views within the table cell | + +--- + +### View Transparent + +Variables for the ViewTransparent component: + +| Variable | Default Value | Description | +| :-------------------------------------- | :-----------: | :--------------------------------- | +| `--df-view-transparent-inner-max-width` | `100%` | Maximum width of the inner content | +| `--df-view-transparent-inner-width` | `100%` | Width of the inner content | + +--- + +## Hooks + +### Use OneOf + +Variables for customizing the UseOneOf hook/component: + +| Variable | Default Value | Description | +| :---------------------------------- | :-----------: | :----------------------------------------- | +| `--df-use-oneof-card-child-padding` | `0px` | Padding for child elements within the card | +| `--df-use-oneof-card-margin-right` | `8px` | Right margin of the card | diff --git a/src/lib/core/components/Form/hooks/useSearch/useSearch.scss b/src/lib/core/components/Form/hooks/useSearch/useSearch.scss index 1b73d5ac..f116b8cd 100644 --- a/src/lib/core/components/Form/hooks/useSearch/useSearch.scss +++ b/src/lib/core/components/Form/hooks/useSearch/useSearch.scss @@ -1,13 +1,13 @@ @import '../../../../../kit/styles/variables.scss'; .#{$ns}use-search { - margin-bottom: $df-offset-15; + margin-bottom: var(--df-spacing-inputs, $df-spacing-inputs); &_hidden { display: none; } &:last-child { - margin-bottom: var(--g-spacing-0); + margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child); } } diff --git a/src/lib/kit/components/AccordeonCard/AccordeonCard.scss b/src/lib/kit/components/AccordeonCard/AccordeonCard.scss index 29d7362e..fb516c20 100644 --- a/src/lib/kit/components/AccordeonCard/AccordeonCard.scss +++ b/src/lib/kit/components/AccordeonCard/AccordeonCard.scss @@ -6,11 +6,12 @@ justify-content: space-between; box-sizing: border-box; box-shadow: 0 1px 5px var(--g-color-sfx-shadow); - border-radius: $df-border-radius-xs; + border-radius: var(--df-accordeon-card-border-radius, $df-border-radius-xs); color: var(--g-color-text-primary); background-color: var(--g-color-base-float); + .#{$ns}row { - width: 100%; + width: var(--df-accordeon-card-row-width, 100%); max-width: unset; .#{$ns}select, @@ -22,7 +23,7 @@ .#{$ns}monaco-input, .#{$ns}monaco-base-view { - width: 100%; + width: var(--df-accordeon-card-monaco-input-width, 100%); } &:hover { @@ -30,7 +31,7 @@ } &:last-child { - margin-bottom: var(--g-spacing-0); + margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child); } &_empty { @@ -48,8 +49,8 @@ display: flex; position: relative; box-sizing: border-box; - width: 100%; - padding: var(--g-spacing-4); + width: var(--df-accordeon-card-header-width, 100%); + padding: var(--df-accordeon-card-header-padding, var(--g-spacing-4)); &:hover { cursor: pointer; @@ -78,7 +79,7 @@ } &-content-description { - margin-top: var(--g-spacing-3); + margin-top: var(--df-accordeon-card-content-description-margin-top, var(--g-spacing-3)); color: var(--g-color-text-complementary); } @@ -90,7 +91,7 @@ } &__interal-actions { - margin-right: $df-offset-5; + margin-right: var(--df-accordeon-card-interal-actions-margin-right, $df-offset-5); } &__toggle-icon_open { @@ -99,7 +100,7 @@ &__body { display: none; - padding: var(--g-spacing-4); + padding: var(--df-accordeon-card-body-padding, var(--g-spacing-4)); &_open { display: block; diff --git a/src/lib/kit/components/Card/Card.scss b/src/lib/kit/components/Card/Card.scss index 7e0f81ec..43b88ab4 100644 --- a/src/lib/kit/components/Card/Card.scss +++ b/src/lib/kit/components/Card/Card.scss @@ -1,16 +1,14 @@ @import '../../styles/variables.scss'; .#{$ns}card { - --_--title-max-width: 533px; - - margin-bottom: var(--g-spacing-5); + margin-bottom: var(--df-spacing-inputs-section, $df-spacing-inputs-section); &:last-child { - margin-bottom: var(--g-spacing-0); + margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child); } .#{$ns}row { - width: 100%; + width: var(--df-card-row-width, 100%); max-width: unset; .#{$ns}select, @@ -22,7 +20,7 @@ .#{$ns}monaco-input, .#{$ns}monaco-base-view { - width: 100%; + width: var(--df-card-monaco-input-width, 100%); } &_empty-body { @@ -43,7 +41,7 @@ display: flex; justify-content: space-between; align-items: center; - padding: var(--g-spacing-5); + padding: var(--df-card-header-padding, var(--g-spacing-5)); &_interactive { cursor: pointer; @@ -61,21 +59,21 @@ align-items: center; & > * { - margin-left: $df-offset-10; + margin-left: var(--df-card-header-right-child-margin-left, $df-offset-10); } } &__title { - max-width: var(--df-card-title-max-width, var(--_--title-max-width)); - height: 20px; + max-width: var(--df-card-title-max-width, 533px); + height: var(--df-card-title-height, var(--g-spacing-5)); } &__title-popover { - height: 20px; + height: var(--df-card-title-popover-height, var(--g-spacing-5)); } &__note { - margin-left: $df-offset-5; + margin-left: var(--df-card-note-margin-left, $df-offset-5); .gc-help-popover { display: flex; @@ -94,7 +92,10 @@ &__body { display: none; - padding: 0 var(--g-spacing-5) var(--g-spacing-5); + padding: var( + --df-card-body-padding, + var(--g-spacing-0) var(--g-spacing-5) var(--g-spacing-5) + ); &_open { display: block; diff --git a/src/lib/kit/components/ErrorWrapper/ErrorWrapper.scss b/src/lib/kit/components/ErrorWrapper/ErrorWrapper.scss index a9689c8f..9fd28a95 100644 --- a/src/lib/kit/components/ErrorWrapper/ErrorWrapper.scss +++ b/src/lib/kit/components/ErrorWrapper/ErrorWrapper.scss @@ -1,7 +1,7 @@ @import '../../styles/variables.scss'; .#{$ns}error-wrapper { - width: 100%; + width: var(--df-error-wrapper-width, 100%); &_error { .yc-select-control:not(.#{$ns}error-wrapper-ignore), @@ -29,7 +29,7 @@ &__error-text { color: var(--g-color-text-danger); - margin-top: 2px; + margin-top: var(--df-error-wrapper-error-text-margin-top, var(--g-spacing-half)); font-size: var(--g-text-body-1-font-size); line-height: var(--g-text-body-1-line-height); } diff --git a/src/lib/kit/components/GenerateRandomValueButton/GenerateRandomValueButton.scss b/src/lib/kit/components/GenerateRandomValueButton/GenerateRandomValueButton.scss index b5b4a923..13bdf40f 100644 --- a/src/lib/kit/components/GenerateRandomValueButton/GenerateRandomValueButton.scss +++ b/src/lib/kit/components/GenerateRandomValueButton/GenerateRandomValueButton.scss @@ -1,5 +1,5 @@ @import '../../styles/variables'; .#{$ns}generate-random-value-button { - margin-left: 8px; + margin-left: var(--df-generate-random-value-button-margin-left, var(--g-spacing-2)); } diff --git a/src/lib/kit/components/GroupIndent/GroupIndent.scss b/src/lib/kit/components/GroupIndent/GroupIndent.scss index 48d6947b..449ff06b 100644 --- a/src/lib/kit/components/GroupIndent/GroupIndent.scss +++ b/src/lib/kit/components/GroupIndent/GroupIndent.scss @@ -1,15 +1,18 @@ @import '../../styles/variables.scss'; .#{$ns}group-indent { - padding-top: $df-offset-11; - padding-left: var(--g-spacing-5); - margin-top: -$df-offset-11; - margin-bottom: var(--g-spacing-5); - margin-left: $df-offset-5; + padding: var( + --df-group-indent-padding, + $df-offset-11 var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-5) + ); + margin: var( + --df-group-indent-margin, + -$df-offset-11 var(--g-spacing-0) var(--g-spacing-0) $df-offset-5 + ); border-left: 1px solid var(--g-color-line-generic-accent); &:last-child { - margin-bottom: var(--g-spacing-0); + margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child); } &:empty { @@ -17,6 +20,9 @@ } & > .#{$ns}simple-vertical-accordeon_view { - margin-top: -$df-offset-10; + margin-top: var( + --df-group-indent-simple-vertical-accordeon-view-margin-top, + -$df-offset-10 + ); } } diff --git a/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.scss b/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.scss index 8515c494..ab7ae06a 100644 --- a/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.scss +++ b/src/lib/kit/components/Inputs/ArrayBase/ArrayBase.scss @@ -12,11 +12,11 @@ &__items-wrapper { &_add-button-down { - margin-bottom: $df-offset-15; + margin-bottom: var(--df-spacing-inputs, $df-spacing-inputs); } &_items-primitive { - min-width: 100%; + min-width: var(--df-array-base-items-primitive-min-width, 100%); &:empty { min-width: unset; @@ -25,13 +25,15 @@ } &__item-prefix { - margin-top: -$df-offset-7; - margin-bottom: var(--g-spacing-2); + margin: var( + --df-array-base-item-prefix-margin, + -$df-offset-7 var(--g-spacing-0) var(--g-spacing-2) + ); } &__add-button { &_right { - margin-left: var(--g-spacing-1); + margin-left: var(--df-array-base-add-button-right-margin-left, var(--g-spacing-1)); } } } diff --git a/src/lib/kit/components/Inputs/Checkbox/Checkbox.scss b/src/lib/kit/components/Inputs/Checkbox/Checkbox.scss index 1d1ffa2f..7fa21fdf 100644 --- a/src/lib/kit/components/Inputs/Checkbox/Checkbox.scss +++ b/src/lib/kit/components/Inputs/Checkbox/Checkbox.scss @@ -1,7 +1,7 @@ @import '../../../styles/variables'; .#{$ns}checkbox { - height: 28px; + height: var(--df-checkbox-height, $df-checkbox-height); display: flex; align-items: center; } diff --git a/src/lib/kit/components/Inputs/CheckboxGroup/CheckboxGroup.scss b/src/lib/kit/components/Inputs/CheckboxGroup/CheckboxGroup.scss index 61f98653..08f73db9 100644 --- a/src/lib/kit/components/Inputs/CheckboxGroup/CheckboxGroup.scss +++ b/src/lib/kit/components/Inputs/CheckboxGroup/CheckboxGroup.scss @@ -3,21 +3,23 @@ .#{$ns}checkbox-group { display: flex; align-items: center; - height: 28px; + height: var(--df-checkbox-height, $df-checkbox-height); & > *:not(:last-child) { - margin-right: $df-offset-6; + margin-right: var(--df-checkbox-group-child-margin-right, $df-offset-6); } &_vertical { flex-direction: column; align-items: flex-start; - margin-top: var(--g-spacing-2); + margin-top: var(--df-checkbox-group-vertical-margin-top, var(--g-spacing-2)); height: auto; & > *:not(:last-child) { - margin-right: var(--g-spacing-0); - margin-bottom: $df-offset-6; + margin: var( + --df-checkbox-group-vertical-child-margin, + var(--g-spacing-0) var(--g-spacing-0) $df-offset-6 + ); } } } diff --git a/src/lib/kit/components/Inputs/DateInput/DateInput.scss b/src/lib/kit/components/Inputs/DateInput/DateInput.scss index 9d9121ea..8d6bad3b 100644 --- a/src/lib/kit/components/Inputs/DateInput/DateInput.scss +++ b/src/lib/kit/components/Inputs/DateInput/DateInput.scss @@ -1,5 +1,5 @@ @import '../../../styles/variables'; .#{$ns}date-input { - width: 100%; + width: var(--df-date-input-width, 100%); } diff --git a/src/lib/kit/components/Inputs/FileInput/FileInput.scss b/src/lib/kit/components/Inputs/FileInput/FileInput.scss index 596d658b..8a5eef7c 100644 --- a/src/lib/kit/components/Inputs/FileInput/FileInput.scss +++ b/src/lib/kit/components/Inputs/FileInput/FileInput.scss @@ -1,8 +1,6 @@ @import '../../../styles/variables.scss'; .#{$ns}file-input { - --_--file-name-max-width: 160px; - display: flex; &__input { @@ -11,7 +9,7 @@ &__file-name { display: block; - margin: auto $df-offset-10; - max-width: var(--df-file-input-file-name-max-width, var(--_--file-name-max-width)); + margin: var(--df-file-input-file-name-margin, auto $df-offset-10); + max-width: var(--df-file-input-file-name-max-width, 160px); } } diff --git a/src/lib/kit/components/Inputs/MonacoInput/MonacoHeader.scss b/src/lib/kit/components/Inputs/MonacoInput/MonacoHeader.scss index 1b6a6f7c..b81d3b17 100644 --- a/src/lib/kit/components/Inputs/MonacoInput/MonacoHeader.scss +++ b/src/lib/kit/components/Inputs/MonacoInput/MonacoHeader.scss @@ -1,10 +1,10 @@ @import '../../../styles/variables.scss'; .#{$ns}monaco-header { - height: 52px; + height: var(--df-monaco-header-height, 52px); display: flex; justify-content: space-between; - padding: $df-offset-3; + padding: var(--df-monaco-header-padding, $df-offset-15); align-items: center; background-color: var(--g-color-base-float-hover); } diff --git a/src/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.scss b/src/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.scss index 9491da35..e0d62bab 100644 --- a/src/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.scss +++ b/src/lib/kit/components/Inputs/MonacoInput/MonacoInputBase.scss @@ -2,7 +2,7 @@ .#{$ns}monaco-input { // TODO: Remove this styles - width: 550px; + width: var(--df-monaco-input-width, 550px); &__container { border: 1px solid var(--g-color-line-generic); diff --git a/src/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.scss b/src/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.scss index 58223baf..13af2905 100644 --- a/src/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.scss +++ b/src/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.scss @@ -2,7 +2,10 @@ .#{$ns}monaco-input-dialog { .g-dialog-footer { - padding: $df-offset-6 var(--g-spacing-8) var(--g-spacing-8); + padding: var( + --df-monaco-input-dialog-dialog-footer-padding, + $df-offset-6 var(--g-spacing-8) var(--g-spacing-8) + ); } &__container { @@ -11,7 +14,7 @@ &__dialog-header { .g-dialog-header__caption { - min-height: 24px; + min-height: var(--df-monaco-dialog-header-caption-min-height, 24px); } } } diff --git a/src/lib/kit/components/Inputs/MultiOneOf/MultiOneOf.scss b/src/lib/kit/components/Inputs/MultiOneOf/MultiOneOf.scss index 1c8bd2cf..c3b37cb0 100644 --- a/src/lib/kit/components/Inputs/MultiOneOf/MultiOneOf.scss +++ b/src/lib/kit/components/Inputs/MultiOneOf/MultiOneOf.scss @@ -1,21 +1,19 @@ @import '../../../styles/variables'; .#{$ns}multi-oneof { - --_--select-max-width: 305px; - &__select { - max-width: var(--df-multi-oneof-max-width-select, var(--_--select-max-width)); + max-width: var(--df-multi-oneof-select-max-width, 305px); } &__content { &_flat { & > .#{$ns}group-indent { - margin: var(--g-spacing-0); + margin: var(--df-multi-oneof-content-flat-margin, var(--g-spacing-0)); border-left: none; - padding: var(--g-spacing-0); + padding: var(--df-multi-oneof-content-flat-padding, var(--g-spacing-0)); & > .#{$ns}use-search { - margin-top: $df-offset-15; + margin-top: var(--df-spacing-inputs, $df-spacing-inputs); &:empty { display: none; diff --git a/src/lib/kit/components/Inputs/MultiSelect/MultiSelect.scss b/src/lib/kit/components/Inputs/MultiSelect/MultiSelect.scss index cbf3fc79..cc4a1696 100644 --- a/src/lib/kit/components/Inputs/MultiSelect/MultiSelect.scss +++ b/src/lib/kit/components/Inputs/MultiSelect/MultiSelect.scss @@ -1,9 +1,7 @@ @import '../../../styles/variables'; .#{$ns}multi-select { - --_--max-width: 305px; - - max-width: var(--df-multi-select-max-width, var(--_--max-width)); + max-width: var(--df-multi-select-max-width, 305px); &__meta-text { display: block; diff --git a/src/lib/kit/components/Inputs/NumberWithScale/NumberWithScale.scss b/src/lib/kit/components/Inputs/NumberWithScale/NumberWithScale.scss index c354fe94..1650c98a 100644 --- a/src/lib/kit/components/Inputs/NumberWithScale/NumberWithScale.scss +++ b/src/lib/kit/components/Inputs/NumberWithScale/NumberWithScale.scss @@ -1,14 +1,12 @@ @import '../../../styles/variables'; .#{$ns}number-with-scale { - $df-number-with-scale-max-width: 102px; - &__wrapper { display: flex; } &__select { - max-width: $df-number-with-scale-max-width; - margin-left: $df-offset-5; + max-width: var(--df-number-with-scale-select-max-width, 102px); + margin-left: var(--df-number-with-scale-select-margin-left, $df-offset-5); } } diff --git a/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.scss b/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.scss index db904b60..b193cc67 100644 --- a/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.scss +++ b/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.scss @@ -6,23 +6,23 @@ display: flex; & > .#{$ns}use-search { - --_--inline-width: 150px; - - width: var(--df-object-base-inline-width, var(--_--inline-width)); - margin-bottom: var(--g-spacing-0); - margin-right: var(--g-spacing-2); + width: var(--df-object-base-inline-width, 150px); + margin: var( + --df-object-base-inline-margin, + var(--g-spacing-0) var(--g-spacing-2) var(--g-spacing-0) var(--g-spacing-0) + ); &:last-child { - margin-right: var(--g-spacing-0); + margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child); } } } } &__delimiter { - height: 28px; + height: var(--df-object-base-delimiter-height, 28px); display: flex; - margin-right: var(--g-spacing-2); + margin-right: var(--df-object-base-delimiter-margin-right, var(--g-spacing-2)); align-items: center; white-space: nowrap; } diff --git a/src/lib/kit/components/Inputs/OneOf/OneOf.scss b/src/lib/kit/components/Inputs/OneOf/OneOf.scss index 2d1821b6..2e10d519 100644 --- a/src/lib/kit/components/Inputs/OneOf/OneOf.scss +++ b/src/lib/kit/components/Inputs/OneOf/OneOf.scss @@ -6,7 +6,7 @@ &:last-child { & > .#{$ns}group-indent { - margin-bottom: var(--g-spacing-0); + margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child); } } @@ -15,11 +15,14 @@ all: unset; & > .#{$ns}use-search { - padding-top: $df-offset-11; - padding-left: var(--g-spacing-5); - margin-top: var(--g-spacing-1); - margin-bottom: var(--g-spacing-5); - margin-left: $df-offset-5; + padding: var( + --df-oneof-base-padding, + $df-offset-11 var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-5) + ); + margin: var( + --df-oneof-base-margin, + var(--g-spacing-1) var(--g-spacing-0) var(--g-spacing-5) $df-offset-5 + ); border-left: 1px solid var(--g-color-line-generic-accent); &:empty { @@ -27,11 +30,14 @@ } &:last-child { - margin-bottom: var(--g-spacing-0); + margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child); } & > .#{$ns}simple-vertical-accordeon_view { - margin-top: -$df-offset-10; + margin-top: var( + --df-oneof-base-simple-vertical-accordeon-margin-top, + -$df-offset-10 + ); } } } @@ -39,12 +45,12 @@ &_flat { & > .#{$ns}group-indent { - margin: var(--g-spacing-0); + margin: var(--df-oneof-flat-margin, var(--g-spacing-0)); border-left: none; - padding: var(--g-spacing-0); + padding: var(--df-oneof-flat-padding, var(--g-spacing-0)); & > .#{$ns}use-search { - margin-top: $df-offset-15; + margin-top: var(--df-spacing-inputs, $df-spacing-inputs); &:empty { display: none; diff --git a/src/lib/kit/components/Inputs/Select/Select.scss b/src/lib/kit/components/Inputs/Select/Select.scss index f323007f..d67b54c6 100644 --- a/src/lib/kit/components/Inputs/Select/Select.scss +++ b/src/lib/kit/components/Inputs/Select/Select.scss @@ -1,10 +1,8 @@ @import '../../../styles/variables'; .#{$ns}select { - --_--max-width: 305px; - // TODO: Remove this styles - max-width: var(--df-select-max-width, var(--_--max-width)); + max-width: var(--df-select-max-width, 305px); &__meta-text { display: block; diff --git a/src/lib/kit/components/Inputs/Switch/Switch.scss b/src/lib/kit/components/Inputs/Switch/Switch.scss index d16e4d21..617686af 100644 --- a/src/lib/kit/components/Inputs/Switch/Switch.scss +++ b/src/lib/kit/components/Inputs/Switch/Switch.scss @@ -1,7 +1,7 @@ @import '../../../styles/variables.scss'; .#{$ns}switch { - height: 28px; + height: var(--df-switch-height, 28px); display: flex; align-items: center; } diff --git a/src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.scss b/src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.scss index c4935aa2..45833a67 100644 --- a/src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.scss +++ b/src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.scss @@ -1,11 +1,8 @@ @import '../../../styles/variables'; .#{$ns}table-array { - --_--cell-max-width: 150px; - --_--cell-min-width: 150px; - &__table { - margin-bottom: $df-offset-10; + margin-bottom: var(--df-table-array-table-margin-bottom, $df-offset-10); .g-table__cell { border-bottom: 0px transparent; @@ -30,13 +27,13 @@ .g-select-control, .yc-select, .g-select { - max-width: var(--df-table-cell-max-width, var(--_--cell-max-width)); - min-width: var(--df-table-cell-min-width, var(--_--cell-min-width)); + max-width: var(--df-table-array-cell-max-width, 150px); + min-width: var(--df-table-array-cell-min-width, 150px); } &_arr, &_obj { - padding-left: $df-offset-3; + padding-left: var(--df-table-array-cell-obj-padding-left, $df-offset-3); .yc-text-input, .g-text-input, @@ -48,7 +45,10 @@ } & > .simple-vertical-accordeon { - margin-bottom: var(--g-spacing-0); + margin-bottom: var( + --df-table-array-cell-obj-simple-vertical-accordeon-margin-bottom, + var(--g-spacing-0) + ); } } @@ -59,6 +59,6 @@ } &__idx { - padding-top: $df-offset-6; + padding-top: var(--df-table-array-idx-padding-top, $df-offset-6); } } diff --git a/src/lib/kit/components/Inputs/TextContent/TextContent.scss b/src/lib/kit/components/Inputs/TextContent/TextContent.scss index d0ae91af..afb664de 100644 --- a/src/lib/kit/components/Inputs/TextContent/TextContent.scss +++ b/src/lib/kit/components/Inputs/TextContent/TextContent.scss @@ -14,7 +14,7 @@ &__icon { display: flex; align-items: center; - margin-right: var(--g-spacing-1); + margin-right: var(--df-text-content-icon-margin-right, var(--g-spacing-1)); } &__wrapper { @@ -22,6 +22,6 @@ } &__separator { - margin: var(--g-spacing-0) var(--g-spacing-1); + margin: var(--df-text-content-separator-margin, var(--g-spacing-0) var(--g-spacing-1)); } } diff --git a/src/lib/kit/components/Layouts/AccordeonCard/AccordeonCardForm.scss b/src/lib/kit/components/Layouts/AccordeonCard/AccordeonCardForm.scss index 0cb7620a..c932dcfc 100644 --- a/src/lib/kit/components/Layouts/AccordeonCard/AccordeonCardForm.scss +++ b/src/lib/kit/components/Layouts/AccordeonCard/AccordeonCardForm.scss @@ -2,6 +2,6 @@ .#{$ns}accordeon-card-form { &__accordeon-card-body { - padding-right: var(--g-spacing-8); + padding-right: var(--df-accordeon-card-form-body-padding-right, var(--g-spacing-8)); } } diff --git a/src/lib/kit/components/Layouts/Column/Column.scss b/src/lib/kit/components/Layouts/Column/Column.scss index dd5b1c92..bc3a205c 100644 --- a/src/lib/kit/components/Layouts/Column/Column.scss +++ b/src/lib/kit/components/Layouts/Column/Column.scss @@ -1,14 +1,14 @@ @import '../../../styles/variables.scss'; .#{$ns}column { - margin-bottom: 15px; + margin-bottom: var(--df-spacing-inputs, $df-spacing-inputs); &:last-child { - margin-bottom: 0; + margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child); } &__first-row { - min-height: 28px; + min-height: var(--df-column-first-row-min-height, 28px); display: flex; margin-bottom: auto; flex-direction: column; @@ -29,7 +29,7 @@ &__title { word-break: break-word; - margin-right: 3px; + margin-right: var(--df-column-title-margin-right, $df-offset-3); &_required { &::after { @@ -44,7 +44,7 @@ &-inner { position: absolute; - margin-top: 1px; + margin-top: var(--df-column-note-inner-margin-top, $df-offset-1); .g-help-popover { display: flex; @@ -68,7 +68,7 @@ } &__remove-button { - margin-left: 5px; + margin-left: var(--df-remove-button-margin-left, $df-remove-button-margin-left); } &__required-mark { diff --git a/src/lib/kit/components/Layouts/Row/Row.scss b/src/lib/kit/components/Layouts/Row/Row.scss index a7a189de..a29ec627 100644 --- a/src/lib/kit/components/Layouts/Row/Row.scss +++ b/src/lib/kit/components/Layouts/Row/Row.scss @@ -1,22 +1,18 @@ @import '../../../styles/variables.scss'; .#{$ns}row { - --_--width: 500px; - --_--max-width: 500px; - --_--left-width: 180px; - display: flex; - width: var(--df-row-width, var(--_--width)); - max-width: var(--df-row-max-width, var(--_--max-width)); - margin-bottom: $df-offset-15; + width: var(--df-row-width, 500px); + max-width: var(--df-row-max-width, 500px); + margin-bottom: var(--df-spacing-inputs, $df-spacing-inputs); &:last-child { - margin-bottom: var(--g-spacing-0); + margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child); } &__left { - width: var(--df-row-left-width, var(--_--left-width)); - min-height: 28px; + width: var(--df-row-left-width, 180px); + min-height: var(--df-row-left-min-height, 28px); display: flex; margin-bottom: auto; flex-direction: column; @@ -37,7 +33,7 @@ &__title { word-break: break-word; - margin-right: $df-offset-3; + margin-right: var(--df-row-title-margin-right, $df-offset-3); &_required { &::after { @@ -48,12 +44,12 @@ } &__note { - padding-right: var(--g-spacing-4); + padding-right: var(--df-row-note-padding-right, var(--g-spacing-4)); position: relative; &-inner { position: absolute; - margin-top: $df-offset-1; + margin-top: var(--df-row-note-inner-margin-top, $df-offset-1); .g-help-popover { display: flex; @@ -69,7 +65,7 @@ display: flex; flex-direction: column; flex-grow: 1; - margin-left: $df-offset-15; + margin-left: var(--df-row-right-margin-left, $df-offset-15); &-inner { display: flex; @@ -78,13 +74,13 @@ } &__description { - margin-top: $df-offset-10; + margin-top: var(--df-row-description-margin-top, $df-offset-10); color: var(--g-color-text-secondary); word-break: break-word; } &__remove-button { - margin-left: $df-offset-5; + margin-left: var(--df-remove-button-margin-left, $df-remove-button-margin-left); } &__required-mark { diff --git a/src/lib/kit/components/Layouts/Section/Section.scss b/src/lib/kit/components/Layouts/Section/Section.scss index 252351a0..4d076292 100644 --- a/src/lib/kit/components/Layouts/Section/Section.scss +++ b/src/lib/kit/components/Layouts/Section/Section.scss @@ -3,32 +3,30 @@ $block: '.#{$ns}section'; #{$block} { - --_--title-max-width: 533px; - - margin-bottom: var(--g-spacing-5); + margin-bottom: var(--df-spacing-inputs-section, $df-spacing-inputs-section); $block: &; &:last-child { - margin-bottom: var(--g-spacing-0); + margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child); } &__header { display: flex; align-items: center; - margin-bottom: var(--g-spacing-5); + margin-bottom: var(--df-section-header-margin-bottom, var(--g-spacing-5)); &_size_s { - height: 18px; + height: var(--df-section-header-size-s, 18px); } &_size_m { - height: 20px; + height: var(--df-section-header-size-m, 20px); } } &__title { - max-width: var(--df-section-title-max-width, var(--_--title-max-width)); + max-width: var(--df-section-title-max-width, 533px); } &__title-popover { @@ -41,7 +39,7 @@ $block: '.#{$ns}section'; } &__note { - margin-left: $df-offset-5; + margin-left: var(--df-section-note-margin-left, $df-offset-5); .g-help-popover { display: flex; @@ -53,10 +51,10 @@ $block: '.#{$ns}section'; } &__description { - margin-top: var(--g-spacing-1); + margin-top: var(--df-section-description-margin-top, var(--g-spacing-1)); } &__remove-button { - margin-left: $df-offset-5; + margin-left: var(--df-remove-button-margin-left, $df-remove-button-margin-left); } } diff --git a/src/lib/kit/components/Layouts/Transparent/Transparent.scss b/src/lib/kit/components/Layouts/Transparent/Transparent.scss index 15684c1b..1c3badcd 100644 --- a/src/lib/kit/components/Layouts/Transparent/Transparent.scss +++ b/src/lib/kit/components/Layouts/Transparent/Transparent.scss @@ -1,17 +1,15 @@ @import '../../../styles/variables.scss'; .#{$ns}transparent { - --_--array-item-max-width: 338px; - display: flex; - margin-bottom: $df-offset-15; + margin-bottom: var(--df-spacing-inputs, $df-spacing-inputs); &:last-child { - margin-bottom: var(--g-spacing-0); + margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child); } &_array-item { - max-width: var(--df-transparent-array-item-max-width, var(--_--array-item-max-width)); + max-width: var(--df-transparent-array-item-max-width, 338px); } &_without-max-width { @@ -23,6 +21,6 @@ } &__remove-button { - margin-left: $df-offset-5; + margin-left: var(--df-remove-button-margin-left, $df-remove-button-margin-left); } } diff --git a/src/lib/kit/components/LongValue/LongValue.scss b/src/lib/kit/components/LongValue/LongValue.scss index a9349b6b..e8fa9d84 100644 --- a/src/lib/kit/components/LongValue/LongValue.scss +++ b/src/lib/kit/components/LongValue/LongValue.scss @@ -1,7 +1,7 @@ @import '../../styles/variables.scss'; .#{$ns}long-value { - max-width: 100%; + max-width: var(--df-long-value-max-width, 100%); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; diff --git a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss index 635a6158..eceaf09e 100644 --- a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss +++ b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss @@ -3,17 +3,15 @@ $animationDuration: 0.3s; .#{$ns}simple-vertical-accordeon { - --_--inner-max-width: 533px; - - margin-bottom: var(--g-spacing-5); + margin-bottom: var(--df-spacing-inputs-section, $df-spacing-inputs-section); &:last-child { - margin-bottom: 0; + margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child); } &_branch &__body { - padding-left: var(--g-spacing-5); - margin-left: $df-offset-5; + padding-left: var(--df-simple-vertical-accordeon-body-padding-left, var(--g-spacing-5)); + margin-left: var(--df-simple-vertical-accordeon-body-margin-left, $df-offset-5); border-left: 1px solid var(--g-color-line-generic-accent); } @@ -22,11 +20,11 @@ $animationDuration: 0.3s; align-items: center; &-inner { - margin-left: -$df-offset-13; - max-width: var( - --df-simple-vertical-accordeon-header-inner-max-width, - var(--_--inner-max-width) + margin-left: var( + --df-simple-vertical-accordeon-header-inner-margin-left, + -$df-offset-13 ); + max-width: var(--df-simple-vertical-accordeon-header-inner-max-width, 533px); } .g-popover__handler { @@ -35,7 +33,7 @@ $animationDuration: 0.3s; } &__tooltip { - margin: var(--g-spacing-0) $df-offset-5; + margin: var(--df-simple-vertical-accordeon-tooltip-margin, var(--g-spacing-0) $df-offset-5); } &__chevron { @@ -47,8 +45,8 @@ $animationDuration: 0.3s; } &__body { - margin-top: var(--g-spacing-1); - padding-top: $df-offset-6; + margin-top: var(--df-simple-vertical-accordeon-body-margin-top, var(--g-spacing-1)); + padding-top: var(--df-simple-vertical-accordeon-body-padding-top, $df-offset-6); &_hidden { display: none; diff --git a/src/lib/kit/components/TogglerCard/TogglerCard.scss b/src/lib/kit/components/TogglerCard/TogglerCard.scss index cc70090e..77a9a189 100644 --- a/src/lib/kit/components/TogglerCard/TogglerCard.scss +++ b/src/lib/kit/components/TogglerCard/TogglerCard.scss @@ -1,11 +1,9 @@ @import '../../styles/variables.scss'; .#{$ns}toggler-card { - --_--width: 254px; - - width: var(--df-toggler-card-width, var(--_--width)); - padding: $df-offset-6; - height: 88px; + width: var(--df-toggler-card-width, 254px); + padding: var(--df-toggler-card-padding, $df-offset-6); + height: var(--df-toggler-card-height, 88px); &__header { display: flex; @@ -14,10 +12,12 @@ } &__text { - margin-top: var(--g-spacing-3); + margin: var( + --df-toggler-card-text-margin, + var(--g-spacing-3) $df-offset-15 var(--g-spacing-0) var(--g-spacing-0) + ); display: block; - margin-right: $df-offset-15; - height: 36px; + height: var(--df-toggler-card-text-height, 36px); overflow: hidden; text-overflow: ellipsis; } diff --git a/src/lib/kit/components/ViewLayouts/ViewColumn/ViewColumn.scss b/src/lib/kit/components/ViewLayouts/ViewColumn/ViewColumn.scss index 4521ea30..b15912d0 100644 --- a/src/lib/kit/components/ViewLayouts/ViewColumn/ViewColumn.scss +++ b/src/lib/kit/components/ViewLayouts/ViewColumn/ViewColumn.scss @@ -2,10 +2,10 @@ @import '../../../styles/mixins.scss'; .#{$ns}view-column { - margin-bottom: 20px; + margin-bottom: var(--df-spacing-view, $df-spacing-view); &:last-child { - margin-bottom: 0; + margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child); } &__first-row { @@ -14,15 +14,18 @@ } &__note { - margin-inline-start: var(--g-spacing-half); + margin-inline-start: var(--df-view-column-note-margin-inline-start, var(--g-spacing-half)); } &__second-row { & > .#{$ns}view-transparent { - margin-bottom: 6px; + margin-bottom: var( + --df-view-column-second-row-child-view-transperant-margin-bottom, + $df-offset-6 + ); &:last-child { - margin-bottom: 0; + margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child); } } } diff --git a/src/lib/kit/components/ViewLayouts/ViewRow/ViewRow.scss b/src/lib/kit/components/ViewLayouts/ViewRow/ViewRow.scss index 26eeaf2d..8f4ced13 100644 --- a/src/lib/kit/components/ViewLayouts/ViewRow/ViewRow.scss +++ b/src/lib/kit/components/ViewLayouts/ViewRow/ViewRow.scss @@ -2,50 +2,48 @@ @import '../../../styles/mixins.scss'; .#{$ns}view-row { - --_--left-width: 300px; - --_--left-max-width: 300px; - --_--left-min-width: 300px; - --_--right-width: 480px; - - width: 100%; + width: var(--df-view-row-width, 100%); display: flex; - margin-bottom: var(--g-spacing-5); + margin-bottom: var(--df-spacing-view, $df-spacing-view); &:last-child { - margin-bottom: var(--g-spacing-0); + margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child); } &__left { - width: var(--df-view-row-left-width, var(--_--left-width)); - max-width: var(--df-view-row-left-max-width, var(--_--left-max-width)); - min-width: var(--df-view-row-left-min-width, var(--_--left-min-width)); + width: var(--df-view-row-left-width, 300px); + max-width: var(--df-view-row-left-max-width, 300px); + min-width: var(--df-view-row-left-min-width, 300px); display: flex; align-items: baseline; overflow: hidden; } &__note { - margin-inline-start: var(--g-spacing-half); + margin-inline-start: var(--df-view-row-note-margin-inline-start, var(--g-spacing-half)); } &__dots { - min-width: 40px; + min-width: var(--df-view-row-dots-min-width, 40px); flex-grow: 1; - margin: var(--g-spacing-0) var(--g-spacing-half); + margin: var(--df-view-row-dots-margin, var(--g-spacing-0) var(--g-spacing-half)); border-bottom: 1px dotted var(--g-color-text-secondary); } &__right { - max-width: var(--df-view-row-right-width, var(--_--right-width)); + max-width: var(--df-view-row-right-width, 480px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; & > .#{$ns}view-transparent { - margin-bottom: $df-offset-6; + margin-bottom: var( + --df-view-row-right-child-view-transparent-margin-bottom, + $df-offset-6 + ); &:last-child { - margin-bottom: var(--g-spacing-0); + margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child); } } } diff --git a/src/lib/kit/components/ViewLayouts/ViewTableCell/ViewTableCell.scss b/src/lib/kit/components/ViewLayouts/ViewTableCell/ViewTableCell.scss index 02773bc4..937a3fd9 100644 --- a/src/lib/kit/components/ViewLayouts/ViewTableCell/ViewTableCell.scss +++ b/src/lib/kit/components/ViewLayouts/ViewTableCell/ViewTableCell.scss @@ -5,20 +5,23 @@ display: flex; &__inner { - max-width: 100%; + max-width: var(--df-view-table-cell-inner-max-width, 100%); display: flex; flex-direction: column; justify-content: center; & > .#{$ns}view-row:last-child { - margin-bottom: var(--g-spacing-0); + margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child); } & > .#{$ns}view-transparent { - margin-bottom: $df-offset-6; + margin-bottom: var( + --df-view-table-cell-inner-child-view-transparent-margin-bottom, + $df-offset-6 + ); &:last-child { - margin-bottom: var(--g-spacing-0); + margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child); } } } diff --git a/src/lib/kit/components/ViewLayouts/ViewTransparent/ViewTransparent.scss b/src/lib/kit/components/ViewLayouts/ViewTransparent/ViewTransparent.scss index f47ae6c1..d3d3b6fd 100644 --- a/src/lib/kit/components/ViewLayouts/ViewTransparent/ViewTransparent.scss +++ b/src/lib/kit/components/ViewLayouts/ViewTransparent/ViewTransparent.scss @@ -3,16 +3,16 @@ .#{$ns}view-transparent { display: flex; - margin-bottom: var(--g-spacing-5); + margin-bottom: var(--df-spacing-view, $df-spacing-view); &:last-child { - margin-bottom: var(--g-spacing-0); + margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child); } @include with-copy-button(); &__inner { - max-width: 100%; - width: 100%; + max-width: var(--df-view-transparent-inner-max-width, 100%); + width: var(--df-view-transparent-inner-width, 100%); } } diff --git a/src/lib/kit/components/Views/ArrayBaseView/ArrayBaseView.scss b/src/lib/kit/components/Views/ArrayBaseView/ArrayBaseView.scss index b935fed6..a4ea3abd 100644 --- a/src/lib/kit/components/Views/ArrayBaseView/ArrayBaseView.scss +++ b/src/lib/kit/components/Views/ArrayBaseView/ArrayBaseView.scss @@ -2,6 +2,6 @@ .#{$ns}array-base-view { &__item-prefix { - margin-bottom: $df-offset-6; + margin-bottom: var(--df-array-base-view-item-prefix-margin-bottom, $df-offset-6); } } diff --git a/src/lib/kit/components/Views/CheckboxGroupView/CheckboxGroupView.scss b/src/lib/kit/components/Views/CheckboxGroupView/CheckboxGroupView.scss index 9baf0b9a..b0757318 100644 --- a/src/lib/kit/components/Views/CheckboxGroupView/CheckboxGroupView.scss +++ b/src/lib/kit/components/Views/CheckboxGroupView/CheckboxGroupView.scss @@ -4,7 +4,7 @@ display: flex; & > *:not(:last-child) { - margin-right: $df-offset-6; + margin-right: var(--df-checkbox-group-view-child-margin-right, $df-offset-6); } &_vertical { @@ -12,8 +12,10 @@ align-items: flex-start; & > *:not(:last-child) { - margin-right: var(--g-spacing-0); - margin-bottom: $df-offset-6; + margin: var( + --df-checkbox-group-view-vertical-child-margin, + var(--g-spacing-0) var(--g-spacing-0) $df-offset-6 + ); } } @@ -22,14 +24,17 @@ } &__tooltip-container { - max-width: 100%; + max-width: var(--df-tooltip-container-max-width, $df-tooltip-container-max-width); overflow: hidden; text-overflow: ellipsis; display: block; - margin-bottom: $df-offset-6; + margin-bottom: var( + --df-tooltip-container-margin-bottom, + $df-tooltip-container-margin-bottom + ); &:last-child { - margin-bottom: var(--g-spacing-0); + margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child); } } } diff --git a/src/lib/kit/components/Views/MonacoInputView/MonacoBaseView.scss b/src/lib/kit/components/Views/MonacoInputView/MonacoBaseView.scss index 41aa3279..ccbb8511 100644 --- a/src/lib/kit/components/Views/MonacoInputView/MonacoBaseView.scss +++ b/src/lib/kit/components/Views/MonacoInputView/MonacoBaseView.scss @@ -1,8 +1,6 @@ @import '../../../styles/variables.scss'; .#{$ns}monaco-base-view { - --_--width: 550px; - border: 1px solid var(--g-color-line-generic); - width: var(--df-monaco-base-view-width, var(--_--width)); + width: var(--df-monaco-base-view-width, 550px); } diff --git a/src/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.scss b/src/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.scss index f226d24c..9f07fb03 100644 --- a/src/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.scss +++ b/src/lib/kit/components/Views/MonacoInputView/MonacoViewDialog.scss @@ -2,7 +2,10 @@ .#{$ns}monaco-view-dialog { .g-dialog-footer { - padding: $df-offset-10 var(--g-spacing-8) var(--g-spacing-8); + padding: var( + --df-monaco-view-dialog-footer-padding, + $df-offset-10 var(--g-spacing-8) var(--g-spacing-8) + ); } &__container { @@ -10,6 +13,6 @@ } &__dialog-header { - height: 48px; + height: var(--df-monaco-view-dialog-header-height, 48px); } } diff --git a/src/lib/kit/components/Views/MultiOneOfView/MultiOneOfView.scss b/src/lib/kit/components/Views/MultiOneOfView/MultiOneOfView.scss index f135abe5..b600ddec 100644 --- a/src/lib/kit/components/Views/MultiOneOfView/MultiOneOfView.scss +++ b/src/lib/kit/components/Views/MultiOneOfView/MultiOneOfView.scss @@ -6,29 +6,38 @@ } &__tooltip-container { - max-width: 100%; + max-width: var(--df-tooltip-container-max-width, $df-tooltip-container-max-width); overflow: hidden; text-overflow: ellipsis; display: block; - margin-bottom: $df-offset-6; + margin-bottom: var( + --df-tooltip-container-margin-bottom, + $df-tooltip-container-margin-bottom + ); &:last-child { - margin-bottom: var(--g-spacing-0); + margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child); } } &__content { &_multiple-values { & > .#{$ns}group-indent { - padding-top: var(--g-spacing-0); + padding-top: var( + --df-multi-oneof-view-content-multiple-values-child-padding-top, + var(--g-spacing-0) + ); } } &_flat { & > .#{$ns}group-indent { - margin: var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-5); + margin: var( + --df-multi-oneof-view-content-flat-child-margin, + var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-5) + ); border-left: none; - padding: var(--g-spacing-0); + padding: var(--df-multi-oneof-view-content-flat-child-padding, var(--g-spacing-0)); } } } diff --git a/src/lib/kit/components/Views/MultiSelectView/MultiSelectView.scss b/src/lib/kit/components/Views/MultiSelectView/MultiSelectView.scss index 39397d2f..1d1184f8 100644 --- a/src/lib/kit/components/Views/MultiSelectView/MultiSelectView.scss +++ b/src/lib/kit/components/Views/MultiSelectView/MultiSelectView.scss @@ -6,14 +6,17 @@ } &__tooltip-container { - max-width: 100%; + max-width: var(--df-tooltip-container-max-width, $df-tooltip-container-max-width); overflow: hidden; text-overflow: ellipsis; display: block; - margin-bottom: $df-offset-6; + margin-bottom: var( + --df-tooltip-container-margin-bottom, + $df-tooltip-container-margin-bottom + ); &:last-child { - margin-bottom: var(--g-spacing-0); + margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child); } } } diff --git a/src/lib/kit/components/Views/NumberWithScaleView/NumberWithScaleView.scss b/src/lib/kit/components/Views/NumberWithScaleView/NumberWithScaleView.scss index 4022d50d..26e869d2 100644 --- a/src/lib/kit/components/Views/NumberWithScaleView/NumberWithScaleView.scss +++ b/src/lib/kit/components/Views/NumberWithScaleView/NumberWithScaleView.scss @@ -11,10 +11,10 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - max-width: 100%; + max-width: var(--df-tooltip-container-max-width, $df-tooltip-container-max-width); } &__size { - margin-left: var(--g-spacing-half); + margin-left: var(--df-number-with-scale-view-size-margin-left, var(--g-spacing-half)); } } diff --git a/src/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.scss b/src/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.scss index 15e620bb..2959af1f 100644 --- a/src/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.scss +++ b/src/lib/kit/components/Views/ObjectBaseView/ObjectBaseView.scss @@ -7,11 +7,13 @@ & > div { flex: auto; - margin-right: var(--g-spacing-2); - margin-bottom: var(--g-spacing-0); + margin: var( + --df-object-base-view-content-inline-margin, + var(--g-spacing-0) var(--g-spacing-2) var(--g-spacing-0) var(--g-spacing-0) + ); &:last-child { - margin-right: var(--g-spacing-0); + margin-right: var(--df-spacing-last-child, $df-spacing-last-child); } } } @@ -19,7 +21,7 @@ &__delimiter { display: flex; - margin-right: var(--g-spacing-2); + margin-right: var(--df-object-base-view-delimiter-right, var(--g-spacing-2)); align-items: center; white-space: nowrap; } diff --git a/src/lib/kit/components/Views/OneOfView/OneOfView.scss b/src/lib/kit/components/Views/OneOfView/OneOfView.scss index 0ed7582e..2eb94e3c 100644 --- a/src/lib/kit/components/Views/OneOfView/OneOfView.scss +++ b/src/lib/kit/components/Views/OneOfView/OneOfView.scss @@ -2,18 +2,21 @@ .#{$ns}oneof-view { & > .#{$ns}group-indent { - margin-bottom: var(--g-spacing-5); + margin-bottom: var(--df-spacing-inputs-section, $df-spacing-inputs-section); } &:last-child > .#{$ns}group-indent { - margin-bottom: var(--g-spacing-0); + margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child); } &_flat { & > .#{$ns}group-indent { - margin: var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-5); + margin: var( + --df-oneof-view-flat-child-margin, + var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-5) + ); border-left: none; - padding: var(--g-spacing-0); + padding: var(--df-oneof-view-flat-child-padding, var(--g-spacing-0)); } } } diff --git a/src/lib/kit/components/Views/TableArrayView/TableArrayView.scss b/src/lib/kit/components/Views/TableArrayView/TableArrayView.scss index a6740883..cc803b4d 100644 --- a/src/lib/kit/components/Views/TableArrayView/TableArrayView.scss +++ b/src/lib/kit/components/Views/TableArrayView/TableArrayView.scss @@ -1,23 +1,20 @@ @import '../../../styles/variables'; .#{$ns}table-array-view { - --_--cell-min-width: 150px; - --_--cell-max-width: 150px; - &__table { - margin-bottom: $df-offset-10; + margin-bottom: var(--df-table-array-view-table-margin-bottom, $df-offset-10); } &__cell { - max-width: var(--df-table-array-view-cell-min-width, var(--_--cell-min-width)); - min-width: var(--df-table-array-view-cell-max-width, var(--_--cell-max-width)); + max-width: var(--df-table-array-view-cell-min-width, 150px); + min-width: var(--df-table-array-view-cell-max-width, 150px); &_arr, &_obj { max-width: unset; & > .simple-vertical-accordeon { - margin-bottom: var(--g-spacing-0); + margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child); } } diff --git a/src/lib/kit/components/Views/TextAreaView/TextAreaView.scss b/src/lib/kit/components/Views/TextAreaView/TextAreaView.scss index b8749704..2e744bce 100644 --- a/src/lib/kit/components/Views/TextAreaView/TextAreaView.scss +++ b/src/lib/kit/components/Views/TextAreaView/TextAreaView.scss @@ -8,7 +8,7 @@ } &__chevron { - margin: $df-offset-3; + margin: var(--df-text-area-view-chevron-margin, $df-offset-3); &_open { transform: rotate(180deg); diff --git a/src/lib/kit/hooks/useOneOf/useOneOf.scss b/src/lib/kit/hooks/useOneOf/useOneOf.scss index 908edd73..a741c739 100644 --- a/src/lib/kit/hooks/useOneOf/useOneOf.scss +++ b/src/lib/kit/hooks/useOneOf/useOneOf.scss @@ -12,8 +12,8 @@ &_card { & + .#{$ns}group-indent { & > .#{$ns}use-search:not(.#{$ns}group-indent) { - padding-top: var(--g-spacing-0); - margin-top: $df-offset-15; + padding-top: var(--df-use-oneof-card-child-padding, var(--g-spacing-0)); + margin-top: var(--df-spacing-inputs, $df-spacing-inputs); } } } @@ -23,16 +23,16 @@ display: flex; & > * { - margin-right: var(--g-spacing-2); + margin-right: var(--df-use-oneof-card-margin-right, var(--g-spacing-2)); } & > :last-child { - margin-right: var(--g-spacing-0); + margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child); } } &__checkbox { - height: 28px; + height: var(--df-use-oneof-checkbox-height, $df-checkbox-height); display: flex; align-items: center; } diff --git a/src/lib/kit/styles/variables.scss b/src/lib/kit/styles/variables.scss index d8386845..1bc158c3 100644 --- a/src/lib/kit/styles/variables.scss +++ b/src/lib/kit/styles/variables.scss @@ -19,7 +19,8 @@ $ns: 'df-'; --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px } */ -//DOUNT use TODO replace with spacing from gravity + +//TODO List of old variables, do not use! There will be different ones soon $df-offset-1: 1px; $df-offset-3: 3px; $df-offset-5: 5px; @@ -30,9 +31,25 @@ $df-offset-11: 11px; $df-offset-13: 13px; $df-offset-15: 15px; +//Spacing variables +$df-spacing-inputs: $df-offset-15; //TODO --g-spacing-4 +$df-spacing-inputs-section: var(--g-spacing-5); // 20px +$df-spacing-last-child: var(--g-spacing-0); // 0px +$df-spacing-view: var(--g-spacing-5); // 20px + +//Remove button margin +$df-remove-button-margin-left: $df-offset-5; //TODO --g-spacing + /* Border-radius */ $df-border-radius-xs: 5px; +// Tooltip container +$df-tooltip-container-max-width: 100%; +$df-tooltip-container-margin-bottom: 6px; + +// Checbox height +$df-checkbox-height: 28px; + // Fonts $defaultFontFamily: var(--g-text-body-font-family); $titleFontFamily: 'YS Display', helveticaneue, arial, helvetica, sans-serif; // stylelint-disable-line diff --git a/src/stories/DocsStyles.mdx b/src/stories/DocsStyles.mdx index 7a2e2d1c..6ba62601 100644 --- a/src/stories/DocsStyles.mdx +++ b/src/stories/DocsStyles.mdx @@ -1,327 +1,7 @@ -import {Meta} from '@storybook/addon-docs'; +import {Meta, Markdown} from '@storybook/addon-docs'; - - -# Styles - -This section of the documentation lists SCSS variables for customizing component styles. - -## Layouts - -### Row, RowVerbose - - - - - - - - - - - - - - - - - - - - - - -
VariableDefault ValueDescription
`--df-row-width``500px`Width of the row
`--df-row-max-width``500px`Maximum width of the row
`--df-row-left-width``180px`Width of the left part (field name and description)
- -### Section, Section2, SectionWithSubtitle, SectionWithSubtitle2, Group, Group2 - - - - - - - - - - - - -
VariableDefault ValueDescription
`--df-section-title-max-width``533px`Maximum width of the title
- -### Transparent - - - - - - - - - - - - -
VariableDefault ValueDescription
`--df-transparent-array-item-max-width``338px`Length for an array item
- -## ViewLayouts - -### ViewRow - - - - - - - - - - - - - - - - - - - - - - - - - - - -
VariableDefault ValueDescription
`--df-view-row-left-width``300px`Width of the left part (title and description)
`--df-view-row-left-max-width``300px `Maximum width of the left part (title and description)
`--df-view-row-left-min-width``300px`Minimum width of the left part (title and description)
`--df-view-row-right-width``480px`Width of the value display
- -## Inputs - -### FileInput - - - - - - - - - - - - -
VariableDefault ValueDescription
`--df-file-input-file-name-max-width``160px`Width of the file name
- -### MultiOneof, MultiOneofFlat - - - - - - - - - - - - -
VariableDefault ValueDescription
`--df-multi-oneof-max-width-select``305px`Width of the selector
- -### MultiSelect - - - - - - - - - - - - -
VariableDefault ValueDescription
`--df-multi-select-max-width``305px `Width of the selector
- -### Select - - - - - - - - - - - - -
VariableDefault ValueDescription
`--df-select-max-width``305px`Width of the selector
- -### TableArray - - - - - - - - - - - - - - - - - -
VariableDefault ValueDescription
`--df-table-cell-max-width``150px`Maximum width of the input in the row
`--df-table-cell-min-width``150px`Minimum width of the input in the row
- -### Object-inline +import Styles from '../../docs/styles.md?raw'; - - - - - - - - - - - -
VariableDefault ValueDescription
`--df-object-base-inline-width``150px`Width of the child input
- -## Views - -### MonacoView - - - - - - - - - - - - -
VariableDefault ValueDescription
`--df-monaco-base-view-width``550px`Width of Monaco editor
- -### TableArrayView - - - - - - - - - - - - - - - - - -
VariableDefault ValueDescription
`--df-table-array-view-cell-min-width``150px`Minimum width of the input in the row
`--df-table-array-view-cell-max-width``150px`Maximum width of the input in the row
- -## Components - -### Card - - - - - - - - - - - - -
VariableDefault ValueDescription
`--df-card-title-max-width``533px`Maximum width of the title
- -### SimpleVerticalAccordeon - - - - - - - - - - - - -
VariableDefault ValueDescription
`--df-simple-vertical-accordion-header-inner-max-width``533px`Maximum length of the header
- -### TogglerCard - - - - - - - - - - - - -
VariableDefault ValueDescription
`--df-toggler-card-width``254px`Width of the card
- -## How to Use the CSS API - -### How to Adjust Spacing - -Spacing adjustments are based on the `--g-spacing` variables from `@gravity-ui/uikit`. - -Here is an example of SCSS variables: - -```scss -@mixin variables { - --g-spacing-base: 4px; - - --g-spacing-0: calc(var(--g-spacing-base) * 0); // 0px - --g-spacing-half: calc(var(--g-spacing-base) * 0.5); // 2px - --g-spacing-1: var(--g-spacing-base); // 4px - --g-spacing-2: calc(var(--g-spacing-base) * 2); // 8px - --g-spacing-3: calc(var(--g-spacing-base) * 3); // 12px - --g-spacing-4: calc(var(--g-spacing-base) * 4); // 16px - --g-spacing-5: calc(var(--g-spacing-base) * 5); // 20px - --g-spacing-6: calc(var(--g-spacing-base) * 6); // 24px - --g-spacing-7: calc(var(--g-spacing-base) * 7); // 28px - --g-spacing-8: calc(var(--g-spacing-base) * 8); // 32px - --g-spacing-9: calc(var(--g-spacing-base) * 9); // 36px - --g-spacing-10: calc(var(--g-spacing-base) * 10); // 40px -} -``` - -### Examples of Overriding SCSS Variables - -#### 1. Including DynamicField or DynamicView - -In your component file: - -```tsx -
- -
-``` - -#### 2. In a Nearby SCSS File or a Global Stylesheet - -```scss -.my-component { - --df-row-width: 800px; - --df-row-max-width: 800px; -} -``` + -This will adjust the `--df-row-width` and `--df-row-max-width` variables for the `DynamicField` component within MyComponent, changing the width to `800px`. +{Styles} From 51f4b3a463b77e82203d65ea4c47bac1988aec73 Mon Sep 17 00:00:00 2001 From: NasgulNexus Date: Tue, 24 Dec 2024 13:34:25 +0100 Subject: [PATCH 3/3] docs: add link doc styles --- src/stories/Readme.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/stories/Readme.mdx b/src/stories/Readme.mdx index 7e49889a..0032b0aa 100644 --- a/src/stories/Readme.mdx +++ b/src/stories/Readme.mdx @@ -48,6 +48,7 @@ configure({lang: Lang.Ru}); - [Custom input](?path=/docs/docs-custom-input--docs) - [Validators](?path=/docs/docs-validators--docs) - [Mutators](?path=/docs/docs-mutators--docs) + - [Styles](?path=/docs/docs-styles--docs) ## Development