@clay-design-system/tokens 0.10.0 → 0.14.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 (13) hide show
  1. package/README.md +127 -0
  2. package/dist/TOKEN_REFERENCE.md +1 -2
  3. package/dist/mq.d.ts +4 -2
  4. package/dist/mq.js +8 -6
  5. package/dist/tokens.css +163 -4
  6. package/dist/tokens.d.ts +159 -0
  7. package/dist/tokens.js +165 -6
  8. package/dist/tokens.resolved.css +165 -6
  9. package/package.json +1 -1
  10. package/stylelint-plugin/allowed-breakpoints.js +75 -0
  11. package/stylelint-plugin/no-literal-values.js +178 -0
  12. package/stylelint-plugin/reduced-motion.js +57 -0
  13. package/stylelint-plugin/require-layer.js +66 -0
package/README.md ADDED
@@ -0,0 +1,127 @@
1
+ # @clay-design-system/tokens
2
+
3
+ Design tokens for the Clay design system, compiled from DTCG JSON sources using Style Dictionary 4.
4
+
5
+ ## Tier system
6
+
7
+ Tokens are organized in a layered hierarchy:
8
+
9
+ ```
10
+ Foundation (base primitives — colors, type, spacing, radius, effects)
11
+ ↓ referenced by
12
+ Semantic (purpose-driven tokens — background, text, border, icon, size, motion)
13
+ ↓ referenced by
14
+ Web / Platform / Marketing (tier-specific tokens — typography scales, component tokens)
15
+ ```
16
+
17
+ Components consume semantic or tier-specific tokens. The one raw primitive components may use is the brand palette (`--clay-foundation-brand-color-*`); the stylelint rule below blocks the retired colour names. Prefer semantic radius/spacing over raw `--clay-foundation-radius/spacing-*` (guideline, not lint-enforced).
18
+
19
+ ## Source structure
20
+
21
+ ```
22
+ src/
23
+ ├── foundation/ Foundation primitives
24
+ │ ├── colors.json Brand color palette → --clay-foundation-brand-color-* — exact Figma "Mode 1" stops (grey, yellow, lime, stone, harvest, orange, magenta, pink, iris, purple, blue, teal, green)
25
+ │ ├── typography.json Font families, weights, size scale
26
+ │ ├── spacing.json 18-step spacing scale (0-180)
27
+ │ ├── radius.json 10 radius values (none → full)
28
+ │ ├── effects.json Shadow + blur primitives
29
+ │ ├── stroke.json Border width + color
30
+ │ └── customer-logos.json Logo surface colors
31
+ ├── semantic/ Purpose-driven tokens
32
+ │ ├── color-primitives.json Neutrals, greys, brand palette aliases
33
+ │ ├── brand.json Product colors (monday, wm, crm, dev, svc)
34
+ │ ├── text.json 7 text color variants
35
+ │ ├── icon.json 7 icon color variants
36
+ │ ├── background.json 8 background variants + utilities
37
+ │ ├── border.json 9 border color variants
38
+ │ ├── size.json Space scale, icon sizes, depth
39
+ │ ├── radius.json Layout/card radius scale + aliases
40
+ │ ├── layout.json Container, grid, section, header, footer
41
+ │ ├── effects.json Shadows, glass, device-frame
42
+ │ ├── motion.json Duration, easing, transitions
43
+ │ └── breakpoints.json Responsive breakpoints
44
+ ├── web/ Web tier (marketing surfaces)
45
+ │ ├── typography.json 40 text styles (desktop + mobile)
46
+ │ ├── button.json Button: 4 sizes × 4 styles × 4 colors
47
+ │ ├── card.json Card: container, image, size scale
48
+ │ ├── input.json Input: colors, sizes, states
49
+ │ ├── toggle.json Toggle: track, thumb
50
+ │ ├── checkbox.json Checkbox: control, group, square
51
+ │ ├── tag.json Tag: background + dot variants
52
+ │ ├── tabs.json Tabs: triggers, panels, shells
53
+ │ └── slider.json Slider: dots + arrows
54
+ ├── platform/ Platform tier (product UI)
55
+ │ └── typography.json 11 text styles (headlines, labels, captions)
56
+ ├── marketing/ Marketing tier (campaigns)
57
+ │ └── customer-logos.json Logo height + surface colors
58
+ └── email/ Email tier (read by @clay-design-system/email at build time)
59
+ └── typography.json Lifecycle email type scale
60
+ ```
61
+
62
+ ## Output
63
+
64
+ `pnpm --filter @clay-design-system/tokens build` (`src/build.ts`) writes:
65
+
66
+ - `dist/tokens.css` (`@clay-design-system/tokens/css`) — every tier as CSS custom properties on `:root`; aliases stay `var()` so changes cascade
67
+ - `dist/tokens.resolved.css` (`@clay-design-system/tokens/css-resolved`) — the same with literal values
68
+ - `dist/tokens.js` + `.d.ts` (`@clay-design-system/tokens`) — JS constants (used by `@clay-design-system/email`)
69
+ - `dist/mq.js` (`@clay-design-system/tokens/mq`) — `mq` / `breakpoints` media-query helpers
70
+ - `dist/TOKEN_REFERENCE.md` — a generated listing of every token
71
+
72
+ ## Usage
73
+
74
+ ```tsx
75
+ // In your app entry point:
76
+ import '@clay-design-system/tokens/css'
77
+
78
+ // In component CSS:
79
+ .card {
80
+ border-radius: calc(var(--clay-card-radius-value) * 1px);
81
+ padding: calc(var(--clay-card-padding-value) * 1px);
82
+ background: var(--clay-card-background);
83
+ }
84
+ ```
85
+
86
+ ## Naming convention
87
+
88
+ ```
89
+ --clay-{tier?}-{category}-{variant?}-{property}
90
+ ```
91
+
92
+ - **Foundation**: `--clay-foundation-brand-color-iris-300`, `--clay-foundation-type-weight-medium`
93
+ - **Semantic**: `--clay-color-background-brand-default`, `--clay-size-space-400`, `--clay-motion-duration-fast`
94
+ - **Web**: `--clay-web-type-large-desktop-size`, `--clay-btn-primary-black-bg`
95
+ - **Platform**: `--clay-platform-type-headline-xl-600-size`
96
+ - **Component**: `--clay-card-radius`, `--clay-input-border-color`, `--clay-tabs-trigger-font-size`
97
+
98
+ ## Adding or modifying tokens
99
+
100
+ 1. Edit or create a `.json` file in `src/{tier}/`
101
+ 2. Use DTCG format: `{ "$value": ..., "$type": "..." }`
102
+ 3. Reference other tokens with `{clay.path.to.token}` syntax
103
+ 4. Run `pnpm build` — verify `dist/tokens.css` updated
104
+ 5. Check `dist/TOKEN_REFERENCE.md` for the generated output
105
+
106
+ ## Enforcement
107
+
108
+ The stylelint plugin `@clay-design-system/tokens/stylelint-plugin/no-foundation-tokens.js` (run by `pnpm --filter @clay-design-system/react lint`) blocks the retired colour names — `--clay-foundation-color-*`, `--clay-web-color-*`, `--clay-brand-color-*`. It polices the colour layer only.
109
+
110
+ ```json
111
+ {
112
+ "plugins": ["@clay-design-system/tokens/stylelint-plugin/no-foundation-tokens.js"],
113
+ "rules": { "clay-ds/no-foundation-tokens": true }
114
+ }
115
+ ```
116
+
117
+ ## Unitless values
118
+
119
+ Most numeric tokens are unitless. In CSS, multiply by `1px`:
120
+
121
+ ```css
122
+ padding: calc(var(--clay-size-space-400) * 1px); /* → 16px */
123
+ ```
124
+
125
+ This allows tokens to be used in calculations without unit conflicts.
126
+
127
+ Agent-facing token guide (heading tiers, naming, usage rules): `skills/web-design-brain/reference/TOKENS.md`.
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. 983 tokens total.
3
+ > Generated by `@clay-design-system/tokens` build. 1142 tokens total.
4
4
 
