cetec-design-system 0.0.2 → 0.0.4

package/styled-system/debug/src__components__Link__Link.ast.json

@@ -0,0 +1,72 @@
+{
+  "css": [
+    {
+      "type": "css",
+      "name": "css",
+      "box": {
+        "type": "map",
+        "value": {},
+        "node": "CallExpression",
+        "line": 51,
+        "column": 9
+      },
+      "data": [
+        {}
+      ]
+    }
+  ],
+  "cva": [],
+  "sva": [],
+  "jsx": [
+    {
+      "type": "jsx",
+      "name": "Icon",
+      "box": {
+        "type": "map",
+        "value": {},
+        "node": "JsxSelfClosingElement",
+        "line": 56,
+        "column": 20
+      },
+      "data": [
+        {}
+      ]
+    }
+  ],
+  "recipe": {
+    "link": [
+      {
+        "type": "recipe",
+        "name": "link",
+        "box": {
+          "type": "map",
+          "value": {},
+          "node": "CallExpression",
+          "line": 50,
+          "column": 9
+        },
+        "data": [
+          {}
+        ]
+      }
+    ]
+  },
+  "pattern": {
+    "Box": [
+      {
+        "type": "jsx-pattern",
+        "name": "Box",
+        "box": {
+          "type": "map",
+          "value": {},
+          "node": "JsxOpeningElement",
+          "line": 39,
+          "column": 5
+        },
+        "data": [
+          {}
+        ]
+      }
+    ]
+  }
+}

package/styled-system/debug/src__components__Link__Link.css

@@ -0,0 +1,39 @@
+@layer recipes {
+  @layer _base {
+    .link {
+      display: inline-flex;
+      gap: var(--spacing-1);
+      color: var(--colors-blue-50);
+      text-decoration: none;
+      width: fit-content;
+      cursor: pointer;
+      align-items: center;
+      font-weight: var(--font-weights-medium);
+      background-image: linear-gradient(90deg, transparent 0% 100%);
+      background-size: 100% 1px;
+      background-repeat: no-repeat;
+      background-position-y: 100%;
+}
+
+    [data-color-mode=dark] .link {
+      color: var(--colors-blue-40);
+}
+
+    .link:is(:hover, [data-hover]) {
+      color: var(--colors-blue-40);
+      background-image: linear-gradient(90deg, currentColor 0% 100%);
+}
+
+    [data-color-mode=dark] .link:is(:hover, [data-hover]) {
+      color: var(--colors-blue-30);
+}
+}
+
+  .link--level_16 {
+    font-size: var(--font-sizes-16);
+}
+
+  .link--font_sans {
+    font-family: var(--fonts-sans);
+}
+}

package/styled-system/debug/src__components__Link__linkStyles.ast.json

@@ -0,0 +1,59 @@
+{
+  "css": [],
+  "cva": [
+    {
+      "type": "cva",
+      "name": "cva",
+      "box": {
+        "type": "map",
+        "value": {},
+        "node": "CallExpression",
+        "line": 3,
+        "column": 26
+      },
+      "data": [
+        {
+          "base": {
+            "display": "inline-flex",
+            "alignItems": "center",
+            "gap": "1",
+            "color": {
+              "base": "slate.90",
+              "_dark": "slate.5"
+            },
+            "textDecoration": "none",
+            "backgroundImage": "linear-gradient(90deg, currentColor 0% 100%)",
+            "backgroundSize": "100% 1px",
+            "backgroundRepeat": "no-repeat",
+            "backgroundPositionY": "100%",
+            "width": "fit-content",
+            "cursor": "pointer",
+            "_hover": {
+              "color": {
+                "base": "cyan.50",
+                "_dark": "cyan.40"
+              },
+              "backgroundColor": {
+                "base": "cyan.5",
+                "_dark": "cyan.4"
+              }
+            }
+          },
+          "variants": {
+            "disabled": {
+              "true": {
+                "cursor": "not-allowed",
+                "opacity": 0.7,
+                "pointerEvents": "none"
+              }
+            }
+          }
+        }
+      ]
+    }
+  ],
+  "sva": [],
+  "jsx": [],
+  "recipe": {},
+  "pattern": {}
+}

package/styled-system/debug/src__components__Link__linkStyles.css

@@ -0,0 +1,77 @@
+@layer utilities {
+  .d_inline-flex {
+    display: inline-flex;
+}
+
+  .gap_1 {
+    gap: var(--spacing-1);
+}
+
+  .c_slate\.90 {
+    color: var(--colors-slate-90);
+}
+
+  .td_none {
+    text-decoration: none;
+}
+
+  .w_fit-content {
+    width: fit-content;
+}
+
+  .cursor_pointer {
+    cursor: pointer;
+}
+
+  .cursor_not-allowed {
+    cursor: not-allowed;
+}
+
+  .op_0\.7 {
+    opacity: 0.7;
+}
+
+  .pointer-events_none {
+    pointer-events: none;
+}
+
+  .ai_center {
+    align-items: center;
+}
+
+  .bg-i_linear-gradient\(90deg\,_currentColor_0\%_100\%\) {
+    background-image: linear-gradient(90deg, currentColor 0% 100%);
+}
+
+  .bg-s_100\%_1px {
+    background-size: 100% 1px;
+}
+
+  .bg-r_no-repeat {
+    background-repeat: no-repeat;
+}
+
+  .bg-p-y_100\% {
+    background-position-y: 100%;
+}
+
+  [data-color-mode=dark] .dark\:c_slate\.5 {
+    color: var(--colors-slate-5);
+}
+
+  .hover\:c_cyan\.50:is(:hover, [data-hover]) {
+    color: var(--colors-cyan-50);
+}
+
+  .hover\:bg-c_cyan\.5:is(:hover, [data-hover]) {
+    background-color: var(--colors-cyan-5);
+}
+
+  [data-color-mode=dark] .hover\:dark\:c_cyan\.40:is(:hover, [data-hover]) {
+    color: var(--colors-cyan-40);
+}
+
+  [data-color-mode=dark] .hover\:dark\:bg-c_cyan\.4:is(:hover, [data-hover]) {
+    background-color: cyan.4;
+}
+}

package/styled-system/debug/src__components__Spinner__spinnerStyles.ast.json

@@ -0,0 +1,56 @@
+{
+  "css": [],
+  "cva": [
+    {
+      "type": "cva",
+      "name": "cva",
+      "box": {
+        "type": "map",
+        "value": {},
+        "node": "CallExpression",
+        "line": 3,
+        "column": 29
+      },
+      "data": [
+        {
+          "base": {
+            "aspectRatio": "1/1",
+            "borderRadius": "50%",
+            "borderWidth": "3",
+            "borderStyle": "solid",
+            "borderColor": "transparent",
+            "borderTopColor": "slate.90",
+            "borderBottomColor": "slate.90",
+            "animation": "spin 1s infinite linear",
+            "filter": "invert(1)",
+            "mixBlendMode": "difference",
+            "isolation": "isolate"
+          },
+          "variants": {
+            "size": {
+              "standard": {
+                "height": "24",
+                "minHeight": "24"
+              },
+              "small": {
+                "height": "16",
+                "minHeight": "16"
+              },
+              "large": {
+                "height": "32",
+                "minHeight": "32"
+              }
+            }
+          },
+          "defaultVariants": {
+            "size": "standard"
+          }
+        }
+      ]
+    }
+  ],
+  "sva": [],
+  "jsx": [],
+  "recipe": {},
+  "pattern": {}
+}

package/styled-system/debug/src__components__Spinner__spinnerStyles.css

