@equinor/eds-tokens 0.5.7 β†’ 0.7.0-dev.202205096

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/LICENSE +21 -0
  2. package/dist/tokens.cjs.js +128 -5
  3. package/dist/tokens.esm.js +128 -5
  4. package/dist/tokens.umd.js +131 -8
  5. package/dist/types/base/index.d.ts +123 -0
  6. package/dist/types/base/interactions.d.ts +17 -0
  7. package/dist/types/base/shape.d.ts +49 -0
  8. package/dist/types/base/typography.d.ts +57 -0
  9. package/dist/types/src/types/borders.d.ts +1 -1
  10. package/dist/types/src/types/clickbound.d.ts +4 -4
  11. package/dist/types/src/types/component.d.ts +20 -8
  12. package/dist/types/src/types/index.d.ts +4 -0
  13. package/package.json +11 -10
  14. package/CHANGELOG.md +0 -159
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2020 Equinor ASA
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/dist/tokens.cjs.js CHANGED
@@ -408,6 +408,23 @@ const elevation = {
408
408
  };
409
409
 
410
410
  const interactions = {
411
+ _modes: {
412
+ compact: {
413
+ pressed_dark_overlay: {
414
+ blendMode: 'pass_through',
415
+ pressedColor: 'transparent',
416
+ },
417
+ focused: {
418
+ style: 'dashed',
419
+ color: 'rgba(0, 112, 121, 1)',
420
+ width: '2px',
421
+ },
422
+ pressed_light_overlay: {
423
+ blendMode: 'pass_through',
424
+ pressedColor: 'rgba(255, 255, 255, 1)',
425
+ },
426
+ },
427
+ },
411
428
  pressed_dark_overlay: {
412
429
  blendMode: 'darken',
413
430
  pressedColor: 'rgba(0, 0, 0, 0.2)',
@@ -415,7 +432,7 @@ const interactions = {
415
432
  focused: {
416
433
  style: 'dashed',
417
434
  color: 'rgba(0, 112, 121, 1)',
418
- width: '1px',
435
+ width: '2px',
419
436
  },
420
437
  pressed_light_overlay: {
421
438
  blendMode: 'pass_through',
@@ -424,6 +441,55 @@ const interactions = {
424
441
  };
425
442
 
426
443
  const shape = {
444
+ _modes: {
445
+ compact: {
446
+ rounded: {
447
+ minHeight: '24px',
448
+ minWidth: '80px',
449
+ borderRadius: '100px',
450
+ },
451
+ button: {
452
+ minHeight: '24px',
453
+ minWidth: '112px',
454
+ borderRadius: '4px',
455
+ },
456
+ toggle: {
457
+ minHeight: '24px',
458
+ minWidth: '112px',
459
+ borderRadius: '4px',
460
+ },
461
+ corners: {
462
+ minHeight: '24px',
463
+ minWidth: '112px',
464
+ borderRadius: '4px',
465
+ },
466
+ icon_button: {
467
+ minHeight: '32px',
468
+ minWidth: '32px',
469
+ borderRadius: '100px',
470
+ },
471
+ straight: {
472
+ minHeight: '24px',
473
+ minWidth: '112px',
474
+ borderRadius: '',
475
+ },
476
+ toggle_rounded_border: {
477
+ minHeight: '24px',
478
+ minWidth: '2px',
479
+ borderRadius: '',
480
+ },
481
+ toggle_straight_border: {
482
+ minHeight: '24px',
483
+ minWidth: '2px',
484
+ borderRadius: '',
485
+ },
486
+ circle: {
487
+ minHeight: '24px',
488
+ minWidth: '24px',
489
+ borderRadius: '100px',
490
+ },
491
+ },
492
+ },
427
493
  toggle_straight_border: {
428
494
  minHeight: '36px',
429
495
  minWidth: '4px',
@@ -502,7 +568,7 @@ const typography = {
502
568
  fontFamily: 'Equinor',
503
569
  fontSize: '2.000rem',
504
570
  fontWeight: 700,
505
- lineHeight: '1.500em',
571
+ lineHeight: '1.250em',
506
572
  textAlign: 'left',
507
573
  },
508
574
  h1: {
@@ -510,7 +576,7 @@ const typography = {
510
576
  fontFamily: 'Equinor',
511
577
  fontSize: '2.000rem',
512
578
  fontWeight: 400,
513
- lineHeight: '1.500em',
579
+ lineHeight: '1.250em',
514
580
  textAlign: 'left',
515
581
  },
516
582
  h2: {
@@ -518,7 +584,7 @@ const typography = {
518
584
  fontFamily: 'Equinor',
519
585
  fontSize: '1.750rem',
520
586
  fontWeight: 400,
521
- lineHeight: '1.429em',
587
+ lineHeight: '1.250em',
522
588
  textAlign: 'left',
523
589
  },
524
590
  h3: {
@@ -526,7 +592,7 @@ const typography = {
526
592
  fontFamily: 'Equinor',
527
593
  fontSize: '1.500rem',
528
594
  fontWeight: 400,
529
- lineHeight: '1.667em',
595
+ lineHeight: '1.250em',
530
596
  textAlign: 'left',
531
597
  },
532
598
  h4: {
@@ -626,6 +692,15 @@ const typography = {
626
692
  textDecoration: 'underline',
627
693
  textAlign: 'left',
628
694
  },
695
+ menu_title_hover: {
696
+ color: 'rgba(61, 61, 61, 1)',
697
+ fontFamily: 'Equinor',
698
+ fontSize: '1.000rem',
699
+ fontWeight: 400,
700
+ letterSpacing: '0.013em',
701
+ lineHeight: '1.000em',
702
+ textAlign: 'left',
703
+ },
629
704
  },
630
705
  input: {
631
706
  label: {
@@ -831,6 +906,54 @@ const typography = {
831
906
  textAlign: 'left',
832
907
  },
833
908
  },
909
+ _modes: {
910
+ compact: {
911
+ table: {
912
+ cell_header: {
913
+ color: 'rgba(0, 0, 0, 1)',
914
+ fontFamily: 'Equinor',
915
+ fontSize: '0.875rem',
916
+ fontWeight: 700,
917
+ lineHeight: '1.143em',
918
+ textAlign: 'left',
919
+ },
920
+ cell_text: {
921
+ color: 'rgba(0, 0, 0, 1)',
922
+ fontFamily: 'Equinor',
923
+ fontSize: '0.875rem',
924
+ fontWeight: 500,
925
+ lineHeight: '1.143em',
926
+ textAlign: 'left',
927
+ },
928
+ cell_text_bold: {
929
+ color: 'rgba(0, 0, 0, 1)',
930
+ fontFamily: 'Equinor',
931
+ fontSize: '0.875rem',
932
+ fontWeight: 700,
933
+ lineHeight: '1.143em',
934
+ textAlign: 'left',
935
+ },
936
+ cell_text_link: {
937
+ color: 'rgba(0, 0, 0, 1)',
938
+ fontFamily: 'Equinor',
939
+ fontSize: '0.875rem',
940
+ fontWeight: 500,
941
+ lineHeight: '1.143em',
942
+ textDecoration: 'underline',
943
+ textAlign: 'left',
944
+ },
945
+ cell_numeric_monospaced: {
946
+ fontFeature: "'tnum' on,'lnum' on",
947
+ color: 'rgba(0, 0, 0, 1)',
948
+ fontFamily: 'Equinor',
949
+ fontSize: '0.875rem',
950
+ fontWeight: 500,
951
+ lineHeight: '1.143em',
952
+ textAlign: 'left',
953
+ },
954
+ },
955
+ },
956
+ },
834
957
  ui: {
835
958
  tooltip: {
836
959
  color: 'rgba(61, 61, 61, 1)',
package/dist/tokens.esm.js CHANGED
@@ -404,6 +404,23 @@ const elevation = {
404
404
  };
405
405
 
406
406
  const interactions = {
407
+ _modes: {
408
+ compact: {
409
+ pressed_dark_overlay: {
410
+ blendMode: 'pass_through',
411
+ pressedColor: 'transparent',
412
+ },
413
+ focused: {
414
+ style: 'dashed',
415
+ color: 'rgba(0, 112, 121, 1)',
416
+ width: '2px',
417
+ },
418
+ pressed_light_overlay: {
419
+ blendMode: 'pass_through',
420
+ pressedColor: 'rgba(255, 255, 255, 1)',
421
+ },
422
+ },
423
+ },
407
424
  pressed_dark_overlay: {
408
425
  blendMode: 'darken',
409
426
  pressedColor: 'rgba(0, 0, 0, 0.2)',
@@ -411,7 +428,7 @@ const interactions = {
411
428
  focused: {
412
429
  style: 'dashed',
413
430
  color: 'rgba(0, 112, 121, 1)',
414
- width: '1px',
431
+ width: '2px',
415
432
  },
416
433
  pressed_light_overlay: {
417
434
  blendMode: 'pass_through',
@@ -420,6 +437,55 @@ const interactions = {
420
437
  };
421
438
 
422
439
  const shape = {
440
+ _modes: {
441
+ compact: {
442
+ rounded: {
443
+ minHeight: '24px',
444
+ minWidth: '80px',
445
+ borderRadius: '100px',
446
+ },
447
+ button: {
448
+ minHeight: '24px',
449
+ minWidth: '112px',
450
+ borderRadius: '4px',
451
+ },
452
+ toggle: {
453
+ minHeight: '24px',
454
+ minWidth: '112px',
455
+ borderRadius: '4px',
456
+ },
457
+ corners: {
458
+ minHeight: '24px',
459
+ minWidth: '112px',
460
+ borderRadius: '4px',
461
+ },
462
+ icon_button: {
463
+ minHeight: '32px',
464
+ minWidth: '32px',
465
+ borderRadius: '100px',
466
+ },
467
+ straight: {
468
+ minHeight: '24px',
469
+ minWidth: '112px',
470
+ borderRadius: '',
471
+ },
472
+ toggle_rounded_border: {
473
+ minHeight: '24px',
474
+ minWidth: '2px',
475
+ borderRadius: '',
476
+ },
477
+ toggle_straight_border: {
478
+ minHeight: '24px',
479
+ minWidth: '2px',
480
+ borderRadius: '',
481
+ },
482
+ circle: {
483
+ minHeight: '24px',
484
+ minWidth: '24px',
485
+ borderRadius: '100px',
486
+ },
487
+ },
488
+ },
423
489
  toggle_straight_border: {
424
490
  minHeight: '36px',
425
491
  minWidth: '4px',
@@ -498,7 +564,7 @@ const typography = {
498
564
  fontFamily: 'Equinor',
499
565
  fontSize: '2.000rem',
500
566
  fontWeight: 700,
501
- lineHeight: '1.500em',
567
+ lineHeight: '1.250em',
502
568
  textAlign: 'left',
503
569
  },
504
570
  h1: {
@@ -506,7 +572,7 @@ const typography = {
506
572
  fontFamily: 'Equinor',
507
573
  fontSize: '2.000rem',
508
574
  fontWeight: 400,
509
- lineHeight: '1.500em',
575
+ lineHeight: '1.250em',
510
576
  textAlign: 'left',
511
577
  },
512
578
  h2: {
@@ -514,7 +580,7 @@ const typography = {
514
580
  fontFamily: 'Equinor',
515
581
  fontSize: '1.750rem',
516
582
  fontWeight: 400,
517
- lineHeight: '1.429em',
583
+ lineHeight: '1.250em',
518
584
  textAlign: 'left',
519
585
  },
520
586
  h3: {
@@ -522,7 +588,7 @@ const typography = {
522
588
  fontFamily: 'Equinor',
523
589
  fontSize: '1.500rem',
524
590
  fontWeight: 400,
525
- lineHeight: '1.667em',
591
+ lineHeight: '1.250em',
526
592
  textAlign: 'left',
527
593
  },
528
594
  h4: {
@@ -622,6 +688,15 @@ const typography = {
622
688
  textDecoration: 'underline',
623
689
  textAlign: 'left',
624
690
  },
691
+ menu_title_hover: {
692
+ color: 'rgba(61, 61, 61, 1)',
693
+ fontFamily: 'Equinor',
694
+ fontSize: '1.000rem',
695
+ fontWeight: 400,
696
+ letterSpacing: '0.013em',
697
+ lineHeight: '1.000em',
698
+ textAlign: 'left',
699
+ },
625
700
  },
626
701
  input: {
627
702
  label: {
@@ -827,6 +902,54 @@ const typography = {
827
902
  textAlign: 'left',
828
903
  },
829
904
  },
905
+ _modes: {
906
+ compact: {
907
+ table: {
908
+ cell_header: {
909
+ color: 'rgba(0, 0, 0, 1)',
910
+ fontFamily: 'Equinor',
911
+ fontSize: '0.875rem',
912
+ fontWeight: 700,
913
+ lineHeight: '1.143em',
914
+ textAlign: 'left',
915
+ },
916
+ cell_text: {
917
+ color: 'rgba(0, 0, 0, 1)',
918
+ fontFamily: 'Equinor',
919
+ fontSize: '0.875rem',
920
+ fontWeight: 500,
921
+ lineHeight: '1.143em',
922
+ textAlign: 'left',
923
+ },
924
+ cell_text_bold: {
925
+ color: 'rgba(0, 0, 0, 1)',
926
+ fontFamily: 'Equinor',
927
+ fontSize: '0.875rem',
928
+ fontWeight: 700,
929
+ lineHeight: '1.143em',
930
+ textAlign: 'left',
931
+ },
932
+ cell_text_link: {
933
+ color: 'rgba(0, 0, 0, 1)',
934
+ fontFamily: 'Equinor',
935
+ fontSize: '0.875rem',
936
+ fontWeight: 500,
937
+ lineHeight: '1.143em',
938
+ textDecoration: 'underline',
939
+ textAlign: 'left',
940
+ },
941
+ cell_numeric_monospaced: {
942
+ fontFeature: "'tnum' on,'lnum' on",
943
+ color: 'rgba(0, 0, 0, 1)',
944
+ fontFamily: 'Equinor',
945
+ fontSize: '0.875rem',
946
+ fontWeight: 500,
947
+ lineHeight: '1.143em',
948
+ textAlign: 'left',
949
+ },
950
+ },
951
+ },
952
+ },
830
953
  ui: {
831
954
  tooltip: {
832
955
  color: 'rgba(61, 61, 61, 1)',
package/dist/tokens.umd.js CHANGED
@@ -1,8 +1,8 @@
1
1
  (function (global, factory) {
2
2
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
3
3
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
4
- (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['@equinor/eds-tokens'] = {}));
5
- }(this, (function (exports) { 'use strict';
4
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@equinor/eds-tokens"] = {}));
5
+ })(this, (function (exports) { 'use strict';
6
6
 
7
7
  const clickbounds = {
8
8
  jumbo__base: '88px',
@@ -410,6 +410,23 @@
410
410
  };
411
411
 
412
412
  const interactions = {
413
+ _modes: {
414
+ compact: {
415
+ pressed_dark_overlay: {
416
+ blendMode: 'pass_through',
417
+ pressedColor: 'transparent',
418
+ },
419
+ focused: {
420
+ style: 'dashed',
421
+ color: 'rgba(0, 112, 121, 1)',
422
+ width: '2px',
423
+ },
424
+ pressed_light_overlay: {
425
+ blendMode: 'pass_through',
426
+ pressedColor: 'rgba(255, 255, 255, 1)',
427
+ },
428
+ },
429
+ },
413
430
  pressed_dark_overlay: {
414
431
  blendMode: 'darken',
415
432
  pressedColor: 'rgba(0, 0, 0, 0.2)',
@@ -417,7 +434,7 @@
417
434
  focused: {
418
435
  style: 'dashed',
419
436
  color: 'rgba(0, 112, 121, 1)',
420
- width: '1px',
437
+ width: '2px',
421
438
  },
422
439
  pressed_light_overlay: {
423
440
  blendMode: 'pass_through',
@@ -426,6 +443,55 @@
426
443
  };
427
444
 
428
445
  const shape = {
446
+ _modes: {
447
+ compact: {
448
+ rounded: {
449
+ minHeight: '24px',
450
+ minWidth: '80px',
451
+ borderRadius: '100px',
452
+ },
453
+ button: {
454
+ minHeight: '24px',
455
+ minWidth: '112px',
456
+ borderRadius: '4px',
457
+ },
458
+ toggle: {
459
+ minHeight: '24px',
460
+ minWidth: '112px',
461
+ borderRadius: '4px',
462
+ },
463
+ corners: {
464
+ minHeight: '24px',
465
+ minWidth: '112px',
466
+ borderRadius: '4px',
467
+ },
468
+ icon_button: {
469
+ minHeight: '32px',
470
+ minWidth: '32px',
471
+ borderRadius: '100px',
472
+ },
473
+ straight: {
474
+ minHeight: '24px',
475
+ minWidth: '112px',
476
+ borderRadius: '',
477
+ },
478
+ toggle_rounded_border: {
479
+ minHeight: '24px',
480
+ minWidth: '2px',
481
+ borderRadius: '',
482
+ },
483
+ toggle_straight_border: {
484
+ minHeight: '24px',
485
+ minWidth: '2px',
486
+ borderRadius: '',
487
+ },
488
+ circle: {
489
+ minHeight: '24px',
490
+ minWidth: '24px',
491
+ borderRadius: '100px',
492
+ },
493
+ },
494
+ },
429
495
  toggle_straight_border: {
430
496
  minHeight: '36px',
431
497
  minWidth: '4px',
@@ -504,7 +570,7 @@
504
570
  fontFamily: 'Equinor',
505
571
  fontSize: '2.000rem',
506
572
  fontWeight: 700,
507
- lineHeight: '1.500em',
573
+ lineHeight: '1.250em',
508
574
  textAlign: 'left',
509
575
  },
510
576
  h1: {
@@ -512,7 +578,7 @@
512
578
  fontFamily: 'Equinor',
513
579
  fontSize: '2.000rem',
514
580
  fontWeight: 400,
515
- lineHeight: '1.500em',
581
+ lineHeight: '1.250em',
516
582
  textAlign: 'left',
517
583
  },
518
584
  h2: {
@@ -520,7 +586,7 @@
520
586
  fontFamily: 'Equinor',
521
587
  fontSize: '1.750rem',
522
588
  fontWeight: 400,
523
- lineHeight: '1.429em',
589
+ lineHeight: '1.250em',
524
590
  textAlign: 'left',
525
591
  },
526
592
  h3: {
@@ -528,7 +594,7 @@
528
594
  fontFamily: 'Equinor',
529
595
  fontSize: '1.500rem',
530
596
  fontWeight: 400,
531
- lineHeight: '1.667em',
597
+ lineHeight: '1.250em',
532
598
  textAlign: 'left',
533
599
  },
534
600
  h4: {
@@ -628,6 +694,15 @@
628
694
  textDecoration: 'underline',
629
695
  textAlign: 'left',
630
696
  },
697
+ menu_title_hover: {
698
+ color: 'rgba(61, 61, 61, 1)',
699
+ fontFamily: 'Equinor',
700
+ fontSize: '1.000rem',
701
+ fontWeight: 400,
702
+ letterSpacing: '0.013em',
703
+ lineHeight: '1.000em',
704
+ textAlign: 'left',
705
+ },
631
706
  },
632
707
  input: {
633
708
  label: {
@@ -833,6 +908,54 @@
833
908
  textAlign: 'left',
834
909
  },
835
910
  },
911
+ _modes: {
912
+ compact: {
913
+ table: {
914
+ cell_header: {
915
+ color: 'rgba(0, 0, 0, 1)',
916
+ fontFamily: 'Equinor',
917
+ fontSize: '0.875rem',
918
+ fontWeight: 700,
919
+ lineHeight: '1.143em',
920
+ textAlign: 'left',
921
+ },
922
+ cell_text: {
923
+ color: 'rgba(0, 0, 0, 1)',
924
+ fontFamily: 'Equinor',
925
+ fontSize: '0.875rem',
926
+ fontWeight: 500,
927
+ lineHeight: '1.143em',
928
+ textAlign: 'left',
929
+ },
930
+ cell_text_bold: {
931
+ color: 'rgba(0, 0, 0, 1)',
932
+ fontFamily: 'Equinor',
933
+ fontSize: '0.875rem',
934
+ fontWeight: 700,
935
+ lineHeight: '1.143em',
936
+ textAlign: 'left',
937
+ },
938
+ cell_text_link: {
939
+ color: 'rgba(0, 0, 0, 1)',
940
+ fontFamily: 'Equinor',
941
+ fontSize: '0.875rem',
942
+ fontWeight: 500,
943
+ lineHeight: '1.143em',
944
+ textDecoration: 'underline',
945
+ textAlign: 'left',
946
+ },
947
+ cell_numeric_monospaced: {
948
+ fontFeature: "'tnum' on,'lnum' on",
949
+ color: 'rgba(0, 0, 0, 1)',
950
+ fontFamily: 'Equinor',
951
+ fontSize: '0.875rem',
952
+ fontWeight: 500,
953
+ lineHeight: '1.143em',
954
+ textAlign: 'left',
955
+ },
956
+ },
957
+ },
958
+ },
836
959
  ui: {
837
960
  tooltip: {
838
961
  color: 'rgba(61, 61, 61, 1)',
@@ -891,4 +1014,4 @@
891
1014
 
892
1015
  Object.defineProperty(exports, '__esModule', { value: true });
893
1016
 
894
- })));
1017
+ }));
package/dist/types/base/index.d.ts CHANGED
@@ -402,6 +402,23 @@ export declare const tokens: {
402
402
  above_scrim: string;
403
403
  };
404
404
  interactions: {
405
+ _modes: {
406
+ compact: {
407
+ pressed_dark_overlay: {
408
+ blendMode: string;
409
+ pressedColor: string;
410
+ };
411
+ focused: {
412
+ style: string;
413
+ color: string;
414
+ width: string;
415
+ };
416
+ pressed_light_overlay: {
417
+ blendMode: string;
418
+ pressedColor: string;
419
+ };
420
+ };
421
+ };
405
422
  pressed_dark_overlay: {
406
423
  blendMode: string;
407
424
  pressedColor: string;
@@ -417,6 +434,55 @@ export declare const tokens: {
417
434
  };
418
435
  };
419
436
  shape: {
437
+ _modes: {
438
+ compact: {
439
+ rounded: {
440
+ minHeight: string;
441
+ minWidth: string;
442
+ borderRadius: string;
443
+ };
444
+ button: {
445
+ minHeight: string;
446
+ minWidth: string;
447
+ borderRadius: string;
448
+ };
449
+ toggle: {
450
+ minHeight: string;
451
+ minWidth: string;
452
+ borderRadius: string;
453
+ };
454
+ corners: {
455
+ minHeight: string;
456
+ minWidth: string;
457
+ borderRadius: string;
458
+ };
459
+ icon_button: {
460
+ minHeight: string;
461
+ minWidth: string;
462
+ borderRadius: string;
463
+ };
464
+ straight: {
465
+ minHeight: string;
466
+ minWidth: string;
467
+ borderRadius: string;
468
+ };
469
+ toggle_rounded_border: {
470
+ minHeight: string;
471
+ minWidth: string;
472
+ borderRadius: string;
473
+ };
474
+ toggle_straight_border: {
475
+ minHeight: string;
476
+ minWidth: string;
477
+ borderRadius: string;
478
+ };
479
+ circle: {
480
+ minHeight: string;
481
+ minWidth: string;
482
+ borderRadius: string;
483
+ };
484
+ };
485
+ };
420
486
  toggle_straight_border: {
421
487
  minHeight: string;
422
488
  minWidth: string;
@@ -617,6 +683,15 @@ export declare const tokens: {
617
683
  textDecoration: string;
618
684
  textAlign: string;
619
685
  };
686
+ menu_title_hover: {
687
+ color: string;
688
+ fontFamily: string;
689
+ fontSize: string;
690
+ fontWeight: number;
691
+ letterSpacing: string;
692
+ lineHeight: string;
693
+ textAlign: string;
694
+ };
620
695
  };
621
696
  input: {
622
697
  label: {
@@ -822,6 +897,54 @@ export declare const tokens: {
822
897
  textAlign: string;
823
898
  };
824
899
  };
900
+ _modes: {
901
+ compact: {
902
+ table: {
903
+ cell_header: {
904
+ color: string;
905
+ fontFamily: string;
906
+ fontSize: string;
907
+ fontWeight: number;
908
+ lineHeight: string;
909
+ textAlign: string;
910
+ };
911
+ cell_text: {
912
+ color: string;
913
+ fontFamily: string;
914
+ fontSize: string;
915
+ fontWeight: number;
916
+ lineHeight: string;
917
+ textAlign: string;
918
+ };
919
+ cell_text_bold: {
920
+ color: string;
921
+ fontFamily: string;
922
+ fontSize: string;
923
+ fontWeight: number;
924
+ lineHeight: string;
925
+ textAlign: string;
926
+ };
927
+ cell_text_link: {
928
+ color: string;
929
+ fontFamily: string;
930
+ fontSize: string;
931
+ fontWeight: number;
932
+ lineHeight: string;
933
+ textDecoration: string;
934
+ textAlign: string;
935
+ };
936
+ cell_numeric_monospaced: {
937
+ fontFeature: string;
938
+ color: string;
939
+ fontFamily: string;
940
+ fontSize: string;
941
+ fontWeight: number;
942
+ lineHeight: string;
943
+ textAlign: string;
944
+ };
945
+ };
946
+ };
947
+ };
825
948
  ui: {
826
949
  tooltip: {
827
950
  color: string;
package/dist/types/base/interactions.d.ts CHANGED
@@ -1,4 +1,21 @@
1
1
  export declare const interactions: {
2
+ _modes: {
3
+ compact: {
4
+ pressed_dark_overlay: {
5
+ blendMode: string;
6
+ pressedColor: string;
7
+ };
8
+ focused: {
9
+ style: string;
10
+ color: string;
11
+ width: string;
12
+ };
13
+ pressed_light_overlay: {
14
+ blendMode: string;
15
+ pressedColor: string;
16
+ };
17
+ };
18
+ };
2
19
  pressed_dark_overlay: {
3
20
  blendMode: string;
4
21
  pressedColor: string;
package/dist/types/base/shape.d.ts CHANGED
@@ -1,4 +1,53 @@
1
1
  export declare const shape: {
2
+ _modes: {
3
+ compact: {
4
+ rounded: {
5
+ minHeight: string;
6
+ minWidth: string;
7
+ borderRadius: string;
8
+ };
9
+ button: {
10
+ minHeight: string;
11
+ minWidth: string;
12
+ borderRadius: string;
13
+ };
14
+ toggle: {
15
+ minHeight: string;
16
+ minWidth: string;
17
+ borderRadius: string;
18
+ };
19
+ corners: {
20
+ minHeight: string;
21
+ minWidth: string;
22
+ borderRadius: string;
23
+ };
24
+ icon_button: {
25
+ minHeight: string;
26
+ minWidth: string;
27
+ borderRadius: string;
28
+ };
29
+ straight: {
30
+ minHeight: string;
31
+ minWidth: string;
32
+ borderRadius: string;
33
+ };
34
+ toggle_rounded_border: {
35
+ minHeight: string;
36
+ minWidth: string;
37
+ borderRadius: string;
38
+ };
39
+ toggle_straight_border: {
40
+ minHeight: string;
41
+ minWidth: string;
42
+ borderRadius: string;
43
+ };
44
+ circle: {
45
+ minHeight: string;
46
+ minWidth: string;
47
+ borderRadius: string;
48
+ };
49
+ };
50
+ };
2
51
  toggle_straight_border: {
3
52
  minHeight: string;
4
53
  minWidth: string;
package/dist/types/base/typography.d.ts CHANGED
@@ -129,6 +129,15 @@ export declare const typography: {
129
129
  textDecoration: string;
130
130
  textAlign: string;
131
131
  };
132
+ menu_title_hover: {
133
+ color: string;
134
+ fontFamily: string;
135
+ fontSize: string;
136
+ fontWeight: number;
137
+ letterSpacing: string;
138
+ lineHeight: string;
139
+ textAlign: string;
140
+ };
132
141
  };
133
142
  input: {
134
143
  label: {
@@ -334,6 +343,54 @@ export declare const typography: {
334
343
  textAlign: string;
335
344
  };
336
345
  };
346
+ _modes: {
347
+ compact: {
348
+ table: {
349
+ cell_header: {
350
+ color: string;
351
+ fontFamily: string;
352
+ fontSize: string;
353
+ fontWeight: number;
354
+ lineHeight: string;
355
+ textAlign: string;
356
+ };
357
+ cell_text: {
358
+ color: string;
359
+ fontFamily: string;
360
+ fontSize: string;
361
+ fontWeight: number;
362
+ lineHeight: string;
363
+ textAlign: string;
364
+ };
365
+ cell_text_bold: {
366
+ color: string;
367
+ fontFamily: string;
368
+ fontSize: string;
369
+ fontWeight: number;
370
+ lineHeight: string;
371
+ textAlign: string;
372
+ };
373
+ cell_text_link: {
374
+ color: string;
375
+ fontFamily: string;
376
+ fontSize: string;
377
+ fontWeight: number;
378
+ lineHeight: string;
379
+ textDecoration: string;
380
+ textAlign: string;
381
+ };
382
+ cell_numeric_monospaced: {
383
+ fontFeature: string;
384
+ color: string;
385
+ fontFamily: string;
386
+ fontSize: string;
387
+ fontWeight: number;
388
+ lineHeight: string;
389
+ textAlign: string;
390
+ };
391
+ };
392
+ };
393
+ };
337
394
  ui: {
338
395
  tooltip: {
339
396
  color: string;
package/dist/types/src/types/borders.d.ts CHANGED
@@ -10,6 +10,6 @@ export declare type Bordergroup = {
10
10
  top?: Omit<Border, 'radius | type'>;
11
11
  left?: Omit<Border, 'type'>;
12
12
  right?: Omit<Border, 'type'>;
13
- bottom?: Omit<Border, 'radius'>;
13
+ bottom?: Omit<Border, 'radius | type'>;
14
14
  };
15
15
  export declare type Borders = Border | Bordergroup;
package/dist/types/src/types/clickbound.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  export declare type Clickbound = {
2
2
  height: string;
3
- width: string;
4
- offset: {
5
- top: string;
6
- left: string;
3
+ width?: string;
4
+ offset?: {
5
+ top?: string;
6
+ left?: string;
7
7
  };
8
8
  };
package/dist/types/src/types/component.d.ts CHANGED
@@ -1,24 +1,36 @@
1
- import { Spacing, Borders, Typography, Outline, Clickbound, Pressed } from './index';
1
+ import { Spacing, Borders, Typography, Outline, Clickbound, Pressed, Align } from './index';
2
2
  export declare type ComponentToken = {
3
+ maxHeight?: string;
4
+ minHeight?: string;
3
5
  height?: string;
6
+ maxWidth?: string;
7
+ minWidth?: string;
4
8
  width?: string;
9
+ boxShadow?: string;
5
10
  background?: string;
11
+ align?: Align;
6
12
  spacings?: Spacing;
7
13
  border?: Borders;
8
14
  typography?: Partial<Typography>;
9
15
  clickbound?: Clickbound;
10
16
  states?: {
11
- active?: ComponentState;
12
- disabled?: ComponentState;
13
- focus?: ComponentState & {
17
+ active?: ComponentToken & {
14
18
  outline?: Outline;
15
19
  };
16
- hover?: ComponentState;
17
- pressed?: ComponentState & {
20
+ disabled?: ComponentToken;
21
+ readOnly?: ComponentToken & {
22
+ outline?: Outline;
23
+ };
24
+ focus?: ComponentToken & {
25
+ outline?: Outline;
26
+ };
27
+ hover?: ComponentToken;
28
+ pressed?: ComponentToken & {
18
29
  pressed?: Pressed;
19
30
  };
20
31
  };
21
32
  entities?: Record<string, ComponentToken>;
33
+ modes?: {
34
+ compact?: ComponentToken;
35
+ };
22
36
  };
23
- declare type ComponentState = Partial<Omit<ComponentToken, 'states'>>;
24
- export {};
package/dist/types/src/types/index.d.ts CHANGED
@@ -29,6 +29,10 @@ export declare type Spacing = {
29
29
  top?: string;
30
30
  bottom?: string;
31
31
  };
32
+ export declare type Align = {
33
+ horizontal?: string;
34
+ vertical?: string;
35
+ };
32
36
  export declare type SpacingTokens = {
33
37
  comfortable: {
34
38
  xxx_large: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@equinor/eds-tokens",
3
- "version": "0.5.7",
3
+ "version": "0.7.0-dev.202205096",
4
4
  "description": "Design tokens for the Equinor Design System",
5
5
  "main": "dist/tokens.cjs.js",
6
6
  "module": "dist/tokens.esm.js",
@@ -15,7 +15,7 @@
15
15
  "repository": {
16
16
  "type": "git",
17
17
  "url": "https://github.com/equinor/design-system",
18
- "directory": "libraries/tokens"
18
+ "directory": "packages/eds-tokens"
19
19
  },
20
20
  "bugs": {
21
21
  "url": "https://github.com/equinor/design-system/issues"
@@ -24,10 +24,6 @@
24
24
  "dist/*",
25
25
  "commonjs/*"
26
26
  ],
27
- "scripts": {
28
- "build": "rollup -c",
29
- "dev": "rollup -c -w"
30
- },
31
27
  "keywords": [
32
28
  "eds",
33
29
  "design system",
@@ -36,15 +32,20 @@
36
32
  ],
37
33
  "devDependencies": {
38
34
  "@rollup/plugin-node-resolve": "^10.0.0",
39
- "rollup": "^2.34.0",
35
+ "rollup": "^2.72.0",
40
36
  "rollup-plugin-delete": "^2.0.0",
41
37
  "rollup-plugin-size-snapshot": "^0.12.0",
42
38
  "rollup-plugin-typescript2": "^0.29.0",
43
- "tslib": "^2.0.3",
44
- "typescript": "^4.1.2"
39
+ "tslib": "^2.4.0",
40
+ "typescript": "^4.6.4"
45
41
  },
46
42
  "engines": {
47
43
  "pnpm": ">=4",
48
44
  "node": ">=10.0.0"
45
+ },
46
+ "scripts": {
47
+ "build": "rollup -c",
48
+ "dev": "rollup -c -w",
49
+ "types": "tsc"
49
50
  }
50
- }
51
+ }
package/CHANGELOG.md DELETED
@@ -1,159 +0,0 @@
1
- # Changelog
2
-
3
- All notable changes to this project will be documented in this file.
4
-
5
- The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6
- and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
7
-
8
- ## [0.5.7] - 2021-03-19
9
-
10
- ### Fixed
11
-
12
- - Missing dist folder πŸ™ˆ
13
-
14
- ## [0.5.6] - 2021-03-17
15
-
16
- ### Added ✨
17
-
18
- - Support for both `dashed` and `solid` style in the `Outline` type
19
-
20
- ### Changed πŸ““
21
-
22
- - Preparing the ground for theming ([#1118](https://github.com/equinor/design-system/issues/1118), [#401](https://github.com/equinor/design-system/issues/401), [#882](https://github.com/equinor/design-system/issues/882), [#1136](https://github.com/equinor/design-system/issues/1136), [#1129](https://github.com/equinor/design-system/issues/1129))
23
- - Added CSS variables for the rgba value in tokens as a first and simple step for theming support
24
-
25
- ## [0.5.5] - 2021-02-22
26
-
27
- ### Added
28
-
29
- - New background token: `background__semitransparent ` [#1100](https://github.com/equinor/design-system/issues/1100))
30
-
31
- ## [0.5.4] - 2020-12-11
32
-
33
- ### Fixed
34
-
35
- - Removed postinstall script
36
-
37
- ## [0.5.3] - 2020-12-09
38
-
39
- ### Removed
40
-
41
- - Removed component tokens in favour of the base tokens approach
42
- - `Table` ([#830](https://github.com/equinor/design-system/issues/830))
43
- - `Button` ([#831](https://github.com/equinor/design-system/issues/831))
44
- - Danger
45
- - Disabled
46
- - Primary
47
- - Secondary
48
-
49
- ## [0.5.2] - 2020-11-26
50
-
51
- ### Changed πŸ““
52
-
53
- - Updated README.md
54
-
55
- ## [0.5.1] - 2020-11-26
56
-
57
- ### Added
58
-
59
- - Types, as part of the ([Typescript Milestone](https://github.com/equinor/design-system/milestone/7?closed=1))
60
-
61
- ### Changed
62
-
63
- - Updated line height for Cell Text (`Table`) tokens and text color for `Snackbar` [#824](https://github.com/equinor/design-system/issues/824)
64
- - Changed module types for better support with `commonjs` and `esm`. Using the `<some-eds-npm-package>/commonjs` path on packages should no longer be needed and will be deprecated in the future ([#887](https://github.com/equinor/design-system/issues/887))
65
-
66
- ## [0.4.0] - 2020-09-02
67
-
68
- ### Added
69
-
70
- #### Color
71
-
72
- - Added missing overlay color `pressed_overlay_light`
73
-
74
- ### Removed
75
-
76
- - Removed unused colors in EDS
77
- - `field__fill_resting`
78
- - `field__fill_hover`
79
- - `field__fill_activated`
80
-
81
- ### Changed
82
-
83
- #### Color
84
-
85
- - Changed `link_in_snackbars` for better contrast.
86
-
87
- ## [0.3.0] - 2020-07-15
88
-
89
- ### Changed
90
-
91
- - Font-weight is increased from 400 (regular) to 500 (medium) in all cases where the font-size is below 16px
92
- - Font-size is increased and line-height decreased for label and helper
93
- - Values such as underline, uppercase etc. are now lowercase
94
-
95
- ### Removed
96
-
97
- - tabs.inactive-text is not in use in EDS Core React and has been removed
98
-
99
- ## [0.2.1] - 2020-07-08
100
-
101
- ### Changed
102
-
103
- - Updated tokens to include text-align even if the value is β€œleft”
104
-
105
- ## [0.2.0] - 2020-04-30
106
-
107
- ### Changed
108
-
109
- - Updated tokens with latest values from Figma, see the [EDS Figma changelog](https://eds.equinor.com/updates/release-information/changelog/) for more details
110
-
111
- ## [0.1.0] - 2020-02-24
112
-
113
- ### Changed
114
-
115
- - Updated README to me abit more clearer
116
- - Adjustments to to `package.json` to be more in line with our other packages
117
- - New versioning of packages
118
-
119
- ## [0.0.1-alpha.7] - 2020-01-22
120
-
121
- ### Changed
122
-
123
- - Better support for using as commonjs or esm modules in different node versions
124
-
125
- ## [0.0.1-alpha.6] - 2020-01-20
126
-
127
- ### Added
128
-
129
- - Compiled bundle for esm, cjs and umd modules
130
-
131
- ## [0.0.1-alpha.5] - 2019-12-13
132
-
133
- ### Changed
134
-
135
- - Base tokens are now exported as esm instead of json
136
-
137
- ## [0.0.1-alpha.4] - 2019-08-04
138
-
139
- ### Changed
140
-
141
- - Update readme with available tokens
142
- - New model on `base` tokens
143
-
144
- ### Added
145
-
146
- - `table` tokens
147
-
148
- ## [0.0.1-alpha.3] - 2019-07-23
149
-
150
- ### Changed
151
-
152
- - Update missing fields in package.json
153
-
154
- ## [0.0.1-alpha.2] - 2019-07-23
155
-
156
- ### Changed
157
-
158
- - Update license
159
- - Add CHANGELOG