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

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',
@@ -120,6 +120,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: {
@@ -138,96 +157,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)',
@@ -330,6 +476,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.43"},"version":"2.0.0-rc.43"}