@ossy/design-system 0.0.4-alpha → 0.0.4

package/src/image-card/ImageCard.jsx

@@ -0,0 +1,99 @@
+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,
+  src,
+  placeholderSrc,
+  href,
+  target,
+  as: Container = 'div',
+  ...props
+}) => {
+  return (
+    <Container {...props} {...styles}>
+      <a className="oskw-inner-content" href={href} target={target}>
+        <div className="oskw-body">
+          <div className="oskw-img-wrapper">
+            <Image
+              src={src}
+              alt={title}
+              placeholderSrc={placeholderSrc}
+            />
+          </div>
+          {(!!title || !!subTitle) && (
+            <header className="oskw-info">
+              { !!title && <h5 className="oskw-title">{title}</h5> }
+              { !!subTitle && <span className="oskw-date">{subTitle}</span> }
+            </header>
+          )}
+        </div>
+      </a>
+    </Container>
+  )
+
+}

package/src/image-card/index.js

@@ -0,0 +1 @@
+export * from './ImageCard.jsx'

package/src/index.js

@@ -13,6 +13,7 @@ export * from './dropdown'
 export * from './icon'
 export * from './icons/Icon2.jsx'
 export * from './image'
+export * from './image-card'
 export * from './inputs'
 export * from './overlay'
 export * from './stack'

package/src/inputs/Input.stories.jsx

@@ -3,7 +3,7 @@ import { Input, InputDisabled, InputTitle, Input2, Textarea, Select, Upload } fr
 import { View } from '../view'
 
 export default {
-  title: 'Design System/Input',
+  title: 'Other/Input',
   component: Input,
 }
 

package/src/layout/Layout.stories.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Layout } from './Layout.jsx'
 
 export default {
-  title: 'Design System/Layout',
+  title: 'Other/Layout',
   component: Layout,
 }
 

package/src/overlay/overlay.stories.jsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { Overlay } from './Overlay.jsx'
 
 export default {
-  title: 'Design System/Overlay',
+  title: 'Other/Overlay',
   component: Overlay
 }
 

package/src/page/Page.stories.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Page } from './Page.jsx'
 
 export default {
-  title: 'Design System/Page',
+  title: 'Other/Page',
   component: Page,
 }
 

package/src/page-section/PageSection.jsx

@@ -1,13 +1,5 @@
 import React from 'react'
 import { View } from '../view'
-import { css } from 'glamor'
-
-const layoutStyles = css({
-  marginLeft: 'auto',
-  marginRight: 'auto',
-  width: '100%',
-  height: '100%',
-})
 
 export const PageSection = ({
   surface,
@@ -23,22 +15,34 @@ export const PageSection = ({
 }) => {
 
   return (
-    <View
-      surface={surface}
-      as={surfaceAs}
-      style={{ width: '100%', ...style }}
-      {...props}
-    >
+    <>
+      <style href='@ossy/design-system/page-section'>
+        {`
+          [data-page-section-alignment] {
+            margin-left: auto;
+            margin-right: auto;
+            width: 100%;  
+            height: 100%;
+          }
+        `}
+      </style>
       <View
-        layout={layout}
-        placeItems={placeItems}
-        placeContent={placeContent}
-        gap={gap}
-        {...layoutStyles}
-        style={{ maxWidth: `var(--max-width-${maxWidth}, 100%)` }}
+        surface={surface}
+        as={surfaceAs}
+        style={{ width: '100%', ...style }}
+        {...props}
       >
-        {children}
+        <View
+          layout={layout}
+          placeItems={placeItems}
+          placeContent={placeContent}
+          gap={gap}
+          style={{ maxWidth: `var(--max-width-${maxWidth}, 100%)` }}
+          data-page-section-alignment
+        >
+          {children}
+        </View>
       </View>
-    </View>
+    </>
   )
 }

package/src/page-section/PageSection.stories.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { PageSection } from './PageSection.jsx'
 
 export default {
-  title: 'Design System/PageSection',
+  title: 'Other/PageSection',
   component: PageSection,
 };
 

package/src/profile-card/ProfileCard.stories.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { ProfileCard } from './ProfileCard.jsx'
 
 export default {
-  title: 'Design System/ProfileCard',
+  title: 'Other/ProfileCard',
   component: ProfileCard,
   parameters: {
    layout: 'fullscreen',

package/src/resume-experience/ResumeExperience.stories.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { ResumeExperience } from './ResumeExperience.jsx'
 
 export default {
-  title: 'Design System/ResumeExperience',
+  title: 'Other/ResumeExperience',
   component: ResumeExperience,
 }
 

package/src/sections/contact/EmailContact.stories.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { EmailContact } from './EmailContact.jsx'
 
 export default {
-  title: 'Design System/Sections/Contact/Email Contact',
+  title: 'Other/Sections/Contact/Email Contact',
   component: EmailContact,
 }
 

package/src/sections/footer/Footer.stories.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Footer } from './Footer.jsx'
 
 export default {
-  title: 'Design System/Sections/Footer/Footer',
+  title: 'Other/Sections/Footer/Footer',
   component: Footer,
 }
 

package/src/sections/footer/SimpleFooter.stories.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { SimpleFooter } from './SimpleFooter.jsx'
 
 export default {
-  title: 'Design System/Sections/Footer/Simple',
+  title: 'Other/Sections/Footer/Simple',
   component: SimpleFooter,
   parameters: {
    layout: 'fullscreen',

package/src/sections/header/Header.stories.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Header } from './Header.jsx'
 
 export default {
-  title: 'Design System/Sections/Header/Header',
+  title: 'Other/Sections/Header/Header',
   component: Header,
 }
 

package/src/sections/hero/Hero.stories.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Hero } from './Hero.jsx'
 
 export default {
-  title: 'Design System/Sections/Hero/Hero',
+  title: 'Other/Sections/Hero/Hero',
   component: Hero,
 }
 

package/src/separator/Separator.stories.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Separator } from './Separator.jsx'
 
 export default {
-  title: 'Design System/Separator',
+  title: 'Other/Separator',
   component: Separator,
 }
 

package/src/stack/stack.stories.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Stack } from './Stack'
 
 export default {
-  title: 'Design System/Stack',
+  title: 'Other/Stack',
   component: Stack,
 }
 

package/src/surface/surface.stories.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Surface } from './Surface'
 
 export default {
-  title: 'Design System/Surface',
+  title: 'Other/Surface',
   component: Surface,
 };
 

