diff --git a/TODO.txt b/TODO.txt index f81d6c8..49d77f8 100644 --- 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 index 74bcf7b..ccf1928 100644 --- a/src/routes/index.svelte +++ b/src/routes/index.svelte @@ -1,5 +1,6 @@ @@ -11,8 +12,14 @@ import RichContent from '$lib/RichContent.svelte';

Sveltekit-JUI (0.1)

-

Sveltekit-JUI is a kit of UI components to be used in conjunction with Svelte and Svelte Kit. The J stands for Jungle - UI for user interface.

-

Please use the page tree to navigate to different page examples, or view the styleguide to view the documented components.

+

Sveltekit-JUI is a kit of UI components to be used in conjunction with Svelte and Svelte Kit. The J stands for Jungle - the UI for user interface.

+

Please use the page tree on the left to navigate to different page examples, or view the styleguide to view the documented components.

+ + +
@@ -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; + } + \ No newline at end of file diff --git a/src/routes/styleguide/basics/colors.svelte b/src/routes/styleguide/basics/colors.svelte index 568542a..6e5abc7 100644 --- 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 index c89d7d5..419f962 100644 --- a/src/routes/styleguide/components/radio-button.svelte +++ b/src/routes/styleguide/components/radio-button.svelte @@ -36,6 +36,7 @@ +
diff --git a/src/routes/styleguide/dev-notes/technical-notes.svelte b/src/routes/styleguide/dev-notes/technical-notes.svelte index f246e36..7d5bb34 100644 --- a/src/routes/styleguide/dev-notes/technical-notes.svelte +++ b/src/routes/styleguide/dev-notes/technical-notes.svelte @@ -1,5 +1,6 @@ diff --git a/src/scss/_s-colors.scss b/src/scss/_s-colors.scss index af9cb2e..273729f 100644 --- 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; \ No newline at end of file