cetec-design-system 2.3.7 → 3.0.0

package/dist/panda.buildinfo.json

@@ -49,6 +49,7 @@
       "background]___[value:bg.neutral.hovered",
       "fill]___[value:icon",
       "fill]___[value:icon.subtlest",
+      "display]___[value:block",
       "gap]___[value:4",
       "gap]___[value:6",
       "gap]___[value:2",
@@ -83,6 +84,7 @@
       "opacity]___[value:1",
       "opacity]___[value:0",
       "marginInline]___[value:16",
+      "alignItems]___[value:start",
       "width]___[value:fit",
       "flexWrap]___[value:wrap",
       "gap]___[value:1",
@@ -301,7 +303,6 @@
       "gridColumn]___[value:2 / 3",
       "color]___[value:text.success",
       "fill]___[value:icon.decorative.subtle",
-      "alignItems]___[value:start",
       "fontSize]___[value:64",
       "fontSize]___[value:40]___[cond:xs",
       "fontSize]___[value:20]___[cond:sm",
@@ -359,14 +360,6 @@
       "order]___[value:reference",
       "order]___[value:content]___[cond:xs",
       "pointerEvents]___[value:none",
-      "textStyle]___[value:heading.xs",
-      "fontWeight]___[value:semibold",
-      "gridTemplateColumns]___[value:1fr auto 1fr",
-      "marginInline]___[value:8",
-      "marginBlock]___[value:12",
-      "fill]___[value:icon.decorative",
-      "gap]___[value:3",
-      "flex]___[value:1",
       "textStyle]___[value:heading.xs]___[cond:sm",
       "color]___[value:text.disabled",
       "color]___[value:text.placeholder",
@@ -385,16 +378,19 @@
       "width]___[value:40",
       "width]___[value:140",
       "width]___[value:100",
+      "gap]___[value:3",
       "background]___[value:bg.neutral.boldest",
       "height]___[value:120",
       "fill]___[value:current",
       "color]___[value:inherit",
+      "width]___[value:fit-content",
       "color]___[value:success.default",
       "color]___[value:error.default",
       "lineHeight]___[value:default",
       "maxWidth]___[value:3xl",
       "lineHeight]___[value:none",
       "fill]___[value:var(--cetec-colors-bg-neutral-inverse)",
+      "flex]___[value:1",
       "minWidth]___[value:0",
       "height]___[value:0",
       "paddingTop]___[value:16",
@@ -402,6 +398,12 @@
       "width]___[value:lg",
       "minWidth]___[value:216",
       "flex]___[value:none",
+      "textStyle]___[value:heading.xs",
+      "fontWeight]___[value:semibold",
+      "gridTemplateColumns]___[value:1fr auto 1fr",
+      "marginInline]___[value:8",
+      "marginBlock]___[value:12",
+      "fill]___[value:icon.decorative",
       "width]___[value:32",
       "height]___[value:32",
       "border]___[value:default",
@@ -673,6 +675,8 @@
         "size]___[value:24]___[recipe:text",
         "family]___[value:mono]___[recipe:text",
         "size]___[value:12]___[recipe:text",
+        "underline]___[value:true]___[recipe:text",
+        "dashedUnderline]___[value:true]___[recipe:text",
         "size]___[value:32]___[recipe:text",
         "weight]___[value:black]___[recipe:text",
         "truncate]___[value:true]___[recipe:text",
@@ -912,6 +916,7 @@
       "box": [],
       "autocomplete": [
         "size]___[value:md]___[recipe:autocomplete",
+        "layer]___[value:elevated]___[recipe:autocomplete",
         "size]___[value:sm]___[recipe:autocomplete",
         "size]___[value:sm]___[cond:xs]___[recipe:autocomplete",
         "size]___[value:sm]___[cond:sm]___[recipe:autocomplete",
@@ -938,7 +943,8 @@
         "size]___[value:xl]___[cond:md]___[recipe:autocomplete",
         "size]___[value:xl]___[cond:lg]___[recipe:autocomplete",
         "size]___[value:xl]___[cond:xl]___[recipe:autocomplete",
-        "size]___[value:xl]___[cond:2xl]___[recipe:autocomplete"
+        "size]___[value:xl]___[cond:2xl]___[recipe:autocomplete",
+        "layer]___[value:modalFloating]___[recipe:autocomplete"
       ],
       "formField": [
         "layout]___[value:default]___[recipe:formField",
@@ -1019,6 +1025,7 @@
       ],
       "menu": [
         "density]___[value:compact]___[recipe:menu",
+        "layer]___[value:elevated]___[recipe:menu",
         "density]___[value:comfortable]___[recipe:menu",
         "density]___[value:spacious]___[recipe:menu",
         "density]___[value:comfortable]___[cond:xs]___[recipe:menu",
@@ -1039,7 +1046,8 @@
         "density]___[value:spacious]___[cond:md]___[recipe:menu",
         "density]___[value:spacious]___[cond:lg]___[recipe:menu",
         "density]___[value:spacious]___[cond:xl]___[recipe:menu",
-        "density]___[value:spacious]___[cond:2xl]___[recipe:menu"
+        "density]___[value:spacious]___[cond:2xl]___[recipe:menu",
+        "layer]___[value:modalFloating]___[recipe:menu"
       ],
       "list": [
         "density]___[value:compact]___[recipe:list",
@@ -1067,6 +1075,7 @@
       "listItem": [
         "variant]___[value:default]___[recipe:listItem",
         "density]___[value:compact]___[recipe:listItem",
+        "variant]___[value:divider]___[recipe:listItem",
         "variant]___[value:checkbox]___[recipe:listItem",
         "variant]___[value:toggle]___[recipe:listItem",
         "selected]___[value:0]___[recipe:listItem",

package/dist/playroom-static.css

@@ -3250,6 +3250,13 @@
       max-width: var(--cetec-sizes-full);
     }
 
+    .cetec-autocomplete__token[data-new='true'] {
+      background: var(--cetec-colors-transparent);
+      outline-width: var(--cetec-border-widths-1);
+      outline-style: dashed;
+      outline-color: var(--cetec-colors-border-warning);
+    }
+
     .cetec-autocomplete__overflowIndicator {
       background: var(--cetec-colors-bg-neutral);
       padding-inline: var(--cetec-spacing-6);
@@ -3793,6 +3800,7 @@
       position: relative;
       display: inline-flex;
       align-items: center;
+      justify-content: center;
       flex-shrink: 0;
       outline-width: var(--cetec-border-widths-2);
       outline-style: solid;

package/dist/preset.js

@@ -1,5 +1,5 @@
 import "@pandacss/dev";
-import { a } from "./cetec-preset-CZJA5UR0.js";
+import { a } from "./cetec-preset-D23KFUx3.js";
 export {
   a as cetecPreset
 };

package/dist/specs/color-palette.json

@@ -27,8 +27,10 @@
       "bg.cta.bold",
       "bg.danger",
       "bg.danger.bold",
+      "bg.danger.subtle",
       "bg.info",
       "bg.info.bold",
+      "bg.info.subtle",
       "bg.input",
       "bg.neutral",
       "bg.neutral.bold",
@@ -41,8 +43,10 @@
       "bg.slate",
       "bg.success",
       "bg.success.bold",
+      "bg.success.subtle",
       "bg.warning",
       "bg.warning.bold",
+      "bg.warning.subtle",
       "blanket",
       "blue",
       "border",

package/dist/specs/conditions.json

@@ -1309,6 +1309,18 @@
         "<Box margin=\"2\" _collapsed={{ margin: '4' }} />"
       ]
     },
