@haiilo/catalyst-tokens 0.1.1 → 0.1.4

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 (7) hide show
  1. package/assets/fonts/AzeretMono-Regular.woff2 +0 -0
  2. package/dist/css/_variables.css +13 -13
  3. package/dist/js/_variables.d.ts +6 -6
  4. package/dist/js/_variables.js +13 -13
  5. package/dist/scss/_variables.scss +24 -24
  6. package/package.json +1 -1
  7. package/assets/fonts/AzeretMono-SemiBold.woff2 +0 -0
package/dist/css/_variables.css CHANGED
@@ -49,7 +49,6 @@
49
49
  --cat-asset-font-lato-woff2-thin-italic: "Lato-ThinItalic.woff2";
50
50
  --cat-asset-font-azeret-mono-name: "Azeret Mono";
51
51
  --cat-asset-font-azeret-mono-woff2-regular: "AzeretMono-Regular.woff2";
52
- --cat-asset-font-azeret-mono-woff2-semi-bold: "AzeretMono-SemiBold.woff2";
53
52
  --cat-color-base-neutral-0: 255, 255, 255;
54
53
  --cat-color-base-neutral-100: 248, 248, 251;
55
54
  --cat-color-base-neutral-200: 235, 236, 240;
@@ -93,13 +92,13 @@
93
92
  --cat-color-theme-primary-text: 32, 127, 138;
94
93
  --cat-color-theme-primary-text-hover: 28, 112, 122;
95
94
  --cat-color-theme-primary-text-active: 25, 101, 110;
96
- --cat-color-theme-secondary-bg: 248, 248, 251;
97
- --cat-color-theme-secondary-bg-hover: 235, 236, 240;
98
- --cat-color-theme-secondary-bg-active: 235, 236, 240;
99
- --cat-color-theme-secondary-fill: 0, 0, 0;
100
- --cat-color-theme-secondary-fill-hover: 0, 0, 0;
101
- --cat-color-theme-secondary-fill-active: 0, 0, 0;
102
- --cat-color-theme-secondary-text: 105, 118, 135;
95
+ --cat-color-theme-secondary-bg: 105, 118, 135;
96
+ --cat-color-theme-secondary-bg-hover: 105, 118, 135;
97
+ --cat-color-theme-secondary-bg-active: 105, 118, 135;
98
+ --cat-color-theme-secondary-fill: 255, 255, 255;
99
+ --cat-color-theme-secondary-fill-hover: 255, 255, 255;
100
+ --cat-color-theme-secondary-fill-active: 255, 255, 255;
101
+ --cat-color-theme-secondary-text: 0, 0, 0;
103
102
  --cat-color-theme-secondary-text-hover: 0, 0, 0;
104
103
  --cat-color-theme-secondary-text-active: 0, 0, 0;
105
104
  --cat-color-theme-success-bg: 0, 132, 88;
@@ -133,14 +132,15 @@
133
132
  --cat-color-ui-background-body: 255, 255, 255;
134
133
  --cat-color-ui-background-interaction: 32, 127, 138;
135
134
  --cat-color-ui-background-notification: 217, 52, 13;
135
+ --cat-color-ui-background-skeleton: 235, 236, 240;
136
+ --cat-color-ui-background-skeleton-highlight: 215, 219, 224;
136
137
  --cat-color-ui-border-default: 235, 236, 240;
137
138
  --cat-color-ui-border-dark: 215, 219, 224;
138
139
  --cat-color-ui-border-focus: 0, 113, 255;
139
- --cat-color-ui-font-primary: 0, 0, 0;
140
- --cat-color-ui-font-secondary: 105, 118, 135;
141
- --cat-color-ui-font-success: 0, 132, 88;
142
- --cat-color-ui-font-warning: 159, 97, 0;
143
- --cat-color-ui-font-danger: 217, 52, 13;
140
+ --cat-color-ui-font-head: 0, 0, 0;
141
+ --cat-color-ui-font-body: 0, 0, 0;
142
+ --cat-color-ui-font-mono: 0, 0, 0;
143
+ --cat-color-ui-font-muted: 105, 118, 135;
144
144
  --cat-color-ui-font-quote: 0, 0, 0;
145
145
  --cat-color-ui-font-quote-source: 105, 118, 135;
146
146
  --cat-font-family-head: DM Sans;
package/dist/js/_variables.d.ts CHANGED
@@ -48,7 +48,6 @@ export const AssetFontLatoWoffThinItalic : string;
48
48
  export const AssetFontLatoWoff2ThinItalic : string;
49
49
  export const AssetFontAzeretMonoName : string;
50
50
  export const AssetFontAzeretMonoWoff2Regular : string;
