imbric-theme 0.1.1 → 0.1.3

package/atoms/Divider/constants.js

@@ -0,0 +1,3 @@
+export const options = {
+    colors: ['primary', 'secondary', 'tertiary', 'highlight', 'inverted'],
+}

package/atoms/Divider/index.js

@@ -1,2 +1,3 @@
 export { default, Divider } from './Divider'
+export { options } from './constants'
 export { default as styles } from './Divider.module.css'

package/atoms/Heading/Heading.js

@@ -19,7 +19,7 @@ export const Heading = ({ children, isCentered, isInline, getStyles }) => {
 }
 
 Heading.propTypes = {
-  children: PropTypes.string.isRequired,
+  children: PropTypes.any.isRequired,
   getStyles: PropTypes.func.isRequired,
   isInline: PropTypes.bool,
   isCentered: PropTypes.bool,

package/atoms/Heading/Heading.module.css

@@ -20,6 +20,10 @@
   color: var(--color-tertiary);
 }
 
+.color-black {
+  color: var(--color-base-black);
+}
+
 .size-xs {
   font-size: var(--font-size-xs);
 }

package/atoms/Heading/Heading.stories.js

@@ -12,7 +12,7 @@ export default {
   title: 'Atoms/Heading',
   component: Heading,
   args: {
-    children: 'Consent doubt Tuckborough challenge destroying.',
+    children: 'Lorem ipsum dolor sit amet, consectetur adipiscing.',
   },
   argTypes: {
     color: getOptionsArgTypes(options.colors),
@@ -33,7 +33,7 @@ export const Centered = Template.bind({})
 Centered.args = {
   isCentered: true,
   children:
-    'Lose consequence night studies Wolves should wizards destruction burglar? All right, then. Keep your secrets.',
+    'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.',
 }
 
 export const Colors = ListTemplate.bind({})

package/atoms/Heading/__snapshots__/Heading.stories.js.snap

@@ -18,7 +18,7 @@ exports[`Storyshots Atoms/Heading Centered 1`] = `
   <h1
     className="heading color-base size-md weight-bold is-centered"
   >
-    Lose consequence night studies Wolves should wizards destruction burglar? All right, then. Keep your secrets.
+    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
   </h1>
 </div>
 `;
@@ -41,22 +41,22 @@ exports[`Storyshots Atoms/Heading Colors 1`] = `
   <h1
     className="heading color-base size-md weight-bold"
   >
-    Consent doubt Tuckborough challenge destroying.
+    Lorem ipsum dolor sit amet, consectetur adipiscing.
   </h1>
   <h1
     className="heading color-primary size-md weight-bold"
   >
-    Consent doubt Tuckborough challenge destroying.
+    Lorem ipsum dolor sit amet, consectetur adipiscing.
   </h1>
   <h1
     className="heading color-tertiary size-md weight-bold"
   >
-    Consent doubt Tuckborough challenge destroying.
+    Lorem ipsum dolor sit amet, consectetur adipiscing.
   </h1>
   <h1
     className="heading color-inverted size-md weight-bold"
   >
-    Consent doubt Tuckborough challenge destroying.
+    Lorem ipsum dolor sit amet, consectetur adipiscing.
   </h1>
 </div>
 `;
@@ -79,7 +79,7 @@ exports[`Storyshots Atoms/Heading Default 1`] = `
   <h1
     className="heading color-base size-md weight-bold"
   >
-    Consent doubt Tuckborough challenge destroying.
+    Lorem ipsum dolor sit amet, consectetur adipiscing.
   </h1>
 </div>
 `;
@@ -102,7 +102,7 @@ exports[`Storyshots Atoms/Heading Inline 1`] = `
   <h1
     className="heading color-base size-md weight-bold is-inline"
   >
-    Consent doubt Tuckborough challenge destroying.
+    Lorem ipsum dolor sit amet, consectetur adipiscing.
   </h1>
 </div>
 `;
@@ -125,32 +125,32 @@ exports[`Storyshots Atoms/Heading Sizes 1`] = `
   <h1
     className="heading color-base size-xs weight-bold"
   >
-    Consent doubt Tuckborough challenge destroying.
+    Lorem ipsum dolor sit amet, consectetur adipiscing.
   </h1>
   <h1
     className="heading color-base size-sm weight-bold"
   >
-    Consent doubt Tuckborough challenge destroying.
+    Lorem ipsum dolor sit amet, consectetur adipiscing.
   </h1>
   <h1
     className="heading color-base size-md weight-bold"
   >
-    Consent doubt Tuckborough challenge destroying.
+    Lorem ipsum dolor sit amet, consectetur adipiscing.
   </h1>
   <h1
     className="heading color-base size-lg weight-bold"
   >
-    Consent doubt Tuckborough challenge destroying.
+    Lorem ipsum dolor sit amet, consectetur adipiscing.
   </h1>
   <h1
     className="heading color-base size-xl weight-bold"
   >
-    Consent doubt Tuckborough challenge destroying.
+    Lorem ipsum dolor sit amet, consectetur adipiscing.
   </h1>
   <h1
     className="heading color-base size-2xl weight-bold"
   >
-    Consent doubt Tuckborough challenge destroying.
+    Lorem ipsum dolor sit amet, consectetur adipiscing.
   </h1>
 </div>
 `;
@@ -173,17 +173,17 @@ exports[`Storyshots Atoms/Heading Weights 1`] = `
   <h1
     className="heading color-base size-md weight-light"
   >
-    Consent doubt Tuckborough challenge destroying.
+    Lorem ipsum dolor sit amet, consectetur adipiscing.
   </h1>
   <h1
     className="heading color-base size-md weight-normal"
   >
-    Consent doubt Tuckborough challenge destroying.
+    Lorem ipsum dolor sit amet, consectetur adipiscing.
   </h1>
   <h1
     className="heading color-base size-md weight-bold"
   >
-    Consent doubt Tuckborough challenge destroying.
+    Lorem ipsum dolor sit amet, consectetur adipiscing.
   </h1>
 </div>
 `;

package/atoms/Heading/constants.js

@@ -1,5 +1,5 @@
 export const options = {
-  colors: ['base', 'primary', 'tertiary', 'inverted'],
+  colors: ['base', 'primary', 'tertiary', 'inverted', 'black'],
   sizes: ['xs', 'sm', 'md', 'lg', 'xl', '2xl'],
   weights: ['light', 'normal', 'bold'],
 }

package/atoms/Icon/Icon.js

@@ -60,7 +60,7 @@ Icon.defaultProps = {
   color: 'base',
   background: 'transparent',
   isClickable: false,
-  getStyles: () => {},
+  getStyles: () => { },
 }
 
 export default withStyles(styles)(Icon)

package/atoms/Icon/Icon.module.css

@@ -21,6 +21,26 @@
   padding: 15px;
 }
 
+.color-success path,
+.color-success circle {
+  fill: var(--color-tertiary-muted);
+}
+
+.color-success line,
+.color-success rect {
+  stroke: var(--color-tertiary-muted);
+}
+
+.color-error path,
+.color-error circle {
+  fill: var(--color-secondary-muted);
+}
+
+.color-error line,
+.color-error rect {
+  stroke: var(--color-secondary-muted);
+}
+
 .color-base path,
 .color-base circle {
   fill: var(--color-font-base);
@@ -75,6 +95,16 @@
   fill: var(--color-base-transparent) !important;
 }
 
+.background-success {
+  background: var(--color-tertiary-muted);
+  border-radius: var(--border-radius-full);
+}
+
+.background-error {
+  background: var(--color-secondary-muted);
+  border-radius: var(--border-radius-full);
+}
+
 .background-base {
   background: var(--color-gray-100);
   border-radius: var(--border-radius-full);