@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/es2019/theme-change-observer.js ADDED
@@ -0,0 +1,67 @@
1
+ import _defineProperty from "@babel/runtime/helpers/defineProperty";
2
+ import { useEffect, useState } from 'react';
3
+ import { THEME_DATA_ATTRIBUTE } from './constants';
4
+
5
+ const getGlobalTheme = () => typeof document !== 'undefined' ? document.documentElement.getAttribute(THEME_DATA_ATTRIBUTE) : null;
6
+ /**
7
+ * A MutationObserver which watches the `<html>` element for changes to the theme.
8
+ *
9
+ * In React, use the {@link useThemeObserver `useThemeObserver`} hook instead.
10
+ *
11
+ * @param {function} callback - A callback function which fires when the theme changes.
12
+ *
13
+ * @example
14
+ * ```
15
+ * const observer = new ThemeMutationObserver((theme) => {});
16
+ * observer.observe();
17
+ * ```
18
+ */
19
+
20
+
21
+ export class ThemeMutationObserver {
22
+ constructor(callback) {
23
+ _defineProperty(this, "observer", null);
24
+
25
+ this.callback = callback;
26
+ }
27
+
28
+ observe() {
29
+ if (!this.observer) {
30
+ this.observer = new MutationObserver(() => {
31
+ this.callback(getGlobalTheme());
32
+ });
33
+ }
34
+
35
+ this.observer.observe(document.documentElement, {
36
+ attributeFilter: [THEME_DATA_ATTRIBUTE]
37
+ });
38
+ }
39
+
40
+ disconnect() {
41
+ this.observer && this.observer.disconnect();
42
+ }
43
+
44
+ }
45
+ /**
46
+ * A React hook which returns the current theme set on `<html>`, or `null` if not set.
47
+ *
48
+ * @example
49
+ * ```
50
+ * const theme = useThemeObserver(); // Returns 'light' or 'dark'
51
+ *
52
+ * // Performing side effects when it changes
53
+ * useEffect(() => {
54
+ * console.log(`The theme has changed to ${theme}`);
55
+ * }, [theme]);
56
+ * ```
57
+ */
58
+
59
+ export const useThemeObserver = () => {
60
+ const [theme, setTheme] = useState(getGlobalTheme());
61
+ useEffect(() => {
62
+ const observer = new ThemeMutationObserver(theme => setTheme(theme));
63
+ observer.observe();
64
+ return () => observer.disconnect();
65
+ }, []);
66
+ return theme;
67
+ };
package/dist/es2019/tokens/palette.js CHANGED
@@ -565,7 +565,7 @@ const palette = {
565
565
  value: '#101214',
566
566
  attributes: {
567
567
  group: 'palette',
568
- category: 'dark neutral'
568
+ category: 'dark mode neutral'
569
569
  }
570
570
  },
