@beam-ui/design-tokens 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.
Files changed (13) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/README.md +394 -0
  3. package/USAGE.md +286 -0
  4. package/build/base/tokens.es6.js +106 -0
  5. package/build/base/tokens.json +144 -0
  6. package/build/base/variables.css +108 -0
  7. package/build/globals/tokens.es6.js +9 -0
  8. package/build/globals/tokens.json +11 -0
  9. package/build/globals/variables.css +11 -0
  10. package/build/semantic/tokens.es6.js +316 -0
  11. package/build/semantic/tokens.json +431 -0
  12. package/build/semantic/variables.css +315 -0
  13. package/package.json +52 -0
package/build/base/tokens.es6.js ADDED
@@ -0,0 +1,106 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ export const borderRadiusXxSmall = "0.4rem";
6
+ export const borderWidthThin = "0.1rem";
7
+ export const colorYellow100 = "hsl(60, 100%, 97%)";
8
+ export const colorYellow200 = "hsl(58, 100%, 92%)";
9
+ export const colorYellow300 = "hsl(60, 100%, 81%)";
10
+ export const colorYellow400 = "hsl(60, 100%, 50%)";
11
+ export const colorYellow500 = "hsl(54, 100%, 44%)";
12
+ export const colorYellow600 = "hsl(49, 87%, 37%)";
13
+ export const colorRed100 = "hsl(7, 94%, 93%)";
14
+ export const colorRed200 = "hsl(351, 93%, 83%)";
15
+ export const colorRed300 = "hsl(4, 76%, 70%)";
16
+ export const colorRed400 = "hsl(0, 78%, 63%)";
17
+ export const colorRed500 = "hsl(2, 72%, 46%)";
18
+ export const colorRed600 = "hsl(9, 79%, 34%)";
19
+ export const colorRed700 = "hsl(2, 72%, 29%)";
20
+ export const colorOrange100 = "hsl(27, 100%, 94%)";
21
+ export const colorOrange200 = "hsl(27, 100%, 84%)";
22
+ export const colorOrange300 = "hsl(26, 100%, 74%)";
23
+ export const colorOrange400 = "hsl(26, 100%, 64%)";
24
+ export const colorOrange500 = "hsl(29, 100%, 50%)";
25
+ export const colorOrange600 = "hsl(29, 100%, 38%)";
26
+ export const colorOrange700 = "hsl(29, 100%, 27%)";
27
+ export const colorGreen100 = "hsl(126, 71%, 95%)";
28
+ export const colorGreen200 = "hsl(128, 68%, 85%)";
29
+ export const colorGreen300 = "hsl(131, 67%, 76%)";
30
+ export const colorGreen400 = "hsl(131, 67%, 76%)";
31
+ export const colorGreen500 = "hsl(145, 82%, 47%)";
32
+ export const colorGreen600 = "hsl(145, 81%, 35%)";
33
+ export const colorGreen700 = "hsl(145, 81%, 25%)";
34
+ export const colorTeal100 = "hsl(165, 100%, 94%)";
35
+ export const colorTeal200 = "hsl(165, 67%, 86%)";
36
+ export const colorTeal300 = "hsl(167, 67%, 76%)";
37
+ export const colorTeal400 = "hsl(168, 68%, 65%)";
38
+ export const colorTeal500 = "hsl(171, 82%, 47%)";
39
+ export const colorTeal600 = "hsl(171, 81%, 36%)";
40
+ export const colorTeal700 = "hsl(171, 80%, 29%)";
41
+ export const colorBlue100 = "hsl(224, 79%, 95%)";
42
+ export const colorBlue200 = "hsl(222, 76%, 85%)";
43
+ export const colorBlue300 = "hsl(220, 75%, 76%)";
44
+ export const colorBlue400 = "hsl(217, 75%, 66%)";
45
+ export const colorBlue500 = "hsl(209, 82%, 49%)";
46
+ export const colorBlue600 = "hsl(209, 82%, 37%)";
47
+ export const colorBlue700 = "hsl(209, 79%, 31%)";
48
+ export const colorPurple100 = "hsl(269, 100%, 96%)";
49
+ export const colorPurple200 = "hsl(267, 69%, 85%)";
50
+ export const colorPurple300 = "hsl(266, 67%, 75%)";
51
+ export const colorPurple400 = "hsl(264, 65%, 66%)";
52
+ export const colorPurple500 = "hsl(263, 65%, 57%)";
53
+ export const colorPurple600 = "hsl(263, 50%, 43%)";
54
+ export const colorPurple700 = "hsl(263, 51%, 35%)";
55
+ export const colorPink100 = "hsl(300, 100%, 97%)";
56
+ export const colorPink200 = "hsl(300, 100%, 91%)";
57
+ export const colorPink300 = "hsl(300, 100%, 86%)";
58
+ export const colorPink400 = "hsl(300, 100%, 80%)";
59
+ export const colorPink500 = "hsl(300, 100%, 74%)";
60
+ export const colorPink600 = "hsl(300, 44%, 56%)";
61
+ export const colorPink700 = "hsl(300, 38%, 45%)";
62
+ export const colorGray50 = "hsl(0, 0%, 98%)";
63
+ export const colorGray100 = "hsl(210, 7%, 95%)";
64
+ export const colorGray200 = "hsl(228, 8%, 88%)";
65
+ export const colorGray300 = "hsl(222, 8%, 77%)";
66
+ export const colorGray400 = "hsl(219, 8%, 65%)";
67
+ export const colorGray500 = "hsl(218, 8%, 55%)";
68
+ export const colorGray600 = "hsl(221, 11%, 45%)";
69
+ export const colorGray700 = "hsl(222, 11%, 36%)";
70
+ export const colorGray800 = "hsl(223, 10%, 26%)";
71
+ export const colorGrayBlack = "hsl(0, 0%, 0%)";
72
+ export const colorGrayWhite = "hsl(0, 0%, 100%)";
73
+ export const colorOverlayDark = "hsla(0, 0%, 0%, 0.3)";
74
+ export const colorOverlayLight = "hsla(0, 0%, 0%, 0.05)";
75
+ export const colorTransparent = "hsla(0, 0%, 0%, 0)";
76
+ export const fontFamilyNormal = "HelveticaNeueeTextPro-Roman";
77
+ export const fontFamilyMedium = "HelveticaNeueeTextPro-Md";
78
+ export const fontFamilyFavorit = "FavoritStd-MediumExtended";
79
+ export const fontFamilyDisplay = "FavoritStd-MediumExtended";
80
+ export const fontFamilyHeading = "HelveticaNeueeTextPro-Md";
81
+ export const fontFamilyBody = "HelveticaNeueeTextPro-Roman";
82
+ export const fontSizeXSmall = "1.2rem";
83
+ export const fontSizeSmall = "1.4rem";
84
+ export const fontSizeMedium = "1.6rem";
85
+ export const fontSizeLarge = "2rem";
86
+ export const fontSizeXLarge = "2.4rem";
87
+ export const fontSizeXxLarge = "3.2rem";
88
+ export const fontSizeXxxLarge = "4rem";
89
+ export const fontSizeXxxxLarge = "5.2rem";
90
+ export const fontLineHeightTight = "1.2";
91
+ export const fontLineHeightSmall = "1.3";
92
+ export const fontLineHeightNormal = "1.4";
93
+ export const fontLineHeightRelaxed = "1.5";
94
+ export const fontLineHeightLoose = "1.6";
95
+ export const fontLetterSpacingXSmall = "-0.02em";
96
+ export const fontLetterSpacingSmall = "-0.01em";
97
+ export const fontLetterSpacingNormal = 0;
98
+ export const fontLetterSpacingLarge = "0.01em";
99
+ export const fontLetterSpacingXLarge = "0.02em";
100
+ export const spacingXSmall = "0.4rem";
101
+ export const spacingSmall = "0.8rem";
102
+ export const spacingMedium = "1.6rem";
103
+ export const spacingLarge = "2.4rem";
104
+ export const spacingXLarge = "3.2rem";
105
+ export const spacingXxLarge = "4rem";
106
+ export const spacingXxxLarge = "4.8rem";
package/build/base/tokens.json ADDED
@@ -0,0 +1,144 @@
1
+ {
2
+ "border": {
3
+ "radius": {
4
+ "xx-small": "0.4rem"
5
+ },
6
+ "width": {
7
+ "thin": "0.1rem"
8
+ }
9
+ },
10
+ "color": {
11
+ "yellow": {
12
+ "100": "hsl(60, 100%, 97%)",
13
+ "200": "hsl(58, 100%, 92%)",
14
+ "300": "hsl(60, 100%, 81%)",
15
+ "400": "hsl(60, 100%, 50%)",
16
+ "500": "hsl(54, 100%, 44%)",
17
+ "600": "hsl(49, 87%, 37%)"
18
+ },
19
+ "red": {
20
+ "100": "hsl(7, 94%, 93%)",
21
+ "200": "hsl(351, 93%, 83%)",
22
+ "300": "hsl(4, 76%, 70%)",
23
+ "400": "hsl(0, 78%, 63%)",
24
+ "500": "hsl(2, 72%, 46%)",
25
+ "600": "hsl(9, 79%, 34%)",
26
+ "700": "hsl(2, 72%, 29%)"
27
+ },
28
+ "orange": {
29
+ "100": "hsl(27, 100%, 94%)",
30
+ "200": "hsl(27, 100%, 84%)",
31
+ "300": "hsl(26, 100%, 74%)",
32
+ "400": "hsl(26, 100%, 64%)",
33
+ "500": "hsl(29, 100%, 50%)",
34
+ "600": "hsl(29, 100%, 38%)",
35
+ "700": "hsl(29, 100%, 27%)"
36
+ },
37
+ "green": {
38
+ "100": "hsl(126, 71%, 95%)",
39
+ "200": "hsl(128, 68%, 85%)",
40
+ "300": "hsl(131, 67%, 76%)",
41
+ "400": "hsl(131, 67%, 76%)",
42
+ "500": "hsl(145, 82%, 47%)",
43
+ "600": "hsl(145, 81%, 35%)",
44
+ "700": "hsl(145, 81%, 25%)"
45
+ },
46
+ "teal": {
47
+ "100": "hsl(165, 100%, 94%)",
48
+ "200": "hsl(165, 67%, 86%)",
49
+ "300": "hsl(167, 67%, 76%)",
50
+ "400": "hsl(168, 68%, 65%)",
51
+ "500": "hsl(171, 82%, 47%)",
52
+ "600": "hsl(171, 81%, 36%)",
53
+ "700": "hsl(171, 80%, 29%)"
54
+ },
55
+ "blue": {
56
+ "100": "hsl(224, 79%, 95%)",
57
+ "200": "hsl(222, 76%, 85%)",
58
+ "300": "hsl(220, 75%, 76%)",
59
+ "400": "hsl(217, 75%, 66%)",
60
+ "500": "hsl(209, 82%, 49%)",
61
+ "600": "hsl(209, 82%, 37%)",
62
+ "700": "hsl(209, 79%, 31%)"
63
+ },
64
+ "purple": {
65
+ "100": "hsl(269, 100%, 96%)",
66
+ "200": "hsl(267, 69%, 85%)",
67
+ "300": "hsl(266, 67%, 75%)",
68
+ "400": "hsl(264, 65%, 66%)",
69
+ "500": "hsl(263, 65%, 57%)",
70
+ "600": "hsl(263, 50%, 43%)",
71
+ "700": "hsl(263, 51%, 35%)"
72
+ },
73
+ "pink": {
74
+ "100": "hsl(300, 100%, 97%)",
75
+ "200": "hsl(300, 100%, 91%)",
76
+ "300": "hsl(300, 100%, 86%)",
77
+ "400": "hsl(300, 100%, 80%)",
78
+ "500": "hsl(300, 100%, 74%)",
79
+ "600": "hsl(300, 44%, 56%)",
80
+ "700": "hsl(300, 38%, 45%)"
81
+ },
82
+ "gray": {
83
+ "50": "hsl(0, 0%, 98%)",
84
+ "100": "hsl(210, 7%, 95%)",
85
+ "200": "hsl(228, 8%, 88%)",
86
+ "300": "hsl(222, 8%, 77%)",
87
+ "400": "hsl(219, 8%, 65%)",
88
+ "500": "hsl(218, 8%, 55%)",
89
+ "600": "hsl(221, 11%, 45%)",
90
+ "700": "hsl(222, 11%, 36%)",
91
+ "800": "hsl(223, 10%, 26%)",
92
+ "black": "hsl(0, 0%, 0%)",
93
+ "white": "hsl(0, 0%, 100%)"
94
+ },
95
+ "overlay": {
96
+ "dark": "hsla(0, 0%, 0%, 0.3)",
97
+ "light": "hsla(0, 0%, 0%, 0.05)"
98
+ },
99
+ "transparent": "hsla(0, 0%, 0%, 0)"
100
+ },
101
+ "font": {
102
+ "family": {
103
+ "normal": "HelveticaNeueeTextPro-Roman",
104
+ "medium": "HelveticaNeueeTextPro-Md",
105
+ "favorit": "FavoritStd-MediumExtended",
106
+ "display": "FavoritStd-MediumExtended",
107
+ "heading": "HelveticaNeueeTextPro-Md",
108
+ "body": "HelveticaNeueeTextPro-Roman"
109
+ },
110
+ "size": {
111
+ "x-small": "1.2rem",
112
+ "small": "1.4rem",
113
+ "medium": "1.6rem",
114
+ "large": "2rem",
115
+ "x-large": "2.4rem",
116
+ "xx-large": "3.2rem",
117
+ "xxx-large": "4rem",
118
+ "xxxx-large": "5.2rem"
119
+ },
120
+ "lineHeight": {
121
+ "tight": "1.2",
122
+ "small": "1.3",
123
+ "normal": "1.4",
124
+ "relaxed": "1.5",
125
+ "loose": "1.6"
126
+ },
127
+ "letterSpacing": {
128
+ "x-small": "-0.02em",
129
+ "small": "-0.01em",
130
+ "normal": 0,
131
+ "large": "0.01em",
132
+ "x-large": "0.02em"
133
+ }
134
+ },
135
+ "spacing": {
136
+ "x-small": "0.4rem",
137
+ "small": "0.8rem",
138
+ "medium": "1.6rem",
139
+ "large": "2.4rem",
140
+ "x-large": "3.2rem",
141
+ "xx-large": "4rem",
142
+ "xxx-large": "4.8rem"
143
+ }
144
+ }
package/build/base/variables.css ADDED
@@ -0,0 +1,108 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root {
6
+ --border-radius-xx-small: 0.4rem;
7
+ --border-width-thin: 0.1rem;
8
+ --color-yellow-100: hsl(60, 100%, 97%);
9
+ --color-yellow-200: hsl(58, 100%, 92%);
10
+ --color-yellow-300: hsl(60, 100%, 81%);
11
+ --color-yellow-400: hsl(60, 100%, 50%);
12
+ --color-yellow-500: hsl(54, 100%, 44%);
13
+ --color-yellow-600: hsl(49, 87%, 37%);
14
+ --color-red-100: hsl(7, 94%, 93%);
15
+ --color-red-200: hsl(351, 93%, 83%);
16
+ --color-red-300: hsl(4, 76%, 70%);
17
+ --color-red-400: hsl(0, 78%, 63%);
18
+ --color-red-500: hsl(2, 72%, 46%);
19
+ --color-red-600: hsl(9, 79%, 34%);
20
+ --color-red-700: hsl(2, 72%, 29%);
21
+ --color-orange-100: hsl(27, 100%, 94%);
22
+ --color-orange-200: hsl(27, 100%, 84%);
23
+ --color-orange-300: hsl(26, 100%, 74%);
24
+ --color-orange-400: hsl(26, 100%, 64%);
25
+ --color-orange-500: hsl(29, 100%, 50%);
26
+ --color-orange-600: hsl(29, 100%, 38%);
27
+ --color-orange-700: hsl(29, 100%, 27%);
28
+ --color-green-100: hsl(126, 71%, 95%);
29
+ --color-green-200: hsl(128, 68%, 85%);
30
+ --color-green-300: hsl(131, 67%, 76%);
31
+ --color-green-400: hsl(131, 67%, 76%);
32
+ --color-green-500: hsl(145, 82%, 47%);
33
+ --color-green-600: hsl(145, 81%, 35%);
34
+ --color-green-700: hsl(145, 81%, 25%);
35
+ --color-teal-100: hsl(165, 100%, 94%);
36
+ --color-teal-200: hsl(165, 67%, 86%);
37
+ --color-teal-300: hsl(167, 67%, 76%);
38
+ --color-teal-400: hsl(168, 68%, 65%);
39
+ --color-teal-500: hsl(171, 82%, 47%);
40
+ --color-teal-600: hsl(171, 81%, 36%);
41
+ --color-teal-700: hsl(171, 80%, 29%);
42
+ --color-blue-100: hsl(224, 79%, 95%);
43
+ --color-blue-200: hsl(222, 76%, 85%);
44
+ --color-blue-300: hsl(220, 75%, 76%);
45
+ --color-blue-400: hsl(217, 75%, 66%);
46
+ --color-blue-500: hsl(209, 82%, 49%);
47
+ --color-blue-600: hsl(209, 82%, 37%);
48
+ --color-blue-700: hsl(209, 79%, 31%);
49
+ --color-purple-100: hsl(269, 100%, 96%);
50
+ --color-purple-200: hsl(267, 69%, 85%);
51
+ --color-purple-300: hsl(266, 67%, 75%);
52
+ --color-purple-400: hsl(264, 65%, 66%);
53
+ --color-purple-500: hsl(263, 65%, 57%);
54
+ --color-purple-600: hsl(263, 50%, 43%);
55
+ --color-purple-700: hsl(263, 51%, 35%);
56
+ --color-pink-100: hsl(300, 100%, 97%);
57
+ --color-pink-200: hsl(300, 100%, 91%);
58
+ --color-pink-300: hsl(300, 100%, 86%);
59
+ --color-pink-400: hsl(300, 100%, 80%);
60
+ --color-pink-500: hsl(300, 100%, 74%);
61
+ --color-pink-600: hsl(300, 44%, 56%);
62
+ --color-pink-700: hsl(300, 38%, 45%);
63
+ --color-gray-50: hsl(0, 0%, 98%);
64
+ --color-gray-100: hsl(210, 7%, 95%);
65
+ --color-gray-200: hsl(228, 8%, 88%);
66
+ --color-gray-300: hsl(222, 8%, 77%);
67
+ --color-gray-400: hsl(219, 8%, 65%);
68
+ --color-gray-500: hsl(218, 8%, 55%);
69
+ --color-gray-600: hsl(221, 11%, 45%);
70
+ --color-gray-700: hsl(222, 11%, 36%);
71
+ --color-gray-800: hsl(223, 10%, 26%);
72
+ --color-gray-black: hsl(0, 0%, 0%);
73
+ --color-gray-white: hsl(0, 0%, 100%);
74
+ --color-overlay-dark: hsla(0, 0%, 0%, 0.3);
75
+ --color-overlay-light: hsla(0, 0%, 0%, 0.05);
76
+ --color-transparent: hsla(0, 0%, 0%, 0);
77
+ --font-family-normal: HelveticaNeueeTextPro-Roman;
78
+ --font-family-medium: HelveticaNeueeTextPro-Md;
79
+ --font-family-favorit: FavoritStd-MediumExtended;
80
+ --font-family-display: FavoritStd-MediumExtended;
81
+ --font-family-heading: HelveticaNeueeTextPro-Md;
82
+ --font-family-body: HelveticaNeueeTextPro-Roman;
83
+ --font-size-x-small: 1.2rem;
84
+ --font-size-small: 1.4rem;
85
+ --font-size-medium: 1.6rem;
86
+ --font-size-large: 2rem;
87
+ --font-size-x-large: 2.4rem;
88
+ --font-size-xx-large: 3.2rem;
89
+ --font-size-xxx-large: 4rem;
90
+ --font-size-xxxx-large: 5.2rem;
91
+ --font-line-height-tight: 1.2;
92
+ --font-line-height-small: 1.3;
93
+ --font-line-height-normal: 1.4;
94
+ --font-line-height-relaxed: 1.5;
95
+ --font-line-height-loose: 1.6;
96
+ --font-letter-spacing-x-small: -0.02em;
97
+ --font-letter-spacing-small: -0.01em;
98
+ --font-letter-spacing-normal: 0;
99
+ --font-letter-spacing-large: 0.01em;
100
+ --font-letter-spacing-x-large: 0.02em;
101
+ --spacing-x-small: 0.4rem;
102
+ --spacing-small: 0.8rem;
103
+ --spacing-medium: 1.6rem;
104
+ --spacing-large: 2.4rem;
105
+ --spacing-x-large: 3.2rem;
106
+ --spacing-xx-large: 4rem;
107
+ --spacing-xxx-large: 4.8rem;
108
+ }
package/build/globals/tokens.es6.js ADDED
@@ -0,0 +1,9 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ export const a11yMinTouchTarget = "48px";
6
+ export const breakpointSmall = "480px";
7
+ export const breakpointMedium = "768px"; // Tablets
8
+ export const breakpointLarge = "1224px"; // Small laptops
9
+ export const breakpointXLarge = "1440px"; // Standard laptops
package/build/globals/tokens.json ADDED
@@ -0,0 +1,11 @@
1
+ {
2
+ "a11y": {
3
+ "minTouchTarget": "48px"
4
+ },
5
+ "breakpoint": {
6
+ "small": "480px",
7
+ "medium": "768px",
8
+ "large": "1224px",
9
+ "x-large": "1440px"
10
+ }
11
+ }
package/build/globals/variables.css ADDED
@@ -0,0 +1,11 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root {
6
+ --a11y-min-touch-target: 48px;
7
+ --breakpoint-small: 480px;
8
+ --breakpoint-medium: 768px; /** Tablets */
9
+ --breakpoint-large: 1224px; /** Small laptops */
10
+ --breakpoint-x-large: 1440px; /** Standard laptops */
11
+ }