@symbo.ls/default-config 2.27.0 → 3.1.1

package/blank/color.js

@@ -0,0 +1,29 @@
+'use strict'
+
+export const COLOR = {
+  transparent: 'rgba(0, 0, 0, 0)',
+  black: 'black',
+  white: 'white',
+  title: [
+    '--gray 1 -168',
+    '--gray 1 +168'
+  ],
+  caption: [
+    '--gray 1 -68',
+    '--gray 1 +68'
+  ],
+  paragraph: [
+    '--gray 1 -42',
+    '--gray 1 +42'
+  ],
+  disabled: [
+    '--gray 1 -26',
+    '--gray 1 +26'
+  ],
+  line: [
+    '--gray 1 -16',
+    '--gray 1 +16'
+  ]
+}
+
+export const GRADIENT = {}

package/blank/font.js

@@ -0,0 +1,10 @@
+'use strict'
+
+export const FONT = {}
+
+export const FONT_FAMILY = {
+  system: {
+    value: ['"Helvetica Neue"', 'Helvetica', 'Arial'],
+    type: 'sans-serif'
+  }
+}

package/blank/index.js

@@ -0,0 +1,63 @@
+'use strict'
+
+// import { DEFAULT_ICONS } from '@symbo.ls/default-icons'
+import { COLOR, GRADIENT } from './color'
+import { THEME } from './theme'
+import { FONT, FONT_FAMILY } from './font'
+import { MEDIA } from './media'
+import { TIMING } from './timing'
+
+const DEFAULT_ICONS = {}
+
+export const DEFAULT_CONFIG = {
+  version: '0.0.1',
+  COLOR,
+  GRADIENT,
+  THEME,
+  TYPOGRAPHY: {
+    base: 16,
+    ratio: 1.25,
+    subSequence: true,
+    templates: {}
+  },
+  SPACING: {
+    base: 16,
+    ratio: 1.618,
+    subSequence: true
+  },
+  FONT,
+  FONT_FAMILY,
+  TIMING,
+  ICONS: DEFAULT_ICONS,
+  MEDIA,
+  RESET: {
+    html: {},
+    body: {}
+  },
+  ANIMATION: {
+    fadeIn: {
+      from: {
+        opacity: 0
+      },
+      to: {
+        opacity: 1
+      }
+    }
+  },
+  DEVICES: {},
+  CASES: {},
+  CLASS: {},
+  SVG: {},
+  GRID: {},
+  SHAPE: {},
+  useReset: true,
+  useVariable: true,
+  useFontImport: true,
+  useIconSprite: true,
+  useSvgSprite: true,
+  useDefaultConfig: true,
+  useDocumentTheme: true,
+  verbose: false
+}
+
+export default DEFAULT_CONFIG

package/blank/theme.js

