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 c9296735..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: 15px; + margin-bottom: var(--df-spacing-inputs, $df-spacing-inputs); &_hidden { display: none; } &:last-child { - margin-bottom: 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 3fa2d131..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: 5px; + 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: 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: 16px; + 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: 12px; + 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: 5px; + margin-right: var(--df-accordeon-card-interal-actions-margin-right, $df-offset-5); } &__toggle-icon_open { @@ -99,7 +100,7 @@ &__body { display: none; - padding: 16px; + 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 1ca8a7aa..43b88ab4 100644 --- a/src/lib/kit/components/Card/Card.scss +++ b/src/lib/kit/components/Card/Card.scss @@ -1,14 +1,14 @@ @import '../../styles/variables.scss'; .#{$ns}card { - margin-bottom: 20px; + 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); } .#{$ns}row { - width: 100%; + width: var(--df-card-row-width, 100%); max-width: unset; .#{$ns}select, @@ -20,7 +20,7 @@ .#{$ns}monaco-input, .#{$ns}monaco-base-view { - width: 100%; + width: var(--df-card-monaco-input-width, 100%); } &_empty-body { @@ -41,7 +41,7 @@ display: flex; justify-content: space-between; align-items: center; - padding: 20px; + padding: var(--df-card-header-padding, var(--g-spacing-5)); &_interactive { cursor: pointer; @@ -59,21 +59,21 @@ align-items: center; & > * { - margin-left: 10px; + margin-left: var(--df-card-header-right-child-margin-left, $df-offset-10); } } &__title { - max-width: 533px; - 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: 5px; + margin-left: var(--df-card-note-margin-left, $df-offset-5); .gc-help-popover { display: flex; @@ -92,7 +92,10 @@ &__body { display: none; - padding: 0 20px 20px; + 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 7814c5f7..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: 11px; - padding-left: $normalOffset; - margin-top: -11px; - margin-bottom: 20px; - margin-left: 5px; + 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: 0; + margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child); } &:empty { @@ -17,6 +20,9 @@ } & > .#{$ns}simple-vertical-accordeon_view { - margin-top: -10px; + 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 58837a6d..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: 15px; + 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: -7px; - margin-bottom: 8px; + margin: var( + --df-array-base-item-prefix-margin, + -$df-offset-7 var(--g-spacing-0) var(--g-spacing-2) + ); } &__add-button { &_right { - margin-left: 4px; + 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 33783359..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: 6px; + margin-right: var(--df-checkbox-group-child-margin-right, $df-offset-6); } &_vertical { flex-direction: column; align-items: flex-start; - margin-top: 8px; + margin-top: var(--df-checkbox-group-vertical-margin-top, var(--g-spacing-2)); height: auto; & > *:not(:last-child) { - margin-right: 0px; - margin-bottom: 6px; + 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 0d1a380b..8a5eef7c 100644 --- a/src/lib/kit/components/Inputs/FileInput/FileInput.scss +++ b/src/lib/kit/components/Inputs/FileInput/FileInput.scss @@ -9,7 +9,7 @@ &__file-name { display: block; - margin: auto 10px; - max-width: 160px; + 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 c59f077d..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: 15px; + 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 b7f173b6..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: 10px 32px 32px; + 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 462f5526..c3b37cb0 100644 --- a/src/lib/kit/components/Inputs/MultiOneOf/MultiOneOf.scss +++ b/src/lib/kit/components/Inputs/MultiOneOf/MultiOneOf.scss @@ -2,18 +2,18 @@ .#{$ns}multi-oneof { &__select { - max-width: 305px; + max-width: var(--df-multi-oneof-select-max-width, 305px); } &__content { &_flat { & > .#{$ns}group-indent { - margin: 0; + margin: var(--df-multi-oneof-content-flat-margin, var(--g-spacing-0)); border-left: none; - padding: 0; + padding: var(--df-multi-oneof-content-flat-padding, var(--g-spacing-0)); & > .#{$ns}use-search { - margin-top: 15px; + 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 79c93b70..cc4a1696 100644 --- a/src/lib/kit/components/Inputs/MultiSelect/MultiSelect.scss +++ b/src/lib/kit/components/Inputs/MultiSelect/MultiSelect.scss @@ -1,7 +1,7 @@ @import '../../../styles/variables'; .#{$ns}multi-select { - max-width: 305px; + 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 89c45bcf..1650c98a 100644 --- a/src/lib/kit/components/Inputs/NumberWithScale/NumberWithScale.scss +++ b/src/lib/kit/components/Inputs/NumberWithScale/NumberWithScale.scss @@ -6,7 +6,7 @@ } &__select { - max-width: 102px; - margin-left: 5px; + 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 5855a0aa..b193cc67 100644 --- a/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.scss +++ b/src/lib/kit/components/Inputs/ObjectBase/ObjectBase.scss @@ -6,21 +6,23 @@ display: flex; & > .#{$ns}use-search { - width: 150px; - margin-bottom: 0; - margin-right: 8px; + 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: 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: 8px; + 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 87eb31ba..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: 0; + margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child); } } @@ -15,11 +15,14 @@ all: unset; & > .#{$ns}use-search { - padding-top: 11px; - padding-left: $normalOffset; - margin-top: 4px; - margin-bottom: 20px; - margin-left: 5px; + 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: 0; + margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child); } & > .#{$ns}simple-vertical-accordeon_view { - margin-top: -10px; + margin-top: var( + --df-oneof-base-simple-vertical-accordeon-margin-top, + -$df-offset-10 + ); } } } @@ -39,12 +45,12 @@ &_flat { & > .#{$ns}group-indent { - margin: 0; + margin: var(--df-oneof-flat-margin, var(--g-spacing-0)); border-left: none; - padding: 0; + padding: var(--df-oneof-flat-padding, var(--g-spacing-0)); & > .#{$ns}use-search { - margin-top: 15px; + 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 d6a6884c..d67b54c6 100644 --- a/src/lib/kit/components/Inputs/Select/Select.scss +++ b/src/lib/kit/components/Inputs/Select/Select.scss @@ -2,7 +2,7 @@ .#{$ns}select { // TODO: Remove this styles - max-width: 305px; + 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 55bdba55..45833a67 100644 --- a/src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.scss +++ b/src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.scss @@ -2,7 +2,7 @@ .#{$ns}table-array { &__table { - margin-bottom: 10px; + margin-bottom: var(--df-table-array-table-margin-bottom, $df-offset-10); .g-table__cell { border-bottom: 0px transparent; @@ -27,13 +27,13 @@ .g-select-control, .yc-select, .g-select { - max-width: 150px; - min-width: 150px; + max-width: var(--df-table-array-cell-max-width, 150px); + min-width: var(--df-table-array-cell-min-width, 150px); } &_arr, &_obj { - padding-left: 3px; + padding-left: var(--df-table-array-cell-obj-padding-left, $df-offset-3); .yc-text-input, .g-text-input, @@ -45,7 +45,10 @@ } & > .simple-vertical-accordeon { - margin-bottom: 0; + margin-bottom: var( + --df-table-array-cell-obj-simple-vertical-accordeon-margin-bottom, + var(--g-spacing-0) + ); } } @@ -56,6 +59,6 @@ } &__idx { - padding-top: 6px; + 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 7453eff3..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: 4px; + margin-right: var(--df-text-content-icon-margin-right, var(--g-spacing-1)); } &__wrapper { @@ -22,6 +22,6 @@ } &__separator { - margin: 0 4px; + 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 4979f768..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: 32px; + 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 fd20b220..a29ec627 100644 --- a/src/lib/kit/components/Layouts/Row/Row.scss +++ b/src/lib/kit/components/Layouts/Row/Row.scss @@ -2,17 +2,17 @@ .#{$ns}row { display: flex; - width: 500px; - max-width: 500px; - margin-bottom: 15px; + 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: 0; + margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child); } &__left { - width: 180px; - 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; @@ -33,7 +33,7 @@ &__title { word-break: break-word; - margin-right: 3px; + margin-right: var(--df-row-title-margin-right, $df-offset-3); &_required { &::after { @@ -44,12 +44,12 @@ } &__note { - padding-right: 16px; + padding-right: var(--df-row-note-padding-right, var(--g-spacing-4)); position: relative; &-inner { position: absolute; - margin-top: 1px; + margin-top: var(--df-row-note-inner-margin-top, $df-offset-1); .g-help-popover { display: flex; @@ -65,7 +65,7 @@ display: flex; flex-direction: column; flex-grow: 1; - margin-left: 15px; + margin-left: var(--df-row-right-margin-left, $df-offset-15); &-inner { display: flex; @@ -74,13 +74,13 @@ } &__description { - margin-top: 10px; + 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: 5px; + 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 c9d23d6f..4d076292 100644 --- a/src/lib/kit/components/Layouts/Section/Section.scss +++ b/src/lib/kit/components/Layouts/Section/Section.scss @@ -3,30 +3,30 @@ $block: '.#{$ns}section'; #{$block} { - margin-bottom: $normalOffset; + margin-bottom: var(--df-spacing-inputs-section, $df-spacing-inputs-section); $block: &; &:last-child { - margin-bottom: 0; + margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child); } &__header { display: flex; align-items: center; - margin-bottom: $normalOffset; + 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: 533px; + max-width: var(--df-section-title-max-width, 533px); } &__title-popover { @@ -39,7 +39,7 @@ $block: '.#{$ns}section'; } &__note { - margin-left: 5px; + margin-left: var(--df-section-note-margin-left, $df-offset-5); .g-help-popover { display: flex; @@ -51,10 +51,10 @@ $block: '.#{$ns}section'; } &__description { - margin-top: 4px; + margin-top: var(--df-section-description-margin-top, var(--g-spacing-1)); } &__remove-button { - margin-left: 5px; + 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 c38f4a6d..1c3badcd 100644 --- a/src/lib/kit/components/Layouts/Transparent/Transparent.scss +++ b/src/lib/kit/components/Layouts/Transparent/Transparent.scss @@ -2,14 +2,14 @@ .#{$ns}transparent { display: flex; - 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); } &_array-item { - max-width: 338px; + max-width: var(--df-transparent-array-item-max-width, 338px); } &_without-max-width { @@ -21,6 +21,6 @@ } &__remove-button { - margin-left: 5px; + 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 0716c131..eceaf09e 100644 --- a/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss +++ b/src/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.scss @@ -3,15 +3,15 @@ $animationDuration: 0.3s; .#{$ns}simple-vertical-accordeon { - margin-bottom: $normalOffset; + 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: $normalOffset; - margin-left: 5px; + 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); } @@ -20,8 +20,11 @@ $animationDuration: 0.3s; align-items: center; &-inner { - margin-left: -13px; - max-width: 533px; + 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 { @@ -30,7 +33,7 @@ $animationDuration: 0.3s; } &__tooltip { - margin: 0px 5px; + margin: var(--df-simple-vertical-accordeon-tooltip-margin, var(--g-spacing-0) $df-offset-5); } &__chevron { @@ -42,8 +45,8 @@ $animationDuration: 0.3s; } &__body { - margin-top: 4px; - padding-top: $smallOffset - 4px; + 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 cc760ca6..77a9a189 100644 --- a/src/lib/kit/components/TogglerCard/TogglerCard.scss +++ b/src/lib/kit/components/TogglerCard/TogglerCard.scss @@ -1,9 +1,9 @@ @import '../../styles/variables.scss'; .#{$ns}toggler-card { - width: 254px; - padding: 10px; - 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; @@ -12,10 +12,12 @@ } &__text { - margin-top: 12px; + 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: 15px; - 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 5a00f7bb..8f4ced13 100644 --- a/src/lib/kit/components/ViewLayouts/ViewRow/ViewRow.scss +++ b/src/lib/kit/components/ViewLayouts/ViewRow/ViewRow.scss @@ -2,45 +2,48 @@ @import '../../../styles/mixins.scss'; .#{$ns}view-row { - width: 100%; + width: var(--df-view-row-width, 100%); display: flex; - 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); } &__left { - width: 300px; - max-width: 300px; - min-width: 300px; + 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: 0 2px; + 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: 480px; + max-width: var(--df-view-row-right-width, 480px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; & > .#{$ns}view-transparent { - margin-bottom: 6px; + margin-bottom: var( + --df-view-row-right-child-view-transparent-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/ViewTableCell/ViewTableCell.scss b/src/lib/kit/components/ViewLayouts/ViewTableCell/ViewTableCell.scss index e3c89176..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: 0; + margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child); } & > .#{$ns}view-transparent { - margin-bottom: 6px; + margin-bottom: var( + --df-view-table-cell-inner-child-view-transparent-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/ViewTransparent/ViewTransparent.scss b/src/lib/kit/components/ViewLayouts/ViewTransparent/ViewTransparent.scss index 1d933074..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: 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); } @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 ce456227..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: 6px; + 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 be579464..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: 6px; + 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: 0px; - margin-bottom: 6px; + 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: 6px; + margin-bottom: var( + --df-tooltip-container-margin-bottom, + $df-tooltip-container-margin-bottom + ); &:last-child { - margin-bottom: 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 71a1e1a1..ccbb8511 100644 --- a/src/lib/kit/components/Views/MonacoInputView/MonacoBaseView.scss +++ b/src/lib/kit/components/Views/MonacoInputView/MonacoBaseView.scss @@ -2,5 +2,5 @@ .#{$ns}monaco-base-view { border: 1px solid var(--g-color-line-generic); - width: 550px; + 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 d4ec447c..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: 10px 32px 32px; + 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 01432861..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: 6px; + margin-bottom: var( + --df-tooltip-container-margin-bottom, + $df-tooltip-container-margin-bottom + ); &:last-child { - margin-bottom: 0; + margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child); } } &__content { &_multiple-values { & > .#{$ns}group-indent { - padding-top: 0px; + padding-top: var( + --df-multi-oneof-view-content-multiple-values-child-padding-top, + var(--g-spacing-0) + ); } } &_flat { & > .#{$ns}group-indent { - margin: 0 0 20px; + 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: 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 44acf312..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: 6px; + margin-bottom: var( + --df-tooltip-container-margin-bottom, + $df-tooltip-container-margin-bottom + ); &:last-child { - margin-bottom: 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 f1341241..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: 2px; + 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 cd55ee8b..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: 8px; - margin-bottom: 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: 0; + margin-right: var(--df-spacing-last-child, $df-spacing-last-child); } } } @@ -19,7 +21,7 @@ &__delimiter { display: flex; - margin-right: 8px; + 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 3bd813ac..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: 20px; + margin-bottom: var(--df-spacing-inputs-section, $df-spacing-inputs-section); } &:last-child > .#{$ns}group-indent { - margin-bottom: 0; + margin-bottom: var(--df-spacing-last-child, $df-spacing-last-child); } &_flat { & > .#{$ns}group-indent { - margin: 0 0 20px; + margin: var( + --df-oneof-view-flat-child-margin, + var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-5) + ); border-left: none; - padding: 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 01ef24ee..cc803b4d 100644 --- a/src/lib/kit/components/Views/TableArrayView/TableArrayView.scss +++ b/src/lib/kit/components/Views/TableArrayView/TableArrayView.scss @@ -2,19 +2,19 @@ .#{$ns}table-array-view { &__table { - margin-bottom: 10px; + margin-bottom: var(--df-table-array-view-table-margin-bottom, $df-offset-10); } &__cell { - max-width: 150px; - min-width: 150px; + 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: 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 f18e7019..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: 3px; + 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 c0f4e9eb..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: 0px; - margin-top: 15px; + 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: 8px; + margin-right: var(--df-use-oneof-card-margin-right, var(--g-spacing-2)); } & > :last-child { - margin-right: 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 f9264ec1..1bc158c3 100644 --- a/src/lib/kit/styles/variables.scss +++ b/src/lib/kit/styles/variables.scss @@ -1,27 +1,54 @@ $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; - -// Layers -$primaryLayoutLayer: 100; -$secondaryLayoutLayer: 50; -$notificationLayer: 30000; // to be higher than modal overlay +//Spasing use from @gravity-uikit +/* +@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 +} +*/ + +//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; +$df-offset-6: 6px; +$df-offset-7: 7px; +$df-offset-10: 10px; +$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); diff --git a/src/stories/DocsStyles.mdx b/src/stories/DocsStyles.mdx new file mode 100644 index 00000000..6ba62601 --- /dev/null +++ b/src/stories/DocsStyles.mdx @@ -0,0 +1,7 @@ +import {Meta, Markdown} from '@storybook/addon-docs'; + +import Styles from '../../docs/styles.md?raw'; + + + +{Styles} 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