suus-design-tokens 1.0.2 → 1.0.8

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 (4) hide show
  1. package/dist/tokens.css +158 -91
  2. package/dist/tokens.js +158 -92
  3. package/dist/tokens.json +240 -127
  4. package/package.json +4 -3
package/dist/tokens.css CHANGED
@@ -3,98 +3,165 @@
3
3
  */
4
4
 
5
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);
6
+ --colors-gold-brand-secondary-bright: #f9db86;
7
+ --colors-gold-brand-secondary-light: #eec348;
8
+ --colors-gold-brand-secondary: #d9ab29;
9
+ --colors-gold-brand-secondary-midnight: #97771d;
10
+ --colors-gold-brand-secondary-dark: #b58f24;
11
+ --colors-grey-brand-white: #ffffff;
12
+ --colors-grey-brand-bright-gray: #eeeeee;
13
+ --colors-grey-brand-light-gray: #dfdfdf;
14
+ --colors-grey-brand-gray: #c2bfbf;
15
+ --colors-grey-brand-dark-gray: #5b5a5a;
16
+ --colors-grey-brand-black: #272727;
17
+ --colors-grey-brand-white-transparent-40: rgba(255, 255, 255, 0.4);
18
+ --colors-grey-brand-white-transparent-70: rgba(255, 255, 255, 0.7);
19
+ --colors-status-error: #de6565;
20
+ --colors-green-brand-primary-bright: #e5fc5a;
21
+ --colors-green-brand-primary-light: #d0e646;
22
+ --colors-green-brand-primary: #afc33b;
23
+ --colors-green-brand-primary-dark: #8fa02a;
24
+ --colors-green-brand-primary-midnight: #5c6814;
25
+ --colors-juice-sugarcane: #9bad30;
26
+ --colors-juice-tamarind: #da8e33;
27
+ --colors-juice-guava: #7b4e80;
28
+ --colors-juice-icetea: #d83a4f;
52
29
  --spacing-tiny: 8px;
53
30
  --spacing-small: 16px;
54
31
  --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);
