feat: css variables (#324)

Signed-off-by: Anurag Gupta <[email protected]>
elixir-cloud-aai · Jul 16, 2024 · a137eb4 · a137eb4
1 parent 978c059
commit a137eb4
Show file tree

Hide file tree

Showing 19 changed files with 1,139 additions and 1,517 deletions.
diff --git a/.changeset/real-beds-design.md b/.changeset/real-beds-design.md
@@ -0,0 +1,5 @@
+---
+"@elixir-cloud/design": minor
+---
+
+- Introducing CSS Variables
diff --git a/apps/documentation/components/packages/design/code/codeIndentation.tsx b/apps/documentation/components/packages/design/code/codeIndentation.tsx
@@ -13,7 +13,7 @@ const EccUtilsDesignCode = dynamic(() => import('@elixir-cloud/design/dist/react
 export default function Code() {
   return (
     <div>
-      <EccUtilsDesignCode indentation={8} />
+      <EccUtilsDesignCode />
     </div>
   );
 }
diff --git a/apps/documentation/components/packages/design/code/codeJSON.tsx b/apps/documentation/components/packages/design/code/codeJSON.tsx
@@ -13,7 +13,7 @@ const EccUtilsDesignCode = dynamic(() => import('@elixir-cloud/design/dist/react
 export default function Code() {
   return (
     <div>
-      <EccUtilsDesignCode language='JSON' />
+      <EccUtilsDesignCode language='json' />
     </div>
   );
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/ecc-utils-design/demo/code/index.html b/packages/ecc-utils-design/demo/code/index.html
@@ -15,8 +15,31 @@
       import { html, render } from "lit";
       import "../../dist/components/code/index.js";
 
+      const code = `doe: "a deer, a female deer"
+ray: "a drop of golden sun"
+pi: 3.14159
+xmas: true
+french-hens: 3
+calling-birds:
+  - huey
+  - dewey
+  - louie
+  fred
+xmas-fifth-day:
+  calling-birds: four
+  french-hens: 3
+  golden-rings: 5
+  partridges:
+    count: 1
+    location: "a pear tree"
+  turtle-doves: two
+      `;
+
       render(
-        html`<ecc-utils-design-code> </ecc-utils-design-code> `,
+        html`<ecc-utils-design-code
+          language="yaml"
+          value=${code}
+        ></ecc-utils-design-code>`,
         document.querySelector("#demo")
       );
     </script>

diff --git a/packages/ecc-utils-design/demo/collection/index.html b/packages/ecc-utils-design/demo/collection/index.html
@@ -2,14 +2,14 @@
 <html lang="en-GB">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="./logo-elixir-cloud-aai.svg" type="image/x-icon" />
+		<link rel="icon" href="./logo-elixir-cloud-aai.svg" type="image/x-icon">
+    <title>ecc-utils-design</title>
+    <script src="https://cdn.tailwindcss.com"></script>
     <style>
-      body {
-        background: #f5f5f5;
+      ecc-utils-design-collection {
+        --ecc-corner: 0.5rem;
       }
     </style>
-    <title>ecc-utils-design</title>
-    <script src="https://cdn.tailwindcss.com"></script>
   </head>
   <body>
     <div class="p-10">

diff --git a/packages/ecc-utils-design/demo/details/index.html b/packages/ecc-utils-design/demo/details/index.html
@@ -3,12 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="./logo-elixir-cloud-aai.svg" type="image/x-icon" />
-    <style>
-      body {
-        /* background: #1b1b1b; */
-        background: #e9e9e9;
-      }
-    </style>
+    <style></style>
     <title>ecc-utils-design</title>
     <script src="https://cdn.tailwindcss.com"></script>
   </head>

diff --git a/packages/ecc-utils-design/demo/form/index.html b/packages/ecc-utils-design/demo/form/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="./logo-elixir-cloud-aai.svg" type="image/x-icon" />
-    <style>
+    <!-- <style>
       body {
         background: #f5f5f5;
       }
@@ -84,7 +84,7 @@
         color: #4caf50;
         font-weight: bold;
       }
-    </style>
+    </style> -->
     <title>ecc-utils-design</title>
     <script src="https://cdn.tailwindcss.com"></script>
   </head>
@@ -118,6 +118,23 @@
             tooltip: "Your email address",
           },
         },
+        {
+          key: "18+",
+          label: "18+",
+          type: "switch",
+          fieldOptions: {
+            tooltip: "Are you over 18 years old?",
+          },
+        },
+        {
+          key: "id",
+          label: "ID",
+          type: "file",
+          fieldOptions: {
+            required: true,
+            tooltip: "Your ID document",
+          },
+        },
         {
           key: "address",
           label: "Address",
@@ -186,25 +203,17 @@
                 },
               ],
             },
+            {
+              key: "country",
+              label: "Country",
+              type: "text",
+              fieldOptions: {
+                required: true,
+                tooltip: "Your country name",
+              },
+            },
           ],
         },
-        {
-          key: "18+",
-          label: "18+",
-          type: "switch",
-          fieldOptions: {
-            tooltip: "Are you over 18 years old?",
-          },
-        },
-        {
-          key: "id",
-          label: "ID",
-          type: "file",
-          fieldOptions: {
-            required: true,
-            tooltip: "Your ID document",
-          },
-        },
       ];
 
       render(

diff --git a/packages/ecc-utils-design/package.json b/packages/ecc-utils-design/package.json
@@ -43,10 +43,11 @@
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.8.4",
+    "@elixir-cloud/eslint-config": "*",
     "@lit/react": "*",
     "@open-wc/eslint-config": "*",
     "@open-wc/testing": "*",
-    "@types/js-yaml": "^4.0.9",
+    "@types/ace": "^0.0.52",
     "@types/lodash-es": "^4.17.10",
     "@web/dev-server": "*",
     "@web/dev-server-esbuild": "^0.4.3",
@@ -57,7 +58,6 @@
     "custom-element-vs-code-integration": "*",
     "esbuild": "0.18.20",
     "eslint": "*",
-    "@elixir-cloud/eslint-config": "*",
     "eslint-plugin-prettier": "^4.2.1",
     "globby": "^14.0.0",
     "react": "*",
@@ -67,7 +67,7 @@
   },
   "dependencies": {
     "@shoelace-style/shoelace": "^2.8.0",
-    "js-yaml": "^4.1.0",
+    "ace-builds": "^1.35.0",
     "lit": "^2.8.0",
     "lodash-es": "^4.17.21"
   }

diff --git a/packages/ecc-utils-design/src/components/code/code.styles.ts b/packages/ecc-utils-design/src/components/code/code.styles.ts
@@ -1,15 +1,67 @@
 import { css } from "lit";
 
 const codeStyles = css`
-  sl-textarea::part(form-control-label) {
-    display: flex;
-    gap: var(--sl-spacing-x-small);
-  }
   #label {
+    color: var(--ecc-input-label-color);
+    font-size: var(--ecc-input-label-font-size-medium);
+    font-family: var(--ecc-font-sans);
+    font-weight: var(--ecc-input-font-weight);
+    letter-spacing: var(--ecc-input-letter-spacing);
+  }
+  #editor {
+    width: 100%;
+    height: 12.5ex;
+    resize: vertical;
+    overflow: auto;
+    font-family: var(--ecc-font-mono);
+    background-color: var(--ecc-input-background-color);
+    border: solid var(--ecc-input-border-width) var(--ecc-input-border-color);
+    border-radius: var(--ecc-input-border-radius-medium);
+    font-size: var(--ecc-input-font-size-medium);
+    margin-top: var(--ecc-spacing-medium);
+    margin-bottom: var(--ecc-spacing-medium);
+  }
+  #editor:hover {
+    background-color: var(--ecc-input-background-color-hover);
+    border-color: var(--ecc-input-border-color-hover);
+  }
+  #editor:focus {
+    background-color: var(--ecc-input-background-color-focus);
+    border-color: var(--ecc-input-border-color-focus);
+    box-shadow: 0 0 0 var(--ecc-focus-ring-width)
+      var(--ecc-input-focus-ring-color);
+  }
+  .disabled {
+    background-color: var(--ecc-input-background-color-disabled);
+    border-color: var(--ecc-input-border-color-disabled);
+    opacity: 0.5;
+    cursor: not-allowed !important;
+  }
+  .header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    gap: var(--sl-spacing-x-small);
+  }
+  .ace_gutter-cell.ace_error,
+  .ace_icon.ace_error,
+  .ace_icon.ace_error_fold {
+    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> <path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" /></svg>');
+    background-color: var(--ecc-color-danger-400);
+    color: var(--ecc-color-neutral-1000);
+    background-repeat: no-repeat;
+    background-position: 2px center;
+  }
+  .ace_gutter-cell.ace_warning,
+  .ace_icon.ace_warning,
+  .ace_icon.ace_warning_fold {
+    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 22 22" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z" /></svg>');
+    background-color: var(--ecc-color-warning-400);
+    color: var(--ecc-color-neutral-1000);
+    background-repeat: no-repeat;
+    background-position: 2px center;
+  }
+  .ace_gutter-cell {
+    color: var(--ecc-color-neutral-1000);
   }
 `;