stp-ui-kit 0.0.114 → 0.0.116

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 (12) hide show
  1. package/dist/components/display/index.d.ts +0 -1
  2. package/dist/stp-ui-kit.es.js +1285 -1344
  3. package/dist/stp-ui-kit.es.js.map +1 -1
  4. package/dist/style.css +1 -1
  5. package/dist/styles/tokens.d.ts +560 -35
  6. package/package.json +2 -7
  7. package/src/styles/_variables.scss +131 -4
  8. package/src/styles/tokens.d.ts +560 -35
  9. package/dist/components/display/Empty/Empty.d.ts +0 -37
  10. package/dist/components/display/Empty/Empty.stories.d.ts +0 -10
  11. package/dist/tokens.d.ts +0 -515
  12. package/src/styles/tokens.js +0 -94
package/src/styles/_variables.scss CHANGED
@@ -62,19 +62,146 @@ $font-letter-spacing-normal: 0px;
62
62
  $font-size-300: 12px;
63
63
  $font-size-350: 14px;
64
64
  $font-size-400: 16px;
65
+ $font-size-450: 18px;
65
66
  $font-size-500: 20px;
67
+ $font-size-550: 22px;
66
68
  $font-size-600: 24px;
69
+ $font-size-700: 28px;
67
70
  $font-size-750: 30px;
71
+ $font-size-1000: 40px;
68
72
 
69
73
  $font-line-height-400: 16px;
70
74
  $font-line-height-500: 20px;
71
75
  $font-line-height-550: 22px;
72
76
  $font-line-height-600: 24px;
73
77
  $font-line-height-650: 26px;
74
- $font-line-height-800: 32px;
75
78
  $font-line-height-700: 28px;
79
+ $font-line-height-800: 32px;
80
+ $font-line-height-850: 34px;
76
81
  $font-line-height-1000: 40px;
77
82
 