5
5
  ## aspect-1
6
6
 
@@ -706,7 +706,6 @@
706
706
  | Token | Value |
707
707
  |-------|-------|
708
708
  | `--clay-color-text-default-default` | `var(--clay-foundation-brand-color-grey-800)` |
709
- | `--clay-color-text-default-secondary` | `var(--clay-foundation-brand-color-grey-500)` |
710
709
  | `--clay-color-text-default-tertiary` | `var(--clay-foundation-brand-color-grey-300)` |
711
710
  | `--clay-color-text-disabled-default` | `var(--clay-foundation-brand-color-grey-500)` |
712
711
  | `--clay-color-text-brand-default` | `var(--clay-foundation-brand-color-iris-300)` |
package/dist/mq.d.ts CHANGED
@@ -1,15 +1,17 @@
1
- // Auto-generated by @clay-design-system/tokens build — do not edit.
1
+ // Auto-generated by @clay-design-system/tokens build from src/semantic/breakpoints.json — do not edit.
2
2
  export declare const breakpoints: {
3
3
  mobile: 0;
4
4
  largeMobile: 480;
5
5
  tablet: 768;
6
6
  laptop: 992;
7
- desktop: 1230;
7
+ smallDesktop: 1024;
8
+ desktop: 1280;
8
9
  };
9
10
 
10
11
  export declare const mq: {
11
12
  largeMobile: string;
12
13
  tablet: string;
13
14
  laptop: string;
15
+ smallDesktop: string;
14
16
  desktop: string;
15
17
  };
package/dist/mq.js CHANGED
@@ -1,16 +1,18 @@
1
- // Auto-generated by @clay-design-system/tokens build — do not edit.
1
+ // Auto-generated by @clay-design-system/tokens build from src/semantic/breakpoints.json — do not edit.
2
2
  // mobile (0) is the default; no media query needed.
3
3
  export const breakpoints = {
4
4
  mobile: 0,
5
5
  largeMobile: 480,
6
6
  tablet: 768,
7
7
  laptop: 992,
8
- desktop: 1230,
8
+ smallDesktop: 1024,
9
+ desktop: 1280,
9
10
  };
10
11
 
11
12
  export const mq = {
12
- largeMobile: '@media (min-width: 480px)',
13
- tablet: '@media (min-width: 768px)',
14
- laptop: '@media (min-width: 992px)',
15
- desktop: '@media (min-width: 1230px)',
13
+ largeMobile: '@media (min-width: 480px)',
14
+ tablet: '@media (min-width: 768px)',
15
+ laptop: '@media (min-width: 992px)',
16
+ smallDesktop: '@media (min-width: 1024px)',
17
+ desktop: '@media (min-width: 1280px)',
16
18
  };
package/dist/tokens.css CHANGED
@@ -8,7 +8,7 @@
8
8
  --clay-foundation-brand-color-grey-200: #e6e7ea;
9
9
  --clay-foundation-brand-color-grey-300: #cacbcd;
10
10
  --clay-foundation-brand-color-grey-500: #7c7b7b;
11
- --clay-foundation-brand-color-grey-700: #45454a; /** Dark elevation */
11
+ --clay-foundation-brand-color-grey-700: #45454a; /** Dark elevation; secondary text (text-default-secondary, WCAG AA) */
12
12
  --clay-foundation-brand-color-grey-800: #252526;
13
13
  --clay-foundation-brand-color-grey-900: #17181c; /** Deep dark background */
14
14
  --clay-foundation-brand-color-grey-950: #000000; /** Pure black */
@@ -117,6 +117,7 @@
117
117
  --clay-aspect-3-2: 3 / 2;
118
118
  --clay-aspect-16-9: 16 / 9;
119
119
  --clay-aspect-9-16: 9 / 16;
120
+ --clay-color-border-neutral-translucent: rgba(28, 29, 33, 0.5); /** Half-opacity neutral line, e.g. a text-link underline. */
120
121
  --clay-color-black: #000000;
121
122
  --clay-color-black-100: rgba(0, 0, 0, 0.05);
122
123
  --clay-color-black-200: rgba(0, 0, 0, 0.1);
@@ -157,10 +158,12 @@
157
158
  --clay-color-icon-danger-on-danger: #fee9e7;
158
159
  --clay-color-icon-danger-on-danger-secondary: #900b09;
159
160
  --clay-color-icon-danger-on-danger-tertiary: #900b09;
161
+ --clay-color-overlay-scrim: rgba(0, 0, 0, 0.5); /** Half-opacity black, the dark end of an image-to-transparent gradient. */
160
162
  --clay-breakpoint-large-mobile: 480; /** 480px+ — phablet / landscape phone */
161
163
  --clay-breakpoint-tablet: 768; /** 768px+ — tablet portrait */
162
- --clay-breakpoint-laptop: 992; /** 992px+ — medium-large screens */
163
- --clay-breakpoint-desktop: 1230; /** 1230px+ — large screens */
164
+ --clay-breakpoint-laptop: 992; /** 992px+ — small laptop / tablet landscape */
165
+ --clay-breakpoint-small-desktop: 1024; /** 1024px+ — small desktop */
166
+ --clay-breakpoint-desktop: 1280; /** 1280px+ — desktop */
164
167
  --clay-web-type-huge-desktop-size: 128;
165
168
  --clay-web-type-huge-desktop-line-height: 1;
166
169
  --clay-web-type-huge-desktop-letter-spacing: -0.03;
@@ -228,6 +231,152 @@
228
231
  --clay-web-type-p5-size: 12;
229
232
  --clay-web-type-p-line-height: 1.5;
230
233
  --clay-web-type-p-letter-spacing: 0;
234
+ --clay-web-type-small-letter-spacing: -0.01; /** Letter-spacing (em) for 13–14px small text (footer links and headings). */
235
+ --clay-web-bullets-section-heading-max-width: 700; /** `.heading` max-width — px */
236
+ --clay-web-bullets-section-grid-gap-laptop: 84; /** `.grid` gap — px */
237
+ --clay-web-bullets-section-text-column-max-width-desktop: 436; /** `.textColumn` max-width — px */
238
+ --clay-web-bullets-section-cards-grid-max-width-desktop: 804; /** `.cardsGrid` max-width — px */
239
+ --clay-web-cards-section-text-block-max-width-desktop: 540; /** `.textBlock` max-width — px */
240
+ --clay-web-cards-section-side-by-side-media-max-width-laptop: 608; /** `.side-by-side .media` max-width — px */
241
+ --clay-web-cards-section-grid-media-height: 280; /** `.gridMedia` height — px */
242
+ --clay-web-cards-section-grid-card-height-desktop: 332; /** `.gridCard` height — px */
243
+ --clay-web-cards-section-grid-media-width-desktop: 315; /** `.gridMedia` width; `.gridMedia` min-width — px */
244
+ --clay-web-cards-section-mm-media-card-height: 272; /** `.mmMediaCard` height — px */
245
+ --clay-web-cards-section-mt-media-area-height: 240; /** `.mtMediaArea` height — px */
246
+ --clay-web-cards-section-mt-tag-height: 34; /** `.mtTag` height — px */
247
+ --clay-web-cards-section-mt-media-area-height-desktop: 360; /** `.mtMediaArea` height — px */
248
+ --clay-web-cards-section-section-header-max-width: 768; /** `.sectionHeader` max-width — px */
249
+ --clay-web-contact-section-logo-placeholder-width: 90; /** `.logoPlaceholder` width — px */
250
+ --clay-web-contact-section-phone-flag-width: 18; /** `.phoneFlag` width — px */
251
+ --clay-web-contact-section-phone-flag-height: 13; /** `.phoneFlag` height — px */
252
+ --clay-web-contact-section-phone-prefix-chevron-width: 9; /** `.phonePrefixChevron` width — px */
253
+ --clay-web-contact-section-phone-prefix-chevron-height: 5; /** `.phonePrefixChevron` height — px */
254
+ --clay-web-contact-section-content-max-width-laptop: 635; /** `.content` max-width — px */
255
+ --clay-web-contact-section-form-card-min-width-laptop: 320; /** `.formCard` min-width — px */
256
+ --clay-web-contact-section-form-card-max-width-laptop: 480; /** `.formCard` max-width — px */
257
+ --clay-web-contact-section-badge-width: 95; /** `.badgeImage` width (trust badge image) — px */
258
+ --clay-web-contact-section-badge-height: 109; /** `.badgeImage` height (trust badge image) — px */
259
+ --clay-web-country-flag-xs-height: 11; /** `.xs` height — px */
260
+ --clay-web-country-flag-sm-height: 14; /** `.sm` height — px */
261
+ --clay-web-country-flag-lg-height: 22; /** `.lg` height — px */
262
+ --clay-web-cta-section-column-max-width: 960; /** `.column` max-width — px */
263
+ --clay-web-customer-logo-web-width: 100; /** `.web` width — px */
264
+ --clay-web-customer-logo-web-height: 46.667; /** `.web` height — px */
265
+ --clay-web-customers-big-cards-slide-width: 1120; /** `.slide` width — px */
266
+ --clay-web-customers-big-cards-card-quote-font-size: 28; /** `.cardQuote` font-size — px */
267
+ --clay-web-customers-big-cards-card-image-wrap-width-laptop: 380; /** `.cardImageWrap` width — px */
268
+ --clay-web-customers-big-cards-card-image-wrap-height-laptop: 476; /** `.cardImageWrap` height — px */
269
+ --clay-web-customers-big-cards-card-content-height-laptop: 476; /** `.cardContent` height — px */
270
+ --clay-web-faq-section-centered-list-width-laptop: 720; /** `.centered .list` width — px */
271
+ --clay-web-features-section-stroke-section-desc-max-width: 600; /** `.strokeSectionDesc` max-width — px */
272
+ --clay-web-features-section-stroke-text-group-max-width: 480; /** `.strokeTextGroup` max-width — px */
273
+ --clay-web-features-section-tc-tab-height: 54; /** `.tcTab` height — px */
274
+ --clay-web-features-section-tc-media-height: 280; /** `.tcMedia` height — px */
275
+ --clay-web-features-section-sr-card-inner-max-width: 544; /** `.srCardInner` max-width — px */
276
+ --clay-web-features-section-na-mobile-number-top: 18; /** `.naMobileNumber` top — px */
277
+ --clay-web-features-section-tab-text-max-width-tablet: 448; /** `.tabText` max-width — px */
278
+ --clay-web-features-section-tab-media-max-width-tablet: 608; /** `.tabMedia` max-width — px */
279
+ --clay-web-features-section-lrm-media-max-width-laptop: 656; /** `.lrmMedia` max-width — px */
280
+ --clay-web-features-section-stroke-media-max-width-desktop: 640; /** `.strokeMedia` max-width — px */
281
+ --clay-web-features-section-tc-card-basis-desktop: 860; /** `.tcCard` flex — px */
282
+ --clay-web-features-section-na-panel-basis-desktop: 82; /** `.naPanel` flex; `.naPanelSide` flex; `.naPanelSide` min-width — px */
283
+ --clay-web-features-section-na-media-max-height-tablet: 400; /** `.naMobileMedia` media max-height (768–991) — px */
284
+ --clay-web-features-section-na-media-max-height-laptop: 400; /** `.naMedia` media max-height (992–1279) — px */
285
+ --clay-web-features-section-na-media-max-height-desktop: 560; /** `.naMedia` media max-height (1280+) — px */
286
+ --clay-web-features-section-na-label-wrap-width-desktop: 34; /** `.naLabelWrap` width — px */
287
+ --clay-web-features-section-sn-rows-max-width-desktop: 992; /** `.snRows` max-width — px */
288
+ --clay-web-features-section-section-heading-max-width: 768; /** `.hiHeader` max-width; `.naSectionHeader` max-width; `.hmtSectionHeading` max-width; +1 more — px */
289
+ --clay-web-features-section-tc-card-icon-size: 54; /** `.tcCardIcon` width; `.tcCardIcon` height — px */
290
+ --clay-web-features-section-tc-card-icon-size-desktop: 70; /** `.tcCardIcon` width; `.tcCardIcon` height — px */
291
+ --clay-web-features-section-sil-icon-size: 44; /** `.silIcon` width; `.silIcon` height — px */
292
+ --clay-web-features-section-sr-tag-dot-size: 18; /** `.srTagDot` width; `.srTagDot` height — px */
293
+ --clay-web-footer-section-column-padding-bottom: 35; /** `.column` padding-bottom — px */
294
+ --clay-web-footer-section-column-brand-padding-top: 10; /** `.columnBrand` padding-top — px */
295
+ --clay-web-footer-section-logo-img-height: 26; /** `.logoImg` height — px */
296
+ --clay-web-footer-section-heading-margin-top: 10; /** `.heading` margin — px */
297
+ --clay-web-footer-section-heading-margin-bottom: 18; /** `.heading` margin — px */
298
+ --clay-web-footer-section-links-gap: 15.5; /** `.links` gap — px */
299
+ --clay-web-footer-section-link-line-height: 22; /** `.link` line-height — px */
300
+ --clay-web-footer-section-sub-group-margin-top: 38; /** `.subGroup` margin-top — px */
301
+ --clay-web-footer-section-bottom-center-gap: 5; /** `.bottomCenter` gap — px */
302
+ --clay-web-footer-section-legal-link-line-height: 18; /** `.legalLink` line-height — px */
303
+ --clay-web-footer-section-copyright-line-height: 20; /** `.copyright` line-height — px */
304
+ --clay-web-footer-section-pipe-height-laptop: 14; /** `.pipe` height — px */
305
+ --clay-web-footer-section-short-column-max-width-laptop: 222; /** `.short .column` max-width — px */
306
+ --clay-web-footer-section-short-column-basis-laptop: 220; /** `.short .columnBrand` flex; `.short .column:first-child` flex — px */
307
+ --clay-web-footer-section-link-icon-size: 18; /** `.linkIcon` width; `.linkIcon` height — px */
308
+ --clay-web-footer-section-accessibility-icon-size: 21; /** `.accessibilityIcon` width; `.accessibilityIcon` height — px */
309
+ --clay-web-footer-section-bottom-row-height-laptop: 92; /** `.bottomLeft` height; `.bottomCenter` height; `.bottomRight` height — px */
310
+ --clay-web-footer-section-small-font-size: 13; /** `.link` font-size; `.legalLink` font-size; `.copyright` font-size — px */
311
+ --clay-web-header-section-column-max-width: 960; /** `.column` max-width — px */
312
+ --clay-web-header-section-heading-fluid-intercept: 30.2864; /** `.heading` font-size; `.split .heading` font-size — px */
313
+ --clay-web-header-section-description-fluid-intercept: 15.4288; /** `.description` font-size — px */
314
+ --clay-web-header-section-action-caption-font-size: 13; /** `.actionCaption` font-size — px */
315
+ --clay-web-header-section-media-max-width-laptop: 1096; /** `.media` max-width — px */
316
+ --clay-web-header-section-split-content-max-width-laptop: 544; /** `.split .content` max-width — px */
317
+ --clay-web-header-section-split-media-max-width-laptop: 600; /** `.split .media` max-width — px */
318
+ --clay-web-header-section-split-media-max-width-desktop: 656; /** `.split .media` max-width — px */
319
+ --clay-web-header-section-split-search-actions-max-width-laptop: 513; /** `.split-search .actions` max-width — px */
320
+ --clay-web-header-section-split-full-image-media-height: 375; /** `.split-full-image .media` height — px */
321
+ --clay-web-header-section-split-full-image-content-max-width-laptop: 560; /** `.split-full-image .content` max-width — px */
322
+ --clay-web-header-section-split-mosaic-media-height: 460; /** `.split-mosaic .media` height — px */
323
+ --clay-web-header-section-card-height-laptop: 640; /** `.card` height — px */
324
+ --clay-web-header-section-default-content-max-width-laptop: 729; /** `.default .content` max-width — px */
325
+ --clay-web-header-section-default-content-gap-laptop: 30; /** `.default .content` gap — px */
326
+ --clay-web-header-section-heading-fluid-intercept-desktop: 12.5712; /** `.split .heading` font-size — px */
327
+ --clay-web-header-section-column-min-width-laptop: 300; /** `.split-full-image .column` min-width; `.split-mosaic .column` min-width; `.split-strip .column` min-width — px */
328
+ --clay-web-integrations-strip-outer-height: 90; /** `.stripOuter` height — px */
329
+ --clay-web-integrations-hex-badge-height: 90; /** `.hexBadge` height — px */
330
+ --clay-web-integrations-heading-max-width-laptop: 720; /** `.heading` max-width — px */
331
+ --clay-web-integrations-description-max-width-laptop: 754; /** `.description` max-width — px */
332
+ --clay-web-motion-lightbox-dialog-width: 1200; /** `.clay-lightbox-dialog` width — px */
333
+ --clay-web-navbar-menu-logo-img-max-width: 260; /** `.logoImg` max-width — px */
334
+ --clay-web-navbar-menu-menu-icon-gap: 3; /** `.menuIcon` gap — px */
335
+ --clay-web-navbar-menu-menu-icon-width: 18; /** `.menuIcon` width — px */
336
+ --clay-web-navbar-menu-menu-bar-width: 18; /** `.menuBar` width — px */
337
+ --clay-web-navbar-menu-dropdown-column-min-width: 140; /** `.dropdownColumn` min-width — px */
338
+ --clay-web-navbar-menu-inner-padding-y: 14; /** `.inner` padding-top; `.inner` padding-bottom — px */
339
+ --clay-web-navbar-menu-dropdown-item-icon-size: 17; /** `.dropdownItemIcon` width; `.dropdownItemIcon` height — px */
340
+ --clay-web-shapes-orb-swoosh-offset-y-33: 5; /** `33%` transform — px */
341
+ --clay-web-shapes-orb-swoosh-offset-y-66: 3; /** `66%` transform — px */
342
+ --clay-web-site-footer-grid-column: 140; /** `.grid` grid-template-columns — px */
343
+ --clay-web-testimonials-section-logo-slot-height: 62; /** `.logoSlot` height; `.splitLogoSlot` height; `.centeredLogoSlot` height — px */
344
+ --clay-web-testimonials-section-logo-slot-width: 132; /** `.logoSlot` width; `.splitLogoSlot` width; `.centeredLogoSlot` width — px */
345
+ --clay-web-testimonials-section-summary-card-width-laptop: 484; /** `.summaryCard` width — px */
346
+ --clay-web-testimonials-section-avatar-width-laptop: 300; /** `.avatar` width; `.centeredAvatar` width — px */
347
+ --clay-web-testimonials-section-carousel-card-min-height: 513; /** `.carouselCard` min-height — px */
348
+ --clay-web-testimonials-section-split-divider-height-laptop: 61; /** `.splitDivider` height — px */
349
+ --clay-web-testimonials-section-centered-content-max-width-laptop: 768; /** `.centeredContent` max-width — px */
350
+ --clay-web-testimonials-section-case-study-card-logo-slot-height: 47; /** `.caseStudyCardLogoSlot` height; `.statQuoteLogoSlot` height — px */
351
+ --clay-web-testimonials-section-case-study-card-logo-slot-width: 100; /** `.caseStudyCardLogoSlot` width; `.statQuoteLogoSlot` width — px */
352
+ --clay-web-testimonials-section-case-study-card-media-height: 146; /** `.caseStudyCardMedia` height — px */
353
+ --clay-web-testimonials-section-case-study-stat-label-width: 132; /** `.caseStudyStatLabel` width — px */
354
+ --clay-web-testimonials-section-case-study-card-basis-laptop: 390; /** `.caseStudyCard` flex — px */
355
+ --clay-web-testimonials-section-stat-quote-card-max-width-laptop: 1102; /** `.statQuoteCard` max-width — px */
356
+ --clay-web-testimonials-section-stat-quote-stat-col-width-laptop: 380; /** `.statQuoteStatCol` width — px */
357
+ --clay-web-testimonials-section-quote-card-logo-slot-height: 56; /** `.quoteCardLogoSlot` height — px */
358
+ --clay-web-testimonials-section-quote-cards-heading-width-laptop: 497; /** `.quote-cards .quoteCardsHeading` width — px */
359
+ --clay-web-testimonials-section-quote-card-basis-laptop: 416; /** `.quote-cards .quoteCardsTrack` max-inline-size; `.quote-cards .quoteCard` flex — px */
360
+ --clay-web-testimonials-section-qcm-card-media-height: 246; /** `.qcmCardMedia` height — px */
361
+ --clay-web-testimonials-section-qcm-card-logo-slot-height: 49; /** `.qcmCardLogoSlot` height — px */
362
+ --clay-web-testimonials-section-qcm-card-logo-slot-width: 106; /** `.qcmCardLogoSlot` width — px */
363
+ --clay-web-testimonials-section-qcm-card-basis-laptop: 480; /** `.caseStudyHeading` max-width; `.qcmHeading` max-width; `.qcmTrack` max-inline-size; +1 more — px */
364
+ --clay-web-testimonials-section-avatar-photo-size: 56; /** `.avatarPhoto` width; `.avatarPhoto` height; `.quoteCardAvatarPhoto` width; +3 more — px */
365
+ --clay-web-testimonials-section-split-column-max-width-laptop: 616; /** `.splitMediaSlot` max-width; `.splitTextCol` max-width — px */
366
+ --clay-web-testimonials-section-mixed-header-max-width-laptop: 1120; /** `.mixed-stat-and-quote .mixedHeader` max-width — px */
367
+ --clay-web-testimonials-section-mixed-header-text-max-width-laptop: 496; /** `.mixed-stat-and-quote .mixedHeaderText` max-width — px */
368
+ --clay-web-testimonials-section-mixed-carousel-card-width-laptop: 678; /** `.mixed-stat-and-quote .carouselCard` width — px */
369
+ --clay-web-testimonials-section-mixed-carousel-card-content-basis-laptop: 320; /** `.mixed-stat-and-quote .carouselCardContent` flex — px */
370
+ --clay-web-testimonials-section-mixed-carousel-card-media-size-laptop: 314; /** `.mixed-stat-and-quote .carouselCardMedia` flex; `.mixed-stat-and-quote .carouselCardMedia` width; `.mixed-stat-and-quote .carouselCardMedia` height — px */
371
+ --clay-web-testimonials-section-quote-icon-width: 88; /** `.statQuoteQuoteCol .quoteIcon` width — px */
372
+ --clay-web-testimonials-section-quote-icon-width-laptop: 123; /** `.statQuoteQuoteCol .quoteIcon` width — px */
373
+ --clay-web-trust-badge-regular-width: 104; /** `.regular` width — px */
374
+ --clay-web-trust-badge-large-width: 156; /** `.large` width — px */
375
+ --clay-web-trust-badge-large-height: 179; /** `.large` height — px */
376
+ --clay-web-trust-section-stat-card-min-height: 424; /** `.statCard` min-height — px */
377
+ --clay-web-trust-section-stat-logo-height: 60; /** `.statLogo` height — px */
378
+ --clay-web-trust-section-security-card-basis-desktop: 617; /** `.securityCard` flex — px */
379
+ --clay-web-trust-section-compliance-logo-size-tablet: 116; /** `.complianceLogo` width; `.complianceLogo` height — px */
231
380
  --clay-effect-shadow-light: 0px 0px 40px 0px rgba(23, 24, 28, 0.06);
