@narmi/design_system 2.0.0-beta.3 → 2.0.0

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.
Files changed (14) hide show
  1. package/dist/docs/Formatters.md +3 -2
  2. package/dist/index.js +1 -1
  3. package/dist/index.js.map +1 -1
  4. package/dist/style.css +2 -2
  5. package/dist/style.css.map +1 -1
  6. package/dist/tokens/css/rgbColors.css +1 -1
  7. package/dist/tokens/css/tokens.css +1 -1
  8. package/dist/tokens/js/colors.js +1 -1
  9. package/dist/tokens/js/manifest.js +132 -132
  10. package/package.json +1 -1
  11. package/dist/index.js.LICENSE.txt +0 -3
  12. package/dist/tokens/js/constants.js +0 -137
  13. package/dist/tokens/scss/variables.js +0 -305
  14. package/dist/tokens/scss/variables.scss +0 -305
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@narmi/design_system",
3
- "version": "2.0.0-beta.3",
3
+ "version": "2.0.0",
4
4
  "description": "⚡ A consistent look-and-feel and extensible interface for Narmi experiences 🔥",
5
5
  "main": "dist/index.js",
6
6
  "files": [
package/dist/index.js.LICENSE.txt DELETED
@@ -1,3 +0,0 @@
1
- //! moment.js
2
-
3
- //! moment.js locale configuration
package/dist/tokens/js/constants.js DELETED
@@ -1,137 +0,0 @@
1
- /**
2
- * Do not edit directly
3
- * Generated on Wed, 08 Dec 2021 20:15:48 GMT
4
- */
5
-
6
- module.exports = {
7
- "BorderColorPrimary": "#1a4338",
8
- "BorderColorLight": "#d9d9d9",
9
- "BorderColorDefault": "#d9d9d9",
10
- "BorderRadiusDefault": "4px",
11
- "BorderSizeS": "1px",
12
- "BorderSizeM": "2px",
13
- "BorderSizeDefault": "1px",
14
- "ColorAlpha5": "0.05",
15
- "ColorAlpha10": "0.1",
16
- "ColorAlpha20": "0.2",
17
- "ColorBackgroundBlueGrey": "#f4f6fa",
18
- "ColorBackgroundCloudGrey": "#e9e9e9",
19
- "ColorBackgroundNeutralGrey": "#f9f9f9",
20
- "ColorBackgroundSmokeGrey": "#f3f3f3",
21
- "ColorBackgroundSnowGrey": "#fbfbfb",
22
- "ColorBackgroundWhite": "#ffffff",
23
- "ColorBackgroundScrimLight": "rgba(255, 255, 255, 0.85)",
24
- "ColorBackgroundScrimDark": "rgba(80, 80, 80, 0.7)",
25
- "ColorNarmiMoss100": "#002921",
26
- "ColorNarmiMoss200": "#0f3c32",
27
- "ColorNarmiMoss300": "#005242",
28
- "ColorNarmiMoss400": "#006553",
29
- "ColorNarmiMoss500": "#3e8373",
30
- "ColorNarmiMoss600": "#6ea193",
31
- "ColorNarmiMoss700": "#9dc0b6",
32
- "ColorNarmiMoss800": "#cdded9",
33
- "ColorNarmiMoss": "#006553",
34
- "ColorNarmiPine100": "#041a14",
35
- "ColorNarmiPine200": "#062821",
36
- "ColorNarmiPine300": "#16362c",
37
- "ColorNarmiPine400": "#1a4338",
38
- "ColorNarmiPine500": "#44655b",
39
- "ColorNarmiPine600": "#708981",
40
- "ColorNarmiPine700": "#708981",
41
- "ColorNarmiPine800": "#cdd6d3",
42
- "ColorNarmiPine": "#1a4338",
43
- "ColorNarmiCove100": "#002547",
44
- "ColorNarmiCove200": "#00376a",
45
- "ColorNarmiCove300": "#094895",
46
- "ColorNarmiCove400": "#005cb2",
47
- "ColorNarmiCove500": "#237cc3",
48
- "ColorNarmiCove600": "#66a2d6",
49
- "ColorNarmiCove700": "#a6cff0",
50
- "ColorNarmiCove800": "#d4edff",
51
- "ColorNarmiCove": "#005cb2",
52
- "ColorNarmiAzul100": "#001340",
53
- "ColorNarmiAzul200": "#00205e",
54
- "ColorNarmiAzul300": "#002c82",
55
- "ColorNarmiAzul400": "#003ea0",
56
- "ColorNarmiAzul500": "#3664b5",
57
- "ColorNarmiAzul600": "#6b89c7",
58
- "ColorNarmiAzul700": "#9cb1de",
59
- "ColorNarmiAzul800": "#c9d8f2",
60
- "ColorNarmiAzul": "#003ea0",
61
- "ColorNarmiPistachio100": "#485e3d",
62
- "ColorNarmiPistachio200": "#6b8c5a",
63
- "ColorNarmiPistachio300": "#90bb78",
64
- "ColorNarmiPistachio400": "#b5e995",
65
- "ColorNarmiPistachio500": "#ccf0b4",
66
- "ColorNarmiPistachio600": "#daf4c8",
67
- "ColorNarmiPistachio700": "#e9f8de",
68
- "ColorNarmiPistachio800": "#f7fcf3",
69
- "ColorNarmiPistachio": "#b5e995",
70
- "ColorNarmiCactus100": "#324c23",
71
- "ColorNarmiCactus200": "#4b7137",
72
- "ColorNarmiCactus300": "#63964b",
73
- "ColorNarmiCactus400": "#7fbc5b",
74
- "ColorNarmiCactus500": "#99ca7a",
75
- "ColorNarmiCactus600": "#b3d79a",
76
- "ColorNarmiCactus700": "#cce4ba",
77
- "ColorNarmiCactus800": "#e5f1dc",
78
- "ColorNarmiCactus": "#7fbc5b",
79
- "ColorNarmiSand100": "#423329",
80
- "ColorNarmiSand200": "#684d41",
81
- "ColorNarmiSand300": "#947564",
82
- "ColorNarmiSand400": "#c4a08a",
83
- "ColorNarmiSand500": "#dcc1a2",
84
- "ColorNarmiSand600": "#eed6c3",
85
- "ColorNarmiSand700": "#f4e3d6",
86
- "ColorNarmiSand800": "#fcf0e9",
87
- "ColorNarmiSand": "#dcc1a2",
88
- "ColorNarmiBlack": "#333333",
89
- "ColorNarmiGrey": "#4c4c4c",
90
- "ColorNarmiMediumGrey": "#8c8c8c",
91
- "ColorNarmiLightGrey": "#d9d9d9",
92
- "ColorNarmiWhite": "#ffffff",
93
- "ColorSystemSuccessDark": "#37b374",
94
- "ColorSystemSuccessLight": "#e3fae7",
95
- "ColorSystemWarnDark": "#eac348",
96
- "ColorSystemWarnLight": "#fef8e3",
97
- "ColorSystemErrorDark": "#d93b3b",
98
- "ColorSystemErrorLight": "#fdf1f1",
99
- "ColorThemePrimary": "#1a4338",
100
- "ColorThemeSecondary": "#006553",
101
- "ColorThemeTertiary": "#7fbc5b",
102
- "ColorThemeLink": "#006553",
103
- "FontColorHeading": "#333333",
104
- "FontColorPrimary": "#4c4c4c",
105
- "FontColorSecondary": "#8c8c8c",
106
- "FontColorHint": "#d9d9d9",
107
- "FontFamilyHeading": "'Narmi Matiere', serif",
108
- "FontFamilyBody": "Mulish, Helvetica, sans-serif",
109
- "FontFamilyDefault": "Mulish, Helvetica, sans-serif",
110
- "FontLineHeightSmallText": "1.6",
111
- "FontLineHeightBodyText": "1.25",
112
- "FontLineHeightBigText": "1.1",
113
- "FontLineHeightDefault": "1.25",
114
- "FontSizeXs": "12px",
115
- "FontSizeS": "14px",
116
- "FontSizeM": "16px",
117
- "FontSizeL": "20px",
118
- "FontSizeHeading1": "32px",
119
- "FontSizeHeading2": "28px",
120
- "FontSizeHeading3": "24px",
121
- "FontSizeDefault": "16px",
122
- "FontWeightNormal": "400",
123
- "FontWeightSemibold": "600",
124
- "FontWeightBold": "700",
125
- "FontWeightDefault": "400",
126
- "LayoutSpaceXxs": "4px",
127
- "LayoutSpaceXs": "8px",
128
- "LayoutSpaceS": "12px",
129
- "LayoutSpaceM": "16px",
130
- "LayoutSpaceL": "20px",
131
- "LayoutSpaceXl": "40px",
132
- "LayoutSpaceDefault": "20px",
133
- "ShadowElevationLow": "0 2px 12px 0 rgba(80, 80, 80, 0.05)",
134
- "ShadowElevationMiddle": "0 2px 12px 0 rgba(0, 0, 0, 0.1)",
135
- "ShadowElevationHigh": "0 2px 12px 0 rgba(80, 80, 80, 0.2)",
136
- "ShadowElevationDefault": "0 2px 12px 0 rgba(0, 0, 0, 0.1)"
137
- };
package/dist/tokens/scss/variables.js DELETED
@@ -1,305 +0,0 @@
1
-
2
- /**
3
- * Do not edit directly
4
- * Generated on Wed, 17 Nov 2021 21:10:09 GMT
5
- */
6
-
7
- $border-color-primary: #1a4338 !default;
8
- $border-color-light: #d9d9d9 !default;
9
- $border-color-default: #d9d9d9 !default;
10
- $border-size-s: 1px !default;
11
- $border-size-m: 2px !default;
12
- $border-size-default: 1px !default;
13
- $alpha-5: 0.05 !default;
14
- $alpha-10: 0.1 !default;
15
- $alpha-20: 0.2 !default;
16
- $bgColor-blueGrey: #f4f6fa !default;
17
- $bgColor-cloudGrey: #e9e9e9 !default;
18
- $bgColor-neutralGrey: #f9f9f9 !default;
19
- $bgColor-smokeGrey: #f3f3f3 !default;
20
- $bgColor-snowGrey: #fbfbfb !default;
21
- $bgColor-white: #ffffff !default;
22
- $bgColor-scrimLight: rgba(255, 255, 255, 0.85) !default;
23
- $bgColor-scrimDark: rgba(80, 80, 80, 0.7) !default;
24
- $color-moss100: #002921 !default;
25
- $color-moss200: #0f3c32 !default;
26
- $color-moss300: #005242 !default;
27
- $color-moss400: #006553 !default;
28
- $color-moss500: #3e8373 !default;
29
- $color-moss600: #6ea193 !default;
30
- $color-moss700: #9dc0b6 !default;
31
- $color-moss800: #cdded9 !default;
32
- $color-moss: #006553 !default;
33
- $color-pine100: #041a14 !default;
34
- $color-pine200: #062821 !default;
35
- $color-pine300: #16362c !default;
36
- $color-pine400: #1a4338 !default;
37
- $color-pine500: #44655b !default;
38
- $color-pine600: #708981 !default;
39
- $color-pine700: #708981 !default;
40
- $color-pine800: #cdd6d3 !default;
41
- $color-pine: #1a4338 !default;
42
- $color-cove100: #002547 !default;
43
- $color-cove200: #00376a !default;
44
- $color-cove300: #094895 !default;
45
- $color-cove400: #005cb2 !default;
46
- $color-cove500: #237cc3 !default;
47
- $color-cove600: #66a2d6 !default;
48
- $color-cove700: #a6cff0 !default;
49
- $color-cove800: #d4edff !default;
50
- $color-cove: #005cb2 !default;
51
- $color-azul100: #001340 !default;
52
- $color-azul200: #00205e !default;
53
- $color-azul300: #002c82 !default;
54
- $color-azul400: #003ea0 !default;
55
- $color-azul500: #3664b5 !default;
56
- $color-azul600: #6b89c7 !default;
57
- $color-azul700: #9cb1de !default;
58
- $color-azul800: #c9d8f2 !default;
59
- $color-azul: #003ea0 !default;
60
- $color-pistachio100: #485e3d !default;
61
- $color-pistachio200: #6b8c5a !default;
62
- $color-pistachio300: #90bb78 !default;
63
- $color-pistachio400: #b5e995 !default;
64
- $color-pistachio500: #ccf0b4 !default;
65
- $color-pistachio600: #daf4c8 !default;
66
- $color-pistachio700: #e9f8de !default;
67
- $color-pistachio800: #f7fcf3 !default;
68
- $color-pistachio: #b5e995 !default;
69
- $color-cactus100: #324c23 !default;
70
- $color-cactus200: #4b7137 !default;
71
- $color-cactus300: #63964b !default;
72
- $color-cactus400: #7fbc5b !default;
73
- $color-cactus500: #99ca7a !default;
74
- $color-cactus600: #b3d79a !default;
75
- $color-cactus700: #cce4ba !default;
76
- $color-cactus800: #e5f1dc !default;
77
- $color-cactus: #7fbc5b !default;
78
- $color-sand100: #423329 !default;
79
- $color-sand200: #684d41 !default;
80
- $color-sand300: #947564 !default;
81
- $color-sand400: #c4a08a !default;
82
- $color-sand500: #dcc1a2 !default;
83
- $color-sand600: #eed6c3 !default;
84
- $color-sand700: #f4e3d6 !default;
85
- $color-sand800: #fcf0e9 !default;
86
- $color-sand: #dcc1a2 !default;
87
- $color-black: #333333 !default;
88
- $color-grey: #4c4c4c !default;
89
- $color-mediumGrey: #8c8c8c !default;
90
- $color-lightGrey: #d9d9d9 !default;
91
- $color-white: #ffffff !default;
92
- $color-successDark: #37b374 !default;
93
- $color-successLight: #e3fae7 !default;
94
- $color-warnDark: #eac348 !default;
95
- $color-warnLight: #fef8e3 !default;
96
- $color-errorDark: #d93b3b !default;
97
- $color-errorLight: #fdf1f1 !default;
98
- $theme-primary: #1a4338 !default;
99
- $theme-secondary: #006553 !default;
100
- $theme-tertiary: #7fbc5b !default;
101
- $theme-link: #006553 !default;
102
- $font-color-heading: #333333 !default;
103
- $font-color-primary: #4c4c4c !default;
104
- $font-color-secondary: #8c8c8c !default;
105
- $font-color-hint: #d9d9d9 !default;
106
- $font-family-heading: 'Narmi Matiere', serif !default;
107
- $font-family-body: Mulish, Helvetica, sans-serif !default;
108
- $font-family-default: Mulish, Helvetica, sans-serif !default;
109
- $font-lineHeight-smallText: 1.6 !default;
110
- $font-lineHeight-bodyText: 1.25 !default;
111
- $font-lineHeight-bigText: 1.1 !default;
112
- $font-lineHeight-default: 1.25 !default;
113
- $font-size-xs: 12px !default;
114
- $font-size-s: 14px !default;
115
- $font-size-m: 16px !default;
116
- $font-size-l: 20px !default;
117
- $font-size-heading1: 32px !default;
118
- $font-size-heading2: 28px !default;
119
- $font-size-heading3: 24px !default;
120
- $font-size-default: 16px !default;
121
- $font-weight-normal: 400 !default;
122
- $font-weight-semibold: 600 !default;
123
- $font-weight-bold: 700 !default;
124
- $font-weight-default: 400 !default;
125
- $space-xxs: 4px !default;
126
- $space-xs: 8px !default;
127
- $space-s: 12px !default;
128
- $space-m: 16px !default;
129
- $space-l: 20px !default;
130
- $space-xl: 40px !default;
131
- $space-default: 20px !default;
132
- $elevation-low: 0 2px 12px 0 rgba(80, 80, 80, 0.05) !default;
133
- $elevation-middle: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
134
- $elevation-high: 0 2px 12px 0 rgba(80, 80, 80, 0.2) !default;
135
- $elevation-default: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
136
-
137
- $tokens: (
138
- 'border': (
139
- 'color': (
140
- 'primary': $border-color-primary,
141
- 'light': $border-color-light,
142
- 'default': $border-color-default
143
- ),
144
- 'size': (
145
- 's': $border-size-s,
146
- 'm': $border-size-m,
147
- 'default': $border-size-default
148
- )
149
- ),
150
- 'color': (
151
- 'alpha': (
152
- '5': $alpha-5,
153
- '10': $alpha-10,
154
- '20': $alpha-20
155
- ),
156
- 'background': (
157
- 'blueGrey': $bgColor-blueGrey,
158
- 'cloudGrey': $bgColor-cloudGrey,
159
- 'neutralGrey': $bgColor-neutralGrey,
160
- 'smokeGrey': $bgColor-smokeGrey,
161
- 'snowGrey': $bgColor-snowGrey,
162
- 'white': $bgColor-white,
163
- 'scrimLight': $bgColor-scrimLight,
164
- 'scrimDark': $bgColor-scrimDark
165
- ),
166
- 'narmi': (
167
- 'moss100': $color-moss100,
168
- 'moss200': $color-moss200,
169
- 'moss300': $color-moss300,
170
- 'moss400': $color-moss400,
171
- 'moss500': $color-moss500,
172
- 'moss600': $color-moss600,
173
- 'moss700': $color-moss700,
174
- 'moss800': $color-moss800,
175
- 'moss': $color-moss,
176
- 'pine100': $color-pine100,
177
- 'pine200': $color-pine200,
178
- 'pine300': $color-pine300,
179
- 'pine400': $color-pine400,
180
- 'pine500': $color-pine500,
181
- 'pine600': $color-pine600,
182
- 'pine700': $color-pine700,
183
- 'pine800': $color-pine800,
184
- 'pine': $color-pine,
185
- 'cove100': $color-cove100,
186
- 'cove200': $color-cove200,
187
- 'cove300': $color-cove300,
188
- 'cove400': $color-cove400,
189
- 'cove500': $color-cove500,
190
- 'cove600': $color-cove600,
191
- 'cove700': $color-cove700,
192
- 'cove800': $color-cove800,
193
- 'cove': $color-cove,
194
- 'azul100': $color-azul100,
195
- 'azul200': $color-azul200,
196
- 'azul300': $color-azul300,
197
- 'azul400': $color-azul400,
198
- 'azul500': $color-azul500,
199
- 'azul600': $color-azul600,
200
- 'azul700': $color-azul700,
201
- 'azul800': $color-azul800,
202
- 'azul': $color-azul,
203
- 'pistachio100': $color-pistachio100,
204
- 'pistachio200': $color-pistachio200,
205
- 'pistachio300': $color-pistachio300,
206
- 'pistachio400': $color-pistachio400,
207
- 'pistachio500': $color-pistachio500,
208
- 'pistachio600': $color-pistachio600,
209
- 'pistachio700': $color-pistachio700,
210
- 'pistachio800': $color-pistachio800,
211
- 'pistachio': $color-pistachio,
212
- 'cactus100': $color-cactus100,
213
- 'cactus200': $color-cactus200,
214
- 'cactus300': $color-cactus300,
215
- 'cactus400': $color-cactus400,
216
- 'cactus500': $color-cactus500,
217
- 'cactus600': $color-cactus600,
218
- 'cactus700': $color-cactus700,
219
- 'cactus800': $color-cactus800,
220
- 'cactus': $color-cactus,
221
- 'sand100': $color-sand100,
222
- 'sand200': $color-sand200,
223
- 'sand300': $color-sand300,
224
- 'sand400': $color-sand400,
225
- 'sand500': $color-sand500,
226
- 'sand600': $color-sand600,
227
- 'sand700': $color-sand700,
228
- 'sand800': $color-sand800,
229
- 'sand': $color-sand,
230
- 'black': $color-black,
231
- 'grey': $color-grey,
232
- 'mediumGrey': $color-mediumGrey,
233
- 'lightGrey': $color-lightGrey,
234
- 'white': $color-white
235
- ),
236
- 'system': (
237
- 'successDark': $color-successDark,
238
- 'successLight': $color-successLight,
239
- 'warnDark': $color-warnDark,
240
- 'warnLight': $color-warnLight,
241
- 'errorDark': $color-errorDark,
242
- 'errorLight': $color-errorLight
243
- ),
244
- 'theme': (
245
- 'primary': $theme-primary,
246
- 'secondary': $theme-secondary,
247
- 'tertiary': $theme-tertiary,
248
- 'link': $theme-link
249
- )
250
- ),
251
- 'font': (
252
- 'color': (
253
- 'heading': $font-color-heading,
254
- 'primary': $font-color-primary,
255
- 'secondary': $font-color-secondary,
256
- 'hint': $font-color-hint
257
- ),
258
- 'family': (
259
- 'heading': $font-family-heading,
260
- 'body': $font-family-body,
261
- 'default': $font-family-default
262
- ),
263
- 'lineHeight': (
264
- 'smallText': $font-lineHeight-smallText,
265
- 'bodyText': $font-lineHeight-bodyText,
266
- 'bigText': $font-lineHeight-bigText,
267
- 'default': $font-lineHeight-default
268
- ),
269
- 'size': (
270
- 'xs': $font-size-xs,
271
- 's': $font-size-s,
272
- 'm': $font-size-m,
273
- 'l': $font-size-l,
274
- 'heading1': $font-size-heading1,
275
- 'heading2': $font-size-heading2,
276
- 'heading3': $font-size-heading3,
277
- 'default': $font-size-default
278
- ),
279
- 'weight': (
280
- 'normal': $font-weight-normal,
281
- 'semibold': $font-weight-semibold,
282
- 'bold': $font-weight-bold,
283
- 'default': $font-weight-default
284
- )
285
- ),
286
- 'layout': (
287
- 'space': (
288
- 'xxs': $space-xxs,
289
- 'xs': $space-xs,
290
- 's': $space-s,
291
- 'm': $space-m,
292
- 'l': $space-l,
293
- 'xl': $space-xl,
294
- 'default': $space-default
295
- )
296
- ),
297
- 'shadow': (
298
- 'elevation': (
299
- 'low': $elevation-low,
300
- 'middle': $elevation-middle,
301
- 'high': $elevation-high,
302
- 'default': $elevation-default
303
- )
304
- )
305
- );