@@ -0,0 +1,69 @@
+@layer utilities {
+  .asp_1\/1 {
+    aspect-ratio: 1/1;
+}
+
+  .bdr_50\% {
+    border-radius: 50%;
+}
+
+  .anim_spin_1s_infinite_linear {
+    animation: spin 1s infinite linear;
+}
+
+  .filter_invert\(1\) {
+    filter: invert(1);
+}
+
+  .mix-bm_difference {
+    mix-blend-mode: difference;
+}
+
+  .isolation_isolate {
+    isolation: isolate;
+}
+
+  .h_24 {
+    height: var(--sizes-24);
+}
+
+  .min-h_24 {
+    min-height: var(--sizes-24);
+}
+
+  .h_16 {
+    height: var(--sizes-16);
+}
+
+  .min-h_16 {
+    min-height: var(--sizes-16);
+}
+
+  .h_32 {
+    height: var(--sizes-32);
+}
+
+  .min-h_32 {
+    min-height: var(--sizes-32);
+}
+
+  .bd-w_3 {
+    border-width: 3px;
+}
+
+  .border-style_solid {
+    border-style: solid;
+}
+
+  .bd-c_transparent {
+    border-color: var(--colors-transparent);
+}
+
+  .bd-t-c_slate\.90 {
+    border-top-color: var(--colors-slate-90);
+}
+
+  .bd-b-c_slate\.90 {
+    border-bottom-color: var(--colors-slate-90);
+}
+}

package/styled-system/debug/src__components__Text__Text.ast.json

@@ -0,0 +1,57 @@
+{
+  "css": [
+    {
+      "type": "css",
+      "name": "css",
+      "box": {
+        "type": "map",
+        "value": {},
+        "node": "CallExpression",
+        "line": 38,
+        "column": 9
+      },
+      "data": [
+        {}
+      ]
+    }
+  ],
+  "cva": [],
+  "sva": [],
+  "jsx": [],
+  "recipe": {
+    "text": [
+      {
+        "type": "recipe",
+        "name": "text",
+        "box": {
+          "type": "map",
+          "value": {},
+          "node": "CallExpression",
+          "line": 37,
+          "column": 9
+        },
+        "data": [
+          {}
+        ]
+      }
+    ]
+  },
+  "pattern": {
+    "Box": [
+      {
+        "type": "jsx-pattern",
+        "name": "Box",
+        "box": {
+          "type": "map",
+          "value": {},
+          "node": "JsxOpeningElement",
+          "line": 34,
+          "column": 5
+        },
+        "data": [
+          {}
+        ]
+      }
+    ]
+  }
+}

package/styled-system/debug/src__components__Text__Text.css

@@ -0,0 +1,22 @@
+@layer recipes {
+  @layer _base {
+    .text {
+      margin: var(--spacing-0);
+      color: var(--colors-slate-70);
+      line-height: var(--line-heights-default);
+      font-weight: var(--font-weights-normal);
+}
+
+    [data-color-mode=dark] .text {
+      color: var(--colors-slate-20);
+}
+}
+
+  .text--level_16 {
+    font-size: var(--font-sizes-16);
+}
+
+  .text--font_sans {
+    font-family: var(--fonts-sans);
+}
+}

package/styled-system/debug/src__components__Text__Text.stories.ast.json

@@ -0,0 +1,60 @@
+{
+  "css": [],
+  "cva": [],
+  "sva": [],
+  "jsx": [],
+  "recipe": {
+    "text": [
+      {
+        "type": "jsx-recipe",
+        "name": "Text",
+        "box": {
+          "type": "map",
+          "value": {},
+          "node": "JsxOpeningElement",
+          "line": 79,
+          "column": 7
+        },
+        "data": [
+          {
+            "font": "mono",
+            "color": "slate.90"
+          }
+        ]
+      },
+      {
+        "type": "jsx-recipe",
+        "name": "Text",
+        "box": {
+          "type": "map",
+          "value": {},
+          "node": "JsxOpeningElement",
+          "line": 80,
+          "column": 7
+        },
+        "data": [
+          {
+            "color": "gold.50"
+          }
+        ]
+      },
+      {
+        "type": "jsx-recipe",
+        "name": "Text",
+        "box": {
+          "type": "map",
+          "value": {},
+          "node": "JsxOpeningElement",
+          "line": 81,
+          "column": 7
+        },
+        "data": [
+          {
+            "color": "blue.50"
+          }
+        ]
+      }
+    ]
+  },
+  "pattern": {}
+}

package/styled-system/debug/src__components__Text__Text.stories.css