@@ -0,0 +1,147 @@
+'use strict'
+
+const PRIORITIES = {
+  primary: {
+    '@dark': {
+      color: 'white',
+      background: 'blue'
+    },
+    '@light': {
+      color: 'white',
+      background: 'gradient-blue'
+    }
+  },
+
+  secondary: {
+    '@dark': {
+      color: 'white',
+      background: 'gray'
+    },
+    '@light': {
+      color: 'white',
+      background: 'gray'
+    }
+  },
+
+  tertiary: {
+    '@dark': {
+      color: 'white',
+      background: 'gray .92 +8'
+    },
+    '@light': {
+      background: 'gray .1'
+    }
+  },
+
+  quaternary: {
+    '@light': {
+      color: 'white',
+      background: 'gradient-light'
+    },
+    '@dark': {
+      color: 'white',
+      background: 'gradient-dark-active'
+    }
+  },
+
+  quinary: {
+    '@dark': {
+      color: 'gray 1 90',
+      background: 'gradient-light'
+    },
+
+    '@light': {
+      color: 'gray3',
+      background: 'gradient-dark'
+    }
+  }
+}
+
+const STATES = {
+  alert: {
+    '@dark': {
+      color: 'white',
+      background: 'red'
+    }
+  },
+
+  warning: {
+    '@dark': {
+      color: 'black',
+      background: 'yellow'
+    }
+  },
+
+  success: {
+    '@dark': {
+      color: 'black',
+      background: 'green'
+    }
+  }
+}
+
+const UI = {
+  field: {
+    '@light': {
+      color: 'black',
+      background: 'gray .975 +144',
+      borderColor: 'gray .975 +144',
+      '::placeholder': { color: 'gray 1 -68' }
+    },
+    '@dark': {
+      color: 'white',
+      background: 'gray .975 -52',
+      borderColor: 'gray .975 -52',
+      '::placeholder': { color: 'gray 1 +68' }
+    }
+  },
+
+  label: {
+    '@dark': {
+      color: 'white',
+      background: 'gray .92 +8'
+    },
+
+    '@light': {
+      background: 'gray .1'
+    }
+  },
+
+  dialog: {
+    '@dark': {
+      color: 'white',
+      background: 'gray .92'
+    },
+    '@light': {
+      color: 'currentColor',
+      background: 'gray .1'
+    }
+  }
+}
+
+export const THEME = {
+  document: {
+    '@light': {
+      color: 'black',
+      background: 'white'
+    },
+    '@dark': {
+      color: 'white',
+      background: 'black'
+    }
+  },
+
+  ...PRIORITIES,
+  ...STATES,
+  ...UI,
+
+  none: {
+    color: 'none',
+    background: 'none'
+  },
+
+  transparent: {
+    color: 'currentColor',
+    background: 'transparent'
+  }
+}

package/default/media.js

@@ -0,0 +1,31 @@
+'use strict'
+
+export const MEDIA = {
+  tv: '(min-width: 2780px)',
+
+  screenL: '(max-width: 1920px)',
+  'screenL<': '(min-width: 1920px)',
+  screenM: '(max-width: 1680px)',
+  'screenM<': '(min-width: 1680px)',
+  screenS: '(max-width: 1440px)',
+  'screenS<': '(min-width: 1440px)',
+  tabletL: '(max-width: 1366px)',
+  'tabletL<': '(min-width: 1366px)',
+  tabletM: '(max-width: 1280px)',
+  'tabletM<': '(min-width: 1280px)',
+  tabletS: '(max-width: 1024px)',
+  'tabletS<': '(min-width: 1024px)',
+  mobileL: '(max-width: 768px)',
+  'mobileL<': '(min-width: 768px)',
+  mobileM: '(max-width: 560px)',
+  'mobileM<': '(min-width: 560px)',
+  mobileS: '(max-width: 480px)',
+  'mobileS<': '(min-width: 480px)',
+  mobileXS: '(max-width: 375px)',
+  'mobileXS<': '(min-width: 375px)',
+
+  light: '(prefers-color-scheme: light)',
+  dark: '(prefers-color-scheme: dark)',
+
+  print: 'print'
+}

package/default/spacing.js

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

package/default/timing.js

@@ -0,0 +1,8 @@
+'use strict'
+
+export const TIMING = {
+  base: 150,
+  ratio: 1.333,
+  unit: 'ms',
+  subSequence: true
+}

package/default/typography.js

@@ -0,0 +1,8 @@
+'use strict'
+
+export const TYPOGRAPHY = {
+  base: 16,
+  ratio: 1.25,
+  subSequence: true,
+  templates: {}
+}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@symbo.ls/default-config",
-  "version": "2.27.0",
-  "source": "src/index.js",
-  "main": "src/index.js",
+  "version": "3.1.1",
+  "source": "./blank/index.js",
+  "main": "./blank/index.js",
   "type": "module",
   "dependencies": {
-    "@symbo.ls/default-icons": "^2.27.0"
+    "@symbo.ls/default-icons": "^3.1.1"
   },
   "license": "MIT",
-  "gitHead": "40a924693178a7d7b9e94aac0282b9d31602eca7"
+  "gitHead": "39fb7a8c07355468ccce79e2f787ca3fa0715692"
 }