cetec-design-system 0.0.2 → 0.0.4

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

@@ -0,0 +1,244 @@
+{
+  "css": [],
+  "cva": [],
+  "sva": [],
+  "jsx": [
+    {
+      "type": "jsx",
+      "name": "Icon",
+      "box": {
+        "type": "map",
+        "value": {},
+        "node": "JsxSelfClosingElement",
+        "line": 112,
+        "column": 11
+      },
+      "data": [
+        {}
+      ]
+    },
+    {
+      "type": "jsx",
+      "name": "Icon",
+      "box": {
+        "type": "map",
+        "value": {},
+        "node": "JsxSelfClosingElement",
+        "line": 115,
+        "column": 11
+      },
+      "data": [
+        {}
+      ]
+    },
+    {
+      "type": "jsx",
+      "name": "Icon",
+      "box": {
+        "type": "map",
+        "value": {},
+        "node": "JsxSelfClosingElement",
+        "line": 118,
+        "column": 11
+      },
+      "data": [
+        {}
+      ]
+    },
+    {
+      "type": "jsx",
+      "name": "Icon",
+      "box": {
+        "type": "map",
+        "value": {},
+        "node": "JsxSelfClosingElement",
+        "line": 121,
+        "column": 11
+      },
+      "data": [
+        {}
+      ]
+    },
+    {
+      "type": "jsx",
+      "name": "Icon",
+      "box": {
+        "type": "map",
+        "value": {},
+        "node": "JsxSelfClosingElement",
+        "line": 124,
+        "column": 11
+      },
+      "data": [
+        {}
+      ]
+    }
+  ],
+  "recipe": {
+    "button": [
+      {
+        "type": "jsx-recipe",
+        "name": "Button",
+        "box": {
+          "type": "map",
+          "value": {},
+          "node": "JsxOpeningElement",
+          "line": 104,
+          "column": 9
+        },
+        "data": [
+          {
+            "variant": "default"
+          }
+        ]
+      },
+      {
+        "type": "jsx-recipe",
+        "name": "Button",
+        "box": {
+          "type": "map",
+          "value": {},
+          "node": "JsxOpeningElement",
+          "line": 105,
+          "column": 9
+        },
+        "data": [
+          {
+            "variant": "primary"
+          }
+        ]
+      },
+      {
+        "type": "jsx-recipe",
+        "name": "Button",
+        "box": {
+          "type": "map",
+          "value": {},
+          "node": "JsxOpeningElement",
+          "line": 106,
+          "column": 9
+        },
+        "data": [
+          {
+            "variant": "danger"
+          }
+        ]
+      },
+      {
+        "type": "jsx-recipe",
+        "name": "Button",
+        "box": {
+          "type": "map",
+          "value": {},
+          "node": "JsxOpeningElement",
+          "line": 107,
+          "column": 9
+        },
+        "data": [
+          {
+            "variant": "hollow"
+          }
+        ]
+      },
+      {
+        "type": "jsx-recipe",
+        "name": "Button",
+        "box": {
+          "type": "map",
+          "value": {},
+          "node": "JsxOpeningElement",
+          "line": 108,
+          "column": 9
+        },
+        "data": [
+          {
+            "variant": "utility"
+          }
+        ]
+      }
+    ],
+    "iconButton": [
+      {
+        "type": "jsx-recipe",
+        "name": "IconButton",
+        "box": {
+          "type": "map",
+          "value": {},
+          "node": "JsxOpeningElement",
+          "line": 111,
+          "column": 9
+        },
+        "data": [
+          {
+            "variant": "default"
+          }
+        ]
+      },
+      {
+        "type": "jsx-recipe",
+        "name": "IconButton",
+        "box": {
+          "type": "map",
+          "value": {},
+          "node": "JsxOpeningElement",
+          "line": 114,
+          "column": 9
+        },
+        "data": [
+          {
+            "variant": "primary"
+          }
+        ]
+      },
+      {
+        "type": "jsx-recipe",
+        "name": "IconButton",
+        "box": {
+          "type": "map",
+          "value": {},
+          "node": "JsxOpeningElement",
+          "line": 117,
+          "column": 9
+        },
+        "data": [
+          {
+            "variant": "danger"
+          }
+        ]
+      },
+      {
+        "type": "jsx-recipe",
+        "name": "IconButton",
+        "box": {
+          "type": "map",
+          "value": {},
+          "node": "JsxOpeningElement",
+          "line": 120,
+          "column": 9
+        },
+        "data": [
+          {
+            "variant": "hollow"
+          }
+        ]
+      },
+      {
+        "type": "jsx-recipe",
+        "name": "IconButton",
+        "box": {
+          "type": "map",
+          "value": {},
+          "node": "JsxOpeningElement",
+          "line": 123,
+          "column": 9
+        },
+        "data": [
+          {
+            "variant": "utility"
+          }
+        ]
+      }
+    ]
+  },
+  "pattern": {}
+}

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

