refactor(frontend): complete BEM design system

frontend/src/styles/index.css

@@ -31,6 +31,22 @@
   --color-warning-soft: #fff6da;
   --color-transfer: #7c5cdb;
   --color-transfer-soft: #f0ebff;
+  --color-chart-1: var(--color-primary);
+  --color-chart-2: var(--color-danger);
+  --color-chart-3: var(--color-success);
+  --color-chart-4: var(--color-warning);
+  --color-chart-5: var(--color-transfer);
+  --color-chart-6: #c8558f;
+  --color-chart-7: #1495a3;
+  --color-chart-8: #79a92f;
+  --color-chart-9: #e06d2f;
+  --color-chart-10: #4f6fd7;
+  --color-chart-11: #1c9a8a;
+  --color-chart-12: #d43d5c;
+  --color-chart-13: #277bbd;
+  --color-chart-14: #9b59b6;
+  --color-chart-15: #2f9f63;
+  --color-chart-cursor: rgba(129, 93, 58, 0.08);
   --color-sidebar: #fff9f0;
   --radius-sm: 4px;
   --radius: 8px;
@@ -182,7 +198,7 @@ button {
     box-shadow var(--transition);
 }
 
-.sidebar__nav-link svg {
+.sidebar__nav-icon {
   flex: 0 0 auto;
 }
 
@@ -315,7 +331,7 @@ button {
   line-height: 1.15;
 }
 
-.muted-text {
+.text--muted {
   color: var(--color-text-muted);
 }
 
@@ -344,13 +360,13 @@ button {
   padding-bottom: 4px;
 }
 
-.field label {
+.field__label {
   color: var(--color-text-secondary);
   font-size: 12px;
   font-weight: 800;
 }
 
-.field--checkbox label {
+.field__label--checkbox {
   display: flex;
   align-items: center;
   gap: 8px;
@@ -594,7 +610,7 @@ input[type="checkbox"] {
   color: #b8321f;
 }
 
-.form-divider {
+.form__divider {
   height: 1px;
   background: var(--color-border);
   margin: 4px 0;
@@ -644,12 +660,12 @@ input[type="checkbox"] {
   box-shadow: 0 18px 34px rgba(232, 93, 63, 0.22);
 }
 
-.login__header h1 {
+.login__title {
   font-size: 24px;
   font-weight: 850;
 }
 
-.login__header p {
+.login__subtitle {
   color: var(--color-text-secondary);
   margin-top: 4px;
 }
@@ -836,7 +852,7 @@ input[type="checkbox"] {
   padding: 20px;
 }
 
-.chart-card h3 {
+.chart-card__title {
   margin-bottom: 14px;
   font-size: 16px;
   font-weight: 850;
@@ -853,19 +869,20 @@ input[type="checkbox"] {
   border-collapse: collapse;
 }
 
-.category-chart__table th,
-.category-chart__table td {
+.category-chart__head-cell,
+.category-chart__cell {
   border-bottom: 1px solid var(--color-border);
   padding: 7px 9px;
   text-align: left;
 }
 
-.category-chart__table th {
+.category-chart__head-cell {
   color: var(--color-text-secondary);
   font-size: 12px;
   font-weight: 850;
 }
 
+.category-chart__head-cell--center,
 .category-chart__cell--center {
   text-align: center !important;
 }
@@ -897,15 +914,14 @@ input[type="checkbox"] {
   border-collapse: collapse;
 }
 
-.data-table th,
-.data-table td {
+.data-table__head-cell,
+.data-table__cell {
   border-bottom: 1px solid var(--color-border);
   padding: 11px 14px;
   text-align: left;
   vertical-align: middle;
 }
 
-.data-table th,
 .data-table__head-cell {
   color: var(--color-text-secondary);
   font-size: 12px;
@@ -915,15 +931,15 @@ input[type="checkbox"] {
   white-space: nowrap;
 }
 
-.data-table tbody tr {
+.data-table__row {
   transition: background var(--transition);
 }
 
-.data-table tbody tr:hover {
+.data-table__body .data-table__row:hover {
   background: rgba(247, 242, 235, 0.72);
 }
 
-.data-table tbody tr:last-child td {
+.data-table__body .data-table__row:last-child .data-table__cell {
   border-bottom: 0;
 }
 
@@ -1128,7 +1144,7 @@ input[type="checkbox"] {
   padding: 22px;
 }
 
-.data-section__block h3 {
+.data-section__title {
   margin-bottom: 6px;
   font-size: 16px;
   font-weight: 850;
@@ -1177,7 +1193,7 @@ input[type="checkbox"] {
    Modals and import
    ================================================================ */
 
-.modal-backdrop {
+.modal {
   position: fixed;
   inset: 0;
   z-index: 200;
@@ -1188,7 +1204,7 @@ input[type="checkbox"] {
   background: rgba(35, 27, 21, 0.44);
 }
 
-.modal {
+.modal__dialog {
   width: min(100%, 540px);
   max-height: 90vh;
   overflow-y: auto;
@@ -1206,7 +1222,7 @@ input[type="checkbox"] {
   border-bottom: 1px solid var(--color-border);
 }
 
-.modal__header h2 {
+.modal__title {
   font-size: 18px;
   font-weight: 850;
 }
@@ -1281,7 +1297,7 @@ input[type="checkbox"] {
   text-align: center;
 }
 
-.import-upload p {
+.import-upload__description {
   color: var(--color-text-secondary);
 }
 
@@ -1314,7 +1330,7 @@ input[type="checkbox"] {
   font-weight: 900;
 }
 
-.import-result h3 {
+.import-result__title {
   margin-bottom: 14px;
   font-size: 17px;
   font-weight: 850;
@@ -1326,16 +1342,16 @@ input[type="checkbox"] {
   text-align: left;
 }
 
-.import-result__stats td {
+.import-result__stat-cell {
   border-bottom: 1px solid var(--color-border);
   padding: 7px 10px;
 }
 
-.import-result__stats td:first-child {
+.import-result__stat-cell--label {
   color: var(--color-text-secondary);
 }
 
-.import-result__stats td:last-child {
+.import-result__stat-cell--value {
   font-variant-numeric: tabular-nums;
   font-weight: 850;
   text-align: right;
@@ -1346,7 +1362,7 @@ input[type="checkbox"] {
   text-align: left;
 }
 
-.import-result__alias label {
+.import-result__alias-label {
   display: block;
   margin-bottom: 6px;
   color: var(--color-text-secondary);
@@ -1374,7 +1390,7 @@ input[type="checkbox"] {
   padding: 12px 14px;
 }
 
-.danger-note__check {
+.field--flush {
   padding-bottom: 0;
 }
 
@@ -1436,7 +1452,7 @@ input[type="checkbox"] {
     flex-direction: column;
   }
 
-  .page__header .button {
+  .page__action {
     width: 100%;
   }
 
@@ -1504,12 +1520,12 @@ input[type="checkbox"] {
     padding: 28px 22px;
   }
 
-  .modal-backdrop {
+  .modal {
     align-items: stretch;
     padding: 0;
   }
 
-  .modal {
+  .modal__dialog {
     display: flex;
     width: 100%;
     max-height: none;
@@ -1527,7 +1543,7 @@ input[type="checkbox"] {
     flex-wrap: wrap;
   }
 
-  .modal__footer .button {
+  .modal__action {
     flex: 1 1 150px;
   }