brd-ui-kit 0.0.2 → 0.0.3

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 (11) hide show
  1. package/README.md +137 -60
  2. package/dist/brd-ui-kit.css +1 -0
  3. package/dist/hooks/usePopupControls.d.ts +8 -0
  4. package/dist/index.cjs +48 -48
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.d.ts +1 -0
  7. package/dist/index.js +2553 -2527
  8. package/dist/index.js.map +1 -1
  9. package/package.json +6 -4
  10. package/src/styles/globals.css +84 -0
  11. package/src/styles/theme.css +94 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "brd-ui-kit",
3
- "version": "0.0.2",
3
+ "version": "0.0.3",
4
4
  "type": "module",
5
5
  "private": false,
6
6
  "scripts": {
@@ -26,8 +26,8 @@
26
26
  "require": "./dist/index.cjs"
27
27
  },
28
28
  "./styles.css": {
29
- "import": "./dist/style.css",
30
- "require": "./dist/style.css"
29
+ "import": "./src/styles/globals.css",
30
+ "require": "./src/styles/globals.css"
31
31
  }
32
32
  },
33
33
  "publishConfig": {
@@ -35,7 +35,9 @@
35
35
  },
36
36
  "files": [
37
37
  "dist",
38
- "README.md"
38
+ "README.md",
39
+ "src/styles/globals.css",
40
+ "src/styles/theme.css"
39
41
  ],
40
42
  "peerDependencies": {
41
43
  "react": "^18.0.0 || ^19.0.0",
package/src/styles/globals.css ADDED
@@ -0,0 +1,84 @@
1
+ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap");
2
+
3
+ @import "tailwindcss";
4
+ @import "./theme.css";
5
+
6
+ @plugin "tailwindcss-animate";
7
+ @custom-variant dark (&:is(.dark *));
8
+
9
+ @theme inline {
10
+ /* Fonts */
11
+ --font-sans:
12
+ var(--typography-globals-font-family-primary), ui-sans-serif, system-ui, sans-serif;
13
+ --font-weight-normal: var(--typography-globals-font-weight-regular);
14
+ --font-weight-medium: var(--typography-globals-font-weight-medium);
15
+
16
+ --text-xs: var(--typography-globals-font-size-xs);
17
+ --text-xs--line-height: 150%;
18
+ --text-sm: var(--typography-globals-font-size-sm);
19
+ --text-sm--line-height: 150%;
20
+ --text-base: var(--typography-globals-font-size-md);
21
+ --text-base--line-height: 150%;
22
+ --text-lg: var(--typography-globals-font-size-lg);
23
+ --text-lg--line-height: 150%;
24
+ --text-xl: var(--typography-globals-font-size-xl);
25
+ --text-xl--line-height: 140%;
26
+ --text-h3: var(--typography-globals-font-size-h3);
27
+ --text-h3--line-height: 120%;
28
+ --text-h2: var(--typography-globals-font-size-h2);
29
+ --text-h2--line-height: 125%;
30
+ --text-h1: var(--typography-globals-font-size-h1);
31
+ --text-h1--line-height: 125%;
32
+
33
+ /* Colors */
34
+
35
+ --color-primary-text: var(--tokens-semantic-text-primary-text);
36
+ --color-primary-inverse-text: var(--tokens-semantic-text-primary-inverse-text);
37
+ --color-secondary-text: var(--tokens-semantic-text-secondary-text);
38
+ --color-disabled-text: var(--tokens-semantic-text-disabled-text);
39
+ --color-placeholder-text: var(--tokens-semantic-text-placeholder-text);
40
+ --color-sub-label-text: var(--tokens-semantic-text-sub-label-text);
41
+ --color-secondary-inverse-text: var(--tokens-semantic-text-secondary-inverse-text);
42
+ --color-primary-bg: var(--tokens-semantic-bg-primary-bg);
43
+ --color-secondary-bg: var(--tokens-semantic-bg-secondary-bg);
44
+ --color-tertiary-bg: var(--tokens-semantic-bg-tertiary-bg);
45
+ --color-primary-inverse-bg: var(--tokens-semantic-bg-primary-inverse-bg);
46
+ --color-disabled-bg: var(--tokens-semantic-bg-disabled-bg);
47
+ --color-secondary-inverse-bg: var(--tokens-semantic-bg-secondary-inverse-bg);
48
+ --color-tertiary-inverse-bg: var(--tokens-semantic-bg-tertiary-inverse-bg);
49
+ --color-primary-inverse-hover-bg: var(--tokens-semantic-bg-primary-inverse-hover-bg);
50
+ --color-primary-hover-bg: var(--tokens-semantic-bg-primary-hover-bg);
51
+ --color-inp-default-border: var(--tokens-semantic-border-inp-default-border);
52
+ --color-inp-hover-border: var(--tokens-semantic-border-inp-hover-border);
53
+ --color-inp-focus-border: var(--tokens-semantic-border-inp-focus-border);
54
+ --color-delicate-border: var(--tokens-semantic-border-delicate-border);
55
+ --color-disabled-border: var(--tokens-semantic-border-disabled-border);
56
+ --color-inp-disabled-border: var(--tokens-semantic-border-inp-disabled-border);
57
+ --color-default-border: var(--tokens-semantic-border-default-border);
58
+ --color-success-text: var(--tokens-semantic-text-success-text);
59
+ --color-success-bg: var(--tokens-semantic-bg-success-bg);
60
+ --color-warning-text: var(--tokens-semantic-text-warning-text);
61
+ --color-warning-bg: var(--tokens-semantic-bg-warning-bg);
62
+ --color-error-text: var(--tokens-semantic-text-error-text);
63
+ --color-error-bg: var(--tokens-semantic-bg-error-bg);
64
+ --color-info-new-text: var(--tokens-semantic-text-info-new-text);
65
+ --color-info-new-bg: var(--tokens-semantic-bg-info-new-bg);
66
+ --color-contract-text: var(--tokens-semantic-text-contract-text);
67
+ --color-contract-bg: var(--tokens-semantic-bg-contract-bg);
68
+ --color-negotiation-text: var(--tokens-semantic-text-negotiation-text);
69
+ --color-negotiation-bg: var(--tokens-semantic-bg-negotiation-bg);
70
+ --color-invalid-text: var(--tokens-semantic-text-invalid-text);
71
+ --color-invalid-bg: var(--tokens-semantic-bg-invalid-bg);
72
+ --color-proposal-text: var(--tokens-semantic-text-proposal-text);
73
+ --color-proposal-bg: var(--tokens-semantic-bg-proposal-bg);
74
+ --color-follow-up-text: var(--tokens-semantic-text-follow-up-text);
75
+ --color-follow-up-bg: var(--tokens-semantic-bg-follow-up-bg);
76
+ }
77
+
78
+ html,
79
+ body {
80
+ font-family: var(--font-sans);
81
+ -webkit-font-smoothing: antialiased;
82
+ -moz-osx-font-smoothing: grayscale;
83
+ font-synthesis: none;
84
+ }
package/src/styles/theme.css ADDED
@@ -0,0 +1,94 @@
1
+ :root {
2
+ /* Light Globals */
3
+ --globals-neutral-50: #fafafa;
4
+ --globals-neutral-100: #f5f5f5;
5
+ --globals-neutral-200: #e5e5e5;
6
+ --globals-neutral-300: #d4d4d4;
7
+ --globals-neutral-400: #a1a1a1;
8
+ --globals-neutral-500: #737373;
9
+ --globals-neutral-600: #525252;
10
+ --globals-neutral-800: #262626;
11
+ --globals-neutral-900: #171717;
12
+ --globals-neutral-black: #000000;
13
+ --globals-neutral-white: #ffffff;
14
+ --globals-green-100: #dcfce7;
15
+ --globals-green-800: #016630;
16
+ --globals-emerald-50: #ecfdf5;
17
+ --globals-emerald-500: #00bc7d;
18
+ --globals-amber-600: #e17100;
19
+ --globals-orange-50: #fff7ed;
20
+ --globals-red-50: #fef2f2;
21
+ --globals-red-700: #c10007;
22
+ --globals-blue-50: #eff6ff;
23
+ --globals-blue-100: #dbeafe;
24
+ --globals-blue-500: #2b7fff;
25
+ --globals-blue-600: #155dfc;
26
+ --globals-purple-50: #faf5ff;
27
+ --globals-purple-500: #ad46ff;
28
+ --globals-indigo-50: #eef2ff;
29
+ --globals-indigo-500: #615fff;
30
+ --globals-slate-50: #f8fafc;
31
+ --globals-slate-700: #314158;
32
+
33
+ /* Semantic Light */
34
+
35
+ --tokens-semantic-text-primary-text: var(--globals-neutral-black);
36
+ --tokens-semantic-text-primary-inverse-text: var(--globals-neutral-white);
37
+ --tokens-semantic-text-secondary-text: var(--globals-neutral-500);
38
+ --tokens-semantic-text-disabled-text: var(--globals-neutral-300);
39
+ --tokens-semantic-text-placeholder-text: var(--globals-neutral-400);
40
+ --tokens-semantic-text-sub-label-text: var(--globals-neutral-400);
41
+ --tokens-semantic-text-secondary-inverse-text: var(--globals-neutral-600);
42
+ --tokens-semantic-bg-primary-bg: var(--globals-neutral-white);
43
+ --tokens-semantic-bg-secondary-bg: var(--globals-neutral-50);
44
+ --tokens-semantic-bg-tertiary-bg: var(--globals-neutral-100);
45
+ --tokens-semantic-bg-primary-inverse-bg: var(--globals-neutral-black);
46
+ --tokens-semantic-bg-disabled-bg: var(--globals-neutral-50);
47
+ --tokens-semantic-bg-secondary-inverse-bg: var(--globals-neutral-900);
48
+ --tokens-semantic-bg-tertiary-inverse-bg: var(--globals-neutral-800);
49
+ --tokens-semantic-bg-primary-inverse-hover-bg: var(--globals-neutral-500);
50
+ --tokens-semantic-bg-primary-hover-bg: var(--globals-neutral-200);
51
+ --tokens-semantic-border-inp-default-border: var(--globals-neutral-400);
52
+ --tokens-semantic-border-inp-hover-border: var(--globals-neutral-500);
53
+ --tokens-semantic-border-inp-focus-border: var(--globals-neutral-600);
54
+ --tokens-semantic-border-delicate-border: var(--globals-neutral-200);
55
+ --tokens-semantic-border-disabled-border: var(--globals-neutral-200);
56
+ --tokens-semantic-border-inp-disabled-border: var(--globals-neutral-100);
57
+ --tokens-semantic-border-default-border: var(--globals-neutral-300);
58
+ --tokens-semantic-text-success-text: var(--globals-green-800);
59
+ --tokens-semantic-bg-success-bg: var(--globals-green-100);
60
+ --tokens-semantic-text-warning-text: var(--globals-amber-600);
61
+ --tokens-semantic-bg-warning-bg: var(--globals-orange-50);
62
+ --tokens-semantic-text-error-text: var(--globals-red-700);
63
+ --tokens-semantic-bg-error-bg: var(--globals-red-50);
64
+ --tokens-semantic-text-info-new-text: var(--globals-blue-600);
65
+ --tokens-semantic-bg-info-new-bg: var(--globals-blue-50);
66
+ --tokens-semantic-text-contract-text: var(--globals-emerald-500);
67
+ --tokens-semantic-bg-contract-bg: var(--globals-emerald-50);
68
+ --tokens-semantic-text-negotiation-text: var(--globals-blue-500);
69
+ --tokens-semantic-bg-negotiation-bg: var(--globals-blue-100);
70
+ --tokens-semantic-text-invalid-text: var(--globals-slate-700);
71
+ --tokens-semantic-bg-invalid-bg: var(--globals-slate-50);
72
+ --tokens-semantic-text-proposal-text: var(--globals-indigo-500);
73
+ --tokens-semantic-bg-proposal-bg: var(--globals-indigo-50);
74
+ --tokens-semantic-text-follow-up-text: var(--globals-purple-500);
75
+ --tokens-semantic-bg-follow-up-bg: var(--globals-purple-50);
76
+
77
+ /* Fonts */
78
+ --typography-globals-font-family-primary: "Inter";
79
+ --typography-globals-font-weight-medium: 500;
80
+ --typography-globals-font-weight-regular: 400;
81
+
82
+ --typography-globals-font-size-xs: 0.75rem;
83
+ --typography-globals-font-size-sm: 0.875rem;
84
+ --typography-globals-font-size-md: 1rem;
85
+ --typography-globals-font-size-lg: 1.125rem;
86
+ --typography-globals-font-size-xl: 1.25rem;
87
+ --typography-globals-font-size-h3: 1.25rem;
88
+ --typography-globals-font-size-h2: 1.5rem;
89
+ --typography-globals-font-size-h1: 2rem;
90
+ }
91
+
92
+ .dark {
93
+ /* Semantic: Content */
94
+ }