@lightspeed/design-system-css 0.2.0 → 0.5.0

package/dist/themes/themeToScss.js

@@ -1,60 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const fs_1 = tslib_1.__importDefault(require("fs"));
-const types_1 = require("./types");
-const light_1 = require("./xseries/light");
-const dark_1 = require("./xseries/dark");
-const THEME_DIR = './src/vend.ui/styles/global/colour/themes';
-const HEADER = '// THIS IS A GENERATED FILE. DO NOT EDIT.\n\n';
-const NO_LINT_START = '// stylelint-disable vend/use-colour-function';
-const NO_LINT_END = '// stylelint-enable vend/use-colour-function';
-const themes = [
-    {
-        theme: light_1.xSeriesLightTheme,
-        mapName: 'vd-xseries-theme-light',
-        filename: `${THEME_DIR}/xseries/_theme-light.scss`,
-    },
-    {
-        theme: dark_1.xSeriesDarkTheme,
-        mapName: 'vd-xseries-theme-dark',
-        filename: `${THEME_DIR}/xseries/_theme-dark.scss`,
-    },
-];
-const camelToKebab = (s) => s.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
-const getKebabKey = (key) => {
-    // supplementaryText needs two kebab dashes, supplementary--text ¯\_(ツ)_/¯
-    return camelToKebab(key === 'supplementaryText' ? 'supplementary-Text' : key);
-};
-const saveScssMapFile = (filename, content) => {
-    fs_1.default.writeFile(filename, content, err => {
-        if (err) {
-            // eslint-disable-next-line no-console
-            console.error(err);
-            process.exit(1);
-        }
-    });
-};
-// Converts theme to SCSS map
-exports.themeToScss = ({ theme, mapName, filename }) => {
-    const colours = Object.entries(theme).map(c => {
-        const kebabKey = getKebabKey(c[0]);
-        return `\n  ${kebabKey}:${c[1]}`;
-    });
-    const scssMap = `${HEADER}${NO_LINT_START}\n\n$${mapName}: (${colours});\n\n${NO_LINT_END}`;
-    return saveScssMapFile(filename, scssMap);
-};
-// Generates SCSS lists of required / available theme keys
-const requiredThemeKeysToScss = () => {
-    const baseKeys = Object.keys(light_1.xSeriesLightTheme).map(k => getKebabKey(k));
-    const rgbKeys = types_1.requiredRgbSwatches.map(k => getKebabKey(k));
-    const allKeys = baseKeys.concat(rgbKeys.map(k => `${k}-rgb`));
-    const requiredBaseKeys = `$vd-theme-required-base-keys: ${baseKeys};`;
-    const requiredRgbKeys = `$vd-theme-available-rgb-keys: ${rgbKeys};`;
-    const availableThemeKeys = `$vd-theme-available-keys: ${allKeys};`;
-    const scssList = `${HEADER}${requiredBaseKeys}\n${requiredRgbKeys}\n${availableThemeKeys}`;
-    return saveScssMapFile(`${THEME_DIR}/_theme-keys.scss`, scssList);
-};
-themes.forEach(theme => exports.themeToScss(theme));
-requiredThemeKeysToScss();
-//# sourceMappingURL=themeToScss.js.map

package/dist/themes/themeToScss.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"themeToScss.js","sourceRoot":"","sources":["../../src/themes/themeToScss.ts"],"names":[],"mappings":"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"}

package/dist/themes/types.d.ts

@@ -1,54 +0,0 @@
-export interface ThemeConfig {
-    theme: Theme;
-    mapName: string;
-    filename: string;
-}
-export interface Theme {
-    background: string;
-    backgroundInverse: string;
-    box: string;
-    boxInverse: string;
-    boxSupplementary: string;
-    do: string;
-    doDarker: string;
-    doHighlight: string;
-    doLighter: string;
-    framing: string;
-    framingInverse: string;
-    go: string;
-    goDarker: string;
-    goHighlight: string;
-    goLighter: string;
-    goldenSand: string;
-    gothic: string;
-    keyline: string;
-    keylineInverse: string;
-    lavenderPurple: string;
-    navIconSelected: string;
-    navIconUnselected: string;
-    navSideDrawer: string;
-    navSideTabs: string;
-    navTop: string;
-    newYorkPink: string;
-    no: string;
-    noDarker: string;
-    noHighlight: string;
-    noLighter: string;
-    overlay: string;
-    selectArrowsBg: string;
-    shadow: string;
-    shuttleGray: string;
-    sinbad: string;
-    success: string;
-    supplementary: string;
-    supplementaryDarker: string;
-    supplementaryHighlight: string;
-    supplementaryLighter: string;
-    supplementaryText: string;
-    tacao: string;
-    text: string;
-    textAction: string;
-    textInverse: string;
-    textNav: string;
-}
-export declare const requiredRgbSwatches: string[];

