@clay-design-system/tokens 0.19.0 → 0.20.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 (8) hide show
  1. package/dist/TOKEN_REFERENCE.md +13 -2
  2. package/dist/tokens.cjs +11 -1
  3. package/dist/tokens.css +11 -1
  4. package/dist/tokens.d.cts +10 -0
  5. package/dist/tokens.d.ts +10 -0
  6. package/dist/tokens.js +13 -1
  7. package/dist/tokens.resolved.css +11 -1
  8. package/package.json +1 -1
package/dist/TOKEN_REFERENCE.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Token Reference (auto-generated)
2
2
 
3
- > Generated by `@clay-design-system/tokens` build. 1142 tokens total.
3
+ > Generated by `@clay-design-system/tokens` build. 1152 tokens total.
4
4
 
5
5
  ## aspect-1
6
6
 
@@ -497,6 +497,17 @@
497
497
  | `--clay-checkbox-square-padding-left` | `var(--clay-size-space-200)` |
498
498
  | `--clay-checkbox-square-padding-right` | `var(--clay-size-space-400)` |
499
499
 
500
+ ## code-block
501
+
502
+ | Token | Value |
503
+ |-------|-------|
504
+ | `--clay-code-block-terminal-divider` | `var(--clay-foundation-brand-color-grey-800)` |
505
+ | `--clay-code-block-light-bg` | `var(--clay-color-background-default-secondary)` |
506
+ | `--clay-code-block-light-text` | `var(--clay-color-text-default-default)` |
507
+ | `--clay-code-block-light-muted` | `var(--clay-color-text-default-secondary)` |
508
+ | `--clay-code-block-light-divider` | `var(--clay-color-border-neutral-tertiary)` |
509
+ | `--clay-code-block-terminal-text` | `var(--clay-color-text-on-dark)` |
510
+
500
511
  ## color-background
501
512
 
502
513
  | Token | Value |
@@ -1780,7 +1791,7 @@
1780
1791
  | `--clay-web-type-h3-line-height` | `var(--clay-web-type-h3-desktop-line-height)` |
1781
1792
  | `--clay-web-type-p5-letter-spacing` | `var(--clay-web-type-p-letter-spacing)` |
1782
1793
  | `--clay-web-type-family` | `var(--clay-foundation-type-family-sans)` |
1783
- | `--clay-web-type-family-mono` | `var(--clay-foundation-type-family-sans)` |
1794
+ | `--clay-web-type-family-mono` | `var(--clay-foundation-type-family-mono)` |
1784
1795
  | `--clay-web-type-weight-regular` | `var(--clay-foundation-type-weight-regular)` |
1785
1796
  | `--clay-web-type-weight-medium` | `var(--clay-foundation-type-weight-medium)` |
1786
1797
  | `--clay-web-type-weight-semi` | `var(--clay-foundation-type-weight-semi)` |
package/dist/tokens.cjs CHANGED
@@ -81,6 +81,7 @@ exports.ClayFoundationStrokeWidth = 1;
81
81
  exports.ClayFoundationStrokeColor = "#cacbcd";
82
82
  exports.ClayFoundationTypeFamilySans = "Poppins, sans-serif";
83
83
  exports.ClayFoundationTypeFamilyPlatform = "Figtree, system-ui, sans-serif";
84
+ exports.ClayFoundationTypeFamilyMono = "ui-monospace, SF Mono, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace";
84
85
  exports.ClayFoundationTypeWeightLight = 300;
85
86
  exports.ClayFoundationTypeWeightRegular = 400;
86
87
  exports.ClayFoundationTypeWeightMedium = 500;
@@ -280,7 +281,7 @@ exports.ClayWebTypeH3LineHeight = 1.2;
280
281
  exports.ClayWebTypeH3Weight = 400;
281
282
  exports.ClayWebTypeP5LetterSpacing = 0;
282
283
  exports.ClayWebTypeFamily = "Poppins, sans-serif";
283
- exports.ClayWebTypeFamilyMono = "Poppins, sans-serif";
284
+ exports.ClayWebTypeFamilyMono = "ui-monospace, SF Mono, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace";
284
285
  exports.ClayWebTypeWeightRegular = 400;
285
286
  exports.ClayWebTypeWeightMedium = 500;
286
287
  exports.ClayWebTypeWeightSemi = 600;
@@ -834,6 +835,15 @@ exports.ClayCheckboxIconGap = 12;
834
835
  exports.ClayCheckboxIconMinWidth = 88;
835
836
  exports.ClayCheckboxIconPaddingY = 16;
836
837
  exports.ClayCheckboxIconPaddingX = 12;
