@clay-design-system/tokens 0.10.0 → 0.12.0

package/dist/tokens.js

@@ -7,7 +7,7 @@ export const ClayFoundationBrandColorGrey100 = "#f3f4f5";
 export const ClayFoundationBrandColorGrey200 = "#e6e7ea";
 export const ClayFoundationBrandColorGrey300 = "#cacbcd";
 export const ClayFoundationBrandColorGrey500 = "#7c7b7b";
-export const ClayFoundationBrandColorGrey700 = "#45454a"; // Dark elevation
+export const ClayFoundationBrandColorGrey700 = "#45454a"; // Dark elevation; secondary text (text-default-secondary, WCAG AA)
 export const ClayFoundationBrandColorGrey800 = "#252526";
 export const ClayFoundationBrandColorGrey900 = "#17181c"; // Deep dark background
 export const ClayFoundationBrandColorGrey950 = "#000000"; // Pure black
@@ -148,6 +148,7 @@ export const ClayColorBorderDefaultSecondary = "#7c7b7b";
 export const ClayColorBorderDefaultTertiary = "#252526";
 export const ClayColorBorderNeutralDefault = "#252526";
 export const ClayColorBorderNeutralTertiary = "#e6e7ea";
+export const ClayColorBorderNeutralTranslucent = "#1c1d2180"; // Half-opacity neutral line, e.g. a text-link underline.
 export const ClayColorBorderBrandDefault = "#6161ff";
 export const ClayColorBorderBlackDefault = "#000000";
 export const ClayColorBorderDangerDefault = "#8b0038";
@@ -237,8 +238,9 @@ export const ClayColorIconDangerTertiary = "#ec221f";
 export const ClayColorIconDangerOnDanger = "#fee9e7";
 export const ClayColorIconDangerOnDangerSecondary = "#900b09";
 export const ClayColorIconDangerOnDangerTertiary = "#900b09";
+export const ClayColorOverlayScrim = "#00000080"; // Half-opacity black, the dark end of an image-to-transparent gradient.
 export const ClayColorTextDefaultDefault = "#252526";
-export const ClayColorTextDefaultSecondary = "#7c7b7b";
+export const ClayColorTextDefaultSecondary = "#45454a"; // WCAG AA for normal text on white (9.5:1) and grey-100 (8.7:1)
 export const ClayColorTextDefaultTertiary = "#cacbcd";
 export const ClayColorTextDisabledDefault = "#7c7b7b";
 export const ClayColorTextBrandDefault = "#6161ff";
@@ -271,8 +273,9 @@ export const ClayBrandSvcSurface = "#fff1fc";
 export const ClayBrandSvcDark = "#4f0000";
 export const ClayBreakpointLargeMobile = 480; // 480px+ — phablet / landscape phone
 export const ClayBreakpointTablet = 768; // 768px+ — tablet portrait
-export const ClayBreakpointLaptop = 992; // 992px+ — medium-large screens
-export const ClayBreakpointDesktop = 1230; // 1230px+ — large screens
+export const ClayBreakpointLaptop = 992; // 992px+ — small laptop / tablet landscape
+export const ClayBreakpointSmallDesktop = 1024; // 1024px+ — small desktop
+export const ClayBreakpointDesktop = 1280; // 1280px+ — desktop
 export const ClayWebTypeHeadingLineHeight = 1.2;
 export const ClayWebTypeBodyLineHeight = 1.5;
 export const ClayWebTypeBodyLgSize = 20;
@@ -376,8 +379,151 @@ export const ClayWebTypeP4Size = 14;
 export const ClayWebTypeP5Size = 12;
 export const ClayWebTypePLineHeight = 1.5;
 export const ClayWebTypePLetterSpacing = 0;
+export const ClayWebTypeSmallLetterSpacing = -0.01; // Letter-spacing (em) for 13–14px small text (footer links and headings).
+export const ClayWebBulletsSectionHeadingMaxWidth = 700; // `.heading` max-width — px
+export const ClayWebBulletsSectionGridGapLaptop = 84; // `.grid` gap — px
+export const ClayWebBulletsSectionTextColumnMaxWidthDesktop = 436; // `.textColumn` max-width — px
+export const ClayWebBulletsSectionCardsGridMaxWidthDesktop = 804; // `.cardsGrid` max-width — px
+export const ClayWebCardsSectionTextBlockMaxWidthDesktop = 540; // `.textBlock` max-width — px
+export const ClayWebCardsSectionSideBySideMediaMaxWidthLaptop = 608; // `.side-by-side .media` max-width — px
+export const ClayWebCardsSectionGridMediaHeight = 280; // `.gridMedia` height — px
+export const ClayWebCardsSectionGridCardHeightDesktop = 332; // `.gridCard` height — px
+export const ClayWebCardsSectionGridMediaWidthDesktop = 315; // `.gridMedia` width; `.gridMedia` min-width — px
+export const ClayWebCardsSectionMmMediaCardHeight = 272; // `.mmMediaCard` height — px
+export const ClayWebCardsSectionMtMediaAreaHeight = 240; // `.mtMediaArea` height — px
+export const ClayWebCardsSectionMtTagHeight = 34; // `.mtTag` height — px
+export const ClayWebCardsSectionMtMediaAreaHeightDesktop = 360; // `.mtMediaArea` height — px
+export const ClayWebCardsSectionSectionHeaderMaxWidth = 768; // `.sectionHeader` max-width — px
+export const ClayWebContactSectionLogoPlaceholderWidth = 90; // `.logoPlaceholder` width — px
+export const ClayWebContactSectionPhoneFlagWidth = 18; // `.phoneFlag` width — px
+export const ClayWebContactSectionPhoneFlagHeight = 13; // `.phoneFlag` height — px
+export const ClayWebContactSectionPhonePrefixChevronWidth = 9; // `.phonePrefixChevron` width — px
+export const ClayWebContactSectionPhonePrefixChevronHeight = 5; // `.phonePrefixChevron` height — px
+export const ClayWebContactSectionContentMaxWidthLaptop = 635; // `.content` max-width — px
+export const ClayWebContactSectionFormCardMinWidthLaptop = 320; // `.formCard` min-width — px
+export const ClayWebContactSectionFormCardMaxWidthLaptop = 480; // `.formCard` max-width — px
+export const ClayWebContactSectionBadgeWidth = 95; // `.badgeImage` width (trust badge image) — px
+export const ClayWebContactSectionBadgeHeight = 109; // `.badgeImage` height (trust badge image) — px
+export const ClayWebCountryFlagXsHeight = 11; // `.xs` height — px
+export const ClayWebCountryFlagSmHeight = 14; // `.sm` height — px
+export const ClayWebCountryFlagLgHeight = 22; // `.lg` height — px
+export const ClayWebCtaSectionColumnMaxWidth = 960; // `.column` max-width — px
+export const ClayWebCustomerLogoWebWidth = 100; // `.web` width — px
+export const ClayWebCustomerLogoWebHeight = 46.667; // `.web` height — px
+export const ClayWebCustomersBigCardsSlideWidth = 1120; // `.slide` width — px
+export const ClayWebCustomersBigCardsCardQuoteFontSize = 28; // `.cardQuote` font-size — px
+export const ClayWebCustomersBigCardsCardImageWrapWidthLaptop = 380; // `.cardImageWrap` width — px
+export const ClayWebCustomersBigCardsCardImageWrapHeightLaptop = 476; // `.cardImageWrap` height — px
+export const ClayWebCustomersBigCardsCardContentHeightLaptop = 476; // `.cardContent` height — px
+export const ClayWebFaqSectionCenteredListWidthLaptop = 720; // `.centered .list` width — px
 export const ClayWebFeaturesSectionCardRadius = 24; // Corner radius of the tabs-background and stroke card container.
 export const ClayWebFeaturesSectionMediaRadius = 16; // Corner radius of the media slot inside a tab panel.
