Fix more details

Wolfr · Apr 6, 2021 · 68832f4 · 68832f4
1 parent 85224cf
commit 68832f4
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 41 deletions.
diff --git a/TODO.txt b/TODO.txt
@@ -1,6 +1,7 @@
 ## Jungle UI todo
 
 
+* [ ] Something wrong with disabled radio buttons that are checked
 * [ ] correct aria roles listbox item
 * [ ] implement narrow icons for listbox
 * [ ] Dont make listbox depend on icon font, make it its own separate code (carets)

diff --git a/src/routes/index.svelte b/src/routes/index.svelte
@@ -1,5 +1,6 @@
 <script>
-import RichContent from '$lib/RichContent.svelte';
+  import RichContent from '$lib/RichContent.svelte';
+  import Button from '$lib/Button.svelte';
 </script>
 
 <slot />
@@ -11,8 +12,14 @@ import RichContent from '$lib/RichContent.svelte';
       <h1>Sveltekit-JUI (0.1)</h1>
     </div>
     <RichContent>
-      <p>Sveltekit-JUI is a kit of UI components to be used in conjunction with <a href="https://svelte.dev/">Svelte</a> and <a href="https://kit.svelte.dev/docs">Svelte Kit</a>. The J stands for Jungle - UI for user interface.</p>
-      <p>Please use the page tree to navigate to different page examples, or view the <a href="/styleguide">styleguide</a> to view the documented components.</p>
+      <p>Sveltekit-JUI is a kit of UI components to be used in conjunction with <a href="https://svelte.dev/">Svelte</a> and <a href="https://kit.svelte.dev/docs">Svelte Kit</a>. The J stands for Jungle - the UI for user interface.</p>
+      <p>Please use the page tree on the left to navigate to different page examples, or view the <a href="/styleguide">styleguide</a> to view the documented components.</p>
+
+      <div class="c-links-license">
+        <Button href="https://github.com/Wolfr/sveltekit-jui">Code on Github</Button>
+        <p>MIT licensed</p>
+      </div>
+
     </RichContent>
   </div>
 </main>
@@ -45,4 +52,14 @@ import RichContent from '$lib/RichContent.svelte';
     color: #000;
   }
 
+  .c-links-license {
+    display: flex;
+    align-items: center;
+  }
+  
+  .c-links-license p {
+    margin-left: 1.6rem;
+    opacity: .66;
+  }
+
 </style>
diff --git a/src/routes/styleguide/basics/colors.svelte b/src/routes/styleguide/basics/colors.svelte
@@ -79,67 +79,52 @@
     {
       name: 'red-500',
       hex: '#D34D4D',
-      category: 'Functional'
+      category: 'Colors'
     },
     {
       name: 'red-200',
       hex: '#F8E8ED',
-      category: 'Functional'
+      category: 'Colors'
     },
     {
       name: 'green-500',
       hex: '#37C8AB',
-      category: 'Functional'
+      category: 'Colors'
     },
     {
       name: 'green-200',
       hex: '#EBF9F6',
-      category: 'Functional'
+      category: 'Colors'
     },
     {
       name: 'orange-500',
       hex: '#EEB902',
-      category: 'Functional'
+      category: 'Colors'
     },
     {
       name: 'orange-200',
       hex: '#FEF9EA',
-      category: 'Functional'
-    },
-    {
-      name: 'safe-blue',
-      hex: '#1F72FB',
-      category: 'Secondary'
-    },
-    {
-      name: 'safe-red',
-      hex: '#DE3434',
-      category: 'Secondary'
-    },
-    {
-      name: 'safe-green',
-      hex: '#348556',
-      category: 'Secondary'
+      category: 'Colors'
     },
     {
       name: 'purple-500',
       hex: '#7B47EB',
-      category: 'Tertiary'
+      category: 'Colors'
     },
     {
       name: 'purple-200',
       hex: '#E5DAFB',
-      category: 'Tertiary'
+      category: 'Colors'
     },
     {
       name: 'aqua-500',
       hex: '#ACEEFD',
-      category: 'Tertiary'
+      category: 'Colors'
     },
     {
       name: 'darkblue-500',
       hex: '#263261',
-      category: 'Tertiary'
+      category: 'Colors'
     }
   ]
   

diff --git a/src/routes/styleguide/components/radio-button.svelte b/src/routes/styleguide/components/radio-button.svelte
@@ -36,6 +36,7 @@
 
 <StyleguideCard title="Disabled radio button">
   <Radio disabled label="Label" />
+  <br>
   <Radio disabled checked label="Label" />
 </StyleguideCard>
 

diff --git a/src/routes/styleguide/dev-notes/technical-notes.svelte b/src/routes/styleguide/dev-notes/technical-notes.svelte
@@ -1,5 +1,6 @@
 <script>
   import RichContent from '$lib/RichContent.svelte';
+  let pageTitle = "Technical notes";
 </script>
 
 <svelte:head>

diff --git a/src/scss/_s-colors.scss b/src/scss/_s-colors.scss
@@ -28,7 +28,7 @@ $color-brand-blue-800: #003399;
 $color-brand-blue: #427CF0;
 $color-brand-blue-200: #E8EFFC;
 
-/* Functional colors
+/* Colors
 ========================================================================== */
 
 $color-red-500: #D34D4D;
@@ -37,18 +37,7 @@ $color-green-500: #37C8AB;
 $color-green-200: #EBF9F6;
 $color-orange-500: #EEB902;
 $color-orange-200: #FEF9EA;
-
-/* Secondary colors
-========================================================================== */
-
-$color-safe-blue: #1F72FB;
-$color-safe-red: #DE3434;
-$color-safe-green: #348556;
-
-/* Tertiary colors
-========================================================================== */
-
-$color-purple-500: #7B47EB;
 $color-purple-200: #E5DAFB;
+$color-purple-500: #7B47EB;
 $color-aqua-500: #ACEEFD;
 $color-darkblue-500: #263261;