@clay-design-system/tokens 0.12.0 → 0.14.0

package/dist/TOKEN_REFERENCE.md

@@ -1,6 +1,6 @@
 # Token Reference (auto-generated)
 
-> Generated by `@clay-design-system/tokens` build. 1138 tokens total.
+> Generated by `@clay-design-system/tokens` build. 1142 tokens total.
 
 ## aspect-1
 

package/dist/tokens.css

@@ -280,6 +280,9 @@
   --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-media-max-height-tablet: 400; /** `.naMobileMedia` media max-height (768–991) — px */
+  --clay-web-features-section-na-media-max-height-laptop: 400; /** `.naMedia` media max-height (992–1279) — px */
+  --clay-web-features-section-na-media-max-height-desktop: 560; /** `.naMedia` media max-height (1280+) — 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 */
@@ -423,6 +426,7 @@
   --clay-size-icon-check: 14;
   --clay-size-icon-menu: 20;
   --clay-size-input-min-height: 40;
+  --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). */
   --clay-size-toggle-track-width: 40;
   --clay-size-toggle-thumb: 16;
   --clay-size-toggle-thumb-offset: 4;

package/dist/tokens.d.ts

@@ -416,6 +416,9 @@ export declare const ClayWebFeaturesSectionLrmMediaMaxWidthLaptop: number;
 export declare const ClayWebFeaturesSectionStrokeMediaMaxWidthDesktop: number;
 export declare const ClayWebFeaturesSectionTcCardBasisDesktop: number;
 export declare const ClayWebFeaturesSectionNaPanelBasisDesktop: number;
+export declare const ClayWebFeaturesSectionNaMediaMaxHeightTablet: number;
+export declare const ClayWebFeaturesSectionNaMediaMaxHeightLaptop: number;
+export declare const ClayWebFeaturesSectionNaMediaMaxHeightDesktop: number;
 export declare const ClayWebFeaturesSectionNaLabelWrapWidthDesktop: number;
 export declare const ClayWebFeaturesSectionSnRowsMaxWidthDesktop: number;
 export declare const ClayWebFeaturesSectionSectionHeadingMaxWidth: number;
@@ -586,6 +589,7 @@ export declare const ClaySizeIconXsmall: number;
 export declare const ClaySizeIconCheck: number;
 export declare const ClaySizeIconMenu: number;
 export declare const ClaySizeInputMinHeight: number;
+export declare const ClaySizeTapTarget: number;
 export declare const ClaySizeToggleTrackWidth: number;
 export declare const ClaySizeToggleThumb: number;
 export declare const ClaySizeToggleThumbOffset: number;

package/dist/tokens.js

@@ -430,6 +430,9 @@ export const ClayWebFeaturesSectionLrmMediaMaxWidthLaptop = 656; // `.lrmMedia`
 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 ClayWebFeaturesSectionNaMediaMaxHeightTablet = 400; // `.naMobileMedia` media max-height (768–991) — px
+export const ClayWebFeaturesSectionNaMediaMaxHeightLaptop = 400; // `.naMedia` media max-height (992–1279) — px
+export const ClayWebFeaturesSectionNaMediaMaxHeightDesktop = 560; // `.naMedia` media max-height (1280+) — 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
@@ -606,6 +609,7 @@ export const ClaySizeIconXsmall = 12;
 export const ClaySizeIconCheck = 14;
 export const ClaySizeIconMenu = 20;
 export const ClaySizeInputMinHeight = 40;
+export const ClaySizeTapTarget = 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).
 export const ClaySizeToggleTrackWidth = 40;
 export const ClaySizeToggleThumb = 16;
 export const ClaySizeToggleThumbOffset = 4;

package/dist/tokens.resolved.css

@@ -426,6 +426,9 @@
   --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-media-max-height-tablet: 400; /** `.naMobileMedia` media max-height (768–991) — px */
+  --clay-web-features-section-na-media-max-height-laptop: 400; /** `.naMedia` media max-height (992–1279) — px */
+  --clay-web-features-section-na-media-max-height-desktop: 560; /** `.naMedia` media max-height (1280+) — 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 */
@@ -599,6 +602,7 @@
   --clay-size-icon-check: 14;
   --clay-size-icon-menu: 20;
   --clay-size-input-min-height: 40;
+  --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). */
   --clay-size-toggle-track-width: 40;
   --clay-size-toggle-thumb: 16;
   --clay-size-toggle-thumb-offset: 4;

package/package.json

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