@atb-as/theme - npm Package Compare versions

Comparing version 6.1.0 to 6.1.1

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

@@ -1,67 +0,3 @@
-import { ContrastColor, Themes } from '../../theme';
-export declare const textColors: {
-    light: string;
-    dark: string;
-};
-export declare const baseColors: {
-    gray_0: ContrastColor;
-    gray_50: ContrastColor;
-    gray_100: ContrastColor;
-    gray_150: ContrastColor;
-    gray_200: ContrastColor;
-    gray_300: ContrastColor;
-    gray_500: ContrastColor;
-    gray_600: ContrastColor;
-    gray_700: ContrastColor;
-    gray_800: ContrastColor;
-    gray_850: ContrastColor;
-    gray_900: ContrastColor;
-    gray_1000: ContrastColor;
-    blue_100: ContrastColor;
-    blue_200: ContrastColor;
-    blue_400: ContrastColor;
-    blue_500: ContrastColor;
-    blue_600: ContrastColor;
-    blue_700: ContrastColor;
-    blue_900: ContrastColor;
-    cyan_100: ContrastColor;
-    cyan_200: ContrastColor;
-    cyan_300: ContrastColor;
-    cyan_400: ContrastColor;
-    green_100: ContrastColor;
-    green_200: ContrastColor;
-    green_300: ContrastColor;
-    green_400: ContrastColor;
-    burgundy_100: ContrastColor;
-    orange_100: ContrastColor;
-    red_100: ContrastColor;
-    red_200: ContrastColor;
-    red_300: ContrastColor;
-    red_400: ContrastColor;
-    yellow_100: ContrastColor;
-    yellow_200: ContrastColor;
-};
-export declare const colors: {
-    white: string;
-    black: string;
-    text: {
-        light: string;
-        dark: string;
-    };
-};
-export declare const backgrounds: {
-    light: {
-        level0: ContrastColor;
-        level1: ContrastColor;
-        level2: ContrastColor;
-        level3: ContrastColor;
-    };
-    dark: {
-        level0: ContrastColor;
-        level1: ContrastColor;
-        level2: ContrastColor;
-        level3: ContrastColor;
-    };
-};
+import { Themes } from '../../theme';
 declare const themes: Themes;
 export default themes;

lib/themes/fram-theme/theme.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.backgrounds = exports.colors = exports.baseColors = exports.textColors = void 0;
 var sizes_1 = require("../../sizes");
-exports.textColors = {
+var textColors = {
     light: '#FFFFFF',
@@ -13,73 +12,5 @@ dark: '#000000',
         background: background,
-        text: exports.textColors[textColorType],
+        text: textColors[textColorType],
     };
 };