package/dist/themes/types.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-// Some swatches require an "rgb" swatch (e.g. vd-background--rgb) to help apps integrate themes
-exports.requiredRgbSwatches = [
-    'background',
-    'box',
-    'boxInverse',
-    'do',
-    'go',
-    'navSideDrawer',
-    'navSideTabs',
-    'navTop',
-    'no',
-    'supplementary',
-];
-//# sourceMappingURL=types.js.map

package/dist/themes/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/themes/types.ts"],"names":[],"mappings":";;AAuDA,gGAAgG;AACnF,QAAA,mBAAmB,GAAG;IACjC,YAAY;IACZ,KAAK;IACL,YAAY;IACZ,IAAI;IACJ,IAAI;IACJ,eAAe;IACf,aAAa;IACb,QAAQ;IACR,IAAI;IACJ,eAAe;CAChB,CAAA"}

package/dist/themes/xseries/dark.d.ts

@@ -1,68 +0,0 @@
-import { Theme } from '../types';
-export declare const xSeriesDarkThemeByCategory: {
-    backgrounds: {
-        inert: {
-            background: string;
-            box: string;
-            backgroundInverse: string;
-            boxInverse: string;
-            success: string;
-        };
-        interactive: {
-            goLighter: string;
-            go: string;
-            goDarker: string;
-            goHighlight: string;
-            noLighter: string;
-            no: string;
-            noDarker: string;
-            supplementaryLighter: string;
-            supplementary: string;
-            supplementaryDarker: string;
-        };
-    };
-    foregrounds: {
-        inert: {
-            text: string;
-            textInverse: string;
-            textAction: string;
-            selectArrowsBg: string;
-            shadow: string;
-            overlay: string;
-        };
-        borders: {
-            framing: string;
-            keyline: string;
-            framingInverse: string;
-            keylineInverse: string;
-        };
-    };
-    discretionary: {
-        goldenSand: string;
-        tacao: string;
-        newYorkPink: string;
-        gothic: string;
-        lavenderPurple: string;
-        sinbad: string;
-        shuttleGray: string;
-    };
-    navigation: {
-        navTop: string;
-        navSideTabs: string;
-        navSideDrawer: string;
-        navIconUnselected: string;
-        navIconSelected: string;
-    };
-    deprecated: {
-        boxSupplementary: string;
-        textNav: string;
-        supplementaryText: string;
-        supplementaryHighlight: string;
-        doHighlight: string;
-        noHighlight: string;
-        doLighter: string;
-        do: string;
-        doDarker: string;
-    };
-};
-export declare const xSeriesDarkTheme: Theme;

package/dist/themes/xseries/dark.js

