@atb-as/theme - npm Package Compare versions

Comparing version 4.0.0 to 5.0.0-alpha.0

lib/theme.d.ts

@@ -17,3 +17,2 @@ import { borderRadius, borderWidth, iconSizes, spacings } from './sizes';
     main: ContrastColor;
-    bg: ContrastColor;
 };
@@ -44,2 +43,5 @@ export interface Theme {
     };
+    content: {
+        subtle_primary: ContrastColor;
+    };
     status: {
@@ -69,3 +71,4 @@ valid: StatusColor;
 export declare enum ThemeVariant {
-    AtB = 0
+    AtB = 0,
+    Nfk = 1
 }
@@ -72,0 +75,0 @@ export declare function createThemesFor(themeVariant: ThemeVariant): Themes;

lib/theme.js

@@ -13,10 +13,13 @@ "use strict";
     ThemeVariant[ThemeVariant["AtB"] = 0] = "AtB";
+    ThemeVariant[ThemeVariant["Nfk"] = 1] = "Nfk";
 })(ThemeVariant = exports.ThemeVariant || (exports.ThemeVariant = {}));
 function createThemesFor(themeVariant) {
-    if (themeVariant === ThemeVariant.AtB) {
-        return themes_1.AtBThemes;
+    switch (themeVariant) {
+        case ThemeVariant.AtB:
+            return themes_1.AtBThemes;
+        case ThemeVariant.Nfk:
+            return themes_1.NfkThemes;
+        default:
+            throw Error('A valid ThemeVariant must be provided');
     }
-    else {
-        throw Error('A valid ThemeVariant must be provided');
-    }
 }
@@ -47,3 +50,3 @@ exports.createThemesFor = createThemesFor;
         return themes;
-    return override_config_1.overrideConfig(themes, overrides);
+    return (0, override_config_1.overrideConfig)(themes, overrides);
 }
@@ -74,4 +77,4 @@ exports.createThemes = createThemes;
     return {
-        light: ts_deepmerge_1.default(themes.light, extension.light),
-        dark: ts_deepmerge_1.default(themes.dark, extension.dark),
+        light: (0, ts_deepmerge_1.default)(themes.light, extension.light),
+        dark: (0, ts_deepmerge_1.default)(themes.dark, extension.dark),
     };
@@ -78,0 +81,0 @@ }

lib/themes/atb-theme/theme.d.ts

 import { Themes } from '../../theme';
+export declare const backgrounds: {
+    light: {
+        level0: string;
+        level1: string;
+        level2: string;
+        level3: string;
+    };
+    dark: {
+        level0: string;
+        level1: string;
+        level2: string;
+        level3: string;
+    };
+};
+export declare const colors: {
+    white: string;
+    black: string;
+    primary: {
+        gray_50: string;
+        gray_100: string;
+        gray_200: string;
+        gray_300: string;
+        gray_400: string;
+        gray_500: string;
+        gray_600: string;
+        gray_700: string;
+        gray_800: string;
+        gray_900: string;
+        gray_950: string;
+        green_100: string;
+        green_200: string;
+        green_300: string;
+        green_400: string;
+        green_500: string;
+        green_600: string;
+        green_700: string;
+        green_800: string;
+        green_900: string;
+    };
+    secondary: {
+        cyan_100: string;
+        cyan_200: string;
+        cyan_300: string;
+        cyan_400: string;
+        cyan_500: string;
+        cyan_600: string;
+        cyan_700: string;
+        cyan_800: string;
+        cyan_900: string;
+        blue_100: string;
+        blue_200: string;
+        blue_300: string;
+        blue_400: string;
+        blue_500: string;
+        blue_600: string;
+        blue_700: string;
+        blue_800: string;
+        blue_900: string;
+        brown: string;
+        orange: string;
+        yellow_100: string;
+        yellow_500: string;
+        red_100: string;
+        red_400: string;
+        red_500: string;
+    };
+    text: {
+        light: string;
+        dark: string;
+    };
+    other: {
+        orange_500: string;
+        ekspressen_500: string;
+        ekspressen_600: string;
+    };
+};
 declare const themes: Themes;
 export default themes;

