Updated Planner layout (#4562)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
hcengineering · Feb 7, 2024 · 0d884fa · 0d884fa
1 parent 9baa011
commit 0d884fa
Show file tree

Hide file tree

Showing 30 changed files with 813 additions and 296 deletions.
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
@@ -143,10 +143,13 @@ a.noBold {
   &:hover, &:active, &:visited { font-weight: 400; }
 }
 
-.firstLetter span{
+.firstLetter span {
   display: inline-block;
   &::first-letter { text-transform: uppercase; }
 }
+.upperFirstLetter::first-letter {
+  text-transform: uppercase;
+}
 
 .inline-height2 {
   line-height: 200%;
@@ -597,6 +600,7 @@ input.search {
 
 .step-lr25 + .step-lr25 { margin-left: .25rem; }
 .step-lr75 + .step-lr75 { margin-left: .75rem; }
+.step-tb125 + .step-tb125 { margin-top: .125rem; }
 .step-tb25 + .step-tb25 { margin-top: .25rem; }
 .step-tb375 + .step-tb375 { margin-top: .375rem; }
 .step-tb5 + .step-tb5 { margin-top: .5rem; }
@@ -707,6 +711,7 @@ input.search {
 .min-h-2 { min-height: .5rem; }
 .min-h-4 { min-height: 1rem; }
 .min-h-5 { min-height: 1.25rem; }
+.min-h-6 { min-height: 1.5rem; }
 .min-h-7 { min-height: 1.75rem; }
 .min-h-8 { min-height: 2rem; }
 .min-h-9 { min-height: 2.25rem; }
@@ -727,6 +732,7 @@ input.search {
 .max-h-0 { max-height: 0; }
 .max-h-2 { max-height: .5rem; }
 .max-h-4 { max-height: 1rem; }
+.max-h-6 { max-height: 1.5rem; }
 .max-h-7 { max-height: 1.75rem; }
 .max-h-9 { max-height: 2.25rem; }
 .max-h-30 { max-height: 7.5rem; }

diff --git a/packages/theme/styles/_lumia-colors.scss b/packages/theme/styles/_lumia-colors.scss
@@ -33,6 +33,7 @@
   --global-ui-hover-highlight-BackgroundColor: #A5BDFF26;
   --global-surface-01-BackgroundColor: #131925;
   --global-surface-01-BorderColor: #1F2737;
+  --global-surface-01-hover-BackgroundColor: #19202E;
   --global-surface-02-BackgroundColor: #19202E;
   --global-surface-02-BorderColor: #262F40;
   --global-surface-03-hover-BackgroundColor: #19202E;
@@ -46,6 +47,7 @@
   --global-tertiary-TextColor: #8E99AF;
   --global-disabled-TextColor: #5A667E;
   --global-accent-TextColor: #4D7FF5;
+  --global-error-TextColor: #FF6359;
   --global-focus-BorderColor: #2A59D6;
   --global-popover-ShadowColor: #0E131E59;
   --global-modal-ShadowColor: #0E131E73;
@@ -90,6 +92,7 @@
   --global-ui-hover-highlight-BackgroundColor: #A5BDFF40;
   --global-surface-01-BackgroundColor: #F8F9FA;
   --global-surface-01-BorderColor: #DDE1E9;
+  --global-surface-01-hover-BackgroundColor: #EBEEF2;
   --global-surface-02-BackgroundColor: #FFFFFF;
   --global-surface-02-BorderColor: #EBEEF2;
   --global-surface-03-hover-BackgroundColor: #F8F9FA;
@@ -103,6 +106,7 @@
   --global-tertiary-TextColor: #7B879E;
   --global-disabled-TextColor: #A1ABBF;
   --global-accent-TextColor: #3566E2;
+  --global-error-TextColor: #A40A1B;
   --global-focus-BorderColor: #204DC8;
   --global-popover-ShadowColor: #0E131E1F;
   --global-modal-ShadowColor: #0E131E14;

diff --git a/packages/theme/styles/_vars.scss b/packages/theme/styles/_vars.scss
@@ -25,7 +25,9 @@
   --spacing-1_75: 0.875rem;
   --spacing-2: 1rem;
   --spacing-2_5: 1.25rem;
+  --spacing-2_75: 1.375rem;
   --spacing-3: 1.5rem;
+  --spacing-3_25: 1.625rem;
   --spacing-3_5: 1.75rem;
   --spacing-4: 2rem;
   --spacing-4_5: 2.25rem;
@@ -49,6 +51,7 @@
 
   /** Border Radius **/
 
+  --min-BorderRadius: 0.125rem;
   --extra-small-BorderRadius: 0.25rem;
   --extra-small-focus-BorderRadius: 0.375rem;
   --small-BorderRadius: 0.375rem;

diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss
@@ -16,18 +16,22 @@
 /* Typography */
 .font-regular-12,
 .font-medium-12,
+.font-bold-12,
 .font-regular-14,
 .font-medium-14,
 .font-bold-14,
 .paragraph-regular-14,
-.heading-medium-16 {
+.heading-medium-16,
+.heading-medium-20,
+.heading-bold-20 {
   font-family: var(--font-family);
   font-style: normal;
   line-height: 1rem;
   color: var(--global-primary-TextColor);
 }
 .font-regular-12,
-.font-medium-12 {
+.font-medium-12,
+.font-bold-12 {
   font-size: 0.75rem;
 }
 .font-regular-14,
@@ -45,14 +49,24 @@
 .font-medium-14 {
   font-weight: 500;
 }
-.font-bold-14 {
+.font-bold-12,
+.font-bold-14,
+.heading-bold-20 {
   font-weight: 700;
 }
+.heading-medium-16,
+.heading-medium-20 {
+  font-weight: 500;
+}
 .heading-medium-16 {
   font-size: 1rem;
-  font-weight: 500;
   line-height: 1.125rem;
 }
+.heading-medium-20,
+.heading-bold-20 {
+  font-size: 1.25rem;
+  line-height: 1.5rem;
+}
 .paragraph-regular-14 {
   line-height: 1.25rem;
   color: var(--global-tertiary-TextColor);