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

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/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',
@@ -228,8 +228,8 @@ const variables = extend(colors, {
     },
     text: {
         invert: {
-            '@light': '$(black)',
-            '@dark': '$(white)'
+            '@light': '$(white)',
+            '@dark': '$(black)'
         },
         strong: {
             '@light': '$(slate-95)',
@@ -332,6 +332,7 @@ const variables = extend(colors, {
             '@dark': '$(red-30)'
         }
     }
-});
+};
+const variables = extend(colors, _variables);
 
 module.exports = variables;

package/dist/config/variables.d.ts

@@ -1,2 +1,561 @@
-declare const variables: {};
+declare const variables: {
+    gray: {
+        5: string;
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        95: string;
+    };
+    slate: {
+        5: string;
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        95: string;
+    };
+    brown: {
+        5: string;
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        95: string;
+    };
+    orange: {
+        5: string;
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        95: string;
+    };
+    amber: {
+        5: string;
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        95: string;
+    };
+    yellow: {
+        5: string;
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        95: string;
+    };
+    lime: {
+        5: string;
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        95: string;
+    };
+    green: {
+        5: string;
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        95: string;
+    };
+    beryl: {
+        5: string;
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        95: string;
+    };
+    teal: {
+        5: string;
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        95: string;
+    };
+    cyan: {
+        5: string;
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        95: string;
+    };
+    sky: {
+        5: string;
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        95: string;
+    };
+    blue: {
+        5: string;
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        95: string;
+    };
+    indigo: {
+        5: string;
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        95: string;
+    };
+    violet: {
+        5: string;
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        95: string;
+    };
+    purple: {
+        5: string;
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        95: string;
+    };
+    fuchsia: {
+        5: string;
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        95: string;
+    };
+    pink: {
+        5: string;
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        95: string;
+    };
+    crimson: {
+        5: string;
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        95: string;
+    };
+    red: {
+        5: string;
+        10: string;
+        20: string;
+        30: string;
+        40: string;
+        50: string;
+        60: string;
+        70: string;
+        80: string;
+        90: string;
+        95: string;
+    };
+} & {
+    full: string;
+    fit: string;
+    max: string;
+    min: string;
+    screen: {
+        '4xs': number;
+        '3xs': number;
+        '2xs': number;
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+        '2xl': number;
+        '3xl': number;
+        '4xl': number;
+    };
+    'font-family': {
+        mono: string[];
+        sans: string[];
+        serif: string[];
+    };
+    'font-weight': {
+        thin: number;
+        extralight: number;
+        light: number;
+        regular: number;
+        medium: number;
+        semibold: number;
+        bold: number;
+        extrabold: number;
+        heavy: number;
+    };
+    'flex-direction': {
+        col: string;
+        'col-reverse': string;
+    };
+    'box-sizing': {
+        content: string;
+        border: string;
+    };
+    position: {
+        abs: string;
+        rel: string;
+    };
+    'transform-box': {
+        content: string;
+        border: string;
+        padding: string;
+        fill: string;
+        stroke: string;
+        view: string;
+    };
+    'animation-direction': {
+        alt: string;
+        'alt-reverse': string;
+    };
+    'background-clip': {
+        content: string;
+        border: string;
+        padding: string;
+    };
+    'background-origin': {
+        content: string;
+        border: string;
+        padding: string;
+    };
+    order: {
+        first: number;
+        last: number;
+    };
+    'shape-outside': {
+        content: string;
+        border: string;
+        padding: string;
+        margin: string;
+    };
+    'clip-path': {
+        content: string;
+        border: string;
+        padding: string;
+        margin: string;
+        fill: string;
+        stroke: string;
+        view: string;
+    };
+    current: string;
+    white: string;
+    black: string;
+    base: {
+        '@light': string;
+        '@dark': string;
+    };
+    canvas: {
+        '@light': string;
+        '@dark': string;
+    };
+    surface: {
+        '@light': string;
+        '@dark': string;
+    };
+    invert: {
+        '@light': string;
+        '@dark': string;
+    };
+    line: {
+        neutral: {
+            '@light': string;
+            '@dark': string;
+        };
+    };
+    gray: {
+        '@light': string;
+        '@dark': string;
+    };
+    slate: {
+        '@light': string;
+        '@dark': string;
+    };
+    brown: {
+        '@light': string;
+        '@dark': string;
+    };
+    orange: {
+        '@light': string;
+        '@dark': string;
+    };
+    amber: {
+        '@light': string;
+        '@dark': string;
+    };
+    yellow: {
+        '@light': string;
+        '@dark': string;
+    };
+    lime: {
+        '@light': string;
+        '@dark': string;
+    };
+    green: {
+        '@light': string;
+        '@dark': string;
+    };
+    beryl: {
+        '@light': string;
+        '@dark': string;
+    };
+    teal: {
+        '@light': string;
+        '@dark': string;
+    };
+    cyan: {
+        '@light': string;
+        '@dark': string;
+    };
+    sky: {
+        '@light': string;
+        '@dark': string;
+    };
+    blue: {
+        '@light': string;
+        '@dark': string;
+    };
+    indigo: {
+        '@light': string;
+        '@dark': string;
+    };
+    violet: {
+        '@light': string;
+        '@dark': string;
+    };
+    purple: {
+        '@light': string;
+        '@dark': string;
+    };
+    fuchsia: {
+        '@light': string;
+        '@dark': string;
+    };
+    pink: {
+        '@light': string;
+        '@dark': string;
+    };
+    crimson: {
+        '@light': string;
+        '@dark': string;
+    };
+    red: {
+        '@light': string;
+        '@dark': string;
+    };
+    text: {
+        invert: {
+            '@light': string;
+            '@dark': string;
+        };
+        strong: {
+            '@light': string;
+            '@dark': string;
+        };
+        neutral: {
+            '@light': string;
+            '@dark': string;
+        };
+        lightest: {
+            '@light': string;
+            '@dark': string;
+        };
+        lighter: {
+            '@light': string;
+            '@dark': string;
+        };
+        light: {
+            '@light': string;
+            '@dark': string;
+        };
+        gray: {
+            '@light': string;
+            '@dark': string;
+        };
+        slate: {
+            '@light': string;
+            '@dark': string;
+        };
+        brown: {
+            '@light': string;
+            '@dark': string;
+        };
+        orange: {
+            '@light': string;
+            '@dark': string;
+        };
+        amber: {
+            '@light': string;
+            '@dark': string;
+        };
+        yellow: {
+            '@light': string;
+            '@dark': string;
+        };
+        lime: {
+            '@light': string;
+            '@dark': string;
+        };
+        green: {
+            '@light': string;
+            '@dark': string;
+        };
+        beryl: {
+            '@light': string;
+            '@dark': string;
+        };
+        teal: {
+            '@light': string;
+            '@dark': string;
+        };
+        cyan: {
+            '@light': string;
+            '@dark': string;
+        };
+        sky: {
+            '@light': string;
+            '@dark': string;
+        };
+        blue: {
+            '@light': string;
+            '@dark': string;
+        };
+        indigo: {
+            '@light': string;
+            '@dark': string;
+        };
+        violet: {
+            '@light': string;
+            '@dark': string;
+        };
+        purple: {
+            '@light': string;
+            '@dark': string;
+        };
+        fuchsia: {
+            '@light': string;
+            '@dark': string;
+        };
+        pink: {
+            '@light': string;
+            '@dark': string;
+        };
+        crimson: {
+            '@light': string;
+            '@dark': string;
+        };
+        red: {
+            '@light': string;
+            '@dark': string;
+        };
+    };
+};
 export default variables;

