@ossy/design-system 0.0.5 → 0.0.6

package/src/image/Image.jsx

@@ -1,48 +1,4 @@
-import React, { useState, useMemo } from 'react'
-import { css } from 'glamor'
-
-const styles = css({
-  position: 'relative',
-  overflow: 'hidden',
-
-  '& .placeholder, & .source': {
-    objectFit: 'contain',
-    objectPosition: 'center center',
-    transition: 'opacity .3s ease, filter .3s ease',
-    lineHeight: '1',
-    display: 'block'
-  },
-
-  '& .placeholder': {
-    position: 'absolute',
-    top: '0',
-    bottom: '0',
-    right: '0',
-    left: '0',
-    width: '100%',
-    height: '100%',
-    filter: 'blur(20)',
-    opacity: '1'
-  },
-
-  '& .source': {
-    filter: 'blur(20)',
-    opacity: '0',
-    width: '100%',
-    height: '100%'
-  },
-
-  '& [data-loaded="true"].source': {
-    opacity: '1',
-    filter: 'blur(0)',
-  },
-
-  '& [data-loaded="true"].placeholder': {
-    opacity: '0',
-    filter: 'blur(0)',
-  }
-
-})
+import React, { useState } from 'react'
 
 export const Image = ({
   placeholderSrc,
@@ -54,7 +10,55 @@ export const Image = ({
   const [loaded, setLoaded] = useState(false)
 
   return (
-    <div {...styles} style={style}>
+    <div style={style} data-image>
+
+      <style href="@ossy/design-system/image" precedence="high" >
+      {`
+        [data-image] {
+          position: relative;
+          overflow: hidden;
+        }
+
+        [data-image] .placeholder,
+        [data-image] .source {
+          object-fit: contain;
+          object-position: center center;
+          transition: opacity .3s ease, filter .3s ease;
+          line-height: 1;
+          display: block'
+        }
+
+        [data-image] .placeholder {
+          position: absolute;
+          top: 0;
+          bottom: 0;
+          right: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          filter: blur(20);
+          opacity: 1'
+        }
+
+        [data-image] .source {
+          filter: blur(20);
+          opacity: 0;
+          width: 100%;
+          height: 100%'
+        }
+
+        [data-image] [data-loaded="true"].source {
+          opacity: 1;
+          filter: blur(0);
+        }
+
+        [data-image] [data-loaded="true"].placeholder {
+          opacity: 0;
+          filter: blur(0);
+        }
+
+      `}
+      </style>
 
       { !placeholderSrc ? null :
           <img data-loaded={loaded} className="placeholder" src={placeholderSrc} alt={alt}  />

package/src/image-card/Card.stories.jsx

@@ -6,18 +6,17 @@ export default {
   component: ImageCard,
 };
 
-const Story = (args) => <Card {...args} />;
+const Story = (args) => <ImageCard {...args} />;
 
 export const Default = Story.bind({});
 Default.args = {
   title: 'Unsplash image',
   subTitle: 'Tue 12, 2020',
-  imageSrc: 'https://images.unsplash.com/photo-1645548291117-719a896a45c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80'
+  src: 'https://picsum.photos/200/300',
 };
 
 export const OnlyImage = Story.bind({});
 OnlyImage.args = {
   src: 'https://picsum.photos/200/300',
   placeholderSrc: 'https://picsum.photos/20/30',
-  imageSrc: 'https://images.unsplash.com/photo-1645548291117-719a896a45c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80'
 };

package/src/image-card/ImageCard.jsx

@@ -1,69 +1,6 @@
 import React from 'react'
-import { css } from 'glamor'
 import { Image } from '../image/Image.jsx'
 
-const styles = css({
-
-    '--color-gray-40': 'hsl(0, 0%, 40%)',
-    '--color-gray-60': 'hsl(0, 0%, 60%)',
-    '--space-inset-s': '8px 8px 8px 8px',
-    '--space-inset-squish-s': '4px 8px 4px 8px',
-    '--space-inset-stretch-s': '12px 8px 12px 8px',
-  
-    display: 'block',
-    padding: 'var(--space-inset-s)',
-    transition: 'transform .3s ease, opacity .3s ease',
-  
-  '& .oskw-image-card *': {
-    boxWizing: 'border-box',
-  },
-  
-  '& .oskw-inner-content': {
-    display:' block',
-    textDecoration: 'none',
-    background: 'hsl(0, 0%, 100%)',
-    boxShadow: '0 1px 2px rgba(0, 0, 0, 0.18)',
-    transition: 'transform .3s ease',
-    borderRadius: '10px',
-    overflow: 'hidden',
-  },
-  
-  '& .oskw-image-card .oskw-inner-content:hover': {
-    transform: 'scale(1.01)'
-  },
-  
-  '& .oskw-image-card .oskw-inner-content img': {
-    border: 'none',
-    display: 'block',
-  },
-  
-  '& .oskw-image-card .oskw-info': {
-    padding: 'var(--space-inset-stretch-s)',
-    lineHeight: '1.5',
-    fontSize: '.9rem',
-    fontFamily: 'sans-serif',
-  },
-  
-  '& .oskw-image-card .oskw-info .oskw-title': {
-    fontSize: '1rem',
-    color: 'var(--color-gray-40)',
-  },
-  
-  '& .oskw-image-card .oskw-info .oskw-date': { color: 'var(--color-gray-60)' },
-  
-  '& .oskw-image-card .oskw-img-wrapper': {
-    width: '100%',
-    height: 'auto',
-    overflow: 'hidden',
-  },
-  
-   '& .oskw-image-card .oskw-img-wrapper img': {
-    width: '100%',
-    height: 'auto',
-  }
-  
-})
-
 export const ImageCard = ({
   title,
   subTitle,
@@ -75,7 +12,71 @@ export const ImageCard = ({
   ...props
 }) => {
   return (
-    <Container {...props} {...styles}>
+    <Container {...props} data-image-card>
+      <style href="@ossy/design-system/image-card" precedence="high">
+      {`
+        [data-image-card] {
+          --color-gray-40: hsl(0, 0%, 40%);
+          --color-gray-60: hsl(0, 0%, 60%);
+          --space-inset-s: 8px 8px 8px 8px;
+          --space-inset-squish-s: 4px 8px 4px 8px;
+          --space-inset-stretch-s: 12px 8px 12px 8px;
+        
+          display: block;
+          padding: var(--space-inset-s);
+          transition: transform .3s ease, opacity .3s ease;
+        }
+        
+        [data-image-card] * {
+          box-sizing: border-box;
+        }
+        
+        [data-image-card] .oskw-inner-content {
+          display:' block;
+          text-decoration: none;
+          background: hsl(0, 0%, 100%);
+          box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
+          transition: transform .3s ease;
+          border-radius: 10px;
+          overflow: hidden;
+        }
+        
+        [data-image-card] .oskw-inner-content:hover {
+          transform: scale(1.01);
+        }
+        
+        [data-image-card] .oskw-inner-content img {
+          border: none;
+          display: block;
+        }
+        
+        [data-image-card] .oskw-info {
+          padding: var(--space-inset-stretch-s);
+          line-height: 1.5;
+          font-size: .9rem;
+          font-family: sans-serif;
+        }
+        
+        [data-image-card] .oskw-info .oskw-title {
+          font-size: 1rem;
+          color: var(--color-gray-40);
+        }
+        
+        [data-image-card] .oskw-info .oskw-date { color: var(--color-gray-60); },
+        
+        [data-image-card] .oskw-img-wrapper {
+          width: 100%;
+          height: auto;
+          overflow: hidden;
+        }
+        
+        [data-image-card] .oskw-img-wrapper img {
+          width: 100%;
+          height: auto;
+        }
+        
+      `}
+      </style>
       <a className="oskw-inner-content" href={href} target={target}>
         <div className="oskw-body">
           <div className="oskw-img-wrapper">

package/src/index.js

@@ -1,7 +1,6 @@
 export * from './hooks'
 export * from './sections'
 
-export * from './layout'
 export * from './page'
 export * from './page-section'
 export * from './separator'
@@ -17,7 +16,6 @@ export * from './image-card'
 export * from './inputs'
 export * from './overlay'
 export * from './stack'
-export * from './surface'
 export * from './text'
 export * from './title'
 export * from './breadcrumbs'

package/src/inputs/Input.jsx

@@ -1,80 +1,124 @@
 import React from 'react'
-import { css } from 'glamor'
 import { View } from '../view'
 import { Text } from '../text'
 import { Button } from '../button'
 
-const inputStyles = css({
-  padding: '8px 16px',
-  borderWidth: '2px',
-  borderStyle: 'solid',
-  borderColor: 'hsla(0, 0%, 75%, .1)',
-  borderRadius: '5px',
-  fontSize: '16px',
-  boxShadow: '0 3px 6px hsla(0, 0%, 75%, 1)',
-  '[disabled]': {
-    cursor: 'not-allowed',
-    color: 'hsl(0, 0%, 85%)',
-    backgroundColor: 'hsl(0, 0%, 85%)'
-  }
-})
-
-const input2Styles = css({
-  padding: '8px 16px',
-  borderWidth: '1px',
-  borderStyle: 'solid',
-  borderColor: 'hsl(0, 0%, 90%)',
-  borderRadius: '99999px',
-  fontSize: '16px',
-  lineHeight: '1',
-  ':focus': {
-    outline: 'none',
-    boxShadow: '0 0 0 2px hsl(199, 98%, 43%)',
-  }
-})
+export const Input = props => (
+  <>
+    <style href="@ossy/design-system/input" precedence='high'>
+    {`
+      [data-component="input"] {
+        padding: 8px 16px;
+        border-width: 2px;
+        border-style: solid;
+        border-color: hsla(0, 0%, 75%, .1);
+        border-radius: 5px;
+        font-size: 16px;
+        box-shadow: 0 3px 6px hsla(0, 0%, 75%, 1);
+      }
 
-const textarea2Styles = css({
-  height: '120px',
-  width: '100%',
-  fontFamily: 'sans-serif',
-  padding: '8px 16px',
-  borderWidth: '1px',
-  borderStyle: 'solid',
-  borderColor: 'hsl(0, 0%, 90%)',
-  borderRadius: '16px',
-  fontSize: '16px',
-  lineHeight: '1',
-  ':focus': {
-    outline: 'none',
-    boxShadow: '0 0 0 2px hsl(199, 98%, 43%)',
-  }
-})
-
-const inputTitleStyle = css({
-  fontFamily: 'sans-serif',
-  lineHeight: 1,
-  fontSize: '16px',
-  border: 'none',
-  backgroundColor: 'transparent'
-})
+      [data-component="input"][disabled] {
+        cursor: not-allowed;
+        color: hsl(0, 0%, 85%);
+        background-color: hsl(0, 0%, 85%);
+      }
+    `}
+    </style>
+    <input data-component="input" {...props}/>
+  </>
+)
 
-export const Input = props =>
-  <input {...inputStyles} {...props}/>
+export const InputTitle = props => (
+  <>
+    <style href="@ossy/design-system/input-title" precedence='high'>
+    {`
+      [data-component="input-title"] {
+        font-family: sans-serif;
+        line-height: 1;
+        font-size: 16px;
+        border: none;
+        background-color: transparent;
+      }
+    `}
+    </style>
+    <input data-component="input-title" {...props}/>
+  </>
+)
 
-export const InputDisabled = props =>
-  <input disabled {...inputStyles} {...props} />
+export const Input2 = props => (
+  <>
+    <style href="@ossy/design-system/input2" precedence='high'>
+    {`
+      [data-component="input2"] {
+        padding: 8px 16px;
+        border-width: 1px;
+        border-style: solid;
+        border-color: hsl(0, 0%, 90%);
+        border-radius: 99999px;
+        font-size: 16px;
+        line-height: 1;
+      }
 
-export const InputTitle = props =>
-  <input {...inputTitleStyle} {...props}/>
+      [data-component="input2"]:focus {
+        outline: none;
+        boxShadow: 0 0 0 2px hsl(199, 98%, 43%);
+      }
+    `}
+    </style>
+    <input data-component="input2" {...props}/>
+  </>
+)
 
-export const Input2 = props =>
-  <input {...input2Styles} {...props}/>
+export const Textarea = props => (
+  <>
+    <style href="@ossy/design-system/textarea" precedence='high'>
+    {`
+      [data-component="textarea"] {
+        height: 120px;
+        width: 100%;
+        font-family: sans-serif;
+        padding: 8px 16px;
+        border-width: 1px;
+        border-style: solid;
+        border-color: hsl(0, 0%, 90%);
+        border-radius: 16px;
+        font-size: 16px;
+        line-height: 1;
+      }
+      
+      [data-component="textarea"]:focus {
+        outline: none;
+        box-shadow: 0 0 0 2px hsl(199, 98%, 43%);
+      }
+    `}
+    </style>
+    <textarea data-component="textarea" {...props}/>
+  </>
+)
 
-export const Textarea = props =>
-  <textarea {...textarea2Styles} {...props}/>
+export const Select = props => (
+  <>
+  <style href="@ossy/design-system/input2" precedence='high'>
+    {`
+      [data-component="input2"] {
+        padding: 8px 16px;
+        border-width: 1px;
+        border-wtyle: solid;
+        border-color: hsl(0, 0%, 90%);
+        border-radius: 99999px;
+        font-size: 16px;
+        line-height: 1;
+      }
 
-export const Select = props =>
-  <select {...input2Styles} {...props}/>
+      [data-component="input2"]:focus {
+        outline: none;
+        boxShadow: 0 0 0 2px hsl(199, 98%, 43%);
+      }
+    `}
+    </style>
+    <select data-component="input2" {...props}/>
+  </>
+)
 
 const displayNone = css({
   display: 'none'

package/src/inputs/Input.stories.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Input, InputDisabled, InputTitle, Input2, Textarea, Select, Upload } from './Input.jsx'
+import { Input, InputTitle, Input2, Textarea, Select, Upload } from './Input.jsx'
 import { View } from '../view'
 
 export default {
@@ -10,7 +10,6 @@ export default {
 const Story = () => (
   <View gap="m" style={{ alignItems: 'center', justifyContent: 'center' }}>
     <Input />
-    <InputDisabled />
     <InputTitle />
     <Input2 />
     <Textarea />

package/src/overlay/Overlay.jsx

@@ -1,49 +1,16 @@
-import React, { useState, useEffect, forwardRef, useMemo } from 'react'
+import React, { useState, useEffect, forwardRef } from 'react'
 import { createPortal } from 'react-dom'
-import { css } from 'glamor'
 
 const overlayRootId = 'ossy-overlay-root'
 
-const defaultOverlayStyles = {
-  width: '100%',
-  height: '100%',
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  overflow: 'hidden',
-  background: 'hsla(0, 0%, 0%, .8)',
-  zIndex: '100',
-}
-
-const overlayContentStyles = {
-  display: 'contents'
-}
-
-let fadeInAnimation = css.keyframes({ 
-  '0%': { transform: 'scale(1)', opacity: 0 },
-  '60%': { transform: 'scale(1)',},
-  '100%': { opacity: 1 }
-})
-
-const fadeIn = css({
-  animation: `${fadeInAnimation} ease .3s`,
-  animationIterationCount: 1,
-  animationFillMode: 'forwards',
-})
-
 export const Overlay = forwardRef(({
   children,
   isVisible = false,
   onClose = () => {},
-  style: overriddenOverlayStyles = {}
+  ...props
 }, ref) => {
   const [overlayRoot, setOverlayRoot] = useState()
 
-  const overlayStyles = useMemo(() => ({
-    ...defaultOverlayStyles,
-    ...overriddenOverlayStyles
-  }), [overriddenOverlayStyles])
-
   const onContentClick = event => {
     event.stopPropagation()
   }
@@ -60,12 +27,43 @@ export const Overlay = forwardRef(({
 
   return (
     <>
+      <style href="@ossy/design-system/overlay" precedence="high">
+      {`
+        [data-overlay] {
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          top: 0;
+          left: 0;
+          overflow: hidden;
+          background: hsla(0, 0%, 0%, .8);
+          z-index: 100;
+        }
+
+        [data-overlay-content] {
+          display: contents
+        }
+
+        @keyframes fade-in {
+          0% { opacity: 0 }
+          100% { opacity: 1 }
+        }
+
+        [data-animation="fade-in"] {
+          animation-name: fade-in;
+          animation-duration: .3s;
+          animation-iteration-count: 1;
+          animation-fill-mode: forwards;
+          animation-timing-function: ease-out;
+        }
+      `}
+      </style>
       {
         isVisible
         && !!overlayRoot
         && createPortal(
-          <div ref={ref} onClick={onClose} style={overlayStyles} {...fadeIn}>
-            <div onClick={onContentClick} style={overlayContentStyles}>
+          <div ref={ref} onClick={onClose} data-overlay data-animation="fade-in" {...props}>
+            <div onClick={onContentClick} data-overlay-content >
               {children}
             </div>
           </div>,

package/src/profile-card/ProfileCard.jsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { css } from 'glamor'
 import { Icon } from '../icon'
 import { Button } from '../button'
 import { Text } from '../text'
@@ -7,43 +6,6 @@ import { Title } from '../title'
 import { Card } from '../card'
 import { Tags } from '../tags'
 
-const styles = css({
-  minHeight: '0',
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  gap: 'var(--space-l)',
-  scrollbarWidth: 'none',
-  overflowY: 'auto',
-
-  '::-webkit-scrollbar': { display: 'none' },
-
-  '& .titles': {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    gap: 'var(--space-s)',
-    textAlign: 'center'
-  },
-
-  '& .tags': {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    gap: 'var(--space-m)',
-    maxWidth: '600px'
-  },
-
-  '& img': {
-    borderRadius: '50%',
-    width: '50%',
-    maxWidth: '200px',
-    height: 'auto',
-    margin: '0 auto',
-  }
-
-})
-
 export const ProfileCard = ({
   name = '',
   role = '',
@@ -57,7 +19,50 @@ export const ProfileCard = ({
   onTagClick = () => {},
   ...props
 }) => (
-  <Card data-scroll variant={cardVariant} {...styles} {...props}>
+  <Card data-scroll variant={cardVariant} data-profile-card {...props}>
+
+    <style href="@ossy/design-system/profile-card" precedence="high">
+    {`
+      [data-profile-card] {
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--space-l);
+        scrollbar-width: none;
+        overflow-y: auto;
+      }
+
+
+      [data-profile-card]::-webkit-scrollbar {
+        display: none;
+      }
+
+      [data-profile-card] .titles {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--space-s);
+        text-align: center'
+      }
+
+      [data-profile-card] .tags {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--space-m);
+        max-width: 600px;
+      }
+
+      [data-profile-card] img {
+        border-radius: 50%;
+        width: 50%;
+        max-width: 200px;
+        height: auto;
+        margin: 0 auto;
+      }
+    `}
+    </style>
 
     <img src={image} alt={name} />