@autofleet/theme 0.0.0 → 0.0.1-gery-test

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. package/README.md +72 -1
  2. package/{src → dist}/colors/atomic-colors.d.ts +1 -1
  3. package/{src → dist}/colors/index.d.ts +2 -2
  4. package/{src → dist}/colors/tokens/color-token-mapping.d.ts +3 -3
  5. package/{src → dist}/colors-utils.d.ts +1 -1
  6. package/dist/fonts.module.css +1 -0
  7. package/{src → dist}/index.d.ts +6 -2
  8. package/dist/index.js +1401 -0
  9. package/dist/index.js.map +1 -0
  10. package/dist/main.css +1 -0
  11. package/{src → dist}/shadow/index.d.ts +1 -1
  12. package/{src → dist}/spacing/border-radius.d.ts +1 -0
  13. package/{src → dist}/spacing/index.d.ts +4 -0
  14. package/package.json +17 -4
  15. package/src/colors/atomic-colors.js +0 -150
  16. package/src/colors/atomic-colors.js.map +0 -1
  17. package/src/colors/index.js +0 -12
  18. package/src/colors/index.js.map +0 -1
  19. package/src/colors/tokens/color-token-mapping.js +0 -885
  20. package/src/colors/tokens/color-token-mapping.js.map +0 -1
  21. package/src/colors/tokens/color-tokens.js +0 -97
  22. package/src/colors/tokens/color-tokens.js.map +0 -1
  23. package/src/colors-utils.js +0 -104
  24. package/src/colors-utils.js.map +0 -1
  25. package/src/const.js +0 -5
  26. package/src/const.js.map +0 -1
  27. package/src/fonts/atomic-fonts.js +0 -75
  28. package/src/fonts/atomic-fonts.js.map +0 -1
  29. package/src/fonts/index.js +0 -22
  30. package/src/fonts/index.js.map +0 -1
  31. package/src/index.js +0 -15
  32. package/src/index.js.map +0 -1
  33. package/src/shadow/index.js +0 -33
  34. package/src/shadow/index.js.map +0 -1
  35. package/src/spacing/border-radius.js +0 -9
  36. package/src/spacing/border-radius.js.map +0 -1
  37. package/src/spacing/index.js +0 -7
  38. package/src/spacing/index.js.map +0 -1
  39. package/src/spacing/spacing.js +0 -16
  40. package/src/spacing/spacing.js.map +0 -1
  41. /package/{src → dist}/colors/tokens/color-tokens.d.ts +0 -0
  42. /package/{src → dist}/const.d.ts +0 -0
  43. /package/{src → dist}/fonts/atomic-fonts.d.ts +0 -0
  44. /package/{src → dist}/fonts/index.d.ts +0 -0
  45. /package/{src → dist}/spacing/spacing.d.ts +0 -0
package/README.md CHANGED
@@ -1,4 +1,4 @@
1
- # theme
1
+ # Theme
2
2
 
3
3
  ## Building
4
4
 
@@ -7,3 +7,74 @@ Run `nx build theme` to build the library.
7
7
  ## Running unit tests
8
8
 