51
- export const AssetFontAzeretMonoWoff2SemiBold : string;
52
51
  export const ColorBaseNeutral0 : string;
53
52
  export const ColorBaseNeutral100 : string;
54
53
  export const ColorBaseNeutral200 : string;
@@ -132,14 +131,15 @@ export const ColorUiBackgroundCanvas : string;
132
131
  export const ColorUiBackgroundBody : string;
133
132
  export const ColorUiBackgroundInteraction : string;
134
133
  export const ColorUiBackgroundNotification : string;
134
+ export const ColorUiBackgroundSkeleton : string;
135
+ export const ColorUiBackgroundSkeletonHighlight : string;
135
136
  export const ColorUiBorderDefault : string;
136
137
  export const ColorUiBorderDark : string;
137
138
  export const ColorUiBorderFocus : string;
138
- export const ColorUiFontPrimary : string;
139
- export const ColorUiFontSecondary : string;
140
- export const ColorUiFontSuccess : string;
141
- export const ColorUiFontWarning : string;
142
- export const ColorUiFontDanger : string;
139
+ export const ColorUiFontHead : string;
140
+ export const ColorUiFontBody : string;
141
+ export const ColorUiFontMono : string;
142
+ export const ColorUiFontMuted : string;
143
143
  export const ColorUiFontQuote : string;
144
144
  export const ColorUiFontQuoteSource : string;
145
145
  export const FontFamilyHead : string;
package/dist/js/_variables.js CHANGED
@@ -48,7 +48,6 @@ export const AssetFontLatoWoffThinItalic = "Lato-ThinItalic.woff";
48
48
  export const AssetFontLatoWoff2ThinItalic = "Lato-ThinItalic.woff2";
49
49
  export const AssetFontAzeretMonoName = "Azeret Mono";
50
50
  export const AssetFontAzeretMonoWoff2Regular = "AzeretMono-Regular.woff2";
51
- export const AssetFontAzeretMonoWoff2SemiBold = "AzeretMono-SemiBold.woff2";
52
51
  export const ColorBaseNeutral0 = "#ffffff";
53
52
  export const ColorBaseNeutral100 = "#f8f8fb";
54
53
  export const ColorBaseNeutral200 = "#ebecf0";
@@ -92,13 +91,13 @@ export const ColorThemePrimaryFillActive = "#ffffff";
92
91
  export const ColorThemePrimaryText = "#207f8a";
93
92
  export const ColorThemePrimaryTextHover = "#1c707a";
94
93
  export const ColorThemePrimaryTextActive = "#19656e";
95
- export const ColorThemeSecondaryBg = "#f8f8fb";
96
- export const ColorThemeSecondaryBgHover = "#ebecf0";
97
- export const ColorThemeSecondaryBgActive = "#ebecf0";
98
- export const ColorThemeSecondaryFill = "#000000";
99
- export const ColorThemeSecondaryFillHover = "#000000";
100
- export const ColorThemeSecondaryFillActive = "#000000";
101
- export const ColorThemeSecondaryText = "#697687";
94
+ export const ColorThemeSecondaryBg = "#697687";
95
+ export const ColorThemeSecondaryBgHover = "#697687";
96
+ export const ColorThemeSecondaryBgActive = "#697687";
97
+ export const ColorThemeSecondaryFill = "#ffffff";
98
+ export const ColorThemeSecondaryFillHover = "#ffffff";
99
+ export const ColorThemeSecondaryFillActive = "#ffffff";
100
+ export const ColorThemeSecondaryText = "#000000";
102
101
  export const ColorThemeSecondaryTextHover = "#000000";
103
102
  export const ColorThemeSecondaryTextActive = "#000000";
104
103
  export const ColorThemeSuccessBg = "#008458";
@@ -132,14 +131,15 @@ export const ColorUiBackgroundCanvas = "#f8f8fb";
132
131
  export const ColorUiBackgroundBody = "#ffffff";
133
132
  export const ColorUiBackgroundInteraction = "#207f8a";
134
133
  export const ColorUiBackgroundNotification = "#d9340d";
134
+ export const ColorUiBackgroundSkeleton = "#ebecf0";
135
+ export const ColorUiBackgroundSkeletonHighlight = "#d7dbe0";
135
136
  export const ColorUiBorderDefault = "#ebecf0";
136
137
  export const ColorUiBorderDark = "#d7dbe0";
137
138
  export const ColorUiBorderFocus = "#0071ff";