83
+ // Semantic Typography Tokens - Desktop
84
+ // Display
85
+ $display-font-size: $font-size-1000;
86
+ $display-line-height: $font-line-height-1000;
87
+ $display-weight: $font-weight-semibold;
88
+ $display-letter-spacing: $font-letter-spacing-denser;
89
+
90
+ // Heading XL
91
+ $heading-xl-font-size: $font-size-750;
92
+ $heading-xl-line-height: $font-line-height-1000;
93
+ $heading-xl-weight: $font-weight-bold;
94
+ $heading-xl-letter-spacing: $font-letter-spacing-denser;
95
+
96
+ // Heading LG
97
+ $heading-lg-font-size: $font-size-600;
98
+ $heading-lg-line-height: $font-line-height-800;
99
+ $heading-lg-weight: $font-weight-bold;
100
+ $heading-lg-letter-spacing: $font-letter-spacing-dense;
101
+
102
+ // Heading MD
103
+ $heading-md-font-size: $font-size-500;
104
+ $heading-md-line-height: $font-line-height-600;
105
+ $heading-md-weight: $font-weight-semibold;
106
+ $heading-md-letter-spacing: $font-letter-spacing-dense;
107
+
108
+ // Heading SM
109
+ $heading-sm-font-size: $font-size-400;
110
+ $heading-sm-line-height: $font-line-height-500;
111
+ $heading-sm-weight: $font-weight-semibold;
112
+ $heading-sm-letter-spacing: $font-letter-spacing-normal;
113
+
114
+ // Heading XS
115
+ $heading-xs-font-size: $font-size-350;
116
+ $heading-xs-line-height: $font-line-height-500;
117
+ $heading-xs-weight: $font-weight-semibold;
118
+ $heading-xs-letter-spacing: $font-letter-spacing-normal;
119
+
120
+ // Body LG
121
+ $body-lg-font-size: $font-size-400;
122
+ $body-lg-line-height: $font-line-height-600;
123
+ $body-lg-weight-default: $font-weight-regular;
124
+ $body-lg-weight-medium: $font-weight-medium;
125
+ $body-lg-weight-semibold: $font-weight-semibold;
126
+ $body-lg-letter-spacing: $font-letter-spacing-normal;
127
+
128
+ // Body MD
129
+ $body-md-font-size: $font-size-350;
130
+ $body-md-line-height: $font-line-height-500;
131
+ $body-md-weight-default: $font-weight-regular;
132
+ $body-md-weight-medium: $font-weight-medium;
133
+ $body-md-weight-semibold: $font-weight-semibold;
134
+ $body-md-letter-spacing: $font-letter-spacing-normal;
135
+
136
+ // Body SM
137
+ $body-sm-font-size: $font-size-300;
138
+ $body-sm-line-height: $font-line-height-400;
139
+ $body-sm-weight-default: $font-weight-regular;
140
+ $body-sm-weight-medium: $font-weight-medium;
141
+ $body-sm-weight-semibold: $font-weight-semibold;
142
+ $body-sm-letter-spacing: $font-letter-spacing-normal;
143
+
144
+ // Semantic Typography Tokens - Mobile
145
+ // Display Mobile
146
+ $display-font-size-mobile: $font-size-1000;
147
+ $display-line-height-mobile: $font-line-height-1000;
148
+ $display-weight-mobile: $font-weight-semibold;
149
+ $display-letter-spacing-mobile: $font-letter-spacing-denser;
150
+
151
+ // Heading XL Mobile
152
+ $heading-xl-font-size-mobile: $font-size-700;
153
+ $heading-xl-line-height-mobile: $font-line-height-700;
154
+ $heading-xl-weight-mobile: $font-weight-bold;
155
+ $heading-xl-letter-spacing-mobile: $font-letter-spacing-denser;
156
+
157
+ // Heading LG Mobile
158
+ $heading-lg-font-size-mobile: $font-size-550;
159
+ $heading-lg-line-height-mobile: $font-line-height-700;
160
+ $heading-lg-weight-mobile: $font-weight-bold;
161
+ $heading-lg-letter-spacing-mobile: $font-letter-spacing-dense;
162
+
163
+ // Heading MD Mobile
164
+ $heading-md-font-size-mobile: $font-size-450;
165
+ $heading-md-line-height-mobile: $font-line-height-550;
166
+ $heading-md-weight-mobile: $font-weight-semibold;
167
+ $heading-md-letter-spacing-mobile: $font-letter-spacing-dense;
168
+
169
+ // Heading SM Mobile
170
+ $heading-sm-font-size-mobile: $font-size-400;
171
+ $heading-sm-line-height-mobile: $font-line-height-500;
172
+ $heading-sm-weight-mobile: $font-weight-semibold;
173
+ $heading-sm-letter-spacing-mobile: $font-letter-spacing-normal;
174
+
175
+ // Heading XS Mobile
176
+ $heading-xs-font-size-mobile: $font-size-350;
177
+ $heading-xs-line-height-mobile: $font-line-height-500;
178
+ $heading-xs-weight-mobile: $font-weight-semibold;
179
+ $heading-xs-letter-spacing-mobile: $font-letter-spacing-normal;
180
+
181
+ // Body LG Mobile
182
+ $body-lg-font-size-mobile: $font-size-450;
183
+ $body-lg-line-height-mobile: $font-line-height-650;
184
+ $body-lg-weight-default-mobile: $font-weight-regular;
185
+ $body-lg-weight-medium-mobile: $font-weight-medium;
186
+ $body-lg-weight-semibold-mobile: $font-weight-semibold;
187
+ $body-lg-letter-spacing-mobile: $font-letter-spacing-normal;
188
+
189
+ // Body MD Mobile
190
+ $body-md-font-size-mobile: $font-size-400;
191
+ $body-md-line-height-mobile: $font-line-height-600;
192
+ $body-md-weight-default-mobile: $font-weight-regular;
193
+ $body-md-weight-medium-mobile: $font-weight-medium;
194
+ $body-md-weight-semibold-mobile: $font-weight-semibold;
195
+ $body-md-letter-spacing-mobile: $font-letter-spacing-normal;
196
+
197
+ // Body SM Mobile
198
+ $body-sm-font-size-mobile: $font-size-300;
199
+ $body-sm-line-height-mobile: $font-line-height-400;
200
+ $body-sm-weight-default-mobile: $font-weight-regular;
201
+ $body-sm-weight-medium-mobile: $font-weight-medium;
202
+ $body-sm-weight-semibold-mobile: $font-weight-semibold;
203
+ $body-sm-letter-spacing-mobile: $font-letter-spacing-normal;
204
+
78
205
  //Colors - Primitive tokens with CSS custom properties for theming
79
206
 
80
207
  // Define CSS custom properties for light theme (default)
@@ -961,9 +1088,9 @@ $nav-bg-surface-selected: var(--nav-bg-surface-selected);
961
1088
  $nav-bg-surface-selected-no-hover: var(--nav-bg-surface-selected-no-hover);
962
1089
 
963
1090
  $border-active: var(--border-active);
964
- $border-input: var(--border-input);
965
- $border-input-active: var(--border-input-active);
966
- $border-input-disabled: var(--border-input-disabled);
1091
+ $border-input: var(--input-border);
1092
+ $border-input-active: var(--input-border-active);
1093
+ $border-input-disabled: var(--input-border-disabled);
967
1094
 
968
1095
  $backdrop: var(--backdrop);
969
1096