@synergy-design-system/tokens 1.0.0-main.6 → 1.0.0-main.7
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.
- package/CHANGELOG.md +7 -0
- package/dist/js/index.js +1 -1
- package/dist/scss/_tokens.scss +1 -1
- package/dist/themes/dark.css +2 -2
- package/dist/themes/light.css +2 -2
- package/package.json +1 -1
- package/src/figma-tokens/$themes.json +2 -2
- package/src/figma-tokens/_docs.json +202 -178
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
# [@synergy-design-system/tokens-v1.0.0-main.7](https://github.com/SickDesignSystem/synergy/compare/tokens/1.0.0-main.6...tokens/1.0.0-main.7) (2023-11-16)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* ✨ add syn-button ([#118](https://github.com/SickDesignSystem/synergy/issues/118)) ([ca9385b](https://github.com/SickDesignSystem/synergy/commit/ca9385beef3f868679d51088d3fa372423277223))
|
|
7
|
+
|
|
1
8
|
# [@synergy-design-system/tokens-v1.0.0-main.6](https://github.com/SickDesignSystem/synergy/compare/tokens/1.0.0-main.5...tokens/1.0.0-main.6) (2023-11-07)
|
|
2
9
|
|
|
3
10
|
|
package/dist/js/index.js
CHANGED
package/dist/scss/_tokens.scss
CHANGED
package/dist/themes/dark.css
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 1.0.0-main.
|
|
2
|
+
* @synergy-design-system/tokens version 1.0.0-main.6
|
|
3
3
|
* SICK Global UX Foundation
|
|
4
4
|
* Do not edit directly
|
|
5
|
-
* Generated on
|
|
5
|
+
* Generated on Thu, 16 Nov 2023 08:19:30 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
:root {
|
package/dist/themes/light.css
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* @synergy-design-system/tokens version 1.0.0-main.
|
|
2
|
+
* @synergy-design-system/tokens version 1.0.0-main.6
|
|
3
3
|
* SICK Global UX Foundation
|
|
4
4
|
* Do not edit directly
|
|
5
|
-
* Generated on
|
|
5
|
+
* Generated on Thu, 16 Nov 2023 08:19:30 GMT
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
:root {
|
package/package.json
CHANGED
|
@@ -316,8 +316,8 @@
|
|
|
316
316
|
"semantic/focus-ring": "enabled",
|
|
317
317
|
"color/primitives": "source",
|
|
318
318
|
"semantic/input": "enabled",
|
|
319
|
-
"semantic/button": "
|
|
320
|
-
"semantic/toggles": "
|
|
319
|
+
"semantic/button": "enabled",
|
|
320
|
+
"semantic/toggles": "enabled"
|
|
321
321
|
},
|
|
322
322
|
"$figmaCollectionId": "VariableCollectionId:790:67393",
|
|
323
323
|
"$figmaModeId": "790:0",
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
"type": "text"
|
|
88
88
|
},
|
|
89
89
|
"description": {
|
|
90
|
-
"value": "Use the variant attribute to set the button’s variant. Variants can be
|
|
90
|
+
"value": "Use the variant attribute to set the button’s variant. Variants can be Filled, Outline and Text Buttons. Use the outline attribute to draw outlined buttons with transparent backgrounds. Use the text variant to create text buttons that share the same size as regular buttons but don’t have backgrounds or borders.",
|
|
91
91
|
"type": "text"
|
|
92
92
|
}
|
|
93
93
|
},
|
|
@@ -116,7 +116,7 @@
|
|
|
116
116
|
"value": "Setting a Custom Width",
|
|
117
117
|
"type": "text"
|
|
118
118
|
},
|
|
119
|
-
"
|
|
119
|
+
"description": {
|
|
120
120
|
"value": "As expected, buttons can be given a custom width by setting the width attribute. This is useful for making buttons span the full width of their container on smaller screens.",
|
|
121
121
|
"type": "text"
|
|
122
122
|
}
|
|
@@ -413,13 +413,13 @@
|
|
|
413
413
|
"type": "text"
|
|
414
414
|
}
|
|
415
415
|
},
|
|
416
|
-
"
|
|
416
|
+
"readonly": {
|
|
417
417
|
"title": {
|
|
418
|
-
"value": "
|
|
418
|
+
"value": "Read-only Inputs",
|
|
419
419
|
"type": "text"
|
|
420
420
|
},
|
|
421
421
|
"description": {
|
|
422
|
-
"value": "Add the
|
|
422
|
+
"value": "Add the read-only attribute to draw a read-only input.",
|
|
423
423
|
"type": "text"
|
|
424
424
|
}
|
|
425
425
|
},
|
|
@@ -452,6 +452,26 @@
|
|
|
452
452
|
"value": "Use the prefix and suffix slots to add icons.",
|
|
453
453
|
"type": "text"
|
|
454
454
|
}
|
|
455
|
+
},
|
|
456
|
+
"focus": {
|
|
457
|
+
"title": {
|
|
458
|
+
"value": "Focus",
|
|
459
|
+
"type": "text"
|
|
460
|
+
},
|
|
461
|
+
"description": {
|
|
462
|
+
"value": "The focus attribute provides feedback to the users, informing them that the input component is ready for use.",
|
|
463
|
+
"type": "text"
|
|
464
|
+
}
|
|
465
|
+
},
|
|
466
|
+
"invalid": {
|
|
467
|
+
"title": {
|
|
468
|
+
"value": "Invalid",
|
|
469
|
+
"type": "text"
|
|
470
|
+
},
|
|
471
|
+
"description": {
|
|
472
|
+
"value": "The invalid status is used to warn the user that the input is invalid. For example, if the entry of text is mandatory and nothing has been entered or if a text has been entered that does not have the correct format.",
|
|
473
|
+
"type": "text"
|
|
474
|
+
}
|
|
455
475
|
}
|
|
456
476
|
},
|
|
457
477
|
"menu-item": {
|
|
@@ -565,60 +585,54 @@
|
|
|
565
585
|
"type": "text"
|
|
566
586
|
}
|
|
567
587
|
},
|
|
568
|
-
"
|
|
588
|
+
"help-text": {
|
|
569
589
|
"title": {
|
|
570
|
-
"value": "
|
|
590
|
+
"value": "Help Text",
|
|
571
591
|
"type": "text"
|
|
572
592
|
},
|
|
573
|
-
"
|
|
574
|
-
"
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
593
|
+
"description": {
|
|
594
|
+
"value": "Add descriptive help text to a radio group with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.",
|
|
595
|
+
"type": "text"
|
|
596
|
+
}
|
|
597
|
+
},
|
|
598
|
+
"disabled": {
|
|
599
|
+
"title": {
|
|
600
|
+
"value": "Disabling Options",
|
|
601
|
+
"type": "text"
|
|
582
602
|
},
|
|
583
|
-
"
|
|
584
|
-
"
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
603
|
+
"description": {
|
|
604
|
+
"value": "Radios and radio buttons can be disabled by adding the disabled attribute to the respective options inside the radio group.",
|
|
605
|
+
"type": "text"
|
|
606
|
+
}
|
|
607
|
+
},
|
|
608
|
+
"size": {
|
|
609
|
+
"title": {
|
|
610
|
+
"value": "Sizing Options",
|
|
611
|
+
"type": "text"
|
|
592
612
|
},
|
|
593
|
-
"
|
|
594
|
-
"
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
613
|
+
"description": {
|
|
614
|
+
"value": "The size of Radios and Radio Buttons will be determined by the Radio Group’s size attribute.",
|
|
615
|
+
"type": "text"
|
|
616
|
+
}
|
|
617
|
+
},
|
|
618
|
+
"required": {
|
|
619
|
+
"title": {
|
|
620
|
+
"value": "Validation",
|
|
621
|
+
"type": "text"
|
|
602
622
|
},
|
|
603
|
-
"
|
|
604
|
-
"
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
623
|
+
"description": {
|
|
624
|
+
"value": "Setting the required attribute to make selecting an option mandatory. If a value has not been selected, it will prevent the form from submitting and display an error message.",
|
|
625
|
+
"type": "text"
|
|
626
|
+
}
|
|
627
|
+
},
|
|
628
|
+
"setCustomValidity": {
|
|
629
|
+
"title": {
|
|
630
|
+
"value": "Custom Validity",
|
|
631
|
+
"type": "text"
|
|
612
632
|
},
|
|
613
|
-
"
|
|
614
|
-
"
|
|
615
|
-
|
|
616
|
-
"type": "text"
|
|
617
|
-
},
|
|
618
|
-
"description": {
|
|
619
|
-
"value": "Use the setCustomValidity() method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string.",
|
|
620
|
-
"type": "text"
|
|
621
|
-
}
|
|
633
|
+
"description": {
|
|
634
|
+
"value": "Use the setCustomValidity() method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string.",
|
|
635
|
+
"type": "text"
|
|
622
636
|
}
|
|
623
637
|
}
|
|
624
638
|
},
|
|
@@ -703,13 +717,45 @@
|
|
|
703
717
|
}
|
|
704
718
|
},
|
|
705
719
|
"switch": {
|
|
706
|
-
"
|
|
707
|
-
"
|
|
708
|
-
|
|
720
|
+
"default": {
|
|
721
|
+
"description": {
|
|
722
|
+
"value": "Switches allow the user to toggle an option on or off.",
|
|
723
|
+
"type": "text"
|
|
724
|
+
},
|
|
725
|
+
"title": {
|
|
726
|
+
"value": "Switch",
|
|
727
|
+
"type": "text"
|
|
728
|
+
}
|
|
709
729
|
},
|
|
710
|
-
"
|
|
711
|
-
"
|
|
712
|
-
|
|
730
|
+
"checked": {
|
|
731
|
+
"description": {
|
|
732
|
+
"value": "Use the checked attribute to activate the switch.",
|
|
733
|
+
"type": "text"
|
|
734
|
+
},
|
|
735
|
+
"title": {
|
|
736
|
+
"value": "Checked",
|
|
737
|
+
"type": "text"
|
|
738
|
+
}
|
|
739
|
+
},
|
|
740
|
+
"disabled": {
|
|
741
|
+
"title": {
|
|
742
|
+
"value": "Disabled",
|
|
743
|
+
"type": "text"
|
|
744
|
+
},
|
|
745
|
+
"description": {
|
|
746
|
+
"value": "Use the disabled attribute to disable the switch.",
|
|
747
|
+
"type": "text"
|
|
748
|
+
}
|
|
749
|
+
},
|
|
750
|
+
"sizes": {
|
|
751
|
+
"title": {
|
|
752
|
+
"value": "Sizes",
|
|
753
|
+
"type": "text"
|
|
754
|
+
},
|
|
755
|
+
"description": {
|
|
756
|
+
"value": "Use the size attribute to change a switch’s size.",
|
|
757
|
+
"type": "text"
|
|
758
|
+
}
|
|
713
759
|
}
|
|
714
760
|
},
|
|
715
761
|
"tab-group": {
|
|
@@ -763,100 +809,114 @@
|
|
|
763
809
|
"type": "text"
|
|
764
810
|
}
|
|
765
811
|
},
|
|
766
|
-
"
|
|
812
|
+
"labels": {
|
|
767
813
|
"title": {
|
|
768
|
-
"value": "
|
|
814
|
+
"value": "Labels",
|
|
769
815
|
"type": "text"
|
|
770
816
|
},
|
|
771
|
-
"
|
|
772
|
-
"
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
|
|
776
|
-
|
|
777
|
-
|
|
778
|
-
|
|
779
|
-
|
|
817
|
+
"description": {
|
|
818
|
+
"value": "Use the label attribute to give the textarea an accessible label. For labels that contain HTML, use the label slot instead.",
|
|
819
|
+
"type": "text"
|
|
820
|
+
}
|
|
821
|
+
},
|
|
822
|
+
"help-text": {
|
|
823
|
+
"title": {
|
|
824
|
+
"value": "Help Text",
|
|
825
|
+
"type": "text"
|
|
780
826
|
},
|
|
781
|
-
"
|
|
782
|
-
"
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
827
|
+
"description": {
|
|
828
|
+
"value": "Add descriptive help text to a textarea with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.",
|
|
829
|
+
"type": "text"
|
|
830
|
+
}
|
|
831
|
+
},
|
|
832
|
+
"rows": {
|
|
833
|
+
"title": {
|
|
834
|
+
"value": "Rows",
|
|
835
|
+
"type": "text"
|
|
790
836
|
},
|
|
791
|
-
"
|
|
792
|
-
"
|
|
793
|
-
|
|
794
|
-
|
|
795
|
-
|
|
796
|
-
|
|
797
|
-
|
|
798
|
-
|
|
799
|
-
|
|
837
|
+
"description": {
|
|
838
|
+
"value": "Use the rows attribute to change the number of text rows that get shown.",
|
|
839
|
+
"type": "text"
|
|
840
|
+
}
|
|
841
|
+
},
|
|
842
|
+
"placeholder": {
|
|
843
|
+
"title": {
|
|
844
|
+
"value": "Placeholders",
|
|
845
|
+
"type": "text"
|
|
800
846
|
},
|
|
801
|
-
"
|
|
802
|
-
"
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
|
|
847
|
+
"description": {
|
|
848
|
+
"value": "Use the placeholder attribute to add a placeholder.",
|
|
849
|
+
"type": "text"
|
|
850
|
+
}
|
|
851
|
+
},
|
|
852
|
+
"readonly": {
|
|
853
|
+
"title": {
|
|
854
|
+
"value": "Read-only Textareas",
|
|
855
|
+
"type": "text"
|
|
856
|
+
},
|
|
857
|
+
"description": {
|
|
858
|
+
"value": "Add the read-only attribute to draw a read-only textarea.",
|
|
859
|
+
"type": "text"
|
|
860
|
+
}
|
|
861
|
+
},
|
|
862
|
+
"disabled": {
|
|
863
|
+
"title": {
|
|
864
|
+
"value": "Disabled",
|
|
865
|
+
"type": "text"
|
|
866
|
+
},
|
|
867
|
+
"description": {
|
|
868
|
+
"value": "Use the disabled attribute to disable a textarea.",
|
|
869
|
+
"type": "text"
|
|
870
|
+
}
|
|
871
|
+
},
|
|
872
|
+
"size": {
|
|
873
|
+
"title": {
|
|
874
|
+
"value": "Sizes",
|
|
875
|
+
"type": "text"
|
|
810
876
|
},
|
|
811
|
-
"
|
|
812
|
-
"
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
|
|
877
|
+
"description": {
|
|
878
|
+
"value": "Use the size attribute to change a textarea’s size.",
|
|
879
|
+
"type": "text"
|
|
880
|
+
}
|
|
881
|
+
},
|
|
882
|
+
"resize": {
|
|
883
|
+
"title": {
|
|
884
|
+
"value": "Prevent Resizing",
|
|
885
|
+
"type": "text"
|
|
820
886
|
},
|
|
821
|
-
"
|
|
822
|
-
"
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
887
|
+
"description": {
|
|
888
|
+
"value": "By default, textareas can be resized vertically by the user. To prevent resizing, set the resize attribute to none.",
|
|
889
|
+
"type": "text"
|
|
890
|
+
}
|
|
891
|
+
},
|
|
892
|
+
"resize-auto": {
|
|
893
|
+
"title": {
|
|
894
|
+
"value": "Expand with Content",
|
|
895
|
+
"type": "text"
|
|
830
896
|
},
|
|
831
|
-
"
|
|
832
|
-
"
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
897
|
+
"description": {
|
|
898
|
+
"value": "Textareas will automatically resize to expand to fit their content when resize is set to auto.",
|
|
899
|
+
"type": "text"
|
|
900
|
+
}
|
|
901
|
+
},
|
|
902
|
+
"focus": {
|
|
903
|
+
"title": {
|
|
904
|
+
"value": "Focus",
|
|
905
|
+
"type": "text"
|
|
840
906
|
},
|
|
841
|
-
"
|
|
842
|
-
"
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
907
|
+
"description": {
|
|
908
|
+
"value": "The focus event gives the user feedback that the Textarea has been focused by the keyboard interaction and that the Textarea component is ready for use.",
|
|
909
|
+
"type": "text"
|
|
910
|
+
}
|
|
911
|
+
},
|
|
912
|
+
"invalid": {
|
|
913
|
+
"title": {
|
|
914
|
+
"value": "Invalid",
|
|
915
|
+
"type": "text"
|
|
850
916
|
},
|
|
851
|
-
"
|
|
852
|
-
"
|
|
853
|
-
|
|
854
|
-
"type": "text"
|
|
855
|
-
},
|
|
856
|
-
"description": {
|
|
857
|
-
"value": "Textareas will automatically resize to expand to fit their content when resize is set to auto.",
|
|
858
|
-
"type": "text"
|
|
859
|
-
}
|
|
917
|
+
"description": {
|
|
918
|
+
"value": "The invalid status is used to warn the user that the input is invalid. For example, if the entry of text is mandatory and nothing has been entered or if a text has been entered that does not have the correct format.",
|
|
919
|
+
"type": "text"
|
|
860
920
|
}
|
|
861
921
|
}
|
|
862
922
|
},
|
|
@@ -910,42 +970,6 @@
|
|
|
910
970
|
"value": "Radios allow the user to select a single option from a group. \nRadios are designed to be used with radio groups.",
|
|
911
971
|
"type": "text"
|
|
912
972
|
}
|
|
913
|
-
},
|
|
914
|
-
"examples": {
|
|
915
|
-
"title": {
|
|
916
|
-
"value": "Examples",
|
|
917
|
-
"type": "text"
|
|
918
|
-
},
|
|
919
|
-
"value": {
|
|
920
|
-
"title": {
|
|
921
|
-
"value": "Initial Value",
|
|
922
|
-
"type": "text"
|
|
923
|
-
},
|
|
924
|
-
"description": {
|
|
925
|
-
"value": "To set the initial value and checked state, use the value attribute on the containing radio group.",
|
|
926
|
-
"type": "text"
|
|
927
|
-
}
|
|
928
|
-
},
|
|
929
|
-
"disabled": {
|
|
930
|
-
"title": {
|
|
931
|
-
"value": "Disabled",
|
|
932
|
-
"type": "text"
|
|
933
|
-
},
|
|
934
|
-
"text": {
|
|
935
|
-
"value": "Use the disabled attribute to disable a radio.",
|
|
936
|
-
"type": "text"
|
|
937
|
-
}
|
|
938
|
-
},
|
|
939
|
-
"sizes": {
|
|
940
|
-
"title": {
|
|
941
|
-
"value": "Sizes",
|
|
942
|
-
"type": "text"
|
|
943
|
-
},
|
|
944
|
-
"description": {
|
|
945
|
-
"value": "Add the size attribute to the Radio Group to change the radios’ size.",
|
|
946
|
-
"type": "text"
|
|
947
|
-
}
|
|
948
|
-
}
|
|
949
973
|
}
|
|
950
974
|
}
|
|
951
975
|
},
|
|
@@ -1209,4 +1233,4 @@
|
|
|
1209
1233
|
}
|
|
1210
1234
|
}
|
|
1211
1235
|
}
|
|
1212
|
-
}
|
|
1236
|
+
}
|