@ossy/design-system 0.1.3 → 0.1.5

package/src/text/Text.jsx

@@ -1,57 +0,0 @@
-import React from 'react'
-
-export const Text = ({
-  as: Element = 'p',
-  variant = 'default',
-  maxWidth = 'full',
-  text,
-  children,
-  ...props
-}) => {
-  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, 0));
-          --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

@@ -1,18 +0,0 @@
-import React, { useState } from 'react'
-import { Text } from './Text.jsx'
-
-export default {
-  title: 'Display/Text',
-  component: Text,
-}
-
-const Story = props => {
-  return (
-    <Text {...props} >
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis massa eget mauris posuere feugiat. Duis non posuere mauris, a dictum nisi. Nam et turpis ut sem aliquam hendrerit et non risus. Curabitur id varius dui, at interdum lectus. Vivamus dui arcu, consectetur vel suscipit vitae, maximus et eros. Integer mauris urna, vestibulum id viverra rutrum, varius eleifend est. Vestibulum pellentesque magna vel sapien ornare fringilla. Quisque pellentesque diam ex, quis fermentum felis varius nec. Nam pulvinar tortor turpis, in auctor tortor lobortis a. Sed viverra faucibus finibus. Phasellus neque enim, semper et sapien non, elementum varius lectus. Donec interdum dolor libero, non posuere ipsum imperdiet ut. Nullam erat leo, tincidunt vitae libero sed, fringilla sagittis leo.
-    </Text>
-  )
-}
-
-export const Default = Story.bind({})
-Default.args = { as: 'p' }

package/src/text/index.js

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

package/src/theme/Theme.jsx

@@ -1,96 +0,0 @@
-import React, {
-  useEffect,
-  useState,
-  createContext,
-  useContext,
-  useRef
-} from 'react'
-import { createCss } from './createCss.js'
-
-const getCssVars = (styleObject, cssVars = [], _previousPath = '') => {
-
-  return Object.entries(styleObject).map(([key, value]) => {
-
-    if (typeof value === 'object') {
-      return !!_previousPath
-        ? getCssVars(value, cssVars, `${_previousPath}-${key}`)
-        : getCssVars(value, cssVars, `--${key}`)
-    } else if (!!_previousPath) {
-      return { [`${_previousPath}-${key}`]: value }
-    } else {
-      return { [`--${key}`]: value }
-    }
-  }).flat()
-
-}
-
-export const addCssProperties = (element, styleObject) => {
-  getCssVars(styleObject)
-    .flatMap(x => Object.entries(x))
-    .forEach(([name, value]) => {
-      element.style.setProperty(name, value)
-  })
-}
-
-export const removeCssProperties = (element, styleObject) => {
-  getCssVars(styleObject)
-    .flatMap(x => Object.entries(x))
-    .forEach(([name, value]) => {
-      element.style.removeProperty(name)
-  })
-}
-
-const ThemeContext = createContext({})
-
-export const Theme = ({
-  theme,
-  themes = {},
-  elementSelector = ':root',
-  children,
-  ...props
-}) => {
-  const _themes = typeof theme === 'object' ? { default: theme } : themes
-  const [activeTheme, setTheme] = useState(() => typeof theme === 'object' ? 'default' : theme)
-  const activeThemeValues = _themes[activeTheme]
-
-  return (
-    <ThemeContext.Provider value={{ activeTheme, themes: Object.keys(_themes), setTheme, }} {...props}>
-      <style href="@ossy/design-system/surface" precedence='high'>
-      {`
-        [data-surface] {
-          background: var(--background, trasparent);
-          color: var(--foreground);
-          fill: var(--foreground);
-          backdrop-filter: var(--backdropFilter);
-          transition: background .3s, color .3s, fill .3s;
-        }
-
-        [data-surface="neutral"] {
-          --background: transparent;
-          --backdropFilter: none;
-        }
-
-        [data-selectable] {
-          cursor: pointer;
-        }
-
-        [data-selectable]:hover {
-          --background: var(--background-hover);
-          --foreground: var(--foreground-hover);
-        }
-
-        [data-selectable]:active {
-          --background: var(--background-active);
-          --foreground: var(--foreground-active);
-        }
-      `}
-      </style>
-      <style href={`@ossy/design-system/theme/${activeTheme}`}>
-        {createCss(activeThemeValues)}
-      </style>
-      {children}
-    </ThemeContext.Provider>
-  )
-}
-
-export const useTheme = () => useContext(ThemeContext)

package/src/theme/Theme.stories.jsx

@@ -1,69 +0,0 @@
-import React from 'react'
-import { Theme, useTheme } from './Theme'
-
-export default {
-  title: 'Base/Theme',
-  component: Theme,
-}
-
-const Story = (args) => (
-  <div id={args.elementSelector.replace('#', '')}>
-    <Theme {...args}>
-      <div style={{
-        width: '50px',
-        height: '50px',
-        background: 'var(--surface-primary)',
-      }}/>
-    </Theme>
-  </div>
-)
-
-const ThemeSwitcher = () => {
-  const { activeTheme, setTheme, themes } = useTheme()
-  return (
-    <div>
-      <div>Active theme: {activeTheme}</div>
-      {
-        themes.map(themeName => <button onClick={() => setTheme(themeName)}>{themeName}</button>)
-      }
-    </div>
-  )
-}
-
-const MultiThemeStory = (args) => (
-  <div id={args.elementSelector.replace('#', '')}>
-    <Theme {...args}>
-      <div style={{
-        width: '50px',
-        height: '50px',
-        background: 'var(--surface-primary)',
-      }}/>
-      <ThemeSwitcher/>
-    </Theme>
-  </div>
-)
-
-export const SingleTheme = Story.bind({})
-SingleTheme.args = {
-  elementSelector: "#single-theme-root",
-  theme: {
-    "surface-primary": 'tomato'
-  }
-}
-
-export const MultipleThemes = MultiThemeStory.bind({})
-MultipleThemes.args = {
-  elementSelector: "#multi-theme-root",
-  theme: 'light',
-  themes: {
-    light: {
-      "surface-primary": 'lightblue'
-    },
-    dark: {
-      "surface-primary": 'hsl(0, 0%, 20%)'
-    },
-    tomato: {
-      "surface-primary": 'tomato'
-    }
-  }
-}

package/src/theme/createCss.js

@@ -1,120 +0,0 @@
-import { toHsl } from './toHsl'
-
-const createSurfacesCss = theme => css => {
-  const surfaces = theme.surfaces
-  if (!surfaces) return ''
-  return Object.entries(surfaces)
-    .reduce((css, [surfaceName, rules]) => {
-      const vars = createCssVars(addSurfaceDefaults(rules))
-      return css + (
-`
-[data-surface="${surfaceName}"] {
-  ${vars}
-}
-`
-)}, css)
-}
-
-const createSpacingCss = theme => css => {
-  const { space } = theme
-  if (!space) return ''
-  const vars = createCssVars(Object.entries(space).reduce((acc, [key, value]) => ({...acc, [`space-${key}`]: value}), {}))
-  return css + (
-`
-  :root {
-    ${vars}
-  }
-`
-  )
-}
-
-const createMaxWidthCss = theme => css => {
-  const maxWidths = theme.maxWidth || theme['max-width']
-  if (!maxWidths) return ''
-  const vars = createCssVars(Object.entries(maxWidths).reduce((acc, [key, value]) => ({...acc, [`max-width-${key}`]: value}), {}))
-  return css + (
-`
-  :root {
-    ${vars}
-  }
-`
-  )
-}
-
-const createRestVars = theme => css => {
-  const vars = createCssVars(theme)
-  return css + (
-`
-  :root {
-    ${vars}
-  }
-`
-  )
-}
-
-export const createCss = (theme, options) => {
-  if (!theme) return ''
-  return [
-    createSpacingCss(theme),
-    createMaxWidthCss(theme),
-    createSurfacesCss(theme),
-    createRestVars({ ...theme, maxWidth: undefined, 'max-width': undefined, surfaces: undefined, space: undefined }),
-  ].reduce((css, fn) => fn(css), '')
-}
-
-function createCssVars(themePortion) {
-  if (!themePortion) return ''
-  return getCssVars(themePortion)
-    .flatMap(Object.entries)
-    .reduce((acc, [name, value]) => {
-      return acc + `${name}: ${value};\n`
-    }, '')
-}
-
-function getCssVars(styleObject, cssVars = [], _previousPath = '') {
-  return Object.entries(styleObject).map(([key, value]) => {
-
-    if (typeof value === 'object') {
-      return !!_previousPath
-        ? getCssVars(value, cssVars, `${_previousPath}-${key}`)
-        : getCssVars(value, cssVars, `--${key}`)
-    } else if (!!_previousPath) {
-      return { [`${_previousPath}-${key}`]: value }
-    } else {
-      return { [`--${key}`]: value }
-    }
-  }).flat()
-}
-
-
-export function differenciateColor(color) {
-  const [h, s, l, a = 1] = toHsl(color)
-  const isDark = l < 50
-  const isTransparent = a < 1
-  const isNeutral = s < 10
-  
-  const newl = isDark ? l + 5 : l - 5
-  return `hsla(${h}, ${s}%, ${newl}%, ${a})`
-}
-
-function addSurfaceDefaults(surface) {
-  const foreground = surface.foreground || 'hsl(182, 23%, 30%)'
-  // TODO: check if background is a color, it could be a gradient or image
-  const foregroundHover = surface['foreground-hover'] || differenciateColor(foreground)
-  const foregroundActive = surface['foreground-active'] || differenciateColor(foregroundHover)
-
-  const background = surface.background || 'hsl(0, 0%, 99%)'
-  const backgroundHover = surface['background-hover'] || differenciateColor(background)
-  const backgroundActive = surface['background-active'] || differenciateColor(backgroundHover)
-
-  return {
-    foreground: foreground,
-    'foreground-hover': foregroundHover,
-    'foreground-active': foregroundActive,
-    background: background,
-    'background-hover': backgroundHover,
-    'background-active': backgroundActive,
-    backdropFilter: 'saturate(180%) blur(10px)',
-    ...surface
-  }
-}