package/dist/config/variables.mjs

@@ -1,7 +1,7 @@
 import colors from '@master/colors';
 import extend from '@techor/extend';
 
-const variables = extend(colors, {
+const _variables = {
     full: '100%',
     fit: 'fit-content',
     max: 'max-content',
@@ -226,8 +226,8 @@ const variables = extend(colors, {
     },
     text: {
         invert: {
-            '@light': '$(black)',
-            '@dark': '$(white)'
+            '@light': '$(white)',
+            '@dark': '$(black)'
         },
         strong: {
             '@light': '$(slate-95)',
@@ -330,6 +330,7 @@ const variables = extend(colors, {
             '@dark': '$(red-30)'
         }
     }
-});
+};
+const variables = extend(colors, _variables);
 
 export { variables as default };

package/dist/core.cjs

@@ -923,9 +923,15 @@ class MasterCSS {
                                         break;
                                     case 'host':
                                         selectorText = `:host(.${mode})`;
+                                        if (this.config.defaultMode === mode) {
+                                            selectorText += ',:host';
+                                        }
                                         break;
                                     case 'class':
-                                        selectorText = `.${mode}`;
+                                        selectorText = '.' + mode;
+                                        if (this.config.defaultMode === mode) {
+                                            selectorText += ',:root';
+                                        }
                                         break;
                                     default:
                                         return;
@@ -1011,7 +1017,7 @@ class MasterCSS {
         let prefix = '';
         let suffix = '}';
         if (variableCSSRule.parentRule) {
-            prefix += variableCSSRule.parentRule.conditionText.replace(/ /g, '') + '{';
+            prefix += '@media' + variableCSSRule.parentRule.conditionText.replace(/ /g, '') + '{';
             suffix += '}';
         }
         prefix += variableCSSRule.selectorText + '{';

package/dist/core.d.ts

@@ -84,7 +84,7 @@ export default class MasterCSS {
 }
 export declare const masterCSSs: MasterCSS[];
 export default interface MasterCSS {
-    readonly style: HTMLStyleElement;
+    style: HTMLStyleElement;
     styles: Record<string, string[]>;
     stylesBy: Record<string, string[]>;
     selectors: Record<string, [RegExp, string[]][]>;

package/dist/core.mjs

@@ -919,9 +919,15 @@ class MasterCSS {
                                         break;
                                     case 'host':
                                         selectorText = `:host(.${mode})`;
+                                        if (this.config.defaultMode === mode) {
+                                            selectorText += ',:host';
+                                        }
                                         break;
                                     case 'class':
-                                        selectorText = `.${mode}`;
+                                        selectorText = '.' + mode;
+                                        if (this.config.defaultMode === mode) {
+                                            selectorText += ',:root';
+                                        }
                                         break;
                                     default:
                                         return;
@@ -1007,7 +1013,7 @@ class MasterCSS {
         let prefix = '';
         let suffix = '}';
         if (variableCSSRule.parentRule) {
-            prefix += variableCSSRule.parentRule.conditionText.replace(/ /g, '') + '{';
+            prefix += '@media' + variableCSSRule.parentRule.conditionText.replace(/ /g, '') + '{';
             suffix += '}';
         }
         prefix += variableCSSRule.selectorText + '{';

package/package.json

@@ -1 +1 @@
-{"name":"@master/css","type":"module","scripts":{"build":"techor build \"src/**/*.ts\"","dev":"pnpm build --watch","test":"vitest","type-check":"tsc --noEmit","lint":"eslint src"},"license":"MIT","description":"The CSS language and framework for rapidly building modern and high-performance websites","author":"Aoyue Design LLC.","funding":"https://rc.css.master.co/sponsor","homepage":"https://css.master.co","bugs":{"url":"https://github.com/master-co/css/issues"},"repository":{"type":"git","url":"https://github.com/master-co/css.git","directory":"packages/core"},"keywords":["style","styles","html","variants","virtual","virtual-css","utility","css","ui","lightweight","class","webpack","plugin","integration","vite","parcel","build-tools","mastercss"],"sideEffects":false,"main":"./dist/index.cjs","jsnext:main":"./dist/index.mjs","esnext":"./dist/index.mjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"require":"./dist/index.cjs","import":"./dist/index.mjs","types":"./dist/index.d.ts"}},"bin":"./dist/bin/index.mjs","files":["dist"],"publishConfig":{"access":"public","provenance":true},"dependencies":{"@master/colors":"^2.1.0","@master/normal.css":"^3.1.0","@techor/extend":"^3.0.23","csstype":"^3.1.3"},"devDependencies":{"shared":"^2.0.0-rc.41"},"version":"2.0.0-rc.41"}
+{"name":"@master/css","type":"module","scripts":{"build":"techor build \"src/**/*.ts\"","dev":"pnpm build --watch","test":"vitest","type-check":"tsc --noEmit","lint":"eslint src"},"license":"MIT","description":"The CSS language and framework for rapidly building modern and high-performance websites","author":"Aoyue Design LLC.","funding":"https://rc.css.master.co/sponsor","homepage":"https://css.master.co","bugs":{"url":"https://github.com/master-co/css/issues"},"repository":{"type":"git","url":"https://github.com/master-co/css.git","directory":"packages/core"},"keywords":["style","styles","html","variants","virtual","virtual-css","utility","css","ui","lightweight","class","webpack","plugin","integration","vite","parcel","build-tools","mastercss"],"sideEffects":false,"main":"./dist/index.cjs","jsnext:main":"./dist/index.mjs","esnext":"./dist/index.mjs","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"require":"./dist/index.cjs","import":"./dist/index.mjs","types":"./dist/index.d.ts"}},"bin":"./dist/bin/index.mjs","files":["dist"],"publishConfig":{"access":"public","provenance":true},"dependencies":{"@master/colors":"^2.1.0","@master/normal.css":"^3.1.0","@techor/extend":"^3.0.23","csstype":"^3.1.3"},"devDependencies":{"shared":"^2.0.0-rc.42"},"version":"2.0.0-rc.42"}