+export const ClayWebFeaturesSectionStrokeSectionDescMaxWidth = 600; // `.strokeSectionDesc` max-width — px
+export const ClayWebFeaturesSectionStrokeTextGroupMaxWidth = 480; // `.strokeTextGroup` max-width — px
+export const ClayWebFeaturesSectionTcTabHeight = 54; // `.tcTab` height — px
+export const ClayWebFeaturesSectionTcMediaHeight = 280; // `.tcMedia` height — px
+export const ClayWebFeaturesSectionSrCardInnerMaxWidth = 544; // `.srCardInner` max-width — px
+export const ClayWebFeaturesSectionNaMobileNumberTop = 18; // `.naMobileNumber` top — px
+export const ClayWebFeaturesSectionTabTextMaxWidthTablet = 448; // `.tabText` max-width — px
+export const ClayWebFeaturesSectionTabMediaMaxWidthTablet = 608; // `.tabMedia` max-width — px
+export const ClayWebFeaturesSectionLrmMediaMaxWidthLaptop = 656; // `.lrmMedia` max-width — px
+export const ClayWebFeaturesSectionStrokeMediaMaxWidthDesktop = 640; // `.strokeMedia` max-width — px
+export const ClayWebFeaturesSectionTcCardBasisDesktop = 860; // `.tcCard` flex — px
+export const ClayWebFeaturesSectionNaPanelBasisDesktop = 82; // `.naPanel` flex; `.naPanelSide` flex; `.naPanelSide` min-width — px
+export const ClayWebFeaturesSectionNaLabelWrapWidthDesktop = 34; // `.naLabelWrap` width — px
+export const ClayWebFeaturesSectionSnRowsMaxWidthDesktop = 992; // `.snRows` max-width — px
+export const ClayWebFeaturesSectionSectionHeadingMaxWidth = 768; // `.hiHeader` max-width; `.naSectionHeader` max-width; `.hmtSectionHeading` max-width; +1 more — px
+export const ClayWebFeaturesSectionTcCardIconSize = 54; // `.tcCardIcon` width; `.tcCardIcon` height — px
+export const ClayWebFeaturesSectionTcCardIconSizeDesktop = 70; // `.tcCardIcon` width; `.tcCardIcon` height — px
+export const ClayWebFeaturesSectionSilIconSize = 44; // `.silIcon` width; `.silIcon` height — px
+export const ClayWebFeaturesSectionSrTagDotSize = 18; // `.srTagDot` width; `.srTagDot` height — px
+export const ClayWebFooterSectionColumnPaddingBottom = 35; // `.column` padding-bottom — px
+export const ClayWebFooterSectionColumnBrandPaddingTop = 10; // `.columnBrand` padding-top — px
+export const ClayWebFooterSectionLogoImgHeight = 26; // `.logoImg` height — px
+export const ClayWebFooterSectionHeadingMarginTop = 10; // `.heading` margin — px
+export const ClayWebFooterSectionHeadingMarginBottom = 18; // `.heading` margin — px
+export const ClayWebFooterSectionLinksGap = 15.5; // `.links` gap — px
+export const ClayWebFooterSectionLinkLineHeight = 22; // `.link` line-height — px
+export const ClayWebFooterSectionSubGroupMarginTop = 38; // `.subGroup` margin-top — px
+export const ClayWebFooterSectionBottomCenterGap = 5; // `.bottomCenter` gap — px
+export const ClayWebFooterSectionLegalLinkLineHeight = 18; // `.legalLink` line-height — px
+export const ClayWebFooterSectionCopyrightLineHeight = 20; // `.copyright` line-height — px
+export const ClayWebFooterSectionPipeHeightLaptop = 14; // `.pipe` height — px
+export const ClayWebFooterSectionShortColumnMaxWidthLaptop = 222; // `.short .column` max-width — px
+export const ClayWebFooterSectionShortColumnBasisLaptop = 220; // `.short .columnBrand` flex; `.short .column:first-child` flex — px
+export const ClayWebFooterSectionLinkIconSize = 18; // `.linkIcon` width; `.linkIcon` height — px
+export const ClayWebFooterSectionAccessibilityIconSize = 21; // `.accessibilityIcon` width; `.accessibilityIcon` height — px
+export const ClayWebFooterSectionBottomRowHeightLaptop = 92; // `.bottomLeft` height; `.bottomCenter` height; `.bottomRight` height — px
+export const ClayWebFooterSectionSmallFontSize = 13; // `.link` font-size; `.legalLink` font-size; `.copyright` font-size — px
+export const ClayWebHeaderSectionColumnMaxWidth = 960; // `.column` max-width — px
+export const ClayWebHeaderSectionHeadingFluidIntercept = 30.2864; // `.heading` font-size; `.split .heading` font-size — px
+export const ClayWebHeaderSectionDescriptionFluidIntercept = 15.4288; // `.description` font-size — px
+export const ClayWebHeaderSectionActionCaptionFontSize = 13; // `.actionCaption` font-size — px
+export const ClayWebHeaderSectionMediaMaxWidthLaptop = 1096; // `.media` max-width — px
+export const ClayWebHeaderSectionSplitContentMaxWidthLaptop = 544; // `.split .content` max-width — px
+export const ClayWebHeaderSectionSplitMediaMaxWidthLaptop = 600; // `.split .media` max-width — px
+export const ClayWebHeaderSectionSplitMediaMaxWidthDesktop = 656; // `.split .media` max-width — px
+export const ClayWebHeaderSectionSplitSearchActionsMaxWidthLaptop = 513; // `.split-search .actions` max-width — px
+export const ClayWebHeaderSectionSplitFullImageMediaHeight = 375; // `.split-full-image .media` height — px
+export const ClayWebHeaderSectionSplitFullImageContentMaxWidthLaptop = 560; // `.split-full-image .content` max-width — px
+export const ClayWebHeaderSectionSplitMosaicMediaHeight = 460; // `.split-mosaic .media` height — px
+export const ClayWebHeaderSectionCardHeightLaptop = 640; // `.card` height — px
+export const ClayWebHeaderSectionDefaultContentMaxWidthLaptop = 729; // `.default .content` max-width — px
+export const ClayWebHeaderSectionDefaultContentGapLaptop = 30; // `.default .content` gap — px
+export const ClayWebHeaderSectionHeadingFluidInterceptDesktop = 12.5712; // `.split .heading` font-size — px
+export const ClayWebHeaderSectionColumnMinWidthLaptop = 300; // `.split-full-image .column` min-width; `.split-mosaic .column` min-width; `.split-strip .column` min-width — px
+export const ClayWebIntegrationsStripOuterHeight = 90; // `.stripOuter` height — px
+export const ClayWebIntegrationsHexBadgeHeight = 90; // `.hexBadge` height — px
+export const ClayWebIntegrationsHeadingMaxWidthLaptop = 720; // `.heading` max-width — px
+export const ClayWebIntegrationsDescriptionMaxWidthLaptop = 754; // `.description` max-width — px
+export const ClayWebMotionLightboxDialogWidth = 1200; // `.clay-lightbox-dialog` width — px
+export const ClayWebNavbarMenuLogoImgMaxWidth = 260; // `.logoImg` max-width — px
+export const ClayWebNavbarMenuMenuIconGap = 3; // `.menuIcon` gap — px
+export const ClayWebNavbarMenuMenuIconWidth = 18; // `.menuIcon` width — px
+export const ClayWebNavbarMenuMenuBarWidth = 18; // `.menuBar` width — px
+export const ClayWebNavbarMenuDropdownColumnMinWidth = 140; // `.dropdownColumn` min-width — px
+export const ClayWebNavbarMenuInnerPaddingY = 14; // `.inner` padding-top; `.inner` padding-bottom — px
+export const ClayWebNavbarMenuDropdownItemIconSize = 17; // `.dropdownItemIcon` width; `.dropdownItemIcon` height — px
+export const ClayWebShapesOrbSwooshOffsetY33 = 5; // `33%` transform — px
+export const ClayWebShapesOrbSwooshOffsetY66 = 3; // `66%` transform — px
+export const ClayWebSiteFooterGridColumn = 140; // `.grid` grid-template-columns — px
+export const ClayWebTestimonialsSectionLogoSlotHeight = 62; // `.logoSlot` height; `.splitLogoSlot` height; `.centeredLogoSlot` height — px
+export const ClayWebTestimonialsSectionLogoSlotWidth = 132; // `.logoSlot` width; `.splitLogoSlot` width; `.centeredLogoSlot` width — px
+export const ClayWebTestimonialsSectionSummaryCardWidthLaptop = 484; // `.summaryCard` width — px
+export const ClayWebTestimonialsSectionAvatarWidthLaptop = 300; // `.avatar` width; `.centeredAvatar` width — px
+export const ClayWebTestimonialsSectionCarouselCardMinHeight = 513; // `.carouselCard` min-height — px
+export const ClayWebTestimonialsSectionSplitDividerHeightLaptop = 61; // `.splitDivider` height — px
+export const ClayWebTestimonialsSectionCenteredContentMaxWidthLaptop = 768; // `.centeredContent` max-width — px
+export const ClayWebTestimonialsSectionCaseStudyCardLogoSlotHeight = 47; // `.caseStudyCardLogoSlot` height; `.statQuoteLogoSlot` height — px
+export const ClayWebTestimonialsSectionCaseStudyCardLogoSlotWidth = 100; // `.caseStudyCardLogoSlot` width; `.statQuoteLogoSlot` width — px
+export const ClayWebTestimonialsSectionCaseStudyCardMediaHeight = 146; // `.caseStudyCardMedia` height — px
+export const ClayWebTestimonialsSectionCaseStudyStatLabelWidth = 132; // `.caseStudyStatLabel` width — px
+export const ClayWebTestimonialsSectionCaseStudyCardBasisLaptop = 390; // `.caseStudyCard` flex — px
+export const ClayWebTestimonialsSectionStatQuoteCardMaxWidthLaptop = 1102; // `.statQuoteCard` max-width — px
+export const ClayWebTestimonialsSectionStatQuoteStatColWidthLaptop = 380; // `.statQuoteStatCol` width — px
+export const ClayWebTestimonialsSectionQuoteCardLogoSlotHeight = 56; // `.quoteCardLogoSlot` height — px
+export const ClayWebTestimonialsSectionQuoteCardsHeadingWidthLaptop = 497; // `.quote-cards .quoteCardsHeading` width — px
+export const ClayWebTestimonialsSectionQuoteCardBasisLaptop = 416; // `.quote-cards .quoteCardsTrack` max-inline-size; `.quote-cards .quoteCard` flex — px
+export const ClayWebTestimonialsSectionQcmCardMediaHeight = 246; // `.qcmCardMedia` height — px
+export const ClayWebTestimonialsSectionQcmCardLogoSlotHeight = 49; // `.qcmCardLogoSlot` height — px
+export const ClayWebTestimonialsSectionQcmCardLogoSlotWidth = 106; // `.qcmCardLogoSlot` width — px
+export const ClayWebTestimonialsSectionQcmCardBasisLaptop = 480; // `.caseStudyHeading` max-width; `.qcmHeading` max-width; `.qcmTrack` max-inline-size; +1 more — px
+export const ClayWebTestimonialsSectionAvatarPhotoSize = 56; // `.avatarPhoto` width; `.avatarPhoto` height; `.quoteCardAvatarPhoto` width; +3 more — px
+export const ClayWebTestimonialsSectionSplitColumnMaxWidthLaptop = 616; // `.splitMediaSlot` max-width; `.splitTextCol` max-width — px
+export const ClayWebTestimonialsSectionMixedHeaderMaxWidthLaptop = 1120; // `.mixed-stat-and-quote .mixedHeader` max-width — px
+export const ClayWebTestimonialsSectionMixedHeaderTextMaxWidthLaptop = 496; // `.mixed-stat-and-quote .mixedHeaderText` max-width — px
+export const ClayWebTestimonialsSectionMixedCarouselCardWidthLaptop = 678; // `.mixed-stat-and-quote .carouselCard` width — px
+export const ClayWebTestimonialsSectionMixedCarouselCardContentBasisLaptop = 320; // `.mixed-stat-and-quote .carouselCardContent` flex — px
+export const ClayWebTestimonialsSectionMixedCarouselCardMediaSizeLaptop = 314; // `.mixed-stat-and-quote .carouselCardMedia` flex; `.mixed-stat-and-quote .carouselCardMedia` width; `.mixed-stat-and-quote .carouselCardMedia` height — px
+export const ClayWebTestimonialsSectionQuoteIconWidth = 88; // `.statQuoteQuoteCol .quoteIcon` width — px
+export const ClayWebTestimonialsSectionQuoteIconWidthLaptop = 123; // `.statQuoteQuoteCol .quoteIcon` width — px
+export const ClayWebTrustBadgeRegularWidth = 104; // `.regular` width — px
+export const ClayWebTrustBadgeLargeWidth = 156; // `.large` width — px
+export const ClayWebTrustBadgeLargeHeight = 179; // `.large` height — px
+export const ClayWebTrustSectionStatCardMinHeight = 424; // `.statCard` min-height — px
+export const ClayWebTrustSectionStatLogoHeight = 60; // `.statLogo` height — px
+export const ClayWebTrustSectionSecurityCardBasisDesktop = 617; // `.securityCard` flex — px
+export const ClayWebTrustSectionComplianceLogoSizeTablet = 116; // `.complianceLogo` width; `.complianceLogo` height — px
 export const ClayEffectShadowLight = "0px 0px 40px 0px rgba(23, 24, 28, 0.06)";
 export const ClayEffectShadowHard = "0px 8px 40px 0px rgba(23, 24, 28, 0.12)";
 export const ClayEffectShadowRiseSmall =
