@autofleet/theme 0.0.1-gery-test → 0.0.1

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 +0 -71
  2. package/package.json +4 -17
  3. package/{dist → src}/colors/atomic-colors.d.ts +1 -1
  4. package/src/colors/atomic-colors.js +150 -0
  5. package/src/colors/atomic-colors.js.map +1 -0
  6. package/{dist → src}/colors/index.d.ts +2 -2
  7. package/src/colors/index.js +12 -0
  8. package/src/colors/index.js.map +1 -0
  9. package/{dist → src}/colors/tokens/color-token-mapping.d.ts +3 -3
  10. package/src/colors/tokens/color-token-mapping.js +885 -0
  11. package/src/colors/tokens/color-token-mapping.js.map +1 -0
  12. package/src/colors/tokens/color-tokens.js +97 -0
  13. package/src/colors/tokens/color-tokens.js.map +1 -0
  14. package/{dist → src}/colors-utils.d.ts +1 -1
  15. package/src/colors-utils.js +104 -0
  16. package/src/colors-utils.js.map +1 -0
  17. package/src/const.js +5 -0
  18. package/src/const.js.map +1 -0
  19. package/src/fonts/atomic-fonts.js +75 -0
  20. package/src/fonts/atomic-fonts.js.map +1 -0
  21. package/src/fonts/index.js +22 -0
  22. package/src/fonts/index.js.map +1 -0
  23. package/{dist → src}/index.d.ts +2 -6
  24. package/src/index.js +15 -0
  25. package/src/index.js.map +1 -0
  26. package/{dist → src}/shadow/index.d.ts +1 -1
  27. package/src/shadow/index.js +33 -0
  28. package/src/shadow/index.js.map +1 -0
  29. package/{dist → src}/spacing/border-radius.d.ts +0 -1
  30. package/src/spacing/border-radius.js +9 -0
  31. package/src/spacing/border-radius.js.map +1 -0
  32. package/{dist → src}/spacing/index.d.ts +0 -4
  33. package/src/spacing/index.js +7 -0
  34. package/src/spacing/index.js.map +1 -0
  35. package/src/spacing/spacing.js +16 -0
  36. package/src/spacing/spacing.js.map +1 -0
  37. package/dist/fonts.module.css +0 -1
  38. package/dist/index.js +0 -1401
  39. package/dist/index.js.map +0 -1
  40. package/dist/main.css +0 -1
  41. /package/{dist → src}/colors/tokens/color-tokens.d.ts +0 -0
  42. /package/{dist → src}/const.d.ts +0 -0
  43. /package/{dist → src}/fonts/atomic-fonts.d.ts +0 -0
  44. /package/{dist → src}/fonts/index.d.ts +0 -0
  45. /package/{dist → src}/spacing/spacing.d.ts +0 -0
package/README.md CHANGED
@@ -7,74 +7,3 @@ 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/package.json CHANGED
@@ -1,21 +1,8 @@
1
1
  {
2
2
  "name": "@autofleet/theme",
3
- "version": "0.0.01-gery-test",
3
+ "version": "0.0.1",
4
4
  "type": "module",
5
- "main": "./dist/index.js",
6
- "types": "./dist/index.d.ts",
7
- "files": [
8
- "dist/"
9
- ],
10
- "exports": {
11
- ".": {
12
- "types": "./dist/index.d.ts",
13
- "default": "./dist/index.js"
14
- },
15
- "./main.css": "./dist/main.css",
16
- "./fonts.module.css": "./dist/fonts.module.css"
17
- },
18
- "scripts": {
19
- "prepack": "rm -rf dist/package.json"
20
- }
5
+ "main": "./src/index.js",
6
+ "typings": "./src/index.d.ts",
7
+ "module": "./src/index.js"
21
8
  }
package/{dist → src}/colors/atomic-colors.d.ts RENAMED
@@ -1,4 +1,4 @@
1
- import { RGBColor } from '../colors-utils';
1
+ import { type RGBColor } from '../colors-utils';
2
2
  export declare const ATOMIC_COLORS: {
3
3
  'n-00': string;
4
4
  'n-01': string;
package/src/colors/atomic-colors.js ADDED
@@ -0,0 +1,150 @@
1
+ import { adjustBrightness } from '../colors-utils';
2
+ export const ATOMIC_COLORS = {
3
+ // neutral colors
4
+ 'n-00': 'rgba(255, 255, 255, 1)',
5
+ 'n-01': 'rgba(244, 245, 248, 1)',
6
+ 'n-02': 'rgba(173, 174, 186, 1)',
7
+ 'n-03': 'rgba(102, 105, 117, 1)',
8
+ 'n-04': 'rgba(52, 55, 64, 1)',
9
+ 'n-05': 'rgba(33, 34, 41, 1)',
10
+ 'n-opa-10': 'rgba(124, 134, 163, 0.1)',
11
+ 'n-opa-16': 'rgba(124, 134, 163, 0.16)',
12
+ 'n-opa-24': 'rgba(124, 134, 163, 0.24)',
13
+ 'n-opa-32': 'rgba(125, 139, 172, 0.32)',
14
+ 'n-00-opa-32': 'rgba(255, 255, 255, 0.32)',
15
+ // brand colors
16
+ brand: 'rgba(17, 164, 255, 1)',
17
+ 'brand-hover': 'rgba(0, 132, 214, 1)',
18
+ 'brand-opa-10': 'rgba(17, 164, 255, 0.1)',
19
+ 'brand-opa-16': 'rgba(17, 164, 255, 0.16)',
20
+ 'brand-opa-24': 'rgba(17, 164, 255, 0.24)',
21
+ 'brand-opa-32': 'rgba(17, 164, 255, 0.32)',
22
+ // blue colors
23
+ 'b-01': 'rgba(231, 246, 255, 1)',
24
+ 'b-02': 'rgba(17, 164, 255, 1)',
25
+ 'b-03': 'rgba(0, 132, 214, 1)',
26
+ 'b-04': 'rgba(30, 55, 75, 1)',
27
+ 'b-05': 'rgba(66, 183, 255, 1)',
28
+ 'b-06': 'rgba(0, 75, 122, 1)',
29
+ 'b-07': 'rgba(158, 218, 255, 1)',
30
+ 'b-opa-10': 'rgba(17, 164, 255, 0.1)',
31
+ 'b-opa-16': 'rgba(17, 164, 255, 0.16)',
32
+ 'b-opa-24': 'rgba(17, 164, 255, 0.24)',
33
+ 'b-opa-32': 'rgba(17, 164, 255, 0.32)',
34
+ // green colors
35
+ 'g-01': 'rgba(233, 248, 239, 1)',
36
+ 'g-02': 'rgba(37, 184, 97, 1)',
37
+ 'g-03': 'rgba(28, 140, 74, 1)',
38
+ 'g-04': 'rgba(34, 58, 50, 1)',
39
+ 'g-05': 'rgba(55, 215, 120, 1)',
40
+ 'g-06': 'rgba(17, 85, 44, 1)',
41
+ 'g-07': 'rgba(136, 231, 174, 1)',
42
+ 'g-opa-10': 'rgba(37, 184, 97, 0.1)',
43
+ 'g-opa-16': 'rgba(37, 184, 97, 0.16)',
44
+ 'g-opa-24': 'rgba(37, 184, 97, 0.24)',
45
+ 'g-opa-32': 'rgba(37, 184, 97, 0.32)',
46
+ // yellow colors
47
+ 'y-01': 'rgba(254, 246, 231, 1)',
48
+ 'y-02': 'rgba(244, 156, 0, 1)',
49
+ 'y-03': 'rgba(214, 138, 5, 1)',
50
+ 'y-04': 'rgba(68, 55, 37, 1)',
51
+ 'y-05': 'rgba(251, 185, 70, 1)',
52
+ 'y-06': 'rgba(107, 68, 0, 1)',
53
+ 'y-07': 'rgba(255, 210, 133, 1)',
54
+ 'y-opa-10': 'rgba(244, 156, 0, 0.1)',
55
+ 'y-opa-16': 'rgba(244, 156, 0, 0.16)',
56
+ 'y-opa-24': 'rgba(244, 156, 0, 0.24)',
57
+ 'y-opa-32': 'rgba(244, 156, 0, 0.32)',
58
+ // red colors
59
+ 'r-01': 'rgba(254, 235, 236, 1)',
60
+ 'r-02': 'rgba(248, 55, 67, 1)',
61
+ 'r-03': 'rgba(197, 7, 19, 1)',
62
+ 'r-04': 'rgba(67, 37, 45, 1)',
63
+ 'r-05': 'rgba(249, 103, 112, 1)',
64
+ 'r-06': 'rgba(137, 6, 14, 1)',
65
+ 'r-07': 'rgba(248, 180, 186, 1)',
66
+ 'r-opa-10': 'rgba(248, 55, 67, 0.1)',
67
+ 'r-opa-16': 'rgba(248, 55, 67, 0.16)',
68
+ 'r-opa-24': 'rgba(248, 55, 67, 0.24)',
69
+ 'r-opa-32': 'rgba(248, 55, 67, 0.32)',
70
+ // purple colors
71
+ 'pu-02': 'rgba(143, 101, 255, 1)',
72
+ 'pu-06': 'rgba(58, 0, 219, 1)',
73
+ 'pu-07': 'rgba(209, 194, 255, 1)',
74
+ 'pu-opa-10': 'rgba(143, 101, 255, 0.1)',
75
+ 'pu-opa-16': 'rgba(143, 101, 255, 0.16)',
76
+ 'pu-opa-24': 'rgba(143, 101, 255, 0.24)',
77
+ // orange colors
78
+ 'or-02': 'rgba(255, 116, 87, 1)',
79
+ 'or-06': 'rgba(143, 24, 0, 1)',
80
+ 'or-07': 'rgba(255, 198, 189, 1)',
81
+ 'or-opa-10': 'rgba(255, 117, 87, 0.1)',
82
+ 'or-opa-16': 'rgba(255, 117, 87, 0.16)',
83
+ 'or-opa-24': 'rgba(255, 117, 87, 0.24)',
84
+ // turquoise colors
85
+ 'tu-02': 'rgba(0, 198, 181, 1)',
86
+ 'tu-06': 'rgba(0, 82, 72, 1)',
87
+ 'tu-07': 'rgba(0, 245, 224, 1)',
88
+ 'tu-opa-10': 'rgba(0, 198, 181, 0.1)',
89
+ 'tu-opa-16': 'rgba(0, 198, 181, 0.16)',
90
+ 'tu-opa-24': 'rgba(0, 198, 181, 0.24)',
91
+ // pink colors
92
+ 'pi-02': 'rgba(255, 85, 138, 1)',
93
+ 'pi-06': 'rgba(143, 0, 45, 1)',
94
+ 'pi-07': 'rgba(255, 189, 210, 1)',
95
+ 'pi-opa-10': 'rgba(255, 85, 138, 0.1)',
96
+ 'pi-opa-16': 'rgba(255, 85, 138, 0.16)',
97
+ 'pi-opa-24': 'rgba(255, 85, 138, 0.24)',
98
+ // ultramarine colors
99
+ 'ul-02': 'rgba(84, 119, 255, 1)',
100
+ 'ul-06': 'rgba(0, 41, 204, 1)',
101
+ 'ul-07': 'rgba(184, 198, 255, 1)',
102
+ 'ul-opa-10': 'rgba(84, 119, 255, 0.1)',
103
+ 'ul-opa-16': 'rgba(84, 119, 255, 0.16)',
104
+ 'ul-opa-24': 'rgba(84, 119, 255, 0.24)',
105
+ // peach colors
106
+ 'pe-02': 'rgba(255, 147, 69, 1)',
107
+ 'pe-06': 'rgba(128, 53, 0, 1)',
108
+ 'pe-07': 'rgba(255, 209, 179, 1)',
109
+ 'pe-opa-10': 'rgba(255, 147, 69, 0.1)',
110
+ 'pe-opa-16': 'rgba(255, 147, 69, 0.16)',
111
+ 'pe-opa-24': 'rgba(255, 147, 69, 0.24)',
112
+ // apple colors
113
+ 'ap-02': 'rgba(127, 185, 81, 1)',
114
+ 'ap-06': 'rgba(54, 81, 31, 1)',
115
+ 'ap-07': 'rgba(198, 225, 173, 1)',
116
+ 'ap-opa-10': 'rgba(127, 185, 81, 0.1)',
117
+ 'ap-opa-16': 'rgba(127, 185, 81, 0.16)',
118
+ 'ap-opa-24': 'rgba(127, 185, 81, 0.24)',
119
+ // bubblegum colors
120
+ 'bu-02': 'rgba(238, 91, 197, 1)',
121
+ 'bu-06': 'rgba(135, 13, 100, 1)',
122
+ 'bu-07': 'rgba(249, 190, 234, 1)',
123
+ 'bu-opa-10': 'rgba(238, 91, 197, 0.1)',
124
+ 'bu-opa-16': 'rgba(238, 91, 197, 0.16)',
125
+ 'bu-opa-24': 'rgba(238, 91, 197, 0.24)',
126
+ // ocher colors
127
+ 'oc-02': 'rgba(251, 171, 0, 1)',
128
+ 'oc-06': 'rgba(102, 70, 0, 1)',
129
+ 'oc-07': 'rgba(255, 218, 138, 1)',
130
+ 'oc-opa-10': 'rgba(251, 171, 0, 0.1)',
131
+ 'oc-opa-16': 'rgba(251, 171, 0, 0.16)',
132
+ 'oc-opa-24': 'rgba(251, 171, 0, 0.24)',
133
+ // bluberry colors
134
+ 'br-02': 'rgba(101, 98, 255, 1)',
135
+ 'br-06': 'rgba(4, 0, 230, 1)',
136
+ 'br-07': 'rgba(95, 194, 255, 1)',
137
+ 'br-opa-10': 'rgba(101, 98, 255, 0.1)',
138
+ 'br-opa-16': 'rgba(101, 98, 255, 0.16)',
139
+ 'br-opa-24': 'rgba(101, 98, 255, 0.24)',
140
+ };
141
+ const generateRgbaColor = ({ red, green, blue }, alpha) => `rgba(${red}, ${green}, ${blue}, ${alpha})`;
142
+ export const generateBrandColors = (rgb) => ({
143
+ brand: generateRgbaColor(rgb, 1),
144
+ 'brand-hover': `rgba(${adjustBrightness(`${rgb.red}, ${rgb.green}, ${rgb.blue}`)}, 1)`,
145
+ 'brand-opa-10': generateRgbaColor(rgb, 0.1),
146
+ 'brand-opa-16': generateRgbaColor(rgb, 0.16),
147
+ 'brand-opa-24': generateRgbaColor(rgb, 0.24),
148
+ 'brand-opa-32': generateRgbaColor(rgb, 0.32),
149
+ });
150
+ //# sourceMappingURL=atomic-colors.js.map
package/src/colors/atomic-colors.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"atomic-colors.js","sourceRoot":"","sources":["../../../../../packages/theme/src/colors/atomic-colors.ts"],"names":[],"mappings":"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"}
package/{dist → src}/colors/index.d.ts RENAMED
@@ -1,5 +1,5 @@
1
- import { RGBColor } from '../colors-utils';
2
- import { LABEL_OPTIONS } from '../const';
1
+ import type { RGBColor } from '../colors-utils';
2
+ import type { 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/colors/index.js ADDED
@@ -0,0 +1,12 @@
1
+ import { ATOMIC_COLORS, generateBrandColors } from './atomic-colors';
2
+ import { COLOR_TOKEN_MAP } from './tokens/color-token-mapping';
3
+ export const generateColorsForTheme = (themeOptions) => {
4
+ const { lightMode, label, primaryColor } = themeOptions;
5
+ const atomicColorsWithBrand = Object.assign(Object.assign({}, ATOMIC_COLORS), (primaryColor ? generateBrandColors(primaryColor) : {}));
6
+ return Object.fromEntries(Object.entries(COLOR_TOKEN_MAP).map(([key, value]) => {
7
+ const relevantAtomicColor = value[label][lightMode];
8
+ const rawRgbValue = atomicColorsWithBrand[relevantAtomicColor];
9
+ return [key, rawRgbValue];
10
+ }));
11
+ };
12
+ //# sourceMappingURL=index.js.map
package/src/colors/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../packages/theme/src/colors/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACrE,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAY/D,MAAM,CAAC,MAAM,sBAAsB,GAAG,CACpC,YAA+B,EACX,EAAE;IACtB,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,YAAY,CAAC;IACxD,MAAM,qBAAqB,mCACtB,aAAa,GACb,CAAC,YAAY,CAAC,CAAC,CAAC,mBAAmB,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAC3D,CAAC;IACF,OAAO,MAAM,CAAC,WAAW,CACvB,MAAM,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE;QACnD,MAAM,mBAAmB,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,CAAC;QACpD,MAAM,WAAW,GAAG,qBAAqB,CAAC,mBAAmB,CAAC,CAAC;QAC/D,OAAO,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC;IAC5B,CAAC,CAAC,CACmB,CAAC;AAC1B,CAAC,CAAC"}
package/{dist → src}/colors/tokens/color-token-mapping.d.ts RENAMED
@@ -1,6 +1,6 @@
1
- import { LABEL_OPTIONS } from '../../const';
2
- import { ATOMIC_COLORS } from '../atomic-colors';
3
- import { COLOR_TOKENS } from './color-tokens';
1
+ import type { LABEL_OPTIONS } from '../../const';
2
+ import type { ATOMIC_COLORS } from '../atomic-colors';
3
+ import type { 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;