+    {
+      "name": "_new",
+      "value": "&[data-new=true]",
+      "functionExamples": [
+        "css({ margin: { base: '2', _new: '4' } })",
+        "css({ margin: '2', _new: { margin: '4' } })"
+      ],
+      "jsxExamples": [
+        "<Box margin={{ base: '2', _new: '4' }} />",
+        "<Box margin=\"2\" _new={{ margin: '4' }} />"
+      ]
+    },
     {
       "name": "_utility",
       "value": "&[data-utility=true]",

package/dist/specs/recipes.json

@@ -250,6 +250,9 @@
         "underline": [
           "true"
         ],
+        "dashedUnderline": [
+          "true"
+        ],
         "truncate": [
           "true"
         ],
@@ -290,24 +293,26 @@
         "label({ bold: true })",
         "label({ italic: true })",
         "label({ underline: true })",
+        "label({ dashedUnderline: true })",
         "label({ truncate: true })",
         "label({ allCaps: true })",
         "label({ size: '10' })",
         "label({ weight: 'light' })",
         "label({ _disabled: true })",
-        "label({ family: 'heading', bold: true, italic: true, underline: true, truncate: true, allCaps: true, size: '10', weight: 'light', _disabled: true })"
+        "label({ family: 'heading', bold: true, italic: true, underline: true, dashedUnderline: true, truncate: true, allCaps: true, size: '10', weight: 'light', _disabled: true })"
       ],
       "jsxExamples": [
         "<Label family=\"heading\" />",
         "<Label bold={true} />",
         "<Label italic={true} />",
         "<Label underline={true} />",
+        "<Label dashedUnderline={true} />",
         "<Label truncate={true} />",
         "<Label allCaps={true} />",
         "<Label size=\"10\" />",
         "<Label weight=\"light\" />",
         "<Label _disabled={true} />",
-        "<Label family=\"heading\" bold={true} italic={true} underline={true} truncate={true} allCaps={true} size=\"10\" weight=\"light\" _disabled={true} />"
+        "<Label family=\"heading\" bold={true} italic={true} underline={true} dashedUnderline={true} truncate={true} allCaps={true} size=\"10\" weight=\"light\" _disabled={true} />"
       ]
     },
     {
@@ -328,6 +333,9 @@
         "underline": [
           "true"
         ],
+        "dashedUnderline": [
+          "true"
+        ],
         "truncate": [
           "true"
         ],
@@ -355,9 +363,6 @@
           "medium",
           "bold",
           "black"
-        ],
-        "_disabled": [
-          "true"
         ]
       },
       "defaultVariants": {
@@ -368,24 +373,24 @@
         "link({ bold: true })",
         "link({ italic: true })",
         "link({ underline: true })",
+        "link({ dashedUnderline: true })",
         "link({ truncate: true })",
         "link({ allCaps: true })",
         "link({ size: '10' })",
         "link({ weight: 'light' })",
-        "link({ _disabled: true })",
-        "link({ family: 'heading', bold: true, italic: true, underline: true, truncate: true, allCaps: true, size: '10', weight: 'light', _disabled: true })"
+        "link({ family: 'heading', bold: true, italic: true, underline: true, dashedUnderline: true, truncate: true, allCaps: true, size: '10', weight: 'light' })"
       ],
       "jsxExamples": [
         "<Link family=\"heading\" />",
         "<Link bold={true} />",
         "<Link italic={true} />",
         "<Link underline={true} />",
+        "<Link dashedUnderline={true} />",
         "<Link truncate={true} />",
         "<Link allCaps={true} />",
         "<Link size=\"10\" />",
         "<Link weight=\"light\" />",
-        "<Link _disabled={true} />",
-        "<Link family=\"heading\" bold={true} italic={true} underline={true} truncate={true} allCaps={true} size=\"10\" weight=\"light\" _disabled={true} />"
+        "<Link family=\"heading\" bold={true} italic={true} underline={true} dashedUnderline={true} truncate={true} allCaps={true} size=\"10\" weight=\"light\" />"
       ]
     },
     {
@@ -588,6 +593,9 @@
         "underline": [
           "true"
         ],
+        "dashedUnderline": [
+          "true"
+        ],
         "truncate": [
           "true"
         ],
@@ -623,22 +631,24 @@
         "text({ bold: true })",
         "text({ italic: true })",
         "text({ underline: true })",
+        "text({ dashedUnderline: true })",
         "text({ truncate: true })",
         "text({ allCaps: true })",
         "text({ size: '10' })",
         "text({ weight: 'light' })",
-        "text({ family: 'heading', bold: true, italic: true, underline: true, truncate: true, allCaps: true, size: '10', weight: 'light' })"
+        "text({ family: 'heading', bold: true, italic: true, underline: true, dashedUnderline: true, truncate: true, allCaps: true, size: '10', weight: 'light' })"
       ],
       "jsxExamples": [
         "<Text family=\"heading\" />",
         "<Text bold={true} />",
         "<Text italic={true} />",
         "<Text underline={true} />",
+        "<Text dashedUnderline={true} />",
         "<Text truncate={true} />",
         "<Text allCaps={true} />",
         "<Text size=\"10\" />",
         "<Text weight=\"light\" />",
-        "<Text family=\"heading\" bold={true} italic={true} underline={true} truncate={true} allCaps={true} size=\"10\" weight=\"light\" />"
+        "<Text family=\"heading\" bold={true} italic={true} underline={true} dashedUnderline={true} truncate={true} allCaps={true} size=\"10\" weight=\"light\" />"
       ]
     },
     {
@@ -695,6 +705,10 @@
     {
       "name": "autocomplete",
       "variants": {
+        "layer": [
+          "elevated",
+          "modalFloating"
+        ],
         "size": [
           "sm",
           "md",
@@ -703,13 +717,18 @@
         ]
       },
       "defaultVariants": {
-        "size": "md"
+        "size": "md",
+        "layer": "elevated"
       },
       "functionExamples": [
-        "autocomplete({ size: 'sm' })"
+        "autocomplete({ layer: 'elevated' })",
+        "autocomplete({ size: 'sm' })",
+        "autocomplete({ layer: 'elevated', size: 'sm' })"
       ],
       "jsxExamples": [
-        "<Autocomplete size=\"sm\" />"
+        "<Autocomplete layer=\"elevated\" />",
+        "<Autocomplete size=\"sm\" />",
+        "<Autocomplete layer=\"elevated\" size=\"sm\" />"
       ]
     },
     {
@@ -1088,6 +1107,10 @@
     {
       "name": "menu",
       "variants": {
+        "layer": [
+          "elevated",
+          "modalFloating"
+        ],
         "density": [
           "compact",
           "comfortable",
@@ -1098,17 +1121,20 @@
         ]
       },
       "defaultVariants": {
-        "density": "compact"
+        "density": "compact",
+        "layer": "elevated"
       },
       "functionExamples": [
+        "menu({ layer: 'elevated' })",
         "menu({ density: 'compact' })",
         "menu({ panel: true })",
-        "menu({ density: 'compact', panel: true })"
+        "menu({ layer: 'elevated', density: 'compact', panel: true })"
       ],
       "jsxExamples": [
+        "<Menu layer=\"elevated\" />",
         "<Menu density=\"compact\" />",
         "<Menu panel={true} />",
-        "<Menu density=\"compact\" panel={true} />"
+        "<Menu layer=\"elevated\" density=\"compact\" panel={true} />"
       ]
     },
     {

package/dist/specs/semantic-tokens.json

@@ -382,6 +382,48 @@
           ],
           "cssVar": "var(--cetec-colors-bg-success-bold-pressed)"
         },
+        {
+          "name": "bg.success.subtle",
+          "values": [
+            {
+              "value": "{colors.green.5}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.green.80}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--cetec-colors-bg-success-subtle)"
+        },
+        {
+          "name": "bg.success.subtle.hovered",
+          "values": [
+            {
+              "value": "{colors.green.10}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.green.70}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--cetec-colors-bg-success-subtle-hovered)"
+        },
+        {
+          "name": "bg.success.subtle.pressed",
+          "values": [
+            {
+              "value": "{colors.green.20}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.green.90}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--cetec-colors-bg-success-subtle-pressed)"
+        },
         {
           "name": "bg.warning",
           "values": [
@@ -466,6 +508,48 @@
           ],
           "cssVar": "var(--cetec-colors-bg-warning-bold-pressed)"
         },
+        {
+          "name": "bg.warning.subtle",
+          "values": [
+            {
+              "value": "{colors.orange.5}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.orange.80}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--cetec-colors-bg-warning-subtle)"
+        },
+        {
+          "name": "bg.warning.subtle.hovered",
+          "values": [
+            {
+              "value": "{colors.orange.10}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.orange.70}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--cetec-colors-bg-warning-subtle-hovered)"
+        },
+        {
+          "name": "bg.warning.subtle.pressed",
+          "values": [
+            {
+              "value": "{colors.orange.20}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.orange.90}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--cetec-colors-bg-warning-subtle-pressed)"
+        },
         {
           "name": "bg.danger",
           "values": [
@@ -550,6 +634,48 @@
           ],
           "cssVar": "var(--cetec-colors-bg-danger-bold-pressed)"
         },
+        {
+          "name": "bg.danger.subtle",
+          "values": [
+            {
+              "value": "{colors.red.5}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.red.80}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--cetec-colors-bg-danger-subtle)"
+        },
+        {
+          "name": "bg.danger.subtle.hovered",
+          "values": [
+            {
+              "value": "{colors.red.10}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.red.70}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--cetec-colors-bg-danger-subtle-hovered)"
+        },
+        {
+          "name": "bg.danger.subtle.pressed",
+          "values": [
+            {
+              "value": "{colors.red.20}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.red.90}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--cetec-colors-bg-danger-subtle-pressed)"
+        },
         {
           "name": "bg.info",
           "values": [
@@ -634,6 +760,48 @@
           ],
           "cssVar": "var(--cetec-colors-bg-info-bold-pressed)"
         },
+        {
+          "name": "bg.info.subtle",
+          "values": [
+            {
+              "value": "{colors.blue.5}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.blue.80}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--cetec-colors-bg-info-subtle)"
+        },
+        {
+          "name": "bg.info.subtle.hovered",
+          "values": [
+            {
+              "value": "{colors.blue.10}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.blue.70}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--cetec-colors-bg-info-subtle-hovered)"
+        },
+        {
+          "name": "bg.info.subtle.pressed",
+          "values": [
+            {
+              "value": "{colors.blue.20}",
+              "condition": "base"
+            },
+            {
+              "value": "{colors.blue.90}",
+              "condition": "dark"
+            }
+          ],
+          "cssVar": "var(--cetec-colors-bg-info-subtle-pressed)"
+        },
         {
           "name": "bg.cta",
           "values": [
@@ -4389,6 +4557,16 @@
           ],
           "cssVar": "var(--cetec-z-index-modal)"
         },
+        {
+          "name": "modalFloating",
+          "values": [
+            {
+              "value": "{zIndex.1102}",
+              "condition": "base"
+            }
+          ],
+          "cssVar": "var(--cetec-z-index-modal-floating)"
+        },
         {
           "name": "tooltip",
           "values": [

package/dist/specs/tokens.json

@@ -3264,6 +3264,11 @@
           "value": 1101,
           "cssVar": "var(--cetec-z-index-1101)"
         },
+        {
+          "name": "1102",
+          "value": 1102,
+          "cssVar": "var(--cetec-z-index-1102)"
+        },
         {
           "name": "1200",
           "value": 1200,