Change variables

beholdr · Nov 17, 2023 · 5b7adcd · 5b7adcd
1 parent 338c3f3
commit 5b7adcd
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 88 deletions.
diff --git a/index.html b/index.html
@@ -5,61 +5,51 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-  <title>Trilist</title>
+  <title>Trilist Demo</title>
 
   <link rel="icon"
     href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%220.9em%22 font-size=%22120%22>☘️</text></svg>">
-  <style>
-    /*:not(:defined) {
-      visibility: hidden;
-    }*/
 
+  <style>
     html {
       color: #888;
-      font-size: 12px;
-
-      /* color-scheme: dark; */
-
-      /* Overrides */
-      /*
-      --trilist-colors-text: rgb(220, 45, 75);
-      --trilist-colors-primary: rgb(220, 45, 75);
-      --trilist-colors-secondary: rgb(229, 231, 235);
-      --trilist-colors-input-border: rgb(255, 255, 255);
-      --trilist-colors-input-focus: rgb(255, 255, 255);
-      --trilist-colors-input-fone: rgb(255, 255, 255);
-      --trilist-colors-modal-fone: rgb(255, 255, 255);
-      --trilist-colors-icon: rgb(156, 163, 175);
-      --trilist-colors-icon-hover: rgb(107, 114, 128);
-      --trilist-border-radius: 0;
-      --trilist-text-base: 16px;
-      --trilist-text-sm: 14px;
-      */
-
-      /*
-      --trilist-colors-secondary: rgb(76, 76, 76);
-      --trilist-colors-input: rgb(46, 46, 46);
-      --trilist-colors-modal: rgb(28, 28, 28);
-      --trilist-colors-gray: rgb(96, 103, 114);
-      --trilist-colors-gray-alt: rgb(128, 136, 153);
-      */
+      background: #fff;
+      font-size: 24px;
+      text-align: center;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      html {
+        color: #eee;
+        background: #333;
+
+        --trilist-colors-accent: #427cf9;
+        --trilist-colors-tag: #444;
+        --trilist-colors-tag-border: #555;
+        --trilist-colors-tag-text: #84abff;
+        --trilist-colors-input: #6f747d;
+        --trilist-colors-icon: #84868c;
+        --trilist-colors-hover: #9ea3ae;
+        --trilist-colors-text: #eee;
+        --trilist-colors-fone: #333;
+      }
     }
 
     #app {
-      color: #333;
-      margin: 1.5em auto;
+      margin: 1em auto;
       max-width: 1200px;
     }
 
-    @media screen and (min-width: 400px) {
+    @media screen and (min-width: 640px) {
       #app {
         display: grid;
         grid-template-columns: repeat(2, minmax(0, 1fr));
         column-gap: 16px;
+        row-gap: 16px;
       }
     }
 
