@automattic/vip-design-system 0.28.1 → 0.28.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 (41) hide show
  1. package/.storybook/decorators/withColorMode.jsx +15 -2
  2. package/README.md +3 -3
  3. package/build/system/Accordion/Accordion.js +21 -30
  4. package/build/system/Badge/Badge.stories.js +1 -1
  5. package/build/system/Dropdown/Dropdown.stories.js +9 -5
  6. package/build/system/Form/Radio.stories.js +1 -1
  7. package/build/system/NewForm/FormAutocomplete.js +12 -2
  8. package/build/system/NewForm/FormAutocomplete.stories.js +14 -2
  9. package/build/system/NewForm/FormSelect.stories.js +3 -1
  10. package/build/system/Notice/Notice.stories.js +13 -23
  11. package/build/system/Table/Table.stories.js +0 -3
  12. package/build/system/Tabs/Tabs.stories.js +3 -3
  13. package/build/system/Wizard/WizardStep.js +5 -3
  14. package/build/system/theme/colors.js +7 -170
  15. package/build/system/theme/generated/valet-theme-dark.json +2924 -0
  16. package/{src/system/theme/generated/valet-theme.json → build/system/theme/generated/valet-theme-light.json} +47 -8
  17. package/build/system/theme/getColor.js +53 -50
  18. package/build/system/theme/index.js +114 -147
  19. package/build/system/theme/textStyles.js +51 -0
  20. package/package.json +7 -3
  21. package/src/system/Accordion/Accordion.js +8 -6
  22. package/src/system/Badge/Badge.stories.jsx +2 -2
  23. package/src/system/Dropdown/Dropdown.stories.jsx +12 -10
  24. package/src/system/Form/Radio.stories.jsx +3 -3
  25. package/src/system/NewForm/FormAutocomplete.js +11 -0
  26. package/src/system/NewForm/FormAutocomplete.stories.jsx +13 -0
  27. package/src/system/NewForm/FormSelect.stories.jsx +3 -2
  28. package/src/system/Notice/Notice.stories.jsx +8 -12
  29. package/src/system/Table/Table.stories.jsx +1 -1
  30. package/src/system/Tabs/Tabs.stories.jsx +3 -3
  31. package/src/system/Wizard/WizardStep.js +9 -3
  32. package/src/system/theme/colors.js +5 -171
  33. package/src/system/theme/generated/valet-theme-dark.json +2924 -0
  34. package/src/system/theme/generated/valet-theme-light.json +2918 -0
  35. package/src/system/theme/getColor.js +46 -40
  36. package/src/system/theme/index.js +150 -170
  37. package/src/system/theme/textStyles.js +46 -0
  38. package/tokens/valet-core/$metadata.json +1 -0
  39. package/tokens/valet-core/$themes.json +0 -2
  40. package/tokens/valet-core/wpvip-productive-color-dark.json +946 -0
  41. package/tokens/valet-core/wpvip-productive-color.json +47 -8
package/tokens/valet-core/wpvip-productive-color.json CHANGED
@@ -4,6 +4,11 @@
4
4
  "type": "color",
5
5
  "description": "Use as main application background",
6
6
  "value": "{color.gray.0}"
7
+ },
8
+ "overlay": {
9
+ "value": "rgba(0,0,0,0.7)",
10
+ "type": "color",
11
+ "description": "Use for modal UI overlay"
7
12
  }
8
13
  },
9
14
  "layer": {
@@ -690,14 +695,6 @@
690
695
  "type": "color"
691
696
  }
692
697
  },
693
- "overlay": {
694
- "type": "color",
695
- "value": "{color.gray.55}"
696
- },
697
- "interactive": {
698
- "type": "color",
699
- "value": "{color.gold.55}"
700
- },
701
698
  "tag": {
702
699
  "gray": {
703
700
  "background": {
@@ -897,5 +894,47 @@
897
894
  "value": "{color.pink.20}"
898
895
  }
899
896
  }
897
+ },
898
+ "toolbar": {
899
+ "background": {
900
+ "value": "{color.black}",
901
+ "type": "color",
902
+ "description": "The background color for the top toolbar"
903
+ },
904
+ "text": {
905
+ "default": {
906
+ "value": "{color.gray.7}",
907
+ "type": "color",
908
+ "description": "Default text color for the top toolbar's contents"
909
+ },
910
+ "hover": {
911
+ "value": "{color.gray.7}",
912
+ "type": "color"
913
+ }
914
+ },
915
+ "brand": {
916
+ "value": "{color.pure-white}",
917
+ "type": "color",
918
+ "description": "Use for the logo"
919
+ }
920
+ },
921
+ "logs": {
922
+ "text": {
923
+ "primary": {
924
+ "value": "{color.gray.7}",
925
+ "type": "color",
926
+ "description": "Use for monotype output in an invere layer."
927
+ },
928
+ "secondary": {
929
+ "value": "{color.gray.30}",
930
+ "type": "color",
931
+ "description": "Use for timestamp or secondary monotype output in an inverse layer."
932
+ }
933
+ },
934
+ "background": {
935
+ "value": "{color.black}",
936
+ "type": "color",
937
+ "description": "Use for the pseudo terminal window background color."
938
+ }
900
939
  }
901
940
  }