@atb-as/theme - npm Package Compare versions

Comparing version 3.2.0 to 4.0.0

lib/index.d.ts

@@ -1,4 +0,3 @@
-export * from './colors';
 export * from './sizes';
 export * from './theme';
 export * from './typography';

lib/index.js

@@ -13,3 +13,2 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./colors"), exports);
 __exportStar(require("./sizes"), exports);
@@ -16,0 +15,0 @@ __exportStar(require("./theme"), exports);

lib/theme.d.ts

@@ -9,3 +9,3 @@ import { borderRadius, borderWidth, iconSizes, spacings } from './sizes';
 export declare type TextColor = 'primary' | 'secondary' | 'disabled';
-declare type TextColorType = 'dark' | 'light';
+export declare type TextColorType = 'dark' | 'light';
 export declare type ContrastColor = {
@@ -27,3 +27,3 @@ backgroundColor: string;
         background_3: ContrastColor;
-        background_gray: ContrastColor;
+        background_accent: ContrastColor;
         primary_1: ContrastColor;
@@ -52,3 +52,5 @@ primary_2: ContrastColor;
     text: {
-        colors: typeof defaultTextColors.light;
+        colors: {
+            [key in TextColor]: string;
+        };
     };
@@ -67,8 +69,6 @@ border: {
 export declare type Statuses = keyof Theme['status'];
-export declare const defaultTextColors: {
-    [key in TextColorType]: {
-        [key in TextColor]: string;
-    };
-};
-export declare const themes: Themes;
+export declare enum ThemeVariant {
+    AtB = 0
+}
+export declare function createThemesFor(themeVariant: ThemeVariant): Themes;
 /**
@@ -94,3 +94,3 @@ * Create new themes (light/dark) with optinally overriden defaults.
  */
-export declare function createThemes(overrides?: ConfigurationOverride<Themes>): Themes;
+export declare function createThemes(themes: Themes, overrides?: ConfigurationOverride<Themes>): Themes;
 /**
@@ -117,3 +117,3 @@ * Use Theme as base and extend with new properties. Properties
  */
-export declare function createExtendedThemes<T>(extension: {
+export declare function createExtendedThemes<T>(themes: Themes, extension: {
     light: T;
@@ -120,0 +120,0 @@ dark: T;

lib/theme.js

@@ -6,139 +6,19 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createExtendedThemes = exports.createThemes = exports.themes = exports.defaultTextColors = void 0;
-var hex_to_rgba_1 = __importDefault(require("hex-to-rgba"));
+exports.createExtendedThemes = exports.createThemes = exports.createThemesFor = exports.ThemeVariant = void 0;
 var ts_deepmerge_1 = __importDefault(require("ts-deepmerge"));
-var colors_1 = require("./colors");
-var sizes_1 = require("./sizes");
 var override_config_1 = require("./utils/override-config");
-var contrastColor = function (backgroundColor, textColorType) {
-    if (backgroundColor === void 0) { backgroundColor = colors_1.colors.white; }
-    if (textColorType === void 0) { textColorType = 'dark'; }
-    return { backgroundColor: backgroundColor, color: colors_1.colors.text[textColorType], textColorType: textColorType };
-};
-exports.defaultTextColors = {
-    dark: {
-        primary: colors_1.colors.text.dark,
-        secondary: hex_to_rgba_1.default(colors_1.colors.text.dark, 0.6),
-        disabled: hex_to_rgba_1.default(colors_1.colors.text.dark, 0.2),
-    },
-    light: {
-        primary: colors_1.colors.text.light,
-        secondary: hex_to_rgba_1.default(colors_1.colors.text.light, 0.6),
-        disabled: hex_to_rgba_1.default(colors_1.colors.text.light, 0.2),
-    },
-};
-exports.themes = {
-    light: {
-        spacings: sizes_1.spacings,
-        colors: {
-            background_0: contrastColor(colors_1.backgrounds.light.level0, 'dark'),
-            background_1: contrastColor(colors_1.backgrounds.light.level1, 'dark'),
-            background_2: contrastColor(colors_1.backgrounds.light.level2, 'dark'),
-            background_3: contrastColor(colors_1.backgrounds.light.level3, 'dark'),
-            background_gray: contrastColor(colors_1.colors.primary.gray_500, 'light'),
-            primary_1: contrastColor(colors_1.colors.primary.green_500, 'dark'),
-            primary_2: contrastColor(colors_1.colors.secondary.blue_500, 'light'),
-            primary_3: contrastColor(colors_1.colors.secondary.cyan_500, 'dark'),
-            primary_destructive: contrastColor(colors_1.colors.secondary.red_500, 'light'),
-            secondary_1: contrastColor(colors_1.colors.primary.gray_500, 'light'),
-            secondary_2: contrastColor(colors_1.colors.primary.gray_200, 'dark'),
-            secondary_3: contrastColor(colors_1.colors.primary.gray_400, 'light'),
-            secondary_4: contrastColor(colors_1.colors.primary.gray_50, 'dark'),
-            transport_city: contrastColor(colors_1.colors.primary.green_600),
-            transport_region: contrastColor(colors_1.colors.secondary.blue_500),
-            transport_boat: contrastColor(colors_1.colors.secondary.cyan_700),
-            transport_train: contrastColor(colors_1.colors.secondary.red_500),
-            transport_airport: contrastColor(colors_1.colors.other.ekspressen_600),
-            transport_plane: contrastColor(colors_1.colors.other.orange_500),
-            transport_other: contrastColor(colors_1.colors.primary.gray_400),
-        },
-        status: {
-            valid: {
-                main: contrastColor(colors_1.colors.primary.green_500, 'dark'),
-                bg: contrastColor(hex_to_rgba_1.default(colors_1.colors.primary.green_500, 0.25), 'dark'),
-            },
-            info: {
-                main: contrastColor(colors_1.colors.secondary.cyan_500, 'dark'),
-                bg: contrastColor(hex_to_rgba_1.default(colors_1.colors.secondary.cyan_500, 0.25), 'dark'),
-            },
-            warning: {
-                main: contrastColor(colors_1.colors.secondary.yellow_500, 'dark'),
-                bg: contrastColor(hex_to_rgba_1.default(colors_1.colors.secondary.yellow_500, 0.25), 'dark'),
-            },
-            error: {
-                main: contrastColor(colors_1.colors.secondary.red_500, 'light'),
-                bg: contrastColor(hex_to_rgba_1.default(colors_1.colors.secondary.red_500, 0.25), 'dark'),
-            },
-        },
-        text: {
-            colors: exports.defaultTextColors['dark'],
-        },
-        border: {
-            primary: colors_1.colors.primary.gray_50,
-            secondary: colors_1.colors.text.dark,
-            focus: colors_1.colors.secondary.blue_500,
-            radius: sizes_1.borderRadius,
-            width: sizes_1.borderWidth,
-        },
-        icon: {
-            size: sizes_1.iconSizes,
-        },
-    },
-    dark: {
-        spacings: sizes_1.spacings,
-        colors: {
-            background_0: contrastColor(colors_1.backgrounds.dark.level0, 'light'),
-            background_1: contrastColor(colors_1.backgrounds.dark.level1, 'light'),
-            background_2: contrastColor(colors_1.backgrounds.dark.level2, 'light'),
-            background_3: contrastColor(colors_1.backgrounds.dark.level3, 'light'),
-            background_gray: contrastColor(colors_1.colors.primary.gray_500, 'light'),
-            primary_1: contrastColor(colors_1.colors.primary.green_500, 'dark'),
-            primary_2: contrastColor(colors_1.colors.secondary.blue_500, 'light'),
-            primary_3: contrastColor(colors_1.colors.secondary.cyan_500, 'dark'),
-            primary_destructive: contrastColor(colors_1.colors.secondary.red_500, 'light'),
-            secondary_1: contrastColor(colors_1.colors.primary.gray_50, 'dark'),
-            secondary_2: contrastColor(colors_1.colors.primary.gray_500, 'light'),
-            secondary_3: contrastColor(colors_1.colors.secondary.blue_600, 'light'),
-            secondary_4: contrastColor(colors_1.colors.primary.gray_600, 'light'),
-            transport_city: contrastColor(colors_1.colors.primary.green_500),
-            transport_region: contrastColor(colors_1.colors.secondary.blue_500),
-            transport_boat: contrastColor(colors_1.colors.secondary.cyan_300),
-            transport_train: contrastColor(colors_1.colors.secondary.red_400),
-            transport_airport: contrastColor(colors_1.colors.other.ekspressen_500),
-            transport_plane: contrastColor(colors_1.colors.other.orange_500),
-            transport_other: contrastColor(colors_1.colors.primary.gray_300),
-        },
-        status: {
-            valid: {
-                main: contrastColor(colors_1.colors.primary.green_500, 'dark'),
-                bg: contrastColor(hex_to_rgba_1.default(colors_1.colors.primary.green_500, 0.25), 'light'),
-            },
-            info: {
-                main: contrastColor(colors_1.colors.secondary.cyan_500, 'dark'),
-                bg: contrastColor(hex_to_rgba_1.default(colors_1.colors.secondary.cyan_500, 0.25), 'light'),
-            },
-            warning: {
-                main: contrastColor(colors_1.colors.secondary.yellow_500, 'dark'),
-                bg: contrastColor(hex_to_rgba_1.default(colors_1.colors.secondary.yellow_500, 0.25), 'dark'),
-            },
-            error: {
-                main: contrastColor(colors_1.colors.secondary.red_500, 'light'),
-                bg: contrastColor(hex_to_rgba_1.default(colors_1.colors.secondary.red_500, 0.25), 'dark'),
-            },
-        },
-        text: {
-            colors: exports.defaultTextColors['light'],
-        },
-        border: {
-            primary: colors_1.colors.primary.gray_600,
-            secondary: colors_1.colors.text.light,
-            focus: colors_1.colors.secondary.cyan_500,
-            radius: sizes_1.borderRadius,
-            width: sizes_1.borderWidth,
-        },
-        icon: {
-            size: sizes_1.iconSizes,
-        },
-    },
-};
+var themes_1 = require("./themes");
+var ThemeVariant;
+(function (ThemeVariant) {
+    ThemeVariant[ThemeVariant["AtB"] = 0] = "AtB";
+})(ThemeVariant = exports.ThemeVariant || (exports.ThemeVariant = {}));
+function createThemesFor(themeVariant) {
+    if (themeVariant === ThemeVariant.AtB) {
+        return themes_1.AtBThemes;
+    }
+    else {
+        throw Error('A valid ThemeVariant must be provided');
+    }
+}
+exports.createThemesFor = createThemesFor;
 /**
@@ -164,6 +44,6 @@ * Create new themes (light/dark) with optinally overriden defaults.
  */
-function createThemes(overrides) {
+function createThemes(themes, overrides) {
     if (!overrides)
-        return exports.themes;
-    return override_config_1.overrideConfig(exports.themes, overrides);
+        return themes;
+    return override_config_1.overrideConfig(themes, overrides);
 }
@@ -192,6 +72,6 @@ exports.createThemes = createThemes;
  */
-function createExtendedThemes(extension) {
+function createExtendedThemes(themes, extension) {
     return {
-        light: ts_deepmerge_1.default(exports.themes.light, extension.light),
-        dark: ts_deepmerge_1.default(exports.themes.dark, extension.dark),
+        light: ts_deepmerge_1.default(themes.light, extension.light),
+        dark: ts_deepmerge_1.default(themes.dark, extension.dark),
     };
@@ -198,0 +78,0 @@ }

package.json

 {
   "name": "@atb-as/theme",
-  "version": "3.2.0",
+  "version": "4.0.0",
   "private": false,
@@ -34,3 +34,3 @@ "description": "AtB Design System Colors",
   },
-  "gitHead": "98f000c3b3824b3eba676d4b5922ca9de8c990d4"
+  "gitHead": "3c86d89c91ab6cb96bfe004e0cecc90898f5ccca"
 }

README.md

@@ -14,12 +14,6 @@ # `@atb-as/theme`
 
-```ts
-import {colors} from '@atb-as/theme';
 
-console.log(colors.primary.gray_100); //=> #F5F5F6
-console.log(colors.text.dark); //=> #000000
-```
-
 ```ts
-import {themes} from '@atb-as/theme';
-
+import {createThemesFor,ThemeVariant} from '@atb-as/theme';
+const themes = createThemesFor(ThemeVariant.AtB)
 console.log(themes.light.colors.background_0);
@@ -37,9 +31,9 @@ ```
 
-// With CSS Modules
-import * as classNamesTheme from '@atb-as/theme/lib/theme.module.css';
+// With CSS Modules for atb-theme
+import * as classNamesTheme from '@atb-as/theme/lib/themes/atb-theme/theme.module.css';
 import * as classNamesTypo from '@atb-as/theme/lib/typography.module.css';
 
 
-// Without CSS Modules
-import '@atb-as/theme/lib/theme.css';
+// Without CSS Modules for atb-theme
+import '@atb-as/theme/lib/themes/atb-theme/theme.css';
 import '@atb-as/theme/lib/typography.css';
@@ -50,7 +44,7 @@ ```
 /* Using css/postcss/bundlers */
-@import '@atb-as/theme/lib/theme.module.css';
+@import '@atb-as/theme/lib/themes/atb-theme/theme.module.css';
 @import '@atb-as/theme/lib/typography.module.css';
 
 /* or without modules */
-@import '@atb-as/theme/lib/theme.css';
+@import '@atb-as/theme/lib/themes/atb-theme/theme.css';
 @import '@atb-as/theme/lib/typography.css';
@@ -60,3 +54,3 @@
 /* And potentially */
-@value myClassname from "@atb-as/theme/lib/theme.css";
+@value myClassname from "@atb-as/theme/lib/themes/atb-theme/theme.css";
 ```
@@ -116,3 +110,3 @@
 
-#### `createThemes(overrides?: ConfigurationOverride<Theme>): Themes`
+#### `createThemes(themes: Themes,overrides?: ConfigurationOverride<Theme>): Themes`
 
@@ -122,3 +116,6 @@ Create new themes (light/dark) with optinally overriden defaults
 ```ts
-const themes = createThemes({
+const themesVariant = createThemesFor(ThemeVariant.AtB)
+const themes = createThemes(
+  themesVariant,
+  {
   light: {
@@ -135,3 +132,3 @@ spacings: {
 
-#### `createExtendedThemes<T>(extension: T)`
+#### `createExtendedThemes<T>(themes: Themes,extension: T)`
 
@@ -144,3 +141,7 @@ Use Theme as base and extend with new properties. Properties can be nested and will be deep merged.
 }
-const _themes = createExtendedThemes<FooExtension>({
+const themesVariant = createThemesFor(ThemeVariant.AtB)
+
+const _themes = createExtendedThemes<FooExtension>(
+  themesVariant,
+  {
   light: {statusBarStyle: 'dark'},
@@ -147,0 +148,0 @@ dark: {statusBarStyle: 'light'}

No alert changes

Improved metrics

Total package byte prevSize

126150

increased by34.37%

Number of package files

44

increased by33.33%

Lines of code

2817

increased by41.99%

Number of lines in readme file

198

increased by0.51%

No dependency changes