232
381
  --clay-effect-shadow-hard: 0px 8px 40px 0px rgba(23, 24, 28, 0.12);
233
382
  --clay-effect-shadow-rise-small: 0px 4px 8px 0px rgba(23, 24, 28, 0.2);
@@ -237,6 +386,7 @@
237
386
  --clay-effect-glass-background: rgba(255, 255, 255, 0.1);
238
387
  --clay-effect-glass-blur: 33px;
239
388
  --clay-effect-glass-border: 1px solid rgba(255, 255, 255, 0.12);
389
+ --clay-effect-text-shadow-legible: 0px 1px 4px rgba(0, 0, 0, 0.5); /** Soft dark halo under light text on busy media (text-shadow: no spread value). */
240
390
  --clay-layout-container-max-width: 1440;
241
391
  --clay-layout-container-large: 1440;
242
392
  --clay-layout-container-narrow: 1220;
@@ -276,6 +426,7 @@
276
426
  --clay-size-icon-check: 14;
277
427
  --clay-size-icon-menu: 20;
278
428
  --clay-size-input-min-height: 40;
429
+ --clay-size-tap-target: 44; /** Minimum tap-target size (WCAG 2.5.5 / web-qa M1): the min-height / min-width of any link or control that is not a sized DS Button. Unitless px: calc(var(--clay-size-tap-target) * 1px). */
279
430
  --clay-size-toggle-track-width: 40;
