Merge pull request #575 from Groww-OSS/develop

Develop Merge PR | 25 Nov
Groww-OSS · Nov 25, 2024 · 8a78a12 · 8a78a12
2 parents 7f422dc + 7f44109
commit 8a78a12
Show file tree

Hide file tree

Showing 41 changed files with 395 additions and 322 deletions.
diff --git a/packages/mint-css/base/utility.css b/packages/mint-css/base/utility.css
@@ -136,7 +136,7 @@
 }
 
 .card {
-  border-radius: 8px;
+  border-radius: 5px;
 }
 
 .clickable-text {

diff --git a/packages/mint-css/package.json b/packages/mint-css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@groww-tech/mint-css",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "description": "A CSS library that provides classes, tokens, variables, fonts and other essential stylings governed under MINT design system, used by Groww",
   "main": "./dist/bundle.css",
   "files": [

diff --git a/packages/ui-toolkit/.storybook/preview-head.html b/packages/ui-toolkit/.storybook/preview-head.html
@@ -1,5 +1,7 @@
 <!DOCTYPE html>
   <head>
-    <link href="https://cdn.jsdelivr.net/npm/@groww-tech/[email protected]/dist/index.min.css" rel="stylesheet">
+    <link href="./theme.css" rel="stylesheet" />
+    <link href="https://cdn.jsdelivr.net/npm/@groww-tech/[email protected]/dist/index.min.css" rel="stylesheet">
+
   </head>
 </html>
diff --git a/packages/ui-toolkit/.storybook/theme.css b/packages/ui-toolkit/.storybook/theme.css
@@ -0,0 +1,70 @@
+
+html {
+  /* global colors */
+  --black: #121212;
+  --white: #ffffff;
+  --gray900: #44475b;
+  --gray800: #696c7c;
+  --gray700: #7c7e8c;
+  --gray600: #8f919d;
+  --gray500: #a1a3ad;
+  --gray400: #b0b2ba;
+  --gray300: #c7c8ce;
+  --gray200: #dddee1;
+  --gray150: #e9e9eb;
+  --gray100: #f0f0f2;
+  --gray50: #f8f8f8;
+  --green500: #00B386;
+  --green300: #66e3c4;
+  --green100: #EBF9F5;
+  --purple500: #5367ff;
+  --purple300: #84a4ff;
+  --purple100: #eef0ff;
+  --yellow500: #ffb61b;
+  --yellow100: #fff5e0;
+  --red500: #eb5b3c;
+  --red100: #fae9e5;
+  --overlay00: rgba(18, 18, 18, 0);
+  --overlay30: rgba(18, 18, 18, 0.3);
+  --overlay70: rgba(18, 18, 18, 0.7);
+  /*
+  *This is a spcl, rather risky variable.
+  *Only use this color variable at those places where theme token ("backgroundPrimary") usage is not possible (Ex: css psuedo classes)
+  */
+  --dangerouslySetPrimaryBg: #ffffff;
+}
+
+html[data-theme="dark"] {
+  /* global colors */
+  --black: #121212;
+  --white: #ffffff;
+  --gray900: #f8f8f8;
+  --gray800: #d1d1d1;
+  --gray700: #b8b8b8;
+  --gray600: #a0a0a0;
+  --gray500: #888888;
+  --gray400: #717171;
+  --gray300: #595959;
+  --gray200: #414141;
+  --gray150: #2e2e2e;
+  --gray100: #252525;
+  --gray50: #1b1b1b;
+  --green500: #0abb92;
+  --green300: #0b5e49;
+  --green100: #10362d;
+  --purple500: #98a4ff;
+  --purple300: #323c89;
+  --purple100: #181a2a;
+  --yellow500: #e7a61a;
+  --yellow100: #46391d;
+  --red500: #d55438;
+  --red100: #411d16;
+  --overlay00: rgba(18, 18, 18, 0);
+  --overlay30: rgba(18, 18, 18, 0.3);
+  --overlay70: rgba(18, 18, 18, 0.7);
+  /*
+  *This is a spcl, rather risky variable.
+  *Only use this color variable at those places where theme token ("backgroundPrimary") usage is not possible (Ex: css psuedo classes)
+  */
+  --dangerouslySetPrimaryBg: #121212;
+}
diff --git a/packages/ui-toolkit/package.json b/packages/ui-toolkit/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@groww-tech/ui-toolkit",
-  "version": "0.7.7",
+  "version": "0.7.8",
   "description": "A lightning nature UI",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -116,7 +116,7 @@
   },
   "dependencies": {
     "@groww-tech/icon-store": "1.4.6",
-    "@groww-tech/mint-css": "0.1.8",
+    "@groww-tech/mint-css": "0.1.9",
     "flat-carousel": "0.0.1",
     "lodash.debounce": "4.0.8",
     "object-assign": "4.1.1",

diff --git a/packages/ui-toolkit/src/components/atoms/Button/styles/button.css b/packages/ui-toolkit/src/components/atoms/Button/styles/button.css
@@ -11,15 +11,15 @@
 
 
 .mint-btn-default:focus-visible {
-  outline: 2px solid var(--content-accent-secondary);
+  outline: 2px solid var(--purple500);
   outline-offset: 2px;
 }
 .mint-btn-cursor-default {
   cursor: default;
 }
 
 .mint-btn-default.mint-btn-secondary-default-border{
-  border: 1px solid var(--border-primary);
+  border: 1px solid var(--gray150);
 }
 
 .mint-btn-tertiary-label-border {
@@ -55,7 +55,7 @@
 .mint-btn-disabled{
   cursor: default;
   pointer-events: none;
-  background-color: var(--border-primary);
+  background-color: var(--gray150);
 }
 
 .mint-btn-disabled.mint-btn-tertiary-disabled{
@@ -85,12 +85,12 @@
 }
 
 .mint-btn-loader-item-border-white {
-  border: 2px solid var(--background-primary); /* the loader color will always be white in dark as well as in light theme */
+  border: 2px solid var(--white); /* the loader color will always be white in dark as well as in light theme */
   border-top-color: transparent;
 }
 
 .mint-btn-loader-item-border-gray { /*used because the token doesn't override the existing color of loader*/
-  border: 2px solid var(--content-primary);
+  border: 2px solid var(--gray900);
   border-top-color: transparent;
 }
 

diff --git a/packages/ui-toolkit/src/components/atoms/CheckBox/CheckBox.tsx b/packages/ui-toolkit/src/components/atoms/CheckBox/CheckBox.tsx
@@ -18,8 +18,8 @@ const CheckBox = (props: Props) => {
     dataTestId
   } = props;
 
-  const activeColor = isDisabled ? 'var(--content-disabled)' : 'var(--content-accent)';
-  const inactiveColor = isDisabled ? 'var(--content-disabled)' : 'var(--content-secondary)';
+  const activeColor = isDisabled ? 'var(--gray400)' : 'var(--green500)';
+  const inactiveColor = isDisabled ? 'var(--gray400)' : 'var(--gray700)';
   const activeTextClass = isDisabled ? 'contentDisabled' : 'contentPrimary';
 
 

diff --git a/packages/ui-toolkit/src/components/atoms/DateSelector/dateSelector.css b/packages/ui-toolkit/src/components/atoms/DateSelector/dateSelector.css
@@ -10,14 +10,14 @@
 .date101Label {
   font-size: 16px;
   text-align: center;
-  color: var(--content-secondary);
+  color: var(--gray700);
 }
 
 .date101SelectedLabel {
   margin-top: 25px;
   font-size: 19px;
   text-align: center;
-  color: var(--content-primary);
+  color: var(--gray900);
 }
 
 .date101Grid-container {
@@ -37,41 +37,41 @@
 
 .date101Grid-item.regular {
   pointer-events: auto;
-  color: var(--content-primary);
+  color: var(--gray900);
   cursor: pointer;
   transition: all .1s ease-in-out;
 }
 
 .date101Grid-item.active {
   pointer-events: auto;
-  background-color: var(--content-accent-secondary);
+  background-color: var(--purple500);
   transform: scale(1.2);
   cursor: pointer;
 }
 
 .date101Grid-item.default-active {
   pointer-events: auto;
-  background-color: var(--content-accent);
+  background-color: var(--green500);
   transform: scale(1.2);
   cursor: pointer;
 }
 
 .date101Grid-item.disabled {
   pointer-events: none;
   cursor: not-allowed;
-  color: var(--content-tertiary);
+  color: var(--gray500);
 }
 
 .date101Grid-item.previously-active {
   pointer-events: auto;
-  color: var(--content-primary);
+  color: var(--gray900);
   transform: scale(1.2);
   cursor: pointer;
 }
 
 .date101Grid-item.regular:hover {
   transform: scale(1.2);
-  background: var(--background-secondary);
+  background: var(--gray50);
 }
 
 
@@ -92,7 +92,7 @@
   opacity: 0.5;
   top: 10px;
   right: 10px;
-  color: var(--content-primary);
+  color: var(--gray900);
   cursor: pointer;
 }
 

diff --git a/packages/ui-toolkit/src/components/atoms/GoBack/goBack.css b/packages/ui-toolkit/src/components/atoms/GoBack/goBack.css
@@ -1,9 +1,9 @@
 .gb6Box {
-  border-bottom: 1px solid var(--border-primary);
+  border-bottom: 1px solid var(--gray150);
   border-radius: 5px;
   width: 100%;
   padding: 16px 0;
-  color: var(--content-primary);
+  color: var(--gray900);
 }
 
 .gb6Icon {

diff --git a/packages/ui-toolkit/src/components/atoms/IconButton/IconButton.tsx b/packages/ui-toolkit/src/components/atoms/IconButton/IconButton.tsx
@@ -36,7 +36,7 @@ export default function IconButton(props: Props) {
 
   const iconProps = {
     className: 'absolute-center',
-    color: isDisabled ? 'var(--content-disabled)' : 'var(--content-primary)',
+    color: isDisabled ? 'var(--gray400)' : 'var(--gray900)',
     size: getIconSize()
   };
 

diff --git a/packages/ui-toolkit/src/components/atoms/IconButton/iconButton.css b/packages/ui-toolkit/src/components/atoms/IconButton/iconButton.css
@@ -15,12 +15,12 @@
 }
 
 .ib31IconDefault:hover {
- background-color: var(--background-tertiary);
+ background-color: var(--gray100);
 }
 
 
 .iconLoader {
- border: 2px solid var(--content-primary);
+ border: 2px solid var(--gray900);
  border-right-color: transparent;
  margin: 6px;
 }
diff --git a/packages/ui-toolkit/src/components/atoms/InputField/inputField.css b/packages/ui-toolkit/src/components/atoms/InputField/inputField.css
@@ -8,10 +8,10 @@
   display: block;
   width: 100%;
   border: none;
-  border-bottom: 1px solid var(--content-secondary);
+  border-bottom: 1px solid var(--gray700);
   box-shadow: none;
   background: var(--dangerouslySetPrimaryBg);
-  color: var(--content-primary);
+  color: var(--gray900);
 }
 
 .inf11Input input:focus {
@@ -22,12 +22,12 @@
 textarea:-webkit-autofill,
 select:-webkit-autofill {
   background-color: var(--dangerouslySetPrimaryBg) !important;
-  color: var(--content-primary);
+  color: var(--gray900);
 }
 
 .inf11Input input:-webkit-autofill {
   -webkit-box-shadow: 0 0 0 1000px var(--dangerouslySetPrimaryBg) inset;
-  -webkit-text-fill-color: var(--content-primary);
+  -webkit-text-fill-color: var(--gray900);
 }
 
 .inf11Input input[type=number]::-webkit-inner-spin-button,
@@ -39,7 +39,7 @@ input[type=number]::-webkit-outer-spin-button {
 }
 
 label {
-  color: var(--content-secondary);
+  color: var(--gray700);
   font-size: 18px;
   font-weight: normal;
   position: absolute;
@@ -53,11 +53,11 @@ label {
 input:valid ~ label {
   top: -15px;
   font-size: 14px;
-  color: var(--content-accent);
+  color: var(--green500);
 }
 
 .labelError {
-  color: var(--content-negative) !important;
+  color: var(--red500) !important;
 }
 
 .bar {
@@ -73,13 +73,13 @@ input:valid ~ label {
   width: 0;
   bottom: 0;
   position: absolute;
-  background: var(--content-accent);
+  background: var(--green500);
   transition: 0.2s ease all;
 }
 
 .barError::before,
 .barError::after {
-  background: var(--content-negative);
+  background: var(--red500);
 }
 
 .bar::before {
@@ -112,7 +112,7 @@ input:focus ~ .bar::after {
 @keyframes inputHighlighter {
 
   from {
-    background: var(--content-accent);
+    background: var(--green500);
   }
 
   to {
@@ -122,13 +122,13 @@ input:focus ~ .bar::after {
 }
 
 .errorText {
-  color: var(--content-negative);
+  color: var(--red500);
   font-size: 14px;
   margin-top: 3px;
 }
 
 .noErrorText {
-  color: var(--content-secondary);
+  color: var(--gray700);
   font-size: 14px;
   margin-top: 3px;
 }
diff --git a/packages/ui-toolkit/src/components/atoms/LaserBeam/LaserBeam.tsx b/packages/ui-toolkit/src/components/atoms/LaserBeam/LaserBeam.tsx
@@ -13,7 +13,7 @@ class LaserBeam extends React.Component<Props, State> {
   public static defaultProps: Props = {
     show: false,
     width: '2px',
-    background: 'var(--content-accent)',
+    background: 'var(--green500)',
     zIndex: '1200',
     noShadow: false,
     ccStyle: 'dash',
-Original file line number
+Diff line change
@@ Expand Up / @@ -136,7 +136,7 @@ @@
     }
     .card {
-      border-radius: 8px;
+      border-radius: 5px;
     }
     .clickable-text {
@@ Expand Down @@