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

package/dist/config/index.cjs

@@ -5,7 +5,7 @@ var selectors = require('./selectors.cjs');
 var utilities = require('./utilities.cjs');
 var animations = require('./animations.cjs');
 var variables = require('./variables.cjs');
-var rules = require('./rules.cjs');
+var syntaxes = require('./syntaxes.cjs');
 var modes = require('./modes.cjs');
 var functions = require('./functions.cjs');
 
@@ -13,7 +13,7 @@ const config = {
     at,
     selectors,
     utilities,
-    rules,
+    syntaxes,
     functions,
     animations,
     variables,
@@ -30,7 +30,7 @@ exports.selectors = selectors;
 exports.utilities = utilities;
 exports.animations = animations;
 exports.variables = variables;
-exports.rules = rules;
+exports.syntaxes = syntaxes;
 exports.modes = modes;
 exports.functions = functions;
 exports.config = config;

package/dist/config/index.d.ts

@@ -3,14 +3,14 @@ import selectors from './selectors';
 import utilities from './utilities';
 import animations from './animations';
 import variables from './variables';
-import rules from './rules';
+import syntaxes from './syntaxes';
 import modes from './modes';
 import functions from './functions';
 import type { PropertiesHyphen } from 'csstype';
-import type { Rule, RuleDefinition, ValueComponent } from '../rule';
+import type { Rule, SyntaxDefinition, ValueComponent } from '../rule';
 declare const config: Config;
-export { config, at, selectors, utilities, rules, functions, animations, variables, modes };
-export type VariableValue = number | string | Array<number | string>;
+export { config, at, selectors, utilities, syntaxes, functions, animations, variables, modes };
+export type VariableValue = number | string | false | Array<number | string>;
 export type VariableDefinition = {
     [key in '' | `@${string}` | string]?: VariableValue | VariableDefinition;
 } | VariableValue;
@@ -29,11 +29,11 @@ export type AtDefinitions = {
 export type StyleDefinitions = {
     [key: string]: string | StyleDefinitions;
 };
-export type RuleDefinitions = {
-    [key in keyof typeof rules | string]?: RuleDefinition;
+export type SyntaxDefinitions = {
+    [key in keyof typeof syntaxes | string]?: SyntaxDefinition;
 };
 export type VariableDefinitions = {
-    [key in keyof typeof rules]?: VariableDefinition;
+    [key in keyof typeof syntaxes]?: VariableDefinition;
 } & {
     [key: string]: VariableDefinition;
 };
@@ -59,7 +59,7 @@ export interface Config {
     selectors?: SelectorDefinitions;
     utilities?: UtilityDefinitions;
     variables?: VariableDefinitions;
-    rules?: RuleDefinitions;
+    syntaxes?: SyntaxDefinitions;
     rootSize?: number;
     baseUnit?: number;
     scope?: string;

package/dist/config/index.mjs

@@ -3,7 +3,7 @@ import selectors from './selectors.mjs';
 import utilities from './utilities.mjs';
 import animations from './animations.mjs';
 import variables from './variables.mjs';
-import rules from './rules.mjs';
+import syntaxes from './syntaxes.mjs';
 import modes from './modes.mjs';
 import functions from './functions.mjs';
 
@@ -11,7 +11,7 @@ const config = {
     at,
     selectors,
     utilities,
-    rules,
+    syntaxes,
     functions,
     animations,
     variables,
@@ -23,4 +23,4 @@ const config = {
     important: false
 };
 
-export { animations, at, config, functions, modes, rules, selectors, utilities, variables };
+export { animations, at, config, functions, modes, selectors, syntaxes, utilities, variables };

package/dist/config/{rules.cjs → syntaxes.cjs}

@@ -5,7 +5,7 @@ var layer = require('../layer.cjs');
 var common = require('../common.cjs');
 var autofillSolidStyle = require('../utils/autofill-solid-style.cjs');
 
-const rules = {
+const syntaxes = {
     group: {
         matcher: /^(?:.+?[*_>~+])?\{.+?\}/,
         layer: layer.Shorthand,
@@ -107,9 +107,9 @@ const rules = {
             })('');
             addName();
             for (const eachName of names){
-                const rules = this.css.generate(eachName);
-                if (rules.length) {
-                    for (const eachRule of rules){
+                const syntaxes = this.css.generate(eachName);
+                if (syntaxes.length) {
+                    for (const eachRule of syntaxes){
                         handleRule(eachRule);
                     }
                 } else {
@@ -2280,4 +2280,4 @@ const rules = {
     }
 };
 
-module.exports = rules;
+module.exports = syntaxes;

package/dist/config/syntaxes.d.ts

@@ -0,0 +1,282 @@
+import type { SyntaxDefinition } from '../rule';
+import Layer from '../layer';
+declare const syntaxes: {
+    group: SyntaxDefinition;
+    variable: SyntaxDefinition;
+    'font-size': SyntaxDefinition;
+    'font-weight': SyntaxDefinition;
+    'font-family': SyntaxDefinition;
+    'font-smoothing': SyntaxDefinition;
+    'font-style': SyntaxDefinition;
+    'font-variant-numeric': SyntaxDefinition;
+    'font-variant': {
+        ambiguousKeys: string[];
+        layer: Layer;
+    };
+    font: SyntaxDefinition;
+    'font-feature-settings': SyntaxDefinition;
+    color: SyntaxDefinition;
+    'margin-left': SyntaxDefinition;
+    'margin-right': SyntaxDefinition;
+    'margin-top': SyntaxDefinition;
+    'margin-bottom': SyntaxDefinition;
+    'margin-x': SyntaxDefinition;
+    'margin-y': SyntaxDefinition;
+    margin: SyntaxDefinition;
+    'margin-inline-start': SyntaxDefinition;
+    'margin-inline-end': SyntaxDefinition;
+    'margin-inline': SyntaxDefinition;
+    'padding-left': SyntaxDefinition;
+    'padding-right': SyntaxDefinition;
+    'padding-top': SyntaxDefinition;
+    'padding-bottom': SyntaxDefinition;
+    'padding-x': SyntaxDefinition;
+    'padding-y': SyntaxDefinition;
+    padding: SyntaxDefinition;
+    'padding-inline-start': SyntaxDefinition;
+    'padding-inline-end': SyntaxDefinition;
+    'padding-inline': SyntaxDefinition;
+    'flex-basis': SyntaxDefinition;
+    'flex-wrap': SyntaxDefinition;
+    'flex-grow': SyntaxDefinition;
+    'flex-shrink': SyntaxDefinition;
+    'flex-direction': SyntaxDefinition;
+    flex: SyntaxDefinition;
+    display: SyntaxDefinition;
+    width: SyntaxDefinition;
+    height: SyntaxDefinition;
+    'min-width': SyntaxDefinition;
+    'min-height': SyntaxDefinition;
+    size: SyntaxDefinition;
+    'min-size': SyntaxDefinition;
+    'max-size': SyntaxDefinition;
+    'box-sizing': SyntaxDefinition;
+    'box-decoration-break': SyntaxDefinition;
+    contain: SyntaxDefinition;
+    content: SyntaxDefinition;
+    'counter-increment': SyntaxDefinition;
+    'counter-reset': SyntaxDefinition;
+    'letter-spacing': SyntaxDefinition;
+    'line-height': SyntaxDefinition;
+    'object-fit': SyntaxDefinition;
+    'object-position': SyntaxDefinition;
+    'text-align': SyntaxDefinition;
+    'text-decoration-color': SyntaxDefinition;
+    'text-decoration-style': SyntaxDefinition;
+    'text-decoration-thickness': SyntaxDefinition;
+    'text-decoration-line': SyntaxDefinition;
+    'text-decoration': SyntaxDefinition;
+    'text-underline-offset': SyntaxDefinition;
+    'text-underline-position': SyntaxDefinition;
+    'text-overflow': SyntaxDefinition;
+    'text-orientation': SyntaxDefinition;
+    'text-transform': SyntaxDefinition;
+    'text-rendering': SyntaxDefinition;
+    'text-wrap': SyntaxDefinition;
+    'text-indent': SyntaxDefinition;
+    'vertical-align': SyntaxDefinition;
+    columns: SyntaxDefinition;
+    'white-space': SyntaxDefinition;
+    top: SyntaxDefinition;
+    bottom: SyntaxDefinition;
+    left: SyntaxDefinition;
+    right: SyntaxDefinition;
+    inset: SyntaxDefinition;
+    'max-height': SyntaxDefinition;
+    'max-width': SyntaxDefinition;
+    opacity: SyntaxDefinition;
+    visibility: SyntaxDefinition;
+    clear: SyntaxDefinition;
+    float: SyntaxDefinition;
+    isolation: SyntaxDefinition;
+    'overflow-x': SyntaxDefinition;
+    'overflow-y': SyntaxDefinition;
+    overflow: SyntaxDefinition;
+    'overscroll-behavior-x': SyntaxDefinition;
+    'overscroll-behavior-y': SyntaxDefinition;
+    'overscroll-behavior': SyntaxDefinition;
+    'z-index': SyntaxDefinition;
+    position: SyntaxDefinition;
+    cursor: SyntaxDefinition;
+    'pointer-events': SyntaxDefinition;
+    resize: SyntaxDefinition;
+    'touch-action': SyntaxDefinition;
+    'word-break': SyntaxDefinition;
+    'word-spacing': SyntaxDefinition;
+    'user-drag': SyntaxDefinition;
+    'user-select': SyntaxDefinition;
+    'text-shadow': SyntaxDefinition;
+    'text-size': SyntaxDefinition;
+    'text-fill-color': SyntaxDefinition;
+    'text-stroke-width': SyntaxDefinition;
+    'text-stroke-color': SyntaxDefinition;
+    'text-stroke': SyntaxDefinition;
+    'text-truncate': SyntaxDefinition;
+    'box-shadow': SyntaxDefinition;
+    'table-layout': SyntaxDefinition;
+    'transform-box': SyntaxDefinition;
+    'transform-style': SyntaxDefinition;
+    'transform-origin': SyntaxDefinition;
+    transform: SyntaxDefinition;
+    'transition-property': SyntaxDefinition;
+    'transition-timing-function': SyntaxDefinition;
+    'transition-duration': SyntaxDefinition;
+    'transition-delay': SyntaxDefinition;
+    transition: SyntaxDefinition;
+    'animation-delay': SyntaxDefinition;
+    'animation-direction': SyntaxDefinition;
+    'animation-duration': SyntaxDefinition;
+    'animation-fill-mode': SyntaxDefinition;
+    'animation-iteration-count': SyntaxDefinition;
+    'animation-name': SyntaxDefinition;
+    'animation-play-state': SyntaxDefinition;
+    'animation-timing-function': SyntaxDefinition;
+    animation: SyntaxDefinition;
+    'border-collapse': SyntaxDefinition;
+    'border-spacing': SyntaxDefinition;
+    'border-top-color': SyntaxDefinition;
+    'border-bottom-color': SyntaxDefinition;
+    'border-left-color': SyntaxDefinition;
+    'border-right-color': SyntaxDefinition;
+    'border-x-color': SyntaxDefinition;
+    'border-y-color': SyntaxDefinition;
+    'border-color': SyntaxDefinition;
+    'border-top-left-radius': SyntaxDefinition;
+    'border-top-right-radius': SyntaxDefinition;
+    'border-bottom-left-radius': SyntaxDefinition;
+    'border-bottom-right-radius': SyntaxDefinition;
+    'border-top-radius': SyntaxDefinition;
+    'border-bottom-radius': SyntaxDefinition;
+    'border-left-radius': SyntaxDefinition;
+    'border-right-radius': SyntaxDefinition;
+    'border-radius': SyntaxDefinition;
+    'border-top-style': SyntaxDefinition;
+    'border-bottom-style': SyntaxDefinition;
+    'border-left-style': SyntaxDefinition;
+    'border-right-style': SyntaxDefinition;
+    'border-x-style': SyntaxDefinition;
+    'border-y-style': SyntaxDefinition;
+    'border-style': SyntaxDefinition;
+    'border-top-width': SyntaxDefinition;
+    'border-bottom-width': SyntaxDefinition;
+    'border-left-width': SyntaxDefinition;
+    'border-right-width': SyntaxDefinition;
+    'border-x-width': SyntaxDefinition;
+    'border-y-width': SyntaxDefinition;
+    'border-width': SyntaxDefinition;
+    'border-image-repeat': SyntaxDefinition;
+    'border-image-slice': SyntaxDefinition;
+    'border-image-source': SyntaxDefinition;
+    'border-image-width': SyntaxDefinition;
+    'border-image-outset': SyntaxDefinition;
+    'border-image': SyntaxDefinition;
+    'border-top': SyntaxDefinition;
+    'border-bottom': SyntaxDefinition;
+    'border-left': SyntaxDefinition;
+    'border-right': SyntaxDefinition;
+    'border-x': SyntaxDefinition;
+    'border-y': SyntaxDefinition;
+    border: SyntaxDefinition;
+    'background-attachment': SyntaxDefinition;
+    'background-blend-mode': SyntaxDefinition;
+    'background-color': SyntaxDefinition;
+    'background-clip': SyntaxDefinition;
+    'background-origin': SyntaxDefinition;
+    'background-position': SyntaxDefinition;
+    'background-repeat': SyntaxDefinition;
+    'background-size': SyntaxDefinition;
+    'background-image': SyntaxDefinition;
+    background: SyntaxDefinition;
+    gradient: SyntaxDefinition;
+    'mix-blend-mode': SyntaxDefinition;
+    'backdrop-filter': SyntaxDefinition;
+    filter: SyntaxDefinition;
+    fill: SyntaxDefinition;
+    'stroke-dasharray': SyntaxDefinition;
+    'stroke-dashoffset': SyntaxDefinition;
+    'stroke-width': SyntaxDefinition;
+    stroke: SyntaxDefinition;
+    x: SyntaxDefinition;
+    y: SyntaxDefinition;
+    cx: SyntaxDefinition;
+    cy: SyntaxDefinition;
+    rx: SyntaxDefinition;
+    ry: SyntaxDefinition;
+    'grid-column-start': SyntaxDefinition;
+    'grid-column-end': SyntaxDefinition;
+    'grid-column-span': SyntaxDefinition;
+    'grid-column': SyntaxDefinition;
+    'grid-columns': SyntaxDefinition;
+    'grid-row-start': SyntaxDefinition;
+    'grid-row-end': SyntaxDefinition;
+    'grid-row-span': SyntaxDefinition;
+    'grid-row': SyntaxDefinition;
+    'grid-rows': SyntaxDefinition;
+    'grid-auto-columns': SyntaxDefinition;
+    'grid-auto-flow': SyntaxDefinition;
+    'grid-auto-rows': SyntaxDefinition;
+    'grid-template-areas': SyntaxDefinition;
+    'grid-template-columns': SyntaxDefinition;
+    'grid-template-rows': SyntaxDefinition;
+    'grid-template': SyntaxDefinition;
+    'grid-area': SyntaxDefinition;
+    grid: SyntaxDefinition;
+    'column-gap': SyntaxDefinition;
+    'row-gap': SyntaxDefinition;
+    gap: SyntaxDefinition;
+    order: SyntaxDefinition;
+    'break-inside': SyntaxDefinition;
+    'break-before': SyntaxDefinition;
+    'break-after': SyntaxDefinition;
+    'aspect-ratio': SyntaxDefinition;
+    'column-span': SyntaxDefinition;
+    'align-content': SyntaxDefinition;
+    'align-items': SyntaxDefinition;
+    'align-self': SyntaxDefinition;
+    'justify-content': SyntaxDefinition;
+    'justify-items': SyntaxDefinition;
+    'justify-self': SyntaxDefinition;
+    'place-content': SyntaxDefinition;
+    'place-items': SyntaxDefinition;
+    'place-self': SyntaxDefinition;
+    'list-style-position': SyntaxDefinition;
+    'list-style-type': SyntaxDefinition;
+    'list-style-image': SyntaxDefinition;
+    'list-style': SyntaxDefinition;
+    'outline-color': SyntaxDefinition;
+    'outline-offset': SyntaxDefinition;
+    'outline-style': SyntaxDefinition;
+    'outline-width': SyntaxDefinition;
+    outline: SyntaxDefinition;
+    'accent-color': SyntaxDefinition;
+    appearance: SyntaxDefinition;
+    'caret-color': SyntaxDefinition;
+    'scroll-behavior': SyntaxDefinition;
+    'scroll-margin-left': SyntaxDefinition;
+    'scroll-margin-right': SyntaxDefinition;
+    'scroll-margin-top': SyntaxDefinition;
+    'scroll-margin-bottom': SyntaxDefinition;
+    'scroll-margin-x': SyntaxDefinition;
+    'scroll-margin-y': SyntaxDefinition;
+    'scroll-margin': SyntaxDefinition;
+    'scroll-padding-left': SyntaxDefinition;
+    'scroll-padding-right': SyntaxDefinition;
+    'scroll-padding-top': SyntaxDefinition;
+    'scroll-padding-bottom': SyntaxDefinition;
+    'scroll-padding-x': SyntaxDefinition;
+    'scroll-padding-y': SyntaxDefinition;
+    'scroll-padding': SyntaxDefinition;
+    'scroll-snap-align': SyntaxDefinition;
+    'scroll-snap-stop': SyntaxDefinition;
+    'scroll-snap-type': SyntaxDefinition;
+    'will-change': SyntaxDefinition;
+    'writing-mode': SyntaxDefinition;
+    direction: SyntaxDefinition;
+    'shape-outside': SyntaxDefinition;
+    'shape-margin': SyntaxDefinition;
+    'shape-image-threshold': SyntaxDefinition;
+    'clip-path': SyntaxDefinition;
+    quotes: SyntaxDefinition;
+    'mask-image': SyntaxDefinition;
+};
+export default syntaxes;

package/dist/config/{rules.mjs → syntaxes.mjs}

@@ -3,7 +3,7 @@ import Layer from '../layer.mjs';
 import { VALUE_DELIMITERS, NUMBER_VALUE_REGEX, COLOR_VALUE_REGEX, BORDER_STYLE_VALUES, IMAGE_VALUE_REGEX } from '../common.mjs';
 import autofillSolidStyle from '../utils/autofill-solid-style.mjs';
 
-const rules = {
+const syntaxes = {
     group: {
         matcher: /^(?:.+?[*_>~+])?\{.+?\}/,
         layer: Layer.Shorthand,
@@ -105,9 +105,9 @@ const rules = {
             })('');
             addName();
             for (const eachName of names){
-                const rules = this.css.generate(eachName);
-                if (rules.length) {
-                    for (const eachRule of rules){
+                const syntaxes = this.css.generate(eachName);
+                if (syntaxes.length) {
+                    for (const eachRule of syntaxes){
                         handleRule(eachRule);
                     }
                 } else {
@@ -2278,4 +2278,4 @@ const rules = {
     }
 };
 
-export { rules as default };
+export { syntaxes as default };

package/dist/config/utilities.cjs

@@ -11,7 +11,8 @@ const utilities = {
         'border-radius': '1e9em'
     },
     round: {
-        'border-radius': '50%'
+        'border-radius': '50%',
+        'aspect-ratio': '1/1'
     },
     hidden: {
         display: 'none'

package/dist/config/utilities.d.ts

@@ -10,6 +10,7 @@ declare const utilities: {
     };
     readonly round: {
         readonly 'border-radius': "50%";
+        readonly 'aspect-ratio': "1/1";
     };
     readonly hidden: {
         readonly display: "none";

package/dist/config/utilities.mjs

@@ -9,7 +9,8 @@ const utilities = {
         'border-radius': '1e9em'
     },
     round: {
-        'border-radius': '50%'
+        'border-radius': '50%',
+        'aspect-ratio': '1/1'
     },
     hidden: {
         display: 'none'

package/dist/config/variables.cjs

@@ -1,8 +1,9 @@
 'use strict';
 
 var colors = require('@master/colors');
+var extend = require('@techor/extend');
 
-const variables = {
+const variables = extend(colors, {
     full: '100%',
     fit: 'fit-content',
     max: 'max-content',
@@ -121,7 +122,216 @@ const variables = {
         view: 'view-box'
     },
     current: 'currentColor',
-    ...colors
-};
+    white: '#ffffff',
+    black: '#000000',
+    base: {
+        '@light': '$(white)',
+        '@dark': '$(gray-95)'
+    },
+    canvas: {
+        '@light': '$(slate-5)',
+        '@dark': '$(gray-90)'
+    },
+    surface: {
+        '@light': '$(white)',
+        '@dark': '$(gray-80)'
+    },
+    invert: {
+        '@light': '$(black)',
+        '@dark': '$(white)'
+    },
+    line: {
+        neutral: {
+            '@light': '$(slate-60)',
+            '@dark': '$(gray-30)'
+        }
+    },
+    gray: {
+        '@light': '$(gray-30)',
+        '@dark': '$(gray-40)'
+    },
+    slate: {
+        '@light': '$(slate-30)',
+        '@dark': '$(slate-40)'
+    },
+    brown: {
+        '@light': '$(brown-40)',
+        '@dark': '$(brown-50)'
+    },
+    orange: {
+        '@light': '$(orange-40)',
+        '@dark': '$(orange-50)'
+    },
+    amber: {
+        '@light': '$(amber-40)',
+        '@dark': '$(amber-50)'
+    },
+    yellow: {
+        '@light': '$(yellow-40)',
+        '@dark': '$(yellow-50)'
+    },
+    lime: {
+        '@light': '$(lime-40)',
+        '@dark': '$(lime-50)'
+    },
+    green: {
+        '@light': '$(green-40)',
+        '@dark': '$(green-50)'
+    },
+    beryl: {
+        '@light': '$(beryl-40)',
+        '@dark': '$(beryl-50)'
+    },
+    teal: {
+        '@light': '$(teal-40)',
+        '@dark': '$(teal-50)'
+    },
+    cyan: {
+        '@light': '$(cyan-40)',
+        '@dark': '$(cyan-50)'
+    },
+    sky: {
+        '@light': '$(sky-60)',
+        '@dark': '$(sky-50)'
+    },
+    blue: {
+        '@light': '$(blue-60)',
+        '@dark': '$(blue-50)'
+    },
+    indigo: {
+        '@light': '$(indigo-60)',
+        '@dark': '$(indigo-50)'
+    },
+    violet: {
+        '@light': '$(violet-60)',
+        '@dark': '$(violet-50)'
+    },
+    purple: {
+        '@light': '$(purple-60)',
+        '@dark': '$(purple-50)'
+    },
+    fuchsia: {
+        '@light': '$(fuchsia-60)',
+        '@dark': '$(fuchsia-50)'
+    },
+    pink: {
+        '@light': '$(pink-60)',
+        '@dark': '$(pink-50)'
+    },
+    crimson: {
+        '@light': '$(crimson-60)',
+        '@dark': '$(crimson-50)'
+    },
+    red: {
+        '@light': '$(red-60)',
+        '@dark': '$(red-50)'
+    },
+    text: {
+        invert: {
+            '@light': '$(black)',
+            '@dark': '$(white)'
+        },
+        strong: {
+            '@light': '$(slate-95)',
+            '@dark': '$(gray-10)'
+        },
+        neutral: {
+            '@light': '$(slate-70)',
+            '@dark': '$(gray-30)'
+        },
+        lightest: {
+            '@light': '$(slate-30)',
+            '@dark': '$(gray-60)'
+        },
+        lighter: {
+            '@light': '$(slate-40)',
+            '@dark': '$(gray-50)'
+        },
+        light: {
+            '@light': '$(slate-50)',
+            '@dark': '$(gray-40)'
+        },
+        gray: {
+            '@light': '$(gray-60)',
+            '@dark': '$(gray-30)'
+        },
+        slate: {
+            '@light': '$(slate-60)',
+            '@dark': '$(slate-30)'
+        },
+        brown: {
+            '@light': '$(brown-60)',
+            '@dark': '$(brown-30)'
+        },
+        orange: {
+            '@light': '$(orange-60)',
+            '@dark': '$(orange-30)'
+        },
+        amber: {
+            '@light': '$(amber-60)',
+            '@dark': '$(amber-40)'
+        },
+        yellow: {
+            '@light': '$(yellow-60)',
+            '@dark': '$(yellow-40)'
+        },
+        lime: {
+            '@light': '$(lime-70)',
+            '@dark': '$(lime-40)'
+        },
+        green: {
+            '@light': '$(green-70)',
+            '@dark': '$(green-40)'
+        },
+        beryl: {
+            '@light': '$(beryl-70)',
+            '@dark': '$(beryl-40)'
+        },
+        teal: {
+            '@light': '$(teal-70)',
+            '@dark': '$(teal-40)'
+        },
+        cyan: {
+            '@light': '$(cyan-70)',
+            '@dark': '$(cyan-40)'
+        },
+        sky: {
+            '@light': '$(sky-70)',
+            '@dark': '$(sky-30)'
+        },
+        blue: {
+            '@light': '$(blue-60)',
+            '@dark': '$(blue-30)'
+        },
+        indigo: {
+            '@light': '$(indigo-60)',
+            '@dark': '$(indigo-30)'
+        },
+        violet: {
+            '@light': '$(violet-60)',
+            '@dark': '$(violet-30)'
+        },
+        purple: {
+            '@light': '$(purple-60)',
+            '@dark': '$(purple-30)'
+        },
+        fuchsia: {
+            '@light': '$(fuchsia-60)',
+            '@dark': '$(fuchsia-30)'
+        },
+        pink: {
+            '@light': '$(pink-60)',
+            '@dark': '$(pink-30)'
+        },
+        crimson: {
+            '@light': '$(crimson-60)',
+            '@dark': '$(crimson-30)'
+        },
+        red: {
+            '@light': '$(red-60)',
+            '@dark': '$(red-30)'
+        }
+    }
+});
 
 module.exports = variables;