suus-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.
- package/README.md +1 -0
- package/dist/tokens.css +100 -0
- package/dist/tokens.js +99 -0
- package/dist/tokens.json +160 -0
- package/package.json +32 -0
package/README.md
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
# suus-design-tokens
|
package/dist/tokens.css
ADDED
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly, this file was auto-generated.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
:root {
|
|
6
|
+
--button-padding: 12px;
|
|
7
|
+
--icon-size-small: 16px;
|
|
8
|
+
--icon-size-medium: 24px;
|
|
9
|
+
--icon-size-large: 32px;
|
|
10
|
+
--tile-border-radius-small: 12px;
|
|
11
|
+
--tile-border-radius-large: 24px;
|
|
12
|
+
--tile-border-radius-huge: 100vw;
|
|
13
|
+
--tile-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
|
|
14
|
+
--border-width-thin: 0.5px;
|
|
15
|
+
--border-width-default: 1px;
|
|
16
|
+
--border-width-thick: 2px;
|
|
17
|
+
--color-brand-primary-midnight: #5c6814;
|
|
18
|
+
--color-brand-primary-dark: #8fa02a;
|
|
19
|
+
--color-brand-primary-default: #afc33b;
|
|
20
|
+
--color-brand-primary-light: #d1da96;
|
|
21
|
+
--color-brand-primary-bright: #e7f880;
|
|
22
|
+
--color-brand-secondary-midnight: #97771d;
|
|
23
|
+
--color-brand-secondary-dark: #b58f24;
|
|
24
|
+
--color-brand-secondary-default: #d9ab29;
|
|
25
|
+
--color-brand-secondary-light: #eec348;
|
|
26
|
+
--color-brand-secondary-bright: #f9db86;
|
|
27
|
+
--color-brand-black: #272727;
|
|
28
|
+
--color-brand-dark-gray: #5b5a5a;
|
|
29
|
+
--color-brand-gray: #c2bfbf;
|
|
30
|
+
--color-brand-light-gray: #e1e0df;
|
|
31
|
+
--color-brand-white: #ffffff;
|
|
32
|
+
--color-brand-light: #d6e66c;
|
|
33
|
+
--color-product-sugarcane: #a7b325;
|
|
34
|
+
--color-product-tamarind: #f8a702;
|
|
35
|
+
--color-product-guava: #7441aa;
|
|
36
|
+
--color-product-icetea: #e14a4a;
|
|
37
|
+
--color-status-success: #99af17;
|
|
38
|
+
--color-status-info: #6a7a0a;
|
|
39
|
+
--color-status-warning: #f9db86;
|
|
40
|
+
--color-status-error: #ea720e;
|
|
41
|
+
--color-disabled: #cecece;
|
|
42
|
+
--color-border-default: #cecece;
|
|
43
|
+
--color-border-left-top: #cecece;
|
|
44
|
+
--color-border-right-bottom: #b5b5b5;
|
|
45
|
+
--color-hover-default: #bcca63;
|
|
46
|
+
--color-hover-inverse: #f3f4f0;
|
|
47
|
+
--radius-small: 8px;
|
|
48
|
+
--radius-default: 16px;
|
|
49
|
+
--radius-large: 24px;
|
|
50
|
+
--radius-round: 100vw;
|
|
51
|
+
--shadow-card: 0 18px 45px rgba(15, 23, 42, 0.12);
|
|
52
|
+
--spacing-tiny: 8px;
|
|
53
|
+
--spacing-small: 16px;
|
|
54
|
+
--spacing-default: 24px;
|
|
55
|
+
--spacing-large: 32px;
|
|
56
|
+
--spacing-huge: 40px;
|
|
57
|
+
--spacing-very-huge: 60px;
|
|
58
|
+
--breakpoint-smartphone: 480px;
|
|
59
|
+
--breakpoint-tablet: 768px;
|
|
60
|
+
--breakpoint-desktop: 1200px;
|
|
61
|
+
--breakpoint-desktop-wide: 1600px;
|
|
62
|
+
--font-family-sans-serif: OpenSans;
|
|
63
|
+
--font-family-serif: Baskerville;
|
|
64
|
+
--font-size-tiny: 14px;
|
|
65
|
+
--font-size-small: 16px;
|
|
66
|
+
--font-size-standard: 20px;
|
|
67
|
+
--font-size-large: 24px;
|
|
68
|
+
--font-size-title: 2rem;
|
|
69
|
+
--font-size-subtitle: 1.3rem;
|
|
70
|
+
--font-style-normal: normal;
|
|
71
|
+
--font-style-italic: italic;
|
|
72
|
+
--font-weight-light: 300;
|
|
73
|
+
--font-weight-normal: 400;
|
|
74
|
+
--font-weight-bold: 700;
|
|
75
|
+
--font-letter-spacing-default: 0.016rem;
|
|
76
|
+
--button-border-width: var(--border-width-default);
|
|
77
|
+
--button-radius: var(--radius-round);
|
|
78
|
+
--input-border-width: var(--border-width-default);
|
|
79
|
+
--input-padding: var(--spacing-small);
|
|
80
|
+
--input-radius: var(--radius-small);
|
|
81
|
+
--input-background-color: var(--color-brand-white);
|
|
82
|
+
--input-font-size: var(--font-size-small);
|
|
83
|
+
--panel-background-color: var(--color-brand-light-gray);
|
|
84
|
+
--panel-padding-desktop: var(--spacing-large);
|
|
85
|
+
--panel-padding-mobile: var(--spacing-small);
|
|
86
|
+
--tile-background-color-left-top: var(--color-brand-white);
|
|
87
|
+
--tile-background-color-right-bottom: var(--color-brand-white);
|
|
88
|
+
--tile-border-color-left-top: var(--color-border-default);
|
|
89
|
+
--tile-border-color-right-bottom: var(--color-border-default);
|
|
90
|
+
--tile-padding: var(--spacing-small);
|
|
91
|
+
--color-text-dark: var(--color-brand-black);
|
|
92
|
+
--color-text-light: var(--color-brand-white);
|
|
93
|
+
--color-text-colored: var(--color-status-info);
|
|
94
|
+
--color-link: var(--color-status-success);
|
|
95
|
+
--icon-color-default: var(--color-text-dark);
|
|
96
|
+
--icon-color-glassy: var(--color-text-light);
|
|
97
|
+
--icon-color-text: var(--color-text-dark);
|
|
98
|
+
--icon-color-text-glassy: var(--color-text-light);
|
|
99
|
+
--input-text-color: var(--color-text-dark);
|
|
100
|
+
}
|
package/dist/tokens.js
ADDED
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Do not edit directly, this file was auto-generated.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
export const ButtonBorderWidth = "1px";
|
|
6
|
+
export const ButtonPadding = "12px";
|
|
7
|
+
export const ButtonRadius = "100vw";
|
|
8
|
+
export const IconSizeSmall = "16px";
|
|
9
|
+
export const IconSizeMedium = "24px";
|
|
10
|
+
export const IconSizeLarge = "32px";
|
|
11
|
+
export const IconColorDefault = "#272727";
|
|
12
|
+
export const IconColorGlassy = "#ffffff";
|
|
13
|
+
export const IconColorText = "#272727";
|
|
14
|
+
export const IconColorTextGlassy = "#ffffff";
|
|
15
|
+
export const InputBorderWidth = "1px";
|
|
16
|
+
export const InputPadding = "16px";
|
|
17
|
+
export const InputRadius = "8px";
|
|
18
|
+
export const InputBackgroundColor = "#ffffff";
|
|
19
|
+
export const InputTextColor = "#272727";
|
|
20
|
+
export const InputFontSize = "16px";
|
|
21
|
+
export const PanelBackgroundColor = "#e1e0df";
|
|
22
|
+
export const PanelPaddingDesktop = "32px";
|
|
23
|
+
export const PanelPaddingMobile = "16px";
|
|
24
|
+
export const TileBackgroundColorLeftTop = "#ffffff";
|
|
25
|
+
export const TileBackgroundColorRightBottom = "#ffffff";
|
|
26
|
+
export const TileBorderColorLeftTop = "#cecece";
|
|
27
|
+
export const TileBorderColorRightBottom = "#cecece";
|
|
28
|
+
export const TileBorderRadiusSmall = "12px";
|
|
29
|
+
export const TileBorderRadiusLarge = "24px";
|
|
30
|
+
export const TileBorderRadiusHuge = "100vw";
|
|
31
|
+
export const TileShadow =
|
|
32
|
+
"0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06)";
|
|
33
|
+
export const TilePadding = "16px";
|
|
34
|
+
export const BorderWidthThin = "0.5px";
|
|
35
|
+
export const BorderWidthDefault = "1px";
|
|
36
|
+
export const BorderWidthThick = "2px";
|
|
37
|
+
export const ColorBrandPrimaryMidnight = "#5c6814";
|
|
38
|
+
export const ColorBrandPrimaryDark = "#8fa02a";
|
|
39
|
+
export const ColorBrandPrimaryDefault = "#afc33b";
|
|
40
|
+
export const ColorBrandPrimaryLight = "#d1da96";
|
|
41
|
+
export const ColorBrandPrimaryBright = "#e7f880";
|
|
42
|
+
export const ColorBrandSecondaryMidnight = "#97771d";
|
|
43
|
+
export const ColorBrandSecondaryDark = "#b58f24";
|
|
44
|
+
export const ColorBrandSecondaryDefault = "#d9ab29";
|
|
45
|
+
export const ColorBrandSecondaryLight = "#eec348";
|
|
46
|
+
export const ColorBrandSecondaryBright = "#f9db86";
|
|
47
|
+
export const ColorBrandBlack = "#272727";
|
|
48
|
+
export const ColorBrandDarkGray = "#5b5a5a";
|
|
49
|
+
export const ColorBrandGray = "#c2bfbf";
|
|
50
|
+
export const ColorBrandLightGray = "#e1e0df";
|
|
51
|
+
export const ColorBrandWhite = "#ffffff";
|
|
52
|
+
export const ColorBrandLight = "#d6e66c";
|
|
53
|
+
export const ColorProductSugarcane = "#a7b325";
|
|
54
|
+
export const ColorProductTamarind = "#f8a702";
|
|
55
|
+
export const ColorProductGuava = "#7441aa";
|
|
56
|
+
export const ColorProductIcetea = "#e14a4a";
|
|
57
|
+
export const ColorStatusSuccess = "#99af17";
|
|
58
|
+
export const ColorStatusInfo = "#6a7a0a";
|
|
59
|
+
export const ColorStatusWarning = "#f9db86";
|
|
60
|
+
export const ColorStatusError = "#ea720e";
|
|
61
|
+
export const ColorTextDark = "#272727";
|
|
62
|
+
export const ColorTextLight = "#ffffff";
|
|
63
|
+
export const ColorTextColored = "#6a7a0a";
|
|
64
|
+
export const ColorDisabled = "#cecece";
|
|
65
|
+
export const ColorBorderDefault = "#cecece";
|
|
66
|
+
export const ColorBorderLeftTop = "#cecece";
|
|
67
|
+
export const ColorBorderRightBottom = "#b5b5b5";
|
|
68
|
+
export const ColorLink = "#99af17";
|
|
69
|
+
export const ColorHoverDefault = "#bcca63";
|
|
70
|
+
export const ColorHoverInverse = "#f3f4f0";
|
|
71
|
+
export const RadiusSmall = "8px";
|
|
72
|
+
export const RadiusDefault = "16px";
|
|
73
|
+
export const RadiusLarge = "24px";
|
|
74
|
+
export const RadiusRound = "100vw";
|
|
75
|
+
export const ShadowCard = "0 18px 45px rgba(15, 23, 42, 0.12)";
|
|
76
|
+
export const SpacingTiny = "8px";
|
|
77
|
+
export const SpacingSmall = "16px";
|
|
78
|
+
export const SpacingDefault = "24px";
|
|
79
|
+
export const SpacingLarge = "32px";
|
|
80
|
+
export const SpacingHuge = "40px";
|
|
81
|
+
export const SpacingVeryHuge = "60px";
|
|
82
|
+
export const BreakpointSmartphone = "480px";
|
|
83
|
+
export const BreakpointTablet = "768px";
|
|
84
|
+
export const BreakpointDesktop = "1200px";
|
|
85
|
+
export const BreakpointDesktopWide = "1600px";
|
|
86
|
+
export const FontFamilySansSerif = "OpenSans";
|
|
87
|
+
export const FontFamilySerif = "Baskerville";
|
|
88
|
+
export const FontSizeTiny = "14px";
|
|
89
|
+
export const FontSizeSmall = "16px";
|
|
90
|
+
export const FontSizeStandard = "20px";
|
|
91
|
+
export const FontSizeLarge = "24px";
|
|
92
|
+
export const FontSizeTitle = "2rem";
|
|
93
|
+
export const FontSizeSubtitle = "1.3rem";
|
|
94
|
+
export const FontStyleNormal = "normal";
|
|
95
|
+
export const FontStyleItalic = "italic";
|
|
96
|
+
export const FontWeightLight = 300;
|
|
97
|
+
export const FontWeightNormal = 400;
|
|
98
|
+
export const FontWeightBold = 700;
|
|
99
|
+
export const FontLetterSpacingDefault = "0.016rem";
|
package/dist/tokens.json
ADDED
|
@@ -0,0 +1,160 @@
|
|
|
1
|
+
{
|
|
2
|
+
"button": {
|
|
3
|
+
"border-width": "1px",
|
|
4
|
+
"padding": "12px",
|
|
5
|
+
"radius": "100vw"
|
|
6
|
+
},
|
|
7
|
+
"icon": {
|
|
8
|
+
"size": {
|
|
9
|
+
"small": "16px",
|
|
10
|
+
"medium": "24px",
|
|
11
|
+
"large": "32px"
|
|
12
|
+
},
|
|
13
|
+
"color": {
|
|
14
|
+
"default": "#272727",
|
|
15
|
+
"glassy": "#ffffff",
|
|
16
|
+
"text": "#272727",
|
|
17
|
+
"text-glassy": "#ffffff"
|
|
18
|
+
}
|
|
19
|
+
},
|
|
20
|
+
"input": {
|
|
21
|
+
"border-width": "1px",
|
|
22
|
+
"padding": "16px",
|
|
23
|
+
"radius": "8px",
|
|
24
|
+
"background-color": "#ffffff",
|
|
25
|
+
"text-color": "#272727",
|
|
26
|
+
"font-size": "16px"
|
|
27
|
+
},
|
|
28
|
+
"panel": {
|
|
29
|
+
"background-color": "#e1e0df",
|
|
30
|
+
"padding": {
|
|
31
|
+
"desktop": "32px",
|
|
32
|
+
"mobile": "16px"
|
|
33
|
+
}
|
|
34
|
+
},
|
|
35
|
+
"tile": {
|
|
36
|
+
"background-color": {
|
|
37
|
+
"left-top": "#ffffff",
|
|
38
|
+
"right-bottom": "#ffffff"
|
|
39
|
+
},
|
|
40
|
+
"border-color": {
|
|
41
|
+
"left-top": "#cecece",
|
|
42
|
+
"right-bottom": "#cecece"
|
|
43
|
+
},
|
|
44
|
+
"border-radius": {
|
|
45
|
+
"small": "12px",
|
|
46
|
+
"large": "24px",
|
|
47
|
+
"huge": "100vw"
|
|
48
|
+
},
|
|
49
|
+
"shadow": "0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06)",
|
|
50
|
+
"padding": "16px"
|
|
51
|
+
},
|
|
52
|
+
"border": {
|
|
53
|
+
"width": {
|
|
54
|
+
"thin": "0.5px",
|
|
55
|
+
"default": "1px",
|
|
56
|
+
"thick": "2px"
|
|
57
|
+
}
|
|
58
|
+
},
|
|
59
|
+
"color": {
|
|
60
|
+
"brand": {
|
|
61
|
+
"primary": {
|
|
62
|
+
"midnight": "#5c6814",
|
|
63
|
+
"dark": "#8fa02a",
|
|
64
|
+
"default": "#afc33b",
|
|
65
|
+
"light": "#d1da96",
|
|
66
|
+
"bright": "#e7f880"
|
|
67
|
+
},
|
|
68
|
+
"secondary": {
|
|
69
|
+
"midnight": "#97771d",
|
|
70
|
+
"dark": "#b58f24",
|
|
71
|
+
"default": "#d9ab29",
|
|
72
|
+
"light": "#eec348",
|
|
73
|
+
"bright": "#f9db86"
|
|
74
|
+
},
|
|
75
|
+
"black": "#272727",
|
|
76
|
+
"dark-gray": "#5b5a5a",
|
|
77
|
+
"gray": "#c2bfbf",
|
|
78
|
+
"light-gray": "#e1e0df",
|
|
79
|
+
"white": "#ffffff",
|
|
80
|
+
"light": "#d6e66c"
|
|
81
|
+
},
|
|
82
|
+
"product": {
|
|
83
|
+
"sugarcane": "#a7b325",
|
|
84
|
+
"tamarind": "#f8a702",
|
|
85
|
+
"guava": "#7441aa",
|
|
86
|
+
"icetea": "#e14a4a"
|
|
87
|
+
},
|
|
88
|
+
"status": {
|
|
89
|
+
"success": "#99af17",
|
|
90
|
+
"info": "#6a7a0a",
|
|
91
|
+
"warning": "#f9db86",
|
|
92
|
+
"error": "#ea720e"
|
|
93
|
+
},
|
|
94
|
+
"text": {
|
|
95
|
+
"dark": "#272727",
|
|
96
|
+
"light": "#ffffff",
|
|
97
|
+
"colored": "#6a7a0a"
|
|
98
|
+
},
|
|
99
|
+
"disabled": "#cecece",
|
|
100
|
+
"border": {
|
|
101
|
+
"default": "#cecece",
|
|
102
|
+
"left-top": "#cecece",
|
|
103
|
+
"right-bottom": "#b5b5b5"
|
|
104
|
+
},
|
|
105
|
+
"link": "#99af17",
|
|
106
|
+
"hover": {
|
|
107
|
+
"default": "#bcca63",
|
|
108
|
+
"inverse": "#f3f4f0"
|
|
109
|
+
}
|
|
110
|
+
},
|
|
111
|
+
"radius": {
|
|
112
|
+
"small": "8px",
|
|
113
|
+
"default": "16px",
|
|
114
|
+
"large": "24px",
|
|
115
|
+
"round": "100vw"
|
|
116
|
+
},
|
|
117
|
+
"shadow": {
|
|
118
|
+
"card": "0 18px 45px rgba(15, 23, 42, 0.12)"
|
|
119
|
+
},
|
|
120
|
+
"spacing": {
|
|
121
|
+
"tiny": "8px",
|
|
122
|
+
"small": "16px",
|
|
123
|
+
"default": "24px",
|
|
124
|
+
"large": "32px",
|
|
125
|
+
"huge": "40px",
|
|
126
|
+
"very-huge": "60px"
|
|
127
|
+
},
|
|
128
|
+
"breakpoint": {
|
|
129
|
+
"smartphone": "480px",
|
|
130
|
+
"tablet": "768px",
|
|
131
|
+
"desktop": "1200px",
|
|
132
|
+
"desktop-wide": "1600px"
|
|
133
|
+
},
|
|
134
|
+
"font": {
|
|
135
|
+
"family": {
|
|
136
|
+
"sans-serif": "OpenSans",
|
|
137
|
+
"serif": "Baskerville"
|
|
138
|
+
},
|
|
139
|
+
"size": {
|
|
140
|
+
"tiny": "14px",
|
|
141
|
+
"small": "16px",
|
|
142
|
+
"standard": "20px",
|
|
143
|
+
"large": "24px",
|
|
144
|
+
"title": "2rem",
|
|
145
|
+
"subtitle": "1.3rem"
|
|
146
|
+
},
|
|
147
|
+
"style": {
|
|
148
|
+
"normal": "normal",
|
|
149
|
+
"italic": "italic"
|
|
150
|
+
},
|
|
151
|
+
"weight": {
|
|
152
|
+
"light": 300,
|
|
153
|
+
"normal": 400,
|
|
154
|
+
"bold": 700
|
|
155
|
+
},
|
|
156
|
+
"letter-spacing": {
|
|
157
|
+
"default": "0.016rem"
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "suus-design-tokens",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "",
|
|
5
|
+
"keywords": [],
|
|
6
|
+
"author": "",
|
|
7
|
+
"license": "ISC",
|
|
8
|
+
"main": "index.js",
|
|
9
|
+
"type": "module",
|
|
10
|
+
"files": ["dist"],
|
|
11
|
+
"exports": {
|
|
12
|
+
"./css": "./dist/tokens.css",
|
|
13
|
+
"./tokens": "./dist/tokens.js",
|
|
14
|
+
"./tokens.json": "./dist/tokens.json"
|
|
15
|
+
},
|
|
16
|
+
"scripts": {
|
|
17
|
+
"test": "echo \"Error: no test specified\" && exit 1",
|
|
18
|
+
"build": "style-dictionary build --config style-dictionary.config.mjs",
|
|
19
|
+
"prepublishOnly": "npm run build"
|
|
20
|
+
},
|
|
21
|
+
"repository": {
|
|
22
|
+
"type": "git",
|
|
23
|
+
"url": "git+https://github.com/Hettlingen/suus-design-tokens.git"
|
|
24
|
+
},
|
|
25
|
+
"bugs": {
|
|
26
|
+
"url": "https://github.com/Hettlingen/suus-design-tokens/issues"
|
|
27
|
+
},
|
|
28
|
+
"homepage": "https://github.com/Hettlingen/suus-design-tokens#readme",
|
|
29
|
+
"devDependencies": {
|
|
30
|
+
"style-dictionary": "^5.4.0"
|
|
31
|
+
}
|
|
32
|
+
}
|