@atlaskit/tokens 0.9.5 → 0.10.2

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 (33) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/css/atlassian-light.css +2 -2
  3. package/dist/cjs/artifacts/palettes-raw.js +73 -73
  4. package/dist/cjs/constants.js +5 -3
  5. package/dist/cjs/get-token.js +1 -1
  6. package/dist/cjs/index.js +15 -1
  7. package/dist/cjs/set-global-theme.js +4 -3
  8. package/dist/cjs/theme-change-observer.js +105 -0
  9. package/dist/cjs/tokens/palette.js +36 -36
  10. package/dist/cjs/version.json +1 -1
  11. package/dist/es2019/artifacts/palettes-raw.js +73 -73
  12. package/dist/es2019/constants.js +2 -1
  13. package/dist/es2019/get-token.js +1 -1
  14. package/dist/es2019/index.js +2 -1
  15. package/dist/es2019/set-global-theme.js +4 -3
  16. package/dist/es2019/theme-change-observer.js +67 -0
  17. package/dist/es2019/tokens/palette.js +36 -36
  18. package/dist/es2019/version.json +1 -1
  19. package/dist/esm/artifacts/palettes-raw.js +73 -73
  20. package/dist/esm/constants.js +2 -1
  21. package/dist/esm/get-token.js +1 -1
  22. package/dist/esm/index.js +2 -1
  23. package/dist/esm/set-global-theme.js +4 -3
  24. package/dist/esm/theme-change-observer.js +89 -0
  25. package/dist/esm/tokens/palette.js +36 -36
  26. package/dist/esm/version.json +1 -1
  27. package/dist/types/artifacts/palettes-raw.d.ts +1 -1
  28. package/dist/types/constants.d.ts +3 -2
  29. package/dist/types/index.d.ts +2 -0
  30. package/dist/types/set-global-theme.d.ts +2 -1
  31. package/dist/types/theme-change-observer.d.ts +35 -0
  32. package/dist/types/types.d.ts +3 -1
  33. package/package.json +7 -1
package/dist/cjs/get-token.js CHANGED
@@ -12,7 +12,7 @@ var _warnOnce = _interopRequireDefault(require("@atlaskit/ds-lib/warn-once"));
12
12
  var _tokenNames = _interopRequireDefault(require("./artifacts/token-names"));
13
13
 
14
14
  var name = "@atlaskit/tokens";
15
- var version = "0.9.5";
15
+ var version = "0.10.2";
16
16
 
