feat(theme): add story for colors + yarncache

stories/Colors.stories.tsx

@@ -0,0 +1,53 @@
+import styled from 'styled-components'
+
+import { generateStoryDecorator } from '../.storybook/components/StoryDecorator'
+import { THEME } from '../src'
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+`
+const ColorSample = styled.div`
+  width: 120px;
+  height: 120px;
+  margin: 5px;
+  display: inline-block;
+  background-color: ${props => props.color};
+  border: 1px solid black;
+  > span {
+    color: white;
+    filter: drop-shadow(1px 1px 0px black);
+  }
+`
+
+export default {
+  title: 'Colors',
+  component: ColorSample,
+  decorators: [generateStoryDecorator()]
+}
+
+export function _Colors() {
+  return (
+    <Wrapper>
+      {Object.entries(THEME.color).map(([key, value]) => {
+        if (typeof value === 'object') {
+          return Object.entries(value).map(([key2, value2]) => (
+            <ColorSample key={key2} color={value2}>
+              <span>
+                {key}.{key2} <br /> {value2}
+              </span>
+            </ColorSample>
+          ))
+        }
+
+        return (
+          <ColorSample key={key} color={value}>
+            <span>
+              {key} <br /> {value}
+            </span>
+          </ColorSample>
+        )
+      })}
+    </Wrapper>
+  )
+}

yarn.lock

@@ -20729,13 +20729,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ramda@npm:0.29.0":
-  version: 0.29.0
-  resolution: "ramda@npm:0.29.0"
-  checksum: 9ab26c06eb7545cbb7eebcf75526d6ee2fcaae19e338f165b2bf32772121e7b28192d6664d1ba222ff76188ba26ab307342d66e805dbb02c860560adc4d5dd57
-  languageName: node
-  linkType: hard
-
 "randombytes@npm:^2.1.0":
   version: 2.1.0
   resolution: "randombytes@npm:2.1.0"