138
- export const ColorUiFontPrimary = "#000000";
139
- export const ColorUiFontSecondary = "#697687";
140
- export const ColorUiFontSuccess = "#008458";
141
- export const ColorUiFontWarning = "#9f6100";
142
- export const ColorUiFontDanger = "#d9340d";
139
+ export const ColorUiFontHead = "#000000";
140
+ export const ColorUiFontBody = "#000000";
141
+ export const ColorUiFontMono = "#000000";
142
+ export const ColorUiFontMuted = "#697687";
143
143
  export const ColorUiFontQuote = "#000000";
144
144
  export const ColorUiFontQuoteSource = "#697687";
145
145
  export const FontFamilyHead = "DM Sans";
package/dist/scss/_variables.scss CHANGED
@@ -92,7 +92,6 @@ $cat-color-base-neutral-300: 215, 219, 224 !default;
92
92
  $cat-color-base-neutral-200: 235, 236, 240 !default;
93
93
  $cat-color-base-neutral-100: 248, 248, 251 !default;
94
94
  $cat-color-base-neutral-0: 255, 255, 255 !default;
95
- $cat-asset-font-azeret-mono-woff2-semi-bold: "AzeretMono-SemiBold.woff2" !default;
96
95
  $cat-asset-font-azeret-mono-woff2-regular: "AzeretMono-Regular.woff2" !default;
97
96
  $cat-asset-font-azeret-mono-name: "Azeret Mono" !default;
98
97
  $cat-asset-font-lato-woff2-thin-italic: "Lato-ThinItalic.woff2" !default;
@@ -152,14 +151,18 @@ $cat-size-font-mono-xl: $cat-size-font-body-xl !default;
152
151
  $cat-font-family-mono: var(--cat-font-family-mono, $cat-asset-font-azeret-mono-name) !default;
153
152
  $cat-font-family-body: var(--cat-font-family-body, $cat-asset-font-lato-name) !default;
154
153
  $cat-font-family-head: var(--cat-font-family-head, $cat-asset-font-dm-sans-name) !default;
155
- $cat-color-ui-font-secondary: $cat-color-base-neutral-400 !default;
156
- $cat-color-ui-font-primary: $cat-color-base-neutral-900 !default;
154
+ $cat-color-ui-font-muted: var(--cat-font-color-muted, $cat-color-base-neutral-400) !default;
155
+ $cat-color-ui-font-mono: var(--cat-font-color-mono, $cat-color-base-neutral-900) !default;
156
+ $cat-color-ui-font-body: var(--cat-font-color-body, $cat-color-base-neutral-900) !default;
157
+ $cat-color-ui-font-head: var(--cat-font-color-head, $cat-color-base-neutral-900) !default;
157
158
  $cat-color-ui-border-dark: $cat-color-base-neutral-300 !default;
158
159
  $cat-color-ui-border-default: $cat-color-base-neutral-200 !default;
160
+ $cat-color-ui-background-skeleton-highlight: $cat-color-base-neutral-300 !default;
161
+ $cat-color-ui-background-skeleton: $cat-color-base-neutral-200 !default;
159
162
  $cat-color-ui-background-notification: $cat-color-base-red-400 !default;
160
163
  $cat-color-ui-background-interaction: $cat-color-base-brand-400 !default;
161
164
  $cat-color-ui-background-body: $cat-color-base-neutral-0 !default;
162
- $cat-color-ui-background-canvas: $cat-color-base-neutral-100 !default;
165
+ $cat-color-ui-background-canvas: var(--cat-bg, $cat-color-base-neutral-100) !default;
163
166
  $cat-color-theme-danger-text-active: $cat-color-base-red-600 !default;
164
167
  $cat-color-theme-danger-text-hover: $cat-color-base-red-500 !default;
165
168
  $cat-color-theme-danger-text: $cat-color-base-red-400 !default;
@@ -189,13 +192,13 @@ $cat-color-theme-success-bg-hover: $cat-color-base-green-500 !default;
189
192
  $cat-color-theme-success-bg: $cat-color-base-green-400 !default;
190
193
  $cat-color-theme-secondary-text-active: $cat-color-base-neutral-900 !default;
191
194
  $cat-color-theme-secondary-text-hover: $cat-color-base-neutral-900 !default;