17
17
  function token(path, fallback) {
18
18
  var token = _tokenNames.default[path];
package/dist/cjs/index.js CHANGED
@@ -5,6 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
+ Object.defineProperty(exports, "ThemeMutationObserver", {
9
+ enumerable: true,
10
+ get: function get() {
11
+ return _themeChangeObserver.ThemeMutationObserver;
12
+ }
13
+ });
8
14
  Object.defineProperty(exports, "setGlobalTheme", {
9
15
  enumerable: true,
10
16
  get: function get() {
@@ -17,7 +23,15 @@ Object.defineProperty(exports, "token", {
17
23
  return _getToken.default;
18
24
  }
19
25
  });
26
+ Object.defineProperty(exports, "useThemeObserver", {
27
+ enumerable: true,
28
+ get: function get() {
29
+ return _themeChangeObserver.useThemeObserver;
30
+ }
31
+ });
20
32
 
21
33
  var _getToken = _interopRequireDefault(require("./get-token"));
22
34
 
23
- var _setGlobalTheme = _interopRequireDefault(require("./set-global-theme"));
35
+ var _setGlobalTheme = _interopRequireDefault(require("./set-global-theme"));
36
+
37
+ var _themeChangeObserver = require("./theme-change-observer");
package/dist/cjs/set-global-theme.js CHANGED
@@ -5,11 +5,12 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.default = void 0;
7
7
 
8
+ var _constants = require("./constants");
9
+
8
10
  var setGlobalTheme = function setGlobalTheme(theme) {
9
11
  if (process.env.NODE_ENV !== 'production') {
10
- // check some pre-condition and throw if incorrect?
11
- if (theme !== 'dark' && theme !== 'light') {
12
- throw new Error("setGlobalTheme only accepts 'light' or 'dark' themes");
12
+ if (!_constants.THEMES.includes(theme)) {
13
+ throw new Error("setGlobalTheme only accepts themes: ".concat(_constants.THEMES.join(', ')));
13
14
  }
14
15
  }
15
16
 
package/dist/cjs/theme-change-observer.js ADDED
@@ -0,0 +1,105 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.useThemeObserver = exports.ThemeMutationObserver = void 0;
9
+
10
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
+
12
+ var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
13
+
14
+ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
15
+
16
+ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
17
+
18
+ var _react = require("react");
19
+
20
+ var _constants = require("./constants");
21
+
22
+ var getGlobalTheme = function getGlobalTheme() {
23
+ return typeof document !== 'undefined' ? document.documentElement.getAttribute(_constants.THEME_DATA_ATTRIBUTE) : null;
24
+ };
25
+ /**
26
+ * A MutationObserver which watches the `<html>` element for changes to the theme.
27
+ *
28
+ * In React, use the {@link useThemeObserver `useThemeObserver`} hook instead.
29
+ *
30
+ * @param {function} callback - A callback function which fires when the theme changes.
31
+ *
32
+ * @example
33
+ * ```
34
+ * const observer = new ThemeMutationObserver((theme) => {});
35
+ * observer.observe();
36
+ * ```
37
+ */
38
+
39
+
40
+ var ThemeMutationObserver = /*#__PURE__*/function () {
41
+ function ThemeMutationObserver(callback) {
42
+ (0, _classCallCheck2.default)(this, ThemeMutationObserver);
43
+ (0, _defineProperty2.default)(this, "observer", null);
44
+ this.callback = callback;
45
+ }
46
+
47
+ (0, _createClass2.default)(ThemeMutationObserver, [{
48
+ key: "observe",
49
+ value: function observe() {
50
+ var _this = this;
51
+
52
+ if (!this.observer) {
53
+ this.observer = new MutationObserver(function () {
54
+ _this.callback(getGlobalTheme());
55
+ });
56
+ }
57
+
58
+ this.observer.observe(document.documentElement, {
59
+ attributeFilter: [_constants.THEME_DATA_ATTRIBUTE]
60
+ });
61
+ }
62
+ }, {
63
+ key: "disconnect",
64
+ value: function disconnect() {
65
+ this.observer && this.observer.disconnect();
66
+ }
67
+ }]);
68
+ return ThemeMutationObserver;
69
+ }();
70
+ /**
71
+ * A React hook which returns the current theme set on `<html>`, or `null` if not set.
72
+ *
73
+ * @example
74
+ * ```
75
+ * const theme = useThemeObserver(); // Returns 'light' or 'dark'
76
+ *
77
+ * // Performing side effects when it changes
78
+ * useEffect(() => {
79
+ * console.log(`The theme has changed to ${theme}`);
80
+ * }, [theme]);
81
+ * ```
82
+ */
83
+
84
+
85
+ exports.ThemeMutationObserver = ThemeMutationObserver;
86
+
87
+ var useThemeObserver = function useThemeObserver() {
88
+ var _useState = (0, _react.useState)(getGlobalTheme()),
89
+ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
90
+ theme = _useState2[0],
91
+ setTheme = _useState2[1];
92
+
93
+ (0, _react.useEffect)(function () {
94
+ var observer = new ThemeMutationObserver(function (theme) {
95
+ return setTheme(theme);
96
+ });
97
+ observer.observe();
98
+ return function () {
99
+ return observer.disconnect();
100
+ };
101
+ }, []);
102
+ return theme;
103
+ };
104
+
105
+ exports.useThemeObserver = useThemeObserver;
package/dist/cjs/tokens/palette.js CHANGED
@@ -571,7 +571,7 @@ var palette = {
571
571
  value: '#101214',
572
572
  attributes: {
573
573
  group: 'palette',
574
- category: 'dark neutral'
574
+ category: 'dark mode neutral'
575
575
  }
576
576
  },
577
577
  'DN-100A': {
@@ -579,21 +579,21 @@ var palette = {
579
579
  value: '#03040442',
580
580
  attributes: {
581
581
  group: 'palette',
582
- category: 'dark neutral'
582
+ category: 'dark mode neutral'
583
583
  }
584
584
  },
585
585
  DN0: {
586
586
  value: '#161A1D',
587
587
  attributes: {
588
588
  group: 'palette',
589
- category: 'dark neutral'
589
+ category: 'dark mode neutral'
590
590
  }
591
591
  },
592
592
  DN100: {
593
593
  value: '#1D2125',
594
594
  attributes: {
595
595
  group: 'palette',
596
- category: 'dark neutral'
596
+ category: 'dark mode neutral'
597
597
  }
598
598
  },
599
599
  DN100A: {
@@ -601,14 +601,14 @@ var palette = {
601
601
  value: '#BCD6F00A',
602
602
  attributes: {
603
603
  group: 'palette',
604
- category: 'dark neutral'
604
+ category: 'dark mode neutral'
605
605
  }
606
606
  },
607
607
  DN200: {
608
608
  value: '#22272B',
609
609
  attributes: {
610
610
  group: 'palette',
611
- category: 'dark neutral'
611
+ category: 'dark mode neutral'
612
612
  }
613
613
  },
614
614
  DN200A: {
@@ -616,14 +616,14 @@ var palette = {
616
616
  value: '#A1BDD914',
617
617
  attributes: {
618
618
  group: 'palette',
619
- category: 'dark neutral'
619
+ category: 'dark mode neutral'
620
620
  }
621
621
  },
622
622
  DN300: {
623
623
  value: '#2C333A',
624
624
  attributes: {
625
625
  group: 'palette',
626
- category: 'dark neutral'
626
+ category: 'dark mode neutral'
627
627
  }
628
628
  },
629
629
  DN300A: {
@@ -631,14 +631,14 @@ var palette = {
631
631
  value: '#A6C5E229',
632
632
  attributes: {
633
633
  group: 'palette',
634
- category: 'dark neutral'
634
+ category: 'dark mode neutral'
635
635
  }
636
636
  },
637
637
  DN400: {
638
638
  value: '#454F59',
639
639
  attributes: {
640
640
  group: 'palette',
641
- category: 'dark neutral'
641
+ category: 'dark mode neutral'
642
642
  }
643
643
  },
644
644
  DN400A: {
@@ -646,14 +646,14 @@ var palette = {
646
646
  value: '#BFDBF847',
647
647
  attributes: {
648
648
  group: 'palette',
649
- category: 'dark neutral'
649
+ category: 'dark mode neutral'
650
650
  }
651
651
  },
652
652
  DN500: {
653
653
  value: '#5C6C7A',
654
654
  attributes: {
655
655
  group: 'palette',
656
- category: 'dark neutral'
656
+ category: 'dark mode neutral'
657
657
  }
658
658
  },
659
659
  DN500A: {
@@ -661,63 +661,63 @@ var palette = {
661
661
  value: '#A9C5DF7A',
662
662
  attributes: {
663
663
  group: 'palette',
664
- category: 'dark neutral'
664
+ category: 'dark mode neutral'
665
665
  }
666
666
  },
667
667
  DN600: {
668
668
  value: '#738496',
669
669
  attributes: {
670
670
  group: 'palette',
671
- category: 'dark neutral'
671
+ category: 'dark mode neutral'
672
672
  }
673
673
  },
674
674
  DN700: {
675
675
  value: '#8696A7',
676
676
  attributes: {
677
677
  group: 'palette',
678
- category: 'dark neutral'
678
+ category: 'dark mode neutral'
679
679
  }
680
680
  },
681
681
  DN800: {
682
682
  value: '#9FADBC',
683
683
  attributes: {
684
684
  group: 'palette',
685
- category: 'dark neutral'
685
+ category: 'dark mode neutral'
686
686
  }
687
687
  },
688
688
  DN900: {
689
689
  value: '#B6C2CF',
690
690
  attributes: {
691
691
  group: 'palette',
692
- category: 'dark neutral'
692
+ category: 'dark mode neutral'
693
693
  }
694
694
  },
695
695
  DN1000: {
696
696
  value: '#C7D1DB',
697
697
  attributes: {
698
698
  group: 'palette',
699
- category: 'dark neutral'
699
+ category: 'dark mode neutral'
700
700
  }
701
701
  },
702
702
  DN1100: {
703
703
  value: '#DEE4EA',
704
704
  attributes: {
705
705
  group: 'palette',
706
- category: 'dark neutral'
706
+ category: 'dark mode neutral'
707
707
  }
708
708
  },
709
709
  N0: {
710
710
  value: '#FFFFFF',
711
711
  attributes: {
712
712
  group: 'palette',
713
- category: 'light neutral'
713
+ category: 'light mode neutral'
714
714
  }
715
715
  },
716
716
  N100: {
717
717
  value: '#F7F8F9',
718
718
  attributes: {
719
719
  group: 'palette',
720
- category: 'light neutral'
720
+ category: 'light mode neutral'
721
721
  }
722
722
  },
723
723
  N100A: {
@@ -725,14 +725,14 @@ var palette = {
725
725
  value: '#091E4208',
726
726
  attributes: {
727
727
  group: 'palette',
728
- category: 'light neutral'
728
+ category: 'light mode neutral'
729
729
  }
730
730
  },
731
731
  N200: {
732
732
  value: '#F1F2F4',
733
733
  attributes: {
734
734
  group: 'palette',
735
- category: 'light neutral'
735
+ category: 'light mode neutral'
736
736
  }
737
737
  },
738
738
  N200A: {
@@ -740,14 +740,14 @@ var palette = {
740
740
  value: '#091E420F',
741
741
  attributes: {
742
742
  group: 'palette',
743
- category: 'light neutral'
743
+ category: 'light mode neutral'
744
744
  }
745
745
  },
746
746
  N300: {
747
747
  value: '#DCDFE4',
748
748
  attributes: {
749
749
  group: 'palette',
750
- category: 'light neutral'
750
+ category: 'light mode neutral'
751
751
  }
752
752
  },
753
753
  N300A: {
@@ -755,14 +755,14 @@ var palette = {
755
755
  value: '#091E4224',
756
756
  attributes: {
757
757
  group: 'palette',
758
- category: 'light neutral'
758
+ category: 'light mode neutral'
759
759
  }
760
760
  },
761
761
  N400: {
762
762
  value: '#B3B9C4',
763
763
  attributes: {
764
764
  group: 'palette',
765
- category: 'light neutral'
765
+ category: 'light mode neutral'
766
766
  }
767
767
  },
768
768
  N400A: {
@@ -770,14 +770,14 @@ var palette = {
770
770
  value: '#091E424F',
771
771
  attributes: {
772
772
  group: 'palette',
773
- category: 'light neutral'
773
+ category: 'light mode neutral'
774
774
  }
775
775
  },
776
776
  N500: {
777
777
  value: '#8993A5',
778
778
  attributes: {
779
779
  group: 'palette',
780
- category: 'light neutral'
780
+ category: 'light mode neutral'
781
781
  }
782
782
  },
783
783
  N500A: {
@@ -785,49 +785,49 @@ var palette = {
785
785
  value: '#091E427A',
786
786
  attributes: {
787
787
  group: 'palette',
788
- category: 'light neutral'
788
+ category: 'light mode neutral'
789
789
  }
790
790
  },
791
791
  N600: {
792
792
  value: '#758195',
793
793
  attributes: {
794
794
  group: 'palette',
795
- category: 'light neutral'
795
+ category: 'light mode neutral'
796
796
  }
797
797
  },
798
798
  N700: {
799
799
  value: '#626F86',
800
800
  attributes: {
801
801
  group: 'palette',
802
- category: 'light neutral'
802
+ category: 'light mode neutral'
803
803
  }
804
804
  },
805
805
  N800: {
806
806
  value: '#44546F',
807
807
  attributes: {
808
808
  group: 'palette',
809
- category: 'light neutral'
809
+ category: 'light mode neutral'
810
810
  }
811
811
  },
812
812
  N900: {
813
813
  value: '#2C3E5D',
814
814
  attributes: {
815
815
  group: 'palette',
816
- category: 'light neutral'
816
+ category: 'light mode neutral'
817
817
  }
818
818
  },
819
819
  N1000: {
820
820
  value: '#172B4D',
821
821
  attributes: {
822
822
  group: 'palette',
823
- category: 'light neutral'
823
+ category: 'light mode neutral'
824
824
  }
825
825
  },
826
826
  N1100: {
827
827
  value: '#091E42',
828
828
  attributes: {
829
829
  group: 'palette',
830
- category: 'light neutral'
830
+ category: 'light mode neutral'
831
831
  }
832
832
  }
833
833
  }
package/dist/cjs/version.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/tokens",
3
- "version": "0.9.5",
3
+ "version": "0.10.2",
4
4
  "sideEffects": [
5
5
  "**/*.css"
6
6
  ]