feat(emoji-picker, datepicker): revert style migration from dialtone8…

… (#921) * feat(emoji-picker, datepicker): revert style migration from dialtone8 * feat(emoji-picker, datepicker): lint fix dt7 tokens --------- Co-authored-by: iropolo <ignacio.ropolo@dialpad.com>
dialpad · Jul 12, 2023 · fbb93a8 · fbb93a8
1 parent 70f5c80
commit fbb93a8
Show file tree

Hide file tree

Showing 2 changed files with 166 additions and 64 deletions.
diff --git a/lib/build/less/components/datepicker.less b/lib/build/less/components/datepicker.less
@@ -11,38 +11,52 @@
 //  $   BASE STYLE
 //  ----------------------------------------------------------------------------
 .d-datepicker {
-  width: calc(var(--dt-size-925) - var(--dt-size-550));
-  padding: var(--dt-size-500);
+  width: calc(var(--size-925) - var(--su24));
+  padding: var(--su16);
+  //dialtone8 ------------------------------
+  //width: calc(var(--dt-size-925) - var(--dt-size-550));
+  //padding: var(--dt-size-500);
 
   p {
     display: flex;
     margin: 0;
     font-weight: 400;
-    font-size: var(--dt-size-450);
+    font-size: var(--su12);
     font-family: inherit;
     font-style: normal;
     text-transform: uppercase;
+    //dialtone8 ------------------------------
+    //font-size: var(--dt-size-450);
   }
 
   &--body {
-    padding: 0 var(--dt-size-400);
+    padding: 0 var(--su8);
+    //dialtone8 ------------------------------
+    //padding: 0 var(--dt-size-400);
   }
 
   &__week-day {
     display: flex;
     justify-content: space-between;
-    margin-bottom: var(--dt-size-500);
+    margin-bottom: var(--su16);
+    //dialtone8 ------------------------------
+    //margin-bottom: var(--dt-size-500);
 
     > div {
       display: flex;
       align-items: center;
       justify-content: center;
-      width: var(--dt-size-550);
-      height: var(--dt-size-550);
+      width: var(--su24);
+      height: var(--su24);
+      //dialtone8 ------------------------------
+      //width: var(--dt-size-550);
+      //height: var(--dt-size-550);
 
       p {
         margin: 0;
-        color: var(--dt-color-surface-strong);
+        color: var(--black-600);
+        //dialtone8 ------------------------------
+        //color: var(--dt-color-surface-strong);
       }
     }
   }
@@ -51,26 +65,38 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-bottom: var(--dt-size-400);
+    margin-bottom: var(--size8);
+    //dialtone8 ------------------------------
+    //margin-bottom: var(--dt-size-400);
   }
 
   &__day {
-    width: var(--dt-size-550);
-    height: var(--dt-size-550);
+    width: var(--size24);
+    height: var(--size24);
     padding: 0;
-    font-size: var(--dt-size-450);
+    font-size: var(--size12);
     background-color: transparent;
     border: none;
-    border-radius: calc(var(--dt-size-650) + var(--dt-size-200));
+    border-radius: calc(var(--size48) + var(--size2));
     cursor: pointer;
+    //dialtone8 ------------------------------
+    //width: var(--dt-size-550);
+    //height: var(--dt-size-550);
+    //font-size: var(--dt-size-450);
+    //border-radius: calc(var(--dt-size-650) + var(--dt-size-200));
 
     &--disabled {
-      color: var(--dt-color-surface-bold);
+      color: var(--black-300);
+      //dialtone8 ------------------------------
+      //color: var(--dt-color-surface-bold);
     }
 
     &--selected {
-     color: var(--dt-color-foreground-primary);
-     background: var(--dt-color-border-brand);
+     color: #fff;
+     background: #7C52FF;
+     //dialtone8 ------------------------------
+     //color: var(--dt-color-foreground-primary);
+     //background: var(--dt-color-border-brand);
     }
 
     &:focus {
@@ -84,7 +110,9 @@
   justify-content: space-between;
   width: 100%;
   height: 100%;
-  margin-bottom: var(--dt-size-525);
+  margin-bottom: var(--size20);
+  //dialtone8 ------------------------------
+  //margin-bottom: var(--dt-size-525);
 
     > div {
         display: inline-flex;