@symbo.ls/default-config 2.9.0

package/README.md

@@ -0,0 +1,2 @@
+# Default Config
+This is a default repository for Symbols Design Systems. It shows how it works and provides some default propoerties. Check out the [docs page](http://docs.symbols.app/intro#configuration) to learn more.

package/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@symbo.ls/default-config",
+  "version": "2.9.0",
+  "source": "src/index.js",
+  "main": "src/index.js",
+  "license": "MIT",
+  "scripts": {
+    "jsonify": "npx parcel build src/index.js && node bin/json.js"
+  },
+  "gitHead": "6378f05ba88065ef932810a1582f45e0384feafc"
+}

package/src/color.js

@@ -0,0 +1,44 @@
+'use strict'
+
+export const COLOR = {
+  transparent: 'rgba(0, 0, 0, 0)',
+  black: 'black',
+  blue: '#0079FD',
+  indigo: '#50E1FF',
+  green: '#59AC56',
+  red: '#FE5B47',
+  yellow: '#EDCB38',
+  orange: '#E2862F',
+  brown: '#7D6755',
+  pink: '#FD8ABF',
+  purple: '#7345AF',
+  white: 'white'
+}
+
+export const GRADIENT = {
+  'gradient-dark': `linear-gradient(0deg,
+    rgba(0,0,0,0.06) 0%,
+    rgba(0,0,0,0.07) 100%
+  )`,
+  'gradient-dark-active': `linear-gradient(0deg,
+    rgba(0,0,0,0.09) 0%,
+    rgba(0,0,0,0.1) 100%
+  )`,
+  'gradient-light': `linear-gradient(
+    0deg,
+    rgba(255,255,255,0.05) 0%,
+    rgba(255,255,255,0.06) 100%
+  )`,
+  'gradient-light-active': `linear-gradient(
+    0deg,
+    rgba(255,255,255,0.09) 0%,
+    rgba(255,255,255,0.10) 100%
+  )`,
+  'gradient-colorful': `linear-gradient(60deg,
+    #00A2E7 0%,
+    #185DF3 31%,
+    #1E54F0 36%,
+    #8B4CCA 69%,
+    #C66894 100%
+  )`,
+}

package/src/config.json

@@ -0,0 +1 @@
+{"version":"0.0.1","COLOR":{"transparent":"rgba(0, 0, 0, 0)","black":"black","blue":"#0079FD","indigo":"#50E1FF","green":"#59AC56","red":"#FE5B47","yellow":"#EDCB38","orange":"#E2862F","brown":"#7D6755","pink":"#FD8ABF","purple":"#7345AF","white":"white"},"GRADIENT":{"gradient-dark":"linear-gradient(0deg,\n    rgba(0,0,0,0.06) 0%,\n    rgba(0,0,0,0.07) 100%\n  )","gradient-dark-active":"linear-gradient(0deg,\n    rgba(0,0,0,0.09) 0%,\n    rgba(0,0,0,0.1) 100%\n  )","gradient-light":"linear-gradient(\n    0deg,\n    rgba(255,255,255,0.05) 0%,\n    rgba(255,255,255,0.06) 100%\n  )","gradient-light-active":"linear-gradient(\n    0deg,\n    rgba(255,255,255,0.09) 0%,\n    rgba(255,255,255,0.10) 100%\n  )"},"THEME":{"document":{"variants":{"light":{"color":"black","background":"white"},"dark":{"color":"white","background":"black"}}},"primary":{"color":"white","background":"blue"},"secondary":{"variants":{"light":{"color":"white","background":"gradient-light"},"dark":{"color":"white","background":"gradient-dark-active"}}}},"FONT":{"Karla":[{"url":"https://symbols-fonts.s3.us-west-1.amazonaws.com/Karla/Karla-VariableFont_wght.ttf","fontWeight":"variable","fontStyle":"normal","fontDisplay":"swap","unicodeRange":"U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF"},{"url":"https://symbols-fonts.s3.us-west-1.amazonaws.com/Karla/Karla-VariableFont_wght.ttf","fontStyle":"normal","fontWeight":"variable","fontDisplay":"swap","unicodeRange":"U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD"}]},"FONT_FAMILY":{"StartWithKarla":{"isDefault":true,"value":["\"Karla\""],"type":"serif"}}}

