@symbo.ls/default-config 2.11.244 → 2.11.249

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@symbo.ls/default-config",
-  "version": "2.11.244",
+  "version": "2.11.249",
   "source": "src/index.js",
   "main": "src/index.js",
   "dependencies": {
     "@symbo.ls/default-icons": "latest"
   },
   "license": "MIT",
-  "gitHead": "83dcc5bed6674f0fa0dd1ae675e3a25fb2dd90d2"
+  "gitHead": "9c800fdfdff5d9a49083e7d4f849189a35b8054c"
 }

package/src/color.js

@@ -22,7 +22,7 @@ export const COLOR = {
   gray4: '#BDBDC1',
 
   title: ['--black 1', '--white 1'],
-  caption: ['--gray2 1', '--gray4 1'],
+  caption: ['--gray 1 +16', '--gray4 1'],
   paragraph: ['--gray2 1', '--white 1']
 }
 

package/src/index.js

@@ -6,6 +6,7 @@ import { THEME } from './theme'
 import { TYPOGRAPHY } from './typography'
 import { SPACING } from './spacing'
 import { FONT, FONT_FAMILY } from './font'
+import { MEDIA } from './media'
 
 export const DEFAULT_CONFIG = {
   version: '0.0.1',
@@ -18,25 +19,7 @@ export const DEFAULT_CONFIG = {
   FONT_FAMILY,
   TIMING: {},
   ICONS,
-  MEDIA: {
-    tv: '(min-width: 2780px)',
-
-    screenL: '(max-width: 1920px)',
-    screenM: '(max-width: 1680px)',
-    screenS: '(max-width: 1440px)',
-    tabletL: '(max-width: 1366px)',
-    tabletM: '(max-width: 1280px)',
-    tabletS: '(max-width: 1024px)',
-    mobileL: '(max-width: 768px)',
-    mobileM: '(max-width: 560px)',
-    mobileS: '(max-width: 480px)',
-    mobileXS: '(max-width: 375px)',
-
-    light: '(prefers-color-scheme: light)',
-    dark: '(prefers-color-scheme: dark)',
-
-    print: 'print'
-  },
+  MEDIA,
   DEVICES: {},
   CASES: {},
   SVG: {} // TODO: Check with @nikoloza on this

package/src/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/src/spacing.js

@@ -1,7 +1,12 @@
 'use strict'
 
 export const SPACING = {
-  base: 16,
   ratio: 1.618,
-  subSequence: true
+  subSequence: true,
+  '@tabletS': {
+    ratio: 1.45
+  },
+  '@mobileM': {
+    ratio: 1.2
+  }
 }

package/src/typography.js

@@ -4,5 +4,12 @@ export const TYPOGRAPHY = {
   base: 16,
   ratio: 1.25,
   subSequence: true,
-  templates: {}
+  templates: {},
+  '@tabletS': {
+    base: 15,
+    ratio: 1.23
+  }
+  // '@mobileM': {
+  //   ratio: 1.125
+  // }
 }