280
431
  --clay-size-toggle-thumb: 16;
281
432
  --clay-size-toggle-thumb-offset: 4;
@@ -353,6 +504,9 @@
353
504
  --clay-card-horizontal-tag-icon-stack-size: 17;
354
505
  --clay-card-horizontal-media-height-mobile: 191;
355
506
  --clay-card-horizontal-min-height-desktop: 373;
507
+ --clay-card-action-card-variant-agent-width: 280; /** `.actionCard.variant_agent` width — px */
508
+ --clay-card-action-card-variant-agent-height: 332; /** `.actionCard.variant_agent` height — px */
509
+ --clay-card-action-card-variant-agent-icon-width: 240; /** `.actionCard.variant_agentIcon` width — px */
356
510
  --clay-checkbox-square-min-width: 100;
357
511
  --clay-checkbox-icon-min-width: 88;
358
512
  --clay-customer-story-card-avatar-size: 56;
@@ -361,6 +515,11 @@
361
515
  --clay-customer-story-card-quote-icon-width-mobile: 53;
362
516
  --clay-customer-story-card-quote-with-picture-media-height: 246;
363
517
  --clay-customer-story-card-mobile-min-height: 513;
518
+ --clay-customer-story-card-type-quote-with-picture-width: 479; /** `.type_quoteWithPicture` width — px */
519
+ --clay-customer-story-card-avatar-width: 300; /** `.avatar` width — px */
520
+ --clay-customer-story-card-logo-slot-height: 56; /** `.logoSlot` height — px */
521
+ --clay-customer-story-card-logo-slot-end-height: 50; /** `.logoSlotEnd` height — px */
522
+ --clay-customer-story-card-content-width: 320; /** `.statsContent` width; `.quoteContent` width — px */
364
523
  --clay-hover-flip-card-heading-line-height: 1.2;