@@ -390,6 +536,7 @@ export const ClayEffectGlassShadow =
 export const ClayEffectGlassBackground = "#ffffff1a";
 export const ClayEffectGlassBlur = "33px";
 export const ClayEffectGlassBorder = "1px solid rgba(255, 255, 255, 0.12)";
+export const ClayEffectTextShadowLegible = "0px 1px 4px rgba(0, 0, 0, 0.5)"; // Soft dark halo under light text on busy media (text-shadow: no spread value).
 export const ClayLayoutContainerMaxWidth = 1440;
 export const ClayLayoutContainerLarge = 1440;
 export const ClayLayoutContainerNarrow = 1220;
@@ -599,7 +746,7 @@ export const ClayCardActionRadius = 16;
 export const ClayCardActionHoverShadow =
   "0px 0px 40px 0px rgba(23, 24, 28, 0.06)";
 export const ClayCardActionTitleColor = "#252526";
-export const ClayCardActionDescriptionColor = "#7c7b7b";
+export const ClayCardActionDescriptionColor = "#45454a";
 export const ClayCardActionRatingColor = "#f5a623";
 export const ClayCardActionMediaTopPadding = 16;
 export const ClayCardActionMediaTopGap = 24;
@@ -640,7 +787,7 @@ export const ClayCardSizeTileMinHeight = 0;
 export const ClayCardHorizontalBorderColor = "#cacbcd";
 export const ClayCardHorizontalRadius = 20;
 export const ClayCardHorizontalHeadingColor = "#252526";
