@ossy/themes 0.0.1-alpha → 0.0.2-alpha

package/src/plexus-sanitas.js

@@ -0,0 +1,253 @@
+import { Standard } from './standard.js'
+
+export const PlexusSanitas = {
+
+  space: Standard.space,
+  'max-width': Standard['max-width'],
+
+  surface: {
+    'primary': 'hsl(78, 33%, 99%)',
+    'secondary': 'hsl(80, 45%, 95%)',
+    'radial-gradient': 'radial-gradient(hsl(199deg 98% 85%) 0%, hsl(0deg 0% 100%) 80%)',
+    'linear-gradient': 'linear-gradient(162deg, hsl(0deg 0% 100%) 0%, hsl(199deg 98% 97%) 100%)',
+    'accent': 'hsl(99, 22%, 53%)',
+
+    "elevated": "hsl(78, 33%, 100%)",
+    "elevated-box-shadow": "2px 2px 5px hsla(0, 0%, 0%, .2)",
+
+    'decorated': `
+      bottom right/ contain no-repeat url('https://d1yuixo7x29bj4.cloudfront.net/vrSn7bi0_xiS9tYvtx9UN/dx36yLKqsgmJeOnPQia-1.png'),
+      bottom left/ contain no-repeat url('https://d1yuixo7x29bj4.cloudfront.net/vrSn7bi0_xiS9tYvtx9UN/zzMz3L7Ym5J4Y7Vyzm_iN.png'),
+      linear-gradient(180deg, hsl(201deg 100% 99%) 0%, hsl(60deg 20% 99%) 50%, 	hsl(80, 45%, 95%) 100%)
+    `,
+  },
+
+  separator: {
+    primary: 'hsl(0, 0%, 90%)',
+    accent: 'hsl(167, 89%, 43%)'
+  },
+
+  title: {
+
+    default: {
+      'font-family': "'Tilt Neon', sans-serif",
+    },
+
+    display: {
+      'font-weight': '400',
+      'line-height': '1.2',
+      'font-size': '2rem',
+      'color': "#f9a03f",
+    },
+
+    primary: {
+      'font-size': '2rem',
+      'font-weight': '400',
+      'line-height': '1.2',
+      'color': '#7ea16b',
+    },
+
+    secondary: {
+      'font-size': '1.5rem',
+      'font-weight': '200',
+      'line-height': '1.3',
+      'letter-spacing': '1px',
+      'color': 'hsl(58, 10%, 34%)',
+    },
+
+    tertiary: {
+      'font-size': '1.25rem',
+      'font-weight': '600',
+      'line-height': '1.4',
+      "color": "hsl(99, 22%, 53%)",
+    },
+
+    alt: {
+      'color': '#f9a03f',
+      'font-size': '2rem',
+      'font-weight': '400',
+    },
+
+    lead: {
+      'color': 'hsl(167, 89%, 43%)',
+      'font-size': '1.2rem',
+      'font-weight': '900',
+      'line-height': '1.5',
+      'letter-spacing': '0.15px'
+    },
+
+    logo: {
+      'font-weight': '700',
+      'font-size': '2rem',
+      'color': "#7ea16b",
+    },
+
+  },
+
+  text: {
+
+    default: {
+      'font-family': "'Tilt Neon', sans-serif",
+      'font-weight': '400',
+      'font-size': '1rem',
+      'line-height': '1.6',
+      'color': 'hsl(182, 23%, 30%)'
+    },
+
+    secondary: {
+      'color': 'hsl(58, 10%, 54%)'
+    },
+
+    small: {
+      'font-size': '.8rem',
+      'line-height': '1.2',
+    }
+
+  },
+
+  button: {
+
+    default: {
+      'background': 'hsl(99, 22%, 93%)',
+      'color': 'hsl(80, 45%, 40%)',
+      'border-width': '2px',
+      'border-style': 'solid',
+      'border-color': 'transparent',
+      'border-radius': '16px',
+      'padding': '8px 24px',
+      'font-family': 'Roboto, sans-serif',
+      'font-size': '16px',
+      'font-weight': '700',
+      'letter-spacing': '.7px',
+
+      'background-hover': 'hsl(99, 22%, 90%)',
+      'color-hover': 'hsl(0, 0%, 20%)',
+
+      'background-disabled': 'hsl(0, 0%, 94%)',
+      'color-disabled': 'hsl(0, 0%, 50%)'
+    },
+
+    cta: {
+      'background': 'hsl(99, 22%, 53%)',
+      'color': '#fff',
+
+      'background-hover': 'hsl(99, 22%, 43%)',
+      'color-hover': 'hsl(0, 0%, 98%)'
+    },
+
+    link: {
+      'background': 'transparent',
+      'color': 'hsl(80, 45%, 40%)',
+      'border-color': 'transparent',
+      "padding": '4px',
+      "font-weight": '400',
+      "font": "'Tilt Neon', sans-serif",
+
+      'background-hover': 'transparent',
+      'color-hover': 'hsl(99, 22%, 43%)'
+    },
+
+    tab: {
+      'font-family': '"Tilt Neon", sans-serif',
+      'color': 'hsl(80, 45%, 40%)',
+      'background': 'transparent',
+      'border-style': 'solid',
+      'border-color': 'transparent',
+      'border-width': '4px 0 4px 0',
+      'border-radius': '0',
+      'padding': '16px 24px',
+
+      'color-hover': 'hsl(90, 30%, 35%)',
+      'background-hover': 'hsl(99, 22%, 93%)',
+      'border-color-hover': 'transparent',
+
+      'border-color-focus': 'transparent',
+      'background-focus': 'hsl(99, 22%, 93%)',
+    },
+
+    'tab-active': {
+      'font-family': '"Tilt Neon", sans-serif',
+      'background': 'transparent',
+      'color': 'hsl(80, 45%, 40%)',
+      'border-style': 'solid',
+      'border-color': 'transparent',
+      'border-width': '4px 0 4px 0',
+      'border-radius': '0',
+      'padding': '16px 24px',
+
+      'background-hover': 'transparent',
+      'color-hover': 'hsl(167, 89%, 43%)',
+
+      'border-color-focus': 'transparent'
+    },
+
+    tag: {
+      'padding': '8px',
+      'background': 'hsl(0, 0%, 95%)',
+      'color': 'hsl(0, 0%, 30%)',
+      'border-width': '1px',
+      'border-style': 'solid',
+      'border-color': 'hsl(0, 0%, 90%)',
+      'border-radius': '4px',
+      'font-size': '12px',
+
+      'background-hover': 'hsl(0, 0%, 90%)'
+    },
+
+    'tag-active': {
+      'padding': '8px',
+      'background': 'hsla(199, 98%, 43%, .2)',
+      'color': 'hsl(0, 0%, 20%)',
+      'border-width': '1px',
+      'border-style': 'solid',
+      'border-color': 'hsl(199, 98%, 43%)',
+      'border-radius': '4px',
+      'font-size': '12px'
+    },
+
+  },
+
+  card: {
+
+    default: {
+      'background': 'hsl(78, 33%, 100%)',
+      'border-color': 'var(--separator-primary)',
+      'border-style': 'solid',
+      'border-width': '1px 0 0 1px',
+      'box-shadow': '3px 3px 0px 3px #7ea16b',
+      'padding': 'var(--space-l)',
+      'border-radius': '24px',
+    },
+
+    cover: {
+      'padding': '0',
+    },
+
+    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': 'var(--surface-linear-gradient)',
+      'border-color': 'transparent',
+      'border-style': 'solid',
+      'border-width': '1px',
+      'box-shadow': 'none',
+      'padding': 'var(--space-xl) var(--space-m)',
+      'border-radius': '8px'
+    }
+
+  },
+
+  resume: {
+    'header-border-bottom': '1px solid var(--separator-primary)',
+    'header-padding': '0 24px',
+    'background': 'var(--surface-linear-gradient)'
+  }
+}