package/src/theme/index.js

@@ -1,2 +0,0 @@
-export * from './Theme.jsx'
-export * from './createCss.js'

package/src/theme/standard.js

@@ -1,285 +0,0 @@
-export const Standard = {
-
-  space: {
-    none: '0',
-    xxs: '2px',
-    xs: '4px',
-    s: '8px',
-    m: '16px',
-    l: '32px',
-    xl: '64px',
-    xxl: '128px',
-  },
-
-  'max-width': {
-    xxs: '320px',
-    xs: '414px',
-    s: '600px',
-    m: '900px',
-    l: '1200px',
-    xl: '1900px',
-    xxl: '2000px',
-    full: '100%',
-  },
-
-  color: {
-    base: 'hsl(199, 90%, 99%)',
-    primary: 'hsl(0, 0%, 100%)',
-    secondary: 'hsl(199deg 90% 98%)',
-    accent: 'hsl(167, 89%, 43%)',
-    info: 'hsl(199deg 89% 43%)',
-    danger: 'hsl(0 89% 43%)'
-  },
-
-  surfaces: {
-
-    base: {
-      background: 'var(--color-base)',
-      // background: 'tomato'
-    }
-
-  },
-
-  surface: {
-
-    'base': 'var(--color-base)',
-    'primary': 'var(--color-primary)',
-    'secondary': 'var(--color-secondary)',
-    'accent': 'var(--color-accent)',
-    'radial-gradient': 'radial-gradient(var(--color-base) 0%, var(--color-primary) 80%)',
-    'linear-gradient': 'linear-gradient(162deg, tomato 0%, tomato 100%)',
-  },
-
-  separator: {
-    primary: 'hsl(0, 0%, 95%)',
-    accent: 'hsl(167, 89%, 43%)'
-  },
-
-  title: {
-
-    default: {
-      'font-family': 'Roboto, sans-serif',
-      'letter-spacing': '1px'
-    },
-
-    display: {
-      'color': 'hsl(199, 90%, 10%)',
-      'font-weight': '900',
-      'line-height': '1.4',
-      'font-size': 'min(54px, max(3.35vw, 32px))'
-    },
-
-    primary: {
-      'color': 'hsl(199, 90%, 12%)',
-      'font-size': '2.5rem',
-      'font-weight': '900',
-      'line-height': '1.2',
-      'letter-spacing': '1px'
-    },
-
-    secondary: {
-      'color': 'hsl(199, 90%, 16%)',
-      'font-size': '1.5rem',
-      'font-weight': '900',
-      'line-height': '1.3',
-      'letter-spacing': '1px'
-    },
-
-    tertiary: {
-      'color': 'hsl(199, 20%, 32%)',
-      'font-size': '1.2rem',
-      'font-weight': '500',
-      'line-height': '1.4',
-      'letter-spacing': '0.25px'
-    },
-
-    lead: {
-      'color': 'var(--color-accent)',
-      'font-size': '1.3rem',
-      'font-weight': '400',
-      'line-height': '1.5'
-    },
-
-  },
-
-  text: {
-
-    default: {
-      'font-family': 'Roboto, sans-serif',
-      'font-weight': '300',
-      'font-size': '1.1rem',
-      'line-height': '1.6',
-      'color': 'hsl(182, 23%, 30%)'
-    },
-
-    small: {
-      'font-size': '.8rem',
-      'line-height': '1.2',
-    }
-
-  },
-
-  button: {
-
-    default: {
-      'font-family': 'Roboto, sans-serif',
-      'background': 'hsl(0, 0%, 95%)',
-      'color': 'hsl(0, 0%, 40%)',
-      'border-width': '2px',
-      'border-style': 'solid',
-      'border-color': 'transparent',
-      'border-radius': '16px',
-      'padding': '8px 24px',
-      'font-size': '16px',
-      'font-weight': '500',
-      'letter-spacing': '.7px',
-      'line-height': '1',
-
-      'background-hover': 'hsl(0, 0%, 90%)',
-      'color-hover': 'hsl(0, 0%, 20%)',
-
-      'background-disabled': 'hsl(0, 0%, 94%)',
-      'color-disabled': 'hsl(0, 0%, 50%)'
-    },
-
-    cta: {
-      'background': 'var(--color-accent)',
-      'color': 'var(--color-primary)',
-
-      'background-hover': 'hsl(167, 89%, 38%)',
-      'color-hover': 'hsl(0, 0%, 98%)'
-    },
-
-    link: {
-      'color': 'hsl(199deg 29% 23%)',
-      'font-weight': '300',
-      'background': 'transparent',
-      'border-color': 'transparent',
-
-      'background-hover': 'transparent',
-      'text-decoration-hover': 'underline'
-    },
-
-    tab: {
-      'background': 'transparent',
-      'border-style': 'solid',
-      'border-color': 'transparent',
-      'border-width': '4px 0 4px 0',
-      'border-radius': '0',
-      'padding': '16px 24px',
-
-      'color-hover': 'var(--color-accent)',
-      'background-hover': 'transparent',
-      'border-color-hover': 'transparent transparent hsl(167, 89%, 43%) transparent',
-
-      'border-color-focus': 'transparent transparent hsl(167, 89%, 43%) transparent'
-    },
-
-    'tab-active': {
-      'background': 'transparent',
-      'color': 'var(--color-accent)',
-      'border-style': 'solid',
-      'border-color': 'transparent transparent var(--color-accent) transparent',
-      'border-width': '4px 0 4px 0',
-      'border-radius': '0',
-      'padding': '16px 24px',
-
-      'background-hover': 'transparent',
-      'color-hover': 'var(--color-accent)',
-
-      'border-color-focus': 'transparent transparent hsl(167, 89%, 43%) transparent'
-    },
-
-    tag: {
-      'padding': 'var(--space-s) var(--space-m)',
-      'background': 'hsl(0, 0%, 95%)',
-      'color': 'hsl(0, 0%, 30%)',
-      'border-width': '1px',
-      'border-style': 'solid',
-      'border-color': 'var(--separator-primary)',
-      'border-radius': 'var(--space-m)',
-      'font-size': '.8rem',
-      'font-weight': '300',
-
-      'background-hover': 'hsl(0, 0%, 90%)'
-    },
-
-    'tag-active': {
-      'padding': 'var(--space-s) var(--space-m)',
-      'background': 'var(--color-accent)',
-      'color': 'var(--color-primary)',
-      'border-width': '1px',
-      'border-style': 'solid',
-      'border-color': 'var(--color-accent)',
-      'border-radius': 'var(--space-m)',
-      'font-size': '.8rem',
-      'font-weight': '300',
-
-      'background-hover': 'hsl(167, 89%, 38%)',
-      'color-hover': 'hsl(0, 0%, 98%)'
-    },
-
-  },
-
-  card: {
-
-    border: {
-      'background': 'transparent',
-      'border-color': 'var(--separator-primary)',
-      'border-style': 'solid',
-      'border-width': '1px',
-      'padding': 'var(--space-l)',
-      'border-radius': 'var(--space-s)'
-    },
-
-    shadow: {
-      'background': 'var(--color-primary)',
-      'border-radius': 'var(--space-s)',
-      'border-color': 'var(--separator-primary)',
-      'border-color': 'var(--color-accent)',
-      'border-style': 'solid',
-      'border-width': '0',
-      'box-shadow': '3px 0 10px hsla(0, 0%, 85%, .75)',
-    },
-
-    decorated: {
-      'background': 'var(--color-primary)',
-      'border-radius': 'var(--space-s)',
-      'border-color': 'var(--separator-primary)',
-      'border-color': 'var(--color-accent)',
-      'border-style': 'solid',
-      'border-width': '0 0 0 4px',
-      'box-shadow': '3px 0 10px hsla(0, 0%, 85%, .75)',
-    },
-
-    resume: {
-      'background': 'hsl(0, 0%, 100%)',
-      'border-color': 'var(--separator-primary)',
-      'border-style': 'solid',
-      'border-width': '0 1px 0 0',
-      'box-shadow': 'none',
-      'padding': '24px 32px',
-      'border-radius': '0'
-    },
-
-    hero: {
-      // 'background': `
-      //   ${topography},
-      //   linear-gradient(321deg, hsl(200, 80%, 85%) 0%, hsl(200, 100%, 97%) 20%, hsl(15, 100%, 95%) 80%, hsl(15, 100%, 85%) 100%)
-      // `,
-      'border-color': 'transparent',
-      'border-style': 'solid',
-      'border-width': '1px',
-      'box-shadow': '3px 0 10px hsla(0, 0%, 85%, .75)',
-      'padding': 'var(--space-xl) var(--space-m)',
-      'border-radius': '25px'
-    }
-
-  },
-
-  resume: {
-    'header-border-bottom': '1px solid var(--separator-primary)',
-    'header-padding': '0 24px',
-    'background': 'var(--surface-linear-gradient)'
-  }
-}