@autofleet/theme 0.3.15 → 0.3.16

package/dist/fonts.module.css

@@ -1 +1,48 @@
-.desktopLargeTitle,.mobileExtraLargeTitle{font:var(--theme-font-desktop-large-title)}.desktopMediumTitle,.mobileLargeTitle{font:var(--theme-font-desktop-medium-title)}.desktopPlaceHolderTitleInput{font:var(--theme-font-desktop-placeholder-title-input)}.desktopSmallTitle{font:var(--theme-font-desktop-small-title)}.desktopFine{font:var(--theme-font-desktop-fine)}.desktopFineStrong{font:var(--theme-font-desktop-fine-strong)}.desktopBodyStrong,.mobileFineStrong{font:var(--theme-font-desktop-body-strong)}.desktopBody,.mobileFine{font:var(--theme-font-desktop-body)}.mobileBodyStrong{font:var(--theme-font-mobile-body-strong)}.mobileBody{font:var(--theme-font-mobile-body)}.mobileSmallTitle{font:var(--theme-font-mobile-small-title)}
+/* TODO: when CSS @mixin is a thing, these should be replaced with mixins. */
+
+.desktopLargeTitle, .mobileExtraLargeTitle {
+    font: var(--theme-font-desktop-large-title);
+}
+
+.desktopMediumTitle, .mobileLargeTitle {
+    font: var(--theme-font-desktop-medium-title);
+}
+
+.desktopPlaceHolderTitleInput {
+    font: var(--theme-font-desktop-placeholder-title-input);
+}
+
+.desktopSmallTitle {
+    font: var(--theme-font-desktop-small-title);
+}
+
+.desktopFine {
+    font: var(--theme-font-desktop-fine);
+}
+
+.desktopFineStrong {
+    font: var(--theme-font-desktop-fine-strong);
+}
+
+.desktopBodyStrong, .mobileFineStrong {
+    font: var(--theme-font-desktop-body-strong);
+}
+
+.desktopBody, .mobileFine {
+    font: var(--theme-font-desktop-body);
+}
+
+.mobileBodyStrong {
+    font: var(--theme-font-mobile-body-strong);
+}
+
+.mobileBody {
+    font: var(--theme-font-mobile-body);
+}
+
+.mobileSmallTitle {
+    font: var(--theme-font-mobile-small-title);
+}
+
+
+/*# sourceMappingURL=fonts.css.map*/

package/dist/fonts.module.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"fonts.css","names":[],"sources":["../../src/fonts/fonts.css"],"sourcesContent":["/* TODO: when CSS @mixin is a thing, these should be replaced with mixins. */\n\n.desktopLargeTitle, .mobileExtraLargeTitle {\n    font: var(--theme-font-desktop-large-title);\n}\n\n.desktopMediumTitle, .mobileLargeTitle {\n    font: var(--theme-font-desktop-medium-title);\n}\n\n.desktopPlaceHolderTitleInput {\n    font: var(--theme-font-desktop-placeholder-title-input);\n}\n\n.desktopSmallTitle {\n    font: var(--theme-font-desktop-small-title);\n}\n\n.desktopFine {\n    font: var(--theme-font-desktop-fine);\n}\n\n.desktopFineStrong {\n    font: var(--theme-font-desktop-fine-strong);\n}\n\n.desktopBodyStrong, .mobileFineStrong {\n    font: var(--theme-font-desktop-body-strong);\n}\n\n.desktopBody, .mobileFine {\n    font: var(--theme-font-desktop-body);\n}\n\n.mobileBodyStrong {\n    font: var(--theme-font-mobile-body-strong);\n}\n\n.mobileBody {\n    font: var(--theme-font-mobile-body);\n}\n\n.mobileSmallTitle {\n    font: var(--theme-font-mobile-small-title);\n}\n"],"mappings":"AAAA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA"}

package/dist/index.d.ts

