@digitalpromise/design 0.3.0 → 1.0.1-next.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.
- package/dist/digitalpromise-design.cjs +1 -0
- package/dist/digitalpromise-design.js +12 -15
- package/dist/main.css +1 -0
- package/dist/tokens.d.ts +134 -0
- package/dist/tokens.js +1654 -0
- package/package.json +22 -21
- package/src/components/{Button/Button.stories.ts → button.stories.ts} +26 -12
- package/src/components/button.tsx +19 -0
- package/dist/css/variables.css +0 -100
- package/dist/digitalpromise-design.umd.cjs +0 -1
- package/dist/scss/_variables.scss +0 -97
- package/dist/style.css +0 -1
- package/src/components/Button/Button.tsx +0 -48
- package/src/components/Button/button.css +0 -93
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime");function s({className:u,state:t,...e}){return n.jsx("button",{"data-state":t,className:"btn",...e})}exports.Button=s;
|
|
@@ -1,21 +1,18 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
const t = ["button", `button--${n}`];
|
|
9
|
-
return o && t.push("danger"), /* @__PURE__ */ u(
|
|
1
|
+
import { jsx as n } from "react/jsx-runtime";
|
|
2
|
+
function e({
|
|
3
|
+
className: o,
|
|
4
|
+
state: t,
|
|
5
|
+
...a
|
|
6
|
+
}) {
|
|
7
|
+
return /* @__PURE__ */ n(
|
|
10
8
|
"button",
|
|
11
9
|
{
|
|
12
|
-
|
|
13
|
-
className:
|
|
14
|
-
...
|
|
15
|
-
children: s
|
|
10
|
+
"data-state": t,
|
|
11
|
+
className: "btn",
|
|
12
|
+
...a
|
|
16
13
|
}
|
|
17
14
|
);
|
|
18
|
-
}
|
|
15
|
+
}
|
|
19
16
|
export {
|
|
20
|
-
|
|
17
|
+
e as Button
|
|
21
18
|
};
|
package/dist/main.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@theme{--color-*: initial; --text-*: initial; --spacing-*: initial;}@theme{ --color-gray-1: #f4f4f4; --color-gray-2: #e6e6e6; --color-gray-3: #a3a3a3; --color-gray-4: #777777; --color-gray-5: #454545; --color-blue-1: #ebf4fa; --color-blue-2: #cce3f2; --color-blue-3: #348ec7; --color-blue-4: #2a7aac; --color-blue-5: #246289; --color-indigo-1: #eef2f9; --color-indigo-2: #d2d8ec; --color-indigo-3: #5a71b9; --color-indigo-4: #465da5; --color-indigo-5: #3a4d88; --color-purple-1: #f1eef6; --color-purple-2: #ddd5e9; --color-purple-3: #8164af; --color-purple-4: #6d509b; --color-purple-5: #5a4280; --color-violet-1: #f5eef6; --color-violet-2: #e6d5ea; --color-violet-3: #9a55aa; --color-violet-4: #81488e; --color-violet-5: #693a73; --color-magenta-1: #f6eef4; --color-magenta-2: #ead5e3; --color-magenta-3: #aa558e; --color-magenta-4: #8f4777; --color-magenta-5: #743a61; --color-red-1: #fcede8; --color-red-2: #f8d2c7; --color-red-3: #e45a2f; --color-red-4: #d0451b; --color-red-5: #ab3916; --color-orange-1: #fcf2e8; --color-orange-2: #f8dfc6; --color-orange-3: #e3811c; --color-orange-4: #c86400; --color-orange-5: #9e5000; --color-green-1: #f5f9eb; --color-green-2: #e6f1cd; --color-green-3: #82a82f; --color-green-4: #698826; --color-green-5: #50681d; --color-jade-1: #eef7f1; --color-jade-2: #d4eadd; --color-jade-3: #4e9d6d; --color-jade-4: #40815a; --color-jade-5: #336647; --color-teal-1: #eaf8fb; --color-teal-2: #caeef4; --color-teal-3: #259cb2; --color-teal-4: #1e7e90; --color-teal-5: #17616e; --color-neutral-1: #ffffff; --color-neutral-2: rgba(0, 0, 0, .08); --color-neutral-3: rgba(0, 0, 0, .15); --color-neutral-4: rgba(0, 0, 0, .45); --color-neutral-5: #000000; --color-primary: #2a7aac; --color-primary-hover: #ebf4fa; --color-danger: #d0451b; --color-danger-hover: #ab3916; --color-disabled: #a3a3a3; --text-small: .875rem; --text-medium: 1rem; --text-medium-large: 1.25rem; --text-large: 1.5rem; --text-x-large: 2rem; --text-xx-large: 3rem; --text-xxx-large: 4rem; --text-base: 1rem; --spacing-0: 0; --spacing-1: .25rem; --spacing-2: .5rem; --spacing-3: .75rem; --spacing-4: 1rem; --spacing-5: 1.5rem; --spacing-6: 2rem; --spacing-7: 3rem; --spacing-8: 4rem; --spacing-9: 5rem; --spacing-10: 6rem; --spacing-11: 15rem; --spacing-12: 22.5rem; }@utility btn{@apply font-bold transition border border-transparent text-neutral-1 px-5 py-3 rounded-3xl bg-blue-4 hover:bg-blue-3 data-[state="danger"]:bg-danger data-[state="danger"]:hover:bg-danger-hover data-[state="inverse"]:bg-neutral-1 data-[state="inverse"]:text-blue-3 data-[state="inverse"]:border-blue-3 data-[state="inverse"]:hover:bg-blue-2 data-[state="decolor"]:bg-gray-5 data-[state="decolor"]:hover:bg-gray-4;}
|
package/dist/tokens.d.ts
ADDED
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly, this file was auto-generated.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
export default tokens;
|
|
6
|
+
|
|
7
|
+
declare interface DesignToken {
|
|
8
|
+
$value?: any;
|
|
9
|
+
$type?: string;
|
|
10
|
+
$description?: string;
|
|
11
|
+
name?: string;
|
|
12
|
+
themeable?: boolean;
|
|
13
|
+
attributes?: Record<string, unknown>;
|
|
14
|
+
[key: string]: any;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
declare const tokens: {
|
|
18
|
+
color: {
|
|
19
|
+
gray: {
|
|
20
|
+
"1": DesignToken;
|
|
21
|
+
"2": DesignToken;
|
|
22
|
+
"3": DesignToken;
|
|
23
|
+
"4": DesignToken;
|
|
24
|
+
"5": DesignToken;
|
|
25
|
+
};
|
|
26
|
+
blue: {
|
|
27
|
+
"1": DesignToken;
|
|
28
|
+
"2": DesignToken;
|
|
29
|
+
"3": DesignToken;
|
|
30
|
+
"4": DesignToken;
|
|
31
|
+
"5": DesignToken;
|
|
32
|
+
};
|
|
33
|
+
indigo: {
|
|
34
|
+
"1": DesignToken;
|
|
35
|
+
"2": DesignToken;
|
|
36
|
+
"3": DesignToken;
|
|
37
|
+
"4": DesignToken;
|
|
38
|
+
"5": DesignToken;
|
|
39
|
+
};
|
|
40
|
+
purple: {
|
|
41
|
+
"1": DesignToken;
|
|
42
|
+
"2": DesignToken;
|
|
43
|
+
"3": DesignToken;
|
|
44
|
+
"4": DesignToken;
|
|
45
|
+
"5": DesignToken;
|
|
46
|
+
};
|
|
47
|
+
violet: {
|
|
48
|
+
"1": DesignToken;
|
|
49
|
+
"2": DesignToken;
|
|
50
|
+
"3": DesignToken;
|
|
51
|
+
"4": DesignToken;
|
|
52
|
+
"5": DesignToken;
|
|
53
|
+
};
|
|
54
|
+
magenta: {
|
|
55
|
+
"1": DesignToken;
|
|
56
|
+
"2": DesignToken;
|
|
57
|
+
"3": DesignToken;
|
|
58
|
+
"4": DesignToken;
|
|
59
|
+
"5": DesignToken;
|
|
60
|
+
};
|
|
61
|
+
red: {
|
|
62
|
+
"1": DesignToken;
|
|
63
|
+
"2": DesignToken;
|
|
64
|
+
"3": DesignToken;
|
|
65
|
+
"4": DesignToken;
|
|
66
|
+
"5": DesignToken;
|
|
67
|
+
};
|
|
68
|
+
orange: {
|
|
69
|
+
"1": DesignToken;
|
|
70
|
+
"2": DesignToken;
|
|
71
|
+
"3": DesignToken;
|
|
72
|
+
"4": DesignToken;
|
|
73
|
+
"5": DesignToken;
|
|
74
|
+
};
|
|
75
|
+
green: {
|
|
76
|
+
"1": DesignToken;
|
|
77
|
+
"2": DesignToken;
|
|
78
|
+
"3": DesignToken;
|
|
79
|
+
"4": DesignToken;
|
|
80
|
+
"5": DesignToken;
|
|
81
|
+
};
|
|
82
|
+
jade: {
|
|
83
|
+
"1": DesignToken;
|
|
84
|
+
"2": DesignToken;
|
|
85
|
+
"3": DesignToken;
|
|
86
|
+
"4": DesignToken;
|
|
87
|
+
"5": DesignToken;
|
|
88
|
+
};
|
|
89
|
+
teal: {
|
|
90
|
+
"1": DesignToken;
|
|
91
|
+
"2": DesignToken;
|
|
92
|
+
"3": DesignToken;
|
|
93
|
+
"4": DesignToken;
|
|
94
|
+
"5": DesignToken;
|
|
95
|
+
};
|
|
96
|
+
neutral: {
|
|
97
|
+
"1": DesignToken;
|
|
98
|
+
"2": DesignToken;
|
|
99
|
+
"3": DesignToken;
|
|
100
|
+
"4": DesignToken;
|
|
101
|
+
"5": DesignToken;
|
|
102
|
+
};
|
|
103
|
+
primary: DesignToken;
|
|
104
|
+
"primary-hover": DesignToken;
|
|
105
|
+
danger: DesignToken;
|
|
106
|
+
"danger-hover": DesignToken;
|
|
107
|
+
disabled: DesignToken;
|
|
108
|
+
};
|
|
109
|
+
text: {
|
|
110
|
+
small: DesignToken;
|
|
111
|
+
medium: DesignToken;
|
|
112
|
+
"medium-large": DesignToken;
|
|
113
|
+
large: DesignToken;
|
|
114
|
+
"x-large": DesignToken;
|
|
115
|
+
"xx-large": DesignToken;
|
|
116
|
+
"xxx-large": DesignToken;
|
|
117
|
+
base: DesignToken;
|
|
118
|
+
};
|
|
119
|
+
spacing: {
|
|
120
|
+
"0": DesignToken;
|
|
121
|
+
"1": DesignToken;
|
|
122
|
+
"2": DesignToken;
|
|
123
|
+
"3": DesignToken;
|
|
124
|
+
"4": DesignToken;
|
|
125
|
+
"5": DesignToken;
|
|
126
|
+
"6": DesignToken;
|
|
127
|
+
"7": DesignToken;
|
|
128
|
+
"8": DesignToken;
|
|
129
|
+
"9": DesignToken;
|
|
130
|
+
"10": DesignToken;
|
|
131
|
+
"11": DesignToken;
|
|
132
|
+
"12": DesignToken;
|
|
133
|
+
};
|
|
134
|
+
};
|