-export const ClayCardHorizontalDescriptionColor = "#7c7b7b";
+export const ClayCardHorizontalDescriptionColor = "#45454a";
 export const ClayCardHorizontalTagColor = "#252526";
 export const ClayCardHorizontalContentPadding = 24;
 export const ClayCardHorizontalContentGap = 32;
@@ -660,6 +807,9 @@ export const ClayCardHorizontalMobilePadding = 16;
 export const ClayCardHorizontalMobileGap = 24;
 export const ClayCardHorizontalMobileShadow =
   "0px 0px 40px 0px rgba(23, 24, 28, 0.06)";
+export const ClayCardActionCardVariantAgentWidth = 280; // `.actionCard.variant_agent` width — px
+export const ClayCardActionCardVariantAgentHeight = 332; // `.actionCard.variant_agent` height — px
+export const ClayCardActionCardVariantAgentIconWidth = 240; // `.actionCard.variant_agentIcon` width — px
 export const ClayCheckboxSize = 20;
 export const ClayCheckboxRadius = 4;
 export const ClayCheckboxGap = 8;
@@ -714,6 +864,11 @@ export const ClayCustomerStoryCardQuoteWithPictureMediaHeight = 246;
 export const ClayCustomerStoryCardQuoteWithPictureAvatarGap = 16;
 export const ClayCustomerStoryCardMobileMinHeight = 513;
 export const ClayCustomerStoryCardMobileGap = 20;
+export const ClayCustomerStoryCardTypeQuoteWithPictureWidth = 479; // `.type_quoteWithPicture` width — px
+export const ClayCustomerStoryCardAvatarWidth = 300; // `.avatar` width — px
+export const ClayCustomerStoryCardLogoSlotHeight = 56; // `.logoSlot` height — px
+export const ClayCustomerStoryCardLogoSlotEndHeight = 50; // `.logoSlotEnd` height — px
+export const ClayCustomerStoryCardContentWidth = 320; // `.statsContent` width; `.quoteContent` width — px
 export const ClayHoverFlipCardRadius = 12;
 export const ClayHoverFlipCardPaddingMobile = 24;
 export const ClayHoverFlipCardPaddingTop = 48;

package/dist/tokens.resolved.css

@@ -8,7 +8,7 @@
   --clay-foundation-brand-color-grey-200: #e6e7ea;
   --clay-foundation-brand-color-grey-300: #cacbcd;
   --clay-foundation-brand-color-grey-500: #7c7b7b;
-  --clay-foundation-brand-color-grey-700: #45454a; /** Dark elevation */
+  --clay-foundation-brand-color-grey-700: #45454a; /** Dark elevation; secondary text (text-default-secondary, WCAG AA) */
   --clay-foundation-brand-color-grey-800: #252526;
   --clay-foundation-brand-color-grey-900: #17181c; /** Deep dark background */
   --clay-foundation-brand-color-grey-950: #000000; /** Pure black */