lib/themes/atb-theme/theme.js

@@ -6,9 +6,89 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.colors = exports.backgrounds = void 0;
 var sizes_1 = require("../../sizes");
 var hex_to_rgba_1 = __importDefault(require("hex-to-rgba"));
-var colors_1 = require("./colors");
+exports.backgrounds = {
+    light: {
+        level0: '#FFFFFF',
+        level1: '#E7E8E9',
+        level2: '#DBDDDE',
+        level3: '#CFD2D3',
+    },
+    dark: {
+        level0: '#000000',
+        level1: '#242B30',
+        level2: '#37424A',
+        level3: '#555E65',
+    },
+};
+exports.colors = {
+    white: '#ffffff',
+    black: '#000000',
+    primary: {
+        // grays
+        gray_50: '#E7E8E9',
+        gray_100: '#F5F5F6',
+        gray_200: '#AFB3B7',
+        gray_300: '#878E92',
+        gray_400: '#5F686E',
+        gray_500: '#37424A',
+        gray_600: '#2C353B',
+        gray_700: '#21282C',
+        gray_800: '#161A1E',
+        gray_900: '#101416',
+        gray_950: '#1B1C1D',
+        // greens
+        green_100: '#E3E6B3',
+        green_200: '#DADE99',
+        green_300: '#C7CE66',
+        green_400: '#B5BD33',
+        green_500: '#A2AD00',
+        green_600: '#828A00',
+        green_700: '#616800',
+        green_800: '#414500',
+        green_900: '#313400',
+    },
+    secondary: {
+        // cyan
+        cyan_100: '#D4F3F6',
+        cyan_200: '#C6EFF3',
+        cyan_300: '#AAE6EC',
+        cyan_400: '#8DDEE6',
+        cyan_500: '#71D6E0',
+        cyan_600: '#5AABB3',
+        cyan_700: '#448086',
+        cyan_800: '#2D565A',
+        cyan_900: '#224043',
+        // i got the blues
+        blue_100: '#B3D8DE',
+        blue_200: '#99CBD3',
+        blue_300: '#66B0BE',
+        blue_400: '#3396A8',
+        blue_500: '#007C92',
+        blue_600: '#006375',
+        blue_700: '#004A58',
+        blue_800: '#00323A',
+        blue_900: '#00252C',
+        brown: '#584528',
+        orange: '#C75B12',
+        yellow_100: '#F7F3B2',
+        yellow_500: '#E4D700',
+        red_100: '#E4B8C6',
+        red_400: '#B74166',
+        red_500: '#A51140',
+    },
+    text: {
+        light: '#FFFFFF',
+        dark: '#000000',
+    },
+    other: {
+        orange_500: '#BE5604',
+        ekspressen_500: '#ED6C05',
+        ekspressen_600: '#C75B12',
+    },
+};
 var contrastColor = function (backgroundColor, textColorType) {
-    if (backgroundColor === void 0) { backgroundColor = colors_1.colors.white; }
+    if (backgroundColor === void 0) { backgroundColor = exports.colors.white; }
     if (textColorType === void 0) { textColorType = 'dark'; }
-    return { backgroundColor: backgroundColor, color: colors_1.colors.text[textColorType], textColorType: textColorType };
+    return { backgroundColor: backgroundColor, color: exports.colors.text[textColorType], textColorType: textColorType };
 };
@@ -19,39 +99,38 @@ var themes = {
         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_accent: 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),