32
+ --spacing-large: 40px;
33
+ --spacing-huge: 60px;
34
+ --radius-small: 8px;
35
+ --radius-default: 16px;
36
+ --radius-large: 24px;
37
+ --radius-huge: 50px;
38
+ --borders-thin: 0.5px;
39
+ --borders-default: 1px;
40
+ --borders-thick: 2px;
41
+ --typeface-font-family-header: sora;
42
+ --typeface-font-family-body: sora;
43
+ --typeface-font-family-statement: sora;
44
+ --typeface-font-family-form: sora;
45
+ --typeface-font-weight-regular-400: 400;
46
+ --typeface-font-weight-bold-700: 700;
47
+ --typeface-font-weight-regular-500: 500;
48
+ --typeface-font-size-small-16: 0.889rem;
49
+ --typeface-font-size-default-20: 1.111rem;
50
+ --typeface-font-size-large-24: 1.333rem;
51
+ --typeface-font-size-huge-48: 2.667rem;
52
+ --typeface-font-size-extra-huge-72: 4rem;
53
+ --typeface-font-size-extra-large-36: 2rem;
54
+ --typeface-letter-spacing-default: 0.006rem;
55
+ --typeface-letter-spacing-large: 0.011rem;
56
+ --typeface-line-height-default-120: 6.667rem;
57
+ --typeface-line-height-large-150: 8.333rem;
58
+ --colors-status-success: var(--colors-green-brand-primary);
59
+ --colors-status-warning: var(--colors-gold-brand-secondary);
60
+ --colors-status-info: var(--colors-green-brand-primary);
61
+ --panel-background-transparent: var(--colors-grey-brand-white-transparent-70);
62
+ --panel-background-default: var(--colors-grey-brand-white);
63
+ --panel-background-gradient-bottom-right-green: var(--colors-green-brand-primary-midnight);
64
+ --panel-background-gradient-top-left-green: var(--colors-green-brand-primary-light);
65
+ --panel-background-gradient-top-left-white: var(--colors-grey-brand-white-transparent-70);
66
+ --panel-background-gradient-bottom-right-white: var(--colors-grey-brand-white-transparent-40);
67
+ --panel-background-gradient-middle-green: var(--colors-green-brand-primary-dark);
68
+ --panel-text-title: var(--colors-green-brand-primary-dark);
69
+ --panel-text-title-glassy: var(--colors-grey-brand-white);
70
+ --panel-border-color: var(--colors-grey-brand-light-gray);
71
+ --panel-border-width: var(--borders-default);
72
+ --panel-radius-default: var(--radius-large);
73
+ --panel-spacing-top-bottom: var(--spacing-huge);
74
+ --panel-spacing-title-content: var(--spacing-large);
75
+ --panel-spacing-right-left: var(--spacing-huge);
76
+ --tile-background-default: var(--colors-grey-brand-white);
77
+ --tile-text-title: var(--colors-grey-brand-dark-gray);
78
+ --tile-text-content: var(--colors-grey-brand-dark-gray);
79
+ --tile-border-color: var(--colors-grey-brand-gray);
80
+ --tile-border-width-default: var(--borders-default);
81
+ --tile-border-width-thick: var(--borders-thick);
82
+ --tile-radius-default: var(--radius-default);
83
+ --button-background-disabled: var(--colors-grey-brand-light-gray);
84
+ --button-background-enabled: var(--colors-green-brand-primary);
85
+ --button-background-enabled-gradient-from: var(--colors-green-brand-primary-light);
86
+ --button-background-enabled-gradient-middle: var(--colors-green-brand-primary-dark);
87
+ --button-background-enabled-gradient-to: var(--colors-green-brand-primary-midnight);
88
+ --button-background-inverse: var(--colors-grey-brand-white);
89
+ --button-background-hover: var(--colors-green-brand-primary-dark);
90
+ --button-text-label: var(--colors-grey-brand-white);
91
+ --button-text-label-inverse: var(--colors-green-brand-primary-dark);
92
+ --button-text-disabled: var(--colors-grey-brand-gray);
93
+ --button-border-color-default: var(--colors-green-brand-primary);
94
+ --button-border-color-disabled: var(--colors-grey-brand-gray);
95
+ --button-border-color-selected: var(--colors-green-brand-primary-dark);
96
+ --button-border-color-hover: var(--colors-green-brand-primary-dark);
97
+ --button-border-width-default: var(--borders-default);
98
+ --button-radius: var(--radius-huge);
99
+ --form-background-white: var(--colors-grey-brand-white);
100
+ --form-background-glassy: var(--colors-grey-brand-white-transparent-40);
101
+ --form-background-disabled: var(--colors-grey-brand-bright-gray);
102
+ --form-background-gray: var(--colors-grey-brand-light-gray);
103
+ --form-border-color-disabled: var(--colors-grey-brand-light-gray);
104
+ --form-border-color-selected-dark: var(--colors-green-brand-primary-dark);
105
+ --form-border-color-error: var(--colors-status-error);
106
+ --form-border-color-default: var(--colors-green-brand-primary-dark);
107
+ --form-border-color-selected-glassy: var(--colors-grey-brand-white);
108
+ --form-border-color-selected-light: var(--colors-green-brand-primary);
109
+ --form-border-width-default: var(--borders-default);
110
+ --form-border-width-selected: var(--borders-default);
111
+ --form-radius-default: var(--radius-default);
112
+ --form-text-label: var(--colors-grey-brand-dark-gray);
113
+ --form-text-placeholder: var(--colors-grey-brand-gray);
114
+ --form-text-content: var(--colors-grey-brand-dark-gray);
115
+ --form-text-disabled: var(--colors-grey-brand-light-gray);
116
+ --form-text-error: var(--colors-status-error);
117
+ --form-text-label-glassy: var(--colors-grey-brand-white);
118
+ --form-text-placeholder-glassy: var(--colors-grey-brand-light-gray);
119
+ --form-text-content-glassy: var(--colors-grey-brand-white);
120
+ --snackbar-background-error: var(--colors-status-error);
121
+ --snackbar-border-color-error: var(--colors-status-error);
122
+ --snackbar-border-width-default: var(--borders-thick);
123
+ --snackbar-text-default: var(--colors-grey-brand-white);
124
+ --icon-inverse-selected: var(--colors-green-brand-primary-dark);
125
+ --icon-default: var(--colors-green-brand-primary-dark);
126
+ --icon-inverse: var(--colors-grey-brand-white);
127
+ --icon-default-selected: var(--colors-grey-brand-white);
128
+ --icon-text-default: var(--colors-green-brand-primary-dark);
129
+ --icon-text-glassy: var(--colors-grey-brand-white);
130
+ --text-title-default: var(--colors-grey-brand-dark-gray);
131
+ --text-title-glassy: var(--colors-grey-brand-white);
132
+ --text-content-text: var(--colors-grey-brand-dark-gray);
133
+ --text-content-text-light: var(--colors-grey-brand-light-gray);
134
+ --text-content-text-white: var(--colors-grey-brand-white);
135
+ --text-messages-error: var(--colors-status-error);
136
+ --menu-hover: var(--colors-green-brand-primary-light);
137
+ --menu-text-selected: var(--colors-green-brand-primary-light);
138
+ --menu-flyout-gradient-to: var(--colors-green-brand-primary-midnight);
139
+ --menu-flyout-gradient-from: var(--colors-green-brand-primary-light);
140
+ --menu-background: var(--colors-grey-brand-white);
141
+ --menu-dark: var(--colors-green-brand-primary-midnight);
142
+ --illustrations-default: var(--colors-green-brand-primary);
143
+ --illustrations-light: var(--colors-green-brand-primary-bright);
144
+ --stepper-dot: var(--colors-green-brand-primary);
145
+ --stepper-border-dot: var(--colors-grey-brand-light-gray);
146
+ --stepper-border-dot-selected: var(--colors-green-brand-primary-dark);
147
+ --stepper-line: var(--colors-green-brand-primary);
148
+ --stepper-line-disabled: var(--colors-grey-brand-light-gray);
149
+ --form-border-color-success: var(--colors-status-success);
150
+ --form-border-color-warning: var(--colors-status-warning);
151
+ --form-text-success: var(--colors-status-success);
152
+ --form-text-warning: var(--colors-status-warning);
153
+ --form-text-info: var(--colors-status-info);
154
+ --snackbar-background-warning: var(--colors-status-warning);
155
+ --snackbar-background-info: var(--colors-status-info);
156
+ --snackbar-background-success: var(--colors-status-success);
157
+ --snackbar-border-color-success: var(--colors-status-success);
158
+ --snackbar-border-color-warning: var(--colors-status-warning);
159
+ --snackbar-border-color-info: var(--colors-status-info);
160
+ --icon-disabled: var(--form-text-disabled);
161
+ --text-messages-info: var(--colors-status-info);
162
+ --text-messages-warning: var(--colors-status-warning);
163
+ --text-messages-success: var(--colors-status-success);
164
+ --menu-white: var(--form-text-label-glassy);
165
+ --stepper-label: var(--form-text-label);
166
+ --stepper-dot-number: var(--text-content-text-white);
100
167
  }