@@ -144,6 +144,7 @@
   --clay-color-border-default-tertiary: #252526;
   --clay-color-border-neutral-default: #252526;
   --clay-color-border-neutral-tertiary: #e6e7ea;
+  --clay-color-border-neutral-translucent: rgba(28, 29, 33, 0.5); /** Half-opacity neutral line, e.g. a text-link underline. */
   --clay-color-border-brand-default: #6161ff;
   --clay-color-border-black-default: #000000;
   --clay-color-border-danger-default: #8b0038;
@@ -233,8 +234,9 @@
   --clay-color-icon-danger-on-danger: #fee9e7;
   --clay-color-icon-danger-on-danger-secondary: #900b09;
   --clay-color-icon-danger-on-danger-tertiary: #900b09;
+  --clay-color-overlay-scrim: rgba(0, 0, 0, 0.5); /** Half-opacity black, the dark end of an image-to-transparent gradient. */
   --clay-color-text-default-default: #252526;
-  --clay-color-text-default-secondary: #7c7b7b;
+  --clay-color-text-default-secondary: #45454a; /** WCAG AA for normal text on white (9.5:1) and grey-100 (8.7:1) */
   --clay-color-text-default-tertiary: #cacbcd;
   --clay-color-text-disabled-default: #7c7b7b;
   --clay-color-text-brand-default: #6161ff;
@@ -267,8 +269,9 @@
   --clay-brand-svc-dark: #4f0000;
   --clay-breakpoint-large-mobile: 480; /** 480px+ — phablet / landscape phone */
   --clay-breakpoint-tablet: 768; /** 768px+ — tablet portrait */
-  --clay-breakpoint-laptop: 992; /** 992px+ — medium-large screens */
-  --clay-breakpoint-desktop: 1230; /** 1230px+ — large screens */
+  --clay-breakpoint-laptop: 992; /** 992px+ — small laptop / tablet landscape */
+  --clay-breakpoint-small-desktop: 1024; /** 1024px+ — small desktop */
+  --clay-breakpoint-desktop: 1280; /** 1280px+ — desktop */
   --clay-web-type-heading-line-height: 1.2;
   --clay-web-type-body-line-height: 1.5;
   --clay-web-type-body-lg-size: 20;
@@ -372,8 +375,151 @@
   --clay-web-type-p5-size: 12;
   --clay-web-type-p-line-height: 1.5;
   --clay-web-type-p-letter-spacing: 0;
+  --clay-web-type-small-letter-spacing: -0.01; /** Letter-spacing (em) for 13–14px small text (footer links and headings). */
+  --clay-web-bullets-section-heading-max-width: 700; /** `.heading` max-width — px */
+  --clay-web-bullets-section-grid-gap-laptop: 84; /** `.grid` gap — px */
+  --clay-web-bullets-section-text-column-max-width-desktop: 436; /** `.textColumn` max-width — px */
+  --clay-web-bullets-section-cards-grid-max-width-desktop: 804; /** `.cardsGrid` max-width — px */
+  --clay-web-cards-section-text-block-max-width-desktop: 540; /** `.textBlock` max-width — px */
+  --clay-web-cards-section-side-by-side-media-max-width-laptop: 608; /** `.side-by-side .media` max-width — px */
+  --clay-web-cards-section-grid-media-height: 280; /** `.gridMedia` height — px */
+  --clay-web-cards-section-grid-card-height-desktop: 332; /** `.gridCard` height — px */
+  --clay-web-cards-section-grid-media-width-desktop: 315; /** `.gridMedia` width; `.gridMedia` min-width — px */
+  --clay-web-cards-section-mm-media-card-height: 272; /** `.mmMediaCard` height — px */
+  --clay-web-cards-section-mt-media-area-height: 240; /** `.mtMediaArea` height — px */
+  --clay-web-cards-section-mt-tag-height: 34; /** `.mtTag` height — px */
+  --clay-web-cards-section-mt-media-area-height-desktop: 360; /** `.mtMediaArea` height — px */
+  --clay-web-cards-section-section-header-max-width: 768; /** `.sectionHeader` max-width — px */
+  --clay-web-contact-section-logo-placeholder-width: 90; /** `.logoPlaceholder` width — px */
+  --clay-web-contact-section-phone-flag-width: 18; /** `.phoneFlag` width — px */
+  --clay-web-contact-section-phone-flag-height: 13; /** `.phoneFlag` height — px */
+  --clay-web-contact-section-phone-prefix-chevron-width: 9; /** `.phonePrefixChevron` width — px */
+  --clay-web-contact-section-phone-prefix-chevron-height: 5; /** `.phonePrefixChevron` height — px */
+  --clay-web-contact-section-content-max-width-laptop: 635; /** `.content` max-width — px */
+  --clay-web-contact-section-form-card-min-width-laptop: 320; /** `.formCard` min-width — px */
+  --clay-web-contact-section-form-card-max-width-laptop: 480; /** `.formCard` max-width — px */
+  --clay-web-contact-section-badge-width: 95; /** `.badgeImage` width (trust badge image) — px */
+  --clay-web-contact-section-badge-height: 109; /** `.badgeImage` height (trust badge image) — px */
+  --clay-web-country-flag-xs-height: 11; /** `.xs` height — px */
+  --clay-web-country-flag-sm-height: 14; /** `.sm` height — px */
+  --clay-web-country-flag-lg-height: 22; /** `.lg` height — px */
+  --clay-web-cta-section-column-max-width: 960; /** `.column` max-width — px */
+  --clay-web-customer-logo-web-width: 100; /** `.web` width — px */
+  --clay-web-customer-logo-web-height: 46.667; /** `.web` height — px */
+  --clay-web-customers-big-cards-slide-width: 1120; /** `.slide` width — px */
+  --clay-web-customers-big-cards-card-quote-font-size: 28; /** `.cardQuote` font-size — px */
+  --clay-web-customers-big-cards-card-image-wrap-width-laptop: 380; /** `.cardImageWrap` width — px */
+  --clay-web-customers-big-cards-card-image-wrap-height-laptop: 476; /** `.cardImageWrap` height — px */
+  --clay-web-customers-big-cards-card-content-height-laptop: 476; /** `.cardContent` height — px */
+  --clay-web-faq-section-centered-list-width-laptop: 720; /** `.centered .list` width — px */
   --clay-web-features-section-card-radius: 24; /** Corner radius of the tabs-background and stroke card container. */
   --clay-web-features-section-media-radius: 16; /** Corner radius of the media slot inside a tab panel. */