365
524
  --clay-integration-card-width: 220;
366
525
  --clay-integration-card-min-height: 80;
@@ -505,7 +664,7 @@
505
664
  --clay-color-icon-brand-default: var(--clay-foundation-brand-color-iris-300);
506
665
  --clay-color-icon-brand-on-brand-tertiary: var(--clay-foundation-brand-color-iris-300);
507
666
  --clay-color-text-default-default: var(--clay-foundation-brand-color-grey-800);
508
- --clay-color-text-default-secondary: var(--clay-foundation-brand-color-grey-500);
667
+ --clay-color-text-default-secondary: var(--clay-foundation-brand-color-grey-700); /** WCAG AA for normal text on white (9.5:1) and grey-100 (8.7:1) */
509
668
  --clay-color-text-default-tertiary: var(--clay-foundation-brand-color-grey-300);
510
669
  --clay-color-text-disabled-default: var(--clay-foundation-brand-color-grey-500);
511
670
  --clay-color-text-brand-default: var(--clay-foundation-brand-color-iris-300);
package/dist/tokens.d.ts CHANGED
@@ -134,6 +134,7 @@ export declare const ClayColorBorderDefaultSecondary: string;
134
134
  export declare const ClayColorBorderDefaultTertiary: string;
135
135
  export declare const ClayColorBorderNeutralDefault: string;
136
136
  export declare const ClayColorBorderNeutralTertiary: string;
137
+ export declare const ClayColorBorderNeutralTranslucent: string;
137
138
  export declare const ClayColorBorderBrandDefault: string;
138
139
  export declare const ClayColorBorderBlackDefault: string;
139
140
  export declare const ClayColorBorderDangerDefault: string;
@@ -223,6 +224,7 @@ export declare const ClayColorIconDangerTertiary: string;
223
224
  export declare const ClayColorIconDangerOnDanger: string;
224
225
  export declare const ClayColorIconDangerOnDangerSecondary: string;
225
226
  export declare const ClayColorIconDangerOnDangerTertiary: string;
227
+ export declare const ClayColorOverlayScrim: string;
226
228
  export declare const ClayColorTextDefaultDefault: string;
227
229
  export declare const ClayColorTextDefaultSecondary: string;
228
230
  export declare const ClayColorTextDefaultTertiary: string;
@@ -258,6 +260,7 @@ export declare const ClayBrandSvcDark: string;
258
260
  export declare const ClayBreakpointLargeMobile: number;
259
261
  export declare const ClayBreakpointTablet: number;
260
262
  export declare const ClayBreakpointLaptop: number;
263
+ export declare const ClayBreakpointSmallDesktop: number;
261
264
  export declare const ClayBreakpointDesktop: number;
262
265
  export declare const ClayWebTypeHeadingLineHeight: number;
263
266
  export declare const ClayWebTypeBodyLineHeight: number;
@@ -362,14 +365,161 @@ export declare const ClayWebTypeP4Size: number;
362
365
  export declare const ClayWebTypeP5Size: number;
363
366
  export declare const ClayWebTypePLineHeight: number;
364
367
  export declare const ClayWebTypePLetterSpacing: number;
368
+ export declare const ClayWebTypeSmallLetterSpacing: number;
369
+ export declare const ClayWebBulletsSectionHeadingMaxWidth: number;
370
+ export declare const ClayWebBulletsSectionGridGapLaptop: number;
371
+ export declare const ClayWebBulletsSectionTextColumnMaxWidthDesktop: number;
372
+ export declare const ClayWebBulletsSectionCardsGridMaxWidthDesktop: number;
373
+ export declare const ClayWebCardsSectionTextBlockMaxWidthDesktop: number;
374
+ export declare const ClayWebCardsSectionSideBySideMediaMaxWidthLaptop: number;
375
+ export declare const ClayWebCardsSectionGridMediaHeight: number;
376
+ export declare const ClayWebCardsSectionGridCardHeightDesktop: number;
377
+ export declare const ClayWebCardsSectionGridMediaWidthDesktop: number;
378
+ export declare const ClayWebCardsSectionMmMediaCardHeight: number;
379
+ export declare const ClayWebCardsSectionMtMediaAreaHeight: number;
380
+ export declare const ClayWebCardsSectionMtTagHeight: number;
381
+ export declare const ClayWebCardsSectionMtMediaAreaHeightDesktop: number;
382
+ export declare const ClayWebCardsSectionSectionHeaderMaxWidth: number;
383
+ export declare const ClayWebContactSectionLogoPlaceholderWidth: number;
384
+ export declare const ClayWebContactSectionPhoneFlagWidth: number;
385
+ export declare const ClayWebContactSectionPhoneFlagHeight: number;
386
+ export declare const ClayWebContactSectionPhonePrefixChevronWidth: number;
387
+ export declare const ClayWebContactSectionPhonePrefixChevronHeight: number;
388
+ export declare const ClayWebContactSectionContentMaxWidthLaptop: number;
389
+ export declare const ClayWebContactSectionFormCardMinWidthLaptop: number;
390
+ export declare const ClayWebContactSectionFormCardMaxWidthLaptop: number;
391
+ export declare const ClayWebContactSectionBadgeWidth: number;
392
+ export declare const ClayWebContactSectionBadgeHeight: number;
393
+ export declare const ClayWebCountryFlagXsHeight: number;
394
+ export declare const ClayWebCountryFlagSmHeight: number;
395
+ export declare const ClayWebCountryFlagLgHeight: number;
396
+ export declare const ClayWebCtaSectionColumnMaxWidth: number;
397
+ export declare const ClayWebCustomerLogoWebWidth: number;
398
+ export declare const ClayWebCustomerLogoWebHeight: number;
399
+ export declare const ClayWebCustomersBigCardsSlideWidth: number;
400
+ export declare const ClayWebCustomersBigCardsCardQuoteFontSize: number;
401
+ export declare const ClayWebCustomersBigCardsCardImageWrapWidthLaptop: number;
402
+ export declare const ClayWebCustomersBigCardsCardImageWrapHeightLaptop: number;
403
+ export declare const ClayWebCustomersBigCardsCardContentHeightLaptop: number;
404
+ export declare const ClayWebFaqSectionCenteredListWidthLaptop: number;
365
405
  export declare const ClayWebFeaturesSectionCardRadius: number;
