@entur/tokens 3.19.2 → 3.20.0

package/dist/legacy-tokens.d.ts

@@ -0,0 +1,355 @@
+export declare const colors: {
+    brand: {
+        blue: string;
+        lavender: string;
+        white: string;
+        coral: string;
+        peach: string;
+    };
+    blues: {
+        blue10: string;
+        blue20: string;
+        blue30: string;
+        blue40: string;
+        blue45: string;
+        blue50: string;
+        blue60: string;
+        blue70: string;
+        blue80: string;
+        blue90: string;
+    };
+    greys: {
+        grey: string;
+        grey10: string;
+        grey20: string;
+        grey30: string;
+        grey40: string;
+        grey45: string;
+        grey50: string;
+        grey60: string;
+        grey70: string;
+        grey80: string;
+        grey90: string;
+    };
+    validation: {
+        sky: string;
+        skyContrast: string;
+        skyTint: string;
+        lava: string;
+        lavaContrast: string;
+        lavaTint: string;
+        mint: string;
+        mintContrast: string;
+        mintTint: string;
+        canary: string;
+        canaryContrast: string;
+        canaryTint: string;
+    };
+    misc: {
+        focus: string;
+        black: string;
+    };
+    transport: {
+        default: {
+            metro: string;
+            bus: string;
+            plane: string;
+            helicopter: string;
+            tram: string;
+            funicular: string;
+            cableway: string;
+            taxi: string;
+            bicycle: string;
+            walk: string;
+            train: string;
+            ferry: string;
+            carferry: string;
+            mobility: string;
+        };
+        contrast: {
+            metro: string;
+            bus: string;
+            plane: string;
+            helicopter: string;
+            tram: string;
+            funicular: string;
+            cableway: string;
+            taxi: string;
+            bicycle: string;
+            walk: string;
+            train: string;
+            ferry: string;
+            carferry: string;
+            mobility: string;
+        };
+    };
+    data: {
+        default: {
+            blue: string;
+            coral: string;
+            jungle: string;
+            azure: string;
+            lavender: string;
+            peach: string;
+            spring: string;
+            lilac: string;
+        };
+        contrast: {
+            blue: string;
+            coral: string;
+            jungle: string;
+            azure: string;
+            lavender: string;
+            peach: string;
+            spring: string;
+            lilac: string;
+        };
+    };
+};
+export declare const space: {
+    /** 0px */
+    none: number;
+    /** 16px (1rem) */
+    default: number;
+    /** 4px (0.25rem) */
+    extraSmall2: number;
+    /** 8px (0.5rem) */
+    extraSmall: number;
+    /** 12px (0.75rem) */
+    small: number;
+    /** 16px (1rem) */
+    medium: number;
+    /** 24px (1.5rem) */
+    large: number;
+    /** 32px (2rem) */
+    extraLarge: number;
+    /** 40px (2.5rem) */
+    extraLarge2: number;
+    /** 48px (3rem) */
+    extraLarge3: number;
+    /** 56px (3.5rem) */
+    extraLarge4: number;
+    /** 64px (4rem) */
+    extraLarge5: number;
+    /** 72px (4.5rem) */
+    extraLarge6: number;
+    /** 80px (5rem) */
+    extraLarge7: number;
+    /** 88px (5.5rem) */
+    extraLarge8: number;
+    /** 96px (6rem) */
+    extraLarge9: number;
+    rem: {
+        /**  0rem (0px) */
+        none: number;
+        /** 1rem (16px) */
+        default: number;
+        /** 0.25rem (4px) */
+        extraSmall2: number;
+        /** 0.5rem (8px)  */
+        extraSmall: number;
+        /** 0.75rem (12px) */
+        small: number;
+        /** 1rem (16px) */
+        medium: number;
+        /** 1.5rem (24px) */
+        large: number;
+        /** 2rem (32px) */
+        extraLarge: number;
+        /** 2.5rem (40px) */
+        extraLarge2: number;
+        /** 3rem (48px) */
+        extraLarge3: number;
+        /** 3.5rem (56px) */
+        extraLarge4: number;
+        /** 4rem (64px) */
+        extraLarge5: number;
+        /**  4.5rem (72px) */
+        extraLarge6: number;
+        /** 5rem (80px) */
+        extraLarge7: number;
+        /**  5.5rem (88px) */
+        extraLarge8: number;
+        /**  6rem (96px) */
+        extraLarge9: number;
+    };
+};
+export declare const fontWeights: {
+    body: string;
+    heading: string;
+};
+export declare const fontSizes: {
+    /** 10px (0.625rem) */
+    extraSmall: number;
+    /** 12px (0.75rem) */
+    small: number;
+    /** 14px (0.875rem) */
+    medium: number;
+    /** 16px (1rem) */
+    large: number;
+    /** 20 px (1.25rem) */
+    extraLarge: number;
+    /** 24 px (1.5rem) */
+    extraLarge2: number;
+    /** 28 px (1.75rem) */
+    extraLarge3: number;
+    /** 32 px (2rem) */
+    extraLarge4: number;
+    /** 40 px (2.5rem) */
+    extraLarge5: number;
+    rem: {
+        /** 0.625rem (10px) */
+        extraSmall: number;
+        /** 0.75rem (12px) */
+        small: number;
+        /** 0.875rem (14px) */
+        medium: number;
+        /** 1rem (16px) */
+        large: number;
+        /** 1.25rem (20px) */
+        extraLarge: number;
+        /** 1.5rem (24px) */
+        extraLarge2: number;
+        /** 1.75rem (28px) */
+        extraLarge3: number;
+        /** 2rem (32px) */
+        extraLarge4: number;
+        /** 2.5rem (40px) */
+        extraLarge5: number;
+    };
+};
+export declare const lineHeights: {
+    /** 14px (0.875rem) */
+    extraSmall: number;
+    /** 16px (1rem) */
+    small: number;
+    /** 20px (1.25rem) */
+    medium: number;
+    /** 22px (1.375rem) */
+    large: number;
+    /** 24px (1.5rem) */
+    extraLarge: number;
+    /** 28px (1.75rem) */
+    extraLarge2: number;
+    /** 30px (1.875rem) */
+    extraLarge3: number;
+    /** 36px (2.25rem) */
+    extraLarge4: number;
+    /** 42px (2.625rem) */
+    extraLarge5: number;
+    /** 48px (3rem) */
+    extraLarge6: number;
+    /** 60px (3.75rem) */
+    extraLarge7: number;
+    rem: {
+        /** 0.875rem (14px) */
+        extraSmall: number;
+        /** 1rem (16px) */
+        small: number;
+        /** 1.25rem (20px) */
+        medium: number;
+        /** 1.375rem (22px) */
+        large: number;
+        /** 1.5rem (24px) */
+        extraLarge: number;
+        /** 1.75rem (28px) */
+        extraLarge2: number;
+        /** 1.875rem (30px) */
+        extraLarge3: number;
+        /** 2.25rem (36px) */
+        extraLarge4: number;
+        /** 2.625rem (42px) */
+        extraLarge5: number;
+        /** 3rem (48px) */
+        extraLarge6: number;
+        /** 3.75rem (60px) */
+        extraLarge7: number;
+    };
+};
+export declare const breakpoints: {
+    large: number;
+    extraLarge: number;
+    rem: {
+        large: number;
+        extraLarge: number;
+    };
+};
+export declare const borderWidths: {
+    /** 2px (0.125rem) */
+    default: number;
+    /** 1px (0.0625rem) */
+    small: number;
+    /** 2px (0.125rem) */
+    medium: number;
+    /** 4px (0.25rem) */
+    large: number;
+    rem: {
+        /** 0.125rem (2px) */
+        default: number;
+        /** 0.0625rem (1px) */
+        small: number;
+        /** 0.125rem (2px) */
+        medium: number;
+        /** 0.25rem (4px) */
+        large: number;
+    };
+};
+export declare const borderRadiuses: {
+    /** 1 px (0.0625rem) */
+    default: number;
+    /** 1 px (0.0625rem) */
+    small: number;
+    /** 4 px (0.25rem) */
+    medium: number;
+    /** 8 px (0.5rem) */
+    large: number;
+    rem: {
+        /** 0.0625rem (1px) */
+        default: number;
+        /** 0.0625rem (1px) */
+        small: number;
+        /** 0.25rem (4px) */
+        medium: number;
+        /** 0.5rem (8px) */
+        large: number;
+    };
+};
+export declare const shadows: {
+    focus: string;
+    focusContrast: string;
+    cardShadow: string;
+    cardShadowHover: string;
+    cardShadowContrast: string;
+    cardShadowHoverContrast: string;
+    boxShadow: string;
+    boxShadowContrast: string;
+};
+export declare const zIndexes: {
+    behind: number;
+    default: number;
+    sticky: number;
+    popover: number;
+    overlay: number;
+    modal: number;
+    toast: number;
+};
+export declare const timings: {
+    /** 0.1s */
+    fast: string;
+    /** 0.2s */
+    medium: string;
+    /** 0.5s */
+    slow: string;
+};
+export declare const outlines: {
+    focus: string;
+    focusContrast: string;
+};
+export declare const outlineOffsets: {
+    /** 2px (0.125rem) */
+    focus: number;
+    rem: {
+        /** 0.125rem (2px) */
+        focus: number;
+    };
+};

