@atb-as/theme - npm Package Compare versions

Comparing version 5.0.3 to 6.0.0-alpha.0

lib/theme.d.ts

@@ -11,42 +11,49 @@ import { borderRadius, borderWidth, iconSizes, spacings } from './sizes';
 export declare type ContrastColor = {
-    backgroundColor: string;
-    color: string;
-    textColorType: TextColorType;
+    background: string;
+    text: string;
 };
-declare type StatusColor = {
-    main: ContrastColor;
+export declare type InteractiveColor = {
+    default: ContrastColor;
+    hover: ContrastColor;
+    active: ContrastColor;
+    disabled: ContrastColor;
+    outline: ContrastColor;
 };
 export interface Theme {
     spacings: typeof spacings;
-    colors: {
-        background_0: ContrastColor;
-        background_1: ContrastColor;
-        background_2: ContrastColor;
-        background_3: ContrastColor;
-        background_accent: ContrastColor;
-        primary_1: ContrastColor;
-        primary_2: ContrastColor;
-        primary_3: ContrastColor;
-        primary_destructive: ContrastColor;
-        secondary_1: ContrastColor;
-        secondary_2: ContrastColor;
-        secondary_3: ContrastColor;
-        secondary_4: ContrastColor;
-        transport_city: ContrastColor;
-        transport_region: ContrastColor;
-        transport_boat: ContrastColor;
-        transport_train: ContrastColor;
-        transport_airport: ContrastColor;
-        transport_plane: ContrastColor;
-        transport_other: ContrastColor;
+    interactive: {
+        interactive_0: InteractiveColor;
+        interactive_1: InteractiveColor;
+        interactive_2: InteractiveColor;
+        interactive_3: InteractiveColor;
+        interactive_destructive: InteractiveColor;
     };
-    content: {
-        subtle_primary: ContrastColor;
+    static: {
+        background: {
+            background_0: ContrastColor;
+            background_1: ContrastColor;
+            background_2: ContrastColor;
+            background_3: ContrastColor;
+            background_accent_0: ContrastColor;
+            background_accent_1: ContrastColor;
+            background_accent_2: ContrastColor;
+            background_accent_3: ContrastColor;
+            background_accent_4: ContrastColor;
+        };
+        transport: {
+            transport_city: ContrastColor;
+            transport_region: ContrastColor;
+            transport_boat: ContrastColor;
+            transport_train: ContrastColor;
+            transport_airport: ContrastColor;
+            transport_plane: ContrastColor;
+            transport_other: ContrastColor;
+        };
+        status: {
+            valid: ContrastColor;
+            info: ContrastColor;
+            warning: ContrastColor;
+            error: ContrastColor;
+        };
     };
-    status: {
-        valid: StatusColor;
-        info: StatusColor;
-        warning: StatusColor;
-        error: StatusColor;
-    };
     text: {
@@ -68,3 +75,3 @@ colors: {
 }
-export declare type Statuses = keyof Theme['status'];
+export declare type Statuses = keyof Theme['static']['status'];
 export declare enum ThemeVariant {
@@ -124,2 +131,1 @@ AtB = 0,
 };
-export {};

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

@@ -1,70 +0,89 @@
-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;
-    };
+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_400: ContrastColor;
+    gray_500: ContrastColor;
+    gray_600: ContrastColor;
+    gray_700: ContrastColor;
+    gray_800: ContrastColor;
+    gray_850: ContrastColor;
+    gray_900: ContrastColor;
+    gray_950: ContrastColor;
+    gray_1000: ContrastColor;
+    green_100: ContrastColor;
+    green_200: ContrastColor;
+    green_300: ContrastColor;
+    green_400: ContrastColor;
+    green_500: ContrastColor;
+    green_600: ContrastColor;
+    green_700: ContrastColor;
+    green_800: ContrastColor;
+    green_900: ContrastColor;
+    blue_100: ContrastColor;
+    blue_200: ContrastColor;
+    blue_300: ContrastColor;
+    blue_400: ContrastColor;
+    blue_500: ContrastColor;
+    blue_600: ContrastColor;
+    blue_700: ContrastColor;
+    blue_800: ContrastColor;
+    blue_900: ContrastColor;
+    cyan_100: ContrastColor;
+    cyan_200: ContrastColor;
+    cyan_300: ContrastColor;
+    cyan_400: ContrastColor;
+    cyan_500: ContrastColor;
+    cyan_600: ContrastColor;
+    cyan_700: ContrastColor;
+    cyan_800: ContrastColor;
+    cyan_900: ContrastColor;
+    burgundy_100: ContrastColor;
+    burgundy_200: ContrastColor;
+    burgundy_300: ContrastColor;
+    burgundy_400: ContrastColor;
+    burgundy_500: ContrastColor;
+    burgundy_600: ContrastColor;
+    burgundy_700: ContrastColor;
+    burgundy_800: ContrastColor;
+    burgundy_900: ContrastColor;
+    orange_100: ContrastColor;
+    orange_200: ContrastColor;
+    orange_300: ContrastColor;
+    orange_400: ContrastColor;
+    orange_500: ContrastColor;
+    orange_600: ContrastColor;
+    orange_700: ContrastColor;
+    orange_800: ContrastColor;
+    orange_900: ContrastColor;
+    yellow_100: ContrastColor;
+    yellow_200: ContrastColor;
+    yellow_300: ContrastColor;
+    yellow_400: ContrastColor;
+    yellow_500: ContrastColor;
+    yellow_600: ContrastColor;
+    yellow_700: ContrastColor;
+    yellow_800: ContrastColor;
+    yellow_900: ContrastColor;
+    red_100: ContrastColor;
+    red_200: ContrastColor;
+    red_300: ContrastColor;
+    red_400: ContrastColor;
+    red_500: ContrastColor;
+    red_600: ContrastColor;
+    red_700: ContrastColor;
+    red_800: ContrastColor;
+    red_900: ContrastColor;
+};
 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_850: 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;
-        yellow_100: string;
-        yellow_200: string;
-        yellow_500: string;
-        red_100: string;
-        red_400: string;
-        red_500: string;
-        red_600: string;
-        burgundy_800: string;
-    };
     text: {
@@ -74,9 +93,18 @@ light: string;
     };
-    other: {
-        orange_500: string;
-        ekspressen_500: string;
-        ekspressen_600: string;
+};
+export declare const backgrounds: {
+    light: {
+        level0: ContrastColor;
+        level1: ContrastColor;
+        level2: ContrastColor;
+        level3: ContrastColor;
     };
+    dark: {
+        level0: ContrastColor;
+        level1: ContrastColor;
+        level2: ContrastColor;
+        level3: ContrastColor;
+    };
 };
 declare const themes: Themes;
 export default themes;

lib/themes/atb-theme/theme.js

 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.colors = exports.backgrounds = void 0;
+exports.backgrounds = exports.colors = exports.baseColors = exports.textColors = void 0;
 var sizes_1 = require("../../sizes");
-var hex_to_rgba_1 = __importDefault(require("hex-to-rgba"));
+exports.textColors = {
+    light: '#FFFFFF',
+    dark: '#000000',
+    // secondary: '#00000060',
+    // disabled: '#00000020',
+};
+var contrastColor = function (background, textColorType) {
+    if (textColorType === void 0) { textColorType = 'dark'; }
+    return {
+        background: background,
+        text: exports.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_400: contrastColor('#8D9398', '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_950: contrastColor('#101315', 'light'),
+    gray_1000: contrastColor('#000000', 'light'),
+    // green
+    green_100: contrastColor('#E5E8B8', 'dark'),
+    green_200: contrastColor('#C9CF6B', 'dark'),
+    green_300: contrastColor('#A2AD00', 'dark'),
+    green_400: contrastColor('#909A00', 'dark'),
+    green_500: contrastColor('#757D00', 'dark'),
+    green_600: contrastColor('#5B6100', 'light'),
+    green_700: contrastColor('#464A00', 'light'),
+    green_800: contrastColor('#323600', 'light'),
+    green_900: contrastColor('#1F2100', 'light'),
+    // blue
+    blue_100: contrastColor('#D4E9EC', 'dark'),
+    blue_200: contrastColor('#A6D1D9', 'dark'),
+    blue_300: contrastColor('#75B8C4', 'dark'),
+    blue_400: contrastColor('#429EAE', 'dark'),
+    blue_500: contrastColor('#007C92', 'light'),
+    blue_600: contrastColor('#006678', 'light'),
+    blue_700: contrastColor('#004E5C', 'light'),
+    blue_800: contrastColor('#003943', 'light'),
+    blue_900: contrastColor('#002329', 'light'),
+    // cyan
+    cyan_100: contrastColor('#BFEDF1', 'dark'),
+    cyan_200: contrastColor('#71D6E0', 'dark'),
+    cyan_300: contrastColor('#62BAC3', 'dark'),
+    cyan_400: contrastColor('#539CA4', 'dark'),
+    cyan_500: contrastColor('#448086', 'dark'),
+    cyan_600: contrastColor('#356569', 'light'),
+    cyan_700: contrastColor('#294D51', 'light'),
+    cyan_800: contrastColor('#1D383A', 'light'),
+    cyan_900: contrastColor('#122224', 'light'),
+    // burgundy
+    burgundy_100: contrastColor('#E8E3E6', 'dark'),
+    burgundy_200: contrastColor('#D0C7CE', 'dark'),
+    burgundy_300: contrastColor('#B7A9B3', 'dark'),
+    burgundy_400: contrastColor('#A08E9B', 'dark'),
+    burgundy_500: contrastColor('#867080', 'dark'),
+    burgundy_600: contrastColor('#6F5468', 'light'),
+    burgundy_700: contrastColor('#5B3C53', 'light'),
+    burgundy_800: contrastColor('#4B2942', 'light'),
+    burgundy_900: contrastColor('#2C1827', 'light'),
+    // orange
+    orange_100: contrastColor('#F5E1D4', 'dark'),
+    orange_200: contrastColor('#EAC1A5', 'dark'),
+    orange_300: contrastColor('#DEA076', 'dark'),
+    orange_400: contrastColor('#D27C41', 'dark'),
+    orange_500: contrastColor('#C75B12', 'dark'),
+    orange_600: contrastColor('#97450E', 'light'),
+    orange_700: contrastColor('#73350A', 'light'),
+    orange_800: contrastColor('#542608', 'light'),
+    orange_900: contrastColor('#341805', 'light'),
+    // yellow
+    yellow_100: contrastColor('#F0E973', 'dark'),
+    yellow_200: contrastColor('#E4D700', 'dark'),
+    yellow_300: contrastColor('#C6AE00', 'dark'),
+    yellow_400: contrastColor('#AF9000', 'dark'),
+    yellow_500: contrastColor('#977000', 'dark'),
+    yellow_600: contrastColor('#815200', 'light'),
+    yellow_700: contrastColor('#6F3A00', 'light'),
+    yellow_800: contrastColor('#5C2000', 'light'),
+    yellow_900: contrastColor('#460200', 'light'),
+    // red
+    red_100: contrastColor('#EED2DB', 'dark'),
+    red_200: contrastColor('#E4B8C6', 'dark'),
+    red_300: contrastColor('#D691A7', 'dark'),
+    red_400: contrastColor('#C76B89', 'dark'),
+    red_500: contrastColor('#B74166', 'dark'),
+    red_600: contrastColor('#A51140', 'light'),
+    red_700: contrastColor('#7D0D31', 'light'),
+    red_800: contrastColor('#5C0A24', 'light'),
+    red_900: contrastColor('#380616', 'light'),
+};
+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: '#FFFFFF',
-        level1: '#F1F2F2',
-        level2: '#E3E5E6',
-        level3: '#D5D7D9',
+        level0: exports.baseColors.gray_0,
+        level1: exports.baseColors.gray_50,
+        level2: exports.baseColors.gray_100,
+        level3: exports.baseColors.gray_150,
     },
     dark: {
-        level0: '#000000',
-        level1: '#242B30',
-        level2: '#37424A',
-        level3: '#555E65',
+        level0: exports.baseColors.gray_1000,
+        level1: exports.baseColors.gray_850,
+        level2: exports.baseColors.gray_700,
+        level3: exports.baseColors.gray_600,
     },
 };
-exports.colors = {
-    white: '#ffffff',
-    black: '#000000',
-    primary: {
-        // grays
-        gray_50: '#F1F2F2',
-        gray_100: '#E3E5E6',
-        gray_200: '#C7CACC',
-        gray_300: '#A9AEB1',
-        gray_400: '#8D9398',
-        gray_500: '#6F777D',
-        gray_600: '#555E65',
-        gray_700: '#37424A',
-        gray_800: '#2B343A',
-        gray_850: '#242B30',
-        gray_900: '#1A2024',
-        gray_950: '#101315',
-        // greens
-        green_100: '#E5E8B8',
-        green_200: '#C9CF6B',
-        green_300: '#A2AD00',
-        green_400: '#909A00',
-        green_500: '#757D00',
-        green_600: '#5B6100',
-        green_700: '#464A00',
-        green_800: '#323600',
-        green_900: '#1F2100',
-    },
-    secondary: {
-        // cyan
-        cyan_100: '#BFEDF1',
-        cyan_200: '#71D6E0',
-        cyan_300: '#62BAC3',
-        cyan_400: '#539CA4',
-        cyan_500: '#448086',
-        cyan_600: '#356569',
-        cyan_700: '#294D51',
-        cyan_800: '#1D383A',
-        cyan_900: '#122224',
-        // i got the blues
-        blue_100: '#D4E9EC',
-        blue_200: '#A6D1D9',
-        blue_300: '#75B8C4',
-        blue_400: '#429EAE',
-        blue_500: '#007C92',
-        blue_600: '#006678',
-        blue_700: '#004E5C',
-        blue_800: '#003943',
-        blue_900: '#002329',
-        yellow_100: '#F0E973',
-        yellow_200: '#E4D700',
-        yellow_500: '#977000',
-        red_100: '#EED2DB',
-        red_400: '#C76B89',
-        red_500: '#B74166',
-        red_600: '#A51140',
-        burgundy_800: '#4B2942',
-    },
-    text: {
-        light: '#FFFFFF',
-        dark: '#000000',
-    },
-    other: {
-        orange_500: '#C75B12',
-        ekspressen_500: '#ED6C05',
-        ekspressen_600: '#C75B12',
-    },
-};
-var contrastColor = function (backgroundColor, textColorType) {
-    if (backgroundColor === void 0) { backgroundColor = exports.colors.white; }
-    if (textColorType === void 0) { textColorType = 'dark'; }
-    return { backgroundColor: backgroundColor, color: exports.colors.text[textColorType], textColorType: textColorType };
-};
 var themes = {
     light: {
         spacings: sizes_1.spacings,
-        colors: {
-            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_700, 'light'),
-            primary_1: contrastColor(exports.colors.primary.green_300, 'dark'),
-            primary_2: contrastColor(exports.colors.secondary.blue_500, 'light'),
-            primary_3: contrastColor(exports.colors.secondary.blue_100, 'dark'),
-            primary_destructive: contrastColor(exports.colors.secondary.red_600, 'light'),
-            secondary_1: contrastColor(exports.colors.primary.gray_700, 'light'),
-            secondary_2: contrastColor(exports.colors.white, 'dark'),
-            secondary_3: contrastColor(exports.colors.primary.gray_600, 'light'),
-            secondary_4: contrastColor(exports.colors.primary.gray_50, 'dark'),
-            transport_city: contrastColor(exports.colors.primary.green_300, 'dark'),
-            transport_region: contrastColor(exports.colors.secondary.blue_500, 'light'),
-            transport_boat: contrastColor(exports.colors.secondary.cyan_200, 'dark'),
-            transport_train: contrastColor(exports.colors.secondary.burgundy_800, 'light'),
-            transport_airport: contrastColor(exports.colors.other.orange_500, 'light'),
-            transport_plane: contrastColor(exports.colors.other.orange_500, 'light'),
-            transport_other: contrastColor(exports.colors.primary.gray_600, 'light'),
-        },
-        content: {
-            subtle_primary: contrastColor(exports.colors.primary.gray_50, 'dark'),
-        },
-        status: {
-            valid: {
-                main: contrastColor(exports.colors.primary.green_300, 'dark'),
+        interactive: {
+            interactive_0: {
+                default: exports.baseColors.blue_500,
+                hover: exports.baseColors.blue_400,
+                active: exports.baseColors.blue_600,
+                disabled: exports.baseColors.blue_100,
+                outline: exports.baseColors.cyan_200,
             },
-            info: {
-                main: contrastColor(exports.colors.secondary.cyan_200, 'dark'),
+            interactive_1: {
+                default: exports.baseColors.gray_700,
+                hover: exports.baseColors.gray_600,
+                active: exports.baseColors.gray_800,
+                disabled: exports.baseColors.gray_200,
+                outline: exports.baseColors.blue_500,
             },
-            warning: {
-                main: contrastColor(exports.colors.secondary.yellow_200, 'dark'),
+            interactive_2: {
+                default: exports.baseColors.gray_0,
+                hover: exports.baseColors.blue_100,
+                active: exports.baseColors.blue_200,
+                disabled: exports.baseColors.gray_0,
+                outline: exports.baseColors.blue_500,
             },
-            error: {
-                main: contrastColor(exports.colors.secondary.red_600, '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_500,
             },
+            interactive_destructive: {
+                default: exports.baseColors.red_600,
+                hover: exports.baseColors.red_500,
+                active: exports.baseColors.red_700,
+                disabled: exports.baseColors.red_100,
+                outline: exports.baseColors.blue_500,
+            },
         },
+        static: {
+            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.blue_100,
+                background_accent_3: exports.baseColors.blue_500,
+                background_accent_4: exports.baseColors.green_100,
+            },
+            transport: {
+                transport_city: exports.baseColors.green_300,
+                transport_region: exports.baseColors.blue_500,
+                transport_boat: exports.baseColors.cyan_200,
+                transport_train: exports.baseColors.burgundy_800,
+                transport_airport: exports.baseColors.orange_500,
+                transport_plane: exports.baseColors.orange_500,
+                transport_other: exports.baseColors.gray_600,
+            },
+            status: {
+                valid: exports.baseColors.green_300,
+                info: exports.baseColors.cyan_200,
+                warning: exports.baseColors.yellow_200,
+                error: exports.baseColors.red_600,
+            },
+        },
         text: {
             colors: {
-                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),
+                primary: exports.baseColors.gray_1000.background,
+                secondary: exports.baseColors.gray_600.background,
+                disabled: exports.baseColors.gray_300.background,
             },
         },
         border: {
-            primary: exports.backgrounds.light.level1,
+            primary: exports.baseColors.gray_50.background,
             secondary: exports.colors.text.dark,
-            focus: exports.colors.secondary.blue_500,
+            focus: exports.baseColors.blue_500.background,
             radius: sizes_1.borderRadius,
@@ -158,52 +216,78 @@ width: sizes_1.borderWidth,
         spacings: sizes_1.spacings,
-        colors: {
-            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_700, 'light'),
-            primary_1: contrastColor(exports.colors.primary.green_300, 'dark'),
-            primary_2: contrastColor(exports.colors.secondary.blue_500, 'light'),
-            primary_3: contrastColor(exports.colors.secondary.blue_100, 'dark'),
-            primary_destructive: contrastColor(exports.colors.secondary.red_600, 'light'),
-            secondary_1: contrastColor(exports.colors.primary.gray_300, 'dark'),
-            secondary_2: contrastColor(exports.colors.black, 'light'),
-            secondary_3: contrastColor(exports.colors.primary.gray_600, 'light'),
-            secondary_4: contrastColor(exports.colors.primary.gray_600, 'light'),
-            transport_city: contrastColor(exports.colors.primary.green_300, 'dark'),
-            transport_region: contrastColor(exports.colors.secondary.blue_500, 'light'),
-            transport_boat: contrastColor(exports.colors.secondary.cyan_200, 'dark'),
-            transport_train: contrastColor(exports.colors.secondary.burgundy_800, 'light'),
-            transport_airport: contrastColor(exports.colors.other.orange_500, 'light'),
-            transport_plane: contrastColor(exports.colors.other.orange_500, 'light'),
-            transport_other: contrastColor(exports.colors.primary.gray_600, 'light'),
-        },
-        content: {
-            subtle_primary: contrastColor(exports.colors.primary.gray_850, 'dark'),
-        },
-        status: {
-            valid: {
-                main: contrastColor(exports.colors.primary.green_300, 'dark'),
+        interactive: {
+            interactive_0: {
+                default: exports.baseColors.blue_500,
+                hover: exports.baseColors.blue_400,
+                active: exports.baseColors.blue_600,
+                disabled: exports.baseColors.blue_100,
+                outline: exports.baseColors.cyan_200,
             },
-            info: {
-                main: contrastColor(exports.colors.secondary.cyan_200, 'dark'),
+            interactive_1: {
+                default: exports.baseColors.gray_600,
+                hover: exports.baseColors.gray_500,
+                active: exports.baseColors.gray_700,
+                disabled: exports.baseColors.gray_200,
+                outline: exports.baseColors.blue_500,
             },
-            warning: {
-                main: contrastColor(exports.colors.secondary.yellow_200, 'dark'),
+            interactive_2: {
+                default: exports.baseColors.gray_1000,
+                hover: exports.baseColors.blue_900,
+                active: exports.baseColors.blue_800,
+                disabled: exports.baseColors.gray_1000,
+                outline: exports.baseColors.blue_500,
             },
-            error: {
-                main: contrastColor(exports.colors.secondary.red_600, '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_500,
             },
+            interactive_destructive: {
+                default: exports.baseColors.red_600,
+                hover: exports.baseColors.red_500,
+                active: exports.baseColors.red_700,
+                disabled: exports.baseColors.red_100,
+                outline: exports.baseColors.blue_500,
+            },
         },
+        static: {
+            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.blue_100,
+                background_accent_3: exports.baseColors.blue_500,
+                background_accent_4: exports.baseColors.green_100,
+            },
+            transport: {
+                transport_city: exports.baseColors.green_300,
+                transport_region: exports.baseColors.blue_500,
+                transport_boat: exports.baseColors.cyan_200,
+                transport_train: exports.baseColors.burgundy_800,
+                transport_airport: exports.baseColors.orange_500,
+                transport_plane: exports.baseColors.orange_500,
+                transport_other: exports.baseColors.gray_600,
+            },
+            status: {
+                valid: exports.baseColors.green_300,
+                info: exports.baseColors.cyan_200,
+                warning: exports.baseColors.yellow_200,
+                error: exports.baseColors.red_600,
+            },
+        },
         text: {
             colors: {
-                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),
+                primary: exports.baseColors.gray_0.background,
+                secondary: exports.baseColors.gray_50.background,
+                disabled: exports.baseColors.gray_300.background,
             },
         },
         border: {
-            primary: exports.backgrounds.dark.level1,
-            secondary: exports.colors.text.light,
-            focus: exports.colors.secondary.cyan_500,
+            primary: exports.baseColors.gray_850.background,
+            secondary: exports.baseColors.gray_0.background,
+            focus: exports.baseColors.cyan_500.background,
             radius: sizes_1.borderRadius,
@@ -210,0 +294,0 @@ width: sizes_1.borderWidth,

lib/themes/nfk-theme/theme.js

@@ -16,6 +16,9 @@ "use strict";
 };
-var contrastColor = function (backgroundColor, textColorType) {
-    if (backgroundColor === void 0) { backgroundColor = colors.white; }
+var contrastColor = function (background, textColorType) {
+    if (background === void 0) { background = colors.white; }
     if (textColorType === void 0) { textColorType = 'dark'; }
-    return { backgroundColor: backgroundColor, color: colors.text[textColorType], textColorType: textColorType };
+    return {
+        background: background,
+        text: colors.text[textColorType],
+    };
 };
@@ -25,41 +28,67 @@ var themes = {
         spacings: sizes_1.spacings,
-        colors: {
-            background_0: contrastColor('#FFFFFF', 'dark'),
-            background_1: contrastColor('#E6F2F6', 'dark'),
-            background_2: contrastColor('#EAEAEA', 'dark'),
-            background_3: contrastColor('#E4E4E4', 'dark'),
-            background_accent: contrastColor('#0181A2', 'light'),
-            primary_1: contrastColor('#80C0D1', 'dark'),
-            primary_2: contrastColor('#046073', 'light'),
-            primary_3: contrastColor('#99CDDA', 'dark'),
-            primary_destructive: contrastColor('#A61419', 'light'),
-            secondary_1: contrastColor('#003441', 'light'),
-            secondary_2: contrastColor('#BCCBCF', 'dark'),
-            secondary_3: contrastColor('#566569', 'light'),
-            secondary_4: contrastColor('#DDE5E7', 'dark'),
-            transport_city: contrastColor('#014D61', 'light'),
-            transport_region: contrastColor('#6C7E2F', 'light'),
-            transport_boat: contrastColor('#1777D7', 'light'),
-            transport_train: contrastColor('#A5608A', 'light'),
-            transport_airport: contrastColor('#8A62C3', 'light'),
-            transport_plane: contrastColor('#318181', 'light'),
-            transport_other: contrastColor('#717171', 'light'),
-        },
-        content: {
-            subtle_primary: contrastColor('#E7E8E9', 'dark'),
-        },
-        status: {
-            valid: {
-                main: contrastColor('#7FDABB', 'dark'),
+        interactive: {
+            interactive_0: {
+                default: contrastColor('#FFFFFF', 'dark'),
+                hover: contrastColor('#FFFFFF', 'dark'),
+                active: contrastColor('#FFFFFF', 'dark'),
+                disabled: contrastColor('#FFFFFF', 'dark'),
+                outline: contrastColor('#FFFFFF', 'dark'),
             },
-            info: {
-                main: contrastColor('#99CDDA', 'dark'),
+            interactive_1: {
+                default: contrastColor('#FFFFFF', 'dark'),
+                hover: contrastColor('#FFFFFF', 'dark'),
+                active: contrastColor('#FFFFFF', 'dark'),
+                disabled: contrastColor('#FFFFFF', 'dark'),
+                outline: contrastColor('#FFFFFF', 'dark'),
             },
-            warning: {
-                main: contrastColor('#FCBA63', 'dark'),
+            interactive_2: {
+                default: contrastColor('#FFFFFF', 'dark'),
+                hover: contrastColor('#FFFFFF', 'dark'),
+                active: contrastColor('#FFFFFF', 'dark'),
+                disabled: contrastColor('#FFFFFF', 'dark'),
+                outline: contrastColor('#FFFFFF', 'dark'),
             },
-            error: {
-                main: contrastColor('#A61419', 'light'),
+            interactive_3: {
+                default: contrastColor('#FFFFFF', 'dark'),
+                hover: contrastColor('#FFFFFF', 'dark'),
+                active: contrastColor('#FFFFFF', 'dark'),
+                disabled: contrastColor('#FFFFFF', 'dark'),
+                outline: contrastColor('#FFFFFF', 'dark'),
             },
+            interactive_destructive: {
+                default: contrastColor('#FFFFFF', 'dark'),
+                hover: contrastColor('#FFFFFF', 'dark'),
+                active: contrastColor('#FFFFFF', 'dark'),
+                disabled: contrastColor('#FFFFFF', 'dark'),
+                outline: contrastColor('#FFFFFF', 'dark'),
+            },
         },
+        static: {
+            background: {
+                background_0: contrastColor('#FFFFFF', 'dark'),
+                background_1: contrastColor('#E6F2F6', 'dark'),
+                background_2: contrastColor('#EAEAEA', 'dark'),
+                background_3: contrastColor('#E4E4E4', 'dark'),
+                background_accent_0: contrastColor('#0181A2', 'light'),
+                background_accent_1: contrastColor('#FFFFFF', 'dark'),
+                background_accent_2: contrastColor('#FFFFFF', 'dark'),
+                background_accent_3: contrastColor('#FFFFFF', 'dark'),
+                background_accent_4: contrastColor('#FFFFFF', 'dark'),
+            },
+            transport: {
+                transport_city: contrastColor('#014D61', 'light'),
+                transport_region: contrastColor('#6C7E2F', 'light'),
+                transport_boat: contrastColor('#1777D7', 'light'),
+                transport_train: contrastColor('#A5608A', 'light'),
+                transport_airport: contrastColor('#8A62C3', 'light'),
+                transport_plane: contrastColor('#318181', 'light'),
+                transport_other: contrastColor('#717171', 'light'),
+            },
+            status: {
+                valid: contrastColor('#7FDABB', 'dark'),
+                info: contrastColor('#99CDDA', 'dark'),
+                warning: contrastColor('#FCBA63', 'dark'),
+                error: contrastColor('#A61419', 'light'),
+            },
+        },
         text: {
@@ -85,41 +114,67 @@ colors: {
         spacings: sizes_1.spacings,
-        colors: {
-            background_0: contrastColor('#046073', 'light'),
-            background_1: contrastColor('#00303D', 'light'),
-            background_2: contrastColor('#00232C', 'light'),
-            background_3: contrastColor('#002B38', 'light'),
-            background_accent: contrastColor('#00232C', 'light'),
-            primary_1: contrastColor('#80C0D1', 'dark'),
-            primary_2: contrastColor('#0181A2', 'light'),
-            primary_3: contrastColor('#99CDDA', 'dark'),
-            primary_destructive: contrastColor('#D51920', 'light'),
-            secondary_1: contrastColor('#D2DDDF', 'dark'),
-            secondary_2: contrastColor('#386169', 'light'),
-            secondary_3: contrastColor('#436B73', 'light'),
-            secondary_4: contrastColor('#264B54', 'light'),
-            transport_city: contrastColor('#80C0D1'),
-            transport_region: contrastColor('#98A56D'),
-            transport_boat: contrastColor('#5DA0E3'),
-            transport_train: contrastColor('#C090AD'),
-            transport_airport: contrastColor('#AD91D5'),
-            transport_plane: contrastColor('#6FA7A7'),
-            transport_other: contrastColor('#9C9C9C'),
-        },
-        content: {
-            subtle_primary: contrastColor('#1B1C1D', 'dark'),
-        },
-        status: {
-            valid: {
-                main: contrastColor('#7FDABB', 'dark'),
+        interactive: {
+            interactive_0: {
+                default: contrastColor('#FFFFFF', 'dark'),
+                hover: contrastColor('#FFFFFF', 'dark'),
+                active: contrastColor('#FFFFFF', 'dark'),
+                disabled: contrastColor('#FFFFFF', 'dark'),
+                outline: contrastColor('#FFFFFF', 'dark'),
             },
-            info: {
-                main: contrastColor('#99CDDA', 'dark'),
+            interactive_1: {
+                default: contrastColor('#FFFFFF', 'dark'),
+                hover: contrastColor('#FFFFFF', 'dark'),
+                active: contrastColor('#FFFFFF', 'dark'),
+                disabled: contrastColor('#FFFFFF', 'dark'),
+                outline: contrastColor('#FFFFFF', 'dark'),
             },
-            warning: {
-                main: contrastColor('#FCBA63', 'dark'),
+            interactive_2: {
+                default: contrastColor('#FFFFFF', 'dark'),
+                hover: contrastColor('#FFFFFF', 'dark'),
+                active: contrastColor('#FFFFFF', 'dark'),
+                disabled: contrastColor('#FFFFFF', 'dark'),
+                outline: contrastColor('#FFFFFF', 'dark'),
             },
-            error: {
-                main: contrastColor('#BE161D', 'light'),
+            interactive_3: {
+                default: contrastColor('#FFFFFF', 'dark'),
+                hover: contrastColor('#FFFFFF', 'dark'),
+                active: contrastColor('#FFFFFF', 'dark'),
+                disabled: contrastColor('#FFFFFF', 'dark'),
+                outline: contrastColor('#FFFFFF', 'dark'),
             },
+            interactive_destructive: {
+                default: contrastColor('#FFFFFF', 'dark'),
+                hover: contrastColor('#FFFFFF', 'dark'),
+                active: contrastColor('#FFFFFF', 'dark'),
+                disabled: contrastColor('#FFFFFF', 'dark'),
+                outline: contrastColor('#FFFFFF', 'dark'),
+            },
         },
+        static: {
+            background: {
+                background_0: contrastColor('#046073', 'light'),
+                background_1: contrastColor('#00303D', 'light'),
+                background_2: contrastColor('#00232C', 'light'),
+                background_3: contrastColor('#002B38', 'light'),
+                background_accent_0: contrastColor('#00232C', 'light'),
+                background_accent_1: contrastColor('#000000', 'light'),
+                background_accent_2: contrastColor('#000000', 'light'),
+                background_accent_3: contrastColor('#000000', 'light'),
+                background_accent_4: contrastColor('#000000', 'light'),
+            },
+            transport: {
+                transport_city: contrastColor('#80C0D1'),
+                transport_region: contrastColor('#98A56D'),
+                transport_boat: contrastColor('#5DA0E3'),
+                transport_train: contrastColor('#C090AD'),
+                transport_airport: contrastColor('#AD91D5'),
+                transport_plane: contrastColor('#6FA7A7'),
+                transport_other: contrastColor('#9C9C9C'),
+            },
+            status: {
+                valid: contrastColor('#7FDABB', 'dark'),
+                info: contrastColor('#99CDDA', 'dark'),
+                warning: contrastColor('#FCBA63', 'dark'),
+                error: contrastColor('#BE161D', 'light'),
+            },
+        },
         text: {
@@ -126,0 +181,0 @@ colors: {

lib/typography/android.js

@@ -30,2 +30,7 @@ "use strict";
 };
+var labelBase = {
+    fontSize: 8,
+    lineHeight: 16,
+    letterSpacing: 0,
+};
 exports.androidFontData = {
@@ -59,3 +64,4 @@ main: {
     heading__paragraph: __assign(__assign({}, primaryBase), { fontWeight: '500' }),
+    label__uppercase: __assign(__assign({}, labelBase), { textTransform: 'uppercase' }),
 };
 //# sourceMappingURL=android.js.map

lib/typography/ios.js

@@ -30,2 +30,7 @@ "use strict";
 };
+var labelBase = {
+    fontSize: 8,
+    lineHeight: 16,
+    letterSpacing: 0,
+};
 exports.iosFontData = {
@@ -58,3 +63,4 @@ main: {
     heading__paragraph: __assign(__assign({}, primaryBase), { fontWeight: '600' }),
+    label__uppercase: __assign(__assign({}, labelBase), { textTransform: 'uppercase' }),
 };
 //# sourceMappingURL=ios.js.map

lib/typography/types.d.ts

@@ -1,2 +0,2 @@
-export declare const textNames: readonly ["body__primary", "body__primary--bold", "body__primary--underline", "body__primary--jumbo", "body__primary--jumbo--bold", "body__secondary", "body__secondary--bold", "body__tertiary", "body__tertiary--strike", "heading__title", "heading__component", "heading__paragraph"];
+export declare const textNames: readonly ["body__primary", "body__primary--bold", "body__primary--underline", "body__primary--jumbo", "body__primary--jumbo--bold", "body__secondary", "body__secondary--bold", "body__tertiary", "body__tertiary--strike", "heading__title", "heading__component", "heading__paragraph", "label__uppercase"];
 export declare type FontMetadata = {
@@ -17,2 +17,3 @@ url?: string;
     fontWeight?: 'normal' | 'bold' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900';
+    textTransform?: 'uppercase' | 'lowercase' | 'capitalize' | 'none';
 };
@@ -19,0 +20,0 @@ export declare type TextTypeStyles = {

lib/typography/types.js

@@ -17,3 +17,4 @@ "use strict";
     'heading__paragraph',
+    'label__uppercase',
 ];
 //# sourceMappingURL=types.js.map

package.json

 {
   "name": "@atb-as/theme",
-  "version": "5.0.3",
+  "version": "6.0.0-alpha.0",
   "private": false,
@@ -34,3 +34,3 @@ "description": "AtB Design System Colors",
   },
-  "gitHead": "7aa5c22afea00cffa0fd1c618ff832f3123347b4"
+  "gitHead": "710e85db095e6f10d80a67e9d963ee97389f3f69"
 }

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

182408

increased by50.83%

Lines of code

3553

increased by37.29%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes