cetec-design-system 0.0.2 → 0.0.4

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

@@ -0,0 +1,53 @@
+{
+  "css": [],
+  "cva": [],
+  "sva": [],
+  "jsx": [
+    {
+      "type": "jsx",
+      "name": "Code",
+      "box": {
+        "type": "map",
+        "value": {},
+        "node": "JsxOpeningElement",
+        "line": 38,
+        "column": 7
+      },
+      "data": [
+        {
+          "bg": "transparent"
+        }
+      ]
+    }
+  ],
+  "recipe": {},
+  "pattern": {
+    "Box": [
+      {
+        "type": "jsx-pattern",
+        "name": "Box",
+        "box": {
+          "type": "map",
+          "value": {},
+          "node": "JsxOpeningElement",
+          "line": 24,
+          "column": 5
+        },
+        "data": [
+          {
+            "borderRadius": "8",
+            "overflow": "hidden",
+            "borderWidth": "0",
+            "borderColor": "slate.60",
+            "bg": "slate.80",
+            "color": "slate.5",
+            "px": "16",
+            "py": "8",
+            "my": "8",
+            "whiteSpace": "pre"
+          }
+        ]
+      }
+    ]
+  }
+}

package/styled-system/debug/src__components__Code__Pre.css

@@ -0,0 +1,45 @@
+@layer utilities {
+  .bdr_8 {
+    border-radius: var(--radii-8);
+}
+
+  .ov_hidden {
+    overflow: hidden;
+}
+
+  .bg_slate\.80 {
+    background: var(--colors-slate-80);
+}
+
+  .c_slate\.5 {
+    color: var(--colors-slate-5);
+}
+
+  .px_16 {
+    padding-inline: var(--spacing-16);
+}
+
+  .py_8 {
+    padding-block: var(--spacing-8);
+}
+
+  .my_8 {
+    margin-block: var(--spacing-8);
+}
+
+  .white-space_pre {
+    white-space: pre;
+}
+
+  .bg_transparent {
+    background: var(--colors-transparent);
+}
+
+  .bd-w_0 {
+    border-width: 0;
+}
+
+  .bd-c_slate\.60 {
+    border-color: var(--colors-slate-60);
+}
+}

package/styled-system/debug/src__components__Code__copy-to-clipboard-button.ast.json

@@ -0,0 +1,68 @@
+{
+  "css": [],
+  "cva": [],
+  "sva": [],
+  "jsx": [
+    {
+      "type": "jsx",
+      "name": "CopyIcon",
+      "box": {
+        "type": "map",
+        "value": {},
+        "node": "JsxSelfClosingElement",
+        "line": 38,
+        "column": 18
+      },
+      "data": [
+        {}
+      ]
+    },
+    {
+      "type": "jsx",
+      "name": "CheckIcon",
+      "box": {
+        "type": "map",
+        "value": {},
+        "node": "JsxSelfClosingElement",
+        "line": 38,
+        "column": 33
+      },
+      "data": [
+        {}
+      ]
+    }
+  ],
+  "recipe": {
+    "iconButton": [
+      {
+        "type": "jsx-recipe",
+        "name": "IconButton",
+        "box": {
+          "type": "map",
+          "value": {},
+          "node": "JsxOpeningElement",
+          "line": 30,
+          "column": 5
+        },
+        "data": [
+          {
+            "variant": "ghost",
+            "size": "sm",
+            "display": {
+              "base": "none",
+              "lg": "inline-flex"
+            }
+          },
+          {
+            "color": "gray.dark.12",
+            "_hover": {
+              "bg": "gray.dark.a3"
+            }
+          },
+          {}
+        ]
+      }
+    ]
+  },
+  "pattern": {}
+}

package/styled-system/debug/src__components__Code__copy-to-clipboard-button.css