+            background_0: contrastColor(exports.backgrounds.light.level0, 'dark'),
+            background_1: contrastColor(exports.backgrounds.light.level1, 'dark'),
+            background_2: contrastColor(exports.backgrounds.light.level2, 'dark'),
+            background_3: contrastColor(exports.backgrounds.light.level3, 'dark'),
+            background_accent: contrastColor(exports.colors.primary.gray_500, 'light'),
+            primary_1: contrastColor(exports.colors.primary.green_500, 'dark'),
+            primary_2: contrastColor(exports.colors.secondary.blue_500, 'light'),
+            primary_3: contrastColor(exports.colors.secondary.cyan_500, 'dark'),
+            primary_destructive: contrastColor(exports.colors.secondary.red_500, 'light'),
+            secondary_1: contrastColor(exports.colors.primary.gray_500, 'light'),
+            secondary_2: contrastColor(exports.colors.primary.gray_200, 'dark'),
+            secondary_3: contrastColor(exports.colors.primary.gray_400, 'light'),
+            secondary_4: contrastColor(exports.colors.primary.gray_50, 'dark'),
+            transport_city: contrastColor(exports.colors.primary.green_600),
+            transport_region: contrastColor(exports.colors.secondary.blue_500),
+            transport_boat: contrastColor(exports.colors.secondary.cyan_700),
+            transport_train: contrastColor(exports.colors.secondary.red_500),
+            transport_airport: contrastColor(exports.colors.other.ekspressen_600),
+            transport_plane: contrastColor(exports.colors.other.orange_500),
+            transport_other: contrastColor(exports.colors.primary.gray_400),
         },
+        content: {
+            subtle_primary: contrastColor(exports.colors.primary.gray_50, 'dark'),
+        },
         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'),
+                main: contrastColor(exports.colors.primary.green_500, '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'),
+                main: contrastColor(exports.colors.secondary.cyan_500, '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'),
+                main: contrastColor(exports.colors.secondary.yellow_500, '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'),
+                main: contrastColor(exports.colors.secondary.red_500, 'light'),
             },
@@ -61,11 +140,11 @@ },
             colors: {
-                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),
+                primary: exports.colors.text.dark,
+                secondary: (0, hex_to_rgba_1.default)(exports.colors.text.dark, 0.6),
+                disabled: (0, hex_to_rgba_1.default)(exports.colors.text.dark, 0.2),
             },
         },
         border: {
-            primary: colors_1.colors.primary.gray_50,
-            secondary: colors_1.colors.text.dark,
-            focus: colors_1.colors.secondary.blue_500,
+            primary: exports.colors.primary.gray_50,
+            secondary: exports.colors.text.dark,
+            focus: exports.colors.secondary.blue_500,
             radius: sizes_1.borderRadius,
@@ -81,39 +160,38 @@ width: sizes_1.borderWidth,
         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_accent: 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),
+            background_0: contrastColor(exports.backgrounds.dark.level0, 'light'),
+            background_1: contrastColor(exports.backgrounds.dark.level1, 'light'),
+            background_2: contrastColor(exports.backgrounds.dark.level2, 'light'),
+            background_3: contrastColor(exports.backgrounds.dark.level3, 'light'),
+            background_accent: contrastColor(exports.colors.primary.gray_500, 'light'),
+            primary_1: contrastColor(exports.colors.primary.green_500, 'dark'),
+            primary_2: contrastColor(exports.colors.secondary.blue_500, 'light'),
+            primary_3: contrastColor(exports.colors.secondary.cyan_500, 'dark'),
+            primary_destructive: contrastColor(exports.colors.secondary.red_500, 'light'),
+            secondary_1: contrastColor(exports.colors.primary.gray_50, 'dark'),
+            secondary_2: contrastColor(exports.colors.primary.gray_500, 'light'),
+            secondary_3: contrastColor(exports.colors.secondary.blue_600, 'light'),
+            secondary_4: contrastColor(exports.colors.primary.gray_600, 'light'),
+            transport_city: contrastColor(exports.colors.primary.green_500),
+            transport_region: contrastColor(exports.colors.secondary.blue_500),
+            transport_boat: contrastColor(exports.colors.secondary.cyan_300),
+            transport_train: contrastColor(exports.colors.secondary.red_400),
+            transport_airport: contrastColor(exports.colors.other.ekspressen_500),
+            transport_plane: contrastColor(exports.colors.other.orange_500),
+            transport_other: contrastColor(exports.colors.primary.gray_300),
         },
