From aaa3604cd45da5a98137b831137a6d5561707be0 Mon Sep 17 00:00:00 2001
From: sdarbinyan <sdarbinyan@4pay.ru>
Date: Mon, 20 Jul 2026 03:23:22 +0400
Subject: [PATCH] style(design-system): apply typography/spacing/radius tokens
 to shared/ui component library
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Normalized the 18 shared/ui components (button, input, select, badge,
card, section-card, table, dialog, empty-state, form-field, pagination,
toggle, image-field, key-value-editor, locale-tabs, color-picker,
code-editor, skeleton) — these are the reusable primitives consumed
across storefront/builder/backoffice — to use the new
--font-size-*/--font-weight-*/--line-height-* tokens and the
--radius-xs/--radius-full tokens introduced in the previous commit,
replacing one-off literal values (0.875rem, 13px, 999px, 12px, etc.).

Fixes found along the way:
- code-editor.component.scss: focus border/shadow used a hardcoded
  #497671 (the dexar tenant's primary color) instead of
  var(--primary-color) — would not adapt to the lavero/novo tenant
  themes. Now theme-aware.
- section-card.component.scss used raw 16px/18px/14px radius/padding
  instead of the --radius-lg/--space-* tokens the sibling card
  component already used, so cards and section-cards had slightly
  different rounding/padding for no reason. Aligned to the same scale.
- toggle/badge/item-tag: raw 999px pill radius replaced with the new
  --radius-full token.

Deferred: syntax-highlighting colors in code-editor (.cm-*) are
intentional and left untouched; tenant brand colors in the three
theme.scss files are intentional per-tenant palettes, left untouched.
---
 src/app/shared/ui/badge/badge.component.scss      |  8 ++++----
 src/app/shared/ui/button/button.component.scss    |  8 ++++----
 .../ui/code-editor/code-editor.component.scss     | 12 ++++++------
 .../ui/color-picker/color-picker.component.scss   |  2 +-
 src/app/shared/ui/dialog/dialog.component.scss    |  6 +++---
 .../ui/empty-state/empty-state.component.scss     |  6 +++---
 .../ui/form-field/form-field.component.scss       |  8 ++++----
 .../ui/image-field/image-field.component.scss     |  8 ++++----
 src/app/shared/ui/input/input.component.scss      |  6 +++---
 .../key-value-editor.component.scss               | 10 +++++-----
 .../ui/locale-tabs/locale-tabs.component.scss     |  6 +++---
 .../ui/pagination/pagination.component.scss       |  2 +-
 .../ui/section-card/section-card.component.scss   | 15 ++++++++-------
 src/app/shared/ui/select/select.component.scss    | 14 +++++++-------
 src/app/shared/ui/table/table.component.scss      |  4 ++--
 src/app/shared/ui/toggle/toggle.component.scss    |  2 +-
 16 files changed, 59 insertions(+), 58 deletions(-)

diff --git a/src/app/shared/ui/badge/badge.component.scss b/src/app/shared/ui/badge/badge.component.scss
index b1617d7..a35f10e 100644
--- a/src/app/shared/ui/badge/badge.component.scss
+++ b/src/app/shared/ui/badge/badge.component.scss
@@ -3,10 +3,10 @@
   align-items: center;
   gap: var(--space-xs, 0.25rem);
   padding: 0.125rem var(--space-sm, 0.5rem);
-  border-radius: var(--radius-sm, 4px);
-  font-size: 0.75rem;
-  font-weight: 600;
-  line-height: 1.4;
+  border-radius: var(--radius-sm, 8px);
+  font-size: var(--font-size-xs, 0.75rem);
+  font-weight: var(--font-weight-semibold, 600);
+  line-height: var(--line-height-normal, 1.5);
   white-space: nowrap;
 }
 
diff --git a/src/app/shared/ui/button/button.component.scss b/src/app/shared/ui/button/button.component.scss
index d4f1c30..678310c 100644
--- a/src/app/shared/ui/button/button.component.scss
+++ b/src/app/shared/ui/button/button.component.scss
@@ -16,7 +16,7 @@
   border: 1px solid transparent;
   border-radius: var(--radius-md, 6px);
   font-family: inherit;
-  font-weight: 600;
+  font-weight: var(--font-weight-semibold, 600);
   line-height: 1;
   cursor: pointer;
   transition: background-color var(--transition-fast, 120ms ease),
@@ -38,19 +38,19 @@
 .app-button--sm {
   height: 32px;
   padding: 0 var(--space-sm, 0.5rem);
-  font-size: 0.8125rem;
+  font-size: var(--font-size-sm, 0.8125rem);
 }
 
 .app-button--md {
   height: 40px;
   padding: 0 var(--space-md, 1rem);
-  font-size: 0.9375rem;
+  font-size: var(--font-size-md, 0.9375rem);
 }
 
 .app-button--lg {
   height: 48px;
   padding: 0 var(--space-lg, 1.5rem);
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
 }
 
 .app-button--primary {
diff --git a/src/app/shared/ui/code-editor/code-editor.component.scss b/src/app/shared/ui/code-editor/code-editor.component.scss
index 12f6a79..5319b79 100644
--- a/src/app/shared/ui/code-editor/code-editor.component.scss
+++ b/src/app/shared/ui/code-editor/code-editor.component.scss
@@ -5,7 +5,7 @@
 .code-editor {
   position: relative;
   border: 1px solid var(--border-color, #d3dad9);
-  border-radius: 10px;
+  border-radius: var(--radius-md, 12px);
   overflow: hidden;
 }
 
@@ -14,17 +14,17 @@
 }
 
 .code-editor--focused {
-  border-color: #497671;
-  box-shadow: 0 0 0 2px rgba(73, 118, 113, 0.15);
+  border-color: var(--primary-color, #497671);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color, #497671) 15%, transparent);
 }
 
 .code-editor-highlight,
 .code-editor-input {
   margin: 0;
-  padding: 10px 12px;
+  padding: var(--space-sm, 0.5rem) var(--space-sm, 0.75rem);
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  font-size: 13px;
-  line-height: 1.5;
+  font-size: var(--font-size-sm, 0.8125rem);
+  line-height: var(--line-height-normal, 1.5);
   white-space: pre;
   overflow: auto;
 }
diff --git a/src/app/shared/ui/color-picker/color-picker.component.scss b/src/app/shared/ui/color-picker/color-picker.component.scss
index be73ac7..11865e5 100644
--- a/src/app/shared/ui/color-picker/color-picker.component.scss
+++ b/src/app/shared/ui/color-picker/color-picker.component.scss
@@ -32,7 +32,7 @@
   background: var(--bg-primary, #fff);
   color: var(--text-primary, #1f322d);
   font-family: inherit;
-  font-size: 0.9375rem;
+  font-size: var(--font-size-md, 0.9375rem);
   transition: border-color var(--transition-fast, 120ms ease),
     box-shadow var(--transition-fast, 120ms ease);
 
diff --git a/src/app/shared/ui/dialog/dialog.component.scss b/src/app/shared/ui/dialog/dialog.component.scss
index 2cbe889..2b8500b 100644
--- a/src/app/shared/ui/dialog/dialog.component.scss
+++ b/src/app/shared/ui/dialog/dialog.component.scss
@@ -47,8 +47,8 @@
 
 .app-dialog-panel__title {
   margin: 0;
-  font-size: 1.125rem;
-  font-weight: 600;
+  font-size: var(--font-size-xl, 1.125rem);
+  font-weight: var(--font-weight-semibold, 600);
   color: var(--text-primary, #1f322d);
 }
 
@@ -56,7 +56,7 @@
   border: none;
   background: transparent;
   color: var(--text-secondary, #6b7280);
-  font-size: 1.5rem;
+  font-size: var(--font-size-3xl, 1.5rem);
   line-height: 1;
   cursor: pointer;
   padding: var(--space-xs, 0.25rem);
diff --git a/src/app/shared/ui/empty-state/empty-state.component.scss b/src/app/shared/ui/empty-state/empty-state.component.scss
index d5d7b5b..893cbde 100644
--- a/src/app/shared/ui/empty-state/empty-state.component.scss
+++ b/src/app/shared/ui/empty-state/empty-state.component.scss
@@ -21,15 +21,15 @@
 
 .app-empty-state__title {
   margin: 0;
-  font-size: 1.0625rem;
-  font-weight: 600;
+  font-size: var(--font-size-xl, 1.125rem);
+  font-weight: var(--font-weight-semibold, 600);
   color: var(--text-primary, #1f322d);
 }
 
 .app-empty-state__description {
   margin: 0;
   max-width: 32rem;
-  font-size: 0.875rem;
+  font-size: var(--font-size-base, 0.875rem);
 }
 
 .app-empty-state__actions {
diff --git a/src/app/shared/ui/form-field/form-field.component.scss b/src/app/shared/ui/form-field/form-field.component.scss
index b04efe7..8b2a3c0 100644
--- a/src/app/shared/ui/form-field/form-field.component.scss
+++ b/src/app/shared/ui/form-field/form-field.component.scss
@@ -5,8 +5,8 @@
 }
 
 .app-form-field__label {
-  font-size: 0.875rem;
-  font-weight: 600;
+  font-size: var(--font-size-base, 0.875rem);
+  font-weight: var(--font-weight-semibold, 600);
   color: var(--text-primary, #1f322d);
 }
 
@@ -21,12 +21,12 @@
 
 .app-form-field__hint {
   margin: 0;
-  font-size: 0.8125rem;
+  font-size: var(--font-size-sm, 0.8125rem);
   color: var(--text-secondary, #6b7280);
 }
 
 .app-form-field__error {
   margin: 0;
-  font-size: 0.8125rem;
+  font-size: var(--font-size-sm, 0.8125rem);
   color: var(--error-color, #c0392b);
 }
diff --git a/src/app/shared/ui/image-field/image-field.component.scss b/src/app/shared/ui/image-field/image-field.component.scss
index 9d3f4e0..f07b538 100644
--- a/src/app/shared/ui/image-field/image-field.component.scss
+++ b/src/app/shared/ui/image-field/image-field.component.scss
@@ -4,14 +4,14 @@
 
 .image-field {
   display: flex;
-  gap: 12px;
+  gap: var(--space-sm, 0.5rem);
   align-items: flex-start;
 }
 
 .image-field__thumb {
   width: 56px;
   height: 56px;
-  border-radius: 10px;
+  border-radius: var(--radius-md, 12px);
   border: 1px solid var(--border-color, #d3dad9);
   object-fit: cover;
   background: #fbfcfc;
@@ -25,10 +25,10 @@
 .image-field__controls {
   flex: 1;
   display: grid;
-  gap: 8px;
+  gap: var(--space-sm, 0.5rem);
 }
 
 .image-field__actions {
   display: flex;
-  gap: 8px;
+  gap: var(--space-sm, 0.5rem);
 }
diff --git a/src/app/shared/ui/input/input.component.scss b/src/app/shared/ui/input/input.component.scss
index 5460d3d..5bd01b1 100644
--- a/src/app/shared/ui/input/input.component.scss
+++ b/src/app/shared/ui/input/input.component.scss
@@ -41,19 +41,19 @@
 .app-input--sm {
   height: 32px;
   padding: 0 var(--space-sm, 0.5rem);
-  font-size: 0.8125rem;
+  font-size: var(--font-size-sm, 0.8125rem);
 }
 
 .app-input--md {
   height: 40px;
   padding: 0 var(--space-md, 1rem);
-  font-size: 0.9375rem;
+  font-size: var(--font-size-md, 0.9375rem);
 }
 
 .app-input--lg {
   height: 48px;
   padding: 0 var(--space-lg, 1.5rem);
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
 }
 
 .app-input--error {
diff --git a/src/app/shared/ui/key-value-editor/key-value-editor.component.scss b/src/app/shared/ui/key-value-editor/key-value-editor.component.scss
index 7f5bcc6..0c8be0e 100644
--- a/src/app/shared/ui/key-value-editor/key-value-editor.component.scss
+++ b/src/app/shared/ui/key-value-editor/key-value-editor.component.scss
@@ -4,21 +4,21 @@
 
 .app-key-value-editor {
   display: grid;
-  gap: 10px;
+  gap: var(--space-sm, 0.5rem);
 }
 
 .app-key-value-editor-row {
   display: flex;
-  gap: 8px;
+  gap: var(--space-sm, 0.5rem);
   align-items: flex-start;
   border: 1px solid var(--border-color, #d3dad9);
-  border-radius: 12px;
-  padding: 12px;
+  border-radius: var(--radius-md, 12px);
+  padding: var(--space-sm, 0.5rem);
   background: var(--bg-secondary, #fbfcfc);
 }
 
 .app-key-value-editor-row-content {
   flex: 1;
   display: grid;
-  gap: 8px;
+  gap: var(--space-sm, 0.5rem);
 }
diff --git a/src/app/shared/ui/locale-tabs/locale-tabs.component.scss b/src/app/shared/ui/locale-tabs/locale-tabs.component.scss
index 2fd9289..25ffefc 100644
--- a/src/app/shared/ui/locale-tabs/locale-tabs.component.scss
+++ b/src/app/shared/ui/locale-tabs/locale-tabs.component.scss
@@ -9,13 +9,13 @@
 }
 
 .app-locale-tab {
-  padding: 8px 16px;
+  padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
   border: none;
   border-bottom: 2px solid transparent;
   background: transparent;
   color: var(--text-secondary, #5f6e6a);
-  font-weight: 600;
-  font-size: 0.875rem;
+  font-weight: var(--font-weight-semibold, 600);
+  font-size: var(--font-size-base, 0.875rem);
   text-transform: uppercase;
   cursor: pointer;
   transition: color var(--transition-fast, 120ms ease),
diff --git a/src/app/shared/ui/pagination/pagination.component.scss b/src/app/shared/ui/pagination/pagination.component.scss
index c4b99b3..5c51cc9 100644
--- a/src/app/shared/ui/pagination/pagination.component.scss
+++ b/src/app/shared/ui/pagination/pagination.component.scss
@@ -12,7 +12,7 @@
   border-radius: var(--radius-md, 6px);
   background: transparent;
   color: var(--text-primary, #1f322d);
-  font-size: 0.8125rem;
+  font-size: var(--font-size-sm, 0.8125rem);
   cursor: pointer;
   transition: background-color var(--transition-fast, 120ms ease),
     border-color var(--transition-fast, 120ms ease);
diff --git a/src/app/shared/ui/section-card/section-card.component.scss b/src/app/shared/ui/section-card/section-card.component.scss
index ff5cd93..739e43a 100644
--- a/src/app/shared/ui/section-card/section-card.component.scss
+++ b/src/app/shared/ui/section-card/section-card.component.scss
@@ -5,30 +5,31 @@
 .app-section-card {
   background: var(--bg-primary, #fff);
   border: 1px solid var(--border-color, #d3dad9);
-  border-radius: 16px;
-  padding: 18px;
+  border-radius: var(--radius-lg, 13px);
+  padding: var(--space-lg, 1.5rem);
   display: grid;
-  gap: 14px;
+  gap: var(--space-md, 1rem);
 }
 
 .app-section-card-header {
   display: grid;
-  gap: 4px;
+  gap: var(--space-xs, 0.25rem);
 }
 
 .app-section-card-header h2 {
   margin: 0;
-  font-size: 1.125rem;
+  font-size: var(--font-size-xl, 1.125rem);
+  font-weight: var(--font-weight-semibold, 600);
   color: var(--text-primary, #1e3c38);
 }
 
 .app-section-card-description {
   margin: 0;
-  font-size: 0.875rem;
+  font-size: var(--font-size-base, 0.875rem);
   color: var(--text-secondary, #5f6e6a);
 }
 
 .app-section-card-body {
   display: grid;
-  gap: 14px;
+  gap: var(--space-md, 1rem);
 }
diff --git a/src/app/shared/ui/select/select.component.scss b/src/app/shared/ui/select/select.component.scss
index 30bfc13..f08372d 100644
--- a/src/app/shared/ui/select/select.component.scss
+++ b/src/app/shared/ui/select/select.component.scss
@@ -53,28 +53,28 @@
 .app-select--sm {
   height: 32px;
   padding: 0 var(--space-sm, 0.5rem);
-  font-size: 0.8125rem;
+  font-size: var(--font-size-sm, 0.8125rem);
 }
 
 .app-select--md {
   height: 40px;
   padding: 0 var(--space-md, 1rem);
-  font-size: 0.9375rem;
+  font-size: var(--font-size-md, 0.9375rem);
 }
 
 .app-select--lg {
   height: 48px;
   padding: 0 var(--space-lg, 1.5rem);
-  font-size: 1rem;
+  font-size: var(--font-size-lg, 1rem);
 }
 
 .app-select-description {
   display: block;
-  font-weight: 400;
-  font-size: 12px;
-  line-height: 1.4;
+  font-weight: var(--font-weight-normal, 400);
+  font-size: var(--font-size-xs, 0.75rem);
+  line-height: var(--line-height-normal, 1.5);
   color: var(--text-secondary, #6b7280);
-  margin-top: 4px;
+  margin-top: var(--space-xs, 0.25rem);
 }
 
 @media (prefers-reduced-motion: reduce) {
diff --git a/src/app/shared/ui/table/table.component.scss b/src/app/shared/ui/table/table.component.scss
index 7bb317b..d7f7e08 100644
--- a/src/app/shared/ui/table/table.component.scss
+++ b/src/app/shared/ui/table/table.component.scss
@@ -20,7 +20,7 @@ app-table {
 .app-table {
   width: 100%;
   border-collapse: collapse;
-  font-size: 0.875rem;
+  font-size: var(--font-size-base, 0.875rem);
   color: var(--text-primary, #1f322d);
 
   thead {
@@ -29,7 +29,7 @@ app-table {
 
   th {
     text-align: left;
-    font-weight: 600;
+    font-weight: var(--font-weight-semibold, 600);
     color: var(--text-secondary, #6b7280);
     padding: var(--space-sm, 0.5rem) var(--space-md, 1rem);
     border-bottom: 1px solid var(--border-color, #e4e4e7);
diff --git a/src/app/shared/ui/toggle/toggle.component.scss b/src/app/shared/ui/toggle/toggle.component.scss
index 77042b3..92c3884 100644
--- a/src/app/shared/ui/toggle/toggle.component.scss
+++ b/src/app/shared/ui/toggle/toggle.component.scss
@@ -6,7 +6,7 @@
   position: relative;
   width: 42px;
   height: 24px;
-  border-radius: 999px;
+  border-radius: var(--radius-full, 999px);
   border: 1px solid var(--border-color, #d3dad9);
   background: var(--bg-secondary, #e4e4e7);
   cursor: pointer;