package/dist/primitive.d.ts

@@ -0,0 +1,152 @@
+export declare const primitive: {
+    blue: {
+        _10: string;
+        _100: string;
+        _20: string;
+        _30: string;
+        _40: string;
+        _50: string;
+        _60: string;
+        _70: string;
+        _80: string;
+        _90: string;
+    };
+    canary: {
+        _10: string;
+        _100: string;
+        _20: string;
+        _30: string;
+        _40: string;
+        _50: string;
+        _60: string;
+        _70: string;
+        _80: string;
+        _90: string;
+    };
+    coral: {
+        _10: string;
+        _100: string;
+        _20: string;
+        _30: string;
+        _40: string;
+        _50: string;
+        _60: string;
+        _70: string;
+        _80: string;
+        _90: string;
+    };
+    ebony: {
+        _10: string;
+        _100: string;
+        _15: string;
+        _20: string;
+        _25: string;
+        _30: string;
+        _35: string;
+        _40: string;
+        _45: string;
+        _5: string;
+        _50: string;
+        _55: string;
+        _60: string;
+        _65: string;
+        _70: string;
+        _75: string;
+        _80: string;
+        _85: string;
+        _90: string;
+        _95: string;
+    };
+    grey: {
+        _10: string;
+        _100: string;
+        _110: string;
+        _20: string;
+        _30: string;
+        _40: string;
+        _50: string;
+        _60: string;
+        _70: string;
+        _80: string;
+        _90: string;
+    };
+    lavender: {
+        _10: string;
+        _100: string;
+        _20: string;
+        _30: string;
+        _40: string;
+        _50: string;
+        _60: string;
+        _70: string;
+        _80: string;
+        _90: string;
+    };
+    mint: {
+        _10: string;
+        _100: string;
+        _20: string;
+        _30: string;
+        _40: string;
+        _50: string;
+        _60: string;
+        _70: string;
+        _80: string;
+        _90: string;
+    };
+    peach: {
+        _10: string;
+        _100: string;
+        _20: string;
+        _30: string;
+        _40: string;
+        _50: string;
+        _60: string;
+        _70: string;
+        _80: string;
+        _90: string;
+    };
+    sky: {
+        _10: string;
+        _100: string;
+        _20: string;
+        _30: string;
+        _40: string;
+        _50: string;
+        _60: string;
+        _70: string;
+        _80: string;
+        _90: string;
+    };
+    transparent: {
+        blueAlpha10: string;
+        blueAlpha40: string;
+        canaryAlpha25: string;
+        canaryAlpha30: string;
+        coralAlpha20: string;
+        ebonyAlpha15: string;
+        ebonyAlpha20: string;
+        ebonyAlpha25: string;
+        ebonyAlpha35: string;
+        lavenderAlpha70: string;
+        mintAlpha20: string;
+        neutralAlpha10: string;
+        neutralAlpha15: string;
+        neutralAlpha20: string;
+        peachAlpha70: string;
+        skyAlpha20: string;
+    };
+    white: {
+        alpha0: string;
+        alpha10: string;
+        alpha100: string;
+        alpha20: string;
+        alpha30: string;
+        alpha40: string;
+        alpha50: string;
+        alpha60: string;
+        alpha70: string;
+        alpha80: string;
+        alpha90: string;
+    };
+};

