@ibis-design/css 0.2.0 → 0.4.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 (8) hide show
  1. package/README.md +17 -5
  2. package/dist/alchemy/alchemy-design.css +154 -0
  3. package/dist/alchemy/alchemy-design.scss +151 -0
  4. package/dist/alchemy/tailwind.preset.js +231 -0
  5. package/dist/ibis/ibis-design.css +188 -125
  6. package/dist/ibis/ibis-design.scss +188 -125
  7. package/dist/ibis/tailwind.preset.js +257 -138
  8. package/package.json +5 -3
package/dist/ibis/tailwind.preset.js CHANGED
@@ -18,32 +18,6 @@ module.exports = {
18
18
  900: "var(--color-primary-900)",
19
19
  950: "var(--color-primary-950)"
20
20
  },
21
- secondaryPurple: {
22
- 50: "var(--color-secondary-purple-50)",
23
- 100: "var(--color-secondary-purple-100)",
24
- 200: "var(--color-secondary-purple-200)",
25
- 300: "var(--color-secondary-purple-300)",
26
- 400: "var(--color-secondary-purple-400)",
27
- 500: "var(--color-secondary-purple-500)",
28
- 600: "var(--color-secondary-purple-600)",
29
- 700: "var(--color-secondary-purple-700)",
30
- 800: "var(--color-secondary-purple-800)",
31
- 900: "var(--color-secondary-purple-900)",
32
- 950: "var(--color-secondary-purple-950)"
33
- },
34
- secondaryPink: {
35
- 50: "var(--color-secondary-pink-50)",
36
- 100: "var(--color-secondary-pink-100)",
37
- 200: "var(--color-secondary-pink-200)",
38
- 300: "var(--color-secondary-pink-300)",
39
- 400: "var(--color-secondary-pink-400)",
40
- 500: "var(--color-secondary-pink-500)",
41
- 600: "var(--color-secondary-pink-600)",
42
- 700: "var(--color-secondary-pink-700)",
43
- 800: "var(--color-secondary-pink-800)",
44
- 900: "var(--color-secondary-pink-900)",
45
- 950: "var(--color-secondary-pink-950)"
46
- },
47
21
  neutral: {
48
22
  50: "var(--color-neutral-50)",
49
23
  100: "var(--color-neutral-100)",
@@ -57,81 +31,50 @@ module.exports = {
57
31
  900: "var(--color-neutral-900)",
58
32
  950: "var(--color-neutral-950)"
59
33
  },
60
- neutralSecondary: {
61
- secGrey: {
62
- 50: "var(--color-neutral-secondary-sec-grey-50)",
63
- 100: "var(--color-neutral-secondary-sec-grey-100)",
64
- 200: "var(--color-neutral-secondary-sec-grey-200)",
65
- 300: "var(--color-neutral-secondary-sec-grey-300)",
66
- 400: "var(--color-neutral-secondary-sec-grey-400)",
67
- 500: "var(--color-neutral-secondary-sec-grey-500)",
68
- 600: "var(--color-neutral-secondary-sec-grey-600)",
69
- 700: "var(--color-neutral-secondary-sec-grey-700)",
70
- 800: "var(--color-neutral-secondary-sec-grey-800)",
71
- 900: "var(--color-neutral-secondary-sec-grey-900)",
72
- 950: "var(--color-neutral-secondary-sec-grey-950)"
73
- },
74
- secBlack: {
75
- 50: "var(--color-neutral-secondary-sec-black-50)",
76
- 100: "var(--color-neutral-secondary-sec-black-100)",
77
- 200: "var(--color-neutral-secondary-sec-black-200)",
78
- 300: "var(--color-neutral-secondary-sec-black-300)",
79
- 400: "var(--color-neutral-secondary-sec-black-400)",
80
- 500: "var(--color-neutral-secondary-sec-black-500)",
81
- 600: "var(--color-neutral-secondary-sec-black-600)",
82
- 700: "var(--color-neutral-secondary-sec-black-700)",
83
- 800: "var(--color-neutral-secondary-sec-black-800)",
84
- 900: "var(--color-neutral-secondary-sec-black-900)",
85
- 950: "var(--color-neutral-secondary-sec-black-950)"
86
- }
87
- },
88
34
  white: "var(--color-white)",
89
35
  black: "var(--color-black)",
90
- system: {
91
- success: "var(--color-system-success)",
92
- failure: "var(--color-system-failure)",
93
- attention: "var(--color-system-attention)"
36
+ green: {
37
+ 500: "var(--color-green-500)"
94
38
  },
95
- gradient: {
96
- purplePink: {
97
- start: "var(--color-gradient-purple-pink-start)",
98
- end: "var(--color-gradient-purple-pink-end)"
99
- },
100
- pinkPurple: {
101
- start: "var(--color-gradient-pink-purple-start)",
102
- end: "var(--color-gradient-pink-purple-end)"
103
- },
104
- darkPurple: {
105
- start: "var(--color-gradient-dark-purple-start)",
106
- end: "var(--color-gradient-dark-purple-end)"
107
- }
39
+ red: {
40
+ 500: "var(--color-red-500)"
108
41
  },
109
- backgrounds: {
110
- cardBg: {
111
- darkPurple: "var(--color-backgrounds-card-bg-dark-purple)",
112
- purple: "var(--color-backgrounds-card-bg-purple)"
113
- },
114
- classicBg: {
115
- light: "var(--color-backgrounds-classic-bg-light)",
116
- dark: "var(--color-backgrounds-classic-bg-dark)"
117
- },
118
- themedBg: {
119
- ibisWhite: "var(--color-backgrounds-themed-bg-ibis-white)",
120
- ibisDark: "var(--color-backgrounds-themed-bg-ibis-dark)"
121
- }
42
+ orange: {
43
+ 500: "var(--color-orange-500)"
44
+ },
45
+ text: {
46
+ primary: "var(--color-text-primary)",
47
+ inverse: "var(--color-text-inverse)"
48
+ },
49
+ border: {
50
+ default: "var(--color-border-default)",
51
+ focus: "var(--color-border-focus)"
52
+ },
53
+ status: {
54
+ success: "var(--color-status-success)",
55
+ error: "var(--color-status-error)",
56
+ warning: "var(--color-status-warning)"
122
57
  },
123
- buttons: {
124
- simple: "var(--color-buttons-simple)",
125
- darkGradient: {
126
- start: "var(--color-buttons-dark-gradient-start)",
127
- end: "var(--color-buttons-dark-gradient-end)"
58
+ gradients: {
59
+ main: {
60
+ start: "var(--color-gradients-main-start)",
61
+ end: "var(--color-gradients-main-end)"
128
62
  },
129
- gradient: {
130
- start: "var(--color-buttons-gradient-start)",
131
- end: "var(--color-buttons-gradient-end)"
63
+ purple: {
64
+ start: "var(--color-gradients-purple-start)",
65
+ end: "var(--color-gradients-purple-end)"
66
+ },
67
+ darkPurple: {
68
+ start: "var(--color-gradients-dark-purple-start)",
69
+ end: "var(--color-gradients-dark-purple-end)"
132
70
  }
133
71
  }
134
72
  },
73
+ gradient: {
74
+ brand: {
75
+ primary: "var(--gradient-brand-primary)"
76
+ }
77
+ },
135
78
  spacing: {
136
79
  0: "var(--spacing-0)",
137
80
  1: "var(--spacing-1)",
@@ -140,26 +83,19 @@ module.exports = {
140
83
  4: "var(--spacing-4)",
141
84
  5: "var(--spacing-5)",
142
85
  6: "var(--spacing-6)",
86
+ 7: "var(--spacing-7)",
143
87
  8: "var(--spacing-8)",
88
+ 9: "var(--spacing-9)",
144
89
  10: "var(--spacing-10)",
145
90
  12: "var(--spacing-12)",
146
- 16: "var(--spacing-16)"
147
- },
148
- letterSpacing: {
149
- tighter: "var(--letter-spacing-tighter)",
150
- tight: "var(--letter-spacing-tight)",
151
- normal: "var(--letter-spacing-normal)",
152
- wide: "var(--letter-spacing-wide)",
153
- wider: "var(--letter-spacing-wider)"
154
- },
155
- lineHeight: {
156
- tight: "var(--line-height-tight)",
157
- normal: "var(--line-height-normal)",
158
- relaxed: "var(--line-height-relaxed)",
159
- loose: "var(--line-height-loose)"
91
+ 14: "var(--spacing-14)",
92
+ 16: "var(--spacing-16)",
93
+ 20: "var(--spacing-20)",
94
+ 24: "var(--spacing-24)"
160
95
  },
161
96
  fontFamily: {
162
97
  branding: "var(--font-family-branding)",
98
+ heading: "var(--font-family-heading)",
163
99
  sans: "var(--font-family-sans)"
164
100
  },
165
101
  fontWeight: {
@@ -174,42 +110,99 @@ module.exports = {
174
110
  black: "var(--font-weight-black)"
175
111
  },
176
112
  fontSize: {
177
- normalText: {
178
- xs: "var(--font-size-normal-text-xs)",
179
- sm: "var(--font-size-normal-text-sm)",
180
- DEFAULT: "var(--font-size-normal-text-default)",
181
- lg: "var(--font-size-normal-text-lg)",
182
- xl: "var(--font-size-normal-text-xl)"
113
+ body: {
114
+ sm: "var(--font-size-body-sm)",
115
+ md: "var(--font-size-body-md)",
116
+ lg: "var(--font-size-body-lg)"
183
117
  },
184
- marketingText: {
185
- sm: "var(--font-size-marketing-text-sm)",
186
- DEFAULT: "var(--font-size-marketing-text-default)",
187
- lg: "var(--font-size-marketing-text-lg)",
188
- xl: "var(--font-size-marketing-text-xl)"
118
+ heading: {
119
+ "h1": "var(--font-size-heading-h1)",
120
+ "h2": "var(--font-size-heading-h2)",
121
+ "h3": "var(--font-size-heading-h3)",
122
+ "h4": "var(--font-size-heading-h4)",
123
+ "h5": "var(--font-size-heading-h5)"
124
+ }
125
+ },
126
+ fontStyle: {
127
+ normal: "var(--font-style-normal)",
128
+ italic: "var(--font-style-italic)"
129
+ },
130
+ textTransform: {
131
+ uppercase: "var(--text-transform-uppercase)",
132
+ lowercase: "var(--text-transform-lowercase)",
133
+ capitalize: "var(--text-transform-capitalize)"
134
+ },
135
+ lineHeight: {
136
+ tight: "var(--line-height-tight)",
137
+ normal: "var(--line-height-normal)",
138
+ relaxed: "var(--line-height-relaxed)",
139
+ loose: "var(--line-height-loose)"
140
+ },
141
+ letterSpacing: {
142
+ tighter: "var(--letter-spacing-tighter)",
143
+ tight: "var(--letter-spacing-tight)",
144
+ normal: "var(--letter-spacing-normal)",
145
+ wide: "var(--letter-spacing-wide)",
146
+ wider: "var(--letter-spacing-wider)"
147
+ },
148
+ textStyle: {
149
+ body: {
150
+ fontFamily: "var(--text-style-body-font-family)",
151
+ fontSize: "var(--text-style-body-font-size)",
152
+ lineHeight: "var(--text-style-body-line-height)",
153
+ fontWeight: "var(--text-style-body-font-weight)"
154
+ },
155
+ heading: {
156
+ fontFamily: "var(--text-style-heading-font-family)",
157
+ fontSize: "var(--text-style-heading-font-size)",
158
+ lineHeight: "var(--text-style-heading-line-height)",
159
+ fontWeight: "var(--text-style-heading-font-weight)"
189
160
  }
190
161
  },
191
162
  borderRadius: {
192
163
  none: "var(--border-radius-none)",
164
+ xs: "var(--border-radius-xs)",
193
165
  sm: "var(--border-radius-sm)",
194
- DEFAULT: "var(--border-radius-default)",
195
166
  md: "var(--border-radius-md)",
196
167
  lg: "var(--border-radius-lg)",
168
+ xl: "var(--border-radius-xl)",
169
+ "2xl": "var(--border-radius-2xl)",
197
170
  full: "var(--border-radius-full)"
198
171
  },
199
172
  borderWidth: {
200
173
  none: "var(--border-width-none)",
174
+ hairline: "var(--border-width-hairline)",
201
175
  thin: "var(--border-width-thin)",
202
- DEFAULT: "var(--border-width-default)",
176
+ default: "var(--border-width-default)",
177
+ medium: "var(--border-width-medium)",
203
178
  thick: "var(--border-width-thick)"
204
179
  },
180
+ shadowColor: {
181
+ black: {
182
+ soft: "var(--shadow-color-black-soft)",
183
+ medium: "var(--shadow-color-black-medium)",
184
+ strong: "var(--shadow-color-black-strong)"
185
+ },
186
+ brand: {
187
+ soft: "var(--shadow-color-brand-soft)",
188
+ medium: "var(--shadow-color-brand-medium)",
189
+ strong: "var(--shadow-color-brand-strong)"
190
+ },
191
+ white: {
192
+ soft: "var(--shadow-color-white-soft)",
193
+ medium: "var(--shadow-color-white-medium)",
194
+ strong: "var(--shadow-color-white-strong)"
195
+ }
196
+ },
205
197
  shadow: {
206
198
  none: "var(--shadow-none)",
207
- DEFAULT: "var(--shadow-default)",
199
+ default: "var(--shadow-default)",
208
200
  md: "var(--shadow-md)",
209
201
  lg: "var(--shadow-lg)",
210
202
  xl: "var(--shadow-xl)",
211
203
  "2xl": "var(--shadow-2xl)",
212
- inner: "var(--shadow-inner)"
204
+ inner: "var(--shadow-inner)",
205
+ buttonInner: "var(--shadow-button-inner)"
213
206
  },
214
207
  logo: {
215
208
  square: {
@@ -221,22 +214,11 @@ module.exports = {
221
214
  }
222
215
  },
223
216
  icons: {
224
- frame: {
225
- circle: {
226
- xs: "var(--icons-frame-circle-xs)",
227
- sm: "var(--icons-frame-circle-sm)",
228
- md: "var(--icons-frame-circle-md)",
229
- lg: "var(--icons-frame-circle-lg)",
230
- xl: "var(--icons-frame-circle-xl)"
231
- }
232
- },
233
- size: {
234
- xs: "var(--icons-size-xs)",
235
- sm: "var(--icons-size-sm)",
236
- md: "var(--icons-size-md)",
237
- lg: "var(--icons-size-lg)",
238
- xl: "var(--icons-size-xl)"
239
- }
217
+ xs: "var(--icons-xs)",
218
+ sm: "var(--icons-sm)",
219
+ md: "var(--icons-md)",
220
+ lg: "var(--icons-lg)",
221
+ xl: "var(--icons-xl)"
240
222
  },
241
223
  zIndex: {
242
224
  base: "var(--z-index-base)",
@@ -248,6 +230,15 @@ module.exports = {
248
230
  tooltip: "var(--z-index-tooltip)"
249
231
  },
250
232
  opacity: {
233
+ 1: "var(--opacity-1)",
234
+ 2: "var(--opacity-2)",
235
+ 3: "var(--opacity-3)",
236
+ 4: "var(--opacity-4)",
237
+ 5: "var(--opacity-5)",
238
+ 6: "var(--opacity-6)",
239
+ 7: "var(--opacity-7)",
240
+ 8: "var(--opacity-8)",
241
+ 9: "var(--opacity-9)",
251
242
  disabled: "var(--opacity-disabled)",
252
243
  muted: "var(--opacity-muted)",
253
244
  subtle: "var(--opacity-subtle)"
@@ -266,6 +257,7 @@ module.exports = {
266
257
  }
267
258
  },
268
259
  breakpoint: {
260
+ "2xs": "var(--breakpoint-2xs)",
269
261
  xs: "var(--breakpoint-xs)",
270
262
  sm: "var(--breakpoint-sm)",
271
263
  md: "var(--breakpoint-md)",
@@ -280,7 +272,134 @@ module.exports = {
280
272
  md: "var(--blur-md)",
281
273
  lg: "var(--blur-lg)",
282
274
  xl: "var(--blur-xl)",
283
- "2xl": "var(--blur-2xl)"
275
+ "2xl": "var(--blur-2xl)",
276
+ "3xl": "var(--blur-3xl)"
277
+ },
278
+ size: {
279
+ xs: "var(--size-xs)",
280
+ sm: "var(--size-sm)",
281
+ md: "var(--size-md)",
282
+ lg: "var(--size-lg)",
283
+ xl: "var(--size-xl)",
284
+ "2xl": "var(--size-2xl)"
285
+ },
286
+ component: {
287
+ button: {
288
+ primary: {
289
+ default: {
290
+ background: "var(--component-button-primary-default-background)",
291
+ color: "var(--component-button-primary-default-color)",
292
+ borderColor: "var(--component-button-primary-default-border-color)",
293
+ borderWidth: "var(--component-button-primary-default-border-width)",
294
+ paddingX: "var(--component-button-primary-default-padding-x)",
295
+ paddingY: "var(--component-button-primary-default-padding-y)",
296
+ shadow: "var(--component-button-primary-default-shadow)"
297
+ },
298
+ hover: {
299
+ background: "var(--component-button-primary-hover-background)",
300
+ borderColor: "var(--component-button-primary-hover-border-color)"
301
+ },
302
+ disabled: {
303
+ background: "var(--component-button-primary-disabled-background)",
304
+ color: "var(--component-button-primary-disabled-color)",
305
+ borderColor: "var(--component-button-primary-disabled-border-color)"
306
+ }
307
+ },
308
+ secondary: {
309
+ default: {
310
+ background: "var(--component-button-secondary-default-background)",
311
+ color: "var(--component-button-secondary-default-color)",
312
+ borderColor: "var(--component-button-secondary-default-border-color)",
313
+ borderWidth: "var(--component-button-secondary-default-border-width)",
314
+ paddingX: "var(--component-button-secondary-default-padding-x)",
315
+ paddingY: "var(--component-button-secondary-default-padding-y)"
316
+ },
317
+ hover: {
318
+ background: "var(--component-button-secondary-hover-background)",
319
+ borderColor: "var(--component-button-secondary-hover-border-color)"
320
+ },
321
+ focused: {
322
+ background: "var(--component-button-secondary-focused-background)",
323
+ borderColor: "var(--component-button-secondary-focused-border-color)",
324
+ borderWidth: "var(--component-button-secondary-focused-border-width)"
325
+ },
326
+ disabled: {
327
+ background: "var(--component-button-secondary-disabled-background)",
328
+ color: "var(--component-button-secondary-disabled-color)",
329
+ borderColor: "var(--component-button-secondary-disabled-border-color)"
330
+ }
331
+ },
332
+ size: {
333
+ xs: {
334
+ borderRadius: "var(--component-button-size-xs-border-radius)"
335
+ },
336
+ sm: {
337
+ borderRadius: "var(--component-button-size-sm-border-radius)"
338
+ },
339
+ md: {
340
+ borderRadius: "var(--component-button-size-md-border-radius)"
341
+ },
342
+ lg: {
343
+ borderRadius: "var(--component-button-size-lg-border-radius)"
344
+ }
345
+ }
346
+ },
347
+ toaster: {
348
+ default: {
349
+ background: "var(--component-toaster-default-background)",
350
+ color: "var(--component-toaster-default-color)",
351
+ borderColor: "var(--component-toaster-default-border-color)",
352
+ borderWidth: "var(--component-toaster-default-border-width)"
353
+ },
354
+ success: {
355
+ background: "var(--component-toaster-success-background)",
356
+ color: "var(--component-toaster-success-color)",
357
+ borderColor: "var(--component-toaster-success-border-color)",
358
+ borderWidth: "var(--component-toaster-success-border-width)"
359
+ },
360
+ error: {
361
+ background: "var(--component-toaster-error-background)",
362
+ color: "var(--component-toaster-error-color)",
363
+ borderColor: "var(--component-toaster-error-border-color)",
364
+ borderWidth: "var(--component-toaster-error-border-width)"
365
+ },
366
+ accent: {
367
+ background: "var(--component-toaster-accent-background)",
368
+ color: "var(--component-toaster-accent-color)",
369
+ borderColor: "var(--component-toaster-accent-border-color)",
370
+ borderWidth: "var(--component-toaster-accent-border-width)"
371
+ }
372
+ },
373
+ banner: {
374
+ default: {
375
+ background: "var(--component-banner-default-background)",
376
+ backgroundOpacity: "var(--component-banner-default-background-opacity)",
377
+ color: "var(--component-banner-default-color)",
378
+ borderColor: "var(--component-banner-default-border-color)",
379
+ borderWidth: "var(--component-banner-default-border-width)"
380
+ },
381
+ success: {
382
+ background: "var(--component-banner-success-background)",
383
+ backgroundOpacity: "var(--component-banner-success-background-opacity)",
384
+ color: "var(--component-banner-success-color)",
385
+ borderColor: "var(--component-banner-success-border-color)",
386
+ borderWidth: "var(--component-banner-success-border-width)"
387
+ },
388
+ error: {
389
+ background: "var(--component-banner-error-background)",
390
+ backgroundOpacity: "var(--component-banner-error-background-opacity)",
391
+ color: "var(--component-banner-error-color)",
392
+ borderColor: "var(--component-banner-error-border-color)",
393
+ borderWidth: "var(--component-banner-error-border-width)"
394
+ },
395
+ accent: {
396
+ background: "var(--component-banner-accent-background)",
397
+ backgroundOpacity: "var(--component-banner-accent-background-opacity)",
398
+ color: "var(--component-banner-accent-color)",
399
+ borderColor: "var(--component-banner-accent-border-color)",
400
+ borderWidth: "var(--component-banner-accent-border-width)"
401
+ }
402
+ }
284
403
  }
285
404
  },
286
405
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ibis-design/css",
3
- "version": "0.2.0",
3
+ "version": "0.4.0",
4
4
  "description": "Design tokens, CSS variables, and Tailwind preset for the IBIS design system.",
5
5
  "type": "module",
6
6
  "exports": {
@@ -10,7 +10,9 @@
10
10
  "./alchemy-design.css": "./dist/alchemy/alchemy-design.css",
11
11
  "./alchemy-design.scss": "./dist/alchemy/alchemy-design.scss",
12
12
  "./tailwind.preset": "./dist/ibis/tailwind.preset.js",
13
- "./preset": "./dist/ibis/tailwind.preset.js"
13
+ "./preset": "./dist/ibis/tailwind.preset.js",
14
+ "./ibis/tailwind.preset": "./dist/ibis/tailwind.preset.js",
15
+ "./alchemy/tailwind.preset": "./dist/alchemy/tailwind.preset.js"
14
16
  },
15
17
  "files": [
16
18
  "dist"
@@ -21,6 +23,6 @@
21
23
  },
22
24
  "devDependencies": {
23
25
  "sd-tailwindcss-transformer": "^2.2.1",
24
- "style-dictionary": "^5.3.3"
26
+ "style-dictionary": "^5.4.0"
25
27
  }
26
28
  }