@@ -1,84 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const backgrounds = {
-    inert: {
-        background: '#141217',
-        box: '#1E1C21',
-        backgroundInverse: '#F4F2F5',
-        boxInverse: '#FFFFFF',
-        success: '#15BF20',
-    },
-    interactive: {
-        goLighter: '#6054FF',
-        go: '#477BFF',
-        goDarker: '#352ACF',
-        goHighlight: 'rgba(0, 23, 229, .1)',
-        noLighter: '#D4301D',
-        no: '#EB4F29',
-        noDarker: '#A12416',
-        supplementaryLighter: '#3C6996',
-        supplementary: '#5B83AC',
-        supplementaryDarker: '#284563',
-    },
-};
-const foregrounds = {
-    inert: {
-        text: '#E7E5E8',
-        textInverse: '#0B0B0B',
-        textAction: '#FFFFFF',
-        selectArrowsBg: '#E7E5E8',
-        shadow: 'rgba(0, 0, 0, 0.35)',
-        overlay: 'rgba(43, 54, 61, 0.65)',
-    },
-    borders: {
-        framing: '#27252A',
-        keyline: '#37353A',
-        framingInverse: '#E7E5E8',
-        keylineInverse: '#C9C7CA',
-    },
-};
-const discretionary = {
-    goldenSand: '#E6B03D',
-    tacao: '#ED6B44',
-    newYorkPink: '#DE3CEC',
-    gothic: '#A02FB6',
-    lavenderPurple: '#501897',
-    sinbad: '#6952F6',
-    shuttleGray: '#5D5D5D',
-};
-const navigation = {
-    // When updating `navTop` ensure you also update the `<meta name="theme-color" content="#0B0B0B" />` in the head of index.html
-    navTop: '#0B0B0B',
-    navSideTabs: '#27252A',
-    navSideDrawer: '#1E1C21',
-    navIconUnselected: '#FFFFFF',
-    navIconSelected: '#E7E5E8',
-};
-const deprecated = {
-    boxSupplementary: '#27252A',
-    textNav: '#FFFFFF',
-    supplementaryText: '#5B83AC',
-    supplementaryHighlight: 'rgba(0, 61, 229, .1)',
-    doHighlight: 'rgba(0, 23, 229, .1)',
-    noHighlight: 'rgba(229, 0, 0,.1)',
-    doLighter: '#618EFF',
-    do: '#477BFF',
-    doDarker: '#406FE5',
-};
-exports.xSeriesDarkThemeByCategory = {
-    backgrounds,
-    foregrounds,
-    discretionary,
-    navigation,
-    deprecated,
-};
-exports.xSeriesDarkTheme = {
-    ...backgrounds.inert,
-    ...backgrounds.interactive,
-    ...foregrounds.inert,
-    ...foregrounds.borders,
-    ...discretionary,
-    ...navigation,
-    ...deprecated,
-};
-//# sourceMappingURL=dark.js.map

package/dist/themes/xseries/dark.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"dark.js","sourceRoot":"","sources":["../../../src/themes/xseries/dark.ts"],"names":[],"mappings":";;AAEA,MAAM,WAAW,GAAG;IAClB,KAAK,EAAE;QACL,UAAU,EAAE,SAAS;QACrB,GAAG,EAAE,SAAS;QACd,iBAAiB,EAAE,SAAS;QAC5B,UAAU,EAAE,SAAS;QACrB,OAAO,EAAE,SAAS;KACnB;IACD,WAAW,EAAE;QACX,SAAS,EAAE,SAAS;QACpB,EAAE,EAAE,SAAS;QACb,QAAQ,EAAE,SAAS;QACnB,WAAW,EAAE,sBAAsB;QACnC,SAAS,EAAE,SAAS;QACpB,EAAE,EAAE,SAAS;QACb,QAAQ,EAAE,SAAS;QACnB,oBAAoB,EAAE,SAAS;QAC/B,aAAa,EAAE,SAAS;QACxB,mBAAmB,EAAE,SAAS;KAC/B;CACF,CAAA;AAED,MAAM,WAAW,GAAG;IAClB,KAAK,EAAE;QACL,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,SAAS;QACtB,UAAU,EAAE,SAAS;QACrB,cAAc,EAAE,SAAS;QAEzB,MAAM,EAAE,qBAAqB;QAC7B,OAAO,EAAE,wBAAwB;KAClC;IACD,OAAO,EAAE;QACP,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,SAAS;QAClB,cAAc,EAAE,SAAS;QACzB,cAAc,EAAE,SAAS;KAC1B;CACF,CAAA;AAED,MAAM,aAAa,GAAG;IACpB,UAAU,EAAE,SAAS;IACrB,KAAK,EAAE,SAAS;IAChB,WAAW,EAAE,SAAS;IACtB,MAAM,EAAE,SAAS;IACjB,cAAc,EAAE,SAAS;IACzB,MAAM,EAAE,SAAS;IACjB,WAAW,EAAE,SAAS;CACvB,CAAA;AAED,MAAM,UAAU,GAAG;IACjB,8HAA8H;IAC9H,MAAM,EAAE,SAAS;IACjB,WAAW,EAAE,SAAS;IACtB,aAAa,EAAE,SAAS;IACxB,iBAAiB,EAAE,SAAS;IAC5B,eAAe,EAAE,SAAS;CAC3B,CAAA;AAED,MAAM,UAAU,GAAG;IACjB,gBAAgB,EAAE,SAAS;IAC3B,OAAO,EAAE,SAAS;IAClB,iBAAiB,EAAE,SAAS;IAC5B,sBAAsB,EAAE,sBAAsB;IAC9C,WAAW,EAAE,sBAAsB;IACnC,WAAW,EAAE,oBAAoB;IACjC,SAAS,EAAE,SAAS;IACpB,EAAE,EAAE,SAAS;IACb,QAAQ,EAAE,SAAS;CACpB,CAAA;AAEY,QAAA,0BAA0B,GAAG;IACxC,WAAW;IACX,WAAW;IACX,aAAa;IACb,UAAU;IACV,UAAU;CACX,CAAA;AAEY,QAAA,gBAAgB,GAAU;IACrC,GAAG,WAAW,CAAC,KAAK;IACpB,GAAG,WAAW,CAAC,WAAW;IAC1B,GAAG,WAAW,CAAC,KAAK;IACpB,GAAG,WAAW,CAAC,OAAO;IACtB,GAAG,aAAa;IAChB,GAAG,UAAU;IACb,GAAG,UAAU;CACd,CAAA"}