package/dist/semantic.css

@@ -105,6 +105,7 @@
 	--stroke-dark: var(--ebony-30);
 	--stroke-darkalt: var(--ebony-50);
 	--stroke-darkalt-2: var(--ebony-100);
+	--stroke-highcontrast: var(--lavender-100);
 	--stroke-highlight: var(--coral-40);
 	--stroke-highlightalt: var(--coral-30);
 	--stroke-information: var(--sky-50);

package/dist/semantic.d.ts

@@ -0,0 +1,198 @@
+export declare const semantic: {
+    fill: {
+        background: {
+            contrast: {
+                dark: string;
+                light: string;
+                lightalt: string;
+                lightalt2: string;
+            };
+            overlay: {
+                solid: string;
+                solidalt: string;
+                transparent: string;
+                transparentalt: string;
+                transparentalt2: string;
+            };
+            standard: {
+                colorless: string;
+                dark: string;
+                light: string;
+            };
+            subdued: {
+                dark: string;
+                light: string;
+            };
+            tint: {
+                dark: string;
+                light: string;
+                neutral: string;
+                transparent: string;
+            };
+        };
+        boolean: {
+            false: {
+                contrast: string;
+                dark: string;
+                light: string;
+            };
+            true: {
+                contrast: string;
+                dark: string;
+                light: string;
+            };
+        };
+        disabled: {
+            light: string;
+            transparent: string;
+            transparentalt: string;
+        };
+        information: {
+            contrast: string;
+            deep: string;
+            muted: string;
+            tint: string;
+            transparent: string;
+        };
+        negative: {
+            contrast: string;
+            dark: string;
+            deep: string;
+            muted: string;
+            tint: string;
+            transparent: string;
+        };
+        primary: {
+            active: {
+                contrast: string;
+                light: string;
+            };
+            default: {
+                contrast: string;
+                light: string;
+            };
+            hover: {
+                contrast: string;
+                light: string;
+            };
+        };
+        secondary: {
+            active: {
+                contrast: string;
+                light: string;
+            };
+            default: {
+                colorless: string;
+            };
+            hover: {
+                contrast: string;
+                light: string;
+            };
+        };
+        selected: {
+            default: {
+                contrast: string;
+                dark: string;
+                darkalt: string;
+                light: string;
+                neutral: string;
+            };
+            hover: {
+                contrast: string;
+                dark: string;
+                light: string;
+                neutral: string;
+            };
+        };
+        success: {
+            contrast: string;
+            deep: string;
+            muted: string;
+            subdued: string;
+            tint: string;
+            transparent: string;
+        };
+        warning: {
+            contrast: string;
+            deep: string;
+            muted: string;
+            tint: string;
+            transparent: string;
+        };
+    };
+    shape: {
+        accent: string;
+        contrast: string;
+        dark: string;
+        darkalt: string;
+        disabled: string;
+        highlight: string;
+        highlightalt: string;
+        inactive: string;
+        information: string;
+        informationalt: string;
+        informationalt2: string;
+        light: string;
+        lightalt: string;
+        negative: string;
+        negativealt: string;
+        neutral: string;
+        neutralalt: string;
+        neutralalt2: string;
+        subdued: string;
+        subduedalt: string;
+        success: string;
+        successalt: string;
+        successalt2: string;
+        warning: string;
+        warningalt: string;
+        warningalt2: string;
+    };
+    stroke: {
+        accent: string;
+        colorless: string;
+        contrast: string;
+        contrastalt: string;
+        dark: string;
+        darkalt: string;
+        darkalt2: string;
+        highContrast: string;
+        highlight: string;
+        highlightalt: string;
+        information: string;
+        informationalt: string;
+        light: string;
+        lightalt: string;
+        negative: string;
+        negativealt: string;
+        neutral: string;
+        neutralalt: string;
+        subdued: string;
+        success: string;
+        successalt: string;
+        successalt2: string;
+        transparent: string;
+        transparentalt: string;
+        warning: string;
+        warningalt: string;
+    };
+    text: {
+        accent: string;
+        dark: string;
+        darkalt: string;
+        disabled: string;
+        highlight: string;
+        highlightalt: string;
+        light: string;
+        lightalt: string;
+        negative: string;
+        negativealt: string;
+        neutral: string;
+        neutralalt: string;
+        neutralalt2: string;
+        subdued: string;
+        subduedalt: string;
+        success: string;
+        successalt: string;
+    };
+};

package/dist/semantic.less

@@ -105,6 +105,7 @@
 @stroke-dark: @ebony-30;
 @stroke-darkalt: @ebony-50;
 @stroke-darkalt-2: @ebony-100;
+@stroke-highcontrast: @lavender-100;
 @stroke-highlight: @coral-40;
 @stroke-highlightalt: @coral-30;
 @stroke-information: @sky-50;