@gravity-ui/dynamic-forms 4.15.0 → 4.16.0

package/build/esm/lib/kit/components/Layouts/Column/Column.css

@@ -1,11 +1,30 @@
+/*
+@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
+}
+*/
+/* Border-radius */
 .df-column {
-  margin-bottom: 15px;
+  margin-bottom: var(--df-spacing-inputs, 15px);
 }
 .df-column:last-child {
-  margin-bottom: 0;
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-column__first-row {
-  min-height: 28px;
+  min-height: var(--df-column-first-row-min-height, 28px);
   display: flex;
   margin-bottom: auto;
   flex-direction: column;
@@ -23,7 +42,7 @@
 }
 .df-column__title {
   word-break: break-word;
-  margin-right: 3px;
+  margin-right: var(--df-column-title-margin-right, 3px);
 }
 .df-column__title_required::after {
   content: "*";
@@ -34,7 +53,7 @@
 }
 .df-column__note-inner {
   position: absolute;
-  margin-top: 1px;
+  margin-top: var(--df-column-note-inner-margin-top, 1px);
 }
 .df-column__note-inner .g-help-popover {
   display: flex;
@@ -52,7 +71,7 @@
   justify-content: space-around;
 }
 .df-column__remove-button {
-  margin-left: 5px;
+  margin-left: var(--df-remove-button-margin-left, 5px);
 }
 .df-column__required-mark {
   color: var(--g-color-text-danger);

package/build/esm/lib/kit/components/Layouts/Row/Row.css

@@ -1,15 +1,34 @@
+/*
+@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
+}
+*/
+/* Border-radius */
 .df-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, 15px);
 }
 .df-row:last-child {
-  margin-bottom: 0;
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-row__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;
@@ -27,19 +46,19 @@
 }
 .df-row__title {
   word-break: break-word;
-  margin-right: 3px;
+  margin-right: var(--df-row-title-margin-right, 3px);
 }
 .df-row__title_required::after {
   content: "*";
   color: var(--g-color-text-danger);
 }
 .df-row__note {
-  padding-right: 16px;
+  padding-right: var(--df-row-note-padding-right, var(--g-spacing-4));
   position: relative;
 }
 .df-row__note-inner {
   position: absolute;
-  margin-top: 1px;
+  margin-top: var(--df-row-note-inner-margin-top, 1px);
 }
 .df-row__note-inner .g-help-popover {
   display: flex;
@@ -51,19 +70,19 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  margin-left: 15px;
+  margin-left: var(--df-row-right-margin-left, 15px);
 }
 .df-row__right-inner {
   display: flex;
   justify-content: space-around;
 }
 .df-row__description {
-  margin-top: 10px;
+  margin-top: var(--df-row-description-margin-top, 10px);
   color: var(--g-color-text-secondary);
   word-break: break-word;
 }
 .df-row__remove-button {
-  margin-left: 5px;
+  margin-left: var(--df-remove-button-margin-left, 5px);
 }
 .df-row__required-mark {
   color: var(--g-color-text-danger);

package/build/esm/lib/kit/components/Layouts/Section/Section.css

@@ -1,22 +1,41 @@
+/*
+@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
+}
+*/
+/* Border-radius */
 .df-section {
-  margin-bottom: 20px;
+  margin-bottom: var(--df-spacing-inputs-section, var(--g-spacing-5));
 }
 .df-section:last-child {
-  margin-bottom: 0;
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-section__header {
   display: flex;
   align-items: center;
-  margin-bottom: 20px;
+  margin-bottom: var(--df-section-header-margin-bottom, var(--g-spacing-5));
 }
 .df-section__header_size_s {
-  height: 18px;
+  height: var(--df-section-header-size-s, 18px);
 }
 .df-section__header_size_m {
-  height: 20px;
+  height: var(--df-section-header-size-m, 20px);
 }
 .df-section__title {
-  max-width: 533px;
+  max-width: var(--df-section-title-max-width, 533px);
 }
 .df-section__title-popover {
   display: flex;
@@ -26,7 +45,7 @@
   display: flex;
 }
 .df-section__note {
-  margin-left: 5px;
+  margin-left: var(--df-section-note-margin-left, 5px);
 }
 .df-section__note .g-help-popover {
   display: flex;
@@ -35,8 +54,8 @@
   display: flex;
 }
 .df-section__description {
-  margin-top: 4px;
+  margin-top: var(--df-section-description-margin-top, var(--g-spacing-1));
 }
 .df-section__remove-button {
-  margin-left: 5px;
+  margin-left: var(--df-remove-button-margin-left, 5px);
 }

package/build/esm/lib/kit/components/Layouts/Transparent/Transparent.css

@@ -1,12 +1,31 @@
+/*
+@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
+}
+*/
+/* Border-radius */
 .df-transparent {
   display: flex;
-  margin-bottom: 15px;
+  margin-bottom: var(--df-spacing-inputs, 15px);
 }
 .df-transparent:last-child {
-  margin-bottom: 0;
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-transparent_array-item {
-  max-width: 338px;
+  max-width: var(--df-transparent-array-item-max-width, 338px);
 }
 .df-transparent_without-max-width {
   max-width: unset;
@@ -15,5 +34,5 @@
   width: auto;
 }
 .df-transparent__remove-button {
-  margin-left: 5px;
+  margin-left: var(--df-remove-button-margin-left, 5px);
 }

package/build/esm/lib/kit/components/LongValue/LongValue.css

@@ -1,5 +1,24 @@
+/*
+@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
+}
+*/
+/* Border-radius */
 .df-long-value {
-  max-width: 100%;
+  max-width: var(--df-long-value-max-width, 100%);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

package/build/esm/lib/kit/components/SimpleVerticalAccordeon/SimpleVerticalAccordeon.css

@@ -1,12 +1,31 @@
+/*
+@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
+}
+*/
+/* Border-radius */
 .df-simple-vertical-accordeon {
-  margin-bottom: 20px;
+  margin-bottom: var(--df-spacing-inputs-section, var(--g-spacing-5));
 }
 .df-simple-vertical-accordeon:last-child {
-  margin-bottom: 0;
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-simple-vertical-accordeon_branch .df-simple-vertical-accordeon__body {
-  padding-left: 20px;
-  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, 5px);
   border-left: 1px solid var(--g-color-line-generic-accent);
 }
 .df-simple-vertical-accordeon__header {
@@ -14,14 +33,14 @@
   align-items: center;
 }
 .df-simple-vertical-accordeon__header-inner {
-  margin-left: -13px;
-  max-width: 533px;
+  margin-left: var(--df-simple-vertical-accordeon-header-inner-margin-left, -13px);
+  max-width: var(--df-simple-vertical-accordeon-header-inner-max-width, 533px);
 }
 .df-simple-vertical-accordeon__header .g-popover__handler {
   display: flex;
 }
 .df-simple-vertical-accordeon__tooltip {
-  margin: 0px 5px;
+  margin: var(--df-simple-vertical-accordeon-tooltip-margin, var(--g-spacing-0) 5px);
 }
 .df-simple-vertical-accordeon__chevron {
   transform: rotate(-90deg);
@@ -30,8 +49,8 @@
   transform: none;
 }
 .df-simple-vertical-accordeon__body {
-  margin-top: 4px;
-  padding-top: 6px;
+  margin-top: var(--df-simple-vertical-accordeon-body-margin-top, var(--g-spacing-1));
+  padding-top: var(--df-simple-vertical-accordeon-body-padding-top, 6px);
 }
 .df-simple-vertical-accordeon__body_hidden {
   display: none;

package/build/esm/lib/kit/components/TogglerCard/TogglerCard.css

@@ -1,7 +1,26 @@
+/*
+@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
+}
+*/
+/* Border-radius */
 .df-toggler-card {
-  width: 254px;
-  padding: 10px;
-  height: 88px;
+  width: var(--df-toggler-card-width, 254px);
+  padding: var(--df-toggler-card-padding, 6px);
+  height: var(--df-toggler-card-height, 88px);
 }
 .df-toggler-card__header {
   display: flex;
@@ -9,10 +28,9 @@
   align-items: baseline;
 }
 .df-toggler-card__text {
-  margin-top: 12px;
+  margin: var(--df-toggler-card-text-margin, var(--g-spacing-3) 15px 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;
 }

package/build/esm/lib/kit/components/ViewLayouts/ViewColumn/ViewColumn.css

@@ -1,21 +1,59 @@
+/*
+@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
+}
+*/
+/* Border-radius */
+/*
+@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
+}
+*/
+/* Border-radius */
 .df-view-column {
-  margin-bottom: 20px;
+  margin-bottom: var(--df-spacing-view, var(--g-spacing-5));
 }
 .df-view-column:last-child {
-  margin-bottom: 0;
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-view-column__first-row {
   display: flex;
   align-items: baseline;
 }
 .df-view-column__note {
-  margin-inline-start: var(--g-spacing-half);
+  margin-inline-start: var(--df-view-column-note-margin-inline-start, var(--g-spacing-half));
 }
 .df-view-column__second-row > .df-view-transparent {
-  margin-bottom: 6px;
+  margin-bottom: var(--df-view-column-second-row-child-view-transperant-margin-bottom, 6px);
 }
 .df-view-column__second-row > .df-view-transparent:last-child {
-  margin-bottom: 0;
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-view-column:hover > .df-copy-button {
   display: block;

package/build/esm/lib/kit/components/ViewLayouts/ViewRow/ViewRow.css

@@ -1,39 +1,77 @@
+/*
+@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
+}
+*/
+/* Border-radius */
+/*
+@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
+}
+*/
+/* Border-radius */
 .df-view-row {
-  width: 100%;
+  width: var(--df-view-row-width, 100%);
   display: flex;
-  margin-bottom: 20px;
+  margin-bottom: var(--df-spacing-view, var(--g-spacing-5));
 }
 .df-view-row:last-child {
-  margin-bottom: 0;
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-view-row__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;
 }
 .df-view-row__note {
-  margin-inline-start: var(--g-spacing-half);
+  margin-inline-start: var(--df-view-row-note-margin-inline-start, var(--g-spacing-half));
 }
 .df-view-row__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);
 }
 .df-view-row__right {
-  max-width: 480px;
+  max-width: var(--df-view-row-right-width, 480px);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 .df-view-row__right > .df-view-transparent {
-  margin-bottom: 6px;
+  margin-bottom: var(--df-view-row-right-child-view-transparent-margin-bottom, 6px);
 }
 .df-view-row__right > .df-view-transparent:last-child {
-  margin-bottom: 0;
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-view-row:hover > .df-copy-button {
   display: block;

package/build/esm/lib/kit/components/ViewLayouts/ViewTableCell/ViewTableCell.css

@@ -1,20 +1,58 @@
+/*
+@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
+}
+*/
+/* Border-radius */
+/*
+@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
+}
+*/
+/* Border-radius */
 .df-view-table-cell {
   display: flex;
 }
 .df-view-table-cell__inner {
-  max-width: 100%;
+  max-width: var(--df-view-table-cell-inner-max-width, 100%);
   display: flex;
   flex-direction: column;
   justify-content: center;
 }
 .df-view-table-cell__inner > .df-view-row:last-child {
-  margin-bottom: 0;
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-view-table-cell__inner > .df-view-transparent {
-  margin-bottom: 6px;
+  margin-bottom: var(--df-view-table-cell-inner-child-view-transparent-margin-bottom, 6px);
 }
 .df-view-table-cell__inner > .df-view-transparent:last-child {
-  margin-bottom: 0;
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-view-table-cell:hover > .df-copy-button {
   display: block;

package/build/esm/lib/kit/components/ViewLayouts/ViewTransparent/ViewTransparent.css

@@ -1,14 +1,52 @@
+/*
+@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
+}
+*/
+/* Border-radius */
+/*
+@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
+}
+*/
+/* Border-radius */
 .df-view-transparent {
   display: flex;
-  margin-bottom: 20px;
+  margin-bottom: var(--df-spacing-view, var(--g-spacing-5));
 }
 .df-view-transparent:last-child {
-  margin-bottom: 0;
+  margin-bottom: var(--df-spacing-last-child, var(--g-spacing-0));
 }
 .df-view-transparent:hover > .df-copy-button {
   display: block;
 }
 .df-view-transparent__inner {
-  max-width: 100%;
-  width: 100%;
+  max-width: var(--df-view-transparent-inner-max-width, 100%);
+  width: var(--df-view-transparent-inner-width, 100%);
 }