Merge pull request #854 from supertokens/feat/sdk-prebuilt-ui

Feat: SDK design update

v2/emailpassword/common-customizations/email-verification/changing-style.mdx

@@ -82,7 +82,7 @@ supertokensUIInit({
             style: `
                 [data-supertokens~=link] {
                     border: 2px solid #0076ff;
-                    border-radius: 5;
+                    border-radius: 5px;
                     width: 30%;
                     margin: 0 auto;
                 }

v2/emailpassword/common-customizations/styling/changing-colours.mdx

@@ -34,15 +34,16 @@ SuperTokens.init({
     // highlight-start
     style: `
         [data-supertokens~=container] {
-            --palette-background: 51, 51, 51;
+             --palette-background: 51, 51, 51;
             --palette-inputBackground: 41, 41, 41;
             --palette-inputBorder: 41, 41, 41;
             --palette-textTitle: 255, 255, 255;
             --palette-textLabel: 255, 255, 255;
             --palette-textPrimary: 255, 255, 255;
             --palette-error: 173, 46, 46;
             --palette-textInput: 169, 169, 169;
-            --palette-textLink: 169, 169, 169;
+            --palette-textLink: 114,114,114;
+            --palette-textGray: 158, 158, 158;
         }
     `,
     // highlight-end 
@@ -74,7 +75,8 @@ supertokensUIInit({
             --palette-textPrimary: 255, 255, 255;
             --palette-error: 173, 46, 46;
             --palette-textInput: 169, 169, 169;
-            --palette-textLink: 169, 169, 169;
+            --palette-textLink: 114,114,114;
+            --palette-textGray: 158, 158, 158;
         }
     `,
     // highlight-end 
@@ -108,13 +110,13 @@ Changes to the palette will apply to all the UI components we provide. If you wa
 
 ### **primary**: 
 - Description: This value represents the primary color used for highlighting focused inputs, display successful states and button background colour.
-- Default: ```255, 155, 51``` (orange)
+- Default: ```28, 34, 42```
 
 <img alt="Prebuilt UI with an input field highlighted" width="400px" src="/img/emailpassword/primary.png" />
 
 ### **primaryBorder**: 
 - Description: This value represents the border color used for primary buttons.
-- Default: ```238, 141, 35``` (orange)
+- Default: ```45, 54, 68```
 
 ### **success**: 
 - Description: This value represents the color used on success events.
@@ -124,11 +126,11 @@ Changes to the palette will apply to all the UI components we provide. If you wa
 - Description: This value represents the color used on as a background for success notifications.
 - Default: ```217, 255, 191``` (green)
 
-<img alt="Element visible when email is resent succesfully" width="400px" src="/img/emailpassword/success.png" />
+<img alt="Element visible when email is resent successfully" width="400px" src="/img/emailpassword/success.png" />
 
 ### **error**: 
 - Description: This value represents the error color used for highlighting inputs with errors, and display error messages.
-- Default: ```255, 241, 235``` (red)
+- Default: ```255, 23, 23``` (red)
 
 ### **errorBackground**: 
 - Description: This value represents the error color used as a background for error notifications.
@@ -138,34 +140,34 @@ Changes to the palette will apply to all the UI components we provide. If you wa
 
 ### **textTitle**: 
 - Description: This value represents the color of the title of each forms.
-- Default: ```34, 34, 34``` (black)
+- Default: ```0, 0, 0``` (black)
 
 <img alt="Prebuilt form title" width="400px" src="/img/emailpassword/textTitle.png" />
 
 ### **textLabel**: 
 - Description: This value represents the main color used for form fields labels.
-- Default: ```34, 34, 34``` (black)
+- Default: ```0, 0, 0``` (black)
 
 <img alt="Prebuilt form field labels" width="200px" src="/img/emailpassword/textLabel.png" />
 
 
 ### **textInput**: 
 - Description: This value represents the main color used for form fields labels.
-- Default: ```34, 34, 34``` (black)
+- Default: ```0, 0, 0``` (black)
 
 <img alt="Prebuilt form field" width="200px" src="/img/emailpassword/textInput.png" />
 
 
 ### **textPrimary**: 
 - Description: This value represents the main color used for subtitles and footer text.
-- Default: ```101, 101, 101``` (grey)
+- Default: ```128, 128, 128``` (grey)
 
 <img alt="Prebuilt form terms and policy links" width="400px" src="/img/emailpassword/textPrimary.png" />
 
 
 ### **textLink**: 
 - Description: This value represents the color used for links (see the image above).
-- Default: ```0, 118, 255``` (blue)
+- Default: ```0, 122, 255``` (blue)
 
 
 ### **buttonText**: 
@@ -191,7 +193,7 @@ Changes to the palette will apply to all the UI components we provide. If you wa
 <CustomUIContent>
 
 :::caution
-Not applicable since you do not use our pre built UI
+Not applicable if you do not use our pre built UI
 :::
 
 </CustomUIContent>