@@ -0,0 +1,372 @@
+@layer recipes {
+  @layer _base {
+    .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);
+}
+
+    .button:is(:disabled, [disabled], [data-disabled]) {
+      opacity: 0.4;
+      cursor: not-allowed;
+}
+
+    .button svg {
+      fill: var(--colors-current);
+      width: var(--sizes-24);
+      height: var(--sizes-24);
+}
+
+    .button:is(:focus-visible, [data-focus-visible]) {
+      outline-color: var(--colors-slate-80);
+}
+
+    [data-color-mode=dark] .button:is(:focus-visible, [data-focus-visible]) {
+      outline-color: var(--colors-slate-5);
+}
+
+    .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);
+}
+}
+
+  .button--size_standard {
+    padding-block: var(--spacing-3);
+    padding-inline: var(--spacing-12);
+    font-size: var(--font-sizes-16);
+}
+
+  .button--variant_primary {
+    background: var(--colors-slate-90);
+    color: var(--colors-slate-5);
+}
+
+  [data-color-mode=dark] .button--variant_primary {
+    background: var(--colors-slate-5);
+    color: var(--colors-slate-90);
+}
+
+  .button--variant_primary:is([data-selected]) {
+    background: var(--colors-slate-5);
+    color: var(--colors-slate-90);
+    border-color: var(--colors-transparent);
+}
+
+  [data-color-mode=dark] .button--variant_primary:is([data-selected]) {
+    background: var(--colors-slate-90);
+    color: var(--colors-slate-5);
+}
+
+  .button--variant_primary:is(:hover, [data-hover]) {
+    background: var(--colors-slate-70);
+}
+
+  [data-color-mode=dark] .button--variant_primary:is(:hover, [data-hover]) {
+    background: var(--colors-slate-20);
+}
+
+  .button--variant_primary:is(:active, [data-active]) {
+    background: var(--colors-slate-100);
+    border-color: var(--colors-transparent);
+}
+
+  [data-color-mode=dark] .button--variant_primary:is(:active, [data-active]) {
+    background: var(--colors-slate-30);
+}
+
+  .button--variant_primary:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+    background: var(--colors-slate-90);
+}
+
+  [data-color-mode=dark] .button--variant_primary:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+    background: var(--colors-slate-5);
+}
+
+  .button--variant_danger {
+    background: var(--colors-red-50);
+    color: var(--colors-slate-0);
+}
+
+  [data-color-mode=dark] .button--variant_danger {
+    background: var(--colors-red-40);
+    color: var(--colors-slate-0);
+}
+
+  .button--variant_danger:is(:hover, [data-hover]) {
+    background: var(--colors-red-40);
+}
+
+  [data-color-mode=dark] .button--variant_danger:is(:hover, [data-hover]) {
+    background: var(--colors-red-30);
+}
+
+  .button--variant_danger:is(:active, [data-active]) {
+    background: var(--colors-red-60);
+    border-color: var(--colors-transparent);
+}
+
+  [data-color-mode=dark] .button--variant_danger:is(:active, [data-active]) {
+    background: var(--colors-red-50);
+}
+
+  .button--variant_danger:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+    background: var(--colors-red-50);
+}
+
+  [data-color-mode=dark] .button--variant_danger:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+    background: var(--colors-red-40);
+}
+
+  .button--variant_hollow {
+    background: var(--colors-transparent);
+    color: var(--colors-slate-80);
+    border-color: var(--colors-slate-30);
+}
+
+  [data-color-mode=dark] .button--variant_hollow {
+    color: var(--colors-slate-5);
+    border-color: var(--colors-slate-60);
+}
+
+  .button--variant_hollow:is([data-selected]) {
+    background: var(--colors-slate-90);
+    color: var(--colors-slate-5);
+    border-color: var(--colors-transparent);
+}
+
+  [data-color-mode=dark] .button--variant_hollow:is([data-selected]) {
+    background: var(--colors-slate-5);
+    color: var(--colors-slate-90);
+}
+
+  .button--variant_hollow:is(:hover, [data-hover]) {
+    background: var(--colors-slate-10);
+    border-color: var(--colors-slate-10);
+}
+
+  [data-color-mode=dark] .button--variant_hollow:is(:hover, [data-hover]) {
+    background: var(--colors-slate-60);
+    border-color: var(--colors-slate-60);
+}
+
+  .button--variant_hollow:is(:active, [data-active]) {
+    background: var(--colors-slate-20);
+    border-color: var(--colors-slate-20);
+}
+
+  [data-color-mode=dark] .button--variant_hollow:is(:active, [data-active]) {
+    background: var(--colors-slate-70);
+    border-color: var(--colors-slate-70);
+}
+
+  .button--variant_hollow:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+    background: var(--colors-transparent);
+}
+
+  .icon-button--size_standard {
+    padding: var(--spacing-3);
+    font-size: var(--font-sizes-16);
+}
+
+  .icon-button--variant_primary {
+    background: var(--colors-slate-90);
+    color: var(--colors-slate-5);
+}
+
+  [data-color-mode=dark] .icon-button--variant_primary {
+    background: var(--colors-slate-5);
+    color: var(--colors-slate-90);
+}
+
+  .icon-button--variant_primary:is([data-selected]) {
+    background: var(--colors-slate-5);
+    color: var(--colors-slate-90);
+    border-color: var(--colors-transparent);
+}
+
+  [data-color-mode=dark] .icon-button--variant_primary:is([data-selected]) {
+    background: var(--colors-slate-90);
+    color: var(--colors-slate-5);
+}
+
+  .icon-button--variant_primary:is(:hover, [data-hover]) {
+    background: var(--colors-slate-70);
+}
+
+  [data-color-mode=dark] .icon-button--variant_primary:is(:hover, [data-hover]) {
+    background: var(--colors-slate-20);
+}
+
+  .icon-button--variant_primary:is(:active, [data-active]) {
+    background: var(--colors-slate-100);
+    border-color: var(--colors-transparent);
+}
+
+  [data-color-mode=dark] .icon-button--variant_primary:is(:active, [data-active]) {
+    background: var(--colors-slate-30);
+}
+
+  .icon-button--variant_primary:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+    background: var(--colors-slate-90);
+}
+
+  [data-color-mode=dark] .icon-button--variant_primary:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+    background: var(--colors-slate-5);
+}
+
+  .icon-button--variant_danger {
+    background: var(--colors-red-50);
+    color: var(--colors-slate-0);
+}
+
+  [data-color-mode=dark] .icon-button--variant_danger {
+    background: var(--colors-red-40);
+    color: var(--colors-slate-0);
+}
+
+  .icon-button--variant_danger:is(:hover, [data-hover]) {
+    background: var(--colors-red-40);
+}
+
+  [data-color-mode=dark] .icon-button--variant_danger:is(:hover, [data-hover]) {
+    background: var(--colors-red-30);
+}
+
+  .icon-button--variant_danger:is(:active, [data-active]) {
+    background: var(--colors-red-60);
+    border-color: var(--colors-transparent);
+}
+
+  [data-color-mode=dark] .icon-button--variant_danger:is(:active, [data-active]) {
+    background: var(--colors-red-50);
+}
+
+  .icon-button--variant_danger:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+    background: var(--colors-red-50);
+}
+
+  [data-color-mode=dark] .icon-button--variant_danger:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+    background: var(--colors-red-40);
+}
+
+  .icon-button--variant_hollow {
+    background: var(--colors-transparent);
+    color: var(--colors-slate-80);
+    border-color: var(--colors-slate-30);
+}
+
+  [data-color-mode=dark] .icon-button--variant_hollow {
+    color: var(--colors-slate-5);
+    border-color: var(--colors-slate-60);
+}
+
+  .icon-button--variant_hollow: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_hollow:is([data-selected]) {
+    background: var(--colors-slate-5);
+    color: var(--colors-slate-90);
+}
+
+  .icon-button--variant_hollow:is(:hover, [data-hover]) {
+    background: var(--colors-slate-10);
+    border-color: var(--colors-slate-10);
+}
+
+  [data-color-mode=dark] .icon-button--variant_hollow:is(:hover, [data-hover]) {
+    background: var(--colors-slate-60);
+    border-color: var(--colors-slate-60);
+}
+
+  .icon-button--variant_hollow:is(:active, [data-active]) {
+    background: var(--colors-slate-20);
+    border-color: var(--colors-slate-20);
+}
+
+  [data-color-mode=dark] .icon-button--variant_hollow:is(:active, [data-active]) {
+    background: var(--colors-slate-70);
+    border-color: var(--colors-slate-70);
+}
+
+  .icon-button--variant_hollow:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+    background: var(--colors-transparent);
+}
+}

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

@@ -0,0 +1,32 @@
+{
+  "css": [],
+  "cva": [],
+  "sva": [],
+  "jsx": [],
+  "recipe": {},
+  "pattern": {
+    "Box": [
+      {
+        "type": "jsx-pattern",
+        "name": "Box",
+        "box": {
+          "type": "map",
+          "value": {},
+          "node": "JsxOpeningElement",
+          "line": 13,
+          "column": 5
+        },
+        "data": [
+          {
+            "bg": "slate.80",
+            "position": "relative",
+            "overflow": "auto",
+            "p": "4",
+            "whiteSpace": "pre",
+            "fontSize": "14"
+          }
+        ]
+      }
+    ]
+  }
+}

package/styled-system/debug/src__components__Code__Code.css

@@ -0,0 +1,25 @@
+@layer utilities {
+  .bg_slate\.80 {
+    background: var(--colors-slate-80);
+}
+
+  .pos_relative {
+    position: relative;
+}
+
+  .ov_auto {
+    overflow: auto;
+}
+
+  .p_4 {
+    padding: var(--spacing-4);
+}
+
+  .white-space_pre {
+    white-space: pre;
+}
+
+  .fs_14 {
+    font-size: var(--font-sizes-14);
+}
+}