@master/css 2.0.0-rc.3 → 2.0.0-rc.31

package/dist/config/variables.d.ts

@@ -1,93 +1,9 @@
 declare const variables: {
-    full: string;
-    fit: string;
-    max: string;
-    min: string;
-    'font-family': {
-        mono: string[];
-        sans: string[];
-        serif: 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-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;
-        black: string;
-    };
-    current: string;
     text: {
+        invert: {
+            '@light': string;
+            '@dark': string;
+        };
         strong: {
             '@light': string;
             '@dark': string;
@@ -193,20 +109,12 @@ declare const variables: {
         '@light': string;
         '@dark': string;
     };
-    canvas: {
-        '@light': string;
-        '@dark': string;
-    };
-    surface: {
+    invert: {
         '@light': string;
         '@dark': string;
     };
     white: string;
     black: string;
-    frame: {
-        '@light': string;
-        '@dark': string;
-    };
     gray: {
         '5': string;
         '10': string;
@@ -219,10 +127,8 @@ declare const variables: {
         '80': string;
         '90': string;
         '95': string;
-        '': {
-            '@light': string;
-            '@dark': string;
-        };
+        '@light': string;
+        '@dark': string;
     };
     slate: {
         '5': string;
@@ -236,10 +142,8 @@ declare const variables: {
         '80': string;
         '90': string;
         '95': string;
-        '': {
-            '@light': string;
-            '@dark': string;
-        };
+        '@light': string;
+        '@dark': string;
     };
     brown: {
         '5': string;
@@ -253,10 +157,8 @@ declare const variables: {
         '80': string;
         '90': string;
         '95': string;
-        '': {
-            '@light': string;
-            '@dark': string;
-        };
+        '@light': string;
+        '@dark': string;
     };
     orange: {
         '5': string;
@@ -270,10 +172,8 @@ declare const variables: {
         '80': string;
         '90': string;
         '95': string;
-        '': {
-            '@light': string;
-            '@dark': string;
-        };
+        '@light': string;
+        '@dark': string;
     };
     amber: {
         '5': string;
@@ -287,10 +187,8 @@ declare const variables: {
         '80': string;
         '90': string;
         '95': string;
-        '': {
-            '@light': string;
-            '@dark': string;
-        };
+        '@light': string;
+        '@dark': string;
     };
     yellow: {
         '5': string;
@@ -304,10 +202,8 @@ declare const variables: {
         '80': string;
         '90': string;
         '95': string;
-        '': {
-            '@light': string;
-            '@dark': string;
-        };
+        '@light': string;
+        '@dark': string;
     };
     lime: {
         '5': string;
@@ -321,10 +217,8 @@ declare const variables: {
         '80': string;
         '90': string;
         '95': string;
-        '': {
-            '@light': string;
-            '@dark': string;
-        };
+        '@light': string;
+        '@dark': string;
     };
     green: {
         '5': string;
@@ -338,10 +232,8 @@ declare const variables: {
         '80': string;
         '90': string;
         '95': string;
-        '': {
-            '@light': string;
-            '@dark': string;
-        };
+        '@light': string;
+        '@dark': string;
     };
     beryl: {
         '5': string;
@@ -355,10 +247,8 @@ declare const variables: {
         '80': string;
         '90': string;
         '95': string;
-        '': {
-            '@light': string;
-            '@dark': string;
-        };
+        '@light': string;
+        '@dark': string;
     };
     teal: {
         '5': string;
@@ -372,10 +262,8 @@ declare const variables: {
         '80': string;
         '90': string;
         '95': string;
-        '': {
-            '@light': string;
-            '@dark': string;
-        };
+        '@light': string;
+        '@dark': string;
     };
     cyan: {
         '5': string;
@@ -389,10 +277,8 @@ declare const variables: {
         '80': string;
         '90': string;
         '95': string;
-        '': {
-            '@light': string;
-            '@dark': string;
-        };
+        '@light': string;
+        '@dark': string;
     };
     sky: {
         '5': string;
@@ -406,10 +292,8 @@ declare const variables: {
         '80': string;
         '90': string;
         '95': string;
-        '': {
-            '@light': string;
-            '@dark': string;
-        };
+        '@light': string;
+        '@dark': string;
     };
     blue: {
         '5': string;
@@ -423,10 +307,8 @@ declare const variables: {
         '80': string;
         '90': string;
         '95': string;
-        '': {
-            '@light': string;
-            '@dark': string;
-        };
+        '@light': string;
+        '@dark': string;
     };
     indigo: {
         '5': string;
@@ -440,10 +322,8 @@ declare const variables: {
         '80': string;
         '90': string;
         '95': string;
-        '': {
-            '@light': string;
-            '@dark': string;
-        };
+        '@light': string;
+        '@dark': string;
     };
     violet: {
         '5': string;
@@ -457,10 +337,8 @@ declare const variables: {
         '80': string;
         '90': string;
         '95': string;
-        '': {
-            '@light': string;
-            '@dark': string;
-        };
+        '@light': string;
+        '@dark': string;
     };
     purple: {
         '5': string;
@@ -474,10 +352,8 @@ declare const variables: {
         '80': string;
         '90': string;
         '95': string;
-        '': {
-            '@light': string;
-            '@dark': string;
-        };
+        '@light': string;
+        '@dark': string;
     };
     fuchsia: {
         '5': string;
@@ -491,10 +367,8 @@ declare const variables: {
         '80': string;
         '90': string;
         '95': string;
-        '': {
-            '@light': string;
-            '@dark': string;
-        };
+        '@light': string;
+        '@dark': string;
     };
     pink: {
         '5': string;
@@ -508,10 +382,8 @@ declare const variables: {
         '80': string;
         '90': string;
         '95': string;
-        '': {
-            '@light': string;
-            '@dark': string;
-        };
+        '@light': string;
+        '@dark': string;
     };
     crimson: {
         '5': string;
@@ -525,10 +397,8 @@ declare const variables: {
         '80': string;
         '90': string;
         '95': string;
-        '': {
-            '@light': string;
-            '@dark': string;
-        };
+        '@light': string;
+        '@dark': string;
     };
     red: {
         '5': string;
@@ -542,10 +412,95 @@ declare const variables: {
         '80': string;
         '90': string;
         '95': string;
-        '': {
-            '@light': string;
-            '@dark': string;
-        };
+        '@light': string;
+        '@dark': string;
     };
+    full: string;
+    fit: string;
+    max: string;
+    min: string;
+    'font-family': {
+        mono: string[];
+        sans: string[];
+        serif: 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-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;
 };
 export default variables;

package/dist/config/variables.mjs

@@ -0,0 +1,114 @@
+import colors from '@master/colors';
+import screenSizes from '../tokens/screen-sizes.mjs';
+
+const variables = {
+    full: '100%',
+    fit: 'fit-content',
+    max: 'max-content',
+    min: 'min-content',
+    'font-family': {
+        mono: [
+            'ui-monospace',
+            'SFMono-Regular',
+            'Menlo',
+            'Monaco',
+            'Consolas',
+            'Liberation Mono',
+            'Courier New',
+            'monospace'
+        ],
+        sans: [
+            'ui-sans-serif',
+            'system-ui',
+            '-apple-system',
+            'BlinkMacSystemFont',
+            'Segoe UI',
+            'Roboto',
+            'Helvetica Neue',
+            'Arial',
+            'Noto Sans',
+            'sans-serif',
+            'Apple Color Emoji',
+            'Segoe UI Emoji',
+            'Segoe UI Symbol',
+            'Noto Color Emoji'
+        ],
+        serif: [
+            'ui-serif',
+            'Georgia',
+            'Cambria',
+            'Times New Roman',
+            'Times',
+            'serif'
+        ]
+    },
+    screen: screenSizes,
+    'font-weight': {
+        thin: 100,
+        extralight: 200,
+        light: 300,
+        regular: 400,
+        medium: 500,
+        semibold: 600,
+        bold: 700,
+        extrabold: 800,
+        heavy: 900
+    },
+    'flex-direction': {
+        col: 'column',
+        'col-reverse': 'column-reverse'
+    },
+    'box-sizing': {
+        content: 'content-box',
+        border: 'border-box'
+    },
+    position: {
+        abs: 'absolute',
+        rel: 'relative'
+    },
+    'transform-box': {
+        content: 'content-box',
+        border: 'border-box',
+        padding: 'padding-box',
+        fill: 'fill-box',
+        stroke: 'stroke-box',
+        view: 'view-box'
+    },
+    'animation-direction': {
+        alt: 'alternate',
+        'alt-reverse': 'alternate-reverse'
+    },
+    'background-clip': {
+        content: 'content-box',
+        border: 'border-box',
+        padding: 'padding-box'
+    },
+    'background-origin': {
+        content: 'content-box',
+        border: 'border-box',
+        padding: 'padding-box'
+    },
+    order: {
+        first: -999999,
+        last: 999999
+    },
+    'shape-outside': {
+        content: 'content-box',
+        border: 'border-box',
+        padding: 'padding-box',
+        margin: 'margin-box'
+    },
+    'clip-path': {
+        content: 'content-box',
+        border: 'border-box',
+        padding: 'padding-box',
+        margin: 'margin-box',
+        fill: 'fill-box',
+        stroke: 'stroke-box',
+        view: 'view-box'
+    },
+    current: 'currentColor',
+    ...colors
+};
+
+export { variables as default };