package/dist/themes/xseries/light.d.ts

@@ -1,68 +0,0 @@
-import { Theme } from '../types';
-export declare const xSeriesLightThemeByCategory: {
-    backgrounds: {
-        inert: {
-            background: string;
-            box: string;
-            backgroundInverse: string;
-            boxInverse: string;
-            success: string;
-        };
-        interactive: {
-            goLighter: string;
-            go: string;
-            goDarker: string;
-            goHighlight: string;
-            noLighter: string;
-            no: string;
-            noDarker: string;
-            supplementaryLighter: string;
-            supplementary: string;
-            supplementaryDarker: string;
-        };
-    };
-    foregrounds: {
-        inert: {
-            text: string;
-            textInverse: string;
-            textAction: string;
-            selectArrowsBg: string;
-            shadow: string;
-            overlay: string;
-        };
-        borders: {
-            framing: string;
-            keyline: string;
-            framingInverse: string;
-            keylineInverse: string;
-        };
-    };
-    discretionary: {
-        goldenSand: string;
-        tacao: string;
-        newYorkPink: string;
-        gothic: string;
-        lavenderPurple: string;
-        sinbad: string;
-        shuttleGray: string;
-    };
-    navigation: {
-        navTop: string;
-        navSideTabs: string;
-        navSideDrawer: string;
-        navIconUnselected: string;
-        navIconSelected: string;
-    };
-    deprecated: {
-        boxSupplementary: string;
-        textNav: string;
-        supplementaryText: string;
-        supplementaryHighlight: string;
-        doHighlight: string;
-        noHighlight: string;
-        doLighter: string;
-        do: string;
-        doDarker: string;
-    };
-};
-export declare const xSeriesLightTheme: Theme;

package/dist/themes/xseries/light.js

@@ -1,84 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const backgrounds = {
-    inert: {
-        background: '#F4F2F5',
-        box: '#FFFFFF',
-        backgroundInverse: '#141217',
-        boxInverse: '#1E1C21',
-        success: '#0E7B1D',
-    },
-    interactive: {
-        goLighter: '#6054FF',
-        go: '#3F32F5',
-        goDarker: '#352ACF',
-        goHighlight: 'rgba(128, 140, 255, .1)',
-        noLighter: '#D4301D',
-        no: '#BB2A1A',
-        noDarker: '#A12416',
-        supplementaryLighter: '#3C6996',
-        supplementary: '#32577D',
-        supplementaryDarker: '#284563',
-    },
-};
-const foregrounds = {
-    inert: {
-        text: '#27252A',
-        textInverse: '#FFFFFF',
-        textAction: '#FFFFFF',
-        selectArrowsBg: '#27252A',
-        shadow: 'rgba(0, 0, 0, 0.35)',
-        overlay: 'rgba(0, 0, 0, 0.35)',
-    },
-    borders: {
-        framing: '#E7E5E8',
-        keyline: '#C9C7CA',
-        framingInverse: '#27252A',
-        keylineInverse: '#37353A',
-    },
-};
-const discretionary = {
-    goldenSand: '#E6B03D',
-    tacao: '#ED6B44',
-    newYorkPink: '#DE3CEC',
-    gothic: '#A02FB6',
-    lavenderPurple: '#501897',
-    sinbad: '#6952F6',
-    shuttleGray: '#5D5D5D',
-};
-const navigation = {
-    // When updating `navTop` ensure you also update the `<meta name="theme-color" content="#0B0B0B" />` in the head of index.html
-    navTop: '#0B0B0B',
-    navSideTabs: '#E7E5E8',
-    navSideDrawer: '#FFFFFF',
-    navIconUnselected: '#27252A',
-    navIconSelected: '#3F32F5',
-};
-const deprecated = {
-    boxSupplementary: '#E7E5E8',
-    textNav: '#FFFFFF',
-    supplementaryText: '#32577D',
-    supplementaryHighlight: 'rgba(76, 124, 255, 0.1)',
-    doHighlight: 'rgba(128, 140, 255, .1)',
-    noHighlight: 'rgba(255, 128, 128, .1)',
-    doLighter: '#6054FF',
-    do: '#3F32F5',
-    doDarker: '#352ACF',
-};
-exports.xSeriesLightThemeByCategory = {
-    backgrounds,
-    foregrounds,
-    discretionary,
-    navigation,
-    deprecated,
-};
-exports.xSeriesLightTheme = {
-    ...backgrounds.inert,
-    ...backgrounds.interactive,
-    ...foregrounds.inert,
-    ...foregrounds.borders,
-    ...discretionary,
-    ...navigation,
-    ...deprecated,
-};
-//# sourceMappingURL=light.js.map

package/dist/themes/xseries/light.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"light.js","sourceRoot":"","sources":["../../../src/themes/xseries/light.ts"],"names":[],"mappings":";;AAEA,MAAM,WAAW,GAAG;IAClB,KAAK,EAAE;QACL,UAAU,EAAE,SAAS;QACrB,GAAG,EAAE,SAAS;QACd,iBAAiB,EAAE,SAAS;QAC5B,UAAU,EAAE,SAAS;QACrB,OAAO,EAAE,SAAS;KACnB;IACD,WAAW,EAAE;QACX,SAAS,EAAE,SAAS;QACpB,EAAE,EAAE,SAAS;QACb,QAAQ,EAAE,SAAS;QACnB,WAAW,EAAE,yBAAyB;QACtC,SAAS,EAAE,SAAS;QACpB,EAAE,EAAE,SAAS;QACb,QAAQ,EAAE,SAAS;QACnB,oBAAoB,EAAE,SAAS;QAC/B,aAAa,EAAE,SAAS;QACxB,mBAAmB,EAAE,SAAS;KAC/B;CACF,CAAA;AAED,MAAM,WAAW,GAAG;IAClB,KAAK,EAAE;QACL,IAAI,EAAE,SAAS;QACf,WAAW,EAAE,SAAS;QACtB,UAAU,EAAE,SAAS;QACrB,cAAc,EAAE,SAAS;QACzB,MAAM,EAAE,qBAAqB;QAC7B,OAAO,EAAE,qBAAqB;KAC/B;IACD,OAAO,EAAE;QACP,OAAO,EAAE,SAAS;QAClB,OAAO,EAAE,SAAS;QAClB,cAAc,EAAE,SAAS;QACzB,cAAc,EAAE,SAAS;KAC1B;CACF,CAAA;AAED,MAAM,aAAa,GAAG;IACpB,UAAU,EAAE,SAAS;IACrB,KAAK,EAAE,SAAS;IAChB,WAAW,EAAE,SAAS;IACtB,MAAM,EAAE,SAAS;IACjB,cAAc,EAAE,SAAS;IACzB,MAAM,EAAE,SAAS;IACjB,WAAW,EAAE,SAAS;CACvB,CAAA;AAED,MAAM,UAAU,GAAG;IACjB,8HAA8H;IAC9H,MAAM,EAAE,SAAS;IACjB,WAAW,EAAE,SAAS;IACtB,aAAa,EAAE,SAAS;IACxB,iBAAiB,EAAE,SAAS;IAC5B,eAAe,EAAE,SAAS;CAC3B,CAAA;AAED,MAAM,UAAU,GAAG;IACjB,gBAAgB,EAAE,SAAS;IAC3B,OAAO,EAAE,SAAS;IAClB,iBAAiB,EAAE,SAAS;IAC5B,sBAAsB,EAAE,yBAAyB;IACjD,WAAW,EAAE,yBAAyB;IACtC,WAAW,EAAE,yBAAyB;IACtC,SAAS,EAAE,SAAS;IACpB,EAAE,EAAE,SAAS;IACb,QAAQ,EAAE,SAAS;CACpB,CAAA;AAEY,QAAA,2BAA2B,GAAG;IACzC,WAAW;IACX,WAAW;IACX,aAAa;IACb,UAAU;IACV,UAAU;CACX,CAAA;AAEY,QAAA,iBAAiB,GAAU;IACtC,GAAG,WAAW,CAAC,KAAK;IACpB,GAAG,WAAW,CAAC,WAAW;IAC1B,GAAG,WAAW,CAAC,KAAK;IACpB,GAAG,WAAW,CAAC,OAAO;IACtB,GAAG,aAAa;IAChB,GAAG,UAAU;IACb,GAAG,UAAU;CACd,CAAA"}