package/src/switch/switch.stories.jsx

@@ -3,7 +3,7 @@ import { useState } from 'react'
 import { Switch } from './Switch'
 
 export default {
-  title: 'Design System/Switch',
+  title: 'Other/Switch',
   component: Switch,
 }
 

package/src/table/Table.stories.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Table } from './Table.jsx'
 
 export default {
-  title: 'Design System/Table',
+  title: 'Other/Table',
   component: Table,
   args: {
     activeTabId: 'English',

package/src/tabs/Tabs.stories.jsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { Tabs } from './Tabs.jsx'
 
 export default {
-  title: 'Design System/Tabs',
+  title: 'Other/Tabs',
   component: Tabs,
   args: {
     activeTabId: 'English',

package/src/tags/Tags.jsx

@@ -1,31 +1,19 @@
 import React from 'react'
-import { css } from 'glamor'
 import { Button } from '../button'
 
-const tagsStyles = css({
-  listStyle: 'none',
-  userSelect: 'none',
-  padding: '0',
-  margin: '0'
-})
-
-const tagStyles = css({
-  display: 'inline-block',
-  margin: 'var(--space-xs)',
-})
-
 export const Tag = ({
   onSelect = () => {},
   active,
   ...props
-}) =>
-  <li {...tagStyles} >
+}) => (
+  <li>
     <Button
       variant={active ? 'tag-active' : 'tag'}
       onClick={() => onSelect(props.children)}
       {...props}
     />
   </li>
+)
 
 const alphabeticalAscending = (a, b) => {
   return a.localeCompare(b)
@@ -40,7 +28,25 @@ export const Tags = ({
   const sortedTags = [...tags].sort(alphabeticalAscending)
 
   return (
-    <ul {...tagsStyles} {...props}>
+    <>
+
+    <style href="@ossy/design-system/tags" precedence="low">
+    {`
+      [data-tags] {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--space-xs);
+        list-style: none;
+        user-select: none;
+        padding: 0;
+        margin: 0;
+      }
+    `}
+    </style>
+
+    <meta name="keywords" content={tags.join(',')} />
+
+    <ul data-tags {...props}>      
       {sortedTags.map(tag => (
         <Tag
           key={tag}
@@ -50,5 +56,6 @@ export const Tags = ({
         </Tag>
       ))}
     </ul>
+    </>
   )
 }

package/src/tags/Tags.stories.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Tags } from './Tags.jsx'
 
 export default {
-  title: 'Design System/Tags',
+  title: 'Other/Tags',
   component: Tags,
 }
 

package/src/text/Text.jsx

@@ -1,48 +1,57 @@
-import React, { useMemo } from 'react'
-import { css } from 'glamor'
+import React from 'react'
 
 export const Text = ({
   as: Element = 'p',
-  variant,
+  variant = 'default',
   maxWidth = 'full',
   text,
   children,
   ...props
 }) => {
-
-  const textStyles = useMemo(() => {
-    return css({
-      '--max-width': `var(--text-${variant}-max-width, var(--text-default-max-width, 100%))`,
-      '--color': `var(--text-${variant}-color, var(--foreground, inherit))`,
-      '--font-family': `var(--text-${variant}-font-family, var(--text-default-font-family, sans-serif))`,
-      '--font-size': `var(--text-${variant}-font-size, var(--text-default-font-size, 2rem))`,
-      '--font-weight': `var(--text-${variant}-font-weight, var(--text-default-font-weight, 400))`,
-      '--line-height': `var(--text-${variant}-line-height, var(--text-default-line-height, 1.6))`,
-      '--margin-bottom': `var(--text-${variant}-margin-bottom, var(--text-default-margin-bottom, 1rem))`,
-      '--letter-spacing': `var(--text-${variant}-letter-spacing, var(--text-default-letter-spacing))`,
-
-      maxWidth: `var(--max-width-${maxWidth})`,
-
-      display: 'block',
-      boxSizing: 'border-box',
-      // overflow: 'hidden',
-
-      color: 'var(--color)',
-      fontFamily: 'var(--font-family)',
-      fontSize: 'var(--font-size)',
-      fontWeight: 'var(--font-weight)',
-      lineHeight: 'var(--line-height)',
-      letterSpacing: 'var(--letter-spacing)',
-
-      margin: 0,
-      marginBottom: 'var(--margin-bottom)',
-
-      ':last-of-type': {
-        marginBottom: '0'
-      }
-
-    })
-  }, [variant])
-
-  return <Element children={children || text} {...props} {...textStyles} />
+  return (
+    <>
+      <style href={`@ossy/design-system/max-width/${maxWidth}`} precedence='high'>
+      {`
+        [data-max-width="${maxWidth}"] {
+          maxWidth: var(--max-width-${maxWidth})
+        }
+      `}
+      </style>
+      <style href="@ossy/design-system/text" precedence='high'>
+      {`
+        [data-text] {
+          display: block;
+          box-sizing: border-box;
+          color: var(--color);
+          font-family: var(--font-family);
+          font-size: var(--font-size);
+          font-weight: var(--font-weight);
+          line-height: var(--line-height);
+          letter-spacing: var(--letter-spacing);
+          margin: 0;
+          margin-bottom: var(--margin-bottom);
+        }
+
+        [data-text]:last-of-type {
+          marginBottom: 0
+        }
+      `}
+      </style>
+      <style href={`@ossy/design-system/text/${variant}`} precedence='high'>
+      {`
+        [data-text-variant="${variant}"] {
+          --max-width: var(--text-${variant}-max-width, var(--text-default-max-width, 100%));
+          --color: var(--text-${variant}-color, var(--foreground, inherit));
+          --font-family: var(--text-${variant}-font-family, var(--text-default-font-family, sans-serif));
+          --font-size: var(--text-${variant}-font-size, var(--text-default-font-size, 2rem));
+          --font-weight: var(--text-${variant}-font-weight, var(--text-default-font-weight, 400));
+          --line-height: var(--text-${variant}-line-height, var(--text-default-line-height, 1.6));
+          --margin-bottom: var(--text-${variant}-margin-bottom, var(--text-default-margin-bottom, 1rem));
+          --letter-spacing: var(--text-${variant}-letter-spacing, var(--text-default-letter-spacing));
+        }
+      `}
+      </style>
+      <Element data-text data-text-variant={variant} children={children || text} {...props} />
+    </>
+  )
 }

package/src/text/Text.stories.jsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { Text } from './Text.jsx'
 
 export default {
-  title: 'Design System/Text',
+  title: 'Other/Text',
   component: Text,
 }
 

package/src/theme/Theme.jsx

@@ -48,11 +48,13 @@ export const Theme = ({
   theme,
   themes = {},
   elementSelector = ':root',
+  children,
   ...props
 }) => {
   const _themes = typeof theme === 'object' ? { default: theme } : themes
   const previousTheme = useRef()
   const [activeTheme, setTheme] = useState(() => typeof theme === 'object' ? 'default' : theme)
+  const activeThemeValues = _themes[activeTheme]
 
   useEffect(() => {
     if (!activeTheme) return
@@ -69,20 +71,20 @@ export const Theme = ({
     // addCssProperties(element, mergeDeepRight(Standard, themeValues))
     addCssProperties(element, themeValues)
 
-    const styleElement = document.createElement('style')
-    styleElement.id = 'temp-theme'
-    styleElement.textContent = createCss(themeValues)
-    element.appendChild(styleElement)
+    // const styleElement = document.createElement('style')
+    // styleElement.id = 'temp-theme'
+    // styleElement.textContent = createCss(themeValues)
+    // element.appendChild(styleElement)
   }, [activeTheme, _themes, elementSelector])
 
-  return <ThemeContext.Provider
-    value={{
-      activeTheme,
-      themes: Object.keys(_themes),
-      setTheme,
-    }}
-    {...props}
-  />
+  return (
+    <ThemeContext.Provider value={{ activeTheme, themes: Object.keys(_themes), setTheme, }} {...props}>
+      <style href={`@ossy/design-system/theme/${activeTheme}`}>
+        {createCss(activeThemeValues)}
+      </style>
+      {children}
+    </ThemeContext.Provider>
+  )
 }
 
 export const useTheme = () => useContext(ThemeContext)

package/src/theme/Theme.stories.jsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Theme, useTheme } from './Theme'
 
 export default {
-  title: 'Design System/Theme',
+  title: 'Other/Theme',
   component: Theme,
 }
 

package/src/theme/standard.js

@@ -34,8 +34,8 @@ export const Standard = {
   surfaces: {
 
     base: {
-      // background: 'var(--color-base)',
-      background: 'tomato'
+      background: 'var(--color-base)',
+      // background: 'tomato'
     }
 
   },