package/src/public.index.js

@@ -0,0 +1,2 @@
+export * from './ossy.js'
+export * from './minimal.js'

package/src/standard.js

@@ -0,0 +1,388 @@
+import { topography } from './patterns/index.js'
+
+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%, 98%)',
+    primary: 'hsl(0, 0%, 100%)',
+    secondary: 'hsl(0, 0%, 95%)',
+    'alt-primary': 'hsl(168, 28%, 40%)',
+    accent: 'hsl(167, 89%, 43%)',
+    info: 'hsl(199deg 89% 43%)',
+    danger: 'hsl(0 89% 43%)'
+  },
+
+  surfaces: {
+
+    base: {
+      background: 'hsl(199, 90%, 98%)',
+      foreground: 'hsl(199, 90%, 10%)',
+      separator: 'hsl(0, 0%, 95%)',
+    },
+
+    primary: {
+      background: 'hsl(0, 0%, 100%)',
+      foreground: 'hsl(199, 90%, 10%)',
+      separator: 'hsl(0, 0%, 95%)',
+    },
+
+    secondary: {
+      background: 'hsl(0, 0%, 95%)',
+      foreground: 'hsl(199, 90%, 10%)',
+      separator: 'hsl(0, 0%, 95%)',
+    },
+
+    info: {
+      background: 'hsl(199, 89%, 43%)',
+      foreground: 'hsl(199, 89%, 10%)',
+      separator: 'hsl(0, 0%, 95%)',
+    },
+
+    danger: {
+      background: 'hsl(0, 89%, 43%)',
+      foreground: 'hsl(0, 89%, 10%)',
+      separator: 'hsl(0, 0%, 95%)',
+    },
+
+    accent: {
+      background: 'hsl(167, 89%, 43%)',
+      foreground: 'hsl(0, 0%, 100%)',
+      separator: 'hsl(0, 0%, 95%)',
+    },
+
+    'alt-primary': {
+      background: 'hsl(199, 98%, 10%)',
+      background: 'hsl(199deg 98% 17%)',
+      background: 'hsl(168, 28%, 40%)',
+      // background: 'hsl(168, 10%, 24%)',
+      // background: 'hsl(167, 1%, 40%)',
+      foreground: 'hsl(199deg 98% 98%)',
+      separator: 'hsl(0, 0%, 95%)',
+    },
+
+    'alt-secondary': {
+      background: 'hsl(199, 98%, 10%)',
+      background: 'hsl(168, 28%, 5%)',
+      background: 'hsl(168, 28%, 35%)',
+      foreground: 'hsl(199deg 98% 98%)',
+      separator: 'hsl(0, 0%, 95%)',
+    },
+
+    'linear-gradient': {
+      background: 'linear-gradient(180deg, hsl(0deg 0% 100%) 0%, hsl(199deg 98% 97%) 100%)',
+      'background-hover': 'linear-gradient(180deg, hsl(0deg 0% 100%) 0%, hsl(199deg 98% 97%) 100%)',
+      'background-active': 'linear-gradient(180deg, hsl(0deg 0% 100%) 0%, hsl(199deg 98% 97%) 100%)',
+      foreground: 'hsl(182, 23%, 30%)',
+      'foreground-hover': 'hsl(182, 23%, 30%)',
+      'foreground-active': 'hsl(182, 23%, 30%)',
+    },
+
+  },
+
+  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(180deg, hsl(0deg 0% 100%) 50%, hsl(199deg 98% 97%) 100%)',
+    'decorated': `
+      linear-gradient(180deg, var(--surface-primary) 0%, transparent 100%),
+      ${topography()},
+      linear-gradient(321deg, hsl(200, 80%, 85%) 0%, hsl(200, 100%, 97%) 20%, hsl(15, 100%, 95%) 80%, hsl(15, 100%, 85%) 100%)
+    `,
+  },
+
+  separator: {
+    primary: 'hsl(0, 0%, 85%)',
+    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%)'
+    },
+
+    m: {
+      'font-size': '.9rem',
+      'line-height': '1.2',
+    },
+
+    s: {
+      'font-size': '.8rem',
+      'line-height': '1.2',
+    },
+
+    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': '999px',
+      'padding': '8px 24px',
+      'font-size': '14px',
+      '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%)'
+    },
+
+    neutral: {
+      'color': 'hsl(0, 0%, 40%)',
+      'background': 'transparent',
+      'border-width': '.5px'
+    },
+
+    cta: {
+      'background': 'var(--color-accent)',
+      'color': 'var(--color-primary)',
+
+      'background-hover': 'hsl(167, 89%, 38%)',
+      'color-hover': 'hsl(0, 0%, 98%)',
+      'box-shadow': '3px 0 10px hsla(0, 0%, 85%, .75)',
+    },
+
+    command: {
+      'border-radius': '4px',
+      'padding': '4px',
+
+      'background': 'hsl(0, 0%, 99%)',
+      'background-hover': 'hsl(0, 0%, 95%)',
+      'color-hover': 'hsl(199deg 89% 43%)'
+      // 'color-hover': 'hsl(167, 89%, 43%)'
+    },
+
+    'command-danger': {
+      'border-radius': '4px',
+      'padding': '4px',
+
+      'background': 'hsl(0, 0%, 99%)',
+      'background-hover': 'hsl(0, 0%, 95%)',
+      'color-hover': 'hsl(0 89% 43%)'
+    },
+
+    link: {
+      'padding': '8px',
+      'font-weight': '300',
+      'background': 'transparent',
+      'border-color': 'transparent',
+
+      'background-hover': 'transparent',
+      'text-decoration-hover': 'underline'
+    },
+
+    tab: {
+      color: 'hsl(199, 90%, 20%)',
+      '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': 'transparent',
+      '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': '.5px',
+      'padding': 'var(--space-l)',
+      'border-radius': 'var(--space-s)'
+    },
+
+    shadow: {
+      'background': 'hsla(0, 0%, 100%, .5)',
+      'backdrop-filter': 'blur(2px)',
+      'border-radius': 'var(--space-s)',
+      'border-color': 'hsla(0, 0%, 100%, 1)',
+      'border-style': 'solid',
+      'border-width': '0',
+      'box-shadow': '3px 0 10px hsla(0, 0%, 85%, .2)',
+      'padding': 'var(--space-l)',
+    },
+
+    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-base)'
+  }
+}