@kroo-web/design-system 1.0.1 → 1.0.2
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.
|
File without changes
|
|
@@ -0,0 +1,115 @@
|
|
|
1
|
+
.outer {
|
|
2
|
+
margin-bottom: 1rem;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.container {
|
|
6
|
+
position: relative;
|
|
7
|
+
display: flex;
|
|
8
|
+
flex-direction: column;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.label {
|
|
12
|
+
position: absolute;
|
|
13
|
+
z-index: 3;
|
|
14
|
+
left: 1.25rem;
|
|
15
|
+
color: #666666;
|
|
16
|
+
pointer-events: none;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.input {
|
|
20
|
+
all: unset;
|
|
21
|
+
background: white;
|
|
22
|
+
padding: 1rem 1.25rem;
|
|
23
|
+
padding-top: 1.70rem;
|
|
24
|
+
border-radius: var(--product-radius-2);
|
|
25
|
+
z-index: 1;
|
|
26
|
+
font-size: 1.125rem;
|
|
27
|
+
caret-color: var(--primary-love-pink-100);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.inputDescription {
|
|
31
|
+
display: flex;
|
|
32
|
+
flex-direction: column;
|
|
33
|
+
gap: 0.5rem;
|
|
34
|
+
padding-top: 0.5rem;
|
|
35
|
+
padding-left: 1.5rem;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.container--error > label {
|
|
39
|
+
color: var(--product-error);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.container--error > input {
|
|
43
|
+
border: var(--product-border-width-1) solid var(--product-error);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.error {
|
|
47
|
+
color: var(--product-error);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.helper {
|
|
51
|
+
color: rgba(var(--grey-60-rgb));
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.rightContent {
|
|
55
|
+
position: absolute;
|
|
56
|
+
right: 1.5rem;
|
|
57
|
+
top: 50%;
|
|
58
|
+
transform: translateY(-50%);
|
|
59
|
+
z-index: 2;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.leftContent {
|
|
63
|
+
position: absolute;
|
|
64
|
+
left: 1.5rem;
|
|
65
|
+
top: 50%;
|
|
66
|
+
transform: translateY(-50%);
|
|
67
|
+
z-index: 2;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
.input:focus {
|
|
72
|
+
border: var(--product-border-width-1) solid rgba(var(--primary-dark-rgb));
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.input--focus {
|
|
76
|
+
border: var(--product-border-width-1) solid rgba(var(--primary-dark-rgb));
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.input:hover {
|
|
80
|
+
outline: var(--product-border-width-1) solid #E6E6E6;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.input--hover {
|
|
84
|
+
outline: var(--product-border-width-1) solid #E6E6E6;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.input:disabled {
|
|
88
|
+
background: #E6E6E6;
|
|
89
|
+
cursor: not-allowed;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.input:disabled:hover {
|
|
93
|
+
outline: none;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
@media (min-width: 768px) {
|
|
99
|
+
.input {
|
|
100
|
+
padding: 1.5rem;
|
|
101
|
+
padding-top: 1.8rem;
|
|
102
|
+
font-size: 1.25rem;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.label {
|
|
106
|
+
left: 1.5rem;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
/* Product Variables */
|
|
4
|
+
|
|
5
|
+
:root {
|
|
6
|
+
/* Colors */
|
|
7
|
+
--product-error: rgba(var(--system-red-rgb));
|
|
8
|
+
|
|
9
|
+
/* Spacing */
|
|
10
|
+
--product-spacing-1: 0.25rem;
|
|
11
|
+
--product-spacing-2: 0.50rem;
|
|
12
|
+
--product-spacing-3: 0.75rem;
|
|
13
|
+
--product-spacing-4: 1rem;
|
|
14
|
+
--product-spacing-5: 1.25rem;
|
|
15
|
+
--product-spacing-6: 1.50rem;
|
|
16
|
+
--product-spacing-7: 2rem;
|
|
17
|
+
--product-spacing-8: 2.50rem;
|
|
18
|
+
--product-spacing-9: 3rem;
|
|
19
|
+
--product-spacing-10: 3.50rem;
|
|
20
|
+
--product-spacing-11: 4rem;
|
|
21
|
+
|
|
22
|
+
/* Border Radius */
|
|
23
|
+
--product-radius-1: 0.25rem;
|
|
24
|
+
--product-radius-2: 0.50rem;
|
|
25
|
+
--product-radius-3: 0.75rem;
|
|
26
|
+
--product-radius-4: 1rem;
|
|
27
|
+
|
|
28
|
+
/* Border Width */
|
|
29
|
+
--product-border-width-1: 2px;
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
/* Component Specific Variables */
|
|
33
|
+
|
|
34
|
+
--product-text-field-spacing: 0.625rem;
|
|
35
|
+
--product-radio-select-spacing: 1.25rem;
|
|
36
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
|
|
2
|
+
/* Import all tokens from each section of Design System */
|
|
3
|
+
@import "./tokens/variables.css";
|
|
4
|
+
|
|
5
|
+
* {
|
|
6
|
+
box-sizing: border-box;
|
|
7
|
+
padding: 0;
|
|
8
|
+
margin: 0;
|
|
9
|
+
font-family: var(--font-primary);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.sr-only:not(:focus):not(:active) {
|
|
13
|
+
clip: rect(0 0 0 0);
|
|
14
|
+
clip-path: inset(50%);
|
|
15
|
+
height: 1px;
|
|
16
|
+
overflow: hidden;
|
|
17
|
+
position: absolute;
|
|
18
|
+
white-space: nowrap;
|
|
19
|
+
width: 1px;
|
|
20
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/* PRODUCT TOKENS */
|
|
2
|
+
@import url("../../product/styles/tokens/variables.css");
|
|
3
|
+
|
|
4
|
+
/* MARKETING TOKENS */
|
|
5
|
+
|
|
6
|
+
@import url("../../marketing/styles/tokens/variables.css");
|
|
7
|
+
|
|
8
|
+
/* GLOBAL TOKENS */
|
|
9
|
+
|
|
10
|
+
:root {
|
|
11
|
+
--font-primary: "Inter", sans-serif;
|
|
12
|
+
--font-secondary: "Brygada 1918", sans-serif;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
|
package/package.json
CHANGED
|
@@ -1,16 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kroo-web/design-system",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "Web design system for Kroo including the components for the marketing site and the product side.",
|
|
5
5
|
"main": "./dist/main.js",
|
|
6
6
|
"types": "./dist/main.d.ts",
|
|
7
7
|
"module": "./dist/main.js",
|
|
8
|
-
"files": [
|
|
8
|
+
"files": [
|
|
9
|
+
"dist"
|
|
10
|
+
],
|
|
9
11
|
"scripts": {
|
|
10
12
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
11
13
|
"storybook": "storybook dev -p 6006",
|
|
12
14
|
"build-storybook": "storybook build",
|
|
13
|
-
"
|
|
15
|
+
"copy-files": "copyfiles -u 1 \"src/**/*.css\" \"src/**/*.svg\" \"src/**/*.json\" dist/",
|
|
16
|
+
"deploy": "npm run copy-files && npm publish --access public"
|
|
14
17
|
},
|
|
15
18
|
"keywords": [],
|
|
16
19
|
"author": "",
|
|
@@ -24,6 +27,7 @@
|
|
|
24
27
|
"@storybook/react": "^7.6.17",
|
|
25
28
|
"@storybook/react-vite": "^7.6.17",
|
|
26
29
|
"@storybook/test": "^7.6.17",
|
|
30
|
+
"copyfiles": "^2.4.1",
|
|
27
31
|
"prop-types": "^15.8.1",
|
|
28
32
|
"react": "^18.2.0",
|
|
29
33
|
"react-dom": "^18.2.0",
|