+        content: {
+            subtle_primary: contrastColor(exports.colors.primary.gray_950, 'dark'),
+        },
         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'),
+                main: contrastColor(exports.colors.primary.green_500, '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), 'light'),
+                main: contrastColor(exports.colors.secondary.cyan_500, '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'),
+                main: contrastColor(exports.colors.secondary.yellow_500, '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'),
+                main: contrastColor(exports.colors.secondary.red_500, 'light'),
             },
@@ -123,11 +201,11 @@ },
             colors: {
-                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),
+                primary: exports.colors.text.light,
+                secondary: (0, hex_to_rgba_1.default)(exports.colors.text.light, 0.6),
+                disabled: (0, hex_to_rgba_1.default)(exports.colors.text.light, 0.2),
             },
         },
         border: {
-            primary: colors_1.colors.primary.gray_600,
-            secondary: colors_1.colors.text.light,
-            focus: colors_1.colors.secondary.cyan_500,
+            primary: exports.colors.primary.gray_600,
+            secondary: exports.colors.text.light,
+            focus: exports.colors.secondary.cyan_500,
             radius: sizes_1.borderRadius,
@@ -134,0 +212,0 @@ width: sizes_1.borderWidth,

lib/themes/index.d.ts

 export { default as AtBThemes } from './atb-theme/theme';
+export { default as NfkThemes } from './nfk-theme/theme';

lib/themes/index.js

@@ -6,5 +6,7 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AtBThemes = void 0;
+exports.NfkThemes = exports.AtBThemes = void 0;
 var theme_1 = require("./atb-theme/theme");
 Object.defineProperty(exports, "AtBThemes", { enumerable: true, get: function () { return __importDefault(theme_1).default; } });
+var theme_2 = require("./nfk-theme/theme");
+Object.defineProperty(exports, "NfkThemes", { enumerable: true, get: function () { return __importDefault(theme_2).default; } });
 //# sourceMappingURL=index.js.map

lib/typography/index.js

@@ -62,3 +62,3 @@ "use strict";
         return exports.textTypeStyles[mapType(type)];
-    return override_config_1.overrideConfig(exports.textTypeStyles[mapType(type)], overrides);
+    return (0, override_config_1.overrideConfig)(exports.textTypeStyles[mapType(type)], overrides);
 }
@@ -92,5 +92,5 @@ exports.createTextTypeStyles = createTextTypeStyles;
 function extendTextTypeStyles(type, extension) {
-    return ts_deepmerge_1.default(exports.textTypeStyles[mapType(type)], extension);
+    return (0, ts_deepmerge_1.default)(exports.textTypeStyles[mapType(type)], extension);
 }
 exports.extendTextTypeStyles = extendTextTypeStyles;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@atb-as/theme",
-  "version": "4.0.0",
+  "version": "5.0.0-alpha.0",
   "private": false,
@@ -25,3 +25,3 @@ "description": "AtB Design System Colors",
     "ts-node": "^9.1.1",
-    "typescript": "^4.2.3"
+    "typescript": "^4.4.3"
   },
@@ -35,3 +35,3 @@ "dependencies": {
   },
-  "gitHead": "3c86d89c91ab6cb96bfe004e0cecc90898f5ccca"
+  "gitHead": "0e4969e801c68f4bac08464d4187ed92a1a6b1f4"
 }

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

168392

increased by33.49%

Number of package files

52

increased by18.18%

Lines of code

3867

increased by37.27%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes