@ncino/styles 9.0.0-preview.5 → 9.0.0-preview.7

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/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ncino/styles",
3
3
  "author": "nCino",
4
- "version": "9.0.0-preview.5",
4
+ "version": "9.0.0-preview.7",
5
5
  "description": "nCino Shared Web Component Styling",
6
6
  "license": "(c) Copyright 2023 nCino, Inc., all rights reserved",
7
7
  "publishConfig": {
@@ -19,15 +19,21 @@
19
19
  "./gator/tokens/semantic": "./src/gator/tokens/semantic.tokens.css"
20
20
  },
21
21
  "files": [
22
- "*.css",
23
- "*.woff2"
22
+ "src/**/*.ts",
23
+ "src/**/*.css",
24
+ "src/**/*.woff2"
24
25
  ],
25
26
  "bugs": {
26
27
  "url": "https://github.com/ncino/force-sdk-web-components/issues"
27
28
  },
28
29
  "dependencies": {
30
+ "@mui/icons-material": "^7.3.4",
29
31
  "@mui/material": "^7.3.4"
30
32
  },
33
+ "peerDependencies": {
34
+ "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
35
+ "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
36
+ },
31
37
  "homepage": "https://github.com/ncino/force-sdk-web-components#readme",
32
38
  "customElements": "custom-elements.json",
33
39
  "scripts": {
@@ -0,0 +1,8 @@
1
+ @import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@400;600;700&display=swap');
2
+
3
+ @font-face {
4
+ font-family: 'Open Sans';
5
+ src: url('./fonts/OpenSans-VariableFont.woff2') format('woff2');
6
+ font-weight: 100 900;
7
+ font-style: normal;
8
+ }
@@ -0,0 +1,81 @@
1
+ .gator-row {
2
+ display: flex;
3
+ flex-wrap: wrap;
4
+ margin-top: calc(-1 * var(--gator-gutter-y));
5
+ margin-right: calc(-0.5 * var(--gator-gutter-x));
6
+ margin-left: calc(-0.5 * var(--gator-gutter-x));
7
+ }
8
+
9
+ .gator-col {
10
+ flex: 1 0 0;
11
+ }
12
+
13
+ .gator-row > * {
14
+ flex-shrink: 0;
15
+ width: 100%;
16
+ max-width: 100%;
17
+ padding-right: calc(var(--gator-gutter-x) * 0.5);
18
+ padding-left: calc(var(--gator-gutter-x) * 0.5);
19
+ margin-top: var(--gator-gutter-y);
20
+ }
21
+
22
+ .gator-col-12 {
23
+ flex: 0 0 100%;
24
+ max-width: 100%;
25
+ }
26
+
27
+ .gator-col-11 {
28
+ flex: 0 0 91.666667%;
29
+ max-width: 91.666667%;
30
+ }
31
+
32
+ .gator-col-10 {
33
+ flex: 0 0 83.333333%;
34
+ max-width: 83.333333%;
35
+ }
36
+
37
+ .gator-col-9 {
38
+ flex: 0 0 75%;
39
+ max-width: 75%;
40
+ }
41
+
42
+ .gator-col-7 {
43
+ flex: 0 0 58.333333%;
44
+ max-width: 58.333333%;
45
+ }
46
+
47
+ .gator-col-8 {
48
+ flex: 0 0 66.666667%;
49
+ max-width: 66.666667%;
50
+ }
51
+
52
+ .gator-col-6 {
53
+ flex: 0 0 50%;
54
+ max-width: 50%;
55
+ }
56
+
57
+ .gator-col-5 {
58
+ flex: 0 0 41.666667%;
59
+ max-width: 41.666667%;
60
+ }
61
+
62
+ .gator-col-4 {
63
+ flex: 0 0 33.333333%;
64
+ max-width: 33.333333%;
65
+ }
66
+
67
+ .gator-col-3 {
68
+ flex: 0 0 25%;
69
+ max-width: 25%;
70
+ }
71
+
72
+ .gator-col-2 {
73
+ flex: 0 0 16.666667%;
74
+ max-width: 16.666667%;
75
+ }
76
+
77
+ .gator-col-1 {
78
+ flex: 0 0 8.333333%;
79
+ max-width: 8.333333%;
80
+ }
81
+
@@ -0,0 +1,179 @@
1
+ .gator-w-100 {
2
+ width: 100%;
3
+ }
4
+
5
+ .gator-w-90 {
6
+ width: 90%;
7
+ }
8
+
9
+ .gator-w-80 {
10
+ width: 80%;
11
+ }
12
+
13
+ .gator-w-70 {
14
+ width: 70%;
15
+ }
16
+
17
+ .gator-w-60 {
18
+ width: 60%;
19
+ }
20
+
21
+ .gator-w-50 {
22
+ width: 50%;
23
+ }
24
+
25
+ .gator-w-40 {
26
+ width: 40%;
27
+ }
28
+
29
+ .gator-w-30 {
30
+ width: 30%;
31
+ }
32
+
33
+ .gator-w-20 {
34
+ width: 20%;
35
+ }
36
+
37
+ .gator-w-10 {
38
+ width: 10%;
39
+ }
40
+
41
+ .gator-w-0 {
42
+ width: 0;
43
+ }
44
+
45
+ .gator-w-auto {
46
+ width: auto;
47
+ }
48
+
49
+ .gator-h-auto {
50
+ height: auto;
51
+ }
52
+
53
+ .gator-h-100 {
54
+ height: 100%;
55
+ }
56
+
57
+ .gator-h-90 {
58
+ height: 90%;
59
+ }
60
+
61
+ .gator-h-80 {
62
+ height: 80%;
63
+ }
64
+
65
+ .gator-h-70 {
66
+ height: 70%;
67
+ }
68
+
69
+ .gator-h-60 {
70
+ height: 60%;
71
+ }
72
+
73
+ .gator-h-50 {
74
+ height: 50%;
75
+ }
76
+
77
+ .gator-h-40 {
78
+ height: 40%;
79
+ }
80
+
81
+ .gator-h-30 {
82
+ height: 30%;
83
+ }
84
+
85
+ .gator-h-20 {
86
+ height: 20%;
87
+ }
88
+
89
+ .gator-h-10 {
90
+ height: 10%;
91
+ }
92
+
93
+ .gator-h-0 {
94
+ height: 0;
95
+ }
96
+
97
+ .gator-mh-100 {
98
+ max-height: 100%;
99
+ }
100
+
101
+ .gator-mh-90 {
102
+ max-height: 90%;
103
+ }
104
+
105
+ .gator-mh-80 {
106
+ max-height: 80%;
107
+ }
108
+
109
+ .gator-mh-70 {
110
+ max-height: 70%;
111
+ }
112
+
113
+ .gator-mh-60 {
114
+ max-height: 60%;
115
+ }
116
+
117
+ .gator-mh-50 {
118
+ max-height: 50%;
119
+ }
120
+
121
+ .gator-mh-40 {
122
+ max-height: 40%;
123
+ }
124
+
125
+ .gator-mh-30 {
126
+ max-height: 30%;
127
+ }
128
+
129
+ .gator-mh-20 {
130
+ max-height: 20%;
131
+ }
132
+
133
+ .gator-mh-10 {
134
+ max-height: 10%;
135
+ }
136
+
137
+ .gator-mw-100 {
138
+ max-width: 100%;
139
+ }
140
+
141
+ .gator-mw-90 {
142
+ max-width: 90%;
143
+ }
144
+
145
+ .gator-mw-80 {
146
+ max-width: 80%;
147
+ }
148
+
149
+ .gator-mw-70 {
150
+ max-width: 70%;
151
+ }
152
+
153
+ .gator-mw-60 {
154
+ max-width: 60%;
155
+ }
156
+
157
+ .gator-mw-50 {
158
+ max-width: 50%;
159
+ }
160
+
161
+ .gator-mw-40 {
162
+ max-width: 40%;
163
+ }
164
+
165
+ .gator-mw-30 {
166
+ max-width: 30%;
167
+ }
168
+
169
+ .gator-mw-20 {
170
+ max-width: 20%;
171
+ }
172
+
173
+ .gator-mw-10 {
174
+ max-width: 10%;
175
+ }
176
+
177
+ .gator-mw-0 {
178
+ max-width: 0;
179
+ }
@@ -0,0 +1,171 @@
1
+ /* Body Text */
2
+ body {
3
+ font-family: var(--font-family-body, "Open Sans"), sans-serif;
4
+ }
5
+
6
+ .gator-body-1 {
7
+ font-feature-settings: 'liga' off, 'clig' off;
8
+ font-style: normal;
9
+ font-weight: 400;
10
+ font-family: var(--font-family-body, "Open Sans"), sans-serif;
11
+ color: var(--color-text-primary, #1F1F1F);
12
+ letter-spacing: var(--letter-spacing-default, 0);
13
+ font-size: var(--font-size-body-1, 17px);
14
+ line-height: var(--line-height-body-1, 24px);
15
+ }
16
+
17
+ .gator-body-2 {
18
+ font-feature-settings: 'liga' off, 'clig' off;
19
+ font-style: normal;
20
+ font-weight: 400;
21
+ font-family: var(--font-family-body, "Open Sans"), sans-serif;
22
+ color: var(--color-text-primary, #1F1F1F);
23
+ letter-spacing: var(--letter-spacing-default, 0);
24
+ font-size: var(--font-size-body-2, 15px);
25
+ line-height: var(--line-height-body-2, 22px);
26
+ }
27
+
28
+ .gator-body-3 {
29
+ font-feature-settings: 'liga' off, 'clig' off;
30
+ font-style: normal;
31
+ font-weight: 400;
32
+ font-family: var(--font-family-body, "Open Sans"), sans-serif;
33
+ color: var(--color-text-primary, #1F1F1F);
34
+ letter-spacing: var(--letter-spacing-default, 0);
35
+ font-size: var(--font-size-body-3, 13px);
36
+ line-height: var(--line-height-body-3, 18px);
37
+ }
38
+
39
+ .gator-body-bold {
40
+ font-weight: 700;
41
+ }
42
+
43
+ .gator-body-semibold {
44
+ font-weight: 600;
45
+ }
46
+
47
+ .gator-uppercase {
48
+ text-transform: uppercase;
49
+ }
50
+
51
+ /* Headings */
52
+ .gator-heading-display-1 {
53
+ font-feature-settings: 'liga' off, 'clig' off;
54
+ font-style: normal;
55
+ font-weight: var(--font-weight-regular, 400);
56
+ letter-spacing: var(--letter-spacing-narrow, -1px);
57
+ color: var(--color-text-primary, #1F1F1F);
58
+ font-family: var(--font-family-headings, 'Lexend Deca'), sans-serif;
59
+ font-size: var(--font-size-display-1, 72px);
60
+ line-height: var(--line-height-display-1, 90px);
61
+ }
62
+
63
+ .gator-heading-display-2 {
64
+ font-feature-settings: 'liga' off, 'clig' off;
65
+ font-style: normal;
66
+ font-weight: var(--font-weight-regular, 400);
67
+ letter-spacing: var(--letter-spacing-narrow, -1px);
68
+ color: var(--color-text-primary, #1F1F1F);
69
+ font-family: var(--font-family-headings, 'Lexend Deca'), sans-serif;
70
+ font-size: var(--font-size-display-2, 64px);
71
+ line-height: var(--line-height-display-2, 78px);
72
+ }
73
+
74
+ .gator-heading-h1 {
75
+ font-feature-settings: 'liga' off, 'clig' off;
76
+ font-style: normal;
77
+ font-weight: var(--font-weight-medium, 500);
78
+ letter-spacing: var(--letter-spacing-narrow, -1px);
79
+ color: var(--color-text-primary, #1F1F1F);
80
+ font-family: var(--font-family-headings, 'Lexend Deca'), sans-serif;
81
+ font-size: var(--font-size-heading-1, 40px);
82
+ line-height: var(--line-height-heading-1, 50px);
83
+ }
84
+
85
+ .gator-heading-h2 {
86
+ font-feature-settings: 'liga' off, 'clig' off;
87
+ font-style: normal;
88
+ font-weight: var(--font-weight-medium, 500);
89
+ letter-spacing: var(--letter-spacing-narrow, -1px);
90
+ color: var(--color-text-primary, #1F1F1F);
91
+ font-family: var(--font-family-headings, 'Lexend Deca'), sans-serif;
92
+ font-size: var(--font-size-heading-2, 32px);
93
+ line-height: var(--line-height-heading-2, 40px);
94
+ }
95
+
96
+ .gator-heading-h3 {
97
+ font-feature-settings: 'liga' off, 'clig' off;
98
+ font-style: normal;
99
+ font-weight: var(--font-weight-semi-bold, 600);
100
+ letter-spacing: var(--letter-spacing-narrow, -1px);
101
+ color: var(--color-text-primary, #1F1F1F);
102
+ font-family: var(--font-family-headings, 'Lexend Deca'), sans-serif;
103
+ font-size: var(--font-size-heading-3, 26px);
104
+ line-height: var(--line-height-heading-3, 36px);
105
+ }
106
+
107
+ .gator-heading-h4 {
108
+ font-feature-settings: 'liga' off, 'clig' off;
109
+ font-style: normal;
110
+ font-weight: var(--font-weight-semi-bold, 600);
111
+ color: var(--color-text-primary, #1F1F1F);
112
+ font-family: var(--font-family-headings, 'Lexend Deca'), sans-serif;
113
+ font-size: var(--font-size-heading-4, 22px);
114
+ line-height: var(--line-height-heading-4, 32px);
115
+ letter-spacing: var(--letter-spacing-default, 0);
116
+ }
117
+ .gator-heading-h5 {
118
+ font-feature-settings: 'liga' off, 'clig' off;
119
+ font-style: normal;
120
+ font-weight: var(--font-weight-bold, 700);
121
+ color: var(--color-text-primary, #1F1F1F);
122
+ font-family: var(--font-family-headings, 'Lexend Deca'), sans-serif;
123
+ font-size: var(--font-size-heading-5, 20px);
124
+ line-height: var(--line-height-heading-5, 30px);
125
+ letter-spacing: var(--letter-spacing-default, 0);
126
+ }
127
+ .gator-heading-h6 {
128
+ font-feature-settings: 'liga' off, 'clig' off;
129
+ font-style: normal;
130
+ font-weight: var(--font-weight-bold, 700);
131
+ color: var(--color-text-primary, #1F1F1F);
132
+ font-family: var(--font-family-headings, 'Lexend Deca'), sans-serif;
133
+ font-size: var(--font-size-heading-6, 18px);
134
+ line-height: var(--line-height-heading-6, 28px);
135
+ letter-spacing: var(--letter-spacing-default, 0);
136
+ }
137
+
138
+ @media (max-width: 768px) {
139
+ .gator-heading-display-1 {
140
+ font-size: var(--font-size-sm-display-1, 48px);
141
+ line-height: var(--line-height-sm-display-1, 56px);
142
+ }
143
+ .gator-heading-display-2 {
144
+ font-size: var(--font-size-sm-display-2, 36px);
145
+ line-height: var(--line-height-sm-display-2, 48px);
146
+ }
147
+ .gator-heading-h1 {
148
+ font-size: var(--font-size-sm-heading-1, 28px);
149
+ line-height: var(--line-height-sm-heading-1, 36px);
150
+ }
151
+ .gator-heading-h2 {
152
+ font-size: var(--font-size-sm-heading-2, 24px);
153
+ line-height: var(--line-height-sm-heading-2, 32px);
154
+ }
155
+ .gator-heading-h3 {
156
+ font-size: var(--font-size-sm-heading-3, 22px);
157
+ line-height: var(--line-height-sm-heading-3, 32px);
158
+ }
159
+ .gator-heading-h4 {
160
+ font-size: var(--font-size-sm-heading-4, 20px);
161
+ line-height: var(--line-height-sm-heading-4, 30px);
162
+ }
163
+ .gator-heading-h5 {
164
+ font-size: var(--font-size-sm-heading-5, 18px);
165
+ line-height: var(--line-height-sm-heading-5, 28px);
166
+ }
167
+ .gator-heading-h6 {
168
+ font-size: var(--font-size-sm-heading-6, 17px);
169
+ line-height: var(--line-height-sm-heading-6, 24px);
170
+ }
171
+ }
@@ -0,0 +1,31 @@
1
+ @import './_fonts.css';
2
+ @import './tokens/_gator-global-tokens.css';
3
+ @import './_gator-grid.css';
4
+ @import './_gator-sizing.css';
5
+ @import './_gator-typography.css';
6
+
7
+ .gator-d-flex {
8
+ display: flex;
9
+ }
10
+
11
+ .gator-d-inline-flex {
12
+ display: inline-flex;
13
+ }
14
+
15
+ .gator-truncate {
16
+ white-space: nowrap;
17
+ overflow: hidden;
18
+ text-overflow: ellipsis;
19
+ }
20
+
21
+ .gator-visually-hidden {
22
+ position: absolute;
23
+ width: 1px;
24
+ height: 1px;
25
+ padding: 0;
26
+ overflow: hidden;
27
+ clip: rect(0, 0, 0, 0);
28
+ white-space: nowrap;
29
+ border: 0;
30
+ opacity: 0;
31
+ }