removed stroke color

packages/icon-store/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groww-tech/icon-store",
-  "version": "1.5.2",
+  "version": "1.5.1",
   "description": "Icon Library customized for use in Groww",
   "files": [
     "mi",

packages/mint-css/base/app.css

@@ -59,7 +59,6 @@ body {
   font-family: GrowwSans,NotoSans, system-ui;
   min-width: 320px;
   -webkit-font-smoothing: antialiased;
-  font-variant-ligatures: none;
 }
 
 a {

packages/mint-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@groww-tech/mint-css",
-  "version": "0.1.8",
+  "version": "0.1.6",
   "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": [

packages/mint-css/theme/index.css

@@ -1,13 +1,8 @@
 /* Token files */
-@import './utils/background-utils.css';
-@import './utils/border-utils.css';
-@import './utils/content-utils.css';
-@import './utils/temp-background-utils.css';
-@import './utils/interaction-state-utils.css';
-
 @import './tokens/background-tokens.css';
 @import './tokens/border-tokens.css';
 @import './tokens/content-tokens.css';
+@import './tokens/temp-background-tokens.css';
 @import './tokens/interaction-state-tokens.css';
 
 /* Variables */

packages/mint-css/theme/tokens/background-tokens.css

@@ -1,39 +1,117 @@
-html {
-  /* Base Theme */
-  --background-primary: var(--white);
-  --background-secondary: var(--gray50);
-  --background-tertiary: var(--gray100);
-  --background-transparent: var(--overlay00);
+.backgroundPrimary {
+  background-color: var(--white);
+}
+html[data-theme="dark"] .backgroundPrimary{
+  background-color: var(--black);
+}
+
+
+.backgroundSecondary {
+  background-color: var(--gray50);
+}
+
+
+.backgroundTertiary {
+  background-color: var(--gray100);
+}
+
+
+.backgroundTransparent {
+  background-color: var(--overlay00);
+}
+
+
+.backgroundSurfacePrimary {
+  background-color: var(--white);
+}
+html[data-theme="dark"] .backgroundSurfacePrimary {
+  background-color: var(--gray50);
+}
+
+
+.backgroundSurfaceSecondary {
+  background-color: var(--gray50);
+}
+html[data-theme="dark"] .backgroundSurfaceSecondary {
+  background-color: var(--gray100)
+}
+
+
+.backgroundInversePrimary {
+  background-color: var(--gray900);
+}
+html[data-theme="dark"] .backgroundInversePrimary{
+  background-color: var(--white);
+}
+
+
+.backgroundOverlayPrimary {
+  background-color: var(--overlay70);
+}
+
 
-  --background-surface-primary: var(--white);
-  --background-surface-secondary: var(--gray50);
+.backgroundOverlaySecondary {
+  background-color: var(--overlay30);
+}
+
+.backgroundAlwaysDark {
+  background-color: var(--black);
+}
+
+.backgroundAlwaysLight {
+  background-color: var(--white);
+}
+
+
+/*-------------------------------------------*/
+/*--------------Extended Tokens--------------*/
+/*-------------------------------------------*/
+
+.backgroundAccent {
+  background-color: var(--green500);
+}
 
-  --background-inverse-primary: var(--gray900);
 
-  --background-overlay-primary: var(--overlay70);
-  --background-overlay-secondary: var(--overlay30);
+.backgroundPositive {
+  background-color: var(--green500);
+}
 
-  --background-always-dark: var(--black);
-  --background-always-light: var(--white);
 
-  /* Extended Tokens */
-  --background-accent: var(--green500);
-  --background-positive: var(--green500);
-  --background-negative: var(--red500);
-  --background-warning: var(--yellow500);
+.backgroundNegative {
+  background-color: var(--red500);
+}
+
+
+.backgroundWarning {
+  background-color: var(--yellow500);
+}
 
-  --background-accent-subtle: var(--green100);
-  --background-positive-subtle: var(--green100);
-  --background-negative-subtle: var(--red100);
-  --background-warning-subtle: var(--yellow100);
 
-  --background-accent-secondary: var(--purple500);
-  --background-accent-secondary-subtle: var(--purple100);
+.backgroundAccentSubtle {
+  background-color: var(--green100);
 }
 
-html[data-theme="dark"] {
-  --background-primary: var(--black);
-  --background-surface-primary: var(--gray50);
-  --background-surface-secondary: var(--gray100);
-  --background-inverse-primary: var(--white);
+
+.backgroundPositiveSubtle {
+  background-color: var(--green100);
+}
+
+
+.backgroundNegativeSubtle {
+  background-color: var(--red100);
+}
+
+
+.backgroundWarningSubtle {
+  background-color: var(--yellow100);
+}
+
+
+.backgroundAccentSecondary {
+  background-color: var(--purple500);
+}
+
+
+.backgroundAccentSecondarySubtle {
+  background-color: var(--purple100);
 }

packages/mint-css/theme/tokens/border-tokens.css

@@ -1,16 +1,34 @@
-html {
-  /* Mapping of global colors to border tokens */
-  --border-primary: var(--gray150);
-  --border-disabled: var(--gray100);
-
-  --border-accent: var(--green500);
-  --border-positive: var(--green500);
-  --border-negative: var(--red500);
-  --border-neutral: var(--gray900);
-
-  /* Dark Theme Mapping */
+.borderPrimary {
+  border: 1px solid var(--gray150)
 }
 
-html[data-theme="dark"] {
-  --border-neutral: var(--white); /* Dark mode neutral color */
+/*-------------------------------------------*/
+/*--------------Extended Tokens--------------*/
+/*-------------------------------------------*/
+
+.borderDisabled {
+  border: 1px solid var(--gray100)
+}
+
+
+.borderAccent {
+  border: 1px solid var(--green500)
+}
+
+
+.borderPositive {
+  border: 1px solid var(--green500)
+}
+
+
+.borderNegative {
+  border: 1px solid var(--red500)
+}
+
+
+.borderNeutral {
+  border: 1px solid var(--gray900)
+}
+html[data-theme="dark"] .borderNeutral {
+  border: 1px solid var(--white);
 }

packages/mint-css/theme/tokens/content-tokens.css

@@ -1,27 +1,85 @@
-html {
-  /* Base Theme */
-  --content-primary: var(--gray900);
-  --content-secondary: var(--gray700);
-  --content-tertiary: var(--gray500);
-  --content-inverse-primary: var(--white);
-  --content-inverse-secondary: var(--gray300);
-  --content-disabled: var(--gray400);
-  --content-on-colour: var(--white);
-  --content-on-colour-inverse: var(--gray900);
-
-  /* Extended Tokens */
-  --content-accent: var(--green500);
-  --content-negative: var(--red500);
-  --content-warning: var(--yellow500);
-  --content-positive: var(--green500);
-  --content-accent-secondary: var(--purple500);
-  --content-accent-secondary-subtle: var(--purple300);
-}
-
-html[data-theme="dark"] {
-  --content-primary: var(--white);
-  --content-inverse-primary: var(--black);
-  --content-inverse-secondary: var(--gray400);
-  --content-disabled: var(--gray500);
-  --content-on-colour-inverse: var(--black);
-}
+.contentPrimary {
+  color: var(--gray900);
+}
+html[data-theme="dark"] .contentPrimary{
+  color: var(--white)
+}
+
+
+.contentSecondary {
+  color: var(--gray700);
+}
+
+
+.contentTertiary {
+  color: var(--gray500);
+}
+
+
+.contentInversePrimary {
+  color: var(--white);
+}
+html[data-theme="dark"] .contentInversePrimary{
+  color: var(--black)
+}
+
+.contentInverseSecondary {
+  color: var(--gray300);
+}
+html[data-theme="dark"] .contentInverseSecondary{
+  color: var(--gray400)
+}
+
+
+/*-------------------------------------------*/
+/*--------------Extended Tokens--------------*/
+/*-------------------------------------------*/
+
+.contentAccent {
+  color: var(--green500);
+}
+
+
+.contentNegative {
+  color: var(--red500);
+}
+
+
+.contentWarning {
+  color: var(--yellow500);
+}
+
+
+.contentPositive {
+  color: var(--green500);
+}
+
+
+.contentDisabled {
+  color: var(--gray400);
+}
+html[data-theme="dark"] .contentDisabled{
+  color: var(--gray500)
+}
+
+
+.contentOnColour {
+  color: var(--white);
+}
+
+
+.contentOnColourInverse {
+  color: var(--gray900);
+}
+html[data-theme="dark"] .contentOnColourInverse{
+  color: var(--black)
+}
+
+.contentAccentSecondary {
+  color: var(--purple500);
+}
+
+
+.contentAccentSecondarySubtle {
+  color: var(--purple300);
+}