feat: Light mode icon updates (#558)

pluralsh · Jan 5, 2024 · dcb617c · dcb617c
1 parent 9481c04
commit dcb617c
Show file tree

Hide file tree

Showing 6 changed files with 710 additions and 686 deletions.
diff --git a/package.json b/package.json
@@ -54,11 +54,11 @@
     "moment": "2.29.4",
     "prop-types": "15.8.1",
     "react-animate-height": "3.2.3",
-    "react-aria": "3.30.0",
+    "react-aria": "3.31.0",
     "react-embed": "3.7.0",
     "react-markdown": "9.0.1",
     "react-merge-refs": "2.1.1",
-    "react-stately": "3.28.0",
+    "react-stately": "3.29.0",
     "react-use-measure": "2.1.1",
     "rehype-raw": "7.0.0",
     "resize-observer-polyfill": "1.5.1",

diff --git a/src/components/icons/AmazonLogoIcon.tsx b/src/components/icons/AmazonLogoIcon.tsx
@@ -1,36 +1,47 @@
+import { useTheme } from 'styled-components'
+
 import createIcon from './createIcon'
 
-export default createIcon(({ size, color, fullColor }) => (
-  <svg
-    width={size}
-    viewBox="0 0 16 16"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g
-      fill="none"
-      fillRule="evenodd"
-      transform="matrix(.06275371 0 0 .06275371 -.048564 -.027486)"
+export default createIcon(({ size, color, fullColor }) => {
+  const theme = useTheme()
+  const neutralColor = fullColor
+    ? theme.mode === 'light'
+      ? '#232f3e'
+      : '#fff'
+    : color
+
+  return (
+    <svg
+      width={size}
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
     >
-      <path
-        d="m221.56504 210.324c-105.235 50.083-170.544999 8.18-212.3519988-17.271-2.587-1.604-6.984.375-3.169 4.757 13.9279998 16.888 59.5729998 57.593 119.1529988 57.593 59.621 0 95.09-32.532 99.527-38.207 4.407-5.627 1.294-8.731-3.16-6.872zm29.555-16.322c-2.826-3.68-17.184-4.366-26.22-3.256-9.05 1.078-22.634 6.609-21.453 9.93.606 1.244 1.843.686 8.06.127 6.234-.622 23.698-2.826 27.337 1.931 3.656 4.79-5.57 27.608-7.255 31.288-1.628 3.68.622 4.629 3.68 2.178 3.016-2.45 8.476-8.795 12.14-17.774 3.639-9.028 5.858-21.622 3.71-24.424z"
-        fill={fullColor ? '#f90' : color}
-        fillRule="nonzero"
-      />
-      <path
-        d="m150.80604 108.13c0 13.141.332 24.1-6.31 35.77-5.361 9.489-13.853 15.324-23.341 15.324-12.952 0-20.495-9.868-20.495-24.432 0-28.75 25.76-33.968 50.146-33.968zm34.015 82.216c-2.23 1.992-5.456 2.135-7.97.806-11.196-9.298-13.189-13.615-19.356-22.487-18.502 18.882-31.596 24.527-55.601 24.527-28.369999 0-50.477999-17.506-50.477999-52.565 0-27.373 14.85-46.018 35.96-55.126 18.312999-8.066 43.883999-9.489 63.429999-11.718v-4.365c0-8.018.616-17.506-4.08-24.432-4.128-6.215-12.003-8.777-18.93-8.777-12.856 0-24.337 6.594-27.136 20.257-.57 3.037-2.798999 6.026-5.834999 6.168l-32.735-3.51c-2.751-.618-5.787-2.847-5.028-7.07 7.543-39.66 43.359999-51.616 75.429999-51.616 16.415 0 37.858 4.365 50.81 16.795 16.415 15.323 14.849 35.77 14.849 58.02v52.565c0 15.798 6.547 22.724 12.714 31.264 2.182 3.036 2.657 6.69-.095 8.966-6.879 5.74-19.119 16.415-25.855 22.393l-.095-.095"
-        fill={fullColor ? '#fff' : color}
-      />
-      <g transform="translate(.062041)">
+      <g
+        fill="none"
+        fillRule="evenodd"
+        transform="matrix(.06275371 0 0 .06275371 -.048564 -.027486)"
+      >
         <path
-          d="m221.503 210.324c-105.235 50.083-170.545 8.18-212.352-17.271-2.587-1.604-6.984.375-3.169 4.757 13.928 16.888 59.573 57.593 119.153 57.593 59.621 0 95.09-32.532 99.527-38.207 4.407-5.627 1.294-8.731-3.16-6.872zm29.555-16.322c-2.826-3.68-17.184-4.366-26.22-3.256-9.05 1.078-22.634 6.609-21.453 9.93.606 1.244 1.843.686 8.06.127 6.234-.622 23.698-2.826 27.337 1.931 3.656 4.79-5.57 27.608-7.255 31.288-1.628 3.68.622 4.629 3.68 2.178 3.016-2.45 8.476-8.795 12.14-17.774 3.639-9.028 5.858-21.622 3.71-24.424z"
+          d="m221.56504 210.324c-105.235 50.083-170.544999 8.18-212.3519988-17.271-2.587-1.604-6.984.375-3.169 4.757 13.9279998 16.888 59.5729998 57.593 119.1529988 57.593 59.621 0 95.09-32.532 99.527-38.207 4.407-5.627 1.294-8.731-3.16-6.872zm29.555-16.322c-2.826-3.68-17.184-4.366-26.22-3.256-9.05 1.078-22.634 6.609-21.453 9.93.606 1.244 1.843.686 8.06.127 6.234-.622 23.698-2.826 27.337 1.931 3.656 4.79-5.57 27.608-7.255 31.288-1.628 3.68.622 4.629 3.68 2.178 3.016-2.45 8.476-8.795 12.14-17.774 3.639-9.028 5.858-21.622 3.71-24.424z"
           fill={fullColor ? '#f90' : color}
           fillRule="nonzero"
         />
         <path
-          d="m150.744 108.13c0 13.141.332 24.1-6.31 35.77-5.361 9.489-13.853 15.324-23.341 15.324-12.952 0-20.495-9.868-20.495-24.432 0-28.75 25.76-33.968 50.146-33.968zm34.015 82.216c-2.23 1.992-5.456 2.135-7.97.806-11.196-9.298-13.189-13.615-19.356-22.487-18.502 18.882-31.596 24.527-55.601 24.527-28.37 0-50.478-17.506-50.478-52.565 0-27.373 14.85-46.018 35.96-55.126 18.313-8.066 43.884-9.489 63.43-11.718v-4.365c0-8.018.616-17.506-4.08-24.432-4.128-6.215-12.003-8.777-18.93-8.777-12.856 0-24.337 6.594-27.136 20.257-.57 3.037-2.799 6.026-5.835 6.168l-32.735-3.51c-2.751-.618-5.787-2.847-5.028-7.07 7.543-39.66 43.36-51.616 75.43-51.616 16.415 0 37.858 4.365 50.81 16.795 16.415 15.323 14.849 35.77 14.849 58.02v52.565c0 15.798 6.547 22.724 12.714 31.264 2.182 3.036 2.657 6.69-.095 8.966-6.879 5.74-19.119 16.415-25.855 22.393l-.095-.095"
-          fill={fullColor ? '#fff' : color}
+          d="m150.80604 108.13c0 13.141.332 24.1-6.31 35.77-5.361 9.489-13.853 15.324-23.341 15.324-12.952 0-20.495-9.868-20.495-24.432 0-28.75 25.76-33.968 50.146-33.968zm34.015 82.216c-2.23 1.992-5.456 2.135-7.97.806-11.196-9.298-13.189-13.615-19.356-22.487-18.502 18.882-31.596 24.527-55.601 24.527-28.369999 0-50.477999-17.506-50.477999-52.565 0-27.373 14.85-46.018 35.96-55.126 18.312999-8.066 43.883999-9.489 63.429999-11.718v-4.365c0-8.018.616-17.506-4.08-24.432-4.128-6.215-12.003-8.777-18.93-8.777-12.856 0-24.337 6.594-27.136 20.257-.57 3.037-2.798999 6.026-5.834999 6.168l-32.735-3.51c-2.751-.618-5.787-2.847-5.028-7.07 7.543-39.66 43.359999-51.616 75.429999-51.616 16.415 0 37.858 4.365 50.81 16.795 16.415 15.323 14.849 35.77 14.849 58.02v52.565c0 15.798 6.547 22.724 12.714 31.264 2.182 3.036 2.657 6.69-.095 8.966-6.879 5.74-19.119 16.415-25.855 22.393l-.095-.095"
+          fill={neutralColor}
         />
+        <g transform="translate(.062041)">
+          <path
+            d="m221.503 210.324c-105.235 50.083-170.545 8.18-212.352-17.271-2.587-1.604-6.984.375-3.169 4.757 13.928 16.888 59.573 57.593 119.153 57.593 59.621 0 95.09-32.532 99.527-38.207 4.407-5.627 1.294-8.731-3.16-6.872zm29.555-16.322c-2.826-3.68-17.184-4.366-26.22-3.256-9.05 1.078-22.634 6.609-21.453 9.93.606 1.244 1.843.686 8.06.127 6.234-.622 23.698-2.826 27.337 1.931 3.656 4.79-5.57 27.608-7.255 31.288-1.628 3.68.622 4.629 3.68 2.178 3.016-2.45 8.476-8.795 12.14-17.774 3.639-9.028 5.858-21.622 3.71-24.424z"
+            fill={fullColor ? '#f90' : color}
+            fillRule="nonzero"
+          />
+          <path
+            d="m150.744 108.13c0 13.141.332 24.1-6.31 35.77-5.361 9.489-13.853 15.324-23.341 15.324-12.952 0-20.495-9.868-20.495-24.432 0-28.75 25.76-33.968 50.146-33.968zm34.015 82.216c-2.23 1.992-5.456 2.135-7.97.806-11.196-9.298-13.189-13.615-19.356-22.487-18.502 18.882-31.596 24.527-55.601 24.527-28.37 0-50.478-17.506-50.478-52.565 0-27.373 14.85-46.018 35.96-55.126 18.313-8.066 43.884-9.489 63.43-11.718v-4.365c0-8.018.616-17.506-4.08-24.432-4.128-6.215-12.003-8.777-18.93-8.777-12.856 0-24.337 6.594-27.136 20.257-.57 3.037-2.799 6.026-5.835 6.168l-32.735-3.51c-2.751-.618-5.787-2.847-5.028-7.07 7.543-39.66 43.36-51.616 75.43-51.616 16.415 0 37.858 4.365 50.81 16.795 16.415 15.323 14.849 35.77 14.849 58.02v52.565c0 15.798 6.547 22.724 12.714 31.264 2.182 3.036 2.657 6.69-.095 8.966-6.879 5.74-19.119 16.415-25.855 22.393l-.095-.095"
+            fill={neutralColor}
+          />
+        </g>
       </g>
-    </g>
-  </svg>
-))
+    </svg>
+  )
+})
diff --git a/src/components/icons/AwsLogoIcon.tsx b/src/components/icons/AwsLogoIcon.tsx
@@ -1,25 +1,36 @@
+import { useTheme } from 'styled-components'
+
 import createIcon from './createIcon'
 
-export default createIcon(({ size, color, fullColor }) => (
-  <svg
-    width={size}
-    viewBox="0 0 16 16"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g transform="matrix(.05321432 0 0 .05321468 3.981399 6.278019)">
-      <path
-        d="m11.013826 21.418667c.8 2.2 1.8 4.6 3.2 7.2.5.8.7 1.6.7 2.3 0 1-.6 2-1.9 3l-6.3 4.2c-.9.6-1.8.9-2.6.9-1 0-2-.5-3-1.4-1.4-1.5-2.6-3.1-3.6-4.7-1-1.7-2-3.6-3.1-5.9-7.8 9.2-17.6 13.8-29.4 13.8-8.4 0-15.1-2.4-20-7.2s-7.4-11.2-7.4-19.2c0-8.5 3-15.4 9.1-20.6s14.2-7.8 24.5-7.8c3.4 0 6.9.3 10.6.8s7.5 1.3 11.5 2.2v-7.3c0-7.6-1.6-12.9-4.7-16-3.2-3.1-8.6-4.6-16.3-4.6-3.5 0-7.1.4-10.8 1.3s-7.3 2-10.8 3.4c-1.6.7-2.8 1.1-3.5 1.3s-1.2.3-1.6.3c-1.4 0-2.1-1-2.1-3.1v-4.9c0-1.6.2-2.8.7-3.5s1.4-1.4 2.8-2.1c3.5-1.8 7.7-3.3 12.6-4.5 4.9-1.3 10.1-1.9 15.6-1.9 11.9 0 20.6 2.7 26.2 8.1 5.5 5.4 8.3 13.6 8.3 24.6l-.00021 32.4c.00021 3.7.60021 6.7 1.30021 8.9zm-41.7 6.3c3.3 0 6.7-.6 10.3-1.8s6.8-3.4 9.5-6.4c1.6-1.9 2.8-4 3.4-6.4s1-5.3 1-8.7v-4.2c-2.9-.7-6-1.3-9.2-1.7s-6.3-.6-9.4-.6c-6.7 0-11.6 1.3-14.9 4s-4.9 6.5-4.9 11.5c0 4.7 1.2 8.2 3.7 10.6 2.4 2.5 5.9 3.7 10.5 3.7zm80.3 10.8c-1.8 0-3-.3-3.8-1-.8-.6-1.5-2-2.1-3.9l-23.5-77.3c-.6-2-.9-3.3-.9-4 0-1.6.8-2.5 2.4-2.5h9.8c1.9 0 3.2.3 3.9 1 .8.6 1.4 2 2 3.9l16.8 66.2 15.6-66.2c.5-2 1.1-3.3 1.9-3.9s2.2-1 4-1h8c1.9 0 3.2.3 4 1 .8.6 1.5 2 1.9 3.9l15.800004 67 17.3-67c.6-2 1.3-3.3 2-3.9.8-.6 2.1-1 3.9-1h9.3c1.6 0 2.5.8 2.5 2.5 0 .5-.1 1-.2 1.6s-.3 1.4-.7 2.5l-24.1 77.3c-.6 2-1.3 3.3-2.1 3.9s-2.1 1-3.8 1h-8.6c-1.900004 0-3.200004-.3-4.000004-1s-1.5-2-1.9-4l-15.5-64.5-15.4 64.4c-.5 2-1.1 3.3-1.9 4s-2.2 1-4 1zm128.500004 2.7c-5.2 0-10.4-.6-15.4-1.8s-8.9-2.5-11.5-4c-1.6-.9-2.7-1.9-3.1-2.8s-.6-1.9-.6-2.8v-5.1c0-2.1.8-3.1 2.3-3.1.6 0 1.2.1 1.8.3s1.5.6 2.5 1c3.4 1.5 7.1 2.7 11 3.5 4 .8 7.9 1.2 11.9 1.2 6.3 0 11.2-1.1 14.6-3.3s5.2-5.4 5.2-9.5c0-2.8-.9-5.1-2.7-7s-5.2-3.6-10.1-5.2l-14.5-4.5c-7.3-2.3-12.7-5.7-16-10.2-3.3-4.4-5-9.3-5-14.5 0-4.2.9-7.9 2.7-11.1s4.2-6 7.2-8.2c3-2.3 6.4-4 10.4-5.2s8.2-1.7 12.6-1.7c2.2 0 4.5.1 6.7.4 2.3.3 4.4.7 6.5 1.1 2 .5 3.9 1 5.7 1.6s3.2 1.2 4.2 1.8c1.4.8 2.4 1.6 3 2.5.6.8.9 1.9.9 3.3v4.7c0 2.1-.8 3.2-2.3 3.2-.8 0-2.1-.4-3.8-1.2-5.7-2.6-12.1-3.9-19.2-3.9-5.7 0-10.2.9-13.3 2.8s-4.7 4.8-4.7 8.9c0 2.8 1 5.2 3 7.1s5.7 3.8 11 5.5l14.2 4.5c7.2 2.3 12.4 5.5 15.5 9.6s4.6 8.8 4.6 14c0 4.3-.9 8.2-2.6 11.6-1.8 3.4-4.2 6.4-7.3 8.8-3.1 2.5-6.8 4.3-11.1 5.6-4.5 1.4-9.2 2.1-14.3 2.1z"
-        fill={fullColor ? '#fff' : color}
-      />
-      <g
-        clipRule="evenodd"
-        fill={fullColor ? '#f90' : color}
-        fillRule="evenodd"
-        transform="translate(-76.486174 -53.881333)"
-      >
-        <path d="m273.5 143.7c-32.9 24.3-80.7 37.2-121.8 37.2-57.6 0-109.5-21.3-148.7-56.7-3.1-2.8-.3-6.6 3.4-4.4 42.4 24.6 94.7 39.5 148.8 39.5 36.5 0 76.6-7.6 113.5-23.2 5.5-2.5 10.2 3.6 4.8 7.6z" />
-        <path d="m287.2 128.1c-4.2-5.4-27.8-2.6-38.5-1.3-3.2.4-3.7-2.4-.8-4.5 18.8-13.2 49.7-9.4 53.3-5 3.6 4.5-1 35.4-18.6 50.2-2.7 2.3-5.3 1.1-4.1-1.9 4-9.9 12.9-32.2 8.7-37.5z" />
+export default createIcon(({ size, color, fullColor }) => {
+  const theme = useTheme()
+  const neutralColor = fullColor
+    ? theme.mode === 'light'
+      ? '#232f3e'
+      : '#fff'
+    : color
+
+  return (
+    <svg
+      width={size}
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g transform="matrix(.05321432 0 0 .05321468 3.981399 6.278019)">
+        <path
+          d="m11.013826 21.418667c.8 2.2 1.8 4.6 3.2 7.2.5.8.7 1.6.7 2.3 0 1-.6 2-1.9 3l-6.3 4.2c-.9.6-1.8.9-2.6.9-1 0-2-.5-3-1.4-1.4-1.5-2.6-3.1-3.6-4.7-1-1.7-2-3.6-3.1-5.9-7.8 9.2-17.6 13.8-29.4 13.8-8.4 0-15.1-2.4-20-7.2s-7.4-11.2-7.4-19.2c0-8.5 3-15.4 9.1-20.6s14.2-7.8 24.5-7.8c3.4 0 6.9.3 10.6.8s7.5 1.3 11.5 2.2v-7.3c0-7.6-1.6-12.9-4.7-16-3.2-3.1-8.6-4.6-16.3-4.6-3.5 0-7.1.4-10.8 1.3s-7.3 2-10.8 3.4c-1.6.7-2.8 1.1-3.5 1.3s-1.2.3-1.6.3c-1.4 0-2.1-1-2.1-3.1v-4.9c0-1.6.2-2.8.7-3.5s1.4-1.4 2.8-2.1c3.5-1.8 7.7-3.3 12.6-4.5 4.9-1.3 10.1-1.9 15.6-1.9 11.9 0 20.6 2.7 26.2 8.1 5.5 5.4 8.3 13.6 8.3 24.6l-.00021 32.4c.00021 3.7.60021 6.7 1.30021 8.9zm-41.7 6.3c3.3 0 6.7-.6 10.3-1.8s6.8-3.4 9.5-6.4c1.6-1.9 2.8-4 3.4-6.4s1-5.3 1-8.7v-4.2c-2.9-.7-6-1.3-9.2-1.7s-6.3-.6-9.4-.6c-6.7 0-11.6 1.3-14.9 4s-4.9 6.5-4.9 11.5c0 4.7 1.2 8.2 3.7 10.6 2.4 2.5 5.9 3.7 10.5 3.7zm80.3 10.8c-1.8 0-3-.3-3.8-1-.8-.6-1.5-2-2.1-3.9l-23.5-77.3c-.6-2-.9-3.3-.9-4 0-1.6.8-2.5 2.4-2.5h9.8c1.9 0 3.2.3 3.9 1 .8.6 1.4 2 2 3.9l16.8 66.2 15.6-66.2c.5-2 1.1-3.3 1.9-3.9s2.2-1 4-1h8c1.9 0 3.2.3 4 1 .8.6 1.5 2 1.9 3.9l15.800004 67 17.3-67c.6-2 1.3-3.3 2-3.9.8-.6 2.1-1 3.9-1h9.3c1.6 0 2.5.8 2.5 2.5 0 .5-.1 1-.2 1.6s-.3 1.4-.7 2.5l-24.1 77.3c-.6 2-1.3 3.3-2.1 3.9s-2.1 1-3.8 1h-8.6c-1.900004 0-3.200004-.3-4.000004-1s-1.5-2-1.9-4l-15.5-64.5-15.4 64.4c-.5 2-1.1 3.3-1.9 4s-2.2 1-4 1zm128.500004 2.7c-5.2 0-10.4-.6-15.4-1.8s-8.9-2.5-11.5-4c-1.6-.9-2.7-1.9-3.1-2.8s-.6-1.9-.6-2.8v-5.1c0-2.1.8-3.1 2.3-3.1.6 0 1.2.1 1.8.3s1.5.6 2.5 1c3.4 1.5 7.1 2.7 11 3.5 4 .8 7.9 1.2 11.9 1.2 6.3 0 11.2-1.1 14.6-3.3s5.2-5.4 5.2-9.5c0-2.8-.9-5.1-2.7-7s-5.2-3.6-10.1-5.2l-14.5-4.5c-7.3-2.3-12.7-5.7-16-10.2-3.3-4.4-5-9.3-5-14.5 0-4.2.9-7.9 2.7-11.1s4.2-6 7.2-8.2c3-2.3 6.4-4 10.4-5.2s8.2-1.7 12.6-1.7c2.2 0 4.5.1 6.7.4 2.3.3 4.4.7 6.5 1.1 2 .5 3.9 1 5.7 1.6s3.2 1.2 4.2 1.8c1.4.8 2.4 1.6 3 2.5.6.8.9 1.9.9 3.3v4.7c0 2.1-.8 3.2-2.3 3.2-.8 0-2.1-.4-3.8-1.2-5.7-2.6-12.1-3.9-19.2-3.9-5.7 0-10.2.9-13.3 2.8s-4.7 4.8-4.7 8.9c0 2.8 1 5.2 3 7.1s5.7 3.8 11 5.5l14.2 4.5c7.2 2.3 12.4 5.5 15.5 9.6s4.6 8.8 4.6 14c0 4.3-.9 8.2-2.6 11.6-1.8 3.4-4.2 6.4-7.3 8.8-3.1 2.5-6.8 4.3-11.1 5.6-4.5 1.4-9.2 2.1-14.3 2.1z"
+          fill={neutralColor}
+        />
+        <g
+          clipRule="evenodd"
+          fill={fullColor ? '#f90' : color}
+          fillRule="evenodd"
+          transform="translate(-76.486174 -53.881333)"
+        >
+          <path d="m273.5 143.7c-32.9 24.3-80.7 37.2-121.8 37.2-57.6 0-109.5-21.3-148.7-56.7-3.1-2.8-.3-6.6 3.4-4.4 42.4 24.6 94.7 39.5 148.8 39.5 36.5 0 76.6-7.6 113.5-23.2 5.5-2.5 10.2 3.6 4.8 7.6z" />
+          <path d="m287.2 128.1c-4.2-5.4-27.8-2.6-38.5-1.3-3.2.4-3.7-2.4-.8-4.5 18.8-13.2 49.7-9.4 53.3-5 3.6 4.5-1 35.4-18.6 50.2-2.7 2.3-5.3 1.1-4.1-1.9 4-9.9 12.9-32.2 8.7-37.5z" />
+        </g>
       </g>
-    </g>
-  </svg>
-))
+    </svg>
+  )
+})
diff --git a/src/components/icons/SlackLogoIcon.tsx b/src/components/icons/SlackLogoIcon.tsx
@@ -1,19 +1,25 @@
 import createIcon from './createIcon'
 
-export default createIcon(({ size, color }) => (
+export default createIcon(({ size, color, fullColor }) => (
   <svg
     width={size}
     viewBox="0 0 16 16"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <g fill={color}>
+    <g fill={fullColor ? '#E01E5A' : color}>
       <path d="m3.36156 10.1107c0 .9251-.7557 1.6808-1.68078 1.6808-.925079 0-1.68078-.7557-1.68078-1.6808 0-.92507.755701-1.68077 1.68078-1.68077h1.68078z" />
       <path d="m4.2085 10.1107c0-.92507.7557-1.68077 1.68078-1.68077s1.68078.7557 1.68078 1.68077v4.2085c0 .9251-.7557 1.6808-1.68078 1.6808s-1.68078-.7557-1.68078-1.6808z" />
+    </g>
+    <g fill={fullColor ? '#44BEDF' : color}>
       <path d="m5.88928 3.36156c-.92508 0-1.68078-.7557-1.68078-1.68078 0-.925079.7557-1.68078 1.68078-1.68078s1.68078.755701 1.68078 1.68078v1.68078z" />
       <path d="m5.88925 4.2085c.92508 0 1.68078.7557 1.68078 1.68078s-.7557 1.68078-1.68078 1.68078h-4.20847c-.925079 0-1.68078-.7557-1.68078-1.68078s.755701-1.68078 1.68078-1.68078z" />
+    </g>
+    <g fill={fullColor ? '#2EB67D' : color}>
       <path d="m12.6387 5.88928c0-.92508.7557-1.68078 1.6808-1.68078.925 0 1.6807.7557 1.6807 1.68078s-.7557 1.68078-1.6807 1.68078h-1.6808z" />
       <path d="m11.7917 5.88925c0 .92508-.7557 1.68078-1.6807 1.68078-.92512 0-1.68082-.7557-1.68082-1.68078v-4.20847c0-.925079.7557-1.68078 1.68082-1.68078.925 0 1.6807.755701 1.6807 1.68078z" />
+    </g>
+    <g fill={fullColor ? '#ECB22E' : color}>
       <path d="m10.111 12.6384c.925 0 1.6807.7557 1.6807 1.6808s-.7557 1.6808-1.6807 1.6808c-.92512 0-1.68082-.7557-1.68082-1.6808v-1.6808z" />
       <path d="m10.111 11.7915c-.92512 0-1.68082-.7557-1.68082-1.6808 0-.92507.7557-1.68077 1.68082-1.68077h4.2084c.9251 0 1.6808.7557 1.6808 1.68077 0 .9251-.7557 1.6808-1.6808 1.6808z" />
     </g>

diff --git a/src/stories/Radio.stories.tsx b/src/stories/Radio.stories.tsx
@@ -1,7 +1,7 @@
-import { Button, Div } from 'honorable'
 import { useState } from 'react'
 import styled, { useTheme } from 'styled-components'
 
+import Button from '../components/Button'
 import Radio from '../components/Radio'
 import RadioGroup from '../components/RadioGroup'
 
@@ -34,7 +34,6 @@ const H1 = styled.h1(({ theme }) => ({
 
 function Template(args: any) {
   const [selectedValueRG, setSelectedValueRG] = useState(undefined)
-  const [selectedValueManual, setSelectedValueManual] = useState(undefined)
   const theme = useTheme()
 
   return (
@@ -62,31 +61,6 @@ function Template(args: any) {
       >
         Reset
       </Button>
-
-      <H1>Manually Controlled</H1>
-      <Div>
-        {radios.map(({ value, label }) => (
-          <Radio
-            name="manually-controlled"
-            value={value}
-            checked={selectedValueManual === value}
-            onChange={({ target: { checked } }: any) => {
-              if (checked) setSelectedValueManual(value)
-            }}
-            {...args}
-          >
-            {label}
-          </Radio>
-        ))}
-      </Div>
-      <Button
-        marginTop={theme.spacing.medium}
-        onClick={() => {
-          setSelectedValueManual(null)
-        }}
-      >
-        Reset
-      </Button>
     </>
   )
 }