366
406
  export declare const ClayWebFeaturesSectionMediaRadius: number;
407
+ export declare const ClayWebFeaturesSectionStrokeSectionDescMaxWidth: number;
408
+ export declare const ClayWebFeaturesSectionStrokeTextGroupMaxWidth: number;
409
+ export declare const ClayWebFeaturesSectionTcTabHeight: number;
410
+ export declare const ClayWebFeaturesSectionTcMediaHeight: number;
411
+ export declare const ClayWebFeaturesSectionSrCardInnerMaxWidth: number;
412
+ export declare const ClayWebFeaturesSectionNaMobileNumberTop: number;
413
+ export declare const ClayWebFeaturesSectionTabTextMaxWidthTablet: number;
414
+ export declare const ClayWebFeaturesSectionTabMediaMaxWidthTablet: number;
415
+ export declare const ClayWebFeaturesSectionLrmMediaMaxWidthLaptop: number;
416
+ export declare const ClayWebFeaturesSectionStrokeMediaMaxWidthDesktop: number;
417
+ export declare const ClayWebFeaturesSectionTcCardBasisDesktop: number;
418
+ export declare const ClayWebFeaturesSectionNaPanelBasisDesktop: number;
419
+ export declare const ClayWebFeaturesSectionNaMediaMaxHeightTablet: number;
420
+ export declare const ClayWebFeaturesSectionNaMediaMaxHeightLaptop: number;
421
+ export declare const ClayWebFeaturesSectionNaMediaMaxHeightDesktop: number;
422
+ export declare const ClayWebFeaturesSectionNaLabelWrapWidthDesktop: number;
423
+ export declare const ClayWebFeaturesSectionSnRowsMaxWidthDesktop: number;
424
+ export declare const ClayWebFeaturesSectionSectionHeadingMaxWidth: number;
425
+ export declare const ClayWebFeaturesSectionTcCardIconSize: number;
426
+ export declare const ClayWebFeaturesSectionTcCardIconSizeDesktop: number;
427
+ export declare const ClayWebFeaturesSectionSilIconSize: number;
428
+ export declare const ClayWebFeaturesSectionSrTagDotSize: number;
429
+ export declare const ClayWebFooterSectionColumnPaddingBottom: number;
430
+ export declare const ClayWebFooterSectionColumnBrandPaddingTop: number;
431
+ export declare const ClayWebFooterSectionLogoImgHeight: number;
432
+ export declare const ClayWebFooterSectionHeadingMarginTop: number;
433
+ export declare const ClayWebFooterSectionHeadingMarginBottom: number;
434
+ export declare const ClayWebFooterSectionLinksGap: number;
435
+ export declare const ClayWebFooterSectionLinkLineHeight: number;
436
+ export declare const ClayWebFooterSectionSubGroupMarginTop: number;
437
+ export declare const ClayWebFooterSectionBottomCenterGap: number;
438
+ export declare const ClayWebFooterSectionLegalLinkLineHeight: number;
439
+ export declare const ClayWebFooterSectionCopyrightLineHeight: number;
440
+ export declare const ClayWebFooterSectionPipeHeightLaptop: number;
441
+ export declare const ClayWebFooterSectionShortColumnMaxWidthLaptop: number;
442
+ export declare const ClayWebFooterSectionShortColumnBasisLaptop: number;
443
+ export declare const ClayWebFooterSectionLinkIconSize: number;
444
+ export declare const ClayWebFooterSectionAccessibilityIconSize: number;
445
+ export declare const ClayWebFooterSectionBottomRowHeightLaptop: number;
446
+ export declare const ClayWebFooterSectionSmallFontSize: number;
447
+ export declare const ClayWebHeaderSectionColumnMaxWidth: number;
448
+ export declare const ClayWebHeaderSectionHeadingFluidIntercept: number;
449
+ export declare const ClayWebHeaderSectionDescriptionFluidIntercept: number;
450
+ export declare const ClayWebHeaderSectionActionCaptionFontSize: number;
451
+ export declare const ClayWebHeaderSectionMediaMaxWidthLaptop: number;
452
+ export declare const ClayWebHeaderSectionSplitContentMaxWidthLaptop: number;
453
+ export declare const ClayWebHeaderSectionSplitMediaMaxWidthLaptop: number;
454
+ export declare const ClayWebHeaderSectionSplitMediaMaxWidthDesktop: number;
455
+ export declare const ClayWebHeaderSectionSplitSearchActionsMaxWidthLaptop: number;
456
+ export declare const ClayWebHeaderSectionSplitFullImageMediaHeight: number;
457
+ export declare const ClayWebHeaderSectionSplitFullImageContentMaxWidthLaptop: number;
458
+ export declare const ClayWebHeaderSectionSplitMosaicMediaHeight: number;
459
+ export declare const ClayWebHeaderSectionCardHeightLaptop: number;
460
+ export declare const ClayWebHeaderSectionDefaultContentMaxWidthLaptop: number;
461
+ export declare const ClayWebHeaderSectionDefaultContentGapLaptop: number;
462
+ export declare const ClayWebHeaderSectionHeadingFluidInterceptDesktop: number;
463
+ export declare const ClayWebHeaderSectionColumnMinWidthLaptop: number;
464
+ export declare const ClayWebIntegrationsStripOuterHeight: number;
465
+ export declare const ClayWebIntegrationsHexBadgeHeight: number;
466
+ export declare const ClayWebIntegrationsHeadingMaxWidthLaptop: number;
467
+ export declare const ClayWebIntegrationsDescriptionMaxWidthLaptop: number;
468
+ export declare const ClayWebMotionLightboxDialogWidth: number;
469
+ export declare const ClayWebNavbarMenuLogoImgMaxWidth: number;
470
+ export declare const ClayWebNavbarMenuMenuIconGap: number;
471
+ export declare const ClayWebNavbarMenuMenuIconWidth: number;
472
+ export declare const ClayWebNavbarMenuMenuBarWidth: number;
473
+ export declare const ClayWebNavbarMenuDropdownColumnMinWidth: number;
474
+ export declare const ClayWebNavbarMenuInnerPaddingY: number;
475
+ export declare const ClayWebNavbarMenuDropdownItemIconSize: number;
476
+ export declare const ClayWebShapesOrbSwooshOffsetY33: number;
477
+ export declare const ClayWebShapesOrbSwooshOffsetY66: number;
478
+ export declare const ClayWebSiteFooterGridColumn: number;
479
+ export declare const ClayWebTestimonialsSectionLogoSlotHeight: number;
480
+ export declare const ClayWebTestimonialsSectionLogoSlotWidth: number;
481
+ export declare const ClayWebTestimonialsSectionSummaryCardWidthLaptop: number;
482
+ export declare const ClayWebTestimonialsSectionAvatarWidthLaptop: number;
483
+ export declare const ClayWebTestimonialsSectionCarouselCardMinHeight: number;
484
+ export declare const ClayWebTestimonialsSectionSplitDividerHeightLaptop: number;
485
+ export declare const ClayWebTestimonialsSectionCenteredContentMaxWidthLaptop: number;
486
+ export declare const ClayWebTestimonialsSectionCaseStudyCardLogoSlotHeight: number;
487
+ export declare const ClayWebTestimonialsSectionCaseStudyCardLogoSlotWidth: number;
488
+ export declare const ClayWebTestimonialsSectionCaseStudyCardMediaHeight: number;
489
+ export declare const ClayWebTestimonialsSectionCaseStudyStatLabelWidth: number;
490
+ export declare const ClayWebTestimonialsSectionCaseStudyCardBasisLaptop: number;
491
+ export declare const ClayWebTestimonialsSectionStatQuoteCardMaxWidthLaptop: number;
492
+ export declare const ClayWebTestimonialsSectionStatQuoteStatColWidthLaptop: number;
493
+ export declare const ClayWebTestimonialsSectionQuoteCardLogoSlotHeight: number;
494
+ export declare const ClayWebTestimonialsSectionQuoteCardsHeadingWidthLaptop: number;
495
+ export declare const ClayWebTestimonialsSectionQuoteCardBasisLaptop: number;
496
+ export declare const ClayWebTestimonialsSectionQcmCardMediaHeight: number;
497
+ export declare const ClayWebTestimonialsSectionQcmCardLogoSlotHeight: number;
498
+ export declare const ClayWebTestimonialsSectionQcmCardLogoSlotWidth: number;
499
+ export declare const ClayWebTestimonialsSectionQcmCardBasisLaptop: number;
500
+ export declare const ClayWebTestimonialsSectionAvatarPhotoSize: number;
501
+ export declare const ClayWebTestimonialsSectionSplitColumnMaxWidthLaptop: number;
502
+ export declare const ClayWebTestimonialsSectionMixedHeaderMaxWidthLaptop: number;
503
+ export declare const ClayWebTestimonialsSectionMixedHeaderTextMaxWidthLaptop: number;
504
+ export declare const ClayWebTestimonialsSectionMixedCarouselCardWidthLaptop: number;
505
+ export declare const ClayWebTestimonialsSectionMixedCarouselCardContentBasisLaptop: number;
506
+ export declare const ClayWebTestimonialsSectionMixedCarouselCardMediaSizeLaptop: number;
507
+ export declare const ClayWebTestimonialsSectionQuoteIconWidth: number;
508
+ export declare const ClayWebTestimonialsSectionQuoteIconWidthLaptop: number;
509
+ export declare const ClayWebTrustBadgeRegularWidth: number;
510
+ export declare const ClayWebTrustBadgeLargeWidth: number;
511
+ export declare const ClayWebTrustBadgeLargeHeight: number;
512
+ export declare const ClayWebTrustSectionStatCardMinHeight: number;
513
+ export declare const ClayWebTrustSectionStatLogoHeight: number;
514
+ export declare const ClayWebTrustSectionSecurityCardBasisDesktop: number;
515
+ export declare const ClayWebTrustSectionComplianceLogoSizeTablet: number;
367
516
  export declare const ClayEffectShadowLight: string;