package/src/themes/index.ts

@@ -1,2 +0,0 @@
-export { xSeriesDarkTheme, xSeriesDarkThemeByCategory } from './xseries/dark'
-export { xSeriesLightTheme, xSeriesLightThemeByCategory } from './xseries/light'

package/src/themes/themeToScss.ts

@@ -1,67 +0,0 @@
-import fs from 'fs'
-import { requiredRgbSwatches, ThemeConfig } from './types'
-import { xSeriesLightTheme } from './xseries/light'
-import { xSeriesDarkTheme } from './xseries/dark'
-
-const THEME_DIR = './src/vend.ui/styles/global/colour/themes'
-const HEADER = '// THIS IS A GENERATED FILE. DO NOT EDIT.\n\n'
-const NO_LINT_START = '// stylelint-disable vend/use-colour-function'
-const NO_LINT_END = '// stylelint-enable vend/use-colour-function'
-
-const themes: ThemeConfig[] = [
-  {
-    theme: xSeriesLightTheme,
-    mapName: 'vd-xseries-theme-light',
-    filename: `${THEME_DIR}/xseries/_theme-light.scss`,
-  },
-  {
-    theme: xSeriesDarkTheme,
-    mapName: 'vd-xseries-theme-dark',
-    filename: `${THEME_DIR}/xseries/_theme-dark.scss`,
-  },
-]
-
-const camelToKebab = (s: string) =>
-  s.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase()
-
-const getKebabKey = (key: string) => {
-  // supplementaryText needs two kebab dashes, supplementary--text ¯\_(ツ)_/¯
-  return camelToKebab(key === 'supplementaryText' ? 'supplementary-Text' : key)
-}
-
-const saveScssMapFile = (filename: string, content: any) => {
-  fs.writeFile(filename, content, err => {
-    if (err) {
-      // eslint-disable-next-line no-console
-      console.error(err)
-      process.exit(1)
-    }
-  })
-}
-
-// Converts theme to SCSS map
-export const themeToScss = ({ theme, mapName, filename }: ThemeConfig) => {
-  const colours = Object.entries(theme).map(c => {
-    const kebabKey = getKebabKey(c[0])
-    return `\n  ${kebabKey}:${c[1]}`
-  })
-  const scssMap = `${HEADER}${NO_LINT_START}\n\n$${mapName}: (${colours});\n\n${NO_LINT_END}`
-  return saveScssMapFile(filename, scssMap)
-}
-
-// Generates SCSS lists of required / available theme keys
-const requiredThemeKeysToScss = () => {
-  const baseKeys = Object.keys(xSeriesLightTheme).map(k => getKebabKey(k))
-  const rgbKeys = requiredRgbSwatches.map(k => getKebabKey(k))
-  const allKeys = baseKeys.concat(rgbKeys.map(k => `${k}-rgb`))
-
-  const requiredBaseKeys = `$vd-theme-required-base-keys: ${baseKeys};`
-  const requiredRgbKeys = `$vd-theme-available-rgb-keys: ${rgbKeys};`
-  const availableThemeKeys = `$vd-theme-available-keys: ${allKeys};`
-
-  const scssList = `${HEADER}${requiredBaseKeys}\n${requiredRgbKeys}\n${availableThemeKeys}`
-  return saveScssMapFile(`${THEME_DIR}/_theme-keys.scss`, scssList)
-}
-
-themes.forEach(theme => themeToScss(theme))
-requiredThemeKeysToScss()

package/src/themes/types.ts

