diff --git a/ui/packages/app/package.json b/ui/packages/app/package.json index 6c790e921a..a3cbe0f1e0 100644 --- a/ui/packages/app/package.json +++ b/ui/packages/app/package.json @@ -20,17 +20,18 @@ "@gradio/form": "workspace:^0.0.1", "@gradio/highlighted-text": "workspace:^0.0.1", "@gradio/html": "workspace:^0.0.1", + "@gradio/icons": "workspace:^0.0.1", "@gradio/image": "workspace:^0.0.1", "@gradio/json": "workspace:^0.0.1", "@gradio/label": "workspace:^0.0.1", "@gradio/markdown": "workspace:^0.0.1", + "@gradio/model3D": "workspace:^0.0.1", + "@gradio/plot": "workspace:^0.0.1", "@gradio/table": "workspace:^0.0.1", "@gradio/tabs": "workspace:^0.0.1", "@gradio/theme": "workspace:^0.0.1", "@gradio/upload": "workspace:^0.0.1", "@gradio/video": "workspace:^0.0.1", - "@gradio/model3D": "workspace:^0.0.1", - "@gradio/plot": "workspace:^0.0.1", "mime-types": "^2.1.34", "svelte-i18n": "^3.3.13" } diff --git a/ui/packages/app/src/components/Dataset/Dataset.svelte b/ui/packages/app/src/components/Dataset/Dataset.svelte index 42d9a52bd1..38eaf35eb8 100644 --- a/ui/packages/app/src/components/Dataset/Dataset.svelte +++ b/ui/packages/app/src/components/Dataset/Dataset.svelte @@ -92,7 +92,9 @@
- + {#each headers as header} {#each selected_samples as sample_row, i} { value = i; dispatch("click", i + page * samples_per_page); diff --git a/ui/packages/app/src/components/Gallery/clear.svg b/ui/packages/app/src/components/Gallery/ClearIcon.svelte similarity index 72% rename from ui/packages/app/src/components/Gallery/clear.svg rename to ui/packages/app/src/components/Gallery/ClearIcon.svelte index 62222d6042..4dd90c76e5 100644 --- a/ui/packages/app/src/components/Gallery/clear.svg +++ b/ui/packages/app/src/components/Gallery/ClearIcon.svelte @@ -1,14 +1,11 @@ - - - + {#if value === null}
- +
{:else} {#if selected_image !== null}
(selected_image = null)} /> @@ -134,6 +134,6 @@ diff --git a/ui/packages/app/src/components/Gallery/ImageIcon.svelte b/ui/packages/app/src/components/Gallery/ImageIcon.svelte new file mode 100644 index 0000000000..707ba61358 --- /dev/null +++ b/ui/packages/app/src/components/Gallery/ImageIcon.svelte @@ -0,0 +1,17 @@ + diff --git a/ui/packages/app/src/components/Gallery/image.svg b/ui/packages/app/src/components/Gallery/image.svg deleted file mode 100644 index b3283c1bb6..0000000000 --- a/ui/packages/app/src/components/Gallery/image.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui/packages/app/src/components/Interpretation/InterpretationComponents/Slider.svelte b/ui/packages/app/src/components/Interpretation/InterpretationComponents/Slider.svelte index 44c729d2e8..f5e35e2038 100644 --- a/ui/packages/app/src/components/Interpretation/InterpretationComponents/Slider.svelte +++ b/ui/packages/app/src/components/Interpretation/InterpretationComponents/Slider.svelte @@ -12,7 +12,7 @@
@@ -121,7 +121,7 @@ color={"grey"} padding={false} > - + {#if mode === "static"} @@ -129,7 +129,7 @@ {:else}
- +
{/if} {:else if _value} diff --git a/ui/packages/app/src/components/TimeSeries/chart.svg b/ui/packages/app/src/components/TimeSeries/chart.svg deleted file mode 100644 index a222886386..0000000000 --- a/ui/packages/app/src/components/TimeSeries/chart.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui/packages/app/src/main.ts b/ui/packages/app/src/main.ts index 37e9f62317..1e72b9eb52 100644 --- a/ui/packages/app/src/main.ts +++ b/ui/packages/app/src/main.ts @@ -57,7 +57,7 @@ interface Config { } window.launchGradio = (config: Config, element_query: string) => { - let target = document.querySelector(element_query); + let target: HTMLElement = document.querySelector(element_query)!; if (!target) { throw new Error( @@ -86,19 +86,8 @@ window.launchGradio = (config: Config, element_query: string) => { props: config }); } else { - let url = new URL(window.location.toString()); - if (config.theme && config.theme.startsWith("dark")) { - target.classList.add("dark"); - config.dark = true; - if (config.theme === "dark") { - config.theme = "default"; - } else { - config.theme = config.theme.substring(5); - } - } else if (url.searchParams.get("__dark-theme") === "true") { - config.dark = true; - target.classList.add("dark"); - } + handle_darkmode(target); + let session_hash = Math.random().toString(36).substring(2); config.fn = fn.bind(null, session_hash, config.root + "api/"); @@ -109,6 +98,42 @@ window.launchGradio = (config: Config, element_query: string) => { } }; +function handle_darkmode(target: HTMLElement) { + let url = new URL(window.location.toString()); + + const color_mode: "light" | "dark" | "system" | null = url.searchParams.get( + "__theme" + ) as "light" | "dark" | "system" | null; + + if (color_mode !== null) { + if (color_mode === "dark") { + target.classList.add("dark"); + } else if (color_mode === "system") { + use_system_theme(target); + } + // light is default, so we don't need to do anything else + } else if (url.searchParams.get("__dark-theme") === "true") { + target.classList.add("dark"); + } else { + console.log("boo"); + use_system_theme(target); + } +} + +function use_system_theme(target: HTMLElement) { + update_scheme(); + window + ?.matchMedia("(prefers-color-scheme: dark)") + ?.addEventListener("change", update_scheme); + + function update_scheme() { + const is_dark = + window?.matchMedia?.("(prefers-color-scheme: dark)").matches ?? null; + + target.classList[is_dark ? "add" : "remove"]("dark"); + } +} + window.launchGradioFromSpaces = async (space: string, target: string) => { const space_url = `https://hf.space/embed/${space}/+/`; let config = await fetch(space_url + "config"); diff --git a/ui/packages/app/tailwind.config.js b/ui/packages/app/tailwind.config.js index 2e8c908a7c..ac737a2986 100644 --- a/ui/packages/app/tailwind.config.js +++ b/ui/packages/app/tailwind.config.js @@ -1,3 +1,5 @@ +const colors = require("tailwindcss/colors"); + const defaultTheme = require("tailwindcss/defaultTheme"); const production = !process.env.ROLLUP_WATCH; @@ -14,6 +16,9 @@ module.exports = { mono: ["IBM Plex Mono", ...defaultTheme.fontFamily.mono] }, colors: { + gray: { + 950: "#090f1f" + }, orange: { 50: "#FFF2E5", 100: "#FFE5CC", diff --git a/ui/packages/atoms/src/BlockLabel.svelte b/ui/packages/atoms/src/BlockLabel.svelte index d515ab43a2..29cea6011f 100644 --- a/ui/packages/atoms/src/BlockLabel.svelte +++ b/ui/packages/atoms/src/BlockLabel.svelte @@ -1,11 +1,13 @@ diff --git a/ui/packages/atoms/src/IconButton.svelte b/ui/packages/atoms/src/IconButton.svelte index d56cf51dd1..bd454bbdaa 100644 --- a/ui/packages/atoms/src/IconButton.svelte +++ b/ui/packages/atoms/src/IconButton.svelte @@ -1,11 +1,11 @@ diff --git a/ui/packages/atoms/src/Panel.svelte b/ui/packages/atoms/src/Panel.svelte index 2b41528935..85ad1a52a1 100644 --- a/ui/packages/atoms/src/Panel.svelte +++ b/ui/packages/atoms/src/Panel.svelte @@ -1,5 +1,5 @@
diff --git a/ui/packages/audio/package.json b/ui/packages/audio/package.json index 6f1bcf71e7..59a4958a38 100644 --- a/ui/packages/audio/package.json +++ b/ui/packages/audio/package.json @@ -9,6 +9,7 @@ "private": true, "dependencies": { "@gradio/atoms": "workspace:^0.0.1", + "@gradio/icons": "workspace:^0.0.1", "@gradio/upload": "workspace:^0.0.1", "svelte-range-slider-pips": "^2.0.1" } diff --git a/ui/packages/audio/src/Audio.svelte b/ui/packages/audio/src/Audio.svelte index a5107a924d..f14b0d03e1 100644 --- a/ui/packages/audio/src/Audio.svelte +++ b/ui/packages/audio/src/Audio.svelte @@ -9,12 +9,11 @@ - + {#if value === null} {#if source === "microphone"}
{#if recording} {:else} -
- + {#each _headers as { value, id }, i (id)} {#each row as { value, id }, j (id)}
{header} @@ -103,7 +105,7 @@
{#each data as row, i (row)}
handle_cell_click(id)} on:dblclick={() => start_edit(id)} on:keydown={(e) => handle_keydown(e, i, j, id)} - class=" outline-none focus-within:ring-1 ring-orange-500 ring-inset focus-within:bg-orange-50 group-last:first:rounded-bl-lg group-last:last:rounded-br-lg relative" + class=" outline-none focus-within:ring-1 ring-orange-500 ring-inset focus-within:bg-orange-50 dark:focus-within:bg-gray-800 group-last:first:rounded-bl-lg group-last:last:rounded-br-lg relative" >
-
+
{#each tabs as t, i} {#if t.id === $selected_tab}
diff --git a/ui/packages/upload/src/clear.svg b/ui/packages/upload/src/clear.svg deleted file mode 100644 index 333d9758a1..0000000000 --- a/ui/packages/upload/src/clear.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - diff --git a/ui/packages/upload/src/edit.svg b/ui/packages/upload/src/edit.svg deleted file mode 100644 index 4259926227..0000000000 --- a/ui/packages/upload/src/edit.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui/packages/upload/src/table.svg b/ui/packages/upload/src/table.svg deleted file mode 100644 index a56f1963a4..0000000000 --- a/ui/packages/upload/src/table.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui/packages/upload/src/video.svg b/ui/packages/upload/src/video.svg deleted file mode 100644 index 4fec77c76b..0000000000 --- a/ui/packages/upload/src/video.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/ui/packages/video/package.json b/ui/packages/video/package.json index 67543f11dd..06559184c7 100644 --- a/ui/packages/video/package.json +++ b/ui/packages/video/package.json @@ -9,6 +9,7 @@ "private": true, "dependencies": { "@gradio/atoms": "workspace:^0.0.1", + "@gradio/icons": "workspace:^0.0.1", "@gradio/image": "workspace:^0.0.1", "@gradio/upload": "workspace:^0.0.1" } diff --git a/ui/packages/video/src/StaticVideo.svelte b/ui/packages/video/src/StaticVideo.svelte index e913b400ce..9a60712102 100644 --- a/ui/packages/video/src/StaticVideo.svelte +++ b/ui/packages/video/src/StaticVideo.svelte @@ -2,8 +2,7 @@ import { createEventDispatcher } from "svelte"; import { Block, BlockLabel } from "@gradio/atoms"; import type { FileData } from "@gradio/upload"; - - import video_icon from "./video.svg"; + import { Video } from "@gradio/icons"; export let value: FileData | null = null; export let label: string | undefined = undefined; @@ -20,10 +19,10 @@ $: value && dispatch("change", value); - + {#if value === null}
- +
{:else} diff --git a/ui/packages/video/src/Video.svelte b/ui/packages/video/src/Video.svelte index c8a4e6597e..f35d719934 100644 --- a/ui/packages/video/src/Video.svelte +++ b/ui/packages/video/src/Video.svelte @@ -4,9 +4,9 @@ import type { FileData } from "@gradio/upload"; import { Block, BlockLabel } from "@gradio/atoms"; import { Webcam } from "@gradio/image"; + import { Video } from "@gradio/icons"; import { prettyBytes, playable } from "./utils"; - import video_icon from "./video.svg"; export let value: FileData | null = null; export let source: string; @@ -42,7 +42,7 @@ $: dispatch("drag", dragging); - + {#if value === null} {#if source === "upload"}

- + diff --git a/ui/packages/workbench/tailwind.config.cjs b/ui/packages/workbench/tailwind.config.cjs index 2e8c908a7c..ac737a2986 100644 --- a/ui/packages/workbench/tailwind.config.cjs +++ b/ui/packages/workbench/tailwind.config.cjs @@ -1,3 +1,5 @@ +const colors = require("tailwindcss/colors"); + const defaultTheme = require("tailwindcss/defaultTheme"); const production = !process.env.ROLLUP_WATCH; @@ -14,6 +16,9 @@ module.exports = { mono: ["IBM Plex Mono", ...defaultTheme.fontFamily.mono] }, colors: { + gray: { + 950: "#090f1f" + }, orange: { 50: "#FFF2E5", 100: "#FFE5CC", diff --git a/ui/pnpm-lock.yaml b/ui/pnpm-lock.yaml index 4b2d3cbc4e..b6c3fc2058 100644 --- a/ui/pnpm-lock.yaml +++ b/ui/pnpm-lock.yaml @@ -77,6 +77,7 @@ importers: '@gradio/form': workspace:^0.0.1 '@gradio/highlighted-text': workspace:^0.0.1 '@gradio/html': workspace:^0.0.1 + '@gradio/icons': workspace:^0.0.1 '@gradio/image': workspace:^0.0.1 '@gradio/json': workspace:^0.0.1 '@gradio/label': workspace:^0.0.1 @@ -101,6 +102,7 @@ importers: '@gradio/form': link:../form '@gradio/highlighted-text': link:../highlighted-text '@gradio/html': link:../html + '@gradio/icons': link:../icons '@gradio/image': link:../image '@gradio/json': link:../json '@gradio/label': link:../label @@ -121,10 +123,12 @@ importers: packages/audio: specifiers: '@gradio/atoms': workspace:^0.0.1 + '@gradio/icons': workspace:^0.0.1 '@gradio/upload': workspace:^0.0.1 svelte-range-slider-pips: ^2.0.1 dependencies: '@gradio/atoms': link:../atoms + '@gradio/icons': link:../icons '@gradio/upload': link:../upload svelte-range-slider-pips: 2.0.2 @@ -136,6 +140,7 @@ importers: packages/chart: specifiers: + '@gradio/icons': workspace:^0.0.1 '@gradio/theme': workspace:^0.0.1 '@gradio/tooltip': workspace:^0.0.1 '@gradio/utils': workspace:^0.0.1 @@ -146,6 +151,7 @@ importers: d3-scale: ^4.0.2 d3-shape: ^3.1.0 dependencies: + '@gradio/icons': link:../icons '@gradio/theme': link:../theme '@gradio/tooltip': link:../tooltip '@gradio/utils': link:../utils @@ -166,9 +172,11 @@ importers: packages/file: specifiers: '@gradio/atoms': workspace:^0.0.1 + '@gradio/icons': workspace:^0.0.1 '@gradio/upload': workspace:^0.0.1 dependencies: '@gradio/atoms': link:../atoms + '@gradio/icons': link:../icons '@gradio/upload': link:../upload packages/form: @@ -191,6 +199,7 @@ importers: packages/image: specifiers: '@gradio/atoms': workspace:^0.0.1 + '@gradio/icons': workspace:^0.0.1 '@gradio/upload': workspace:^0.0.1 cropperjs: ^1.5.12 lazy-brush: ^1.0.1 @@ -198,6 +207,7 @@ importers: tui-image-editor: ^3.15.2 dependencies: '@gradio/atoms': link:../atoms + '@gradio/icons': link:../icons '@gradio/upload': link:../upload cropperjs: 1.5.12 lazy-brush: 1.0.1 @@ -216,11 +226,13 @@ importers: packages/model3D: specifiers: '@gradio/atoms': workspace:^0.0.1 + '@gradio/icons': workspace:^0.0.1 '@gradio/upload': workspace:^0.0.1 babylonjs: ^4.2.1 babylonjs-loaders: ^4.2.1 dependencies: '@gradio/atoms': link:../atoms + '@gradio/icons': link:../icons '@gradio/upload': link:../upload babylonjs: 4.2.2 babylonjs-loaders: 4.2.2 @@ -256,8 +268,10 @@ importers: packages/upload: specifiers: '@gradio/atoms': workspace:^0.0.1 + '@gradio/icons': workspace:^0.0.1 dependencies: '@gradio/atoms': link:../atoms + '@gradio/icons': link:../icons packages/utils: specifiers: @@ -268,10 +282,12 @@ importers: packages/video: specifiers: '@gradio/atoms': workspace:^0.0.1 + '@gradio/icons': workspace:^0.0.1 '@gradio/image': workspace:^0.0.1 '@gradio/upload': workspace:^0.0.1 dependencies: '@gradio/atoms': link:../atoms + '@gradio/icons': link:../icons '@gradio/image': link:../image '@gradio/upload': link:../upload