571
571
  'DN-100A': {
@@ -573,21 +573,21 @@ const palette = {
573
573
  value: '#03040442',
574
574
  attributes: {
575
575
  group: 'palette',
576
- category: 'dark neutral'
576
+ category: 'dark mode neutral'
577
577
  }
578
578
  },
579
579
  DN0: {
580
580
  value: '#161A1D',
581
581
  attributes: {
582
582
  group: 'palette',
583
- category: 'dark neutral'
583
+ category: 'dark mode neutral'
584
584
  }
585
585
  },
586
586
  DN100: {
587
587
  value: '#1D2125',
588
588
  attributes: {
589
589
  group: 'palette',
590
- category: 'dark neutral'
590
+ category: 'dark mode neutral'
591
591
  }
592
592
  },
593
593
  DN100A: {
@@ -595,14 +595,14 @@ const palette = {
595
595
  value: '#BCD6F00A',
596
596
  attributes: {
597
597
  group: 'palette',
598
- category: 'dark neutral'
598
+ category: 'dark mode neutral'
599
599
  }
600
600
  },
601
601
  DN200: {
602
602
  value: '#22272B',
603
603
  attributes: {
604
604
  group: 'palette',
605
- category: 'dark neutral'
605
+ category: 'dark mode neutral'
606
606
  }
607
607
  },
608
608
  DN200A: {
@@ -610,14 +610,14 @@ const palette = {
610
610
  value: '#A1BDD914',
611
611
  attributes: {
612
612
  group: 'palette',
613
- category: 'dark neutral'
613
+ category: 'dark mode neutral'
614
614
  }
615
615
  },
616
616
  DN300: {
617
617
  value: '#2C333A',
618
618
  attributes: {
619
619
  group: 'palette',
620
- category: 'dark neutral'
620
+ category: 'dark mode neutral'
621
621
  }
622
622
  },
623
623
  DN300A: {
@@ -625,14 +625,14 @@ const palette = {
625
625
  value: '#A6C5E229',
626
626
  attributes: {
627
627
  group: 'palette',
628
- category: 'dark neutral'
628
+ category: 'dark mode neutral'
629
629
  }
630
630
  },
631
631
  DN400: {
632
632
  value: '#454F59',
633
633
  attributes: {
634
634
  group: 'palette',
635
- category: 'dark neutral'
635
+ category: 'dark mode neutral'
636
636
  }
637
637
  },
638
638
  DN400A: {
@@ -640,14 +640,14 @@ const palette = {
640
640
  value: '#BFDBF847',
641
641
  attributes: {
642
642
  group: 'palette',
643
- category: 'dark neutral'
643
+ category: 'dark mode neutral'
644
644
  }
645
645
  },
646
646
  DN500: {
647
647
  value: '#5C6C7A',
648
648
  attributes: {
649
649
  group: 'palette',
650
- category: 'dark neutral'
650
+ category: 'dark mode neutral'
651
651
  }
652
652
  },
653
653
  DN500A: {
@@ -655,63 +655,63 @@ const palette = {
655
655
  value: '#A9C5DF7A',
656
656
  attributes: {
657
657
  group: 'palette',
658
- category: 'dark neutral'
658
+ category: 'dark mode neutral'
659
659
  }
660
660
  },
661
661
  DN600: {
662
662
  value: '#738496',
663
663
  attributes: {
664
664
  group: 'palette',
665
- category: 'dark neutral'
665
+ category: 'dark mode neutral'
666
666
  }
667
667
  },
668
668
  DN700: {
669
669
  value: '#8696A7',
670
670
  attributes: {
671
671
  group: 'palette',
672
- category: 'dark neutral'
672
+ category: 'dark mode neutral'
673
673
  }
674
674
  },
675
675
  DN800: {
676
676
  value: '#9FADBC',
677
677
  attributes: {
678
678
  group: 'palette',
679
- category: 'dark neutral'
679
+ category: 'dark mode neutral'
680
680
  }
681
681
  },
682
682
  DN900: {
683
683
  value: '#B6C2CF',
684
684
  attributes: {
685
685
  group: 'palette',
686
- category: 'dark neutral'
686
+ category: 'dark mode neutral'
687
687
  }
688
688
  },
689
689
  DN1000: {
690
690
  value: '#C7D1DB',
691
691
  attributes: {
692
692
  group: 'palette',
693
- category: 'dark neutral'
693
+ category: 'dark mode neutral'
694
694
  }
695
695
  },
696
696
  DN1100: {
697
697
  value: '#DEE4EA',
698
698
  attributes: {
699
699
  group: 'palette',
700
- category: 'dark neutral'
700
+ category: 'dark mode neutral'
701
701
  }
702
702
  },
703
703
  N0: {
704
704
  value: '#FFFFFF',
705
705
  attributes: {
706
706
  group: 'palette',
707
- category: 'light neutral'
707
+ category: 'light mode neutral'
708
708
  }
709
709
  },
710
710
  N100: {
711
711
  value: '#F7F8F9',
712
712
  attributes: {
713
713
  group: 'palette',
714
- category: 'light neutral'
714
+ category: 'light mode neutral'
715
715
  }
716
716
  },
717
717
  N100A: {
@@ -719,14 +719,14 @@ const palette = {
719
719
  value: '#091E4208',
720
720
  attributes: {
721
721
  group: 'palette',
722
- category: 'light neutral'
722
+ category: 'light mode neutral'
723
723
  }
724
724
  },
725
725
  N200: {
726
726
  value: '#F1F2F4',
727
727
  attributes: {
728
728
  group: 'palette',
729
- category: 'light neutral'
729
+ category: 'light mode neutral'
730
730
  }
731
731
  },
732
732
  N200A: {
@@ -734,14 +734,14 @@ const palette = {
734
734
  value: '#091E420F',
735
735
  attributes: {
736
736
  group: 'palette',
737
- category: 'light neutral'
737
+ category: 'light mode neutral'
738
738
  }
739
739
  },
740
740
  N300: {
741
741
  value: '#DCDFE4',
742
742
  attributes: {
743
743
  group: 'palette',
744
- category: 'light neutral'
744
+ category: 'light mode neutral'
745
745
  }
746
746
  },
747
747
  N300A: {
@@ -749,14 +749,14 @@ const palette = {
749
749
  value: '#091E4224',
750
750
  attributes: {
751
751
  group: 'palette',
752
- category: 'light neutral'
752
+ category: 'light mode neutral'
753
753
  }
754
754
  },
755
755
  N400: {
756
756
  value: '#B3B9C4',
757
757
  attributes: {
758
758
  group: 'palette',
759
- category: 'light neutral'
759
+ category: 'light mode neutral'
760
760
  }
761
761
  },
762
762
  N400A: {
@@ -764,14 +764,14 @@ const palette = {
764
764
  value: '#091E424F',
765
765
  attributes: {
766
766
  group: 'palette',
767
- category: 'light neutral'
767
+ category: 'light mode neutral'
768
768
  }
769
769
  },
770
770
  N500: {
771
771
  value: '#8993A5',
772
772
  attributes: {
773
773
  group: 'palette',
774
- category: 'light neutral'
774
+ category: 'light mode neutral'
775
775
  }
776
776
  },
777
777
  N500A: {
@@ -779,49 +779,49 @@ const palette = {
779
779
  value: '#091E427A',
780
780
  attributes: {
781
781
  group: 'palette',
782
- category: 'light neutral'
782
+ category: 'light mode neutral'
783
783
  }
784
784
  },
785
785
  N600: {
786
786
  value: '#758195',
787
787
  attributes: {
788
788
  group: 'palette',
789
- category: 'light neutral'
789
+ category: 'light mode neutral'
790
790
  }
791
791
  },
792
792
  N700: {
793
793
  value: '#626F86',
794
794
  attributes: {
795
795
  group: 'palette',
796
- category: 'light neutral'
796
+ category: 'light mode neutral'
797
797
  }
798
798
  },
799
799
  N800: {
800
800
  value: '#44546F',
801
801
  attributes: {
802
802
  group: 'palette',
803
- category: 'light neutral'
803
+ category: 'light mode neutral'
804
804
  }
805
805
  },
806
806
  N900: {
807
807
  value: '#2C3E5D',
808
808
  attributes: {
809
809
  group: 'palette',
810
- category: 'light neutral'
810
+ category: 'light mode neutral'
811
811
  }
812
812
  },
813
813
  N1000: {
814
814
  value: '#172B4D',
815
815
  attributes: {
816
816
  group: 'palette',
817
- category: 'light neutral'
817
+ category: 'light mode neutral'
818
818
  }
819
819
  },
820
820
  N1100: {
821
821
  value: '#091E42',
822
822
  attributes: {
823
823
  group: 'palette',
824
- category: 'light neutral'
824
+ category: 'light mode neutral'
825
825
  }
826
826
  }
827
827
  }
package/dist/es2019/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
  ]