@@ -0,0 +1,167 @@
+@layer recipes {
+  @layer _base {
+    .icon-button {
+      appearance: none;
+      -webkit-appearance: none;
+      min-width: var(--sizes-0);
+      -webkit-user-select: none;
+      user-select: none;
+      vertical-align: middle;
+      display: flex;
+      gap: var(--spacing-4);
+      border-radius: var(--radii-4);
+      outline-offset: var(--spacing-1);
+      text-decoration: none;
+      white-space: nowrap;
+      cursor: pointer;
+      --transition-duration: var(--durations-fast);
+      transition-duration: var(--durations-fast);
+      --transition-prop: background, border-color, color, box-shadow;
+      transition-property: background, border-color, color, box-shadow;
+      --transition-easing: var(--easings-default);
+      transition-timing-function: var(--easings-default);
+      align-items: center;
+      font-family: var(--fonts-sans);
+      font-size: var(--font-sizes-16);
+      font-weight: var(--font-weights-medium);
+      line-height: var(--line-heights-default);
+      border-width: 1px;
+      border-style: solid;
+      border-color: var(--colors-transparent);
+      outline-width: 2px;
+      outline-style: solid;
+      outline-color: var(--colors-transparent);
+}
+
+    .icon-button:is(:disabled, [disabled], [data-disabled]) {
+      opacity: 0.4;
+      cursor: not-allowed;
+}
+
+    .icon-button svg {
+      fill: var(--colors-current);
+      width: var(--sizes-24);
+      height: var(--sizes-24);
+}
+
+    .icon-button:is(:focus-visible, [data-focus-visible]) {
+      outline-color: var(--colors-slate-80);
+}
+
+    [data-color-mode=dark] .icon-button:is(:focus-visible, [data-focus-visible]) {
+      outline-color: var(--colors-slate-5);
+}
+}
+
+  .icon-button--variant_ghost {
+    background: var(--colors-transparent);
+    color: var(--colors-slate-90);
+}
+
+  [data-color-mode=dark] .icon-button--variant_ghost {
+    color: var(--colors-slate-5);
+}
+
+  .icon-button--variant_ghost:is([data-selected]) {
+    background: var(--colors-slate-90);
+    color: var(--colors-slate-5);
+    border-color: var(--colors-transparent);
+}
+
+  [data-color-mode=dark] .icon-button--variant_ghost:is([data-selected]) {
+    background: var(--colors-slate-5);
+    color: var(--colors-slate-90);
+}
+
+  .icon-button--variant_ghost:is(:hover, [data-hover]) {
+    background: var(--colors-slate-10);
+}
+
+  [data-color-mode=dark] .icon-button--variant_ghost:is(:hover, [data-hover]) {
+    background: var(--colors-slate-60);
+}
+
+  .icon-button--variant_ghost:is(:active, [data-active]) {
+    background: var(--colors-slate-20);
+    border-color: var(--colors-transparent);
+}
+
+  [data-color-mode=dark] .icon-button--variant_ghost:is(:active, [data-active]) {
+    background: var(--colors-slate-70);
+}
+
+  .icon-button--variant_ghost:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+    background: var(--colors-transparent);
+}
+
+  .icon-button--variant_standard {
+    background: var(--colors-slate-5);
+    color: var(--colors-slate-80);
+}
+
+  [data-color-mode=dark] .icon-button--variant_standard {
+    background: var(--colors-slate-70);
+    color: var(--colors-slate-5);
+}
+
+  .icon-button--variant_standard:is([data-selected]) {
+    background: var(--colors-slate-90);
+    color: var(--colors-slate-5);
+    border-color: var(--colors-transparent);
+}
+
+  [data-color-mode=dark] .icon-button--variant_standard:is([data-selected]) {
+    background: var(--colors-slate-5);
+    color: var(--colors-slate-90);
+}
+
+  .icon-button--variant_standard:is(:hover, [data-hover]) {
+    background: var(--colors-slate-10);
+}
+
+  [data-color-mode=dark] .icon-button--variant_standard:is(:hover, [data-hover]) {
+    background: var(--colors-slate-60);
+}
+
+  .icon-button--variant_standard:is(:active, [data-active]) {
+    background: var(--colors-slate-20);
+    border-color: var(--colors-transparent);
+}
+
+  [data-color-mode=dark] .icon-button--variant_standard:is(:active, [data-active]) {
+    background: var(--colors-slate-80);
+}
+
+  .icon-button--variant_standard:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+    background: var(--colors-slate-5);
+}
+
+  [data-color-mode=dark] .icon-button--variant_standard:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+    background: var(--colors-slate-70);
+}
+
+  .icon-button--size_standard {
+    padding: var(--spacing-3);
+    font-size: var(--font-sizes-16);
+}
+}
+
+@layer utilities {
+  .d_none {
+    display: none;
+}
+
+  .c_gray\.dark\.12 {
+    color: gray.dark.12;
+}
+
+  .hover\:bg_gray\.dark\.a3:is(:hover, [data-hover]) {
+    background: gray.dark.a3;
+}
+
+  @media screen and (min-width: 64rem) {
+    .lg\:d_inline-flex {
+      display: inline-flex;
+}
+}
+}

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

@@ -0,0 +1,59 @@
+{
+  "css": [
+    {
+      "type": "css",
+      "name": "css",
+      "box": {
+        "type": "map",
+        "value": {},
+        "node": "CallExpression",
+        "line": 25,
+        "column": 9
+      },
+      "data": [
+        {}
+      ]
+    }
+  ],
+  "cva": [],
+  "sva": [],
+  "jsx": [],
+  "recipe": {
+    "heading": [
+      {
+        "type": "recipe",
+        "name": "heading",
+        "box": {
+          "type": "map",
+          "value": {},
+          "node": "CallExpression",
+          "line": 24,
+          "column": 9
+        },
+        "data": [
+          {
+            "as": "h2"
+          }
+        ]
+      }
+    ]
+  },
+  "pattern": {
+    "Box": [
+      {
+        "type": "jsx-pattern",
+        "name": "Box",
+        "box": {
+          "type": "map",
+          "value": {},
+          "node": "JsxOpeningElement",
+          "line": 21,
+          "column": 5
+        },
+        "data": [
+          {}
+        ]
+      }
+    ]
+  }
+}

package/styled-system/debug/src__components__Heading__Heading.css

@@ -0,0 +1,25 @@
+@layer recipes {
+  @layer _base {
+    .heading {
+      color: var(--colors-slate-90);
+      font-family: var(--fonts-heading);
+      font-weight: var(--font-weights-black);
+}
+
+    [data-color-mode=dark] .heading {
+      color: var(--colors-slate-5);
+}
+}
+
+  .heading--as_h2 {
+    color: var(--colors-slate-90);
+    font-family: var(--fonts-heading);
+    font-weight: var(--font-weights-black);
+    line-height: var(--line-heights-default);
+    font-size: var(--font-sizes-32);
+}
+
+  [data-color-mode=dark] .heading--as_h2 {
+    color: var(--colors-slate-5);
+}
+}

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

@@ -0,0 +1,28 @@
+{
+  "css": [],
+  "cva": [],
+  "sva": [],
+  "jsx": [],
+  "recipe": {},
+  "pattern": {
+    "Box": [
+      {
+        "type": "jsx-pattern",
+        "name": "Box",
+        "box": {
+          "type": "map",
+          "value": {},
+          "node": "JsxOpeningElement",
+          "line": 15,
+          "column": 5
+        },
+        "data": [
+          {
+            "width": 24,
+            "height": 24
+          }
+        ]
+      }
+    ]
+  }
+}

package/styled-system/debug/src__components__Icon__Icon.css

@@ -0,0 +1,9 @@
+@layer utilities {
+  .w_24 {
+    width: var(--sizes-24);
+}
+
+  .h_24 {
+    height: var(--sizes-24);
+}
+}

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

@@ -0,0 +1,27 @@
+{
+  "css": [],
+  "cva": [
+    {
+      "type": "cva",
+      "name": "cva",
+      "box": {
+        "type": "map",
+        "value": {},
+        "node": "CallExpression",
+        "line": 3,
+        "column": 26
+      },
+      "data": [
+        {
+          "base": {
+            "fill": "currentColor"
+          }
+        }
+      ]
+    }
+  ],
+  "sva": [],
+  "jsx": [],
+  "recipe": {},
+  "pattern": {}
+}

package/styled-system/debug/src__components__Icon__iconStyle.css

@@ -0,0 +1,5 @@
+@layer utilities {
+  .fill_currentColor {
+    fill: currentColor;
+}
+}

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

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

package/styled-system/debug/src__components__Input__Input.css

@@ -0,0 +1,79 @@
+@layer recipes {
+  @layer _base {
+    .input {
+      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;
+}
+
+    .input input {
+      width: auto;
+      min-width: var(--sizes-16);
+      max-width: var(--sizes-full);
+      font: inherit;
+      padding-block: var(--spacing-4);
+      padding-inline: var(--spacing-8);
+      resize: none;
+      appearance: none;
+      -webkit-appearance: none;
+      border-radius: var(--radii-4);
+      border-width: 1px;
+      border-style: solid;
+      border-color: var(--colors-transparent);
+}
+
+    .input input,.text {
+      margin: var(--spacing-0);
+}
+
+    .text {
+      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) {
+      .input {
+        color: var(--colors-slate-5);
+}
+}
+}
+
+  .input--stacked_true {
+    grid-template-rows: auto 1fr;
+    align-items: stretch;
+}
+
+  .input--stacked_true input {
+    grid-area: 2 / 1;
+    background: var(--colors-slate-0);
+    border-color: var(--colors-slate-40);
+}
+
+  .text--level_16 {
+    font-size: var(--font-sizes-16);
+}
+
+  .text--font_sans {
+    font-family: var(--fonts-sans);
+}
+
+  @media (prefers-color-scheme: dark) {
+    .input--stacked_true input {
+      background: var(--colors-slate-90);
+      border-color: var(--colors-slate-50);
+}
+}
+}

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

@@ -0,0 +1,45 @@
+{
+  "css": [
+    {
+      "type": "css",
+      "name": "css",
+      "box": {
+        "type": "map",
+        "value": {},
+        "node": "CallExpression",
+        "line": 9,
+        "column": 21
+      },
+      "data": [
+        {
+          "fontSize": "14",
+          "fontWeight": "normal",
+          "lineHeight": "normal",
+          "cursor": "default"
+        }
+      ]
+    }
+  ],
+  "cva": [],
+  "sva": [],
+  "jsx": [],
+  "recipe": {
+    "text": [
+      {
+        "type": "jsx-recipe",
+        "name": "Text",
+        "box": {
+          "type": "map",
+          "value": {},
+          "node": "JsxOpeningElement",
+          "line": 18,
+          "column": 5
+        },
+        "data": [
+          {}
+        ]
+      }
+    ]
+  },
+  "pattern": {}
+}

package/styled-system/debug/src__components__Label__Label.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_sans {
+    font-family: var(--fonts-sans);
+}
+}
+
+@layer utilities {
+  .cursor_default {
+    cursor: default;
+}
+
+  .fs_14 {
+    font-size: var(--font-sizes-14);
+}
+
+  .fw_normal {
+    font-weight: var(--font-weights-normal);
+}
+
+  .lh_normal {
+    line-height: normal;
+}
+}