@automattic/vip-design-system 2.13.2 → 2.13.3

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 (5) hide show
  1. package/build/system/Accordion/Accordion.stories.js +15 -3
  2. package/build/system/theme/index.js +4 -0
  3. package/package.json +1 -1
  4. package/src/system/Accordion/Accordion.stories.tsx +11 -3
  5. package/src/system/theme/index.js +4 -0
package/build/system/Accordion/Accordion.stories.js CHANGED
@@ -42,7 +42,11 @@ var ExampleAccordion = function ExampleAccordion() {
42
42
  children: [_jsxs(Accordion.Item, {
43
43
  value: "teamPermissions",
44
44
  children: [_jsx(Accordion.TriggerWithIcon, {
45
- icon: _jsx(RiUserAddLine, {}),
45
+ icon: _jsx(RiUserAddLine, {
46
+ sx: {
47
+ color: 'support.accent.success'
48
+ }
49
+ }),
46
50
  children: "Team & Permissions"
47
51
  }), _jsx(Accordion.Content, {
48
52
  children: _jsx(ExampleContent, {})
@@ -50,7 +54,11 @@ var ExampleAccordion = function ExampleAccordion() {
50
54
  }), _jsxs(Accordion.Item, {
51
55
  value: "addContentMedia",
52
56
  children: [_jsx(Accordion.TriggerWithIcon, {
53
- icon: _jsx(BiBookContent, {}),
57
+ icon: _jsx(BiBookContent, {
58
+ sx: {
59
+ color: 'support.accent.success'
60
+ }
61
+ }),
54
62
  children: "Add Content & Media"
55
63
  }), _jsx(Accordion.Content, {
56
64
  children: _jsx(ExampleContent, {})
@@ -58,7 +66,11 @@ var ExampleAccordion = function ExampleAccordion() {
58
66
  }), _jsxs(Accordion.Item, {
59
67
  value: "addCode",
60
68
  children: [_jsx(Accordion.TriggerWithIcon, {
61
- icon: _jsx(RiCodeSSlashFill, {}),
69
+ icon: _jsx(RiCodeSSlashFill, {
70
+ sx: {
71
+ color: 'support.accent.success'
72
+ }
73
+ }),
62
74
  children: "Add Code"
63
75
  }), _jsx(Accordion.Content, {
64
76
  children: _jsx(ExampleContent, {})
package/build/system/theme/index.js CHANGED
@@ -53,6 +53,10 @@ const getComponentColors = ( theme, gColor, gVariants ) => ( {
53
53
  ...theme.tag,
54
54
  },
55
55
 
56
+ support: {
57
+ ...theme.support,
58
+ },
59
+
56
60
  // Notice
57
61
  notice: {
58
62
  // extending the notice theme to support the alert variant
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@automattic/vip-design-system",
3
- "version": "2.13.2",
3
+ "version": "2.13.3",
4
4
  "main": "build/system/index.js",
5
5
  "scripts": {
6
6
  "build-storybook": "storybook build",
package/src/system/Accordion/Accordion.stories.tsx CHANGED
@@ -27,7 +27,9 @@ const ExampleContent = () => (
27
27
  const ExampleAccordion = () => (
28
28
  <Accordion.Root defaultValue="teamPermissions" sx={ { width: '250px' } }>
29
29
  <Accordion.Item value="teamPermissions">
30
- <Accordion.TriggerWithIcon icon={ <RiUserAddLine /> }>
30
+ <Accordion.TriggerWithIcon
31
+ icon={ <RiUserAddLine sx={ { color: 'support.accent.success' } } /> }
32
+ >
31
33
  Team & Permissions
32
34
  </Accordion.TriggerWithIcon>
33
35
  <Accordion.Content>
@@ -35,7 +37,9 @@ const ExampleAccordion = () => (
35
37
  </Accordion.Content>
36
38
  </Accordion.Item>
37
39
  <Accordion.Item value="addContentMedia">
38
- <Accordion.TriggerWithIcon icon={ <BiBookContent /> }>
40
+ <Accordion.TriggerWithIcon
41
+ icon={ <BiBookContent sx={ { color: 'support.accent.success' } } /> }
42
+ >
39
43
  Add Content & Media
40
44
  </Accordion.TriggerWithIcon>
41
45
  <Accordion.Content>
@@ -43,7 +47,11 @@ const ExampleAccordion = () => (
43
47
  </Accordion.Content>
44
48
  </Accordion.Item>
45
49
  <Accordion.Item value="addCode">
46
- <Accordion.TriggerWithIcon icon={ <RiCodeSSlashFill /> }>Add Code</Accordion.TriggerWithIcon>
50
+ <Accordion.TriggerWithIcon
51
+ icon={ <RiCodeSSlashFill sx={ { color: 'support.accent.success' } } /> }
52
+ >
53
+ Add Code
54
+ </Accordion.TriggerWithIcon>
47
55
  <Accordion.Content>
48
56
  <ExampleContent />
49
57
  </Accordion.Content>
package/src/system/theme/index.js CHANGED
@@ -53,6 +53,10 @@ const getComponentColors = ( theme, gColor, gVariants ) => ( {
53
53
  ...theme.tag,
54
54
  },
55
55
 
56
+ support: {
57
+ ...theme.support,
58
+ },
59
+
56
60
  // Notice
57
61
  notice: {
58
62
  // extending the notice theme to support the alert variant