@@ -0,0 +1,40 @@
+@layer recipes {
+  @layer _base {
+    .text {
+      margin: var(--spacing-0);
+      color: var(--colors-slate-70);
+      line-height: var(--line-heights-default);
+      font-weight: var(--font-weights-normal);
+}
+
+    [data-color-mode=dark] .text {
+      color: var(--colors-slate-20);
+}
+}
+
+  .text--level_16 {
+    font-size: var(--font-sizes-16);
+}
+
+  .text--font_mono {
+    font-family: var(--fonts-mono);
+}
+
+  .text--font_sans {
+    font-family: var(--fonts-sans);
+}
+}
+
+@layer utilities {
+  .c_slate\.90 {
+    color: var(--colors-slate-90);
+}
+
+  .c_gold\.50 {
+    color: var(--colors-gold-50);
+}
+
+  .c_blue\.50 {
+    color: var(--colors-blue-50);
+}
+}

package/styled-system/debug/src__components__Textarea__Textarea.ast.json

@@ -0,0 +1,50 @@
+{
+  "css": [],
+  "cva": [],
+  "sva": [],
+  "jsx": [
+    {
+      "type": "jsx",
+      "name": "Label",
+      "box": {
+        "type": "map",
+        "value": {},
+        "node": "JsxOpeningElement",
+        "line": 27,
+        "column": 7
+      },
+      "data": [
+        {}
+      ]
+    }
+  ],
+  "recipe": {
+    "textarea": [
+      {
+        "type": "recipe",
+        "name": "textarea",
+        "box": {},
+        "data": [
+          {}
+        ]
+      }
+    ],
+    "text": [
+      {
+        "type": "jsx-recipe",
+        "name": "Text",
+        "box": {
+          "type": "map",
+          "value": {},
+          "node": "JsxOpeningElement",
+          "line": 34,
+          "column": 19
+        },
+        "data": [
+          {}
+        ]
+      }
+    ]
+  },
+  "pattern": {}
+}

package/styled-system/debug/src__components__Textarea__Textarea.css

@@ -0,0 +1,92 @@
+@layer recipes {
+  @layer _base {
+    .textarea {
+      position: relative;
+      display: inline-grid;
+      vertical-align: top;
+      padding: var(--spacing-0);
+      color: var(--colors-slate-90);
+      border-radius: var(--radii-8);
+      align-items: center;
+      font-family: var(--fonts-sans);
+      font-size: var(--font-sizes-16);
+      font-weight: var(--font-weights-normal);
+      line-height: normal;
+}
+
+    .textarea::after,.textarea textarea {
+      width: auto;
+      min-width: var(--sizes-16);
+      max-width: var(--sizes-full);
+      font: inherit;
+      padding-block: var(--spacing-4);
+      padding-inline: var(--spacing-8);
+      margin: var(--spacing-0);
+      resize: none;
+      appearance: none;
+      -webkit-appearance: none;
+      border-radius: var(--radii-4);
+      border-width: 1px;
+      border-style: solid;
+      border-color: var(--colors-transparent);
+}
+
+    .textarea::after {
+      outline: 1px solid olive;
+      white-space: pre-wrap;
+      transform: translate(4px, 4px);
+      opacity: 0.3;
+      content: attr(data-value) " ";
+}
+
+    .text {
+      margin: var(--spacing-0);
+      color: var(--colors-slate-70);
+      line-height: var(--line-heights-default);
+      font-weight: var(--font-weights-normal);
+}
+
+    [data-color-mode=dark] .text {
+      color: var(--colors-slate-20);
+}
+
+    @media (prefers-color-scheme: dark) {
+      .textarea {
+        color: var(--colors-slate-5);
+}
+}
+}
+
+  .textarea--stacked_true {
+    grid-template-rows: auto 1fr;
+    align-items: stretch;
+}
+
+  .textarea--stacked_true::after,.textarea--stacked_true textarea {
+    grid-area: 2 / 1;
+}
+
+  .textarea--stacked_true textarea {
+    background: var(--colors-slate-0);
+    border-color: var(--colors-slate-40);
+}
+
+  .textarea--autoGrow_false {
+    width: var(--sizes-full);
+}
+
+  .text--level_16 {
+    font-size: var(--font-sizes-16);
+}
+
+  .text--font_sans {
+    font-family: var(--fonts-sans);
+}
+
+  @media (prefers-color-scheme: dark) {
+    .textarea--stacked_true textarea {
+      background: var(--colors-slate-90);
+      border-color: var(--colors-slate-50);
+}
+}
+}