package/dist/tokens.js CHANGED
@@ -2,98 +2,164 @@
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
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)";
5
+ export const ColorsGoldBrandSecondaryBright = "#f9db86";
6
+ export const ColorsGoldBrandSecondaryLight = "#eec348";
7
+ export const ColorsGoldBrandSecondary = "#d9ab29";
8
+ export const ColorsGoldBrandSecondaryMidnight = "#97771d";
9
+ export const ColorsGoldBrandSecondaryDark = "#b58f24";
10
+ export const ColorsGreyBrandWhite = "#ffffff";
11
+ export const ColorsGreyBrandBrightGray = "#eeeeee";
12
+ export const ColorsGreyBrandLightGray = "#dfdfdf";
13
+ export const ColorsGreyBrandGray = "#c2bfbf";
14
+ export const ColorsGreyBrandDarkGray = "#5b5a5a";
15
+ export const ColorsGreyBrandBlack = "#272727";
16
+ export const ColorsGreyBrandWhiteTransparent40 = "#ffffff66";
17
+ export const ColorsGreyBrandWhiteTransparent70 = "#ffffffb3";
18
+ export const ColorsStatusSuccess = "#afc33b";
19
+ export const ColorsStatusWarning = "#d9ab29";
20
+ export const ColorsStatusError = "#de6565";
21
+ export const ColorsStatusInfo = "#afc33b";
22
+ export const ColorsGreenBrandPrimaryBright = "#e5fc5a";
23
+ export const ColorsGreenBrandPrimaryLight = "#d0e646";
24
+ export const ColorsGreenBrandPrimary = "#afc33b";
25
+ export const ColorsGreenBrandPrimaryDark = "#8fa02a";
26
+ export const ColorsGreenBrandPrimaryMidnight = "#5c6814";
27
+ export const ColorsJuiceSugarcane = "#9bad30";
28
+ export const ColorsJuiceTamarind = "#da8e33";
29
+ export const ColorsJuiceGuava = "#7b4e80";
30
+ export const ColorsJuiceIcetea = "#d83a4f";
76
31
  export const SpacingTiny = "8px";
77
32
  export const SpacingSmall = "16px";
78
33
  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";
34
+ export const SpacingLarge = "40px";
35
+ export const SpacingHuge = "60px";
36
+ export const RadiusSmall = "8px";
37
+ export const RadiusDefault = "16px";
38
+ export const RadiusLarge = "24px";
39
+ export const RadiusHuge = "50px";
40
+ export const BordersThin = "0.5px";
41
+ export const BordersDefault = "1px";
42
+ export const BordersThick = "2px";
43
+ export const PanelBackgroundTransparent = "#ffffffb3";
44
+ export const PanelBackgroundDefault = "#ffffff";
45
+ export const PanelBackgroundGradientBottomRightGreen = "#5c6814";
46
+ export const PanelBackgroundGradientTopLeftGreen = "#d0e646";
47
+ export const PanelBackgroundGradientTopLeftWhite = "#ffffffb3";
48
+ export const PanelBackgroundGradientBottomRightWhite = "#ffffff66";
49
+ export const PanelBackgroundGradientMiddleGreen = "#8fa02a";
50
+ export const PanelTextTitle = "#8fa02a";
51
+ export const PanelTextTitleGlassy = "#ffffff";
52
+ export const PanelBorderColor = "#dfdfdf";
53
+ export const PanelBorderWidth = "1px";
54
+ export const PanelRadiusDefault = "24px";
55
+ export const PanelSpacingTopBottom = "60px";
56
+ export const PanelSpacingTitleContent = "40px";
57
+ export const PanelSpacingRightLeft = "60px";
58
+ export const TileBackgroundDefault = "#ffffff";
59
+ export const TileTextTitle = "#5b5a5a";
60
+ export const TileTextContent = "#5b5a5a";
61
+ export const TileBorderColor = "#c2bfbf";
62
+ export const TileBorderWidthDefault = "1px";
63
+ export const TileBorderWidthThick = "2px";
64
+ export const TileRadiusDefault = "16px";
65
+ export const ButtonBackgroundDisabled = "#dfdfdf";
66
+ export const ButtonBackgroundEnabled = "#afc33b";
67
+ export const ButtonBackgroundEnabledGradientFrom = "#d0e646";
68
+ export const ButtonBackgroundEnabledGradientMiddle = "#8fa02a";
69
+ export const ButtonBackgroundEnabledGradientTo = "#5c6814";
70
+ export const ButtonBackgroundInverse = "#ffffff";
71
+ export const ButtonBackgroundHover = "#8fa02a";
72
+ export const ButtonTextLabel = "#ffffff";
73
+ export const ButtonTextLabelInverse = "#8fa02a";
74
+ export const ButtonTextDisabled = "#c2bfbf";
75
+ export const ButtonBorderColorDefault = "#afc33b";
76
+ export const ButtonBorderColorDisabled = "#c2bfbf";
77
+ export const ButtonBorderColorSelected = "#8fa02a";
78
+ export const ButtonBorderColorHover = "#8fa02a";
79
+ export const ButtonBorderWidthDefault = "1px";
80
+ export const ButtonRadius = "50px";
81
+ export const FormBackgroundWhite = "#ffffff";
82
+ export const FormBackgroundGlassy = "#ffffff66";
83
+ export const FormBackgroundDisabled = "#eeeeee";
84
+ export const FormBackgroundGray = "#dfdfdf";
85
+ export const FormBorderColorSuccess = "#afc33b";
86
+ export const FormBorderColorWarning = "#d9ab29";
87
+ export const FormBorderColorDisabled = "#dfdfdf";
88
+ export const FormBorderColorSelectedDark = "#8fa02a";
89
+ export const FormBorderColorError = "#de6565";
90
+ export const FormBorderColorDefault = "#8fa02a";
91
+ export const FormBorderColorSelectedGlassy = "#ffffff";
92
+ export const FormBorderColorSelectedLight = "#afc33b";
93
+ export const FormBorderWidthDefault = "1px";
94
+ export const FormBorderWidthSelected = "1px";
95
+ export const FormRadiusDefault = "16px";
96
+ export const FormTextLabel = "#5b5a5a";
97
+ export const FormTextPlaceholder = "#c2bfbf";
98
+ export const FormTextContent = "#5b5a5a";
99
+ export const FormTextDisabled = "#dfdfdf";
100
+ export const FormTextSuccess = "#afc33b";
101
+ export const FormTextWarning = "#d9ab29";
102
+ export const FormTextError = "#de6565";
103
+ export const FormTextInfo = "#afc33b";
104
+ export const FormTextLabelGlassy = "#ffffff";
105
+ export const FormTextPlaceholderGlassy = "#dfdfdf";
106
+ export const FormTextContentGlassy = "#ffffff";
107
+ export const SnackbarBackgroundWarning = "#d9ab29";
108
+ export const SnackbarBackgroundError = "#de6565";
109
+ export const SnackbarBackgroundInfo = "#afc33b";
110
+ export const SnackbarBackgroundSuccess = "#afc33b";
111
+ export const SnackbarBorderColorSuccess = "#afc33b";
112
+ export const SnackbarBorderColorError = "#de6565";
113
+ export const SnackbarBorderColorWarning = "#d9ab29";
114
+ export const SnackbarBorderColorInfo = "#afc33b";
115
+ export const SnackbarBorderWidthDefault = "2px";
116
+ export const SnackbarTextDefault = "#ffffff";
117
+ export const IconInverseSelected = "#8fa02a";
118
+ export const IconDefault = "#8fa02a";
119
+ export const IconInverse = "#ffffff";
120
+ export const IconDefaultSelected = "#ffffff";
121
+ export const IconDisabled = "#dfdfdf";
122
+ export const IconTextDefault = "#8fa02a";
123
+ export const IconTextGlassy = "#ffffff";
124
+ export const TextTitleDefault = "#5b5a5a";
125
+ export const TextTitleGlassy = "#ffffff";
126
+ export const TextContentText = "#5b5a5a";
127
+ export const TextContentTextLight = "#dfdfdf";
128
+ export const TextContentTextWhite = "#ffffff";
129
+ export const TextMessagesInfo = "#afc33b";
130
+ export const TextMessagesWarning = "#d9ab29";
131
+ export const TextMessagesError = "#de6565";
132
+ export const TextMessagesSuccess = "#afc33b";
133
+ export const MenuWhite = "#ffffff";
134
+ export const MenuHover = "#d0e646";
135
+ export const MenuTextSelected = "#d0e646";
136
+ export const MenuFlyoutGradientTo = "#5c6814";
137
+ export const MenuFlyoutGradientFrom = "#d0e646";
138
+ export const MenuBackground = "#ffffff";
139
+ export const MenuDark = "#5c6814";
140
+ export const IllustrationsDefault = "#afc33b";
141
+ export const IllustrationsLight = "#e5fc5a";
142
+ export const StepperDot = "#afc33b";
143
+ export const StepperLabel = "#5b5a5a";
144
+ export const StepperBorderDot = "#dfdfdf";
145
+ export const StepperDotNumber = "#ffffff";
146
+ export const StepperBorderDotSelected = "#8fa02a";
147
+ export const StepperLine = "#afc33b";
148
+ export const StepperLineDisabled = "#dfdfdf";
149
+ export const TypefaceFontFamilyHeader = "sora";
150
+ export const TypefaceFontFamilyBody = "sora";
151
+ export const TypefaceFontFamilyStatement = "sora";
152
+ export const TypefaceFontFamilyForm = "sora";
153
+ export const TypefaceFontWeightRegular400 = "400";
154
+ export const TypefaceFontWeightBold700 = "700";
155
+ export const TypefaceFontWeightRegular500 = "500";
156
+ export const TypefaceFontSizeSmall16 = "0.889rem";
157
+ export const TypefaceFontSizeDefault20 = "1.111rem";
158
+ export const TypefaceFontSizeLarge24 = "1.333rem";
159
+ export const TypefaceFontSizeHuge48 = "2.667rem";
160
+ export const TypefaceFontSizeExtraHuge72 = "4rem";
161
+ export const TypefaceFontSizeExtraLarge36 = "2rem";
162
+ export const TypefaceLetterSpacingDefault = "0.006rem";
163
+ export const TypefaceLetterSpacingLarge = "0.011rem";
164
+ export const TypefaceLineHeightDefault120 = "6.667rem";
165
+ export const TypefaceLineHeightLarge150 = "8.333rem";
package/dist/tokens.json CHANGED
@@ -1,160 +1,273 @@
1
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"
2
+ "colors": {
3
+ "gold": {
4
+ "brand-secondary-bright": "#f9db86",
5
+ "brand-secondary-light": "#eec348",
6
+ "brand-secondary": "#d9ab29",
7
+ "brand-secondary-midnight": "#97771d",
8
+ "brand-secondary-dark": "#b58f24"
9
+ },
10
+ "grey": {
11
+ "brand-white": "#ffffff",
12
+ "brand-bright-gray": "#eeeeee",
13
+ "brand-light-gray": "#dfdfdf",
14
+ "brand-gray": "#c2bfbf",
15
+ "brand-dark-gray": "#5b5a5a",
16
+ "brand-black": "#272727",
17
+ "brand-white-transparent-40": "#ffffff66",
18
+ "brand-white-transparent-70": "#ffffffb3"
19
+ },
20
+ "status": {
21
+ "success": "#afc33b",
22
+ "warning": "#d9ab29",
23
+ "error": "#de6565",
24
+ "info": "#afc33b"
25
+ },
26
+ "green": {
27
+ "brand-primary-bright": "#e5fc5a",
28
+ "brand-primary-light": "#d0e646",
29
+ "brand-primary": "#afc33b",
30
+ "brand-primary-dark": "#8fa02a",
31
+ "brand-primary-midnight": "#5c6814"
32
+ },
33
+ "juice": {
34
+ "sugarcane": "#9bad30",
35
+ "tamarind": "#da8e33",
36
+ "guava": "#7b4e80",
37
+ "icetea": "#d83a4f"
18
38
  }
19
39
  },