838
+ exports.ClayCodeBlockTerminalBg = "#17181c";
839
+ exports.ClayCodeBlockTerminalText = "#ffffff";
840
+ exports.ClayCodeBlockTerminalMuted = "#cacbcd";
841
+ exports.ClayCodeBlockTerminalDivider = "#252526";
842
+ exports.ClayCodeBlockTerminalDot = "#45454a";
843
+ exports.ClayCodeBlockLightBg = "#f3f4f5";
844
+ exports.ClayCodeBlockLightText = "#252526";
845
+ exports.ClayCodeBlockLightMuted = "#45454a";
846
+ exports.ClayCodeBlockLightDivider = "#e6e7ea";
837
847
  exports.ClayCustomerStoryCardRadius = 12;
838
848
  exports.ClayCustomerStoryCardMediaRadius = 8;
839
849
  exports.ClayCustomerStoryCardAvatarRadius = 9999;
package/dist/tokens.css CHANGED
@@ -84,6 +84,7 @@
84
84
  --clay-foundation-stroke-color: #cacbcd;
85
85
  --clay-foundation-type-family-sans: Poppins, sans-serif;
86
86
  --clay-foundation-type-family-platform: Figtree, system-ui, sans-serif;
87
+ --clay-foundation-type-family-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; /** System monospace stack (no font file): code blocks and other fixed-width text. */
87
88
  --clay-foundation-type-weight-light: 300;
88
89
  --clay-foundation-type-weight-regular: 400;
89
90
  --clay-foundation-type-weight-medium: 500;
@@ -677,7 +678,7 @@
677
678
  --clay-web-type-h3-line-height: var(--clay-web-type-h3-desktop-line-height);
678
679
  --clay-web-type-p5-letter-spacing: var(--clay-web-type-p-letter-spacing);
679
680
  --clay-web-type-family: var(--clay-foundation-type-family-sans);
680
- --clay-web-type-family-mono: var(--clay-foundation-type-family-sans);
681
+ --clay-web-type-family-mono: var(--clay-foundation-type-family-mono);
681
682
  --clay-web-type-weight-regular: var(--clay-foundation-type-weight-regular);
682
683
  --clay-web-type-weight-medium: var(--clay-foundation-type-weight-medium);
683
684
  --clay-web-type-weight-semi: var(--clay-foundation-type-weight-semi);
@@ -755,6 +756,10 @@
755
756
  --clay-checkbox-check-color: var(--clay-color-icon-neutral-on-neutral);
756
757
  --clay-checkbox-check-size: var(--clay-size-icon-check);
757
758
  --clay-checkbox-group-font-size: var(--clay-web-type-p4-size);
759
+ --clay-code-block-terminal-bg: var(--clay-foundation-brand-color-grey-900); /** Dark surface, softer than pure black so it reads as a terminal */
760
+ --clay-code-block-terminal-muted: var(--clay-foundation-brand-color-grey-300); /** File name and language label (11:1 on the surface) */
761
+ --clay-code-block-terminal-divider: var(--clay-foundation-brand-color-grey-800);
762
+ --clay-code-block-terminal-dot: var(--clay-foundation-brand-color-grey-700); /** Window dots, monochrome (never red/yellow/green) */
758
763
  --clay-hover-flip-card-heading-size: var(--clay-web-type-h3-desktop-size);
759
764
  --clay-hover-flip-card-heading-size-mobile: var(--clay-web-type-h3-mobile-size);
760
765
  --clay-hover-flip-card-heading-letter-spacing: var(--clay-web-type-h3-desktop-letter-spacing);
@@ -972,6 +977,10 @@
972
977
  --clay-checkbox-icon-gap: var(--clay-size-space-300);
973
978
  --clay-checkbox-icon-padding-y: var(--clay-size-space-400);
974
979
  --clay-checkbox-icon-padding-x: var(--clay-size-space-300);
980
+ --clay-code-block-light-bg: var(--clay-color-background-default-secondary);
981
+ --clay-code-block-light-text: var(--clay-color-text-default-default);
982
+ --clay-code-block-light-muted: var(--clay-color-text-default-secondary);
983
+ --clay-code-block-light-divider: var(--clay-color-border-neutral-tertiary);
975
984
  --clay-customer-story-card-radius: var(--clay-radius-md);
976
985
  --clay-customer-story-card-media-radius: var(--clay-radius-sm);
977
986
  --clay-customer-story-card-avatar-radius: var(--clay-radius-full);
@@ -1135,6 +1144,7 @@
1135
1144
  --clay-card-image-content-background: var(--clay-color-background-default-default);
1136
1145
  --clay-card-action-background: var(--clay-color-background-default-default);
