@trackunit/ui-design-tokens 1.9.18 → 1.9.20

package/index.cjs.js

@@ -778,6 +778,33 @@ const CHART_STATUS_COLORS = {
     EXCESSIVE_USAGE: rgbStringToHex(EXCESSIVE_USAGE.variants[500]),
 };
 
+/**
+ * Container query breakpoints - Tailwind CSS defaults.
+ * Used by @container queries (@xs, @sm, @md, etc.)
+ *
+ * Note: These are different from screen breakpoints (media queries).
+ * Container queries respond to container size, not viewport size.
+ */
+const themeContainerSize = {
+    xs: "20rem",
+    sm: "24rem",
+    md: "28rem",
+    lg: "32rem",
+    xl: "36rem",
+    "2xl": "42rem",
+    "3xl": "48rem",
+    "4xl": "56rem",
+    "5xl": "64rem",
+    "6xl": "72rem",
+    "7xl": "80rem",
+};
+// Custom smaller breakpoints (Trackunit additions)
+const themeContainerSizeCustom = {
+    "2xs": "16rem",
+    "3xs": "12rem",
+    "4xs": "8rem",
+};
+
 /**
  * A collection of all the tokens related to elevation in the theme.
  */
@@ -992,6 +1019,8 @@ exports.tailwindPalette = tailwindPalette;
 exports.themeBorderRadius = themeBorderRadius;
 exports.themeBoxShadow = themeBoxShadow;
 exports.themeColors = themeColors;
+exports.themeContainerSize = themeContainerSize;
+exports.themeContainerSizeCustom = themeContainerSizeCustom;
 exports.themeFontSize = themeFontSize;
 exports.themeFontWeight = themeFontWeight;
 exports.themeLineHeight = themeLineHeight;

package/index.esm.js

@@ -776,6 +776,33 @@ const CHART_STATUS_COLORS = {
     EXCESSIVE_USAGE: rgbStringToHex(EXCESSIVE_USAGE.variants[500]),
 };
 
+/**
+ * Container query breakpoints - Tailwind CSS defaults.
+ * Used by @container queries (@xs, @sm, @md, etc.)
+ *
+ * Note: These are different from screen breakpoints (media queries).
+ * Container queries respond to container size, not viewport size.
+ */
+const themeContainerSize = {
+    xs: "20rem",
+    sm: "24rem",
+    md: "28rem",
+    lg: "32rem",
+    xl: "36rem",
+    "2xl": "42rem",
+    "3xl": "48rem",
+    "4xl": "56rem",
+    "5xl": "64rem",
+    "6xl": "72rem",
+    "7xl": "80rem",
+};
+// Custom smaller breakpoints (Trackunit additions)
+const themeContainerSizeCustom = {
+    "2xs": "16rem",
+    "3xs": "12rem",
+    "4xs": "8rem",
+};
+
 /**
  * A collection of all the tokens related to elevation in the theme.
  */
@@ -968,4 +995,4 @@ const zIndex = {
     toast: themeZIndex.toast,
 };
 
-export { CHART_STATUS_COLORS, DEFAULT_CHART_COLORS, DEFAULT_CHART_OTHER, accessManagementModePalette, activityPalette, color, criticalityPalette, elevation, fontFamily, fontSize, fontWeight, generalPalette, groupedPalettes, intentPalette, otherPalette, rentalStatusPalette, sitesPalette, size, tailwindPalette, themeBorderRadius, themeBoxShadow, themeColors, themeFontSize, themeFontWeight, themeLineHeight, themeScreenSize, themeScreenSizeAsNumber, themeSpacing, themeZIndex, themedPalette, trackunitPalette, utilizationPalette, zIndex };
+export { CHART_STATUS_COLORS, DEFAULT_CHART_COLORS, DEFAULT_CHART_OTHER, accessManagementModePalette, activityPalette, color, criticalityPalette, elevation, fontFamily, fontSize, fontWeight, generalPalette, groupedPalettes, intentPalette, otherPalette, rentalStatusPalette, sitesPalette, size, tailwindPalette, themeBorderRadius, themeBoxShadow, themeColors, themeContainerSize, themeContainerSizeCustom, themeFontSize, themeFontWeight, themeLineHeight, themeScreenSize, themeScreenSizeAsNumber, themeSpacing, themeZIndex, themedPalette, trackunitPalette, utilizationPalette, zIndex };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/ui-design-tokens",
-  "version": "1.9.18",
+  "version": "1.9.20",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/index.d.ts

@@ -2,6 +2,7 @@ export * from "./tokens/borderRadius";
 export * from "./tokens/chartColorsDefault";
 export * from "./tokens/colors/index";
 export * from "./tokens/colors/trackunitPalette";
+export * from "./tokens/containerSize";
 export * from "./tokens/elevation";
 export * from "./tokens/screenSize";
 export * from "./tokens/size";

package/src/tokens/containerSize.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Container query breakpoints - Tailwind CSS defaults.
+ * Used by @container queries (@xs, @sm, @md, etc.)
+ *
+ * Note: These are different from screen breakpoints (media queries).
+ * Container queries respond to container size, not viewport size.
+ */
+export declare const themeContainerSize: {
+    readonly xs: "20rem";
+    readonly sm: "24rem";
+    readonly md: "28rem";
+    readonly lg: "32rem";
+    readonly xl: "36rem";
+    readonly "2xl": "42rem";
+    readonly "3xl": "48rem";
+    readonly "4xl": "56rem";
+    readonly "5xl": "64rem";
+    readonly "6xl": "72rem";
+    readonly "7xl": "80rem";
+};
+export declare const themeContainerSizeCustom: {
+    readonly "2xs": "16rem";
+    readonly "3xs": "12rem";
+    readonly "4xs": "8rem";
+};