package/src/font.js

@@ -0,0 +1,29 @@
+'use strict'
+
+const S3_BUCKET = 'https://symbols-fonts.s3.us-west-1.amazonaws.com'
+const KarlaVariable = '/Karla/Karla-VariableFont_wght.ttf'
+const KarlaItalicVariable = '/Karla/Karla-VariableFont_wght.ttf' // eslint-disable-line
+
+export const FONT = {
+  Karla: [{
+    url: S3_BUCKET + KarlaVariable,
+    fontWeight: 'variable',
+    fontStyle: 'normal',
+    fontDisplay: 'swap',
+    unicodeRange: 'U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF'
+  }, {
+    url: S3_BUCKET + KarlaVariable,
+    fontStyle: 'normal',
+    fontWeight: 'variable',
+    fontDisplay: 'swap',
+    unicodeRange: 'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD'
+  }]
+}
+
+export const FONT_FAMILY = {
+  StartWithKarla: {
+    isDefault: true,
+    value: ['"Karla"'],
+    type: 'serif'
+  }
+}

package/src/index.js

@@ -0,0 +1,23 @@
+'use strict'
+
+import { COLOR, GRADIENT } from './color'
+import { THEME } from './theme'
+import { TYPOGRAPHY } from './typography'
+import { SPACING } from './spacing'
+import { FONT, FONT_FAMILY } from './font'
+
+export default {
+  version: '0.0.1',
+  COLOR,
+  GRADIENT,
+  THEME,
+  TYPOGRAPHY,
+  SPACING,
+  FONT,
+  FONT_FAMILY,
+  TIMING: {},
+  ICONS: {},
+  MEDIA: {},
+  DEVICES: {},
+  CASES: {}
+}

package/src/spacing.js

@@ -0,0 +1,6 @@
+'use strict'
+
+export const SPACING = {
+  base: 16,
+  ratio: 1.618
+}

package/src/theme.js

@@ -0,0 +1,91 @@
+'use strict'
+
+const PRIORITIES = {
+  primary: {
+    '@dark': {
+      color: 'white',
+      background: 'gradient-colorful'
+    },
+    '@light': {
+      color: 'white',
+      background: 'gradient-colorful'
+    }
+  },
+
+  secondary: {
+    '@light': {
+      color: 'white',
+      background: 'blue'
+    },
+    '@dark': {
+      color: 'white',
+      background: 'blue'
+    }
+  },
+
+  tertiary: {
+    '@light': {
+      color: 'white',
+      background: 'gradient-light'
+    },
+    '@dark': {
+      color: 'white',
+      background: 'gradient-dark-active'
+    }
+  },
+
+  quaternary: {
+    '@dark': {
+      color: 'gray9',
+      background: 'gradient-light',
+
+      ':hover': {
+        color: 'gray12',
+        background: 'gradient-light-active'
+      },
+      ':active': {
+        color: 'gray12',
+        background: 'gradient-light-active'
+      },
+
+      '.active': {
+        color: 'gray12',
+        background: 'gradient-light-active'
+      }
+    },
+
+    '@light': {
+      color: 'gray3',
+      background: 'gradient-dark',
+
+      ':hover': {
+        color: 'gray1',
+        background: 'gradient-dark-active'
+      },
+      ':active': {
+        color: 'gray1',
+        background: 'gradient-dark-active'
+      },
+
+      '.active': {
+        color: 'gray1',
+        background: 'gradient-dark-active'
+      }
+    }
+  }
+}
+
+export const THEME = {
+  document: {
+    '@light': {
+      color: 'black',
+      background: 'white'
+    },
+    '@dark': {
+      color: 'white',
+      background: 'black'
+    }
+  },
+
+  ...PRIORITIES
+}

package/src/typography.js

@@ -0,0 +1,7 @@
+'use strict'
+
+export const TYPOGRAPHY = {
+  base: 16,
+  ratio: 1.125,
+  styles: {}
+}