+  --clay-web-features-section-stroke-section-desc-max-width: 600; /** `.strokeSectionDesc` max-width — px */
+  --clay-web-features-section-stroke-text-group-max-width: 480; /** `.strokeTextGroup` max-width — px */
+  --clay-web-features-section-tc-tab-height: 54; /** `.tcTab` height — px */
+  --clay-web-features-section-tc-media-height: 280; /** `.tcMedia` height — px */
+  --clay-web-features-section-sr-card-inner-max-width: 544; /** `.srCardInner` max-width — px */
+  --clay-web-features-section-na-mobile-number-top: 18; /** `.naMobileNumber` top — px */
+  --clay-web-features-section-tab-text-max-width-tablet: 448; /** `.tabText` max-width — px */
+  --clay-web-features-section-tab-media-max-width-tablet: 608; /** `.tabMedia` max-width — px */
+  --clay-web-features-section-lrm-media-max-width-laptop: 656; /** `.lrmMedia` max-width — px */
+  --clay-web-features-section-stroke-media-max-width-desktop: 640; /** `.strokeMedia` max-width — px */
+  --clay-web-features-section-tc-card-basis-desktop: 860; /** `.tcCard` flex — px */
+  --clay-web-features-section-na-panel-basis-desktop: 82; /** `.naPanel` flex; `.naPanelSide` flex; `.naPanelSide` min-width — px */
+  --clay-web-features-section-na-label-wrap-width-desktop: 34; /** `.naLabelWrap` width — px */
+  --clay-web-features-section-sn-rows-max-width-desktop: 992; /** `.snRows` max-width — px */
+  --clay-web-features-section-section-heading-max-width: 768; /** `.hiHeader` max-width; `.naSectionHeader` max-width; `.hmtSectionHeading` max-width; +1 more — px */
+  --clay-web-features-section-tc-card-icon-size: 54; /** `.tcCardIcon` width; `.tcCardIcon` height — px */
+  --clay-web-features-section-tc-card-icon-size-desktop: 70; /** `.tcCardIcon` width; `.tcCardIcon` height — px */
+  --clay-web-features-section-sil-icon-size: 44; /** `.silIcon` width; `.silIcon` height — px */
+  --clay-web-features-section-sr-tag-dot-size: 18; /** `.srTagDot` width; `.srTagDot` height — px */
+  --clay-web-footer-section-column-padding-bottom: 35; /** `.column` padding-bottom — px */
+  --clay-web-footer-section-column-brand-padding-top: 10; /** `.columnBrand` padding-top — px */
+  --clay-web-footer-section-logo-img-height: 26; /** `.logoImg` height — px */
+  --clay-web-footer-section-heading-margin-top: 10; /** `.heading` margin — px */
+  --clay-web-footer-section-heading-margin-bottom: 18; /** `.heading` margin — px */
+  --clay-web-footer-section-links-gap: 15.5; /** `.links` gap — px */
+  --clay-web-footer-section-link-line-height: 22; /** `.link` line-height — px */
+  --clay-web-footer-section-sub-group-margin-top: 38; /** `.subGroup` margin-top — px */
+  --clay-web-footer-section-bottom-center-gap: 5; /** `.bottomCenter` gap — px */
+  --clay-web-footer-section-legal-link-line-height: 18; /** `.legalLink` line-height — px */
+  --clay-web-footer-section-copyright-line-height: 20; /** `.copyright` line-height — px */
+  --clay-web-footer-section-pipe-height-laptop: 14; /** `.pipe` height — px */
+  --clay-web-footer-section-short-column-max-width-laptop: 222; /** `.short .column` max-width — px */
+  --clay-web-footer-section-short-column-basis-laptop: 220; /** `.short .columnBrand` flex; `.short .column:first-child` flex — px */
+  --clay-web-footer-section-link-icon-size: 18; /** `.linkIcon` width; `.linkIcon` height — px */
+  --clay-web-footer-section-accessibility-icon-size: 21; /** `.accessibilityIcon` width; `.accessibilityIcon` height — px */
+  --clay-web-footer-section-bottom-row-height-laptop: 92; /** `.bottomLeft` height; `.bottomCenter` height; `.bottomRight` height — px */
+  --clay-web-footer-section-small-font-size: 13; /** `.link` font-size; `.legalLink` font-size; `.copyright` font-size — px */
+  --clay-web-header-section-column-max-width: 960; /** `.column` max-width — px */
+  --clay-web-header-section-heading-fluid-intercept: 30.2864; /** `.heading` font-size; `.split .heading` font-size — px */
+  --clay-web-header-section-description-fluid-intercept: 15.4288; /** `.description` font-size — px */
+  --clay-web-header-section-action-caption-font-size: 13; /** `.actionCaption` font-size — px */
+  --clay-web-header-section-media-max-width-laptop: 1096; /** `.media` max-width — px */
+  --clay-web-header-section-split-content-max-width-laptop: 544; /** `.split .content` max-width — px */
+  --clay-web-header-section-split-media-max-width-laptop: 600; /** `.split .media` max-width — px */
+  --clay-web-header-section-split-media-max-width-desktop: 656; /** `.split .media` max-width — px */
+  --clay-web-header-section-split-search-actions-max-width-laptop: 513; /** `.split-search .actions` max-width — px */
+  --clay-web-header-section-split-full-image-media-height: 375; /** `.split-full-image .media` height — px */
+  --clay-web-header-section-split-full-image-content-max-width-laptop: 560; /** `.split-full-image .content` max-width — px */
+  --clay-web-header-section-split-mosaic-media-height: 460; /** `.split-mosaic .media` height — px */
+  --clay-web-header-section-card-height-laptop: 640; /** `.card` height — px */
+  --clay-web-header-section-default-content-max-width-laptop: 729; /** `.default .content` max-width — px */
+  --clay-web-header-section-default-content-gap-laptop: 30; /** `.default .content` gap — px */
+  --clay-web-header-section-heading-fluid-intercept-desktop: 12.5712; /** `.split .heading` font-size — px */
+  --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 */
+  --clay-web-integrations-strip-outer-height: 90; /** `.stripOuter` height — px */
+  --clay-web-integrations-hex-badge-height: 90; /** `.hexBadge` height — px */
+  --clay-web-integrations-heading-max-width-laptop: 720; /** `.heading` max-width — px */
+  --clay-web-integrations-description-max-width-laptop: 754; /** `.description` max-width — px */
+  --clay-web-motion-lightbox-dialog-width: 1200; /** `.clay-lightbox-dialog` width — px */
+  --clay-web-navbar-menu-logo-img-max-width: 260; /** `.logoImg` max-width — px */
+  --clay-web-navbar-menu-menu-icon-gap: 3; /** `.menuIcon` gap — px */
+  --clay-web-navbar-menu-menu-icon-width: 18; /** `.menuIcon` width — px */
+  --clay-web-navbar-menu-menu-bar-width: 18; /** `.menuBar` width — px */
+  --clay-web-navbar-menu-dropdown-column-min-width: 140; /** `.dropdownColumn` min-width — px */
+  --clay-web-navbar-menu-inner-padding-y: 14; /** `.inner` padding-top; `.inner` padding-bottom — px */
+  --clay-web-navbar-menu-dropdown-item-icon-size: 17; /** `.dropdownItemIcon` width; `.dropdownItemIcon` height — px */
+  --clay-web-shapes-orb-swoosh-offset-y-33: 5; /** `33%` transform — px */
+  --clay-web-shapes-orb-swoosh-offset-y-66: 3; /** `66%` transform — px */
+  --clay-web-site-footer-grid-column: 140; /** `.grid` grid-template-columns — px */
+  --clay-web-testimonials-section-logo-slot-height: 62; /** `.logoSlot` height; `.splitLogoSlot` height; `.centeredLogoSlot` height — px */
+  --clay-web-testimonials-section-logo-slot-width: 132; /** `.logoSlot` width; `.splitLogoSlot` width; `.centeredLogoSlot` width — px */
+  --clay-web-testimonials-section-summary-card-width-laptop: 484; /** `.summaryCard` width — px */
+  --clay-web-testimonials-section-avatar-width-laptop: 300; /** `.avatar` width; `.centeredAvatar` width — px */
+  --clay-web-testimonials-section-carousel-card-min-height: 513; /** `.carouselCard` min-height — px */
+  --clay-web-testimonials-section-split-divider-height-laptop: 61; /** `.splitDivider` height — px */
+  --clay-web-testimonials-section-centered-content-max-width-laptop: 768; /** `.centeredContent` max-width — px */
+  --clay-web-testimonials-section-case-study-card-logo-slot-height: 47; /** `.caseStudyCardLogoSlot` height; `.statQuoteLogoSlot` height — px */
+  --clay-web-testimonials-section-case-study-card-logo-slot-width: 100; /** `.caseStudyCardLogoSlot` width; `.statQuoteLogoSlot` width — px */
+  --clay-web-testimonials-section-case-study-card-media-height: 146; /** `.caseStudyCardMedia` height — px */
+  --clay-web-testimonials-section-case-study-stat-label-width: 132; /** `.caseStudyStatLabel` width — px */
+  --clay-web-testimonials-section-case-study-card-basis-laptop: 390; /** `.caseStudyCard` flex — px */
+  --clay-web-testimonials-section-stat-quote-card-max-width-laptop: 1102; /** `.statQuoteCard` max-width — px */
+  --clay-web-testimonials-section-stat-quote-stat-col-width-laptop: 380; /** `.statQuoteStatCol` width — px */
+  --clay-web-testimonials-section-quote-card-logo-slot-height: 56; /** `.quoteCardLogoSlot` height — px */
+  --clay-web-testimonials-section-quote-cards-heading-width-laptop: 497; /** `.quote-cards .quoteCardsHeading` width — px */
+  --clay-web-testimonials-section-quote-card-basis-laptop: 416; /** `.quote-cards .quoteCardsTrack` max-inline-size; `.quote-cards .quoteCard` flex — px */
+  --clay-web-testimonials-section-qcm-card-media-height: 246; /** `.qcmCardMedia` height — px */
+  --clay-web-testimonials-section-qcm-card-logo-slot-height: 49; /** `.qcmCardLogoSlot` height — px */
+  --clay-web-testimonials-section-qcm-card-logo-slot-width: 106; /** `.qcmCardLogoSlot` width — px */
+  --clay-web-testimonials-section-qcm-card-basis-laptop: 480; /** `.caseStudyHeading` max-width; `.qcmHeading` max-width; `.qcmTrack` max-inline-size; +1 more — px */
+  --clay-web-testimonials-section-avatar-photo-size: 56; /** `.avatarPhoto` width; `.avatarPhoto` height; `.quoteCardAvatarPhoto` width; +3 more — px */
+  --clay-web-testimonials-section-split-column-max-width-laptop: 616; /** `.splitMediaSlot` max-width; `.splitTextCol` max-width — px */
+  --clay-web-testimonials-section-mixed-header-max-width-laptop: 1120; /** `.mixed-stat-and-quote .mixedHeader` max-width — px */
+  --clay-web-testimonials-section-mixed-header-text-max-width-laptop: 496; /** `.mixed-stat-and-quote .mixedHeaderText` max-width — px */
+  --clay-web-testimonials-section-mixed-carousel-card-width-laptop: 678; /** `.mixed-stat-and-quote .carouselCard` width — px */
+  --clay-web-testimonials-section-mixed-carousel-card-content-basis-laptop: 320; /** `.mixed-stat-and-quote .carouselCardContent` flex — px */
+  --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 */
+  --clay-web-testimonials-section-quote-icon-width: 88; /** `.statQuoteQuoteCol .quoteIcon` width — px */
+  --clay-web-testimonials-section-quote-icon-width-laptop: 123; /** `.statQuoteQuoteCol .quoteIcon` width — px */
+  --clay-web-trust-badge-regular-width: 104; /** `.regular` width — px */
+  --clay-web-trust-badge-large-width: 156; /** `.large` width — px */
+  --clay-web-trust-badge-large-height: 179; /** `.large` height — px */
+  --clay-web-trust-section-stat-card-min-height: 424; /** `.statCard` min-height — px */
+  --clay-web-trust-section-stat-logo-height: 60; /** `.statLogo` height — px */
+  --clay-web-trust-section-security-card-basis-desktop: 617; /** `.securityCard` flex — px */
+  --clay-web-trust-section-compliance-logo-size-tablet: 116; /** `.complianceLogo` width; `.complianceLogo` height — px */
   --clay-effect-shadow-light: 0px 0px 40px 0px rgba(23, 24, 28, 0.06);
   --clay-effect-shadow-hard: 0px 8px 40px 0px rgba(23, 24, 28, 0.12);
   --clay-effect-shadow-rise-small: 0px 4px 8px 0px rgba(23, 24, 28, 0.2);