192
- $cat-color-theme-secondary-text: $cat-color-base-neutral-400 !default;
193
- $cat-color-theme-secondary-fill-active: $cat-color-base-neutral-900 !default;
194
- $cat-color-theme-secondary-fill-hover: $cat-color-base-neutral-900 !default;
195
- $cat-color-theme-secondary-fill: $cat-color-base-neutral-900 !default;
196
- $cat-color-theme-secondary-bg-active: $cat-color-base-neutral-200 !default;
197
- $cat-color-theme-secondary-bg-hover: $cat-color-base-neutral-200 !default;
198
- $cat-color-theme-secondary-bg: $cat-color-base-neutral-100 !default;
195
+ $cat-color-theme-secondary-text: $cat-color-base-neutral-900 !default;
196
+ $cat-color-theme-secondary-fill-active: $cat-color-base-neutral-0 !default;
197
+ $cat-color-theme-secondary-fill-hover: $cat-color-base-neutral-0 !default;
198
+ $cat-color-theme-secondary-fill: $cat-color-base-neutral-0 !default;
199
+ $cat-color-theme-secondary-bg-active: $cat-color-base-neutral-400 !default;
200
+ $cat-color-theme-secondary-bg-hover: $cat-color-base-neutral-400 !default;
201
+ $cat-color-theme-secondary-bg: $cat-color-base-neutral-400 !default;
199
202
  $cat-color-theme-primary-text-active: var(--cat-primary-text-active, $cat-color-base-brand-600) !default;
200
203
  $cat-color-theme-primary-text-hover: var(--cat-primary-text-hover, $cat-color-base-brand-500) !default;
201
204
  $cat-color-theme-primary-text: var(--cat-primary-text, $cat-color-base-brand-400) !default;
@@ -205,11 +208,8 @@ $cat-color-theme-primary-fill: var(--cat-primary-fill, $cat-color-base-neutral-0
205
208
  $cat-color-theme-primary-bg-active: var(--cat-primary-bg-active, $cat-color-base-brand-600) !default;
206
209
  $cat-color-theme-primary-bg-hover: var(--cat-primary-bg-hover, $cat-color-base-brand-500) !default;
207
210
  $cat-color-theme-primary-bg: var(--cat-primary-bg, $cat-color-base-brand-400) !default;
208
- $cat-color-ui-font-quote-source: $cat-color-ui-font-secondary !default;
209
- $cat-color-ui-font-quote: $cat-color-ui-font-primary !default;
210
- $cat-color-ui-font-danger: $cat-color-theme-danger-text !default;
211
- $cat-color-ui-font-warning: $cat-color-theme-warning-text !default;
212
- $cat-color-ui-font-success: $cat-color-theme-success-text !default;
211
+ $cat-color-ui-font-quote-source: $cat-color-ui-font-muted !default;
212
+ $cat-color-ui-font-quote: $cat-color-ui-font-body !default;
213
213
 
214
214
  $tokens: (
215
215
  'asset': (
@@ -264,8 +264,7 @@ $tokens: (
264
264
  ),
265
265
  'azeretMono': (
266
266
  'name': $cat-asset-font-azeret-mono-name,
267
- 'woff2Regular': $cat-asset-font-azeret-mono-woff2-regular,
268
- 'woff2SemiBold': $cat-asset-font-azeret-mono-woff2-semi-bold
267
+ 'woff2Regular': $cat-asset-font-azeret-mono-woff2-regular
269
268
  )
270
269
  )
271
270
  ),
@@ -378,7 +377,9 @@ $tokens: (
378
377
  'canvas': $cat-color-ui-background-canvas,
379
378
  'body': $cat-color-ui-background-body,
380
379
  'interaction': $cat-color-ui-background-interaction,
381
- 'notification': $cat-color-ui-background-notification
380
+ 'notification': $cat-color-ui-background-notification,
381
+ 'skeleton': $cat-color-ui-background-skeleton,
382
+ 'skeletonHighlight': $cat-color-ui-background-skeleton-highlight
382
383
  ),
383
384
  'border': (
384
385
  'default': $cat-color-ui-border-default,
@@ -386,11 +387,10 @@ $tokens: (
386
387
  'focus': $cat-color-ui-border-focus
387
388
  ),
388
389
  'font': (
389
- 'primary': $cat-color-ui-font-primary,
390
- 'secondary': $cat-color-ui-font-secondary,
391
- 'success': $cat-color-ui-font-success,
392
- 'warning': $cat-color-ui-font-warning,
393
- 'danger': $cat-color-ui-font-danger,
390
+ 'head': $cat-color-ui-font-head,
391
+ 'body': $cat-color-ui-font-body,
392
+ 'mono': $cat-color-ui-font-mono,
393
+ 'muted': $cat-color-ui-font-muted,
394
394
  'quote': $cat-color-ui-font-quote,
395
395
  'quoteSource': $cat-color-ui-font-quote-source
396
396
  )
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@haiilo/catalyst-tokens",
3
- "version": "0.1.1",
3
+ "version": "0.1.4",
4
4
  "description": "Design tokens for Catalyst Design System",
5
5
  "license": "MIT",
6
6
  "repository": {