@protonradio/proton-ui 0.6.6 → 0.6.7
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.
- package/README.md +34 -11
- package/dist/constants.cjs.js +1 -1
- package/dist/constants.d.ts +12 -0
- package/dist/constants.es.js +5 -4
- package/dist/{index-BQ3T2g7K.mjs → index-BCAZu2vD.mjs} +17 -11
- package/dist/{index-BQ3T2g7K.mjs.map → index-BCAZu2vD.mjs.map} +1 -1
- package/dist/index-Dcfu6hWE.js +2 -0
- package/dist/{index-BjFfiHOL.js.map → index-Dcfu6hWE.js.map} +1 -1
- package/dist/index.cjs.js +10 -10
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +36 -51
- package/dist/index.es.js +2415 -2218
- package/dist/index.es.js.map +1 -1
- package/dist/style.css +1 -1
- package/dist/utils.d.ts +3 -0
- package/package.json +8 -7
- package/dist/index-BjFfiHOL.js +0 -2
package/README.md
CHANGED
|
@@ -22,9 +22,43 @@ This library supports themes for the various applications that use it. Ideally,
|
|
|
22
22
|
|
|
23
23
|
The current supported themes can be found in the `src/themes/config.ts`. To add a new theme, create a new attribute on the `THEMES` object following the pattern `[themeName]: [themeClassName]`.
|
|
24
24
|
|
|
25
|
+
#### Styling for a theme
|
|
26
|
+
|
|
27
|
+
To apply theme specific styles in a component, we set theme specific css variables in the `src/themes/config.ts` file, in `generateThemeCssVariables` function. If you need more control, you can add either use the `useTheme` hook to manipulate the DOM, or you can use css selectors that reference the wrapping theme class.
|
|
28
|
+
|
|
29
|
+
For example, to apply a style to the dark theme, you can use the following css.
|
|
30
|
+
```css
|
|
31
|
+
.proton-ui__theme--dark .myComponent {
|
|
32
|
+
background-color: red;
|
|
33
|
+
}
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
### Implementing in your application
|
|
37
|
+
|
|
38
|
+
#### Prerequisites
|
|
39
|
+
|
|
40
|
+
1. Ensure you have access to Proton's `proton-ui` npm package
|
|
41
|
+
2. Login to npm using `npm login`
|
|
42
|
+
|
|
43
|
+
#### Install
|
|
44
|
+
|
|
45
|
+
```
|
|
46
|
+
npm install @protonradio/proton-ui --save
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
#### Import the styles
|
|
50
|
+
Then import the styles into your main.css file.
|
|
51
|
+
|
|
52
|
+
```css
|
|
53
|
+
@import "@protonradio/proton-ui/styles";
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
#### Setup the theme provider
|
|
25
57
|
When applying to a project, you can import available themes using `THEMES` from this library and apply the theme an outer div on the application. See below for an example.
|
|
26
58
|
|
|
27
59
|
```jsx
|
|
60
|
+
import { ThemeProvider, THEMES } from "@protonradio/proton-ui";
|
|
61
|
+
|
|
28
62
|
function MyApp({ Component, pageProps }) {
|
|
29
63
|
return (
|
|
30
64
|
<ThemeProvider theme={THEMES.DARK}>
|
|
@@ -34,17 +68,6 @@ function MyApp({ Component, pageProps }) {
|
|
|
34
68
|
}
|
|
35
69
|
```
|
|
36
70
|
|
|
37
|
-
#### Styling for a theme
|
|
38
|
-
|
|
39
|
-
To apply theme specific styles in a component, we set theme specific css variables in the `src/themes/config.ts` file, in `generateThemeCssVariables` function. If you need more control, you can add either use the `useTheme` hook to manipulate the DOM, or you can use css selectors that reference the wrapping theme class.
|
|
40
|
-
|
|
41
|
-
For example, to apply a style to the dark theme, you can use the following css.
|
|
42
|
-
```css
|
|
43
|
-
.proton-ui__theme--dark .myComponent {
|
|
44
|
-
background-color: red;
|
|
45
|
-
}
|
|
46
|
-
```
|
|
47
|
-
|
|
48
71
|
### Recommended Reading
|
|
49
72
|
|
|
50
73
|
- https://www.gabe.pizza/notes-on-component-libraries/
|
package/dist/constants.cjs.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-Dcfu6hWE.js");exports.BREAKPOINTS=e.BREAKPOINTS;exports.COLORS=e.colors;exports.THEMES=e.THEMES;exports.placements=e.placements;
|
|
2
2
|
//# sourceMappingURL=constants.cjs.js.map
|
package/dist/constants.d.ts
CHANGED
|
@@ -6,6 +6,15 @@ declare const BRAND: {
|
|
|
6
6
|
SECONDARY: string;
|
|
7
7
|
};
|
|
8
8
|
|
|
9
|
+
export declare type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];
|
|
10
|
+
|
|
11
|
+
export declare const BREAKPOINTS: {
|
|
12
|
+
SMALL: number;
|
|
13
|
+
MEDIUM: number;
|
|
14
|
+
LARGE: number;
|
|
15
|
+
X_LARGE: number;
|
|
16
|
+
};
|
|
17
|
+
|
|
9
18
|
export declare namespace COLORS {
|
|
10
19
|
export {
|
|
11
20
|
BRAND,
|
|
@@ -69,4 +78,7 @@ declare namespace ButtonGroup {
|
|
|
69
78
|
|
|
70
79
|
declare namespace ActionMenu {
|
|
71
80
|
var Item: ({ name, to }: ActionMenuItemProps) => import("react/jsx-runtime").JSX.Element;
|
|
81
|
+
var List: ({ children }: {
|
|
82
|
+
children: ReactNode;
|
|
83
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
72
84
|
}
|
package/dist/constants.es.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { B as e, c as p, T as E, p as O } from "./index-BCAZu2vD.mjs";
|
|
2
2
|
export {
|
|
3
|
-
e as
|
|
4
|
-
p as
|
|
5
|
-
|
|
3
|
+
e as BREAKPOINTS,
|
|
4
|
+
p as COLORS,
|
|
5
|
+
E as THEMES,
|
|
6
|
+
O as placements
|
|
6
7
|
};
|
|
7
8
|
//# sourceMappingURL=constants.es.js.map
|
|
@@ -23,22 +23,22 @@ const o = {
|
|
|
23
23
|
MEDIUM: "#a16207",
|
|
24
24
|
LIGHT: "#facc15",
|
|
25
25
|
SUPER_LIGHT: "#fffbd2"
|
|
26
|
-
},
|
|
26
|
+
}, A = {
|
|
27
27
|
DARK: "#166534",
|
|
28
28
|
MEDIUM: "#15803d",
|
|
29
29
|
LIGHT: "#4ade80",
|
|
30
30
|
SUPER_LIGHT: "#f0fdf4"
|
|
31
|
-
},
|
|
31
|
+
}, G = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
|
|
32
32
|
__proto__: null,
|
|
33
33
|
BRAND: o,
|
|
34
34
|
DANGER: D,
|
|
35
35
|
GRAYSCALE: R,
|
|
36
|
-
SUCCESS:
|
|
36
|
+
SUCCESS: A,
|
|
37
37
|
WARNING: e
|
|
38
|
-
}, Symbol.toStringTag, { value: "Module" })),
|
|
38
|
+
}, Symbol.toStringTag, { value: "Module" })), E = {
|
|
39
39
|
DARK: "dark",
|
|
40
40
|
LIGHT: "light"
|
|
41
|
-
},
|
|
41
|
+
}, s = [
|
|
42
42
|
"bottom",
|
|
43
43
|
"bottom left",
|
|
44
44
|
"bottom right",
|
|
@@ -61,14 +61,20 @@ const o = {
|
|
|
61
61
|
"end",
|
|
62
62
|
"end top",
|
|
63
63
|
"end bottom"
|
|
64
|
-
]
|
|
64
|
+
], I = {
|
|
65
|
+
SMALL: 576,
|
|
66
|
+
MEDIUM: 768,
|
|
67
|
+
LARGE: 992,
|
|
68
|
+
X_LARGE: 1200
|
|
69
|
+
};
|
|
65
70
|
export {
|
|
71
|
+
I as B,
|
|
66
72
|
D,
|
|
67
73
|
R as G,
|
|
68
|
-
|
|
69
|
-
|
|
74
|
+
A as S,
|
|
75
|
+
E as T,
|
|
70
76
|
e as W,
|
|
71
|
-
|
|
72
|
-
|
|
77
|
+
G as c,
|
|
78
|
+
s as p
|
|
73
79
|
};
|
|
74
|
-
//# sourceMappingURL=index-
|
|
80
|
+
//# sourceMappingURL=index-BCAZu2vD.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index-
|
|
1
|
+
{"version":3,"file":"index-BCAZu2vD.mjs","sources":["../src/constants/colors.ts","../src/constants/index.ts"],"sourcesContent":["export const BRAND = {\n PRIMARY: \"#E26014\",\n PRIMARY_LIGHT: \"#FBE5D7\",\n SECONDARY: \"#F2F2F2\",\n};\n\nconst LIGHT_GRAY = \"#DDDDDD\";\nexport const GRAYSCALE = {\n GRAY_SUPER_DARK: \"#141211\",\n GRAY_DARK: \"#4D4D4D\",\n GRAY_MEDIUM: \"#7D7D7D\",\n GRAY_MEDIUM_LIGHT: \"#B1B1B1\",\n GRAY_LIGHT: LIGHT_GRAY,\n GRAY_LIGHTEST: \"#F0F1F2\",\n GRAY_SUPER_LIGHT: \"#F7F8F9\",\n WHITE: \"#FFFFFF\",\n BORDER: LIGHT_GRAY,\n};\n\nexport const DANGER = {\n SUPER_DARK: \"#991b1b\",\n DARK: \"#b91c1c\",\n MEDIUM: \"#e33939\",\n LIGHT: \"#f87171\",\n SUPER_LIGHT: \"#fef2f2\",\n};\n\nexport const WARNING = {\n DARK: \"#854d0e\",\n MEDIUM: \"#a16207\",\n LIGHT: \"#facc15\",\n SUPER_LIGHT: \"#fffbd2\",\n};\n\nexport const SUCCESS = {\n DARK: \"#166534\",\n MEDIUM: \"#15803d\",\n LIGHT: \"#4ade80\",\n SUPER_LIGHT: \"#f0fdf4\",\n};\n","import { Placement } from \"react-aria\";\n\nexport * as COLORS from \"./colors\";\n\nexport const THEMES = {\n DARK: \"dark\",\n LIGHT: \"light\",\n} as const;\n\nexport type Theme = (typeof THEMES)[keyof typeof THEMES];\n\nexport const placements: Placement[] = [\n \"bottom\",\n \"bottom left\",\n \"bottom right\",\n \"bottom start\",\n \"bottom end\",\n \"top\",\n \"top left\",\n \"top right\",\n \"top start\",\n \"top end\",\n \"left\",\n \"left top\",\n \"left bottom\",\n \"start\",\n \"start top\",\n \"start bottom\",\n \"right\",\n \"right top\",\n \"right bottom\",\n \"end\",\n \"end top\",\n \"end bottom\",\n];\n\nexport const BREAKPOINTS = {\n SMALL: 576,\n MEDIUM: 768,\n LARGE: 992,\n X_LARGE: 1200,\n};\n\nexport type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];\n"],"names":["BRAND","LIGHT_GRAY","GRAYSCALE","DANGER","WARNING","SUCCESS","THEMES","placements","BREAKPOINTS"],"mappings":"AAAO,MAAMA,IAAQ;AAAA,EACnB,SAAS;AAAA,EACT,eAAe;AAAA,EACf,WAAW;AACb,GAEMC,IAAa,WACNC,IAAY;AAAA,EACvB,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,aAAa;AAAA,EACb,mBAAmB;AAAA,EACnB,YAAYD;AAAA,EACZ,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,OAAO;AAAA,EACP,QAAQA;AACV,GAEaE,IAAS;AAAA,EACpB,YAAY;AAAA,EACZ,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AACf,GAEaC,IAAU;AAAA,EACrB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AACf,GAEaC,IAAU;AAAA,EACrB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,aAAa;AACf;;;;;;;8CCnCaC,IAAS;AAAA,EACpB,MAAM;AAAA,EACN,OAAO;AACT,GAIaC,IAA0B;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAEaC,IAAc;AAAA,EACzB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,SAAS;AACX;"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";const D={PRIMARY:"#E26014",PRIMARY_LIGHT:"#FBE5D7",SECONDARY:"#F2F2F2"},t="#DDDDDD",o={GRAY_SUPER_DARK:"#141211",GRAY_DARK:"#4D4D4D",GRAY_MEDIUM:"#7D7D7D",GRAY_MEDIUM_LIGHT:"#B1B1B1",GRAY_LIGHT:t,GRAY_LIGHTEST:"#F0F1F2",GRAY_SUPER_LIGHT:"#F7F8F9",WHITE:"#FFFFFF",BORDER:t},R={SUPER_DARK:"#991b1b",DARK:"#b91c1c",MEDIUM:"#e33939",LIGHT:"#f87171",SUPER_LIGHT:"#fef2f2"},A={DARK:"#854d0e",MEDIUM:"#a16207",LIGHT:"#facc15",SUPER_LIGHT:"#fffbd2"},E={DARK:"#166534",MEDIUM:"#15803d",LIGHT:"#4ade80",SUPER_LIGHT:"#f0fdf4"},e=Object.freeze(Object.defineProperty({__proto__:null,BRAND:D,DANGER:R,GRAYSCALE:o,SUCCESS:E,WARNING:A},Symbol.toStringTag,{value:"Module"})),G={DARK:"dark",LIGHT:"light"},I=["bottom","bottom left","bottom right","bottom start","bottom end","top","top left","top right","top start","top end","left","left top","left bottom","start","start top","start bottom","right","right top","right bottom","end","end top","end bottom"],S={SMALL:576,MEDIUM:768,LARGE:992,X_LARGE:1200};exports.BREAKPOINTS=S;exports.DANGER=R;exports.GRAYSCALE=o;exports.SUCCESS=E;exports.THEMES=G;exports.WARNING=A;exports.colors=e;exports.placements=I;
|
|
2
|
+
//# sourceMappingURL=index-Dcfu6hWE.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index-
|
|
1
|
+
{"version":3,"file":"index-Dcfu6hWE.js","sources":["../src/constants/colors.ts","../src/constants/index.ts"],"sourcesContent":["export const BRAND = {\n PRIMARY: \"#E26014\",\n PRIMARY_LIGHT: \"#FBE5D7\",\n SECONDARY: \"#F2F2F2\",\n};\n\nconst LIGHT_GRAY = \"#DDDDDD\";\nexport const GRAYSCALE = {\n GRAY_SUPER_DARK: \"#141211\",\n GRAY_DARK: \"#4D4D4D\",\n GRAY_MEDIUM: \"#7D7D7D\",\n GRAY_MEDIUM_LIGHT: \"#B1B1B1\",\n GRAY_LIGHT: LIGHT_GRAY,\n GRAY_LIGHTEST: \"#F0F1F2\",\n GRAY_SUPER_LIGHT: \"#F7F8F9\",\n WHITE: \"#FFFFFF\",\n BORDER: LIGHT_GRAY,\n};\n\nexport const DANGER = {\n SUPER_DARK: \"#991b1b\",\n DARK: \"#b91c1c\",\n MEDIUM: \"#e33939\",\n LIGHT: \"#f87171\",\n SUPER_LIGHT: \"#fef2f2\",\n};\n\nexport const WARNING = {\n DARK: \"#854d0e\",\n MEDIUM: \"#a16207\",\n LIGHT: \"#facc15\",\n SUPER_LIGHT: \"#fffbd2\",\n};\n\nexport const SUCCESS = {\n DARK: \"#166534\",\n MEDIUM: \"#15803d\",\n LIGHT: \"#4ade80\",\n SUPER_LIGHT: \"#f0fdf4\",\n};\n","import { Placement } from \"react-aria\";\n\nexport * as COLORS from \"./colors\";\n\nexport const THEMES = {\n DARK: \"dark\",\n LIGHT: \"light\",\n} as const;\n\nexport type Theme = (typeof THEMES)[keyof typeof THEMES];\n\nexport const placements: Placement[] = [\n \"bottom\",\n \"bottom left\",\n \"bottom right\",\n \"bottom start\",\n \"bottom end\",\n \"top\",\n \"top left\",\n \"top right\",\n \"top start\",\n \"top end\",\n \"left\",\n \"left top\",\n \"left bottom\",\n \"start\",\n \"start top\",\n \"start bottom\",\n \"right\",\n \"right top\",\n \"right bottom\",\n \"end\",\n \"end top\",\n \"end bottom\",\n];\n\nexport const BREAKPOINTS = {\n SMALL: 576,\n MEDIUM: 768,\n LARGE: 992,\n X_LARGE: 1200,\n};\n\nexport type Breakpoint = (typeof BREAKPOINTS)[keyof typeof BREAKPOINTS];\n"],"names":["BRAND","LIGHT_GRAY","GRAYSCALE","DANGER","WARNING","SUCCESS","THEMES","placements","BREAKPOINTS"],"mappings":"aAAO,MAAMA,EAAQ,CACnB,QAAS,UACT,cAAe,UACf,UAAW,SACb,EAEMC,EAAa,UACNC,EAAY,CACvB,gBAAiB,UACjB,UAAW,UACX,YAAa,UACb,kBAAmB,UACnB,WAAYD,EACZ,cAAe,UACf,iBAAkB,UAClB,MAAO,UACP,OAAQA,CACV,EAEaE,EAAS,CACpB,WAAY,UACZ,KAAM,UACN,OAAQ,UACR,MAAO,UACP,YAAa,SACf,EAEaC,EAAU,CACrB,KAAM,UACN,OAAQ,UACR,MAAO,UACP,YAAa,SACf,EAEaC,EAAU,CACrB,KAAM,UACN,OAAQ,UACR,MAAO,UACP,YAAa,SACf,gJCnCaC,EAAS,CACpB,KAAM,OACN,MAAO,OACT,EAIaC,EAA0B,CACrC,SACA,cACA,eACA,eACA,aACA,MACA,WACA,YACA,YACA,UACA,OACA,WACA,cACA,QACA,YACA,eACA,QACA,YACA,eACA,MACA,UACA,YACF,EAEaC,EAAc,CACzB,MAAO,IACP,OAAQ,IACR,MAAO,IACP,QAAS,IACX"}
|