368
517
  export declare const ClayEffectShadowHard: string;
369
518
  export declare const ClayEffectDeviceFrameShadow: string;
370
519
  export declare const ClayEffectGlassBackground: string;
371
520
  export declare const ClayEffectGlassBlur: string;
372
521
  export declare const ClayEffectGlassBorder: string;
522
+ export declare const ClayEffectTextShadowLegible: string;
373
523
  export declare const ClayLayoutContainerMaxWidth: number;
374
524
  export declare const ClayLayoutContainerLarge: number;
375
525
  export declare const ClayLayoutContainerNarrow: number;
@@ -439,6 +589,7 @@ export declare const ClaySizeIconXsmall: number;
439
589
  export declare const ClaySizeIconCheck: number;
440
590
  export declare const ClaySizeIconMenu: number;
441
591
  export declare const ClaySizeInputMinHeight: number;
592
+ export declare const ClaySizeTapTarget: number;
442
593
  export declare const ClaySizeToggleTrackWidth: number;
443
594
  export declare const ClaySizeToggleThumb: number;
444
595
  export declare const ClaySizeToggleThumbOffset: number;
@@ -636,6 +787,9 @@ export declare const ClayCardHorizontalMinHeightDesktop: number;
636
787
  export declare const ClayCardHorizontalMobileRadius: number;
637
788
  export declare const ClayCardHorizontalMobilePadding: number;
638
789
  export declare const ClayCardHorizontalMobileGap: number;
790
+ export declare const ClayCardActionCardVariantAgentWidth: number;
791
+ export declare const ClayCardActionCardVariantAgentHeight: number;
792
+ export declare const ClayCardActionCardVariantAgentIconWidth: number;
639
793
  export declare const ClayCheckboxSize: number;
640
794
  export declare const ClayCheckboxRadius: number;
641
795
  export declare const ClayCheckboxGap: number;
@@ -690,6 +844,11 @@ export declare const ClayCustomerStoryCardQuoteWithPictureMediaHeight: number;
690
844
  export declare const ClayCustomerStoryCardQuoteWithPictureAvatarGap: number;
691
845
  export declare const ClayCustomerStoryCardMobileMinHeight: number;
692
846
  export declare const ClayCustomerStoryCardMobileGap: number;
847
+ export declare const ClayCustomerStoryCardTypeQuoteWithPictureWidth: number;
848
+ export declare const ClayCustomerStoryCardAvatarWidth: number;
849
+ export declare const ClayCustomerStoryCardLogoSlotHeight: number;
850
+ export declare const ClayCustomerStoryCardLogoSlotEndHeight: number;
851
+ export declare const ClayCustomerStoryCardContentWidth: number;
693
852
  export declare const ClayHoverFlipCardRadius: number;
694
853
  export declare const ClayHoverFlipCardPaddingMobile: number;
695
854
  export declare const ClayHoverFlipCardPaddingTop: number;