-    @media screen and (min-width: 768px) {
+    @media screen and (min-width: 1024px) {
       #app {
         grid-template-columns: repeat(4, minmax(0, 1fr));
       }
@@ -68,44 +58,22 @@
 </head>
 
 <body>
-  <p>Examples:</p>
+  <p>Usage examples:</p>
   <div id="app">
-    <trilist-view id="trilist-1"
-      style="--trilist-colors-primary: rgb(220, 45, 75); --trilist-border-radius: 0; --trilist-colors-input-border: rgb(202, 202, 202); --trilist-colors-input-focus: rgb(34, 190, 94);"
+    <trilist-view id="trilist-1" style="--trilist-colors-accent: rgb(220, 45, 75); --trilist-border-radius: 0;"
       selectable filter multiselect expand-selected></trilist-view>
 
-    <trilist-view id="trilist-2" selectable filter animated></trilist-view>
+    <trilist-view id="trilist-2" filter animated></trilist-view>
 
-    <trilist-select id="trilist-3"
-      style="--trilist-colors-primary: rgb(220, 45, 75); --trilist-border-radius: 0; --trilist-colors-input-border: rgb(202, 202, 202); --trilist-colors-input-focus: rgb(34, 190, 94);"
-      placeholder="Выберите свою специальность тут" filter-placeholder="Поиск..." select-button="Выбрать"
-      cancel-button="Отменить" multiselect expand-selected filter animated></trilist-select>
+    <trilist-select id="trilist-3" placeholder="Choose your options" filter-placeholder="Search..."
+      select-button="Choose" cancel-button="Nevermind" multiselect expand-selected filter animated></trilist-select>
 
     <trilist-select id="trilist-4" field-id="key" field-label="name" field-children="items"></trilist-select>
   </div>
 
   <script type="module">
     import { treeData, treeDataAlt } from './test/fixtures.ts'
 
-    const convertData = (data) => {
-      const result = []
-      for (const item of data.data) {
-        if (!item.parents.length) {
-          result.push({ id: item.id, label: item.title })
-        } else {
-          for (const parent of item.parents) {
-            const idx = result.findIndex(el => el.id === parent.id)
-            if (!result[idx].children) {
-              result[idx].children = []
-            }
-            result[idx].children.push({ id: item.id, label: item.title })
-          }
-        }
-      }
-
-      return result
-    }
-
     await Promise.allSettled([
       customElements.whenDefined('trilist-view'),
       customElements.whenDefined('trilist-select'),
@@ -114,28 +82,20 @@
     const el1 = document.getElementById('trilist-1')
     el1.init({
       items: treeData,
-      // value: '2',
+      value: '2',
       disabled: ['21'],
       onChangeHook: (value) => console.log(value)
     })
 
     const el2 = document.getElementById('trilist-2')
     el2.init({
       items: treeData,
-      disabled: ['21'],
+      labelHook: (item) => `<a style="text-decoration: underline" href="#/edit/${item.id}">${item.label}</a>`,
       onChangeHook: (value) => console.log(value)
-      // labelHook: (item) => item.label + ' → <a style="text-decoration: underline" href="' + item.id + '">edit</a>'
     })
 
     const el3 = document.getElementById('trilist-3')
-    fetch('https://rbtu.ru/api/professions')
-      .then(res => res.json())
-      .then(data => {
-        el3.init({
-          items: convertData(data),
-          value: [29, 30, 31, 145]
-        })
-      })
+    el3.init({ items: treeData, value: '21' })
     el3.addEventListener('trilist-change', (e) => console.log(e.detail))
 
     const el4 = document.getElementById('trilist-4')

diff --git a/src/components/Filter.svelte b/src/components/Filter.svelte
@@ -23,14 +23,14 @@
     placeholder={filterPlaceholder}
   />
   <button
-    class="trilist-expand-all form-button px-2 border border-l-0 flex items-center justify-center text-trilist-icon hover:text-trilist-hover border-trilist-input bg-trilist-fone active:bg-trilist-secondary"
+    class="trilist-expand-all form-button px-2 border border-l-0 flex items-center justify-center text-trilist-icon hover:text-trilist-hover border-trilist-input bg-trilist-fone"
     title="Expand all"
     on:click={() => trilist.expandAll()}
   >
     {@html ExpandIcon}
   </button>
   <button
-    class="trilist-collapse-all form-button rounded rounded-l-none px-2 border border-l-0 flex items-center justify-center text-trilist-icon hover:text-trilist-hover border-trilist-input bg-trilist-fone active:bg-trilist-secondary"
+    class="trilist-collapse-all form-button rounded rounded-l-none px-2 border border-l-0 flex items-center justify-center text-trilist-icon hover:text-trilist-hover border-trilist-input bg-trilist-fone"
     title="Collapse all"
     on:click={() => trilist.collapseAll()}
   >

diff --git a/src/components/Modal.svelte b/src/components/Modal.svelte
@@ -44,7 +44,7 @@
   on:click|self={handleCancel}
   on:close={handleClose}
 >
-  <div class="flex flex-col max-h-full">
+  <div class="flex flex-col max-h-full text-trilist-text">
     <header class="sticky top-0 pt-3 sm:pt-6 px-3 sm:px-8 z-10 bg-trilist-fone">
       <button
         class="trilist-dialog-close form-button focus-visible:ring-2 text-trilist-icon hover:text-trilist-hover float-right ml-2 mt-0.5 -mr-1"
@@ -65,7 +65,7 @@
     >
       <!-- svelte-ignore a11y-autofocus -->
       <button
-        class="trilist-dialog-select form-button py-1 px-4 rounded border border-trilist-primary bg-trilist-primary text-white select-none mr-2"
+        class="trilist-dialog-select form-button py-1 px-4 rounded border border-trilist-accent bg-trilist-accent text-white select-none mr-2"
         autofocus
         on:click={handleSubmit}
       >

diff --git a/src/components/Tags.svelte b/src/components/Tags.svelte
@@ -24,7 +24,7 @@
 >
   {#each ids as id}
     <div
-      class="trilist-tag inline-flex pl-2 items-center bg-trilist-secondary ring-1 ring-trilist-tag rounded-sm text-trilist-primary text-sm overflow-hidden"
+      class="trilist-tag inline-flex pl-2 items-center bg-trilist-tag ring-1 ring-trilist-tag-border rounded-sm text-trilist-tag-text text-sm overflow-hidden"
       title={tagItem(id)?.label}
     >
       <div class="truncate">

diff --git a/src/components/Tree.svelte b/src/components/Tree.svelte
@@ -65,7 +65,7 @@
               {#if selectable}
                 <input
                   type="checkbox"
-                  class="form-checkbox mt-1 mr-2 flex-none text-trilist-primary border-trilist-input disabled:cursor-not-allowed"
+                  class="form-checkbox mt-1 mr-2 flex-none text-trilist-accent border-trilist-input disabled:cursor-not-allowed"
                   value={item.id}
                   bind:group={selected}
                   disabled={$disabled.has(item.id)}
@@ -101,7 +101,7 @@
               {#if selectable}
                 <input
                   type="checkbox"
-                  class="form-checkbox mt-1 mr-2 flex-none text-trilist-primary border-trilist-input disabled:cursor-not-allowed"
+                  class="form-checkbox mt-1 mr-2 flex-none text-trilist-accent border-trilist-input disabled:cursor-not-allowed"
                   value={item.id}
                   bind:group={selected}
                   disabled={$disabled.has(item.id)}

diff --git a/src/components/TrilistSelect.svelte b/src/components/TrilistSelect.svelte
@@ -90,7 +90,7 @@
   aria-controls="trilist-dialog"
 >
   <button
-    class="trilist-select-button form-button flex justify-between w-full p-2 text-left select-none rounded border border-trilist-input bg-trilist-fone disabled:opacity-50 disabled:pointer-events-none"
+    class="trilist-select-button form-button flex justify-between w-full p-2 select-none rounded border border-trilist-input bg-trilist-fone disabled:opacity-50 disabled:pointer-events-none"
     {disabled}
     on:click={openModal}
   >

diff --git a/src/theme/app.postcss b/src/theme/app.postcss
@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 :host {
-  @apply text-base;
+  @apply text-left text-base text-trilist-text;
 }
 
 @layer components {
@@ -13,6 +13,6 @@
   .form-button,
   .form-checkbox,
   .form-input {
-    @apply focus-visible:border-trilist-focus focus-visible:ring-trilist-focus focus:ring-trilist-focus;
+    @apply focus-visible:border-trilist-accent focus-visible:ring-trilist-accent focus:ring-trilist-accent;
   }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -8,13 +8,14 @@ export default {
   theme: {
     extend: {
       colors: {
-        'trilist-primary': `var(--trilist-colors-primary, ${colors.blue[600]})`,
-        'trilist-secondary': `var(--trilist-colors-secondary, ${colors.gray[100]})`,
-        'trilist-tag': `var(--trilist-colors-tag, ${colors.gray[200]})`,
+        'trilist-accent': `var(--trilist-colors-accent, ${colors.blue[600]})`,
+        'trilist-tag': `var(--trilist-colors-tag, ${colors.gray[100]})`,
+        'trilist-tag-border': `var(--trilist-colors-tag-border, ${colors.gray[200]})`,
+        'trilist-tag-text': `var(--trilist-colors-tag-text, ${colors.blue[600]})`,
         'trilist-input': `var(--trilist-colors-input, ${colors.gray[400]})`,
         'trilist-icon': `var(--trilist-colors-icon, ${colors.gray[400]})`,
         'trilist-hover': `var(--trilist-colors-hover, ${colors.gray[500]})`,
-        'trilist-focus': `var(--trilist-colors-focus, ${colors.blue[600]})`,
+        'trilist-text': `var(--trilist-colors-text, ${colors.black})`,
         'trilist-fone': `var(--trilist-colors-fone, ${colors.white})`
       },
       borderRadius: {