@master/css 2.0.0-rc.41 → 2.0.0-rc.43

package/dist/config/index.cjs

@@ -22,7 +22,8 @@ const config = {
     rootSize: 16,
     baseUnit: 4,
     override: false,
-    important: false
+    important: false,
+    defaultMode: 'light'
 };
 
 exports.at = at;

package/dist/config/index.d.ts

@@ -62,6 +62,7 @@ export interface Config {
     syntaxes?: SyntaxDefinitions;
     rootSize?: number;
     baseUnit?: number;
+    defaultMode?: 'light' | 'dark' | string | false;
     scope?: string;
     important?: boolean;
     override?: boolean;

package/dist/config/index.mjs

@@ -20,7 +20,8 @@ const config = {
     rootSize: 16,
     baseUnit: 4,
     override: false,
-    important: false
+    important: false,
+    defaultMode: 'light'
 };
 
 export { animations, at, config, functions, modes, selectors, syntaxes, utilities, variables };

package/dist/config/syntaxes.cjs

@@ -1003,9 +1003,6 @@ const syntaxes = {
             common.COLOR_VALUE_REGEX
         ],
         layer: layer.Native,
-        variables: [
-            'text'
-        ],
         declare (value) {
             return {
                 '-webkit-text-stroke-color': value
@@ -1202,7 +1199,10 @@ const syntaxes = {
         ambiguousValues: [
             common.COLOR_VALUE_REGEX
         ],
-        layer: layer.Native
+        layer: layer.Native,
+        variables: [
+            'frame'
+        ]
     },
     'border-bottom-color': {
         ambiguousKeys: [
@@ -1212,7 +1212,10 @@ const syntaxes = {
         ambiguousValues: [
             common.COLOR_VALUE_REGEX
         ],
-        layer: layer.Native
+        layer: layer.Native,
+        variables: [
+            'frame'
+        ]
     },
     'border-left-color': {
         ambiguousKeys: [
@@ -1222,7 +1225,10 @@ const syntaxes = {
         ambiguousValues: [
             common.COLOR_VALUE_REGEX
         ],
-        layer: layer.Native
+        layer: layer.Native,
+        variables: [
+            'frame'
+        ]
     },
     'border-right-color': {
         ambiguousKeys: [
@@ -1232,7 +1238,10 @@ const syntaxes = {
         ambiguousValues: [
             common.COLOR_VALUE_REGEX
         ],
-        layer: layer.Native
+        layer: layer.Native,
+        variables: [
+            'frame'
+        ]
     },
     'border-x-color': {
         ambiguousKeys: [
@@ -1243,6 +1252,9 @@ const syntaxes = {
             common.COLOR_VALUE_REGEX
         ],
         layer: layer.Shorthand,
+        variables: [
+            'frame'
+        ],
         declare (value) {
             return {
                 'border-left-color': value,
@@ -1259,6 +1271,9 @@ const syntaxes = {
             common.COLOR_VALUE_REGEX
         ],
         layer: layer.Shorthand,
+        variables: [
+            'frame'
+        ],
         declare (value) {
             return {
                 'border-top-color': value,
@@ -1274,7 +1289,10 @@ const syntaxes = {
         ambiguousValues: [
             common.COLOR_VALUE_REGEX
         ],
-        layer: layer.NativeShorthand
+        layer: layer.NativeShorthand,
+        variables: [
+            'frame'
+        ]
     },
     // border radius
     'border-top-left-radius': {
@@ -1562,31 +1580,46 @@ const syntaxes = {
         key: 'bt',
         layer: layer.NativeShorthand,
         unit: 'rem',
-        transformValueComponents: autofillSolidStyle
+        transformValueComponents: autofillSolidStyle,
+        variables: [
+            'frame'
+        ]
     },
     'border-bottom': {
         key: 'bb',
         layer: layer.NativeShorthand,
         unit: 'rem',
-        transformValueComponents: autofillSolidStyle
+        transformValueComponents: autofillSolidStyle,
+        variables: [
+            'frame'
+        ]
     },
     'border-left': {
         key: 'bl',
         layer: layer.NativeShorthand,
         unit: 'rem',
-        transformValueComponents: autofillSolidStyle
+        transformValueComponents: autofillSolidStyle,
+        variables: [
+            'frame'
+        ]
     },
     'border-right': {
         key: 'br',
         layer: layer.NativeShorthand,
         unit: 'rem',
-        transformValueComponents: autofillSolidStyle
+        transformValueComponents: autofillSolidStyle,
+        variables: [
+            'frame'
+        ]
     },
     'border-x': {
         key: 'bx',
         unit: 'rem',
         layer: layer.Shorthand,
         transformValueComponents: autofillSolidStyle,
+        variables: [
+            'frame'
+        ],
         declare (value) {
             return {
                 'border-left': value,
@@ -1599,6 +1632,9 @@ const syntaxes = {
         unit: 'rem',
         layer: layer.Shorthand,
         transformValueComponents: autofillSolidStyle,
+        variables: [
+            'frame'
+        ],
         declare (value) {
             return {
                 'border-top': value,
@@ -1610,7 +1646,10 @@ const syntaxes = {
         key: 'b',
         unit: 'rem',
         layer: layer.NativeShorthand,
-        transformValueComponents: autofillSolidStyle
+        transformValueComponents: autofillSolidStyle,
+        variables: [
+            'frame'
+        ]
     },
     'background-attachment': {
         ambiguousKeys: [
@@ -1997,7 +2036,10 @@ const syntaxes = {
         ambiguousValues: [
             common.COLOR_VALUE_REGEX
         ],
-        layer: layer.Native
+        layer: layer.Native,
+        variables: [
+            'frame'
+        ]
     },
     'outline-offset': {
         unit: 'rem',
@@ -2033,7 +2075,8 @@ const syntaxes = {
             'outline-width',
             'outline-style',
             'outline-offset',
-            'outline-color'
+            'outline-color',
+            'frame'
         ],
         transformValueComponents: autofillSolidStyle
     },

package/dist/config/syntaxes.mjs

@@ -1001,9 +1001,6 @@ const syntaxes = {
             COLOR_VALUE_REGEX
         ],
         layer: Layer.Native,
-        variables: [
-            'text'
-        ],
         declare (value) {
             return {
                 '-webkit-text-stroke-color': value
@@ -1200,7 +1197,10 @@ const syntaxes = {
         ambiguousValues: [
             COLOR_VALUE_REGEX
         ],
-        layer: Layer.Native
+        layer: Layer.Native,
+        variables: [
+            'frame'
+        ]
     },
     'border-bottom-color': {
         ambiguousKeys: [
@@ -1210,7 +1210,10 @@ const syntaxes = {
         ambiguousValues: [
             COLOR_VALUE_REGEX
         ],
-        layer: Layer.Native
+        layer: Layer.Native,
+        variables: [
+            'frame'
+        ]
     },
     'border-left-color': {
         ambiguousKeys: [
@@ -1220,7 +1223,10 @@ const syntaxes = {
         ambiguousValues: [
             COLOR_VALUE_REGEX
         ],
-        layer: Layer.Native
+        layer: Layer.Native,
+        variables: [
+            'frame'
+        ]
     },
     'border-right-color': {
         ambiguousKeys: [
@@ -1230,7 +1236,10 @@ const syntaxes = {
         ambiguousValues: [
             COLOR_VALUE_REGEX
         ],
-        layer: Layer.Native
+        layer: Layer.Native,
+        variables: [
+            'frame'
+        ]
     },
     'border-x-color': {
         ambiguousKeys: [
@@ -1241,6 +1250,9 @@ const syntaxes = {
             COLOR_VALUE_REGEX
         ],
         layer: Layer.Shorthand,
+        variables: [
+            'frame'
+        ],
         declare (value) {
             return {
                 'border-left-color': value,
@@ -1257,6 +1269,9 @@ const syntaxes = {
             COLOR_VALUE_REGEX
         ],
         layer: Layer.Shorthand,
+        variables: [
+            'frame'
+        ],
         declare (value) {
             return {
                 'border-top-color': value,
@@ -1272,7 +1287,10 @@ const syntaxes = {
         ambiguousValues: [
             COLOR_VALUE_REGEX
         ],
-        layer: Layer.NativeShorthand
+        layer: Layer.NativeShorthand,
+        variables: [
+            'frame'
+        ]
     },
     // border radius
     'border-top-left-radius': {
@@ -1560,31 +1578,46 @@ const syntaxes = {
         key: 'bt',
         layer: Layer.NativeShorthand,
         unit: 'rem',
-        transformValueComponents: autofillSolidStyle
+        transformValueComponents: autofillSolidStyle,
+        variables: [
+            'frame'
+        ]
     },
     'border-bottom': {
         key: 'bb',
         layer: Layer.NativeShorthand,
         unit: 'rem',
-        transformValueComponents: autofillSolidStyle
+        transformValueComponents: autofillSolidStyle,
+        variables: [
+            'frame'
+        ]
     },
     'border-left': {
         key: 'bl',
         layer: Layer.NativeShorthand,
         unit: 'rem',
-        transformValueComponents: autofillSolidStyle
+        transformValueComponents: autofillSolidStyle,
+        variables: [
+            'frame'
+        ]
     },
     'border-right': {
         key: 'br',
         layer: Layer.NativeShorthand,
         unit: 'rem',
-        transformValueComponents: autofillSolidStyle
+        transformValueComponents: autofillSolidStyle,
+        variables: [
+            'frame'
+        ]
     },
     'border-x': {
         key: 'bx',
         unit: 'rem',
         layer: Layer.Shorthand,
         transformValueComponents: autofillSolidStyle,
+        variables: [
+            'frame'
+        ],
         declare (value) {
             return {
                 'border-left': value,
@@ -1597,6 +1630,9 @@ const syntaxes = {
         unit: 'rem',
         layer: Layer.Shorthand,
         transformValueComponents: autofillSolidStyle,
+        variables: [
+            'frame'
+        ],
         declare (value) {
             return {
                 'border-top': value,
@@ -1608,7 +1644,10 @@ const syntaxes = {
         key: 'b',
         unit: 'rem',
         layer: Layer.NativeShorthand,
-        transformValueComponents: autofillSolidStyle
+        transformValueComponents: autofillSolidStyle,
+        variables: [
+            'frame'
+        ]
     },
     'background-attachment': {
         ambiguousKeys: [
@@ -1995,7 +2034,10 @@ const syntaxes = {
         ambiguousValues: [
             COLOR_VALUE_REGEX
         ],
-        layer: Layer.Native
+        layer: Layer.Native,
+        variables: [
+            'frame'
+        ]
     },
     'outline-offset': {
         unit: 'rem',
@@ -2031,7 +2073,8 @@ const syntaxes = {
             'outline-width',
             'outline-style',
             'outline-offset',
-            'outline-color'
+            'outline-color',
+            'frame'
         ],
         transformValueComponents: autofillSolidStyle
     },

package/dist/config/variables.cjs

@@ -3,7 +3,7 @@
 var colors = require('@master/colors');
 var extend = require('@techor/extend');
 
-const variables = extend(colors, {
+const _variables = {
     full: '100%',
     fit: 'fit-content',
     max: 'max-content',
@@ -122,6 +122,25 @@ const variables = extend(colors, {
         view: 'view-box'
     },
     current: 'currentColor',
+    frame: {
+        neutral: {
+            '@light': '$(slate-60)',
+            '@dark': '$(gray-30)'
+        },
+        light: {
+            '@light': '$(slate-60)/.2',
+            '@dark': '$(gray-30)/.2'
+        },
+        lighter: {
+            '@light': '$(slate-60)/.16',
+            '@dark': '$(gray-30)/.16'
+        },
+        lightest: {
+            '@light': '$(slate-60)/.12',
+            '@dark': '$(gray-30)/.12'
+        }
+    },
+    // from figma
     white: '#ffffff',
     black: '#000000',
     base: {
@@ -140,96 +159,223 @@ const variables = extend(colors, {
         '@light': '$(black)',
         '@dark': '$(white)'
     },
-    line: {
-        neutral: {
-            '@light': '$(slate-60)',
-            '@dark': '$(gray-30)'
-        }
-    },
     gray: {
         '@light': '$(gray-30)',
-        '@dark': '$(gray-40)'
+        '@dark': '$(gray-40)',
+        active: {
+            '@light': '$(gray-40)',
+            '@dark': '$(gray-30)'
+        },
+        text: {
+            '@light': '$(gray-90)',
+            '@dark': '$(gray-95)'
+        }
     },
     slate: {
         '@light': '$(slate-30)',
-        '@dark': '$(slate-40)'
+        '@dark': '$(slate-40)',
+        active: {
+            '@light': '$(slate-40)',
+            '@dark': '$(slate-30)'
+        },
+        text: {
+            '@light': '$(slate-90)',
+            '@dark': '$(slate-95)'
+        }
     },
     brown: {
         '@light': '$(brown-40)',
-        '@dark': '$(brown-50)'
+        '@dark': '$(brown-50)',
+        active: {
+            '@light': '$(brown-50)',
+            '@dark': '$(brown-40)'
+        },
+        text: {
+            '@light': '$(brown-90)',
+            '@dark': '$(brown-95)'
+        }
     },
     orange: {
         '@light': '$(orange-40)',
-        '@dark': '$(orange-50)'
+        '@dark': '$(orange-50)',
+        active: {
+            '@light': '$(orange-50)',
+            '@dark': '$(orange-40)'
+        },
+        text: {
+            '@light': '$(orange-90)',
+            '@dark': '$(orange-95)'
+        }
     },
     amber: {
         '@light': '$(amber-40)',
-        '@dark': '$(amber-50)'
+        '@dark': '$(amber-50)',
+        active: {
+            '@light': '$(amber-50)',
+            '@dark': '$(amber-30)'
+        },
+        text: {
+            '@light': '$(amber-90)',
+            '@dark': '$(amber-95)'
+        }
     },
     yellow: {
         '@light': '$(yellow-40)',
-        '@dark': '$(yellow-50)'
+        '@dark': '$(yellow-50)',
+        active: {
+            '@light': '$(yellow-50)',
+            '@dark': '$(yellow-30)'
+        },
+        text: {
+            '@light': '$(yellow-90)',
+            '@dark': '$(yellow-95)'
+        }
     },
     lime: {
         '@light': '$(lime-40)',
-        '@dark': '$(lime-50)'
+        '@dark': '$(lime-50)',
+        active: {
+            '@light': '$(lime-50)',
+            '@dark': '$(lime-30)'
+        },
+        text: {
+            '@light': '$(lime-90)',
+            '@dark': '$(lime-95)'
+        }
     },
     green: {
         '@light': '$(green-40)',
-        '@dark': '$(green-50)'
+        '@dark': '$(green-50)',
+        active: {
+            '@light': '$(green-50)',
+            '@dark': '$(green-30)'
+        },
+        text: {
+            '@light': '$(green-90)',
+            '@dark': '$(green-95)'
+        }
     },
     beryl: {
         '@light': '$(beryl-40)',
-        '@dark': '$(beryl-50)'
+        '@dark': '$(beryl-50)',
+        active: {
+            '@light': '$(beryl-50)',
+            '@dark': '$(beryl-30)'
+        },
+        text: {
+            '@light': '$(beryl-90)',
+            '@dark': '$(beryl-95)'
+        }
     },
     teal: {
         '@light': '$(teal-40)',
-        '@dark': '$(teal-50)'
+        '@dark': '$(teal-50)',
+        active: {
+            '@light': '$(teal-50)',
+            '@dark': '$(teal-30)'
+        },
+        text: {
+            '@light': '$(teal-90)',
+            '@dark': '$(teal-95)'
+        }
     },
     cyan: {
         '@light': '$(cyan-40)',
-        '@dark': '$(cyan-50)'
+        '@dark': '$(cyan-50)',
+        active: {
+            '@light': '$(cyan-50)',
+            '@dark': '$(cyan-30)'
+        },
+        text: {
+            '@light': '$(cyan-90)',
+            '@dark': '$(cyan-95)'
+        }
     },
     sky: {
         '@light': '$(sky-60)',
-        '@dark': '$(sky-50)'
+        '@dark': '$(sky-50)',
+        active: {
+            '@light': '$(sky-70)',
+            '@dark': '$(sky-40)'
+        },
+        text: '$(white)'
     },
     blue: {
         '@light': '$(blue-60)',
-        '@dark': '$(blue-50)'
+        '@dark': '$(blue-50)',
+        active: {
+            '@light': '$(blue-70)',
+            '@dark': '$(blue-40)'
+        },
+        text: '$(white)'
     },
     indigo: {
         '@light': '$(indigo-60)',
-        '@dark': '$(indigo-50)'
+        '@dark': '$(indigo-50)',
+        active: {
+            '@light': '$(indigo-70)',
+            '@dark': '$(indigo-40)'
+        },
+        text: '$(white)'
     },
     violet: {
         '@light': '$(violet-60)',
-        '@dark': '$(violet-50)'
+        '@dark': '$(violet-50)',
+        active: {
+            '@light': '$(violet-70)',
+            '@dark': '$(violet-40)'
+        },
+        text: '$(white)'
     },
     purple: {
         '@light': '$(purple-60)',
-        '@dark': '$(purple-50)'
+        '@dark': '$(purple-50)',
+        active: {
+            '@light': '$(purple-70)',
+            '@dark': '$(purple-40)'
+        },
+        text: '$(white)'
     },
     fuchsia: {
         '@light': '$(fuchsia-60)',
-        '@dark': '$(fuchsia-50)'
+        '@dark': '$(fuchsia-50)',
+        active: {
+            '@light': '$(fuchsia-70)',
+            '@dark': '$(fuchsia-40)'
+        },
+        text: '$(white)'
     },
     pink: {
         '@light': '$(pink-60)',
-        '@dark': '$(pink-50)'
+        '@dark': '$(pink-50)',
+        active: {
+            '@light': '$(pink-70)',
+            '@dark': '$(pink-40)'
+        },
+        text: '$(white)'
     },
     crimson: {
         '@light': '$(crimson-60)',
-        '@dark': '$(crimson-50)'
+        '@dark': '$(crimson-50)',
+        active: {
+            '@light': '$(crimson-70)',
+            '@dark': '$(crimson-40)'
+        },
+        text: '$(white)'
     },
     red: {
         '@light': '$(red-60)',
-        '@dark': '$(red-50)'
+        '@dark': '$(red-50)',
+        active: {
+            '@light': '$(red-70)',
+            '@dark': '$(red-40)'
+        },
+        text: '$(white)'
     },
     text: {
         invert: {
-            '@light': '$(black)',
-            '@dark': '$(white)'
+            '@light': '$(white)',
+            '@dark': '$(black)'
         },
         strong: {
             '@light': '$(slate-95)',
@@ -332,6 +478,7 @@ const variables = extend(colors, {
             '@dark': '$(red-30)'
         }
     }
-});
+};
+const variables = extend(colors, _variables);
 
 module.exports = variables;