@groww-tech/mint-css 0.2.1 → 0.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -2,7 +2,6 @@
|
|
|
2
2
|
<a href="https://groww.in/" rel="noopener" target="_blank"><img width="250" src="https://storage.googleapis.com/groww-assets/web-assets/img/website-logo/logo-light-groww.svg" alt="Groww"></a>
|
|
3
3
|
</p>
|
|
4
4
|
|
|
5
|
-
|
|
6
5
|
<h1 align="center">Mint CSS</h1>
|
|
7
6
|
|
|
8
7
|
<p align="center">A CSS library that provides classes, tokens, variables, fonts and other essential stylings governed under MINT design system, used by Groww</p>
|
|
@@ -30,53 +29,106 @@ import '@groww-tech/mint-css/dist/index.css';
|
|
|
30
29
|
```
|
|
31
30
|
|
|
32
31
|
The `dist/index.css` is complied and minfied version of the CSS library which will serve all the tokens/classes which can be used in your project.
|
|
32
|
+
|
|
33
|
+
## Fragments
|
|
34
|
+
|
|
35
|
+
If you prefer not to import all classes at once by using `'dist/index.css'` or want to use specific parts of **mint-css**, you can leverage **fragments**. Fragments allow you to import only the styles you need, keeping your bundle size smaller and more focused.
|
|
36
|
+
|
|
37
|
+
- **Optimized Imports:** Only include the CSS you need, reducing unused styles.
|
|
38
|
+
- **Flexibility:** Customize your usage by combining specific fragments as required.
|
|
39
|
+
- **Scalability:** Easily add or remove fragments as your project evolves.
|
|
40
|
+
|
|
41
|
+
#### Variables
|
|
42
|
+
|
|
43
|
+
Includes all design tokens, such as colors, spacing, and typography variables.
|
|
44
|
+
|
|
45
|
+
```
|
|
46
|
+
import '@groww-tech/mint-css/dist/fragments/allVariables.css';
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
#### Font Faces
|
|
50
|
+
|
|
51
|
+
Contains font-face declarations for the typography used in the design system. ex: GrowwSans
|
|
52
|
+
|
|
53
|
+
```
|
|
54
|
+
import '@groww-tech/mint-css/dist/fragments/fonts.css';
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
#### Theme Utilities
|
|
58
|
+
|
|
59
|
+
Provides utility classes for themes and other theming-related styles.
|
|
60
|
+
|
|
61
|
+
```
|
|
62
|
+
import '@groww-tech/mint-css/dist/fragments/themeUtilities.css';
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
#### Typography Utilities
|
|
66
|
+
|
|
67
|
+
Includes utility classes for typography, such as body, display, button typography.
|
|
68
|
+
|
|
69
|
+
```
|
|
70
|
+
import '@groww-tech/mint-css/dist/fragments/typographyUtilities.css';
|
|
71
|
+
```
|
|
72
|
+
|
|
33
73
|
## Features
|
|
34
74
|
|
|
35
75
|
### What are Tokens?
|
|
76
|
+
|
|
36
77
|
Tokens are abstract entity which denotes **symantic meaning** and store values. When you use `contentAccent`, you’re using a colour token which contains `#00B386` as its value, same is applicable to typography.
|
|
37
78
|
|
|
38
79
|
There are two categories through which we will be exposing various semantic tokens. The tokens are further categorized based on visual emphasis and hierarchy of the UI elements.
|
|
80
|
+
|
|
39
81
|
1. Typography tokens
|
|
40
82
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
83
|
+
`GrowwSans` and `NotoSans` font families will get downloaded once you install and import the library into your project. These are the tokens can be used -
|
|
84
|
+
|
|
85
|
+
- Body
|
|
86
|
+
- Display
|
|
87
|
+
- Heading
|
|
88
|
+
- Button
|
|
89
|
+
|
|
90
|
+
e.g. The token `bodySmall` says that, it can be used in body with regular font weight which have font size of 12pts.
|
|
91
|
+
|
|
92
|
+
```
|
|
93
|
+
.bodySmall {
|
|
94
|
+
font-size: var(--font-size-12);
|
|
95
|
+
font-weight: var(--font-weight-regular);
|
|
96
|
+
line-height: 1.5;
|
|
97
|
+
}
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
`<div className="bodySmall">Some content</div>`
|
|
101
|
+
|
|
102
|
+
***
|
|
103
|
+
|
|
58
104
|
2. Color tokens
|
|
59
105
|
|
|
60
|
-
|
|
106
|
+
Again, the color tokens are further classified into different categories and can be used in different styles depending on the UI elements
|
|
107
|
+
|
|
108
|
+
- Background
|
|
109
|
+
- Content
|
|
110
|
+
- Border
|
|
61
111
|
|
|
62
|
-
|
|
63
|
-
- Content
|
|
64
|
-
- Border
|
|
112
|
+
e.g. We have a token called contentPrimary which refers to the most important and essential information within a piece of content.
|
|
65
113
|
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
```
|
|
72
|
-
```<div className="contentPrimary">Some content</div>```
|
|
114
|
+
```
|
|
115
|
+
.contentPrimary {
|
|
116
|
+
color: var(--content-primary);
|
|
117
|
+
}
|
|
118
|
+
```
|
|
73
119
|
|
|
120
|
+
`<div className="contentPrimary">Some content</div>`
|
|
74
121
|
|
|
75
122
|
## Folder structure
|
|
76
123
|
|
|
77
124
|
```
|
|
78
125
|
└── mint-css/
|
|
79
126
|
├── dist/
|
|
127
|
+
│ ├── fragments/
|
|
128
|
+
│ │ ├── allVariables.css
|
|
129
|
+
│ │ ├── fonts.css
|
|
130
|
+
│ │ ├── themeUtilities.css
|
|
131
|
+
│ │ └──typographyUtilities.css
|
|
80
132
|
│ ├── font1.woff2
|
|
81
133
|
│ ├── font2.woff2
|
|
82
134
|
│ ├── index.css
|
|
@@ -119,6 +171,6 @@ There are two categories through which we will be exposing various semantic toke
|
|
|
119
171
|
|
|
120
172
|
MIT
|
|
121
173
|
|
|
122
|
-
|
|
174
|
+
---
|
|
123
175
|
|
|
124
|
-
>
|
|
176
|
+
> _This CSS library is customized for use in Groww projects. Use at your own risk._
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
html.color-theme-in-transition,html.color-theme-in-transition *,html.color-theme-in-transition :after,html.color-theme-in-transition :before{transition:all .3s!important;transition-delay:0!important}html{--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;--yellow11:#a16b00;--dangerouslySetPrimaryBg:#fff;--tempNbtPink:#f1e3f3;--tempNbtYellow:#fff3c8;--tempNbtBlue:#d6eeff;--tempNbtGray:#f0f0f2;--tempNbtRed:#ffc7bb}html,html[data-theme=dark]{--black:#121212;--white:#fff;--overlay00:rgba(18,18,18,0);--overlay30:rgba(18,18,18,0.3);--overlay70:rgba(18,18,18,0.7)}html[data-theme=dark]{--gray900:#f8f8f8;--gray800:#d1d1d1;--gray700:#b8b8b8;--gray600:#a0a0a0;--gray500:#888;--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;--yellow11:#f5bc56;--dangerouslySetPrimaryBg:#121212;--tempNbtPink:#9b63a3;--tempNbtYellow:#b27a00;--tempNbtBlue:#3e79a4;--tempNbtGray:#5c5c6f;--tempNbtRed:#c85d0f;--bg-transparent-hover:hsla(0,0%,100%,0.058823529411764705);--bg-accent-hover:#0ab18a;--bg-accent-subtle-hover:#103e33;--bg-transparent-accent-hover:rgba(10,187,146,0.058823529411764705);--bg-positive-hover:#0ab18a;--bg-positive-subtle-hover:#103e33;--bg-transparent-positive-hover:rgba(10,187,146,0.058823529411764705);--bg-negative-hover:#c95036;--bg-negative-subtle-hover:#4a2018;--bg-transparent-negative-hover:rgba(213,84,56,0.058823529411764705);--bg-transparent-selected:hsla(0,0%,100%,0.058823529411764705);--bg-accent-selected:#0ab18a;--bg-accent-subtle-selected:#103e33;--bg-transparent-accent-selected:rgba(10,187,146,0.058823529411764705);--bg-positive-selected:#0ab18a;--bg-positive-subtle-selected:#103e33;--bg-transparent-positive-selected:rgba(10,187,146,0.058823529411764705);--bg-negative-selected:#c95036;--bg-negative-subtle-selected:#4a2018;--bg-transparent-negative-selected:rgba(213,84,56,0.058823529411764705)}html{--background-primary:var(--white);--background-secondary:var(--gray50);--background-tertiary:var(--gray100);--background-transparent:var(--overlay00);--background-surface-primary:var(--white);--background-surface-secondary:var(--gray50);--background-inverse-primary:var(--gray900);--background-overlay-primary:var(--overlay70);--background-overlay-secondary:var(--overlay30);--background-always-dark:var(--black);--background-always-light:var(--white);--background-accent:var(--green500);--background-positive:var(--green500);--background-negative:var(--red500);--background-warning: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)}html[data-theme=dark]{--background-primary:var(--black);--background-surface-primary:var(--gray50);--background-surface-secondary:var(--gray100);--background-inverse-primary:var(--white)}html{--border-primary:var(--gray150);--border-disabled:var(--gray100);--border-accent:var(--green500);--border-positive:var(--green500);--border-negative:var(--red500);--border-neutral:var(--gray900)}html[data-theme=dark]{--border-neutral:var(--white)}html{--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);--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);--content-on-warning-subtle:var(--yellow11)}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)}html{--bg-transparent-hover:rgba(68,71,91,0.058823529411764705);--bg-accent-hover:#04ad83;--bg-accent-subtle-hover:#ddf5ee;--bg-transparent-accent-hover:rgba(0,179,134,0.058823529411764705);--bg-positive-hover:#04ad83;--bg-positive-subtle-hover:#ddf5ee;--bg-transparent-positive-hover:rgba(0,179,134,0.058823529411764705);--bg-negative-hover:#e15a3e;--bg-negative-subtle-hover:#f9e0db;--bg-transparent-negative-hover:rgba(235,91,60,0.058823529411764705);--bg-transparent-selected:rgba(68,71,91,0.058823529411764705);--bg-accent-selected:#04ad83;--bg-accent-subtle-selected:#ddf5ee;--bg-transparent-accent-selected:rgba(0,179,134,0.058823529411764705);--bg-positive-selected:#04ad83;--bg-positive-subtle-selected:#ddf5ee;--bg-transparent-positive-selected:rgba(0,179,134,0.058823529411764705);--bg-negative-selected:#e15a3e;--bg-negative-subtle-selected:#f9e0db;--bg-transparent-negative-selected:rgba(235,91,60,0.058823529411764705);--font-size-12:0.75rem;--font-size-14:0.875rem;--font-size-16:1rem;--font-size-18:1.125rem;--font-size-20:1.25rem;--font-size-22:1.375rem;--font-size-24:1.5rem;--font-size-28:1.75rem;--font-size-32:2rem;--font-size-40:2.5rem;--font-size-44:2.75rem;--font-size-56:3.5rem;--font-weight-regular:435;--font-weight-medium:535;--font-weight-bold:660}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@font-face{font-family:GrowwSans;font-style:normal;font-weight:300 700;src:url(../GrowwSans-Variable.woff2) format("woff2-variations");font-display:swap}@font-face{font-family:NotoSans;font-style:normal;font-weight:500;src:url(../NotoSans-Regular.woff2) format("woff2");unicode-range:u+0900-097f;font-display:swap}@font-face{font-family:NotoSans;font-style:normal;font-weight:600;src:url(../NotoSans-Medium.woff2) format("woff2");unicode-range:u+0900-097f;font-display:swap}@font-face{font-family:NotoSans;font-style:normal;font-weight:700;src:url(../NotoSans-SemiBold.woff2) format("woff2");unicode-range:u+0900-097f;font-display:swap}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
/* ! don't forget to import variables when using these utilities in your project */.backgroundPrimary{background-color:var(--background-primary)}.backgroundSecondary{background-color:var(--background-secondary)}.backgroundTertiary{background-color:var(--background-tertiary)}.backgroundTransparent{background-color:var(--background-transparent)}.backgroundSurfacePrimary{background-color:var(--background-surface-primary)}.backgroundSurfaceSecondary{background-color:var(--background-surface-secondary)}.backgroundInversePrimary{background-color:var(--background-inverse-primary)}.backgroundOverlayPrimary{background-color:var(--background-overlay-primary)}.backgroundOverlaySecondary{background-color:var(--background-overlay-secondary)}.backgroundAlwaysDark{background-color:var(--background-always-dark)}.backgroundAlwaysLight{background-color:var(--background-always-light)}.backgroundAccent{background-color:var(--background-accent)}.backgroundPositive{background-color:var(--background-positive)}.backgroundNegative{background-color:var(--background-negative)}.backgroundWarning{background-color:var(--background-warning)}.backgroundAccentSubtle{background-color:var(--background-accent-subtle)}.backgroundPositiveSubtle{background-color:var(--background-positive-subtle)}.backgroundNegativeSubtle{background-color:var(--background-negative-subtle)}.backgroundWarningSubtle{background-color:var(--background-warning-subtle)}.backgroundAccentSecondary{background-color:var(--background-accent-secondary)}.backgroundAccentSecondarySubtle{background-color:var(--background-accent-secondary-subtle)}.borderPrimary{border:1px solid var(--border-primary)}.borderDisabled{border:1px solid var(--border-disabled)}.borderAccent{border:1px solid var(--border-accent)}.borderPositive{border:1px solid var(--border-positive)}.borderNegative{border:1px solid var(--border-negative)}.borderNeutral{border:1px solid var(--border-neutral)}.contentPrimary{color:var(--content-primary)}.contentSecondary{color:var(--content-secondary)}.contentTertiary{color:var(--content-tertiary)}.contentInversePrimary{color:var(--content-inverse-primary)}.contentInverseSecondary{color:var(--content-inverse-secondary)}.contentAccent{color:var(--content-accent)}.contentNegative{color:var(--content-negative)}.contentWarning{color:var(--content-warning)}.contentPositive{color:var(--content-positive)}.contentDisabled{color:var(--content-disabled)}.contentOnColour{color:var(--content-on-colour)}.contentOnColourInverse{color:var(--content-on-colour-inverse)}.contentAccentSecondary{color:var(--content-accent-secondary)}.contentAccentSecondarySubtle{color:var(--content-accent-secondary-subtle)}.contentOnWarningSubtle{color:var(--content-on-warning-subtle)}.backgroundTransparentHover:hover{background-color:var(--bg-transparent-hover)}.backgroundAccentHover:hover{background-color:var(--bg-accent-hover)}.backgroundAccentSubtleHover:hover{background-color:var(--bg-accent-subtle-hover)}.backgroundTransparentAccentHover:hover{background-color:var(--bg-transparent-accent-hover)}.backgroundPositiveHover:hover{background-color:var(--bg-positive-hover)}.backgroundPositiveSubtleHover:hover{background-color:var(--bg-positive-subtle-hover)}.backgroundTransparentPositiveHover:hover{background-color:var(--bg-transparent-positive-hover)}.backgroundNegativeHover:hover{background-color:var(--bg-negative-hover)}.backgroundNegativeSubtleHover:hover{background-color:var(--bg-negative-subtle-hover)}.backgroundTransparentNegativeHover:hover{background-color:var(--bg-transparent-negative-hover)}.backgroundTransparentSelected:active{background-color:var(--bg-transparent-selected)}.backgroundAccentSelected:active{background-color:var(--bg-accent-selected)}.backgroundAccentSubtleSelected:active{background-color:var(--bg-accent-subtle-selected)}.backgroundTransparentAccentSelected:active{background-color:var(--bg-transparent-accent-selected)}.backgroundPositiveSelected:active{background-color:var(--bg-positive-selected)}.backgroundPositiveSubtleSelected:active{background-color:var(--bg-positive-subtle-selected)}.backgroundTransparentPositiveSelected:active{background-color:var(--bg-transparent-positive-selected)}.backgroundNegativeSelected:active{background-color:var(--bg-negative-selected)}.backgroundNegativeSubtleSelected:active{background-color:var(--bg-negative-subtle-selected)}.backgroundTransparentNegativeSelected:active{background-color:var(--bg-transparent-negative-selected)}.tempNbtBackgroundPink{background-color:var(--tempNbtPink)}.tempNbtBackgroundYellow{background-color:var(--tempNbtYellow)}.tempNbtBackgroundBlue{background-color:var(--tempNbtBlue)}.tempNbtBackgroundGray{background-color:var(--tempNbtGray)}.tempNbtBackgroundRed{background-color:var(--tempNbtRed)}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
/* ! don't forget to import variables when using these utilities in your project */.bodySmall{font-weight:var(--font-weight-regular)}.bodySmall,.bodySmallHeavy{font-size:var(--font-size-12);line-height:1.125rem}.bodySmallHeavy{font-weight:var(--font-weight-medium)}.bodyBase{font-weight:var(--font-weight-regular)}.bodyBase,.bodyBaseHeavy{font-size:var(--font-size-14);line-height:1.25rem}.bodyBaseHeavy{font-weight:var(--font-weight-medium)}.bodyLarge{font-weight:var(--font-weight-regular)}.bodyLarge,.bodyLargeHeavy{font-size:var(--font-size-16);line-height:1.375rem}.bodyLargeHeavy{font-weight:var(--font-weight-medium)}.bodyXLarge{font-weight:var(--font-weight-regular)}.bodyXLarge,.bodyXLargeHeavy{font-size:var(--font-size-18);line-height:1.5625rem}.bodyXLargeHeavy,.buttonSentenceCase14{font-weight:var(--font-weight-medium)}.buttonSentenceCase14{font-size:var(--font-size-14);line-height:1rem}.buttonUpperCase16{font-size:var(--font-size-16);font-weight:var(--font-weight-bold);line-height:1.25rem}.displaySmall{font-size:var(--font-size-24);line-height:2.0625rem}.displayBase,.displaySmall{font-weight:var(--font-weight-medium)}.displayBase{font-size:var(--font-size-28);line-height:2.4375rem}.displayLarge{font-size:var(--font-size-32);line-height:2.75rem}.displayLarge,.displayXLarge{font-weight:var(--font-weight-medium)}.displayXLarge{font-size:var(--font-size-40);line-height:3.5rem}.headingXSmall{font-size:var(--font-size-14);line-height:1.25rem}.headingSmall,.headingXSmall{font-weight:var(--font-weight-medium)}.headingSmall{font-size:var(--font-size-16);line-height:1.375rem}.headingBase{font-size:var(--font-size-18);line-height:1.5625rem}.headingBase,.headingLarge{font-weight:var(--font-weight-medium)}.headingLarge{font-size:var(--font-size-20);line-height:2rem}
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
html{box-sizing:border-box}#root{--zindex10001:10001;--zindex900:900;--zindex800:800;--zindex700:700;--zindex600:600;--zindex500:500;--zindex400:400;--zindex300:300;--zindex1:-1}*,:after,:before{box-sizing:inherit}*{font-variant-ligatures:none}div,i{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}h1,h2,h3,h4,h5,h6,p,span{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;-khtml-user-select:text;user-select:text}body{background:var(--dangerouslySetPrimaryBg)!important;color:var(--content-primary)!important;margin:0;box-sizing:border-box;font-weight:435;font-family:GrowwSans,NotoSans,system-ui;min-width:320px;-webkit-font-smoothing:antialiased}a{color:var(--content-accent);text-decoration:none}input[type=number]{-moz-appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}button,input,pre,select,textarea{font-family:inherit}.row{margin-left:auto;margin-right:auto}.row:after{content:"";display:table;clear:both}.row .col{float:left;box-sizing:border-box;min-height:1px}@media only screen and (min-width:800px){.row .col.l1{width:8.33333%}.row .col.l1,.row .col.l2{margin-left:auto;left:auto;right:auto}.row .col.l2{width:16.66667%}.row .col.l3{width:25%}.row .col.l3,.row .col.l4{margin-left:auto;left:auto;right:auto}.row .col.l4{width:33.33333%}.row .col.l5{width:41.66667%}.row .col.l5,.row .col.l6{margin-left:auto;left:auto;right:auto}.row .col.l6{width:50%}.row .col.l7{width:58.33333%}.row .col.l7,.row .col.l8{margin-left:auto;left:auto;right:auto}.row .col.l8{width:66.66667%}.row .col.l9{width:75%}.row .col.l9,.row .col.l10{margin-left:auto;left:auto;right:auto}.row .col.l10{width:83.33333%}.row .col.l11{width:91.66667%}.row .col.l11,.row .col.l12{margin-left:auto;left:auto;right:auto}.row .col.l12{width:100%}.row .col.l5ths{width:20%;margin-left:auto;left:auto;right:auto}.row .col.offset-l1{margin-left:8.33333%}.row .col.offset-l2{margin-left:16.66667%}.row .col.offset-l3{margin-left:25%}.row .col.offset-l4{margin-left:33.33333%}.row .col.offset-l5{margin-left:41.66667%}.row .col.offset-l6{margin-left:50%}.row .col.offset-l7{margin-left:58.33333%}.row .col.offset-l8{margin-left:66.66667%}.row .col.offset-l9{margin-left:75%}.row .col.offset-l10{margin-left:83.33333%}.row .col.offset-l11{margin-left:91.66667%}.row .col.offset-l12{margin-left:100%}}@media only screen and (min-width:601px){.row .col.m1{width:8.33333%}.row .col.m1,.row .col.m2{margin-left:auto;left:auto;right:auto}.row .col.m2{width:16.66667%}.row .col.m3{width:25%}.row .col.m3,.row .col.m4{margin-left:auto;left:auto;right:auto}.row .col.m4{width:33.33333%}.row .col.m5{width:41.66667%}.row .col.m5,.row .col.m6{margin-left:auto;left:auto;right:auto}.row .col.m6{width:50%}.row .col.m7{width:58.33333%}.row .col.m7,.row .col.m8{margin-left:auto;left:auto;right:auto}.row .col.m8{width:66.66667%}.row .col.m9{width:75%}.row .col.m9,.row .col.m10{margin-left:auto;left:auto;right:auto}.row .col.m10{width:83.33333%}.row .col.m11{width:91.66667%}.row .col.m11,.row .col.m12{margin-left:auto;left:auto;right:auto}.row .col.m12{width:100%}.row .col.offset-m1{margin-left:8.33333%}.row .col.offset-m2{margin-left:16.66667%}.row .col.offset-m3{margin-left:25%}.row .col.offset-m4{margin-left:33.33333%}.row .col.offset-m5{margin-left:41.66667%}.row .col.offset-m6{margin-left:50%}.row .col.offset-m7{margin-left:58.33333%}.row .col.offset-m8{margin-left:66.66667%}.row .col.offset-m9{margin-left:75%}.row .col.offset-m10{margin-left:83.33333%}.row .col.offset-m11{margin-left:91.66667%}.row .col.offset-m12{margin-left:100%}}.row .col.s1{width:8.33333%}.row .col.s1,.row .col.s2{margin-left:auto;left:auto;right:auto}.row .col.s2{width:16.66667%}.row .col.s3{width:25%}.row .col.s3,.row .col.s4{margin-left:auto;left:auto;right:auto}.row .col.s4{width:33.33333%}.row .col.s5{width:41.66667%}.row .col.s5,.row .col.s6{margin-left:auto;left:auto;right:auto}.row .col.s6{width:50%}.row .col.s7{width:58.33333%}.row .col.s7,.row .col.s8{margin-left:auto;left:auto;right:auto}.row .col.s8{width:66.66667%}.row .col.s9{width:75%}.row .col.s9,.row .col.s10{margin-left:auto;left:auto;right:auto}.row .col.s10{width:83.33333%}.row .col.s11{width:91.66667%}.row .col.s11,.row .col.s12{margin-left:auto;left:auto;right:auto}.row .col.s12{width:100%}.row .col.offset-s1{margin-left:8.33333%}.row .col.offset-s2{margin-left:16.66667%}.row .col.offset-s3{margin-left:25%}.row .col.offset-s4{margin-left:33.33333%}.row .col.offset-s5{margin-left:41.66667%}.row .col.offset-s6{margin-left:50%}.row .col.offset-s7{margin-left:58.33333%}.row .col.offset-s8{margin-left:66.66667%}.row .col.offset-s9{margin-left:75%}.row .col.offset-s10{margin-left:83.33333%}.row .col.offset-s11{margin-left:91.66667%}.row .col.offset-s12{margin-left:100%}.ph-item{position:relative;display:flex;flex-wrap:wrap;overflow:hidden}.ph-item,.ph-item *,.ph-item :after,.ph-item :before{box-sizing:border-box}.ph-item:before{content:" ";position:absolute;top:0;right:0;bottom:0;left:50%;z-index:1;width:500%;margin-left:-250%;animation:phAnimation .8s linear infinite;background:linear-gradient(90deg,hsla(0,0%,100%,0) 46%,hsla(0,0%,100%,.35) 50%,hsla(0,0%,100%,0) 54%) 50% 50%}.ph-item>*{flex:1 1 auto;display:flex;flex-flow:column}.ph-row{display:flex;flex-wrap:wrap}.ph-row div{height:10px;margin-bottom:7.5px;background-color:rgba(206,212,218,.23137254901960785)}.ph-row .big,.ph-row.big div{height:20px;margin-bottom:15px}.ph-row .empty{background-color:hsla(0,0%,100%,0)}.ph-col-2{flex:0 0 16.6666666667%}.ph-col-4{flex:0 0 33.3333333333%}.ph-col-6{flex:0 0 50%}.ph-col-8{flex:0 0 66.6666666667%}.ph-col-10{flex:0 0 83.3333333333%}.ph-col-12{flex:0 0 100%}.ph-avatar{position:relative;width:100%;min-width:60px;background-color:rgba(206,212,218,.23137254901960785);margin-bottom:15px;border-radius:50%;overflow:hidden}.ph-avatar:before{content:" ";display:block;padding-top:100%}.ph-picture{width:100%;height:120px;background-color:rgba(206,212,218,.23137254901960785);margin-bottom:15px}@keyframes phAnimation{0%{transform:translate3d(-30%,0,0)}to{transform:translate3d(30%,0,0)}}.hide{display:none}.absolute-center{display:flex;align-items:center;justify-content:center}.flex{display:flex}.valign-wrapper{display:flex;align-items:center}.halign-wrapper{display:flex;justify-content:center}.vspace-between{justify-content:space-between}.flex-column{flex-direction:column}.right-align{text-align:right}.left-align{text-align:left}.center-align{text-align:center}.responsive-img{max-width:100%;height:auto}.onMount-appear{opacity:.01}.onMount-appear.onMount-appear-active{opacity:1;transition:opacity .5s ease-in}.truncate{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.web-align{max-width:1280px;padding-inline:32px;width:100%;margin:0 auto}.web-align-w-1110{max-width:1110px;width:100%;margin:0 auto}.dropdown{display:inline-block}.dropdown__content{display:none;position:absolute}.dropdown--active .dropdown__content{display:block}.pos-rel{position:relative}.pos-abs{position:absolute}.circle{border-radius:50%}.fullWidth{width:100%}.page-padding{padding:0 16px}.cur-po{cursor:pointer}.cur-no{cursor:not-allowed}.flo-r{float:right}.flo-l{float:left}.width100{width:100%}.height100{height:100%}.card{border-radius:5px}.clickable-text{font-weight:500;line-height:1.29;letter-spacing:.23px;color:var(--content-accent);margin-left:5px;cursor:pointer}.dashed-hr-border{display:block;margin:2px auto;border-style:dashed;border-width:1px;opacity:.2;color:var(--content-secondary);width:100%}.blurEffect1{filter:blur(3px)}.clearfix:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.clearfix{display:inline-block}html[xmlns] .clearfix{display:block}* html .clearfix{height:1%}.componentsMainHeading{font-weight:500;color:var(--content-primary);margin:0}.backgroundPrimary{background-color:var(--background-primary)}.backgroundSecondary{background-color:var(--background-secondary)}.backgroundTertiary{background-color:var(--background-tertiary)}.backgroundTransparent{background-color:var(--background-transparent)}.backgroundSurfacePrimary{background-color:var(--background-surface-primary)}.backgroundSurfaceSecondary{background-color:var(--background-surface-secondary)}.backgroundInversePrimary{background-color:var(--background-inverse-primary)}.backgroundOverlayPrimary{background-color:var(--background-overlay-primary)}.backgroundOverlaySecondary{background-color:var(--background-overlay-secondary)}.backgroundAlwaysDark{background-color:var(--background-always-dark)}.backgroundAlwaysLight{background-color:var(--background-always-light)}.backgroundAccent{background-color:var(--background-accent)}.backgroundPositive{background-color:var(--background-positive)}.backgroundNegative{background-color:var(--background-negative)}.backgroundWarning{background-color:var(--background-warning)}.backgroundAccentSubtle{background-color:var(--background-accent-subtle)}.backgroundPositiveSubtle{background-color:var(--background-positive-subtle)}.backgroundNegativeSubtle{background-color:var(--background-negative-subtle)}.backgroundWarningSubtle{background-color:var(--background-warning-subtle)}.backgroundAccentSecondary{background-color:var(--background-accent-secondary)}.backgroundAccentSecondarySubtle{background-color:var(--background-accent-secondary-subtle)}.borderPrimary{border:1px solid var(--border-primary)}.borderDisabled{border:1px solid var(--border-disabled)}.borderAccent{border:1px solid var(--border-accent)}.borderPositive{border:1px solid var(--border-positive)}.borderNegative{border:1px solid var(--border-negative)}.borderNeutral{border:1px solid var(--border-neutral)}.contentPrimary{color:var(--content-primary)}.contentSecondary{color:var(--content-secondary)}.contentTertiary{color:var(--content-tertiary)}.contentInversePrimary{color:var(--content-inverse-primary)}.contentInverseSecondary{color:var(--content-inverse-secondary)}.contentAccent{color:var(--content-accent)}.contentNegative{color:var(--content-negative)}.contentWarning{color:var(--content-warning)}.contentPositive{color:var(--content-positive)}.contentDisabled{color:var(--content-disabled)}.contentOnColour{color:var(--content-on-colour)}.contentOnColourInverse{color:var(--content-on-colour-inverse)}.contentAccentSecondary{color:var(--content-accent-secondary)}.contentAccentSecondarySubtle{color:var(--content-accent-secondary-subtle)}.tempNbtBackgroundPink{background-color:var(--tempNbtPink)}.tempNbtBackgroundYellow{background-color:var(--tempNbtYellow)}.tempNbtBackgroundBlue{background-color:var(--tempNbtBlue)}.tempNbtBackgroundGray{background-color:var(--tempNbtGray)}.tempNbtBackgroundRed{background-color:var(--tempNbtRed)}.backgroundTransparentHover:hover{background-color:var(--bg-transparent-hover)}.backgroundAccentHover:hover{background-color:var(--bg-accent-hover)}.backgroundAccentSubtleHover:hover{background-color:var(--bg-accent-subtle-hover)}.backgroundTransparentAccentHover:hover{background-color:var(--bg-transparent-accent-hover)}.backgroundPositiveHover:hover{background-color:var(--bg-positive-hover)}.backgroundPositiveSubtleHover:hover{background-color:var(--bg-positive-subtle-hover)}.backgroundTransparentPositiveHover:hover{background-color:var(--bg-transparent-positive-hover)}.backgroundNegativeHover:hover{background-color:var(--bg-negative-hover)}.backgroundNegativeSubtleHover:hover{background-color:var(--bg-negative-subtle-hover)}.backgroundTransparentNegativeHover:hover{background-color:var(--bg-transparent-negative-hover)}.backgroundTransparentSelected:active{background-color:var(--bg-transparent-selected)}.backgroundAccentSelected:active{background-color:var(--bg-accent-selected)}.backgroundAccentSubtleSelected:active{background-color:var(--bg-accent-subtle-selected)}.backgroundTransparentAccentSelected:active{background-color:var(--bg-transparent-accent-selected)}.backgroundPositiveSelected:active{background-color:var(--bg-positive-selected)}.backgroundPositiveSubtleSelected:active{background-color:var(--bg-positive-subtle-selected)}.backgroundTransparentPositiveSelected:active{background-color:var(--bg-transparent-positive-selected)}.backgroundNegativeSelected:active{background-color:var(--bg-negative-selected)}.backgroundNegativeSubtleSelected:active{background-color:var(--bg-negative-subtle-selected)}.backgroundTransparentNegativeSelected:active{background-color:var(--bg-transparent-negative-selected)}html{--background-primary:var(--white);--background-secondary:var(--gray50);--background-tertiary:var(--gray100);--background-transparent:var(--overlay00);--background-surface-primary:var(--white);--background-surface-secondary:var(--gray50);--background-inverse-primary:var(--gray900);--background-overlay-primary:var(--overlay70);--background-overlay-secondary:var(--overlay30);--background-always-dark:var(--black);--background-always-light:var(--white);--background-accent:var(--green500);--background-positive:var(--green500);--background-negative:var(--red500);--background-warning: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)}html[data-theme=dark]{--background-primary:var(--black);--background-surface-primary:var(--gray50);--background-surface-secondary:var(--gray100);--background-inverse-primary:var(--white)}html{--border-primary:var(--gray150);--border-disabled:var(--gray100);--border-accent:var(--green500);--border-positive:var(--green500);--border-negative:var(--red500);--border-neutral:var(--gray900)}html[data-theme=dark]{--border-neutral:var(--white)}html{--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);--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)}html{--bg-transparent-hover:rgba(68,71,91,0.058823529411764705);--bg-accent-hover:#04ad83;--bg-accent-subtle-hover:#ddf5ee;--bg-transparent-accent-hover:rgba(0,179,134,0.058823529411764705);--bg-positive-hover:#04ad83;--bg-positive-subtle-hover:#ddf5ee;--bg-transparent-positive-hover:rgba(0,179,134,0.058823529411764705);--bg-negative-hover:#e15a3e;--bg-negative-subtle-hover:#f9e0db;--bg-transparent-negative-hover:rgba(235,91,60,0.058823529411764705);--bg-transparent-selected:rgba(68,71,91,0.058823529411764705);--bg-accent-selected:#04ad83;--bg-accent-subtle-selected:#ddf5ee;--bg-transparent-accent-selected:rgba(0,179,134,0.058823529411764705);--bg-positive-selected:#04ad83;--bg-positive-subtle-selected:#ddf5ee;--bg-transparent-positive-selected:rgba(0,179,134,0.058823529411764705);--bg-negative-selected:#e15a3e;--bg-negative-subtle-selected:#f9e0db;--bg-transparent-negative-selected:rgba(235,91,60,0.058823529411764705)}html.color-theme-in-transition,html.color-theme-in-transition *,html.color-theme-in-transition :after,html.color-theme-in-transition :before{transition:all .3s!important;transition-delay:0!important}html{--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;--dangerouslySetPrimaryBg:#fff;--tempNbtPink:#f1e3f3;--tempNbtYellow:#fff3c8;--tempNbtBlue:#d6eeff;--tempNbtGray:#f0f0f2;--tempNbtRed:#ffc7bb}html,html[data-theme=dark]{--black:#121212;--white:#fff;--overlay00:rgba(18,18,18,0);--overlay30:rgba(18,18,18,0.3);--overlay70:rgba(18,18,18,0.7)}html[data-theme=dark]{--gray900:#f8f8f8;--gray800:#d1d1d1;--gray700:#b8b8b8;--gray600:#a0a0a0;--gray500:#888;--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;--dangerouslySetPrimaryBg:#121212;--tempNbtPink:#9b63a3;--tempNbtYellow:#b27a00;--tempNbtBlue:#3e79a4;--tempNbtGray:#5c5c6f;--tempNbtRed:#c85d0f;--bg-transparent-hover:hsla(0,0%,100%,0.058823529411764705);--bg-accent-hover:#0ab18a;--bg-accent-subtle-hover:#103e33;--bg-transparent-accent-hover:rgba(10,187,146,0.058823529411764705);--bg-positive-hover:#0ab18a;--bg-positive-subtle-hover:#103e33;--bg-transparent-positive-hover:rgba(10,187,146,0.058823529411764705);--bg-negative-hover:#c95036;--bg-negative-subtle-hover:#4a2018;--bg-transparent-negative-hover:rgba(213,84,56,0.058823529411764705);--bg-transparent-selected:hsla(0,0%,100%,0.058823529411764705);--bg-accent-selected:#0ab18a;--bg-accent-subtle-selected:#103e33;--bg-transparent-accent-selected:rgba(10,187,146,0.058823529411764705);--bg-positive-selected:#0ab18a;--bg-positive-subtle-selected:#103e33;--bg-transparent-positive-selected:rgba(10,187,146,0.058823529411764705);--bg-negative-selected:#c95036;--bg-negative-subtle-selected:#4a2018;--bg-transparent-negative-selected:rgba(213,84,56,0.058823529411764705)}@font-face{font-family:GrowwSans;font-style:normal;font-weight:300 700;src:url(GrowwSans-Variable.woff2) format("woff2-variations");font-display:swap}@font-face{font-family:NotoSans;font-style:normal;font-weight:500;src:url(NotoSans-Regular.woff2) format("woff2");unicode-range:u+0900-097f;font-display:swap}@font-face{font-family:NotoSans;font-style:normal;font-weight:600;src:url(NotoSans-Medium.woff2) format("woff2");unicode-range:u+0900-097f;font-display:swap}@font-face{font-family:NotoSans;font-style:normal;font-weight:700;src:url(NotoSans-SemiBold.woff2) format("woff2");unicode-range:u+0900-097f;font-display:swap}.bodySmall{font-weight:var(--font-weight-regular)}.bodySmall,.bodySmallHeavy{font-size:var(--font-size-12);line-height:1.125rem}.bodySmallHeavy{font-weight:var(--font-weight-medium)}.bodyBase{font-weight:var(--font-weight-regular)}.bodyBase,.bodyBaseHeavy{font-size:var(--font-size-14);line-height:1.25rem}.bodyBaseHeavy{font-weight:var(--font-weight-medium)}.bodyLarge{font-weight:var(--font-weight-regular)}.bodyLarge,.bodyLargeHeavy{font-size:var(--font-size-16);line-height:1.375rem}.bodyLargeHeavy{font-weight:var(--font-weight-medium)}.bodyXLarge{font-weight:var(--font-weight-regular)}.bodyXLarge,.bodyXLargeHeavy{font-size:var(--font-size-18);line-height:1.5625rem}.bodyXLargeHeavy,.displaySmall{font-weight:var(--font-weight-medium)}.displaySmall{font-size:var(--font-size-24);line-height:2.0625rem}.displayBase{font-size:var(--font-size-28);line-height:2.4375rem}.displayBase,.displayLarge{font-weight:var(--font-weight-medium)}.displayLarge{font-size:var(--font-size-32);line-height:2.75rem}.displayXLarge{font-size:var(--font-size-40);line-height:3.5rem}.buttonSentenceCase14,.displayXLarge{font-weight:var(--font-weight-medium)}.buttonSentenceCase14{font-size:var(--font-size-14);line-height:1rem}.buttonUpperCase16{font-size:var(--font-size-16);font-weight:var(--font-weight-bold);line-height:1.25rem}.headingXSmall{font-size:var(--font-size-14);line-height:1.25rem}.headingSmall,.headingXSmall{font-weight:var(--font-weight-medium)}.headingSmall{font-size:var(--font-size-16);line-height:1.375rem}.headingBase{font-size:var(--font-size-18);line-height:1.5625rem}.headingBase,.headingLarge{font-weight:var(--font-weight-medium)}.headingLarge{font-size:var(--font-size-20);line-height:2rem}html{--font-size-12:0.75rem;--font-size-14:0.875rem;--font-size-16:1rem;--font-size-18:1.125rem;--font-size-20:1.25rem;--font-size-22:1.375rem;--font-size-24:1.5rem;--font-size-28:1.75rem;--font-size-32:2rem;--font-size-40:2.5rem;--font-size-44:2.75rem;--font-size-56:3.5rem;--font-weight-regular:435;--font-weight-medium:535;--font-weight-bold:660}
|
|
1
|
+
html{box-sizing:border-box}#root{--zindex10001:10001;--zindex900:900;--zindex800:800;--zindex700:700;--zindex600:600;--zindex500:500;--zindex400:400;--zindex300:300;--zindex1:-1}*,:after,:before{box-sizing:inherit}*{font-variant-ligatures:none}div,i{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}h1,h2,h3,h4,h5,h6,p,span{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;-khtml-user-select:text;user-select:text}body{background:var(--dangerouslySetPrimaryBg)!important;color:var(--content-primary)!important;margin:0;box-sizing:border-box;font-weight:435;font-family:GrowwSans,NotoSans,system-ui;min-width:320px;-webkit-font-smoothing:antialiased}a{color:var(--content-accent);text-decoration:none}input[type=number]{-moz-appearance:textfield}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}button,input,pre,select,textarea{font-family:inherit}.row{margin-left:auto;margin-right:auto}.row:after{content:"";display:table;clear:both}.row .col{float:left;box-sizing:border-box;min-height:1px}@media only screen and (min-width:800px){.row .col.l1{width:8.33333%}.row .col.l1,.row .col.l2{margin-left:auto;left:auto;right:auto}.row .col.l2{width:16.66667%}.row .col.l3{width:25%}.row .col.l3,.row .col.l4{margin-left:auto;left:auto;right:auto}.row .col.l4{width:33.33333%}.row .col.l5{width:41.66667%}.row .col.l5,.row .col.l6{margin-left:auto;left:auto;right:auto}.row .col.l6{width:50%}.row .col.l7{width:58.33333%}.row .col.l7,.row .col.l8{margin-left:auto;left:auto;right:auto}.row .col.l8{width:66.66667%}.row .col.l9{width:75%}.row .col.l9,.row .col.l10{margin-left:auto;left:auto;right:auto}.row .col.l10{width:83.33333%}.row .col.l11{width:91.66667%}.row .col.l11,.row .col.l12{margin-left:auto;left:auto;right:auto}.row .col.l12{width:100%}.row .col.l5ths{width:20%;margin-left:auto;left:auto;right:auto}.row .col.offset-l1{margin-left:8.33333%}.row .col.offset-l2{margin-left:16.66667%}.row .col.offset-l3{margin-left:25%}.row .col.offset-l4{margin-left:33.33333%}.row .col.offset-l5{margin-left:41.66667%}.row .col.offset-l6{margin-left:50%}.row .col.offset-l7{margin-left:58.33333%}.row .col.offset-l8{margin-left:66.66667%}.row .col.offset-l9{margin-left:75%}.row .col.offset-l10{margin-left:83.33333%}.row .col.offset-l11{margin-left:91.66667%}.row .col.offset-l12{margin-left:100%}}@media only screen and (min-width:601px){.row .col.m1{width:8.33333%}.row .col.m1,.row .col.m2{margin-left:auto;left:auto;right:auto}.row .col.m2{width:16.66667%}.row .col.m3{width:25%}.row .col.m3,.row .col.m4{margin-left:auto;left:auto;right:auto}.row .col.m4{width:33.33333%}.row .col.m5{width:41.66667%}.row .col.m5,.row .col.m6{margin-left:auto;left:auto;right:auto}.row .col.m6{width:50%}.row .col.m7{width:58.33333%}.row .col.m7,.row .col.m8{margin-left:auto;left:auto;right:auto}.row .col.m8{width:66.66667%}.row .col.m9{width:75%}.row .col.m9,.row .col.m10{margin-left:auto;left:auto;right:auto}.row .col.m10{width:83.33333%}.row .col.m11{width:91.66667%}.row .col.m11,.row .col.m12{margin-left:auto;left:auto;right:auto}.row .col.m12{width:100%}.row .col.offset-m1{margin-left:8.33333%}.row .col.offset-m2{margin-left:16.66667%}.row .col.offset-m3{margin-left:25%}.row .col.offset-m4{margin-left:33.33333%}.row .col.offset-m5{margin-left:41.66667%}.row .col.offset-m6{margin-left:50%}.row .col.offset-m7{margin-left:58.33333%}.row .col.offset-m8{margin-left:66.66667%}.row .col.offset-m9{margin-left:75%}.row .col.offset-m10{margin-left:83.33333%}.row .col.offset-m11{margin-left:91.66667%}.row .col.offset-m12{margin-left:100%}}.row .col.s1{width:8.33333%}.row .col.s1,.row .col.s2{margin-left:auto;left:auto;right:auto}.row .col.s2{width:16.66667%}.row .col.s3{width:25%}.row .col.s3,.row .col.s4{margin-left:auto;left:auto;right:auto}.row .col.s4{width:33.33333%}.row .col.s5{width:41.66667%}.row .col.s5,.row .col.s6{margin-left:auto;left:auto;right:auto}.row .col.s6{width:50%}.row .col.s7{width:58.33333%}.row .col.s7,.row .col.s8{margin-left:auto;left:auto;right:auto}.row .col.s8{width:66.66667%}.row .col.s9{width:75%}.row .col.s9,.row .col.s10{margin-left:auto;left:auto;right:auto}.row .col.s10{width:83.33333%}.row .col.s11{width:91.66667%}.row .col.s11,.row .col.s12{margin-left:auto;left:auto;right:auto}.row .col.s12{width:100%}.row .col.offset-s1{margin-left:8.33333%}.row .col.offset-s2{margin-left:16.66667%}.row .col.offset-s3{margin-left:25%}.row .col.offset-s4{margin-left:33.33333%}.row .col.offset-s5{margin-left:41.66667%}.row .col.offset-s6{margin-left:50%}.row .col.offset-s7{margin-left:58.33333%}.row .col.offset-s8{margin-left:66.66667%}.row .col.offset-s9{margin-left:75%}.row .col.offset-s10{margin-left:83.33333%}.row .col.offset-s11{margin-left:91.66667%}.row .col.offset-s12{margin-left:100%}.ph-item{position:relative;display:flex;flex-wrap:wrap;overflow:hidden}.ph-item,.ph-item *,.ph-item :after,.ph-item :before{box-sizing:border-box}.ph-item:before{content:" ";position:absolute;top:0;right:0;bottom:0;left:50%;z-index:1;width:500%;margin-left:-250%;animation:phAnimation .8s linear infinite;background:linear-gradient(90deg,hsla(0,0%,100%,0) 46%,hsla(0,0%,100%,.35) 50%,hsla(0,0%,100%,0) 54%) 50% 50%}.ph-item>*{flex:1 1 auto;display:flex;flex-flow:column}.ph-row{display:flex;flex-wrap:wrap}.ph-row div{height:10px;margin-bottom:7.5px;background-color:rgba(206,212,218,.23137254901960785)}.ph-row .big,.ph-row.big div{height:20px;margin-bottom:15px}.ph-row .empty{background-color:hsla(0,0%,100%,0)}.ph-col-2{flex:0 0 16.6666666667%}.ph-col-4{flex:0 0 33.3333333333%}.ph-col-6{flex:0 0 50%}.ph-col-8{flex:0 0 66.6666666667%}.ph-col-10{flex:0 0 83.3333333333%}.ph-col-12{flex:0 0 100%}.ph-avatar{position:relative;width:100%;min-width:60px;background-color:rgba(206,212,218,.23137254901960785);margin-bottom:15px;border-radius:50%;overflow:hidden}.ph-avatar:before{content:" ";display:block;padding-top:100%}.ph-picture{width:100%;height:120px;background-color:rgba(206,212,218,.23137254901960785);margin-bottom:15px}@keyframes phAnimation{0%{transform:translate3d(-30%,0,0)}to{transform:translate3d(30%,0,0)}}.hide{display:none}.absolute-center{display:flex;align-items:center;justify-content:center}.flex{display:flex}.valign-wrapper{display:flex;align-items:center}.halign-wrapper{display:flex;justify-content:center}.vspace-between{justify-content:space-between}.flex-column{flex-direction:column}.right-align{text-align:right}.left-align{text-align:left}.center-align{text-align:center}.responsive-img{max-width:100%;height:auto}.onMount-appear{opacity:.01}.onMount-appear.onMount-appear-active{opacity:1;transition:opacity .5s ease-in}.truncate{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.web-align{max-width:1280px;padding-inline:32px;width:100%;margin:0 auto}.web-align-w-1110{max-width:1110px;width:100%;margin:0 auto}.dropdown{display:inline-block}.dropdown__content{display:none;position:absolute}.dropdown--active .dropdown__content{display:block}.pos-rel{position:relative}.pos-abs{position:absolute}.circle{border-radius:50%}.fullWidth{width:100%}.page-padding{padding:0 16px}.cur-po{cursor:pointer}.cur-no{cursor:not-allowed}.flo-r{float:right}.flo-l{float:left}.width100{width:100%}.height100{height:100%}.card{border-radius:5px}.clickable-text{font-weight:500;line-height:1.29;letter-spacing:.23px;color:var(--content-accent);margin-left:5px;cursor:pointer}.dashed-hr-border{display:block;margin:2px auto;border-style:dashed;border-width:1px;opacity:.2;color:var(--content-secondary);width:100%}.blurEffect1{filter:blur(3px)}.clearfix:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.clearfix{display:inline-block}html[xmlns] .clearfix{display:block}* html .clearfix{height:1%}.componentsMainHeading{font-weight:500;color:var(--content-primary);margin:0}.backgroundPrimary{background-color:var(--background-primary)}.backgroundSecondary{background-color:var(--background-secondary)}.backgroundTertiary{background-color:var(--background-tertiary)}.backgroundTransparent{background-color:var(--background-transparent)}.backgroundSurfacePrimary{background-color:var(--background-surface-primary)}.backgroundSurfaceSecondary{background-color:var(--background-surface-secondary)}.backgroundInversePrimary{background-color:var(--background-inverse-primary)}.backgroundOverlayPrimary{background-color:var(--background-overlay-primary)}.backgroundOverlaySecondary{background-color:var(--background-overlay-secondary)}.backgroundAlwaysDark{background-color:var(--background-always-dark)}.backgroundAlwaysLight{background-color:var(--background-always-light)}.backgroundAccent{background-color:var(--background-accent)}.backgroundPositive{background-color:var(--background-positive)}.backgroundNegative{background-color:var(--background-negative)}.backgroundWarning{background-color:var(--background-warning)}.backgroundAccentSubtle{background-color:var(--background-accent-subtle)}.backgroundPositiveSubtle{background-color:var(--background-positive-subtle)}.backgroundNegativeSubtle{background-color:var(--background-negative-subtle)}.backgroundWarningSubtle{background-color:var(--background-warning-subtle)}.backgroundAccentSecondary{background-color:var(--background-accent-secondary)}.backgroundAccentSecondarySubtle{background-color:var(--background-accent-secondary-subtle)}.borderPrimary{border:1px solid var(--border-primary)}.borderDisabled{border:1px solid var(--border-disabled)}.borderAccent{border:1px solid var(--border-accent)}.borderPositive{border:1px solid var(--border-positive)}.borderNegative{border:1px solid var(--border-negative)}.borderNeutral{border:1px solid var(--border-neutral)}.contentPrimary{color:var(--content-primary)}.contentSecondary{color:var(--content-secondary)}.contentTertiary{color:var(--content-tertiary)}.contentInversePrimary{color:var(--content-inverse-primary)}.contentInverseSecondary{color:var(--content-inverse-secondary)}.contentAccent{color:var(--content-accent)}.contentNegative{color:var(--content-negative)}.contentWarning{color:var(--content-warning)}.contentPositive{color:var(--content-positive)}.contentDisabled{color:var(--content-disabled)}.contentOnColour{color:var(--content-on-colour)}.contentOnColourInverse{color:var(--content-on-colour-inverse)}.contentAccentSecondary{color:var(--content-accent-secondary)}.contentAccentSecondarySubtle{color:var(--content-accent-secondary-subtle)}.contentOnWarningSubtle{color:var(--content-on-warning-subtle)}.tempNbtBackgroundPink{background-color:var(--tempNbtPink)}.tempNbtBackgroundYellow{background-color:var(--tempNbtYellow)}.tempNbtBackgroundBlue{background-color:var(--tempNbtBlue)}.tempNbtBackgroundGray{background-color:var(--tempNbtGray)}.tempNbtBackgroundRed{background-color:var(--tempNbtRed)}.backgroundTransparentHover:hover{background-color:var(--bg-transparent-hover)}.backgroundAccentHover:hover{background-color:var(--bg-accent-hover)}.backgroundAccentSubtleHover:hover{background-color:var(--bg-accent-subtle-hover)}.backgroundTransparentAccentHover:hover{background-color:var(--bg-transparent-accent-hover)}.backgroundPositiveHover:hover{background-color:var(--bg-positive-hover)}.backgroundPositiveSubtleHover:hover{background-color:var(--bg-positive-subtle-hover)}.backgroundTransparentPositiveHover:hover{background-color:var(--bg-transparent-positive-hover)}.backgroundNegativeHover:hover{background-color:var(--bg-negative-hover)}.backgroundNegativeSubtleHover:hover{background-color:var(--bg-negative-subtle-hover)}.backgroundTransparentNegativeHover:hover{background-color:var(--bg-transparent-negative-hover)}.backgroundTransparentSelected:active{background-color:var(--bg-transparent-selected)}.backgroundAccentSelected:active{background-color:var(--bg-accent-selected)}.backgroundAccentSubtleSelected:active{background-color:var(--bg-accent-subtle-selected)}.backgroundTransparentAccentSelected:active{background-color:var(--bg-transparent-accent-selected)}.backgroundPositiveSelected:active{background-color:var(--bg-positive-selected)}.backgroundPositiveSubtleSelected:active{background-color:var(--bg-positive-subtle-selected)}.backgroundTransparentPositiveSelected:active{background-color:var(--bg-transparent-positive-selected)}.backgroundNegativeSelected:active{background-color:var(--bg-negative-selected)}.backgroundNegativeSubtleSelected:active{background-color:var(--bg-negative-subtle-selected)}.backgroundTransparentNegativeSelected:active{background-color:var(--bg-transparent-negative-selected)}html{--background-primary:var(--white);--background-secondary:var(--gray50);--background-tertiary:var(--gray100);--background-transparent:var(--overlay00);--background-surface-primary:var(--white);--background-surface-secondary:var(--gray50);--background-inverse-primary:var(--gray900);--background-overlay-primary:var(--overlay70);--background-overlay-secondary:var(--overlay30);--background-always-dark:var(--black);--background-always-light:var(--white);--background-accent:var(--green500);--background-positive:var(--green500);--background-negative:var(--red500);--background-warning: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)}html[data-theme=dark]{--background-primary:var(--black);--background-surface-primary:var(--gray50);--background-surface-secondary:var(--gray100);--background-inverse-primary:var(--white)}html{--border-primary:var(--gray150);--border-disabled:var(--gray100);--border-accent:var(--green500);--border-positive:var(--green500);--border-negative:var(--red500);--border-neutral:var(--gray900)}html[data-theme=dark]{--border-neutral:var(--white)}html{--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);--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);--content-on-warning-subtle:var(--yellow11)}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)}html{--bg-transparent-hover:rgba(68,71,91,0.058823529411764705);--bg-accent-hover:#04ad83;--bg-accent-subtle-hover:#ddf5ee;--bg-transparent-accent-hover:rgba(0,179,134,0.058823529411764705);--bg-positive-hover:#04ad83;--bg-positive-subtle-hover:#ddf5ee;--bg-transparent-positive-hover:rgba(0,179,134,0.058823529411764705);--bg-negative-hover:#e15a3e;--bg-negative-subtle-hover:#f9e0db;--bg-transparent-negative-hover:rgba(235,91,60,0.058823529411764705);--bg-transparent-selected:rgba(68,71,91,0.058823529411764705);--bg-accent-selected:#04ad83;--bg-accent-subtle-selected:#ddf5ee;--bg-transparent-accent-selected:rgba(0,179,134,0.058823529411764705);--bg-positive-selected:#04ad83;--bg-positive-subtle-selected:#ddf5ee;--bg-transparent-positive-selected:rgba(0,179,134,0.058823529411764705);--bg-negative-selected:#e15a3e;--bg-negative-subtle-selected:#f9e0db;--bg-transparent-negative-selected:rgba(235,91,60,0.058823529411764705)}html.color-theme-in-transition,html.color-theme-in-transition *,html.color-theme-in-transition :after,html.color-theme-in-transition :before{transition:all .3s!important;transition-delay:0!important}html{--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;--yellow11:#a16b00;--dangerouslySetPrimaryBg:#fff;--tempNbtPink:#f1e3f3;--tempNbtYellow:#fff3c8;--tempNbtBlue:#d6eeff;--tempNbtGray:#f0f0f2;--tempNbtRed:#ffc7bb}html,html[data-theme=dark]{--black:#121212;--white:#fff;--overlay00:rgba(18,18,18,0);--overlay30:rgba(18,18,18,0.3);--overlay70:rgba(18,18,18,0.7)}html[data-theme=dark]{--gray900:#f8f8f8;--gray800:#d1d1d1;--gray700:#b8b8b8;--gray600:#a0a0a0;--gray500:#888;--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;--yellow11:#f5bc56;--dangerouslySetPrimaryBg:#121212;--tempNbtPink:#9b63a3;--tempNbtYellow:#b27a00;--tempNbtBlue:#3e79a4;--tempNbtGray:#5c5c6f;--tempNbtRed:#c85d0f;--bg-transparent-hover:hsla(0,0%,100%,0.058823529411764705);--bg-accent-hover:#0ab18a;--bg-accent-subtle-hover:#103e33;--bg-transparent-accent-hover:rgba(10,187,146,0.058823529411764705);--bg-positive-hover:#0ab18a;--bg-positive-subtle-hover:#103e33;--bg-transparent-positive-hover:rgba(10,187,146,0.058823529411764705);--bg-negative-hover:#c95036;--bg-negative-subtle-hover:#4a2018;--bg-transparent-negative-hover:rgba(213,84,56,0.058823529411764705);--bg-transparent-selected:hsla(0,0%,100%,0.058823529411764705);--bg-accent-selected:#0ab18a;--bg-accent-subtle-selected:#103e33;--bg-transparent-accent-selected:rgba(10,187,146,0.058823529411764705);--bg-positive-selected:#0ab18a;--bg-positive-subtle-selected:#103e33;--bg-transparent-positive-selected:rgba(10,187,146,0.058823529411764705);--bg-negative-selected:#c95036;--bg-negative-subtle-selected:#4a2018;--bg-transparent-negative-selected:rgba(213,84,56,0.058823529411764705)}@font-face{font-family:GrowwSans;font-style:normal;font-weight:300 700;src:url(GrowwSans-Variable.woff2) format("woff2-variations");font-display:swap}@font-face{font-family:NotoSans;font-style:normal;font-weight:500;src:url(NotoSans-Regular.woff2) format("woff2");unicode-range:u+0900-097f;font-display:swap}@font-face{font-family:NotoSans;font-style:normal;font-weight:600;src:url(NotoSans-Medium.woff2) format("woff2");unicode-range:u+0900-097f;font-display:swap}@font-face{font-family:NotoSans;font-style:normal;font-weight:700;src:url(NotoSans-SemiBold.woff2) format("woff2");unicode-range:u+0900-097f;font-display:swap}.bodySmall{font-weight:var(--font-weight-regular)}.bodySmall,.bodySmallHeavy{font-size:var(--font-size-12);line-height:1.125rem}.bodySmallHeavy{font-weight:var(--font-weight-medium)}.bodyBase{font-weight:var(--font-weight-regular)}.bodyBase,.bodyBaseHeavy{font-size:var(--font-size-14);line-height:1.25rem}.bodyBaseHeavy{font-weight:var(--font-weight-medium)}.bodyLarge{font-weight:var(--font-weight-regular)}.bodyLarge,.bodyLargeHeavy{font-size:var(--font-size-16);line-height:1.375rem}.bodyLargeHeavy{font-weight:var(--font-weight-medium)}.bodyXLarge{font-weight:var(--font-weight-regular)}.bodyXLarge,.bodyXLargeHeavy{font-size:var(--font-size-18);line-height:1.5625rem}.bodyXLargeHeavy,.displaySmall{font-weight:var(--font-weight-medium)}.displaySmall{font-size:var(--font-size-24);line-height:2.0625rem}.displayBase{font-size:var(--font-size-28);line-height:2.4375rem}.displayBase,.displayLarge{font-weight:var(--font-weight-medium)}.displayLarge{font-size:var(--font-size-32);line-height:2.75rem}.displayXLarge{font-size:var(--font-size-40);line-height:3.5rem}.buttonSentenceCase14,.displayXLarge{font-weight:var(--font-weight-medium)}.buttonSentenceCase14{font-size:var(--font-size-14);line-height:1rem}.buttonUpperCase16{font-size:var(--font-size-16);font-weight:var(--font-weight-bold);line-height:1.25rem}.headingXSmall{font-size:var(--font-size-14);line-height:1.25rem}.headingSmall,.headingXSmall{font-weight:var(--font-weight-medium)}.headingSmall{font-size:var(--font-size-16);line-height:1.375rem}.headingBase{font-size:var(--font-size-18);line-height:1.5625rem}.headingBase,.headingLarge{font-weight:var(--font-weight-medium)}.headingLarge{font-size:var(--font-size-20);line-height:2rem}html{--font-size-12:0.75rem;--font-size-14:0.875rem;--font-size-16:1rem;--font-size-18:1.125rem;--font-size-20:1.25rem;--font-size-22:1.375rem;--font-size-24:1.5rem;--font-size-28:1.75rem;--font-size-32:2rem;--font-size-40:2.5rem;--font-size-44:2.75rem;--font-size-56:3.5rem;--font-weight-regular:435;--font-weight-medium:535;--font-weight-bold:660}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@groww-tech/mint-css",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.3",
|
|
4
4
|
"description": "A CSS library that provides classes, tokens, variables, fonts and other essential stylings governed under MINT design system, used by Groww",
|
|
5
5
|
"main": "./dist/bundle.css",
|
|
6
6
|
"files": [
|
|
@@ -37,6 +37,14 @@
|
|
|
37
37
|
{
|
|
38
38
|
"name": "Shivesh Raj Nigam",
|
|
39
39
|
"url": "https://www.linkedin.com/in/shiveshrajnigam/"
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"name": "Vishwa Gaurav",
|
|
43
|
+
"url": "https://www.linkedin.com/in/VishwaGauravIn"
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"name": "Saloni Seth",
|
|
47
|
+
"url": "https://www.linkedin.com/in/saloni-seth"
|
|
40
48
|
}
|
|
41
49
|
],
|
|
42
50
|
"license": "MIT",
|
|
@@ -48,6 +56,9 @@
|
|
|
48
56
|
"rollup-plugin-copy": "3.4.0",
|
|
49
57
|
"rollup-plugin-postcss": "4.0.0"
|
|
50
58
|
},
|
|
59
|
+
"dependencies": {
|
|
60
|
+
"postcss-url": "^10.1.3"
|
|
61
|
+
},
|
|
51
62
|
"scripts": {
|
|
52
63
|
"build": "rm -rf dist && pnpm rollup -c",
|
|
53
64
|
"pushTags": "PACKAGE_VERSION=$(cat package.json | grep \\\"version\\\" | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]') && git tag -a v$PACKAGE_VERSION -m \"@groww-tech/mint-css-v$PACKAGE_VERSION\" && git push --tags"
|