@salt-ds/theme 0.0.0-snapshot-20251011085150 → 0.0.0-snapshot-20251015094450

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 (4) hide show
  1. package/css/theme-next.css +62 -3
  2. package/css/theme.css +62 -3
  3. package/index.css +62 -3
  4. package/package.json +1 -1
package/css/theme-next.css CHANGED
@@ -24,7 +24,8 @@
24
24
  .salt-density-touch,
25
25
  .salt-density-low,
26
26
  .salt-density-medium,
27
- .salt-density-high {
27
+ .salt-density-high,
28
+ .salt-density-mobile {
28
29
  --salt-animation-opacity-start: 0;
29
30
  --salt-animation-opacity-end: 1;
30
31
  --salt-animation-scale-start: 0;
@@ -228,6 +229,7 @@
228
229
  --salt-curve-250: 15px;
229
230
  --salt-curve-999: 999px;
230
231
  }
232
+ .salt-density-mobile,
231
233
  .salt-density-touch {
232
234
  --salt-curve-0: 0;
233
235
  --salt-curve-50: 4px;
@@ -274,6 +276,7 @@
274
276
  --salt-size-selectable: 16px;
275
277
  --salt-size-bar-strong: 12px;
276
278
  }
279
+ .salt-density-mobile,
277
280
  .salt-density-touch {
278
281
  --salt-size-adornment: 12px;
279
282
  --salt-size-bar: 8px;
@@ -286,7 +289,8 @@
286
289
  .salt-density-touch,
287
290
  .salt-density-low,
288
291
  .salt-density-medium,
289
- .salt-density-high {
292
+ .salt-density-high,
293
+ .salt-density-mobile {
290
294
  --salt-size-fixed-100: 1px;
291
295
  --salt-size-fixed-200: 2px;
292
296
  --salt-size-fixed-300: 3px;
@@ -335,6 +339,35 @@
335
339
  --salt-spacing-850: calc(8.5 * var(--salt-spacing-100));
336
340
  --salt-spacing-900: calc(9 * var(--salt-spacing-100));
337
341
  --salt-spacing-950: calc(9.5 * var(--salt-spacing-100));
342
+ }
343
+ .salt-density-mobile {
344
+ --salt-spacing-25: 4px;
345
+ --salt-spacing-50: 8px;
346
+ --salt-spacing-75: 12px;
347
+ --salt-spacing-100: 16px;
348
+ --salt-spacing-150: 18px;
349
+ --salt-spacing-200: 20px;
350
+ --salt-spacing-250: 22px;
351
+ --salt-spacing-300: 24px;
352
+ --salt-spacing-350: 26px;
353
+ --salt-spacing-400: 28px;
354
+ --salt-spacing-450: 30px;
355
+ --salt-spacing-500: 32px;
356
+ --salt-spacing-550: 34px;
357
+ --salt-spacing-600: 36px;
358
+ --salt-spacing-650: 38px;
359
+ --salt-spacing-700: 40px;
360
+ --salt-spacing-750: 42px;
361
+ --salt-spacing-800: 44px;
362
+ --salt-spacing-850: 46px;
363
+ --salt-spacing-900: 48px;
364
+ --salt-spacing-950: 50px;
365
+ }
366
+ .salt-density-touch,
367
+ .salt-density-low,
368
+ .salt-density-medium,
369
+ .salt-density-high,
370
+ .salt-density-mobile {
338
371
  --salt-spacing-fixed-100: 1px;
339
372
  --salt-spacing-fixed-200: 2px;
340
373
  --salt-spacing-fixed-300: 3px;
@@ -366,7 +399,8 @@
366
399
  .salt-density-touch,
367
400
  .salt-density-low,
368
401
  .salt-density-medium,
369
- .salt-density-high {
402
+ .salt-density-high,
403
+ .salt-density-mobile {
370
404
  --salt-zIndex-default: 1;
371
405
  --salt-zIndex-popout: 1000;
372
406
  --salt-zIndex-appHeader: 1100;
@@ -1900,6 +1934,31 @@
1900
1934
  --salt-text-notation-fontSize: 8px;
1901
1935
  --salt-text-notation-lineHeight: 10px;
1902
1936
  }
1937
+ .salt-density-mobile {
1938
+ --salt-text-h1-fontSize: 42px;
1939
+ --salt-text-h1-lineHeight: 54px;
1940
+ --salt-text-h2-fontSize: 32px;
1941
+ --salt-text-h2-lineHeight: 42px;
1942
+ --salt-text-h3-fontSize: 24px;
1943
+ --salt-text-h3-lineHeight: 32px;
1944
+ --salt-text-h4-fontSize: 16px;
1945
+ --salt-text-h4-lineHeight: 21px;
1946
+ --salt-text-label-fontSize: 14px;
1947
+ --salt-text-label-lineHeight: 18px;
1948
+ --salt-text-fontSize: 16px;
1949
+ --salt-text-lineHeight: 21px;
1950
+ --salt-text-minHeight: 21px;
1951
+ --salt-text-display1-fontSize: 84px;
1952
+ --salt-text-display1-lineHeight: 109px;
1953
+ --salt-text-display2-fontSize: 58px;
1954
+ --salt-text-display2-lineHeight: 76px;
1955
+ --salt-text-display3-fontSize: 42px;
1956
+ --salt-text-display3-lineHeight: 54px;
1957
+ --salt-text-display4-fontSize: 42px;
1958
+ --salt-text-display4-lineHeight: 54px;
1959
+ --salt-text-notation-fontSize: 14px;
1960
+ --salt-text-notation-lineHeight: 18px;
1961
+ }
1903
1962
 
1904
1963
  /* css/deprecated/foundations.css */
1905
1964
  .salt-theme {
package/css/theme.css CHANGED
@@ -24,7 +24,8 @@
24
24
  .salt-density-touch,
25
25
  .salt-density-low,
26
26
  .salt-density-medium,
27
- .salt-density-high {
27
+ .salt-density-high,
28
+ .salt-density-mobile {
28
29
  --salt-animation-opacity-start: 0;
29
30
  --salt-animation-opacity-end: 1;
30
31
  --salt-animation-scale-start: 0;
@@ -228,6 +229,7 @@
228
229
  --salt-curve-250: 15px;
229
230
  --salt-curve-999: 999px;
230
231
  }
232
+ .salt-density-mobile,
231
233
  .salt-density-touch {
232
234
  --salt-curve-0: 0;
233
235
  --salt-curve-50: 4px;
@@ -274,6 +276,7 @@
274
276
  --salt-size-selectable: 16px;
275
277
  --salt-size-bar-strong: 12px;
276
278
  }
279
+ .salt-density-mobile,
277
280
  .salt-density-touch {
278
281
  --salt-size-adornment: 12px;
279
282
  --salt-size-bar: 8px;
@@ -286,7 +289,8 @@
286
289
  .salt-density-touch,
287
290
  .salt-density-low,
288
291
  .salt-density-medium,
289
- .salt-density-high {
292
+ .salt-density-high,
293
+ .salt-density-mobile {
290
294
  --salt-size-fixed-100: 1px;
291
295
  --salt-size-fixed-200: 2px;
292
296
  --salt-size-fixed-300: 3px;
@@ -335,6 +339,35 @@
335
339
  --salt-spacing-850: calc(8.5 * var(--salt-spacing-100));
336
340
  --salt-spacing-900: calc(9 * var(--salt-spacing-100));
337
341
  --salt-spacing-950: calc(9.5 * var(--salt-spacing-100));
342
+ }
343
+ .salt-density-mobile {
344
+ --salt-spacing-25: 4px;
345
+ --salt-spacing-50: 8px;
346
+ --salt-spacing-75: 12px;
347
+ --salt-spacing-100: 16px;
348
+ --salt-spacing-150: 18px;
349
+ --salt-spacing-200: 20px;
350
+ --salt-spacing-250: 22px;
351
+ --salt-spacing-300: 24px;
352
+ --salt-spacing-350: 26px;
353
+ --salt-spacing-400: 28px;
354
+ --salt-spacing-450: 30px;
355
+ --salt-spacing-500: 32px;
356
+ --salt-spacing-550: 34px;
357
+ --salt-spacing-600: 36px;
358
+ --salt-spacing-650: 38px;
359
+ --salt-spacing-700: 40px;
360
+ --salt-spacing-750: 42px;
361
+ --salt-spacing-800: 44px;
362
+ --salt-spacing-850: 46px;
363
+ --salt-spacing-900: 48px;
364
+ --salt-spacing-950: 50px;
365
+ }
366
+ .salt-density-touch,
367
+ .salt-density-low,
368
+ .salt-density-medium,
369
+ .salt-density-high,
370
+ .salt-density-mobile {
338
371
  --salt-spacing-fixed-100: 1px;
339
372
  --salt-spacing-fixed-200: 2px;
340
373
  --salt-spacing-fixed-300: 3px;
@@ -366,7 +399,8 @@
366
399
  .salt-density-touch,
367
400
  .salt-density-low,
368
401
  .salt-density-medium,
369
- .salt-density-high {
402
+ .salt-density-high,
403
+ .salt-density-mobile {
370
404
  --salt-zIndex-default: 1;
371
405
  --salt-zIndex-popout: 1000;
372
406
  --salt-zIndex-appHeader: 1100;
@@ -2222,6 +2256,31 @@
2222
2256
  --salt-text-notation-fontSize: 8px;
2223
2257
  --salt-text-notation-lineHeight: 10px;
2224
2258
  }
2259
+ .salt-density-mobile {
2260
+ --salt-text-h1-fontSize: 42px;
2261
+ --salt-text-h1-lineHeight: 54px;
2262
+ --salt-text-h2-fontSize: 32px;
2263
+ --salt-text-h2-lineHeight: 42px;
2264
+ --salt-text-h3-fontSize: 24px;
2265
+ --salt-text-h3-lineHeight: 32px;
2266
+ --salt-text-h4-fontSize: 16px;
2267
+ --salt-text-h4-lineHeight: 21px;
2268
+ --salt-text-label-fontSize: 14px;
2269
+ --salt-text-label-lineHeight: 18px;
2270
+ --salt-text-fontSize: 16px;
2271
+ --salt-text-lineHeight: 21px;
2272
+ --salt-text-minHeight: 21px;
2273
+ --salt-text-display1-fontSize: 84px;
2274
+ --salt-text-display1-lineHeight: 109px;
2275
+ --salt-text-display2-fontSize: 58px;
2276
+ --salt-text-display2-lineHeight: 76px;
2277
+ --salt-text-display3-fontSize: 42px;
2278
+ --salt-text-display3-lineHeight: 54px;
2279
+ --salt-text-display4-fontSize: 42px;
2280
+ --salt-text-display4-lineHeight: 54px;
2281
+ --salt-text-notation-fontSize: 14px;
2282
+ --salt-text-notation-lineHeight: 18px;
2283
+ }
2225
2284
 
2226
2285
  /* css/deprecated/foundations.css */
2227
2286
  .salt-theme {
package/index.css CHANGED
@@ -64,7 +64,8 @@
64
64
  .salt-density-touch,
65
65
  .salt-density-low,
66
66
  .salt-density-medium,
67
- .salt-density-high {
67
+ .salt-density-high,
68
+ .salt-density-mobile {
68
69
  --salt-animation-opacity-start: 0;
69
70
  --salt-animation-opacity-end: 1;
70
71
  --salt-animation-scale-start: 0;
@@ -268,6 +269,7 @@
268
269
  --salt-curve-250: 15px;
269
270
  --salt-curve-999: 999px;
270
271
  }
272
+ .salt-density-mobile,
271
273
  .salt-density-touch {
272
274
  --salt-curve-0: 0;
273
275
  --salt-curve-50: 4px;
@@ -314,6 +316,7 @@
314
316
  --salt-size-selectable: 16px;
315
317
  --salt-size-bar-strong: 12px;
316
318
  }
319
+ .salt-density-mobile,
317
320
  .salt-density-touch {
318
321
  --salt-size-adornment: 12px;
319
322
  --salt-size-bar: 8px;
@@ -326,7 +329,8 @@
326
329
  .salt-density-touch,
327
330
  .salt-density-low,
328
331
  .salt-density-medium,
329
- .salt-density-high {
332
+ .salt-density-high,
333
+ .salt-density-mobile {
330
334
  --salt-size-fixed-100: 1px;
331
335
  --salt-size-fixed-200: 2px;
332
336
  --salt-size-fixed-300: 3px;
@@ -375,6 +379,35 @@
375
379
  --salt-spacing-850: calc(8.5 * var(--salt-spacing-100));
376
380
  --salt-spacing-900: calc(9 * var(--salt-spacing-100));
377
381
  --salt-spacing-950: calc(9.5 * var(--salt-spacing-100));
382
+ }
383
+ .salt-density-mobile {
384
+ --salt-spacing-25: 4px;
385
+ --salt-spacing-50: 8px;
386
+ --salt-spacing-75: 12px;
387
+ --salt-spacing-100: 16px;
388
+ --salt-spacing-150: 18px;
389
+ --salt-spacing-200: 20px;
390
+ --salt-spacing-250: 22px;
391
+ --salt-spacing-300: 24px;
392
+ --salt-spacing-350: 26px;
393
+ --salt-spacing-400: 28px;
394
+ --salt-spacing-450: 30px;
395
+ --salt-spacing-500: 32px;
396
+ --salt-spacing-550: 34px;
397
+ --salt-spacing-600: 36px;
398
+ --salt-spacing-650: 38px;
399
+ --salt-spacing-700: 40px;
400
+ --salt-spacing-750: 42px;
401
+ --salt-spacing-800: 44px;
402
+ --salt-spacing-850: 46px;
403
+ --salt-spacing-900: 48px;
404
+ --salt-spacing-950: 50px;
405
+ }
406
+ .salt-density-touch,
407
+ .salt-density-low,
408
+ .salt-density-medium,
409
+ .salt-density-high,
410
+ .salt-density-mobile {
378
411
  --salt-spacing-fixed-100: 1px;
379
412
  --salt-spacing-fixed-200: 2px;
380
413
  --salt-spacing-fixed-300: 3px;
@@ -406,7 +439,8 @@
406
439
  .salt-density-touch,
407
440
  .salt-density-low,
408
441
  .salt-density-medium,
409
- .salt-density-high {
442
+ .salt-density-high,
443
+ .salt-density-mobile {
410
444
  --salt-zIndex-default: 1;
411
445
  --salt-zIndex-popout: 1000;
412
446
  --salt-zIndex-appHeader: 1100;
@@ -2262,6 +2296,31 @@
2262
2296
  --salt-text-notation-fontSize: 8px;
2263
2297
  --salt-text-notation-lineHeight: 10px;
2264
2298
  }
2299
+ .salt-density-mobile {
2300
+ --salt-text-h1-fontSize: 42px;
2301
+ --salt-text-h1-lineHeight: 54px;
2302
+ --salt-text-h2-fontSize: 32px;
2303
+ --salt-text-h2-lineHeight: 42px;
2304
+ --salt-text-h3-fontSize: 24px;
2305
+ --salt-text-h3-lineHeight: 32px;
2306
+ --salt-text-h4-fontSize: 16px;
2307
+ --salt-text-h4-lineHeight: 21px;
2308
+ --salt-text-label-fontSize: 14px;
2309
+ --salt-text-label-lineHeight: 18px;
2310
+ --salt-text-fontSize: 16px;
2311
+ --salt-text-lineHeight: 21px;
2312
+ --salt-text-minHeight: 21px;
2313
+ --salt-text-display1-fontSize: 84px;
2314
+ --salt-text-display1-lineHeight: 109px;
2315
+ --salt-text-display2-fontSize: 58px;
2316
+ --salt-text-display2-lineHeight: 76px;
2317
+ --salt-text-display3-fontSize: 42px;
2318
+ --salt-text-display3-lineHeight: 54px;
2319
+ --salt-text-display4-fontSize: 42px;
2320
+ --salt-text-display4-lineHeight: 54px;
2321
+ --salt-text-notation-fontSize: 14px;
2322
+ --salt-text-notation-lineHeight: 18px;
2323
+ }
2265
2324
 
2266
2325
  /* css/deprecated/foundations.css */
2267
2326
  .salt-theme {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salt-ds/theme",
3
- "version": "0.0.0-snapshot-20251011085150",
3
+ "version": "0.0.0-snapshot-20251015094450",
4
4
  "license": "Apache-2.0",
5
5
  "repository": {
6
6
  "type": "git",