1137
1146
  --clay-checkbox-bg: var(--clay-color-background-default-default);
1147
+ --clay-code-block-terminal-text: var(--clay-color-text-on-dark);
1138
1148
  --clay-customer-story-card-quote-with-picture-bg: var(--clay-color-background-default-default);
1139
1149
  --clay-input-bg: var(--clay-color-background-default-default);
1140
1150
  --clay-search-idle-icon-color: var(--clay-color-text-on-black);
package/dist/tokens.d.cts CHANGED
@@ -79,6 +79,7 @@ export declare const ClayFoundationStrokeWidth: number;
79
79
  export declare const ClayFoundationStrokeColor: string;
80
80
  export declare const ClayFoundationTypeFamilySans: string;
81
81
  export declare const ClayFoundationTypeFamilyPlatform: string;
82
+ export declare const ClayFoundationTypeFamilyMono: string;
82
83
  export declare const ClayFoundationTypeWeightLight: number;
83
84
  export declare const ClayFoundationTypeWeightRegular: number;
84
85
  export declare const ClayFoundationTypeWeightMedium: number;
@@ -832,6 +833,15 @@ export declare const ClayCheckboxIconGap: number;
832
833
  export declare const ClayCheckboxIconMinWidth: number;
833
834
  export declare const ClayCheckboxIconPaddingY: number;
834
835
  export declare const ClayCheckboxIconPaddingX: number;
836
+ export declare const ClayCodeBlockTerminalBg: string;
837
+ export declare const ClayCodeBlockTerminalText: string;
838
+ export declare const ClayCodeBlockTerminalMuted: string;
839
+ export declare const ClayCodeBlockTerminalDivider: string;
840
+ export declare const ClayCodeBlockTerminalDot: string;
841
+ export declare const ClayCodeBlockLightBg: string;
842
+ export declare const ClayCodeBlockLightText: string;
843
+ export declare const ClayCodeBlockLightMuted: string;
844
+ export declare const ClayCodeBlockLightDivider: string;
835
845
  export declare const ClayCustomerStoryCardRadius: number;
836
846
  export declare const ClayCustomerStoryCardMediaRadius: number;
837
847
  export declare const ClayCustomerStoryCardAvatarRadius: number;
package/dist/tokens.d.ts CHANGED
@@ -79,6 +79,7 @@ export declare const ClayFoundationStrokeWidth: number;
79
79
  export declare const ClayFoundationStrokeColor: string;
80
80
  export declare const ClayFoundationTypeFamilySans: string;
81
81
  export declare const ClayFoundationTypeFamilyPlatform: string;
82
+ export declare const ClayFoundationTypeFamilyMono: string;
82
83
  export declare const ClayFoundationTypeWeightLight: number;
83
84
  export declare const ClayFoundationTypeWeightRegular: number;
84
85
  export declare const ClayFoundationTypeWeightMedium: number;
@@ -832,6 +833,15 @@ export declare const ClayCheckboxIconGap: number;
832
833
  export declare const ClayCheckboxIconMinWidth: number;
833
834
  export declare const ClayCheckboxIconPaddingY: number;
834
835
  export declare const ClayCheckboxIconPaddingX: number;
836
+ export declare const ClayCodeBlockTerminalBg: string;
837
+ export declare const ClayCodeBlockTerminalText: string;
838
+ export declare const ClayCodeBlockTerminalMuted: string;
839
+ export declare const ClayCodeBlockTerminalDivider: string;
840
+ export declare const ClayCodeBlockTerminalDot: string;
841
+ export declare const ClayCodeBlockLightBg: string;
842
+ export declare const ClayCodeBlockLightText: string;
843
+ export declare const ClayCodeBlockLightMuted: string;
844
+ export declare const ClayCodeBlockLightDivider: string;
835
845
  export declare const ClayCustomerStoryCardRadius: number;
836
846
  export declare const ClayCustomerStoryCardMediaRadius: number;
837
847
  export declare const ClayCustomerStoryCardAvatarRadius: number;
package/dist/tokens.js CHANGED
@@ -88,6 +88,8 @@ export const ClayFoundationStrokeColor = "#cacbcd";
88
88
  export const ClayFoundationTypeFamilySans = "Poppins, sans-serif";
89
89
  export const ClayFoundationTypeFamilyPlatform =
90
90
  "Figtree, system-ui, sans-serif";
91
+ export const ClayFoundationTypeFamilyMono =
92
+ "ui-monospace, SF Mono, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace"; // System monospace stack (no font file): code blocks and other fixed-width text.
91
93
  export const ClayFoundationTypeWeightLight = 300;
92
94
  export const ClayFoundationTypeWeightRegular = 400;