@@ -1,68 +0,0 @@
-export interface ThemeConfig {
-  theme: Theme
-  mapName: string
-  filename: string
-}
-
-export interface Theme {
-  background: string
-  backgroundInverse: string
-  box: string
-  boxInverse: string
-  boxSupplementary: string
-  do: string
-  doDarker: string
-  doHighlight: string
-  doLighter: string
-  framing: string
-  framingInverse: string
-  go: string
-  goDarker: string
-  goHighlight: string
-  goLighter: string
-  goldenSand: string
-  gothic: string
-  keyline: string
-  keylineInverse: string
-  lavenderPurple: string
-  navIconSelected: string
-  navIconUnselected: string
-  navSideDrawer: string
-  navSideTabs: string
-  navTop: string
-  newYorkPink: string
-  no: string
-  noDarker: string
-  noHighlight: string
-  noLighter: string
-  overlay: string
-  selectArrowsBg: string
-  shadow: string
-  shuttleGray: string
-  sinbad: string
-  success: string
-  supplementary: string
-  supplementaryDarker: string
-  supplementaryHighlight: string
-  supplementaryLighter: string
-  supplementaryText: string
-  tacao: string
-  text: string
-  textAction: string
-  textInverse: string
-  textNav: string
-}
-
-// Some swatches require an "rgb" swatch (e.g. vd-background--rgb) to help apps integrate themes
-export const requiredRgbSwatches = [
-  'background',
-  'box',
-  'boxInverse',
-  'do',
-  'go',
-  'navSideDrawer',
-  'navSideTabs',
-  'navTop',
-  'no',
-  'supplementary',
-]

package/src/themes/xseries/dark.ts

@@ -1,90 +0,0 @@
-import { Theme } from '../types'
-
-const backgrounds = {
-  inert: {
-    background: '#141217',
-    box: '#1E1C21',
-    backgroundInverse: '#F4F2F5',
-    boxInverse: '#FFFFFF',
-    success: '#15BF20',
-  },
-  interactive: {
-    goLighter: '#6054FF',
-    go: '#477BFF',
-    goDarker: '#352ACF',
-    goHighlight: 'rgba(0, 23, 229, .1)',
-    noLighter: '#D4301D',
-    no: '#EB4F29',
-    noDarker: '#A12416',
-    supplementaryLighter: '#3C6996',
-    supplementary: '#5B83AC',
-    supplementaryDarker: '#284563',
-  },
-}
-
-const foregrounds = {
-  inert: {
-    text: '#E7E5E8',
-    textInverse: '#0B0B0B',
-    textAction: '#FFFFFF',
-    selectArrowsBg: '#E7E5E8',
-
-    shadow: 'rgba(0, 0, 0, 0.35)',
-    overlay: 'rgba(43, 54, 61, 0.65)',
-  },
-  borders: {
-    framing: '#27252A',
-    keyline: '#37353A',
-    framingInverse: '#E7E5E8',
-    keylineInverse: '#C9C7CA',
-  },
-}
-
-const discretionary = {
-  goldenSand: '#E6B03D',
-  tacao: '#ED6B44',
-  newYorkPink: '#DE3CEC',
-  gothic: '#A02FB6',
-  lavenderPurple: '#501897',
-  sinbad: '#6952F6',
-  shuttleGray: '#5D5D5D',
-}
-
-const navigation = {
-  // When updating `navTop` ensure you also update the `<meta name="theme-color" content="#0B0B0B" />` in the head of index.html
-  navTop: '#0B0B0B',
-  navSideTabs: '#27252A',
-  navSideDrawer: '#1E1C21',
-  navIconUnselected: '#FFFFFF',
-  navIconSelected: '#E7E5E8',
-}
-
-const deprecated = {
-  boxSupplementary: '#27252A',
-  textNav: '#FFFFFF',
-  supplementaryText: '#5B83AC',
-  supplementaryHighlight: 'rgba(0, 61, 229, .1)',
-  doHighlight: 'rgba(0, 23, 229, .1)',
-  noHighlight: 'rgba(229, 0, 0,.1)',
-  doLighter: '#618EFF',
-  do: '#477BFF',
-  doDarker: '#406FE5',
-}
-
-export const xSeriesDarkThemeByCategory = {
-  backgrounds,
-  foregrounds,
-  discretionary,
-  navigation,
-  deprecated,
-}
-
-export const xSeriesDarkTheme: Theme = {
-  ...backgrounds.inert,
-  ...backgrounds.interactive,
-  ...foregrounds.inert,
-  ...foregrounds.borders,
-  ...discretionary,
-  ...navigation,
-  ...deprecated,
-}