@@ -383,6 +529,7 @@
   --clay-effect-glass-background: rgba(255, 255, 255, 0.1);
   --clay-effect-glass-blur: 33px;
   --clay-effect-glass-border: 1px solid rgba(255, 255, 255, 0.12);
+  --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). */
   --clay-layout-container-max-width: 1440;
   --clay-layout-container-large: 1440;
   --clay-layout-container-narrow: 1220;
@@ -591,7 +738,7 @@
   --clay-card-action-radius: 16;
   --clay-card-action-hover-shadow: 0px 0px 40px 0px rgba(23, 24, 28, 0.06);
   --clay-card-action-title-color: #252526;
-  --clay-card-action-description-color: #7c7b7b;
+  --clay-card-action-description-color: #45454a;
   --clay-card-action-rating-color: #f5a623;
   --clay-card-action-media-top-padding: 16;
   --clay-card-action-media-top-gap: 24;
@@ -632,7 +779,7 @@
   --clay-card-horizontal-border-color: #cacbcd;
   --clay-card-horizontal-radius: 20;
   --clay-card-horizontal-heading-color: #252526;
-  --clay-card-horizontal-description-color: #7c7b7b;
+  --clay-card-horizontal-description-color: #45454a;
   --clay-card-horizontal-tag-color: #252526;
   --clay-card-horizontal-content-padding: 24;
   --clay-card-horizontal-content-gap: 32;