20
- "input": {
21
- "border-width": "1px",
22
- "padding": "16px",
23
- "radius": "8px",
24
- "background-color": "#ffffff",
25
- "text-color": "#272727",
26
- "font-size": "16px"
40
+ "spacing": {
41
+ "tiny": "8px",
42
+ "small": "16px",
43
+ "default": "24px",
44
+ "large": "40px",
45
+ "huge": "60px"
46
+ },
47
+ "radius": {
48
+ "small": "8px",
49
+ "default": "16px",
50
+ "large": "24px",
51
+ "huge": "50px"
52
+ },
53
+ "borders": {
54
+ "thin": "0.5px",
55
+ "default": "1px",
56
+ "thick": "2px"
27
57
  },
28
58
  "panel": {
29
- "background-color": "#e1e0df",
30
- "padding": {
31
- "desktop": "32px",
32
- "mobile": "16px"
59
+ "background": {
60
+ "transparent": "#ffffffb3",
61
+ "default": "#ffffff",
62
+ "gradient-bottom-right-green": "#5c6814",
63
+ "gradient-top-left-green": "#d0e646",
64
+ "gradient-top-left-white": "#ffffffb3",
65
+ "gradient-bottom-right-white": "#ffffff66",
66
+ "gradient-middle-green": "#8fa02a"
67
+ },
68
+ "text": {
69
+ "title": "#8fa02a",
70
+ "title-glassy": "#ffffff"
71
+ },
72
+ "border": {
73
+ "color": "#dfdfdf",
74
+ "width": "1px"
75
+ },
76
+ "radius": {
77
+ "default": "24px"
78
+ },
79
+ "spacing": {
80
+ "top-bottom": "60px",
81
+ "title-content": "40px",
82
+ "right-left": "60px"
33
83
  }
34
84
  },
35
85
  "tile": {
36
- "background-color": {
37
- "left-top": "#ffffff",
38
- "right-bottom": "#ffffff"
86
+ "background": {
87
+ "default": "#ffffff"
39
88
  },
40
- "border-color": {
41
- "left-top": "#cecece",
42
- "right-bottom": "#cecece"
89
+ "text": {
90
+ "title": "#5b5a5a",
91
+ "content": "#5b5a5a"
43
92
  },
44
- "border-radius": {
45
- "small": "12px",
46
- "large": "24px",
47
- "huge": "100vw"
93
+ "border": {
94
+ "color": "#c2bfbf",
95
+ "width": {
96
+ "default": "1px",
97
+ "thick": "2px"
98
+ }
48
99
  },
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"
100
+ "radius": {
101
+ "default": "16px"
57
102
  }
58
103
  },
59
- "color": {
60
- "brand": {
61
- "primary": {
62
- "midnight": "#5c6814",
63
- "dark": "#8fa02a",
104
+ "button": {
105
+ "background": {
106
+ "disabled": "#dfdfdf",
107
+ "enabled": "#afc33b",
108
+ "enabled-gradient-from": "#d0e646",
109
+ "enabled-gradient-middle": "#8fa02a",
110
+ "enabled-gradient-to": "#5c6814",
111
+ "inverse": "#ffffff",
112
+ "hover": "#8fa02a"
113
+ },
114
+ "text": {
115
+ "label": "#ffffff",
116
+ "label-inverse": "#8fa02a",
117
+ "disabled": "#c2bfbf"
118
+ },
119
+ "border": {
120
+ "color": {
64
121
  "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"
122
+ "disabled": "#c2bfbf",
123
+ "selected": "#8fa02a",
124
+ "hover": "#8fa02a"
74
125
  },
75
- "black": "#272727",
76
- "dark-gray": "#5b5a5a",
77
- "gray": "#c2bfbf",
78
- "light-gray": "#e1e0df",
126
+ "width": {
127
+ "default": "1px"
128
+ }
129
+ },
130
+ "radius": "50px"
131
+ },
132
+ "form": {
133
+ "background": {
79
134
  "white": "#ffffff",
80
- "light": "#d6e66c"
135
+ "glassy": "#ffffff66",
136
+ "disabled": "#eeeeee",
137
+ "gray": "#dfdfdf"
81
138
  },
82
- "product": {
83
- "sugarcane": "#a7b325",
84
- "tamarind": "#f8a702",
85
- "guava": "#7441aa",
86
- "icetea": "#e14a4a"
139
+ "border": {
140
+ "color": {
141
+ "success": "#afc33b",
142
+ "warning": "#d9ab29",
143
+ "disabled": "#dfdfdf",
144
+ "selected-dark": "#8fa02a",
145
+ "error": "#de6565",
146
+ "default": "#8fa02a",
147
+ "selected-glassy": "#ffffff",
148
+ "selected-light": "#afc33b"
149
+ },
150
+ "width": {
151
+ "default": "1px",
152
+ "selected": "1px"
153
+ }
87
154
  },
88
- "status": {
89
- "success": "#99af17",
90
- "info": "#6a7a0a",
91
- "warning": "#f9db86",
92
- "error": "#ea720e"
155
+ "radius": {
156
+ "default": "16px"
93
157
  },
94
158
  "text": {
95
- "dark": "#272727",
96
- "light": "#ffffff",
97
- "colored": "#6a7a0a"
159
+ "label": "#5b5a5a",
160
+ "placeholder": "#c2bfbf",
161
+ "content": "#5b5a5a",
162
+ "disabled": "#dfdfdf",
163
+ "success": "#afc33b",
164
+ "warning": "#d9ab29",
165
+ "error": "#de6565",
166
+ "info": "#afc33b",
167
+ "label-glassy": "#ffffff",
168
+ "placeholder-glassy": "#dfdfdf",
169
+ "content-glassy": "#ffffff"
170
+ }
171
+ },
172
+ "snackbar": {
173
+ "background": {
174
+ "warning": "#d9ab29",
175
+ "error": "#de6565",
176
+ "info": "#afc33b",
177
+ "success": "#afc33b"
98
178
  },
99
- "disabled": "#cecece",
100
179
  "border": {
101
- "default": "#cecece",
102
- "left-top": "#cecece",
103
- "right-bottom": "#b5b5b5"
104
- },
105
- "link": "#99af17",
106
- "hover": {
107
- "default": "#bcca63",
108
- "inverse": "#f3f4f0"
180
+ "color": {
181
+ "success": "#afc33b",
182
+ "error": "#de6565",
183
+ "warning": "#d9ab29",
184
+ "info": "#afc33b"
185
+ },
186
+ "width": {
187
+ "default": "2px"
188
+ }
189
+ },
190
+ "text": {
191
+ "default": "#ffffff"
109
192
  }
110
193
  },
111
- "radius": {
112
- "small": "8px",
113
- "default": "16px",
114
- "large": "24px",
115
- "round": "100vw"
194
+ "icon": {
195
+ "inverse-selected": "#8fa02a",
196
+ "default": "#8fa02a",
197
+ "inverse": "#ffffff",
198
+ "default-selected": "#ffffff",
199
+ "disabled": "#dfdfdf",
200
+ "text": {
201
+ "default": "#8fa02a",
202
+ "glassy": "#ffffff"
203
+ }
116
204
  },
117
- "shadow": {
118
- "card": "0 18px 45px rgba(15, 23, 42, 0.12)"
205
+ "text": {
206
+ "title": {
207
+ "default": "#5b5a5a",
208
+ "glassy": "#ffffff"
209
+ },
210
+ "content": {
211
+ "text": "#5b5a5a",
212
+ "text-light": "#dfdfdf",
213
+ "text-white": "#ffffff"
214
+ },
215
+ "messages": {
216
+ "info": "#afc33b",
217
+ "warning": "#d9ab29",
218
+ "error": "#de6565",
219
+ "success": "#afc33b"
220
+ }
119
221
  },
120
- "spacing": {
121
- "tiny": "8px",
122
- "small": "16px",
123
- "default": "24px",
124
- "large": "32px",
125
- "huge": "40px",
126
- "very-huge": "60px"
222
+ "menu": {
223
+ "white": "#ffffff",
224
+ "hover": "#d0e646",
225
+ "text-selected": "#d0e646",
226
+ "flyout-gradient-to": "#5c6814",
227
+ "flyout-gradient-from": "#d0e646",
228
+ "background": "#ffffff",
229
+ "dark": "#5c6814"
230
+ },
231
+ "illustrations": {
232
+ "default": "#afc33b",
233
+ "light": "#e5fc5a"
127
234
  },
128
- "breakpoint": {
129
- "smartphone": "480px",
130
- "tablet": "768px",
131
- "desktop": "1200px",
132
- "desktop-wide": "1600px"
235
+ "stepper": {
236
+ "dot": "#afc33b",
237
+ "label": "#5b5a5a",
238
+ "border-dot": "#dfdfdf",
239
+ "dot-number": "#ffffff",
240
+ "border-dot-selected": "#8fa02a",
241
+ "line": "#afc33b",
242
+ "line-disabled": "#dfdfdf"
133
243
  },
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
244
+ "typeface": {
245
+ "font-family": {
246
+ "header": "sora",
247
+ "body": "sora",
248
+ "statement": "sora",
249
+ "form": "sora"
250
+ },
251
+ "font-weight": {
252
+ "regular-400": "400",
253
+ "bold-700": "700",
254
+ "regular-500": "500"
255
+ },
256
+ "font-size": {
257
+ "small-16": "0.889rem",
258
+ "default-20": "1.111rem",
259
+ "large-24": "1.333rem",
260
+ "huge-48": "2.667rem",
261
+ "extra-huge-72": "4rem",
262
+ "extra-large-36": "2rem"
155
263
  },
156
264
  "letter-spacing": {
157
- "default": "0.016rem"
265
+ "default": "0.006rem",
266
+ "large": "0.011rem"
267
+ },
268
+ "line-height": {
269
+ "default-120": "6.667rem",
270
+ "large-150": "8.333rem"
158
271
  }
159
272
  }
160
273
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "suus-design-tokens",
3
- "version": "1.0.2",
3
+ "version": "1.0.8",
4
4
  "description": "",
5
5
  "keywords": [],
6
6
  "author": "",
@@ -17,9 +17,10 @@
17
17
  },
18
18
  "scripts": {
19
19
  "test": "echo \"Error: no test specified\" && exit 1",
20
- "build": "style-dictionary build --config style-dictionary.config.mjs",
20
+ "build": "npm run prepare-tokens && style-dictionary build --config style-dictionary.config.mjs",
21
21
  "publish": "npm version patch && npm publish",
22
- "prepublishOnly": "npm run build"
22
+ "prepublishOnly": "npm run build",
23
+ "prepare-tokens": "node scripts/token-studio-flatten-script.mjs"
23
24
  },
24
25
  "repository": {
25
26
  "type": "git",