feat: css api

.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',

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);
     }
 }

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,15 +23,15 @@
 
     .#{$ns}monaco-input,
     .#{$ns}monaco-base-view {
-        width: 100%;
+        width: var(--df-accordeon-card-monaco-input-width, 100%);
     }
 
     &:hover {
         box-shadow: 0 3px 10px var(--g-color-sfx-shadow);
     }
 
     &: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;

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;

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);
     }

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));
 }

src/lib/kit/components/GroupIndent/GroupIndent.scss

@@ -1,22 +1,28 @@
 @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 {
         display: none;
     }
 
     & > .#{$ns}simple-vertical-accordeon_view {
-        margin-top: -10px;
+        margin-top: var(
+            --df-group-indent-simple-vertical-accordeon-view-margin-top,
+            -$df-offset-10
+        );
     }
 }

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));
         }
     }
 }

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

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
+            );
         }
     }
 }

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%);
 }

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);
     }
 }

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);
 }

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

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);
         }
     }
 }

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;

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;