@@ -651,6 +798,9 @@
   --clay-card-horizontal-mobile-padding: 16;
   --clay-card-horizontal-mobile-gap: 24;
   --clay-card-horizontal-mobile-shadow: 0px 0px 40px 0px rgba(23, 24, 28, 0.06);
+  --clay-card-action-card-variant-agent-width: 280; /** `.actionCard.variant_agent` width — px */
+  --clay-card-action-card-variant-agent-height: 332; /** `.actionCard.variant_agent` height — px */
+  --clay-card-action-card-variant-agent-icon-width: 240; /** `.actionCard.variant_agentIcon` width — px */
   --clay-checkbox-size: 20;
   --clay-checkbox-radius: 4;
   --clay-checkbox-gap: 8;
@@ -705,6 +855,11 @@
   --clay-customer-story-card-quote-with-picture-avatar-gap: 16;
   --clay-customer-story-card-mobile-min-height: 513;
   --clay-customer-story-card-mobile-gap: 20;
+  --clay-customer-story-card-type-quote-with-picture-width: 479; /** `.type_quoteWithPicture` width — px */
+  --clay-customer-story-card-avatar-width: 300; /** `.avatar` width — px */
+  --clay-customer-story-card-logo-slot-height: 56; /** `.logoSlot` height — px */
+  --clay-customer-story-card-logo-slot-end-height: 50; /** `.logoSlotEnd` height — px */
+  --clay-customer-story-card-content-width: 320; /** `.statsContent` width; `.quoteContent` width — px */
   --clay-hover-flip-card-radius: 12;
   --clay-hover-flip-card-padding-mobile: 24;
   --clay-hover-flip-card-padding-top: 48;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clay-design-system/tokens",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "type": "module",
   "exports": {
     ".": {

package/stylelint-plugin/allowed-breakpoints.js

@@ -0,0 +1,75 @@
+/**
+ * stylelint-plugin: clay-ds/allowed-breakpoints
+ *
+ * Mobile-first media queries on the Clay breakpoint set only. An `@media` query may use:
+ *   - (min-width: Npx) where N is a Clay breakpoint: 480 · 768 · 992 · 1024 · 1280
+ *   - any prefers-* feature: (prefers-reduced-motion: …), (prefers-color-scheme: …), …
+ *   - media types (screen, print, all) and the keywords and / not / only
+ *
+ * Flagged: max-width (write the mobile default first, then a min-width override), any other
+ * min-width value, non-px widths, range syntax (width >= …), and every other feature.
+ * The values mirror @clay-design-system/tokens/mq — @media can't read custom properties.
+ *
+ * Usage in .stylelintrc:
+ *   plugins: ['@clay-design-system/tokens/stylelint-plugin/allowed-breakpoints.js']
+ *   rules:
+ *     'clay-ds/allowed-breakpoints': true            // or [true, { breakpoints: [480, 768] }]
+ */
+
+import stylelint from 'stylelint'
+
+const { createPlugin, utils } = stylelint
+
+const ruleName = 'clay-ds/allowed-breakpoints'
+const BREAKPOINTS = [480, 768, 992, 1024, 1280]
+
+const messages = utils.ruleMessages(ruleName, {
+  maxWidth: (feature) =>
+    `"${feature}" — media queries are mobile-first: style the default for mobile and override with (min-width: …).`,
+  value: (feature, allowed) =>
+    `"${feature}" is not a Clay breakpoint. Use (min-width: Npx) with N in ${allowed.join(' · ')}.`,
+  feature: (feature) =>
+    `"${feature}" is not allowed in @media. Only (min-width: <breakpoint>) and prefers-* features.`,
+})
+
+const ruleFunction = (primary, secondary) => {
+  return (root, result) => {
+    const validOptions = utils.validateOptions(
+      result,
+      ruleName,
+      { actual: primary, possible: [true] },
+      {
+        actual: secondary,
+        possible: { breakpoints: [(v) => Number.isInteger(v) && v > 0] },
+        optional: true,
+      },
+    )
+    if (!validOptions) return
+    const allowed = secondary?.breakpoints ?? BREAKPOINTS
+
+    root.walkAtRules(/^media$/i, (atRule) => {
+      const report = (message, word) =>
+        utils.report({ message, node: atRule, result, ruleName, word })
+
+      for (const [, raw] of atRule.params.matchAll(/\(([^()]*)\)/g)) {
+        const feature = raw.trim()
+        const [name, value = ''] = feature.split(':').map((s) => s.trim().toLowerCase())
+        if (name.startsWith('prefers-')) continue
+        if (name === 'max-width') {
+          report(messages.maxWidth(`(${feature})`), feature)
+        } else if (name === 'min-width') {
+          const px = value.match(/^(\d+)px$/)
+          if (!px || !allowed.includes(Number(px[1])))
+            report(messages.value(`(${feature})`, allowed), feature)
+        } else {
+          report(messages.feature(`(${feature})`), feature)
+        }
+      }
+    })
+  }
+}
+
+ruleFunction.ruleName = ruleName
+ruleFunction.messages = messages
+
+export default createPlugin(ruleName, ruleFunction)