@@ -1,22 +1,348 @@
-import { RGBColor } from './colors-utils';
-import { ColorTokenResponse } from './colors';
-import { LABEL_OPTIONS } from './const';
-import { ThemeFonts } from './fonts';
-import { ThemeShadows } from './shadow';
-import { ThemeSpacings } from './spacing';
+//#region src/colors-utils.d.ts
+declare const adjustBrightness: (color: string) => string;
+type ColorVariant = Record<string, string>;
+interface IColorVariants {
+  [key: string]: string | ColorVariant;
+  infoColor: string;
+  infoColorHover: string;
+  infoColorOpacityWeak: string;
+  infoColorOpacityStrong: string;
+  infoHoverComponentBgColor: string;
+  errorColor: string;
+  errorColorHover: string;
+  errorColorOpacityWeak: string;
+  errorColorOpacityStrong: string;
+  errorHoverComponentBgColor: string;
+  successColor: string;
+  successColorHover: string;
+  successColorOpacityWeak: string;
+  successColorOpacityStrong: string;
+  successHoverComponentBgColor: string;
+  warningColor: string;
+  warningColorHover: string;
+  warningColorOpacityWeak: string;
+  warningColorOpacityStrong: string;
+  warningHoverComponentBgColor: string;
+  primaryColor: string;
+  primaryColorHover: string;
+  primaryColorOpacityWeak: string;
+  primaryColorOpacityStrong: string;
+  primaryHoverComponentBgColor: string;
+  primaryBackgroundText: string;
+  primaryBackgroundHoverText: string;
+  primaryTextColor: string;
+  secondaryTextColor: string;
+  disabledTextColor: string;
+  placeholderTextColor: string;
+  primaryBackgroundColor: string;
+  secondaryBackgroundColor: string;
+  dividerColor: string;
+  secondaryButtonsHoverColor: string;
+}
+declare const COLORS_DARK_MODE_HANDLED: {
+  primaryTextColor: (isDarkMode: boolean) => string;
+  secondaryTextColor: (isDarkMode: boolean) => string;
+  disabledTextColor: (isDarkMode: boolean) => string;
+  placeholderTextColor: (isDarkMode: boolean) => string;
+  primaryBackgroundColor: (isDarkMode: boolean) => string;
+  secondaryBackgroundColor: (isDarkMode: boolean) => string;
+  dividerColor: (isDarkMode: boolean) => string;
+  secondaryButtonsHoverColor: (isDarkMode: boolean) => string;
+};
+declare const getColorVariants: (givenPrimary: string, type: "light" | "dark") => IColorVariants;
+interface RGBColor {
+  red: number;
+  green: number;
+  blue: number;
+}
+//#endregion
+//#region src/const.d.ts
+declare const LABEL_OPTIONS: {
+  readonly AUTOFLEET: "autofleet";
+  readonly WHITE_LABELED: "whiteLabel";
+};
+//#endregion
+//#region src/colors/atomic-colors.d.ts
+declare const ATOMIC_COLORS: {
+  // neutral colors
+  "n-00": string;
+  "n-01": string;
+  "n-02": string;
+  "n-03": string;
+  "n-04": string;
+  "n-05": string;
+  "n-opa-10": string;
+  "n-opa-16": string;
+  "n-opa-24": string;
+  "n-opa-32": string;
+  "n-00-opa-32": string;
+  // brand colors
+  brand: string;
+  "brand-hover": string;
+  "brand-opa-10": string;
+  "brand-opa-16": string;
+  "brand-opa-24": string;
+  "brand-opa-32": string;
+  // blue colors
+  "b-01": string;
+  "b-02": string;
+  "b-03": string;
+  "b-04": string;
+  "b-05": string;
+  "b-06": string;
+  "b-07": string;
+  "b-opa-10": string;
+  "b-opa-16": string;
+  "b-opa-24": string;
+  "b-opa-32": string;
+  // green colors
+  "g-01": string;
+  "g-02": string;
+  "g-03": string;
+  "g-04": string;
+  "g-05": string;
+  "g-06": string;
+  "g-07": string;
+  "g-opa-10": string;
+  "g-opa-16": string;
+  "g-opa-24": string;
+  "g-opa-32": string;
+  // yellow colors
+  "y-01": string;
+  "y-02": string;
+  "y-03": string;
+  "y-04": string;
+  "y-05": string;
+  "y-06": string;
+  "y-07": string;
+  "y-opa-10": string;
+  "y-opa-16": string;
+  "y-opa-24": string;
+  "y-opa-32": string;
+  // red colors
+  "r-01": string;
+  "r-02": string;
+  "r-03": string;
+  "r-04": string;
+  "r-05": string;
+  "r-06": string;
+  "r-07": string;
+  "r-opa-10": string;
+  "r-opa-16": string;
+  "r-opa-24": string;
+  "r-opa-32": string;
+  // purple colors
+  "pu-02": string;
+  "pu-06": string;
+  "pu-07": string;
+  "pu-opa-10": string;
+  "pu-opa-16": string;
+  "pu-opa-24": string;
+  // orange colors
+  "or-02": string;
+  "or-06": string;
+  "or-07": string;
+  "or-opa-10": string;
+  "or-opa-16": string;
+  "or-opa-24": string;
+  // turquoise colors
+  "tu-02": string;
+  "tu-06": string;
+  "tu-07": string;
+  "tu-opa-10": string;
+  "tu-opa-16": string;
+  "tu-opa-24": string;
+  // pink colors
+  "pi-02": string;
+  "pi-06": string;
+  "pi-07": string;
+  "pi-opa-10": string;
+  "pi-opa-16": string;
+  "pi-opa-24": string;
+  // ultramarine colors
+  "ul-02": string;
+  "ul-06": string;
+  "ul-07": string;
+  "ul-opa-10": string;
+  "ul-opa-16": string;
+  "ul-opa-24": string;
+  // peach colors
+  "pe-02": string;
+  "pe-06": string;
+  "pe-07": string;
+  "pe-opa-10": string;
+  "pe-opa-16": string;
+  "pe-opa-24": string;
+  // apple colors
+  "ap-02": string;
+  "ap-06": string;
+  "ap-07": string;
+  "ap-opa-10": string;
+  "ap-opa-16": string;
+  "ap-opa-24": string;
+  // bubblegum colors
+  "bu-02": string;
+  "bu-06": string;
+  "bu-07": string;
+  "bu-opa-10": string;
+  "bu-opa-16": string;
+  "bu-opa-24": string;
+  // ocher colors
+  "oc-02": string;
+  "oc-06": string;
+  "oc-07": string;
+  "oc-opa-10": string;
+  "oc-opa-16": string;
+  "oc-opa-24": string;
+  // bluberry colors
+  "br-02": string;
+  "br-06": string;
+  "br-07": string;
+  "br-opa-10": string;
+  "br-opa-16": string;
+  "br-opa-24": string;
+};
+//#endregion
+//#region src/colors/tokens/color-tokens.d.ts
+declare const COLOR_TOKENS: readonly ["bg-primary", "bg-secondary", "bg-info", "bg-success", "bg-warning", "bg-error", "divider-neutral", "divider-invert", "divider-brand", "divider-info", "divider-success", "divider-warning", "divider-error", "primary-btn", "primary-btn-hover", "primary-btn-opa-01", "primary-btn-opa-02", "other", "other-hover", "other-opa-01", "other-opa-02", "other-text", "neutral", "neutral-dark", "neutral-text", "neutral-charcoal", "neutral-light", "neutral-invert", "neutral-opa-01", "neutral-opa-02", "info-hover", "info", "info-opa-01", "info-opa-02", "info-text", "success-hover", "success", "success-opa-01", "success-opa-02", "success-text", "warning-hover", "warning", "warning-opa-01", "warning-opa-02", "warning-text", "error-hover", "error", "error-opa-01", "error-opa-02", "error-text", "purple", "purple-opa-01", "purple-opa-02", "purple-text", "orange", "orange-opa-01", "orange-opa-02", "orange-text", "turquoise", "turquoise-opa-01", "turquoise-opa-02", "turquoise-text", "pink", "pink-opa-01", "pink-opa-02", "pink-text", "ultramarine", "ultramarine-opa-01", "ultramarine-opa-02", "ultramarine-text", "peach", "peach-opa-01", "peach-opa-02", "peach-text", "apple", "apple-opa-01", "apple-opa-02", "apple-text", "bubblegum", "bubblegum-opa-01", "bubblegum-opa-02", "bubblegum-text", "ocher", "ocher-opa-01", "ocher-opa-02", "ocher-text", "blueberry", "blueberry-opa-01", "blueberry-opa-02", "blueberry-text"];
+type NoDash<T> = T extends `${string}-${string}` ? never : T;
+type WithText<T> = T extends `${infer P}-text` ? P : never;
+type COLOR_TOKEN = (typeof COLOR_TOKENS)[number];
+/**
+* Colors that are used as primary colors in the design system.
+*/
+type MAIN_COLOR_TOKEN = NoDash<COLOR_TOKEN>;
+/**
+* {@link MAIN_COLOR_TOKEN} with text colors only. TODO: Maintain this list manually.
+*/
+type MAIN_COLOR_TOKEN_WITH_TEXT = WithText<COLOR_TOKEN>;
+/**
+* The main colors in the design system, i.e colors that are not shades or opacities.
+*/
+declare const mainColorTokens: NoDash<COLOR_TOKEN>[];
+//#endregion
+//#region src/colors/tokens/color-token-mapping.d.ts
+type ColorTokenMap = Record<(typeof COLOR_TOKENS)[number], Record<(typeof LABEL_OPTIONS)[keyof typeof LABEL_OPTIONS], {
+  light: keyof typeof ATOMIC_COLORS;
+  dark: keyof typeof ATOMIC_COLORS;
+}>>;
+// With References:
+declare const COLOR_TOKEN_MAP: ColorTokenMap;
+//#endregion
+//#region src/colors/index.d.ts
+type ColorTokenResponse = { [type in keyof typeof COLOR_TOKEN_MAP]: string };
+//#endregion
+//#region src/fonts/atomic-fonts.d.ts
+type IFontResult<TSize extends string, TStyle extends string, TWeight extends string, TLineHeight extends string, TFamily extends string = string> = `
+    font-family: ${TFamily};
+    font-size: ${TSize};
+    font-style: ${TStyle};
+    font-weight: ${TWeight};
+    line-height: ${TLineHeight};`;
+type Font = "Montserrat, sans-serif !important";
+interface IAtomicFonts {
+  "typo-11": IFontResult<"48px", "normal", "700", "60px", Font>;
+  "typo-10": IFontResult<"24px", "normal", "700", "60px", Font>;
+  "typo-9": IFontResult<"24px", "normal", "400", "30px", Font>;
+  "typo-8": IFontResult<"20px", "normal", "700", "26px", Font>;
+  "typo-7": IFontResult<"18px", "normal", "700", "24px", Font>;
+  "typo-6": IFontResult<"16px", "normal", "500", "24px", Font>;
+  "typo-5": IFontResult<"16px", "normal", "700", "24px", Font>;
+  "typo-4": IFontResult<"14px", "normal", "500", "20px", Font>;
+  "typo-3": IFontResult<"14px", "normal", "700", "20px", Font>;
+  "typo-2": IFontResult<"12px", "normal", "700", "16px", Font>;
+  "typo-1": IFontResult<"12px", "normal", "500", "16px", Font>;
+}
+//#endregion
+//#region src/fonts/index.d.ts
+interface ThemeFonts {
+  desktop: {
+    largeTitle: IAtomicFonts["typo-11"];
+    mediumTitle: IAtomicFonts["typo-10"];
+    placeHolderTitleInput: IAtomicFonts["typo-9"];
+    smallTitle: IAtomicFonts["typo-7"];
+    fine: IAtomicFonts["typo-1"];
+    fineStrong: IAtomicFonts["typo-2"];
+    bodyStrong: IAtomicFonts["typo-3"];
+    body: IAtomicFonts["typo-4"];
+  };
+  mobile: {
+    bodyStrong: IAtomicFonts["typo-5"];
+    body: IAtomicFonts["typo-6"];
+    smallTitle: IAtomicFonts["typo-8"];
+    largeTitle: IAtomicFonts["typo-10"];
+    fineStrong: IAtomicFonts["typo-3"];
+    fine: IAtomicFonts["typo-4"];
+  };
+}
+//#endregion
+//#region src/spacing/spacing.d.ts
+declare const SPACING: {
+  readonly NONE: "0px";
+  readonly XS: "2px";
+  readonly SM: "4px";
+  readonly MD: "6px";
+  readonly LG: "8px";
+  readonly XL: "12px";
+  readonly "2XL": "16px";
+  readonly "3XL": "24px";
+  readonly "4XL": "32px";
+  readonly "5XL": "40px";
+  readonly "6XL": "48px";
+  readonly "7XL": "56px";
+  readonly "8XL": "64px";
+};
+//#endregion
+//#region src/shadow/index.d.ts
+declare const getLowShadow: (color: string, opacity?: number) => `${typeof SPACING.NONE} ${typeof SPACING.XS} ${typeof SPACING.SM} ${string}`;
+declare const getMedShadow: (color: string, opacity?: number) => `${typeof SPACING.NONE} ${typeof SPACING.SM} ${typeof SPACING.LG} ${string}`;
+declare const getHighShadow: (color: string, opacity?: number) => `${typeof SPACING.NONE} ${typeof SPACING.LG} ${typeof SPACING["5XL"]} ${string}`;
+type ShadowVariant = "neutral" | "info" | "success" | "warning" | "error";
+type LowShadows = Record<`shadow-${ShadowVariant}-low`, ReturnType<typeof getLowShadow>>;
+type MedShadows = Record<`shadow-${ShadowVariant}-medium`, ReturnType<typeof getMedShadow>>;
+type HighShadows = Record<`shadow-${ShadowVariant}-high`, ReturnType<typeof getHighShadow>>;
+interface ThemeShadows extends LowShadows, MedShadows, HighShadows {
+  "shadow-map-element": `${typeof SPACING.NONE} 3px ${typeof SPACING.LG} ${string}`;
+}
+//#endregion
+//#region src/spacing/border-radius.d.ts
+declare const BORDER_RADIUS: {
+  readonly NONE: "0px";
+  readonly XS: "2px";
+  readonly SM: "4px";
+  readonly MD: "6px";
+  readonly LG: "8px";
+  readonly XL: "16px";
+  readonly "2XL": "24px";
+};
+//#endregion
+//#region src/spacing/index.d.ts
+interface ThemeSpacings {
+  borderRadius: typeof BORDER_RADIUS;
+  spacings: typeof SPACING;
+  spacingNumbers: Record<keyof typeof SPACING, number>;
+  borderRadiusNumbers: Record<keyof typeof BORDER_RADIUS, number>;
+}
+//#endregion
+//#region src/index.d.ts
 interface IThemeProps {
-    isDarkMode: boolean;
-    label?: (typeof LABEL_OPTIONS)[keyof typeof LABEL_OPTIONS] | undefined;
-    primaryColor?: RGBColor;
+  isDarkMode: boolean;
+  label?: (typeof LABEL_OPTIONS)[keyof typeof LABEL_OPTIONS] | undefined;
+  primaryColor?: RGBColor;
 }
-export interface IThemeStyle extends ThemeSpacings {
-    colors: ColorTokenResponse;
-    fonts: ThemeFonts;
-    shadows: ThemeShadows;
+interface IThemeStyle extends ThemeSpacings {
+  colors: ColorTokenResponse;
+  fonts: ThemeFonts;
+  shadows: ThemeShadows;
 }
-export declare const loadThemeStyles: ({ isDarkMode, label, primaryColor, }: IThemeProps) => IThemeStyle;
-export interface ITheme {
-    theme: IThemeStyle;
+declare const loadThemeStyles: ({
+  isDarkMode,
+  label,
+  primaryColor
+}: IThemeProps) => IThemeStyle;
+interface ITheme {
+  theme: IThemeStyle;
 }
-export * from './colors-utils';
-export * from './colors/tokens/color-tokens';
+//#endregion
+export { COLORS_DARK_MODE_HANDLED, COLOR_TOKENS, ITheme, IThemeStyle, MAIN_COLOR_TOKEN, MAIN_COLOR_TOKEN_WITH_TEXT, RGBColor, adjustBrightness, getColorVariants, loadThemeStyles, mainColorTokens };
+//# sourceMappingURL=index.d.ts.map