9
9
  Run `nx test theme` to execute the unit tests via [Vitest](https://vitest.dev/).
10
+
11
+ # Usage
12
+
13
+ The theme package exports 3 routes:
14
+
15
+ - `@autofleet/theme` which is the legacy theme package, using JS objects to define a theme compatible with the no-longer-maintained `styled-components` library.
16
+ - `@autofleet/theme/main.css` which is the new theme values, using CSS variables.
17
+ - `@autofleet/theme/fonts.module.css` which is the new theme fonts, using CSS modules, and CSS modules for fonts.
18
+
19
+ In order to use the legacy theme, you need to import `loadThemeStyles` from `@autofleet/theme` package in your app, and set its return value to the `ThemeProvider`s `theme` prop.
20
+
21
+ ```javascript
22
+ import { loadThemeStyles } from '@autofleet/theme';
23
+ import { ThemeProvider } from 'styled-components';
24
+
25
+ const theme = loadThemeStyles({ isDarkMode: true });
26
+ const App = () => (
27
+ <ThemeProvider theme={theme}>
28
+ <MyComponent />
29
+ </ThemeProvider>
30
+ );
31
+ ```
32
+
33
+ In order to use the new theme, you need to import `@autofleet/theme/main.css` anywhere in the app, and define the theme variant based on a class on the element which you want to apply the theme to.
34
+
35
+ The available theme variants are:
36
+
37
+ - `theme-autofleet`
38
+ - `theme-whiteLabel`
39
+
40
+ Additionally, in order to defined the color-scheme, set the the `data-theme` data-attribute on the element which you want to apply the theme to. The available color-scheme values are:
41
+ - `light`
42
+ - `dark`
43
+ - `system` (Default)
44
+
45
+
46
+ ```css
47
+ @import '@autofleet/theme/main.css';
48
+ ```
49
+ ```html
50
+ <body class="theme-autofleet" data-theme="light">
51
+ <div id="root">
52
+ <span>uses the globally defined theme</span>
53
+ <span class="theme-autofleet" data-theme="dark">
54
+ uses the specific theme variant
55
+ </span>
56
+ </body>
57
+ ```
58
+
59
+ In order to use the new theme fonts, you need to import `@autofleet/theme/main.css` at the root of the app, and then you can either apply a class from the fonts module, or use the corresponding CSS variable in your CSS.
60
+
61
+ ```css
62
+ @import '@autofleet/theme/main.css';
63
+
64
+ body {
65
+ font: var(--theme-font-desktop-body);
66
+ }
67
+ ```
68
+
69
+ Or, using CSS modules:
70
+
71
+ ```javascript
72
+ import '@autofleet/theme/main.css'; // Only required once, at the root of the app
73
+ import fonts from '@autofleet/theme/fonts.module.css';
74
+
75
+ const App = () => (
76
+ <div className={fonts.desktopBodyStrong}>
77
+ <MyComponent />
78
+ </div>
79
+ );
80
+ ```
package/{src → dist}/colors/atomic-colors.d.ts RENAMED
@@ -1,4 +1,4 @@
1
- import { type RGBColor } from '../colors-utils';
1
+ import { RGBColor } from '../colors-utils';
2
2
  export declare const ATOMIC_COLORS: {
3
3
  'n-00': string;
4
4
  'n-01': string;
package/{src → dist}/colors/index.d.ts RENAMED
@@ -1,5 +1,5 @@
1
- import type { RGBColor } from '../colors-utils';
2
- import type { LABEL_OPTIONS } from '../const';
1
+ import { RGBColor } from '../colors-utils';
2
+ import { LABEL_OPTIONS } from '../const';
3
3
  import { COLOR_TOKEN_MAP } from './tokens/color-token-mapping';
4
4
  export interface ThemeColorOptions {
5
5
  lightMode: 'dark' | 'light';
package/{src → dist}/colors/tokens/color-token-mapping.d.ts RENAMED
@@ -1,6 +1,6 @@
1
- import type { LABEL_OPTIONS } from '../../const';
2
- import type { ATOMIC_COLORS } from '../atomic-colors';
3
- import type { COLOR_TOKENS } from './color-tokens';
1
+ import { LABEL_OPTIONS } from '../../const';
2
+ import { ATOMIC_COLORS } from '../atomic-colors';
3
+ import { COLOR_TOKENS } from './color-tokens';
4
4
  export type ColorTokenMap = Record<(typeof COLOR_TOKENS)[number], Record<(typeof LABEL_OPTIONS)[keyof typeof LABEL_OPTIONS], {
5
5
  light: keyof typeof ATOMIC_COLORS;
6
6
  dark: keyof typeof ATOMIC_COLORS;
package/{src → dist}/colors-utils.d.ts RENAMED
@@ -48,7 +48,7 @@ export declare const COLORS_DARK_MODE_HANDLED: {
48
48
  dividerColor: (isDarkMode: boolean) => string;
49
49
  secondaryButtonsHoverColor: (isDarkMode: boolean) => string;
50
50
  };
51
- export declare const getColorVariants: (givenPrimary: string, type: 'light' | 'dark') => IColorVariants;
51
+ export declare const getColorVariants: (givenPrimary: string, type: "light" | "dark") => IColorVariants;
52
52
  export interface RGBColor {
53
53
  red: number;
54
54
  green: number;
package/dist/fonts.module.css ADDED
@@ -0,0 +1 @@
1
+ .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)}
package/{src → dist}/index.d.ts RENAMED
@@ -1,4 +1,4 @@
1
- import type { RGBColor } from './colors-utils';
1
+ import { RGBColor } from './colors-utils';
2
2
  import { LABEL_OPTIONS } from './const';
3
3
  interface IThemeProps {
4
4
  isDarkMode: boolean;
@@ -6,7 +6,7 @@ interface IThemeProps {
6
6
  primaryColor?: RGBColor;
7
7
  }
8
8
  export declare const loadThemeStyles: ({ isDarkMode, label, primaryColor, }: IThemeProps) => {
9
- colors: import("./colors").ColorTokenResponse;
9
+ colors: import('./colors').ColorTokenResponse;
10
10
  fonts: {
11
11
  desktop: {
12
12
  largeTitle: "\n font-family: Montserrat, sans-serif !important;\n font-size: 48px;\n font-style: normal;\n font-weight: 700;\n line-height: 60px;";
@@ -52,6 +52,7 @@ export declare const loadThemeStyles: ({ isDarkMode, label, primaryColor, }: ITh
52
52
  readonly MD: "6px";
53
53
  readonly LG: "8px";
54
54
  readonly XL: "16px";
55
+ readonly '2XL': "24px";
55
56
  };
56
57
  spacings: {
57
58
  readonly NONE: "0px";
@@ -68,9 +69,12 @@ export declare const loadThemeStyles: ({ isDarkMode, label, primaryColor, }: ITh
68
69
  readonly '7XL': "56px";
69
70
  readonly '8XL': "64px";
70
71
  };
72
+ spacingNumbers: Record<string, number>;
73
+ borderRadiusNumbers: Record<string, number>;
71
74
  };
72
75
  type IThemeStyle = ReturnType<typeof loadThemeStyles>;
73
76
  export interface ITheme {
74
77
  theme: IThemeStyle;
75
78
  }
76
79
  export * from './colors-utils';
80
+ export * from './colors/tokens/color-tokens';