-exports.baseColors = {
-    // gray
-    gray_0: contrastColor('#FFFFFF', 'dark'),
-    gray_50: contrastColor('#F1F2F2', 'dark'),
-    gray_100: contrastColor('#E3E5E6', 'dark'),
-    gray_150: contrastColor('#D5D7D9', 'dark'),
-    gray_200: contrastColor('#C7CACC', 'dark'),
-    gray_300: contrastColor('#A9AEB1', 'dark'),
-    gray_500: contrastColor('#6F777D', 'dark'),
-    gray_600: contrastColor('#555E65', 'light'),
-    gray_700: contrastColor('#37424A', 'light'),
-    gray_800: contrastColor('#2B343A', 'light'),
-    gray_850: contrastColor('#242B30', 'light'),
-    gray_900: contrastColor('#1A2024', 'light'),
-    gray_1000: contrastColor('#000000', 'light'),
-    // blue
-    blue_100: contrastColor('#D4E9EC', 'dark'),
-    blue_200: contrastColor('#AAC6D8', 'dark'),
-    blue_400: contrastColor('#A6D1D9', 'dark'),
-    blue_500: contrastColor('#76A4C0', 'dark'),
-    blue_600: contrastColor('#007FBA', 'light'),
-    blue_700: contrastColor('#005685', 'light'),
-    blue_900: contrastColor('#002329', 'light'),
-    // cyan
-    cyan_100: contrastColor('#CDE9E3', 'dark'),
-    cyan_200: contrastColor('#679C9F', 'dark'),
-    cyan_300: contrastColor('#0D6569', 'light'),
-    cyan_400: contrastColor('#0b585c', 'light'),
-    // green
-    green_100: contrastColor('#D8E4D3', 'dark'),
-    green_200: contrastColor('#B8D4A2', 'dark'),
-    green_300: contrastColor('#82B962', 'dark'),
-    green_400: contrastColor('#284320', 'light'),
-    // burgundy
-    burgundy_100: contrastColor('#551125', 'light'),
-    // orange
-    orange_100: contrastColor('#F15629', 'light'),
-    // red
-    red_100: contrastColor('#FFFFFF', 'dark'),
-    red_200: contrastColor('#EFB8B2', 'dark'),
-    red_300: contrastColor('#F18176', 'dark'),
-    red_400: contrastColor('#551125', 'light'),
-    // yellow
-    yellow_100: contrastColor('#F0E991', 'dark'),
-    yellow_200: contrastColor('#FBDC00', 'dark'),
-};
-exports.colors = {
-    white: exports.baseColors.gray_0.background,
-    black: exports.baseColors.gray_1000.background,
-    text: {
-        light: exports.baseColors.gray_0.background,
-        dark: exports.baseColors.gray_1000.background,
-    },
-};
-exports.backgrounds = {
-    light: {
-        level0: exports.baseColors.gray_0,
-        level1: exports.baseColors.gray_50,
-        level2: exports.baseColors.gray_100,
-        level3: exports.baseColors.gray_150,
-    },
-    dark: {
-        level0: exports.baseColors.gray_1000,
-        level1: exports.baseColors.gray_850,
-        level2: exports.baseColors.gray_700,
-        level3: exports.baseColors.gray_600,
-    },
-};
 var themes = {
@@ -90,35 +21,35 @@ light: {
             interactive_0: {
-                default: exports.baseColors.blue_700,
-                hover: exports.baseColors.blue_600,
-                active: exports.baseColors.cyan_100,
-                disabled: exports.baseColors.gray_200,
-                outline: exports.baseColors.cyan_300,
+                default: contrastColor('#005685', 'light'),
+                hover: contrastColor('#007FBA', 'light'),
+                active: contrastColor('#CDE9E3', 'dark'),
+                disabled: contrastColor('#C7CACC', 'dark'),
+                outline: contrastColor('#0D6569', 'light'),
             },
             interactive_1: {
-                default: exports.baseColors.gray_600,
-                hover: exports.baseColors.gray_500,
-                active: exports.baseColors.gray_900,
-                disabled: exports.baseColors.gray_200,
-                outline: exports.baseColors.blue_700,
+                default: contrastColor('555E65', 'light'),
+                hover: contrastColor('6F777D', 'light'),
+                active: contrastColor('1A2024', 'light'),
+                disabled: contrastColor('#C7CACC', 'dark'),
+                outline: contrastColor('#005685', 'light'),
             },
             interactive_2: {
-                default: exports.baseColors.gray_0,
-                hover: exports.baseColors.blue_100,
-                active: exports.baseColors.blue_400,
-                disabled: exports.baseColors.gray_0,
-                outline: exports.baseColors.blue_700,
+                default: contrastColor('#FFFFFF', 'dark'),
+                hover: contrastColor('#D4E9EC', 'dark'),
+                active: contrastColor('#A6D1D9', 'dark'),
+                disabled: contrastColor('#FFFFFF', 'dark'),
+                outline: contrastColor('#005685', 'light'),
             },
             interactive_3: {
-                default: exports.baseColors.green_300,
-                hover: exports.baseColors.green_200,
-                active: exports.baseColors.green_400,
-                disabled: exports.baseColors.green_100,
-                outline: exports.baseColors.blue_700,
+                default: contrastColor('#82B962', 'dark'),
+                hover: contrastColor('#B8D4A8', 'dark'),
+                active: contrastColor('#284320', 'light'),
+                disabled: contrastColor('#D8E4D3', 'dark'),
+                outline: contrastColor('#005685', 'light'),
             },
             interactive_destructive: {
-                default: exports.baseColors.red_300,
-                hover: exports.baseColors.red_200,
-                active: exports.baseColors.red_400,
-                disabled: exports.baseColors.red_100,
-                outline: exports.baseColors.blue_700,
+                default: contrastColor('#F18176', 'dark'),
+                hover: contrastColor('#EFB8B2', 'dark'),
+                active: contrastColor('#551125', 'light'),
+                disabled: contrastColor('#FFFFFF', 'dark'),
+                outline: contrastColor('#005685', 'light'),
             },
@@ -128,27 +59,27 @@ },
             background: {
-                background_0: exports.baseColors.gray_0,
-                background_1: exports.baseColors.gray_50,
-                background_2: exports.baseColors.gray_100,
-                background_3: exports.baseColors.gray_150,
-                background_accent_0: exports.baseColors.gray_700,
-                background_accent_1: exports.baseColors.gray_600,
-                background_accent_2: exports.baseColors.cyan_100,
-                background_accent_3: exports.baseColors.cyan_300,
-                background_accent_4: exports.baseColors.yellow_100,
-                background_accent_5: exports.baseColors.blue_400,
+                background_0: contrastColor('#FFFFFF', 'dark'),
+                background_1: contrastColor('#F1F2F2', 'dark'),
+                background_2: contrastColor('#E3E5E6', 'dark'),
+                background_3: contrastColor('#D5D7D9', 'dark'),
+                background_accent_0: contrastColor('#37424A', 'light'),
+                background_accent_1: contrastColor('#555E65', 'light'),
+                background_accent_2: contrastColor('#CDE9E3', 'dark'),
+                background_accent_3: contrastColor('#0D6569', 'light'),
+                background_accent_4: contrastColor('#F0E991', 'dark'),
+                background_accent_5: contrastColor('#A6D1D9', 'dark'),
             },
             transport: {
-                transport_city: exports.baseColors.green_300,
-                transport_region: exports.baseColors.blue_700,
-                transport_boat: exports.baseColors.blue_600,
-                transport_train: exports.baseColors.burgundy_100,
-                transport_airport: exports.baseColors.orange_100,
-                transport_plane: exports.baseColors.orange_100,
-                transport_other: exports.baseColors.gray_600,
+                transport_city: contrastColor('#82B962', 'dark'),
+                transport_region: contrastColor('#005685', 'light'),
+                transport_boat: contrastColor('#007FBA', 'light'),
+                transport_train: contrastColor('#551125', 'light'),
+                transport_airport: contrastColor('#F15659', 'light'),
+                transport_plane: contrastColor('#F15659', 'light'),
+                transport_other: contrastColor('#555E65', 'light'),
             },
             status: {
-                valid: exports.baseColors.green_300,
-                info: exports.baseColors.blue_700,
-                warning: exports.baseColors.yellow_200,
-                error: exports.baseColors.orange_100,
+                valid: contrastColor('#82B962', 'dark'),
+                info: contrastColor('#005685', 'light'),
+                warning: contrastColor('#FBDC00', 'dark'),
+                error: contrastColor('#F15629', 'light'),
             },
@@ -158,11 +89,11 @@ },
             colors: {
-                primary: exports.baseColors.gray_1000.background,
-                secondary: exports.baseColors.gray_600.background,
-                disabled: exports.baseColors.gray_300.background,
+                primary: textColors.dark,
+                secondary: '#555E65',
+                disabled: '#A9AEB1',
             },
         },
         border: {
-            primary: exports.baseColors.gray_50.background,
-            secondary: exports.colors.text.dark,
-            focus: exports.baseColors.blue_700.background,
+            primary: '#E7E8E9',
+            secondary: '#000000',
+            focus: '#005685',
             radius: sizes_1.borderRadius,
@@ -179,35 +110,35 @@ width: sizes_1.borderWidth,
             interactive_0: {
-                default: exports.baseColors.blue_500,
-                hover: exports.baseColors.blue_200,
-                active: exports.baseColors.cyan_100,
-                disabled: exports.baseColors.gray_200,
-                outline: exports.baseColors.cyan_300,
+                default: contrastColor('#76A4C0', 'dark'),
+                hover: contrastColor('#AAC6D8', 'dark'),
+                active: contrastColor('#CDE9E3', 'dark'),
+                disabled: contrastColor('#C7CACC', 'dark'),
+                outline: contrastColor('#0D6569', 'light'),
             },
             interactive_1: {
-                default: exports.baseColors.gray_600,
-                hover: exports.baseColors.gray_500,
-                active: exports.baseColors.gray_900,
-                disabled: exports.baseColors.gray_200,
-                outline: exports.baseColors.blue_700,
+                default: contrastColor('555E65', 'light'),
+                hover: contrastColor('6F777D', 'light'),
+                active: contrastColor('1A2024', 'light'),
+                disabled: contrastColor('#C7CACC', 'dark'),
+                outline: contrastColor('#005685', 'light'),
             },
             interactive_2: {
-                default: exports.baseColors.gray_1000,
-                hover: exports.baseColors.cyan_300,
-                active: exports.baseColors.cyan_200,
-                disabled: exports.baseColors.gray_200,
-                outline: exports.baseColors.blue_700,
+                default: contrastColor('#000000', 'light'),
+                hover: contrastColor('#0D6569', 'light'),
+                active: contrastColor('#679C9F', 'light'),
+                disabled: contrastColor('#C7CACC', 'dark'),
+                outline: contrastColor('#005685', 'light'),
             },
             interactive_3: {
-                default: exports.baseColors.green_300,
-                hover: exports.baseColors.green_200,
-                active: exports.baseColors.green_400,
-                disabled: exports.baseColors.green_100,
-                outline: exports.baseColors.blue_700,
+                default: contrastColor('#82B962', 'dark'),
+                hover: contrastColor('#B8D4A8', 'dark'),
+                active: contrastColor('#284320', 'light'),
+                disabled: contrastColor('#D8E4D3', 'dark'),
+                outline: contrastColor('#005685', 'light'),
             },
             interactive_destructive: {
-                default: exports.baseColors.red_300,
-                hover: exports.baseColors.red_200,
-                active: exports.baseColors.red_400,
-                disabled: exports.baseColors.red_100,
-                outline: exports.baseColors.blue_700,
+                default: contrastColor('#F18176', 'dark'),
+                hover: contrastColor('#EFB8B2', 'dark'),
+                active: contrastColor('#551125', 'light'),
+                disabled: contrastColor('#FFFFFF', 'dark'),
+                outline: contrastColor('#005685', 'light'),
             },
@@ -217,27 +148,27 @@ },
             background: {
-                background_0: exports.baseColors.gray_1000,
-                background_1: exports.baseColors.gray_850,
-                background_2: exports.baseColors.gray_700,
-                background_3: exports.baseColors.gray_600,
-                background_accent_0: exports.baseColors.gray_700,
-                background_accent_1: exports.baseColors.gray_600,
-                background_accent_2: exports.baseColors.cyan_100,
-                background_accent_3: exports.baseColors.cyan_300,
-                background_accent_4: exports.baseColors.yellow_100,
-                background_accent_5: exports.baseColors.gray_800,
+                background_0: contrastColor('#000000', 'light'),
+                background_1: contrastColor('#242B30', 'light'),
+                background_2: contrastColor('#37424A', 'light'),
+                background_3: contrastColor('#555E65', 'light'),
+                background_accent_0: contrastColor('#37424A', 'light'),
+                background_accent_1: contrastColor('#555E65', 'light'),
+                background_accent_2: contrastColor('#CDE9E3', 'dark'),
+                background_accent_3: contrastColor('#0D6569', 'light'),
+                background_accent_4: contrastColor('#F0E991', 'dark'),
+                background_accent_5: contrastColor('#242B30', 'light'),
             },
             transport: {
-                transport_city: exports.baseColors.green_300,
-                transport_region: exports.baseColors.blue_700,
-                transport_boat: exports.baseColors.blue_600,
-                transport_train: exports.baseColors.burgundy_100,
-                transport_airport: exports.baseColors.orange_100,
-                transport_plane: exports.baseColors.orange_100,
-                transport_other: exports.baseColors.gray_600,
+                transport_city: contrastColor('#82B962', 'dark'),
+                transport_region: contrastColor('#005685', 'light'),
+                transport_boat: contrastColor('#007FBA', 'light'),
+                transport_train: contrastColor('#551125', 'light'),
+                transport_airport: contrastColor('#F15659', 'light'),
+                transport_plane: contrastColor('#F15659', 'light'),
+                transport_other: contrastColor('#555E65', 'light'),
             },
             status: {
-                valid: exports.baseColors.green_300,
-                info: exports.baseColors.blue_700,
-                warning: exports.baseColors.yellow_200,
-                error: exports.baseColors.orange_100,
+                valid: contrastColor('#82B962', 'dark'),
+                info: contrastColor('#005685', 'light'),
+                warning: contrastColor('#FBDC00', 'dark'),
+                error: contrastColor('#F15629', 'light'),
             },
@@ -247,11 +178,11 @@ },
             colors: {
-                primary: exports.baseColors.gray_0.background,
-                secondary: exports.baseColors.gray_50.background,
-                disabled: exports.baseColors.gray_300.background,
+                primary: textColors.light,
+                secondary: '#F1F2F2',
+                disabled: '#A9AEB1',
             },
         },
         border: {
-            primary: exports.baseColors.gray_850.background,
-            secondary: exports.baseColors.gray_0.background,
-            focus: exports.baseColors.cyan_100.background,
+            primary: '#242B30',
+            secondary: '#FFFFFF',
+            focus: '#005685',
             radius: sizes_1.borderRadius,
@@ -258,0 +189,0 @@ width: sizes_1.borderWidth,

package.json

 {
   "name": "@atb-as/theme",
-  "version": "6.1.0",
+  "version": "6.1.1",
   "private": false,
@@ -34,3 +34,3 @@ "description": "AtB Design System Colors",
   },
-  "gitHead": "ce567f15024d6df033a3d77aa7e836a1cb262286"
+  "gitHead": "8f4be412005ee1ad67fe3ad5f8d67a7774866a80"
 }

No alert changes

Worsened metrics

Total package byte prevSize

249523

decreased by-2.12%

Lines of code

4848

decreased by-2.67%

No dependency changes