rebelcoredesignstarter 1.0.0
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/package.json +22 -0
- package/src/components/button/button.css +48 -0
- package/src/components/button/button.js +20 -0
- package/src/index.js +1 -0
- package/src/tokens/tokens.css +39 -0
- package/src/tokens/tokens.json +101 -0
package/package.json
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "rebelcoredesignstarter",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "",
|
|
5
|
+
"main": "./src/index.js",
|
|
6
|
+
"exports": {
|
|
7
|
+
".": "./src/index.js"
|
|
8
|
+
},
|
|
9
|
+
"files": [
|
|
10
|
+
"src"
|
|
11
|
+
],
|
|
12
|
+
"scripts": {
|
|
13
|
+
"build:tokens": "node scripts/build-tokens.js"
|
|
14
|
+
},
|
|
15
|
+
"keywords": [],
|
|
16
|
+
"author": "",
|
|
17
|
+
"license": "ISC",
|
|
18
|
+
"type": "module",
|
|
19
|
+
"devDependencies": {
|
|
20
|
+
"style-dictionary": "^5.6.0"
|
|
21
|
+
}
|
|
22
|
+
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
@import "../../tokens/tokens.css";
|
|
2
|
+
|
|
3
|
+
.rc-button {
|
|
4
|
+
display: inline-flex;
|
|
5
|
+
align-items: stretch;
|
|
6
|
+
height: var(--button-size-md-height);
|
|
7
|
+
padding: 0;
|
|
8
|
+
border: 0;
|
|
9
|
+
border-radius: var(--button-radius);
|
|
10
|
+
overflow: hidden;
|
|
11
|
+
|
|
12
|
+
background: var(--button-primary-default);
|
|
13
|
+
color: var(--button-primary-text);
|
|
14
|
+
box-shadow: var(--elevation-md);
|
|
15
|
+
|
|
16
|
+
font-family: var(--button-typography-font-family);
|
|
17
|
+
font-size: var(--button-typography-font-size);
|
|
18
|
+
font-weight: var(--button-typography-font-weight);
|
|
19
|
+
line-height: var(--button-typography-line-height);
|
|
20
|
+
letter-spacing: var(--button-typography-letter-spacing);
|
|
21
|
+
text-transform: uppercase;
|
|
22
|
+
|
|
23
|
+
cursor: pointer;
|
|
24
|
+
|
|
25
|
+
transition:
|
|
26
|
+
background-color var(--motion-duration-160ms) var(--motion-easing-ease-out);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.rc-button:hover {
|
|
30
|
+
background: var(--button-primary-hover);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.rc-button__icon {
|
|
34
|
+
width: var(--button-size-md-icon);
|
|
35
|
+
height: var(--button-size-md-icon);
|
|
36
|
+
margin:
|
|
37
|
+
var(--button-spacing-icon-padding-y)
|
|
38
|
+
var(--button-spacing-icon-padding-x);
|
|
39
|
+
flex: 0 0 auto;
|
|
40
|
+
color: var(--button-icon-color);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.rc-button__label {
|
|
44
|
+
display: flex;
|
|
45
|
+
align-items: center;
|
|
46
|
+
padding-left: var(--button-spacing-label-padding-left);
|
|
47
|
+
padding-right: var(--button-spacing-label-padding-right);
|
|
48
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import "./button.css";
|
|
2
|
+
|
|
3
|
+
export function createButton({ label = "View the work" } = {}) {
|
|
4
|
+
const button = document.createElement("button");
|
|
5
|
+
|
|
6
|
+
button.type = "button";
|
|
7
|
+
button.className = "rc-button rc-button--md";
|
|
8
|
+
|
|
9
|
+
const icon = document.createElement("span");
|
|
10
|
+
icon.className = "rc-button__icon";
|
|
11
|
+
icon.setAttribute("aria-hidden", "true");
|
|
12
|
+
|
|
13
|
+
const text = document.createElement("span");
|
|
14
|
+
text.className = "rc-button__label";
|
|
15
|
+
text.textContent = label;
|
|
16
|
+
|
|
17
|
+
button.append(icon, text);
|
|
18
|
+
|
|
19
|
+
return button;
|
|
20
|
+
}
|
package/src/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { createButton } from "./components/button/button.js";
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly, this file was auto-generated.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
:root {
|
|
6
|
+
--color-deep-sapphire: #173a6b;
|
|
7
|
+
--color-dark-red: #8e0d22;
|
|
8
|
+
--color-pale-blue: #eaf1ff;
|
|
9
|
+
--radius-md: 8px;
|
|
10
|
+
--spacing-14: 14px;
|
|
11
|
+
--spacing-15: 15px;
|
|
12
|
+
--spacing-34: 34px;
|
|
13
|
+
--sizing-size-56: 56px;
|
|
14
|
+
--sizing-size-28: 28px;
|
|
15
|
+
--typography-font-family-inter: Inter;
|
|
16
|
+
--typography-font-weight-600: 600;
|
|
17
|
+
--typography-font-size-18: 18px;
|
|
18
|
+
--typography-line-height-120-percent: 1.2;
|
|
19
|
+
--typography-letter-spacing-4-percent: 0.72px;
|
|
20
|
+
--motion-duration-160ms: 160ms;
|
|
21
|
+
--motion-easing-ease-out: cubic-bezier(0, 0, 0.58, 1);
|
|
22
|
+
--elevation-md: 0px 7px 14px 0px rgb(0% 0% 0% / 0.35); /** Button elevation */
|
|
23
|
+
--button-primary-default: #173a6b;
|
|
24
|
+
--button-primary-hover: #8e0d22;
|
|
25
|
+
--button-primary-text: #eaf1ff;
|
|
26
|
+
--button-radius: 8px;
|
|
27
|
+
--button-spacing-icon-padding-y: 14px;
|
|
28
|
+
--button-spacing-icon-padding-x: 15px;
|
|
29
|
+
--button-spacing-label-padding-left: 14px;
|
|
30
|
+
--button-spacing-label-padding-right: 34px;
|
|
31
|
+
--button-typography-font-family: Inter;
|
|
32
|
+
--button-typography-font-weight: 600;
|
|
33
|
+
--button-typography-font-size: 18px;
|
|
34
|
+
--button-typography-line-height: 1.2;
|
|
35
|
+
--button-typography-letter-spacing: 0.72px;
|
|
36
|
+
--button-size-md-height: 56px;
|
|
37
|
+
--button-size-md-icon: 28px;
|
|
38
|
+
--button-icon-color: #eaf1ff;
|
|
39
|
+
}
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
{
|
|
2
|
+
"color": {
|
|
3
|
+
"$type": "color",
|
|
4
|
+
"deep-sapphire": {
|
|
5
|
+
"$value": { "colorSpace": "srgb", "components": [0.0902, 0.2275, 0.4196], "alpha": 1, "hex": "#173A6B" }
|
|
6
|
+
},
|
|
7
|
+
"dark-red": {
|
|
8
|
+
"$value": { "colorSpace": "srgb", "components": [0.5569, 0.051, 0.1333], "alpha": 1, "hex": "#8E0D22" }
|
|
9
|
+
},
|
|
10
|
+
"pale-blue": {
|
|
11
|
+
"$value": { "colorSpace": "srgb", "components": [0.9176, 0.9451, 1], "alpha": 1, "hex": "#EAF1FF" }
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
"radius": {
|
|
15
|
+
"$type": "dimension",
|
|
16
|
+
"md": { "$value": { "value": 8, "unit": "px" } }
|
|
17
|
+
},
|
|
18
|
+
"spacing": {
|
|
19
|
+
"$type": "dimension",
|
|
20
|
+
"14": { "$value": { "value": 14, "unit": "px" } },
|
|
21
|
+
"15": { "$value": { "value": 15, "unit": "px" } },
|
|
22
|
+
"34": { "$value": { "value": 34, "unit": "px" } }
|
|
23
|
+
},
|
|
24
|
+
"sizing": {
|
|
25
|
+
"$type": "dimension",
|
|
26
|
+
"size-56": { "$value": { "value": 56, "unit": "px" } },
|
|
27
|
+
"size-28": { "$value": { "value": 28, "unit": "px" } }
|
|
28
|
+
},
|
|
29
|
+
"typography": {
|
|
30
|
+
"font-family": {
|
|
31
|
+
"inter": { "$type": "fontFamily", "$value": "Inter" }
|
|
32
|
+
},
|
|
33
|
+
"font-weight": {
|
|
34
|
+
"600": { "$type": "fontWeight", "$value": 600 }
|
|
35
|
+
},
|
|
36
|
+
"font-size": {
|
|
37
|
+
"18": { "$type": "dimension", "$value": { "value": 18, "unit": "px" } }
|
|
38
|
+
},
|
|
39
|
+
"line-height": {
|
|
40
|
+
"120-percent": { "$type": "number", "$value": 1.2 }
|
|
41
|
+
},
|
|
42
|
+
"letter-spacing": {
|
|
43
|
+
"4-percent": { "$type": "dimension", "$value": { "value": 0.72, "unit": "px" } }
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
"motion": {
|
|
47
|
+
"duration": {
|
|
48
|
+
"160ms": { "$type": "duration", "$value": { "value": 160, "unit": "ms" } }
|
|
49
|
+
},
|
|
50
|
+
"easing": {
|
|
51
|
+
"ease-out": { "$type": "cubicBezier", "$value": [0, 0, 0.58, 1] }
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
"elevation": {
|
|
55
|
+
"$type": "shadow",
|
|
56
|
+
"md": {
|
|
57
|
+
"$description": "Button elevation",
|
|
58
|
+
"$value": {
|
|
59
|
+
"color": { "colorSpace": "srgb", "components": [0, 0, 0], "alpha": 0.35, "hex": "#000000" },
|
|
60
|
+
"offsetX": { "value": 0, "unit": "px" },
|
|
61
|
+
"offsetY": { "value": 7, "unit": "px" },
|
|
62
|
+
"blur": { "value": 14, "unit": "px" },
|
|
63
|
+
"spread": { "value": 0, "unit": "px" }
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
"button": {
|
|
68
|
+
"primary": {
|
|
69
|
+
"default": { "$type": "color", "$value": "{color.deep-sapphire}" },
|
|
70
|
+
"hover": { "$type": "color", "$value": "{color.dark-red}" },
|
|
71
|
+
"text": { "$type": "color", "$value": "{color.pale-blue}" }
|
|
72
|
+
},
|
|
73
|
+
"radius": { "$type": "dimension", "$value": "{radius.md}" },
|
|
74
|
+
"spacing": {
|
|
75
|
+
"icon": {
|
|
76
|
+
"padding-y": { "$type": "dimension", "$value": "{spacing.14}" },
|
|
77
|
+
"padding-x": { "$type": "dimension", "$value": "{spacing.15}" }
|
|
78
|
+
},
|
|
79
|
+
"label": {
|
|
80
|
+
"padding-left": { "$type": "dimension", "$value": "{spacing.14}" },
|
|
81
|
+
"padding-right": { "$type": "dimension", "$value": "{spacing.34}" }
|
|
82
|
+
}
|
|
83
|
+
},
|
|
84
|
+
"typography": {
|
|
85
|
+
"font-family": { "$type": "fontFamily", "$value": "{typography.font-family.inter}" },
|
|
86
|
+
"font-weight": { "$type": "fontWeight", "$value": "{typography.font-weight.600}" },
|
|
87
|
+
"font-size": { "$type": "dimension", "$value": "{typography.font-size.18}" },
|
|
88
|
+
"line-height": { "$type": "number", "$value": "{typography.line-height.120-percent}" },
|
|
89
|
+
"letter-spacing": { "$type": "dimension", "$value": "{typography.letter-spacing.4-percent}" }
|
|
90
|
+
},
|
|
91
|
+
"size": {
|
|
92
|
+
"md": {
|
|
93
|
+
"height": { "$type": "dimension", "$value": "{sizing.size-56}" },
|
|
94
|
+
"icon": { "$type": "dimension", "$value": "{sizing.size-28}" }
|
|
95
|
+
}
|
|
96
|
+
},
|
|
97
|
+
"icon": {
|
|
98
|
+
"color": { "$type": "color", "$value": "{color.pale-blue}" }
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
}
|