93
95
  export const ClayFoundationTypeWeightMedium = 500;
@@ -287,7 +289,8 @@ export const ClayWebTypeH3LineHeight = 1.2;
287
289
  export const ClayWebTypeH3Weight = 400;
288
290
  export const ClayWebTypeP5LetterSpacing = 0;
289
291
  export const ClayWebTypeFamily = "Poppins, sans-serif";
290
- export const ClayWebTypeFamilyMono = "Poppins, sans-serif";
292
+ export const ClayWebTypeFamilyMono =
293
+ "ui-monospace, SF Mono, SFMono-Regular, Menlo, Consolas, Liberation Mono, monospace";
291
294
  export const ClayWebTypeWeightRegular = 400;
292
295
  export const ClayWebTypeWeightMedium = 500;
293
296
  export const ClayWebTypeWeightSemi = 600;
@@ -846,6 +849,15 @@ export const ClayCheckboxIconGap = 12;
846
849
  export const ClayCheckboxIconMinWidth = 88;
847
850
  export const ClayCheckboxIconPaddingY = 16;
848
851
  export const ClayCheckboxIconPaddingX = 12;
852
+ export const ClayCodeBlockTerminalBg = "#17181c"; // Dark surface, softer than pure black so it reads as a terminal
853
+ export const ClayCodeBlockTerminalText = "#ffffff";
854
+ export const ClayCodeBlockTerminalMuted = "#cacbcd"; // File name and language label (11:1 on the surface)
855
+ export const ClayCodeBlockTerminalDivider = "#252526";
856
+ export const ClayCodeBlockTerminalDot = "#45454a"; // Window dots, monochrome (never red/yellow/green)
857
+ export const ClayCodeBlockLightBg = "#f3f4f5";
858
+ export const ClayCodeBlockLightText = "#252526";
859
+ export const ClayCodeBlockLightMuted = "#45454a";
860
+ export const ClayCodeBlockLightDivider = "#e6e7ea";
849
861
  export const ClayCustomerStoryCardRadius = 12;
850
862
  export const ClayCustomerStoryCardMediaRadius = 8;
851
863
  export const ClayCustomerStoryCardAvatarRadius = 9999;
package/dist/tokens.resolved.css CHANGED
@@ -84,6 +84,7 @@
84
84
  --clay-foundation-stroke-color: #cacbcd;
85
85
  --clay-foundation-type-family-sans: Poppins, sans-serif;
86
86
  --clay-foundation-type-family-platform: Figtree, system-ui, sans-serif;
87
+ --clay-foundation-type-family-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; /** System monospace stack (no font file): code blocks and other fixed-width text. */
87
88
  --clay-foundation-type-weight-light: 300;
88
89
  --clay-foundation-type-weight-regular: 400;
89
90
  --clay-foundation-type-weight-medium: 500;
@@ -283,7 +284,7 @@
283
284
  --clay-web-type-h3-weight: 400;
284
285
  --clay-web-type-p5-letter-spacing: 0;
285
286
  --clay-web-type-family: Poppins, sans-serif;
286
- --clay-web-type-family-mono: Poppins, sans-serif;
287
+ --clay-web-type-family-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
287
288
  --clay-web-type-weight-regular: 400;
288
289
  --clay-web-type-weight-medium: 500;
289
290
  --clay-web-type-weight-semi: 600;
@@ -837,6 +838,15 @@
837
838
  --clay-checkbox-icon-min-width: 88;
838
839
  --clay-checkbox-icon-padding-y: 16;
839
840
  --clay-checkbox-icon-padding-x: 12;
841
+ --clay-code-block-terminal-bg: #17181c; /** Dark surface, softer than pure black so it reads as a terminal */
842
+ --clay-code-block-terminal-text: #ffffff;
843
+ --clay-code-block-terminal-muted: #cacbcd; /** File name and language label (11:1 on the surface) */
844
+ --clay-code-block-terminal-divider: #252526;
845
+ --clay-code-block-terminal-dot: #45454a; /** Window dots, monochrome (never red/yellow/green) */
846
+ --clay-code-block-light-bg: #f3f4f5;
847
+ --clay-code-block-light-text: #252526;
848
+ --clay-code-block-light-muted: #45454a;
849
+ --clay-code-block-light-divider: #e6e7ea;
840
850
  --clay-customer-story-card-radius: 12;
841
851
  --clay-customer-story-card-media-radius: 8;
842
852
  --clay-customer-story-card-avatar-radius: 9999;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@clay-design-system/tokens",
3
- "version": "0.19.0",
3
+ "version": "0.20.0",
4
4
  "type": "module",
5
5
  "exports": {
6
6
  ".": {